diff --git a/.githooks/pre-push b/.githooks/pre-push
new file mode 100755
index 0000000..0ef9ed1
--- /dev/null
+++ b/.githooks/pre-push
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+# Pre-push gate (tracked). Enable once per clone: git config core.hooksPath .githooks   (or: bun run hooks:install)
+#   1. bun run check: xgen check, every group, the rules group included (fast, no build of the hosts)
+#   2. packages/tooling/bin/audit.sh: no private/, shots/, .fig, design-kit assets, secrets or server addresses in the pushed commits
+# The full gate is bun run check:all; run it before a release.
+set -euo pipefail
+cd "$(git rev-parse --show-toplevel)"
+bun run check
+bash packages/tooling/bin/audit.sh
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b938632..75884ff 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,22 +1,39 @@
+# CI: bun run verify (xgen check + typecheck of the generation layer + tests) with every runtime toolchain present
+# (Go for templ, PHP 8.4 + composer for Twig and Latte, Python 3.13 for Jinja2).
+# UI8KIT_REQUIRE_ALL_RUNTIMES=1 turns a skipped runtime group into a failure, so the template runtimes always run here.
 name: CI
 
 on:
   push:
     branches: [main]
   pull_request:
+  workflow_dispatch:
 
 jobs:
   verify:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
+    timeout-minutes: 30
+    env:
+      UI8KIT_REQUIRE_ALL_RUNTIMES: "1"
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.4.2
       - uses: actions/setup-go@v5
         with:
-          go-version: "1.25"
+          go-version-file: packages/templ/ui/go.mod
+          cache: false
       - uses: shivammathur/setup-php@v2
         with:
-          php-version: "8.3"
-          tools: composer
+          php-version: "8.4"
+          extensions: mbstring
+          tools: composer:v2
+          coverage: none
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.13"
+      - name: toolchains
+        run: bun --version && go version && php --version && composer --version && python3 --version
       - run: bun install --frozen-lockfile
       - run: bun run verify
diff --git a/.gitignore b/.gitignore
index 5f97951..69fd30e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,23 @@
-node_modules/
-examples/node_modules/
+logs
 *.log
+node_modules
+dist
+dist-ssr
+*.local
 .DS_Store
-.dist/
-.manual/
\ No newline at end of file
+.idea
+.vscode/*
+!.vscode/extensions.json
+
+# never published from this repository
+private/
+shots/
+**/public/p/
+*.fig
+.env
+.env.*
+.manual/
+
+# ui8px: generated reports and learn-mode data
+.ui8px/telemetry/
+.ui8px/reports/
diff --git a/.project/README.md b/.project/README.md
deleted file mode 100644
index b2784f7..0000000
--- a/.project/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Project docs
-
-Planning notes for `@ui8kit/codegen`. Implementation details live under
-`docs/`; this folder tracks **near-term** work only.
-
-| Doc | Role |
-|-----|------|
-| [roadmap.md](./roadmap.md) | Active focus + nearest backlog |
-| [progress.md](./progress.md) | Status + journal |
-| [plan/jinja2-runtime.md](./plan/jinja2-runtime.md) | Next runtime: Jinja2 |
-| [plan/rails-erb-runtime.md](./plan/rails-erb-runtime.md) | Later: Rails / ERB (ninth emit) |
diff --git a/.project/plan/jinja2-runtime.md b/.project/plan/jinja2-runtime.md
deleted file mode 100644
index 45dc7da..0000000
--- a/.project/plan/jinja2-runtime.md
+++ /dev/null
@@ -1,103 +0,0 @@
-# Plan: Jinja2 runtime
-
-**Status:** nearest backlog  
-**Goal:** eighth emit target — idiomatic Jinja2 templates from the same brick
-defs as Twig/Latte, with DOM parity.
-
-**Consumers:** Flask (+ uv) SSR apps; BuildY `python-flask-jinja` template
-(see BuildY `plan/php-python-runners.md`).
-
-## Why Jinja2 next
-
-- Same SSR class as Twig/Latte (Twig was inspired by Jinja).
-- Python Flask stack is the light SSR counterpart to Slim/Flight + PHP.
-- Domain IR should not need changes; work is mostly a new `Emitter` + Python
-  runtime helpers + parity harness (same path as [docs/architecture.md](../../docs/architecture.md)
-  “Adding a new runtime”).
-
-## Composition model (expected)
-
-Mirror PHP template engines:
-
-| Concern | Approach |
-|---------|----------|
-| Children | Pre-rendered HTML string, printed unescaped (`|safe`) |
-| Nesting | `{% set inner %}…{% endset %}` then `include` / `macro` with `children=inner` |
-| Attrs | Caller map merged last (Twig-style helper or Jinja filter) |
-| Class merge | Python `cn()` equivalent (plain concat like Go/PHP `Rt::cn`) |
-| Variants | Embed/load colocated `*.variants.json` or shared recipe helper |
-
-Likely output: `ui/<brick>/<Part>.html.j2` (or `.jinja2`) — pick one extension
-in J0 and stick to it.
-
-## Coverage
-
-Start with the **same structural predicate** as Latte/Twig
-(`phpSupported()` / docs/php-complex-parts.md):
-
-- Target **60 / 63** parts initially.
-- Skip `breadcrumb/Breadcrumb`, `select/Select`, `icon/Icon` for the same
-  reasons (forEach / branched root / branched slots).
-- Emit Python class helpers for **all** parts with a classes contract
-  (mirror `Classes.php`).
-
-Prefer renaming the predicate to something engine-neutral
-(`templateSupported` / `ssrTemplateSupported`) when Jinja lands, without
-changing skip semantics.
-
-## Work items
-
-### J0 — Spike + naming
-
-- [ ] Confirm output extension, include path layout, and Flask loader roots.
-- [ ] Decide Python package layout under `generated/` (e.g. `python/ui8kit/`
-      with `cn`, expr helpers, optional Jinja extension/filters).
-- [ ] Document composition snippet in the plan spike notes (welcome-card nest).
-
-### J1 — Emitter
-
-- [ ] `RuntimeName` += `"jinja"`; register in `ALL_RUNTIMES` / CLI `--runtimes`.
-- [ ] `src/emitters/jinja.ts` (+ expr printer; reuse analysis patterns from
-      `php-common` / `twig` where safe).
-- [ ] Wire `generate.ts`: copy `runtime/python/*`, emit helpers, no duplicate paths.
-- [ ] Prop naming: HTML-native (same as Svelte/Vue/PHP).
-
-### J2 — Parity + deps
-
-- [ ] `pyproject.toml` / uv-friendly deps: Jinja2 (pin range).
-- [ ] `cmd/parity-jinja/` harness (JSON in → HTML out), skip if Python/uv missing.
-- [ ] `tests/parity.jinja.test.ts` (or `.py` driven from Bun like PHP suites).
-- [ ] Extend `emitters.test.ts` structural checks.
-
-### J3 — Example
-
-- [ ] `examples/jinja/` — Flask (or minimal Jinja-only server) welcome twin of
-      latte/twig; shared `data/welcome.json` + `web/static` CSS.
-- [ ] `bun run dev:jinja` script + docs in `examples/README.md` / `docs/runtimes.md`.
-
-### J4 — Docs + optional bundle
-
-- [ ] Update overview, architecture, runtimes, contract, testing, getting-started
-      (“seven” → “eight” where accurate).
-- [ ] Optional: `generate:jinja-bundle` (Jinja-only package, latte-bundle analogue).
-
-## Explicit non-goals (this plan)
-
-- Django templates / Mako emitters.
-- Full 63/63 PHP-complex parts before Jinja ships.
-- BuildY runner images (product repo owns `buildy-runner-python`).
-- Changing brick defs solely for Jinja.
-
-## Exit criteria
-
-- `bun run generate --runtimes jinja` (or all-eight default) writes templates +
-  Python helpers.
-- Parity suite green when Python is on PATH (skip cleanly when absent).
-- Welcome example renders the same layout tokens as other runtimes.
-- Docs list Jinja2 as a first-class runtime.
-
-## References
-
-- Latte/Twig composition: [docs/runtimes.md](../../docs/runtimes.md)
-- PHP skips: [docs/php-complex-parts.md](../../docs/php-complex-parts.md)
-- Add-runtime checklist: [docs/architecture.md](../../docs/architecture.md)
diff --git a/.project/plan/rails-erb-runtime.md b/.project/plan/rails-erb-runtime.md
deleted file mode 100644
index 502403d..0000000
--- a/.project/plan/rails-erb-runtime.md
+++ /dev/null
@@ -1,135 +0,0 @@
-# Plan: Rails / ERB runtime
-
-**Status:** later backlog (after Jinja2 J0–J4)  
-**Goal:** ninth emit target — idiomatic **ERB** templates from the same brick
-defs as Twig/Latte/Jinja, with DOM parity.
-
-**Primary consumer:** full **Rails** apps (sqlite-first SSR).  
-**Secondary consumers:** light Ruby stacks (**Sinatra or Roda + ERB**) — same
-templates, thinner host.
-
-BuildY owns runners/images; this repo owns the emitter + Ruby helpers +
-parity. Product track: BuildY `.project/plan/ruby-runners.md` (R0–R4; ERB
-emitter is **R4**, optional, after light template R1).
-
-## Why Rails / ERB (and when)
-
-| | |
-|--|--|
-| **Why ERB** | Default Rails view language; also used by Sinatra/Roda light templates. One emitter serves both levels. |
-| **Why not first** | BuildY ships PHP/Python runners (T0–T3) and Jinja codegen (**J0–J4**) first. Ruby is the **last** template-runner track. |
-| **Gate** | Start Er0 only after Jinja is first-class *and* BuildY has at least a light Ruby preview path (R1) **or** explicit product demand for ui8kit bricks in ERB (BuildY R4). |
-
-Mirror Jinja/Twig lessons: HTML-string children, structural skip predicate,
-class helpers for unsupported parts. No brick-def changes solely for ERB.
-
-## Composition model (expected)
-
-Same SSR class as Twig / Latte / Jinja:
-
-| Concern | Approach |
-|---------|----------|
-| Children | Pre-rendered HTML string, printed unescaped (`<%= children.html_safe %>` / `raw`) |
-| Nesting | Capture (`<% capture do %>…<% end %>`) or partials with a `children:` local |
-| Attrs | Caller hash merged last (Ruby helper, Twig-style) |
-| Class merge | Ruby `cn()` (plain concat, same as PHP `Rt::cn` / Python) |
-| Variants | Colocated `*.variants.json` or shared recipe helper |
-
-Likely output: `ui/<brick>/_part.html.erb` or `ui/<brick>/part.html.erb` —
-pick one partial naming convention in **Er0** and stick to it (Rails partial
-prefix `_` vs Sinatra flat views).
-
-## Coverage
-
-Start with the **same structural predicate** as Latte/Twig/Jinja
-(`phpSupported()` → rename toward `ssrTemplateSupported` when Jinja lands):
-
-- Target **60 / 63** parts initially.
-- Skip `breadcrumb/Breadcrumb`, `select/Select`, `icon/Icon` for the same
-  reasons (forEach / branched root / branched slots).
-- Emit Ruby class helpers for **all** parts with a classes contract
-  (mirror `Classes.php` / Python helpers).
-
-## Work items
-
-### Er0 — Spike + naming
-
-- [ ] Confirm ERB partial layout, Rails `render` locals, and Sinatra/Roda
-      include path (one layout, both hosts).
-- [ ] Decide Ruby package layout under `generated/` (e.g. `ruby/lib/ui8kit/`
-      with `cn`, attr helpers; optional Rails engine vs plain gem).
-- [ ] Document composition snippet (welcome-card nest) for ERB.
-- [ ] Asset story for examples: **importmap / Propshaft** preferred (align
-      BuildY R2); no mandatory Node pipeline in the reference.
-
-### Er1 — Emitter
-
-- [ ] `RuntimeName` += `"erb"` (or `"rails"` only if CLI must be product-named —
-      prefer **`erb`**: language is the emit target).
-- [ ] Register in `ALL_RUNTIMES` / CLI `--runtimes`.
-- [ ] `src/emitters/erb.ts` (+ expr printer; reuse `php-common` / Twig / Jinja
-      analysis where safe).
-- [ ] Wire `generate.ts`: copy `runtime/ruby/*`, emit helpers, no duplicate paths.
-- [ ] Prop naming: HTML-native (same as Svelte/Vue/PHP/Jinja).
-
-### Er2 — Parity + deps
-
-- [ ] Gemspec / Bundler pin for parity harness (MRI 3.3+).
-- [ ] `cmd/parity-erb/` (or `parity-rails/`) harness: JSON in → HTML out;
-      skip cleanly if `ruby` / `bundle` missing.
-- [ ] `tests/parity.erb.test.ts` (Bun-driven like PHP suites).
-- [ ] Extend `emitters.test.ts` structural checks.
-
-### Er3 — Examples
-
-- [ ] `examples/erb-rails/` — minimal **Rails** welcome twin (sqlite optional /
-      no external DB on default route); shared `data/welcome.json` + static CSS.
-- [ ] Optional light twin: `examples/erb-sinatra/` **or** document that the
-      same `ui/` partials render under Sinatra/Roda (one welcome is enough for
-      Er3 if partials are host-agnostic).
-- [ ] `bun run dev:rails` (or `dev:erb`) + docs in `examples/README.md` /
-      `docs/runtimes.md`.
-
-### Er4 — Docs + optional bundle
-
-- [ ] Update overview, architecture, runtimes, contract, testing,
-      getting-started (“eight” → “nine” where accurate, after Jinja ships).
-- [ ] Optional: `generate:erb-bundle` (ERB/Ruby-only package, latte-bundle
-      analogue) for Rails engines / gems.
-
-## Explicit non-goals (this plan)
-
-- Shipping ERB **before** Jinja2 (J0–J4 remains nearest backlog).
-- BuildY runner images / registry (`buildy-runner-ruby`, templates) — product
-  repo owns those (BuildY `plan/ruby-runners.md`).
-- Haml / Slim-ruby emitters (BuildY R4 mentions Slim only as a later option).
-- Full 63/63 complex parts before ERB ships.
-- Mandatory Postgres / Redis / Node asset pipeline for the welcome example.
-- Changing brick defs solely for Rails.
-
-## Exit criteria
-
-- `bun run generate --runtimes erb` writes ERB partials + Ruby helpers.
-- Parity suite green when Ruby/Bundler is on PATH (skip cleanly when absent).
-- Rails welcome example renders the same layout tokens as other runtimes.
-- Docs list ERB as a first-class runtime; BuildY can consume partials in
-  `ruby-rails` and light Sinatra/Roda templates without a second emitter.
-
-## Mapping to BuildY
-
-```text
-BuildY R0–R1  runner + light Sinatra/Roda+ERB   (no codegen required)
-BuildY R2     full Rails template               (manual/LLM ERB OK)
-BuildY R4     optional ui8kit ERB emitter  ←→  this plan Er0–Er4
-```
-
-Codegen does **not** block BuildY R1/R2. Er* starts when Jinja is done and
-R4 demand (or an explicit “emit for Rails bricks” decision) is open.
-
-## References
-
-- BuildY Ruby track: `@buildy-ui/.project/plan/ruby-runners.md`
-- Jinja plan (prior SSR template runtime): [jinja2-runtime.md](./jinja2-runtime.md)
-- Latte/Twig composition: [docs/runtimes.md](../../docs/runtimes.md)
-- PHP skips: [docs/php-complex-parts.md](../../docs/php-complex-parts.md)
-- Add-runtime checklist: [docs/architecture.md](../../docs/architecture.md)
diff --git a/.project/progress.md b/.project/progress.md
deleted file mode 100644
index dbbbd52..0000000
--- a/.project/progress.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Progress
-
-Statuses: pending · in progress · done · backlog
-
-## Near-term
-
-| Track | Status | Exit |
-|-------|--------|------|
-| Jinja2 runtime (J0–J4) | backlog | Eighth runtime + parity + Flask welcome example |
-| Rails / ERB runtime (Er0–Er4) | backlog (later) | Ninth runtime + parity + Rails welcome; after Jinja |
-
-## Journal
-
-### 2026-07-22 — Plan Rails / ERB runtime
-
-- Later codegen track after Jinja: emit target **`erb`**, primary consumer
-  full Rails, secondary Sinatra/Roda (same partials).
-- Mirrors BuildY `ruby-runners.md`: light Ruby first on product side (R1);
-  ui8kit ERB emitter is optional **R4** — does not block BuildY R1/R2.
-- Plan: [plan/rails-erb-runtime.md](./plan/rails-erb-runtime.md).
-
-### 2026-07-21 — Plan Jinja2 runtime
-
-- Accepted as nearest codegen backlog after current seven runtimes.
-- Stack pairing: Flask + Jinja2 (+ uv) on the product side; emitter here.
-- Plan: [plan/jinja2-runtime.md](./plan/jinja2-runtime.md).
diff --git a/.project/roadmap.md b/.project/roadmap.md
deleted file mode 100644
index 8847d32..0000000
--- a/.project/roadmap.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Roadmap
-
-## Active
-
-Keep seven-runtime parity green (templ, react, svelte, vue, solid, latte, twig).
-No breaking IR or brick-contract changes without parity coverage.
-
-## Nearest backlog
-
-| ID | Item | Plan |
-|----|------|------|
-| **J0–J4** | **Jinja2 runtime** (eighth emit target) | [plan/jinja2-runtime.md](./plan/jinja2-runtime.md) |
-
-Primary consumer path: Flask + Jinja2 (BuildY `buildy-runner-python` track).
-Reuse Twig/Latte lessons: HTML-string children, structural skip predicate,
-class helpers for unsupported parts.
-
-## Later (not scheduled)
-
-| ID | Item | Plan |
-|----|------|------|
-| **Er0–Er4** | **Rails / ERB runtime** (ninth emit target) | [plan/rails-erb-runtime.md](./plan/rails-erb-runtime.md) |
-
-Primary consumer: full Rails; same partials for Sinatra/Roda light stacks.
-Aligns with BuildY `plan/ruby-runners.md` **R4** (optional ERB emitter after
-light Ruby R1). Start only after Jinja and product demand / BuildY R4 gate.
-
-Other later items:
-
-- Jinja-only bundle profile (mirror `generate:latte-bundle`)
-- PHP complex-part loops/branches if Jinja gains them first
-- Behavior-driven `components/` (needs `@ui8kit/aria` contract)
diff --git a/.ui8px/gate.json b/.ui8px/gate.json
new file mode 100644
index 0000000..45d30f5
--- /dev/null
+++ b/.ui8px/gate.json
@@ -0,0 +1,10 @@
+{
+  "max": 0,
+  "blocking": [
+    "UI8PX001",
+    "UI8PX003",
+    "UI8PX005",
+    "GRID"
+  ],
+  "why": "hard gate: no blocking ui8px hit over the class sets of xgen/specs (8 px steps, 4 px steps only inside controls). Hairlines (gap-px, p-px) and the colour inset-ring-background/30 are allowed utilities, see plan/UI8KIT-2.0.md (ui8px section)."
+}
diff --git a/.ui8px/policy/allowed.json b/.ui8px/policy/allowed.json
new file mode 100644
index 0000000..cd6c6ca
--- /dev/null
+++ b/.ui8px/policy/allowed.json
@@ -0,0 +1,447 @@
+{
+  "spacing": {
+    "layout": [
+      "0",
+      "2",
+      "4",
+      "6",
+      "8",
+      "10",
+      "12",
+      "14",
+      "16",
+      "18",
+      "20",
+      "22",
+      "24",
+      "26",
+      "28",
+      "30",
+      "32",
+      "34",
+      "36",
+      "38",
+      "40",
+      "42",
+      "44",
+      "46",
+      "48",
+      "50",
+      "52",
+      "54",
+      "56",
+      "58",
+      "60",
+      "62",
+      "64",
+      "66",
+      "68",
+      "70",
+      "72",
+      "74",
+      "76",
+      "78",
+      "80",
+      "82",
+      "84",
+      "86",
+      "88",
+      "90",
+      "92",
+      "94",
+      "96",
+      "98",
+      "100",
+      "102",
+      "104",
+      "106",
+      "108",
+      "110",
+      "112",
+      "114",
+      "116",
+      "118",
+      "120",
+      "122",
+      "124",
+      "126",
+      "128",
+      "130",
+      "132",
+      "134",
+      "136",
+      "138",
+      "140",
+      "142",
+      "144",
+      "146",
+      "148",
+      "150",
+      "152",
+      "154",
+      "156",
+      "158",
+      "160"
+    ],
+    "control": [
+      "0",
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12",
+      "13",
+      "14",
+      "15",
+      "16",
+      "18",
+      "20",
+      "22",
+      "24",
+      "26",
+      "28",
+      "30",
+      "32",
+      "34",
+      "36",
+      "38",
+      "40",
+      "42",
+      "44",
+      "46",
+      "48",
+      "50",
+      "52",
+      "54",
+      "56",
+      "58",
+      "60",
+      "62",
+      "64",
+      "66",
+      "68",
+      "70",
+      "72",
+      "74",
+      "76",
+      "78",
+      "80",
+      "82",
+      "84",
+      "86",
+      "88",
+      "90",
+      "92",
+      "94",
+      "96",
+      "98",
+      "100",
+      "102",
+      "104",
+      "106",
+      "108",
+      "110",
+      "112",
+      "114",
+      "116",
+      "118",
+      "120",
+      "122",
+      "124",
+      "126",
+      "128",
+      "130",
+      "132",
+      "134",
+      "136",
+      "138",
+      "140",
+      "142",
+      "144",
+      "146",
+      "148",
+      "150",
+      "152",
+      "154",
+      "156",
+      "158",
+      "160"
+    ]
+  },
+  "utilities": [
+    "block",
+    "inline",
+    "inline-block",
+    "inline-flex",
+    "flex",
+    "grid",
+    "hidden",
+    "relative",
+    "absolute",
+    "fixed",
+    "sticky",
+    "static",
+    "sr-only",
+    "not-sr-only",
+    "container",
+    "mx-auto",
+    "w-full",
+    "w-auto",
+    "w-fit",
+    "w-screen",
+    "h-full",
+    "h-auto",
+    "h-fit",
+    "h-screen",
+    "min-w-0",
+    "max-w-none",
+    "max-w-sm",
+    "max-w-md",
+    "max-w-lg",
+    "max-w-xl",
+    "max-w-2xl",
+    "max-w-3xl",
+    "max-w-4xl",
+    "max-w-5xl",
+    "max-w-6xl",
+    "max-w-7xl",
+    "overflow-hidden",
+    "overflow-clip",
+    "overflow-auto",
+    "overflow-visible",
+    "overflow-scroll",
+    "object-cover",
+    "object-contain",
+    "object-fill",
+    "object-center",
+    "object-top",
+    "object-bottom",
+    "aspect-auto",
+    "aspect-square",
+    "aspect-video",
+    "truncate",
+    "whitespace-nowrap",
+    "rounded",
+    "rounded-none",
+    "rounded-sm",
+    "rounded-md",
+    "rounded-lg",
+    "rounded-xl",
+    "rounded-2xl",
+    "rounded-3xl",
+    "rounded-full",
+    "shadow",
+    "shadow-none",
+    "shadow-sm",
+    "shadow-md",
+    "shadow-lg",
+    "shadow-xl",
+    "border",
+    "border-0",
+    "border-2",
+    "border-4",
+    "border-border",
+    "bg-background",
+    "bg-card",
+    "bg-muted",
+    "bg-primary",
+    "bg-secondary",
+    "bg-destructive",
+    "bg-accent",
+    "bg-transparent",
+    "text-foreground",
+    "text-muted-foreground",
+    "text-primary",
+    "text-primary-foreground",
+    "text-secondary",
+    "text-secondary-foreground",
+    "text-destructive",
+    "text-destructive-foreground",
+    "text-accent-foreground",
+    "text-card-foreground",
+    "text-xs",
+    "text-sm",
+    "text-base",
+    "text-lg",
+    "text-xl",
+    "text-2xl",
+    "text-3xl",
+    "text-4xl",
+    "text-5xl",
+    "font-normal",
+    "font-medium",
+    "font-semibold",
+    "font-bold",
+    "leading-none",
+    "leading-tight",
+    "leading-normal",
+    "leading-relaxed",
+    "tracking-tight",
+    "tracking-normal",
+    "tracking-wide",
+    "text-left",
+    "text-center",
+    "text-right",
+    "text-justify",
+    "flex-row",
+    "flex-col",
+    "flex-wrap",
+    "flex-nowrap",
+    "grow",
+    "grow-0",
+    "shrink",
+    "shrink-0",
+    "items-start",
+    "items-center",
+    "items-end",
+    "items-stretch",
+    "justify-start",
+    "justify-center",
+    "justify-end",
+    "justify-between",
+    "justify-around",
+    "justify-evenly",
+    "grid-cols-1",
+    "grid-cols-2",
+    "grid-cols-3",
+    "grid-cols-4",
+    "grid-cols-5",
+    "grid-cols-6",
+    "grid-cols-12",
+    "inset-ring",
+    "inset-ring-2",
+    "inset-ring-border",
+    "inset-ring-input",
+    "inset-ring-transparent",
+    "inset-ring-current",
+    "inset-ring-primary",
+    "inset-ring-destructive",
+    "inset-ring-foreground",
+    "inset-ring-ring",
+    "inset-x-0",
+    "inset-y-0",
+    "ml-auto",
+    "mr-auto",
+    "mt-auto",
+    "mb-auto",
+    "my-auto",
+    "m-auto",
+    "w-px",
+    "h-px",
+    "max-w-xs",
+    "max-w-full",
+    "min-w-lg",
+    "min-h-screen",
+    "min-h-0",
+    "z-0",
+    "z-10",
+    "z-20",
+    "z-30",
+    "z-40",
+    "z-50",
+    "w-1/2",
+    "w-1/3",
+    "w-2/3",
+    "w-1/4",
+    "w-3/4",
+    "w-5/6",
+    "top-1/2",
+    "left-1/2",
+    "inset-ring-0",
+    "size-0",
+    "size-2",
+    "size-4",
+    "size-6",
+    "size-8",
+    "size-10",
+    "size-12",
+    "size-14",
+    "size-16",
+    "size-18",
+    "size-20",
+    "size-22",
+    "size-24",
+    "size-26",
+    "size-28",
+    "size-30",
+    "size-32",
+    "size-34",
+    "size-36",
+    "size-38",
+    "size-40",
+    "size-42",
+    "size-44",
+    "size-46",
+    "size-48",
+    "size-50",
+    "size-52",
+    "size-54",
+    "size-56",
+    "size-58",
+    "size-60",
+    "size-62",
+    "size-64",
+    "size-66",
+    "size-68",
+    "size-70",
+    "size-72",
+    "size-74",
+    "size-76",
+    "size-78",
+    "size-80",
+    "size-82",
+    "size-84",
+    "size-86",
+    "size-88",
+    "size-90",
+    "size-92",
+    "size-94",
+    "size-96",
+    "size-98",
+    "size-100",
+    "size-102",
+    "size-104",
+    "size-106",
+    "size-108",
+    "size-110",
+    "size-112",
+    "size-114",
+    "size-116",
+    "size-118",
+    "size-120",
+    "size-122",
+    "size-124",
+    "size-126",
+    "size-128",
+    "size-130",
+    "size-132",
+    "size-134",
+    "size-136",
+    "size-138",
+    "size-140",
+    "size-142",
+    "size-144",
+    "size-146",
+    "size-148",
+    "size-150",
+    "size-152",
+    "size-154",
+    "size-156",
+    "size-158",
+    "size-160",
+    "size-full",
+    "size-px",
+    "gap-px",
+    "p-px",
+    "inset-ring-background/30",
+    "inset-x-12",
+    "h-lh"
+  ]
+}
diff --git a/.ui8px/policy/denied.json b/.ui8px/policy/denied.json
new file mode 100644
index 0000000..c330feb
--- /dev/null
+++ b/.ui8px/policy/denied.json
@@ -0,0 +1,16 @@
+{
+  "utilities": {
+    "bg-red-500": {
+      "reason": "Use semantic color tokens instead of raw palette colors.",
+      "suggest": [
+        "bg-destructive"
+      ]
+    },
+    "text-red-500": {
+      "reason": "Use semantic color tokens instead of raw palette colors.",
+      "suggest": [
+        "text-destructive"
+      ]
+    }
+  }
+}
diff --git a/.ui8px/policy/groups.json b/.ui8px/policy/groups.json
new file mode 100644
index 0000000..f02c210
--- /dev/null
+++ b/.ui8px/policy/groups.json
@@ -0,0 +1,57 @@
+{
+  "conflictGroups": {
+    "display": [
+      "block",
+      "inline",
+      "inline-block",
+      "inline-flex",
+      "flex",
+      "grid",
+      "hidden"
+    ],
+    "flexDirection": [
+      "flex-row",
+      "flex-col",
+      "flex-row-reverse",
+      "flex-col-reverse"
+    ],
+    "flexWrap": [
+      "flex-wrap",
+      "flex-nowrap"
+    ],
+    "items": [
+      "items-*"
+    ],
+    "justify": [
+      "justify-*"
+    ],
+    "textSize": [
+      "text-xs",
+      "text-sm",
+      "text-base",
+      "text-lg",
+      "text-xl",
+      "text-2xl",
+      "text-3xl",
+      "text-4xl",
+      "text-5xl"
+    ],
+    "textAlign": [
+      "text-left",
+      "text-center",
+      "text-right",
+      "text-justify"
+    ],
+    "background": [
+      "bg-*"
+    ],
+    "radius": [
+      "rounded",
+      "rounded-*"
+    ],
+    "shadow": [
+      "shadow",
+      "shadow-*"
+    ]
+  }
+}
diff --git a/.ui8px/policy/patterns.json b/.ui8px/policy/patterns.json
new file mode 100644
index 0000000..6ff527e
--- /dev/null
+++ b/.ui8px/policy/patterns.json
@@ -0,0 +1,3 @@
+{
+  "patterns": {}
+}
diff --git a/.ui8px/policy/scopes.json b/.ui8px/policy/scopes.json
new file mode 100644
index 0000000..f203216
--- /dev/null
+++ b/.ui8px/policy/scopes.json
@@ -0,0 +1,58 @@
+{
+  "defaultScope": "layout",
+  "scopes": [
+    {
+      "name": "controls",
+      "files": [
+        ".ui8px/extract/specs/ui/button.*",
+        ".ui8px/extract/specs/ui/button-plain.*",
+        ".ui8px/extract/specs/ui/badge.*",
+        ".ui8px/extract/specs/ui/iconbadge.*",
+        ".ui8px/extract/specs/ui/checkbox.*",
+        ".ui8px/extract/specs/ui/radio.*",
+        ".ui8px/extract/specs/ui/switch.*",
+        ".ui8px/extract/specs/ui/select.*",
+        ".ui8px/extract/specs/ui/input.*",
+        ".ui8px/extract/specs/ui/textarea.*",
+        ".ui8px/extract/specs/ui/range.*",
+        ".ui8px/extract/specs/ui/label.*",
+        ".ui8px/extract/specs/ui/meter.*",
+        ".ui8px/extract/specs/ui/progress.*",
+        ".ui8px/extract/specs/ui/summary.*",
+        ".ui8px/extract/specs/recipes/badge-square.*",
+        ".ui8px/extract/specs/recipes/icon-tab.*",
+        ".ui8px/extract/specs/recipes/switcher.*",
+        ".ui8px/extract/specs/recipes/switcher-item.*",
+        ".ui8px/extract/specs/recipes/nav-item.*",
+        ".ui8px/extract/specs/recipes/nav-item-content.*",
+        ".ui8px/extract/specs/recipes/file-tree-item.*",
+        ".ui8px/extract/specs/parts/badge-square.*",
+        ".ui8px/extract/specs/parts/pill.*",
+        ".ui8px/extract/specs/parts/search-field.*",
+        ".ui8px/extract/specs/organisms/number-field.*",
+        ".ui8px/extract/specs/patterns/icon-tab.*",
+        ".ui8px/extract/specs/patterns/switcher.*",
+        ".ui8px/extract/specs/patterns/switcher-item.*",
+        ".ui8px/extract/specs/patterns/dropdown-item.*",
+        ".ui8px/extract/specs/patterns/editor-tab.*",
+        ".ui8px/extract/specs/patterns/select-menu.*",
+        ".ui8px/extract/specs/patterns/nav-item.*",
+        ".ui8px/extract/specs/patterns/file-tree-item.*",
+        ".ui8px/extract/specs/ui/icon.*",
+        ".ui8px/extract/specs/patterns/nav-item-row.*",
+        ".ui8px/extract/specs/organisms/search-palette.*"
+      ],
+      "spacing": "control"
+    },
+    {
+      "name": "layout",
+      "files": [
+        ".ui8px/extract/**",
+        "packages/*/ui/src/**",
+        "xgen/**",
+        "apps/**"
+      ],
+      "spacing": "layout"
+    }
+  ]
+}
diff --git a/MIGRATION.md b/MIGRATION.md
new file mode 100644
index 0000000..1cfc440
--- /dev/null
+++ b/MIGRATION.md
@@ -0,0 +1,90 @@
+# Migrating from `@ui8kit/codegen` 0.1 to 2.0
+
+2.0 replaces the 0.1 engine (TypeScript brick DSL + one emitter per runtime writing `generated/`) with **xgen**, the
+generation layer of ui8kit 2.0 (ported from codegen-x/ui8kit). It is a breaking release: sources, outputs, file names,
+recipes and the import paths of the engine all change. 0.1 stays available at commit
+[`972b492`](https://github.com/ui8kit/codegen/tree/972b492) (the last 0.1 state of `main`); a git pin on that SHA keeps
+working.
+
+## What changed
+
+| | 0.1 | 2.0 |
+|---|---|---|
+| Brick source | `bricks/<name>/<name>.def.ts` (DSL from `bricks/_dsl.ts`) + `*.variants.json` + `*.data.json` | `xgen/specs/ui/<name>.json` + `<name>.variants.json` (JSON Schema `xgen/schema/schemas/spec.schema.json`); showcase data are `examples` in the spec |
+| Above bricks | none | parts, patterns, organisms, blocks, presets, screens (`xgen/specs/*`, written with the builder in `xgen/screens/src/authoring`) |
+| Runtimes | templ, react, svelte, vue, solid, latte, twig (7) | svelte, react, vue, solid, templ, twig, latte, **jinja2** (8); every brick and block, PHP parts no longer skipped |
+| Output | one tree `generated/ui/<brick>/` with every runtime side by side | one package per runtime: `packages/<runtime>/ui`, plus `packages/shared/app` and `apps/host-*` |
+| File names | `Button.svelte`, `button.tsx`, `button.solid.tsx`, `Button.latte`, `Button.html.twig` | kebab-case per package: `src/primitives/button/button.svelte`, `.tsx`, `.vue`; `ui/button/button.templ`, `.html.twig`, `.latte`, `.html.j2` |
+| Go module | `github.com/ui8kit/ui` (flag `--go-module`) | `github.com/ui8kit/codegen/packages/templ/ui`; templ `v0.3.1001` -> `v0.3.1070` |
+| CLI | `bun src/infrastructure/cli.ts generate --out generated --runtimes ...` | `bun run build` (`xgen build`), `bun run check` (`xgen check`), `xgen list / e2e / shot / visual` |
+| Verify | `bun run verify` = check + tsc + typecheck:generated + vitest/bun parity | `bun run verify` = `xgen check` (drift + 5 real-engine parity groups + style and rule gates) + `codex:validate` + `typecheck` (tsc, svelte-check, vue-tsc) + `bun test xgen` |
+| Data | none | Codex v0.4 fixtures validated with `@ui8kit/contract` |
+| Static HTML export, Latte bundle, `examples/` welcome screens | `build:html`, `generate:latte-bundle`, `examples/` | removed; the host apps serve every screen (`bun run build:hosts`), previews live in ui8kit/site |
+
+### Engine API (deep imports)
+
+0.1 consumers imported internals: `@ui8kit/codegen/bricks/index` (`bricks`), `bricks/_dsl`, `src/domain/validate`
+(`validateRegistry`), `src/emitters/*`, `tests/support/{fixtures,normalize,...}`. None of these exist in 2.0. Equivalents:
+
+| 0.1 | 2.0 |
+|---|---|
+| `bricks` (array of brick objects) | `loadSpecs(xgenRoot)` from `@ui8kit/xgen-spec` (`xgen/spec/src`): `{ bricks: LoadedBrick[], problems }`, `LoadedBrick.brick` is the typed model |
+| `validateRegistry` | `loadSpecs` problems + `bun run check` (schema, props, a11y, coverage ...) |
+| per-runtime emitters | `SvelteEmitter`, `ReactEmitter`, `VueEmitter`, `SolidEmitter` (`@ui8kit/xgen-runtime-*`), template runtimes via `@ui8kit/xgen-generator` (`templFiles`, `twigFiles`, ...) |
+| `generateFiles(...)` to `generated/` | `planBuild(workspace)` + `write(plan)` from `@ui8kit/xgen-generator` |
+| `tests/support/fixtures` `showcaseCases` | `examples` of each spec (`spec.examples`, `children` for the other parts) |
+| `tests/support/normalize` | `xgen/check/src` parity helpers (internal; DOM normalisation per runtime group) |
+| brick DSL for local bricks | write a JSON spec in `xgen/specs/ui`; to convert existing 0.1 bricks: `CODEGEN_DIR=<dir with bricks/index.ts> RECIPES_DIR=<dir> bun xgen/spec/tools/import-codegen.ts <xgenRoot>` |
+
+### Recipes and DOM
+
+The bricks were reworked for ui8kit 2.0 (see the recipes in `xgen/specs/ui/*.variants.json`):
+
+- **Grid**: no half steps (`gap-1.5` of Button `sm` and CardHeader is gone; `spacing` gate fails on any `x.5` step).
+  Controls `sm / default / lg` = `h-8 / h-10 / h-12` (0.1: `h-8 / h-9 / h-10`).
+- **Corners**: one token, plain `rounded` (`--radius`) instead of `rounded-md` / `rounded-lg`.
+- **Shadows**: none on flat surfaces (0.1 `shadow-xs` on buttons and inputs is gone); floating layers only.
+- **Button**: `layout` axis (`default`, `icon`) replaces size `icon`; `inset-ring` borders instead of `border`.
+- New bricks: `button-plain`, `link-plain`, `lucide-icon` (Lucide registry), `range`, `skeleton`, form parts
+  (`fieldset`, `legend`, `form-item`, `form-description`, `form-message`), `meter`, `progress`, `summary`, table cells,
+  and the two bricks upstreamed from saas-design: **`themetoggle`** (`ThemeToggle`) and **`sheet`**
+  (`Sheet`, `SheetTrigger`, `SheetClose`).
+
+## Adopting 2.0 in saas-design
+
+saas-design pins `github:ui8kit/codegen#972b492` in `packages/ui/package.json` and wraps the 0.1 registry in
+`packages/ui/scripts/registry.ts` (semantic `ui-*` classes, local bricks, `SNAP` of half steps). Steps:
+
+1. **Local bricks.** Delete `packages/ui/bricks/{themetoggle,sheet,_lucide.ts,index.ts}`: `ThemeToggle`, `Sheet`,
+   `SheetTrigger` and `SheetClose` are upstream (`xgen/specs/ui/themetoggle.json`, `sheet.json`) with the same DOM, ARIA
+   and `data-ui8kit` hooks (`theme-toggle`, `sheet`, `sheet-overlay`, `sheet-trigger`, `sheet-close`; the inline SVGs drop the legacy `focusable="false"`), so
+   `packages/ui/behaviors/ui8kit.js` keeps working. The classes that lived in `packages/adapter/src/base.css`
+   (`ui-themetoggle-sun/moon`, `ui-sheet-overlay/panel/icon-*`) are now utilities in the spec (`dark:block`,
+   `in-aria-expanded:hidden`, ...); the recipes use `rounded` (not `rounded-full`) and the panel `shadow-lg` (not `shadow-xl`).
+   Keep a recipe override in `packages/ui/recipes` if the pill shape is wanted.
+2. **Half steps.** Remove the `SNAP` map in `registry.ts`; upstream has no half step and `xgen check` keeps it so
+   (backlog `codegen-half-steps.md` can be closed).
+3. **Generator.** Two options:
+   - *Consume the generated packages* (simplest): take `packages/svelte/ui` and `packages/templ/ui` from a pinned commit
+     of ui8kit/codegen (git submodule, sparse checkout or a copy script), or install items with the ui8kit CLI from a
+     registry built from this repository (see `docs/registry.md`). Utilities stay Tailwind classes; the adapter becomes
+     optional.
+   - *Keep semantic classes*: port `registry.ts` to the JSON model: `loadSpecs(<codegen>/xgen)` instead of
+     `bricks/index`, rewrite the same class positions (`recipe` tables, `classes.staticBase`, `classes.state`, static
+     `class` attributes, `lit` / `mapOr` / `cond` expressions) on the loaded bricks, then emit with `SvelteEmitter` and
+     the templ emitter of `@ui8kit/xgen-runtime-templ`. Showcase cases come from `spec.examples`.
+4. **templ.** Regenerate with `go run github.com/a-h/templ/cmd/templ@v0.3.1070 generate` (the 2.0 runtime pins
+   v0.3.1070; backlog `templ-version-pin.md`). Go imports move to `github.com/ui8kit/codegen/packages/templ/ui/...`
+   if the package is consumed as a module, or stay under saas-design's own module path if emitted locally.
+5. **Parity tooling.** `@ui8kit/codegen/tests/support/*` is gone; the parity of every brick case across runtimes is part
+   of `xgen check` upstream, so saas-design's `scripts/parity.ts` only has to cover its own class rewrite.
+6. **Svelte Link warning.** Fixed upstream: the Svelte emitter marks the anchor of `Link` / `LinkPlain` with
+   `svelte-ignore a11y_no_noninteractive_tabindex` (backlog `codegen-svelte-link-a11y-tabindex.md` can be closed).
+7. **Still open upstream** (not changed by 2.0): not published to npm and no `classMode: "semantic"` option (backlog
+   `codegen-not-on-npm-no-recipe-override.md`); Icon still emits `icon-<name>` classes; no portal slot for the Sheet
+   (backlog `ui-behaviors-sheet-portal.md`).
+
+## For other 0.1 consumers
+
+- Pin `972b492` to stay on 0.1, or move to the generated package of your runtime under `packages/<runtime>/ui`.
+- Regenerate nothing by hand: change a spec in `xgen/specs`, run `bun run build`, then `bun run check`.
diff --git a/README.md b/README.md
index 5405ad4..71b871c 100644
--- a/README.md
+++ b/README.md
@@ -1,217 +1,110 @@
-# UI8Kit Codegen
+# UI8Kit Codegen 2.0 (xgen)
 
-**One brick definition → seven identical runtimes.**
+**One spec, eight runtimes, the same DOM and ARIA.**
 
-Spec-driven codegen for UI8Kit `ui/` primitives. Define props, variants, and a render tree once; emit idiomatic Templ, React, Svelte, Vue, SolidJS, Latte, and Twig with the same DOM, design tokens, and ARIA contract — verified by parity tests, not by review.
+Spec-driven generation for UI8Kit: bricks (primitives), components and blocks are written once as JSON specs and a
+TypeScript builder, and `xgen` generates idiomatic source for **Svelte 5, React 19, Vue 3 and SolidJS** and server
+templates for **Go templ, Twig, Latte and Jinja2**. Every brick and block case of the template runtimes is rendered with
+the real engine and compared with React; identity across runtimes is a gate, not a convention.
+
+This is the engine behind the public ui8kit 2.0 registry ([ui.buildy.tw](https://ui.buildy.tw), `npx ui8kit add <name>`,
+CLI [`ui8kit`](https://github.com/ui8kit/cli) 2.0.x, registry roots `https://registry.buildy.tw/<runtime>`).
 
 | Fact | Value |
 |------|-------|
-| **Inventory** | 33 bricks · 63 parts · 7 runtimes |
-| **PHP templates** | 59 / 63 parts (4 skipped by structural predicate) |
-| **License** | MIT |
+| **Bricks / parts** | 40 / 72 (`xgen/specs/ui`) |
+| **Components and blocks** | 23 parts, 36 patterns, 184 organisms; 92 blocks with 474 variants (`xgen/specs/{parts,patterns,organisms,blocks}`) |
+| **Screens** | 15 screen specs (themes, gallery, catalog, site, plans, skins), served by 4 host apps |
+| **Runtimes** | svelte, react, vue, solid, templ, twig, latte, jinja2 |
+| **Data contract** | Codex v0.4 via [`@ui8kit/contract`](https://github.com/ui8kit/contract) (77 fixture collections, 733 entries) |
+| **Skins** | default + 15 (CSS variables only, shadcn tokens) |
+| **Version** | 2.0.0 (not published to npm) - upgrading from 0.1: [MIGRATION.md](MIGRATION.md) |
+| **License** | MIT, (c) UI8Kit |
 
 ---
 
 ## Runtimes
 
-| Runtime | Output | Composition |
-|---------|--------|-------------|
-| **Go Templ** | `ui/<brick>/<brick>.templ` + `_gen.go` | SSR, `{ children... }`, `Attrs` |
-| **React 19** | `ui/<brick>/<brick>.tsx` | `forwardRef`, `asChild` / `Slot` |
-| **Svelte 5** | `ui/<brick>/<Part>.svelte` | runes, snippets, `<svelte:element>` |
-| **Vue 3** | `ui/<brick>/<Part>.vue` | `<script setup>`, slots, `<component :is>` |
-| **SolidJS** | `ui/<brick>/<brick>.solid.tsx` | `splitProps`, `Dynamic`, `*Classes()` |
-| **Latte** | `ui/<brick>/<Part>.latte` | typed `{parameters}`, `n:attr` |
-| **Twig** | `ui/<brick>/<Part>.html.twig` | `ui8kit_attr_str`, `include with` |
-
-Plus a **static HTML** export via `bun run build:html` → `examples/html/`.
-
-All runtimes share the same colocated `*.variants.json` (CVA-style recipes). Attribute logic lives in a small typed expression IR and is printed idiomatically per target.
-
-> **PHP note:** Latte/Twig skip `breadcrumb/Breadcrumb`, `select/Select`, and `icon/Icon` (loops over typed items or branched roots). Class helpers in `php/UI8Kit/Classes.php` are still emitted for every part. Details: [docs/php-complex-parts.md](docs/php-complex-parts.md).
-
----
-
-## Why codegen?
-
-Hand-writing `.templ` + `.tsx` (and then Svelte, Vue, Solid, Latte, Twig) multiplies drift. This engine inverts the workflow:
-
-1. **Brick definitions** (`bricks/<name>/<name>.def.ts`) — single source of truth
-2. **Canonical renderer** (`src/domain/render.ts`) — executable DOM spec
-3. **Emitters** — one printer per runtime
-4. **Parity tests** — SSR every generated component and assert normalized DOM equals the canonical output
+| Runtime | Package (generated) | Files | Checked by |
+|---|---|---|---|
+| Svelte 5 | `packages/svelte/ui` (`@ui8kit/svelte-ui`) | `src/primitives/<brick>/<part>.svelte`, `src/components`, `src/blocks` | host app + e2e DOM pair |
+| React 19 | `packages/react/ui` (`@ui8kit/react-ui`) | `.tsx` per brick / organism | reference DOM of every parity gate |
+| Vue 3 | `packages/vue/ui` (`@ui8kit/vue-ui`) | `.vue` SFCs | host app + e2e DOM pair |
+| SolidJS 1.9 | `packages/solid/ui` (`@ui8kit/solid-ui`) | `.tsx` | server render vs React (`xgen check`, group `solid`) |
+| Go templ | `packages/templ/ui` (module `github.com/ui8kit/codegen/packages/templ/ui`) | `.templ` + `_gen.go` + Go helpers | `templ generate`, `go vet`, `go build`, DOM vs React |
+| Twig | `packages/twig/ui` | `.html.twig` + PHP extension | real twig/twig (PHP + composer), DOM vs React |
+| Latte | `packages/latte/ui` | `.latte` + PHP extension | real latte/latte, DOM vs React |
+| Jinja2 | `packages/jinja2/ui` | `.html.j2` + Python helpers (`py/ui8kit_jinja`) | real Jinja2 (Python venv), DOM vs React |
 
-Identity across runtimes is a property of the test suite, not a convention.
-
----
+The TypeScript packages are source only (no build step; the consumer's Vite compiles them). Peer dependencies: the
+framework, `tailwindcss` v4, `clsx`, `tailwind-merge`.
 
 ## Quick start
 
-**Prerequisites:** [Bun](https://bun.sh). Go 1.25+ and PHP 8.1+ / Composer are optional (parity suites skip when missing).
+**Prerequisites:** [Bun](https://bun.sh) 1.4+. Go, PHP 8.1+ with Composer and Python 3 are optional: each template
+runtime group skips without its toolchain (`UI8KIT_REQUIRE_ALL_RUNTIMES=1` turns a skip into a failure, as in CI).
 
 ```bash
 bun install
-bun run check       # validate all brick definitions
-bun run generate    # emit all seven runtimes → generated/
-bun test            # domain units + DOM parity
-bun run verify      # check + typecheck + tests (CI equivalent)
-```
-
-### Local previews
-
-Eight welcome screens (generated primitives + shadcn tokens) live in [`examples/`](examples/):
-
-```bash
-bun run generate && cd examples && bun install && bun run build:css
-
-bun run dev:templ   # :8080
-bun run dev:react   # :5173
-bun run dev:svelte  # :5174
-bun run dev:vue     # :5175
-bun run dev:latte   # :5176
-bun run dev:twig    # :5177
-bun run dev:solid   # :5178
-bun run build:html  # → examples/html/
-```
-
-### CLI
-
-```bash
-bun src/infrastructure/cli.ts generate \
-  --out generated \
-  --go-module github.com/ui8kit/ui \
-  --runtimes templ,react,svelte,vue,solid,latte,twig
-```
-
-Also available: `bun run generate:latte-bundle` for a Latte-only package — see [docs/latte-bundle.md](docs/latte-bundle.md).
-
----
-
-## Generated layout
-
-```
-generated/
-  go.mod  composer.json
-  cmd/parity/          # Go + PHP render harnesses
-  php/UI8Kit/          # Rt.php, Classes.php, TwigExtension.php
-  utils/               # shared runtime support (Go + TS)
-  ui/
-    index.ts | index.svelte.ts | index.vue.ts | index.solid.ts
-    button/
-      button.variants.json   # shared CVA recipe
-      button.shared.ts       # TS types + classes helpers
-      button.templ | button.tsx | button.solid.tsx | Button.svelte | Button.vue
-      Button.latte | Button.html.twig
+bun run build     # xgen build: specs + fixtures + content -> packages/*/ui (8 runtimes), packages/shared/app, apps/host-*
+bun run check     # xgen check: every gate, drift included, and the real-engine parity of templ, solid, twig, jinja2, latte
+bun run test      # bun test of xgen/*
+bun run verify    # check + codex:validate + typecheck + test (what CI runs)
 ```
 
-**Consume:** Templ → `templ generate && go build` · TS → Vite (`@vitejs/plugin-vue`, `@sveltejs/vite-plugin-svelte`, `vite-plugin-solid`) · PHP → `composer install` in `generated/` with a loader rooted at `generated/ui`.
-
-Peer deps: `react` / `svelte` / `vue` / `solid-js` + `clsx` + `tailwind-merge`; PHP: `latte/latte ^3` or `twig/twig ^3`.
-
----
+More: `bun run typecheck` (svelte-check, tsc, vue-tsc on the packages and hosts), `bun run build:hosts`,
+`bun run e2e` (every screen in every host, screenshots, DOM pair test; needs Playwright browsers), `bun run lint:px`
+(ui8px gate on the class sets), `bun run rules` / `rules:baseline`, `bun run codex:manifest` / `codex:validate` /
+`codex:blocks`. Full list: [docs/cli.md](docs/cli.md).
 
-## Architecture
+## Layout
 
 ```
-bricks/            # 33 definitions + variants.json + fixtures
-src/
-  domain/          # pure model — expr IR, render, validate (zero I/O)
-  emitters/        # one printer per runtime
-  application/     # generate pipeline
-  infrastructure/  # CLI
-runtime/           # support files copied into generated/utils
-tests/             # domain units + cross-runtime parity
-examples/          # eight welcome previews
-docs/              # full documentation
-```
-
-| Principle | How it shows up |
-|-----------|-----------------|
-| Single source of truth | Brick defs are data, not templates |
-| Closed IR | 13 expression kinds · 5 node kinds — exhaustive per emitter |
-| Open emitters | New runtime = new printer, model unchanged |
-| Fail fast | Validation before any emit |
-| Parity as gate | Canonical renderer is the spec; tests enforce it |
-
-Deep dive: [docs/architecture.md](docs/architecture.md).
-
----
-
-## Cross-runtime contract
-
-Decided once, applied everywhere ([docs/contract.md](docs/contract.md)):
-
-| Concern | Rule |
-|---------|------|
-| **Prop naming** | Canonical Go PascalCase → React / Svelte / Vue native names |
-| **Variants** | Shared `*.variants.json`; TS literal unions; Go embedded `Variants` |
-| **Class merge** | Recipe → variants → base → fragments → state → caller (`cn` / `Cn`) |
-| **Children** | Templ / React / Svelte snippets / Vue slots — or none |
-| **Root tags** | Same `TagGroup` allow-lists in every runtime |
-| **Booleans vs ARIA** | Native bools present-or-absent; ARIA always `"true"` / `"false"` |
-| **Rest / Attrs** | Spread last — caller wins |
-| **Behavior** | Presentation-only; client hooks via `@ui8kit/aria` at app level |
-
----
-
-## Brick definition
-
-```ts
-// bricks/button/button.def.ts (abridged)
-export default brick({
-  id: "ui.button",
-  dir: "button",
-  recipes: { button: { file: "button.variants.json", recipe: buttonVariants } },
-  parts: [{
-    name: "Button",
-    recipeId: "button",
-    asChild: true, // React-only; other runtimes use ButtonClasses
-    classes: {
-      recipe: { variant: "Variant", size: "Size" },
-      state: [{ test: prop("Disabled"), classes: "pointer-events-none opacity-50" }],
-    },
-    props: [pVariant(), pSize(), pClass(), pStr("Type"), pStr("Href"),
-            pBool("Disabled"), ...controlPassthroughProps(), pAttrs(), pChildren()],
-    // Href set → <a>; otherwise <button>. asChild / ButtonClasses remain for exotic roots.
-    render: when(isSet(prop("Href")), [el("a", …)], [el("button", …)]),
-  }],
-});
+xgen/        the generation layer: self-contained @ui8kit/xgen-* packages (schema, spec, screens, generator, check, cli, runtimes/*)
+  specs/       ui (bricks), parts, patterns, organisms, blocks, recipes, presets, screens, assets (Lucide)
+  fixtures/    Codex v0.4 collections (sample data), taxonomies
+  content/     the text dictionary (content/ui/en.json): views never hold literal text
+  schema/      JSON Schemas + codex/ (manifest.json, blocks.json: the data contract of every block)
+packages/    generated packages: {svelte,react,vue,solid}/ui, {templ,twig,jinja2,latte}/ui, shared/app; tooling (gates)
+apps/        generated host apps host-{svelte,react,vue,solid}; the only hand-written file in each is xgen.app.json
+rules/       composition rules (zones, baselines, self-test fixtures, html-validate config)
+docs/        guides
 ```
 
-### Adding a brick
-
-1. Create `bricks/<name>/<name>.def.ts` + `<name>.variants.json` (+ optional `.data.json` fixtures)
-2. Register in `bricks/index.ts`
-3. `bun run check` → `bun test`
+> **Nobody edits `packages/*/ui`, `packages/shared/app` or `apps/host-*` by hand.** Every file starts with
+> `Code generated by xgen. DO NOT EDIT.` and names its source. `xgen check` (group `drift`) regenerates everything in
+> memory and fails on any difference.
 
-Authoring guide: [docs/bricks.md](docs/bricks.md).
+## Design rules enforced by `xgen check`
 
----
-
-## Scope
-
-**In:** `ui/` primitives — 33 bricks, 63 parts (Tiers A–E), including multi-part composites (`card`, `table`, `form`, `select`, `breadcrumb`).
+- **8 + 4 grid.** Spacing uses whole Tailwind steps on the 8 px grid; 4 px steps only inside controls; no half steps
+  (`gap-1.5`, `px-2.5`) anywhere in specs, builder or kit assets (group `spacing`). Controls share one scale:
+  `sm / default / lg` = `h-8 / h-10 / h-12`.
+- **Tokens only.** Colours are shadcn CSS variables (`bg-primary`, `text-muted-foreground`); no palette colours, hex,
+  arbitrary values or gradients (`hardcode`). One corner token: plain `rounded` reads `--radius` (`corners`); shadows only
+  on floating layers (`shadows`).
+- **Lucide icons** (`LucideIcon`, registry `xgen/specs/assets/lucide-icons.json`, ISC).
+- **Identical DOM and ARIA** in every runtime (`a11y`, parity groups, e2e DOM pair); no literal text in views (`text`,
+  `dictionary`); portability contract (`nonportable`, `xgen/specs/_nonportable.json`).
 
-**Out (later phase):** behavior-driven `components/` (Sheet, Tabs, Popover, Combobox, Menu, Toast) that need `@ui8kit/aria`. The IR and emitters are ready once that contract is specified.
+## Data: Codex and `@ui8kit/contract`
 
-Deliberate deviations from upstream hand-written pairs (empty attrs omitted, rest spread last, etc.): [docs/contract.md](docs/contract.md).
-
----
+Sample data are Codex v0.4 collections (`xgen/fixtures/*.json`), validated with `validateCollectionV04` from
+`@ui8kit/contract`. `xgen/schema/codex/manifest.json` describes every kind and field, `blocks.json` lists for every block
+and screen which collection, record type and fields it reads. See [docs/contract.md](docs/contract.md).
 
 ## Documentation
 
-| Doc | Topic |
-|-----|-------|
-| [Overview](docs/overview.md) | Goals, runtimes, scope |
-| [Getting started](docs/getting-started.md) | Install, generate, consume |
-| [Architecture](docs/architecture.md) | Domain, IR, emitters, pipeline |
-| [Bricks](docs/bricks.md) | Authoring & validation |
-| [Runtimes](docs/runtimes.md) | Per-runtime notes |
-| [Contract](docs/contract.md) | Cross-runtime rules |
-| [Testing & CI](docs/testing-and-ci.md) | Parity harnesses |
-| [Examples](docs/examples.md) | Local previews |
-| [Latte bundle](docs/latte-bundle.md) | Latte-only package |
+- [docs/README.md](docs/README.md) - index
+- [docs/specs-guide.md](docs/specs-guide.md) - authoring specs end to end (start here)
+- [docs/architecture.md](docs/architecture.md) - packages, flow, checks
+- [docs/runtimes.md](docs/runtimes.md) - the eight targets and how to consume them
+- [docs/contract.md](docs/contract.md) - Codex fixtures, manifest, block data
+- [docs/registry.md](docs/registry.md) - the public registry (ui8kit/site, ui8kit/cli) and how it maps to this repo
+- [MIGRATION.md](MIGRATION.md) - 0.1 -> 2.0
+- `xgen/README.md` and the README of every xgen package
 
----
+## License
 
-MIT © UI8Kit
+MIT, see [LICENSE](LICENSE). Lucide icon data: ISC (https://lucide.dev). Skins: see
+`xgen/runtimes/core/assets/styles/skins/NOTICE.md`.
diff --git a/apps/README.md b/apps/README.md
new file mode 100644
index 0000000..47ce63b
--- /dev/null
+++ b/apps/README.md
@@ -0,0 +1,13 @@
+# apps
+
+One host app per TypeScript runtime, all generated by `bun run build` (DO NOT EDIT anything but `xgen.app.json`):
+
+| app | runtime | port | a screen |
+|---|---|---|---|
+| `host-svelte` | Svelte 5 | 5180 | `http://127.0.0.1:5180/<screen>/#/<route>` |
+| `host-react` | React 19 | 5181 | `http://127.0.0.1:5181/<screen>/#/<route>` |
+| `host-vue` | Vue 3 | 5182 | `http://127.0.0.1:5182/<screen>/#/<route>` |
+| `host-solid` | SolidJS 1.9 | 5183 | `http://127.0.0.1:5183/<screen>/#/<route>` |
+
+A landing, a theme or the block gallery is a screen spec in `xgen/specs/screens`, not an app.
+`<screen>` is the screen id without `screen.`; `/` lists every screen. Dictionary, data, menus and runtime core: `packages/shared/app`.
diff --git a/apps/host-react/index.html b/apps/host-react/index.html
new file mode 100644
index 0000000..801d13f
--- /dev/null
+++ b/apps/host-react/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>xgen screens (React)</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/host-react/package.json b/apps/host-react/package.json
new file mode 100644
index 0000000..e4deb77
--- /dev/null
+++ b/apps/host-react/package.json
@@ -0,0 +1,44 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "host-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Generated by xgen from xgen.app.json: the React 19 host of 15 screens (/<screen>/#/<route>). Generated under xgen/; src/ is the front controller.",
+  "ui8kit": {
+    "runtime": "react",
+    "generated": true,
+    "kit": [
+      "xgen/runtime"
+    ],
+    "composition": [
+      "xgen/App.tsx",
+      "xgen/screens"
+    ],
+    "blockRoot": [
+      "xgen/App.tsx",
+      "xgen/screens"
+    ]
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@ui8kit/app-shared": "workspace:*",
+    "@ui8kit/react-ui": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.1.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0"
+  }
+}
diff --git a/apps/host-react/src/app.css b/apps/host-react/src/app.css
new file mode 100644
index 0000000..0793c44
--- /dev/null
+++ b/apps/host-react/src/app.css
@@ -0,0 +1,4 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/react/src/app.ts (settings: apps/host-react/xgen.app.json) */
+@import "@ui8kit/react-ui/styles/index.css";
+@import "@ui8kit/app-shared/styles/skins.css";
diff --git a/apps/host-react/src/main.tsx b/apps/host-react/src/main.tsx
new file mode 100644
index 0000000..78c5304
--- /dev/null
+++ b/apps/host-react/src/main.tsx
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/react/src/app.ts (settings: apps/host-react/xgen.app.json)
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./app.css";
+import { bootScreen, screenKeyOf } from "@ui8kit/app-shared/screens";
+import { App } from "../xgen/App";
+
+const screen = screenKeyOf(location);
+const title = "xgen screens (React)";
+bootScreen(screen, "light", title);
+createRoot(document.getElementById("app")!).render(
+  <StrictMode>
+    <App screen={screen} title={title} />
+  </StrictMode>,
+);
diff --git a/apps/host-react/tsconfig.json b/apps/host-react/tsconfig.json
new file mode 100644
index 0000000..fb09cf7
--- /dev/null
+++ b/apps/host-react/tsconfig.json
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/react/src/app.ts (settings: apps/host-react/xgen.app.json)
+{
+  "compilerOptions": {
+    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "react-jsx",
+    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true, "types": ["vite/client"]
+  },
+  "include": ["src", "xgen"]
+}
diff --git a/apps/host-react/vite.config.ts b/apps/host-react/vite.config.ts
new file mode 100644
index 0000000..11479e9
--- /dev/null
+++ b/apps/host-react/vite.config.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/react/src/app.ts (settings: apps/host-react/xgen.app.json)
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+  server: { host: "127.0.0.1", port: 5181, strictPort: true, proxy: { "/__inspect": "http://127.0.0.1:5190" } },
+  preview: { host: "127.0.0.1", port: 5181, strictPort: true },
+});
diff --git a/apps/host-react/xgen.app.json b/apps/host-react/xgen.app.json
new file mode 100644
index 0000000..58dd768
--- /dev/null
+++ b/apps/host-react/xgen.app.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "../../xgen/schema/schemas/app.schema.json",
+  "specVersion": 1,
+  "name": "host-react",
+  "runtime": "react",
+  "screens": ["*"],
+  "title": "xgen screens (React)",
+  "port": 5181,
+  "locale": "en",
+  "theme": "light"
+}
diff --git a/apps/host-react/xgen/.xgen-manifest.json b/apps/host-react/xgen/.xgen-manifest.json
new file mode 100644
index 0000000..36e48e7
--- /dev/null
+++ b/apps/host-react/xgen/.xgen-manifest.json
@@ -0,0 +1,271 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "apps/host-react",
+  "files": {
+    "index.html": "740d8d13e5b06127de39f40398a5bdb1e3c4ef182d2e3cc79cd6fedd33930fd4",
+    "package.json": "afbfaef4df622e1b1488a29b0565e47d398f767676f8eb5711a0c0c1addfed0f",
+    "src/app.css": "2fc6677f491351c82a7a4e779eb2c7d9f0e4814c818e5234a86570da51ff52f2",
+    "src/main.tsx": "08a0bd4d01fa1878eb2cbfa0cff2fb5275de4124e188e0804e85b039d488c8dc",
+    "tsconfig.json": "2ce2853f72df21d5542b45c2112c4eb918e02f7cc4775ac2e5d981a8928b831c",
+    "vite.config.ts": "604a6f24405edb795857e460e64386b952b508abe514ab6f53a91e08d0353bc7",
+    "xgen/App.tsx": "034ea14c09c12d082128fc7daa1d0d56eea4ee26f67ddbcbaa5c9d268a6cc173",
+    "xgen/runtime/ScreenOutlet.tsx": "a61c246cdc91423bd2c780d8dd2309d1e85b2fa237fcab58a696941b80e021d0",
+    "xgen/runtime/url.ts": "4ea8698b1f9934b558a02be32a1682b6946eb7a2674134669cf82b56789f9a57",
+    "xgen/screens/BlocksScreen.tsx": "a1a0f72abd23e4533c371350eff2c4589aa3618af4e1ddf15b58a1ea6f2e703e",
+    "xgen/screens/BlocksScreen/AboutmePage.tsx": "715d2ad5cf0ff958cd7e8b571b6161de19be9b0d634b3f0d56a409058115136d",
+    "xgen/screens/BlocksScreen/AboutPage.tsx": "acde2fa63eabe874034e12e0b1d98f024ef713bae360719c1a46da1c14b4da32",
+    "xgen/screens/BlocksScreen/AccordionPage.tsx": "23a3bf9b680b6d2b799cf96b8bc95ec4b7dbf3069335b227c706b492a854efaa",
+    "xgen/screens/BlocksScreen/ActivityPage.tsx": "76d569cba8512b2b3b361708d693f13086d1a59a14b8ca17dd05d53f7f236b6f",
+    "xgen/screens/BlocksScreen/AnnouncementPage.tsx": "cb573e2eceef303f06931ecc7cb26d9ac6a43897a64ceb83f29e2ce456a9352f",
+    "xgen/screens/BlocksScreen/ArticlePage.tsx": "c67b407e067e5d4c07ef4430ab2ffb1dc0b4692f0c9e0eb70b00822ad66834dc",
+    "xgen/screens/BlocksScreen/AuthPage.tsx": "64b67514c982305e11fb416c6744544e90a002775e89778ab625947ba0a8a70b",
+    "xgen/screens/BlocksScreen/AuthpagePage.tsx": "ac823ab303463a0a264fa7159d7fb1f34aae97094c95f4b1b4012e6c5180f6f4",
+    "xgen/screens/BlocksScreen/BeforeafterPage.tsx": "e54c9467e29135893b8bcfb39b99c079dd2d66862f9a4e941ad98cf24242ca5b",
+    "xgen/screens/BlocksScreen/BentoPage.tsx": "992dc4d0277a73d254a403c2f0c62a7ef40573ba032b59c54320bbd8d8c94074",
+    "xgen/screens/BlocksScreen/BottomnavPage.tsx": "ab0b23b65fc061c0a622be0aa6f0affd54f750d86386bb4a73f92c74fbbbec9a",
+    "xgen/screens/BlocksScreen/CartdrawerPage.tsx": "c071826a65c3e663af6e067d8de70494d4d18fcf0afeb539eebc45f4788291fe",
+    "xgen/screens/BlocksScreen/CartPage.tsx": "a1b3ee076991cab4af6b42151c52c1b1c65f199ee4fd09c6b1594a3bb71c7a5c",
+    "xgen/screens/BlocksScreen/CartpagePage.tsx": "32ee8bd784eb9b9718622e9b29f103eed4e4ca36f44b3c3b70767533fda3371a",
+    "xgen/screens/BlocksScreen/CategoriesPage.tsx": "feded78fd141860c980ea28b6244ffadefdc597b53aa952d814cf48ae0223e14",
+    "xgen/screens/BlocksScreen/ChannelsPage.tsx": "a5639f8131785e9b5e141da9adce22d722d1c3c1796186732bb93507899c44c6",
+    "xgen/screens/BlocksScreen/ChartPage.tsx": "394e2dd1a18b3e6bdd57a1250761cf7be395713dedd96ee1f85ed69e75e02d15",
+    "xgen/screens/BlocksScreen/ChecklistPage.tsx": "597f649148f3ae9d8f40c167ee86cd801b82a45c8096105fed25683c68740dd6",
+    "xgen/screens/BlocksScreen/CheckoutPage.tsx": "f4274012b31552f85b2c86d527cc5065e8f1661e4487e69c801e8255e6ee0ea8",
+    "xgen/screens/BlocksScreen/ComparePage.tsx": "0c64b3d1a57fd0cc8190869659cb7ab5f4d8349f58850c0df5a7171c8d58441e",
+    "xgen/screens/BlocksScreen/ContactPage.tsx": "c5347053f424a6e1153622f0b7dc6a2b881f537b28a113a73f4752749cafc957",
+    "xgen/screens/BlocksScreen/CookiePage.tsx": "de292fcb9f7466d77651b773c28bb62941443df2dbab03c3c7f253a6edde7ca8",
+    "xgen/screens/BlocksScreen/CreditsPage.tsx": "9bdb56f51b0bdf0cbbf3225f9f4035889923b2b7c8de39b7512d1d8ed8e7bf17",
+    "xgen/screens/BlocksScreen/CtaPage.tsx": "a541c57b8541ffab937b2814b66183d0c5c49aec548bfa7bd288eae397596539",
+    "xgen/screens/BlocksScreen/CtaproofPage.tsx": "6fce00cefb22d696943cd3588eeca35a587b476ad36d12a83ab24c6592b447b5",
+    "xgen/screens/BlocksScreen/DashshellPage.tsx": "a70c39ae1c9d1a12a538cc7d91e3603e5a58d59e2f49a1ed51937d11a4a80c77",
+    "xgen/screens/BlocksScreen/DeliveryPage.tsx": "464ae006415f2b90c22debe671b76cbabf7f4ec75618e403a28fb4ed51643b22",
+    "xgen/screens/BlocksScreen/EmptyPage.tsx": "57975d253fb2022f6b646ca0403cb9aa0af8889b5e1417ae71420f59c7cec9dc",
+    "xgen/screens/BlocksScreen/ErrorpagePage.tsx": "eb834ddb7c481c4950643f5b6809aba29252690d9b0b6be5742088456d7e03bd",
+    "xgen/screens/BlocksScreen/FaqPage.tsx": "c3aa09562aa43ca887648dd5981990e9ce9e804f0be84791ae219fa448d81607",
+    "xgen/screens/BlocksScreen/FaqsplitPage.tsx": "45ef1fb3263d83d3716be708fe815e81c2aa4c33ea6972bc462ced731a8e84e3",
+    "xgen/screens/BlocksScreen/FeatureshowcasePage.tsx": "42536fe5ad5c49c129aeaf66f55d3466e223d55870efa1a81227dbd768b19824",
+    "xgen/screens/BlocksScreen/FeaturesPage.tsx": "8a4c9fa0fd658b13b4172b5f1ab9cb44d6498acd1e9599cd35da46be52aa95f5",
+    "xgen/screens/BlocksScreen/FeaturesplitPage.tsx": "aed5cf815dfa6592bd6721d918ba348ccfdabc817fb1501a13d2491fa9bf6ada",
+    "xgen/screens/BlocksScreen/FeaturetabsPage.tsx": "515e8dd4e6079e98ad24aa9845de387fce4a16cbcdf47377bae22dbb4a6e6e85",
+    "xgen/screens/BlocksScreen/FooterPage.tsx": "cb55f25b53587054a093f9f6cbc88fa7dbdf58896b9fdd995004a0d229af329c",
+    "xgen/screens/BlocksScreen/FootersplitPage.tsx": "6ea42db66f7c1f1da6cee581f14ce6502bca6ff7af2beb2cd683a60bbcbc3a91",
+    "xgen/screens/BlocksScreen/HeaderPage.tsx": "27a038b20baf640107ac6e073dd981390ab3de9bed4009aad3043ed21a35fd19",
+    "xgen/screens/BlocksScreen/HeroPage.tsx": "3f4839ac31828a9c6de74c5fd7983f8e7877a4d42a1d06996389c767ac39ebcc",
+    "xgen/screens/BlocksScreen/HerosplitPage.tsx": "624485c97ed75eaf376251f26602b9e4c8e99b98fcf0dd4e8ab93d15dc3246fe",
+    "xgen/screens/BlocksScreen/IconwallPage.tsx": "453c8e7a2e3713c9818f07909b2eef6fe0fc50cd13bf48ec193b777f6bbc92f4",
+    "xgen/screens/BlocksScreen/IndexPage.tsx": "028175dc20e82dac749c66faae72c084b3a75ee10b7438e591956ba1341d9084",
+    "xgen/screens/BlocksScreen/JobsPage.tsx": "c59ac20fbce2ca0e1cd6bd8f6cf4f23134655110d0ea2cab35bd2856d9e2a3b7",
+    "xgen/screens/BlocksScreen/KanbanPage.tsx": "3ece3b0c7e67fea5d6fe269dc1e6333ecf97a8eb8f1c0bde771bbbfbd586633d",
+    "xgen/screens/BlocksScreen/LocationsPage.tsx": "a35ecf09edcd85c232d4d02238bc4b401c00341453a44bbd57877e9fc4e9bf65",
+    "xgen/screens/BlocksScreen/LogosPage.tsx": "188b9a8127de8c9ba1bc6e61dec2ed340b13ced00ae55b18e64c443d4d3b20df",
+    "xgen/screens/BlocksScreen/MedialistPage.tsx": "daee6f57cb75c2f561069cddc15795561850d4295b4f850657b1083654e45bc9",
+    "xgen/screens/BlocksScreen/MegamenuPage.tsx": "b697efba3afa5eb31078e7b75ee06f3be4a868430d1547dcb665df8cfe422542",
+    "xgen/screens/BlocksScreen/MetricsPage.tsx": "1dee4fc06a0ef1138d074ad02c43b9bba9daeb4dbbacf978d0ed3f65227a3ac9",
+    "xgen/screens/BlocksScreen/NavbarPage.tsx": "2766d40033901729bc9d53d1b3fcee8ce3b54b32939bc809b1467c3a761a6972",
+    "xgen/screens/BlocksScreen/NewsletterPage.tsx": "ac7824ca78c6ff89f6d6eafc428c06e058cabe90e12f44e1b9d5d6d73746e5da",
+    "xgen/screens/BlocksScreen/NotfoundPage.tsx": "f64f47da8cdc1683b1d78b3ff236ba9c7a399c1e527593c6bd38ba3bb493d8a8",
+    "xgen/screens/BlocksScreen/OrdersPage.tsx": "6efafac1fda7e194510dded7aaf4c872baa71ec24a5147a6fc681eb07e81738e",
+    "xgen/screens/BlocksScreen/OverviewPage.tsx": "b895e37868b2fe06c041e055cfb11b03578891843053bf368048a15ad97ae874",
+    "xgen/screens/BlocksScreen/PageheadPage.tsx": "1fda88913aaada250397752830813b6a2fc459c3d1eb4ec53b35f610f3f1089d",
+    "xgen/screens/BlocksScreen/PagetrailPage.tsx": "67fbbdba44b42abf458838389adc9fbc502891a7b98480fdf8297eda3c5c0ea4",
+    "xgen/screens/BlocksScreen/PhotosPage.tsx": "69ce5a27b8822723837df4faf4b2b08799148ecd99fc2ba035a639d958deb952",
+    "xgen/screens/BlocksScreen/PlanPage.tsx": "462a31cad36e3734e0ec9ccbb13ea025342fdb5ec0c4047e43a10b3e4ae12b61",
+    "xgen/screens/BlocksScreen/PostheaderPage.tsx": "3af842c9aa9c3cece8ffeb4de38cd7c3d543a95aa8206b0a2b72eb41e571fb5f",
+    "xgen/screens/BlocksScreen/PostshowcasePage.tsx": "64be1a7f4e2d85ec47e0293b94d87375cd23a5072fc83f0e8f4f35d2f7114ec9",
+    "xgen/screens/BlocksScreen/PostsPage.tsx": "ebe45acf7fcb858cf1e6f0e913b75a1dcb2a0659653259e4694f160735ceac1e",
+    "xgen/screens/BlocksScreen/PostsplitPage.tsx": "0dc0d40b021223a4ec0f4e1d0891d026beb7aea0a8259a03aaffd52f518bc5b9",
+    "xgen/screens/BlocksScreen/PricingPage.tsx": "fa959380a05d948fe716f04ca76c8d983e3df5cf153cc297eaa1fe65753fd91d",
+    "xgen/screens/BlocksScreen/ProductinfoPage.tsx": "cdce75c735a24cb36107dbca02d23cc2fd64de30e9486b7d8141bd8409040acd",
+    "xgen/screens/BlocksScreen/ProductPage.tsx": "d41bdb4583046c5d56006aff968d5fa0ec9c6a275e7c0be1d3a0206243cdb94c",
+    "xgen/screens/BlocksScreen/ProductsPage.tsx": "6012925835511250067fbd758079c8a125e7ba76ef79d7975a594423440d5621",
+    "xgen/screens/BlocksScreen/ProfilePage.tsx": "4bf6550600b8f092faa888703aa30ef04f84d278f14bae917990017a55c374f5",
+    "xgen/screens/BlocksScreen/ProjectsPage.tsx": "48333c9fee65e54ab047042b1fdd5618839ab47327e416fe10cf2bda6ef70a4a",
+    "xgen/screens/BlocksScreen/ProofPage.tsx": "8bd4291e8427fe5ba95d556e18c1c71f14c5aace9eda138a52d31ba7199210c5",
+    "xgen/screens/BlocksScreen/QuotesplitPage.tsx": "e6877441decba1e7a4dfa1f0300cbc1e665318efb6a1fc4e887f965ac07ebfe9",
+    "xgen/screens/BlocksScreen/ReviewsPage.tsx": "4f2d770535bd0d8ec7c5c670324f57d945cf2d638bd2b9238622aaaa963654fc",
+    "xgen/screens/BlocksScreen/ScreenHeader.tsx": "67f829ff50decff9f28cc5e59e1d9826b6da0ae80f2fbfdccad16b77514391db",
+    "xgen/screens/BlocksScreen/ShellPage.tsx": "fab3beb3ccbcf38dc8e497d167a1949f0442be3f77cc80ca61d4174278b2c744",
+    "xgen/screens/BlocksScreen/SidenavPage.tsx": "e0cd1acf4e341649c70cd03edb77d40aea34217807f79c2a40ea1108affd4acd",
+    "xgen/screens/BlocksScreen/SitemapPage.tsx": "f1c8a5f191f1ec24ca05466bee9d4238142d6afc603ff6d549bc18c009097c94",
+    "xgen/screens/BlocksScreen/SkeletonPage.tsx": "025ab7bee200c40b4846c63a9f1f943065c3e350ea0a3351d303ecd90516e3eb",
+    "xgen/screens/BlocksScreen/SlotsPage.tsx": "4a49d163f853428b79bc5ecda326e97a17520700768adc9301a4b7b1f13c132c",
+    "xgen/screens/BlocksScreen/StatsPage.tsx": "a65287c10f1678b0feee549dfae9fe7ef7d1d370ef9608f22c5e0788ca5a78ed",
+    "xgen/screens/BlocksScreen/StepperPage.tsx": "c0dc22a07ba0b14890c05049a5a21a9c8e86d10c4cced82b5d19e9c4830031f3",
+    "xgen/screens/BlocksScreen/StepsPage.tsx": "e545e5f6190e6392e4ce2e8330f4c76c0a09fdbafb4fe89c45b761eb91c9c91b",
+    "xgen/screens/BlocksScreen/StickyPage.tsx": "7c3b8098abcdc32875644b31509f32076fa4e9e933f5cfc2127c577c9e47defd",
+    "xgen/screens/BlocksScreen/StoreheroPage.tsx": "00e26c8f6f63b0a57152cb5ccf8a2a85bd5fa3afbd3ae4af407bdd1a8eaf329d",
+    "xgen/screens/BlocksScreen/StorytabsPage.tsx": "a0af1d58928e85a1fba4e31b62e816943d32ce9060aa9e0c6d9f297a928efda1",
+    "xgen/screens/BlocksScreen/SummaryPage.tsx": "1f0e6da50479c41d6e5a31858b0f095b4996593ad97d9bf96e1881a965f8a3f4",
+    "xgen/screens/BlocksScreen/TeamPage.tsx": "83e694ba0f401575ce49f28fa1428adb928434203b982ea4071cd476cb2664cc",
+    "xgen/screens/BlocksScreen/TemplatesPage.tsx": "2af62fc6fb22c05249200c26d007ebda632d3fdf7cfcc7ce9adf768e7a57dcc2",
+    "xgen/screens/BlocksScreen/TestimonialsPage.tsx": "61646dc8356b363dbe5246d2db35e65a1cf56cca3a52a55bda208c3b8b4ce528",
+    "xgen/screens/BlocksScreen/TimelinePage.tsx": "ee7f2086e7686e2e0b0c2838cb62fb0dd9acdb8ddb021bbec64b174410124af4",
+    "xgen/screens/BlocksScreen/TourPage.tsx": "089c223b9547a9abb4692b9c1bdc34fc68fca401d6e5df5ecb90bd9cc4f55a9f",
+    "xgen/screens/BlocksScreen/UsagePage.tsx": "d5426ea0d8038fdf036940a94c9703e06de0715db0130f4d185847395c0f9aed",
+    "xgen/screens/BlocksScreen/UspPage.tsx": "4d023374951d1fc206ddb3690548a69a7e852ba8fb26be210101ce5ebe18e680",
+    "xgen/screens/BlocksScreen/VideomodalPage.tsx": "206cddbd3015aba555236024a26a8d7c4bbbd929c2f3c4d31badc8cfc64a3f6b",
+    "xgen/screens/BlocksScreen/VideosPage.tsx": "32325df27a5e3558521773b9908f69a8731e83d05d1f288f0195da43ce9225f6",
+    "xgen/screens/BlocksScreen/WizardPage.tsx": "a0ed85e2848d34a6b26e7e453e50d38d4fb7049563d68eeb26292abe93a37e35",
+    "xgen/screens/BlocksScreen/ZonesPage.tsx": "2950551e5852653ad694ffbca146a138198bab4d5adb1035d9d2089cd35b2b1e",
+    "xgen/screens/CatalogScreen.tsx": "3a7e625e084e417f08142e28b9b6fcfa05d2fc3e18217b02bda1c472ea055300",
+    "xgen/screens/CatalogScreen/AppAuthPage.tsx": "a3d3d4de213c46258ff250e12fbc44233d40094eb4a5c66359e848a2202638e0",
+    "xgen/screens/CatalogScreen/AppAuthPagesPage.tsx": "4395d6b46ac98a80cc9e7127c1a27fe8984f96b83d696cfb871faea7bb456ca6",
+    "xgen/screens/CatalogScreen/AppBoardsPage.tsx": "82ed0351377c5231ec829235b789b63bb1538d7b66d65c7182b8e3e312c49813",
+    "xgen/screens/CatalogScreen/AppDashboardShellsPage.tsx": "12a8522123e177836d407d8b8fff5bb7772c10bbc99ca18b219b383ac2a99807",
+    "xgen/screens/CatalogScreen/AppGuidancePage.tsx": "b0e50ba65efab6ba924c5f0972389ab156b2b71b5afe64391c28fad94d28b094",
+    "xgen/screens/CatalogScreen/AppOnboardingPage.tsx": "f6c9c678ace1649799e124cd6dffc1ed0b14d6d48cf2e669df14359e0fa69aa8",
+    "xgen/screens/CatalogScreen/AppSettingsPage.tsx": "80123ae0b59f971f8127325324cffaeb4070684a270a7892794db74d1ad5e683",
+    "xgen/screens/CatalogScreen/AppShellPage.tsx": "05a55cee61aab5c4d051ea9ccedc9bbf18cc3f6c8f46e36153da62f58ca2d2e4",
+    "xgen/screens/CatalogScreen/AppStatesPage.tsx": "d4ab42d292c89d9a26b530b4b7c568b07a064d5c6ac2ccef28a36e0833f1716d",
+    "xgen/screens/CatalogScreen/AppWidgetsPage.tsx": "4b87a9d66d92d98f025d005f36bda19bca03fb01bed837ccbd2828902f1ebad3",
+    "xgen/screens/CatalogScreen/CommerceCartPage.tsx": "ec65d1be6a729aa1eff538163b48b3f17d65c286ff399f2e7a6069f43d0b2403",
+    "xgen/screens/CatalogScreen/CommerceCategoriesPage.tsx": "ecdb05e5c5839978dfe7a2f3e75bf303efcc07a1d995002f072d6a1bf92bd40b",
+    "xgen/screens/CatalogScreen/CommerceCheckoutPage.tsx": "c1e9da5e68a299e625ca4b369fd244bb541628f3f73f8f16d8eb6bc8745ceb22",
+    "xgen/screens/CatalogScreen/CommerceDeliveryPage.tsx": "cc839def81f615ad02c1a16cce67d8eeca48502fb0a3f792fc3ed0529956d848",
+    "xgen/screens/CatalogScreen/CommerceOrdersPage.tsx": "f8dd0bfc37d6963bce138bc0c35d4c7264b67faba308bedd3ff04950e0474162",
+    "xgen/screens/CatalogScreen/CommerceProductPage.tsx": "f2d53a2a84586574d4fa576f8e9d327a8bebc1b1968fa25e0a0f394e1572d654",
+    "xgen/screens/CatalogScreen/CommerceProductsPage.tsx": "2d5332833741aa393a94dabb3d4bb3d59b878d4425303e6a0e4a021ac89f2569",
+    "xgen/screens/CatalogScreen/CommerceStorefrontPage.tsx": "00917f09a92c6b6e4341583db5876c5d48f395dfa266c7cda88be0d99676b267",
+    "xgen/screens/CatalogScreen/ContentArticlePage.tsx": "e713b22f42e0fe77d1dd035b64520f7ba338dfaf410a0945015d940224c4d5a6",
+    "xgen/screens/CatalogScreen/ContentBlogPage.tsx": "41b62402825f50c7cfae44168c7375dd1d196d7baa966ebcaff0ecf7ee19d0a8",
+    "xgen/screens/CatalogScreen/ContentPostHeaderPage.tsx": "6dd326e86b8d917c2fb2b0e8a4e2e2ff8a0113510a6a5ae9f9376f643f2c01e8",
+    "xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.tsx": "38fb2ef7f147bc8319f0ed3621504c7f3f1b80fa7304c91d4fcefe0c9b4c76e5",
+    "xgen/screens/CatalogScreen/ContentPostShowcasePage.tsx": "d9223fae6462bd6fda8dd478e9527da0280d771f8da34a94c1da3bf0365a9d93",
+    "xgen/screens/CatalogScreen/ContentStoryTabsPage.tsx": "38ab7d937b60590ca92da103f0e28f89734379232de462ffc6e6ecca560ec7fd",
+    "xgen/screens/CatalogScreen/ContentTimelinePage.tsx": "37ea2f5616843ae11d6d1d79fa311c3d67d266b52006d37bcb3f88240965a6fd",
+    "xgen/screens/CatalogScreen/IndexPage.tsx": "731dc261e96745f5d0f39dd5ae9b7ff55c255323d3a9c912ba3a84953a0bd3f9",
+    "xgen/screens/CatalogScreen/MarketingAboutPage.tsx": "8c5850b32b58b6334b3e968fea48682f75e1dc3a074445ce13c14982d7ec29e9",
+    "xgen/screens/CatalogScreen/MarketingCareersPage.tsx": "cf6746fb828a7e98dfbc88c4a4fe3121136f262dc0fc2aab22504de162f18618",
+    "xgen/screens/CatalogScreen/MarketingCtaPage.tsx": "a821a6ba70d628b4d28fbd7290adde2860971ff2cebd38f86f87ea3195655b54",
+    "xgen/screens/CatalogScreen/MarketingCtaProofPage.tsx": "a863b79701f27650ad69c418003a768d6ff59c1522994789abf502329b8a7974",
+    "xgen/screens/CatalogScreen/MarketingFaqPage.tsx": "c07d88242e7f93b9876b5d04f55798bdfa9d2150e29e962336327589ef49f7c3",
+    "xgen/screens/CatalogScreen/MarketingFeatureCardsPage.tsx": "dea03e6591541a1f601994003774e56fda9e1b53a7c6462dab30f262db4e573c",
+    "xgen/screens/CatalogScreen/MarketingFeaturesPage.tsx": "18f84cec863550531e759a379b359e9f101b6903d6bec946f4ef38acdcbcb236",
+    "xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.tsx": "c930ae3f428939ad8f2b7c61e70b1dc544e6c787312f1863cfb61a76c1655ab4",
+    "xgen/screens/CatalogScreen/MarketingFooterPage.tsx": "bb75ab88ff183e2328c9028c1b80d5dbb3cad56a82fb300b42c5d74fa866a1ed",
+    "xgen/screens/CatalogScreen/MarketingFooterSplitPage.tsx": "c74231167792eb105b0f8fe1df95812992a2df04acf5ad43ab6da02799bb3471",
+    "xgen/screens/CatalogScreen/MarketingGalleryPage.tsx": "5cdcfdb9520d4c7ef45d5d0e96f51ba2ca3d918f77bd484f65fd4ec02bf3e019",
+    "xgen/screens/CatalogScreen/MarketingHeroPage.tsx": "7e6ac3584baf194d9c23b967b55b4b268f6e0cef7bc1856388ef7779fb0a75ae",
+    "xgen/screens/CatalogScreen/MarketingHeroSplitPage.tsx": "3707898cf9ec7f2c4b7f1101be396eae2175f2bc357596b167f31236ecf6c055",
+    "xgen/screens/CatalogScreen/MarketingHowItWorksPage.tsx": "853876bf6a16131d4ba34aa2ecce65ca19b150ed8e18fae43b5ab454b2adebd9",
+    "xgen/screens/CatalogScreen/MarketingMediaListPage.tsx": "d265c06d2b20b73e0265e7849c73f4755a43e0f294f2c8b4cc45b0c049c6039f",
+    "xgen/screens/CatalogScreen/MarketingNavigationPage.tsx": "6f646ffcabee9786460e5d6a687a5959d7a5ac3cfe2a9b53600e3672b6c68054",
+    "xgen/screens/CatalogScreen/MarketingPageHeadPage.tsx": "37f4d9c42f8003580f9c0ab5e61754a46d3e31a25037163e4456a7d2c46f9e93",
+    "xgen/screens/CatalogScreen/MarketingPageTrailPage.tsx": "013c3ea2c9bbcd13dbc74af7c43b8050253bf5738cc2e723fba70fb351da9584",
+    "xgen/screens/CatalogScreen/MarketingPortfolioPage.tsx": "eb059d641e88b9ab81be7704ebfae57c0a01d2a9eedd8aef2f14e99f9daf5c1b",
+    "xgen/screens/CatalogScreen/MarketingPricingPage.tsx": "6de9a7ba1b5bf07e3b2d925e6dffa803e3a5be861dc679ccb4f6c439a39604c6",
+    "xgen/screens/CatalogScreen/MarketingPricingToolsPage.tsx": "877867d282b6641ae75b9b9783392da7c243038f60c834a0c6efa23b60237717",
+    "xgen/screens/CatalogScreen/MarketingProofPage.tsx": "cefaabf58d58b932227b5e072675aa7a9163a5edc4116aa3272dcde4e085cba0",
+    "xgen/screens/CatalogScreen/MarketingShowcasesPage.tsx": "213d9556cb3f4edacfa2c6ffa0cc1727038229eadbb461247c25fdcf596f774d",
+    "xgen/screens/CatalogScreen/MarketingStatsPage.tsx": "bc471fc487d4ae744b16f8d956419bbad3a2deddbd724ccb6c4b7c6f1316f2bb",
+    "xgen/screens/CatalogScreen/MarketingTeamPage.tsx": "9fa4b1663e3d5495f9ce78ff3a998ef40d00e37ad66c26a03d69088221770429",
+    "xgen/screens/CatalogScreen/MarketingTestimonialsPage.tsx": "5070bb19277cca7849605e018784fe9f5afe51c6467fa636817605793215b537",
+    "xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.tsx": "29d350ce7d491e2dc8bc52c53949abc7dbcf43a3cb746988bc373a7cd4c7a303",
+    "xgen/screens/CatalogScreen/NotfoundPage.tsx": "15328c323c8630f403b915c2073d6b6da8974b90599a81acd652e2f0d2c26334",
+    "xgen/screens/CatalogScreen/PageCartPage.tsx": "e6b0401b84836bde65957a8180d14dbe46c745c5dd66795a27c3fce05fb90fe9",
+    "xgen/screens/CatalogScreen/PageCheckoutPage.tsx": "f1d6d013c4a318b908bd024aa0d4e992449d00f3311620493c2ab9abf622e905",
+    "xgen/screens/CatalogScreen/PageCompanyPage.tsx": "ea0778e8c2728e9f1c31bd2b33533e7c25593d70c06437c26c65ce6a1b588f69",
+    "xgen/screens/CatalogScreen/PagePortfolioPage.tsx": "1bd1f5617544dae9cc42a4b74180d7198afc4d8eadf35fe46230671cab467563",
+    "xgen/screens/CatalogScreen/PageProductDetailPage.tsx": "d3e5f6227027a0eb1d702c7b06518b4e78362c97ef0170617d1b98329ee4992f",
+    "xgen/screens/CatalogScreen/PageSaasLandingPage.tsx": "6c7a382ec21060860cae9850db08d802a40f3cd3194f75b83f5f35a70ce67652",
+    "xgen/screens/CatalogScreen/PageShellClassicPage.tsx": "801b70987b282c709bdb013960b782b7a676693aa4ddf2ada86c576ca2a0b699",
+    "xgen/screens/CatalogScreen/PageShellCollapsedEndPage.tsx": "096b29319e2d39d614809c3b1d9a8dcc3e99900b46fc3a2c158b7d5f7554e18b",
+    "xgen/screens/CatalogScreen/PageShellCollapsedPage.tsx": "a767b4ae8b49effdac5992046136f45adb7953b0855a19f2ed0b176d255b12f6",
+    "xgen/screens/CatalogScreen/PageShellEndPage.tsx": "c349270bf58f995f89fe04659e7eb479e72d06e21fd375e6a6877e068dec2e6e",
+    "xgen/screens/CatalogScreen/PageShellInsetPage.tsx": "9a7ae7e3e5434a3b8ca7d658c3e55af6e50517422bc61413a35ee5e3a9efb36c",
+    "xgen/screens/CatalogScreen/PageShellRailEndPage.tsx": "24e0b20cc3e764727f9b47dd26f8612b8983097479af7c0f2cda0c5e61473644",
+    "xgen/screens/CatalogScreen/PageShellRailFooterPage.tsx": "208f6ac90f1e3ce4fabd7740c5b9fe60836d1d27fcc4f6ea3670afdc70674cad",
+    "xgen/screens/CatalogScreen/PageShellRailPage.tsx": "0fd4c0e4eb85cc0a53792c3d1673a2a25f95c6f1fee33ea480352d6cc7c7e693",
+    "xgen/screens/CatalogScreen/PageShellSideOnlyPage.tsx": "5ad37a6731d1b5ac5aaf99e920cf3e818b02f46bbc7aebc65967c00cd96ef700",
+    "xgen/screens/CatalogScreen/PageShellTopOnlyPage.tsx": "450d3676e9c512f1b968580fe24eb87065f083bd4da4d9c4664267e7a264f05b",
+    "xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.tsx": "94ba3774c8981e75169c580778e6e3b9feeed559e65acd79e75810ae40cfc37c",
+    "xgen/screens/CatalogScreen/PageShellTwoLevelPage.tsx": "4383e53b01daf096b21eb42ce1c786bdc0784ee03cfa78c38b77791000403f6f",
+    "xgen/screens/CatalogScreen/PagesPage.tsx": "63b1ca421e24c03e3ca66fe9a366a1f9680732288e8e4eab954a40de7bdd2a5c",
+    "xgen/screens/CatalogScreen/PageStoreCatalogPage.tsx": "cb95560b4be97973173528bd5692993a04386dc5ae037ce0b4ea4f43b39d7e42",
+    "xgen/screens/CatalogScreen/PageStoreHome2Page.tsx": "5c6d437feea447348535caa42784085e8f5754eb3dacaaf2095d0e4e1c672883",
+    "xgen/screens/CatalogScreen/PageStoreHomePage.tsx": "0918b4de71fa080d0805a3493b4e952647403c250b8f7ee6d0a5998654919cb3",
+    "xgen/screens/CatalogScreen/PromoBannersPage.tsx": "46a027321dff2e9dde49fdb2c1e2b2b84a60f81165f40912af5f44f5513d18d4",
+    "xgen/screens/CatalogScreen/PromoNewsletterPage.tsx": "7eddc9b7de6ae4522914baa1c542c119d7ada9f65c1952cc508ffa0d76ef862c",
+    "xgen/screens/CatalogScreen/ScreenHeader.tsx": "a5543f72d51b20a8bcfe3843c3e9673756d560216f49c1b4e9c81af02ddae269",
+    "xgen/screens/CatalogScreen/SupportContactPage.tsx": "1747f99ecaf275c7d4faab4f672b42d4a3c8fea06d31c7c985a32232a9b47605",
+    "xgen/screens/CatalogScreen/SupportStatesPage.tsx": "eda3bd65d055fbfa2e055f0f046293b77e3797b732d22c6936277470cd71a1ec",
+    "xgen/screens/PlansScreen.tsx": "d6e2043ffbfed100eec4d974e6ff2924d20f6347aba5870483b3e66263058bf3",
+    "xgen/screens/SiteScreen.tsx": "6b800522e9cc8c921fc76009f10d5b5e4f7b0e53d9cd4202cacf21afe50fae47",
+    "xgen/screens/SkinsScreen.tsx": "01584e484aa585eec449191159642f7b73b28ddf5296faf08a3fbe0823b4dfbe",
+    "xgen/screens/SkinsScreen/IndexPage.tsx": "4e915b59ce42dc13842d618dfee0935aff651e57a0e63731b9c497eef4aff714",
+    "xgen/screens/SkinsScreen/NotfoundPage.tsx": "fe5cb806a7292865b48dc41da02f8b25a8d4a7745d6f047e19b984d63921e1ea",
+    "xgen/screens/SkinsScreen/ScreenHeader.tsx": "b8f411bdab96230ed31e874cdd7516c6ea52fabdb7a9d398426a8f768749c2d2",
+    "xgen/screens/ThemeAccountPortalScreen.tsx": "dc809c07e0ad65b6b199a699874394a21c367aef2ae7534d25f4d2c39bf66427",
+    "xgen/screens/ThemeAccountPortalScreen/CardsPage.tsx": "950e23146b76881632656c29af8bec0f1b7356dd7a3cdec4ee9aacab286d3d0f",
+    "xgen/screens/ThemeAccountPortalScreen/HomePage.tsx": "4ff7bb6445ad127e9b70342cd553f4d41a99ababb27e3870f82683ffa3eb574a",
+    "xgen/screens/ThemeAccountPortalScreen/JoinPage.tsx": "5b3a084a7d9409638cbfa91913ec360c6f4eae4d99925db488e5f78ae154c933",
+    "xgen/screens/ThemeAccountPortalScreen/MagicPage.tsx": "44ee288ec5701a0a8fce546a6fea1c910b009ea56b07c793aa21335a8c13168a",
+    "xgen/screens/ThemeAccountPortalScreen/MinimalPage.tsx": "d6c4a67a585f912d52d79667e7d0358b7fb614374fe08bff889f80321f2dfe5f",
+    "xgen/screens/ThemeAccountPortalScreen/OptionsPage.tsx": "c6931ab898b82075dd88abea1c7417dfe3cab51024f7a76778bacab315f1d9eb",
+    "xgen/screens/ThemeAccountPortalScreen/ProfilePage.tsx": "21b527f747ad5e8fae122dbad46997f75d29518cad74adf1bf0bfda2acc8ea3e",
+    "xgen/screens/ThemeAccountPortalScreen/ResetPage.tsx": "e285b6b1e97ab34d391abb3c94e6c831574b7ab837027088ee44544dd3cac395",
+    "xgen/screens/ThemeAccountPortalScreen/SignupPage.tsx": "66a67dfd00a72d1cbe952787db2a7d04c6a595ef89a218a3ca60ef2250cf9910",
+    "xgen/screens/ThemeAccountPortalScreen/StartPage.tsx": "a2620ca806c77dbe2ae67fee1eee65beec6046a7b5e3773c066ec861f9f801db",
+    "xgen/screens/ThemeAccountPortalScreen/WelcomePage.tsx": "c11615ad908aeb4e503d1e090ce7e50ff73572e2d89d66bc62bce46fbfe1547f",
+    "xgen/screens/ThemeCommerceShopScreen.tsx": "b48abf4539944d1a90485efc44dd1510aae69cd133d8cbcae830c9e851c382c5",
+    "xgen/screens/ThemeCommerceShopScreen/BrowsePage.tsx": "aaba938de77feb99779481a853fd34e5d45b9cc46d74c697d36400733ad75d3c",
+    "xgen/screens/ThemeCommerceShopScreen/CartPage.tsx": "2a10a017c03638658c131ea58ca925ac4bf2f09c600f85280064339f2ac90340",
+    "xgen/screens/ThemeCommerceShopScreen/CatalogPage.tsx": "307d67db8cbd1955dd267aeef448e8165ec5b4f02d8ef5523be7be5c1f3718fe",
+    "xgen/screens/ThemeCommerceShopScreen/CheckoutPage.tsx": "ad9d99bb0e2dc1392f75ae1fc9f4550b50a01720d25086216c32553f5a1f5d26",
+    "xgen/screens/ThemeCommerceShopScreen/DeliveryPage.tsx": "6353eab59bbbc9476493bb4a6a6ed7c99adb7cd453e007e5315adddeaa7c46d3",
+    "xgen/screens/ThemeCommerceShopScreen/HomePage.tsx": "ebb2e28da15305f4a3510a7819e19a9a745f3ba3f998ac55208e1d105fd0195e",
+    "xgen/screens/ThemeCommerceShopScreen/OffersPage.tsx": "e99ecc3a590a32d96f13d578c9bc123252f29a1b3d7bb3f824bff9ce4d781bfa",
+    "xgen/screens/ThemeCommerceShopScreen/OrdersPage.tsx": "9cd47d90b466f16ab82f61ac39f87c9dc73a978670570848747096bc94d22afa",
+    "xgen/screens/ThemeCommerceShopScreen/ProductPage.tsx": "40be027781f199043918c846c6f780dcf751cd8444605ccc357c2e94cf669509",
+    "xgen/screens/ThemeContentBlogScreen.tsx": "c8b2c183832e3d48a1d38398665805eccc5664ec0eca51782d6369e8660328fd",
+    "xgen/screens/ThemeContentBlogScreen/ArchivePage.tsx": "214bd5024d9d5c0e805a86f8772465a89b82ba2afbbe79761058b8a0c04f4347",
+    "xgen/screens/ThemeContentBlogScreen/ArticlesPage.tsx": "a721b5d7efceaa88de23b5a4b21143ea5e04637c1039c76d61aad78f20a2e808",
+    "xgen/screens/ThemeContentBlogScreen/EssayPage.tsx": "7863508aa6eaaaa94828081c7ceffc8818f96cfa865fa501dd9bee659993d620",
+    "xgen/screens/ThemeContentBlogScreen/HomePage.tsx": "e1e155be7ed22c1def83219a9da7b9219dfa5b1baa9a8c9f34bf4b5b0d0347e2",
+    "xgen/screens/ThemeContentBlogScreen/PlainPage.tsx": "4c9268c9ffa9852e9a6d9eaee9de1859d77a8256b9701f5354cf0507ae61fa9b",
+    "xgen/screens/ThemeContentBlogScreen/PostPage.tsx": "e1f9e3d4a81f8d0ea400109385fef31de0b1dbcdd0837611caa1fef01e9b6593",
+    "xgen/screens/ThemeContentBlogScreen/StoryPage.tsx": "64378a3699b1ec0403fc0ed56d388ba52c48c5d917cff1f8afb6f73ad457b2e8",
+    "xgen/screens/ThemeDashboardConsoleScreen.tsx": "f02e3b9c95a9d05cff0ecf516260f462a4dd5164c20ad93b2a42acfe8ba517eb",
+    "xgen/screens/ThemeDashboardConsoleScreen/BoardPage.tsx": "f92e599682c59f94ad94de0c26feb88c04d4c1767a8de62368c792718cd885ba",
+    "xgen/screens/ThemeDashboardConsoleScreen/HomePage.tsx": "a4dc07eefa79904d2c552599d4129b5eb8f55fb5881c1df8ce3795b16409967d",
+    "xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.tsx": "c85b96dd0bdf3ab0e8105c3907f6342d717e14e75c2ffbcbf99c62cd04794b50",
+    "xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.tsx": "622e84761466054c05c57908bd544ed013997e5f6d1175822e7b50b5955b8d66",
+    "xgen/screens/ThemeDashboardConsoleScreen/StatesPage.tsx": "a9c16ee205c968bf9ead8549e13e8b6eacc4398421d7315d178b0fa9428f1808",
+    "xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.tsx": "51334723c1c98dd34fd6177c4428df36542f2e889ed6e778f7c274e48f7706e5",
+    "xgen/screens/ThemeMarketingLandingScreen.tsx": "5f2c121ac075b42f0a5a03d40db5b6efb54b32d1516f05c15d53c6d0fd0dca97",
+    "xgen/screens/ThemeMarketingLandingScreen/CompanyPage.tsx": "54e6e8a995998236e834086a1f868ca9612d72071cd2dd15082d4deda04d23fa",
+    "xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.tsx": "3e5bfdd0b5b5c75ecef64f31a77c05fb3eaa5526b84644fd37b43eaf8b75a2c6",
+    "xgen/screens/ThemeMarketingLandingScreen/EventsPage.tsx": "05b4ea2578f79e1566d8b06cec51e3bcbda99f53469627f9f882d84b3135013f",
+    "xgen/screens/ThemeMarketingLandingScreen/HomePage.tsx": "a61bc96e966bf5c47d17409841f93e35f25814403cb8eb77104509e948a2ccf0",
+    "xgen/screens/ThemeMarketingLandingScreen/LaunchPage.tsx": "a91cc2dbe1f7b0e44807b28dde0f08bf926360b67441c23a11d975187ed31bbf",
+    "xgen/screens/ThemeMarketingLandingScreen/StudioPage.tsx": "3b2e67b217e059e7244eee6d9e757be7daa99052a932140bf40e43e4ebf261c8",
+    "xgen/screens/ThemeMarketingLandingScreen/TeamsPage.tsx": "99cb1a31b6e9b4bba2a689cab3b67c29ea430d597237d4c8ee620517a893cceb",
+    "xgen/screens/ThemeMarketingLandingScreen/WorkPage.tsx": "296cafc6873317adc735d1311071edefb41c2471573155dfc566a32b1aa27573",
+    "xgen/screens/ThemeMarketingPricingScreen.tsx": "ef278c7a97e2936b50718be6b5e3e4071f402f7416bae75b978f39f280c0a5df",
+    "xgen/screens/ThemeMarketingPricingScreen/ComparePage.tsx": "cde4c28ac384bbda898db76e9323fcfaabc3642377ad40d2e60c3e9d559ce789",
+    "xgen/screens/ThemeMarketingPricingScreen/HomePage.tsx": "65bdf54f03e8ec1a3ccc6c778635c5b140440714c4a40d5e8d3a9d1dc6b9b28f",
+    "xgen/screens/ThemeMarketingPricingScreen/PlansPage.tsx": "48871324d706356803bba983fb4f64d99e56b6cebf86b31de47f51454d5901a4",
+    "xgen/screens/ThemeMarketingPricingScreen/UsagePage.tsx": "4fd0158cbd1c2e83318837b40deb38e3dfb519a4b9bfba88a28ba5ee0cb67e8a",
+    "xgen/screens/ThemeMarketingProductScreen.tsx": "2292472c7594329df9784ddfda828b07696e2dc30818d5bb8d46086e303dce02",
+    "xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.tsx": "70aa3fe5f2e489280a4539d009907b9e3f3591c1fc0cb60377dc2de65c0fef6f",
+    "xgen/screens/ThemeMarketingProductScreen/HomePage.tsx": "e1e5a65a775b389e9a56d267ca2776515dfb64f7ac1fd661cef732a22c1bad3a",
+    "xgen/screens/ThemeMarketingProductScreen/NavigationPage.tsx": "0de3358d31b2e470baa2d93c6db0298751c05244e43aa799d92729a4289aee13",
+    "xgen/screens/ThemeMarketingProductScreen/TourPage.tsx": "f62f48c701a9bf15fb75915c4ad4491575f1636d7e24eee72441cc5755741f17",
+    "xgen/screens/ThemeOnboardingFlowScreen.tsx": "9cd5de6526c0a3a0ad82235ec5f9405f1e44b69cfee4f722eb6d2bc0472239fc",
+    "xgen/screens/ThemeOnboardingFlowScreen/HomePage.tsx": "d4144726eefd9163e590f662ef16f4baae9314fd6e69170da50ffb647c50b228",
+    "xgen/screens/ThemeOnboardingFlowScreen/SetupPage.tsx": "c20311204e7baea2a518ba011d2a200506769c3236bc2b822117aab4bcad9805",
+    "xgen/screens/ThemeOnboardingFlowScreen/TourPage.tsx": "5af3d1132b12f53d417594e70f8fc3c9490ed8a74900fb92c0932f6439f6fbf7",
+    "xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.tsx": "a186182d75cdaadc60232f3a71615c990bae799d28ea5c5fac7a40018c00db62",
+    "xgen/screens/ThemePromoCampaignScreen.tsx": "8124fba7ec942ad1fd386f7415b1d320cec1c55394755604ebc6484cde574331",
+    "xgen/screens/ThemePromoCampaignScreen/HomePage.tsx": "62088412103dafb1a46a7de4c1cb3be6d401f7964c88fed292762532d90044af",
+    "xgen/screens/ThemePromoCampaignScreen/LaunchPage.tsx": "615e87d2f790ef161b5f8ac8698fb0afe2b42fd12e40685c1622e2eb00245fc0",
+    "xgen/screens/ThemePromoCampaignScreen/NoticesPage.tsx": "35fe684f574559e43eb53bbd6220ddd1c5dc9530bf9d7a36feb47b2c6e818a5c",
+    "xgen/screens/ThemePromoCampaignScreen/OfferPage.tsx": "7e2a486c02fb46b1fff3daa5c5eb0e81b6a15fdaf294b179f0101fe54b47ed7c",
+    "xgen/screens/ThemeSupportCenterScreen.tsx": "3d50318168c92fe53853330874087985bc0bfb4826ed853f2a97ee08db62d350",
+    "xgen/screens/ThemeSupportCenterScreen/ContactPage.tsx": "ef168ec6fe5393e08c3bc9f526f352dab4685ccd6d9084cb57521035e0b06a27",
+    "xgen/screens/ThemeSupportCenterScreen/FaqPage.tsx": "07df473609633a62a93fdcf585e7f905414767280422268337fbf3c15cf03993",
+    "xgen/screens/ThemeSupportCenterScreen/HomePage.tsx": "5300263d6011e9c89de8b3f8300bc839644e8c28cc36d3abd684a13caa309f91",
+    "xgen/screens/ThemeSupportCenterScreen/MissingPage.tsx": "96f3d0f73988050f7689763ac4980e83a502f16be2dbbf400c062c6f5d0db56e",
+    "xgen/screens/ThemeSupportCenterScreen/MovedPage.tsx": "dcc7df8cf8027e7baf1409b8378a2a7212ca9fa9120bd026aa9a998df940b304"
+  }
+}
diff --git a/apps/host-react/xgen/App.tsx b/apps/host-react/xgen/App.tsx
new file mode 100644
index 0000000..3118bdf
--- /dev/null
+++ b/apps/host-react/xgen/App.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/react/src/app.ts (settings: apps/host-react/xgen.app.json)
+import { Block, Link, List, ListItem, Title } from "@ui8kit/react-ui";
+import { SCREENS } from "@ui8kit/app-shared/screens";
+import { useUrl } from "./runtime/url";
+import { ScreenOutlet, type ScreenModule } from "./runtime/ScreenOutlet";
+
+/** one chunk per screen: a landing is a screen spec, not an app */
+const LOADERS: Record<string, () => Promise<ScreenModule>> = {
+  "blocks": () => import("./screens/BlocksScreen").then((m) => ({ default: m.BlocksScreen })),
+  "catalog": () => import("./screens/CatalogScreen").then((m) => ({ default: m.CatalogScreen })),
+  "plans": () => import("./screens/PlansScreen").then((m) => ({ default: m.PlansScreen })),
+  "site": () => import("./screens/SiteScreen").then((m) => ({ default: m.SiteScreen })),
+  "skins": () => import("./screens/SkinsScreen").then((m) => ({ default: m.SkinsScreen })),
+  "theme-account-portal": () => import("./screens/ThemeAccountPortalScreen").then((m) => ({ default: m.ThemeAccountPortalScreen })),
+  "theme-commerce-shop": () => import("./screens/ThemeCommerceShopScreen").then((m) => ({ default: m.ThemeCommerceShopScreen })),
+  "theme-content-blog": () => import("./screens/ThemeContentBlogScreen").then((m) => ({ default: m.ThemeContentBlogScreen })),
+  "theme-dashboard-console": () => import("./screens/ThemeDashboardConsoleScreen").then((m) => ({ default: m.ThemeDashboardConsoleScreen })),
+  "theme-marketing-landing": () => import("./screens/ThemeMarketingLandingScreen").then((m) => ({ default: m.ThemeMarketingLandingScreen })),
+  "theme-marketing-pricing": () => import("./screens/ThemeMarketingPricingScreen").then((m) => ({ default: m.ThemeMarketingPricingScreen })),
+  "theme-marketing-product": () => import("./screens/ThemeMarketingProductScreen").then((m) => ({ default: m.ThemeMarketingProductScreen })),
+  "theme-onboarding-flow": () => import("./screens/ThemeOnboardingFlowScreen").then((m) => ({ default: m.ThemeOnboardingFlowScreen })),
+  "theme-promo-campaign": () => import("./screens/ThemePromoCampaignScreen").then((m) => ({ default: m.ThemePromoCampaignScreen })),
+  "theme-support-center": () => import("./screens/ThemeSupportCenterScreen").then((m) => ({ default: m.ThemeSupportCenterScreen })),
+};
+
+export function App({ screen, title }: { screen: string; title: string }) {
+  const url = useUrl();
+  const load = LOADERS[screen];
+  if (load) return <ScreenOutlet load={load} url={url} />;
+  return (
+    <Block tag="main" id="main-content" className="mx-auto w-full max-w-3xl px-4 py-12" data-testid="host-index">
+      <Title as={1} size="2xl" weight="semibold">{title}</Title>
+      <List className="mt-6 grid gap-2">
+        {SCREENS.map((s) => <ListItem key={s.key}><Link className="underline" href={`/${s.key}/`} data-testid="host-screen">{s.key}</Link></ListItem>)}
+      </List>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/runtime/ScreenOutlet.tsx b/apps/host-react/xgen/runtime/ScreenOutlet.tsx
new file mode 100644
index 0000000..e89b70d
--- /dev/null
+++ b/apps/host-react/xgen/runtime/ScreenOutlet.tsx
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/react/src/app.ts (settings: apps/host-react/xgen.app.json)
+// The outlet of the host frame: renders the screen chunk behind a loader (one lazy component per loader, cached).
+import { lazy, Suspense, type ComponentType, type LazyExoticComponent } from "react";
+import type { UrlPort } from "@ui8kit/app-shared/runtime/core";
+
+export type ScreenModule = { default: ComponentType<{ url: UrlPort }> };
+type Loader = () => Promise<ScreenModule>;
+
+const cache = new Map<Loader, LazyExoticComponent<ComponentType<{ url: UrlPort }>>>();
+
+export function ScreenOutlet({ load, url }: { load: Loader; url: UrlPort }) {
+  let Screen = cache.get(load);
+  if (!Screen) { Screen = lazy(load); cache.set(load, Screen); }
+  return <Suspense fallback={null}><Screen url={url} /></Suspense>;
+}
diff --git a/apps/host-react/xgen/runtime/url.ts b/apps/host-react/xgen/runtime/url.ts
new file mode 100644
index 0000000..fb11eb5
--- /dev/null
+++ b/apps/host-react/xgen/runtime/url.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/react/assets/url.ts
+// The URL as a port for React: the hash store of the app runtime read through useSyncExternalStore.
+import { useMemo, useSyncExternalStore } from "react";
+import { createHashStore, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+
+const store = createHashStore();
+
+export function useUrl(): UrlPort {
+  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot);
+  return useMemo(() => ({ ...snapshot, go: store.go }), [snapshot]);
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen.tsx b/apps/host-react/xgen/screens/BlocksScreen.tsx
new file mode 100644
index 0000000..de9c124
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen.tsx
@@ -0,0 +1,405 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+/**
+ * The block gallery: an index of blocks grouped by topic and one page per block with every variant, on the
+ * fixtures. Built from the block catalog; nothing is written by hand.
+ */
+
+import { Block } from "@ui8kit/react-ui";
+import { IndexPage } from "./BlocksScreen/IndexPage";
+import { AboutPage } from "./BlocksScreen/AboutPage";
+import { AboutmePage } from "./BlocksScreen/AboutmePage";
+import { AccordionPage } from "./BlocksScreen/AccordionPage";
+import { BeforeafterPage } from "./BlocksScreen/BeforeafterPage";
+import { BentoPage } from "./BlocksScreen/BentoPage";
+import { ComparePage } from "./BlocksScreen/ComparePage";
+import { CreditsPage } from "./BlocksScreen/CreditsPage";
+import { CtaPage } from "./BlocksScreen/CtaPage";
+import { CtaproofPage } from "./BlocksScreen/CtaproofPage";
+import { FaqPage } from "./BlocksScreen/FaqPage";
+import { FaqsplitPage } from "./BlocksScreen/FaqsplitPage";
+import { FeaturesPage } from "./BlocksScreen/FeaturesPage";
+import { FeatureshowcasePage } from "./BlocksScreen/FeatureshowcasePage";
+import { FeaturesplitPage } from "./BlocksScreen/FeaturesplitPage";
+import { FeaturetabsPage } from "./BlocksScreen/FeaturetabsPage";
+import { FooterPage } from "./BlocksScreen/FooterPage";
+import { FootersplitPage } from "./BlocksScreen/FootersplitPage";
+import { HeaderPage } from "./BlocksScreen/HeaderPage";
+import { HeroPage } from "./BlocksScreen/HeroPage";
+import { HerosplitPage } from "./BlocksScreen/HerosplitPage";
+import { IconwallPage } from "./BlocksScreen/IconwallPage";
+import { JobsPage } from "./BlocksScreen/JobsPage";
+import { LogosPage } from "./BlocksScreen/LogosPage";
+import { MedialistPage } from "./BlocksScreen/MedialistPage";
+import { MegamenuPage } from "./BlocksScreen/MegamenuPage";
+import { NavbarPage } from "./BlocksScreen/NavbarPage";
+import { PageheadPage } from "./BlocksScreen/PageheadPage";
+import { PagetrailPage } from "./BlocksScreen/PagetrailPage";
+import { PhotosPage } from "./BlocksScreen/PhotosPage";
+import { PlanPage } from "./BlocksScreen/PlanPage";
+import { PricingPage } from "./BlocksScreen/PricingPage";
+import { ProjectsPage } from "./BlocksScreen/ProjectsPage";
+import { ProofPage } from "./BlocksScreen/ProofPage";
+import { QuotesplitPage } from "./BlocksScreen/QuotesplitPage";
+import { SitemapPage } from "./BlocksScreen/SitemapPage";
+import { StatsPage } from "./BlocksScreen/StatsPage";
+import { StepsPage } from "./BlocksScreen/StepsPage";
+import { StickyPage } from "./BlocksScreen/StickyPage";
+import { TeamPage } from "./BlocksScreen/TeamPage";
+import { TemplatesPage } from "./BlocksScreen/TemplatesPage";
+import { TestimonialsPage } from "./BlocksScreen/TestimonialsPage";
+import { UsagePage } from "./BlocksScreen/UsagePage";
+import { VideosPage } from "./BlocksScreen/VideosPage";
+import { CartPage } from "./BlocksScreen/CartPage";
+import { CartdrawerPage } from "./BlocksScreen/CartdrawerPage";
+import { CartpagePage } from "./BlocksScreen/CartpagePage";
+import { CategoriesPage } from "./BlocksScreen/CategoriesPage";
+import { CheckoutPage } from "./BlocksScreen/CheckoutPage";
+import { DeliveryPage } from "./BlocksScreen/DeliveryPage";
+import { LocationsPage } from "./BlocksScreen/LocationsPage";
+import { OrdersPage } from "./BlocksScreen/OrdersPage";
+import { ProductPage } from "./BlocksScreen/ProductPage";
+import { ProductinfoPage } from "./BlocksScreen/ProductinfoPage";
+import { ProductsPage } from "./BlocksScreen/ProductsPage";
+import { ReviewsPage } from "./BlocksScreen/ReviewsPage";
+import { SlotsPage } from "./BlocksScreen/SlotsPage";
+import { StoreheroPage } from "./BlocksScreen/StoreheroPage";
+import { SummaryPage } from "./BlocksScreen/SummaryPage";
+import { UspPage } from "./BlocksScreen/UspPage";
+import { ZonesPage } from "./BlocksScreen/ZonesPage";
+import { AnnouncementPage } from "./BlocksScreen/AnnouncementPage";
+import { CookiePage } from "./BlocksScreen/CookiePage";
+import { NewsletterPage } from "./BlocksScreen/NewsletterPage";
+import { ArticlePage } from "./BlocksScreen/ArticlePage";
+import { PostheaderPage } from "./BlocksScreen/PostheaderPage";
+import { PostsPage } from "./BlocksScreen/PostsPage";
+import { PostshowcasePage } from "./BlocksScreen/PostshowcasePage";
+import { PostsplitPage } from "./BlocksScreen/PostsplitPage";
+import { StorytabsPage } from "./BlocksScreen/StorytabsPage";
+import { TimelinePage } from "./BlocksScreen/TimelinePage";
+import { AuthPage } from "./BlocksScreen/AuthPage";
+import { AuthpagePage } from "./BlocksScreen/AuthpagePage";
+import { ProfilePage } from "./BlocksScreen/ProfilePage";
+import { WizardPage } from "./BlocksScreen/WizardPage";
+import { ActivityPage } from "./BlocksScreen/ActivityPage";
+import { BottomnavPage } from "./BlocksScreen/BottomnavPage";
+import { ChartPage } from "./BlocksScreen/ChartPage";
+import { DashshellPage } from "./BlocksScreen/DashshellPage";
+import { EmptyPage } from "./BlocksScreen/EmptyPage";
+import { KanbanPage } from "./BlocksScreen/KanbanPage";
+import { MetricsPage } from "./BlocksScreen/MetricsPage";
+import { OverviewPage } from "./BlocksScreen/OverviewPage";
+import { ShellPage } from "./BlocksScreen/ShellPage";
+import { SidenavPage } from "./BlocksScreen/SidenavPage";
+import { SkeletonPage } from "./BlocksScreen/SkeletonPage";
+import { ChecklistPage } from "./BlocksScreen/ChecklistPage";
+import { StepperPage } from "./BlocksScreen/StepperPage";
+import { TourPage } from "./BlocksScreen/TourPage";
+import { VideomodalPage } from "./BlocksScreen/VideomodalPage";
+import { ChannelsPage } from "./BlocksScreen/ChannelsPage";
+import { ContactPage } from "./BlocksScreen/ContactPage";
+import { ErrorpagePage } from "./BlocksScreen/ErrorpagePage";
+import { NotfoundPage } from "./BlocksScreen/NotfoundPage";
+import { ScreenHeader } from "./BlocksScreen/ScreenHeader";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ROUTES = [
+  {"path":"","area":"index"},
+  {"path":"about","area":"about"},
+  {"path":"aboutme","area":"aboutme"},
+  {"path":"accordion","area":"accordion"},
+  {"path":"beforeafter","area":"beforeafter"},
+  {"path":"bento","area":"bento"},
+  {"path":"compare","area":"compare"},
+  {"path":"credits","area":"credits"},
+  {"path":"cta","area":"cta"},
+  {"path":"ctaproof","area":"ctaproof"},
+  {"path":"faq","area":"faq"},
+  {"path":"faqsplit","area":"faqsplit"},
+  {"path":"features","area":"features"},
+  {"path":"featureshowcase","area":"featureshowcase"},
+  {"path":"featuresplit","area":"featuresplit"},
+  {"path":"featuretabs","area":"featuretabs"},
+  {"path":"footer","area":"footer"},
+  {"path":"footersplit","area":"footersplit"},
+  {"path":"header","area":"header"},
+  {"path":"hero","area":"hero"},
+  {"path":"herosplit","area":"herosplit"},
+  {"path":"iconwall","area":"iconwall"},
+  {"path":"jobs","area":"jobs"},
+  {"path":"logos","area":"logos"},
+  {"path":"medialist","area":"medialist"},
+  {"path":"megamenu","area":"megamenu"},
+  {"path":"navbar","area":"navbar"},
+  {"path":"pagehead","area":"pagehead"},
+  {"path":"pagetrail","area":"pagetrail"},
+  {"path":"photos","area":"photos"},
+  {"path":"plan","area":"plan"},
+  {"path":"pricing","area":"pricing"},
+  {"path":"projects","area":"projects"},
+  {"path":"proof","area":"proof"},
+  {"path":"quotesplit","area":"quotesplit"},
+  {"path":"sitemap","area":"sitemap"},
+  {"path":"stats","area":"stats"},
+  {"path":"steps","area":"steps"},
+  {"path":"sticky","area":"sticky"},
+  {"path":"team","area":"team"},
+  {"path":"templates","area":"templates"},
+  {"path":"testimonials","area":"testimonials"},
+  {"path":"usage","area":"usage"},
+  {"path":"videos","area":"videos"},
+  {"path":"cart","area":"cart"},
+  {"path":"cartdrawer","area":"cartdrawer"},
+  {"path":"cartpage","area":"cartpage"},
+  {"path":"categories","area":"categories"},
+  {"path":"checkout","area":"checkout"},
+  {"path":"delivery","area":"delivery"},
+  {"path":"locations","area":"locations"},
+  {"path":"orders","area":"orders"},
+  {"path":"product","area":"product"},
+  {"path":"productinfo","area":"productinfo"},
+  {"path":"products","area":"products"},
+  {"path":"reviews","area":"reviews"},
+  {"path":"slots","area":"slots"},
+  {"path":"storehero","area":"storehero"},
+  {"path":"summary","area":"summary"},
+  {"path":"usp","area":"usp"},
+  {"path":"zones","area":"zones"},
+  {"path":"announcement","area":"announcement"},
+  {"path":"cookie","area":"cookie"},
+  {"path":"newsletter","area":"newsletter"},
+  {"path":"article","area":"article"},
+  {"path":"postheader","area":"postheader"},
+  {"path":"posts","area":"posts"},
+  {"path":"postshowcase","area":"postshowcase"},
+  {"path":"postsplit","area":"postsplit"},
+  {"path":"storytabs","area":"storytabs"},
+  {"path":"timeline","area":"timeline"},
+  {"path":"auth","area":"auth"},
+  {"path":"authpage","area":"authpage"},
+  {"path":"profile","area":"profile"},
+  {"path":"wizard","area":"wizard"},
+  {"path":"activity","area":"activity"},
+  {"path":"bottomnav","area":"bottomnav"},
+  {"path":"chart","area":"chart"},
+  {"path":"dashshell","area":"dashshell"},
+  {"path":"empty","area":"empty"},
+  {"path":"kanban","area":"kanban"},
+  {"path":"metrics","area":"metrics"},
+  {"path":"overview","area":"overview"},
+  {"path":"shell","area":"shell"},
+  {"path":"sidenav","area":"sidenav"},
+  {"path":"skeleton","area":"skeleton"},
+  {"path":"checklist","area":"checklist"},
+  {"path":"stepper","area":"stepper"},
+  {"path":"tour","area":"tour"},
+  {"path":"videomodal","area":"videomodal"},
+  {"path":"channels","area":"channels"},
+  {"path":"contact","area":"contact"},
+  {"path":"errorpage","area":"errorpage"},
+] as const;
+
+const HOME = { area: "notfound", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function BlocksScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  return (
+    <>
+      <ScreenHeader />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "index" ? (
+          <IndexPage />
+        ) : route.area === "about" ? (
+          <AboutPage />
+        ) : route.area === "aboutme" ? (
+          <AboutmePage />
+        ) : route.area === "accordion" ? (
+          <AccordionPage />
+        ) : route.area === "beforeafter" ? (
+          <BeforeafterPage />
+        ) : route.area === "bento" ? (
+          <BentoPage />
+        ) : route.area === "compare" ? (
+          <ComparePage />
+        ) : route.area === "credits" ? (
+          <CreditsPage />
+        ) : route.area === "cta" ? (
+          <CtaPage />
+        ) : route.area === "ctaproof" ? (
+          <CtaproofPage />
+        ) : route.area === "faq" ? (
+          <FaqPage />
+        ) : route.area === "faqsplit" ? (
+          <FaqsplitPage />
+        ) : route.area === "features" ? (
+          <FeaturesPage />
+        ) : route.area === "featureshowcase" ? (
+          <FeatureshowcasePage />
+        ) : route.area === "featuresplit" ? (
+          <FeaturesplitPage />
+        ) : route.area === "featuretabs" ? (
+          <FeaturetabsPage />
+        ) : route.area === "footer" ? (
+          <FooterPage />
+        ) : route.area === "footersplit" ? (
+          <FootersplitPage />
+        ) : route.area === "header" ? (
+          <HeaderPage />
+        ) : route.area === "hero" ? (
+          <HeroPage />
+        ) : route.area === "herosplit" ? (
+          <HerosplitPage />
+        ) : route.area === "iconwall" ? (
+          <IconwallPage />
+        ) : route.area === "jobs" ? (
+          <JobsPage />
+        ) : route.area === "logos" ? (
+          <LogosPage />
+        ) : route.area === "medialist" ? (
+          <MedialistPage />
+        ) : route.area === "megamenu" ? (
+          <MegamenuPage />
+        ) : route.area === "navbar" ? (
+          <NavbarPage />
+        ) : route.area === "pagehead" ? (
+          <PageheadPage />
+        ) : route.area === "pagetrail" ? (
+          <PagetrailPage />
+        ) : route.area === "photos" ? (
+          <PhotosPage />
+        ) : route.area === "plan" ? (
+          <PlanPage />
+        ) : route.area === "pricing" ? (
+          <PricingPage />
+        ) : route.area === "projects" ? (
+          <ProjectsPage />
+        ) : route.area === "proof" ? (
+          <ProofPage />
+        ) : route.area === "quotesplit" ? (
+          <QuotesplitPage />
+        ) : route.area === "sitemap" ? (
+          <SitemapPage />
+        ) : route.area === "stats" ? (
+          <StatsPage />
+        ) : route.area === "steps" ? (
+          <StepsPage />
+        ) : route.area === "sticky" ? (
+          <StickyPage />
+        ) : route.area === "team" ? (
+          <TeamPage />
+        ) : route.area === "templates" ? (
+          <TemplatesPage />
+        ) : route.area === "testimonials" ? (
+          <TestimonialsPage />
+        ) : route.area === "usage" ? (
+          <UsagePage />
+        ) : route.area === "videos" ? (
+          <VideosPage />
+        ) : route.area === "cart" ? (
+          <CartPage />
+        ) : route.area === "cartdrawer" ? (
+          <CartdrawerPage />
+        ) : route.area === "cartpage" ? (
+          <CartpagePage />
+        ) : route.area === "categories" ? (
+          <CategoriesPage />
+        ) : route.area === "checkout" ? (
+          <CheckoutPage />
+        ) : route.area === "delivery" ? (
+          <DeliveryPage />
+        ) : route.area === "locations" ? (
+          <LocationsPage />
+        ) : route.area === "orders" ? (
+          <OrdersPage />
+        ) : route.area === "product" ? (
+          <ProductPage />
+        ) : route.area === "productinfo" ? (
+          <ProductinfoPage />
+        ) : route.area === "products" ? (
+          <ProductsPage />
+        ) : route.area === "reviews" ? (
+          <ReviewsPage />
+        ) : route.area === "slots" ? (
+          <SlotsPage />
+        ) : route.area === "storehero" ? (
+          <StoreheroPage />
+        ) : route.area === "summary" ? (
+          <SummaryPage />
+        ) : route.area === "usp" ? (
+          <UspPage />
+        ) : route.area === "zones" ? (
+          <ZonesPage />
+        ) : route.area === "announcement" ? (
+          <AnnouncementPage />
+        ) : route.area === "cookie" ? (
+          <CookiePage />
+        ) : route.area === "newsletter" ? (
+          <NewsletterPage />
+        ) : route.area === "article" ? (
+          <ArticlePage />
+        ) : route.area === "postheader" ? (
+          <PostheaderPage />
+        ) : route.area === "posts" ? (
+          <PostsPage />
+        ) : route.area === "postshowcase" ? (
+          <PostshowcasePage />
+        ) : route.area === "postsplit" ? (
+          <PostsplitPage />
+        ) : route.area === "storytabs" ? (
+          <StorytabsPage />
+        ) : route.area === "timeline" ? (
+          <TimelinePage />
+        ) : route.area === "auth" ? (
+          <AuthPage />
+        ) : route.area === "authpage" ? (
+          <AuthpagePage />
+        ) : route.area === "profile" ? (
+          <ProfilePage />
+        ) : route.area === "wizard" ? (
+          <WizardPage />
+        ) : route.area === "activity" ? (
+          <ActivityPage />
+        ) : route.area === "bottomnav" ? (
+          <BottomnavPage />
+        ) : route.area === "chart" ? (
+          <ChartPage />
+        ) : route.area === "dashshell" ? (
+          <DashshellPage />
+        ) : route.area === "empty" ? (
+          <EmptyPage />
+        ) : route.area === "kanban" ? (
+          <KanbanPage />
+        ) : route.area === "metrics" ? (
+          <MetricsPage />
+        ) : route.area === "overview" ? (
+          <OverviewPage />
+        ) : route.area === "shell" ? (
+          <ShellPage />
+        ) : route.area === "sidenav" ? (
+          <SidenavPage />
+        ) : route.area === "skeleton" ? (
+          <SkeletonPage />
+        ) : route.area === "checklist" ? (
+          <ChecklistPage />
+        ) : route.area === "stepper" ? (
+          <StepperPage />
+        ) : route.area === "tour" ? (
+          <TourPage />
+        ) : route.area === "videomodal" ? (
+          <VideomodalPage />
+        ) : route.area === "channels" ? (
+          <ChannelsPage />
+        ) : route.area === "contact" ? (
+          <ContactPage />
+        ) : route.area === "errorpage" ? (
+          <ErrorpagePage />
+        ) : (
+          <NotfoundPage />
+        )}
+      </Block>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/AboutPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/AboutPage.tsx
new file mode 100644
index 0000000..82a3b04
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/AboutPage.tsx
@@ -0,0 +1,146 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The about page of BlocksScreen.
+
+import {
+  AboutCompany,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+
+export function AboutPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.about}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.about}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="about-split-label"
+            data-testid="variant"
+            data-block="about"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="about-split-label" data-testid="variant-label">
+              {ui.blocks.variants.about.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutCompany
+                id="about-split"
+                title={ui.company.about.title}
+                lead={ui.company.about.lead}
+                stats={stats}
+                values={values}
+                layout="split"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="about-stacked-label"
+            data-testid="variant"
+            data-block="about"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="about-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.about.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutCompany
+                id="about-stacked"
+                title={ui.company.about.title}
+                lead={ui.company.about.lead}
+                stats={stats}
+                values={values}
+                layout="stacked"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="about-muted-label"
+            data-testid="variant"
+            data-block="about"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="about-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.about.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutCompany
+                id="about-muted"
+                title={ui.company.about.title}
+                lead={ui.company.about.lead}
+                stats={stats}
+                values={values}
+                layout="split"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/AboutmePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/AboutmePage.tsx
new file mode 100644
index 0000000..91b2c05
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/AboutmePage.tsx
@@ -0,0 +1,184 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The aboutme page of BlocksScreen.
+
+import {
+  AboutMe,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Skill,
+  type Spec,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+
+const ABOUTME_ACTIONS = { mode: "two", cta: ui.company.aboutMe.cta, href: "#/work", secondary: ui.company.aboutMe.more, secondaryHref: "#/contact" } as const;
+
+export function AboutmePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.aboutme}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.aboutme}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-facts-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="facts"
+          >
+            <Title as={2} size="base" weight="bold" id="aboutme-facts-label" data-testid="variant-label">
+              {ui.blocks.variants.aboutme.facts}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-facts"
+                title={ui.company.aboutMe.title}
+                lead={ui.company.aboutMe.lead}
+                badge={ui.company.aboutMe.badge}
+                facts={profilefacts}
+                skills={skills}
+                labels={ui.company.aboutMe}
+                actions={ABOUTME_ACTIONS}
+                layout="facts"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.facts))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-factsEnd-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="factsEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="aboutme-factsEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.aboutme.factsEnd}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-factsEnd"
+                title={ui.company.aboutMe.title}
+                lead={ui.company.aboutMe.lead}
+                badge={ui.company.aboutMe.badge}
+                facts={profilefacts}
+                skills={skills}
+                labels={ui.company.aboutMe}
+                actions={ABOUTME_ACTIONS}
+                layout="facts"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.factsEnd))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-skills-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="skills"
+          >
+            <Title as={2} size="base" weight="bold" id="aboutme-skills-label" data-testid="variant-label">
+              {ui.blocks.variants.aboutme.skills}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-skills"
+                title={ui.company.aboutMe.title}
+                lead={ui.company.aboutMe.lead}
+                badge={ui.company.aboutMe.badge}
+                facts={profilefacts}
+                skills={skills}
+                labels={ui.company.aboutMe}
+                actions={ABOUTME_ACTIONS}
+                layout="skills"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skills))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-skillsMuted-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="skillsMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="aboutme-skillsMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.aboutme.skillsMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-skillsMuted"
+                title={ui.company.aboutMe.title}
+                lead={ui.company.aboutMe.lead}
+                badge={ui.company.aboutMe.badge}
+                facts={profilefacts}
+                skills={skills}
+                labels={ui.company.aboutMe}
+                actions={ABOUTME_ACTIONS}
+                layout="skills"
+                mediaSide="end"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skillsMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/AccordionPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/AccordionPage.tsx
new file mode 100644
index 0000000..5450d67
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/AccordionPage.tsx
@@ -0,0 +1,162 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The accordion page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureAccordion,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function AccordionPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.accordion}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.accordion}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-first-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="first"
+          >
+            <Title as={2} size="base" weight="bold" id="accordion-first-label" data-testid="variant-label">
+              {ui.blocks.variants.accordion.first}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-first"
+                title={ui.vibe.accordion.title}
+                features={features}
+                empty={ui.empty.features}
+                expand="first"
+                media="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-closed-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="closed"
+          >
+            <Title as={2} size="base" weight="bold" id="accordion-closed-label" data-testid="variant-label">
+              {ui.blocks.variants.accordion.closed}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-closed"
+                title={ui.vibe.accordion.title}
+                features={features}
+                empty={ui.empty.features}
+                expand="none"
+                media="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.closed))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-media-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="media"
+          >
+            <Title as={2} size="base" weight="bold" id="accordion-media-label" data-testid="variant-label">
+              {ui.blocks.variants.accordion.media}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-media"
+                title={ui.vibe.accordion.title}
+                features={features}
+                empty={ui.empty.features}
+                expand="first"
+                media="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-muted-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="accordion-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.accordion.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-muted"
+                title={ui.vibe.accordion.title}
+                features={features}
+                empty={ui.empty.features}
+                expand="first"
+                media="none"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ActivityPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ActivityPage.tsx
new file mode 100644
index 0000000..6529a80
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ActivityPage.tsx
@@ -0,0 +1,168 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The activity page of BlocksScreen.
+
+import {
+  ActivityFeed,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+
+export function ActivityPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.activity}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.activity}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-timeline-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="timeline"
+          >
+            <Title as={2} size="base" weight="bold" id="activity-timeline-label" data-testid="variant-label">
+              {ui.blocks.variants.activity.timeline}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-timeline"
+                title={ui.dashboard.activity.title}
+                text={ui.dashboard.activity.text}
+                events={activity}
+                empty={ui.empty.activity}
+                layout="timeline"
+                density="default"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-list-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="activity-list-label" data-testid="variant-label">
+              {ui.blocks.variants.activity.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-list"
+                title={ui.dashboard.activity.title}
+                text={ui.dashboard.activity.text}
+                events={activity}
+                empty={ui.empty.activity}
+                layout="list"
+                density="default"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-compact-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="activity-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.activity.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-compact"
+                title={ui.dashboard.activity.title}
+                text={ui.dashboard.activity.text}
+                events={activity}
+                empty={ui.empty.activity}
+                layout="list"
+                density="compact"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-muted-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="activity-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.activity.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-muted"
+                title={ui.dashboard.activity.title}
+                text={ui.dashboard.activity.text}
+                events={activity}
+                empty={ui.empty.activity}
+                layout="timeline"
+                density="default"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/AnnouncementPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/AnnouncementPage.tsx
new file mode 100644
index 0000000..dd07818
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/AnnouncementPage.tsx
@@ -0,0 +1,277 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The announcement page of BlocksScreen.
+
+import {
+  AnnouncementBar,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function AnnouncementPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+              {ui.blocks.themes.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.announcement}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.announcement}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-bar-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.bar}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="default"
+                layout="center"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-badge-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="badge"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-badge-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.badge}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="muted"
+                layout="center"
+                dismiss="hide"
+                badge="show"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-bottom-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="bottom"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-bottom-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.bottom}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="default"
+                layout="split"
+                dismiss="show"
+                badge="none"
+                position="bottom"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-muted-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="muted"
+                layout="center"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.muted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-split-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-split-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="muted"
+                layout="split"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-dismissible-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="dismissible"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-dismissible-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.dismissible}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="default"
+                layout="center"
+                dismiss="show"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-shop-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="shop"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-shop-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.shop}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.cases.shop.announcement.text}
+                cta={ui.cases.shop.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="muted"
+                layout="center"
+                dismiss="show"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-agency-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="agency"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-agency-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.agency}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.cases.agency.announcement.text}
+                cta={ui.cases.agency.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="default"
+                layout="split"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.agency))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ArticlePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ArticlePage.tsx
new file mode 100644
index 0000000..e660d96
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ArticlePage.tsx
@@ -0,0 +1,157 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The article page of BlocksScreen.
+
+import {
+  ArticleBody,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Section,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function ArticlePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.article}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.article}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-column-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="column"
+          >
+            <Title as={2} size="base" weight="bold" id="article-column-label" data-testid="variant-label">
+              {ui.blocks.variants.article.column}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-column"
+                title={ui.vibe.article.title}
+                sections={article}
+                empty={ui.empty.sections}
+                tocTitle={ui.vibe.article.toc}
+                layout="column"
+                quotes="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-toc-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="toc"
+          >
+            <Title as={2} size="base" weight="bold" id="article-toc-label" data-testid="variant-label">
+              {ui.blocks.variants.article.toc}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-toc"
+                title={ui.vibe.article.title}
+                sections={article}
+                empty={ui.empty.sections}
+                tocTitle={ui.vibe.article.toc}
+                layout="toc"
+                quotes="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-plain-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="article-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.article.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-plain"
+                title={ui.vibe.article.title}
+                sections={article}
+                empty={ui.empty.sections}
+                tocTitle={ui.vibe.article.toc}
+                layout="column"
+                quotes="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-muted-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="article-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.article.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-muted"
+                title={ui.vibe.article.title}
+                sections={article}
+                empty={ui.empty.sections}
+                tocTitle={ui.vibe.article.toc}
+                layout="column"
+                quotes="show"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/AuthPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/AuthPage.tsx
new file mode 100644
index 0000000..113a206
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/AuthPage.tsx
@@ -0,0 +1,301 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The auth page of BlocksScreen.
+
+import {
+  AuthCard,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function AuthPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+              {ui.blocks.themes.account.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.auth}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.auth}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-signin-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="signin"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-signin-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.signin}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-signin"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchText={ui.auth.signin.switchText}
+                  switchLink={ui.auth.signin.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signin"
+                  layout="card"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-magic-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="magic"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-magic-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.magic}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-magic"
+                  title={ui.auth.magic.title}
+                  text={ui.auth.magic.text}
+                  submit={ui.auth.magic.submit}
+                  switchText={ui.auth.magic.switchText}
+                  switchLink={ui.auth.magic.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="magic"
+                  layout="card"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.magic))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-socialFirst-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="socialFirst"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-socialFirst-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.socialFirst}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-socialFirst"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchText={ui.auth.signin.switchText}
+                  switchLink={ui.auth.signin.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signin"
+                  layout="card"
+                  social="first"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.socialFirst))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-signup-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="signup"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-signup-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.signup}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-signup"
+                  title={ui.auth.signup.title}
+                  text={ui.auth.signup.text}
+                  submit={ui.auth.signup.submit}
+                  switchText={ui.auth.signup.switchText}
+                  switchLink={ui.auth.signup.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signup"
+                  layout="card"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signup))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-reset-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="reset"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-reset-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.reset}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-reset"
+                  title={ui.auth.reset.title}
+                  text={ui.auth.reset.text}
+                  submit={ui.auth.reset.submit}
+                  switchText={ui.auth.reset.switchText}
+                  switchLink={ui.auth.reset.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="reset"
+                  layout="card"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.reset))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-plain-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-plain"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchText={ui.auth.signin.switchText}
+                  switchLink={ui.auth.signin.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signin"
+                  layout="plain"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.plain))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-social-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="social"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-social-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.social}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-social"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchText={ui.auth.signin.switchText}
+                  switchLink={ui.auth.signin.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signin"
+                  layout="card"
+                  social="show"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-signupSocial-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="signupSocial"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-signupSocial-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.signupSocial}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-signupSocial"
+                  title={ui.auth.signup.title}
+                  text={ui.auth.signup.text}
+                  submit={ui.auth.signup.submit}
+                  switchText={ui.auth.signup.switchText}
+                  switchLink={ui.auth.signup.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signup"
+                  layout="plain"
+                  social="show"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/AuthpagePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/AuthpagePage.tsx
new file mode 100644
index 0000000..4fed531
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/AuthpagePage.tsx
@@ -0,0 +1,321 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The authpage page of BlocksScreen.
+
+import {
+  AuthLayout,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const AUTHPAGE_SWITCH_TO = { text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" } as const;
+
+export function AuthpagePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+              {ui.blocks.themes.account.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.authpage}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.authpage}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-split-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-split-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-split"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="split"
+                side="end"
+                mode="signin"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-splitStart-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="splitStart"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-splitStart-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.splitStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-splitStart"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="split"
+                side="start"
+                mode="signin"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.splitStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-centered-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.centered}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-centered"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="centered"
+                side="end"
+                mode="signin"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-minimal-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.minimal}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-minimal"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="minimal"
+                side="end"
+                mode="signin"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.minimal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-signup-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="signup"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-signup-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.signup}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-signup"
+                title={ui.auth.signup.title}
+                text={ui.auth.signup.text}
+                submit={ui.auth.signup.submit}
+                switchTo={{
+                  ...AUTHPAGE_SWITCH_TO,
+                  text: ui.auth.signup.switchText,
+                  link: ui.auth.signup.switchLink,
+                }}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="split"
+                side="end"
+                mode="signup"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.signup))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-reset-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="reset"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-reset-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.reset}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-reset"
+                title={ui.auth.reset.title}
+                text={ui.auth.reset.text}
+                submit={ui.auth.reset.submit}
+                switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink }}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="centered"
+                side="end"
+                mode="reset"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.reset))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-magic-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="magic"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-magic-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.magic}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-magic"
+                title={ui.auth.magic.title}
+                text={ui.auth.magic.text}
+                submit={ui.auth.magic.submit}
+                switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink }}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="minimal"
+                side="end"
+                mode="magic"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.magic))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-social-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="social"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-social-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.social}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-social"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="split"
+                side="end"
+                mode="signin"
+                social="show"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.social))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-socialFirst-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="socialFirst"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-socialFirst-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.socialFirst}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-socialFirst"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="centered"
+                side="end"
+                mode="signin"
+                social="first"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.socialFirst))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/BeforeafterPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/BeforeafterPage.tsx
new file mode 100644
index 0000000..2fc51ee
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/BeforeafterPage.tsx
@@ -0,0 +1,166 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The beforeafter page of BlocksScreen.
+
+import {
+  BeforeAfter,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Contrast,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+
+export function BeforeafterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.beforeafter}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.beforeafter}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-cards-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="beforeafter-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.beforeafter.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-cards"
+                title={ui.vibe.beforeafter.title}
+                points={beforeafter}
+                empty={ui.empty.points}
+                labels={ui.vibe.beforeafter.labels}
+                layout="cards"
+                icons="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-rows-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="rows"
+          >
+            <Title as={2} size="base" weight="bold" id="beforeafter-rows-label" data-testid="variant-label">
+              {ui.blocks.variants.beforeafter.rows}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-rows"
+                title={ui.vibe.beforeafter.title}
+                points={beforeafter}
+                empty={ui.empty.points}
+                labels={ui.vibe.beforeafter.labels}
+                layout="rows"
+                icons="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-plain-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="beforeafter-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.beforeafter.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-plain"
+                title={ui.vibe.beforeafter.title}
+                points={beforeafter}
+                empty={ui.empty.points}
+                labels={ui.vibe.beforeafter.labels}
+                layout="cards"
+                icons="hide"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-muted-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="beforeafter-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.beforeafter.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-muted"
+                title={ui.vibe.beforeafter.title}
+                points={beforeafter}
+                empty={ui.empty.points}
+                labels={ui.vibe.beforeafter.labels}
+                layout="cards"
+                icons="show"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/BentoPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/BentoPage.tsx
new file mode 100644
index 0000000..9957dbe
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/BentoPage.tsx
@@ -0,0 +1,162 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The bento page of BlocksScreen.
+
+import {
+  BentoGrid,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Tile,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+
+export function BentoPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.bento}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.bento}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-bento-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="bento"
+          >
+            <Title as={2} size="base" weight="bold" id="bento-bento-label" data-testid="variant-label">
+              {ui.blocks.variants.bento.bento}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-bento"
+                title={ui.vibe.bento.title}
+                tiles={bento}
+                empty={ui.empty.tiles}
+                layout="bento"
+                media="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-even-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="even"
+          >
+            <Title as={2} size="base" weight="bold" id="bento-even-label" data-testid="variant-label">
+              {ui.blocks.variants.bento.even}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-even"
+                title={ui.vibe.bento.title}
+                tiles={bento}
+                empty={ui.empty.tiles}
+                layout="even"
+                media="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.even))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-images-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="images"
+          >
+            <Title as={2} size="base" weight="bold" id="bento-images-label" data-testid="variant-label">
+              {ui.blocks.variants.bento.images}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-images"
+                title={ui.vibe.bento.title}
+                tiles={bento}
+                empty={ui.empty.tiles}
+                layout="bento"
+                media="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-muted-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="bento-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.bento.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-muted"
+                title={ui.vibe.bento.title}
+                tiles={bento}
+                empty={ui.empty.tiles}
+                layout="bento"
+                media="none"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/BottomnavPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/BottomnavPage.tsx
new file mode 100644
index 0000000..20c11fe
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/BottomnavPage.tsx
@@ -0,0 +1,154 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The bottomnav page of BlocksScreen.
+
+import {
+  Block,
+  BottomNav,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+
+export function BottomnavPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.bottomnav}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.bottomnav}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-labels-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="labels"
+          >
+            <Title as={2} size="base" weight="bold" id="bottomnav-labels-label" data-testid="variant-label">
+              {ui.blocks.variants.bottomnav.labels}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                label={ui.vibe.bottom.label}
+                tabs={tabs}
+                current="tab-explore"
+                labels="show"
+                position="static"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-icons-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="bottomnav-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.bottomnav.icons}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                label={ui.vibe.bottom.label}
+                tabs={tabs}
+                current="tab-explore"
+                labels="hide"
+                position="static"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-sticky-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="sticky"
+          >
+            <Title as={2} size="base" weight="bold" id="bottomnav-sticky-label" data-testid="variant-label">
+              {ui.blocks.variants.bottomnav.sticky}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                label={ui.vibe.bottom.label}
+                tabs={tabs}
+                current="tab-explore"
+                labels="show"
+                position="sticky"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.sticky))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-muted-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="bottomnav-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.bottomnav.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                label={ui.vibe.bottom.label}
+                tabs={tabs}
+                current="tab-explore"
+                labels="show"
+                position="static"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/CartPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/CartPage.tsx
new file mode 100644
index 0000000..672e07e
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/CartPage.tsx
@@ -0,0 +1,173 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cart page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  CartList,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+
+export function CartPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cart}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cart}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-table-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="table"
+          >
+            <Title as={2} size="base" weight="bold" id="cart-table-label" data-testid="variant-label">
+              {ui.blocks.variants.cart.table}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-table"
+                title={ui.commerce.cart.title}
+                lines={cart}
+                empty={ui.empty.cart}
+                labels={ui.commerce.cart}
+                layout="table"
+                media="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-cards-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="cart-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.cart.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-cards"
+                title={ui.commerce.cart.title}
+                lines={cart}
+                empty={ui.empty.cart}
+                labels={ui.commerce.cart}
+                layout="cards"
+                media="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-tableCompact-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="tableCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="cart-tableCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.cart.tableCompact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-tableCompact"
+                title={ui.commerce.cart.title}
+                lines={cart}
+                empty={ui.empty.cart}
+                labels={ui.commerce.cart}
+                layout="table"
+                media="none"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.tableCompact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-cardsPlain-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="cardsPlain"
+          >
+            <Title as={2} size="base" weight="bold" id="cart-cardsPlain-label" data-testid="variant-label">
+              {ui.blocks.variants.cart.cardsPlain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-cardsPlain"
+                title={ui.commerce.cart.title}
+                lines={cart}
+                empty={ui.empty.cart}
+                labels={ui.commerce.cart}
+                layout="cards"
+                media="none"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cardsPlain))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/CartdrawerPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/CartdrawerPage.tsx
new file mode 100644
index 0000000..f56856d
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/CartdrawerPage.tsx
@@ -0,0 +1,150 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cartdrawer page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  CartDrawer,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+
+export function CartdrawerPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cartdrawer}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cartdrawer}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartdrawer-filled-label"
+            data-testid="variant"
+            data-block="cartdrawer"
+            data-variant="filled"
+          >
+            <Title as={2} size="base" weight="bold" id="cartdrawer-filled-label" data-testid="variant-label">
+              {ui.blocks.variants.cartdrawer.filled}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartDrawer
+                id="cartdrawer-filled"
+                lines={cart}
+                rows={summary}
+                labels={ui.commerce.cart}
+                drawer={ui.commerce.drawer}
+                state="filled"
+                media="image"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartdrawer-compact-label"
+            data-testid="variant"
+            data-block="cartdrawer"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="cartdrawer-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.cartdrawer.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartDrawer
+                id="cartdrawer-compact"
+                lines={cart}
+                rows={summary}
+                labels={ui.commerce.cart}
+                drawer={ui.commerce.drawer}
+                state="filled"
+                media="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartdrawer-empty-label"
+            data-testid="variant"
+            data-block="cartdrawer"
+            data-variant="empty"
+          >
+            <Title as={2} size="base" weight="bold" id="cartdrawer-empty-label" data-testid="variant-label">
+              {ui.blocks.variants.cartdrawer.empty}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartDrawer
+                id="cartdrawer-empty"
+                lines={cart}
+                rows={summary}
+                labels={ui.commerce.cart}
+                drawer={ui.commerce.drawer}
+                state="empty"
+                media="image"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.empty))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/CartpagePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/CartpagePage.tsx
new file mode 100644
index 0000000..421733e
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/CartpagePage.tsx
@@ -0,0 +1,169 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cartpage page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ShoppingCart,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+
+export function CartpagePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cartpage}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cartpage}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartpage-split-label"
+            data-testid="variant"
+            data-block="cartpage"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="cartpage-split-label" data-testid="variant-label">
+              {ui.blocks.variants.cartpage.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ShoppingCart
+                id="cartpage-split"
+                title={ui.commerce.cartPage.title}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.cart}
+                totals={ui.commerce.totals}
+                actions={ui.commerce.cartPage}
+                layout="split"
+                promo="show"
+                progress="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartpage-stacked-label"
+            data-testid="variant"
+            data-block="cartpage"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="cartpage-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.cartpage.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ShoppingCart
+                id="cartpage-stacked"
+                title={ui.commerce.cartPage.title}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.cart}
+                totals={ui.commerce.totals}
+                actions={ui.commerce.cartPage}
+                layout="stacked"
+                promo="show"
+                progress="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartpage-plain-label"
+            data-testid="variant"
+            data-block="cartpage"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="cartpage-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.cartpage.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ShoppingCart
+                id="cartpage-plain"
+                title={ui.commerce.cartPage.title}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.cart}
+                totals={ui.commerce.totals}
+                actions={ui.commerce.cartPage}
+                layout="split"
+                promo="hide"
+                progress="hide"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.plain))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/CategoriesPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/CategoriesPage.tsx
new file mode 100644
index 0000000..3ed8025
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/CategoriesPage.tsx
@@ -0,0 +1,240 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The categories page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+
+export function CategoriesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.categories}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.categories}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-chips-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="chips"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-chips-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.chips}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="chips"
+                count="show"
+                icon="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-bar-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.bar}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="bar"
+                count="show"
+                icon="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-sidebar-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="sidebar"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-sidebar-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.sidebar}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="sidebar"
+                count="show"
+                icon="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-chipsPlain-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="chipsPlain"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-chipsPlain-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.chipsPlain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="chips"
+                count="hide"
+                icon="hide"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chipsPlain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-barCompact-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="barCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-barCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.barCompact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="bar"
+                count="show"
+                icon="hide"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.barCompact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-tiles-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="tiles"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-tiles-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.tiles}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="tiles"
+                count="show"
+                icon="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.tiles))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-toolbar-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="toolbar"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-toolbar-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.toolbar}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="toolbar"
+                count="show"
+                icon="hide"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.toolbar))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ChannelsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ChannelsPage.tsx
new file mode 100644
index 0000000..20b0705
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ChannelsPage.tsx
@@ -0,0 +1,161 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The channels page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  SupportChannels,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function ChannelsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+              {ui.blocks.themes.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.channels}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.channels}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-grid-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="channels-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.channels.grid}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-grid"
+                title={ui.support.channels.title}
+                channels={channels}
+                empty={ui.empty.channels}
+                open={ui.support.channels.open}
+                layout="grid"
+                cols="1-3"
+                action="link"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-twoUp-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="twoUp"
+          >
+            <Title as={2} size="base" weight="bold" id="channels-twoUp-label" data-testid="variant-label">
+              {ui.blocks.variants.channels.twoUp}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-twoUp"
+                title={ui.support.channels.title}
+                channels={channels}
+                empty={ui.empty.channels}
+                open={ui.support.channels.open}
+                layout="grid"
+                cols="1-2"
+                action="link"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-list-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="channels-list-label" data-testid="variant-label">
+              {ui.blocks.variants.channels.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-list"
+                title={ui.support.channels.title}
+                channels={channels}
+                empty={ui.empty.channels}
+                open={ui.support.channels.open}
+                layout="list"
+                cols="1-3"
+                action="link"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-plain-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="channels-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.channels.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-plain"
+                title={ui.support.channels.title}
+                channels={channels}
+                empty={ui.empty.channels}
+                open={ui.support.channels.open}
+                layout="grid"
+                cols="1-3"
+                action="none"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.plain))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ChartPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ChartPage.tsx
new file mode 100644
index 0000000..9ccae9b
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ChartPage.tsx
@@ -0,0 +1,170 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The chart page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  ChartPanel,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Point,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+
+export function ChartPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.chart}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.chart}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-bars-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="bars"
+          >
+            <Title as={2} size="base" weight="bold" id="chart-bars-label" data-testid="variant-label">
+              {ui.blocks.variants.chart.bars}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-bars"
+                title={ui.dashboard.chart.title}
+                text={ui.dashboard.chart.text}
+                series={series}
+                empty={ui.empty.series}
+                summary={ui.dashboard.chart.summary}
+                percent={ui.dashboard.chart.percent}
+                chart="bars"
+                size="default"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-short-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="short"
+          >
+            <Title as={2} size="base" weight="bold" id="chart-short-label" data-testid="variant-label">
+              {ui.blocks.variants.chart.short}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-short"
+                title={ui.dashboard.chart.title}
+                text={ui.dashboard.chart.text}
+                series={series}
+                empty={ui.empty.series}
+                summary={ui.dashboard.chart.summary}
+                percent={ui.dashboard.chart.percent}
+                chart="bars"
+                size="compact"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.short))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-meters-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="meters"
+          >
+            <Title as={2} size="base" weight="bold" id="chart-meters-label" data-testid="variant-label">
+              {ui.blocks.variants.chart.meters}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-meters"
+                title={ui.dashboard.chart.title}
+                text={ui.dashboard.chart.text}
+                series={series}
+                empty={ui.empty.series}
+                summary={ui.dashboard.chart.summary}
+                percent={ui.dashboard.chart.percent}
+                chart="meters"
+                size="default"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-muted-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="chart-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.chart.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-muted"
+                title={ui.dashboard.chart.title}
+                text={ui.dashboard.chart.text}
+                series={series}
+                empty={ui.empty.series}
+                summary={ui.dashboard.chart.summary}
+                percent={ui.dashboard.chart.percent}
+                chart="meters"
+                size="compact"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ChecklistPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ChecklistPage.tsx
new file mode 100644
index 0000000..3be3fd1
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ChecklistPage.tsx
@@ -0,0 +1,254 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The checklist page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Checklist,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Task,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+
+export function ChecklistPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="onboarding"
+            >
+              {ui.blocks.themes.onboarding.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.checklist}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.checklist}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-card-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-card-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.card}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-card"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="bar"
+                marker="check"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-expand-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="expand"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-expand-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.expand}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-expand"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="bar"
+                marker="check"
+                detail="expand"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-plain-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-plain"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="plain"
+                progress="bar"
+                marker="check"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-text-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="text"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-text-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.text}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-text"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="text"
+                marker="check"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-none-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="none"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-none-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.none}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-none"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="plain"
+                progress="none"
+                marker="check"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.none))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-numbered-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="numbered"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-numbered-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.numbered}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-numbered"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="bar"
+                marker="number"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-muted-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-muted"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="text"
+                marker="number"
+                detail="always"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/CheckoutPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/CheckoutPage.tsx
new file mode 100644
index 0000000..39ef41e
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/CheckoutPage.tsx
@@ -0,0 +1,177 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The checkout page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  CheckoutForm,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Day,
+  type Payment,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+
+export function CheckoutPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.checkout}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.checkout}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checkout-cards-label"
+            data-testid="variant"
+            data-block="checkout"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="checkout-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.checkout.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CheckoutForm
+                id="checkout-cards"
+                title={ui.commerce.checkout.title}
+                days={days}
+                payments={payments}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.checkout}
+                totals={ui.commerce.totals}
+                layout="cards"
+                summary="aside"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checkout-numbered-label"
+            data-testid="variant"
+            data-block="checkout"
+            data-variant="numbered"
+          >
+            <Title as={2} size="base" weight="bold" id="checkout-numbered-label" data-testid="variant-label">
+              {ui.blocks.variants.checkout.numbered}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CheckoutForm
+                id="checkout-numbered"
+                title={ui.commerce.checkout.title}
+                days={days}
+                payments={payments}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.checkout}
+                totals={ui.commerce.totals}
+                layout="numbered"
+                summary="aside"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checkout-noSummary-label"
+            data-testid="variant"
+            data-block="checkout"
+            data-variant="noSummary"
+          >
+            <Title as={2} size="base" weight="bold" id="checkout-noSummary-label" data-testid="variant-label">
+              {ui.blocks.variants.checkout.noSummary}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CheckoutForm
+                id="checkout-noSummary"
+                title={ui.commerce.checkout.title}
+                days={days}
+                payments={payments}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.checkout}
+                totals={ui.commerce.totals}
+                layout="cards"
+                summary="none"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.noSummary))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ComparePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ComparePage.tsx
new file mode 100644
index 0000000..ebe90aa
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ComparePage.tsx
@@ -0,0 +1,165 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The compare page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  ComparisonTable,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+
+export function ComparePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.compare}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.compare}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-plans-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="plans"
+          >
+            <Title as={2} size="base" weight="bold" id="compare-plans-label" data-testid="variant-label">
+              {ui.blocks.variants.compare.plans}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-plans"
+                title={ui.vibe.compare.title}
+                rows={compare}
+                empty={ui.empty.rows}
+                labels={ui.vibe.compare.labels}
+                highlight="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-highlight-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="highlight"
+          >
+            <Title as={2} size="base" weight="bold" id="compare-highlight-label" data-testid="variant-label">
+              {ui.blocks.variants.compare.highlight}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-highlight"
+                title={ui.vibe.compare.title}
+                rows={compare}
+                empty={ui.empty.rows}
+                labels={ui.vibe.compare.labels}
+                highlight="middle"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-rivals-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="rivals"
+          >
+            <Title as={2} size="base" weight="bold" id="compare-rivals-label" data-testid="variant-label">
+              {ui.blocks.variants.compare.rivals}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-rivals"
+                title={ui.vibe.rivals.title}
+                rows={rivals}
+                empty={ui.empty.rows}
+                labels={ui.vibe.rivals.labels}
+                highlight="middle"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-muted-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="compare-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.compare.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-muted"
+                title={ui.vibe.compare.title}
+                rows={compare}
+                empty={ui.empty.rows}
+                labels={ui.vibe.compare.labels}
+                highlight="none"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ContactPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ContactPage.tsx
new file mode 100644
index 0000000..43b26b6
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ContactPage.tsx
@@ -0,0 +1,227 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The contact page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  ContactForm,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function ContactPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+              {ui.blocks.themes.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.contact}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.contact}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-single-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="single"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-single-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.single}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-single"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="single"
+                fields="full"
+                terms="hide"
+                page="section"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-page-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="page"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-page-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.page}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-page"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="single"
+                fields="short"
+                terms="hide"
+                page="full"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.page))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-short-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="short"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-short-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.short}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-short"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="single"
+                fields="short"
+                terms="hide"
+                page="section"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.short))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-split-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-split-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-split"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="split"
+                fields="full"
+                terms="hide"
+                page="section"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-consent-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="consent"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-consent-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.consent}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-consent"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="single"
+                fields="full"
+                terms="show"
+                page="section"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-muted-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-muted"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="split"
+                fields="short"
+                terms="show"
+                page="section"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/CookiePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/CookiePage.tsx
new file mode 100644
index 0000000..52a2eaa
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/CookiePage.tsx
@@ -0,0 +1,153 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cookie page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CookieBanner,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function CookiePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+              {ui.blocks.themes.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cookie}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cookie}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-bar-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="cookie-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.cookie.bar}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-bar"
+                title={ui.promo.cookie.title}
+                text={ui.promo.cookie.text}
+                accept={ui.promo.cookie.accept}
+                decline={ui.promo.cookie.decline}
+                settings={ui.promo.cookie.settings}
+                layout="bar"
+                actions="two"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-card-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="cookie-card-label" data-testid="variant-label">
+              {ui.blocks.variants.cookie.card}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-card"
+                title={ui.promo.cookie.title}
+                text={ui.promo.cookie.text}
+                accept={ui.promo.cookie.accept}
+                decline={ui.promo.cookie.decline}
+                settings={ui.promo.cookie.settings}
+                layout="card"
+                actions="two"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-settings-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="settings"
+          >
+            <Title as={2} size="base" weight="bold" id="cookie-settings-label" data-testid="variant-label">
+              {ui.blocks.variants.cookie.settings}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-settings"
+                title={ui.promo.cookie.title}
+                text={ui.promo.cookie.text}
+                accept={ui.promo.cookie.accept}
+                decline={ui.promo.cookie.decline}
+                settings={ui.promo.cookie.settings}
+                layout="bar"
+                actions="three"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-muted-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="cookie-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.cookie.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-muted"
+                title={ui.promo.cookie.title}
+                text={ui.promo.cookie.text}
+                accept={ui.promo.cookie.accept}
+                decline={ui.promo.cookie.decline}
+                settings={ui.promo.cookie.settings}
+                layout="card"
+                actions="three"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/CreditsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/CreditsPage.tsx
new file mode 100644
index 0000000..724d44a
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/CreditsPage.tsx
@@ -0,0 +1,177 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The credits page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CreditPacks,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Pack,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+const CREDITS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "credits": "metadata.credits.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "badge": "metadata.badge.value",
+} as const;
+
+const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+
+export function CreditsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.credits}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.credits}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-tiles4-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="tiles4"
+          >
+            <Title as={2} size="base" weight="bold" id="credits-tiles4-label" data-testid="variant-label">
+              {ui.blocks.variants.credits.tiles4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-tiles4"
+                title={ui.vibe.credits.title}
+                packs={credits}
+                empty={ui.empty.packs}
+                badges={ui.vibe.credits.badges}
+                buy={ui.vibe.credits.buy}
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-tiles2-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="tiles2"
+          >
+            <Title as={2} size="base" weight="bold" id="credits-tiles2-label" data-testid="variant-label">
+              {ui.blocks.variants.credits.tiles2}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-tiles2"
+                title={ui.vibe.credits.title}
+                packs={credits}
+                empty={ui.empty.packs}
+                badges={ui.vibe.credits.badges}
+                buy={ui.vibe.credits.buy}
+                cols="2"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-rows-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="rows"
+          >
+            <Title as={2} size="base" weight="bold" id="credits-rows-label" data-testid="variant-label">
+              {ui.blocks.variants.credits.rows}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-rows"
+                title={ui.vibe.credits.title}
+                packs={credits}
+                empty={ui.empty.packs}
+                badges={ui.vibe.credits.badges}
+                buy={ui.vibe.credits.buy}
+                cols="4"
+                item="row"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-muted-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="credits-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.credits.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-muted"
+                title={ui.vibe.credits.title}
+                packs={credits}
+                empty={ui.empty.packs}
+                badges={ui.vibe.credits.badges}
+                buy={ui.vibe.credits.buy}
+                cols="4"
+                item="tile"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/CtaPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/CtaPage.tsx
new file mode 100644
index 0000000..bd5eb6d
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/CtaPage.tsx
@@ -0,0 +1,370 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cta page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const CTA_ACTIONS = {
+  cta: ui.site.home.ctaButton,
+  href: "#/pricing",
+  secondary: ui.site.home.ctaSecondary,
+  secondaryHref: "#/",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+
+export function CtaPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cta}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cta}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-card-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-card-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.card}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-card"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="card"
+                tone="muted"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-banner-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="banner"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-banner-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.banner}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-banner"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="banner"
+                tone="muted"
+                proof="none"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.banner))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-row-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-row-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.row}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-row"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="row"
+                tone="muted"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-form-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="form"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-form-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.form}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-form"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "form" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="band"
+                tone="muted"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-quote-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="quote"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-quote-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.quote}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-quote"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="band"
+                tone="muted"
+                proof="quote"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-band-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="band"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-band-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.band}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-band"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="band"
+                tone="muted"
+                proof="none"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-split-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-split-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-split"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "two" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="split"
+                tone="default"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-compact-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-compact"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="card"
+                tone="muted"
+                proof="none"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-saas-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="saas"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-saas-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.saas}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-saas"
+                title={ui.cases.saas.cta.title}
+                text={ui.cases.saas.cta.text}
+                actions={{
+                  ...CTA_ACTIONS,
+                  cta: ui.cases.saas.cta.cta,
+                  secondary: ui.cases.saas.cta.secondary,
+                  mode: "two",
+                }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="band"
+                tone="muted"
+                proof="none"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-shop-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="shop"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-shop-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.shop}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-shop"
+                title={ui.cases.shop.cta.title}
+                text={ui.cases.shop.cta.text}
+                actions={{
+                  ...CTA_ACTIONS,
+                  cta: ui.cases.shop.cta.cta,
+                  secondary: ui.cases.shop.cta.secondary,
+                  mode: "one",
+                }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="split"
+                tone="default"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-agency-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="agency"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-agency-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.agency}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-agency"
+                title={ui.cases.agency.cta.title}
+                text={ui.cases.agency.cta.text}
+                actions={{
+                  ...CTA_ACTIONS,
+                  cta: ui.cases.agency.cta.cta,
+                  secondary: ui.cases.agency.cta.secondary,
+                  mode: "two",
+                }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="card"
+                tone="muted"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/CtaproofPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/CtaproofPage.tsx
new file mode 100644
index 0000000..da8366c
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/CtaproofPage.tsx
@@ -0,0 +1,292 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The ctaproof page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaProof,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Logo,
+  type Stat,
+  type Zone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+const CTAPROOF_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.ctaProof.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.ctaProof.secondary,
+  secondaryHref: "#/contact",
+} as const;
+const CTAPROOF_CONTENT = { logos, features, stats, zones } as const;
+
+export function CtaproofPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.ctaproof}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.ctaproof}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-centerLogos-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="centerLogos"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-centerLogos-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.centerLogos}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-centerLogos"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="center"
+                proof="logos"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerLogos))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-centerFeatures-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="centerFeatures"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-centerFeatures-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.centerFeatures}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-centerFeatures"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="center"
+                proof="features"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerFeatures))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-centerStats-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="centerStats"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-centerStats-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.centerStats}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-centerStats"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="center"
+                proof="stats"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerStats))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitStats-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitStats"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-splitStats-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.splitStats}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitStats"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="split"
+                proof="stats"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitStatsStart-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitStatsStart"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-splitStatsStart-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.splitStatsStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitStatsStart"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="split"
+                proof="stats"
+                mediaSide="start"
+                tone="default"
+                note={ui.marketing.ctaProof.note}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStatsStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitRows-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitRows"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-splitRows-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.splitRows}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitRows"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="split"
+                proof="rows"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitRows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitZones-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitZones"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-splitZones-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.splitZones}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitZones"
+                title={ui.marketing.ctaProof.zonesTitle}
+                lead={ui.marketing.ctaProof.zonesLead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="split"
+                proof="zones"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitZones))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/DashshellPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/DashshellPage.tsx
new file mode 100644
index 0000000..47dea19
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/DashshellPage.tsx
@@ -0,0 +1,417 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The dashshell page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DashboardShell,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+const DASHSHELL_NAV = {
+  label: ui.dashboard.shells.label,
+  brand: ui.site.header.brand,
+  links: sidenav,
+  current: "item-orders",
+  subTitle: ui.dashboard.shells.subTitle,
+  sub: subnav,
+  subCurrent: "subitem-all",
+  search: ui.dashboard.shells.search,
+  shortcut: ui.dashboard.shells.shortcut,
+  expand: ui.dashboard.shells.expand,
+  userName: ui.dashboard.shells.userName,
+  copyright: ui.dashboard.shells.copyright,
+  footerLabel: ui.dashboard.shells.footerLabel,
+  footer: helplinks,
+} as const;
+
+export function DashshellPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.dashshell}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.dashshell}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-classic-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="classic"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-classic-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.classic}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-classic"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="show"
+                sidebar="wide"
+                side="start"
+                footer="none"
+                content="grid"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-inset-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="inset"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-inset-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.inset}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-inset"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="show"
+                sidebar="wide"
+                side="start"
+                footer="inset"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.inset))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-rail-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="rail"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-rail-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.rail}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-rail"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="hide"
+                sidebar="rail"
+                side="start"
+                footer="none"
+                content="list"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.rail))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-railFooter-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="railFooter"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-railFooter-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.railFooter}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-railFooter"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="show"
+                sidebar="rail"
+                side="start"
+                footer="full"
+                content="grid"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railFooter))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-collapsed-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="collapsed"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-collapsed-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.collapsed}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-collapsed"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="show"
+                sidebar="collapsed"
+                side="start"
+                footer="none"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsed))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-twoLevel-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="twoLevel"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-twoLevel-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.twoLevel}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-twoLevel"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="hide"
+                sidebar="twolevel"
+                side="start"
+                footer="inset"
+                content="list"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-twoLevelFull-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="twoLevelFull"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-twoLevelFull-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.twoLevelFull}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-twoLevelFull"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="show"
+                sidebar="twolevel"
+                side="start"
+                footer="full"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevelFull))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-end-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="end"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-end-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.end}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-end"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="show"
+                sidebar="wide"
+                side="end"
+                footer="full"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-railEnd-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="railEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-railEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.railEnd}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-railEnd"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="hide"
+                sidebar="rail"
+                side="end"
+                footer="inset"
+                content="grid"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railEnd))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-topOnly-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="topOnly"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-topOnly-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.topOnly}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-topOnly"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="show"
+                sidebar="none"
+                side="start"
+                footer="full"
+                content="grid"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.topOnly))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-sideOnly-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="sideOnly"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-sideOnly-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.sideOnly}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-sideOnly"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="none"
+                search="show"
+                sidebar="wide"
+                side="start"
+                footer="inset"
+                content="list"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.sideOnly))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-collapsedEnd-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="collapsedEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-collapsedEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.collapsedEnd}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-collapsedEnd"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="none"
+                search="show"
+                sidebar="collapsed"
+                side="end"
+                footer="full"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsedEnd))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/DeliveryPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/DeliveryPage.tsx
new file mode 100644
index 0000000..f6dfa4d
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/DeliveryPage.tsx
@@ -0,0 +1,153 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The delivery page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DeliveryInfo,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Zone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+
+export function DeliveryPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.delivery}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.delivery}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="delivery-full-label"
+            data-testid="variant"
+            data-block="delivery"
+            data-variant="full"
+          >
+            <Title as={2} size="base" weight="bold" id="delivery-full-label" data-testid="variant-label">
+              {ui.blocks.variants.delivery.full}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DeliveryInfo
+                id="delivery-full"
+                title={ui.commerce.delivery.title}
+                lead={ui.commerce.delivery.lead}
+                facts={deliveryfacts}
+                zones={zones}
+                labels={ui.commerce.delivery}
+                layout="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="delivery-split-label"
+            data-testid="variant"
+            data-block="delivery"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="delivery-split-label" data-testid="variant-label">
+              {ui.blocks.variants.delivery.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DeliveryInfo
+                id="delivery-split"
+                title={ui.commerce.delivery.title}
+                lead={ui.commerce.delivery.lead}
+                facts={deliveryfacts}
+                zones={zones}
+                labels={ui.commerce.delivery}
+                layout="split"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="delivery-facts-label"
+            data-testid="variant"
+            data-block="delivery"
+            data-variant="facts"
+          >
+            <Title as={2} size="base" weight="bold" id="delivery-facts-label" data-testid="variant-label">
+              {ui.blocks.variants.delivery.facts}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DeliveryInfo
+                id="delivery-facts"
+                title={ui.commerce.delivery.title}
+                lead={ui.commerce.delivery.lead}
+                facts={deliveryfacts}
+                zones={zones}
+                labels={ui.commerce.delivery}
+                layout="facts"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.facts))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/EmptyPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/EmptyPage.tsx
new file mode 100644
index 0000000..c99749f
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/EmptyPage.tsx
@@ -0,0 +1,217 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The empty page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  EmptyPanel,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function EmptyPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.empty}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.empty}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-illustrated-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="illustrated"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-illustrated-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.illustrated}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-illustrated"
+                title={ui.dashboard.empty.tour.title}
+                text={ui.dashboard.empty.tour.text}
+                cta={ui.dashboard.empty.tour.cta}
+                ctaHref="#/"
+                layout="card"
+                actions="button"
+                visual="image"
+                size="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-orders-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="orders"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-orders-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.orders}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-orders"
+                title={ui.dashboard.empty.orders.title}
+                text={ui.dashboard.empty.orders.text}
+                cta={ui.dashboard.empty.orders.cta}
+                ctaHref="#/"
+                layout="card"
+                actions="button"
+                visual="icon"
+                size="default"
+                icon="shopping-bag"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-results-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="results"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-results-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.results}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-results"
+                title={ui.dashboard.empty.results.title}
+                text={ui.dashboard.empty.results.text}
+                cta={ui.dashboard.empty.results.cta}
+                ctaHref="#/"
+                layout="plain"
+                actions="button"
+                visual="icon"
+                size="default"
+                icon="search"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.results))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-inbox-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="inbox"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-inbox-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.inbox}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-inbox"
+                title={ui.dashboard.empty.inbox.title}
+                text={ui.dashboard.empty.inbox.text}
+                cta={ui.dashboard.empty.inbox.cta}
+                ctaHref="#/"
+                layout="card"
+                actions="none"
+                visual="icon"
+                size="default"
+                icon="inbox"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.inbox))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-compact-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-compact"
+                title={ui.dashboard.empty.inbox.title}
+                text={ui.dashboard.empty.inbox.text}
+                cta={ui.dashboard.empty.inbox.cta}
+                ctaHref="#/"
+                layout="card"
+                actions="button"
+                visual="icon"
+                size="compact"
+                icon="inbox"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-plainNoAction-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="plainNoAction"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-plainNoAction-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.plainNoAction}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-plainNoAction"
+                title={ui.dashboard.empty.results.title}
+                text={ui.dashboard.empty.results.text}
+                cta={ui.dashboard.empty.results.cta}
+                ctaHref="#/"
+                layout="plain"
+                actions="none"
+                visual="icon"
+                size="compact"
+                icon="search"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.plainNoAction))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ErrorpagePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ErrorpagePage.tsx
new file mode 100644
index 0000000..92c3d40
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ErrorpagePage.tsx
@@ -0,0 +1,182 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The errorpage page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  ErrorPage,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ERRORPAGE_ACTIONS = { cta: ui.vibe.error.cta, href: "#/", secondary: ui.vibe.error.secondary, secondaryHref: "#/" } as const;
+
+export function ErrorpagePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+              {ui.blocks.themes.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.errorpage}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.errorpage}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-centered-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.centered}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-centered"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                layout="centered"
+                code="show"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-split-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-split-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-split"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                layout="split"
+                code="show"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-noCode-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="noCode"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-noCode-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.noCode}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-noCode"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                layout="centered"
+                code="hide"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.noCode))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-two-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="two"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-two-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.two}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-two"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "two" }}
+                layout="centered"
+                code="show"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.two))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-muted-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-muted"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                layout="centered"
+                code="show"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/FaqPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/FaqPage.tsx
new file mode 100644
index 0000000..aee3430
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/FaqPage.tsx
@@ -0,0 +1,260 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The faq page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FaqList,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Faq,
+  type FaqTab,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+const FAQ_FILTER = { tabs: faqtabs, label: ui.vibe.faq.tabs, category: "" } as const;
+
+export function FaqPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.faq}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.faq}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-list-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-list-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-list"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-chat-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="chat"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-chat-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.chat}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-chat"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="chat"
+                cols="1"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-search-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="search"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-search-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.search}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-search"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-tabs-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="tabs"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-tabs-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.tabs}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-tabs"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, category: "billing", mode: "categories" }}
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-twoColumns-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="twoColumns"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-twoColumns-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.twoColumns}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-twoColumns"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="2"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-muted-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-muted"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="1"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.muted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-roomy-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="roomy"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-roomy-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.roomy}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-roomy"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.roomy))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/FaqsplitPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/FaqsplitPage.tsx
new file mode 100644
index 0000000..c260647
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/FaqsplitPage.tsx
@@ -0,0 +1,292 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The faqsplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FaqSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type FaqTab,
+  type Feature,
+  type Question,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const QUESTIONS_FIELDS = {
+  "id": "id",
+  "question": "title",
+  "answer": "metadata.answer.value",
+  "category": "terms|term:faq_category",
+  "icon": "metadata.icon.value",
+} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+
+const FAQSPLIT_LABELS = {
+  cta: ui.marketing.faqSplit.cta,
+  more: ui.marketing.faqSplit.more,
+  asideTitle: ui.marketing.faqSplit.asideTitle,
+  asideText: ui.marketing.faqSplit.asideText,
+  asideCta: ui.marketing.faqSplit.asideCta,
+  search: ui.marketing.faqSplit.search,
+  popular: ui.marketing.faqSplit.popular,
+} as const;
+
+export function FaqsplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.faqsplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.faqsplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-headSplit-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="headSplit"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-headSplit-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.headSplit}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-headSplit"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="head"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.headSplit))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-helpCard-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="helpCard"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-helpCard-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.helpCard}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-helpCard"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="aside"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-picture-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="picture"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-picture-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.picture}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-picture"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="media"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.picture))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-finder-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="finder"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-finder-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.finder}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-finder"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="search"
+                cards="grid3"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.finder))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-cards3-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="cards3"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-cards3-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.cards3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-cards3"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="cards"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-cards4-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="cards4"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-cards4-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.cards4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-cards4"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="cards"
+                cards="grid4"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-cardsIcons-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="cardsIcons"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-cardsIcons-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.cardsIcons}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-cardsIcons"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="cards"
+                cards="icons"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cardsIcons))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/FeaturesPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/FeaturesPage.tsx
new file mode 100644
index 0000000..4f2e6cf
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/FeaturesPage.tsx
@@ -0,0 +1,290 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The features page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureGrid,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function FeaturesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.features}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.features}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-grid-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="features-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.features.grid}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-grid"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                item="card"
+                mediaSide="end"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-grid2-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="features-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.features.grid2}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-grid2"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-2"
+                item="card"
+                mediaSide="end"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-tiles4-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="tiles4"
+          >
+            <Title as={2} size="base" weight="bold" id="features-tiles4-label" data-testid="variant-label">
+              {ui.blocks.variants.features.tiles4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-tiles4"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-4"
+                item="tile"
+                mediaSide="end"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-cells4-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="cells4"
+          >
+            <Title as={2} size="base" weight="bold" id="features-cells4-label" data-testid="variant-label">
+              {ui.blocks.variants.features.cells4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-cells4"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-4"
+                item="cell"
+                mediaSide="end"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.cells4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-rows-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="rows"
+          >
+            <Title as={2} size="base" weight="bold" id="features-rows-label" data-testid="variant-label">
+              {ui.blocks.variants.features.rows}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-rows"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="rows"
+                cols="1-3"
+                item="card"
+                mediaSide="end"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-rowsStart-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="rowsStart"
+          >
+            <Title as={2} size="base" weight="bold" id="features-rowsStart-label" data-testid="variant-label">
+              {ui.blocks.variants.features.rowsStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-rowsStart"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="rows"
+                cols="1-3"
+                item="card"
+                mediaSide="start"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-rowsAlternate-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="rowsAlternate"
+          >
+            <Title as={2} size="base" weight="bold" id="features-rowsAlternate-label" data-testid="variant-label">
+              {ui.blocks.variants.features.rowsAlternate}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-rowsAlternate"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="rows"
+                cols="1-3"
+                item="card"
+                mediaSide="alternate"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-tilesMuted-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="tilesMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="features-tilesMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.features.tilesMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-tilesMuted"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                item="tile"
+                mediaSide="end"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tilesMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/FeatureshowcasePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/FeatureshowcasePage.tsx
new file mode 100644
index 0000000..8b85d42
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/FeatureshowcasePage.tsx
@@ -0,0 +1,169 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The featureshowcase page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureShowcase,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function FeatureshowcasePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.featureshowcase}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.featureshowcase}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-pictureCards3-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="pictureCards3"
+          >
+            <Title as={2} size="base" weight="bold" id="featureshowcase-pictureCards3-label" data-testid="variant-label">
+              {ui.blocks.variants.featureshowcase.pictureCards3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-pictureCards3"
+                title={ui.marketing.featureShowcase.title}
+                lead={ui.marketing.featureShowcase.lead}
+                features={values}
+                empty={ui.empty.features}
+                more={ui.marketing.featureShowcase.more}
+                item="picture"
+                cols="3"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-panelCards4-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="panelCards4"
+          >
+            <Title as={2} size="base" weight="bold" id="featureshowcase-panelCards4-label" data-testid="variant-label">
+              {ui.blocks.variants.featureshowcase.panelCards4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-panelCards4"
+                title={ui.marketing.featureShowcase.title}
+                lead={ui.marketing.featureShowcase.lead}
+                features={features}
+                empty={ui.empty.features}
+                more={ui.marketing.featureShowcase.more}
+                item="panel"
+                cols="4"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-pictureCards4-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="pictureCards4"
+          >
+            <Title as={2} size="base" weight="bold" id="featureshowcase-pictureCards4-label" data-testid="variant-label">
+              {ui.blocks.variants.featureshowcase.pictureCards4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-pictureCards4"
+                title={ui.marketing.featureShowcase.title}
+                lead={ui.marketing.featureShowcase.lead}
+                features={features}
+                empty={ui.empty.features}
+                more={ui.marketing.featureShowcase.more}
+                item="picture"
+                cols="4"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-panelCards3-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="panelCards3"
+          >
+            <Title as={2} size="base" weight="bold" id="featureshowcase-panelCards3-label" data-testid="variant-label">
+              {ui.blocks.variants.featureshowcase.panelCards3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-panelCards3"
+                title={ui.marketing.featureShowcase.title}
+                lead={ui.marketing.featureShowcase.lead}
+                features={values}
+                empty={ui.empty.features}
+                more={ui.marketing.featureShowcase.more}
+                item="panel"
+                cols="3"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards3))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/FeaturesplitPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/FeaturesplitPage.tsx
new file mode 100644
index 0000000..4af7bf5
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/FeaturesplitPage.tsx
@@ -0,0 +1,221 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The featuresplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+const FEATURESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.featureSplit.cta,
+  href: "#/start",
+  secondary: ui.marketing.featureSplit.secondary,
+  secondaryHref: "#/work",
+} as const;
+
+export function FeaturesplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.featuresplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.featuresplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-gridStart-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="gridStart"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-gridStart-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.gridStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-gridStart"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="grid"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-statsStart-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="statsStart"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-statsStart-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.statsStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-statsStart"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="stats"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.statsStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-gridMuted-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="gridMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-gridMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.gridMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-gridMuted"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="grid"
+                mediaSide="end"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridMuted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-metricCards-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="metricCards"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-metricCards-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.metricCards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-metricCards"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="metrics"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-featureCards-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="featureCards"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-featureCards-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.featureCards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-featureCards"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="cards"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.featureCards))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/FeaturetabsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/FeaturetabsPage.tsx
new file mode 100644
index 0000000..8bad3c8
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/FeaturetabsPage.tsx
@@ -0,0 +1,139 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The featuretabs page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureTabs,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function FeaturetabsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.featuretabs}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.featuretabs}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuretabs-split-label"
+            data-testid="variant"
+            data-block="featuretabs"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="featuretabs-split-label" data-testid="variant-label">
+              {ui.blocks.variants.featuretabs.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureTabs
+                id="featuretabs-split"
+                title={ui.vibe.tabs.title}
+                features={features}
+                empty={ui.empty.features}
+                tabsLabel={ui.vibe.tabs.label}
+                active="feature-clear"
+                panel="split"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuretabs-stack-label"
+            data-testid="variant"
+            data-block="featuretabs"
+            data-variant="stack"
+          >
+            <Title as={2} size="base" weight="bold" id="featuretabs-stack-label" data-testid="variant-label">
+              {ui.blocks.variants.featuretabs.stack}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureTabs
+                id="featuretabs-stack"
+                title={ui.vibe.tabs.title}
+                features={features}
+                empty={ui.empty.features}
+                tabsLabel={ui.vibe.tabs.label}
+                active="feature-clear"
+                panel="stack"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.stack))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuretabs-muted-label"
+            data-testid="variant"
+            data-block="featuretabs"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="featuretabs-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.featuretabs.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureTabs
+                id="featuretabs-muted"
+                title={ui.vibe.tabs.title}
+                features={features}
+                empty={ui.empty.features}
+                tabsLabel={ui.vibe.tabs.label}
+                active="feature-clear"
+                panel="split"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/FooterPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/FooterPage.tsx
new file mode 100644
index 0000000..1acd79f
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/FooterPage.tsx
@@ -0,0 +1,113 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The footer page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SiteFooter,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function FooterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.footer}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.footer}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footer-minimal-label"
+            data-testid="variant"
+            data-block="footer"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="footer-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.footer.minimal}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteFooter
+                labels={ui.site.footer}
+                layout="minimal"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.minimal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footer-centered-label"
+            data-testid="variant"
+            data-block="footer"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="footer-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.footer.centered}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteFooter
+                labels={ui.site.footer}
+                layout="centered"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footer-compact-label"
+            data-testid="variant"
+            data-block="footer"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="footer-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.footer.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteFooter
+                labels={ui.site.footer}
+                layout="minimal"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.compact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/FootersplitPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/FootersplitPage.tsx
new file mode 100644
index 0000000..a8f1a5c
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/FootersplitPage.tsx
@@ -0,0 +1,254 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The footersplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FooterSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type MegaGroup,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+
+const FOOTERSPLIT_EXTRAS = { stats, points: features, contacts, channels: community } as const;
+
+export function FootersplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.footersplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.footersplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-statsCards-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="statsCards"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-statsCards-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.statsCards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-statsCards"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="stats"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.statsCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-splitPoints-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="splitPoints"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-splitPoints-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.splitPoints}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-splitPoints"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="points"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitPoints))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-splitLinks-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="splitLinks"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-splitLinks-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.splitLinks}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-splitLinks"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="links"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitLinks))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-newsletterStart-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="newsletterStart"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-newsletterStart-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.newsletterStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-newsletterStart"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="newsletter"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.newsletterStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-splitContacts-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="splitContacts"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-splitContacts-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.splitContacts}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-splitContacts"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="contacts"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitContacts))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-channelsStart-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="channelsStart"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-channelsStart-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.channelsStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-channelsStart"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="channels"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.channelsStart))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/HeaderPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/HeaderPage.tsx
new file mode 100644
index 0000000..fd3dd96
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/HeaderPage.tsx
@@ -0,0 +1,153 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The header page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SiteHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+
+export function HeaderPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.header}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.header}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-inline-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="inline"
+          >
+            <Title as={2} size="base" weight="bold" id="header-inline-label" data-testid="variant-label">
+              {ui.blocks.variants.header.inline}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                labels={ui.site.header}
+                current="home"
+                cta={ui.site.header.cta}
+                layout="inline"
+                position="static"
+                actions="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.inline))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-stacked-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="header-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.header.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                labels={ui.site.header}
+                current="home"
+                cta={ui.site.header.cta}
+                layout="stacked"
+                position="static"
+                actions="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-sticky-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="sticky"
+          >
+            <Title as={2} size="base" weight="bold" id="header-sticky-label" data-testid="variant-label">
+              {ui.blocks.variants.header.sticky}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                labels={ui.site.header}
+                current="home"
+                cta={ui.site.header.cta}
+                layout="inline"
+                position="sticky"
+                actions="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.sticky))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-withCta-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="withCta"
+          >
+            <Title as={2} size="base" weight="bold" id="header-withCta-label" data-testid="variant-label">
+              {ui.blocks.variants.header.withCta}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                labels={ui.site.header}
+                current="home"
+                cta={ui.site.header.cta}
+                layout="inline"
+                position="static"
+                actions="cta"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.withCta))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/HeroPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/HeroPage.tsx
new file mode 100644
index 0000000..19432f4
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/HeroPage.tsx
@@ -0,0 +1,518 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The hero page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroClassic,
+  HeroPrompt,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type NavLink,
+  type Topic,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { prompts as promptsEntries } from "@ui8kit/app-shared/data/prompts";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const PROMPTS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const prompts = fromCodex<Topic>(promptsEntries, PROMPTS_FIELDS, CODEX);
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+
+const HERO_ACTIONS = {
+  cta: ui.site.home.cta,
+  href: "#/pricing",
+  secondary: ui.site.home.secondary,
+  secondaryHref: "#/pricing",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+const HERO_MEDIA = { codeTitle: ui.vibe.code.title, prompt: ui.vibe.code.prompt, lines: terminal } as const;
+
+export function HeroPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.hero}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.hero}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-centered-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.centered}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-centered"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-screenshot-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="screenshot"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-screenshot-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.screenshot}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-screenshot"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.screenshot))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-backdrop-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="backdrop"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-backdrop-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.backdrop}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-backdrop"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "backdrop", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="muted"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.backdrop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-code-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="code"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-code-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.code}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-code"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "two" }}
+                media={{ ...HERO_MEDIA, kind: "code", side: "end" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.code))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-cluster-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="cluster"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-cluster-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.cluster}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-cluster"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "cluster", side: "end" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.cluster))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-display-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="display"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-display-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.display}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-display"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="display"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.display))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-form-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="form"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-form-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.form}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-form"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "form" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.form))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-prompt-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="prompt"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-prompt-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.prompt}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroPrompt
+                title={ui.vibe.hero.title}
+                actions={{ ...HERO_ACTIONS, emailLabel: ui.vibe.hero.promptLabel, mode: "form" }}
+                composer={{ attachLabel: ui.vibe.hero.attach, modelLabel: ui.vibe.hero.model }}
+                nav={{
+                  brand: ui.site.header.brand,
+                  links: navlinks,
+                  current: "link-product",
+                  skip: ui.site.header.skip,
+                  label: ui.site.header.nav,
+                  login: ui.site.header.login,
+                  loginHref: "#/login",
+                }}
+                density="compact"
+                badge={ui.vibe.hero.badgeLabel}
+                badgeMark={ui.vibe.hero.badgeMark}
+                topics={prompts}
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.prompt))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-twoActions-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="twoActions"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-twoActions-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.twoActions}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-twoActions"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "two" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.twoActions))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-split-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-split-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-split"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-splitStart-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="splitStart"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-splitStart-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.splitStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-splitStart"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "two" }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.splitStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-muted-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-muted"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="muted"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.muted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-saas-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="saas"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-saas-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.saas}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-saas"
+                title={ui.cases.saas.hero.title}
+                text={ui.cases.saas.hero.text}
+                actions={{
+                  ...HERO_ACTIONS,
+                  cta: ui.cases.saas.hero.cta,
+                  secondary: ui.cases.saas.hero.secondary,
+                  mode: "two",
+                }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.saas))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-shop-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="shop"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.shop}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-shop"
+                title={ui.cases.shop.hero.title}
+                text={ui.cases.shop.hero.text}
+                actions={{
+                  ...HERO_ACTIONS,
+                  cta: ui.cases.shop.hero.cta,
+                  secondary: ui.cases.shop.hero.secondary,
+                  mode: "one",
+                }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+                layout="split"
+                scale="default"
+                tone="muted"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-blog-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="blog"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-blog-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.blog}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-blog"
+                title={ui.cases.blog.hero.title}
+                text={ui.cases.blog.hero.text}
+                actions={{
+                  ...HERO_ACTIONS,
+                  cta: ui.cases.blog.hero.cta,
+                  secondary: ui.cases.blog.hero.secondary,
+                  mode: "one",
+                }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="compact"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.blog))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/HerosplitPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/HerosplitPage.tsx
new file mode 100644
index 0000000..df94a57
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/HerosplitPage.tsx
@@ -0,0 +1,316 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The herosplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroSplit,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Plan,
+  type Quote,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+const HEROSPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.heroSplit.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.heroSplit.secondary,
+  secondaryHref: "#/features",
+} as const;
+const HEROSPLIT_CONTENT = {
+  stats,
+  features,
+  people: testimonials,
+  plans: tiers,
+  proof: ui.marketing.heroSplit.proof,
+  card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+} as const;
+
+export function HerosplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.herosplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.herosplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-statsCards-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="statsCards"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-statsCards-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.statsCards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-statsCards"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="stats"
+                media="picture"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.statsCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-avatars-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="avatars"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-avatars-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.avatars}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-avatars"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="avatars"
+                media="picture"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.avatars))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-miniCards-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="miniCards"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-miniCards-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.miniCards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-miniCards"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="minis"
+                media="card"
+                mediaSide="end"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.miniCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-quoteStats-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="quoteStats"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-quoteStats-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.quoteStats}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-quoteStats"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="quote"
+                media="card"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.quoteStats))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-planCards-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="planCards"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-planCards-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.planCards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-planCards"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="none"
+                media="plans"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.planCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-pictureGrid-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="pictureGrid"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-pictureGrid-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.pictureGrid}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-pictureGrid"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="stats"
+                media="grid"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGrid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-pictureGridStart-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="pictureGridStart"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-pictureGridStart-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.pictureGridStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-pictureGridStart"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="avatars"
+                media="grid"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGridStart))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/IconwallPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/IconwallPage.tsx
new file mode 100644
index 0000000..ccfd49b
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/IconwallPage.tsx
@@ -0,0 +1,188 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The iconwall page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  IconWall,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function IconwallPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.iconwall}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.iconwall}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-tiles4-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="tiles4"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-tiles4-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.tiles4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-tiles4"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-tiles3-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="tiles3"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-tiles3-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.tiles3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-tiles3"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="3"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-chips6-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="chips6"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-chips6-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.chips6}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-chips6"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="6"
+                item="chip"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-chips4-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="chips4"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-chips4-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.chips4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-chips4"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="4"
+                item="chip"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-muted-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-muted"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="4"
+                item="tile"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/IndexPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/IndexPage.tsx
new file mode 100644
index 0000000..f2d7bf2
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/IndexPage.tsx
@@ -0,0 +1,222 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The index page of BlocksScreen.
+
+import { Block, Container, Link, List, ListItem, Stack, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const TOPICS = [
+  {
+    id: "marketing",
+    titleId: "theme-marketing-title",
+    title: ui.blocks.themes.marketing.title,
+    text: ui.blocks.themes.marketing.text,
+    blocks: [
+      { key: "about", href: "#/about", name: ui.blocks.names.about, docs: ui.blocks.docs.about },
+      { key: "aboutme", href: "#/aboutme", name: ui.blocks.names.aboutme, docs: ui.blocks.docs.aboutme },
+      { key: "accordion", href: "#/accordion", name: ui.blocks.names.accordion, docs: ui.blocks.docs.accordion },
+      { key: "beforeafter", href: "#/beforeafter", name: ui.blocks.names.beforeafter, docs: ui.blocks.docs.beforeafter },
+      { key: "bento", href: "#/bento", name: ui.blocks.names.bento, docs: ui.blocks.docs.bento },
+      { key: "compare", href: "#/compare", name: ui.blocks.names.compare, docs: ui.blocks.docs.compare },
+      { key: "credits", href: "#/credits", name: ui.blocks.names.credits, docs: ui.blocks.docs.credits },
+      { key: "cta", href: "#/cta", name: ui.blocks.names.cta, docs: ui.blocks.docs.cta },
+      { key: "ctaproof", href: "#/ctaproof", name: ui.blocks.names.ctaproof, docs: ui.blocks.docs.ctaproof },
+      { key: "faq", href: "#/faq", name: ui.blocks.names.faq, docs: ui.blocks.docs.faq },
+      { key: "faqsplit", href: "#/faqsplit", name: ui.blocks.names.faqsplit, docs: ui.blocks.docs.faqsplit },
+      { key: "features", href: "#/features", name: ui.blocks.names.features, docs: ui.blocks.docs.features },
+      { key: "featureshowcase", href: "#/featureshowcase", name: ui.blocks.names.featureshowcase, docs: ui.blocks.docs.featureshowcase },
+      { key: "featuresplit", href: "#/featuresplit", name: ui.blocks.names.featuresplit, docs: ui.blocks.docs.featuresplit },
+      { key: "featuretabs", href: "#/featuretabs", name: ui.blocks.names.featuretabs, docs: ui.blocks.docs.featuretabs },
+      { key: "footer", href: "#/footer", name: ui.blocks.names.footer, docs: ui.blocks.docs.footer },
+      { key: "footersplit", href: "#/footersplit", name: ui.blocks.names.footersplit, docs: ui.blocks.docs.footersplit },
+      { key: "header", href: "#/header", name: ui.blocks.names.header, docs: ui.blocks.docs.header },
+      { key: "hero", href: "#/hero", name: ui.blocks.names.hero, docs: ui.blocks.docs.hero },
+      { key: "herosplit", href: "#/herosplit", name: ui.blocks.names.herosplit, docs: ui.blocks.docs.herosplit },
+      { key: "iconwall", href: "#/iconwall", name: ui.blocks.names.iconwall, docs: ui.blocks.docs.iconwall },
+      { key: "jobs", href: "#/jobs", name: ui.blocks.names.jobs, docs: ui.blocks.docs.jobs },
+      { key: "logos", href: "#/logos", name: ui.blocks.names.logos, docs: ui.blocks.docs.logos },
+      { key: "medialist", href: "#/medialist", name: ui.blocks.names.medialist, docs: ui.blocks.docs.medialist },
+      { key: "megamenu", href: "#/megamenu", name: ui.blocks.names.megamenu, docs: ui.blocks.docs.megamenu },
+      { key: "navbar", href: "#/navbar", name: ui.blocks.names.navbar, docs: ui.blocks.docs.navbar },
+      { key: "pagehead", href: "#/pagehead", name: ui.blocks.names.pagehead, docs: ui.blocks.docs.pagehead },
+      { key: "pagetrail", href: "#/pagetrail", name: ui.blocks.names.pagetrail, docs: ui.blocks.docs.pagetrail },
+      { key: "photos", href: "#/photos", name: ui.blocks.names.photos, docs: ui.blocks.docs.photos },
+      { key: "plan", href: "#/plan", name: ui.blocks.names.plan, docs: ui.blocks.docs.plan },
+      { key: "pricing", href: "#/pricing", name: ui.blocks.names.pricing, docs: ui.blocks.docs.pricing },
+      { key: "projects", href: "#/projects", name: ui.blocks.names.projects, docs: ui.blocks.docs.projects },
+      { key: "proof", href: "#/proof", name: ui.blocks.names.proof, docs: ui.blocks.docs.proof },
+      { key: "quotesplit", href: "#/quotesplit", name: ui.blocks.names.quotesplit, docs: ui.blocks.docs.quotesplit },
+      { key: "sitemap", href: "#/sitemap", name: ui.blocks.names.sitemap, docs: ui.blocks.docs.sitemap },
+      { key: "stats", href: "#/stats", name: ui.blocks.names.stats, docs: ui.blocks.docs.stats },
+      { key: "steps", href: "#/steps", name: ui.blocks.names.steps, docs: ui.blocks.docs.steps },
+      { key: "sticky", href: "#/sticky", name: ui.blocks.names.sticky, docs: ui.blocks.docs.sticky },
+      { key: "team", href: "#/team", name: ui.blocks.names.team, docs: ui.blocks.docs.team },
+      { key: "templates", href: "#/templates", name: ui.blocks.names.templates, docs: ui.blocks.docs.templates },
+      { key: "testimonials", href: "#/testimonials", name: ui.blocks.names.testimonials, docs: ui.blocks.docs.testimonials },
+      { key: "usage", href: "#/usage", name: ui.blocks.names.usage, docs: ui.blocks.docs.usage },
+      { key: "videos", href: "#/videos", name: ui.blocks.names.videos, docs: ui.blocks.docs.videos },
+    ],
+  },
+  {
+    id: "commerce",
+    titleId: "theme-commerce-title",
+    title: ui.blocks.themes.commerce.title,
+    text: ui.blocks.themes.commerce.text,
+    blocks: [
+      { key: "cart", href: "#/cart", name: ui.blocks.names.cart, docs: ui.blocks.docs.cart },
+      { key: "cartdrawer", href: "#/cartdrawer", name: ui.blocks.names.cartdrawer, docs: ui.blocks.docs.cartdrawer },
+      { key: "cartpage", href: "#/cartpage", name: ui.blocks.names.cartpage, docs: ui.blocks.docs.cartpage },
+      { key: "categories", href: "#/categories", name: ui.blocks.names.categories, docs: ui.blocks.docs.categories },
+      { key: "checkout", href: "#/checkout", name: ui.blocks.names.checkout, docs: ui.blocks.docs.checkout },
+      { key: "delivery", href: "#/delivery", name: ui.blocks.names.delivery, docs: ui.blocks.docs.delivery },
+      { key: "locations", href: "#/locations", name: ui.blocks.names.locations, docs: ui.blocks.docs.locations },
+      { key: "orders", href: "#/orders", name: ui.blocks.names.orders, docs: ui.blocks.docs.orders },
+      { key: "product", href: "#/product", name: ui.blocks.names.product, docs: ui.blocks.docs.product },
+      { key: "productinfo", href: "#/productinfo", name: ui.blocks.names.productinfo, docs: ui.blocks.docs.productinfo },
+      { key: "products", href: "#/products", name: ui.blocks.names.products, docs: ui.blocks.docs.products },
+      { key: "reviews", href: "#/reviews", name: ui.blocks.names.reviews, docs: ui.blocks.docs.reviews },
+      { key: "slots", href: "#/slots", name: ui.blocks.names.slots, docs: ui.blocks.docs.slots },
+      { key: "storehero", href: "#/storehero", name: ui.blocks.names.storehero, docs: ui.blocks.docs.storehero },
+      { key: "summary", href: "#/summary", name: ui.blocks.names.summary, docs: ui.blocks.docs.summary },
+      { key: "usp", href: "#/usp", name: ui.blocks.names.usp, docs: ui.blocks.docs.usp },
+      { key: "zones", href: "#/zones", name: ui.blocks.names.zones, docs: ui.blocks.docs.zones },
+    ],
+  },
+  {
+    id: "promo",
+    titleId: "theme-promo-title",
+    title: ui.blocks.themes.promo.title,
+    text: ui.blocks.themes.promo.text,
+    blocks: [
+      { key: "announcement", href: "#/announcement", name: ui.blocks.names.announcement, docs: ui.blocks.docs.announcement },
+      { key: "cookie", href: "#/cookie", name: ui.blocks.names.cookie, docs: ui.blocks.docs.cookie },
+      { key: "newsletter", href: "#/newsletter", name: ui.blocks.names.newsletter, docs: ui.blocks.docs.newsletter },
+    ],
+  },
+  {
+    id: "content",
+    titleId: "theme-content-title",
+    title: ui.blocks.themes.content.title,
+    text: ui.blocks.themes.content.text,
+    blocks: [
+      { key: "article", href: "#/article", name: ui.blocks.names.article, docs: ui.blocks.docs.article },
+      { key: "postheader", href: "#/postheader", name: ui.blocks.names.postheader, docs: ui.blocks.docs.postheader },
+      { key: "posts", href: "#/posts", name: ui.blocks.names.posts, docs: ui.blocks.docs.posts },
+      { key: "postshowcase", href: "#/postshowcase", name: ui.blocks.names.postshowcase, docs: ui.blocks.docs.postshowcase },
+      { key: "postsplit", href: "#/postsplit", name: ui.blocks.names.postsplit, docs: ui.blocks.docs.postsplit },
+      { key: "storytabs", href: "#/storytabs", name: ui.blocks.names.storytabs, docs: ui.blocks.docs.storytabs },
+      { key: "timeline", href: "#/timeline", name: ui.blocks.names.timeline, docs: ui.blocks.docs.timeline },
+    ],
+  },
+  {
+    id: "account",
+    titleId: "theme-account-title",
+    title: ui.blocks.themes.account.title,
+    text: ui.blocks.themes.account.text,
+    blocks: [
+      { key: "auth", href: "#/auth", name: ui.blocks.names.auth, docs: ui.blocks.docs.auth },
+      { key: "authpage", href: "#/authpage", name: ui.blocks.names.authpage, docs: ui.blocks.docs.authpage },
+      { key: "profile", href: "#/profile", name: ui.blocks.names.profile, docs: ui.blocks.docs.profile },
+      { key: "wizard", href: "#/wizard", name: ui.blocks.names.wizard, docs: ui.blocks.docs.wizard },
+    ],
+  },
+  {
+    id: "dashboard",
+    titleId: "theme-dashboard-title",
+    title: ui.blocks.themes.dashboard.title,
+    text: ui.blocks.themes.dashboard.text,
+    blocks: [
+      { key: "activity", href: "#/activity", name: ui.blocks.names.activity, docs: ui.blocks.docs.activity },
+      { key: "bottomnav", href: "#/bottomnav", name: ui.blocks.names.bottomnav, docs: ui.blocks.docs.bottomnav },
+      { key: "chart", href: "#/chart", name: ui.blocks.names.chart, docs: ui.blocks.docs.chart },
+      { key: "dashshell", href: "#/dashshell", name: ui.blocks.names.dashshell, docs: ui.blocks.docs.dashshell },
+      { key: "empty", href: "#/empty", name: ui.blocks.names.empty, docs: ui.blocks.docs.empty },
+      { key: "kanban", href: "#/kanban", name: ui.blocks.names.kanban, docs: ui.blocks.docs.kanban },
+      { key: "metrics", href: "#/metrics", name: ui.blocks.names.metrics, docs: ui.blocks.docs.metrics },
+      { key: "overview", href: "#/overview", name: ui.blocks.names.overview, docs: ui.blocks.docs.overview },
+      { key: "shell", href: "#/shell", name: ui.blocks.names.shell, docs: ui.blocks.docs.shell },
+      { key: "sidenav", href: "#/sidenav", name: ui.blocks.names.sidenav, docs: ui.blocks.docs.sidenav },
+      { key: "skeleton", href: "#/skeleton", name: ui.blocks.names.skeleton, docs: ui.blocks.docs.skeleton },
+    ],
+  },
+  {
+    id: "onboarding",
+    titleId: "theme-onboarding-title",
+    title: ui.blocks.themes.onboarding.title,
+    text: ui.blocks.themes.onboarding.text,
+    blocks: [
+      { key: "checklist", href: "#/checklist", name: ui.blocks.names.checklist, docs: ui.blocks.docs.checklist },
+      { key: "stepper", href: "#/stepper", name: ui.blocks.names.stepper, docs: ui.blocks.docs.stepper },
+      { key: "tour", href: "#/tour", name: ui.blocks.names.tour, docs: ui.blocks.docs.tour },
+      { key: "videomodal", href: "#/videomodal", name: ui.blocks.names.videomodal, docs: ui.blocks.docs.videomodal },
+    ],
+  },
+  {
+    id: "support",
+    titleId: "theme-support-title",
+    title: ui.blocks.themes.support.title,
+    text: ui.blocks.themes.support.text,
+    blocks: [
+      { key: "channels", href: "#/channels", name: ui.blocks.names.channels, docs: ui.blocks.docs.channels },
+      { key: "contact", href: "#/contact", name: ui.blocks.names.contact, docs: ui.blocks.docs.contact },
+      { key: "errorpage", href: "#/errorpage", name: ui.blocks.names.errorpage, docs: ui.blocks.docs.errorpage },
+    ],
+  },
+] as const;
+
+export function IndexPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Stack gap="4" align="stretch">
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="gallery-title">
+              {ui.blocks.title}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.intro}
+            </Text>
+          </Stack>
+          {(TOPICS ?? []).map((topic) => (
+            <Stack key={topic.id}
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby={topic.titleId}
+              data-testid="theme-section"
+              data-theme-id={topic.id}
+            >
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id={topic.titleId}>
+                  {topic.title}
+                </Title>
+                <Text size="sm" className="max-w-2xl text-muted-foreground">
+                  {topic.text}
+                </Text>
+              </Stack>
+              <List tag="ul" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="block-list">
+                {(topic.blocks ?? []).map((block) => (
+                  <ListItem key={block.key} className="flex flex-col gap-1 rounded-xl p-4 inset-ring inset-ring-border">
+                    <Link
+                      href={block.href}
+                      variant="default"
+                      className="font-bold"
+                      data-testid="block-link"
+                      data-block={block.key}
+                      data-theme-id={topic.id}
+                    >
+                      {block.name}
+                    </Link>
+                    <Text size="sm" className="text-muted-foreground">
+                      {block.docs}
+                    </Text>
+                  </ListItem>
+                ))}
+              </List>
+            </Stack>
+          ))}
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/JobsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/JobsPage.tsx
new file mode 100644
index 0000000..a54118a
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/JobsPage.tsx
@@ -0,0 +1,182 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The jobs page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  JobBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Department,
+  type Job,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+
+export function JobsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.jobs}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.jobs}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-grid-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="jobs-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.jobs.grid}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-grid"
+                title={ui.company.jobs.title}
+                lead={ui.company.jobs.lead}
+                jobs={jobs}
+                empty={ui.empty.jobs}
+                departments={departments}
+                labels={ui.company.jobs}
+                layout="grid"
+                salary="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-salary-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="salary"
+          >
+            <Title as={2} size="base" weight="bold" id="jobs-salary-label" data-testid="variant-label">
+              {ui.blocks.variants.jobs.salary}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-salary"
+                title={ui.company.jobs.title}
+                lead={ui.company.jobs.lead}
+                jobs={jobs}
+                empty={ui.empty.jobs}
+                departments={departments}
+                labels={ui.company.jobs}
+                layout="grid"
+                salary="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.salary))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-grouped-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="grouped"
+          >
+            <Title as={2} size="base" weight="bold" id="jobs-grouped-label" data-testid="variant-label">
+              {ui.blocks.variants.jobs.grouped}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-grouped"
+                title={ui.company.jobs.title}
+                lead={ui.company.jobs.lead}
+                jobs={jobs}
+                empty={ui.empty.jobs}
+                departments={departments}
+                labels={ui.company.jobs}
+                layout="grouped"
+                salary="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-table-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="table"
+          >
+            <Title as={2} size="base" weight="bold" id="jobs-table-label" data-testid="variant-label">
+              {ui.blocks.variants.jobs.table}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-table"
+                title={ui.company.jobs.title}
+                lead={ui.company.jobs.lead}
+                jobs={jobs}
+                empty={ui.empty.jobs}
+                departments={departments}
+                labels={ui.company.jobs}
+                layout="table"
+                salary="show"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.table))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/KanbanPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/KanbanPage.tsx
new file mode 100644
index 0000000..ab72aaf
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/KanbanPage.tsx
@@ -0,0 +1,174 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The kanban page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  KanbanBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type BoardCard,
+  type Lane,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+
+export function KanbanPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.kanban}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.kanban}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-detail-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="detail"
+          >
+            <Title as={2} size="base" weight="bold" id="kanban-detail-label" data-testid="variant-label">
+              {ui.blocks.variants.kanban.detail}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-detail"
+                title={ui.vibe.kanban.title}
+                lanes={lanes}
+                empty={ui.empty.lanes}
+                cards={cards}
+                countLabel={ui.vibe.kanban.count}
+                card="detail"
+                cols="3"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-simple-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="simple"
+          >
+            <Title as={2} size="base" weight="bold" id="kanban-simple-label" data-testid="variant-label">
+              {ui.blocks.variants.kanban.simple}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-simple"
+                title={ui.vibe.kanban.title}
+                lanes={lanes}
+                empty={ui.empty.lanes}
+                cards={cards}
+                countLabel={ui.vibe.kanban.count}
+                card="simple"
+                cols="3"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.simple))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-twoCols-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="twoCols"
+          >
+            <Title as={2} size="base" weight="bold" id="kanban-twoCols-label" data-testid="variant-label">
+              {ui.blocks.variants.kanban.twoCols}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-twoCols"
+                title={ui.vibe.kanban.title}
+                lanes={lanes}
+                empty={ui.empty.lanes}
+                cards={cards}
+                countLabel={ui.vibe.kanban.count}
+                card="detail"
+                cols="2"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-muted-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="kanban-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.kanban.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-muted"
+                title={ui.vibe.kanban.title}
+                lanes={lanes}
+                empty={ui.empty.lanes}
+                cards={cards}
+                countLabel={ui.vibe.kanban.count}
+                card="detail"
+                cols="3"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/LocationsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/LocationsPage.tsx
new file mode 100644
index 0000000..67487ee
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/LocationsPage.tsx
@@ -0,0 +1,148 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The locations page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoreLocations,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Store,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+
+export function LocationsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.locations}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.locations}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="locations-cards-label"
+            data-testid="variant"
+            data-block="locations"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="locations-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.locations.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreLocations
+                id="locations-cards"
+                title={ui.commerce.stores.title}
+                lead={ui.commerce.stores.lead}
+                stores={stores}
+                empty={ui.empty.stores}
+                kinds={ui.commerce.stores.kinds}
+                labels={ui.commerce.stores}
+                layout="cards"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="locations-list-label"
+            data-testid="variant"
+            data-block="locations"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="locations-list-label" data-testid="variant-label">
+              {ui.blocks.variants.locations.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreLocations
+                id="locations-list"
+                title={ui.commerce.stores.title}
+                lead={ui.commerce.stores.lead}
+                stores={stores}
+                empty={ui.empty.stores}
+                kinds={ui.commerce.stores.kinds}
+                labels={ui.commerce.stores}
+                layout="list"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="locations-map-label"
+            data-testid="variant"
+            data-block="locations"
+            data-variant="map"
+          >
+            <Title as={2} size="base" weight="bold" id="locations-map-label" data-testid="variant-label">
+              {ui.blocks.variants.locations.map}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreLocations
+                id="locations-map"
+                title={ui.commerce.stores.title}
+                lead={ui.commerce.stores.lead}
+                stores={stores}
+                empty={ui.empty.stores}
+                kinds={ui.commerce.stores.kinds}
+                labels={ui.commerce.stores}
+                layout="map"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.map))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/LogosPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/LogosPage.tsx
new file mode 100644
index 0000000..a274fc4
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/LogosPage.tsx
@@ -0,0 +1,220 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The logos page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  LogoCloud,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+export function LogosPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.logos}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.logos}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-grid4-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="grid4"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-grid4-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.grid4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-grid4"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="4"
+                item="name"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-grid3-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.grid3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-grid3"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="3"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-row-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-row-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.row}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-row"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="row"
+                cols="4"
+                item="icon"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-icons-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.icons}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-icons"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="4"
+                item="icon"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-grid2-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.grid2}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-grid2"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="2"
+                item="name"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-tiles4-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="tiles4"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-tiles4-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.tiles4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-tiles4"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/MedialistPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/MedialistPage.tsx
new file mode 100644
index 0000000..93218e2
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/MedialistPage.tsx
@@ -0,0 +1,285 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The medialist page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MediaList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Feature,
+  type Post,
+  type Review,
+  type Stat,
+  type Step,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+const MEDIALIST_LABELS = {
+  count: ui.marketing.mediaList.count,
+  minutes: ui.content.labels.minutes,
+  featured: ui.marketing.mediaList.featured,
+  rating: ui.testimonials.rating,
+  figures: ui.marketing.mediaList.supportFigures,
+} as const;
+const MEDIALIST_EXTRAS = { stats, steps, posts, topics: categories, channels, reviews } as const;
+
+export function MedialistPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.medialist}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.medialist}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-figuresStart-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="figuresStart"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-figuresStart-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.figuresStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-figuresStart"
+                title={ui.marketing.mediaList.figures.title}
+                lead={ui.marketing.mediaList.figures.lead}
+                badge={ui.marketing.mediaList.figures.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.figures.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.figures.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="figures"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.figuresStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-proofReview-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="proofReview"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-proofReview-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.proofReview}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-proofReview"
+                title={ui.marketing.mediaList.proof.title}
+                lead={ui.marketing.mediaList.proof.lead}
+                badge={ui.marketing.mediaList.proof.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.proof.list }}
+                actions={{
+                  mode: "two",
+                  cta: ui.marketing.mediaList.proof.cta,
+                  href: "#/start",
+                  secondary: ui.marketing.mediaList.proof.secondary,
+                  secondaryHref: "#/more",
+                }}
+                extras={MEDIALIST_EXTRAS}
+                layout="proof"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.proofReview))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-stepsRows-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="stepsRows"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-stepsRows-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.stepsRows}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-stepsRows"
+                title={ui.marketing.mediaList.steps.title}
+                lead={ui.marketing.mediaList.steps.lead}
+                badge={ui.marketing.mediaList.steps.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.steps.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.steps.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="steps"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.stepsRows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-latestPosts-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="latestPosts"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-latestPosts-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.latestPosts}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-latestPosts"
+                title={ui.marketing.mediaList.posts.title}
+                lead={ui.marketing.mediaList.posts.lead}
+                badge={ui.marketing.mediaList.posts.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.posts.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.posts.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="posts"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.latestPosts))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-topicRows-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="topicRows"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-topicRows-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.topicRows}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-topicRows"
+                title={ui.marketing.mediaList.topics.title}
+                lead={ui.marketing.mediaList.topics.lead}
+                badge={ui.marketing.mediaList.topics.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.topics.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.topics.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="topics"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-contactStart-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="contactStart"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-contactStart-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.contactStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-contactStart"
+                title={ui.marketing.mediaList.contact.title}
+                lead={ui.marketing.mediaList.contact.lead}
+                badge={ui.marketing.mediaList.contact.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.contact.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.contact.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="contact"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.contactStart))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/MegamenuPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/MegamenuPage.tsx
new file mode 100644
index 0000000..fd8de21
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/MegamenuPage.tsx
@@ -0,0 +1,174 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The megamenu page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MegaMenu,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+  type NavLink,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+
+export function MegamenuPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.megamenu}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.megamenu}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-open-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="open"
+          >
+            <Title as={2} size="base" weight="bold" id="megamenu-open-label" data-testid="variant-label">
+              {ui.blocks.variants.megamenu.open}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                trigger={ui.vibe.mega.trigger}
+                links={navlinks}
+                groups={megagroups}
+                promoTitle={ui.vibe.mega.promoTitle}
+                promoText={ui.vibe.mega.promoText}
+                panel="open"
+                cols="3"
+                promo="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-closed-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="closed"
+          >
+            <Title as={2} size="base" weight="bold" id="megamenu-closed-label" data-testid="variant-label">
+              {ui.blocks.variants.megamenu.closed}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                trigger={ui.vibe.mega.trigger}
+                links={navlinks}
+                groups={megagroups}
+                promoTitle={ui.vibe.mega.promoTitle}
+                promoText={ui.vibe.mega.promoText}
+                panel="closed"
+                cols="3"
+                promo="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.closed))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-twoCols-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="twoCols"
+          >
+            <Title as={2} size="base" weight="bold" id="megamenu-twoCols-label" data-testid="variant-label">
+              {ui.blocks.variants.megamenu.twoCols}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                trigger={ui.vibe.mega.trigger}
+                links={navlinks}
+                groups={megagroups}
+                promoTitle={ui.vibe.mega.promoTitle}
+                promoText={ui.vibe.mega.promoText}
+                panel="open"
+                cols="2"
+                promo="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-promo-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="promo"
+          >
+            <Title as={2} size="base" weight="bold" id="megamenu-promo-label" data-testid="variant-label">
+              {ui.blocks.variants.megamenu.promo}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                trigger={ui.vibe.mega.trigger}
+                links={navlinks}
+                groups={megagroups}
+                promoTitle={ui.vibe.mega.promoTitle}
+                promoText={ui.vibe.mega.promoText}
+                panel="open"
+                cols="3"
+                promo="card"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.promo))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/MetricsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/MetricsPage.tsx
new file mode 100644
index 0000000..3908871
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/MetricsPage.tsx
@@ -0,0 +1,168 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The metrics page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MetricRow,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+export function MetricsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.metrics}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.metrics}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-tiles-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="tiles"
+          >
+            <Title as={2} size="base" weight="bold" id="metrics-tiles-label" data-testid="variant-label">
+              {ui.blocks.variants.metrics.tiles}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-tiles"
+                title={ui.dashboard.metrics.title}
+                metrics={metrics}
+                empty={ui.empty.metrics}
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-twoUp-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="twoUp"
+          >
+            <Title as={2} size="base" weight="bold" id="metrics-twoUp-label" data-testid="variant-label">
+              {ui.blocks.variants.metrics.twoUp}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-twoUp"
+                title={ui.dashboard.metrics.title}
+                metrics={metrics}
+                empty={ui.empty.metrics}
+                cols="2"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.twoUp))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-compact-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="metrics-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.metrics.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-compact"
+                title={ui.dashboard.metrics.title}
+                metrics={metrics}
+                empty={ui.empty.metrics}
+                cols="4"
+                item="compact"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-muted-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="metrics-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.metrics.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-muted"
+                title={ui.dashboard.metrics.title}
+                metrics={metrics}
+                empty={ui.empty.metrics}
+                cols="2"
+                item="compact"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/NavbarPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/NavbarPage.tsx
new file mode 100644
index 0000000..c5288dd
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/NavbarPage.tsx
@@ -0,0 +1,230 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The navbar page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  NavBar,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+const NAVBAR_ACTIONS = { cta: ui.site.header.cta, href: "#/", login: ui.site.header.login, loginHref: "#/login" } as const;
+
+export function NavbarPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.navbar}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.navbar}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-inline-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="inline"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-inline-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.inline}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="inline"
+                over="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inline))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-split-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-split-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="split"
+                over="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-search-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="search"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-search-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.search}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="search"
+                over="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-media-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="media"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-media-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.media}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="inline"
+                over="media"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-plain-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "none" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="inline"
+                over="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.plain))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-inverse-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="inverse"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-inverse-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.inverse}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="inline"
+                over="none"
+                tone="inverse"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inverse))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/NewsletterPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/NewsletterPage.tsx
new file mode 100644
index 0000000..9622fef
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/NewsletterPage.tsx
@@ -0,0 +1,185 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The newsletter page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  NewsletterForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NewsletterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+              {ui.blocks.themes.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.newsletter}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.newsletter}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-inline-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="inline"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-inline-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.inline}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-inline"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="inline"
+                terms="hide"
+                tone="default"
+                align="center"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-stacked-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-stacked"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="stacked"
+                terms="hide"
+                tone="default"
+                align="center"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-split-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-split-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-split"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="split"
+                terms="hide"
+                tone="default"
+                align="start"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-consent-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="consent"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-consent-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.consent}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-consent"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="inline"
+                terms="show"
+                tone="default"
+                align="center"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-muted-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-muted"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="inline"
+                terms="show"
+                tone="muted"
+                align="start"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/NotfoundPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/NotfoundPage.tsx
new file mode 100644
index 0000000..ca00a93
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/NotfoundPage.tsx
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The notfound page of BlocksScreen.
+
+import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NotfoundPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="4" align="stretch">
+          <Title as={1} size="4xl" weight="bold" id="page-title">
+            {ui.site.notFound.title}
+          </Title>
+          <Group>
+            <Button variant="default" size="default" href="#/">
+              {ui.blocks.back}
+            </Button>
+          </Group>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/OrdersPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/OrdersPage.tsx
new file mode 100644
index 0000000..676845a
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/OrdersPage.tsx
@@ -0,0 +1,178 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The orders page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  OrderTable,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Order,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+const ORDERS_FIELDS = {
+  "id": "id",
+  "number": "title",
+  "date": "metadata.date.value|date",
+  "total": "metadata.total.value",
+  "currency": "metadata.currency.value",
+  "status": "metadata.order_status.value",
+  "items": "metadata.items.value",
+} as const;
+
+const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+
+export function OrdersPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.orders}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.orders}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-table-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="table"
+          >
+            <Title as={2} size="base" weight="bold" id="orders-table-label" data-testid="variant-label">
+              {ui.blocks.variants.orders.table}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-table"
+                title={ui.commerce.orders.title}
+                orders={orders}
+                empty={ui.empty.orders}
+                statuses={ui.status}
+                labels={ui.commerce.orders}
+                layout="table"
+                pager="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-cards-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="orders-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.orders.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-cards"
+                title={ui.commerce.orders.title}
+                orders={orders}
+                empty={ui.empty.orders}
+                statuses={ui.status}
+                labels={ui.commerce.orders}
+                layout="cards"
+                pager="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-noPager-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="noPager"
+          >
+            <Title as={2} size="base" weight="bold" id="orders-noPager-label" data-testid="variant-label">
+              {ui.blocks.variants.orders.noPager}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-noPager"
+                title={ui.commerce.orders.title}
+                orders={orders}
+                empty={ui.empty.orders}
+                statuses={ui.status}
+                labels={ui.commerce.orders}
+                layout="table"
+                pager="hide"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.noPager))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-compactMuted-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="compactMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="orders-compactMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.orders.compactMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-compactMuted"
+                title={ui.commerce.orders.title}
+                orders={orders}
+                empty={ui.empty.orders}
+                statuses={ui.status}
+                labels={ui.commerce.orders}
+                layout="table"
+                pager="hide"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.compactMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/OverviewPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/OverviewPage.tsx
new file mode 100644
index 0000000..8018a1c
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/OverviewPage.tsx
@@ -0,0 +1,189 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The overview page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DashboardOverview,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type Point,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+const OVERVIEW_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const OVERVIEW_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+
+export function OverviewPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.overview}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.overview}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-split-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="overview-split-label" data-testid="variant-label">
+              {ui.blocks.variants.overview.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-split"
+                title={ui.vibe.overview.title}
+                metrics={metrics}
+                chart={OVERVIEW_CHART}
+                activity={OVERVIEW_ACTIVITY}
+                layout="split"
+                cols="4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-stacked-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="overview-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.overview.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-stacked"
+                title={ui.vibe.overview.title}
+                metrics={metrics}
+                chart={OVERVIEW_CHART}
+                activity={OVERVIEW_ACTIVITY}
+                layout="stacked"
+                cols="4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-twoCols-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="twoCols"
+          >
+            <Title as={2} size="base" weight="bold" id="overview-twoCols-label" data-testid="variant-label">
+              {ui.blocks.variants.overview.twoCols}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-twoCols"
+                title={ui.vibe.overview.title}
+                metrics={metrics}
+                chart={OVERVIEW_CHART}
+                activity={OVERVIEW_ACTIVITY}
+                layout="split"
+                cols="2"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.twoCols))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-muted-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="overview-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.overview.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-muted"
+                title={ui.vibe.overview.title}
+                metrics={metrics}
+                chart={OVERVIEW_CHART}
+                activity={OVERVIEW_ACTIVITY}
+                layout="split"
+                cols="4"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/PageheadPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/PageheadPage.tsx
new file mode 100644
index 0000000..172e971
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/PageheadPage.tsx
@@ -0,0 +1,131 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The pagehead page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageIntro,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function PageheadPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.pagehead}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.pagehead}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagehead-start-label"
+            data-testid="variant"
+            data-block="pagehead"
+            data-variant="start"
+          >
+            <Title as={2} size="base" weight="bold" id="pagehead-start-label" data-testid="variant-label">
+              {ui.blocks.variants.pagehead.start}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageIntro
+                id="pagehead-start"
+                title={ui.vibe.pagehead.title}
+                text={ui.vibe.pagehead.text}
+                cta={ui.vibe.pagehead.cta}
+                href="#/"
+                align="start"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.start))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagehead-center-label"
+            data-testid="variant"
+            data-block="pagehead"
+            data-variant="center"
+          >
+            <Title as={2} size="base" weight="bold" id="pagehead-center-label" data-testid="variant-label">
+              {ui.blocks.variants.pagehead.center}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageIntro
+                id="pagehead-center"
+                title={ui.vibe.pagehead.title}
+                text={ui.vibe.pagehead.text}
+                cta={ui.vibe.pagehead.cta}
+                href="#/"
+                align="center"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.center))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagehead-muted-label"
+            data-testid="variant"
+            data-block="pagehead"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="pagehead-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.pagehead.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageIntro
+                id="pagehead-muted"
+                title={ui.vibe.pagehead.title}
+                text={ui.vibe.pagehead.text}
+                cta={ui.vibe.pagehead.cta}
+                href="#/"
+                align="start"
+                tone="muted"
+                density="compact"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/PagetrailPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/PagetrailPage.tsx
new file mode 100644
index 0000000..82e25f7
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/PagetrailPage.tsx
@@ -0,0 +1,188 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The pagetrail page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageTrail,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+
+const PAGETRAIL_EXTRAS = {
+  value: ui.marketing.pageTrail.value,
+  caption: ui.marketing.pageTrail.caption,
+  note: ui.marketing.pageTrail.note,
+  icon: "package",
+  facts: stats,
+} as const;
+
+export function PagetrailPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.pagetrail}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.pagetrail}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-crumbs-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="crumbs"
+          >
+            <Title as={2} size="base" weight="bold" id="pagetrail-crumbs-label" data-testid="variant-label">
+              {ui.blocks.variants.pagetrail.crumbs}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-crumbs"
+                title={ui.marketing.pageTrail.title}
+                lead={ui.marketing.pageTrail.lead}
+                badge={ui.marketing.pageTrail.badge}
+                label={ui.marketing.pageTrail.label}
+                crumbs={crumbs}
+                extras={PAGETRAIL_EXTRAS}
+                aside="none"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbs))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-crumbsFigure-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="crumbsFigure"
+          >
+            <Title as={2} size="base" weight="bold" id="pagetrail-crumbsFigure-label" data-testid="variant-label">
+              {ui.blocks.variants.pagetrail.crumbsFigure}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-crumbsFigure"
+                title={ui.marketing.pageTrail.title}
+                lead={ui.marketing.pageTrail.lead}
+                badge={ui.marketing.pageTrail.badge}
+                label={ui.marketing.pageTrail.label}
+                crumbs={crumbs}
+                extras={PAGETRAIL_EXTRAS}
+                aside="figure"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsFigure))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-crumbsNote-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="crumbsNote"
+          >
+            <Title as={2} size="base" weight="bold" id="pagetrail-crumbsNote-label" data-testid="variant-label">
+              {ui.blocks.variants.pagetrail.crumbsNote}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-crumbsNote"
+                title={ui.marketing.pageTrail.title}
+                lead={ui.marketing.pageTrail.lead}
+                badge={ui.marketing.pageTrail.badge}
+                label={ui.marketing.pageTrail.label}
+                crumbs={crumbs}
+                extras={PAGETRAIL_EXTRAS}
+                aside="note"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsNote))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-keyFacts-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="keyFacts"
+          >
+            <Title as={2} size="base" weight="bold" id="pagetrail-keyFacts-label" data-testid="variant-label">
+              {ui.blocks.variants.pagetrail.keyFacts}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-keyFacts"
+                title={ui.marketing.pageTrail.title}
+                lead={ui.marketing.pageTrail.lead}
+                badge={ui.marketing.pageTrail.badge}
+                label={ui.marketing.pageTrail.label}
+                crumbs={crumbs}
+                extras={PAGETRAIL_EXTRAS}
+                aside="facts"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.keyFacts))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/PhotosPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/PhotosPage.tsx
new file mode 100644
index 0000000..4367c87
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/PhotosPage.tsx
@@ -0,0 +1,226 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The photos page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PhotoGallery,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Photo,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+
+export function PhotosPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.photos}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.photos}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-grid-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.grid}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-grid"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="grid"
+                captions="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-gridPlain-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="gridPlain"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-gridPlain-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.gridPlain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-gridPlain"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="grid"
+                captions="hide"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.gridPlain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-masonry-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="masonry"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-masonry-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.masonry}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-masonry"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="masonry"
+                captions="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-mosaic-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="mosaic"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-mosaic-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.mosaic}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-mosaic"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="mosaic"
+                captions="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.mosaic))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-featured-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="featured"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-featured-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.featured}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-featured"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="featured"
+                captions="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.featured))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-cards-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-cards"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="cards"
+                captions="show"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.cards))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/PlanPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/PlanPage.tsx
new file mode 100644
index 0000000..0760187
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/PlanPage.tsx
@@ -0,0 +1,136 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The plan page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PricingCard,
+  Stack,
+  Text,
+  Title,
+  type Plan,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+export function PlanPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.plan}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.plan}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="plan-standard-label"
+            data-testid="variant"
+            data-block="plan"
+            data-variant="standard"
+          >
+            <Title as={2} size="base" weight="bold" id="plan-standard-label" data-testid="variant-label">
+              {ui.blocks.variants.plan.standard}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <PricingCard
+                  plan={tiers.find((i) => i.id === "tier-team")!}
+                  labels={ui.pricing}
+                  emphasis="auto"
+                  density="default"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="plan-flat-label"
+            data-testid="variant"
+            data-block="plan"
+            data-variant="flat"
+          >
+            <Title as={2} size="base" weight="bold" id="plan-flat-label" data-testid="variant-label">
+              {ui.blocks.variants.plan.flat}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <PricingCard
+                  plan={tiers.find((i) => i.id === "tier-team")!}
+                  labels={ui.pricing}
+                  emphasis="off"
+                  density="default"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="plan-compact-label"
+            data-testid="variant"
+            data-block="plan"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="plan-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.plan.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <PricingCard
+                  plan={tiers.find((i) => i.id === "tier-team")!}
+                  labels={ui.pricing}
+                  emphasis="auto"
+                  density="compact"
+                />
+              </Box>
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/PostheaderPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/PostheaderPage.tsx
new file mode 100644
index 0000000..0215bb3
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/PostheaderPage.tsx
@@ -0,0 +1,168 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The postheader page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+
+export function PostheaderPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.postheader}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.postheader}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-start-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="start"
+          >
+            <Title as={2} size="base" weight="bold" id="postheader-start-label" data-testid="variant-label">
+              {ui.blocks.variants.postheader.start}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-start"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.labels}
+                layout="start"
+                cover="show"
+                meta="full"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.start))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-center-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="center"
+          >
+            <Title as={2} size="base" weight="bold" id="postheader-center-label" data-testid="variant-label">
+              {ui.blocks.variants.postheader.center}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-center"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.labels}
+                layout="center"
+                cover="show"
+                meta="full"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.center))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-noCover-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="noCover"
+          >
+            <Title as={2} size="base" weight="bold" id="postheader-noCover-label" data-testid="variant-label">
+              {ui.blocks.variants.postheader.noCover}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-noCover"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.labels}
+                layout="start"
+                cover="hide"
+                meta="full"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.noCover))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-minimal-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="postheader-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.postheader.minimal}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-minimal"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.labels}
+                layout="center"
+                cover="hide"
+                meta="short"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.minimal))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/PostsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/PostsPage.tsx
new file mode 100644
index 0000000..1266205
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/PostsPage.tsx
@@ -0,0 +1,340 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The posts page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+const POSTS_FILTER = { topics, label: ui.vibe.posts.topics, topic: "" } as const;
+
+export function PostsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.posts}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.posts}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-grid-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.grid}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-grid"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-filters-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="filters"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-filters-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.filters}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-filters"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, topic: "Design", mode: "topics" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-twoUp-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="twoUp"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-twoUp-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.twoUp}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-twoUp"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-2"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-row4-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="row4"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-row4-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.row4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-row4"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-4"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.row4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-news4-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="news4"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-news4-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.news4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-news4"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-4"
+                media="image"
+                meta="news"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.news4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-list-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-list-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-list"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="list"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-magazine-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="magazine"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-magazine-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.magazine}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-magazine"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="magazine"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-textOnly-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="textOnly"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-textOnly-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.textOnly}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-textOnly"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                media="none"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-digest-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="digest"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-digest-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.digest}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-digest"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                media="none"
+                meta="short"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/PostshowcasePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/PostshowcasePage.tsx
new file mode 100644
index 0000000..0b274fd
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/PostshowcasePage.tsx
@@ -0,0 +1,184 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The postshowcase page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostShowcase,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+
+export function PostshowcasePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.postshowcase}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.postshowcase}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-introCards-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="introCards"
+          >
+            <Title as={2} size="base" weight="bold" id="postshowcase-introCards-label" data-testid="variant-label">
+              {ui.blocks.variants.postshowcase.introCards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-introCards"
+                title={ui.content.postShowcase.title}
+                lead={ui.content.postShowcase.lead}
+                badge={ui.content.postShowcase.badge}
+                posts={posts}
+                empty={ui.empty.posts}
+                labels={ui.content.labels}
+                action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                layout="intro"
+                cols="3"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-featuredEnd-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="featuredEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="postshowcase-featuredEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.postshowcase.featuredEnd}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-featuredEnd"
+                title={ui.content.postShowcase.title}
+                lead={ui.content.postShowcase.lead}
+                badge={ui.content.postShowcase.badge}
+                posts={posts}
+                empty={ui.empty.posts}
+                labels={ui.content.labels}
+                action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                layout="featured"
+                cols="3"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.featuredEnd))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-overlay3-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="overlay3"
+          >
+            <Title as={2} size="base" weight="bold" id="postshowcase-overlay3-label" data-testid="variant-label">
+              {ui.blocks.variants.postshowcase.overlay3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-overlay3"
+                title={ui.content.postShowcase.title}
+                lead={ui.content.postShowcase.lead}
+                badge={ui.content.postShowcase.badge}
+                posts={posts}
+                empty={ui.empty.posts}
+                labels={ui.content.labels}
+                action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                layout="overlay"
+                cols="3"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-overlay2-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="overlay2"
+          >
+            <Title as={2} size="base" weight="bold" id="postshowcase-overlay2-label" data-testid="variant-label">
+              {ui.blocks.variants.postshowcase.overlay2}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-overlay2"
+                title={ui.content.postShowcase.title}
+                lead={ui.content.postShowcase.lead}
+                badge={ui.content.postShowcase.badge}
+                posts={posts}
+                empty={ui.empty.posts}
+                labels={ui.content.labels}
+                action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                layout="overlay"
+                cols="2"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay2))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/PostsplitPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/PostsplitPage.tsx
new file mode 100644
index 0000000..f3d41a2
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/PostsplitPage.tsx
@@ -0,0 +1,254 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The postsplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Post,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+const POSTSPLIT_EXTRAS = {
+  role: ui.content.postSplit.role,
+  bio: ui.content.postSplit.bio,
+  views: ui.content.postSplit.views,
+  likes: ui.content.postSplit.likes,
+  tags: posttags,
+  outline,
+} as const;
+
+export function PostsplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.postsplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.postsplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-centerShare-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="centerShare"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-centerShare-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.centerShare}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-centerShare"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="center"
+                mediaSide="end"
+                author="line"
+                cover="wide"
+                actions="pair"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.centerShare))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitTags-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitTags"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-splitTags-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.splitTags}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitTags"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="split"
+                mediaSide="end"
+                author="line"
+                cover="wide"
+                actions="pair"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitTags))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitBioStart-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitBioStart"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-splitBioStart-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.splitBioStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitBioStart"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="split"
+                mediaSide="start"
+                author="bio"
+                cover="wide"
+                actions="wide"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitBioStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitSquare-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitSquare"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-splitSquare-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.splitSquare}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitSquare"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="split"
+                mediaSide="end"
+                author="line"
+                cover="square"
+                actions="icons"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitSquare))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-outlineStart-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="outlineStart"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-outlineStart-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.outlineStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-outlineStart"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="outline"
+                mediaSide="start"
+                author="line"
+                cover="wide"
+                actions="pair"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.outlineStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitStats-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitStats"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-splitStats-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.splitStats}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitStats"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="split"
+                mediaSide="end"
+                author="card"
+                cover="wide"
+                actions="pair"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitStats))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/PricingPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/PricingPage.tsx
new file mode 100644
index 0000000..2051645
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/PricingPage.tsx
@@ -0,0 +1,373 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The pricing page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PricingTiers,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Plan,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const DUO_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+
+export function PricingPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.pricing}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.pricing}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-grid-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.grid}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-grid"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-monthly-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="monthly"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-monthly-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.monthly}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-monthly"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="monthly"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-annual-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="annual"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-annual-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.annual}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-annual"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="annual"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-duo-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="duo"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-duo-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.duo}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-duo"
+                title={ui.site.pricing.tiersTitle}
+                plans={duo}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-2"
+                emphasis="off"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-grid2-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.grid2}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-grid2"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-2"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-grid4-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="grid4"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-grid4-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.grid4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-grid4"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-4"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-stack-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="stack"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-stack-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.stack}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-stack"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="stack"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-flat-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="flat"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-flat-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.flat}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-flat"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="off"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.flat))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-compactMuted-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="compactMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-compactMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.compactMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-compactMuted"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.compactMuted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-roomy-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="roomy"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-roomy-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.roomy}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-roomy"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.roomy))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ProductPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ProductPage.tsx
new file mode 100644
index 0000000..a28c7a2
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ProductPage.tsx
@@ -0,0 +1,217 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The product page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductDetail,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Product,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+
+export function ProductPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.product}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.product}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-split-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="product-split-label" data-testid="variant-label">
+              {ui.blocks.variants.product.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-split"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="split"
+                mediaSide="start"
+                thumbs="below"
+                buy="full"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-splitEnd-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="splitEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="product-splitEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.product.splitEnd}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-splitEnd"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="split"
+                mediaSide="end"
+                thumbs="below"
+                buy="full"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.splitEnd))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-stacked-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="product-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.product.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-stacked"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="stacked"
+                mediaSide="start"
+                thumbs="none"
+                buy="full"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-compact-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="product-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.product.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-compact"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="split"
+                mediaSide="start"
+                thumbs="none"
+                buy="compact"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-muted-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="product-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.product.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-muted"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="split"
+                mediaSide="start"
+                thumbs="below"
+                buy="full"
+                tone="muted"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ProductinfoPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ProductinfoPage.tsx
new file mode 100644
index 0000000..f85726c
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ProductinfoPage.tsx
@@ -0,0 +1,140 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The productinfo page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductInfo,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Detail,
+  type Spec,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+
+export function ProductinfoPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.productinfo}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.productinfo}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="productinfo-split-label"
+            data-testid="variant"
+            data-block="productinfo"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="productinfo-split-label" data-testid="variant-label">
+              {ui.blocks.variants.productinfo.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductInfo
+                id="productinfo-split"
+                title={ui.commerce.info.title}
+                details={details}
+                specs={specs}
+                labels={ui.commerce.info}
+                layout="split"
+                expand="first"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="productinfo-stacked-label"
+            data-testid="variant"
+            data-block="productinfo"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="productinfo-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.productinfo.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductInfo
+                id="productinfo-stacked"
+                title={ui.commerce.info.title}
+                details={details}
+                specs={specs}
+                labels={ui.commerce.info}
+                layout="stacked"
+                expand="first"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="productinfo-closed-label"
+            data-testid="variant"
+            data-block="productinfo"
+            data-variant="closed"
+          >
+            <Title as={2} size="base" weight="bold" id="productinfo-closed-label" data-testid="variant-label">
+              {ui.blocks.variants.productinfo.closed}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductInfo
+                id="productinfo-closed"
+                title={ui.commerce.info.title}
+                details={details}
+                specs={specs}
+                labels={ui.commerce.info}
+                layout="split"
+                expand="none"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.closed))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ProductsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ProductsPage.tsx
new file mode 100644
index 0000000..1c23773
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ProductsPage.tsx
@@ -0,0 +1,342 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The products page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Product,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+
+export function ProductsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.products}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.products}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-grid3-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="products-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.products.grid3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-grid3"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-grid4-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="grid4"
+          >
+            <Title as={2} size="base" weight="bold" id="products-grid4-label" data-testid="variant-label">
+              {ui.blocks.variants.products.grid4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-grid4"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-4"
+                ratio="1/1"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-grid2-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="products-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.products.grid2}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-grid2"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-2"
+                ratio="3/4"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-list-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="products-list-label" data-testid="variant-label">
+              {ui.blocks.variants.products.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-list"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="list"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-catalog-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="catalog"
+          >
+            <Title as={2} size="base" weight="bold" id="products-catalog-label" data-testid="variant-label">
+              {ui.blocks.variants.products.catalog}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-catalog"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-4"
+                ratio="1/1"
+                rating="hide"
+                action="button"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-browse-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="browse"
+          >
+            <Title as={2} size="base" weight="bold" id="products-browse-label" data-testid="variant-label">
+              {ui.blocks.variants.products.browse}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-browse"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="none"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-showcase-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="showcase"
+          >
+            <Title as={2} size="base" weight="bold" id="products-showcase-label" data-testid="variant-label">
+              {ui.blocks.variants.products.showcase}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-showcase"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-3"
+                ratio="3/4"
+                rating="show"
+                action="button"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-rail-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="rail"
+          >
+            <Title as={2} size="base" weight="bold" id="products-rail-label" data-testid="variant-label">
+              {ui.blocks.variants.products.rail}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-rail"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="rail"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-railCompact-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="railCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="products-railCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.products.railCompact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-railCompact"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="rail"
+                cols="1-3"
+                ratio="1/1"
+                rating="hide"
+                action="button"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ProfilePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ProfilePage.tsx
new file mode 100644
index 0000000..d1db3e9
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ProfilePage.tsx
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The profile page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProfileForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function ProfilePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+              {ui.blocks.themes.account.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.profile}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.profile}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-stacked-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="profile-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.profile.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-stacked"
+                title={ui.account.profile.title}
+                text={ui.account.profile.text}
+                labels={ui.account.profile.labels}
+                layout="stacked"
+                avatar="show"
+                prefs="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-split-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="profile-split-label" data-testid="variant-label">
+              {ui.blocks.variants.profile.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-split"
+                title={ui.account.profile.title}
+                text={ui.account.profile.text}
+                labels={ui.account.profile.labels}
+                layout="split"
+                avatar="show"
+                prefs="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-minimal-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="profile-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.profile.minimal}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-minimal"
+                title={ui.account.profile.title}
+                text={ui.account.profile.text}
+                labels={ui.account.profile.labels}
+                layout="stacked"
+                avatar="hide"
+                prefs="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.minimal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-muted-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="profile-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.profile.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-muted"
+                title={ui.account.profile.title}
+                text={ui.account.profile.text}
+                labels={ui.account.profile.labels}
+                layout="split"
+                avatar="show"
+                prefs="show"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ProjectsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ProjectsPage.tsx
new file mode 100644
index 0000000..8ccdb44
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ProjectsPage.tsx
@@ -0,0 +1,229 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The projects page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProjectGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Project,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+
+export function ProjectsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.projects}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.projects}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-cards-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-cards"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="cards"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-compact-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-compact"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="compact"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-overlay-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="overlay"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-overlay-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.overlay}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-overlay"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="overlay"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.overlay))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-bento-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="bento"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-bento-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.bento}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-bento"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="bento"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.bento))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-list-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-list-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-list"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="list"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-cardsMuted-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="cardsMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-cardsMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.cardsMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-cardsMuted"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="cards"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cardsMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ProofPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ProofPage.tsx
new file mode 100644
index 0000000..12d2bbe
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ProofPage.tsx
@@ -0,0 +1,176 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The proof page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProofBand,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+export function ProofPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.proof}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.proof}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-above-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="above"
+          >
+            <Title as={2} size="base" weight="bold" id="proof-above-label" data-testid="variant-label">
+              {ui.blocks.variants.proof.above}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-above"
+                title={ui.vibe.proof.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                stats={stats}
+                layout="above"
+                logoStyle="name"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-beside-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="beside"
+          >
+            <Title as={2} size="base" weight="bold" id="proof-beside-label" data-testid="variant-label">
+              {ui.blocks.variants.proof.beside}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-beside"
+                title={ui.vibe.proof.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                stats={stats}
+                layout="beside"
+                logoStyle="name"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.beside))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-icons-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="proof-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.proof.icons}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-icons"
+                title={ui.vibe.proof.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                stats={stats}
+                layout="above"
+                logoStyle="icon"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-muted-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="proof-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.proof.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-muted"
+                title={ui.vibe.proof.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                stats={stats}
+                layout="above"
+                logoStyle="name"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/QuotesplitPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/QuotesplitPage.tsx
new file mode 100644
index 0000000..4c2fdd1
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/QuotesplitPage.tsx
@@ -0,0 +1,272 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The quotesplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  QuoteSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+const QUOTESPLIT_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+const QUOTESPLIT_EXTRAS = { stats, logos, rating: 5, score: ui.marketing.quoteSplit.score, reviews: ui.marketing.quoteSplit.reviews } as const;
+const QUOTESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.quoteSplit.cta,
+  href: "#/customers",
+  secondary: ui.marketing.quoteSplit.secondary,
+  secondaryHref: "#/contact",
+} as const;
+
+export function QuotesplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.quotesplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.quotesplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-quoteCard-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="quoteCard"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-quoteCard-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.quoteCard}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-quoteCard"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="media"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.quoteCard))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-logoTiles-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="logoTiles"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-logoTiles-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.logoTiles}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-logoTiles"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="logos"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.logoTiles))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-ratingPanel-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="ratingPanel"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-ratingPanel-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.ratingPanel}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-ratingPanel"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="rating"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-stackedCards-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="stackedCards"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-stackedCards-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.stackedCards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-stackedCards"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="stack"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.stackedCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-compact4-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="compact4"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-compact4-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.compact4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-compact4"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="compact"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.compact4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-bentoFigures-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="bentoFigures"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-bentoFigures-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.bentoFigures}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-bentoFigures"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="bento"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.bentoFigures))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ReviewsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ReviewsPage.tsx
new file mode 100644
index 0000000..577356e
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ReviewsPage.tsx
@@ -0,0 +1,200 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The reviews page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ReviewList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Review,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+export function ReviewsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.reviews}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.reviews}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-list-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-list-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-list"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="list"
+                item="card"
+                avatar="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-grid-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.grid}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-grid"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="grid"
+                item="card"
+                avatar="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-plain-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-plain"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="list"
+                item="plain"
+                avatar="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-avatars-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="avatars"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-avatars-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.avatars}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-avatars"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="list"
+                item="card"
+                avatar="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.avatars))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-mutedGrid-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="mutedGrid"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-mutedGrid-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.mutedGrid}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-mutedGrid"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="grid"
+                item="card"
+                avatar="image"
+                tone="muted"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.mutedGrid))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ScreenHeader.tsx b/apps/host-react/xgen/screens/BlocksScreen/ScreenHeader.tsx
new file mode 100644
index 0000000..ae2f12d
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ScreenHeader.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The ScreenHeader part of BlocksScreen: its own file, so each file of the screen opens on one Block.
+
+import { Block, Button, Container, Group, Link, LinkPlain } from "@ui8kit/react-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+
+export function ScreenHeader() {
+  return (
+    <Block tag="header" className="border-b border-border">
+      <LinkPlain
+        href="#main-content"
+        className={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded-md focus:bg-background " +
+          "focus:px-4 focus:py-2 focus:text-sm focus:shadow"}
+        data-testid="skip-link"
+      >
+        {ui.site.header.skip}
+      </LinkPlain>
+      <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+        <Link href="#/" variant="default" className="text-lg font-bold" data-testid="brand">
+          {ui.blocks.title}
+        </Link>
+        <Group gap="4" align="center" className="flex-wrap">
+          <Link href="/catalog/" variant="default" className="text-sm font-medium" data-testid="catalog-link">
+            {ui.catalog.title}
+          </Link>
+          <Link href="/skins/" variant="default" className="text-sm font-medium" data-testid="skins-link">
+            {ui.skins.title}
+          </Link>
+          <Link href="/discovery/" variant="default" className="text-sm font-medium" data-testid="discovery-link">
+            {ui.discovery.title}
+          </Link>
+          <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => actions.toggleTheme()}>
+            {ui.theme.toggle}
+          </Button>
+        </Group>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ShellPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ShellPage.tsx
new file mode 100644
index 0000000..68a1d42
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ShellPage.tsx
@@ -0,0 +1,198 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The shell page of BlocksScreen.
+
+import {
+  AppShell,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+const SHELL_NAV = { label: ui.vibe.sidebar.label, brand: ui.site.header.brand, links: sidenav, current: "item-overview" } as const;
+const SHELL_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const SHELL_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+
+export function ShellPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.shell}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.shell}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-sidebar-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="sidebar"
+          >
+            <Title as={2} size="base" weight="bold" id="shell-sidebar-label" data-testid="variant-label">
+              {ui.blocks.variants.shell.sidebar}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-sidebar"
+                title={ui.vibe.shell.title}
+                nav={SHELL_NAV}
+                user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                metrics={metrics}
+                chart={SHELL_CHART}
+                activity={SHELL_ACTIVITY}
+                layout="sidebar"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-top-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="top"
+          >
+            <Title as={2} size="base" weight="bold" id="shell-top-label" data-testid="variant-label">
+              {ui.blocks.variants.shell.top}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-top"
+                title={ui.vibe.shell.title}
+                nav={SHELL_NAV}
+                user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                metrics={metrics}
+                chart={SHELL_CHART}
+                activity={SHELL_ACTIVITY}
+                layout="top"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-panes-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="panes"
+          >
+            <Title as={2} size="base" weight="bold" id="shell-panes-label" data-testid="variant-label">
+              {ui.blocks.variants.shell.panes}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-panes"
+                title={ui.vibe.shell.title}
+                nav={SHELL_NAV}
+                user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                metrics={metrics}
+                chart={SHELL_CHART}
+                activity={SHELL_ACTIVITY}
+                layout="panes"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-dense-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="dense"
+          >
+            <Title as={2} size="base" weight="bold" id="shell-dense-label" data-testid="variant-label">
+              {ui.blocks.variants.shell.dense}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-dense"
+                title={ui.vibe.shell.title}
+                nav={SHELL_NAV}
+                user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                metrics={metrics}
+                chart={SHELL_CHART}
+                activity={SHELL_ACTIVITY}
+                layout="sidebar"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.dense))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/SidenavPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/SidenavPage.tsx
new file mode 100644
index 0000000..09272d2
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/SidenavPage.tsx
@@ -0,0 +1,166 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The sidenav page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SidebarNav,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+
+export function SidenavPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.sidenav}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.sidenav}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-full-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="full"
+          >
+            <Title as={2} size="base" weight="bold" id="sidenav-full-label" data-testid="variant-label">
+              {ui.blocks.variants.sidenav.full}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                label={ui.vibe.sidebar.label}
+                brand={ui.site.header.brand}
+                links={sidenav}
+                current="item-orders"
+                userName={ui.vibe.sidebar.userName}
+                userEmail={ui.vibe.sidebar.userEmail}
+                width="full"
+                user="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-compact-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="sidenav-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.sidenav.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                label={ui.vibe.sidebar.label}
+                brand={ui.site.header.brand}
+                links={sidenav}
+                current="item-orders"
+                userName={ui.vibe.sidebar.userName}
+                userEmail={ui.vibe.sidebar.userEmail}
+                width="compact"
+                user="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-noUser-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="noUser"
+          >
+            <Title as={2} size="base" weight="bold" id="sidenav-noUser-label" data-testid="variant-label">
+              {ui.blocks.variants.sidenav.noUser}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                label={ui.vibe.sidebar.label}
+                brand={ui.site.header.brand}
+                links={sidenav}
+                current="item-orders"
+                userName={ui.vibe.sidebar.userName}
+                userEmail={ui.vibe.sidebar.userEmail}
+                width="full"
+                user="hide"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.noUser))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-dense-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="dense"
+          >
+            <Title as={2} size="base" weight="bold" id="sidenav-dense-label" data-testid="variant-label">
+              {ui.blocks.variants.sidenav.dense}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                label={ui.vibe.sidebar.label}
+                brand={ui.site.header.brand}
+                links={sidenav}
+                current="item-orders"
+                userName={ui.vibe.sidebar.userName}
+                userEmail={ui.vibe.sidebar.userEmail}
+                width="full"
+                user="show"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.dense))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/SitemapPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/SitemapPage.tsx
new file mode 100644
index 0000000..be07f79
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/SitemapPage.tsx
@@ -0,0 +1,228 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The sitemap page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SitemapFooter,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+
+const SITEMAP_SIGNUP = { title: ui.vibe.sitemap.signupTitle, label: ui.vibe.sitemap.signupLabel, submit: ui.vibe.sitemap.signupSubmit } as const;
+
+export function SitemapPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.sitemap}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.sitemap}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-columns-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="columns"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-columns-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.columns}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-columns"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="columns"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.columns))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-card-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-card-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.card}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-card"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="card"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-row-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-row-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.row}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-row"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="row"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-newsletter-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="newsletter"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-newsletter-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.newsletter}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-newsletter"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "first" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="columns"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.newsletter))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-status-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="status"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-status-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.status}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-status"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "show" }}
+                layout="columns"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.status))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-compact-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-compact"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="columns"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.compact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/SkeletonPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/SkeletonPage.tsx
new file mode 100644
index 0000000..80a00c7
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/SkeletonPage.tsx
@@ -0,0 +1,154 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The skeleton page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SkeletonLayout,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Line,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+
+export function SkeletonPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="dashboard"
+            >
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.skeleton}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.skeleton}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-cards-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="skeleton-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.skeleton.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-cards"
+                title={ui.vibe.skeleton.title}
+                label={ui.vibe.skeleton.label}
+                lines={placeholders}
+                shape="cards"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-list-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="skeleton-list-label" data-testid="variant-label">
+              {ui.blocks.variants.skeleton.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-list"
+                title={ui.vibe.skeleton.title}
+                label={ui.vibe.skeleton.label}
+                lines={placeholders}
+                shape="list"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-article-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="article"
+          >
+            <Title as={2} size="base" weight="bold" id="skeleton-article-label" data-testid="variant-label">
+              {ui.blocks.variants.skeleton.article}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-article"
+                title={ui.vibe.skeleton.title}
+                label={ui.vibe.skeleton.label}
+                lines={placeholders}
+                shape="article"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.article))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-muted-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="skeleton-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.skeleton.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-muted"
+                title={ui.vibe.skeleton.title}
+                label={ui.vibe.skeleton.label}
+                lines={placeholders}
+                shape="cards"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/SlotsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/SlotsPage.tsx
new file mode 100644
index 0000000..5a44885
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/SlotsPage.tsx
@@ -0,0 +1,156 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The slots page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SlotBoard,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Day,
+  type Zone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+export function SlotsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.slots}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.slots}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="slots-split-label"
+            data-testid="variant"
+            data-block="slots"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="slots-split-label" data-testid="variant-label">
+              {ui.blocks.variants.slots.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SlotBoard
+                id="slots-split"
+                title={ui.commerce.slots.title}
+                lead={ui.commerce.slots.lead}
+                days={days}
+                empty={ui.empty.days}
+                zone={zones.find((i) => i.id === "zone-central")!}
+                labels={ui.commerce.slots}
+                layout="split"
+                item="card"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="slots-plain-label"
+            data-testid="variant"
+            data-block="slots"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="slots-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.slots.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SlotBoard
+                id="slots-plain"
+                title={ui.commerce.slots.title}
+                lead={ui.commerce.slots.lead}
+                days={days}
+                empty={ui.empty.days}
+                zone={zones.find((i) => i.id === "zone-central")!}
+                labels={ui.commerce.slots}
+                layout="split"
+                item="plain"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="slots-stacked-label"
+            data-testid="variant"
+            data-block="slots"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="slots-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.slots.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SlotBoard
+                id="slots-stacked"
+                title={ui.commerce.slots.title}
+                lead={ui.commerce.slots.lead}
+                days={days}
+                empty={ui.empty.days}
+                zone={zones.find((i) => i.id === "zone-central")!}
+                labels={ui.commerce.slots}
+                layout="stacked"
+                item="card"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.stacked))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/StatsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/StatsPage.tsx
new file mode 100644
index 0000000..9f09998
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/StatsPage.tsx
@@ -0,0 +1,296 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The stats page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StatsBand,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+
+export function StatsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.stats}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.stats}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-plain4-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="plain4"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-plain4-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.plain4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-plain4"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="none"
+                item="plain"
+                align="center"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.plain4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-panel-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="panel"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-panel-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.panel}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-panel"
+                title=""
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="panel"
+                item="plain"
+                align="center"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.panel))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-stack-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="stack"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-stack-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.stack}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-stack"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="stack"
+                surface="none"
+                item="plain"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.stack))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-image-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="image"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-image-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.image}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-image"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="image"
+                item="plain"
+                align="center"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.image))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-cards-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-cards"
+                title={ui.marketing.stats.title}
+                stats={[stats?.[0], stats?.[1], stats?.[2]]}
+                empty={ui.marketing.stats.empty}
+                cols="3"
+                layout="row"
+                surface="none"
+                item="card"
+                align="center"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-icons-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.icons}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-icons"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="none"
+                item="icon"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-muted2-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="muted2"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-muted2-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.muted2}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-muted2"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="2"
+                layout="row"
+                surface="none"
+                item="plain"
+                align="center"
+                tone="muted"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.muted2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-cardsCompact-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="cardsCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-cardsCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.cardsCompact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-cardsCompact"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="none"
+                item="card"
+                align="center"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cardsCompact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/StepperPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/StepperPage.tsx
new file mode 100644
index 0000000..492658a
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/StepperPage.tsx
@@ -0,0 +1,170 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The stepper page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Stepper,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+
+export function StepperPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="onboarding"
+            >
+              {ui.blocks.themes.onboarding.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.stepper}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.stepper}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-horizontal-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="horizontal"
+          >
+            <Title as={2} size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+              {ui.blocks.variants.stepper.horizontal}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-horizontal"
+                title={ui.onboarding.stepper.title}
+                steps={steps}
+                current={2}
+                stepLabel={ui.onboarding.stepper.stepLabel}
+                back={ui.onboarding.stepper.back}
+                next={ui.onboarding.stepper.next}
+                layout="horizontal"
+                marker="number"
+                summary="show"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-vertical-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="vertical"
+          >
+            <Title as={2} size="base" weight="bold" id="stepper-vertical-label" data-testid="variant-label">
+              {ui.blocks.variants.stepper.vertical}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-vertical"
+                title={ui.onboarding.stepper.title}
+                steps={steps}
+                current={2}
+                stepLabel={ui.onboarding.stepper.stepLabel}
+                back={ui.onboarding.stepper.back}
+                next={ui.onboarding.stepper.next}
+                layout="vertical"
+                marker="number"
+                summary="show"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-icons-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="stepper-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.stepper.icons}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-icons"
+                title={ui.onboarding.stepper.title}
+                steps={steps}
+                current={2}
+                stepLabel={ui.onboarding.stepper.stepLabel}
+                back={ui.onboarding.stepper.back}
+                next={ui.onboarding.stepper.next}
+                layout="horizontal"
+                marker="icon"
+                summary="show"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-bare-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="bare"
+          >
+            <Title as={2} size="base" weight="bold" id="stepper-bare-label" data-testid="variant-label">
+              {ui.blocks.variants.stepper.bare}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-bare"
+                title={ui.onboarding.stepper.title}
+                steps={steps}
+                current={2}
+                stepLabel={ui.onboarding.stepper.stepLabel}
+                back={ui.onboarding.stepper.back}
+                next={ui.onboarding.stepper.next}
+                layout="vertical"
+                marker="icon"
+                summary="hide"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.bare))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/StepsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/StepsPage.tsx
new file mode 100644
index 0000000..853d252
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/StepsPage.tsx
@@ -0,0 +1,220 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The steps page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StepsList,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+
+export function StepsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.steps}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.steps}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-row-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-row-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.row}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-row"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="row"
+                marker="number"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-rowIcons-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="rowIcons"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-rowIcons-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.rowIcons}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-rowIcons"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="row"
+                marker="icon"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-column-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="column"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-column-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.column}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-column"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="column"
+                marker="number"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-centered-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.centered}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-centered"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="row"
+                marker="number"
+                align="center"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-columnIcons-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="columnIcons"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-columnIcons-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.columnIcons}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-columnIcons"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="column"
+                marker="icon"
+                align="start"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.columnIcons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-compact-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.compact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-compact"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="row"
+                marker="number"
+                align="start"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.compact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/StickyPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/StickyPage.tsx
new file mode 100644
index 0000000..78a7625
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/StickyPage.tsx
@@ -0,0 +1,166 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The sticky page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureSticky,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function StickyPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.sticky}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.sticky}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-end-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="end"
+          >
+            <Title as={2} size="base" weight="bold" id="sticky-end-label" data-testid="variant-label">
+              {ui.blocks.variants.sticky.end}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-end"
+                title={ui.vibe.sticky.title}
+                features={features}
+                empty={ui.empty.features}
+                active="feature-clear"
+                mediaSide="end"
+                item="plain"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-start-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="start"
+          >
+            <Title as={2} size="base" weight="bold" id="sticky-start-label" data-testid="variant-label">
+              {ui.blocks.variants.sticky.start}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-start"
+                title={ui.vibe.sticky.title}
+                features={features}
+                empty={ui.empty.features}
+                active="feature-clear"
+                mediaSide="start"
+                item="plain"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.start))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-card-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="sticky-card-label" data-testid="variant-label">
+              {ui.blocks.variants.sticky.card}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-card"
+                title={ui.vibe.sticky.title}
+                features={features}
+                empty={ui.empty.features}
+                active="feature-clear"
+                mediaSide="end"
+                item="card"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-muted-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="sticky-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.sticky.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-muted"
+                title={ui.vibe.sticky.title}
+                features={features}
+                empty={ui.empty.features}
+                active="feature-clear"
+                mediaSide="end"
+                item="plain"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/StoreheroPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/StoreheroPage.tsx
new file mode 100644
index 0000000..4e575c1
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/StoreheroPage.tsx
@@ -0,0 +1,182 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The storehero page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoreHero,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+const STOREHERO_ACTIONS = {
+  mode: "two",
+  cta: ui.commerce.storeHero.cta,
+  href: "#/catalog",
+  secondary: ui.commerce.storeHero.secondary,
+  secondaryHref: "#/delivery",
+} as const;
+
+export function StoreheroPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.storehero}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.storehero}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-overlay-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="overlay"
+          >
+            <Title as={2} size="base" weight="bold" id="storehero-overlay-label" data-testid="variant-label">
+              {ui.blocks.variants.storehero.overlay}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-overlay"
+                title={ui.commerce.storeHero.title}
+                lead={ui.commerce.storeHero.lead}
+                badge={ui.commerce.storeHero.badge}
+                perks={perks}
+                card={ui.commerce.storeHero.card}
+                actions={STOREHERO_ACTIONS}
+                layout="overlay"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlay))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-overlayStart-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="overlayStart"
+          >
+            <Title as={2} size="base" weight="bold" id="storehero-overlayStart-label" data-testid="variant-label">
+              {ui.blocks.variants.storehero.overlayStart}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-overlayStart"
+                title={ui.commerce.storeHero.title}
+                lead={ui.commerce.storeHero.lead}
+                badge={ui.commerce.storeHero.badge}
+                perks={perks}
+                card={ui.commerce.storeHero.card}
+                actions={STOREHERO_ACTIONS}
+                layout="overlay"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlayStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-backdrop-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="backdrop"
+          >
+            <Title as={2} size="base" weight="bold" id="storehero-backdrop-label" data-testid="variant-label">
+              {ui.blocks.variants.storehero.backdrop}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-backdrop"
+                title={ui.commerce.storeHero.title}
+                lead={ui.commerce.storeHero.lead}
+                badge={ui.commerce.storeHero.badge}
+                perks={perks}
+                card={ui.commerce.storeHero.card}
+                actions={STOREHERO_ACTIONS}
+                layout="backdrop"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.backdrop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-muted-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="storehero-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.storehero.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-muted"
+                title={ui.commerce.storeHero.title}
+                lead={ui.commerce.storeHero.lead}
+                badge={ui.commerce.storeHero.badge}
+                perks={perks}
+                card={ui.commerce.storeHero.card}
+                actions={{ ...STOREHERO_ACTIONS, mode: "one" }}
+                layout="overlay"
+                mediaSide="end"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/StorytabsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/StorytabsPage.tsx
new file mode 100644
index 0000000..1d2919c
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/StorytabsPage.tsx
@@ -0,0 +1,137 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The storytabs page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoryTabs,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+
+export function StorytabsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.storytabs}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.storytabs}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storytabs-yearTabs-label"
+            data-testid="variant"
+            data-block="storytabs"
+            data-variant="yearTabs"
+          >
+            <Title as={2} size="base" weight="bold" id="storytabs-yearTabs-label" data-testid="variant-label">
+              {ui.blocks.variants.storytabs.yearTabs}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoryTabs
+                id="storytabs-yearTabs"
+                title={ui.company.storyTabs.title}
+                lead={ui.company.storyTabs.lead}
+                badge={ui.company.storyTabs.badge}
+                steps={milestones}
+                empty={ui.empty.milestones}
+                active="milestone-runtimes"
+                labels={ui.company.storyTabs.labels}
+                layout="years"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storytabs-carouselSplit-label"
+            data-testid="variant"
+            data-block="storytabs"
+            data-variant="carouselSplit"
+          >
+            <Title as={2} size="base" weight="bold" id="storytabs-carouselSplit-label" data-testid="variant-label">
+              {ui.blocks.variants.storytabs.carouselSplit}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoryTabs
+                id="storytabs-carouselSplit"
+                title={ui.company.storyTabs.title}
+                lead={ui.company.storyTabs.lead}
+                badge={ui.company.storyTabs.badge}
+                steps={milestones}
+                empty={ui.empty.milestones}
+                active="milestone-runtimes"
+                labels={ui.company.storyTabs.labels}
+                layout="carousel"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.carouselSplit))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storytabs-yearTabsMuted-label"
+            data-testid="variant"
+            data-block="storytabs"
+            data-variant="yearTabsMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="storytabs-yearTabsMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.storytabs.yearTabsMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoryTabs
+                id="storytabs-yearTabsMuted"
+                title={ui.company.storyTabs.title}
+                lead={ui.company.storyTabs.lead}
+                badge={ui.company.storyTabs.badge}
+                steps={milestones}
+                empty={ui.empty.milestones}
+                active="milestone-runtimes"
+                labels={ui.company.storyTabs.labels}
+                layout="years"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabsMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/SummaryPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/SummaryPage.tsx
new file mode 100644
index 0000000..cb081b0
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/SummaryPage.tsx
@@ -0,0 +1,176 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The summary page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  OrderSummary,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+
+export function SummaryPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.summary}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.summary}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-card-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="summary-card-label" data-testid="variant-label">
+              {ui.blocks.variants.summary.card}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-card"
+                title={ui.commerce.summary.title}
+                rows={summary}
+                empty={ui.empty.summary}
+                labels={ui.commerce.summary}
+                layout="card"
+                cta="show"
+                note="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-plain-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="summary-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.summary.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-plain"
+                title={ui.commerce.summary.title}
+                rows={summary}
+                empty={ui.empty.summary}
+                labels={ui.commerce.summary}
+                layout="plain"
+                cta="show"
+                note="hide"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-noCta-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="noCta"
+          >
+            <Title as={2} size="base" weight="bold" id="summary-noCta-label" data-testid="variant-label">
+              {ui.blocks.variants.summary.noCta}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-noCta"
+                title={ui.commerce.summary.title}
+                rows={summary}
+                empty={ui.empty.summary}
+                labels={ui.commerce.summary}
+                layout="card"
+                cta="hide"
+                note="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.noCta))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-muted-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="summary-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.summary.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-muted"
+                title={ui.commerce.summary.title}
+                rows={summary}
+                empty={ui.empty.summary}
+                labels={ui.commerce.summary}
+                layout="card"
+                cta="show"
+                note="show"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/TeamPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/TeamPage.tsx
new file mode 100644
index 0000000..bc60a86
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/TeamPage.tsx
@@ -0,0 +1,234 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The team page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TeamGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Member,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+
+export function TeamPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.team}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.team}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-cards4-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="cards4"
+          >
+            <Title as={2} size="base" weight="bold" id="team-cards4-label" data-testid="variant-label">
+              {ui.blocks.variants.team.cards4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-cards4"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="cards"
+                cols="1-4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-cards3-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="cards3"
+          >
+            <Title as={2} size="base" weight="bold" id="team-cards3-label" data-testid="variant-label">
+              {ui.blocks.variants.team.cards3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-cards3"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="cards"
+                cols="1-3"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-minimal-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="team-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.team.minimal}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-minimal"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="minimal"
+                cols="1-4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.minimal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-detailed-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="detailed"
+          >
+            <Title as={2} size="base" weight="bold" id="team-detailed-label" data-testid="variant-label">
+              {ui.blocks.variants.team.detailed}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-detailed"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="detailed"
+                cols="1-3"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.detailed))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-list-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="team-list-label" data-testid="variant-label">
+              {ui.blocks.variants.team.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-list"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="list"
+                cols="1-4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-directory-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="directory"
+          >
+            <Title as={2} size="base" weight="bold" id="team-directory-label" data-testid="variant-label">
+              {ui.blocks.variants.team.directory}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-directory"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="directory"
+                cols="1-4"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.directory))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/TemplatesPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/TemplatesPage.tsx
new file mode 100644
index 0000000..f21cab0
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/TemplatesPage.tsx
@@ -0,0 +1,180 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The templates page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TemplateGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Filter,
+  type Template,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+const TEMPLATES_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "views": "metadata.views.value|compact",
+  "likes": "metadata.likes.value|compact",
+  "topic": "metadata.topic.value",
+} as const;
+const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+
+export function TemplatesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.templates}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.templates}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-grid4-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="grid4"
+          >
+            <Title as={2} size="base" weight="bold" id="templates-grid4-label" data-testid="variant-label">
+              {ui.blocks.variants.templates.grid4}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-grid4"
+                title={ui.vibe.templates.title}
+                templates={templates}
+                filters={templateFilters}
+                labels={ui.vibe.templates}
+                browseHref="#/"
+                empty={ui.empty.templates}
+                cols="1-4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-grid3-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="templates-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.templates.grid3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-grid3"
+                title={ui.vibe.templates.title}
+                templates={templates}
+                filters={templateFilters}
+                labels={ui.vibe.templates}
+                browseHref="#/"
+                empty={ui.empty.templates}
+                cols="1-3"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-muted-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="templates-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.templates.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-muted"
+                title={ui.vibe.templates.title}
+                templates={templates}
+                filters={templateFilters}
+                labels={ui.vibe.templates}
+                browseHref="#/"
+                empty={ui.empty.templates}
+                cols="1-4"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.muted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-roomy-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="roomy"
+          >
+            <Title as={2} size="base" weight="bold" id="templates-roomy-label" data-testid="variant-label">
+              {ui.blocks.variants.templates.roomy}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-roomy"
+                title={ui.vibe.templates.title}
+                templates={templates}
+                filters={templateFilters}
+                labels={ui.vibe.templates}
+                browseHref="#/"
+                empty={ui.empty.templates}
+                cols="1-4"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.roomy))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/TestimonialsPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/TestimonialsPage.tsx
new file mode 100644
index 0000000..25cc79b
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/TestimonialsPage.tsx
@@ -0,0 +1,350 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The testimonials page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TestimonialGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Quote,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+const TESTIMONIALS_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+
+export function TestimonialsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.testimonials}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.testimonials}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-grid3-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.grid3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-grid3"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="grid"
+                cols="1-3"
+                item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-masonry-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="masonry"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-masonry-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.masonry}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-masonry"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="masonry"
+                cols="1-3"
+                item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-strip-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="strip"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-strip-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.strip}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-strip"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="strip"
+                cols="1-3"
+                item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-social-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="social"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-social-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.social}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-social"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="masonry"
+                cols="1-3"
+                item={{ kind: "social", avatar: "image", rating: "hide", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.social))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-featured-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="featured"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-featured-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.featured}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-featured"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="single"
+                cols="1-3"
+                item={{ kind: "plain", avatar: "image", rating: "hide", mark: "icon" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-grid2-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.grid2}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-grid2"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="grid"
+                cols="1-2"
+                item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-single-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="single"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-single-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.single}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-single"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="single"
+                cols="1-3"
+                item={{ kind: "plain", avatar: "image", rating: "hide", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-stack-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="stack"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-stack-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.stack}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-stack"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="stack"
+                cols="1-3"
+                item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.stack))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-plain-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-plain"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="grid"
+                cols="1-3"
+                item={{ kind: "plain", avatar: "none", rating: "show", mark: "none" }}
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-noRating-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="noRating"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-noRating-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.noRating}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-noRating"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="grid"
+                cols="1-3"
+                item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.noRating))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/TimelinePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/TimelinePage.tsx
new file mode 100644
index 0000000..fbe6c6a
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/TimelinePage.tsx
@@ -0,0 +1,157 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The timeline page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MilestoneTimeline,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+
+export function TimelinePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.timeline}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.timeline}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-split-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="timeline-split-label" data-testid="variant-label">
+              {ui.blocks.variants.timeline.split}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-split"
+                title={ui.company.timeline.title}
+                lead={ui.company.timeline.lead}
+                milestones={milestones}
+                empty={ui.empty.milestones}
+                layout="split"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-stacked-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="timeline-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.timeline.stacked}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-stacked"
+                title={ui.company.timeline.title}
+                lead={ui.company.timeline.lead}
+                milestones={milestones}
+                empty={ui.empty.milestones}
+                layout="stacked"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-row-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="timeline-row-label" data-testid="variant-label">
+              {ui.blocks.variants.timeline.row}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-row"
+                title={ui.company.timeline.title}
+                lead={ui.company.timeline.lead}
+                milestones={milestones}
+                empty={ui.empty.milestones}
+                layout="row"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-rowMuted-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="rowMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="timeline-rowMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.timeline.rowMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-rowMuted"
+                title={ui.company.timeline.title}
+                lead={ui.company.timeline.lead}
+                milestones={milestones}
+                empty={ui.empty.milestones}
+                layout="row"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.rowMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/TourPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/TourPage.tsx
new file mode 100644
index 0000000..987d099
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/TourPage.tsx
@@ -0,0 +1,162 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The tour page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  TourCallout,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function TourPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="onboarding"
+            >
+              {ui.blocks.themes.onboarding.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.tour}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.tour}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-below-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="below"
+          >
+            <Title as={2} size="base" weight="bold" id="tour-below-label" data-testid="variant-label">
+              {ui.blocks.variants.tour.below}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-below"
+                title={ui.vibe.tour.title}
+                text={ui.vibe.tour.text}
+                target={ui.vibe.tour.target}
+                position={ui.vibe.tour.position}
+                skip={ui.vibe.tour.skip}
+                next={ui.vibe.tour.next}
+                placement="below"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-above-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="above"
+          >
+            <Title as={2} size="base" weight="bold" id="tour-above-label" data-testid="variant-label">
+              {ui.blocks.variants.tour.above}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-above"
+                title={ui.vibe.tour.title}
+                text={ui.vibe.tour.text}
+                target={ui.vibe.tour.target}
+                position={ui.vibe.tour.position}
+                skip={ui.vibe.tour.skip}
+                next={ui.vibe.tour.next}
+                placement="above"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-end-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="end"
+          >
+            <Title as={2} size="base" weight="bold" id="tour-end-label" data-testid="variant-label">
+              {ui.blocks.variants.tour.end}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-end"
+                title={ui.vibe.tour.title}
+                text={ui.vibe.tour.text}
+                target={ui.vibe.tour.target}
+                position={ui.vibe.tour.position}
+                skip={ui.vibe.tour.skip}
+                next={ui.vibe.tour.next}
+                placement="end"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-muted-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="tour-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.tour.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-muted"
+                title={ui.vibe.tour.title}
+                text={ui.vibe.tour.text}
+                target={ui.vibe.tour.target}
+                position={ui.vibe.tour.position}
+                skip={ui.vibe.tour.skip}
+                next={ui.vibe.tour.next}
+                placement="below"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/UsagePage.tsx b/apps/host-react/xgen/screens/BlocksScreen/UsagePage.tsx
new file mode 100644
index 0000000..0574805
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/UsagePage.tsx
@@ -0,0 +1,169 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The usage page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  UsageCalculator,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const USAGE_SLIDER = { min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit } as const;
+const USAGE_PRICE = { rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate } as const;
+
+export function UsagePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.usage}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.usage}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-card-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="usage-card-label" data-testid="variant-label">
+              {ui.blocks.variants.usage.card}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-card"
+                title={ui.vibe.usage.title}
+                text={ui.vibe.usage.text}
+                usage={5000}
+                slider={USAGE_SLIDER}
+                price={USAGE_PRICE}
+                cta={ui.vibe.usage.cta}
+                href="#/"
+                layout="card"
+                ends="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-plain-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="usage-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.usage.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-plain"
+                title={ui.vibe.usage.title}
+                text={ui.vibe.usage.text}
+                usage={5000}
+                slider={USAGE_SLIDER}
+                price={USAGE_PRICE}
+                cta={ui.vibe.usage.cta}
+                href="#/"
+                layout="plain"
+                ends="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-noEnds-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="noEnds"
+          >
+            <Title as={2} size="base" weight="bold" id="usage-noEnds-label" data-testid="variant-label">
+              {ui.blocks.variants.usage.noEnds}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-noEnds"
+                title={ui.vibe.usage.title}
+                text={ui.vibe.usage.text}
+                usage={5000}
+                slider={USAGE_SLIDER}
+                price={USAGE_PRICE}
+                cta={ui.vibe.usage.cta}
+                href="#/"
+                layout="card"
+                ends="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.noEnds))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-muted-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="usage-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.usage.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-muted"
+                title={ui.vibe.usage.title}
+                text={ui.vibe.usage.text}
+                usage={5000}
+                slider={USAGE_SLIDER}
+                price={USAGE_PRICE}
+                cta={ui.vibe.usage.cta}
+                href="#/"
+                layout="card"
+                ends="show"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/UspPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/UspPage.tsx
new file mode 100644
index 0000000..da142ee
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/UspPage.tsx
@@ -0,0 +1,179 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The usp page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+export function UspPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.usp}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.usp}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-strip-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="strip"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-strip-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.strip}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-strip"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="strip"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-cards-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-cards"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="cards"
+                tone="default"
+                density="default"
+                title={ui.commerce.usp.title}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-stripCompact-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="stripCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-stripCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.stripCompact}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-stripCompact"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="strip"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.stripCompact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-bar-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.bar}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-bar"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="bar"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-barMuted-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="barMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-barMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.barMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-barMuted"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="bar"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.barMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/VideomodalPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/VideomodalPage.tsx
new file mode 100644
index 0000000..bc99895
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/VideomodalPage.tsx
@@ -0,0 +1,170 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The videomodal page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  VideoModal,
+  tpl,
+  uniqLabel,
+  type Chapter,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+
+export function VideomodalPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="onboarding"
+            >
+              {ui.blocks.themes.onboarding.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.videomodal}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.videomodal}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-default-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="default"
+          >
+            <Title as={2} size="base" weight="bold" id="videomodal-default-label" data-testid="variant-label">
+              {ui.blocks.variants.videomodal.default}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-default"
+                title={ui.vibe.modal.title}
+                text={ui.vibe.modal.text}
+                close={ui.vibe.modal.close}
+                play={ui.vibe.modal.play}
+                chaptersTitle={ui.vibe.modal.chapters}
+                chapters={chapters}
+                size="default"
+                outline="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-wide-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="wide"
+          >
+            <Title as={2} size="base" weight="bold" id="videomodal-wide-label" data-testid="variant-label">
+              {ui.blocks.variants.videomodal.wide}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-wide"
+                title={ui.vibe.modal.title}
+                text={ui.vibe.modal.text}
+                close={ui.vibe.modal.close}
+                play={ui.vibe.modal.play}
+                chaptersTitle={ui.vibe.modal.chapters}
+                chapters={chapters}
+                size="wide"
+                outline="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.wide))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-chapters-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="chapters"
+          >
+            <Title as={2} size="base" weight="bold" id="videomodal-chapters-label" data-testid="variant-label">
+              {ui.blocks.variants.videomodal.chapters}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-chapters"
+                title={ui.vibe.modal.title}
+                text={ui.vibe.modal.text}
+                close={ui.vibe.modal.close}
+                play={ui.vibe.modal.play}
+                chaptersTitle={ui.vibe.modal.chapters}
+                chapters={chapters}
+                size="default"
+                outline="chapters"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-muted-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="videomodal-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.videomodal.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-muted"
+                title={ui.vibe.modal.title}
+                text={ui.vibe.modal.text}
+                close={ui.vibe.modal.close}
+                play={ui.vibe.modal.play}
+                chaptersTitle={ui.vibe.modal.chapters}
+                chapters={chapters}
+                size="default"
+                outline="none"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/VideosPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/VideosPage.tsx
new file mode 100644
index 0000000..4f1aa79
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/VideosPage.tsx
@@ -0,0 +1,180 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The videos page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type Quote,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function VideosPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="marketing"
+            >
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.videos}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.videos}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-grid3-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="videos-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.videos.grid3}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-grid3"
+                title={ui.vibe.videos.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                playLabel={ui.vibe.videos.play}
+                byLine={ui.testimonials.byLine}
+                cols="1-3"
+                caption="below"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-grid2-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="videos-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.videos.grid2}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-grid2"
+                title={ui.vibe.videos.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                playLabel={ui.vibe.videos.play}
+                byLine={ui.testimonials.byLine}
+                cols="1-2"
+                caption="below"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-overlay-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="overlay"
+          >
+            <Title as={2} size="base" weight="bold" id="videos-overlay-label" data-testid="variant-label">
+              {ui.blocks.variants.videos.overlay}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-overlay"
+                title={ui.vibe.videos.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                playLabel={ui.vibe.videos.play}
+                byLine={ui.testimonials.byLine}
+                cols="1-3"
+                caption="overlay"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-muted-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="videos-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.videos.muted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-muted"
+                title={ui.vibe.videos.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                playLabel={ui.vibe.videos.play}
+                byLine={ui.testimonials.byLine}
+                cols="1-3"
+                caption="below"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/WizardPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/WizardPage.tsx
new file mode 100644
index 0000000..c4a2df5
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/WizardPage.tsx
@@ -0,0 +1,164 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The wizard page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SignupWizard,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type WizardStep,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+const WIZARD_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "icon": "metadata.icon.value",
+  "fieldA": "metadata.fieldA.value",
+  "fieldB": "metadata.fieldB.value",
+} as const;
+
+const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+
+export function WizardPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+              {ui.blocks.themes.account.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.wizard}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.wizard}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-bar-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="wizard-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.wizard.bar}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-bar"
+                title={ui.vibe.wizard.title}
+                steps={wizard}
+                labels={ui.vibe.wizard.labels}
+                current={1}
+                progress="bar"
+                layout="card"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-list-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="wizard-list-label" data-testid="variant-label">
+              {ui.blocks.variants.wizard.list}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-list"
+                title={ui.vibe.wizard.title}
+                steps={wizard}
+                labels={ui.vibe.wizard.labels}
+                current={1}
+                progress="list"
+                layout="card"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-plain-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="wizard-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.wizard.plain}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-plain"
+                title={ui.vibe.wizard.title}
+                steps={wizard}
+                labels={ui.vibe.wizard.labels}
+                current={1}
+                progress="bar"
+                layout="plain"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-second-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="second"
+          >
+            <Title as={2} size="base" weight="bold" id="wizard-second-label" data-testid="variant-label">
+              {ui.blocks.variants.wizard.second}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-second"
+                title={ui.vibe.wizard.title}
+                steps={wizard}
+                labels={ui.vibe.wizard.labels}
+                current={2}
+                progress="list"
+                layout="plain"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.second))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/BlocksScreen/ZonesPage.tsx b/apps/host-react/xgen/screens/BlocksScreen/ZonesPage.tsx
new file mode 100644
index 0000000..acd455c
--- /dev/null
+++ b/apps/host-react/xgen/screens/BlocksScreen/ZonesPage.tsx
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The zones page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  ZoneTable,
+  tpl,
+  uniqLabel,
+  type Zone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+export function ZonesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text
+              size="sm"
+              className="font-medium text-muted-foreground"
+              data-testid="block-theme"
+              data-theme-id="commerce"
+            >
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.zones}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.zones}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="zones-table-label"
+            data-testid="variant"
+            data-block="zones"
+            data-variant="table"
+          >
+            <Title as={2} size="base" weight="bold" id="zones-table-label" data-testid="variant-label">
+              {ui.blocks.variants.zones.table}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ZoneTable
+                id="zones-table"
+                title={ui.commerce.zones.title}
+                lead={ui.commerce.zones.lead}
+                zones={zones}
+                empty={ui.empty.zones}
+                labels={ui.commerce.zones}
+                layout="table"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="zones-cards-label"
+            data-testid="variant"
+            data-block="zones"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="zones-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.zones.cards}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ZoneTable
+                id="zones-cards"
+                title={ui.commerce.zones.title}
+                lead={ui.commerce.zones.lead}
+                zones={zones}
+                empty={ui.empty.zones}
+                labels={ui.commerce.zones}
+                layout="cards"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="zones-tableMuted-label"
+            data-testid="variant"
+            data-block="zones"
+            data-variant="tableMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="zones-tableMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.zones.tableMuted}
+            </Title>
+            <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ZoneTable
+                id="zones-tableMuted"
+                title={ui.commerce.zones.title}
+                lead={ui.commerce.zones.lead}
+                zones={zones}
+                empty={ui.empty.zones}
+                labels={ui.commerce.zones}
+                layout="table"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.tableMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen.tsx b/apps/host-react/xgen/screens/CatalogScreen.tsx
new file mode 100644
index 0000000..cc7140d
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen.tsx
@@ -0,0 +1,350 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+/**
+ * The catalog: the blocks of the kit by section and category (Marketing, Content, Promo, Support, Commerce, App
+ * and dashboard), one page per category with every variant of its blocks, and whole pages composed of blocks.
+ * Built from the catalog tree and the blocks.
+ */
+
+import { Block } from "@ui8kit/react-ui";
+import { MarketingNavigationPage } from "./CatalogScreen/MarketingNavigationPage";
+import { MarketingHeroPage } from "./CatalogScreen/MarketingHeroPage";
+import { MarketingHeroSplitPage } from "./CatalogScreen/MarketingHeroSplitPage";
+import { MarketingPageHeadPage } from "./CatalogScreen/MarketingPageHeadPage";
+import { MarketingPageTrailPage } from "./CatalogScreen/MarketingPageTrailPage";
+import { MarketingFeaturesPage } from "./CatalogScreen/MarketingFeaturesPage";
+import { MarketingFeaturesSplitPage } from "./CatalogScreen/MarketingFeaturesSplitPage";
+import { MarketingFeatureCardsPage } from "./CatalogScreen/MarketingFeatureCardsPage";
+import { MarketingMediaListPage } from "./CatalogScreen/MarketingMediaListPage";
+import { MarketingShowcasesPage } from "./CatalogScreen/MarketingShowcasesPage";
+import { MarketingHowItWorksPage } from "./CatalogScreen/MarketingHowItWorksPage";
+import { MarketingProofPage } from "./CatalogScreen/MarketingProofPage";
+import { MarketingStatsPage } from "./CatalogScreen/MarketingStatsPage";
+import { MarketingTestimonialsPage } from "./CatalogScreen/MarketingTestimonialsPage";
+import { MarketingTestimonialsSplitPage } from "./CatalogScreen/MarketingTestimonialsSplitPage";
+import { MarketingPricingPage } from "./CatalogScreen/MarketingPricingPage";
+import { MarketingPricingToolsPage } from "./CatalogScreen/MarketingPricingToolsPage";
+import { MarketingFaqPage } from "./CatalogScreen/MarketingFaqPage";
+import { MarketingCtaPage } from "./CatalogScreen/MarketingCtaPage";
+import { MarketingCtaProofPage } from "./CatalogScreen/MarketingCtaProofPage";
+import { MarketingTeamPage } from "./CatalogScreen/MarketingTeamPage";
+import { MarketingAboutPage } from "./CatalogScreen/MarketingAboutPage";
+import { MarketingPortfolioPage } from "./CatalogScreen/MarketingPortfolioPage";
+import { MarketingCareersPage } from "./CatalogScreen/MarketingCareersPage";
+import { MarketingGalleryPage } from "./CatalogScreen/MarketingGalleryPage";
+import { MarketingFooterPage } from "./CatalogScreen/MarketingFooterPage";
+import { MarketingFooterSplitPage } from "./CatalogScreen/MarketingFooterSplitPage";
+import { ContentBlogPage } from "./CatalogScreen/ContentBlogPage";
+import { ContentPostShowcasePage } from "./CatalogScreen/ContentPostShowcasePage";
+import { ContentPostHeaderPage } from "./CatalogScreen/ContentPostHeaderPage";
+import { ContentPostHeaderSplitPage } from "./CatalogScreen/ContentPostHeaderSplitPage";
+import { ContentArticlePage } from "./CatalogScreen/ContentArticlePage";
+import { ContentTimelinePage } from "./CatalogScreen/ContentTimelinePage";
+import { ContentStoryTabsPage } from "./CatalogScreen/ContentStoryTabsPage";
+import { PromoBannersPage } from "./CatalogScreen/PromoBannersPage";
+import { PromoNewsletterPage } from "./CatalogScreen/PromoNewsletterPage";
+import { SupportContactPage } from "./CatalogScreen/SupportContactPage";
+import { SupportStatesPage } from "./CatalogScreen/SupportStatesPage";
+import { CommerceStorefrontPage } from "./CatalogScreen/CommerceStorefrontPage";
+import { CommerceCategoriesPage } from "./CatalogScreen/CommerceCategoriesPage";
+import { CommerceProductsPage } from "./CatalogScreen/CommerceProductsPage";
+import { CommerceProductPage } from "./CatalogScreen/CommerceProductPage";
+import { CommerceCartPage } from "./CatalogScreen/CommerceCartPage";
+import { CommerceCheckoutPage } from "./CatalogScreen/CommerceCheckoutPage";
+import { CommerceDeliveryPage } from "./CatalogScreen/CommerceDeliveryPage";
+import { CommerceOrdersPage } from "./CatalogScreen/CommerceOrdersPage";
+import { AppShellPage } from "./CatalogScreen/AppShellPage";
+import { AppDashboardShellsPage } from "./CatalogScreen/AppDashboardShellsPage";
+import { AppWidgetsPage } from "./CatalogScreen/AppWidgetsPage";
+import { AppBoardsPage } from "./CatalogScreen/AppBoardsPage";
+import { AppStatesPage } from "./CatalogScreen/AppStatesPage";
+import { AppAuthPage } from "./CatalogScreen/AppAuthPage";
+import { AppAuthPagesPage } from "./CatalogScreen/AppAuthPagesPage";
+import { AppSettingsPage } from "./CatalogScreen/AppSettingsPage";
+import { AppOnboardingPage } from "./CatalogScreen/AppOnboardingPage";
+import { AppGuidancePage } from "./CatalogScreen/AppGuidancePage";
+import { PageSaasLandingPage } from "./CatalogScreen/PageSaasLandingPage";
+import { PageCompanyPage } from "./CatalogScreen/PageCompanyPage";
+import { PagePortfolioPage } from "./CatalogScreen/PagePortfolioPage";
+import { PageStoreHomePage } from "./CatalogScreen/PageStoreHomePage";
+import { PageStoreHome2Page } from "./CatalogScreen/PageStoreHome2Page";
+import { PageStoreCatalogPage } from "./CatalogScreen/PageStoreCatalogPage";
+import { PageProductDetailPage } from "./CatalogScreen/PageProductDetailPage";
+import { PageCartPage } from "./CatalogScreen/PageCartPage";
+import { PageCheckoutPage } from "./CatalogScreen/PageCheckoutPage";
+import { PageShellClassicPage } from "./CatalogScreen/PageShellClassicPage";
+import { PageShellInsetPage } from "./CatalogScreen/PageShellInsetPage";
+import { PageShellRailPage } from "./CatalogScreen/PageShellRailPage";
+import { PageShellRailFooterPage } from "./CatalogScreen/PageShellRailFooterPage";
+import { PageShellCollapsedPage } from "./CatalogScreen/PageShellCollapsedPage";
+import { PageShellTwoLevelPage } from "./CatalogScreen/PageShellTwoLevelPage";
+import { PageShellTwoLevelFullPage } from "./CatalogScreen/PageShellTwoLevelFullPage";
+import { PageShellEndPage } from "./CatalogScreen/PageShellEndPage";
+import { PageShellRailEndPage } from "./CatalogScreen/PageShellRailEndPage";
+import { PageShellTopOnlyPage } from "./CatalogScreen/PageShellTopOnlyPage";
+import { PageShellSideOnlyPage } from "./CatalogScreen/PageShellSideOnlyPage";
+import { PageShellCollapsedEndPage } from "./CatalogScreen/PageShellCollapsedEndPage";
+import { IndexPage } from "./CatalogScreen/IndexPage";
+import { PagesPage } from "./CatalogScreen/PagesPage";
+import { NotfoundPage } from "./CatalogScreen/NotfoundPage";
+import { ScreenHeader } from "./CatalogScreen/ScreenHeader";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ROUTES = [
+  {"path":"","area":"index"},
+  {"path":"pages","area":"pages"},
+  {"path":"marketing-navigation","area":"marketing-navigation"},
+  {"path":"marketing-hero","area":"marketing-hero"},
+  {"path":"marketing-hero-split","area":"marketing-hero-split"},
+  {"path":"marketing-page-head","area":"marketing-page-head"},
+  {"path":"marketing-page-trail","area":"marketing-page-trail"},
+  {"path":"marketing-features","area":"marketing-features"},
+  {"path":"marketing-features-split","area":"marketing-features-split"},
+  {"path":"marketing-feature-cards","area":"marketing-feature-cards"},
+  {"path":"marketing-media-list","area":"marketing-media-list"},
+  {"path":"marketing-showcases","area":"marketing-showcases"},
+  {"path":"marketing-how-it-works","area":"marketing-how-it-works"},
+  {"path":"marketing-proof","area":"marketing-proof"},
+  {"path":"marketing-stats","area":"marketing-stats"},
+  {"path":"marketing-testimonials","area":"marketing-testimonials"},
+  {"path":"marketing-testimonials-split","area":"marketing-testimonials-split"},
+  {"path":"marketing-pricing","area":"marketing-pricing"},
+  {"path":"marketing-pricing-tools","area":"marketing-pricing-tools"},
+  {"path":"marketing-faq","area":"marketing-faq"},
+  {"path":"marketing-cta","area":"marketing-cta"},
+  {"path":"marketing-cta-proof","area":"marketing-cta-proof"},
+  {"path":"marketing-team","area":"marketing-team"},
+  {"path":"marketing-about","area":"marketing-about"},
+  {"path":"marketing-portfolio","area":"marketing-portfolio"},
+  {"path":"marketing-careers","area":"marketing-careers"},
+  {"path":"marketing-gallery","area":"marketing-gallery"},
+  {"path":"marketing-footer","area":"marketing-footer"},
+  {"path":"marketing-footer-split","area":"marketing-footer-split"},
+  {"path":"content-blog","area":"content-blog"},
+  {"path":"content-post-showcase","area":"content-post-showcase"},
+  {"path":"content-post-header","area":"content-post-header"},
+  {"path":"content-post-header-split","area":"content-post-header-split"},
+  {"path":"content-article","area":"content-article"},
+  {"path":"content-timeline","area":"content-timeline"},
+  {"path":"content-story-tabs","area":"content-story-tabs"},
+  {"path":"promo-banners","area":"promo-banners"},
+  {"path":"promo-newsletter","area":"promo-newsletter"},
+  {"path":"support-contact","area":"support-contact"},
+  {"path":"support-states","area":"support-states"},
+  {"path":"commerce-storefront","area":"commerce-storefront"},
+  {"path":"commerce-categories","area":"commerce-categories"},
+  {"path":"commerce-products","area":"commerce-products"},
+  {"path":"commerce-product","area":"commerce-product"},
+  {"path":"commerce-cart","area":"commerce-cart"},
+  {"path":"commerce-checkout","area":"commerce-checkout"},
+  {"path":"commerce-delivery","area":"commerce-delivery"},
+  {"path":"commerce-orders","area":"commerce-orders"},
+  {"path":"app-shell","area":"app-shell"},
+  {"path":"app-dashboard-shells","area":"app-dashboard-shells"},
+  {"path":"app-widgets","area":"app-widgets"},
+  {"path":"app-boards","area":"app-boards"},
+  {"path":"app-states","area":"app-states"},
+  {"path":"app-auth","area":"app-auth"},
+  {"path":"app-auth-pages","area":"app-auth-pages"},
+  {"path":"app-settings","area":"app-settings"},
+  {"path":"app-onboarding","area":"app-onboarding"},
+  {"path":"app-guidance","area":"app-guidance"},
+  {"path":"page-saas-landing","area":"page-saas-landing"},
+  {"path":"page-company","area":"page-company"},
+  {"path":"page-portfolio","area":"page-portfolio"},
+  {"path":"page-store-home","area":"page-store-home"},
+  {"path":"page-store-home-2","area":"page-store-home-2"},
+  {"path":"page-store-catalog","area":"page-store-catalog"},
+  {"path":"page-product-detail","area":"page-product-detail"},
+  {"path":"page-cart","area":"page-cart"},
+  {"path":"page-checkout","area":"page-checkout"},
+  {"path":"page-shell-classic","area":"page-shell-classic"},
+  {"path":"page-shell-inset","area":"page-shell-inset"},
+  {"path":"page-shell-rail","area":"page-shell-rail"},
+  {"path":"page-shell-rail-footer","area":"page-shell-rail-footer"},
+  {"path":"page-shell-collapsed","area":"page-shell-collapsed"},
+  {"path":"page-shell-two-level","area":"page-shell-two-level"},
+  {"path":"page-shell-two-level-full","area":"page-shell-two-level-full"},
+  {"path":"page-shell-end","area":"page-shell-end"},
+  {"path":"page-shell-rail-end","area":"page-shell-rail-end"},
+  {"path":"page-shell-top-only","area":"page-shell-top-only"},
+  {"path":"page-shell-side-only","area":"page-shell-side-only"},
+  {"path":"page-shell-collapsed-end","area":"page-shell-collapsed-end"},
+] as const;
+
+const HOME = { area: "notfound", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function CatalogScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  return (
+    <>
+      <ScreenHeader />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "index" ? (
+          <IndexPage />
+        ) : route.area === "pages" ? (
+          <PagesPage />
+        ) : route.area === "marketing-navigation" ? (
+          <MarketingNavigationPage />
+        ) : route.area === "marketing-hero" ? (
+          <MarketingHeroPage />
+        ) : route.area === "marketing-hero-split" ? (
+          <MarketingHeroSplitPage />
+        ) : route.area === "marketing-page-head" ? (
+          <MarketingPageHeadPage />
+        ) : route.area === "marketing-page-trail" ? (
+          <MarketingPageTrailPage />
+        ) : route.area === "marketing-features" ? (
+          <MarketingFeaturesPage />
+        ) : route.area === "marketing-features-split" ? (
+          <MarketingFeaturesSplitPage />
+        ) : route.area === "marketing-feature-cards" ? (
+          <MarketingFeatureCardsPage />
+        ) : route.area === "marketing-media-list" ? (
+          <MarketingMediaListPage />
+        ) : route.area === "marketing-showcases" ? (
+          <MarketingShowcasesPage />
+        ) : route.area === "marketing-how-it-works" ? (
+          <MarketingHowItWorksPage />
+        ) : route.area === "marketing-proof" ? (
+          <MarketingProofPage />
+        ) : route.area === "marketing-stats" ? (
+          <MarketingStatsPage />
+        ) : route.area === "marketing-testimonials" ? (
+          <MarketingTestimonialsPage />
+        ) : route.area === "marketing-testimonials-split" ? (
+          <MarketingTestimonialsSplitPage />
+        ) : route.area === "marketing-pricing" ? (
+          <MarketingPricingPage />
+        ) : route.area === "marketing-pricing-tools" ? (
+          <MarketingPricingToolsPage />
+        ) : route.area === "marketing-faq" ? (
+          <MarketingFaqPage />
+        ) : route.area === "marketing-cta" ? (
+          <MarketingCtaPage />
+        ) : route.area === "marketing-cta-proof" ? (
+          <MarketingCtaProofPage />
+        ) : route.area === "marketing-team" ? (
+          <MarketingTeamPage />
+        ) : route.area === "marketing-about" ? (
+          <MarketingAboutPage />
+        ) : route.area === "marketing-portfolio" ? (
+          <MarketingPortfolioPage />
+        ) : route.area === "marketing-careers" ? (
+          <MarketingCareersPage />
+        ) : route.area === "marketing-gallery" ? (
+          <MarketingGalleryPage />
+        ) : route.area === "marketing-footer" ? (
+          <MarketingFooterPage />
+        ) : route.area === "marketing-footer-split" ? (
+          <MarketingFooterSplitPage />
+        ) : route.area === "content-blog" ? (
+          <ContentBlogPage />
+        ) : route.area === "content-post-showcase" ? (
+          <ContentPostShowcasePage />
+        ) : route.area === "content-post-header" ? (
+          <ContentPostHeaderPage />
+        ) : route.area === "content-post-header-split" ? (
+          <ContentPostHeaderSplitPage />
+        ) : route.area === "content-article" ? (
+          <ContentArticlePage />
+        ) : route.area === "content-timeline" ? (
+          <ContentTimelinePage />
+        ) : route.area === "content-story-tabs" ? (
+          <ContentStoryTabsPage />
+        ) : route.area === "promo-banners" ? (
+          <PromoBannersPage />
+        ) : route.area === "promo-newsletter" ? (
+          <PromoNewsletterPage />
+        ) : route.area === "support-contact" ? (
+          <SupportContactPage />
+        ) : route.area === "support-states" ? (
+          <SupportStatesPage />
+        ) : route.area === "commerce-storefront" ? (
+          <CommerceStorefrontPage />
+        ) : route.area === "commerce-categories" ? (
+          <CommerceCategoriesPage />
+        ) : route.area === "commerce-products" ? (
+          <CommerceProductsPage />
+        ) : route.area === "commerce-product" ? (
+          <CommerceProductPage />
+        ) : route.area === "commerce-cart" ? (
+          <CommerceCartPage />
+        ) : route.area === "commerce-checkout" ? (
+          <CommerceCheckoutPage />
+        ) : route.area === "commerce-delivery" ? (
+          <CommerceDeliveryPage />
+        ) : route.area === "commerce-orders" ? (
+          <CommerceOrdersPage />
+        ) : route.area === "app-shell" ? (
+          <AppShellPage />
+        ) : route.area === "app-dashboard-shells" ? (
+          <AppDashboardShellsPage />
+        ) : route.area === "app-widgets" ? (
+          <AppWidgetsPage />
+        ) : route.area === "app-boards" ? (
+          <AppBoardsPage />
+        ) : route.area === "app-states" ? (
+          <AppStatesPage />
+        ) : route.area === "app-auth" ? (
+          <AppAuthPage />
+        ) : route.area === "app-auth-pages" ? (
+          <AppAuthPagesPage />
+        ) : route.area === "app-settings" ? (
+          <AppSettingsPage />
+        ) : route.area === "app-onboarding" ? (
+          <AppOnboardingPage />
+        ) : route.area === "app-guidance" ? (
+          <AppGuidancePage />
+        ) : route.area === "page-saas-landing" ? (
+          <PageSaasLandingPage />
+        ) : route.area === "page-company" ? (
+          <PageCompanyPage />
+        ) : route.area === "page-portfolio" ? (
+          <PagePortfolioPage />
+        ) : route.area === "page-store-home" ? (
+          <PageStoreHomePage />
+        ) : route.area === "page-store-home-2" ? (
+          <PageStoreHome2Page />
+        ) : route.area === "page-store-catalog" ? (
+          <PageStoreCatalogPage />
+        ) : route.area === "page-product-detail" ? (
+          <PageProductDetailPage />
+        ) : route.area === "page-cart" ? (
+          <PageCartPage />
+        ) : route.area === "page-checkout" ? (
+          <PageCheckoutPage />
+        ) : route.area === "page-shell-classic" ? (
+          <PageShellClassicPage />
+        ) : route.area === "page-shell-inset" ? (
+          <PageShellInsetPage />
+        ) : route.area === "page-shell-rail" ? (
+          <PageShellRailPage />
+        ) : route.area === "page-shell-rail-footer" ? (
+          <PageShellRailFooterPage />
+        ) : route.area === "page-shell-collapsed" ? (
+          <PageShellCollapsedPage />
+        ) : route.area === "page-shell-two-level" ? (
+          <PageShellTwoLevelPage />
+        ) : route.area === "page-shell-two-level-full" ? (
+          <PageShellTwoLevelFullPage />
+        ) : route.area === "page-shell-end" ? (
+          <PageShellEndPage />
+        ) : route.area === "page-shell-rail-end" ? (
+          <PageShellRailEndPage />
+        ) : route.area === "page-shell-top-only" ? (
+          <PageShellTopOnlyPage />
+        ) : route.area === "page-shell-side-only" ? (
+          <PageShellSideOnlyPage />
+        ) : route.area === "page-shell-collapsed-end" ? (
+          <PageShellCollapsedEndPage />
+        ) : (
+          <NotfoundPage />
+        )}
+      </Block>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppAuthPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppAuthPage.tsx
new file mode 100644
index 0000000..fdcab67
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppAuthPage.tsx
@@ -0,0 +1,455 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-auth page of CatalogScreen.
+
+import {
+  AuthCard,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SignupWizard,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type WizardStep,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+const WIZARD_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "icon": "metadata.icon.value",
+  "fieldA": "metadata.fieldA.value",
+  "fieldB": "metadata.fieldB.value",
+} as const;
+
+const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+
+export function AppAuthPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appAuth}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-auth-title"
+            data-testid="catalog-block"
+            data-block="auth"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-auth-title">
+                {ui.blocks.names.auth}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.auth}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-signin-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="signin"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-signin-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.signin}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-signin"
+                    title={ui.auth.signin.title}
+                    text={ui.auth.signin.text}
+                    submit={ui.auth.signin.submit}
+                    switchText={ui.auth.signin.switchText}
+                    switchLink={ui.auth.signin.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signin"
+                    layout="card"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-magic-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="magic"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-magic-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.magic}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-magic"
+                    title={ui.auth.magic.title}
+                    text={ui.auth.magic.text}
+                    submit={ui.auth.magic.submit}
+                    switchText={ui.auth.magic.switchText}
+                    switchLink={ui.auth.magic.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="magic"
+                    layout="card"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.magic))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-socialFirst-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="socialFirst"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-socialFirst-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.socialFirst}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-socialFirst"
+                    title={ui.auth.signin.title}
+                    text={ui.auth.signin.text}
+                    submit={ui.auth.signin.submit}
+                    switchText={ui.auth.signin.switchText}
+                    switchLink={ui.auth.signin.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signin"
+                    layout="card"
+                    social="first"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.socialFirst))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-signup-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="signup"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-signup-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.signup}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-signup"
+                    title={ui.auth.signup.title}
+                    text={ui.auth.signup.text}
+                    submit={ui.auth.signup.submit}
+                    switchText={ui.auth.signup.switchText}
+                    switchLink={ui.auth.signup.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signup"
+                    layout="card"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signup))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-reset-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="reset"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-reset-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.reset}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-reset"
+                    title={ui.auth.reset.title}
+                    text={ui.auth.reset.text}
+                    submit={ui.auth.reset.submit}
+                    switchText={ui.auth.reset.switchText}
+                    switchLink={ui.auth.reset.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="reset"
+                    layout="card"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.reset))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-plain-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-plain"
+                    title={ui.auth.signin.title}
+                    text={ui.auth.signin.text}
+                    submit={ui.auth.signin.submit}
+                    switchText={ui.auth.signin.switchText}
+                    switchLink={ui.auth.signin.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signin"
+                    layout="plain"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.plain))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-social-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="social"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-social-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.social}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-social"
+                    title={ui.auth.signin.title}
+                    text={ui.auth.signin.text}
+                    submit={ui.auth.signin.submit}
+                    switchText={ui.auth.signin.switchText}
+                    switchLink={ui.auth.signin.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signin"
+                    layout="card"
+                    social="show"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-signupSocial-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="signupSocial"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-signupSocial-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.signupSocial}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-signupSocial"
+                    title={ui.auth.signup.title}
+                    text={ui.auth.signup.text}
+                    submit={ui.auth.signup.submit}
+                    switchText={ui.auth.signup.switchText}
+                    switchLink={ui.auth.signup.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signup"
+                    layout="plain"
+                    social="show"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-wizard-title"
+            data-testid="catalog-block"
+            data-block="wizard"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-wizard-title">
+                {ui.blocks.names.wizard}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.wizard}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="wizard-bar-label"
+              data-testid="variant"
+              data-block="wizard"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="wizard-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.wizard.bar}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SignupWizard
+                  id="wizard-bar"
+                  title={ui.vibe.wizard.title}
+                  steps={wizard}
+                  labels={ui.vibe.wizard.labels}
+                  current={1}
+                  progress="bar"
+                  layout="card"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="wizard-list-label"
+              data-testid="variant"
+              data-block="wizard"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="wizard-list-label" data-testid="variant-label">
+                {ui.blocks.variants.wizard.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SignupWizard
+                  id="wizard-list"
+                  title={ui.vibe.wizard.title}
+                  steps={wizard}
+                  labels={ui.vibe.wizard.labels}
+                  current={1}
+                  progress="list"
+                  layout="card"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="wizard-plain-label"
+              data-testid="variant"
+              data-block="wizard"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="wizard-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.wizard.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SignupWizard
+                  id="wizard-plain"
+                  title={ui.vibe.wizard.title}
+                  steps={wizard}
+                  labels={ui.vibe.wizard.labels}
+                  current={1}
+                  progress="bar"
+                  layout="plain"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="wizard-second-label"
+              data-testid="variant"
+              data-block="wizard"
+              data-variant="second"
+            >
+              <Title as={3} size="base" weight="bold" id="wizard-second-label" data-testid="variant-label">
+                {ui.blocks.variants.wizard.second}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SignupWizard
+                  id="wizard-second"
+                  title={ui.vibe.wizard.title}
+                  steps={wizard}
+                  labels={ui.vibe.wizard.labels}
+                  current={2}
+                  progress="list"
+                  layout="plain"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.second))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppAuthPagesPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppAuthPagesPage.tsx
new file mode 100644
index 0000000..f1e3961
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppAuthPagesPage.tsx
@@ -0,0 +1,338 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-auth-pages page of CatalogScreen.
+
+import {
+  AuthLayout,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const AUTHPAGE_SWITCH_TO = { text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" } as const;
+
+export function AppAuthPagesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appAuthPages}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 9)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-authpage-title"
+            data-testid="catalog-block"
+            data-block="authpage"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-authpage-title">
+                {ui.blocks.names.authpage}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.authpage}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-split-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-split-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-split"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="split"
+                  side="end"
+                  mode="signin"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-splitStart-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="splitStart"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-splitStart-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.splitStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-splitStart"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="split"
+                  side="start"
+                  mode="signin"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.splitStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-centered-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.centered}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-centered"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="centered"
+                  side="end"
+                  mode="signin"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-minimal-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.minimal}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-minimal"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="minimal"
+                  side="end"
+                  mode="signin"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.minimal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-signup-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="signup"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-signup-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.signup}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-signup"
+                  title={ui.auth.signup.title}
+                  text={ui.auth.signup.text}
+                  submit={ui.auth.signup.submit}
+                  switchTo={{
+                    ...AUTHPAGE_SWITCH_TO,
+                    text: ui.auth.signup.switchText,
+                    link: ui.auth.signup.switchLink,
+                  }}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="split"
+                  side="end"
+                  mode="signup"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.signup))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-reset-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="reset"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-reset-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.reset}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-reset"
+                  title={ui.auth.reset.title}
+                  text={ui.auth.reset.text}
+                  submit={ui.auth.reset.submit}
+                  switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink }}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="centered"
+                  side="end"
+                  mode="reset"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.reset))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-magic-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="magic"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-magic-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.magic}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-magic"
+                  title={ui.auth.magic.title}
+                  text={ui.auth.magic.text}
+                  submit={ui.auth.magic.submit}
+                  switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink }}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="minimal"
+                  side="end"
+                  mode="magic"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.magic))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-social-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="social"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-social-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.social}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-social"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="split"
+                  side="end"
+                  mode="signin"
+                  social="show"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.social))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-socialFirst-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="socialFirst"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-socialFirst-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.socialFirst}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-socialFirst"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="centered"
+                  side="end"
+                  mode="signin"
+                  social="first"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.socialFirst))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppBoardsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppBoardsPage.tsx
new file mode 100644
index 0000000..9482e74
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppBoardsPage.tsx
@@ -0,0 +1,339 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-boards page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DashboardOverview,
+  Group,
+  KanbanBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type BoardCard,
+  type Event,
+  type Lane,
+  type Point,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+
+const OVERVIEW_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const OVERVIEW_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+
+export function AppBoardsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appBoards}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 8)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-overview-title"
+            data-testid="catalog-block"
+            data-block="overview"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-overview-title">
+                {ui.blocks.names.overview}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.overview}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="overview-split-label"
+              data-testid="variant"
+              data-block="overview"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="overview-split-label" data-testid="variant-label">
+                {ui.blocks.variants.overview.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardOverview
+                  id="overview-split"
+                  title={ui.vibe.overview.title}
+                  metrics={metrics}
+                  chart={OVERVIEW_CHART}
+                  activity={OVERVIEW_ACTIVITY}
+                  layout="split"
+                  cols="4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="overview-stacked-label"
+              data-testid="variant"
+              data-block="overview"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="overview-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.overview.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardOverview
+                  id="overview-stacked"
+                  title={ui.vibe.overview.title}
+                  metrics={metrics}
+                  chart={OVERVIEW_CHART}
+                  activity={OVERVIEW_ACTIVITY}
+                  layout="stacked"
+                  cols="4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="overview-twoCols-label"
+              data-testid="variant"
+              data-block="overview"
+              data-variant="twoCols"
+            >
+              <Title as={3} size="base" weight="bold" id="overview-twoCols-label" data-testid="variant-label">
+                {ui.blocks.variants.overview.twoCols}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardOverview
+                  id="overview-twoCols"
+                  title={ui.vibe.overview.title}
+                  metrics={metrics}
+                  chart={OVERVIEW_CHART}
+                  activity={OVERVIEW_ACTIVITY}
+                  layout="split"
+                  cols="2"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.twoCols))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="overview-muted-label"
+              data-testid="variant"
+              data-block="overview"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="overview-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.overview.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardOverview
+                  id="overview-muted"
+                  title={ui.vibe.overview.title}
+                  metrics={metrics}
+                  chart={OVERVIEW_CHART}
+                  activity={OVERVIEW_ACTIVITY}
+                  layout="split"
+                  cols="4"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-kanban-title"
+            data-testid="catalog-block"
+            data-block="kanban"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-kanban-title">
+                {ui.blocks.names.kanban}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.kanban}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="kanban-detail-label"
+              data-testid="variant"
+              data-block="kanban"
+              data-variant="detail"
+            >
+              <Title as={3} size="base" weight="bold" id="kanban-detail-label" data-testid="variant-label">
+                {ui.blocks.variants.kanban.detail}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <KanbanBoard
+                  id="kanban-detail"
+                  title={ui.vibe.kanban.title}
+                  lanes={lanes}
+                  empty={ui.empty.lanes}
+                  cards={cards}
+                  countLabel={ui.vibe.kanban.count}
+                  card="detail"
+                  cols="3"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="kanban-simple-label"
+              data-testid="variant"
+              data-block="kanban"
+              data-variant="simple"
+            >
+              <Title as={3} size="base" weight="bold" id="kanban-simple-label" data-testid="variant-label">
+                {ui.blocks.variants.kanban.simple}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <KanbanBoard
+                  id="kanban-simple"
+                  title={ui.vibe.kanban.title}
+                  lanes={lanes}
+                  empty={ui.empty.lanes}
+                  cards={cards}
+                  countLabel={ui.vibe.kanban.count}
+                  card="simple"
+                  cols="3"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.simple))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="kanban-twoCols-label"
+              data-testid="variant"
+              data-block="kanban"
+              data-variant="twoCols"
+            >
+              <Title as={3} size="base" weight="bold" id="kanban-twoCols-label" data-testid="variant-label">
+                {ui.blocks.variants.kanban.twoCols}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <KanbanBoard
+                  id="kanban-twoCols"
+                  title={ui.vibe.kanban.title}
+                  lanes={lanes}
+                  empty={ui.empty.lanes}
+                  cards={cards}
+                  countLabel={ui.vibe.kanban.count}
+                  card="detail"
+                  cols="2"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="kanban-muted-label"
+              data-testid="variant"
+              data-block="kanban"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="kanban-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.kanban.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <KanbanBoard
+                  id="kanban-muted"
+                  title={ui.vibe.kanban.title}
+                  lanes={lanes}
+                  empty={ui.empty.lanes}
+                  cards={cards}
+                  countLabel={ui.vibe.kanban.count}
+                  card="detail"
+                  cols="3"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppDashboardShellsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppDashboardShellsPage.tsx
new file mode 100644
index 0000000..34cc790
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppDashboardShellsPage.tsx
@@ -0,0 +1,429 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-dashboard-shells page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DashboardShell,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+const DASHSHELL_NAV = {
+  label: ui.dashboard.shells.label,
+  brand: ui.site.header.brand,
+  links: sidenav,
+  current: "item-orders",
+  subTitle: ui.dashboard.shells.subTitle,
+  sub: subnav,
+  subCurrent: "subitem-all",
+  search: ui.dashboard.shells.search,
+  shortcut: ui.dashboard.shells.shortcut,
+  expand: ui.dashboard.shells.expand,
+  userName: ui.dashboard.shells.userName,
+  copyright: ui.dashboard.shells.copyright,
+  footerLabel: ui.dashboard.shells.footerLabel,
+  footer: helplinks,
+} as const;
+
+export function AppDashboardShellsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appDashboardShells}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-dashshell-title"
+            data-testid="catalog-block"
+            data-block="dashshell"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-dashshell-title">
+                {ui.blocks.names.dashshell}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.dashshell}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-classic-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="classic"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-classic-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.classic}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-classic"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="show"
+                  sidebar="wide"
+                  side="start"
+                  footer="none"
+                  content="grid"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-inset-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="inset"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-inset-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.inset}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-inset"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="show"
+                  sidebar="wide"
+                  side="start"
+                  footer="inset"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.inset))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-rail-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="rail"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-rail-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.rail}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-rail"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="hide"
+                  sidebar="rail"
+                  side="start"
+                  footer="none"
+                  content="list"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.rail))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-railFooter-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="railFooter"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-railFooter-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.railFooter}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-railFooter"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="show"
+                  sidebar="rail"
+                  side="start"
+                  footer="full"
+                  content="grid"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railFooter))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-collapsed-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="collapsed"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-collapsed-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.collapsed}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-collapsed"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="show"
+                  sidebar="collapsed"
+                  side="start"
+                  footer="none"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsed))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-twoLevel-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="twoLevel"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-twoLevel-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.twoLevel}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-twoLevel"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="hide"
+                  sidebar="twolevel"
+                  side="start"
+                  footer="inset"
+                  content="list"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-twoLevelFull-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="twoLevelFull"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-twoLevelFull-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.twoLevelFull}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-twoLevelFull"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="show"
+                  sidebar="twolevel"
+                  side="start"
+                  footer="full"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevelFull))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-end-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="end"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-end-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.end}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-end"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="show"
+                  sidebar="wide"
+                  side="end"
+                  footer="full"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-railEnd-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="railEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-railEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.railEnd}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-railEnd"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="hide"
+                  sidebar="rail"
+                  side="end"
+                  footer="inset"
+                  content="grid"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railEnd))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-topOnly-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="topOnly"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-topOnly-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.topOnly}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-topOnly"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="show"
+                  sidebar="none"
+                  side="start"
+                  footer="full"
+                  content="grid"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.topOnly))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-sideOnly-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="sideOnly"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-sideOnly-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.sideOnly}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-sideOnly"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="none"
+                  search="show"
+                  sidebar="wide"
+                  side="start"
+                  footer="inset"
+                  content="list"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.sideOnly))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-collapsedEnd-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="collapsedEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-collapsedEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.collapsedEnd}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-collapsedEnd"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="none"
+                  search="show"
+                  sidebar="collapsed"
+                  side="end"
+                  footer="full"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsedEnd))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppGuidancePage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppGuidancePage.tsx
new file mode 100644
index 0000000..26c4813
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppGuidancePage.tsx
@@ -0,0 +1,312 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-guidance page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  TourCallout,
+  VideoModal,
+  tpl,
+  uniqLabel,
+  type Chapter,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+
+export function AppGuidancePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appGuidance}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 8)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-tour-title"
+            data-testid="catalog-block"
+            data-block="tour"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-tour-title">
+                {ui.blocks.names.tour}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.tour}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="tour-below-label"
+              data-testid="variant"
+              data-block="tour"
+              data-variant="below"
+            >
+              <Title as={3} size="base" weight="bold" id="tour-below-label" data-testid="variant-label">
+                {ui.blocks.variants.tour.below}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TourCallout
+                  id="tour-below"
+                  title={ui.vibe.tour.title}
+                  text={ui.vibe.tour.text}
+                  target={ui.vibe.tour.target}
+                  position={ui.vibe.tour.position}
+                  skip={ui.vibe.tour.skip}
+                  next={ui.vibe.tour.next}
+                  placement="below"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="tour-above-label"
+              data-testid="variant"
+              data-block="tour"
+              data-variant="above"
+            >
+              <Title as={3} size="base" weight="bold" id="tour-above-label" data-testid="variant-label">
+                {ui.blocks.variants.tour.above}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TourCallout
+                  id="tour-above"
+                  title={ui.vibe.tour.title}
+                  text={ui.vibe.tour.text}
+                  target={ui.vibe.tour.target}
+                  position={ui.vibe.tour.position}
+                  skip={ui.vibe.tour.skip}
+                  next={ui.vibe.tour.next}
+                  placement="above"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="tour-end-label"
+              data-testid="variant"
+              data-block="tour"
+              data-variant="end"
+            >
+              <Title as={3} size="base" weight="bold" id="tour-end-label" data-testid="variant-label">
+                {ui.blocks.variants.tour.end}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TourCallout
+                  id="tour-end"
+                  title={ui.vibe.tour.title}
+                  text={ui.vibe.tour.text}
+                  target={ui.vibe.tour.target}
+                  position={ui.vibe.tour.position}
+                  skip={ui.vibe.tour.skip}
+                  next={ui.vibe.tour.next}
+                  placement="end"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="tour-muted-label"
+              data-testid="variant"
+              data-block="tour"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="tour-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.tour.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TourCallout
+                  id="tour-muted"
+                  title={ui.vibe.tour.title}
+                  text={ui.vibe.tour.text}
+                  target={ui.vibe.tour.target}
+                  position={ui.vibe.tour.position}
+                  skip={ui.vibe.tour.skip}
+                  next={ui.vibe.tour.next}
+                  placement="below"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-videomodal-title"
+            data-testid="catalog-block"
+            data-block="videomodal"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-videomodal-title">
+                {ui.blocks.names.videomodal}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.videomodal}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videomodal-default-label"
+              data-testid="variant"
+              data-block="videomodal"
+              data-variant="default"
+            >
+              <Title as={3} size="base" weight="bold" id="videomodal-default-label" data-testid="variant-label">
+                {ui.blocks.variants.videomodal.default}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoModal
+                  id="videomodal-default"
+                  title={ui.vibe.modal.title}
+                  text={ui.vibe.modal.text}
+                  close={ui.vibe.modal.close}
+                  play={ui.vibe.modal.play}
+                  chaptersTitle={ui.vibe.modal.chapters}
+                  chapters={chapters}
+                  size="default"
+                  outline="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videomodal-wide-label"
+              data-testid="variant"
+              data-block="videomodal"
+              data-variant="wide"
+            >
+              <Title as={3} size="base" weight="bold" id="videomodal-wide-label" data-testid="variant-label">
+                {ui.blocks.variants.videomodal.wide}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoModal
+                  id="videomodal-wide"
+                  title={ui.vibe.modal.title}
+                  text={ui.vibe.modal.text}
+                  close={ui.vibe.modal.close}
+                  play={ui.vibe.modal.play}
+                  chaptersTitle={ui.vibe.modal.chapters}
+                  chapters={chapters}
+                  size="wide"
+                  outline="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.wide))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videomodal-chapters-label"
+              data-testid="variant"
+              data-block="videomodal"
+              data-variant="chapters"
+            >
+              <Title as={3} size="base" weight="bold" id="videomodal-chapters-label" data-testid="variant-label">
+                {ui.blocks.variants.videomodal.chapters}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoModal
+                  id="videomodal-chapters"
+                  title={ui.vibe.modal.title}
+                  text={ui.vibe.modal.text}
+                  close={ui.vibe.modal.close}
+                  play={ui.vibe.modal.play}
+                  chaptersTitle={ui.vibe.modal.chapters}
+                  chapters={chapters}
+                  size="default"
+                  outline="chapters"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videomodal-muted-label"
+              data-testid="variant"
+              data-block="videomodal"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="videomodal-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.videomodal.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoModal
+                  id="videomodal-muted"
+                  title={ui.vibe.modal.title}
+                  text={ui.vibe.modal.text}
+                  close={ui.vibe.modal.close}
+                  play={ui.vibe.modal.play}
+                  chaptersTitle={ui.vibe.modal.chapters}
+                  chapters={chapters}
+                  size="default"
+                  outline="none"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppOnboardingPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppOnboardingPage.tsx
new file mode 100644
index 0000000..b488cac
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppOnboardingPage.tsx
@@ -0,0 +1,400 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-onboarding page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Checklist,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Stepper,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+  type Task,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+
+export function AppOnboardingPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appOnboarding}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 11)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-checklist-title"
+            data-testid="catalog-block"
+            data-block="checklist"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-checklist-title">
+                {ui.blocks.names.checklist}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.checklist}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-card-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-card-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.card}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-card"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="bar"
+                  marker="check"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-expand-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="expand"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-expand-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.expand}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-expand"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="bar"
+                  marker="check"
+                  detail="expand"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-plain-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-plain"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="plain"
+                  progress="bar"
+                  marker="check"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-text-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="text"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-text-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.text}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-text"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="text"
+                  marker="check"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-none-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="none"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-none-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.none}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-none"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="plain"
+                  progress="none"
+                  marker="check"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.none))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-numbered-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="numbered"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-numbered-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.numbered}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-numbered"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="bar"
+                  marker="number"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-muted-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-muted"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="text"
+                  marker="number"
+                  detail="always"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-stepper-title"
+            data-testid="catalog-block"
+            data-block="stepper"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-stepper-title">
+                {ui.blocks.names.stepper}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.stepper}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-horizontal-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="horizontal"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.horizontal}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-horizontal"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="horizontal"
+                  marker="number"
+                  summary="show"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-vertical-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="vertical"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-vertical-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.vertical}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-vertical"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="vertical"
+                  marker="number"
+                  summary="show"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-icons-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.icons}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-icons"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="horizontal"
+                  marker="icon"
+                  summary="show"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-bare-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="bare"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-bare-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.bare}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-bare"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="vertical"
+                  marker="icon"
+                  summary="hide"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.bare))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppSettingsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppSettingsPage.tsx
new file mode 100644
index 0000000..e91ec19
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppSettingsPage.tsx
@@ -0,0 +1,166 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-settings page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProfileForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function AppSettingsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appSettings}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-profile-title"
+            data-testid="catalog-block"
+            data-block="profile"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-profile-title">
+                {ui.blocks.names.profile}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.profile}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="profile-stacked-label"
+              data-testid="variant"
+              data-block="profile"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="profile-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.profile.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProfileForm
+                  id="profile-stacked"
+                  title={ui.account.profile.title}
+                  text={ui.account.profile.text}
+                  labels={ui.account.profile.labels}
+                  layout="stacked"
+                  avatar="show"
+                  prefs="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="profile-split-label"
+              data-testid="variant"
+              data-block="profile"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="profile-split-label" data-testid="variant-label">
+                {ui.blocks.variants.profile.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProfileForm
+                  id="profile-split"
+                  title={ui.account.profile.title}
+                  text={ui.account.profile.text}
+                  labels={ui.account.profile.labels}
+                  layout="split"
+                  avatar="show"
+                  prefs="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="profile-minimal-label"
+              data-testid="variant"
+              data-block="profile"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="profile-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.profile.minimal}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProfileForm
+                  id="profile-minimal"
+                  title={ui.account.profile.title}
+                  text={ui.account.profile.text}
+                  labels={ui.account.profile.labels}
+                  layout="stacked"
+                  avatar="hide"
+                  prefs="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.minimal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="profile-muted-label"
+              data-testid="variant"
+              data-block="profile"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="profile-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.profile.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProfileForm
+                  id="profile-muted"
+                  title={ui.account.profile.title}
+                  text={ui.account.profile.text}
+                  labels={ui.account.profile.labels}
+                  layout="split"
+                  avatar="show"
+                  prefs="show"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppShellPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppShellPage.tsx
new file mode 100644
index 0000000..c76269f
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppShellPage.tsx
@@ -0,0 +1,453 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-shell page of CatalogScreen.
+
+import {
+  AppShell,
+  Block,
+  BottomNav,
+  Box,
+  Container,
+  Group,
+  Link,
+  SidebarNav,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+
+const SHELL_NAV = { label: ui.vibe.sidebar.label, brand: ui.site.header.brand, links: sidenav, current: "item-overview" } as const;
+const SHELL_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const SHELL_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+
+export function AppShellPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appShell}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-shell-title"
+            data-testid="catalog-block"
+            data-block="shell"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-shell-title">
+                {ui.blocks.names.shell}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.shell}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="shell-sidebar-label"
+              data-testid="variant"
+              data-block="shell"
+              data-variant="sidebar"
+            >
+              <Title as={3} size="base" weight="bold" id="shell-sidebar-label" data-testid="variant-label">
+                {ui.blocks.variants.shell.sidebar}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AppShell
+                  id="shell-sidebar"
+                  title={ui.vibe.shell.title}
+                  nav={SHELL_NAV}
+                  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  metrics={metrics}
+                  chart={SHELL_CHART}
+                  activity={SHELL_ACTIVITY}
+                  layout="sidebar"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="shell-top-label"
+              data-testid="variant"
+              data-block="shell"
+              data-variant="top"
+            >
+              <Title as={3} size="base" weight="bold" id="shell-top-label" data-testid="variant-label">
+                {ui.blocks.variants.shell.top}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AppShell
+                  id="shell-top"
+                  title={ui.vibe.shell.title}
+                  nav={SHELL_NAV}
+                  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  metrics={metrics}
+                  chart={SHELL_CHART}
+                  activity={SHELL_ACTIVITY}
+                  layout="top"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="shell-panes-label"
+              data-testid="variant"
+              data-block="shell"
+              data-variant="panes"
+            >
+              <Title as={3} size="base" weight="bold" id="shell-panes-label" data-testid="variant-label">
+                {ui.blocks.variants.shell.panes}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AppShell
+                  id="shell-panes"
+                  title={ui.vibe.shell.title}
+                  nav={SHELL_NAV}
+                  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  metrics={metrics}
+                  chart={SHELL_CHART}
+                  activity={SHELL_ACTIVITY}
+                  layout="panes"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="shell-dense-label"
+              data-testid="variant"
+              data-block="shell"
+              data-variant="dense"
+            >
+              <Title as={3} size="base" weight="bold" id="shell-dense-label" data-testid="variant-label">
+                {ui.blocks.variants.shell.dense}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AppShell
+                  id="shell-dense"
+                  title={ui.vibe.shell.title}
+                  nav={SHELL_NAV}
+                  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  metrics={metrics}
+                  chart={SHELL_CHART}
+                  activity={SHELL_ACTIVITY}
+                  layout="sidebar"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.dense))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-sidenav-title"
+            data-testid="catalog-block"
+            data-block="sidenav"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-sidenav-title">
+                {ui.blocks.names.sidenav}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.sidenav}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sidenav-full-label"
+              data-testid="variant"
+              data-block="sidenav"
+              data-variant="full"
+            >
+              <Title as={3} size="base" weight="bold" id="sidenav-full-label" data-testid="variant-label">
+                {ui.blocks.variants.sidenav.full}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SidebarNav
+                  label={ui.vibe.sidebar.label}
+                  brand={ui.site.header.brand}
+                  links={sidenav}
+                  current="item-orders"
+                  userName={ui.vibe.sidebar.userName}
+                  userEmail={ui.vibe.sidebar.userEmail}
+                  width="full"
+                  user="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sidenav-compact-label"
+              data-testid="variant"
+              data-block="sidenav"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="sidenav-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.sidenav.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SidebarNav
+                  label={ui.vibe.sidebar.label}
+                  brand={ui.site.header.brand}
+                  links={sidenav}
+                  current="item-orders"
+                  userName={ui.vibe.sidebar.userName}
+                  userEmail={ui.vibe.sidebar.userEmail}
+                  width="compact"
+                  user="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sidenav-noUser-label"
+              data-testid="variant"
+              data-block="sidenav"
+              data-variant="noUser"
+            >
+              <Title as={3} size="base" weight="bold" id="sidenav-noUser-label" data-testid="variant-label">
+                {ui.blocks.variants.sidenav.noUser}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SidebarNav
+                  label={ui.vibe.sidebar.label}
+                  brand={ui.site.header.brand}
+                  links={sidenav}
+                  current="item-orders"
+                  userName={ui.vibe.sidebar.userName}
+                  userEmail={ui.vibe.sidebar.userEmail}
+                  width="full"
+                  user="hide"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.noUser))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sidenav-dense-label"
+              data-testid="variant"
+              data-block="sidenav"
+              data-variant="dense"
+            >
+              <Title as={3} size="base" weight="bold" id="sidenav-dense-label" data-testid="variant-label">
+                {ui.blocks.variants.sidenav.dense}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SidebarNav
+                  label={ui.vibe.sidebar.label}
+                  brand={ui.site.header.brand}
+                  links={sidenav}
+                  current="item-orders"
+                  userName={ui.vibe.sidebar.userName}
+                  userEmail={ui.vibe.sidebar.userEmail}
+                  width="full"
+                  user="show"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.dense))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-bottomnav-title"
+            data-testid="catalog-block"
+            data-block="bottomnav"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-bottomnav-title">
+                {ui.blocks.names.bottomnav}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.bottomnav}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bottomnav-labels-label"
+              data-testid="variant"
+              data-block="bottomnav"
+              data-variant="labels"
+            >
+              <Title as={3} size="base" weight="bold" id="bottomnav-labels-label" data-testid="variant-label">
+                {ui.blocks.variants.bottomnav.labels}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BottomNav
+                  label={ui.vibe.bottom.label}
+                  tabs={tabs}
+                  current="tab-explore"
+                  labels="show"
+                  position="static"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bottomnav-icons-label"
+              data-testid="variant"
+              data-block="bottomnav"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="bottomnav-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.bottomnav.icons}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BottomNav
+                  label={ui.vibe.bottom.label}
+                  tabs={tabs}
+                  current="tab-explore"
+                  labels="hide"
+                  position="static"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bottomnav-sticky-label"
+              data-testid="variant"
+              data-block="bottomnav"
+              data-variant="sticky"
+            >
+              <Title as={3} size="base" weight="bold" id="bottomnav-sticky-label" data-testid="variant-label">
+                {ui.blocks.variants.bottomnav.sticky}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BottomNav
+                  label={ui.vibe.bottom.label}
+                  tabs={tabs}
+                  current="tab-explore"
+                  labels="show"
+                  position="sticky"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.sticky))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bottomnav-muted-label"
+              data-testid="variant"
+              data-block="bottomnav"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="bottomnav-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.bottomnav.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BottomNav
+                  label={ui.vibe.bottom.label}
+                  tabs={tabs}
+                  current="tab-explore"
+                  labels="show"
+                  position="static"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppStatesPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppStatesPage.tsx
new file mode 100644
index 0000000..2fcce53
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppStatesPage.tsx
@@ -0,0 +1,351 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-states page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  EmptyPanel,
+  Group,
+  Link,
+  SkeletonLayout,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Line,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+
+export function AppStatesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appStates}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-empty-title"
+            data-testid="catalog-block"
+            data-block="empty"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-empty-title">
+                {ui.blocks.names.empty}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.empty}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-illustrated-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="illustrated"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-illustrated-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.illustrated}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-illustrated"
+                  title={ui.dashboard.empty.tour.title}
+                  text={ui.dashboard.empty.tour.text}
+                  cta={ui.dashboard.empty.tour.cta}
+                  ctaHref="#/"
+                  layout="card"
+                  actions="button"
+                  visual="image"
+                  size="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-orders-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="orders"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-orders-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.orders}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-orders"
+                  title={ui.dashboard.empty.orders.title}
+                  text={ui.dashboard.empty.orders.text}
+                  cta={ui.dashboard.empty.orders.cta}
+                  ctaHref="#/"
+                  layout="card"
+                  actions="button"
+                  visual="icon"
+                  size="default"
+                  icon="shopping-bag"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-results-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="results"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-results-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.results}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-results"
+                  title={ui.dashboard.empty.results.title}
+                  text={ui.dashboard.empty.results.text}
+                  cta={ui.dashboard.empty.results.cta}
+                  ctaHref="#/"
+                  layout="plain"
+                  actions="button"
+                  visual="icon"
+                  size="default"
+                  icon="search"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.results))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-inbox-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="inbox"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-inbox-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.inbox}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-inbox"
+                  title={ui.dashboard.empty.inbox.title}
+                  text={ui.dashboard.empty.inbox.text}
+                  cta={ui.dashboard.empty.inbox.cta}
+                  ctaHref="#/"
+                  layout="card"
+                  actions="none"
+                  visual="icon"
+                  size="default"
+                  icon="inbox"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.inbox))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-compact-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-compact"
+                  title={ui.dashboard.empty.inbox.title}
+                  text={ui.dashboard.empty.inbox.text}
+                  cta={ui.dashboard.empty.inbox.cta}
+                  ctaHref="#/"
+                  layout="card"
+                  actions="button"
+                  visual="icon"
+                  size="compact"
+                  icon="inbox"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-plainNoAction-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="plainNoAction"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-plainNoAction-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.plainNoAction}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-plainNoAction"
+                  title={ui.dashboard.empty.results.title}
+                  text={ui.dashboard.empty.results.text}
+                  cta={ui.dashboard.empty.results.cta}
+                  ctaHref="#/"
+                  layout="plain"
+                  actions="none"
+                  visual="icon"
+                  size="compact"
+                  icon="search"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.plainNoAction))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-skeleton-title"
+            data-testid="catalog-block"
+            data-block="skeleton"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-skeleton-title">
+                {ui.blocks.names.skeleton}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.skeleton}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="skeleton-cards-label"
+              data-testid="variant"
+              data-block="skeleton"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="skeleton-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.skeleton.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SkeletonLayout
+                  id="skeleton-cards"
+                  title={ui.vibe.skeleton.title}
+                  label={ui.vibe.skeleton.label}
+                  lines={placeholders}
+                  shape="cards"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="skeleton-list-label"
+              data-testid="variant"
+              data-block="skeleton"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="skeleton-list-label" data-testid="variant-label">
+                {ui.blocks.variants.skeleton.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SkeletonLayout
+                  id="skeleton-list"
+                  title={ui.vibe.skeleton.title}
+                  label={ui.vibe.skeleton.label}
+                  lines={placeholders}
+                  shape="list"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="skeleton-article-label"
+              data-testid="variant"
+              data-block="skeleton"
+              data-variant="article"
+            >
+              <Title as={3} size="base" weight="bold" id="skeleton-article-label" data-testid="variant-label">
+                {ui.blocks.variants.skeleton.article}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SkeletonLayout
+                  id="skeleton-article"
+                  title={ui.vibe.skeleton.title}
+                  label={ui.vibe.skeleton.label}
+                  lines={placeholders}
+                  shape="article"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.article))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="skeleton-muted-label"
+              data-testid="variant"
+              data-block="skeleton"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="skeleton-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.skeleton.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SkeletonLayout
+                  id="skeleton-muted"
+                  title={ui.vibe.skeleton.title}
+                  label={ui.vibe.skeleton.label}
+                  lines={placeholders}
+                  shape="cards"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/AppWidgetsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/AppWidgetsPage.tsx
new file mode 100644
index 0000000..8ac0b97
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/AppWidgetsPage.tsx
@@ -0,0 +1,446 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-widgets page of CatalogScreen.
+
+import {
+  ActivityFeed,
+  Block,
+  Box,
+  ChartPanel,
+  Container,
+  Group,
+  Link,
+  MetricRow,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type Point,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+
+export function AppWidgetsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appWidgets}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-metrics-title"
+            data-testid="catalog-block"
+            data-block="metrics"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-metrics-title">
+                {ui.blocks.names.metrics}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.metrics}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="metrics-tiles-label"
+              data-testid="variant"
+              data-block="metrics"
+              data-variant="tiles"
+            >
+              <Title as={3} size="base" weight="bold" id="metrics-tiles-label" data-testid="variant-label">
+                {ui.blocks.variants.metrics.tiles}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MetricRow
+                  id="metrics-tiles"
+                  title={ui.dashboard.metrics.title}
+                  metrics={metrics}
+                  empty={ui.empty.metrics}
+                  cols="4"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="metrics-twoUp-label"
+              data-testid="variant"
+              data-block="metrics"
+              data-variant="twoUp"
+            >
+              <Title as={3} size="base" weight="bold" id="metrics-twoUp-label" data-testid="variant-label">
+                {ui.blocks.variants.metrics.twoUp}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MetricRow
+                  id="metrics-twoUp"
+                  title={ui.dashboard.metrics.title}
+                  metrics={metrics}
+                  empty={ui.empty.metrics}
+                  cols="2"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.twoUp))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="metrics-compact-label"
+              data-testid="variant"
+              data-block="metrics"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="metrics-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.metrics.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MetricRow
+                  id="metrics-compact"
+                  title={ui.dashboard.metrics.title}
+                  metrics={metrics}
+                  empty={ui.empty.metrics}
+                  cols="4"
+                  item="compact"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="metrics-muted-label"
+              data-testid="variant"
+              data-block="metrics"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="metrics-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.metrics.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MetricRow
+                  id="metrics-muted"
+                  title={ui.dashboard.metrics.title}
+                  metrics={metrics}
+                  empty={ui.empty.metrics}
+                  cols="2"
+                  item="compact"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-chart-title"
+            data-testid="catalog-block"
+            data-block="chart"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-chart-title">
+                {ui.blocks.names.chart}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.chart}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="chart-bars-label"
+              data-testid="variant"
+              data-block="chart"
+              data-variant="bars"
+            >
+              <Title as={3} size="base" weight="bold" id="chart-bars-label" data-testid="variant-label">
+                {ui.blocks.variants.chart.bars}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ChartPanel
+                  id="chart-bars"
+                  title={ui.dashboard.chart.title}
+                  text={ui.dashboard.chart.text}
+                  series={series}
+                  empty={ui.empty.series}
+                  summary={ui.dashboard.chart.summary}
+                  percent={ui.dashboard.chart.percent}
+                  chart="bars"
+                  size="default"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="chart-short-label"
+              data-testid="variant"
+              data-block="chart"
+              data-variant="short"
+            >
+              <Title as={3} size="base" weight="bold" id="chart-short-label" data-testid="variant-label">
+                {ui.blocks.variants.chart.short}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ChartPanel
+                  id="chart-short"
+                  title={ui.dashboard.chart.title}
+                  text={ui.dashboard.chart.text}
+                  series={series}
+                  empty={ui.empty.series}
+                  summary={ui.dashboard.chart.summary}
+                  percent={ui.dashboard.chart.percent}
+                  chart="bars"
+                  size="compact"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.short))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="chart-meters-label"
+              data-testid="variant"
+              data-block="chart"
+              data-variant="meters"
+            >
+              <Title as={3} size="base" weight="bold" id="chart-meters-label" data-testid="variant-label">
+                {ui.blocks.variants.chart.meters}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ChartPanel
+                  id="chart-meters"
+                  title={ui.dashboard.chart.title}
+                  text={ui.dashboard.chart.text}
+                  series={series}
+                  empty={ui.empty.series}
+                  summary={ui.dashboard.chart.summary}
+                  percent={ui.dashboard.chart.percent}
+                  chart="meters"
+                  size="default"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="chart-muted-label"
+              data-testid="variant"
+              data-block="chart"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="chart-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.chart.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ChartPanel
+                  id="chart-muted"
+                  title={ui.dashboard.chart.title}
+                  text={ui.dashboard.chart.text}
+                  series={series}
+                  empty={ui.empty.series}
+                  summary={ui.dashboard.chart.summary}
+                  percent={ui.dashboard.chart.percent}
+                  chart="meters"
+                  size="compact"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-activity-title"
+            data-testid="catalog-block"
+            data-block="activity"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-activity-title">
+                {ui.blocks.names.activity}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.activity}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="activity-timeline-label"
+              data-testid="variant"
+              data-block="activity"
+              data-variant="timeline"
+            >
+              <Title as={3} size="base" weight="bold" id="activity-timeline-label" data-testid="variant-label">
+                {ui.blocks.variants.activity.timeline}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ActivityFeed
+                  id="activity-timeline"
+                  title={ui.dashboard.activity.title}
+                  text={ui.dashboard.activity.text}
+                  events={activity}
+                  empty={ui.empty.activity}
+                  layout="timeline"
+                  density="default"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="activity-list-label"
+              data-testid="variant"
+              data-block="activity"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="activity-list-label" data-testid="variant-label">
+                {ui.blocks.variants.activity.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ActivityFeed
+                  id="activity-list"
+                  title={ui.dashboard.activity.title}
+                  text={ui.dashboard.activity.text}
+                  events={activity}
+                  empty={ui.empty.activity}
+                  layout="list"
+                  density="default"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="activity-compact-label"
+              data-testid="variant"
+              data-block="activity"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="activity-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.activity.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ActivityFeed
+                  id="activity-compact"
+                  title={ui.dashboard.activity.title}
+                  text={ui.dashboard.activity.text}
+                  events={activity}
+                  empty={ui.empty.activity}
+                  layout="list"
+                  density="compact"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="activity-muted-label"
+              data-testid="variant"
+              data-block="activity"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="activity-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.activity.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ActivityFeed
+                  id="activity-muted"
+                  title={ui.dashboard.activity.title}
+                  text={ui.dashboard.activity.text}
+                  events={activity}
+                  empty={ui.empty.activity}
+                  layout="timeline"
+                  density="default"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/CommerceCartPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/CommerceCartPage.tsx
new file mode 100644
index 0000000..4154db1
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/CommerceCartPage.tsx
@@ -0,0 +1,400 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-cart page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CartDrawer,
+  CartList,
+  Container,
+  Group,
+  Link,
+  ShoppingCart,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+
+export function CommerceCartPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceCart}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cart-title"
+            data-testid="catalog-block"
+            data-block="cart"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cart-title">
+                {ui.blocks.names.cart}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cart}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cart-table-label"
+              data-testid="variant"
+              data-block="cart"
+              data-variant="table"
+            >
+              <Title as={3} size="base" weight="bold" id="cart-table-label" data-testid="variant-label">
+                {ui.blocks.variants.cart.table}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartList
+                  id="cart-table"
+                  title={ui.commerce.cart.title}
+                  lines={cart}
+                  empty={ui.empty.cart}
+                  labels={ui.commerce.cart}
+                  layout="table"
+                  media="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cart-cards-label"
+              data-testid="variant"
+              data-block="cart"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="cart-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.cart.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartList
+                  id="cart-cards"
+                  title={ui.commerce.cart.title}
+                  lines={cart}
+                  empty={ui.empty.cart}
+                  labels={ui.commerce.cart}
+                  layout="cards"
+                  media="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cart-tableCompact-label"
+              data-testid="variant"
+              data-block="cart"
+              data-variant="tableCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="cart-tableCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.cart.tableCompact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartList
+                  id="cart-tableCompact"
+                  title={ui.commerce.cart.title}
+                  lines={cart}
+                  empty={ui.empty.cart}
+                  labels={ui.commerce.cart}
+                  layout="table"
+                  media="none"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.tableCompact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cart-cardsPlain-label"
+              data-testid="variant"
+              data-block="cart"
+              data-variant="cardsPlain"
+            >
+              <Title as={3} size="base" weight="bold" id="cart-cardsPlain-label" data-testid="variant-label">
+                {ui.blocks.variants.cart.cardsPlain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartList
+                  id="cart-cardsPlain"
+                  title={ui.commerce.cart.title}
+                  lines={cart}
+                  empty={ui.empty.cart}
+                  labels={ui.commerce.cart}
+                  layout="cards"
+                  media="none"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cardsPlain))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cartpage-title"
+            data-testid="catalog-block"
+            data-block="cartpage"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cartpage-title">
+                {ui.blocks.names.cartpage}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cartpage}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartpage-split-label"
+              data-testid="variant"
+              data-block="cartpage"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="cartpage-split-label" data-testid="variant-label">
+                {ui.blocks.variants.cartpage.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ShoppingCart
+                  id="cartpage-split"
+                  title={ui.commerce.cartPage.title}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.cart}
+                  totals={ui.commerce.totals}
+                  actions={ui.commerce.cartPage}
+                  layout="split"
+                  promo="show"
+                  progress="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartpage-stacked-label"
+              data-testid="variant"
+              data-block="cartpage"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="cartpage-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.cartpage.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ShoppingCart
+                  id="cartpage-stacked"
+                  title={ui.commerce.cartPage.title}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.cart}
+                  totals={ui.commerce.totals}
+                  actions={ui.commerce.cartPage}
+                  layout="stacked"
+                  promo="show"
+                  progress="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartpage-plain-label"
+              data-testid="variant"
+              data-block="cartpage"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="cartpage-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.cartpage.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ShoppingCart
+                  id="cartpage-plain"
+                  title={ui.commerce.cartPage.title}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.cart}
+                  totals={ui.commerce.totals}
+                  actions={ui.commerce.cartPage}
+                  layout="split"
+                  promo="hide"
+                  progress="hide"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.plain))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cartdrawer-title"
+            data-testid="catalog-block"
+            data-block="cartdrawer"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cartdrawer-title">
+                {ui.blocks.names.cartdrawer}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cartdrawer}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartdrawer-filled-label"
+              data-testid="variant"
+              data-block="cartdrawer"
+              data-variant="filled"
+            >
+              <Title as={3} size="base" weight="bold" id="cartdrawer-filled-label" data-testid="variant-label">
+                {ui.blocks.variants.cartdrawer.filled}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartDrawer
+                  id="cartdrawer-filled"
+                  lines={cart}
+                  rows={summary}
+                  labels={ui.commerce.cart}
+                  drawer={ui.commerce.drawer}
+                  state="filled"
+                  media="image"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartdrawer-compact-label"
+              data-testid="variant"
+              data-block="cartdrawer"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="cartdrawer-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.cartdrawer.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartDrawer
+                  id="cartdrawer-compact"
+                  lines={cart}
+                  rows={summary}
+                  labels={ui.commerce.cart}
+                  drawer={ui.commerce.drawer}
+                  state="filled"
+                  media="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartdrawer-empty-label"
+              data-testid="variant"
+              data-block="cartdrawer"
+              data-variant="empty"
+            >
+              <Title as={3} size="base" weight="bold" id="cartdrawer-empty-label" data-testid="variant-label">
+                {ui.blocks.variants.cartdrawer.empty}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartDrawer
+                  id="cartdrawer-empty"
+                  lines={cart}
+                  rows={summary}
+                  labels={ui.commerce.cart}
+                  drawer={ui.commerce.drawer}
+                  state="empty"
+                  media="image"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.empty))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/CommerceCategoriesPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/CommerceCategoriesPage.tsx
new file mode 100644
index 0000000..fdea6ab
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/CommerceCategoriesPage.tsx
@@ -0,0 +1,252 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-categories page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+
+export function CommerceCategoriesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceCategories}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 7)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-categories-title"
+            data-testid="catalog-block"
+            data-block="categories"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-categories-title">
+                {ui.blocks.names.categories}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.categories}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-chips-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="chips"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-chips-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.chips}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="chips"
+                  count="show"
+                  icon="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-bar-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.bar}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="bar"
+                  count="show"
+                  icon="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-sidebar-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="sidebar"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-sidebar-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.sidebar}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="sidebar"
+                  count="show"
+                  icon="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-chipsPlain-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="chipsPlain"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-chipsPlain-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.chipsPlain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="chips"
+                  count="hide"
+                  icon="hide"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chipsPlain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-barCompact-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="barCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-barCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.barCompact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="bar"
+                  count="show"
+                  icon="hide"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.barCompact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-tiles-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="tiles"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-tiles-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.tiles}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="tiles"
+                  count="show"
+                  icon="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.tiles))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-toolbar-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="toolbar"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-toolbar-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.toolbar}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="toolbar"
+                  count="show"
+                  icon="hide"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.toolbar))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/CommerceCheckoutPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/CommerceCheckoutPage.tsx
new file mode 100644
index 0000000..b06d758
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/CommerceCheckoutPage.tsx
@@ -0,0 +1,369 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-checkout page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CheckoutForm,
+  Container,
+  Group,
+  Link,
+  OrderSummary,
+  Stack,
+  Stepper,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Day,
+  type Payment,
+  type Promo,
+  type Step,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+
+export function CommerceCheckoutPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceCheckout}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 8)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-checkout-title"
+            data-testid="catalog-block"
+            data-block="checkout"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-checkout-title">
+                {ui.blocks.names.checkout}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.checkout}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checkout-cards-label"
+              data-testid="variant"
+              data-block="checkout"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="checkout-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.checkout.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CheckoutForm
+                  id="checkout-cards"
+                  title={ui.commerce.checkout.title}
+                  days={days}
+                  payments={payments}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.checkout}
+                  totals={ui.commerce.totals}
+                  layout="cards"
+                  summary="aside"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checkout-numbered-label"
+              data-testid="variant"
+              data-block="checkout"
+              data-variant="numbered"
+            >
+              <Title as={3} size="base" weight="bold" id="checkout-numbered-label" data-testid="variant-label">
+                {ui.blocks.variants.checkout.numbered}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CheckoutForm
+                  id="checkout-numbered"
+                  title={ui.commerce.checkout.title}
+                  days={days}
+                  payments={payments}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.checkout}
+                  totals={ui.commerce.totals}
+                  layout="numbered"
+                  summary="aside"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checkout-noSummary-label"
+              data-testid="variant"
+              data-block="checkout"
+              data-variant="noSummary"
+            >
+              <Title as={3} size="base" weight="bold" id="checkout-noSummary-label" data-testid="variant-label">
+                {ui.blocks.variants.checkout.noSummary}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CheckoutForm
+                  id="checkout-noSummary"
+                  title={ui.commerce.checkout.title}
+                  days={days}
+                  payments={payments}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.checkout}
+                  totals={ui.commerce.totals}
+                  layout="cards"
+                  summary="none"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.noSummary))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-summary-title"
+            data-testid="catalog-block"
+            data-block="summary"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-summary-title">
+                {ui.blocks.names.summary}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.summary}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="summary-card-label"
+              data-testid="variant"
+              data-block="summary"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="summary-card-label" data-testid="variant-label">
+                {ui.blocks.variants.summary.card}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderSummary
+                  id="summary-card"
+                  title={ui.commerce.summary.title}
+                  rows={summary}
+                  empty={ui.empty.summary}
+                  labels={ui.commerce.summary}
+                  layout="card"
+                  cta="show"
+                  note="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="summary-plain-label"
+              data-testid="variant"
+              data-block="summary"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="summary-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.summary.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderSummary
+                  id="summary-plain"
+                  title={ui.commerce.summary.title}
+                  rows={summary}
+                  empty={ui.empty.summary}
+                  labels={ui.commerce.summary}
+                  layout="plain"
+                  cta="show"
+                  note="hide"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="summary-noCta-label"
+              data-testid="variant"
+              data-block="summary"
+              data-variant="noCta"
+            >
+              <Title as={3} size="base" weight="bold" id="summary-noCta-label" data-testid="variant-label">
+                {ui.blocks.variants.summary.noCta}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderSummary
+                  id="summary-noCta"
+                  title={ui.commerce.summary.title}
+                  rows={summary}
+                  empty={ui.empty.summary}
+                  labels={ui.commerce.summary}
+                  layout="card"
+                  cta="hide"
+                  note="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.noCta))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="summary-muted-label"
+              data-testid="variant"
+              data-block="summary"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="summary-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.summary.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderSummary
+                  id="summary-muted"
+                  title={ui.commerce.summary.title}
+                  rows={summary}
+                  empty={ui.empty.summary}
+                  labels={ui.commerce.summary}
+                  layout="card"
+                  cta="show"
+                  note="show"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-stepper-title"
+            data-testid="catalog-block"
+            data-block="stepper"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-stepper-title">
+                {ui.blocks.names.stepper}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.stepper}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-horizontal-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="horizontal"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.horizontal}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-horizontal"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="horizontal"
+                  marker="number"
+                  summary="show"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/CommerceDeliveryPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/CommerceDeliveryPage.tsx
new file mode 100644
index 0000000..e358436
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/CommerceDeliveryPage.tsx
@@ -0,0 +1,482 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-delivery page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DeliveryInfo,
+  Group,
+  Link,
+  SlotBoard,
+  Stack,
+  StoreLocations,
+  Text,
+  Title,
+  ZoneTable,
+  tpl,
+  uniqLabel,
+  type Day,
+  type Feature,
+  type Store,
+  type Zone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+
+export function CommerceDeliveryPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceDelivery}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 4, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-delivery-title"
+            data-testid="catalog-block"
+            data-block="delivery"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-delivery-title">
+                {ui.blocks.names.delivery}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.delivery}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="delivery-full-label"
+              data-testid="variant"
+              data-block="delivery"
+              data-variant="full"
+            >
+              <Title as={3} size="base" weight="bold" id="delivery-full-label" data-testid="variant-label">
+                {ui.blocks.variants.delivery.full}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DeliveryInfo
+                  id="delivery-full"
+                  title={ui.commerce.delivery.title}
+                  lead={ui.commerce.delivery.lead}
+                  facts={deliveryfacts}
+                  zones={zones}
+                  labels={ui.commerce.delivery}
+                  layout="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="delivery-split-label"
+              data-testid="variant"
+              data-block="delivery"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="delivery-split-label" data-testid="variant-label">
+                {ui.blocks.variants.delivery.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DeliveryInfo
+                  id="delivery-split"
+                  title={ui.commerce.delivery.title}
+                  lead={ui.commerce.delivery.lead}
+                  facts={deliveryfacts}
+                  zones={zones}
+                  labels={ui.commerce.delivery}
+                  layout="split"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="delivery-facts-label"
+              data-testid="variant"
+              data-block="delivery"
+              data-variant="facts"
+            >
+              <Title as={3} size="base" weight="bold" id="delivery-facts-label" data-testid="variant-label">
+                {ui.blocks.variants.delivery.facts}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DeliveryInfo
+                  id="delivery-facts"
+                  title={ui.commerce.delivery.title}
+                  lead={ui.commerce.delivery.lead}
+                  facts={deliveryfacts}
+                  zones={zones}
+                  labels={ui.commerce.delivery}
+                  layout="facts"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.facts))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-zones-title"
+            data-testid="catalog-block"
+            data-block="zones"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-zones-title">
+                {ui.blocks.names.zones}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.zones}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="zones-table-label"
+              data-testid="variant"
+              data-block="zones"
+              data-variant="table"
+            >
+              <Title as={3} size="base" weight="bold" id="zones-table-label" data-testid="variant-label">
+                {ui.blocks.variants.zones.table}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ZoneTable
+                  id="zones-table"
+                  title={ui.commerce.zones.title}
+                  lead={ui.commerce.zones.lead}
+                  zones={zones}
+                  empty={ui.empty.zones}
+                  labels={ui.commerce.zones}
+                  layout="table"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="zones-cards-label"
+              data-testid="variant"
+              data-block="zones"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="zones-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.zones.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ZoneTable
+                  id="zones-cards"
+                  title={ui.commerce.zones.title}
+                  lead={ui.commerce.zones.lead}
+                  zones={zones}
+                  empty={ui.empty.zones}
+                  labels={ui.commerce.zones}
+                  layout="cards"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="zones-tableMuted-label"
+              data-testid="variant"
+              data-block="zones"
+              data-variant="tableMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="zones-tableMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.zones.tableMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ZoneTable
+                  id="zones-tableMuted"
+                  title={ui.commerce.zones.title}
+                  lead={ui.commerce.zones.lead}
+                  zones={zones}
+                  empty={ui.empty.zones}
+                  labels={ui.commerce.zones}
+                  layout="table"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.tableMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-slots-title"
+            data-testid="catalog-block"
+            data-block="slots"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-slots-title">
+                {ui.blocks.names.slots}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.slots}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="slots-split-label"
+              data-testid="variant"
+              data-block="slots"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="slots-split-label" data-testid="variant-label">
+                {ui.blocks.variants.slots.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SlotBoard
+                  id="slots-split"
+                  title={ui.commerce.slots.title}
+                  lead={ui.commerce.slots.lead}
+                  days={days}
+                  empty={ui.empty.days}
+                  zone={zones.find((i) => i.id === "zone-central")!}
+                  labels={ui.commerce.slots}
+                  layout="split"
+                  item="card"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="slots-plain-label"
+              data-testid="variant"
+              data-block="slots"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="slots-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.slots.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SlotBoard
+                  id="slots-plain"
+                  title={ui.commerce.slots.title}
+                  lead={ui.commerce.slots.lead}
+                  days={days}
+                  empty={ui.empty.days}
+                  zone={zones.find((i) => i.id === "zone-central")!}
+                  labels={ui.commerce.slots}
+                  layout="split"
+                  item="plain"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="slots-stacked-label"
+              data-testid="variant"
+              data-block="slots"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="slots-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.slots.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SlotBoard
+                  id="slots-stacked"
+                  title={ui.commerce.slots.title}
+                  lead={ui.commerce.slots.lead}
+                  days={days}
+                  empty={ui.empty.days}
+                  zone={zones.find((i) => i.id === "zone-central")!}
+                  labels={ui.commerce.slots}
+                  layout="stacked"
+                  item="card"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.stacked))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-locations-title"
+            data-testid="catalog-block"
+            data-block="locations"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-locations-title">
+                {ui.blocks.names.locations}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.locations}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="locations-cards-label"
+              data-testid="variant"
+              data-block="locations"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="locations-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.locations.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreLocations
+                  id="locations-cards"
+                  title={ui.commerce.stores.title}
+                  lead={ui.commerce.stores.lead}
+                  stores={stores}
+                  empty={ui.empty.stores}
+                  kinds={ui.commerce.stores.kinds}
+                  labels={ui.commerce.stores}
+                  layout="cards"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="locations-list-label"
+              data-testid="variant"
+              data-block="locations"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="locations-list-label" data-testid="variant-label">
+                {ui.blocks.variants.locations.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreLocations
+                  id="locations-list"
+                  title={ui.commerce.stores.title}
+                  lead={ui.commerce.stores.lead}
+                  stores={stores}
+                  empty={ui.empty.stores}
+                  kinds={ui.commerce.stores.kinds}
+                  labels={ui.commerce.stores}
+                  layout="list"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="locations-map-label"
+              data-testid="variant"
+              data-block="locations"
+              data-variant="map"
+            >
+              <Title as={3} size="base" weight="bold" id="locations-map-label" data-testid="variant-label">
+                {ui.blocks.variants.locations.map}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreLocations
+                  id="locations-map"
+                  title={ui.commerce.stores.title}
+                  lead={ui.commerce.stores.lead}
+                  stores={stores}
+                  empty={ui.empty.stores}
+                  kinds={ui.commerce.stores.kinds}
+                  labels={ui.commerce.stores}
+                  layout="map"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.map))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/CommerceOrdersPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/CommerceOrdersPage.tsx
new file mode 100644
index 0000000..9f1e95d
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/CommerceOrdersPage.tsx
@@ -0,0 +1,190 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-orders page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  OrderTable,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Order,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+const ORDERS_FIELDS = {
+  "id": "id",
+  "number": "title",
+  "date": "metadata.date.value|date",
+  "total": "metadata.total.value",
+  "currency": "metadata.currency.value",
+  "status": "metadata.order_status.value",
+  "items": "metadata.items.value",
+} as const;
+
+const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+
+export function CommerceOrdersPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceOrders}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-orders-title"
+            data-testid="catalog-block"
+            data-block="orders"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-orders-title">
+                {ui.blocks.names.orders}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.orders}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="orders-table-label"
+              data-testid="variant"
+              data-block="orders"
+              data-variant="table"
+            >
+              <Title as={3} size="base" weight="bold" id="orders-table-label" data-testid="variant-label">
+                {ui.blocks.variants.orders.table}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderTable
+                  id="orders-table"
+                  title={ui.commerce.orders.title}
+                  orders={orders}
+                  empty={ui.empty.orders}
+                  statuses={ui.status}
+                  labels={ui.commerce.orders}
+                  layout="table"
+                  pager="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="orders-cards-label"
+              data-testid="variant"
+              data-block="orders"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="orders-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.orders.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderTable
+                  id="orders-cards"
+                  title={ui.commerce.orders.title}
+                  orders={orders}
+                  empty={ui.empty.orders}
+                  statuses={ui.status}
+                  labels={ui.commerce.orders}
+                  layout="cards"
+                  pager="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="orders-noPager-label"
+              data-testid="variant"
+              data-block="orders"
+              data-variant="noPager"
+            >
+              <Title as={3} size="base" weight="bold" id="orders-noPager-label" data-testid="variant-label">
+                {ui.blocks.variants.orders.noPager}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderTable
+                  id="orders-noPager"
+                  title={ui.commerce.orders.title}
+                  orders={orders}
+                  empty={ui.empty.orders}
+                  statuses={ui.status}
+                  labels={ui.commerce.orders}
+                  layout="table"
+                  pager="hide"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.noPager))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="orders-compactMuted-label"
+              data-testid="variant"
+              data-block="orders"
+              data-variant="compactMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="orders-compactMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.orders.compactMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderTable
+                  id="orders-compactMuted"
+                  title={ui.commerce.orders.title}
+                  orders={orders}
+                  empty={ui.empty.orders}
+                  statuses={ui.status}
+                  labels={ui.commerce.orders}
+                  layout="table"
+                  pager="hide"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.compactMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/CommerceProductPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/CommerceProductPage.tsx
new file mode 100644
index 0000000..b1fd45f
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/CommerceProductPage.tsx
@@ -0,0 +1,497 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-product page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductDetail,
+  ProductInfo,
+  ReviewList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Detail,
+  type Product,
+  type Review,
+  type Spec,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+
+export function CommerceProductPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceProduct}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 13)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-product-title"
+            data-testid="catalog-block"
+            data-block="product"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-product-title">
+                {ui.blocks.names.product}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.product}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-split-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="product-split-label" data-testid="variant-label">
+                {ui.blocks.variants.product.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-split"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="split"
+                  mediaSide="start"
+                  thumbs="below"
+                  buy="full"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-splitEnd-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="splitEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="product-splitEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.product.splitEnd}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-splitEnd"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="split"
+                  mediaSide="end"
+                  thumbs="below"
+                  buy="full"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.splitEnd))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-stacked-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="product-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.product.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-stacked"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="stacked"
+                  mediaSide="start"
+                  thumbs="none"
+                  buy="full"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-compact-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="product-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.product.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-compact"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="split"
+                  mediaSide="start"
+                  thumbs="none"
+                  buy="compact"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-muted-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="product-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.product.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-muted"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="split"
+                  mediaSide="start"
+                  thumbs="below"
+                  buy="full"
+                  tone="muted"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-productinfo-title"
+            data-testid="catalog-block"
+            data-block="productinfo"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-productinfo-title">
+                {ui.blocks.names.productinfo}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.productinfo}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="productinfo-split-label"
+              data-testid="variant"
+              data-block="productinfo"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="productinfo-split-label" data-testid="variant-label">
+                {ui.blocks.variants.productinfo.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductInfo
+                  id="productinfo-split"
+                  title={ui.commerce.info.title}
+                  details={details}
+                  specs={specs}
+                  labels={ui.commerce.info}
+                  layout="split"
+                  expand="first"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="productinfo-stacked-label"
+              data-testid="variant"
+              data-block="productinfo"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="productinfo-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.productinfo.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductInfo
+                  id="productinfo-stacked"
+                  title={ui.commerce.info.title}
+                  details={details}
+                  specs={specs}
+                  labels={ui.commerce.info}
+                  layout="stacked"
+                  expand="first"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="productinfo-closed-label"
+              data-testid="variant"
+              data-block="productinfo"
+              data-variant="closed"
+            >
+              <Title as={3} size="base" weight="bold" id="productinfo-closed-label" data-testid="variant-label">
+                {ui.blocks.variants.productinfo.closed}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductInfo
+                  id="productinfo-closed"
+                  title={ui.commerce.info.title}
+                  details={details}
+                  specs={specs}
+                  labels={ui.commerce.info}
+                  layout="split"
+                  expand="none"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.closed))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-reviews-title"
+            data-testid="catalog-block"
+            data-block="reviews"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-reviews-title">
+                {ui.blocks.names.reviews}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.reviews}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-list-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-list-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-list"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="list"
+                  item="card"
+                  avatar="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-grid-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.grid}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-grid"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="grid"
+                  item="card"
+                  avatar="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-plain-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-plain"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="list"
+                  item="plain"
+                  avatar="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-avatars-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="avatars"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-avatars-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.avatars}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-avatars"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="list"
+                  item="card"
+                  avatar="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.avatars))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-mutedGrid-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="mutedGrid"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-mutedGrid-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.mutedGrid}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-mutedGrid"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="grid"
+                  item="card"
+                  avatar="image"
+                  tone="muted"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.mutedGrid))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/CommerceProductsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/CommerceProductsPage.tsx
new file mode 100644
index 0000000..b037344
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/CommerceProductsPage.tsx
@@ -0,0 +1,354 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-products page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Product,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+
+export function CommerceProductsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceProducts}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 9)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-products-title"
+            data-testid="catalog-block"
+            data-block="products"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-products-title">
+                {ui.blocks.names.products}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.products}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-grid3-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="products-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.products.grid3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-grid3"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-3"
+                  ratio="4/3"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-grid4-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="grid4"
+            >
+              <Title as={3} size="base" weight="bold" id="products-grid4-label" data-testid="variant-label">
+                {ui.blocks.variants.products.grid4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-grid4"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-4"
+                  ratio="1/1"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-grid2-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="products-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.products.grid2}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-grid2"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-2"
+                  ratio="3/4"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-list-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="products-list-label" data-testid="variant-label">
+                {ui.blocks.variants.products.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-list"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="list"
+                  cols="1-3"
+                  ratio="4/3"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-catalog-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="catalog"
+            >
+              <Title as={3} size="base" weight="bold" id="products-catalog-label" data-testid="variant-label">
+                {ui.blocks.variants.products.catalog}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-catalog"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-4"
+                  ratio="1/1"
+                  rating="hide"
+                  action="button"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-browse-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="browse"
+            >
+              <Title as={3} size="base" weight="bold" id="products-browse-label" data-testid="variant-label">
+                {ui.blocks.variants.products.browse}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-browse"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-3"
+                  ratio="4/3"
+                  rating="show"
+                  action="none"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-showcase-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="showcase"
+            >
+              <Title as={3} size="base" weight="bold" id="products-showcase-label" data-testid="variant-label">
+                {ui.blocks.variants.products.showcase}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-showcase"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-3"
+                  ratio="3/4"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-rail-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="rail"
+            >
+              <Title as={3} size="base" weight="bold" id="products-rail-label" data-testid="variant-label">
+                {ui.blocks.variants.products.rail}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-rail"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="rail"
+                  cols="1-3"
+                  ratio="4/3"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-railCompact-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="railCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="products-railCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.products.railCompact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-railCompact"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="rail"
+                  cols="1-3"
+                  ratio="1/1"
+                  rating="hide"
+                  action="button"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/CommerceStorefrontPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/CommerceStorefrontPage.tsx
new file mode 100644
index 0000000..b00ef26
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/CommerceStorefrontPage.tsx
@@ -0,0 +1,396 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-storefront page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroClassic,
+  Link,
+  Stack,
+  StoreHero,
+  Text,
+  Title,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+const STOREHERO_ACTIONS = {
+  mode: "two",
+  cta: ui.commerce.storeHero.cta,
+  href: "#/catalog",
+  secondary: ui.commerce.storeHero.secondary,
+  secondaryHref: "#/delivery",
+} as const;
+
+export function CommerceStorefrontPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceStorefront}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-hero-title"
+            data-testid="catalog-block"
+            data-block="hero"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-hero-title">
+                {ui.blocks.names.hero}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.hero}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-shop-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="shop"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.shop}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-shop"
+                  title={ui.cases.shop.hero.title}
+                  text={ui.cases.shop.hero.text}
+                  actions={{
+                    cta: ui.cases.shop.hero.cta,
+                    href: "#/pricing",
+                    secondary: ui.cases.shop.hero.secondary,
+                    secondaryHref: "#/pricing",
+                    emailLabel: ui.promo.newsletter.label,
+                    mode: "one",
+                  }}
+                  media={{
+                    codeTitle: ui.vibe.code.title,
+                    prompt: ui.vibe.code.prompt,
+                    lines: terminal,
+                    kind: "image",
+                    side: "start",
+                  }}
+                  layout="split"
+                  scale="default"
+                  tone="muted"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-storehero-title"
+            data-testid="catalog-block"
+            data-block="storehero"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-storehero-title">
+                {ui.blocks.names.storehero}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.storehero}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storehero-overlay-label"
+              data-testid="variant"
+              data-block="storehero"
+              data-variant="overlay"
+            >
+              <Title as={3} size="base" weight="bold" id="storehero-overlay-label" data-testid="variant-label">
+                {ui.blocks.variants.storehero.overlay}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreHero
+                  id="storehero-overlay"
+                  title={ui.commerce.storeHero.title}
+                  lead={ui.commerce.storeHero.lead}
+                  badge={ui.commerce.storeHero.badge}
+                  perks={perks}
+                  card={ui.commerce.storeHero.card}
+                  actions={STOREHERO_ACTIONS}
+                  layout="overlay"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlay))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storehero-overlayStart-label"
+              data-testid="variant"
+              data-block="storehero"
+              data-variant="overlayStart"
+            >
+              <Title as={3} size="base" weight="bold" id="storehero-overlayStart-label" data-testid="variant-label">
+                {ui.blocks.variants.storehero.overlayStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreHero
+                  id="storehero-overlayStart"
+                  title={ui.commerce.storeHero.title}
+                  lead={ui.commerce.storeHero.lead}
+                  badge={ui.commerce.storeHero.badge}
+                  perks={perks}
+                  card={ui.commerce.storeHero.card}
+                  actions={STOREHERO_ACTIONS}
+                  layout="overlay"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlayStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storehero-backdrop-label"
+              data-testid="variant"
+              data-block="storehero"
+              data-variant="backdrop"
+            >
+              <Title as={3} size="base" weight="bold" id="storehero-backdrop-label" data-testid="variant-label">
+                {ui.blocks.variants.storehero.backdrop}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreHero
+                  id="storehero-backdrop"
+                  title={ui.commerce.storeHero.title}
+                  lead={ui.commerce.storeHero.lead}
+                  badge={ui.commerce.storeHero.badge}
+                  perks={perks}
+                  card={ui.commerce.storeHero.card}
+                  actions={STOREHERO_ACTIONS}
+                  layout="backdrop"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.backdrop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storehero-muted-label"
+              data-testid="variant"
+              data-block="storehero"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="storehero-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.storehero.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreHero
+                  id="storehero-muted"
+                  title={ui.commerce.storeHero.title}
+                  lead={ui.commerce.storeHero.lead}
+                  badge={ui.commerce.storeHero.badge}
+                  perks={perks}
+                  card={ui.commerce.storeHero.card}
+                  actions={{ ...STOREHERO_ACTIONS, mode: "one" }}
+                  layout="overlay"
+                  mediaSide="end"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-usp-title"
+            data-testid="catalog-block"
+            data-block="usp"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-usp-title">
+                {ui.blocks.names.usp}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.usp}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-strip-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="strip"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-strip-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.strip}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-strip"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="strip"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-cards-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-cards"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="cards"
+                  tone="default"
+                  density="default"
+                  title={ui.commerce.usp.title}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-stripCompact-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="stripCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-stripCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.stripCompact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-stripCompact"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="strip"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.stripCompact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-bar-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.bar}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-bar"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="bar"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-barMuted-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="barMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-barMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.barMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-barMuted"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="bar"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.barMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/ContentArticlePage.tsx b/apps/host-react/xgen/screens/CatalogScreen/ContentArticlePage.tsx
new file mode 100644
index 0000000..6c345a8
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/ContentArticlePage.tsx
@@ -0,0 +1,174 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-article page of CatalogScreen.
+
+import {
+  ArticleBody,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Section,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function ContentArticlePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentArticle}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-article-title"
+            data-testid="catalog-block"
+            data-block="article"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-article-title">
+                {ui.blocks.names.article}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.article}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="article-column-label"
+              data-testid="variant"
+              data-block="article"
+              data-variant="column"
+            >
+              <Title as={3} size="base" weight="bold" id="article-column-label" data-testid="variant-label">
+                {ui.blocks.variants.article.column}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ArticleBody
+                  id="article-column"
+                  title={ui.vibe.article.title}
+                  sections={article}
+                  empty={ui.empty.sections}
+                  tocTitle={ui.vibe.article.toc}
+                  layout="column"
+                  quotes="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="article-toc-label"
+              data-testid="variant"
+              data-block="article"
+              data-variant="toc"
+            >
+              <Title as={3} size="base" weight="bold" id="article-toc-label" data-testid="variant-label">
+                {ui.blocks.variants.article.toc}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ArticleBody
+                  id="article-toc"
+                  title={ui.vibe.article.title}
+                  sections={article}
+                  empty={ui.empty.sections}
+                  tocTitle={ui.vibe.article.toc}
+                  layout="toc"
+                  quotes="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="article-plain-label"
+              data-testid="variant"
+              data-block="article"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="article-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.article.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ArticleBody
+                  id="article-plain"
+                  title={ui.vibe.article.title}
+                  sections={article}
+                  empty={ui.empty.sections}
+                  tocTitle={ui.vibe.article.toc}
+                  layout="column"
+                  quotes="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="article-muted-label"
+              data-testid="variant"
+              data-block="article"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="article-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.article.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ArticleBody
+                  id="article-muted"
+                  title={ui.vibe.article.title}
+                  sections={article}
+                  empty={ui.empty.sections}
+                  tocTitle={ui.vibe.article.toc}
+                  layout="column"
+                  quotes="show"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/ContentBlogPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/ContentBlogPage.tsx
new file mode 100644
index 0000000..84f0ef0
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/ContentBlogPage.tsx
@@ -0,0 +1,357 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-blog page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+const POSTS_FILTER = { topics, label: ui.vibe.posts.topics, topic: "" } as const;
+
+export function ContentBlogPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentBlog}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 9)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-posts-title"
+            data-testid="catalog-block"
+            data-block="posts"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-posts-title">
+                {ui.blocks.names.posts}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.posts}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-grid-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.grid}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-grid"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-filters-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="filters"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-filters-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.filters}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-filters"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, topic: "Design", mode: "topics" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-twoUp-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="twoUp"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-twoUp-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.twoUp}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-twoUp"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-2"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-row4-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="row4"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-row4-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.row4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-row4"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-4"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.row4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-news4-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="news4"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-news4-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.news4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-news4"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-4"
+                  media="image"
+                  meta="news"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.news4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-list-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-list-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-list"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="list"
+                  cols="1-3"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-magazine-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="magazine"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-magazine-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.magazine}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-magazine"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="magazine"
+                  cols="1-3"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-textOnly-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="textOnly"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-textOnly-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.textOnly}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-textOnly"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  media="none"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-digest-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="digest"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-digest-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.digest}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-digest"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  media="none"
+                  meta="short"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/ContentPostHeaderPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/ContentPostHeaderPage.tsx
new file mode 100644
index 0000000..ae2a84d
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/ContentPostHeaderPage.tsx
@@ -0,0 +1,185 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-post-header page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+
+export function ContentPostHeaderPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentPostHeader}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-postheader-title"
+            data-testid="catalog-block"
+            data-block="postheader"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-postheader-title">
+                {ui.blocks.names.postheader}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.postheader}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postheader-start-label"
+              data-testid="variant"
+              data-block="postheader"
+              data-variant="start"
+            >
+              <Title as={3} size="base" weight="bold" id="postheader-start-label" data-testid="variant-label">
+                {ui.blocks.variants.postheader.start}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostHeader
+                  id="postheader-start"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.labels}
+                  layout="start"
+                  cover="show"
+                  meta="full"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.start))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postheader-center-label"
+              data-testid="variant"
+              data-block="postheader"
+              data-variant="center"
+            >
+              <Title as={3} size="base" weight="bold" id="postheader-center-label" data-testid="variant-label">
+                {ui.blocks.variants.postheader.center}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostHeader
+                  id="postheader-center"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.labels}
+                  layout="center"
+                  cover="show"
+                  meta="full"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.center))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postheader-noCover-label"
+              data-testid="variant"
+              data-block="postheader"
+              data-variant="noCover"
+            >
+              <Title as={3} size="base" weight="bold" id="postheader-noCover-label" data-testid="variant-label">
+                {ui.blocks.variants.postheader.noCover}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostHeader
+                  id="postheader-noCover"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.labels}
+                  layout="start"
+                  cover="hide"
+                  meta="full"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.noCover))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postheader-minimal-label"
+              data-testid="variant"
+              data-block="postheader"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="postheader-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.postheader.minimal}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostHeader
+                  id="postheader-minimal"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.labels}
+                  layout="center"
+                  cover="hide"
+                  meta="short"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.minimal))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.tsx
new file mode 100644
index 0000000..4282b2a
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.tsx
@@ -0,0 +1,271 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-post-header-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Post,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+const POSTSPLIT_EXTRAS = {
+  role: ui.content.postSplit.role,
+  bio: ui.content.postSplit.bio,
+  views: ui.content.postSplit.views,
+  likes: ui.content.postSplit.likes,
+  tags: posttags,
+  outline,
+} as const;
+
+export function ContentPostHeaderSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentPostHeaderSplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-postsplit-title"
+            data-testid="catalog-block"
+            data-block="postsplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-postsplit-title">
+                {ui.blocks.names.postsplit}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.postsplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-centerShare-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="centerShare"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-centerShare-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.centerShare}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-centerShare"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="center"
+                  mediaSide="end"
+                  author="line"
+                  cover="wide"
+                  actions="pair"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.centerShare))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-splitTags-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="splitTags"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-splitTags-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.splitTags}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-splitTags"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="split"
+                  mediaSide="end"
+                  author="line"
+                  cover="wide"
+                  actions="pair"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitTags))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-splitBioStart-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="splitBioStart"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-splitBioStart-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.splitBioStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-splitBioStart"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="split"
+                  mediaSide="start"
+                  author="bio"
+                  cover="wide"
+                  actions="wide"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitBioStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-splitSquare-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="splitSquare"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-splitSquare-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.splitSquare}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-splitSquare"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="split"
+                  mediaSide="end"
+                  author="line"
+                  cover="square"
+                  actions="icons"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitSquare))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-outlineStart-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="outlineStart"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-outlineStart-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.outlineStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-outlineStart"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="outline"
+                  mediaSide="start"
+                  author="line"
+                  cover="wide"
+                  actions="pair"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.outlineStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-splitStats-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="splitStats"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-splitStats-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.splitStats}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-splitStats"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="split"
+                  mediaSide="end"
+                  author="card"
+                  cover="wide"
+                  actions="pair"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitStats))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/ContentPostShowcasePage.tsx b/apps/host-react/xgen/screens/CatalogScreen/ContentPostShowcasePage.tsx
new file mode 100644
index 0000000..ef27bab
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/ContentPostShowcasePage.tsx
@@ -0,0 +1,201 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-post-showcase page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostShowcase,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+
+export function ContentPostShowcasePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentPostShowcase}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-postshowcase-title"
+            data-testid="catalog-block"
+            data-block="postshowcase"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-postshowcase-title">
+                {ui.blocks.names.postshowcase}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.postshowcase}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postshowcase-introCards-label"
+              data-testid="variant"
+              data-block="postshowcase"
+              data-variant="introCards"
+            >
+              <Title as={3} size="base" weight="bold" id="postshowcase-introCards-label" data-testid="variant-label">
+                {ui.blocks.variants.postshowcase.introCards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostShowcase
+                  id="postshowcase-introCards"
+                  title={ui.content.postShowcase.title}
+                  lead={ui.content.postShowcase.lead}
+                  badge={ui.content.postShowcase.badge}
+                  posts={posts}
+                  empty={ui.empty.posts}
+                  labels={ui.content.labels}
+                  action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                  layout="intro"
+                  cols="3"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postshowcase-featuredEnd-label"
+              data-testid="variant"
+              data-block="postshowcase"
+              data-variant="featuredEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="postshowcase-featuredEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.postshowcase.featuredEnd}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostShowcase
+                  id="postshowcase-featuredEnd"
+                  title={ui.content.postShowcase.title}
+                  lead={ui.content.postShowcase.lead}
+                  badge={ui.content.postShowcase.badge}
+                  posts={posts}
+                  empty={ui.empty.posts}
+                  labels={ui.content.labels}
+                  action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                  layout="featured"
+                  cols="3"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.featuredEnd))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postshowcase-overlay3-label"
+              data-testid="variant"
+              data-block="postshowcase"
+              data-variant="overlay3"
+            >
+              <Title as={3} size="base" weight="bold" id="postshowcase-overlay3-label" data-testid="variant-label">
+                {ui.blocks.variants.postshowcase.overlay3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostShowcase
+                  id="postshowcase-overlay3"
+                  title={ui.content.postShowcase.title}
+                  lead={ui.content.postShowcase.lead}
+                  badge={ui.content.postShowcase.badge}
+                  posts={posts}
+                  empty={ui.empty.posts}
+                  labels={ui.content.labels}
+                  action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                  layout="overlay"
+                  cols="3"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postshowcase-overlay2-label"
+              data-testid="variant"
+              data-block="postshowcase"
+              data-variant="overlay2"
+            >
+              <Title as={3} size="base" weight="bold" id="postshowcase-overlay2-label" data-testid="variant-label">
+                {ui.blocks.variants.postshowcase.overlay2}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostShowcase
+                  id="postshowcase-overlay2"
+                  title={ui.content.postShowcase.title}
+                  lead={ui.content.postShowcase.lead}
+                  badge={ui.content.postShowcase.badge}
+                  posts={posts}
+                  empty={ui.empty.posts}
+                  labels={ui.content.labels}
+                  action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                  layout="overlay"
+                  cols="2"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay2))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/ContentStoryTabsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/ContentStoryTabsPage.tsx
new file mode 100644
index 0000000..eda0d63
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/ContentStoryTabsPage.tsx
@@ -0,0 +1,154 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-story-tabs page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoryTabs,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+
+export function ContentStoryTabsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentStoryTabs}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 3)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-storytabs-title"
+            data-testid="catalog-block"
+            data-block="storytabs"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-storytabs-title">
+                {ui.blocks.names.storytabs}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.storytabs}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storytabs-yearTabs-label"
+              data-testid="variant"
+              data-block="storytabs"
+              data-variant="yearTabs"
+            >
+              <Title as={3} size="base" weight="bold" id="storytabs-yearTabs-label" data-testid="variant-label">
+                {ui.blocks.variants.storytabs.yearTabs}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoryTabs
+                  id="storytabs-yearTabs"
+                  title={ui.company.storyTabs.title}
+                  lead={ui.company.storyTabs.lead}
+                  badge={ui.company.storyTabs.badge}
+                  steps={milestones}
+                  empty={ui.empty.milestones}
+                  active="milestone-runtimes"
+                  labels={ui.company.storyTabs.labels}
+                  layout="years"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storytabs-carouselSplit-label"
+              data-testid="variant"
+              data-block="storytabs"
+              data-variant="carouselSplit"
+            >
+              <Title as={3} size="base" weight="bold" id="storytabs-carouselSplit-label" data-testid="variant-label">
+                {ui.blocks.variants.storytabs.carouselSplit}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoryTabs
+                  id="storytabs-carouselSplit"
+                  title={ui.company.storyTabs.title}
+                  lead={ui.company.storyTabs.lead}
+                  badge={ui.company.storyTabs.badge}
+                  steps={milestones}
+                  empty={ui.empty.milestones}
+                  active="milestone-runtimes"
+                  labels={ui.company.storyTabs.labels}
+                  layout="carousel"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.carouselSplit))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storytabs-yearTabsMuted-label"
+              data-testid="variant"
+              data-block="storytabs"
+              data-variant="yearTabsMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="storytabs-yearTabsMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.storytabs.yearTabsMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoryTabs
+                  id="storytabs-yearTabsMuted"
+                  title={ui.company.storyTabs.title}
+                  lead={ui.company.storyTabs.lead}
+                  badge={ui.company.storyTabs.badge}
+                  steps={milestones}
+                  empty={ui.empty.milestones}
+                  active="milestone-runtimes"
+                  labels={ui.company.storyTabs.labels}
+                  layout="years"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabsMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/ContentTimelinePage.tsx b/apps/host-react/xgen/screens/CatalogScreen/ContentTimelinePage.tsx
new file mode 100644
index 0000000..3b7e2fa
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/ContentTimelinePage.tsx
@@ -0,0 +1,174 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-timeline page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MilestoneTimeline,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+
+export function ContentTimelinePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentTimeline}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-timeline-title"
+            data-testid="catalog-block"
+            data-block="timeline"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-timeline-title">
+                {ui.blocks.names.timeline}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.timeline}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="timeline-split-label"
+              data-testid="variant"
+              data-block="timeline"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="timeline-split-label" data-testid="variant-label">
+                {ui.blocks.variants.timeline.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MilestoneTimeline
+                  id="timeline-split"
+                  title={ui.company.timeline.title}
+                  lead={ui.company.timeline.lead}
+                  milestones={milestones}
+                  empty={ui.empty.milestones}
+                  layout="split"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="timeline-stacked-label"
+              data-testid="variant"
+              data-block="timeline"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="timeline-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.timeline.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MilestoneTimeline
+                  id="timeline-stacked"
+                  title={ui.company.timeline.title}
+                  lead={ui.company.timeline.lead}
+                  milestones={milestones}
+                  empty={ui.empty.milestones}
+                  layout="stacked"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="timeline-row-label"
+              data-testid="variant"
+              data-block="timeline"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="timeline-row-label" data-testid="variant-label">
+                {ui.blocks.variants.timeline.row}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MilestoneTimeline
+                  id="timeline-row"
+                  title={ui.company.timeline.title}
+                  lead={ui.company.timeline.lead}
+                  milestones={milestones}
+                  empty={ui.empty.milestones}
+                  layout="row"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="timeline-rowMuted-label"
+              data-testid="variant"
+              data-block="timeline"
+              data-variant="rowMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="timeline-rowMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.timeline.rowMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MilestoneTimeline
+                  id="timeline-rowMuted"
+                  title={ui.company.timeline.title}
+                  lead={ui.company.timeline.lead}
+                  milestones={milestones}
+                  empty={ui.empty.milestones}
+                  layout="row"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.rowMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/IndexPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/IndexPage.tsx
new file mode 100644
index 0000000..cf26163
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/IndexPage.tsx
@@ -0,0 +1,498 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The index page of CatalogScreen.
+
+import { Block, Container, Link, List, ListItem, Stack, Text, Title, tpl } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const CATALOG = [
+  {
+    id: "marketing",
+    titleId: "section-marketing-title",
+    title: ui.catalog.sections.marketing.title,
+    text: ui.catalog.sections.marketing.text,
+    categories: [
+      {
+        id: "marketing-navigation",
+        href: "#/marketing-navigation",
+        name: ui.catalog.categories.marketingNavigation,
+        blocks: 3,
+        variants: 14,
+      },
+      { id: "marketing-hero", href: "#/marketing-hero", name: ui.catalog.categories.marketingHero, blocks: 1, variants: 15 },
+      {
+        id: "marketing-hero-split",
+        href: "#/marketing-hero-split",
+        name: ui.catalog.categories.marketingHeroSplit,
+        blocks: 1,
+        variants: 7,
+      },
+      {
+        id: "marketing-page-head",
+        href: "#/marketing-page-head",
+        name: ui.catalog.categories.marketingPageHead,
+        blocks: 1,
+        variants: 3,
+      },
+      {
+        id: "marketing-page-trail",
+        href: "#/marketing-page-trail",
+        name: ui.catalog.categories.marketingPageTrail,
+        blocks: 1,
+        variants: 4,
+      },
+      { id: "marketing-features", href: "#/marketing-features", name: ui.catalog.categories.marketingFeatures, blocks: 3, variants: 17 },
+      {
+        id: "marketing-features-split",
+        href: "#/marketing-features-split",
+        name: ui.catalog.categories.marketingFeaturesSplit,
+        blocks: 1,
+        variants: 5,
+      },
+      {
+        id: "marketing-feature-cards",
+        href: "#/marketing-feature-cards",
+        name: ui.catalog.categories.marketingFeatureCards,
+        blocks: 1,
+        variants: 4,
+      },
+      {
+        id: "marketing-media-list",
+        href: "#/marketing-media-list",
+        name: ui.catalog.categories.marketingMediaList,
+        blocks: 1,
+        variants: 6,
+      },
+      {
+        id: "marketing-showcases",
+        href: "#/marketing-showcases",
+        name: ui.catalog.categories.marketingShowcases,
+        blocks: 4,
+        variants: 15,
+      },
+      {
+        id: "marketing-how-it-works",
+        href: "#/marketing-how-it-works",
+        name: ui.catalog.categories.marketingHowItWorks,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "marketing-proof", href: "#/marketing-proof", name: ui.catalog.categories.marketingProof, blocks: 3, variants: 14 },
+      { id: "marketing-stats", href: "#/marketing-stats", name: ui.catalog.categories.marketingStats, blocks: 1, variants: 8 },
+      {
+        id: "marketing-testimonials",
+        href: "#/marketing-testimonials",
+        name: ui.catalog.categories.marketingTestimonials,
+        blocks: 1,
+        variants: 10,
+      },
+      {
+        id: "marketing-testimonials-split",
+        href: "#/marketing-testimonials-split",
+        name: ui.catalog.categories.marketingTestimonialsSplit,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "marketing-pricing", href: "#/marketing-pricing", name: ui.catalog.categories.marketingPricing, blocks: 2, variants: 13 },
+      {
+        id: "marketing-pricing-tools",
+        href: "#/marketing-pricing-tools",
+        name: ui.catalog.categories.marketingPricingTools,
+        blocks: 3,
+        variants: 12,
+      },
+      { id: "marketing-faq", href: "#/marketing-faq", name: ui.catalog.categories.marketingFaq, blocks: 2, variants: 14 },
+      { id: "marketing-cta", href: "#/marketing-cta", name: ui.catalog.categories.marketingCta, blocks: 1, variants: 11 },
+      {
+        id: "marketing-cta-proof",
+        href: "#/marketing-cta-proof",
+        name: ui.catalog.categories.marketingCtaProof,
+        blocks: 1,
+        variants: 7,
+      },
+      { id: "marketing-team", href: "#/marketing-team", name: ui.catalog.categories.marketingTeam, blocks: 1, variants: 6 },
+      { id: "marketing-about", href: "#/marketing-about", name: ui.catalog.categories.marketingAbout, blocks: 2, variants: 7 },
+      {
+        id: "marketing-portfolio",
+        href: "#/marketing-portfolio",
+        name: ui.catalog.categories.marketingPortfolio,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "marketing-careers", href: "#/marketing-careers", name: ui.catalog.categories.marketingCareers, blocks: 1, variants: 4 },
+      { id: "marketing-gallery", href: "#/marketing-gallery", name: ui.catalog.categories.marketingGallery, blocks: 2, variants: 10 },
+      { id: "marketing-footer", href: "#/marketing-footer", name: ui.catalog.categories.marketingFooter, blocks: 2, variants: 9 },
+      {
+        id: "marketing-footer-split",
+        href: "#/marketing-footer-split",
+        name: ui.catalog.categories.marketingFooterSplit,
+        blocks: 1,
+        variants: 6,
+      },
+    ],
+  },
+  {
+    id: "content",
+    titleId: "section-content-title",
+    title: ui.catalog.sections.content.title,
+    text: ui.catalog.sections.content.text,
+    categories: [
+      { id: "content-blog", href: "#/content-blog", name: ui.catalog.categories.contentBlog, blocks: 1, variants: 9 },
+      {
+        id: "content-post-showcase",
+        href: "#/content-post-showcase",
+        name: ui.catalog.categories.contentPostShowcase,
+        blocks: 1,
+        variants: 4,
+      },
+      {
+        id: "content-post-header",
+        href: "#/content-post-header",
+        name: ui.catalog.categories.contentPostHeader,
+        blocks: 1,
+        variants: 4,
+      },
+      {
+        id: "content-post-header-split",
+        href: "#/content-post-header-split",
+        name: ui.catalog.categories.contentPostHeaderSplit,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "content-article", href: "#/content-article", name: ui.catalog.categories.contentArticle, blocks: 1, variants: 4 },
+      { id: "content-timeline", href: "#/content-timeline", name: ui.catalog.categories.contentTimeline, blocks: 1, variants: 4 },
+      { id: "content-story-tabs", href: "#/content-story-tabs", name: ui.catalog.categories.contentStoryTabs, blocks: 1, variants: 3 },
+    ],
+  },
+  {
+    id: "promo",
+    titleId: "section-promo-title",
+    title: ui.catalog.sections.promo.title,
+    text: ui.catalog.sections.promo.text,
+    categories: [
+      { id: "promo-banners", href: "#/promo-banners", name: ui.catalog.categories.promoBanners, blocks: 2, variants: 12 },
+      { id: "promo-newsletter", href: "#/promo-newsletter", name: ui.catalog.categories.promoNewsletter, blocks: 1, variants: 5 },
+    ],
+  },
+  {
+    id: "support",
+    titleId: "section-support-title",
+    title: ui.catalog.sections.support.title,
+    text: ui.catalog.sections.support.text,
+    categories: [
+      { id: "support-contact", href: "#/support-contact", name: ui.catalog.categories.supportContact, blocks: 2, variants: 10 },
+      { id: "support-states", href: "#/support-states", name: ui.catalog.categories.supportStates, blocks: 1, variants: 5 },
+    ],
+  },
+  {
+    id: "commerce",
+    titleId: "section-commerce-title",
+    title: ui.catalog.sections.commerce.title,
+    text: ui.catalog.sections.commerce.text,
+    categories: [
+      {
+        id: "commerce-storefront",
+        href: "#/commerce-storefront",
+        name: ui.catalog.categories.commerceStorefront,
+        blocks: 3,
+        variants: 10,
+      },
+      {
+        id: "commerce-categories",
+        href: "#/commerce-categories",
+        name: ui.catalog.categories.commerceCategories,
+        blocks: 1,
+        variants: 7,
+      },
+      { id: "commerce-products", href: "#/commerce-products", name: ui.catalog.categories.commerceProducts, blocks: 1, variants: 9 },
+      { id: "commerce-product", href: "#/commerce-product", name: ui.catalog.categories.commerceProduct, blocks: 3, variants: 13 },
+      { id: "commerce-cart", href: "#/commerce-cart", name: ui.catalog.categories.commerceCart, blocks: 3, variants: 10 },
+      { id: "commerce-checkout", href: "#/commerce-checkout", name: ui.catalog.categories.commerceCheckout, blocks: 3, variants: 8 },
+      { id: "commerce-delivery", href: "#/commerce-delivery", name: ui.catalog.categories.commerceDelivery, blocks: 4, variants: 12 },
+      { id: "commerce-orders", href: "#/commerce-orders", name: ui.catalog.categories.commerceOrders, blocks: 1, variants: 4 },
+    ],
+  },
+  {
+    id: "app",
+    titleId: "section-app-title",
+    title: ui.catalog.sections.app.title,
+    text: ui.catalog.sections.app.text,
+    categories: [
+      { id: "app-shell", href: "#/app-shell", name: ui.catalog.categories.appShell, blocks: 3, variants: 12 },
+      {
+        id: "app-dashboard-shells",
+        href: "#/app-dashboard-shells",
+        name: ui.catalog.categories.appDashboardShells,
+        blocks: 1,
+        variants: 12,
+      },
+      { id: "app-widgets", href: "#/app-widgets", name: ui.catalog.categories.appWidgets, blocks: 3, variants: 12 },
+      { id: "app-boards", href: "#/app-boards", name: ui.catalog.categories.appBoards, blocks: 2, variants: 8 },
+      { id: "app-states", href: "#/app-states", name: ui.catalog.categories.appStates, blocks: 2, variants: 10 },
+      { id: "app-auth", href: "#/app-auth", name: ui.catalog.categories.appAuth, blocks: 2, variants: 12 },
+      { id: "app-auth-pages", href: "#/app-auth-pages", name: ui.catalog.categories.appAuthPages, blocks: 1, variants: 9 },
+      { id: "app-settings", href: "#/app-settings", name: ui.catalog.categories.appSettings, blocks: 1, variants: 4 },
+      { id: "app-onboarding", href: "#/app-onboarding", name: ui.catalog.categories.appOnboarding, blocks: 2, variants: 11 },
+      { id: "app-guidance", href: "#/app-guidance", name: ui.catalog.categories.appGuidance, blocks: 2, variants: 8 },
+    ],
+  },
+] as const;
+const PAGES = [
+  {
+    id: "saas-landing",
+    visit: "page-saas-landing",
+    href: "#/page-saas-landing",
+    name: ui.catalog.pages.saasLanding.title,
+    text: ui.catalog.pages.saasLanding.text,
+    blocks: 11,
+  },
+  {
+    id: "company",
+    visit: "page-company",
+    href: "#/page-company",
+    name: ui.catalog.pages.company.title,
+    text: ui.catalog.pages.company.text,
+    blocks: 9,
+  },
+  {
+    id: "portfolio",
+    visit: "page-portfolio",
+    href: "#/page-portfolio",
+    name: ui.catalog.pages.portfolio.title,
+    text: ui.catalog.pages.portfolio.text,
+    blocks: 7,
+  },
+  {
+    id: "store-home",
+    visit: "page-store-home",
+    href: "#/page-store-home",
+    name: ui.catalog.pages.storeHome.title,
+    text: ui.catalog.pages.storeHome.text,
+    blocks: 9,
+  },
+  {
+    id: "store-home-2",
+    visit: "page-store-home-2",
+    href: "#/page-store-home-2",
+    name: ui.catalog.pages.storeHome2.title,
+    text: ui.catalog.pages.storeHome2.text,
+    blocks: 7,
+  },
+  {
+    id: "store-catalog",
+    visit: "page-store-catalog",
+    href: "#/page-store-catalog",
+    name: ui.catalog.pages.storeCatalog.title,
+    text: ui.catalog.pages.storeCatalog.text,
+    blocks: 6,
+  },
+  {
+    id: "product-detail",
+    visit: "page-product-detail",
+    href: "#/page-product-detail",
+    name: ui.catalog.pages.productDetail.title,
+    text: ui.catalog.pages.productDetail.text,
+    blocks: 6,
+  },
+  {
+    id: "cart",
+    visit: "page-cart",
+    href: "#/page-cart",
+    name: ui.catalog.pages.cart.title,
+    text: ui.catalog.pages.cart.text,
+    blocks: 5,
+  },
+  {
+    id: "checkout",
+    visit: "page-checkout",
+    href: "#/page-checkout",
+    name: ui.catalog.pages.checkout.title,
+    text: ui.catalog.pages.checkout.text,
+    blocks: 4,
+  },
+  {
+    id: "shell-classic",
+    visit: "page-shell-classic",
+    href: "#/page-shell-classic",
+    name: ui.catalog.pages.shellClassic.title,
+    text: ui.catalog.pages.shellClassic.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-inset",
+    visit: "page-shell-inset",
+    href: "#/page-shell-inset",
+    name: ui.catalog.pages.shellInset.title,
+    text: ui.catalog.pages.shellInset.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail",
+    visit: "page-shell-rail",
+    href: "#/page-shell-rail",
+    name: ui.catalog.pages.shellRail.title,
+    text: ui.catalog.pages.shellRail.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-footer",
+    visit: "page-shell-rail-footer",
+    href: "#/page-shell-rail-footer",
+    name: ui.catalog.pages.shellRailFooter.title,
+    text: ui.catalog.pages.shellRailFooter.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed",
+    visit: "page-shell-collapsed",
+    href: "#/page-shell-collapsed",
+    name: ui.catalog.pages.shellCollapsed.title,
+    text: ui.catalog.pages.shellCollapsed.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level",
+    visit: "page-shell-two-level",
+    href: "#/page-shell-two-level",
+    name: ui.catalog.pages.shellTwoLevel.title,
+    text: ui.catalog.pages.shellTwoLevel.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level-full",
+    visit: "page-shell-two-level-full",
+    href: "#/page-shell-two-level-full",
+    name: ui.catalog.pages.shellTwoLevelFull.title,
+    text: ui.catalog.pages.shellTwoLevelFull.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-end",
+    visit: "page-shell-end",
+    href: "#/page-shell-end",
+    name: ui.catalog.pages.shellEnd.title,
+    text: ui.catalog.pages.shellEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-end",
+    visit: "page-shell-rail-end",
+    href: "#/page-shell-rail-end",
+    name: ui.catalog.pages.shellRailEnd.title,
+    text: ui.catalog.pages.shellRailEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-top-only",
+    visit: "page-shell-top-only",
+    href: "#/page-shell-top-only",
+    name: ui.catalog.pages.shellTopOnly.title,
+    text: ui.catalog.pages.shellTopOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-side-only",
+    visit: "page-shell-side-only",
+    href: "#/page-shell-side-only",
+    name: ui.catalog.pages.shellSideOnly.title,
+    text: ui.catalog.pages.shellSideOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed-end",
+    visit: "page-shell-collapsed-end",
+    href: "#/page-shell-collapsed-end",
+    name: ui.catalog.pages.shellCollapsedEnd.title,
+    text: ui.catalog.pages.shellCollapsedEnd.text,
+    blocks: 1,
+  },
+] as const;
+
+export function IndexPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Stack gap="2" align="stretch">
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="catalog-title">
+              {ui.catalog.title}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.catalog.intro}
+            </Text>
+          </Stack>
+          {(CATALOG ?? []).map((section) => (
+            <Stack key={section.id}
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby={section.titleId}
+              data-testid="catalog-section"
+              data-section={section.id}
+            >
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id={section.titleId}>
+                  {section.title}
+                </Title>
+                <Text size="sm" className="max-w-2xl text-muted-foreground">
+                  {section.text}
+                </Text>
+              </Stack>
+              <List tag="ul" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="category-list">
+                {(section.categories ?? []).map((cat) => (
+                  <ListItem key={cat.id} className="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+                    <Link
+                      href={cat.href}
+                      variant="default"
+                      className="font-bold"
+                      data-testid="category-link"
+                      data-category={cat.id}
+                      data-visit={cat.id}
+                    >
+                      {cat.name}
+                    </Link>
+                    <Text size="sm" className="text-muted-foreground" data-testid="category-count">
+                      {tpl(ui.catalog.count, cat.blocks, cat.variants)}
+                    </Text>
+                  </ListItem>
+                ))}
+              </List>
+            </Stack>
+          ))}
+          <Stack gap="4" align="stretch" role="group" aria-labelledby="pages-title-2" data-testid="pages-section">
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="pages-title-2">
+                {ui.catalog.pagesTitle}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.catalog.pagesText}
+              </Text>
+            </Stack>
+            <List tag="ul" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="page-list">
+              {(PAGES ?? []).map((p) => (
+                <ListItem key={p.id} className="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+                  <Link
+                    href={p.href}
+                    variant="default"
+                    className="font-bold"
+                    data-testid="page-link"
+                    data-page={p.id}
+                    data-visit={p.visit}
+                  >
+                    {p.name}
+                  </Link>
+                  <Text size="sm" className="text-muted-foreground">
+                    {p.text}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground" data-testid="page-count">
+                    {tpl(ui.catalog.pageCount, p.blocks)}
+                  </Text>
+                </ListItem>
+              ))}
+            </List>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingAboutPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingAboutPage.tsx
new file mode 100644
index 0000000..43e0b65
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingAboutPage.tsx
@@ -0,0 +1,306 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-about page of CatalogScreen.
+
+import {
+  AboutCompany,
+  AboutMe,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Skill,
+  type Spec,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+
+const ABOUTME_ACTIONS = { mode: "two", cta: ui.company.aboutMe.cta, href: "#/work", secondary: ui.company.aboutMe.more, secondaryHref: "#/contact" } as const;
+
+export function MarketingAboutPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingAbout}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 7)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-about-title"
+            data-testid="catalog-block"
+            data-block="about"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-about-title">
+                {ui.blocks.names.about}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.about}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="about-split-label"
+              data-testid="variant"
+              data-block="about"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="about-split-label" data-testid="variant-label">
+                {ui.blocks.variants.about.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutCompany
+                  id="about-split"
+                  title={ui.company.about.title}
+                  lead={ui.company.about.lead}
+                  stats={stats}
+                  values={values}
+                  layout="split"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="about-stacked-label"
+              data-testid="variant"
+              data-block="about"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="about-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.about.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutCompany
+                  id="about-stacked"
+                  title={ui.company.about.title}
+                  lead={ui.company.about.lead}
+                  stats={stats}
+                  values={values}
+                  layout="stacked"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="about-muted-label"
+              data-testid="variant"
+              data-block="about"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="about-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.about.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutCompany
+                  id="about-muted"
+                  title={ui.company.about.title}
+                  lead={ui.company.about.lead}
+                  stats={stats}
+                  values={values}
+                  layout="split"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-aboutme-title"
+            data-testid="catalog-block"
+            data-block="aboutme"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-aboutme-title">
+                {ui.blocks.names.aboutme}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.aboutme}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="aboutme-facts-label"
+              data-testid="variant"
+              data-block="aboutme"
+              data-variant="facts"
+            >
+              <Title as={3} size="base" weight="bold" id="aboutme-facts-label" data-testid="variant-label">
+                {ui.blocks.variants.aboutme.facts}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutMe
+                  id="aboutme-facts"
+                  title={ui.company.aboutMe.title}
+                  lead={ui.company.aboutMe.lead}
+                  badge={ui.company.aboutMe.badge}
+                  facts={profilefacts}
+                  skills={skills}
+                  labels={ui.company.aboutMe}
+                  actions={ABOUTME_ACTIONS}
+                  layout="facts"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.facts))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="aboutme-factsEnd-label"
+              data-testid="variant"
+              data-block="aboutme"
+              data-variant="factsEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="aboutme-factsEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.aboutme.factsEnd}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutMe
+                  id="aboutme-factsEnd"
+                  title={ui.company.aboutMe.title}
+                  lead={ui.company.aboutMe.lead}
+                  badge={ui.company.aboutMe.badge}
+                  facts={profilefacts}
+                  skills={skills}
+                  labels={ui.company.aboutMe}
+                  actions={ABOUTME_ACTIONS}
+                  layout="facts"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.factsEnd))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="aboutme-skills-label"
+              data-testid="variant"
+              data-block="aboutme"
+              data-variant="skills"
+            >
+              <Title as={3} size="base" weight="bold" id="aboutme-skills-label" data-testid="variant-label">
+                {ui.blocks.variants.aboutme.skills}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutMe
+                  id="aboutme-skills"
+                  title={ui.company.aboutMe.title}
+                  lead={ui.company.aboutMe.lead}
+                  badge={ui.company.aboutMe.badge}
+                  facts={profilefacts}
+                  skills={skills}
+                  labels={ui.company.aboutMe}
+                  actions={ABOUTME_ACTIONS}
+                  layout="skills"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skills))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="aboutme-skillsMuted-label"
+              data-testid="variant"
+              data-block="aboutme"
+              data-variant="skillsMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="aboutme-skillsMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.aboutme.skillsMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutMe
+                  id="aboutme-skillsMuted"
+                  title={ui.company.aboutMe.title}
+                  lead={ui.company.aboutMe.lead}
+                  badge={ui.company.aboutMe.badge}
+                  facts={profilefacts}
+                  skills={skills}
+                  labels={ui.company.aboutMe}
+                  actions={ABOUTME_ACTIONS}
+                  layout="skills"
+                  mediaSide="end"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skillsMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingCareersPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingCareersPage.tsx
new file mode 100644
index 0000000..e15e2b3
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingCareersPage.tsx
@@ -0,0 +1,194 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-careers page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  JobBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Department,
+  type Job,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+
+export function MarketingCareersPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingCareers}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-jobs-title"
+            data-testid="catalog-block"
+            data-block="jobs"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-jobs-title">
+                {ui.blocks.names.jobs}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.jobs}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="jobs-grid-label"
+              data-testid="variant"
+              data-block="jobs"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="jobs-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.jobs.grid}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <JobBoard
+                  id="jobs-grid"
+                  title={ui.company.jobs.title}
+                  lead={ui.company.jobs.lead}
+                  jobs={jobs}
+                  empty={ui.empty.jobs}
+                  departments={departments}
+                  labels={ui.company.jobs}
+                  layout="grid"
+                  salary="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="jobs-salary-label"
+              data-testid="variant"
+              data-block="jobs"
+              data-variant="salary"
+            >
+              <Title as={3} size="base" weight="bold" id="jobs-salary-label" data-testid="variant-label">
+                {ui.blocks.variants.jobs.salary}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <JobBoard
+                  id="jobs-salary"
+                  title={ui.company.jobs.title}
+                  lead={ui.company.jobs.lead}
+                  jobs={jobs}
+                  empty={ui.empty.jobs}
+                  departments={departments}
+                  labels={ui.company.jobs}
+                  layout="grid"
+                  salary="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.salary))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="jobs-grouped-label"
+              data-testid="variant"
+              data-block="jobs"
+              data-variant="grouped"
+            >
+              <Title as={3} size="base" weight="bold" id="jobs-grouped-label" data-testid="variant-label">
+                {ui.blocks.variants.jobs.grouped}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <JobBoard
+                  id="jobs-grouped"
+                  title={ui.company.jobs.title}
+                  lead={ui.company.jobs.lead}
+                  jobs={jobs}
+                  empty={ui.empty.jobs}
+                  departments={departments}
+                  labels={ui.company.jobs}
+                  layout="grouped"
+                  salary="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="jobs-table-label"
+              data-testid="variant"
+              data-block="jobs"
+              data-variant="table"
+            >
+              <Title as={3} size="base" weight="bold" id="jobs-table-label" data-testid="variant-label">
+                {ui.blocks.variants.jobs.table}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <JobBoard
+                  id="jobs-table"
+                  title={ui.company.jobs.title}
+                  lead={ui.company.jobs.lead}
+                  jobs={jobs}
+                  empty={ui.empty.jobs}
+                  departments={departments}
+                  labels={ui.company.jobs}
+                  layout="table"
+                  salary="show"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.table))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingCtaPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingCtaPage.tsx
new file mode 100644
index 0000000..3266004
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingCtaPage.tsx
@@ -0,0 +1,382 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-cta page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const CTA_ACTIONS = {
+  cta: ui.site.home.ctaButton,
+  href: "#/pricing",
+  secondary: ui.site.home.ctaSecondary,
+  secondaryHref: "#/",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+
+export function MarketingCtaPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingCta}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 11)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cta-title"
+            data-testid="catalog-block"
+            data-block="cta"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cta-title">
+                {ui.blocks.names.cta}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cta}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-card-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-card-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.card}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-card"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="card"
+                  tone="muted"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-banner-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="banner"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-banner-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.banner}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-banner"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="banner"
+                  tone="muted"
+                  proof="none"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.banner))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-row-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-row-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.row}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-row"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="row"
+                  tone="muted"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-form-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="form"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-form-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.form}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-form"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "form" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="band"
+                  tone="muted"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-quote-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="quote"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-quote-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.quote}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-quote"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="band"
+                  tone="muted"
+                  proof="quote"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-band-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="band"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-band-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.band}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-band"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="band"
+                  tone="muted"
+                  proof="none"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-split-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-split-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-split"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "two" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="split"
+                  tone="default"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-compact-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-compact"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="card"
+                  tone="muted"
+                  proof="none"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-saas-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="saas"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-saas-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.saas}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-saas"
+                  title={ui.cases.saas.cta.title}
+                  text={ui.cases.saas.cta.text}
+                  actions={{
+                    ...CTA_ACTIONS,
+                    cta: ui.cases.saas.cta.cta,
+                    secondary: ui.cases.saas.cta.secondary,
+                    mode: "two",
+                  }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="band"
+                  tone="muted"
+                  proof="none"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-shop-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="shop"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-shop-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.shop}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-shop"
+                  title={ui.cases.shop.cta.title}
+                  text={ui.cases.shop.cta.text}
+                  actions={{
+                    ...CTA_ACTIONS,
+                    cta: ui.cases.shop.cta.cta,
+                    secondary: ui.cases.shop.cta.secondary,
+                    mode: "one",
+                  }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="split"
+                  tone="default"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-agency-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="agency"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-agency-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.agency}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-agency"
+                  title={ui.cases.agency.cta.title}
+                  text={ui.cases.agency.cta.text}
+                  actions={{
+                    ...CTA_ACTIONS,
+                    cta: ui.cases.agency.cta.cta,
+                    secondary: ui.cases.agency.cta.secondary,
+                    mode: "two",
+                  }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="card"
+                  tone="muted"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingCtaProofPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingCtaProofPage.tsx
new file mode 100644
index 0000000..df30425
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingCtaProofPage.tsx
@@ -0,0 +1,304 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-cta-proof page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaProof,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Logo,
+  type Stat,
+  type Zone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+const CTAPROOF_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.ctaProof.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.ctaProof.secondary,
+  secondaryHref: "#/contact",
+} as const;
+const CTAPROOF_CONTENT = { logos, features, stats, zones } as const;
+
+export function MarketingCtaProofPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingCtaProof}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 7)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-ctaproof-title"
+            data-testid="catalog-block"
+            data-block="ctaproof"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-ctaproof-title">
+                {ui.blocks.names.ctaproof}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.ctaproof}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-centerLogos-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="centerLogos"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-centerLogos-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.centerLogos}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-centerLogos"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="center"
+                  proof="logos"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerLogos))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-centerFeatures-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="centerFeatures"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-centerFeatures-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.centerFeatures}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-centerFeatures"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="center"
+                  proof="features"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerFeatures))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-centerStats-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="centerStats"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-centerStats-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.centerStats}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-centerStats"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="center"
+                  proof="stats"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerStats))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-splitStats-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="splitStats"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-splitStats-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.splitStats}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-splitStats"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="split"
+                  proof="stats"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-splitStatsStart-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="splitStatsStart"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-splitStatsStart-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.splitStatsStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-splitStatsStart"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="split"
+                  proof="stats"
+                  mediaSide="start"
+                  tone="default"
+                  note={ui.marketing.ctaProof.note}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStatsStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-splitRows-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="splitRows"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-splitRows-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.splitRows}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-splitRows"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="split"
+                  proof="rows"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitRows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-splitZones-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="splitZones"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-splitZones-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.splitZones}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-splitZones"
+                  title={ui.marketing.ctaProof.zonesTitle}
+                  lead={ui.marketing.ctaProof.zonesLead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="split"
+                  proof="zones"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitZones))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingFaqPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingFaqPage.tsx
new file mode 100644
index 0000000..390f146
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingFaqPage.tsx
@@ -0,0 +1,523 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-faq page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FaqList,
+  FaqSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Question,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const QUESTIONS_FIELDS = {
+  "id": "id",
+  "question": "title",
+  "answer": "metadata.answer.value",
+  "category": "terms|term:faq_category",
+  "icon": "metadata.icon.value",
+} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+
+const FAQ_FILTER = { tabs: faqtabs, label: ui.vibe.faq.tabs, category: "" } as const;
+const FAQSPLIT_LABELS = {
+  cta: ui.marketing.faqSplit.cta,
+  more: ui.marketing.faqSplit.more,
+  asideTitle: ui.marketing.faqSplit.asideTitle,
+  asideText: ui.marketing.faqSplit.asideText,
+  asideCta: ui.marketing.faqSplit.asideCta,
+  search: ui.marketing.faqSplit.search,
+  popular: ui.marketing.faqSplit.popular,
+} as const;
+
+export function MarketingFaqPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFaq}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 14)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-faq-title"
+            data-testid="catalog-block"
+            data-block="faq"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-faq-title">
+                {ui.blocks.names.faq}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.faq}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-list-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-list-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-list"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-chat-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="chat"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-chat-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.chat}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-chat"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="chat"
+                  cols="1"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-search-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="search"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-search-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.search}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-search"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-tabs-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="tabs"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-tabs-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.tabs}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-tabs"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, category: "billing", mode: "categories" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-twoColumns-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="twoColumns"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-twoColumns-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.twoColumns}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-twoColumns"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="2"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-muted-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-muted"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.muted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-roomy-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="roomy"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-roomy-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.roomy}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-roomy"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.roomy))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-faqsplit-title"
+            data-testid="catalog-block"
+            data-block="faqsplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-faqsplit-title">
+                {ui.blocks.names.faqsplit}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.faqsplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-headSplit-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="headSplit"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-headSplit-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.headSplit}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-headSplit"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="head"
+                  cards="grid3"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.headSplit))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-helpCard-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="helpCard"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-helpCard-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.helpCard}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-helpCard"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="aside"
+                  cards="grid3"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-picture-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="picture"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-picture-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.picture}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-picture"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="media"
+                  cards="grid3"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.picture))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-finder-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="finder"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-finder-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.finder}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-finder"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="search"
+                  cards="grid3"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.finder))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-cards3-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="cards3"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-cards3-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.cards3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-cards3"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="cards"
+                  cards="grid3"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-cards4-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="cards4"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-cards4-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.cards4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-cards4"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="cards"
+                  cards="grid4"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-cardsIcons-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="cardsIcons"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-cardsIcons-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.cardsIcons}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-cardsIcons"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="cards"
+                  cards="icons"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cardsIcons))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.tsx
new file mode 100644
index 0000000..b6bfed0
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.tsx
@@ -0,0 +1,181 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-feature-cards page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureShowcase,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+
+export function MarketingFeatureCardsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFeatureCards}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-featureshowcase-title"
+            data-testid="catalog-block"
+            data-block="featureshowcase"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-featureshowcase-title">
+                {ui.blocks.names.featureshowcase}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.featureshowcase}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featureshowcase-pictureCards3-label"
+              data-testid="variant"
+              data-block="featureshowcase"
+              data-variant="pictureCards3"
+            >
+              <Title as={3} size="base" weight="bold" id="featureshowcase-pictureCards3-label" data-testid="variant-label">
+                {ui.blocks.variants.featureshowcase.pictureCards3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureShowcase
+                  id="featureshowcase-pictureCards3"
+                  title={ui.marketing.featureShowcase.title}
+                  lead={ui.marketing.featureShowcase.lead}
+                  features={values}
+                  empty={ui.empty.features}
+                  more={ui.marketing.featureShowcase.more}
+                  item="picture"
+                  cols="3"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featureshowcase-panelCards4-label"
+              data-testid="variant"
+              data-block="featureshowcase"
+              data-variant="panelCards4"
+            >
+              <Title as={3} size="base" weight="bold" id="featureshowcase-panelCards4-label" data-testid="variant-label">
+                {ui.blocks.variants.featureshowcase.panelCards4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureShowcase
+                  id="featureshowcase-panelCards4"
+                  title={ui.marketing.featureShowcase.title}
+                  lead={ui.marketing.featureShowcase.lead}
+                  features={features}
+                  empty={ui.empty.features}
+                  more={ui.marketing.featureShowcase.more}
+                  item="panel"
+                  cols="4"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featureshowcase-pictureCards4-label"
+              data-testid="variant"
+              data-block="featureshowcase"
+              data-variant="pictureCards4"
+            >
+              <Title as={3} size="base" weight="bold" id="featureshowcase-pictureCards4-label" data-testid="variant-label">
+                {ui.blocks.variants.featureshowcase.pictureCards4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureShowcase
+                  id="featureshowcase-pictureCards4"
+                  title={ui.marketing.featureShowcase.title}
+                  lead={ui.marketing.featureShowcase.lead}
+                  features={features}
+                  empty={ui.empty.features}
+                  more={ui.marketing.featureShowcase.more}
+                  item="picture"
+                  cols="4"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featureshowcase-panelCards3-label"
+              data-testid="variant"
+              data-block="featureshowcase"
+              data-variant="panelCards3"
+            >
+              <Title as={3} size="base" weight="bold" id="featureshowcase-panelCards3-label" data-testid="variant-label">
+                {ui.blocks.variants.featureshowcase.panelCards3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureShowcase
+                  id="featureshowcase-panelCards3"
+                  title={ui.marketing.featureShowcase.title}
+                  lead={ui.marketing.featureShowcase.lead}
+                  features={values}
+                  empty={ui.empty.features}
+                  more={ui.marketing.featureShowcase.more}
+                  item="panel"
+                  cols="3"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards3))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingFeaturesPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingFeaturesPage.tsx
new file mode 100644
index 0000000..8fc9c2f
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingFeaturesPage.tsx
@@ -0,0 +1,580 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-features page of CatalogScreen.
+
+import {
+  BeforeAfter,
+  Block,
+  Box,
+  Container,
+  FeatureGrid,
+  Group,
+  IconWall,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Contrast,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+
+export function MarketingFeaturesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFeatures}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 17)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-features-title"
+            data-testid="catalog-block"
+            data-block="features"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-features-title">
+                {ui.blocks.names.features}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.features}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-grid-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="features-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.features.grid}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-grid"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  item="card"
+                  mediaSide="end"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-grid2-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="features-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.features.grid2}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-grid2"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-2"
+                  item="card"
+                  mediaSide="end"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-tiles4-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="tiles4"
+            >
+              <Title as={3} size="base" weight="bold" id="features-tiles4-label" data-testid="variant-label">
+                {ui.blocks.variants.features.tiles4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-tiles4"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-4"
+                  item="tile"
+                  mediaSide="end"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-cells4-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="cells4"
+            >
+              <Title as={3} size="base" weight="bold" id="features-cells4-label" data-testid="variant-label">
+                {ui.blocks.variants.features.cells4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-cells4"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-4"
+                  item="cell"
+                  mediaSide="end"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.cells4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-rows-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="rows"
+            >
+              <Title as={3} size="base" weight="bold" id="features-rows-label" data-testid="variant-label">
+                {ui.blocks.variants.features.rows}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-rows"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="rows"
+                  cols="1-3"
+                  item="card"
+                  mediaSide="end"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-rowsStart-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="rowsStart"
+            >
+              <Title as={3} size="base" weight="bold" id="features-rowsStart-label" data-testid="variant-label">
+                {ui.blocks.variants.features.rowsStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-rowsStart"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="rows"
+                  cols="1-3"
+                  item="card"
+                  mediaSide="start"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-rowsAlternate-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="rowsAlternate"
+            >
+              <Title as={3} size="base" weight="bold" id="features-rowsAlternate-label" data-testid="variant-label">
+                {ui.blocks.variants.features.rowsAlternate}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-rowsAlternate"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="rows"
+                  cols="1-3"
+                  item="card"
+                  mediaSide="alternate"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-tilesMuted-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="tilesMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="features-tilesMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.features.tilesMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-tilesMuted"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  item="tile"
+                  mediaSide="end"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tilesMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-iconwall-title"
+            data-testid="catalog-block"
+            data-block="iconwall"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-iconwall-title">
+                {ui.blocks.names.iconwall}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.iconwall}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-tiles4-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="tiles4"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-tiles4-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.tiles4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-tiles4"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="4"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-tiles3-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="tiles3"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-tiles3-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.tiles3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-tiles3"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="3"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-chips6-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="chips6"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-chips6-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.chips6}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-chips6"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="6"
+                  item="chip"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-chips4-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="chips4"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-chips4-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.chips4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-chips4"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="4"
+                  item="chip"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-muted-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-muted"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="4"
+                  item="tile"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-beforeafter-title"
+            data-testid="catalog-block"
+            data-block="beforeafter"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-beforeafter-title">
+                {ui.blocks.names.beforeafter}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.beforeafter}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="beforeafter-cards-label"
+              data-testid="variant"
+              data-block="beforeafter"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="beforeafter-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.beforeafter.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BeforeAfter
+                  id="beforeafter-cards"
+                  title={ui.vibe.beforeafter.title}
+                  points={beforeafter}
+                  empty={ui.empty.points}
+                  labels={ui.vibe.beforeafter.labels}
+                  layout="cards"
+                  icons="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="beforeafter-rows-label"
+              data-testid="variant"
+              data-block="beforeafter"
+              data-variant="rows"
+            >
+              <Title as={3} size="base" weight="bold" id="beforeafter-rows-label" data-testid="variant-label">
+                {ui.blocks.variants.beforeafter.rows}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BeforeAfter
+                  id="beforeafter-rows"
+                  title={ui.vibe.beforeafter.title}
+                  points={beforeafter}
+                  empty={ui.empty.points}
+                  labels={ui.vibe.beforeafter.labels}
+                  layout="rows"
+                  icons="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="beforeafter-plain-label"
+              data-testid="variant"
+              data-block="beforeafter"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="beforeafter-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.beforeafter.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BeforeAfter
+                  id="beforeafter-plain"
+                  title={ui.vibe.beforeafter.title}
+                  points={beforeafter}
+                  empty={ui.empty.points}
+                  labels={ui.vibe.beforeafter.labels}
+                  layout="cards"
+                  icons="hide"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="beforeafter-muted-label"
+              data-testid="variant"
+              data-block="beforeafter"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="beforeafter-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.beforeafter.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BeforeAfter
+                  id="beforeafter-muted"
+                  title={ui.vibe.beforeafter.title}
+                  points={beforeafter}
+                  empty={ui.empty.points}
+                  labels={ui.vibe.beforeafter.labels}
+                  layout="cards"
+                  icons="show"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.tsx
new file mode 100644
index 0000000..8b6185d
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.tsx
@@ -0,0 +1,233 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-features-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+const FEATURESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.featureSplit.cta,
+  href: "#/start",
+  secondary: ui.marketing.featureSplit.secondary,
+  secondaryHref: "#/work",
+} as const;
+
+export function MarketingFeaturesSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFeaturesSplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 5)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-featuresplit-title"
+            data-testid="catalog-block"
+            data-block="featuresplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-featuresplit-title">
+                {ui.blocks.names.featuresplit}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.featuresplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-gridStart-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="gridStart"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-gridStart-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.gridStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-gridStart"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="grid"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-statsStart-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="statsStart"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-statsStart-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.statsStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-statsStart"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="stats"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.statsStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-gridMuted-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="gridMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-gridMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.gridMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-gridMuted"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="grid"
+                  mediaSide="end"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridMuted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-metricCards-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="metricCards"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-metricCards-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.metricCards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-metricCards"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="metrics"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-featureCards-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="featureCards"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-featureCards-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.featureCards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-featureCards"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="cards"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.featureCards))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingFooterPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingFooterPage.tsx
new file mode 100644
index 0000000..4172a5e
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingFooterPage.tsx
@@ -0,0 +1,321 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-footer page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SiteFooter,
+  SitemapFooter,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+
+const SITEMAP_SIGNUP = { title: ui.vibe.sitemap.signupTitle, label: ui.vibe.sitemap.signupLabel, submit: ui.vibe.sitemap.signupSubmit } as const;
+
+export function MarketingFooterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFooter}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 9)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-footer-title"
+            data-testid="catalog-block"
+            data-block="footer"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-footer-title">
+                {ui.blocks.names.footer}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.footer}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footer-minimal-label"
+              data-testid="variant"
+              data-block="footer"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="footer-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.footer.minimal}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteFooter
+                  labels={ui.site.footer}
+                  layout="minimal"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.minimal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footer-centered-label"
+              data-testid="variant"
+              data-block="footer"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="footer-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.footer.centered}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteFooter
+                  labels={ui.site.footer}
+                  layout="centered"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footer-compact-label"
+              data-testid="variant"
+              data-block="footer"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="footer-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.footer.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteFooter
+                  labels={ui.site.footer}
+                  layout="minimal"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.compact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-sitemap-title"
+            data-testid="catalog-block"
+            data-block="sitemap"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-sitemap-title">
+                {ui.blocks.names.sitemap}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.sitemap}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-columns-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="columns"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-columns-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.columns}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-columns"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="columns"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.columns))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-card-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-card-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.card}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-card"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="card"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-row-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-row-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.row}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-row"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="row"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-newsletter-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="newsletter"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-newsletter-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.newsletter}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-newsletter"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "first" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="columns"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.newsletter))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-status-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="status"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-status-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.status}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-status"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "show" }}
+                  layout="columns"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.status))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-compact-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-compact"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="columns"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.compact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingFooterSplitPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingFooterSplitPage.tsx
new file mode 100644
index 0000000..f4fa120
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingFooterSplitPage.tsx
@@ -0,0 +1,266 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-footer-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FooterSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type MegaGroup,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+
+const FOOTERSPLIT_EXTRAS = { stats, points: features, contacts, channels: community } as const;
+
+export function MarketingFooterSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFooterSplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-footersplit-title"
+            data-testid="catalog-block"
+            data-block="footersplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-footersplit-title">
+                {ui.blocks.names.footersplit}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.footersplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-statsCards-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="statsCards"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-statsCards-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.statsCards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-statsCards"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="stats"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.statsCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-splitPoints-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="splitPoints"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-splitPoints-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.splitPoints}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-splitPoints"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="points"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitPoints))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-splitLinks-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="splitLinks"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-splitLinks-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.splitLinks}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-splitLinks"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="links"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitLinks))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-newsletterStart-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="newsletterStart"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-newsletterStart-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.newsletterStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-newsletterStart"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="newsletter"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.newsletterStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-splitContacts-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="splitContacts"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-splitContacts-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.splitContacts}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-splitContacts"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="contacts"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitContacts))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-channelsStart-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="channelsStart"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-channelsStart-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.channelsStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-channelsStart"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="channels"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.channelsStart))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingGalleryPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingGalleryPage.tsx
new file mode 100644
index 0000000..54fc7de
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingGalleryPage.tsx
@@ -0,0 +1,382 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-gallery page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PhotoGallery,
+  Stack,
+  TemplateGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Filter,
+  type Photo,
+  type Template,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+const TEMPLATES_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "views": "metadata.views.value|compact",
+  "likes": "metadata.likes.value|compact",
+  "topic": "metadata.topic.value",
+} as const;
+const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+
+export function MarketingGalleryPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingGallery}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-photos-title"
+            data-testid="catalog-block"
+            data-block="photos"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-photos-title">
+                {ui.blocks.names.photos}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.photos}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-grid-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.grid}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-grid"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="grid"
+                  captions="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-gridPlain-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="gridPlain"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-gridPlain-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.gridPlain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-gridPlain"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="grid"
+                  captions="hide"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.gridPlain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-masonry-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="masonry"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-masonry-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.masonry}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-masonry"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="masonry"
+                  captions="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-mosaic-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="mosaic"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-mosaic-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.mosaic}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-mosaic"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="mosaic"
+                  captions="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.mosaic))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-featured-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="featured"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-featured-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.featured}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-featured"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="featured"
+                  captions="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.featured))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-cards-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-cards"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="cards"
+                  captions="show"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.cards))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-templates-title"
+            data-testid="catalog-block"
+            data-block="templates"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-templates-title">
+                {ui.blocks.names.templates}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.templates}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="templates-grid4-label"
+              data-testid="variant"
+              data-block="templates"
+              data-variant="grid4"
+            >
+              <Title as={3} size="base" weight="bold" id="templates-grid4-label" data-testid="variant-label">
+                {ui.blocks.variants.templates.grid4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TemplateGrid
+                  id="templates-grid4"
+                  title={ui.vibe.templates.title}
+                  templates={templates}
+                  filters={templateFilters}
+                  labels={ui.vibe.templates}
+                  browseHref="#/"
+                  empty={ui.empty.templates}
+                  cols="1-4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="templates-grid3-label"
+              data-testid="variant"
+              data-block="templates"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="templates-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.templates.grid3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TemplateGrid
+                  id="templates-grid3"
+                  title={ui.vibe.templates.title}
+                  templates={templates}
+                  filters={templateFilters}
+                  labels={ui.vibe.templates}
+                  browseHref="#/"
+                  empty={ui.empty.templates}
+                  cols="1-3"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="templates-muted-label"
+              data-testid="variant"
+              data-block="templates"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="templates-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.templates.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TemplateGrid
+                  id="templates-muted"
+                  title={ui.vibe.templates.title}
+                  templates={templates}
+                  filters={templateFilters}
+                  labels={ui.vibe.templates}
+                  browseHref="#/"
+                  empty={ui.empty.templates}
+                  cols="1-4"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.muted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="templates-roomy-label"
+              data-testid="variant"
+              data-block="templates"
+              data-variant="roomy"
+            >
+              <Title as={3} size="base" weight="bold" id="templates-roomy-label" data-testid="variant-label">
+                {ui.blocks.variants.templates.roomy}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TemplateGrid
+                  id="templates-roomy"
+                  title={ui.vibe.templates.title}
+                  templates={templates}
+                  filters={templateFilters}
+                  labels={ui.vibe.templates}
+                  browseHref="#/"
+                  empty={ui.empty.templates}
+                  cols="1-4"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.roomy))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingHeroPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingHeroPage.tsx
new file mode 100644
index 0000000..e98fa96
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingHeroPage.tsx
@@ -0,0 +1,530 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-hero page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroClassic,
+  HeroPrompt,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type NavLink,
+  type Topic,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { prompts as promptsEntries } from "@ui8kit/app-shared/data/prompts";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const PROMPTS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const prompts = fromCodex<Topic>(promptsEntries, PROMPTS_FIELDS, CODEX);
+
+const HERO_ACTIONS = {
+  cta: ui.site.home.cta,
+  href: "#/pricing",
+  secondary: ui.site.home.secondary,
+  secondaryHref: "#/pricing",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+const HERO_MEDIA = { codeTitle: ui.vibe.code.title, prompt: ui.vibe.code.prompt, lines: terminal } as const;
+
+export function MarketingHeroPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingHero}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 15)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-hero-title"
+            data-testid="catalog-block"
+            data-block="hero"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-hero-title">
+                {ui.blocks.names.hero}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.hero}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-centered-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.centered}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-centered"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-screenshot-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="screenshot"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-screenshot-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.screenshot}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-screenshot"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.screenshot))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-backdrop-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="backdrop"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-backdrop-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.backdrop}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-backdrop"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "backdrop", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="muted"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.backdrop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-code-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="code"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-code-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.code}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-code"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "two" }}
+                  media={{ ...HERO_MEDIA, kind: "code", side: "end" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.code))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-cluster-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="cluster"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-cluster-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.cluster}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-cluster"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "cluster", side: "end" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.cluster))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-display-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="display"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-display-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.display}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-display"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="display"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.display))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-form-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="form"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-form-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.form}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-form"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "form" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.form))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-prompt-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="prompt"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-prompt-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.prompt}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroPrompt
+                  title={ui.vibe.hero.title}
+                  actions={{ ...HERO_ACTIONS, emailLabel: ui.vibe.hero.promptLabel, mode: "form" }}
+                  composer={{ attachLabel: ui.vibe.hero.attach, modelLabel: ui.vibe.hero.model }}
+                  nav={{
+                    brand: ui.site.header.brand,
+                    links: navlinks,
+                    current: "link-product",
+                    skip: ui.site.header.skip,
+                    label: ui.site.header.nav,
+                    login: ui.site.header.login,
+                    loginHref: "#/login",
+                  }}
+                  density="compact"
+                  badge={ui.vibe.hero.badgeLabel}
+                  badgeMark={ui.vibe.hero.badgeMark}
+                  topics={prompts}
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.prompt))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-twoActions-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="twoActions"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-twoActions-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.twoActions}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-twoActions"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "two" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.twoActions))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-split-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-split-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-split"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-splitStart-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="splitStart"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-splitStart-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.splitStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-splitStart"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "two" }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.splitStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-muted-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-muted"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="muted"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.muted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-saas-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="saas"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-saas-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.saas}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-saas"
+                  title={ui.cases.saas.hero.title}
+                  text={ui.cases.saas.hero.text}
+                  actions={{
+                    ...HERO_ACTIONS,
+                    cta: ui.cases.saas.hero.cta,
+                    secondary: ui.cases.saas.hero.secondary,
+                    mode: "two",
+                  }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.saas))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-shop-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="shop"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.shop}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-shop"
+                  title={ui.cases.shop.hero.title}
+                  text={ui.cases.shop.hero.text}
+                  actions={{
+                    ...HERO_ACTIONS,
+                    cta: ui.cases.shop.hero.cta,
+                    secondary: ui.cases.shop.hero.secondary,
+                    mode: "one",
+                  }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+                  layout="split"
+                  scale="default"
+                  tone="muted"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-blog-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="blog"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-blog-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.blog}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-blog"
+                  title={ui.cases.blog.hero.title}
+                  text={ui.cases.blog.hero.text}
+                  actions={{
+                    ...HERO_ACTIONS,
+                    cta: ui.cases.blog.hero.cta,
+                    secondary: ui.cases.blog.hero.secondary,
+                    mode: "one",
+                  }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="compact"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.blog))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingHeroSplitPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingHeroSplitPage.tsx
new file mode 100644
index 0000000..6723490
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingHeroSplitPage.tsx
@@ -0,0 +1,328 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-hero-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroSplit,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Plan,
+  type Quote,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+const HEROSPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.heroSplit.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.heroSplit.secondary,
+  secondaryHref: "#/features",
+} as const;
+const HEROSPLIT_CONTENT = {
+  stats,
+  features,
+  people: testimonials,
+  plans: tiers,
+  proof: ui.marketing.heroSplit.proof,
+  card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+} as const;
+
+export function MarketingHeroSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingHeroSplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 7)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-herosplit-title"
+            data-testid="catalog-block"
+            data-block="herosplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-herosplit-title">
+                {ui.blocks.names.herosplit}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.herosplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-statsCards-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="statsCards"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-statsCards-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.statsCards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-statsCards"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="stats"
+                  media="picture"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.statsCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-avatars-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="avatars"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-avatars-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.avatars}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-avatars"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="avatars"
+                  media="picture"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.avatars))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-miniCards-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="miniCards"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-miniCards-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.miniCards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-miniCards"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="minis"
+                  media="card"
+                  mediaSide="end"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.miniCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-quoteStats-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="quoteStats"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-quoteStats-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.quoteStats}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-quoteStats"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="quote"
+                  media="card"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.quoteStats))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-planCards-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="planCards"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-planCards-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.planCards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-planCards"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="none"
+                  media="plans"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.planCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-pictureGrid-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="pictureGrid"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-pictureGrid-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.pictureGrid}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-pictureGrid"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="stats"
+                  media="grid"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGrid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-pictureGridStart-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="pictureGridStart"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-pictureGridStart-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.pictureGridStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-pictureGridStart"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="avatars"
+                  media="grid"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGridStart))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingHowItWorksPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingHowItWorksPage.tsx
new file mode 100644
index 0000000..840f92b
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingHowItWorksPage.tsx
@@ -0,0 +1,232 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-how-it-works page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StepsList,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+
+export function MarketingHowItWorksPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingHowItWorks}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-steps-title"
+            data-testid="catalog-block"
+            data-block="steps"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-steps-title">
+                {ui.blocks.names.steps}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.steps}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-row-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-row-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.row}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-row"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="row"
+                  marker="number"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-rowIcons-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="rowIcons"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-rowIcons-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.rowIcons}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-rowIcons"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="row"
+                  marker="icon"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-column-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="column"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-column-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.column}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-column"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="column"
+                  marker="number"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-centered-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.centered}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-centered"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="row"
+                  marker="number"
+                  align="center"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-columnIcons-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="columnIcons"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-columnIcons-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.columnIcons}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-columnIcons"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="column"
+                  marker="icon"
+                  align="start"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.columnIcons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-compact-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-compact"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="row"
+                  marker="number"
+                  align="start"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.compact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingMediaListPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingMediaListPage.tsx
new file mode 100644
index 0000000..1d9dc57
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingMediaListPage.tsx
@@ -0,0 +1,297 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-media-list page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MediaList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Feature,
+  type Post,
+  type Review,
+  type Stat,
+  type Step,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+const MEDIALIST_LABELS = {
+  count: ui.marketing.mediaList.count,
+  minutes: ui.content.labels.minutes,
+  featured: ui.marketing.mediaList.featured,
+  rating: ui.testimonials.rating,
+  figures: ui.marketing.mediaList.supportFigures,
+} as const;
+const MEDIALIST_EXTRAS = { stats, steps, posts, topics: categories, channels, reviews } as const;
+
+export function MarketingMediaListPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingMediaList}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-medialist-title"
+            data-testid="catalog-block"
+            data-block="medialist"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-medialist-title">
+                {ui.blocks.names.medialist}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.medialist}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-figuresStart-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="figuresStart"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-figuresStart-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.figuresStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-figuresStart"
+                  title={ui.marketing.mediaList.figures.title}
+                  lead={ui.marketing.mediaList.figures.lead}
+                  badge={ui.marketing.mediaList.figures.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.figures.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.figures.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="figures"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.figuresStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-proofReview-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="proofReview"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-proofReview-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.proofReview}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-proofReview"
+                  title={ui.marketing.mediaList.proof.title}
+                  lead={ui.marketing.mediaList.proof.lead}
+                  badge={ui.marketing.mediaList.proof.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.proof.list }}
+                  actions={{
+                    mode: "two",
+                    cta: ui.marketing.mediaList.proof.cta,
+                    href: "#/start",
+                    secondary: ui.marketing.mediaList.proof.secondary,
+                    secondaryHref: "#/more",
+                  }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="proof"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.proofReview))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-stepsRows-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="stepsRows"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-stepsRows-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.stepsRows}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-stepsRows"
+                  title={ui.marketing.mediaList.steps.title}
+                  lead={ui.marketing.mediaList.steps.lead}
+                  badge={ui.marketing.mediaList.steps.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.steps.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.steps.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="steps"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.stepsRows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-latestPosts-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="latestPosts"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-latestPosts-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.latestPosts}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-latestPosts"
+                  title={ui.marketing.mediaList.posts.title}
+                  lead={ui.marketing.mediaList.posts.lead}
+                  badge={ui.marketing.mediaList.posts.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.posts.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.posts.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="posts"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.latestPosts))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-topicRows-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="topicRows"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-topicRows-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.topicRows}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-topicRows"
+                  title={ui.marketing.mediaList.topics.title}
+                  lead={ui.marketing.mediaList.topics.lead}
+                  badge={ui.marketing.mediaList.topics.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.topics.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.topics.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="topics"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-contactStart-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="contactStart"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-contactStart-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.contactStart}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-contactStart"
+                  title={ui.marketing.mediaList.contact.title}
+                  lead={ui.marketing.mediaList.contact.lead}
+                  badge={ui.marketing.mediaList.contact.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.contact.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.contact.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="contact"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.contactStart))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingNavigationPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingNavigationPage.tsx
new file mode 100644
index 0000000..41842f3
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingNavigationPage.tsx
@@ -0,0 +1,494 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-navigation page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MegaMenu,
+  NavBar,
+  SiteHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+  type NavLink,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+const NAVBAR_ACTIONS = { cta: ui.site.header.cta, href: "#/", login: ui.site.header.login, loginHref: "#/login" } as const;
+
+export function MarketingNavigationPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingNavigation}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 14)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-header-title"
+            data-testid="catalog-block"
+            data-block="header"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-header-title">
+                {ui.blocks.names.header}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.header}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="header-inline-label"
+              data-testid="variant"
+              data-block="header"
+              data-variant="inline"
+            >
+              <Title as={3} size="base" weight="bold" id="header-inline-label" data-testid="variant-label">
+                {ui.blocks.variants.header.inline}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteHeader
+                  labels={ui.site.header}
+                  current="home"
+                  cta={ui.site.header.cta}
+                  layout="inline"
+                  position="static"
+                  actions="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.inline))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="header-stacked-label"
+              data-testid="variant"
+              data-block="header"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="header-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.header.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteHeader
+                  labels={ui.site.header}
+                  current="home"
+                  cta={ui.site.header.cta}
+                  layout="stacked"
+                  position="static"
+                  actions="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="header-sticky-label"
+              data-testid="variant"
+              data-block="header"
+              data-variant="sticky"
+            >
+              <Title as={3} size="base" weight="bold" id="header-sticky-label" data-testid="variant-label">
+                {ui.blocks.variants.header.sticky}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteHeader
+                  labels={ui.site.header}
+                  current="home"
+                  cta={ui.site.header.cta}
+                  layout="inline"
+                  position="sticky"
+                  actions="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.sticky))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="header-withCta-label"
+              data-testid="variant"
+              data-block="header"
+              data-variant="withCta"
+            >
+              <Title as={3} size="base" weight="bold" id="header-withCta-label" data-testid="variant-label">
+                {ui.blocks.variants.header.withCta}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteHeader
+                  labels={ui.site.header}
+                  current="home"
+                  cta={ui.site.header.cta}
+                  layout="inline"
+                  position="static"
+                  actions="cta"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.withCta))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-navbar-title"
+            data-testid="catalog-block"
+            data-block="navbar"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-navbar-title">
+                {ui.blocks.names.navbar}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.navbar}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-inline-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="inline"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-inline-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.inline}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="inline"
+                  over="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inline))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-split-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-split-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="split"
+                  over="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-search-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="search"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-search-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.search}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="search"
+                  over="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-media-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="media"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-media-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.media}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="inline"
+                  over="media"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-plain-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "none" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="inline"
+                  over="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.plain))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-inverse-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="inverse"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-inverse-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.inverse}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="inline"
+                  over="none"
+                  tone="inverse"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inverse))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-megamenu-title"
+            data-testid="catalog-block"
+            data-block="megamenu"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-megamenu-title">
+                {ui.blocks.names.megamenu}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.megamenu}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="megamenu-open-label"
+              data-testid="variant"
+              data-block="megamenu"
+              data-variant="open"
+            >
+              <Title as={3} size="base" weight="bold" id="megamenu-open-label" data-testid="variant-label">
+                {ui.blocks.variants.megamenu.open}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MegaMenu
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  trigger={ui.vibe.mega.trigger}
+                  links={navlinks}
+                  groups={megagroups}
+                  promoTitle={ui.vibe.mega.promoTitle}
+                  promoText={ui.vibe.mega.promoText}
+                  panel="open"
+                  cols="3"
+                  promo="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="megamenu-closed-label"
+              data-testid="variant"
+              data-block="megamenu"
+              data-variant="closed"
+            >
+              <Title as={3} size="base" weight="bold" id="megamenu-closed-label" data-testid="variant-label">
+                {ui.blocks.variants.megamenu.closed}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MegaMenu
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  trigger={ui.vibe.mega.trigger}
+                  links={navlinks}
+                  groups={megagroups}
+                  promoTitle={ui.vibe.mega.promoTitle}
+                  promoText={ui.vibe.mega.promoText}
+                  panel="closed"
+                  cols="3"
+                  promo="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.closed))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="megamenu-twoCols-label"
+              data-testid="variant"
+              data-block="megamenu"
+              data-variant="twoCols"
+            >
+              <Title as={3} size="base" weight="bold" id="megamenu-twoCols-label" data-testid="variant-label">
+                {ui.blocks.variants.megamenu.twoCols}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MegaMenu
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  trigger={ui.vibe.mega.trigger}
+                  links={navlinks}
+                  groups={megagroups}
+                  promoTitle={ui.vibe.mega.promoTitle}
+                  promoText={ui.vibe.mega.promoText}
+                  panel="open"
+                  cols="2"
+                  promo="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="megamenu-promo-label"
+              data-testid="variant"
+              data-block="megamenu"
+              data-variant="promo"
+            >
+              <Title as={3} size="base" weight="bold" id="megamenu-promo-label" data-testid="variant-label">
+                {ui.blocks.variants.megamenu.promo}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MegaMenu
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  trigger={ui.vibe.mega.trigger}
+                  links={navlinks}
+                  groups={megagroups}
+                  promoTitle={ui.vibe.mega.promoTitle}
+                  promoText={ui.vibe.mega.promoText}
+                  panel="open"
+                  cols="3"
+                  promo="card"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.promo))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingPageHeadPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingPageHeadPage.tsx
new file mode 100644
index 0000000..fb974ee
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingPageHeadPage.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-page-head page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageIntro,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function MarketingPageHeadPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPageHead}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 3)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-pagehead-title"
+            data-testid="catalog-block"
+            data-block="pagehead"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-pagehead-title">
+                {ui.blocks.names.pagehead}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.pagehead}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagehead-start-label"
+              data-testid="variant"
+              data-block="pagehead"
+              data-variant="start"
+            >
+              <Title as={3} size="base" weight="bold" id="pagehead-start-label" data-testid="variant-label">
+                {ui.blocks.variants.pagehead.start}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageIntro
+                  id="pagehead-start"
+                  title={ui.vibe.pagehead.title}
+                  text={ui.vibe.pagehead.text}
+                  cta={ui.vibe.pagehead.cta}
+                  href="#/"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.start))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagehead-center-label"
+              data-testid="variant"
+              data-block="pagehead"
+              data-variant="center"
+            >
+              <Title as={3} size="base" weight="bold" id="pagehead-center-label" data-testid="variant-label">
+                {ui.blocks.variants.pagehead.center}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageIntro
+                  id="pagehead-center"
+                  title={ui.vibe.pagehead.title}
+                  text={ui.vibe.pagehead.text}
+                  cta={ui.vibe.pagehead.cta}
+                  href="#/"
+                  align="center"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.center))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagehead-muted-label"
+              data-testid="variant"
+              data-block="pagehead"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="pagehead-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.pagehead.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageIntro
+                  id="pagehead-muted"
+                  title={ui.vibe.pagehead.title}
+                  text={ui.vibe.pagehead.text}
+                  cta={ui.vibe.pagehead.cta}
+                  href="#/"
+                  align="start"
+                  tone="muted"
+                  density="compact"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingPageTrailPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingPageTrailPage.tsx
new file mode 100644
index 0000000..31cf92b
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingPageTrailPage.tsx
@@ -0,0 +1,200 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-page-trail page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageTrail,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+
+const PAGETRAIL_EXTRAS = {
+  value: ui.marketing.pageTrail.value,
+  caption: ui.marketing.pageTrail.caption,
+  note: ui.marketing.pageTrail.note,
+  icon: "package",
+  facts: stats,
+} as const;
+
+export function MarketingPageTrailPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPageTrail}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-pagetrail-title"
+            data-testid="catalog-block"
+            data-block="pagetrail"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-pagetrail-title">
+                {ui.blocks.names.pagetrail}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.pagetrail}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagetrail-crumbs-label"
+              data-testid="variant"
+              data-block="pagetrail"
+              data-variant="crumbs"
+            >
+              <Title as={3} size="base" weight="bold" id="pagetrail-crumbs-label" data-testid="variant-label">
+                {ui.blocks.variants.pagetrail.crumbs}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageTrail
+                  id="pagetrail-crumbs"
+                  title={ui.marketing.pageTrail.title}
+                  lead={ui.marketing.pageTrail.lead}
+                  badge={ui.marketing.pageTrail.badge}
+                  label={ui.marketing.pageTrail.label}
+                  crumbs={crumbs}
+                  extras={PAGETRAIL_EXTRAS}
+                  aside="none"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbs))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagetrail-crumbsFigure-label"
+              data-testid="variant"
+              data-block="pagetrail"
+              data-variant="crumbsFigure"
+            >
+              <Title as={3} size="base" weight="bold" id="pagetrail-crumbsFigure-label" data-testid="variant-label">
+                {ui.blocks.variants.pagetrail.crumbsFigure}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageTrail
+                  id="pagetrail-crumbsFigure"
+                  title={ui.marketing.pageTrail.title}
+                  lead={ui.marketing.pageTrail.lead}
+                  badge={ui.marketing.pageTrail.badge}
+                  label={ui.marketing.pageTrail.label}
+                  crumbs={crumbs}
+                  extras={PAGETRAIL_EXTRAS}
+                  aside="figure"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsFigure))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagetrail-crumbsNote-label"
+              data-testid="variant"
+              data-block="pagetrail"
+              data-variant="crumbsNote"
+            >
+              <Title as={3} size="base" weight="bold" id="pagetrail-crumbsNote-label" data-testid="variant-label">
+                {ui.blocks.variants.pagetrail.crumbsNote}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageTrail
+                  id="pagetrail-crumbsNote"
+                  title={ui.marketing.pageTrail.title}
+                  lead={ui.marketing.pageTrail.lead}
+                  badge={ui.marketing.pageTrail.badge}
+                  label={ui.marketing.pageTrail.label}
+                  crumbs={crumbs}
+                  extras={PAGETRAIL_EXTRAS}
+                  aside="note"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsNote))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagetrail-keyFacts-label"
+              data-testid="variant"
+              data-block="pagetrail"
+              data-variant="keyFacts"
+            >
+              <Title as={3} size="base" weight="bold" id="pagetrail-keyFacts-label" data-testid="variant-label">
+                {ui.blocks.variants.pagetrail.keyFacts}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageTrail
+                  id="pagetrail-keyFacts"
+                  title={ui.marketing.pageTrail.title}
+                  lead={ui.marketing.pageTrail.lead}
+                  badge={ui.marketing.pageTrail.badge}
+                  label={ui.marketing.pageTrail.label}
+                  crumbs={crumbs}
+                  extras={PAGETRAIL_EXTRAS}
+                  aside="facts"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.keyFacts))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingPortfolioPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingPortfolioPage.tsx
new file mode 100644
index 0000000..26d1959
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingPortfolioPage.tsx
@@ -0,0 +1,241 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-portfolio page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProjectGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Project,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+
+export function MarketingPortfolioPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPortfolio}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-projects-title"
+            data-testid="catalog-block"
+            data-block="projects"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-projects-title">
+                {ui.blocks.names.projects}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.projects}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-cards-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-cards"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="cards"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-compact-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-compact"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="compact"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-overlay-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="overlay"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-overlay-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.overlay}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-overlay"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="overlay"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.overlay))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-bento-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="bento"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-bento-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.bento}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-bento"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="bento"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.bento))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-list-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-list-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-list"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="list"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-cardsMuted-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="cardsMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-cardsMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.cardsMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-cardsMuted"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="cards"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cardsMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingPricingPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingPricingPage.tsx
new file mode 100644
index 0000000..206aa19
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingPricingPage.tsx
@@ -0,0 +1,472 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-pricing page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PricingCard,
+  PricingTiers,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Plan,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const DUO_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+
+export function MarketingPricingPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPricing}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 13)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-pricing-title"
+            data-testid="catalog-block"
+            data-block="pricing"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-pricing-title">
+                {ui.blocks.names.pricing}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.pricing}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-grid-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.grid}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-grid"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-monthly-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="monthly"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-monthly-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.monthly}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-monthly"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="monthly"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-annual-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="annual"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-annual-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.annual}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-annual"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="annual"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-duo-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="duo"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-duo-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.duo}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-duo"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={duo}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-2"
+                  emphasis="off"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-grid2-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.grid2}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-grid2"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-2"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-grid4-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="grid4"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-grid4-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.grid4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-grid4"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-4"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-stack-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="stack"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-stack-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.stack}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-stack"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="stack"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-flat-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="flat"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-flat-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.flat}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-flat"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="off"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.flat))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-compactMuted-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="compactMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-compactMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.compactMuted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-compactMuted"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="off"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.compactMuted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-roomy-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="roomy"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-roomy-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.roomy}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-roomy"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.roomy))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-plan-title"
+            data-testid="catalog-block"
+            data-block="plan"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-plan-title">
+                {ui.blocks.names.plan}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.plan}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="plan-standard-label"
+              data-testid="variant"
+              data-block="plan"
+              data-variant="standard"
+            >
+              <Title as={3} size="base" weight="bold" id="plan-standard-label" data-testid="variant-label">
+                {ui.blocks.variants.plan.standard}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <PricingCard
+                    plan={tiers.find((i) => i.id === "tier-team")!}
+                    labels={ui.pricing}
+                    emphasis="auto"
+                    density="default"
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="plan-flat-label"
+              data-testid="variant"
+              data-block="plan"
+              data-variant="flat"
+            >
+              <Title as={3} size="base" weight="bold" id="plan-flat-label" data-testid="variant-label">
+                {ui.blocks.variants.plan.flat}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <PricingCard
+                    plan={tiers.find((i) => i.id === "tier-team")!}
+                    labels={ui.pricing}
+                    emphasis="off"
+                    density="default"
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="plan-compact-label"
+              data-testid="variant"
+              data-block="plan"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="plan-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.plan.compact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box className="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <PricingCard
+                    plan={tiers.find((i) => i.id === "tier-team")!}
+                    labels={ui.pricing}
+                    emphasis="auto"
+                    density="compact"
+                  />
+                </Box>
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingPricingToolsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingPricingToolsPage.tsx
new file mode 100644
index 0000000..51c6cb7
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingPricingToolsPage.tsx
@@ -0,0 +1,455 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-pricing-tools page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  ComparisonTable,
+  Container,
+  CreditPacks,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  UsageCalculator,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+  type Pack,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const CREDITS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "credits": "metadata.credits.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "badge": "metadata.badge.value",
+} as const;
+
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+
+const USAGE_SLIDER = { min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit } as const;
+const USAGE_PRICE = { rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate } as const;
+
+export function MarketingPricingToolsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPricingTools}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-compare-title"
+            data-testid="catalog-block"
+            data-block="compare"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-compare-title">
+                {ui.blocks.names.compare}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.compare}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="compare-plans-label"
+              data-testid="variant"
+              data-block="compare"
+              data-variant="plans"
+            >
+              <Title as={3} size="base" weight="bold" id="compare-plans-label" data-testid="variant-label">
+                {ui.blocks.variants.compare.plans}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ComparisonTable
+                  id="compare-plans"
+                  title={ui.vibe.compare.title}
+                  rows={compare}
+                  empty={ui.empty.rows}
+                  labels={ui.vibe.compare.labels}
+                  highlight="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="compare-highlight-label"
+              data-testid="variant"
+              data-block="compare"
+              data-variant="highlight"
+            >
+              <Title as={3} size="base" weight="bold" id="compare-highlight-label" data-testid="variant-label">
+                {ui.blocks.variants.compare.highlight}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ComparisonTable
+                  id="compare-highlight"
+                  title={ui.vibe.compare.title}
+                  rows={compare}
+                  empty={ui.empty.rows}
+                  labels={ui.vibe.compare.labels}
+                  highlight="middle"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="compare-rivals-label"
+              data-testid="variant"
+              data-block="compare"
+              data-variant="rivals"
+            >
+              <Title as={3} size="base" weight="bold" id="compare-rivals-label" data-testid="variant-label">
+                {ui.blocks.variants.compare.rivals}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ComparisonTable
+                  id="compare-rivals"
+                  title={ui.vibe.rivals.title}
+                  rows={rivals}
+                  empty={ui.empty.rows}
+                  labels={ui.vibe.rivals.labels}
+                  highlight="middle"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="compare-muted-label"
+              data-testid="variant"
+              data-block="compare"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="compare-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.compare.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ComparisonTable
+                  id="compare-muted"
+                  title={ui.vibe.compare.title}
+                  rows={compare}
+                  empty={ui.empty.rows}
+                  labels={ui.vibe.compare.labels}
+                  highlight="none"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-credits-title"
+            data-testid="catalog-block"
+            data-block="credits"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-credits-title">
+                {ui.blocks.names.credits}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.credits}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="credits-tiles4-label"
+              data-testid="variant"
+              data-block="credits"
+              data-variant="tiles4"
+            >
+              <Title as={3} size="base" weight="bold" id="credits-tiles4-label" data-testid="variant-label">
+                {ui.blocks.variants.credits.tiles4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CreditPacks
+                  id="credits-tiles4"
+                  title={ui.vibe.credits.title}
+                  packs={credits}
+                  empty={ui.empty.packs}
+                  badges={ui.vibe.credits.badges}
+                  buy={ui.vibe.credits.buy}
+                  cols="4"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="credits-tiles2-label"
+              data-testid="variant"
+              data-block="credits"
+              data-variant="tiles2"
+            >
+              <Title as={3} size="base" weight="bold" id="credits-tiles2-label" data-testid="variant-label">
+                {ui.blocks.variants.credits.tiles2}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CreditPacks
+                  id="credits-tiles2"
+                  title={ui.vibe.credits.title}
+                  packs={credits}
+                  empty={ui.empty.packs}
+                  badges={ui.vibe.credits.badges}
+                  buy={ui.vibe.credits.buy}
+                  cols="2"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="credits-rows-label"
+              data-testid="variant"
+              data-block="credits"
+              data-variant="rows"
+            >
+              <Title as={3} size="base" weight="bold" id="credits-rows-label" data-testid="variant-label">
+                {ui.blocks.variants.credits.rows}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CreditPacks
+                  id="credits-rows"
+                  title={ui.vibe.credits.title}
+                  packs={credits}
+                  empty={ui.empty.packs}
+                  badges={ui.vibe.credits.badges}
+                  buy={ui.vibe.credits.buy}
+                  cols="4"
+                  item="row"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="credits-muted-label"
+              data-testid="variant"
+              data-block="credits"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="credits-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.credits.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CreditPacks
+                  id="credits-muted"
+                  title={ui.vibe.credits.title}
+                  packs={credits}
+                  empty={ui.empty.packs}
+                  badges={ui.vibe.credits.badges}
+                  buy={ui.vibe.credits.buy}
+                  cols="4"
+                  item="tile"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-usage-title"
+            data-testid="catalog-block"
+            data-block="usage"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-usage-title">
+                {ui.blocks.names.usage}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.usage}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usage-card-label"
+              data-testid="variant"
+              data-block="usage"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="usage-card-label" data-testid="variant-label">
+                {ui.blocks.variants.usage.card}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UsageCalculator
+                  id="usage-card"
+                  title={ui.vibe.usage.title}
+                  text={ui.vibe.usage.text}
+                  usage={5000}
+                  slider={USAGE_SLIDER}
+                  price={USAGE_PRICE}
+                  cta={ui.vibe.usage.cta}
+                  href="#/"
+                  layout="card"
+                  ends="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usage-plain-label"
+              data-testid="variant"
+              data-block="usage"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="usage-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.usage.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UsageCalculator
+                  id="usage-plain"
+                  title={ui.vibe.usage.title}
+                  text={ui.vibe.usage.text}
+                  usage={5000}
+                  slider={USAGE_SLIDER}
+                  price={USAGE_PRICE}
+                  cta={ui.vibe.usage.cta}
+                  href="#/"
+                  layout="plain"
+                  ends="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usage-noEnds-label"
+              data-testid="variant"
+              data-block="usage"
+              data-variant="noEnds"
+            >
+              <Title as={3} size="base" weight="bold" id="usage-noEnds-label" data-testid="variant-label">
+                {ui.blocks.variants.usage.noEnds}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UsageCalculator
+                  id="usage-noEnds"
+                  title={ui.vibe.usage.title}
+                  text={ui.vibe.usage.text}
+                  usage={5000}
+                  slider={USAGE_SLIDER}
+                  price={USAGE_PRICE}
+                  cta={ui.vibe.usage.cta}
+                  href="#/"
+                  layout="card"
+                  ends="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.noEnds))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usage-muted-label"
+              data-testid="variant"
+              data-block="usage"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="usage-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.usage.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UsageCalculator
+                  id="usage-muted"
+                  title={ui.vibe.usage.title}
+                  text={ui.vibe.usage.text}
+                  usage={5000}
+                  slider={USAGE_SLIDER}
+                  price={USAGE_PRICE}
+                  cta={ui.vibe.usage.cta}
+                  href="#/"
+                  layout="card"
+                  ends="show"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingProofPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingProofPage.tsx
new file mode 100644
index 0000000..9a757a8
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingProofPage.tsx
@@ -0,0 +1,512 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-proof page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  LogoCloud,
+  ProofBand,
+  Stack,
+  Text,
+  Title,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+export function MarketingProofPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingProof}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 14)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-logos-title"
+            data-testid="catalog-block"
+            data-block="logos"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-logos-title">
+                {ui.blocks.names.logos}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.logos}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-grid4-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="grid4"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-grid4-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.grid4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-grid4"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="4"
+                  item="name"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-grid3-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.grid3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-grid3"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="3"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-row-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-row-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.row}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-row"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="row"
+                  cols="4"
+                  item="icon"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-icons-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.icons}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-icons"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="4"
+                  item="icon"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-grid2-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.grid2}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-grid2"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="2"
+                  item="name"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-tiles4-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="tiles4"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-tiles4-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.tiles4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-tiles4"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="4"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-proof-title"
+            data-testid="catalog-block"
+            data-block="proof"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-proof-title">
+                {ui.blocks.names.proof}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.proof}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="proof-above-label"
+              data-testid="variant"
+              data-block="proof"
+              data-variant="above"
+            >
+              <Title as={3} size="base" weight="bold" id="proof-above-label" data-testid="variant-label">
+                {ui.blocks.variants.proof.above}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProofBand
+                  id="proof-above"
+                  title={ui.vibe.proof.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  stats={stats}
+                  layout="above"
+                  logoStyle="name"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="proof-beside-label"
+              data-testid="variant"
+              data-block="proof"
+              data-variant="beside"
+            >
+              <Title as={3} size="base" weight="bold" id="proof-beside-label" data-testid="variant-label">
+                {ui.blocks.variants.proof.beside}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProofBand
+                  id="proof-beside"
+                  title={ui.vibe.proof.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  stats={stats}
+                  layout="beside"
+                  logoStyle="name"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.beside))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="proof-icons-label"
+              data-testid="variant"
+              data-block="proof"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="proof-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.proof.icons}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProofBand
+                  id="proof-icons"
+                  title={ui.vibe.proof.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  stats={stats}
+                  layout="above"
+                  logoStyle="icon"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="proof-muted-label"
+              data-testid="variant"
+              data-block="proof"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="proof-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.proof.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProofBand
+                  id="proof-muted"
+                  title={ui.vibe.proof.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  stats={stats}
+                  layout="above"
+                  logoStyle="name"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-videos-title"
+            data-testid="catalog-block"
+            data-block="videos"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-videos-title">
+                {ui.blocks.names.videos}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.videos}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videos-grid3-label"
+              data-testid="variant"
+              data-block="videos"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="videos-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.videos.grid3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoGrid
+                  id="videos-grid3"
+                  title={ui.vibe.videos.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  playLabel={ui.vibe.videos.play}
+                  byLine={ui.testimonials.byLine}
+                  cols="1-3"
+                  caption="below"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videos-grid2-label"
+              data-testid="variant"
+              data-block="videos"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="videos-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.videos.grid2}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoGrid
+                  id="videos-grid2"
+                  title={ui.vibe.videos.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  playLabel={ui.vibe.videos.play}
+                  byLine={ui.testimonials.byLine}
+                  cols="1-2"
+                  caption="below"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videos-overlay-label"
+              data-testid="variant"
+              data-block="videos"
+              data-variant="overlay"
+            >
+              <Title as={3} size="base" weight="bold" id="videos-overlay-label" data-testid="variant-label">
+                {ui.blocks.variants.videos.overlay}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoGrid
+                  id="videos-overlay"
+                  title={ui.vibe.videos.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  playLabel={ui.vibe.videos.play}
+                  byLine={ui.testimonials.byLine}
+                  cols="1-3"
+                  caption="overlay"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videos-muted-label"
+              data-testid="variant"
+              data-block="videos"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="videos-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.videos.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoGrid
+                  id="videos-muted"
+                  title={ui.vibe.videos.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  playLabel={ui.vibe.videos.play}
+                  byLine={ui.testimonials.byLine}
+                  cols="1-3"
+                  caption="below"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingShowcasesPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingShowcasesPage.tsx
new file mode 100644
index 0000000..5946f13
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingShowcasesPage.tsx
@@ -0,0 +1,525 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-showcases page of CatalogScreen.
+
+import {
+  BentoGrid,
+  Block,
+  Box,
+  Container,
+  FeatureAccordion,
+  FeatureSticky,
+  FeatureTabs,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Tile,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+
+export function MarketingShowcasesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingShowcases}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 4, 15)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-bento-title"
+            data-testid="catalog-block"
+            data-block="bento"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-bento-title">
+                {ui.blocks.names.bento}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.bento}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bento-bento-label"
+              data-testid="variant"
+              data-block="bento"
+              data-variant="bento"
+            >
+              <Title as={3} size="base" weight="bold" id="bento-bento-label" data-testid="variant-label">
+                {ui.blocks.variants.bento.bento}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BentoGrid
+                  id="bento-bento"
+                  title={ui.vibe.bento.title}
+                  tiles={bento}
+                  empty={ui.empty.tiles}
+                  layout="bento"
+                  media="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bento-even-label"
+              data-testid="variant"
+              data-block="bento"
+              data-variant="even"
+            >
+              <Title as={3} size="base" weight="bold" id="bento-even-label" data-testid="variant-label">
+                {ui.blocks.variants.bento.even}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BentoGrid
+                  id="bento-even"
+                  title={ui.vibe.bento.title}
+                  tiles={bento}
+                  empty={ui.empty.tiles}
+                  layout="even"
+                  media="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.even))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bento-images-label"
+              data-testid="variant"
+              data-block="bento"
+              data-variant="images"
+            >
+              <Title as={3} size="base" weight="bold" id="bento-images-label" data-testid="variant-label">
+                {ui.blocks.variants.bento.images}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BentoGrid
+                  id="bento-images"
+                  title={ui.vibe.bento.title}
+                  tiles={bento}
+                  empty={ui.empty.tiles}
+                  layout="bento"
+                  media="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bento-muted-label"
+              data-testid="variant"
+              data-block="bento"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="bento-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.bento.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BentoGrid
+                  id="bento-muted"
+                  title={ui.vibe.bento.title}
+                  tiles={bento}
+                  empty={ui.empty.tiles}
+                  layout="bento"
+                  media="none"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-featuretabs-title"
+            data-testid="catalog-block"
+            data-block="featuretabs"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-featuretabs-title">
+                {ui.blocks.names.featuretabs}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.featuretabs}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuretabs-split-label"
+              data-testid="variant"
+              data-block="featuretabs"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="featuretabs-split-label" data-testid="variant-label">
+                {ui.blocks.variants.featuretabs.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureTabs
+                  id="featuretabs-split"
+                  title={ui.vibe.tabs.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  tabsLabel={ui.vibe.tabs.label}
+                  active="feature-clear"
+                  panel="split"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuretabs-stack-label"
+              data-testid="variant"
+              data-block="featuretabs"
+              data-variant="stack"
+            >
+              <Title as={3} size="base" weight="bold" id="featuretabs-stack-label" data-testid="variant-label">
+                {ui.blocks.variants.featuretabs.stack}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureTabs
+                  id="featuretabs-stack"
+                  title={ui.vibe.tabs.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  tabsLabel={ui.vibe.tabs.label}
+                  active="feature-clear"
+                  panel="stack"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.stack))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuretabs-muted-label"
+              data-testid="variant"
+              data-block="featuretabs"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="featuretabs-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.featuretabs.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureTabs
+                  id="featuretabs-muted"
+                  title={ui.vibe.tabs.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  tabsLabel={ui.vibe.tabs.label}
+                  active="feature-clear"
+                  panel="split"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-accordion-title"
+            data-testid="catalog-block"
+            data-block="accordion"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-accordion-title">
+                {ui.blocks.names.accordion}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.accordion}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="accordion-first-label"
+              data-testid="variant"
+              data-block="accordion"
+              data-variant="first"
+            >
+              <Title as={3} size="base" weight="bold" id="accordion-first-label" data-testid="variant-label">
+                {ui.blocks.variants.accordion.first}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureAccordion
+                  id="accordion-first"
+                  title={ui.vibe.accordion.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  expand="first"
+                  media="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="accordion-closed-label"
+              data-testid="variant"
+              data-block="accordion"
+              data-variant="closed"
+            >
+              <Title as={3} size="base" weight="bold" id="accordion-closed-label" data-testid="variant-label">
+                {ui.blocks.variants.accordion.closed}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureAccordion
+                  id="accordion-closed"
+                  title={ui.vibe.accordion.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  expand="none"
+                  media="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.closed))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="accordion-media-label"
+              data-testid="variant"
+              data-block="accordion"
+              data-variant="media"
+            >
+              <Title as={3} size="base" weight="bold" id="accordion-media-label" data-testid="variant-label">
+                {ui.blocks.variants.accordion.media}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureAccordion
+                  id="accordion-media"
+                  title={ui.vibe.accordion.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  expand="first"
+                  media="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="accordion-muted-label"
+              data-testid="variant"
+              data-block="accordion"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="accordion-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.accordion.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureAccordion
+                  id="accordion-muted"
+                  title={ui.vibe.accordion.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  expand="first"
+                  media="none"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-sticky-title"
+            data-testid="catalog-block"
+            data-block="sticky"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-sticky-title">
+                {ui.blocks.names.sticky}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.sticky}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sticky-end-label"
+              data-testid="variant"
+              data-block="sticky"
+              data-variant="end"
+            >
+              <Title as={3} size="base" weight="bold" id="sticky-end-label" data-testid="variant-label">
+                {ui.blocks.variants.sticky.end}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSticky
+                  id="sticky-end"
+                  title={ui.vibe.sticky.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  active="feature-clear"
+                  mediaSide="end"
+                  item="plain"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sticky-start-label"
+              data-testid="variant"
+              data-block="sticky"
+              data-variant="start"
+            >
+              <Title as={3} size="base" weight="bold" id="sticky-start-label" data-testid="variant-label">
+                {ui.blocks.variants.sticky.start}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSticky
+                  id="sticky-start"
+                  title={ui.vibe.sticky.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  active="feature-clear"
+                  mediaSide="start"
+                  item="plain"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.start))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sticky-card-label"
+              data-testid="variant"
+              data-block="sticky"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="sticky-card-label" data-testid="variant-label">
+                {ui.blocks.variants.sticky.card}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSticky
+                  id="sticky-card"
+                  title={ui.vibe.sticky.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  active="feature-clear"
+                  mediaSide="end"
+                  item="card"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sticky-muted-label"
+              data-testid="variant"
+              data-block="sticky"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="sticky-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.sticky.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSticky
+                  id="sticky-muted"
+                  title={ui.vibe.sticky.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  active="feature-clear"
+                  mediaSide="end"
+                  item="plain"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingStatsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingStatsPage.tsx
new file mode 100644
index 0000000..9ed0943
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingStatsPage.tsx
@@ -0,0 +1,308 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-stats page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StatsBand,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+
+export function MarketingStatsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingStats}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 8)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-stats-title"
+            data-testid="catalog-block"
+            data-block="stats"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-stats-title">
+                {ui.blocks.names.stats}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.stats}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-plain4-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="plain4"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-plain4-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.plain4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-plain4"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="none"
+                  item="plain"
+                  align="center"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.plain4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-panel-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="panel"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-panel-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.panel}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-panel"
+                  title=""
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="panel"
+                  item="plain"
+                  align="center"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.panel))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-stack-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="stack"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-stack-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.stack}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-stack"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="stack"
+                  surface="none"
+                  item="plain"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.stack))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-image-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="image"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-image-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.image}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-image"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="image"
+                  item="plain"
+                  align="center"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.image))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-cards-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.cards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-cards"
+                  title={ui.marketing.stats.title}
+                  stats={[stats?.[0], stats?.[1], stats?.[2]]}
+                  empty={ui.marketing.stats.empty}
+                  cols="3"
+                  layout="row"
+                  surface="none"
+                  item="card"
+                  align="center"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-icons-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.icons}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-icons"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="none"
+                  item="icon"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-muted2-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="muted2"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-muted2-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.muted2}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-muted2"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="2"
+                  layout="row"
+                  surface="none"
+                  item="plain"
+                  align="center"
+                  tone="muted"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.muted2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-cardsCompact-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="cardsCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-cardsCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.cardsCompact}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-cardsCompact"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="none"
+                  item="card"
+                  align="center"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cardsCompact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingTeamPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingTeamPage.tsx
new file mode 100644
index 0000000..c30b83e
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingTeamPage.tsx
@@ -0,0 +1,246 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-team page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TeamGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Member,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+
+export function MarketingTeamPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingTeam}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-team-title"
+            data-testid="catalog-block"
+            data-block="team"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-team-title">
+                {ui.blocks.names.team}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.team}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-cards4-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="cards4"
+            >
+              <Title as={3} size="base" weight="bold" id="team-cards4-label" data-testid="variant-label">
+                {ui.blocks.variants.team.cards4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-cards4"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="cards"
+                  cols="1-4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-cards3-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="cards3"
+            >
+              <Title as={3} size="base" weight="bold" id="team-cards3-label" data-testid="variant-label">
+                {ui.blocks.variants.team.cards3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-cards3"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="cards"
+                  cols="1-3"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-minimal-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="team-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.team.minimal}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-minimal"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="minimal"
+                  cols="1-4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.minimal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-detailed-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="detailed"
+            >
+              <Title as={3} size="base" weight="bold" id="team-detailed-label" data-testid="variant-label">
+                {ui.blocks.variants.team.detailed}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-detailed"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="detailed"
+                  cols="1-3"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.detailed))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-list-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="team-list-label" data-testid="variant-label">
+                {ui.blocks.variants.team.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-list"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="list"
+                  cols="1-4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-directory-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="directory"
+            >
+              <Title as={3} size="base" weight="bold" id="team-directory-label" data-testid="variant-label">
+                {ui.blocks.variants.team.directory}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-directory"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="directory"
+                  cols="1-4"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.directory))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingTestimonialsPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingTestimonialsPage.tsx
new file mode 100644
index 0000000..1476d00
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingTestimonialsPage.tsx
@@ -0,0 +1,362 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-testimonials page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TestimonialGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Quote,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+const TESTIMONIALS_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+
+export function MarketingTestimonialsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingTestimonials}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-testimonials-title"
+            data-testid="catalog-block"
+            data-block="testimonials"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-testimonials-title">
+                {ui.blocks.names.testimonials}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.testimonials}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-grid3-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.grid3}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-grid3"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="grid"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-masonry-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="masonry"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-masonry-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.masonry}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-masonry"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="masonry"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-strip-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="strip"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-strip-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.strip}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-strip"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="strip"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-social-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="social"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-social-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.social}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-social"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="masonry"
+                  cols="1-3"
+                  item={{ kind: "social", avatar: "image", rating: "hide", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.social))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-featured-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="featured"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-featured-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.featured}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-featured"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="single"
+                  cols="1-3"
+                  item={{ kind: "plain", avatar: "image", rating: "hide", mark: "icon" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-grid2-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.grid2}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-grid2"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="grid"
+                  cols="1-2"
+                  item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-single-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="single"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-single-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.single}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-single"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="single"
+                  cols="1-3"
+                  item={{ kind: "plain", avatar: "image", rating: "hide", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-stack-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="stack"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-stack-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.stack}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-stack"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="stack"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.stack))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-plain-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-plain"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="grid"
+                  cols="1-3"
+                  item={{ kind: "plain", avatar: "none", rating: "show", mark: "none" }}
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-noRating-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="noRating"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-noRating-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.noRating}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-noRating"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="grid"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.noRating))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.tsx
new file mode 100644
index 0000000..354bfea
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.tsx
@@ -0,0 +1,284 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-testimonials-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  QuoteSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+const QUOTESPLIT_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+const QUOTESPLIT_EXTRAS = { stats, logos, rating: 5, score: ui.marketing.quoteSplit.score, reviews: ui.marketing.quoteSplit.reviews } as const;
+const QUOTESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.quoteSplit.cta,
+  href: "#/customers",
+  secondary: ui.marketing.quoteSplit.secondary,
+  secondaryHref: "#/contact",
+} as const;
+
+export function MarketingTestimonialsSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingTestimonialsSplit}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-quotesplit-title"
+            data-testid="catalog-block"
+            data-block="quotesplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-quotesplit-title">
+                {ui.blocks.names.quotesplit}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.quotesplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-quoteCard-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="quoteCard"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-quoteCard-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.quoteCard}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-quoteCard"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="media"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.quoteCard))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-logoTiles-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="logoTiles"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-logoTiles-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.logoTiles}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-logoTiles"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="logos"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.logoTiles))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-ratingPanel-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="ratingPanel"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-ratingPanel-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.ratingPanel}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-ratingPanel"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="rating"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-stackedCards-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="stackedCards"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-stackedCards-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.stackedCards}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-stackedCards"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="stack"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.stackedCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-compact4-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="compact4"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-compact4-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.compact4}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-compact4"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="compact"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.compact4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-bentoFigures-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="bentoFigures"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-bentoFigures-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.bentoFigures}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-bentoFigures"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="bento"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.bentoFigures))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/NotfoundPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/NotfoundPage.tsx
new file mode 100644
index 0000000..9aa2d8c
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/NotfoundPage.tsx
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The notfound page of CatalogScreen.
+
+import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NotfoundPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Title as={1} size="4xl" weight="bold" id="page-title">
+            {ui.site.notFound.title}
+          </Title>
+          <Group>
+            <Button variant="default" size="default" href="#/">
+              {ui.catalog.back}
+            </Button>
+          </Group>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageCartPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageCartPage.tsx
new file mode 100644
index 0000000..ed22d5c
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageCartPage.tsx
@@ -0,0 +1,166 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-cart page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Link,
+  NavBar,
+  PageIntro,
+  ProductGrid,
+  ShoppingCart,
+  SitemapFooter,
+  Text,
+  type CartLine,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageCartPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.cart.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="cart">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <PageIntro
+          id="cart-pagehead"
+          title={ui.commerce.cartPage.title}
+          text={ui.commerce.pages.cartLead}
+          cta=""
+          href="#/"
+          align="start"
+          tone="default"
+          density="default"
+        />
+        <ShoppingCart
+          id="cart-cartpage"
+          title={ui.commerce.cart.caption}
+          lines={cart}
+          rows={summary}
+          promos={promos}
+          labels={ui.commerce.cart}
+          totals={ui.commerce.totals}
+          actions={ui.commerce.cartPage}
+          layout="split"
+          promo="show"
+          progress="show"
+          tone="default"
+        />
+        <ProductGrid
+          id="cart-products"
+          title={ui.commerce.pages.related}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="rail"
+          cols="1-3"
+          ratio="1/1"
+          rating="hide"
+          action="button"
+          tone="default"
+          density="compact"
+        />
+        <SitemapFooter
+          id="cart-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageCheckoutPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageCheckoutPage.tsx
new file mode 100644
index 0000000..eee209d
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageCheckoutPage.tsx
@@ -0,0 +1,141 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-checkout page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CheckoutForm,
+  Container,
+  Link,
+  NavBar,
+  PageIntro,
+  SitemapFooter,
+  Text,
+  type CartLine,
+  type Day,
+  type MegaGroup,
+  type NavLink,
+  type Payment,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageCheckoutPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.checkout.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="checkout">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <PageIntro
+          id="checkout-pagehead"
+          title={ui.commerce.checkout.title}
+          text={ui.commerce.pages.checkoutLead}
+          cta=""
+          href="#/"
+          align="start"
+          tone="default"
+          density="default"
+        />
+        <CheckoutForm
+          id="checkout-checkout"
+          title=""
+          days={days}
+          payments={payments}
+          lines={cart}
+          rows={summary}
+          promos={promos}
+          labels={ui.commerce.checkout}
+          totals={ui.commerce.totals}
+          layout="cards"
+          summary="aside"
+          tone="default"
+        />
+        <SitemapFooter
+          id="checkout-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="compact"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageCompanyPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageCompanyPage.tsx
new file mode 100644
index 0000000..f1006d1
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageCompanyPage.tsx
@@ -0,0 +1,223 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-company page of CatalogScreen.
+
+import {
+  AboutCompany,
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  JobBoard,
+  Link,
+  MilestoneTimeline,
+  NavBar,
+  PageIntro,
+  PhotoGallery,
+  SitemapFooter,
+  TeamGrid,
+  Text,
+  type Department,
+  type Feature,
+  type Job,
+  type MegaGroup,
+  type Member,
+  type Milestone,
+  type NavLink,
+  type Photo,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageCompanyPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.company.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="company">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="inline"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <PageIntro
+          id="company-pagehead"
+          title={ui.company.pages.companyTitle}
+          text={ui.company.pages.companyLead}
+          cta=""
+          href="#/"
+          align="center"
+          tone="default"
+          density="default"
+        />
+        <AboutCompany
+          id="company-about"
+          title={ui.company.about.title}
+          lead={ui.company.about.lead}
+          stats={stats}
+          values={values}
+          layout="split"
+          tone="default"
+          density="default"
+        />
+        <MilestoneTimeline
+          id="company-timeline"
+          title={ui.company.timeline.title}
+          lead={ui.company.timeline.lead}
+          milestones={milestones}
+          empty={ui.empty.milestones}
+          layout="split"
+          tone="default"
+          density="default"
+        />
+        <TeamGrid
+          id="company-team"
+          title={ui.company.team.title}
+          lead={ui.company.team.lead}
+          members={members}
+          empty={ui.empty.members}
+          depts={ui.company.depts}
+          layout="cards"
+          cols="1-4"
+          tone="default"
+          density="default"
+        />
+        <PhotoGallery
+          id="company-photos"
+          title={ui.company.photos.title}
+          lead={ui.company.photos.lead}
+          photos={photos}
+          empty={ui.empty.photos}
+          labels={ui.company.photos}
+          layout="mosaic"
+          captions="show"
+          tone="default"
+          density="default"
+        />
+        <JobBoard
+          id="company-jobs"
+          title={ui.company.jobs.title}
+          lead={ui.company.jobs.lead}
+          jobs={jobs}
+          empty={ui.empty.jobs}
+          departments={departments}
+          labels={ui.company.jobs}
+          layout="grouped"
+          salary="hide"
+          tone="default"
+        />
+        <CtaBand
+          id="company-cta"
+          title={ui.site.home.ctaTitle}
+          text={ui.site.home.ctaText}
+          actions={{
+            cta: ui.site.home.ctaButton,
+            href: "#/pricing",
+            secondary: ui.site.home.ctaSecondary,
+            secondaryHref: "#/",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "one",
+          }}
+          quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+          layout="card"
+          tone="muted"
+          proof="none"
+          density="default"
+        />
+        <SitemapFooter
+          id="company-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PagePortfolioPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PagePortfolioPage.tsx
new file mode 100644
index 0000000..6ac26e9
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PagePortfolioPage.tsx
@@ -0,0 +1,203 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-portfolio page of CatalogScreen.
+
+import {
+  AboutMe,
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  Link,
+  NavBar,
+  PhotoGallery,
+  ProjectGrid,
+  SitemapFooter,
+  TestimonialGrid,
+  Text,
+  type MegaGroup,
+  type NavLink,
+  type Photo,
+  type Project,
+  type Quote,
+  type Skill,
+  type Spec,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PagePortfolioPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.portfolio.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="portfolio">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="inline"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <AboutMe
+          id="portfolio-aboutme"
+          title={ui.company.aboutMe.title}
+          lead={ui.company.aboutMe.lead}
+          badge={ui.company.aboutMe.badge}
+          facts={profilefacts}
+          skills={skills}
+          labels={ui.company.aboutMe}
+          actions={{
+            mode: "two",
+            cta: ui.company.aboutMe.cta,
+            href: "#/work",
+            secondary: ui.company.aboutMe.more,
+            secondaryHref: "#/contact",
+          }}
+          layout="facts"
+          mediaSide="start"
+          tone="default"
+          level={1}
+        />
+        <ProjectGrid
+          id="portfolio-projects"
+          title={ui.company.projects.title}
+          lead={ui.company.projects.lead}
+          projects={projects}
+          empty={ui.empty.projects}
+          labels={ui.company.projects}
+          layout="cards"
+          tone="default"
+          density="default"
+        />
+        <PhotoGallery
+          id="portfolio-photos"
+          title={ui.company.photos.title}
+          lead={ui.company.photos.lead}
+          photos={photos}
+          empty={ui.empty.photos}
+          labels={ui.company.photos}
+          layout="masonry"
+          captions="show"
+          tone="default"
+          density="default"
+        />
+        <TestimonialGrid
+          id="portfolio-testimonials"
+          title={ui.marketing.testimonials.title}
+          quotes={testimonials}
+          empty={ui.empty.quotes}
+          labels={{
+            rating: ui.testimonials.rating,
+            byLine: ui.testimonials.byLine,
+            handleLine: ui.testimonials.handleLine,
+          }}
+          layout="grid"
+          cols="1-3"
+          item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+          tone="default"
+          density="default"
+        />
+        <CtaBand
+          id="portfolio-cta"
+          title={ui.site.home.ctaTitle}
+          text={ui.site.home.ctaText}
+          actions={{
+            cta: ui.site.home.ctaButton,
+            href: "#/pricing",
+            secondary: ui.site.home.ctaSecondary,
+            secondaryHref: "#/",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "one",
+          }}
+          quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+          layout="card"
+          tone="muted"
+          proof="none"
+          density="default"
+        />
+        <SitemapFooter
+          id="portfolio-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageProductDetailPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageProductDetailPage.tsx
new file mode 100644
index 0000000..87a4912
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageProductDetailPage.tsx
@@ -0,0 +1,170 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-product-detail page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Link,
+  NavBar,
+  ProductDetail,
+  ProductGrid,
+  ProductInfo,
+  ReviewList,
+  SitemapFooter,
+  Text,
+  type Detail,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+  type Review,
+  type Spec,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageProductDetailPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.productDetail.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="product-detail">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <ProductDetail
+          id="product-detail-product"
+          product={products.find((i) => i.id === "product-lamp")!}
+          labels={ui.commerce.detail}
+          badges={ui.commerce.badges}
+          layout="split"
+          mediaSide="start"
+          thumbs="below"
+          buy="full"
+          tone="default"
+          density="default"
+        />
+        <ProductInfo
+          id="product-detail-productinfo"
+          title={ui.commerce.info.title}
+          details={details}
+          specs={specs}
+          labels={ui.commerce.info}
+          layout="split"
+          expand="first"
+          tone="default"
+        />
+        <ReviewList
+          id="product-detail-reviews"
+          title={ui.commerce.reviews.title}
+          reviews={reviews}
+          labels={ui.commerce.reviewLabels}
+          layout="grid"
+          item="card"
+          avatar="none"
+          tone="default"
+          density="default"
+        />
+        <ProductGrid
+          id="product-detail-products"
+          title={ui.commerce.pages.related}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="rail"
+          cols="1-3"
+          ratio="1/1"
+          rating="hide"
+          action="button"
+          tone="default"
+          density="compact"
+        />
+        <SitemapFooter
+          id="product-detail-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageSaasLandingPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageSaasLandingPage.tsx
new file mode 100644
index 0000000..69fbf25
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageSaasLandingPage.tsx
@@ -0,0 +1,282 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-saas-landing page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  FeatureSticky,
+  HeroClassic,
+  Link,
+  LogoCloud,
+  NavBar,
+  PricingTiers,
+  SitemapFooter,
+  StatsBand,
+  TestimonialGrid,
+  Text,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Logo,
+  type MegaGroup,
+  type NavLink,
+  type Plan,
+  type Quote,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageSaasLandingPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.saasLanding.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="saas-landing">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="inline"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <HeroClassic
+          id="saas-landing-hero"
+          title={ui.cases.saas.hero.title}
+          text={ui.cases.saas.hero.text}
+          actions={{
+            cta: ui.cases.saas.hero.cta,
+            href: "#/pricing",
+            secondary: ui.cases.saas.hero.secondary,
+            secondaryHref: "#/pricing",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "two",
+          }}
+          media={{
+            codeTitle: ui.vibe.code.title,
+            prompt: ui.vibe.code.prompt,
+            lines: terminal,
+            kind: "image",
+            side: "end",
+          }}
+          layout="split"
+          scale="default"
+          tone="default"
+          density="roomy"
+          level={1}
+        />
+        <LogoCloud
+          id="saas-landing-logos"
+          title={ui.marketing.logos.title}
+          logos={logos}
+          empty={ui.empty.logos}
+          layout="row"
+          cols="4"
+          item="icon"
+          tone="default"
+          density="compact"
+        />
+        <FeatureGrid
+          id="saas-landing-features"
+          title={ui.site.home.featuresTitle}
+          features={features}
+          empty={ui.empty.features}
+          action={{ label: ui.site.home.featuresAction, href: "#/" }}
+          layout="grid"
+          cols="1-3"
+          item="card"
+          mediaSide="end"
+          tone="default"
+          density="default"
+        />
+        <FeatureSticky
+          id="saas-landing-sticky"
+          title={ui.vibe.sticky.title}
+          features={features}
+          empty={ui.empty.features}
+          active="feature-clear"
+          mediaSide="end"
+          item="plain"
+          tone="default"
+          density="default"
+        />
+        <StatsBand
+          id="saas-landing-stats"
+          title={ui.marketing.stats.title}
+          stats={stats}
+          empty={ui.marketing.stats.empty}
+          cols="4"
+          layout="row"
+          surface="none"
+          item="icon"
+          align="start"
+          tone="default"
+          density="default"
+        />
+        <TestimonialGrid
+          id="saas-landing-testimonials"
+          title={ui.marketing.testimonials.title}
+          quotes={testimonials}
+          empty={ui.empty.quotes}
+          labels={{
+            rating: ui.testimonials.rating,
+            byLine: ui.testimonials.byLine,
+            handleLine: ui.testimonials.handleLine,
+          }}
+          layout="grid"
+          cols="1-3"
+          item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+          tone="default"
+          density="default"
+        />
+        <PricingTiers
+          id="saas-landing-pricing"
+          title={ui.site.pricing.tiersTitle}
+          plans={tiers}
+          labels={ui.pricing}
+          billingLabels={ui.vibe.billing}
+          layout="grid"
+          cols="1-3"
+          emphasis="auto"
+          billing="off"
+          tone="default"
+          density="default"
+        />
+        <FaqList
+          id="saas-landing-faq"
+          title={ui.site.pricing.faqTitle}
+          items={faq}
+          empty={ui.vibe.faq.empty}
+          search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+          filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+          layout="accordion"
+          cols="1"
+          tone="default"
+          density="default"
+        />
+        <CtaBand
+          id="saas-landing-cta"
+          title={ui.site.home.ctaTitle}
+          text={ui.site.home.ctaText}
+          actions={{
+            cta: ui.site.home.ctaButton,
+            href: "#/pricing",
+            secondary: ui.site.home.ctaSecondary,
+            secondaryHref: "#/",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "one",
+          }}
+          quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+          layout="card"
+          tone="muted"
+          proof="none"
+          density="default"
+        />
+        <SitemapFooter
+          id="saas-landing-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellClassicPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellClassicPage.tsx
new file mode 100644
index 0000000..25b58a8
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellClassicPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-classic page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellClassicPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellClassic.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-classic">
+        <DashboardShell
+          id="shell-classic-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="show"
+          sidebar="wide"
+          side="start"
+          footer="none"
+          content="grid"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.tsx
new file mode 100644
index 0000000..ed92ffb
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-collapsed-end page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellCollapsedEndPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellCollapsedEnd.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-collapsed-end">
+        <DashboardShell
+          id="shell-collapsed-end-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="none"
+          search="show"
+          sidebar="collapsed"
+          side="end"
+          footer="full"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellCollapsedPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellCollapsedPage.tsx
new file mode 100644
index 0000000..4247eba
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellCollapsedPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-collapsed page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellCollapsedPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellCollapsed.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-collapsed">
+        <DashboardShell
+          id="shell-collapsed-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="show"
+          sidebar="collapsed"
+          side="start"
+          footer="none"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellEndPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellEndPage.tsx
new file mode 100644
index 0000000..9b3be37
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellEndPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-end page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellEndPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellEnd.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-end">
+        <DashboardShell
+          id="shell-end-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="show"
+          sidebar="wide"
+          side="end"
+          footer="full"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellInsetPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellInsetPage.tsx
new file mode 100644
index 0000000..8b4a191
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellInsetPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-inset page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellInsetPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellInset.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-inset">
+        <DashboardShell
+          id="shell-inset-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="show"
+          sidebar="wide"
+          side="start"
+          footer="inset"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellRailEndPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellRailEndPage.tsx
new file mode 100644
index 0000000..4770a4f
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellRailEndPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-rail-end page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellRailEndPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellRailEnd.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-rail-end">
+        <DashboardShell
+          id="shell-rail-end-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="hide"
+          sidebar="rail"
+          side="end"
+          footer="inset"
+          content="grid"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellRailFooterPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellRailFooterPage.tsx
new file mode 100644
index 0000000..e8f565b
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellRailFooterPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-rail-footer page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellRailFooterPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellRailFooter.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-rail-footer">
+        <DashboardShell
+          id="shell-rail-footer-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="show"
+          sidebar="rail"
+          side="start"
+          footer="full"
+          content="grid"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellRailPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellRailPage.tsx
new file mode 100644
index 0000000..0994438
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellRailPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-rail page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellRailPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellRail.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-rail">
+        <DashboardShell
+          id="shell-rail-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="hide"
+          sidebar="rail"
+          side="start"
+          footer="none"
+          content="list"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellSideOnlyPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellSideOnlyPage.tsx
new file mode 100644
index 0000000..0f61afc
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellSideOnlyPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-side-only page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellSideOnlyPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellSideOnly.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-side-only">
+        <DashboardShell
+          id="shell-side-only-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="none"
+          search="show"
+          sidebar="wide"
+          side="start"
+          footer="inset"
+          content="list"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellTopOnlyPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellTopOnlyPage.tsx
new file mode 100644
index 0000000..bd2dfb0
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellTopOnlyPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-top-only page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellTopOnlyPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellTopOnly.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-top-only">
+        <DashboardShell
+          id="shell-top-only-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="show"
+          sidebar="none"
+          side="start"
+          footer="full"
+          content="grid"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.tsx
new file mode 100644
index 0000000..1aa6746
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-two-level-full page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellTwoLevelFullPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellTwoLevelFull.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-two-level-full">
+        <DashboardShell
+          id="shell-two-level-full-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="show"
+          sidebar="twolevel"
+          side="start"
+          footer="full"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageShellTwoLevelPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageShellTwoLevelPage.tsx
new file mode 100644
index 0000000..99bd06c
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageShellTwoLevelPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-two-level page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellTwoLevelPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellTwoLevel.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="shell-two-level">
+        <DashboardShell
+          id="shell-two-level-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="hide"
+          sidebar="twolevel"
+          side="start"
+          footer="inset"
+          content="list"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageStoreCatalogPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageStoreCatalogPage.tsx
new file mode 100644
index 0000000..905ca49
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageStoreCatalogPage.tsx
@@ -0,0 +1,154 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-store-catalog page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  Link,
+  NavBar,
+  PageIntro,
+  ProductGrid,
+  SitemapFooter,
+  Text,
+  UspStrip,
+  type Category,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageStoreCatalogPage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.storeCatalog.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="store-catalog">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <PageIntro
+          id="store-catalog-pagehead"
+          title={ui.commerce.pages.catalogTitle}
+          text={ui.commerce.pages.catalogLead}
+          cta=""
+          href="#/"
+          align="start"
+          tone="default"
+          density="default"
+        />
+        <CategoryNav
+          label={ui.commerce.nav.label}
+          categories={categories}
+          current="category-all"
+          tools={ui.commerce.tools}
+          layout="toolbar"
+          count="show"
+          icon="hide"
+          density="default"
+        />
+        <ProductGrid
+          id="store-catalog-products"
+          title={ui.commerce.products.title}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="grid"
+          cols="1-4"
+          ratio="1/1"
+          rating="hide"
+          action="button"
+          tone="default"
+          density="compact"
+        />
+        <UspStrip
+          id="store-catalog-usp"
+          perks={perks}
+          empty={ui.empty.perks}
+          layout="bar"
+          tone="default"
+          density="compact"
+        />
+        <SitemapFooter
+          id="store-catalog-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageStoreHome2Page.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageStoreHome2Page.tsx
new file mode 100644
index 0000000..ab3250a
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageStoreHome2Page.tsx
@@ -0,0 +1,202 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-store-home-2 page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DeliveryInfo,
+  Link,
+  NavBar,
+  ProductGrid,
+  SitemapFooter,
+  StoreHero,
+  StoreLocations,
+  Text,
+  UspStrip,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+  type Store,
+  type Zone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageStoreHome2Page() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.storeHome2.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="store-home-2">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="inline"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <StoreHero
+          id="store-home-2-storehero"
+          title={ui.commerce.storeHero.title}
+          lead={ui.commerce.storeHero.lead}
+          badge={ui.commerce.storeHero.badge}
+          perks={perks}
+          card={ui.commerce.storeHero.card}
+          actions={{
+            mode: "two",
+            cta: ui.commerce.storeHero.cta,
+            href: "#/catalog",
+            secondary: ui.commerce.storeHero.secondary,
+            secondaryHref: "#/delivery",
+          }}
+          layout="backdrop"
+          mediaSide="end"
+          tone="default"
+          level={1}
+        />
+        <UspStrip
+          id="store-home-2-usp"
+          perks={perks}
+          empty={ui.empty.perks}
+          layout="strip"
+          tone="default"
+          density="default"
+        />
+        <ProductGrid
+          id="store-home-2-products"
+          title={ui.commerce.products.title}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="grid"
+          cols="1-3"
+          ratio="4/3"
+          rating="show"
+          action="button"
+          tone="default"
+          density="default"
+        />
+        <DeliveryInfo
+          id="store-home-2-delivery"
+          title={ui.commerce.delivery.title}
+          lead={ui.commerce.delivery.lead}
+          facts={deliveryfacts}
+          zones={zones}
+          labels={ui.commerce.delivery}
+          layout="full"
+          tone="default"
+          density="default"
+        />
+        <StoreLocations
+          id="store-home-2-locations"
+          title={ui.commerce.stores.title}
+          lead={ui.commerce.stores.lead}
+          stores={stores}
+          empty={ui.empty.stores}
+          kinds={ui.commerce.stores.kinds}
+          labels={ui.commerce.stores}
+          layout="map"
+          tone="default"
+        />
+        <SitemapFooter
+          id="store-home-2-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PageStoreHomePage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PageStoreHomePage.tsx
new file mode 100644
index 0000000..5fb2a3d
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PageStoreHomePage.tsx
@@ -0,0 +1,215 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-store-home page of CatalogScreen.
+
+import {
+  AnnouncementBar,
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  CtaBand,
+  Link,
+  NavBar,
+  ProductGrid,
+  SitemapFooter,
+  StoreHero,
+  Text,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageStoreHomePage() {
+  return (
+    <>
+      <Block tag="div" className="border-b border-border bg-muted" data-testid="page-bar">
+        <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" className="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" className="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.storeHome.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box className="flex flex-col" data-testid="page-body" data-page="store-home">
+        <AnnouncementBar
+          label={ui.promo.announcement.label}
+          text={ui.cases.shop.announcement.text}
+          cta={ui.cases.shop.announcement.cta}
+          ctaHref="#/pricing"
+          dismissLabel={ui.promo.announcement.dismiss}
+          badgeLabel={ui.promo.announcement.badge}
+          tone="muted"
+          layout="center"
+          dismiss="show"
+          badge="none"
+          position="top"
+        />
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <StoreHero
+          id="store-home-storehero"
+          title={ui.commerce.storeHero.title}
+          lead={ui.commerce.storeHero.lead}
+          badge={ui.commerce.storeHero.badge}
+          perks={perks}
+          card={ui.commerce.storeHero.card}
+          actions={{
+            mode: "two",
+            cta: ui.commerce.storeHero.cta,
+            href: "#/catalog",
+            secondary: ui.commerce.storeHero.secondary,
+            secondaryHref: "#/delivery",
+          }}
+          layout="overlay"
+          mediaSide="end"
+          tone="default"
+          level={1}
+        />
+        <CategoryNav
+          label={ui.commerce.nav.label}
+          categories={categories}
+          current="category-all"
+          tools={ui.commerce.tools}
+          layout="tiles"
+          count="show"
+          icon="show"
+          density="default"
+        />
+        <ProductGrid
+          id="store-home-products-4"
+          title={ui.commerce.pages.bestsellers}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="grid"
+          cols="1-4"
+          ratio="1/1"
+          rating="show"
+          action="button"
+          tone="default"
+          density="default"
+          landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+        />
+        <ProductGrid
+          id="deals"
+          title={ui.commerce.rail.title}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="rail"
+          cols="1-3"
+          ratio="4/3"
+          rating="show"
+          action="button"
+          tone="default"
+          density="default"
+          landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))}
+        />
+        <UspStrip
+          id="store-home-usp"
+          perks={perks}
+          empty={ui.empty.perks}
+          layout="cards"
+          tone="default"
+          density="default"
+          title={ui.commerce.usp.title}
+        />
+        <CtaBand
+          id="store-home-cta"
+          title={ui.cases.shop.cta.title}
+          text={ui.cases.shop.cta.text}
+          actions={{
+            cta: ui.cases.shop.cta.cta,
+            href: "#/pricing",
+            secondary: ui.cases.shop.cta.secondary,
+            secondaryHref: "#/",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "one",
+          }}
+          quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+          layout="split"
+          tone="default"
+          proof="none"
+          density="default"
+        />
+        <SitemapFooter
+          id="store-home-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PagesPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PagesPage.tsx
new file mode 100644
index 0000000..ef95ea4
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PagesPage.tsx
@@ -0,0 +1,223 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The pages page of CatalogScreen.
+
+import { Block, Container, Group, Link, List, ListItem, Stack, Text, Title, tpl } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const PAGES = [
+  {
+    id: "saas-landing",
+    visit: "page-saas-landing",
+    href: "#/page-saas-landing",
+    name: ui.catalog.pages.saasLanding.title,
+    text: ui.catalog.pages.saasLanding.text,
+    blocks: 11,
+  },
+  {
+    id: "company",
+    visit: "page-company",
+    href: "#/page-company",
+    name: ui.catalog.pages.company.title,
+    text: ui.catalog.pages.company.text,
+    blocks: 9,
+  },
+  {
+    id: "portfolio",
+    visit: "page-portfolio",
+    href: "#/page-portfolio",
+    name: ui.catalog.pages.portfolio.title,
+    text: ui.catalog.pages.portfolio.text,
+    blocks: 7,
+  },
+  {
+    id: "store-home",
+    visit: "page-store-home",
+    href: "#/page-store-home",
+    name: ui.catalog.pages.storeHome.title,
+    text: ui.catalog.pages.storeHome.text,
+    blocks: 9,
+  },
+  {
+    id: "store-home-2",
+    visit: "page-store-home-2",
+    href: "#/page-store-home-2",
+    name: ui.catalog.pages.storeHome2.title,
+    text: ui.catalog.pages.storeHome2.text,
+    blocks: 7,
+  },
+  {
+    id: "store-catalog",
+    visit: "page-store-catalog",
+    href: "#/page-store-catalog",
+    name: ui.catalog.pages.storeCatalog.title,
+    text: ui.catalog.pages.storeCatalog.text,
+    blocks: 6,
+  },
+  {
+    id: "product-detail",
+    visit: "page-product-detail",
+    href: "#/page-product-detail",
+    name: ui.catalog.pages.productDetail.title,
+    text: ui.catalog.pages.productDetail.text,
+    blocks: 6,
+  },
+  {
+    id: "cart",
+    visit: "page-cart",
+    href: "#/page-cart",
+    name: ui.catalog.pages.cart.title,
+    text: ui.catalog.pages.cart.text,
+    blocks: 5,
+  },
+  {
+    id: "checkout",
+    visit: "page-checkout",
+    href: "#/page-checkout",
+    name: ui.catalog.pages.checkout.title,
+    text: ui.catalog.pages.checkout.text,
+    blocks: 4,
+  },
+  {
+    id: "shell-classic",
+    visit: "page-shell-classic",
+    href: "#/page-shell-classic",
+    name: ui.catalog.pages.shellClassic.title,
+    text: ui.catalog.pages.shellClassic.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-inset",
+    visit: "page-shell-inset",
+    href: "#/page-shell-inset",
+    name: ui.catalog.pages.shellInset.title,
+    text: ui.catalog.pages.shellInset.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail",
+    visit: "page-shell-rail",
+    href: "#/page-shell-rail",
+    name: ui.catalog.pages.shellRail.title,
+    text: ui.catalog.pages.shellRail.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-footer",
+    visit: "page-shell-rail-footer",
+    href: "#/page-shell-rail-footer",
+    name: ui.catalog.pages.shellRailFooter.title,
+    text: ui.catalog.pages.shellRailFooter.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed",
+    visit: "page-shell-collapsed",
+    href: "#/page-shell-collapsed",
+    name: ui.catalog.pages.shellCollapsed.title,
+    text: ui.catalog.pages.shellCollapsed.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level",
+    visit: "page-shell-two-level",
+    href: "#/page-shell-two-level",
+    name: ui.catalog.pages.shellTwoLevel.title,
+    text: ui.catalog.pages.shellTwoLevel.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level-full",
+    visit: "page-shell-two-level-full",
+    href: "#/page-shell-two-level-full",
+    name: ui.catalog.pages.shellTwoLevelFull.title,
+    text: ui.catalog.pages.shellTwoLevelFull.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-end",
+    visit: "page-shell-end",
+    href: "#/page-shell-end",
+    name: ui.catalog.pages.shellEnd.title,
+    text: ui.catalog.pages.shellEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-end",
+    visit: "page-shell-rail-end",
+    href: "#/page-shell-rail-end",
+    name: ui.catalog.pages.shellRailEnd.title,
+    text: ui.catalog.pages.shellRailEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-top-only",
+    visit: "page-shell-top-only",
+    href: "#/page-shell-top-only",
+    name: ui.catalog.pages.shellTopOnly.title,
+    text: ui.catalog.pages.shellTopOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-side-only",
+    visit: "page-shell-side-only",
+    href: "#/page-shell-side-only",
+    name: ui.catalog.pages.shellSideOnly.title,
+    text: ui.catalog.pages.shellSideOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed-end",
+    visit: "page-shell-collapsed-end",
+    href: "#/page-shell-collapsed-end",
+    name: ui.catalog.pages.shellCollapsedEnd.title,
+    text: ui.catalog.pages.shellCollapsedEnd.text,
+    blocks: 1,
+  },
+] as const;
+
+export function PagesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="pages-title">
+              {ui.catalog.pagesTitle}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.catalog.pagesText}
+            </Text>
+          </Stack>
+          <List tag="ul" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="page-list">
+            {(PAGES ?? []).map((p) => (
+              <ListItem key={p.id} className="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+                <Link
+                  href={p.href}
+                  variant="default"
+                  className="font-bold"
+                  data-testid="page-link"
+                  data-page={p.id}
+                  data-visit={p.visit}
+                >
+                  {p.name}
+                </Link>
+                <Text size="sm" className="text-muted-foreground">
+                  {p.text}
+                </Text>
+                <Text size="xs" className="text-muted-foreground" data-testid="page-count">
+                  {tpl(ui.catalog.pageCount, p.blocks)}
+                </Text>
+              </ListItem>
+            ))}
+          </List>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PromoBannersPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PromoBannersPage.tsx
new file mode 100644
index 0000000..799c4cf
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PromoBannersPage.tsx
@@ -0,0 +1,420 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The promo-banners page of CatalogScreen.
+
+import {
+  AnnouncementBar,
+  Block,
+  Box,
+  Container,
+  CookieBanner,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function PromoBannersPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.promoBanners}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-announcement-title"
+            data-testid="catalog-block"
+            data-block="announcement"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-announcement-title">
+                {ui.blocks.names.announcement}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.announcement}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-bar-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.bar}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="default"
+                  layout="center"
+                  dismiss="hide"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-badge-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="badge"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-badge-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.badge}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="muted"
+                  layout="center"
+                  dismiss="hide"
+                  badge="show"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-bottom-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="bottom"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-bottom-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.bottom}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="default"
+                  layout="split"
+                  dismiss="show"
+                  badge="none"
+                  position="bottom"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-muted-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="muted"
+                  layout="center"
+                  dismiss="hide"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.muted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-split-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-split-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="muted"
+                  layout="split"
+                  dismiss="hide"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-dismissible-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="dismissible"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-dismissible-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.dismissible}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="default"
+                  layout="center"
+                  dismiss="show"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-shop-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="shop"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-shop-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.shop}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.cases.shop.announcement.text}
+                  cta={ui.cases.shop.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="muted"
+                  layout="center"
+                  dismiss="show"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-agency-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="agency"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-agency-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.agency}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.cases.agency.announcement.text}
+                  cta={ui.cases.agency.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="default"
+                  layout="split"
+                  dismiss="hide"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.agency))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cookie-title"
+            data-testid="catalog-block"
+            data-block="cookie"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cookie-title">
+                {ui.blocks.names.cookie}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cookie}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cookie-bar-label"
+              data-testid="variant"
+              data-block="cookie"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="cookie-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.cookie.bar}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CookieBanner
+                  id="cookie-bar"
+                  title={ui.promo.cookie.title}
+                  text={ui.promo.cookie.text}
+                  accept={ui.promo.cookie.accept}
+                  decline={ui.promo.cookie.decline}
+                  settings={ui.promo.cookie.settings}
+                  layout="bar"
+                  actions="two"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cookie-card-label"
+              data-testid="variant"
+              data-block="cookie"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="cookie-card-label" data-testid="variant-label">
+                {ui.blocks.variants.cookie.card}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CookieBanner
+                  id="cookie-card"
+                  title={ui.promo.cookie.title}
+                  text={ui.promo.cookie.text}
+                  accept={ui.promo.cookie.accept}
+                  decline={ui.promo.cookie.decline}
+                  settings={ui.promo.cookie.settings}
+                  layout="card"
+                  actions="two"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cookie-settings-label"
+              data-testid="variant"
+              data-block="cookie"
+              data-variant="settings"
+            >
+              <Title as={3} size="base" weight="bold" id="cookie-settings-label" data-testid="variant-label">
+                {ui.blocks.variants.cookie.settings}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CookieBanner
+                  id="cookie-settings"
+                  title={ui.promo.cookie.title}
+                  text={ui.promo.cookie.text}
+                  accept={ui.promo.cookie.accept}
+                  decline={ui.promo.cookie.decline}
+                  settings={ui.promo.cookie.settings}
+                  layout="bar"
+                  actions="three"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cookie-muted-label"
+              data-testid="variant"
+              data-block="cookie"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="cookie-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.cookie.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CookieBanner
+                  id="cookie-muted"
+                  title={ui.promo.cookie.title}
+                  text={ui.promo.cookie.text}
+                  accept={ui.promo.cookie.accept}
+                  decline={ui.promo.cookie.decline}
+                  settings={ui.promo.cookie.settings}
+                  layout="card"
+                  actions="three"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/PromoNewsletterPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/PromoNewsletterPage.tsx
new file mode 100644
index 0000000..8a048ed
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/PromoNewsletterPage.tsx
@@ -0,0 +1,202 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The promo-newsletter page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  NewsletterForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function PromoNewsletterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.promoNewsletter}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 5)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-newsletter-title"
+            data-testid="catalog-block"
+            data-block="newsletter"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-newsletter-title">
+                {ui.blocks.names.newsletter}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.newsletter}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-inline-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="inline"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-inline-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.inline}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-inline"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="inline"
+                  terms="hide"
+                  tone="default"
+                  align="center"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-stacked-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.stacked}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-stacked"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="stacked"
+                  terms="hide"
+                  tone="default"
+                  align="center"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-split-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-split-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-split"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="split"
+                  terms="hide"
+                  tone="default"
+                  align="start"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-consent-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="consent"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-consent-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.consent}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-consent"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="inline"
+                  terms="show"
+                  tone="default"
+                  align="center"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-muted-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-muted"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="inline"
+                  terms="show"
+                  tone="muted"
+                  align="start"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/ScreenHeader.tsx b/apps/host-react/xgen/screens/CatalogScreen/ScreenHeader.tsx
new file mode 100644
index 0000000..e99e7fe
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/ScreenHeader.tsx
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The ScreenHeader part of CatalogScreen: its own file, so each file of the screen opens on one Block.
+
+import { Block, Button, Container, Link, LinkPlain, NavBlock } from "@ui8kit/react-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+
+export function ScreenHeader() {
+  return (
+    <Block tag="header" className="border-b border-border">
+      <LinkPlain
+        href="#main-content"
+        className={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+          "focus:px-4 focus:py-2 focus:text-sm focus:shadow"}
+        data-testid="skip-link"
+      >
+        {ui.site.header.skip}
+      </LinkPlain>
+      <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+        <Link href="#/" variant="default" className="text-lg font-bold" data-testid="brand">
+          {ui.catalog.title}
+        </Link>
+        <NavBlock label={ui.catalog.navLabel} className="flex flex-wrap items-center gap-4">
+          <Link href="#/" variant="default" className="text-sm font-medium" data-testid="tab-categories">
+            {ui.catalog.categoriesTab}
+          </Link>
+          <Link href="#/pages" variant="default" className="text-sm font-medium" data-testid="tab-pages">
+            {ui.catalog.pagesTitle}
+          </Link>
+          <Link href="/blocks/" variant="default" className="text-sm font-medium" data-testid="gallery-link">
+            {ui.blocks.title}
+          </Link>
+          <Link href="/skins/" variant="default" className="text-sm font-medium" data-testid="skins-link">
+            {ui.skins.title}
+          </Link>
+          <Link href="/discovery/" variant="default" className="text-sm font-medium" data-testid="discovery-link">
+            {ui.discovery.title}
+          </Link>
+          <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => actions.toggleTheme()}>
+            {ui.theme.toggle}
+          </Button>
+        </NavBlock>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/SupportContactPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/SupportContactPage.tsx
new file mode 100644
index 0000000..8ec51fd
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/SupportContactPage.tsx
@@ -0,0 +1,370 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The support-contact page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  ContactForm,
+  Container,
+  Group,
+  Link,
+  Stack,
+  SupportChannels,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function SupportContactPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.supportContact}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-contact-title"
+            data-testid="catalog-block"
+            data-block="contact"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-contact-title">
+                {ui.blocks.names.contact}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.contact}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-single-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="single"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-single-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.single}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-single"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="single"
+                  fields="full"
+                  terms="hide"
+                  page="section"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-page-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="page"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-page-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.page}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-page"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="single"
+                  fields="short"
+                  terms="hide"
+                  page="full"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.page))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-short-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="short"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-short-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.short}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-short"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="single"
+                  fields="short"
+                  terms="hide"
+                  page="section"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.short))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-split-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-split-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-split"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="split"
+                  fields="full"
+                  terms="hide"
+                  page="section"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-consent-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="consent"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-consent-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.consent}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-consent"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="single"
+                  fields="full"
+                  terms="show"
+                  page="section"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-muted-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-muted"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="split"
+                  fields="short"
+                  terms="show"
+                  page="section"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-channels-title"
+            data-testid="catalog-block"
+            data-block="channels"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-channels-title">
+                {ui.blocks.names.channels}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.channels}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="channels-grid-label"
+              data-testid="variant"
+              data-block="channels"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="channels-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.channels.grid}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SupportChannels
+                  id="channels-grid"
+                  title={ui.support.channels.title}
+                  channels={channels}
+                  empty={ui.empty.channels}
+                  open={ui.support.channels.open}
+                  layout="grid"
+                  cols="1-3"
+                  action="link"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="channels-twoUp-label"
+              data-testid="variant"
+              data-block="channels"
+              data-variant="twoUp"
+            >
+              <Title as={3} size="base" weight="bold" id="channels-twoUp-label" data-testid="variant-label">
+                {ui.blocks.variants.channels.twoUp}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SupportChannels
+                  id="channels-twoUp"
+                  title={ui.support.channels.title}
+                  channels={channels}
+                  empty={ui.empty.channels}
+                  open={ui.support.channels.open}
+                  layout="grid"
+                  cols="1-2"
+                  action="link"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="channels-list-label"
+              data-testid="variant"
+              data-block="channels"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="channels-list-label" data-testid="variant-label">
+                {ui.blocks.variants.channels.list}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SupportChannels
+                  id="channels-list"
+                  title={ui.support.channels.title}
+                  channels={channels}
+                  empty={ui.empty.channels}
+                  open={ui.support.channels.open}
+                  layout="list"
+                  cols="1-3"
+                  action="link"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="channels-plain-label"
+              data-testid="variant"
+              data-block="channels"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="channels-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.channels.plain}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SupportChannels
+                  id="channels-plain"
+                  title={ui.support.channels.title}
+                  channels={channels}
+                  empty={ui.empty.channels}
+                  open={ui.support.channels.open}
+                  layout="grid"
+                  cols="1-3"
+                  action="none"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.plain))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/CatalogScreen/SupportStatesPage.tsx b/apps/host-react/xgen/screens/CatalogScreen/SupportStatesPage.tsx
new file mode 100644
index 0000000..4c57f26
--- /dev/null
+++ b/apps/host-react/xgen/screens/CatalogScreen/SupportStatesPage.tsx
@@ -0,0 +1,199 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The support-states page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  ErrorPage,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ERRORPAGE_ACTIONS = { cta: ui.vibe.error.cta, href: "#/", secondary: ui.vibe.error.secondary, secondaryHref: "#/" } as const;
+
+export function SupportStatesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" className="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.supportStates}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 5)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-errorpage-title"
+            data-testid="catalog-block"
+            data-block="errorpage"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-errorpage-title">
+                {ui.blocks.names.errorpage}
+              </Title>
+              <Text size="sm" className="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.errorpage}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-centered-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.centered}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-centered"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                  layout="centered"
+                  code="show"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-split-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-split-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.split}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-split"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                  layout="split"
+                  code="show"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-noCode-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="noCode"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-noCode-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.noCode}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-noCode"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                  layout="centered"
+                  code="hide"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.noCode))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-two-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="two"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-two-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.two}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-two"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "two" }}
+                  layout="centered"
+                  code="show"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.two))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-muted-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.muted}
+              </Title>
+              <Box className="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-muted"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                  layout="centered"
+                  code="show"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/PlansScreen.tsx b/apps/host-react/xgen/screens/PlansScreen.tsx
new file mode 100644
index 0000000..ab64555
--- /dev/null
+++ b/apps/host-react/xgen/screens/PlansScreen.tsx
@@ -0,0 +1,265 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/plans.json
+/**
+ * Collection -> record: a list of plans (search, sort, pager; all state in the URL) and the card of one plan.
+ * Data: the Codex fixture `plans`.
+ */
+import { type ChangeEvent } from "react";
+import {
+  Badge,
+  Block,
+  Button,
+  Container,
+  Group,
+  Input,
+  Link,
+  PricingCard,
+  Stack,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+  Text,
+  Title,
+  at,
+  fmtMoney,
+  tpl,
+  type Plan,
+} from "@ui8kit/react-ui";
+import { collectionView, fromCodex, matchRoute, screenActions, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { plans as entries } from "@ui8kit/app-shared/data/plans";
+
+const LIST = { searchFields: ["name","tagline"], pageSize: 5, defaultSort: "price:asc" } as const;
+const ROUTES = [{"path":"plans","area":"list"},{"path":"plans/:id","area":"record"}] as const;
+const FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+  "status": "metadata.plan_status.value",
+} as const;
+
+const ROWS = fromCodex<Plan>(entries, FIELDS, CODEX);
+const HOME = { area: "list", params: {} as Record<string, string> };
+
+export function PlansScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const view = collectionView(ROWS, LIST, url.query);
+  const record = route.area === "record" ? ROWS.find((r) => r.id === route.params.id) : undefined;
+  const actions = screenActions(url, view, "plans", (id: string) => `plans/${id}`, toggleTheme);
+  return (
+    <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-8">
+        <Stack gap="6">
+          <Group gap="4" align="center" justify="between">
+            <Title as={1} size="2xl" weight="bold">
+              {ui.app.title}
+            </Title>
+            <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => actions.toggleTheme()}>
+              {ui.theme.toggle}
+            </Button>
+          </Group>
+          {route.area === "record" ? (
+            <Stack gap="4">
+              <Group>
+                <Button variant="ghost" size="sm" data-testid="back" onClick={() => actions.back()}>
+                  {ui.record.back}
+                </Button>
+              </Group>
+              {record ? (
+                <PricingCard
+                  plan={record}
+                  labels={ui.pricing}
+                  current={true}
+                  onSelect={() => actions.back()}
+                  footer={(plan: Plan) => (
+                    <Text size="sm" className="text-muted-foreground" data-testid="record-id">
+                      {tpl(ui.record.id, plan.id)}
+                    </Text>
+                  )}
+                />
+              ) : (
+                <Text className="text-muted-foreground" data-testid="missing">
+                  {ui.record.missing}
+                </Text>
+              )}
+            </Stack>
+          ) : (
+            <Stack gap="4">
+              <Group gap="4" align="center" justify="between" className="flex-wrap">
+                <Input
+                  type="search"
+                  size="default"
+                  value={view.q}
+                  placeholder={ui.plans.search}
+                  aria-label={ui.plans.search}
+                  className="max-w-xs"
+                  data-testid="search"
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => actions.search(event.currentTarget.value)}
+                />
+                <Text size="sm" className="text-muted-foreground" data-testid="count">
+                  {tpl(ui.plans.count, view.total)}
+                </Text>
+              </Group>
+              <Table className="w-full text-sm" data-testid="plans-table">
+                <TableCaption className="sr-only">
+                  {ui.plans.caption}
+                </TableCaption>
+                <TableHead>
+                  <TableRow>
+                    {((view.sort.field === "name") && (view.sort.dir === "asc")) ? (
+                      <TableHeadCell scope="col" aria-sort="ascending">
+                        <Button variant="ghost" size="sm" className="-mx-2 px-2" onClick={() => actions.sort("name")}>
+                          {ui.plans.col.name}
+                        </Button>
+                      </TableHeadCell>
+                    ) : ((view.sort.field === "name") && (view.sort.dir === "desc")) ? (
+                      <TableHeadCell scope="col" aria-sort="descending">
+                        <Button variant="ghost" size="sm" className="-mx-2 px-2" onClick={() => actions.sort("name")}>
+                          {ui.plans.col.name}
+                        </Button>
+                      </TableHeadCell>
+                    ) : (
+                      <TableHeadCell scope="col" aria-sort="none">
+                        <Button variant="ghost" size="sm" className="-mx-2 px-2" onClick={() => actions.sort("name")}>
+                          {ui.plans.col.name}
+                        </Button>
+                      </TableHeadCell>
+                    )}
+                    {((view.sort.field === "price") && (view.sort.dir === "asc")) ? (
+                      <TableHeadCell scope="col" className="text-right" aria-sort="ascending">
+                        <Button variant="ghost" size="sm" className="-mx-2 ml-auto px-2" onClick={() => actions.sort("price")}>
+                          {ui.plans.col.price}
+                        </Button>
+                      </TableHeadCell>
+                    ) : ((view.sort.field === "price") && (view.sort.dir === "desc")) ? (
+                      <TableHeadCell scope="col" className="text-right" aria-sort="descending">
+                        <Button variant="ghost" size="sm" className="-mx-2 ml-auto px-2" onClick={() => actions.sort("price")}>
+                          {ui.plans.col.price}
+                        </Button>
+                      </TableHeadCell>
+                    ) : (
+                      <TableHeadCell scope="col" className="text-right" aria-sort="none">
+                        <Button variant="ghost" size="sm" className="-mx-2 ml-auto px-2" onClick={() => actions.sort("price")}>
+                          {ui.plans.col.price}
+                        </Button>
+                      </TableHeadCell>
+                    )}
+                    {((view.sort.field === "seats") && (view.sort.dir === "asc")) ? (
+                      <TableHeadCell scope="col" className="text-right" aria-sort="ascending">
+                        <Button variant="ghost" size="sm" className="-mx-2 ml-auto px-2" onClick={() => actions.sort("seats")}>
+                          {ui.plans.col.seats}
+                        </Button>
+                      </TableHeadCell>
+                    ) : ((view.sort.field === "seats") && (view.sort.dir === "desc")) ? (
+                      <TableHeadCell scope="col" className="text-right" aria-sort="descending">
+                        <Button variant="ghost" size="sm" className="-mx-2 ml-auto px-2" onClick={() => actions.sort("seats")}>
+                          {ui.plans.col.seats}
+                        </Button>
+                      </TableHeadCell>
+                    ) : (
+                      <TableHeadCell scope="col" className="text-right" aria-sort="none">
+                        <Button variant="ghost" size="sm" className="-mx-2 ml-auto px-2" onClick={() => actions.sort("seats")}>
+                          {ui.plans.col.seats}
+                        </Button>
+                      </TableHeadCell>
+                    )}
+                    {((view.sort.field === "storage") && (view.sort.dir === "asc")) ? (
+                      <TableHeadCell scope="col" className="text-right" aria-sort="ascending">
+                        <Button variant="ghost" size="sm" className="-mx-2 ml-auto px-2" onClick={() => actions.sort("storage")}>
+                          {ui.plans.col.storage}
+                        </Button>
+                      </TableHeadCell>
+                    ) : ((view.sort.field === "storage") && (view.sort.dir === "desc")) ? (
+                      <TableHeadCell scope="col" className="text-right" aria-sort="descending">
+                        <Button variant="ghost" size="sm" className="-mx-2 ml-auto px-2" onClick={() => actions.sort("storage")}>
+                          {ui.plans.col.storage}
+                        </Button>
+                      </TableHeadCell>
+                    ) : (
+                      <TableHeadCell scope="col" className="text-right" aria-sort="none">
+                        <Button variant="ghost" size="sm" className="-mx-2 ml-auto px-2" onClick={() => actions.sort("storage")}>
+                          {ui.plans.col.storage}
+                        </Button>
+                      </TableHeadCell>
+                    )}
+                    <TableHeadCell scope="col">
+                      {ui.plans.col.status}
+                    </TableHeadCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {(view.rows ?? []).map((row) => (
+                    <TableRow key={row.id} data-testid="plan-row">
+                      <TableCell>
+                        <Link href={(("#/plans/" + row.id) + view.qs)} variant="default" data-testid="open-record">
+                          {row.name}
+                        </Link>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {fmtMoney(row.price, row.currency)}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {row.seats}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {row.storage}
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={((row.status === "active") ? "default" : "secondary")} size="default">
+                          {at(ui.status, (row.status ?? ""))}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              {(view.total === 0) ? (
+                <Text className="text-muted-foreground" data-testid="empty">
+                  {ui.plans.empty}
+                </Text>
+              ) : null}
+              <Group gap="4" align="center" justify="between" className="flex-wrap">
+                <Text size="sm" className="text-muted-foreground">
+                  {tpl(ui.pager.showing, view.from, view.to, view.total)}
+                </Text>
+                <Group gap="2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={!(view.page > 1)}
+                    data-testid="prev"
+                    onClick={() => actions.page((view.page + -1))}
+                  >
+                    {ui.pager.previous}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={!(view.page < view.pages)}
+                    data-testid="next"
+                    onClick={() => actions.page((view.page + 1))}
+                  >
+                    {ui.pager.next}
+                  </Button>
+                </Group>
+              </Group>
+            </Stack>
+          )}
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/SiteScreen.tsx b/apps/host-react/xgen/screens/SiteScreen.tsx
new file mode 100644
index 0000000..ada1e31
--- /dev/null
+++ b/apps/host-react/xgen/screens/SiteScreen.tsx
@@ -0,0 +1,213 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/site.json
+/**
+ * A marketing site of two routes, home and pricing, made of blocks: header, hero, features, pricing, FAQ, call
+ * to action, footer. Data: the Codex fixtures `features`, `tiers` and `faq`. The only action is the theme
+ * button.
+ */
+
+import {
+  Block,
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  HeroClassic,
+  PricingTiers,
+  SiteFooter,
+  SiteHeader,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Plan,
+} from "@ui8kit/react-ui";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const ROUTES = [{"path":"","area":"home"},{"path":"pricing","area":"pricing"}] as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const HOME = { area: "notfound", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function SiteScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  return (
+    <>
+      <SiteHeader
+        labels={ui.site.header}
+        current={route.area}
+        cta={ui.site.header.cta}
+        layout="inline"
+        position="static"
+        actions="none"
+        routes={{ home: "#/", pricing: "#/pricing" }}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "home" ? (
+          <>
+            <HeroClassic
+              id="home-hero"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{
+                cta: ui.site.home.cta,
+                href: "#/pricing",
+                secondary: ui.site.home.secondary,
+                secondaryHref: "#/pricing",
+                emailLabel: ui.promo.newsletter.label,
+                mode: "one",
+              }}
+              media={{
+                codeTitle: ui.vibe.code.title,
+                prompt: ui.vibe.code.prompt,
+                lines: terminal,
+                kind: "none",
+                side: "end",
+              }}
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+            />
+            <FeatureGrid
+              id="home-features"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="grid"
+              cols="1-3"
+              item="card"
+              mediaSide="end"
+              tone="default"
+              density="default"
+            />
+            <CtaBand
+              id="home-cta"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{
+                cta: ui.site.home.ctaButton,
+                href: "#/pricing",
+                secondary: ui.site.home.ctaSecondary,
+                secondaryHref: "#/",
+                emailLabel: ui.promo.newsletter.label,
+                mode: "one",
+              }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="card"
+              tone="muted"
+              proof="none"
+              density="default"
+            />
+          </>
+        ) : route.area === "pricing" ? (
+          <>
+            <HeroClassic
+              id="pricing-hero"
+              title={ui.site.pricing.title}
+              text={ui.site.pricing.text}
+              actions={undefined}
+              media={{
+                codeTitle: ui.vibe.code.title,
+                prompt: ui.vibe.code.prompt,
+                lines: terminal,
+                kind: "none",
+                side: "end",
+              }}
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+            />
+            <PricingTiers
+              id="pricing-tiers"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+            />
+            <FaqList
+              id="pricing-faq"
+              title={ui.site.pricing.faqTitle}
+              items={faq}
+              empty={ui.vibe.faq.empty}
+              search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+              filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="default"
+            />
+          </>
+        ) : (
+          <HeroClassic
+            id="not-found"
+            title={ui.site.notFound.title}
+            text={ui.site.notFound.text}
+            actions={{
+              cta: ui.site.notFound.back,
+              href: "#/",
+              secondary: ui.site.home.secondary,
+              secondaryHref: "#/pricing",
+              emailLabel: ui.promo.newsletter.label,
+              mode: "one",
+            }}
+            media={{
+              codeTitle: ui.vibe.code.title,
+              prompt: ui.vibe.code.prompt,
+              lines: terminal,
+              kind: "none",
+              side: "end",
+            }}
+            layout="centered"
+            scale="default"
+            tone="default"
+            density="roomy"
+          />
+        )}
+      </Block>
+      <SiteFooter
+        labels={ui.site.footer}
+        layout="minimal"
+        density="default"
+        routes={{ home: "#/", pricing: "#/pricing" }}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/SkinsScreen.tsx b/apps/host-react/xgen/screens/SkinsScreen.tsx
new file mode 100644
index 0000000..7641dda
--- /dev/null
+++ b/apps/host-react/xgen/screens/SkinsScreen.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/skins.json
+/**
+ * The Skins screen: tiles that switch the look of the whole preview. A row of skins (the default theme and 14
+ * tweakcn presets, each tile drawn in its skin), a row of Google fonts with Latin and Cyrillic over the font of
+ * the skin, and a row of corner radii over the radius of the skin. The tiles are static; the preview runtime
+ * (runtime/skins.ts) applies and stores the choice.
+ */
+
+import { Block } from "@ui8kit/react-ui";
+import { IndexPage } from "./SkinsScreen/IndexPage";
+import { NotfoundPage } from "./SkinsScreen/NotfoundPage";
+import { ScreenHeader } from "./SkinsScreen/ScreenHeader";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ROUTES = [{"path":"","area":"index"}] as const;
+
+const HOME = { area: "notfound", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function SkinsScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  return (
+    <>
+      <ScreenHeader />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "index" ? (
+          <IndexPage />
+        ) : (
+          <NotfoundPage />
+        )}
+      </Block>
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/SkinsScreen/IndexPage.tsx b/apps/host-react/xgen/screens/SkinsScreen/IndexPage.tsx
new file mode 100644
index 0000000..76aa8a5
--- /dev/null
+++ b/apps/host-react/xgen/screens/SkinsScreen/IndexPage.tsx
@@ -0,0 +1,243 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/skins.json
+// The index page of SkinsScreen.
+
+import {
+  Block,
+  Box,
+  Button,
+  ButtonPlain,
+  Container,
+  Inline,
+  List,
+  ListItem,
+  LucideIcon,
+  Stack,
+  Text,
+  Title,
+} from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const SKINS = [
+  { id: "default", name: ui.skins.skins.names.default },
+  { id: "modern-minimal", name: ui.skins.skins.names.modernMinimal },
+  { id: "violet-bloom", name: ui.skins.skins.names.violetBloom },
+  { id: "t3-chat", name: ui.skins.skins.names.t3Chat },
+  { id: "bubblegum", name: ui.skins.skins.names.bubblegum },
+  { id: "doom-64", name: ui.skins.skins.names.doom64 },
+  { id: "amber-minimal", name: ui.skins.skins.names.amberMinimal },
+  { id: "supabase", name: ui.skins.skins.names.supabase },
+  { id: "kodama-grove", name: ui.skins.skins.names.kodamaGrove },
+  { id: "perpetuity", name: ui.skins.skins.names.perpetuity },
+  { id: "cosmic-night", name: ui.skins.skins.names.cosmicNight },
+  { id: "claude", name: ui.skins.skins.names.claude },
+  { id: "mocha-mousse", name: ui.skins.skins.names.mochaMousse },
+  { id: "neo-brutalism", name: ui.skins.skins.names.neoBrutalism },
+  { id: "notebook", name: ui.skins.skins.names.notebook },
+] as const;
+const FONTS = [
+  { id: "inter", family: "Inter", name: ui.skins.fonts.names.inter },
+  { id: "roboto", family: "Roboto", name: ui.skins.fonts.names.roboto },
+  { id: "manrope", family: "Manrope", name: ui.skins.fonts.names.manrope },
+  { id: "montserrat", family: "Montserrat", name: ui.skins.fonts.names.montserrat },
+  { id: "rubik", family: "Rubik", name: ui.skins.fonts.names.rubik },
+  { id: "nunito", family: "Nunito", name: ui.skins.fonts.names.nunito },
+  { id: "ibm-plex-sans", family: "IBM Plex Sans", name: ui.skins.fonts.names.ibmPlexSans },
+  { id: "golos-text", family: "Golos Text", name: ui.skins.fonts.names.golosText },
+  { id: "onest", family: "Onest", name: ui.skins.fonts.names.onest },
+  { id: "open-sans", family: "Open Sans", name: ui.skins.fonts.names.openSans },
+] as const;
+const RADII = [
+  { id: "r0", value: "0px", name: ui.skins.radius.names.r0 },
+  { id: "r4", value: "4px", name: ui.skins.radius.names.r4 },
+  { id: "r8", value: "8px", name: ui.skins.radius.names.r8 },
+  { id: "r12", value: "12px", name: ui.skins.radius.names.r12 },
+  { id: "r16", value: "16px", name: ui.skins.radius.names.r16 },
+] as const;
+
+export function IndexPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Stack gap="2" align="stretch">
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="skins-title">
+              {ui.skins.title}
+            </Title>
+            <Text className="max-w-2xl text-muted-foreground">
+              {ui.skins.intro}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skins-skins-title"
+            data-testid="skins-row"
+            data-row="skins"
+          >
+            <Box className="flex flex-wrap items-end justify-between gap-4">
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id="skins-skins-title">
+                  {ui.skins.skins.title}
+                </Title>
+                <Text size="sm" className="max-w-2xl text-muted-foreground">
+                  {ui.skins.skins.text}
+                </Text>
+              </Stack>
+              <Button variant="outline" size="sm" data-look-reset="skin" data-testid="reset-skins">
+                {ui.skins.skins.reset}
+              </Button>
+            </Box>
+            <List tag="ul" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5" data-testid="skins-list">
+              {(SKINS ?? []).map((s) => (
+                <ListItem key={s.id} className="flex">
+                  <ButtonPlain
+                    type="button"
+                    className={"group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted " +
+                      "aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-2"}
+                    aria-pressed={false}
+                    data-skin-pick={s.id}
+                    data-testid="skin-tile"
+                  >
+                    <Inline
+                      className="flex flex-col gap-4 rounded p-4 inset-ring inset-ring-border"
+                      data-skin={s.id}
+                      data-testid="skin-preview"
+                    >
+                      <Inline className="flex flex-wrap gap-2">
+                        <Inline className="size-6 rounded bg-primary inset-ring inset-ring-border" />
+                        <Inline className="size-6 rounded bg-secondary inset-ring inset-ring-border" />
+                        <Inline className="size-6 rounded bg-accent inset-ring inset-ring-border" />
+                        <Inline className="size-6 rounded bg-muted inset-ring inset-ring-border" />
+                        <Inline className="size-6 rounded bg-foreground inset-ring inset-ring-border" />
+                      </Inline>
+                      <Inline className={"flex flex-col gap-2 rounded bg-card p-4 text-card-foreground inset-ring inset-ring-border"}>
+                        <Inline className="text-sm font-semibold">
+                          {ui.skins.sample.card}
+                        </Inline>
+                        <Inline className="text-xs text-muted-foreground">
+                          {ui.skins.sample.text}
+                        </Inline>
+                        <Inline className={"inline-flex h-8 w-fit items-center rounded bg-primary px-4 text-sm font-medium text-primary-foreground"}>
+                          {ui.skins.sample.button}
+                        </Inline>
+                      </Inline>
+                    </Inline>
+                    <Inline className="flex items-center justify-between gap-2 px-2 pb-2 text-sm font-medium">
+                      <Inline>
+                        {s.name}
+                      </Inline>
+                      <Inline className="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                        <LucideIcon name="check" size={16} />
+                      </Inline>
+                    </Inline>
+                  </ButtonPlain>
+                </ListItem>
+              ))}
+            </List>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skins-fonts-title"
+            data-testid="skins-row"
+            data-row="fonts"
+          >
+            <Box className="flex flex-wrap items-end justify-between gap-4">
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id="skins-fonts-title">
+                  {ui.skins.fonts.title}
+                </Title>
+                <Text size="sm" className="max-w-2xl text-muted-foreground">
+                  {ui.skins.fonts.text}
+                </Text>
+              </Stack>
+              <Button variant="outline" size="sm" data-look-reset="font" data-testid="reset-fonts">
+                {ui.skins.fonts.reset}
+              </Button>
+            </Box>
+            <List tag="ul" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5" data-testid="fonts-list">
+              {(FONTS ?? []).map((f) => (
+                <ListItem key={f.id} className="flex">
+                  <ButtonPlain
+                    type="button"
+                    className={"group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted " +
+                      "aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-4"}
+                    aria-pressed={false}
+                    data-font-pick={f.id}
+                    data-font-family={f.family}
+                    data-testid="font-tile"
+                  >
+                    <Inline className="text-3xl">
+                      {ui.skins.fonts.specimen}
+                    </Inline>
+                    <Inline className="text-sm text-muted-foreground">
+                      {ui.skins.fonts.pangram}
+                    </Inline>
+                    <Inline className="flex items-center justify-between gap-2  text-sm font-medium">
+                      <Inline>
+                        {f.name}
+                      </Inline>
+                      <Inline className="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                        <LucideIcon name="check" size={16} />
+                      </Inline>
+                    </Inline>
+                  </ButtonPlain>
+                </ListItem>
+              ))}
+            </List>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skins-radius-title"
+            data-testid="skins-row"
+            data-row="radius"
+          >
+            <Box className="flex flex-wrap items-end justify-between gap-4">
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id="skins-radius-title">
+                  {ui.skins.radius.title}
+                </Title>
+                <Text size="sm" className="max-w-2xl text-muted-foreground">
+                  {ui.skins.radius.text}
+                </Text>
+              </Stack>
+              <Button variant="outline" size="sm" data-look-reset="radius" data-testid="reset-radius">
+                {ui.skins.radius.reset}
+              </Button>
+            </Box>
+            <List tag="ul" className="grid gap-4 grid-cols-2 sm:grid-cols-5" data-testid="radius-list">
+              {(RADII ?? []).map((r) => (
+                <ListItem key={r.id} className="flex">
+                  <ButtonPlain
+                    type="button"
+                    className={"group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted " +
+                      "aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-4"}
+                    aria-pressed={false}
+                    data-radius-pick={r.id}
+                    data-radius={r.value}
+                    data-testid="radius-tile"
+                  >
+                    <Inline className="block h-16 w-full rounded bg-primary" data-radius-sample="" />
+                    <Inline className="flex items-center justify-between gap-2  text-sm font-medium">
+                      <Inline>
+                        {r.name}
+                      </Inline>
+                      <Inline className="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                        <LucideIcon name="check" size={16} />
+                      </Inline>
+                    </Inline>
+                  </ButtonPlain>
+                </ListItem>
+              ))}
+            </List>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/SkinsScreen/NotfoundPage.tsx b/apps/host-react/xgen/screens/SkinsScreen/NotfoundPage.tsx
new file mode 100644
index 0000000..4ad9d0b
--- /dev/null
+++ b/apps/host-react/xgen/screens/SkinsScreen/NotfoundPage.tsx
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/skins.json
+// The notfound page of SkinsScreen.
+
+import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NotfoundPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container className="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="4" align="stretch">
+          <Title as={1} size="4xl" weight="bold" id="page-title">
+            {ui.site.notFound.title}
+          </Title>
+          <Group>
+            <Button variant="default" size="default" href="#/">
+              {ui.skins.back}
+            </Button>
+          </Group>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/SkinsScreen/ScreenHeader.tsx b/apps/host-react/xgen/screens/SkinsScreen/ScreenHeader.tsx
new file mode 100644
index 0000000..06417d5
--- /dev/null
+++ b/apps/host-react/xgen/screens/SkinsScreen/ScreenHeader.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/skins.json
+// The ScreenHeader part of SkinsScreen: its own file, so each file of the screen opens on one Block.
+
+import { Block, Button, Container, Link, LinkPlain, NavBlock } from "@ui8kit/react-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+
+export function ScreenHeader() {
+  return (
+    <Block tag="header" className="border-b border-border">
+      <LinkPlain
+        href="#main-content"
+        className={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+          "focus:px-4 focus:py-2 focus:text-sm focus:shadow"}
+        data-testid="skip-link"
+      >
+        {ui.site.header.skip}
+      </LinkPlain>
+      <Container className="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+        <Link href="#/" variant="default" className="text-lg font-bold" data-testid="brand">
+          {ui.skins.title}
+        </Link>
+        <NavBlock label={ui.skins.navLabel} className="flex flex-wrap items-center gap-4">
+          <Link href="/catalog/" variant="default" className="text-sm font-medium" data-testid="catalog-link">
+            {ui.catalog.title}
+          </Link>
+          <Link href="/blocks/" variant="default" className="text-sm font-medium" data-testid="gallery-link">
+            {ui.blocks.title}
+          </Link>
+          <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => actions.toggleTheme()}>
+            {ui.theme.toggle}
+          </Button>
+        </NavBlock>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen.tsx
new file mode 100644
index 0000000..658273c
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen.tsx
@@ -0,0 +1,116 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+/**
+ * Sign-in and account pages: split, centered and minimal sign-in, sign-up, reset, magic link, social first, the
+ * sign-up wizard, cards and the profile.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemeAccountPortalScreen/HomePage";
+import { StartPage } from "./ThemeAccountPortalScreen/StartPage";
+import { SignupPage } from "./ThemeAccountPortalScreen/SignupPage";
+import { WelcomePage } from "./ThemeAccountPortalScreen/WelcomePage";
+import { ResetPage } from "./ThemeAccountPortalScreen/ResetPage";
+import { MagicPage } from "./ThemeAccountPortalScreen/MagicPage";
+import { MinimalPage } from "./ThemeAccountPortalScreen/MinimalPage";
+import { OptionsPage } from "./ThemeAccountPortalScreen/OptionsPage";
+import { JoinPage } from "./ThemeAccountPortalScreen/JoinPage";
+import { CardsPage } from "./ThemeAccountPortalScreen/CardsPage";
+import { ProfilePage } from "./ThemeAccountPortalScreen/ProfilePage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeAccountPortalScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"start","area":"start"},
+  {"path":"signup","area":"signup"},
+  {"path":"welcome","area":"welcome"},
+  {"path":"reset","area":"reset"},
+  {"path":"magic","area":"magic"},
+  {"path":"minimal","area":"minimal"},
+  {"path":"options","area":"options"},
+  {"path":"join","area":"join"},
+  {"path":"cards","area":"cards"},
+  {"path":"profile","area":"profile"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeAccountPortalScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "start" ? (
+          <StartPage />
+        ) : route.area === "signup" ? (
+          <SignupPage />
+        ) : route.area === "welcome" ? (
+          <WelcomePage />
+        ) : route.area === "reset" ? (
+          <ResetPage />
+        ) : route.area === "magic" ? (
+          <MagicPage />
+        ) : route.area === "minimal" ? (
+          <MinimalPage />
+        ) : route.area === "options" ? (
+          <OptionsPage />
+        ) : route.area === "join" ? (
+          <JoinPage />
+        ) : route.area === "cards" ? (
+          <CardsPage />
+        ) : route.area === "profile" ? (
+          <ProfilePage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="row"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/CardsPage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/CardsPage.tsx
new file mode 100644
index 0000000..c11fefd
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/CardsPage.tsx
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The cards page of ThemeAccountPortalScreen.
+
+import { AuthCard, PageIntro, tpl, uniqLabel } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function CardsPage() {
+  return (
+    <>
+      <PageIntro
+        id="cards-pagehead"
+        title={ui.pages.accountPortal.cards.title}
+        text={ui.pages.accountPortal.cards.text}
+        cta={ui.pages.accountPortal.cards.cta}
+        href="#/profile"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <AuthCard
+        id="cards-auth-1"
+        title={ui.auth.signin.title}
+        text={ui.auth.signin.text}
+        submit={ui.auth.signin.submit}
+        switchText={ui.auth.signin.switchText}
+        switchLink={ui.auth.signin.switchLink}
+        switchHref="#/"
+        labels={ui.auth.labels}
+        mode="signin"
+        layout="card"
+        social="none"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))}
+      />
+      <AuthCard
+        id="cards-auth-2"
+        title={ui.auth.signin.title}
+        text={ui.auth.signin.text}
+        submit={ui.auth.signin.submit}
+        switchText={ui.auth.signin.switchText}
+        switchLink={ui.auth.signin.switchLink}
+        switchHref="#/"
+        labels={ui.auth.labels}
+        mode="signin"
+        layout="card"
+        social="show"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))}
+      />
+      <AuthCard
+        id="cards-auth-3"
+        title={ui.auth.signup.title}
+        text={ui.auth.signup.text}
+        submit={ui.auth.signup.submit}
+        switchText={ui.auth.signup.switchText}
+        switchLink={ui.auth.signup.switchLink}
+        switchHref="#/"
+        labels={ui.auth.labels}
+        mode="signup"
+        layout="plain"
+        social="show"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/HomePage.tsx
new file mode 100644
index 0000000..834338d
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/HomePage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The home page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function HomePage() {
+  return (
+    <AuthLayout
+      id="home-authpage"
+      title={ui.pages.accountPortal.home.title}
+      text={ui.pages.accountPortal.home.text}
+      submit={ui.pages.accountPortal.home.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="split"
+      side="end"
+      mode="signin"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/JoinPage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/JoinPage.tsx
new file mode 100644
index 0000000..1905d17
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/JoinPage.tsx
@@ -0,0 +1,57 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The join page of ThemeAccountPortalScreen.
+
+import { PageIntro, SignupWizard, tpl, uniqLabel, type WizardStep } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+const WIZARD_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "icon": "metadata.icon.value",
+  "fieldA": "metadata.fieldA.value",
+  "fieldB": "metadata.fieldB.value",
+} as const;
+
+const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+
+export function JoinPage() {
+  return (
+    <>
+      <PageIntro
+        id="join-pagehead"
+        title={ui.pages.accountPortal.join.title}
+        text={ui.pages.accountPortal.join.text}
+        cta={ui.pages.accountPortal.join.cta}
+        href="#/cards"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <SignupWizard
+        id="join-wizard-1"
+        title={ui.vibe.wizard.title}
+        steps={wizard}
+        labels={ui.vibe.wizard.labels}
+        current={1}
+        progress="bar"
+        layout="card"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))}
+      />
+      <SignupWizard
+        id="join-wizard-2"
+        title={ui.vibe.wizard.title}
+        steps={wizard}
+        labels={ui.vibe.wizard.labels}
+        current={1}
+        progress="list"
+        layout="card"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/MagicPage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/MagicPage.tsx
new file mode 100644
index 0000000..6a84161
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/MagicPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The magic page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function MagicPage() {
+  return (
+    <AuthLayout
+      id="magic-authpage"
+      title={ui.pages.accountPortal.magic.title}
+      text={ui.pages.accountPortal.magic.text}
+      submit={ui.pages.accountPortal.magic.cta}
+      switchTo={{ text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="minimal"
+      side="end"
+      mode="magic"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/MinimalPage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/MinimalPage.tsx
new file mode 100644
index 0000000..724d1df
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/MinimalPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The minimal page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function MinimalPage() {
+  return (
+    <AuthLayout
+      id="minimal-authpage"
+      title={ui.pages.accountPortal.minimal.title}
+      text={ui.pages.accountPortal.minimal.text}
+      submit={ui.pages.accountPortal.minimal.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="minimal"
+      side="end"
+      mode="signin"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/OptionsPage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/OptionsPage.tsx
new file mode 100644
index 0000000..adbd1ea
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/OptionsPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The options page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function OptionsPage() {
+  return (
+    <AuthLayout
+      id="options-authpage"
+      title={ui.pages.accountPortal.options.title}
+      text={ui.pages.accountPortal.options.text}
+      submit={ui.pages.accountPortal.options.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="split"
+      side="end"
+      mode="signin"
+      social="show"
+    />
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/ProfilePage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/ProfilePage.tsx
new file mode 100644
index 0000000..dc417ab
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/ProfilePage.tsx
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The profile page of ThemeAccountPortalScreen.
+
+import { PageIntro, ProfileForm, tpl, uniqLabel } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function ProfilePage() {
+  return (
+    <>
+      <PageIntro
+        id="profile-pagehead"
+        title={ui.pages.accountPortal.profile.title}
+        text={ui.pages.accountPortal.profile.text}
+        cta={ui.pages.accountPortal.profile.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <ProfileForm
+        id="profile-profile-1"
+        title={ui.account.profile.title}
+        text={ui.account.profile.text}
+        labels={ui.account.profile.labels}
+        layout="split"
+        avatar="show"
+        prefs="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))}
+      />
+      <ProfileForm
+        id="profile-profile-2"
+        title={ui.account.profile.title}
+        text={ui.account.profile.text}
+        labels={ui.account.profile.labels}
+        layout="stacked"
+        avatar="show"
+        prefs="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/ResetPage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/ResetPage.tsx
new file mode 100644
index 0000000..dac2ae7
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/ResetPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The reset page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function ResetPage() {
+  return (
+    <AuthLayout
+      id="reset-authpage"
+      title={ui.pages.accountPortal.reset.title}
+      text={ui.pages.accountPortal.reset.text}
+      submit={ui.pages.accountPortal.reset.cta}
+      switchTo={{ text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="centered"
+      side="end"
+      mode="reset"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/SignupPage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/SignupPage.tsx
new file mode 100644
index 0000000..bfd4c52
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/SignupPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The signup page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function SignupPage() {
+  return (
+    <AuthLayout
+      id="signup-authpage"
+      title={ui.pages.accountPortal.signup.title}
+      text={ui.pages.accountPortal.signup.text}
+      submit={ui.pages.accountPortal.signup.cta}
+      switchTo={{ text: ui.auth.signup.switchText, link: ui.auth.signup.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="split"
+      side="end"
+      mode="signup"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/StartPage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/StartPage.tsx
new file mode 100644
index 0000000..e20d91c
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/StartPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The start page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function StartPage() {
+  return (
+    <AuthLayout
+      id="start-authpage"
+      title={ui.pages.accountPortal.start.title}
+      text={ui.pages.accountPortal.start.text}
+      submit={ui.pages.accountPortal.start.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="split"
+      side="start"
+      mode="signin"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeAccountPortalScreen/WelcomePage.tsx b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/WelcomePage.tsx
new file mode 100644
index 0000000..c3b740f
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeAccountPortalScreen/WelcomePage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The welcome page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function WelcomePage() {
+  return (
+    <AuthLayout
+      id="welcome-authpage"
+      title={ui.pages.accountPortal.welcome.title}
+      text={ui.pages.accountPortal.welcome.text}
+      submit={ui.pages.accountPortal.welcome.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="centered"
+      side="end"
+      mode="signin"
+      social="first"
+    />
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen.tsx
new file mode 100644
index 0000000..5fbdd83
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen.tsx
@@ -0,0 +1,108 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+/**
+ * A shop: home with categories and products, the catalog, offers, a product page with details and reviews, the
+ * cart, the checkout, delivery and pickup, and the orders.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemeCommerceShopScreen/HomePage";
+import { CatalogPage } from "./ThemeCommerceShopScreen/CatalogPage";
+import { BrowsePage } from "./ThemeCommerceShopScreen/BrowsePage";
+import { OffersPage } from "./ThemeCommerceShopScreen/OffersPage";
+import { ProductPage } from "./ThemeCommerceShopScreen/ProductPage";
+import { CartPage } from "./ThemeCommerceShopScreen/CartPage";
+import { CheckoutPage } from "./ThemeCommerceShopScreen/CheckoutPage";
+import { DeliveryPage } from "./ThemeCommerceShopScreen/DeliveryPage";
+import { OrdersPage } from "./ThemeCommerceShopScreen/OrdersPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeCommerceShopScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"catalog","area":"catalog"},
+  {"path":"browse","area":"browse"},
+  {"path":"offers","area":"offers"},
+  {"path":"product","area":"product"},
+  {"path":"cart","area":"cart"},
+  {"path":"checkout","area":"checkout"},
+  {"path":"delivery","area":"delivery"},
+  {"path":"orders","area":"orders"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeCommerceShopScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "catalog" ? (
+          <CatalogPage />
+        ) : route.area === "browse" ? (
+          <BrowsePage />
+        ) : route.area === "offers" ? (
+          <OffersPage />
+        ) : route.area === "product" ? (
+          <ProductPage />
+        ) : route.area === "cart" ? (
+          <CartPage />
+        ) : route.area === "checkout" ? (
+          <CheckoutPage />
+        ) : route.area === "delivery" ? (
+          <DeliveryPage />
+        ) : route.area === "orders" ? (
+          <OrdersPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen/BrowsePage.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/BrowsePage.tsx
new file mode 100644
index 0000000..859a7cf
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/BrowsePage.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The browse page of ThemeCommerceShopScreen.
+
+import {
+  CategoryNav,
+  PageIntro,
+  ProductGrid,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Product,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+
+export function BrowsePage() {
+  return (
+    <>
+      <PageIntro
+        id="browse-pagehead"
+        title={ui.pages.commerceShop.browse.title}
+        text={ui.pages.commerceShop.browse.text}
+        cta={ui.pages.commerceShop.browse.cta}
+        href="#/offers"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <CategoryNav
+        label={ui.commerce.nav.label}
+        categories={categories}
+        current="category-all"
+        tools={ui.commerce.tools}
+        layout="bar"
+        count="show"
+        icon="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))}
+      />
+      <ProductGrid
+        id="browse-products-2"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-3"
+        ratio="4/3"
+        rating="show"
+        action="none"
+        tone="muted"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))}
+      />
+      <ProductGrid
+        id="browse-products-3"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-3"
+        ratio="3/4"
+        rating="show"
+        action="button"
+        tone="default"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))}
+      />
+      <ProductGrid
+        id="browse-products-4"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="list"
+        cols="1-3"
+        ratio="4/3"
+        rating="show"
+        action="button"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen/CartPage.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/CartPage.tsx
new file mode 100644
index 0000000..0f296c2
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/CartPage.tsx
@@ -0,0 +1,99 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The cart page of ThemeCommerceShopScreen.
+
+import {
+  CartList,
+  OrderSummary,
+  PageIntro,
+  ShoppingCart,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+
+export function CartPage() {
+  return (
+    <>
+      <PageIntro
+        id="cart-pagehead"
+        title={ui.pages.commerceShop.cart.title}
+        text={ui.pages.commerceShop.cart.text}
+        cta={ui.pages.commerceShop.cart.cta}
+        href="#/checkout"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <ShoppingCart
+        id="cart-cartpage"
+        title={ui.commerce.cartPage.title}
+        lines={cart}
+        rows={summary}
+        promos={promos}
+        labels={ui.commerce.cart}
+        totals={ui.commerce.totals}
+        actions={ui.commerce.cartPage}
+        layout="split"
+        promo="show"
+        progress="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))}
+      />
+      <CartList
+        id="cart-cart"
+        title={ui.commerce.cart.title}
+        lines={cart}
+        empty={ui.empty.cart}
+        labels={ui.commerce.cart}
+        layout="table"
+        media="image"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))}
+      />
+      <OrderSummary
+        id="cart-summary"
+        title={ui.commerce.summary.title}
+        rows={summary}
+        empty={ui.empty.summary}
+        labels={ui.commerce.summary}
+        layout="card"
+        cta="show"
+        note="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen/CatalogPage.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/CatalogPage.tsx
new file mode 100644
index 0000000..04298e8
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/CatalogPage.tsx
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The catalog page of ThemeCommerceShopScreen.
+
+import {
+  CategoryNav,
+  PageTrail,
+  ProductGrid,
+  tpl,
+  uniqLabel,
+  type Category,
+  type NavLink,
+  type Product,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+
+export function CatalogPage() {
+  return (
+    <>
+      <PageTrail
+        id="catalog-pagetrail"
+        title={ui.marketing.pageTrail.title}
+        lead={ui.marketing.pageTrail.lead}
+        badge={ui.marketing.pageTrail.badge}
+        label={ui.marketing.pageTrail.label}
+        crumbs={crumbs}
+        extras={{
+          value: ui.marketing.pageTrail.value,
+          caption: ui.marketing.pageTrail.caption,
+          note: ui.marketing.pageTrail.note,
+          icon: "package",
+          facts: stats,
+        }}
+        aside="figure"
+        tone="default"
+      />
+      <CategoryNav
+        label={ui.commerce.nav.label}
+        categories={categories}
+        current="category-all"
+        tools={ui.commerce.tools}
+        layout="sidebar"
+        count="show"
+        icon="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))}
+      />
+      <ProductGrid
+        id="catalog-products"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-4"
+        ratio="1/1"
+        rating="hide"
+        action="button"
+        tone="default"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.tsx
new file mode 100644
index 0000000..38a235c
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.tsx
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The checkout page of ThemeCommerceShopScreen.
+
+import {
+  CheckoutForm,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Day,
+  type Payment,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+
+export function CheckoutPage() {
+  return (
+    <>
+      <PageIntro
+        id="checkout-pagehead"
+        title={ui.pages.commerceShop.checkout.title}
+        text={ui.pages.commerceShop.checkout.text}
+        cta={ui.pages.commerceShop.checkout.cta}
+        href="#/delivery"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <CheckoutForm
+        id="checkout-checkout"
+        title={ui.commerce.checkout.title}
+        days={days}
+        payments={payments}
+        lines={cart}
+        rows={summary}
+        promos={promos}
+        labels={ui.commerce.checkout}
+        totals={ui.commerce.totals}
+        layout="numbered"
+        summary="aside"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.tsx
new file mode 100644
index 0000000..94649af
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.tsx
@@ -0,0 +1,119 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The delivery page of ThemeCommerceShopScreen.
+
+import {
+  DeliveryInfo,
+  PageIntro,
+  SlotBoard,
+  StoreLocations,
+  ZoneTable,
+  tpl,
+  uniqLabel,
+  type Day,
+  type Feature,
+  type Store,
+  type Zone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+
+export function DeliveryPage() {
+  return (
+    <>
+      <PageIntro
+        id="delivery-pagehead"
+        title={ui.pages.commerceShop.delivery.title}
+        text={ui.pages.commerceShop.delivery.text}
+        cta={ui.pages.commerceShop.delivery.cta}
+        href="#/orders"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <DeliveryInfo
+        id="delivery-delivery"
+        title={ui.commerce.delivery.title}
+        lead={ui.commerce.delivery.lead}
+        facts={deliveryfacts}
+        zones={zones}
+        labels={ui.commerce.delivery}
+        layout="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))}
+      />
+      <ZoneTable
+        id="delivery-zones"
+        title={ui.commerce.zones.title}
+        lead={ui.commerce.zones.lead}
+        zones={zones}
+        empty={ui.empty.zones}
+        labels={ui.commerce.zones}
+        layout="table"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))}
+      />
+      <SlotBoard
+        id="delivery-slots"
+        title={ui.commerce.slots.title}
+        lead={ui.commerce.slots.lead}
+        days={days}
+        empty={ui.empty.days}
+        zone={zones.find((i) => i.id === "zone-central")!}
+        labels={ui.commerce.slots}
+        layout="split"
+        item="card"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))}
+      />
+      <StoreLocations
+        id="delivery-locations"
+        title={ui.commerce.stores.title}
+        lead={ui.commerce.stores.lead}
+        stores={stores}
+        empty={ui.empty.stores}
+        kinds={ui.commerce.stores.kinds}
+        labels={ui.commerce.stores}
+        layout="cards"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/HomePage.tsx
new file mode 100644
index 0000000..c055d54
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/HomePage.tsx
@@ -0,0 +1,157 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The home page of ThemeCommerceShopScreen.
+
+import {
+  CategoryNav,
+  CtaBand,
+  HeroClassic,
+  NewsletterForm,
+  ProductGrid,
+  ReviewList,
+  tpl,
+  uniqLabel,
+  type Category,
+  type CodeLine,
+  type Product,
+  type Review,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <HeroClassic
+        id="home-hero"
+        title={ui.pages.commerceShop.home.title}
+        text={ui.pages.commerceShop.home.text}
+        actions={{
+          cta: ui.pages.commerceShop.home.cta,
+          href: "#/catalog",
+          secondary: ui.cases.shop.hero.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "image",
+          side: "start",
+        }}
+        layout="split"
+        scale="default"
+        tone="muted"
+        density="roomy"
+      />
+      <CategoryNav
+        label={ui.commerce.nav.label}
+        categories={categories}
+        current="category-all"
+        tools={ui.commerce.tools}
+        layout="chips"
+        count="show"
+        icon="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))}
+      />
+      <ProductGrid
+        id="home-products"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-4"
+        ratio="1/1"
+        rating="show"
+        action="button"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+      />
+      <ReviewList
+        id="home-reviews"
+        title={ui.commerce.reviews.title}
+        reviews={reviews}
+        labels={ui.commerce.reviewLabels}
+        layout="grid"
+        item="card"
+        avatar="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))}
+      />
+      <NewsletterForm
+        id="home-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="stacked"
+        terms="hide"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+      />
+      <CtaBand
+        id="home-cta"
+        title={ui.cases.shop.cta.title}
+        text={ui.cases.shop.cta.text}
+        actions={{
+          cta: ui.cases.shop.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.shop.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="split"
+        tone="default"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen/OffersPage.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/OffersPage.tsx
new file mode 100644
index 0000000..4461679
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/OffersPage.tsx
@@ -0,0 +1,119 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The offers page of ThemeCommerceShopScreen.
+
+import {
+  CartDrawer,
+  ProductGrid,
+  StoreHero,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Feature,
+  type Product,
+  type SummaryRow,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+
+export function OffersPage() {
+  return (
+    <>
+      <StoreHero
+        id="offers-storehero"
+        title={ui.commerce.storeHero.title}
+        lead={ui.commerce.storeHero.lead}
+        badge={ui.commerce.storeHero.badge}
+        perks={perks}
+        card={ui.commerce.storeHero.card}
+        actions={{
+          mode: "two",
+          cta: ui.commerce.storeHero.cta,
+          href: "#/catalog",
+          secondary: ui.commerce.storeHero.secondary,
+          secondaryHref: "#/delivery",
+        }}
+        layout="overlay"
+        mediaSide="end"
+        tone="default"
+      />
+      <UspStrip
+        id="offers-usp"
+        perks={perks}
+        empty={ui.empty.perks}
+        layout="strip"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))}
+      />
+      <ProductGrid
+        id="offers-products"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="rail"
+        cols="1-3"
+        ratio="1/1"
+        rating="hide"
+        action="button"
+        tone="default"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))}
+      />
+      <CartDrawer
+        id="offers-cartdrawer"
+        lines={cart}
+        rows={summary}
+        labels={ui.commerce.cart}
+        drawer={ui.commerce.drawer}
+        state="filled"
+        media="image"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen/OrdersPage.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/OrdersPage.tsx
new file mode 100644
index 0000000..869f3ea
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/OrdersPage.tsx
@@ -0,0 +1,64 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The orders page of ThemeCommerceShopScreen.
+
+import { OrderTable, PageIntro, tpl, uniqLabel, type Order } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+const ORDERS_FIELDS = {
+  "id": "id",
+  "number": "title",
+  "date": "metadata.date.value|date",
+  "total": "metadata.total.value",
+  "currency": "metadata.currency.value",
+  "status": "metadata.order_status.value",
+  "items": "metadata.items.value",
+} as const;
+
+const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+
+export function OrdersPage() {
+  return (
+    <>
+      <PageIntro
+        id="orders-pagehead"
+        title={ui.pages.commerceShop.orders.title}
+        text={ui.pages.commerceShop.orders.text}
+        cta={ui.pages.commerceShop.orders.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <OrderTable
+        id="orders-orders-1"
+        title={ui.commerce.orders.title}
+        orders={orders}
+        empty={ui.empty.orders}
+        statuses={ui.status}
+        labels={ui.commerce.orders}
+        layout="table"
+        pager="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))}
+      />
+      <OrderTable
+        id="orders-orders-2"
+        title={ui.commerce.orders.title}
+        orders={orders}
+        empty={ui.empty.orders}
+        statuses={ui.status}
+        labels={ui.commerce.orders}
+        layout="cards"
+        pager="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeCommerceShopScreen/ProductPage.tsx b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/ProductPage.tsx
new file mode 100644
index 0000000..a164856
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeCommerceShopScreen/ProductPage.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The product page of ThemeCommerceShopScreen.
+
+import {
+  ProductDetail,
+  ProductGrid,
+  ProductInfo,
+  ReviewList,
+  tpl,
+  uniqLabel,
+  type Detail,
+  type Product,
+  type Review,
+  type Spec,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+
+export function ProductPage() {
+  return (
+    <>
+      <ProductDetail
+        id="product-product"
+        product={products.find((i) => i.id === "product-lamp")!}
+        labels={ui.commerce.detail}
+        badges={ui.commerce.badges}
+        layout="split"
+        mediaSide="start"
+        thumbs="below"
+        buy="full"
+        tone="default"
+        density="default"
+      />
+      <ProductInfo
+        id="product-productinfo"
+        title={ui.commerce.info.title}
+        details={details}
+        specs={specs}
+        labels={ui.commerce.info}
+        layout="split"
+        expand="first"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))}
+      />
+      <ReviewList
+        id="product-reviews"
+        title={ui.commerce.reviews.title}
+        reviews={reviews}
+        labels={ui.commerce.reviewLabels}
+        layout="list"
+        item="card"
+        avatar="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))}
+      />
+      <ProductGrid
+        id="product-products"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-3"
+        ratio="4/3"
+        rating="show"
+        action="button"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeContentBlogScreen.tsx b/apps/host-react/xgen/screens/ThemeContentBlogScreen.tsx
new file mode 100644
index 0000000..146b42d
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeContentBlogScreen.tsx
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+/**
+ * A blog: a magazine front page, filtered and plain lists, and articles with a table of contents, a single
+ * column or no cover.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemeContentBlogScreen/HomePage";
+import { ArticlesPage } from "./ThemeContentBlogScreen/ArticlesPage";
+import { ArchivePage } from "./ThemeContentBlogScreen/ArchivePage";
+import { PostPage } from "./ThemeContentBlogScreen/PostPage";
+import { StoryPage } from "./ThemeContentBlogScreen/StoryPage";
+import { EssayPage } from "./ThemeContentBlogScreen/EssayPage";
+import { PlainPage } from "./ThemeContentBlogScreen/PlainPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeContentBlogScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"articles","area":"articles"},
+  {"path":"archive","area":"archive"},
+  {"path":"post","area":"post"},
+  {"path":"story","area":"story"},
+  {"path":"essay","area":"essay"},
+  {"path":"plain","area":"plain"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeContentBlogScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "articles" ? (
+          <ArticlesPage />
+        ) : route.area === "archive" ? (
+          <ArchivePage />
+        ) : route.area === "post" ? (
+          <PostPage />
+        ) : route.area === "story" ? (
+          <StoryPage />
+        ) : route.area === "essay" ? (
+          <EssayPage />
+        ) : route.area === "plain" ? (
+          <PlainPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="compact"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeContentBlogScreen/ArchivePage.tsx b/apps/host-react/xgen/screens/ThemeContentBlogScreen/ArchivePage.tsx
new file mode 100644
index 0000000..f0aaf34
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeContentBlogScreen/ArchivePage.tsx
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The archive page of ThemeContentBlogScreen.
+
+import { PageIntro, PostGrid, tpl, uniqLabel, type Post, type PostTopic } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+export function ArchivePage() {
+  return (
+    <>
+      <PageIntro
+        id="archive-pagehead"
+        title={ui.pages.contentBlog.archive.title}
+        text={ui.pages.contentBlog.archive.text}
+        cta={ui.pages.contentBlog.archive.cta}
+        href="#/post"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <PostGrid
+        id="archive-posts-1"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="list"
+        cols="1-3"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))}
+      />
+      <PostGrid
+        id="archive-posts-2"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        media="none"
+        meta="short"
+        tone="muted"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))}
+      />
+      <PostGrid
+        id="archive-posts-3"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        media="none"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeContentBlogScreen/ArticlesPage.tsx b/apps/host-react/xgen/screens/ThemeContentBlogScreen/ArticlesPage.tsx
new file mode 100644
index 0000000..96892dd
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeContentBlogScreen/ArticlesPage.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The articles page of ThemeContentBlogScreen.
+
+import { PageIntro, PostGrid, tpl, uniqLabel, type Post, type PostTopic } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+export function ArticlesPage() {
+  return (
+    <>
+      <PageIntro
+        id="articles-pagehead"
+        title={ui.pages.contentBlog.articles.title}
+        text={ui.pages.contentBlog.articles.text}
+        cta={ui.pages.contentBlog.articles.cta}
+        href="#/archive"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <PostGrid
+        id="articles-posts-1"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "Design", mode: "topics" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))}
+      />
+      <PostGrid
+        id="articles-posts-2"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-2"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeContentBlogScreen/EssayPage.tsx b/apps/host-react/xgen/screens/ThemeContentBlogScreen/EssayPage.tsx
new file mode 100644
index 0000000..d8a37ec
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeContentBlogScreen/EssayPage.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The essay page of ThemeContentBlogScreen.
+
+import {
+  ArticleBody,
+  NewsletterForm,
+  PostHeader,
+  tpl,
+  uniqLabel,
+  type Post,
+  type Section,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function EssayPage() {
+  return (
+    <>
+      <PostHeader
+        id="essay-postheader"
+        post={posts.find((i) => i.id === "post-static-first")!}
+        labels={ui.content.labels}
+        layout="center"
+        cover="show"
+        meta="full"
+        tone="default"
+      />
+      <ArticleBody
+        id="essay-article"
+        title={ui.vibe.article.title}
+        sections={article}
+        empty={ui.empty.sections}
+        tocTitle={ui.vibe.article.toc}
+        layout="column"
+        quotes="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+      />
+      <NewsletterForm
+        id="essay-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="inline"
+        terms="hide"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeContentBlogScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemeContentBlogScreen/HomePage.tsx
new file mode 100644
index 0000000..096dabf
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeContentBlogScreen/HomePage.tsx
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The home page of ThemeContentBlogScreen.
+
+import {
+  NewsletterForm,
+  PageIntro,
+  PostGrid,
+  PostShowcase,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.contentBlog.home.title}
+        text={ui.pages.contentBlog.home.text}
+        cta={ui.pages.contentBlog.home.cta}
+        href="#/articles"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <PostGrid
+        id="home-posts"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="magazine"
+        cols="1-3"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))}
+      />
+      <PostShowcase
+        id="home-postshowcase"
+        title={ui.content.postShowcase.title}
+        lead={ui.content.postShowcase.lead}
+        badge={ui.content.postShowcase.badge}
+        posts={posts}
+        empty={ui.empty.posts}
+        labels={ui.content.labels}
+        action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+        layout="intro"
+        cols="3"
+        mediaSide="start"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))}
+      />
+      <NewsletterForm
+        id="home-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="stacked"
+        terms="hide"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeContentBlogScreen/PlainPage.tsx b/apps/host-react/xgen/screens/ThemeContentBlogScreen/PlainPage.tsx
new file mode 100644
index 0000000..a3eba17
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeContentBlogScreen/PlainPage.tsx
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The plain page of ThemeContentBlogScreen.
+
+import {
+  ArticleBody,
+  PostGrid,
+  PostHeader,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+  type Section,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function PlainPage() {
+  return (
+    <>
+      <PostHeader
+        id="plain-postheader"
+        post={posts.find((i) => i.id === "post-static-first")!}
+        labels={ui.content.labels}
+        layout="start"
+        cover="hide"
+        meta="full"
+        tone="default"
+      />
+      <ArticleBody
+        id="plain-article"
+        title={ui.vibe.article.title}
+        sections={article}
+        empty={ui.empty.sections}
+        tocTitle={ui.vibe.article.toc}
+        layout="column"
+        quotes="hide"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))}
+      />
+      <PostGrid
+        id="plain-posts"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeContentBlogScreen/PostPage.tsx b/apps/host-react/xgen/screens/ThemeContentBlogScreen/PostPage.tsx
new file mode 100644
index 0000000..39f151f
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeContentBlogScreen/PostPage.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The post page of ThemeContentBlogScreen.
+
+import { ArticleBody, PostHeader, tpl, uniqLabel, type Post, type Section } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function PostPage() {
+  return (
+    <>
+      <PostHeader
+        id="post-postheader"
+        post={posts.find((i) => i.id === "post-static-first")!}
+        labels={ui.content.labels}
+        layout="start"
+        cover="show"
+        meta="full"
+        tone="default"
+      />
+      <ArticleBody
+        id="post-article"
+        title={ui.vibe.article.title}
+        sections={article}
+        empty={ui.empty.sections}
+        tocTitle={ui.vibe.article.toc}
+        layout="toc"
+        quotes="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeContentBlogScreen/StoryPage.tsx b/apps/host-react/xgen/screens/ThemeContentBlogScreen/StoryPage.tsx
new file mode 100644
index 0000000..3dbb8d7
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeContentBlogScreen/StoryPage.tsx
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The story page of ThemeContentBlogScreen.
+
+import {
+  ArticleBody,
+  PostSplit,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Post,
+  type Section,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+export function StoryPage() {
+  return (
+    <>
+      <PostSplit
+        id="story-postsplit"
+        post={posts.find((i) => i.id === "post-static-first")!}
+        labels={ui.content.postSplit.labels}
+        extras={{
+          role: ui.content.postSplit.role,
+          bio: ui.content.postSplit.bio,
+          views: ui.content.postSplit.views,
+          likes: ui.content.postSplit.likes,
+          tags: posttags,
+          outline,
+        }}
+        layout="split"
+        mediaSide="end"
+        author="card"
+        cover="wide"
+        actions="pair"
+        tone="muted"
+      />
+      <ArticleBody
+        id="story-article"
+        title={ui.vibe.article.title}
+        sections={article}
+        empty={ui.empty.sections}
+        tocTitle={ui.vibe.article.toc}
+        layout="column"
+        quotes="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen.tsx b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen.tsx
new file mode 100644
index 0000000..a8a1453
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen.tsx
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+/**
+ * A console: overview with counters, chart and activity, a kanban board, app shells with sidebar, top bar and
+ * panes, dashboard shells, navigation, and empty and loading states.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemeDashboardConsoleScreen/HomePage";
+import { BoardPage } from "./ThemeDashboardConsoleScreen/BoardPage";
+import { WorkspacePage } from "./ThemeDashboardConsoleScreen/WorkspacePage";
+import { ShellsPage } from "./ThemeDashboardConsoleScreen/ShellsPage";
+import { LayoutsPage } from "./ThemeDashboardConsoleScreen/LayoutsPage";
+import { StatesPage } from "./ThemeDashboardConsoleScreen/StatesPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeDashboardConsoleScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"board","area":"board"},
+  {"path":"workspace","area":"workspace"},
+  {"path":"shells","area":"shells"},
+  {"path":"layouts","area":"layouts"},
+  {"path":"states","area":"states"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeDashboardConsoleScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "board" ? (
+          <BoardPage />
+        ) : route.area === "workspace" ? (
+          <WorkspacePage />
+        ) : route.area === "shells" ? (
+          <ShellsPage />
+        ) : route.area === "layouts" ? (
+          <LayoutsPage />
+        ) : route.area === "states" ? (
+          <StatesPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="compact"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.tsx b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.tsx
new file mode 100644
index 0000000..9275277
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The board page of ThemeDashboardConsoleScreen.
+
+import { KanbanBoard, PageIntro, tpl, uniqLabel, type BoardCard, type Lane } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+
+export function BoardPage() {
+  return (
+    <>
+      <PageIntro
+        id="board-pagehead"
+        title={ui.pages.dashboardConsole.board.title}
+        text={ui.pages.dashboardConsole.board.text}
+        cta={ui.pages.dashboardConsole.board.cta}
+        href="#/workspace"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <KanbanBoard
+        id="board-kanban-1"
+        title={ui.vibe.kanban.title}
+        lanes={lanes}
+        empty={ui.empty.lanes}
+        cards={cards}
+        countLabel={ui.vibe.kanban.count}
+        card="detail"
+        cols="3"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))}
+      />
+      <KanbanBoard
+        id="board-kanban-2"
+        title={ui.vibe.kanban.title}
+        lanes={lanes}
+        empty={ui.empty.lanes}
+        cards={cards}
+        countLabel={ui.vibe.kanban.count}
+        card="detail"
+        cols="2"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/HomePage.tsx
new file mode 100644
index 0000000..1620883
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/HomePage.tsx
@@ -0,0 +1,115 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The home page of ThemeDashboardConsoleScreen.
+
+import {
+  ActivityFeed,
+  ChartPanel,
+  DashboardOverview,
+  MetricRow,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type Event,
+  type Point,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.dashboardConsole.home.title}
+        text={ui.pages.dashboardConsole.home.text}
+        cta={ui.pages.dashboardConsole.home.cta}
+        href="#/board"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <DashboardOverview
+        id="home-overview"
+        title={ui.vibe.overview.title}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="split"
+        cols="4"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))}
+      />
+      <MetricRow
+        id="home-metrics"
+        title={ui.dashboard.metrics.title}
+        metrics={metrics}
+        empty={ui.empty.metrics}
+        cols="4"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))}
+      />
+      <ChartPanel
+        id="home-chart"
+        title={ui.dashboard.chart.title}
+        text={ui.dashboard.chart.text}
+        series={series}
+        empty={ui.empty.series}
+        summary={ui.dashboard.chart.summary}
+        percent={ui.dashboard.chart.percent}
+        chart="bars"
+        size="default"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))}
+      />
+      <ActivityFeed
+        id="home-activity"
+        title={ui.dashboard.activity.title}
+        text={ui.dashboard.activity.text}
+        events={activity}
+        empty={ui.empty.activity}
+        layout="timeline"
+        density="default"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.tsx b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.tsx
new file mode 100644
index 0000000..6e0b62c
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.tsx
@@ -0,0 +1,145 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The layouts page of ThemeDashboardConsoleScreen.
+
+import {
+  BottomNav,
+  ChartPanel,
+  DashboardOverview,
+  MetricRow,
+  PageIntro,
+  SidebarNav,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+
+export function LayoutsPage() {
+  return (
+    <>
+      <PageIntro
+        id="layouts-pagehead"
+        title={ui.pages.dashboardConsole.layouts.title}
+        text={ui.pages.dashboardConsole.layouts.text}
+        cta={ui.pages.dashboardConsole.layouts.cta}
+        href="#/states"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <SidebarNav
+        label={ui.vibe.sidebar.label}
+        brand={ui.site.header.brand}
+        links={sidenav}
+        current="item-orders"
+        userName={ui.vibe.sidebar.userName}
+        userEmail={ui.vibe.sidebar.userEmail}
+        width="full"
+        user="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))}
+      />
+      <SidebarNav
+        label={ui.vibe.sidebar.label}
+        brand={ui.site.header.brand}
+        links={sidenav}
+        current="item-orders"
+        userName={ui.vibe.sidebar.userName}
+        userEmail={ui.vibe.sidebar.userEmail}
+        width="compact"
+        user="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))}
+      />
+      <BottomNav
+        label={ui.vibe.bottom.label}
+        tabs={tabs}
+        current="tab-explore"
+        labels="show"
+        position="static"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))}
+      />
+      <MetricRow
+        id="layouts-metrics"
+        title={ui.dashboard.metrics.title}
+        metrics={metrics}
+        empty={ui.empty.metrics}
+        cols="4"
+        item="compact"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))}
+      />
+      <ChartPanel
+        id="layouts-chart"
+        title={ui.dashboard.chart.title}
+        text={ui.dashboard.chart.text}
+        series={series}
+        empty={ui.empty.series}
+        summary={ui.dashboard.chart.summary}
+        percent={ui.dashboard.chart.percent}
+        chart="meters"
+        size="default"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))}
+      />
+      <DashboardOverview
+        id="layouts-overview"
+        title={ui.vibe.overview.title}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="stacked"
+        cols="4"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.tsx b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.tsx
new file mode 100644
index 0000000..cff6d4d
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.tsx
@@ -0,0 +1,117 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The shells page of ThemeDashboardConsoleScreen.
+
+import { DashboardShell, PageIntro, tpl, uniqLabel, type NavLink } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function ShellsPage() {
+  return (
+    <>
+      <PageIntro
+        id="shells-pagehead"
+        title={ui.pages.dashboardConsole.shells.title}
+        text={ui.pages.dashboardConsole.shells.text}
+        cta={ui.pages.dashboardConsole.shells.cta}
+        href="#/layouts"
+        align="start"
+        tone="muted"
+        density="compact"
+      />
+      <DashboardShell
+        id="shells-dashshell-1"
+        title={ui.dashboard.shells.title}
+        nav={{
+          label: ui.dashboard.shells.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-orders",
+          subTitle: ui.dashboard.shells.subTitle,
+          sub: subnav,
+          subCurrent: "subitem-all",
+          search: ui.dashboard.shells.search,
+          shortcut: ui.dashboard.shells.shortcut,
+          expand: ui.dashboard.shells.expand,
+          userName: ui.dashboard.shells.userName,
+          copyright: ui.dashboard.shells.copyright,
+          footerLabel: ui.dashboard.shells.footerLabel,
+          footer: helplinks,
+        }}
+        topbar="full"
+        search="show"
+        sidebar="wide"
+        side="start"
+        footer="none"
+        content="grid"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))}
+      />
+      <DashboardShell
+        id="shells-dashshell-2"
+        title={ui.dashboard.shells.title}
+        nav={{
+          label: ui.dashboard.shells.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-orders",
+          subTitle: ui.dashboard.shells.subTitle,
+          sub: subnav,
+          subCurrent: "subitem-all",
+          search: ui.dashboard.shells.search,
+          shortcut: ui.dashboard.shells.shortcut,
+          expand: ui.dashboard.shells.expand,
+          userName: ui.dashboard.shells.userName,
+          copyright: ui.dashboard.shells.copyright,
+          footerLabel: ui.dashboard.shells.footerLabel,
+          footer: helplinks,
+        }}
+        topbar="inset"
+        search="hide"
+        sidebar="twolevel"
+        side="start"
+        footer="inset"
+        content="list"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))}
+      />
+      <DashboardShell
+        id="shells-dashshell-3"
+        title={ui.dashboard.shells.title}
+        nav={{
+          label: ui.dashboard.shells.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-orders",
+          subTitle: ui.dashboard.shells.subTitle,
+          sub: subnav,
+          subCurrent: "subitem-all",
+          search: ui.dashboard.shells.search,
+          shortcut: ui.dashboard.shells.shortcut,
+          expand: ui.dashboard.shells.expand,
+          userName: ui.dashboard.shells.userName,
+          copyright: ui.dashboard.shells.copyright,
+          footerLabel: ui.dashboard.shells.footerLabel,
+          footer: helplinks,
+        }}
+        topbar="full"
+        search="show"
+        sidebar="wide"
+        side="end"
+        footer="full"
+        content="split"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.tsx b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.tsx
new file mode 100644
index 0000000..7fd5fa7
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.tsx
@@ -0,0 +1,73 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The states page of ThemeDashboardConsoleScreen.
+
+import { EmptyPanel, PageIntro, SkeletonLayout, tpl, uniqLabel, type Line } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+
+export function StatesPage() {
+  return (
+    <>
+      <PageIntro
+        id="states-pagehead"
+        title={ui.pages.dashboardConsole.states.title}
+        text={ui.pages.dashboardConsole.states.text}
+        cta={ui.pages.dashboardConsole.states.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <EmptyPanel
+        id="states-empty-1"
+        title={ui.dashboard.empty.tour.title}
+        text={ui.dashboard.empty.tour.text}
+        cta={ui.dashboard.empty.tour.cta}
+        ctaHref="#/"
+        layout="card"
+        actions="button"
+        visual="image"
+        size="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))}
+      />
+      <EmptyPanel
+        id="states-empty-2"
+        title={ui.dashboard.empty.orders.title}
+        text={ui.dashboard.empty.orders.text}
+        cta={ui.dashboard.empty.orders.cta}
+        ctaHref="#/"
+        layout="card"
+        actions="button"
+        visual="icon"
+        size="default"
+        icon="shopping-bag"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))}
+      />
+      <SkeletonLayout
+        id="states-skeleton-3"
+        title={ui.vibe.skeleton.title}
+        label={ui.vibe.skeleton.label}
+        lines={placeholders}
+        shape="cards"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))}
+      />
+      <SkeletonLayout
+        id="states-skeleton-4"
+        title={ui.vibe.skeleton.title}
+        label={ui.vibe.skeleton.label}
+        lines={placeholders}
+        shape="list"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.tsx b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.tsx
new file mode 100644
index 0000000..8f4d76d
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.tsx
@@ -0,0 +1,141 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The workspace page of ThemeDashboardConsoleScreen.
+
+import {
+  AppShell,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+
+export function WorkspacePage() {
+  return (
+    <>
+      <PageIntro
+        id="workspace-pagehead"
+        title={ui.pages.dashboardConsole.workspace.title}
+        text={ui.pages.dashboardConsole.workspace.text}
+        cta={ui.pages.dashboardConsole.workspace.cta}
+        href="#/shells"
+        align="start"
+        tone="muted"
+        density="compact"
+      />
+      <AppShell
+        id="workspace-shell-1"
+        title={ui.vibe.shell.title}
+        nav={{
+          label: ui.vibe.sidebar.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-overview",
+        }}
+        user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="sidebar"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))}
+      />
+      <AppShell
+        id="workspace-shell-2"
+        title={ui.vibe.shell.title}
+        nav={{
+          label: ui.vibe.sidebar.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-overview",
+        }}
+        user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="top"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))}
+      />
+      <AppShell
+        id="workspace-shell-3"
+        title={ui.vibe.shell.title}
+        nav={{
+          label: ui.vibe.sidebar.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-overview",
+        }}
+        user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="panes"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingLandingScreen.tsx b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen.tsx
new file mode 100644
index 0000000..9eca30e
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen.tsx
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+/**
+ * Landing pages of a product: five heroes (screenshot, form, code, display type, backdrop) each followed by
+ * proof, features and a call to action, then a company page, a portfolio and a page for teams built from the
+ * split blocks.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemeMarketingLandingScreen/HomePage";
+import { LaunchPage } from "./ThemeMarketingLandingScreen/LaunchPage";
+import { DevelopersPage } from "./ThemeMarketingLandingScreen/DevelopersPage";
+import { StudioPage } from "./ThemeMarketingLandingScreen/StudioPage";
+import { EventsPage } from "./ThemeMarketingLandingScreen/EventsPage";
+import { CompanyPage } from "./ThemeMarketingLandingScreen/CompanyPage";
+import { WorkPage } from "./ThemeMarketingLandingScreen/WorkPage";
+import { TeamsPage } from "./ThemeMarketingLandingScreen/TeamsPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingLandingScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"launch","area":"launch"},
+  {"path":"developers","area":"developers"},
+  {"path":"studio","area":"studio"},
+  {"path":"events","area":"events"},
+  {"path":"company","area":"company"},
+  {"path":"work","area":"work"},
+  {"path":"teams","area":"teams"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeMarketingLandingScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "launch" ? (
+          <LaunchPage />
+        ) : route.area === "developers" ? (
+          <DevelopersPage />
+        ) : route.area === "studio" ? (
+          <StudioPage />
+        ) : route.area === "events" ? (
+          <EventsPage />
+        ) : route.area === "company" ? (
+          <CompanyPage />
+        ) : route.area === "work" ? (
+          <WorkPage />
+        ) : route.area === "teams" ? (
+          <TeamsPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.tsx
new file mode 100644
index 0000000..452fe75
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The company page of ThemeMarketingLandingScreen.
+
+import {
+  AboutCompany,
+  JobBoard,
+  MilestoneTimeline,
+  PageIntro,
+  StoryTabs,
+  TeamGrid,
+  tpl,
+  uniqLabel,
+  type Department,
+  type Feature,
+  type Job,
+  type Member,
+  type Milestone,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+
+export function CompanyPage() {
+  return (
+    <>
+      <PageIntro
+        id="company-pagehead"
+        title={ui.pages.marketingLanding.company.title}
+        text={ui.pages.marketingLanding.company.text}
+        cta={ui.pages.marketingLanding.company.cta}
+        href="#/work"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <AboutCompany
+        id="company-about"
+        title={ui.company.about.title}
+        lead={ui.company.about.lead}
+        stats={stats}
+        values={values}
+        layout="split"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))}
+      />
+      <StoryTabs
+        id="company-storytabs"
+        title={ui.company.storyTabs.title}
+        lead={ui.company.storyTabs.lead}
+        badge={ui.company.storyTabs.badge}
+        steps={milestones}
+        empty={ui.empty.milestones}
+        active="milestone-runtimes"
+        labels={ui.company.storyTabs.labels}
+        layout="years"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))}
+      />
+      <MilestoneTimeline
+        id="company-timeline"
+        title={ui.company.timeline.title}
+        lead={ui.company.timeline.lead}
+        milestones={milestones}
+        empty={ui.empty.milestones}
+        layout="split"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))}
+      />
+      <TeamGrid
+        id="company-team"
+        title={ui.company.team.title}
+        lead={ui.company.team.lead}
+        members={members}
+        empty={ui.empty.members}
+        depts={ui.company.depts}
+        layout="cards"
+        cols="1-4"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))}
+      />
+      <JobBoard
+        id="company-jobs"
+        title={ui.company.jobs.title}
+        lead={ui.company.jobs.lead}
+        jobs={jobs}
+        empty={ui.empty.jobs}
+        departments={departments}
+        labels={ui.company.jobs}
+        layout="grouped"
+        salary="hide"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.tsx
new file mode 100644
index 0000000..72e880c
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.tsx
@@ -0,0 +1,154 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The developers page of ThemeMarketingLandingScreen.
+
+import {
+  BentoGrid,
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  HeroClassic,
+  TemplateGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Filter,
+  type Template,
+  type Tile,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+const TEMPLATES_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "views": "metadata.views.value|compact",
+  "likes": "metadata.likes.value|compact",
+  "topic": "metadata.topic.value",
+} as const;
+const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+
+export function DevelopersPage() {
+  return (
+    <>
+      <HeroClassic
+        id="developers-hero"
+        title={ui.pages.marketingLanding.developers.title}
+        text={ui.pages.marketingLanding.developers.text}
+        actions={{
+          cta: ui.pages.marketingLanding.developers.cta,
+          href: "#/studio",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "code",
+          side: "end",
+        }}
+        layout="split"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <BentoGrid
+        id="developers-bento"
+        title={ui.vibe.bento.title}
+        tiles={bento}
+        empty={ui.empty.tiles}
+        layout="bento"
+        media="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))}
+      />
+      <TemplateGrid
+        id="developers-templates"
+        title={ui.vibe.templates.title}
+        templates={templates}
+        filters={templateFilters}
+        labels={ui.vibe.templates}
+        browseHref="#/"
+        empty={ui.empty.templates}
+        cols="1-4"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))}
+      />
+      <FeatureGrid
+        id="developers-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="grid"
+        cols="1-4"
+        item="tile"
+        mediaSide="end"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+      />
+      <FaqList
+        id="developers-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "billing", mode: "categories" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+      />
+      <CtaBand
+        id="developers-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="split"
+        tone="default"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/EventsPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/EventsPage.tsx
new file mode 100644
index 0000000..f09c95b
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/EventsPage.tsx
@@ -0,0 +1,140 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The events page of ThemeMarketingLandingScreen.
+
+import {
+  CtaBand,
+  HeroClassic,
+  StatsBand,
+  TestimonialGrid,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Quote,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function EventsPage() {
+  return (
+    <>
+      <HeroClassic
+        id="events-hero"
+        title={ui.pages.marketingLanding.events.title}
+        text={ui.pages.marketingLanding.events.text}
+        actions={{
+          cta: ui.pages.marketingLanding.events.cta,
+          href: "#/company",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "backdrop",
+          side: "end",
+        }}
+        layout="centered"
+        scale="default"
+        tone="muted"
+        density="roomy"
+      />
+      <StatsBand
+        id="events-stats"
+        title={ui.marketing.stats.title}
+        stats={[stats?.[0], stats?.[1], stats?.[2]]}
+        empty={ui.marketing.stats.empty}
+        cols="3"
+        layout="row"
+        surface="none"
+        item="card"
+        align="center"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))}
+      />
+      <TestimonialGrid
+        id="events-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="strip"
+        cols="1-3"
+        item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))}
+      />
+      <VideoGrid
+        id="events-videos"
+        title={ui.vibe.videos.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        playLabel={ui.vibe.videos.play}
+        byLine={ui.testimonials.byLine}
+        cols="1-3"
+        caption="overlay"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))}
+      />
+      <CtaBand
+        id="events-cta"
+        title={ui.cases.agency.cta.title}
+        text={ui.cases.agency.cta.text}
+        actions={{
+          cta: ui.cases.agency.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.agency.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="card"
+        tone="muted"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/HomePage.tsx
new file mode 100644
index 0000000..fee05a9
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/HomePage.tsx
@@ -0,0 +1,201 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The home page of ThemeMarketingLandingScreen.
+
+import {
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  HeroClassic,
+  LogoCloud,
+  StatsBand,
+  StepsList,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Logo,
+  type Quote,
+  type Stat,
+  type Step,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <HeroClassic
+        id="home-hero"
+        title={ui.pages.marketingLanding.home.title}
+        text={ui.pages.marketingLanding.home.text}
+        actions={{
+          cta: ui.pages.marketingLanding.home.cta,
+          href: "#/launch",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "image",
+          side: "end",
+        }}
+        layout="centered"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <LogoCloud
+        id="home-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="row"
+        cols="4"
+        item="icon"
+        tone="default"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+      />
+      <FeatureGrid
+        id="home-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="rows"
+        cols="1-3"
+        item="card"
+        mediaSide="alternate"
+        tone="muted"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))}
+      />
+      <StepsList
+        id="home-steps"
+        title={ui.marketing.steps.title}
+        steps={steps}
+        empty={ui.empty.steps}
+        layout="row"
+        marker="icon"
+        align="start"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))}
+      />
+      <StatsBand
+        id="home-stats"
+        title={ui.marketing.stats.title}
+        stats={stats}
+        empty={ui.marketing.stats.empty}
+        cols="4"
+        layout="row"
+        surface="none"
+        item="icon"
+        align="start"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))}
+      />
+      <TestimonialGrid
+        id="home-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="single"
+        cols="1-3"
+        item={{ kind: "plain", avatar: "image", rating: "hide", mark: "none" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))}
+      />
+      <FaqList
+        id="home-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))}
+      />
+      <CtaBand
+        id="home-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.tsx
new file mode 100644
index 0000000..a4b5306
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.tsx
@@ -0,0 +1,144 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The launch page of ThemeMarketingLandingScreen.
+
+import {
+  CtaBand,
+  HeroClassic,
+  IconWall,
+  ProofBand,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function LaunchPage() {
+  return (
+    <>
+      <HeroClassic
+        id="launch-hero"
+        title={ui.pages.marketingLanding.launch.title}
+        text={ui.pages.marketingLanding.launch.text}
+        actions={{
+          cta: ui.pages.marketingLanding.launch.cta,
+          href: "#/developers",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "form",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "none",
+          side: "end",
+        }}
+        layout="centered"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <IconWall
+        id="launch-iconwall"
+        title={ui.vibe.wall.title}
+        features={features}
+        empty={ui.empty.features}
+        cols="4"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))}
+      />
+      <ProofBand
+        id="launch-proof"
+        title={ui.vibe.proof.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        stats={stats}
+        layout="above"
+        logoStyle="name"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))}
+      />
+      <TestimonialGrid
+        id="launch-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="grid"
+        cols="1-3"
+        item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))}
+      />
+      <CtaBand
+        id="launch-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "form",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/StudioPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/StudioPage.tsx
new file mode 100644
index 0000000..03a0689
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/StudioPage.tsx
@@ -0,0 +1,137 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The studio page of ThemeMarketingLandingScreen.
+
+import {
+  CtaBand,
+  FeatureGrid,
+  HeroClassic,
+  LogoCloud,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+  type Logo,
+  type Quote,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function StudioPage() {
+  return (
+    <>
+      <HeroClassic
+        id="studio-hero"
+        title={ui.pages.marketingLanding.studio.title}
+        text={ui.pages.marketingLanding.studio.text}
+        actions={{
+          cta: ui.pages.marketingLanding.studio.cta,
+          href: "#/events",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "none",
+          side: "end",
+        }}
+        layout="centered"
+        scale="display"
+        tone="default"
+        density="roomy"
+      />
+      <LogoCloud
+        id="studio-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="grid"
+        cols="4"
+        item="name"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))}
+      />
+      <FeatureGrid
+        id="studio-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="grid"
+        cols="1-4"
+        item="tile"
+        mediaSide="end"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+      />
+      <TestimonialGrid
+        id="studio-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="masonry"
+        cols="1-3"
+        item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))}
+      />
+      <CtaBand
+        id="studio-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.tsx
new file mode 100644
index 0000000..0af4c6e
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.tsx
@@ -0,0 +1,213 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The teams page of ThemeMarketingLandingScreen.
+
+import {
+  CtaProof,
+  FaqSplit,
+  HeroSplit,
+  LogoCloud,
+  QuoteSplit,
+  tpl,
+  uniqLabel,
+  type FaqTab,
+  type Feature,
+  type Logo,
+  type Plan,
+  type Question,
+  type Quote,
+  type Stat,
+  type Zone,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const QUESTIONS_FIELDS = {
+  "id": "id",
+  "question": "title",
+  "answer": "metadata.answer.value",
+  "category": "terms|term:faq_category",
+  "icon": "metadata.icon.value",
+} as const;
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+export function TeamsPage() {
+  return (
+    <>
+      <HeroSplit
+        id="teams-herosplit"
+        title={ui.marketing.heroSplit.title}
+        lead={ui.marketing.heroSplit.lead}
+        badge={ui.marketing.heroSplit.badge}
+        actions={{
+          mode: "two",
+          cta: ui.marketing.heroSplit.cta,
+          href: "#/pricing",
+          secondary: ui.marketing.heroSplit.secondary,
+          secondaryHref: "#/features",
+        }}
+        content={{
+          stats,
+          features,
+          people: testimonials,
+          plans: tiers,
+          proof: ui.marketing.heroSplit.proof,
+          card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+        }}
+        extra="quote"
+        media="card"
+        mediaSide="end"
+        tone="default"
+      />
+      <LogoCloud
+        id="teams-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="row"
+        cols="4"
+        item="icon"
+        tone="default"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+      />
+      <FaqSplit
+        id="teams-faqsplit"
+        title={ui.marketing.faqSplit.title}
+        lead={ui.marketing.faqSplit.lead}
+        badge={ui.marketing.faqSplit.badge}
+        items={questions}
+        channels={channels}
+        topics={faqtabs}
+        labels={{
+          cta: ui.marketing.faqSplit.cta,
+          more: ui.marketing.faqSplit.more,
+          asideTitle: ui.marketing.faqSplit.asideTitle,
+          asideText: ui.marketing.faqSplit.asideText,
+          asideCta: ui.marketing.faqSplit.asideCta,
+          search: ui.marketing.faqSplit.search,
+          popular: ui.marketing.faqSplit.popular,
+        }}
+        layout="aside"
+        cards="grid3"
+        mediaSide="end"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))}
+      />
+      <QuoteSplit
+        id="teams-quotesplit"
+        title={ui.marketing.quoteSplit.title}
+        lead={ui.marketing.quoteSplit.lead}
+        badge={ui.marketing.quoteSplit.badge}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        extras={{
+          stats,
+          logos,
+          rating: 5,
+          score: ui.marketing.quoteSplit.score,
+          reviews: ui.marketing.quoteSplit.reviews,
+        }}
+        actions={{
+          mode: "two",
+          cta: ui.marketing.quoteSplit.cta,
+          href: "#/customers",
+          secondary: ui.marketing.quoteSplit.secondary,
+          secondaryHref: "#/contact",
+        }}
+        layout="rating"
+        mediaSide="end"
+        tone="muted"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))}
+      />
+      <CtaProof
+        id="teams-ctaproof"
+        title={ui.marketing.ctaProof.title}
+        lead={ui.marketing.ctaProof.lead}
+        badge={ui.marketing.ctaProof.badge}
+        actions={{
+          mode: "two",
+          cta: ui.marketing.ctaProof.cta,
+          href: "#/pricing",
+          secondary: ui.marketing.ctaProof.secondary,
+          secondaryHref: "#/contact",
+        }}
+        content={{ logos, features, stats, zones }}
+        layout="split"
+        proof="stats"
+        mediaSide="end"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/WorkPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/WorkPage.tsx
new file mode 100644
index 0000000..34bcb31
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingLandingScreen/WorkPage.tsx
@@ -0,0 +1,92 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The work page of ThemeMarketingLandingScreen.
+
+import {
+  AboutMe,
+  PhotoGallery,
+  ProjectGrid,
+  tpl,
+  uniqLabel,
+  type Photo,
+  type Project,
+  type Skill,
+  type Spec,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+
+export function WorkPage() {
+  return (
+    <>
+      <AboutMe
+        id="work-aboutme"
+        title={ui.company.aboutMe.title}
+        lead={ui.company.aboutMe.lead}
+        badge={ui.company.aboutMe.badge}
+        facts={profilefacts}
+        skills={skills}
+        labels={ui.company.aboutMe}
+        actions={{
+          mode: "two",
+          cta: ui.company.aboutMe.cta,
+          href: "#/work",
+          secondary: ui.company.aboutMe.more,
+          secondaryHref: "#/contact",
+        }}
+        layout="facts"
+        mediaSide="start"
+        tone="default"
+      />
+      <ProjectGrid
+        id="work-projects"
+        title={ui.company.projects.title}
+        lead={ui.company.projects.lead}
+        projects={projects}
+        empty={ui.empty.projects}
+        labels={ui.company.projects}
+        layout="cards"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))}
+      />
+      <PhotoGallery
+        id="work-photos"
+        title={ui.company.photos.title}
+        lead={ui.company.photos.lead}
+        photos={photos}
+        empty={ui.empty.photos}
+        labels={ui.company.photos}
+        layout="masonry"
+        captions="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingPricingScreen.tsx b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen.tsx
new file mode 100644
index 0000000..f711858
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+/**
+ * Pricing pages: tiers with a billing switch, a comparison table, one plan, a usage slider, credit packs, free
+ * against pro, and us against the rest.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemeMarketingPricingScreen/HomePage";
+import { PlansPage } from "./ThemeMarketingPricingScreen/PlansPage";
+import { UsagePage } from "./ThemeMarketingPricingScreen/UsagePage";
+import { ComparePage } from "./ThemeMarketingPricingScreen/ComparePage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingPricingScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"plans","area":"plans"},
+  {"path":"usage","area":"usage"},
+  {"path":"compare","area":"compare"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeMarketingPricingScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "plans" ? (
+          <PlansPage />
+        ) : route.area === "usage" ? (
+          <UsagePage />
+        ) : route.area === "compare" ? (
+          <ComparePage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "first",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/ComparePage.tsx b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/ComparePage.tsx
new file mode 100644
index 0000000..2790db8
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/ComparePage.tsx
@@ -0,0 +1,139 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+// The compare page of ThemeMarketingPricingScreen.
+
+import {
+  ComparisonTable,
+  CtaBand,
+  FaqList,
+  HeroClassic,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type CompareRow,
+  type Faq,
+  type FaqTab,
+  type Quote,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function ComparePage() {
+  return (
+    <>
+      <HeroClassic
+        id="compare-hero"
+        title={ui.pages.marketingPricing.compare.title}
+        text={ui.pages.marketingPricing.compare.text}
+        actions={{
+          cta: ui.pages.marketingPricing.compare.cta,
+          href: "#/",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "none",
+          side: "end",
+        }}
+        layout="centered"
+        scale="default"
+        tone="muted"
+        density="default"
+      />
+      <ComparisonTable
+        id="compare-compare"
+        title={ui.vibe.rivals.title}
+        rows={rivals}
+        empty={ui.empty.rows}
+        labels={ui.vibe.rivals.labels}
+        highlight="middle"
+        tone="muted"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))}
+      />
+      <TestimonialGrid
+        id="compare-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="single"
+        cols="1-3"
+        item={{ kind: "plain", avatar: "image", rating: "hide", mark: "icon" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))}
+      />
+      <FaqList
+        id="compare-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+      />
+      <CtaBand
+        id="compare-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="quote"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/HomePage.tsx
new file mode 100644
index 0000000..663425b
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/HomePage.tsx
@@ -0,0 +1,136 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+// The home page of ThemeMarketingPricingScreen.
+
+import {
+  ComparisonTable,
+  CtaBand,
+  FaqList,
+  LogoCloud,
+  PageIntro,
+  PricingTiers,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+  type Faq,
+  type FaqTab,
+  type Logo,
+  type Plan,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.marketingPricing.home.title}
+        text={ui.pages.marketingPricing.home.text}
+        cta={ui.pages.marketingPricing.home.cta}
+        href="#/plans"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <PricingTiers
+        id="home-pricing"
+        title={ui.site.pricing.tiersTitle}
+        plans={tiers}
+        labels={ui.pricing}
+        billingLabels={ui.vibe.billing}
+        layout="grid"
+        cols="1-3"
+        emphasis="auto"
+        billing="monthly"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))}
+      />
+      <LogoCloud
+        id="home-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="grid"
+        cols="3"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))}
+      />
+      <ComparisonTable
+        id="home-compare"
+        title={ui.vibe.compare.title}
+        rows={compare}
+        empty={ui.empty.rows}
+        labels={ui.vibe.compare.labels}
+        highlight="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))}
+      />
+      <FaqList
+        id="home-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="accordion"
+        cols="2"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))}
+      />
+      <CtaBand
+        id="home-cta"
+        title={ui.cases.saas.cta.title}
+        text={ui.cases.saas.cta.text}
+        actions={{
+          cta: ui.cases.saas.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.saas.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/PlansPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/PlansPage.tsx
new file mode 100644
index 0000000..b87cd2f
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/PlansPage.tsx
@@ -0,0 +1,112 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+// The plans page of ThemeMarketingPricingScreen.
+
+import {
+  ComparisonTable,
+  PageIntro,
+  PricingCard,
+  PricingTiers,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+  type Plan,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const DUO_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+
+export function PlansPage() {
+  return (
+    <>
+      <PageIntro
+        id="plans-pagehead"
+        title={ui.pages.marketingPricing.plans.title}
+        text={ui.pages.marketingPricing.plans.text}
+        cta={ui.pages.marketingPricing.plans.cta}
+        href="#/usage"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <PricingTiers
+        id="plans-pricing-1"
+        title={ui.site.pricing.tiersTitle}
+        plans={duo}
+        labels={ui.pricing}
+        billingLabels={ui.vibe.billing}
+        layout="grid"
+        cols="1-2"
+        emphasis="off"
+        billing="off"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))}
+      />
+      <PricingCard
+        plan={tiers.find((i) => i.id === "tier-team")!}
+        labels={ui.pricing}
+        emphasis="auto"
+        density="default"
+      />
+      <PricingTiers
+        id="plans-pricing-3"
+        title={ui.site.pricing.tiersTitle}
+        plans={tiers}
+        labels={ui.pricing}
+        billingLabels={ui.vibe.billing}
+        layout="stack"
+        cols="1-3"
+        emphasis="auto"
+        billing="off"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))}
+      />
+      <ComparisonTable
+        id="plans-compare"
+        title={ui.vibe.compare.title}
+        rows={compare}
+        empty={ui.empty.rows}
+        labels={ui.vibe.compare.labels}
+        highlight="middle"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/UsagePage.tsx b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/UsagePage.tsx
new file mode 100644
index 0000000..63e8345
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingPricingScreen/UsagePage.tsx
@@ -0,0 +1,134 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+// The usage page of ThemeMarketingPricingScreen.
+
+import {
+  CreditPacks,
+  CtaBand,
+  PageIntro,
+  PricingTiers,
+  UsageCalculator,
+  tpl,
+  uniqLabel,
+  type Pack,
+  type Plan,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const CREDITS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "credits": "metadata.credits.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "badge": "metadata.badge.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+
+export function UsagePage() {
+  return (
+    <>
+      <PageIntro
+        id="usage-pagehead"
+        title={ui.pages.marketingPricing.usage.title}
+        text={ui.pages.marketingPricing.usage.text}
+        cta={ui.pages.marketingPricing.usage.cta}
+        href="#/compare"
+        align="start"
+        tone="muted"
+        density="compact"
+      />
+      <UsageCalculator
+        id="usage-usage"
+        title={ui.vibe.usage.title}
+        text={ui.vibe.usage.text}
+        usage={5000}
+        slider={{ min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit }}
+        price={{ rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate }}
+        cta={ui.vibe.usage.cta}
+        href="#/"
+        layout="card"
+        ends="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))}
+      />
+      <CreditPacks
+        id="usage-credits-2"
+        title={ui.vibe.credits.title}
+        packs={credits}
+        empty={ui.empty.packs}
+        badges={ui.vibe.credits.badges}
+        buy={ui.vibe.credits.buy}
+        cols="4"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))}
+      />
+      <CreditPacks
+        id="usage-credits-3"
+        title={ui.vibe.credits.title}
+        packs={credits}
+        empty={ui.empty.packs}
+        badges={ui.vibe.credits.badges}
+        buy={ui.vibe.credits.buy}
+        cols="4"
+        item="row"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))}
+      />
+      <PricingTiers
+        id="usage-pricing"
+        title={ui.site.pricing.tiersTitle}
+        plans={tiers}
+        labels={ui.pricing}
+        billingLabels={ui.vibe.billing}
+        layout="grid"
+        cols="1-3"
+        emphasis="auto"
+        billing="annual"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))}
+      />
+      <CtaBand
+        id="usage-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="row"
+        tone="muted"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingProductScreen.tsx b/apps/host-react/xgen/screens/ThemeMarketingProductScreen.tsx
new file mode 100644
index 0000000..455fdf2
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingProductScreen.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+/**
+ * Product pages: features as grids, bento, tabs, an accordion and a sticky list, before and after pictures, and
+ * the navigation patterns.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemeMarketingProductScreen/HomePage";
+import { TourPage } from "./ThemeMarketingProductScreen/TourPage";
+import { CapabilitiesPage } from "./ThemeMarketingProductScreen/CapabilitiesPage";
+import { NavigationPage } from "./ThemeMarketingProductScreen/NavigationPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingProductScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"tour","area":"tour"},
+  {"path":"capabilities","area":"capabilities"},
+  {"path":"navigation","area":"navigation"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeMarketingProductScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "tour" ? (
+          <TourPage />
+        ) : route.area === "capabilities" ? (
+          <CapabilitiesPage />
+        ) : route.area === "navigation" ? (
+          <NavigationPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.tsx
new file mode 100644
index 0000000..ca6f5a0
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.tsx
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+// The capabilities page of ThemeMarketingProductScreen.
+
+import {
+  BeforeAfter,
+  CtaBand,
+  FeatureAccordion,
+  FeatureGrid,
+  FeatureSticky,
+  IconWall,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type Contrast,
+  type Feature,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+
+export function CapabilitiesPage() {
+  return (
+    <>
+      <PageIntro
+        id="capabilities-pagehead"
+        title={ui.pages.marketingProduct.capabilities.title}
+        text={ui.pages.marketingProduct.capabilities.text}
+        cta={ui.pages.marketingProduct.capabilities.cta}
+        href="#/navigation"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <FeatureGrid
+        id="capabilities-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="grid"
+        cols="1-2"
+        item="card"
+        mediaSide="end"
+        tone="default"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))}
+      />
+      <IconWall
+        id="capabilities-iconwall"
+        title={ui.vibe.wall.title}
+        features={features}
+        empty={ui.empty.features}
+        cols="6"
+        item="chip"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))}
+      />
+      <FeatureAccordion
+        id="capabilities-accordion"
+        title={ui.vibe.accordion.title}
+        features={features}
+        empty={ui.empty.features}
+        expand="first"
+        media="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))}
+      />
+      <BeforeAfter
+        id="capabilities-beforeafter"
+        title={ui.vibe.beforeafter.title}
+        points={beforeafter}
+        empty={ui.empty.points}
+        labels={ui.vibe.beforeafter.labels}
+        layout="rows"
+        icons="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))}
+      />
+      <FeatureSticky
+        id="capabilities-sticky"
+        title={ui.vibe.sticky.title}
+        features={features}
+        empty={ui.empty.features}
+        active="feature-clear"
+        mediaSide="end"
+        item="card"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))}
+      />
+      <CtaBand
+        id="capabilities-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="card"
+        tone="muted"
+        proof="none"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingProductScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemeMarketingProductScreen/HomePage.tsx
new file mode 100644
index 0000000..6aa5191
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingProductScreen/HomePage.tsx
@@ -0,0 +1,152 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+// The home page of ThemeMarketingProductScreen.
+
+import {
+  BentoGrid,
+  FeatureAccordion,
+  FeatureGrid,
+  FeatureShowcase,
+  FeatureSplit,
+  FeatureTabs,
+  HeroClassic,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+  type Stat,
+  type Tile,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <HeroClassic
+        id="home-hero"
+        title={ui.pages.marketingProduct.home.title}
+        text={ui.pages.marketingProduct.home.text}
+        actions={{
+          cta: ui.pages.marketingProduct.home.cta,
+          href: "#/tour",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "image",
+          side: "end",
+        }}
+        layout="split"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <FeatureGrid
+        id="home-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        item="card"
+        mediaSide="end"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))}
+      />
+      <FeatureSplit
+        id="home-featuresplit"
+        title={ui.marketing.featureSplit.title}
+        lead={ui.marketing.featureSplit.lead}
+        badge={ui.marketing.featureSplit.badge}
+        features={features}
+        stats={stats}
+        actions={{
+          mode: "two",
+          cta: ui.marketing.featureSplit.cta,
+          href: "#/start",
+          secondary: ui.marketing.featureSplit.secondary,
+          secondaryHref: "#/work",
+        }}
+        layout="metrics"
+        mediaSide="end"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))}
+      />
+      <FeatureShowcase
+        id="home-featureshowcase"
+        title={ui.marketing.featureShowcase.title}
+        lead={ui.marketing.featureShowcase.lead}
+        features={features}
+        empty={ui.empty.features}
+        more={ui.marketing.featureShowcase.more}
+        item="panel"
+        cols="4"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))}
+      />
+      <BentoGrid
+        id="home-bento"
+        title={ui.vibe.bento.title}
+        tiles={bento}
+        empty={ui.empty.tiles}
+        layout="bento"
+        media="image"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))}
+      />
+      <FeatureTabs
+        id="home-featuretabs"
+        title={ui.vibe.tabs.title}
+        features={features}
+        empty={ui.empty.features}
+        tabsLabel={ui.vibe.tabs.label}
+        active="feature-clear"
+        panel="split"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))}
+      />
+      <FeatureAccordion
+        id="home-accordion"
+        title={ui.vibe.accordion.title}
+        features={features}
+        empty={ui.empty.features}
+        expand="first"
+        media="image"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingProductScreen/NavigationPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingProductScreen/NavigationPage.tsx
new file mode 100644
index 0000000..c40de86
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingProductScreen/NavigationPage.tsx
@@ -0,0 +1,131 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+// The navigation page of ThemeMarketingProductScreen.
+
+import {
+  MegaMenu,
+  NavBar,
+  PageIntro,
+  SiteFooter,
+  SiteHeader,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+  type NavLink,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function NavigationPage() {
+  return (
+    <>
+      <PageIntro
+        id="navigation-pagehead"
+        title={ui.pages.marketingProduct.navigation.title}
+        text={ui.pages.marketingProduct.navigation.text}
+        cta={ui.pages.marketingProduct.navigation.cta}
+        href="#/"
+        align="start"
+        tone="muted"
+        density="compact"
+      />
+      <SiteHeader
+        labels={ui.site.header}
+        current="home"
+        cta={ui.site.header.cta}
+        layout="stacked"
+        position="static"
+        actions="none"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={navlinks}
+        current="link-product"
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="split"
+        over="none"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={navlinks}
+        current="link-product"
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="search"
+        over="none"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={navlinks}
+        current="link-product"
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="media"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <MegaMenu
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        trigger={ui.vibe.mega.trigger}
+        links={navlinks}
+        groups={megagroups}
+        promoTitle={ui.vibe.mega.promoTitle}
+        promoText={ui.vibe.mega.promoText}
+        panel="open"
+        cols="2"
+        promo="none"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))}
+      />
+      <SiteFooter
+        labels={ui.site.footer}
+        layout="centered"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeMarketingProductScreen/TourPage.tsx b/apps/host-react/xgen/screens/ThemeMarketingProductScreen/TourPage.tsx
new file mode 100644
index 0000000..7f5e6c7
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeMarketingProductScreen/TourPage.tsx
@@ -0,0 +1,132 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+// The tour page of ThemeMarketingProductScreen.
+
+import {
+  BeforeAfter,
+  FeatureSticky,
+  MegaMenu,
+  PageIntro,
+  StepsList,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type Contrast,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Quote,
+  type Step,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+
+export function TourPage() {
+  return (
+    <>
+      <PageIntro
+        id="tour-pagehead"
+        title={ui.pages.marketingProduct.tour.title}
+        text={ui.pages.marketingProduct.tour.text}
+        cta={ui.pages.marketingProduct.tour.cta}
+        href="#/capabilities"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <FeatureSticky
+        id="tour-sticky"
+        title={ui.vibe.sticky.title}
+        features={features}
+        empty={ui.empty.features}
+        active="feature-clear"
+        mediaSide="end"
+        item="plain"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))}
+      />
+      <BeforeAfter
+        id="tour-beforeafter"
+        title={ui.vibe.beforeafter.title}
+        points={beforeafter}
+        empty={ui.empty.points}
+        labels={ui.vibe.beforeafter.labels}
+        layout="cards"
+        icons="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))}
+      />
+      <StepsList
+        id="tour-steps"
+        title={ui.marketing.steps.title}
+        steps={steps}
+        empty={ui.empty.steps}
+        layout="column"
+        marker="number"
+        align="start"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))}
+      />
+      <VideoGrid
+        id="tour-videos"
+        title={ui.vibe.videos.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        playLabel={ui.vibe.videos.play}
+        byLine={ui.testimonials.byLine}
+        cols="1-3"
+        caption="below"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))}
+      />
+      <MegaMenu
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        trigger={ui.vibe.mega.trigger}
+        links={navlinks}
+        groups={megagroups}
+        promoTitle={ui.vibe.mega.promoTitle}
+        promoText={ui.vibe.mega.promoText}
+        panel="open"
+        cols="3"
+        promo="none"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen.tsx b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen.tsx
new file mode 100644
index 0000000..b610a10
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen.tsx
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+/**
+ * Onboarding: steps, a checklist that expands, a product tour with callouts, a welcome video and the first empty
+ * screen.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemeOnboardingFlowScreen/HomePage";
+import { WelcomePage } from "./ThemeOnboardingFlowScreen/WelcomePage";
+import { SetupPage } from "./ThemeOnboardingFlowScreen/SetupPage";
+import { TourPage } from "./ThemeOnboardingFlowScreen/TourPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeOnboardingFlowScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [{"path":"","area":"home"},{"path":"welcome","area":"welcome"},{"path":"setup","area":"setup"},{"path":"tour","area":"tour"}] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeOnboardingFlowScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "welcome" ? (
+          <WelcomePage />
+        ) : route.area === "setup" ? (
+          <SetupPage />
+        ) : route.area === "tour" ? (
+          <TourPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="row"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/HomePage.tsx
new file mode 100644
index 0000000..fb33e0f
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/HomePage.tsx
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+// The home page of ThemeOnboardingFlowScreen.
+
+import {
+  Checklist,
+  PageIntro,
+  Stepper,
+  TourCallout,
+  tpl,
+  uniqLabel,
+  type Step,
+  type Task,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.onboardingFlow.home.title}
+        text={ui.pages.onboardingFlow.home.text}
+        cta={ui.pages.onboardingFlow.home.cta}
+        href="#/welcome"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <Stepper
+        id="home-stepper"
+        title={ui.onboarding.stepper.title}
+        steps={steps}
+        current={2}
+        stepLabel={ui.onboarding.stepper.stepLabel}
+        back={ui.onboarding.stepper.back}
+        next={ui.onboarding.stepper.next}
+        layout="horizontal"
+        marker="number"
+        summary="show"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+      />
+      <Checklist
+        id="home-checklist"
+        title={ui.onboarding.checklist.title}
+        tasks={checklist}
+        empty={ui.empty.tasks}
+        progressLabel={ui.onboarding.checklist.progress}
+        layout="card"
+        progress="bar"
+        marker="check"
+        detail="expand"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))}
+      />
+      <TourCallout
+        id="home-tour"
+        title={ui.vibe.tour.title}
+        text={ui.vibe.tour.text}
+        target={ui.vibe.tour.target}
+        position={ui.vibe.tour.position}
+        skip={ui.vibe.tour.skip}
+        next={ui.vibe.tour.next}
+        placement="below"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.tsx b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.tsx
new file mode 100644
index 0000000..4477ae0
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.tsx
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+// The setup page of ThemeOnboardingFlowScreen.
+
+import {
+  Checklist,
+  EmptyPanel,
+  PageIntro,
+  Stepper,
+  tpl,
+  uniqLabel,
+  type Step,
+  type Task,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+
+export function SetupPage() {
+  return (
+    <>
+      <PageIntro
+        id="setup-pagehead"
+        title={ui.pages.onboardingFlow.setup.title}
+        text={ui.pages.onboardingFlow.setup.text}
+        cta={ui.pages.onboardingFlow.setup.cta}
+        href="#/tour"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <Stepper
+        id="setup-stepper"
+        title={ui.onboarding.stepper.title}
+        steps={steps}
+        current={2}
+        stepLabel={ui.onboarding.stepper.stepLabel}
+        back={ui.onboarding.stepper.back}
+        next={ui.onboarding.stepper.next}
+        layout="vertical"
+        marker="number"
+        summary="show"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))}
+      />
+      <Checklist
+        id="setup-checklist"
+        title={ui.onboarding.checklist.title}
+        tasks={checklist}
+        empty={ui.empty.tasks}
+        progressLabel={ui.onboarding.checklist.progress}
+        layout="card"
+        progress="bar"
+        marker="check"
+        detail="always"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))}
+      />
+      <EmptyPanel
+        id="setup-empty"
+        title={ui.dashboard.empty.inbox.title}
+        text={ui.dashboard.empty.inbox.text}
+        cta={ui.dashboard.empty.inbox.cta}
+        ctaHref="#/"
+        layout="card"
+        actions="button"
+        visual="icon"
+        size="compact"
+        icon="inbox"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/TourPage.tsx b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/TourPage.tsx
new file mode 100644
index 0000000..0bfed19
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/TourPage.tsx
@@ -0,0 +1,94 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+// The tour page of ThemeOnboardingFlowScreen.
+
+import {
+  Checklist,
+  PageIntro,
+  TourCallout,
+  VideoModal,
+  tpl,
+  uniqLabel,
+  type Chapter,
+  type Task,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+
+export function TourPage() {
+  return (
+    <>
+      <PageIntro
+        id="tour-pagehead"
+        title={ui.pages.onboardingFlow.tour.title}
+        text={ui.pages.onboardingFlow.tour.text}
+        cta={ui.pages.onboardingFlow.tour.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <TourCallout
+        id="tour-tour-1"
+        title={ui.vibe.tour.title}
+        text={ui.vibe.tour.text}
+        target={ui.vibe.tour.target}
+        position={ui.vibe.tour.position}
+        skip={ui.vibe.tour.skip}
+        next={ui.vibe.tour.next}
+        placement="above"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))}
+      />
+      <TourCallout
+        id="tour-tour-2"
+        title={ui.vibe.tour.title}
+        text={ui.vibe.tour.text}
+        target={ui.vibe.tour.target}
+        position={ui.vibe.tour.position}
+        skip={ui.vibe.tour.skip}
+        next={ui.vibe.tour.next}
+        placement="end"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))}
+      />
+      <Checklist
+        id="tour-checklist"
+        title={ui.onboarding.checklist.title}
+        tasks={checklist}
+        empty={ui.empty.tasks}
+        progressLabel={ui.onboarding.checklist.progress}
+        layout="card"
+        progress="text"
+        marker="check"
+        detail="always"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))}
+      />
+      <VideoModal
+        id="tour-videomodal"
+        title={ui.vibe.modal.title}
+        text={ui.vibe.modal.text}
+        close={ui.vibe.modal.close}
+        play={ui.vibe.modal.play}
+        chaptersTitle={ui.vibe.modal.chapters}
+        chapters={chapters}
+        size="default"
+        outline="chapters"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.tsx b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.tsx
new file mode 100644
index 0000000..39128d8
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+// The welcome page of ThemeOnboardingFlowScreen.
+
+import { Checklist, PageIntro, VideoModal, tpl, uniqLabel, type Chapter, type Task } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+
+export function WelcomePage() {
+  return (
+    <>
+      <PageIntro
+        id="welcome-pagehead"
+        title={ui.pages.onboardingFlow.welcome.title}
+        text={ui.pages.onboardingFlow.welcome.text}
+        cta={ui.pages.onboardingFlow.welcome.cta}
+        href="#/setup"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <VideoModal
+        id="welcome-videomodal"
+        title={ui.vibe.modal.title}
+        text={ui.vibe.modal.text}
+        close={ui.vibe.modal.close}
+        play={ui.vibe.modal.play}
+        chaptersTitle={ui.vibe.modal.chapters}
+        chapters={chapters}
+        size="default"
+        outline="none"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))}
+      />
+      <Checklist
+        id="welcome-checklist"
+        title={ui.onboarding.checklist.title}
+        tasks={checklist}
+        empty={ui.empty.tasks}
+        progressLabel={ui.onboarding.checklist.progress}
+        layout="card"
+        progress="bar"
+        marker="number"
+        detail="always"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemePromoCampaignScreen.tsx b/apps/host-react/xgen/screens/ThemePromoCampaignScreen.tsx
new file mode 100644
index 0000000..3bb33fc
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemePromoCampaignScreen.tsx
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+/**
+ * Campaign pages: announcement bars in every position and tone, sign-up forms, calls to action with a pattern,
+ * and the cookie notice.
+ */
+
+import { Block, FooterSplit, NavBar, type Feature, type MegaGroup, type Stat } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemePromoCampaignScreen/HomePage";
+import { LaunchPage } from "./ThemePromoCampaignScreen/LaunchPage";
+import { OfferPage } from "./ThemePromoCampaignScreen/OfferPage";
+import { NoticesPage } from "./ThemePromoCampaignScreen/NoticesPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemePromoCampaignScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"launch","area":"launch"},
+  {"path":"offer","area":"offer"},
+  {"path":"notices","area":"notices"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemePromoCampaignScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "launch" ? (
+          <LaunchPage />
+        ) : route.area === "offer" ? (
+          <OfferPage />
+        ) : route.area === "notices" ? (
+          <NoticesPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <FooterSplit
+        id="after-footersplit"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.marketing.footerSplit.tagline}
+        copyright={ui.marketing.footerSplit.copyright}
+        groups={sitemap}
+        extras={{ stats, points: features, contacts, channels: community }}
+        labels={ui.marketing.footerSplit.labels}
+        layout="newsletter"
+        mediaSide="start"
+        tone="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemePromoCampaignScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemePromoCampaignScreen/HomePage.tsx
new file mode 100644
index 0000000..8f0b9c4
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemePromoCampaignScreen/HomePage.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+// The home page of ThemePromoCampaignScreen.
+
+import {
+  AnnouncementBar,
+  CookieBanner,
+  CtaBand,
+  HeroClassic,
+  NewsletterForm,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <HeroClassic
+        id="home-hero"
+        title={ui.pages.promoCampaign.home.title}
+        text={ui.pages.promoCampaign.home.text}
+        actions={{
+          cta: ui.pages.promoCampaign.home.cta,
+          href: "#/launch",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "cluster",
+          side: "end",
+        }}
+        layout="split"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="muted"
+        layout="center"
+        dismiss="hide"
+        badge="show"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+      />
+      <NewsletterForm
+        id="home-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="split"
+        terms="hide"
+        tone="default"
+        align="start"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))}
+      />
+      <CtaBand
+        id="home-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "form",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+      />
+      <CookieBanner
+        id="home-cookie"
+        title={ui.promo.cookie.title}
+        text={ui.promo.cookie.text}
+        accept={ui.promo.cookie.accept}
+        decline={ui.promo.cookie.decline}
+        settings={ui.promo.cookie.settings}
+        layout="card"
+        actions="two"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemePromoCampaignScreen/LaunchPage.tsx b/apps/host-react/xgen/screens/ThemePromoCampaignScreen/LaunchPage.tsx
new file mode 100644
index 0000000..4e34a1d
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemePromoCampaignScreen/LaunchPage.tsx
@@ -0,0 +1,115 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+// The launch page of ThemePromoCampaignScreen.
+
+import {
+  AnnouncementBar,
+  CtaBand,
+  HeroClassic,
+  LogoCloud,
+  NewsletterForm,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Logo,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+export function LaunchPage() {
+  return (
+    <>
+      <HeroClassic
+        id="launch-hero"
+        title={ui.pages.promoCampaign.launch.title}
+        text={ui.pages.promoCampaign.launch.text}
+        actions={{
+          cta: ui.pages.promoCampaign.launch.cta,
+          href: "#/offer",
+          secondary: ui.cases.saas.hero.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "image",
+          side: "end",
+        }}
+        layout="split"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="default"
+        layout="center"
+        dismiss="hide"
+        badge="none"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))}
+      />
+      <NewsletterForm
+        id="launch-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="inline"
+        terms="hide"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+      />
+      <LogoCloud
+        id="launch-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="grid"
+        cols="4"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))}
+      />
+      <CtaBand
+        id="launch-cta"
+        title={ui.cases.saas.cta.title}
+        text={ui.cases.saas.cta.text}
+        actions={{
+          cta: ui.cases.saas.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.saas.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemePromoCampaignScreen/NoticesPage.tsx b/apps/host-react/xgen/screens/ThemePromoCampaignScreen/NoticesPage.tsx
new file mode 100644
index 0000000..49a6b3c
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemePromoCampaignScreen/NoticesPage.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+// The notices page of ThemePromoCampaignScreen.
+
+import { AnnouncementBar, CookieBanner, NewsletterForm, PageIntro, tpl, uniqLabel } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NoticesPage() {
+  return (
+    <>
+      <PageIntro
+        id="notices-pagehead"
+        title={ui.pages.promoCampaign.notices.title}
+        text={ui.pages.promoCampaign.notices.text}
+        cta={ui.pages.promoCampaign.notices.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="default"
+        layout="center"
+        dismiss="show"
+        badge="none"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))}
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="default"
+        layout="split"
+        dismiss="show"
+        badge="none"
+        position="bottom"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))}
+      />
+      <CookieBanner
+        id="notices-cookie-3"
+        title={ui.promo.cookie.title}
+        text={ui.promo.cookie.text}
+        accept={ui.promo.cookie.accept}
+        decline={ui.promo.cookie.decline}
+        settings={ui.promo.cookie.settings}
+        layout="bar"
+        actions="three"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))}
+      />
+      <CookieBanner
+        id="notices-cookie-4"
+        title={ui.promo.cookie.title}
+        text={ui.promo.cookie.text}
+        accept={ui.promo.cookie.accept}
+        decline={ui.promo.cookie.decline}
+        settings={ui.promo.cookie.settings}
+        layout="bar"
+        actions="two"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))}
+      />
+      <NewsletterForm
+        id="notices-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="inline"
+        terms="show"
+        tone="muted"
+        align="start"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemePromoCampaignScreen/OfferPage.tsx b/apps/host-react/xgen/screens/ThemePromoCampaignScreen/OfferPage.tsx
new file mode 100644
index 0000000..fb340c7
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemePromoCampaignScreen/OfferPage.tsx
@@ -0,0 +1,97 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+// The offer page of ThemePromoCampaignScreen.
+
+import { AnnouncementBar, CtaBand, NewsletterForm, PageIntro, tpl, uniqLabel } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function OfferPage() {
+  return (
+    <>
+      <PageIntro
+        id="offer-pagehead"
+        title={ui.pages.promoCampaign.offer.title}
+        text={ui.pages.promoCampaign.offer.text}
+        cta={ui.pages.promoCampaign.offer.cta}
+        href="#/notices"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="muted"
+        layout="center"
+        dismiss="hide"
+        badge="show"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="muted"
+        layout="split"
+        dismiss="hide"
+        badge="none"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))}
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.cases.shop.announcement.text}
+        cta={ui.cases.shop.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="muted"
+        layout="center"
+        dismiss="show"
+        badge="none"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))}
+      />
+      <CtaBand
+        id="offer-cta"
+        title={ui.cases.shop.cta.title}
+        text={ui.cases.shop.cta.text}
+        actions={{
+          cta: ui.cases.shop.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.shop.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="split"
+        tone="default"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+      />
+      <NewsletterForm
+        id="offer-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="inline"
+        terms="show"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeSupportCenterScreen.tsx b/apps/host-react/xgen/screens/ThemeSupportCenterScreen.tsx
new file mode 100644
index 0000000..e9c5ed5
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeSupportCenterScreen.tsx
@@ -0,0 +1,92 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+/**
+ * A help center: channels, FAQ as tabs, chat and search, contact forms, and the pages for a missing or moved
+ * address.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/react-ui";
+import { HomePage } from "./ThemeSupportCenterScreen/HomePage";
+import { FaqPage } from "./ThemeSupportCenterScreen/FaqPage";
+import { ContactPage } from "./ThemeSupportCenterScreen/ContactPage";
+import { MissingPage } from "./ThemeSupportCenterScreen/MissingPage";
+import { MovedPage } from "./ThemeSupportCenterScreen/MovedPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeSupportCenterScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"faq","area":"faq"},
+  {"path":"contact","area":"contact"},
+  {"path":"missing","area":"missing"},
+  {"path":"moved","area":"moved"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeSupportCenterScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabIndex={-1} data-testid="main">
+        {route.area === "faq" ? (
+          <FaqPage />
+        ) : route.area === "contact" ? (
+          <ContactPage />
+        ) : route.area === "missing" ? (
+          <MissingPage />
+        ) : route.area === "moved" ? (
+          <MovedPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "show" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeSupportCenterScreen/ContactPage.tsx b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/ContactPage.tsx
new file mode 100644
index 0000000..493e153
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/ContactPage.tsx
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The contact page of ThemeSupportCenterScreen.
+
+import { ContactForm, PageIntro, SupportChannels, tpl, uniqLabel, type Feature } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function ContactPage() {
+  return (
+    <>
+      <PageIntro
+        id="contact-pagehead"
+        title={ui.pages.supportCenter.contact.title}
+        text={ui.pages.supportCenter.contact.text}
+        cta={ui.pages.supportCenter.contact.cta}
+        href="#/missing"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <ContactForm
+        id="contact-contact-1"
+        title={ui.support.contact.title}
+        text={ui.support.contact.text}
+        labels={ui.support.contact.labels}
+        details={channels}
+        layout="single"
+        fields="full"
+        terms="hide"
+        page="section"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))}
+      />
+      <SupportChannels
+        id="contact-channels"
+        title={ui.support.channels.title}
+        channels={channels}
+        empty={ui.empty.channels}
+        open={ui.support.channels.open}
+        layout="list"
+        cols="1-3"
+        action="link"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))}
+      />
+      <ContactForm
+        id="contact-contact-3"
+        title={ui.support.contact.title}
+        text={ui.support.contact.text}
+        labels={ui.support.contact.labels}
+        details={channels}
+        layout="single"
+        fields="full"
+        terms="show"
+        page="section"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeSupportCenterScreen/FaqPage.tsx b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/FaqPage.tsx
new file mode 100644
index 0000000..50ca7a2
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/FaqPage.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The faq page of ThemeSupportCenterScreen.
+
+import { FaqList, PageIntro, tpl, uniqLabel, type Faq, type FaqTab } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+export function FaqPage() {
+  return (
+    <>
+      <PageIntro
+        id="faq-pagehead"
+        title={ui.pages.supportCenter.faq.title}
+        text={ui.pages.supportCenter.faq.text}
+        cta={ui.pages.supportCenter.faq.cta}
+        href="#/contact"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <FaqList
+        id="faq-faq-1"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="chat"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))}
+      />
+      <FaqList
+        id="faq-faq-2"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeSupportCenterScreen/HomePage.tsx b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/HomePage.tsx
new file mode 100644
index 0000000..874a02f
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/HomePage.tsx
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The home page of ThemeSupportCenterScreen.
+
+import {
+  ContactForm,
+  FaqList,
+  MediaList,
+  PageIntro,
+  SupportChannels,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Post,
+  type Review,
+  type Stat,
+  type Step,
+} from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.supportCenter.home.title}
+        text={ui.pages.supportCenter.home.text}
+        cta={ui.pages.supportCenter.home.cta}
+        href="#/faq"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <SupportChannels
+        id="home-channels"
+        title={ui.support.channels.title}
+        channels={channels}
+        empty={ui.empty.channels}
+        open={ui.support.channels.open}
+        layout="grid"
+        cols="1-3"
+        action="link"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))}
+      />
+      <MediaList
+        id="home-medialist"
+        title={ui.marketing.mediaList.topics.title}
+        lead={ui.marketing.mediaList.topics.lead}
+        badge={ui.marketing.mediaList.topics.badge}
+        labels={{
+          list: ui.marketing.mediaList.topics.list,
+          count: ui.marketing.mediaList.count,
+          minutes: ui.content.labels.minutes,
+          featured: ui.marketing.mediaList.featured,
+          rating: ui.testimonials.rating,
+          figures: ui.marketing.mediaList.supportFigures,
+        }}
+        actions={{ mode: "one", cta: ui.marketing.mediaList.topics.cta, href: "#/start" }}
+        extras={{ stats, steps, posts, topics: categories, channels, reviews }}
+        layout="topics"
+        mediaSide="end"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))}
+      />
+      <FaqList
+        id="home-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "billing", mode: "categories" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+      />
+      <ContactForm
+        id="home-contact"
+        title={ui.support.contact.title}
+        text={ui.support.contact.text}
+        labels={ui.support.contact.labels}
+        details={channels}
+        layout="split"
+        fields="full"
+        terms="hide"
+        page="section"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeSupportCenterScreen/MissingPage.tsx b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/MissingPage.tsx
new file mode 100644
index 0000000..b977c43
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/MissingPage.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The missing page of ThemeSupportCenterScreen.
+
+import { ErrorPage } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function MissingPage() {
+  return (
+    <ErrorPage
+      id="missing-errorpage"
+      title={ui.pages.supportCenter.missing.title}
+      text={ui.pages.supportCenter.missing.text}
+      status={ui.vibe.error.status}
+      actions={{
+        cta: ui.pages.supportCenter.missing.cta,
+        href: "#/moved",
+        secondary: ui.vibe.error.secondary,
+        secondaryHref: "#/",
+        mode: "one",
+      }}
+      layout="centered"
+      code="show"
+      tone="default"
+    />
+  );
+}
diff --git a/apps/host-react/xgen/screens/ThemeSupportCenterScreen/MovedPage.tsx b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/MovedPage.tsx
new file mode 100644
index 0000000..a5d5c20
--- /dev/null
+++ b/apps/host-react/xgen/screens/ThemeSupportCenterScreen/MovedPage.tsx
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The moved page of ThemeSupportCenterScreen.
+
+import { ErrorPage, SupportChannels, tpl, uniqLabel, type Feature } from "@ui8kit/react-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function MovedPage() {
+  return (
+    <>
+      <ErrorPage
+        id="moved-errorpage"
+        title={ui.pages.supportCenter.moved.title}
+        text={ui.pages.supportCenter.moved.text}
+        status={ui.vibe.error.status}
+        actions={{
+          cta: ui.pages.supportCenter.moved.cta,
+          href: "#/",
+          secondary: ui.vibe.error.secondary,
+          secondaryHref: "#/",
+          mode: "one",
+        }}
+        layout="split"
+        code="show"
+        tone="default"
+      />
+      <SupportChannels
+        id="moved-channels"
+        title={ui.support.channels.title}
+        channels={channels}
+        empty={ui.empty.channels}
+        open={ui.support.channels.open}
+        layout="grid"
+        cols="1-2"
+        action="link"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/index.html b/apps/host-solid/index.html
new file mode 100644
index 0000000..7299f29
--- /dev/null
+++ b/apps/host-solid/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>xgen screens (Solid)</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/host-solid/package.json b/apps/host-solid/package.json
new file mode 100644
index 0000000..11a360f
--- /dev/null
+++ b/apps/host-solid/package.json
@@ -0,0 +1,41 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "host-solid",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Generated by xgen from xgen.app.json: the SolidJS 1.9 host of 15 screens (/<screen>/#/<route>). Generated under xgen/; src/ is the front controller.",
+  "ui8kit": {
+    "runtime": "solid",
+    "generated": true,
+    "kit": [
+      "xgen/runtime"
+    ],
+    "composition": [
+      "xgen/App.tsx",
+      "xgen/screens"
+    ],
+    "blockRoot": [
+      "xgen/App.tsx",
+      "xgen/screens"
+    ]
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@ui8kit/app-shared": "workspace:*",
+    "@ui8kit/solid-ui": "workspace:*",
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0",
+    "vite-plugin-solid": "^2.11.0"
+  }
+}
diff --git a/apps/host-solid/src/app.css b/apps/host-solid/src/app.css
new file mode 100644
index 0000000..a6200fe
--- /dev/null
+++ b/apps/host-solid/src/app.css
@@ -0,0 +1,4 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/solid/src/app.ts (settings: apps/host-solid/xgen.app.json) */
+@import "@ui8kit/solid-ui/styles/index.css";
+@import "@ui8kit/app-shared/styles/skins.css";
diff --git a/apps/host-solid/src/main.tsx b/apps/host-solid/src/main.tsx
new file mode 100644
index 0000000..df20507
--- /dev/null
+++ b/apps/host-solid/src/main.tsx
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/solid/src/app.ts (settings: apps/host-solid/xgen.app.json)
+import { render } from "solid-js/web";
+import "./app.css";
+import { bootScreen, screenKeyOf } from "@ui8kit/app-shared/screens";
+import { App } from "../xgen/App";
+
+const screen = screenKeyOf(location);
+const title = "xgen screens (Solid)";
+bootScreen(screen, "light", title);
+render(() => <App screen={screen} title={title} />, document.getElementById("app")!);
diff --git a/apps/host-solid/tsconfig.json b/apps/host-solid/tsconfig.json
new file mode 100644
index 0000000..bbf9ae9
--- /dev/null
+++ b/apps/host-solid/tsconfig.json
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/solid/src/app.ts (settings: apps/host-solid/xgen.app.json)
+{
+  "compilerOptions": {
+    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "preserve", "jsxImportSource": "solid-js",
+    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true, "types": ["vite/client"]
+  },
+  "include": ["src", "xgen"]
+}
diff --git a/apps/host-solid/vite.config.ts b/apps/host-solid/vite.config.ts
new file mode 100644
index 0000000..ad8a780
--- /dev/null
+++ b/apps/host-solid/vite.config.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/solid/src/app.ts (settings: apps/host-solid/xgen.app.json)
+import tailwindcss from "@tailwindcss/vite";
+import solid from "vite-plugin-solid";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), solid()],
+  server: { host: "127.0.0.1", port: 5183, strictPort: true, proxy: { "/__inspect": "http://127.0.0.1:5190" } },
+  preview: { host: "127.0.0.1", port: 5183, strictPort: true },
+});
diff --git a/apps/host-solid/xgen.app.json b/apps/host-solid/xgen.app.json
new file mode 100644
index 0000000..63bb9f4
--- /dev/null
+++ b/apps/host-solid/xgen.app.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "../../xgen/schema/schemas/app.schema.json",
+  "specVersion": 1,
+  "name": "host-solid",
+  "runtime": "solid",
+  "screens": ["*"],
+  "title": "xgen screens (Solid)",
+  "port": 5183,
+  "locale": "en",
+  "theme": "light"
+}
diff --git a/apps/host-solid/xgen/.xgen-manifest.json b/apps/host-solid/xgen/.xgen-manifest.json
new file mode 100644
index 0000000..d287654
--- /dev/null
+++ b/apps/host-solid/xgen/.xgen-manifest.json
@@ -0,0 +1,271 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "apps/host-solid",
+  "files": {
+    "index.html": "b1c2025b272e1962b6be2307b7bbf0ed704c75e1f61908a3d66ada19229c8751",
+    "package.json": "760574093fec66414d8bb8afc5fc1cd51875b175a4c3f12275dc3d6c9198b945",
+    "src/app.css": "9afb61ebb7d6523089f601cd7ef9ef605454956b27c4c185e420b7bc8cbb71f0",
+    "src/main.tsx": "2d90191c2fdd59f051c2ce1524203784ea89f2a716afd696d347e41d0eefe77a",
+    "tsconfig.json": "e835f29a41c52023ad456387a756fa8275f269e14ffa8fbd8df9998d361e69ca",
+    "vite.config.ts": "8e4859a02324e722300c6d7f16829ed410dc0876ea0bfdcf5ed50b223fc40c1e",
+    "xgen/App.tsx": "e433bd8bdf7b7cdf68ac027b27804daaf81e2432655966460e4e033ec568eb1c",
+    "xgen/runtime/ScreenOutlet.tsx": "645a2a90ea04a9091ac77e04554c3a2b2975e6ba61c82d9763d8827dae083379",
+    "xgen/runtime/url.ts": "3ae2853937a56d353c186857c26cad69ec390b69e95709799f562b3b765035c0",
+    "xgen/screens/BlocksScreen.tsx": "a37222a926514398c1e29e54564029aa853a15564c6302937fd38eff9e41513d",
+    "xgen/screens/BlocksScreen/AboutmePage.tsx": "41ebf580b3cd41151dab10f8306985a057f75fc1b3f71c0cd216bf400b0fb527",
+    "xgen/screens/BlocksScreen/AboutPage.tsx": "d9220e77939d4e9ae1dde35ebb759036621771d89c138a07e180cad709b372ce",
+    "xgen/screens/BlocksScreen/AccordionPage.tsx": "77ad59bf32f79c79f01e349ab66c346b103d39a077bb889cd8b79a77e112b5a2",
+    "xgen/screens/BlocksScreen/ActivityPage.tsx": "cb6940616dbb8a497779857fde9ca40a8fa38a72abd6aca26fee6ea00804bd95",
+    "xgen/screens/BlocksScreen/AnnouncementPage.tsx": "3b19bd11c00a90330fc64bebda84c8539fbd21d78a3e9b770d282044ad3f59aa",
+    "xgen/screens/BlocksScreen/ArticlePage.tsx": "c83fa1978d2e47cae731cde29636d1418db75ad3d334998838451a86b9a6d9f7",
+    "xgen/screens/BlocksScreen/AuthPage.tsx": "ae61ef6fc68067f60144c36167554aa4f1d34484cb09163f986e4b551bd8e37c",
+    "xgen/screens/BlocksScreen/AuthpagePage.tsx": "47a121fbc31f036d6d2ce974e549180353c4ec8af5365c5de6bc76f463a533a5",
+    "xgen/screens/BlocksScreen/BeforeafterPage.tsx": "3cf71382b7e8062fd7cb76c50b37ed74396f9d15a2b9d3c2a0927da49b99b4e9",
+    "xgen/screens/BlocksScreen/BentoPage.tsx": "4ed28a39929c84306d614540ab383c06718497933926aafc4bd77aba509d4d7e",
+    "xgen/screens/BlocksScreen/BottomnavPage.tsx": "bb7b7e7da4baab4c7ece123c38b831f5560839a274f2188cd1d2cd53cf066169",
+    "xgen/screens/BlocksScreen/CartdrawerPage.tsx": "e0fe507bff61220de8174e2c869306b0a38ee34854d18d4444a357db9af09aa6",
+    "xgen/screens/BlocksScreen/CartPage.tsx": "f6b15146be395b4e7ed831b8b8feeb5058a7b81edb1949ff74811d7fada3e955",
+    "xgen/screens/BlocksScreen/CartpagePage.tsx": "c13bd08c8825c3c56968b54074ecfb8d4130932c5f00c50ed293191853393c14",
+    "xgen/screens/BlocksScreen/CategoriesPage.tsx": "2d8e8a1ee8ba524239acfc11184e9d08d32e2328d1d2be0c9b94bd275b635d38",
+    "xgen/screens/BlocksScreen/ChannelsPage.tsx": "fea6b395e102255ee98af90d14c36dbff11177adaf2e7819db86551ec5e7e32a",
+    "xgen/screens/BlocksScreen/ChartPage.tsx": "80044e3ee83b9a04a87955f63ea706adb45c4309f36b83f1ca6e44014ae92b22",
+    "xgen/screens/BlocksScreen/ChecklistPage.tsx": "fd65ea54bdaf6dda22f96c7e3245264f4edcbd2bfe0063ac01e6f0039bdf303c",
+    "xgen/screens/BlocksScreen/CheckoutPage.tsx": "8a027ee1adec08c3ed11129b12bd2704fd39a293b182055a47eb80bc251a4ec4",
+    "xgen/screens/BlocksScreen/ComparePage.tsx": "2d7e7b2abeaef78c96f613e6cfafba52065ae3bdaa64ef37218da22ce61678e9",
+    "xgen/screens/BlocksScreen/ContactPage.tsx": "4ded337faa5dc91bcef1cc03373bf3c545acbfc75ce3702d4e40c976884e0fad",
+    "xgen/screens/BlocksScreen/CookiePage.tsx": "44f1470336239f333a160846189d9eff294844eb35d32972220994ac425f74df",
+    "xgen/screens/BlocksScreen/CreditsPage.tsx": "01fce651ae0580521a26957eb2621c0e7d12c55dff48ab13f51cec2a878ad73d",
+    "xgen/screens/BlocksScreen/CtaPage.tsx": "9e694486524f2120f55e181744e78a76b67a94ec59b513bbb021408fe1fcd249",
+    "xgen/screens/BlocksScreen/CtaproofPage.tsx": "cb4ca905fd09a8452be6cb9aa46ed791e2b151005cffe9984ccca19a245c3d95",
+    "xgen/screens/BlocksScreen/DashshellPage.tsx": "81dfa0dda43a0b057f88d1be6527048284eda7d65ce681fbd82fbc01e8fe9561",
+    "xgen/screens/BlocksScreen/DeliveryPage.tsx": "56665d980625838eb67b1dd0a12c14be49085ee31c0c96b2cb7f964af2be65bf",
+    "xgen/screens/BlocksScreen/EmptyPage.tsx": "341e366b0aa4da44e757774f90efd8cd2486bf9d814d1f69a04f7016877aa55d",
+    "xgen/screens/BlocksScreen/ErrorpagePage.tsx": "216898bbb3b46cd146af50d7bb9240984790d0ebc1a9d07c90b7a3c13e7449a2",
+    "xgen/screens/BlocksScreen/FaqPage.tsx": "0fcbe124f6a1d46218027d831dab53499af35fd039dcb32d9778852db7186b93",
+    "xgen/screens/BlocksScreen/FaqsplitPage.tsx": "f5da0fc7426d88c4ea32d9e33705f4c7b581a9209836701c0343ec50145d3a89",
+    "xgen/screens/BlocksScreen/FeatureshowcasePage.tsx": "01ee530a5c758bb8f43b354f92f461ae25be4439ff055370672fbff211671b58",
+    "xgen/screens/BlocksScreen/FeaturesPage.tsx": "e5e8cbf1fc81eb7f3855de177f83a9b2362733b78bcf2807a67e005a92b746de",
+    "xgen/screens/BlocksScreen/FeaturesplitPage.tsx": "60b5abb2bf8946544d00edbf9b5f93dcb786fb2f0d751e4b3af892ae54280fd9",
+    "xgen/screens/BlocksScreen/FeaturetabsPage.tsx": "205cb0ce9a413ddef8f20b696c74857f44209d18ccd8edd429798afb32a0a044",
+    "xgen/screens/BlocksScreen/FooterPage.tsx": "ea189700de7b1dfa81a3c8da0938e92a5f62dcb0ad5a46b7aadb84e6f72b1903",
+    "xgen/screens/BlocksScreen/FootersplitPage.tsx": "396581563a3c69fbd9db649e93e242dc77b2b3d2b9419de1794207654d6ac585",
+    "xgen/screens/BlocksScreen/HeaderPage.tsx": "467bf4fe3a22a99046648bec0fd028fd55d0469adae84a8dcb1473561b2ec2c8",
+    "xgen/screens/BlocksScreen/HeroPage.tsx": "ea7bf96ecfe3eb3ae54cb3ebfdb8979f51fe21dffac442f1bc3863a812c58aad",
+    "xgen/screens/BlocksScreen/HerosplitPage.tsx": "4d4e2ae9254557f58b23b5493f488c63091f73c31ba386c74ea43847f8364de5",
+    "xgen/screens/BlocksScreen/IconwallPage.tsx": "75cbb87ecf974105ac5d8b56536c6aa543b610290ad120bdb3cef513077ca922",
+    "xgen/screens/BlocksScreen/IndexPage.tsx": "1a2c3a69f1b47a3a3f6863a5753cb71e5c190a8733afb29c500a67c5597e4772",
+    "xgen/screens/BlocksScreen/JobsPage.tsx": "2efadb147917e428c3dbc59d8613283680098a77af14500b8aa87b607a23f150",
+    "xgen/screens/BlocksScreen/KanbanPage.tsx": "9806e89e37a8994e92f2d63addf7e70624261f10c0ac6c0ca5720e551d828fdf",
+    "xgen/screens/BlocksScreen/LocationsPage.tsx": "3c328ea52c147d93175616f0cbc87f94151e26f8d793717d3cc756e30964ef85",
+    "xgen/screens/BlocksScreen/LogosPage.tsx": "113e7dbea09b9c3b6bf3dd292722dc7c7afe740536b2144f2b5b2fe21948e8e7",
+    "xgen/screens/BlocksScreen/MedialistPage.tsx": "607115200d67b78c0bd9305a52454febbe3016208e92f2d2bc6511948e466455",
+    "xgen/screens/BlocksScreen/MegamenuPage.tsx": "2793904c20456ca206b4e5b68e915998784083a8c1d833c98fc445af5cedd14b",
+    "xgen/screens/BlocksScreen/MetricsPage.tsx": "b09534d8597400a4734ff64d0ce8e2e714753b028483157111184880c2c986ae",
+    "xgen/screens/BlocksScreen/NavbarPage.tsx": "e36f50e3b3b9664d6410e2a8ea8ac94864c7f69e2bba63980ad84fcf87ab6c2c",
+    "xgen/screens/BlocksScreen/NewsletterPage.tsx": "78de44a676d442675d4dc1e26d73e3ade99573ac05c469c95b54c1b765aad8bb",
+    "xgen/screens/BlocksScreen/NotfoundPage.tsx": "ca352fed6c56fb0c5ae7789128e56d58c0035bc48eb345f5e220ed0fb2ffaaf6",
+    "xgen/screens/BlocksScreen/OrdersPage.tsx": "7c0bcf355154a7492a2c7cb9e33c0492e4431a66a8cfb168d4ee07268450e294",
+    "xgen/screens/BlocksScreen/OverviewPage.tsx": "21571e2b1e711874a53acc6a542cd7e7207d0a2dff534cdc044376a8cabe690f",
+    "xgen/screens/BlocksScreen/PageheadPage.tsx": "3b24fbeec22a31bc9e45f54979a31cc730a424af2407e25c9240b80e79ed86cc",
+    "xgen/screens/BlocksScreen/PagetrailPage.tsx": "b17ea6929471a6a51066de6a4626d386ecf80632b4924e53e50df625f98cf6f4",
+    "xgen/screens/BlocksScreen/PhotosPage.tsx": "0ba8124a2230d85c23d9fae44df97e613ac5147be4d0ce894668cc52b0409959",
+    "xgen/screens/BlocksScreen/PlanPage.tsx": "a8a2a48b9f2dcab24e36b540499a5919a94dca07b12a065183a93a581ec4343c",
+    "xgen/screens/BlocksScreen/PostheaderPage.tsx": "a29d2222d4220186ffa6917bd13e3b4681c86f8c32db9ff162a4979ca2b99cc2",
+    "xgen/screens/BlocksScreen/PostshowcasePage.tsx": "e867e2fac5fb84f37c4b5a2c27df78e0f670cab1339204ae0013aaebfed476f7",
+    "xgen/screens/BlocksScreen/PostsPage.tsx": "736abc1bb548d937c07b8734154682cd7cd641952dee7d86c533f75055f568d8",
+    "xgen/screens/BlocksScreen/PostsplitPage.tsx": "36ba7f4712835247cbadaefe05bc0d88f8a55a833216c576b3e40926172194a2",
+    "xgen/screens/BlocksScreen/PricingPage.tsx": "a777ce2f01a4a15bf2280a391436443370652c6854c0a8e6ece7fa9e4d3ea973",
+    "xgen/screens/BlocksScreen/ProductinfoPage.tsx": "dd4ace3324e828232d07809472539ee587424f2398ef9f5e4413a9c8a706939c",
+    "xgen/screens/BlocksScreen/ProductPage.tsx": "b39e69497b02941f7aede0d8a42144613192194ca0d5490c791db789669fc1f7",
+    "xgen/screens/BlocksScreen/ProductsPage.tsx": "da0e38ba051b43dfde74061b1df71a8d30d28887375d670db152e44333c89dff",
+    "xgen/screens/BlocksScreen/ProfilePage.tsx": "2ed13c7cf10a48b3e7c48bdf9f5ac3b335fd337411ffbb8f5ec6619db31e2b76",
+    "xgen/screens/BlocksScreen/ProjectsPage.tsx": "aa5c7e0db3a26d65cf111089734dfafd1759b347e63e7a373ea7247fcfed2879",
+    "xgen/screens/BlocksScreen/ProofPage.tsx": "8bb96211dbd48248043136e092fd5fc38a92b1aa104952ee46d72ab9532304c7",
+    "xgen/screens/BlocksScreen/QuotesplitPage.tsx": "325ff8cc724a28f5a8f04965566e04c14fe99d513b125b84f687404ebda19089",
+    "xgen/screens/BlocksScreen/ReviewsPage.tsx": "e247bb9e119b932fd881eb54716adeac8cce29ed0d093db0020550e7586aae9b",
+    "xgen/screens/BlocksScreen/ScreenHeader.tsx": "48beab31f636c002d10b2a9f56d9a7cf09c334519231715cac96373f01ca48dd",
+    "xgen/screens/BlocksScreen/ShellPage.tsx": "b60ed1dc0cb745786020abe4dd89a7eb2819ebf6100119d0725d0da72a2220d1",
+    "xgen/screens/BlocksScreen/SidenavPage.tsx": "90b57fe23d6f64b8f1ea380e9e1acd506d20207dda72d8d14869a9e792680597",
+    "xgen/screens/BlocksScreen/SitemapPage.tsx": "fdb7a54d6022b3582dd6b90867818d8d9027104c5e0526f3cb11d5980214f26d",
+    "xgen/screens/BlocksScreen/SkeletonPage.tsx": "133812a55d4397c288293727efef016779ae2dd5507d377f51a7752351775afa",
+    "xgen/screens/BlocksScreen/SlotsPage.tsx": "f6113247de356063af35e2893431f433d347a5d6bdba36d05bf747dfbfe24233",
+    "xgen/screens/BlocksScreen/StatsPage.tsx": "7e4a63531e4a04a46d4b10eec7ed9ba4667879b62b0024497e993becd583bf0f",
+    "xgen/screens/BlocksScreen/StepperPage.tsx": "aa47ff3af7185c0875ef1320f4f83e3b208e28f1e1fae9b2de01e05e9dc6fe6c",
+    "xgen/screens/BlocksScreen/StepsPage.tsx": "a8f520f6d937d9299ca19ce340c7c771fc869e6c6f69dd3f5ebf864b3e0c9cd5",
+    "xgen/screens/BlocksScreen/StickyPage.tsx": "378065978f7bcf58f6e0c58130824401682b0ab1e98372b33796f68d304d1908",
+    "xgen/screens/BlocksScreen/StoreheroPage.tsx": "fef8085613f34feee3c708c50fcc7854cd3109781b6aba7f893e194a9dda6329",
+    "xgen/screens/BlocksScreen/StorytabsPage.tsx": "5dbc1ca37c41038bc55c16ea97e97db5680dc7f5a4865e41649be1a7d65f5c0b",
+    "xgen/screens/BlocksScreen/SummaryPage.tsx": "44b3933889e11e716695d46987ac42111e8cf912d6ba1351c3076d29594c1e8d",
+    "xgen/screens/BlocksScreen/TeamPage.tsx": "ef93e9eb4bd0b8f5c1ce642271e89dc074f567442910014bf6df8a87b0c757b8",
+    "xgen/screens/BlocksScreen/TemplatesPage.tsx": "84446eed20ba4e0572b09be0a621f74d9b416da751de63dc044d7d6f100d8bad",
+    "xgen/screens/BlocksScreen/TestimonialsPage.tsx": "9fecc681153b87812716d184645289e65070ec4fcf42efaa3f4bd6062aa9f9f4",
+    "xgen/screens/BlocksScreen/TimelinePage.tsx": "e442071b23d3d4412911cb82095f89ce36deb4434be8d608cc09616d7d2d3d64",
+    "xgen/screens/BlocksScreen/TourPage.tsx": "9050caa1d5c6eac55a6d9bdac747ea41556bb91dcdfa42ed3eb3fec0c4fb0184",
+    "xgen/screens/BlocksScreen/UsagePage.tsx": "92709673cd761080ac62811e707a04c5700502cebec03bfcd0bb56c1a31abcb1",
+    "xgen/screens/BlocksScreen/UspPage.tsx": "3e44a607c54fa3855320c4c347c0052a557653e304ab8d216bee8fbb67493d48",
+    "xgen/screens/BlocksScreen/VideomodalPage.tsx": "cb663f77e058cd8d1daba5467ffd8147ab7ecd7d0b6e9a062863e1cfcb1dd139",
+    "xgen/screens/BlocksScreen/VideosPage.tsx": "7cadc8d65d91975f768e7bf8c1888fadbed3c68227353ce9e88c675fac713265",
+    "xgen/screens/BlocksScreen/WizardPage.tsx": "04bcf56870cc1957326d5c2a1c8ce9dec61a86d7b87d23a0baac097c9cda09b4",
+    "xgen/screens/BlocksScreen/ZonesPage.tsx": "21ad7f8dce99da17ce0d990d25173e92de1db1a77c1facfdf3cdd5aa5f06474d",
+    "xgen/screens/CatalogScreen.tsx": "8b55f9622fdd8acef860be118bca7f11785f07281c2ebe13b9c316af94520bc4",
+    "xgen/screens/CatalogScreen/AppAuthPage.tsx": "5de4f55356c760c2f5da1ba0318e59f7431ccca8fe428bc987f4a75ac3c2146e",
+    "xgen/screens/CatalogScreen/AppAuthPagesPage.tsx": "88db5581ca347040458764d144b7b458ea11ef870992aa818807e9c3bf078516",
+    "xgen/screens/CatalogScreen/AppBoardsPage.tsx": "4f2123070fac4c268fc572d515cdcdfc4094e737db70e6522e6ae7057c155803",
+    "xgen/screens/CatalogScreen/AppDashboardShellsPage.tsx": "8b6f9c33492d12c5e554f248a0773d8751cd3a29d6e2aed2d642bbbe55028931",
+    "xgen/screens/CatalogScreen/AppGuidancePage.tsx": "6c19f073bc12e202ac9eb8b955a9489d8219768bd3efbf914d190fa03eedf792",
+    "xgen/screens/CatalogScreen/AppOnboardingPage.tsx": "ef2310d3b43d5718919531cb6cedfa97d2fa170939d5f0d354759af49dddd428",
+    "xgen/screens/CatalogScreen/AppSettingsPage.tsx": "8f31eccfc1c3131243fb46ef52d10674db3b502b9d783d7ad9becc708edd585c",
+    "xgen/screens/CatalogScreen/AppShellPage.tsx": "fcf2515661291917ba2eb257eb6cd1ca6dd0606550b57d0ebdfdcd237cfb271c",
+    "xgen/screens/CatalogScreen/AppStatesPage.tsx": "956bde02ff3f7e81a91bfa79861f4d52ba4dce57baf95dc8d24ef1eca2231bde",
+    "xgen/screens/CatalogScreen/AppWidgetsPage.tsx": "cf9ca13c338159207e03759bc231545a21e549de8d8b4cebab96478c3e14b644",
+    "xgen/screens/CatalogScreen/CommerceCartPage.tsx": "22d8c5623ec6583cec90021a5189354f74c8a451bf070e3166d7e2a3c35408fa",
+    "xgen/screens/CatalogScreen/CommerceCategoriesPage.tsx": "5dcc37903e1b883992712ef4d6c90fecaa0b0dabe96ec1902b2678735e5cecaa",
+    "xgen/screens/CatalogScreen/CommerceCheckoutPage.tsx": "5fdc1cbf7149afd3e5b10f8c08c9887cba1632c14537f8a485b0c6b420c7488c",
+    "xgen/screens/CatalogScreen/CommerceDeliveryPage.tsx": "97ac26cc1df3dec2b3a95a3a5fd8658568d1b8b97ec2fe1d5c3e5771a7cfd6f1",
+    "xgen/screens/CatalogScreen/CommerceOrdersPage.tsx": "e7b75ccd5688234f974b0afefd4091df441135685c5531e7c1392695026e24b6",
+    "xgen/screens/CatalogScreen/CommerceProductPage.tsx": "5181a629524ab36a1f1640e73c0530761ce962b0173168fefc0029ec92a0e064",
+    "xgen/screens/CatalogScreen/CommerceProductsPage.tsx": "e219ee26765a8791a3379de7e47b2f12db9419a8f580c64a6efab6e00223c6f0",
+    "xgen/screens/CatalogScreen/CommerceStorefrontPage.tsx": "e4f65e15ae5ba0e403cb0ddcc6e889b8d59a123ace2fb3944cfd9f42396c3bff",
+    "xgen/screens/CatalogScreen/ContentArticlePage.tsx": "a9bd6956c0f8d7edb0e723a9d44d95f77d4ecff0c5f643a30b1b2650806e63ee",
+    "xgen/screens/CatalogScreen/ContentBlogPage.tsx": "ddc3158cb24c01921ed07ce11c351927b72cce98710f632ee70d3eb5dd281f12",
+    "xgen/screens/CatalogScreen/ContentPostHeaderPage.tsx": "acc97c35a95909f8a5ebdcddbaf4cb10db6791c7f8a8e24f24ed74cc33646f02",
+    "xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.tsx": "ded4b7f9d57bd7e102ea5444237304569da40c3b94183f7054715bcb037230af",
+    "xgen/screens/CatalogScreen/ContentPostShowcasePage.tsx": "3a2e53ea8a251a2617a296cd49a92d46bc1f019b167eed9cadf6632dc8ac14c3",
+    "xgen/screens/CatalogScreen/ContentStoryTabsPage.tsx": "fa623f8ea972a57e8d2465a17d2988e65fedab04e26c33218c84219ccd82ed1a",
+    "xgen/screens/CatalogScreen/ContentTimelinePage.tsx": "2d6b89becbd65ecc8ec7e643d619efcaa6aea7699a29f4a574f4f8a5f855d483",
+    "xgen/screens/CatalogScreen/IndexPage.tsx": "3ac671a26bd0eb027a507dabe85e3928bdd4fd364d7b6cbdcd209bde3524e51b",
+    "xgen/screens/CatalogScreen/MarketingAboutPage.tsx": "29df5df4dfb60c0ab068723f6304fd68438f2980c836f7b7e4c7a79de262ed54",
+    "xgen/screens/CatalogScreen/MarketingCareersPage.tsx": "0cf2edd1704a2fec74caaddf26f66b11bc3c64caea9292963ebd048ce55d6ae3",
+    "xgen/screens/CatalogScreen/MarketingCtaPage.tsx": "f68ca032044b339f97dc539806b5e8e0097e35fedebc76a69f0622501652940d",
+    "xgen/screens/CatalogScreen/MarketingCtaProofPage.tsx": "cbb438cb93397c1e8dbb60c53dea68a30f86f9cbba25a624018985ab024b2b78",
+    "xgen/screens/CatalogScreen/MarketingFaqPage.tsx": "78440cda75ae260c815daad1d959745a5114456fa8b6c54dc931adbbcc886f04",
+    "xgen/screens/CatalogScreen/MarketingFeatureCardsPage.tsx": "067031192d3dbbd1e44a233f3e1ffb476fe568a7795b48700c02ca8fe267e35c",
+    "xgen/screens/CatalogScreen/MarketingFeaturesPage.tsx": "ac0ba41889fb9ca1df5ad414b8611ccccd5edb256ac3e03ef4c06378253f3568",
+    "xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.tsx": "9c871140ff5cc932a2ce61fe3ff288f5b5809c08155a140144c6581bfd8eddbc",
+    "xgen/screens/CatalogScreen/MarketingFooterPage.tsx": "45d2bf5bde19ccadba3d814c3c8921731622ba15fb7db283893ba3e0a231c07c",
+    "xgen/screens/CatalogScreen/MarketingFooterSplitPage.tsx": "02050cb100a5c7e85c44a48737deabd69bfafb28c6cf115041743273c369a63e",
+    "xgen/screens/CatalogScreen/MarketingGalleryPage.tsx": "7599850a3806ca62023e37e20086ee5daa3cc5aa4cad0b9450b4bf39d9169de8",
+    "xgen/screens/CatalogScreen/MarketingHeroPage.tsx": "1c8c2c3d037e281fa68160399a2e8a7f90ec7356228e9a00fe4c5d9b1210950b",
+    "xgen/screens/CatalogScreen/MarketingHeroSplitPage.tsx": "4ee28fc3e87bceca3c73d5551f0ff84997b98f0b31099a9c90facce731f9c985",
+    "xgen/screens/CatalogScreen/MarketingHowItWorksPage.tsx": "f6d0478a57a509b6754bf3407d4759245aec153e5dba2fe678db86372be4d619",
+    "xgen/screens/CatalogScreen/MarketingMediaListPage.tsx": "8ece195b1ebf58915c91ad2353e03056796d34856f0dcc6c0d48bf5f1d4213da",
+    "xgen/screens/CatalogScreen/MarketingNavigationPage.tsx": "ebb459199f4a4d53985c08e4694d2a14c79e4049d5e214efd8cec6db1c51903f",
+    "xgen/screens/CatalogScreen/MarketingPageHeadPage.tsx": "15935937c818f3920fe3cef1c5aa70b5db4dd4b0b6a7423e1584152742bfe62e",
+    "xgen/screens/CatalogScreen/MarketingPageTrailPage.tsx": "c1fb7e8f4b84680369113b8c3fcc2d7910121da5aac94782147d72bd0739f251",
+    "xgen/screens/CatalogScreen/MarketingPortfolioPage.tsx": "eaef606cd510f6fa144b83831885c27635d46f7a96249f361ba994135bbc4240",
+    "xgen/screens/CatalogScreen/MarketingPricingPage.tsx": "46d5a2e4c66e36c80f540e7c747a6d218f2521440347371a7671ef02fdfec7e7",
+    "xgen/screens/CatalogScreen/MarketingPricingToolsPage.tsx": "d05805e8bf2512b0d30ac4542358b0d985f6702aff3e62406fdcf0e8c0801f30",
+    "xgen/screens/CatalogScreen/MarketingProofPage.tsx": "5e8f1d4623ef3ef8534bc575bde34eb2cb91b087c3d873ea61be24d9a259ecda",
+    "xgen/screens/CatalogScreen/MarketingShowcasesPage.tsx": "1b2c8efc7c8dcc77c3f7973602345c9fe2f76fa95655655aba056f01a2c0c4f6",
+    "xgen/screens/CatalogScreen/MarketingStatsPage.tsx": "e1fb15e12dbf8dbd086f9c99c5ad1c27595e6d0e6a90fc282de9247c50e98453",
+    "xgen/screens/CatalogScreen/MarketingTeamPage.tsx": "a62578022c86d0a1a576a2523244f8e0c7d07e110b6a31c612bfa618ee77b141",
+    "xgen/screens/CatalogScreen/MarketingTestimonialsPage.tsx": "b00d462e03838f73bf320d36593524ff518d13b55e250658def0323de61289ca",
+    "xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.tsx": "4f9850b50abf7d998d8c46f9e919f30f28094b658922780c06efd0329feaacfc",
+    "xgen/screens/CatalogScreen/NotfoundPage.tsx": "052570ba7bf8c92988a56f415dfa54910b6e4f31076bbf6592217eaf9913a9e9",
+    "xgen/screens/CatalogScreen/PageCartPage.tsx": "c796636f75b0a7f5178634d15cba42dee856f3cb0e8e28ddc51714fed7b91005",
+    "xgen/screens/CatalogScreen/PageCheckoutPage.tsx": "a0f7f024163adfb2404f822380bed92b7db4022635294555d2dc4687989e6c68",
+    "xgen/screens/CatalogScreen/PageCompanyPage.tsx": "53bfd81b2e9263764c07a3dbc94044978afd1f6b262669bf6e13d35c6a49b8d3",
+    "xgen/screens/CatalogScreen/PagePortfolioPage.tsx": "5e46e9bd694e4e6d76edb6b42b1c4ac0b8f9dc76984451b64b85e744c771b80b",
+    "xgen/screens/CatalogScreen/PageProductDetailPage.tsx": "1789e39b9eddd39cd9eb6f1b9534c2123d4767571bfd62e13eba2044ee536df7",
+    "xgen/screens/CatalogScreen/PageSaasLandingPage.tsx": "427b812cf66c2af21b94d9abf95da6d78432fdd7cf67d4fdbb2a525e29c8936f",
+    "xgen/screens/CatalogScreen/PageShellClassicPage.tsx": "442e7f81cd4466284be06a57e69afe095f8b0fec9808cab197ae1b401e0f792d",
+    "xgen/screens/CatalogScreen/PageShellCollapsedEndPage.tsx": "832d23718cbe35a3d68f152534f4057c3dac177ceccc150cbbf18eb5fc15ce32",
+    "xgen/screens/CatalogScreen/PageShellCollapsedPage.tsx": "b57048bdf8386279293e4bad8c15589367607598480bae91e494c47cfd374700",
+    "xgen/screens/CatalogScreen/PageShellEndPage.tsx": "b53673c3eaa94e9d445834dfc43fe1674b3d2ea6cfd1ce069c07af51337658f8",
+    "xgen/screens/CatalogScreen/PageShellInsetPage.tsx": "ab1df0ff576bc1bbc09a29a91667cbd9281d44bfebcd3b2bca03335bf3d872f0",
+    "xgen/screens/CatalogScreen/PageShellRailEndPage.tsx": "21e20ac2146b43f67909402494886b5b1199557be9be3965f4aaf2f0ef762e16",
+    "xgen/screens/CatalogScreen/PageShellRailFooterPage.tsx": "4d58a30def4ac066bae1b096154e8f2e3936ecda1c62d37390a7f00ac27e263a",
+    "xgen/screens/CatalogScreen/PageShellRailPage.tsx": "66b6d86aa689f468ce1e9350666edc8010224c3f1f64dfb57bc224460f8a532f",
+    "xgen/screens/CatalogScreen/PageShellSideOnlyPage.tsx": "603e7f1de64e4036543635068c4b40241099effa9c0f7b2c6ee5fb94b88f60d7",
+    "xgen/screens/CatalogScreen/PageShellTopOnlyPage.tsx": "f2d023a9d7d21d903eee0440999c8a9b3734c36b7c5a216f96294d489dcfdd0b",
+    "xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.tsx": "2ed27cacb69edf54edc135a1412b37763d57148415681639a0bb9a0f18805215",
+    "xgen/screens/CatalogScreen/PageShellTwoLevelPage.tsx": "faeb7ddf3f482b8f83ec4c9bb7817ac9b547b816c32527306272a9495f0a12cf",
+    "xgen/screens/CatalogScreen/PagesPage.tsx": "2dcf098dc9d743c692513cc59a27b6505673f65280801c05607e800579d69273",
+    "xgen/screens/CatalogScreen/PageStoreCatalogPage.tsx": "b7bbae1813a8042623d68c72e3abf6c880afb8e841d402a3007da3c29bcf8efc",
+    "xgen/screens/CatalogScreen/PageStoreHome2Page.tsx": "2b935835db320e0f3fa0d500a15d2bcd3151bff670c755bc385a96057c5edcc6",
+    "xgen/screens/CatalogScreen/PageStoreHomePage.tsx": "f76432bc668191e1e8bdfc8d8f2bff87e3e3df23cf96396e6e1351c8c547b573",
+    "xgen/screens/CatalogScreen/PromoBannersPage.tsx": "580a65d7939a91d33de35e79be9447a0a4a966406c21846e3acfe40ca01b53ad",
+    "xgen/screens/CatalogScreen/PromoNewsletterPage.tsx": "635c37aa7742a1befa4c6b0a9b4be80f99b84316de50d224d00aba1d0da7f9c8",
+    "xgen/screens/CatalogScreen/ScreenHeader.tsx": "97bf5880ca6587919c0cd5b1474e4d33d62dd8c3341c36c0ff444522f21f41f8",
+    "xgen/screens/CatalogScreen/SupportContactPage.tsx": "2b00d7c1ed83794d616ec62f43d621e00a3f59594479140c35cb0ba07177adc7",
+    "xgen/screens/CatalogScreen/SupportStatesPage.tsx": "50da43f183d75a47775750a6d7bb84d004b1c651b64ec6784c10f6adce5d01d3",
+    "xgen/screens/PlansScreen.tsx": "6903b1711c288520c122def376001944aba253a98da7ea757d8b490e9dc8a559",
+    "xgen/screens/SiteScreen.tsx": "3ace1ed06739f54e910edcaf6b122c7c126e317d1ca0cb3cf64be1943c995a4e",
+    "xgen/screens/SkinsScreen.tsx": "6d8a4a1569fc61c2da5ec68c0de082dd9d772366c4e9eb6d51589403bf5c2920",
+    "xgen/screens/SkinsScreen/IndexPage.tsx": "fc94726782517340042eccf145fa69675f029089c50753e73de9626c09449589",
+    "xgen/screens/SkinsScreen/NotfoundPage.tsx": "d02c42140b1e445f32dd22558ba4232155fbfd04f22f4c4b22a658f23a742245",
+    "xgen/screens/SkinsScreen/ScreenHeader.tsx": "8038bfc1640a6ad58f3ab146aaf3ad628928aa848ca30d6df4f026b89d73830d",
+    "xgen/screens/ThemeAccountPortalScreen.tsx": "2370aa42498aff452efe7a52ff10b7727af22b34472fa62783fb9caa885b83af",
+    "xgen/screens/ThemeAccountPortalScreen/CardsPage.tsx": "1bb77ab7a61588ae3a7bf1ef640d86ab29710c35339434a2ef5003f43a0d2a41",
+    "xgen/screens/ThemeAccountPortalScreen/HomePage.tsx": "9605ee857409f973eb8d8308a8717b9eee89e2c5c1009f72a38f46d7ce512ca8",
+    "xgen/screens/ThemeAccountPortalScreen/JoinPage.tsx": "fe853637f6aefe65b60394ad099e722d67ce2c157da05f2e323f4fe660247e1b",
+    "xgen/screens/ThemeAccountPortalScreen/MagicPage.tsx": "0d03e40687186f5de58da14e9bb995578617628f5389f56ec9f71299c28a35cf",
+    "xgen/screens/ThemeAccountPortalScreen/MinimalPage.tsx": "4927b68aa4e9426756b9219eb541b57717b0856300f14adad2189a04299996b2",
+    "xgen/screens/ThemeAccountPortalScreen/OptionsPage.tsx": "2f9853dd4b7812cea739291afea90321063993742f522b0792752cd6884c78b9",
+    "xgen/screens/ThemeAccountPortalScreen/ProfilePage.tsx": "322286ee2210454ee074b2402aaa60b936cfaeed502cec6242d11f213b162ce9",
+    "xgen/screens/ThemeAccountPortalScreen/ResetPage.tsx": "8b89a12bc6a5bc11a850a5b7d4a4ecde5a1cd583715597e8d7b2540b8be66ef0",
+    "xgen/screens/ThemeAccountPortalScreen/SignupPage.tsx": "ba7929573d269c712001cd4afdc961a9b25bdf147ad9019807fe7559d3a961d2",
+    "xgen/screens/ThemeAccountPortalScreen/StartPage.tsx": "312db69eaac3ef8698e541e2af19436e07b239fa3a4ca8bb233af255fdacca4c",
+    "xgen/screens/ThemeAccountPortalScreen/WelcomePage.tsx": "53d75afa03ca2929ca1dd535d14b63d7703ab05c345437acf5673c12fcfa3611",
+    "xgen/screens/ThemeCommerceShopScreen.tsx": "6a199f254041fc672f36c2c1214526012a6cc81a0d4c8eae6c3e83bafc52b323",
+    "xgen/screens/ThemeCommerceShopScreen/BrowsePage.tsx": "d568422aa503b7914ab67b73a107c8de0749bc0fbe632a33dd97af16f9d6ffb3",
+    "xgen/screens/ThemeCommerceShopScreen/CartPage.tsx": "ef6e046461a75a14cbad128a5927e55eca26c9f91168f00e56e7157b2531a722",
+    "xgen/screens/ThemeCommerceShopScreen/CatalogPage.tsx": "b47cbd727ec28978b683c3ae55c0d5c812e7087cb5a9401795658888354c4484",
+    "xgen/screens/ThemeCommerceShopScreen/CheckoutPage.tsx": "199d9ec4c761838385a52459298dbfecc2b3c01379b94fc34045b0e4cfb36633",
+    "xgen/screens/ThemeCommerceShopScreen/DeliveryPage.tsx": "03705fda08a411beb10a93f4b4d438239dc71327d7d6ab6ebd763a161d15e7b6",
+    "xgen/screens/ThemeCommerceShopScreen/HomePage.tsx": "4ddbc9254d7ea114c63acfd9fb7dd8c06236b5c81f5fa2fcf8b55a3e6b80883e",
+    "xgen/screens/ThemeCommerceShopScreen/OffersPage.tsx": "7ff3a3e89e7f0b8840b698e160291581b99b36415ad61ddb3717d15b75e1894a",
+    "xgen/screens/ThemeCommerceShopScreen/OrdersPage.tsx": "981c187a694ad2408e89330bfd3e496aed227a074af4c5d60f8bed9da8a2c23b",
+    "xgen/screens/ThemeCommerceShopScreen/ProductPage.tsx": "826d997ed5b1882bb93f8350ce4832e97609c0528790d785f084f135f0b1d120",
+    "xgen/screens/ThemeContentBlogScreen.tsx": "2bfe1c0df8358ac67173df737dbac1d69f70bb26589e004675fcd80034f5eb7e",
+    "xgen/screens/ThemeContentBlogScreen/ArchivePage.tsx": "765001451b0c01efca9fd8a05f557eee95dd6481cc81a70c014be8c23672bf3e",
+    "xgen/screens/ThemeContentBlogScreen/ArticlesPage.tsx": "88c76a5daf1e0c89fba078b899a961680744e53a4c07c09c9c9f77a54f79f8e9",
+    "xgen/screens/ThemeContentBlogScreen/EssayPage.tsx": "201a651879a1d7214a0585610a4cab13fac4d51f1c0603832f9df05e3d45c31c",
+    "xgen/screens/ThemeContentBlogScreen/HomePage.tsx": "ff7ac225543a0d81ec89dd98c7d40c0d3c233716391d66159d7c3e5003e442b3",
+    "xgen/screens/ThemeContentBlogScreen/PlainPage.tsx": "afb35e481ccfd4fccc826d7e1c22858233a0b0e304f929ba7d75fe8a50116777",
+    "xgen/screens/ThemeContentBlogScreen/PostPage.tsx": "c107297f3a13ad1e2cb726246979648cc4d76308d9b445b54584b724d550a8b0",
+    "xgen/screens/ThemeContentBlogScreen/StoryPage.tsx": "d0291608a40e1b3905dcc1d8a035074f4a1dbf6aacab65077a8e3a9b5a4309c3",
+    "xgen/screens/ThemeDashboardConsoleScreen.tsx": "48a93b5befeab71c23a5d0ec3d590eb2da1d8e65b5ff1753b0dc29bf8f7dea1f",
+    "xgen/screens/ThemeDashboardConsoleScreen/BoardPage.tsx": "04d6580f0dfe0611a007ca08cd28d58c966661238d300447a525724486a2d83e",
+    "xgen/screens/ThemeDashboardConsoleScreen/HomePage.tsx": "ad99b4b2fd1d9fda5646a6d39f679ab486855e1ce07b14ec2f948078a0a9f91f",
+    "xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.tsx": "c69759d19fd62f1c1979376f78773637cc29edc38a57e7b5ffc364bac4a54596",
+    "xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.tsx": "8c48bf2905a9e234c073408dbcf0e512288960d8e35b2a3cba6e6e4143add254",
+    "xgen/screens/ThemeDashboardConsoleScreen/StatesPage.tsx": "2ebacc493ff730f547cf4dc00ee3f407afe7b90f807b09ccc00d9aa14cba0f45",
+    "xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.tsx": "3a02215324ca285b396ef3201e0a9522970071c97b11478f6b9ccb3e0eccf6ea",
+    "xgen/screens/ThemeMarketingLandingScreen.tsx": "900ff833c1aff80d6f7f51faeccc3cc308affe3e87568ed3a369d01d3b1a1378",
+    "xgen/screens/ThemeMarketingLandingScreen/CompanyPage.tsx": "2ff27cbe9b62fb6599abd8415865392c549258ecb32eba28c155bbc773a32785",
+    "xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.tsx": "03dcfd190a0638241864bd5a92ccde2f9693a5bfc33c2e33621a07539b31b3dd",
+    "xgen/screens/ThemeMarketingLandingScreen/EventsPage.tsx": "21761f4fd9f6bf453b19afee1ea1b5c1cfb10d68509da04f40083c665764ac99",
+    "xgen/screens/ThemeMarketingLandingScreen/HomePage.tsx": "79c45e25e0a27c8b8429f382893cc875cefb7cfe5763032f8f96564b22fbf69a",
+    "xgen/screens/ThemeMarketingLandingScreen/LaunchPage.tsx": "900915d4e91235f9c21e09a4a78609ac04c7c2e1ec69570ac4f83081547bbc11",
+    "xgen/screens/ThemeMarketingLandingScreen/StudioPage.tsx": "cf18de7e30b9accf7a7e0ea095a62b59092141b86aa2c10467d909d729c494ae",
+    "xgen/screens/ThemeMarketingLandingScreen/TeamsPage.tsx": "98db5cb558aba1caeedcd14ffb432e31b60a401e49bfb45168787a4a742047f7",
+    "xgen/screens/ThemeMarketingLandingScreen/WorkPage.tsx": "05b500014f18774c8140a020a8e42a8e6a1277e958c81e071fb17a410fd417c0",
+    "xgen/screens/ThemeMarketingPricingScreen.tsx": "b87e4fa91526d53edb91560bf8e1efeb2155decd18434f601e92acf8a422d529",
+    "xgen/screens/ThemeMarketingPricingScreen/ComparePage.tsx": "ded0010efb64ccf3a55fc6c4e24da051206d84c3ee81d7604ee5e9791408207f",
+    "xgen/screens/ThemeMarketingPricingScreen/HomePage.tsx": "457a5abc9b49f3b28b5d550d3eeea7826ab62239e3debd910b5b76686429bd63",
+    "xgen/screens/ThemeMarketingPricingScreen/PlansPage.tsx": "b87004c708dc575c6ccd4ed6f601c272ad0075d2fb49bf4f59bba5b43f3f04c2",
+    "xgen/screens/ThemeMarketingPricingScreen/UsagePage.tsx": "aa14867fb90cec64a55978d46693098c92d6eea1c725395fe0c5a1623748d6b7",
+    "xgen/screens/ThemeMarketingProductScreen.tsx": "c3787ee197b4c8927ea665de379e08b35eaf562be3d0d7b3f1de0c91434baa53",
+    "xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.tsx": "5996c5f7c4300b8385dcf4ce2984ef05d72a578c359e875fc7a85c98f47c04a7",
+    "xgen/screens/ThemeMarketingProductScreen/HomePage.tsx": "65ddd8ce3ad43f35f477a44a962e59a55353b3d2196c5c285d246c509d4c2e7b",
+    "xgen/screens/ThemeMarketingProductScreen/NavigationPage.tsx": "110359ecb8ac5dcda66fba02cd2a4a1554a7b6c962e16e2e76d615d77e67e028",
+    "xgen/screens/ThemeMarketingProductScreen/TourPage.tsx": "67ca55507724c59498a5c235357c7a04a65459f5c206c62c5d8511bed8e9955b",
+    "xgen/screens/ThemeOnboardingFlowScreen.tsx": "4a2d426108bb10b9df19c30e924d0bdf84fac1422963bda157a169b8d7b8c0bd",
+    "xgen/screens/ThemeOnboardingFlowScreen/HomePage.tsx": "883cdf4742e538bec28712ac88816ab1fea69aeae8d0d8d70d8b4cfb953054b6",
+    "xgen/screens/ThemeOnboardingFlowScreen/SetupPage.tsx": "506d845f462b41e4458849b5b7313651e9065559b3ce43e95b0b804f2b8a30f9",
+    "xgen/screens/ThemeOnboardingFlowScreen/TourPage.tsx": "35ed15304001ff2fd2c2c0d3c3d33f9db6de412c89631fb9534390b2069de757",
+    "xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.tsx": "628cb1d6c2b6cc114db17626ebd8d317ded8ce68a394aaa44d5b47f39b9f52ef",
+    "xgen/screens/ThemePromoCampaignScreen.tsx": "71c541d6d1a8298176871e49bd9953af960d8f322f5beecd8029827440695fdc",
+    "xgen/screens/ThemePromoCampaignScreen/HomePage.tsx": "6dbd392b204470a85f5a8b56bbd64725ec5d9a0f835f026ab41219c034a11c9f",
+    "xgen/screens/ThemePromoCampaignScreen/LaunchPage.tsx": "a011fdf7b362fd25dffc10d64f148876c2a50afde19863c3162e8d7c93535ad8",
+    "xgen/screens/ThemePromoCampaignScreen/NoticesPage.tsx": "784542d2881e7eb0032817d29e775035e080f4a0def263874c24ecd5d1de2668",
+    "xgen/screens/ThemePromoCampaignScreen/OfferPage.tsx": "faa4d61c749ab2b8bd06796f7b302b2f0003d9c767bf6ef632d6536b08098490",
+    "xgen/screens/ThemeSupportCenterScreen.tsx": "1820288288460b5f87f7f006d8e837e32118d1a52c89fdac882d23ac3ed94aab",
+    "xgen/screens/ThemeSupportCenterScreen/ContactPage.tsx": "cdc19d7637cb7766673eca2bbc42eb8e157aa9702451fc1d866fa5d5631d4b3c",
+    "xgen/screens/ThemeSupportCenterScreen/FaqPage.tsx": "fa4549fbf996b8376b5bb26d90597ea554881425fb21c1d3d954bd04c64bca0a",
+    "xgen/screens/ThemeSupportCenterScreen/HomePage.tsx": "c69f898f490f18945c7d000c264e1496cebfdbeb8e3da3505ad1c8d361bc90dd",
+    "xgen/screens/ThemeSupportCenterScreen/MissingPage.tsx": "4341407c188396e968c7ddfee8fee3cb4ceddbf0631ad5914e562c3591cad358",
+    "xgen/screens/ThemeSupportCenterScreen/MovedPage.tsx": "3cb5b4404fd311f20e3725f6727aaaa289e52d8d6892b6e406345a071c46fdcb"
+  }
+}
diff --git a/apps/host-solid/xgen/App.tsx b/apps/host-solid/xgen/App.tsx
new file mode 100644
index 0000000..cee94a7
--- /dev/null
+++ b/apps/host-solid/xgen/App.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/solid/src/app.ts (settings: apps/host-solid/xgen.app.json)
+import { For } from "solid-js";
+import { Block, Link, List, ListItem, Title } from "@ui8kit/solid-ui";
+import { SCREENS } from "@ui8kit/app-shared/screens";
+import { useUrl } from "./runtime/url";
+import { ScreenOutlet, type ScreenModule } from "./runtime/ScreenOutlet";
+
+/** one chunk per screen: a landing is a screen spec, not an app */
+const LOADERS: Record<string, () => Promise<ScreenModule>> = {
+  "blocks": () => import("./screens/BlocksScreen").then((m) => ({ default: m.BlocksScreen })),
+  "catalog": () => import("./screens/CatalogScreen").then((m) => ({ default: m.CatalogScreen })),
+  "plans": () => import("./screens/PlansScreen").then((m) => ({ default: m.PlansScreen })),
+  "site": () => import("./screens/SiteScreen").then((m) => ({ default: m.SiteScreen })),
+  "skins": () => import("./screens/SkinsScreen").then((m) => ({ default: m.SkinsScreen })),
+  "theme-account-portal": () => import("./screens/ThemeAccountPortalScreen").then((m) => ({ default: m.ThemeAccountPortalScreen })),
+  "theme-commerce-shop": () => import("./screens/ThemeCommerceShopScreen").then((m) => ({ default: m.ThemeCommerceShopScreen })),
+  "theme-content-blog": () => import("./screens/ThemeContentBlogScreen").then((m) => ({ default: m.ThemeContentBlogScreen })),
+  "theme-dashboard-console": () => import("./screens/ThemeDashboardConsoleScreen").then((m) => ({ default: m.ThemeDashboardConsoleScreen })),
+  "theme-marketing-landing": () => import("./screens/ThemeMarketingLandingScreen").then((m) => ({ default: m.ThemeMarketingLandingScreen })),
+  "theme-marketing-pricing": () => import("./screens/ThemeMarketingPricingScreen").then((m) => ({ default: m.ThemeMarketingPricingScreen })),
+  "theme-marketing-product": () => import("./screens/ThemeMarketingProductScreen").then((m) => ({ default: m.ThemeMarketingProductScreen })),
+  "theme-onboarding-flow": () => import("./screens/ThemeOnboardingFlowScreen").then((m) => ({ default: m.ThemeOnboardingFlowScreen })),
+  "theme-promo-campaign": () => import("./screens/ThemePromoCampaignScreen").then((m) => ({ default: m.ThemePromoCampaignScreen })),
+  "theme-support-center": () => import("./screens/ThemeSupportCenterScreen").then((m) => ({ default: m.ThemeSupportCenterScreen })),
+};
+
+export function App(props: { screen: string; title: string }) {
+  const url = useUrl();
+  const load = LOADERS[props.screen];
+  if (load) return <ScreenOutlet load={load} url={url} />;
+  return (
+    <Block tag="main" id="main-content" class="mx-auto w-full max-w-3xl px-4 py-12" data-testid="host-index">
+      <Title as={1} size="2xl" weight="semibold">{props.title}</Title>
+      <List class="mt-6 grid gap-2">
+        <For each={SCREENS}>{(s) => <ListItem><Link class="underline" href={`/${s.key}/`} data-testid="host-screen">{s.key}</Link></ListItem>}</For>
+      </List>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/runtime/ScreenOutlet.tsx b/apps/host-solid/xgen/runtime/ScreenOutlet.tsx
new file mode 100644
index 0000000..670b4c8
--- /dev/null
+++ b/apps/host-solid/xgen/runtime/ScreenOutlet.tsx
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/solid/src/app.ts (settings: apps/host-solid/xgen.app.json)
+// The outlet of the host frame: renders the screen chunk behind a loader (one lazy component per loader, cached).
+// A screen reads its URL once, as a Solid component runs once: a new URL renders the screen again (keyed), and the
+// focused control (by data-testid or id) gets the focus and the caret back, so typing in a search box goes on.
+import { lazy, Show, Suspense, type Accessor, type Component, type JSX } from "solid-js";
+import type { UrlPort } from "@ui8kit/app-shared/runtime/core";
+
+export type ScreenModule = { default: Component<{ url: UrlPort }> };
+type Loader = () => Promise<ScreenModule>;
+
+const cache = new Map<Loader, Component<{ url: UrlPort }>>();
+
+function keepFocus(): void {
+  const el = document.activeElement as HTMLInputElement | null;
+  const id = el?.getAttribute("data-testid") ?? el?.id;
+  if (!el || !id || el === document.body) return;
+  const attr = el.hasAttribute("data-testid") ? "data-testid" : "id";
+  const caret = typeof el.selectionStart === "number" ? [el.selectionStart, el.selectionEnd ?? el.selectionStart] : undefined;
+  queueMicrotask(() => {
+    const next = document.querySelector<HTMLInputElement>(`[${attr}="${CSS.escape(id)}"]`);
+    if (!next || next === document.activeElement) return;
+    next.focus();
+    if (caret) try { next.setSelectionRange(caret[0]!, caret[1]!); } catch { /* not a text field */ }
+  });
+}
+
+export function ScreenOutlet(props: { load: Loader; url: Accessor<UrlPort> }): JSX.Element {
+  let Screen = cache.get(props.load);
+  if (!Screen) { Screen = lazy(props.load); cache.set(props.load, Screen); }
+  const S = Screen;
+  let first = true;
+  const url = (): UrlPort => { const u = props.url(); if (!first) keepFocus(); first = false; return u; };
+  return <Suspense fallback={null}><Show when={url()} keyed>{(u) => <S url={u} />}</Show></Suspense>;
+}
diff --git a/apps/host-solid/xgen/runtime/url.ts b/apps/host-solid/xgen/runtime/url.ts
new file mode 100644
index 0000000..ecbe5fe
--- /dev/null
+++ b/apps/host-solid/xgen/runtime/url.ts
@@ -0,0 +1,13 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/solid/assets/url.ts
+// The URL as a port for Solid: the hash store of the app runtime read through a signal.
+import { createSignal, onCleanup, type Accessor } from "solid-js";
+import { createHashStore, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+
+const store = createHashStore();
+
+export function useUrl(): Accessor<UrlPort> {
+  const [snapshot, setSnapshot] = createSignal(store.getSnapshot());
+  onCleanup(store.subscribe(() => setSnapshot(store.getSnapshot())));
+  return () => ({ ...snapshot(), go: store.go });
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen.tsx b/apps/host-solid/xgen/screens/BlocksScreen.tsx
new file mode 100644
index 0000000..27c3e85
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen.tsx
@@ -0,0 +1,405 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+/**
+ * The block gallery: an index of blocks grouped by topic and one page per block with every variant, on the
+ * fixtures. Built from the block catalog; nothing is written by hand.
+ */
+
+import { Block } from "@ui8kit/solid-ui";
+import { IndexPage } from "./BlocksScreen/IndexPage";
+import { AboutPage } from "./BlocksScreen/AboutPage";
+import { AboutmePage } from "./BlocksScreen/AboutmePage";
+import { AccordionPage } from "./BlocksScreen/AccordionPage";
+import { BeforeafterPage } from "./BlocksScreen/BeforeafterPage";
+import { BentoPage } from "./BlocksScreen/BentoPage";
+import { ComparePage } from "./BlocksScreen/ComparePage";
+import { CreditsPage } from "./BlocksScreen/CreditsPage";
+import { CtaPage } from "./BlocksScreen/CtaPage";
+import { CtaproofPage } from "./BlocksScreen/CtaproofPage";
+import { FaqPage } from "./BlocksScreen/FaqPage";
+import { FaqsplitPage } from "./BlocksScreen/FaqsplitPage";
+import { FeaturesPage } from "./BlocksScreen/FeaturesPage";
+import { FeatureshowcasePage } from "./BlocksScreen/FeatureshowcasePage";
+import { FeaturesplitPage } from "./BlocksScreen/FeaturesplitPage";
+import { FeaturetabsPage } from "./BlocksScreen/FeaturetabsPage";
+import { FooterPage } from "./BlocksScreen/FooterPage";
+import { FootersplitPage } from "./BlocksScreen/FootersplitPage";
+import { HeaderPage } from "./BlocksScreen/HeaderPage";
+import { HeroPage } from "./BlocksScreen/HeroPage";
+import { HerosplitPage } from "./BlocksScreen/HerosplitPage";
+import { IconwallPage } from "./BlocksScreen/IconwallPage";
+import { JobsPage } from "./BlocksScreen/JobsPage";
+import { LogosPage } from "./BlocksScreen/LogosPage";
+import { MedialistPage } from "./BlocksScreen/MedialistPage";
+import { MegamenuPage } from "./BlocksScreen/MegamenuPage";
+import { NavbarPage } from "./BlocksScreen/NavbarPage";
+import { PageheadPage } from "./BlocksScreen/PageheadPage";
+import { PagetrailPage } from "./BlocksScreen/PagetrailPage";
+import { PhotosPage } from "./BlocksScreen/PhotosPage";
+import { PlanPage } from "./BlocksScreen/PlanPage";
+import { PricingPage } from "./BlocksScreen/PricingPage";
+import { ProjectsPage } from "./BlocksScreen/ProjectsPage";
+import { ProofPage } from "./BlocksScreen/ProofPage";
+import { QuotesplitPage } from "./BlocksScreen/QuotesplitPage";
+import { SitemapPage } from "./BlocksScreen/SitemapPage";
+import { StatsPage } from "./BlocksScreen/StatsPage";
+import { StepsPage } from "./BlocksScreen/StepsPage";
+import { StickyPage } from "./BlocksScreen/StickyPage";
+import { TeamPage } from "./BlocksScreen/TeamPage";
+import { TemplatesPage } from "./BlocksScreen/TemplatesPage";
+import { TestimonialsPage } from "./BlocksScreen/TestimonialsPage";
+import { UsagePage } from "./BlocksScreen/UsagePage";
+import { VideosPage } from "./BlocksScreen/VideosPage";
+import { CartPage } from "./BlocksScreen/CartPage";
+import { CartdrawerPage } from "./BlocksScreen/CartdrawerPage";
+import { CartpagePage } from "./BlocksScreen/CartpagePage";
+import { CategoriesPage } from "./BlocksScreen/CategoriesPage";
+import { CheckoutPage } from "./BlocksScreen/CheckoutPage";
+import { DeliveryPage } from "./BlocksScreen/DeliveryPage";
+import { LocationsPage } from "./BlocksScreen/LocationsPage";
+import { OrdersPage } from "./BlocksScreen/OrdersPage";
+import { ProductPage } from "./BlocksScreen/ProductPage";
+import { ProductinfoPage } from "./BlocksScreen/ProductinfoPage";
+import { ProductsPage } from "./BlocksScreen/ProductsPage";
+import { ReviewsPage } from "./BlocksScreen/ReviewsPage";
+import { SlotsPage } from "./BlocksScreen/SlotsPage";
+import { StoreheroPage } from "./BlocksScreen/StoreheroPage";
+import { SummaryPage } from "./BlocksScreen/SummaryPage";
+import { UspPage } from "./BlocksScreen/UspPage";
+import { ZonesPage } from "./BlocksScreen/ZonesPage";
+import { AnnouncementPage } from "./BlocksScreen/AnnouncementPage";
+import { CookiePage } from "./BlocksScreen/CookiePage";
+import { NewsletterPage } from "./BlocksScreen/NewsletterPage";
+import { ArticlePage } from "./BlocksScreen/ArticlePage";
+import { PostheaderPage } from "./BlocksScreen/PostheaderPage";
+import { PostsPage } from "./BlocksScreen/PostsPage";
+import { PostshowcasePage } from "./BlocksScreen/PostshowcasePage";
+import { PostsplitPage } from "./BlocksScreen/PostsplitPage";
+import { StorytabsPage } from "./BlocksScreen/StorytabsPage";
+import { TimelinePage } from "./BlocksScreen/TimelinePage";
+import { AuthPage } from "./BlocksScreen/AuthPage";
+import { AuthpagePage } from "./BlocksScreen/AuthpagePage";
+import { ProfilePage } from "./BlocksScreen/ProfilePage";
+import { WizardPage } from "./BlocksScreen/WizardPage";
+import { ActivityPage } from "./BlocksScreen/ActivityPage";
+import { BottomnavPage } from "./BlocksScreen/BottomnavPage";
+import { ChartPage } from "./BlocksScreen/ChartPage";
+import { DashshellPage } from "./BlocksScreen/DashshellPage";
+import { EmptyPage } from "./BlocksScreen/EmptyPage";
+import { KanbanPage } from "./BlocksScreen/KanbanPage";
+import { MetricsPage } from "./BlocksScreen/MetricsPage";
+import { OverviewPage } from "./BlocksScreen/OverviewPage";
+import { ShellPage } from "./BlocksScreen/ShellPage";
+import { SidenavPage } from "./BlocksScreen/SidenavPage";
+import { SkeletonPage } from "./BlocksScreen/SkeletonPage";
+import { ChecklistPage } from "./BlocksScreen/ChecklistPage";
+import { StepperPage } from "./BlocksScreen/StepperPage";
+import { TourPage } from "./BlocksScreen/TourPage";
+import { VideomodalPage } from "./BlocksScreen/VideomodalPage";
+import { ChannelsPage } from "./BlocksScreen/ChannelsPage";
+import { ContactPage } from "./BlocksScreen/ContactPage";
+import { ErrorpagePage } from "./BlocksScreen/ErrorpagePage";
+import { NotfoundPage } from "./BlocksScreen/NotfoundPage";
+import { ScreenHeader } from "./BlocksScreen/ScreenHeader";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ROUTES = [
+  {"path":"","area":"index"},
+  {"path":"about","area":"about"},
+  {"path":"aboutme","area":"aboutme"},
+  {"path":"accordion","area":"accordion"},
+  {"path":"beforeafter","area":"beforeafter"},
+  {"path":"bento","area":"bento"},
+  {"path":"compare","area":"compare"},
+  {"path":"credits","area":"credits"},
+  {"path":"cta","area":"cta"},
+  {"path":"ctaproof","area":"ctaproof"},
+  {"path":"faq","area":"faq"},
+  {"path":"faqsplit","area":"faqsplit"},
+  {"path":"features","area":"features"},
+  {"path":"featureshowcase","area":"featureshowcase"},
+  {"path":"featuresplit","area":"featuresplit"},
+  {"path":"featuretabs","area":"featuretabs"},
+  {"path":"footer","area":"footer"},
+  {"path":"footersplit","area":"footersplit"},
+  {"path":"header","area":"header"},
+  {"path":"hero","area":"hero"},
+  {"path":"herosplit","area":"herosplit"},
+  {"path":"iconwall","area":"iconwall"},
+  {"path":"jobs","area":"jobs"},
+  {"path":"logos","area":"logos"},
+  {"path":"medialist","area":"medialist"},
+  {"path":"megamenu","area":"megamenu"},
+  {"path":"navbar","area":"navbar"},
+  {"path":"pagehead","area":"pagehead"},
+  {"path":"pagetrail","area":"pagetrail"},
+  {"path":"photos","area":"photos"},
+  {"path":"plan","area":"plan"},
+  {"path":"pricing","area":"pricing"},
+  {"path":"projects","area":"projects"},
+  {"path":"proof","area":"proof"},
+  {"path":"quotesplit","area":"quotesplit"},
+  {"path":"sitemap","area":"sitemap"},
+  {"path":"stats","area":"stats"},
+  {"path":"steps","area":"steps"},
+  {"path":"sticky","area":"sticky"},
+  {"path":"team","area":"team"},
+  {"path":"templates","area":"templates"},
+  {"path":"testimonials","area":"testimonials"},
+  {"path":"usage","area":"usage"},
+  {"path":"videos","area":"videos"},
+  {"path":"cart","area":"cart"},
+  {"path":"cartdrawer","area":"cartdrawer"},
+  {"path":"cartpage","area":"cartpage"},
+  {"path":"categories","area":"categories"},
+  {"path":"checkout","area":"checkout"},
+  {"path":"delivery","area":"delivery"},
+  {"path":"locations","area":"locations"},
+  {"path":"orders","area":"orders"},
+  {"path":"product","area":"product"},
+  {"path":"productinfo","area":"productinfo"},
+  {"path":"products","area":"products"},
+  {"path":"reviews","area":"reviews"},
+  {"path":"slots","area":"slots"},
+  {"path":"storehero","area":"storehero"},
+  {"path":"summary","area":"summary"},
+  {"path":"usp","area":"usp"},
+  {"path":"zones","area":"zones"},
+  {"path":"announcement","area":"announcement"},
+  {"path":"cookie","area":"cookie"},
+  {"path":"newsletter","area":"newsletter"},
+  {"path":"article","area":"article"},
+  {"path":"postheader","area":"postheader"},
+  {"path":"posts","area":"posts"},
+  {"path":"postshowcase","area":"postshowcase"},
+  {"path":"postsplit","area":"postsplit"},
+  {"path":"storytabs","area":"storytabs"},
+  {"path":"timeline","area":"timeline"},
+  {"path":"auth","area":"auth"},
+  {"path":"authpage","area":"authpage"},
+  {"path":"profile","area":"profile"},
+  {"path":"wizard","area":"wizard"},
+  {"path":"activity","area":"activity"},
+  {"path":"bottomnav","area":"bottomnav"},
+  {"path":"chart","area":"chart"},
+  {"path":"dashshell","area":"dashshell"},
+  {"path":"empty","area":"empty"},
+  {"path":"kanban","area":"kanban"},
+  {"path":"metrics","area":"metrics"},
+  {"path":"overview","area":"overview"},
+  {"path":"shell","area":"shell"},
+  {"path":"sidenav","area":"sidenav"},
+  {"path":"skeleton","area":"skeleton"},
+  {"path":"checklist","area":"checklist"},
+  {"path":"stepper","area":"stepper"},
+  {"path":"tour","area":"tour"},
+  {"path":"videomodal","area":"videomodal"},
+  {"path":"channels","area":"channels"},
+  {"path":"contact","area":"contact"},
+  {"path":"errorpage","area":"errorpage"},
+] as const;
+
+const HOME = { area: "notfound", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function BlocksScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  return (
+    <>
+      <ScreenHeader />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "index" ? (
+          <IndexPage />
+        ) : route.area === "about" ? (
+          <AboutPage />
+        ) : route.area === "aboutme" ? (
+          <AboutmePage />
+        ) : route.area === "accordion" ? (
+          <AccordionPage />
+        ) : route.area === "beforeafter" ? (
+          <BeforeafterPage />
+        ) : route.area === "bento" ? (
+          <BentoPage />
+        ) : route.area === "compare" ? (
+          <ComparePage />
+        ) : route.area === "credits" ? (
+          <CreditsPage />
+        ) : route.area === "cta" ? (
+          <CtaPage />
+        ) : route.area === "ctaproof" ? (
+          <CtaproofPage />
+        ) : route.area === "faq" ? (
+          <FaqPage />
+        ) : route.area === "faqsplit" ? (
+          <FaqsplitPage />
+        ) : route.area === "features" ? (
+          <FeaturesPage />
+        ) : route.area === "featureshowcase" ? (
+          <FeatureshowcasePage />
+        ) : route.area === "featuresplit" ? (
+          <FeaturesplitPage />
+        ) : route.area === "featuretabs" ? (
+          <FeaturetabsPage />
+        ) : route.area === "footer" ? (
+          <FooterPage />
+        ) : route.area === "footersplit" ? (
+          <FootersplitPage />
+        ) : route.area === "header" ? (
+          <HeaderPage />
+        ) : route.area === "hero" ? (
+          <HeroPage />
+        ) : route.area === "herosplit" ? (
+          <HerosplitPage />
+        ) : route.area === "iconwall" ? (
+          <IconwallPage />
+        ) : route.area === "jobs" ? (
+          <JobsPage />
+        ) : route.area === "logos" ? (
+          <LogosPage />
+        ) : route.area === "medialist" ? (
+          <MedialistPage />
+        ) : route.area === "megamenu" ? (
+          <MegamenuPage />
+        ) : route.area === "navbar" ? (
+          <NavbarPage />
+        ) : route.area === "pagehead" ? (
+          <PageheadPage />
+        ) : route.area === "pagetrail" ? (
+          <PagetrailPage />
+        ) : route.area === "photos" ? (
+          <PhotosPage />
+        ) : route.area === "plan" ? (
+          <PlanPage />
+        ) : route.area === "pricing" ? (
+          <PricingPage />
+        ) : route.area === "projects" ? (
+          <ProjectsPage />
+        ) : route.area === "proof" ? (
+          <ProofPage />
+        ) : route.area === "quotesplit" ? (
+          <QuotesplitPage />
+        ) : route.area === "sitemap" ? (
+          <SitemapPage />
+        ) : route.area === "stats" ? (
+          <StatsPage />
+        ) : route.area === "steps" ? (
+          <StepsPage />
+        ) : route.area === "sticky" ? (
+          <StickyPage />
+        ) : route.area === "team" ? (
+          <TeamPage />
+        ) : route.area === "templates" ? (
+          <TemplatesPage />
+        ) : route.area === "testimonials" ? (
+          <TestimonialsPage />
+        ) : route.area === "usage" ? (
+          <UsagePage />
+        ) : route.area === "videos" ? (
+          <VideosPage />
+        ) : route.area === "cart" ? (
+          <CartPage />
+        ) : route.area === "cartdrawer" ? (
+          <CartdrawerPage />
+        ) : route.area === "cartpage" ? (
+          <CartpagePage />
+        ) : route.area === "categories" ? (
+          <CategoriesPage />
+        ) : route.area === "checkout" ? (
+          <CheckoutPage />
+        ) : route.area === "delivery" ? (
+          <DeliveryPage />
+        ) : route.area === "locations" ? (
+          <LocationsPage />
+        ) : route.area === "orders" ? (
+          <OrdersPage />
+        ) : route.area === "product" ? (
+          <ProductPage />
+        ) : route.area === "productinfo" ? (
+          <ProductinfoPage />
+        ) : route.area === "products" ? (
+          <ProductsPage />
+        ) : route.area === "reviews" ? (
+          <ReviewsPage />
+        ) : route.area === "slots" ? (
+          <SlotsPage />
+        ) : route.area === "storehero" ? (
+          <StoreheroPage />
+        ) : route.area === "summary" ? (
+          <SummaryPage />
+        ) : route.area === "usp" ? (
+          <UspPage />
+        ) : route.area === "zones" ? (
+          <ZonesPage />
+        ) : route.area === "announcement" ? (
+          <AnnouncementPage />
+        ) : route.area === "cookie" ? (
+          <CookiePage />
+        ) : route.area === "newsletter" ? (
+          <NewsletterPage />
+        ) : route.area === "article" ? (
+          <ArticlePage />
+        ) : route.area === "postheader" ? (
+          <PostheaderPage />
+        ) : route.area === "posts" ? (
+          <PostsPage />
+        ) : route.area === "postshowcase" ? (
+          <PostshowcasePage />
+        ) : route.area === "postsplit" ? (
+          <PostsplitPage />
+        ) : route.area === "storytabs" ? (
+          <StorytabsPage />
+        ) : route.area === "timeline" ? (
+          <TimelinePage />
+        ) : route.area === "auth" ? (
+          <AuthPage />
+        ) : route.area === "authpage" ? (
+          <AuthpagePage />
+        ) : route.area === "profile" ? (
+          <ProfilePage />
+        ) : route.area === "wizard" ? (
+          <WizardPage />
+        ) : route.area === "activity" ? (
+          <ActivityPage />
+        ) : route.area === "bottomnav" ? (
+          <BottomnavPage />
+        ) : route.area === "chart" ? (
+          <ChartPage />
+        ) : route.area === "dashshell" ? (
+          <DashshellPage />
+        ) : route.area === "empty" ? (
+          <EmptyPage />
+        ) : route.area === "kanban" ? (
+          <KanbanPage />
+        ) : route.area === "metrics" ? (
+          <MetricsPage />
+        ) : route.area === "overview" ? (
+          <OverviewPage />
+        ) : route.area === "shell" ? (
+          <ShellPage />
+        ) : route.area === "sidenav" ? (
+          <SidenavPage />
+        ) : route.area === "skeleton" ? (
+          <SkeletonPage />
+        ) : route.area === "checklist" ? (
+          <ChecklistPage />
+        ) : route.area === "stepper" ? (
+          <StepperPage />
+        ) : route.area === "tour" ? (
+          <TourPage />
+        ) : route.area === "videomodal" ? (
+          <VideomodalPage />
+        ) : route.area === "channels" ? (
+          <ChannelsPage />
+        ) : route.area === "contact" ? (
+          <ContactPage />
+        ) : route.area === "errorpage" ? (
+          <ErrorpagePage />
+        ) : (
+          <NotfoundPage />
+        )}
+      </Block>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/AboutPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/AboutPage.tsx
new file mode 100644
index 0000000..c0786eb
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/AboutPage.tsx
@@ -0,0 +1,141 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The about page of BlocksScreen.
+
+import {
+  AboutCompany,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+
+export function AboutPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.about}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.about}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="about-split-label"
+            data-testid="variant"
+            data-block="about"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="about-split-label" data-testid="variant-label">
+              {ui.blocks.variants.about.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutCompany
+                id="about-split"
+                title={ui.company.about.title}
+                lead={ui.company.about.lead}
+                stats={stats}
+                values={values}
+                layout="split"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="about-stacked-label"
+            data-testid="variant"
+            data-block="about"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="about-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.about.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutCompany
+                id="about-stacked"
+                title={ui.company.about.title}
+                lead={ui.company.about.lead}
+                stats={stats}
+                values={values}
+                layout="stacked"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="about-muted-label"
+            data-testid="variant"
+            data-block="about"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="about-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.about.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutCompany
+                id="about-muted"
+                title={ui.company.about.title}
+                lead={ui.company.about.lead}
+                stats={stats}
+                values={values}
+                layout="split"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/AboutmePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/AboutmePage.tsx
new file mode 100644
index 0000000..8fab24a
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/AboutmePage.tsx
@@ -0,0 +1,179 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The aboutme page of BlocksScreen.
+
+import {
+  AboutMe,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Skill,
+  type Spec,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+
+const ABOUTME_ACTIONS = { mode: "two", cta: ui.company.aboutMe.cta, href: "#/work", secondary: ui.company.aboutMe.more, secondaryHref: "#/contact" } as const;
+
+export function AboutmePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.aboutme}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.aboutme}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-facts-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="facts"
+          >
+            <Title as={2} size="base" weight="bold" id="aboutme-facts-label" data-testid="variant-label">
+              {ui.blocks.variants.aboutme.facts}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-facts"
+                title={ui.company.aboutMe.title}
+                lead={ui.company.aboutMe.lead}
+                badge={ui.company.aboutMe.badge}
+                facts={profilefacts}
+                skills={skills}
+                labels={ui.company.aboutMe}
+                actions={ABOUTME_ACTIONS}
+                layout="facts"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.facts))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-factsEnd-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="factsEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="aboutme-factsEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.aboutme.factsEnd}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-factsEnd"
+                title={ui.company.aboutMe.title}
+                lead={ui.company.aboutMe.lead}
+                badge={ui.company.aboutMe.badge}
+                facts={profilefacts}
+                skills={skills}
+                labels={ui.company.aboutMe}
+                actions={ABOUTME_ACTIONS}
+                layout="facts"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.factsEnd))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-skills-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="skills"
+          >
+            <Title as={2} size="base" weight="bold" id="aboutme-skills-label" data-testid="variant-label">
+              {ui.blocks.variants.aboutme.skills}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-skills"
+                title={ui.company.aboutMe.title}
+                lead={ui.company.aboutMe.lead}
+                badge={ui.company.aboutMe.badge}
+                facts={profilefacts}
+                skills={skills}
+                labels={ui.company.aboutMe}
+                actions={ABOUTME_ACTIONS}
+                layout="skills"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skills))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-skillsMuted-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="skillsMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="aboutme-skillsMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.aboutme.skillsMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-skillsMuted"
+                title={ui.company.aboutMe.title}
+                lead={ui.company.aboutMe.lead}
+                badge={ui.company.aboutMe.badge}
+                facts={profilefacts}
+                skills={skills}
+                labels={ui.company.aboutMe}
+                actions={ABOUTME_ACTIONS}
+                layout="skills"
+                mediaSide="end"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skillsMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/AccordionPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/AccordionPage.tsx
new file mode 100644
index 0000000..b53a992
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/AccordionPage.tsx
@@ -0,0 +1,157 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The accordion page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureAccordion,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function AccordionPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.accordion}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.accordion}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-first-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="first"
+          >
+            <Title as={2} size="base" weight="bold" id="accordion-first-label" data-testid="variant-label">
+              {ui.blocks.variants.accordion.first}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-first"
+                title={ui.vibe.accordion.title}
+                features={features}
+                empty={ui.empty.features}
+                expand="first"
+                media="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-closed-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="closed"
+          >
+            <Title as={2} size="base" weight="bold" id="accordion-closed-label" data-testid="variant-label">
+              {ui.blocks.variants.accordion.closed}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-closed"
+                title={ui.vibe.accordion.title}
+                features={features}
+                empty={ui.empty.features}
+                expand="none"
+                media="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.closed))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-media-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="media"
+          >
+            <Title as={2} size="base" weight="bold" id="accordion-media-label" data-testid="variant-label">
+              {ui.blocks.variants.accordion.media}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-media"
+                title={ui.vibe.accordion.title}
+                features={features}
+                empty={ui.empty.features}
+                expand="first"
+                media="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-muted-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="accordion-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.accordion.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-muted"
+                title={ui.vibe.accordion.title}
+                features={features}
+                empty={ui.empty.features}
+                expand="first"
+                media="none"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ActivityPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ActivityPage.tsx
new file mode 100644
index 0000000..452b2be
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ActivityPage.tsx
@@ -0,0 +1,163 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The activity page of BlocksScreen.
+
+import {
+  ActivityFeed,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+
+export function ActivityPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.activity}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.activity}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-timeline-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="timeline"
+          >
+            <Title as={2} size="base" weight="bold" id="activity-timeline-label" data-testid="variant-label">
+              {ui.blocks.variants.activity.timeline}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-timeline"
+                title={ui.dashboard.activity.title}
+                text={ui.dashboard.activity.text}
+                events={activity}
+                empty={ui.empty.activity}
+                layout="timeline"
+                density="default"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-list-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="activity-list-label" data-testid="variant-label">
+              {ui.blocks.variants.activity.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-list"
+                title={ui.dashboard.activity.title}
+                text={ui.dashboard.activity.text}
+                events={activity}
+                empty={ui.empty.activity}
+                layout="list"
+                density="default"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-compact-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="activity-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.activity.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-compact"
+                title={ui.dashboard.activity.title}
+                text={ui.dashboard.activity.text}
+                events={activity}
+                empty={ui.empty.activity}
+                layout="list"
+                density="compact"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-muted-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="activity-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.activity.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-muted"
+                title={ui.dashboard.activity.title}
+                text={ui.dashboard.activity.text}
+                events={activity}
+                empty={ui.empty.activity}
+                layout="timeline"
+                density="default"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/AnnouncementPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/AnnouncementPage.tsx
new file mode 100644
index 0000000..8ad271a
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/AnnouncementPage.tsx
@@ -0,0 +1,277 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The announcement page of BlocksScreen.
+
+import {
+  AnnouncementBar,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function AnnouncementPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+              {ui.blocks.themes.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.announcement}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.announcement}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-bar-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.bar}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="default"
+                layout="center"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-badge-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="badge"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-badge-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.badge}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="muted"
+                layout="center"
+                dismiss="hide"
+                badge="show"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-bottom-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="bottom"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-bottom-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.bottom}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="default"
+                layout="split"
+                dismiss="show"
+                badge="none"
+                position="bottom"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-muted-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="muted"
+                layout="center"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.muted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-split-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-split-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="muted"
+                layout="split"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-dismissible-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="dismissible"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-dismissible-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.dismissible}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.promo.announcement.text}
+                cta={ui.promo.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="default"
+                layout="center"
+                dismiss="show"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-shop-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="shop"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-shop-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.shop}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.cases.shop.announcement.text}
+                cta={ui.cases.shop.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="muted"
+                layout="center"
+                dismiss="show"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-agency-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="agency"
+          >
+            <Title as={2} size="base" weight="bold" id="announcement-agency-label" data-testid="variant-label">
+              {ui.blocks.variants.announcement.agency}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                label={ui.promo.announcement.label}
+                text={ui.cases.agency.announcement.text}
+                cta={ui.cases.agency.announcement.cta}
+                ctaHref="#/pricing"
+                dismissLabel={ui.promo.announcement.dismiss}
+                badgeLabel={ui.promo.announcement.badge}
+                tone="default"
+                layout="split"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.agency))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ArticlePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ArticlePage.tsx
new file mode 100644
index 0000000..64e0d15
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ArticlePage.tsx
@@ -0,0 +1,157 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The article page of BlocksScreen.
+
+import {
+  ArticleBody,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Section,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function ArticlePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.article}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.article}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-column-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="column"
+          >
+            <Title as={2} size="base" weight="bold" id="article-column-label" data-testid="variant-label">
+              {ui.blocks.variants.article.column}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-column"
+                title={ui.vibe.article.title}
+                sections={article}
+                empty={ui.empty.sections}
+                tocTitle={ui.vibe.article.toc}
+                layout="column"
+                quotes="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-toc-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="toc"
+          >
+            <Title as={2} size="base" weight="bold" id="article-toc-label" data-testid="variant-label">
+              {ui.blocks.variants.article.toc}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-toc"
+                title={ui.vibe.article.title}
+                sections={article}
+                empty={ui.empty.sections}
+                tocTitle={ui.vibe.article.toc}
+                layout="toc"
+                quotes="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-plain-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="article-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.article.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-plain"
+                title={ui.vibe.article.title}
+                sections={article}
+                empty={ui.empty.sections}
+                tocTitle={ui.vibe.article.toc}
+                layout="column"
+                quotes="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-muted-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="article-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.article.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-muted"
+                title={ui.vibe.article.title}
+                sections={article}
+                empty={ui.empty.sections}
+                tocTitle={ui.vibe.article.toc}
+                layout="column"
+                quotes="show"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/AuthPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/AuthPage.tsx
new file mode 100644
index 0000000..44b5f53
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/AuthPage.tsx
@@ -0,0 +1,301 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The auth page of BlocksScreen.
+
+import {
+  AuthCard,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function AuthPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+              {ui.blocks.themes.account.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.auth}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.auth}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-signin-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="signin"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-signin-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.signin}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-signin"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchText={ui.auth.signin.switchText}
+                  switchLink={ui.auth.signin.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signin"
+                  layout="card"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-magic-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="magic"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-magic-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.magic}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-magic"
+                  title={ui.auth.magic.title}
+                  text={ui.auth.magic.text}
+                  submit={ui.auth.magic.submit}
+                  switchText={ui.auth.magic.switchText}
+                  switchLink={ui.auth.magic.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="magic"
+                  layout="card"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.magic))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-socialFirst-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="socialFirst"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-socialFirst-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.socialFirst}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-socialFirst"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchText={ui.auth.signin.switchText}
+                  switchLink={ui.auth.signin.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signin"
+                  layout="card"
+                  social="first"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.socialFirst))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-signup-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="signup"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-signup-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.signup}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-signup"
+                  title={ui.auth.signup.title}
+                  text={ui.auth.signup.text}
+                  submit={ui.auth.signup.submit}
+                  switchText={ui.auth.signup.switchText}
+                  switchLink={ui.auth.signup.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signup"
+                  layout="card"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signup))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-reset-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="reset"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-reset-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.reset}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-reset"
+                  title={ui.auth.reset.title}
+                  text={ui.auth.reset.text}
+                  submit={ui.auth.reset.submit}
+                  switchText={ui.auth.reset.switchText}
+                  switchLink={ui.auth.reset.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="reset"
+                  layout="card"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.reset))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-plain-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-plain"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchText={ui.auth.signin.switchText}
+                  switchLink={ui.auth.signin.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signin"
+                  layout="plain"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.plain))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-social-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="social"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-social-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.social}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-social"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchText={ui.auth.signin.switchText}
+                  switchLink={ui.auth.signin.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signin"
+                  layout="card"
+                  social="show"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-signupSocial-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="signupSocial"
+          >
+            <Title as={2} size="base" weight="bold" id="auth-signupSocial-label" data-testid="variant-label">
+              {ui.blocks.variants.auth.signupSocial}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-signupSocial"
+                  title={ui.auth.signup.title}
+                  text={ui.auth.signup.text}
+                  submit={ui.auth.signup.submit}
+                  switchText={ui.auth.signup.switchText}
+                  switchLink={ui.auth.signup.switchLink}
+                  switchHref="#/"
+                  labels={ui.auth.labels}
+                  mode="signup"
+                  layout="plain"
+                  social="show"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))}
+                />
+              </Box>
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/AuthpagePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/AuthpagePage.tsx
new file mode 100644
index 0000000..b26826d
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/AuthpagePage.tsx
@@ -0,0 +1,321 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The authpage page of BlocksScreen.
+
+import {
+  AuthLayout,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const AUTHPAGE_SWITCH_TO = { text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" } as const;
+
+export function AuthpagePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+              {ui.blocks.themes.account.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.authpage}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.authpage}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-split-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-split-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-split"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="split"
+                side="end"
+                mode="signin"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-splitStart-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="splitStart"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-splitStart-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.splitStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-splitStart"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="split"
+                side="start"
+                mode="signin"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.splitStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-centered-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.centered}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-centered"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="centered"
+                side="end"
+                mode="signin"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-minimal-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.minimal}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-minimal"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="minimal"
+                side="end"
+                mode="signin"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.minimal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-signup-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="signup"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-signup-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.signup}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-signup"
+                title={ui.auth.signup.title}
+                text={ui.auth.signup.text}
+                submit={ui.auth.signup.submit}
+                switchTo={{
+                  ...AUTHPAGE_SWITCH_TO,
+                  text: ui.auth.signup.switchText,
+                  link: ui.auth.signup.switchLink,
+                }}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="split"
+                side="end"
+                mode="signup"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.signup))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-reset-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="reset"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-reset-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.reset}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-reset"
+                title={ui.auth.reset.title}
+                text={ui.auth.reset.text}
+                submit={ui.auth.reset.submit}
+                switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink }}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="centered"
+                side="end"
+                mode="reset"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.reset))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-magic-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="magic"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-magic-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.magic}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-magic"
+                title={ui.auth.magic.title}
+                text={ui.auth.magic.text}
+                submit={ui.auth.magic.submit}
+                switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink }}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="minimal"
+                side="end"
+                mode="magic"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.magic))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-social-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="social"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-social-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.social}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-social"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="split"
+                side="end"
+                mode="signin"
+                social="show"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.social))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-socialFirst-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="socialFirst"
+          >
+            <Title as={2} size="base" weight="bold" id="authpage-socialFirst-label" data-testid="variant-label">
+              {ui.blocks.variants.authpage.socialFirst}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-socialFirst"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchTo={AUTHPAGE_SWITCH_TO}
+                labels={ui.auth.labels}
+                visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                layout="centered"
+                side="end"
+                mode="signin"
+                social="first"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.socialFirst))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/BeforeafterPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/BeforeafterPage.tsx
new file mode 100644
index 0000000..abb11aa
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/BeforeafterPage.tsx
@@ -0,0 +1,161 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The beforeafter page of BlocksScreen.
+
+import {
+  BeforeAfter,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Contrast,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+
+export function BeforeafterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.beforeafter}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.beforeafter}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-cards-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="beforeafter-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.beforeafter.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-cards"
+                title={ui.vibe.beforeafter.title}
+                points={beforeafter}
+                empty={ui.empty.points}
+                labels={ui.vibe.beforeafter.labels}
+                layout="cards"
+                icons="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-rows-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="rows"
+          >
+            <Title as={2} size="base" weight="bold" id="beforeafter-rows-label" data-testid="variant-label">
+              {ui.blocks.variants.beforeafter.rows}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-rows"
+                title={ui.vibe.beforeafter.title}
+                points={beforeafter}
+                empty={ui.empty.points}
+                labels={ui.vibe.beforeafter.labels}
+                layout="rows"
+                icons="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-plain-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="beforeafter-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.beforeafter.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-plain"
+                title={ui.vibe.beforeafter.title}
+                points={beforeafter}
+                empty={ui.empty.points}
+                labels={ui.vibe.beforeafter.labels}
+                layout="cards"
+                icons="hide"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-muted-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="beforeafter-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.beforeafter.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-muted"
+                title={ui.vibe.beforeafter.title}
+                points={beforeafter}
+                empty={ui.empty.points}
+                labels={ui.vibe.beforeafter.labels}
+                layout="cards"
+                icons="show"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/BentoPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/BentoPage.tsx
new file mode 100644
index 0000000..5de5f01
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/BentoPage.tsx
@@ -0,0 +1,157 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The bento page of BlocksScreen.
+
+import {
+  BentoGrid,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Tile,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+
+export function BentoPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.bento}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.bento}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-bento-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="bento"
+          >
+            <Title as={2} size="base" weight="bold" id="bento-bento-label" data-testid="variant-label">
+              {ui.blocks.variants.bento.bento}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-bento"
+                title={ui.vibe.bento.title}
+                tiles={bento}
+                empty={ui.empty.tiles}
+                layout="bento"
+                media="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-even-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="even"
+          >
+            <Title as={2} size="base" weight="bold" id="bento-even-label" data-testid="variant-label">
+              {ui.blocks.variants.bento.even}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-even"
+                title={ui.vibe.bento.title}
+                tiles={bento}
+                empty={ui.empty.tiles}
+                layout="even"
+                media="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.even))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-images-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="images"
+          >
+            <Title as={2} size="base" weight="bold" id="bento-images-label" data-testid="variant-label">
+              {ui.blocks.variants.bento.images}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-images"
+                title={ui.vibe.bento.title}
+                tiles={bento}
+                empty={ui.empty.tiles}
+                layout="bento"
+                media="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-muted-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="bento-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.bento.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-muted"
+                title={ui.vibe.bento.title}
+                tiles={bento}
+                empty={ui.empty.tiles}
+                layout="bento"
+                media="none"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/BottomnavPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/BottomnavPage.tsx
new file mode 100644
index 0000000..8c7b540
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/BottomnavPage.tsx
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The bottomnav page of BlocksScreen.
+
+import {
+  Block,
+  BottomNav,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+
+export function BottomnavPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.bottomnav}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.bottomnav}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-labels-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="labels"
+          >
+            <Title as={2} size="base" weight="bold" id="bottomnav-labels-label" data-testid="variant-label">
+              {ui.blocks.variants.bottomnav.labels}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                label={ui.vibe.bottom.label}
+                tabs={tabs}
+                current="tab-explore"
+                labels="show"
+                position="static"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-icons-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="bottomnav-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.bottomnav.icons}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                label={ui.vibe.bottom.label}
+                tabs={tabs}
+                current="tab-explore"
+                labels="hide"
+                position="static"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-sticky-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="sticky"
+          >
+            <Title as={2} size="base" weight="bold" id="bottomnav-sticky-label" data-testid="variant-label">
+              {ui.blocks.variants.bottomnav.sticky}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                label={ui.vibe.bottom.label}
+                tabs={tabs}
+                current="tab-explore"
+                labels="show"
+                position="sticky"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.sticky))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-muted-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="bottomnav-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.bottomnav.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                label={ui.vibe.bottom.label}
+                tabs={tabs}
+                current="tab-explore"
+                labels="show"
+                position="static"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/CartPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/CartPage.tsx
new file mode 100644
index 0000000..24c990c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/CartPage.tsx
@@ -0,0 +1,168 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cart page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  CartList,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+
+export function CartPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cart}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cart}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-table-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="table"
+          >
+            <Title as={2} size="base" weight="bold" id="cart-table-label" data-testid="variant-label">
+              {ui.blocks.variants.cart.table}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-table"
+                title={ui.commerce.cart.title}
+                lines={cart}
+                empty={ui.empty.cart}
+                labels={ui.commerce.cart}
+                layout="table"
+                media="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-cards-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="cart-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.cart.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-cards"
+                title={ui.commerce.cart.title}
+                lines={cart}
+                empty={ui.empty.cart}
+                labels={ui.commerce.cart}
+                layout="cards"
+                media="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-tableCompact-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="tableCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="cart-tableCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.cart.tableCompact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-tableCompact"
+                title={ui.commerce.cart.title}
+                lines={cart}
+                empty={ui.empty.cart}
+                labels={ui.commerce.cart}
+                layout="table"
+                media="none"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.tableCompact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-cardsPlain-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="cardsPlain"
+          >
+            <Title as={2} size="base" weight="bold" id="cart-cardsPlain-label" data-testid="variant-label">
+              {ui.blocks.variants.cart.cardsPlain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-cardsPlain"
+                title={ui.commerce.cart.title}
+                lines={cart}
+                empty={ui.empty.cart}
+                labels={ui.commerce.cart}
+                layout="cards"
+                media="none"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cardsPlain))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/CartdrawerPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/CartdrawerPage.tsx
new file mode 100644
index 0000000..8a71ca3
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/CartdrawerPage.tsx
@@ -0,0 +1,145 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cartdrawer page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  CartDrawer,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+
+export function CartdrawerPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cartdrawer}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cartdrawer}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartdrawer-filled-label"
+            data-testid="variant"
+            data-block="cartdrawer"
+            data-variant="filled"
+          >
+            <Title as={2} size="base" weight="bold" id="cartdrawer-filled-label" data-testid="variant-label">
+              {ui.blocks.variants.cartdrawer.filled}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartDrawer
+                id="cartdrawer-filled"
+                lines={cart}
+                rows={summary}
+                labels={ui.commerce.cart}
+                drawer={ui.commerce.drawer}
+                state="filled"
+                media="image"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartdrawer-compact-label"
+            data-testid="variant"
+            data-block="cartdrawer"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="cartdrawer-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.cartdrawer.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartDrawer
+                id="cartdrawer-compact"
+                lines={cart}
+                rows={summary}
+                labels={ui.commerce.cart}
+                drawer={ui.commerce.drawer}
+                state="filled"
+                media="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartdrawer-empty-label"
+            data-testid="variant"
+            data-block="cartdrawer"
+            data-variant="empty"
+          >
+            <Title as={2} size="base" weight="bold" id="cartdrawer-empty-label" data-testid="variant-label">
+              {ui.blocks.variants.cartdrawer.empty}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartDrawer
+                id="cartdrawer-empty"
+                lines={cart}
+                rows={summary}
+                labels={ui.commerce.cart}
+                drawer={ui.commerce.drawer}
+                state="empty"
+                media="image"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.empty))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/CartpagePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/CartpagePage.tsx
new file mode 100644
index 0000000..7ed766f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/CartpagePage.tsx
@@ -0,0 +1,164 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cartpage page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ShoppingCart,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+
+export function CartpagePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cartpage}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cartpage}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartpage-split-label"
+            data-testid="variant"
+            data-block="cartpage"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="cartpage-split-label" data-testid="variant-label">
+              {ui.blocks.variants.cartpage.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ShoppingCart
+                id="cartpage-split"
+                title={ui.commerce.cartPage.title}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.cart}
+                totals={ui.commerce.totals}
+                actions={ui.commerce.cartPage}
+                layout="split"
+                promo="show"
+                progress="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartpage-stacked-label"
+            data-testid="variant"
+            data-block="cartpage"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="cartpage-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.cartpage.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ShoppingCart
+                id="cartpage-stacked"
+                title={ui.commerce.cartPage.title}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.cart}
+                totals={ui.commerce.totals}
+                actions={ui.commerce.cartPage}
+                layout="stacked"
+                promo="show"
+                progress="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartpage-plain-label"
+            data-testid="variant"
+            data-block="cartpage"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="cartpage-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.cartpage.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ShoppingCart
+                id="cartpage-plain"
+                title={ui.commerce.cartPage.title}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.cart}
+                totals={ui.commerce.totals}
+                actions={ui.commerce.cartPage}
+                layout="split"
+                promo="hide"
+                progress="hide"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.plain))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/CategoriesPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/CategoriesPage.tsx
new file mode 100644
index 0000000..4202744
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/CategoriesPage.tsx
@@ -0,0 +1,235 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The categories page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+
+export function CategoriesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.categories}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.categories}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-chips-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="chips"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-chips-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.chips}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="chips"
+                count="show"
+                icon="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-bar-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.bar}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="bar"
+                count="show"
+                icon="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-sidebar-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="sidebar"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-sidebar-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.sidebar}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="sidebar"
+                count="show"
+                icon="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-chipsPlain-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="chipsPlain"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-chipsPlain-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.chipsPlain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="chips"
+                count="hide"
+                icon="hide"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chipsPlain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-barCompact-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="barCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-barCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.barCompact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="bar"
+                count="show"
+                icon="hide"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.barCompact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-tiles-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="tiles"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-tiles-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.tiles}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="tiles"
+                count="show"
+                icon="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.tiles))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-toolbar-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="toolbar"
+          >
+            <Title as={2} size="base" weight="bold" id="categories-toolbar-label" data-testid="variant-label">
+              {ui.blocks.variants.categories.toolbar}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                label={ui.commerce.nav.label}
+                categories={categories}
+                current="category-all"
+                tools={ui.commerce.tools}
+                layout="toolbar"
+                count="show"
+                icon="hide"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.toolbar))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ChannelsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ChannelsPage.tsx
new file mode 100644
index 0000000..ce7554e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ChannelsPage.tsx
@@ -0,0 +1,161 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The channels page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  SupportChannels,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function ChannelsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+              {ui.blocks.themes.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.channels}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.channels}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-grid-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="channels-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.channels.grid}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-grid"
+                title={ui.support.channels.title}
+                channels={channels}
+                empty={ui.empty.channels}
+                open={ui.support.channels.open}
+                layout="grid"
+                cols="1-3"
+                action="link"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-twoUp-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="twoUp"
+          >
+            <Title as={2} size="base" weight="bold" id="channels-twoUp-label" data-testid="variant-label">
+              {ui.blocks.variants.channels.twoUp}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-twoUp"
+                title={ui.support.channels.title}
+                channels={channels}
+                empty={ui.empty.channels}
+                open={ui.support.channels.open}
+                layout="grid"
+                cols="1-2"
+                action="link"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-list-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="channels-list-label" data-testid="variant-label">
+              {ui.blocks.variants.channels.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-list"
+                title={ui.support.channels.title}
+                channels={channels}
+                empty={ui.empty.channels}
+                open={ui.support.channels.open}
+                layout="list"
+                cols="1-3"
+                action="link"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-plain-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="channels-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.channels.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-plain"
+                title={ui.support.channels.title}
+                channels={channels}
+                empty={ui.empty.channels}
+                open={ui.support.channels.open}
+                layout="grid"
+                cols="1-3"
+                action="none"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.plain))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ChartPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ChartPage.tsx
new file mode 100644
index 0000000..289e347
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ChartPage.tsx
@@ -0,0 +1,165 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The chart page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  ChartPanel,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Point,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+
+export function ChartPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.chart}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.chart}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-bars-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="bars"
+          >
+            <Title as={2} size="base" weight="bold" id="chart-bars-label" data-testid="variant-label">
+              {ui.blocks.variants.chart.bars}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-bars"
+                title={ui.dashboard.chart.title}
+                text={ui.dashboard.chart.text}
+                series={series}
+                empty={ui.empty.series}
+                summary={ui.dashboard.chart.summary}
+                percent={ui.dashboard.chart.percent}
+                chart="bars"
+                size="default"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-short-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="short"
+          >
+            <Title as={2} size="base" weight="bold" id="chart-short-label" data-testid="variant-label">
+              {ui.blocks.variants.chart.short}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-short"
+                title={ui.dashboard.chart.title}
+                text={ui.dashboard.chart.text}
+                series={series}
+                empty={ui.empty.series}
+                summary={ui.dashboard.chart.summary}
+                percent={ui.dashboard.chart.percent}
+                chart="bars"
+                size="compact"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.short))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-meters-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="meters"
+          >
+            <Title as={2} size="base" weight="bold" id="chart-meters-label" data-testid="variant-label">
+              {ui.blocks.variants.chart.meters}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-meters"
+                title={ui.dashboard.chart.title}
+                text={ui.dashboard.chart.text}
+                series={series}
+                empty={ui.empty.series}
+                summary={ui.dashboard.chart.summary}
+                percent={ui.dashboard.chart.percent}
+                chart="meters"
+                size="default"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-muted-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="chart-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.chart.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-muted"
+                title={ui.dashboard.chart.title}
+                text={ui.dashboard.chart.text}
+                series={series}
+                empty={ui.empty.series}
+                summary={ui.dashboard.chart.summary}
+                percent={ui.dashboard.chart.percent}
+                chart="meters"
+                size="compact"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ChecklistPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ChecklistPage.tsx
new file mode 100644
index 0000000..ddeff87
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ChecklistPage.tsx
@@ -0,0 +1,249 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The checklist page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Checklist,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Task,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+
+export function ChecklistPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+              {ui.blocks.themes.onboarding.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.checklist}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.checklist}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-card-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-card-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.card}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-card"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="bar"
+                marker="check"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-expand-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="expand"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-expand-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.expand}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-expand"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="bar"
+                marker="check"
+                detail="expand"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-plain-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-plain"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="plain"
+                progress="bar"
+                marker="check"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-text-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="text"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-text-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.text}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-text"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="text"
+                marker="check"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-none-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="none"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-none-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.none}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-none"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="plain"
+                progress="none"
+                marker="check"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.none))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-numbered-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="numbered"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-numbered-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.numbered}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-numbered"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="bar"
+                marker="number"
+                detail="always"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-muted-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="checklist-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.checklist.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-muted"
+                title={ui.onboarding.checklist.title}
+                tasks={checklist}
+                empty={ui.empty.tasks}
+                progressLabel={ui.onboarding.checklist.progress}
+                layout="card"
+                progress="text"
+                marker="number"
+                detail="always"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/CheckoutPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/CheckoutPage.tsx
new file mode 100644
index 0000000..eb88eed
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/CheckoutPage.tsx
@@ -0,0 +1,172 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The checkout page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  CheckoutForm,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Day,
+  type Payment,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+
+export function CheckoutPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.checkout}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.checkout}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checkout-cards-label"
+            data-testid="variant"
+            data-block="checkout"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="checkout-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.checkout.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CheckoutForm
+                id="checkout-cards"
+                title={ui.commerce.checkout.title}
+                days={days}
+                payments={payments}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.checkout}
+                totals={ui.commerce.totals}
+                layout="cards"
+                summary="aside"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checkout-numbered-label"
+            data-testid="variant"
+            data-block="checkout"
+            data-variant="numbered"
+          >
+            <Title as={2} size="base" weight="bold" id="checkout-numbered-label" data-testid="variant-label">
+              {ui.blocks.variants.checkout.numbered}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CheckoutForm
+                id="checkout-numbered"
+                title={ui.commerce.checkout.title}
+                days={days}
+                payments={payments}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.checkout}
+                totals={ui.commerce.totals}
+                layout="numbered"
+                summary="aside"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checkout-noSummary-label"
+            data-testid="variant"
+            data-block="checkout"
+            data-variant="noSummary"
+          >
+            <Title as={2} size="base" weight="bold" id="checkout-noSummary-label" data-testid="variant-label">
+              {ui.blocks.variants.checkout.noSummary}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CheckoutForm
+                id="checkout-noSummary"
+                title={ui.commerce.checkout.title}
+                days={days}
+                payments={payments}
+                lines={cart}
+                rows={summary}
+                promos={promos}
+                labels={ui.commerce.checkout}
+                totals={ui.commerce.totals}
+                layout="cards"
+                summary="none"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.noSummary))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ComparePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ComparePage.tsx
new file mode 100644
index 0000000..e88130e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ComparePage.tsx
@@ -0,0 +1,160 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The compare page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  ComparisonTable,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+
+export function ComparePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.compare}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.compare}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-plans-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="plans"
+          >
+            <Title as={2} size="base" weight="bold" id="compare-plans-label" data-testid="variant-label">
+              {ui.blocks.variants.compare.plans}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-plans"
+                title={ui.vibe.compare.title}
+                rows={compare}
+                empty={ui.empty.rows}
+                labels={ui.vibe.compare.labels}
+                highlight="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-highlight-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="highlight"
+          >
+            <Title as={2} size="base" weight="bold" id="compare-highlight-label" data-testid="variant-label">
+              {ui.blocks.variants.compare.highlight}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-highlight"
+                title={ui.vibe.compare.title}
+                rows={compare}
+                empty={ui.empty.rows}
+                labels={ui.vibe.compare.labels}
+                highlight="middle"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-rivals-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="rivals"
+          >
+            <Title as={2} size="base" weight="bold" id="compare-rivals-label" data-testid="variant-label">
+              {ui.blocks.variants.compare.rivals}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-rivals"
+                title={ui.vibe.rivals.title}
+                rows={rivals}
+                empty={ui.empty.rows}
+                labels={ui.vibe.rivals.labels}
+                highlight="middle"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-muted-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="compare-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.compare.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-muted"
+                title={ui.vibe.compare.title}
+                rows={compare}
+                empty={ui.empty.rows}
+                labels={ui.vibe.compare.labels}
+                highlight="none"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ContactPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ContactPage.tsx
new file mode 100644
index 0000000..384ed36
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ContactPage.tsx
@@ -0,0 +1,227 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The contact page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  ContactForm,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function ContactPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+              {ui.blocks.themes.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.contact}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.contact}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-single-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="single"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-single-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.single}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-single"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="single"
+                fields="full"
+                terms="hide"
+                page="section"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-page-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="page"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-page-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.page}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-page"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="single"
+                fields="short"
+                terms="hide"
+                page="full"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.page))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-short-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="short"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-short-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.short}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-short"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="single"
+                fields="short"
+                terms="hide"
+                page="section"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.short))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-split-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-split-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-split"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="split"
+                fields="full"
+                terms="hide"
+                page="section"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-consent-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="consent"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-consent-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.consent}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-consent"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="single"
+                fields="full"
+                terms="show"
+                page="section"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-muted-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="contact-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.contact.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-muted"
+                title={ui.support.contact.title}
+                text={ui.support.contact.text}
+                labels={ui.support.contact.labels}
+                details={channels}
+                layout="split"
+                fields="short"
+                terms="show"
+                page="section"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/CookiePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/CookiePage.tsx
new file mode 100644
index 0000000..7a78102
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/CookiePage.tsx
@@ -0,0 +1,153 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cookie page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CookieBanner,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function CookiePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+              {ui.blocks.themes.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cookie}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cookie}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-bar-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="cookie-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.cookie.bar}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-bar"
+                title={ui.promo.cookie.title}
+                text={ui.promo.cookie.text}
+                accept={ui.promo.cookie.accept}
+                decline={ui.promo.cookie.decline}
+                settings={ui.promo.cookie.settings}
+                layout="bar"
+                actions="two"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-card-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="cookie-card-label" data-testid="variant-label">
+              {ui.blocks.variants.cookie.card}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-card"
+                title={ui.promo.cookie.title}
+                text={ui.promo.cookie.text}
+                accept={ui.promo.cookie.accept}
+                decline={ui.promo.cookie.decline}
+                settings={ui.promo.cookie.settings}
+                layout="card"
+                actions="two"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-settings-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="settings"
+          >
+            <Title as={2} size="base" weight="bold" id="cookie-settings-label" data-testid="variant-label">
+              {ui.blocks.variants.cookie.settings}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-settings"
+                title={ui.promo.cookie.title}
+                text={ui.promo.cookie.text}
+                accept={ui.promo.cookie.accept}
+                decline={ui.promo.cookie.decline}
+                settings={ui.promo.cookie.settings}
+                layout="bar"
+                actions="three"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-muted-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="cookie-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.cookie.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-muted"
+                title={ui.promo.cookie.title}
+                text={ui.promo.cookie.text}
+                accept={ui.promo.cookie.accept}
+                decline={ui.promo.cookie.decline}
+                settings={ui.promo.cookie.settings}
+                layout="card"
+                actions="three"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/CreditsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/CreditsPage.tsx
new file mode 100644
index 0000000..6be7211
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/CreditsPage.tsx
@@ -0,0 +1,172 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The credits page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CreditPacks,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Pack,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+const CREDITS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "credits": "metadata.credits.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "badge": "metadata.badge.value",
+} as const;
+
+const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+
+export function CreditsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.credits}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.credits}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-tiles4-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="tiles4"
+          >
+            <Title as={2} size="base" weight="bold" id="credits-tiles4-label" data-testid="variant-label">
+              {ui.blocks.variants.credits.tiles4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-tiles4"
+                title={ui.vibe.credits.title}
+                packs={credits}
+                empty={ui.empty.packs}
+                badges={ui.vibe.credits.badges}
+                buy={ui.vibe.credits.buy}
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-tiles2-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="tiles2"
+          >
+            <Title as={2} size="base" weight="bold" id="credits-tiles2-label" data-testid="variant-label">
+              {ui.blocks.variants.credits.tiles2}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-tiles2"
+                title={ui.vibe.credits.title}
+                packs={credits}
+                empty={ui.empty.packs}
+                badges={ui.vibe.credits.badges}
+                buy={ui.vibe.credits.buy}
+                cols="2"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-rows-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="rows"
+          >
+            <Title as={2} size="base" weight="bold" id="credits-rows-label" data-testid="variant-label">
+              {ui.blocks.variants.credits.rows}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-rows"
+                title={ui.vibe.credits.title}
+                packs={credits}
+                empty={ui.empty.packs}
+                badges={ui.vibe.credits.badges}
+                buy={ui.vibe.credits.buy}
+                cols="4"
+                item="row"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-muted-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="credits-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.credits.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-muted"
+                title={ui.vibe.credits.title}
+                packs={credits}
+                empty={ui.empty.packs}
+                badges={ui.vibe.credits.badges}
+                buy={ui.vibe.credits.buy}
+                cols="4"
+                item="tile"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/CtaPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/CtaPage.tsx
new file mode 100644
index 0000000..0ec9ecf
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/CtaPage.tsx
@@ -0,0 +1,365 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The cta page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const CTA_ACTIONS = {
+  cta: ui.site.home.ctaButton,
+  href: "#/pricing",
+  secondary: ui.site.home.ctaSecondary,
+  secondaryHref: "#/",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+
+export function CtaPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.cta}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.cta}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-card-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-card-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.card}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-card"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="card"
+                tone="muted"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-banner-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="banner"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-banner-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.banner}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-banner"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="banner"
+                tone="muted"
+                proof="none"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.banner))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-row-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-row-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.row}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-row"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="row"
+                tone="muted"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-form-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="form"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-form-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.form}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-form"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "form" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="band"
+                tone="muted"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-quote-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="quote"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-quote-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.quote}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-quote"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="band"
+                tone="muted"
+                proof="quote"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-band-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="band"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-band-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.band}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-band"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="band"
+                tone="muted"
+                proof="none"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-split-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-split-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-split"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "two" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="split"
+                tone="default"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-compact-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-compact"
+                title={ui.site.home.ctaTitle}
+                text={ui.site.home.ctaText}
+                actions={{ ...CTA_ACTIONS, mode: "one" }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="card"
+                tone="muted"
+                proof="none"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-saas-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="saas"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-saas-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.saas}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-saas"
+                title={ui.cases.saas.cta.title}
+                text={ui.cases.saas.cta.text}
+                actions={{
+                  ...CTA_ACTIONS,
+                  cta: ui.cases.saas.cta.cta,
+                  secondary: ui.cases.saas.cta.secondary,
+                  mode: "two",
+                }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="band"
+                tone="muted"
+                proof="none"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-shop-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="shop"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-shop-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.shop}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-shop"
+                title={ui.cases.shop.cta.title}
+                text={ui.cases.shop.cta.text}
+                actions={{
+                  ...CTA_ACTIONS,
+                  cta: ui.cases.shop.cta.cta,
+                  secondary: ui.cases.shop.cta.secondary,
+                  mode: "one",
+                }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="split"
+                tone="default"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-agency-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="agency"
+          >
+            <Title as={2} size="base" weight="bold" id="cta-agency-label" data-testid="variant-label">
+              {ui.blocks.variants.cta.agency}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-agency"
+                title={ui.cases.agency.cta.title}
+                text={ui.cases.agency.cta.text}
+                actions={{
+                  ...CTA_ACTIONS,
+                  cta: ui.cases.agency.cta.cta,
+                  secondary: ui.cases.agency.cta.secondary,
+                  mode: "two",
+                }}
+                quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                layout="card"
+                tone="muted"
+                proof="none"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/CtaproofPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/CtaproofPage.tsx
new file mode 100644
index 0000000..b47dac4
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/CtaproofPage.tsx
@@ -0,0 +1,287 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The ctaproof page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaProof,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Logo,
+  type Stat,
+  type Zone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+const CTAPROOF_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.ctaProof.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.ctaProof.secondary,
+  secondaryHref: "#/contact",
+} as const;
+const CTAPROOF_CONTENT = { logos, features, stats, zones } as const;
+
+export function CtaproofPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.ctaproof}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.ctaproof}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-centerLogos-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="centerLogos"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-centerLogos-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.centerLogos}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-centerLogos"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="center"
+                proof="logos"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerLogos))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-centerFeatures-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="centerFeatures"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-centerFeatures-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.centerFeatures}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-centerFeatures"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="center"
+                proof="features"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerFeatures))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-centerStats-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="centerStats"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-centerStats-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.centerStats}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-centerStats"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="center"
+                proof="stats"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerStats))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitStats-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitStats"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-splitStats-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.splitStats}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitStats"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="split"
+                proof="stats"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitStatsStart-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitStatsStart"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-splitStatsStart-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.splitStatsStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitStatsStart"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="split"
+                proof="stats"
+                mediaSide="start"
+                tone="default"
+                note={ui.marketing.ctaProof.note}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStatsStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitRows-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitRows"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-splitRows-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.splitRows}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitRows"
+                title={ui.marketing.ctaProof.title}
+                lead={ui.marketing.ctaProof.lead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="split"
+                proof="rows"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitRows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitZones-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitZones"
+          >
+            <Title as={2} size="base" weight="bold" id="ctaproof-splitZones-label" data-testid="variant-label">
+              {ui.blocks.variants.ctaproof.splitZones}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitZones"
+                title={ui.marketing.ctaProof.zonesTitle}
+                lead={ui.marketing.ctaProof.zonesLead}
+                badge={ui.marketing.ctaProof.badge}
+                actions={CTAPROOF_ACTIONS}
+                content={CTAPROOF_CONTENT}
+                layout="split"
+                proof="zones"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitZones))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/DashshellPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/DashshellPage.tsx
new file mode 100644
index 0000000..8ab3118
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/DashshellPage.tsx
@@ -0,0 +1,412 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The dashshell page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DashboardShell,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+const DASHSHELL_NAV = {
+  label: ui.dashboard.shells.label,
+  brand: ui.site.header.brand,
+  links: sidenav,
+  current: "item-orders",
+  subTitle: ui.dashboard.shells.subTitle,
+  sub: subnav,
+  subCurrent: "subitem-all",
+  search: ui.dashboard.shells.search,
+  shortcut: ui.dashboard.shells.shortcut,
+  expand: ui.dashboard.shells.expand,
+  userName: ui.dashboard.shells.userName,
+  copyright: ui.dashboard.shells.copyright,
+  footerLabel: ui.dashboard.shells.footerLabel,
+  footer: helplinks,
+} as const;
+
+export function DashshellPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.dashshell}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.dashshell}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-classic-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="classic"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-classic-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.classic}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-classic"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="show"
+                sidebar="wide"
+                side="start"
+                footer="none"
+                content="grid"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-inset-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="inset"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-inset-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.inset}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-inset"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="show"
+                sidebar="wide"
+                side="start"
+                footer="inset"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.inset))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-rail-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="rail"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-rail-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.rail}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-rail"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="hide"
+                sidebar="rail"
+                side="start"
+                footer="none"
+                content="list"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.rail))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-railFooter-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="railFooter"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-railFooter-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.railFooter}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-railFooter"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="show"
+                sidebar="rail"
+                side="start"
+                footer="full"
+                content="grid"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railFooter))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-collapsed-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="collapsed"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-collapsed-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.collapsed}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-collapsed"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="show"
+                sidebar="collapsed"
+                side="start"
+                footer="none"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsed))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-twoLevel-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="twoLevel"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-twoLevel-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.twoLevel}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-twoLevel"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="hide"
+                sidebar="twolevel"
+                side="start"
+                footer="inset"
+                content="list"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-twoLevelFull-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="twoLevelFull"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-twoLevelFull-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.twoLevelFull}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-twoLevelFull"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="show"
+                sidebar="twolevel"
+                side="start"
+                footer="full"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevelFull))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-end-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="end"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-end-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.end}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-end"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="show"
+                sidebar="wide"
+                side="end"
+                footer="full"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-railEnd-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="railEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-railEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.railEnd}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-railEnd"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="inset"
+                search="hide"
+                sidebar="rail"
+                side="end"
+                footer="inset"
+                content="grid"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railEnd))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-topOnly-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="topOnly"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-topOnly-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.topOnly}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-topOnly"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="full"
+                search="show"
+                sidebar="none"
+                side="start"
+                footer="full"
+                content="grid"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.topOnly))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-sideOnly-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="sideOnly"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-sideOnly-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.sideOnly}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-sideOnly"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="none"
+                search="show"
+                sidebar="wide"
+                side="start"
+                footer="inset"
+                content="list"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.sideOnly))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-collapsedEnd-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="collapsedEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="dashshell-collapsedEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.dashshell.collapsedEnd}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-collapsedEnd"
+                title={ui.dashboard.shells.title}
+                nav={DASHSHELL_NAV}
+                topbar="none"
+                search="show"
+                sidebar="collapsed"
+                side="end"
+                footer="full"
+                content="split"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsedEnd))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/DeliveryPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/DeliveryPage.tsx
new file mode 100644
index 0000000..9ca95f2
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/DeliveryPage.tsx
@@ -0,0 +1,148 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The delivery page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DeliveryInfo,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Zone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+
+export function DeliveryPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.delivery}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.delivery}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="delivery-full-label"
+            data-testid="variant"
+            data-block="delivery"
+            data-variant="full"
+          >
+            <Title as={2} size="base" weight="bold" id="delivery-full-label" data-testid="variant-label">
+              {ui.blocks.variants.delivery.full}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DeliveryInfo
+                id="delivery-full"
+                title={ui.commerce.delivery.title}
+                lead={ui.commerce.delivery.lead}
+                facts={deliveryfacts}
+                zones={zones}
+                labels={ui.commerce.delivery}
+                layout="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="delivery-split-label"
+            data-testid="variant"
+            data-block="delivery"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="delivery-split-label" data-testid="variant-label">
+              {ui.blocks.variants.delivery.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DeliveryInfo
+                id="delivery-split"
+                title={ui.commerce.delivery.title}
+                lead={ui.commerce.delivery.lead}
+                facts={deliveryfacts}
+                zones={zones}
+                labels={ui.commerce.delivery}
+                layout="split"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="delivery-facts-label"
+            data-testid="variant"
+            data-block="delivery"
+            data-variant="facts"
+          >
+            <Title as={2} size="base" weight="bold" id="delivery-facts-label" data-testid="variant-label">
+              {ui.blocks.variants.delivery.facts}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DeliveryInfo
+                id="delivery-facts"
+                title={ui.commerce.delivery.title}
+                lead={ui.commerce.delivery.lead}
+                facts={deliveryfacts}
+                zones={zones}
+                labels={ui.commerce.delivery}
+                layout="facts"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.facts))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/EmptyPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/EmptyPage.tsx
new file mode 100644
index 0000000..7b692f5
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/EmptyPage.tsx
@@ -0,0 +1,212 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The empty page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  EmptyPanel,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function EmptyPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.empty}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.empty}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-illustrated-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="illustrated"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-illustrated-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.illustrated}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-illustrated"
+                title={ui.dashboard.empty.tour.title}
+                text={ui.dashboard.empty.tour.text}
+                cta={ui.dashboard.empty.tour.cta}
+                ctaHref="#/"
+                layout="card"
+                actions="button"
+                visual="image"
+                size="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-orders-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="orders"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-orders-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.orders}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-orders"
+                title={ui.dashboard.empty.orders.title}
+                text={ui.dashboard.empty.orders.text}
+                cta={ui.dashboard.empty.orders.cta}
+                ctaHref="#/"
+                layout="card"
+                actions="button"
+                visual="icon"
+                size="default"
+                icon="shopping-bag"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-results-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="results"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-results-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.results}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-results"
+                title={ui.dashboard.empty.results.title}
+                text={ui.dashboard.empty.results.text}
+                cta={ui.dashboard.empty.results.cta}
+                ctaHref="#/"
+                layout="plain"
+                actions="button"
+                visual="icon"
+                size="default"
+                icon="search"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.results))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-inbox-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="inbox"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-inbox-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.inbox}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-inbox"
+                title={ui.dashboard.empty.inbox.title}
+                text={ui.dashboard.empty.inbox.text}
+                cta={ui.dashboard.empty.inbox.cta}
+                ctaHref="#/"
+                layout="card"
+                actions="none"
+                visual="icon"
+                size="default"
+                icon="inbox"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.inbox))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-compact-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-compact"
+                title={ui.dashboard.empty.inbox.title}
+                text={ui.dashboard.empty.inbox.text}
+                cta={ui.dashboard.empty.inbox.cta}
+                ctaHref="#/"
+                layout="card"
+                actions="button"
+                visual="icon"
+                size="compact"
+                icon="inbox"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-plainNoAction-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="plainNoAction"
+          >
+            <Title as={2} size="base" weight="bold" id="empty-plainNoAction-label" data-testid="variant-label">
+              {ui.blocks.variants.empty.plainNoAction}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-plainNoAction"
+                title={ui.dashboard.empty.results.title}
+                text={ui.dashboard.empty.results.text}
+                cta={ui.dashboard.empty.results.cta}
+                ctaHref="#/"
+                layout="plain"
+                actions="none"
+                visual="icon"
+                size="compact"
+                icon="search"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.plainNoAction))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ErrorpagePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ErrorpagePage.tsx
new file mode 100644
index 0000000..80c2566
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ErrorpagePage.tsx
@@ -0,0 +1,182 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The errorpage page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  ErrorPage,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ERRORPAGE_ACTIONS = { cta: ui.vibe.error.cta, href: "#/", secondary: ui.vibe.error.secondary, secondaryHref: "#/" } as const;
+
+export function ErrorpagePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+              {ui.blocks.themes.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.errorpage}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.errorpage}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-centered-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.centered}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-centered"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                layout="centered"
+                code="show"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-split-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-split-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-split"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                layout="split"
+                code="show"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-noCode-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="noCode"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-noCode-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.noCode}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-noCode"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                layout="centered"
+                code="hide"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.noCode))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-two-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="two"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-two-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.two}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-two"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "two" }}
+                layout="centered"
+                code="show"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.two))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-muted-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="errorpage-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.errorpage.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-muted"
+                title={ui.vibe.error.title}
+                text={ui.vibe.error.text}
+                status={ui.vibe.error.status}
+                actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                layout="centered"
+                code="show"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/FaqPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/FaqPage.tsx
new file mode 100644
index 0000000..287cb26
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/FaqPage.tsx
@@ -0,0 +1,255 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The faq page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FaqList,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Faq,
+  type FaqTab,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+const FAQ_FILTER = { tabs: faqtabs, label: ui.vibe.faq.tabs, category: "" } as const;
+
+export function FaqPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.faq}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.faq}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-list-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-list-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-list"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-chat-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="chat"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-chat-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.chat}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-chat"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="chat"
+                cols="1"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-search-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="search"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-search-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.search}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-search"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-tabs-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="tabs"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-tabs-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.tabs}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-tabs"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, category: "billing", mode: "categories" }}
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-twoColumns-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="twoColumns"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-twoColumns-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.twoColumns}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-twoColumns"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="2"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-muted-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-muted"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="1"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.muted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-roomy-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="roomy"
+          >
+            <Title as={2} size="base" weight="bold" id="faq-roomy-label" data-testid="variant-label">
+              {ui.blocks.variants.faq.roomy}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-roomy"
+                title={ui.site.pricing.faqTitle}
+                items={faq}
+                empty={ui.vibe.faq.empty}
+                search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                filter={{ ...FAQ_FILTER, mode: "none" }}
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.roomy))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/FaqsplitPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/FaqsplitPage.tsx
new file mode 100644
index 0000000..dbef4de
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/FaqsplitPage.tsx
@@ -0,0 +1,287 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The faqsplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FaqSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type FaqTab,
+  type Feature,
+  type Question,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const QUESTIONS_FIELDS = {
+  "id": "id",
+  "question": "title",
+  "answer": "metadata.answer.value",
+  "category": "terms|term:faq_category",
+  "icon": "metadata.icon.value",
+} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+
+const FAQSPLIT_LABELS = {
+  cta: ui.marketing.faqSplit.cta,
+  more: ui.marketing.faqSplit.more,
+  asideTitle: ui.marketing.faqSplit.asideTitle,
+  asideText: ui.marketing.faqSplit.asideText,
+  asideCta: ui.marketing.faqSplit.asideCta,
+  search: ui.marketing.faqSplit.search,
+  popular: ui.marketing.faqSplit.popular,
+} as const;
+
+export function FaqsplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.faqsplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.faqsplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-headSplit-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="headSplit"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-headSplit-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.headSplit}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-headSplit"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="head"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.headSplit))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-helpCard-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="helpCard"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-helpCard-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.helpCard}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-helpCard"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="aside"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-picture-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="picture"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-picture-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.picture}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-picture"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="media"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.picture))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-finder-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="finder"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-finder-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.finder}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-finder"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="search"
+                cards="grid3"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.finder))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-cards3-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="cards3"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-cards3-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.cards3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-cards3"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="cards"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-cards4-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="cards4"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-cards4-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.cards4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-cards4"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="cards"
+                cards="grid4"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-cardsIcons-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="cardsIcons"
+          >
+            <Title as={2} size="base" weight="bold" id="faqsplit-cardsIcons-label" data-testid="variant-label">
+              {ui.blocks.variants.faqsplit.cardsIcons}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-cardsIcons"
+                title={ui.marketing.faqSplit.title}
+                lead={ui.marketing.faqSplit.lead}
+                badge={ui.marketing.faqSplit.badge}
+                items={questions}
+                channels={channels}
+                topics={faqtabs}
+                labels={FAQSPLIT_LABELS}
+                layout="cards"
+                cards="icons"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cardsIcons))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/FeaturesPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/FeaturesPage.tsx
new file mode 100644
index 0000000..cbdcd79
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/FeaturesPage.tsx
@@ -0,0 +1,285 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The features page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureGrid,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function FeaturesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.features}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.features}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-grid-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="features-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.features.grid}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-grid"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                item="card"
+                mediaSide="end"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-grid2-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="features-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.features.grid2}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-grid2"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-2"
+                item="card"
+                mediaSide="end"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-tiles4-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="tiles4"
+          >
+            <Title as={2} size="base" weight="bold" id="features-tiles4-label" data-testid="variant-label">
+              {ui.blocks.variants.features.tiles4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-tiles4"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-4"
+                item="tile"
+                mediaSide="end"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-cells4-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="cells4"
+          >
+            <Title as={2} size="base" weight="bold" id="features-cells4-label" data-testid="variant-label">
+              {ui.blocks.variants.features.cells4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-cells4"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-4"
+                item="cell"
+                mediaSide="end"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.cells4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-rows-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="rows"
+          >
+            <Title as={2} size="base" weight="bold" id="features-rows-label" data-testid="variant-label">
+              {ui.blocks.variants.features.rows}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-rows"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="rows"
+                cols="1-3"
+                item="card"
+                mediaSide="end"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-rowsStart-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="rowsStart"
+          >
+            <Title as={2} size="base" weight="bold" id="features-rowsStart-label" data-testid="variant-label">
+              {ui.blocks.variants.features.rowsStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-rowsStart"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="rows"
+                cols="1-3"
+                item="card"
+                mediaSide="start"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-rowsAlternate-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="rowsAlternate"
+          >
+            <Title as={2} size="base" weight="bold" id="features-rowsAlternate-label" data-testid="variant-label">
+              {ui.blocks.variants.features.rowsAlternate}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-rowsAlternate"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="rows"
+                cols="1-3"
+                item="card"
+                mediaSide="alternate"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-tilesMuted-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="tilesMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="features-tilesMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.features.tilesMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-tilesMuted"
+                title={ui.site.home.featuresTitle}
+                features={features}
+                empty={ui.empty.features}
+                action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                item="tile"
+                mediaSide="end"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tilesMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/FeatureshowcasePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/FeatureshowcasePage.tsx
new file mode 100644
index 0000000..9b2f914
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/FeatureshowcasePage.tsx
@@ -0,0 +1,164 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The featureshowcase page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureShowcase,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function FeatureshowcasePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.featureshowcase}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.featureshowcase}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-pictureCards3-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="pictureCards3"
+          >
+            <Title as={2} size="base" weight="bold" id="featureshowcase-pictureCards3-label" data-testid="variant-label">
+              {ui.blocks.variants.featureshowcase.pictureCards3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-pictureCards3"
+                title={ui.marketing.featureShowcase.title}
+                lead={ui.marketing.featureShowcase.lead}
+                features={values}
+                empty={ui.empty.features}
+                more={ui.marketing.featureShowcase.more}
+                item="picture"
+                cols="3"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-panelCards4-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="panelCards4"
+          >
+            <Title as={2} size="base" weight="bold" id="featureshowcase-panelCards4-label" data-testid="variant-label">
+              {ui.blocks.variants.featureshowcase.panelCards4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-panelCards4"
+                title={ui.marketing.featureShowcase.title}
+                lead={ui.marketing.featureShowcase.lead}
+                features={features}
+                empty={ui.empty.features}
+                more={ui.marketing.featureShowcase.more}
+                item="panel"
+                cols="4"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-pictureCards4-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="pictureCards4"
+          >
+            <Title as={2} size="base" weight="bold" id="featureshowcase-pictureCards4-label" data-testid="variant-label">
+              {ui.blocks.variants.featureshowcase.pictureCards4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-pictureCards4"
+                title={ui.marketing.featureShowcase.title}
+                lead={ui.marketing.featureShowcase.lead}
+                features={features}
+                empty={ui.empty.features}
+                more={ui.marketing.featureShowcase.more}
+                item="picture"
+                cols="4"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-panelCards3-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="panelCards3"
+          >
+            <Title as={2} size="base" weight="bold" id="featureshowcase-panelCards3-label" data-testid="variant-label">
+              {ui.blocks.variants.featureshowcase.panelCards3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-panelCards3"
+                title={ui.marketing.featureShowcase.title}
+                lead={ui.marketing.featureShowcase.lead}
+                features={values}
+                empty={ui.empty.features}
+                more={ui.marketing.featureShowcase.more}
+                item="panel"
+                cols="3"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards3))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/FeaturesplitPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/FeaturesplitPage.tsx
new file mode 100644
index 0000000..8a1496d
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/FeaturesplitPage.tsx
@@ -0,0 +1,216 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The featuresplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+const FEATURESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.featureSplit.cta,
+  href: "#/start",
+  secondary: ui.marketing.featureSplit.secondary,
+  secondaryHref: "#/work",
+} as const;
+
+export function FeaturesplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.featuresplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.featuresplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-gridStart-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="gridStart"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-gridStart-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.gridStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-gridStart"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="grid"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-statsStart-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="statsStart"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-statsStart-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.statsStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-statsStart"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="stats"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.statsStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-gridMuted-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="gridMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-gridMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.gridMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-gridMuted"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="grid"
+                mediaSide="end"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridMuted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-metricCards-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="metricCards"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-metricCards-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.metricCards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-metricCards"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="metrics"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-featureCards-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="featureCards"
+          >
+            <Title as={2} size="base" weight="bold" id="featuresplit-featureCards-label" data-testid="variant-label">
+              {ui.blocks.variants.featuresplit.featureCards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-featureCards"
+                title={ui.marketing.featureSplit.title}
+                lead={ui.marketing.featureSplit.lead}
+                badge={ui.marketing.featureSplit.badge}
+                features={features}
+                stats={stats}
+                actions={FEATURESPLIT_ACTIONS}
+                layout="cards"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.featureCards))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/FeaturetabsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/FeaturetabsPage.tsx
new file mode 100644
index 0000000..5032222
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/FeaturetabsPage.tsx
@@ -0,0 +1,134 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The featuretabs page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureTabs,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function FeaturetabsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.featuretabs}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.featuretabs}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuretabs-split-label"
+            data-testid="variant"
+            data-block="featuretabs"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="featuretabs-split-label" data-testid="variant-label">
+              {ui.blocks.variants.featuretabs.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureTabs
+                id="featuretabs-split"
+                title={ui.vibe.tabs.title}
+                features={features}
+                empty={ui.empty.features}
+                tabsLabel={ui.vibe.tabs.label}
+                active="feature-clear"
+                panel="split"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuretabs-stack-label"
+            data-testid="variant"
+            data-block="featuretabs"
+            data-variant="stack"
+          >
+            <Title as={2} size="base" weight="bold" id="featuretabs-stack-label" data-testid="variant-label">
+              {ui.blocks.variants.featuretabs.stack}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureTabs
+                id="featuretabs-stack"
+                title={ui.vibe.tabs.title}
+                features={features}
+                empty={ui.empty.features}
+                tabsLabel={ui.vibe.tabs.label}
+                active="feature-clear"
+                panel="stack"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.stack))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuretabs-muted-label"
+            data-testid="variant"
+            data-block="featuretabs"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="featuretabs-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.featuretabs.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureTabs
+                id="featuretabs-muted"
+                title={ui.vibe.tabs.title}
+                features={features}
+                empty={ui.empty.features}
+                tabsLabel={ui.vibe.tabs.label}
+                active="feature-clear"
+                panel="split"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/FooterPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/FooterPage.tsx
new file mode 100644
index 0000000..c9cd381
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/FooterPage.tsx
@@ -0,0 +1,108 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The footer page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SiteFooter,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function FooterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.footer}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.footer}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footer-minimal-label"
+            data-testid="variant"
+            data-block="footer"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="footer-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.footer.minimal}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteFooter
+                labels={ui.site.footer}
+                layout="minimal"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.minimal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footer-centered-label"
+            data-testid="variant"
+            data-block="footer"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="footer-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.footer.centered}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteFooter
+                labels={ui.site.footer}
+                layout="centered"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footer-compact-label"
+            data-testid="variant"
+            data-block="footer"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="footer-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.footer.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteFooter
+                labels={ui.site.footer}
+                layout="minimal"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.compact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/FootersplitPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/FootersplitPage.tsx
new file mode 100644
index 0000000..f300310
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/FootersplitPage.tsx
@@ -0,0 +1,249 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The footersplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FooterSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type MegaGroup,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+
+const FOOTERSPLIT_EXTRAS = { stats, points: features, contacts, channels: community } as const;
+
+export function FootersplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.footersplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.footersplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-statsCards-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="statsCards"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-statsCards-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.statsCards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-statsCards"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="stats"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.statsCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-splitPoints-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="splitPoints"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-splitPoints-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.splitPoints}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-splitPoints"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="points"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitPoints))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-splitLinks-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="splitLinks"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-splitLinks-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.splitLinks}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-splitLinks"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="links"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitLinks))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-newsletterStart-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="newsletterStart"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-newsletterStart-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.newsletterStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-newsletterStart"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="newsletter"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.newsletterStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-splitContacts-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="splitContacts"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-splitContacts-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.splitContacts}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-splitContacts"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="contacts"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitContacts))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-channelsStart-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="channelsStart"
+          >
+            <Title as={2} size="base" weight="bold" id="footersplit-channelsStart-label" data-testid="variant-label">
+              {ui.blocks.variants.footersplit.channelsStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-channelsStart"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.marketing.footerSplit.tagline}
+                copyright={ui.marketing.footerSplit.copyright}
+                groups={sitemap}
+                extras={FOOTERSPLIT_EXTRAS}
+                labels={ui.marketing.footerSplit.labels}
+                layout="channels"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.channelsStart))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/HeaderPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/HeaderPage.tsx
new file mode 100644
index 0000000..8dc8dd2
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/HeaderPage.tsx
@@ -0,0 +1,148 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The header page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SiteHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+
+export function HeaderPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.header}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.header}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-inline-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="inline"
+          >
+            <Title as={2} size="base" weight="bold" id="header-inline-label" data-testid="variant-label">
+              {ui.blocks.variants.header.inline}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                labels={ui.site.header}
+                current="home"
+                cta={ui.site.header.cta}
+                layout="inline"
+                position="static"
+                actions="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.inline))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-stacked-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="header-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.header.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                labels={ui.site.header}
+                current="home"
+                cta={ui.site.header.cta}
+                layout="stacked"
+                position="static"
+                actions="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-sticky-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="sticky"
+          >
+            <Title as={2} size="base" weight="bold" id="header-sticky-label" data-testid="variant-label">
+              {ui.blocks.variants.header.sticky}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                labels={ui.site.header}
+                current="home"
+                cta={ui.site.header.cta}
+                layout="inline"
+                position="sticky"
+                actions="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.sticky))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-withCta-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="withCta"
+          >
+            <Title as={2} size="base" weight="bold" id="header-withCta-label" data-testid="variant-label">
+              {ui.blocks.variants.header.withCta}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                labels={ui.site.header}
+                current="home"
+                cta={ui.site.header.cta}
+                layout="inline"
+                position="static"
+                actions="cta"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.withCta))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/HeroPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/HeroPage.tsx
new file mode 100644
index 0000000..b47c5b4
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/HeroPage.tsx
@@ -0,0 +1,513 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The hero page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroClassic,
+  HeroPrompt,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type NavLink,
+  type Topic,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { prompts as promptsEntries } from "@ui8kit/app-shared/data/prompts";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const PROMPTS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const prompts = fromCodex<Topic>(promptsEntries, PROMPTS_FIELDS, CODEX);
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+
+const HERO_ACTIONS = {
+  cta: ui.site.home.cta,
+  href: "#/pricing",
+  secondary: ui.site.home.secondary,
+  secondaryHref: "#/pricing",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+const HERO_MEDIA = { codeTitle: ui.vibe.code.title, prompt: ui.vibe.code.prompt, lines: terminal } as const;
+
+export function HeroPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.hero}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.hero}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-centered-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.centered}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-centered"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-screenshot-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="screenshot"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-screenshot-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.screenshot}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-screenshot"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.screenshot))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-backdrop-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="backdrop"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-backdrop-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.backdrop}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-backdrop"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "backdrop", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="muted"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.backdrop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-code-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="code"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-code-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.code}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-code"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "two" }}
+                media={{ ...HERO_MEDIA, kind: "code", side: "end" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.code))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-cluster-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="cluster"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-cluster-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.cluster}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-cluster"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "cluster", side: "end" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.cluster))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-display-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="display"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-display-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.display}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-display"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="display"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.display))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-form-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="form"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-form-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.form}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-form"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "form" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.form))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-prompt-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="prompt"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-prompt-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.prompt}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroPrompt
+                title={ui.vibe.hero.title}
+                actions={{ ...HERO_ACTIONS, emailLabel: ui.vibe.hero.promptLabel, mode: "form" }}
+                composer={{ attachLabel: ui.vibe.hero.attach, modelLabel: ui.vibe.hero.model }}
+                nav={{
+                  brand: ui.site.header.brand,
+                  links: navlinks,
+                  current: "link-product",
+                  skip: ui.site.header.skip,
+                  label: ui.site.header.nav,
+                  login: ui.site.header.login,
+                  loginHref: "#/login",
+                }}
+                density="compact"
+                badge={ui.vibe.hero.badgeLabel}
+                badgeMark={ui.vibe.hero.badgeMark}
+                topics={prompts}
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.prompt))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-twoActions-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="twoActions"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-twoActions-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.twoActions}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-twoActions"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "two" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.twoActions))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-split-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-split-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-split"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-splitStart-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="splitStart"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-splitStart-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.splitStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-splitStart"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "two" }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.splitStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-muted-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-muted"
+                title={ui.site.home.title}
+                text={ui.site.home.text}
+                actions={{ ...HERO_ACTIONS, mode: "one" }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="muted"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.muted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-saas-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="saas"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-saas-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.saas}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-saas"
+                title={ui.cases.saas.hero.title}
+                text={ui.cases.saas.hero.text}
+                actions={{
+                  ...HERO_ACTIONS,
+                  cta: ui.cases.saas.hero.cta,
+                  secondary: ui.cases.saas.hero.secondary,
+                  mode: "two",
+                }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.saas))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-shop-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="shop"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.shop}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-shop"
+                title={ui.cases.shop.hero.title}
+                text={ui.cases.shop.hero.text}
+                actions={{
+                  ...HERO_ACTIONS,
+                  cta: ui.cases.shop.hero.cta,
+                  secondary: ui.cases.shop.hero.secondary,
+                  mode: "one",
+                }}
+                media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+                layout="split"
+                scale="default"
+                tone="muted"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-blog-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="blog"
+          >
+            <Title as={2} size="base" weight="bold" id="hero-blog-label" data-testid="variant-label">
+              {ui.blocks.variants.hero.blog}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-blog"
+                title={ui.cases.blog.hero.title}
+                text={ui.cases.blog.hero.text}
+                actions={{
+                  ...HERO_ACTIONS,
+                  cta: ui.cases.blog.hero.cta,
+                  secondary: ui.cases.blog.hero.secondary,
+                  mode: "one",
+                }}
+                media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="compact"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.blog))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/HerosplitPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/HerosplitPage.tsx
new file mode 100644
index 0000000..8abc2af
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/HerosplitPage.tsx
@@ -0,0 +1,311 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The herosplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroSplit,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Plan,
+  type Quote,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+const HEROSPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.heroSplit.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.heroSplit.secondary,
+  secondaryHref: "#/features",
+} as const;
+const HEROSPLIT_CONTENT = {
+  stats,
+  features,
+  people: testimonials,
+  plans: tiers,
+  proof: ui.marketing.heroSplit.proof,
+  card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+} as const;
+
+export function HerosplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.herosplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.herosplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-statsCards-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="statsCards"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-statsCards-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.statsCards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-statsCards"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="stats"
+                media="picture"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.statsCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-avatars-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="avatars"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-avatars-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.avatars}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-avatars"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="avatars"
+                media="picture"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.avatars))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-miniCards-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="miniCards"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-miniCards-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.miniCards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-miniCards"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="minis"
+                media="card"
+                mediaSide="end"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.miniCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-quoteStats-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="quoteStats"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-quoteStats-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.quoteStats}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-quoteStats"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="quote"
+                media="card"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.quoteStats))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-planCards-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="planCards"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-planCards-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.planCards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-planCards"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="none"
+                media="plans"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.planCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-pictureGrid-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="pictureGrid"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-pictureGrid-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.pictureGrid}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-pictureGrid"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="stats"
+                media="grid"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGrid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-pictureGridStart-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="pictureGridStart"
+          >
+            <Title as={2} size="base" weight="bold" id="herosplit-pictureGridStart-label" data-testid="variant-label">
+              {ui.blocks.variants.herosplit.pictureGridStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-pictureGridStart"
+                title={ui.marketing.heroSplit.title}
+                lead={ui.marketing.heroSplit.lead}
+                badge={ui.marketing.heroSplit.badge}
+                actions={HEROSPLIT_ACTIONS}
+                content={HEROSPLIT_CONTENT}
+                extra="avatars"
+                media="grid"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGridStart))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/IconwallPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/IconwallPage.tsx
new file mode 100644
index 0000000..99f1484
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/IconwallPage.tsx
@@ -0,0 +1,183 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The iconwall page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  IconWall,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function IconwallPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.iconwall}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.iconwall}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-tiles4-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="tiles4"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-tiles4-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.tiles4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-tiles4"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-tiles3-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="tiles3"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-tiles3-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.tiles3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-tiles3"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="3"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-chips6-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="chips6"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-chips6-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.chips6}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-chips6"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="6"
+                item="chip"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-chips4-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="chips4"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-chips4-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.chips4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-chips4"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="4"
+                item="chip"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-muted-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="iconwall-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.iconwall.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-muted"
+                title={ui.vibe.wall.title}
+                features={features}
+                empty={ui.empty.features}
+                cols="4"
+                item="tile"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/IndexPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/IndexPage.tsx
new file mode 100644
index 0000000..2529443
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/IndexPage.tsx
@@ -0,0 +1,222 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The index page of BlocksScreen.
+import { For } from "solid-js";
+import { Block, Container, Link, List, ListItem, Stack, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const TOPICS = [
+  {
+    id: "marketing",
+    titleId: "theme-marketing-title",
+    title: ui.blocks.themes.marketing.title,
+    text: ui.blocks.themes.marketing.text,
+    blocks: [
+      { key: "about", href: "#/about", name: ui.blocks.names.about, docs: ui.blocks.docs.about },
+      { key: "aboutme", href: "#/aboutme", name: ui.blocks.names.aboutme, docs: ui.blocks.docs.aboutme },
+      { key: "accordion", href: "#/accordion", name: ui.blocks.names.accordion, docs: ui.blocks.docs.accordion },
+      { key: "beforeafter", href: "#/beforeafter", name: ui.blocks.names.beforeafter, docs: ui.blocks.docs.beforeafter },
+      { key: "bento", href: "#/bento", name: ui.blocks.names.bento, docs: ui.blocks.docs.bento },
+      { key: "compare", href: "#/compare", name: ui.blocks.names.compare, docs: ui.blocks.docs.compare },
+      { key: "credits", href: "#/credits", name: ui.blocks.names.credits, docs: ui.blocks.docs.credits },
+      { key: "cta", href: "#/cta", name: ui.blocks.names.cta, docs: ui.blocks.docs.cta },
+      { key: "ctaproof", href: "#/ctaproof", name: ui.blocks.names.ctaproof, docs: ui.blocks.docs.ctaproof },
+      { key: "faq", href: "#/faq", name: ui.blocks.names.faq, docs: ui.blocks.docs.faq },
+      { key: "faqsplit", href: "#/faqsplit", name: ui.blocks.names.faqsplit, docs: ui.blocks.docs.faqsplit },
+      { key: "features", href: "#/features", name: ui.blocks.names.features, docs: ui.blocks.docs.features },
+      { key: "featureshowcase", href: "#/featureshowcase", name: ui.blocks.names.featureshowcase, docs: ui.blocks.docs.featureshowcase },
+      { key: "featuresplit", href: "#/featuresplit", name: ui.blocks.names.featuresplit, docs: ui.blocks.docs.featuresplit },
+      { key: "featuretabs", href: "#/featuretabs", name: ui.blocks.names.featuretabs, docs: ui.blocks.docs.featuretabs },
+      { key: "footer", href: "#/footer", name: ui.blocks.names.footer, docs: ui.blocks.docs.footer },
+      { key: "footersplit", href: "#/footersplit", name: ui.blocks.names.footersplit, docs: ui.blocks.docs.footersplit },
+      { key: "header", href: "#/header", name: ui.blocks.names.header, docs: ui.blocks.docs.header },
+      { key: "hero", href: "#/hero", name: ui.blocks.names.hero, docs: ui.blocks.docs.hero },
+      { key: "herosplit", href: "#/herosplit", name: ui.blocks.names.herosplit, docs: ui.blocks.docs.herosplit },
+      { key: "iconwall", href: "#/iconwall", name: ui.blocks.names.iconwall, docs: ui.blocks.docs.iconwall },
+      { key: "jobs", href: "#/jobs", name: ui.blocks.names.jobs, docs: ui.blocks.docs.jobs },
+      { key: "logos", href: "#/logos", name: ui.blocks.names.logos, docs: ui.blocks.docs.logos },
+      { key: "medialist", href: "#/medialist", name: ui.blocks.names.medialist, docs: ui.blocks.docs.medialist },
+      { key: "megamenu", href: "#/megamenu", name: ui.blocks.names.megamenu, docs: ui.blocks.docs.megamenu },
+      { key: "navbar", href: "#/navbar", name: ui.blocks.names.navbar, docs: ui.blocks.docs.navbar },
+      { key: "pagehead", href: "#/pagehead", name: ui.blocks.names.pagehead, docs: ui.blocks.docs.pagehead },
+      { key: "pagetrail", href: "#/pagetrail", name: ui.blocks.names.pagetrail, docs: ui.blocks.docs.pagetrail },
+      { key: "photos", href: "#/photos", name: ui.blocks.names.photos, docs: ui.blocks.docs.photos },
+      { key: "plan", href: "#/plan", name: ui.blocks.names.plan, docs: ui.blocks.docs.plan },
+      { key: "pricing", href: "#/pricing", name: ui.blocks.names.pricing, docs: ui.blocks.docs.pricing },
+      { key: "projects", href: "#/projects", name: ui.blocks.names.projects, docs: ui.blocks.docs.projects },
+      { key: "proof", href: "#/proof", name: ui.blocks.names.proof, docs: ui.blocks.docs.proof },
+      { key: "quotesplit", href: "#/quotesplit", name: ui.blocks.names.quotesplit, docs: ui.blocks.docs.quotesplit },
+      { key: "sitemap", href: "#/sitemap", name: ui.blocks.names.sitemap, docs: ui.blocks.docs.sitemap },
+      { key: "stats", href: "#/stats", name: ui.blocks.names.stats, docs: ui.blocks.docs.stats },
+      { key: "steps", href: "#/steps", name: ui.blocks.names.steps, docs: ui.blocks.docs.steps },
+      { key: "sticky", href: "#/sticky", name: ui.blocks.names.sticky, docs: ui.blocks.docs.sticky },
+      { key: "team", href: "#/team", name: ui.blocks.names.team, docs: ui.blocks.docs.team },
+      { key: "templates", href: "#/templates", name: ui.blocks.names.templates, docs: ui.blocks.docs.templates },
+      { key: "testimonials", href: "#/testimonials", name: ui.blocks.names.testimonials, docs: ui.blocks.docs.testimonials },
+      { key: "usage", href: "#/usage", name: ui.blocks.names.usage, docs: ui.blocks.docs.usage },
+      { key: "videos", href: "#/videos", name: ui.blocks.names.videos, docs: ui.blocks.docs.videos },
+    ],
+  },
+  {
+    id: "commerce",
+    titleId: "theme-commerce-title",
+    title: ui.blocks.themes.commerce.title,
+    text: ui.blocks.themes.commerce.text,
+    blocks: [
+      { key: "cart", href: "#/cart", name: ui.blocks.names.cart, docs: ui.blocks.docs.cart },
+      { key: "cartdrawer", href: "#/cartdrawer", name: ui.blocks.names.cartdrawer, docs: ui.blocks.docs.cartdrawer },
+      { key: "cartpage", href: "#/cartpage", name: ui.blocks.names.cartpage, docs: ui.blocks.docs.cartpage },
+      { key: "categories", href: "#/categories", name: ui.blocks.names.categories, docs: ui.blocks.docs.categories },
+      { key: "checkout", href: "#/checkout", name: ui.blocks.names.checkout, docs: ui.blocks.docs.checkout },
+      { key: "delivery", href: "#/delivery", name: ui.blocks.names.delivery, docs: ui.blocks.docs.delivery },
+      { key: "locations", href: "#/locations", name: ui.blocks.names.locations, docs: ui.blocks.docs.locations },
+      { key: "orders", href: "#/orders", name: ui.blocks.names.orders, docs: ui.blocks.docs.orders },
+      { key: "product", href: "#/product", name: ui.blocks.names.product, docs: ui.blocks.docs.product },
+      { key: "productinfo", href: "#/productinfo", name: ui.blocks.names.productinfo, docs: ui.blocks.docs.productinfo },
+      { key: "products", href: "#/products", name: ui.blocks.names.products, docs: ui.blocks.docs.products },
+      { key: "reviews", href: "#/reviews", name: ui.blocks.names.reviews, docs: ui.blocks.docs.reviews },
+      { key: "slots", href: "#/slots", name: ui.blocks.names.slots, docs: ui.blocks.docs.slots },
+      { key: "storehero", href: "#/storehero", name: ui.blocks.names.storehero, docs: ui.blocks.docs.storehero },
+      { key: "summary", href: "#/summary", name: ui.blocks.names.summary, docs: ui.blocks.docs.summary },
+      { key: "usp", href: "#/usp", name: ui.blocks.names.usp, docs: ui.blocks.docs.usp },
+      { key: "zones", href: "#/zones", name: ui.blocks.names.zones, docs: ui.blocks.docs.zones },
+    ],
+  },
+  {
+    id: "promo",
+    titleId: "theme-promo-title",
+    title: ui.blocks.themes.promo.title,
+    text: ui.blocks.themes.promo.text,
+    blocks: [
+      { key: "announcement", href: "#/announcement", name: ui.blocks.names.announcement, docs: ui.blocks.docs.announcement },
+      { key: "cookie", href: "#/cookie", name: ui.blocks.names.cookie, docs: ui.blocks.docs.cookie },
+      { key: "newsletter", href: "#/newsletter", name: ui.blocks.names.newsletter, docs: ui.blocks.docs.newsletter },
+    ],
+  },
+  {
+    id: "content",
+    titleId: "theme-content-title",
+    title: ui.blocks.themes.content.title,
+    text: ui.blocks.themes.content.text,
+    blocks: [
+      { key: "article", href: "#/article", name: ui.blocks.names.article, docs: ui.blocks.docs.article },
+      { key: "postheader", href: "#/postheader", name: ui.blocks.names.postheader, docs: ui.blocks.docs.postheader },
+      { key: "posts", href: "#/posts", name: ui.blocks.names.posts, docs: ui.blocks.docs.posts },
+      { key: "postshowcase", href: "#/postshowcase", name: ui.blocks.names.postshowcase, docs: ui.blocks.docs.postshowcase },
+      { key: "postsplit", href: "#/postsplit", name: ui.blocks.names.postsplit, docs: ui.blocks.docs.postsplit },
+      { key: "storytabs", href: "#/storytabs", name: ui.blocks.names.storytabs, docs: ui.blocks.docs.storytabs },
+      { key: "timeline", href: "#/timeline", name: ui.blocks.names.timeline, docs: ui.blocks.docs.timeline },
+    ],
+  },
+  {
+    id: "account",
+    titleId: "theme-account-title",
+    title: ui.blocks.themes.account.title,
+    text: ui.blocks.themes.account.text,
+    blocks: [
+      { key: "auth", href: "#/auth", name: ui.blocks.names.auth, docs: ui.blocks.docs.auth },
+      { key: "authpage", href: "#/authpage", name: ui.blocks.names.authpage, docs: ui.blocks.docs.authpage },
+      { key: "profile", href: "#/profile", name: ui.blocks.names.profile, docs: ui.blocks.docs.profile },
+      { key: "wizard", href: "#/wizard", name: ui.blocks.names.wizard, docs: ui.blocks.docs.wizard },
+    ],
+  },
+  {
+    id: "dashboard",
+    titleId: "theme-dashboard-title",
+    title: ui.blocks.themes.dashboard.title,
+    text: ui.blocks.themes.dashboard.text,
+    blocks: [
+      { key: "activity", href: "#/activity", name: ui.blocks.names.activity, docs: ui.blocks.docs.activity },
+      { key: "bottomnav", href: "#/bottomnav", name: ui.blocks.names.bottomnav, docs: ui.blocks.docs.bottomnav },
+      { key: "chart", href: "#/chart", name: ui.blocks.names.chart, docs: ui.blocks.docs.chart },
+      { key: "dashshell", href: "#/dashshell", name: ui.blocks.names.dashshell, docs: ui.blocks.docs.dashshell },
+      { key: "empty", href: "#/empty", name: ui.blocks.names.empty, docs: ui.blocks.docs.empty },
+      { key: "kanban", href: "#/kanban", name: ui.blocks.names.kanban, docs: ui.blocks.docs.kanban },
+      { key: "metrics", href: "#/metrics", name: ui.blocks.names.metrics, docs: ui.blocks.docs.metrics },
+      { key: "overview", href: "#/overview", name: ui.blocks.names.overview, docs: ui.blocks.docs.overview },
+      { key: "shell", href: "#/shell", name: ui.blocks.names.shell, docs: ui.blocks.docs.shell },
+      { key: "sidenav", href: "#/sidenav", name: ui.blocks.names.sidenav, docs: ui.blocks.docs.sidenav },
+      { key: "skeleton", href: "#/skeleton", name: ui.blocks.names.skeleton, docs: ui.blocks.docs.skeleton },
+    ],
+  },
+  {
+    id: "onboarding",
+    titleId: "theme-onboarding-title",
+    title: ui.blocks.themes.onboarding.title,
+    text: ui.blocks.themes.onboarding.text,
+    blocks: [
+      { key: "checklist", href: "#/checklist", name: ui.blocks.names.checklist, docs: ui.blocks.docs.checklist },
+      { key: "stepper", href: "#/stepper", name: ui.blocks.names.stepper, docs: ui.blocks.docs.stepper },
+      { key: "tour", href: "#/tour", name: ui.blocks.names.tour, docs: ui.blocks.docs.tour },
+      { key: "videomodal", href: "#/videomodal", name: ui.blocks.names.videomodal, docs: ui.blocks.docs.videomodal },
+    ],
+  },
+  {
+    id: "support",
+    titleId: "theme-support-title",
+    title: ui.blocks.themes.support.title,
+    text: ui.blocks.themes.support.text,
+    blocks: [
+      { key: "channels", href: "#/channels", name: ui.blocks.names.channels, docs: ui.blocks.docs.channels },
+      { key: "contact", href: "#/contact", name: ui.blocks.names.contact, docs: ui.blocks.docs.contact },
+      { key: "errorpage", href: "#/errorpage", name: ui.blocks.names.errorpage, docs: ui.blocks.docs.errorpage },
+    ],
+  },
+] as const;
+
+export function IndexPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Stack gap="4" align="stretch">
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="gallery-title">
+              {ui.blocks.title}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.intro}
+            </Text>
+          </Stack>
+          <For each={TOPICS ?? []}>{(topic) => (
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby={topic.titleId}
+              data-testid="theme-section"
+              data-theme-id={topic.id}
+            >
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id={topic.titleId}>
+                  {topic.title}
+                </Title>
+                <Text size="sm" class="max-w-2xl text-muted-foreground">
+                  {topic.text}
+                </Text>
+              </Stack>
+              <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="block-list">
+                <For each={topic.blocks ?? []}>{(block) => (
+                  <ListItem class="flex flex-col gap-1 rounded-xl p-4 inset-ring inset-ring-border">
+                    <Link
+                      href={block.href}
+                      variant="default"
+                      class="font-bold"
+                      data-testid="block-link"
+                      data-block={block.key}
+                      data-theme-id={topic.id}
+                    >
+                      {block.name}
+                    </Link>
+                    <Text size="sm" class="text-muted-foreground">
+                      {block.docs}
+                    </Text>
+                  </ListItem>
+                )}</For>
+              </List>
+            </Stack>
+          )}</For>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/JobsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/JobsPage.tsx
new file mode 100644
index 0000000..73b4b51
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/JobsPage.tsx
@@ -0,0 +1,177 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The jobs page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  JobBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Department,
+  type Job,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+
+export function JobsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.jobs}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.jobs}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-grid-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="jobs-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.jobs.grid}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-grid"
+                title={ui.company.jobs.title}
+                lead={ui.company.jobs.lead}
+                jobs={jobs}
+                empty={ui.empty.jobs}
+                departments={departments}
+                labels={ui.company.jobs}
+                layout="grid"
+                salary="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-salary-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="salary"
+          >
+            <Title as={2} size="base" weight="bold" id="jobs-salary-label" data-testid="variant-label">
+              {ui.blocks.variants.jobs.salary}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-salary"
+                title={ui.company.jobs.title}
+                lead={ui.company.jobs.lead}
+                jobs={jobs}
+                empty={ui.empty.jobs}
+                departments={departments}
+                labels={ui.company.jobs}
+                layout="grid"
+                salary="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.salary))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-grouped-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="grouped"
+          >
+            <Title as={2} size="base" weight="bold" id="jobs-grouped-label" data-testid="variant-label">
+              {ui.blocks.variants.jobs.grouped}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-grouped"
+                title={ui.company.jobs.title}
+                lead={ui.company.jobs.lead}
+                jobs={jobs}
+                empty={ui.empty.jobs}
+                departments={departments}
+                labels={ui.company.jobs}
+                layout="grouped"
+                salary="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-table-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="table"
+          >
+            <Title as={2} size="base" weight="bold" id="jobs-table-label" data-testid="variant-label">
+              {ui.blocks.variants.jobs.table}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-table"
+                title={ui.company.jobs.title}
+                lead={ui.company.jobs.lead}
+                jobs={jobs}
+                empty={ui.empty.jobs}
+                departments={departments}
+                labels={ui.company.jobs}
+                layout="table"
+                salary="show"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.table))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/KanbanPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/KanbanPage.tsx
new file mode 100644
index 0000000..f9a8f26
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/KanbanPage.tsx
@@ -0,0 +1,169 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The kanban page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  KanbanBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type BoardCard,
+  type Lane,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+
+export function KanbanPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.kanban}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.kanban}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-detail-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="detail"
+          >
+            <Title as={2} size="base" weight="bold" id="kanban-detail-label" data-testid="variant-label">
+              {ui.blocks.variants.kanban.detail}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-detail"
+                title={ui.vibe.kanban.title}
+                lanes={lanes}
+                empty={ui.empty.lanes}
+                cards={cards}
+                countLabel={ui.vibe.kanban.count}
+                card="detail"
+                cols="3"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-simple-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="simple"
+          >
+            <Title as={2} size="base" weight="bold" id="kanban-simple-label" data-testid="variant-label">
+              {ui.blocks.variants.kanban.simple}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-simple"
+                title={ui.vibe.kanban.title}
+                lanes={lanes}
+                empty={ui.empty.lanes}
+                cards={cards}
+                countLabel={ui.vibe.kanban.count}
+                card="simple"
+                cols="3"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.simple))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-twoCols-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="twoCols"
+          >
+            <Title as={2} size="base" weight="bold" id="kanban-twoCols-label" data-testid="variant-label">
+              {ui.blocks.variants.kanban.twoCols}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-twoCols"
+                title={ui.vibe.kanban.title}
+                lanes={lanes}
+                empty={ui.empty.lanes}
+                cards={cards}
+                countLabel={ui.vibe.kanban.count}
+                card="detail"
+                cols="2"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-muted-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="kanban-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.kanban.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-muted"
+                title={ui.vibe.kanban.title}
+                lanes={lanes}
+                empty={ui.empty.lanes}
+                cards={cards}
+                countLabel={ui.vibe.kanban.count}
+                card="detail"
+                cols="3"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/LocationsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/LocationsPage.tsx
new file mode 100644
index 0000000..a1f0cc8
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/LocationsPage.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The locations page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoreLocations,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Store,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+
+export function LocationsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.locations}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.locations}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="locations-cards-label"
+            data-testid="variant"
+            data-block="locations"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="locations-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.locations.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreLocations
+                id="locations-cards"
+                title={ui.commerce.stores.title}
+                lead={ui.commerce.stores.lead}
+                stores={stores}
+                empty={ui.empty.stores}
+                kinds={ui.commerce.stores.kinds}
+                labels={ui.commerce.stores}
+                layout="cards"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="locations-list-label"
+            data-testid="variant"
+            data-block="locations"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="locations-list-label" data-testid="variant-label">
+              {ui.blocks.variants.locations.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreLocations
+                id="locations-list"
+                title={ui.commerce.stores.title}
+                lead={ui.commerce.stores.lead}
+                stores={stores}
+                empty={ui.empty.stores}
+                kinds={ui.commerce.stores.kinds}
+                labels={ui.commerce.stores}
+                layout="list"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="locations-map-label"
+            data-testid="variant"
+            data-block="locations"
+            data-variant="map"
+          >
+            <Title as={2} size="base" weight="bold" id="locations-map-label" data-testid="variant-label">
+              {ui.blocks.variants.locations.map}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreLocations
+                id="locations-map"
+                title={ui.commerce.stores.title}
+                lead={ui.commerce.stores.lead}
+                stores={stores}
+                empty={ui.empty.stores}
+                kinds={ui.commerce.stores.kinds}
+                labels={ui.commerce.stores}
+                layout="map"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.map))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/LogosPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/LogosPage.tsx
new file mode 100644
index 0000000..ad4c36e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/LogosPage.tsx
@@ -0,0 +1,215 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The logos page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  LogoCloud,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+export function LogosPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.logos}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.logos}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-grid4-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="grid4"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-grid4-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.grid4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-grid4"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="4"
+                item="name"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-grid3-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.grid3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-grid3"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="3"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-row-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-row-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.row}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-row"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="row"
+                cols="4"
+                item="icon"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-icons-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.icons}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-icons"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="4"
+                item="icon"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-grid2-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.grid2}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-grid2"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="2"
+                item="name"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-tiles4-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="tiles4"
+          >
+            <Title as={2} size="base" weight="bold" id="logos-tiles4-label" data-testid="variant-label">
+              {ui.blocks.variants.logos.tiles4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-tiles4"
+                title={ui.marketing.logos.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                layout="grid"
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/MedialistPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/MedialistPage.tsx
new file mode 100644
index 0000000..d3cc8c5
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/MedialistPage.tsx
@@ -0,0 +1,280 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The medialist page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MediaList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Feature,
+  type Post,
+  type Review,
+  type Stat,
+  type Step,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+const MEDIALIST_LABELS = {
+  count: ui.marketing.mediaList.count,
+  minutes: ui.content.labels.minutes,
+  featured: ui.marketing.mediaList.featured,
+  rating: ui.testimonials.rating,
+  figures: ui.marketing.mediaList.supportFigures,
+} as const;
+const MEDIALIST_EXTRAS = { stats, steps, posts, topics: categories, channels, reviews } as const;
+
+export function MedialistPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.medialist}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.medialist}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-figuresStart-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="figuresStart"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-figuresStart-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.figuresStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-figuresStart"
+                title={ui.marketing.mediaList.figures.title}
+                lead={ui.marketing.mediaList.figures.lead}
+                badge={ui.marketing.mediaList.figures.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.figures.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.figures.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="figures"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.figuresStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-proofReview-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="proofReview"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-proofReview-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.proofReview}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-proofReview"
+                title={ui.marketing.mediaList.proof.title}
+                lead={ui.marketing.mediaList.proof.lead}
+                badge={ui.marketing.mediaList.proof.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.proof.list }}
+                actions={{
+                  mode: "two",
+                  cta: ui.marketing.mediaList.proof.cta,
+                  href: "#/start",
+                  secondary: ui.marketing.mediaList.proof.secondary,
+                  secondaryHref: "#/more",
+                }}
+                extras={MEDIALIST_EXTRAS}
+                layout="proof"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.proofReview))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-stepsRows-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="stepsRows"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-stepsRows-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.stepsRows}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-stepsRows"
+                title={ui.marketing.mediaList.steps.title}
+                lead={ui.marketing.mediaList.steps.lead}
+                badge={ui.marketing.mediaList.steps.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.steps.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.steps.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="steps"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.stepsRows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-latestPosts-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="latestPosts"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-latestPosts-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.latestPosts}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-latestPosts"
+                title={ui.marketing.mediaList.posts.title}
+                lead={ui.marketing.mediaList.posts.lead}
+                badge={ui.marketing.mediaList.posts.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.posts.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.posts.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="posts"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.latestPosts))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-topicRows-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="topicRows"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-topicRows-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.topicRows}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-topicRows"
+                title={ui.marketing.mediaList.topics.title}
+                lead={ui.marketing.mediaList.topics.lead}
+                badge={ui.marketing.mediaList.topics.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.topics.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.topics.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="topics"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-contactStart-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="contactStart"
+          >
+            <Title as={2} size="base" weight="bold" id="medialist-contactStart-label" data-testid="variant-label">
+              {ui.blocks.variants.medialist.contactStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-contactStart"
+                title={ui.marketing.mediaList.contact.title}
+                lead={ui.marketing.mediaList.contact.lead}
+                badge={ui.marketing.mediaList.contact.badge}
+                labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.contact.list }}
+                actions={{ mode: "one", cta: ui.marketing.mediaList.contact.cta, href: "#/start" }}
+                extras={MEDIALIST_EXTRAS}
+                layout="contact"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.contactStart))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/MegamenuPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/MegamenuPage.tsx
new file mode 100644
index 0000000..c731c0f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/MegamenuPage.tsx
@@ -0,0 +1,169 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The megamenu page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MegaMenu,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+  type NavLink,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+
+export function MegamenuPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.megamenu}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.megamenu}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-open-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="open"
+          >
+            <Title as={2} size="base" weight="bold" id="megamenu-open-label" data-testid="variant-label">
+              {ui.blocks.variants.megamenu.open}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                trigger={ui.vibe.mega.trigger}
+                links={navlinks}
+                groups={megagroups}
+                promoTitle={ui.vibe.mega.promoTitle}
+                promoText={ui.vibe.mega.promoText}
+                panel="open"
+                cols="3"
+                promo="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-closed-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="closed"
+          >
+            <Title as={2} size="base" weight="bold" id="megamenu-closed-label" data-testid="variant-label">
+              {ui.blocks.variants.megamenu.closed}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                trigger={ui.vibe.mega.trigger}
+                links={navlinks}
+                groups={megagroups}
+                promoTitle={ui.vibe.mega.promoTitle}
+                promoText={ui.vibe.mega.promoText}
+                panel="closed"
+                cols="3"
+                promo="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.closed))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-twoCols-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="twoCols"
+          >
+            <Title as={2} size="base" weight="bold" id="megamenu-twoCols-label" data-testid="variant-label">
+              {ui.blocks.variants.megamenu.twoCols}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                trigger={ui.vibe.mega.trigger}
+                links={navlinks}
+                groups={megagroups}
+                promoTitle={ui.vibe.mega.promoTitle}
+                promoText={ui.vibe.mega.promoText}
+                panel="open"
+                cols="2"
+                promo="none"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-promo-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="promo"
+          >
+            <Title as={2} size="base" weight="bold" id="megamenu-promo-label" data-testid="variant-label">
+              {ui.blocks.variants.megamenu.promo}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                trigger={ui.vibe.mega.trigger}
+                links={navlinks}
+                groups={megagroups}
+                promoTitle={ui.vibe.mega.promoTitle}
+                promoText={ui.vibe.mega.promoText}
+                panel="open"
+                cols="3"
+                promo="card"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.promo))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/MetricsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/MetricsPage.tsx
new file mode 100644
index 0000000..517bc6d
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/MetricsPage.tsx
@@ -0,0 +1,163 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The metrics page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MetricRow,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+export function MetricsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.metrics}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.metrics}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-tiles-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="tiles"
+          >
+            <Title as={2} size="base" weight="bold" id="metrics-tiles-label" data-testid="variant-label">
+              {ui.blocks.variants.metrics.tiles}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-tiles"
+                title={ui.dashboard.metrics.title}
+                metrics={metrics}
+                empty={ui.empty.metrics}
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-twoUp-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="twoUp"
+          >
+            <Title as={2} size="base" weight="bold" id="metrics-twoUp-label" data-testid="variant-label">
+              {ui.blocks.variants.metrics.twoUp}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-twoUp"
+                title={ui.dashboard.metrics.title}
+                metrics={metrics}
+                empty={ui.empty.metrics}
+                cols="2"
+                item="tile"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.twoUp))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-compact-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="metrics-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.metrics.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-compact"
+                title={ui.dashboard.metrics.title}
+                metrics={metrics}
+                empty={ui.empty.metrics}
+                cols="4"
+                item="compact"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-muted-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="metrics-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.metrics.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-muted"
+                title={ui.dashboard.metrics.title}
+                metrics={metrics}
+                empty={ui.empty.metrics}
+                cols="2"
+                item="compact"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/NavbarPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/NavbarPage.tsx
new file mode 100644
index 0000000..c678ec6
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/NavbarPage.tsx
@@ -0,0 +1,225 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The navbar page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  NavBar,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+const NAVBAR_ACTIONS = { cta: ui.site.header.cta, href: "#/", login: ui.site.header.login, loginHref: "#/login" } as const;
+
+export function NavbarPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.navbar}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.navbar}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-inline-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="inline"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-inline-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.inline}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="inline"
+                over="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inline))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-split-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-split-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="split"
+                over="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-search-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="search"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-search-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.search}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="search"
+                over="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-media-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="media"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-media-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.media}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="inline"
+                over="media"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-plain-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "none" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="inline"
+                over="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.plain))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-inverse-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="inverse"
+          >
+            <Title as={2} size="base" weight="bold" id="navbar-inverse-label" data-testid="variant-label">
+              {ui.blocks.variants.navbar.inverse}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                label={ui.vibe.nav.label}
+                brand={ui.site.header.brand}
+                links={navlinks}
+                current="link-product"
+                actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                layout="inline"
+                over="none"
+                tone="inverse"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inverse))}
+                onTheme={() => actions.toggleTheme()}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/NewsletterPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/NewsletterPage.tsx
new file mode 100644
index 0000000..5899cc1
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/NewsletterPage.tsx
@@ -0,0 +1,185 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The newsletter page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  NewsletterForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NewsletterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+              {ui.blocks.themes.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.newsletter}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.newsletter}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-inline-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="inline"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-inline-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.inline}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-inline"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="inline"
+                terms="hide"
+                tone="default"
+                align="center"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-stacked-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-stacked"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="stacked"
+                terms="hide"
+                tone="default"
+                align="center"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-split-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-split-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-split"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="split"
+                terms="hide"
+                tone="default"
+                align="start"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-consent-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="consent"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-consent-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.consent}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-consent"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="inline"
+                terms="show"
+                tone="default"
+                align="center"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-muted-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="newsletter-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.newsletter.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-muted"
+                title={ui.promo.newsletter.title}
+                text={ui.promo.newsletter.text}
+                label={ui.promo.newsletter.label}
+                submit={ui.promo.newsletter.submit}
+                consent={ui.promo.newsletter.consent}
+                layout="inline"
+                terms="show"
+                tone="muted"
+                align="start"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/NotfoundPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/NotfoundPage.tsx
new file mode 100644
index 0000000..d11c61b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/NotfoundPage.tsx
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The notfound page of BlocksScreen.
+
+import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NotfoundPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="4" align="stretch">
+          <Title as={1} size="4xl" weight="bold" id="page-title">
+            {ui.site.notFound.title}
+          </Title>
+          <Group>
+            <Button variant="default" size="default" href="#/">
+              {ui.blocks.back}
+            </Button>
+          </Group>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/OrdersPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/OrdersPage.tsx
new file mode 100644
index 0000000..d597cc8
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/OrdersPage.tsx
@@ -0,0 +1,173 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The orders page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  OrderTable,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Order,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+const ORDERS_FIELDS = {
+  "id": "id",
+  "number": "title",
+  "date": "metadata.date.value|date",
+  "total": "metadata.total.value",
+  "currency": "metadata.currency.value",
+  "status": "metadata.order_status.value",
+  "items": "metadata.items.value",
+} as const;
+
+const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+
+export function OrdersPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.orders}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.orders}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-table-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="table"
+          >
+            <Title as={2} size="base" weight="bold" id="orders-table-label" data-testid="variant-label">
+              {ui.blocks.variants.orders.table}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-table"
+                title={ui.commerce.orders.title}
+                orders={orders}
+                empty={ui.empty.orders}
+                statuses={ui.status}
+                labels={ui.commerce.orders}
+                layout="table"
+                pager="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-cards-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="orders-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.orders.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-cards"
+                title={ui.commerce.orders.title}
+                orders={orders}
+                empty={ui.empty.orders}
+                statuses={ui.status}
+                labels={ui.commerce.orders}
+                layout="cards"
+                pager="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-noPager-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="noPager"
+          >
+            <Title as={2} size="base" weight="bold" id="orders-noPager-label" data-testid="variant-label">
+              {ui.blocks.variants.orders.noPager}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-noPager"
+                title={ui.commerce.orders.title}
+                orders={orders}
+                empty={ui.empty.orders}
+                statuses={ui.status}
+                labels={ui.commerce.orders}
+                layout="table"
+                pager="hide"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.noPager))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-compactMuted-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="compactMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="orders-compactMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.orders.compactMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-compactMuted"
+                title={ui.commerce.orders.title}
+                orders={orders}
+                empty={ui.empty.orders}
+                statuses={ui.status}
+                labels={ui.commerce.orders}
+                layout="table"
+                pager="hide"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.compactMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/OverviewPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/OverviewPage.tsx
new file mode 100644
index 0000000..2659c72
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/OverviewPage.tsx
@@ -0,0 +1,184 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The overview page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DashboardOverview,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type Point,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+const OVERVIEW_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const OVERVIEW_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+
+export function OverviewPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.overview}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.overview}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-split-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="overview-split-label" data-testid="variant-label">
+              {ui.blocks.variants.overview.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-split"
+                title={ui.vibe.overview.title}
+                metrics={metrics}
+                chart={OVERVIEW_CHART}
+                activity={OVERVIEW_ACTIVITY}
+                layout="split"
+                cols="4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-stacked-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="overview-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.overview.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-stacked"
+                title={ui.vibe.overview.title}
+                metrics={metrics}
+                chart={OVERVIEW_CHART}
+                activity={OVERVIEW_ACTIVITY}
+                layout="stacked"
+                cols="4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-twoCols-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="twoCols"
+          >
+            <Title as={2} size="base" weight="bold" id="overview-twoCols-label" data-testid="variant-label">
+              {ui.blocks.variants.overview.twoCols}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-twoCols"
+                title={ui.vibe.overview.title}
+                metrics={metrics}
+                chart={OVERVIEW_CHART}
+                activity={OVERVIEW_ACTIVITY}
+                layout="split"
+                cols="2"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.twoCols))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-muted-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="overview-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.overview.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-muted"
+                title={ui.vibe.overview.title}
+                metrics={metrics}
+                chart={OVERVIEW_CHART}
+                activity={OVERVIEW_ACTIVITY}
+                layout="split"
+                cols="4"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/PageheadPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/PageheadPage.tsx
new file mode 100644
index 0000000..28d8457
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/PageheadPage.tsx
@@ -0,0 +1,126 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The pagehead page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageIntro,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function PageheadPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.pagehead}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.pagehead}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagehead-start-label"
+            data-testid="variant"
+            data-block="pagehead"
+            data-variant="start"
+          >
+            <Title as={2} size="base" weight="bold" id="pagehead-start-label" data-testid="variant-label">
+              {ui.blocks.variants.pagehead.start}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageIntro
+                id="pagehead-start"
+                title={ui.vibe.pagehead.title}
+                text={ui.vibe.pagehead.text}
+                cta={ui.vibe.pagehead.cta}
+                href="#/"
+                align="start"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.start))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagehead-center-label"
+            data-testid="variant"
+            data-block="pagehead"
+            data-variant="center"
+          >
+            <Title as={2} size="base" weight="bold" id="pagehead-center-label" data-testid="variant-label">
+              {ui.blocks.variants.pagehead.center}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageIntro
+                id="pagehead-center"
+                title={ui.vibe.pagehead.title}
+                text={ui.vibe.pagehead.text}
+                cta={ui.vibe.pagehead.cta}
+                href="#/"
+                align="center"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.center))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagehead-muted-label"
+            data-testid="variant"
+            data-block="pagehead"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="pagehead-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.pagehead.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageIntro
+                id="pagehead-muted"
+                title={ui.vibe.pagehead.title}
+                text={ui.vibe.pagehead.text}
+                cta={ui.vibe.pagehead.cta}
+                href="#/"
+                align="start"
+                tone="muted"
+                density="compact"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/PagetrailPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/PagetrailPage.tsx
new file mode 100644
index 0000000..4f2129f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/PagetrailPage.tsx
@@ -0,0 +1,183 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The pagetrail page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageTrail,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+
+const PAGETRAIL_EXTRAS = {
+  value: ui.marketing.pageTrail.value,
+  caption: ui.marketing.pageTrail.caption,
+  note: ui.marketing.pageTrail.note,
+  icon: "package",
+  facts: stats,
+} as const;
+
+export function PagetrailPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.pagetrail}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.pagetrail}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-crumbs-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="crumbs"
+          >
+            <Title as={2} size="base" weight="bold" id="pagetrail-crumbs-label" data-testid="variant-label">
+              {ui.blocks.variants.pagetrail.crumbs}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-crumbs"
+                title={ui.marketing.pageTrail.title}
+                lead={ui.marketing.pageTrail.lead}
+                badge={ui.marketing.pageTrail.badge}
+                label={ui.marketing.pageTrail.label}
+                crumbs={crumbs}
+                extras={PAGETRAIL_EXTRAS}
+                aside="none"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbs))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-crumbsFigure-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="crumbsFigure"
+          >
+            <Title as={2} size="base" weight="bold" id="pagetrail-crumbsFigure-label" data-testid="variant-label">
+              {ui.blocks.variants.pagetrail.crumbsFigure}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-crumbsFigure"
+                title={ui.marketing.pageTrail.title}
+                lead={ui.marketing.pageTrail.lead}
+                badge={ui.marketing.pageTrail.badge}
+                label={ui.marketing.pageTrail.label}
+                crumbs={crumbs}
+                extras={PAGETRAIL_EXTRAS}
+                aside="figure"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsFigure))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-crumbsNote-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="crumbsNote"
+          >
+            <Title as={2} size="base" weight="bold" id="pagetrail-crumbsNote-label" data-testid="variant-label">
+              {ui.blocks.variants.pagetrail.crumbsNote}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-crumbsNote"
+                title={ui.marketing.pageTrail.title}
+                lead={ui.marketing.pageTrail.lead}
+                badge={ui.marketing.pageTrail.badge}
+                label={ui.marketing.pageTrail.label}
+                crumbs={crumbs}
+                extras={PAGETRAIL_EXTRAS}
+                aside="note"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsNote))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-keyFacts-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="keyFacts"
+          >
+            <Title as={2} size="base" weight="bold" id="pagetrail-keyFacts-label" data-testid="variant-label">
+              {ui.blocks.variants.pagetrail.keyFacts}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-keyFacts"
+                title={ui.marketing.pageTrail.title}
+                lead={ui.marketing.pageTrail.lead}
+                badge={ui.marketing.pageTrail.badge}
+                label={ui.marketing.pageTrail.label}
+                crumbs={crumbs}
+                extras={PAGETRAIL_EXTRAS}
+                aside="facts"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.keyFacts))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/PhotosPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/PhotosPage.tsx
new file mode 100644
index 0000000..5e34349
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/PhotosPage.tsx
@@ -0,0 +1,221 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The photos page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PhotoGallery,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Photo,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+
+export function PhotosPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.photos}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.photos}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-grid-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.grid}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-grid"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="grid"
+                captions="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-gridPlain-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="gridPlain"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-gridPlain-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.gridPlain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-gridPlain"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="grid"
+                captions="hide"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.gridPlain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-masonry-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="masonry"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-masonry-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.masonry}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-masonry"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="masonry"
+                captions="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-mosaic-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="mosaic"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-mosaic-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.mosaic}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-mosaic"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="mosaic"
+                captions="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.mosaic))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-featured-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="featured"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-featured-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.featured}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-featured"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="featured"
+                captions="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.featured))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-cards-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="photos-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.photos.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-cards"
+                title={ui.company.photos.title}
+                lead={ui.company.photos.lead}
+                photos={photos}
+                empty={ui.empty.photos}
+                labels={ui.company.photos}
+                layout="cards"
+                captions="show"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.cards))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/PlanPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/PlanPage.tsx
new file mode 100644
index 0000000..2b614c9
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/PlanPage.tsx
@@ -0,0 +1,131 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The plan page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PricingCard,
+  Stack,
+  Text,
+  Title,
+  type Plan,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+export function PlanPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.plan}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.plan}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="plan-standard-label"
+            data-testid="variant"
+            data-block="plan"
+            data-variant="standard"
+          >
+            <Title as={2} size="base" weight="bold" id="plan-standard-label" data-testid="variant-label">
+              {ui.blocks.variants.plan.standard}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <PricingCard
+                  plan={tiers.find((i) => i.id === "tier-team")!}
+                  labels={ui.pricing}
+                  emphasis="auto"
+                  density="default"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="plan-flat-label"
+            data-testid="variant"
+            data-block="plan"
+            data-variant="flat"
+          >
+            <Title as={2} size="base" weight="bold" id="plan-flat-label" data-testid="variant-label">
+              {ui.blocks.variants.plan.flat}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <PricingCard
+                  plan={tiers.find((i) => i.id === "tier-team")!}
+                  labels={ui.pricing}
+                  emphasis="off"
+                  density="default"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="plan-compact-label"
+            data-testid="variant"
+            data-block="plan"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="plan-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.plan.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <PricingCard
+                  plan={tiers.find((i) => i.id === "tier-team")!}
+                  labels={ui.pricing}
+                  emphasis="auto"
+                  density="compact"
+                />
+              </Box>
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/PostheaderPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/PostheaderPage.tsx
new file mode 100644
index 0000000..b047286
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/PostheaderPage.tsx
@@ -0,0 +1,168 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The postheader page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+
+export function PostheaderPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.postheader}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.postheader}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-start-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="start"
+          >
+            <Title as={2} size="base" weight="bold" id="postheader-start-label" data-testid="variant-label">
+              {ui.blocks.variants.postheader.start}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-start"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.labels}
+                layout="start"
+                cover="show"
+                meta="full"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.start))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-center-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="center"
+          >
+            <Title as={2} size="base" weight="bold" id="postheader-center-label" data-testid="variant-label">
+              {ui.blocks.variants.postheader.center}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-center"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.labels}
+                layout="center"
+                cover="show"
+                meta="full"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.center))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-noCover-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="noCover"
+          >
+            <Title as={2} size="base" weight="bold" id="postheader-noCover-label" data-testid="variant-label">
+              {ui.blocks.variants.postheader.noCover}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-noCover"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.labels}
+                layout="start"
+                cover="hide"
+                meta="full"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.noCover))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-minimal-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="postheader-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.postheader.minimal}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-minimal"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.labels}
+                layout="center"
+                cover="hide"
+                meta="short"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.minimal))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/PostsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/PostsPage.tsx
new file mode 100644
index 0000000..041925e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/PostsPage.tsx
@@ -0,0 +1,340 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The posts page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+const POSTS_FILTER = { topics, label: ui.vibe.posts.topics, topic: "" } as const;
+
+export function PostsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.posts}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.posts}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-grid-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.grid}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-grid"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-filters-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="filters"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-filters-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.filters}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-filters"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, topic: "Design", mode: "topics" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-twoUp-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="twoUp"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-twoUp-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.twoUp}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-twoUp"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-2"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-row4-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="row4"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-row4-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.row4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-row4"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-4"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.row4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-news4-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="news4"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-news4-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.news4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-news4"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-4"
+                media="image"
+                meta="news"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.news4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-list-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-list-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-list"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="list"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-magazine-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="magazine"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-magazine-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.magazine}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-magazine"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="magazine"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-textOnly-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="textOnly"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-textOnly-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.textOnly}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-textOnly"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                media="none"
+                meta="full"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-digest-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="digest"
+          >
+            <Title as={2} size="base" weight="bold" id="posts-digest-label" data-testid="variant-label">
+              {ui.blocks.variants.posts.digest}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-digest"
+                title={ui.content.posts.title}
+                posts={posts}
+                labels={ui.content.labels}
+                filter={{ ...POSTS_FILTER, mode: "none" }}
+                action={{ label: ui.content.posts.action, href: "#/" }}
+                layout="grid"
+                cols="1-3"
+                media="none"
+                meta="short"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/PostshowcasePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/PostshowcasePage.tsx
new file mode 100644
index 0000000..6ef9d43
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/PostshowcasePage.tsx
@@ -0,0 +1,184 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The postshowcase page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostShowcase,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+
+export function PostshowcasePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.postshowcase}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.postshowcase}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-introCards-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="introCards"
+          >
+            <Title as={2} size="base" weight="bold" id="postshowcase-introCards-label" data-testid="variant-label">
+              {ui.blocks.variants.postshowcase.introCards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-introCards"
+                title={ui.content.postShowcase.title}
+                lead={ui.content.postShowcase.lead}
+                badge={ui.content.postShowcase.badge}
+                posts={posts}
+                empty={ui.empty.posts}
+                labels={ui.content.labels}
+                action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                layout="intro"
+                cols="3"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-featuredEnd-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="featuredEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="postshowcase-featuredEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.postshowcase.featuredEnd}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-featuredEnd"
+                title={ui.content.postShowcase.title}
+                lead={ui.content.postShowcase.lead}
+                badge={ui.content.postShowcase.badge}
+                posts={posts}
+                empty={ui.empty.posts}
+                labels={ui.content.labels}
+                action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                layout="featured"
+                cols="3"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.featuredEnd))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-overlay3-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="overlay3"
+          >
+            <Title as={2} size="base" weight="bold" id="postshowcase-overlay3-label" data-testid="variant-label">
+              {ui.blocks.variants.postshowcase.overlay3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-overlay3"
+                title={ui.content.postShowcase.title}
+                lead={ui.content.postShowcase.lead}
+                badge={ui.content.postShowcase.badge}
+                posts={posts}
+                empty={ui.empty.posts}
+                labels={ui.content.labels}
+                action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                layout="overlay"
+                cols="3"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-overlay2-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="overlay2"
+          >
+            <Title as={2} size="base" weight="bold" id="postshowcase-overlay2-label" data-testid="variant-label">
+              {ui.blocks.variants.postshowcase.overlay2}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-overlay2"
+                title={ui.content.postShowcase.title}
+                lead={ui.content.postShowcase.lead}
+                badge={ui.content.postShowcase.badge}
+                posts={posts}
+                empty={ui.empty.posts}
+                labels={ui.content.labels}
+                action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                layout="overlay"
+                cols="2"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay2))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/PostsplitPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/PostsplitPage.tsx
new file mode 100644
index 0000000..3a506cc
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/PostsplitPage.tsx
@@ -0,0 +1,254 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The postsplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Post,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+const POSTSPLIT_EXTRAS = {
+  role: ui.content.postSplit.role,
+  bio: ui.content.postSplit.bio,
+  views: ui.content.postSplit.views,
+  likes: ui.content.postSplit.likes,
+  tags: posttags,
+  outline,
+} as const;
+
+export function PostsplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.postsplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.postsplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-centerShare-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="centerShare"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-centerShare-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.centerShare}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-centerShare"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="center"
+                mediaSide="end"
+                author="line"
+                cover="wide"
+                actions="pair"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.centerShare))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitTags-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitTags"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-splitTags-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.splitTags}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitTags"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="split"
+                mediaSide="end"
+                author="line"
+                cover="wide"
+                actions="pair"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitTags))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitBioStart-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitBioStart"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-splitBioStart-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.splitBioStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitBioStart"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="split"
+                mediaSide="start"
+                author="bio"
+                cover="wide"
+                actions="wide"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitBioStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitSquare-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitSquare"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-splitSquare-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.splitSquare}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitSquare"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="split"
+                mediaSide="end"
+                author="line"
+                cover="square"
+                actions="icons"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitSquare))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-outlineStart-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="outlineStart"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-outlineStart-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.outlineStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-outlineStart"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="outline"
+                mediaSide="start"
+                author="line"
+                cover="wide"
+                actions="pair"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.outlineStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitStats-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitStats"
+          >
+            <Title as={2} size="base" weight="bold" id="postsplit-splitStats-label" data-testid="variant-label">
+              {ui.blocks.variants.postsplit.splitStats}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitStats"
+                post={posts.find((i) => i.id === "post-static-first")!}
+                labels={ui.content.postSplit.labels}
+                extras={POSTSPLIT_EXTRAS}
+                layout="split"
+                mediaSide="end"
+                author="card"
+                cover="wide"
+                actions="pair"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitStats))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/PricingPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/PricingPage.tsx
new file mode 100644
index 0000000..86c0beb
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/PricingPage.tsx
@@ -0,0 +1,368 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The pricing page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PricingTiers,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Plan,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const DUO_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+
+export function PricingPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.pricing}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.pricing}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-grid-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.grid}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-grid"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-monthly-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="monthly"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-monthly-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.monthly}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-monthly"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="monthly"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-annual-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="annual"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-annual-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.annual}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-annual"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="annual"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-duo-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="duo"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-duo-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.duo}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-duo"
+                title={ui.site.pricing.tiersTitle}
+                plans={duo}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-2"
+                emphasis="off"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-grid2-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.grid2}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-grid2"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-2"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-grid4-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="grid4"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-grid4-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.grid4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-grid4"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-4"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-stack-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="stack"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-stack-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.stack}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-stack"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="stack"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-flat-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="flat"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-flat-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.flat}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-flat"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="off"
+                billing="off"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.flat))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-compactMuted-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="compactMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-compactMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.compactMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-compactMuted"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.compactMuted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-roomy-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="roomy"
+          >
+            <Title as={2} size="base" weight="bold" id="pricing-roomy-label" data-testid="variant-label">
+              {ui.blocks.variants.pricing.roomy}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-roomy"
+                title={ui.site.pricing.tiersTitle}
+                plans={tiers}
+                labels={ui.pricing}
+                billingLabels={ui.vibe.billing}
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.roomy))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ProductPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ProductPage.tsx
new file mode 100644
index 0000000..81dc659
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ProductPage.tsx
@@ -0,0 +1,212 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The product page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductDetail,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Product,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+
+export function ProductPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.product}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.product}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-split-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="product-split-label" data-testid="variant-label">
+              {ui.blocks.variants.product.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-split"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="split"
+                mediaSide="start"
+                thumbs="below"
+                buy="full"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-splitEnd-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="splitEnd"
+          >
+            <Title as={2} size="base" weight="bold" id="product-splitEnd-label" data-testid="variant-label">
+              {ui.blocks.variants.product.splitEnd}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-splitEnd"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="split"
+                mediaSide="end"
+                thumbs="below"
+                buy="full"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.splitEnd))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-stacked-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="product-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.product.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-stacked"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="stacked"
+                mediaSide="start"
+                thumbs="none"
+                buy="full"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-compact-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="product-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.product.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-compact"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="split"
+                mediaSide="start"
+                thumbs="none"
+                buy="compact"
+                tone="default"
+                density="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-muted-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="product-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.product.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-muted"
+                product={products.find((i) => i.id === "product-lamp")!}
+                labels={ui.commerce.detail}
+                badges={ui.commerce.badges}
+                layout="split"
+                mediaSide="start"
+                thumbs="below"
+                buy="full"
+                tone="muted"
+                density="roomy"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ProductinfoPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ProductinfoPage.tsx
new file mode 100644
index 0000000..10d7685
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ProductinfoPage.tsx
@@ -0,0 +1,135 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The productinfo page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductInfo,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Detail,
+  type Spec,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+
+export function ProductinfoPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.productinfo}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.productinfo}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="productinfo-split-label"
+            data-testid="variant"
+            data-block="productinfo"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="productinfo-split-label" data-testid="variant-label">
+              {ui.blocks.variants.productinfo.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductInfo
+                id="productinfo-split"
+                title={ui.commerce.info.title}
+                details={details}
+                specs={specs}
+                labels={ui.commerce.info}
+                layout="split"
+                expand="first"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="productinfo-stacked-label"
+            data-testid="variant"
+            data-block="productinfo"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="productinfo-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.productinfo.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductInfo
+                id="productinfo-stacked"
+                title={ui.commerce.info.title}
+                details={details}
+                specs={specs}
+                labels={ui.commerce.info}
+                layout="stacked"
+                expand="first"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="productinfo-closed-label"
+            data-testid="variant"
+            data-block="productinfo"
+            data-variant="closed"
+          >
+            <Title as={2} size="base" weight="bold" id="productinfo-closed-label" data-testid="variant-label">
+              {ui.blocks.variants.productinfo.closed}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductInfo
+                id="productinfo-closed"
+                title={ui.commerce.info.title}
+                details={details}
+                specs={specs}
+                labels={ui.commerce.info}
+                layout="split"
+                expand="none"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.closed))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ProductsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ProductsPage.tsx
new file mode 100644
index 0000000..6ef39ae
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ProductsPage.tsx
@@ -0,0 +1,337 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The products page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Product,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+
+export function ProductsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.products}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.products}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-grid3-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="products-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.products.grid3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-grid3"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-grid4-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="grid4"
+          >
+            <Title as={2} size="base" weight="bold" id="products-grid4-label" data-testid="variant-label">
+              {ui.blocks.variants.products.grid4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-grid4"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-4"
+                ratio="1/1"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-grid2-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="products-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.products.grid2}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-grid2"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-2"
+                ratio="3/4"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-list-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="products-list-label" data-testid="variant-label">
+              {ui.blocks.variants.products.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-list"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="list"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-catalog-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="catalog"
+          >
+            <Title as={2} size="base" weight="bold" id="products-catalog-label" data-testid="variant-label">
+              {ui.blocks.variants.products.catalog}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-catalog"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-4"
+                ratio="1/1"
+                rating="hide"
+                action="button"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-browse-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="browse"
+          >
+            <Title as={2} size="base" weight="bold" id="products-browse-label" data-testid="variant-label">
+              {ui.blocks.variants.products.browse}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-browse"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="none"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-showcase-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="showcase"
+          >
+            <Title as={2} size="base" weight="bold" id="products-showcase-label" data-testid="variant-label">
+              {ui.blocks.variants.products.showcase}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-showcase"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="grid"
+                cols="1-3"
+                ratio="3/4"
+                rating="show"
+                action="button"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-rail-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="rail"
+          >
+            <Title as={2} size="base" weight="bold" id="products-rail-label" data-testid="variant-label">
+              {ui.blocks.variants.products.rail}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-rail"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="rail"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-railCompact-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="railCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="products-railCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.products.railCompact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-railCompact"
+                title={ui.commerce.products.title}
+                products={products}
+                labels={ui.commerce.productLabels}
+                badges={ui.commerce.badges}
+                layout="rail"
+                cols="1-3"
+                ratio="1/1"
+                rating="hide"
+                action="button"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ProfilePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ProfilePage.tsx
new file mode 100644
index 0000000..20ad205
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ProfilePage.tsx
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The profile page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProfileForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function ProfilePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+              {ui.blocks.themes.account.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.profile}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.profile}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-stacked-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="profile-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.profile.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-stacked"
+                title={ui.account.profile.title}
+                text={ui.account.profile.text}
+                labels={ui.account.profile.labels}
+                layout="stacked"
+                avatar="show"
+                prefs="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-split-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="profile-split-label" data-testid="variant-label">
+              {ui.blocks.variants.profile.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-split"
+                title={ui.account.profile.title}
+                text={ui.account.profile.text}
+                labels={ui.account.profile.labels}
+                layout="split"
+                avatar="show"
+                prefs="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-minimal-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="profile-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.profile.minimal}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-minimal"
+                title={ui.account.profile.title}
+                text={ui.account.profile.text}
+                labels={ui.account.profile.labels}
+                layout="stacked"
+                avatar="hide"
+                prefs="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.minimal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-muted-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="profile-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.profile.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-muted"
+                title={ui.account.profile.title}
+                text={ui.account.profile.text}
+                labels={ui.account.profile.labels}
+                layout="split"
+                avatar="show"
+                prefs="show"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ProjectsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ProjectsPage.tsx
new file mode 100644
index 0000000..0348ea6
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ProjectsPage.tsx
@@ -0,0 +1,224 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The projects page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProjectGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Project,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+
+export function ProjectsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.projects}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.projects}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-cards-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-cards"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="cards"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-compact-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-compact"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="compact"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-overlay-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="overlay"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-overlay-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.overlay}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-overlay"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="overlay"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.overlay))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-bento-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="bento"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-bento-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.bento}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-bento"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="bento"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.bento))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-list-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-list-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-list"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="list"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-cardsMuted-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="cardsMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="projects-cardsMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.projects.cardsMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-cardsMuted"
+                title={ui.company.projects.title}
+                lead={ui.company.projects.lead}
+                projects={projects}
+                empty={ui.empty.projects}
+                labels={ui.company.projects}
+                layout="cards"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cardsMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ProofPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ProofPage.tsx
new file mode 100644
index 0000000..d5baf69
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ProofPage.tsx
@@ -0,0 +1,171 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The proof page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProofBand,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+export function ProofPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.proof}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.proof}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-above-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="above"
+          >
+            <Title as={2} size="base" weight="bold" id="proof-above-label" data-testid="variant-label">
+              {ui.blocks.variants.proof.above}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-above"
+                title={ui.vibe.proof.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                stats={stats}
+                layout="above"
+                logoStyle="name"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-beside-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="beside"
+          >
+            <Title as={2} size="base" weight="bold" id="proof-beside-label" data-testid="variant-label">
+              {ui.blocks.variants.proof.beside}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-beside"
+                title={ui.vibe.proof.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                stats={stats}
+                layout="beside"
+                logoStyle="name"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.beside))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-icons-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="proof-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.proof.icons}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-icons"
+                title={ui.vibe.proof.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                stats={stats}
+                layout="above"
+                logoStyle="icon"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-muted-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="proof-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.proof.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-muted"
+                title={ui.vibe.proof.title}
+                logos={logos}
+                empty={ui.empty.logos}
+                stats={stats}
+                layout="above"
+                logoStyle="name"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/QuotesplitPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/QuotesplitPage.tsx
new file mode 100644
index 0000000..0868add
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/QuotesplitPage.tsx
@@ -0,0 +1,267 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The quotesplit page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  QuoteSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+const QUOTESPLIT_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+const QUOTESPLIT_EXTRAS = { stats, logos, rating: 5, score: ui.marketing.quoteSplit.score, reviews: ui.marketing.quoteSplit.reviews } as const;
+const QUOTESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.quoteSplit.cta,
+  href: "#/customers",
+  secondary: ui.marketing.quoteSplit.secondary,
+  secondaryHref: "#/contact",
+} as const;
+
+export function QuotesplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.quotesplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.quotesplit}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-quoteCard-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="quoteCard"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-quoteCard-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.quoteCard}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-quoteCard"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="media"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.quoteCard))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-logoTiles-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="logoTiles"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-logoTiles-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.logoTiles}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-logoTiles"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="logos"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.logoTiles))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-ratingPanel-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="ratingPanel"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-ratingPanel-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.ratingPanel}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-ratingPanel"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="rating"
+                mediaSide="end"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-stackedCards-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="stackedCards"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-stackedCards-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.stackedCards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-stackedCards"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="stack"
+                mediaSide="start"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.stackedCards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-compact4-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="compact4"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-compact4-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.compact4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-compact4"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="compact"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.compact4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-bentoFigures-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="bentoFigures"
+          >
+            <Title as={2} size="base" weight="bold" id="quotesplit-bentoFigures-label" data-testid="variant-label">
+              {ui.blocks.variants.quotesplit.bentoFigures}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-bentoFigures"
+                title={ui.marketing.quoteSplit.title}
+                lead={ui.marketing.quoteSplit.lead}
+                badge={ui.marketing.quoteSplit.badge}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={QUOTESPLIT_LABELS}
+                extras={QUOTESPLIT_EXTRAS}
+                actions={QUOTESPLIT_ACTIONS}
+                layout="bento"
+                mediaSide="end"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.bentoFigures))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ReviewsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ReviewsPage.tsx
new file mode 100644
index 0000000..83efd37
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ReviewsPage.tsx
@@ -0,0 +1,195 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The reviews page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ReviewList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Review,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+export function ReviewsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.reviews}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.reviews}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-list-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-list-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-list"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="list"
+                item="card"
+                avatar="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-grid-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="grid"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-grid-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.grid}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-grid"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="grid"
+                item="card"
+                avatar="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-plain-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-plain"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="list"
+                item="plain"
+                avatar="none"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-avatars-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="avatars"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-avatars-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.avatars}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-avatars"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="list"
+                item="card"
+                avatar="image"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.avatars))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-mutedGrid-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="mutedGrid"
+          >
+            <Title as={2} size="base" weight="bold" id="reviews-mutedGrid-label" data-testid="variant-label">
+              {ui.blocks.variants.reviews.mutedGrid}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-mutedGrid"
+                title={ui.commerce.reviews.title}
+                reviews={reviews}
+                labels={ui.commerce.reviewLabels}
+                layout="grid"
+                item="card"
+                avatar="image"
+                tone="muted"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.mutedGrid))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ScreenHeader.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ScreenHeader.tsx
new file mode 100644
index 0000000..b15e27b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ScreenHeader.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The ScreenHeader part of BlocksScreen: its own file, so each file of the screen opens on one Block.
+
+import { Block, Button, Container, Group, Link, LinkPlain } from "@ui8kit/solid-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+
+export function ScreenHeader() {
+  return (
+    <Block tag="header" class="border-b border-border">
+      <LinkPlain
+        href="#main-content"
+        class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded-md focus:bg-background " +
+          "focus:px-4 focus:py-2 focus:text-sm focus:shadow"}
+        data-testid="skip-link"
+      >
+        {ui.site.header.skip}
+      </LinkPlain>
+      <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+        <Link href="#/" variant="default" class="text-lg font-bold" data-testid="brand">
+          {ui.blocks.title}
+        </Link>
+        <Group gap="4" align="center" class="flex-wrap">
+          <Link href="/catalog/" variant="default" class="text-sm font-medium" data-testid="catalog-link">
+            {ui.catalog.title}
+          </Link>
+          <Link href="/skins/" variant="default" class="text-sm font-medium" data-testid="skins-link">
+            {ui.skins.title}
+          </Link>
+          <Link href="/discovery/" variant="default" class="text-sm font-medium" data-testid="discovery-link">
+            {ui.discovery.title}
+          </Link>
+          <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => actions.toggleTheme()}>
+            {ui.theme.toggle}
+          </Button>
+        </Group>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ShellPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ShellPage.tsx
new file mode 100644
index 0000000..3303acb
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ShellPage.tsx
@@ -0,0 +1,193 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The shell page of BlocksScreen.
+
+import {
+  AppShell,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+const SHELL_NAV = { label: ui.vibe.sidebar.label, brand: ui.site.header.brand, links: sidenav, current: "item-overview" } as const;
+const SHELL_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const SHELL_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+
+export function ShellPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.shell}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.shell}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-sidebar-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="sidebar"
+          >
+            <Title as={2} size="base" weight="bold" id="shell-sidebar-label" data-testid="variant-label">
+              {ui.blocks.variants.shell.sidebar}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-sidebar"
+                title={ui.vibe.shell.title}
+                nav={SHELL_NAV}
+                user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                metrics={metrics}
+                chart={SHELL_CHART}
+                activity={SHELL_ACTIVITY}
+                layout="sidebar"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-top-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="top"
+          >
+            <Title as={2} size="base" weight="bold" id="shell-top-label" data-testid="variant-label">
+              {ui.blocks.variants.shell.top}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-top"
+                title={ui.vibe.shell.title}
+                nav={SHELL_NAV}
+                user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                metrics={metrics}
+                chart={SHELL_CHART}
+                activity={SHELL_ACTIVITY}
+                layout="top"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-panes-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="panes"
+          >
+            <Title as={2} size="base" weight="bold" id="shell-panes-label" data-testid="variant-label">
+              {ui.blocks.variants.shell.panes}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-panes"
+                title={ui.vibe.shell.title}
+                nav={SHELL_NAV}
+                user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                metrics={metrics}
+                chart={SHELL_CHART}
+                activity={SHELL_ACTIVITY}
+                layout="panes"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-dense-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="dense"
+          >
+            <Title as={2} size="base" weight="bold" id="shell-dense-label" data-testid="variant-label">
+              {ui.blocks.variants.shell.dense}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-dense"
+                title={ui.vibe.shell.title}
+                nav={SHELL_NAV}
+                user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                metrics={metrics}
+                chart={SHELL_CHART}
+                activity={SHELL_ACTIVITY}
+                layout="sidebar"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.dense))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/SidenavPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/SidenavPage.tsx
new file mode 100644
index 0000000..66d930e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/SidenavPage.tsx
@@ -0,0 +1,161 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The sidenav page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SidebarNav,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+
+export function SidenavPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.sidenav}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.sidenav}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-full-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="full"
+          >
+            <Title as={2} size="base" weight="bold" id="sidenav-full-label" data-testid="variant-label">
+              {ui.blocks.variants.sidenav.full}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                label={ui.vibe.sidebar.label}
+                brand={ui.site.header.brand}
+                links={sidenav}
+                current="item-orders"
+                userName={ui.vibe.sidebar.userName}
+                userEmail={ui.vibe.sidebar.userEmail}
+                width="full"
+                user="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-compact-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="sidenav-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.sidenav.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                label={ui.vibe.sidebar.label}
+                brand={ui.site.header.brand}
+                links={sidenav}
+                current="item-orders"
+                userName={ui.vibe.sidebar.userName}
+                userEmail={ui.vibe.sidebar.userEmail}
+                width="compact"
+                user="show"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-noUser-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="noUser"
+          >
+            <Title as={2} size="base" weight="bold" id="sidenav-noUser-label" data-testid="variant-label">
+              {ui.blocks.variants.sidenav.noUser}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                label={ui.vibe.sidebar.label}
+                brand={ui.site.header.brand}
+                links={sidenav}
+                current="item-orders"
+                userName={ui.vibe.sidebar.userName}
+                userEmail={ui.vibe.sidebar.userEmail}
+                width="full"
+                user="hide"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.noUser))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-dense-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="dense"
+          >
+            <Title as={2} size="base" weight="bold" id="sidenav-dense-label" data-testid="variant-label">
+              {ui.blocks.variants.sidenav.dense}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                label={ui.vibe.sidebar.label}
+                brand={ui.site.header.brand}
+                links={sidenav}
+                current="item-orders"
+                userName={ui.vibe.sidebar.userName}
+                userEmail={ui.vibe.sidebar.userEmail}
+                width="full"
+                user="show"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.dense))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/SitemapPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/SitemapPage.tsx
new file mode 100644
index 0000000..2013c70
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/SitemapPage.tsx
@@ -0,0 +1,223 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The sitemap page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SitemapFooter,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+
+const SITEMAP_SIGNUP = { title: ui.vibe.sitemap.signupTitle, label: ui.vibe.sitemap.signupLabel, submit: ui.vibe.sitemap.signupSubmit } as const;
+
+export function SitemapPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.sitemap}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.sitemap}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-columns-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="columns"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-columns-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.columns}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-columns"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="columns"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.columns))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-card-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-card-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.card}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-card"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="card"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-row-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-row-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.row}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-row"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="row"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-newsletter-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="newsletter"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-newsletter-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.newsletter}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-newsletter"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "first" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="columns"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.newsletter))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-status-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="status"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-status-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.status}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-status"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "show" }}
+                layout="columns"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.status))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-compact-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="sitemap-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.sitemap.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-compact"
+                label={ui.vibe.sitemap.label}
+                brand={ui.site.header.brand}
+                tagline={ui.vibe.sitemap.tagline}
+                copyright={ui.vibe.sitemap.copyright}
+                groups={sitemap}
+                signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                layout="columns"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.compact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/SkeletonPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/SkeletonPage.tsx
new file mode 100644
index 0000000..2afe851
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/SkeletonPage.tsx
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The skeleton page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SkeletonLayout,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Line,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+
+export function SkeletonPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+              {ui.blocks.themes.dashboard.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.skeleton}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.skeleton}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-cards-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="skeleton-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.skeleton.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-cards"
+                title={ui.vibe.skeleton.title}
+                label={ui.vibe.skeleton.label}
+                lines={placeholders}
+                shape="cards"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-list-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="skeleton-list-label" data-testid="variant-label">
+              {ui.blocks.variants.skeleton.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-list"
+                title={ui.vibe.skeleton.title}
+                label={ui.vibe.skeleton.label}
+                lines={placeholders}
+                shape="list"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-article-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="article"
+          >
+            <Title as={2} size="base" weight="bold" id="skeleton-article-label" data-testid="variant-label">
+              {ui.blocks.variants.skeleton.article}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-article"
+                title={ui.vibe.skeleton.title}
+                label={ui.vibe.skeleton.label}
+                lines={placeholders}
+                shape="article"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.article))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-muted-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="skeleton-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.skeleton.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-muted"
+                title={ui.vibe.skeleton.title}
+                label={ui.vibe.skeleton.label}
+                lines={placeholders}
+                shape="cards"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/SlotsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/SlotsPage.tsx
new file mode 100644
index 0000000..ab52b97
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/SlotsPage.tsx
@@ -0,0 +1,151 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The slots page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SlotBoard,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Day,
+  type Zone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+export function SlotsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.slots}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.slots}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="slots-split-label"
+            data-testid="variant"
+            data-block="slots"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="slots-split-label" data-testid="variant-label">
+              {ui.blocks.variants.slots.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SlotBoard
+                id="slots-split"
+                title={ui.commerce.slots.title}
+                lead={ui.commerce.slots.lead}
+                days={days}
+                empty={ui.empty.days}
+                zone={zones.find((i) => i.id === "zone-central")!}
+                labels={ui.commerce.slots}
+                layout="split"
+                item="card"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="slots-plain-label"
+            data-testid="variant"
+            data-block="slots"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="slots-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.slots.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SlotBoard
+                id="slots-plain"
+                title={ui.commerce.slots.title}
+                lead={ui.commerce.slots.lead}
+                days={days}
+                empty={ui.empty.days}
+                zone={zones.find((i) => i.id === "zone-central")!}
+                labels={ui.commerce.slots}
+                layout="split"
+                item="plain"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="slots-stacked-label"
+            data-testid="variant"
+            data-block="slots"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="slots-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.slots.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SlotBoard
+                id="slots-stacked"
+                title={ui.commerce.slots.title}
+                lead={ui.commerce.slots.lead}
+                days={days}
+                empty={ui.empty.days}
+                zone={zones.find((i) => i.id === "zone-central")!}
+                labels={ui.commerce.slots}
+                layout="stacked"
+                item="card"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.stacked))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/StatsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/StatsPage.tsx
new file mode 100644
index 0000000..3defc30
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/StatsPage.tsx
@@ -0,0 +1,291 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The stats page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StatsBand,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+
+export function StatsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.stats}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.stats}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-plain4-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="plain4"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-plain4-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.plain4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-plain4"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="none"
+                item="plain"
+                align="center"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.plain4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-panel-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="panel"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-panel-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.panel}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-panel"
+                title=""
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="panel"
+                item="plain"
+                align="center"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.panel))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-stack-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="stack"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-stack-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.stack}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-stack"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="stack"
+                surface="none"
+                item="plain"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.stack))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-image-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="image"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-image-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.image}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-image"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="image"
+                item="plain"
+                align="center"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.image))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-cards-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-cards"
+                title={ui.marketing.stats.title}
+                stats={[stats?.[0], stats?.[1], stats?.[2]]}
+                empty={ui.marketing.stats.empty}
+                cols="3"
+                layout="row"
+                surface="none"
+                item="card"
+                align="center"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-icons-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.icons}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-icons"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="none"
+                item="icon"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-muted2-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="muted2"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-muted2-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.muted2}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-muted2"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="2"
+                layout="row"
+                surface="none"
+                item="plain"
+                align="center"
+                tone="muted"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.muted2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-cardsCompact-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="cardsCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="stats-cardsCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.stats.cardsCompact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-cardsCompact"
+                title={ui.marketing.stats.title}
+                stats={stats}
+                empty={ui.marketing.stats.empty}
+                cols="4"
+                layout="row"
+                surface="none"
+                item="card"
+                align="center"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cardsCompact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/StepperPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/StepperPage.tsx
new file mode 100644
index 0000000..9a21534
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/StepperPage.tsx
@@ -0,0 +1,165 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The stepper page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Stepper,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+
+export function StepperPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+              {ui.blocks.themes.onboarding.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.stepper}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.stepper}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-horizontal-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="horizontal"
+          >
+            <Title as={2} size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+              {ui.blocks.variants.stepper.horizontal}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-horizontal"
+                title={ui.onboarding.stepper.title}
+                steps={steps}
+                current={2}
+                stepLabel={ui.onboarding.stepper.stepLabel}
+                back={ui.onboarding.stepper.back}
+                next={ui.onboarding.stepper.next}
+                layout="horizontal"
+                marker="number"
+                summary="show"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-vertical-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="vertical"
+          >
+            <Title as={2} size="base" weight="bold" id="stepper-vertical-label" data-testid="variant-label">
+              {ui.blocks.variants.stepper.vertical}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-vertical"
+                title={ui.onboarding.stepper.title}
+                steps={steps}
+                current={2}
+                stepLabel={ui.onboarding.stepper.stepLabel}
+                back={ui.onboarding.stepper.back}
+                next={ui.onboarding.stepper.next}
+                layout="vertical"
+                marker="number"
+                summary="show"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-icons-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="icons"
+          >
+            <Title as={2} size="base" weight="bold" id="stepper-icons-label" data-testid="variant-label">
+              {ui.blocks.variants.stepper.icons}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-icons"
+                title={ui.onboarding.stepper.title}
+                steps={steps}
+                current={2}
+                stepLabel={ui.onboarding.stepper.stepLabel}
+                back={ui.onboarding.stepper.back}
+                next={ui.onboarding.stepper.next}
+                layout="horizontal"
+                marker="icon"
+                summary="show"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.icons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-bare-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="bare"
+          >
+            <Title as={2} size="base" weight="bold" id="stepper-bare-label" data-testid="variant-label">
+              {ui.blocks.variants.stepper.bare}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-bare"
+                title={ui.onboarding.stepper.title}
+                steps={steps}
+                current={2}
+                stepLabel={ui.onboarding.stepper.stepLabel}
+                back={ui.onboarding.stepper.back}
+                next={ui.onboarding.stepper.next}
+                layout="vertical"
+                marker="icon"
+                summary="hide"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.bare))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/StepsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/StepsPage.tsx
new file mode 100644
index 0000000..e95ebb2
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/StepsPage.tsx
@@ -0,0 +1,215 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The steps page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StepsList,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+
+export function StepsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.steps}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.steps}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-row-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-row-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.row}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-row"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="row"
+                marker="number"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-rowIcons-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="rowIcons"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-rowIcons-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.rowIcons}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-rowIcons"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="row"
+                marker="icon"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-column-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="column"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-column-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.column}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-column"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="column"
+                marker="number"
+                align="start"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-centered-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="centered"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-centered-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.centered}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-centered"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="row"
+                marker="number"
+                align="center"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.centered))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-columnIcons-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="columnIcons"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-columnIcons-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.columnIcons}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-columnIcons"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="column"
+                marker="icon"
+                align="start"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.columnIcons))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-compact-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="compact"
+          >
+            <Title as={2} size="base" weight="bold" id="steps-compact-label" data-testid="variant-label">
+              {ui.blocks.variants.steps.compact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-compact"
+                title={ui.marketing.steps.title}
+                steps={steps}
+                empty={ui.empty.steps}
+                layout="row"
+                marker="number"
+                align="start"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.compact))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/StickyPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/StickyPage.tsx
new file mode 100644
index 0000000..6c57082
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/StickyPage.tsx
@@ -0,0 +1,161 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The sticky page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureSticky,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+export function StickyPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.sticky}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.sticky}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-end-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="end"
+          >
+            <Title as={2} size="base" weight="bold" id="sticky-end-label" data-testid="variant-label">
+              {ui.blocks.variants.sticky.end}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-end"
+                title={ui.vibe.sticky.title}
+                features={features}
+                empty={ui.empty.features}
+                active="feature-clear"
+                mediaSide="end"
+                item="plain"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-start-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="start"
+          >
+            <Title as={2} size="base" weight="bold" id="sticky-start-label" data-testid="variant-label">
+              {ui.blocks.variants.sticky.start}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-start"
+                title={ui.vibe.sticky.title}
+                features={features}
+                empty={ui.empty.features}
+                active="feature-clear"
+                mediaSide="start"
+                item="plain"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.start))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-card-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="sticky-card-label" data-testid="variant-label">
+              {ui.blocks.variants.sticky.card}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-card"
+                title={ui.vibe.sticky.title}
+                features={features}
+                empty={ui.empty.features}
+                active="feature-clear"
+                mediaSide="end"
+                item="card"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-muted-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="sticky-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.sticky.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-muted"
+                title={ui.vibe.sticky.title}
+                features={features}
+                empty={ui.empty.features}
+                active="feature-clear"
+                mediaSide="end"
+                item="plain"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/StoreheroPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/StoreheroPage.tsx
new file mode 100644
index 0000000..8a54746
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/StoreheroPage.tsx
@@ -0,0 +1,177 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The storehero page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoreHero,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+const STOREHERO_ACTIONS = {
+  mode: "two",
+  cta: ui.commerce.storeHero.cta,
+  href: "#/catalog",
+  secondary: ui.commerce.storeHero.secondary,
+  secondaryHref: "#/delivery",
+} as const;
+
+export function StoreheroPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.storehero}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.storehero}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-overlay-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="overlay"
+          >
+            <Title as={2} size="base" weight="bold" id="storehero-overlay-label" data-testid="variant-label">
+              {ui.blocks.variants.storehero.overlay}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-overlay"
+                title={ui.commerce.storeHero.title}
+                lead={ui.commerce.storeHero.lead}
+                badge={ui.commerce.storeHero.badge}
+                perks={perks}
+                card={ui.commerce.storeHero.card}
+                actions={STOREHERO_ACTIONS}
+                layout="overlay"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlay))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-overlayStart-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="overlayStart"
+          >
+            <Title as={2} size="base" weight="bold" id="storehero-overlayStart-label" data-testid="variant-label">
+              {ui.blocks.variants.storehero.overlayStart}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-overlayStart"
+                title={ui.commerce.storeHero.title}
+                lead={ui.commerce.storeHero.lead}
+                badge={ui.commerce.storeHero.badge}
+                perks={perks}
+                card={ui.commerce.storeHero.card}
+                actions={STOREHERO_ACTIONS}
+                layout="overlay"
+                mediaSide="start"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlayStart))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-backdrop-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="backdrop"
+          >
+            <Title as={2} size="base" weight="bold" id="storehero-backdrop-label" data-testid="variant-label">
+              {ui.blocks.variants.storehero.backdrop}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-backdrop"
+                title={ui.commerce.storeHero.title}
+                lead={ui.commerce.storeHero.lead}
+                badge={ui.commerce.storeHero.badge}
+                perks={perks}
+                card={ui.commerce.storeHero.card}
+                actions={STOREHERO_ACTIONS}
+                layout="backdrop"
+                mediaSide="end"
+                tone="default"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.backdrop))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-muted-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="storehero-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.storehero.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-muted"
+                title={ui.commerce.storeHero.title}
+                lead={ui.commerce.storeHero.lead}
+                badge={ui.commerce.storeHero.badge}
+                perks={perks}
+                card={ui.commerce.storeHero.card}
+                actions={{ ...STOREHERO_ACTIONS, mode: "one" }}
+                layout="overlay"
+                mediaSide="end"
+                tone="muted"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/StorytabsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/StorytabsPage.tsx
new file mode 100644
index 0000000..f12fd1c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/StorytabsPage.tsx
@@ -0,0 +1,137 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The storytabs page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoryTabs,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+
+export function StorytabsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.storytabs}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.storytabs}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storytabs-yearTabs-label"
+            data-testid="variant"
+            data-block="storytabs"
+            data-variant="yearTabs"
+          >
+            <Title as={2} size="base" weight="bold" id="storytabs-yearTabs-label" data-testid="variant-label">
+              {ui.blocks.variants.storytabs.yearTabs}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoryTabs
+                id="storytabs-yearTabs"
+                title={ui.company.storyTabs.title}
+                lead={ui.company.storyTabs.lead}
+                badge={ui.company.storyTabs.badge}
+                steps={milestones}
+                empty={ui.empty.milestones}
+                active="milestone-runtimes"
+                labels={ui.company.storyTabs.labels}
+                layout="years"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storytabs-carouselSplit-label"
+            data-testid="variant"
+            data-block="storytabs"
+            data-variant="carouselSplit"
+          >
+            <Title as={2} size="base" weight="bold" id="storytabs-carouselSplit-label" data-testid="variant-label">
+              {ui.blocks.variants.storytabs.carouselSplit}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoryTabs
+                id="storytabs-carouselSplit"
+                title={ui.company.storyTabs.title}
+                lead={ui.company.storyTabs.lead}
+                badge={ui.company.storyTabs.badge}
+                steps={milestones}
+                empty={ui.empty.milestones}
+                active="milestone-runtimes"
+                labels={ui.company.storyTabs.labels}
+                layout="carousel"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.carouselSplit))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storytabs-yearTabsMuted-label"
+            data-testid="variant"
+            data-block="storytabs"
+            data-variant="yearTabsMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="storytabs-yearTabsMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.storytabs.yearTabsMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoryTabs
+                id="storytabs-yearTabsMuted"
+                title={ui.company.storyTabs.title}
+                lead={ui.company.storyTabs.lead}
+                badge={ui.company.storyTabs.badge}
+                steps={milestones}
+                empty={ui.empty.milestones}
+                active="milestone-runtimes"
+                labels={ui.company.storyTabs.labels}
+                layout="years"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabsMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/SummaryPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/SummaryPage.tsx
new file mode 100644
index 0000000..ef1819b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/SummaryPage.tsx
@@ -0,0 +1,171 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The summary page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  OrderSummary,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+
+export function SummaryPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.summary}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.summary}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-card-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="summary-card-label" data-testid="variant-label">
+              {ui.blocks.variants.summary.card}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-card"
+                title={ui.commerce.summary.title}
+                rows={summary}
+                empty={ui.empty.summary}
+                labels={ui.commerce.summary}
+                layout="card"
+                cta="show"
+                note="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-plain-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="summary-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.summary.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-plain"
+                title={ui.commerce.summary.title}
+                rows={summary}
+                empty={ui.empty.summary}
+                labels={ui.commerce.summary}
+                layout="plain"
+                cta="show"
+                note="hide"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-noCta-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="noCta"
+          >
+            <Title as={2} size="base" weight="bold" id="summary-noCta-label" data-testid="variant-label">
+              {ui.blocks.variants.summary.noCta}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-noCta"
+                title={ui.commerce.summary.title}
+                rows={summary}
+                empty={ui.empty.summary}
+                labels={ui.commerce.summary}
+                layout="card"
+                cta="hide"
+                note="show"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.noCta))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-muted-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="summary-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.summary.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-muted"
+                title={ui.commerce.summary.title}
+                rows={summary}
+                empty={ui.empty.summary}
+                labels={ui.commerce.summary}
+                layout="card"
+                cta="show"
+                note="show"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/TeamPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/TeamPage.tsx
new file mode 100644
index 0000000..c65fa04
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/TeamPage.tsx
@@ -0,0 +1,229 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The team page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TeamGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Member,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+
+export function TeamPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.team}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.team}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-cards4-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="cards4"
+          >
+            <Title as={2} size="base" weight="bold" id="team-cards4-label" data-testid="variant-label">
+              {ui.blocks.variants.team.cards4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-cards4"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="cards"
+                cols="1-4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-cards3-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="cards3"
+          >
+            <Title as={2} size="base" weight="bold" id="team-cards3-label" data-testid="variant-label">
+              {ui.blocks.variants.team.cards3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-cards3"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="cards"
+                cols="1-3"
+                tone="muted"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-minimal-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="minimal"
+          >
+            <Title as={2} size="base" weight="bold" id="team-minimal-label" data-testid="variant-label">
+              {ui.blocks.variants.team.minimal}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-minimal"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="minimal"
+                cols="1-4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.minimal))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-detailed-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="detailed"
+          >
+            <Title as={2} size="base" weight="bold" id="team-detailed-label" data-testid="variant-label">
+              {ui.blocks.variants.team.detailed}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-detailed"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="detailed"
+                cols="1-3"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.detailed))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-list-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="team-list-label" data-testid="variant-label">
+              {ui.blocks.variants.team.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-list"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="list"
+                cols="1-4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-directory-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="directory"
+          >
+            <Title as={2} size="base" weight="bold" id="team-directory-label" data-testid="variant-label">
+              {ui.blocks.variants.team.directory}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-directory"
+                title={ui.company.team.title}
+                lead={ui.company.team.lead}
+                members={members}
+                empty={ui.empty.members}
+                depts={ui.company.depts}
+                layout="directory"
+                cols="1-4"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.directory))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/TemplatesPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/TemplatesPage.tsx
new file mode 100644
index 0000000..17a2739
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/TemplatesPage.tsx
@@ -0,0 +1,175 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The templates page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TemplateGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Filter,
+  type Template,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+const TEMPLATES_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "views": "metadata.views.value|compact",
+  "likes": "metadata.likes.value|compact",
+  "topic": "metadata.topic.value",
+} as const;
+const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+
+export function TemplatesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.templates}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.templates}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-grid4-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="grid4"
+          >
+            <Title as={2} size="base" weight="bold" id="templates-grid4-label" data-testid="variant-label">
+              {ui.blocks.variants.templates.grid4}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-grid4"
+                title={ui.vibe.templates.title}
+                templates={templates}
+                filters={templateFilters}
+                labels={ui.vibe.templates}
+                browseHref="#/"
+                empty={ui.empty.templates}
+                cols="1-4"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-grid3-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="templates-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.templates.grid3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-grid3"
+                title={ui.vibe.templates.title}
+                templates={templates}
+                filters={templateFilters}
+                labels={ui.vibe.templates}
+                browseHref="#/"
+                empty={ui.empty.templates}
+                cols="1-3"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-muted-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="templates-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.templates.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-muted"
+                title={ui.vibe.templates.title}
+                templates={templates}
+                filters={templateFilters}
+                labels={ui.vibe.templates}
+                browseHref="#/"
+                empty={ui.empty.templates}
+                cols="1-4"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.muted))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-roomy-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="roomy"
+          >
+            <Title as={2} size="base" weight="bold" id="templates-roomy-label" data-testid="variant-label">
+              {ui.blocks.variants.templates.roomy}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-roomy"
+                title={ui.vibe.templates.title}
+                templates={templates}
+                filters={templateFilters}
+                labels={ui.vibe.templates}
+                browseHref="#/"
+                empty={ui.empty.templates}
+                cols="1-4"
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.roomy))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/TestimonialsPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/TestimonialsPage.tsx
new file mode 100644
index 0000000..c842ab3
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/TestimonialsPage.tsx
@@ -0,0 +1,345 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The testimonials page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TestimonialGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Quote,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+const TESTIMONIALS_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+
+export function TestimonialsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.testimonials}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.testimonials}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-grid3-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.grid3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-grid3"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="grid"
+                cols="1-3"
+                item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-masonry-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="masonry"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-masonry-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.masonry}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-masonry"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="masonry"
+                cols="1-3"
+                item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-strip-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="strip"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-strip-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.strip}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-strip"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="strip"
+                cols="1-3"
+                item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-social-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="social"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-social-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.social}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-social"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="masonry"
+                cols="1-3"
+                item={{ kind: "social", avatar: "image", rating: "hide", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.social))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-featured-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="featured"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-featured-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.featured}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-featured"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="single"
+                cols="1-3"
+                item={{ kind: "plain", avatar: "image", rating: "hide", mark: "icon" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-grid2-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.grid2}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-grid2"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="grid"
+                cols="1-2"
+                item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-single-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="single"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-single-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.single}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-single"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="single"
+                cols="1-3"
+                item={{ kind: "plain", avatar: "image", rating: "hide", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-stack-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="stack"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-stack-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.stack}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-stack"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="stack"
+                cols="1-3"
+                item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.stack))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-plain-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-plain"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="grid"
+                cols="1-3"
+                item={{ kind: "plain", avatar: "none", rating: "show", mark: "none" }}
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-noRating-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="noRating"
+          >
+            <Title as={2} size="base" weight="bold" id="testimonials-noRating-label" data-testid="variant-label">
+              {ui.blocks.variants.testimonials.noRating}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-noRating"
+                title={ui.marketing.testimonials.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                labels={TESTIMONIALS_LABELS}
+                layout="grid"
+                cols="1-3"
+                item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+                tone="default"
+                density="roomy"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.noRating))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/TimelinePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/TimelinePage.tsx
new file mode 100644
index 0000000..522a6e3
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/TimelinePage.tsx
@@ -0,0 +1,157 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The timeline page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MilestoneTimeline,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+
+export function TimelinePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+              {ui.blocks.themes.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.timeline}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.timeline}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-split-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="split"
+          >
+            <Title as={2} size="base" weight="bold" id="timeline-split-label" data-testid="variant-label">
+              {ui.blocks.variants.timeline.split}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-split"
+                title={ui.company.timeline.title}
+                lead={ui.company.timeline.lead}
+                milestones={milestones}
+                empty={ui.empty.milestones}
+                layout="split"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-stacked-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="stacked"
+          >
+            <Title as={2} size="base" weight="bold" id="timeline-stacked-label" data-testid="variant-label">
+              {ui.blocks.variants.timeline.stacked}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-stacked"
+                title={ui.company.timeline.title}
+                lead={ui.company.timeline.lead}
+                milestones={milestones}
+                empty={ui.empty.milestones}
+                layout="stacked"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.stacked))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-row-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="row"
+          >
+            <Title as={2} size="base" weight="bold" id="timeline-row-label" data-testid="variant-label">
+              {ui.blocks.variants.timeline.row}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-row"
+                title={ui.company.timeline.title}
+                lead={ui.company.timeline.lead}
+                milestones={milestones}
+                empty={ui.empty.milestones}
+                layout="row"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.row))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-rowMuted-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="rowMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="timeline-rowMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.timeline.rowMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-rowMuted"
+                title={ui.company.timeline.title}
+                lead={ui.company.timeline.lead}
+                milestones={milestones}
+                empty={ui.empty.milestones}
+                layout="row"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.rowMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/TourPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/TourPage.tsx
new file mode 100644
index 0000000..d613b9b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/TourPage.tsx
@@ -0,0 +1,157 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The tour page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  TourCallout,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function TourPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+              {ui.blocks.themes.onboarding.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.tour}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.tour}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-below-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="below"
+          >
+            <Title as={2} size="base" weight="bold" id="tour-below-label" data-testid="variant-label">
+              {ui.blocks.variants.tour.below}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-below"
+                title={ui.vibe.tour.title}
+                text={ui.vibe.tour.text}
+                target={ui.vibe.tour.target}
+                position={ui.vibe.tour.position}
+                skip={ui.vibe.tour.skip}
+                next={ui.vibe.tour.next}
+                placement="below"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-above-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="above"
+          >
+            <Title as={2} size="base" weight="bold" id="tour-above-label" data-testid="variant-label">
+              {ui.blocks.variants.tour.above}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-above"
+                title={ui.vibe.tour.title}
+                text={ui.vibe.tour.text}
+                target={ui.vibe.tour.target}
+                position={ui.vibe.tour.position}
+                skip={ui.vibe.tour.skip}
+                next={ui.vibe.tour.next}
+                placement="above"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-end-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="end"
+          >
+            <Title as={2} size="base" weight="bold" id="tour-end-label" data-testid="variant-label">
+              {ui.blocks.variants.tour.end}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-end"
+                title={ui.vibe.tour.title}
+                text={ui.vibe.tour.text}
+                target={ui.vibe.tour.target}
+                position={ui.vibe.tour.position}
+                skip={ui.vibe.tour.skip}
+                next={ui.vibe.tour.next}
+                placement="end"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-muted-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="tour-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.tour.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-muted"
+                title={ui.vibe.tour.title}
+                text={ui.vibe.tour.text}
+                target={ui.vibe.tour.target}
+                position={ui.vibe.tour.position}
+                skip={ui.vibe.tour.skip}
+                next={ui.vibe.tour.next}
+                placement="below"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/UsagePage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/UsagePage.tsx
new file mode 100644
index 0000000..6384ae4
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/UsagePage.tsx
@@ -0,0 +1,164 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The usage page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  UsageCalculator,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const USAGE_SLIDER = { min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit } as const;
+const USAGE_PRICE = { rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate } as const;
+
+export function UsagePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.usage}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.usage}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-card-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="card"
+          >
+            <Title as={2} size="base" weight="bold" id="usage-card-label" data-testid="variant-label">
+              {ui.blocks.variants.usage.card}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-card"
+                title={ui.vibe.usage.title}
+                text={ui.vibe.usage.text}
+                usage={5000}
+                slider={USAGE_SLIDER}
+                price={USAGE_PRICE}
+                cta={ui.vibe.usage.cta}
+                href="#/"
+                layout="card"
+                ends="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-plain-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="usage-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.usage.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-plain"
+                title={ui.vibe.usage.title}
+                text={ui.vibe.usage.text}
+                usage={5000}
+                slider={USAGE_SLIDER}
+                price={USAGE_PRICE}
+                cta={ui.vibe.usage.cta}
+                href="#/"
+                layout="plain"
+                ends="show"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-noEnds-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="noEnds"
+          >
+            <Title as={2} size="base" weight="bold" id="usage-noEnds-label" data-testid="variant-label">
+              {ui.blocks.variants.usage.noEnds}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-noEnds"
+                title={ui.vibe.usage.title}
+                text={ui.vibe.usage.text}
+                usage={5000}
+                slider={USAGE_SLIDER}
+                price={USAGE_PRICE}
+                cta={ui.vibe.usage.cta}
+                href="#/"
+                layout="card"
+                ends="hide"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.noEnds))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-muted-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="usage-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.usage.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-muted"
+                title={ui.vibe.usage.title}
+                text={ui.vibe.usage.text}
+                usage={5000}
+                slider={USAGE_SLIDER}
+                price={USAGE_PRICE}
+                cta={ui.vibe.usage.cta}
+                href="#/"
+                layout="card"
+                ends="show"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/UspPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/UspPage.tsx
new file mode 100644
index 0000000..e27e03c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/UspPage.tsx
@@ -0,0 +1,174 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The usp page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+export function UspPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.usp}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.usp}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-strip-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="strip"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-strip-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.strip}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-strip"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="strip"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-cards-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-cards"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="cards"
+                tone="default"
+                density="default"
+                title={ui.commerce.usp.title}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-stripCompact-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="stripCompact"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-stripCompact-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.stripCompact}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-stripCompact"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="strip"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.stripCompact))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-bar-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.bar}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-bar"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="bar"
+                tone="default"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-barMuted-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="barMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="usp-barMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.usp.barMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-barMuted"
+                perks={perks}
+                empty={ui.empty.perks}
+                layout="bar"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.barMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/VideomodalPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/VideomodalPage.tsx
new file mode 100644
index 0000000..d318c3c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/VideomodalPage.tsx
@@ -0,0 +1,165 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The videomodal page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  VideoModal,
+  tpl,
+  uniqLabel,
+  type Chapter,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+
+export function VideomodalPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+              {ui.blocks.themes.onboarding.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.videomodal}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.videomodal}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-default-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="default"
+          >
+            <Title as={2} size="base" weight="bold" id="videomodal-default-label" data-testid="variant-label">
+              {ui.blocks.variants.videomodal.default}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-default"
+                title={ui.vibe.modal.title}
+                text={ui.vibe.modal.text}
+                close={ui.vibe.modal.close}
+                play={ui.vibe.modal.play}
+                chaptersTitle={ui.vibe.modal.chapters}
+                chapters={chapters}
+                size="default"
+                outline="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-wide-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="wide"
+          >
+            <Title as={2} size="base" weight="bold" id="videomodal-wide-label" data-testid="variant-label">
+              {ui.blocks.variants.videomodal.wide}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-wide"
+                title={ui.vibe.modal.title}
+                text={ui.vibe.modal.text}
+                close={ui.vibe.modal.close}
+                play={ui.vibe.modal.play}
+                chaptersTitle={ui.vibe.modal.chapters}
+                chapters={chapters}
+                size="wide"
+                outline="none"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.wide))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-chapters-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="chapters"
+          >
+            <Title as={2} size="base" weight="bold" id="videomodal-chapters-label" data-testid="variant-label">
+              {ui.blocks.variants.videomodal.chapters}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-chapters"
+                title={ui.vibe.modal.title}
+                text={ui.vibe.modal.text}
+                close={ui.vibe.modal.close}
+                play={ui.vibe.modal.play}
+                chaptersTitle={ui.vibe.modal.chapters}
+                chapters={chapters}
+                size="default"
+                outline="chapters"
+                tone="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-muted-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="videomodal-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.videomodal.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-muted"
+                title={ui.vibe.modal.title}
+                text={ui.vibe.modal.text}
+                close={ui.vibe.modal.close}
+                play={ui.vibe.modal.play}
+                chaptersTitle={ui.vibe.modal.chapters}
+                chapters={chapters}
+                size="default"
+                outline="none"
+                tone="muted"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/VideosPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/VideosPage.tsx
new file mode 100644
index 0000000..61c6c67
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/VideosPage.tsx
@@ -0,0 +1,175 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The videos page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type Quote,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function VideosPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+              {ui.blocks.themes.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.videos}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.videos}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-grid3-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="grid3"
+          >
+            <Title as={2} size="base" weight="bold" id="videos-grid3-label" data-testid="variant-label">
+              {ui.blocks.variants.videos.grid3}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-grid3"
+                title={ui.vibe.videos.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                playLabel={ui.vibe.videos.play}
+                byLine={ui.testimonials.byLine}
+                cols="1-3"
+                caption="below"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-grid2-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="grid2"
+          >
+            <Title as={2} size="base" weight="bold" id="videos-grid2-label" data-testid="variant-label">
+              {ui.blocks.variants.videos.grid2}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-grid2"
+                title={ui.vibe.videos.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                playLabel={ui.vibe.videos.play}
+                byLine={ui.testimonials.byLine}
+                cols="1-2"
+                caption="below"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid2))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-overlay-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="overlay"
+          >
+            <Title as={2} size="base" weight="bold" id="videos-overlay-label" data-testid="variant-label">
+              {ui.blocks.variants.videos.overlay}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-overlay"
+                title={ui.vibe.videos.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                playLabel={ui.vibe.videos.play}
+                byLine={ui.testimonials.byLine}
+                cols="1-3"
+                caption="overlay"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-muted-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="muted"
+          >
+            <Title as={2} size="base" weight="bold" id="videos-muted-label" data-testid="variant-label">
+              {ui.blocks.variants.videos.muted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-muted"
+                title={ui.vibe.videos.title}
+                quotes={testimonials}
+                empty={ui.empty.quotes}
+                playLabel={ui.vibe.videos.play}
+                byLine={ui.testimonials.byLine}
+                cols="1-3"
+                caption="below"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.muted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/WizardPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/WizardPage.tsx
new file mode 100644
index 0000000..6108c61
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/WizardPage.tsx
@@ -0,0 +1,164 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The wizard page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SignupWizard,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type WizardStep,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+const WIZARD_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "icon": "metadata.icon.value",
+  "fieldA": "metadata.fieldA.value",
+  "fieldB": "metadata.fieldB.value",
+} as const;
+
+const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+
+export function WizardPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+              {ui.blocks.themes.account.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.wizard}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.wizard}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-bar-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="bar"
+          >
+            <Title as={2} size="base" weight="bold" id="wizard-bar-label" data-testid="variant-label">
+              {ui.blocks.variants.wizard.bar}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-bar"
+                title={ui.vibe.wizard.title}
+                steps={wizard}
+                labels={ui.vibe.wizard.labels}
+                current={1}
+                progress="bar"
+                layout="card"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-list-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="list"
+          >
+            <Title as={2} size="base" weight="bold" id="wizard-list-label" data-testid="variant-label">
+              {ui.blocks.variants.wizard.list}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-list"
+                title={ui.vibe.wizard.title}
+                steps={wizard}
+                labels={ui.vibe.wizard.labels}
+                current={1}
+                progress="list"
+                layout="card"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-plain-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="plain"
+          >
+            <Title as={2} size="base" weight="bold" id="wizard-plain-label" data-testid="variant-label">
+              {ui.blocks.variants.wizard.plain}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-plain"
+                title={ui.vibe.wizard.title}
+                steps={wizard}
+                labels={ui.vibe.wizard.labels}
+                current={1}
+                progress="bar"
+                layout="plain"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.plain))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-second-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="second"
+          >
+            <Title as={2} size="base" weight="bold" id="wizard-second-label" data-testid="variant-label">
+              {ui.blocks.variants.wizard.second}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-second"
+                title={ui.vibe.wizard.title}
+                steps={wizard}
+                labels={ui.vibe.wizard.labels}
+                current={2}
+                progress="list"
+                layout="plain"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.second))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/BlocksScreen/ZonesPage.tsx b/apps/host-solid/xgen/screens/BlocksScreen/ZonesPage.tsx
new file mode 100644
index 0000000..98043de
--- /dev/null
+++ b/apps/host-solid/xgen/screens/BlocksScreen/ZonesPage.tsx
@@ -0,0 +1,144 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/blocks.json
+// The zones page of BlocksScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  ZoneTable,
+  tpl,
+  uniqLabel,
+  type Zone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+export function ZonesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.blocks.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+              {ui.blocks.themes.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+              {ui.blocks.names.zones}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.blocks.docs.zones}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="zones-table-label"
+            data-testid="variant"
+            data-block="zones"
+            data-variant="table"
+          >
+            <Title as={2} size="base" weight="bold" id="zones-table-label" data-testid="variant-label">
+              {ui.blocks.variants.zones.table}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ZoneTable
+                id="zones-table"
+                title={ui.commerce.zones.title}
+                lead={ui.commerce.zones.lead}
+                zones={zones}
+                empty={ui.empty.zones}
+                labels={ui.commerce.zones}
+                layout="table"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="zones-cards-label"
+            data-testid="variant"
+            data-block="zones"
+            data-variant="cards"
+          >
+            <Title as={2} size="base" weight="bold" id="zones-cards-label" data-testid="variant-label">
+              {ui.blocks.variants.zones.cards}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ZoneTable
+                id="zones-cards"
+                title={ui.commerce.zones.title}
+                lead={ui.commerce.zones.lead}
+                zones={zones}
+                empty={ui.empty.zones}
+                labels={ui.commerce.zones}
+                layout="cards"
+                tone="default"
+                density="default"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.cards))}
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="zones-tableMuted-label"
+            data-testid="variant"
+            data-block="zones"
+            data-variant="tableMuted"
+          >
+            <Title as={2} size="base" weight="bold" id="zones-tableMuted-label" data-testid="variant-label">
+              {ui.blocks.variants.zones.tableMuted}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ZoneTable
+                id="zones-tableMuted"
+                title={ui.commerce.zones.title}
+                lead={ui.commerce.zones.lead}
+                zones={zones}
+                empty={ui.empty.zones}
+                labels={ui.commerce.zones}
+                layout="table"
+                tone="muted"
+                density="compact"
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.tableMuted))}
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen.tsx b/apps/host-solid/xgen/screens/CatalogScreen.tsx
new file mode 100644
index 0000000..0335aa0
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen.tsx
@@ -0,0 +1,350 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+/**
+ * The catalog: the blocks of the kit by section and category (Marketing, Content, Promo, Support, Commerce, App
+ * and dashboard), one page per category with every variant of its blocks, and whole pages composed of blocks.
+ * Built from the catalog tree and the blocks.
+ */
+
+import { Block } from "@ui8kit/solid-ui";
+import { MarketingNavigationPage } from "./CatalogScreen/MarketingNavigationPage";
+import { MarketingHeroPage } from "./CatalogScreen/MarketingHeroPage";
+import { MarketingHeroSplitPage } from "./CatalogScreen/MarketingHeroSplitPage";
+import { MarketingPageHeadPage } from "./CatalogScreen/MarketingPageHeadPage";
+import { MarketingPageTrailPage } from "./CatalogScreen/MarketingPageTrailPage";
+import { MarketingFeaturesPage } from "./CatalogScreen/MarketingFeaturesPage";
+import { MarketingFeaturesSplitPage } from "./CatalogScreen/MarketingFeaturesSplitPage";
+import { MarketingFeatureCardsPage } from "./CatalogScreen/MarketingFeatureCardsPage";
+import { MarketingMediaListPage } from "./CatalogScreen/MarketingMediaListPage";
+import { MarketingShowcasesPage } from "./CatalogScreen/MarketingShowcasesPage";
+import { MarketingHowItWorksPage } from "./CatalogScreen/MarketingHowItWorksPage";
+import { MarketingProofPage } from "./CatalogScreen/MarketingProofPage";
+import { MarketingStatsPage } from "./CatalogScreen/MarketingStatsPage";
+import { MarketingTestimonialsPage } from "./CatalogScreen/MarketingTestimonialsPage";
+import { MarketingTestimonialsSplitPage } from "./CatalogScreen/MarketingTestimonialsSplitPage";
+import { MarketingPricingPage } from "./CatalogScreen/MarketingPricingPage";
+import { MarketingPricingToolsPage } from "./CatalogScreen/MarketingPricingToolsPage";
+import { MarketingFaqPage } from "./CatalogScreen/MarketingFaqPage";
+import { MarketingCtaPage } from "./CatalogScreen/MarketingCtaPage";
+import { MarketingCtaProofPage } from "./CatalogScreen/MarketingCtaProofPage";
+import { MarketingTeamPage } from "./CatalogScreen/MarketingTeamPage";
+import { MarketingAboutPage } from "./CatalogScreen/MarketingAboutPage";
+import { MarketingPortfolioPage } from "./CatalogScreen/MarketingPortfolioPage";
+import { MarketingCareersPage } from "./CatalogScreen/MarketingCareersPage";
+import { MarketingGalleryPage } from "./CatalogScreen/MarketingGalleryPage";
+import { MarketingFooterPage } from "./CatalogScreen/MarketingFooterPage";
+import { MarketingFooterSplitPage } from "./CatalogScreen/MarketingFooterSplitPage";
+import { ContentBlogPage } from "./CatalogScreen/ContentBlogPage";
+import { ContentPostShowcasePage } from "./CatalogScreen/ContentPostShowcasePage";
+import { ContentPostHeaderPage } from "./CatalogScreen/ContentPostHeaderPage";
+import { ContentPostHeaderSplitPage } from "./CatalogScreen/ContentPostHeaderSplitPage";
+import { ContentArticlePage } from "./CatalogScreen/ContentArticlePage";
+import { ContentTimelinePage } from "./CatalogScreen/ContentTimelinePage";
+import { ContentStoryTabsPage } from "./CatalogScreen/ContentStoryTabsPage";
+import { PromoBannersPage } from "./CatalogScreen/PromoBannersPage";
+import { PromoNewsletterPage } from "./CatalogScreen/PromoNewsletterPage";
+import { SupportContactPage } from "./CatalogScreen/SupportContactPage";
+import { SupportStatesPage } from "./CatalogScreen/SupportStatesPage";
+import { CommerceStorefrontPage } from "./CatalogScreen/CommerceStorefrontPage";
+import { CommerceCategoriesPage } from "./CatalogScreen/CommerceCategoriesPage";
+import { CommerceProductsPage } from "./CatalogScreen/CommerceProductsPage";
+import { CommerceProductPage } from "./CatalogScreen/CommerceProductPage";
+import { CommerceCartPage } from "./CatalogScreen/CommerceCartPage";
+import { CommerceCheckoutPage } from "./CatalogScreen/CommerceCheckoutPage";
+import { CommerceDeliveryPage } from "./CatalogScreen/CommerceDeliveryPage";
+import { CommerceOrdersPage } from "./CatalogScreen/CommerceOrdersPage";
+import { AppShellPage } from "./CatalogScreen/AppShellPage";
+import { AppDashboardShellsPage } from "./CatalogScreen/AppDashboardShellsPage";
+import { AppWidgetsPage } from "./CatalogScreen/AppWidgetsPage";
+import { AppBoardsPage } from "./CatalogScreen/AppBoardsPage";
+import { AppStatesPage } from "./CatalogScreen/AppStatesPage";
+import { AppAuthPage } from "./CatalogScreen/AppAuthPage";
+import { AppAuthPagesPage } from "./CatalogScreen/AppAuthPagesPage";
+import { AppSettingsPage } from "./CatalogScreen/AppSettingsPage";
+import { AppOnboardingPage } from "./CatalogScreen/AppOnboardingPage";
+import { AppGuidancePage } from "./CatalogScreen/AppGuidancePage";
+import { PageSaasLandingPage } from "./CatalogScreen/PageSaasLandingPage";
+import { PageCompanyPage } from "./CatalogScreen/PageCompanyPage";
+import { PagePortfolioPage } from "./CatalogScreen/PagePortfolioPage";
+import { PageStoreHomePage } from "./CatalogScreen/PageStoreHomePage";
+import { PageStoreHome2Page } from "./CatalogScreen/PageStoreHome2Page";
+import { PageStoreCatalogPage } from "./CatalogScreen/PageStoreCatalogPage";
+import { PageProductDetailPage } from "./CatalogScreen/PageProductDetailPage";
+import { PageCartPage } from "./CatalogScreen/PageCartPage";
+import { PageCheckoutPage } from "./CatalogScreen/PageCheckoutPage";
+import { PageShellClassicPage } from "./CatalogScreen/PageShellClassicPage";
+import { PageShellInsetPage } from "./CatalogScreen/PageShellInsetPage";
+import { PageShellRailPage } from "./CatalogScreen/PageShellRailPage";
+import { PageShellRailFooterPage } from "./CatalogScreen/PageShellRailFooterPage";
+import { PageShellCollapsedPage } from "./CatalogScreen/PageShellCollapsedPage";
+import { PageShellTwoLevelPage } from "./CatalogScreen/PageShellTwoLevelPage";
+import { PageShellTwoLevelFullPage } from "./CatalogScreen/PageShellTwoLevelFullPage";
+import { PageShellEndPage } from "./CatalogScreen/PageShellEndPage";
+import { PageShellRailEndPage } from "./CatalogScreen/PageShellRailEndPage";
+import { PageShellTopOnlyPage } from "./CatalogScreen/PageShellTopOnlyPage";
+import { PageShellSideOnlyPage } from "./CatalogScreen/PageShellSideOnlyPage";
+import { PageShellCollapsedEndPage } from "./CatalogScreen/PageShellCollapsedEndPage";
+import { IndexPage } from "./CatalogScreen/IndexPage";
+import { PagesPage } from "./CatalogScreen/PagesPage";
+import { NotfoundPage } from "./CatalogScreen/NotfoundPage";
+import { ScreenHeader } from "./CatalogScreen/ScreenHeader";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ROUTES = [
+  {"path":"","area":"index"},
+  {"path":"pages","area":"pages"},
+  {"path":"marketing-navigation","area":"marketing-navigation"},
+  {"path":"marketing-hero","area":"marketing-hero"},
+  {"path":"marketing-hero-split","area":"marketing-hero-split"},
+  {"path":"marketing-page-head","area":"marketing-page-head"},
+  {"path":"marketing-page-trail","area":"marketing-page-trail"},
+  {"path":"marketing-features","area":"marketing-features"},
+  {"path":"marketing-features-split","area":"marketing-features-split"},
+  {"path":"marketing-feature-cards","area":"marketing-feature-cards"},
+  {"path":"marketing-media-list","area":"marketing-media-list"},
+  {"path":"marketing-showcases","area":"marketing-showcases"},
+  {"path":"marketing-how-it-works","area":"marketing-how-it-works"},
+  {"path":"marketing-proof","area":"marketing-proof"},
+  {"path":"marketing-stats","area":"marketing-stats"},
+  {"path":"marketing-testimonials","area":"marketing-testimonials"},
+  {"path":"marketing-testimonials-split","area":"marketing-testimonials-split"},
+  {"path":"marketing-pricing","area":"marketing-pricing"},
+  {"path":"marketing-pricing-tools","area":"marketing-pricing-tools"},
+  {"path":"marketing-faq","area":"marketing-faq"},
+  {"path":"marketing-cta","area":"marketing-cta"},
+  {"path":"marketing-cta-proof","area":"marketing-cta-proof"},
+  {"path":"marketing-team","area":"marketing-team"},
+  {"path":"marketing-about","area":"marketing-about"},
+  {"path":"marketing-portfolio","area":"marketing-portfolio"},
+  {"path":"marketing-careers","area":"marketing-careers"},
+  {"path":"marketing-gallery","area":"marketing-gallery"},
+  {"path":"marketing-footer","area":"marketing-footer"},
+  {"path":"marketing-footer-split","area":"marketing-footer-split"},
+  {"path":"content-blog","area":"content-blog"},
+  {"path":"content-post-showcase","area":"content-post-showcase"},
+  {"path":"content-post-header","area":"content-post-header"},
+  {"path":"content-post-header-split","area":"content-post-header-split"},
+  {"path":"content-article","area":"content-article"},
+  {"path":"content-timeline","area":"content-timeline"},
+  {"path":"content-story-tabs","area":"content-story-tabs"},
+  {"path":"promo-banners","area":"promo-banners"},
+  {"path":"promo-newsletter","area":"promo-newsletter"},
+  {"path":"support-contact","area":"support-contact"},
+  {"path":"support-states","area":"support-states"},
+  {"path":"commerce-storefront","area":"commerce-storefront"},
+  {"path":"commerce-categories","area":"commerce-categories"},
+  {"path":"commerce-products","area":"commerce-products"},
+  {"path":"commerce-product","area":"commerce-product"},
+  {"path":"commerce-cart","area":"commerce-cart"},
+  {"path":"commerce-checkout","area":"commerce-checkout"},
+  {"path":"commerce-delivery","area":"commerce-delivery"},
+  {"path":"commerce-orders","area":"commerce-orders"},
+  {"path":"app-shell","area":"app-shell"},
+  {"path":"app-dashboard-shells","area":"app-dashboard-shells"},
+  {"path":"app-widgets","area":"app-widgets"},
+  {"path":"app-boards","area":"app-boards"},
+  {"path":"app-states","area":"app-states"},
+  {"path":"app-auth","area":"app-auth"},
+  {"path":"app-auth-pages","area":"app-auth-pages"},
+  {"path":"app-settings","area":"app-settings"},
+  {"path":"app-onboarding","area":"app-onboarding"},
+  {"path":"app-guidance","area":"app-guidance"},
+  {"path":"page-saas-landing","area":"page-saas-landing"},
+  {"path":"page-company","area":"page-company"},
+  {"path":"page-portfolio","area":"page-portfolio"},
+  {"path":"page-store-home","area":"page-store-home"},
+  {"path":"page-store-home-2","area":"page-store-home-2"},
+  {"path":"page-store-catalog","area":"page-store-catalog"},
+  {"path":"page-product-detail","area":"page-product-detail"},
+  {"path":"page-cart","area":"page-cart"},
+  {"path":"page-checkout","area":"page-checkout"},
+  {"path":"page-shell-classic","area":"page-shell-classic"},
+  {"path":"page-shell-inset","area":"page-shell-inset"},
+  {"path":"page-shell-rail","area":"page-shell-rail"},
+  {"path":"page-shell-rail-footer","area":"page-shell-rail-footer"},
+  {"path":"page-shell-collapsed","area":"page-shell-collapsed"},
+  {"path":"page-shell-two-level","area":"page-shell-two-level"},
+  {"path":"page-shell-two-level-full","area":"page-shell-two-level-full"},
+  {"path":"page-shell-end","area":"page-shell-end"},
+  {"path":"page-shell-rail-end","area":"page-shell-rail-end"},
+  {"path":"page-shell-top-only","area":"page-shell-top-only"},
+  {"path":"page-shell-side-only","area":"page-shell-side-only"},
+  {"path":"page-shell-collapsed-end","area":"page-shell-collapsed-end"},
+] as const;
+
+const HOME = { area: "notfound", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function CatalogScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  return (
+    <>
+      <ScreenHeader />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "index" ? (
+          <IndexPage />
+        ) : route.area === "pages" ? (
+          <PagesPage />
+        ) : route.area === "marketing-navigation" ? (
+          <MarketingNavigationPage />
+        ) : route.area === "marketing-hero" ? (
+          <MarketingHeroPage />
+        ) : route.area === "marketing-hero-split" ? (
+          <MarketingHeroSplitPage />
+        ) : route.area === "marketing-page-head" ? (
+          <MarketingPageHeadPage />
+        ) : route.area === "marketing-page-trail" ? (
+          <MarketingPageTrailPage />
+        ) : route.area === "marketing-features" ? (
+          <MarketingFeaturesPage />
+        ) : route.area === "marketing-features-split" ? (
+          <MarketingFeaturesSplitPage />
+        ) : route.area === "marketing-feature-cards" ? (
+          <MarketingFeatureCardsPage />
+        ) : route.area === "marketing-media-list" ? (
+          <MarketingMediaListPage />
+        ) : route.area === "marketing-showcases" ? (
+          <MarketingShowcasesPage />
+        ) : route.area === "marketing-how-it-works" ? (
+          <MarketingHowItWorksPage />
+        ) : route.area === "marketing-proof" ? (
+          <MarketingProofPage />
+        ) : route.area === "marketing-stats" ? (
+          <MarketingStatsPage />
+        ) : route.area === "marketing-testimonials" ? (
+          <MarketingTestimonialsPage />
+        ) : route.area === "marketing-testimonials-split" ? (
+          <MarketingTestimonialsSplitPage />
+        ) : route.area === "marketing-pricing" ? (
+          <MarketingPricingPage />
+        ) : route.area === "marketing-pricing-tools" ? (
+          <MarketingPricingToolsPage />
+        ) : route.area === "marketing-faq" ? (
+          <MarketingFaqPage />
+        ) : route.area === "marketing-cta" ? (
+          <MarketingCtaPage />
+        ) : route.area === "marketing-cta-proof" ? (
+          <MarketingCtaProofPage />
+        ) : route.area === "marketing-team" ? (
+          <MarketingTeamPage />
+        ) : route.area === "marketing-about" ? (
+          <MarketingAboutPage />
+        ) : route.area === "marketing-portfolio" ? (
+          <MarketingPortfolioPage />
+        ) : route.area === "marketing-careers" ? (
+          <MarketingCareersPage />
+        ) : route.area === "marketing-gallery" ? (
+          <MarketingGalleryPage />
+        ) : route.area === "marketing-footer" ? (
+          <MarketingFooterPage />
+        ) : route.area === "marketing-footer-split" ? (
+          <MarketingFooterSplitPage />
+        ) : route.area === "content-blog" ? (
+          <ContentBlogPage />
+        ) : route.area === "content-post-showcase" ? (
+          <ContentPostShowcasePage />
+        ) : route.area === "content-post-header" ? (
+          <ContentPostHeaderPage />
+        ) : route.area === "content-post-header-split" ? (
+          <ContentPostHeaderSplitPage />
+        ) : route.area === "content-article" ? (
+          <ContentArticlePage />
+        ) : route.area === "content-timeline" ? (
+          <ContentTimelinePage />
+        ) : route.area === "content-story-tabs" ? (
+          <ContentStoryTabsPage />
+        ) : route.area === "promo-banners" ? (
+          <PromoBannersPage />
+        ) : route.area === "promo-newsletter" ? (
+          <PromoNewsletterPage />
+        ) : route.area === "support-contact" ? (
+          <SupportContactPage />
+        ) : route.area === "support-states" ? (
+          <SupportStatesPage />
+        ) : route.area === "commerce-storefront" ? (
+          <CommerceStorefrontPage />
+        ) : route.area === "commerce-categories" ? (
+          <CommerceCategoriesPage />
+        ) : route.area === "commerce-products" ? (
+          <CommerceProductsPage />
+        ) : route.area === "commerce-product" ? (
+          <CommerceProductPage />
+        ) : route.area === "commerce-cart" ? (
+          <CommerceCartPage />
+        ) : route.area === "commerce-checkout" ? (
+          <CommerceCheckoutPage />
+        ) : route.area === "commerce-delivery" ? (
+          <CommerceDeliveryPage />
+        ) : route.area === "commerce-orders" ? (
+          <CommerceOrdersPage />
+        ) : route.area === "app-shell" ? (
+          <AppShellPage />
+        ) : route.area === "app-dashboard-shells" ? (
+          <AppDashboardShellsPage />
+        ) : route.area === "app-widgets" ? (
+          <AppWidgetsPage />
+        ) : route.area === "app-boards" ? (
+          <AppBoardsPage />
+        ) : route.area === "app-states" ? (
+          <AppStatesPage />
+        ) : route.area === "app-auth" ? (
+          <AppAuthPage />
+        ) : route.area === "app-auth-pages" ? (
+          <AppAuthPagesPage />
+        ) : route.area === "app-settings" ? (
+          <AppSettingsPage />
+        ) : route.area === "app-onboarding" ? (
+          <AppOnboardingPage />
+        ) : route.area === "app-guidance" ? (
+          <AppGuidancePage />
+        ) : route.area === "page-saas-landing" ? (
+          <PageSaasLandingPage />
+        ) : route.area === "page-company" ? (
+          <PageCompanyPage />
+        ) : route.area === "page-portfolio" ? (
+          <PagePortfolioPage />
+        ) : route.area === "page-store-home" ? (
+          <PageStoreHomePage />
+        ) : route.area === "page-store-home-2" ? (
+          <PageStoreHome2Page />
+        ) : route.area === "page-store-catalog" ? (
+          <PageStoreCatalogPage />
+        ) : route.area === "page-product-detail" ? (
+          <PageProductDetailPage />
+        ) : route.area === "page-cart" ? (
+          <PageCartPage />
+        ) : route.area === "page-checkout" ? (
+          <PageCheckoutPage />
+        ) : route.area === "page-shell-classic" ? (
+          <PageShellClassicPage />
+        ) : route.area === "page-shell-inset" ? (
+          <PageShellInsetPage />
+        ) : route.area === "page-shell-rail" ? (
+          <PageShellRailPage />
+        ) : route.area === "page-shell-rail-footer" ? (
+          <PageShellRailFooterPage />
+        ) : route.area === "page-shell-collapsed" ? (
+          <PageShellCollapsedPage />
+        ) : route.area === "page-shell-two-level" ? (
+          <PageShellTwoLevelPage />
+        ) : route.area === "page-shell-two-level-full" ? (
+          <PageShellTwoLevelFullPage />
+        ) : route.area === "page-shell-end" ? (
+          <PageShellEndPage />
+        ) : route.area === "page-shell-rail-end" ? (
+          <PageShellRailEndPage />
+        ) : route.area === "page-shell-top-only" ? (
+          <PageShellTopOnlyPage />
+        ) : route.area === "page-shell-side-only" ? (
+          <PageShellSideOnlyPage />
+        ) : route.area === "page-shell-collapsed-end" ? (
+          <PageShellCollapsedEndPage />
+        ) : (
+          <NotfoundPage />
+        )}
+      </Block>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppAuthPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppAuthPage.tsx
new file mode 100644
index 0000000..8f9d331
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppAuthPage.tsx
@@ -0,0 +1,455 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-auth page of CatalogScreen.
+
+import {
+  AuthCard,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SignupWizard,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type WizardStep,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+const WIZARD_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "icon": "metadata.icon.value",
+  "fieldA": "metadata.fieldA.value",
+  "fieldB": "metadata.fieldB.value",
+} as const;
+
+const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+
+export function AppAuthPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appAuth}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-auth-title"
+            data-testid="catalog-block"
+            data-block="auth"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-auth-title">
+                {ui.blocks.names.auth}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.auth}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-signin-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="signin"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-signin-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.signin}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-signin"
+                    title={ui.auth.signin.title}
+                    text={ui.auth.signin.text}
+                    submit={ui.auth.signin.submit}
+                    switchText={ui.auth.signin.switchText}
+                    switchLink={ui.auth.signin.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signin"
+                    layout="card"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-magic-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="magic"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-magic-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.magic}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-magic"
+                    title={ui.auth.magic.title}
+                    text={ui.auth.magic.text}
+                    submit={ui.auth.magic.submit}
+                    switchText={ui.auth.magic.switchText}
+                    switchLink={ui.auth.magic.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="magic"
+                    layout="card"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.magic))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-socialFirst-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="socialFirst"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-socialFirst-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.socialFirst}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-socialFirst"
+                    title={ui.auth.signin.title}
+                    text={ui.auth.signin.text}
+                    submit={ui.auth.signin.submit}
+                    switchText={ui.auth.signin.switchText}
+                    switchLink={ui.auth.signin.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signin"
+                    layout="card"
+                    social="first"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.socialFirst))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-signup-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="signup"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-signup-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.signup}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-signup"
+                    title={ui.auth.signup.title}
+                    text={ui.auth.signup.text}
+                    submit={ui.auth.signup.submit}
+                    switchText={ui.auth.signup.switchText}
+                    switchLink={ui.auth.signup.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signup"
+                    layout="card"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signup))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-reset-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="reset"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-reset-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.reset}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-reset"
+                    title={ui.auth.reset.title}
+                    text={ui.auth.reset.text}
+                    submit={ui.auth.reset.submit}
+                    switchText={ui.auth.reset.switchText}
+                    switchLink={ui.auth.reset.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="reset"
+                    layout="card"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.reset))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-plain-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-plain"
+                    title={ui.auth.signin.title}
+                    text={ui.auth.signin.text}
+                    submit={ui.auth.signin.submit}
+                    switchText={ui.auth.signin.switchText}
+                    switchLink={ui.auth.signin.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signin"
+                    layout="plain"
+                    social="none"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.plain))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-social-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="social"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-social-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.social}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-social"
+                    title={ui.auth.signin.title}
+                    text={ui.auth.signin.text}
+                    submit={ui.auth.signin.submit}
+                    switchText={ui.auth.signin.switchText}
+                    switchLink={ui.auth.signin.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signin"
+                    layout="card"
+                    social="show"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="auth-signupSocial-label"
+              data-testid="variant"
+              data-block="auth"
+              data-variant="signupSocial"
+            >
+              <Title as={3} size="base" weight="bold" id="auth-signupSocial-label" data-testid="variant-label">
+                {ui.blocks.variants.auth.signupSocial}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <AuthCard
+                    id="auth-signupSocial"
+                    title={ui.auth.signup.title}
+                    text={ui.auth.signup.text}
+                    submit={ui.auth.signup.submit}
+                    switchText={ui.auth.signup.switchText}
+                    switchLink={ui.auth.signup.switchLink}
+                    switchHref="#/"
+                    labels={ui.auth.labels}
+                    mode="signup"
+                    layout="plain"
+                    social="show"
+                    level={2}
+                    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))}
+                  />
+                </Box>
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-wizard-title"
+            data-testid="catalog-block"
+            data-block="wizard"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-wizard-title">
+                {ui.blocks.names.wizard}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.wizard}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="wizard-bar-label"
+              data-testid="variant"
+              data-block="wizard"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="wizard-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.wizard.bar}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SignupWizard
+                  id="wizard-bar"
+                  title={ui.vibe.wizard.title}
+                  steps={wizard}
+                  labels={ui.vibe.wizard.labels}
+                  current={1}
+                  progress="bar"
+                  layout="card"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="wizard-list-label"
+              data-testid="variant"
+              data-block="wizard"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="wizard-list-label" data-testid="variant-label">
+                {ui.blocks.variants.wizard.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SignupWizard
+                  id="wizard-list"
+                  title={ui.vibe.wizard.title}
+                  steps={wizard}
+                  labels={ui.vibe.wizard.labels}
+                  current={1}
+                  progress="list"
+                  layout="card"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="wizard-plain-label"
+              data-testid="variant"
+              data-block="wizard"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="wizard-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.wizard.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SignupWizard
+                  id="wizard-plain"
+                  title={ui.vibe.wizard.title}
+                  steps={wizard}
+                  labels={ui.vibe.wizard.labels}
+                  current={1}
+                  progress="bar"
+                  layout="plain"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="wizard-second-label"
+              data-testid="variant"
+              data-block="wizard"
+              data-variant="second"
+            >
+              <Title as={3} size="base" weight="bold" id="wizard-second-label" data-testid="variant-label">
+                {ui.blocks.variants.wizard.second}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SignupWizard
+                  id="wizard-second"
+                  title={ui.vibe.wizard.title}
+                  steps={wizard}
+                  labels={ui.vibe.wizard.labels}
+                  current={2}
+                  progress="list"
+                  layout="plain"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.second))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppAuthPagesPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppAuthPagesPage.tsx
new file mode 100644
index 0000000..eb66333
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppAuthPagesPage.tsx
@@ -0,0 +1,338 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-auth-pages page of CatalogScreen.
+
+import {
+  AuthLayout,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const AUTHPAGE_SWITCH_TO = { text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" } as const;
+
+export function AppAuthPagesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appAuthPages}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 9)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-authpage-title"
+            data-testid="catalog-block"
+            data-block="authpage"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-authpage-title">
+                {ui.blocks.names.authpage}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.authpage}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-split-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-split-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-split"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="split"
+                  side="end"
+                  mode="signin"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-splitStart-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="splitStart"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-splitStart-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.splitStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-splitStart"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="split"
+                  side="start"
+                  mode="signin"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.splitStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-centered-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.centered}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-centered"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="centered"
+                  side="end"
+                  mode="signin"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-minimal-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.minimal}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-minimal"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="minimal"
+                  side="end"
+                  mode="signin"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.minimal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-signup-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="signup"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-signup-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.signup}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-signup"
+                  title={ui.auth.signup.title}
+                  text={ui.auth.signup.text}
+                  submit={ui.auth.signup.submit}
+                  switchTo={{
+                    ...AUTHPAGE_SWITCH_TO,
+                    text: ui.auth.signup.switchText,
+                    link: ui.auth.signup.switchLink,
+                  }}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="split"
+                  side="end"
+                  mode="signup"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.signup))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-reset-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="reset"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-reset-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.reset}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-reset"
+                  title={ui.auth.reset.title}
+                  text={ui.auth.reset.text}
+                  submit={ui.auth.reset.submit}
+                  switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink }}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="centered"
+                  side="end"
+                  mode="reset"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.reset))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-magic-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="magic"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-magic-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.magic}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-magic"
+                  title={ui.auth.magic.title}
+                  text={ui.auth.magic.text}
+                  submit={ui.auth.magic.submit}
+                  switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink }}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="minimal"
+                  side="end"
+                  mode="magic"
+                  social="none"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.magic))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-social-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="social"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-social-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.social}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-social"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="split"
+                  side="end"
+                  mode="signin"
+                  social="show"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.social))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="authpage-socialFirst-label"
+              data-testid="variant"
+              data-block="authpage"
+              data-variant="socialFirst"
+            >
+              <Title as={3} size="base" weight="bold" id="authpage-socialFirst-label" data-testid="variant-label">
+                {ui.blocks.variants.authpage.socialFirst}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AuthLayout
+                  id="authpage-socialFirst"
+                  title={ui.auth.signin.title}
+                  text={ui.auth.signin.text}
+                  submit={ui.auth.signin.submit}
+                  switchTo={AUTHPAGE_SWITCH_TO}
+                  labels={ui.auth.labels}
+                  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+                  layout="centered"
+                  side="end"
+                  mode="signin"
+                  social="first"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.socialFirst))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppBoardsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppBoardsPage.tsx
new file mode 100644
index 0000000..cab968f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppBoardsPage.tsx
@@ -0,0 +1,339 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-boards page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DashboardOverview,
+  Group,
+  KanbanBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type BoardCard,
+  type Event,
+  type Lane,
+  type Point,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+
+const OVERVIEW_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const OVERVIEW_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+
+export function AppBoardsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appBoards}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 8)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-overview-title"
+            data-testid="catalog-block"
+            data-block="overview"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-overview-title">
+                {ui.blocks.names.overview}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.overview}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="overview-split-label"
+              data-testid="variant"
+              data-block="overview"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="overview-split-label" data-testid="variant-label">
+                {ui.blocks.variants.overview.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardOverview
+                  id="overview-split"
+                  title={ui.vibe.overview.title}
+                  metrics={metrics}
+                  chart={OVERVIEW_CHART}
+                  activity={OVERVIEW_ACTIVITY}
+                  layout="split"
+                  cols="4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="overview-stacked-label"
+              data-testid="variant"
+              data-block="overview"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="overview-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.overview.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardOverview
+                  id="overview-stacked"
+                  title={ui.vibe.overview.title}
+                  metrics={metrics}
+                  chart={OVERVIEW_CHART}
+                  activity={OVERVIEW_ACTIVITY}
+                  layout="stacked"
+                  cols="4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="overview-twoCols-label"
+              data-testid="variant"
+              data-block="overview"
+              data-variant="twoCols"
+            >
+              <Title as={3} size="base" weight="bold" id="overview-twoCols-label" data-testid="variant-label">
+                {ui.blocks.variants.overview.twoCols}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardOverview
+                  id="overview-twoCols"
+                  title={ui.vibe.overview.title}
+                  metrics={metrics}
+                  chart={OVERVIEW_CHART}
+                  activity={OVERVIEW_ACTIVITY}
+                  layout="split"
+                  cols="2"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.twoCols))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="overview-muted-label"
+              data-testid="variant"
+              data-block="overview"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="overview-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.overview.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardOverview
+                  id="overview-muted"
+                  title={ui.vibe.overview.title}
+                  metrics={metrics}
+                  chart={OVERVIEW_CHART}
+                  activity={OVERVIEW_ACTIVITY}
+                  layout="split"
+                  cols="4"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-kanban-title"
+            data-testid="catalog-block"
+            data-block="kanban"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-kanban-title">
+                {ui.blocks.names.kanban}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.kanban}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="kanban-detail-label"
+              data-testid="variant"
+              data-block="kanban"
+              data-variant="detail"
+            >
+              <Title as={3} size="base" weight="bold" id="kanban-detail-label" data-testid="variant-label">
+                {ui.blocks.variants.kanban.detail}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <KanbanBoard
+                  id="kanban-detail"
+                  title={ui.vibe.kanban.title}
+                  lanes={lanes}
+                  empty={ui.empty.lanes}
+                  cards={cards}
+                  countLabel={ui.vibe.kanban.count}
+                  card="detail"
+                  cols="3"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="kanban-simple-label"
+              data-testid="variant"
+              data-block="kanban"
+              data-variant="simple"
+            >
+              <Title as={3} size="base" weight="bold" id="kanban-simple-label" data-testid="variant-label">
+                {ui.blocks.variants.kanban.simple}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <KanbanBoard
+                  id="kanban-simple"
+                  title={ui.vibe.kanban.title}
+                  lanes={lanes}
+                  empty={ui.empty.lanes}
+                  cards={cards}
+                  countLabel={ui.vibe.kanban.count}
+                  card="simple"
+                  cols="3"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.simple))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="kanban-twoCols-label"
+              data-testid="variant"
+              data-block="kanban"
+              data-variant="twoCols"
+            >
+              <Title as={3} size="base" weight="bold" id="kanban-twoCols-label" data-testid="variant-label">
+                {ui.blocks.variants.kanban.twoCols}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <KanbanBoard
+                  id="kanban-twoCols"
+                  title={ui.vibe.kanban.title}
+                  lanes={lanes}
+                  empty={ui.empty.lanes}
+                  cards={cards}
+                  countLabel={ui.vibe.kanban.count}
+                  card="detail"
+                  cols="2"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="kanban-muted-label"
+              data-testid="variant"
+              data-block="kanban"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="kanban-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.kanban.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <KanbanBoard
+                  id="kanban-muted"
+                  title={ui.vibe.kanban.title}
+                  lanes={lanes}
+                  empty={ui.empty.lanes}
+                  cards={cards}
+                  countLabel={ui.vibe.kanban.count}
+                  card="detail"
+                  cols="3"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppDashboardShellsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppDashboardShellsPage.tsx
new file mode 100644
index 0000000..751e0d8
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppDashboardShellsPage.tsx
@@ -0,0 +1,429 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-dashboard-shells page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DashboardShell,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+const DASHSHELL_NAV = {
+  label: ui.dashboard.shells.label,
+  brand: ui.site.header.brand,
+  links: sidenav,
+  current: "item-orders",
+  subTitle: ui.dashboard.shells.subTitle,
+  sub: subnav,
+  subCurrent: "subitem-all",
+  search: ui.dashboard.shells.search,
+  shortcut: ui.dashboard.shells.shortcut,
+  expand: ui.dashboard.shells.expand,
+  userName: ui.dashboard.shells.userName,
+  copyright: ui.dashboard.shells.copyright,
+  footerLabel: ui.dashboard.shells.footerLabel,
+  footer: helplinks,
+} as const;
+
+export function AppDashboardShellsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appDashboardShells}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-dashshell-title"
+            data-testid="catalog-block"
+            data-block="dashshell"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-dashshell-title">
+                {ui.blocks.names.dashshell}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.dashshell}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-classic-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="classic"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-classic-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.classic}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-classic"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="show"
+                  sidebar="wide"
+                  side="start"
+                  footer="none"
+                  content="grid"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-inset-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="inset"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-inset-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.inset}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-inset"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="show"
+                  sidebar="wide"
+                  side="start"
+                  footer="inset"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.inset))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-rail-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="rail"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-rail-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.rail}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-rail"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="hide"
+                  sidebar="rail"
+                  side="start"
+                  footer="none"
+                  content="list"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.rail))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-railFooter-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="railFooter"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-railFooter-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.railFooter}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-railFooter"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="show"
+                  sidebar="rail"
+                  side="start"
+                  footer="full"
+                  content="grid"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railFooter))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-collapsed-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="collapsed"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-collapsed-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.collapsed}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-collapsed"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="show"
+                  sidebar="collapsed"
+                  side="start"
+                  footer="none"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsed))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-twoLevel-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="twoLevel"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-twoLevel-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.twoLevel}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-twoLevel"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="hide"
+                  sidebar="twolevel"
+                  side="start"
+                  footer="inset"
+                  content="list"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-twoLevelFull-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="twoLevelFull"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-twoLevelFull-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.twoLevelFull}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-twoLevelFull"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="show"
+                  sidebar="twolevel"
+                  side="start"
+                  footer="full"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevelFull))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-end-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="end"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-end-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.end}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-end"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="show"
+                  sidebar="wide"
+                  side="end"
+                  footer="full"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-railEnd-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="railEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-railEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.railEnd}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-railEnd"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="inset"
+                  search="hide"
+                  sidebar="rail"
+                  side="end"
+                  footer="inset"
+                  content="grid"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railEnd))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-topOnly-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="topOnly"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-topOnly-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.topOnly}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-topOnly"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="full"
+                  search="show"
+                  sidebar="none"
+                  side="start"
+                  footer="full"
+                  content="grid"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.topOnly))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-sideOnly-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="sideOnly"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-sideOnly-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.sideOnly}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-sideOnly"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="none"
+                  search="show"
+                  sidebar="wide"
+                  side="start"
+                  footer="inset"
+                  content="list"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.sideOnly))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="dashshell-collapsedEnd-label"
+              data-testid="variant"
+              data-block="dashshell"
+              data-variant="collapsedEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="dashshell-collapsedEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.dashshell.collapsedEnd}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DashboardShell
+                  id="dashshell-collapsedEnd"
+                  title={ui.dashboard.shells.title}
+                  nav={DASHSHELL_NAV}
+                  topbar="none"
+                  search="show"
+                  sidebar="collapsed"
+                  side="end"
+                  footer="full"
+                  content="split"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsedEnd))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppGuidancePage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppGuidancePage.tsx
new file mode 100644
index 0000000..4180dc2
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppGuidancePage.tsx
@@ -0,0 +1,312 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-guidance page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  TourCallout,
+  VideoModal,
+  tpl,
+  uniqLabel,
+  type Chapter,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+
+export function AppGuidancePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appGuidance}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 8)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-tour-title"
+            data-testid="catalog-block"
+            data-block="tour"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-tour-title">
+                {ui.blocks.names.tour}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.tour}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="tour-below-label"
+              data-testid="variant"
+              data-block="tour"
+              data-variant="below"
+            >
+              <Title as={3} size="base" weight="bold" id="tour-below-label" data-testid="variant-label">
+                {ui.blocks.variants.tour.below}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TourCallout
+                  id="tour-below"
+                  title={ui.vibe.tour.title}
+                  text={ui.vibe.tour.text}
+                  target={ui.vibe.tour.target}
+                  position={ui.vibe.tour.position}
+                  skip={ui.vibe.tour.skip}
+                  next={ui.vibe.tour.next}
+                  placement="below"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="tour-above-label"
+              data-testid="variant"
+              data-block="tour"
+              data-variant="above"
+            >
+              <Title as={3} size="base" weight="bold" id="tour-above-label" data-testid="variant-label">
+                {ui.blocks.variants.tour.above}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TourCallout
+                  id="tour-above"
+                  title={ui.vibe.tour.title}
+                  text={ui.vibe.tour.text}
+                  target={ui.vibe.tour.target}
+                  position={ui.vibe.tour.position}
+                  skip={ui.vibe.tour.skip}
+                  next={ui.vibe.tour.next}
+                  placement="above"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="tour-end-label"
+              data-testid="variant"
+              data-block="tour"
+              data-variant="end"
+            >
+              <Title as={3} size="base" weight="bold" id="tour-end-label" data-testid="variant-label">
+                {ui.blocks.variants.tour.end}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TourCallout
+                  id="tour-end"
+                  title={ui.vibe.tour.title}
+                  text={ui.vibe.tour.text}
+                  target={ui.vibe.tour.target}
+                  position={ui.vibe.tour.position}
+                  skip={ui.vibe.tour.skip}
+                  next={ui.vibe.tour.next}
+                  placement="end"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="tour-muted-label"
+              data-testid="variant"
+              data-block="tour"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="tour-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.tour.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TourCallout
+                  id="tour-muted"
+                  title={ui.vibe.tour.title}
+                  text={ui.vibe.tour.text}
+                  target={ui.vibe.tour.target}
+                  position={ui.vibe.tour.position}
+                  skip={ui.vibe.tour.skip}
+                  next={ui.vibe.tour.next}
+                  placement="below"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-videomodal-title"
+            data-testid="catalog-block"
+            data-block="videomodal"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-videomodal-title">
+                {ui.blocks.names.videomodal}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.videomodal}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videomodal-default-label"
+              data-testid="variant"
+              data-block="videomodal"
+              data-variant="default"
+            >
+              <Title as={3} size="base" weight="bold" id="videomodal-default-label" data-testid="variant-label">
+                {ui.blocks.variants.videomodal.default}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoModal
+                  id="videomodal-default"
+                  title={ui.vibe.modal.title}
+                  text={ui.vibe.modal.text}
+                  close={ui.vibe.modal.close}
+                  play={ui.vibe.modal.play}
+                  chaptersTitle={ui.vibe.modal.chapters}
+                  chapters={chapters}
+                  size="default"
+                  outline="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videomodal-wide-label"
+              data-testid="variant"
+              data-block="videomodal"
+              data-variant="wide"
+            >
+              <Title as={3} size="base" weight="bold" id="videomodal-wide-label" data-testid="variant-label">
+                {ui.blocks.variants.videomodal.wide}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoModal
+                  id="videomodal-wide"
+                  title={ui.vibe.modal.title}
+                  text={ui.vibe.modal.text}
+                  close={ui.vibe.modal.close}
+                  play={ui.vibe.modal.play}
+                  chaptersTitle={ui.vibe.modal.chapters}
+                  chapters={chapters}
+                  size="wide"
+                  outline="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.wide))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videomodal-chapters-label"
+              data-testid="variant"
+              data-block="videomodal"
+              data-variant="chapters"
+            >
+              <Title as={3} size="base" weight="bold" id="videomodal-chapters-label" data-testid="variant-label">
+                {ui.blocks.variants.videomodal.chapters}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoModal
+                  id="videomodal-chapters"
+                  title={ui.vibe.modal.title}
+                  text={ui.vibe.modal.text}
+                  close={ui.vibe.modal.close}
+                  play={ui.vibe.modal.play}
+                  chaptersTitle={ui.vibe.modal.chapters}
+                  chapters={chapters}
+                  size="default"
+                  outline="chapters"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videomodal-muted-label"
+              data-testid="variant"
+              data-block="videomodal"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="videomodal-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.videomodal.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoModal
+                  id="videomodal-muted"
+                  title={ui.vibe.modal.title}
+                  text={ui.vibe.modal.text}
+                  close={ui.vibe.modal.close}
+                  play={ui.vibe.modal.play}
+                  chaptersTitle={ui.vibe.modal.chapters}
+                  chapters={chapters}
+                  size="default"
+                  outline="none"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppOnboardingPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppOnboardingPage.tsx
new file mode 100644
index 0000000..046dc77
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppOnboardingPage.tsx
@@ -0,0 +1,400 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-onboarding page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Checklist,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Stepper,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+  type Task,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+
+export function AppOnboardingPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appOnboarding}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 11)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-checklist-title"
+            data-testid="catalog-block"
+            data-block="checklist"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-checklist-title">
+                {ui.blocks.names.checklist}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.checklist}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-card-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-card-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.card}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-card"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="bar"
+                  marker="check"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-expand-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="expand"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-expand-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.expand}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-expand"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="bar"
+                  marker="check"
+                  detail="expand"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-plain-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-plain"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="plain"
+                  progress="bar"
+                  marker="check"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-text-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="text"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-text-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.text}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-text"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="text"
+                  marker="check"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-none-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="none"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-none-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.none}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-none"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="plain"
+                  progress="none"
+                  marker="check"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.none))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-numbered-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="numbered"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-numbered-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.numbered}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-numbered"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="bar"
+                  marker="number"
+                  detail="always"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checklist-muted-label"
+              data-testid="variant"
+              data-block="checklist"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="checklist-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.checklist.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Checklist
+                  id="checklist-muted"
+                  title={ui.onboarding.checklist.title}
+                  tasks={checklist}
+                  empty={ui.empty.tasks}
+                  progressLabel={ui.onboarding.checklist.progress}
+                  layout="card"
+                  progress="text"
+                  marker="number"
+                  detail="always"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-stepper-title"
+            data-testid="catalog-block"
+            data-block="stepper"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-stepper-title">
+                {ui.blocks.names.stepper}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.stepper}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-horizontal-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="horizontal"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.horizontal}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-horizontal"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="horizontal"
+                  marker="number"
+                  summary="show"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-vertical-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="vertical"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-vertical-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.vertical}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-vertical"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="vertical"
+                  marker="number"
+                  summary="show"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-icons-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.icons}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-icons"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="horizontal"
+                  marker="icon"
+                  summary="show"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-bare-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="bare"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-bare-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.bare}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-bare"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="vertical"
+                  marker="icon"
+                  summary="hide"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.bare))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppSettingsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppSettingsPage.tsx
new file mode 100644
index 0000000..5d36a06
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppSettingsPage.tsx
@@ -0,0 +1,166 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-settings page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProfileForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function AppSettingsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appSettings}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-profile-title"
+            data-testid="catalog-block"
+            data-block="profile"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-profile-title">
+                {ui.blocks.names.profile}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.profile}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="profile-stacked-label"
+              data-testid="variant"
+              data-block="profile"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="profile-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.profile.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProfileForm
+                  id="profile-stacked"
+                  title={ui.account.profile.title}
+                  text={ui.account.profile.text}
+                  labels={ui.account.profile.labels}
+                  layout="stacked"
+                  avatar="show"
+                  prefs="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="profile-split-label"
+              data-testid="variant"
+              data-block="profile"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="profile-split-label" data-testid="variant-label">
+                {ui.blocks.variants.profile.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProfileForm
+                  id="profile-split"
+                  title={ui.account.profile.title}
+                  text={ui.account.profile.text}
+                  labels={ui.account.profile.labels}
+                  layout="split"
+                  avatar="show"
+                  prefs="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="profile-minimal-label"
+              data-testid="variant"
+              data-block="profile"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="profile-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.profile.minimal}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProfileForm
+                  id="profile-minimal"
+                  title={ui.account.profile.title}
+                  text={ui.account.profile.text}
+                  labels={ui.account.profile.labels}
+                  layout="stacked"
+                  avatar="hide"
+                  prefs="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.minimal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="profile-muted-label"
+              data-testid="variant"
+              data-block="profile"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="profile-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.profile.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProfileForm
+                  id="profile-muted"
+                  title={ui.account.profile.title}
+                  text={ui.account.profile.text}
+                  labels={ui.account.profile.labels}
+                  layout="split"
+                  avatar="show"
+                  prefs="show"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppShellPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppShellPage.tsx
new file mode 100644
index 0000000..220eb3f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppShellPage.tsx
@@ -0,0 +1,453 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-shell page of CatalogScreen.
+
+import {
+  AppShell,
+  Block,
+  BottomNav,
+  Box,
+  Container,
+  Group,
+  Link,
+  SidebarNav,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+
+const SHELL_NAV = { label: ui.vibe.sidebar.label, brand: ui.site.header.brand, links: sidenav, current: "item-overview" } as const;
+const SHELL_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const SHELL_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+
+export function AppShellPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appShell}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-shell-title"
+            data-testid="catalog-block"
+            data-block="shell"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-shell-title">
+                {ui.blocks.names.shell}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.shell}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="shell-sidebar-label"
+              data-testid="variant"
+              data-block="shell"
+              data-variant="sidebar"
+            >
+              <Title as={3} size="base" weight="bold" id="shell-sidebar-label" data-testid="variant-label">
+                {ui.blocks.variants.shell.sidebar}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AppShell
+                  id="shell-sidebar"
+                  title={ui.vibe.shell.title}
+                  nav={SHELL_NAV}
+                  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  metrics={metrics}
+                  chart={SHELL_CHART}
+                  activity={SHELL_ACTIVITY}
+                  layout="sidebar"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="shell-top-label"
+              data-testid="variant"
+              data-block="shell"
+              data-variant="top"
+            >
+              <Title as={3} size="base" weight="bold" id="shell-top-label" data-testid="variant-label">
+                {ui.blocks.variants.shell.top}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AppShell
+                  id="shell-top"
+                  title={ui.vibe.shell.title}
+                  nav={SHELL_NAV}
+                  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  metrics={metrics}
+                  chart={SHELL_CHART}
+                  activity={SHELL_ACTIVITY}
+                  layout="top"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="shell-panes-label"
+              data-testid="variant"
+              data-block="shell"
+              data-variant="panes"
+            >
+              <Title as={3} size="base" weight="bold" id="shell-panes-label" data-testid="variant-label">
+                {ui.blocks.variants.shell.panes}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AppShell
+                  id="shell-panes"
+                  title={ui.vibe.shell.title}
+                  nav={SHELL_NAV}
+                  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  metrics={metrics}
+                  chart={SHELL_CHART}
+                  activity={SHELL_ACTIVITY}
+                  layout="panes"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="shell-dense-label"
+              data-testid="variant"
+              data-block="shell"
+              data-variant="dense"
+            >
+              <Title as={3} size="base" weight="bold" id="shell-dense-label" data-testid="variant-label">
+                {ui.blocks.variants.shell.dense}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AppShell
+                  id="shell-dense"
+                  title={ui.vibe.shell.title}
+                  nav={SHELL_NAV}
+                  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  metrics={metrics}
+                  chart={SHELL_CHART}
+                  activity={SHELL_ACTIVITY}
+                  layout="sidebar"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.dense))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-sidenav-title"
+            data-testid="catalog-block"
+            data-block="sidenav"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-sidenav-title">
+                {ui.blocks.names.sidenav}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.sidenav}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sidenav-full-label"
+              data-testid="variant"
+              data-block="sidenav"
+              data-variant="full"
+            >
+              <Title as={3} size="base" weight="bold" id="sidenav-full-label" data-testid="variant-label">
+                {ui.blocks.variants.sidenav.full}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SidebarNav
+                  label={ui.vibe.sidebar.label}
+                  brand={ui.site.header.brand}
+                  links={sidenav}
+                  current="item-orders"
+                  userName={ui.vibe.sidebar.userName}
+                  userEmail={ui.vibe.sidebar.userEmail}
+                  width="full"
+                  user="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sidenav-compact-label"
+              data-testid="variant"
+              data-block="sidenav"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="sidenav-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.sidenav.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SidebarNav
+                  label={ui.vibe.sidebar.label}
+                  brand={ui.site.header.brand}
+                  links={sidenav}
+                  current="item-orders"
+                  userName={ui.vibe.sidebar.userName}
+                  userEmail={ui.vibe.sidebar.userEmail}
+                  width="compact"
+                  user="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sidenav-noUser-label"
+              data-testid="variant"
+              data-block="sidenav"
+              data-variant="noUser"
+            >
+              <Title as={3} size="base" weight="bold" id="sidenav-noUser-label" data-testid="variant-label">
+                {ui.blocks.variants.sidenav.noUser}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SidebarNav
+                  label={ui.vibe.sidebar.label}
+                  brand={ui.site.header.brand}
+                  links={sidenav}
+                  current="item-orders"
+                  userName={ui.vibe.sidebar.userName}
+                  userEmail={ui.vibe.sidebar.userEmail}
+                  width="full"
+                  user="hide"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.noUser))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sidenav-dense-label"
+              data-testid="variant"
+              data-block="sidenav"
+              data-variant="dense"
+            >
+              <Title as={3} size="base" weight="bold" id="sidenav-dense-label" data-testid="variant-label">
+                {ui.blocks.variants.sidenav.dense}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SidebarNav
+                  label={ui.vibe.sidebar.label}
+                  brand={ui.site.header.brand}
+                  links={sidenav}
+                  current="item-orders"
+                  userName={ui.vibe.sidebar.userName}
+                  userEmail={ui.vibe.sidebar.userEmail}
+                  width="full"
+                  user="show"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.dense))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-bottomnav-title"
+            data-testid="catalog-block"
+            data-block="bottomnav"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-bottomnav-title">
+                {ui.blocks.names.bottomnav}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.bottomnav}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bottomnav-labels-label"
+              data-testid="variant"
+              data-block="bottomnav"
+              data-variant="labels"
+            >
+              <Title as={3} size="base" weight="bold" id="bottomnav-labels-label" data-testid="variant-label">
+                {ui.blocks.variants.bottomnav.labels}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BottomNav
+                  label={ui.vibe.bottom.label}
+                  tabs={tabs}
+                  current="tab-explore"
+                  labels="show"
+                  position="static"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bottomnav-icons-label"
+              data-testid="variant"
+              data-block="bottomnav"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="bottomnav-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.bottomnav.icons}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BottomNav
+                  label={ui.vibe.bottom.label}
+                  tabs={tabs}
+                  current="tab-explore"
+                  labels="hide"
+                  position="static"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bottomnav-sticky-label"
+              data-testid="variant"
+              data-block="bottomnav"
+              data-variant="sticky"
+            >
+              <Title as={3} size="base" weight="bold" id="bottomnav-sticky-label" data-testid="variant-label">
+                {ui.blocks.variants.bottomnav.sticky}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BottomNav
+                  label={ui.vibe.bottom.label}
+                  tabs={tabs}
+                  current="tab-explore"
+                  labels="show"
+                  position="sticky"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.sticky))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bottomnav-muted-label"
+              data-testid="variant"
+              data-block="bottomnav"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="bottomnav-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.bottomnav.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BottomNav
+                  label={ui.vibe.bottom.label}
+                  tabs={tabs}
+                  current="tab-explore"
+                  labels="show"
+                  position="static"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppStatesPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppStatesPage.tsx
new file mode 100644
index 0000000..6a1fc9d
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppStatesPage.tsx
@@ -0,0 +1,351 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-states page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  EmptyPanel,
+  Group,
+  Link,
+  SkeletonLayout,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Line,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+
+export function AppStatesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appStates}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-empty-title"
+            data-testid="catalog-block"
+            data-block="empty"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-empty-title">
+                {ui.blocks.names.empty}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.empty}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-illustrated-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="illustrated"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-illustrated-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.illustrated}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-illustrated"
+                  title={ui.dashboard.empty.tour.title}
+                  text={ui.dashboard.empty.tour.text}
+                  cta={ui.dashboard.empty.tour.cta}
+                  ctaHref="#/"
+                  layout="card"
+                  actions="button"
+                  visual="image"
+                  size="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-orders-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="orders"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-orders-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.orders}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-orders"
+                  title={ui.dashboard.empty.orders.title}
+                  text={ui.dashboard.empty.orders.text}
+                  cta={ui.dashboard.empty.orders.cta}
+                  ctaHref="#/"
+                  layout="card"
+                  actions="button"
+                  visual="icon"
+                  size="default"
+                  icon="shopping-bag"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-results-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="results"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-results-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.results}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-results"
+                  title={ui.dashboard.empty.results.title}
+                  text={ui.dashboard.empty.results.text}
+                  cta={ui.dashboard.empty.results.cta}
+                  ctaHref="#/"
+                  layout="plain"
+                  actions="button"
+                  visual="icon"
+                  size="default"
+                  icon="search"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.results))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-inbox-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="inbox"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-inbox-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.inbox}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-inbox"
+                  title={ui.dashboard.empty.inbox.title}
+                  text={ui.dashboard.empty.inbox.text}
+                  cta={ui.dashboard.empty.inbox.cta}
+                  ctaHref="#/"
+                  layout="card"
+                  actions="none"
+                  visual="icon"
+                  size="default"
+                  icon="inbox"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.inbox))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-compact-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-compact"
+                  title={ui.dashboard.empty.inbox.title}
+                  text={ui.dashboard.empty.inbox.text}
+                  cta={ui.dashboard.empty.inbox.cta}
+                  ctaHref="#/"
+                  layout="card"
+                  actions="button"
+                  visual="icon"
+                  size="compact"
+                  icon="inbox"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="empty-plainNoAction-label"
+              data-testid="variant"
+              data-block="empty"
+              data-variant="plainNoAction"
+            >
+              <Title as={3} size="base" weight="bold" id="empty-plainNoAction-label" data-testid="variant-label">
+                {ui.blocks.variants.empty.plainNoAction}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <EmptyPanel
+                  id="empty-plainNoAction"
+                  title={ui.dashboard.empty.results.title}
+                  text={ui.dashboard.empty.results.text}
+                  cta={ui.dashboard.empty.results.cta}
+                  ctaHref="#/"
+                  layout="plain"
+                  actions="none"
+                  visual="icon"
+                  size="compact"
+                  icon="search"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.plainNoAction))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-skeleton-title"
+            data-testid="catalog-block"
+            data-block="skeleton"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-skeleton-title">
+                {ui.blocks.names.skeleton}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.skeleton}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="skeleton-cards-label"
+              data-testid="variant"
+              data-block="skeleton"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="skeleton-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.skeleton.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SkeletonLayout
+                  id="skeleton-cards"
+                  title={ui.vibe.skeleton.title}
+                  label={ui.vibe.skeleton.label}
+                  lines={placeholders}
+                  shape="cards"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="skeleton-list-label"
+              data-testid="variant"
+              data-block="skeleton"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="skeleton-list-label" data-testid="variant-label">
+                {ui.blocks.variants.skeleton.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SkeletonLayout
+                  id="skeleton-list"
+                  title={ui.vibe.skeleton.title}
+                  label={ui.vibe.skeleton.label}
+                  lines={placeholders}
+                  shape="list"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="skeleton-article-label"
+              data-testid="variant"
+              data-block="skeleton"
+              data-variant="article"
+            >
+              <Title as={3} size="base" weight="bold" id="skeleton-article-label" data-testid="variant-label">
+                {ui.blocks.variants.skeleton.article}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SkeletonLayout
+                  id="skeleton-article"
+                  title={ui.vibe.skeleton.title}
+                  label={ui.vibe.skeleton.label}
+                  lines={placeholders}
+                  shape="article"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.article))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="skeleton-muted-label"
+              data-testid="variant"
+              data-block="skeleton"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="skeleton-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.skeleton.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SkeletonLayout
+                  id="skeleton-muted"
+                  title={ui.vibe.skeleton.title}
+                  label={ui.vibe.skeleton.label}
+                  lines={placeholders}
+                  shape="cards"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/AppWidgetsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/AppWidgetsPage.tsx
new file mode 100644
index 0000000..c6152eb
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/AppWidgetsPage.tsx
@@ -0,0 +1,446 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The app-widgets page of CatalogScreen.
+
+import {
+  ActivityFeed,
+  Block,
+  Box,
+  ChartPanel,
+  Container,
+  Group,
+  Link,
+  MetricRow,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type Point,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+
+export function AppWidgetsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.app.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.appWidgets}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-metrics-title"
+            data-testid="catalog-block"
+            data-block="metrics"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-metrics-title">
+                {ui.blocks.names.metrics}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.metrics}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="metrics-tiles-label"
+              data-testid="variant"
+              data-block="metrics"
+              data-variant="tiles"
+            >
+              <Title as={3} size="base" weight="bold" id="metrics-tiles-label" data-testid="variant-label">
+                {ui.blocks.variants.metrics.tiles}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MetricRow
+                  id="metrics-tiles"
+                  title={ui.dashboard.metrics.title}
+                  metrics={metrics}
+                  empty={ui.empty.metrics}
+                  cols="4"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="metrics-twoUp-label"
+              data-testid="variant"
+              data-block="metrics"
+              data-variant="twoUp"
+            >
+              <Title as={3} size="base" weight="bold" id="metrics-twoUp-label" data-testid="variant-label">
+                {ui.blocks.variants.metrics.twoUp}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MetricRow
+                  id="metrics-twoUp"
+                  title={ui.dashboard.metrics.title}
+                  metrics={metrics}
+                  empty={ui.empty.metrics}
+                  cols="2"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.twoUp))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="metrics-compact-label"
+              data-testid="variant"
+              data-block="metrics"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="metrics-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.metrics.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MetricRow
+                  id="metrics-compact"
+                  title={ui.dashboard.metrics.title}
+                  metrics={metrics}
+                  empty={ui.empty.metrics}
+                  cols="4"
+                  item="compact"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="metrics-muted-label"
+              data-testid="variant"
+              data-block="metrics"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="metrics-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.metrics.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MetricRow
+                  id="metrics-muted"
+                  title={ui.dashboard.metrics.title}
+                  metrics={metrics}
+                  empty={ui.empty.metrics}
+                  cols="2"
+                  item="compact"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-chart-title"
+            data-testid="catalog-block"
+            data-block="chart"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-chart-title">
+                {ui.blocks.names.chart}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.chart}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="chart-bars-label"
+              data-testid="variant"
+              data-block="chart"
+              data-variant="bars"
+            >
+              <Title as={3} size="base" weight="bold" id="chart-bars-label" data-testid="variant-label">
+                {ui.blocks.variants.chart.bars}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ChartPanel
+                  id="chart-bars"
+                  title={ui.dashboard.chart.title}
+                  text={ui.dashboard.chart.text}
+                  series={series}
+                  empty={ui.empty.series}
+                  summary={ui.dashboard.chart.summary}
+                  percent={ui.dashboard.chart.percent}
+                  chart="bars"
+                  size="default"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="chart-short-label"
+              data-testid="variant"
+              data-block="chart"
+              data-variant="short"
+            >
+              <Title as={3} size="base" weight="bold" id="chart-short-label" data-testid="variant-label">
+                {ui.blocks.variants.chart.short}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ChartPanel
+                  id="chart-short"
+                  title={ui.dashboard.chart.title}
+                  text={ui.dashboard.chart.text}
+                  series={series}
+                  empty={ui.empty.series}
+                  summary={ui.dashboard.chart.summary}
+                  percent={ui.dashboard.chart.percent}
+                  chart="bars"
+                  size="compact"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.short))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="chart-meters-label"
+              data-testid="variant"
+              data-block="chart"
+              data-variant="meters"
+            >
+              <Title as={3} size="base" weight="bold" id="chart-meters-label" data-testid="variant-label">
+                {ui.blocks.variants.chart.meters}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ChartPanel
+                  id="chart-meters"
+                  title={ui.dashboard.chart.title}
+                  text={ui.dashboard.chart.text}
+                  series={series}
+                  empty={ui.empty.series}
+                  summary={ui.dashboard.chart.summary}
+                  percent={ui.dashboard.chart.percent}
+                  chart="meters"
+                  size="default"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="chart-muted-label"
+              data-testid="variant"
+              data-block="chart"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="chart-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.chart.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ChartPanel
+                  id="chart-muted"
+                  title={ui.dashboard.chart.title}
+                  text={ui.dashboard.chart.text}
+                  series={series}
+                  empty={ui.empty.series}
+                  summary={ui.dashboard.chart.summary}
+                  percent={ui.dashboard.chart.percent}
+                  chart="meters"
+                  size="compact"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-activity-title"
+            data-testid="catalog-block"
+            data-block="activity"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-activity-title">
+                {ui.blocks.names.activity}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.activity}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="activity-timeline-label"
+              data-testid="variant"
+              data-block="activity"
+              data-variant="timeline"
+            >
+              <Title as={3} size="base" weight="bold" id="activity-timeline-label" data-testid="variant-label">
+                {ui.blocks.variants.activity.timeline}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ActivityFeed
+                  id="activity-timeline"
+                  title={ui.dashboard.activity.title}
+                  text={ui.dashboard.activity.text}
+                  events={activity}
+                  empty={ui.empty.activity}
+                  layout="timeline"
+                  density="default"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="activity-list-label"
+              data-testid="variant"
+              data-block="activity"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="activity-list-label" data-testid="variant-label">
+                {ui.blocks.variants.activity.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ActivityFeed
+                  id="activity-list"
+                  title={ui.dashboard.activity.title}
+                  text={ui.dashboard.activity.text}
+                  events={activity}
+                  empty={ui.empty.activity}
+                  layout="list"
+                  density="default"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="activity-compact-label"
+              data-testid="variant"
+              data-block="activity"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="activity-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.activity.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ActivityFeed
+                  id="activity-compact"
+                  title={ui.dashboard.activity.title}
+                  text={ui.dashboard.activity.text}
+                  events={activity}
+                  empty={ui.empty.activity}
+                  layout="list"
+                  density="compact"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="activity-muted-label"
+              data-testid="variant"
+              data-block="activity"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="activity-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.activity.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ActivityFeed
+                  id="activity-muted"
+                  title={ui.dashboard.activity.title}
+                  text={ui.dashboard.activity.text}
+                  events={activity}
+                  empty={ui.empty.activity}
+                  layout="timeline"
+                  density="default"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/CommerceCartPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/CommerceCartPage.tsx
new file mode 100644
index 0000000..04b874e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/CommerceCartPage.tsx
@@ -0,0 +1,400 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-cart page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CartDrawer,
+  CartList,
+  Container,
+  Group,
+  Link,
+  ShoppingCart,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+
+export function CommerceCartPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceCart}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cart-title"
+            data-testid="catalog-block"
+            data-block="cart"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cart-title">
+                {ui.blocks.names.cart}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cart}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cart-table-label"
+              data-testid="variant"
+              data-block="cart"
+              data-variant="table"
+            >
+              <Title as={3} size="base" weight="bold" id="cart-table-label" data-testid="variant-label">
+                {ui.blocks.variants.cart.table}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartList
+                  id="cart-table"
+                  title={ui.commerce.cart.title}
+                  lines={cart}
+                  empty={ui.empty.cart}
+                  labels={ui.commerce.cart}
+                  layout="table"
+                  media="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cart-cards-label"
+              data-testid="variant"
+              data-block="cart"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="cart-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.cart.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartList
+                  id="cart-cards"
+                  title={ui.commerce.cart.title}
+                  lines={cart}
+                  empty={ui.empty.cart}
+                  labels={ui.commerce.cart}
+                  layout="cards"
+                  media="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cart-tableCompact-label"
+              data-testid="variant"
+              data-block="cart"
+              data-variant="tableCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="cart-tableCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.cart.tableCompact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartList
+                  id="cart-tableCompact"
+                  title={ui.commerce.cart.title}
+                  lines={cart}
+                  empty={ui.empty.cart}
+                  labels={ui.commerce.cart}
+                  layout="table"
+                  media="none"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.tableCompact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cart-cardsPlain-label"
+              data-testid="variant"
+              data-block="cart"
+              data-variant="cardsPlain"
+            >
+              <Title as={3} size="base" weight="bold" id="cart-cardsPlain-label" data-testid="variant-label">
+                {ui.blocks.variants.cart.cardsPlain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartList
+                  id="cart-cardsPlain"
+                  title={ui.commerce.cart.title}
+                  lines={cart}
+                  empty={ui.empty.cart}
+                  labels={ui.commerce.cart}
+                  layout="cards"
+                  media="none"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cardsPlain))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cartpage-title"
+            data-testid="catalog-block"
+            data-block="cartpage"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cartpage-title">
+                {ui.blocks.names.cartpage}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cartpage}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartpage-split-label"
+              data-testid="variant"
+              data-block="cartpage"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="cartpage-split-label" data-testid="variant-label">
+                {ui.blocks.variants.cartpage.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ShoppingCart
+                  id="cartpage-split"
+                  title={ui.commerce.cartPage.title}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.cart}
+                  totals={ui.commerce.totals}
+                  actions={ui.commerce.cartPage}
+                  layout="split"
+                  promo="show"
+                  progress="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartpage-stacked-label"
+              data-testid="variant"
+              data-block="cartpage"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="cartpage-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.cartpage.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ShoppingCart
+                  id="cartpage-stacked"
+                  title={ui.commerce.cartPage.title}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.cart}
+                  totals={ui.commerce.totals}
+                  actions={ui.commerce.cartPage}
+                  layout="stacked"
+                  promo="show"
+                  progress="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartpage-plain-label"
+              data-testid="variant"
+              data-block="cartpage"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="cartpage-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.cartpage.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ShoppingCart
+                  id="cartpage-plain"
+                  title={ui.commerce.cartPage.title}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.cart}
+                  totals={ui.commerce.totals}
+                  actions={ui.commerce.cartPage}
+                  layout="split"
+                  promo="hide"
+                  progress="hide"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.plain))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cartdrawer-title"
+            data-testid="catalog-block"
+            data-block="cartdrawer"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cartdrawer-title">
+                {ui.blocks.names.cartdrawer}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cartdrawer}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartdrawer-filled-label"
+              data-testid="variant"
+              data-block="cartdrawer"
+              data-variant="filled"
+            >
+              <Title as={3} size="base" weight="bold" id="cartdrawer-filled-label" data-testid="variant-label">
+                {ui.blocks.variants.cartdrawer.filled}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartDrawer
+                  id="cartdrawer-filled"
+                  lines={cart}
+                  rows={summary}
+                  labels={ui.commerce.cart}
+                  drawer={ui.commerce.drawer}
+                  state="filled"
+                  media="image"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartdrawer-compact-label"
+              data-testid="variant"
+              data-block="cartdrawer"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="cartdrawer-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.cartdrawer.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartDrawer
+                  id="cartdrawer-compact"
+                  lines={cart}
+                  rows={summary}
+                  labels={ui.commerce.cart}
+                  drawer={ui.commerce.drawer}
+                  state="filled"
+                  media="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cartdrawer-empty-label"
+              data-testid="variant"
+              data-block="cartdrawer"
+              data-variant="empty"
+            >
+              <Title as={3} size="base" weight="bold" id="cartdrawer-empty-label" data-testid="variant-label">
+                {ui.blocks.variants.cartdrawer.empty}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CartDrawer
+                  id="cartdrawer-empty"
+                  lines={cart}
+                  rows={summary}
+                  labels={ui.commerce.cart}
+                  drawer={ui.commerce.drawer}
+                  state="empty"
+                  media="image"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.empty))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/CommerceCategoriesPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/CommerceCategoriesPage.tsx
new file mode 100644
index 0000000..ca86bc2
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/CommerceCategoriesPage.tsx
@@ -0,0 +1,252 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-categories page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+
+export function CommerceCategoriesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceCategories}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 7)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-categories-title"
+            data-testid="catalog-block"
+            data-block="categories"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-categories-title">
+                {ui.blocks.names.categories}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.categories}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-chips-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="chips"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-chips-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.chips}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="chips"
+                  count="show"
+                  icon="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-bar-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.bar}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="bar"
+                  count="show"
+                  icon="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-sidebar-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="sidebar"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-sidebar-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.sidebar}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="sidebar"
+                  count="show"
+                  icon="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-chipsPlain-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="chipsPlain"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-chipsPlain-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.chipsPlain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="chips"
+                  count="hide"
+                  icon="hide"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chipsPlain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-barCompact-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="barCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-barCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.barCompact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="bar"
+                  count="show"
+                  icon="hide"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.barCompact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-tiles-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="tiles"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-tiles-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.tiles}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="tiles"
+                  count="show"
+                  icon="show"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.tiles))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="categories-toolbar-label"
+              data-testid="variant"
+              data-block="categories"
+              data-variant="toolbar"
+            >
+              <Title as={3} size="base" weight="bold" id="categories-toolbar-label" data-testid="variant-label">
+                {ui.blocks.variants.categories.toolbar}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CategoryNav
+                  label={ui.commerce.nav.label}
+                  categories={categories}
+                  current="category-all"
+                  tools={ui.commerce.tools}
+                  layout="toolbar"
+                  count="show"
+                  icon="hide"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.toolbar))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/CommerceCheckoutPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/CommerceCheckoutPage.tsx
new file mode 100644
index 0000000..c3d2a3c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/CommerceCheckoutPage.tsx
@@ -0,0 +1,369 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-checkout page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CheckoutForm,
+  Container,
+  Group,
+  Link,
+  OrderSummary,
+  Stack,
+  Stepper,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Day,
+  type Payment,
+  type Promo,
+  type Step,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+
+export function CommerceCheckoutPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceCheckout}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 8)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-checkout-title"
+            data-testid="catalog-block"
+            data-block="checkout"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-checkout-title">
+                {ui.blocks.names.checkout}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.checkout}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checkout-cards-label"
+              data-testid="variant"
+              data-block="checkout"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="checkout-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.checkout.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CheckoutForm
+                  id="checkout-cards"
+                  title={ui.commerce.checkout.title}
+                  days={days}
+                  payments={payments}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.checkout}
+                  totals={ui.commerce.totals}
+                  layout="cards"
+                  summary="aside"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checkout-numbered-label"
+              data-testid="variant"
+              data-block="checkout"
+              data-variant="numbered"
+            >
+              <Title as={3} size="base" weight="bold" id="checkout-numbered-label" data-testid="variant-label">
+                {ui.blocks.variants.checkout.numbered}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CheckoutForm
+                  id="checkout-numbered"
+                  title={ui.commerce.checkout.title}
+                  days={days}
+                  payments={payments}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.checkout}
+                  totals={ui.commerce.totals}
+                  layout="numbered"
+                  summary="aside"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="checkout-noSummary-label"
+              data-testid="variant"
+              data-block="checkout"
+              data-variant="noSummary"
+            >
+              <Title as={3} size="base" weight="bold" id="checkout-noSummary-label" data-testid="variant-label">
+                {ui.blocks.variants.checkout.noSummary}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CheckoutForm
+                  id="checkout-noSummary"
+                  title={ui.commerce.checkout.title}
+                  days={days}
+                  payments={payments}
+                  lines={cart}
+                  rows={summary}
+                  promos={promos}
+                  labels={ui.commerce.checkout}
+                  totals={ui.commerce.totals}
+                  layout="cards"
+                  summary="none"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.noSummary))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-summary-title"
+            data-testid="catalog-block"
+            data-block="summary"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-summary-title">
+                {ui.blocks.names.summary}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.summary}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="summary-card-label"
+              data-testid="variant"
+              data-block="summary"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="summary-card-label" data-testid="variant-label">
+                {ui.blocks.variants.summary.card}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderSummary
+                  id="summary-card"
+                  title={ui.commerce.summary.title}
+                  rows={summary}
+                  empty={ui.empty.summary}
+                  labels={ui.commerce.summary}
+                  layout="card"
+                  cta="show"
+                  note="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="summary-plain-label"
+              data-testid="variant"
+              data-block="summary"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="summary-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.summary.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderSummary
+                  id="summary-plain"
+                  title={ui.commerce.summary.title}
+                  rows={summary}
+                  empty={ui.empty.summary}
+                  labels={ui.commerce.summary}
+                  layout="plain"
+                  cta="show"
+                  note="hide"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="summary-noCta-label"
+              data-testid="variant"
+              data-block="summary"
+              data-variant="noCta"
+            >
+              <Title as={3} size="base" weight="bold" id="summary-noCta-label" data-testid="variant-label">
+                {ui.blocks.variants.summary.noCta}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderSummary
+                  id="summary-noCta"
+                  title={ui.commerce.summary.title}
+                  rows={summary}
+                  empty={ui.empty.summary}
+                  labels={ui.commerce.summary}
+                  layout="card"
+                  cta="hide"
+                  note="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.noCta))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="summary-muted-label"
+              data-testid="variant"
+              data-block="summary"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="summary-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.summary.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderSummary
+                  id="summary-muted"
+                  title={ui.commerce.summary.title}
+                  rows={summary}
+                  empty={ui.empty.summary}
+                  labels={ui.commerce.summary}
+                  layout="card"
+                  cta="show"
+                  note="show"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-stepper-title"
+            data-testid="catalog-block"
+            data-block="stepper"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-stepper-title">
+                {ui.blocks.names.stepper}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.stepper}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stepper-horizontal-label"
+              data-testid="variant"
+              data-block="stepper"
+              data-variant="horizontal"
+            >
+              <Title as={3} size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+                {ui.blocks.variants.stepper.horizontal}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Stepper
+                  id="stepper-horizontal"
+                  title={ui.onboarding.stepper.title}
+                  steps={steps}
+                  current={2}
+                  stepLabel={ui.onboarding.stepper.stepLabel}
+                  back={ui.onboarding.stepper.back}
+                  next={ui.onboarding.stepper.next}
+                  layout="horizontal"
+                  marker="number"
+                  summary="show"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/CommerceDeliveryPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/CommerceDeliveryPage.tsx
new file mode 100644
index 0000000..c9f020b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/CommerceDeliveryPage.tsx
@@ -0,0 +1,482 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-delivery page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DeliveryInfo,
+  Group,
+  Link,
+  SlotBoard,
+  Stack,
+  StoreLocations,
+  Text,
+  Title,
+  ZoneTable,
+  tpl,
+  uniqLabel,
+  type Day,
+  type Feature,
+  type Store,
+  type Zone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+
+export function CommerceDeliveryPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceDelivery}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 4, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-delivery-title"
+            data-testid="catalog-block"
+            data-block="delivery"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-delivery-title">
+                {ui.blocks.names.delivery}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.delivery}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="delivery-full-label"
+              data-testid="variant"
+              data-block="delivery"
+              data-variant="full"
+            >
+              <Title as={3} size="base" weight="bold" id="delivery-full-label" data-testid="variant-label">
+                {ui.blocks.variants.delivery.full}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DeliveryInfo
+                  id="delivery-full"
+                  title={ui.commerce.delivery.title}
+                  lead={ui.commerce.delivery.lead}
+                  facts={deliveryfacts}
+                  zones={zones}
+                  labels={ui.commerce.delivery}
+                  layout="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="delivery-split-label"
+              data-testid="variant"
+              data-block="delivery"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="delivery-split-label" data-testid="variant-label">
+                {ui.blocks.variants.delivery.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DeliveryInfo
+                  id="delivery-split"
+                  title={ui.commerce.delivery.title}
+                  lead={ui.commerce.delivery.lead}
+                  facts={deliveryfacts}
+                  zones={zones}
+                  labels={ui.commerce.delivery}
+                  layout="split"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="delivery-facts-label"
+              data-testid="variant"
+              data-block="delivery"
+              data-variant="facts"
+            >
+              <Title as={3} size="base" weight="bold" id="delivery-facts-label" data-testid="variant-label">
+                {ui.blocks.variants.delivery.facts}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <DeliveryInfo
+                  id="delivery-facts"
+                  title={ui.commerce.delivery.title}
+                  lead={ui.commerce.delivery.lead}
+                  facts={deliveryfacts}
+                  zones={zones}
+                  labels={ui.commerce.delivery}
+                  layout="facts"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.facts))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-zones-title"
+            data-testid="catalog-block"
+            data-block="zones"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-zones-title">
+                {ui.blocks.names.zones}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.zones}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="zones-table-label"
+              data-testid="variant"
+              data-block="zones"
+              data-variant="table"
+            >
+              <Title as={3} size="base" weight="bold" id="zones-table-label" data-testid="variant-label">
+                {ui.blocks.variants.zones.table}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ZoneTable
+                  id="zones-table"
+                  title={ui.commerce.zones.title}
+                  lead={ui.commerce.zones.lead}
+                  zones={zones}
+                  empty={ui.empty.zones}
+                  labels={ui.commerce.zones}
+                  layout="table"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="zones-cards-label"
+              data-testid="variant"
+              data-block="zones"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="zones-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.zones.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ZoneTable
+                  id="zones-cards"
+                  title={ui.commerce.zones.title}
+                  lead={ui.commerce.zones.lead}
+                  zones={zones}
+                  empty={ui.empty.zones}
+                  labels={ui.commerce.zones}
+                  layout="cards"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="zones-tableMuted-label"
+              data-testid="variant"
+              data-block="zones"
+              data-variant="tableMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="zones-tableMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.zones.tableMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ZoneTable
+                  id="zones-tableMuted"
+                  title={ui.commerce.zones.title}
+                  lead={ui.commerce.zones.lead}
+                  zones={zones}
+                  empty={ui.empty.zones}
+                  labels={ui.commerce.zones}
+                  layout="table"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.tableMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-slots-title"
+            data-testid="catalog-block"
+            data-block="slots"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-slots-title">
+                {ui.blocks.names.slots}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.slots}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="slots-split-label"
+              data-testid="variant"
+              data-block="slots"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="slots-split-label" data-testid="variant-label">
+                {ui.blocks.variants.slots.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SlotBoard
+                  id="slots-split"
+                  title={ui.commerce.slots.title}
+                  lead={ui.commerce.slots.lead}
+                  days={days}
+                  empty={ui.empty.days}
+                  zone={zones.find((i) => i.id === "zone-central")!}
+                  labels={ui.commerce.slots}
+                  layout="split"
+                  item="card"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="slots-plain-label"
+              data-testid="variant"
+              data-block="slots"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="slots-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.slots.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SlotBoard
+                  id="slots-plain"
+                  title={ui.commerce.slots.title}
+                  lead={ui.commerce.slots.lead}
+                  days={days}
+                  empty={ui.empty.days}
+                  zone={zones.find((i) => i.id === "zone-central")!}
+                  labels={ui.commerce.slots}
+                  layout="split"
+                  item="plain"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="slots-stacked-label"
+              data-testid="variant"
+              data-block="slots"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="slots-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.slots.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SlotBoard
+                  id="slots-stacked"
+                  title={ui.commerce.slots.title}
+                  lead={ui.commerce.slots.lead}
+                  days={days}
+                  empty={ui.empty.days}
+                  zone={zones.find((i) => i.id === "zone-central")!}
+                  labels={ui.commerce.slots}
+                  layout="stacked"
+                  item="card"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.stacked))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-locations-title"
+            data-testid="catalog-block"
+            data-block="locations"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-locations-title">
+                {ui.blocks.names.locations}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.locations}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="locations-cards-label"
+              data-testid="variant"
+              data-block="locations"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="locations-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.locations.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreLocations
+                  id="locations-cards"
+                  title={ui.commerce.stores.title}
+                  lead={ui.commerce.stores.lead}
+                  stores={stores}
+                  empty={ui.empty.stores}
+                  kinds={ui.commerce.stores.kinds}
+                  labels={ui.commerce.stores}
+                  layout="cards"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="locations-list-label"
+              data-testid="variant"
+              data-block="locations"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="locations-list-label" data-testid="variant-label">
+                {ui.blocks.variants.locations.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreLocations
+                  id="locations-list"
+                  title={ui.commerce.stores.title}
+                  lead={ui.commerce.stores.lead}
+                  stores={stores}
+                  empty={ui.empty.stores}
+                  kinds={ui.commerce.stores.kinds}
+                  labels={ui.commerce.stores}
+                  layout="list"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="locations-map-label"
+              data-testid="variant"
+              data-block="locations"
+              data-variant="map"
+            >
+              <Title as={3} size="base" weight="bold" id="locations-map-label" data-testid="variant-label">
+                {ui.blocks.variants.locations.map}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreLocations
+                  id="locations-map"
+                  title={ui.commerce.stores.title}
+                  lead={ui.commerce.stores.lead}
+                  stores={stores}
+                  empty={ui.empty.stores}
+                  kinds={ui.commerce.stores.kinds}
+                  labels={ui.commerce.stores}
+                  layout="map"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.map))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/CommerceOrdersPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/CommerceOrdersPage.tsx
new file mode 100644
index 0000000..32289a8
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/CommerceOrdersPage.tsx
@@ -0,0 +1,190 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-orders page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  OrderTable,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Order,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+const ORDERS_FIELDS = {
+  "id": "id",
+  "number": "title",
+  "date": "metadata.date.value|date",
+  "total": "metadata.total.value",
+  "currency": "metadata.currency.value",
+  "status": "metadata.order_status.value",
+  "items": "metadata.items.value",
+} as const;
+
+const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+
+export function CommerceOrdersPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceOrders}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-orders-title"
+            data-testid="catalog-block"
+            data-block="orders"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-orders-title">
+                {ui.blocks.names.orders}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.orders}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="orders-table-label"
+              data-testid="variant"
+              data-block="orders"
+              data-variant="table"
+            >
+              <Title as={3} size="base" weight="bold" id="orders-table-label" data-testid="variant-label">
+                {ui.blocks.variants.orders.table}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderTable
+                  id="orders-table"
+                  title={ui.commerce.orders.title}
+                  orders={orders}
+                  empty={ui.empty.orders}
+                  statuses={ui.status}
+                  labels={ui.commerce.orders}
+                  layout="table"
+                  pager="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="orders-cards-label"
+              data-testid="variant"
+              data-block="orders"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="orders-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.orders.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderTable
+                  id="orders-cards"
+                  title={ui.commerce.orders.title}
+                  orders={orders}
+                  empty={ui.empty.orders}
+                  statuses={ui.status}
+                  labels={ui.commerce.orders}
+                  layout="cards"
+                  pager="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="orders-noPager-label"
+              data-testid="variant"
+              data-block="orders"
+              data-variant="noPager"
+            >
+              <Title as={3} size="base" weight="bold" id="orders-noPager-label" data-testid="variant-label">
+                {ui.blocks.variants.orders.noPager}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderTable
+                  id="orders-noPager"
+                  title={ui.commerce.orders.title}
+                  orders={orders}
+                  empty={ui.empty.orders}
+                  statuses={ui.status}
+                  labels={ui.commerce.orders}
+                  layout="table"
+                  pager="hide"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.noPager))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="orders-compactMuted-label"
+              data-testid="variant"
+              data-block="orders"
+              data-variant="compactMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="orders-compactMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.orders.compactMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <OrderTable
+                  id="orders-compactMuted"
+                  title={ui.commerce.orders.title}
+                  orders={orders}
+                  empty={ui.empty.orders}
+                  statuses={ui.status}
+                  labels={ui.commerce.orders}
+                  layout="table"
+                  pager="hide"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.compactMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/CommerceProductPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/CommerceProductPage.tsx
new file mode 100644
index 0000000..4032b5e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/CommerceProductPage.tsx
@@ -0,0 +1,497 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-product page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductDetail,
+  ProductInfo,
+  ReviewList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Detail,
+  type Product,
+  type Review,
+  type Spec,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+
+export function CommerceProductPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceProduct}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 13)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-product-title"
+            data-testid="catalog-block"
+            data-block="product"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-product-title">
+                {ui.blocks.names.product}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.product}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-split-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="product-split-label" data-testid="variant-label">
+                {ui.blocks.variants.product.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-split"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="split"
+                  mediaSide="start"
+                  thumbs="below"
+                  buy="full"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-splitEnd-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="splitEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="product-splitEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.product.splitEnd}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-splitEnd"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="split"
+                  mediaSide="end"
+                  thumbs="below"
+                  buy="full"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.splitEnd))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-stacked-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="product-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.product.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-stacked"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="stacked"
+                  mediaSide="start"
+                  thumbs="none"
+                  buy="full"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-compact-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="product-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.product.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-compact"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="split"
+                  mediaSide="start"
+                  thumbs="none"
+                  buy="compact"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="product-muted-label"
+              data-testid="variant"
+              data-block="product"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="product-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.product.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductDetail
+                  id="product-muted"
+                  product={products.find((i) => i.id === "product-lamp")!}
+                  labels={ui.commerce.detail}
+                  badges={ui.commerce.badges}
+                  layout="split"
+                  mediaSide="start"
+                  thumbs="below"
+                  buy="full"
+                  tone="muted"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-productinfo-title"
+            data-testid="catalog-block"
+            data-block="productinfo"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-productinfo-title">
+                {ui.blocks.names.productinfo}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.productinfo}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="productinfo-split-label"
+              data-testid="variant"
+              data-block="productinfo"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="productinfo-split-label" data-testid="variant-label">
+                {ui.blocks.variants.productinfo.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductInfo
+                  id="productinfo-split"
+                  title={ui.commerce.info.title}
+                  details={details}
+                  specs={specs}
+                  labels={ui.commerce.info}
+                  layout="split"
+                  expand="first"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="productinfo-stacked-label"
+              data-testid="variant"
+              data-block="productinfo"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="productinfo-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.productinfo.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductInfo
+                  id="productinfo-stacked"
+                  title={ui.commerce.info.title}
+                  details={details}
+                  specs={specs}
+                  labels={ui.commerce.info}
+                  layout="stacked"
+                  expand="first"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="productinfo-closed-label"
+              data-testid="variant"
+              data-block="productinfo"
+              data-variant="closed"
+            >
+              <Title as={3} size="base" weight="bold" id="productinfo-closed-label" data-testid="variant-label">
+                {ui.blocks.variants.productinfo.closed}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductInfo
+                  id="productinfo-closed"
+                  title={ui.commerce.info.title}
+                  details={details}
+                  specs={specs}
+                  labels={ui.commerce.info}
+                  layout="split"
+                  expand="none"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.closed))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-reviews-title"
+            data-testid="catalog-block"
+            data-block="reviews"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-reviews-title">
+                {ui.blocks.names.reviews}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.reviews}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-list-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-list-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-list"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="list"
+                  item="card"
+                  avatar="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-grid-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.grid}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-grid"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="grid"
+                  item="card"
+                  avatar="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-plain-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-plain"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="list"
+                  item="plain"
+                  avatar="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-avatars-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="avatars"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-avatars-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.avatars}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-avatars"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="list"
+                  item="card"
+                  avatar="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.avatars))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="reviews-mutedGrid-label"
+              data-testid="variant"
+              data-block="reviews"
+              data-variant="mutedGrid"
+            >
+              <Title as={3} size="base" weight="bold" id="reviews-mutedGrid-label" data-testid="variant-label">
+                {ui.blocks.variants.reviews.mutedGrid}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ReviewList
+                  id="reviews-mutedGrid"
+                  title={ui.commerce.reviews.title}
+                  reviews={reviews}
+                  labels={ui.commerce.reviewLabels}
+                  layout="grid"
+                  item="card"
+                  avatar="image"
+                  tone="muted"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.mutedGrid))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/CommerceProductsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/CommerceProductsPage.tsx
new file mode 100644
index 0000000..91f5777
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/CommerceProductsPage.tsx
@@ -0,0 +1,354 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-products page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Product,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+
+export function CommerceProductsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceProducts}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 9)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-products-title"
+            data-testid="catalog-block"
+            data-block="products"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-products-title">
+                {ui.blocks.names.products}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.products}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-grid3-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="products-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.products.grid3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-grid3"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-3"
+                  ratio="4/3"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-grid4-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="grid4"
+            >
+              <Title as={3} size="base" weight="bold" id="products-grid4-label" data-testid="variant-label">
+                {ui.blocks.variants.products.grid4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-grid4"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-4"
+                  ratio="1/1"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-grid2-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="products-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.products.grid2}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-grid2"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-2"
+                  ratio="3/4"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-list-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="products-list-label" data-testid="variant-label">
+                {ui.blocks.variants.products.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-list"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="list"
+                  cols="1-3"
+                  ratio="4/3"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-catalog-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="catalog"
+            >
+              <Title as={3} size="base" weight="bold" id="products-catalog-label" data-testid="variant-label">
+                {ui.blocks.variants.products.catalog}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-catalog"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-4"
+                  ratio="1/1"
+                  rating="hide"
+                  action="button"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-browse-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="browse"
+            >
+              <Title as={3} size="base" weight="bold" id="products-browse-label" data-testid="variant-label">
+                {ui.blocks.variants.products.browse}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-browse"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-3"
+                  ratio="4/3"
+                  rating="show"
+                  action="none"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-showcase-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="showcase"
+            >
+              <Title as={3} size="base" weight="bold" id="products-showcase-label" data-testid="variant-label">
+                {ui.blocks.variants.products.showcase}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-showcase"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="grid"
+                  cols="1-3"
+                  ratio="3/4"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-rail-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="rail"
+            >
+              <Title as={3} size="base" weight="bold" id="products-rail-label" data-testid="variant-label">
+                {ui.blocks.variants.products.rail}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-rail"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="rail"
+                  cols="1-3"
+                  ratio="4/3"
+                  rating="show"
+                  action="button"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="products-railCompact-label"
+              data-testid="variant"
+              data-block="products"
+              data-variant="railCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="products-railCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.products.railCompact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProductGrid
+                  id="products-railCompact"
+                  title={ui.commerce.products.title}
+                  products={products}
+                  labels={ui.commerce.productLabels}
+                  badges={ui.commerce.badges}
+                  layout="rail"
+                  cols="1-3"
+                  ratio="1/1"
+                  rating="hide"
+                  action="button"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/CommerceStorefrontPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/CommerceStorefrontPage.tsx
new file mode 100644
index 0000000..eb2a30a
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/CommerceStorefrontPage.tsx
@@ -0,0 +1,396 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The commerce-storefront page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroClassic,
+  Link,
+  Stack,
+  StoreHero,
+  Text,
+  Title,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+const STOREHERO_ACTIONS = {
+  mode: "two",
+  cta: ui.commerce.storeHero.cta,
+  href: "#/catalog",
+  secondary: ui.commerce.storeHero.secondary,
+  secondaryHref: "#/delivery",
+} as const;
+
+export function CommerceStorefrontPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.commerce.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.commerceStorefront}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-hero-title"
+            data-testid="catalog-block"
+            data-block="hero"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-hero-title">
+                {ui.blocks.names.hero}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.hero}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-shop-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="shop"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.shop}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-shop"
+                  title={ui.cases.shop.hero.title}
+                  text={ui.cases.shop.hero.text}
+                  actions={{
+                    cta: ui.cases.shop.hero.cta,
+                    href: "#/pricing",
+                    secondary: ui.cases.shop.hero.secondary,
+                    secondaryHref: "#/pricing",
+                    emailLabel: ui.promo.newsletter.label,
+                    mode: "one",
+                  }}
+                  media={{
+                    codeTitle: ui.vibe.code.title,
+                    prompt: ui.vibe.code.prompt,
+                    lines: terminal,
+                    kind: "image",
+                    side: "start",
+                  }}
+                  layout="split"
+                  scale="default"
+                  tone="muted"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-storehero-title"
+            data-testid="catalog-block"
+            data-block="storehero"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-storehero-title">
+                {ui.blocks.names.storehero}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.storehero}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storehero-overlay-label"
+              data-testid="variant"
+              data-block="storehero"
+              data-variant="overlay"
+            >
+              <Title as={3} size="base" weight="bold" id="storehero-overlay-label" data-testid="variant-label">
+                {ui.blocks.variants.storehero.overlay}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreHero
+                  id="storehero-overlay"
+                  title={ui.commerce.storeHero.title}
+                  lead={ui.commerce.storeHero.lead}
+                  badge={ui.commerce.storeHero.badge}
+                  perks={perks}
+                  card={ui.commerce.storeHero.card}
+                  actions={STOREHERO_ACTIONS}
+                  layout="overlay"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlay))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storehero-overlayStart-label"
+              data-testid="variant"
+              data-block="storehero"
+              data-variant="overlayStart"
+            >
+              <Title as={3} size="base" weight="bold" id="storehero-overlayStart-label" data-testid="variant-label">
+                {ui.blocks.variants.storehero.overlayStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreHero
+                  id="storehero-overlayStart"
+                  title={ui.commerce.storeHero.title}
+                  lead={ui.commerce.storeHero.lead}
+                  badge={ui.commerce.storeHero.badge}
+                  perks={perks}
+                  card={ui.commerce.storeHero.card}
+                  actions={STOREHERO_ACTIONS}
+                  layout="overlay"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlayStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storehero-backdrop-label"
+              data-testid="variant"
+              data-block="storehero"
+              data-variant="backdrop"
+            >
+              <Title as={3} size="base" weight="bold" id="storehero-backdrop-label" data-testid="variant-label">
+                {ui.blocks.variants.storehero.backdrop}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreHero
+                  id="storehero-backdrop"
+                  title={ui.commerce.storeHero.title}
+                  lead={ui.commerce.storeHero.lead}
+                  badge={ui.commerce.storeHero.badge}
+                  perks={perks}
+                  card={ui.commerce.storeHero.card}
+                  actions={STOREHERO_ACTIONS}
+                  layout="backdrop"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.backdrop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storehero-muted-label"
+              data-testid="variant"
+              data-block="storehero"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="storehero-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.storehero.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoreHero
+                  id="storehero-muted"
+                  title={ui.commerce.storeHero.title}
+                  lead={ui.commerce.storeHero.lead}
+                  badge={ui.commerce.storeHero.badge}
+                  perks={perks}
+                  card={ui.commerce.storeHero.card}
+                  actions={{ ...STOREHERO_ACTIONS, mode: "one" }}
+                  layout="overlay"
+                  mediaSide="end"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-usp-title"
+            data-testid="catalog-block"
+            data-block="usp"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-usp-title">
+                {ui.blocks.names.usp}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.usp}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-strip-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="strip"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-strip-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.strip}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-strip"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="strip"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-cards-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-cards"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="cards"
+                  tone="default"
+                  density="default"
+                  title={ui.commerce.usp.title}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-stripCompact-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="stripCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-stripCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.stripCompact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-stripCompact"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="strip"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.stripCompact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-bar-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.bar}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-bar"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="bar"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usp-barMuted-label"
+              data-testid="variant"
+              data-block="usp"
+              data-variant="barMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="usp-barMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.usp.barMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UspStrip
+                  id="usp-barMuted"
+                  perks={perks}
+                  empty={ui.empty.perks}
+                  layout="bar"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.barMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/ContentArticlePage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/ContentArticlePage.tsx
new file mode 100644
index 0000000..a04c36f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/ContentArticlePage.tsx
@@ -0,0 +1,174 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-article page of CatalogScreen.
+
+import {
+  ArticleBody,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Section,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function ContentArticlePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentArticle}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-article-title"
+            data-testid="catalog-block"
+            data-block="article"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-article-title">
+                {ui.blocks.names.article}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.article}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="article-column-label"
+              data-testid="variant"
+              data-block="article"
+              data-variant="column"
+            >
+              <Title as={3} size="base" weight="bold" id="article-column-label" data-testid="variant-label">
+                {ui.blocks.variants.article.column}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ArticleBody
+                  id="article-column"
+                  title={ui.vibe.article.title}
+                  sections={article}
+                  empty={ui.empty.sections}
+                  tocTitle={ui.vibe.article.toc}
+                  layout="column"
+                  quotes="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="article-toc-label"
+              data-testid="variant"
+              data-block="article"
+              data-variant="toc"
+            >
+              <Title as={3} size="base" weight="bold" id="article-toc-label" data-testid="variant-label">
+                {ui.blocks.variants.article.toc}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ArticleBody
+                  id="article-toc"
+                  title={ui.vibe.article.title}
+                  sections={article}
+                  empty={ui.empty.sections}
+                  tocTitle={ui.vibe.article.toc}
+                  layout="toc"
+                  quotes="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="article-plain-label"
+              data-testid="variant"
+              data-block="article"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="article-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.article.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ArticleBody
+                  id="article-plain"
+                  title={ui.vibe.article.title}
+                  sections={article}
+                  empty={ui.empty.sections}
+                  tocTitle={ui.vibe.article.toc}
+                  layout="column"
+                  quotes="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="article-muted-label"
+              data-testid="variant"
+              data-block="article"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="article-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.article.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ArticleBody
+                  id="article-muted"
+                  title={ui.vibe.article.title}
+                  sections={article}
+                  empty={ui.empty.sections}
+                  tocTitle={ui.vibe.article.toc}
+                  layout="column"
+                  quotes="show"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/ContentBlogPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/ContentBlogPage.tsx
new file mode 100644
index 0000000..0cfaf44
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/ContentBlogPage.tsx
@@ -0,0 +1,357 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-blog page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+const POSTS_FILTER = { topics, label: ui.vibe.posts.topics, topic: "" } as const;
+
+export function ContentBlogPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentBlog}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 9)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-posts-title"
+            data-testid="catalog-block"
+            data-block="posts"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-posts-title">
+                {ui.blocks.names.posts}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.posts}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-grid-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.grid}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-grid"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-filters-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="filters"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-filters-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.filters}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-filters"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, topic: "Design", mode: "topics" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-twoUp-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="twoUp"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-twoUp-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.twoUp}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-twoUp"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-2"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-row4-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="row4"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-row4-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.row4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-row4"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-4"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.row4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-news4-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="news4"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-news4-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.news4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-news4"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-4"
+                  media="image"
+                  meta="news"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.news4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-list-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-list-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-list"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="list"
+                  cols="1-3"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-magazine-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="magazine"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-magazine-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.magazine}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-magazine"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="magazine"
+                  cols="1-3"
+                  media="image"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-textOnly-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="textOnly"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-textOnly-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.textOnly}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-textOnly"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  media="none"
+                  meta="full"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="posts-digest-label"
+              data-testid="variant"
+              data-block="posts"
+              data-variant="digest"
+            >
+              <Title as={3} size="base" weight="bold" id="posts-digest-label" data-testid="variant-label">
+                {ui.blocks.variants.posts.digest}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostGrid
+                  id="posts-digest"
+                  title={ui.content.posts.title}
+                  posts={posts}
+                  labels={ui.content.labels}
+                  filter={{ ...POSTS_FILTER, mode: "none" }}
+                  action={{ label: ui.content.posts.action, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  media="none"
+                  meta="short"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/ContentPostHeaderPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/ContentPostHeaderPage.tsx
new file mode 100644
index 0000000..8490c66
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/ContentPostHeaderPage.tsx
@@ -0,0 +1,185 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-post-header page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+
+export function ContentPostHeaderPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentPostHeader}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-postheader-title"
+            data-testid="catalog-block"
+            data-block="postheader"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-postheader-title">
+                {ui.blocks.names.postheader}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.postheader}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postheader-start-label"
+              data-testid="variant"
+              data-block="postheader"
+              data-variant="start"
+            >
+              <Title as={3} size="base" weight="bold" id="postheader-start-label" data-testid="variant-label">
+                {ui.blocks.variants.postheader.start}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostHeader
+                  id="postheader-start"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.labels}
+                  layout="start"
+                  cover="show"
+                  meta="full"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.start))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postheader-center-label"
+              data-testid="variant"
+              data-block="postheader"
+              data-variant="center"
+            >
+              <Title as={3} size="base" weight="bold" id="postheader-center-label" data-testid="variant-label">
+                {ui.blocks.variants.postheader.center}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostHeader
+                  id="postheader-center"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.labels}
+                  layout="center"
+                  cover="show"
+                  meta="full"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.center))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postheader-noCover-label"
+              data-testid="variant"
+              data-block="postheader"
+              data-variant="noCover"
+            >
+              <Title as={3} size="base" weight="bold" id="postheader-noCover-label" data-testid="variant-label">
+                {ui.blocks.variants.postheader.noCover}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostHeader
+                  id="postheader-noCover"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.labels}
+                  layout="start"
+                  cover="hide"
+                  meta="full"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.noCover))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postheader-minimal-label"
+              data-testid="variant"
+              data-block="postheader"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="postheader-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.postheader.minimal}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostHeader
+                  id="postheader-minimal"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.labels}
+                  layout="center"
+                  cover="hide"
+                  meta="short"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.minimal))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.tsx
new file mode 100644
index 0000000..f45509c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.tsx
@@ -0,0 +1,271 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-post-header-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Post,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+const POSTSPLIT_EXTRAS = {
+  role: ui.content.postSplit.role,
+  bio: ui.content.postSplit.bio,
+  views: ui.content.postSplit.views,
+  likes: ui.content.postSplit.likes,
+  tags: posttags,
+  outline,
+} as const;
+
+export function ContentPostHeaderSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentPostHeaderSplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-postsplit-title"
+            data-testid="catalog-block"
+            data-block="postsplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-postsplit-title">
+                {ui.blocks.names.postsplit}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.postsplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-centerShare-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="centerShare"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-centerShare-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.centerShare}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-centerShare"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="center"
+                  mediaSide="end"
+                  author="line"
+                  cover="wide"
+                  actions="pair"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.centerShare))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-splitTags-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="splitTags"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-splitTags-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.splitTags}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-splitTags"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="split"
+                  mediaSide="end"
+                  author="line"
+                  cover="wide"
+                  actions="pair"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitTags))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-splitBioStart-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="splitBioStart"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-splitBioStart-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.splitBioStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-splitBioStart"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="split"
+                  mediaSide="start"
+                  author="bio"
+                  cover="wide"
+                  actions="wide"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitBioStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-splitSquare-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="splitSquare"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-splitSquare-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.splitSquare}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-splitSquare"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="split"
+                  mediaSide="end"
+                  author="line"
+                  cover="square"
+                  actions="icons"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitSquare))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-outlineStart-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="outlineStart"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-outlineStart-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.outlineStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-outlineStart"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="outline"
+                  mediaSide="start"
+                  author="line"
+                  cover="wide"
+                  actions="pair"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.outlineStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postsplit-splitStats-label"
+              data-testid="variant"
+              data-block="postsplit"
+              data-variant="splitStats"
+            >
+              <Title as={3} size="base" weight="bold" id="postsplit-splitStats-label" data-testid="variant-label">
+                {ui.blocks.variants.postsplit.splitStats}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostSplit
+                  id="postsplit-splitStats"
+                  post={posts.find((i) => i.id === "post-static-first")!}
+                  labels={ui.content.postSplit.labels}
+                  extras={POSTSPLIT_EXTRAS}
+                  layout="split"
+                  mediaSide="end"
+                  author="card"
+                  cover="wide"
+                  actions="pair"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitStats))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/ContentPostShowcasePage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/ContentPostShowcasePage.tsx
new file mode 100644
index 0000000..4235b8d
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/ContentPostShowcasePage.tsx
@@ -0,0 +1,201 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-post-showcase page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostShowcase,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+
+export function ContentPostShowcasePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentPostShowcase}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-postshowcase-title"
+            data-testid="catalog-block"
+            data-block="postshowcase"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-postshowcase-title">
+                {ui.blocks.names.postshowcase}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.postshowcase}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postshowcase-introCards-label"
+              data-testid="variant"
+              data-block="postshowcase"
+              data-variant="introCards"
+            >
+              <Title as={3} size="base" weight="bold" id="postshowcase-introCards-label" data-testid="variant-label">
+                {ui.blocks.variants.postshowcase.introCards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostShowcase
+                  id="postshowcase-introCards"
+                  title={ui.content.postShowcase.title}
+                  lead={ui.content.postShowcase.lead}
+                  badge={ui.content.postShowcase.badge}
+                  posts={posts}
+                  empty={ui.empty.posts}
+                  labels={ui.content.labels}
+                  action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                  layout="intro"
+                  cols="3"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postshowcase-featuredEnd-label"
+              data-testid="variant"
+              data-block="postshowcase"
+              data-variant="featuredEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="postshowcase-featuredEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.postshowcase.featuredEnd}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostShowcase
+                  id="postshowcase-featuredEnd"
+                  title={ui.content.postShowcase.title}
+                  lead={ui.content.postShowcase.lead}
+                  badge={ui.content.postShowcase.badge}
+                  posts={posts}
+                  empty={ui.empty.posts}
+                  labels={ui.content.labels}
+                  action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                  layout="featured"
+                  cols="3"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.featuredEnd))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postshowcase-overlay3-label"
+              data-testid="variant"
+              data-block="postshowcase"
+              data-variant="overlay3"
+            >
+              <Title as={3} size="base" weight="bold" id="postshowcase-overlay3-label" data-testid="variant-label">
+                {ui.blocks.variants.postshowcase.overlay3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostShowcase
+                  id="postshowcase-overlay3"
+                  title={ui.content.postShowcase.title}
+                  lead={ui.content.postShowcase.lead}
+                  badge={ui.content.postShowcase.badge}
+                  posts={posts}
+                  empty={ui.empty.posts}
+                  labels={ui.content.labels}
+                  action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                  layout="overlay"
+                  cols="3"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="postshowcase-overlay2-label"
+              data-testid="variant"
+              data-block="postshowcase"
+              data-variant="overlay2"
+            >
+              <Title as={3} size="base" weight="bold" id="postshowcase-overlay2-label" data-testid="variant-label">
+                {ui.blocks.variants.postshowcase.overlay2}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PostShowcase
+                  id="postshowcase-overlay2"
+                  title={ui.content.postShowcase.title}
+                  lead={ui.content.postShowcase.lead}
+                  badge={ui.content.postShowcase.badge}
+                  posts={posts}
+                  empty={ui.empty.posts}
+                  labels={ui.content.labels}
+                  action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+                  layout="overlay"
+                  cols="2"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay2))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/ContentStoryTabsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/ContentStoryTabsPage.tsx
new file mode 100644
index 0000000..287ac40
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/ContentStoryTabsPage.tsx
@@ -0,0 +1,154 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-story-tabs page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoryTabs,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+
+export function ContentStoryTabsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentStoryTabs}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 3)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-storytabs-title"
+            data-testid="catalog-block"
+            data-block="storytabs"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-storytabs-title">
+                {ui.blocks.names.storytabs}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.storytabs}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storytabs-yearTabs-label"
+              data-testid="variant"
+              data-block="storytabs"
+              data-variant="yearTabs"
+            >
+              <Title as={3} size="base" weight="bold" id="storytabs-yearTabs-label" data-testid="variant-label">
+                {ui.blocks.variants.storytabs.yearTabs}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoryTabs
+                  id="storytabs-yearTabs"
+                  title={ui.company.storyTabs.title}
+                  lead={ui.company.storyTabs.lead}
+                  badge={ui.company.storyTabs.badge}
+                  steps={milestones}
+                  empty={ui.empty.milestones}
+                  active="milestone-runtimes"
+                  labels={ui.company.storyTabs.labels}
+                  layout="years"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storytabs-carouselSplit-label"
+              data-testid="variant"
+              data-block="storytabs"
+              data-variant="carouselSplit"
+            >
+              <Title as={3} size="base" weight="bold" id="storytabs-carouselSplit-label" data-testid="variant-label">
+                {ui.blocks.variants.storytabs.carouselSplit}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoryTabs
+                  id="storytabs-carouselSplit"
+                  title={ui.company.storyTabs.title}
+                  lead={ui.company.storyTabs.lead}
+                  badge={ui.company.storyTabs.badge}
+                  steps={milestones}
+                  empty={ui.empty.milestones}
+                  active="milestone-runtimes"
+                  labels={ui.company.storyTabs.labels}
+                  layout="carousel"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.carouselSplit))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="storytabs-yearTabsMuted-label"
+              data-testid="variant"
+              data-block="storytabs"
+              data-variant="yearTabsMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="storytabs-yearTabsMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.storytabs.yearTabsMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StoryTabs
+                  id="storytabs-yearTabsMuted"
+                  title={ui.company.storyTabs.title}
+                  lead={ui.company.storyTabs.lead}
+                  badge={ui.company.storyTabs.badge}
+                  steps={milestones}
+                  empty={ui.empty.milestones}
+                  active="milestone-runtimes"
+                  labels={ui.company.storyTabs.labels}
+                  layout="years"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabsMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/ContentTimelinePage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/ContentTimelinePage.tsx
new file mode 100644
index 0000000..e4b2eff
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/ContentTimelinePage.tsx
@@ -0,0 +1,174 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The content-timeline page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MilestoneTimeline,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+
+export function ContentTimelinePage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.content.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.contentTimeline}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-timeline-title"
+            data-testid="catalog-block"
+            data-block="timeline"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-timeline-title">
+                {ui.blocks.names.timeline}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.timeline}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="timeline-split-label"
+              data-testid="variant"
+              data-block="timeline"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="timeline-split-label" data-testid="variant-label">
+                {ui.blocks.variants.timeline.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MilestoneTimeline
+                  id="timeline-split"
+                  title={ui.company.timeline.title}
+                  lead={ui.company.timeline.lead}
+                  milestones={milestones}
+                  empty={ui.empty.milestones}
+                  layout="split"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="timeline-stacked-label"
+              data-testid="variant"
+              data-block="timeline"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="timeline-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.timeline.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MilestoneTimeline
+                  id="timeline-stacked"
+                  title={ui.company.timeline.title}
+                  lead={ui.company.timeline.lead}
+                  milestones={milestones}
+                  empty={ui.empty.milestones}
+                  layout="stacked"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="timeline-row-label"
+              data-testid="variant"
+              data-block="timeline"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="timeline-row-label" data-testid="variant-label">
+                {ui.blocks.variants.timeline.row}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MilestoneTimeline
+                  id="timeline-row"
+                  title={ui.company.timeline.title}
+                  lead={ui.company.timeline.lead}
+                  milestones={milestones}
+                  empty={ui.empty.milestones}
+                  layout="row"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="timeline-rowMuted-label"
+              data-testid="variant"
+              data-block="timeline"
+              data-variant="rowMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="timeline-rowMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.timeline.rowMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MilestoneTimeline
+                  id="timeline-rowMuted"
+                  title={ui.company.timeline.title}
+                  lead={ui.company.timeline.lead}
+                  milestones={milestones}
+                  empty={ui.empty.milestones}
+                  layout="row"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.rowMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/IndexPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/IndexPage.tsx
new file mode 100644
index 0000000..40c2872
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/IndexPage.tsx
@@ -0,0 +1,498 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The index page of CatalogScreen.
+import { For } from "solid-js";
+import { Block, Container, Link, List, ListItem, Stack, Text, Title, tpl } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const CATALOG = [
+  {
+    id: "marketing",
+    titleId: "section-marketing-title",
+    title: ui.catalog.sections.marketing.title,
+    text: ui.catalog.sections.marketing.text,
+    categories: [
+      {
+        id: "marketing-navigation",
+        href: "#/marketing-navigation",
+        name: ui.catalog.categories.marketingNavigation,
+        blocks: 3,
+        variants: 14,
+      },
+      { id: "marketing-hero", href: "#/marketing-hero", name: ui.catalog.categories.marketingHero, blocks: 1, variants: 15 },
+      {
+        id: "marketing-hero-split",
+        href: "#/marketing-hero-split",
+        name: ui.catalog.categories.marketingHeroSplit,
+        blocks: 1,
+        variants: 7,
+      },
+      {
+        id: "marketing-page-head",
+        href: "#/marketing-page-head",
+        name: ui.catalog.categories.marketingPageHead,
+        blocks: 1,
+        variants: 3,
+      },
+      {
+        id: "marketing-page-trail",
+        href: "#/marketing-page-trail",
+        name: ui.catalog.categories.marketingPageTrail,
+        blocks: 1,
+        variants: 4,
+      },
+      { id: "marketing-features", href: "#/marketing-features", name: ui.catalog.categories.marketingFeatures, blocks: 3, variants: 17 },
+      {
+        id: "marketing-features-split",
+        href: "#/marketing-features-split",
+        name: ui.catalog.categories.marketingFeaturesSplit,
+        blocks: 1,
+        variants: 5,
+      },
+      {
+        id: "marketing-feature-cards",
+        href: "#/marketing-feature-cards",
+        name: ui.catalog.categories.marketingFeatureCards,
+        blocks: 1,
+        variants: 4,
+      },
+      {
+        id: "marketing-media-list",
+        href: "#/marketing-media-list",
+        name: ui.catalog.categories.marketingMediaList,
+        blocks: 1,
+        variants: 6,
+      },
+      {
+        id: "marketing-showcases",
+        href: "#/marketing-showcases",
+        name: ui.catalog.categories.marketingShowcases,
+        blocks: 4,
+        variants: 15,
+      },
+      {
+        id: "marketing-how-it-works",
+        href: "#/marketing-how-it-works",
+        name: ui.catalog.categories.marketingHowItWorks,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "marketing-proof", href: "#/marketing-proof", name: ui.catalog.categories.marketingProof, blocks: 3, variants: 14 },
+      { id: "marketing-stats", href: "#/marketing-stats", name: ui.catalog.categories.marketingStats, blocks: 1, variants: 8 },
+      {
+        id: "marketing-testimonials",
+        href: "#/marketing-testimonials",
+        name: ui.catalog.categories.marketingTestimonials,
+        blocks: 1,
+        variants: 10,
+      },
+      {
+        id: "marketing-testimonials-split",
+        href: "#/marketing-testimonials-split",
+        name: ui.catalog.categories.marketingTestimonialsSplit,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "marketing-pricing", href: "#/marketing-pricing", name: ui.catalog.categories.marketingPricing, blocks: 2, variants: 13 },
+      {
+        id: "marketing-pricing-tools",
+        href: "#/marketing-pricing-tools",
+        name: ui.catalog.categories.marketingPricingTools,
+        blocks: 3,
+        variants: 12,
+      },
+      { id: "marketing-faq", href: "#/marketing-faq", name: ui.catalog.categories.marketingFaq, blocks: 2, variants: 14 },
+      { id: "marketing-cta", href: "#/marketing-cta", name: ui.catalog.categories.marketingCta, blocks: 1, variants: 11 },
+      {
+        id: "marketing-cta-proof",
+        href: "#/marketing-cta-proof",
+        name: ui.catalog.categories.marketingCtaProof,
+        blocks: 1,
+        variants: 7,
+      },
+      { id: "marketing-team", href: "#/marketing-team", name: ui.catalog.categories.marketingTeam, blocks: 1, variants: 6 },
+      { id: "marketing-about", href: "#/marketing-about", name: ui.catalog.categories.marketingAbout, blocks: 2, variants: 7 },
+      {
+        id: "marketing-portfolio",
+        href: "#/marketing-portfolio",
+        name: ui.catalog.categories.marketingPortfolio,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "marketing-careers", href: "#/marketing-careers", name: ui.catalog.categories.marketingCareers, blocks: 1, variants: 4 },
+      { id: "marketing-gallery", href: "#/marketing-gallery", name: ui.catalog.categories.marketingGallery, blocks: 2, variants: 10 },
+      { id: "marketing-footer", href: "#/marketing-footer", name: ui.catalog.categories.marketingFooter, blocks: 2, variants: 9 },
+      {
+        id: "marketing-footer-split",
+        href: "#/marketing-footer-split",
+        name: ui.catalog.categories.marketingFooterSplit,
+        blocks: 1,
+        variants: 6,
+      },
+    ],
+  },
+  {
+    id: "content",
+    titleId: "section-content-title",
+    title: ui.catalog.sections.content.title,
+    text: ui.catalog.sections.content.text,
+    categories: [
+      { id: "content-blog", href: "#/content-blog", name: ui.catalog.categories.contentBlog, blocks: 1, variants: 9 },
+      {
+        id: "content-post-showcase",
+        href: "#/content-post-showcase",
+        name: ui.catalog.categories.contentPostShowcase,
+        blocks: 1,
+        variants: 4,
+      },
+      {
+        id: "content-post-header",
+        href: "#/content-post-header",
+        name: ui.catalog.categories.contentPostHeader,
+        blocks: 1,
+        variants: 4,
+      },
+      {
+        id: "content-post-header-split",
+        href: "#/content-post-header-split",
+        name: ui.catalog.categories.contentPostHeaderSplit,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "content-article", href: "#/content-article", name: ui.catalog.categories.contentArticle, blocks: 1, variants: 4 },
+      { id: "content-timeline", href: "#/content-timeline", name: ui.catalog.categories.contentTimeline, blocks: 1, variants: 4 },
+      { id: "content-story-tabs", href: "#/content-story-tabs", name: ui.catalog.categories.contentStoryTabs, blocks: 1, variants: 3 },
+    ],
+  },
+  {
+    id: "promo",
+    titleId: "section-promo-title",
+    title: ui.catalog.sections.promo.title,
+    text: ui.catalog.sections.promo.text,
+    categories: [
+      { id: "promo-banners", href: "#/promo-banners", name: ui.catalog.categories.promoBanners, blocks: 2, variants: 12 },
+      { id: "promo-newsletter", href: "#/promo-newsletter", name: ui.catalog.categories.promoNewsletter, blocks: 1, variants: 5 },
+    ],
+  },
+  {
+    id: "support",
+    titleId: "section-support-title",
+    title: ui.catalog.sections.support.title,
+    text: ui.catalog.sections.support.text,
+    categories: [
+      { id: "support-contact", href: "#/support-contact", name: ui.catalog.categories.supportContact, blocks: 2, variants: 10 },
+      { id: "support-states", href: "#/support-states", name: ui.catalog.categories.supportStates, blocks: 1, variants: 5 },
+    ],
+  },
+  {
+    id: "commerce",
+    titleId: "section-commerce-title",
+    title: ui.catalog.sections.commerce.title,
+    text: ui.catalog.sections.commerce.text,
+    categories: [
+      {
+        id: "commerce-storefront",
+        href: "#/commerce-storefront",
+        name: ui.catalog.categories.commerceStorefront,
+        blocks: 3,
+        variants: 10,
+      },
+      {
+        id: "commerce-categories",
+        href: "#/commerce-categories",
+        name: ui.catalog.categories.commerceCategories,
+        blocks: 1,
+        variants: 7,
+      },
+      { id: "commerce-products", href: "#/commerce-products", name: ui.catalog.categories.commerceProducts, blocks: 1, variants: 9 },
+      { id: "commerce-product", href: "#/commerce-product", name: ui.catalog.categories.commerceProduct, blocks: 3, variants: 13 },
+      { id: "commerce-cart", href: "#/commerce-cart", name: ui.catalog.categories.commerceCart, blocks: 3, variants: 10 },
+      { id: "commerce-checkout", href: "#/commerce-checkout", name: ui.catalog.categories.commerceCheckout, blocks: 3, variants: 8 },
+      { id: "commerce-delivery", href: "#/commerce-delivery", name: ui.catalog.categories.commerceDelivery, blocks: 4, variants: 12 },
+      { id: "commerce-orders", href: "#/commerce-orders", name: ui.catalog.categories.commerceOrders, blocks: 1, variants: 4 },
+    ],
+  },
+  {
+    id: "app",
+    titleId: "section-app-title",
+    title: ui.catalog.sections.app.title,
+    text: ui.catalog.sections.app.text,
+    categories: [
+      { id: "app-shell", href: "#/app-shell", name: ui.catalog.categories.appShell, blocks: 3, variants: 12 },
+      {
+        id: "app-dashboard-shells",
+        href: "#/app-dashboard-shells",
+        name: ui.catalog.categories.appDashboardShells,
+        blocks: 1,
+        variants: 12,
+      },
+      { id: "app-widgets", href: "#/app-widgets", name: ui.catalog.categories.appWidgets, blocks: 3, variants: 12 },
+      { id: "app-boards", href: "#/app-boards", name: ui.catalog.categories.appBoards, blocks: 2, variants: 8 },
+      { id: "app-states", href: "#/app-states", name: ui.catalog.categories.appStates, blocks: 2, variants: 10 },
+      { id: "app-auth", href: "#/app-auth", name: ui.catalog.categories.appAuth, blocks: 2, variants: 12 },
+      { id: "app-auth-pages", href: "#/app-auth-pages", name: ui.catalog.categories.appAuthPages, blocks: 1, variants: 9 },
+      { id: "app-settings", href: "#/app-settings", name: ui.catalog.categories.appSettings, blocks: 1, variants: 4 },
+      { id: "app-onboarding", href: "#/app-onboarding", name: ui.catalog.categories.appOnboarding, blocks: 2, variants: 11 },
+      { id: "app-guidance", href: "#/app-guidance", name: ui.catalog.categories.appGuidance, blocks: 2, variants: 8 },
+    ],
+  },
+] as const;
+const PAGES = [
+  {
+    id: "saas-landing",
+    visit: "page-saas-landing",
+    href: "#/page-saas-landing",
+    name: ui.catalog.pages.saasLanding.title,
+    text: ui.catalog.pages.saasLanding.text,
+    blocks: 11,
+  },
+  {
+    id: "company",
+    visit: "page-company",
+    href: "#/page-company",
+    name: ui.catalog.pages.company.title,
+    text: ui.catalog.pages.company.text,
+    blocks: 9,
+  },
+  {
+    id: "portfolio",
+    visit: "page-portfolio",
+    href: "#/page-portfolio",
+    name: ui.catalog.pages.portfolio.title,
+    text: ui.catalog.pages.portfolio.text,
+    blocks: 7,
+  },
+  {
+    id: "store-home",
+    visit: "page-store-home",
+    href: "#/page-store-home",
+    name: ui.catalog.pages.storeHome.title,
+    text: ui.catalog.pages.storeHome.text,
+    blocks: 9,
+  },
+  {
+    id: "store-home-2",
+    visit: "page-store-home-2",
+    href: "#/page-store-home-2",
+    name: ui.catalog.pages.storeHome2.title,
+    text: ui.catalog.pages.storeHome2.text,
+    blocks: 7,
+  },
+  {
+    id: "store-catalog",
+    visit: "page-store-catalog",
+    href: "#/page-store-catalog",
+    name: ui.catalog.pages.storeCatalog.title,
+    text: ui.catalog.pages.storeCatalog.text,
+    blocks: 6,
+  },
+  {
+    id: "product-detail",
+    visit: "page-product-detail",
+    href: "#/page-product-detail",
+    name: ui.catalog.pages.productDetail.title,
+    text: ui.catalog.pages.productDetail.text,
+    blocks: 6,
+  },
+  {
+    id: "cart",
+    visit: "page-cart",
+    href: "#/page-cart",
+    name: ui.catalog.pages.cart.title,
+    text: ui.catalog.pages.cart.text,
+    blocks: 5,
+  },
+  {
+    id: "checkout",
+    visit: "page-checkout",
+    href: "#/page-checkout",
+    name: ui.catalog.pages.checkout.title,
+    text: ui.catalog.pages.checkout.text,
+    blocks: 4,
+  },
+  {
+    id: "shell-classic",
+    visit: "page-shell-classic",
+    href: "#/page-shell-classic",
+    name: ui.catalog.pages.shellClassic.title,
+    text: ui.catalog.pages.shellClassic.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-inset",
+    visit: "page-shell-inset",
+    href: "#/page-shell-inset",
+    name: ui.catalog.pages.shellInset.title,
+    text: ui.catalog.pages.shellInset.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail",
+    visit: "page-shell-rail",
+    href: "#/page-shell-rail",
+    name: ui.catalog.pages.shellRail.title,
+    text: ui.catalog.pages.shellRail.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-footer",
+    visit: "page-shell-rail-footer",
+    href: "#/page-shell-rail-footer",
+    name: ui.catalog.pages.shellRailFooter.title,
+    text: ui.catalog.pages.shellRailFooter.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed",
+    visit: "page-shell-collapsed",
+    href: "#/page-shell-collapsed",
+    name: ui.catalog.pages.shellCollapsed.title,
+    text: ui.catalog.pages.shellCollapsed.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level",
+    visit: "page-shell-two-level",
+    href: "#/page-shell-two-level",
+    name: ui.catalog.pages.shellTwoLevel.title,
+    text: ui.catalog.pages.shellTwoLevel.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level-full",
+    visit: "page-shell-two-level-full",
+    href: "#/page-shell-two-level-full",
+    name: ui.catalog.pages.shellTwoLevelFull.title,
+    text: ui.catalog.pages.shellTwoLevelFull.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-end",
+    visit: "page-shell-end",
+    href: "#/page-shell-end",
+    name: ui.catalog.pages.shellEnd.title,
+    text: ui.catalog.pages.shellEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-end",
+    visit: "page-shell-rail-end",
+    href: "#/page-shell-rail-end",
+    name: ui.catalog.pages.shellRailEnd.title,
+    text: ui.catalog.pages.shellRailEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-top-only",
+    visit: "page-shell-top-only",
+    href: "#/page-shell-top-only",
+    name: ui.catalog.pages.shellTopOnly.title,
+    text: ui.catalog.pages.shellTopOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-side-only",
+    visit: "page-shell-side-only",
+    href: "#/page-shell-side-only",
+    name: ui.catalog.pages.shellSideOnly.title,
+    text: ui.catalog.pages.shellSideOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed-end",
+    visit: "page-shell-collapsed-end",
+    href: "#/page-shell-collapsed-end",
+    name: ui.catalog.pages.shellCollapsedEnd.title,
+    text: ui.catalog.pages.shellCollapsedEnd.text,
+    blocks: 1,
+  },
+] as const;
+
+export function IndexPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Stack gap="2" align="stretch">
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="catalog-title">
+              {ui.catalog.title}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.catalog.intro}
+            </Text>
+          </Stack>
+          <For each={CATALOG ?? []}>{(section) => (
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby={section.titleId}
+              data-testid="catalog-section"
+              data-section={section.id}
+            >
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id={section.titleId}>
+                  {section.title}
+                </Title>
+                <Text size="sm" class="max-w-2xl text-muted-foreground">
+                  {section.text}
+                </Text>
+              </Stack>
+              <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="category-list">
+                <For each={section.categories ?? []}>{(cat) => (
+                  <ListItem class="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+                    <Link
+                      href={cat.href}
+                      variant="default"
+                      class="font-bold"
+                      data-testid="category-link"
+                      data-category={cat.id}
+                      data-visit={cat.id}
+                    >
+                      {cat.name}
+                    </Link>
+                    <Text size="sm" class="text-muted-foreground" data-testid="category-count">
+                      {tpl(ui.catalog.count, cat.blocks, cat.variants)}
+                    </Text>
+                  </ListItem>
+                )}</For>
+              </List>
+            </Stack>
+          )}</For>
+          <Stack gap="4" align="stretch" role="group" aria-labelledby="pages-title-2" data-testid="pages-section">
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="pages-title-2">
+                {ui.catalog.pagesTitle}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.catalog.pagesText}
+              </Text>
+            </Stack>
+            <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="page-list">
+              <For each={PAGES ?? []}>{(p) => (
+                <ListItem class="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+                  <Link
+                    href={p.href}
+                    variant="default"
+                    class="font-bold"
+                    data-testid="page-link"
+                    data-page={p.id}
+                    data-visit={p.visit}
+                  >
+                    {p.name}
+                  </Link>
+                  <Text size="sm" class="text-muted-foreground">
+                    {p.text}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground" data-testid="page-count">
+                    {tpl(ui.catalog.pageCount, p.blocks)}
+                  </Text>
+                </ListItem>
+              )}</For>
+            </List>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingAboutPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingAboutPage.tsx
new file mode 100644
index 0000000..f2046cf
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingAboutPage.tsx
@@ -0,0 +1,306 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-about page of CatalogScreen.
+
+import {
+  AboutCompany,
+  AboutMe,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Skill,
+  type Spec,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+
+const ABOUTME_ACTIONS = { mode: "two", cta: ui.company.aboutMe.cta, href: "#/work", secondary: ui.company.aboutMe.more, secondaryHref: "#/contact" } as const;
+
+export function MarketingAboutPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingAbout}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 7)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-about-title"
+            data-testid="catalog-block"
+            data-block="about"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-about-title">
+                {ui.blocks.names.about}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.about}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="about-split-label"
+              data-testid="variant"
+              data-block="about"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="about-split-label" data-testid="variant-label">
+                {ui.blocks.variants.about.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutCompany
+                  id="about-split"
+                  title={ui.company.about.title}
+                  lead={ui.company.about.lead}
+                  stats={stats}
+                  values={values}
+                  layout="split"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="about-stacked-label"
+              data-testid="variant"
+              data-block="about"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="about-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.about.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutCompany
+                  id="about-stacked"
+                  title={ui.company.about.title}
+                  lead={ui.company.about.lead}
+                  stats={stats}
+                  values={values}
+                  layout="stacked"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="about-muted-label"
+              data-testid="variant"
+              data-block="about"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="about-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.about.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutCompany
+                  id="about-muted"
+                  title={ui.company.about.title}
+                  lead={ui.company.about.lead}
+                  stats={stats}
+                  values={values}
+                  layout="split"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-aboutme-title"
+            data-testid="catalog-block"
+            data-block="aboutme"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-aboutme-title">
+                {ui.blocks.names.aboutme}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.aboutme}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="aboutme-facts-label"
+              data-testid="variant"
+              data-block="aboutme"
+              data-variant="facts"
+            >
+              <Title as={3} size="base" weight="bold" id="aboutme-facts-label" data-testid="variant-label">
+                {ui.blocks.variants.aboutme.facts}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutMe
+                  id="aboutme-facts"
+                  title={ui.company.aboutMe.title}
+                  lead={ui.company.aboutMe.lead}
+                  badge={ui.company.aboutMe.badge}
+                  facts={profilefacts}
+                  skills={skills}
+                  labels={ui.company.aboutMe}
+                  actions={ABOUTME_ACTIONS}
+                  layout="facts"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.facts))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="aboutme-factsEnd-label"
+              data-testid="variant"
+              data-block="aboutme"
+              data-variant="factsEnd"
+            >
+              <Title as={3} size="base" weight="bold" id="aboutme-factsEnd-label" data-testid="variant-label">
+                {ui.blocks.variants.aboutme.factsEnd}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutMe
+                  id="aboutme-factsEnd"
+                  title={ui.company.aboutMe.title}
+                  lead={ui.company.aboutMe.lead}
+                  badge={ui.company.aboutMe.badge}
+                  facts={profilefacts}
+                  skills={skills}
+                  labels={ui.company.aboutMe}
+                  actions={ABOUTME_ACTIONS}
+                  layout="facts"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.factsEnd))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="aboutme-skills-label"
+              data-testid="variant"
+              data-block="aboutme"
+              data-variant="skills"
+            >
+              <Title as={3} size="base" weight="bold" id="aboutme-skills-label" data-testid="variant-label">
+                {ui.blocks.variants.aboutme.skills}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutMe
+                  id="aboutme-skills"
+                  title={ui.company.aboutMe.title}
+                  lead={ui.company.aboutMe.lead}
+                  badge={ui.company.aboutMe.badge}
+                  facts={profilefacts}
+                  skills={skills}
+                  labels={ui.company.aboutMe}
+                  actions={ABOUTME_ACTIONS}
+                  layout="skills"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skills))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="aboutme-skillsMuted-label"
+              data-testid="variant"
+              data-block="aboutme"
+              data-variant="skillsMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="aboutme-skillsMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.aboutme.skillsMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AboutMe
+                  id="aboutme-skillsMuted"
+                  title={ui.company.aboutMe.title}
+                  lead={ui.company.aboutMe.lead}
+                  badge={ui.company.aboutMe.badge}
+                  facts={profilefacts}
+                  skills={skills}
+                  labels={ui.company.aboutMe}
+                  actions={ABOUTME_ACTIONS}
+                  layout="skills"
+                  mediaSide="end"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skillsMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingCareersPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingCareersPage.tsx
new file mode 100644
index 0000000..7150cf1
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingCareersPage.tsx
@@ -0,0 +1,194 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-careers page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  JobBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Department,
+  type Job,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+
+export function MarketingCareersPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingCareers}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-jobs-title"
+            data-testid="catalog-block"
+            data-block="jobs"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-jobs-title">
+                {ui.blocks.names.jobs}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.jobs}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="jobs-grid-label"
+              data-testid="variant"
+              data-block="jobs"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="jobs-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.jobs.grid}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <JobBoard
+                  id="jobs-grid"
+                  title={ui.company.jobs.title}
+                  lead={ui.company.jobs.lead}
+                  jobs={jobs}
+                  empty={ui.empty.jobs}
+                  departments={departments}
+                  labels={ui.company.jobs}
+                  layout="grid"
+                  salary="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="jobs-salary-label"
+              data-testid="variant"
+              data-block="jobs"
+              data-variant="salary"
+            >
+              <Title as={3} size="base" weight="bold" id="jobs-salary-label" data-testid="variant-label">
+                {ui.blocks.variants.jobs.salary}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <JobBoard
+                  id="jobs-salary"
+                  title={ui.company.jobs.title}
+                  lead={ui.company.jobs.lead}
+                  jobs={jobs}
+                  empty={ui.empty.jobs}
+                  departments={departments}
+                  labels={ui.company.jobs}
+                  layout="grid"
+                  salary="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.salary))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="jobs-grouped-label"
+              data-testid="variant"
+              data-block="jobs"
+              data-variant="grouped"
+            >
+              <Title as={3} size="base" weight="bold" id="jobs-grouped-label" data-testid="variant-label">
+                {ui.blocks.variants.jobs.grouped}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <JobBoard
+                  id="jobs-grouped"
+                  title={ui.company.jobs.title}
+                  lead={ui.company.jobs.lead}
+                  jobs={jobs}
+                  empty={ui.empty.jobs}
+                  departments={departments}
+                  labels={ui.company.jobs}
+                  layout="grouped"
+                  salary="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="jobs-table-label"
+              data-testid="variant"
+              data-block="jobs"
+              data-variant="table"
+            >
+              <Title as={3} size="base" weight="bold" id="jobs-table-label" data-testid="variant-label">
+                {ui.blocks.variants.jobs.table}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <JobBoard
+                  id="jobs-table"
+                  title={ui.company.jobs.title}
+                  lead={ui.company.jobs.lead}
+                  jobs={jobs}
+                  empty={ui.empty.jobs}
+                  departments={departments}
+                  labels={ui.company.jobs}
+                  layout="table"
+                  salary="show"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.table))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingCtaPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingCtaPage.tsx
new file mode 100644
index 0000000..6495914
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingCtaPage.tsx
@@ -0,0 +1,382 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-cta page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const CTA_ACTIONS = {
+  cta: ui.site.home.ctaButton,
+  href: "#/pricing",
+  secondary: ui.site.home.ctaSecondary,
+  secondaryHref: "#/",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+
+export function MarketingCtaPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingCta}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 11)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cta-title"
+            data-testid="catalog-block"
+            data-block="cta"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cta-title">
+                {ui.blocks.names.cta}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cta}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-card-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-card-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.card}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-card"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="card"
+                  tone="muted"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-banner-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="banner"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-banner-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.banner}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-banner"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="banner"
+                  tone="muted"
+                  proof="none"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.banner))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-row-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-row-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.row}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-row"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="row"
+                  tone="muted"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-form-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="form"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-form-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.form}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-form"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "form" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="band"
+                  tone="muted"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-quote-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="quote"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-quote-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.quote}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-quote"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="band"
+                  tone="muted"
+                  proof="quote"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-band-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="band"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-band-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.band}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-band"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="band"
+                  tone="muted"
+                  proof="none"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-split-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-split-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-split"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "two" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="split"
+                  tone="default"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-compact-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-compact"
+                  title={ui.site.home.ctaTitle}
+                  text={ui.site.home.ctaText}
+                  actions={{ ...CTA_ACTIONS, mode: "one" }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="card"
+                  tone="muted"
+                  proof="none"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-saas-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="saas"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-saas-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.saas}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-saas"
+                  title={ui.cases.saas.cta.title}
+                  text={ui.cases.saas.cta.text}
+                  actions={{
+                    ...CTA_ACTIONS,
+                    cta: ui.cases.saas.cta.cta,
+                    secondary: ui.cases.saas.cta.secondary,
+                    mode: "two",
+                  }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="band"
+                  tone="muted"
+                  proof="none"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-shop-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="shop"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-shop-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.shop}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-shop"
+                  title={ui.cases.shop.cta.title}
+                  text={ui.cases.shop.cta.text}
+                  actions={{
+                    ...CTA_ACTIONS,
+                    cta: ui.cases.shop.cta.cta,
+                    secondary: ui.cases.shop.cta.secondary,
+                    mode: "one",
+                  }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="split"
+                  tone="default"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cta-agency-label"
+              data-testid="variant"
+              data-block="cta"
+              data-variant="agency"
+            >
+              <Title as={3} size="base" weight="bold" id="cta-agency-label" data-testid="variant-label">
+                {ui.blocks.variants.cta.agency}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaBand
+                  id="cta-agency"
+                  title={ui.cases.agency.cta.title}
+                  text={ui.cases.agency.cta.text}
+                  actions={{
+                    ...CTA_ACTIONS,
+                    cta: ui.cases.agency.cta.cta,
+                    secondary: ui.cases.agency.cta.secondary,
+                    mode: "two",
+                  }}
+                  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+                  layout="card"
+                  tone="muted"
+                  proof="none"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingCtaProofPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingCtaProofPage.tsx
new file mode 100644
index 0000000..c08a703
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingCtaProofPage.tsx
@@ -0,0 +1,304 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-cta-proof page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaProof,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Logo,
+  type Stat,
+  type Zone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+const CTAPROOF_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.ctaProof.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.ctaProof.secondary,
+  secondaryHref: "#/contact",
+} as const;
+const CTAPROOF_CONTENT = { logos, features, stats, zones } as const;
+
+export function MarketingCtaProofPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingCtaProof}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 7)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-ctaproof-title"
+            data-testid="catalog-block"
+            data-block="ctaproof"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-ctaproof-title">
+                {ui.blocks.names.ctaproof}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.ctaproof}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-centerLogos-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="centerLogos"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-centerLogos-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.centerLogos}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-centerLogos"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="center"
+                  proof="logos"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerLogos))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-centerFeatures-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="centerFeatures"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-centerFeatures-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.centerFeatures}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-centerFeatures"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="center"
+                  proof="features"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerFeatures))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-centerStats-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="centerStats"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-centerStats-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.centerStats}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-centerStats"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="center"
+                  proof="stats"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerStats))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-splitStats-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="splitStats"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-splitStats-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.splitStats}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-splitStats"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="split"
+                  proof="stats"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-splitStatsStart-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="splitStatsStart"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-splitStatsStart-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.splitStatsStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-splitStatsStart"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="split"
+                  proof="stats"
+                  mediaSide="start"
+                  tone="default"
+                  note={ui.marketing.ctaProof.note}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStatsStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-splitRows-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="splitRows"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-splitRows-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.splitRows}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-splitRows"
+                  title={ui.marketing.ctaProof.title}
+                  lead={ui.marketing.ctaProof.lead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="split"
+                  proof="rows"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitRows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="ctaproof-splitZones-label"
+              data-testid="variant"
+              data-block="ctaproof"
+              data-variant="splitZones"
+            >
+              <Title as={3} size="base" weight="bold" id="ctaproof-splitZones-label" data-testid="variant-label">
+                {ui.blocks.variants.ctaproof.splitZones}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CtaProof
+                  id="ctaproof-splitZones"
+                  title={ui.marketing.ctaProof.zonesTitle}
+                  lead={ui.marketing.ctaProof.zonesLead}
+                  badge={ui.marketing.ctaProof.badge}
+                  actions={CTAPROOF_ACTIONS}
+                  content={CTAPROOF_CONTENT}
+                  layout="split"
+                  proof="zones"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitZones))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingFaqPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFaqPage.tsx
new file mode 100644
index 0000000..2edb55d
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFaqPage.tsx
@@ -0,0 +1,523 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-faq page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FaqList,
+  FaqSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Question,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const QUESTIONS_FIELDS = {
+  "id": "id",
+  "question": "title",
+  "answer": "metadata.answer.value",
+  "category": "terms|term:faq_category",
+  "icon": "metadata.icon.value",
+} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+
+const FAQ_FILTER = { tabs: faqtabs, label: ui.vibe.faq.tabs, category: "" } as const;
+const FAQSPLIT_LABELS = {
+  cta: ui.marketing.faqSplit.cta,
+  more: ui.marketing.faqSplit.more,
+  asideTitle: ui.marketing.faqSplit.asideTitle,
+  asideText: ui.marketing.faqSplit.asideText,
+  asideCta: ui.marketing.faqSplit.asideCta,
+  search: ui.marketing.faqSplit.search,
+  popular: ui.marketing.faqSplit.popular,
+} as const;
+
+export function MarketingFaqPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFaq}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 14)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-faq-title"
+            data-testid="catalog-block"
+            data-block="faq"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-faq-title">
+                {ui.blocks.names.faq}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.faq}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-list-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-list-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-list"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-chat-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="chat"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-chat-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.chat}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-chat"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="chat"
+                  cols="1"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-search-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="search"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-search-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.search}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-search"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-tabs-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="tabs"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-tabs-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.tabs}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-tabs"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, category: "billing", mode: "categories" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-twoColumns-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="twoColumns"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-twoColumns-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.twoColumns}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-twoColumns"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="2"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-muted-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-muted"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.muted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faq-roomy-label"
+              data-testid="variant"
+              data-block="faq"
+              data-variant="roomy"
+            >
+              <Title as={3} size="base" weight="bold" id="faq-roomy-label" data-testid="variant-label">
+                {ui.blocks.variants.faq.roomy}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqList
+                  id="faq-roomy"
+                  title={ui.site.pricing.faqTitle}
+                  items={faq}
+                  empty={ui.vibe.faq.empty}
+                  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+                  filter={{ ...FAQ_FILTER, mode: "none" }}
+                  layout="accordion"
+                  cols="1"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.roomy))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-faqsplit-title"
+            data-testid="catalog-block"
+            data-block="faqsplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-faqsplit-title">
+                {ui.blocks.names.faqsplit}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.faqsplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-headSplit-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="headSplit"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-headSplit-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.headSplit}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-headSplit"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="head"
+                  cards="grid3"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.headSplit))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-helpCard-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="helpCard"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-helpCard-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.helpCard}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-helpCard"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="aside"
+                  cards="grid3"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-picture-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="picture"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-picture-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.picture}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-picture"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="media"
+                  cards="grid3"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.picture))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-finder-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="finder"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-finder-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.finder}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-finder"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="search"
+                  cards="grid3"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.finder))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-cards3-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="cards3"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-cards3-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.cards3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-cards3"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="cards"
+                  cards="grid3"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-cards4-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="cards4"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-cards4-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.cards4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-cards4"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="cards"
+                  cards="grid4"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="faqsplit-cardsIcons-label"
+              data-testid="variant"
+              data-block="faqsplit"
+              data-variant="cardsIcons"
+            >
+              <Title as={3} size="base" weight="bold" id="faqsplit-cardsIcons-label" data-testid="variant-label">
+                {ui.blocks.variants.faqsplit.cardsIcons}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FaqSplit
+                  id="faqsplit-cardsIcons"
+                  title={ui.marketing.faqSplit.title}
+                  lead={ui.marketing.faqSplit.lead}
+                  badge={ui.marketing.faqSplit.badge}
+                  items={questions}
+                  channels={channels}
+                  topics={faqtabs}
+                  labels={FAQSPLIT_LABELS}
+                  layout="cards"
+                  cards="icons"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cardsIcons))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.tsx
new file mode 100644
index 0000000..ce92b32
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.tsx
@@ -0,0 +1,181 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-feature-cards page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureShowcase,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+
+export function MarketingFeatureCardsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFeatureCards}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-featureshowcase-title"
+            data-testid="catalog-block"
+            data-block="featureshowcase"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-featureshowcase-title">
+                {ui.blocks.names.featureshowcase}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.featureshowcase}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featureshowcase-pictureCards3-label"
+              data-testid="variant"
+              data-block="featureshowcase"
+              data-variant="pictureCards3"
+            >
+              <Title as={3} size="base" weight="bold" id="featureshowcase-pictureCards3-label" data-testid="variant-label">
+                {ui.blocks.variants.featureshowcase.pictureCards3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureShowcase
+                  id="featureshowcase-pictureCards3"
+                  title={ui.marketing.featureShowcase.title}
+                  lead={ui.marketing.featureShowcase.lead}
+                  features={values}
+                  empty={ui.empty.features}
+                  more={ui.marketing.featureShowcase.more}
+                  item="picture"
+                  cols="3"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featureshowcase-panelCards4-label"
+              data-testid="variant"
+              data-block="featureshowcase"
+              data-variant="panelCards4"
+            >
+              <Title as={3} size="base" weight="bold" id="featureshowcase-panelCards4-label" data-testid="variant-label">
+                {ui.blocks.variants.featureshowcase.panelCards4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureShowcase
+                  id="featureshowcase-panelCards4"
+                  title={ui.marketing.featureShowcase.title}
+                  lead={ui.marketing.featureShowcase.lead}
+                  features={features}
+                  empty={ui.empty.features}
+                  more={ui.marketing.featureShowcase.more}
+                  item="panel"
+                  cols="4"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featureshowcase-pictureCards4-label"
+              data-testid="variant"
+              data-block="featureshowcase"
+              data-variant="pictureCards4"
+            >
+              <Title as={3} size="base" weight="bold" id="featureshowcase-pictureCards4-label" data-testid="variant-label">
+                {ui.blocks.variants.featureshowcase.pictureCards4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureShowcase
+                  id="featureshowcase-pictureCards4"
+                  title={ui.marketing.featureShowcase.title}
+                  lead={ui.marketing.featureShowcase.lead}
+                  features={features}
+                  empty={ui.empty.features}
+                  more={ui.marketing.featureShowcase.more}
+                  item="picture"
+                  cols="4"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featureshowcase-panelCards3-label"
+              data-testid="variant"
+              data-block="featureshowcase"
+              data-variant="panelCards3"
+            >
+              <Title as={3} size="base" weight="bold" id="featureshowcase-panelCards3-label" data-testid="variant-label">
+                {ui.blocks.variants.featureshowcase.panelCards3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureShowcase
+                  id="featureshowcase-panelCards3"
+                  title={ui.marketing.featureShowcase.title}
+                  lead={ui.marketing.featureShowcase.lead}
+                  features={values}
+                  empty={ui.empty.features}
+                  more={ui.marketing.featureShowcase.more}
+                  item="panel"
+                  cols="3"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards3))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingFeaturesPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFeaturesPage.tsx
new file mode 100644
index 0000000..7167df1
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFeaturesPage.tsx
@@ -0,0 +1,580 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-features page of CatalogScreen.
+
+import {
+  BeforeAfter,
+  Block,
+  Box,
+  Container,
+  FeatureGrid,
+  Group,
+  IconWall,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Contrast,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+
+export function MarketingFeaturesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFeatures}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 17)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-features-title"
+            data-testid="catalog-block"
+            data-block="features"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-features-title">
+                {ui.blocks.names.features}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.features}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-grid-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="features-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.features.grid}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-grid"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  item="card"
+                  mediaSide="end"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-grid2-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="features-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.features.grid2}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-grid2"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-2"
+                  item="card"
+                  mediaSide="end"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-tiles4-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="tiles4"
+            >
+              <Title as={3} size="base" weight="bold" id="features-tiles4-label" data-testid="variant-label">
+                {ui.blocks.variants.features.tiles4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-tiles4"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-4"
+                  item="tile"
+                  mediaSide="end"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-cells4-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="cells4"
+            >
+              <Title as={3} size="base" weight="bold" id="features-cells4-label" data-testid="variant-label">
+                {ui.blocks.variants.features.cells4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-cells4"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-4"
+                  item="cell"
+                  mediaSide="end"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.cells4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-rows-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="rows"
+            >
+              <Title as={3} size="base" weight="bold" id="features-rows-label" data-testid="variant-label">
+                {ui.blocks.variants.features.rows}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-rows"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="rows"
+                  cols="1-3"
+                  item="card"
+                  mediaSide="end"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-rowsStart-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="rowsStart"
+            >
+              <Title as={3} size="base" weight="bold" id="features-rowsStart-label" data-testid="variant-label">
+                {ui.blocks.variants.features.rowsStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-rowsStart"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="rows"
+                  cols="1-3"
+                  item="card"
+                  mediaSide="start"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-rowsAlternate-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="rowsAlternate"
+            >
+              <Title as={3} size="base" weight="bold" id="features-rowsAlternate-label" data-testid="variant-label">
+                {ui.blocks.variants.features.rowsAlternate}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-rowsAlternate"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="rows"
+                  cols="1-3"
+                  item="card"
+                  mediaSide="alternate"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="features-tilesMuted-label"
+              data-testid="variant"
+              data-block="features"
+              data-variant="tilesMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="features-tilesMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.features.tilesMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureGrid
+                  id="features-tilesMuted"
+                  title={ui.site.home.featuresTitle}
+                  features={features}
+                  empty={ui.empty.features}
+                  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+                  layout="grid"
+                  cols="1-3"
+                  item="tile"
+                  mediaSide="end"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tilesMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-iconwall-title"
+            data-testid="catalog-block"
+            data-block="iconwall"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-iconwall-title">
+                {ui.blocks.names.iconwall}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.iconwall}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-tiles4-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="tiles4"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-tiles4-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.tiles4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-tiles4"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="4"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-tiles3-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="tiles3"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-tiles3-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.tiles3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-tiles3"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="3"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-chips6-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="chips6"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-chips6-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.chips6}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-chips6"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="6"
+                  item="chip"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-chips4-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="chips4"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-chips4-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.chips4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-chips4"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="4"
+                  item="chip"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="iconwall-muted-label"
+              data-testid="variant"
+              data-block="iconwall"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="iconwall-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.iconwall.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <IconWall
+                  id="iconwall-muted"
+                  title={ui.vibe.wall.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  cols="4"
+                  item="tile"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-beforeafter-title"
+            data-testid="catalog-block"
+            data-block="beforeafter"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-beforeafter-title">
+                {ui.blocks.names.beforeafter}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.beforeafter}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="beforeafter-cards-label"
+              data-testid="variant"
+              data-block="beforeafter"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="beforeafter-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.beforeafter.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BeforeAfter
+                  id="beforeafter-cards"
+                  title={ui.vibe.beforeafter.title}
+                  points={beforeafter}
+                  empty={ui.empty.points}
+                  labels={ui.vibe.beforeafter.labels}
+                  layout="cards"
+                  icons="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="beforeafter-rows-label"
+              data-testid="variant"
+              data-block="beforeafter"
+              data-variant="rows"
+            >
+              <Title as={3} size="base" weight="bold" id="beforeafter-rows-label" data-testid="variant-label">
+                {ui.blocks.variants.beforeafter.rows}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BeforeAfter
+                  id="beforeafter-rows"
+                  title={ui.vibe.beforeafter.title}
+                  points={beforeafter}
+                  empty={ui.empty.points}
+                  labels={ui.vibe.beforeafter.labels}
+                  layout="rows"
+                  icons="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="beforeafter-plain-label"
+              data-testid="variant"
+              data-block="beforeafter"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="beforeafter-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.beforeafter.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BeforeAfter
+                  id="beforeafter-plain"
+                  title={ui.vibe.beforeafter.title}
+                  points={beforeafter}
+                  empty={ui.empty.points}
+                  labels={ui.vibe.beforeafter.labels}
+                  layout="cards"
+                  icons="hide"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="beforeafter-muted-label"
+              data-testid="variant"
+              data-block="beforeafter"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="beforeafter-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.beforeafter.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BeforeAfter
+                  id="beforeafter-muted"
+                  title={ui.vibe.beforeafter.title}
+                  points={beforeafter}
+                  empty={ui.empty.points}
+                  labels={ui.vibe.beforeafter.labels}
+                  layout="cards"
+                  icons="show"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.tsx
new file mode 100644
index 0000000..1477a4b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.tsx
@@ -0,0 +1,233 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-features-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FeatureSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+const FEATURESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.featureSplit.cta,
+  href: "#/start",
+  secondary: ui.marketing.featureSplit.secondary,
+  secondaryHref: "#/work",
+} as const;
+
+export function MarketingFeaturesSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFeaturesSplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 5)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-featuresplit-title"
+            data-testid="catalog-block"
+            data-block="featuresplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-featuresplit-title">
+                {ui.blocks.names.featuresplit}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.featuresplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-gridStart-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="gridStart"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-gridStart-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.gridStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-gridStart"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="grid"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-statsStart-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="statsStart"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-statsStart-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.statsStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-statsStart"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="stats"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.statsStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-gridMuted-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="gridMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-gridMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.gridMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-gridMuted"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="grid"
+                  mediaSide="end"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridMuted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-metricCards-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="metricCards"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-metricCards-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.metricCards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-metricCards"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="metrics"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuresplit-featureCards-label"
+              data-testid="variant"
+              data-block="featuresplit"
+              data-variant="featureCards"
+            >
+              <Title as={3} size="base" weight="bold" id="featuresplit-featureCards-label" data-testid="variant-label">
+                {ui.blocks.variants.featuresplit.featureCards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSplit
+                  id="featuresplit-featureCards"
+                  title={ui.marketing.featureSplit.title}
+                  lead={ui.marketing.featureSplit.lead}
+                  badge={ui.marketing.featureSplit.badge}
+                  features={features}
+                  stats={stats}
+                  actions={FEATURESPLIT_ACTIONS}
+                  layout="cards"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.featureCards))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingFooterPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFooterPage.tsx
new file mode 100644
index 0000000..269aea8
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFooterPage.tsx
@@ -0,0 +1,321 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-footer page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SiteFooter,
+  SitemapFooter,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+
+const SITEMAP_SIGNUP = { title: ui.vibe.sitemap.signupTitle, label: ui.vibe.sitemap.signupLabel, submit: ui.vibe.sitemap.signupSubmit } as const;
+
+export function MarketingFooterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFooter}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 9)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-footer-title"
+            data-testid="catalog-block"
+            data-block="footer"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-footer-title">
+                {ui.blocks.names.footer}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.footer}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footer-minimal-label"
+              data-testid="variant"
+              data-block="footer"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="footer-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.footer.minimal}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteFooter
+                  labels={ui.site.footer}
+                  layout="minimal"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.minimal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footer-centered-label"
+              data-testid="variant"
+              data-block="footer"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="footer-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.footer.centered}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteFooter
+                  labels={ui.site.footer}
+                  layout="centered"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footer-compact-label"
+              data-testid="variant"
+              data-block="footer"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="footer-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.footer.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteFooter
+                  labels={ui.site.footer}
+                  layout="minimal"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.compact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-sitemap-title"
+            data-testid="catalog-block"
+            data-block="sitemap"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-sitemap-title">
+                {ui.blocks.names.sitemap}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.sitemap}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-columns-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="columns"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-columns-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.columns}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-columns"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="columns"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.columns))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-card-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-card-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.card}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-card"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="card"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-row-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-row-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.row}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-row"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="row"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-newsletter-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="newsletter"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-newsletter-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.newsletter}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-newsletter"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "first" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="columns"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.newsletter))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-status-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="status"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-status-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.status}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-status"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "show" }}
+                  layout="columns"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.status))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sitemap-compact-label"
+              data-testid="variant"
+              data-block="sitemap"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="sitemap-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.sitemap.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SitemapFooter
+                  id="sitemap-compact"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.vibe.sitemap.tagline}
+                  copyright={ui.vibe.sitemap.copyright}
+                  groups={sitemap}
+                  signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+                  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+                  layout="columns"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.compact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingFooterSplitPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFooterSplitPage.tsx
new file mode 100644
index 0000000..6b8fdf9
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingFooterSplitPage.tsx
@@ -0,0 +1,266 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-footer-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  FooterSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type MegaGroup,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+
+const FOOTERSPLIT_EXTRAS = { stats, points: features, contacts, channels: community } as const;
+
+export function MarketingFooterSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingFooterSplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-footersplit-title"
+            data-testid="catalog-block"
+            data-block="footersplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-footersplit-title">
+                {ui.blocks.names.footersplit}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.footersplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-statsCards-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="statsCards"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-statsCards-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.statsCards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-statsCards"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="stats"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.statsCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-splitPoints-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="splitPoints"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-splitPoints-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.splitPoints}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-splitPoints"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="points"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitPoints))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-splitLinks-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="splitLinks"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-splitLinks-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.splitLinks}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-splitLinks"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="links"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitLinks))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-newsletterStart-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="newsletterStart"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-newsletterStart-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.newsletterStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-newsletterStart"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="newsletter"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.newsletterStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-splitContacts-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="splitContacts"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-splitContacts-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.splitContacts}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-splitContacts"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="contacts"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitContacts))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="footersplit-channelsStart-label"
+              data-testid="variant"
+              data-block="footersplit"
+              data-variant="channelsStart"
+            >
+              <Title as={3} size="base" weight="bold" id="footersplit-channelsStart-label" data-testid="variant-label">
+                {ui.blocks.variants.footersplit.channelsStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FooterSplit
+                  id="footersplit-channelsStart"
+                  label={ui.vibe.sitemap.label}
+                  brand={ui.site.header.brand}
+                  tagline={ui.marketing.footerSplit.tagline}
+                  copyright={ui.marketing.footerSplit.copyright}
+                  groups={sitemap}
+                  extras={FOOTERSPLIT_EXTRAS}
+                  labels={ui.marketing.footerSplit.labels}
+                  layout="channels"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.channelsStart))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingGalleryPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingGalleryPage.tsx
new file mode 100644
index 0000000..195da61
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingGalleryPage.tsx
@@ -0,0 +1,382 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-gallery page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PhotoGallery,
+  Stack,
+  TemplateGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Filter,
+  type Photo,
+  type Template,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+const TEMPLATES_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "views": "metadata.views.value|compact",
+  "likes": "metadata.likes.value|compact",
+  "topic": "metadata.topic.value",
+} as const;
+const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+
+export function MarketingGalleryPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingGallery}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-photos-title"
+            data-testid="catalog-block"
+            data-block="photos"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-photos-title">
+                {ui.blocks.names.photos}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.photos}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-grid-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.grid}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-grid"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="grid"
+                  captions="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-gridPlain-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="gridPlain"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-gridPlain-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.gridPlain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-gridPlain"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="grid"
+                  captions="hide"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.gridPlain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-masonry-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="masonry"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-masonry-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.masonry}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-masonry"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="masonry"
+                  captions="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-mosaic-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="mosaic"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-mosaic-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.mosaic}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-mosaic"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="mosaic"
+                  captions="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.mosaic))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-featured-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="featured"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-featured-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.featured}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-featured"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="featured"
+                  captions="show"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.featured))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="photos-cards-label"
+              data-testid="variant"
+              data-block="photos"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="photos-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.photos.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PhotoGallery
+                  id="photos-cards"
+                  title={ui.company.photos.title}
+                  lead={ui.company.photos.lead}
+                  photos={photos}
+                  empty={ui.empty.photos}
+                  labels={ui.company.photos}
+                  layout="cards"
+                  captions="show"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.cards))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-templates-title"
+            data-testid="catalog-block"
+            data-block="templates"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-templates-title">
+                {ui.blocks.names.templates}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.templates}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="templates-grid4-label"
+              data-testid="variant"
+              data-block="templates"
+              data-variant="grid4"
+            >
+              <Title as={3} size="base" weight="bold" id="templates-grid4-label" data-testid="variant-label">
+                {ui.blocks.variants.templates.grid4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TemplateGrid
+                  id="templates-grid4"
+                  title={ui.vibe.templates.title}
+                  templates={templates}
+                  filters={templateFilters}
+                  labels={ui.vibe.templates}
+                  browseHref="#/"
+                  empty={ui.empty.templates}
+                  cols="1-4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="templates-grid3-label"
+              data-testid="variant"
+              data-block="templates"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="templates-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.templates.grid3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TemplateGrid
+                  id="templates-grid3"
+                  title={ui.vibe.templates.title}
+                  templates={templates}
+                  filters={templateFilters}
+                  labels={ui.vibe.templates}
+                  browseHref="#/"
+                  empty={ui.empty.templates}
+                  cols="1-3"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="templates-muted-label"
+              data-testid="variant"
+              data-block="templates"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="templates-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.templates.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TemplateGrid
+                  id="templates-muted"
+                  title={ui.vibe.templates.title}
+                  templates={templates}
+                  filters={templateFilters}
+                  labels={ui.vibe.templates}
+                  browseHref="#/"
+                  empty={ui.empty.templates}
+                  cols="1-4"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.muted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="templates-roomy-label"
+              data-testid="variant"
+              data-block="templates"
+              data-variant="roomy"
+            >
+              <Title as={3} size="base" weight="bold" id="templates-roomy-label" data-testid="variant-label">
+                {ui.blocks.variants.templates.roomy}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TemplateGrid
+                  id="templates-roomy"
+                  title={ui.vibe.templates.title}
+                  templates={templates}
+                  filters={templateFilters}
+                  labels={ui.vibe.templates}
+                  browseHref="#/"
+                  empty={ui.empty.templates}
+                  cols="1-4"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.roomy))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingHeroPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingHeroPage.tsx
new file mode 100644
index 0000000..369f7de
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingHeroPage.tsx
@@ -0,0 +1,530 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-hero page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroClassic,
+  HeroPrompt,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type NavLink,
+  type Topic,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { prompts as promptsEntries } from "@ui8kit/app-shared/data/prompts";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const PROMPTS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const prompts = fromCodex<Topic>(promptsEntries, PROMPTS_FIELDS, CODEX);
+
+const HERO_ACTIONS = {
+  cta: ui.site.home.cta,
+  href: "#/pricing",
+  secondary: ui.site.home.secondary,
+  secondaryHref: "#/pricing",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+const HERO_MEDIA = { codeTitle: ui.vibe.code.title, prompt: ui.vibe.code.prompt, lines: terminal } as const;
+
+export function MarketingHeroPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingHero}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 15)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-hero-title"
+            data-testid="catalog-block"
+            data-block="hero"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-hero-title">
+                {ui.blocks.names.hero}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.hero}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-centered-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.centered}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-centered"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-screenshot-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="screenshot"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-screenshot-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.screenshot}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-screenshot"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.screenshot))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-backdrop-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="backdrop"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-backdrop-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.backdrop}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-backdrop"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "backdrop", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="muted"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.backdrop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-code-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="code"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-code-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.code}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-code"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "two" }}
+                  media={{ ...HERO_MEDIA, kind: "code", side: "end" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.code))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-cluster-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="cluster"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-cluster-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.cluster}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-cluster"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "cluster", side: "end" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.cluster))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-display-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="display"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-display-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.display}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-display"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="display"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.display))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-form-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="form"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-form-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.form}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-form"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "form" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.form))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-prompt-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="prompt"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-prompt-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.prompt}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroPrompt
+                  title={ui.vibe.hero.title}
+                  actions={{ ...HERO_ACTIONS, emailLabel: ui.vibe.hero.promptLabel, mode: "form" }}
+                  composer={{ attachLabel: ui.vibe.hero.attach, modelLabel: ui.vibe.hero.model }}
+                  nav={{
+                    brand: ui.site.header.brand,
+                    links: navlinks,
+                    current: "link-product",
+                    skip: ui.site.header.skip,
+                    label: ui.site.header.nav,
+                    login: ui.site.header.login,
+                    loginHref: "#/login",
+                  }}
+                  density="compact"
+                  badge={ui.vibe.hero.badgeLabel}
+                  badgeMark={ui.vibe.hero.badgeMark}
+                  topics={prompts}
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.prompt))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-twoActions-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="twoActions"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-twoActions-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.twoActions}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-twoActions"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "two" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.twoActions))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-split-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-split-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-split"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-splitStart-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="splitStart"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-splitStart-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.splitStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-splitStart"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "two" }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.splitStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-muted-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-muted"
+                  title={ui.site.home.title}
+                  text={ui.site.home.text}
+                  actions={{ ...HERO_ACTIONS, mode: "one" }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="muted"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.muted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-saas-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="saas"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-saas-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.saas}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-saas"
+                  title={ui.cases.saas.hero.title}
+                  text={ui.cases.saas.hero.text}
+                  actions={{
+                    ...HERO_ACTIONS,
+                    cta: ui.cases.saas.hero.cta,
+                    secondary: ui.cases.saas.hero.secondary,
+                    mode: "two",
+                  }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+                  layout="split"
+                  scale="default"
+                  tone="default"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.saas))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-shop-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="shop"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.shop}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-shop"
+                  title={ui.cases.shop.hero.title}
+                  text={ui.cases.shop.hero.text}
+                  actions={{
+                    ...HERO_ACTIONS,
+                    cta: ui.cases.shop.hero.cta,
+                    secondary: ui.cases.shop.hero.secondary,
+                    mode: "one",
+                  }}
+                  media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+                  layout="split"
+                  scale="default"
+                  tone="muted"
+                  density="roomy"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="hero-blog-label"
+              data-testid="variant"
+              data-block="hero"
+              data-variant="blog"
+            >
+              <Title as={3} size="base" weight="bold" id="hero-blog-label" data-testid="variant-label">
+                {ui.blocks.variants.hero.blog}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroClassic
+                  id="hero-blog"
+                  title={ui.cases.blog.hero.title}
+                  text={ui.cases.blog.hero.text}
+                  actions={{
+                    ...HERO_ACTIONS,
+                    cta: ui.cases.blog.hero.cta,
+                    secondary: ui.cases.blog.hero.secondary,
+                    mode: "one",
+                  }}
+                  media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+                  layout="centered"
+                  scale="default"
+                  tone="default"
+                  density="compact"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.blog))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingHeroSplitPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingHeroSplitPage.tsx
new file mode 100644
index 0000000..f6d2d50
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingHeroSplitPage.tsx
@@ -0,0 +1,328 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-hero-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroSplit,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Plan,
+  type Quote,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+const HEROSPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.heroSplit.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.heroSplit.secondary,
+  secondaryHref: "#/features",
+} as const;
+const HEROSPLIT_CONTENT = {
+  stats,
+  features,
+  people: testimonials,
+  plans: tiers,
+  proof: ui.marketing.heroSplit.proof,
+  card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+} as const;
+
+export function MarketingHeroSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingHeroSplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 7)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-herosplit-title"
+            data-testid="catalog-block"
+            data-block="herosplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-herosplit-title">
+                {ui.blocks.names.herosplit}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.herosplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-statsCards-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="statsCards"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-statsCards-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.statsCards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-statsCards"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="stats"
+                  media="picture"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.statsCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-avatars-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="avatars"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-avatars-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.avatars}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-avatars"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="avatars"
+                  media="picture"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.avatars))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-miniCards-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="miniCards"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-miniCards-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.miniCards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-miniCards"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="minis"
+                  media="card"
+                  mediaSide="end"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.miniCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-quoteStats-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="quoteStats"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-quoteStats-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.quoteStats}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-quoteStats"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="quote"
+                  media="card"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.quoteStats))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-planCards-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="planCards"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-planCards-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.planCards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-planCards"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="none"
+                  media="plans"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.planCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-pictureGrid-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="pictureGrid"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-pictureGrid-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.pictureGrid}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-pictureGrid"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="stats"
+                  media="grid"
+                  mediaSide="end"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGrid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="herosplit-pictureGridStart-label"
+              data-testid="variant"
+              data-block="herosplit"
+              data-variant="pictureGridStart"
+            >
+              <Title as={3} size="base" weight="bold" id="herosplit-pictureGridStart-label" data-testid="variant-label">
+                {ui.blocks.variants.herosplit.pictureGridStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <HeroSplit
+                  id="herosplit-pictureGridStart"
+                  title={ui.marketing.heroSplit.title}
+                  lead={ui.marketing.heroSplit.lead}
+                  badge={ui.marketing.heroSplit.badge}
+                  actions={HEROSPLIT_ACTIONS}
+                  content={HEROSPLIT_CONTENT}
+                  extra="avatars"
+                  media="grid"
+                  mediaSide="start"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGridStart))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingHowItWorksPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingHowItWorksPage.tsx
new file mode 100644
index 0000000..32a5a5a
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingHowItWorksPage.tsx
@@ -0,0 +1,232 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-how-it-works page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StepsList,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+
+export function MarketingHowItWorksPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingHowItWorks}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-steps-title"
+            data-testid="catalog-block"
+            data-block="steps"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-steps-title">
+                {ui.blocks.names.steps}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.steps}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-row-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-row-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.row}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-row"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="row"
+                  marker="number"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-rowIcons-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="rowIcons"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-rowIcons-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.rowIcons}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-rowIcons"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="row"
+                  marker="icon"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-column-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="column"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-column-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.column}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-column"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="column"
+                  marker="number"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-centered-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.centered}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-centered"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="row"
+                  marker="number"
+                  align="center"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-columnIcons-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="columnIcons"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-columnIcons-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.columnIcons}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-columnIcons"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="column"
+                  marker="icon"
+                  align="start"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.columnIcons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="steps-compact-label"
+              data-testid="variant"
+              data-block="steps"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="steps-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.steps.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StepsList
+                  id="steps-compact"
+                  title={ui.marketing.steps.title}
+                  steps={steps}
+                  empty={ui.empty.steps}
+                  layout="row"
+                  marker="number"
+                  align="start"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.compact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingMediaListPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingMediaListPage.tsx
new file mode 100644
index 0000000..c48b559
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingMediaListPage.tsx
@@ -0,0 +1,297 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-media-list page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MediaList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Feature,
+  type Post,
+  type Review,
+  type Stat,
+  type Step,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+const MEDIALIST_LABELS = {
+  count: ui.marketing.mediaList.count,
+  minutes: ui.content.labels.minutes,
+  featured: ui.marketing.mediaList.featured,
+  rating: ui.testimonials.rating,
+  figures: ui.marketing.mediaList.supportFigures,
+} as const;
+const MEDIALIST_EXTRAS = { stats, steps, posts, topics: categories, channels, reviews } as const;
+
+export function MarketingMediaListPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingMediaList}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-medialist-title"
+            data-testid="catalog-block"
+            data-block="medialist"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-medialist-title">
+                {ui.blocks.names.medialist}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.medialist}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-figuresStart-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="figuresStart"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-figuresStart-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.figuresStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-figuresStart"
+                  title={ui.marketing.mediaList.figures.title}
+                  lead={ui.marketing.mediaList.figures.lead}
+                  badge={ui.marketing.mediaList.figures.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.figures.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.figures.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="figures"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.figuresStart))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-proofReview-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="proofReview"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-proofReview-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.proofReview}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-proofReview"
+                  title={ui.marketing.mediaList.proof.title}
+                  lead={ui.marketing.mediaList.proof.lead}
+                  badge={ui.marketing.mediaList.proof.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.proof.list }}
+                  actions={{
+                    mode: "two",
+                    cta: ui.marketing.mediaList.proof.cta,
+                    href: "#/start",
+                    secondary: ui.marketing.mediaList.proof.secondary,
+                    secondaryHref: "#/more",
+                  }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="proof"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.proofReview))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-stepsRows-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="stepsRows"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-stepsRows-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.stepsRows}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-stepsRows"
+                  title={ui.marketing.mediaList.steps.title}
+                  lead={ui.marketing.mediaList.steps.lead}
+                  badge={ui.marketing.mediaList.steps.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.steps.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.steps.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="steps"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.stepsRows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-latestPosts-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="latestPosts"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-latestPosts-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.latestPosts}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-latestPosts"
+                  title={ui.marketing.mediaList.posts.title}
+                  lead={ui.marketing.mediaList.posts.lead}
+                  badge={ui.marketing.mediaList.posts.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.posts.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.posts.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="posts"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.latestPosts))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-topicRows-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="topicRows"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-topicRows-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.topicRows}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-topicRows"
+                  title={ui.marketing.mediaList.topics.title}
+                  lead={ui.marketing.mediaList.topics.lead}
+                  badge={ui.marketing.mediaList.topics.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.topics.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.topics.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="topics"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="medialist-contactStart-label"
+              data-testid="variant"
+              data-block="medialist"
+              data-variant="contactStart"
+            >
+              <Title as={3} size="base" weight="bold" id="medialist-contactStart-label" data-testid="variant-label">
+                {ui.blocks.variants.medialist.contactStart}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MediaList
+                  id="medialist-contactStart"
+                  title={ui.marketing.mediaList.contact.title}
+                  lead={ui.marketing.mediaList.contact.lead}
+                  badge={ui.marketing.mediaList.contact.badge}
+                  labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.contact.list }}
+                  actions={{ mode: "one", cta: ui.marketing.mediaList.contact.cta, href: "#/start" }}
+                  extras={MEDIALIST_EXTRAS}
+                  layout="contact"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.contactStart))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingNavigationPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingNavigationPage.tsx
new file mode 100644
index 0000000..9f15b56
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingNavigationPage.tsx
@@ -0,0 +1,494 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-navigation page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MegaMenu,
+  NavBar,
+  SiteHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+  type NavLink,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+const NAVBAR_ACTIONS = { cta: ui.site.header.cta, href: "#/", login: ui.site.header.login, loginHref: "#/login" } as const;
+
+export function MarketingNavigationPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingNavigation}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 14)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-header-title"
+            data-testid="catalog-block"
+            data-block="header"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-header-title">
+                {ui.blocks.names.header}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.header}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="header-inline-label"
+              data-testid="variant"
+              data-block="header"
+              data-variant="inline"
+            >
+              <Title as={3} size="base" weight="bold" id="header-inline-label" data-testid="variant-label">
+                {ui.blocks.variants.header.inline}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteHeader
+                  labels={ui.site.header}
+                  current="home"
+                  cta={ui.site.header.cta}
+                  layout="inline"
+                  position="static"
+                  actions="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.inline))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="header-stacked-label"
+              data-testid="variant"
+              data-block="header"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="header-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.header.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteHeader
+                  labels={ui.site.header}
+                  current="home"
+                  cta={ui.site.header.cta}
+                  layout="stacked"
+                  position="static"
+                  actions="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="header-sticky-label"
+              data-testid="variant"
+              data-block="header"
+              data-variant="sticky"
+            >
+              <Title as={3} size="base" weight="bold" id="header-sticky-label" data-testid="variant-label">
+                {ui.blocks.variants.header.sticky}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteHeader
+                  labels={ui.site.header}
+                  current="home"
+                  cta={ui.site.header.cta}
+                  layout="inline"
+                  position="sticky"
+                  actions="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.sticky))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="header-withCta-label"
+              data-testid="variant"
+              data-block="header"
+              data-variant="withCta"
+            >
+              <Title as={3} size="base" weight="bold" id="header-withCta-label" data-testid="variant-label">
+                {ui.blocks.variants.header.withCta}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SiteHeader
+                  labels={ui.site.header}
+                  current="home"
+                  cta={ui.site.header.cta}
+                  layout="inline"
+                  position="static"
+                  actions="cta"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.withCta))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-navbar-title"
+            data-testid="catalog-block"
+            data-block="navbar"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-navbar-title">
+                {ui.blocks.names.navbar}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.navbar}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-inline-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="inline"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-inline-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.inline}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="inline"
+                  over="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inline))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-split-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-split-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="split"
+                  over="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-search-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="search"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-search-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.search}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="search"
+                  over="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-media-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="media"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-media-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.media}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="inline"
+                  over="media"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-plain-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "none" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="inline"
+                  over="none"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.plain))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="navbar-inverse-label"
+              data-testid="variant"
+              data-block="navbar"
+              data-variant="inverse"
+            >
+              <Title as={3} size="base" weight="bold" id="navbar-inverse-label" data-testid="variant-label">
+                {ui.blocks.variants.navbar.inverse}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NavBar
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  links={navlinks}
+                  current="link-product"
+                  actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+                  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+                  layout="inline"
+                  over="none"
+                  tone="inverse"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inverse))}
+                  onTheme={() => actions.toggleTheme()}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-megamenu-title"
+            data-testid="catalog-block"
+            data-block="megamenu"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-megamenu-title">
+                {ui.blocks.names.megamenu}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.megamenu}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="megamenu-open-label"
+              data-testid="variant"
+              data-block="megamenu"
+              data-variant="open"
+            >
+              <Title as={3} size="base" weight="bold" id="megamenu-open-label" data-testid="variant-label">
+                {ui.blocks.variants.megamenu.open}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MegaMenu
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  trigger={ui.vibe.mega.trigger}
+                  links={navlinks}
+                  groups={megagroups}
+                  promoTitle={ui.vibe.mega.promoTitle}
+                  promoText={ui.vibe.mega.promoText}
+                  panel="open"
+                  cols="3"
+                  promo="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="megamenu-closed-label"
+              data-testid="variant"
+              data-block="megamenu"
+              data-variant="closed"
+            >
+              <Title as={3} size="base" weight="bold" id="megamenu-closed-label" data-testid="variant-label">
+                {ui.blocks.variants.megamenu.closed}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MegaMenu
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  trigger={ui.vibe.mega.trigger}
+                  links={navlinks}
+                  groups={megagroups}
+                  promoTitle={ui.vibe.mega.promoTitle}
+                  promoText={ui.vibe.mega.promoText}
+                  panel="closed"
+                  cols="3"
+                  promo="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.closed))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="megamenu-twoCols-label"
+              data-testid="variant"
+              data-block="megamenu"
+              data-variant="twoCols"
+            >
+              <Title as={3} size="base" weight="bold" id="megamenu-twoCols-label" data-testid="variant-label">
+                {ui.blocks.variants.megamenu.twoCols}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MegaMenu
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  trigger={ui.vibe.mega.trigger}
+                  links={navlinks}
+                  groups={megagroups}
+                  promoTitle={ui.vibe.mega.promoTitle}
+                  promoText={ui.vibe.mega.promoText}
+                  panel="open"
+                  cols="2"
+                  promo="none"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="megamenu-promo-label"
+              data-testid="variant"
+              data-block="megamenu"
+              data-variant="promo"
+            >
+              <Title as={3} size="base" weight="bold" id="megamenu-promo-label" data-testid="variant-label">
+                {ui.blocks.variants.megamenu.promo}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <MegaMenu
+                  label={ui.vibe.nav.label}
+                  brand={ui.site.header.brand}
+                  trigger={ui.vibe.mega.trigger}
+                  links={navlinks}
+                  groups={megagroups}
+                  promoTitle={ui.vibe.mega.promoTitle}
+                  promoText={ui.vibe.mega.promoText}
+                  panel="open"
+                  cols="3"
+                  promo="card"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.promo))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingPageHeadPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPageHeadPage.tsx
new file mode 100644
index 0000000..d39072c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPageHeadPage.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-page-head page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageIntro,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function MarketingPageHeadPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPageHead}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 3)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-pagehead-title"
+            data-testid="catalog-block"
+            data-block="pagehead"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-pagehead-title">
+                {ui.blocks.names.pagehead}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.pagehead}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagehead-start-label"
+              data-testid="variant"
+              data-block="pagehead"
+              data-variant="start"
+            >
+              <Title as={3} size="base" weight="bold" id="pagehead-start-label" data-testid="variant-label">
+                {ui.blocks.variants.pagehead.start}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageIntro
+                  id="pagehead-start"
+                  title={ui.vibe.pagehead.title}
+                  text={ui.vibe.pagehead.text}
+                  cta={ui.vibe.pagehead.cta}
+                  href="#/"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.start))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagehead-center-label"
+              data-testid="variant"
+              data-block="pagehead"
+              data-variant="center"
+            >
+              <Title as={3} size="base" weight="bold" id="pagehead-center-label" data-testid="variant-label">
+                {ui.blocks.variants.pagehead.center}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageIntro
+                  id="pagehead-center"
+                  title={ui.vibe.pagehead.title}
+                  text={ui.vibe.pagehead.text}
+                  cta={ui.vibe.pagehead.cta}
+                  href="#/"
+                  align="center"
+                  tone="default"
+                  density="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.center))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagehead-muted-label"
+              data-testid="variant"
+              data-block="pagehead"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="pagehead-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.pagehead.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageIntro
+                  id="pagehead-muted"
+                  title={ui.vibe.pagehead.title}
+                  text={ui.vibe.pagehead.text}
+                  cta={ui.vibe.pagehead.cta}
+                  href="#/"
+                  align="start"
+                  tone="muted"
+                  density="compact"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingPageTrailPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPageTrailPage.tsx
new file mode 100644
index 0000000..ca10513
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPageTrailPage.tsx
@@ -0,0 +1,200 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-page-trail page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageTrail,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+
+const PAGETRAIL_EXTRAS = {
+  value: ui.marketing.pageTrail.value,
+  caption: ui.marketing.pageTrail.caption,
+  note: ui.marketing.pageTrail.note,
+  icon: "package",
+  facts: stats,
+} as const;
+
+export function MarketingPageTrailPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPageTrail}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 4)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-pagetrail-title"
+            data-testid="catalog-block"
+            data-block="pagetrail"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-pagetrail-title">
+                {ui.blocks.names.pagetrail}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.pagetrail}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagetrail-crumbs-label"
+              data-testid="variant"
+              data-block="pagetrail"
+              data-variant="crumbs"
+            >
+              <Title as={3} size="base" weight="bold" id="pagetrail-crumbs-label" data-testid="variant-label">
+                {ui.blocks.variants.pagetrail.crumbs}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageTrail
+                  id="pagetrail-crumbs"
+                  title={ui.marketing.pageTrail.title}
+                  lead={ui.marketing.pageTrail.lead}
+                  badge={ui.marketing.pageTrail.badge}
+                  label={ui.marketing.pageTrail.label}
+                  crumbs={crumbs}
+                  extras={PAGETRAIL_EXTRAS}
+                  aside="none"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbs))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagetrail-crumbsFigure-label"
+              data-testid="variant"
+              data-block="pagetrail"
+              data-variant="crumbsFigure"
+            >
+              <Title as={3} size="base" weight="bold" id="pagetrail-crumbsFigure-label" data-testid="variant-label">
+                {ui.blocks.variants.pagetrail.crumbsFigure}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageTrail
+                  id="pagetrail-crumbsFigure"
+                  title={ui.marketing.pageTrail.title}
+                  lead={ui.marketing.pageTrail.lead}
+                  badge={ui.marketing.pageTrail.badge}
+                  label={ui.marketing.pageTrail.label}
+                  crumbs={crumbs}
+                  extras={PAGETRAIL_EXTRAS}
+                  aside="figure"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsFigure))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagetrail-crumbsNote-label"
+              data-testid="variant"
+              data-block="pagetrail"
+              data-variant="crumbsNote"
+            >
+              <Title as={3} size="base" weight="bold" id="pagetrail-crumbsNote-label" data-testid="variant-label">
+                {ui.blocks.variants.pagetrail.crumbsNote}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageTrail
+                  id="pagetrail-crumbsNote"
+                  title={ui.marketing.pageTrail.title}
+                  lead={ui.marketing.pageTrail.lead}
+                  badge={ui.marketing.pageTrail.badge}
+                  label={ui.marketing.pageTrail.label}
+                  crumbs={crumbs}
+                  extras={PAGETRAIL_EXTRAS}
+                  aside="note"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsNote))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pagetrail-keyFacts-label"
+              data-testid="variant"
+              data-block="pagetrail"
+              data-variant="keyFacts"
+            >
+              <Title as={3} size="base" weight="bold" id="pagetrail-keyFacts-label" data-testid="variant-label">
+                {ui.blocks.variants.pagetrail.keyFacts}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PageTrail
+                  id="pagetrail-keyFacts"
+                  title={ui.marketing.pageTrail.title}
+                  lead={ui.marketing.pageTrail.lead}
+                  badge={ui.marketing.pageTrail.badge}
+                  label={ui.marketing.pageTrail.label}
+                  crumbs={crumbs}
+                  extras={PAGETRAIL_EXTRAS}
+                  aside="facts"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.keyFacts))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingPortfolioPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPortfolioPage.tsx
new file mode 100644
index 0000000..9821028
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPortfolioPage.tsx
@@ -0,0 +1,241 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-portfolio page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProjectGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Project,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+
+export function MarketingPortfolioPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPortfolio}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-projects-title"
+            data-testid="catalog-block"
+            data-block="projects"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-projects-title">
+                {ui.blocks.names.projects}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.projects}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-cards-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-cards"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="cards"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-compact-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-compact"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="compact"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.compact))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-overlay-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="overlay"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-overlay-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.overlay}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-overlay"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="overlay"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.overlay))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-bento-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="bento"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-bento-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.bento}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-bento"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="bento"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.bento))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-list-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-list-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-list"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="list"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="projects-cardsMuted-label"
+              data-testid="variant"
+              data-block="projects"
+              data-variant="cardsMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="projects-cardsMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.projects.cardsMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProjectGrid
+                  id="projects-cardsMuted"
+                  title={ui.company.projects.title}
+                  lead={ui.company.projects.lead}
+                  projects={projects}
+                  empty={ui.empty.projects}
+                  labels={ui.company.projects}
+                  layout="cards"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cardsMuted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingPricingPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPricingPage.tsx
new file mode 100644
index 0000000..6d91da1
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPricingPage.tsx
@@ -0,0 +1,472 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-pricing page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PricingCard,
+  PricingTiers,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Plan,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const DUO_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+
+export function MarketingPricingPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPricing}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 13)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-pricing-title"
+            data-testid="catalog-block"
+            data-block="pricing"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-pricing-title">
+                {ui.blocks.names.pricing}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.pricing}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-grid-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.grid}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-grid"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-monthly-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="monthly"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-monthly-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.monthly}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-monthly"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="monthly"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-annual-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="annual"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-annual-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.annual}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-annual"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="annual"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-duo-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="duo"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-duo-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.duo}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-duo"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={duo}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-2"
+                  emphasis="off"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-grid2-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.grid2}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-grid2"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-2"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-grid4-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="grid4"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-grid4-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.grid4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-grid4"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-4"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-stack-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="stack"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-stack-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.stack}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-stack"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="stack"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-flat-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="flat"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-flat-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.flat}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-flat"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="off"
+                  billing="off"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.flat))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-compactMuted-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="compactMuted"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-compactMuted-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.compactMuted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-compactMuted"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="off"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.compactMuted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="pricing-roomy-label"
+              data-testid="variant"
+              data-block="pricing"
+              data-variant="roomy"
+            >
+              <Title as={3} size="base" weight="bold" id="pricing-roomy-label" data-testid="variant-label">
+                {ui.blocks.variants.pricing.roomy}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <PricingTiers
+                  id="pricing-roomy"
+                  title={ui.site.pricing.tiersTitle}
+                  plans={tiers}
+                  labels={ui.pricing}
+                  billingLabels={ui.vibe.billing}
+                  layout="grid"
+                  cols="1-3"
+                  emphasis="auto"
+                  billing="off"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.roomy))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-plan-title"
+            data-testid="catalog-block"
+            data-block="plan"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-plan-title">
+                {ui.blocks.names.plan}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.plan}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="plan-standard-label"
+              data-testid="variant"
+              data-block="plan"
+              data-variant="standard"
+            >
+              <Title as={3} size="base" weight="bold" id="plan-standard-label" data-testid="variant-label">
+                {ui.blocks.variants.plan.standard}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <PricingCard
+                    plan={tiers.find((i) => i.id === "tier-team")!}
+                    labels={ui.pricing}
+                    emphasis="auto"
+                    density="default"
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="plan-flat-label"
+              data-testid="variant"
+              data-block="plan"
+              data-variant="flat"
+            >
+              <Title as={3} size="base" weight="bold" id="plan-flat-label" data-testid="variant-label">
+                {ui.blocks.variants.plan.flat}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <PricingCard
+                    plan={tiers.find((i) => i.id === "tier-team")!}
+                    labels={ui.pricing}
+                    emphasis="off"
+                    density="default"
+                  />
+                </Box>
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="plan-compact-label"
+              data-testid="variant"
+              data-block="plan"
+              data-variant="compact"
+            >
+              <Title as={3} size="base" weight="bold" id="plan-compact-label" data-testid="variant-label">
+                {ui.blocks.variants.plan.compact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                  <PricingCard
+                    plan={tiers.find((i) => i.id === "tier-team")!}
+                    labels={ui.pricing}
+                    emphasis="auto"
+                    density="compact"
+                  />
+                </Box>
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingPricingToolsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPricingToolsPage.tsx
new file mode 100644
index 0000000..1ace192
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingPricingToolsPage.tsx
@@ -0,0 +1,455 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-pricing-tools page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  ComparisonTable,
+  Container,
+  CreditPacks,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  UsageCalculator,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+  type Pack,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const CREDITS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "credits": "metadata.credits.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "badge": "metadata.badge.value",
+} as const;
+
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+
+const USAGE_SLIDER = { min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit } as const;
+const USAGE_PRICE = { rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate } as const;
+
+export function MarketingPricingToolsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingPricingTools}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-compare-title"
+            data-testid="catalog-block"
+            data-block="compare"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-compare-title">
+                {ui.blocks.names.compare}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.compare}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="compare-plans-label"
+              data-testid="variant"
+              data-block="compare"
+              data-variant="plans"
+            >
+              <Title as={3} size="base" weight="bold" id="compare-plans-label" data-testid="variant-label">
+                {ui.blocks.variants.compare.plans}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ComparisonTable
+                  id="compare-plans"
+                  title={ui.vibe.compare.title}
+                  rows={compare}
+                  empty={ui.empty.rows}
+                  labels={ui.vibe.compare.labels}
+                  highlight="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="compare-highlight-label"
+              data-testid="variant"
+              data-block="compare"
+              data-variant="highlight"
+            >
+              <Title as={3} size="base" weight="bold" id="compare-highlight-label" data-testid="variant-label">
+                {ui.blocks.variants.compare.highlight}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ComparisonTable
+                  id="compare-highlight"
+                  title={ui.vibe.compare.title}
+                  rows={compare}
+                  empty={ui.empty.rows}
+                  labels={ui.vibe.compare.labels}
+                  highlight="middle"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="compare-rivals-label"
+              data-testid="variant"
+              data-block="compare"
+              data-variant="rivals"
+            >
+              <Title as={3} size="base" weight="bold" id="compare-rivals-label" data-testid="variant-label">
+                {ui.blocks.variants.compare.rivals}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ComparisonTable
+                  id="compare-rivals"
+                  title={ui.vibe.rivals.title}
+                  rows={rivals}
+                  empty={ui.empty.rows}
+                  labels={ui.vibe.rivals.labels}
+                  highlight="middle"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="compare-muted-label"
+              data-testid="variant"
+              data-block="compare"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="compare-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.compare.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ComparisonTable
+                  id="compare-muted"
+                  title={ui.vibe.compare.title}
+                  rows={compare}
+                  empty={ui.empty.rows}
+                  labels={ui.vibe.compare.labels}
+                  highlight="none"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-credits-title"
+            data-testid="catalog-block"
+            data-block="credits"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-credits-title">
+                {ui.blocks.names.credits}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.credits}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="credits-tiles4-label"
+              data-testid="variant"
+              data-block="credits"
+              data-variant="tiles4"
+            >
+              <Title as={3} size="base" weight="bold" id="credits-tiles4-label" data-testid="variant-label">
+                {ui.blocks.variants.credits.tiles4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CreditPacks
+                  id="credits-tiles4"
+                  title={ui.vibe.credits.title}
+                  packs={credits}
+                  empty={ui.empty.packs}
+                  badges={ui.vibe.credits.badges}
+                  buy={ui.vibe.credits.buy}
+                  cols="4"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="credits-tiles2-label"
+              data-testid="variant"
+              data-block="credits"
+              data-variant="tiles2"
+            >
+              <Title as={3} size="base" weight="bold" id="credits-tiles2-label" data-testid="variant-label">
+                {ui.blocks.variants.credits.tiles2}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CreditPacks
+                  id="credits-tiles2"
+                  title={ui.vibe.credits.title}
+                  packs={credits}
+                  empty={ui.empty.packs}
+                  badges={ui.vibe.credits.badges}
+                  buy={ui.vibe.credits.buy}
+                  cols="2"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="credits-rows-label"
+              data-testid="variant"
+              data-block="credits"
+              data-variant="rows"
+            >
+              <Title as={3} size="base" weight="bold" id="credits-rows-label" data-testid="variant-label">
+                {ui.blocks.variants.credits.rows}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CreditPacks
+                  id="credits-rows"
+                  title={ui.vibe.credits.title}
+                  packs={credits}
+                  empty={ui.empty.packs}
+                  badges={ui.vibe.credits.badges}
+                  buy={ui.vibe.credits.buy}
+                  cols="4"
+                  item="row"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="credits-muted-label"
+              data-testid="variant"
+              data-block="credits"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="credits-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.credits.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CreditPacks
+                  id="credits-muted"
+                  title={ui.vibe.credits.title}
+                  packs={credits}
+                  empty={ui.empty.packs}
+                  badges={ui.vibe.credits.badges}
+                  buy={ui.vibe.credits.buy}
+                  cols="4"
+                  item="tile"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-usage-title"
+            data-testid="catalog-block"
+            data-block="usage"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-usage-title">
+                {ui.blocks.names.usage}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.usage}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usage-card-label"
+              data-testid="variant"
+              data-block="usage"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="usage-card-label" data-testid="variant-label">
+                {ui.blocks.variants.usage.card}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UsageCalculator
+                  id="usage-card"
+                  title={ui.vibe.usage.title}
+                  text={ui.vibe.usage.text}
+                  usage={5000}
+                  slider={USAGE_SLIDER}
+                  price={USAGE_PRICE}
+                  cta={ui.vibe.usage.cta}
+                  href="#/"
+                  layout="card"
+                  ends="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usage-plain-label"
+              data-testid="variant"
+              data-block="usage"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="usage-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.usage.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UsageCalculator
+                  id="usage-plain"
+                  title={ui.vibe.usage.title}
+                  text={ui.vibe.usage.text}
+                  usage={5000}
+                  slider={USAGE_SLIDER}
+                  price={USAGE_PRICE}
+                  cta={ui.vibe.usage.cta}
+                  href="#/"
+                  layout="plain"
+                  ends="show"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usage-noEnds-label"
+              data-testid="variant"
+              data-block="usage"
+              data-variant="noEnds"
+            >
+              <Title as={3} size="base" weight="bold" id="usage-noEnds-label" data-testid="variant-label">
+                {ui.blocks.variants.usage.noEnds}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UsageCalculator
+                  id="usage-noEnds"
+                  title={ui.vibe.usage.title}
+                  text={ui.vibe.usage.text}
+                  usage={5000}
+                  slider={USAGE_SLIDER}
+                  price={USAGE_PRICE}
+                  cta={ui.vibe.usage.cta}
+                  href="#/"
+                  layout="card"
+                  ends="hide"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.noEnds))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="usage-muted-label"
+              data-testid="variant"
+              data-block="usage"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="usage-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.usage.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <UsageCalculator
+                  id="usage-muted"
+                  title={ui.vibe.usage.title}
+                  text={ui.vibe.usage.text}
+                  usage={5000}
+                  slider={USAGE_SLIDER}
+                  price={USAGE_PRICE}
+                  cta={ui.vibe.usage.cta}
+                  href="#/"
+                  layout="card"
+                  ends="show"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingProofPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingProofPage.tsx
new file mode 100644
index 0000000..c1993af
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingProofPage.tsx
@@ -0,0 +1,512 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-proof page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  LogoCloud,
+  ProofBand,
+  Stack,
+  Text,
+  Title,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+export function MarketingProofPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingProof}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 3, 14)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-logos-title"
+            data-testid="catalog-block"
+            data-block="logos"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-logos-title">
+                {ui.blocks.names.logos}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.logos}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-grid4-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="grid4"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-grid4-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.grid4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-grid4"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="4"
+                  item="name"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-grid3-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.grid3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-grid3"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="3"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-row-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="row"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-row-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.row}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-row"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="row"
+                  cols="4"
+                  item="icon"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-icons-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.icons}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-icons"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="4"
+                  item="icon"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-grid2-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.grid2}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-grid2"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="2"
+                  item="name"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="logos-tiles4-label"
+              data-testid="variant"
+              data-block="logos"
+              data-variant="tiles4"
+            >
+              <Title as={3} size="base" weight="bold" id="logos-tiles4-label" data-testid="variant-label">
+                {ui.blocks.variants.logos.tiles4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <LogoCloud
+                  id="logos-tiles4"
+                  title={ui.marketing.logos.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  layout="grid"
+                  cols="4"
+                  item="tile"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-proof-title"
+            data-testid="catalog-block"
+            data-block="proof"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-proof-title">
+                {ui.blocks.names.proof}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.proof}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="proof-above-label"
+              data-testid="variant"
+              data-block="proof"
+              data-variant="above"
+            >
+              <Title as={3} size="base" weight="bold" id="proof-above-label" data-testid="variant-label">
+                {ui.blocks.variants.proof.above}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProofBand
+                  id="proof-above"
+                  title={ui.vibe.proof.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  stats={stats}
+                  layout="above"
+                  logoStyle="name"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="proof-beside-label"
+              data-testid="variant"
+              data-block="proof"
+              data-variant="beside"
+            >
+              <Title as={3} size="base" weight="bold" id="proof-beside-label" data-testid="variant-label">
+                {ui.blocks.variants.proof.beside}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProofBand
+                  id="proof-beside"
+                  title={ui.vibe.proof.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  stats={stats}
+                  layout="beside"
+                  logoStyle="name"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.beside))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="proof-icons-label"
+              data-testid="variant"
+              data-block="proof"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="proof-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.proof.icons}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProofBand
+                  id="proof-icons"
+                  title={ui.vibe.proof.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  stats={stats}
+                  layout="above"
+                  logoStyle="icon"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="proof-muted-label"
+              data-testid="variant"
+              data-block="proof"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="proof-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.proof.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ProofBand
+                  id="proof-muted"
+                  title={ui.vibe.proof.title}
+                  logos={logos}
+                  empty={ui.empty.logos}
+                  stats={stats}
+                  layout="above"
+                  logoStyle="name"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-videos-title"
+            data-testid="catalog-block"
+            data-block="videos"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-videos-title">
+                {ui.blocks.names.videos}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.videos}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videos-grid3-label"
+              data-testid="variant"
+              data-block="videos"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="videos-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.videos.grid3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoGrid
+                  id="videos-grid3"
+                  title={ui.vibe.videos.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  playLabel={ui.vibe.videos.play}
+                  byLine={ui.testimonials.byLine}
+                  cols="1-3"
+                  caption="below"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videos-grid2-label"
+              data-testid="variant"
+              data-block="videos"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="videos-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.videos.grid2}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoGrid
+                  id="videos-grid2"
+                  title={ui.vibe.videos.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  playLabel={ui.vibe.videos.play}
+                  byLine={ui.testimonials.byLine}
+                  cols="1-2"
+                  caption="below"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videos-overlay-label"
+              data-testid="variant"
+              data-block="videos"
+              data-variant="overlay"
+            >
+              <Title as={3} size="base" weight="bold" id="videos-overlay-label" data-testid="variant-label">
+                {ui.blocks.variants.videos.overlay}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoGrid
+                  id="videos-overlay"
+                  title={ui.vibe.videos.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  playLabel={ui.vibe.videos.play}
+                  byLine={ui.testimonials.byLine}
+                  cols="1-3"
+                  caption="overlay"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="videos-muted-label"
+              data-testid="variant"
+              data-block="videos"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="videos-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.videos.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <VideoGrid
+                  id="videos-muted"
+                  title={ui.vibe.videos.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  playLabel={ui.vibe.videos.play}
+                  byLine={ui.testimonials.byLine}
+                  cols="1-3"
+                  caption="below"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingShowcasesPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingShowcasesPage.tsx
new file mode 100644
index 0000000..995c927
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingShowcasesPage.tsx
@@ -0,0 +1,525 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-showcases page of CatalogScreen.
+
+import {
+  BentoGrid,
+  Block,
+  Box,
+  Container,
+  FeatureAccordion,
+  FeatureSticky,
+  FeatureTabs,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Tile,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+
+export function MarketingShowcasesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingShowcases}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 4, 15)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-bento-title"
+            data-testid="catalog-block"
+            data-block="bento"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-bento-title">
+                {ui.blocks.names.bento}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.bento}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bento-bento-label"
+              data-testid="variant"
+              data-block="bento"
+              data-variant="bento"
+            >
+              <Title as={3} size="base" weight="bold" id="bento-bento-label" data-testid="variant-label">
+                {ui.blocks.variants.bento.bento}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BentoGrid
+                  id="bento-bento"
+                  title={ui.vibe.bento.title}
+                  tiles={bento}
+                  empty={ui.empty.tiles}
+                  layout="bento"
+                  media="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bento-even-label"
+              data-testid="variant"
+              data-block="bento"
+              data-variant="even"
+            >
+              <Title as={3} size="base" weight="bold" id="bento-even-label" data-testid="variant-label">
+                {ui.blocks.variants.bento.even}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BentoGrid
+                  id="bento-even"
+                  title={ui.vibe.bento.title}
+                  tiles={bento}
+                  empty={ui.empty.tiles}
+                  layout="even"
+                  media="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.even))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bento-images-label"
+              data-testid="variant"
+              data-block="bento"
+              data-variant="images"
+            >
+              <Title as={3} size="base" weight="bold" id="bento-images-label" data-testid="variant-label">
+                {ui.blocks.variants.bento.images}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BentoGrid
+                  id="bento-images"
+                  title={ui.vibe.bento.title}
+                  tiles={bento}
+                  empty={ui.empty.tiles}
+                  layout="bento"
+                  media="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="bento-muted-label"
+              data-testid="variant"
+              data-block="bento"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="bento-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.bento.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <BentoGrid
+                  id="bento-muted"
+                  title={ui.vibe.bento.title}
+                  tiles={bento}
+                  empty={ui.empty.tiles}
+                  layout="bento"
+                  media="none"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-featuretabs-title"
+            data-testid="catalog-block"
+            data-block="featuretabs"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-featuretabs-title">
+                {ui.blocks.names.featuretabs}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.featuretabs}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuretabs-split-label"
+              data-testid="variant"
+              data-block="featuretabs"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="featuretabs-split-label" data-testid="variant-label">
+                {ui.blocks.variants.featuretabs.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureTabs
+                  id="featuretabs-split"
+                  title={ui.vibe.tabs.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  tabsLabel={ui.vibe.tabs.label}
+                  active="feature-clear"
+                  panel="split"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuretabs-stack-label"
+              data-testid="variant"
+              data-block="featuretabs"
+              data-variant="stack"
+            >
+              <Title as={3} size="base" weight="bold" id="featuretabs-stack-label" data-testid="variant-label">
+                {ui.blocks.variants.featuretabs.stack}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureTabs
+                  id="featuretabs-stack"
+                  title={ui.vibe.tabs.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  tabsLabel={ui.vibe.tabs.label}
+                  active="feature-clear"
+                  panel="stack"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.stack))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="featuretabs-muted-label"
+              data-testid="variant"
+              data-block="featuretabs"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="featuretabs-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.featuretabs.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureTabs
+                  id="featuretabs-muted"
+                  title={ui.vibe.tabs.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  tabsLabel={ui.vibe.tabs.label}
+                  active="feature-clear"
+                  panel="split"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-accordion-title"
+            data-testid="catalog-block"
+            data-block="accordion"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-accordion-title">
+                {ui.blocks.names.accordion}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.accordion}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="accordion-first-label"
+              data-testid="variant"
+              data-block="accordion"
+              data-variant="first"
+            >
+              <Title as={3} size="base" weight="bold" id="accordion-first-label" data-testid="variant-label">
+                {ui.blocks.variants.accordion.first}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureAccordion
+                  id="accordion-first"
+                  title={ui.vibe.accordion.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  expand="first"
+                  media="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="accordion-closed-label"
+              data-testid="variant"
+              data-block="accordion"
+              data-variant="closed"
+            >
+              <Title as={3} size="base" weight="bold" id="accordion-closed-label" data-testid="variant-label">
+                {ui.blocks.variants.accordion.closed}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureAccordion
+                  id="accordion-closed"
+                  title={ui.vibe.accordion.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  expand="none"
+                  media="none"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.closed))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="accordion-media-label"
+              data-testid="variant"
+              data-block="accordion"
+              data-variant="media"
+            >
+              <Title as={3} size="base" weight="bold" id="accordion-media-label" data-testid="variant-label">
+                {ui.blocks.variants.accordion.media}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureAccordion
+                  id="accordion-media"
+                  title={ui.vibe.accordion.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  expand="first"
+                  media="image"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="accordion-muted-label"
+              data-testid="variant"
+              data-block="accordion"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="accordion-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.accordion.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureAccordion
+                  id="accordion-muted"
+                  title={ui.vibe.accordion.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  expand="first"
+                  media="none"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-sticky-title"
+            data-testid="catalog-block"
+            data-block="sticky"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-sticky-title">
+                {ui.blocks.names.sticky}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.sticky}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sticky-end-label"
+              data-testid="variant"
+              data-block="sticky"
+              data-variant="end"
+            >
+              <Title as={3} size="base" weight="bold" id="sticky-end-label" data-testid="variant-label">
+                {ui.blocks.variants.sticky.end}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSticky
+                  id="sticky-end"
+                  title={ui.vibe.sticky.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  active="feature-clear"
+                  mediaSide="end"
+                  item="plain"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sticky-start-label"
+              data-testid="variant"
+              data-block="sticky"
+              data-variant="start"
+            >
+              <Title as={3} size="base" weight="bold" id="sticky-start-label" data-testid="variant-label">
+                {ui.blocks.variants.sticky.start}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSticky
+                  id="sticky-start"
+                  title={ui.vibe.sticky.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  active="feature-clear"
+                  mediaSide="start"
+                  item="plain"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.start))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sticky-card-label"
+              data-testid="variant"
+              data-block="sticky"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="sticky-card-label" data-testid="variant-label">
+                {ui.blocks.variants.sticky.card}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSticky
+                  id="sticky-card"
+                  title={ui.vibe.sticky.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  active="feature-clear"
+                  mediaSide="end"
+                  item="card"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="sticky-muted-label"
+              data-testid="variant"
+              data-block="sticky"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="sticky-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.sticky.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <FeatureSticky
+                  id="sticky-muted"
+                  title={ui.vibe.sticky.title}
+                  features={features}
+                  empty={ui.empty.features}
+                  active="feature-clear"
+                  mediaSide="end"
+                  item="plain"
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingStatsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingStatsPage.tsx
new file mode 100644
index 0000000..1acdc43
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingStatsPage.tsx
@@ -0,0 +1,308 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-stats page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StatsBand,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+
+export function MarketingStatsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingStats}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 8)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-stats-title"
+            data-testid="catalog-block"
+            data-block="stats"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-stats-title">
+                {ui.blocks.names.stats}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.stats}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-plain4-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="plain4"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-plain4-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.plain4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-plain4"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="none"
+                  item="plain"
+                  align="center"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.plain4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-panel-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="panel"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-panel-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.panel}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-panel"
+                  title=""
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="panel"
+                  item="plain"
+                  align="center"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.panel))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-stack-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="stack"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-stack-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.stack}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-stack"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="stack"
+                  surface="none"
+                  item="plain"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.stack))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-image-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="image"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-image-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.image}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-image"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="image"
+                  item="plain"
+                  align="center"
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.image))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-cards-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="cards"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-cards-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.cards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-cards"
+                  title={ui.marketing.stats.title}
+                  stats={[stats?.[0], stats?.[1], stats?.[2]]}
+                  empty={ui.marketing.stats.empty}
+                  cols="3"
+                  layout="row"
+                  surface="none"
+                  item="card"
+                  align="center"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-icons-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="icons"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-icons-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.icons}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-icons"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="none"
+                  item="icon"
+                  align="start"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-muted2-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="muted2"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-muted2-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.muted2}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-muted2"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="2"
+                  layout="row"
+                  surface="none"
+                  item="plain"
+                  align="center"
+                  tone="muted"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.muted2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="stats-cardsCompact-label"
+              data-testid="variant"
+              data-block="stats"
+              data-variant="cardsCompact"
+            >
+              <Title as={3} size="base" weight="bold" id="stats-cardsCompact-label" data-testid="variant-label">
+                {ui.blocks.variants.stats.cardsCompact}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <StatsBand
+                  id="stats-cardsCompact"
+                  title={ui.marketing.stats.title}
+                  stats={stats}
+                  empty={ui.marketing.stats.empty}
+                  cols="4"
+                  layout="row"
+                  surface="none"
+                  item="card"
+                  align="center"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cardsCompact))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingTeamPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingTeamPage.tsx
new file mode 100644
index 0000000..d9240fd
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingTeamPage.tsx
@@ -0,0 +1,246 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-team page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TeamGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Member,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+
+export function MarketingTeamPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingTeam}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-team-title"
+            data-testid="catalog-block"
+            data-block="team"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-team-title">
+                {ui.blocks.names.team}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.team}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-cards4-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="cards4"
+            >
+              <Title as={3} size="base" weight="bold" id="team-cards4-label" data-testid="variant-label">
+                {ui.blocks.variants.team.cards4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-cards4"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="cards"
+                  cols="1-4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-cards3-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="cards3"
+            >
+              <Title as={3} size="base" weight="bold" id="team-cards3-label" data-testid="variant-label">
+                {ui.blocks.variants.team.cards3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-cards3"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="cards"
+                  cols="1-3"
+                  tone="muted"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-minimal-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="minimal"
+            >
+              <Title as={3} size="base" weight="bold" id="team-minimal-label" data-testid="variant-label">
+                {ui.blocks.variants.team.minimal}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-minimal"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="minimal"
+                  cols="1-4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.minimal))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-detailed-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="detailed"
+            >
+              <Title as={3} size="base" weight="bold" id="team-detailed-label" data-testid="variant-label">
+                {ui.blocks.variants.team.detailed}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-detailed"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="detailed"
+                  cols="1-3"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.detailed))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-list-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="team-list-label" data-testid="variant-label">
+                {ui.blocks.variants.team.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-list"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="list"
+                  cols="1-4"
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="team-directory-label"
+              data-testid="variant"
+              data-block="team"
+              data-variant="directory"
+            >
+              <Title as={3} size="base" weight="bold" id="team-directory-label" data-testid="variant-label">
+                {ui.blocks.variants.team.directory}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TeamGrid
+                  id="team-directory"
+                  title={ui.company.team.title}
+                  lead={ui.company.team.lead}
+                  members={members}
+                  empty={ui.empty.members}
+                  depts={ui.company.depts}
+                  layout="directory"
+                  cols="1-4"
+                  tone="default"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.directory))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingTestimonialsPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingTestimonialsPage.tsx
new file mode 100644
index 0000000..9a30882
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingTestimonialsPage.tsx
@@ -0,0 +1,362 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-testimonials page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TestimonialGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Quote,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+const TESTIMONIALS_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+
+export function MarketingTestimonialsPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingTestimonials}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-testimonials-title"
+            data-testid="catalog-block"
+            data-block="testimonials"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-testimonials-title">
+                {ui.blocks.names.testimonials}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.testimonials}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-grid3-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="grid3"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-grid3-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.grid3}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-grid3"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="grid"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-masonry-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="masonry"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-masonry-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.masonry}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-masonry"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="masonry"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-strip-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="strip"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-strip-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.strip}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-strip"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="strip"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-social-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="social"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-social-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.social}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-social"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="masonry"
+                  cols="1-3"
+                  item={{ kind: "social", avatar: "image", rating: "hide", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.social))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-featured-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="featured"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-featured-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.featured}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-featured"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="single"
+                  cols="1-3"
+                  item={{ kind: "plain", avatar: "image", rating: "hide", mark: "icon" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-grid2-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="grid2"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-grid2-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.grid2}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-grid2"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="grid"
+                  cols="1-2"
+                  item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid2))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-single-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="single"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-single-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.single}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-single"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="single"
+                  cols="1-3"
+                  item={{ kind: "plain", avatar: "image", rating: "hide", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-stack-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="stack"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-stack-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.stack}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-stack"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="stack"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+                  tone="default"
+                  density="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.stack))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-plain-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-plain"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="grid"
+                  cols="1-3"
+                  item={{ kind: "plain", avatar: "none", rating: "show", mark: "none" }}
+                  tone="muted"
+                  density="compact"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.plain))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="testimonials-noRating-label"
+              data-testid="variant"
+              data-block="testimonials"
+              data-variant="noRating"
+            >
+              <Title as={3} size="base" weight="bold" id="testimonials-noRating-label" data-testid="variant-label">
+                {ui.blocks.variants.testimonials.noRating}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <TestimonialGrid
+                  id="testimonials-noRating"
+                  title={ui.marketing.testimonials.title}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={TESTIMONIALS_LABELS}
+                  layout="grid"
+                  cols="1-3"
+                  item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+                  tone="default"
+                  density="roomy"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.noRating))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.tsx
new file mode 100644
index 0000000..79484af
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.tsx
@@ -0,0 +1,284 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The marketing-testimonials-split page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  QuoteSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+const QUOTESPLIT_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+const QUOTESPLIT_EXTRAS = { stats, logos, rating: 5, score: ui.marketing.quoteSplit.score, reviews: ui.marketing.quoteSplit.reviews } as const;
+const QUOTESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.quoteSplit.cta,
+  href: "#/customers",
+  secondary: ui.marketing.quoteSplit.secondary,
+  secondaryHref: "#/contact",
+} as const;
+
+export function MarketingTestimonialsSplitPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.marketing.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.marketingTestimonialsSplit}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 6)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-quotesplit-title"
+            data-testid="catalog-block"
+            data-block="quotesplit"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-quotesplit-title">
+                {ui.blocks.names.quotesplit}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.quotesplit}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-quoteCard-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="quoteCard"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-quoteCard-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.quoteCard}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-quoteCard"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="media"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.quoteCard))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-logoTiles-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="logoTiles"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-logoTiles-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.logoTiles}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-logoTiles"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="logos"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.logoTiles))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-ratingPanel-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="ratingPanel"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-ratingPanel-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.ratingPanel}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-ratingPanel"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="rating"
+                  mediaSide="end"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-stackedCards-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="stackedCards"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-stackedCards-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.stackedCards}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-stackedCards"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="stack"
+                  mediaSide="start"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.stackedCards))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-compact4-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="compact4"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-compact4-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.compact4}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-compact4"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="compact"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.compact4))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="quotesplit-bentoFigures-label"
+              data-testid="variant"
+              data-block="quotesplit"
+              data-variant="bentoFigures"
+            >
+              <Title as={3} size="base" weight="bold" id="quotesplit-bentoFigures-label" data-testid="variant-label">
+                {ui.blocks.variants.quotesplit.bentoFigures}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <QuoteSplit
+                  id="quotesplit-bentoFigures"
+                  title={ui.marketing.quoteSplit.title}
+                  lead={ui.marketing.quoteSplit.lead}
+                  badge={ui.marketing.quoteSplit.badge}
+                  quotes={testimonials}
+                  empty={ui.empty.quotes}
+                  labels={QUOTESPLIT_LABELS}
+                  extras={QUOTESPLIT_EXTRAS}
+                  actions={QUOTESPLIT_ACTIONS}
+                  layout="bento"
+                  mediaSide="end"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.bentoFigures))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/NotfoundPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/NotfoundPage.tsx
new file mode 100644
index 0000000..7c45a0b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/NotfoundPage.tsx
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The notfound page of CatalogScreen.
+
+import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NotfoundPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Title as={1} size="4xl" weight="bold" id="page-title">
+            {ui.site.notFound.title}
+          </Title>
+          <Group>
+            <Button variant="default" size="default" href="#/">
+              {ui.catalog.back}
+            </Button>
+          </Group>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageCartPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageCartPage.tsx
new file mode 100644
index 0000000..4628b23
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageCartPage.tsx
@@ -0,0 +1,166 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-cart page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Link,
+  NavBar,
+  PageIntro,
+  ProductGrid,
+  ShoppingCart,
+  SitemapFooter,
+  Text,
+  type CartLine,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageCartPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.cart.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="cart">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <PageIntro
+          id="cart-pagehead"
+          title={ui.commerce.cartPage.title}
+          text={ui.commerce.pages.cartLead}
+          cta=""
+          href="#/"
+          align="start"
+          tone="default"
+          density="default"
+        />
+        <ShoppingCart
+          id="cart-cartpage"
+          title={ui.commerce.cart.caption}
+          lines={cart}
+          rows={summary}
+          promos={promos}
+          labels={ui.commerce.cart}
+          totals={ui.commerce.totals}
+          actions={ui.commerce.cartPage}
+          layout="split"
+          promo="show"
+          progress="show"
+          tone="default"
+        />
+        <ProductGrid
+          id="cart-products"
+          title={ui.commerce.pages.related}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="rail"
+          cols="1-3"
+          ratio="1/1"
+          rating="hide"
+          action="button"
+          tone="default"
+          density="compact"
+        />
+        <SitemapFooter
+          id="cart-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageCheckoutPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageCheckoutPage.tsx
new file mode 100644
index 0000000..9efd40e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageCheckoutPage.tsx
@@ -0,0 +1,141 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-checkout page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CheckoutForm,
+  Container,
+  Link,
+  NavBar,
+  PageIntro,
+  SitemapFooter,
+  Text,
+  type CartLine,
+  type Day,
+  type MegaGroup,
+  type NavLink,
+  type Payment,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageCheckoutPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.checkout.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="checkout">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <PageIntro
+          id="checkout-pagehead"
+          title={ui.commerce.checkout.title}
+          text={ui.commerce.pages.checkoutLead}
+          cta=""
+          href="#/"
+          align="start"
+          tone="default"
+          density="default"
+        />
+        <CheckoutForm
+          id="checkout-checkout"
+          title=""
+          days={days}
+          payments={payments}
+          lines={cart}
+          rows={summary}
+          promos={promos}
+          labels={ui.commerce.checkout}
+          totals={ui.commerce.totals}
+          layout="cards"
+          summary="aside"
+          tone="default"
+        />
+        <SitemapFooter
+          id="checkout-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="compact"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageCompanyPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageCompanyPage.tsx
new file mode 100644
index 0000000..ff7c269
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageCompanyPage.tsx
@@ -0,0 +1,223 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-company page of CatalogScreen.
+
+import {
+  AboutCompany,
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  JobBoard,
+  Link,
+  MilestoneTimeline,
+  NavBar,
+  PageIntro,
+  PhotoGallery,
+  SitemapFooter,
+  TeamGrid,
+  Text,
+  type Department,
+  type Feature,
+  type Job,
+  type MegaGroup,
+  type Member,
+  type Milestone,
+  type NavLink,
+  type Photo,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageCompanyPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.company.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="company">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="inline"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <PageIntro
+          id="company-pagehead"
+          title={ui.company.pages.companyTitle}
+          text={ui.company.pages.companyLead}
+          cta=""
+          href="#/"
+          align="center"
+          tone="default"
+          density="default"
+        />
+        <AboutCompany
+          id="company-about"
+          title={ui.company.about.title}
+          lead={ui.company.about.lead}
+          stats={stats}
+          values={values}
+          layout="split"
+          tone="default"
+          density="default"
+        />
+        <MilestoneTimeline
+          id="company-timeline"
+          title={ui.company.timeline.title}
+          lead={ui.company.timeline.lead}
+          milestones={milestones}
+          empty={ui.empty.milestones}
+          layout="split"
+          tone="default"
+          density="default"
+        />
+        <TeamGrid
+          id="company-team"
+          title={ui.company.team.title}
+          lead={ui.company.team.lead}
+          members={members}
+          empty={ui.empty.members}
+          depts={ui.company.depts}
+          layout="cards"
+          cols="1-4"
+          tone="default"
+          density="default"
+        />
+        <PhotoGallery
+          id="company-photos"
+          title={ui.company.photos.title}
+          lead={ui.company.photos.lead}
+          photos={photos}
+          empty={ui.empty.photos}
+          labels={ui.company.photos}
+          layout="mosaic"
+          captions="show"
+          tone="default"
+          density="default"
+        />
+        <JobBoard
+          id="company-jobs"
+          title={ui.company.jobs.title}
+          lead={ui.company.jobs.lead}
+          jobs={jobs}
+          empty={ui.empty.jobs}
+          departments={departments}
+          labels={ui.company.jobs}
+          layout="grouped"
+          salary="hide"
+          tone="default"
+        />
+        <CtaBand
+          id="company-cta"
+          title={ui.site.home.ctaTitle}
+          text={ui.site.home.ctaText}
+          actions={{
+            cta: ui.site.home.ctaButton,
+            href: "#/pricing",
+            secondary: ui.site.home.ctaSecondary,
+            secondaryHref: "#/",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "one",
+          }}
+          quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+          layout="card"
+          tone="muted"
+          proof="none"
+          density="default"
+        />
+        <SitemapFooter
+          id="company-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PagePortfolioPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PagePortfolioPage.tsx
new file mode 100644
index 0000000..16d6085
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PagePortfolioPage.tsx
@@ -0,0 +1,203 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-portfolio page of CatalogScreen.
+
+import {
+  AboutMe,
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  Link,
+  NavBar,
+  PhotoGallery,
+  ProjectGrid,
+  SitemapFooter,
+  TestimonialGrid,
+  Text,
+  type MegaGroup,
+  type NavLink,
+  type Photo,
+  type Project,
+  type Quote,
+  type Skill,
+  type Spec,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PagePortfolioPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.portfolio.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="portfolio">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="inline"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <AboutMe
+          id="portfolio-aboutme"
+          title={ui.company.aboutMe.title}
+          lead={ui.company.aboutMe.lead}
+          badge={ui.company.aboutMe.badge}
+          facts={profilefacts}
+          skills={skills}
+          labels={ui.company.aboutMe}
+          actions={{
+            mode: "two",
+            cta: ui.company.aboutMe.cta,
+            href: "#/work",
+            secondary: ui.company.aboutMe.more,
+            secondaryHref: "#/contact",
+          }}
+          layout="facts"
+          mediaSide="start"
+          tone="default"
+          level={1}
+        />
+        <ProjectGrid
+          id="portfolio-projects"
+          title={ui.company.projects.title}
+          lead={ui.company.projects.lead}
+          projects={projects}
+          empty={ui.empty.projects}
+          labels={ui.company.projects}
+          layout="cards"
+          tone="default"
+          density="default"
+        />
+        <PhotoGallery
+          id="portfolio-photos"
+          title={ui.company.photos.title}
+          lead={ui.company.photos.lead}
+          photos={photos}
+          empty={ui.empty.photos}
+          labels={ui.company.photos}
+          layout="masonry"
+          captions="show"
+          tone="default"
+          density="default"
+        />
+        <TestimonialGrid
+          id="portfolio-testimonials"
+          title={ui.marketing.testimonials.title}
+          quotes={testimonials}
+          empty={ui.empty.quotes}
+          labels={{
+            rating: ui.testimonials.rating,
+            byLine: ui.testimonials.byLine,
+            handleLine: ui.testimonials.handleLine,
+          }}
+          layout="grid"
+          cols="1-3"
+          item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+          tone="default"
+          density="default"
+        />
+        <CtaBand
+          id="portfolio-cta"
+          title={ui.site.home.ctaTitle}
+          text={ui.site.home.ctaText}
+          actions={{
+            cta: ui.site.home.ctaButton,
+            href: "#/pricing",
+            secondary: ui.site.home.ctaSecondary,
+            secondaryHref: "#/",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "one",
+          }}
+          quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+          layout="card"
+          tone="muted"
+          proof="none"
+          density="default"
+        />
+        <SitemapFooter
+          id="portfolio-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageProductDetailPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageProductDetailPage.tsx
new file mode 100644
index 0000000..e59d6be
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageProductDetailPage.tsx
@@ -0,0 +1,170 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-product-detail page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Link,
+  NavBar,
+  ProductDetail,
+  ProductGrid,
+  ProductInfo,
+  ReviewList,
+  SitemapFooter,
+  Text,
+  type Detail,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+  type Review,
+  type Spec,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageProductDetailPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.productDetail.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="product-detail">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <ProductDetail
+          id="product-detail-product"
+          product={products.find((i) => i.id === "product-lamp")!}
+          labels={ui.commerce.detail}
+          badges={ui.commerce.badges}
+          layout="split"
+          mediaSide="start"
+          thumbs="below"
+          buy="full"
+          tone="default"
+          density="default"
+        />
+        <ProductInfo
+          id="product-detail-productinfo"
+          title={ui.commerce.info.title}
+          details={details}
+          specs={specs}
+          labels={ui.commerce.info}
+          layout="split"
+          expand="first"
+          tone="default"
+        />
+        <ReviewList
+          id="product-detail-reviews"
+          title={ui.commerce.reviews.title}
+          reviews={reviews}
+          labels={ui.commerce.reviewLabels}
+          layout="grid"
+          item="card"
+          avatar="none"
+          tone="default"
+          density="default"
+        />
+        <ProductGrid
+          id="product-detail-products"
+          title={ui.commerce.pages.related}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="rail"
+          cols="1-3"
+          ratio="1/1"
+          rating="hide"
+          action="button"
+          tone="default"
+          density="compact"
+        />
+        <SitemapFooter
+          id="product-detail-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageSaasLandingPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageSaasLandingPage.tsx
new file mode 100644
index 0000000..d7db6a2
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageSaasLandingPage.tsx
@@ -0,0 +1,282 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-saas-landing page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  FeatureSticky,
+  HeroClassic,
+  Link,
+  LogoCloud,
+  NavBar,
+  PricingTiers,
+  SitemapFooter,
+  StatsBand,
+  TestimonialGrid,
+  Text,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Logo,
+  type MegaGroup,
+  type NavLink,
+  type Plan,
+  type Quote,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageSaasLandingPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.saasLanding.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="saas-landing">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="inline"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <HeroClassic
+          id="saas-landing-hero"
+          title={ui.cases.saas.hero.title}
+          text={ui.cases.saas.hero.text}
+          actions={{
+            cta: ui.cases.saas.hero.cta,
+            href: "#/pricing",
+            secondary: ui.cases.saas.hero.secondary,
+            secondaryHref: "#/pricing",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "two",
+          }}
+          media={{
+            codeTitle: ui.vibe.code.title,
+            prompt: ui.vibe.code.prompt,
+            lines: terminal,
+            kind: "image",
+            side: "end",
+          }}
+          layout="split"
+          scale="default"
+          tone="default"
+          density="roomy"
+          level={1}
+        />
+        <LogoCloud
+          id="saas-landing-logos"
+          title={ui.marketing.logos.title}
+          logos={logos}
+          empty={ui.empty.logos}
+          layout="row"
+          cols="4"
+          item="icon"
+          tone="default"
+          density="compact"
+        />
+        <FeatureGrid
+          id="saas-landing-features"
+          title={ui.site.home.featuresTitle}
+          features={features}
+          empty={ui.empty.features}
+          action={{ label: ui.site.home.featuresAction, href: "#/" }}
+          layout="grid"
+          cols="1-3"
+          item="card"
+          mediaSide="end"
+          tone="default"
+          density="default"
+        />
+        <FeatureSticky
+          id="saas-landing-sticky"
+          title={ui.vibe.sticky.title}
+          features={features}
+          empty={ui.empty.features}
+          active="feature-clear"
+          mediaSide="end"
+          item="plain"
+          tone="default"
+          density="default"
+        />
+        <StatsBand
+          id="saas-landing-stats"
+          title={ui.marketing.stats.title}
+          stats={stats}
+          empty={ui.marketing.stats.empty}
+          cols="4"
+          layout="row"
+          surface="none"
+          item="icon"
+          align="start"
+          tone="default"
+          density="default"
+        />
+        <TestimonialGrid
+          id="saas-landing-testimonials"
+          title={ui.marketing.testimonials.title}
+          quotes={testimonials}
+          empty={ui.empty.quotes}
+          labels={{
+            rating: ui.testimonials.rating,
+            byLine: ui.testimonials.byLine,
+            handleLine: ui.testimonials.handleLine,
+          }}
+          layout="grid"
+          cols="1-3"
+          item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+          tone="default"
+          density="default"
+        />
+        <PricingTiers
+          id="saas-landing-pricing"
+          title={ui.site.pricing.tiersTitle}
+          plans={tiers}
+          labels={ui.pricing}
+          billingLabels={ui.vibe.billing}
+          layout="grid"
+          cols="1-3"
+          emphasis="auto"
+          billing="off"
+          tone="default"
+          density="default"
+        />
+        <FaqList
+          id="saas-landing-faq"
+          title={ui.site.pricing.faqTitle}
+          items={faq}
+          empty={ui.vibe.faq.empty}
+          search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+          filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+          layout="accordion"
+          cols="1"
+          tone="default"
+          density="default"
+        />
+        <CtaBand
+          id="saas-landing-cta"
+          title={ui.site.home.ctaTitle}
+          text={ui.site.home.ctaText}
+          actions={{
+            cta: ui.site.home.ctaButton,
+            href: "#/pricing",
+            secondary: ui.site.home.ctaSecondary,
+            secondaryHref: "#/",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "one",
+          }}
+          quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+          layout="card"
+          tone="muted"
+          proof="none"
+          density="default"
+        />
+        <SitemapFooter
+          id="saas-landing-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellClassicPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellClassicPage.tsx
new file mode 100644
index 0000000..0cf31ae
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellClassicPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-classic page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellClassicPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellClassic.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-classic">
+        <DashboardShell
+          id="shell-classic-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="show"
+          sidebar="wide"
+          side="start"
+          footer="none"
+          content="grid"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.tsx
new file mode 100644
index 0000000..29deaa6
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-collapsed-end page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellCollapsedEndPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellCollapsedEnd.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-collapsed-end">
+        <DashboardShell
+          id="shell-collapsed-end-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="none"
+          search="show"
+          sidebar="collapsed"
+          side="end"
+          footer="full"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellCollapsedPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellCollapsedPage.tsx
new file mode 100644
index 0000000..fa4f43a
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellCollapsedPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-collapsed page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellCollapsedPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellCollapsed.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-collapsed">
+        <DashboardShell
+          id="shell-collapsed-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="show"
+          sidebar="collapsed"
+          side="start"
+          footer="none"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellEndPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellEndPage.tsx
new file mode 100644
index 0000000..e2043ee
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellEndPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-end page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellEndPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellEnd.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-end">
+        <DashboardShell
+          id="shell-end-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="show"
+          sidebar="wide"
+          side="end"
+          footer="full"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellInsetPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellInsetPage.tsx
new file mode 100644
index 0000000..342816f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellInsetPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-inset page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellInsetPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellInset.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-inset">
+        <DashboardShell
+          id="shell-inset-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="show"
+          sidebar="wide"
+          side="start"
+          footer="inset"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellRailEndPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellRailEndPage.tsx
new file mode 100644
index 0000000..11446f2
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellRailEndPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-rail-end page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellRailEndPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellRailEnd.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-rail-end">
+        <DashboardShell
+          id="shell-rail-end-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="hide"
+          sidebar="rail"
+          side="end"
+          footer="inset"
+          content="grid"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellRailFooterPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellRailFooterPage.tsx
new file mode 100644
index 0000000..29fe1b1
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellRailFooterPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-rail-footer page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellRailFooterPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellRailFooter.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-rail-footer">
+        <DashboardShell
+          id="shell-rail-footer-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="show"
+          sidebar="rail"
+          side="start"
+          footer="full"
+          content="grid"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellRailPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellRailPage.tsx
new file mode 100644
index 0000000..1c4b63c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellRailPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-rail page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellRailPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellRail.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-rail">
+        <DashboardShell
+          id="shell-rail-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="hide"
+          sidebar="rail"
+          side="start"
+          footer="none"
+          content="list"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellSideOnlyPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellSideOnlyPage.tsx
new file mode 100644
index 0000000..51e2dd1
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellSideOnlyPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-side-only page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellSideOnlyPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellSideOnly.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-side-only">
+        <DashboardShell
+          id="shell-side-only-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="none"
+          search="show"
+          sidebar="wide"
+          side="start"
+          footer="inset"
+          content="list"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellTopOnlyPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellTopOnlyPage.tsx
new file mode 100644
index 0000000..825ef39
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellTopOnlyPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-top-only page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellTopOnlyPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellTopOnly.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-top-only">
+        <DashboardShell
+          id="shell-top-only-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="show"
+          sidebar="none"
+          side="start"
+          footer="full"
+          content="grid"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.tsx
new file mode 100644
index 0000000..8d31550
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-two-level-full page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellTwoLevelFullPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellTwoLevelFull.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-two-level-full">
+        <DashboardShell
+          id="shell-two-level-full-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="full"
+          search="show"
+          sidebar="twolevel"
+          side="start"
+          footer="full"
+          content="split"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageShellTwoLevelPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageShellTwoLevelPage.tsx
new file mode 100644
index 0000000..2e68376
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageShellTwoLevelPage.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-shell-two-level page of CatalogScreen.
+
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function PageShellTwoLevelPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.shellTwoLevel.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="shell-two-level">
+        <DashboardShell
+          id="shell-two-level-dashshell"
+          title={ui.dashboard.shells.title}
+          nav={{
+            label: ui.dashboard.shells.label,
+            brand: ui.site.header.brand,
+            links: sidenav,
+            current: "item-orders",
+            subTitle: ui.dashboard.shells.subTitle,
+            sub: subnav,
+            subCurrent: "subitem-all",
+            search: ui.dashboard.shells.search,
+            shortcut: ui.dashboard.shells.shortcut,
+            expand: ui.dashboard.shells.expand,
+            userName: ui.dashboard.shells.userName,
+            copyright: ui.dashboard.shells.copyright,
+            footerLabel: ui.dashboard.shells.footerLabel,
+            footer: helplinks,
+          }}
+          topbar="inset"
+          search="hide"
+          sidebar="twolevel"
+          side="start"
+          footer="inset"
+          content="list"
+          frame="page"
+          level={1}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageStoreCatalogPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageStoreCatalogPage.tsx
new file mode 100644
index 0000000..ffe4bd8
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageStoreCatalogPage.tsx
@@ -0,0 +1,154 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-store-catalog page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  Link,
+  NavBar,
+  PageIntro,
+  ProductGrid,
+  SitemapFooter,
+  Text,
+  UspStrip,
+  type Category,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageStoreCatalogPage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.storeCatalog.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="store-catalog">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <PageIntro
+          id="store-catalog-pagehead"
+          title={ui.commerce.pages.catalogTitle}
+          text={ui.commerce.pages.catalogLead}
+          cta=""
+          href="#/"
+          align="start"
+          tone="default"
+          density="default"
+        />
+        <CategoryNav
+          label={ui.commerce.nav.label}
+          categories={categories}
+          current="category-all"
+          tools={ui.commerce.tools}
+          layout="toolbar"
+          count="show"
+          icon="hide"
+          density="default"
+        />
+        <ProductGrid
+          id="store-catalog-products"
+          title={ui.commerce.products.title}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="grid"
+          cols="1-4"
+          ratio="1/1"
+          rating="hide"
+          action="button"
+          tone="default"
+          density="compact"
+        />
+        <UspStrip
+          id="store-catalog-usp"
+          perks={perks}
+          empty={ui.empty.perks}
+          layout="bar"
+          tone="default"
+          density="compact"
+        />
+        <SitemapFooter
+          id="store-catalog-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageStoreHome2Page.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageStoreHome2Page.tsx
new file mode 100644
index 0000000..1751461
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageStoreHome2Page.tsx
@@ -0,0 +1,202 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-store-home-2 page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  DeliveryInfo,
+  Link,
+  NavBar,
+  ProductGrid,
+  SitemapFooter,
+  StoreHero,
+  StoreLocations,
+  Text,
+  UspStrip,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+  type Store,
+  type Zone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageStoreHome2Page() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.storeHome2.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="store-home-2">
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="inline"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <StoreHero
+          id="store-home-2-storehero"
+          title={ui.commerce.storeHero.title}
+          lead={ui.commerce.storeHero.lead}
+          badge={ui.commerce.storeHero.badge}
+          perks={perks}
+          card={ui.commerce.storeHero.card}
+          actions={{
+            mode: "two",
+            cta: ui.commerce.storeHero.cta,
+            href: "#/catalog",
+            secondary: ui.commerce.storeHero.secondary,
+            secondaryHref: "#/delivery",
+          }}
+          layout="backdrop"
+          mediaSide="end"
+          tone="default"
+          level={1}
+        />
+        <UspStrip
+          id="store-home-2-usp"
+          perks={perks}
+          empty={ui.empty.perks}
+          layout="strip"
+          tone="default"
+          density="default"
+        />
+        <ProductGrid
+          id="store-home-2-products"
+          title={ui.commerce.products.title}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="grid"
+          cols="1-3"
+          ratio="4/3"
+          rating="show"
+          action="button"
+          tone="default"
+          density="default"
+        />
+        <DeliveryInfo
+          id="store-home-2-delivery"
+          title={ui.commerce.delivery.title}
+          lead={ui.commerce.delivery.lead}
+          facts={deliveryfacts}
+          zones={zones}
+          labels={ui.commerce.delivery}
+          layout="full"
+          tone="default"
+          density="default"
+        />
+        <StoreLocations
+          id="store-home-2-locations"
+          title={ui.commerce.stores.title}
+          lead={ui.commerce.stores.lead}
+          stores={stores}
+          empty={ui.empty.stores}
+          kinds={ui.commerce.stores.kinds}
+          labels={ui.commerce.stores}
+          layout="map"
+          tone="default"
+        />
+        <SitemapFooter
+          id="store-home-2-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PageStoreHomePage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PageStoreHomePage.tsx
new file mode 100644
index 0000000..72017c6
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PageStoreHomePage.tsx
@@ -0,0 +1,215 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The page-store-home page of CatalogScreen.
+
+import {
+  AnnouncementBar,
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  CtaBand,
+  Link,
+  NavBar,
+  ProductGrid,
+  SitemapFooter,
+  StoreHero,
+  Text,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function PageStoreHomePage() {
+  return (
+    <>
+      <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+        <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+          <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+            {ui.catalog.backPages}
+          </Link>
+          <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+            {ui.catalog.pages.storeHome.title}
+          </Text>
+        </Container>
+      </Block>
+      <Box class="flex flex-col" data-testid="page-body" data-page="store-home">
+        <AnnouncementBar
+          label={ui.promo.announcement.label}
+          text={ui.cases.shop.announcement.text}
+          cta={ui.cases.shop.announcement.cta}
+          ctaHref="#/pricing"
+          dismissLabel={ui.promo.announcement.dismiss}
+          badgeLabel={ui.promo.announcement.badge}
+          tone="muted"
+          layout="center"
+          dismiss="show"
+          badge="none"
+          position="top"
+        />
+        <NavBar
+          label={ui.vibe.nav.label}
+          brand={ui.site.header.brand}
+          links={navlinks}
+          current="link-product"
+          actions={{
+            cta: ui.site.header.cta,
+            href: "#/",
+            login: ui.site.header.login,
+            loginHref: "#/login",
+            mode: "cta",
+          }}
+          search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+          layout="search"
+          over="none"
+          tone="default"
+          onTheme={() => actions.toggleTheme()}
+        />
+        <StoreHero
+          id="store-home-storehero"
+          title={ui.commerce.storeHero.title}
+          lead={ui.commerce.storeHero.lead}
+          badge={ui.commerce.storeHero.badge}
+          perks={perks}
+          card={ui.commerce.storeHero.card}
+          actions={{
+            mode: "two",
+            cta: ui.commerce.storeHero.cta,
+            href: "#/catalog",
+            secondary: ui.commerce.storeHero.secondary,
+            secondaryHref: "#/delivery",
+          }}
+          layout="overlay"
+          mediaSide="end"
+          tone="default"
+          level={1}
+        />
+        <CategoryNav
+          label={ui.commerce.nav.label}
+          categories={categories}
+          current="category-all"
+          tools={ui.commerce.tools}
+          layout="tiles"
+          count="show"
+          icon="show"
+          density="default"
+        />
+        <ProductGrid
+          id="store-home-products-4"
+          title={ui.commerce.pages.bestsellers}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="grid"
+          cols="1-4"
+          ratio="1/1"
+          rating="show"
+          action="button"
+          tone="default"
+          density="default"
+          landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+        />
+        <ProductGrid
+          id="deals"
+          title={ui.commerce.rail.title}
+          products={products}
+          labels={ui.commerce.productLabels}
+          badges={ui.commerce.badges}
+          layout="rail"
+          cols="1-3"
+          ratio="4/3"
+          rating="show"
+          action="button"
+          tone="default"
+          density="default"
+          landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))}
+        />
+        <UspStrip
+          id="store-home-usp"
+          perks={perks}
+          empty={ui.empty.perks}
+          layout="cards"
+          tone="default"
+          density="default"
+          title={ui.commerce.usp.title}
+        />
+        <CtaBand
+          id="store-home-cta"
+          title={ui.cases.shop.cta.title}
+          text={ui.cases.shop.cta.text}
+          actions={{
+            cta: ui.cases.shop.cta.cta,
+            href: "#/pricing",
+            secondary: ui.cases.shop.cta.secondary,
+            secondaryHref: "#/",
+            emailLabel: ui.promo.newsletter.label,
+            mode: "one",
+          }}
+          quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+          layout="split"
+          tone="default"
+          proof="none"
+          density="default"
+        />
+        <SitemapFooter
+          id="store-home-sitemap"
+          label={ui.vibe.sitemap.label}
+          brand={ui.site.header.brand}
+          tagline={ui.vibe.sitemap.tagline}
+          copyright={ui.vibe.sitemap.copyright}
+          groups={sitemap}
+          signup={{
+            title: ui.vibe.sitemap.signupTitle,
+            label: ui.vibe.sitemap.signupLabel,
+            submit: ui.vibe.sitemap.signupSubmit,
+            mode: "none",
+          }}
+          status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+          layout="columns"
+          density="default"
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PagesPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PagesPage.tsx
new file mode 100644
index 0000000..6e13db9
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PagesPage.tsx
@@ -0,0 +1,223 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The pages page of CatalogScreen.
+import { For } from "solid-js";
+import { Block, Container, Group, Link, List, ListItem, Stack, Text, Title, tpl } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const PAGES = [
+  {
+    id: "saas-landing",
+    visit: "page-saas-landing",
+    href: "#/page-saas-landing",
+    name: ui.catalog.pages.saasLanding.title,
+    text: ui.catalog.pages.saasLanding.text,
+    blocks: 11,
+  },
+  {
+    id: "company",
+    visit: "page-company",
+    href: "#/page-company",
+    name: ui.catalog.pages.company.title,
+    text: ui.catalog.pages.company.text,
+    blocks: 9,
+  },
+  {
+    id: "portfolio",
+    visit: "page-portfolio",
+    href: "#/page-portfolio",
+    name: ui.catalog.pages.portfolio.title,
+    text: ui.catalog.pages.portfolio.text,
+    blocks: 7,
+  },
+  {
+    id: "store-home",
+    visit: "page-store-home",
+    href: "#/page-store-home",
+    name: ui.catalog.pages.storeHome.title,
+    text: ui.catalog.pages.storeHome.text,
+    blocks: 9,
+  },
+  {
+    id: "store-home-2",
+    visit: "page-store-home-2",
+    href: "#/page-store-home-2",
+    name: ui.catalog.pages.storeHome2.title,
+    text: ui.catalog.pages.storeHome2.text,
+    blocks: 7,
+  },
+  {
+    id: "store-catalog",
+    visit: "page-store-catalog",
+    href: "#/page-store-catalog",
+    name: ui.catalog.pages.storeCatalog.title,
+    text: ui.catalog.pages.storeCatalog.text,
+    blocks: 6,
+  },
+  {
+    id: "product-detail",
+    visit: "page-product-detail",
+    href: "#/page-product-detail",
+    name: ui.catalog.pages.productDetail.title,
+    text: ui.catalog.pages.productDetail.text,
+    blocks: 6,
+  },
+  {
+    id: "cart",
+    visit: "page-cart",
+    href: "#/page-cart",
+    name: ui.catalog.pages.cart.title,
+    text: ui.catalog.pages.cart.text,
+    blocks: 5,
+  },
+  {
+    id: "checkout",
+    visit: "page-checkout",
+    href: "#/page-checkout",
+    name: ui.catalog.pages.checkout.title,
+    text: ui.catalog.pages.checkout.text,
+    blocks: 4,
+  },
+  {
+    id: "shell-classic",
+    visit: "page-shell-classic",
+    href: "#/page-shell-classic",
+    name: ui.catalog.pages.shellClassic.title,
+    text: ui.catalog.pages.shellClassic.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-inset",
+    visit: "page-shell-inset",
+    href: "#/page-shell-inset",
+    name: ui.catalog.pages.shellInset.title,
+    text: ui.catalog.pages.shellInset.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail",
+    visit: "page-shell-rail",
+    href: "#/page-shell-rail",
+    name: ui.catalog.pages.shellRail.title,
+    text: ui.catalog.pages.shellRail.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-footer",
+    visit: "page-shell-rail-footer",
+    href: "#/page-shell-rail-footer",
+    name: ui.catalog.pages.shellRailFooter.title,
+    text: ui.catalog.pages.shellRailFooter.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed",
+    visit: "page-shell-collapsed",
+    href: "#/page-shell-collapsed",
+    name: ui.catalog.pages.shellCollapsed.title,
+    text: ui.catalog.pages.shellCollapsed.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level",
+    visit: "page-shell-two-level",
+    href: "#/page-shell-two-level",
+    name: ui.catalog.pages.shellTwoLevel.title,
+    text: ui.catalog.pages.shellTwoLevel.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level-full",
+    visit: "page-shell-two-level-full",
+    href: "#/page-shell-two-level-full",
+    name: ui.catalog.pages.shellTwoLevelFull.title,
+    text: ui.catalog.pages.shellTwoLevelFull.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-end",
+    visit: "page-shell-end",
+    href: "#/page-shell-end",
+    name: ui.catalog.pages.shellEnd.title,
+    text: ui.catalog.pages.shellEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-end",
+    visit: "page-shell-rail-end",
+    href: "#/page-shell-rail-end",
+    name: ui.catalog.pages.shellRailEnd.title,
+    text: ui.catalog.pages.shellRailEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-top-only",
+    visit: "page-shell-top-only",
+    href: "#/page-shell-top-only",
+    name: ui.catalog.pages.shellTopOnly.title,
+    text: ui.catalog.pages.shellTopOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-side-only",
+    visit: "page-shell-side-only",
+    href: "#/page-shell-side-only",
+    name: ui.catalog.pages.shellSideOnly.title,
+    text: ui.catalog.pages.shellSideOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed-end",
+    visit: "page-shell-collapsed-end",
+    href: "#/page-shell-collapsed-end",
+    name: ui.catalog.pages.shellCollapsedEnd.title,
+    text: ui.catalog.pages.shellCollapsedEnd.text,
+    blocks: 1,
+  },
+] as const;
+
+export function PagesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="pages-title">
+              {ui.catalog.pagesTitle}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.catalog.pagesText}
+            </Text>
+          </Stack>
+          <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="page-list">
+            <For each={PAGES ?? []}>{(p) => (
+              <ListItem class="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+                <Link
+                  href={p.href}
+                  variant="default"
+                  class="font-bold"
+                  data-testid="page-link"
+                  data-page={p.id}
+                  data-visit={p.visit}
+                >
+                  {p.name}
+                </Link>
+                <Text size="sm" class="text-muted-foreground">
+                  {p.text}
+                </Text>
+                <Text size="xs" class="text-muted-foreground" data-testid="page-count">
+                  {tpl(ui.catalog.pageCount, p.blocks)}
+                </Text>
+              </ListItem>
+            )}</For>
+          </List>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PromoBannersPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PromoBannersPage.tsx
new file mode 100644
index 0000000..36c37da
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PromoBannersPage.tsx
@@ -0,0 +1,420 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The promo-banners page of CatalogScreen.
+
+import {
+  AnnouncementBar,
+  Block,
+  Box,
+  Container,
+  CookieBanner,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function PromoBannersPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.promoBanners}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 12)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-announcement-title"
+            data-testid="catalog-block"
+            data-block="announcement"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-announcement-title">
+                {ui.blocks.names.announcement}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.announcement}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-bar-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.bar}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="default"
+                  layout="center"
+                  dismiss="hide"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-badge-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="badge"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-badge-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.badge}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="muted"
+                  layout="center"
+                  dismiss="hide"
+                  badge="show"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-bottom-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="bottom"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-bottom-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.bottom}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="default"
+                  layout="split"
+                  dismiss="show"
+                  badge="none"
+                  position="bottom"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-muted-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="muted"
+                  layout="center"
+                  dismiss="hide"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.muted))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-split-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-split-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="muted"
+                  layout="split"
+                  dismiss="hide"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-dismissible-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="dismissible"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-dismissible-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.dismissible}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.promo.announcement.text}
+                  cta={ui.promo.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="default"
+                  layout="center"
+                  dismiss="show"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-shop-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="shop"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-shop-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.shop}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.cases.shop.announcement.text}
+                  cta={ui.cases.shop.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="muted"
+                  layout="center"
+                  dismiss="show"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="announcement-agency-label"
+              data-testid="variant"
+              data-block="announcement"
+              data-variant="agency"
+            >
+              <Title as={3} size="base" weight="bold" id="announcement-agency-label" data-testid="variant-label">
+                {ui.blocks.variants.announcement.agency}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <AnnouncementBar
+                  label={ui.promo.announcement.label}
+                  text={ui.cases.agency.announcement.text}
+                  cta={ui.cases.agency.announcement.cta}
+                  ctaHref="#/pricing"
+                  dismissLabel={ui.promo.announcement.dismiss}
+                  badgeLabel={ui.promo.announcement.badge}
+                  tone="default"
+                  layout="split"
+                  dismiss="hide"
+                  badge="none"
+                  position="top"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.agency))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-cookie-title"
+            data-testid="catalog-block"
+            data-block="cookie"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-cookie-title">
+                {ui.blocks.names.cookie}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.cookie}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cookie-bar-label"
+              data-testid="variant"
+              data-block="cookie"
+              data-variant="bar"
+            >
+              <Title as={3} size="base" weight="bold" id="cookie-bar-label" data-testid="variant-label">
+                {ui.blocks.variants.cookie.bar}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CookieBanner
+                  id="cookie-bar"
+                  title={ui.promo.cookie.title}
+                  text={ui.promo.cookie.text}
+                  accept={ui.promo.cookie.accept}
+                  decline={ui.promo.cookie.decline}
+                  settings={ui.promo.cookie.settings}
+                  layout="bar"
+                  actions="two"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cookie-card-label"
+              data-testid="variant"
+              data-block="cookie"
+              data-variant="card"
+            >
+              <Title as={3} size="base" weight="bold" id="cookie-card-label" data-testid="variant-label">
+                {ui.blocks.variants.cookie.card}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CookieBanner
+                  id="cookie-card"
+                  title={ui.promo.cookie.title}
+                  text={ui.promo.cookie.text}
+                  accept={ui.promo.cookie.accept}
+                  decline={ui.promo.cookie.decline}
+                  settings={ui.promo.cookie.settings}
+                  layout="card"
+                  actions="two"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cookie-settings-label"
+              data-testid="variant"
+              data-block="cookie"
+              data-variant="settings"
+            >
+              <Title as={3} size="base" weight="bold" id="cookie-settings-label" data-testid="variant-label">
+                {ui.blocks.variants.cookie.settings}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CookieBanner
+                  id="cookie-settings"
+                  title={ui.promo.cookie.title}
+                  text={ui.promo.cookie.text}
+                  accept={ui.promo.cookie.accept}
+                  decline={ui.promo.cookie.decline}
+                  settings={ui.promo.cookie.settings}
+                  layout="bar"
+                  actions="three"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="cookie-muted-label"
+              data-testid="variant"
+              data-block="cookie"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="cookie-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.cookie.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <CookieBanner
+                  id="cookie-muted"
+                  title={ui.promo.cookie.title}
+                  text={ui.promo.cookie.text}
+                  accept={ui.promo.cookie.accept}
+                  decline={ui.promo.cookie.decline}
+                  settings={ui.promo.cookie.settings}
+                  layout="card"
+                  actions="three"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/PromoNewsletterPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/PromoNewsletterPage.tsx
new file mode 100644
index 0000000..d505fe8
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/PromoNewsletterPage.tsx
@@ -0,0 +1,202 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The promo-newsletter page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  NewsletterForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function PromoNewsletterPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.promo.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.promoNewsletter}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 5)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-newsletter-title"
+            data-testid="catalog-block"
+            data-block="newsletter"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-newsletter-title">
+                {ui.blocks.names.newsletter}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.newsletter}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-inline-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="inline"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-inline-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.inline}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-inline"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="inline"
+                  terms="hide"
+                  tone="default"
+                  align="center"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-stacked-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="stacked"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-stacked-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.stacked}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-stacked"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="stacked"
+                  terms="hide"
+                  tone="default"
+                  align="center"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-split-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-split-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-split"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="split"
+                  terms="hide"
+                  tone="default"
+                  align="start"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-consent-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="consent"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-consent-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.consent}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-consent"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="inline"
+                  terms="show"
+                  tone="default"
+                  align="center"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="newsletter-muted-label"
+              data-testid="variant"
+              data-block="newsletter"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="newsletter-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.newsletter.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <NewsletterForm
+                  id="newsletter-muted"
+                  title={ui.promo.newsletter.title}
+                  text={ui.promo.newsletter.text}
+                  label={ui.promo.newsletter.label}
+                  submit={ui.promo.newsletter.submit}
+                  consent={ui.promo.newsletter.consent}
+                  layout="inline"
+                  terms="show"
+                  tone="muted"
+                  align="start"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/ScreenHeader.tsx b/apps/host-solid/xgen/screens/CatalogScreen/ScreenHeader.tsx
new file mode 100644
index 0000000..d65c56f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/ScreenHeader.tsx
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The ScreenHeader part of CatalogScreen: its own file, so each file of the screen opens on one Block.
+
+import { Block, Button, Container, Link, LinkPlain, NavBlock } from "@ui8kit/solid-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+
+export function ScreenHeader() {
+  return (
+    <Block tag="header" class="border-b border-border">
+      <LinkPlain
+        href="#main-content"
+        class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+          "focus:px-4 focus:py-2 focus:text-sm focus:shadow"}
+        data-testid="skip-link"
+      >
+        {ui.site.header.skip}
+      </LinkPlain>
+      <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+        <Link href="#/" variant="default" class="text-lg font-bold" data-testid="brand">
+          {ui.catalog.title}
+        </Link>
+        <NavBlock label={ui.catalog.navLabel} class="flex flex-wrap items-center gap-4">
+          <Link href="#/" variant="default" class="text-sm font-medium" data-testid="tab-categories">
+            {ui.catalog.categoriesTab}
+          </Link>
+          <Link href="#/pages" variant="default" class="text-sm font-medium" data-testid="tab-pages">
+            {ui.catalog.pagesTitle}
+          </Link>
+          <Link href="/blocks/" variant="default" class="text-sm font-medium" data-testid="gallery-link">
+            {ui.blocks.title}
+          </Link>
+          <Link href="/skins/" variant="default" class="text-sm font-medium" data-testid="skins-link">
+            {ui.skins.title}
+          </Link>
+          <Link href="/discovery/" variant="default" class="text-sm font-medium" data-testid="discovery-link">
+            {ui.discovery.title}
+          </Link>
+          <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => actions.toggleTheme()}>
+            {ui.theme.toggle}
+          </Button>
+        </NavBlock>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/SupportContactPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/SupportContactPage.tsx
new file mode 100644
index 0000000..7b0bae6
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/SupportContactPage.tsx
@@ -0,0 +1,370 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The support-contact page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  ContactForm,
+  Container,
+  Group,
+  Link,
+  Stack,
+  SupportChannels,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function SupportContactPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.supportContact}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 2, 10)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-contact-title"
+            data-testid="catalog-block"
+            data-block="contact"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-contact-title">
+                {ui.blocks.names.contact}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.contact}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-single-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="single"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-single-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.single}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-single"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="single"
+                  fields="full"
+                  terms="hide"
+                  page="section"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-page-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="page"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-page-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.page}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-page"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="single"
+                  fields="short"
+                  terms="hide"
+                  page="full"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.page))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-short-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="short"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-short-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.short}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-short"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="single"
+                  fields="short"
+                  terms="hide"
+                  page="section"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.short))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-split-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-split-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-split"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="split"
+                  fields="full"
+                  terms="hide"
+                  page="section"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-consent-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="consent"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-consent-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.consent}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-consent"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="single"
+                  fields="full"
+                  terms="show"
+                  page="section"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="contact-muted-label"
+              data-testid="variant"
+              data-block="contact"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="contact-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.contact.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ContactForm
+                  id="contact-muted"
+                  title={ui.support.contact.title}
+                  text={ui.support.contact.text}
+                  labels={ui.support.contact.labels}
+                  details={channels}
+                  layout="split"
+                  fields="short"
+                  terms="show"
+                  page="section"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-channels-title"
+            data-testid="catalog-block"
+            data-block="channels"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-channels-title">
+                {ui.blocks.names.channels}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.channels}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="channels-grid-label"
+              data-testid="variant"
+              data-block="channels"
+              data-variant="grid"
+            >
+              <Title as={3} size="base" weight="bold" id="channels-grid-label" data-testid="variant-label">
+                {ui.blocks.variants.channels.grid}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SupportChannels
+                  id="channels-grid"
+                  title={ui.support.channels.title}
+                  channels={channels}
+                  empty={ui.empty.channels}
+                  open={ui.support.channels.open}
+                  layout="grid"
+                  cols="1-3"
+                  action="link"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="channels-twoUp-label"
+              data-testid="variant"
+              data-block="channels"
+              data-variant="twoUp"
+            >
+              <Title as={3} size="base" weight="bold" id="channels-twoUp-label" data-testid="variant-label">
+                {ui.blocks.variants.channels.twoUp}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SupportChannels
+                  id="channels-twoUp"
+                  title={ui.support.channels.title}
+                  channels={channels}
+                  empty={ui.empty.channels}
+                  open={ui.support.channels.open}
+                  layout="grid"
+                  cols="1-2"
+                  action="link"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="channels-list-label"
+              data-testid="variant"
+              data-block="channels"
+              data-variant="list"
+            >
+              <Title as={3} size="base" weight="bold" id="channels-list-label" data-testid="variant-label">
+                {ui.blocks.variants.channels.list}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SupportChannels
+                  id="channels-list"
+                  title={ui.support.channels.title}
+                  channels={channels}
+                  empty={ui.empty.channels}
+                  open={ui.support.channels.open}
+                  layout="list"
+                  cols="1-3"
+                  action="link"
+                  tone="default"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="channels-plain-label"
+              data-testid="variant"
+              data-block="channels"
+              data-variant="plain"
+            >
+              <Title as={3} size="base" weight="bold" id="channels-plain-label" data-testid="variant-label">
+                {ui.blocks.variants.channels.plain}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <SupportChannels
+                  id="channels-plain"
+                  title={ui.support.channels.title}
+                  channels={channels}
+                  empty={ui.empty.channels}
+                  open={ui.support.channels.open}
+                  layout="grid"
+                  cols="1-3"
+                  action="none"
+                  tone="muted"
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.plain))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/CatalogScreen/SupportStatesPage.tsx b/apps/host-solid/xgen/screens/CatalogScreen/SupportStatesPage.tsx
new file mode 100644
index 0000000..86687be
--- /dev/null
+++ b/apps/host-solid/xgen/screens/CatalogScreen/SupportStatesPage.tsx
@@ -0,0 +1,199 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/catalog.json
+// The support-states page of CatalogScreen.
+
+import {
+  Block,
+  Box,
+  Container,
+  ErrorPage,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ERRORPAGE_ACTIONS = { cta: ui.vibe.error.cta, href: "#/", secondary: ui.vibe.error.secondary, secondaryHref: "#/" } as const;
+
+export function SupportStatesPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Group>
+            <Link href="#/" variant="default" data-testid="back">
+              {ui.catalog.back}
+            </Link>
+          </Group>
+          <Stack gap="2" align="stretch">
+            <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+              {ui.catalog.sections.support.title}
+            </Text>
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+              {ui.catalog.categories.supportStates}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {tpl(ui.catalog.count, 1, 5)}
+            </Text>
+          </Stack>
+          <Stack
+            gap="6"
+            align="stretch"
+            role="group"
+            aria-labelledby="catalog-errorpage-title"
+            data-testid="catalog-block"
+            data-block="errorpage"
+          >
+            <Stack gap="2" align="stretch">
+              <Title as={2} size="2xl" weight="bold" id="catalog-errorpage-title">
+                {ui.blocks.names.errorpage}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {ui.blocks.docs.errorpage}
+              </Text>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-centered-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="centered"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-centered-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.centered}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-centered"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                  layout="centered"
+                  code="show"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.centered))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-split-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="split"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-split-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.split}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-split"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                  layout="split"
+                  code="show"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.split))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-noCode-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="noCode"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-noCode-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.noCode}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-noCode"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                  layout="centered"
+                  code="hide"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.noCode))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-two-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="two"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-two-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.two}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-two"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "two" }}
+                  layout="centered"
+                  code="show"
+                  tone="default"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.two))}
+                />
+              </Box>
+            </Stack>
+            <Stack
+              gap="4"
+              align="stretch"
+              role="group"
+              aria-labelledby="errorpage-muted-label"
+              data-testid="variant"
+              data-block="errorpage"
+              data-variant="muted"
+            >
+              <Title as={3} size="base" weight="bold" id="errorpage-muted-label" data-testid="variant-label">
+                {ui.blocks.variants.errorpage.muted}
+              </Title>
+              <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+                <ErrorPage
+                  id="errorpage-muted"
+                  title={ui.vibe.error.title}
+                  text={ui.vibe.error.text}
+                  status={ui.vibe.error.status}
+                  actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+                  layout="centered"
+                  code="show"
+                  tone="muted"
+                  level={2}
+                  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.muted))}
+                />
+              </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/PlansScreen.tsx b/apps/host-solid/xgen/screens/PlansScreen.tsx
new file mode 100644
index 0000000..86aebf9
--- /dev/null
+++ b/apps/host-solid/xgen/screens/PlansScreen.tsx
@@ -0,0 +1,265 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/plans.json
+/**
+ * Collection -> record: a list of plans (search, sort, pager; all state in the URL) and the card of one plan.
+ * Data: the Codex fixture `plans`.
+ */
+import { For } from "solid-js";
+import {
+  Badge,
+  Block,
+  Button,
+  Container,
+  Group,
+  Input,
+  Link,
+  PricingCard,
+  Stack,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+  Text,
+  Title,
+  at,
+  fmtMoney,
+  tpl,
+  type Plan,
+} from "@ui8kit/solid-ui";
+import { collectionView, fromCodex, matchRoute, screenActions, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { plans as entries } from "@ui8kit/app-shared/data/plans";
+
+const LIST = { searchFields: ["name","tagline"], pageSize: 5, defaultSort: "price:asc" } as const;
+const ROUTES = [{"path":"plans","area":"list"},{"path":"plans/:id","area":"record"}] as const;
+const FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+  "status": "metadata.plan_status.value",
+} as const;
+
+const ROWS = fromCodex<Plan>(entries, FIELDS, CODEX);
+const HOME = { area: "list", params: {} as Record<string, string> };
+
+export function PlansScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const view = collectionView(ROWS, LIST, url.query);
+  const record = route.area === "record" ? ROWS.find((r) => r.id === route.params.id) : undefined;
+  const actions = screenActions(url, view, "plans", (id: string) => `plans/${id}`, toggleTheme);
+  return (
+    <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-8">
+        <Stack gap="6">
+          <Group gap="4" align="center" justify="between">
+            <Title as={1} size="2xl" weight="bold">
+              {ui.app.title}
+            </Title>
+            <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => actions.toggleTheme()}>
+              {ui.theme.toggle}
+            </Button>
+          </Group>
+          {route.area === "record" ? (
+            <Stack gap="4">
+              <Group>
+                <Button variant="ghost" size="sm" data-testid="back" onClick={() => actions.back()}>
+                  {ui.record.back}
+                </Button>
+              </Group>
+              {record ? (
+                <PricingCard
+                  plan={record}
+                  labels={ui.pricing}
+                  current={true}
+                  onSelect={() => actions.back()}
+                  footer={(plan: Plan) => (
+                    <Text size="sm" class="text-muted-foreground" data-testid="record-id">
+                      {tpl(ui.record.id, plan.id)}
+                    </Text>
+                  )}
+                />
+              ) : (
+                <Text class="text-muted-foreground" data-testid="missing">
+                  {ui.record.missing}
+                </Text>
+              )}
+            </Stack>
+          ) : (
+            <Stack gap="4">
+              <Group gap="4" align="center" justify="between" class="flex-wrap">
+                <Input
+                  type="search"
+                  size="default"
+                  value={view.q}
+                  placeholder={ui.plans.search}
+                  aria-label={ui.plans.search}
+                  class="max-w-xs"
+                  data-testid="search"
+                  onInput={(event: InputEvent & { currentTarget: HTMLInputElement }) => actions.search(event.currentTarget.value)}
+                />
+                <Text size="sm" class="text-muted-foreground" data-testid="count">
+                  {tpl(ui.plans.count, view.total)}
+                </Text>
+              </Group>
+              <Table class="w-full text-sm" data-testid="plans-table">
+                <TableCaption class="sr-only">
+                  {ui.plans.caption}
+                </TableCaption>
+                <TableHead>
+                  <TableRow>
+                    {((view.sort.field === "name") && (view.sort.dir === "asc")) ? (
+                      <TableHeadCell scope="col" aria-sort="ascending">
+                        <Button variant="ghost" size="sm" class="-mx-2 px-2" onClick={() => actions.sort("name")}>
+                          {ui.plans.col.name}
+                        </Button>
+                      </TableHeadCell>
+                    ) : ((view.sort.field === "name") && (view.sort.dir === "desc")) ? (
+                      <TableHeadCell scope="col" aria-sort="descending">
+                        <Button variant="ghost" size="sm" class="-mx-2 px-2" onClick={() => actions.sort("name")}>
+                          {ui.plans.col.name}
+                        </Button>
+                      </TableHeadCell>
+                    ) : (
+                      <TableHeadCell scope="col" aria-sort="none">
+                        <Button variant="ghost" size="sm" class="-mx-2 px-2" onClick={() => actions.sort("name")}>
+                          {ui.plans.col.name}
+                        </Button>
+                      </TableHeadCell>
+                    )}
+                    {((view.sort.field === "price") && (view.sort.dir === "asc")) ? (
+                      <TableHeadCell scope="col" class="text-right" aria-sort="ascending">
+                        <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onClick={() => actions.sort("price")}>
+                          {ui.plans.col.price}
+                        </Button>
+                      </TableHeadCell>
+                    ) : ((view.sort.field === "price") && (view.sort.dir === "desc")) ? (
+                      <TableHeadCell scope="col" class="text-right" aria-sort="descending">
+                        <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onClick={() => actions.sort("price")}>
+                          {ui.plans.col.price}
+                        </Button>
+                      </TableHeadCell>
+                    ) : (
+                      <TableHeadCell scope="col" class="text-right" aria-sort="none">
+                        <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onClick={() => actions.sort("price")}>
+                          {ui.plans.col.price}
+                        </Button>
+                      </TableHeadCell>
+                    )}
+                    {((view.sort.field === "seats") && (view.sort.dir === "asc")) ? (
+                      <TableHeadCell scope="col" class="text-right" aria-sort="ascending">
+                        <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onClick={() => actions.sort("seats")}>
+                          {ui.plans.col.seats}
+                        </Button>
+                      </TableHeadCell>
+                    ) : ((view.sort.field === "seats") && (view.sort.dir === "desc")) ? (
+                      <TableHeadCell scope="col" class="text-right" aria-sort="descending">
+                        <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onClick={() => actions.sort("seats")}>
+                          {ui.plans.col.seats}
+                        </Button>
+                      </TableHeadCell>
+                    ) : (
+                      <TableHeadCell scope="col" class="text-right" aria-sort="none">
+                        <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onClick={() => actions.sort("seats")}>
+                          {ui.plans.col.seats}
+                        </Button>
+                      </TableHeadCell>
+                    )}
+                    {((view.sort.field === "storage") && (view.sort.dir === "asc")) ? (
+                      <TableHeadCell scope="col" class="text-right" aria-sort="ascending">
+                        <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onClick={() => actions.sort("storage")}>
+                          {ui.plans.col.storage}
+                        </Button>
+                      </TableHeadCell>
+                    ) : ((view.sort.field === "storage") && (view.sort.dir === "desc")) ? (
+                      <TableHeadCell scope="col" class="text-right" aria-sort="descending">
+                        <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onClick={() => actions.sort("storage")}>
+                          {ui.plans.col.storage}
+                        </Button>
+                      </TableHeadCell>
+                    ) : (
+                      <TableHeadCell scope="col" class="text-right" aria-sort="none">
+                        <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onClick={() => actions.sort("storage")}>
+                          {ui.plans.col.storage}
+                        </Button>
+                      </TableHeadCell>
+                    )}
+                    <TableHeadCell scope="col">
+                      {ui.plans.col.status}
+                    </TableHeadCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  <For each={view.rows ?? []}>{(row) => (
+                    <TableRow data-testid="plan-row">
+                      <TableCell>
+                        <Link href={(("#/plans/" + row.id) + view.qs)} variant="default" data-testid="open-record">
+                          {row.name}
+                        </Link>
+                      </TableCell>
+                      <TableCell class="text-right">
+                        {fmtMoney(row.price, row.currency)}
+                      </TableCell>
+                      <TableCell class="text-right">
+                        {row.seats}
+                      </TableCell>
+                      <TableCell class="text-right">
+                        {row.storage}
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={((row.status === "active") ? "default" : "secondary")} size="default">
+                          {at(ui.status, (row.status ?? ""))}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  )}</For>
+                </TableBody>
+              </Table>
+              {(view.total === 0) ? (
+                <Text class="text-muted-foreground" data-testid="empty">
+                  {ui.plans.empty}
+                </Text>
+              ) : null}
+              <Group gap="4" align="center" justify="between" class="flex-wrap">
+                <Text size="sm" class="text-muted-foreground">
+                  {tpl(ui.pager.showing, view.from, view.to, view.total)}
+                </Text>
+                <Group gap="2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={!(view.page > 1)}
+                    data-testid="prev"
+                    onClick={() => actions.page((view.page + -1))}
+                  >
+                    {ui.pager.previous}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={!(view.page < view.pages)}
+                    data-testid="next"
+                    onClick={() => actions.page((view.page + 1))}
+                  >
+                    {ui.pager.next}
+                  </Button>
+                </Group>
+              </Group>
+            </Stack>
+          )}
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/SiteScreen.tsx b/apps/host-solid/xgen/screens/SiteScreen.tsx
new file mode 100644
index 0000000..9d1214d
--- /dev/null
+++ b/apps/host-solid/xgen/screens/SiteScreen.tsx
@@ -0,0 +1,213 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/site.json
+/**
+ * A marketing site of two routes, home and pricing, made of blocks: header, hero, features, pricing, FAQ, call
+ * to action, footer. Data: the Codex fixtures `features`, `tiers` and `faq`. The only action is the theme
+ * button.
+ */
+
+import {
+  Block,
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  HeroClassic,
+  PricingTiers,
+  SiteFooter,
+  SiteHeader,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Plan,
+} from "@ui8kit/solid-ui";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const ROUTES = [{"path":"","area":"home"},{"path":"pricing","area":"pricing"}] as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const HOME = { area: "notfound", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function SiteScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  return (
+    <>
+      <SiteHeader
+        labels={ui.site.header}
+        current={route.area}
+        cta={ui.site.header.cta}
+        layout="inline"
+        position="static"
+        actions="none"
+        routes={{ home: "#/", pricing: "#/pricing" }}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "home" ? (
+          <>
+            <HeroClassic
+              id="home-hero"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{
+                cta: ui.site.home.cta,
+                href: "#/pricing",
+                secondary: ui.site.home.secondary,
+                secondaryHref: "#/pricing",
+                emailLabel: ui.promo.newsletter.label,
+                mode: "one",
+              }}
+              media={{
+                codeTitle: ui.vibe.code.title,
+                prompt: ui.vibe.code.prompt,
+                lines: terminal,
+                kind: "none",
+                side: "end",
+              }}
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+            />
+            <FeatureGrid
+              id="home-features"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="grid"
+              cols="1-3"
+              item="card"
+              mediaSide="end"
+              tone="default"
+              density="default"
+            />
+            <CtaBand
+              id="home-cta"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{
+                cta: ui.site.home.ctaButton,
+                href: "#/pricing",
+                secondary: ui.site.home.ctaSecondary,
+                secondaryHref: "#/",
+                emailLabel: ui.promo.newsletter.label,
+                mode: "one",
+              }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="card"
+              tone="muted"
+              proof="none"
+              density="default"
+            />
+          </>
+        ) : route.area === "pricing" ? (
+          <>
+            <HeroClassic
+              id="pricing-hero"
+              title={ui.site.pricing.title}
+              text={ui.site.pricing.text}
+              actions={undefined}
+              media={{
+                codeTitle: ui.vibe.code.title,
+                prompt: ui.vibe.code.prompt,
+                lines: terminal,
+                kind: "none",
+                side: "end",
+              }}
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+            />
+            <PricingTiers
+              id="pricing-tiers"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+            />
+            <FaqList
+              id="pricing-faq"
+              title={ui.site.pricing.faqTitle}
+              items={faq}
+              empty={ui.vibe.faq.empty}
+              search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+              filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="default"
+            />
+          </>
+        ) : (
+          <HeroClassic
+            id="not-found"
+            title={ui.site.notFound.title}
+            text={ui.site.notFound.text}
+            actions={{
+              cta: ui.site.notFound.back,
+              href: "#/",
+              secondary: ui.site.home.secondary,
+              secondaryHref: "#/pricing",
+              emailLabel: ui.promo.newsletter.label,
+              mode: "one",
+            }}
+            media={{
+              codeTitle: ui.vibe.code.title,
+              prompt: ui.vibe.code.prompt,
+              lines: terminal,
+              kind: "none",
+              side: "end",
+            }}
+            layout="centered"
+            scale="default"
+            tone="default"
+            density="roomy"
+          />
+        )}
+      </Block>
+      <SiteFooter
+        labels={ui.site.footer}
+        layout="minimal"
+        density="default"
+        routes={{ home: "#/", pricing: "#/pricing" }}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/SkinsScreen.tsx b/apps/host-solid/xgen/screens/SkinsScreen.tsx
new file mode 100644
index 0000000..7e77ece
--- /dev/null
+++ b/apps/host-solid/xgen/screens/SkinsScreen.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/skins.json
+/**
+ * The Skins screen: tiles that switch the look of the whole preview. A row of skins (the default theme and 14
+ * tweakcn presets, each tile drawn in its skin), a row of Google fonts with Latin and Cyrillic over the font of
+ * the skin, and a row of corner radii over the radius of the skin. The tiles are static; the preview runtime
+ * (runtime/skins.ts) applies and stores the choice.
+ */
+
+import { Block } from "@ui8kit/solid-ui";
+import { IndexPage } from "./SkinsScreen/IndexPage";
+import { NotfoundPage } from "./SkinsScreen/NotfoundPage";
+import { ScreenHeader } from "./SkinsScreen/ScreenHeader";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ROUTES = [{"path":"","area":"index"}] as const;
+
+const HOME = { area: "notfound", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function SkinsScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  return (
+    <>
+      <ScreenHeader />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "index" ? (
+          <IndexPage />
+        ) : (
+          <NotfoundPage />
+        )}
+      </Block>
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/SkinsScreen/IndexPage.tsx b/apps/host-solid/xgen/screens/SkinsScreen/IndexPage.tsx
new file mode 100644
index 0000000..65cd878
--- /dev/null
+++ b/apps/host-solid/xgen/screens/SkinsScreen/IndexPage.tsx
@@ -0,0 +1,243 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/skins.json
+// The index page of SkinsScreen.
+import { For } from "solid-js";
+import {
+  Block,
+  Box,
+  Button,
+  ButtonPlain,
+  Container,
+  Inline,
+  List,
+  ListItem,
+  LucideIcon,
+  Stack,
+  Text,
+  Title,
+} from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const SKINS = [
+  { id: "default", name: ui.skins.skins.names.default },
+  { id: "modern-minimal", name: ui.skins.skins.names.modernMinimal },
+  { id: "violet-bloom", name: ui.skins.skins.names.violetBloom },
+  { id: "t3-chat", name: ui.skins.skins.names.t3Chat },
+  { id: "bubblegum", name: ui.skins.skins.names.bubblegum },
+  { id: "doom-64", name: ui.skins.skins.names.doom64 },
+  { id: "amber-minimal", name: ui.skins.skins.names.amberMinimal },
+  { id: "supabase", name: ui.skins.skins.names.supabase },
+  { id: "kodama-grove", name: ui.skins.skins.names.kodamaGrove },
+  { id: "perpetuity", name: ui.skins.skins.names.perpetuity },
+  { id: "cosmic-night", name: ui.skins.skins.names.cosmicNight },
+  { id: "claude", name: ui.skins.skins.names.claude },
+  { id: "mocha-mousse", name: ui.skins.skins.names.mochaMousse },
+  { id: "neo-brutalism", name: ui.skins.skins.names.neoBrutalism },
+  { id: "notebook", name: ui.skins.skins.names.notebook },
+] as const;
+const FONTS = [
+  { id: "inter", family: "Inter", name: ui.skins.fonts.names.inter },
+  { id: "roboto", family: "Roboto", name: ui.skins.fonts.names.roboto },
+  { id: "manrope", family: "Manrope", name: ui.skins.fonts.names.manrope },
+  { id: "montserrat", family: "Montserrat", name: ui.skins.fonts.names.montserrat },
+  { id: "rubik", family: "Rubik", name: ui.skins.fonts.names.rubik },
+  { id: "nunito", family: "Nunito", name: ui.skins.fonts.names.nunito },
+  { id: "ibm-plex-sans", family: "IBM Plex Sans", name: ui.skins.fonts.names.ibmPlexSans },
+  { id: "golos-text", family: "Golos Text", name: ui.skins.fonts.names.golosText },
+  { id: "onest", family: "Onest", name: ui.skins.fonts.names.onest },
+  { id: "open-sans", family: "Open Sans", name: ui.skins.fonts.names.openSans },
+] as const;
+const RADII = [
+  { id: "r0", value: "0px", name: ui.skins.radius.names.r0 },
+  { id: "r4", value: "4px", name: ui.skins.radius.names.r4 },
+  { id: "r8", value: "8px", name: ui.skins.radius.names.r8 },
+  { id: "r12", value: "12px", name: ui.skins.radius.names.r12 },
+  { id: "r16", value: "16px", name: ui.skins.radius.names.r16 },
+] as const;
+
+export function IndexPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="8" align="stretch">
+          <Stack gap="2" align="stretch">
+            <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="skins-title">
+              {ui.skins.title}
+            </Title>
+            <Text class="max-w-2xl text-muted-foreground">
+              {ui.skins.intro}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skins-skins-title"
+            data-testid="skins-row"
+            data-row="skins"
+          >
+            <Box class="flex flex-wrap items-end justify-between gap-4">
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id="skins-skins-title">
+                  {ui.skins.skins.title}
+                </Title>
+                <Text size="sm" class="max-w-2xl text-muted-foreground">
+                  {ui.skins.skins.text}
+                </Text>
+              </Stack>
+              <Button variant="outline" size="sm" data-look-reset="skin" data-testid="reset-skins">
+                {ui.skins.skins.reset}
+              </Button>
+            </Box>
+            <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5" data-testid="skins-list">
+              <For each={SKINS ?? []}>{(s) => (
+                <ListItem class="flex">
+                  <ButtonPlain
+                    type="button"
+                    class={"group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted " +
+                      "aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-2"}
+                    aria-pressed={false}
+                    data-skin-pick={s.id}
+                    data-testid="skin-tile"
+                  >
+                    <Inline
+                      class="flex flex-col gap-4 rounded p-4 inset-ring inset-ring-border"
+                      data-skin={s.id}
+                      data-testid="skin-preview"
+                    >
+                      <Inline class="flex flex-wrap gap-2">
+                        <Inline class="size-6 rounded bg-primary inset-ring inset-ring-border" />
+                        <Inline class="size-6 rounded bg-secondary inset-ring inset-ring-border" />
+                        <Inline class="size-6 rounded bg-accent inset-ring inset-ring-border" />
+                        <Inline class="size-6 rounded bg-muted inset-ring inset-ring-border" />
+                        <Inline class="size-6 rounded bg-foreground inset-ring inset-ring-border" />
+                      </Inline>
+                      <Inline class="flex flex-col gap-2 rounded bg-card p-4 text-card-foreground inset-ring inset-ring-border">
+                        <Inline class="text-sm font-semibold">
+                          {ui.skins.sample.card}
+                        </Inline>
+                        <Inline class="text-xs text-muted-foreground">
+                          {ui.skins.sample.text}
+                        </Inline>
+                        <Inline class={"inline-flex h-8 w-fit items-center rounded bg-primary px-4 text-sm font-medium text-primary-foreground"}>
+                          {ui.skins.sample.button}
+                        </Inline>
+                      </Inline>
+                    </Inline>
+                    <Inline class="flex items-center justify-between gap-2 px-2 pb-2 text-sm font-medium">
+                      <Inline>
+                        {s.name}
+                      </Inline>
+                      <Inline class="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                        <LucideIcon name="check" size={16} />
+                      </Inline>
+                    </Inline>
+                  </ButtonPlain>
+                </ListItem>
+              )}</For>
+            </List>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skins-fonts-title"
+            data-testid="skins-row"
+            data-row="fonts"
+          >
+            <Box class="flex flex-wrap items-end justify-between gap-4">
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id="skins-fonts-title">
+                  {ui.skins.fonts.title}
+                </Title>
+                <Text size="sm" class="max-w-2xl text-muted-foreground">
+                  {ui.skins.fonts.text}
+                </Text>
+              </Stack>
+              <Button variant="outline" size="sm" data-look-reset="font" data-testid="reset-fonts">
+                {ui.skins.fonts.reset}
+              </Button>
+            </Box>
+            <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5" data-testid="fonts-list">
+              <For each={FONTS ?? []}>{(f) => (
+                <ListItem class="flex">
+                  <ButtonPlain
+                    type="button"
+                    class={"group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted " +
+                      "aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-4"}
+                    aria-pressed={false}
+                    data-font-pick={f.id}
+                    data-font-family={f.family}
+                    data-testid="font-tile"
+                  >
+                    <Inline class="text-3xl">
+                      {ui.skins.fonts.specimen}
+                    </Inline>
+                    <Inline class="text-sm text-muted-foreground">
+                      {ui.skins.fonts.pangram}
+                    </Inline>
+                    <Inline class="flex items-center justify-between gap-2  text-sm font-medium">
+                      <Inline>
+                        {f.name}
+                      </Inline>
+                      <Inline class="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                        <LucideIcon name="check" size={16} />
+                      </Inline>
+                    </Inline>
+                  </ButtonPlain>
+                </ListItem>
+              )}</For>
+            </List>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skins-radius-title"
+            data-testid="skins-row"
+            data-row="radius"
+          >
+            <Box class="flex flex-wrap items-end justify-between gap-4">
+              <Stack gap="2" align="stretch">
+                <Title as={2} size="2xl" weight="bold" id="skins-radius-title">
+                  {ui.skins.radius.title}
+                </Title>
+                <Text size="sm" class="max-w-2xl text-muted-foreground">
+                  {ui.skins.radius.text}
+                </Text>
+              </Stack>
+              <Button variant="outline" size="sm" data-look-reset="radius" data-testid="reset-radius">
+                {ui.skins.radius.reset}
+              </Button>
+            </Box>
+            <List tag="ul" class="grid gap-4 grid-cols-2 sm:grid-cols-5" data-testid="radius-list">
+              <For each={RADII ?? []}>{(r) => (
+                <ListItem class="flex">
+                  <ButtonPlain
+                    type="button"
+                    class={"group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted " +
+                      "aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-4"}
+                    aria-pressed={false}
+                    data-radius-pick={r.id}
+                    data-radius={r.value}
+                    data-testid="radius-tile"
+                  >
+                    <Inline class="block h-16 w-full rounded bg-primary" data-radius-sample="" />
+                    <Inline class="flex items-center justify-between gap-2  text-sm font-medium">
+                      <Inline>
+                        {r.name}
+                      </Inline>
+                      <Inline class="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                        <LucideIcon name="check" size={16} />
+                      </Inline>
+                    </Inline>
+                  </ButtonPlain>
+                </ListItem>
+              )}</For>
+            </List>
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/SkinsScreen/NotfoundPage.tsx b/apps/host-solid/xgen/screens/SkinsScreen/NotfoundPage.tsx
new file mode 100644
index 0000000..f0fdbbb
--- /dev/null
+++ b/apps/host-solid/xgen/screens/SkinsScreen/NotfoundPage.tsx
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/skins.json
+// The notfound page of SkinsScreen.
+
+import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NotfoundPage() {
+  return (
+    <Block tag="section" aria-labelledby="page-title" data-testid="page">
+      <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+        <Stack gap="4" align="stretch">
+          <Title as={1} size="4xl" weight="bold" id="page-title">
+            {ui.site.notFound.title}
+          </Title>
+          <Group>
+            <Button variant="default" size="default" href="#/">
+              {ui.skins.back}
+            </Button>
+          </Group>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/SkinsScreen/ScreenHeader.tsx b/apps/host-solid/xgen/screens/SkinsScreen/ScreenHeader.tsx
new file mode 100644
index 0000000..a16d0f5
--- /dev/null
+++ b/apps/host-solid/xgen/screens/SkinsScreen/ScreenHeader.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/skins.json
+// The ScreenHeader part of SkinsScreen: its own file, so each file of the screen opens on one Block.
+
+import { Block, Button, Container, Link, LinkPlain, NavBlock } from "@ui8kit/solid-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+
+export function ScreenHeader() {
+  return (
+    <Block tag="header" class="border-b border-border">
+      <LinkPlain
+        href="#main-content"
+        class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+          "focus:px-4 focus:py-2 focus:text-sm focus:shadow"}
+        data-testid="skip-link"
+      >
+        {ui.site.header.skip}
+      </LinkPlain>
+      <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+        <Link href="#/" variant="default" class="text-lg font-bold" data-testid="brand">
+          {ui.skins.title}
+        </Link>
+        <NavBlock label={ui.skins.navLabel} class="flex flex-wrap items-center gap-4">
+          <Link href="/catalog/" variant="default" class="text-sm font-medium" data-testid="catalog-link">
+            {ui.catalog.title}
+          </Link>
+          <Link href="/blocks/" variant="default" class="text-sm font-medium" data-testid="gallery-link">
+            {ui.blocks.title}
+          </Link>
+          <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => actions.toggleTheme()}>
+            {ui.theme.toggle}
+          </Button>
+        </NavBlock>
+      </Container>
+    </Block>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen.tsx
new file mode 100644
index 0000000..c76832c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen.tsx
@@ -0,0 +1,116 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+/**
+ * Sign-in and account pages: split, centered and minimal sign-in, sign-up, reset, magic link, social first, the
+ * sign-up wizard, cards and the profile.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemeAccountPortalScreen/HomePage";
+import { StartPage } from "./ThemeAccountPortalScreen/StartPage";
+import { SignupPage } from "./ThemeAccountPortalScreen/SignupPage";
+import { WelcomePage } from "./ThemeAccountPortalScreen/WelcomePage";
+import { ResetPage } from "./ThemeAccountPortalScreen/ResetPage";
+import { MagicPage } from "./ThemeAccountPortalScreen/MagicPage";
+import { MinimalPage } from "./ThemeAccountPortalScreen/MinimalPage";
+import { OptionsPage } from "./ThemeAccountPortalScreen/OptionsPage";
+import { JoinPage } from "./ThemeAccountPortalScreen/JoinPage";
+import { CardsPage } from "./ThemeAccountPortalScreen/CardsPage";
+import { ProfilePage } from "./ThemeAccountPortalScreen/ProfilePage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeAccountPortalScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"start","area":"start"},
+  {"path":"signup","area":"signup"},
+  {"path":"welcome","area":"welcome"},
+  {"path":"reset","area":"reset"},
+  {"path":"magic","area":"magic"},
+  {"path":"minimal","area":"minimal"},
+  {"path":"options","area":"options"},
+  {"path":"join","area":"join"},
+  {"path":"cards","area":"cards"},
+  {"path":"profile","area":"profile"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeAccountPortalScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "start" ? (
+          <StartPage />
+        ) : route.area === "signup" ? (
+          <SignupPage />
+        ) : route.area === "welcome" ? (
+          <WelcomePage />
+        ) : route.area === "reset" ? (
+          <ResetPage />
+        ) : route.area === "magic" ? (
+          <MagicPage />
+        ) : route.area === "minimal" ? (
+          <MinimalPage />
+        ) : route.area === "options" ? (
+          <OptionsPage />
+        ) : route.area === "join" ? (
+          <JoinPage />
+        ) : route.area === "cards" ? (
+          <CardsPage />
+        ) : route.area === "profile" ? (
+          <ProfilePage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="row"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/CardsPage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/CardsPage.tsx
new file mode 100644
index 0000000..37780c6
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/CardsPage.tsx
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The cards page of ThemeAccountPortalScreen.
+
+import { AuthCard, PageIntro, tpl, uniqLabel } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function CardsPage() {
+  return (
+    <>
+      <PageIntro
+        id="cards-pagehead"
+        title={ui.pages.accountPortal.cards.title}
+        text={ui.pages.accountPortal.cards.text}
+        cta={ui.pages.accountPortal.cards.cta}
+        href="#/profile"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <AuthCard
+        id="cards-auth-1"
+        title={ui.auth.signin.title}
+        text={ui.auth.signin.text}
+        submit={ui.auth.signin.submit}
+        switchText={ui.auth.signin.switchText}
+        switchLink={ui.auth.signin.switchLink}
+        switchHref="#/"
+        labels={ui.auth.labels}
+        mode="signin"
+        layout="card"
+        social="none"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))}
+      />
+      <AuthCard
+        id="cards-auth-2"
+        title={ui.auth.signin.title}
+        text={ui.auth.signin.text}
+        submit={ui.auth.signin.submit}
+        switchText={ui.auth.signin.switchText}
+        switchLink={ui.auth.signin.switchLink}
+        switchHref="#/"
+        labels={ui.auth.labels}
+        mode="signin"
+        layout="card"
+        social="show"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))}
+      />
+      <AuthCard
+        id="cards-auth-3"
+        title={ui.auth.signup.title}
+        text={ui.auth.signup.text}
+        submit={ui.auth.signup.submit}
+        switchText={ui.auth.signup.switchText}
+        switchLink={ui.auth.signup.switchLink}
+        switchHref="#/"
+        labels={ui.auth.labels}
+        mode="signup"
+        layout="plain"
+        social="show"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/HomePage.tsx
new file mode 100644
index 0000000..3575bd5
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/HomePage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The home page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function HomePage() {
+  return (
+    <AuthLayout
+      id="home-authpage"
+      title={ui.pages.accountPortal.home.title}
+      text={ui.pages.accountPortal.home.text}
+      submit={ui.pages.accountPortal.home.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="split"
+      side="end"
+      mode="signin"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/JoinPage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/JoinPage.tsx
new file mode 100644
index 0000000..24e84af
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/JoinPage.tsx
@@ -0,0 +1,57 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The join page of ThemeAccountPortalScreen.
+
+import { PageIntro, SignupWizard, tpl, uniqLabel, type WizardStep } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+const WIZARD_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "icon": "metadata.icon.value",
+  "fieldA": "metadata.fieldA.value",
+  "fieldB": "metadata.fieldB.value",
+} as const;
+
+const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+
+export function JoinPage() {
+  return (
+    <>
+      <PageIntro
+        id="join-pagehead"
+        title={ui.pages.accountPortal.join.title}
+        text={ui.pages.accountPortal.join.text}
+        cta={ui.pages.accountPortal.join.cta}
+        href="#/cards"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <SignupWizard
+        id="join-wizard-1"
+        title={ui.vibe.wizard.title}
+        steps={wizard}
+        labels={ui.vibe.wizard.labels}
+        current={1}
+        progress="bar"
+        layout="card"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))}
+      />
+      <SignupWizard
+        id="join-wizard-2"
+        title={ui.vibe.wizard.title}
+        steps={wizard}
+        labels={ui.vibe.wizard.labels}
+        current={1}
+        progress="list"
+        layout="card"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/MagicPage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/MagicPage.tsx
new file mode 100644
index 0000000..789c8f7
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/MagicPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The magic page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function MagicPage() {
+  return (
+    <AuthLayout
+      id="magic-authpage"
+      title={ui.pages.accountPortal.magic.title}
+      text={ui.pages.accountPortal.magic.text}
+      submit={ui.pages.accountPortal.magic.cta}
+      switchTo={{ text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="minimal"
+      side="end"
+      mode="magic"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/MinimalPage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/MinimalPage.tsx
new file mode 100644
index 0000000..504a431
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/MinimalPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The minimal page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function MinimalPage() {
+  return (
+    <AuthLayout
+      id="minimal-authpage"
+      title={ui.pages.accountPortal.minimal.title}
+      text={ui.pages.accountPortal.minimal.text}
+      submit={ui.pages.accountPortal.minimal.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="minimal"
+      side="end"
+      mode="signin"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/OptionsPage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/OptionsPage.tsx
new file mode 100644
index 0000000..5c36757
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/OptionsPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The options page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function OptionsPage() {
+  return (
+    <AuthLayout
+      id="options-authpage"
+      title={ui.pages.accountPortal.options.title}
+      text={ui.pages.accountPortal.options.text}
+      submit={ui.pages.accountPortal.options.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="split"
+      side="end"
+      mode="signin"
+      social="show"
+    />
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/ProfilePage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/ProfilePage.tsx
new file mode 100644
index 0000000..09c9662
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/ProfilePage.tsx
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The profile page of ThemeAccountPortalScreen.
+
+import { PageIntro, ProfileForm, tpl, uniqLabel } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function ProfilePage() {
+  return (
+    <>
+      <PageIntro
+        id="profile-pagehead"
+        title={ui.pages.accountPortal.profile.title}
+        text={ui.pages.accountPortal.profile.text}
+        cta={ui.pages.accountPortal.profile.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <ProfileForm
+        id="profile-profile-1"
+        title={ui.account.profile.title}
+        text={ui.account.profile.text}
+        labels={ui.account.profile.labels}
+        layout="split"
+        avatar="show"
+        prefs="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))}
+      />
+      <ProfileForm
+        id="profile-profile-2"
+        title={ui.account.profile.title}
+        text={ui.account.profile.text}
+        labels={ui.account.profile.labels}
+        layout="stacked"
+        avatar="show"
+        prefs="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/ResetPage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/ResetPage.tsx
new file mode 100644
index 0000000..dfcfcbe
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/ResetPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The reset page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function ResetPage() {
+  return (
+    <AuthLayout
+      id="reset-authpage"
+      title={ui.pages.accountPortal.reset.title}
+      text={ui.pages.accountPortal.reset.text}
+      submit={ui.pages.accountPortal.reset.cta}
+      switchTo={{ text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="centered"
+      side="end"
+      mode="reset"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/SignupPage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/SignupPage.tsx
new file mode 100644
index 0000000..36ce1c5
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/SignupPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The signup page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function SignupPage() {
+  return (
+    <AuthLayout
+      id="signup-authpage"
+      title={ui.pages.accountPortal.signup.title}
+      text={ui.pages.accountPortal.signup.text}
+      submit={ui.pages.accountPortal.signup.cta}
+      switchTo={{ text: ui.auth.signup.switchText, link: ui.auth.signup.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="split"
+      side="end"
+      mode="signup"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/StartPage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/StartPage.tsx
new file mode 100644
index 0000000..20bb651
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/StartPage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The start page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function StartPage() {
+  return (
+    <AuthLayout
+      id="start-authpage"
+      title={ui.pages.accountPortal.start.title}
+      text={ui.pages.accountPortal.start.text}
+      submit={ui.pages.accountPortal.start.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="split"
+      side="start"
+      mode="signin"
+      social="none"
+    />
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/WelcomePage.tsx b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/WelcomePage.tsx
new file mode 100644
index 0000000..807ffb7
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeAccountPortalScreen/WelcomePage.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The welcome page of ThemeAccountPortalScreen.
+
+import { AuthLayout } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function WelcomePage() {
+  return (
+    <AuthLayout
+      id="welcome-authpage"
+      title={ui.pages.accountPortal.welcome.title}
+      text={ui.pages.accountPortal.welcome.text}
+      submit={ui.pages.accountPortal.welcome.cta}
+      switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+      labels={ui.auth.labels}
+      visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+      layout="centered"
+      side="end"
+      mode="signin"
+      social="first"
+    />
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen.tsx
new file mode 100644
index 0000000..05e3979
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen.tsx
@@ -0,0 +1,108 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+/**
+ * A shop: home with categories and products, the catalog, offers, a product page with details and reviews, the
+ * cart, the checkout, delivery and pickup, and the orders.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemeCommerceShopScreen/HomePage";
+import { CatalogPage } from "./ThemeCommerceShopScreen/CatalogPage";
+import { BrowsePage } from "./ThemeCommerceShopScreen/BrowsePage";
+import { OffersPage } from "./ThemeCommerceShopScreen/OffersPage";
+import { ProductPage } from "./ThemeCommerceShopScreen/ProductPage";
+import { CartPage } from "./ThemeCommerceShopScreen/CartPage";
+import { CheckoutPage } from "./ThemeCommerceShopScreen/CheckoutPage";
+import { DeliveryPage } from "./ThemeCommerceShopScreen/DeliveryPage";
+import { OrdersPage } from "./ThemeCommerceShopScreen/OrdersPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeCommerceShopScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"catalog","area":"catalog"},
+  {"path":"browse","area":"browse"},
+  {"path":"offers","area":"offers"},
+  {"path":"product","area":"product"},
+  {"path":"cart","area":"cart"},
+  {"path":"checkout","area":"checkout"},
+  {"path":"delivery","area":"delivery"},
+  {"path":"orders","area":"orders"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeCommerceShopScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "catalog" ? (
+          <CatalogPage />
+        ) : route.area === "browse" ? (
+          <BrowsePage />
+        ) : route.area === "offers" ? (
+          <OffersPage />
+        ) : route.area === "product" ? (
+          <ProductPage />
+        ) : route.area === "cart" ? (
+          <CartPage />
+        ) : route.area === "checkout" ? (
+          <CheckoutPage />
+        ) : route.area === "delivery" ? (
+          <DeliveryPage />
+        ) : route.area === "orders" ? (
+          <OrdersPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/BrowsePage.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/BrowsePage.tsx
new file mode 100644
index 0000000..15d4904
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/BrowsePage.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The browse page of ThemeCommerceShopScreen.
+
+import {
+  CategoryNav,
+  PageIntro,
+  ProductGrid,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Product,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+
+export function BrowsePage() {
+  return (
+    <>
+      <PageIntro
+        id="browse-pagehead"
+        title={ui.pages.commerceShop.browse.title}
+        text={ui.pages.commerceShop.browse.text}
+        cta={ui.pages.commerceShop.browse.cta}
+        href="#/offers"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <CategoryNav
+        label={ui.commerce.nav.label}
+        categories={categories}
+        current="category-all"
+        tools={ui.commerce.tools}
+        layout="bar"
+        count="show"
+        icon="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))}
+      />
+      <ProductGrid
+        id="browse-products-2"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-3"
+        ratio="4/3"
+        rating="show"
+        action="none"
+        tone="muted"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))}
+      />
+      <ProductGrid
+        id="browse-products-3"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-3"
+        ratio="3/4"
+        rating="show"
+        action="button"
+        tone="default"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))}
+      />
+      <ProductGrid
+        id="browse-products-4"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="list"
+        cols="1-3"
+        ratio="4/3"
+        rating="show"
+        action="button"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/CartPage.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/CartPage.tsx
new file mode 100644
index 0000000..75e7f1f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/CartPage.tsx
@@ -0,0 +1,99 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The cart page of ThemeCommerceShopScreen.
+
+import {
+  CartList,
+  OrderSummary,
+  PageIntro,
+  ShoppingCart,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+
+export function CartPage() {
+  return (
+    <>
+      <PageIntro
+        id="cart-pagehead"
+        title={ui.pages.commerceShop.cart.title}
+        text={ui.pages.commerceShop.cart.text}
+        cta={ui.pages.commerceShop.cart.cta}
+        href="#/checkout"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <ShoppingCart
+        id="cart-cartpage"
+        title={ui.commerce.cartPage.title}
+        lines={cart}
+        rows={summary}
+        promos={promos}
+        labels={ui.commerce.cart}
+        totals={ui.commerce.totals}
+        actions={ui.commerce.cartPage}
+        layout="split"
+        promo="show"
+        progress="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))}
+      />
+      <CartList
+        id="cart-cart"
+        title={ui.commerce.cart.title}
+        lines={cart}
+        empty={ui.empty.cart}
+        labels={ui.commerce.cart}
+        layout="table"
+        media="image"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))}
+      />
+      <OrderSummary
+        id="cart-summary"
+        title={ui.commerce.summary.title}
+        rows={summary}
+        empty={ui.empty.summary}
+        labels={ui.commerce.summary}
+        layout="card"
+        cta="show"
+        note="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/CatalogPage.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/CatalogPage.tsx
new file mode 100644
index 0000000..2e20b6d
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/CatalogPage.tsx
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The catalog page of ThemeCommerceShopScreen.
+
+import {
+  CategoryNav,
+  PageTrail,
+  ProductGrid,
+  tpl,
+  uniqLabel,
+  type Category,
+  type NavLink,
+  type Product,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+
+export function CatalogPage() {
+  return (
+    <>
+      <PageTrail
+        id="catalog-pagetrail"
+        title={ui.marketing.pageTrail.title}
+        lead={ui.marketing.pageTrail.lead}
+        badge={ui.marketing.pageTrail.badge}
+        label={ui.marketing.pageTrail.label}
+        crumbs={crumbs}
+        extras={{
+          value: ui.marketing.pageTrail.value,
+          caption: ui.marketing.pageTrail.caption,
+          note: ui.marketing.pageTrail.note,
+          icon: "package",
+          facts: stats,
+        }}
+        aside="figure"
+        tone="default"
+      />
+      <CategoryNav
+        label={ui.commerce.nav.label}
+        categories={categories}
+        current="category-all"
+        tools={ui.commerce.tools}
+        layout="sidebar"
+        count="show"
+        icon="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))}
+      />
+      <ProductGrid
+        id="catalog-products"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-4"
+        ratio="1/1"
+        rating="hide"
+        action="button"
+        tone="default"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.tsx
new file mode 100644
index 0000000..4898a28
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.tsx
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The checkout page of ThemeCommerceShopScreen.
+
+import {
+  CheckoutForm,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Day,
+  type Payment,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+
+export function CheckoutPage() {
+  return (
+    <>
+      <PageIntro
+        id="checkout-pagehead"
+        title={ui.pages.commerceShop.checkout.title}
+        text={ui.pages.commerceShop.checkout.text}
+        cta={ui.pages.commerceShop.checkout.cta}
+        href="#/delivery"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <CheckoutForm
+        id="checkout-checkout"
+        title={ui.commerce.checkout.title}
+        days={days}
+        payments={payments}
+        lines={cart}
+        rows={summary}
+        promos={promos}
+        labels={ui.commerce.checkout}
+        totals={ui.commerce.totals}
+        layout="numbered"
+        summary="aside"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.tsx
new file mode 100644
index 0000000..a0d8d37
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.tsx
@@ -0,0 +1,119 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The delivery page of ThemeCommerceShopScreen.
+
+import {
+  DeliveryInfo,
+  PageIntro,
+  SlotBoard,
+  StoreLocations,
+  ZoneTable,
+  tpl,
+  uniqLabel,
+  type Day,
+  type Feature,
+  type Store,
+  type Zone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+
+export function DeliveryPage() {
+  return (
+    <>
+      <PageIntro
+        id="delivery-pagehead"
+        title={ui.pages.commerceShop.delivery.title}
+        text={ui.pages.commerceShop.delivery.text}
+        cta={ui.pages.commerceShop.delivery.cta}
+        href="#/orders"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <DeliveryInfo
+        id="delivery-delivery"
+        title={ui.commerce.delivery.title}
+        lead={ui.commerce.delivery.lead}
+        facts={deliveryfacts}
+        zones={zones}
+        labels={ui.commerce.delivery}
+        layout="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))}
+      />
+      <ZoneTable
+        id="delivery-zones"
+        title={ui.commerce.zones.title}
+        lead={ui.commerce.zones.lead}
+        zones={zones}
+        empty={ui.empty.zones}
+        labels={ui.commerce.zones}
+        layout="table"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))}
+      />
+      <SlotBoard
+        id="delivery-slots"
+        title={ui.commerce.slots.title}
+        lead={ui.commerce.slots.lead}
+        days={days}
+        empty={ui.empty.days}
+        zone={zones.find((i) => i.id === "zone-central")!}
+        labels={ui.commerce.slots}
+        layout="split"
+        item="card"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))}
+      />
+      <StoreLocations
+        id="delivery-locations"
+        title={ui.commerce.stores.title}
+        lead={ui.commerce.stores.lead}
+        stores={stores}
+        empty={ui.empty.stores}
+        kinds={ui.commerce.stores.kinds}
+        labels={ui.commerce.stores}
+        layout="cards"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/HomePage.tsx
new file mode 100644
index 0000000..333afcd
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/HomePage.tsx
@@ -0,0 +1,157 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The home page of ThemeCommerceShopScreen.
+
+import {
+  CategoryNav,
+  CtaBand,
+  HeroClassic,
+  NewsletterForm,
+  ProductGrid,
+  ReviewList,
+  tpl,
+  uniqLabel,
+  type Category,
+  type CodeLine,
+  type Product,
+  type Review,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <HeroClassic
+        id="home-hero"
+        title={ui.pages.commerceShop.home.title}
+        text={ui.pages.commerceShop.home.text}
+        actions={{
+          cta: ui.pages.commerceShop.home.cta,
+          href: "#/catalog",
+          secondary: ui.cases.shop.hero.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "image",
+          side: "start",
+        }}
+        layout="split"
+        scale="default"
+        tone="muted"
+        density="roomy"
+      />
+      <CategoryNav
+        label={ui.commerce.nav.label}
+        categories={categories}
+        current="category-all"
+        tools={ui.commerce.tools}
+        layout="chips"
+        count="show"
+        icon="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))}
+      />
+      <ProductGrid
+        id="home-products"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-4"
+        ratio="1/1"
+        rating="show"
+        action="button"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+      />
+      <ReviewList
+        id="home-reviews"
+        title={ui.commerce.reviews.title}
+        reviews={reviews}
+        labels={ui.commerce.reviewLabels}
+        layout="grid"
+        item="card"
+        avatar="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))}
+      />
+      <NewsletterForm
+        id="home-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="stacked"
+        terms="hide"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+      />
+      <CtaBand
+        id="home-cta"
+        title={ui.cases.shop.cta.title}
+        text={ui.cases.shop.cta.text}
+        actions={{
+          cta: ui.cases.shop.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.shop.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="split"
+        tone="default"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/OffersPage.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/OffersPage.tsx
new file mode 100644
index 0000000..f8f1605
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/OffersPage.tsx
@@ -0,0 +1,119 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The offers page of ThemeCommerceShopScreen.
+
+import {
+  CartDrawer,
+  ProductGrid,
+  StoreHero,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Feature,
+  type Product,
+  type SummaryRow,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+
+export function OffersPage() {
+  return (
+    <>
+      <StoreHero
+        id="offers-storehero"
+        title={ui.commerce.storeHero.title}
+        lead={ui.commerce.storeHero.lead}
+        badge={ui.commerce.storeHero.badge}
+        perks={perks}
+        card={ui.commerce.storeHero.card}
+        actions={{
+          mode: "two",
+          cta: ui.commerce.storeHero.cta,
+          href: "#/catalog",
+          secondary: ui.commerce.storeHero.secondary,
+          secondaryHref: "#/delivery",
+        }}
+        layout="overlay"
+        mediaSide="end"
+        tone="default"
+      />
+      <UspStrip
+        id="offers-usp"
+        perks={perks}
+        empty={ui.empty.perks}
+        layout="strip"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))}
+      />
+      <ProductGrid
+        id="offers-products"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="rail"
+        cols="1-3"
+        ratio="1/1"
+        rating="hide"
+        action="button"
+        tone="default"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))}
+      />
+      <CartDrawer
+        id="offers-cartdrawer"
+        lines={cart}
+        rows={summary}
+        labels={ui.commerce.cart}
+        drawer={ui.commerce.drawer}
+        state="filled"
+        media="image"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/OrdersPage.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/OrdersPage.tsx
new file mode 100644
index 0000000..1b9f7b4
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/OrdersPage.tsx
@@ -0,0 +1,64 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The orders page of ThemeCommerceShopScreen.
+
+import { OrderTable, PageIntro, tpl, uniqLabel, type Order } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+const ORDERS_FIELDS = {
+  "id": "id",
+  "number": "title",
+  "date": "metadata.date.value|date",
+  "total": "metadata.total.value",
+  "currency": "metadata.currency.value",
+  "status": "metadata.order_status.value",
+  "items": "metadata.items.value",
+} as const;
+
+const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+
+export function OrdersPage() {
+  return (
+    <>
+      <PageIntro
+        id="orders-pagehead"
+        title={ui.pages.commerceShop.orders.title}
+        text={ui.pages.commerceShop.orders.text}
+        cta={ui.pages.commerceShop.orders.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <OrderTable
+        id="orders-orders-1"
+        title={ui.commerce.orders.title}
+        orders={orders}
+        empty={ui.empty.orders}
+        statuses={ui.status}
+        labels={ui.commerce.orders}
+        layout="table"
+        pager="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))}
+      />
+      <OrderTable
+        id="orders-orders-2"
+        title={ui.commerce.orders.title}
+        orders={orders}
+        empty={ui.empty.orders}
+        statuses={ui.status}
+        labels={ui.commerce.orders}
+        layout="cards"
+        pager="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/ProductPage.tsx b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/ProductPage.tsx
new file mode 100644
index 0000000..c9be001
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeCommerceShopScreen/ProductPage.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The product page of ThemeCommerceShopScreen.
+
+import {
+  ProductDetail,
+  ProductGrid,
+  ProductInfo,
+  ReviewList,
+  tpl,
+  uniqLabel,
+  type Detail,
+  type Product,
+  type Review,
+  type Spec,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+
+export function ProductPage() {
+  return (
+    <>
+      <ProductDetail
+        id="product-product"
+        product={products.find((i) => i.id === "product-lamp")!}
+        labels={ui.commerce.detail}
+        badges={ui.commerce.badges}
+        layout="split"
+        mediaSide="start"
+        thumbs="below"
+        buy="full"
+        tone="default"
+        density="default"
+      />
+      <ProductInfo
+        id="product-productinfo"
+        title={ui.commerce.info.title}
+        details={details}
+        specs={specs}
+        labels={ui.commerce.info}
+        layout="split"
+        expand="first"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))}
+      />
+      <ReviewList
+        id="product-reviews"
+        title={ui.commerce.reviews.title}
+        reviews={reviews}
+        labels={ui.commerce.reviewLabels}
+        layout="list"
+        item="card"
+        avatar="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))}
+      />
+      <ProductGrid
+        id="product-products"
+        title={ui.commerce.products.title}
+        products={products}
+        labels={ui.commerce.productLabels}
+        badges={ui.commerce.badges}
+        layout="grid"
+        cols="1-3"
+        ratio="4/3"
+        rating="show"
+        action="button"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeContentBlogScreen.tsx b/apps/host-solid/xgen/screens/ThemeContentBlogScreen.tsx
new file mode 100644
index 0000000..35b295e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeContentBlogScreen.tsx
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+/**
+ * A blog: a magazine front page, filtered and plain lists, and articles with a table of contents, a single
+ * column or no cover.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemeContentBlogScreen/HomePage";
+import { ArticlesPage } from "./ThemeContentBlogScreen/ArticlesPage";
+import { ArchivePage } from "./ThemeContentBlogScreen/ArchivePage";
+import { PostPage } from "./ThemeContentBlogScreen/PostPage";
+import { StoryPage } from "./ThemeContentBlogScreen/StoryPage";
+import { EssayPage } from "./ThemeContentBlogScreen/EssayPage";
+import { PlainPage } from "./ThemeContentBlogScreen/PlainPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeContentBlogScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"articles","area":"articles"},
+  {"path":"archive","area":"archive"},
+  {"path":"post","area":"post"},
+  {"path":"story","area":"story"},
+  {"path":"essay","area":"essay"},
+  {"path":"plain","area":"plain"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeContentBlogScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "articles" ? (
+          <ArticlesPage />
+        ) : route.area === "archive" ? (
+          <ArchivePage />
+        ) : route.area === "post" ? (
+          <PostPage />
+        ) : route.area === "story" ? (
+          <StoryPage />
+        ) : route.area === "essay" ? (
+          <EssayPage />
+        ) : route.area === "plain" ? (
+          <PlainPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="compact"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeContentBlogScreen/ArchivePage.tsx b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/ArchivePage.tsx
new file mode 100644
index 0000000..8658ff8
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/ArchivePage.tsx
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The archive page of ThemeContentBlogScreen.
+
+import { PageIntro, PostGrid, tpl, uniqLabel, type Post, type PostTopic } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+export function ArchivePage() {
+  return (
+    <>
+      <PageIntro
+        id="archive-pagehead"
+        title={ui.pages.contentBlog.archive.title}
+        text={ui.pages.contentBlog.archive.text}
+        cta={ui.pages.contentBlog.archive.cta}
+        href="#/post"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <PostGrid
+        id="archive-posts-1"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="list"
+        cols="1-3"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))}
+      />
+      <PostGrid
+        id="archive-posts-2"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        media="none"
+        meta="short"
+        tone="muted"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))}
+      />
+      <PostGrid
+        id="archive-posts-3"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        media="none"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeContentBlogScreen/ArticlesPage.tsx b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/ArticlesPage.tsx
new file mode 100644
index 0000000..a7843ac
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/ArticlesPage.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The articles page of ThemeContentBlogScreen.
+
+import { PageIntro, PostGrid, tpl, uniqLabel, type Post, type PostTopic } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+export function ArticlesPage() {
+  return (
+    <>
+      <PageIntro
+        id="articles-pagehead"
+        title={ui.pages.contentBlog.articles.title}
+        text={ui.pages.contentBlog.articles.text}
+        cta={ui.pages.contentBlog.articles.cta}
+        href="#/archive"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <PostGrid
+        id="articles-posts-1"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "Design", mode: "topics" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))}
+      />
+      <PostGrid
+        id="articles-posts-2"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-2"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeContentBlogScreen/EssayPage.tsx b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/EssayPage.tsx
new file mode 100644
index 0000000..0805081
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/EssayPage.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The essay page of ThemeContentBlogScreen.
+
+import {
+  ArticleBody,
+  NewsletterForm,
+  PostHeader,
+  tpl,
+  uniqLabel,
+  type Post,
+  type Section,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function EssayPage() {
+  return (
+    <>
+      <PostHeader
+        id="essay-postheader"
+        post={posts.find((i) => i.id === "post-static-first")!}
+        labels={ui.content.labels}
+        layout="center"
+        cover="show"
+        meta="full"
+        tone="default"
+      />
+      <ArticleBody
+        id="essay-article"
+        title={ui.vibe.article.title}
+        sections={article}
+        empty={ui.empty.sections}
+        tocTitle={ui.vibe.article.toc}
+        layout="column"
+        quotes="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+      />
+      <NewsletterForm
+        id="essay-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="inline"
+        terms="hide"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeContentBlogScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/HomePage.tsx
new file mode 100644
index 0000000..7a68ce0
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/HomePage.tsx
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The home page of ThemeContentBlogScreen.
+
+import {
+  NewsletterForm,
+  PageIntro,
+  PostGrid,
+  PostShowcase,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.contentBlog.home.title}
+        text={ui.pages.contentBlog.home.text}
+        cta={ui.pages.contentBlog.home.cta}
+        href="#/articles"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <PostGrid
+        id="home-posts"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="magazine"
+        cols="1-3"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))}
+      />
+      <PostShowcase
+        id="home-postshowcase"
+        title={ui.content.postShowcase.title}
+        lead={ui.content.postShowcase.lead}
+        badge={ui.content.postShowcase.badge}
+        posts={posts}
+        empty={ui.empty.posts}
+        labels={ui.content.labels}
+        action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+        layout="intro"
+        cols="3"
+        mediaSide="start"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))}
+      />
+      <NewsletterForm
+        id="home-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="stacked"
+        terms="hide"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeContentBlogScreen/PlainPage.tsx b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/PlainPage.tsx
new file mode 100644
index 0000000..ef90f39
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/PlainPage.tsx
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The plain page of ThemeContentBlogScreen.
+
+import {
+  ArticleBody,
+  PostGrid,
+  PostHeader,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+  type Section,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function PlainPage() {
+  return (
+    <>
+      <PostHeader
+        id="plain-postheader"
+        post={posts.find((i) => i.id === "post-static-first")!}
+        labels={ui.content.labels}
+        layout="start"
+        cover="hide"
+        meta="full"
+        tone="default"
+      />
+      <ArticleBody
+        id="plain-article"
+        title={ui.vibe.article.title}
+        sections={article}
+        empty={ui.empty.sections}
+        tocTitle={ui.vibe.article.toc}
+        layout="column"
+        quotes="hide"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))}
+      />
+      <PostGrid
+        id="plain-posts"
+        title={ui.content.posts.title}
+        posts={posts}
+        labels={ui.content.labels}
+        filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+        action={{ label: ui.content.posts.action, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        media="image"
+        meta="full"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeContentBlogScreen/PostPage.tsx b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/PostPage.tsx
new file mode 100644
index 0000000..5d30a8a
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/PostPage.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The post page of ThemeContentBlogScreen.
+
+import { ArticleBody, PostHeader, tpl, uniqLabel, type Post, type Section } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+
+export function PostPage() {
+  return (
+    <>
+      <PostHeader
+        id="post-postheader"
+        post={posts.find((i) => i.id === "post-static-first")!}
+        labels={ui.content.labels}
+        layout="start"
+        cover="show"
+        meta="full"
+        tone="default"
+      />
+      <ArticleBody
+        id="post-article"
+        title={ui.vibe.article.title}
+        sections={article}
+        empty={ui.empty.sections}
+        tocTitle={ui.vibe.article.toc}
+        layout="toc"
+        quotes="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeContentBlogScreen/StoryPage.tsx b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/StoryPage.tsx
new file mode 100644
index 0000000..6d5e53a
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeContentBlogScreen/StoryPage.tsx
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The story page of ThemeContentBlogScreen.
+
+import {
+  ArticleBody,
+  PostSplit,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Post,
+  type Section,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+export function StoryPage() {
+  return (
+    <>
+      <PostSplit
+        id="story-postsplit"
+        post={posts.find((i) => i.id === "post-static-first")!}
+        labels={ui.content.postSplit.labels}
+        extras={{
+          role: ui.content.postSplit.role,
+          bio: ui.content.postSplit.bio,
+          views: ui.content.postSplit.views,
+          likes: ui.content.postSplit.likes,
+          tags: posttags,
+          outline,
+        }}
+        layout="split"
+        mediaSide="end"
+        author="card"
+        cover="wide"
+        actions="pair"
+        tone="muted"
+      />
+      <ArticleBody
+        id="story-article"
+        title={ui.vibe.article.title}
+        sections={article}
+        empty={ui.empty.sections}
+        tocTitle={ui.vibe.article.toc}
+        layout="column"
+        quotes="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen.tsx b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen.tsx
new file mode 100644
index 0000000..e266629
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen.tsx
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+/**
+ * A console: overview with counters, chart and activity, a kanban board, app shells with sidebar, top bar and
+ * panes, dashboard shells, navigation, and empty and loading states.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemeDashboardConsoleScreen/HomePage";
+import { BoardPage } from "./ThemeDashboardConsoleScreen/BoardPage";
+import { WorkspacePage } from "./ThemeDashboardConsoleScreen/WorkspacePage";
+import { ShellsPage } from "./ThemeDashboardConsoleScreen/ShellsPage";
+import { LayoutsPage } from "./ThemeDashboardConsoleScreen/LayoutsPage";
+import { StatesPage } from "./ThemeDashboardConsoleScreen/StatesPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeDashboardConsoleScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"board","area":"board"},
+  {"path":"workspace","area":"workspace"},
+  {"path":"shells","area":"shells"},
+  {"path":"layouts","area":"layouts"},
+  {"path":"states","area":"states"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeDashboardConsoleScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "board" ? (
+          <BoardPage />
+        ) : route.area === "workspace" ? (
+          <WorkspacePage />
+        ) : route.area === "shells" ? (
+          <ShellsPage />
+        ) : route.area === "layouts" ? (
+          <LayoutsPage />
+        ) : route.area === "states" ? (
+          <StatesPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="compact"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.tsx b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.tsx
new file mode 100644
index 0000000..87a848b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The board page of ThemeDashboardConsoleScreen.
+
+import { KanbanBoard, PageIntro, tpl, uniqLabel, type BoardCard, type Lane } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+
+export function BoardPage() {
+  return (
+    <>
+      <PageIntro
+        id="board-pagehead"
+        title={ui.pages.dashboardConsole.board.title}
+        text={ui.pages.dashboardConsole.board.text}
+        cta={ui.pages.dashboardConsole.board.cta}
+        href="#/workspace"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <KanbanBoard
+        id="board-kanban-1"
+        title={ui.vibe.kanban.title}
+        lanes={lanes}
+        empty={ui.empty.lanes}
+        cards={cards}
+        countLabel={ui.vibe.kanban.count}
+        card="detail"
+        cols="3"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))}
+      />
+      <KanbanBoard
+        id="board-kanban-2"
+        title={ui.vibe.kanban.title}
+        lanes={lanes}
+        empty={ui.empty.lanes}
+        cards={cards}
+        countLabel={ui.vibe.kanban.count}
+        card="detail"
+        cols="2"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/HomePage.tsx
new file mode 100644
index 0000000..2575760
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/HomePage.tsx
@@ -0,0 +1,115 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The home page of ThemeDashboardConsoleScreen.
+
+import {
+  ActivityFeed,
+  ChartPanel,
+  DashboardOverview,
+  MetricRow,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type Event,
+  type Point,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.dashboardConsole.home.title}
+        text={ui.pages.dashboardConsole.home.text}
+        cta={ui.pages.dashboardConsole.home.cta}
+        href="#/board"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <DashboardOverview
+        id="home-overview"
+        title={ui.vibe.overview.title}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="split"
+        cols="4"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))}
+      />
+      <MetricRow
+        id="home-metrics"
+        title={ui.dashboard.metrics.title}
+        metrics={metrics}
+        empty={ui.empty.metrics}
+        cols="4"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))}
+      />
+      <ChartPanel
+        id="home-chart"
+        title={ui.dashboard.chart.title}
+        text={ui.dashboard.chart.text}
+        series={series}
+        empty={ui.empty.series}
+        summary={ui.dashboard.chart.summary}
+        percent={ui.dashboard.chart.percent}
+        chart="bars"
+        size="default"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))}
+      />
+      <ActivityFeed
+        id="home-activity"
+        title={ui.dashboard.activity.title}
+        text={ui.dashboard.activity.text}
+        events={activity}
+        empty={ui.empty.activity}
+        layout="timeline"
+        density="default"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.tsx b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.tsx
new file mode 100644
index 0000000..69bce2c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.tsx
@@ -0,0 +1,145 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The layouts page of ThemeDashboardConsoleScreen.
+
+import {
+  BottomNav,
+  ChartPanel,
+  DashboardOverview,
+  MetricRow,
+  PageIntro,
+  SidebarNav,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+
+export function LayoutsPage() {
+  return (
+    <>
+      <PageIntro
+        id="layouts-pagehead"
+        title={ui.pages.dashboardConsole.layouts.title}
+        text={ui.pages.dashboardConsole.layouts.text}
+        cta={ui.pages.dashboardConsole.layouts.cta}
+        href="#/states"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <SidebarNav
+        label={ui.vibe.sidebar.label}
+        brand={ui.site.header.brand}
+        links={sidenav}
+        current="item-orders"
+        userName={ui.vibe.sidebar.userName}
+        userEmail={ui.vibe.sidebar.userEmail}
+        width="full"
+        user="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))}
+      />
+      <SidebarNav
+        label={ui.vibe.sidebar.label}
+        brand={ui.site.header.brand}
+        links={sidenav}
+        current="item-orders"
+        userName={ui.vibe.sidebar.userName}
+        userEmail={ui.vibe.sidebar.userEmail}
+        width="compact"
+        user="show"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))}
+      />
+      <BottomNav
+        label={ui.vibe.bottom.label}
+        tabs={tabs}
+        current="tab-explore"
+        labels="show"
+        position="static"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))}
+      />
+      <MetricRow
+        id="layouts-metrics"
+        title={ui.dashboard.metrics.title}
+        metrics={metrics}
+        empty={ui.empty.metrics}
+        cols="4"
+        item="compact"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))}
+      />
+      <ChartPanel
+        id="layouts-chart"
+        title={ui.dashboard.chart.title}
+        text={ui.dashboard.chart.text}
+        series={series}
+        empty={ui.empty.series}
+        summary={ui.dashboard.chart.summary}
+        percent={ui.dashboard.chart.percent}
+        chart="meters"
+        size="default"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))}
+      />
+      <DashboardOverview
+        id="layouts-overview"
+        title={ui.vibe.overview.title}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="stacked"
+        cols="4"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.tsx b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.tsx
new file mode 100644
index 0000000..0884a83
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.tsx
@@ -0,0 +1,117 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The shells page of ThemeDashboardConsoleScreen.
+
+import { DashboardShell, PageIntro, tpl, uniqLabel, type NavLink } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+export function ShellsPage() {
+  return (
+    <>
+      <PageIntro
+        id="shells-pagehead"
+        title={ui.pages.dashboardConsole.shells.title}
+        text={ui.pages.dashboardConsole.shells.text}
+        cta={ui.pages.dashboardConsole.shells.cta}
+        href="#/layouts"
+        align="start"
+        tone="muted"
+        density="compact"
+      />
+      <DashboardShell
+        id="shells-dashshell-1"
+        title={ui.dashboard.shells.title}
+        nav={{
+          label: ui.dashboard.shells.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-orders",
+          subTitle: ui.dashboard.shells.subTitle,
+          sub: subnav,
+          subCurrent: "subitem-all",
+          search: ui.dashboard.shells.search,
+          shortcut: ui.dashboard.shells.shortcut,
+          expand: ui.dashboard.shells.expand,
+          userName: ui.dashboard.shells.userName,
+          copyright: ui.dashboard.shells.copyright,
+          footerLabel: ui.dashboard.shells.footerLabel,
+          footer: helplinks,
+        }}
+        topbar="full"
+        search="show"
+        sidebar="wide"
+        side="start"
+        footer="none"
+        content="grid"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))}
+      />
+      <DashboardShell
+        id="shells-dashshell-2"
+        title={ui.dashboard.shells.title}
+        nav={{
+          label: ui.dashboard.shells.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-orders",
+          subTitle: ui.dashboard.shells.subTitle,
+          sub: subnav,
+          subCurrent: "subitem-all",
+          search: ui.dashboard.shells.search,
+          shortcut: ui.dashboard.shells.shortcut,
+          expand: ui.dashboard.shells.expand,
+          userName: ui.dashboard.shells.userName,
+          copyright: ui.dashboard.shells.copyright,
+          footerLabel: ui.dashboard.shells.footerLabel,
+          footer: helplinks,
+        }}
+        topbar="inset"
+        search="hide"
+        sidebar="twolevel"
+        side="start"
+        footer="inset"
+        content="list"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))}
+      />
+      <DashboardShell
+        id="shells-dashshell-3"
+        title={ui.dashboard.shells.title}
+        nav={{
+          label: ui.dashboard.shells.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-orders",
+          subTitle: ui.dashboard.shells.subTitle,
+          sub: subnav,
+          subCurrent: "subitem-all",
+          search: ui.dashboard.shells.search,
+          shortcut: ui.dashboard.shells.shortcut,
+          expand: ui.dashboard.shells.expand,
+          userName: ui.dashboard.shells.userName,
+          copyright: ui.dashboard.shells.copyright,
+          footerLabel: ui.dashboard.shells.footerLabel,
+          footer: helplinks,
+        }}
+        topbar="full"
+        search="show"
+        sidebar="wide"
+        side="end"
+        footer="full"
+        content="split"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.tsx b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.tsx
new file mode 100644
index 0000000..352bdc5
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.tsx
@@ -0,0 +1,73 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The states page of ThemeDashboardConsoleScreen.
+
+import { EmptyPanel, PageIntro, SkeletonLayout, tpl, uniqLabel, type Line } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+
+export function StatesPage() {
+  return (
+    <>
+      <PageIntro
+        id="states-pagehead"
+        title={ui.pages.dashboardConsole.states.title}
+        text={ui.pages.dashboardConsole.states.text}
+        cta={ui.pages.dashboardConsole.states.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <EmptyPanel
+        id="states-empty-1"
+        title={ui.dashboard.empty.tour.title}
+        text={ui.dashboard.empty.tour.text}
+        cta={ui.dashboard.empty.tour.cta}
+        ctaHref="#/"
+        layout="card"
+        actions="button"
+        visual="image"
+        size="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))}
+      />
+      <EmptyPanel
+        id="states-empty-2"
+        title={ui.dashboard.empty.orders.title}
+        text={ui.dashboard.empty.orders.text}
+        cta={ui.dashboard.empty.orders.cta}
+        ctaHref="#/"
+        layout="card"
+        actions="button"
+        visual="icon"
+        size="default"
+        icon="shopping-bag"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))}
+      />
+      <SkeletonLayout
+        id="states-skeleton-3"
+        title={ui.vibe.skeleton.title}
+        label={ui.vibe.skeleton.label}
+        lines={placeholders}
+        shape="cards"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))}
+      />
+      <SkeletonLayout
+        id="states-skeleton-4"
+        title={ui.vibe.skeleton.title}
+        label={ui.vibe.skeleton.label}
+        lines={placeholders}
+        shape="list"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.tsx b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.tsx
new file mode 100644
index 0000000..82b0394
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.tsx
@@ -0,0 +1,141 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The workspace page of ThemeDashboardConsoleScreen.
+
+import {
+  AppShell,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+
+export function WorkspacePage() {
+  return (
+    <>
+      <PageIntro
+        id="workspace-pagehead"
+        title={ui.pages.dashboardConsole.workspace.title}
+        text={ui.pages.dashboardConsole.workspace.text}
+        cta={ui.pages.dashboardConsole.workspace.cta}
+        href="#/shells"
+        align="start"
+        tone="muted"
+        density="compact"
+      />
+      <AppShell
+        id="workspace-shell-1"
+        title={ui.vibe.shell.title}
+        nav={{
+          label: ui.vibe.sidebar.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-overview",
+        }}
+        user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="sidebar"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))}
+      />
+      <AppShell
+        id="workspace-shell-2"
+        title={ui.vibe.shell.title}
+        nav={{
+          label: ui.vibe.sidebar.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-overview",
+        }}
+        user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="top"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))}
+      />
+      <AppShell
+        id="workspace-shell-3"
+        title={ui.vibe.shell.title}
+        nav={{
+          label: ui.vibe.sidebar.label,
+          brand: ui.site.header.brand,
+          links: sidenav,
+          current: "item-overview",
+        }}
+        user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        metrics={metrics}
+        chart={{
+          title: ui.dashboard.chart.title,
+          text: ui.dashboard.chart.text,
+          summary: ui.dashboard.chart.summary,
+          series,
+        }}
+        activity={{
+          title: ui.dashboard.activity.title,
+          text: ui.dashboard.activity.text,
+          events: activity,
+        }}
+        layout="panes"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen.tsx b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen.tsx
new file mode 100644
index 0000000..5119c57
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen.tsx
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+/**
+ * Landing pages of a product: five heroes (screenshot, form, code, display type, backdrop) each followed by
+ * proof, features and a call to action, then a company page, a portfolio and a page for teams built from the
+ * split blocks.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemeMarketingLandingScreen/HomePage";
+import { LaunchPage } from "./ThemeMarketingLandingScreen/LaunchPage";
+import { DevelopersPage } from "./ThemeMarketingLandingScreen/DevelopersPage";
+import { StudioPage } from "./ThemeMarketingLandingScreen/StudioPage";
+import { EventsPage } from "./ThemeMarketingLandingScreen/EventsPage";
+import { CompanyPage } from "./ThemeMarketingLandingScreen/CompanyPage";
+import { WorkPage } from "./ThemeMarketingLandingScreen/WorkPage";
+import { TeamsPage } from "./ThemeMarketingLandingScreen/TeamsPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingLandingScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"launch","area":"launch"},
+  {"path":"developers","area":"developers"},
+  {"path":"studio","area":"studio"},
+  {"path":"events","area":"events"},
+  {"path":"company","area":"company"},
+  {"path":"work","area":"work"},
+  {"path":"teams","area":"teams"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeMarketingLandingScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "launch" ? (
+          <LaunchPage />
+        ) : route.area === "developers" ? (
+          <DevelopersPage />
+        ) : route.area === "studio" ? (
+          <StudioPage />
+        ) : route.area === "events" ? (
+          <EventsPage />
+        ) : route.area === "company" ? (
+          <CompanyPage />
+        ) : route.area === "work" ? (
+          <WorkPage />
+        ) : route.area === "teams" ? (
+          <TeamsPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.tsx
new file mode 100644
index 0000000..b794693
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The company page of ThemeMarketingLandingScreen.
+
+import {
+  AboutCompany,
+  JobBoard,
+  MilestoneTimeline,
+  PageIntro,
+  StoryTabs,
+  TeamGrid,
+  tpl,
+  uniqLabel,
+  type Department,
+  type Feature,
+  type Job,
+  type Member,
+  type Milestone,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+
+export function CompanyPage() {
+  return (
+    <>
+      <PageIntro
+        id="company-pagehead"
+        title={ui.pages.marketingLanding.company.title}
+        text={ui.pages.marketingLanding.company.text}
+        cta={ui.pages.marketingLanding.company.cta}
+        href="#/work"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <AboutCompany
+        id="company-about"
+        title={ui.company.about.title}
+        lead={ui.company.about.lead}
+        stats={stats}
+        values={values}
+        layout="split"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))}
+      />
+      <StoryTabs
+        id="company-storytabs"
+        title={ui.company.storyTabs.title}
+        lead={ui.company.storyTabs.lead}
+        badge={ui.company.storyTabs.badge}
+        steps={milestones}
+        empty={ui.empty.milestones}
+        active="milestone-runtimes"
+        labels={ui.company.storyTabs.labels}
+        layout="years"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))}
+      />
+      <MilestoneTimeline
+        id="company-timeline"
+        title={ui.company.timeline.title}
+        lead={ui.company.timeline.lead}
+        milestones={milestones}
+        empty={ui.empty.milestones}
+        layout="split"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))}
+      />
+      <TeamGrid
+        id="company-team"
+        title={ui.company.team.title}
+        lead={ui.company.team.lead}
+        members={members}
+        empty={ui.empty.members}
+        depts={ui.company.depts}
+        layout="cards"
+        cols="1-4"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))}
+      />
+      <JobBoard
+        id="company-jobs"
+        title={ui.company.jobs.title}
+        lead={ui.company.jobs.lead}
+        jobs={jobs}
+        empty={ui.empty.jobs}
+        departments={departments}
+        labels={ui.company.jobs}
+        layout="grouped"
+        salary="hide"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.tsx
new file mode 100644
index 0000000..4907318
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.tsx
@@ -0,0 +1,154 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The developers page of ThemeMarketingLandingScreen.
+
+import {
+  BentoGrid,
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  HeroClassic,
+  TemplateGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Filter,
+  type Template,
+  type Tile,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+const TEMPLATES_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "views": "metadata.views.value|compact",
+  "likes": "metadata.likes.value|compact",
+  "topic": "metadata.topic.value",
+} as const;
+const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+
+export function DevelopersPage() {
+  return (
+    <>
+      <HeroClassic
+        id="developers-hero"
+        title={ui.pages.marketingLanding.developers.title}
+        text={ui.pages.marketingLanding.developers.text}
+        actions={{
+          cta: ui.pages.marketingLanding.developers.cta,
+          href: "#/studio",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "code",
+          side: "end",
+        }}
+        layout="split"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <BentoGrid
+        id="developers-bento"
+        title={ui.vibe.bento.title}
+        tiles={bento}
+        empty={ui.empty.tiles}
+        layout="bento"
+        media="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))}
+      />
+      <TemplateGrid
+        id="developers-templates"
+        title={ui.vibe.templates.title}
+        templates={templates}
+        filters={templateFilters}
+        labels={ui.vibe.templates}
+        browseHref="#/"
+        empty={ui.empty.templates}
+        cols="1-4"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))}
+      />
+      <FeatureGrid
+        id="developers-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="grid"
+        cols="1-4"
+        item="tile"
+        mediaSide="end"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+      />
+      <FaqList
+        id="developers-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "billing", mode: "categories" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+      />
+      <CtaBand
+        id="developers-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="split"
+        tone="default"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/EventsPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/EventsPage.tsx
new file mode 100644
index 0000000..aa2da4b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/EventsPage.tsx
@@ -0,0 +1,140 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The events page of ThemeMarketingLandingScreen.
+
+import {
+  CtaBand,
+  HeroClassic,
+  StatsBand,
+  TestimonialGrid,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Quote,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function EventsPage() {
+  return (
+    <>
+      <HeroClassic
+        id="events-hero"
+        title={ui.pages.marketingLanding.events.title}
+        text={ui.pages.marketingLanding.events.text}
+        actions={{
+          cta: ui.pages.marketingLanding.events.cta,
+          href: "#/company",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "backdrop",
+          side: "end",
+        }}
+        layout="centered"
+        scale="default"
+        tone="muted"
+        density="roomy"
+      />
+      <StatsBand
+        id="events-stats"
+        title={ui.marketing.stats.title}
+        stats={[stats?.[0], stats?.[1], stats?.[2]]}
+        empty={ui.marketing.stats.empty}
+        cols="3"
+        layout="row"
+        surface="none"
+        item="card"
+        align="center"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))}
+      />
+      <TestimonialGrid
+        id="events-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="strip"
+        cols="1-3"
+        item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))}
+      />
+      <VideoGrid
+        id="events-videos"
+        title={ui.vibe.videos.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        playLabel={ui.vibe.videos.play}
+        byLine={ui.testimonials.byLine}
+        cols="1-3"
+        caption="overlay"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))}
+      />
+      <CtaBand
+        id="events-cta"
+        title={ui.cases.agency.cta.title}
+        text={ui.cases.agency.cta.text}
+        actions={{
+          cta: ui.cases.agency.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.agency.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="card"
+        tone="muted"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/HomePage.tsx
new file mode 100644
index 0000000..8c3e07f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/HomePage.tsx
@@ -0,0 +1,201 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The home page of ThemeMarketingLandingScreen.
+
+import {
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  HeroClassic,
+  LogoCloud,
+  StatsBand,
+  StepsList,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Logo,
+  type Quote,
+  type Stat,
+  type Step,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <HeroClassic
+        id="home-hero"
+        title={ui.pages.marketingLanding.home.title}
+        text={ui.pages.marketingLanding.home.text}
+        actions={{
+          cta: ui.pages.marketingLanding.home.cta,
+          href: "#/launch",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "image",
+          side: "end",
+        }}
+        layout="centered"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <LogoCloud
+        id="home-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="row"
+        cols="4"
+        item="icon"
+        tone="default"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+      />
+      <FeatureGrid
+        id="home-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="rows"
+        cols="1-3"
+        item="card"
+        mediaSide="alternate"
+        tone="muted"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))}
+      />
+      <StepsList
+        id="home-steps"
+        title={ui.marketing.steps.title}
+        steps={steps}
+        empty={ui.empty.steps}
+        layout="row"
+        marker="icon"
+        align="start"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))}
+      />
+      <StatsBand
+        id="home-stats"
+        title={ui.marketing.stats.title}
+        stats={stats}
+        empty={ui.marketing.stats.empty}
+        cols="4"
+        layout="row"
+        surface="none"
+        item="icon"
+        align="start"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))}
+      />
+      <TestimonialGrid
+        id="home-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="single"
+        cols="1-3"
+        item={{ kind: "plain", avatar: "image", rating: "hide", mark: "none" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))}
+      />
+      <FaqList
+        id="home-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))}
+      />
+      <CtaBand
+        id="home-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.tsx
new file mode 100644
index 0000000..daf1861
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.tsx
@@ -0,0 +1,144 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The launch page of ThemeMarketingLandingScreen.
+
+import {
+  CtaBand,
+  HeroClassic,
+  IconWall,
+  ProofBand,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function LaunchPage() {
+  return (
+    <>
+      <HeroClassic
+        id="launch-hero"
+        title={ui.pages.marketingLanding.launch.title}
+        text={ui.pages.marketingLanding.launch.text}
+        actions={{
+          cta: ui.pages.marketingLanding.launch.cta,
+          href: "#/developers",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "form",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "none",
+          side: "end",
+        }}
+        layout="centered"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <IconWall
+        id="launch-iconwall"
+        title={ui.vibe.wall.title}
+        features={features}
+        empty={ui.empty.features}
+        cols="4"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))}
+      />
+      <ProofBand
+        id="launch-proof"
+        title={ui.vibe.proof.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        stats={stats}
+        layout="above"
+        logoStyle="name"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))}
+      />
+      <TestimonialGrid
+        id="launch-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="grid"
+        cols="1-3"
+        item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))}
+      />
+      <CtaBand
+        id="launch-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "form",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/StudioPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/StudioPage.tsx
new file mode 100644
index 0000000..04039c8
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/StudioPage.tsx
@@ -0,0 +1,137 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The studio page of ThemeMarketingLandingScreen.
+
+import {
+  CtaBand,
+  FeatureGrid,
+  HeroClassic,
+  LogoCloud,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+  type Logo,
+  type Quote,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function StudioPage() {
+  return (
+    <>
+      <HeroClassic
+        id="studio-hero"
+        title={ui.pages.marketingLanding.studio.title}
+        text={ui.pages.marketingLanding.studio.text}
+        actions={{
+          cta: ui.pages.marketingLanding.studio.cta,
+          href: "#/events",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "none",
+          side: "end",
+        }}
+        layout="centered"
+        scale="display"
+        tone="default"
+        density="roomy"
+      />
+      <LogoCloud
+        id="studio-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="grid"
+        cols="4"
+        item="name"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))}
+      />
+      <FeatureGrid
+        id="studio-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="grid"
+        cols="1-4"
+        item="tile"
+        mediaSide="end"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+      />
+      <TestimonialGrid
+        id="studio-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="masonry"
+        cols="1-3"
+        item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))}
+      />
+      <CtaBand
+        id="studio-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.tsx
new file mode 100644
index 0000000..5c4a8f1
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.tsx
@@ -0,0 +1,213 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The teams page of ThemeMarketingLandingScreen.
+
+import {
+  CtaProof,
+  FaqSplit,
+  HeroSplit,
+  LogoCloud,
+  QuoteSplit,
+  tpl,
+  uniqLabel,
+  type FaqTab,
+  type Feature,
+  type Logo,
+  type Plan,
+  type Question,
+  type Quote,
+  type Stat,
+  type Zone,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const QUESTIONS_FIELDS = {
+  "id": "id",
+  "question": "title",
+  "answer": "metadata.answer.value",
+  "category": "terms|term:faq_category",
+  "icon": "metadata.icon.value",
+} as const;
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+export function TeamsPage() {
+  return (
+    <>
+      <HeroSplit
+        id="teams-herosplit"
+        title={ui.marketing.heroSplit.title}
+        lead={ui.marketing.heroSplit.lead}
+        badge={ui.marketing.heroSplit.badge}
+        actions={{
+          mode: "two",
+          cta: ui.marketing.heroSplit.cta,
+          href: "#/pricing",
+          secondary: ui.marketing.heroSplit.secondary,
+          secondaryHref: "#/features",
+        }}
+        content={{
+          stats,
+          features,
+          people: testimonials,
+          plans: tiers,
+          proof: ui.marketing.heroSplit.proof,
+          card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+        }}
+        extra="quote"
+        media="card"
+        mediaSide="end"
+        tone="default"
+      />
+      <LogoCloud
+        id="teams-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="row"
+        cols="4"
+        item="icon"
+        tone="default"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+      />
+      <FaqSplit
+        id="teams-faqsplit"
+        title={ui.marketing.faqSplit.title}
+        lead={ui.marketing.faqSplit.lead}
+        badge={ui.marketing.faqSplit.badge}
+        items={questions}
+        channels={channels}
+        topics={faqtabs}
+        labels={{
+          cta: ui.marketing.faqSplit.cta,
+          more: ui.marketing.faqSplit.more,
+          asideTitle: ui.marketing.faqSplit.asideTitle,
+          asideText: ui.marketing.faqSplit.asideText,
+          asideCta: ui.marketing.faqSplit.asideCta,
+          search: ui.marketing.faqSplit.search,
+          popular: ui.marketing.faqSplit.popular,
+        }}
+        layout="aside"
+        cards="grid3"
+        mediaSide="end"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))}
+      />
+      <QuoteSplit
+        id="teams-quotesplit"
+        title={ui.marketing.quoteSplit.title}
+        lead={ui.marketing.quoteSplit.lead}
+        badge={ui.marketing.quoteSplit.badge}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        extras={{
+          stats,
+          logos,
+          rating: 5,
+          score: ui.marketing.quoteSplit.score,
+          reviews: ui.marketing.quoteSplit.reviews,
+        }}
+        actions={{
+          mode: "two",
+          cta: ui.marketing.quoteSplit.cta,
+          href: "#/customers",
+          secondary: ui.marketing.quoteSplit.secondary,
+          secondaryHref: "#/contact",
+        }}
+        layout="rating"
+        mediaSide="end"
+        tone="muted"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))}
+      />
+      <CtaProof
+        id="teams-ctaproof"
+        title={ui.marketing.ctaProof.title}
+        lead={ui.marketing.ctaProof.lead}
+        badge={ui.marketing.ctaProof.badge}
+        actions={{
+          mode: "two",
+          cta: ui.marketing.ctaProof.cta,
+          href: "#/pricing",
+          secondary: ui.marketing.ctaProof.secondary,
+          secondaryHref: "#/contact",
+        }}
+        content={{ logos, features, stats, zones }}
+        layout="split"
+        proof="stats"
+        mediaSide="end"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/WorkPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/WorkPage.tsx
new file mode 100644
index 0000000..a11fc8e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingLandingScreen/WorkPage.tsx
@@ -0,0 +1,92 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The work page of ThemeMarketingLandingScreen.
+
+import {
+  AboutMe,
+  PhotoGallery,
+  ProjectGrid,
+  tpl,
+  uniqLabel,
+  type Photo,
+  type Project,
+  type Skill,
+  type Spec,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+
+export function WorkPage() {
+  return (
+    <>
+      <AboutMe
+        id="work-aboutme"
+        title={ui.company.aboutMe.title}
+        lead={ui.company.aboutMe.lead}
+        badge={ui.company.aboutMe.badge}
+        facts={profilefacts}
+        skills={skills}
+        labels={ui.company.aboutMe}
+        actions={{
+          mode: "two",
+          cta: ui.company.aboutMe.cta,
+          href: "#/work",
+          secondary: ui.company.aboutMe.more,
+          secondaryHref: "#/contact",
+        }}
+        layout="facts"
+        mediaSide="start"
+        tone="default"
+      />
+      <ProjectGrid
+        id="work-projects"
+        title={ui.company.projects.title}
+        lead={ui.company.projects.lead}
+        projects={projects}
+        empty={ui.empty.projects}
+        labels={ui.company.projects}
+        layout="cards"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))}
+      />
+      <PhotoGallery
+        id="work-photos"
+        title={ui.company.photos.title}
+        lead={ui.company.photos.lead}
+        photos={photos}
+        empty={ui.empty.photos}
+        labels={ui.company.photos}
+        layout="masonry"
+        captions="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen.tsx b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen.tsx
new file mode 100644
index 0000000..642348c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+/**
+ * Pricing pages: tiers with a billing switch, a comparison table, one plan, a usage slider, credit packs, free
+ * against pro, and us against the rest.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemeMarketingPricingScreen/HomePage";
+import { PlansPage } from "./ThemeMarketingPricingScreen/PlansPage";
+import { UsagePage } from "./ThemeMarketingPricingScreen/UsagePage";
+import { ComparePage } from "./ThemeMarketingPricingScreen/ComparePage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingPricingScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"plans","area":"plans"},
+  {"path":"usage","area":"usage"},
+  {"path":"compare","area":"compare"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeMarketingPricingScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "plans" ? (
+          <PlansPage />
+        ) : route.area === "usage" ? (
+          <UsagePage />
+        ) : route.area === "compare" ? (
+          <ComparePage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "first",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/ComparePage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/ComparePage.tsx
new file mode 100644
index 0000000..c0e1171
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/ComparePage.tsx
@@ -0,0 +1,139 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+// The compare page of ThemeMarketingPricingScreen.
+
+import {
+  ComparisonTable,
+  CtaBand,
+  FaqList,
+  HeroClassic,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type CompareRow,
+  type Faq,
+  type FaqTab,
+  type Quote,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+export function ComparePage() {
+  return (
+    <>
+      <HeroClassic
+        id="compare-hero"
+        title={ui.pages.marketingPricing.compare.title}
+        text={ui.pages.marketingPricing.compare.text}
+        actions={{
+          cta: ui.pages.marketingPricing.compare.cta,
+          href: "#/",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "none",
+          side: "end",
+        }}
+        layout="centered"
+        scale="default"
+        tone="muted"
+        density="default"
+      />
+      <ComparisonTable
+        id="compare-compare"
+        title={ui.vibe.rivals.title}
+        rows={rivals}
+        empty={ui.empty.rows}
+        labels={ui.vibe.rivals.labels}
+        highlight="middle"
+        tone="muted"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))}
+      />
+      <TestimonialGrid
+        id="compare-testimonials"
+        title={ui.marketing.testimonials.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        labels={{
+          rating: ui.testimonials.rating,
+          byLine: ui.testimonials.byLine,
+          handleLine: ui.testimonials.handleLine,
+        }}
+        layout="single"
+        cols="1-3"
+        item={{ kind: "plain", avatar: "image", rating: "hide", mark: "icon" }}
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))}
+      />
+      <FaqList
+        id="compare-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+      />
+      <CtaBand
+        id="compare-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="quote"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/HomePage.tsx
new file mode 100644
index 0000000..e44efff
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/HomePage.tsx
@@ -0,0 +1,136 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+// The home page of ThemeMarketingPricingScreen.
+
+import {
+  ComparisonTable,
+  CtaBand,
+  FaqList,
+  LogoCloud,
+  PageIntro,
+  PricingTiers,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+  type Faq,
+  type FaqTab,
+  type Logo,
+  type Plan,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.marketingPricing.home.title}
+        text={ui.pages.marketingPricing.home.text}
+        cta={ui.pages.marketingPricing.home.cta}
+        href="#/plans"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <PricingTiers
+        id="home-pricing"
+        title={ui.site.pricing.tiersTitle}
+        plans={tiers}
+        labels={ui.pricing}
+        billingLabels={ui.vibe.billing}
+        layout="grid"
+        cols="1-3"
+        emphasis="auto"
+        billing="monthly"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))}
+      />
+      <LogoCloud
+        id="home-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="grid"
+        cols="3"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))}
+      />
+      <ComparisonTable
+        id="home-compare"
+        title={ui.vibe.compare.title}
+        rows={compare}
+        empty={ui.empty.rows}
+        labels={ui.vibe.compare.labels}
+        highlight="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))}
+      />
+      <FaqList
+        id="home-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="accordion"
+        cols="2"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))}
+      />
+      <CtaBand
+        id="home-cta"
+        title={ui.cases.saas.cta.title}
+        text={ui.cases.saas.cta.text}
+        actions={{
+          cta: ui.cases.saas.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.saas.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/PlansPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/PlansPage.tsx
new file mode 100644
index 0000000..3d6323e
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/PlansPage.tsx
@@ -0,0 +1,112 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+// The plans page of ThemeMarketingPricingScreen.
+
+import {
+  ComparisonTable,
+  PageIntro,
+  PricingCard,
+  PricingTiers,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+  type Plan,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const DUO_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+
+export function PlansPage() {
+  return (
+    <>
+      <PageIntro
+        id="plans-pagehead"
+        title={ui.pages.marketingPricing.plans.title}
+        text={ui.pages.marketingPricing.plans.text}
+        cta={ui.pages.marketingPricing.plans.cta}
+        href="#/usage"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <PricingTiers
+        id="plans-pricing-1"
+        title={ui.site.pricing.tiersTitle}
+        plans={duo}
+        labels={ui.pricing}
+        billingLabels={ui.vibe.billing}
+        layout="grid"
+        cols="1-2"
+        emphasis="off"
+        billing="off"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))}
+      />
+      <PricingCard
+        plan={tiers.find((i) => i.id === "tier-team")!}
+        labels={ui.pricing}
+        emphasis="auto"
+        density="default"
+      />
+      <PricingTiers
+        id="plans-pricing-3"
+        title={ui.site.pricing.tiersTitle}
+        plans={tiers}
+        labels={ui.pricing}
+        billingLabels={ui.vibe.billing}
+        layout="stack"
+        cols="1-3"
+        emphasis="auto"
+        billing="off"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))}
+      />
+      <ComparisonTable
+        id="plans-compare"
+        title={ui.vibe.compare.title}
+        rows={compare}
+        empty={ui.empty.rows}
+        labels={ui.vibe.compare.labels}
+        highlight="middle"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/UsagePage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/UsagePage.tsx
new file mode 100644
index 0000000..adbb329
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingPricingScreen/UsagePage.tsx
@@ -0,0 +1,134 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+// The usage page of ThemeMarketingPricingScreen.
+
+import {
+  CreditPacks,
+  CtaBand,
+  PageIntro,
+  PricingTiers,
+  UsageCalculator,
+  tpl,
+  uniqLabel,
+  type Pack,
+  type Plan,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const CREDITS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "credits": "metadata.credits.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "badge": "metadata.badge.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+
+export function UsagePage() {
+  return (
+    <>
+      <PageIntro
+        id="usage-pagehead"
+        title={ui.pages.marketingPricing.usage.title}
+        text={ui.pages.marketingPricing.usage.text}
+        cta={ui.pages.marketingPricing.usage.cta}
+        href="#/compare"
+        align="start"
+        tone="muted"
+        density="compact"
+      />
+      <UsageCalculator
+        id="usage-usage"
+        title={ui.vibe.usage.title}
+        text={ui.vibe.usage.text}
+        usage={5000}
+        slider={{ min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit }}
+        price={{ rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate }}
+        cta={ui.vibe.usage.cta}
+        href="#/"
+        layout="card"
+        ends="show"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))}
+      />
+      <CreditPacks
+        id="usage-credits-2"
+        title={ui.vibe.credits.title}
+        packs={credits}
+        empty={ui.empty.packs}
+        badges={ui.vibe.credits.badges}
+        buy={ui.vibe.credits.buy}
+        cols="4"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))}
+      />
+      <CreditPacks
+        id="usage-credits-3"
+        title={ui.vibe.credits.title}
+        packs={credits}
+        empty={ui.empty.packs}
+        badges={ui.vibe.credits.badges}
+        buy={ui.vibe.credits.buy}
+        cols="4"
+        item="row"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))}
+      />
+      <PricingTiers
+        id="usage-pricing"
+        title={ui.site.pricing.tiersTitle}
+        plans={tiers}
+        labels={ui.pricing}
+        billingLabels={ui.vibe.billing}
+        layout="grid"
+        cols="1-3"
+        emphasis="auto"
+        billing="annual"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))}
+      />
+      <CtaBand
+        id="usage-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="row"
+        tone="muted"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingProductScreen.tsx b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen.tsx
new file mode 100644
index 0000000..3367f01
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+/**
+ * Product pages: features as grids, bento, tabs, an accordion and a sticky list, before and after pictures, and
+ * the navigation patterns.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemeMarketingProductScreen/HomePage";
+import { TourPage } from "./ThemeMarketingProductScreen/TourPage";
+import { CapabilitiesPage } from "./ThemeMarketingProductScreen/CapabilitiesPage";
+import { NavigationPage } from "./ThemeMarketingProductScreen/NavigationPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingProductScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"tour","area":"tour"},
+  {"path":"capabilities","area":"capabilities"},
+  {"path":"navigation","area":"navigation"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeMarketingProductScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "tour" ? (
+          <TourPage />
+        ) : route.area === "capabilities" ? (
+          <CapabilitiesPage />
+        ) : route.area === "navigation" ? (
+          <NavigationPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.tsx
new file mode 100644
index 0000000..fc25861
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.tsx
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+// The capabilities page of ThemeMarketingProductScreen.
+
+import {
+  BeforeAfter,
+  CtaBand,
+  FeatureAccordion,
+  FeatureGrid,
+  FeatureSticky,
+  IconWall,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type Contrast,
+  type Feature,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+
+export function CapabilitiesPage() {
+  return (
+    <>
+      <PageIntro
+        id="capabilities-pagehead"
+        title={ui.pages.marketingProduct.capabilities.title}
+        text={ui.pages.marketingProduct.capabilities.text}
+        cta={ui.pages.marketingProduct.capabilities.cta}
+        href="#/navigation"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <FeatureGrid
+        id="capabilities-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="grid"
+        cols="1-2"
+        item="card"
+        mediaSide="end"
+        tone="default"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))}
+      />
+      <IconWall
+        id="capabilities-iconwall"
+        title={ui.vibe.wall.title}
+        features={features}
+        empty={ui.empty.features}
+        cols="6"
+        item="chip"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))}
+      />
+      <FeatureAccordion
+        id="capabilities-accordion"
+        title={ui.vibe.accordion.title}
+        features={features}
+        empty={ui.empty.features}
+        expand="first"
+        media="none"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))}
+      />
+      <BeforeAfter
+        id="capabilities-beforeafter"
+        title={ui.vibe.beforeafter.title}
+        points={beforeafter}
+        empty={ui.empty.points}
+        labels={ui.vibe.beforeafter.labels}
+        layout="rows"
+        icons="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))}
+      />
+      <FeatureSticky
+        id="capabilities-sticky"
+        title={ui.vibe.sticky.title}
+        features={features}
+        empty={ui.empty.features}
+        active="feature-clear"
+        mediaSide="end"
+        item="card"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))}
+      />
+      <CtaBand
+        id="capabilities-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="card"
+        tone="muted"
+        proof="none"
+        density="compact"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/HomePage.tsx
new file mode 100644
index 0000000..0e28d1c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/HomePage.tsx
@@ -0,0 +1,152 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+// The home page of ThemeMarketingProductScreen.
+
+import {
+  BentoGrid,
+  FeatureAccordion,
+  FeatureGrid,
+  FeatureShowcase,
+  FeatureSplit,
+  FeatureTabs,
+  HeroClassic,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+  type Stat,
+  type Tile,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <HeroClassic
+        id="home-hero"
+        title={ui.pages.marketingProduct.home.title}
+        text={ui.pages.marketingProduct.home.text}
+        actions={{
+          cta: ui.pages.marketingProduct.home.cta,
+          href: "#/tour",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "image",
+          side: "end",
+        }}
+        layout="split"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <FeatureGrid
+        id="home-features"
+        title={ui.site.home.featuresTitle}
+        features={features}
+        empty={ui.empty.features}
+        action={{ label: ui.site.home.featuresAction, href: "#/" }}
+        layout="grid"
+        cols="1-3"
+        item="card"
+        mediaSide="end"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))}
+      />
+      <FeatureSplit
+        id="home-featuresplit"
+        title={ui.marketing.featureSplit.title}
+        lead={ui.marketing.featureSplit.lead}
+        badge={ui.marketing.featureSplit.badge}
+        features={features}
+        stats={stats}
+        actions={{
+          mode: "two",
+          cta: ui.marketing.featureSplit.cta,
+          href: "#/start",
+          secondary: ui.marketing.featureSplit.secondary,
+          secondaryHref: "#/work",
+        }}
+        layout="metrics"
+        mediaSide="end"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))}
+      />
+      <FeatureShowcase
+        id="home-featureshowcase"
+        title={ui.marketing.featureShowcase.title}
+        lead={ui.marketing.featureShowcase.lead}
+        features={features}
+        empty={ui.empty.features}
+        more={ui.marketing.featureShowcase.more}
+        item="panel"
+        cols="4"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))}
+      />
+      <BentoGrid
+        id="home-bento"
+        title={ui.vibe.bento.title}
+        tiles={bento}
+        empty={ui.empty.tiles}
+        layout="bento"
+        media="image"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))}
+      />
+      <FeatureTabs
+        id="home-featuretabs"
+        title={ui.vibe.tabs.title}
+        features={features}
+        empty={ui.empty.features}
+        tabsLabel={ui.vibe.tabs.label}
+        active="feature-clear"
+        panel="split"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))}
+      />
+      <FeatureAccordion
+        id="home-accordion"
+        title={ui.vibe.accordion.title}
+        features={features}
+        empty={ui.empty.features}
+        expand="first"
+        media="image"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/NavigationPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/NavigationPage.tsx
new file mode 100644
index 0000000..a5fb1b7
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/NavigationPage.tsx
@@ -0,0 +1,131 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+// The navigation page of ThemeMarketingProductScreen.
+
+import {
+  MegaMenu,
+  NavBar,
+  PageIntro,
+  SiteFooter,
+  SiteHeader,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+  type NavLink,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+export function NavigationPage() {
+  return (
+    <>
+      <PageIntro
+        id="navigation-pagehead"
+        title={ui.pages.marketingProduct.navigation.title}
+        text={ui.pages.marketingProduct.navigation.text}
+        cta={ui.pages.marketingProduct.navigation.cta}
+        href="#/"
+        align="start"
+        tone="muted"
+        density="compact"
+      />
+      <SiteHeader
+        labels={ui.site.header}
+        current="home"
+        cta={ui.site.header.cta}
+        layout="stacked"
+        position="static"
+        actions="none"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={navlinks}
+        current="link-product"
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="split"
+        over="none"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={navlinks}
+        current="link-product"
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="search"
+        over="none"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={navlinks}
+        current="link-product"
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="media"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <MegaMenu
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        trigger={ui.vibe.mega.trigger}
+        links={navlinks}
+        groups={megagroups}
+        promoTitle={ui.vibe.mega.promoTitle}
+        promoText={ui.vibe.mega.promoText}
+        panel="open"
+        cols="2"
+        promo="none"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))}
+      />
+      <SiteFooter
+        labels={ui.site.footer}
+        layout="centered"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/TourPage.tsx b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/TourPage.tsx
new file mode 100644
index 0000000..95d4987
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeMarketingProductScreen/TourPage.tsx
@@ -0,0 +1,132 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+// The tour page of ThemeMarketingProductScreen.
+
+import {
+  BeforeAfter,
+  FeatureSticky,
+  MegaMenu,
+  PageIntro,
+  StepsList,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type Contrast,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Quote,
+  type Step,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+
+export function TourPage() {
+  return (
+    <>
+      <PageIntro
+        id="tour-pagehead"
+        title={ui.pages.marketingProduct.tour.title}
+        text={ui.pages.marketingProduct.tour.text}
+        cta={ui.pages.marketingProduct.tour.cta}
+        href="#/capabilities"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <FeatureSticky
+        id="tour-sticky"
+        title={ui.vibe.sticky.title}
+        features={features}
+        empty={ui.empty.features}
+        active="feature-clear"
+        mediaSide="end"
+        item="plain"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))}
+      />
+      <BeforeAfter
+        id="tour-beforeafter"
+        title={ui.vibe.beforeafter.title}
+        points={beforeafter}
+        empty={ui.empty.points}
+        labels={ui.vibe.beforeafter.labels}
+        layout="cards"
+        icons="show"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))}
+      />
+      <StepsList
+        id="tour-steps"
+        title={ui.marketing.steps.title}
+        steps={steps}
+        empty={ui.empty.steps}
+        layout="column"
+        marker="number"
+        align="start"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))}
+      />
+      <VideoGrid
+        id="tour-videos"
+        title={ui.vibe.videos.title}
+        quotes={testimonials}
+        empty={ui.empty.quotes}
+        playLabel={ui.vibe.videos.play}
+        byLine={ui.testimonials.byLine}
+        cols="1-3"
+        caption="below"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))}
+      />
+      <MegaMenu
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        trigger={ui.vibe.mega.trigger}
+        links={navlinks}
+        groups={megagroups}
+        promoTitle={ui.vibe.mega.promoTitle}
+        promoText={ui.vibe.mega.promoText}
+        panel="open"
+        cols="3"
+        promo="none"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen.tsx b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen.tsx
new file mode 100644
index 0000000..62dd75a
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen.tsx
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+/**
+ * Onboarding: steps, a checklist that expands, a product tour with callouts, a welcome video and the first empty
+ * screen.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemeOnboardingFlowScreen/HomePage";
+import { WelcomePage } from "./ThemeOnboardingFlowScreen/WelcomePage";
+import { SetupPage } from "./ThemeOnboardingFlowScreen/SetupPage";
+import { TourPage } from "./ThemeOnboardingFlowScreen/TourPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeOnboardingFlowScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [{"path":"","area":"home"},{"path":"welcome","area":"welcome"},{"path":"setup","area":"setup"},{"path":"tour","area":"tour"}] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeOnboardingFlowScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "welcome" ? (
+          <WelcomePage />
+        ) : route.area === "setup" ? (
+          <SetupPage />
+        ) : route.area === "tour" ? (
+          <TourPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+        layout="row"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/HomePage.tsx
new file mode 100644
index 0000000..1a78197
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/HomePage.tsx
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+// The home page of ThemeOnboardingFlowScreen.
+
+import {
+  Checklist,
+  PageIntro,
+  Stepper,
+  TourCallout,
+  tpl,
+  uniqLabel,
+  type Step,
+  type Task,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.onboardingFlow.home.title}
+        text={ui.pages.onboardingFlow.home.text}
+        cta={ui.pages.onboardingFlow.home.cta}
+        href="#/welcome"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <Stepper
+        id="home-stepper"
+        title={ui.onboarding.stepper.title}
+        steps={steps}
+        current={2}
+        stepLabel={ui.onboarding.stepper.stepLabel}
+        back={ui.onboarding.stepper.back}
+        next={ui.onboarding.stepper.next}
+        layout="horizontal"
+        marker="number"
+        summary="show"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+      />
+      <Checklist
+        id="home-checklist"
+        title={ui.onboarding.checklist.title}
+        tasks={checklist}
+        empty={ui.empty.tasks}
+        progressLabel={ui.onboarding.checklist.progress}
+        layout="card"
+        progress="bar"
+        marker="check"
+        detail="expand"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))}
+      />
+      <TourCallout
+        id="home-tour"
+        title={ui.vibe.tour.title}
+        text={ui.vibe.tour.text}
+        target={ui.vibe.tour.target}
+        position={ui.vibe.tour.position}
+        skip={ui.vibe.tour.skip}
+        next={ui.vibe.tour.next}
+        placement="below"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.tsx b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.tsx
new file mode 100644
index 0000000..70d0d6c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.tsx
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+// The setup page of ThemeOnboardingFlowScreen.
+
+import {
+  Checklist,
+  EmptyPanel,
+  PageIntro,
+  Stepper,
+  tpl,
+  uniqLabel,
+  type Step,
+  type Task,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+
+export function SetupPage() {
+  return (
+    <>
+      <PageIntro
+        id="setup-pagehead"
+        title={ui.pages.onboardingFlow.setup.title}
+        text={ui.pages.onboardingFlow.setup.text}
+        cta={ui.pages.onboardingFlow.setup.cta}
+        href="#/tour"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <Stepper
+        id="setup-stepper"
+        title={ui.onboarding.stepper.title}
+        steps={steps}
+        current={2}
+        stepLabel={ui.onboarding.stepper.stepLabel}
+        back={ui.onboarding.stepper.back}
+        next={ui.onboarding.stepper.next}
+        layout="vertical"
+        marker="number"
+        summary="show"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))}
+      />
+      <Checklist
+        id="setup-checklist"
+        title={ui.onboarding.checklist.title}
+        tasks={checklist}
+        empty={ui.empty.tasks}
+        progressLabel={ui.onboarding.checklist.progress}
+        layout="card"
+        progress="bar"
+        marker="check"
+        detail="always"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))}
+      />
+      <EmptyPanel
+        id="setup-empty"
+        title={ui.dashboard.empty.inbox.title}
+        text={ui.dashboard.empty.inbox.text}
+        cta={ui.dashboard.empty.inbox.cta}
+        ctaHref="#/"
+        layout="card"
+        actions="button"
+        visual="icon"
+        size="compact"
+        icon="inbox"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/TourPage.tsx b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/TourPage.tsx
new file mode 100644
index 0000000..c1be5c9
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/TourPage.tsx
@@ -0,0 +1,94 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+// The tour page of ThemeOnboardingFlowScreen.
+
+import {
+  Checklist,
+  PageIntro,
+  TourCallout,
+  VideoModal,
+  tpl,
+  uniqLabel,
+  type Chapter,
+  type Task,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+
+export function TourPage() {
+  return (
+    <>
+      <PageIntro
+        id="tour-pagehead"
+        title={ui.pages.onboardingFlow.tour.title}
+        text={ui.pages.onboardingFlow.tour.text}
+        cta={ui.pages.onboardingFlow.tour.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <TourCallout
+        id="tour-tour-1"
+        title={ui.vibe.tour.title}
+        text={ui.vibe.tour.text}
+        target={ui.vibe.tour.target}
+        position={ui.vibe.tour.position}
+        skip={ui.vibe.tour.skip}
+        next={ui.vibe.tour.next}
+        placement="above"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))}
+      />
+      <TourCallout
+        id="tour-tour-2"
+        title={ui.vibe.tour.title}
+        text={ui.vibe.tour.text}
+        target={ui.vibe.tour.target}
+        position={ui.vibe.tour.position}
+        skip={ui.vibe.tour.skip}
+        next={ui.vibe.tour.next}
+        placement="end"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))}
+      />
+      <Checklist
+        id="tour-checklist"
+        title={ui.onboarding.checklist.title}
+        tasks={checklist}
+        empty={ui.empty.tasks}
+        progressLabel={ui.onboarding.checklist.progress}
+        layout="card"
+        progress="text"
+        marker="check"
+        detail="always"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))}
+      />
+      <VideoModal
+        id="tour-videomodal"
+        title={ui.vibe.modal.title}
+        text={ui.vibe.modal.text}
+        close={ui.vibe.modal.close}
+        play={ui.vibe.modal.play}
+        chaptersTitle={ui.vibe.modal.chapters}
+        chapters={chapters}
+        size="default"
+        outline="chapters"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.tsx b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.tsx
new file mode 100644
index 0000000..0cd1c65
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+// The welcome page of ThemeOnboardingFlowScreen.
+
+import { Checklist, PageIntro, VideoModal, tpl, uniqLabel, type Chapter, type Task } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+
+export function WelcomePage() {
+  return (
+    <>
+      <PageIntro
+        id="welcome-pagehead"
+        title={ui.pages.onboardingFlow.welcome.title}
+        text={ui.pages.onboardingFlow.welcome.text}
+        cta={ui.pages.onboardingFlow.welcome.cta}
+        href="#/setup"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <VideoModal
+        id="welcome-videomodal"
+        title={ui.vibe.modal.title}
+        text={ui.vibe.modal.text}
+        close={ui.vibe.modal.close}
+        play={ui.vibe.modal.play}
+        chaptersTitle={ui.vibe.modal.chapters}
+        chapters={chapters}
+        size="default"
+        outline="none"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))}
+      />
+      <Checklist
+        id="welcome-checklist"
+        title={ui.onboarding.checklist.title}
+        tasks={checklist}
+        empty={ui.empty.tasks}
+        progressLabel={ui.onboarding.checklist.progress}
+        layout="card"
+        progress="bar"
+        marker="number"
+        detail="always"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemePromoCampaignScreen.tsx b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen.tsx
new file mode 100644
index 0000000..f5f90c7
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen.tsx
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+/**
+ * Campaign pages: announcement bars in every position and tone, sign-up forms, calls to action with a pattern,
+ * and the cookie notice.
+ */
+
+import { Block, FooterSplit, NavBar, type Feature, type MegaGroup, type Stat } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemePromoCampaignScreen/HomePage";
+import { LaunchPage } from "./ThemePromoCampaignScreen/LaunchPage";
+import { OfferPage } from "./ThemePromoCampaignScreen/OfferPage";
+import { NoticesPage } from "./ThemePromoCampaignScreen/NoticesPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemePromoCampaignScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"launch","area":"launch"},
+  {"path":"offer","area":"offer"},
+  {"path":"notices","area":"notices"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemePromoCampaignScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "launch" ? (
+          <LaunchPage />
+        ) : route.area === "offer" ? (
+          <OfferPage />
+        ) : route.area === "notices" ? (
+          <NoticesPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <FooterSplit
+        id="after-footersplit"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.marketing.footerSplit.tagline}
+        copyright={ui.marketing.footerSplit.copyright}
+        groups={sitemap}
+        extras={{ stats, points: features, contacts, channels: community }}
+        labels={ui.marketing.footerSplit.labels}
+        layout="newsletter"
+        mediaSide="start"
+        tone="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/HomePage.tsx
new file mode 100644
index 0000000..41fcd4c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/HomePage.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+// The home page of ThemePromoCampaignScreen.
+
+import {
+  AnnouncementBar,
+  CookieBanner,
+  CtaBand,
+  HeroClassic,
+  NewsletterForm,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <HeroClassic
+        id="home-hero"
+        title={ui.pages.promoCampaign.home.title}
+        text={ui.pages.promoCampaign.home.text}
+        actions={{
+          cta: ui.pages.promoCampaign.home.cta,
+          href: "#/launch",
+          secondary: ui.site.home.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "cluster",
+          side: "end",
+        }}
+        layout="split"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="muted"
+        layout="center"
+        dismiss="hide"
+        badge="show"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+      />
+      <NewsletterForm
+        id="home-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="split"
+        terms="hide"
+        tone="default"
+        align="start"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))}
+      />
+      <CtaBand
+        id="home-cta"
+        title={ui.site.home.ctaTitle}
+        text={ui.site.home.ctaText}
+        actions={{
+          cta: ui.site.home.ctaButton,
+          href: "#/pricing",
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "form",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+      />
+      <CookieBanner
+        id="home-cookie"
+        title={ui.promo.cookie.title}
+        text={ui.promo.cookie.text}
+        accept={ui.promo.cookie.accept}
+        decline={ui.promo.cookie.decline}
+        settings={ui.promo.cookie.settings}
+        layout="card"
+        actions="two"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/LaunchPage.tsx b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/LaunchPage.tsx
new file mode 100644
index 0000000..0357a1c
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/LaunchPage.tsx
@@ -0,0 +1,115 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+// The launch page of ThemePromoCampaignScreen.
+
+import {
+  AnnouncementBar,
+  CtaBand,
+  HeroClassic,
+  LogoCloud,
+  NewsletterForm,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Logo,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+export function LaunchPage() {
+  return (
+    <>
+      <HeroClassic
+        id="launch-hero"
+        title={ui.pages.promoCampaign.launch.title}
+        text={ui.pages.promoCampaign.launch.text}
+        actions={{
+          cta: ui.pages.promoCampaign.launch.cta,
+          href: "#/offer",
+          secondary: ui.cases.saas.hero.secondary,
+          secondaryHref: "#/pricing",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        media={{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: "image",
+          side: "end",
+        }}
+        layout="split"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="default"
+        layout="center"
+        dismiss="hide"
+        badge="none"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))}
+      />
+      <NewsletterForm
+        id="launch-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="inline"
+        terms="hide"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+      />
+      <LogoCloud
+        id="launch-logos"
+        title={ui.marketing.logos.title}
+        logos={logos}
+        empty={ui.empty.logos}
+        layout="grid"
+        cols="4"
+        item="tile"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))}
+      />
+      <CtaBand
+        id="launch-cta"
+        title={ui.cases.saas.cta.title}
+        text={ui.cases.saas.cta.text}
+        actions={{
+          cta: ui.cases.saas.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.saas.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "two",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="band"
+        tone="muted"
+        proof="none"
+        density="roomy"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/NoticesPage.tsx b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/NoticesPage.tsx
new file mode 100644
index 0000000..7ebc9c3
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/NoticesPage.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+// The notices page of ThemePromoCampaignScreen.
+
+import { AnnouncementBar, CookieBanner, NewsletterForm, PageIntro, tpl, uniqLabel } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function NoticesPage() {
+  return (
+    <>
+      <PageIntro
+        id="notices-pagehead"
+        title={ui.pages.promoCampaign.notices.title}
+        text={ui.pages.promoCampaign.notices.text}
+        cta={ui.pages.promoCampaign.notices.cta}
+        href="#/"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="default"
+        layout="center"
+        dismiss="show"
+        badge="none"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))}
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="default"
+        layout="split"
+        dismiss="show"
+        badge="none"
+        position="bottom"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))}
+      />
+      <CookieBanner
+        id="notices-cookie-3"
+        title={ui.promo.cookie.title}
+        text={ui.promo.cookie.text}
+        accept={ui.promo.cookie.accept}
+        decline={ui.promo.cookie.decline}
+        settings={ui.promo.cookie.settings}
+        layout="bar"
+        actions="three"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))}
+      />
+      <CookieBanner
+        id="notices-cookie-4"
+        title={ui.promo.cookie.title}
+        text={ui.promo.cookie.text}
+        accept={ui.promo.cookie.accept}
+        decline={ui.promo.cookie.decline}
+        settings={ui.promo.cookie.settings}
+        layout="bar"
+        actions="two"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))}
+      />
+      <NewsletterForm
+        id="notices-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="inline"
+        terms="show"
+        tone="muted"
+        align="start"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/OfferPage.tsx b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/OfferPage.tsx
new file mode 100644
index 0000000..2d3e81a
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemePromoCampaignScreen/OfferPage.tsx
@@ -0,0 +1,97 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+// The offer page of ThemePromoCampaignScreen.
+
+import { AnnouncementBar, CtaBand, NewsletterForm, PageIntro, tpl, uniqLabel } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function OfferPage() {
+  return (
+    <>
+      <PageIntro
+        id="offer-pagehead"
+        title={ui.pages.promoCampaign.offer.title}
+        text={ui.pages.promoCampaign.offer.text}
+        cta={ui.pages.promoCampaign.offer.cta}
+        href="#/notices"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="muted"
+        layout="center"
+        dismiss="hide"
+        badge="show"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.promo.announcement.text}
+        cta={ui.promo.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="muted"
+        layout="split"
+        dismiss="hide"
+        badge="none"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))}
+      />
+      <AnnouncementBar
+        label={ui.promo.announcement.label}
+        text={ui.cases.shop.announcement.text}
+        cta={ui.cases.shop.announcement.cta}
+        ctaHref="#/pricing"
+        dismissLabel={ui.promo.announcement.dismiss}
+        badgeLabel={ui.promo.announcement.badge}
+        tone="muted"
+        layout="center"
+        dismiss="show"
+        badge="none"
+        position="top"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))}
+      />
+      <CtaBand
+        id="offer-cta"
+        title={ui.cases.shop.cta.title}
+        text={ui.cases.shop.cta.text}
+        actions={{
+          cta: ui.cases.shop.cta.cta,
+          href: "#/pricing",
+          secondary: ui.cases.shop.cta.secondary,
+          secondaryHref: "#/",
+          emailLabel: ui.promo.newsletter.label,
+          mode: "one",
+        }}
+        quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+        layout="split"
+        tone="default"
+        proof="none"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+      />
+      <NewsletterForm
+        id="offer-newsletter"
+        title={ui.promo.newsletter.title}
+        text={ui.promo.newsletter.text}
+        label={ui.promo.newsletter.label}
+        submit={ui.promo.newsletter.submit}
+        consent={ui.promo.newsletter.consent}
+        layout="inline"
+        terms="show"
+        tone="default"
+        align="center"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeSupportCenterScreen.tsx b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen.tsx
new file mode 100644
index 0000000..156bc6b
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen.tsx
@@ -0,0 +1,92 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+/**
+ * A help center: channels, FAQ as tabs, chat and search, contact forms, and the pages for a missing or moved
+ * address.
+ */
+
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/solid-ui";
+import { HomePage } from "./ThemeSupportCenterScreen/HomePage";
+import { FaqPage } from "./ThemeSupportCenterScreen/FaqPage";
+import { ContactPage } from "./ThemeSupportCenterScreen/ContactPage";
+import { MissingPage } from "./ThemeSupportCenterScreen/MissingPage";
+import { MovedPage } from "./ThemeSupportCenterScreen/MovedPage";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeSupportCenterScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"faq","area":"faq"},
+  {"path":"contact","area":"contact"},
+  {"path":"missing","area":"missing"},
+  {"path":"moved","area":"moved"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const HOME = { area: "home", params: {} as Record<string, string> };
+const actions = { toggleTheme };
+
+export function ThemeSupportCenterScreen({ url }: { url: UrlPort }) {
+  const route = matchRoute(ROUTES, url.path) ?? HOME;
+  const nav = navOf(route.area);
+  return (
+    <>
+      <NavBar
+        label={ui.vibe.nav.label}
+        brand={ui.site.header.brand}
+        links={nav.links}
+        current={nav.current}
+        actions={{
+          cta: ui.site.header.cta,
+          href: "#/",
+          login: ui.site.header.login,
+          loginHref: "#/login",
+          mode: "cta",
+          themeLabel: ui.theme.toggle,
+        }}
+        search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+        layout="inline"
+        over="none"
+        tone="default"
+        brandHref="#/"
+        skip={ui.site.header.skip}
+        onTheme={() => actions.toggleTheme()}
+      />
+      <Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+        {route.area === "faq" ? (
+          <FaqPage />
+        ) : route.area === "contact" ? (
+          <ContactPage />
+        ) : route.area === "missing" ? (
+          <MissingPage />
+        ) : route.area === "moved" ? (
+          <MovedPage />
+        ) : (
+          <HomePage />
+        )}
+      </Block>
+      <SitemapFooter
+        id="after-sitemap"
+        label={ui.vibe.sitemap.label}
+        brand={ui.site.header.brand}
+        tagline={ui.vibe.sitemap.tagline}
+        copyright={ui.vibe.sitemap.copyright}
+        groups={sitemap}
+        signup={{
+          title: ui.vibe.sitemap.signupTitle,
+          label: ui.vibe.sitemap.signupLabel,
+          submit: ui.vibe.sitemap.signupSubmit,
+          mode: "none",
+        }}
+        status={{ label: ui.vibe.sitemap.status, mode: "show" }}
+        layout="columns"
+        density="default"
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/ContactPage.tsx b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/ContactPage.tsx
new file mode 100644
index 0000000..43c7e4f
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/ContactPage.tsx
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The contact page of ThemeSupportCenterScreen.
+
+import { ContactForm, PageIntro, SupportChannels, tpl, uniqLabel, type Feature } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function ContactPage() {
+  return (
+    <>
+      <PageIntro
+        id="contact-pagehead"
+        title={ui.pages.supportCenter.contact.title}
+        text={ui.pages.supportCenter.contact.text}
+        cta={ui.pages.supportCenter.contact.cta}
+        href="#/missing"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <ContactForm
+        id="contact-contact-1"
+        title={ui.support.contact.title}
+        text={ui.support.contact.text}
+        labels={ui.support.contact.labels}
+        details={channels}
+        layout="single"
+        fields="full"
+        terms="hide"
+        page="section"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))}
+      />
+      <SupportChannels
+        id="contact-channels"
+        title={ui.support.channels.title}
+        channels={channels}
+        empty={ui.empty.channels}
+        open={ui.support.channels.open}
+        layout="list"
+        cols="1-3"
+        action="link"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))}
+      />
+      <ContactForm
+        id="contact-contact-3"
+        title={ui.support.contact.title}
+        text={ui.support.contact.text}
+        labels={ui.support.contact.labels}
+        details={channels}
+        layout="single"
+        fields="full"
+        terms="show"
+        page="section"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/FaqPage.tsx b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/FaqPage.tsx
new file mode 100644
index 0000000..280baa2
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/FaqPage.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The faq page of ThemeSupportCenterScreen.
+
+import { FaqList, PageIntro, tpl, uniqLabel, type Faq, type FaqTab } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+export function FaqPage() {
+  return (
+    <>
+      <PageIntro
+        id="faq-pagehead"
+        title={ui.pages.supportCenter.faq.title}
+        text={ui.pages.supportCenter.faq.text}
+        cta={ui.pages.supportCenter.faq.cta}
+        href="#/contact"
+        align="start"
+        tone="default"
+        density="default"
+      />
+      <FaqList
+        id="faq-faq-1"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="chat"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))}
+      />
+      <FaqList
+        id="faq-faq-2"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/HomePage.tsx b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/HomePage.tsx
new file mode 100644
index 0000000..e799dbb
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/HomePage.tsx
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The home page of ThemeSupportCenterScreen.
+
+import {
+  ContactForm,
+  FaqList,
+  MediaList,
+  PageIntro,
+  SupportChannels,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Post,
+  type Review,
+  type Stat,
+  type Step,
+} from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+export function HomePage() {
+  return (
+    <>
+      <PageIntro
+        id="home-pagehead"
+        title={ui.pages.supportCenter.home.title}
+        text={ui.pages.supportCenter.home.text}
+        cta={ui.pages.supportCenter.home.cta}
+        href="#/faq"
+        align="center"
+        tone="default"
+        density="default"
+      />
+      <SupportChannels
+        id="home-channels"
+        title={ui.support.channels.title}
+        channels={channels}
+        empty={ui.empty.channels}
+        open={ui.support.channels.open}
+        layout="grid"
+        cols="1-3"
+        action="link"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))}
+      />
+      <MediaList
+        id="home-medialist"
+        title={ui.marketing.mediaList.topics.title}
+        lead={ui.marketing.mediaList.topics.lead}
+        badge={ui.marketing.mediaList.topics.badge}
+        labels={{
+          list: ui.marketing.mediaList.topics.list,
+          count: ui.marketing.mediaList.count,
+          minutes: ui.content.labels.minutes,
+          featured: ui.marketing.mediaList.featured,
+          rating: ui.testimonials.rating,
+          figures: ui.marketing.mediaList.supportFigures,
+        }}
+        actions={{ mode: "one", cta: ui.marketing.mediaList.topics.cta, href: "#/start" }}
+        extras={{ stats, steps, posts, topics: categories, channels, reviews }}
+        layout="topics"
+        mediaSide="end"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))}
+      />
+      <FaqList
+        id="home-faq"
+        title={ui.site.pricing.faqTitle}
+        items={faq}
+        empty={ui.vibe.faq.empty}
+        search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+        filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "billing", mode: "categories" }}
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+      />
+      <ContactForm
+        id="home-contact"
+        title={ui.support.contact.title}
+        text={ui.support.contact.text}
+        labels={ui.support.contact.labels}
+        details={channels}
+        layout="split"
+        fields="full"
+        terms="hide"
+        page="section"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/MissingPage.tsx b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/MissingPage.tsx
new file mode 100644
index 0000000..239a416
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/MissingPage.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The missing page of ThemeSupportCenterScreen.
+
+import { ErrorPage } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function MissingPage() {
+  return (
+    <ErrorPage
+      id="missing-errorpage"
+      title={ui.pages.supportCenter.missing.title}
+      text={ui.pages.supportCenter.missing.text}
+      status={ui.vibe.error.status}
+      actions={{
+        cta: ui.pages.supportCenter.missing.cta,
+        href: "#/moved",
+        secondary: ui.vibe.error.secondary,
+        secondaryHref: "#/",
+        mode: "one",
+      }}
+      layout="centered"
+      code="show"
+      tone="default"
+    />
+  );
+}
diff --git a/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/MovedPage.tsx b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/MovedPage.tsx
new file mode 100644
index 0000000..e7e3bbf
--- /dev/null
+++ b/apps/host-solid/xgen/screens/ThemeSupportCenterScreen/MovedPage.tsx
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The moved page of ThemeSupportCenterScreen.
+
+import { ErrorPage, SupportChannels, tpl, uniqLabel, type Feature } from "@ui8kit/solid-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+
+export function MovedPage() {
+  return (
+    <>
+      <ErrorPage
+        id="moved-errorpage"
+        title={ui.pages.supportCenter.moved.title}
+        text={ui.pages.supportCenter.moved.text}
+        status={ui.vibe.error.status}
+        actions={{
+          cta: ui.pages.supportCenter.moved.cta,
+          href: "#/",
+          secondary: ui.vibe.error.secondary,
+          secondaryHref: "#/",
+          mode: "one",
+        }}
+        layout="split"
+        code="show"
+        tone="default"
+      />
+      <SupportChannels
+        id="moved-channels"
+        title={ui.support.channels.title}
+        channels={channels}
+        empty={ui.empty.channels}
+        open={ui.support.channels.open}
+        layout="grid"
+        cols="1-2"
+        action="link"
+        tone="default"
+        landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))}
+      />
+    </>
+  );
+}
diff --git a/apps/host-svelte/index.html b/apps/host-svelte/index.html
new file mode 100644
index 0000000..f4b5a32
--- /dev/null
+++ b/apps/host-svelte/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>xgen screens (Svelte)</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/host-svelte/package.json b/apps/host-svelte/package.json
new file mode 100644
index 0000000..f1bea42
--- /dev/null
+++ b/apps/host-svelte/package.json
@@ -0,0 +1,43 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "host-svelte",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Generated by xgen from xgen.app.json: the Svelte 5 host of 15 screens (/<screen>/#/<route>). Generated under xgen/; src/ is the front controller.",
+  "ui8kit": {
+    "runtime": "svelte",
+    "generated": true,
+    "kit": [
+      "xgen/runtime"
+    ],
+    "composition": [
+      "xgen/App.svelte",
+      "xgen/screens"
+    ],
+    "blockRoot": [
+      "xgen/App.svelte",
+      "xgen/screens"
+    ]
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "dependencies": {
+    "@ui8kit/app-shared": "workspace:*",
+    "@ui8kit/svelte-ui": "workspace:*",
+    "svelte": "^5.57.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@tsconfig/svelte": "^5.0.8",
+    "svelte-check": "^4.7.6",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0"
+  }
+}
diff --git a/apps/host-svelte/src/app.css b/apps/host-svelte/src/app.css
new file mode 100644
index 0000000..abb22aa
--- /dev/null
+++ b/apps/host-svelte/src/app.css
@@ -0,0 +1,4 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/svelte/src/app.ts (settings: apps/host-svelte/xgen.app.json) */
+@import "@ui8kit/svelte-ui/styles/index.css";
+@import "@ui8kit/app-shared/styles/skins.css";
diff --git a/apps/host-svelte/src/main.ts b/apps/host-svelte/src/main.ts
new file mode 100644
index 0000000..11aefa7
--- /dev/null
+++ b/apps/host-svelte/src/main.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/svelte/src/app.ts (settings: apps/host-svelte/xgen.app.json)
+import { mount } from "svelte";
+import "./app.css";
+import { bootScreen, screenKeyOf } from "@ui8kit/app-shared/screens";
+import App from "../xgen/App.svelte";
+
+const screen = screenKeyOf(location);
+const title = "xgen screens (Svelte)";
+bootScreen(screen, "light", title);
+mount(App, { target: document.getElementById("app")!, props: { screen, title } });
diff --git a/apps/host-svelte/svelte.config.js b/apps/host-svelte/svelte.config.js
new file mode 100644
index 0000000..0ba3a4e
--- /dev/null
+++ b/apps/host-svelte/svelte.config.js
@@ -0,0 +1,4 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/svelte/src/app.ts (settings: apps/host-svelte/xgen.app.json)
+/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
+export default {};
diff --git a/apps/host-svelte/tsconfig.json b/apps/host-svelte/tsconfig.json
new file mode 100644
index 0000000..7f832ff
--- /dev/null
+++ b/apps/host-svelte/tsconfig.json
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/svelte/src/app.ts (settings: apps/host-svelte/xgen.app.json)
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": { "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "types": ["svelte", "vite/client"], "allowArbitraryExtensions": true, "resolveJsonModule": true, "noEmit": true },
+  "include": ["src/**/*.ts", "src/**/*.svelte", "xgen/**/*.ts", "xgen/**/*.svelte"]
+}
diff --git a/apps/host-svelte/vite.config.ts b/apps/host-svelte/vite.config.ts
new file mode 100644
index 0000000..dbe4b1d
--- /dev/null
+++ b/apps/host-svelte/vite.config.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/svelte/src/app.ts (settings: apps/host-svelte/xgen.app.json)
+import tailwindcss from "@tailwindcss/vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), svelte()],
+  server: { host: "127.0.0.1", port: 5180, strictPort: true, proxy: { "/__inspect": "http://127.0.0.1:5190" } },
+  preview: { host: "127.0.0.1", port: 5180, strictPort: true },
+});
diff --git a/apps/host-svelte/xgen.app.json b/apps/host-svelte/xgen.app.json
new file mode 100644
index 0000000..b3795f8
--- /dev/null
+++ b/apps/host-svelte/xgen.app.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "../../xgen/schema/schemas/app.schema.json",
+  "specVersion": 1,
+  "name": "host-svelte",
+  "runtime": "svelte",
+  "screens": ["*"],
+  "title": "xgen screens (Svelte)",
+  "port": 5180,
+  "locale": "en",
+  "theme": "light"
+}
diff --git a/apps/host-svelte/xgen/.xgen-manifest.json b/apps/host-svelte/xgen/.xgen-manifest.json
new file mode 100644
index 0000000..d57a6d0
--- /dev/null
+++ b/apps/host-svelte/xgen/.xgen-manifest.json
@@ -0,0 +1,271 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "apps/host-svelte",
+  "files": {
+    "index.html": "3a76db9ac0f65b9493e0e821986cc250c8080cb2026275f7609185d3ccdb7e39",
+    "package.json": "edc5a804923bff12443115dae2525b22ab5c0ab231744d991659d74580c2ac77",
+    "src/app.css": "cb42c121e509768f0e9e1cef2f0b159a9b9bbda343d748f73431b5d1261b15e6",
+    "src/main.ts": "5cd21eb7803026a6e9381ed3de61b2e3408ba3bc590fb35aacace4138c1bb08a",
+    "svelte.config.js": "08b2d9606434101e52faae56bcd81347b2a1c29ed29a8d49140658e02b2ed879",
+    "tsconfig.json": "ef2fa4f123424fdcac9f24dc95d814005a10bad76b18e09ecab311f590e2120f",
+    "vite.config.ts": "cf009ea04277089478b92c1a1866ccf38c8d4a4bef6e7b233d2415918b77c8d6",
+    "xgen/App.svelte": "3c41ef5027bc766c32cb6b55724c0aec7474f6f82596e2b07580ccf98fe9e0c1",
+    "xgen/runtime/url.svelte.ts": "d1f3e46105c8df982b413b2875b8f6b3eca5db6a3fea81619da4d658f25a92e1",
+    "xgen/screens/BlocksScreen.svelte": "065dbfe5ea3df6446f2e8a1f540db2771b7e4e587fd1d9d12c72bb138f734ee9",
+    "xgen/screens/BlocksScreen/AboutmePage.svelte": "1f16f70230d04aaf1a093fd49a0be192be1d8fde443c23cf94992aa7e70341bf",
+    "xgen/screens/BlocksScreen/AboutPage.svelte": "1c0818f9c6c9b9f6d3504d72d9e09bb5025d3aced417c11de640ed7c5edf99f1",
+    "xgen/screens/BlocksScreen/AccordionPage.svelte": "9bba25d55f89203bb06fb48c487cf0fbd9888d810fa1012871cdf6ec83472a42",
+    "xgen/screens/BlocksScreen/ActivityPage.svelte": "ef0943968b40eeb243f8ca812a95d0b893999cf1cc9aa8bac904c6e97dc2206a",
+    "xgen/screens/BlocksScreen/AnnouncementPage.svelte": "d444db73032eda353412cee04351250634cda348df001c94031943c90c53ef68",
+    "xgen/screens/BlocksScreen/ArticlePage.svelte": "34532ce9f782280a36498500fa6df2ccc653e840e2b7778c3deb26ab0d323ecc",
+    "xgen/screens/BlocksScreen/AuthPage.svelte": "a34651a8b08933511a78d8a13b71bda538bbfdc2ed4b5c500ab8e966748475b1",
+    "xgen/screens/BlocksScreen/AuthpagePage.svelte": "e8b38e8213aa3c12d0288427b151ed9f614b7074a6c21c77dfa0337a73aa4237",
+    "xgen/screens/BlocksScreen/BeforeafterPage.svelte": "959f5a3d5162d2d3fa7bc4732d008ad239d3610ee42ce1d75cb42eef7e2daf2c",
+    "xgen/screens/BlocksScreen/BentoPage.svelte": "0597780d594bafce44ee0176dbc3230fd112e9e5b0d9464b1984eb9b2b4a2439",
+    "xgen/screens/BlocksScreen/BottomnavPage.svelte": "cb5caaa8d51a691d0de28e7a7eb405dba4ab901e68b9bf6dd6797a05e78c27fa",
+    "xgen/screens/BlocksScreen/CartdrawerPage.svelte": "44a2088fd57fd73a7908868129a7fee348509b74f68b08635891879a90466161",
+    "xgen/screens/BlocksScreen/CartPage.svelte": "5077df57df51b8f259c862f507baebb92c837c12eac0a79ff3c0b3b5a01530b5",
+    "xgen/screens/BlocksScreen/CartpagePage.svelte": "d6af705b0671a44f981295b2302157ef8ec963a105862320e817a87182e664d4",
+    "xgen/screens/BlocksScreen/CategoriesPage.svelte": "76f3309270cdb5f8652f001463a6e786f94b45930a9a085f019ddbbe7a4d868d",
+    "xgen/screens/BlocksScreen/ChannelsPage.svelte": "2f0c0507405aaf7b77a6810e146a544408d2f0127e3b02fee536d084218f88ff",
+    "xgen/screens/BlocksScreen/ChartPage.svelte": "3387aae70427c018a9efaa035f40cf0827f6eec35bc3e544c834abdc60c5d234",
+    "xgen/screens/BlocksScreen/ChecklistPage.svelte": "168ddf6c0d465feada8324757575b9485db521d6787748014e6114922a0d14bd",
+    "xgen/screens/BlocksScreen/CheckoutPage.svelte": "2d6a7ff0f4455d56c58f3f0c29ad036db796efe74fa53e22e0629cc88730c9df",
+    "xgen/screens/BlocksScreen/ComparePage.svelte": "0783cedf7c2bc61f1b01def1301a806a3754dd1863522e3c1be917f835c6005a",
+    "xgen/screens/BlocksScreen/ContactPage.svelte": "ad677240d9cd29af92fffb20742f7dea7e9fc4586b0373838af6569dd2807b20",
+    "xgen/screens/BlocksScreen/CookiePage.svelte": "620d5b2b2b680ecd2694b435011d179f956a5acd09141385ff1e9cfae92bed74",
+    "xgen/screens/BlocksScreen/CreditsPage.svelte": "b793312e98e22aaa185ffaf913f008be3bccac9ac7e2250a2d781d43ae9f5303",
+    "xgen/screens/BlocksScreen/CtaPage.svelte": "2af5929118d88ba01f0510017ecffc992d7d095f5eeabb4b54715a686896610d",
+    "xgen/screens/BlocksScreen/CtaproofPage.svelte": "6cefecf487208b2e75d5cd68db1be8448a641895eee875e12735d7c933ea148a",
+    "xgen/screens/BlocksScreen/DashshellPage.svelte": "f97748e9a48d1f89835f1e24e244fd1114d1b2b36675bcb8229058a18e7683f0",
+    "xgen/screens/BlocksScreen/DeliveryPage.svelte": "f5acd51375f2bd25562e2aa1d252908b3347bc2e5e21a417aa2bc4c99bfd6dcb",
+    "xgen/screens/BlocksScreen/EmptyPage.svelte": "29d06c131e4df883ceda7ffeb444811613f3db3f2a41f67602a3077f40ddf835",
+    "xgen/screens/BlocksScreen/ErrorpagePage.svelte": "a79399475e8e0a7b4fa2d0489b82c5755ca74bec9ec1965d0007dd2194bc121b",
+    "xgen/screens/BlocksScreen/FaqPage.svelte": "5f487283a0f67c5d52eed73074fa31f8393e3dd4ceb981573581469a5ca224b1",
+    "xgen/screens/BlocksScreen/FaqsplitPage.svelte": "bebf5355eacb029ada0e01819299fb2de80aaf82ed5fa3b985946238a89c5fc6",
+    "xgen/screens/BlocksScreen/FeatureshowcasePage.svelte": "20df650ad2845129d70b40e5a5bcde26ad1df620bbade17628d25ed073cfa8d9",
+    "xgen/screens/BlocksScreen/FeaturesPage.svelte": "80c906bb0143fd4f05bd053573bbdbf47a2d75acdd860c4eaa12cb1c382ee97c",
+    "xgen/screens/BlocksScreen/FeaturesplitPage.svelte": "36de8672f609fae7974d01476056d12648bd30fdf67df0009cba011b254712ce",
+    "xgen/screens/BlocksScreen/FeaturetabsPage.svelte": "98f2f960d9cb7aba28feec04bba048932e2ab513a4388c278a94d59c8b34e1dd",
+    "xgen/screens/BlocksScreen/FooterPage.svelte": "ab76aab6235d9e5319ae735626884c977325dd150b70410d00e3508325700672",
+    "xgen/screens/BlocksScreen/FootersplitPage.svelte": "f0f846c74c7cb1ba590a257e51d88721867aedfd13c4474fdccff30f2d7120e8",
+    "xgen/screens/BlocksScreen/HeaderPage.svelte": "288cab5334f4a80949d2abff458849e1aa25793c47e18a0784fc98d7e182a058",
+    "xgen/screens/BlocksScreen/HeroPage.svelte": "453849340b8d46a0d12fe1f1d7b8380d84eba5b5fe017be0292e10991970f9e1",
+    "xgen/screens/BlocksScreen/HerosplitPage.svelte": "9556aaf861ad410a47ac520b4fff7d674dc0eca37b8e30b2a5570f2af4368f5c",
+    "xgen/screens/BlocksScreen/IconwallPage.svelte": "f802f6813f7fc92f796aed7b272aa2a4094a246b114b23eaa07309c7467b4da4",
+    "xgen/screens/BlocksScreen/IndexPage.svelte": "d441346c1fa779244eeac5aea8ba28bd2a51022e6f52e18dc660eeab70dcd16c",
+    "xgen/screens/BlocksScreen/JobsPage.svelte": "9e01bafbe5e242d84f8d815c7a23782eef7376fd2e482063f12a4975884bcd30",
+    "xgen/screens/BlocksScreen/KanbanPage.svelte": "5d296225f24e5c2a305ff4d71026bb6cc9bd465e2c245e022f93ba4d8e959deb",
+    "xgen/screens/BlocksScreen/LocationsPage.svelte": "e7084ef5b1fd40bcd5ede01da274ce0bea08a3d85cf102d73e130538c6ebfd0a",
+    "xgen/screens/BlocksScreen/LogosPage.svelte": "74fd14389b9952a2fbee581c34743182d1608b1b79e9685e7ddfa9ef24e3a190",
+    "xgen/screens/BlocksScreen/MedialistPage.svelte": "1a29bcf662973c3a9aa58e37245560737873f24a5f08d6f92abc9e785d91839b",
+    "xgen/screens/BlocksScreen/MegamenuPage.svelte": "f06f5d2999b75bc83e1e77152dce5bd3581911ce8417ff077ee419d50ac2ed62",
+    "xgen/screens/BlocksScreen/MetricsPage.svelte": "6f4ef780b22844dae4cfbc6d7b6f27fc36deb27bf2c98ebb8909ad1dbd633db4",
+    "xgen/screens/BlocksScreen/NavbarPage.svelte": "a2470f3d226650a33aab6956be85cf56471e2f691239742bcca707320279dd14",
+    "xgen/screens/BlocksScreen/NewsletterPage.svelte": "13eb0d6e1fddb946409c8f8b9083b7dfed04f494fe29026410d20334cd1e91a1",
+    "xgen/screens/BlocksScreen/NotfoundPage.svelte": "17e4be75a95998838db548b16665d43374751cb6766ad6611223a470fc9b9c2c",
+    "xgen/screens/BlocksScreen/OrdersPage.svelte": "a861726a8cd7d0bf3ae82ae9b3528ea6bff5157c7ec2bfe5d2ed5fe62cd12bc1",
+    "xgen/screens/BlocksScreen/OverviewPage.svelte": "209d0fbca5bd2a8faed3d01183941c39438a4cf6276c639ece3e7c054325e62a",
+    "xgen/screens/BlocksScreen/PageheadPage.svelte": "abbc09e8e72f82a637ca6ab6dacdfb874dd54ecc1aa2c154e3cd01e7f71f8e4f",
+    "xgen/screens/BlocksScreen/PagetrailPage.svelte": "811437459c38e305de523c1ebb77adef305e14f1cc4d5fabf179756a253afed7",
+    "xgen/screens/BlocksScreen/PhotosPage.svelte": "818d48e733fea5e55b493b300719dd5d2a4ddb59fd8e039b34b5aa926ad4916d",
+    "xgen/screens/BlocksScreen/PlanPage.svelte": "5b8709a7967d09a319f087049dcb825413b9135b69b2f262fdb1f7b333abce54",
+    "xgen/screens/BlocksScreen/PostheaderPage.svelte": "48b8c8fabb54f9301fa35c1d66864f9a1cb885e90d6b79242c3a382d9e506ef7",
+    "xgen/screens/BlocksScreen/PostshowcasePage.svelte": "4fc214dcee1a4d58190eb08b6dcb9bb2c2f45cf48cff799346b2ba355097476d",
+    "xgen/screens/BlocksScreen/PostsPage.svelte": "ad3263d318ac318efe699e1004035b4aa2927074c11ebc0a73503ca58db6f3de",
+    "xgen/screens/BlocksScreen/PostsplitPage.svelte": "753b2ebe18051442948508a5cd92bb8631ead3536e3b430733a6eac18989edce",
+    "xgen/screens/BlocksScreen/PricingPage.svelte": "c47c6831847b8aa7e812f4226df6a45745ca718a194bef5115bd9e1c87056500",
+    "xgen/screens/BlocksScreen/ProductinfoPage.svelte": "328e723cb25e9d6e26bb70410598d7ca6c191cf1d5f36dff751c039a2c780733",
+    "xgen/screens/BlocksScreen/ProductPage.svelte": "317b7509816cca8f71c62afc99b5e15217f52b943d24cf3d7af0f7e9dc2df751",
+    "xgen/screens/BlocksScreen/ProductsPage.svelte": "f20c88615c98d57e6466328b7f974e61eaebe8b0cec784493c9c1e4d18546a78",
+    "xgen/screens/BlocksScreen/ProfilePage.svelte": "cb0e9ba53aa9e1afa44242243467875db50c8a9eee15e6019f387beab6731869",
+    "xgen/screens/BlocksScreen/ProjectsPage.svelte": "5fecc73202f9284fa5580e7ab695deb78db099dc612bffaa9e0c7f95f47262a7",
+    "xgen/screens/BlocksScreen/ProofPage.svelte": "c89a34901fa01b1b2c76610c7f949543b01083b794041d37f30e086a5fb68b25",
+    "xgen/screens/BlocksScreen/QuotesplitPage.svelte": "0102096bd22d047d95909320196155c2ba240bffc2894fb73c93bf7345d9ac9f",
+    "xgen/screens/BlocksScreen/ReviewsPage.svelte": "8aa2db534bf9973e81d57aa192302be296f08c38d13cba57ff873f93694c5e8b",
+    "xgen/screens/BlocksScreen/ScreenHeader.svelte": "aa1efc4525a26ad7831f83c77f25ba78d6ae034976310b6965c4d1a4265424ec",
+    "xgen/screens/BlocksScreen/ShellPage.svelte": "b1c0b883646587d150bffdd1e9d361120bb63f2eb6204612b3956e1b367aee35",
+    "xgen/screens/BlocksScreen/SidenavPage.svelte": "e8608959ec646adff22d6bf25db4313fcad1caa143b330a38930f8c29147d52c",
+    "xgen/screens/BlocksScreen/SitemapPage.svelte": "526248b401afa48e83b9c9f580d6b6c786bd8e904a3f1fd46b97528c662fe93d",
+    "xgen/screens/BlocksScreen/SkeletonPage.svelte": "c0033e1bd9f9d834fdcad2a41bd438be8d75129934da5ea5c872b4a912e529af",
+    "xgen/screens/BlocksScreen/SlotsPage.svelte": "a46b55e0a9089cad05063616020c4c5cdae57102ee513ceca34be8c80e9c7893",
+    "xgen/screens/BlocksScreen/StatsPage.svelte": "af54289191d23c7af2ffd779176921e8eda380879291e7c7f06c26c15031cda6",
+    "xgen/screens/BlocksScreen/StepperPage.svelte": "74dc0782e93eb6886384e5ad01352a62054556af340c04d373375203404e3914",
+    "xgen/screens/BlocksScreen/StepsPage.svelte": "8ad10421a24f354a9e00bfa438e1afb898e0eded0b0910f92942faf78e591950",
+    "xgen/screens/BlocksScreen/StickyPage.svelte": "b6736f55c631bfff6c59799a22ca000e64136e40c8b85f41dd5558ea9501977e",
+    "xgen/screens/BlocksScreen/StoreheroPage.svelte": "0cafca979ad2a0fc1a207ba9019c6ca98d71e7e810ba0069b07fae4f6daa5250",
+    "xgen/screens/BlocksScreen/StorytabsPage.svelte": "167caa593c98ee716d418e74e4b279f55c9d8674f306672b66ee142f31341ece",
+    "xgen/screens/BlocksScreen/SummaryPage.svelte": "40dde2e524f9bc94b43f1527c2528b1c0788f25ee6a9bf1b0c0bfedcae50c46f",
+    "xgen/screens/BlocksScreen/TeamPage.svelte": "c5395d8a65cba4198739e0de5fd0d1ccf590f2ab0ecd03f85e44873189e2fec7",
+    "xgen/screens/BlocksScreen/TemplatesPage.svelte": "9059159bb74f428fefeb868f50e22d966e7fd6f53094b4d491aacfa9f7baaf69",
+    "xgen/screens/BlocksScreen/TestimonialsPage.svelte": "7cae452de89fcacef2fc5f39e026a83edcbb91d38a93dbd4843e1a7a5e4bd482",
+    "xgen/screens/BlocksScreen/TimelinePage.svelte": "d42c49114882b32a4635190199a691675be8840ee3d34313b271d3c6d34a0d2b",
+    "xgen/screens/BlocksScreen/TourPage.svelte": "910ab08f2d63f542eb825f4ff103c9ecef0e63e2d473edb93c9554d7ab171931",
+    "xgen/screens/BlocksScreen/UsagePage.svelte": "ca706bf82444389ace9748248b762dc33f6b087ed402785203286f9898574f09",
+    "xgen/screens/BlocksScreen/UspPage.svelte": "b5898c24d1779ed85be294774bf4ee5b5da57c3ecc2d94b7f212f51d432ec077",
+    "xgen/screens/BlocksScreen/VideomodalPage.svelte": "aef269a79dec9030bb6a13d0b96e4ee7ac42dc692d251515cf7b0c3658cae572",
+    "xgen/screens/BlocksScreen/VideosPage.svelte": "37556dcd4af7b33e6984dc08930a01485a8d83dc9a7add38f0365b48f054f3e4",
+    "xgen/screens/BlocksScreen/WizardPage.svelte": "5ce5ec69c98c5c721afe82f77e368d13e32e0c9daea7953e493019c7cf563ac5",
+    "xgen/screens/BlocksScreen/ZonesPage.svelte": "27d4edcf53d35c60175409d206338ad2b0f7c9dd814278eeb3fdd3160f2900fd",
+    "xgen/screens/CatalogScreen.svelte": "d3acf58c5f796601280f48db554e1d4f23020c3cc5f9a4caf3cd8b2f659109e0",
+    "xgen/screens/CatalogScreen/AppAuthPage.svelte": "e6e0c583232f23713bee4fbc6e070990a7e9385a2f871cf0055702c81851dd43",
+    "xgen/screens/CatalogScreen/AppAuthPagesPage.svelte": "1031c582b46004989a89a7353a88691abc82caa593dcf1fd7696d5ab4aea4fdc",
+    "xgen/screens/CatalogScreen/AppBoardsPage.svelte": "652a1020bd973bc83eecdae4d0a2159649868cebd99346e622b128e7e6299667",
+    "xgen/screens/CatalogScreen/AppDashboardShellsPage.svelte": "e474e4bc6eb9cd4c59d467a9e5b34f6a3c4203a73ac23506d3b1d5f85aa7044c",
+    "xgen/screens/CatalogScreen/AppGuidancePage.svelte": "294cdba705580413c7dfc0e17ef791b3f88c90f8d7fe8211b35030be9bd862f0",
+    "xgen/screens/CatalogScreen/AppOnboardingPage.svelte": "068aa0749fc7f6abaaf49eb404536a1a0bcd18e444e7fe63db9dd9b9736fbf2b",
+    "xgen/screens/CatalogScreen/AppSettingsPage.svelte": "62dc179f11a8df0665466a8417586bd59936319f864487b2b0a4117ea9c471f4",
+    "xgen/screens/CatalogScreen/AppShellPage.svelte": "b9c67921f6b3e9297c87946653560f7be4586b2f003d55297e296a7d9ec25b4a",
+    "xgen/screens/CatalogScreen/AppStatesPage.svelte": "e313b369e19500918423f2afc44430abec2c86f44593233566a4cdcad726e465",
+    "xgen/screens/CatalogScreen/AppWidgetsPage.svelte": "72cdcce567815cce9c4ea919b7cfce4b0b1fbf3ba670241558ca472e46139b8d",
+    "xgen/screens/CatalogScreen/CommerceCartPage.svelte": "2a00561795b31c2c9d0cc9a3a691a85bdfeed0e6aa0b7b9a6800482d8b3c7acf",
+    "xgen/screens/CatalogScreen/CommerceCategoriesPage.svelte": "64118aa3315588c1d037c6fe02a5566ee611bcf1a5bcd2d28aa2018fe82131e9",
+    "xgen/screens/CatalogScreen/CommerceCheckoutPage.svelte": "7c125e6c6046dfdada74da5e8b02c1368be459c73e348e12e99531fd0f52fa5c",
+    "xgen/screens/CatalogScreen/CommerceDeliveryPage.svelte": "b8884757688c634ca43c8c44b5600c4702b05d8adb2a0ae6d5b5464531454e2c",
+    "xgen/screens/CatalogScreen/CommerceOrdersPage.svelte": "49cf64e2b93f1a6c0b97d8ef7e521684bb8f8ae24116cd838148b7098d3fc35f",
+    "xgen/screens/CatalogScreen/CommerceProductPage.svelte": "289f20db804d274c3954abc6e91dca31f0652f6965cc470719a1e9c1b7c79ce0",
+    "xgen/screens/CatalogScreen/CommerceProductsPage.svelte": "3e5718ea1b591af8eb08d141d7a7a191ae53c9181657b7c9e928612fcfc15e37",
+    "xgen/screens/CatalogScreen/CommerceStorefrontPage.svelte": "3d4b64151f7f6b122de173c42c9d8ffeb814634bac62989f8565df44b25f3729",
+    "xgen/screens/CatalogScreen/ContentArticlePage.svelte": "2b7a866358b088770c62b6e90ce82884fbd168a52b6a1c52d50bba903cce4124",
+    "xgen/screens/CatalogScreen/ContentBlogPage.svelte": "b37bd7dd79c666c2ad50cde17deba780b83bf1d9be8731066bfb7355fcd2ac2a",
+    "xgen/screens/CatalogScreen/ContentPostHeaderPage.svelte": "0451d448681d45f291c3d7a8d46cbfca46ac332a640617f791802c9c41251c52",
+    "xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.svelte": "6dcbd75e3ad9c037b61bfcc3eecc1fa45e1079ffaff48465cc68b386e1c0a6ac",
+    "xgen/screens/CatalogScreen/ContentPostShowcasePage.svelte": "60371b50c8c0ba09649ab86d31eb7f1b4c15e5298f8aacb966c587754db07045",
+    "xgen/screens/CatalogScreen/ContentStoryTabsPage.svelte": "b110a2c43ea86ec23bbd49dda6054371f03146309ede08f4541276635157f7cf",
+    "xgen/screens/CatalogScreen/ContentTimelinePage.svelte": "1cc003f58ac1c4b1703f196327f77472bb4a85915bcb775c66726d30e7dbf1f5",
+    "xgen/screens/CatalogScreen/IndexPage.svelte": "0715969eded34f7c3c33a3a5cc4625dc76ee7b56a8c44128c024e9ab9fee26ee",
+    "xgen/screens/CatalogScreen/MarketingAboutPage.svelte": "8c20ca63d5e03c2c0b4917bc52c7bfdbec61b7c5ecd1699cee7299053df48013",
+    "xgen/screens/CatalogScreen/MarketingCareersPage.svelte": "d45d09ef6d2d857ff768f3fc5086eb7ca06c2ddde0665a72d5744bd69b510307",
+    "xgen/screens/CatalogScreen/MarketingCtaPage.svelte": "de8ea59ab177adeaa8cd57d0c73ab1a8fc97d3b88f36d90ca1b8dceb90667375",
+    "xgen/screens/CatalogScreen/MarketingCtaProofPage.svelte": "6ca975cdc31f9d9470d888b193529191defee3746d7e8383e8f6d1338839e676",
+    "xgen/screens/CatalogScreen/MarketingFaqPage.svelte": "78e976c59a469855f5e582eb3f8e2bddaddc8609adb9820ce64619bea676b832",
+    "xgen/screens/CatalogScreen/MarketingFeatureCardsPage.svelte": "fecafa6335ea62148b3926afdb2993b204855ab2b6c9d7a978d76f62485b67b5",
+    "xgen/screens/CatalogScreen/MarketingFeaturesPage.svelte": "fde17065736085f060a1fe29e81f7a685290d87786b1c5b14ae7ec6925ccee27",
+    "xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.svelte": "4a234f444fbe4f38e1cee254f27213efc57611a514acb2958d3d275b25b17739",
+    "xgen/screens/CatalogScreen/MarketingFooterPage.svelte": "1d853109d360f4d5b2c6f04d5b83e46ed333e029d4faeac5131c71799d7ed85b",
+    "xgen/screens/CatalogScreen/MarketingFooterSplitPage.svelte": "c8a0b0bd0013b4efafdd75a88b91f6f25a6eae604cc1ca125463a3ecd163058e",
+    "xgen/screens/CatalogScreen/MarketingGalleryPage.svelte": "d5ba9dbb766be0448fa94f90ae79734add13648d4b3d057bda257b069f1a33fe",
+    "xgen/screens/CatalogScreen/MarketingHeroPage.svelte": "7b11cf3c00400ca3fb53c0dfc0a28e3d2dd95bf2530ff1997fa02242bce06d4f",
+    "xgen/screens/CatalogScreen/MarketingHeroSplitPage.svelte": "8b94afb19ccd95b9b14b78e365b28ea61be880e5e886ab5fcf442ebbe4fee052",
+    "xgen/screens/CatalogScreen/MarketingHowItWorksPage.svelte": "e5c56161247077690f7243dda2509f91a1707187e5f574ce3e759c5ffaa0a684",
+    "xgen/screens/CatalogScreen/MarketingMediaListPage.svelte": "bb664b1b84a5c3594549435908f367d5a50bd9ad565f8ace6888894fad00ec92",
+    "xgen/screens/CatalogScreen/MarketingNavigationPage.svelte": "c3346dc6a864455bf42b783023a0c3eb8bcfe2c26b9b99b752f6455417637131",
+    "xgen/screens/CatalogScreen/MarketingPageHeadPage.svelte": "a1afe0d07f6d67a9f661ddfa5f120171838c88566df656071ce20e12741e41de",
+    "xgen/screens/CatalogScreen/MarketingPageTrailPage.svelte": "bd6d158b15afc4d2a15d1277a2bd38d9e5c51da34b3cffa2dba4643487e7b585",
+    "xgen/screens/CatalogScreen/MarketingPortfolioPage.svelte": "c8447d73c803df6e5a2fb916ee8e8bd6df8ea6130d2a9977bd93f8beedb6ff92",
+    "xgen/screens/CatalogScreen/MarketingPricingPage.svelte": "80cbb3e3ec6c9355dccb0e1ab67d8e0cbd0d7a7ffb4ae717612623c05781bdb6",
+    "xgen/screens/CatalogScreen/MarketingPricingToolsPage.svelte": "4f6889eef31e3e9c32df7f0c0958f0809835639922b4a78905b654e74ddee034",
+    "xgen/screens/CatalogScreen/MarketingProofPage.svelte": "351f8dfc2d9097d65c024aa6d22784c64bc9880754dd49ed575f33dcf0a2a506",
+    "xgen/screens/CatalogScreen/MarketingShowcasesPage.svelte": "fcd891ec8d6c5725eca4389d5fba93fabceca1e0987d152692e2f84f82bd6a15",
+    "xgen/screens/CatalogScreen/MarketingStatsPage.svelte": "44ebf0fcb4e4d99a3f3f6ece70bd84f26096dc823fac75ff8a6b1c35cff714ae",
+    "xgen/screens/CatalogScreen/MarketingTeamPage.svelte": "623d21db4f528111ff5ef2221e98fc3fb8ad51ebbc0a0c36566dff1613e114b8",
+    "xgen/screens/CatalogScreen/MarketingTestimonialsPage.svelte": "e28196e85078a81ddc5824b036114ff6b0a57ab1e5aa35a464c3b5157d0a7919",
+    "xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.svelte": "b6e574e4702731709b85d48e75ad4fba2747c428be8251a68af83041ddb976e8",
+    "xgen/screens/CatalogScreen/NotfoundPage.svelte": "b756d9f2060148e09e09132f7560a7c2207057a2eee7e6eb6f5312291466db23",
+    "xgen/screens/CatalogScreen/PageCartPage.svelte": "445f5b70b601b80d01c132ff5f3e83794d9f715617bdb8a393663e84d87e4160",
+    "xgen/screens/CatalogScreen/PageCheckoutPage.svelte": "5976fc350e6d493b80a59764829357ad3ac9af7f31f6a811c51b37f2b5e2a28c",
+    "xgen/screens/CatalogScreen/PageCompanyPage.svelte": "2b22f0f154888499c0fc2052b287eb2b4211dceaff3e450074bcc281f57a1ca4",
+    "xgen/screens/CatalogScreen/PagePortfolioPage.svelte": "41eddf074fe9a2edbcea0723b958c52323d8807aaf8d6c7d0b81810bc801170b",
+    "xgen/screens/CatalogScreen/PageProductDetailPage.svelte": "cd483737f04fca98f3e0baedaf0eb551ff66d1283792e2ab61fe91a20ac14aad",
+    "xgen/screens/CatalogScreen/PageSaasLandingPage.svelte": "3d8fc24c691e785e2fff99254a153eec7865a135f946623941fd56432f8ef75f",
+    "xgen/screens/CatalogScreen/PageShellClassicPage.svelte": "e77bfbdeb0a47530f1c9bffac22c2a5fe1729b8e59620a187fcc5d97197073a3",
+    "xgen/screens/CatalogScreen/PageShellCollapsedEndPage.svelte": "6995beb96bdfaf01b7e1127c5257f695eebc2c87758703652e97dce979ca0546",
+    "xgen/screens/CatalogScreen/PageShellCollapsedPage.svelte": "619d83067376a02e21f0f46632edcb9c04d8e4062cf484fa6b7de9c3d8f1817e",
+    "xgen/screens/CatalogScreen/PageShellEndPage.svelte": "08c6f47761fec247067514cc3ce1719ac4bb46c81ad3254822a80fbca96efd37",
+    "xgen/screens/CatalogScreen/PageShellInsetPage.svelte": "62107f910dfef1f6ac2f817294b44118154115631feb791b987e74b84133b275",
+    "xgen/screens/CatalogScreen/PageShellRailEndPage.svelte": "da53c8cebf0ea1bf735315f9e468e74a8ea96b48dad42a82002d555fb36a70ea",
+    "xgen/screens/CatalogScreen/PageShellRailFooterPage.svelte": "f0c7e6baaa565b9ff7f73095ecd3d9c167a99ace6d874d9d809408ade4aff660",
+    "xgen/screens/CatalogScreen/PageShellRailPage.svelte": "1e4cb73a322fbcecf881315d7c5f37a7898847720613cf16b48268c83a418737",
+    "xgen/screens/CatalogScreen/PageShellSideOnlyPage.svelte": "7179377903424598076c75f3553b60c59928d76ac2f69cc146b5e5336e60fe09",
+    "xgen/screens/CatalogScreen/PageShellTopOnlyPage.svelte": "aaf2107591a8a398bf383a8361073dd91dcd65eab8550c62b81a289af6ce64a2",
+    "xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.svelte": "915206cc1a1a541aeaee0fe38c1c6db0db8645fc6f9bb7ae9c2719303324a7a9",
+    "xgen/screens/CatalogScreen/PageShellTwoLevelPage.svelte": "18e4ce759e0783ee17356526a6972b025b78f22442ddf509387852e2f520d68d",
+    "xgen/screens/CatalogScreen/PagesPage.svelte": "7eb8db77c7586b90d499f074999013e3a91c860f6925cac4a5eafe37886170f0",
+    "xgen/screens/CatalogScreen/PageStoreCatalogPage.svelte": "1d479d2453fa621e55e214bb85fb42cf84422b58bb7ffc0558f651afb95df390",
+    "xgen/screens/CatalogScreen/PageStoreHome2Page.svelte": "462bf0965463ed6eac7dadb58e5335023f1a8a7daf94169bbe3f5a5a1f0ad7d7",
+    "xgen/screens/CatalogScreen/PageStoreHomePage.svelte": "04b92ec1bd01cc30f31fe0e9ed218979249aa79e1534af357b4472f11e12a5b0",
+    "xgen/screens/CatalogScreen/PromoBannersPage.svelte": "976c13fb8eb649441169dd68fc96a581d02966466567ca73061c606c24704feb",
+    "xgen/screens/CatalogScreen/PromoNewsletterPage.svelte": "cab1f60ca9e6b0d96d2d7c7d4f0b450b33acccd0f0713ae247251a8897e3562f",
+    "xgen/screens/CatalogScreen/ScreenHeader.svelte": "ebb63e5f48024910e70367d266e7c894d0ab4cc0d994d7cc82f50bacc04371c5",
+    "xgen/screens/CatalogScreen/SupportContactPage.svelte": "5311a9a57a6dcd3ff3f56fce187934b4fee67f71401f2a0be2075e2d775096e0",
+    "xgen/screens/CatalogScreen/SupportStatesPage.svelte": "6d3039f6e196d44fc0ec1ac59909460fd8440d00a5c1b237e3c0b6e0873745f3",
+    "xgen/screens/PlansScreen.svelte": "ce1803d899672171a2093d5a44b054d290885bf1ef5871c6263bca273531cbcd",
+    "xgen/screens/SiteScreen.svelte": "8ab7c9cc9a81205964a32593b3490a53c33f2663a5bba14a7cadcb5b94508234",
+    "xgen/screens/SkinsScreen.svelte": "7f9dc2a61e88edab3bf1786e415078daf0f1f032de1ed7bf0c2c9e9ba72e04e5",
+    "xgen/screens/SkinsScreen/IndexPage.svelte": "96efc548abf4a1070387dfc07d76abee8e3df0774a5d2f107f923a1cd1224fc6",
+    "xgen/screens/SkinsScreen/NotfoundPage.svelte": "fd103f4b7a0dc47fc03e1d2e72c90ac949f853108276f125327fe8893fe39566",
+    "xgen/screens/SkinsScreen/ScreenHeader.svelte": "e05b05d76c6589470cae88177aa67a24b62dfc882623093919a2195188db7cfc",
+    "xgen/screens/ThemeAccountPortalScreen.svelte": "bc831eb174308c7c6cf7584c4da414d91c9f6df8853ffd92c3267cef7e34cf14",
+    "xgen/screens/ThemeAccountPortalScreen/CardsPage.svelte": "37bef3d1606a7cf8281325eb14ddba59a606fc6313ca2f42706366c307441a3c",
+    "xgen/screens/ThemeAccountPortalScreen/HomePage.svelte": "a5b1ba88108094e492b18f3053a9614ad3d004dd1ec87c9d3c757142dfa5a342",
+    "xgen/screens/ThemeAccountPortalScreen/JoinPage.svelte": "92de85cf3cf91a1381d8cdf66ce1d81a91d66301e21ac1038ae720b2c829e290",
+    "xgen/screens/ThemeAccountPortalScreen/MagicPage.svelte": "cb49a4340470c119bba3a0a0a26fd8c5056a5378deb3ebf7625f864924a03f96",
+    "xgen/screens/ThemeAccountPortalScreen/MinimalPage.svelte": "0726412ac88351c57bb4305813244f5555d040982e6aaff1bf2ee7affa7a33d6",
+    "xgen/screens/ThemeAccountPortalScreen/OptionsPage.svelte": "ec7b5a551bc6dbd14c522ed47071af348cd80f6a109a5d1b7d7b1f65b83f280a",
+    "xgen/screens/ThemeAccountPortalScreen/ProfilePage.svelte": "5b42a4abd1f958d1b3e644acc99606f957f82eeaf114d51773917148606a84a6",
+    "xgen/screens/ThemeAccountPortalScreen/ResetPage.svelte": "00807f2b9721a26ffe2cb158ca53eb6f138621ca462d94fbfdcd20bb5f2e2931",
+    "xgen/screens/ThemeAccountPortalScreen/SignupPage.svelte": "f2664968c062950af13f8ab7029df1efb56858c6331f093ec7bf316267bfa4e3",
+    "xgen/screens/ThemeAccountPortalScreen/StartPage.svelte": "3c88dbb4739d6a8009035d25ea6a4e429bd96724e592956700ff3633abe85086",
+    "xgen/screens/ThemeAccountPortalScreen/WelcomePage.svelte": "8e360d06cf9793262f278b988f8638a6f64d5eab0e1f72d734bb9626112cdafe",
+    "xgen/screens/ThemeCommerceShopScreen.svelte": "f31288a75a851904986442c4b6357cc1bd93fb3108a8f84bf71ae3b96e405179",
+    "xgen/screens/ThemeCommerceShopScreen/BrowsePage.svelte": "246de1c4431ac024dfc78667bdcd83892a133dd5a5a2dff4080cbbbf088e8a62",
+    "xgen/screens/ThemeCommerceShopScreen/CartPage.svelte": "9ed99f46f719910f19421af2691b76986fdbed87736c52390c1ee17b16f415d3",
+    "xgen/screens/ThemeCommerceShopScreen/CatalogPage.svelte": "aa40017fe9e4c4efd42d2b92c59580d998f3b44f79a26e378aeec5f2ce4b0dd5",
+    "xgen/screens/ThemeCommerceShopScreen/CheckoutPage.svelte": "3e9edfcc91e7517e5ed2047ccb423ebd05016c10574c0698ffd47be63d7e77f8",
+    "xgen/screens/ThemeCommerceShopScreen/DeliveryPage.svelte": "db42768c30076aa10fe688de79d6b74646ad358ab28ebc199e40954e70562161",
+    "xgen/screens/ThemeCommerceShopScreen/HomePage.svelte": "b280d785904c2a2290a5b5eff63d7ea23cc7b96752f258a49bf07019f5396ece",
+    "xgen/screens/ThemeCommerceShopScreen/OffersPage.svelte": "c6cc7bdc3736a15e92f98861e03664913cd5ea4e9baa2bf524c79ccf24a69b8f",
+    "xgen/screens/ThemeCommerceShopScreen/OrdersPage.svelte": "4751d5790f49683f12a0a96bd2befe9e86c10913282cc402ffb480748e466e04",
+    "xgen/screens/ThemeCommerceShopScreen/ProductPage.svelte": "9d26f4a144bea83326b8ca27f589e01cf03913d25c4d1dd281b3b67313a50d12",
+    "xgen/screens/ThemeContentBlogScreen.svelte": "eac01cf74dbb84862da53ca60f9706d425d7ac0af6d4274ba7896c8c9ded0301",
+    "xgen/screens/ThemeContentBlogScreen/ArchivePage.svelte": "f433b992f5bb75b5d1928618a1dcf192bd039c38bafb5b9ed7a8420649e84351",
+    "xgen/screens/ThemeContentBlogScreen/ArticlesPage.svelte": "26af8487e96765aa1c34b0bfdd28b6928d49b91fd3e8cff283ffe5cd4c614b21",
+    "xgen/screens/ThemeContentBlogScreen/EssayPage.svelte": "fad1c5979610fa65df2b8efa87604692d606b5829093e6554f005907343541d2",
+    "xgen/screens/ThemeContentBlogScreen/HomePage.svelte": "0df32979453ec537ce65b8ac6d81f9944fafa712fae595875597906fb7790426",
+    "xgen/screens/ThemeContentBlogScreen/PlainPage.svelte": "76ea39195092f8f7663ca3685a3e06a8e3465642f57c9614787f294da69feb5b",
+    "xgen/screens/ThemeContentBlogScreen/PostPage.svelte": "029a08d8d2f8e77ab893525246afa8c121fae06f478366de69ca62d34961589b",
+    "xgen/screens/ThemeContentBlogScreen/StoryPage.svelte": "d097074502e4e9eb50cbd1a5ca236d2fe21d5e84faaf641655f2cb2b1af1ef3b",
+    "xgen/screens/ThemeDashboardConsoleScreen.svelte": "82d47227d963113e4fb2fd5c6002e9b2ec5f72a5a27d52aac76318f0336972b9",
+    "xgen/screens/ThemeDashboardConsoleScreen/BoardPage.svelte": "bafb87db6876fa10cd9498d5f34121d6d089f61ff32ffec333e23b571e8279fb",
+    "xgen/screens/ThemeDashboardConsoleScreen/HomePage.svelte": "db57ed641b3b8aa00d3a98a46c3e0ac4ec9cbbec4cc2de5f0e20c0a45ab00155",
+    "xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.svelte": "1ab0e11aa2adf7f913b1a31b2babd7b19046c3bce6cd990f6382a1406c33985d",
+    "xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.svelte": "79ff96d158c05b0852fb92f1a3a53b91fc756e6934ea7145530763398879cbf6",
+    "xgen/screens/ThemeDashboardConsoleScreen/StatesPage.svelte": "24ccbb511a436e8cf4e3d516cba081fdbfbf43f78f608ec289156b8fd71f6e27",
+    "xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.svelte": "7ba64aea47c9cd9e9af73ab0708e878441b0d00096ead59f396b083b15e1faec",
+    "xgen/screens/ThemeMarketingLandingScreen.svelte": "3189b96de387374f519da7930ef6c2018a8bedc9b025f45da38848703502e09d",
+    "xgen/screens/ThemeMarketingLandingScreen/CompanyPage.svelte": "ca75c86112512bfc3f5d17b6ca06b7a38a36e4d0fd859a0c7f66575b80513985",
+    "xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.svelte": "0bfcd0f88d72047d99b25f3389aba5c5c5c66126cc089c7c2a3daa59f9ff329d",
+    "xgen/screens/ThemeMarketingLandingScreen/EventsPage.svelte": "c7937105a8af90c324bdd5b5f1e5e18db6c8ec2b43bd00e4f435dcd7c3d63c2b",
+    "xgen/screens/ThemeMarketingLandingScreen/HomePage.svelte": "4aa1202f391f753b550455d7d25c8f3e3fe1b0b767ac2fd4a7b7ea6c1f74cd1a",
+    "xgen/screens/ThemeMarketingLandingScreen/LaunchPage.svelte": "4ae538b98213950e1f5bf7adfff13e1638858d9f9cb2e3b7e58b1fcee370a207",
+    "xgen/screens/ThemeMarketingLandingScreen/StudioPage.svelte": "2aab9cf7024b54947ac20395a8f591b78ebe40666cf7d0cca3076e1dda57e331",
+    "xgen/screens/ThemeMarketingLandingScreen/TeamsPage.svelte": "cd3f457be53b66267ce4e021ac60576c3f6a84f968eacb7a9a6a1cf0242a97fb",
+    "xgen/screens/ThemeMarketingLandingScreen/WorkPage.svelte": "4dea1d64be46d1915c0865890c540e6efecc282f12b1a9c368cc97bcb2532245",
+    "xgen/screens/ThemeMarketingPricingScreen.svelte": "b2042fc2df42e5d1ede90986fad0276f6899111bba1b0e1546ea8470ab8cca57",
+    "xgen/screens/ThemeMarketingPricingScreen/ComparePage.svelte": "4b7158e2618cdaab211903bb9465179fe8732accd8b12df19845d7f730ae1834",
+    "xgen/screens/ThemeMarketingPricingScreen/HomePage.svelte": "3ba96addf12bea6d4aacb9a20ecbc8f16a7efc483630cdd889981a3ca9b5ca10",
+    "xgen/screens/ThemeMarketingPricingScreen/PlansPage.svelte": "ba9e7cc0cf199daa8a25f41524e66bcd107327ab1ea2d8450d030a61e351a342",
+    "xgen/screens/ThemeMarketingPricingScreen/UsagePage.svelte": "6ab288707fbb627a476bcfbbb328e08b0d72ae43139dff7dbf48fb743bb5fcb5",
+    "xgen/screens/ThemeMarketingProductScreen.svelte": "aeb881513d5be98ea4647c7459622abda6f48d39ed1fac3d7c217a15495c1bee",
+    "xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.svelte": "6306bb71888050a43bcd84902ae46384268dbc73f4abe19afb3d5243023a520b",
+    "xgen/screens/ThemeMarketingProductScreen/HomePage.svelte": "4bbd4840a4ca76910981f4676fe727eccecceb0408f89f5034afb32454d6365d",
+    "xgen/screens/ThemeMarketingProductScreen/NavigationPage.svelte": "51c8db524b2baa325b358cce59d0768af484891a2207d1c3f40b780d1a8befac",
+    "xgen/screens/ThemeMarketingProductScreen/TourPage.svelte": "43cfec3491808386c66e816c36fd79917eab31e320e1ced86c410e3272e3799e",
+    "xgen/screens/ThemeOnboardingFlowScreen.svelte": "1b450c4f5a00994b2c94859f45a903f3f09e9a62f1d2385d2d074675734f283d",
+    "xgen/screens/ThemeOnboardingFlowScreen/HomePage.svelte": "a5bfbe6c52aecf37165186d52fe22343734bd24fa83b0445418687e6e58eb6f8",
+    "xgen/screens/ThemeOnboardingFlowScreen/SetupPage.svelte": "bc6049fb6015fb78ea4562bdca0815601df656e2b9c61f26ae9189d7754a233f",
+    "xgen/screens/ThemeOnboardingFlowScreen/TourPage.svelte": "eaf8838940d2c3b8ef73f0b63250434371d78d0ae7d65f110b5c2f31dd5d3175",
+    "xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.svelte": "2a8fc94deb5e629d311193bf0def4a7808d2865da56e00cb940239b6c9565553",
+    "xgen/screens/ThemePromoCampaignScreen.svelte": "bab14ee16bce848a1b98a6583c8284c1e31102748ad22b33189c64a43ec24879",
+    "xgen/screens/ThemePromoCampaignScreen/HomePage.svelte": "59434bab349a236dd48d77dc2c70895a3c97948ef8b02f059bb859cafa64846e",
+    "xgen/screens/ThemePromoCampaignScreen/LaunchPage.svelte": "247249b360c86d6847cb8d5bd80cc3651510528df288a4ca549aaffb83fbc2da",
+    "xgen/screens/ThemePromoCampaignScreen/NoticesPage.svelte": "5b7cb03ed355aa600efa137ade4ddd21dc2df02fce34c44d7e3ba239a48ef1ac",
+    "xgen/screens/ThemePromoCampaignScreen/OfferPage.svelte": "ffb02b4ff7757a7ee116afd4e9d5fad0e74b92bdbd8903c7987cf967f2fa6da0",
+    "xgen/screens/ThemeSupportCenterScreen.svelte": "e83e5e7b2c4e214909095d6b4d6ec03d366a6b28ff0e06486c91c98792bac756",
+    "xgen/screens/ThemeSupportCenterScreen/ContactPage.svelte": "68ad6a681a91ff88ee4ca14d4220959dc49ba4c8015dfedefb63974de881720f",
+    "xgen/screens/ThemeSupportCenterScreen/FaqPage.svelte": "eb4ed5fe0931b1fe3416e621571dc5d3baf8541bbd2e9f5794dde58fa49ec928",
+    "xgen/screens/ThemeSupportCenterScreen/HomePage.svelte": "5e8da80bcfcb8c3eae56269b527778dc166717fdd6022a1654951c40061f73b8",
+    "xgen/screens/ThemeSupportCenterScreen/MissingPage.svelte": "4a5bc976e2569165e80b2ef841c26158045eeff8d94a425f2ad190f56a23bccb",
+    "xgen/screens/ThemeSupportCenterScreen/MovedPage.svelte": "4b910c980ff1fbac660937b3d609394b79a2467e6a8d0dbd3b4f6c5066745e3d"
+  }
+}
diff --git a/apps/host-svelte/xgen/App.svelte b/apps/host-svelte/xgen/App.svelte
new file mode 100644
index 0000000..28926a3
--- /dev/null
+++ b/apps/host-svelte/xgen/App.svelte
@@ -0,0 +1,46 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/runtimes/svelte/src/app.ts (settings: apps/host-svelte/xgen.app.json) -->
+<script lang="ts">
+  import type { Component } from "svelte";
+  import { SCREENS } from "@ui8kit/app-shared/screens";
+  import type { UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { Block, Link, List, ListItem, Title } from "@ui8kit/svelte-ui";
+  import { url } from "./runtime/url.svelte";
+
+  let { screen, title }: { screen: string; title: string } = $props();
+
+  /** one chunk per screen: a landing is a screen spec, not an app */
+  const LOADERS: Record<string, () => Promise<{ default: Component<{ url: UrlPort }> }>> = {
+    "blocks": () => import("./screens/BlocksScreen.svelte"),
+    "catalog": () => import("./screens/CatalogScreen.svelte"),
+    "plans": () => import("./screens/PlansScreen.svelte"),
+    "site": () => import("./screens/SiteScreen.svelte"),
+    "skins": () => import("./screens/SkinsScreen.svelte"),
+    "theme-account-portal": () => import("./screens/ThemeAccountPortalScreen.svelte"),
+    "theme-commerce-shop": () => import("./screens/ThemeCommerceShopScreen.svelte"),
+    "theme-content-blog": () => import("./screens/ThemeContentBlogScreen.svelte"),
+    "theme-dashboard-console": () => import("./screens/ThemeDashboardConsoleScreen.svelte"),
+    "theme-marketing-landing": () => import("./screens/ThemeMarketingLandingScreen.svelte"),
+    "theme-marketing-pricing": () => import("./screens/ThemeMarketingPricingScreen.svelte"),
+    "theme-marketing-product": () => import("./screens/ThemeMarketingProductScreen.svelte"),
+    "theme-onboarding-flow": () => import("./screens/ThemeOnboardingFlowScreen.svelte"),
+    "theme-promo-campaign": () => import("./screens/ThemePromoCampaignScreen.svelte"),
+    "theme-support-center": () => import("./screens/ThemeSupportCenterScreen.svelte"),
+  };
+  const load = $derived(LOADERS[screen]);
+</script>
+
+{#if !load}
+  <Block tag="main" id="main-content" class="mx-auto w-full max-w-3xl px-4 py-12" data-testid="host-index">
+    <Title as={1} size="2xl" weight="semibold">{title}</Title>
+    <List class="mt-6 grid gap-2">
+      {#each SCREENS as s (s.key)}
+        <ListItem><Link class="underline" href={`/${s.key}/`} data-testid="host-screen">{s.key}</Link></ListItem>
+      {/each}
+    </List>
+  </Block>
+{:else}
+  {#await load() then mod}
+    <mod.default {url} />
+  {/await}
+{/if}
diff --git a/apps/host-svelte/xgen/runtime/url.svelte.ts b/apps/host-svelte/xgen/runtime/url.svelte.ts
new file mode 100644
index 0000000..ec55afb
--- /dev/null
+++ b/apps/host-svelte/xgen/runtime/url.svelte.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/svelte/assets/url.svelte.ts
+// The URL as a reactive port for Svelte: the hash store of the app runtime, mirrored into runes.
+import { createHashStore, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+
+class SvelteUrl implements UrlPort {
+  path = $state("");
+  query = $state<Record<string, string>>({});
+  readonly #store = createHashStore();
+
+  constructor() {
+    this.#sync();
+    this.#store.subscribe(() => this.#sync());
+  }
+
+  #sync(): void {
+    const s = this.#store.getSnapshot();
+    this.path = s.path;
+    this.query = s.query;
+  }
+
+  go(path: string, query?: Record<string, string | undefined>): void {
+    this.#store.go(path, query);
+  }
+}
+
+export const url: UrlPort = new SvelteUrl();
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen.svelte b/apps/host-svelte/xgen/screens/BlocksScreen.svelte
new file mode 100644
index 0000000..86f0c68
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen.svelte
@@ -0,0 +1,401 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!--
+  The block gallery: an index of blocks grouped by topic and one page per block with every variant, on the
+  fixtures. Built from the block catalog; nothing is written by hand.
+-->
+<script lang="ts">
+  import { Block } from "@ui8kit/svelte-ui";
+  import IndexPage from "./BlocksScreen/IndexPage.svelte";
+  import AboutPage from "./BlocksScreen/AboutPage.svelte";
+  import AboutmePage from "./BlocksScreen/AboutmePage.svelte";
+  import AccordionPage from "./BlocksScreen/AccordionPage.svelte";
+  import BeforeafterPage from "./BlocksScreen/BeforeafterPage.svelte";
+  import BentoPage from "./BlocksScreen/BentoPage.svelte";
+  import ComparePage from "./BlocksScreen/ComparePage.svelte";
+  import CreditsPage from "./BlocksScreen/CreditsPage.svelte";
+  import CtaPage from "./BlocksScreen/CtaPage.svelte";
+  import CtaproofPage from "./BlocksScreen/CtaproofPage.svelte";
+  import FaqPage from "./BlocksScreen/FaqPage.svelte";
+  import FaqsplitPage from "./BlocksScreen/FaqsplitPage.svelte";
+  import FeaturesPage from "./BlocksScreen/FeaturesPage.svelte";
+  import FeatureshowcasePage from "./BlocksScreen/FeatureshowcasePage.svelte";
+  import FeaturesplitPage from "./BlocksScreen/FeaturesplitPage.svelte";
+  import FeaturetabsPage from "./BlocksScreen/FeaturetabsPage.svelte";
+  import FooterPage from "./BlocksScreen/FooterPage.svelte";
+  import FootersplitPage from "./BlocksScreen/FootersplitPage.svelte";
+  import HeaderPage from "./BlocksScreen/HeaderPage.svelte";
+  import HeroPage from "./BlocksScreen/HeroPage.svelte";
+  import HerosplitPage from "./BlocksScreen/HerosplitPage.svelte";
+  import IconwallPage from "./BlocksScreen/IconwallPage.svelte";
+  import JobsPage from "./BlocksScreen/JobsPage.svelte";
+  import LogosPage from "./BlocksScreen/LogosPage.svelte";
+  import MedialistPage from "./BlocksScreen/MedialistPage.svelte";
+  import MegamenuPage from "./BlocksScreen/MegamenuPage.svelte";
+  import NavbarPage from "./BlocksScreen/NavbarPage.svelte";
+  import PageheadPage from "./BlocksScreen/PageheadPage.svelte";
+  import PagetrailPage from "./BlocksScreen/PagetrailPage.svelte";
+  import PhotosPage from "./BlocksScreen/PhotosPage.svelte";
+  import PlanPage from "./BlocksScreen/PlanPage.svelte";
+  import PricingPage from "./BlocksScreen/PricingPage.svelte";
+  import ProjectsPage from "./BlocksScreen/ProjectsPage.svelte";
+  import ProofPage from "./BlocksScreen/ProofPage.svelte";
+  import QuotesplitPage from "./BlocksScreen/QuotesplitPage.svelte";
+  import SitemapPage from "./BlocksScreen/SitemapPage.svelte";
+  import StatsPage from "./BlocksScreen/StatsPage.svelte";
+  import StepsPage from "./BlocksScreen/StepsPage.svelte";
+  import StickyPage from "./BlocksScreen/StickyPage.svelte";
+  import TeamPage from "./BlocksScreen/TeamPage.svelte";
+  import TemplatesPage from "./BlocksScreen/TemplatesPage.svelte";
+  import TestimonialsPage from "./BlocksScreen/TestimonialsPage.svelte";
+  import UsagePage from "./BlocksScreen/UsagePage.svelte";
+  import VideosPage from "./BlocksScreen/VideosPage.svelte";
+  import CartPage from "./BlocksScreen/CartPage.svelte";
+  import CartdrawerPage from "./BlocksScreen/CartdrawerPage.svelte";
+  import CartpagePage from "./BlocksScreen/CartpagePage.svelte";
+  import CategoriesPage from "./BlocksScreen/CategoriesPage.svelte";
+  import CheckoutPage from "./BlocksScreen/CheckoutPage.svelte";
+  import DeliveryPage from "./BlocksScreen/DeliveryPage.svelte";
+  import LocationsPage from "./BlocksScreen/LocationsPage.svelte";
+  import OrdersPage from "./BlocksScreen/OrdersPage.svelte";
+  import ProductPage from "./BlocksScreen/ProductPage.svelte";
+  import ProductinfoPage from "./BlocksScreen/ProductinfoPage.svelte";
+  import ProductsPage from "./BlocksScreen/ProductsPage.svelte";
+  import ReviewsPage from "./BlocksScreen/ReviewsPage.svelte";
+  import SlotsPage from "./BlocksScreen/SlotsPage.svelte";
+  import StoreheroPage from "./BlocksScreen/StoreheroPage.svelte";
+  import SummaryPage from "./BlocksScreen/SummaryPage.svelte";
+  import UspPage from "./BlocksScreen/UspPage.svelte";
+  import ZonesPage from "./BlocksScreen/ZonesPage.svelte";
+  import AnnouncementPage from "./BlocksScreen/AnnouncementPage.svelte";
+  import CookiePage from "./BlocksScreen/CookiePage.svelte";
+  import NewsletterPage from "./BlocksScreen/NewsletterPage.svelte";
+  import ArticlePage from "./BlocksScreen/ArticlePage.svelte";
+  import PostheaderPage from "./BlocksScreen/PostheaderPage.svelte";
+  import PostsPage from "./BlocksScreen/PostsPage.svelte";
+  import PostshowcasePage from "./BlocksScreen/PostshowcasePage.svelte";
+  import PostsplitPage from "./BlocksScreen/PostsplitPage.svelte";
+  import StorytabsPage from "./BlocksScreen/StorytabsPage.svelte";
+  import TimelinePage from "./BlocksScreen/TimelinePage.svelte";
+  import AuthPage from "./BlocksScreen/AuthPage.svelte";
+  import AuthpagePage from "./BlocksScreen/AuthpagePage.svelte";
+  import ProfilePage from "./BlocksScreen/ProfilePage.svelte";
+  import WizardPage from "./BlocksScreen/WizardPage.svelte";
+  import ActivityPage from "./BlocksScreen/ActivityPage.svelte";
+  import BottomnavPage from "./BlocksScreen/BottomnavPage.svelte";
+  import ChartPage from "./BlocksScreen/ChartPage.svelte";
+  import DashshellPage from "./BlocksScreen/DashshellPage.svelte";
+  import EmptyPage from "./BlocksScreen/EmptyPage.svelte";
+  import KanbanPage from "./BlocksScreen/KanbanPage.svelte";
+  import MetricsPage from "./BlocksScreen/MetricsPage.svelte";
+  import OverviewPage from "./BlocksScreen/OverviewPage.svelte";
+  import ShellPage from "./BlocksScreen/ShellPage.svelte";
+  import SidenavPage from "./BlocksScreen/SidenavPage.svelte";
+  import SkeletonPage from "./BlocksScreen/SkeletonPage.svelte";
+  import ChecklistPage from "./BlocksScreen/ChecklistPage.svelte";
+  import StepperPage from "./BlocksScreen/StepperPage.svelte";
+  import TourPage from "./BlocksScreen/TourPage.svelte";
+  import VideomodalPage from "./BlocksScreen/VideomodalPage.svelte";
+  import ChannelsPage from "./BlocksScreen/ChannelsPage.svelte";
+  import ContactPage from "./BlocksScreen/ContactPage.svelte";
+  import ErrorpagePage from "./BlocksScreen/ErrorpagePage.svelte";
+  import NotfoundPage from "./BlocksScreen/NotfoundPage.svelte";
+  import ScreenHeader from "./BlocksScreen/ScreenHeader.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const ROUTES = [
+    {"path":"","area":"index"},
+    {"path":"about","area":"about"},
+    {"path":"aboutme","area":"aboutme"},
+    {"path":"accordion","area":"accordion"},
+    {"path":"beforeafter","area":"beforeafter"},
+    {"path":"bento","area":"bento"},
+    {"path":"compare","area":"compare"},
+    {"path":"credits","area":"credits"},
+    {"path":"cta","area":"cta"},
+    {"path":"ctaproof","area":"ctaproof"},
+    {"path":"faq","area":"faq"},
+    {"path":"faqsplit","area":"faqsplit"},
+    {"path":"features","area":"features"},
+    {"path":"featureshowcase","area":"featureshowcase"},
+    {"path":"featuresplit","area":"featuresplit"},
+    {"path":"featuretabs","area":"featuretabs"},
+    {"path":"footer","area":"footer"},
+    {"path":"footersplit","area":"footersplit"},
+    {"path":"header","area":"header"},
+    {"path":"hero","area":"hero"},
+    {"path":"herosplit","area":"herosplit"},
+    {"path":"iconwall","area":"iconwall"},
+    {"path":"jobs","area":"jobs"},
+    {"path":"logos","area":"logos"},
+    {"path":"medialist","area":"medialist"},
+    {"path":"megamenu","area":"megamenu"},
+    {"path":"navbar","area":"navbar"},
+    {"path":"pagehead","area":"pagehead"},
+    {"path":"pagetrail","area":"pagetrail"},
+    {"path":"photos","area":"photos"},
+    {"path":"plan","area":"plan"},
+    {"path":"pricing","area":"pricing"},
+    {"path":"projects","area":"projects"},
+    {"path":"proof","area":"proof"},
+    {"path":"quotesplit","area":"quotesplit"},
+    {"path":"sitemap","area":"sitemap"},
+    {"path":"stats","area":"stats"},
+    {"path":"steps","area":"steps"},
+    {"path":"sticky","area":"sticky"},
+    {"path":"team","area":"team"},
+    {"path":"templates","area":"templates"},
+    {"path":"testimonials","area":"testimonials"},
+    {"path":"usage","area":"usage"},
+    {"path":"videos","area":"videos"},
+    {"path":"cart","area":"cart"},
+    {"path":"cartdrawer","area":"cartdrawer"},
+    {"path":"cartpage","area":"cartpage"},
+    {"path":"categories","area":"categories"},
+    {"path":"checkout","area":"checkout"},
+    {"path":"delivery","area":"delivery"},
+    {"path":"locations","area":"locations"},
+    {"path":"orders","area":"orders"},
+    {"path":"product","area":"product"},
+    {"path":"productinfo","area":"productinfo"},
+    {"path":"products","area":"products"},
+    {"path":"reviews","area":"reviews"},
+    {"path":"slots","area":"slots"},
+    {"path":"storehero","area":"storehero"},
+    {"path":"summary","area":"summary"},
+    {"path":"usp","area":"usp"},
+    {"path":"zones","area":"zones"},
+    {"path":"announcement","area":"announcement"},
+    {"path":"cookie","area":"cookie"},
+    {"path":"newsletter","area":"newsletter"},
+    {"path":"article","area":"article"},
+    {"path":"postheader","area":"postheader"},
+    {"path":"posts","area":"posts"},
+    {"path":"postshowcase","area":"postshowcase"},
+    {"path":"postsplit","area":"postsplit"},
+    {"path":"storytabs","area":"storytabs"},
+    {"path":"timeline","area":"timeline"},
+    {"path":"auth","area":"auth"},
+    {"path":"authpage","area":"authpage"},
+    {"path":"profile","area":"profile"},
+    {"path":"wizard","area":"wizard"},
+    {"path":"activity","area":"activity"},
+    {"path":"bottomnav","area":"bottomnav"},
+    {"path":"chart","area":"chart"},
+    {"path":"dashshell","area":"dashshell"},
+    {"path":"empty","area":"empty"},
+    {"path":"kanban","area":"kanban"},
+    {"path":"metrics","area":"metrics"},
+    {"path":"overview","area":"overview"},
+    {"path":"shell","area":"shell"},
+    {"path":"sidenav","area":"sidenav"},
+    {"path":"skeleton","area":"skeleton"},
+    {"path":"checklist","area":"checklist"},
+    {"path":"stepper","area":"stepper"},
+    {"path":"tour","area":"tour"},
+    {"path":"videomodal","area":"videomodal"},
+    {"path":"channels","area":"channels"},
+    {"path":"contact","area":"contact"},
+    {"path":"errorpage","area":"errorpage"},
+  ] as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "notfound", params: {} as Record<string, string> });
+  const actions = { toggleTheme };
+</script>
+
+<ScreenHeader />
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "index"}
+    <IndexPage />
+  {:else if route.area === "about"}
+    <AboutPage />
+  {:else if route.area === "aboutme"}
+    <AboutmePage />
+  {:else if route.area === "accordion"}
+    <AccordionPage />
+  {:else if route.area === "beforeafter"}
+    <BeforeafterPage />
+  {:else if route.area === "bento"}
+    <BentoPage />
+  {:else if route.area === "compare"}
+    <ComparePage />
+  {:else if route.area === "credits"}
+    <CreditsPage />
+  {:else if route.area === "cta"}
+    <CtaPage />
+  {:else if route.area === "ctaproof"}
+    <CtaproofPage />
+  {:else if route.area === "faq"}
+    <FaqPage />
+  {:else if route.area === "faqsplit"}
+    <FaqsplitPage />
+  {:else if route.area === "features"}
+    <FeaturesPage />
+  {:else if route.area === "featureshowcase"}
+    <FeatureshowcasePage />
+  {:else if route.area === "featuresplit"}
+    <FeaturesplitPage />
+  {:else if route.area === "featuretabs"}
+    <FeaturetabsPage />
+  {:else if route.area === "footer"}
+    <FooterPage />
+  {:else if route.area === "footersplit"}
+    <FootersplitPage />
+  {:else if route.area === "header"}
+    <HeaderPage />
+  {:else if route.area === "hero"}
+    <HeroPage />
+  {:else if route.area === "herosplit"}
+    <HerosplitPage />
+  {:else if route.area === "iconwall"}
+    <IconwallPage />
+  {:else if route.area === "jobs"}
+    <JobsPage />
+  {:else if route.area === "logos"}
+    <LogosPage />
+  {:else if route.area === "medialist"}
+    <MedialistPage />
+  {:else if route.area === "megamenu"}
+    <MegamenuPage />
+  {:else if route.area === "navbar"}
+    <NavbarPage />
+  {:else if route.area === "pagehead"}
+    <PageheadPage />
+  {:else if route.area === "pagetrail"}
+    <PagetrailPage />
+  {:else if route.area === "photos"}
+    <PhotosPage />
+  {:else if route.area === "plan"}
+    <PlanPage />
+  {:else if route.area === "pricing"}
+    <PricingPage />
+  {:else if route.area === "projects"}
+    <ProjectsPage />
+  {:else if route.area === "proof"}
+    <ProofPage />
+  {:else if route.area === "quotesplit"}
+    <QuotesplitPage />
+  {:else if route.area === "sitemap"}
+    <SitemapPage />
+  {:else if route.area === "stats"}
+    <StatsPage />
+  {:else if route.area === "steps"}
+    <StepsPage />
+  {:else if route.area === "sticky"}
+    <StickyPage />
+  {:else if route.area === "team"}
+    <TeamPage />
+  {:else if route.area === "templates"}
+    <TemplatesPage />
+  {:else if route.area === "testimonials"}
+    <TestimonialsPage />
+  {:else if route.area === "usage"}
+    <UsagePage />
+  {:else if route.area === "videos"}
+    <VideosPage />
+  {:else if route.area === "cart"}
+    <CartPage />
+  {:else if route.area === "cartdrawer"}
+    <CartdrawerPage />
+  {:else if route.area === "cartpage"}
+    <CartpagePage />
+  {:else if route.area === "categories"}
+    <CategoriesPage />
+  {:else if route.area === "checkout"}
+    <CheckoutPage />
+  {:else if route.area === "delivery"}
+    <DeliveryPage />
+  {:else if route.area === "locations"}
+    <LocationsPage />
+  {:else if route.area === "orders"}
+    <OrdersPage />
+  {:else if route.area === "product"}
+    <ProductPage />
+  {:else if route.area === "productinfo"}
+    <ProductinfoPage />
+  {:else if route.area === "products"}
+    <ProductsPage />
+  {:else if route.area === "reviews"}
+    <ReviewsPage />
+  {:else if route.area === "slots"}
+    <SlotsPage />
+  {:else if route.area === "storehero"}
+    <StoreheroPage />
+  {:else if route.area === "summary"}
+    <SummaryPage />
+  {:else if route.area === "usp"}
+    <UspPage />
+  {:else if route.area === "zones"}
+    <ZonesPage />
+  {:else if route.area === "announcement"}
+    <AnnouncementPage />
+  {:else if route.area === "cookie"}
+    <CookiePage />
+  {:else if route.area === "newsletter"}
+    <NewsletterPage />
+  {:else if route.area === "article"}
+    <ArticlePage />
+  {:else if route.area === "postheader"}
+    <PostheaderPage />
+  {:else if route.area === "posts"}
+    <PostsPage />
+  {:else if route.area === "postshowcase"}
+    <PostshowcasePage />
+  {:else if route.area === "postsplit"}
+    <PostsplitPage />
+  {:else if route.area === "storytabs"}
+    <StorytabsPage />
+  {:else if route.area === "timeline"}
+    <TimelinePage />
+  {:else if route.area === "auth"}
+    <AuthPage />
+  {:else if route.area === "authpage"}
+    <AuthpagePage />
+  {:else if route.area === "profile"}
+    <ProfilePage />
+  {:else if route.area === "wizard"}
+    <WizardPage />
+  {:else if route.area === "activity"}
+    <ActivityPage />
+  {:else if route.area === "bottomnav"}
+    <BottomnavPage />
+  {:else if route.area === "chart"}
+    <ChartPage />
+  {:else if route.area === "dashshell"}
+    <DashshellPage />
+  {:else if route.area === "empty"}
+    <EmptyPage />
+  {:else if route.area === "kanban"}
+    <KanbanPage />
+  {:else if route.area === "metrics"}
+    <MetricsPage />
+  {:else if route.area === "overview"}
+    <OverviewPage />
+  {:else if route.area === "shell"}
+    <ShellPage />
+  {:else if route.area === "sidenav"}
+    <SidenavPage />
+  {:else if route.area === "skeleton"}
+    <SkeletonPage />
+  {:else if route.area === "checklist"}
+    <ChecklistPage />
+  {:else if route.area === "stepper"}
+    <StepperPage />
+  {:else if route.area === "tour"}
+    <TourPage />
+  {:else if route.area === "videomodal"}
+    <VideomodalPage />
+  {:else if route.area === "channels"}
+    <ChannelsPage />
+  {:else if route.area === "contact"}
+    <ContactPage />
+  {:else if route.area === "errorpage"}
+    <ErrorpagePage />
+  {:else}
+    <NotfoundPage />
+  {/if}
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/AboutPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/AboutPage.svelte
new file mode 100644
index 0000000..bb1fe2a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/AboutPage.svelte
@@ -0,0 +1,138 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The about page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    AboutCompany,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.about}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.about}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="about-split-label"
+        data-testid="variant"
+        data-block="about"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="about-split-label" data-testid="variant-label">
+          {ui.blocks.variants.about.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AboutCompany
+            id="about-split"
+            title={ui.company.about.title}
+            lead={ui.company.about.lead}
+            stats={stats}
+            values={values}
+            layout="split"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="about-stacked-label"
+        data-testid="variant"
+        data-block="about"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="about-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.about.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AboutCompany
+            id="about-stacked"
+            title={ui.company.about.title}
+            lead={ui.company.about.lead}
+            stats={stats}
+            values={values}
+            layout="stacked"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.stacked))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="about-muted-label"
+        data-testid="variant"
+        data-block="about"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="about-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.about.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AboutCompany
+            id="about-muted"
+            title={ui.company.about.title}
+            lead={ui.company.about.lead}
+            stats={stats}
+            values={values}
+            layout="split"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/AboutmePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/AboutmePage.svelte
new file mode 100644
index 0000000..5ca6970
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/AboutmePage.svelte
@@ -0,0 +1,176 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The aboutme page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    AboutMe,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Skill,
+    type Spec,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+  import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+
+  const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+
+  const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+  const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+
+  const ABOUTME_ACTIONS = { mode: "two", cta: ui.company.aboutMe.cta, href: "#/work", secondary: ui.company.aboutMe.more, secondaryHref: "#/contact" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.aboutme}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.aboutme}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="aboutme-facts-label"
+        data-testid="variant"
+        data-block="aboutme"
+        data-variant="facts"
+      >
+        <Title as={2} size="base" weight="bold" id="aboutme-facts-label" data-testid="variant-label">
+          {ui.blocks.variants.aboutme.facts}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AboutMe
+            id="aboutme-facts"
+            title={ui.company.aboutMe.title}
+            lead={ui.company.aboutMe.lead}
+            badge={ui.company.aboutMe.badge}
+            facts={profilefacts}
+            skills={skills}
+            labels={ui.company.aboutMe}
+            actions={ABOUTME_ACTIONS}
+            layout="facts"
+            mediaSide="start"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.facts))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="aboutme-factsEnd-label"
+        data-testid="variant"
+        data-block="aboutme"
+        data-variant="factsEnd"
+      >
+        <Title as={2} size="base" weight="bold" id="aboutme-factsEnd-label" data-testid="variant-label">
+          {ui.blocks.variants.aboutme.factsEnd}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AboutMe
+            id="aboutme-factsEnd"
+            title={ui.company.aboutMe.title}
+            lead={ui.company.aboutMe.lead}
+            badge={ui.company.aboutMe.badge}
+            facts={profilefacts}
+            skills={skills}
+            labels={ui.company.aboutMe}
+            actions={ABOUTME_ACTIONS}
+            layout="facts"
+            mediaSide="end"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.factsEnd))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="aboutme-skills-label"
+        data-testid="variant"
+        data-block="aboutme"
+        data-variant="skills"
+      >
+        <Title as={2} size="base" weight="bold" id="aboutme-skills-label" data-testid="variant-label">
+          {ui.blocks.variants.aboutme.skills}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AboutMe
+            id="aboutme-skills"
+            title={ui.company.aboutMe.title}
+            lead={ui.company.aboutMe.lead}
+            badge={ui.company.aboutMe.badge}
+            facts={profilefacts}
+            skills={skills}
+            labels={ui.company.aboutMe}
+            actions={ABOUTME_ACTIONS}
+            layout="skills"
+            mediaSide="start"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skills))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="aboutme-skillsMuted-label"
+        data-testid="variant"
+        data-block="aboutme"
+        data-variant="skillsMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="aboutme-skillsMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.aboutme.skillsMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AboutMe
+            id="aboutme-skillsMuted"
+            title={ui.company.aboutMe.title}
+            lead={ui.company.aboutMe.lead}
+            badge={ui.company.aboutMe.badge}
+            facts={profilefacts}
+            skills={skills}
+            labels={ui.company.aboutMe}
+            actions={ABOUTME_ACTIONS}
+            layout="skills"
+            mediaSide="end"
+            tone="muted"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skillsMuted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/AccordionPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/AccordionPage.svelte
new file mode 100644
index 0000000..400dd02
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/AccordionPage.svelte
@@ -0,0 +1,154 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The accordion page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FeatureAccordion,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.accordion}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.accordion}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="accordion-first-label"
+        data-testid="variant"
+        data-block="accordion"
+        data-variant="first"
+      >
+        <Title as={2} size="base" weight="bold" id="accordion-first-label" data-testid="variant-label">
+          {ui.blocks.variants.accordion.first}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureAccordion
+            id="accordion-first"
+            title={ui.vibe.accordion.title}
+            features={features}
+            empty={ui.empty.features}
+            expand="first"
+            media="none"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="accordion-closed-label"
+        data-testid="variant"
+        data-block="accordion"
+        data-variant="closed"
+      >
+        <Title as={2} size="base" weight="bold" id="accordion-closed-label" data-testid="variant-label">
+          {ui.blocks.variants.accordion.closed}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureAccordion
+            id="accordion-closed"
+            title={ui.vibe.accordion.title}
+            features={features}
+            empty={ui.empty.features}
+            expand="none"
+            media="none"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.closed))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="accordion-media-label"
+        data-testid="variant"
+        data-block="accordion"
+        data-variant="media"
+      >
+        <Title as={2} size="base" weight="bold" id="accordion-media-label" data-testid="variant-label">
+          {ui.blocks.variants.accordion.media}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureAccordion
+            id="accordion-media"
+            title={ui.vibe.accordion.title}
+            features={features}
+            empty={ui.empty.features}
+            expand="first"
+            media="image"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="accordion-muted-label"
+        data-testid="variant"
+        data-block="accordion"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="accordion-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.accordion.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureAccordion
+            id="accordion-muted"
+            title={ui.vibe.accordion.title}
+            features={features}
+            empty={ui.empty.features}
+            expand="first"
+            media="none"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ActivityPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ActivityPage.svelte
new file mode 100644
index 0000000..fc339e5
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ActivityPage.svelte
@@ -0,0 +1,160 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The activity page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    ActivityFeed,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Event,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+  const ACTIVITY_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "time": "metadata.time.value|ago",
+    "tone": "metadata.tone.value",
+  } as const;
+
+  const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.activity}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.activity}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="activity-timeline-label"
+        data-testid="variant"
+        data-block="activity"
+        data-variant="timeline"
+      >
+        <Title as={2} size="base" weight="bold" id="activity-timeline-label" data-testid="variant-label">
+          {ui.blocks.variants.activity.timeline}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ActivityFeed
+            id="activity-timeline"
+            title={ui.dashboard.activity.title}
+            text={ui.dashboard.activity.text}
+            events={activity}
+            empty={ui.empty.activity}
+            layout="timeline"
+            density="default"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="activity-list-label"
+        data-testid="variant"
+        data-block="activity"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="activity-list-label" data-testid="variant-label">
+          {ui.blocks.variants.activity.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ActivityFeed
+            id="activity-list"
+            title={ui.dashboard.activity.title}
+            text={ui.dashboard.activity.text}
+            events={activity}
+            empty={ui.empty.activity}
+            layout="list"
+            density="default"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="activity-compact-label"
+        data-testid="variant"
+        data-block="activity"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="activity-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.activity.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ActivityFeed
+            id="activity-compact"
+            title={ui.dashboard.activity.title}
+            text={ui.dashboard.activity.text}
+            events={activity}
+            empty={ui.empty.activity}
+            layout="list"
+            density="compact"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.compact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="activity-muted-label"
+        data-testid="variant"
+        data-block="activity"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="activity-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.activity.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ActivityFeed
+            id="activity-muted"
+            title={ui.dashboard.activity.title}
+            text={ui.dashboard.activity.text}
+            events={activity}
+            empty={ui.empty.activity}
+            layout="timeline"
+            density="default"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/AnnouncementPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/AnnouncementPage.svelte
new file mode 100644
index 0000000..29331e5
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/AnnouncementPage.svelte
@@ -0,0 +1,275 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The announcement page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    AnnouncementBar,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+          {ui.blocks.themes.promo.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.announcement}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.announcement}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="announcement-bar-label"
+        data-testid="variant"
+        data-block="announcement"
+        data-variant="bar"
+      >
+        <Title as={2} size="base" weight="bold" id="announcement-bar-label" data-testid="variant-label">
+          {ui.blocks.variants.announcement.bar}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AnnouncementBar
+            label={ui.promo.announcement.label}
+            text={ui.promo.announcement.text}
+            cta={ui.promo.announcement.cta}
+            ctaHref="#/pricing"
+            dismissLabel={ui.promo.announcement.dismiss}
+            badgeLabel={ui.promo.announcement.badge}
+            tone="default"
+            layout="center"
+            dismiss="hide"
+            badge="none"
+            position="top"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="announcement-badge-label"
+        data-testid="variant"
+        data-block="announcement"
+        data-variant="badge"
+      >
+        <Title as={2} size="base" weight="bold" id="announcement-badge-label" data-testid="variant-label">
+          {ui.blocks.variants.announcement.badge}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AnnouncementBar
+            label={ui.promo.announcement.label}
+            text={ui.promo.announcement.text}
+            cta={ui.promo.announcement.cta}
+            ctaHref="#/pricing"
+            dismissLabel={ui.promo.announcement.dismiss}
+            badgeLabel={ui.promo.announcement.badge}
+            tone="muted"
+            layout="center"
+            dismiss="hide"
+            badge="show"
+            position="top"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="announcement-bottom-label"
+        data-testid="variant"
+        data-block="announcement"
+        data-variant="bottom"
+      >
+        <Title as={2} size="base" weight="bold" id="announcement-bottom-label" data-testid="variant-label">
+          {ui.blocks.variants.announcement.bottom}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AnnouncementBar
+            label={ui.promo.announcement.label}
+            text={ui.promo.announcement.text}
+            cta={ui.promo.announcement.cta}
+            ctaHref="#/pricing"
+            dismissLabel={ui.promo.announcement.dismiss}
+            badgeLabel={ui.promo.announcement.badge}
+            tone="default"
+            layout="split"
+            dismiss="show"
+            badge="none"
+            position="bottom"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="announcement-muted-label"
+        data-testid="variant"
+        data-block="announcement"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="announcement-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.announcement.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AnnouncementBar
+            label={ui.promo.announcement.label}
+            text={ui.promo.announcement.text}
+            cta={ui.promo.announcement.cta}
+            ctaHref="#/pricing"
+            dismissLabel={ui.promo.announcement.dismiss}
+            badgeLabel={ui.promo.announcement.badge}
+            tone="muted"
+            layout="center"
+            dismiss="hide"
+            badge="none"
+            position="top"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.muted))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="announcement-split-label"
+        data-testid="variant"
+        data-block="announcement"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="announcement-split-label" data-testid="variant-label">
+          {ui.blocks.variants.announcement.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AnnouncementBar
+            label={ui.promo.announcement.label}
+            text={ui.promo.announcement.text}
+            cta={ui.promo.announcement.cta}
+            ctaHref="#/pricing"
+            dismissLabel={ui.promo.announcement.dismiss}
+            badgeLabel={ui.promo.announcement.badge}
+            tone="muted"
+            layout="split"
+            dismiss="hide"
+            badge="none"
+            position="top"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="announcement-dismissible-label"
+        data-testid="variant"
+        data-block="announcement"
+        data-variant="dismissible"
+      >
+        <Title as={2} size="base" weight="bold" id="announcement-dismissible-label" data-testid="variant-label">
+          {ui.blocks.variants.announcement.dismissible}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AnnouncementBar
+            label={ui.promo.announcement.label}
+            text={ui.promo.announcement.text}
+            cta={ui.promo.announcement.cta}
+            ctaHref="#/pricing"
+            dismissLabel={ui.promo.announcement.dismiss}
+            badgeLabel={ui.promo.announcement.badge}
+            tone="default"
+            layout="center"
+            dismiss="show"
+            badge="none"
+            position="top"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="announcement-shop-label"
+        data-testid="variant"
+        data-block="announcement"
+        data-variant="shop"
+      >
+        <Title as={2} size="base" weight="bold" id="announcement-shop-label" data-testid="variant-label">
+          {ui.blocks.variants.announcement.shop}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AnnouncementBar
+            label={ui.promo.announcement.label}
+            text={ui.cases.shop.announcement.text}
+            cta={ui.cases.shop.announcement.cta}
+            ctaHref="#/pricing"
+            dismissLabel={ui.promo.announcement.dismiss}
+            badgeLabel={ui.promo.announcement.badge}
+            tone="muted"
+            layout="center"
+            dismiss="show"
+            badge="none"
+            position="top"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="announcement-agency-label"
+        data-testid="variant"
+        data-block="announcement"
+        data-variant="agency"
+      >
+        <Title as={2} size="base" weight="bold" id="announcement-agency-label" data-testid="variant-label">
+          {ui.blocks.variants.announcement.agency}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AnnouncementBar
+            label={ui.promo.announcement.label}
+            text={ui.cases.agency.announcement.text}
+            cta={ui.cases.agency.announcement.cta}
+            ctaHref="#/pricing"
+            dismissLabel={ui.promo.announcement.dismiss}
+            badgeLabel={ui.promo.announcement.badge}
+            tone="default"
+            layout="split"
+            dismiss="hide"
+            badge="none"
+            position="top"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.agency))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ArticlePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ArticlePage.svelte
new file mode 100644
index 0000000..2f158b7
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ArticlePage.svelte
@@ -0,0 +1,154 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The article page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    ArticleBody,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Section,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+  const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+  const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+          {ui.blocks.themes.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.article}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.article}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="article-column-label"
+        data-testid="variant"
+        data-block="article"
+        data-variant="column"
+      >
+        <Title as={2} size="base" weight="bold" id="article-column-label" data-testid="variant-label">
+          {ui.blocks.variants.article.column}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ArticleBody
+            id="article-column"
+            title={ui.vibe.article.title}
+            sections={article}
+            empty={ui.empty.sections}
+            tocTitle={ui.vibe.article.toc}
+            layout="column"
+            quotes="show"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="article-toc-label"
+        data-testid="variant"
+        data-block="article"
+        data-variant="toc"
+      >
+        <Title as={2} size="base" weight="bold" id="article-toc-label" data-testid="variant-label">
+          {ui.blocks.variants.article.toc}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ArticleBody
+            id="article-toc"
+            title={ui.vibe.article.title}
+            sections={article}
+            empty={ui.empty.sections}
+            tocTitle={ui.vibe.article.toc}
+            layout="toc"
+            quotes="show"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="article-plain-label"
+        data-testid="variant"
+        data-block="article"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="article-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.article.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ArticleBody
+            id="article-plain"
+            title={ui.vibe.article.title}
+            sections={article}
+            empty={ui.empty.sections}
+            tocTitle={ui.vibe.article.toc}
+            layout="column"
+            quotes="hide"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="article-muted-label"
+        data-testid="variant"
+        data-block="article"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="article-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.article.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ArticleBody
+            id="article-muted"
+            title={ui.vibe.article.title}
+            sections={article}
+            empty={ui.empty.sections}
+            tocTitle={ui.vibe.article.toc}
+            layout="column"
+            quotes="show"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/AuthPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/AuthPage.svelte
new file mode 100644
index 0000000..222de9a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/AuthPage.svelte
@@ -0,0 +1,299 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The auth page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    AuthCard,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+          {ui.blocks.themes.account.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.auth}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.auth}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="auth-signin-label"
+        data-testid="variant"
+        data-block="auth"
+        data-variant="signin"
+      >
+        <Title as={2} size="base" weight="bold" id="auth-signin-label" data-testid="variant-label">
+          {ui.blocks.variants.auth.signin}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <AuthCard
+              id="auth-signin"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchText={ui.auth.signin.switchText}
+              switchLink={ui.auth.signin.switchLink}
+              switchHref="#/"
+              labels={ui.auth.labels}
+              mode="signin"
+              layout="card"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))}
+            />
+          </Box>
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="auth-magic-label"
+        data-testid="variant"
+        data-block="auth"
+        data-variant="magic"
+      >
+        <Title as={2} size="base" weight="bold" id="auth-magic-label" data-testid="variant-label">
+          {ui.blocks.variants.auth.magic}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <AuthCard
+              id="auth-magic"
+              title={ui.auth.magic.title}
+              text={ui.auth.magic.text}
+              submit={ui.auth.magic.submit}
+              switchText={ui.auth.magic.switchText}
+              switchLink={ui.auth.magic.switchLink}
+              switchHref="#/"
+              labels={ui.auth.labels}
+              mode="magic"
+              layout="card"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.magic))}
+            />
+          </Box>
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="auth-socialFirst-label"
+        data-testid="variant"
+        data-block="auth"
+        data-variant="socialFirst"
+      >
+        <Title as={2} size="base" weight="bold" id="auth-socialFirst-label" data-testid="variant-label">
+          {ui.blocks.variants.auth.socialFirst}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <AuthCard
+              id="auth-socialFirst"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchText={ui.auth.signin.switchText}
+              switchLink={ui.auth.signin.switchLink}
+              switchHref="#/"
+              labels={ui.auth.labels}
+              mode="signin"
+              layout="card"
+              social="first"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.socialFirst))}
+            />
+          </Box>
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="auth-signup-label"
+        data-testid="variant"
+        data-block="auth"
+        data-variant="signup"
+      >
+        <Title as={2} size="base" weight="bold" id="auth-signup-label" data-testid="variant-label">
+          {ui.blocks.variants.auth.signup}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <AuthCard
+              id="auth-signup"
+              title={ui.auth.signup.title}
+              text={ui.auth.signup.text}
+              submit={ui.auth.signup.submit}
+              switchText={ui.auth.signup.switchText}
+              switchLink={ui.auth.signup.switchLink}
+              switchHref="#/"
+              labels={ui.auth.labels}
+              mode="signup"
+              layout="card"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signup))}
+            />
+          </Box>
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="auth-reset-label"
+        data-testid="variant"
+        data-block="auth"
+        data-variant="reset"
+      >
+        <Title as={2} size="base" weight="bold" id="auth-reset-label" data-testid="variant-label">
+          {ui.blocks.variants.auth.reset}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <AuthCard
+              id="auth-reset"
+              title={ui.auth.reset.title}
+              text={ui.auth.reset.text}
+              submit={ui.auth.reset.submit}
+              switchText={ui.auth.reset.switchText}
+              switchLink={ui.auth.reset.switchLink}
+              switchHref="#/"
+              labels={ui.auth.labels}
+              mode="reset"
+              layout="card"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.reset))}
+            />
+          </Box>
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="auth-plain-label"
+        data-testid="variant"
+        data-block="auth"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="auth-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.auth.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <AuthCard
+              id="auth-plain"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchText={ui.auth.signin.switchText}
+              switchLink={ui.auth.signin.switchLink}
+              switchHref="#/"
+              labels={ui.auth.labels}
+              mode="signin"
+              layout="plain"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.plain))}
+            />
+          </Box>
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="auth-social-label"
+        data-testid="variant"
+        data-block="auth"
+        data-variant="social"
+      >
+        <Title as={2} size="base" weight="bold" id="auth-social-label" data-testid="variant-label">
+          {ui.blocks.variants.auth.social}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <AuthCard
+              id="auth-social"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchText={ui.auth.signin.switchText}
+              switchLink={ui.auth.signin.switchLink}
+              switchHref="#/"
+              labels={ui.auth.labels}
+              mode="signin"
+              layout="card"
+              social="show"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))}
+            />
+          </Box>
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="auth-signupSocial-label"
+        data-testid="variant"
+        data-block="auth"
+        data-variant="signupSocial"
+      >
+        <Title as={2} size="base" weight="bold" id="auth-signupSocial-label" data-testid="variant-label">
+          {ui.blocks.variants.auth.signupSocial}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <AuthCard
+              id="auth-signupSocial"
+              title={ui.auth.signup.title}
+              text={ui.auth.signup.text}
+              submit={ui.auth.signup.submit}
+              switchText={ui.auth.signup.switchText}
+              switchLink={ui.auth.signup.switchLink}
+              switchHref="#/"
+              labels={ui.auth.labels}
+              mode="signup"
+              layout="plain"
+              social="show"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))}
+            />
+          </Box>
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/AuthpagePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/AuthpagePage.svelte
new file mode 100644
index 0000000..86fdbb4
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/AuthpagePage.svelte
@@ -0,0 +1,318 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The authpage page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    AuthLayout,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const AUTHPAGE_SWITCH_TO = { text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+          {ui.blocks.themes.account.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.authpage}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.authpage}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="authpage-split-label"
+        data-testid="variant"
+        data-block="authpage"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="authpage-split-label" data-testid="variant-label">
+          {ui.blocks.variants.authpage.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AuthLayout
+            id="authpage-split"
+            title={ui.auth.signin.title}
+            text={ui.auth.signin.text}
+            submit={ui.auth.signin.submit}
+            switchTo={AUTHPAGE_SWITCH_TO}
+            labels={ui.auth.labels}
+            visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+            layout="split"
+            side="end"
+            mode="signin"
+            social="none"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="authpage-splitStart-label"
+        data-testid="variant"
+        data-block="authpage"
+        data-variant="splitStart"
+      >
+        <Title as={2} size="base" weight="bold" id="authpage-splitStart-label" data-testid="variant-label">
+          {ui.blocks.variants.authpage.splitStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AuthLayout
+            id="authpage-splitStart"
+            title={ui.auth.signin.title}
+            text={ui.auth.signin.text}
+            submit={ui.auth.signin.submit}
+            switchTo={AUTHPAGE_SWITCH_TO}
+            labels={ui.auth.labels}
+            visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+            layout="split"
+            side="start"
+            mode="signin"
+            social="none"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.splitStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="authpage-centered-label"
+        data-testid="variant"
+        data-block="authpage"
+        data-variant="centered"
+      >
+        <Title as={2} size="base" weight="bold" id="authpage-centered-label" data-testid="variant-label">
+          {ui.blocks.variants.authpage.centered}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AuthLayout
+            id="authpage-centered"
+            title={ui.auth.signin.title}
+            text={ui.auth.signin.text}
+            submit={ui.auth.signin.submit}
+            switchTo={AUTHPAGE_SWITCH_TO}
+            labels={ui.auth.labels}
+            visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+            layout="centered"
+            side="end"
+            mode="signin"
+            social="none"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.centered))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="authpage-minimal-label"
+        data-testid="variant"
+        data-block="authpage"
+        data-variant="minimal"
+      >
+        <Title as={2} size="base" weight="bold" id="authpage-minimal-label" data-testid="variant-label">
+          {ui.blocks.variants.authpage.minimal}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AuthLayout
+            id="authpage-minimal"
+            title={ui.auth.signin.title}
+            text={ui.auth.signin.text}
+            submit={ui.auth.signin.submit}
+            switchTo={AUTHPAGE_SWITCH_TO}
+            labels={ui.auth.labels}
+            visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+            layout="minimal"
+            side="end"
+            mode="signin"
+            social="none"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.minimal))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="authpage-signup-label"
+        data-testid="variant"
+        data-block="authpage"
+        data-variant="signup"
+      >
+        <Title as={2} size="base" weight="bold" id="authpage-signup-label" data-testid="variant-label">
+          {ui.blocks.variants.authpage.signup}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AuthLayout
+            id="authpage-signup"
+            title={ui.auth.signup.title}
+            text={ui.auth.signup.text}
+            submit={ui.auth.signup.submit}
+            switchTo={{
+              ...AUTHPAGE_SWITCH_TO,
+              text: ui.auth.signup.switchText,
+              link: ui.auth.signup.switchLink,
+            }}
+            labels={ui.auth.labels}
+            visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+            layout="split"
+            side="end"
+            mode="signup"
+            social="none"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.signup))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="authpage-reset-label"
+        data-testid="variant"
+        data-block="authpage"
+        data-variant="reset"
+      >
+        <Title as={2} size="base" weight="bold" id="authpage-reset-label" data-testid="variant-label">
+          {ui.blocks.variants.authpage.reset}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AuthLayout
+            id="authpage-reset"
+            title={ui.auth.reset.title}
+            text={ui.auth.reset.text}
+            submit={ui.auth.reset.submit}
+            switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink }}
+            labels={ui.auth.labels}
+            visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+            layout="centered"
+            side="end"
+            mode="reset"
+            social="none"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.reset))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="authpage-magic-label"
+        data-testid="variant"
+        data-block="authpage"
+        data-variant="magic"
+      >
+        <Title as={2} size="base" weight="bold" id="authpage-magic-label" data-testid="variant-label">
+          {ui.blocks.variants.authpage.magic}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AuthLayout
+            id="authpage-magic"
+            title={ui.auth.magic.title}
+            text={ui.auth.magic.text}
+            submit={ui.auth.magic.submit}
+            switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink }}
+            labels={ui.auth.labels}
+            visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+            layout="minimal"
+            side="end"
+            mode="magic"
+            social="none"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.magic))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="authpage-social-label"
+        data-testid="variant"
+        data-block="authpage"
+        data-variant="social"
+      >
+        <Title as={2} size="base" weight="bold" id="authpage-social-label" data-testid="variant-label">
+          {ui.blocks.variants.authpage.social}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AuthLayout
+            id="authpage-social"
+            title={ui.auth.signin.title}
+            text={ui.auth.signin.text}
+            submit={ui.auth.signin.submit}
+            switchTo={AUTHPAGE_SWITCH_TO}
+            labels={ui.auth.labels}
+            visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+            layout="split"
+            side="end"
+            mode="signin"
+            social="show"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.social))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="authpage-socialFirst-label"
+        data-testid="variant"
+        data-block="authpage"
+        data-variant="socialFirst"
+      >
+        <Title as={2} size="base" weight="bold" id="authpage-socialFirst-label" data-testid="variant-label">
+          {ui.blocks.variants.authpage.socialFirst}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AuthLayout
+            id="authpage-socialFirst"
+            title={ui.auth.signin.title}
+            text={ui.auth.signin.text}
+            submit={ui.auth.signin.submit}
+            switchTo={AUTHPAGE_SWITCH_TO}
+            labels={ui.auth.labels}
+            visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+            layout="centered"
+            side="end"
+            mode="signin"
+            social="first"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.socialFirst))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/BeforeafterPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/BeforeafterPage.svelte
new file mode 100644
index 0000000..b01e70f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/BeforeafterPage.svelte
@@ -0,0 +1,158 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The beforeafter page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    BeforeAfter,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Contrast,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+  const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+  const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.beforeafter}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.beforeafter}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="beforeafter-cards-label"
+        data-testid="variant"
+        data-block="beforeafter"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="beforeafter-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.beforeafter.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BeforeAfter
+            id="beforeafter-cards"
+            title={ui.vibe.beforeafter.title}
+            points={beforeafter}
+            empty={ui.empty.points}
+            labels={ui.vibe.beforeafter.labels}
+            layout="cards"
+            icons="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="beforeafter-rows-label"
+        data-testid="variant"
+        data-block="beforeafter"
+        data-variant="rows"
+      >
+        <Title as={2} size="base" weight="bold" id="beforeafter-rows-label" data-testid="variant-label">
+          {ui.blocks.variants.beforeafter.rows}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BeforeAfter
+            id="beforeafter-rows"
+            title={ui.vibe.beforeafter.title}
+            points={beforeafter}
+            empty={ui.empty.points}
+            labels={ui.vibe.beforeafter.labels}
+            layout="rows"
+            icons="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="beforeafter-plain-label"
+        data-testid="variant"
+        data-block="beforeafter"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="beforeafter-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.beforeafter.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BeforeAfter
+            id="beforeafter-plain"
+            title={ui.vibe.beforeafter.title}
+            points={beforeafter}
+            empty={ui.empty.points}
+            labels={ui.vibe.beforeafter.labels}
+            layout="cards"
+            icons="hide"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.plain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="beforeafter-muted-label"
+        data-testid="variant"
+        data-block="beforeafter"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="beforeafter-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.beforeafter.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BeforeAfter
+            id="beforeafter-muted"
+            title={ui.vibe.beforeafter.title}
+            points={beforeafter}
+            empty={ui.empty.points}
+            labels={ui.vibe.beforeafter.labels}
+            layout="cards"
+            icons="show"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/BentoPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/BentoPage.svelte
new file mode 100644
index 0000000..51c56f3
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/BentoPage.svelte
@@ -0,0 +1,154 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The bento page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    BentoGrid,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Tile,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+  const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+  const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.bento}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.bento}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="bento-bento-label"
+        data-testid="variant"
+        data-block="bento"
+        data-variant="bento"
+      >
+        <Title as={2} size="base" weight="bold" id="bento-bento-label" data-testid="variant-label">
+          {ui.blocks.variants.bento.bento}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BentoGrid
+            id="bento-bento"
+            title={ui.vibe.bento.title}
+            tiles={bento}
+            empty={ui.empty.tiles}
+            layout="bento"
+            media="none"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="bento-even-label"
+        data-testid="variant"
+        data-block="bento"
+        data-variant="even"
+      >
+        <Title as={2} size="base" weight="bold" id="bento-even-label" data-testid="variant-label">
+          {ui.blocks.variants.bento.even}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BentoGrid
+            id="bento-even"
+            title={ui.vibe.bento.title}
+            tiles={bento}
+            empty={ui.empty.tiles}
+            layout="even"
+            media="none"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.even))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="bento-images-label"
+        data-testid="variant"
+        data-block="bento"
+        data-variant="images"
+      >
+        <Title as={2} size="base" weight="bold" id="bento-images-label" data-testid="variant-label">
+          {ui.blocks.variants.bento.images}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BentoGrid
+            id="bento-images"
+            title={ui.vibe.bento.title}
+            tiles={bento}
+            empty={ui.empty.tiles}
+            layout="bento"
+            media="image"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="bento-muted-label"
+        data-testid="variant"
+        data-block="bento"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="bento-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.bento.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BentoGrid
+            id="bento-muted"
+            title={ui.vibe.bento.title}
+            tiles={bento}
+            empty={ui.empty.tiles}
+            layout="bento"
+            media="none"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/BottomnavPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/BottomnavPage.svelte
new file mode 100644
index 0000000..ae8017d
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/BottomnavPage.svelte
@@ -0,0 +1,146 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The bottomnav page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    BottomNav,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type NavLink,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+  const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+  const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.bottomnav}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.bottomnav}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="bottomnav-labels-label"
+        data-testid="variant"
+        data-block="bottomnav"
+        data-variant="labels"
+      >
+        <Title as={2} size="base" weight="bold" id="bottomnav-labels-label" data-testid="variant-label">
+          {ui.blocks.variants.bottomnav.labels}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BottomNav
+            label={ui.vibe.bottom.label}
+            tabs={tabs}
+            current="tab-explore"
+            labels="show"
+            position="static"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="bottomnav-icons-label"
+        data-testid="variant"
+        data-block="bottomnav"
+        data-variant="icons"
+      >
+        <Title as={2} size="base" weight="bold" id="bottomnav-icons-label" data-testid="variant-label">
+          {ui.blocks.variants.bottomnav.icons}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BottomNav
+            label={ui.vibe.bottom.label}
+            tabs={tabs}
+            current="tab-explore"
+            labels="hide"
+            position="static"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.icons))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="bottomnav-sticky-label"
+        data-testid="variant"
+        data-block="bottomnav"
+        data-variant="sticky"
+      >
+        <Title as={2} size="base" weight="bold" id="bottomnav-sticky-label" data-testid="variant-label">
+          {ui.blocks.variants.bottomnav.sticky}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BottomNav
+            label={ui.vibe.bottom.label}
+            tabs={tabs}
+            current="tab-explore"
+            labels="show"
+            position="sticky"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.sticky))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="bottomnav-muted-label"
+        data-testid="variant"
+        data-block="bottomnav"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="bottomnav-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.bottomnav.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <BottomNav
+            label={ui.vibe.bottom.label}
+            tabs={tabs}
+            current="tab-explore"
+            labels="show"
+            position="static"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/CartPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/CartPage.svelte
new file mode 100644
index 0000000..1e9fb02
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/CartPage.svelte
@@ -0,0 +1,165 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cart page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    CartList,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type CartLine,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.cart}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.cart}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cart-table-label"
+        data-testid="variant"
+        data-block="cart"
+        data-variant="table"
+      >
+        <Title as={2} size="base" weight="bold" id="cart-table-label" data-testid="variant-label">
+          {ui.blocks.variants.cart.table}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CartList
+            id="cart-table"
+            title={ui.commerce.cart.title}
+            lines={cart}
+            empty={ui.empty.cart}
+            labels={ui.commerce.cart}
+            layout="table"
+            media="image"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cart-cards-label"
+        data-testid="variant"
+        data-block="cart"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="cart-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.cart.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CartList
+            id="cart-cards"
+            title={ui.commerce.cart.title}
+            lines={cart}
+            empty={ui.empty.cart}
+            labels={ui.commerce.cart}
+            layout="cards"
+            media="image"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cart-tableCompact-label"
+        data-testid="variant"
+        data-block="cart"
+        data-variant="tableCompact"
+      >
+        <Title as={2} size="base" weight="bold" id="cart-tableCompact-label" data-testid="variant-label">
+          {ui.blocks.variants.cart.tableCompact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CartList
+            id="cart-tableCompact"
+            title={ui.commerce.cart.title}
+            lines={cart}
+            empty={ui.empty.cart}
+            labels={ui.commerce.cart}
+            layout="table"
+            media="none"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.tableCompact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cart-cardsPlain-label"
+        data-testid="variant"
+        data-block="cart"
+        data-variant="cardsPlain"
+      >
+        <Title as={2} size="base" weight="bold" id="cart-cardsPlain-label" data-testid="variant-label">
+          {ui.blocks.variants.cart.cardsPlain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CartList
+            id="cart-cardsPlain"
+            title={ui.commerce.cart.title}
+            lines={cart}
+            empty={ui.empty.cart}
+            labels={ui.commerce.cart}
+            layout="cards"
+            media="none"
+            tone="muted"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cardsPlain))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/CartdrawerPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/CartdrawerPage.svelte
new file mode 100644
index 0000000..fcb20cb
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/CartdrawerPage.svelte
@@ -0,0 +1,142 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cartdrawer page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    CartDrawer,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type CartLine,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.cartdrawer}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.cartdrawer}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cartdrawer-filled-label"
+        data-testid="variant"
+        data-block="cartdrawer"
+        data-variant="filled"
+      >
+        <Title as={2} size="base" weight="bold" id="cartdrawer-filled-label" data-testid="variant-label">
+          {ui.blocks.variants.cartdrawer.filled}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CartDrawer
+            id="cartdrawer-filled"
+            lines={cart}
+            rows={summary}
+            labels={ui.commerce.cart}
+            drawer={ui.commerce.drawer}
+            state="filled"
+            media="image"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cartdrawer-compact-label"
+        data-testid="variant"
+        data-block="cartdrawer"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="cartdrawer-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.cartdrawer.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CartDrawer
+            id="cartdrawer-compact"
+            lines={cart}
+            rows={summary}
+            labels={ui.commerce.cart}
+            drawer={ui.commerce.drawer}
+            state="filled"
+            media="none"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.compact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cartdrawer-empty-label"
+        data-testid="variant"
+        data-block="cartdrawer"
+        data-variant="empty"
+      >
+        <Title as={2} size="base" weight="bold" id="cartdrawer-empty-label" data-testid="variant-label">
+          {ui.blocks.variants.cartdrawer.empty}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CartDrawer
+            id="cartdrawer-empty"
+            lines={cart}
+            rows={summary}
+            labels={ui.commerce.cart}
+            drawer={ui.commerce.drawer}
+            state="empty"
+            media="image"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.empty))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/CartpagePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/CartpagePage.svelte
new file mode 100644
index 0000000..5394702
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/CartpagePage.svelte
@@ -0,0 +1,161 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cartpage page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ShoppingCart,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type CartLine,
+    type Promo,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+  import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+  const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+  const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.cartpage}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.cartpage}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cartpage-split-label"
+        data-testid="variant"
+        data-block="cartpage"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="cartpage-split-label" data-testid="variant-label">
+          {ui.blocks.variants.cartpage.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ShoppingCart
+            id="cartpage-split"
+            title={ui.commerce.cartPage.title}
+            lines={cart}
+            rows={summary}
+            promos={promos}
+            labels={ui.commerce.cart}
+            totals={ui.commerce.totals}
+            actions={ui.commerce.cartPage}
+            layout="split"
+            promo="show"
+            progress="show"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cartpage-stacked-label"
+        data-testid="variant"
+        data-block="cartpage"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="cartpage-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.cartpage.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ShoppingCart
+            id="cartpage-stacked"
+            title={ui.commerce.cartPage.title}
+            lines={cart}
+            rows={summary}
+            promos={promos}
+            labels={ui.commerce.cart}
+            totals={ui.commerce.totals}
+            actions={ui.commerce.cartPage}
+            layout="stacked"
+            promo="show"
+            progress="show"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.stacked))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cartpage-plain-label"
+        data-testid="variant"
+        data-block="cartpage"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="cartpage-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.cartpage.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ShoppingCart
+            id="cartpage-plain"
+            title={ui.commerce.cartPage.title}
+            lines={cart}
+            rows={summary}
+            promos={promos}
+            labels={ui.commerce.cart}
+            totals={ui.commerce.totals}
+            actions={ui.commerce.cartPage}
+            layout="split"
+            promo="hide"
+            progress="hide"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.plain))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/CategoriesPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/CategoriesPage.svelte
new file mode 100644
index 0000000..01d0c39
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/CategoriesPage.svelte
@@ -0,0 +1,232 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The categories page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    CategoryNav,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Category,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.categories}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.categories}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="categories-chips-label"
+        data-testid="variant"
+        data-block="categories"
+        data-variant="chips"
+      >
+        <Title as={2} size="base" weight="bold" id="categories-chips-label" data-testid="variant-label">
+          {ui.blocks.variants.categories.chips}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CategoryNav
+            label={ui.commerce.nav.label}
+            categories={categories}
+            current="category-all"
+            tools={ui.commerce.tools}
+            layout="chips"
+            count="show"
+            icon="show"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="categories-bar-label"
+        data-testid="variant"
+        data-block="categories"
+        data-variant="bar"
+      >
+        <Title as={2} size="base" weight="bold" id="categories-bar-label" data-testid="variant-label">
+          {ui.blocks.variants.categories.bar}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CategoryNav
+            label={ui.commerce.nav.label}
+            categories={categories}
+            current="category-all"
+            tools={ui.commerce.tools}
+            layout="bar"
+            count="show"
+            icon="show"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="categories-sidebar-label"
+        data-testid="variant"
+        data-block="categories"
+        data-variant="sidebar"
+      >
+        <Title as={2} size="base" weight="bold" id="categories-sidebar-label" data-testid="variant-label">
+          {ui.blocks.variants.categories.sidebar}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CategoryNav
+            label={ui.commerce.nav.label}
+            categories={categories}
+            current="category-all"
+            tools={ui.commerce.tools}
+            layout="sidebar"
+            count="show"
+            icon="show"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="categories-chipsPlain-label"
+        data-testid="variant"
+        data-block="categories"
+        data-variant="chipsPlain"
+      >
+        <Title as={2} size="base" weight="bold" id="categories-chipsPlain-label" data-testid="variant-label">
+          {ui.blocks.variants.categories.chipsPlain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CategoryNav
+            label={ui.commerce.nav.label}
+            categories={categories}
+            current="category-all"
+            tools={ui.commerce.tools}
+            layout="chips"
+            count="hide"
+            icon="hide"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chipsPlain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="categories-barCompact-label"
+        data-testid="variant"
+        data-block="categories"
+        data-variant="barCompact"
+      >
+        <Title as={2} size="base" weight="bold" id="categories-barCompact-label" data-testid="variant-label">
+          {ui.blocks.variants.categories.barCompact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CategoryNav
+            label={ui.commerce.nav.label}
+            categories={categories}
+            current="category-all"
+            tools={ui.commerce.tools}
+            layout="bar"
+            count="show"
+            icon="hide"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.barCompact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="categories-tiles-label"
+        data-testid="variant"
+        data-block="categories"
+        data-variant="tiles"
+      >
+        <Title as={2} size="base" weight="bold" id="categories-tiles-label" data-testid="variant-label">
+          {ui.blocks.variants.categories.tiles}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CategoryNav
+            label={ui.commerce.nav.label}
+            categories={categories}
+            current="category-all"
+            tools={ui.commerce.tools}
+            layout="tiles"
+            count="show"
+            icon="show"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.tiles))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="categories-toolbar-label"
+        data-testid="variant"
+        data-block="categories"
+        data-variant="toolbar"
+      >
+        <Title as={2} size="base" weight="bold" id="categories-toolbar-label" data-testid="variant-label">
+          {ui.blocks.variants.categories.toolbar}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CategoryNav
+            label={ui.commerce.nav.label}
+            categories={categories}
+            current="category-all"
+            tools={ui.commerce.tools}
+            layout="toolbar"
+            count="show"
+            icon="hide"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.toolbar))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ChannelsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ChannelsPage.svelte
new file mode 100644
index 0000000..42ff544
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ChannelsPage.svelte
@@ -0,0 +1,158 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The channels page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    SupportChannels,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+          {ui.blocks.themes.support.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.channels}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.channels}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="channels-grid-label"
+        data-testid="variant"
+        data-block="channels"
+        data-variant="grid"
+      >
+        <Title as={2} size="base" weight="bold" id="channels-grid-label" data-testid="variant-label">
+          {ui.blocks.variants.channels.grid}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SupportChannels
+            id="channels-grid"
+            title={ui.support.channels.title}
+            channels={channels}
+            empty={ui.empty.channels}
+            open={ui.support.channels.open}
+            layout="grid"
+            cols="1-3"
+            action="link"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="channels-twoUp-label"
+        data-testid="variant"
+        data-block="channels"
+        data-variant="twoUp"
+      >
+        <Title as={2} size="base" weight="bold" id="channels-twoUp-label" data-testid="variant-label">
+          {ui.blocks.variants.channels.twoUp}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SupportChannels
+            id="channels-twoUp"
+            title={ui.support.channels.title}
+            channels={channels}
+            empty={ui.empty.channels}
+            open={ui.support.channels.open}
+            layout="grid"
+            cols="1-2"
+            action="link"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="channels-list-label"
+        data-testid="variant"
+        data-block="channels"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="channels-list-label" data-testid="variant-label">
+          {ui.blocks.variants.channels.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SupportChannels
+            id="channels-list"
+            title={ui.support.channels.title}
+            channels={channels}
+            empty={ui.empty.channels}
+            open={ui.support.channels.open}
+            layout="list"
+            cols="1-3"
+            action="link"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="channels-plain-label"
+        data-testid="variant"
+        data-block="channels"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="channels-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.channels.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SupportChannels
+            id="channels-plain"
+            title={ui.support.channels.title}
+            channels={channels}
+            empty={ui.empty.channels}
+            open={ui.support.channels.open}
+            layout="grid"
+            cols="1-3"
+            action="none"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.plain))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ChartPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ChartPage.svelte
new file mode 100644
index 0000000..092c449
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ChartPage.svelte
@@ -0,0 +1,162 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The chart page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    ChartPanel,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Point,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+
+  const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+  const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.chart}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.chart}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="chart-bars-label"
+        data-testid="variant"
+        data-block="chart"
+        data-variant="bars"
+      >
+        <Title as={2} size="base" weight="bold" id="chart-bars-label" data-testid="variant-label">
+          {ui.blocks.variants.chart.bars}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ChartPanel
+            id="chart-bars"
+            title={ui.dashboard.chart.title}
+            text={ui.dashboard.chart.text}
+            series={series}
+            empty={ui.empty.series}
+            summary={ui.dashboard.chart.summary}
+            percent={ui.dashboard.chart.percent}
+            chart="bars"
+            size="default"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="chart-short-label"
+        data-testid="variant"
+        data-block="chart"
+        data-variant="short"
+      >
+        <Title as={2} size="base" weight="bold" id="chart-short-label" data-testid="variant-label">
+          {ui.blocks.variants.chart.short}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ChartPanel
+            id="chart-short"
+            title={ui.dashboard.chart.title}
+            text={ui.dashboard.chart.text}
+            series={series}
+            empty={ui.empty.series}
+            summary={ui.dashboard.chart.summary}
+            percent={ui.dashboard.chart.percent}
+            chart="bars"
+            size="compact"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.short))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="chart-meters-label"
+        data-testid="variant"
+        data-block="chart"
+        data-variant="meters"
+      >
+        <Title as={2} size="base" weight="bold" id="chart-meters-label" data-testid="variant-label">
+          {ui.blocks.variants.chart.meters}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ChartPanel
+            id="chart-meters"
+            title={ui.dashboard.chart.title}
+            text={ui.dashboard.chart.text}
+            series={series}
+            empty={ui.empty.series}
+            summary={ui.dashboard.chart.summary}
+            percent={ui.dashboard.chart.percent}
+            chart="meters"
+            size="default"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="chart-muted-label"
+        data-testid="variant"
+        data-block="chart"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="chart-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.chart.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ChartPanel
+            id="chart-muted"
+            title={ui.dashboard.chart.title}
+            text={ui.dashboard.chart.text}
+            series={series}
+            empty={ui.empty.series}
+            summary={ui.dashboard.chart.summary}
+            percent={ui.dashboard.chart.percent}
+            chart="meters"
+            size="compact"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ChecklistPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ChecklistPage.svelte
new file mode 100644
index 0000000..6e4bbe2
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ChecklistPage.svelte
@@ -0,0 +1,246 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The checklist page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Checklist,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Task,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+  const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+  const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+          {ui.blocks.themes.onboarding.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.checklist}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.checklist}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checklist-card-label"
+        data-testid="variant"
+        data-block="checklist"
+        data-variant="card"
+      >
+        <Title as={2} size="base" weight="bold" id="checklist-card-label" data-testid="variant-label">
+          {ui.blocks.variants.checklist.card}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Checklist
+            id="checklist-card"
+            title={ui.onboarding.checklist.title}
+            tasks={checklist}
+            empty={ui.empty.tasks}
+            progressLabel={ui.onboarding.checklist.progress}
+            layout="card"
+            progress="bar"
+            marker="check"
+            detail="always"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checklist-expand-label"
+        data-testid="variant"
+        data-block="checklist"
+        data-variant="expand"
+      >
+        <Title as={2} size="base" weight="bold" id="checklist-expand-label" data-testid="variant-label">
+          {ui.blocks.variants.checklist.expand}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Checklist
+            id="checklist-expand"
+            title={ui.onboarding.checklist.title}
+            tasks={checklist}
+            empty={ui.empty.tasks}
+            progressLabel={ui.onboarding.checklist.progress}
+            layout="card"
+            progress="bar"
+            marker="check"
+            detail="expand"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checklist-plain-label"
+        data-testid="variant"
+        data-block="checklist"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="checklist-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.checklist.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Checklist
+            id="checklist-plain"
+            title={ui.onboarding.checklist.title}
+            tasks={checklist}
+            empty={ui.empty.tasks}
+            progressLabel={ui.onboarding.checklist.progress}
+            layout="plain"
+            progress="bar"
+            marker="check"
+            detail="always"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.plain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checklist-text-label"
+        data-testid="variant"
+        data-block="checklist"
+        data-variant="text"
+      >
+        <Title as={2} size="base" weight="bold" id="checklist-text-label" data-testid="variant-label">
+          {ui.blocks.variants.checklist.text}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Checklist
+            id="checklist-text"
+            title={ui.onboarding.checklist.title}
+            tasks={checklist}
+            empty={ui.empty.tasks}
+            progressLabel={ui.onboarding.checklist.progress}
+            layout="card"
+            progress="text"
+            marker="check"
+            detail="always"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checklist-none-label"
+        data-testid="variant"
+        data-block="checklist"
+        data-variant="none"
+      >
+        <Title as={2} size="base" weight="bold" id="checklist-none-label" data-testid="variant-label">
+          {ui.blocks.variants.checklist.none}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Checklist
+            id="checklist-none"
+            title={ui.onboarding.checklist.title}
+            tasks={checklist}
+            empty={ui.empty.tasks}
+            progressLabel={ui.onboarding.checklist.progress}
+            layout="plain"
+            progress="none"
+            marker="check"
+            detail="always"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.none))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checklist-numbered-label"
+        data-testid="variant"
+        data-block="checklist"
+        data-variant="numbered"
+      >
+        <Title as={2} size="base" weight="bold" id="checklist-numbered-label" data-testid="variant-label">
+          {ui.blocks.variants.checklist.numbered}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Checklist
+            id="checklist-numbered"
+            title={ui.onboarding.checklist.title}
+            tasks={checklist}
+            empty={ui.empty.tasks}
+            progressLabel={ui.onboarding.checklist.progress}
+            layout="card"
+            progress="bar"
+            marker="number"
+            detail="always"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checklist-muted-label"
+        data-testid="variant"
+        data-block="checklist"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="checklist-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.checklist.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Checklist
+            id="checklist-muted"
+            title={ui.onboarding.checklist.title}
+            tasks={checklist}
+            empty={ui.empty.tasks}
+            progressLabel={ui.onboarding.checklist.progress}
+            layout="card"
+            progress="text"
+            marker="number"
+            detail="always"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/CheckoutPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/CheckoutPage.svelte
new file mode 100644
index 0000000..7544f76
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/CheckoutPage.svelte
@@ -0,0 +1,169 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The checkout page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    CheckoutForm,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type CartLine,
+    type Day,
+    type Payment,
+    type Promo,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+  import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+  import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+  import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+  const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+  const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+  const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+  const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+  const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+  const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.checkout}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.checkout}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checkout-cards-label"
+        data-testid="variant"
+        data-block="checkout"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="checkout-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.checkout.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CheckoutForm
+            id="checkout-cards"
+            title={ui.commerce.checkout.title}
+            days={days}
+            payments={payments}
+            lines={cart}
+            rows={summary}
+            promos={promos}
+            labels={ui.commerce.checkout}
+            totals={ui.commerce.totals}
+            layout="cards"
+            summary="aside"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checkout-numbered-label"
+        data-testid="variant"
+        data-block="checkout"
+        data-variant="numbered"
+      >
+        <Title as={2} size="base" weight="bold" id="checkout-numbered-label" data-testid="variant-label">
+          {ui.blocks.variants.checkout.numbered}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CheckoutForm
+            id="checkout-numbered"
+            title={ui.commerce.checkout.title}
+            days={days}
+            payments={payments}
+            lines={cart}
+            rows={summary}
+            promos={promos}
+            labels={ui.commerce.checkout}
+            totals={ui.commerce.totals}
+            layout="numbered"
+            summary="aside"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="checkout-noSummary-label"
+        data-testid="variant"
+        data-block="checkout"
+        data-variant="noSummary"
+      >
+        <Title as={2} size="base" weight="bold" id="checkout-noSummary-label" data-testid="variant-label">
+          {ui.blocks.variants.checkout.noSummary}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CheckoutForm
+            id="checkout-noSummary"
+            title={ui.commerce.checkout.title}
+            days={days}
+            payments={payments}
+            lines={cart}
+            rows={summary}
+            promos={promos}
+            labels={ui.commerce.checkout}
+            totals={ui.commerce.totals}
+            layout="cards"
+            summary="none"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.noSummary))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ComparePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ComparePage.svelte
new file mode 100644
index 0000000..9cc6b42
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ComparePage.svelte
@@ -0,0 +1,157 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The compare page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    ComparisonTable,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type CompareRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+  import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+
+  const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+  const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+
+  const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+  const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.compare}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.compare}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="compare-plans-label"
+        data-testid="variant"
+        data-block="compare"
+        data-variant="plans"
+      >
+        <Title as={2} size="base" weight="bold" id="compare-plans-label" data-testid="variant-label">
+          {ui.blocks.variants.compare.plans}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ComparisonTable
+            id="compare-plans"
+            title={ui.vibe.compare.title}
+            rows={compare}
+            empty={ui.empty.rows}
+            labels={ui.vibe.compare.labels}
+            highlight="none"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="compare-highlight-label"
+        data-testid="variant"
+        data-block="compare"
+        data-variant="highlight"
+      >
+        <Title as={2} size="base" weight="bold" id="compare-highlight-label" data-testid="variant-label">
+          {ui.blocks.variants.compare.highlight}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ComparisonTable
+            id="compare-highlight"
+            title={ui.vibe.compare.title}
+            rows={compare}
+            empty={ui.empty.rows}
+            labels={ui.vibe.compare.labels}
+            highlight="middle"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="compare-rivals-label"
+        data-testid="variant"
+        data-block="compare"
+        data-variant="rivals"
+      >
+        <Title as={2} size="base" weight="bold" id="compare-rivals-label" data-testid="variant-label">
+          {ui.blocks.variants.compare.rivals}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ComparisonTable
+            id="compare-rivals"
+            title={ui.vibe.rivals.title}
+            rows={rivals}
+            empty={ui.empty.rows}
+            labels={ui.vibe.rivals.labels}
+            highlight="middle"
+            tone="muted"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="compare-muted-label"
+        data-testid="variant"
+        data-block="compare"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="compare-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.compare.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ComparisonTable
+            id="compare-muted"
+            title={ui.vibe.compare.title}
+            rows={compare}
+            empty={ui.empty.rows}
+            labels={ui.vibe.compare.labels}
+            highlight="none"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ContactPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ContactPage.svelte
new file mode 100644
index 0000000..6b4e715
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ContactPage.svelte
@@ -0,0 +1,224 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The contact page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    ContactForm,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+          {ui.blocks.themes.support.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.contact}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.contact}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="contact-single-label"
+        data-testid="variant"
+        data-block="contact"
+        data-variant="single"
+      >
+        <Title as={2} size="base" weight="bold" id="contact-single-label" data-testid="variant-label">
+          {ui.blocks.variants.contact.single}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ContactForm
+            id="contact-single"
+            title={ui.support.contact.title}
+            text={ui.support.contact.text}
+            labels={ui.support.contact.labels}
+            details={channels}
+            layout="single"
+            fields="full"
+            terms="hide"
+            page="section"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="contact-page-label"
+        data-testid="variant"
+        data-block="contact"
+        data-variant="page"
+      >
+        <Title as={2} size="base" weight="bold" id="contact-page-label" data-testid="variant-label">
+          {ui.blocks.variants.contact.page}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ContactForm
+            id="contact-page"
+            title={ui.support.contact.title}
+            text={ui.support.contact.text}
+            labels={ui.support.contact.labels}
+            details={channels}
+            layout="single"
+            fields="short"
+            terms="hide"
+            page="full"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.page))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="contact-short-label"
+        data-testid="variant"
+        data-block="contact"
+        data-variant="short"
+      >
+        <Title as={2} size="base" weight="bold" id="contact-short-label" data-testid="variant-label">
+          {ui.blocks.variants.contact.short}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ContactForm
+            id="contact-short"
+            title={ui.support.contact.title}
+            text={ui.support.contact.text}
+            labels={ui.support.contact.labels}
+            details={channels}
+            layout="single"
+            fields="short"
+            terms="hide"
+            page="section"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.short))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="contact-split-label"
+        data-testid="variant"
+        data-block="contact"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="contact-split-label" data-testid="variant-label">
+          {ui.blocks.variants.contact.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ContactForm
+            id="contact-split"
+            title={ui.support.contact.title}
+            text={ui.support.contact.text}
+            labels={ui.support.contact.labels}
+            details={channels}
+            layout="split"
+            fields="full"
+            terms="hide"
+            page="section"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="contact-consent-label"
+        data-testid="variant"
+        data-block="contact"
+        data-variant="consent"
+      >
+        <Title as={2} size="base" weight="bold" id="contact-consent-label" data-testid="variant-label">
+          {ui.blocks.variants.contact.consent}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ContactForm
+            id="contact-consent"
+            title={ui.support.contact.title}
+            text={ui.support.contact.text}
+            labels={ui.support.contact.labels}
+            details={channels}
+            layout="single"
+            fields="full"
+            terms="show"
+            page="section"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="contact-muted-label"
+        data-testid="variant"
+        data-block="contact"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="contact-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.contact.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ContactForm
+            id="contact-muted"
+            title={ui.support.contact.title}
+            text={ui.support.contact.text}
+            labels={ui.support.contact.labels}
+            details={channels}
+            layout="split"
+            fields="short"
+            terms="show"
+            page="section"
+            tone="muted"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/CookiePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/CookiePage.svelte
new file mode 100644
index 0000000..b6e18e1
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/CookiePage.svelte
@@ -0,0 +1,151 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cookie page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    CookieBanner,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+          {ui.blocks.themes.promo.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.cookie}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.cookie}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cookie-bar-label"
+        data-testid="variant"
+        data-block="cookie"
+        data-variant="bar"
+      >
+        <Title as={2} size="base" weight="bold" id="cookie-bar-label" data-testid="variant-label">
+          {ui.blocks.variants.cookie.bar}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CookieBanner
+            id="cookie-bar"
+            title={ui.promo.cookie.title}
+            text={ui.promo.cookie.text}
+            accept={ui.promo.cookie.accept}
+            decline={ui.promo.cookie.decline}
+            settings={ui.promo.cookie.settings}
+            layout="bar"
+            actions="two"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cookie-card-label"
+        data-testid="variant"
+        data-block="cookie"
+        data-variant="card"
+      >
+        <Title as={2} size="base" weight="bold" id="cookie-card-label" data-testid="variant-label">
+          {ui.blocks.variants.cookie.card}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CookieBanner
+            id="cookie-card"
+            title={ui.promo.cookie.title}
+            text={ui.promo.cookie.text}
+            accept={ui.promo.cookie.accept}
+            decline={ui.promo.cookie.decline}
+            settings={ui.promo.cookie.settings}
+            layout="card"
+            actions="two"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cookie-settings-label"
+        data-testid="variant"
+        data-block="cookie"
+        data-variant="settings"
+      >
+        <Title as={2} size="base" weight="bold" id="cookie-settings-label" data-testid="variant-label">
+          {ui.blocks.variants.cookie.settings}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CookieBanner
+            id="cookie-settings"
+            title={ui.promo.cookie.title}
+            text={ui.promo.cookie.text}
+            accept={ui.promo.cookie.accept}
+            decline={ui.promo.cookie.decline}
+            settings={ui.promo.cookie.settings}
+            layout="bar"
+            actions="three"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cookie-muted-label"
+        data-testid="variant"
+        data-block="cookie"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="cookie-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.cookie.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CookieBanner
+            id="cookie-muted"
+            title={ui.promo.cookie.title}
+            text={ui.promo.cookie.text}
+            accept={ui.promo.cookie.accept}
+            decline={ui.promo.cookie.decline}
+            settings={ui.promo.cookie.settings}
+            layout="card"
+            actions="three"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/CreditsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/CreditsPage.svelte
new file mode 100644
index 0000000..4f1a352
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/CreditsPage.svelte
@@ -0,0 +1,169 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The credits page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    CreditPacks,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Pack,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+  const CREDITS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "credits": "metadata.credits.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "badge": "metadata.badge.value",
+  } as const;
+
+  const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.credits}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.credits}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="credits-tiles4-label"
+        data-testid="variant"
+        data-block="credits"
+        data-variant="tiles4"
+      >
+        <Title as={2} size="base" weight="bold" id="credits-tiles4-label" data-testid="variant-label">
+          {ui.blocks.variants.credits.tiles4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CreditPacks
+            id="credits-tiles4"
+            title={ui.vibe.credits.title}
+            packs={credits}
+            empty={ui.empty.packs}
+            badges={ui.vibe.credits.badges}
+            buy={ui.vibe.credits.buy}
+            cols="4"
+            item="tile"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="credits-tiles2-label"
+        data-testid="variant"
+        data-block="credits"
+        data-variant="tiles2"
+      >
+        <Title as={2} size="base" weight="bold" id="credits-tiles2-label" data-testid="variant-label">
+          {ui.blocks.variants.credits.tiles2}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CreditPacks
+            id="credits-tiles2"
+            title={ui.vibe.credits.title}
+            packs={credits}
+            empty={ui.empty.packs}
+            badges={ui.vibe.credits.badges}
+            buy={ui.vibe.credits.buy}
+            cols="2"
+            item="tile"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles2))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="credits-rows-label"
+        data-testid="variant"
+        data-block="credits"
+        data-variant="rows"
+      >
+        <Title as={2} size="base" weight="bold" id="credits-rows-label" data-testid="variant-label">
+          {ui.blocks.variants.credits.rows}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CreditPacks
+            id="credits-rows"
+            title={ui.vibe.credits.title}
+            packs={credits}
+            empty={ui.empty.packs}
+            badges={ui.vibe.credits.badges}
+            buy={ui.vibe.credits.buy}
+            cols="4"
+            item="row"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="credits-muted-label"
+        data-testid="variant"
+        data-block="credits"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="credits-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.credits.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CreditPacks
+            id="credits-muted"
+            title={ui.vibe.credits.title}
+            packs={credits}
+            empty={ui.empty.packs}
+            badges={ui.vibe.credits.badges}
+            buy={ui.vibe.credits.buy}
+            cols="4"
+            item="tile"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/CtaPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/CtaPage.svelte
new file mode 100644
index 0000000..abf485a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/CtaPage.svelte
@@ -0,0 +1,362 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cta page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    CtaBand,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const CTA_ACTIONS = {
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.cta}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.cta}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-card-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="card"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-card-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.card}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-card"
+            title={ui.site.home.ctaTitle}
+            text={ui.site.home.ctaText}
+            actions={{ ...CTA_ACTIONS, mode: "one" }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="card"
+            tone="muted"
+            proof="none"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.card))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-banner-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="banner"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-banner-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.banner}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-banner"
+            title={ui.site.home.ctaTitle}
+            text={ui.site.home.ctaText}
+            actions={{ ...CTA_ACTIONS, mode: "one" }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="banner"
+            tone="muted"
+            proof="none"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.banner))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-row-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="row"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-row-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.row}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-row"
+            title={ui.site.home.ctaTitle}
+            text={ui.site.home.ctaText}
+            actions={{ ...CTA_ACTIONS, mode: "one" }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="row"
+            tone="muted"
+            proof="none"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-form-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="form"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-form-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.form}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-form"
+            title={ui.site.home.ctaTitle}
+            text={ui.site.home.ctaText}
+            actions={{ ...CTA_ACTIONS, mode: "form" }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="band"
+            tone="muted"
+            proof="none"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-quote-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="quote"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-quote-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.quote}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-quote"
+            title={ui.site.home.ctaTitle}
+            text={ui.site.home.ctaText}
+            actions={{ ...CTA_ACTIONS, mode: "one" }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="band"
+            tone="muted"
+            proof="quote"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-band-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="band"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-band-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.band}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-band"
+            title={ui.site.home.ctaTitle}
+            text={ui.site.home.ctaText}
+            actions={{ ...CTA_ACTIONS, mode: "one" }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="band"
+            tone="muted"
+            proof="none"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-split-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-split-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-split"
+            title={ui.site.home.ctaTitle}
+            text={ui.site.home.ctaText}
+            actions={{ ...CTA_ACTIONS, mode: "two" }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="split"
+            tone="default"
+            proof="none"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-compact-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-compact"
+            title={ui.site.home.ctaTitle}
+            text={ui.site.home.ctaText}
+            actions={{ ...CTA_ACTIONS, mode: "one" }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="card"
+            tone="muted"
+            proof="none"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-saas-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="saas"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-saas-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.saas}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-saas"
+            title={ui.cases.saas.cta.title}
+            text={ui.cases.saas.cta.text}
+            actions={{
+              ...CTA_ACTIONS,
+              cta: ui.cases.saas.cta.cta,
+              secondary: ui.cases.saas.cta.secondary,
+              mode: "two",
+            }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="band"
+            tone="muted"
+            proof="none"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-shop-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="shop"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-shop-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.shop}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-shop"
+            title={ui.cases.shop.cta.title}
+            text={ui.cases.shop.cta.text}
+            actions={{
+              ...CTA_ACTIONS,
+              cta: ui.cases.shop.cta.cta,
+              secondary: ui.cases.shop.cta.secondary,
+              mode: "one",
+            }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="split"
+            tone="default"
+            proof="none"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="cta-agency-label"
+        data-testid="variant"
+        data-block="cta"
+        data-variant="agency"
+      >
+        <Title as={2} size="base" weight="bold" id="cta-agency-label" data-testid="variant-label">
+          {ui.blocks.variants.cta.agency}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaBand
+            id="cta-agency"
+            title={ui.cases.agency.cta.title}
+            text={ui.cases.agency.cta.text}
+            actions={{
+              ...CTA_ACTIONS,
+              cta: ui.cases.agency.cta.cta,
+              secondary: ui.cases.agency.cta.secondary,
+              mode: "two",
+            }}
+            quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+            layout="card"
+            tone="muted"
+            proof="none"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/CtaproofPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/CtaproofPage.svelte
new file mode 100644
index 0000000..be78bfd
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/CtaproofPage.svelte
@@ -0,0 +1,284 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The ctaproof page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    CtaProof,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Logo,
+    type Stat,
+    type Zone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+  import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const ZONES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "area": "metadata.area.value",
+    "price": "metadata.price.value",
+    "freeFrom": "metadata.freeFrom.value",
+    "minOrder": "metadata.minOrder.value",
+    "time": "metadata.time.value",
+    "express": "metadata.express.value",
+    "currency": "metadata.currency.value",
+  } as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+  const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+  const CTAPROOF_ACTIONS = {
+    mode: "two",
+    cta: ui.marketing.ctaProof.cta,
+    href: "#/pricing",
+    secondary: ui.marketing.ctaProof.secondary,
+    secondaryHref: "#/contact",
+  } as const;
+  const CTAPROOF_CONTENT = { logos, features, stats, zones } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.ctaproof}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.ctaproof}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="ctaproof-centerLogos-label"
+        data-testid="variant"
+        data-block="ctaproof"
+        data-variant="centerLogos"
+      >
+        <Title as={2} size="base" weight="bold" id="ctaproof-centerLogos-label" data-testid="variant-label">
+          {ui.blocks.variants.ctaproof.centerLogos}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaProof
+            id="ctaproof-centerLogos"
+            title={ui.marketing.ctaProof.title}
+            lead={ui.marketing.ctaProof.lead}
+            badge={ui.marketing.ctaProof.badge}
+            actions={CTAPROOF_ACTIONS}
+            content={CTAPROOF_CONTENT}
+            layout="center"
+            proof="logos"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerLogos))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="ctaproof-centerFeatures-label"
+        data-testid="variant"
+        data-block="ctaproof"
+        data-variant="centerFeatures"
+      >
+        <Title as={2} size="base" weight="bold" id="ctaproof-centerFeatures-label" data-testid="variant-label">
+          {ui.blocks.variants.ctaproof.centerFeatures}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaProof
+            id="ctaproof-centerFeatures"
+            title={ui.marketing.ctaProof.title}
+            lead={ui.marketing.ctaProof.lead}
+            badge={ui.marketing.ctaProof.badge}
+            actions={CTAPROOF_ACTIONS}
+            content={CTAPROOF_CONTENT}
+            layout="center"
+            proof="features"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerFeatures))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="ctaproof-centerStats-label"
+        data-testid="variant"
+        data-block="ctaproof"
+        data-variant="centerStats"
+      >
+        <Title as={2} size="base" weight="bold" id="ctaproof-centerStats-label" data-testid="variant-label">
+          {ui.blocks.variants.ctaproof.centerStats}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaProof
+            id="ctaproof-centerStats"
+            title={ui.marketing.ctaProof.title}
+            lead={ui.marketing.ctaProof.lead}
+            badge={ui.marketing.ctaProof.badge}
+            actions={CTAPROOF_ACTIONS}
+            content={CTAPROOF_CONTENT}
+            layout="center"
+            proof="stats"
+            mediaSide="end"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerStats))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="ctaproof-splitStats-label"
+        data-testid="variant"
+        data-block="ctaproof"
+        data-variant="splitStats"
+      >
+        <Title as={2} size="base" weight="bold" id="ctaproof-splitStats-label" data-testid="variant-label">
+          {ui.blocks.variants.ctaproof.splitStats}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaProof
+            id="ctaproof-splitStats"
+            title={ui.marketing.ctaProof.title}
+            lead={ui.marketing.ctaProof.lead}
+            badge={ui.marketing.ctaProof.badge}
+            actions={CTAPROOF_ACTIONS}
+            content={CTAPROOF_CONTENT}
+            layout="split"
+            proof="stats"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="ctaproof-splitStatsStart-label"
+        data-testid="variant"
+        data-block="ctaproof"
+        data-variant="splitStatsStart"
+      >
+        <Title as={2} size="base" weight="bold" id="ctaproof-splitStatsStart-label" data-testid="variant-label">
+          {ui.blocks.variants.ctaproof.splitStatsStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaProof
+            id="ctaproof-splitStatsStart"
+            title={ui.marketing.ctaProof.title}
+            lead={ui.marketing.ctaProof.lead}
+            badge={ui.marketing.ctaProof.badge}
+            actions={CTAPROOF_ACTIONS}
+            content={CTAPROOF_CONTENT}
+            layout="split"
+            proof="stats"
+            mediaSide="start"
+            tone="default"
+            note={ui.marketing.ctaProof.note}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStatsStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="ctaproof-splitRows-label"
+        data-testid="variant"
+        data-block="ctaproof"
+        data-variant="splitRows"
+      >
+        <Title as={2} size="base" weight="bold" id="ctaproof-splitRows-label" data-testid="variant-label">
+          {ui.blocks.variants.ctaproof.splitRows}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaProof
+            id="ctaproof-splitRows"
+            title={ui.marketing.ctaProof.title}
+            lead={ui.marketing.ctaProof.lead}
+            badge={ui.marketing.ctaProof.badge}
+            actions={CTAPROOF_ACTIONS}
+            content={CTAPROOF_CONTENT}
+            layout="split"
+            proof="rows"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitRows))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="ctaproof-splitZones-label"
+        data-testid="variant"
+        data-block="ctaproof"
+        data-variant="splitZones"
+      >
+        <Title as={2} size="base" weight="bold" id="ctaproof-splitZones-label" data-testid="variant-label">
+          {ui.blocks.variants.ctaproof.splitZones}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <CtaProof
+            id="ctaproof-splitZones"
+            title={ui.marketing.ctaProof.zonesTitle}
+            lead={ui.marketing.ctaProof.zonesLead}
+            badge={ui.marketing.ctaProof.badge}
+            actions={CTAPROOF_ACTIONS}
+            content={CTAPROOF_CONTENT}
+            layout="split"
+            proof="zones"
+            mediaSide="end"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitZones))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/DashshellPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/DashshellPage.svelte
new file mode 100644
index 0000000..3acea23
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/DashshellPage.svelte
@@ -0,0 +1,409 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The dashshell page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    DashboardShell,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type NavLink,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+  const DASHSHELL_NAV = {
+    label: ui.dashboard.shells.label,
+    brand: ui.site.header.brand,
+    links: sidenav,
+    current: "item-orders",
+    subTitle: ui.dashboard.shells.subTitle,
+    sub: subnav,
+    subCurrent: "subitem-all",
+    search: ui.dashboard.shells.search,
+    shortcut: ui.dashboard.shells.shortcut,
+    expand: ui.dashboard.shells.expand,
+    userName: ui.dashboard.shells.userName,
+    copyright: ui.dashboard.shells.copyright,
+    footerLabel: ui.dashboard.shells.footerLabel,
+    footer: helplinks,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.dashshell}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.dashshell}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-classic-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="classic"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-classic-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.classic}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-classic"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="full"
+            search="show"
+            sidebar="wide"
+            side="start"
+            footer="none"
+            content="grid"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-inset-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="inset"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-inset-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.inset}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-inset"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="inset"
+            search="show"
+            sidebar="wide"
+            side="start"
+            footer="inset"
+            content="split"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.inset))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-rail-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="rail"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-rail-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.rail}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-rail"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="full"
+            search="hide"
+            sidebar="rail"
+            side="start"
+            footer="none"
+            content="list"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.rail))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-railFooter-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="railFooter"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-railFooter-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.railFooter}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-railFooter"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="inset"
+            search="show"
+            sidebar="rail"
+            side="start"
+            footer="full"
+            content="grid"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railFooter))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-collapsed-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="collapsed"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-collapsed-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.collapsed}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-collapsed"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="inset"
+            search="show"
+            sidebar="collapsed"
+            side="start"
+            footer="none"
+            content="split"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsed))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-twoLevel-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="twoLevel"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-twoLevel-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.twoLevel}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-twoLevel"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="inset"
+            search="hide"
+            sidebar="twolevel"
+            side="start"
+            footer="inset"
+            content="list"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-twoLevelFull-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="twoLevelFull"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-twoLevelFull-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.twoLevelFull}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-twoLevelFull"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="full"
+            search="show"
+            sidebar="twolevel"
+            side="start"
+            footer="full"
+            content="split"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevelFull))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-end-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="end"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-end-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.end}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-end"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="full"
+            search="show"
+            sidebar="wide"
+            side="end"
+            footer="full"
+            content="split"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-railEnd-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="railEnd"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-railEnd-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.railEnd}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-railEnd"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="inset"
+            search="hide"
+            sidebar="rail"
+            side="end"
+            footer="inset"
+            content="grid"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railEnd))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-topOnly-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="topOnly"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-topOnly-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.topOnly}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-topOnly"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="full"
+            search="show"
+            sidebar="none"
+            side="start"
+            footer="full"
+            content="grid"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.topOnly))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-sideOnly-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="sideOnly"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-sideOnly-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.sideOnly}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-sideOnly"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="none"
+            search="show"
+            sidebar="wide"
+            side="start"
+            footer="inset"
+            content="list"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.sideOnly))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="dashshell-collapsedEnd-label"
+        data-testid="variant"
+        data-block="dashshell"
+        data-variant="collapsedEnd"
+      >
+        <Title as={2} size="base" weight="bold" id="dashshell-collapsedEnd-label" data-testid="variant-label">
+          {ui.blocks.variants.dashshell.collapsedEnd}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardShell
+            id="dashshell-collapsedEnd"
+            title={ui.dashboard.shells.title}
+            nav={DASHSHELL_NAV}
+            topbar="none"
+            search="show"
+            sidebar="collapsed"
+            side="end"
+            footer="full"
+            content="split"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsedEnd))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/DeliveryPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/DeliveryPage.svelte
new file mode 100644
index 0000000..ed1d729
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/DeliveryPage.svelte
@@ -0,0 +1,145 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The delivery page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    DeliveryInfo,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Zone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+  import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+
+  const ZONES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "area": "metadata.area.value",
+    "price": "metadata.price.value",
+    "freeFrom": "metadata.freeFrom.value",
+    "minOrder": "metadata.minOrder.value",
+    "time": "metadata.time.value",
+    "express": "metadata.express.value",
+    "currency": "metadata.currency.value",
+  } as const;
+  const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+  const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.delivery}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.delivery}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="delivery-full-label"
+        data-testid="variant"
+        data-block="delivery"
+        data-variant="full"
+      >
+        <Title as={2} size="base" weight="bold" id="delivery-full-label" data-testid="variant-label">
+          {ui.blocks.variants.delivery.full}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DeliveryInfo
+            id="delivery-full"
+            title={ui.commerce.delivery.title}
+            lead={ui.commerce.delivery.lead}
+            facts={deliveryfacts}
+            zones={zones}
+            labels={ui.commerce.delivery}
+            layout="full"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="delivery-split-label"
+        data-testid="variant"
+        data-block="delivery"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="delivery-split-label" data-testid="variant-label">
+          {ui.blocks.variants.delivery.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DeliveryInfo
+            id="delivery-split"
+            title={ui.commerce.delivery.title}
+            lead={ui.commerce.delivery.lead}
+            facts={deliveryfacts}
+            zones={zones}
+            labels={ui.commerce.delivery}
+            layout="split"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="delivery-facts-label"
+        data-testid="variant"
+        data-block="delivery"
+        data-variant="facts"
+      >
+        <Title as={2} size="base" weight="bold" id="delivery-facts-label" data-testid="variant-label">
+          {ui.blocks.variants.delivery.facts}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DeliveryInfo
+            id="delivery-facts"
+            title={ui.commerce.delivery.title}
+            lead={ui.commerce.delivery.lead}
+            facts={deliveryfacts}
+            zones={zones}
+            labels={ui.commerce.delivery}
+            layout="facts"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.facts))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/EmptyPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/EmptyPage.svelte
new file mode 100644
index 0000000..5f8cc82
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/EmptyPage.svelte
@@ -0,0 +1,210 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The empty page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    EmptyPanel,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.empty}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.empty}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="empty-illustrated-label"
+        data-testid="variant"
+        data-block="empty"
+        data-variant="illustrated"
+      >
+        <Title as={2} size="base" weight="bold" id="empty-illustrated-label" data-testid="variant-label">
+          {ui.blocks.variants.empty.illustrated}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <EmptyPanel
+            id="empty-illustrated"
+            title={ui.dashboard.empty.tour.title}
+            text={ui.dashboard.empty.tour.text}
+            cta={ui.dashboard.empty.tour.cta}
+            ctaHref="#/"
+            layout="card"
+            actions="button"
+            visual="image"
+            size="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="empty-orders-label"
+        data-testid="variant"
+        data-block="empty"
+        data-variant="orders"
+      >
+        <Title as={2} size="base" weight="bold" id="empty-orders-label" data-testid="variant-label">
+          {ui.blocks.variants.empty.orders}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <EmptyPanel
+            id="empty-orders"
+            title={ui.dashboard.empty.orders.title}
+            text={ui.dashboard.empty.orders.text}
+            cta={ui.dashboard.empty.orders.cta}
+            ctaHref="#/"
+            layout="card"
+            actions="button"
+            visual="icon"
+            size="default"
+            icon="shopping-bag"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="empty-results-label"
+        data-testid="variant"
+        data-block="empty"
+        data-variant="results"
+      >
+        <Title as={2} size="base" weight="bold" id="empty-results-label" data-testid="variant-label">
+          {ui.blocks.variants.empty.results}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <EmptyPanel
+            id="empty-results"
+            title={ui.dashboard.empty.results.title}
+            text={ui.dashboard.empty.results.text}
+            cta={ui.dashboard.empty.results.cta}
+            ctaHref="#/"
+            layout="plain"
+            actions="button"
+            visual="icon"
+            size="default"
+            icon="search"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.results))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="empty-inbox-label"
+        data-testid="variant"
+        data-block="empty"
+        data-variant="inbox"
+      >
+        <Title as={2} size="base" weight="bold" id="empty-inbox-label" data-testid="variant-label">
+          {ui.blocks.variants.empty.inbox}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <EmptyPanel
+            id="empty-inbox"
+            title={ui.dashboard.empty.inbox.title}
+            text={ui.dashboard.empty.inbox.text}
+            cta={ui.dashboard.empty.inbox.cta}
+            ctaHref="#/"
+            layout="card"
+            actions="none"
+            visual="icon"
+            size="default"
+            icon="inbox"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.inbox))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="empty-compact-label"
+        data-testid="variant"
+        data-block="empty"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="empty-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.empty.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <EmptyPanel
+            id="empty-compact"
+            title={ui.dashboard.empty.inbox.title}
+            text={ui.dashboard.empty.inbox.text}
+            cta={ui.dashboard.empty.inbox.cta}
+            ctaHref="#/"
+            layout="card"
+            actions="button"
+            visual="icon"
+            size="compact"
+            icon="inbox"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="empty-plainNoAction-label"
+        data-testid="variant"
+        data-block="empty"
+        data-variant="plainNoAction"
+      >
+        <Title as={2} size="base" weight="bold" id="empty-plainNoAction-label" data-testid="variant-label">
+          {ui.blocks.variants.empty.plainNoAction}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <EmptyPanel
+            id="empty-plainNoAction"
+            title={ui.dashboard.empty.results.title}
+            text={ui.dashboard.empty.results.text}
+            cta={ui.dashboard.empty.results.cta}
+            ctaHref="#/"
+            layout="plain"
+            actions="none"
+            visual="icon"
+            size="compact"
+            icon="search"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.plainNoAction))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ErrorpagePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ErrorpagePage.svelte
new file mode 100644
index 0000000..bbfaf84
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ErrorpagePage.svelte
@@ -0,0 +1,179 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The errorpage page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    ErrorPage,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const ERRORPAGE_ACTIONS = { cta: ui.vibe.error.cta, href: "#/", secondary: ui.vibe.error.secondary, secondaryHref: "#/" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+          {ui.blocks.themes.support.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.errorpage}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.errorpage}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="errorpage-centered-label"
+        data-testid="variant"
+        data-block="errorpage"
+        data-variant="centered"
+      >
+        <Title as={2} size="base" weight="bold" id="errorpage-centered-label" data-testid="variant-label">
+          {ui.blocks.variants.errorpage.centered}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ErrorPage
+            id="errorpage-centered"
+            title={ui.vibe.error.title}
+            text={ui.vibe.error.text}
+            status={ui.vibe.error.status}
+            actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+            layout="centered"
+            code="show"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.centered))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="errorpage-split-label"
+        data-testid="variant"
+        data-block="errorpage"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="errorpage-split-label" data-testid="variant-label">
+          {ui.blocks.variants.errorpage.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ErrorPage
+            id="errorpage-split"
+            title={ui.vibe.error.title}
+            text={ui.vibe.error.text}
+            status={ui.vibe.error.status}
+            actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+            layout="split"
+            code="show"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="errorpage-noCode-label"
+        data-testid="variant"
+        data-block="errorpage"
+        data-variant="noCode"
+      >
+        <Title as={2} size="base" weight="bold" id="errorpage-noCode-label" data-testid="variant-label">
+          {ui.blocks.variants.errorpage.noCode}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ErrorPage
+            id="errorpage-noCode"
+            title={ui.vibe.error.title}
+            text={ui.vibe.error.text}
+            status={ui.vibe.error.status}
+            actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+            layout="centered"
+            code="hide"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.noCode))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="errorpage-two-label"
+        data-testid="variant"
+        data-block="errorpage"
+        data-variant="two"
+      >
+        <Title as={2} size="base" weight="bold" id="errorpage-two-label" data-testid="variant-label">
+          {ui.blocks.variants.errorpage.two}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ErrorPage
+            id="errorpage-two"
+            title={ui.vibe.error.title}
+            text={ui.vibe.error.text}
+            status={ui.vibe.error.status}
+            actions={{ ...ERRORPAGE_ACTIONS, mode: "two" }}
+            layout="centered"
+            code="show"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.two))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="errorpage-muted-label"
+        data-testid="variant"
+        data-block="errorpage"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="errorpage-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.errorpage.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ErrorPage
+            id="errorpage-muted"
+            title={ui.vibe.error.title}
+            text={ui.vibe.error.text}
+            status={ui.vibe.error.status}
+            actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+            layout="centered"
+            code="show"
+            tone="muted"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/FaqPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/FaqPage.svelte
new file mode 100644
index 0000000..3319511
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/FaqPage.svelte
@@ -0,0 +1,252 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The faq page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FaqList,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Faq,
+    type FaqTab,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+  const FAQ_FILTER = { tabs: faqtabs, label: ui.vibe.faq.tabs, category: "" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.faq}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.faq}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faq-list-label"
+        data-testid="variant"
+        data-block="faq"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="faq-list-label" data-testid="variant-label">
+          {ui.blocks.variants.faq.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqList
+            id="faq-list"
+            title={ui.site.pricing.faqTitle}
+            items={faq}
+            empty={ui.vibe.faq.empty}
+            search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+            filter={{ ...FAQ_FILTER, mode: "none" }}
+            layout="accordion"
+            cols="1"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faq-chat-label"
+        data-testid="variant"
+        data-block="faq"
+        data-variant="chat"
+      >
+        <Title as={2} size="base" weight="bold" id="faq-chat-label" data-testid="variant-label">
+          {ui.blocks.variants.faq.chat}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqList
+            id="faq-chat"
+            title={ui.site.pricing.faqTitle}
+            items={faq}
+            empty={ui.vibe.faq.empty}
+            search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+            filter={{ ...FAQ_FILTER, mode: "none" }}
+            layout="chat"
+            cols="1"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faq-search-label"
+        data-testid="variant"
+        data-block="faq"
+        data-variant="search"
+      >
+        <Title as={2} size="base" weight="bold" id="faq-search-label" data-testid="variant-label">
+          {ui.blocks.variants.faq.search}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqList
+            id="faq-search"
+            title={ui.site.pricing.faqTitle}
+            items={faq}
+            empty={ui.vibe.faq.empty}
+            search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+            filter={{ ...FAQ_FILTER, mode: "none" }}
+            layout="accordion"
+            cols="1"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faq-tabs-label"
+        data-testid="variant"
+        data-block="faq"
+        data-variant="tabs"
+      >
+        <Title as={2} size="base" weight="bold" id="faq-tabs-label" data-testid="variant-label">
+          {ui.blocks.variants.faq.tabs}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqList
+            id="faq-tabs"
+            title={ui.site.pricing.faqTitle}
+            items={faq}
+            empty={ui.vibe.faq.empty}
+            search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+            filter={{ ...FAQ_FILTER, category: "billing", mode: "categories" }}
+            layout="accordion"
+            cols="1"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faq-twoColumns-label"
+        data-testid="variant"
+        data-block="faq"
+        data-variant="twoColumns"
+      >
+        <Title as={2} size="base" weight="bold" id="faq-twoColumns-label" data-testid="variant-label">
+          {ui.blocks.variants.faq.twoColumns}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqList
+            id="faq-twoColumns"
+            title={ui.site.pricing.faqTitle}
+            items={faq}
+            empty={ui.vibe.faq.empty}
+            search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+            filter={{ ...FAQ_FILTER, mode: "none" }}
+            layout="accordion"
+            cols="2"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faq-muted-label"
+        data-testid="variant"
+        data-block="faq"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="faq-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.faq.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqList
+            id="faq-muted"
+            title={ui.site.pricing.faqTitle}
+            items={faq}
+            empty={ui.vibe.faq.empty}
+            search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+            filter={{ ...FAQ_FILTER, mode: "none" }}
+            layout="accordion"
+            cols="1"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.muted))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faq-roomy-label"
+        data-testid="variant"
+        data-block="faq"
+        data-variant="roomy"
+      >
+        <Title as={2} size="base" weight="bold" id="faq-roomy-label" data-testid="variant-label">
+          {ui.blocks.variants.faq.roomy}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqList
+            id="faq-roomy"
+            title={ui.site.pricing.faqTitle}
+            items={faq}
+            empty={ui.vibe.faq.empty}
+            search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+            filter={{ ...FAQ_FILTER, mode: "none" }}
+            layout="accordion"
+            cols="1"
+            tone="default"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.roomy))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/FaqsplitPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/FaqsplitPage.svelte
new file mode 100644
index 0000000..74beaa6
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/FaqsplitPage.svelte
@@ -0,0 +1,284 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The faqsplit page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FaqSplit,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type FaqTab,
+    type Feature,
+    type Question,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+  import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+  const QUESTIONS_FIELDS = {
+    "id": "id",
+    "question": "title",
+    "answer": "metadata.answer.value",
+    "category": "terms|term:faq_category",
+    "icon": "metadata.icon.value",
+  } as const;
+
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+  const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+
+  const FAQSPLIT_LABELS = {
+    cta: ui.marketing.faqSplit.cta,
+    more: ui.marketing.faqSplit.more,
+    asideTitle: ui.marketing.faqSplit.asideTitle,
+    asideText: ui.marketing.faqSplit.asideText,
+    asideCta: ui.marketing.faqSplit.asideCta,
+    search: ui.marketing.faqSplit.search,
+    popular: ui.marketing.faqSplit.popular,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.faqsplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.faqsplit}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faqsplit-headSplit-label"
+        data-testid="variant"
+        data-block="faqsplit"
+        data-variant="headSplit"
+      >
+        <Title as={2} size="base" weight="bold" id="faqsplit-headSplit-label" data-testid="variant-label">
+          {ui.blocks.variants.faqsplit.headSplit}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqSplit
+            id="faqsplit-headSplit"
+            title={ui.marketing.faqSplit.title}
+            lead={ui.marketing.faqSplit.lead}
+            badge={ui.marketing.faqSplit.badge}
+            items={questions}
+            channels={channels}
+            topics={faqtabs}
+            labels={FAQSPLIT_LABELS}
+            layout="head"
+            cards="grid3"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.headSplit))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faqsplit-helpCard-label"
+        data-testid="variant"
+        data-block="faqsplit"
+        data-variant="helpCard"
+      >
+        <Title as={2} size="base" weight="bold" id="faqsplit-helpCard-label" data-testid="variant-label">
+          {ui.blocks.variants.faqsplit.helpCard}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqSplit
+            id="faqsplit-helpCard"
+            title={ui.marketing.faqSplit.title}
+            lead={ui.marketing.faqSplit.lead}
+            badge={ui.marketing.faqSplit.badge}
+            items={questions}
+            channels={channels}
+            topics={faqtabs}
+            labels={FAQSPLIT_LABELS}
+            layout="aside"
+            cards="grid3"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faqsplit-picture-label"
+        data-testid="variant"
+        data-block="faqsplit"
+        data-variant="picture"
+      >
+        <Title as={2} size="base" weight="bold" id="faqsplit-picture-label" data-testid="variant-label">
+          {ui.blocks.variants.faqsplit.picture}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqSplit
+            id="faqsplit-picture"
+            title={ui.marketing.faqSplit.title}
+            lead={ui.marketing.faqSplit.lead}
+            badge={ui.marketing.faqSplit.badge}
+            items={questions}
+            channels={channels}
+            topics={faqtabs}
+            labels={FAQSPLIT_LABELS}
+            layout="media"
+            cards="grid3"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.picture))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faqsplit-finder-label"
+        data-testid="variant"
+        data-block="faqsplit"
+        data-variant="finder"
+      >
+        <Title as={2} size="base" weight="bold" id="faqsplit-finder-label" data-testid="variant-label">
+          {ui.blocks.variants.faqsplit.finder}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqSplit
+            id="faqsplit-finder"
+            title={ui.marketing.faqSplit.title}
+            lead={ui.marketing.faqSplit.lead}
+            badge={ui.marketing.faqSplit.badge}
+            items={questions}
+            channels={channels}
+            topics={faqtabs}
+            labels={FAQSPLIT_LABELS}
+            layout="search"
+            cards="grid3"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.finder))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faqsplit-cards3-label"
+        data-testid="variant"
+        data-block="faqsplit"
+        data-variant="cards3"
+      >
+        <Title as={2} size="base" weight="bold" id="faqsplit-cards3-label" data-testid="variant-label">
+          {ui.blocks.variants.faqsplit.cards3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqSplit
+            id="faqsplit-cards3"
+            title={ui.marketing.faqSplit.title}
+            lead={ui.marketing.faqSplit.lead}
+            badge={ui.marketing.faqSplit.badge}
+            items={questions}
+            channels={channels}
+            topics={faqtabs}
+            labels={FAQSPLIT_LABELS}
+            layout="cards"
+            cards="grid3"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faqsplit-cards4-label"
+        data-testid="variant"
+        data-block="faqsplit"
+        data-variant="cards4"
+      >
+        <Title as={2} size="base" weight="bold" id="faqsplit-cards4-label" data-testid="variant-label">
+          {ui.blocks.variants.faqsplit.cards4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqSplit
+            id="faqsplit-cards4"
+            title={ui.marketing.faqSplit.title}
+            lead={ui.marketing.faqSplit.lead}
+            badge={ui.marketing.faqSplit.badge}
+            items={questions}
+            channels={channels}
+            topics={faqtabs}
+            labels={FAQSPLIT_LABELS}
+            layout="cards"
+            cards="grid4"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="faqsplit-cardsIcons-label"
+        data-testid="variant"
+        data-block="faqsplit"
+        data-variant="cardsIcons"
+      >
+        <Title as={2} size="base" weight="bold" id="faqsplit-cardsIcons-label" data-testid="variant-label">
+          {ui.blocks.variants.faqsplit.cardsIcons}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FaqSplit
+            id="faqsplit-cardsIcons"
+            title={ui.marketing.faqSplit.title}
+            lead={ui.marketing.faqSplit.lead}
+            badge={ui.marketing.faqSplit.badge}
+            items={questions}
+            channels={channels}
+            topics={faqtabs}
+            labels={FAQSPLIT_LABELS}
+            layout="cards"
+            cards="icons"
+            mediaSide="end"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cardsIcons))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/FeaturesPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/FeaturesPage.svelte
new file mode 100644
index 0000000..da7a9fa
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/FeaturesPage.svelte
@@ -0,0 +1,282 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The features page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FeatureGrid,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.features}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.features}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="features-grid-label"
+        data-testid="variant"
+        data-block="features"
+        data-variant="grid"
+      >
+        <Title as={2} size="base" weight="bold" id="features-grid-label" data-testid="variant-label">
+          {ui.blocks.variants.features.grid}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureGrid
+            id="features-grid"
+            title={ui.site.home.featuresTitle}
+            features={features}
+            empty={ui.empty.features}
+            action={{ label: ui.site.home.featuresAction, href: "#/" }}
+            layout="grid"
+            cols="1-3"
+            item="card"
+            mediaSide="end"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="features-grid2-label"
+        data-testid="variant"
+        data-block="features"
+        data-variant="grid2"
+      >
+        <Title as={2} size="base" weight="bold" id="features-grid2-label" data-testid="variant-label">
+          {ui.blocks.variants.features.grid2}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureGrid
+            id="features-grid2"
+            title={ui.site.home.featuresTitle}
+            features={features}
+            empty={ui.empty.features}
+            action={{ label: ui.site.home.featuresAction, href: "#/" }}
+            layout="grid"
+            cols="1-2"
+            item="card"
+            mediaSide="end"
+            tone="default"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="features-tiles4-label"
+        data-testid="variant"
+        data-block="features"
+        data-variant="tiles4"
+      >
+        <Title as={2} size="base" weight="bold" id="features-tiles4-label" data-testid="variant-label">
+          {ui.blocks.variants.features.tiles4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureGrid
+            id="features-tiles4"
+            title={ui.site.home.featuresTitle}
+            features={features}
+            empty={ui.empty.features}
+            action={{ label: ui.site.home.featuresAction, href: "#/" }}
+            layout="grid"
+            cols="1-4"
+            item="tile"
+            mediaSide="end"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="features-cells4-label"
+        data-testid="variant"
+        data-block="features"
+        data-variant="cells4"
+      >
+        <Title as={2} size="base" weight="bold" id="features-cells4-label" data-testid="variant-label">
+          {ui.blocks.variants.features.cells4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureGrid
+            id="features-cells4"
+            title={ui.site.home.featuresTitle}
+            features={features}
+            empty={ui.empty.features}
+            action={{ label: ui.site.home.featuresAction, href: "#/" }}
+            layout="grid"
+            cols="1-4"
+            item="cell"
+            mediaSide="end"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.cells4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="features-rows-label"
+        data-testid="variant"
+        data-block="features"
+        data-variant="rows"
+      >
+        <Title as={2} size="base" weight="bold" id="features-rows-label" data-testid="variant-label">
+          {ui.blocks.variants.features.rows}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureGrid
+            id="features-rows"
+            title={ui.site.home.featuresTitle}
+            features={features}
+            empty={ui.empty.features}
+            action={{ label: ui.site.home.featuresAction, href: "#/" }}
+            layout="rows"
+            cols="1-3"
+            item="card"
+            mediaSide="end"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rows))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="features-rowsStart-label"
+        data-testid="variant"
+        data-block="features"
+        data-variant="rowsStart"
+      >
+        <Title as={2} size="base" weight="bold" id="features-rowsStart-label" data-testid="variant-label">
+          {ui.blocks.variants.features.rowsStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureGrid
+            id="features-rowsStart"
+            title={ui.site.home.featuresTitle}
+            features={features}
+            empty={ui.empty.features}
+            action={{ label: ui.site.home.featuresAction, href: "#/" }}
+            layout="rows"
+            cols="1-3"
+            item="card"
+            mediaSide="start"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="features-rowsAlternate-label"
+        data-testid="variant"
+        data-block="features"
+        data-variant="rowsAlternate"
+      >
+        <Title as={2} size="base" weight="bold" id="features-rowsAlternate-label" data-testid="variant-label">
+          {ui.blocks.variants.features.rowsAlternate}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureGrid
+            id="features-rowsAlternate"
+            title={ui.site.home.featuresTitle}
+            features={features}
+            empty={ui.empty.features}
+            action={{ label: ui.site.home.featuresAction, href: "#/" }}
+            layout="rows"
+            cols="1-3"
+            item="card"
+            mediaSide="alternate"
+            tone="muted"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="features-tilesMuted-label"
+        data-testid="variant"
+        data-block="features"
+        data-variant="tilesMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="features-tilesMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.features.tilesMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureGrid
+            id="features-tilesMuted"
+            title={ui.site.home.featuresTitle}
+            features={features}
+            empty={ui.empty.features}
+            action={{ label: ui.site.home.featuresAction, href: "#/" }}
+            layout="grid"
+            cols="1-3"
+            item="tile"
+            mediaSide="end"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tilesMuted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/FeatureshowcasePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/FeatureshowcasePage.svelte
new file mode 100644
index 0000000..7b49b85
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/FeatureshowcasePage.svelte
@@ -0,0 +1,161 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The featureshowcase page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FeatureShowcase,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+  const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.featureshowcase}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.featureshowcase}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featureshowcase-pictureCards3-label"
+        data-testid="variant"
+        data-block="featureshowcase"
+        data-variant="pictureCards3"
+      >
+        <Title as={2} size="base" weight="bold" id="featureshowcase-pictureCards3-label" data-testid="variant-label">
+          {ui.blocks.variants.featureshowcase.pictureCards3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureShowcase
+            id="featureshowcase-pictureCards3"
+            title={ui.marketing.featureShowcase.title}
+            lead={ui.marketing.featureShowcase.lead}
+            features={values}
+            empty={ui.empty.features}
+            more={ui.marketing.featureShowcase.more}
+            item="picture"
+            cols="3"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featureshowcase-panelCards4-label"
+        data-testid="variant"
+        data-block="featureshowcase"
+        data-variant="panelCards4"
+      >
+        <Title as={2} size="base" weight="bold" id="featureshowcase-panelCards4-label" data-testid="variant-label">
+          {ui.blocks.variants.featureshowcase.panelCards4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureShowcase
+            id="featureshowcase-panelCards4"
+            title={ui.marketing.featureShowcase.title}
+            lead={ui.marketing.featureShowcase.lead}
+            features={features}
+            empty={ui.empty.features}
+            more={ui.marketing.featureShowcase.more}
+            item="panel"
+            cols="4"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featureshowcase-pictureCards4-label"
+        data-testid="variant"
+        data-block="featureshowcase"
+        data-variant="pictureCards4"
+      >
+        <Title as={2} size="base" weight="bold" id="featureshowcase-pictureCards4-label" data-testid="variant-label">
+          {ui.blocks.variants.featureshowcase.pictureCards4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureShowcase
+            id="featureshowcase-pictureCards4"
+            title={ui.marketing.featureShowcase.title}
+            lead={ui.marketing.featureShowcase.lead}
+            features={features}
+            empty={ui.empty.features}
+            more={ui.marketing.featureShowcase.more}
+            item="picture"
+            cols="4"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featureshowcase-panelCards3-label"
+        data-testid="variant"
+        data-block="featureshowcase"
+        data-variant="panelCards3"
+      >
+        <Title as={2} size="base" weight="bold" id="featureshowcase-panelCards3-label" data-testid="variant-label">
+          {ui.blocks.variants.featureshowcase.panelCards3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureShowcase
+            id="featureshowcase-panelCards3"
+            title={ui.marketing.featureShowcase.title}
+            lead={ui.marketing.featureShowcase.lead}
+            features={values}
+            empty={ui.empty.features}
+            more={ui.marketing.featureShowcase.more}
+            item="panel"
+            cols="3"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards3))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/FeaturesplitPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/FeaturesplitPage.svelte
new file mode 100644
index 0000000..6fcc650
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/FeaturesplitPage.svelte
@@ -0,0 +1,213 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The featuresplit page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FeatureSplit,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+  const FEATURESPLIT_ACTIONS = {
+    mode: "two",
+    cta: ui.marketing.featureSplit.cta,
+    href: "#/start",
+    secondary: ui.marketing.featureSplit.secondary,
+    secondaryHref: "#/work",
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.featuresplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.featuresplit}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featuresplit-gridStart-label"
+        data-testid="variant"
+        data-block="featuresplit"
+        data-variant="gridStart"
+      >
+        <Title as={2} size="base" weight="bold" id="featuresplit-gridStart-label" data-testid="variant-label">
+          {ui.blocks.variants.featuresplit.gridStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureSplit
+            id="featuresplit-gridStart"
+            title={ui.marketing.featureSplit.title}
+            lead={ui.marketing.featureSplit.lead}
+            badge={ui.marketing.featureSplit.badge}
+            features={features}
+            stats={stats}
+            actions={FEATURESPLIT_ACTIONS}
+            layout="grid"
+            mediaSide="start"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featuresplit-statsStart-label"
+        data-testid="variant"
+        data-block="featuresplit"
+        data-variant="statsStart"
+      >
+        <Title as={2} size="base" weight="bold" id="featuresplit-statsStart-label" data-testid="variant-label">
+          {ui.blocks.variants.featuresplit.statsStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureSplit
+            id="featuresplit-statsStart"
+            title={ui.marketing.featureSplit.title}
+            lead={ui.marketing.featureSplit.lead}
+            badge={ui.marketing.featureSplit.badge}
+            features={features}
+            stats={stats}
+            actions={FEATURESPLIT_ACTIONS}
+            layout="stats"
+            mediaSide="start"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.statsStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featuresplit-gridMuted-label"
+        data-testid="variant"
+        data-block="featuresplit"
+        data-variant="gridMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="featuresplit-gridMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.featuresplit.gridMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureSplit
+            id="featuresplit-gridMuted"
+            title={ui.marketing.featureSplit.title}
+            lead={ui.marketing.featureSplit.lead}
+            badge={ui.marketing.featureSplit.badge}
+            features={features}
+            stats={stats}
+            actions={FEATURESPLIT_ACTIONS}
+            layout="grid"
+            mediaSide="end"
+            tone="muted"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridMuted))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featuresplit-metricCards-label"
+        data-testid="variant"
+        data-block="featuresplit"
+        data-variant="metricCards"
+      >
+        <Title as={2} size="base" weight="bold" id="featuresplit-metricCards-label" data-testid="variant-label">
+          {ui.blocks.variants.featuresplit.metricCards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureSplit
+            id="featuresplit-metricCards"
+            title={ui.marketing.featureSplit.title}
+            lead={ui.marketing.featureSplit.lead}
+            badge={ui.marketing.featureSplit.badge}
+            features={features}
+            stats={stats}
+            actions={FEATURESPLIT_ACTIONS}
+            layout="metrics"
+            mediaSide="end"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featuresplit-featureCards-label"
+        data-testid="variant"
+        data-block="featuresplit"
+        data-variant="featureCards"
+      >
+        <Title as={2} size="base" weight="bold" id="featuresplit-featureCards-label" data-testid="variant-label">
+          {ui.blocks.variants.featuresplit.featureCards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureSplit
+            id="featuresplit-featureCards"
+            title={ui.marketing.featureSplit.title}
+            lead={ui.marketing.featureSplit.lead}
+            badge={ui.marketing.featureSplit.badge}
+            features={features}
+            stats={stats}
+            actions={FEATURESPLIT_ACTIONS}
+            layout="cards"
+            mediaSide="end"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.featureCards))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/FeaturetabsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/FeaturetabsPage.svelte
new file mode 100644
index 0000000..3f04a62
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/FeaturetabsPage.svelte
@@ -0,0 +1,131 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The featuretabs page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FeatureTabs,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.featuretabs}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.featuretabs}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featuretabs-split-label"
+        data-testid="variant"
+        data-block="featuretabs"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="featuretabs-split-label" data-testid="variant-label">
+          {ui.blocks.variants.featuretabs.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureTabs
+            id="featuretabs-split"
+            title={ui.vibe.tabs.title}
+            features={features}
+            empty={ui.empty.features}
+            tabsLabel={ui.vibe.tabs.label}
+            active="feature-clear"
+            panel="split"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featuretabs-stack-label"
+        data-testid="variant"
+        data-block="featuretabs"
+        data-variant="stack"
+      >
+        <Title as={2} size="base" weight="bold" id="featuretabs-stack-label" data-testid="variant-label">
+          {ui.blocks.variants.featuretabs.stack}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureTabs
+            id="featuretabs-stack"
+            title={ui.vibe.tabs.title}
+            features={features}
+            empty={ui.empty.features}
+            tabsLabel={ui.vibe.tabs.label}
+            active="feature-clear"
+            panel="stack"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.stack))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="featuretabs-muted-label"
+        data-testid="variant"
+        data-block="featuretabs"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="featuretabs-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.featuretabs.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureTabs
+            id="featuretabs-muted"
+            title={ui.vibe.tabs.title}
+            features={features}
+            empty={ui.empty.features}
+            tabsLabel={ui.vibe.tabs.label}
+            active="feature-clear"
+            panel="split"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/FooterPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/FooterPage.svelte
new file mode 100644
index 0000000..4d531e4
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/FooterPage.svelte
@@ -0,0 +1,106 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The footer page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    SiteFooter,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.footer}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.footer}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="footer-minimal-label"
+        data-testid="variant"
+        data-block="footer"
+        data-variant="minimal"
+      >
+        <Title as={2} size="base" weight="bold" id="footer-minimal-label" data-testid="variant-label">
+          {ui.blocks.variants.footer.minimal}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SiteFooter
+            labels={ui.site.footer}
+            layout="minimal"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.minimal))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="footer-centered-label"
+        data-testid="variant"
+        data-block="footer"
+        data-variant="centered"
+      >
+        <Title as={2} size="base" weight="bold" id="footer-centered-label" data-testid="variant-label">
+          {ui.blocks.variants.footer.centered}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SiteFooter
+            labels={ui.site.footer}
+            layout="centered"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="footer-compact-label"
+        data-testid="variant"
+        data-block="footer"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="footer-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.footer.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SiteFooter
+            labels={ui.site.footer}
+            layout="minimal"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.compact))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/FootersplitPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/FootersplitPage.svelte
new file mode 100644
index 0000000..5b94940
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/FootersplitPage.svelte
@@ -0,0 +1,246 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The footersplit page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FooterSplit,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type MegaGroup,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+  import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+  const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+
+  const FOOTERSPLIT_EXTRAS = { stats, points: features, contacts, channels: community } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.footersplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.footersplit}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="footersplit-statsCards-label"
+        data-testid="variant"
+        data-block="footersplit"
+        data-variant="statsCards"
+      >
+        <Title as={2} size="base" weight="bold" id="footersplit-statsCards-label" data-testid="variant-label">
+          {ui.blocks.variants.footersplit.statsCards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FooterSplit
+            id="footersplit-statsCards"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.marketing.footerSplit.tagline}
+            copyright={ui.marketing.footerSplit.copyright}
+            groups={sitemap}
+            extras={FOOTERSPLIT_EXTRAS}
+            labels={ui.marketing.footerSplit.labels}
+            layout="stats"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.statsCards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="footersplit-splitPoints-label"
+        data-testid="variant"
+        data-block="footersplit"
+        data-variant="splitPoints"
+      >
+        <Title as={2} size="base" weight="bold" id="footersplit-splitPoints-label" data-testid="variant-label">
+          {ui.blocks.variants.footersplit.splitPoints}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FooterSplit
+            id="footersplit-splitPoints"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.marketing.footerSplit.tagline}
+            copyright={ui.marketing.footerSplit.copyright}
+            groups={sitemap}
+            extras={FOOTERSPLIT_EXTRAS}
+            labels={ui.marketing.footerSplit.labels}
+            layout="points"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitPoints))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="footersplit-splitLinks-label"
+        data-testid="variant"
+        data-block="footersplit"
+        data-variant="splitLinks"
+      >
+        <Title as={2} size="base" weight="bold" id="footersplit-splitLinks-label" data-testid="variant-label">
+          {ui.blocks.variants.footersplit.splitLinks}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FooterSplit
+            id="footersplit-splitLinks"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.marketing.footerSplit.tagline}
+            copyright={ui.marketing.footerSplit.copyright}
+            groups={sitemap}
+            extras={FOOTERSPLIT_EXTRAS}
+            labels={ui.marketing.footerSplit.labels}
+            layout="links"
+            mediaSide="end"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitLinks))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="footersplit-newsletterStart-label"
+        data-testid="variant"
+        data-block="footersplit"
+        data-variant="newsletterStart"
+      >
+        <Title as={2} size="base" weight="bold" id="footersplit-newsletterStart-label" data-testid="variant-label">
+          {ui.blocks.variants.footersplit.newsletterStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FooterSplit
+            id="footersplit-newsletterStart"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.marketing.footerSplit.tagline}
+            copyright={ui.marketing.footerSplit.copyright}
+            groups={sitemap}
+            extras={FOOTERSPLIT_EXTRAS}
+            labels={ui.marketing.footerSplit.labels}
+            layout="newsletter"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.newsletterStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="footersplit-splitContacts-label"
+        data-testid="variant"
+        data-block="footersplit"
+        data-variant="splitContacts"
+      >
+        <Title as={2} size="base" weight="bold" id="footersplit-splitContacts-label" data-testid="variant-label">
+          {ui.blocks.variants.footersplit.splitContacts}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FooterSplit
+            id="footersplit-splitContacts"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.marketing.footerSplit.tagline}
+            copyright={ui.marketing.footerSplit.copyright}
+            groups={sitemap}
+            extras={FOOTERSPLIT_EXTRAS}
+            labels={ui.marketing.footerSplit.labels}
+            layout="contacts"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitContacts))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="footersplit-channelsStart-label"
+        data-testid="variant"
+        data-block="footersplit"
+        data-variant="channelsStart"
+      >
+        <Title as={2} size="base" weight="bold" id="footersplit-channelsStart-label" data-testid="variant-label">
+          {ui.blocks.variants.footersplit.channelsStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FooterSplit
+            id="footersplit-channelsStart"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.marketing.footerSplit.tagline}
+            copyright={ui.marketing.footerSplit.copyright}
+            groups={sitemap}
+            extras={FOOTERSPLIT_EXTRAS}
+            labels={ui.marketing.footerSplit.labels}
+            layout="channels"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.channelsStart))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/HeaderPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/HeaderPage.svelte
new file mode 100644
index 0000000..792ad9b
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/HeaderPage.svelte
@@ -0,0 +1,145 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The header page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    SiteHeader,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.header}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.header}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="header-inline-label"
+        data-testid="variant"
+        data-block="header"
+        data-variant="inline"
+      >
+        <Title as={2} size="base" weight="bold" id="header-inline-label" data-testid="variant-label">
+          {ui.blocks.variants.header.inline}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SiteHeader
+            labels={ui.site.header}
+            current="home"
+            cta={ui.site.header.cta}
+            layout="inline"
+            position="static"
+            actions="none"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.inline))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="header-stacked-label"
+        data-testid="variant"
+        data-block="header"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="header-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.header.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SiteHeader
+            labels={ui.site.header}
+            current="home"
+            cta={ui.site.header.cta}
+            layout="stacked"
+            position="static"
+            actions="none"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="header-sticky-label"
+        data-testid="variant"
+        data-block="header"
+        data-variant="sticky"
+      >
+        <Title as={2} size="base" weight="bold" id="header-sticky-label" data-testid="variant-label">
+          {ui.blocks.variants.header.sticky}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SiteHeader
+            labels={ui.site.header}
+            current="home"
+            cta={ui.site.header.cta}
+            layout="inline"
+            position="sticky"
+            actions="none"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.sticky))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="header-withCta-label"
+        data-testid="variant"
+        data-block="header"
+        data-variant="withCta"
+      >
+        <Title as={2} size="base" weight="bold" id="header-withCta-label" data-testid="variant-label">
+          {ui.blocks.variants.header.withCta}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SiteHeader
+            labels={ui.site.header}
+            current="home"
+            cta={ui.site.header.cta}
+            layout="inline"
+            position="static"
+            actions="cta"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.withCta))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/HeroPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/HeroPage.svelte
new file mode 100644
index 0000000..3b266d4
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/HeroPage.svelte
@@ -0,0 +1,510 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The hero page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    HeroClassic,
+    HeroPrompt,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type NavLink,
+    type Topic,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { prompts as promptsEntries } from "@ui8kit/app-shared/data/prompts";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const PROMPTS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const prompts = fromCodex<Topic>(promptsEntries, PROMPTS_FIELDS, CODEX);
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+
+  const HERO_ACTIONS = {
+    cta: ui.site.home.cta,
+    href: "#/pricing",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+  } as const;
+  const HERO_MEDIA = { codeTitle: ui.vibe.code.title, prompt: ui.vibe.code.prompt, lines: terminal } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.hero}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.hero}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-centered-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="centered"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-centered-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.centered}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-centered"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "one" }}
+            media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+            layout="centered"
+            scale="default"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.centered))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-screenshot-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="screenshot"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-screenshot-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.screenshot}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-screenshot"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "one" }}
+            media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+            layout="centered"
+            scale="default"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.screenshot))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-backdrop-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="backdrop"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-backdrop-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.backdrop}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-backdrop"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "one" }}
+            media={{ ...HERO_MEDIA, kind: "backdrop", side: "end" }}
+            layout="centered"
+            scale="default"
+            tone="muted"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.backdrop))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-code-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="code"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-code-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.code}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-code"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "two" }}
+            media={{ ...HERO_MEDIA, kind: "code", side: "end" }}
+            layout="split"
+            scale="default"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.code))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-cluster-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="cluster"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-cluster-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.cluster}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-cluster"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "one" }}
+            media={{ ...HERO_MEDIA, kind: "cluster", side: "end" }}
+            layout="split"
+            scale="default"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.cluster))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-display-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="display"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-display-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.display}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-display"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "one" }}
+            media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+            layout="centered"
+            scale="display"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.display))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-form-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="form"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-form-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.form}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-form"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "form" }}
+            media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+            layout="centered"
+            scale="default"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.form))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-prompt-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="prompt"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-prompt-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.prompt}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroPrompt
+            title={ui.vibe.hero.title}
+            actions={{ ...HERO_ACTIONS, emailLabel: ui.vibe.hero.promptLabel, mode: "form" }}
+            composer={{ attachLabel: ui.vibe.hero.attach, modelLabel: ui.vibe.hero.model }}
+            nav={{
+              brand: ui.site.header.brand,
+              links: navlinks,
+              current: "link-product",
+              skip: ui.site.header.skip,
+              label: ui.site.header.nav,
+              login: ui.site.header.login,
+              loginHref: "#/login",
+            }}
+            density="compact"
+            badge={ui.vibe.hero.badgeLabel}
+            badgeMark={ui.vibe.hero.badgeMark}
+            topics={prompts}
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.prompt))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-twoActions-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="twoActions"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-twoActions-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.twoActions}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-twoActions"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "two" }}
+            media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+            layout="centered"
+            scale="default"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.twoActions))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-split-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-split-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-split"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "one" }}
+            media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+            layout="split"
+            scale="default"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-splitStart-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="splitStart"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-splitStart-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.splitStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-splitStart"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "two" }}
+            media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+            layout="split"
+            scale="default"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.splitStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-muted-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-muted"
+            title={ui.site.home.title}
+            text={ui.site.home.text}
+            actions={{ ...HERO_ACTIONS, mode: "one" }}
+            media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+            layout="centered"
+            scale="default"
+            tone="muted"
+            density="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.muted))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-saas-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="saas"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-saas-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.saas}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-saas"
+            title={ui.cases.saas.hero.title}
+            text={ui.cases.saas.hero.text}
+            actions={{
+              ...HERO_ACTIONS,
+              cta: ui.cases.saas.hero.cta,
+              secondary: ui.cases.saas.hero.secondary,
+              mode: "two",
+            }}
+            media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+            layout="split"
+            scale="default"
+            tone="default"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.saas))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-shop-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="shop"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.shop}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-shop"
+            title={ui.cases.shop.hero.title}
+            text={ui.cases.shop.hero.text}
+            actions={{
+              ...HERO_ACTIONS,
+              cta: ui.cases.shop.hero.cta,
+              secondary: ui.cases.shop.hero.secondary,
+              mode: "one",
+            }}
+            media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+            layout="split"
+            scale="default"
+            tone="muted"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="hero-blog-label"
+        data-testid="variant"
+        data-block="hero"
+        data-variant="blog"
+      >
+        <Title as={2} size="base" weight="bold" id="hero-blog-label" data-testid="variant-label">
+          {ui.blocks.variants.hero.blog}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroClassic
+            id="hero-blog"
+            title={ui.cases.blog.hero.title}
+            text={ui.cases.blog.hero.text}
+            actions={{
+              ...HERO_ACTIONS,
+              cta: ui.cases.blog.hero.cta,
+              secondary: ui.cases.blog.hero.secondary,
+              mode: "one",
+            }}
+            media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+            layout="centered"
+            scale="default"
+            tone="default"
+            density="compact"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.blog))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/HerosplitPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/HerosplitPage.svelte
new file mode 100644
index 0000000..707da4c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/HerosplitPage.svelte
@@ -0,0 +1,308 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The herosplit page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    HeroSplit,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Plan,
+    type Quote,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+  const HEROSPLIT_ACTIONS = {
+    mode: "two",
+    cta: ui.marketing.heroSplit.cta,
+    href: "#/pricing",
+    secondary: ui.marketing.heroSplit.secondary,
+    secondaryHref: "#/features",
+  } as const;
+  const HEROSPLIT_CONTENT = {
+    stats,
+    features,
+    people: testimonials,
+    plans: tiers,
+    proof: ui.marketing.heroSplit.proof,
+    card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.herosplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.herosplit}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="herosplit-statsCards-label"
+        data-testid="variant"
+        data-block="herosplit"
+        data-variant="statsCards"
+      >
+        <Title as={2} size="base" weight="bold" id="herosplit-statsCards-label" data-testid="variant-label">
+          {ui.blocks.variants.herosplit.statsCards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroSplit
+            id="herosplit-statsCards"
+            title={ui.marketing.heroSplit.title}
+            lead={ui.marketing.heroSplit.lead}
+            badge={ui.marketing.heroSplit.badge}
+            actions={HEROSPLIT_ACTIONS}
+            content={HEROSPLIT_CONTENT}
+            extra="stats"
+            media="picture"
+            mediaSide="end"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.statsCards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="herosplit-avatars-label"
+        data-testid="variant"
+        data-block="herosplit"
+        data-variant="avatars"
+      >
+        <Title as={2} size="base" weight="bold" id="herosplit-avatars-label" data-testid="variant-label">
+          {ui.blocks.variants.herosplit.avatars}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroSplit
+            id="herosplit-avatars"
+            title={ui.marketing.heroSplit.title}
+            lead={ui.marketing.heroSplit.lead}
+            badge={ui.marketing.heroSplit.badge}
+            actions={HEROSPLIT_ACTIONS}
+            content={HEROSPLIT_CONTENT}
+            extra="avatars"
+            media="picture"
+            mediaSide="end"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.avatars))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="herosplit-miniCards-label"
+        data-testid="variant"
+        data-block="herosplit"
+        data-variant="miniCards"
+      >
+        <Title as={2} size="base" weight="bold" id="herosplit-miniCards-label" data-testid="variant-label">
+          {ui.blocks.variants.herosplit.miniCards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroSplit
+            id="herosplit-miniCards"
+            title={ui.marketing.heroSplit.title}
+            lead={ui.marketing.heroSplit.lead}
+            badge={ui.marketing.heroSplit.badge}
+            actions={HEROSPLIT_ACTIONS}
+            content={HEROSPLIT_CONTENT}
+            extra="minis"
+            media="card"
+            mediaSide="end"
+            tone="muted"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.miniCards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="herosplit-quoteStats-label"
+        data-testid="variant"
+        data-block="herosplit"
+        data-variant="quoteStats"
+      >
+        <Title as={2} size="base" weight="bold" id="herosplit-quoteStats-label" data-testid="variant-label">
+          {ui.blocks.variants.herosplit.quoteStats}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroSplit
+            id="herosplit-quoteStats"
+            title={ui.marketing.heroSplit.title}
+            lead={ui.marketing.heroSplit.lead}
+            badge={ui.marketing.heroSplit.badge}
+            actions={HEROSPLIT_ACTIONS}
+            content={HEROSPLIT_CONTENT}
+            extra="quote"
+            media="card"
+            mediaSide="end"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.quoteStats))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="herosplit-planCards-label"
+        data-testid="variant"
+        data-block="herosplit"
+        data-variant="planCards"
+      >
+        <Title as={2} size="base" weight="bold" id="herosplit-planCards-label" data-testid="variant-label">
+          {ui.blocks.variants.herosplit.planCards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroSplit
+            id="herosplit-planCards"
+            title={ui.marketing.heroSplit.title}
+            lead={ui.marketing.heroSplit.lead}
+            badge={ui.marketing.heroSplit.badge}
+            actions={HEROSPLIT_ACTIONS}
+            content={HEROSPLIT_CONTENT}
+            extra="none"
+            media="plans"
+            mediaSide="start"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.planCards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="herosplit-pictureGrid-label"
+        data-testid="variant"
+        data-block="herosplit"
+        data-variant="pictureGrid"
+      >
+        <Title as={2} size="base" weight="bold" id="herosplit-pictureGrid-label" data-testid="variant-label">
+          {ui.blocks.variants.herosplit.pictureGrid}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroSplit
+            id="herosplit-pictureGrid"
+            title={ui.marketing.heroSplit.title}
+            lead={ui.marketing.heroSplit.lead}
+            badge={ui.marketing.heroSplit.badge}
+            actions={HEROSPLIT_ACTIONS}
+            content={HEROSPLIT_CONTENT}
+            extra="stats"
+            media="grid"
+            mediaSide="end"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGrid))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="herosplit-pictureGridStart-label"
+        data-testid="variant"
+        data-block="herosplit"
+        data-variant="pictureGridStart"
+      >
+        <Title as={2} size="base" weight="bold" id="herosplit-pictureGridStart-label" data-testid="variant-label">
+          {ui.blocks.variants.herosplit.pictureGridStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <HeroSplit
+            id="herosplit-pictureGridStart"
+            title={ui.marketing.heroSplit.title}
+            lead={ui.marketing.heroSplit.lead}
+            badge={ui.marketing.heroSplit.badge}
+            actions={HEROSPLIT_ACTIONS}
+            content={HEROSPLIT_CONTENT}
+            extra="avatars"
+            media="grid"
+            mediaSide="start"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGridStart))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/IconwallPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/IconwallPage.svelte
new file mode 100644
index 0000000..4bfd12c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/IconwallPage.svelte
@@ -0,0 +1,180 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The iconwall page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    IconWall,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.iconwall}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.iconwall}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="iconwall-tiles4-label"
+        data-testid="variant"
+        data-block="iconwall"
+        data-variant="tiles4"
+      >
+        <Title as={2} size="base" weight="bold" id="iconwall-tiles4-label" data-testid="variant-label">
+          {ui.blocks.variants.iconwall.tiles4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <IconWall
+            id="iconwall-tiles4"
+            title={ui.vibe.wall.title}
+            features={features}
+            empty={ui.empty.features}
+            cols="4"
+            item="tile"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="iconwall-tiles3-label"
+        data-testid="variant"
+        data-block="iconwall"
+        data-variant="tiles3"
+      >
+        <Title as={2} size="base" weight="bold" id="iconwall-tiles3-label" data-testid="variant-label">
+          {ui.blocks.variants.iconwall.tiles3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <IconWall
+            id="iconwall-tiles3"
+            title={ui.vibe.wall.title}
+            features={features}
+            empty={ui.empty.features}
+            cols="3"
+            item="tile"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="iconwall-chips6-label"
+        data-testid="variant"
+        data-block="iconwall"
+        data-variant="chips6"
+      >
+        <Title as={2} size="base" weight="bold" id="iconwall-chips6-label" data-testid="variant-label">
+          {ui.blocks.variants.iconwall.chips6}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <IconWall
+            id="iconwall-chips6"
+            title={ui.vibe.wall.title}
+            features={features}
+            empty={ui.empty.features}
+            cols="6"
+            item="chip"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="iconwall-chips4-label"
+        data-testid="variant"
+        data-block="iconwall"
+        data-variant="chips4"
+      >
+        <Title as={2} size="base" weight="bold" id="iconwall-chips4-label" data-testid="variant-label">
+          {ui.blocks.variants.iconwall.chips4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <IconWall
+            id="iconwall-chips4"
+            title={ui.vibe.wall.title}
+            features={features}
+            empty={ui.empty.features}
+            cols="4"
+            item="chip"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="iconwall-muted-label"
+        data-testid="variant"
+        data-block="iconwall"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="iconwall-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.iconwall.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <IconWall
+            id="iconwall-muted"
+            title={ui.vibe.wall.title}
+            features={features}
+            empty={ui.empty.features}
+            cols="4"
+            item="tile"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/IndexPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/IndexPage.svelte
new file mode 100644
index 0000000..c80402a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/IndexPage.svelte
@@ -0,0 +1,219 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The index page of BlocksScreen. -->
+<script lang="ts">
+  import { Block, Container, Link, List, ListItem, Stack, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const TOPICS = [
+    {
+      id: "marketing",
+      titleId: "theme-marketing-title",
+      title: ui.blocks.themes.marketing.title,
+      text: ui.blocks.themes.marketing.text,
+      blocks: [
+        { key: "about", href: "#/about", name: ui.blocks.names.about, docs: ui.blocks.docs.about },
+        { key: "aboutme", href: "#/aboutme", name: ui.blocks.names.aboutme, docs: ui.blocks.docs.aboutme },
+        { key: "accordion", href: "#/accordion", name: ui.blocks.names.accordion, docs: ui.blocks.docs.accordion },
+        { key: "beforeafter", href: "#/beforeafter", name: ui.blocks.names.beforeafter, docs: ui.blocks.docs.beforeafter },
+        { key: "bento", href: "#/bento", name: ui.blocks.names.bento, docs: ui.blocks.docs.bento },
+        { key: "compare", href: "#/compare", name: ui.blocks.names.compare, docs: ui.blocks.docs.compare },
+        { key: "credits", href: "#/credits", name: ui.blocks.names.credits, docs: ui.blocks.docs.credits },
+        { key: "cta", href: "#/cta", name: ui.blocks.names.cta, docs: ui.blocks.docs.cta },
+        { key: "ctaproof", href: "#/ctaproof", name: ui.blocks.names.ctaproof, docs: ui.blocks.docs.ctaproof },
+        { key: "faq", href: "#/faq", name: ui.blocks.names.faq, docs: ui.blocks.docs.faq },
+        { key: "faqsplit", href: "#/faqsplit", name: ui.blocks.names.faqsplit, docs: ui.blocks.docs.faqsplit },
+        { key: "features", href: "#/features", name: ui.blocks.names.features, docs: ui.blocks.docs.features },
+        { key: "featureshowcase", href: "#/featureshowcase", name: ui.blocks.names.featureshowcase, docs: ui.blocks.docs.featureshowcase },
+        { key: "featuresplit", href: "#/featuresplit", name: ui.blocks.names.featuresplit, docs: ui.blocks.docs.featuresplit },
+        { key: "featuretabs", href: "#/featuretabs", name: ui.blocks.names.featuretabs, docs: ui.blocks.docs.featuretabs },
+        { key: "footer", href: "#/footer", name: ui.blocks.names.footer, docs: ui.blocks.docs.footer },
+        { key: "footersplit", href: "#/footersplit", name: ui.blocks.names.footersplit, docs: ui.blocks.docs.footersplit },
+        { key: "header", href: "#/header", name: ui.blocks.names.header, docs: ui.blocks.docs.header },
+        { key: "hero", href: "#/hero", name: ui.blocks.names.hero, docs: ui.blocks.docs.hero },
+        { key: "herosplit", href: "#/herosplit", name: ui.blocks.names.herosplit, docs: ui.blocks.docs.herosplit },
+        { key: "iconwall", href: "#/iconwall", name: ui.blocks.names.iconwall, docs: ui.blocks.docs.iconwall },
+        { key: "jobs", href: "#/jobs", name: ui.blocks.names.jobs, docs: ui.blocks.docs.jobs },
+        { key: "logos", href: "#/logos", name: ui.blocks.names.logos, docs: ui.blocks.docs.logos },
+        { key: "medialist", href: "#/medialist", name: ui.blocks.names.medialist, docs: ui.blocks.docs.medialist },
+        { key: "megamenu", href: "#/megamenu", name: ui.blocks.names.megamenu, docs: ui.blocks.docs.megamenu },
+        { key: "navbar", href: "#/navbar", name: ui.blocks.names.navbar, docs: ui.blocks.docs.navbar },
+        { key: "pagehead", href: "#/pagehead", name: ui.blocks.names.pagehead, docs: ui.blocks.docs.pagehead },
+        { key: "pagetrail", href: "#/pagetrail", name: ui.blocks.names.pagetrail, docs: ui.blocks.docs.pagetrail },
+        { key: "photos", href: "#/photos", name: ui.blocks.names.photos, docs: ui.blocks.docs.photos },
+        { key: "plan", href: "#/plan", name: ui.blocks.names.plan, docs: ui.blocks.docs.plan },
+        { key: "pricing", href: "#/pricing", name: ui.blocks.names.pricing, docs: ui.blocks.docs.pricing },
+        { key: "projects", href: "#/projects", name: ui.blocks.names.projects, docs: ui.blocks.docs.projects },
+        { key: "proof", href: "#/proof", name: ui.blocks.names.proof, docs: ui.blocks.docs.proof },
+        { key: "quotesplit", href: "#/quotesplit", name: ui.blocks.names.quotesplit, docs: ui.blocks.docs.quotesplit },
+        { key: "sitemap", href: "#/sitemap", name: ui.blocks.names.sitemap, docs: ui.blocks.docs.sitemap },
+        { key: "stats", href: "#/stats", name: ui.blocks.names.stats, docs: ui.blocks.docs.stats },
+        { key: "steps", href: "#/steps", name: ui.blocks.names.steps, docs: ui.blocks.docs.steps },
+        { key: "sticky", href: "#/sticky", name: ui.blocks.names.sticky, docs: ui.blocks.docs.sticky },
+        { key: "team", href: "#/team", name: ui.blocks.names.team, docs: ui.blocks.docs.team },
+        { key: "templates", href: "#/templates", name: ui.blocks.names.templates, docs: ui.blocks.docs.templates },
+        { key: "testimonials", href: "#/testimonials", name: ui.blocks.names.testimonials, docs: ui.blocks.docs.testimonials },
+        { key: "usage", href: "#/usage", name: ui.blocks.names.usage, docs: ui.blocks.docs.usage },
+        { key: "videos", href: "#/videos", name: ui.blocks.names.videos, docs: ui.blocks.docs.videos },
+      ],
+    },
+    {
+      id: "commerce",
+      titleId: "theme-commerce-title",
+      title: ui.blocks.themes.commerce.title,
+      text: ui.blocks.themes.commerce.text,
+      blocks: [
+        { key: "cart", href: "#/cart", name: ui.blocks.names.cart, docs: ui.blocks.docs.cart },
+        { key: "cartdrawer", href: "#/cartdrawer", name: ui.blocks.names.cartdrawer, docs: ui.blocks.docs.cartdrawer },
+        { key: "cartpage", href: "#/cartpage", name: ui.blocks.names.cartpage, docs: ui.blocks.docs.cartpage },
+        { key: "categories", href: "#/categories", name: ui.blocks.names.categories, docs: ui.blocks.docs.categories },
+        { key: "checkout", href: "#/checkout", name: ui.blocks.names.checkout, docs: ui.blocks.docs.checkout },
+        { key: "delivery", href: "#/delivery", name: ui.blocks.names.delivery, docs: ui.blocks.docs.delivery },
+        { key: "locations", href: "#/locations", name: ui.blocks.names.locations, docs: ui.blocks.docs.locations },
+        { key: "orders", href: "#/orders", name: ui.blocks.names.orders, docs: ui.blocks.docs.orders },
+        { key: "product", href: "#/product", name: ui.blocks.names.product, docs: ui.blocks.docs.product },
+        { key: "productinfo", href: "#/productinfo", name: ui.blocks.names.productinfo, docs: ui.blocks.docs.productinfo },
+        { key: "products", href: "#/products", name: ui.blocks.names.products, docs: ui.blocks.docs.products },
+        { key: "reviews", href: "#/reviews", name: ui.blocks.names.reviews, docs: ui.blocks.docs.reviews },
+        { key: "slots", href: "#/slots", name: ui.blocks.names.slots, docs: ui.blocks.docs.slots },
+        { key: "storehero", href: "#/storehero", name: ui.blocks.names.storehero, docs: ui.blocks.docs.storehero },
+        { key: "summary", href: "#/summary", name: ui.blocks.names.summary, docs: ui.blocks.docs.summary },
+        { key: "usp", href: "#/usp", name: ui.blocks.names.usp, docs: ui.blocks.docs.usp },
+        { key: "zones", href: "#/zones", name: ui.blocks.names.zones, docs: ui.blocks.docs.zones },
+      ],
+    },
+    {
+      id: "promo",
+      titleId: "theme-promo-title",
+      title: ui.blocks.themes.promo.title,
+      text: ui.blocks.themes.promo.text,
+      blocks: [
+        { key: "announcement", href: "#/announcement", name: ui.blocks.names.announcement, docs: ui.blocks.docs.announcement },
+        { key: "cookie", href: "#/cookie", name: ui.blocks.names.cookie, docs: ui.blocks.docs.cookie },
+        { key: "newsletter", href: "#/newsletter", name: ui.blocks.names.newsletter, docs: ui.blocks.docs.newsletter },
+      ],
+    },
+    {
+      id: "content",
+      titleId: "theme-content-title",
+      title: ui.blocks.themes.content.title,
+      text: ui.blocks.themes.content.text,
+      blocks: [
+        { key: "article", href: "#/article", name: ui.blocks.names.article, docs: ui.blocks.docs.article },
+        { key: "postheader", href: "#/postheader", name: ui.blocks.names.postheader, docs: ui.blocks.docs.postheader },
+        { key: "posts", href: "#/posts", name: ui.blocks.names.posts, docs: ui.blocks.docs.posts },
+        { key: "postshowcase", href: "#/postshowcase", name: ui.blocks.names.postshowcase, docs: ui.blocks.docs.postshowcase },
+        { key: "postsplit", href: "#/postsplit", name: ui.blocks.names.postsplit, docs: ui.blocks.docs.postsplit },
+        { key: "storytabs", href: "#/storytabs", name: ui.blocks.names.storytabs, docs: ui.blocks.docs.storytabs },
+        { key: "timeline", href: "#/timeline", name: ui.blocks.names.timeline, docs: ui.blocks.docs.timeline },
+      ],
+    },
+    {
+      id: "account",
+      titleId: "theme-account-title",
+      title: ui.blocks.themes.account.title,
+      text: ui.blocks.themes.account.text,
+      blocks: [
+        { key: "auth", href: "#/auth", name: ui.blocks.names.auth, docs: ui.blocks.docs.auth },
+        { key: "authpage", href: "#/authpage", name: ui.blocks.names.authpage, docs: ui.blocks.docs.authpage },
+        { key: "profile", href: "#/profile", name: ui.blocks.names.profile, docs: ui.blocks.docs.profile },
+        { key: "wizard", href: "#/wizard", name: ui.blocks.names.wizard, docs: ui.blocks.docs.wizard },
+      ],
+    },
+    {
+      id: "dashboard",
+      titleId: "theme-dashboard-title",
+      title: ui.blocks.themes.dashboard.title,
+      text: ui.blocks.themes.dashboard.text,
+      blocks: [
+        { key: "activity", href: "#/activity", name: ui.blocks.names.activity, docs: ui.blocks.docs.activity },
+        { key: "bottomnav", href: "#/bottomnav", name: ui.blocks.names.bottomnav, docs: ui.blocks.docs.bottomnav },
+        { key: "chart", href: "#/chart", name: ui.blocks.names.chart, docs: ui.blocks.docs.chart },
+        { key: "dashshell", href: "#/dashshell", name: ui.blocks.names.dashshell, docs: ui.blocks.docs.dashshell },
+        { key: "empty", href: "#/empty", name: ui.blocks.names.empty, docs: ui.blocks.docs.empty },
+        { key: "kanban", href: "#/kanban", name: ui.blocks.names.kanban, docs: ui.blocks.docs.kanban },
+        { key: "metrics", href: "#/metrics", name: ui.blocks.names.metrics, docs: ui.blocks.docs.metrics },
+        { key: "overview", href: "#/overview", name: ui.blocks.names.overview, docs: ui.blocks.docs.overview },
+        { key: "shell", href: "#/shell", name: ui.blocks.names.shell, docs: ui.blocks.docs.shell },
+        { key: "sidenav", href: "#/sidenav", name: ui.blocks.names.sidenav, docs: ui.blocks.docs.sidenav },
+        { key: "skeleton", href: "#/skeleton", name: ui.blocks.names.skeleton, docs: ui.blocks.docs.skeleton },
+      ],
+    },
+    {
+      id: "onboarding",
+      titleId: "theme-onboarding-title",
+      title: ui.blocks.themes.onboarding.title,
+      text: ui.blocks.themes.onboarding.text,
+      blocks: [
+        { key: "checklist", href: "#/checklist", name: ui.blocks.names.checklist, docs: ui.blocks.docs.checklist },
+        { key: "stepper", href: "#/stepper", name: ui.blocks.names.stepper, docs: ui.blocks.docs.stepper },
+        { key: "tour", href: "#/tour", name: ui.blocks.names.tour, docs: ui.blocks.docs.tour },
+        { key: "videomodal", href: "#/videomodal", name: ui.blocks.names.videomodal, docs: ui.blocks.docs.videomodal },
+      ],
+    },
+    {
+      id: "support",
+      titleId: "theme-support-title",
+      title: ui.blocks.themes.support.title,
+      text: ui.blocks.themes.support.text,
+      blocks: [
+        { key: "channels", href: "#/channels", name: ui.blocks.names.channels, docs: ui.blocks.docs.channels },
+        { key: "contact", href: "#/contact", name: ui.blocks.names.contact, docs: ui.blocks.docs.contact },
+        { key: "errorpage", href: "#/errorpage", name: ui.blocks.names.errorpage, docs: ui.blocks.docs.errorpage },
+      ],
+    },
+  ] as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Stack gap="4" align="stretch">
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="gallery-title">
+          {ui.blocks.title}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.intro}
+        </Text>
+      </Stack>
+      {#each TOPICS as topic (topic.id)}
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby={topic.titleId}
+          data-testid="theme-section"
+          data-theme-id={topic.id}
+        >
+          <Stack gap="2" align="stretch">
+            <Title as={2} size="2xl" weight="bold" id={topic.titleId}>
+              {topic.title}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {topic.text}
+            </Text>
+          </Stack>
+          <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="block-list">
+            {#each topic.blocks as block (block.key)}
+              <ListItem class="flex flex-col gap-1 rounded-xl p-4 inset-ring inset-ring-border">
+                <Link
+                  href={block.href}
+                  variant="default"
+                  class="font-bold"
+                  data-testid="block-link"
+                  data-block={block.key}
+                  data-theme-id={topic.id}
+                >
+                  {block.name}
+                </Link>
+                <Text size="sm" class="text-muted-foreground">
+                  {block.docs}
+                </Text>
+              </ListItem>
+            {/each}
+          </List>
+        </Stack>
+      {/each}
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/JobsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/JobsPage.svelte
new file mode 100644
index 0000000..ad52c68
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/JobsPage.svelte
@@ -0,0 +1,174 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The jobs page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    JobBoard,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Department,
+    type Job,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+  import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+  const JOBS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "dept": "metadata.dept.value",
+    "location": "metadata.location.value",
+    "type": "metadata.type.value",
+    "salary": "metadata.salary.value",
+    "posted": "metadata.posted.value|ago-days",
+  } as const;
+  const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+  const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+  const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.jobs}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.jobs}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="jobs-grid-label"
+        data-testid="variant"
+        data-block="jobs"
+        data-variant="grid"
+      >
+        <Title as={2} size="base" weight="bold" id="jobs-grid-label" data-testid="variant-label">
+          {ui.blocks.variants.jobs.grid}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <JobBoard
+            id="jobs-grid"
+            title={ui.company.jobs.title}
+            lead={ui.company.jobs.lead}
+            jobs={jobs}
+            empty={ui.empty.jobs}
+            departments={departments}
+            labels={ui.company.jobs}
+            layout="grid"
+            salary="hide"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grid))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="jobs-salary-label"
+        data-testid="variant"
+        data-block="jobs"
+        data-variant="salary"
+      >
+        <Title as={2} size="base" weight="bold" id="jobs-salary-label" data-testid="variant-label">
+          {ui.blocks.variants.jobs.salary}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <JobBoard
+            id="jobs-salary"
+            title={ui.company.jobs.title}
+            lead={ui.company.jobs.lead}
+            jobs={jobs}
+            empty={ui.empty.jobs}
+            departments={departments}
+            labels={ui.company.jobs}
+            layout="grid"
+            salary="show"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.salary))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="jobs-grouped-label"
+        data-testid="variant"
+        data-block="jobs"
+        data-variant="grouped"
+      >
+        <Title as={2} size="base" weight="bold" id="jobs-grouped-label" data-testid="variant-label">
+          {ui.blocks.variants.jobs.grouped}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <JobBoard
+            id="jobs-grouped"
+            title={ui.company.jobs.title}
+            lead={ui.company.jobs.lead}
+            jobs={jobs}
+            empty={ui.empty.jobs}
+            departments={departments}
+            labels={ui.company.jobs}
+            layout="grouped"
+            salary="hide"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="jobs-table-label"
+        data-testid="variant"
+        data-block="jobs"
+        data-variant="table"
+      >
+        <Title as={2} size="base" weight="bold" id="jobs-table-label" data-testid="variant-label">
+          {ui.blocks.variants.jobs.table}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <JobBoard
+            id="jobs-table"
+            title={ui.company.jobs.title}
+            lead={ui.company.jobs.lead}
+            jobs={jobs}
+            empty={ui.empty.jobs}
+            departments={departments}
+            labels={ui.company.jobs}
+            layout="table"
+            salary="show"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.table))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/KanbanPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/KanbanPage.svelte
new file mode 100644
index 0000000..612ba26
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/KanbanPage.svelte
@@ -0,0 +1,166 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The kanban page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    KanbanBoard,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type BoardCard,
+    type Lane,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+  import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+  const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+  const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+  const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+  const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.kanban}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.kanban}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="kanban-detail-label"
+        data-testid="variant"
+        data-block="kanban"
+        data-variant="detail"
+      >
+        <Title as={2} size="base" weight="bold" id="kanban-detail-label" data-testid="variant-label">
+          {ui.blocks.variants.kanban.detail}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <KanbanBoard
+            id="kanban-detail"
+            title={ui.vibe.kanban.title}
+            lanes={lanes}
+            empty={ui.empty.lanes}
+            cards={cards}
+            countLabel={ui.vibe.kanban.count}
+            card="detail"
+            cols="3"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="kanban-simple-label"
+        data-testid="variant"
+        data-block="kanban"
+        data-variant="simple"
+      >
+        <Title as={2} size="base" weight="bold" id="kanban-simple-label" data-testid="variant-label">
+          {ui.blocks.variants.kanban.simple}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <KanbanBoard
+            id="kanban-simple"
+            title={ui.vibe.kanban.title}
+            lanes={lanes}
+            empty={ui.empty.lanes}
+            cards={cards}
+            countLabel={ui.vibe.kanban.count}
+            card="simple"
+            cols="3"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.simple))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="kanban-twoCols-label"
+        data-testid="variant"
+        data-block="kanban"
+        data-variant="twoCols"
+      >
+        <Title as={2} size="base" weight="bold" id="kanban-twoCols-label" data-testid="variant-label">
+          {ui.blocks.variants.kanban.twoCols}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <KanbanBoard
+            id="kanban-twoCols"
+            title={ui.vibe.kanban.title}
+            lanes={lanes}
+            empty={ui.empty.lanes}
+            cards={cards}
+            countLabel={ui.vibe.kanban.count}
+            card="detail"
+            cols="2"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="kanban-muted-label"
+        data-testid="variant"
+        data-block="kanban"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="kanban-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.kanban.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <KanbanBoard
+            id="kanban-muted"
+            title={ui.vibe.kanban.title}
+            lanes={lanes}
+            empty={ui.empty.lanes}
+            cards={cards}
+            countLabel={ui.vibe.kanban.count}
+            card="detail"
+            cols="3"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/LocationsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/LocationsPage.svelte
new file mode 100644
index 0000000..c082b6a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/LocationsPage.svelte
@@ -0,0 +1,140 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The locations page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    StoreLocations,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Store,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+  const STORES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "kind": "metadata.store_kind.value",
+    "address": "metadata.address.value",
+    "hours": "metadata.hours.value",
+    "phone": "metadata.phone.value",
+    "note": "metadata.note.value",
+    "services": "metadata.services.value",
+  } as const;
+
+  const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.locations}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.locations}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="locations-cards-label"
+        data-testid="variant"
+        data-block="locations"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="locations-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.locations.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoreLocations
+            id="locations-cards"
+            title={ui.commerce.stores.title}
+            lead={ui.commerce.stores.lead}
+            stores={stores}
+            empty={ui.empty.stores}
+            kinds={ui.commerce.stores.kinds}
+            labels={ui.commerce.stores}
+            layout="cards"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="locations-list-label"
+        data-testid="variant"
+        data-block="locations"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="locations-list-label" data-testid="variant-label">
+          {ui.blocks.variants.locations.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoreLocations
+            id="locations-list"
+            title={ui.commerce.stores.title}
+            lead={ui.commerce.stores.lead}
+            stores={stores}
+            empty={ui.empty.stores}
+            kinds={ui.commerce.stores.kinds}
+            labels={ui.commerce.stores}
+            layout="list"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="locations-map-label"
+        data-testid="variant"
+        data-block="locations"
+        data-variant="map"
+      >
+        <Title as={2} size="base" weight="bold" id="locations-map-label" data-testid="variant-label">
+          {ui.blocks.variants.locations.map}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoreLocations
+            id="locations-map"
+            title={ui.commerce.stores.title}
+            lead={ui.commerce.stores.lead}
+            stores={stores}
+            empty={ui.empty.stores}
+            kinds={ui.commerce.stores.kinds}
+            labels={ui.commerce.stores}
+            layout="map"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.map))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/LogosPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/LogosPage.svelte
new file mode 100644
index 0000000..ac5a017
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/LogosPage.svelte
@@ -0,0 +1,212 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The logos page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    LogoCloud,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Logo,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.logos}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.logos}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="logos-grid4-label"
+        data-testid="variant"
+        data-block="logos"
+        data-variant="grid4"
+      >
+        <Title as={2} size="base" weight="bold" id="logos-grid4-label" data-testid="variant-label">
+          {ui.blocks.variants.logos.grid4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <LogoCloud
+            id="logos-grid4"
+            title={ui.marketing.logos.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            layout="grid"
+            cols="4"
+            item="name"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="logos-grid3-label"
+        data-testid="variant"
+        data-block="logos"
+        data-variant="grid3"
+      >
+        <Title as={2} size="base" weight="bold" id="logos-grid3-label" data-testid="variant-label">
+          {ui.blocks.variants.logos.grid3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <LogoCloud
+            id="logos-grid3"
+            title={ui.marketing.logos.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            layout="grid"
+            cols="3"
+            item="tile"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="logos-row-label"
+        data-testid="variant"
+        data-block="logos"
+        data-variant="row"
+      >
+        <Title as={2} size="base" weight="bold" id="logos-row-label" data-testid="variant-label">
+          {ui.blocks.variants.logos.row}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <LogoCloud
+            id="logos-row"
+            title={ui.marketing.logos.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            layout="row"
+            cols="4"
+            item="icon"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="logos-icons-label"
+        data-testid="variant"
+        data-block="logos"
+        data-variant="icons"
+      >
+        <Title as={2} size="base" weight="bold" id="logos-icons-label" data-testid="variant-label">
+          {ui.blocks.variants.logos.icons}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <LogoCloud
+            id="logos-icons"
+            title={ui.marketing.logos.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            layout="grid"
+            cols="4"
+            item="icon"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.icons))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="logos-grid2-label"
+        data-testid="variant"
+        data-block="logos"
+        data-variant="grid2"
+      >
+        <Title as={2} size="base" weight="bold" id="logos-grid2-label" data-testid="variant-label">
+          {ui.blocks.variants.logos.grid2}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <LogoCloud
+            id="logos-grid2"
+            title={ui.marketing.logos.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            layout="grid"
+            cols="2"
+            item="name"
+            tone="default"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid2))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="logos-tiles4-label"
+        data-testid="variant"
+        data-block="logos"
+        data-variant="tiles4"
+      >
+        <Title as={2} size="base" weight="bold" id="logos-tiles4-label" data-testid="variant-label">
+          {ui.blocks.variants.logos.tiles4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <LogoCloud
+            id="logos-tiles4"
+            title={ui.marketing.logos.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            layout="grid"
+            cols="4"
+            item="tile"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/MedialistPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/MedialistPage.svelte
new file mode 100644
index 0000000..3380967
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/MedialistPage.svelte
@@ -0,0 +1,277 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The medialist page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    MediaList,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Category,
+    type Feature,
+    type Post,
+    type Review,
+    type Stat,
+    type Step,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const REVIEWS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "author": "author_id|author",
+    "rating": "metadata.rating.value",
+    "text": "metadata.text.value",
+    "date": "metadata.date.value|date",
+  } as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+  const MEDIALIST_LABELS = {
+    count: ui.marketing.mediaList.count,
+    minutes: ui.content.labels.minutes,
+    featured: ui.marketing.mediaList.featured,
+    rating: ui.testimonials.rating,
+    figures: ui.marketing.mediaList.supportFigures,
+  } as const;
+  const MEDIALIST_EXTRAS = { stats, steps, posts, topics: categories, channels, reviews } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.medialist}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.medialist}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="medialist-figuresStart-label"
+        data-testid="variant"
+        data-block="medialist"
+        data-variant="figuresStart"
+      >
+        <Title as={2} size="base" weight="bold" id="medialist-figuresStart-label" data-testid="variant-label">
+          {ui.blocks.variants.medialist.figuresStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MediaList
+            id="medialist-figuresStart"
+            title={ui.marketing.mediaList.figures.title}
+            lead={ui.marketing.mediaList.figures.lead}
+            badge={ui.marketing.mediaList.figures.badge}
+            labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.figures.list }}
+            actions={{ mode: "one", cta: ui.marketing.mediaList.figures.cta, href: "#/start" }}
+            extras={MEDIALIST_EXTRAS}
+            layout="figures"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.figuresStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="medialist-proofReview-label"
+        data-testid="variant"
+        data-block="medialist"
+        data-variant="proofReview"
+      >
+        <Title as={2} size="base" weight="bold" id="medialist-proofReview-label" data-testid="variant-label">
+          {ui.blocks.variants.medialist.proofReview}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MediaList
+            id="medialist-proofReview"
+            title={ui.marketing.mediaList.proof.title}
+            lead={ui.marketing.mediaList.proof.lead}
+            badge={ui.marketing.mediaList.proof.badge}
+            labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.proof.list }}
+            actions={{
+              mode: "two",
+              cta: ui.marketing.mediaList.proof.cta,
+              href: "#/start",
+              secondary: ui.marketing.mediaList.proof.secondary,
+              secondaryHref: "#/more",
+            }}
+            extras={MEDIALIST_EXTRAS}
+            layout="proof"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.proofReview))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="medialist-stepsRows-label"
+        data-testid="variant"
+        data-block="medialist"
+        data-variant="stepsRows"
+      >
+        <Title as={2} size="base" weight="bold" id="medialist-stepsRows-label" data-testid="variant-label">
+          {ui.blocks.variants.medialist.stepsRows}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MediaList
+            id="medialist-stepsRows"
+            title={ui.marketing.mediaList.steps.title}
+            lead={ui.marketing.mediaList.steps.lead}
+            badge={ui.marketing.mediaList.steps.badge}
+            labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.steps.list }}
+            actions={{ mode: "one", cta: ui.marketing.mediaList.steps.cta, href: "#/start" }}
+            extras={MEDIALIST_EXTRAS}
+            layout="steps"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.stepsRows))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="medialist-latestPosts-label"
+        data-testid="variant"
+        data-block="medialist"
+        data-variant="latestPosts"
+      >
+        <Title as={2} size="base" weight="bold" id="medialist-latestPosts-label" data-testid="variant-label">
+          {ui.blocks.variants.medialist.latestPosts}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MediaList
+            id="medialist-latestPosts"
+            title={ui.marketing.mediaList.posts.title}
+            lead={ui.marketing.mediaList.posts.lead}
+            badge={ui.marketing.mediaList.posts.badge}
+            labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.posts.list }}
+            actions={{ mode: "one", cta: ui.marketing.mediaList.posts.cta, href: "#/start" }}
+            extras={MEDIALIST_EXTRAS}
+            layout="posts"
+            mediaSide="end"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.latestPosts))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="medialist-topicRows-label"
+        data-testid="variant"
+        data-block="medialist"
+        data-variant="topicRows"
+      >
+        <Title as={2} size="base" weight="bold" id="medialist-topicRows-label" data-testid="variant-label">
+          {ui.blocks.variants.medialist.topicRows}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MediaList
+            id="medialist-topicRows"
+            title={ui.marketing.mediaList.topics.title}
+            lead={ui.marketing.mediaList.topics.lead}
+            badge={ui.marketing.mediaList.topics.badge}
+            labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.topics.list }}
+            actions={{ mode: "one", cta: ui.marketing.mediaList.topics.cta, href: "#/start" }}
+            extras={MEDIALIST_EXTRAS}
+            layout="topics"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="medialist-contactStart-label"
+        data-testid="variant"
+        data-block="medialist"
+        data-variant="contactStart"
+      >
+        <Title as={2} size="base" weight="bold" id="medialist-contactStart-label" data-testid="variant-label">
+          {ui.blocks.variants.medialist.contactStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MediaList
+            id="medialist-contactStart"
+            title={ui.marketing.mediaList.contact.title}
+            lead={ui.marketing.mediaList.contact.lead}
+            badge={ui.marketing.mediaList.contact.badge}
+            labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.contact.list }}
+            actions={{ mode: "one", cta: ui.marketing.mediaList.contact.cta, href: "#/start" }}
+            extras={MEDIALIST_EXTRAS}
+            layout="contact"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.contactStart))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/MegamenuPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/MegamenuPage.svelte
new file mode 100644
index 0000000..faf246d
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/MegamenuPage.svelte
@@ -0,0 +1,166 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The megamenu page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    MegaMenu,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type MegaGroup,
+    type NavLink,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.megamenu}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.megamenu}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="megamenu-open-label"
+        data-testid="variant"
+        data-block="megamenu"
+        data-variant="open"
+      >
+        <Title as={2} size="base" weight="bold" id="megamenu-open-label" data-testid="variant-label">
+          {ui.blocks.variants.megamenu.open}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MegaMenu
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            trigger={ui.vibe.mega.trigger}
+            links={navlinks}
+            groups={megagroups}
+            promoTitle={ui.vibe.mega.promoTitle}
+            promoText={ui.vibe.mega.promoText}
+            panel="open"
+            cols="3"
+            promo="none"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="megamenu-closed-label"
+        data-testid="variant"
+        data-block="megamenu"
+        data-variant="closed"
+      >
+        <Title as={2} size="base" weight="bold" id="megamenu-closed-label" data-testid="variant-label">
+          {ui.blocks.variants.megamenu.closed}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MegaMenu
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            trigger={ui.vibe.mega.trigger}
+            links={navlinks}
+            groups={megagroups}
+            promoTitle={ui.vibe.mega.promoTitle}
+            promoText={ui.vibe.mega.promoText}
+            panel="closed"
+            cols="3"
+            promo="none"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.closed))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="megamenu-twoCols-label"
+        data-testid="variant"
+        data-block="megamenu"
+        data-variant="twoCols"
+      >
+        <Title as={2} size="base" weight="bold" id="megamenu-twoCols-label" data-testid="variant-label">
+          {ui.blocks.variants.megamenu.twoCols}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MegaMenu
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            trigger={ui.vibe.mega.trigger}
+            links={navlinks}
+            groups={megagroups}
+            promoTitle={ui.vibe.mega.promoTitle}
+            promoText={ui.vibe.mega.promoText}
+            panel="open"
+            cols="2"
+            promo="none"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="megamenu-promo-label"
+        data-testid="variant"
+        data-block="megamenu"
+        data-variant="promo"
+      >
+        <Title as={2} size="base" weight="bold" id="megamenu-promo-label" data-testid="variant-label">
+          {ui.blocks.variants.megamenu.promo}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MegaMenu
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            trigger={ui.vibe.mega.trigger}
+            links={navlinks}
+            groups={megagroups}
+            promoTitle={ui.vibe.mega.promoTitle}
+            promoText={ui.vibe.mega.promoText}
+            panel="open"
+            cols="3"
+            promo="card"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.promo))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/MetricsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/MetricsPage.svelte
new file mode 100644
index 0000000..d95e884
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/MetricsPage.svelte
@@ -0,0 +1,160 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The metrics page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    MetricRow,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+  const METRICS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+
+  const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.metrics}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.metrics}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="metrics-tiles-label"
+        data-testid="variant"
+        data-block="metrics"
+        data-variant="tiles"
+      >
+        <Title as={2} size="base" weight="bold" id="metrics-tiles-label" data-testid="variant-label">
+          {ui.blocks.variants.metrics.tiles}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MetricRow
+            id="metrics-tiles"
+            title={ui.dashboard.metrics.title}
+            metrics={metrics}
+            empty={ui.empty.metrics}
+            cols="4"
+            item="tile"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="metrics-twoUp-label"
+        data-testid="variant"
+        data-block="metrics"
+        data-variant="twoUp"
+      >
+        <Title as={2} size="base" weight="bold" id="metrics-twoUp-label" data-testid="variant-label">
+          {ui.blocks.variants.metrics.twoUp}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MetricRow
+            id="metrics-twoUp"
+            title={ui.dashboard.metrics.title}
+            metrics={metrics}
+            empty={ui.empty.metrics}
+            cols="2"
+            item="tile"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.twoUp))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="metrics-compact-label"
+        data-testid="variant"
+        data-block="metrics"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="metrics-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.metrics.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MetricRow
+            id="metrics-compact"
+            title={ui.dashboard.metrics.title}
+            metrics={metrics}
+            empty={ui.empty.metrics}
+            cols="4"
+            item="compact"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="metrics-muted-label"
+        data-testid="variant"
+        data-block="metrics"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="metrics-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.metrics.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MetricRow
+            id="metrics-muted"
+            title={ui.dashboard.metrics.title}
+            metrics={metrics}
+            empty={ui.empty.metrics}
+            cols="2"
+            item="compact"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/NavbarPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/NavbarPage.svelte
new file mode 100644
index 0000000..b404deb
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/NavbarPage.svelte
@@ -0,0 +1,222 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The navbar page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    NavBar,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type NavLink,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const actions = { toggleTheme };
+
+  const NAVBAR_ACTIONS = { cta: ui.site.header.cta, href: "#/", login: ui.site.header.login, loginHref: "#/login" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.navbar}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.navbar}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="navbar-inline-label"
+        data-testid="variant"
+        data-block="navbar"
+        data-variant="inline"
+      >
+        <Title as={2} size="base" weight="bold" id="navbar-inline-label" data-testid="variant-label">
+          {ui.blocks.variants.navbar.inline}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NavBar
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            links={navlinks}
+            current="link-product"
+            actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            layout="inline"
+            over="none"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inline))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="navbar-split-label"
+        data-testid="variant"
+        data-block="navbar"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="navbar-split-label" data-testid="variant-label">
+          {ui.blocks.variants.navbar.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NavBar
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            links={navlinks}
+            current="link-product"
+            actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            layout="split"
+            over="none"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="navbar-search-label"
+        data-testid="variant"
+        data-block="navbar"
+        data-variant="search"
+      >
+        <Title as={2} size="base" weight="bold" id="navbar-search-label" data-testid="variant-label">
+          {ui.blocks.variants.navbar.search}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NavBar
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            links={navlinks}
+            current="link-product"
+            actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            layout="search"
+            over="none"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="navbar-media-label"
+        data-testid="variant"
+        data-block="navbar"
+        data-variant="media"
+      >
+        <Title as={2} size="base" weight="bold" id="navbar-media-label" data-testid="variant-label">
+          {ui.blocks.variants.navbar.media}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NavBar
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            links={navlinks}
+            current="link-product"
+            actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            layout="inline"
+            over="media"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="navbar-plain-label"
+        data-testid="variant"
+        data-block="navbar"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="navbar-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.navbar.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NavBar
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            links={navlinks}
+            current="link-product"
+            actions={{ ...NAVBAR_ACTIONS, mode: "none" }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            layout="inline"
+            over="none"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.plain))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="navbar-inverse-label"
+        data-testid="variant"
+        data-block="navbar"
+        data-variant="inverse"
+      >
+        <Title as={2} size="base" weight="bold" id="navbar-inverse-label" data-testid="variant-label">
+          {ui.blocks.variants.navbar.inverse}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NavBar
+            label={ui.vibe.nav.label}
+            brand={ui.site.header.brand}
+            links={navlinks}
+            current="link-product"
+            actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            layout="inline"
+            over="none"
+            tone="inverse"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inverse))}
+            ontheme={() => actions.toggleTheme()}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/NewsletterPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/NewsletterPage.svelte
new file mode 100644
index 0000000..4cff842
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/NewsletterPage.svelte
@@ -0,0 +1,183 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The newsletter page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    NewsletterForm,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+          {ui.blocks.themes.promo.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.newsletter}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.newsletter}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="newsletter-inline-label"
+        data-testid="variant"
+        data-block="newsletter"
+        data-variant="inline"
+      >
+        <Title as={2} size="base" weight="bold" id="newsletter-inline-label" data-testid="variant-label">
+          {ui.blocks.variants.newsletter.inline}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NewsletterForm
+            id="newsletter-inline"
+            title={ui.promo.newsletter.title}
+            text={ui.promo.newsletter.text}
+            label={ui.promo.newsletter.label}
+            submit={ui.promo.newsletter.submit}
+            consent={ui.promo.newsletter.consent}
+            layout="inline"
+            terms="hide"
+            tone="default"
+            align="center"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="newsletter-stacked-label"
+        data-testid="variant"
+        data-block="newsletter"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="newsletter-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.newsletter.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NewsletterForm
+            id="newsletter-stacked"
+            title={ui.promo.newsletter.title}
+            text={ui.promo.newsletter.text}
+            label={ui.promo.newsletter.label}
+            submit={ui.promo.newsletter.submit}
+            consent={ui.promo.newsletter.consent}
+            layout="stacked"
+            terms="hide"
+            tone="default"
+            align="center"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="newsletter-split-label"
+        data-testid="variant"
+        data-block="newsletter"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="newsletter-split-label" data-testid="variant-label">
+          {ui.blocks.variants.newsletter.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NewsletterForm
+            id="newsletter-split"
+            title={ui.promo.newsletter.title}
+            text={ui.promo.newsletter.text}
+            label={ui.promo.newsletter.label}
+            submit={ui.promo.newsletter.submit}
+            consent={ui.promo.newsletter.consent}
+            layout="split"
+            terms="hide"
+            tone="default"
+            align="start"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="newsletter-consent-label"
+        data-testid="variant"
+        data-block="newsletter"
+        data-variant="consent"
+      >
+        <Title as={2} size="base" weight="bold" id="newsletter-consent-label" data-testid="variant-label">
+          {ui.blocks.variants.newsletter.consent}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NewsletterForm
+            id="newsletter-consent"
+            title={ui.promo.newsletter.title}
+            text={ui.promo.newsletter.text}
+            label={ui.promo.newsletter.label}
+            submit={ui.promo.newsletter.submit}
+            consent={ui.promo.newsletter.consent}
+            layout="inline"
+            terms="show"
+            tone="default"
+            align="center"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="newsletter-muted-label"
+        data-testid="variant"
+        data-block="newsletter"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="newsletter-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.newsletter.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <NewsletterForm
+            id="newsletter-muted"
+            title={ui.promo.newsletter.title}
+            text={ui.promo.newsletter.text}
+            label={ui.promo.newsletter.label}
+            submit={ui.promo.newsletter.submit}
+            consent={ui.promo.newsletter.consent}
+            layout="inline"
+            terms="show"
+            tone="muted"
+            align="start"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/NotfoundPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/NotfoundPage.svelte
new file mode 100644
index 0000000..bb77f4c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/NotfoundPage.svelte
@@ -0,0 +1,23 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The notfound page of BlocksScreen. -->
+<script lang="ts">
+  import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="4" align="stretch">
+      <Title as={1} size="4xl" weight="bold" id="page-title">
+        {ui.site.notFound.title}
+      </Title>
+      <Group>
+        <Button variant="default" size="default" href="#/">
+          {ui.blocks.back}
+        </Button>
+      </Group>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/OrdersPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/OrdersPage.svelte
new file mode 100644
index 0000000..82be424
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/OrdersPage.svelte
@@ -0,0 +1,170 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The orders page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    OrderTable,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Order,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+  const ORDERS_FIELDS = {
+    "id": "id",
+    "number": "title",
+    "date": "metadata.date.value|date",
+    "total": "metadata.total.value",
+    "currency": "metadata.currency.value",
+    "status": "metadata.order_status.value",
+    "items": "metadata.items.value",
+  } as const;
+
+  const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.orders}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.orders}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="orders-table-label"
+        data-testid="variant"
+        data-block="orders"
+        data-variant="table"
+      >
+        <Title as={2} size="base" weight="bold" id="orders-table-label" data-testid="variant-label">
+          {ui.blocks.variants.orders.table}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <OrderTable
+            id="orders-table"
+            title={ui.commerce.orders.title}
+            orders={orders}
+            empty={ui.empty.orders}
+            statuses={ui.status}
+            labels={ui.commerce.orders}
+            layout="table"
+            pager="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="orders-cards-label"
+        data-testid="variant"
+        data-block="orders"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="orders-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.orders.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <OrderTable
+            id="orders-cards"
+            title={ui.commerce.orders.title}
+            orders={orders}
+            empty={ui.empty.orders}
+            statuses={ui.status}
+            labels={ui.commerce.orders}
+            layout="cards"
+            pager="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="orders-noPager-label"
+        data-testid="variant"
+        data-block="orders"
+        data-variant="noPager"
+      >
+        <Title as={2} size="base" weight="bold" id="orders-noPager-label" data-testid="variant-label">
+          {ui.blocks.variants.orders.noPager}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <OrderTable
+            id="orders-noPager"
+            title={ui.commerce.orders.title}
+            orders={orders}
+            empty={ui.empty.orders}
+            statuses={ui.status}
+            labels={ui.commerce.orders}
+            layout="table"
+            pager="hide"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.noPager))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="orders-compactMuted-label"
+        data-testid="variant"
+        data-block="orders"
+        data-variant="compactMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="orders-compactMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.orders.compactMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <OrderTable
+            id="orders-compactMuted"
+            title={ui.commerce.orders.title}
+            orders={orders}
+            empty={ui.empty.orders}
+            statuses={ui.status}
+            labels={ui.commerce.orders}
+            layout="table"
+            pager="hide"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.compactMuted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/OverviewPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/OverviewPage.svelte
new file mode 100644
index 0000000..c75610a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/OverviewPage.svelte
@@ -0,0 +1,181 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The overview page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    DashboardOverview,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Event,
+    type Point,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+  import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+  import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+  const ACTIVITY_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "time": "metadata.time.value|ago",
+    "tone": "metadata.tone.value",
+  } as const;
+  const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const METRICS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+
+  const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+  const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+  const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+  const OVERVIEW_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+  const OVERVIEW_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.overview}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.overview}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="overview-split-label"
+        data-testid="variant"
+        data-block="overview"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="overview-split-label" data-testid="variant-label">
+          {ui.blocks.variants.overview.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardOverview
+            id="overview-split"
+            title={ui.vibe.overview.title}
+            metrics={metrics}
+            chart={OVERVIEW_CHART}
+            activity={OVERVIEW_ACTIVITY}
+            layout="split"
+            cols="4"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="overview-stacked-label"
+        data-testid="variant"
+        data-block="overview"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="overview-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.overview.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardOverview
+            id="overview-stacked"
+            title={ui.vibe.overview.title}
+            metrics={metrics}
+            chart={OVERVIEW_CHART}
+            activity={OVERVIEW_ACTIVITY}
+            layout="stacked"
+            cols="4"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="overview-twoCols-label"
+        data-testid="variant"
+        data-block="overview"
+        data-variant="twoCols"
+      >
+        <Title as={2} size="base" weight="bold" id="overview-twoCols-label" data-testid="variant-label">
+          {ui.blocks.variants.overview.twoCols}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardOverview
+            id="overview-twoCols"
+            title={ui.vibe.overview.title}
+            metrics={metrics}
+            chart={OVERVIEW_CHART}
+            activity={OVERVIEW_ACTIVITY}
+            layout="split"
+            cols="2"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.twoCols))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="overview-muted-label"
+        data-testid="variant"
+        data-block="overview"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="overview-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.overview.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <DashboardOverview
+            id="overview-muted"
+            title={ui.vibe.overview.title}
+            metrics={metrics}
+            chart={OVERVIEW_CHART}
+            activity={OVERVIEW_ACTIVITY}
+            layout="split"
+            cols="4"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/PageheadPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/PageheadPage.svelte
new file mode 100644
index 0000000..b96704b
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/PageheadPage.svelte
@@ -0,0 +1,124 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The pagehead page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PageIntro,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.pagehead}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.pagehead}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pagehead-start-label"
+        data-testid="variant"
+        data-block="pagehead"
+        data-variant="start"
+      >
+        <Title as={2} size="base" weight="bold" id="pagehead-start-label" data-testid="variant-label">
+          {ui.blocks.variants.pagehead.start}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PageIntro
+            id="pagehead-start"
+            title={ui.vibe.pagehead.title}
+            text={ui.vibe.pagehead.text}
+            cta={ui.vibe.pagehead.cta}
+            href="#/"
+            align="start"
+            tone="default"
+            density="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.start))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pagehead-center-label"
+        data-testid="variant"
+        data-block="pagehead"
+        data-variant="center"
+      >
+        <Title as={2} size="base" weight="bold" id="pagehead-center-label" data-testid="variant-label">
+          {ui.blocks.variants.pagehead.center}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PageIntro
+            id="pagehead-center"
+            title={ui.vibe.pagehead.title}
+            text={ui.vibe.pagehead.text}
+            cta={ui.vibe.pagehead.cta}
+            href="#/"
+            align="center"
+            tone="default"
+            density="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.center))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pagehead-muted-label"
+        data-testid="variant"
+        data-block="pagehead"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="pagehead-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.pagehead.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PageIntro
+            id="pagehead-muted"
+            title={ui.vibe.pagehead.title}
+            text={ui.vibe.pagehead.text}
+            cta={ui.vibe.pagehead.cta}
+            href="#/"
+            align="start"
+            tone="muted"
+            density="compact"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/PagetrailPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/PagetrailPage.svelte
new file mode 100644
index 0000000..0ef60b1
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/PagetrailPage.svelte
@@ -0,0 +1,180 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The pagetrail page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PageTrail,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type NavLink,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+
+  const PAGETRAIL_EXTRAS = {
+    value: ui.marketing.pageTrail.value,
+    caption: ui.marketing.pageTrail.caption,
+    note: ui.marketing.pageTrail.note,
+    icon: "package",
+    facts: stats,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.pagetrail}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.pagetrail}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pagetrail-crumbs-label"
+        data-testid="variant"
+        data-block="pagetrail"
+        data-variant="crumbs"
+      >
+        <Title as={2} size="base" weight="bold" id="pagetrail-crumbs-label" data-testid="variant-label">
+          {ui.blocks.variants.pagetrail.crumbs}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PageTrail
+            id="pagetrail-crumbs"
+            title={ui.marketing.pageTrail.title}
+            lead={ui.marketing.pageTrail.lead}
+            badge={ui.marketing.pageTrail.badge}
+            label={ui.marketing.pageTrail.label}
+            crumbs={crumbs}
+            extras={PAGETRAIL_EXTRAS}
+            aside="none"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbs))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pagetrail-crumbsFigure-label"
+        data-testid="variant"
+        data-block="pagetrail"
+        data-variant="crumbsFigure"
+      >
+        <Title as={2} size="base" weight="bold" id="pagetrail-crumbsFigure-label" data-testid="variant-label">
+          {ui.blocks.variants.pagetrail.crumbsFigure}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PageTrail
+            id="pagetrail-crumbsFigure"
+            title={ui.marketing.pageTrail.title}
+            lead={ui.marketing.pageTrail.lead}
+            badge={ui.marketing.pageTrail.badge}
+            label={ui.marketing.pageTrail.label}
+            crumbs={crumbs}
+            extras={PAGETRAIL_EXTRAS}
+            aside="figure"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsFigure))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pagetrail-crumbsNote-label"
+        data-testid="variant"
+        data-block="pagetrail"
+        data-variant="crumbsNote"
+      >
+        <Title as={2} size="base" weight="bold" id="pagetrail-crumbsNote-label" data-testid="variant-label">
+          {ui.blocks.variants.pagetrail.crumbsNote}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PageTrail
+            id="pagetrail-crumbsNote"
+            title={ui.marketing.pageTrail.title}
+            lead={ui.marketing.pageTrail.lead}
+            badge={ui.marketing.pageTrail.badge}
+            label={ui.marketing.pageTrail.label}
+            crumbs={crumbs}
+            extras={PAGETRAIL_EXTRAS}
+            aside="note"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsNote))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pagetrail-keyFacts-label"
+        data-testid="variant"
+        data-block="pagetrail"
+        data-variant="keyFacts"
+      >
+        <Title as={2} size="base" weight="bold" id="pagetrail-keyFacts-label" data-testid="variant-label">
+          {ui.blocks.variants.pagetrail.keyFacts}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PageTrail
+            id="pagetrail-keyFacts"
+            title={ui.marketing.pageTrail.title}
+            lead={ui.marketing.pageTrail.lead}
+            badge={ui.marketing.pageTrail.badge}
+            label={ui.marketing.pageTrail.label}
+            crumbs={crumbs}
+            extras={PAGETRAIL_EXTRAS}
+            aside="facts"
+            tone="muted"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.keyFacts))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/PhotosPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/PhotosPage.svelte
new file mode 100644
index 0000000..18faea3
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/PhotosPage.svelte
@@ -0,0 +1,218 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The photos page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PhotoGallery,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Photo,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+
+  const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+
+  const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.photos}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.photos}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="photos-grid-label"
+        data-testid="variant"
+        data-block="photos"
+        data-variant="grid"
+      >
+        <Title as={2} size="base" weight="bold" id="photos-grid-label" data-testid="variant-label">
+          {ui.blocks.variants.photos.grid}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PhotoGallery
+            id="photos-grid"
+            title={ui.company.photos.title}
+            lead={ui.company.photos.lead}
+            photos={photos}
+            empty={ui.empty.photos}
+            labels={ui.company.photos}
+            layout="grid"
+            captions="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.grid))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="photos-gridPlain-label"
+        data-testid="variant"
+        data-block="photos"
+        data-variant="gridPlain"
+      >
+        <Title as={2} size="base" weight="bold" id="photos-gridPlain-label" data-testid="variant-label">
+          {ui.blocks.variants.photos.gridPlain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PhotoGallery
+            id="photos-gridPlain"
+            title={ui.company.photos.title}
+            lead={ui.company.photos.lead}
+            photos={photos}
+            empty={ui.empty.photos}
+            labels={ui.company.photos}
+            layout="grid"
+            captions="hide"
+            tone="muted"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.gridPlain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="photos-masonry-label"
+        data-testid="variant"
+        data-block="photos"
+        data-variant="masonry"
+      >
+        <Title as={2} size="base" weight="bold" id="photos-masonry-label" data-testid="variant-label">
+          {ui.blocks.variants.photos.masonry}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PhotoGallery
+            id="photos-masonry"
+            title={ui.company.photos.title}
+            lead={ui.company.photos.lead}
+            photos={photos}
+            empty={ui.empty.photos}
+            labels={ui.company.photos}
+            layout="masonry"
+            captions="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="photos-mosaic-label"
+        data-testid="variant"
+        data-block="photos"
+        data-variant="mosaic"
+      >
+        <Title as={2} size="base" weight="bold" id="photos-mosaic-label" data-testid="variant-label">
+          {ui.blocks.variants.photos.mosaic}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PhotoGallery
+            id="photos-mosaic"
+            title={ui.company.photos.title}
+            lead={ui.company.photos.lead}
+            photos={photos}
+            empty={ui.empty.photos}
+            labels={ui.company.photos}
+            layout="mosaic"
+            captions="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.mosaic))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="photos-featured-label"
+        data-testid="variant"
+        data-block="photos"
+        data-variant="featured"
+      >
+        <Title as={2} size="base" weight="bold" id="photos-featured-label" data-testid="variant-label">
+          {ui.blocks.variants.photos.featured}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PhotoGallery
+            id="photos-featured"
+            title={ui.company.photos.title}
+            lead={ui.company.photos.lead}
+            photos={photos}
+            empty={ui.empty.photos}
+            labels={ui.company.photos}
+            layout="featured"
+            captions="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.featured))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="photos-cards-label"
+        data-testid="variant"
+        data-block="photos"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="photos-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.photos.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PhotoGallery
+            id="photos-cards"
+            title={ui.company.photos.title}
+            lead={ui.company.photos.lead}
+            photos={photos}
+            empty={ui.empty.photos}
+            labels={ui.company.photos}
+            layout="cards"
+            captions="show"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.cards))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/PlanPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/PlanPage.svelte
new file mode 100644
index 0000000..d1f8f23
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/PlanPage.svelte
@@ -0,0 +1,128 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The plan page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PricingCard,
+    Stack,
+    Text,
+    Title,
+    type Plan,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.plan}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.plan}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="plan-standard-label"
+        data-testid="variant"
+        data-block="plan"
+        data-variant="standard"
+      >
+        <Title as={2} size="base" weight="bold" id="plan-standard-label" data-testid="variant-label">
+          {ui.blocks.variants.plan.standard}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <PricingCard
+              plan={tiers.find((i) => i.id === "tier-team")!}
+              labels={ui.pricing}
+              emphasis="auto"
+              density="default"
+            />
+          </Box>
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="plan-flat-label"
+        data-testid="variant"
+        data-block="plan"
+        data-variant="flat"
+      >
+        <Title as={2} size="base" weight="bold" id="plan-flat-label" data-testid="variant-label">
+          {ui.blocks.variants.plan.flat}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <PricingCard
+              plan={tiers.find((i) => i.id === "tier-team")!}
+              labels={ui.pricing}
+              emphasis="off"
+              density="default"
+            />
+          </Box>
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="plan-compact-label"
+        data-testid="variant"
+        data-block="plan"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="plan-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.plan.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+            <PricingCard
+              plan={tiers.find((i) => i.id === "tier-team")!}
+              labels={ui.pricing}
+              emphasis="auto"
+              density="compact"
+            />
+          </Box>
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/PostheaderPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/PostheaderPage.svelte
new file mode 100644
index 0000000..74cd0c7
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/PostheaderPage.svelte
@@ -0,0 +1,165 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The postheader page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PostHeader,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Post,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+          {ui.blocks.themes.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.postheader}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.postheader}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postheader-start-label"
+        data-testid="variant"
+        data-block="postheader"
+        data-variant="start"
+      >
+        <Title as={2} size="base" weight="bold" id="postheader-start-label" data-testid="variant-label">
+          {ui.blocks.variants.postheader.start}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostHeader
+            id="postheader-start"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.labels}
+            layout="start"
+            cover="show"
+            meta="full"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.start))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postheader-center-label"
+        data-testid="variant"
+        data-block="postheader"
+        data-variant="center"
+      >
+        <Title as={2} size="base" weight="bold" id="postheader-center-label" data-testid="variant-label">
+          {ui.blocks.variants.postheader.center}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostHeader
+            id="postheader-center"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.labels}
+            layout="center"
+            cover="show"
+            meta="full"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.center))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postheader-noCover-label"
+        data-testid="variant"
+        data-block="postheader"
+        data-variant="noCover"
+      >
+        <Title as={2} size="base" weight="bold" id="postheader-noCover-label" data-testid="variant-label">
+          {ui.blocks.variants.postheader.noCover}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostHeader
+            id="postheader-noCover"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.labels}
+            layout="start"
+            cover="hide"
+            meta="full"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.noCover))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postheader-minimal-label"
+        data-testid="variant"
+        data-block="postheader"
+        data-variant="minimal"
+      >
+        <Title as={2} size="base" weight="bold" id="postheader-minimal-label" data-testid="variant-label">
+          {ui.blocks.variants.postheader.minimal}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostHeader
+            id="postheader-minimal"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.labels}
+            layout="center"
+            cover="hide"
+            meta="short"
+            tone="muted"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.minimal))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/PostsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/PostsPage.svelte
new file mode 100644
index 0000000..32e52a0
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/PostsPage.svelte
@@ -0,0 +1,337 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The posts page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PostGrid,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Post,
+    type PostTopic,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+  const POSTS_FILTER = { topics, label: ui.vibe.posts.topics, topic: "" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+          {ui.blocks.themes.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.posts}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.posts}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="posts-grid-label"
+        data-testid="variant"
+        data-block="posts"
+        data-variant="grid"
+      >
+        <Title as={2} size="base" weight="bold" id="posts-grid-label" data-testid="variant-label">
+          {ui.blocks.variants.posts.grid}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostGrid
+            id="posts-grid"
+            title={ui.content.posts.title}
+            posts={posts}
+            labels={ui.content.labels}
+            filter={{ ...POSTS_FILTER, mode: "none" }}
+            action={{ label: ui.content.posts.action, href: "#/" }}
+            layout="grid"
+            cols="1-3"
+            media="image"
+            meta="full"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="posts-filters-label"
+        data-testid="variant"
+        data-block="posts"
+        data-variant="filters"
+      >
+        <Title as={2} size="base" weight="bold" id="posts-filters-label" data-testid="variant-label">
+          {ui.blocks.variants.posts.filters}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostGrid
+            id="posts-filters"
+            title={ui.content.posts.title}
+            posts={posts}
+            labels={ui.content.labels}
+            filter={{ ...POSTS_FILTER, topic: "Design", mode: "topics" }}
+            action={{ label: ui.content.posts.action, href: "#/" }}
+            layout="grid"
+            cols="1-3"
+            media="image"
+            meta="full"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="posts-twoUp-label"
+        data-testid="variant"
+        data-block="posts"
+        data-variant="twoUp"
+      >
+        <Title as={2} size="base" weight="bold" id="posts-twoUp-label" data-testid="variant-label">
+          {ui.blocks.variants.posts.twoUp}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostGrid
+            id="posts-twoUp"
+            title={ui.content.posts.title}
+            posts={posts}
+            labels={ui.content.labels}
+            filter={{ ...POSTS_FILTER, mode: "none" }}
+            action={{ label: ui.content.posts.action, href: "#/" }}
+            layout="grid"
+            cols="1-2"
+            media="image"
+            meta="full"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="posts-row4-label"
+        data-testid="variant"
+        data-block="posts"
+        data-variant="row4"
+      >
+        <Title as={2} size="base" weight="bold" id="posts-row4-label" data-testid="variant-label">
+          {ui.blocks.variants.posts.row4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostGrid
+            id="posts-row4"
+            title={ui.content.posts.title}
+            posts={posts}
+            labels={ui.content.labels}
+            filter={{ ...POSTS_FILTER, mode: "none" }}
+            action={{ label: ui.content.posts.action, href: "#/" }}
+            layout="grid"
+            cols="1-4"
+            media="image"
+            meta="full"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.row4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="posts-news4-label"
+        data-testid="variant"
+        data-block="posts"
+        data-variant="news4"
+      >
+        <Title as={2} size="base" weight="bold" id="posts-news4-label" data-testid="variant-label">
+          {ui.blocks.variants.posts.news4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostGrid
+            id="posts-news4"
+            title={ui.content.posts.title}
+            posts={posts}
+            labels={ui.content.labels}
+            filter={{ ...POSTS_FILTER, mode: "none" }}
+            action={{ label: ui.content.posts.action, href: "#/" }}
+            layout="grid"
+            cols="1-4"
+            media="image"
+            meta="news"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.news4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="posts-list-label"
+        data-testid="variant"
+        data-block="posts"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="posts-list-label" data-testid="variant-label">
+          {ui.blocks.variants.posts.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostGrid
+            id="posts-list"
+            title={ui.content.posts.title}
+            posts={posts}
+            labels={ui.content.labels}
+            filter={{ ...POSTS_FILTER, mode: "none" }}
+            action={{ label: ui.content.posts.action, href: "#/" }}
+            layout="list"
+            cols="1-3"
+            media="image"
+            meta="full"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="posts-magazine-label"
+        data-testid="variant"
+        data-block="posts"
+        data-variant="magazine"
+      >
+        <Title as={2} size="base" weight="bold" id="posts-magazine-label" data-testid="variant-label">
+          {ui.blocks.variants.posts.magazine}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostGrid
+            id="posts-magazine"
+            title={ui.content.posts.title}
+            posts={posts}
+            labels={ui.content.labels}
+            filter={{ ...POSTS_FILTER, mode: "none" }}
+            action={{ label: ui.content.posts.action, href: "#/" }}
+            layout="magazine"
+            cols="1-3"
+            media="image"
+            meta="full"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="posts-textOnly-label"
+        data-testid="variant"
+        data-block="posts"
+        data-variant="textOnly"
+      >
+        <Title as={2} size="base" weight="bold" id="posts-textOnly-label" data-testid="variant-label">
+          {ui.blocks.variants.posts.textOnly}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostGrid
+            id="posts-textOnly"
+            title={ui.content.posts.title}
+            posts={posts}
+            labels={ui.content.labels}
+            filter={{ ...POSTS_FILTER, mode: "none" }}
+            action={{ label: ui.content.posts.action, href: "#/" }}
+            layout="grid"
+            cols="1-3"
+            media="none"
+            meta="full"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="posts-digest-label"
+        data-testid="variant"
+        data-block="posts"
+        data-variant="digest"
+      >
+        <Title as={2} size="base" weight="bold" id="posts-digest-label" data-testid="variant-label">
+          {ui.blocks.variants.posts.digest}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostGrid
+            id="posts-digest"
+            title={ui.content.posts.title}
+            posts={posts}
+            labels={ui.content.labels}
+            filter={{ ...POSTS_FILTER, mode: "none" }}
+            action={{ label: ui.content.posts.action, href: "#/" }}
+            layout="grid"
+            cols="1-3"
+            media="none"
+            meta="short"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/PostshowcasePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/PostshowcasePage.svelte
new file mode 100644
index 0000000..180f384
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/PostshowcasePage.svelte
@@ -0,0 +1,181 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The postshowcase page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PostShowcase,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Post,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+          {ui.blocks.themes.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.postshowcase}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.postshowcase}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postshowcase-introCards-label"
+        data-testid="variant"
+        data-block="postshowcase"
+        data-variant="introCards"
+      >
+        <Title as={2} size="base" weight="bold" id="postshowcase-introCards-label" data-testid="variant-label">
+          {ui.blocks.variants.postshowcase.introCards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostShowcase
+            id="postshowcase-introCards"
+            title={ui.content.postShowcase.title}
+            lead={ui.content.postShowcase.lead}
+            badge={ui.content.postShowcase.badge}
+            posts={posts}
+            empty={ui.empty.posts}
+            labels={ui.content.labels}
+            action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+            layout="intro"
+            cols="3"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postshowcase-featuredEnd-label"
+        data-testid="variant"
+        data-block="postshowcase"
+        data-variant="featuredEnd"
+      >
+        <Title as={2} size="base" weight="bold" id="postshowcase-featuredEnd-label" data-testid="variant-label">
+          {ui.blocks.variants.postshowcase.featuredEnd}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostShowcase
+            id="postshowcase-featuredEnd"
+            title={ui.content.postShowcase.title}
+            lead={ui.content.postShowcase.lead}
+            badge={ui.content.postShowcase.badge}
+            posts={posts}
+            empty={ui.empty.posts}
+            labels={ui.content.labels}
+            action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+            layout="featured"
+            cols="3"
+            mediaSide="end"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.featuredEnd))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postshowcase-overlay3-label"
+        data-testid="variant"
+        data-block="postshowcase"
+        data-variant="overlay3"
+      >
+        <Title as={2} size="base" weight="bold" id="postshowcase-overlay3-label" data-testid="variant-label">
+          {ui.blocks.variants.postshowcase.overlay3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostShowcase
+            id="postshowcase-overlay3"
+            title={ui.content.postShowcase.title}
+            lead={ui.content.postShowcase.lead}
+            badge={ui.content.postShowcase.badge}
+            posts={posts}
+            empty={ui.empty.posts}
+            labels={ui.content.labels}
+            action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+            layout="overlay"
+            cols="3"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postshowcase-overlay2-label"
+        data-testid="variant"
+        data-block="postshowcase"
+        data-variant="overlay2"
+      >
+        <Title as={2} size="base" weight="bold" id="postshowcase-overlay2-label" data-testid="variant-label">
+          {ui.blocks.variants.postshowcase.overlay2}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostShowcase
+            id="postshowcase-overlay2"
+            title={ui.content.postShowcase.title}
+            lead={ui.content.postShowcase.lead}
+            badge={ui.content.postShowcase.badge}
+            posts={posts}
+            empty={ui.empty.posts}
+            labels={ui.content.labels}
+            action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+            layout="overlay"
+            cols="2"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay2))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/PostsplitPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/PostsplitPage.svelte
new file mode 100644
index 0000000..deadcb6
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/PostsplitPage.svelte
@@ -0,0 +1,251 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The postsplit page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PostSplit,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type NavLink,
+    type Post,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+  import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+  const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+  const POSTSPLIT_EXTRAS = {
+    role: ui.content.postSplit.role,
+    bio: ui.content.postSplit.bio,
+    views: ui.content.postSplit.views,
+    likes: ui.content.postSplit.likes,
+    tags: posttags,
+    outline,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+          {ui.blocks.themes.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.postsplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.postsplit}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postsplit-centerShare-label"
+        data-testid="variant"
+        data-block="postsplit"
+        data-variant="centerShare"
+      >
+        <Title as={2} size="base" weight="bold" id="postsplit-centerShare-label" data-testid="variant-label">
+          {ui.blocks.variants.postsplit.centerShare}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostSplit
+            id="postsplit-centerShare"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.postSplit.labels}
+            extras={POSTSPLIT_EXTRAS}
+            layout="center"
+            mediaSide="end"
+            author="line"
+            cover="wide"
+            actions="pair"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.centerShare))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postsplit-splitTags-label"
+        data-testid="variant"
+        data-block="postsplit"
+        data-variant="splitTags"
+      >
+        <Title as={2} size="base" weight="bold" id="postsplit-splitTags-label" data-testid="variant-label">
+          {ui.blocks.variants.postsplit.splitTags}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostSplit
+            id="postsplit-splitTags"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.postSplit.labels}
+            extras={POSTSPLIT_EXTRAS}
+            layout="split"
+            mediaSide="end"
+            author="line"
+            cover="wide"
+            actions="pair"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitTags))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postsplit-splitBioStart-label"
+        data-testid="variant"
+        data-block="postsplit"
+        data-variant="splitBioStart"
+      >
+        <Title as={2} size="base" weight="bold" id="postsplit-splitBioStart-label" data-testid="variant-label">
+          {ui.blocks.variants.postsplit.splitBioStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostSplit
+            id="postsplit-splitBioStart"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.postSplit.labels}
+            extras={POSTSPLIT_EXTRAS}
+            layout="split"
+            mediaSide="start"
+            author="bio"
+            cover="wide"
+            actions="wide"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitBioStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postsplit-splitSquare-label"
+        data-testid="variant"
+        data-block="postsplit"
+        data-variant="splitSquare"
+      >
+        <Title as={2} size="base" weight="bold" id="postsplit-splitSquare-label" data-testid="variant-label">
+          {ui.blocks.variants.postsplit.splitSquare}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostSplit
+            id="postsplit-splitSquare"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.postSplit.labels}
+            extras={POSTSPLIT_EXTRAS}
+            layout="split"
+            mediaSide="end"
+            author="line"
+            cover="square"
+            actions="icons"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitSquare))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postsplit-outlineStart-label"
+        data-testid="variant"
+        data-block="postsplit"
+        data-variant="outlineStart"
+      >
+        <Title as={2} size="base" weight="bold" id="postsplit-outlineStart-label" data-testid="variant-label">
+          {ui.blocks.variants.postsplit.outlineStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostSplit
+            id="postsplit-outlineStart"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.postSplit.labels}
+            extras={POSTSPLIT_EXTRAS}
+            layout="outline"
+            mediaSide="start"
+            author="line"
+            cover="wide"
+            actions="pair"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.outlineStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="postsplit-splitStats-label"
+        data-testid="variant"
+        data-block="postsplit"
+        data-variant="splitStats"
+      >
+        <Title as={2} size="base" weight="bold" id="postsplit-splitStats-label" data-testid="variant-label">
+          {ui.blocks.variants.postsplit.splitStats}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PostSplit
+            id="postsplit-splitStats"
+            post={posts.find((i) => i.id === "post-static-first")!}
+            labels={ui.content.postSplit.labels}
+            extras={POSTSPLIT_EXTRAS}
+            layout="split"
+            mediaSide="end"
+            author="card"
+            cover="wide"
+            actions="pair"
+            tone="muted"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitStats))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/PricingPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/PricingPage.svelte
new file mode 100644
index 0000000..2f63d90
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/PricingPage.svelte
@@ -0,0 +1,365 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The pricing page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PricingTiers,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Plan,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+  import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+  const DUO_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+  const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.pricing}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.pricing}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-grid-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="grid"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-grid-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.grid}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-grid"
+            title={ui.site.pricing.tiersTitle}
+            plans={tiers}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="grid"
+            cols="1-3"
+            emphasis="auto"
+            billing="off"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-monthly-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="monthly"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-monthly-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.monthly}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-monthly"
+            title={ui.site.pricing.tiersTitle}
+            plans={tiers}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="grid"
+            cols="1-3"
+            emphasis="auto"
+            billing="monthly"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-annual-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="annual"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-annual-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.annual}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-annual"
+            title={ui.site.pricing.tiersTitle}
+            plans={tiers}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="grid"
+            cols="1-3"
+            emphasis="auto"
+            billing="annual"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-duo-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="duo"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-duo-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.duo}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-duo"
+            title={ui.site.pricing.tiersTitle}
+            plans={duo}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="grid"
+            cols="1-2"
+            emphasis="off"
+            billing="off"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-grid2-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="grid2"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-grid2-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.grid2}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-grid2"
+            title={ui.site.pricing.tiersTitle}
+            plans={tiers}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="grid"
+            cols="1-2"
+            emphasis="auto"
+            billing="off"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid2))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-grid4-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="grid4"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-grid4-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.grid4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-grid4"
+            title={ui.site.pricing.tiersTitle}
+            plans={tiers}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="grid"
+            cols="1-4"
+            emphasis="auto"
+            billing="off"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-stack-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="stack"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-stack-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.stack}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-stack"
+            title={ui.site.pricing.tiersTitle}
+            plans={tiers}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="stack"
+            cols="1-3"
+            emphasis="auto"
+            billing="off"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-flat-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="flat"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-flat-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.flat}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-flat"
+            title={ui.site.pricing.tiersTitle}
+            plans={tiers}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="grid"
+            cols="1-3"
+            emphasis="off"
+            billing="off"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.flat))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-compactMuted-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="compactMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-compactMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.compactMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-compactMuted"
+            title={ui.site.pricing.tiersTitle}
+            plans={tiers}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="grid"
+            cols="1-3"
+            emphasis="auto"
+            billing="off"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.compactMuted))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="pricing-roomy-label"
+        data-testid="variant"
+        data-block="pricing"
+        data-variant="roomy"
+      >
+        <Title as={2} size="base" weight="bold" id="pricing-roomy-label" data-testid="variant-label">
+          {ui.blocks.variants.pricing.roomy}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <PricingTiers
+            id="pricing-roomy"
+            title={ui.site.pricing.tiersTitle}
+            plans={tiers}
+            labels={ui.pricing}
+            billingLabels={ui.vibe.billing}
+            layout="grid"
+            cols="1-3"
+            emphasis="auto"
+            billing="off"
+            tone="default"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.roomy))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ProductPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ProductPage.svelte
new file mode 100644
index 0000000..ef407b5
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ProductPage.svelte
@@ -0,0 +1,209 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The product page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProductDetail,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Product,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.product}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.product}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="product-split-label"
+        data-testid="variant"
+        data-block="product"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="product-split-label" data-testid="variant-label">
+          {ui.blocks.variants.product.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductDetail
+            id="product-split"
+            product={products.find((i) => i.id === "product-lamp")!}
+            labels={ui.commerce.detail}
+            badges={ui.commerce.badges}
+            layout="split"
+            mediaSide="start"
+            thumbs="below"
+            buy="full"
+            tone="default"
+            density="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="product-splitEnd-label"
+        data-testid="variant"
+        data-block="product"
+        data-variant="splitEnd"
+      >
+        <Title as={2} size="base" weight="bold" id="product-splitEnd-label" data-testid="variant-label">
+          {ui.blocks.variants.product.splitEnd}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductDetail
+            id="product-splitEnd"
+            product={products.find((i) => i.id === "product-lamp")!}
+            labels={ui.commerce.detail}
+            badges={ui.commerce.badges}
+            layout="split"
+            mediaSide="end"
+            thumbs="below"
+            buy="full"
+            tone="default"
+            density="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.splitEnd))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="product-stacked-label"
+        data-testid="variant"
+        data-block="product"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="product-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.product.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductDetail
+            id="product-stacked"
+            product={products.find((i) => i.id === "product-lamp")!}
+            labels={ui.commerce.detail}
+            badges={ui.commerce.badges}
+            layout="stacked"
+            mediaSide="start"
+            thumbs="none"
+            buy="full"
+            tone="default"
+            density="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.stacked))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="product-compact-label"
+        data-testid="variant"
+        data-block="product"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="product-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.product.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductDetail
+            id="product-compact"
+            product={products.find((i) => i.id === "product-lamp")!}
+            labels={ui.commerce.detail}
+            badges={ui.commerce.badges}
+            layout="split"
+            mediaSide="start"
+            thumbs="none"
+            buy="compact"
+            tone="default"
+            density="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.compact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="product-muted-label"
+        data-testid="variant"
+        data-block="product"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="product-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.product.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductDetail
+            id="product-muted"
+            product={products.find((i) => i.id === "product-lamp")!}
+            labels={ui.commerce.detail}
+            badges={ui.commerce.badges}
+            layout="split"
+            mediaSide="start"
+            thumbs="below"
+            buy="full"
+            tone="muted"
+            density="roomy"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ProductinfoPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ProductinfoPage.svelte
new file mode 100644
index 0000000..b658137
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ProductinfoPage.svelte
@@ -0,0 +1,132 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The productinfo page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProductInfo,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Detail,
+    type Spec,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+  import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+  const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+  const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+  const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+  const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.productinfo}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.productinfo}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="productinfo-split-label"
+        data-testid="variant"
+        data-block="productinfo"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="productinfo-split-label" data-testid="variant-label">
+          {ui.blocks.variants.productinfo.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductInfo
+            id="productinfo-split"
+            title={ui.commerce.info.title}
+            details={details}
+            specs={specs}
+            labels={ui.commerce.info}
+            layout="split"
+            expand="first"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="productinfo-stacked-label"
+        data-testid="variant"
+        data-block="productinfo"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="productinfo-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.productinfo.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductInfo
+            id="productinfo-stacked"
+            title={ui.commerce.info.title}
+            details={details}
+            specs={specs}
+            labels={ui.commerce.info}
+            layout="stacked"
+            expand="first"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.stacked))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="productinfo-closed-label"
+        data-testid="variant"
+        data-block="productinfo"
+        data-variant="closed"
+      >
+        <Title as={2} size="base" weight="bold" id="productinfo-closed-label" data-testid="variant-label">
+          {ui.blocks.variants.productinfo.closed}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductInfo
+            id="productinfo-closed"
+            title={ui.commerce.info.title}
+            details={details}
+            specs={specs}
+            labels={ui.commerce.info}
+            layout="split"
+            expand="none"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.closed))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ProductsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ProductsPage.svelte
new file mode 100644
index 0000000..9146165
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ProductsPage.svelte
@@ -0,0 +1,334 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The products page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProductGrid,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Product,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.products}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.products}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="products-grid3-label"
+        data-testid="variant"
+        data-block="products"
+        data-variant="grid3"
+      >
+        <Title as={2} size="base" weight="bold" id="products-grid3-label" data-testid="variant-label">
+          {ui.blocks.variants.products.grid3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductGrid
+            id="products-grid3"
+            title={ui.commerce.products.title}
+            products={products}
+            labels={ui.commerce.productLabels}
+            badges={ui.commerce.badges}
+            layout="grid"
+            cols="1-3"
+            ratio="4/3"
+            rating="show"
+            action="button"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="products-grid4-label"
+        data-testid="variant"
+        data-block="products"
+        data-variant="grid4"
+      >
+        <Title as={2} size="base" weight="bold" id="products-grid4-label" data-testid="variant-label">
+          {ui.blocks.variants.products.grid4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductGrid
+            id="products-grid4"
+            title={ui.commerce.products.title}
+            products={products}
+            labels={ui.commerce.productLabels}
+            badges={ui.commerce.badges}
+            layout="grid"
+            cols="1-4"
+            ratio="1/1"
+            rating="show"
+            action="button"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="products-grid2-label"
+        data-testid="variant"
+        data-block="products"
+        data-variant="grid2"
+      >
+        <Title as={2} size="base" weight="bold" id="products-grid2-label" data-testid="variant-label">
+          {ui.blocks.variants.products.grid2}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductGrid
+            id="products-grid2"
+            title={ui.commerce.products.title}
+            products={products}
+            labels={ui.commerce.productLabels}
+            badges={ui.commerce.badges}
+            layout="grid"
+            cols="1-2"
+            ratio="3/4"
+            rating="show"
+            action="button"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid2))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="products-list-label"
+        data-testid="variant"
+        data-block="products"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="products-list-label" data-testid="variant-label">
+          {ui.blocks.variants.products.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductGrid
+            id="products-list"
+            title={ui.commerce.products.title}
+            products={products}
+            labels={ui.commerce.productLabels}
+            badges={ui.commerce.badges}
+            layout="list"
+            cols="1-3"
+            ratio="4/3"
+            rating="show"
+            action="button"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="products-catalog-label"
+        data-testid="variant"
+        data-block="products"
+        data-variant="catalog"
+      >
+        <Title as={2} size="base" weight="bold" id="products-catalog-label" data-testid="variant-label">
+          {ui.blocks.variants.products.catalog}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductGrid
+            id="products-catalog"
+            title={ui.commerce.products.title}
+            products={products}
+            labels={ui.commerce.productLabels}
+            badges={ui.commerce.badges}
+            layout="grid"
+            cols="1-4"
+            ratio="1/1"
+            rating="hide"
+            action="button"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="products-browse-label"
+        data-testid="variant"
+        data-block="products"
+        data-variant="browse"
+      >
+        <Title as={2} size="base" weight="bold" id="products-browse-label" data-testid="variant-label">
+          {ui.blocks.variants.products.browse}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductGrid
+            id="products-browse"
+            title={ui.commerce.products.title}
+            products={products}
+            labels={ui.commerce.productLabels}
+            badges={ui.commerce.badges}
+            layout="grid"
+            cols="1-3"
+            ratio="4/3"
+            rating="show"
+            action="none"
+            tone="muted"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="products-showcase-label"
+        data-testid="variant"
+        data-block="products"
+        data-variant="showcase"
+      >
+        <Title as={2} size="base" weight="bold" id="products-showcase-label" data-testid="variant-label">
+          {ui.blocks.variants.products.showcase}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductGrid
+            id="products-showcase"
+            title={ui.commerce.products.title}
+            products={products}
+            labels={ui.commerce.productLabels}
+            badges={ui.commerce.badges}
+            layout="grid"
+            cols="1-3"
+            ratio="3/4"
+            rating="show"
+            action="button"
+            tone="default"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="products-rail-label"
+        data-testid="variant"
+        data-block="products"
+        data-variant="rail"
+      >
+        <Title as={2} size="base" weight="bold" id="products-rail-label" data-testid="variant-label">
+          {ui.blocks.variants.products.rail}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductGrid
+            id="products-rail"
+            title={ui.commerce.products.title}
+            products={products}
+            labels={ui.commerce.productLabels}
+            badges={ui.commerce.badges}
+            layout="rail"
+            cols="1-3"
+            ratio="4/3"
+            rating="show"
+            action="button"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="products-railCompact-label"
+        data-testid="variant"
+        data-block="products"
+        data-variant="railCompact"
+      >
+        <Title as={2} size="base" weight="bold" id="products-railCompact-label" data-testid="variant-label">
+          {ui.blocks.variants.products.railCompact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProductGrid
+            id="products-railCompact"
+            title={ui.commerce.products.title}
+            products={products}
+            labels={ui.commerce.productLabels}
+            badges={ui.commerce.badges}
+            layout="rail"
+            cols="1-3"
+            ratio="1/1"
+            rating="hide"
+            action="button"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ProfilePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ProfilePage.svelte
new file mode 100644
index 0000000..a115ac1
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ProfilePage.svelte
@@ -0,0 +1,147 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The profile page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProfileForm,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+          {ui.blocks.themes.account.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.profile}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.profile}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="profile-stacked-label"
+        data-testid="variant"
+        data-block="profile"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="profile-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.profile.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProfileForm
+            id="profile-stacked"
+            title={ui.account.profile.title}
+            text={ui.account.profile.text}
+            labels={ui.account.profile.labels}
+            layout="stacked"
+            avatar="show"
+            prefs="show"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="profile-split-label"
+        data-testid="variant"
+        data-block="profile"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="profile-split-label" data-testid="variant-label">
+          {ui.blocks.variants.profile.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProfileForm
+            id="profile-split"
+            title={ui.account.profile.title}
+            text={ui.account.profile.text}
+            labels={ui.account.profile.labels}
+            layout="split"
+            avatar="show"
+            prefs="show"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="profile-minimal-label"
+        data-testid="variant"
+        data-block="profile"
+        data-variant="minimal"
+      >
+        <Title as={2} size="base" weight="bold" id="profile-minimal-label" data-testid="variant-label">
+          {ui.blocks.variants.profile.minimal}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProfileForm
+            id="profile-minimal"
+            title={ui.account.profile.title}
+            text={ui.account.profile.text}
+            labels={ui.account.profile.labels}
+            layout="stacked"
+            avatar="hide"
+            prefs="hide"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.minimal))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="profile-muted-label"
+        data-testid="variant"
+        data-block="profile"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="profile-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.profile.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProfileForm
+            id="profile-muted"
+            title={ui.account.profile.title}
+            text={ui.account.profile.text}
+            labels={ui.account.profile.labels}
+            layout="split"
+            avatar="show"
+            prefs="show"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ProjectsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ProjectsPage.svelte
new file mode 100644
index 0000000..b130025
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ProjectsPage.svelte
@@ -0,0 +1,221 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The projects page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProjectGrid,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Project,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+
+  const PROJECTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "category": "terms|term:project_category",
+    "year": "metadata.year.value",
+    "summary": "metadata.summary.value",
+    "tags": "metadata.tags.value",
+    "featured": "metadata.featured.value",
+    "client": "metadata.client.value",
+  } as const;
+
+  const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.projects}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.projects}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="projects-cards-label"
+        data-testid="variant"
+        data-block="projects"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="projects-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.projects.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProjectGrid
+            id="projects-cards"
+            title={ui.company.projects.title}
+            lead={ui.company.projects.lead}
+            projects={projects}
+            empty={ui.empty.projects}
+            labels={ui.company.projects}
+            layout="cards"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="projects-compact-label"
+        data-testid="variant"
+        data-block="projects"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="projects-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.projects.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProjectGrid
+            id="projects-compact"
+            title={ui.company.projects.title}
+            lead={ui.company.projects.lead}
+            projects={projects}
+            empty={ui.empty.projects}
+            labels={ui.company.projects}
+            layout="compact"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.compact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="projects-overlay-label"
+        data-testid="variant"
+        data-block="projects"
+        data-variant="overlay"
+      >
+        <Title as={2} size="base" weight="bold" id="projects-overlay-label" data-testid="variant-label">
+          {ui.blocks.variants.projects.overlay}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProjectGrid
+            id="projects-overlay"
+            title={ui.company.projects.title}
+            lead={ui.company.projects.lead}
+            projects={projects}
+            empty={ui.empty.projects}
+            labels={ui.company.projects}
+            layout="overlay"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.overlay))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="projects-bento-label"
+        data-testid="variant"
+        data-block="projects"
+        data-variant="bento"
+      >
+        <Title as={2} size="base" weight="bold" id="projects-bento-label" data-testid="variant-label">
+          {ui.blocks.variants.projects.bento}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProjectGrid
+            id="projects-bento"
+            title={ui.company.projects.title}
+            lead={ui.company.projects.lead}
+            projects={projects}
+            empty={ui.empty.projects}
+            labels={ui.company.projects}
+            layout="bento"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.bento))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="projects-list-label"
+        data-testid="variant"
+        data-block="projects"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="projects-list-label" data-testid="variant-label">
+          {ui.blocks.variants.projects.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProjectGrid
+            id="projects-list"
+            title={ui.company.projects.title}
+            lead={ui.company.projects.lead}
+            projects={projects}
+            empty={ui.empty.projects}
+            labels={ui.company.projects}
+            layout="list"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="projects-cardsMuted-label"
+        data-testid="variant"
+        data-block="projects"
+        data-variant="cardsMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="projects-cardsMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.projects.cardsMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProjectGrid
+            id="projects-cardsMuted"
+            title={ui.company.projects.title}
+            lead={ui.company.projects.lead}
+            projects={projects}
+            empty={ui.empty.projects}
+            labels={ui.company.projects}
+            layout="cards"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cardsMuted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ProofPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ProofPage.svelte
new file mode 100644
index 0000000..c3e058f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ProofPage.svelte
@@ -0,0 +1,168 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The proof page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProofBand,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Logo,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.proof}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.proof}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="proof-above-label"
+        data-testid="variant"
+        data-block="proof"
+        data-variant="above"
+      >
+        <Title as={2} size="base" weight="bold" id="proof-above-label" data-testid="variant-label">
+          {ui.blocks.variants.proof.above}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProofBand
+            id="proof-above"
+            title={ui.vibe.proof.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            stats={stats}
+            layout="above"
+            logoStyle="name"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="proof-beside-label"
+        data-testid="variant"
+        data-block="proof"
+        data-variant="beside"
+      >
+        <Title as={2} size="base" weight="bold" id="proof-beside-label" data-testid="variant-label">
+          {ui.blocks.variants.proof.beside}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProofBand
+            id="proof-beside"
+            title={ui.vibe.proof.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            stats={stats}
+            layout="beside"
+            logoStyle="name"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.beside))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="proof-icons-label"
+        data-testid="variant"
+        data-block="proof"
+        data-variant="icons"
+      >
+        <Title as={2} size="base" weight="bold" id="proof-icons-label" data-testid="variant-label">
+          {ui.blocks.variants.proof.icons}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProofBand
+            id="proof-icons"
+            title={ui.vibe.proof.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            stats={stats}
+            layout="above"
+            logoStyle="icon"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.icons))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="proof-muted-label"
+        data-testid="variant"
+        data-block="proof"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="proof-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.proof.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ProofBand
+            id="proof-muted"
+            title={ui.vibe.proof.title}
+            logos={logos}
+            empty={ui.empty.logos}
+            stats={stats}
+            layout="above"
+            logoStyle="name"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/QuotesplitPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/QuotesplitPage.svelte
new file mode 100644
index 0000000..ec10b29
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/QuotesplitPage.svelte
@@ -0,0 +1,264 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The quotesplit page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    QuoteSplit,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Logo,
+    type Quote,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+  const QUOTESPLIT_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+  const QUOTESPLIT_EXTRAS = { stats, logos, rating: 5, score: ui.marketing.quoteSplit.score, reviews: ui.marketing.quoteSplit.reviews } as const;
+  const QUOTESPLIT_ACTIONS = {
+    mode: "two",
+    cta: ui.marketing.quoteSplit.cta,
+    href: "#/customers",
+    secondary: ui.marketing.quoteSplit.secondary,
+    secondaryHref: "#/contact",
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.quotesplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.quotesplit}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="quotesplit-quoteCard-label"
+        data-testid="variant"
+        data-block="quotesplit"
+        data-variant="quoteCard"
+      >
+        <Title as={2} size="base" weight="bold" id="quotesplit-quoteCard-label" data-testid="variant-label">
+          {ui.blocks.variants.quotesplit.quoteCard}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <QuoteSplit
+            id="quotesplit-quoteCard"
+            title={ui.marketing.quoteSplit.title}
+            lead={ui.marketing.quoteSplit.lead}
+            badge={ui.marketing.quoteSplit.badge}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={QUOTESPLIT_LABELS}
+            extras={QUOTESPLIT_EXTRAS}
+            actions={QUOTESPLIT_ACTIONS}
+            layout="media"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.quoteCard))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="quotesplit-logoTiles-label"
+        data-testid="variant"
+        data-block="quotesplit"
+        data-variant="logoTiles"
+      >
+        <Title as={2} size="base" weight="bold" id="quotesplit-logoTiles-label" data-testid="variant-label">
+          {ui.blocks.variants.quotesplit.logoTiles}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <QuoteSplit
+            id="quotesplit-logoTiles"
+            title={ui.marketing.quoteSplit.title}
+            lead={ui.marketing.quoteSplit.lead}
+            badge={ui.marketing.quoteSplit.badge}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={QUOTESPLIT_LABELS}
+            extras={QUOTESPLIT_EXTRAS}
+            actions={QUOTESPLIT_ACTIONS}
+            layout="logos"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.logoTiles))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="quotesplit-ratingPanel-label"
+        data-testid="variant"
+        data-block="quotesplit"
+        data-variant="ratingPanel"
+      >
+        <Title as={2} size="base" weight="bold" id="quotesplit-ratingPanel-label" data-testid="variant-label">
+          {ui.blocks.variants.quotesplit.ratingPanel}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <QuoteSplit
+            id="quotesplit-ratingPanel"
+            title={ui.marketing.quoteSplit.title}
+            lead={ui.marketing.quoteSplit.lead}
+            badge={ui.marketing.quoteSplit.badge}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={QUOTESPLIT_LABELS}
+            extras={QUOTESPLIT_EXTRAS}
+            actions={QUOTESPLIT_ACTIONS}
+            layout="rating"
+            mediaSide="end"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="quotesplit-stackedCards-label"
+        data-testid="variant"
+        data-block="quotesplit"
+        data-variant="stackedCards"
+      >
+        <Title as={2} size="base" weight="bold" id="quotesplit-stackedCards-label" data-testid="variant-label">
+          {ui.blocks.variants.quotesplit.stackedCards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <QuoteSplit
+            id="quotesplit-stackedCards"
+            title={ui.marketing.quoteSplit.title}
+            lead={ui.marketing.quoteSplit.lead}
+            badge={ui.marketing.quoteSplit.badge}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={QUOTESPLIT_LABELS}
+            extras={QUOTESPLIT_EXTRAS}
+            actions={QUOTESPLIT_ACTIONS}
+            layout="stack"
+            mediaSide="start"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.stackedCards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="quotesplit-compact4-label"
+        data-testid="variant"
+        data-block="quotesplit"
+        data-variant="compact4"
+      >
+        <Title as={2} size="base" weight="bold" id="quotesplit-compact4-label" data-testid="variant-label">
+          {ui.blocks.variants.quotesplit.compact4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <QuoteSplit
+            id="quotesplit-compact4"
+            title={ui.marketing.quoteSplit.title}
+            lead={ui.marketing.quoteSplit.lead}
+            badge={ui.marketing.quoteSplit.badge}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={QUOTESPLIT_LABELS}
+            extras={QUOTESPLIT_EXTRAS}
+            actions={QUOTESPLIT_ACTIONS}
+            layout="compact"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.compact4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="quotesplit-bentoFigures-label"
+        data-testid="variant"
+        data-block="quotesplit"
+        data-variant="bentoFigures"
+      >
+        <Title as={2} size="base" weight="bold" id="quotesplit-bentoFigures-label" data-testid="variant-label">
+          {ui.blocks.variants.quotesplit.bentoFigures}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <QuoteSplit
+            id="quotesplit-bentoFigures"
+            title={ui.marketing.quoteSplit.title}
+            lead={ui.marketing.quoteSplit.lead}
+            badge={ui.marketing.quoteSplit.badge}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={QUOTESPLIT_LABELS}
+            extras={QUOTESPLIT_EXTRAS}
+            actions={QUOTESPLIT_ACTIONS}
+            layout="bento"
+            mediaSide="end"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.bentoFigures))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ReviewsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ReviewsPage.svelte
new file mode 100644
index 0000000..a2a6e89
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ReviewsPage.svelte
@@ -0,0 +1,192 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The reviews page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ReviewList,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Review,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+  const REVIEWS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "author": "author_id|author",
+    "rating": "metadata.rating.value",
+    "text": "metadata.text.value",
+    "date": "metadata.date.value|date",
+  } as const;
+
+  const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.reviews}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.reviews}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="reviews-list-label"
+        data-testid="variant"
+        data-block="reviews"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="reviews-list-label" data-testid="variant-label">
+          {ui.blocks.variants.reviews.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ReviewList
+            id="reviews-list"
+            title={ui.commerce.reviews.title}
+            reviews={reviews}
+            labels={ui.commerce.reviewLabels}
+            layout="list"
+            item="card"
+            avatar="none"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="reviews-grid-label"
+        data-testid="variant"
+        data-block="reviews"
+        data-variant="grid"
+      >
+        <Title as={2} size="base" weight="bold" id="reviews-grid-label" data-testid="variant-label">
+          {ui.blocks.variants.reviews.grid}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ReviewList
+            id="reviews-grid"
+            title={ui.commerce.reviews.title}
+            reviews={reviews}
+            labels={ui.commerce.reviewLabels}
+            layout="grid"
+            item="card"
+            avatar="none"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="reviews-plain-label"
+        data-testid="variant"
+        data-block="reviews"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="reviews-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.reviews.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ReviewList
+            id="reviews-plain"
+            title={ui.commerce.reviews.title}
+            reviews={reviews}
+            labels={ui.commerce.reviewLabels}
+            layout="list"
+            item="plain"
+            avatar="none"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.plain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="reviews-avatars-label"
+        data-testid="variant"
+        data-block="reviews"
+        data-variant="avatars"
+      >
+        <Title as={2} size="base" weight="bold" id="reviews-avatars-label" data-testid="variant-label">
+          {ui.blocks.variants.reviews.avatars}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ReviewList
+            id="reviews-avatars"
+            title={ui.commerce.reviews.title}
+            reviews={reviews}
+            labels={ui.commerce.reviewLabels}
+            layout="list"
+            item="card"
+            avatar="image"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.avatars))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="reviews-mutedGrid-label"
+        data-testid="variant"
+        data-block="reviews"
+        data-variant="mutedGrid"
+      >
+        <Title as={2} size="base" weight="bold" id="reviews-mutedGrid-label" data-testid="variant-label">
+          {ui.blocks.variants.reviews.mutedGrid}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ReviewList
+            id="reviews-mutedGrid"
+            title={ui.commerce.reviews.title}
+            reviews={reviews}
+            labels={ui.commerce.reviewLabels}
+            layout="grid"
+            item="card"
+            avatar="image"
+            tone="muted"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.mutedGrid))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ScreenHeader.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ScreenHeader.svelte
new file mode 100644
index 0000000..1a74ba2
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ScreenHeader.svelte
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The ScreenHeader part of BlocksScreen: its own file, so each file of the screen opens on one Block. -->
+<script lang="ts">
+  import { Block, Button, Container, Group, Link, LinkPlain } from "@ui8kit/svelte-ui";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="header" class="border-b border-border">
+  <LinkPlain
+    href="#main-content"
+    class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded-md focus:bg-background " +
+      "focus:px-4 focus:py-2 focus:text-sm focus:shadow"}
+    data-testid="skip-link"
+  >
+    {ui.site.header.skip}
+  </LinkPlain>
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+    <Link href="#/" variant="default" class="text-lg font-bold" data-testid="brand">
+      {ui.blocks.title}
+    </Link>
+    <Group gap="4" align="center" class="flex-wrap">
+      <Link href="/catalog/" variant="default" class="text-sm font-medium" data-testid="catalog-link">
+        {ui.catalog.title}
+      </Link>
+      <Link href="/skins/" variant="default" class="text-sm font-medium" data-testid="skins-link">
+        {ui.skins.title}
+      </Link>
+      <Link href="/discovery/" variant="default" class="text-sm font-medium" data-testid="discovery-link">
+        {ui.discovery.title}
+      </Link>
+      <Button variant="outline" size="sm" data-testid="theme-toggle" onclick={() => actions.toggleTheme()}>
+        {ui.theme.toggle}
+      </Button>
+    </Group>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ShellPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ShellPage.svelte
new file mode 100644
index 0000000..a8e14ef
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ShellPage.svelte
@@ -0,0 +1,190 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The shell page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    AppShell,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Event,
+    type NavLink,
+    type Point,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+  import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+  const ACTIVITY_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "time": "metadata.time.value|ago",
+    "tone": "metadata.tone.value",
+  } as const;
+  const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const METRICS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+
+  const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+  const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+  const SHELL_NAV = { label: ui.vibe.sidebar.label, brand: ui.site.header.brand, links: sidenav, current: "item-overview" } as const;
+  const SHELL_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+  const SHELL_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.shell}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.shell}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="shell-sidebar-label"
+        data-testid="variant"
+        data-block="shell"
+        data-variant="sidebar"
+      >
+        <Title as={2} size="base" weight="bold" id="shell-sidebar-label" data-testid="variant-label">
+          {ui.blocks.variants.shell.sidebar}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AppShell
+            id="shell-sidebar"
+            title={ui.vibe.shell.title}
+            nav={SHELL_NAV}
+            user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            metrics={metrics}
+            chart={SHELL_CHART}
+            activity={SHELL_ACTIVITY}
+            layout="sidebar"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="shell-top-label"
+        data-testid="variant"
+        data-block="shell"
+        data-variant="top"
+      >
+        <Title as={2} size="base" weight="bold" id="shell-top-label" data-testid="variant-label">
+          {ui.blocks.variants.shell.top}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AppShell
+            id="shell-top"
+            title={ui.vibe.shell.title}
+            nav={SHELL_NAV}
+            user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            metrics={metrics}
+            chart={SHELL_CHART}
+            activity={SHELL_ACTIVITY}
+            layout="top"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="shell-panes-label"
+        data-testid="variant"
+        data-block="shell"
+        data-variant="panes"
+      >
+        <Title as={2} size="base" weight="bold" id="shell-panes-label" data-testid="variant-label">
+          {ui.blocks.variants.shell.panes}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AppShell
+            id="shell-panes"
+            title={ui.vibe.shell.title}
+            nav={SHELL_NAV}
+            user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            metrics={metrics}
+            chart={SHELL_CHART}
+            activity={SHELL_ACTIVITY}
+            layout="panes"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="shell-dense-label"
+        data-testid="variant"
+        data-block="shell"
+        data-variant="dense"
+      >
+        <Title as={2} size="base" weight="bold" id="shell-dense-label" data-testid="variant-label">
+          {ui.blocks.variants.shell.dense}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <AppShell
+            id="shell-dense"
+            title={ui.vibe.shell.title}
+            nav={SHELL_NAV}
+            user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+            search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+            metrics={metrics}
+            chart={SHELL_CHART}
+            activity={SHELL_ACTIVITY}
+            layout="sidebar"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.dense))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/SidenavPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/SidenavPage.svelte
new file mode 100644
index 0000000..4c11d19
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/SidenavPage.svelte
@@ -0,0 +1,158 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The sidenav page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    SidebarNav,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type NavLink,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.sidenav}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.sidenav}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sidenav-full-label"
+        data-testid="variant"
+        data-block="sidenav"
+        data-variant="full"
+      >
+        <Title as={2} size="base" weight="bold" id="sidenav-full-label" data-testid="variant-label">
+          {ui.blocks.variants.sidenav.full}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SidebarNav
+            label={ui.vibe.sidebar.label}
+            brand={ui.site.header.brand}
+            links={sidenav}
+            current="item-orders"
+            userName={ui.vibe.sidebar.userName}
+            userEmail={ui.vibe.sidebar.userEmail}
+            width="full"
+            user="show"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sidenav-compact-label"
+        data-testid="variant"
+        data-block="sidenav"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="sidenav-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.sidenav.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SidebarNav
+            label={ui.vibe.sidebar.label}
+            brand={ui.site.header.brand}
+            links={sidenav}
+            current="item-orders"
+            userName={ui.vibe.sidebar.userName}
+            userEmail={ui.vibe.sidebar.userEmail}
+            width="compact"
+            user="show"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sidenav-noUser-label"
+        data-testid="variant"
+        data-block="sidenav"
+        data-variant="noUser"
+      >
+        <Title as={2} size="base" weight="bold" id="sidenav-noUser-label" data-testid="variant-label">
+          {ui.blocks.variants.sidenav.noUser}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SidebarNav
+            label={ui.vibe.sidebar.label}
+            brand={ui.site.header.brand}
+            links={sidenav}
+            current="item-orders"
+            userName={ui.vibe.sidebar.userName}
+            userEmail={ui.vibe.sidebar.userEmail}
+            width="full"
+            user="hide"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.noUser))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sidenav-dense-label"
+        data-testid="variant"
+        data-block="sidenav"
+        data-variant="dense"
+      >
+        <Title as={2} size="base" weight="bold" id="sidenav-dense-label" data-testid="variant-label">
+          {ui.blocks.variants.sidenav.dense}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SidebarNav
+            label={ui.vibe.sidebar.label}
+            brand={ui.site.header.brand}
+            links={sidenav}
+            current="item-orders"
+            userName={ui.vibe.sidebar.userName}
+            userEmail={ui.vibe.sidebar.userEmail}
+            width="full"
+            user="show"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.dense))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/SitemapPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/SitemapPage.svelte
new file mode 100644
index 0000000..9f72525
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/SitemapPage.svelte
@@ -0,0 +1,220 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The sitemap page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    SitemapFooter,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type MegaGroup,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+
+  const SITEMAP_SIGNUP = { title: ui.vibe.sitemap.signupTitle, label: ui.vibe.sitemap.signupLabel, submit: ui.vibe.sitemap.signupSubmit } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.sitemap}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.sitemap}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sitemap-columns-label"
+        data-testid="variant"
+        data-block="sitemap"
+        data-variant="columns"
+      >
+        <Title as={2} size="base" weight="bold" id="sitemap-columns-label" data-testid="variant-label">
+          {ui.blocks.variants.sitemap.columns}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SitemapFooter
+            id="sitemap-columns"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.vibe.sitemap.tagline}
+            copyright={ui.vibe.sitemap.copyright}
+            groups={sitemap}
+            signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+            status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+            layout="columns"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.columns))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sitemap-card-label"
+        data-testid="variant"
+        data-block="sitemap"
+        data-variant="card"
+      >
+        <Title as={2} size="base" weight="bold" id="sitemap-card-label" data-testid="variant-label">
+          {ui.blocks.variants.sitemap.card}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SitemapFooter
+            id="sitemap-card"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.vibe.sitemap.tagline}
+            copyright={ui.vibe.sitemap.copyright}
+            groups={sitemap}
+            signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+            status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+            layout="card"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.card))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sitemap-row-label"
+        data-testid="variant"
+        data-block="sitemap"
+        data-variant="row"
+      >
+        <Title as={2} size="base" weight="bold" id="sitemap-row-label" data-testid="variant-label">
+          {ui.blocks.variants.sitemap.row}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SitemapFooter
+            id="sitemap-row"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.vibe.sitemap.tagline}
+            copyright={ui.vibe.sitemap.copyright}
+            groups={sitemap}
+            signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+            status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+            layout="row"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.row))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sitemap-newsletter-label"
+        data-testid="variant"
+        data-block="sitemap"
+        data-variant="newsletter"
+      >
+        <Title as={2} size="base" weight="bold" id="sitemap-newsletter-label" data-testid="variant-label">
+          {ui.blocks.variants.sitemap.newsletter}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SitemapFooter
+            id="sitemap-newsletter"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.vibe.sitemap.tagline}
+            copyright={ui.vibe.sitemap.copyright}
+            groups={sitemap}
+            signup={{ ...SITEMAP_SIGNUP, mode: "first" }}
+            status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+            layout="columns"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.newsletter))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sitemap-status-label"
+        data-testid="variant"
+        data-block="sitemap"
+        data-variant="status"
+      >
+        <Title as={2} size="base" weight="bold" id="sitemap-status-label" data-testid="variant-label">
+          {ui.blocks.variants.sitemap.status}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SitemapFooter
+            id="sitemap-status"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.vibe.sitemap.tagline}
+            copyright={ui.vibe.sitemap.copyright}
+            groups={sitemap}
+            signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+            status={{ label: ui.vibe.sitemap.status, mode: "show" }}
+            layout="columns"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.status))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sitemap-compact-label"
+        data-testid="variant"
+        data-block="sitemap"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="sitemap-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.sitemap.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SitemapFooter
+            id="sitemap-compact"
+            label={ui.vibe.sitemap.label}
+            brand={ui.site.header.brand}
+            tagline={ui.vibe.sitemap.tagline}
+            copyright={ui.vibe.sitemap.copyright}
+            groups={sitemap}
+            signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+            status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+            layout="columns"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.compact))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/SkeletonPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/SkeletonPage.svelte
new file mode 100644
index 0000000..0587728
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/SkeletonPage.svelte
@@ -0,0 +1,146 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The skeleton page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    SkeletonLayout,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Line,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+  const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+  const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+          {ui.blocks.themes.dashboard.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.skeleton}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.skeleton}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="skeleton-cards-label"
+        data-testid="variant"
+        data-block="skeleton"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="skeleton-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.skeleton.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SkeletonLayout
+            id="skeleton-cards"
+            title={ui.vibe.skeleton.title}
+            label={ui.vibe.skeleton.label}
+            lines={placeholders}
+            shape="cards"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="skeleton-list-label"
+        data-testid="variant"
+        data-block="skeleton"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="skeleton-list-label" data-testid="variant-label">
+          {ui.blocks.variants.skeleton.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SkeletonLayout
+            id="skeleton-list"
+            title={ui.vibe.skeleton.title}
+            label={ui.vibe.skeleton.label}
+            lines={placeholders}
+            shape="list"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="skeleton-article-label"
+        data-testid="variant"
+        data-block="skeleton"
+        data-variant="article"
+      >
+        <Title as={2} size="base" weight="bold" id="skeleton-article-label" data-testid="variant-label">
+          {ui.blocks.variants.skeleton.article}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SkeletonLayout
+            id="skeleton-article"
+            title={ui.vibe.skeleton.title}
+            label={ui.vibe.skeleton.label}
+            lines={placeholders}
+            shape="article"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.article))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="skeleton-muted-label"
+        data-testid="variant"
+        data-block="skeleton"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="skeleton-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.skeleton.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SkeletonLayout
+            id="skeleton-muted"
+            title={ui.vibe.skeleton.title}
+            label={ui.vibe.skeleton.label}
+            lines={placeholders}
+            shape="cards"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/SlotsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/SlotsPage.svelte
new file mode 100644
index 0000000..4ebd1a4
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/SlotsPage.svelte
@@ -0,0 +1,148 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The slots page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    SlotBoard,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Day,
+    type Zone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+  import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+  const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+  const ZONES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "area": "metadata.area.value",
+    "price": "metadata.price.value",
+    "freeFrom": "metadata.freeFrom.value",
+    "minOrder": "metadata.minOrder.value",
+    "time": "metadata.time.value",
+    "express": "metadata.express.value",
+    "currency": "metadata.currency.value",
+  } as const;
+
+  const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+  const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.slots}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.slots}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="slots-split-label"
+        data-testid="variant"
+        data-block="slots"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="slots-split-label" data-testid="variant-label">
+          {ui.blocks.variants.slots.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SlotBoard
+            id="slots-split"
+            title={ui.commerce.slots.title}
+            lead={ui.commerce.slots.lead}
+            days={days}
+            empty={ui.empty.days}
+            zone={zones.find((i) => i.id === "zone-central")!}
+            labels={ui.commerce.slots}
+            layout="split"
+            item="card"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="slots-plain-label"
+        data-testid="variant"
+        data-block="slots"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="slots-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.slots.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SlotBoard
+            id="slots-plain"
+            title={ui.commerce.slots.title}
+            lead={ui.commerce.slots.lead}
+            days={days}
+            empty={ui.empty.days}
+            zone={zones.find((i) => i.id === "zone-central")!}
+            labels={ui.commerce.slots}
+            layout="split"
+            item="plain"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.plain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="slots-stacked-label"
+        data-testid="variant"
+        data-block="slots"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="slots-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.slots.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SlotBoard
+            id="slots-stacked"
+            title={ui.commerce.slots.title}
+            lead={ui.commerce.slots.lead}
+            days={days}
+            empty={ui.empty.days}
+            zone={zones.find((i) => i.id === "zone-central")!}
+            labels={ui.commerce.slots}
+            layout="stacked"
+            item="card"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.stacked))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/StatsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/StatsPage.svelte
new file mode 100644
index 0000000..cd4a3a2
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/StatsPage.svelte
@@ -0,0 +1,288 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The stats page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    StatsBand,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.stats}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.stats}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stats-plain4-label"
+        data-testid="variant"
+        data-block="stats"
+        data-variant="plain4"
+      >
+        <Title as={2} size="base" weight="bold" id="stats-plain4-label" data-testid="variant-label">
+          {ui.blocks.variants.stats.plain4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StatsBand
+            id="stats-plain4"
+            title={ui.marketing.stats.title}
+            stats={stats}
+            empty={ui.marketing.stats.empty}
+            cols="4"
+            layout="row"
+            surface="none"
+            item="plain"
+            align="center"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.plain4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stats-panel-label"
+        data-testid="variant"
+        data-block="stats"
+        data-variant="panel"
+      >
+        <Title as={2} size="base" weight="bold" id="stats-panel-label" data-testid="variant-label">
+          {ui.blocks.variants.stats.panel}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StatsBand
+            id="stats-panel"
+            title=""
+            stats={stats}
+            empty={ui.marketing.stats.empty}
+            cols="4"
+            layout="row"
+            surface="panel"
+            item="plain"
+            align="center"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.panel))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stats-stack-label"
+        data-testid="variant"
+        data-block="stats"
+        data-variant="stack"
+      >
+        <Title as={2} size="base" weight="bold" id="stats-stack-label" data-testid="variant-label">
+          {ui.blocks.variants.stats.stack}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StatsBand
+            id="stats-stack"
+            title={ui.marketing.stats.title}
+            stats={stats}
+            empty={ui.marketing.stats.empty}
+            cols="4"
+            layout="stack"
+            surface="none"
+            item="plain"
+            align="start"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.stack))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stats-image-label"
+        data-testid="variant"
+        data-block="stats"
+        data-variant="image"
+      >
+        <Title as={2} size="base" weight="bold" id="stats-image-label" data-testid="variant-label">
+          {ui.blocks.variants.stats.image}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StatsBand
+            id="stats-image"
+            title={ui.marketing.stats.title}
+            stats={stats}
+            empty={ui.marketing.stats.empty}
+            cols="4"
+            layout="row"
+            surface="image"
+            item="plain"
+            align="center"
+            tone="default"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.image))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stats-cards-label"
+        data-testid="variant"
+        data-block="stats"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="stats-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.stats.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StatsBand
+            id="stats-cards"
+            title={ui.marketing.stats.title}
+            stats={[stats?.[0], stats?.[1], stats?.[2]]}
+            empty={ui.marketing.stats.empty}
+            cols="3"
+            layout="row"
+            surface="none"
+            item="card"
+            align="center"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stats-icons-label"
+        data-testid="variant"
+        data-block="stats"
+        data-variant="icons"
+      >
+        <Title as={2} size="base" weight="bold" id="stats-icons-label" data-testid="variant-label">
+          {ui.blocks.variants.stats.icons}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StatsBand
+            id="stats-icons"
+            title={ui.marketing.stats.title}
+            stats={stats}
+            empty={ui.marketing.stats.empty}
+            cols="4"
+            layout="row"
+            surface="none"
+            item="icon"
+            align="start"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stats-muted2-label"
+        data-testid="variant"
+        data-block="stats"
+        data-variant="muted2"
+      >
+        <Title as={2} size="base" weight="bold" id="stats-muted2-label" data-testid="variant-label">
+          {ui.blocks.variants.stats.muted2}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StatsBand
+            id="stats-muted2"
+            title={ui.marketing.stats.title}
+            stats={stats}
+            empty={ui.marketing.stats.empty}
+            cols="2"
+            layout="row"
+            surface="none"
+            item="plain"
+            align="center"
+            tone="muted"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.muted2))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stats-cardsCompact-label"
+        data-testid="variant"
+        data-block="stats"
+        data-variant="cardsCompact"
+      >
+        <Title as={2} size="base" weight="bold" id="stats-cardsCompact-label" data-testid="variant-label">
+          {ui.blocks.variants.stats.cardsCompact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StatsBand
+            id="stats-cardsCompact"
+            title={ui.marketing.stats.title}
+            stats={stats}
+            empty={ui.marketing.stats.empty}
+            cols="4"
+            layout="row"
+            surface="none"
+            item="card"
+            align="center"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cardsCompact))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/StepperPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/StepperPage.svelte
new file mode 100644
index 0000000..f3d4c04
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/StepperPage.svelte
@@ -0,0 +1,162 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The stepper page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Stepper,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Step,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+          {ui.blocks.themes.onboarding.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.stepper}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.stepper}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stepper-horizontal-label"
+        data-testid="variant"
+        data-block="stepper"
+        data-variant="horizontal"
+      >
+        <Title as={2} size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+          {ui.blocks.variants.stepper.horizontal}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Stepper
+            id="stepper-horizontal"
+            title={ui.onboarding.stepper.title}
+            steps={steps}
+            current={2}
+            stepLabel={ui.onboarding.stepper.stepLabel}
+            back={ui.onboarding.stepper.back}
+            next={ui.onboarding.stepper.next}
+            layout="horizontal"
+            marker="number"
+            summary="show"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stepper-vertical-label"
+        data-testid="variant"
+        data-block="stepper"
+        data-variant="vertical"
+      >
+        <Title as={2} size="base" weight="bold" id="stepper-vertical-label" data-testid="variant-label">
+          {ui.blocks.variants.stepper.vertical}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Stepper
+            id="stepper-vertical"
+            title={ui.onboarding.stepper.title}
+            steps={steps}
+            current={2}
+            stepLabel={ui.onboarding.stepper.stepLabel}
+            back={ui.onboarding.stepper.back}
+            next={ui.onboarding.stepper.next}
+            layout="vertical"
+            marker="number"
+            summary="show"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stepper-icons-label"
+        data-testid="variant"
+        data-block="stepper"
+        data-variant="icons"
+      >
+        <Title as={2} size="base" weight="bold" id="stepper-icons-label" data-testid="variant-label">
+          {ui.blocks.variants.stepper.icons}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Stepper
+            id="stepper-icons"
+            title={ui.onboarding.stepper.title}
+            steps={steps}
+            current={2}
+            stepLabel={ui.onboarding.stepper.stepLabel}
+            back={ui.onboarding.stepper.back}
+            next={ui.onboarding.stepper.next}
+            layout="horizontal"
+            marker="icon"
+            summary="show"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.icons))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="stepper-bare-label"
+        data-testid="variant"
+        data-block="stepper"
+        data-variant="bare"
+      >
+        <Title as={2} size="base" weight="bold" id="stepper-bare-label" data-testid="variant-label">
+          {ui.blocks.variants.stepper.bare}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <Stepper
+            id="stepper-bare"
+            title={ui.onboarding.stepper.title}
+            steps={steps}
+            current={2}
+            stepLabel={ui.onboarding.stepper.stepLabel}
+            back={ui.onboarding.stepper.back}
+            next={ui.onboarding.stepper.next}
+            layout="vertical"
+            marker="icon"
+            summary="hide"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.bare))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/StepsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/StepsPage.svelte
new file mode 100644
index 0000000..9692c92
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/StepsPage.svelte
@@ -0,0 +1,212 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The steps page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    StepsList,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Step,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.steps}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.steps}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="steps-row-label"
+        data-testid="variant"
+        data-block="steps"
+        data-variant="row"
+      >
+        <Title as={2} size="base" weight="bold" id="steps-row-label" data-testid="variant-label">
+          {ui.blocks.variants.steps.row}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StepsList
+            id="steps-row"
+            title={ui.marketing.steps.title}
+            steps={steps}
+            empty={ui.empty.steps}
+            layout="row"
+            marker="number"
+            align="start"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.row))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="steps-rowIcons-label"
+        data-testid="variant"
+        data-block="steps"
+        data-variant="rowIcons"
+      >
+        <Title as={2} size="base" weight="bold" id="steps-rowIcons-label" data-testid="variant-label">
+          {ui.blocks.variants.steps.rowIcons}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StepsList
+            id="steps-rowIcons"
+            title={ui.marketing.steps.title}
+            steps={steps}
+            empty={ui.empty.steps}
+            layout="row"
+            marker="icon"
+            align="start"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="steps-column-label"
+        data-testid="variant"
+        data-block="steps"
+        data-variant="column"
+      >
+        <Title as={2} size="base" weight="bold" id="steps-column-label" data-testid="variant-label">
+          {ui.blocks.variants.steps.column}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StepsList
+            id="steps-column"
+            title={ui.marketing.steps.title}
+            steps={steps}
+            empty={ui.empty.steps}
+            layout="column"
+            marker="number"
+            align="start"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="steps-centered-label"
+        data-testid="variant"
+        data-block="steps"
+        data-variant="centered"
+      >
+        <Title as={2} size="base" weight="bold" id="steps-centered-label" data-testid="variant-label">
+          {ui.blocks.variants.steps.centered}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StepsList
+            id="steps-centered"
+            title={ui.marketing.steps.title}
+            steps={steps}
+            empty={ui.empty.steps}
+            layout="row"
+            marker="number"
+            align="center"
+            tone="muted"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.centered))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="steps-columnIcons-label"
+        data-testid="variant"
+        data-block="steps"
+        data-variant="columnIcons"
+      >
+        <Title as={2} size="base" weight="bold" id="steps-columnIcons-label" data-testid="variant-label">
+          {ui.blocks.variants.steps.columnIcons}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StepsList
+            id="steps-columnIcons"
+            title={ui.marketing.steps.title}
+            steps={steps}
+            empty={ui.empty.steps}
+            layout="column"
+            marker="icon"
+            align="start"
+            tone="default"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.columnIcons))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="steps-compact-label"
+        data-testid="variant"
+        data-block="steps"
+        data-variant="compact"
+      >
+        <Title as={2} size="base" weight="bold" id="steps-compact-label" data-testid="variant-label">
+          {ui.blocks.variants.steps.compact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StepsList
+            id="steps-compact"
+            title={ui.marketing.steps.title}
+            steps={steps}
+            empty={ui.empty.steps}
+            layout="row"
+            marker="number"
+            align="start"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.compact))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/StickyPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/StickyPage.svelte
new file mode 100644
index 0000000..8845011
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/StickyPage.svelte
@@ -0,0 +1,158 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The sticky page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FeatureSticky,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.sticky}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.sticky}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sticky-end-label"
+        data-testid="variant"
+        data-block="sticky"
+        data-variant="end"
+      >
+        <Title as={2} size="base" weight="bold" id="sticky-end-label" data-testid="variant-label">
+          {ui.blocks.variants.sticky.end}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureSticky
+            id="sticky-end"
+            title={ui.vibe.sticky.title}
+            features={features}
+            empty={ui.empty.features}
+            active="feature-clear"
+            mediaSide="end"
+            item="plain"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sticky-start-label"
+        data-testid="variant"
+        data-block="sticky"
+        data-variant="start"
+      >
+        <Title as={2} size="base" weight="bold" id="sticky-start-label" data-testid="variant-label">
+          {ui.blocks.variants.sticky.start}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureSticky
+            id="sticky-start"
+            title={ui.vibe.sticky.title}
+            features={features}
+            empty={ui.empty.features}
+            active="feature-clear"
+            mediaSide="start"
+            item="plain"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.start))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sticky-card-label"
+        data-testid="variant"
+        data-block="sticky"
+        data-variant="card"
+      >
+        <Title as={2} size="base" weight="bold" id="sticky-card-label" data-testid="variant-label">
+          {ui.blocks.variants.sticky.card}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureSticky
+            id="sticky-card"
+            title={ui.vibe.sticky.title}
+            features={features}
+            empty={ui.empty.features}
+            active="feature-clear"
+            mediaSide="end"
+            item="card"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="sticky-muted-label"
+        data-testid="variant"
+        data-block="sticky"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="sticky-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.sticky.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <FeatureSticky
+            id="sticky-muted"
+            title={ui.vibe.sticky.title}
+            features={features}
+            empty={ui.empty.features}
+            active="feature-clear"
+            mediaSide="end"
+            item="plain"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/StoreheroPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/StoreheroPage.svelte
new file mode 100644
index 0000000..cc34292
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/StoreheroPage.svelte
@@ -0,0 +1,174 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The storehero page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    StoreHero,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+  const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+  const STOREHERO_ACTIONS = {
+    mode: "two",
+    cta: ui.commerce.storeHero.cta,
+    href: "#/catalog",
+    secondary: ui.commerce.storeHero.secondary,
+    secondaryHref: "#/delivery",
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.storehero}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.storehero}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="storehero-overlay-label"
+        data-testid="variant"
+        data-block="storehero"
+        data-variant="overlay"
+      >
+        <Title as={2} size="base" weight="bold" id="storehero-overlay-label" data-testid="variant-label">
+          {ui.blocks.variants.storehero.overlay}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoreHero
+            id="storehero-overlay"
+            title={ui.commerce.storeHero.title}
+            lead={ui.commerce.storeHero.lead}
+            badge={ui.commerce.storeHero.badge}
+            perks={perks}
+            card={ui.commerce.storeHero.card}
+            actions={STOREHERO_ACTIONS}
+            layout="overlay"
+            mediaSide="end"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlay))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="storehero-overlayStart-label"
+        data-testid="variant"
+        data-block="storehero"
+        data-variant="overlayStart"
+      >
+        <Title as={2} size="base" weight="bold" id="storehero-overlayStart-label" data-testid="variant-label">
+          {ui.blocks.variants.storehero.overlayStart}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoreHero
+            id="storehero-overlayStart"
+            title={ui.commerce.storeHero.title}
+            lead={ui.commerce.storeHero.lead}
+            badge={ui.commerce.storeHero.badge}
+            perks={perks}
+            card={ui.commerce.storeHero.card}
+            actions={STOREHERO_ACTIONS}
+            layout="overlay"
+            mediaSide="start"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlayStart))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="storehero-backdrop-label"
+        data-testid="variant"
+        data-block="storehero"
+        data-variant="backdrop"
+      >
+        <Title as={2} size="base" weight="bold" id="storehero-backdrop-label" data-testid="variant-label">
+          {ui.blocks.variants.storehero.backdrop}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoreHero
+            id="storehero-backdrop"
+            title={ui.commerce.storeHero.title}
+            lead={ui.commerce.storeHero.lead}
+            badge={ui.commerce.storeHero.badge}
+            perks={perks}
+            card={ui.commerce.storeHero.card}
+            actions={STOREHERO_ACTIONS}
+            layout="backdrop"
+            mediaSide="end"
+            tone="default"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.backdrop))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="storehero-muted-label"
+        data-testid="variant"
+        data-block="storehero"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="storehero-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.storehero.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoreHero
+            id="storehero-muted"
+            title={ui.commerce.storeHero.title}
+            lead={ui.commerce.storeHero.lead}
+            badge={ui.commerce.storeHero.badge}
+            perks={perks}
+            card={ui.commerce.storeHero.card}
+            actions={{ ...STOREHERO_ACTIONS, mode: "one" }}
+            layout="overlay"
+            mediaSide="end"
+            tone="muted"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/StorytabsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/StorytabsPage.svelte
new file mode 100644
index 0000000..a86ea33
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/StorytabsPage.svelte
@@ -0,0 +1,134 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The storytabs page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    StoryTabs,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Milestone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+  const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+  const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+          {ui.blocks.themes.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.storytabs}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.storytabs}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="storytabs-yearTabs-label"
+        data-testid="variant"
+        data-block="storytabs"
+        data-variant="yearTabs"
+      >
+        <Title as={2} size="base" weight="bold" id="storytabs-yearTabs-label" data-testid="variant-label">
+          {ui.blocks.variants.storytabs.yearTabs}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoryTabs
+            id="storytabs-yearTabs"
+            title={ui.company.storyTabs.title}
+            lead={ui.company.storyTabs.lead}
+            badge={ui.company.storyTabs.badge}
+            steps={milestones}
+            empty={ui.empty.milestones}
+            active="milestone-runtimes"
+            labels={ui.company.storyTabs.labels}
+            layout="years"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="storytabs-carouselSplit-label"
+        data-testid="variant"
+        data-block="storytabs"
+        data-variant="carouselSplit"
+      >
+        <Title as={2} size="base" weight="bold" id="storytabs-carouselSplit-label" data-testid="variant-label">
+          {ui.blocks.variants.storytabs.carouselSplit}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoryTabs
+            id="storytabs-carouselSplit"
+            title={ui.company.storyTabs.title}
+            lead={ui.company.storyTabs.lead}
+            badge={ui.company.storyTabs.badge}
+            steps={milestones}
+            empty={ui.empty.milestones}
+            active="milestone-runtimes"
+            labels={ui.company.storyTabs.labels}
+            layout="carousel"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.carouselSplit))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="storytabs-yearTabsMuted-label"
+        data-testid="variant"
+        data-block="storytabs"
+        data-variant="yearTabsMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="storytabs-yearTabsMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.storytabs.yearTabsMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <StoryTabs
+            id="storytabs-yearTabsMuted"
+            title={ui.company.storyTabs.title}
+            lead={ui.company.storyTabs.lead}
+            badge={ui.company.storyTabs.badge}
+            steps={milestones}
+            empty={ui.empty.milestones}
+            active="milestone-runtimes"
+            labels={ui.company.storyTabs.labels}
+            layout="years"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabsMuted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/SummaryPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/SummaryPage.svelte
new file mode 100644
index 0000000..d498129
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/SummaryPage.svelte
@@ -0,0 +1,168 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The summary page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    OrderSummary,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.summary}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.summary}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="summary-card-label"
+        data-testid="variant"
+        data-block="summary"
+        data-variant="card"
+      >
+        <Title as={2} size="base" weight="bold" id="summary-card-label" data-testid="variant-label">
+          {ui.blocks.variants.summary.card}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <OrderSummary
+            id="summary-card"
+            title={ui.commerce.summary.title}
+            rows={summary}
+            empty={ui.empty.summary}
+            labels={ui.commerce.summary}
+            layout="card"
+            cta="show"
+            note="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="summary-plain-label"
+        data-testid="variant"
+        data-block="summary"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="summary-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.summary.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <OrderSummary
+            id="summary-plain"
+            title={ui.commerce.summary.title}
+            rows={summary}
+            empty={ui.empty.summary}
+            labels={ui.commerce.summary}
+            layout="plain"
+            cta="show"
+            note="hide"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.plain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="summary-noCta-label"
+        data-testid="variant"
+        data-block="summary"
+        data-variant="noCta"
+      >
+        <Title as={2} size="base" weight="bold" id="summary-noCta-label" data-testid="variant-label">
+          {ui.blocks.variants.summary.noCta}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <OrderSummary
+            id="summary-noCta"
+            title={ui.commerce.summary.title}
+            rows={summary}
+            empty={ui.empty.summary}
+            labels={ui.commerce.summary}
+            layout="card"
+            cta="hide"
+            note="show"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.noCta))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="summary-muted-label"
+        data-testid="variant"
+        data-block="summary"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="summary-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.summary.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <OrderSummary
+            id="summary-muted"
+            title={ui.commerce.summary.title}
+            rows={summary}
+            empty={ui.empty.summary}
+            labels={ui.commerce.summary}
+            layout="card"
+            cta="show"
+            note="show"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/TeamPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/TeamPage.svelte
new file mode 100644
index 0000000..29f02bb
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/TeamPage.svelte
@@ -0,0 +1,226 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The team page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    TeamGrid,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Member,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+
+  const MEMBERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "role": "metadata.role.value",
+    "dept": "metadata.dept.value",
+    "location": "metadata.location.value",
+    "bio": "metadata.bio.value",
+    "skills": "metadata.skills.value",
+  } as const;
+
+  const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.team}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.team}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="team-cards4-label"
+        data-testid="variant"
+        data-block="team"
+        data-variant="cards4"
+      >
+        <Title as={2} size="base" weight="bold" id="team-cards4-label" data-testid="variant-label">
+          {ui.blocks.variants.team.cards4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TeamGrid
+            id="team-cards4"
+            title={ui.company.team.title}
+            lead={ui.company.team.lead}
+            members={members}
+            empty={ui.empty.members}
+            depts={ui.company.depts}
+            layout="cards"
+            cols="1-4"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="team-cards3-label"
+        data-testid="variant"
+        data-block="team"
+        data-variant="cards3"
+      >
+        <Title as={2} size="base" weight="bold" id="team-cards3-label" data-testid="variant-label">
+          {ui.blocks.variants.team.cards3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TeamGrid
+            id="team-cards3"
+            title={ui.company.team.title}
+            lead={ui.company.team.lead}
+            members={members}
+            empty={ui.empty.members}
+            depts={ui.company.depts}
+            layout="cards"
+            cols="1-3"
+            tone="muted"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="team-minimal-label"
+        data-testid="variant"
+        data-block="team"
+        data-variant="minimal"
+      >
+        <Title as={2} size="base" weight="bold" id="team-minimal-label" data-testid="variant-label">
+          {ui.blocks.variants.team.minimal}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TeamGrid
+            id="team-minimal"
+            title={ui.company.team.title}
+            lead={ui.company.team.lead}
+            members={members}
+            empty={ui.empty.members}
+            depts={ui.company.depts}
+            layout="minimal"
+            cols="1-4"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.minimal))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="team-detailed-label"
+        data-testid="variant"
+        data-block="team"
+        data-variant="detailed"
+      >
+        <Title as={2} size="base" weight="bold" id="team-detailed-label" data-testid="variant-label">
+          {ui.blocks.variants.team.detailed}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TeamGrid
+            id="team-detailed"
+            title={ui.company.team.title}
+            lead={ui.company.team.lead}
+            members={members}
+            empty={ui.empty.members}
+            depts={ui.company.depts}
+            layout="detailed"
+            cols="1-3"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.detailed))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="team-list-label"
+        data-testid="variant"
+        data-block="team"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="team-list-label" data-testid="variant-label">
+          {ui.blocks.variants.team.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TeamGrid
+            id="team-list"
+            title={ui.company.team.title}
+            lead={ui.company.team.lead}
+            members={members}
+            empty={ui.empty.members}
+            depts={ui.company.depts}
+            layout="list"
+            cols="1-4"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="team-directory-label"
+        data-testid="variant"
+        data-block="team"
+        data-variant="directory"
+      >
+        <Title as={2} size="base" weight="bold" id="team-directory-label" data-testid="variant-label">
+          {ui.blocks.variants.team.directory}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TeamGrid
+            id="team-directory"
+            title={ui.company.team.title}
+            lead={ui.company.team.lead}
+            members={members}
+            empty={ui.empty.members}
+            depts={ui.company.depts}
+            layout="directory"
+            cols="1-4"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.directory))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/TemplatesPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/TemplatesPage.svelte
new file mode 100644
index 0000000..e23978e
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/TemplatesPage.svelte
@@ -0,0 +1,172 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The templates page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    TemplateGrid,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Filter,
+    type Template,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+  import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+  const TEMPLATES_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "views": "metadata.views.value|compact",
+    "likes": "metadata.likes.value|compact",
+    "topic": "metadata.topic.value",
+  } as const;
+  const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+  const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+  const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.templates}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.templates}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="templates-grid4-label"
+        data-testid="variant"
+        data-block="templates"
+        data-variant="grid4"
+      >
+        <Title as={2} size="base" weight="bold" id="templates-grid4-label" data-testid="variant-label">
+          {ui.blocks.variants.templates.grid4}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TemplateGrid
+            id="templates-grid4"
+            title={ui.vibe.templates.title}
+            templates={templates}
+            filters={templateFilters}
+            labels={ui.vibe.templates}
+            browseHref="#/"
+            empty={ui.empty.templates}
+            cols="1-4"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="templates-grid3-label"
+        data-testid="variant"
+        data-block="templates"
+        data-variant="grid3"
+      >
+        <Title as={2} size="base" weight="bold" id="templates-grid3-label" data-testid="variant-label">
+          {ui.blocks.variants.templates.grid3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TemplateGrid
+            id="templates-grid3"
+            title={ui.vibe.templates.title}
+            templates={templates}
+            filters={templateFilters}
+            labels={ui.vibe.templates}
+            browseHref="#/"
+            empty={ui.empty.templates}
+            cols="1-3"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="templates-muted-label"
+        data-testid="variant"
+        data-block="templates"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="templates-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.templates.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TemplateGrid
+            id="templates-muted"
+            title={ui.vibe.templates.title}
+            templates={templates}
+            filters={templateFilters}
+            labels={ui.vibe.templates}
+            browseHref="#/"
+            empty={ui.empty.templates}
+            cols="1-4"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.muted))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="templates-roomy-label"
+        data-testid="variant"
+        data-block="templates"
+        data-variant="roomy"
+      >
+        <Title as={2} size="base" weight="bold" id="templates-roomy-label" data-testid="variant-label">
+          {ui.blocks.variants.templates.roomy}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TemplateGrid
+            id="templates-roomy"
+            title={ui.vibe.templates.title}
+            templates={templates}
+            filters={templateFilters}
+            labels={ui.vibe.templates}
+            browseHref="#/"
+            empty={ui.empty.templates}
+            cols="1-4"
+            tone="default"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.roomy))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/TestimonialsPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/TestimonialsPage.svelte
new file mode 100644
index 0000000..c3d1316
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/TestimonialsPage.svelte
@@ -0,0 +1,342 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The testimonials page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    TestimonialGrid,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Quote,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+  const TESTIMONIALS_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.testimonials}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.testimonials}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-grid3-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="grid3"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-grid3-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.grid3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-grid3"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="grid"
+            cols="1-3"
+            item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-masonry-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="masonry"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-masonry-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.masonry}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-masonry"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="masonry"
+            cols="1-3"
+            item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-strip-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="strip"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-strip-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.strip}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-strip"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="strip"
+            cols="1-3"
+            item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-social-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="social"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-social-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.social}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-social"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="masonry"
+            cols="1-3"
+            item={{ kind: "social", avatar: "image", rating: "hide", mark: "none" }}
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.social))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-featured-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="featured"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-featured-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.featured}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-featured"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="single"
+            cols="1-3"
+            item={{ kind: "plain", avatar: "image", rating: "hide", mark: "icon" }}
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-grid2-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="grid2"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-grid2-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.grid2}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-grid2"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="grid"
+            cols="1-2"
+            item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid2))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-single-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="single"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-single-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.single}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-single"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="single"
+            cols="1-3"
+            item={{ kind: "plain", avatar: "image", rating: "hide", mark: "none" }}
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-stack-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="stack"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-stack-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.stack}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-stack"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="stack"
+            cols="1-3"
+            item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.stack))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-plain-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-plain"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="grid"
+            cols="1-3"
+            item={{ kind: "plain", avatar: "none", rating: "show", mark: "none" }}
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.plain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="testimonials-noRating-label"
+        data-testid="variant"
+        data-block="testimonials"
+        data-variant="noRating"
+      >
+        <Title as={2} size="base" weight="bold" id="testimonials-noRating-label" data-testid="variant-label">
+          {ui.blocks.variants.testimonials.noRating}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TestimonialGrid
+            id="testimonials-noRating"
+            title={ui.marketing.testimonials.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            labels={TESTIMONIALS_LABELS}
+            layout="grid"
+            cols="1-3"
+            item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+            tone="default"
+            density="roomy"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.noRating))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/TimelinePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/TimelinePage.svelte
new file mode 100644
index 0000000..b8ba86c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/TimelinePage.svelte
@@ -0,0 +1,154 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The timeline page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    MilestoneTimeline,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Milestone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+  const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+  const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+          {ui.blocks.themes.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.timeline}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.timeline}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="timeline-split-label"
+        data-testid="variant"
+        data-block="timeline"
+        data-variant="split"
+      >
+        <Title as={2} size="base" weight="bold" id="timeline-split-label" data-testid="variant-label">
+          {ui.blocks.variants.timeline.split}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MilestoneTimeline
+            id="timeline-split"
+            title={ui.company.timeline.title}
+            lead={ui.company.timeline.lead}
+            milestones={milestones}
+            empty={ui.empty.milestones}
+            layout="split"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="timeline-stacked-label"
+        data-testid="variant"
+        data-block="timeline"
+        data-variant="stacked"
+      >
+        <Title as={2} size="base" weight="bold" id="timeline-stacked-label" data-testid="variant-label">
+          {ui.blocks.variants.timeline.stacked}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MilestoneTimeline
+            id="timeline-stacked"
+            title={ui.company.timeline.title}
+            lead={ui.company.timeline.lead}
+            milestones={milestones}
+            empty={ui.empty.milestones}
+            layout="stacked"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.stacked))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="timeline-row-label"
+        data-testid="variant"
+        data-block="timeline"
+        data-variant="row"
+      >
+        <Title as={2} size="base" weight="bold" id="timeline-row-label" data-testid="variant-label">
+          {ui.blocks.variants.timeline.row}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MilestoneTimeline
+            id="timeline-row"
+            title={ui.company.timeline.title}
+            lead={ui.company.timeline.lead}
+            milestones={milestones}
+            empty={ui.empty.milestones}
+            layout="row"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.row))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="timeline-rowMuted-label"
+        data-testid="variant"
+        data-block="timeline"
+        data-variant="rowMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="timeline-rowMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.timeline.rowMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <MilestoneTimeline
+            id="timeline-rowMuted"
+            title={ui.company.timeline.title}
+            lead={ui.company.timeline.lead}
+            milestones={milestones}
+            empty={ui.empty.milestones}
+            layout="row"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.rowMuted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/TourPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/TourPage.svelte
new file mode 100644
index 0000000..995ffab
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/TourPage.svelte
@@ -0,0 +1,155 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The tour page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    TourCallout,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+          {ui.blocks.themes.onboarding.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.tour}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.tour}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="tour-below-label"
+        data-testid="variant"
+        data-block="tour"
+        data-variant="below"
+      >
+        <Title as={2} size="base" weight="bold" id="tour-below-label" data-testid="variant-label">
+          {ui.blocks.variants.tour.below}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TourCallout
+            id="tour-below"
+            title={ui.vibe.tour.title}
+            text={ui.vibe.tour.text}
+            target={ui.vibe.tour.target}
+            position={ui.vibe.tour.position}
+            skip={ui.vibe.tour.skip}
+            next={ui.vibe.tour.next}
+            placement="below"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="tour-above-label"
+        data-testid="variant"
+        data-block="tour"
+        data-variant="above"
+      >
+        <Title as={2} size="base" weight="bold" id="tour-above-label" data-testid="variant-label">
+          {ui.blocks.variants.tour.above}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TourCallout
+            id="tour-above"
+            title={ui.vibe.tour.title}
+            text={ui.vibe.tour.text}
+            target={ui.vibe.tour.target}
+            position={ui.vibe.tour.position}
+            skip={ui.vibe.tour.skip}
+            next={ui.vibe.tour.next}
+            placement="above"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="tour-end-label"
+        data-testid="variant"
+        data-block="tour"
+        data-variant="end"
+      >
+        <Title as={2} size="base" weight="bold" id="tour-end-label" data-testid="variant-label">
+          {ui.blocks.variants.tour.end}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TourCallout
+            id="tour-end"
+            title={ui.vibe.tour.title}
+            text={ui.vibe.tour.text}
+            target={ui.vibe.tour.target}
+            position={ui.vibe.tour.position}
+            skip={ui.vibe.tour.skip}
+            next={ui.vibe.tour.next}
+            placement="end"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="tour-muted-label"
+        data-testid="variant"
+        data-block="tour"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="tour-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.tour.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <TourCallout
+            id="tour-muted"
+            title={ui.vibe.tour.title}
+            text={ui.vibe.tour.text}
+            target={ui.vibe.tour.target}
+            position={ui.vibe.tour.position}
+            skip={ui.vibe.tour.skip}
+            next={ui.vibe.tour.next}
+            placement="below"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/UsagePage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/UsagePage.svelte
new file mode 100644
index 0000000..10b4cff
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/UsagePage.svelte
@@ -0,0 +1,161 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The usage page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    UsageCalculator,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const USAGE_SLIDER = { min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit } as const;
+  const USAGE_PRICE = { rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.usage}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.usage}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="usage-card-label"
+        data-testid="variant"
+        data-block="usage"
+        data-variant="card"
+      >
+        <Title as={2} size="base" weight="bold" id="usage-card-label" data-testid="variant-label">
+          {ui.blocks.variants.usage.card}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <UsageCalculator
+            id="usage-card"
+            title={ui.vibe.usage.title}
+            text={ui.vibe.usage.text}
+            usage={5000}
+            slider={USAGE_SLIDER}
+            price={USAGE_PRICE}
+            cta={ui.vibe.usage.cta}
+            href="#/"
+            layout="card"
+            ends="show"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="usage-plain-label"
+        data-testid="variant"
+        data-block="usage"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="usage-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.usage.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <UsageCalculator
+            id="usage-plain"
+            title={ui.vibe.usage.title}
+            text={ui.vibe.usage.text}
+            usage={5000}
+            slider={USAGE_SLIDER}
+            price={USAGE_PRICE}
+            cta={ui.vibe.usage.cta}
+            href="#/"
+            layout="plain"
+            ends="show"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.plain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="usage-noEnds-label"
+        data-testid="variant"
+        data-block="usage"
+        data-variant="noEnds"
+      >
+        <Title as={2} size="base" weight="bold" id="usage-noEnds-label" data-testid="variant-label">
+          {ui.blocks.variants.usage.noEnds}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <UsageCalculator
+            id="usage-noEnds"
+            title={ui.vibe.usage.title}
+            text={ui.vibe.usage.text}
+            usage={5000}
+            slider={USAGE_SLIDER}
+            price={USAGE_PRICE}
+            cta={ui.vibe.usage.cta}
+            href="#/"
+            layout="card"
+            ends="hide"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.noEnds))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="usage-muted-label"
+        data-testid="variant"
+        data-block="usage"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="usage-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.usage.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <UsageCalculator
+            id="usage-muted"
+            title={ui.vibe.usage.title}
+            text={ui.vibe.usage.text}
+            usage={5000}
+            slider={USAGE_SLIDER}
+            price={USAGE_PRICE}
+            cta={ui.vibe.usage.cta}
+            href="#/"
+            layout="card"
+            ends="show"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/UspPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/UspPage.svelte
new file mode 100644
index 0000000..48f5d10
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/UspPage.svelte
@@ -0,0 +1,171 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The usp page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    UspStrip,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+  const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.usp}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.usp}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="usp-strip-label"
+        data-testid="variant"
+        data-block="usp"
+        data-variant="strip"
+      >
+        <Title as={2} size="base" weight="bold" id="usp-strip-label" data-testid="variant-label">
+          {ui.blocks.variants.usp.strip}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <UspStrip
+            id="usp-strip"
+            perks={perks}
+            empty={ui.empty.perks}
+            layout="strip"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="usp-cards-label"
+        data-testid="variant"
+        data-block="usp"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="usp-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.usp.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <UspStrip
+            id="usp-cards"
+            perks={perks}
+            empty={ui.empty.perks}
+            layout="cards"
+            tone="default"
+            density="default"
+            title={ui.commerce.usp.title}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="usp-stripCompact-label"
+        data-testid="variant"
+        data-block="usp"
+        data-variant="stripCompact"
+      >
+        <Title as={2} size="base" weight="bold" id="usp-stripCompact-label" data-testid="variant-label">
+          {ui.blocks.variants.usp.stripCompact}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <UspStrip
+            id="usp-stripCompact"
+            perks={perks}
+            empty={ui.empty.perks}
+            layout="strip"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.stripCompact))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="usp-bar-label"
+        data-testid="variant"
+        data-block="usp"
+        data-variant="bar"
+      >
+        <Title as={2} size="base" weight="bold" id="usp-bar-label" data-testid="variant-label">
+          {ui.blocks.variants.usp.bar}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <UspStrip
+            id="usp-bar"
+            perks={perks}
+            empty={ui.empty.perks}
+            layout="bar"
+            tone="default"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.bar))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="usp-barMuted-label"
+        data-testid="variant"
+        data-block="usp"
+        data-variant="barMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="usp-barMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.usp.barMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <UspStrip
+            id="usp-barMuted"
+            perks={perks}
+            empty={ui.empty.perks}
+            layout="bar"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.barMuted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/VideomodalPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/VideomodalPage.svelte
new file mode 100644
index 0000000..515cddf
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/VideomodalPage.svelte
@@ -0,0 +1,162 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The videomodal page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    VideoModal,
+    tpl,
+    uniqLabel,
+    type Chapter,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+  const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+  const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+          {ui.blocks.themes.onboarding.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.videomodal}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.videomodal}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="videomodal-default-label"
+        data-testid="variant"
+        data-block="videomodal"
+        data-variant="default"
+      >
+        <Title as={2} size="base" weight="bold" id="videomodal-default-label" data-testid="variant-label">
+          {ui.blocks.variants.videomodal.default}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <VideoModal
+            id="videomodal-default"
+            title={ui.vibe.modal.title}
+            text={ui.vibe.modal.text}
+            close={ui.vibe.modal.close}
+            play={ui.vibe.modal.play}
+            chaptersTitle={ui.vibe.modal.chapters}
+            chapters={chapters}
+            size="default"
+            outline="none"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="videomodal-wide-label"
+        data-testid="variant"
+        data-block="videomodal"
+        data-variant="wide"
+      >
+        <Title as={2} size="base" weight="bold" id="videomodal-wide-label" data-testid="variant-label">
+          {ui.blocks.variants.videomodal.wide}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <VideoModal
+            id="videomodal-wide"
+            title={ui.vibe.modal.title}
+            text={ui.vibe.modal.text}
+            close={ui.vibe.modal.close}
+            play={ui.vibe.modal.play}
+            chaptersTitle={ui.vibe.modal.chapters}
+            chapters={chapters}
+            size="wide"
+            outline="none"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.wide))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="videomodal-chapters-label"
+        data-testid="variant"
+        data-block="videomodal"
+        data-variant="chapters"
+      >
+        <Title as={2} size="base" weight="bold" id="videomodal-chapters-label" data-testid="variant-label">
+          {ui.blocks.variants.videomodal.chapters}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <VideoModal
+            id="videomodal-chapters"
+            title={ui.vibe.modal.title}
+            text={ui.vibe.modal.text}
+            close={ui.vibe.modal.close}
+            play={ui.vibe.modal.play}
+            chaptersTitle={ui.vibe.modal.chapters}
+            chapters={chapters}
+            size="default"
+            outline="chapters"
+            tone="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="videomodal-muted-label"
+        data-testid="variant"
+        data-block="videomodal"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="videomodal-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.videomodal.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <VideoModal
+            id="videomodal-muted"
+            title={ui.vibe.modal.title}
+            text={ui.vibe.modal.text}
+            close={ui.vibe.modal.close}
+            play={ui.vibe.modal.play}
+            chaptersTitle={ui.vibe.modal.chapters}
+            chapters={chapters}
+            size="default"
+            outline="none"
+            tone="muted"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/VideosPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/VideosPage.svelte
new file mode 100644
index 0000000..23d7622
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/VideosPage.svelte
@@ -0,0 +1,172 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The videos page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    VideoGrid,
+    tpl,
+    uniqLabel,
+    type Quote,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+          {ui.blocks.themes.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.videos}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.videos}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="videos-grid3-label"
+        data-testid="variant"
+        data-block="videos"
+        data-variant="grid3"
+      >
+        <Title as={2} size="base" weight="bold" id="videos-grid3-label" data-testid="variant-label">
+          {ui.blocks.variants.videos.grid3}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <VideoGrid
+            id="videos-grid3"
+            title={ui.vibe.videos.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            playLabel={ui.vibe.videos.play}
+            byLine={ui.testimonials.byLine}
+            cols="1-3"
+            caption="below"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="videos-grid2-label"
+        data-testid="variant"
+        data-block="videos"
+        data-variant="grid2"
+      >
+        <Title as={2} size="base" weight="bold" id="videos-grid2-label" data-testid="variant-label">
+          {ui.blocks.variants.videos.grid2}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <VideoGrid
+            id="videos-grid2"
+            title={ui.vibe.videos.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            playLabel={ui.vibe.videos.play}
+            byLine={ui.testimonials.byLine}
+            cols="1-2"
+            caption="below"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid2))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="videos-overlay-label"
+        data-testid="variant"
+        data-block="videos"
+        data-variant="overlay"
+      >
+        <Title as={2} size="base" weight="bold" id="videos-overlay-label" data-testid="variant-label">
+          {ui.blocks.variants.videos.overlay}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <VideoGrid
+            id="videos-overlay"
+            title={ui.vibe.videos.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            playLabel={ui.vibe.videos.play}
+            byLine={ui.testimonials.byLine}
+            cols="1-3"
+            caption="overlay"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="videos-muted-label"
+        data-testid="variant"
+        data-block="videos"
+        data-variant="muted"
+      >
+        <Title as={2} size="base" weight="bold" id="videos-muted-label" data-testid="variant-label">
+          {ui.blocks.variants.videos.muted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <VideoGrid
+            id="videos-muted"
+            title={ui.vibe.videos.title}
+            quotes={testimonials}
+            empty={ui.empty.quotes}
+            playLabel={ui.vibe.videos.play}
+            byLine={ui.testimonials.byLine}
+            cols="1-3"
+            caption="below"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.muted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/WizardPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/WizardPage.svelte
new file mode 100644
index 0000000..576bd45
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/WizardPage.svelte
@@ -0,0 +1,161 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The wizard page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    SignupWizard,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type WizardStep,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+  const WIZARD_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "icon": "metadata.icon.value",
+    "fieldA": "metadata.fieldA.value",
+    "fieldB": "metadata.fieldB.value",
+  } as const;
+
+  const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+          {ui.blocks.themes.account.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.wizard}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.wizard}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="wizard-bar-label"
+        data-testid="variant"
+        data-block="wizard"
+        data-variant="bar"
+      >
+        <Title as={2} size="base" weight="bold" id="wizard-bar-label" data-testid="variant-label">
+          {ui.blocks.variants.wizard.bar}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SignupWizard
+            id="wizard-bar"
+            title={ui.vibe.wizard.title}
+            steps={wizard}
+            labels={ui.vibe.wizard.labels}
+            current={1}
+            progress="bar"
+            layout="card"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="wizard-list-label"
+        data-testid="variant"
+        data-block="wizard"
+        data-variant="list"
+      >
+        <Title as={2} size="base" weight="bold" id="wizard-list-label" data-testid="variant-label">
+          {ui.blocks.variants.wizard.list}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SignupWizard
+            id="wizard-list"
+            title={ui.vibe.wizard.title}
+            steps={wizard}
+            labels={ui.vibe.wizard.labels}
+            current={1}
+            progress="list"
+            layout="card"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="wizard-plain-label"
+        data-testid="variant"
+        data-block="wizard"
+        data-variant="plain"
+      >
+        <Title as={2} size="base" weight="bold" id="wizard-plain-label" data-testid="variant-label">
+          {ui.blocks.variants.wizard.plain}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SignupWizard
+            id="wizard-plain"
+            title={ui.vibe.wizard.title}
+            steps={wizard}
+            labels={ui.vibe.wizard.labels}
+            current={1}
+            progress="bar"
+            layout="plain"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.plain))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="wizard-second-label"
+        data-testid="variant"
+        data-block="wizard"
+        data-variant="second"
+      >
+        <Title as={2} size="base" weight="bold" id="wizard-second-label" data-testid="variant-label">
+          {ui.blocks.variants.wizard.second}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <SignupWizard
+            id="wizard-second"
+            title={ui.vibe.wizard.title}
+            steps={wizard}
+            labels={ui.vibe.wizard.labels}
+            current={2}
+            progress="list"
+            layout="plain"
+            level={2}
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.second))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/BlocksScreen/ZonesPage.svelte b/apps/host-svelte/xgen/screens/BlocksScreen/ZonesPage.svelte
new file mode 100644
index 0000000..c1732a2
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/BlocksScreen/ZonesPage.svelte
@@ -0,0 +1,141 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The zones page of BlocksScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    ZoneTable,
+    tpl,
+    uniqLabel,
+    type Zone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+  const ZONES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "area": "metadata.area.value",
+    "price": "metadata.price.value",
+    "freeFrom": "metadata.freeFrom.value",
+    "minOrder": "metadata.minOrder.value",
+    "time": "metadata.time.value",
+    "express": "metadata.express.value",
+    "currency": "metadata.currency.value",
+  } as const;
+
+  const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.blocks.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+          {ui.blocks.themes.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="block-title">
+          {ui.blocks.names.zones}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.blocks.docs.zones}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="zones-table-label"
+        data-testid="variant"
+        data-block="zones"
+        data-variant="table"
+      >
+        <Title as={2} size="base" weight="bold" id="zones-table-label" data-testid="variant-label">
+          {ui.blocks.variants.zones.table}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ZoneTable
+            id="zones-table"
+            title={ui.commerce.zones.title}
+            lead={ui.commerce.zones.lead}
+            zones={zones}
+            empty={ui.empty.zones}
+            labels={ui.commerce.zones}
+            layout="table"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="zones-cards-label"
+        data-testid="variant"
+        data-block="zones"
+        data-variant="cards"
+      >
+        <Title as={2} size="base" weight="bold" id="zones-cards-label" data-testid="variant-label">
+          {ui.blocks.variants.zones.cards}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ZoneTable
+            id="zones-cards"
+            title={ui.commerce.zones.title}
+            lead={ui.commerce.zones.lead}
+            zones={zones}
+            empty={ui.empty.zones}
+            labels={ui.commerce.zones}
+            layout="cards"
+            tone="default"
+            density="default"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.cards))}
+          />
+        </Box>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="zones-tableMuted-label"
+        data-testid="variant"
+        data-block="zones"
+        data-variant="tableMuted"
+      >
+        <Title as={2} size="base" weight="bold" id="zones-tableMuted-label" data-testid="variant-label">
+          {ui.blocks.variants.zones.tableMuted}
+        </Title>
+        <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+          <ZoneTable
+            id="zones-tableMuted"
+            title={ui.commerce.zones.title}
+            lead={ui.commerce.zones.lead}
+            zones={zones}
+            empty={ui.empty.zones}
+            labels={ui.commerce.zones}
+            layout="table"
+            tone="muted"
+            density="compact"
+            landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.tableMuted))}
+          />
+        </Box>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen.svelte b/apps/host-svelte/xgen/screens/CatalogScreen.svelte
new file mode 100644
index 0000000..b9c6d44
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen.svelte
@@ -0,0 +1,346 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!--
+  The catalog: the blocks of the kit by section and category (Marketing, Content, Promo, Support, Commerce, App
+  and dashboard), one page per category with every variant of its blocks, and whole pages composed of blocks.
+  Built from the catalog tree and the blocks.
+-->
+<script lang="ts">
+  import { Block } from "@ui8kit/svelte-ui";
+  import MarketingNavigationPage from "./CatalogScreen/MarketingNavigationPage.svelte";
+  import MarketingHeroPage from "./CatalogScreen/MarketingHeroPage.svelte";
+  import MarketingHeroSplitPage from "./CatalogScreen/MarketingHeroSplitPage.svelte";
+  import MarketingPageHeadPage from "./CatalogScreen/MarketingPageHeadPage.svelte";
+  import MarketingPageTrailPage from "./CatalogScreen/MarketingPageTrailPage.svelte";
+  import MarketingFeaturesPage from "./CatalogScreen/MarketingFeaturesPage.svelte";
+  import MarketingFeaturesSplitPage from "./CatalogScreen/MarketingFeaturesSplitPage.svelte";
+  import MarketingFeatureCardsPage from "./CatalogScreen/MarketingFeatureCardsPage.svelte";
+  import MarketingMediaListPage from "./CatalogScreen/MarketingMediaListPage.svelte";
+  import MarketingShowcasesPage from "./CatalogScreen/MarketingShowcasesPage.svelte";
+  import MarketingHowItWorksPage from "./CatalogScreen/MarketingHowItWorksPage.svelte";
+  import MarketingProofPage from "./CatalogScreen/MarketingProofPage.svelte";
+  import MarketingStatsPage from "./CatalogScreen/MarketingStatsPage.svelte";
+  import MarketingTestimonialsPage from "./CatalogScreen/MarketingTestimonialsPage.svelte";
+  import MarketingTestimonialsSplitPage from "./CatalogScreen/MarketingTestimonialsSplitPage.svelte";
+  import MarketingPricingPage from "./CatalogScreen/MarketingPricingPage.svelte";
+  import MarketingPricingToolsPage from "./CatalogScreen/MarketingPricingToolsPage.svelte";
+  import MarketingFaqPage from "./CatalogScreen/MarketingFaqPage.svelte";
+  import MarketingCtaPage from "./CatalogScreen/MarketingCtaPage.svelte";
+  import MarketingCtaProofPage from "./CatalogScreen/MarketingCtaProofPage.svelte";
+  import MarketingTeamPage from "./CatalogScreen/MarketingTeamPage.svelte";
+  import MarketingAboutPage from "./CatalogScreen/MarketingAboutPage.svelte";
+  import MarketingPortfolioPage from "./CatalogScreen/MarketingPortfolioPage.svelte";
+  import MarketingCareersPage from "./CatalogScreen/MarketingCareersPage.svelte";
+  import MarketingGalleryPage from "./CatalogScreen/MarketingGalleryPage.svelte";
+  import MarketingFooterPage from "./CatalogScreen/MarketingFooterPage.svelte";
+  import MarketingFooterSplitPage from "./CatalogScreen/MarketingFooterSplitPage.svelte";
+  import ContentBlogPage from "./CatalogScreen/ContentBlogPage.svelte";
+  import ContentPostShowcasePage from "./CatalogScreen/ContentPostShowcasePage.svelte";
+  import ContentPostHeaderPage from "./CatalogScreen/ContentPostHeaderPage.svelte";
+  import ContentPostHeaderSplitPage from "./CatalogScreen/ContentPostHeaderSplitPage.svelte";
+  import ContentArticlePage from "./CatalogScreen/ContentArticlePage.svelte";
+  import ContentTimelinePage from "./CatalogScreen/ContentTimelinePage.svelte";
+  import ContentStoryTabsPage from "./CatalogScreen/ContentStoryTabsPage.svelte";
+  import PromoBannersPage from "./CatalogScreen/PromoBannersPage.svelte";
+  import PromoNewsletterPage from "./CatalogScreen/PromoNewsletterPage.svelte";
+  import SupportContactPage from "./CatalogScreen/SupportContactPage.svelte";
+  import SupportStatesPage from "./CatalogScreen/SupportStatesPage.svelte";
+  import CommerceStorefrontPage from "./CatalogScreen/CommerceStorefrontPage.svelte";
+  import CommerceCategoriesPage from "./CatalogScreen/CommerceCategoriesPage.svelte";
+  import CommerceProductsPage from "./CatalogScreen/CommerceProductsPage.svelte";
+  import CommerceProductPage from "./CatalogScreen/CommerceProductPage.svelte";
+  import CommerceCartPage from "./CatalogScreen/CommerceCartPage.svelte";
+  import CommerceCheckoutPage from "./CatalogScreen/CommerceCheckoutPage.svelte";
+  import CommerceDeliveryPage from "./CatalogScreen/CommerceDeliveryPage.svelte";
+  import CommerceOrdersPage from "./CatalogScreen/CommerceOrdersPage.svelte";
+  import AppShellPage from "./CatalogScreen/AppShellPage.svelte";
+  import AppDashboardShellsPage from "./CatalogScreen/AppDashboardShellsPage.svelte";
+  import AppWidgetsPage from "./CatalogScreen/AppWidgetsPage.svelte";
+  import AppBoardsPage from "./CatalogScreen/AppBoardsPage.svelte";
+  import AppStatesPage from "./CatalogScreen/AppStatesPage.svelte";
+  import AppAuthPage from "./CatalogScreen/AppAuthPage.svelte";
+  import AppAuthPagesPage from "./CatalogScreen/AppAuthPagesPage.svelte";
+  import AppSettingsPage from "./CatalogScreen/AppSettingsPage.svelte";
+  import AppOnboardingPage from "./CatalogScreen/AppOnboardingPage.svelte";
+  import AppGuidancePage from "./CatalogScreen/AppGuidancePage.svelte";
+  import PageSaasLandingPage from "./CatalogScreen/PageSaasLandingPage.svelte";
+  import PageCompanyPage from "./CatalogScreen/PageCompanyPage.svelte";
+  import PagePortfolioPage from "./CatalogScreen/PagePortfolioPage.svelte";
+  import PageStoreHomePage from "./CatalogScreen/PageStoreHomePage.svelte";
+  import PageStoreHome2Page from "./CatalogScreen/PageStoreHome2Page.svelte";
+  import PageStoreCatalogPage from "./CatalogScreen/PageStoreCatalogPage.svelte";
+  import PageProductDetailPage from "./CatalogScreen/PageProductDetailPage.svelte";
+  import PageCartPage from "./CatalogScreen/PageCartPage.svelte";
+  import PageCheckoutPage from "./CatalogScreen/PageCheckoutPage.svelte";
+  import PageShellClassicPage from "./CatalogScreen/PageShellClassicPage.svelte";
+  import PageShellInsetPage from "./CatalogScreen/PageShellInsetPage.svelte";
+  import PageShellRailPage from "./CatalogScreen/PageShellRailPage.svelte";
+  import PageShellRailFooterPage from "./CatalogScreen/PageShellRailFooterPage.svelte";
+  import PageShellCollapsedPage from "./CatalogScreen/PageShellCollapsedPage.svelte";
+  import PageShellTwoLevelPage from "./CatalogScreen/PageShellTwoLevelPage.svelte";
+  import PageShellTwoLevelFullPage from "./CatalogScreen/PageShellTwoLevelFullPage.svelte";
+  import PageShellEndPage from "./CatalogScreen/PageShellEndPage.svelte";
+  import PageShellRailEndPage from "./CatalogScreen/PageShellRailEndPage.svelte";
+  import PageShellTopOnlyPage from "./CatalogScreen/PageShellTopOnlyPage.svelte";
+  import PageShellSideOnlyPage from "./CatalogScreen/PageShellSideOnlyPage.svelte";
+  import PageShellCollapsedEndPage from "./CatalogScreen/PageShellCollapsedEndPage.svelte";
+  import IndexPage from "./CatalogScreen/IndexPage.svelte";
+  import PagesPage from "./CatalogScreen/PagesPage.svelte";
+  import NotfoundPage from "./CatalogScreen/NotfoundPage.svelte";
+  import ScreenHeader from "./CatalogScreen/ScreenHeader.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const ROUTES = [
+    {"path":"","area":"index"},
+    {"path":"pages","area":"pages"},
+    {"path":"marketing-navigation","area":"marketing-navigation"},
+    {"path":"marketing-hero","area":"marketing-hero"},
+    {"path":"marketing-hero-split","area":"marketing-hero-split"},
+    {"path":"marketing-page-head","area":"marketing-page-head"},
+    {"path":"marketing-page-trail","area":"marketing-page-trail"},
+    {"path":"marketing-features","area":"marketing-features"},
+    {"path":"marketing-features-split","area":"marketing-features-split"},
+    {"path":"marketing-feature-cards","area":"marketing-feature-cards"},
+    {"path":"marketing-media-list","area":"marketing-media-list"},
+    {"path":"marketing-showcases","area":"marketing-showcases"},
+    {"path":"marketing-how-it-works","area":"marketing-how-it-works"},
+    {"path":"marketing-proof","area":"marketing-proof"},
+    {"path":"marketing-stats","area":"marketing-stats"},
+    {"path":"marketing-testimonials","area":"marketing-testimonials"},
+    {"path":"marketing-testimonials-split","area":"marketing-testimonials-split"},
+    {"path":"marketing-pricing","area":"marketing-pricing"},
+    {"path":"marketing-pricing-tools","area":"marketing-pricing-tools"},
+    {"path":"marketing-faq","area":"marketing-faq"},
+    {"path":"marketing-cta","area":"marketing-cta"},
+    {"path":"marketing-cta-proof","area":"marketing-cta-proof"},
+    {"path":"marketing-team","area":"marketing-team"},
+    {"path":"marketing-about","area":"marketing-about"},
+    {"path":"marketing-portfolio","area":"marketing-portfolio"},
+    {"path":"marketing-careers","area":"marketing-careers"},
+    {"path":"marketing-gallery","area":"marketing-gallery"},
+    {"path":"marketing-footer","area":"marketing-footer"},
+    {"path":"marketing-footer-split","area":"marketing-footer-split"},
+    {"path":"content-blog","area":"content-blog"},
+    {"path":"content-post-showcase","area":"content-post-showcase"},
+    {"path":"content-post-header","area":"content-post-header"},
+    {"path":"content-post-header-split","area":"content-post-header-split"},
+    {"path":"content-article","area":"content-article"},
+    {"path":"content-timeline","area":"content-timeline"},
+    {"path":"content-story-tabs","area":"content-story-tabs"},
+    {"path":"promo-banners","area":"promo-banners"},
+    {"path":"promo-newsletter","area":"promo-newsletter"},
+    {"path":"support-contact","area":"support-contact"},
+    {"path":"support-states","area":"support-states"},
+    {"path":"commerce-storefront","area":"commerce-storefront"},
+    {"path":"commerce-categories","area":"commerce-categories"},
+    {"path":"commerce-products","area":"commerce-products"},
+    {"path":"commerce-product","area":"commerce-product"},
+    {"path":"commerce-cart","area":"commerce-cart"},
+    {"path":"commerce-checkout","area":"commerce-checkout"},
+    {"path":"commerce-delivery","area":"commerce-delivery"},
+    {"path":"commerce-orders","area":"commerce-orders"},
+    {"path":"app-shell","area":"app-shell"},
+    {"path":"app-dashboard-shells","area":"app-dashboard-shells"},
+    {"path":"app-widgets","area":"app-widgets"},
+    {"path":"app-boards","area":"app-boards"},
+    {"path":"app-states","area":"app-states"},
+    {"path":"app-auth","area":"app-auth"},
+    {"path":"app-auth-pages","area":"app-auth-pages"},
+    {"path":"app-settings","area":"app-settings"},
+    {"path":"app-onboarding","area":"app-onboarding"},
+    {"path":"app-guidance","area":"app-guidance"},
+    {"path":"page-saas-landing","area":"page-saas-landing"},
+    {"path":"page-company","area":"page-company"},
+    {"path":"page-portfolio","area":"page-portfolio"},
+    {"path":"page-store-home","area":"page-store-home"},
+    {"path":"page-store-home-2","area":"page-store-home-2"},
+    {"path":"page-store-catalog","area":"page-store-catalog"},
+    {"path":"page-product-detail","area":"page-product-detail"},
+    {"path":"page-cart","area":"page-cart"},
+    {"path":"page-checkout","area":"page-checkout"},
+    {"path":"page-shell-classic","area":"page-shell-classic"},
+    {"path":"page-shell-inset","area":"page-shell-inset"},
+    {"path":"page-shell-rail","area":"page-shell-rail"},
+    {"path":"page-shell-rail-footer","area":"page-shell-rail-footer"},
+    {"path":"page-shell-collapsed","area":"page-shell-collapsed"},
+    {"path":"page-shell-two-level","area":"page-shell-two-level"},
+    {"path":"page-shell-two-level-full","area":"page-shell-two-level-full"},
+    {"path":"page-shell-end","area":"page-shell-end"},
+    {"path":"page-shell-rail-end","area":"page-shell-rail-end"},
+    {"path":"page-shell-top-only","area":"page-shell-top-only"},
+    {"path":"page-shell-side-only","area":"page-shell-side-only"},
+    {"path":"page-shell-collapsed-end","area":"page-shell-collapsed-end"},
+  ] as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "notfound", params: {} as Record<string, string> });
+  const actions = { toggleTheme };
+</script>
+
+<ScreenHeader />
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "index"}
+    <IndexPage />
+  {:else if route.area === "pages"}
+    <PagesPage />
+  {:else if route.area === "marketing-navigation"}
+    <MarketingNavigationPage />
+  {:else if route.area === "marketing-hero"}
+    <MarketingHeroPage />
+  {:else if route.area === "marketing-hero-split"}
+    <MarketingHeroSplitPage />
+  {:else if route.area === "marketing-page-head"}
+    <MarketingPageHeadPage />
+  {:else if route.area === "marketing-page-trail"}
+    <MarketingPageTrailPage />
+  {:else if route.area === "marketing-features"}
+    <MarketingFeaturesPage />
+  {:else if route.area === "marketing-features-split"}
+    <MarketingFeaturesSplitPage />
+  {:else if route.area === "marketing-feature-cards"}
+    <MarketingFeatureCardsPage />
+  {:else if route.area === "marketing-media-list"}
+    <MarketingMediaListPage />
+  {:else if route.area === "marketing-showcases"}
+    <MarketingShowcasesPage />
+  {:else if route.area === "marketing-how-it-works"}
+    <MarketingHowItWorksPage />
+  {:else if route.area === "marketing-proof"}
+    <MarketingProofPage />
+  {:else if route.area === "marketing-stats"}
+    <MarketingStatsPage />
+  {:else if route.area === "marketing-testimonials"}
+    <MarketingTestimonialsPage />
+  {:else if route.area === "marketing-testimonials-split"}
+    <MarketingTestimonialsSplitPage />
+  {:else if route.area === "marketing-pricing"}
+    <MarketingPricingPage />
+  {:else if route.area === "marketing-pricing-tools"}
+    <MarketingPricingToolsPage />
+  {:else if route.area === "marketing-faq"}
+    <MarketingFaqPage />
+  {:else if route.area === "marketing-cta"}
+    <MarketingCtaPage />
+  {:else if route.area === "marketing-cta-proof"}
+    <MarketingCtaProofPage />
+  {:else if route.area === "marketing-team"}
+    <MarketingTeamPage />
+  {:else if route.area === "marketing-about"}
+    <MarketingAboutPage />
+  {:else if route.area === "marketing-portfolio"}
+    <MarketingPortfolioPage />
+  {:else if route.area === "marketing-careers"}
+    <MarketingCareersPage />
+  {:else if route.area === "marketing-gallery"}
+    <MarketingGalleryPage />
+  {:else if route.area === "marketing-footer"}
+    <MarketingFooterPage />
+  {:else if route.area === "marketing-footer-split"}
+    <MarketingFooterSplitPage />
+  {:else if route.area === "content-blog"}
+    <ContentBlogPage />
+  {:else if route.area === "content-post-showcase"}
+    <ContentPostShowcasePage />
+  {:else if route.area === "content-post-header"}
+    <ContentPostHeaderPage />
+  {:else if route.area === "content-post-header-split"}
+    <ContentPostHeaderSplitPage />
+  {:else if route.area === "content-article"}
+    <ContentArticlePage />
+  {:else if route.area === "content-timeline"}
+    <ContentTimelinePage />
+  {:else if route.area === "content-story-tabs"}
+    <ContentStoryTabsPage />
+  {:else if route.area === "promo-banners"}
+    <PromoBannersPage />
+  {:else if route.area === "promo-newsletter"}
+    <PromoNewsletterPage />
+  {:else if route.area === "support-contact"}
+    <SupportContactPage />
+  {:else if route.area === "support-states"}
+    <SupportStatesPage />
+  {:else if route.area === "commerce-storefront"}
+    <CommerceStorefrontPage />
+  {:else if route.area === "commerce-categories"}
+    <CommerceCategoriesPage />
+  {:else if route.area === "commerce-products"}
+    <CommerceProductsPage />
+  {:else if route.area === "commerce-product"}
+    <CommerceProductPage />
+  {:else if route.area === "commerce-cart"}
+    <CommerceCartPage />
+  {:else if route.area === "commerce-checkout"}
+    <CommerceCheckoutPage />
+  {:else if route.area === "commerce-delivery"}
+    <CommerceDeliveryPage />
+  {:else if route.area === "commerce-orders"}
+    <CommerceOrdersPage />
+  {:else if route.area === "app-shell"}
+    <AppShellPage />
+  {:else if route.area === "app-dashboard-shells"}
+    <AppDashboardShellsPage />
+  {:else if route.area === "app-widgets"}
+    <AppWidgetsPage />
+  {:else if route.area === "app-boards"}
+    <AppBoardsPage />
+  {:else if route.area === "app-states"}
+    <AppStatesPage />
+  {:else if route.area === "app-auth"}
+    <AppAuthPage />
+  {:else if route.area === "app-auth-pages"}
+    <AppAuthPagesPage />
+  {:else if route.area === "app-settings"}
+    <AppSettingsPage />
+  {:else if route.area === "app-onboarding"}
+    <AppOnboardingPage />
+  {:else if route.area === "app-guidance"}
+    <AppGuidancePage />
+  {:else if route.area === "page-saas-landing"}
+    <PageSaasLandingPage />
+  {:else if route.area === "page-company"}
+    <PageCompanyPage />
+  {:else if route.area === "page-portfolio"}
+    <PagePortfolioPage />
+  {:else if route.area === "page-store-home"}
+    <PageStoreHomePage />
+  {:else if route.area === "page-store-home-2"}
+    <PageStoreHome2Page />
+  {:else if route.area === "page-store-catalog"}
+    <PageStoreCatalogPage />
+  {:else if route.area === "page-product-detail"}
+    <PageProductDetailPage />
+  {:else if route.area === "page-cart"}
+    <PageCartPage />
+  {:else if route.area === "page-checkout"}
+    <PageCheckoutPage />
+  {:else if route.area === "page-shell-classic"}
+    <PageShellClassicPage />
+  {:else if route.area === "page-shell-inset"}
+    <PageShellInsetPage />
+  {:else if route.area === "page-shell-rail"}
+    <PageShellRailPage />
+  {:else if route.area === "page-shell-rail-footer"}
+    <PageShellRailFooterPage />
+  {:else if route.area === "page-shell-collapsed"}
+    <PageShellCollapsedPage />
+  {:else if route.area === "page-shell-two-level"}
+    <PageShellTwoLevelPage />
+  {:else if route.area === "page-shell-two-level-full"}
+    <PageShellTwoLevelFullPage />
+  {:else if route.area === "page-shell-end"}
+    <PageShellEndPage />
+  {:else if route.area === "page-shell-rail-end"}
+    <PageShellRailEndPage />
+  {:else if route.area === "page-shell-top-only"}
+    <PageShellTopOnlyPage />
+  {:else if route.area === "page-shell-side-only"}
+    <PageShellSideOnlyPage />
+  {:else if route.area === "page-shell-collapsed-end"}
+    <PageShellCollapsedEndPage />
+  {:else}
+    <NotfoundPage />
+  {/if}
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppAuthPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppAuthPage.svelte
new file mode 100644
index 0000000..d768a9a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppAuthPage.svelte
@@ -0,0 +1,452 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-auth page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    AuthCard,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    SignupWizard,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type WizardStep,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+  const WIZARD_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "icon": "metadata.icon.value",
+    "fieldA": "metadata.fieldA.value",
+    "fieldB": "metadata.fieldB.value",
+  } as const;
+
+  const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appAuth}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 12)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-auth-title"
+        data-testid="catalog-block"
+        data-block="auth"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-auth-title">
+            {ui.blocks.names.auth}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.auth}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-signin-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="signin"
+        >
+          <Title as={3} size="base" weight="bold" id="auth-signin-label" data-testid="variant-label">
+            {ui.blocks.variants.auth.signin}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-signin"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchText={ui.auth.signin.switchText}
+                switchLink={ui.auth.signin.switchLink}
+                switchHref="#/"
+                labels={ui.auth.labels}
+                mode="signin"
+                layout="card"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))}
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-magic-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="magic"
+        >
+          <Title as={3} size="base" weight="bold" id="auth-magic-label" data-testid="variant-label">
+            {ui.blocks.variants.auth.magic}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-magic"
+                title={ui.auth.magic.title}
+                text={ui.auth.magic.text}
+                submit={ui.auth.magic.submit}
+                switchText={ui.auth.magic.switchText}
+                switchLink={ui.auth.magic.switchLink}
+                switchHref="#/"
+                labels={ui.auth.labels}
+                mode="magic"
+                layout="card"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.magic))}
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-socialFirst-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="socialFirst"
+        >
+          <Title as={3} size="base" weight="bold" id="auth-socialFirst-label" data-testid="variant-label">
+            {ui.blocks.variants.auth.socialFirst}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-socialFirst"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchText={ui.auth.signin.switchText}
+                switchLink={ui.auth.signin.switchLink}
+                switchHref="#/"
+                labels={ui.auth.labels}
+                mode="signin"
+                layout="card"
+                social="first"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.socialFirst))}
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-signup-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="signup"
+        >
+          <Title as={3} size="base" weight="bold" id="auth-signup-label" data-testid="variant-label">
+            {ui.blocks.variants.auth.signup}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-signup"
+                title={ui.auth.signup.title}
+                text={ui.auth.signup.text}
+                submit={ui.auth.signup.submit}
+                switchText={ui.auth.signup.switchText}
+                switchLink={ui.auth.signup.switchLink}
+                switchHref="#/"
+                labels={ui.auth.labels}
+                mode="signup"
+                layout="card"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signup))}
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-reset-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="reset"
+        >
+          <Title as={3} size="base" weight="bold" id="auth-reset-label" data-testid="variant-label">
+            {ui.blocks.variants.auth.reset}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-reset"
+                title={ui.auth.reset.title}
+                text={ui.auth.reset.text}
+                submit={ui.auth.reset.submit}
+                switchText={ui.auth.reset.switchText}
+                switchLink={ui.auth.reset.switchLink}
+                switchHref="#/"
+                labels={ui.auth.labels}
+                mode="reset"
+                layout="card"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.reset))}
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-plain-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="auth-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.auth.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-plain"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchText={ui.auth.signin.switchText}
+                switchLink={ui.auth.signin.switchLink}
+                switchHref="#/"
+                labels={ui.auth.labels}
+                mode="signin"
+                layout="plain"
+                social="none"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.plain))}
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-social-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="social"
+        >
+          <Title as={3} size="base" weight="bold" id="auth-social-label" data-testid="variant-label">
+            {ui.blocks.variants.auth.social}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-social"
+                title={ui.auth.signin.title}
+                text={ui.auth.signin.text}
+                submit={ui.auth.signin.submit}
+                switchText={ui.auth.signin.switchText}
+                switchLink={ui.auth.signin.switchLink}
+                switchHref="#/"
+                labels={ui.auth.labels}
+                mode="signin"
+                layout="card"
+                social="show"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))}
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-signupSocial-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="signupSocial"
+        >
+          <Title as={3} size="base" weight="bold" id="auth-signupSocial-label" data-testid="variant-label">
+            {ui.blocks.variants.auth.signupSocial}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-signupSocial"
+                title={ui.auth.signup.title}
+                text={ui.auth.signup.text}
+                submit={ui.auth.signup.submit}
+                switchText={ui.auth.signup.switchText}
+                switchLink={ui.auth.signup.switchLink}
+                switchHref="#/"
+                labels={ui.auth.labels}
+                mode="signup"
+                layout="plain"
+                social="show"
+                level={2}
+                landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))}
+              />
+            </Box>
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-wizard-title"
+        data-testid="catalog-block"
+        data-block="wizard"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-wizard-title">
+            {ui.blocks.names.wizard}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.wizard}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="wizard-bar-label"
+          data-testid="variant"
+          data-block="wizard"
+          data-variant="bar"
+        >
+          <Title as={3} size="base" weight="bold" id="wizard-bar-label" data-testid="variant-label">
+            {ui.blocks.variants.wizard.bar}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SignupWizard
+              id="wizard-bar"
+              title={ui.vibe.wizard.title}
+              steps={wizard}
+              labels={ui.vibe.wizard.labels}
+              current={1}
+              progress="bar"
+              layout="card"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="wizard-list-label"
+          data-testid="variant"
+          data-block="wizard"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="wizard-list-label" data-testid="variant-label">
+            {ui.blocks.variants.wizard.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SignupWizard
+              id="wizard-list"
+              title={ui.vibe.wizard.title}
+              steps={wizard}
+              labels={ui.vibe.wizard.labels}
+              current={1}
+              progress="list"
+              layout="card"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="wizard-plain-label"
+          data-testid="variant"
+          data-block="wizard"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="wizard-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.wizard.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SignupWizard
+              id="wizard-plain"
+              title={ui.vibe.wizard.title}
+              steps={wizard}
+              labels={ui.vibe.wizard.labels}
+              current={1}
+              progress="bar"
+              layout="plain"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.plain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="wizard-second-label"
+          data-testid="variant"
+          data-block="wizard"
+          data-variant="second"
+        >
+          <Title as={3} size="base" weight="bold" id="wizard-second-label" data-testid="variant-label">
+            {ui.blocks.variants.wizard.second}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SignupWizard
+              id="wizard-second"
+              title={ui.vibe.wizard.title}
+              steps={wizard}
+              labels={ui.vibe.wizard.labels}
+              current={2}
+              progress="list"
+              layout="plain"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.second))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppAuthPagesPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppAuthPagesPage.svelte
new file mode 100644
index 0000000..8651624
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppAuthPagesPage.svelte
@@ -0,0 +1,335 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-auth-pages page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    AuthLayout,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const AUTHPAGE_SWITCH_TO = { text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appAuthPages}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 9)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-authpage-title"
+        data-testid="catalog-block"
+        data-block="authpage"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-authpage-title">
+            {ui.blocks.names.authpage}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.authpage}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-split-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="authpage-split-label" data-testid="variant-label">
+            {ui.blocks.variants.authpage.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-split"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchTo={AUTHPAGE_SWITCH_TO}
+              labels={ui.auth.labels}
+              visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+              layout="split"
+              side="end"
+              mode="signin"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-splitStart-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="splitStart"
+        >
+          <Title as={3} size="base" weight="bold" id="authpage-splitStart-label" data-testid="variant-label">
+            {ui.blocks.variants.authpage.splitStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-splitStart"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchTo={AUTHPAGE_SWITCH_TO}
+              labels={ui.auth.labels}
+              visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+              layout="split"
+              side="start"
+              mode="signin"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.splitStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-centered-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="centered"
+        >
+          <Title as={3} size="base" weight="bold" id="authpage-centered-label" data-testid="variant-label">
+            {ui.blocks.variants.authpage.centered}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-centered"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchTo={AUTHPAGE_SWITCH_TO}
+              labels={ui.auth.labels}
+              visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+              layout="centered"
+              side="end"
+              mode="signin"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.centered))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-minimal-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="minimal"
+        >
+          <Title as={3} size="base" weight="bold" id="authpage-minimal-label" data-testid="variant-label">
+            {ui.blocks.variants.authpage.minimal}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-minimal"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchTo={AUTHPAGE_SWITCH_TO}
+              labels={ui.auth.labels}
+              visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+              layout="minimal"
+              side="end"
+              mode="signin"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.minimal))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-signup-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="signup"
+        >
+          <Title as={3} size="base" weight="bold" id="authpage-signup-label" data-testid="variant-label">
+            {ui.blocks.variants.authpage.signup}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-signup"
+              title={ui.auth.signup.title}
+              text={ui.auth.signup.text}
+              submit={ui.auth.signup.submit}
+              switchTo={{
+                ...AUTHPAGE_SWITCH_TO,
+                text: ui.auth.signup.switchText,
+                link: ui.auth.signup.switchLink,
+              }}
+              labels={ui.auth.labels}
+              visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+              layout="split"
+              side="end"
+              mode="signup"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.signup))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-reset-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="reset"
+        >
+          <Title as={3} size="base" weight="bold" id="authpage-reset-label" data-testid="variant-label">
+            {ui.blocks.variants.authpage.reset}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-reset"
+              title={ui.auth.reset.title}
+              text={ui.auth.reset.text}
+              submit={ui.auth.reset.submit}
+              switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink }}
+              labels={ui.auth.labels}
+              visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+              layout="centered"
+              side="end"
+              mode="reset"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.reset))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-magic-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="magic"
+        >
+          <Title as={3} size="base" weight="bold" id="authpage-magic-label" data-testid="variant-label">
+            {ui.blocks.variants.authpage.magic}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-magic"
+              title={ui.auth.magic.title}
+              text={ui.auth.magic.text}
+              submit={ui.auth.magic.submit}
+              switchTo={{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink }}
+              labels={ui.auth.labels}
+              visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+              layout="minimal"
+              side="end"
+              mode="magic"
+              social="none"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.magic))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-social-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="social"
+        >
+          <Title as={3} size="base" weight="bold" id="authpage-social-label" data-testid="variant-label">
+            {ui.blocks.variants.authpage.social}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-social"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchTo={AUTHPAGE_SWITCH_TO}
+              labels={ui.auth.labels}
+              visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+              layout="split"
+              side="end"
+              mode="signin"
+              social="show"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.social))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-socialFirst-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="socialFirst"
+        >
+          <Title as={3} size="base" weight="bold" id="authpage-socialFirst-label" data-testid="variant-label">
+            {ui.blocks.variants.authpage.socialFirst}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-socialFirst"
+              title={ui.auth.signin.title}
+              text={ui.auth.signin.text}
+              submit={ui.auth.signin.submit}
+              switchTo={AUTHPAGE_SWITCH_TO}
+              labels={ui.auth.labels}
+              visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+              layout="centered"
+              side="end"
+              mode="signin"
+              social="first"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.socialFirst))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppBoardsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppBoardsPage.svelte
new file mode 100644
index 0000000..7a576aa
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppBoardsPage.svelte
@@ -0,0 +1,336 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-boards page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    DashboardOverview,
+    Group,
+    KanbanBoard,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type BoardCard,
+    type Event,
+    type Lane,
+    type Point,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+  import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+  import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+  import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+  import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+  const METRICS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const ACTIVITY_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "time": "metadata.time.value|ago",
+    "tone": "metadata.tone.value",
+  } as const;
+  const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+  const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+  const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+  const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+  const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+  const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+  const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+
+  const OVERVIEW_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+  const OVERVIEW_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appBoards}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 8)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-overview-title"
+        data-testid="catalog-block"
+        data-block="overview"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-overview-title">
+            {ui.blocks.names.overview}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.overview}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="overview-split-label"
+          data-testid="variant"
+          data-block="overview"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="overview-split-label" data-testid="variant-label">
+            {ui.blocks.variants.overview.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardOverview
+              id="overview-split"
+              title={ui.vibe.overview.title}
+              metrics={metrics}
+              chart={OVERVIEW_CHART}
+              activity={OVERVIEW_ACTIVITY}
+              layout="split"
+              cols="4"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="overview-stacked-label"
+          data-testid="variant"
+          data-block="overview"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="overview-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.overview.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardOverview
+              id="overview-stacked"
+              title={ui.vibe.overview.title}
+              metrics={metrics}
+              chart={OVERVIEW_CHART}
+              activity={OVERVIEW_ACTIVITY}
+              layout="stacked"
+              cols="4"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="overview-twoCols-label"
+          data-testid="variant"
+          data-block="overview"
+          data-variant="twoCols"
+        >
+          <Title as={3} size="base" weight="bold" id="overview-twoCols-label" data-testid="variant-label">
+            {ui.blocks.variants.overview.twoCols}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardOverview
+              id="overview-twoCols"
+              title={ui.vibe.overview.title}
+              metrics={metrics}
+              chart={OVERVIEW_CHART}
+              activity={OVERVIEW_ACTIVITY}
+              layout="split"
+              cols="2"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.twoCols))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="overview-muted-label"
+          data-testid="variant"
+          data-block="overview"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="overview-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.overview.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardOverview
+              id="overview-muted"
+              title={ui.vibe.overview.title}
+              metrics={metrics}
+              chart={OVERVIEW_CHART}
+              activity={OVERVIEW_ACTIVITY}
+              layout="split"
+              cols="4"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-kanban-title"
+        data-testid="catalog-block"
+        data-block="kanban"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-kanban-title">
+            {ui.blocks.names.kanban}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.kanban}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="kanban-detail-label"
+          data-testid="variant"
+          data-block="kanban"
+          data-variant="detail"
+        >
+          <Title as={3} size="base" weight="bold" id="kanban-detail-label" data-testid="variant-label">
+            {ui.blocks.variants.kanban.detail}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <KanbanBoard
+              id="kanban-detail"
+              title={ui.vibe.kanban.title}
+              lanes={lanes}
+              empty={ui.empty.lanes}
+              cards={cards}
+              countLabel={ui.vibe.kanban.count}
+              card="detail"
+              cols="3"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="kanban-simple-label"
+          data-testid="variant"
+          data-block="kanban"
+          data-variant="simple"
+        >
+          <Title as={3} size="base" weight="bold" id="kanban-simple-label" data-testid="variant-label">
+            {ui.blocks.variants.kanban.simple}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <KanbanBoard
+              id="kanban-simple"
+              title={ui.vibe.kanban.title}
+              lanes={lanes}
+              empty={ui.empty.lanes}
+              cards={cards}
+              countLabel={ui.vibe.kanban.count}
+              card="simple"
+              cols="3"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.simple))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="kanban-twoCols-label"
+          data-testid="variant"
+          data-block="kanban"
+          data-variant="twoCols"
+        >
+          <Title as={3} size="base" weight="bold" id="kanban-twoCols-label" data-testid="variant-label">
+            {ui.blocks.variants.kanban.twoCols}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <KanbanBoard
+              id="kanban-twoCols"
+              title={ui.vibe.kanban.title}
+              lanes={lanes}
+              empty={ui.empty.lanes}
+              cards={cards}
+              countLabel={ui.vibe.kanban.count}
+              card="detail"
+              cols="2"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="kanban-muted-label"
+          data-testid="variant"
+          data-block="kanban"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="kanban-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.kanban.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <KanbanBoard
+              id="kanban-muted"
+              title={ui.vibe.kanban.title}
+              lanes={lanes}
+              empty={ui.empty.lanes}
+              cards={cards}
+              countLabel={ui.vibe.kanban.count}
+              card="detail"
+              cols="3"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppDashboardShellsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppDashboardShellsPage.svelte
new file mode 100644
index 0000000..208c436
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppDashboardShellsPage.svelte
@@ -0,0 +1,426 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-dashboard-shells page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    DashboardShell,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type NavLink,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+  const DASHSHELL_NAV = {
+    label: ui.dashboard.shells.label,
+    brand: ui.site.header.brand,
+    links: sidenav,
+    current: "item-orders",
+    subTitle: ui.dashboard.shells.subTitle,
+    sub: subnav,
+    subCurrent: "subitem-all",
+    search: ui.dashboard.shells.search,
+    shortcut: ui.dashboard.shells.shortcut,
+    expand: ui.dashboard.shells.expand,
+    userName: ui.dashboard.shells.userName,
+    copyright: ui.dashboard.shells.copyright,
+    footerLabel: ui.dashboard.shells.footerLabel,
+    footer: helplinks,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appDashboardShells}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 12)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-dashshell-title"
+        data-testid="catalog-block"
+        data-block="dashshell"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-dashshell-title">
+            {ui.blocks.names.dashshell}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.dashshell}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-classic-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="classic"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-classic-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.classic}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-classic"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="full"
+              search="show"
+              sidebar="wide"
+              side="start"
+              footer="none"
+              content="grid"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-inset-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="inset"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-inset-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.inset}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-inset"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="inset"
+              search="show"
+              sidebar="wide"
+              side="start"
+              footer="inset"
+              content="split"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.inset))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-rail-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="rail"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-rail-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.rail}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-rail"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="full"
+              search="hide"
+              sidebar="rail"
+              side="start"
+              footer="none"
+              content="list"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.rail))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-railFooter-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="railFooter"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-railFooter-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.railFooter}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-railFooter"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="inset"
+              search="show"
+              sidebar="rail"
+              side="start"
+              footer="full"
+              content="grid"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railFooter))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-collapsed-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="collapsed"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-collapsed-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.collapsed}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-collapsed"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="inset"
+              search="show"
+              sidebar="collapsed"
+              side="start"
+              footer="none"
+              content="split"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsed))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-twoLevel-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="twoLevel"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-twoLevel-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.twoLevel}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-twoLevel"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="inset"
+              search="hide"
+              sidebar="twolevel"
+              side="start"
+              footer="inset"
+              content="list"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-twoLevelFull-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="twoLevelFull"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-twoLevelFull-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.twoLevelFull}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-twoLevelFull"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="full"
+              search="show"
+              sidebar="twolevel"
+              side="start"
+              footer="full"
+              content="split"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevelFull))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-end-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="end"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-end-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.end}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-end"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="full"
+              search="show"
+              sidebar="wide"
+              side="end"
+              footer="full"
+              content="split"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-railEnd-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="railEnd"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-railEnd-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.railEnd}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-railEnd"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="inset"
+              search="hide"
+              sidebar="rail"
+              side="end"
+              footer="inset"
+              content="grid"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railEnd))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-topOnly-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="topOnly"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-topOnly-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.topOnly}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-topOnly"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="full"
+              search="show"
+              sidebar="none"
+              side="start"
+              footer="full"
+              content="grid"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.topOnly))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-sideOnly-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="sideOnly"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-sideOnly-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.sideOnly}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-sideOnly"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="none"
+              search="show"
+              sidebar="wide"
+              side="start"
+              footer="inset"
+              content="list"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.sideOnly))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-collapsedEnd-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="collapsedEnd"
+        >
+          <Title as={3} size="base" weight="bold" id="dashshell-collapsedEnd-label" data-testid="variant-label">
+            {ui.blocks.variants.dashshell.collapsedEnd}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-collapsedEnd"
+              title={ui.dashboard.shells.title}
+              nav={DASHSHELL_NAV}
+              topbar="none"
+              search="show"
+              sidebar="collapsed"
+              side="end"
+              footer="full"
+              content="split"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsedEnd))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppGuidancePage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppGuidancePage.svelte
new file mode 100644
index 0000000..42b608c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppGuidancePage.svelte
@@ -0,0 +1,309 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-guidance page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    TourCallout,
+    VideoModal,
+    tpl,
+    uniqLabel,
+    type Chapter,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+  const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+  const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appGuidance}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 8)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-tour-title"
+        data-testid="catalog-block"
+        data-block="tour"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-tour-title">
+            {ui.blocks.names.tour}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.tour}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="tour-below-label"
+          data-testid="variant"
+          data-block="tour"
+          data-variant="below"
+        >
+          <Title as={3} size="base" weight="bold" id="tour-below-label" data-testid="variant-label">
+            {ui.blocks.variants.tour.below}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TourCallout
+              id="tour-below"
+              title={ui.vibe.tour.title}
+              text={ui.vibe.tour.text}
+              target={ui.vibe.tour.target}
+              position={ui.vibe.tour.position}
+              skip={ui.vibe.tour.skip}
+              next={ui.vibe.tour.next}
+              placement="below"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="tour-above-label"
+          data-testid="variant"
+          data-block="tour"
+          data-variant="above"
+        >
+          <Title as={3} size="base" weight="bold" id="tour-above-label" data-testid="variant-label">
+            {ui.blocks.variants.tour.above}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TourCallout
+              id="tour-above"
+              title={ui.vibe.tour.title}
+              text={ui.vibe.tour.text}
+              target={ui.vibe.tour.target}
+              position={ui.vibe.tour.position}
+              skip={ui.vibe.tour.skip}
+              next={ui.vibe.tour.next}
+              placement="above"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="tour-end-label"
+          data-testid="variant"
+          data-block="tour"
+          data-variant="end"
+        >
+          <Title as={3} size="base" weight="bold" id="tour-end-label" data-testid="variant-label">
+            {ui.blocks.variants.tour.end}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TourCallout
+              id="tour-end"
+              title={ui.vibe.tour.title}
+              text={ui.vibe.tour.text}
+              target={ui.vibe.tour.target}
+              position={ui.vibe.tour.position}
+              skip={ui.vibe.tour.skip}
+              next={ui.vibe.tour.next}
+              placement="end"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="tour-muted-label"
+          data-testid="variant"
+          data-block="tour"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="tour-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.tour.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TourCallout
+              id="tour-muted"
+              title={ui.vibe.tour.title}
+              text={ui.vibe.tour.text}
+              target={ui.vibe.tour.target}
+              position={ui.vibe.tour.position}
+              skip={ui.vibe.tour.skip}
+              next={ui.vibe.tour.next}
+              placement="below"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-videomodal-title"
+        data-testid="catalog-block"
+        data-block="videomodal"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-videomodal-title">
+            {ui.blocks.names.videomodal}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.videomodal}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videomodal-default-label"
+          data-testid="variant"
+          data-block="videomodal"
+          data-variant="default"
+        >
+          <Title as={3} size="base" weight="bold" id="videomodal-default-label" data-testid="variant-label">
+            {ui.blocks.variants.videomodal.default}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoModal
+              id="videomodal-default"
+              title={ui.vibe.modal.title}
+              text={ui.vibe.modal.text}
+              close={ui.vibe.modal.close}
+              play={ui.vibe.modal.play}
+              chaptersTitle={ui.vibe.modal.chapters}
+              chapters={chapters}
+              size="default"
+              outline="none"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videomodal-wide-label"
+          data-testid="variant"
+          data-block="videomodal"
+          data-variant="wide"
+        >
+          <Title as={3} size="base" weight="bold" id="videomodal-wide-label" data-testid="variant-label">
+            {ui.blocks.variants.videomodal.wide}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoModal
+              id="videomodal-wide"
+              title={ui.vibe.modal.title}
+              text={ui.vibe.modal.text}
+              close={ui.vibe.modal.close}
+              play={ui.vibe.modal.play}
+              chaptersTitle={ui.vibe.modal.chapters}
+              chapters={chapters}
+              size="wide"
+              outline="none"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.wide))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videomodal-chapters-label"
+          data-testid="variant"
+          data-block="videomodal"
+          data-variant="chapters"
+        >
+          <Title as={3} size="base" weight="bold" id="videomodal-chapters-label" data-testid="variant-label">
+            {ui.blocks.variants.videomodal.chapters}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoModal
+              id="videomodal-chapters"
+              title={ui.vibe.modal.title}
+              text={ui.vibe.modal.text}
+              close={ui.vibe.modal.close}
+              play={ui.vibe.modal.play}
+              chaptersTitle={ui.vibe.modal.chapters}
+              chapters={chapters}
+              size="default"
+              outline="chapters"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videomodal-muted-label"
+          data-testid="variant"
+          data-block="videomodal"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="videomodal-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.videomodal.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoModal
+              id="videomodal-muted"
+              title={ui.vibe.modal.title}
+              text={ui.vibe.modal.text}
+              close={ui.vibe.modal.close}
+              play={ui.vibe.modal.play}
+              chaptersTitle={ui.vibe.modal.chapters}
+              chapters={chapters}
+              size="default"
+              outline="none"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppOnboardingPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppOnboardingPage.svelte
new file mode 100644
index 0000000..a1f785f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppOnboardingPage.svelte
@@ -0,0 +1,397 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-onboarding page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Checklist,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Stepper,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Step,
+    type Task,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+  import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+  const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appOnboarding}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 11)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-checklist-title"
+        data-testid="catalog-block"
+        data-block="checklist"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-checklist-title">
+            {ui.blocks.names.checklist}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.checklist}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-card-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="card"
+        >
+          <Title as={3} size="base" weight="bold" id="checklist-card-label" data-testid="variant-label">
+            {ui.blocks.variants.checklist.card}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-card"
+              title={ui.onboarding.checklist.title}
+              tasks={checklist}
+              empty={ui.empty.tasks}
+              progressLabel={ui.onboarding.checklist.progress}
+              layout="card"
+              progress="bar"
+              marker="check"
+              detail="always"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-expand-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="expand"
+        >
+          <Title as={3} size="base" weight="bold" id="checklist-expand-label" data-testid="variant-label">
+            {ui.blocks.variants.checklist.expand}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-expand"
+              title={ui.onboarding.checklist.title}
+              tasks={checklist}
+              empty={ui.empty.tasks}
+              progressLabel={ui.onboarding.checklist.progress}
+              layout="card"
+              progress="bar"
+              marker="check"
+              detail="expand"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-plain-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="checklist-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.checklist.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-plain"
+              title={ui.onboarding.checklist.title}
+              tasks={checklist}
+              empty={ui.empty.tasks}
+              progressLabel={ui.onboarding.checklist.progress}
+              layout="plain"
+              progress="bar"
+              marker="check"
+              detail="always"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.plain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-text-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="text"
+        >
+          <Title as={3} size="base" weight="bold" id="checklist-text-label" data-testid="variant-label">
+            {ui.blocks.variants.checklist.text}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-text"
+              title={ui.onboarding.checklist.title}
+              tasks={checklist}
+              empty={ui.empty.tasks}
+              progressLabel={ui.onboarding.checklist.progress}
+              layout="card"
+              progress="text"
+              marker="check"
+              detail="always"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-none-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="none"
+        >
+          <Title as={3} size="base" weight="bold" id="checklist-none-label" data-testid="variant-label">
+            {ui.blocks.variants.checklist.none}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-none"
+              title={ui.onboarding.checklist.title}
+              tasks={checklist}
+              empty={ui.empty.tasks}
+              progressLabel={ui.onboarding.checklist.progress}
+              layout="plain"
+              progress="none"
+              marker="check"
+              detail="always"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.none))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-numbered-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="numbered"
+        >
+          <Title as={3} size="base" weight="bold" id="checklist-numbered-label" data-testid="variant-label">
+            {ui.blocks.variants.checklist.numbered}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-numbered"
+              title={ui.onboarding.checklist.title}
+              tasks={checklist}
+              empty={ui.empty.tasks}
+              progressLabel={ui.onboarding.checklist.progress}
+              layout="card"
+              progress="bar"
+              marker="number"
+              detail="always"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-muted-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="checklist-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.checklist.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-muted"
+              title={ui.onboarding.checklist.title}
+              tasks={checklist}
+              empty={ui.empty.tasks}
+              progressLabel={ui.onboarding.checklist.progress}
+              layout="card"
+              progress="text"
+              marker="number"
+              detail="always"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-stepper-title"
+        data-testid="catalog-block"
+        data-block="stepper"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-stepper-title">
+            {ui.blocks.names.stepper}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.stepper}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stepper-horizontal-label"
+          data-testid="variant"
+          data-block="stepper"
+          data-variant="horizontal"
+        >
+          <Title as={3} size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+            {ui.blocks.variants.stepper.horizontal}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Stepper
+              id="stepper-horizontal"
+              title={ui.onboarding.stepper.title}
+              steps={steps}
+              current={2}
+              stepLabel={ui.onboarding.stepper.stepLabel}
+              back={ui.onboarding.stepper.back}
+              next={ui.onboarding.stepper.next}
+              layout="horizontal"
+              marker="number"
+              summary="show"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stepper-vertical-label"
+          data-testid="variant"
+          data-block="stepper"
+          data-variant="vertical"
+        >
+          <Title as={3} size="base" weight="bold" id="stepper-vertical-label" data-testid="variant-label">
+            {ui.blocks.variants.stepper.vertical}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Stepper
+              id="stepper-vertical"
+              title={ui.onboarding.stepper.title}
+              steps={steps}
+              current={2}
+              stepLabel={ui.onboarding.stepper.stepLabel}
+              back={ui.onboarding.stepper.back}
+              next={ui.onboarding.stepper.next}
+              layout="vertical"
+              marker="number"
+              summary="show"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stepper-icons-label"
+          data-testid="variant"
+          data-block="stepper"
+          data-variant="icons"
+        >
+          <Title as={3} size="base" weight="bold" id="stepper-icons-label" data-testid="variant-label">
+            {ui.blocks.variants.stepper.icons}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Stepper
+              id="stepper-icons"
+              title={ui.onboarding.stepper.title}
+              steps={steps}
+              current={2}
+              stepLabel={ui.onboarding.stepper.stepLabel}
+              back={ui.onboarding.stepper.back}
+              next={ui.onboarding.stepper.next}
+              layout="horizontal"
+              marker="icon"
+              summary="show"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.icons))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stepper-bare-label"
+          data-testid="variant"
+          data-block="stepper"
+          data-variant="bare"
+        >
+          <Title as={3} size="base" weight="bold" id="stepper-bare-label" data-testid="variant-label">
+            {ui.blocks.variants.stepper.bare}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Stepper
+              id="stepper-bare"
+              title={ui.onboarding.stepper.title}
+              steps={steps}
+              current={2}
+              stepLabel={ui.onboarding.stepper.stepLabel}
+              back={ui.onboarding.stepper.back}
+              next={ui.onboarding.stepper.next}
+              layout="vertical"
+              marker="icon"
+              summary="hide"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.bare))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppSettingsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppSettingsPage.svelte
new file mode 100644
index 0000000..9dd8664
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppSettingsPage.svelte
@@ -0,0 +1,164 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-settings page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProfileForm,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appSettings}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 4)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-profile-title"
+        data-testid="catalog-block"
+        data-block="profile"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-profile-title">
+            {ui.blocks.names.profile}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.profile}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="profile-stacked-label"
+          data-testid="variant"
+          data-block="profile"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="profile-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.profile.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProfileForm
+              id="profile-stacked"
+              title={ui.account.profile.title}
+              text={ui.account.profile.text}
+              labels={ui.account.profile.labels}
+              layout="stacked"
+              avatar="show"
+              prefs="show"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="profile-split-label"
+          data-testid="variant"
+          data-block="profile"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="profile-split-label" data-testid="variant-label">
+            {ui.blocks.variants.profile.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProfileForm
+              id="profile-split"
+              title={ui.account.profile.title}
+              text={ui.account.profile.text}
+              labels={ui.account.profile.labels}
+              layout="split"
+              avatar="show"
+              prefs="show"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="profile-minimal-label"
+          data-testid="variant"
+          data-block="profile"
+          data-variant="minimal"
+        >
+          <Title as={3} size="base" weight="bold" id="profile-minimal-label" data-testid="variant-label">
+            {ui.blocks.variants.profile.minimal}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProfileForm
+              id="profile-minimal"
+              title={ui.account.profile.title}
+              text={ui.account.profile.text}
+              labels={ui.account.profile.labels}
+              layout="stacked"
+              avatar="hide"
+              prefs="hide"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.minimal))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="profile-muted-label"
+          data-testid="variant"
+          data-block="profile"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="profile-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.profile.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProfileForm
+              id="profile-muted"
+              title={ui.account.profile.title}
+              text={ui.account.profile.text}
+              labels={ui.account.profile.labels}
+              layout="split"
+              avatar="show"
+              prefs="show"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppShellPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppShellPage.svelte
new file mode 100644
index 0000000..d9e73cf
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppShellPage.svelte
@@ -0,0 +1,450 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-shell page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    AppShell,
+    Block,
+    BottomNav,
+    Box,
+    Container,
+    Group,
+    Link,
+    SidebarNav,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Event,
+    type NavLink,
+    type Point,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+  import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+  import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+  import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const METRICS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const ACTIVITY_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "time": "metadata.time.value|ago",
+    "tone": "metadata.tone.value",
+  } as const;
+  const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+  const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+  const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+  const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+
+  const SHELL_NAV = { label: ui.vibe.sidebar.label, brand: ui.site.header.brand, links: sidenav, current: "item-overview" } as const;
+  const SHELL_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+  const SHELL_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appShell}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 12)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-shell-title"
+        data-testid="catalog-block"
+        data-block="shell"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-shell-title">
+            {ui.blocks.names.shell}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.shell}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="shell-sidebar-label"
+          data-testid="variant"
+          data-block="shell"
+          data-variant="sidebar"
+        >
+          <Title as={3} size="base" weight="bold" id="shell-sidebar-label" data-testid="variant-label">
+            {ui.blocks.variants.shell.sidebar}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AppShell
+              id="shell-sidebar"
+              title={ui.vibe.shell.title}
+              nav={SHELL_NAV}
+              user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              metrics={metrics}
+              chart={SHELL_CHART}
+              activity={SHELL_ACTIVITY}
+              layout="sidebar"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="shell-top-label"
+          data-testid="variant"
+          data-block="shell"
+          data-variant="top"
+        >
+          <Title as={3} size="base" weight="bold" id="shell-top-label" data-testid="variant-label">
+            {ui.blocks.variants.shell.top}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AppShell
+              id="shell-top"
+              title={ui.vibe.shell.title}
+              nav={SHELL_NAV}
+              user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              metrics={metrics}
+              chart={SHELL_CHART}
+              activity={SHELL_ACTIVITY}
+              layout="top"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="shell-panes-label"
+          data-testid="variant"
+          data-block="shell"
+          data-variant="panes"
+        >
+          <Title as={3} size="base" weight="bold" id="shell-panes-label" data-testid="variant-label">
+            {ui.blocks.variants.shell.panes}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AppShell
+              id="shell-panes"
+              title={ui.vibe.shell.title}
+              nav={SHELL_NAV}
+              user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              metrics={metrics}
+              chart={SHELL_CHART}
+              activity={SHELL_ACTIVITY}
+              layout="panes"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="shell-dense-label"
+          data-testid="variant"
+          data-block="shell"
+          data-variant="dense"
+        >
+          <Title as={3} size="base" weight="bold" id="shell-dense-label" data-testid="variant-label">
+            {ui.blocks.variants.shell.dense}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AppShell
+              id="shell-dense"
+              title={ui.vibe.shell.title}
+              nav={SHELL_NAV}
+              user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              metrics={metrics}
+              chart={SHELL_CHART}
+              activity={SHELL_ACTIVITY}
+              layout="sidebar"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.dense))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-sidenav-title"
+        data-testid="catalog-block"
+        data-block="sidenav"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-sidenav-title">
+            {ui.blocks.names.sidenav}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.sidenav}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sidenav-full-label"
+          data-testid="variant"
+          data-block="sidenav"
+          data-variant="full"
+        >
+          <Title as={3} size="base" weight="bold" id="sidenav-full-label" data-testid="variant-label">
+            {ui.blocks.variants.sidenav.full}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SidebarNav
+              label={ui.vibe.sidebar.label}
+              brand={ui.site.header.brand}
+              links={sidenav}
+              current="item-orders"
+              userName={ui.vibe.sidebar.userName}
+              userEmail={ui.vibe.sidebar.userEmail}
+              width="full"
+              user="show"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sidenav-compact-label"
+          data-testid="variant"
+          data-block="sidenav"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="sidenav-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.sidenav.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SidebarNav
+              label={ui.vibe.sidebar.label}
+              brand={ui.site.header.brand}
+              links={sidenav}
+              current="item-orders"
+              userName={ui.vibe.sidebar.userName}
+              userEmail={ui.vibe.sidebar.userEmail}
+              width="compact"
+              user="show"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sidenav-noUser-label"
+          data-testid="variant"
+          data-block="sidenav"
+          data-variant="noUser"
+        >
+          <Title as={3} size="base" weight="bold" id="sidenav-noUser-label" data-testid="variant-label">
+            {ui.blocks.variants.sidenav.noUser}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SidebarNav
+              label={ui.vibe.sidebar.label}
+              brand={ui.site.header.brand}
+              links={sidenav}
+              current="item-orders"
+              userName={ui.vibe.sidebar.userName}
+              userEmail={ui.vibe.sidebar.userEmail}
+              width="full"
+              user="hide"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.noUser))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sidenav-dense-label"
+          data-testid="variant"
+          data-block="sidenav"
+          data-variant="dense"
+        >
+          <Title as={3} size="base" weight="bold" id="sidenav-dense-label" data-testid="variant-label">
+            {ui.blocks.variants.sidenav.dense}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SidebarNav
+              label={ui.vibe.sidebar.label}
+              brand={ui.site.header.brand}
+              links={sidenav}
+              current="item-orders"
+              userName={ui.vibe.sidebar.userName}
+              userEmail={ui.vibe.sidebar.userEmail}
+              width="full"
+              user="show"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.dense))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-bottomnav-title"
+        data-testid="catalog-block"
+        data-block="bottomnav"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-bottomnav-title">
+            {ui.blocks.names.bottomnav}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.bottomnav}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bottomnav-labels-label"
+          data-testid="variant"
+          data-block="bottomnav"
+          data-variant="labels"
+        >
+          <Title as={3} size="base" weight="bold" id="bottomnav-labels-label" data-testid="variant-label">
+            {ui.blocks.variants.bottomnav.labels}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BottomNav
+              label={ui.vibe.bottom.label}
+              tabs={tabs}
+              current="tab-explore"
+              labels="show"
+              position="static"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bottomnav-icons-label"
+          data-testid="variant"
+          data-block="bottomnav"
+          data-variant="icons"
+        >
+          <Title as={3} size="base" weight="bold" id="bottomnav-icons-label" data-testid="variant-label">
+            {ui.blocks.variants.bottomnav.icons}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BottomNav
+              label={ui.vibe.bottom.label}
+              tabs={tabs}
+              current="tab-explore"
+              labels="hide"
+              position="static"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.icons))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bottomnav-sticky-label"
+          data-testid="variant"
+          data-block="bottomnav"
+          data-variant="sticky"
+        >
+          <Title as={3} size="base" weight="bold" id="bottomnav-sticky-label" data-testid="variant-label">
+            {ui.blocks.variants.bottomnav.sticky}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BottomNav
+              label={ui.vibe.bottom.label}
+              tabs={tabs}
+              current="tab-explore"
+              labels="show"
+              position="sticky"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.sticky))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bottomnav-muted-label"
+          data-testid="variant"
+          data-block="bottomnav"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="bottomnav-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.bottomnav.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BottomNav
+              label={ui.vibe.bottom.label}
+              tabs={tabs}
+              current="tab-explore"
+              labels="show"
+              position="static"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppStatesPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppStatesPage.svelte
new file mode 100644
index 0000000..7e64d43
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppStatesPage.svelte
@@ -0,0 +1,348 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-states page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    EmptyPanel,
+    Group,
+    Link,
+    SkeletonLayout,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Line,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+  const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+  const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appStates}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 10)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-empty-title"
+        data-testid="catalog-block"
+        data-block="empty"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-empty-title">
+            {ui.blocks.names.empty}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.empty}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-illustrated-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="illustrated"
+        >
+          <Title as={3} size="base" weight="bold" id="empty-illustrated-label" data-testid="variant-label">
+            {ui.blocks.variants.empty.illustrated}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-illustrated"
+              title={ui.dashboard.empty.tour.title}
+              text={ui.dashboard.empty.tour.text}
+              cta={ui.dashboard.empty.tour.cta}
+              ctaHref="#/"
+              layout="card"
+              actions="button"
+              visual="image"
+              size="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-orders-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="orders"
+        >
+          <Title as={3} size="base" weight="bold" id="empty-orders-label" data-testid="variant-label">
+            {ui.blocks.variants.empty.orders}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-orders"
+              title={ui.dashboard.empty.orders.title}
+              text={ui.dashboard.empty.orders.text}
+              cta={ui.dashboard.empty.orders.cta}
+              ctaHref="#/"
+              layout="card"
+              actions="button"
+              visual="icon"
+              size="default"
+              icon="shopping-bag"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-results-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="results"
+        >
+          <Title as={3} size="base" weight="bold" id="empty-results-label" data-testid="variant-label">
+            {ui.blocks.variants.empty.results}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-results"
+              title={ui.dashboard.empty.results.title}
+              text={ui.dashboard.empty.results.text}
+              cta={ui.dashboard.empty.results.cta}
+              ctaHref="#/"
+              layout="plain"
+              actions="button"
+              visual="icon"
+              size="default"
+              icon="search"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.results))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-inbox-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="inbox"
+        >
+          <Title as={3} size="base" weight="bold" id="empty-inbox-label" data-testid="variant-label">
+            {ui.blocks.variants.empty.inbox}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-inbox"
+              title={ui.dashboard.empty.inbox.title}
+              text={ui.dashboard.empty.inbox.text}
+              cta={ui.dashboard.empty.inbox.cta}
+              ctaHref="#/"
+              layout="card"
+              actions="none"
+              visual="icon"
+              size="default"
+              icon="inbox"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.inbox))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-compact-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="empty-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.empty.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-compact"
+              title={ui.dashboard.empty.inbox.title}
+              text={ui.dashboard.empty.inbox.text}
+              cta={ui.dashboard.empty.inbox.cta}
+              ctaHref="#/"
+              layout="card"
+              actions="button"
+              visual="icon"
+              size="compact"
+              icon="inbox"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-plainNoAction-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="plainNoAction"
+        >
+          <Title as={3} size="base" weight="bold" id="empty-plainNoAction-label" data-testid="variant-label">
+            {ui.blocks.variants.empty.plainNoAction}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-plainNoAction"
+              title={ui.dashboard.empty.results.title}
+              text={ui.dashboard.empty.results.text}
+              cta={ui.dashboard.empty.results.cta}
+              ctaHref="#/"
+              layout="plain"
+              actions="none"
+              visual="icon"
+              size="compact"
+              icon="search"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.plainNoAction))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-skeleton-title"
+        data-testid="catalog-block"
+        data-block="skeleton"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-skeleton-title">
+            {ui.blocks.names.skeleton}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.skeleton}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skeleton-cards-label"
+          data-testid="variant"
+          data-block="skeleton"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="skeleton-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.skeleton.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SkeletonLayout
+              id="skeleton-cards"
+              title={ui.vibe.skeleton.title}
+              label={ui.vibe.skeleton.label}
+              lines={placeholders}
+              shape="cards"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skeleton-list-label"
+          data-testid="variant"
+          data-block="skeleton"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="skeleton-list-label" data-testid="variant-label">
+            {ui.blocks.variants.skeleton.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SkeletonLayout
+              id="skeleton-list"
+              title={ui.vibe.skeleton.title}
+              label={ui.vibe.skeleton.label}
+              lines={placeholders}
+              shape="list"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skeleton-article-label"
+          data-testid="variant"
+          data-block="skeleton"
+          data-variant="article"
+        >
+          <Title as={3} size="base" weight="bold" id="skeleton-article-label" data-testid="variant-label">
+            {ui.blocks.variants.skeleton.article}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SkeletonLayout
+              id="skeleton-article"
+              title={ui.vibe.skeleton.title}
+              label={ui.vibe.skeleton.label}
+              lines={placeholders}
+              shape="article"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.article))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skeleton-muted-label"
+          data-testid="variant"
+          data-block="skeleton"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="skeleton-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.skeleton.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SkeletonLayout
+              id="skeleton-muted"
+              title={ui.vibe.skeleton.title}
+              label={ui.vibe.skeleton.label}
+              lines={placeholders}
+              shape="cards"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/AppWidgetsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/AppWidgetsPage.svelte
new file mode 100644
index 0000000..fef0515
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/AppWidgetsPage.svelte
@@ -0,0 +1,443 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-widgets page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    ActivityFeed,
+    Block,
+    Box,
+    ChartPanel,
+    Container,
+    Group,
+    Link,
+    MetricRow,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Event,
+    type Point,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+  import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+  import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+  const METRICS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const ACTIVITY_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "time": "metadata.time.value|ago",
+    "tone": "metadata.tone.value",
+  } as const;
+
+  const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+  const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+  const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.app.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.appWidgets}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 12)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-metrics-title"
+        data-testid="catalog-block"
+        data-block="metrics"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-metrics-title">
+            {ui.blocks.names.metrics}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.metrics}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="metrics-tiles-label"
+          data-testid="variant"
+          data-block="metrics"
+          data-variant="tiles"
+        >
+          <Title as={3} size="base" weight="bold" id="metrics-tiles-label" data-testid="variant-label">
+            {ui.blocks.variants.metrics.tiles}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MetricRow
+              id="metrics-tiles"
+              title={ui.dashboard.metrics.title}
+              metrics={metrics}
+              empty={ui.empty.metrics}
+              cols="4"
+              item="tile"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="metrics-twoUp-label"
+          data-testid="variant"
+          data-block="metrics"
+          data-variant="twoUp"
+        >
+          <Title as={3} size="base" weight="bold" id="metrics-twoUp-label" data-testid="variant-label">
+            {ui.blocks.variants.metrics.twoUp}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MetricRow
+              id="metrics-twoUp"
+              title={ui.dashboard.metrics.title}
+              metrics={metrics}
+              empty={ui.empty.metrics}
+              cols="2"
+              item="tile"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.twoUp))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="metrics-compact-label"
+          data-testid="variant"
+          data-block="metrics"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="metrics-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.metrics.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MetricRow
+              id="metrics-compact"
+              title={ui.dashboard.metrics.title}
+              metrics={metrics}
+              empty={ui.empty.metrics}
+              cols="4"
+              item="compact"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="metrics-muted-label"
+          data-testid="variant"
+          data-block="metrics"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="metrics-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.metrics.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MetricRow
+              id="metrics-muted"
+              title={ui.dashboard.metrics.title}
+              metrics={metrics}
+              empty={ui.empty.metrics}
+              cols="2"
+              item="compact"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-chart-title"
+        data-testid="catalog-block"
+        data-block="chart"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-chart-title">
+            {ui.blocks.names.chart}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.chart}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="chart-bars-label"
+          data-testid="variant"
+          data-block="chart"
+          data-variant="bars"
+        >
+          <Title as={3} size="base" weight="bold" id="chart-bars-label" data-testid="variant-label">
+            {ui.blocks.variants.chart.bars}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ChartPanel
+              id="chart-bars"
+              title={ui.dashboard.chart.title}
+              text={ui.dashboard.chart.text}
+              series={series}
+              empty={ui.empty.series}
+              summary={ui.dashboard.chart.summary}
+              percent={ui.dashboard.chart.percent}
+              chart="bars"
+              size="default"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="chart-short-label"
+          data-testid="variant"
+          data-block="chart"
+          data-variant="short"
+        >
+          <Title as={3} size="base" weight="bold" id="chart-short-label" data-testid="variant-label">
+            {ui.blocks.variants.chart.short}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ChartPanel
+              id="chart-short"
+              title={ui.dashboard.chart.title}
+              text={ui.dashboard.chart.text}
+              series={series}
+              empty={ui.empty.series}
+              summary={ui.dashboard.chart.summary}
+              percent={ui.dashboard.chart.percent}
+              chart="bars"
+              size="compact"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.short))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="chart-meters-label"
+          data-testid="variant"
+          data-block="chart"
+          data-variant="meters"
+        >
+          <Title as={3} size="base" weight="bold" id="chart-meters-label" data-testid="variant-label">
+            {ui.blocks.variants.chart.meters}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ChartPanel
+              id="chart-meters"
+              title={ui.dashboard.chart.title}
+              text={ui.dashboard.chart.text}
+              series={series}
+              empty={ui.empty.series}
+              summary={ui.dashboard.chart.summary}
+              percent={ui.dashboard.chart.percent}
+              chart="meters"
+              size="default"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="chart-muted-label"
+          data-testid="variant"
+          data-block="chart"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="chart-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.chart.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ChartPanel
+              id="chart-muted"
+              title={ui.dashboard.chart.title}
+              text={ui.dashboard.chart.text}
+              series={series}
+              empty={ui.empty.series}
+              summary={ui.dashboard.chart.summary}
+              percent={ui.dashboard.chart.percent}
+              chart="meters"
+              size="compact"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-activity-title"
+        data-testid="catalog-block"
+        data-block="activity"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-activity-title">
+            {ui.blocks.names.activity}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.activity}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="activity-timeline-label"
+          data-testid="variant"
+          data-block="activity"
+          data-variant="timeline"
+        >
+          <Title as={3} size="base" weight="bold" id="activity-timeline-label" data-testid="variant-label">
+            {ui.blocks.variants.activity.timeline}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ActivityFeed
+              id="activity-timeline"
+              title={ui.dashboard.activity.title}
+              text={ui.dashboard.activity.text}
+              events={activity}
+              empty={ui.empty.activity}
+              layout="timeline"
+              density="default"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="activity-list-label"
+          data-testid="variant"
+          data-block="activity"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="activity-list-label" data-testid="variant-label">
+            {ui.blocks.variants.activity.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ActivityFeed
+              id="activity-list"
+              title={ui.dashboard.activity.title}
+              text={ui.dashboard.activity.text}
+              events={activity}
+              empty={ui.empty.activity}
+              layout="list"
+              density="default"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="activity-compact-label"
+          data-testid="variant"
+          data-block="activity"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="activity-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.activity.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ActivityFeed
+              id="activity-compact"
+              title={ui.dashboard.activity.title}
+              text={ui.dashboard.activity.text}
+              events={activity}
+              empty={ui.empty.activity}
+              layout="list"
+              density="compact"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.compact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="activity-muted-label"
+          data-testid="variant"
+          data-block="activity"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="activity-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.activity.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ActivityFeed
+              id="activity-muted"
+              title={ui.dashboard.activity.title}
+              text={ui.dashboard.activity.text}
+              events={activity}
+              empty={ui.empty.activity}
+              layout="timeline"
+              density="default"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/CommerceCartPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceCartPage.svelte
new file mode 100644
index 0000000..6f2f710
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceCartPage.svelte
@@ -0,0 +1,397 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-cart page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    CartDrawer,
+    CartList,
+    Container,
+    Group,
+    Link,
+    ShoppingCart,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type CartLine,
+    type Promo,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+  import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+  const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+  const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.commerceCart}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 10)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-cart-title"
+        data-testid="catalog-block"
+        data-block="cart"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-cart-title">
+            {ui.blocks.names.cart}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.cart}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cart-table-label"
+          data-testid="variant"
+          data-block="cart"
+          data-variant="table"
+        >
+          <Title as={3} size="base" weight="bold" id="cart-table-label" data-testid="variant-label">
+            {ui.blocks.variants.cart.table}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartList
+              id="cart-table"
+              title={ui.commerce.cart.title}
+              lines={cart}
+              empty={ui.empty.cart}
+              labels={ui.commerce.cart}
+              layout="table"
+              media="image"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cart-cards-label"
+          data-testid="variant"
+          data-block="cart"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="cart-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.cart.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartList
+              id="cart-cards"
+              title={ui.commerce.cart.title}
+              lines={cart}
+              empty={ui.empty.cart}
+              labels={ui.commerce.cart}
+              layout="cards"
+              media="image"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cart-tableCompact-label"
+          data-testid="variant"
+          data-block="cart"
+          data-variant="tableCompact"
+        >
+          <Title as={3} size="base" weight="bold" id="cart-tableCompact-label" data-testid="variant-label">
+            {ui.blocks.variants.cart.tableCompact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartList
+              id="cart-tableCompact"
+              title={ui.commerce.cart.title}
+              lines={cart}
+              empty={ui.empty.cart}
+              labels={ui.commerce.cart}
+              layout="table"
+              media="none"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.tableCompact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cart-cardsPlain-label"
+          data-testid="variant"
+          data-block="cart"
+          data-variant="cardsPlain"
+        >
+          <Title as={3} size="base" weight="bold" id="cart-cardsPlain-label" data-testid="variant-label">
+            {ui.blocks.variants.cart.cardsPlain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartList
+              id="cart-cardsPlain"
+              title={ui.commerce.cart.title}
+              lines={cart}
+              empty={ui.empty.cart}
+              labels={ui.commerce.cart}
+              layout="cards"
+              media="none"
+              tone="muted"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cardsPlain))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-cartpage-title"
+        data-testid="catalog-block"
+        data-block="cartpage"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-cartpage-title">
+            {ui.blocks.names.cartpage}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.cartpage}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartpage-split-label"
+          data-testid="variant"
+          data-block="cartpage"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="cartpage-split-label" data-testid="variant-label">
+            {ui.blocks.variants.cartpage.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ShoppingCart
+              id="cartpage-split"
+              title={ui.commerce.cartPage.title}
+              lines={cart}
+              rows={summary}
+              promos={promos}
+              labels={ui.commerce.cart}
+              totals={ui.commerce.totals}
+              actions={ui.commerce.cartPage}
+              layout="split"
+              promo="show"
+              progress="show"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartpage-stacked-label"
+          data-testid="variant"
+          data-block="cartpage"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="cartpage-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.cartpage.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ShoppingCart
+              id="cartpage-stacked"
+              title={ui.commerce.cartPage.title}
+              lines={cart}
+              rows={summary}
+              promos={promos}
+              labels={ui.commerce.cart}
+              totals={ui.commerce.totals}
+              actions={ui.commerce.cartPage}
+              layout="stacked"
+              promo="show"
+              progress="show"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.stacked))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartpage-plain-label"
+          data-testid="variant"
+          data-block="cartpage"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="cartpage-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.cartpage.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ShoppingCart
+              id="cartpage-plain"
+              title={ui.commerce.cartPage.title}
+              lines={cart}
+              rows={summary}
+              promos={promos}
+              labels={ui.commerce.cart}
+              totals={ui.commerce.totals}
+              actions={ui.commerce.cartPage}
+              layout="split"
+              promo="hide"
+              progress="hide"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.plain))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-cartdrawer-title"
+        data-testid="catalog-block"
+        data-block="cartdrawer"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-cartdrawer-title">
+            {ui.blocks.names.cartdrawer}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.cartdrawer}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartdrawer-filled-label"
+          data-testid="variant"
+          data-block="cartdrawer"
+          data-variant="filled"
+        >
+          <Title as={3} size="base" weight="bold" id="cartdrawer-filled-label" data-testid="variant-label">
+            {ui.blocks.variants.cartdrawer.filled}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartDrawer
+              id="cartdrawer-filled"
+              lines={cart}
+              rows={summary}
+              labels={ui.commerce.cart}
+              drawer={ui.commerce.drawer}
+              state="filled"
+              media="image"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartdrawer-compact-label"
+          data-testid="variant"
+          data-block="cartdrawer"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="cartdrawer-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.cartdrawer.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartDrawer
+              id="cartdrawer-compact"
+              lines={cart}
+              rows={summary}
+              labels={ui.commerce.cart}
+              drawer={ui.commerce.drawer}
+              state="filled"
+              media="none"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.compact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartdrawer-empty-label"
+          data-testid="variant"
+          data-block="cartdrawer"
+          data-variant="empty"
+        >
+          <Title as={3} size="base" weight="bold" id="cartdrawer-empty-label" data-testid="variant-label">
+            {ui.blocks.variants.cartdrawer.empty}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartDrawer
+              id="cartdrawer-empty"
+              lines={cart}
+              rows={summary}
+              labels={ui.commerce.cart}
+              drawer={ui.commerce.drawer}
+              state="empty"
+              media="image"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.empty))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/CommerceCategoriesPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceCategoriesPage.svelte
new file mode 100644
index 0000000..32fa481
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceCategoriesPage.svelte
@@ -0,0 +1,249 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-categories page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    CategoryNav,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Category,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.commerceCategories}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 7)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-categories-title"
+        data-testid="catalog-block"
+        data-block="categories"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-categories-title">
+            {ui.blocks.names.categories}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.categories}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-chips-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="chips"
+        >
+          <Title as={3} size="base" weight="bold" id="categories-chips-label" data-testid="variant-label">
+            {ui.blocks.variants.categories.chips}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              label={ui.commerce.nav.label}
+              categories={categories}
+              current="category-all"
+              tools={ui.commerce.tools}
+              layout="chips"
+              count="show"
+              icon="show"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-bar-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="bar"
+        >
+          <Title as={3} size="base" weight="bold" id="categories-bar-label" data-testid="variant-label">
+            {ui.blocks.variants.categories.bar}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              label={ui.commerce.nav.label}
+              categories={categories}
+              current="category-all"
+              tools={ui.commerce.tools}
+              layout="bar"
+              count="show"
+              icon="show"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-sidebar-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="sidebar"
+        >
+          <Title as={3} size="base" weight="bold" id="categories-sidebar-label" data-testid="variant-label">
+            {ui.blocks.variants.categories.sidebar}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              label={ui.commerce.nav.label}
+              categories={categories}
+              current="category-all"
+              tools={ui.commerce.tools}
+              layout="sidebar"
+              count="show"
+              icon="show"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-chipsPlain-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="chipsPlain"
+        >
+          <Title as={3} size="base" weight="bold" id="categories-chipsPlain-label" data-testid="variant-label">
+            {ui.blocks.variants.categories.chipsPlain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              label={ui.commerce.nav.label}
+              categories={categories}
+              current="category-all"
+              tools={ui.commerce.tools}
+              layout="chips"
+              count="hide"
+              icon="hide"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chipsPlain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-barCompact-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="barCompact"
+        >
+          <Title as={3} size="base" weight="bold" id="categories-barCompact-label" data-testid="variant-label">
+            {ui.blocks.variants.categories.barCompact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              label={ui.commerce.nav.label}
+              categories={categories}
+              current="category-all"
+              tools={ui.commerce.tools}
+              layout="bar"
+              count="show"
+              icon="hide"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.barCompact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-tiles-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="tiles"
+        >
+          <Title as={3} size="base" weight="bold" id="categories-tiles-label" data-testid="variant-label">
+            {ui.blocks.variants.categories.tiles}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              label={ui.commerce.nav.label}
+              categories={categories}
+              current="category-all"
+              tools={ui.commerce.tools}
+              layout="tiles"
+              count="show"
+              icon="show"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.tiles))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-toolbar-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="toolbar"
+        >
+          <Title as={3} size="base" weight="bold" id="categories-toolbar-label" data-testid="variant-label">
+            {ui.blocks.variants.categories.toolbar}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              label={ui.commerce.nav.label}
+              categories={categories}
+              current="category-all"
+              tools={ui.commerce.tools}
+              layout="toolbar"
+              count="show"
+              icon="hide"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.toolbar))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/CommerceCheckoutPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceCheckoutPage.svelte
new file mode 100644
index 0000000..99e0471
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceCheckoutPage.svelte
@@ -0,0 +1,366 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-checkout page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    CheckoutForm,
+    Container,
+    Group,
+    Link,
+    OrderSummary,
+    Stack,
+    Stepper,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type CartLine,
+    type Day,
+    type Payment,
+    type Promo,
+    type Step,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+  import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+  import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+  import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+  const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+  const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+  const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+  const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+  const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+  const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.commerceCheckout}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 8)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-checkout-title"
+        data-testid="catalog-block"
+        data-block="checkout"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-checkout-title">
+            {ui.blocks.names.checkout}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.checkout}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checkout-cards-label"
+          data-testid="variant"
+          data-block="checkout"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="checkout-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.checkout.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CheckoutForm
+              id="checkout-cards"
+              title={ui.commerce.checkout.title}
+              days={days}
+              payments={payments}
+              lines={cart}
+              rows={summary}
+              promos={promos}
+              labels={ui.commerce.checkout}
+              totals={ui.commerce.totals}
+              layout="cards"
+              summary="aside"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checkout-numbered-label"
+          data-testid="variant"
+          data-block="checkout"
+          data-variant="numbered"
+        >
+          <Title as={3} size="base" weight="bold" id="checkout-numbered-label" data-testid="variant-label">
+            {ui.blocks.variants.checkout.numbered}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CheckoutForm
+              id="checkout-numbered"
+              title={ui.commerce.checkout.title}
+              days={days}
+              payments={payments}
+              lines={cart}
+              rows={summary}
+              promos={promos}
+              labels={ui.commerce.checkout}
+              totals={ui.commerce.totals}
+              layout="numbered"
+              summary="aside"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checkout-noSummary-label"
+          data-testid="variant"
+          data-block="checkout"
+          data-variant="noSummary"
+        >
+          <Title as={3} size="base" weight="bold" id="checkout-noSummary-label" data-testid="variant-label">
+            {ui.blocks.variants.checkout.noSummary}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CheckoutForm
+              id="checkout-noSummary"
+              title={ui.commerce.checkout.title}
+              days={days}
+              payments={payments}
+              lines={cart}
+              rows={summary}
+              promos={promos}
+              labels={ui.commerce.checkout}
+              totals={ui.commerce.totals}
+              layout="cards"
+              summary="none"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.noSummary))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-summary-title"
+        data-testid="catalog-block"
+        data-block="summary"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-summary-title">
+            {ui.blocks.names.summary}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.summary}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="summary-card-label"
+          data-testid="variant"
+          data-block="summary"
+          data-variant="card"
+        >
+          <Title as={3} size="base" weight="bold" id="summary-card-label" data-testid="variant-label">
+            {ui.blocks.variants.summary.card}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderSummary
+              id="summary-card"
+              title={ui.commerce.summary.title}
+              rows={summary}
+              empty={ui.empty.summary}
+              labels={ui.commerce.summary}
+              layout="card"
+              cta="show"
+              note="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="summary-plain-label"
+          data-testid="variant"
+          data-block="summary"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="summary-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.summary.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderSummary
+              id="summary-plain"
+              title={ui.commerce.summary.title}
+              rows={summary}
+              empty={ui.empty.summary}
+              labels={ui.commerce.summary}
+              layout="plain"
+              cta="show"
+              note="hide"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.plain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="summary-noCta-label"
+          data-testid="variant"
+          data-block="summary"
+          data-variant="noCta"
+        >
+          <Title as={3} size="base" weight="bold" id="summary-noCta-label" data-testid="variant-label">
+            {ui.blocks.variants.summary.noCta}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderSummary
+              id="summary-noCta"
+              title={ui.commerce.summary.title}
+              rows={summary}
+              empty={ui.empty.summary}
+              labels={ui.commerce.summary}
+              layout="card"
+              cta="hide"
+              note="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.noCta))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="summary-muted-label"
+          data-testid="variant"
+          data-block="summary"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="summary-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.summary.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderSummary
+              id="summary-muted"
+              title={ui.commerce.summary.title}
+              rows={summary}
+              empty={ui.empty.summary}
+              labels={ui.commerce.summary}
+              layout="card"
+              cta="show"
+              note="show"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-stepper-title"
+        data-testid="catalog-block"
+        data-block="stepper"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-stepper-title">
+            {ui.blocks.names.stepper}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.stepper}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stepper-horizontal-label"
+          data-testid="variant"
+          data-block="stepper"
+          data-variant="horizontal"
+        >
+          <Title as={3} size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+            {ui.blocks.variants.stepper.horizontal}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Stepper
+              id="stepper-horizontal"
+              title={ui.onboarding.stepper.title}
+              steps={steps}
+              current={2}
+              stepLabel={ui.onboarding.stepper.stepLabel}
+              back={ui.onboarding.stepper.back}
+              next={ui.onboarding.stepper.next}
+              layout="horizontal"
+              marker="number"
+              summary="show"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/CommerceDeliveryPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceDeliveryPage.svelte
new file mode 100644
index 0000000..dce7109
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceDeliveryPage.svelte
@@ -0,0 +1,479 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-delivery page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    DeliveryInfo,
+    Group,
+    Link,
+    SlotBoard,
+    Stack,
+    StoreLocations,
+    Text,
+    Title,
+    ZoneTable,
+    tpl,
+    uniqLabel,
+    type Day,
+    type Feature,
+    type Store,
+    type Zone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+  import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+  import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+  import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+  const ZONES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "area": "metadata.area.value",
+    "price": "metadata.price.value",
+    "freeFrom": "metadata.freeFrom.value",
+    "minOrder": "metadata.minOrder.value",
+    "time": "metadata.time.value",
+    "express": "metadata.express.value",
+    "currency": "metadata.currency.value",
+  } as const;
+  const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+  const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const STORES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "kind": "metadata.store_kind.value",
+    "address": "metadata.address.value",
+    "hours": "metadata.hours.value",
+    "phone": "metadata.phone.value",
+    "note": "metadata.note.value",
+    "services": "metadata.services.value",
+  } as const;
+
+  const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+  const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+  const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+  const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.commerceDelivery}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 4, 12)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-delivery-title"
+        data-testid="catalog-block"
+        data-block="delivery"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-delivery-title">
+            {ui.blocks.names.delivery}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.delivery}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="delivery-full-label"
+          data-testid="variant"
+          data-block="delivery"
+          data-variant="full"
+        >
+          <Title as={3} size="base" weight="bold" id="delivery-full-label" data-testid="variant-label">
+            {ui.blocks.variants.delivery.full}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DeliveryInfo
+              id="delivery-full"
+              title={ui.commerce.delivery.title}
+              lead={ui.commerce.delivery.lead}
+              facts={deliveryfacts}
+              zones={zones}
+              labels={ui.commerce.delivery}
+              layout="full"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="delivery-split-label"
+          data-testid="variant"
+          data-block="delivery"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="delivery-split-label" data-testid="variant-label">
+            {ui.blocks.variants.delivery.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DeliveryInfo
+              id="delivery-split"
+              title={ui.commerce.delivery.title}
+              lead={ui.commerce.delivery.lead}
+              facts={deliveryfacts}
+              zones={zones}
+              labels={ui.commerce.delivery}
+              layout="split"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="delivery-facts-label"
+          data-testid="variant"
+          data-block="delivery"
+          data-variant="facts"
+        >
+          <Title as={3} size="base" weight="bold" id="delivery-facts-label" data-testid="variant-label">
+            {ui.blocks.variants.delivery.facts}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DeliveryInfo
+              id="delivery-facts"
+              title={ui.commerce.delivery.title}
+              lead={ui.commerce.delivery.lead}
+              facts={deliveryfacts}
+              zones={zones}
+              labels={ui.commerce.delivery}
+              layout="facts"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.facts))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-zones-title"
+        data-testid="catalog-block"
+        data-block="zones"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-zones-title">
+            {ui.blocks.names.zones}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.zones}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="zones-table-label"
+          data-testid="variant"
+          data-block="zones"
+          data-variant="table"
+        >
+          <Title as={3} size="base" weight="bold" id="zones-table-label" data-testid="variant-label">
+            {ui.blocks.variants.zones.table}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ZoneTable
+              id="zones-table"
+              title={ui.commerce.zones.title}
+              lead={ui.commerce.zones.lead}
+              zones={zones}
+              empty={ui.empty.zones}
+              labels={ui.commerce.zones}
+              layout="table"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="zones-cards-label"
+          data-testid="variant"
+          data-block="zones"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="zones-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.zones.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ZoneTable
+              id="zones-cards"
+              title={ui.commerce.zones.title}
+              lead={ui.commerce.zones.lead}
+              zones={zones}
+              empty={ui.empty.zones}
+              labels={ui.commerce.zones}
+              layout="cards"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="zones-tableMuted-label"
+          data-testid="variant"
+          data-block="zones"
+          data-variant="tableMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="zones-tableMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.zones.tableMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ZoneTable
+              id="zones-tableMuted"
+              title={ui.commerce.zones.title}
+              lead={ui.commerce.zones.lead}
+              zones={zones}
+              empty={ui.empty.zones}
+              labels={ui.commerce.zones}
+              layout="table"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.tableMuted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-slots-title"
+        data-testid="catalog-block"
+        data-block="slots"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-slots-title">
+            {ui.blocks.names.slots}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.slots}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="slots-split-label"
+          data-testid="variant"
+          data-block="slots"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="slots-split-label" data-testid="variant-label">
+            {ui.blocks.variants.slots.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SlotBoard
+              id="slots-split"
+              title={ui.commerce.slots.title}
+              lead={ui.commerce.slots.lead}
+              days={days}
+              empty={ui.empty.days}
+              zone={zones.find((i) => i.id === "zone-central")!}
+              labels={ui.commerce.slots}
+              layout="split"
+              item="card"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="slots-plain-label"
+          data-testid="variant"
+          data-block="slots"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="slots-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.slots.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SlotBoard
+              id="slots-plain"
+              title={ui.commerce.slots.title}
+              lead={ui.commerce.slots.lead}
+              days={days}
+              empty={ui.empty.days}
+              zone={zones.find((i) => i.id === "zone-central")!}
+              labels={ui.commerce.slots}
+              layout="split"
+              item="plain"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.plain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="slots-stacked-label"
+          data-testid="variant"
+          data-block="slots"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="slots-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.slots.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SlotBoard
+              id="slots-stacked"
+              title={ui.commerce.slots.title}
+              lead={ui.commerce.slots.lead}
+              days={days}
+              empty={ui.empty.days}
+              zone={zones.find((i) => i.id === "zone-central")!}
+              labels={ui.commerce.slots}
+              layout="stacked"
+              item="card"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.stacked))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-locations-title"
+        data-testid="catalog-block"
+        data-block="locations"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-locations-title">
+            {ui.blocks.names.locations}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.locations}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="locations-cards-label"
+          data-testid="variant"
+          data-block="locations"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="locations-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.locations.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreLocations
+              id="locations-cards"
+              title={ui.commerce.stores.title}
+              lead={ui.commerce.stores.lead}
+              stores={stores}
+              empty={ui.empty.stores}
+              kinds={ui.commerce.stores.kinds}
+              labels={ui.commerce.stores}
+              layout="cards"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="locations-list-label"
+          data-testid="variant"
+          data-block="locations"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="locations-list-label" data-testid="variant-label">
+            {ui.blocks.variants.locations.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreLocations
+              id="locations-list"
+              title={ui.commerce.stores.title}
+              lead={ui.commerce.stores.lead}
+              stores={stores}
+              empty={ui.empty.stores}
+              kinds={ui.commerce.stores.kinds}
+              labels={ui.commerce.stores}
+              layout="list"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="locations-map-label"
+          data-testid="variant"
+          data-block="locations"
+          data-variant="map"
+        >
+          <Title as={3} size="base" weight="bold" id="locations-map-label" data-testid="variant-label">
+            {ui.blocks.variants.locations.map}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreLocations
+              id="locations-map"
+              title={ui.commerce.stores.title}
+              lead={ui.commerce.stores.lead}
+              stores={stores}
+              empty={ui.empty.stores}
+              kinds={ui.commerce.stores.kinds}
+              labels={ui.commerce.stores}
+              layout="map"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.map))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/CommerceOrdersPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceOrdersPage.svelte
new file mode 100644
index 0000000..6cc9c7f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceOrdersPage.svelte
@@ -0,0 +1,187 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-orders page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    OrderTable,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Order,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+  const ORDERS_FIELDS = {
+    "id": "id",
+    "number": "title",
+    "date": "metadata.date.value|date",
+    "total": "metadata.total.value",
+    "currency": "metadata.currency.value",
+    "status": "metadata.order_status.value",
+    "items": "metadata.items.value",
+  } as const;
+
+  const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.commerceOrders}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 4)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-orders-title"
+        data-testid="catalog-block"
+        data-block="orders"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-orders-title">
+            {ui.blocks.names.orders}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.orders}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="orders-table-label"
+          data-testid="variant"
+          data-block="orders"
+          data-variant="table"
+        >
+          <Title as={3} size="base" weight="bold" id="orders-table-label" data-testid="variant-label">
+            {ui.blocks.variants.orders.table}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderTable
+              id="orders-table"
+              title={ui.commerce.orders.title}
+              orders={orders}
+              empty={ui.empty.orders}
+              statuses={ui.status}
+              labels={ui.commerce.orders}
+              layout="table"
+              pager="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="orders-cards-label"
+          data-testid="variant"
+          data-block="orders"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="orders-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.orders.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderTable
+              id="orders-cards"
+              title={ui.commerce.orders.title}
+              orders={orders}
+              empty={ui.empty.orders}
+              statuses={ui.status}
+              labels={ui.commerce.orders}
+              layout="cards"
+              pager="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="orders-noPager-label"
+          data-testid="variant"
+          data-block="orders"
+          data-variant="noPager"
+        >
+          <Title as={3} size="base" weight="bold" id="orders-noPager-label" data-testid="variant-label">
+            {ui.blocks.variants.orders.noPager}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderTable
+              id="orders-noPager"
+              title={ui.commerce.orders.title}
+              orders={orders}
+              empty={ui.empty.orders}
+              statuses={ui.status}
+              labels={ui.commerce.orders}
+              layout="table"
+              pager="hide"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.noPager))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="orders-compactMuted-label"
+          data-testid="variant"
+          data-block="orders"
+          data-variant="compactMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="orders-compactMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.orders.compactMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderTable
+              id="orders-compactMuted"
+              title={ui.commerce.orders.title}
+              orders={orders}
+              empty={ui.empty.orders}
+              statuses={ui.status}
+              labels={ui.commerce.orders}
+              layout="table"
+              pager="hide"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.compactMuted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/CommerceProductPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceProductPage.svelte
new file mode 100644
index 0000000..9aebeba
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceProductPage.svelte
@@ -0,0 +1,494 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-product page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProductDetail,
+    ProductInfo,
+    ReviewList,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Detail,
+    type Product,
+    type Review,
+    type Spec,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+  import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+  import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+  const REVIEWS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "author": "author_id|author",
+    "rating": "metadata.rating.value",
+    "text": "metadata.text.value",
+    "date": "metadata.date.value|date",
+  } as const;
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+  const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+  const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+  const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.commerceProduct}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 13)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-product-title"
+        data-testid="catalog-block"
+        data-block="product"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-product-title">
+            {ui.blocks.names.product}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.product}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-split-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="product-split-label" data-testid="variant-label">
+            {ui.blocks.variants.product.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-split"
+              product={products.find((i) => i.id === "product-lamp")!}
+              labels={ui.commerce.detail}
+              badges={ui.commerce.badges}
+              layout="split"
+              mediaSide="start"
+              thumbs="below"
+              buy="full"
+              tone="default"
+              density="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-splitEnd-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="splitEnd"
+        >
+          <Title as={3} size="base" weight="bold" id="product-splitEnd-label" data-testid="variant-label">
+            {ui.blocks.variants.product.splitEnd}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-splitEnd"
+              product={products.find((i) => i.id === "product-lamp")!}
+              labels={ui.commerce.detail}
+              badges={ui.commerce.badges}
+              layout="split"
+              mediaSide="end"
+              thumbs="below"
+              buy="full"
+              tone="default"
+              density="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.splitEnd))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-stacked-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="product-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.product.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-stacked"
+              product={products.find((i) => i.id === "product-lamp")!}
+              labels={ui.commerce.detail}
+              badges={ui.commerce.badges}
+              layout="stacked"
+              mediaSide="start"
+              thumbs="none"
+              buy="full"
+              tone="default"
+              density="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.stacked))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-compact-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="product-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.product.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-compact"
+              product={products.find((i) => i.id === "product-lamp")!}
+              labels={ui.commerce.detail}
+              badges={ui.commerce.badges}
+              layout="split"
+              mediaSide="start"
+              thumbs="none"
+              buy="compact"
+              tone="default"
+              density="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.compact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-muted-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="product-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.product.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-muted"
+              product={products.find((i) => i.id === "product-lamp")!}
+              labels={ui.commerce.detail}
+              badges={ui.commerce.badges}
+              layout="split"
+              mediaSide="start"
+              thumbs="below"
+              buy="full"
+              tone="muted"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-productinfo-title"
+        data-testid="catalog-block"
+        data-block="productinfo"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-productinfo-title">
+            {ui.blocks.names.productinfo}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.productinfo}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="productinfo-split-label"
+          data-testid="variant"
+          data-block="productinfo"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="productinfo-split-label" data-testid="variant-label">
+            {ui.blocks.variants.productinfo.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductInfo
+              id="productinfo-split"
+              title={ui.commerce.info.title}
+              details={details}
+              specs={specs}
+              labels={ui.commerce.info}
+              layout="split"
+              expand="first"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="productinfo-stacked-label"
+          data-testid="variant"
+          data-block="productinfo"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="productinfo-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.productinfo.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductInfo
+              id="productinfo-stacked"
+              title={ui.commerce.info.title}
+              details={details}
+              specs={specs}
+              labels={ui.commerce.info}
+              layout="stacked"
+              expand="first"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.stacked))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="productinfo-closed-label"
+          data-testid="variant"
+          data-block="productinfo"
+          data-variant="closed"
+        >
+          <Title as={3} size="base" weight="bold" id="productinfo-closed-label" data-testid="variant-label">
+            {ui.blocks.variants.productinfo.closed}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductInfo
+              id="productinfo-closed"
+              title={ui.commerce.info.title}
+              details={details}
+              specs={specs}
+              labels={ui.commerce.info}
+              layout="split"
+              expand="none"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.closed))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-reviews-title"
+        data-testid="catalog-block"
+        data-block="reviews"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-reviews-title">
+            {ui.blocks.names.reviews}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.reviews}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-list-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="reviews-list-label" data-testid="variant-label">
+            {ui.blocks.variants.reviews.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-list"
+              title={ui.commerce.reviews.title}
+              reviews={reviews}
+              labels={ui.commerce.reviewLabels}
+              layout="list"
+              item="card"
+              avatar="none"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-grid-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="grid"
+        >
+          <Title as={3} size="base" weight="bold" id="reviews-grid-label" data-testid="variant-label">
+            {ui.blocks.variants.reviews.grid}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-grid"
+              title={ui.commerce.reviews.title}
+              reviews={reviews}
+              labels={ui.commerce.reviewLabels}
+              layout="grid"
+              item="card"
+              avatar="none"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-plain-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="reviews-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.reviews.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-plain"
+              title={ui.commerce.reviews.title}
+              reviews={reviews}
+              labels={ui.commerce.reviewLabels}
+              layout="list"
+              item="plain"
+              avatar="none"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.plain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-avatars-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="avatars"
+        >
+          <Title as={3} size="base" weight="bold" id="reviews-avatars-label" data-testid="variant-label">
+            {ui.blocks.variants.reviews.avatars}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-avatars"
+              title={ui.commerce.reviews.title}
+              reviews={reviews}
+              labels={ui.commerce.reviewLabels}
+              layout="list"
+              item="card"
+              avatar="image"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.avatars))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-mutedGrid-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="mutedGrid"
+        >
+          <Title as={3} size="base" weight="bold" id="reviews-mutedGrid-label" data-testid="variant-label">
+            {ui.blocks.variants.reviews.mutedGrid}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-mutedGrid"
+              title={ui.commerce.reviews.title}
+              reviews={reviews}
+              labels={ui.commerce.reviewLabels}
+              layout="grid"
+              item="card"
+              avatar="image"
+              tone="muted"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.mutedGrid))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/CommerceProductsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceProductsPage.svelte
new file mode 100644
index 0000000..af6c122
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceProductsPage.svelte
@@ -0,0 +1,351 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-products page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProductGrid,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Product,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.commerceProducts}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 9)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-products-title"
+        data-testid="catalog-block"
+        data-block="products"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-products-title">
+            {ui.blocks.names.products}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.products}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-grid3-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="grid3"
+        >
+          <Title as={3} size="base" weight="bold" id="products-grid3-label" data-testid="variant-label">
+            {ui.blocks.variants.products.grid3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-grid3"
+              title={ui.commerce.products.title}
+              products={products}
+              labels={ui.commerce.productLabels}
+              badges={ui.commerce.badges}
+              layout="grid"
+              cols="1-3"
+              ratio="4/3"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-grid4-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="grid4"
+        >
+          <Title as={3} size="base" weight="bold" id="products-grid4-label" data-testid="variant-label">
+            {ui.blocks.variants.products.grid4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-grid4"
+              title={ui.commerce.products.title}
+              products={products}
+              labels={ui.commerce.productLabels}
+              badges={ui.commerce.badges}
+              layout="grid"
+              cols="1-4"
+              ratio="1/1"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-grid2-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="grid2"
+        >
+          <Title as={3} size="base" weight="bold" id="products-grid2-label" data-testid="variant-label">
+            {ui.blocks.variants.products.grid2}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-grid2"
+              title={ui.commerce.products.title}
+              products={products}
+              labels={ui.commerce.productLabels}
+              badges={ui.commerce.badges}
+              layout="grid"
+              cols="1-2"
+              ratio="3/4"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid2))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-list-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="products-list-label" data-testid="variant-label">
+            {ui.blocks.variants.products.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-list"
+              title={ui.commerce.products.title}
+              products={products}
+              labels={ui.commerce.productLabels}
+              badges={ui.commerce.badges}
+              layout="list"
+              cols="1-3"
+              ratio="4/3"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-catalog-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="catalog"
+        >
+          <Title as={3} size="base" weight="bold" id="products-catalog-label" data-testid="variant-label">
+            {ui.blocks.variants.products.catalog}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-catalog"
+              title={ui.commerce.products.title}
+              products={products}
+              labels={ui.commerce.productLabels}
+              badges={ui.commerce.badges}
+              layout="grid"
+              cols="1-4"
+              ratio="1/1"
+              rating="hide"
+              action="button"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-browse-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="browse"
+        >
+          <Title as={3} size="base" weight="bold" id="products-browse-label" data-testid="variant-label">
+            {ui.blocks.variants.products.browse}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-browse"
+              title={ui.commerce.products.title}
+              products={products}
+              labels={ui.commerce.productLabels}
+              badges={ui.commerce.badges}
+              layout="grid"
+              cols="1-3"
+              ratio="4/3"
+              rating="show"
+              action="none"
+              tone="muted"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-showcase-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="showcase"
+        >
+          <Title as={3} size="base" weight="bold" id="products-showcase-label" data-testid="variant-label">
+            {ui.blocks.variants.products.showcase}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-showcase"
+              title={ui.commerce.products.title}
+              products={products}
+              labels={ui.commerce.productLabels}
+              badges={ui.commerce.badges}
+              layout="grid"
+              cols="1-3"
+              ratio="3/4"
+              rating="show"
+              action="button"
+              tone="default"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-rail-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="rail"
+        >
+          <Title as={3} size="base" weight="bold" id="products-rail-label" data-testid="variant-label">
+            {ui.blocks.variants.products.rail}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-rail"
+              title={ui.commerce.products.title}
+              products={products}
+              labels={ui.commerce.productLabels}
+              badges={ui.commerce.badges}
+              layout="rail"
+              cols="1-3"
+              ratio="4/3"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-railCompact-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="railCompact"
+        >
+          <Title as={3} size="base" weight="bold" id="products-railCompact-label" data-testid="variant-label">
+            {ui.blocks.variants.products.railCompact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-railCompact"
+              title={ui.commerce.products.title}
+              products={products}
+              labels={ui.commerce.productLabels}
+              badges={ui.commerce.badges}
+              layout="rail"
+              cols="1-3"
+              ratio="1/1"
+              rating="hide"
+              action="button"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/CommerceStorefrontPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceStorefrontPage.svelte
new file mode 100644
index 0000000..d22815f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/CommerceStorefrontPage.svelte
@@ -0,0 +1,393 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-storefront page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    HeroClassic,
+    Link,
+    Stack,
+    StoreHero,
+    Text,
+    Title,
+    UspStrip,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+  const STOREHERO_ACTIONS = {
+    mode: "two",
+    cta: ui.commerce.storeHero.cta,
+    href: "#/catalog",
+    secondary: ui.commerce.storeHero.secondary,
+    secondaryHref: "#/delivery",
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.commerce.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.commerceStorefront}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 10)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-hero-title"
+        data-testid="catalog-block"
+        data-block="hero"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-hero-title">
+            {ui.blocks.names.hero}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.hero}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-shop-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="shop"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.shop}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-shop"
+              title={ui.cases.shop.hero.title}
+              text={ui.cases.shop.hero.text}
+              actions={{
+                cta: ui.cases.shop.hero.cta,
+                href: "#/pricing",
+                secondary: ui.cases.shop.hero.secondary,
+                secondaryHref: "#/pricing",
+                emailLabel: ui.promo.newsletter.label,
+                mode: "one",
+              }}
+              media={{
+                codeTitle: ui.vibe.code.title,
+                prompt: ui.vibe.code.prompt,
+                lines: terminal,
+                kind: "image",
+                side: "start",
+              }}
+              layout="split"
+              scale="default"
+              tone="muted"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-storehero-title"
+        data-testid="catalog-block"
+        data-block="storehero"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-storehero-title">
+            {ui.blocks.names.storehero}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.storehero}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storehero-overlay-label"
+          data-testid="variant"
+          data-block="storehero"
+          data-variant="overlay"
+        >
+          <Title as={3} size="base" weight="bold" id="storehero-overlay-label" data-testid="variant-label">
+            {ui.blocks.variants.storehero.overlay}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreHero
+              id="storehero-overlay"
+              title={ui.commerce.storeHero.title}
+              lead={ui.commerce.storeHero.lead}
+              badge={ui.commerce.storeHero.badge}
+              perks={perks}
+              card={ui.commerce.storeHero.card}
+              actions={STOREHERO_ACTIONS}
+              layout="overlay"
+              mediaSide="end"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlay))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storehero-overlayStart-label"
+          data-testid="variant"
+          data-block="storehero"
+          data-variant="overlayStart"
+        >
+          <Title as={3} size="base" weight="bold" id="storehero-overlayStart-label" data-testid="variant-label">
+            {ui.blocks.variants.storehero.overlayStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreHero
+              id="storehero-overlayStart"
+              title={ui.commerce.storeHero.title}
+              lead={ui.commerce.storeHero.lead}
+              badge={ui.commerce.storeHero.badge}
+              perks={perks}
+              card={ui.commerce.storeHero.card}
+              actions={STOREHERO_ACTIONS}
+              layout="overlay"
+              mediaSide="start"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlayStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storehero-backdrop-label"
+          data-testid="variant"
+          data-block="storehero"
+          data-variant="backdrop"
+        >
+          <Title as={3} size="base" weight="bold" id="storehero-backdrop-label" data-testid="variant-label">
+            {ui.blocks.variants.storehero.backdrop}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreHero
+              id="storehero-backdrop"
+              title={ui.commerce.storeHero.title}
+              lead={ui.commerce.storeHero.lead}
+              badge={ui.commerce.storeHero.badge}
+              perks={perks}
+              card={ui.commerce.storeHero.card}
+              actions={STOREHERO_ACTIONS}
+              layout="backdrop"
+              mediaSide="end"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.backdrop))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storehero-muted-label"
+          data-testid="variant"
+          data-block="storehero"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="storehero-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.storehero.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreHero
+              id="storehero-muted"
+              title={ui.commerce.storeHero.title}
+              lead={ui.commerce.storeHero.lead}
+              badge={ui.commerce.storeHero.badge}
+              perks={perks}
+              card={ui.commerce.storeHero.card}
+              actions={{ ...STOREHERO_ACTIONS, mode: "one" }}
+              layout="overlay"
+              mediaSide="end"
+              tone="muted"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-usp-title"
+        data-testid="catalog-block"
+        data-block="usp"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-usp-title">
+            {ui.blocks.names.usp}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.usp}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-strip-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="strip"
+        >
+          <Title as={3} size="base" weight="bold" id="usp-strip-label" data-testid="variant-label">
+            {ui.blocks.variants.usp.strip}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-strip"
+              perks={perks}
+              empty={ui.empty.perks}
+              layout="strip"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-cards-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="usp-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.usp.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-cards"
+              perks={perks}
+              empty={ui.empty.perks}
+              layout="cards"
+              tone="default"
+              density="default"
+              title={ui.commerce.usp.title}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-stripCompact-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="stripCompact"
+        >
+          <Title as={3} size="base" weight="bold" id="usp-stripCompact-label" data-testid="variant-label">
+            {ui.blocks.variants.usp.stripCompact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-stripCompact"
+              perks={perks}
+              empty={ui.empty.perks}
+              layout="strip"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.stripCompact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-bar-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="bar"
+        >
+          <Title as={3} size="base" weight="bold" id="usp-bar-label" data-testid="variant-label">
+            {ui.blocks.variants.usp.bar}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-bar"
+              perks={perks}
+              empty={ui.empty.perks}
+              layout="bar"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.bar))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-barMuted-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="barMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="usp-barMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.usp.barMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-barMuted"
+              perks={perks}
+              empty={ui.empty.perks}
+              layout="bar"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.barMuted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/ContentArticlePage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/ContentArticlePage.svelte
new file mode 100644
index 0000000..3e66e7f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/ContentArticlePage.svelte
@@ -0,0 +1,171 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-article page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    ArticleBody,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Section,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+  const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+  const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.contentArticle}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 4)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-article-title"
+        data-testid="catalog-block"
+        data-block="article"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-article-title">
+            {ui.blocks.names.article}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.article}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="article-column-label"
+          data-testid="variant"
+          data-block="article"
+          data-variant="column"
+        >
+          <Title as={3} size="base" weight="bold" id="article-column-label" data-testid="variant-label">
+            {ui.blocks.variants.article.column}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ArticleBody
+              id="article-column"
+              title={ui.vibe.article.title}
+              sections={article}
+              empty={ui.empty.sections}
+              tocTitle={ui.vibe.article.toc}
+              layout="column"
+              quotes="show"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="article-toc-label"
+          data-testid="variant"
+          data-block="article"
+          data-variant="toc"
+        >
+          <Title as={3} size="base" weight="bold" id="article-toc-label" data-testid="variant-label">
+            {ui.blocks.variants.article.toc}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ArticleBody
+              id="article-toc"
+              title={ui.vibe.article.title}
+              sections={article}
+              empty={ui.empty.sections}
+              tocTitle={ui.vibe.article.toc}
+              layout="toc"
+              quotes="show"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="article-plain-label"
+          data-testid="variant"
+          data-block="article"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="article-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.article.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ArticleBody
+              id="article-plain"
+              title={ui.vibe.article.title}
+              sections={article}
+              empty={ui.empty.sections}
+              tocTitle={ui.vibe.article.toc}
+              layout="column"
+              quotes="hide"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="article-muted-label"
+          data-testid="variant"
+          data-block="article"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="article-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.article.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ArticleBody
+              id="article-muted"
+              title={ui.vibe.article.title}
+              sections={article}
+              empty={ui.empty.sections}
+              tocTitle={ui.vibe.article.toc}
+              layout="column"
+              quotes="show"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/ContentBlogPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/ContentBlogPage.svelte
new file mode 100644
index 0000000..c5a64df
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/ContentBlogPage.svelte
@@ -0,0 +1,354 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-blog page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PostGrid,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Post,
+    type PostTopic,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+  const POSTS_FILTER = { topics, label: ui.vibe.posts.topics, topic: "" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.contentBlog}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 9)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-posts-title"
+        data-testid="catalog-block"
+        data-block="posts"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-posts-title">
+            {ui.blocks.names.posts}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.posts}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-grid-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="grid"
+        >
+          <Title as={3} size="base" weight="bold" id="posts-grid-label" data-testid="variant-label">
+            {ui.blocks.variants.posts.grid}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-grid"
+              title={ui.content.posts.title}
+              posts={posts}
+              labels={ui.content.labels}
+              filter={{ ...POSTS_FILTER, mode: "none" }}
+              action={{ label: ui.content.posts.action, href: "#/" }}
+              layout="grid"
+              cols="1-3"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-filters-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="filters"
+        >
+          <Title as={3} size="base" weight="bold" id="posts-filters-label" data-testid="variant-label">
+            {ui.blocks.variants.posts.filters}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-filters"
+              title={ui.content.posts.title}
+              posts={posts}
+              labels={ui.content.labels}
+              filter={{ ...POSTS_FILTER, topic: "Design", mode: "topics" }}
+              action={{ label: ui.content.posts.action, href: "#/" }}
+              layout="grid"
+              cols="1-3"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-twoUp-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="twoUp"
+        >
+          <Title as={3} size="base" weight="bold" id="posts-twoUp-label" data-testid="variant-label">
+            {ui.blocks.variants.posts.twoUp}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-twoUp"
+              title={ui.content.posts.title}
+              posts={posts}
+              labels={ui.content.labels}
+              filter={{ ...POSTS_FILTER, mode: "none" }}
+              action={{ label: ui.content.posts.action, href: "#/" }}
+              layout="grid"
+              cols="1-2"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-row4-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="row4"
+        >
+          <Title as={3} size="base" weight="bold" id="posts-row4-label" data-testid="variant-label">
+            {ui.blocks.variants.posts.row4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-row4"
+              title={ui.content.posts.title}
+              posts={posts}
+              labels={ui.content.labels}
+              filter={{ ...POSTS_FILTER, mode: "none" }}
+              action={{ label: ui.content.posts.action, href: "#/" }}
+              layout="grid"
+              cols="1-4"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.row4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-news4-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="news4"
+        >
+          <Title as={3} size="base" weight="bold" id="posts-news4-label" data-testid="variant-label">
+            {ui.blocks.variants.posts.news4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-news4"
+              title={ui.content.posts.title}
+              posts={posts}
+              labels={ui.content.labels}
+              filter={{ ...POSTS_FILTER, mode: "none" }}
+              action={{ label: ui.content.posts.action, href: "#/" }}
+              layout="grid"
+              cols="1-4"
+              media="image"
+              meta="news"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.news4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-list-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="posts-list-label" data-testid="variant-label">
+            {ui.blocks.variants.posts.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-list"
+              title={ui.content.posts.title}
+              posts={posts}
+              labels={ui.content.labels}
+              filter={{ ...POSTS_FILTER, mode: "none" }}
+              action={{ label: ui.content.posts.action, href: "#/" }}
+              layout="list"
+              cols="1-3"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-magazine-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="magazine"
+        >
+          <Title as={3} size="base" weight="bold" id="posts-magazine-label" data-testid="variant-label">
+            {ui.blocks.variants.posts.magazine}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-magazine"
+              title={ui.content.posts.title}
+              posts={posts}
+              labels={ui.content.labels}
+              filter={{ ...POSTS_FILTER, mode: "none" }}
+              action={{ label: ui.content.posts.action, href: "#/" }}
+              layout="magazine"
+              cols="1-3"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-textOnly-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="textOnly"
+        >
+          <Title as={3} size="base" weight="bold" id="posts-textOnly-label" data-testid="variant-label">
+            {ui.blocks.variants.posts.textOnly}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-textOnly"
+              title={ui.content.posts.title}
+              posts={posts}
+              labels={ui.content.labels}
+              filter={{ ...POSTS_FILTER, mode: "none" }}
+              action={{ label: ui.content.posts.action, href: "#/" }}
+              layout="grid"
+              cols="1-3"
+              media="none"
+              meta="full"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-digest-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="digest"
+        >
+          <Title as={3} size="base" weight="bold" id="posts-digest-label" data-testid="variant-label">
+            {ui.blocks.variants.posts.digest}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-digest"
+              title={ui.content.posts.title}
+              posts={posts}
+              labels={ui.content.labels}
+              filter={{ ...POSTS_FILTER, mode: "none" }}
+              action={{ label: ui.content.posts.action, href: "#/" }}
+              layout="grid"
+              cols="1-3"
+              media="none"
+              meta="short"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/ContentPostHeaderPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/ContentPostHeaderPage.svelte
new file mode 100644
index 0000000..e0274f1
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/ContentPostHeaderPage.svelte
@@ -0,0 +1,182 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-post-header page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PostHeader,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Post,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.contentPostHeader}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 4)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-postheader-title"
+        data-testid="catalog-block"
+        data-block="postheader"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-postheader-title">
+            {ui.blocks.names.postheader}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.postheader}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postheader-start-label"
+          data-testid="variant"
+          data-block="postheader"
+          data-variant="start"
+        >
+          <Title as={3} size="base" weight="bold" id="postheader-start-label" data-testid="variant-label">
+            {ui.blocks.variants.postheader.start}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostHeader
+              id="postheader-start"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.labels}
+              layout="start"
+              cover="show"
+              meta="full"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.start))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postheader-center-label"
+          data-testid="variant"
+          data-block="postheader"
+          data-variant="center"
+        >
+          <Title as={3} size="base" weight="bold" id="postheader-center-label" data-testid="variant-label">
+            {ui.blocks.variants.postheader.center}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostHeader
+              id="postheader-center"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.labels}
+              layout="center"
+              cover="show"
+              meta="full"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.center))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postheader-noCover-label"
+          data-testid="variant"
+          data-block="postheader"
+          data-variant="noCover"
+        >
+          <Title as={3} size="base" weight="bold" id="postheader-noCover-label" data-testid="variant-label">
+            {ui.blocks.variants.postheader.noCover}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostHeader
+              id="postheader-noCover"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.labels}
+              layout="start"
+              cover="hide"
+              meta="full"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.noCover))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postheader-minimal-label"
+          data-testid="variant"
+          data-block="postheader"
+          data-variant="minimal"
+        >
+          <Title as={3} size="base" weight="bold" id="postheader-minimal-label" data-testid="variant-label">
+            {ui.blocks.variants.postheader.minimal}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostHeader
+              id="postheader-minimal"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.labels}
+              layout="center"
+              cover="hide"
+              meta="short"
+              tone="muted"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.minimal))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.svelte
new file mode 100644
index 0000000..dd8298c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.svelte
@@ -0,0 +1,268 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-post-header-split page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PostSplit,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type NavLink,
+    type Post,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+  import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+  const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+  const POSTSPLIT_EXTRAS = {
+    role: ui.content.postSplit.role,
+    bio: ui.content.postSplit.bio,
+    views: ui.content.postSplit.views,
+    likes: ui.content.postSplit.likes,
+    tags: posttags,
+    outline,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.contentPostHeaderSplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 6)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-postsplit-title"
+        data-testid="catalog-block"
+        data-block="postsplit"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-postsplit-title">
+            {ui.blocks.names.postsplit}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.postsplit}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-centerShare-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="centerShare"
+        >
+          <Title as={3} size="base" weight="bold" id="postsplit-centerShare-label" data-testid="variant-label">
+            {ui.blocks.variants.postsplit.centerShare}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-centerShare"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.postSplit.labels}
+              extras={POSTSPLIT_EXTRAS}
+              layout="center"
+              mediaSide="end"
+              author="line"
+              cover="wide"
+              actions="pair"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.centerShare))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-splitTags-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="splitTags"
+        >
+          <Title as={3} size="base" weight="bold" id="postsplit-splitTags-label" data-testid="variant-label">
+            {ui.blocks.variants.postsplit.splitTags}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-splitTags"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.postSplit.labels}
+              extras={POSTSPLIT_EXTRAS}
+              layout="split"
+              mediaSide="end"
+              author="line"
+              cover="wide"
+              actions="pair"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitTags))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-splitBioStart-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="splitBioStart"
+        >
+          <Title as={3} size="base" weight="bold" id="postsplit-splitBioStart-label" data-testid="variant-label">
+            {ui.blocks.variants.postsplit.splitBioStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-splitBioStart"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.postSplit.labels}
+              extras={POSTSPLIT_EXTRAS}
+              layout="split"
+              mediaSide="start"
+              author="bio"
+              cover="wide"
+              actions="wide"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitBioStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-splitSquare-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="splitSquare"
+        >
+          <Title as={3} size="base" weight="bold" id="postsplit-splitSquare-label" data-testid="variant-label">
+            {ui.blocks.variants.postsplit.splitSquare}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-splitSquare"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.postSplit.labels}
+              extras={POSTSPLIT_EXTRAS}
+              layout="split"
+              mediaSide="end"
+              author="line"
+              cover="square"
+              actions="icons"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitSquare))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-outlineStart-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="outlineStart"
+        >
+          <Title as={3} size="base" weight="bold" id="postsplit-outlineStart-label" data-testid="variant-label">
+            {ui.blocks.variants.postsplit.outlineStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-outlineStart"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.postSplit.labels}
+              extras={POSTSPLIT_EXTRAS}
+              layout="outline"
+              mediaSide="start"
+              author="line"
+              cover="wide"
+              actions="pair"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.outlineStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-splitStats-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="splitStats"
+        >
+          <Title as={3} size="base" weight="bold" id="postsplit-splitStats-label" data-testid="variant-label">
+            {ui.blocks.variants.postsplit.splitStats}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-splitStats"
+              post={posts.find((i) => i.id === "post-static-first")!}
+              labels={ui.content.postSplit.labels}
+              extras={POSTSPLIT_EXTRAS}
+              layout="split"
+              mediaSide="end"
+              author="card"
+              cover="wide"
+              actions="pair"
+              tone="muted"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitStats))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/ContentPostShowcasePage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/ContentPostShowcasePage.svelte
new file mode 100644
index 0000000..8539aee
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/ContentPostShowcasePage.svelte
@@ -0,0 +1,198 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-post-showcase page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PostShowcase,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Post,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.contentPostShowcase}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 4)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-postshowcase-title"
+        data-testid="catalog-block"
+        data-block="postshowcase"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-postshowcase-title">
+            {ui.blocks.names.postshowcase}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.postshowcase}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postshowcase-introCards-label"
+          data-testid="variant"
+          data-block="postshowcase"
+          data-variant="introCards"
+        >
+          <Title as={3} size="base" weight="bold" id="postshowcase-introCards-label" data-testid="variant-label">
+            {ui.blocks.variants.postshowcase.introCards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostShowcase
+              id="postshowcase-introCards"
+              title={ui.content.postShowcase.title}
+              lead={ui.content.postShowcase.lead}
+              badge={ui.content.postShowcase.badge}
+              posts={posts}
+              empty={ui.empty.posts}
+              labels={ui.content.labels}
+              action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+              layout="intro"
+              cols="3"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postshowcase-featuredEnd-label"
+          data-testid="variant"
+          data-block="postshowcase"
+          data-variant="featuredEnd"
+        >
+          <Title as={3} size="base" weight="bold" id="postshowcase-featuredEnd-label" data-testid="variant-label">
+            {ui.blocks.variants.postshowcase.featuredEnd}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostShowcase
+              id="postshowcase-featuredEnd"
+              title={ui.content.postShowcase.title}
+              lead={ui.content.postShowcase.lead}
+              badge={ui.content.postShowcase.badge}
+              posts={posts}
+              empty={ui.empty.posts}
+              labels={ui.content.labels}
+              action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+              layout="featured"
+              cols="3"
+              mediaSide="end"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.featuredEnd))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postshowcase-overlay3-label"
+          data-testid="variant"
+          data-block="postshowcase"
+          data-variant="overlay3"
+        >
+          <Title as={3} size="base" weight="bold" id="postshowcase-overlay3-label" data-testid="variant-label">
+            {ui.blocks.variants.postshowcase.overlay3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostShowcase
+              id="postshowcase-overlay3"
+              title={ui.content.postShowcase.title}
+              lead={ui.content.postShowcase.lead}
+              badge={ui.content.postShowcase.badge}
+              posts={posts}
+              empty={ui.empty.posts}
+              labels={ui.content.labels}
+              action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+              layout="overlay"
+              cols="3"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postshowcase-overlay2-label"
+          data-testid="variant"
+          data-block="postshowcase"
+          data-variant="overlay2"
+        >
+          <Title as={3} size="base" weight="bold" id="postshowcase-overlay2-label" data-testid="variant-label">
+            {ui.blocks.variants.postshowcase.overlay2}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostShowcase
+              id="postshowcase-overlay2"
+              title={ui.content.postShowcase.title}
+              lead={ui.content.postShowcase.lead}
+              badge={ui.content.postShowcase.badge}
+              posts={posts}
+              empty={ui.empty.posts}
+              labels={ui.content.labels}
+              action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+              layout="overlay"
+              cols="2"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay2))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/ContentStoryTabsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/ContentStoryTabsPage.svelte
new file mode 100644
index 0000000..88862e1
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/ContentStoryTabsPage.svelte
@@ -0,0 +1,151 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-story-tabs page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    StoryTabs,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Milestone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+  const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+  const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.contentStoryTabs}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 3)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-storytabs-title"
+        data-testid="catalog-block"
+        data-block="storytabs"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-storytabs-title">
+            {ui.blocks.names.storytabs}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.storytabs}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storytabs-yearTabs-label"
+          data-testid="variant"
+          data-block="storytabs"
+          data-variant="yearTabs"
+        >
+          <Title as={3} size="base" weight="bold" id="storytabs-yearTabs-label" data-testid="variant-label">
+            {ui.blocks.variants.storytabs.yearTabs}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoryTabs
+              id="storytabs-yearTabs"
+              title={ui.company.storyTabs.title}
+              lead={ui.company.storyTabs.lead}
+              badge={ui.company.storyTabs.badge}
+              steps={milestones}
+              empty={ui.empty.milestones}
+              active="milestone-runtimes"
+              labels={ui.company.storyTabs.labels}
+              layout="years"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storytabs-carouselSplit-label"
+          data-testid="variant"
+          data-block="storytabs"
+          data-variant="carouselSplit"
+        >
+          <Title as={3} size="base" weight="bold" id="storytabs-carouselSplit-label" data-testid="variant-label">
+            {ui.blocks.variants.storytabs.carouselSplit}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoryTabs
+              id="storytabs-carouselSplit"
+              title={ui.company.storyTabs.title}
+              lead={ui.company.storyTabs.lead}
+              badge={ui.company.storyTabs.badge}
+              steps={milestones}
+              empty={ui.empty.milestones}
+              active="milestone-runtimes"
+              labels={ui.company.storyTabs.labels}
+              layout="carousel"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.carouselSplit))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storytabs-yearTabsMuted-label"
+          data-testid="variant"
+          data-block="storytabs"
+          data-variant="yearTabsMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="storytabs-yearTabsMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.storytabs.yearTabsMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoryTabs
+              id="storytabs-yearTabsMuted"
+              title={ui.company.storyTabs.title}
+              lead={ui.company.storyTabs.lead}
+              badge={ui.company.storyTabs.badge}
+              steps={milestones}
+              empty={ui.empty.milestones}
+              active="milestone-runtimes"
+              labels={ui.company.storyTabs.labels}
+              layout="years"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabsMuted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/ContentTimelinePage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/ContentTimelinePage.svelte
new file mode 100644
index 0000000..4eb2a10
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/ContentTimelinePage.svelte
@@ -0,0 +1,171 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-timeline page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    MilestoneTimeline,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Milestone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+  const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+  const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.content.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.contentTimeline}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 4)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-timeline-title"
+        data-testid="catalog-block"
+        data-block="timeline"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-timeline-title">
+            {ui.blocks.names.timeline}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.timeline}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="timeline-split-label"
+          data-testid="variant"
+          data-block="timeline"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="timeline-split-label" data-testid="variant-label">
+            {ui.blocks.variants.timeline.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MilestoneTimeline
+              id="timeline-split"
+              title={ui.company.timeline.title}
+              lead={ui.company.timeline.lead}
+              milestones={milestones}
+              empty={ui.empty.milestones}
+              layout="split"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="timeline-stacked-label"
+          data-testid="variant"
+          data-block="timeline"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="timeline-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.timeline.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MilestoneTimeline
+              id="timeline-stacked"
+              title={ui.company.timeline.title}
+              lead={ui.company.timeline.lead}
+              milestones={milestones}
+              empty={ui.empty.milestones}
+              layout="stacked"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.stacked))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="timeline-row-label"
+          data-testid="variant"
+          data-block="timeline"
+          data-variant="row"
+        >
+          <Title as={3} size="base" weight="bold" id="timeline-row-label" data-testid="variant-label">
+            {ui.blocks.variants.timeline.row}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MilestoneTimeline
+              id="timeline-row"
+              title={ui.company.timeline.title}
+              lead={ui.company.timeline.lead}
+              milestones={milestones}
+              empty={ui.empty.milestones}
+              layout="row"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.row))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="timeline-rowMuted-label"
+          data-testid="variant"
+          data-block="timeline"
+          data-variant="rowMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="timeline-rowMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.timeline.rowMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MilestoneTimeline
+              id="timeline-rowMuted"
+              title={ui.company.timeline.title}
+              lead={ui.company.timeline.lead}
+              milestones={milestones}
+              empty={ui.empty.milestones}
+              layout="row"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.rowMuted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/IndexPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/IndexPage.svelte
new file mode 100644
index 0000000..56b3832
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/IndexPage.svelte
@@ -0,0 +1,495 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The index page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Container, Link, List, ListItem, Stack, Text, Title, tpl } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const CATALOG = [
+    {
+      id: "marketing",
+      titleId: "section-marketing-title",
+      title: ui.catalog.sections.marketing.title,
+      text: ui.catalog.sections.marketing.text,
+      categories: [
+        {
+          id: "marketing-navigation",
+          href: "#/marketing-navigation",
+          name: ui.catalog.categories.marketingNavigation,
+          blocks: 3,
+          variants: 14,
+        },
+        { id: "marketing-hero", href: "#/marketing-hero", name: ui.catalog.categories.marketingHero, blocks: 1, variants: 15 },
+        {
+          id: "marketing-hero-split",
+          href: "#/marketing-hero-split",
+          name: ui.catalog.categories.marketingHeroSplit,
+          blocks: 1,
+          variants: 7,
+        },
+        {
+          id: "marketing-page-head",
+          href: "#/marketing-page-head",
+          name: ui.catalog.categories.marketingPageHead,
+          blocks: 1,
+          variants: 3,
+        },
+        {
+          id: "marketing-page-trail",
+          href: "#/marketing-page-trail",
+          name: ui.catalog.categories.marketingPageTrail,
+          blocks: 1,
+          variants: 4,
+        },
+        { id: "marketing-features", href: "#/marketing-features", name: ui.catalog.categories.marketingFeatures, blocks: 3, variants: 17 },
+        {
+          id: "marketing-features-split",
+          href: "#/marketing-features-split",
+          name: ui.catalog.categories.marketingFeaturesSplit,
+          blocks: 1,
+          variants: 5,
+        },
+        {
+          id: "marketing-feature-cards",
+          href: "#/marketing-feature-cards",
+          name: ui.catalog.categories.marketingFeatureCards,
+          blocks: 1,
+          variants: 4,
+        },
+        {
+          id: "marketing-media-list",
+          href: "#/marketing-media-list",
+          name: ui.catalog.categories.marketingMediaList,
+          blocks: 1,
+          variants: 6,
+        },
+        {
+          id: "marketing-showcases",
+          href: "#/marketing-showcases",
+          name: ui.catalog.categories.marketingShowcases,
+          blocks: 4,
+          variants: 15,
+        },
+        {
+          id: "marketing-how-it-works",
+          href: "#/marketing-how-it-works",
+          name: ui.catalog.categories.marketingHowItWorks,
+          blocks: 1,
+          variants: 6,
+        },
+        { id: "marketing-proof", href: "#/marketing-proof", name: ui.catalog.categories.marketingProof, blocks: 3, variants: 14 },
+        { id: "marketing-stats", href: "#/marketing-stats", name: ui.catalog.categories.marketingStats, blocks: 1, variants: 8 },
+        {
+          id: "marketing-testimonials",
+          href: "#/marketing-testimonials",
+          name: ui.catalog.categories.marketingTestimonials,
+          blocks: 1,
+          variants: 10,
+        },
+        {
+          id: "marketing-testimonials-split",
+          href: "#/marketing-testimonials-split",
+          name: ui.catalog.categories.marketingTestimonialsSplit,
+          blocks: 1,
+          variants: 6,
+        },
+        { id: "marketing-pricing", href: "#/marketing-pricing", name: ui.catalog.categories.marketingPricing, blocks: 2, variants: 13 },
+        {
+          id: "marketing-pricing-tools",
+          href: "#/marketing-pricing-tools",
+          name: ui.catalog.categories.marketingPricingTools,
+          blocks: 3,
+          variants: 12,
+        },
+        { id: "marketing-faq", href: "#/marketing-faq", name: ui.catalog.categories.marketingFaq, blocks: 2, variants: 14 },
+        { id: "marketing-cta", href: "#/marketing-cta", name: ui.catalog.categories.marketingCta, blocks: 1, variants: 11 },
+        {
+          id: "marketing-cta-proof",
+          href: "#/marketing-cta-proof",
+          name: ui.catalog.categories.marketingCtaProof,
+          blocks: 1,
+          variants: 7,
+        },
+        { id: "marketing-team", href: "#/marketing-team", name: ui.catalog.categories.marketingTeam, blocks: 1, variants: 6 },
+        { id: "marketing-about", href: "#/marketing-about", name: ui.catalog.categories.marketingAbout, blocks: 2, variants: 7 },
+        {
+          id: "marketing-portfolio",
+          href: "#/marketing-portfolio",
+          name: ui.catalog.categories.marketingPortfolio,
+          blocks: 1,
+          variants: 6,
+        },
+        { id: "marketing-careers", href: "#/marketing-careers", name: ui.catalog.categories.marketingCareers, blocks: 1, variants: 4 },
+        { id: "marketing-gallery", href: "#/marketing-gallery", name: ui.catalog.categories.marketingGallery, blocks: 2, variants: 10 },
+        { id: "marketing-footer", href: "#/marketing-footer", name: ui.catalog.categories.marketingFooter, blocks: 2, variants: 9 },
+        {
+          id: "marketing-footer-split",
+          href: "#/marketing-footer-split",
+          name: ui.catalog.categories.marketingFooterSplit,
+          blocks: 1,
+          variants: 6,
+        },
+      ],
+    },
+    {
+      id: "content",
+      titleId: "section-content-title",
+      title: ui.catalog.sections.content.title,
+      text: ui.catalog.sections.content.text,
+      categories: [
+        { id: "content-blog", href: "#/content-blog", name: ui.catalog.categories.contentBlog, blocks: 1, variants: 9 },
+        {
+          id: "content-post-showcase",
+          href: "#/content-post-showcase",
+          name: ui.catalog.categories.contentPostShowcase,
+          blocks: 1,
+          variants: 4,
+        },
+        {
+          id: "content-post-header",
+          href: "#/content-post-header",
+          name: ui.catalog.categories.contentPostHeader,
+          blocks: 1,
+          variants: 4,
+        },
+        {
+          id: "content-post-header-split",
+          href: "#/content-post-header-split",
+          name: ui.catalog.categories.contentPostHeaderSplit,
+          blocks: 1,
+          variants: 6,
+        },
+        { id: "content-article", href: "#/content-article", name: ui.catalog.categories.contentArticle, blocks: 1, variants: 4 },
+        { id: "content-timeline", href: "#/content-timeline", name: ui.catalog.categories.contentTimeline, blocks: 1, variants: 4 },
+        { id: "content-story-tabs", href: "#/content-story-tabs", name: ui.catalog.categories.contentStoryTabs, blocks: 1, variants: 3 },
+      ],
+    },
+    {
+      id: "promo",
+      titleId: "section-promo-title",
+      title: ui.catalog.sections.promo.title,
+      text: ui.catalog.sections.promo.text,
+      categories: [
+        { id: "promo-banners", href: "#/promo-banners", name: ui.catalog.categories.promoBanners, blocks: 2, variants: 12 },
+        { id: "promo-newsletter", href: "#/promo-newsletter", name: ui.catalog.categories.promoNewsletter, blocks: 1, variants: 5 },
+      ],
+    },
+    {
+      id: "support",
+      titleId: "section-support-title",
+      title: ui.catalog.sections.support.title,
+      text: ui.catalog.sections.support.text,
+      categories: [
+        { id: "support-contact", href: "#/support-contact", name: ui.catalog.categories.supportContact, blocks: 2, variants: 10 },
+        { id: "support-states", href: "#/support-states", name: ui.catalog.categories.supportStates, blocks: 1, variants: 5 },
+      ],
+    },
+    {
+      id: "commerce",
+      titleId: "section-commerce-title",
+      title: ui.catalog.sections.commerce.title,
+      text: ui.catalog.sections.commerce.text,
+      categories: [
+        {
+          id: "commerce-storefront",
+          href: "#/commerce-storefront",
+          name: ui.catalog.categories.commerceStorefront,
+          blocks: 3,
+          variants: 10,
+        },
+        {
+          id: "commerce-categories",
+          href: "#/commerce-categories",
+          name: ui.catalog.categories.commerceCategories,
+          blocks: 1,
+          variants: 7,
+        },
+        { id: "commerce-products", href: "#/commerce-products", name: ui.catalog.categories.commerceProducts, blocks: 1, variants: 9 },
+        { id: "commerce-product", href: "#/commerce-product", name: ui.catalog.categories.commerceProduct, blocks: 3, variants: 13 },
+        { id: "commerce-cart", href: "#/commerce-cart", name: ui.catalog.categories.commerceCart, blocks: 3, variants: 10 },
+        { id: "commerce-checkout", href: "#/commerce-checkout", name: ui.catalog.categories.commerceCheckout, blocks: 3, variants: 8 },
+        { id: "commerce-delivery", href: "#/commerce-delivery", name: ui.catalog.categories.commerceDelivery, blocks: 4, variants: 12 },
+        { id: "commerce-orders", href: "#/commerce-orders", name: ui.catalog.categories.commerceOrders, blocks: 1, variants: 4 },
+      ],
+    },
+    {
+      id: "app",
+      titleId: "section-app-title",
+      title: ui.catalog.sections.app.title,
+      text: ui.catalog.sections.app.text,
+      categories: [
+        { id: "app-shell", href: "#/app-shell", name: ui.catalog.categories.appShell, blocks: 3, variants: 12 },
+        {
+          id: "app-dashboard-shells",
+          href: "#/app-dashboard-shells",
+          name: ui.catalog.categories.appDashboardShells,
+          blocks: 1,
+          variants: 12,
+        },
+        { id: "app-widgets", href: "#/app-widgets", name: ui.catalog.categories.appWidgets, blocks: 3, variants: 12 },
+        { id: "app-boards", href: "#/app-boards", name: ui.catalog.categories.appBoards, blocks: 2, variants: 8 },
+        { id: "app-states", href: "#/app-states", name: ui.catalog.categories.appStates, blocks: 2, variants: 10 },
+        { id: "app-auth", href: "#/app-auth", name: ui.catalog.categories.appAuth, blocks: 2, variants: 12 },
+        { id: "app-auth-pages", href: "#/app-auth-pages", name: ui.catalog.categories.appAuthPages, blocks: 1, variants: 9 },
+        { id: "app-settings", href: "#/app-settings", name: ui.catalog.categories.appSettings, blocks: 1, variants: 4 },
+        { id: "app-onboarding", href: "#/app-onboarding", name: ui.catalog.categories.appOnboarding, blocks: 2, variants: 11 },
+        { id: "app-guidance", href: "#/app-guidance", name: ui.catalog.categories.appGuidance, blocks: 2, variants: 8 },
+      ],
+    },
+  ] as const;
+  const PAGES = [
+    {
+      id: "saas-landing",
+      visit: "page-saas-landing",
+      href: "#/page-saas-landing",
+      name: ui.catalog.pages.saasLanding.title,
+      text: ui.catalog.pages.saasLanding.text,
+      blocks: 11,
+    },
+    {
+      id: "company",
+      visit: "page-company",
+      href: "#/page-company",
+      name: ui.catalog.pages.company.title,
+      text: ui.catalog.pages.company.text,
+      blocks: 9,
+    },
+    {
+      id: "portfolio",
+      visit: "page-portfolio",
+      href: "#/page-portfolio",
+      name: ui.catalog.pages.portfolio.title,
+      text: ui.catalog.pages.portfolio.text,
+      blocks: 7,
+    },
+    {
+      id: "store-home",
+      visit: "page-store-home",
+      href: "#/page-store-home",
+      name: ui.catalog.pages.storeHome.title,
+      text: ui.catalog.pages.storeHome.text,
+      blocks: 9,
+    },
+    {
+      id: "store-home-2",
+      visit: "page-store-home-2",
+      href: "#/page-store-home-2",
+      name: ui.catalog.pages.storeHome2.title,
+      text: ui.catalog.pages.storeHome2.text,
+      blocks: 7,
+    },
+    {
+      id: "store-catalog",
+      visit: "page-store-catalog",
+      href: "#/page-store-catalog",
+      name: ui.catalog.pages.storeCatalog.title,
+      text: ui.catalog.pages.storeCatalog.text,
+      blocks: 6,
+    },
+    {
+      id: "product-detail",
+      visit: "page-product-detail",
+      href: "#/page-product-detail",
+      name: ui.catalog.pages.productDetail.title,
+      text: ui.catalog.pages.productDetail.text,
+      blocks: 6,
+    },
+    {
+      id: "cart",
+      visit: "page-cart",
+      href: "#/page-cart",
+      name: ui.catalog.pages.cart.title,
+      text: ui.catalog.pages.cart.text,
+      blocks: 5,
+    },
+    {
+      id: "checkout",
+      visit: "page-checkout",
+      href: "#/page-checkout",
+      name: ui.catalog.pages.checkout.title,
+      text: ui.catalog.pages.checkout.text,
+      blocks: 4,
+    },
+    {
+      id: "shell-classic",
+      visit: "page-shell-classic",
+      href: "#/page-shell-classic",
+      name: ui.catalog.pages.shellClassic.title,
+      text: ui.catalog.pages.shellClassic.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-inset",
+      visit: "page-shell-inset",
+      href: "#/page-shell-inset",
+      name: ui.catalog.pages.shellInset.title,
+      text: ui.catalog.pages.shellInset.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-rail",
+      visit: "page-shell-rail",
+      href: "#/page-shell-rail",
+      name: ui.catalog.pages.shellRail.title,
+      text: ui.catalog.pages.shellRail.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-rail-footer",
+      visit: "page-shell-rail-footer",
+      href: "#/page-shell-rail-footer",
+      name: ui.catalog.pages.shellRailFooter.title,
+      text: ui.catalog.pages.shellRailFooter.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-collapsed",
+      visit: "page-shell-collapsed",
+      href: "#/page-shell-collapsed",
+      name: ui.catalog.pages.shellCollapsed.title,
+      text: ui.catalog.pages.shellCollapsed.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-two-level",
+      visit: "page-shell-two-level",
+      href: "#/page-shell-two-level",
+      name: ui.catalog.pages.shellTwoLevel.title,
+      text: ui.catalog.pages.shellTwoLevel.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-two-level-full",
+      visit: "page-shell-two-level-full",
+      href: "#/page-shell-two-level-full",
+      name: ui.catalog.pages.shellTwoLevelFull.title,
+      text: ui.catalog.pages.shellTwoLevelFull.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-end",
+      visit: "page-shell-end",
+      href: "#/page-shell-end",
+      name: ui.catalog.pages.shellEnd.title,
+      text: ui.catalog.pages.shellEnd.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-rail-end",
+      visit: "page-shell-rail-end",
+      href: "#/page-shell-rail-end",
+      name: ui.catalog.pages.shellRailEnd.title,
+      text: ui.catalog.pages.shellRailEnd.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-top-only",
+      visit: "page-shell-top-only",
+      href: "#/page-shell-top-only",
+      name: ui.catalog.pages.shellTopOnly.title,
+      text: ui.catalog.pages.shellTopOnly.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-side-only",
+      visit: "page-shell-side-only",
+      href: "#/page-shell-side-only",
+      name: ui.catalog.pages.shellSideOnly.title,
+      text: ui.catalog.pages.shellSideOnly.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-collapsed-end",
+      visit: "page-shell-collapsed-end",
+      href: "#/page-shell-collapsed-end",
+      name: ui.catalog.pages.shellCollapsedEnd.title,
+      text: ui.catalog.pages.shellCollapsedEnd.text,
+      blocks: 1,
+    },
+  ] as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Stack gap="2" align="stretch">
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="catalog-title">
+          {ui.catalog.title}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.catalog.intro}
+        </Text>
+      </Stack>
+      {#each CATALOG as section (section.id)}
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby={section.titleId}
+          data-testid="catalog-section"
+          data-section={section.id}
+        >
+          <Stack gap="2" align="stretch">
+            <Title as={2} size="2xl" weight="bold" id={section.titleId}>
+              {section.title}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {section.text}
+            </Text>
+          </Stack>
+          <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="category-list">
+            {#each section.categories as cat (cat.id)}
+              <ListItem class="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+                <Link
+                  href={cat.href}
+                  variant="default"
+                  class="font-bold"
+                  data-testid="category-link"
+                  data-category={cat.id}
+                  data-visit={cat.id}
+                >
+                  {cat.name}
+                </Link>
+                <Text size="sm" class="text-muted-foreground" data-testid="category-count">
+                  {tpl(ui.catalog.count, cat.blocks, cat.variants)}
+                </Text>
+              </ListItem>
+            {/each}
+          </List>
+        </Stack>
+      {/each}
+      <Stack gap="4" align="stretch" role="group" aria-labelledby="pages-title-2" data-testid="pages-section">
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="pages-title-2">
+            {ui.catalog.pagesTitle}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.catalog.pagesText}
+          </Text>
+        </Stack>
+        <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="page-list">
+          {#each PAGES as p (p.id)}
+            <ListItem class="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+              <Link
+                href={p.href}
+                variant="default"
+                class="font-bold"
+                data-testid="page-link"
+                data-page={p.id}
+                data-visit={p.visit}
+              >
+                {p.name}
+              </Link>
+              <Text size="sm" class="text-muted-foreground">
+                {p.text}
+              </Text>
+              <Text size="xs" class="text-muted-foreground" data-testid="page-count">
+                {tpl(ui.catalog.pageCount, p.blocks)}
+              </Text>
+            </ListItem>
+          {/each}
+        </List>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingAboutPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingAboutPage.svelte
new file mode 100644
index 0000000..361b36f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingAboutPage.svelte
@@ -0,0 +1,303 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-about page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    AboutCompany,
+    AboutMe,
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Skill,
+    type Spec,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+  import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+  import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+  const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+  const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+
+  const ABOUTME_ACTIONS = { mode: "two", cta: ui.company.aboutMe.cta, href: "#/work", secondary: ui.company.aboutMe.more, secondaryHref: "#/contact" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingAbout}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 7)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-about-title"
+        data-testid="catalog-block"
+        data-block="about"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-about-title">
+            {ui.blocks.names.about}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.about}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="about-split-label"
+          data-testid="variant"
+          data-block="about"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="about-split-label" data-testid="variant-label">
+            {ui.blocks.variants.about.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutCompany
+              id="about-split"
+              title={ui.company.about.title}
+              lead={ui.company.about.lead}
+              stats={stats}
+              values={values}
+              layout="split"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="about-stacked-label"
+          data-testid="variant"
+          data-block="about"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="about-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.about.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutCompany
+              id="about-stacked"
+              title={ui.company.about.title}
+              lead={ui.company.about.lead}
+              stats={stats}
+              values={values}
+              layout="stacked"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.stacked))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="about-muted-label"
+          data-testid="variant"
+          data-block="about"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="about-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.about.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutCompany
+              id="about-muted"
+              title={ui.company.about.title}
+              lead={ui.company.about.lead}
+              stats={stats}
+              values={values}
+              layout="split"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-aboutme-title"
+        data-testid="catalog-block"
+        data-block="aboutme"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-aboutme-title">
+            {ui.blocks.names.aboutme}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.aboutme}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="aboutme-facts-label"
+          data-testid="variant"
+          data-block="aboutme"
+          data-variant="facts"
+        >
+          <Title as={3} size="base" weight="bold" id="aboutme-facts-label" data-testid="variant-label">
+            {ui.blocks.variants.aboutme.facts}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutMe
+              id="aboutme-facts"
+              title={ui.company.aboutMe.title}
+              lead={ui.company.aboutMe.lead}
+              badge={ui.company.aboutMe.badge}
+              facts={profilefacts}
+              skills={skills}
+              labels={ui.company.aboutMe}
+              actions={ABOUTME_ACTIONS}
+              layout="facts"
+              mediaSide="start"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.facts))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="aboutme-factsEnd-label"
+          data-testid="variant"
+          data-block="aboutme"
+          data-variant="factsEnd"
+        >
+          <Title as={3} size="base" weight="bold" id="aboutme-factsEnd-label" data-testid="variant-label">
+            {ui.blocks.variants.aboutme.factsEnd}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutMe
+              id="aboutme-factsEnd"
+              title={ui.company.aboutMe.title}
+              lead={ui.company.aboutMe.lead}
+              badge={ui.company.aboutMe.badge}
+              facts={profilefacts}
+              skills={skills}
+              labels={ui.company.aboutMe}
+              actions={ABOUTME_ACTIONS}
+              layout="facts"
+              mediaSide="end"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.factsEnd))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="aboutme-skills-label"
+          data-testid="variant"
+          data-block="aboutme"
+          data-variant="skills"
+        >
+          <Title as={3} size="base" weight="bold" id="aboutme-skills-label" data-testid="variant-label">
+            {ui.blocks.variants.aboutme.skills}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutMe
+              id="aboutme-skills"
+              title={ui.company.aboutMe.title}
+              lead={ui.company.aboutMe.lead}
+              badge={ui.company.aboutMe.badge}
+              facts={profilefacts}
+              skills={skills}
+              labels={ui.company.aboutMe}
+              actions={ABOUTME_ACTIONS}
+              layout="skills"
+              mediaSide="start"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skills))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="aboutme-skillsMuted-label"
+          data-testid="variant"
+          data-block="aboutme"
+          data-variant="skillsMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="aboutme-skillsMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.aboutme.skillsMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutMe
+              id="aboutme-skillsMuted"
+              title={ui.company.aboutMe.title}
+              lead={ui.company.aboutMe.lead}
+              badge={ui.company.aboutMe.badge}
+              facts={profilefacts}
+              skills={skills}
+              labels={ui.company.aboutMe}
+              actions={ABOUTME_ACTIONS}
+              layout="skills"
+              mediaSide="end"
+              tone="muted"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skillsMuted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingCareersPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingCareersPage.svelte
new file mode 100644
index 0000000..bc35662
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingCareersPage.svelte
@@ -0,0 +1,191 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-careers page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    JobBoard,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Department,
+    type Job,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+  import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+  const JOBS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "dept": "metadata.dept.value",
+    "location": "metadata.location.value",
+    "type": "metadata.type.value",
+    "salary": "metadata.salary.value",
+    "posted": "metadata.posted.value|ago-days",
+  } as const;
+  const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+  const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+  const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingCareers}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 4)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-jobs-title"
+        data-testid="catalog-block"
+        data-block="jobs"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-jobs-title">
+            {ui.blocks.names.jobs}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.jobs}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="jobs-grid-label"
+          data-testid="variant"
+          data-block="jobs"
+          data-variant="grid"
+        >
+          <Title as={3} size="base" weight="bold" id="jobs-grid-label" data-testid="variant-label">
+            {ui.blocks.variants.jobs.grid}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <JobBoard
+              id="jobs-grid"
+              title={ui.company.jobs.title}
+              lead={ui.company.jobs.lead}
+              jobs={jobs}
+              empty={ui.empty.jobs}
+              departments={departments}
+              labels={ui.company.jobs}
+              layout="grid"
+              salary="hide"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grid))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="jobs-salary-label"
+          data-testid="variant"
+          data-block="jobs"
+          data-variant="salary"
+        >
+          <Title as={3} size="base" weight="bold" id="jobs-salary-label" data-testid="variant-label">
+            {ui.blocks.variants.jobs.salary}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <JobBoard
+              id="jobs-salary"
+              title={ui.company.jobs.title}
+              lead={ui.company.jobs.lead}
+              jobs={jobs}
+              empty={ui.empty.jobs}
+              departments={departments}
+              labels={ui.company.jobs}
+              layout="grid"
+              salary="show"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.salary))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="jobs-grouped-label"
+          data-testid="variant"
+          data-block="jobs"
+          data-variant="grouped"
+        >
+          <Title as={3} size="base" weight="bold" id="jobs-grouped-label" data-testid="variant-label">
+            {ui.blocks.variants.jobs.grouped}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <JobBoard
+              id="jobs-grouped"
+              title={ui.company.jobs.title}
+              lead={ui.company.jobs.lead}
+              jobs={jobs}
+              empty={ui.empty.jobs}
+              departments={departments}
+              labels={ui.company.jobs}
+              layout="grouped"
+              salary="hide"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="jobs-table-label"
+          data-testid="variant"
+          data-block="jobs"
+          data-variant="table"
+        >
+          <Title as={3} size="base" weight="bold" id="jobs-table-label" data-testid="variant-label">
+            {ui.blocks.variants.jobs.table}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <JobBoard
+              id="jobs-table"
+              title={ui.company.jobs.title}
+              lead={ui.company.jobs.lead}
+              jobs={jobs}
+              empty={ui.empty.jobs}
+              departments={departments}
+              labels={ui.company.jobs}
+              layout="table"
+              salary="show"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.table))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingCtaPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingCtaPage.svelte
new file mode 100644
index 0000000..4ad6fb6
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingCtaPage.svelte
@@ -0,0 +1,379 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-cta page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    CtaBand,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const CTA_ACTIONS = {
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingCta}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 11)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-cta-title"
+        data-testid="catalog-block"
+        data-block="cta"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-cta-title">
+            {ui.blocks.names.cta}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.cta}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-card-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="card"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-card-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.card}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-card"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{ ...CTA_ACTIONS, mode: "one" }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="card"
+              tone="muted"
+              proof="none"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.card))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-banner-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="banner"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-banner-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.banner}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-banner"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{ ...CTA_ACTIONS, mode: "one" }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="banner"
+              tone="muted"
+              proof="none"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.banner))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-row-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="row"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-row-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.row}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-row"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{ ...CTA_ACTIONS, mode: "one" }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="row"
+              tone="muted"
+              proof="none"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-form-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="form"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-form-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.form}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-form"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{ ...CTA_ACTIONS, mode: "form" }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="band"
+              tone="muted"
+              proof="none"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-quote-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="quote"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-quote-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.quote}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-quote"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{ ...CTA_ACTIONS, mode: "one" }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="band"
+              tone="muted"
+              proof="quote"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-band-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="band"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-band-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.band}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-band"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{ ...CTA_ACTIONS, mode: "one" }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="band"
+              tone="muted"
+              proof="none"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-split-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-split-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-split"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{ ...CTA_ACTIONS, mode: "two" }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="split"
+              tone="default"
+              proof="none"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-compact-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-compact"
+              title={ui.site.home.ctaTitle}
+              text={ui.site.home.ctaText}
+              actions={{ ...CTA_ACTIONS, mode: "one" }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="card"
+              tone="muted"
+              proof="none"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-saas-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="saas"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-saas-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.saas}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-saas"
+              title={ui.cases.saas.cta.title}
+              text={ui.cases.saas.cta.text}
+              actions={{
+                ...CTA_ACTIONS,
+                cta: ui.cases.saas.cta.cta,
+                secondary: ui.cases.saas.cta.secondary,
+                mode: "two",
+              }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="band"
+              tone="muted"
+              proof="none"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-shop-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="shop"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-shop-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.shop}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-shop"
+              title={ui.cases.shop.cta.title}
+              text={ui.cases.shop.cta.text}
+              actions={{
+                ...CTA_ACTIONS,
+                cta: ui.cases.shop.cta.cta,
+                secondary: ui.cases.shop.cta.secondary,
+                mode: "one",
+              }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="split"
+              tone="default"
+              proof="none"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-agency-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="agency"
+        >
+          <Title as={3} size="base" weight="bold" id="cta-agency-label" data-testid="variant-label">
+            {ui.blocks.variants.cta.agency}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-agency"
+              title={ui.cases.agency.cta.title}
+              text={ui.cases.agency.cta.text}
+              actions={{
+                ...CTA_ACTIONS,
+                cta: ui.cases.agency.cta.cta,
+                secondary: ui.cases.agency.cta.secondary,
+                mode: "two",
+              }}
+              quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+              layout="card"
+              tone="muted"
+              proof="none"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingCtaProofPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingCtaProofPage.svelte
new file mode 100644
index 0000000..8dc3087
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingCtaProofPage.svelte
@@ -0,0 +1,301 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-cta-proof page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    CtaProof,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Logo,
+    type Stat,
+    type Zone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+  import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const ZONES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "area": "metadata.area.value",
+    "price": "metadata.price.value",
+    "freeFrom": "metadata.freeFrom.value",
+    "minOrder": "metadata.minOrder.value",
+    "time": "metadata.time.value",
+    "express": "metadata.express.value",
+    "currency": "metadata.currency.value",
+  } as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+  const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+  const CTAPROOF_ACTIONS = {
+    mode: "two",
+    cta: ui.marketing.ctaProof.cta,
+    href: "#/pricing",
+    secondary: ui.marketing.ctaProof.secondary,
+    secondaryHref: "#/contact",
+  } as const;
+  const CTAPROOF_CONTENT = { logos, features, stats, zones } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingCtaProof}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 7)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-ctaproof-title"
+        data-testid="catalog-block"
+        data-block="ctaproof"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-ctaproof-title">
+            {ui.blocks.names.ctaproof}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.ctaproof}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-centerLogos-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="centerLogos"
+        >
+          <Title as={3} size="base" weight="bold" id="ctaproof-centerLogos-label" data-testid="variant-label">
+            {ui.blocks.variants.ctaproof.centerLogos}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-centerLogos"
+              title={ui.marketing.ctaProof.title}
+              lead={ui.marketing.ctaProof.lead}
+              badge={ui.marketing.ctaProof.badge}
+              actions={CTAPROOF_ACTIONS}
+              content={CTAPROOF_CONTENT}
+              layout="center"
+              proof="logos"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerLogos))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-centerFeatures-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="centerFeatures"
+        >
+          <Title as={3} size="base" weight="bold" id="ctaproof-centerFeatures-label" data-testid="variant-label">
+            {ui.blocks.variants.ctaproof.centerFeatures}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-centerFeatures"
+              title={ui.marketing.ctaProof.title}
+              lead={ui.marketing.ctaProof.lead}
+              badge={ui.marketing.ctaProof.badge}
+              actions={CTAPROOF_ACTIONS}
+              content={CTAPROOF_CONTENT}
+              layout="center"
+              proof="features"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerFeatures))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-centerStats-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="centerStats"
+        >
+          <Title as={3} size="base" weight="bold" id="ctaproof-centerStats-label" data-testid="variant-label">
+            {ui.blocks.variants.ctaproof.centerStats}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-centerStats"
+              title={ui.marketing.ctaProof.title}
+              lead={ui.marketing.ctaProof.lead}
+              badge={ui.marketing.ctaProof.badge}
+              actions={CTAPROOF_ACTIONS}
+              content={CTAPROOF_CONTENT}
+              layout="center"
+              proof="stats"
+              mediaSide="end"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerStats))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-splitStats-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="splitStats"
+        >
+          <Title as={3} size="base" weight="bold" id="ctaproof-splitStats-label" data-testid="variant-label">
+            {ui.blocks.variants.ctaproof.splitStats}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-splitStats"
+              title={ui.marketing.ctaProof.title}
+              lead={ui.marketing.ctaProof.lead}
+              badge={ui.marketing.ctaProof.badge}
+              actions={CTAPROOF_ACTIONS}
+              content={CTAPROOF_CONTENT}
+              layout="split"
+              proof="stats"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-splitStatsStart-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="splitStatsStart"
+        >
+          <Title as={3} size="base" weight="bold" id="ctaproof-splitStatsStart-label" data-testid="variant-label">
+            {ui.blocks.variants.ctaproof.splitStatsStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-splitStatsStart"
+              title={ui.marketing.ctaProof.title}
+              lead={ui.marketing.ctaProof.lead}
+              badge={ui.marketing.ctaProof.badge}
+              actions={CTAPROOF_ACTIONS}
+              content={CTAPROOF_CONTENT}
+              layout="split"
+              proof="stats"
+              mediaSide="start"
+              tone="default"
+              note={ui.marketing.ctaProof.note}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStatsStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-splitRows-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="splitRows"
+        >
+          <Title as={3} size="base" weight="bold" id="ctaproof-splitRows-label" data-testid="variant-label">
+            {ui.blocks.variants.ctaproof.splitRows}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-splitRows"
+              title={ui.marketing.ctaProof.title}
+              lead={ui.marketing.ctaProof.lead}
+              badge={ui.marketing.ctaProof.badge}
+              actions={CTAPROOF_ACTIONS}
+              content={CTAPROOF_CONTENT}
+              layout="split"
+              proof="rows"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitRows))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-splitZones-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="splitZones"
+        >
+          <Title as={3} size="base" weight="bold" id="ctaproof-splitZones-label" data-testid="variant-label">
+            {ui.blocks.variants.ctaproof.splitZones}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-splitZones"
+              title={ui.marketing.ctaProof.zonesTitle}
+              lead={ui.marketing.ctaProof.zonesLead}
+              badge={ui.marketing.ctaProof.badge}
+              actions={CTAPROOF_ACTIONS}
+              content={CTAPROOF_CONTENT}
+              layout="split"
+              proof="zones"
+              mediaSide="end"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitZones))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFaqPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFaqPage.svelte
new file mode 100644
index 0000000..0a6e88a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFaqPage.svelte
@@ -0,0 +1,520 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-faq page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FaqList,
+    FaqSplit,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Faq,
+    type FaqTab,
+    type Feature,
+    type Question,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+  import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+  const QUESTIONS_FIELDS = {
+    "id": "id",
+    "question": "title",
+    "answer": "metadata.answer.value",
+    "category": "terms|term:faq_category",
+    "icon": "metadata.icon.value",
+  } as const;
+
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+  const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+
+  const FAQ_FILTER = { tabs: faqtabs, label: ui.vibe.faq.tabs, category: "" } as const;
+  const FAQSPLIT_LABELS = {
+    cta: ui.marketing.faqSplit.cta,
+    more: ui.marketing.faqSplit.more,
+    asideTitle: ui.marketing.faqSplit.asideTitle,
+    asideText: ui.marketing.faqSplit.asideText,
+    asideCta: ui.marketing.faqSplit.asideCta,
+    search: ui.marketing.faqSplit.search,
+    popular: ui.marketing.faqSplit.popular,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingFaq}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 14)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-faq-title"
+        data-testid="catalog-block"
+        data-block="faq"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-faq-title">
+            {ui.blocks.names.faq}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.faq}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-list-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="faq-list-label" data-testid="variant-label">
+            {ui.blocks.variants.faq.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-list"
+              title={ui.site.pricing.faqTitle}
+              items={faq}
+              empty={ui.vibe.faq.empty}
+              search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+              filter={{ ...FAQ_FILTER, mode: "none" }}
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-chat-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="chat"
+        >
+          <Title as={3} size="base" weight="bold" id="faq-chat-label" data-testid="variant-label">
+            {ui.blocks.variants.faq.chat}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-chat"
+              title={ui.site.pricing.faqTitle}
+              items={faq}
+              empty={ui.vibe.faq.empty}
+              search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+              filter={{ ...FAQ_FILTER, mode: "none" }}
+              layout="chat"
+              cols="1"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-search-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="search"
+        >
+          <Title as={3} size="base" weight="bold" id="faq-search-label" data-testid="variant-label">
+            {ui.blocks.variants.faq.search}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-search"
+              title={ui.site.pricing.faqTitle}
+              items={faq}
+              empty={ui.vibe.faq.empty}
+              search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+              filter={{ ...FAQ_FILTER, mode: "none" }}
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-tabs-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="tabs"
+        >
+          <Title as={3} size="base" weight="bold" id="faq-tabs-label" data-testid="variant-label">
+            {ui.blocks.variants.faq.tabs}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-tabs"
+              title={ui.site.pricing.faqTitle}
+              items={faq}
+              empty={ui.vibe.faq.empty}
+              search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+              filter={{ ...FAQ_FILTER, category: "billing", mode: "categories" }}
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-twoColumns-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="twoColumns"
+        >
+          <Title as={3} size="base" weight="bold" id="faq-twoColumns-label" data-testid="variant-label">
+            {ui.blocks.variants.faq.twoColumns}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-twoColumns"
+              title={ui.site.pricing.faqTitle}
+              items={faq}
+              empty={ui.vibe.faq.empty}
+              search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+              filter={{ ...FAQ_FILTER, mode: "none" }}
+              layout="accordion"
+              cols="2"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-muted-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="faq-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.faq.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-muted"
+              title={ui.site.pricing.faqTitle}
+              items={faq}
+              empty={ui.vibe.faq.empty}
+              search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+              filter={{ ...FAQ_FILTER, mode: "none" }}
+              layout="accordion"
+              cols="1"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.muted))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-roomy-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="roomy"
+        >
+          <Title as={3} size="base" weight="bold" id="faq-roomy-label" data-testid="variant-label">
+            {ui.blocks.variants.faq.roomy}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-roomy"
+              title={ui.site.pricing.faqTitle}
+              items={faq}
+              empty={ui.vibe.faq.empty}
+              search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+              filter={{ ...FAQ_FILTER, mode: "none" }}
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.roomy))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-faqsplit-title"
+        data-testid="catalog-block"
+        data-block="faqsplit"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-faqsplit-title">
+            {ui.blocks.names.faqsplit}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.faqsplit}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-headSplit-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="headSplit"
+        >
+          <Title as={3} size="base" weight="bold" id="faqsplit-headSplit-label" data-testid="variant-label">
+            {ui.blocks.variants.faqsplit.headSplit}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-headSplit"
+              title={ui.marketing.faqSplit.title}
+              lead={ui.marketing.faqSplit.lead}
+              badge={ui.marketing.faqSplit.badge}
+              items={questions}
+              channels={channels}
+              topics={faqtabs}
+              labels={FAQSPLIT_LABELS}
+              layout="head"
+              cards="grid3"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.headSplit))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-helpCard-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="helpCard"
+        >
+          <Title as={3} size="base" weight="bold" id="faqsplit-helpCard-label" data-testid="variant-label">
+            {ui.blocks.variants.faqsplit.helpCard}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-helpCard"
+              title={ui.marketing.faqSplit.title}
+              lead={ui.marketing.faqSplit.lead}
+              badge={ui.marketing.faqSplit.badge}
+              items={questions}
+              channels={channels}
+              topics={faqtabs}
+              labels={FAQSPLIT_LABELS}
+              layout="aside"
+              cards="grid3"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-picture-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="picture"
+        >
+          <Title as={3} size="base" weight="bold" id="faqsplit-picture-label" data-testid="variant-label">
+            {ui.blocks.variants.faqsplit.picture}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-picture"
+              title={ui.marketing.faqSplit.title}
+              lead={ui.marketing.faqSplit.lead}
+              badge={ui.marketing.faqSplit.badge}
+              items={questions}
+              channels={channels}
+              topics={faqtabs}
+              labels={FAQSPLIT_LABELS}
+              layout="media"
+              cards="grid3"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.picture))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-finder-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="finder"
+        >
+          <Title as={3} size="base" weight="bold" id="faqsplit-finder-label" data-testid="variant-label">
+            {ui.blocks.variants.faqsplit.finder}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-finder"
+              title={ui.marketing.faqSplit.title}
+              lead={ui.marketing.faqSplit.lead}
+              badge={ui.marketing.faqSplit.badge}
+              items={questions}
+              channels={channels}
+              topics={faqtabs}
+              labels={FAQSPLIT_LABELS}
+              layout="search"
+              cards="grid3"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.finder))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-cards3-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="cards3"
+        >
+          <Title as={3} size="base" weight="bold" id="faqsplit-cards3-label" data-testid="variant-label">
+            {ui.blocks.variants.faqsplit.cards3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-cards3"
+              title={ui.marketing.faqSplit.title}
+              lead={ui.marketing.faqSplit.lead}
+              badge={ui.marketing.faqSplit.badge}
+              items={questions}
+              channels={channels}
+              topics={faqtabs}
+              labels={FAQSPLIT_LABELS}
+              layout="cards"
+              cards="grid3"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-cards4-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="cards4"
+        >
+          <Title as={3} size="base" weight="bold" id="faqsplit-cards4-label" data-testid="variant-label">
+            {ui.blocks.variants.faqsplit.cards4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-cards4"
+              title={ui.marketing.faqSplit.title}
+              lead={ui.marketing.faqSplit.lead}
+              badge={ui.marketing.faqSplit.badge}
+              items={questions}
+              channels={channels}
+              topics={faqtabs}
+              labels={FAQSPLIT_LABELS}
+              layout="cards"
+              cards="grid4"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-cardsIcons-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="cardsIcons"
+        >
+          <Title as={3} size="base" weight="bold" id="faqsplit-cardsIcons-label" data-testid="variant-label">
+            {ui.blocks.variants.faqsplit.cardsIcons}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-cardsIcons"
+              title={ui.marketing.faqSplit.title}
+              lead={ui.marketing.faqSplit.lead}
+              badge={ui.marketing.faqSplit.badge}
+              items={questions}
+              channels={channels}
+              topics={faqtabs}
+              labels={FAQSPLIT_LABELS}
+              layout="cards"
+              cards="icons"
+              mediaSide="end"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cardsIcons))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.svelte
new file mode 100644
index 0000000..67cd799
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.svelte
@@ -0,0 +1,178 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-feature-cards page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FeatureShowcase,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingFeatureCards}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 4)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-featureshowcase-title"
+        data-testid="catalog-block"
+        data-block="featureshowcase"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-featureshowcase-title">
+            {ui.blocks.names.featureshowcase}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.featureshowcase}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featureshowcase-pictureCards3-label"
+          data-testid="variant"
+          data-block="featureshowcase"
+          data-variant="pictureCards3"
+        >
+          <Title as={3} size="base" weight="bold" id="featureshowcase-pictureCards3-label" data-testid="variant-label">
+            {ui.blocks.variants.featureshowcase.pictureCards3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureShowcase
+              id="featureshowcase-pictureCards3"
+              title={ui.marketing.featureShowcase.title}
+              lead={ui.marketing.featureShowcase.lead}
+              features={values}
+              empty={ui.empty.features}
+              more={ui.marketing.featureShowcase.more}
+              item="picture"
+              cols="3"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featureshowcase-panelCards4-label"
+          data-testid="variant"
+          data-block="featureshowcase"
+          data-variant="panelCards4"
+        >
+          <Title as={3} size="base" weight="bold" id="featureshowcase-panelCards4-label" data-testid="variant-label">
+            {ui.blocks.variants.featureshowcase.panelCards4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureShowcase
+              id="featureshowcase-panelCards4"
+              title={ui.marketing.featureShowcase.title}
+              lead={ui.marketing.featureShowcase.lead}
+              features={features}
+              empty={ui.empty.features}
+              more={ui.marketing.featureShowcase.more}
+              item="panel"
+              cols="4"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featureshowcase-pictureCards4-label"
+          data-testid="variant"
+          data-block="featureshowcase"
+          data-variant="pictureCards4"
+        >
+          <Title as={3} size="base" weight="bold" id="featureshowcase-pictureCards4-label" data-testid="variant-label">
+            {ui.blocks.variants.featureshowcase.pictureCards4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureShowcase
+              id="featureshowcase-pictureCards4"
+              title={ui.marketing.featureShowcase.title}
+              lead={ui.marketing.featureShowcase.lead}
+              features={features}
+              empty={ui.empty.features}
+              more={ui.marketing.featureShowcase.more}
+              item="picture"
+              cols="4"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featureshowcase-panelCards3-label"
+          data-testid="variant"
+          data-block="featureshowcase"
+          data-variant="panelCards3"
+        >
+          <Title as={3} size="base" weight="bold" id="featureshowcase-panelCards3-label" data-testid="variant-label">
+            {ui.blocks.variants.featureshowcase.panelCards3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureShowcase
+              id="featureshowcase-panelCards3"
+              title={ui.marketing.featureShowcase.title}
+              lead={ui.marketing.featureShowcase.lead}
+              features={values}
+              empty={ui.empty.features}
+              more={ui.marketing.featureShowcase.more}
+              item="panel"
+              cols="3"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards3))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFeaturesPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFeaturesPage.svelte
new file mode 100644
index 0000000..21e1dab
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFeaturesPage.svelte
@@ -0,0 +1,577 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-features page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    BeforeAfter,
+    Block,
+    Box,
+    Container,
+    FeatureGrid,
+    Group,
+    IconWall,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Contrast,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingFeatures}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 17)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-features-title"
+        data-testid="catalog-block"
+        data-block="features"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-features-title">
+            {ui.blocks.names.features}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.features}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-grid-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="grid"
+        >
+          <Title as={3} size="base" weight="bold" id="features-grid-label" data-testid="variant-label">
+            {ui.blocks.variants.features.grid}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-grid"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="grid"
+              cols="1-3"
+              item="card"
+              mediaSide="end"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-grid2-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="grid2"
+        >
+          <Title as={3} size="base" weight="bold" id="features-grid2-label" data-testid="variant-label">
+            {ui.blocks.variants.features.grid2}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-grid2"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="grid"
+              cols="1-2"
+              item="card"
+              mediaSide="end"
+              tone="default"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-tiles4-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="tiles4"
+        >
+          <Title as={3} size="base" weight="bold" id="features-tiles4-label" data-testid="variant-label">
+            {ui.blocks.variants.features.tiles4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-tiles4"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="grid"
+              cols="1-4"
+              item="tile"
+              mediaSide="end"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-cells4-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="cells4"
+        >
+          <Title as={3} size="base" weight="bold" id="features-cells4-label" data-testid="variant-label">
+            {ui.blocks.variants.features.cells4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-cells4"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="grid"
+              cols="1-4"
+              item="cell"
+              mediaSide="end"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.cells4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-rows-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="rows"
+        >
+          <Title as={3} size="base" weight="bold" id="features-rows-label" data-testid="variant-label">
+            {ui.blocks.variants.features.rows}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-rows"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="rows"
+              cols="1-3"
+              item="card"
+              mediaSide="end"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rows))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-rowsStart-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="rowsStart"
+        >
+          <Title as={3} size="base" weight="bold" id="features-rowsStart-label" data-testid="variant-label">
+            {ui.blocks.variants.features.rowsStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-rowsStart"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="rows"
+              cols="1-3"
+              item="card"
+              mediaSide="start"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-rowsAlternate-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="rowsAlternate"
+        >
+          <Title as={3} size="base" weight="bold" id="features-rowsAlternate-label" data-testid="variant-label">
+            {ui.blocks.variants.features.rowsAlternate}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-rowsAlternate"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="rows"
+              cols="1-3"
+              item="card"
+              mediaSide="alternate"
+              tone="muted"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-tilesMuted-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="tilesMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="features-tilesMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.features.tilesMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-tilesMuted"
+              title={ui.site.home.featuresTitle}
+              features={features}
+              empty={ui.empty.features}
+              action={{ label: ui.site.home.featuresAction, href: "#/" }}
+              layout="grid"
+              cols="1-3"
+              item="tile"
+              mediaSide="end"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tilesMuted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-iconwall-title"
+        data-testid="catalog-block"
+        data-block="iconwall"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-iconwall-title">
+            {ui.blocks.names.iconwall}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.iconwall}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-tiles4-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="tiles4"
+        >
+          <Title as={3} size="base" weight="bold" id="iconwall-tiles4-label" data-testid="variant-label">
+            {ui.blocks.variants.iconwall.tiles4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-tiles4"
+              title={ui.vibe.wall.title}
+              features={features}
+              empty={ui.empty.features}
+              cols="4"
+              item="tile"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-tiles3-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="tiles3"
+        >
+          <Title as={3} size="base" weight="bold" id="iconwall-tiles3-label" data-testid="variant-label">
+            {ui.blocks.variants.iconwall.tiles3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-tiles3"
+              title={ui.vibe.wall.title}
+              features={features}
+              empty={ui.empty.features}
+              cols="3"
+              item="tile"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-chips6-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="chips6"
+        >
+          <Title as={3} size="base" weight="bold" id="iconwall-chips6-label" data-testid="variant-label">
+            {ui.blocks.variants.iconwall.chips6}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-chips6"
+              title={ui.vibe.wall.title}
+              features={features}
+              empty={ui.empty.features}
+              cols="6"
+              item="chip"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-chips4-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="chips4"
+        >
+          <Title as={3} size="base" weight="bold" id="iconwall-chips4-label" data-testid="variant-label">
+            {ui.blocks.variants.iconwall.chips4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-chips4"
+              title={ui.vibe.wall.title}
+              features={features}
+              empty={ui.empty.features}
+              cols="4"
+              item="chip"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-muted-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="iconwall-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.iconwall.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-muted"
+              title={ui.vibe.wall.title}
+              features={features}
+              empty={ui.empty.features}
+              cols="4"
+              item="tile"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-beforeafter-title"
+        data-testid="catalog-block"
+        data-block="beforeafter"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-beforeafter-title">
+            {ui.blocks.names.beforeafter}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.beforeafter}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="beforeafter-cards-label"
+          data-testid="variant"
+          data-block="beforeafter"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="beforeafter-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.beforeafter.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BeforeAfter
+              id="beforeafter-cards"
+              title={ui.vibe.beforeafter.title}
+              points={beforeafter}
+              empty={ui.empty.points}
+              labels={ui.vibe.beforeafter.labels}
+              layout="cards"
+              icons="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="beforeafter-rows-label"
+          data-testid="variant"
+          data-block="beforeafter"
+          data-variant="rows"
+        >
+          <Title as={3} size="base" weight="bold" id="beforeafter-rows-label" data-testid="variant-label">
+            {ui.blocks.variants.beforeafter.rows}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BeforeAfter
+              id="beforeafter-rows"
+              title={ui.vibe.beforeafter.title}
+              points={beforeafter}
+              empty={ui.empty.points}
+              labels={ui.vibe.beforeafter.labels}
+              layout="rows"
+              icons="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="beforeafter-plain-label"
+          data-testid="variant"
+          data-block="beforeafter"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="beforeafter-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.beforeafter.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BeforeAfter
+              id="beforeafter-plain"
+              title={ui.vibe.beforeafter.title}
+              points={beforeafter}
+              empty={ui.empty.points}
+              labels={ui.vibe.beforeafter.labels}
+              layout="cards"
+              icons="hide"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.plain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="beforeafter-muted-label"
+          data-testid="variant"
+          data-block="beforeafter"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="beforeafter-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.beforeafter.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BeforeAfter
+              id="beforeafter-muted"
+              title={ui.vibe.beforeafter.title}
+              points={beforeafter}
+              empty={ui.empty.points}
+              labels={ui.vibe.beforeafter.labels}
+              layout="cards"
+              icons="show"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.svelte
new file mode 100644
index 0000000..f0d58cc
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.svelte
@@ -0,0 +1,230 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-features-split page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FeatureSplit,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+  const FEATURESPLIT_ACTIONS = {
+    mode: "two",
+    cta: ui.marketing.featureSplit.cta,
+    href: "#/start",
+    secondary: ui.marketing.featureSplit.secondary,
+    secondaryHref: "#/work",
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingFeaturesSplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 5)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-featuresplit-title"
+        data-testid="catalog-block"
+        data-block="featuresplit"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-featuresplit-title">
+            {ui.blocks.names.featuresplit}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.featuresplit}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-gridStart-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="gridStart"
+        >
+          <Title as={3} size="base" weight="bold" id="featuresplit-gridStart-label" data-testid="variant-label">
+            {ui.blocks.variants.featuresplit.gridStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-gridStart"
+              title={ui.marketing.featureSplit.title}
+              lead={ui.marketing.featureSplit.lead}
+              badge={ui.marketing.featureSplit.badge}
+              features={features}
+              stats={stats}
+              actions={FEATURESPLIT_ACTIONS}
+              layout="grid"
+              mediaSide="start"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-statsStart-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="statsStart"
+        >
+          <Title as={3} size="base" weight="bold" id="featuresplit-statsStart-label" data-testid="variant-label">
+            {ui.blocks.variants.featuresplit.statsStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-statsStart"
+              title={ui.marketing.featureSplit.title}
+              lead={ui.marketing.featureSplit.lead}
+              badge={ui.marketing.featureSplit.badge}
+              features={features}
+              stats={stats}
+              actions={FEATURESPLIT_ACTIONS}
+              layout="stats"
+              mediaSide="start"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.statsStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-gridMuted-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="gridMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="featuresplit-gridMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.featuresplit.gridMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-gridMuted"
+              title={ui.marketing.featureSplit.title}
+              lead={ui.marketing.featureSplit.lead}
+              badge={ui.marketing.featureSplit.badge}
+              features={features}
+              stats={stats}
+              actions={FEATURESPLIT_ACTIONS}
+              layout="grid"
+              mediaSide="end"
+              tone="muted"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridMuted))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-metricCards-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="metricCards"
+        >
+          <Title as={3} size="base" weight="bold" id="featuresplit-metricCards-label" data-testid="variant-label">
+            {ui.blocks.variants.featuresplit.metricCards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-metricCards"
+              title={ui.marketing.featureSplit.title}
+              lead={ui.marketing.featureSplit.lead}
+              badge={ui.marketing.featureSplit.badge}
+              features={features}
+              stats={stats}
+              actions={FEATURESPLIT_ACTIONS}
+              layout="metrics"
+              mediaSide="end"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-featureCards-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="featureCards"
+        >
+          <Title as={3} size="base" weight="bold" id="featuresplit-featureCards-label" data-testid="variant-label">
+            {ui.blocks.variants.featuresplit.featureCards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-featureCards"
+              title={ui.marketing.featureSplit.title}
+              lead={ui.marketing.featureSplit.lead}
+              badge={ui.marketing.featureSplit.badge}
+              features={features}
+              stats={stats}
+              actions={FEATURESPLIT_ACTIONS}
+              layout="cards"
+              mediaSide="end"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.featureCards))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFooterPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFooterPage.svelte
new file mode 100644
index 0000000..48c3b70
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFooterPage.svelte
@@ -0,0 +1,318 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-footer page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    SiteFooter,
+    SitemapFooter,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type MegaGroup,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+
+  const SITEMAP_SIGNUP = { title: ui.vibe.sitemap.signupTitle, label: ui.vibe.sitemap.signupLabel, submit: ui.vibe.sitemap.signupSubmit } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingFooter}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 9)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-footer-title"
+        data-testid="catalog-block"
+        data-block="footer"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-footer-title">
+            {ui.blocks.names.footer}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.footer}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footer-minimal-label"
+          data-testid="variant"
+          data-block="footer"
+          data-variant="minimal"
+        >
+          <Title as={3} size="base" weight="bold" id="footer-minimal-label" data-testid="variant-label">
+            {ui.blocks.variants.footer.minimal}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteFooter
+              labels={ui.site.footer}
+              layout="minimal"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.minimal))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footer-centered-label"
+          data-testid="variant"
+          data-block="footer"
+          data-variant="centered"
+        >
+          <Title as={3} size="base" weight="bold" id="footer-centered-label" data-testid="variant-label">
+            {ui.blocks.variants.footer.centered}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteFooter
+              labels={ui.site.footer}
+              layout="centered"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footer-compact-label"
+          data-testid="variant"
+          data-block="footer"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="footer-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.footer.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteFooter
+              labels={ui.site.footer}
+              layout="minimal"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.compact))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-sitemap-title"
+        data-testid="catalog-block"
+        data-block="sitemap"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-sitemap-title">
+            {ui.blocks.names.sitemap}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.sitemap}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-columns-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="columns"
+        >
+          <Title as={3} size="base" weight="bold" id="sitemap-columns-label" data-testid="variant-label">
+            {ui.blocks.variants.sitemap.columns}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-columns"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.vibe.sitemap.tagline}
+              copyright={ui.vibe.sitemap.copyright}
+              groups={sitemap}
+              signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+              status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+              layout="columns"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.columns))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-card-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="card"
+        >
+          <Title as={3} size="base" weight="bold" id="sitemap-card-label" data-testid="variant-label">
+            {ui.blocks.variants.sitemap.card}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-card"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.vibe.sitemap.tagline}
+              copyright={ui.vibe.sitemap.copyright}
+              groups={sitemap}
+              signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+              status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+              layout="card"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.card))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-row-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="row"
+        >
+          <Title as={3} size="base" weight="bold" id="sitemap-row-label" data-testid="variant-label">
+            {ui.blocks.variants.sitemap.row}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-row"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.vibe.sitemap.tagline}
+              copyright={ui.vibe.sitemap.copyright}
+              groups={sitemap}
+              signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+              status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+              layout="row"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.row))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-newsletter-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="newsletter"
+        >
+          <Title as={3} size="base" weight="bold" id="sitemap-newsletter-label" data-testid="variant-label">
+            {ui.blocks.variants.sitemap.newsletter}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-newsletter"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.vibe.sitemap.tagline}
+              copyright={ui.vibe.sitemap.copyright}
+              groups={sitemap}
+              signup={{ ...SITEMAP_SIGNUP, mode: "first" }}
+              status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+              layout="columns"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.newsletter))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-status-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="status"
+        >
+          <Title as={3} size="base" weight="bold" id="sitemap-status-label" data-testid="variant-label">
+            {ui.blocks.variants.sitemap.status}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-status"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.vibe.sitemap.tagline}
+              copyright={ui.vibe.sitemap.copyright}
+              groups={sitemap}
+              signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+              status={{ label: ui.vibe.sitemap.status, mode: "show" }}
+              layout="columns"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.status))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-compact-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="sitemap-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.sitemap.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-compact"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.vibe.sitemap.tagline}
+              copyright={ui.vibe.sitemap.copyright}
+              groups={sitemap}
+              signup={{ ...SITEMAP_SIGNUP, mode: "none" }}
+              status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+              layout="columns"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.compact))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFooterSplitPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFooterSplitPage.svelte
new file mode 100644
index 0000000..08b540b
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingFooterSplitPage.svelte
@@ -0,0 +1,263 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-footer-split page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    FooterSplit,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type MegaGroup,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+  import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+  const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+
+  const FOOTERSPLIT_EXTRAS = { stats, points: features, contacts, channels: community } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingFooterSplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 6)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-footersplit-title"
+        data-testid="catalog-block"
+        data-block="footersplit"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-footersplit-title">
+            {ui.blocks.names.footersplit}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.footersplit}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-statsCards-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="statsCards"
+        >
+          <Title as={3} size="base" weight="bold" id="footersplit-statsCards-label" data-testid="variant-label">
+            {ui.blocks.variants.footersplit.statsCards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-statsCards"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.marketing.footerSplit.tagline}
+              copyright={ui.marketing.footerSplit.copyright}
+              groups={sitemap}
+              extras={FOOTERSPLIT_EXTRAS}
+              labels={ui.marketing.footerSplit.labels}
+              layout="stats"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.statsCards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-splitPoints-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="splitPoints"
+        >
+          <Title as={3} size="base" weight="bold" id="footersplit-splitPoints-label" data-testid="variant-label">
+            {ui.blocks.variants.footersplit.splitPoints}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-splitPoints"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.marketing.footerSplit.tagline}
+              copyright={ui.marketing.footerSplit.copyright}
+              groups={sitemap}
+              extras={FOOTERSPLIT_EXTRAS}
+              labels={ui.marketing.footerSplit.labels}
+              layout="points"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitPoints))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-splitLinks-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="splitLinks"
+        >
+          <Title as={3} size="base" weight="bold" id="footersplit-splitLinks-label" data-testid="variant-label">
+            {ui.blocks.variants.footersplit.splitLinks}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-splitLinks"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.marketing.footerSplit.tagline}
+              copyright={ui.marketing.footerSplit.copyright}
+              groups={sitemap}
+              extras={FOOTERSPLIT_EXTRAS}
+              labels={ui.marketing.footerSplit.labels}
+              layout="links"
+              mediaSide="end"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitLinks))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-newsletterStart-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="newsletterStart"
+        >
+          <Title as={3} size="base" weight="bold" id="footersplit-newsletterStart-label" data-testid="variant-label">
+            {ui.blocks.variants.footersplit.newsletterStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-newsletterStart"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.marketing.footerSplit.tagline}
+              copyright={ui.marketing.footerSplit.copyright}
+              groups={sitemap}
+              extras={FOOTERSPLIT_EXTRAS}
+              labels={ui.marketing.footerSplit.labels}
+              layout="newsletter"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.newsletterStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-splitContacts-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="splitContacts"
+        >
+          <Title as={3} size="base" weight="bold" id="footersplit-splitContacts-label" data-testid="variant-label">
+            {ui.blocks.variants.footersplit.splitContacts}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-splitContacts"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.marketing.footerSplit.tagline}
+              copyright={ui.marketing.footerSplit.copyright}
+              groups={sitemap}
+              extras={FOOTERSPLIT_EXTRAS}
+              labels={ui.marketing.footerSplit.labels}
+              layout="contacts"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitContacts))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-channelsStart-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="channelsStart"
+        >
+          <Title as={3} size="base" weight="bold" id="footersplit-channelsStart-label" data-testid="variant-label">
+            {ui.blocks.variants.footersplit.channelsStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-channelsStart"
+              label={ui.vibe.sitemap.label}
+              brand={ui.site.header.brand}
+              tagline={ui.marketing.footerSplit.tagline}
+              copyright={ui.marketing.footerSplit.copyright}
+              groups={sitemap}
+              extras={FOOTERSPLIT_EXTRAS}
+              labels={ui.marketing.footerSplit.labels}
+              layout="channels"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.channelsStart))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingGalleryPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingGalleryPage.svelte
new file mode 100644
index 0000000..3245cfb
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingGalleryPage.svelte
@@ -0,0 +1,379 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-gallery page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PhotoGallery,
+    Stack,
+    TemplateGrid,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Filter,
+    type Photo,
+    type Template,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+  import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+  import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+  const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+  const TEMPLATES_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "views": "metadata.views.value|compact",
+    "likes": "metadata.likes.value|compact",
+    "topic": "metadata.topic.value",
+  } as const;
+  const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+  const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+  const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+  const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingGallery}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 10)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-photos-title"
+        data-testid="catalog-block"
+        data-block="photos"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-photos-title">
+            {ui.blocks.names.photos}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.photos}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-grid-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="grid"
+        >
+          <Title as={3} size="base" weight="bold" id="photos-grid-label" data-testid="variant-label">
+            {ui.blocks.variants.photos.grid}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-grid"
+              title={ui.company.photos.title}
+              lead={ui.company.photos.lead}
+              photos={photos}
+              empty={ui.empty.photos}
+              labels={ui.company.photos}
+              layout="grid"
+              captions="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.grid))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-gridPlain-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="gridPlain"
+        >
+          <Title as={3} size="base" weight="bold" id="photos-gridPlain-label" data-testid="variant-label">
+            {ui.blocks.variants.photos.gridPlain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-gridPlain"
+              title={ui.company.photos.title}
+              lead={ui.company.photos.lead}
+              photos={photos}
+              empty={ui.empty.photos}
+              labels={ui.company.photos}
+              layout="grid"
+              captions="hide"
+              tone="muted"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.gridPlain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-masonry-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="masonry"
+        >
+          <Title as={3} size="base" weight="bold" id="photos-masonry-label" data-testid="variant-label">
+            {ui.blocks.variants.photos.masonry}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-masonry"
+              title={ui.company.photos.title}
+              lead={ui.company.photos.lead}
+              photos={photos}
+              empty={ui.empty.photos}
+              labels={ui.company.photos}
+              layout="masonry"
+              captions="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-mosaic-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="mosaic"
+        >
+          <Title as={3} size="base" weight="bold" id="photos-mosaic-label" data-testid="variant-label">
+            {ui.blocks.variants.photos.mosaic}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-mosaic"
+              title={ui.company.photos.title}
+              lead={ui.company.photos.lead}
+              photos={photos}
+              empty={ui.empty.photos}
+              labels={ui.company.photos}
+              layout="mosaic"
+              captions="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.mosaic))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-featured-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="featured"
+        >
+          <Title as={3} size="base" weight="bold" id="photos-featured-label" data-testid="variant-label">
+            {ui.blocks.variants.photos.featured}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-featured"
+              title={ui.company.photos.title}
+              lead={ui.company.photos.lead}
+              photos={photos}
+              empty={ui.empty.photos}
+              labels={ui.company.photos}
+              layout="featured"
+              captions="show"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.featured))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-cards-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="photos-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.photos.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-cards"
+              title={ui.company.photos.title}
+              lead={ui.company.photos.lead}
+              photos={photos}
+              empty={ui.empty.photos}
+              labels={ui.company.photos}
+              layout="cards"
+              captions="show"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.cards))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-templates-title"
+        data-testid="catalog-block"
+        data-block="templates"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-templates-title">
+            {ui.blocks.names.templates}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.templates}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="templates-grid4-label"
+          data-testid="variant"
+          data-block="templates"
+          data-variant="grid4"
+        >
+          <Title as={3} size="base" weight="bold" id="templates-grid4-label" data-testid="variant-label">
+            {ui.blocks.variants.templates.grid4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TemplateGrid
+              id="templates-grid4"
+              title={ui.vibe.templates.title}
+              templates={templates}
+              filters={templateFilters}
+              labels={ui.vibe.templates}
+              browseHref="#/"
+              empty={ui.empty.templates}
+              cols="1-4"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="templates-grid3-label"
+          data-testid="variant"
+          data-block="templates"
+          data-variant="grid3"
+        >
+          <Title as={3} size="base" weight="bold" id="templates-grid3-label" data-testid="variant-label">
+            {ui.blocks.variants.templates.grid3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TemplateGrid
+              id="templates-grid3"
+              title={ui.vibe.templates.title}
+              templates={templates}
+              filters={templateFilters}
+              labels={ui.vibe.templates}
+              browseHref="#/"
+              empty={ui.empty.templates}
+              cols="1-3"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="templates-muted-label"
+          data-testid="variant"
+          data-block="templates"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="templates-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.templates.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TemplateGrid
+              id="templates-muted"
+              title={ui.vibe.templates.title}
+              templates={templates}
+              filters={templateFilters}
+              labels={ui.vibe.templates}
+              browseHref="#/"
+              empty={ui.empty.templates}
+              cols="1-4"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.muted))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="templates-roomy-label"
+          data-testid="variant"
+          data-block="templates"
+          data-variant="roomy"
+        >
+          <Title as={3} size="base" weight="bold" id="templates-roomy-label" data-testid="variant-label">
+            {ui.blocks.variants.templates.roomy}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TemplateGrid
+              id="templates-roomy"
+              title={ui.vibe.templates.title}
+              templates={templates}
+              filters={templateFilters}
+              labels={ui.vibe.templates}
+              browseHref="#/"
+              empty={ui.empty.templates}
+              cols="1-4"
+              tone="default"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.roomy))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingHeroPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingHeroPage.svelte
new file mode 100644
index 0000000..3052f38
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingHeroPage.svelte
@@ -0,0 +1,527 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-hero page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    HeroClassic,
+    HeroPrompt,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type NavLink,
+    type Topic,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { prompts as promptsEntries } from "@ui8kit/app-shared/data/prompts";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const PROMPTS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const prompts = fromCodex<Topic>(promptsEntries, PROMPTS_FIELDS, CODEX);
+
+  const HERO_ACTIONS = {
+    cta: ui.site.home.cta,
+    href: "#/pricing",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+  } as const;
+  const HERO_MEDIA = { codeTitle: ui.vibe.code.title, prompt: ui.vibe.code.prompt, lines: terminal } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingHero}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 15)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-hero-title"
+        data-testid="catalog-block"
+        data-block="hero"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-hero-title">
+            {ui.blocks.names.hero}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.hero}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-centered-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="centered"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-centered-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.centered}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-centered"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "one" }}
+              media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.centered))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-screenshot-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="screenshot"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-screenshot-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.screenshot}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-screenshot"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "one" }}
+              media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.screenshot))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-backdrop-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="backdrop"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-backdrop-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.backdrop}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-backdrop"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "one" }}
+              media={{ ...HERO_MEDIA, kind: "backdrop", side: "end" }}
+              layout="centered"
+              scale="default"
+              tone="muted"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.backdrop))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-code-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="code"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-code-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.code}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-code"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "two" }}
+              media={{ ...HERO_MEDIA, kind: "code", side: "end" }}
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.code))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-cluster-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="cluster"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-cluster-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.cluster}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-cluster"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "one" }}
+              media={{ ...HERO_MEDIA, kind: "cluster", side: "end" }}
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.cluster))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-display-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="display"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-display-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.display}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-display"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "one" }}
+              media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+              layout="centered"
+              scale="display"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.display))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-form-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="form"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-form-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.form}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-form"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "form" }}
+              media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.form))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-prompt-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="prompt"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-prompt-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.prompt}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroPrompt
+              title={ui.vibe.hero.title}
+              actions={{ ...HERO_ACTIONS, emailLabel: ui.vibe.hero.promptLabel, mode: "form" }}
+              composer={{ attachLabel: ui.vibe.hero.attach, modelLabel: ui.vibe.hero.model }}
+              nav={{
+                brand: ui.site.header.brand,
+                links: navlinks,
+                current: "link-product",
+                skip: ui.site.header.skip,
+                label: ui.site.header.nav,
+                login: ui.site.header.login,
+                loginHref: "#/login",
+              }}
+              density="compact"
+              badge={ui.vibe.hero.badgeLabel}
+              badgeMark={ui.vibe.hero.badgeMark}
+              topics={prompts}
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.prompt))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-twoActions-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="twoActions"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-twoActions-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.twoActions}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-twoActions"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "two" }}
+              media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.twoActions))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-split-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-split-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-split"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "one" }}
+              media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-splitStart-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="splitStart"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-splitStart-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.splitStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-splitStart"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "two" }}
+              media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.splitStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-muted-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-muted"
+              title={ui.site.home.title}
+              text={ui.site.home.text}
+              actions={{ ...HERO_ACTIONS, mode: "one" }}
+              media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+              layout="centered"
+              scale="default"
+              tone="muted"
+              density="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.muted))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-saas-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="saas"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-saas-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.saas}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-saas"
+              title={ui.cases.saas.hero.title}
+              text={ui.cases.saas.hero.text}
+              actions={{
+                ...HERO_ACTIONS,
+                cta: ui.cases.saas.hero.cta,
+                secondary: ui.cases.saas.hero.secondary,
+                mode: "two",
+              }}
+              media={{ ...HERO_MEDIA, kind: "image", side: "end" }}
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.saas))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-shop-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="shop"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.shop}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-shop"
+              title={ui.cases.shop.hero.title}
+              text={ui.cases.shop.hero.text}
+              actions={{
+                ...HERO_ACTIONS,
+                cta: ui.cases.shop.hero.cta,
+                secondary: ui.cases.shop.hero.secondary,
+                mode: "one",
+              }}
+              media={{ ...HERO_MEDIA, kind: "image", side: "start" }}
+              layout="split"
+              scale="default"
+              tone="muted"
+              density="roomy"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-blog-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="blog"
+        >
+          <Title as={3} size="base" weight="bold" id="hero-blog-label" data-testid="variant-label">
+            {ui.blocks.variants.hero.blog}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-blog"
+              title={ui.cases.blog.hero.title}
+              text={ui.cases.blog.hero.text}
+              actions={{
+                ...HERO_ACTIONS,
+                cta: ui.cases.blog.hero.cta,
+                secondary: ui.cases.blog.hero.secondary,
+                mode: "one",
+              }}
+              media={{ ...HERO_MEDIA, kind: "none", side: "end" }}
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="compact"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.blog))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingHeroSplitPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingHeroSplitPage.svelte
new file mode 100644
index 0000000..3b92450
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingHeroSplitPage.svelte
@@ -0,0 +1,325 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-hero-split page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    HeroSplit,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Plan,
+    type Quote,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+  const HEROSPLIT_ACTIONS = {
+    mode: "two",
+    cta: ui.marketing.heroSplit.cta,
+    href: "#/pricing",
+    secondary: ui.marketing.heroSplit.secondary,
+    secondaryHref: "#/features",
+  } as const;
+  const HEROSPLIT_CONTENT = {
+    stats,
+    features,
+    people: testimonials,
+    plans: tiers,
+    proof: ui.marketing.heroSplit.proof,
+    card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingHeroSplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 7)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-herosplit-title"
+        data-testid="catalog-block"
+        data-block="herosplit"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-herosplit-title">
+            {ui.blocks.names.herosplit}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.herosplit}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-statsCards-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="statsCards"
+        >
+          <Title as={3} size="base" weight="bold" id="herosplit-statsCards-label" data-testid="variant-label">
+            {ui.blocks.variants.herosplit.statsCards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-statsCards"
+              title={ui.marketing.heroSplit.title}
+              lead={ui.marketing.heroSplit.lead}
+              badge={ui.marketing.heroSplit.badge}
+              actions={HEROSPLIT_ACTIONS}
+              content={HEROSPLIT_CONTENT}
+              extra="stats"
+              media="picture"
+              mediaSide="end"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.statsCards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-avatars-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="avatars"
+        >
+          <Title as={3} size="base" weight="bold" id="herosplit-avatars-label" data-testid="variant-label">
+            {ui.blocks.variants.herosplit.avatars}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-avatars"
+              title={ui.marketing.heroSplit.title}
+              lead={ui.marketing.heroSplit.lead}
+              badge={ui.marketing.heroSplit.badge}
+              actions={HEROSPLIT_ACTIONS}
+              content={HEROSPLIT_CONTENT}
+              extra="avatars"
+              media="picture"
+              mediaSide="end"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.avatars))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-miniCards-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="miniCards"
+        >
+          <Title as={3} size="base" weight="bold" id="herosplit-miniCards-label" data-testid="variant-label">
+            {ui.blocks.variants.herosplit.miniCards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-miniCards"
+              title={ui.marketing.heroSplit.title}
+              lead={ui.marketing.heroSplit.lead}
+              badge={ui.marketing.heroSplit.badge}
+              actions={HEROSPLIT_ACTIONS}
+              content={HEROSPLIT_CONTENT}
+              extra="minis"
+              media="card"
+              mediaSide="end"
+              tone="muted"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.miniCards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-quoteStats-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="quoteStats"
+        >
+          <Title as={3} size="base" weight="bold" id="herosplit-quoteStats-label" data-testid="variant-label">
+            {ui.blocks.variants.herosplit.quoteStats}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-quoteStats"
+              title={ui.marketing.heroSplit.title}
+              lead={ui.marketing.heroSplit.lead}
+              badge={ui.marketing.heroSplit.badge}
+              actions={HEROSPLIT_ACTIONS}
+              content={HEROSPLIT_CONTENT}
+              extra="quote"
+              media="card"
+              mediaSide="end"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.quoteStats))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-planCards-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="planCards"
+        >
+          <Title as={3} size="base" weight="bold" id="herosplit-planCards-label" data-testid="variant-label">
+            {ui.blocks.variants.herosplit.planCards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-planCards"
+              title={ui.marketing.heroSplit.title}
+              lead={ui.marketing.heroSplit.lead}
+              badge={ui.marketing.heroSplit.badge}
+              actions={HEROSPLIT_ACTIONS}
+              content={HEROSPLIT_CONTENT}
+              extra="none"
+              media="plans"
+              mediaSide="start"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.planCards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-pictureGrid-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="pictureGrid"
+        >
+          <Title as={3} size="base" weight="bold" id="herosplit-pictureGrid-label" data-testid="variant-label">
+            {ui.blocks.variants.herosplit.pictureGrid}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-pictureGrid"
+              title={ui.marketing.heroSplit.title}
+              lead={ui.marketing.heroSplit.lead}
+              badge={ui.marketing.heroSplit.badge}
+              actions={HEROSPLIT_ACTIONS}
+              content={HEROSPLIT_CONTENT}
+              extra="stats"
+              media="grid"
+              mediaSide="end"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGrid))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-pictureGridStart-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="pictureGridStart"
+        >
+          <Title as={3} size="base" weight="bold" id="herosplit-pictureGridStart-label" data-testid="variant-label">
+            {ui.blocks.variants.herosplit.pictureGridStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-pictureGridStart"
+              title={ui.marketing.heroSplit.title}
+              lead={ui.marketing.heroSplit.lead}
+              badge={ui.marketing.heroSplit.badge}
+              actions={HEROSPLIT_ACTIONS}
+              content={HEROSPLIT_CONTENT}
+              extra="avatars"
+              media="grid"
+              mediaSide="start"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGridStart))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingHowItWorksPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingHowItWorksPage.svelte
new file mode 100644
index 0000000..a4c8502
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingHowItWorksPage.svelte
@@ -0,0 +1,229 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-how-it-works page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    StepsList,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Step,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingHowItWorks}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 6)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-steps-title"
+        data-testid="catalog-block"
+        data-block="steps"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-steps-title">
+            {ui.blocks.names.steps}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.steps}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-row-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="row"
+        >
+          <Title as={3} size="base" weight="bold" id="steps-row-label" data-testid="variant-label">
+            {ui.blocks.variants.steps.row}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-row"
+              title={ui.marketing.steps.title}
+              steps={steps}
+              empty={ui.empty.steps}
+              layout="row"
+              marker="number"
+              align="start"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.row))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-rowIcons-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="rowIcons"
+        >
+          <Title as={3} size="base" weight="bold" id="steps-rowIcons-label" data-testid="variant-label">
+            {ui.blocks.variants.steps.rowIcons}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-rowIcons"
+              title={ui.marketing.steps.title}
+              steps={steps}
+              empty={ui.empty.steps}
+              layout="row"
+              marker="icon"
+              align="start"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-column-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="column"
+        >
+          <Title as={3} size="base" weight="bold" id="steps-column-label" data-testid="variant-label">
+            {ui.blocks.variants.steps.column}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-column"
+              title={ui.marketing.steps.title}
+              steps={steps}
+              empty={ui.empty.steps}
+              layout="column"
+              marker="number"
+              align="start"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-centered-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="centered"
+        >
+          <Title as={3} size="base" weight="bold" id="steps-centered-label" data-testid="variant-label">
+            {ui.blocks.variants.steps.centered}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-centered"
+              title={ui.marketing.steps.title}
+              steps={steps}
+              empty={ui.empty.steps}
+              layout="row"
+              marker="number"
+              align="center"
+              tone="muted"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.centered))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-columnIcons-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="columnIcons"
+        >
+          <Title as={3} size="base" weight="bold" id="steps-columnIcons-label" data-testid="variant-label">
+            {ui.blocks.variants.steps.columnIcons}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-columnIcons"
+              title={ui.marketing.steps.title}
+              steps={steps}
+              empty={ui.empty.steps}
+              layout="column"
+              marker="icon"
+              align="start"
+              tone="default"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.columnIcons))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-compact-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="steps-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.steps.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-compact"
+              title={ui.marketing.steps.title}
+              steps={steps}
+              empty={ui.empty.steps}
+              layout="row"
+              marker="number"
+              align="start"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.compact))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingMediaListPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingMediaListPage.svelte
new file mode 100644
index 0000000..fd6fafe
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingMediaListPage.svelte
@@ -0,0 +1,294 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-media-list page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    MediaList,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Category,
+    type Feature,
+    type Post,
+    type Review,
+    type Stat,
+    type Step,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+  import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const REVIEWS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "author": "author_id|author",
+    "rating": "metadata.rating.value",
+    "text": "metadata.text.value",
+    "date": "metadata.date.value|date",
+  } as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+  const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+  const MEDIALIST_LABELS = {
+    count: ui.marketing.mediaList.count,
+    minutes: ui.content.labels.minutes,
+    featured: ui.marketing.mediaList.featured,
+    rating: ui.testimonials.rating,
+    figures: ui.marketing.mediaList.supportFigures,
+  } as const;
+  const MEDIALIST_EXTRAS = { stats, steps, posts, topics: categories, channels, reviews } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingMediaList}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 6)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-medialist-title"
+        data-testid="catalog-block"
+        data-block="medialist"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-medialist-title">
+            {ui.blocks.names.medialist}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.medialist}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-figuresStart-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="figuresStart"
+        >
+          <Title as={3} size="base" weight="bold" id="medialist-figuresStart-label" data-testid="variant-label">
+            {ui.blocks.variants.medialist.figuresStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-figuresStart"
+              title={ui.marketing.mediaList.figures.title}
+              lead={ui.marketing.mediaList.figures.lead}
+              badge={ui.marketing.mediaList.figures.badge}
+              labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.figures.list }}
+              actions={{ mode: "one", cta: ui.marketing.mediaList.figures.cta, href: "#/start" }}
+              extras={MEDIALIST_EXTRAS}
+              layout="figures"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.figuresStart))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-proofReview-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="proofReview"
+        >
+          <Title as={3} size="base" weight="bold" id="medialist-proofReview-label" data-testid="variant-label">
+            {ui.blocks.variants.medialist.proofReview}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-proofReview"
+              title={ui.marketing.mediaList.proof.title}
+              lead={ui.marketing.mediaList.proof.lead}
+              badge={ui.marketing.mediaList.proof.badge}
+              labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.proof.list }}
+              actions={{
+                mode: "two",
+                cta: ui.marketing.mediaList.proof.cta,
+                href: "#/start",
+                secondary: ui.marketing.mediaList.proof.secondary,
+                secondaryHref: "#/more",
+              }}
+              extras={MEDIALIST_EXTRAS}
+              layout="proof"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.proofReview))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-stepsRows-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="stepsRows"
+        >
+          <Title as={3} size="base" weight="bold" id="medialist-stepsRows-label" data-testid="variant-label">
+            {ui.blocks.variants.medialist.stepsRows}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-stepsRows"
+              title={ui.marketing.mediaList.steps.title}
+              lead={ui.marketing.mediaList.steps.lead}
+              badge={ui.marketing.mediaList.steps.badge}
+              labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.steps.list }}
+              actions={{ mode: "one", cta: ui.marketing.mediaList.steps.cta, href: "#/start" }}
+              extras={MEDIALIST_EXTRAS}
+              layout="steps"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.stepsRows))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-latestPosts-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="latestPosts"
+        >
+          <Title as={3} size="base" weight="bold" id="medialist-latestPosts-label" data-testid="variant-label">
+            {ui.blocks.variants.medialist.latestPosts}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-latestPosts"
+              title={ui.marketing.mediaList.posts.title}
+              lead={ui.marketing.mediaList.posts.lead}
+              badge={ui.marketing.mediaList.posts.badge}
+              labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.posts.list }}
+              actions={{ mode: "one", cta: ui.marketing.mediaList.posts.cta, href: "#/start" }}
+              extras={MEDIALIST_EXTRAS}
+              layout="posts"
+              mediaSide="end"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.latestPosts))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-topicRows-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="topicRows"
+        >
+          <Title as={3} size="base" weight="bold" id="medialist-topicRows-label" data-testid="variant-label">
+            {ui.blocks.variants.medialist.topicRows}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-topicRows"
+              title={ui.marketing.mediaList.topics.title}
+              lead={ui.marketing.mediaList.topics.lead}
+              badge={ui.marketing.mediaList.topics.badge}
+              labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.topics.list }}
+              actions={{ mode: "one", cta: ui.marketing.mediaList.topics.cta, href: "#/start" }}
+              extras={MEDIALIST_EXTRAS}
+              layout="topics"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-contactStart-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="contactStart"
+        >
+          <Title as={3} size="base" weight="bold" id="medialist-contactStart-label" data-testid="variant-label">
+            {ui.blocks.variants.medialist.contactStart}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-contactStart"
+              title={ui.marketing.mediaList.contact.title}
+              lead={ui.marketing.mediaList.contact.lead}
+              badge={ui.marketing.mediaList.contact.badge}
+              labels={{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.contact.list }}
+              actions={{ mode: "one", cta: ui.marketing.mediaList.contact.cta, href: "#/start" }}
+              extras={MEDIALIST_EXTRAS}
+              layout="contact"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.contactStart))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingNavigationPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingNavigationPage.svelte
new file mode 100644
index 0000000..1481f85
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingNavigationPage.svelte
@@ -0,0 +1,491 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-navigation page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    MegaMenu,
+    NavBar,
+    SiteHeader,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type MegaGroup,
+    type NavLink,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+  const actions = { toggleTheme };
+
+  const NAVBAR_ACTIONS = { cta: ui.site.header.cta, href: "#/", login: ui.site.header.login, loginHref: "#/login" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingNavigation}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 14)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-header-title"
+        data-testid="catalog-block"
+        data-block="header"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-header-title">
+            {ui.blocks.names.header}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.header}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="header-inline-label"
+          data-testid="variant"
+          data-block="header"
+          data-variant="inline"
+        >
+          <Title as={3} size="base" weight="bold" id="header-inline-label" data-testid="variant-label">
+            {ui.blocks.variants.header.inline}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteHeader
+              labels={ui.site.header}
+              current="home"
+              cta={ui.site.header.cta}
+              layout="inline"
+              position="static"
+              actions="none"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.inline))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="header-stacked-label"
+          data-testid="variant"
+          data-block="header"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="header-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.header.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteHeader
+              labels={ui.site.header}
+              current="home"
+              cta={ui.site.header.cta}
+              layout="stacked"
+              position="static"
+              actions="none"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="header-sticky-label"
+          data-testid="variant"
+          data-block="header"
+          data-variant="sticky"
+        >
+          <Title as={3} size="base" weight="bold" id="header-sticky-label" data-testid="variant-label">
+            {ui.blocks.variants.header.sticky}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteHeader
+              labels={ui.site.header}
+              current="home"
+              cta={ui.site.header.cta}
+              layout="inline"
+              position="sticky"
+              actions="none"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.sticky))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="header-withCta-label"
+          data-testid="variant"
+          data-block="header"
+          data-variant="withCta"
+        >
+          <Title as={3} size="base" weight="bold" id="header-withCta-label" data-testid="variant-label">
+            {ui.blocks.variants.header.withCta}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteHeader
+              labels={ui.site.header}
+              current="home"
+              cta={ui.site.header.cta}
+              layout="inline"
+              position="static"
+              actions="cta"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.withCta))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-navbar-title"
+        data-testid="catalog-block"
+        data-block="navbar"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-navbar-title">
+            {ui.blocks.names.navbar}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.navbar}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-inline-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="inline"
+        >
+          <Title as={3} size="base" weight="bold" id="navbar-inline-label" data-testid="variant-label">
+            {ui.blocks.variants.navbar.inline}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              links={navlinks}
+              current="link-product"
+              actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              layout="inline"
+              over="none"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inline))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-split-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="navbar-split-label" data-testid="variant-label">
+            {ui.blocks.variants.navbar.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              links={navlinks}
+              current="link-product"
+              actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              layout="split"
+              over="none"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-search-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="search"
+        >
+          <Title as={3} size="base" weight="bold" id="navbar-search-label" data-testid="variant-label">
+            {ui.blocks.variants.navbar.search}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              links={navlinks}
+              current="link-product"
+              actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              layout="search"
+              over="none"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-media-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="media"
+        >
+          <Title as={3} size="base" weight="bold" id="navbar-media-label" data-testid="variant-label">
+            {ui.blocks.variants.navbar.media}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              links={navlinks}
+              current="link-product"
+              actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              layout="inline"
+              over="media"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-plain-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="navbar-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.navbar.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              links={navlinks}
+              current="link-product"
+              actions={{ ...NAVBAR_ACTIONS, mode: "none" }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              layout="inline"
+              over="none"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.plain))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-inverse-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="inverse"
+        >
+          <Title as={3} size="base" weight="bold" id="navbar-inverse-label" data-testid="variant-label">
+            {ui.blocks.variants.navbar.inverse}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              links={navlinks}
+              current="link-product"
+              actions={{ ...NAVBAR_ACTIONS, mode: "cta" }}
+              search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+              layout="inline"
+              over="none"
+              tone="inverse"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inverse))}
+              ontheme={() => actions.toggleTheme()}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-megamenu-title"
+        data-testid="catalog-block"
+        data-block="megamenu"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-megamenu-title">
+            {ui.blocks.names.megamenu}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.megamenu}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="megamenu-open-label"
+          data-testid="variant"
+          data-block="megamenu"
+          data-variant="open"
+        >
+          <Title as={3} size="base" weight="bold" id="megamenu-open-label" data-testid="variant-label">
+            {ui.blocks.variants.megamenu.open}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MegaMenu
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              trigger={ui.vibe.mega.trigger}
+              links={navlinks}
+              groups={megagroups}
+              promoTitle={ui.vibe.mega.promoTitle}
+              promoText={ui.vibe.mega.promoText}
+              panel="open"
+              cols="3"
+              promo="none"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="megamenu-closed-label"
+          data-testid="variant"
+          data-block="megamenu"
+          data-variant="closed"
+        >
+          <Title as={3} size="base" weight="bold" id="megamenu-closed-label" data-testid="variant-label">
+            {ui.blocks.variants.megamenu.closed}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MegaMenu
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              trigger={ui.vibe.mega.trigger}
+              links={navlinks}
+              groups={megagroups}
+              promoTitle={ui.vibe.mega.promoTitle}
+              promoText={ui.vibe.mega.promoText}
+              panel="closed"
+              cols="3"
+              promo="none"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.closed))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="megamenu-twoCols-label"
+          data-testid="variant"
+          data-block="megamenu"
+          data-variant="twoCols"
+        >
+          <Title as={3} size="base" weight="bold" id="megamenu-twoCols-label" data-testid="variant-label">
+            {ui.blocks.variants.megamenu.twoCols}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MegaMenu
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              trigger={ui.vibe.mega.trigger}
+              links={navlinks}
+              groups={megagroups}
+              promoTitle={ui.vibe.mega.promoTitle}
+              promoText={ui.vibe.mega.promoText}
+              panel="open"
+              cols="2"
+              promo="none"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="megamenu-promo-label"
+          data-testid="variant"
+          data-block="megamenu"
+          data-variant="promo"
+        >
+          <Title as={3} size="base" weight="bold" id="megamenu-promo-label" data-testid="variant-label">
+            {ui.blocks.variants.megamenu.promo}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MegaMenu
+              label={ui.vibe.nav.label}
+              brand={ui.site.header.brand}
+              trigger={ui.vibe.mega.trigger}
+              links={navlinks}
+              groups={megagroups}
+              promoTitle={ui.vibe.mega.promoTitle}
+              promoText={ui.vibe.mega.promoText}
+              panel="open"
+              cols="3"
+              promo="card"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.promo))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPageHeadPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPageHeadPage.svelte
new file mode 100644
index 0000000..2d83ebd
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPageHeadPage.svelte
@@ -0,0 +1,141 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-page-head page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PageIntro,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingPageHead}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 3)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-pagehead-title"
+        data-testid="catalog-block"
+        data-block="pagehead"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-pagehead-title">
+            {ui.blocks.names.pagehead}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.pagehead}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagehead-start-label"
+          data-testid="variant"
+          data-block="pagehead"
+          data-variant="start"
+        >
+          <Title as={3} size="base" weight="bold" id="pagehead-start-label" data-testid="variant-label">
+            {ui.blocks.variants.pagehead.start}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageIntro
+              id="pagehead-start"
+              title={ui.vibe.pagehead.title}
+              text={ui.vibe.pagehead.text}
+              cta={ui.vibe.pagehead.cta}
+              href="#/"
+              align="start"
+              tone="default"
+              density="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.start))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagehead-center-label"
+          data-testid="variant"
+          data-block="pagehead"
+          data-variant="center"
+        >
+          <Title as={3} size="base" weight="bold" id="pagehead-center-label" data-testid="variant-label">
+            {ui.blocks.variants.pagehead.center}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageIntro
+              id="pagehead-center"
+              title={ui.vibe.pagehead.title}
+              text={ui.vibe.pagehead.text}
+              cta={ui.vibe.pagehead.cta}
+              href="#/"
+              align="center"
+              tone="default"
+              density="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.center))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagehead-muted-label"
+          data-testid="variant"
+          data-block="pagehead"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="pagehead-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.pagehead.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageIntro
+              id="pagehead-muted"
+              title={ui.vibe.pagehead.title}
+              text={ui.vibe.pagehead.text}
+              cta={ui.vibe.pagehead.cta}
+              href="#/"
+              align="start"
+              tone="muted"
+              density="compact"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPageTrailPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPageTrailPage.svelte
new file mode 100644
index 0000000..c1e9764
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPageTrailPage.svelte
@@ -0,0 +1,197 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-page-trail page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PageTrail,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type NavLink,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+
+  const PAGETRAIL_EXTRAS = {
+    value: ui.marketing.pageTrail.value,
+    caption: ui.marketing.pageTrail.caption,
+    note: ui.marketing.pageTrail.note,
+    icon: "package",
+    facts: stats,
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingPageTrail}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 4)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-pagetrail-title"
+        data-testid="catalog-block"
+        data-block="pagetrail"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-pagetrail-title">
+            {ui.blocks.names.pagetrail}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.pagetrail}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagetrail-crumbs-label"
+          data-testid="variant"
+          data-block="pagetrail"
+          data-variant="crumbs"
+        >
+          <Title as={3} size="base" weight="bold" id="pagetrail-crumbs-label" data-testid="variant-label">
+            {ui.blocks.variants.pagetrail.crumbs}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageTrail
+              id="pagetrail-crumbs"
+              title={ui.marketing.pageTrail.title}
+              lead={ui.marketing.pageTrail.lead}
+              badge={ui.marketing.pageTrail.badge}
+              label={ui.marketing.pageTrail.label}
+              crumbs={crumbs}
+              extras={PAGETRAIL_EXTRAS}
+              aside="none"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbs))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagetrail-crumbsFigure-label"
+          data-testid="variant"
+          data-block="pagetrail"
+          data-variant="crumbsFigure"
+        >
+          <Title as={3} size="base" weight="bold" id="pagetrail-crumbsFigure-label" data-testid="variant-label">
+            {ui.blocks.variants.pagetrail.crumbsFigure}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageTrail
+              id="pagetrail-crumbsFigure"
+              title={ui.marketing.pageTrail.title}
+              lead={ui.marketing.pageTrail.lead}
+              badge={ui.marketing.pageTrail.badge}
+              label={ui.marketing.pageTrail.label}
+              crumbs={crumbs}
+              extras={PAGETRAIL_EXTRAS}
+              aside="figure"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsFigure))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagetrail-crumbsNote-label"
+          data-testid="variant"
+          data-block="pagetrail"
+          data-variant="crumbsNote"
+        >
+          <Title as={3} size="base" weight="bold" id="pagetrail-crumbsNote-label" data-testid="variant-label">
+            {ui.blocks.variants.pagetrail.crumbsNote}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageTrail
+              id="pagetrail-crumbsNote"
+              title={ui.marketing.pageTrail.title}
+              lead={ui.marketing.pageTrail.lead}
+              badge={ui.marketing.pageTrail.badge}
+              label={ui.marketing.pageTrail.label}
+              crumbs={crumbs}
+              extras={PAGETRAIL_EXTRAS}
+              aside="note"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsNote))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagetrail-keyFacts-label"
+          data-testid="variant"
+          data-block="pagetrail"
+          data-variant="keyFacts"
+        >
+          <Title as={3} size="base" weight="bold" id="pagetrail-keyFacts-label" data-testid="variant-label">
+            {ui.blocks.variants.pagetrail.keyFacts}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageTrail
+              id="pagetrail-keyFacts"
+              title={ui.marketing.pageTrail.title}
+              lead={ui.marketing.pageTrail.lead}
+              badge={ui.marketing.pageTrail.badge}
+              label={ui.marketing.pageTrail.label}
+              crumbs={crumbs}
+              extras={PAGETRAIL_EXTRAS}
+              aside="facts"
+              tone="muted"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.keyFacts))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPortfolioPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPortfolioPage.svelte
new file mode 100644
index 0000000..c95847b
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPortfolioPage.svelte
@@ -0,0 +1,238 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-portfolio page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    ProjectGrid,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Project,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+
+  const PROJECTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "category": "terms|term:project_category",
+    "year": "metadata.year.value",
+    "summary": "metadata.summary.value",
+    "tags": "metadata.tags.value",
+    "featured": "metadata.featured.value",
+    "client": "metadata.client.value",
+  } as const;
+
+  const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingPortfolio}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 6)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-projects-title"
+        data-testid="catalog-block"
+        data-block="projects"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-projects-title">
+            {ui.blocks.names.projects}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.projects}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-cards-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="projects-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.projects.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-cards"
+              title={ui.company.projects.title}
+              lead={ui.company.projects.lead}
+              projects={projects}
+              empty={ui.empty.projects}
+              labels={ui.company.projects}
+              layout="cards"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-compact-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="projects-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.projects.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-compact"
+              title={ui.company.projects.title}
+              lead={ui.company.projects.lead}
+              projects={projects}
+              empty={ui.empty.projects}
+              labels={ui.company.projects}
+              layout="compact"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.compact))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-overlay-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="overlay"
+        >
+          <Title as={3} size="base" weight="bold" id="projects-overlay-label" data-testid="variant-label">
+            {ui.blocks.variants.projects.overlay}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-overlay"
+              title={ui.company.projects.title}
+              lead={ui.company.projects.lead}
+              projects={projects}
+              empty={ui.empty.projects}
+              labels={ui.company.projects}
+              layout="overlay"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.overlay))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-bento-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="bento"
+        >
+          <Title as={3} size="base" weight="bold" id="projects-bento-label" data-testid="variant-label">
+            {ui.blocks.variants.projects.bento}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-bento"
+              title={ui.company.projects.title}
+              lead={ui.company.projects.lead}
+              projects={projects}
+              empty={ui.empty.projects}
+              labels={ui.company.projects}
+              layout="bento"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.bento))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-list-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="projects-list-label" data-testid="variant-label">
+            {ui.blocks.variants.projects.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-list"
+              title={ui.company.projects.title}
+              lead={ui.company.projects.lead}
+              projects={projects}
+              empty={ui.empty.projects}
+              labels={ui.company.projects}
+              layout="list"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-cardsMuted-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="cardsMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="projects-cardsMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.projects.cardsMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-cardsMuted"
+              title={ui.company.projects.title}
+              lead={ui.company.projects.lead}
+              projects={projects}
+              empty={ui.empty.projects}
+              labels={ui.company.projects}
+              layout="cards"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cardsMuted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPricingPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPricingPage.svelte
new file mode 100644
index 0000000..257a46e
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPricingPage.svelte
@@ -0,0 +1,469 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-pricing page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    PricingCard,
+    PricingTiers,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Plan,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+  import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+  const DUO_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+  const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingPricing}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 13)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-pricing-title"
+        data-testid="catalog-block"
+        data-block="pricing"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-pricing-title">
+            {ui.blocks.names.pricing}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.pricing}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-grid-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="grid"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-grid-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.grid}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-grid"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-monthly-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="monthly"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-monthly-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.monthly}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-monthly"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="monthly"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-annual-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="annual"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-annual-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.annual}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-annual"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="annual"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-duo-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="duo"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-duo-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.duo}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-duo"
+              title={ui.site.pricing.tiersTitle}
+              plans={duo}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-2"
+              emphasis="off"
+              billing="off"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-grid2-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="grid2"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-grid2-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.grid2}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-grid2"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-2"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid2))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-grid4-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="grid4"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-grid4-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.grid4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-grid4"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-4"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-stack-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="stack"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-stack-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.stack}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-stack"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="stack"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-flat-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="flat"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-flat-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.flat}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-flat"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-3"
+              emphasis="off"
+              billing="off"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.flat))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-compactMuted-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="compactMuted"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-compactMuted-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.compactMuted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-compactMuted"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.compactMuted))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-roomy-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="roomy"
+        >
+          <Title as={3} size="base" weight="bold" id="pricing-roomy-label" data-testid="variant-label">
+            {ui.blocks.variants.pricing.roomy}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-roomy"
+              title={ui.site.pricing.tiersTitle}
+              plans={tiers}
+              labels={ui.pricing}
+              billingLabels={ui.vibe.billing}
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.roomy))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-plan-title"
+        data-testid="catalog-block"
+        data-block="plan"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-plan-title">
+            {ui.blocks.names.plan}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.plan}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="plan-standard-label"
+          data-testid="variant"
+          data-block="plan"
+          data-variant="standard"
+        >
+          <Title as={3} size="base" weight="bold" id="plan-standard-label" data-testid="variant-label">
+            {ui.blocks.variants.plan.standard}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <PricingCard
+                plan={tiers.find((i) => i.id === "tier-team")!}
+                labels={ui.pricing}
+                emphasis="auto"
+                density="default"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="plan-flat-label"
+          data-testid="variant"
+          data-block="plan"
+          data-variant="flat"
+        >
+          <Title as={3} size="base" weight="bold" id="plan-flat-label" data-testid="variant-label">
+            {ui.blocks.variants.plan.flat}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <PricingCard
+                plan={tiers.find((i) => i.id === "tier-team")!}
+                labels={ui.pricing}
+                emphasis="off"
+                density="default"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="plan-compact-label"
+          data-testid="variant"
+          data-block="plan"
+          data-variant="compact"
+        >
+          <Title as={3} size="base" weight="bold" id="plan-compact-label" data-testid="variant-label">
+            {ui.blocks.variants.plan.compact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <PricingCard
+                plan={tiers.find((i) => i.id === "tier-team")!}
+                labels={ui.pricing}
+                emphasis="auto"
+                density="compact"
+              />
+            </Box>
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPricingToolsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPricingToolsPage.svelte
new file mode 100644
index 0000000..1cbdd23
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingPricingToolsPage.svelte
@@ -0,0 +1,452 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-pricing-tools page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    ComparisonTable,
+    Container,
+    CreditPacks,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    UsageCalculator,
+    tpl,
+    uniqLabel,
+    type CompareRow,
+    type Pack,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+  import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+  import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+  const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+  const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+  const CREDITS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "credits": "metadata.credits.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "badge": "metadata.badge.value",
+  } as const;
+
+  const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+  const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+  const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+
+  const USAGE_SLIDER = { min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit } as const;
+  const USAGE_PRICE = { rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingPricingTools}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 12)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-compare-title"
+        data-testid="catalog-block"
+        data-block="compare"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-compare-title">
+            {ui.blocks.names.compare}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.compare}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="compare-plans-label"
+          data-testid="variant"
+          data-block="compare"
+          data-variant="plans"
+        >
+          <Title as={3} size="base" weight="bold" id="compare-plans-label" data-testid="variant-label">
+            {ui.blocks.variants.compare.plans}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ComparisonTable
+              id="compare-plans"
+              title={ui.vibe.compare.title}
+              rows={compare}
+              empty={ui.empty.rows}
+              labels={ui.vibe.compare.labels}
+              highlight="none"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="compare-highlight-label"
+          data-testid="variant"
+          data-block="compare"
+          data-variant="highlight"
+        >
+          <Title as={3} size="base" weight="bold" id="compare-highlight-label" data-testid="variant-label">
+            {ui.blocks.variants.compare.highlight}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ComparisonTable
+              id="compare-highlight"
+              title={ui.vibe.compare.title}
+              rows={compare}
+              empty={ui.empty.rows}
+              labels={ui.vibe.compare.labels}
+              highlight="middle"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="compare-rivals-label"
+          data-testid="variant"
+          data-block="compare"
+          data-variant="rivals"
+        >
+          <Title as={3} size="base" weight="bold" id="compare-rivals-label" data-testid="variant-label">
+            {ui.blocks.variants.compare.rivals}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ComparisonTable
+              id="compare-rivals"
+              title={ui.vibe.rivals.title}
+              rows={rivals}
+              empty={ui.empty.rows}
+              labels={ui.vibe.rivals.labels}
+              highlight="middle"
+              tone="muted"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="compare-muted-label"
+          data-testid="variant"
+          data-block="compare"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="compare-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.compare.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ComparisonTable
+              id="compare-muted"
+              title={ui.vibe.compare.title}
+              rows={compare}
+              empty={ui.empty.rows}
+              labels={ui.vibe.compare.labels}
+              highlight="none"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-credits-title"
+        data-testid="catalog-block"
+        data-block="credits"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-credits-title">
+            {ui.blocks.names.credits}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.credits}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="credits-tiles4-label"
+          data-testid="variant"
+          data-block="credits"
+          data-variant="tiles4"
+        >
+          <Title as={3} size="base" weight="bold" id="credits-tiles4-label" data-testid="variant-label">
+            {ui.blocks.variants.credits.tiles4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CreditPacks
+              id="credits-tiles4"
+              title={ui.vibe.credits.title}
+              packs={credits}
+              empty={ui.empty.packs}
+              badges={ui.vibe.credits.badges}
+              buy={ui.vibe.credits.buy}
+              cols="4"
+              item="tile"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="credits-tiles2-label"
+          data-testid="variant"
+          data-block="credits"
+          data-variant="tiles2"
+        >
+          <Title as={3} size="base" weight="bold" id="credits-tiles2-label" data-testid="variant-label">
+            {ui.blocks.variants.credits.tiles2}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CreditPacks
+              id="credits-tiles2"
+              title={ui.vibe.credits.title}
+              packs={credits}
+              empty={ui.empty.packs}
+              badges={ui.vibe.credits.badges}
+              buy={ui.vibe.credits.buy}
+              cols="2"
+              item="tile"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles2))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="credits-rows-label"
+          data-testid="variant"
+          data-block="credits"
+          data-variant="rows"
+        >
+          <Title as={3} size="base" weight="bold" id="credits-rows-label" data-testid="variant-label">
+            {ui.blocks.variants.credits.rows}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CreditPacks
+              id="credits-rows"
+              title={ui.vibe.credits.title}
+              packs={credits}
+              empty={ui.empty.packs}
+              badges={ui.vibe.credits.badges}
+              buy={ui.vibe.credits.buy}
+              cols="4"
+              item="row"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="credits-muted-label"
+          data-testid="variant"
+          data-block="credits"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="credits-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.credits.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CreditPacks
+              id="credits-muted"
+              title={ui.vibe.credits.title}
+              packs={credits}
+              empty={ui.empty.packs}
+              badges={ui.vibe.credits.badges}
+              buy={ui.vibe.credits.buy}
+              cols="4"
+              item="tile"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-usage-title"
+        data-testid="catalog-block"
+        data-block="usage"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-usage-title">
+            {ui.blocks.names.usage}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.usage}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usage-card-label"
+          data-testid="variant"
+          data-block="usage"
+          data-variant="card"
+        >
+          <Title as={3} size="base" weight="bold" id="usage-card-label" data-testid="variant-label">
+            {ui.blocks.variants.usage.card}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UsageCalculator
+              id="usage-card"
+              title={ui.vibe.usage.title}
+              text={ui.vibe.usage.text}
+              usage={5000}
+              slider={USAGE_SLIDER}
+              price={USAGE_PRICE}
+              cta={ui.vibe.usage.cta}
+              href="#/"
+              layout="card"
+              ends="show"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usage-plain-label"
+          data-testid="variant"
+          data-block="usage"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="usage-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.usage.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UsageCalculator
+              id="usage-plain"
+              title={ui.vibe.usage.title}
+              text={ui.vibe.usage.text}
+              usage={5000}
+              slider={USAGE_SLIDER}
+              price={USAGE_PRICE}
+              cta={ui.vibe.usage.cta}
+              href="#/"
+              layout="plain"
+              ends="show"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.plain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usage-noEnds-label"
+          data-testid="variant"
+          data-block="usage"
+          data-variant="noEnds"
+        >
+          <Title as={3} size="base" weight="bold" id="usage-noEnds-label" data-testid="variant-label">
+            {ui.blocks.variants.usage.noEnds}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UsageCalculator
+              id="usage-noEnds"
+              title={ui.vibe.usage.title}
+              text={ui.vibe.usage.text}
+              usage={5000}
+              slider={USAGE_SLIDER}
+              price={USAGE_PRICE}
+              cta={ui.vibe.usage.cta}
+              href="#/"
+              layout="card"
+              ends="hide"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.noEnds))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usage-muted-label"
+          data-testid="variant"
+          data-block="usage"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="usage-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.usage.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UsageCalculator
+              id="usage-muted"
+              title={ui.vibe.usage.title}
+              text={ui.vibe.usage.text}
+              usage={5000}
+              slider={USAGE_SLIDER}
+              price={USAGE_PRICE}
+              cta={ui.vibe.usage.cta}
+              href="#/"
+              layout="card"
+              ends="show"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingProofPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingProofPage.svelte
new file mode 100644
index 0000000..29abd83
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingProofPage.svelte
@@ -0,0 +1,509 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-proof page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    LogoCloud,
+    ProofBand,
+    Stack,
+    Text,
+    Title,
+    VideoGrid,
+    tpl,
+    uniqLabel,
+    type Logo,
+    type Quote,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingProof}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 3, 14)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-logos-title"
+        data-testid="catalog-block"
+        data-block="logos"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-logos-title">
+            {ui.blocks.names.logos}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.logos}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-grid4-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="grid4"
+        >
+          <Title as={3} size="base" weight="bold" id="logos-grid4-label" data-testid="variant-label">
+            {ui.blocks.variants.logos.grid4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-grid4"
+              title={ui.marketing.logos.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              layout="grid"
+              cols="4"
+              item="name"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-grid3-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="grid3"
+        >
+          <Title as={3} size="base" weight="bold" id="logos-grid3-label" data-testid="variant-label">
+            {ui.blocks.variants.logos.grid3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-grid3"
+              title={ui.marketing.logos.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              layout="grid"
+              cols="3"
+              item="tile"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-row-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="row"
+        >
+          <Title as={3} size="base" weight="bold" id="logos-row-label" data-testid="variant-label">
+            {ui.blocks.variants.logos.row}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-row"
+              title={ui.marketing.logos.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              layout="row"
+              cols="4"
+              item="icon"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-icons-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="icons"
+        >
+          <Title as={3} size="base" weight="bold" id="logos-icons-label" data-testid="variant-label">
+            {ui.blocks.variants.logos.icons}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-icons"
+              title={ui.marketing.logos.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              layout="grid"
+              cols="4"
+              item="icon"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.icons))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-grid2-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="grid2"
+        >
+          <Title as={3} size="base" weight="bold" id="logos-grid2-label" data-testid="variant-label">
+            {ui.blocks.variants.logos.grid2}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-grid2"
+              title={ui.marketing.logos.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              layout="grid"
+              cols="2"
+              item="name"
+              tone="default"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid2))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-tiles4-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="tiles4"
+        >
+          <Title as={3} size="base" weight="bold" id="logos-tiles4-label" data-testid="variant-label">
+            {ui.blocks.variants.logos.tiles4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-tiles4"
+              title={ui.marketing.logos.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              layout="grid"
+              cols="4"
+              item="tile"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-proof-title"
+        data-testid="catalog-block"
+        data-block="proof"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-proof-title">
+            {ui.blocks.names.proof}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.proof}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="proof-above-label"
+          data-testid="variant"
+          data-block="proof"
+          data-variant="above"
+        >
+          <Title as={3} size="base" weight="bold" id="proof-above-label" data-testid="variant-label">
+            {ui.blocks.variants.proof.above}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProofBand
+              id="proof-above"
+              title={ui.vibe.proof.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              stats={stats}
+              layout="above"
+              logoStyle="name"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="proof-beside-label"
+          data-testid="variant"
+          data-block="proof"
+          data-variant="beside"
+        >
+          <Title as={3} size="base" weight="bold" id="proof-beside-label" data-testid="variant-label">
+            {ui.blocks.variants.proof.beside}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProofBand
+              id="proof-beside"
+              title={ui.vibe.proof.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              stats={stats}
+              layout="beside"
+              logoStyle="name"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.beside))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="proof-icons-label"
+          data-testid="variant"
+          data-block="proof"
+          data-variant="icons"
+        >
+          <Title as={3} size="base" weight="bold" id="proof-icons-label" data-testid="variant-label">
+            {ui.blocks.variants.proof.icons}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProofBand
+              id="proof-icons"
+              title={ui.vibe.proof.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              stats={stats}
+              layout="above"
+              logoStyle="icon"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.icons))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="proof-muted-label"
+          data-testid="variant"
+          data-block="proof"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="proof-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.proof.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProofBand
+              id="proof-muted"
+              title={ui.vibe.proof.title}
+              logos={logos}
+              empty={ui.empty.logos}
+              stats={stats}
+              layout="above"
+              logoStyle="name"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-videos-title"
+        data-testid="catalog-block"
+        data-block="videos"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-videos-title">
+            {ui.blocks.names.videos}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.videos}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videos-grid3-label"
+          data-testid="variant"
+          data-block="videos"
+          data-variant="grid3"
+        >
+          <Title as={3} size="base" weight="bold" id="videos-grid3-label" data-testid="variant-label">
+            {ui.blocks.variants.videos.grid3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoGrid
+              id="videos-grid3"
+              title={ui.vibe.videos.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              playLabel={ui.vibe.videos.play}
+              byLine={ui.testimonials.byLine}
+              cols="1-3"
+              caption="below"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videos-grid2-label"
+          data-testid="variant"
+          data-block="videos"
+          data-variant="grid2"
+        >
+          <Title as={3} size="base" weight="bold" id="videos-grid2-label" data-testid="variant-label">
+            {ui.blocks.variants.videos.grid2}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoGrid
+              id="videos-grid2"
+              title={ui.vibe.videos.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              playLabel={ui.vibe.videos.play}
+              byLine={ui.testimonials.byLine}
+              cols="1-2"
+              caption="below"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid2))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videos-overlay-label"
+          data-testid="variant"
+          data-block="videos"
+          data-variant="overlay"
+        >
+          <Title as={3} size="base" weight="bold" id="videos-overlay-label" data-testid="variant-label">
+            {ui.blocks.variants.videos.overlay}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoGrid
+              id="videos-overlay"
+              title={ui.vibe.videos.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              playLabel={ui.vibe.videos.play}
+              byLine={ui.testimonials.byLine}
+              cols="1-3"
+              caption="overlay"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videos-muted-label"
+          data-testid="variant"
+          data-block="videos"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="videos-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.videos.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoGrid
+              id="videos-muted"
+              title={ui.vibe.videos.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              playLabel={ui.vibe.videos.play}
+              byLine={ui.testimonials.byLine}
+              cols="1-3"
+              caption="below"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingShowcasesPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingShowcasesPage.svelte
new file mode 100644
index 0000000..c211448
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingShowcasesPage.svelte
@@ -0,0 +1,522 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-showcases page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    BentoGrid,
+    Block,
+    Box,
+    Container,
+    FeatureAccordion,
+    FeatureSticky,
+    FeatureTabs,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+    type Tile,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingShowcases}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 4, 15)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-bento-title"
+        data-testid="catalog-block"
+        data-block="bento"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-bento-title">
+            {ui.blocks.names.bento}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.bento}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bento-bento-label"
+          data-testid="variant"
+          data-block="bento"
+          data-variant="bento"
+        >
+          <Title as={3} size="base" weight="bold" id="bento-bento-label" data-testid="variant-label">
+            {ui.blocks.variants.bento.bento}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BentoGrid
+              id="bento-bento"
+              title={ui.vibe.bento.title}
+              tiles={bento}
+              empty={ui.empty.tiles}
+              layout="bento"
+              media="none"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bento-even-label"
+          data-testid="variant"
+          data-block="bento"
+          data-variant="even"
+        >
+          <Title as={3} size="base" weight="bold" id="bento-even-label" data-testid="variant-label">
+            {ui.blocks.variants.bento.even}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BentoGrid
+              id="bento-even"
+              title={ui.vibe.bento.title}
+              tiles={bento}
+              empty={ui.empty.tiles}
+              layout="even"
+              media="none"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.even))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bento-images-label"
+          data-testid="variant"
+          data-block="bento"
+          data-variant="images"
+        >
+          <Title as={3} size="base" weight="bold" id="bento-images-label" data-testid="variant-label">
+            {ui.blocks.variants.bento.images}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BentoGrid
+              id="bento-images"
+              title={ui.vibe.bento.title}
+              tiles={bento}
+              empty={ui.empty.tiles}
+              layout="bento"
+              media="image"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bento-muted-label"
+          data-testid="variant"
+          data-block="bento"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="bento-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.bento.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BentoGrid
+              id="bento-muted"
+              title={ui.vibe.bento.title}
+              tiles={bento}
+              empty={ui.empty.tiles}
+              layout="bento"
+              media="none"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-featuretabs-title"
+        data-testid="catalog-block"
+        data-block="featuretabs"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-featuretabs-title">
+            {ui.blocks.names.featuretabs}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.featuretabs}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuretabs-split-label"
+          data-testid="variant"
+          data-block="featuretabs"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="featuretabs-split-label" data-testid="variant-label">
+            {ui.blocks.variants.featuretabs.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureTabs
+              id="featuretabs-split"
+              title={ui.vibe.tabs.title}
+              features={features}
+              empty={ui.empty.features}
+              tabsLabel={ui.vibe.tabs.label}
+              active="feature-clear"
+              panel="split"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuretabs-stack-label"
+          data-testid="variant"
+          data-block="featuretabs"
+          data-variant="stack"
+        >
+          <Title as={3} size="base" weight="bold" id="featuretabs-stack-label" data-testid="variant-label">
+            {ui.blocks.variants.featuretabs.stack}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureTabs
+              id="featuretabs-stack"
+              title={ui.vibe.tabs.title}
+              features={features}
+              empty={ui.empty.features}
+              tabsLabel={ui.vibe.tabs.label}
+              active="feature-clear"
+              panel="stack"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.stack))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuretabs-muted-label"
+          data-testid="variant"
+          data-block="featuretabs"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="featuretabs-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.featuretabs.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureTabs
+              id="featuretabs-muted"
+              title={ui.vibe.tabs.title}
+              features={features}
+              empty={ui.empty.features}
+              tabsLabel={ui.vibe.tabs.label}
+              active="feature-clear"
+              panel="split"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-accordion-title"
+        data-testid="catalog-block"
+        data-block="accordion"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-accordion-title">
+            {ui.blocks.names.accordion}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.accordion}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="accordion-first-label"
+          data-testid="variant"
+          data-block="accordion"
+          data-variant="first"
+        >
+          <Title as={3} size="base" weight="bold" id="accordion-first-label" data-testid="variant-label">
+            {ui.blocks.variants.accordion.first}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureAccordion
+              id="accordion-first"
+              title={ui.vibe.accordion.title}
+              features={features}
+              empty={ui.empty.features}
+              expand="first"
+              media="none"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="accordion-closed-label"
+          data-testid="variant"
+          data-block="accordion"
+          data-variant="closed"
+        >
+          <Title as={3} size="base" weight="bold" id="accordion-closed-label" data-testid="variant-label">
+            {ui.blocks.variants.accordion.closed}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureAccordion
+              id="accordion-closed"
+              title={ui.vibe.accordion.title}
+              features={features}
+              empty={ui.empty.features}
+              expand="none"
+              media="none"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.closed))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="accordion-media-label"
+          data-testid="variant"
+          data-block="accordion"
+          data-variant="media"
+        >
+          <Title as={3} size="base" weight="bold" id="accordion-media-label" data-testid="variant-label">
+            {ui.blocks.variants.accordion.media}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureAccordion
+              id="accordion-media"
+              title={ui.vibe.accordion.title}
+              features={features}
+              empty={ui.empty.features}
+              expand="first"
+              media="image"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="accordion-muted-label"
+          data-testid="variant"
+          data-block="accordion"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="accordion-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.accordion.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureAccordion
+              id="accordion-muted"
+              title={ui.vibe.accordion.title}
+              features={features}
+              empty={ui.empty.features}
+              expand="first"
+              media="none"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-sticky-title"
+        data-testid="catalog-block"
+        data-block="sticky"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-sticky-title">
+            {ui.blocks.names.sticky}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.sticky}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sticky-end-label"
+          data-testid="variant"
+          data-block="sticky"
+          data-variant="end"
+        >
+          <Title as={3} size="base" weight="bold" id="sticky-end-label" data-testid="variant-label">
+            {ui.blocks.variants.sticky.end}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSticky
+              id="sticky-end"
+              title={ui.vibe.sticky.title}
+              features={features}
+              empty={ui.empty.features}
+              active="feature-clear"
+              mediaSide="end"
+              item="plain"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sticky-start-label"
+          data-testid="variant"
+          data-block="sticky"
+          data-variant="start"
+        >
+          <Title as={3} size="base" weight="bold" id="sticky-start-label" data-testid="variant-label">
+            {ui.blocks.variants.sticky.start}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSticky
+              id="sticky-start"
+              title={ui.vibe.sticky.title}
+              features={features}
+              empty={ui.empty.features}
+              active="feature-clear"
+              mediaSide="start"
+              item="plain"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.start))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sticky-card-label"
+          data-testid="variant"
+          data-block="sticky"
+          data-variant="card"
+        >
+          <Title as={3} size="base" weight="bold" id="sticky-card-label" data-testid="variant-label">
+            {ui.blocks.variants.sticky.card}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSticky
+              id="sticky-card"
+              title={ui.vibe.sticky.title}
+              features={features}
+              empty={ui.empty.features}
+              active="feature-clear"
+              mediaSide="end"
+              item="card"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sticky-muted-label"
+          data-testid="variant"
+          data-block="sticky"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="sticky-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.sticky.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSticky
+              id="sticky-muted"
+              title={ui.vibe.sticky.title}
+              features={features}
+              empty={ui.empty.features}
+              active="feature-clear"
+              mediaSide="end"
+              item="plain"
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingStatsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingStatsPage.svelte
new file mode 100644
index 0000000..eba51f4
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingStatsPage.svelte
@@ -0,0 +1,305 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-stats page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    StatsBand,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingStats}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 8)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-stats-title"
+        data-testid="catalog-block"
+        data-block="stats"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-stats-title">
+            {ui.blocks.names.stats}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.stats}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-plain4-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="plain4"
+        >
+          <Title as={3} size="base" weight="bold" id="stats-plain4-label" data-testid="variant-label">
+            {ui.blocks.variants.stats.plain4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-plain4"
+              title={ui.marketing.stats.title}
+              stats={stats}
+              empty={ui.marketing.stats.empty}
+              cols="4"
+              layout="row"
+              surface="none"
+              item="plain"
+              align="center"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.plain4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-panel-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="panel"
+        >
+          <Title as={3} size="base" weight="bold" id="stats-panel-label" data-testid="variant-label">
+            {ui.blocks.variants.stats.panel}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-panel"
+              title=""
+              stats={stats}
+              empty={ui.marketing.stats.empty}
+              cols="4"
+              layout="row"
+              surface="panel"
+              item="plain"
+              align="center"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.panel))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-stack-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="stack"
+        >
+          <Title as={3} size="base" weight="bold" id="stats-stack-label" data-testid="variant-label">
+            {ui.blocks.variants.stats.stack}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-stack"
+              title={ui.marketing.stats.title}
+              stats={stats}
+              empty={ui.marketing.stats.empty}
+              cols="4"
+              layout="stack"
+              surface="none"
+              item="plain"
+              align="start"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.stack))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-image-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="image"
+        >
+          <Title as={3} size="base" weight="bold" id="stats-image-label" data-testid="variant-label">
+            {ui.blocks.variants.stats.image}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-image"
+              title={ui.marketing.stats.title}
+              stats={stats}
+              empty={ui.marketing.stats.empty}
+              cols="4"
+              layout="row"
+              surface="image"
+              item="plain"
+              align="center"
+              tone="default"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.image))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-cards-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="cards"
+        >
+          <Title as={3} size="base" weight="bold" id="stats-cards-label" data-testid="variant-label">
+            {ui.blocks.variants.stats.cards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-cards"
+              title={ui.marketing.stats.title}
+              stats={[stats?.[0], stats?.[1], stats?.[2]]}
+              empty={ui.marketing.stats.empty}
+              cols="3"
+              layout="row"
+              surface="none"
+              item="card"
+              align="center"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-icons-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="icons"
+        >
+          <Title as={3} size="base" weight="bold" id="stats-icons-label" data-testid="variant-label">
+            {ui.blocks.variants.stats.icons}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-icons"
+              title={ui.marketing.stats.title}
+              stats={stats}
+              empty={ui.marketing.stats.empty}
+              cols="4"
+              layout="row"
+              surface="none"
+              item="icon"
+              align="start"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-muted2-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="muted2"
+        >
+          <Title as={3} size="base" weight="bold" id="stats-muted2-label" data-testid="variant-label">
+            {ui.blocks.variants.stats.muted2}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-muted2"
+              title={ui.marketing.stats.title}
+              stats={stats}
+              empty={ui.marketing.stats.empty}
+              cols="2"
+              layout="row"
+              surface="none"
+              item="plain"
+              align="center"
+              tone="muted"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.muted2))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-cardsCompact-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="cardsCompact"
+        >
+          <Title as={3} size="base" weight="bold" id="stats-cardsCompact-label" data-testid="variant-label">
+            {ui.blocks.variants.stats.cardsCompact}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-cardsCompact"
+              title={ui.marketing.stats.title}
+              stats={stats}
+              empty={ui.marketing.stats.empty}
+              cols="4"
+              layout="row"
+              surface="none"
+              item="card"
+              align="center"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cardsCompact))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingTeamPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingTeamPage.svelte
new file mode 100644
index 0000000..03ff9c5
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingTeamPage.svelte
@@ -0,0 +1,243 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-team page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    TeamGrid,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Member,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+
+  const MEMBERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "role": "metadata.role.value",
+    "dept": "metadata.dept.value",
+    "location": "metadata.location.value",
+    "bio": "metadata.bio.value",
+    "skills": "metadata.skills.value",
+  } as const;
+
+  const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingTeam}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 6)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-team-title"
+        data-testid="catalog-block"
+        data-block="team"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-team-title">
+            {ui.blocks.names.team}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.team}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-cards4-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="cards4"
+        >
+          <Title as={3} size="base" weight="bold" id="team-cards4-label" data-testid="variant-label">
+            {ui.blocks.variants.team.cards4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-cards4"
+              title={ui.company.team.title}
+              lead={ui.company.team.lead}
+              members={members}
+              empty={ui.empty.members}
+              depts={ui.company.depts}
+              layout="cards"
+              cols="1-4"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-cards3-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="cards3"
+        >
+          <Title as={3} size="base" weight="bold" id="team-cards3-label" data-testid="variant-label">
+            {ui.blocks.variants.team.cards3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-cards3"
+              title={ui.company.team.title}
+              lead={ui.company.team.lead}
+              members={members}
+              empty={ui.empty.members}
+              depts={ui.company.depts}
+              layout="cards"
+              cols="1-3"
+              tone="muted"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-minimal-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="minimal"
+        >
+          <Title as={3} size="base" weight="bold" id="team-minimal-label" data-testid="variant-label">
+            {ui.blocks.variants.team.minimal}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-minimal"
+              title={ui.company.team.title}
+              lead={ui.company.team.lead}
+              members={members}
+              empty={ui.empty.members}
+              depts={ui.company.depts}
+              layout="minimal"
+              cols="1-4"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.minimal))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-detailed-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="detailed"
+        >
+          <Title as={3} size="base" weight="bold" id="team-detailed-label" data-testid="variant-label">
+            {ui.blocks.variants.team.detailed}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-detailed"
+              title={ui.company.team.title}
+              lead={ui.company.team.lead}
+              members={members}
+              empty={ui.empty.members}
+              depts={ui.company.depts}
+              layout="detailed"
+              cols="1-3"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.detailed))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-list-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="team-list-label" data-testid="variant-label">
+            {ui.blocks.variants.team.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-list"
+              title={ui.company.team.title}
+              lead={ui.company.team.lead}
+              members={members}
+              empty={ui.empty.members}
+              depts={ui.company.depts}
+              layout="list"
+              cols="1-4"
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-directory-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="directory"
+        >
+          <Title as={3} size="base" weight="bold" id="team-directory-label" data-testid="variant-label">
+            {ui.blocks.variants.team.directory}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-directory"
+              title={ui.company.team.title}
+              lead={ui.company.team.lead}
+              members={members}
+              empty={ui.empty.members}
+              depts={ui.company.depts}
+              layout="directory"
+              cols="1-4"
+              tone="default"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.directory))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingTestimonialsPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingTestimonialsPage.svelte
new file mode 100644
index 0000000..f2bc228
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingTestimonialsPage.svelte
@@ -0,0 +1,359 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-testimonials page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    Stack,
+    TestimonialGrid,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Quote,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+  const TESTIMONIALS_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingTestimonials}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 10)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-testimonials-title"
+        data-testid="catalog-block"
+        data-block="testimonials"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-testimonials-title">
+            {ui.blocks.names.testimonials}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.testimonials}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-grid3-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="grid3"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-grid3-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.grid3}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-grid3"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="grid"
+              cols="1-3"
+              item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-masonry-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="masonry"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-masonry-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.masonry}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-masonry"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="masonry"
+              cols="1-3"
+              item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-strip-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="strip"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-strip-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.strip}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-strip"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="strip"
+              cols="1-3"
+              item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-social-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="social"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-social-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.social}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-social"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="masonry"
+              cols="1-3"
+              item={{ kind: "social", avatar: "image", rating: "hide", mark: "none" }}
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.social))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-featured-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="featured"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-featured-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.featured}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-featured"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="single"
+              cols="1-3"
+              item={{ kind: "plain", avatar: "image", rating: "hide", mark: "icon" }}
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-grid2-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="grid2"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-grid2-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.grid2}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-grid2"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="grid"
+              cols="1-2"
+              item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid2))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-single-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="single"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-single-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.single}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-single"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="single"
+              cols="1-3"
+              item={{ kind: "plain", avatar: "image", rating: "hide", mark: "none" }}
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-stack-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="stack"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-stack-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.stack}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-stack"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="stack"
+              cols="1-3"
+              item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+              tone="default"
+              density="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.stack))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-plain-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-plain"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="grid"
+              cols="1-3"
+              item={{ kind: "plain", avatar: "none", rating: "show", mark: "none" }}
+              tone="muted"
+              density="compact"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.plain))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-noRating-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="noRating"
+        >
+          <Title as={3} size="base" weight="bold" id="testimonials-noRating-label" data-testid="variant-label">
+            {ui.blocks.variants.testimonials.noRating}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-noRating"
+              title={ui.marketing.testimonials.title}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={TESTIMONIALS_LABELS}
+              layout="grid"
+              cols="1-3"
+              item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+              tone="default"
+              density="roomy"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.noRating))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.svelte
new file mode 100644
index 0000000..469bbb3
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.svelte
@@ -0,0 +1,281 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-testimonials-split page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    QuoteSplit,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Logo,
+    type Quote,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+  const QUOTESPLIT_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+  const QUOTESPLIT_EXTRAS = { stats, logos, rating: 5, score: ui.marketing.quoteSplit.score, reviews: ui.marketing.quoteSplit.reviews } as const;
+  const QUOTESPLIT_ACTIONS = {
+    mode: "two",
+    cta: ui.marketing.quoteSplit.cta,
+    href: "#/customers",
+    secondary: ui.marketing.quoteSplit.secondary,
+    secondaryHref: "#/contact",
+  } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.marketing.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.marketingTestimonialsSplit}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 6)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-quotesplit-title"
+        data-testid="catalog-block"
+        data-block="quotesplit"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-quotesplit-title">
+            {ui.blocks.names.quotesplit}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.quotesplit}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-quoteCard-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="quoteCard"
+        >
+          <Title as={3} size="base" weight="bold" id="quotesplit-quoteCard-label" data-testid="variant-label">
+            {ui.blocks.variants.quotesplit.quoteCard}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-quoteCard"
+              title={ui.marketing.quoteSplit.title}
+              lead={ui.marketing.quoteSplit.lead}
+              badge={ui.marketing.quoteSplit.badge}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={QUOTESPLIT_LABELS}
+              extras={QUOTESPLIT_EXTRAS}
+              actions={QUOTESPLIT_ACTIONS}
+              layout="media"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.quoteCard))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-logoTiles-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="logoTiles"
+        >
+          <Title as={3} size="base" weight="bold" id="quotesplit-logoTiles-label" data-testid="variant-label">
+            {ui.blocks.variants.quotesplit.logoTiles}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-logoTiles"
+              title={ui.marketing.quoteSplit.title}
+              lead={ui.marketing.quoteSplit.lead}
+              badge={ui.marketing.quoteSplit.badge}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={QUOTESPLIT_LABELS}
+              extras={QUOTESPLIT_EXTRAS}
+              actions={QUOTESPLIT_ACTIONS}
+              layout="logos"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.logoTiles))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-ratingPanel-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="ratingPanel"
+        >
+          <Title as={3} size="base" weight="bold" id="quotesplit-ratingPanel-label" data-testid="variant-label">
+            {ui.blocks.variants.quotesplit.ratingPanel}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-ratingPanel"
+              title={ui.marketing.quoteSplit.title}
+              lead={ui.marketing.quoteSplit.lead}
+              badge={ui.marketing.quoteSplit.badge}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={QUOTESPLIT_LABELS}
+              extras={QUOTESPLIT_EXTRAS}
+              actions={QUOTESPLIT_ACTIONS}
+              layout="rating"
+              mediaSide="end"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-stackedCards-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="stackedCards"
+        >
+          <Title as={3} size="base" weight="bold" id="quotesplit-stackedCards-label" data-testid="variant-label">
+            {ui.blocks.variants.quotesplit.stackedCards}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-stackedCards"
+              title={ui.marketing.quoteSplit.title}
+              lead={ui.marketing.quoteSplit.lead}
+              badge={ui.marketing.quoteSplit.badge}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={QUOTESPLIT_LABELS}
+              extras={QUOTESPLIT_EXTRAS}
+              actions={QUOTESPLIT_ACTIONS}
+              layout="stack"
+              mediaSide="start"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.stackedCards))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-compact4-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="compact4"
+        >
+          <Title as={3} size="base" weight="bold" id="quotesplit-compact4-label" data-testid="variant-label">
+            {ui.blocks.variants.quotesplit.compact4}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-compact4"
+              title={ui.marketing.quoteSplit.title}
+              lead={ui.marketing.quoteSplit.lead}
+              badge={ui.marketing.quoteSplit.badge}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={QUOTESPLIT_LABELS}
+              extras={QUOTESPLIT_EXTRAS}
+              actions={QUOTESPLIT_ACTIONS}
+              layout="compact"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.compact4))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-bentoFigures-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="bentoFigures"
+        >
+          <Title as={3} size="base" weight="bold" id="quotesplit-bentoFigures-label" data-testid="variant-label">
+            {ui.blocks.variants.quotesplit.bentoFigures}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-bentoFigures"
+              title={ui.marketing.quoteSplit.title}
+              lead={ui.marketing.quoteSplit.lead}
+              badge={ui.marketing.quoteSplit.badge}
+              quotes={testimonials}
+              empty={ui.empty.quotes}
+              labels={QUOTESPLIT_LABELS}
+              extras={QUOTESPLIT_EXTRAS}
+              actions={QUOTESPLIT_ACTIONS}
+              layout="bento"
+              mediaSide="end"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.bentoFigures))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/NotfoundPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/NotfoundPage.svelte
new file mode 100644
index 0000000..0be308a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/NotfoundPage.svelte
@@ -0,0 +1,23 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The notfound page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Title as={1} size="4xl" weight="bold" id="page-title">
+        {ui.site.notFound.title}
+      </Title>
+      <Group>
+        <Button variant="default" size="default" href="#/">
+          {ui.catalog.back}
+        </Button>
+      </Group>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageCartPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageCartPage.svelte
new file mode 100644
index 0000000..802c7af
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageCartPage.svelte
@@ -0,0 +1,161 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-cart page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Link,
+    NavBar,
+    PageIntro,
+    ProductGrid,
+    ShoppingCart,
+    SitemapFooter,
+    Text,
+    type CartLine,
+    type MegaGroup,
+    type NavLink,
+    type Product,
+    type Promo,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+  import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+  const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+  const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.cart.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="cart">
+  <NavBar
+    label={ui.vibe.nav.label}
+    brand={ui.site.header.brand}
+    links={navlinks}
+    current="link-product"
+    actions={{
+      cta: ui.site.header.cta,
+      href: "#/",
+      login: ui.site.header.login,
+      loginHref: "#/login",
+      mode: "cta",
+    }}
+    search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+    layout="search"
+    over="none"
+    tone="default"
+    ontheme={() => actions.toggleTheme()}
+  />
+  <PageIntro
+    id="cart-pagehead"
+    title={ui.commerce.cartPage.title}
+    text={ui.commerce.pages.cartLead}
+    cta=""
+    href="#/"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <ShoppingCart
+    id="cart-cartpage"
+    title={ui.commerce.cart.caption}
+    lines={cart}
+    rows={summary}
+    promos={promos}
+    labels={ui.commerce.cart}
+    totals={ui.commerce.totals}
+    actions={ui.commerce.cartPage}
+    layout="split"
+    promo="show"
+    progress="show"
+    tone="default"
+  />
+  <ProductGrid
+    id="cart-products"
+    title={ui.commerce.pages.related}
+    products={products}
+    labels={ui.commerce.productLabels}
+    badges={ui.commerce.badges}
+    layout="rail"
+    cols="1-3"
+    ratio="1/1"
+    rating="hide"
+    action="button"
+    tone="default"
+    density="compact"
+  />
+  <SitemapFooter
+    id="cart-sitemap"
+    label={ui.vibe.sitemap.label}
+    brand={ui.site.header.brand}
+    tagline={ui.vibe.sitemap.tagline}
+    copyright={ui.vibe.sitemap.copyright}
+    groups={sitemap}
+    signup={{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: "none",
+    }}
+    status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+    layout="columns"
+    density="default"
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageCheckoutPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageCheckoutPage.svelte
new file mode 100644
index 0000000..3facc9c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageCheckoutPage.svelte
@@ -0,0 +1,136 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-checkout page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    CheckoutForm,
+    Container,
+    Link,
+    NavBar,
+    PageIntro,
+    SitemapFooter,
+    Text,
+    type CartLine,
+    type Day,
+    type MegaGroup,
+    type NavLink,
+    type Payment,
+    type Promo,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+  import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+  import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+  import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+  const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+  const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+  const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+  const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+  const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+  const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.checkout.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="checkout">
+  <NavBar
+    label={ui.vibe.nav.label}
+    brand={ui.site.header.brand}
+    links={navlinks}
+    current="link-product"
+    actions={{
+      cta: ui.site.header.cta,
+      href: "#/",
+      login: ui.site.header.login,
+      loginHref: "#/login",
+      mode: "cta",
+    }}
+    search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+    layout="search"
+    over="none"
+    tone="default"
+    ontheme={() => actions.toggleTheme()}
+  />
+  <PageIntro
+    id="checkout-pagehead"
+    title={ui.commerce.checkout.title}
+    text={ui.commerce.pages.checkoutLead}
+    cta=""
+    href="#/"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <CheckoutForm
+    id="checkout-checkout"
+    title=""
+    days={days}
+    payments={payments}
+    lines={cart}
+    rows={summary}
+    promos={promos}
+    labels={ui.commerce.checkout}
+    totals={ui.commerce.totals}
+    layout="cards"
+    summary="aside"
+    tone="default"
+  />
+  <SitemapFooter
+    id="checkout-sitemap"
+    label={ui.vibe.sitemap.label}
+    brand={ui.site.header.brand}
+    tagline={ui.vibe.sitemap.tagline}
+    copyright={ui.vibe.sitemap.copyright}
+    groups={sitemap}
+    signup={{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: "none",
+    }}
+    status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+    layout="columns"
+    density="compact"
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageCompanyPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageCompanyPage.svelte
new file mode 100644
index 0000000..4d46af3
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageCompanyPage.svelte
@@ -0,0 +1,218 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-company page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    AboutCompany,
+    Block,
+    Box,
+    Container,
+    CtaBand,
+    JobBoard,
+    Link,
+    MilestoneTimeline,
+    NavBar,
+    PageIntro,
+    PhotoGallery,
+    SitemapFooter,
+    TeamGrid,
+    Text,
+    type Department,
+    type Feature,
+    type Job,
+    type MegaGroup,
+    type Member,
+    type Milestone,
+    type NavLink,
+    type Photo,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+  import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+  import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+  import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+  import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const MEMBERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "role": "metadata.role.value",
+    "dept": "metadata.dept.value",
+    "location": "metadata.location.value",
+    "bio": "metadata.bio.value",
+    "skills": "metadata.skills.value",
+  } as const;
+  const JOBS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "dept": "metadata.dept.value",
+    "location": "metadata.location.value",
+    "type": "metadata.type.value",
+    "salary": "metadata.salary.value",
+    "posted": "metadata.posted.value|ago-days",
+  } as const;
+  const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+  const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+  const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+  const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+  const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+  const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.company.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="company">
+  <NavBar
+    label={ui.vibe.nav.label}
+    brand={ui.site.header.brand}
+    links={navlinks}
+    current="link-product"
+    actions={{
+      cta: ui.site.header.cta,
+      href: "#/",
+      login: ui.site.header.login,
+      loginHref: "#/login",
+      mode: "cta",
+    }}
+    search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+    layout="inline"
+    over="none"
+    tone="default"
+    ontheme={() => actions.toggleTheme()}
+  />
+  <PageIntro
+    id="company-pagehead"
+    title={ui.company.pages.companyTitle}
+    text={ui.company.pages.companyLead}
+    cta=""
+    href="#/"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <AboutCompany
+    id="company-about"
+    title={ui.company.about.title}
+    lead={ui.company.about.lead}
+    stats={stats}
+    values={values}
+    layout="split"
+    tone="default"
+    density="default"
+  />
+  <MilestoneTimeline
+    id="company-timeline"
+    title={ui.company.timeline.title}
+    lead={ui.company.timeline.lead}
+    milestones={milestones}
+    empty={ui.empty.milestones}
+    layout="split"
+    tone="default"
+    density="default"
+  />
+  <TeamGrid
+    id="company-team"
+    title={ui.company.team.title}
+    lead={ui.company.team.lead}
+    members={members}
+    empty={ui.empty.members}
+    depts={ui.company.depts}
+    layout="cards"
+    cols="1-4"
+    tone="default"
+    density="default"
+  />
+  <PhotoGallery
+    id="company-photos"
+    title={ui.company.photos.title}
+    lead={ui.company.photos.lead}
+    photos={photos}
+    empty={ui.empty.photos}
+    labels={ui.company.photos}
+    layout="mosaic"
+    captions="show"
+    tone="default"
+    density="default"
+  />
+  <JobBoard
+    id="company-jobs"
+    title={ui.company.jobs.title}
+    lead={ui.company.jobs.lead}
+    jobs={jobs}
+    empty={ui.empty.jobs}
+    departments={departments}
+    labels={ui.company.jobs}
+    layout="grouped"
+    salary="hide"
+    tone="default"
+  />
+  <CtaBand
+    id="company-cta"
+    title={ui.site.home.ctaTitle}
+    text={ui.site.home.ctaText}
+    actions={{
+      cta: ui.site.home.ctaButton,
+      href: "#/pricing",
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: "#/",
+      emailLabel: ui.promo.newsletter.label,
+      mode: "one",
+    }}
+    quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+    layout="card"
+    tone="muted"
+    proof="none"
+    density="default"
+  />
+  <SitemapFooter
+    id="company-sitemap"
+    label={ui.vibe.sitemap.label}
+    brand={ui.site.header.brand}
+    tagline={ui.vibe.sitemap.tagline}
+    copyright={ui.vibe.sitemap.copyright}
+    groups={sitemap}
+    signup={{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: "none",
+    }}
+    status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+    layout="columns"
+    density="default"
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PagePortfolioPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PagePortfolioPage.svelte
new file mode 100644
index 0000000..1fce7e4
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PagePortfolioPage.svelte
@@ -0,0 +1,198 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-portfolio page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    AboutMe,
+    Block,
+    Box,
+    Container,
+    CtaBand,
+    Link,
+    NavBar,
+    PhotoGallery,
+    ProjectGrid,
+    SitemapFooter,
+    TestimonialGrid,
+    Text,
+    type MegaGroup,
+    type NavLink,
+    type Photo,
+    type Project,
+    type Quote,
+    type Skill,
+    type Spec,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+  import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+  import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+  import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+  import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+  const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+  const PROJECTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "category": "terms|term:project_category",
+    "year": "metadata.year.value",
+    "summary": "metadata.summary.value",
+    "tags": "metadata.tags.value",
+    "featured": "metadata.featured.value",
+    "client": "metadata.client.value",
+  } as const;
+  const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+  const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+  const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+  const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+  const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.portfolio.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="portfolio">
+  <NavBar
+    label={ui.vibe.nav.label}
+    brand={ui.site.header.brand}
+    links={navlinks}
+    current="link-product"
+    actions={{
+      cta: ui.site.header.cta,
+      href: "#/",
+      login: ui.site.header.login,
+      loginHref: "#/login",
+      mode: "cta",
+    }}
+    search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+    layout="inline"
+    over="none"
+    tone="default"
+    ontheme={() => actions.toggleTheme()}
+  />
+  <AboutMe
+    id="portfolio-aboutme"
+    title={ui.company.aboutMe.title}
+    lead={ui.company.aboutMe.lead}
+    badge={ui.company.aboutMe.badge}
+    facts={profilefacts}
+    skills={skills}
+    labels={ui.company.aboutMe}
+    actions={{
+      mode: "two",
+      cta: ui.company.aboutMe.cta,
+      href: "#/work",
+      secondary: ui.company.aboutMe.more,
+      secondaryHref: "#/contact",
+    }}
+    layout="facts"
+    mediaSide="start"
+    tone="default"
+    level={1}
+  />
+  <ProjectGrid
+    id="portfolio-projects"
+    title={ui.company.projects.title}
+    lead={ui.company.projects.lead}
+    projects={projects}
+    empty={ui.empty.projects}
+    labels={ui.company.projects}
+    layout="cards"
+    tone="default"
+    density="default"
+  />
+  <PhotoGallery
+    id="portfolio-photos"
+    title={ui.company.photos.title}
+    lead={ui.company.photos.lead}
+    photos={photos}
+    empty={ui.empty.photos}
+    labels={ui.company.photos}
+    layout="masonry"
+    captions="show"
+    tone="default"
+    density="default"
+  />
+  <TestimonialGrid
+    id="portfolio-testimonials"
+    title={ui.marketing.testimonials.title}
+    quotes={testimonials}
+    empty={ui.empty.quotes}
+    labels={{
+      rating: ui.testimonials.rating,
+      byLine: ui.testimonials.byLine,
+      handleLine: ui.testimonials.handleLine,
+    }}
+    layout="grid"
+    cols="1-3"
+    item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+    tone="default"
+    density="default"
+  />
+  <CtaBand
+    id="portfolio-cta"
+    title={ui.site.home.ctaTitle}
+    text={ui.site.home.ctaText}
+    actions={{
+      cta: ui.site.home.ctaButton,
+      href: "#/pricing",
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: "#/",
+      emailLabel: ui.promo.newsletter.label,
+      mode: "one",
+    }}
+    quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+    layout="card"
+    tone="muted"
+    proof="none"
+    density="default"
+  />
+  <SitemapFooter
+    id="portfolio-sitemap"
+    label={ui.vibe.sitemap.label}
+    brand={ui.site.header.brand}
+    tagline={ui.vibe.sitemap.tagline}
+    copyright={ui.vibe.sitemap.copyright}
+    groups={sitemap}
+    signup={{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: "none",
+    }}
+    status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+    layout="columns"
+    density="default"
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageProductDetailPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageProductDetailPage.svelte
new file mode 100644
index 0000000..9b1c075
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageProductDetailPage.svelte
@@ -0,0 +1,165 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-product-detail page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Link,
+    NavBar,
+    ProductDetail,
+    ProductGrid,
+    ProductInfo,
+    ReviewList,
+    SitemapFooter,
+    Text,
+    type Detail,
+    type MegaGroup,
+    type NavLink,
+    type Product,
+    type Review,
+    type Spec,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+  import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+  import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const REVIEWS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "author": "author_id|author",
+    "rating": "metadata.rating.value",
+    "text": "metadata.text.value",
+    "date": "metadata.date.value|date",
+  } as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+  const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+  const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.productDetail.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="product-detail">
+  <NavBar
+    label={ui.vibe.nav.label}
+    brand={ui.site.header.brand}
+    links={navlinks}
+    current="link-product"
+    actions={{
+      cta: ui.site.header.cta,
+      href: "#/",
+      login: ui.site.header.login,
+      loginHref: "#/login",
+      mode: "cta",
+    }}
+    search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+    layout="search"
+    over="none"
+    tone="default"
+    ontheme={() => actions.toggleTheme()}
+  />
+  <ProductDetail
+    id="product-detail-product"
+    product={products.find((i) => i.id === "product-lamp")!}
+    labels={ui.commerce.detail}
+    badges={ui.commerce.badges}
+    layout="split"
+    mediaSide="start"
+    thumbs="below"
+    buy="full"
+    tone="default"
+    density="default"
+  />
+  <ProductInfo
+    id="product-detail-productinfo"
+    title={ui.commerce.info.title}
+    details={details}
+    specs={specs}
+    labels={ui.commerce.info}
+    layout="split"
+    expand="first"
+    tone="default"
+  />
+  <ReviewList
+    id="product-detail-reviews"
+    title={ui.commerce.reviews.title}
+    reviews={reviews}
+    labels={ui.commerce.reviewLabels}
+    layout="grid"
+    item="card"
+    avatar="none"
+    tone="default"
+    density="default"
+  />
+  <ProductGrid
+    id="product-detail-products"
+    title={ui.commerce.pages.related}
+    products={products}
+    labels={ui.commerce.productLabels}
+    badges={ui.commerce.badges}
+    layout="rail"
+    cols="1-3"
+    ratio="1/1"
+    rating="hide"
+    action="button"
+    tone="default"
+    density="compact"
+  />
+  <SitemapFooter
+    id="product-detail-sitemap"
+    label={ui.vibe.sitemap.label}
+    brand={ui.site.header.brand}
+    tagline={ui.vibe.sitemap.tagline}
+    copyright={ui.vibe.sitemap.copyright}
+    groups={sitemap}
+    signup={{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: "none",
+    }}
+    status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+    layout="columns"
+    density="default"
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageSaasLandingPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageSaasLandingPage.svelte
new file mode 100644
index 0000000..483e939
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageSaasLandingPage.svelte
@@ -0,0 +1,277 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-saas-landing page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    CtaBand,
+    FaqList,
+    FeatureGrid,
+    FeatureSticky,
+    HeroClassic,
+    Link,
+    LogoCloud,
+    NavBar,
+    PricingTiers,
+    SitemapFooter,
+    StatsBand,
+    TestimonialGrid,
+    Text,
+    type CodeLine,
+    type Faq,
+    type FaqTab,
+    type Feature,
+    type Logo,
+    type MegaGroup,
+    type NavLink,
+    type Plan,
+    type Quote,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.saasLanding.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="saas-landing">
+  <NavBar
+    label={ui.vibe.nav.label}
+    brand={ui.site.header.brand}
+    links={navlinks}
+    current="link-product"
+    actions={{
+      cta: ui.site.header.cta,
+      href: "#/",
+      login: ui.site.header.login,
+      loginHref: "#/login",
+      mode: "cta",
+    }}
+    search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+    layout="inline"
+    over="none"
+    tone="default"
+    ontheme={() => actions.toggleTheme()}
+  />
+  <HeroClassic
+    id="saas-landing-hero"
+    title={ui.cases.saas.hero.title}
+    text={ui.cases.saas.hero.text}
+    actions={{
+      cta: ui.cases.saas.hero.cta,
+      href: "#/pricing",
+      secondary: ui.cases.saas.hero.secondary,
+      secondaryHref: "#/pricing",
+      emailLabel: ui.promo.newsletter.label,
+      mode: "two",
+    }}
+    media={{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: "image",
+      side: "end",
+    }}
+    layout="split"
+    scale="default"
+    tone="default"
+    density="roomy"
+    level={1}
+  />
+  <LogoCloud
+    id="saas-landing-logos"
+    title={ui.marketing.logos.title}
+    logos={logos}
+    empty={ui.empty.logos}
+    layout="row"
+    cols="4"
+    item="icon"
+    tone="default"
+    density="compact"
+  />
+  <FeatureGrid
+    id="saas-landing-features"
+    title={ui.site.home.featuresTitle}
+    features={features}
+    empty={ui.empty.features}
+    action={{ label: ui.site.home.featuresAction, href: "#/" }}
+    layout="grid"
+    cols="1-3"
+    item="card"
+    mediaSide="end"
+    tone="default"
+    density="default"
+  />
+  <FeatureSticky
+    id="saas-landing-sticky"
+    title={ui.vibe.sticky.title}
+    features={features}
+    empty={ui.empty.features}
+    active="feature-clear"
+    mediaSide="end"
+    item="plain"
+    tone="default"
+    density="default"
+  />
+  <StatsBand
+    id="saas-landing-stats"
+    title={ui.marketing.stats.title}
+    stats={stats}
+    empty={ui.marketing.stats.empty}
+    cols="4"
+    layout="row"
+    surface="none"
+    item="icon"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <TestimonialGrid
+    id="saas-landing-testimonials"
+    title={ui.marketing.testimonials.title}
+    quotes={testimonials}
+    empty={ui.empty.quotes}
+    labels={{
+      rating: ui.testimonials.rating,
+      byLine: ui.testimonials.byLine,
+      handleLine: ui.testimonials.handleLine,
+    }}
+    layout="grid"
+    cols="1-3"
+    item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+    tone="default"
+    density="default"
+  />
+  <PricingTiers
+    id="saas-landing-pricing"
+    title={ui.site.pricing.tiersTitle}
+    plans={tiers}
+    labels={ui.pricing}
+    billingLabels={ui.vibe.billing}
+    layout="grid"
+    cols="1-3"
+    emphasis="auto"
+    billing="off"
+    tone="default"
+    density="default"
+  />
+  <FaqList
+    id="saas-landing-faq"
+    title={ui.site.pricing.faqTitle}
+    items={faq}
+    empty={ui.vibe.faq.empty}
+    search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+    filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+    layout="accordion"
+    cols="1"
+    tone="default"
+    density="default"
+  />
+  <CtaBand
+    id="saas-landing-cta"
+    title={ui.site.home.ctaTitle}
+    text={ui.site.home.ctaText}
+    actions={{
+      cta: ui.site.home.ctaButton,
+      href: "#/pricing",
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: "#/",
+      emailLabel: ui.promo.newsletter.label,
+      mode: "one",
+    }}
+    quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+    layout="card"
+    tone="muted"
+    proof="none"
+    density="default"
+  />
+  <SitemapFooter
+    id="saas-landing-sitemap"
+    label={ui.vibe.sitemap.label}
+    brand={ui.site.header.brand}
+    tagline={ui.vibe.sitemap.tagline}
+    copyright={ui.vibe.sitemap.copyright}
+    groups={sitemap}
+    signup={{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: "none",
+    }}
+    status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+    layout="columns"
+    density="default"
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellClassicPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellClassicPage.svelte
new file mode 100644
index 0000000..4f73967
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellClassicPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-classic page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellClassic.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-classic">
+  <DashboardShell
+    id="shell-classic-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="full"
+    search="show"
+    sidebar="wide"
+    side="start"
+    footer="none"
+    content="grid"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.svelte
new file mode 100644
index 0000000..45d9884
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-collapsed-end page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellCollapsedEnd.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-collapsed-end">
+  <DashboardShell
+    id="shell-collapsed-end-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="none"
+    search="show"
+    sidebar="collapsed"
+    side="end"
+    footer="full"
+    content="split"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellCollapsedPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellCollapsedPage.svelte
new file mode 100644
index 0000000..e622790
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellCollapsedPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-collapsed page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellCollapsed.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-collapsed">
+  <DashboardShell
+    id="shell-collapsed-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="inset"
+    search="show"
+    sidebar="collapsed"
+    side="start"
+    footer="none"
+    content="split"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellEndPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellEndPage.svelte
new file mode 100644
index 0000000..1fccb3a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellEndPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-end page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellEnd.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-end">
+  <DashboardShell
+    id="shell-end-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="full"
+    search="show"
+    sidebar="wide"
+    side="end"
+    footer="full"
+    content="split"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellInsetPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellInsetPage.svelte
new file mode 100644
index 0000000..a6f78ad
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellInsetPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-inset page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellInset.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-inset">
+  <DashboardShell
+    id="shell-inset-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="inset"
+    search="show"
+    sidebar="wide"
+    side="start"
+    footer="inset"
+    content="split"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellRailEndPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellRailEndPage.svelte
new file mode 100644
index 0000000..e2a50c4
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellRailEndPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-rail-end page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellRailEnd.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-rail-end">
+  <DashboardShell
+    id="shell-rail-end-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="inset"
+    search="hide"
+    sidebar="rail"
+    side="end"
+    footer="inset"
+    content="grid"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellRailFooterPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellRailFooterPage.svelte
new file mode 100644
index 0000000..f437da5
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellRailFooterPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-rail-footer page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellRailFooter.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-rail-footer">
+  <DashboardShell
+    id="shell-rail-footer-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="inset"
+    search="show"
+    sidebar="rail"
+    side="start"
+    footer="full"
+    content="grid"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellRailPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellRailPage.svelte
new file mode 100644
index 0000000..70914a2
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellRailPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-rail page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellRail.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-rail">
+  <DashboardShell
+    id="shell-rail-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="full"
+    search="hide"
+    sidebar="rail"
+    side="start"
+    footer="none"
+    content="list"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellSideOnlyPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellSideOnlyPage.svelte
new file mode 100644
index 0000000..7f64466
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellSideOnlyPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-side-only page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellSideOnly.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-side-only">
+  <DashboardShell
+    id="shell-side-only-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="none"
+    search="show"
+    sidebar="wide"
+    side="start"
+    footer="inset"
+    content="list"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellTopOnlyPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellTopOnlyPage.svelte
new file mode 100644
index 0000000..57cb367
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellTopOnlyPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-top-only page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellTopOnly.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-top-only">
+  <DashboardShell
+    id="shell-top-only-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="full"
+    search="show"
+    sidebar="none"
+    side="start"
+    footer="full"
+    content="grid"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.svelte
new file mode 100644
index 0000000..20f1e51
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-two-level-full page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellTwoLevelFull.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-two-level-full">
+  <DashboardShell
+    id="shell-two-level-full-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="full"
+    search="show"
+    sidebar="twolevel"
+    side="start"
+    footer="full"
+    content="split"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageShellTwoLevelPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellTwoLevelPage.svelte
new file mode 100644
index 0000000..20910ed
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageShellTwoLevelPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-two-level page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.shellTwoLevel.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="shell-two-level">
+  <DashboardShell
+    id="shell-two-level-dashshell"
+    title={ui.dashboard.shells.title}
+    nav={{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: "item-orders",
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: "subitem-all",
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }}
+    topbar="inset"
+    search="hide"
+    sidebar="twolevel"
+    side="start"
+    footer="inset"
+    content="list"
+    frame="page"
+    level={1}
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageStoreCatalogPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageStoreCatalogPage.svelte
new file mode 100644
index 0000000..ff459f0
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageStoreCatalogPage.svelte
@@ -0,0 +1,149 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-store-catalog page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    CategoryNav,
+    Container,
+    Link,
+    NavBar,
+    PageIntro,
+    ProductGrid,
+    SitemapFooter,
+    Text,
+    UspStrip,
+    type Category,
+    type Feature,
+    type MegaGroup,
+    type NavLink,
+    type Product,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.storeCatalog.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="store-catalog">
+  <NavBar
+    label={ui.vibe.nav.label}
+    brand={ui.site.header.brand}
+    links={navlinks}
+    current="link-product"
+    actions={{
+      cta: ui.site.header.cta,
+      href: "#/",
+      login: ui.site.header.login,
+      loginHref: "#/login",
+      mode: "cta",
+    }}
+    search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+    layout="search"
+    over="none"
+    tone="default"
+    ontheme={() => actions.toggleTheme()}
+  />
+  <PageIntro
+    id="store-catalog-pagehead"
+    title={ui.commerce.pages.catalogTitle}
+    text={ui.commerce.pages.catalogLead}
+    cta=""
+    href="#/"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <CategoryNav
+    label={ui.commerce.nav.label}
+    categories={categories}
+    current="category-all"
+    tools={ui.commerce.tools}
+    layout="toolbar"
+    count="show"
+    icon="hide"
+    density="default"
+  />
+  <ProductGrid
+    id="store-catalog-products"
+    title={ui.commerce.products.title}
+    products={products}
+    labels={ui.commerce.productLabels}
+    badges={ui.commerce.badges}
+    layout="grid"
+    cols="1-4"
+    ratio="1/1"
+    rating="hide"
+    action="button"
+    tone="default"
+    density="compact"
+  />
+  <UspStrip
+    id="store-catalog-usp"
+    perks={perks}
+    empty={ui.empty.perks}
+    layout="bar"
+    tone="default"
+    density="compact"
+  />
+  <SitemapFooter
+    id="store-catalog-sitemap"
+    label={ui.vibe.sitemap.label}
+    brand={ui.site.header.brand}
+    tagline={ui.vibe.sitemap.tagline}
+    copyright={ui.vibe.sitemap.copyright}
+    groups={sitemap}
+    signup={{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: "none",
+    }}
+    status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+    layout="columns"
+    density="default"
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageStoreHome2Page.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageStoreHome2Page.svelte
new file mode 100644
index 0000000..47d5c58
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageStoreHome2Page.svelte
@@ -0,0 +1,197 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-store-home-2 page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    DeliveryInfo,
+    Link,
+    NavBar,
+    ProductGrid,
+    SitemapFooter,
+    StoreHero,
+    StoreLocations,
+    Text,
+    UspStrip,
+    type Feature,
+    type MegaGroup,
+    type NavLink,
+    type Product,
+    type Store,
+    type Zone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+  import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+  import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const ZONES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "area": "metadata.area.value",
+    "price": "metadata.price.value",
+    "freeFrom": "metadata.freeFrom.value",
+    "minOrder": "metadata.minOrder.value",
+    "time": "metadata.time.value",
+    "express": "metadata.express.value",
+    "currency": "metadata.currency.value",
+  } as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const STORES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "kind": "metadata.store_kind.value",
+    "address": "metadata.address.value",
+    "hours": "metadata.hours.value",
+    "phone": "metadata.phone.value",
+    "note": "metadata.note.value",
+    "services": "metadata.services.value",
+  } as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+  const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.storeHome2.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="store-home-2">
+  <NavBar
+    label={ui.vibe.nav.label}
+    brand={ui.site.header.brand}
+    links={navlinks}
+    current="link-product"
+    actions={{
+      cta: ui.site.header.cta,
+      href: "#/",
+      login: ui.site.header.login,
+      loginHref: "#/login",
+      mode: "cta",
+    }}
+    search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+    layout="inline"
+    over="none"
+    tone="default"
+    ontheme={() => actions.toggleTheme()}
+  />
+  <StoreHero
+    id="store-home-2-storehero"
+    title={ui.commerce.storeHero.title}
+    lead={ui.commerce.storeHero.lead}
+    badge={ui.commerce.storeHero.badge}
+    perks={perks}
+    card={ui.commerce.storeHero.card}
+    actions={{
+      mode: "two",
+      cta: ui.commerce.storeHero.cta,
+      href: "#/catalog",
+      secondary: ui.commerce.storeHero.secondary,
+      secondaryHref: "#/delivery",
+    }}
+    layout="backdrop"
+    mediaSide="end"
+    tone="default"
+    level={1}
+  />
+  <UspStrip
+    id="store-home-2-usp"
+    perks={perks}
+    empty={ui.empty.perks}
+    layout="strip"
+    tone="default"
+    density="default"
+  />
+  <ProductGrid
+    id="store-home-2-products"
+    title={ui.commerce.products.title}
+    products={products}
+    labels={ui.commerce.productLabels}
+    badges={ui.commerce.badges}
+    layout="grid"
+    cols="1-3"
+    ratio="4/3"
+    rating="show"
+    action="button"
+    tone="default"
+    density="default"
+  />
+  <DeliveryInfo
+    id="store-home-2-delivery"
+    title={ui.commerce.delivery.title}
+    lead={ui.commerce.delivery.lead}
+    facts={deliveryfacts}
+    zones={zones}
+    labels={ui.commerce.delivery}
+    layout="full"
+    tone="default"
+    density="default"
+  />
+  <StoreLocations
+    id="store-home-2-locations"
+    title={ui.commerce.stores.title}
+    lead={ui.commerce.stores.lead}
+    stores={stores}
+    empty={ui.empty.stores}
+    kinds={ui.commerce.stores.kinds}
+    labels={ui.commerce.stores}
+    layout="map"
+    tone="default"
+  />
+  <SitemapFooter
+    id="store-home-2-sitemap"
+    label={ui.vibe.sitemap.label}
+    brand={ui.site.header.brand}
+    tagline={ui.vibe.sitemap.tagline}
+    copyright={ui.vibe.sitemap.copyright}
+    groups={sitemap}
+    signup={{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: "none",
+    }}
+    status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+    layout="columns"
+    density="default"
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PageStoreHomePage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PageStoreHomePage.svelte
new file mode 100644
index 0000000..586a166
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PageStoreHomePage.svelte
@@ -0,0 +1,210 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-store-home page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    AnnouncementBar,
+    Block,
+    Box,
+    CategoryNav,
+    Container,
+    CtaBand,
+    Link,
+    NavBar,
+    ProductGrid,
+    SitemapFooter,
+    StoreHero,
+    Text,
+    UspStrip,
+    tpl,
+    uniqLabel,
+    type Category,
+    type Feature,
+    type MegaGroup,
+    type NavLink,
+    type Product,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+    <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+      {ui.catalog.backPages}
+    </Link>
+    <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+      {ui.catalog.pages.storeHome.title}
+    </Text>
+  </Container>
+</Block>
+<Box class="flex flex-col" data-testid="page-body" data-page="store-home">
+  <AnnouncementBar
+    label={ui.promo.announcement.label}
+    text={ui.cases.shop.announcement.text}
+    cta={ui.cases.shop.announcement.cta}
+    ctaHref="#/pricing"
+    dismissLabel={ui.promo.announcement.dismiss}
+    badgeLabel={ui.promo.announcement.badge}
+    tone="muted"
+    layout="center"
+    dismiss="show"
+    badge="none"
+    position="top"
+  />
+  <NavBar
+    label={ui.vibe.nav.label}
+    brand={ui.site.header.brand}
+    links={navlinks}
+    current="link-product"
+    actions={{
+      cta: ui.site.header.cta,
+      href: "#/",
+      login: ui.site.header.login,
+      loginHref: "#/login",
+      mode: "cta",
+    }}
+    search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+    layout="search"
+    over="none"
+    tone="default"
+    ontheme={() => actions.toggleTheme()}
+  />
+  <StoreHero
+    id="store-home-storehero"
+    title={ui.commerce.storeHero.title}
+    lead={ui.commerce.storeHero.lead}
+    badge={ui.commerce.storeHero.badge}
+    perks={perks}
+    card={ui.commerce.storeHero.card}
+    actions={{
+      mode: "two",
+      cta: ui.commerce.storeHero.cta,
+      href: "#/catalog",
+      secondary: ui.commerce.storeHero.secondary,
+      secondaryHref: "#/delivery",
+    }}
+    layout="overlay"
+    mediaSide="end"
+    tone="default"
+    level={1}
+  />
+  <CategoryNav
+    label={ui.commerce.nav.label}
+    categories={categories}
+    current="category-all"
+    tools={ui.commerce.tools}
+    layout="tiles"
+    count="show"
+    icon="show"
+    density="default"
+  />
+  <ProductGrid
+    id="store-home-products-4"
+    title={ui.commerce.pages.bestsellers}
+    products={products}
+    labels={ui.commerce.productLabels}
+    badges={ui.commerce.badges}
+    layout="grid"
+    cols="1-4"
+    ratio="1/1"
+    rating="show"
+    action="button"
+    tone="default"
+    density="default"
+    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+  />
+  <ProductGrid
+    id="deals"
+    title={ui.commerce.rail.title}
+    products={products}
+    labels={ui.commerce.productLabels}
+    badges={ui.commerce.badges}
+    layout="rail"
+    cols="1-3"
+    ratio="4/3"
+    rating="show"
+    action="button"
+    tone="default"
+    density="default"
+    landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))}
+  />
+  <UspStrip
+    id="store-home-usp"
+    perks={perks}
+    empty={ui.empty.perks}
+    layout="cards"
+    tone="default"
+    density="default"
+    title={ui.commerce.usp.title}
+  />
+  <CtaBand
+    id="store-home-cta"
+    title={ui.cases.shop.cta.title}
+    text={ui.cases.shop.cta.text}
+    actions={{
+      cta: ui.cases.shop.cta.cta,
+      href: "#/pricing",
+      secondary: ui.cases.shop.cta.secondary,
+      secondaryHref: "#/",
+      emailLabel: ui.promo.newsletter.label,
+      mode: "one",
+    }}
+    quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+    layout="split"
+    tone="default"
+    proof="none"
+    density="default"
+  />
+  <SitemapFooter
+    id="store-home-sitemap"
+    label={ui.vibe.sitemap.label}
+    brand={ui.site.header.brand}
+    tagline={ui.vibe.sitemap.tagline}
+    copyright={ui.vibe.sitemap.copyright}
+    groups={sitemap}
+    signup={{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: "none",
+    }}
+    status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+    layout="columns"
+    density="default"
+  />
+</Box>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PagesPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PagesPage.svelte
new file mode 100644
index 0000000..ae70733
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PagesPage.svelte
@@ -0,0 +1,220 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The pages page of CatalogScreen. -->
+<script lang="ts">
+  import { Block, Container, Group, Link, List, ListItem, Stack, Text, Title, tpl } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const PAGES = [
+    {
+      id: "saas-landing",
+      visit: "page-saas-landing",
+      href: "#/page-saas-landing",
+      name: ui.catalog.pages.saasLanding.title,
+      text: ui.catalog.pages.saasLanding.text,
+      blocks: 11,
+    },
+    {
+      id: "company",
+      visit: "page-company",
+      href: "#/page-company",
+      name: ui.catalog.pages.company.title,
+      text: ui.catalog.pages.company.text,
+      blocks: 9,
+    },
+    {
+      id: "portfolio",
+      visit: "page-portfolio",
+      href: "#/page-portfolio",
+      name: ui.catalog.pages.portfolio.title,
+      text: ui.catalog.pages.portfolio.text,
+      blocks: 7,
+    },
+    {
+      id: "store-home",
+      visit: "page-store-home",
+      href: "#/page-store-home",
+      name: ui.catalog.pages.storeHome.title,
+      text: ui.catalog.pages.storeHome.text,
+      blocks: 9,
+    },
+    {
+      id: "store-home-2",
+      visit: "page-store-home-2",
+      href: "#/page-store-home-2",
+      name: ui.catalog.pages.storeHome2.title,
+      text: ui.catalog.pages.storeHome2.text,
+      blocks: 7,
+    },
+    {
+      id: "store-catalog",
+      visit: "page-store-catalog",
+      href: "#/page-store-catalog",
+      name: ui.catalog.pages.storeCatalog.title,
+      text: ui.catalog.pages.storeCatalog.text,
+      blocks: 6,
+    },
+    {
+      id: "product-detail",
+      visit: "page-product-detail",
+      href: "#/page-product-detail",
+      name: ui.catalog.pages.productDetail.title,
+      text: ui.catalog.pages.productDetail.text,
+      blocks: 6,
+    },
+    {
+      id: "cart",
+      visit: "page-cart",
+      href: "#/page-cart",
+      name: ui.catalog.pages.cart.title,
+      text: ui.catalog.pages.cart.text,
+      blocks: 5,
+    },
+    {
+      id: "checkout",
+      visit: "page-checkout",
+      href: "#/page-checkout",
+      name: ui.catalog.pages.checkout.title,
+      text: ui.catalog.pages.checkout.text,
+      blocks: 4,
+    },
+    {
+      id: "shell-classic",
+      visit: "page-shell-classic",
+      href: "#/page-shell-classic",
+      name: ui.catalog.pages.shellClassic.title,
+      text: ui.catalog.pages.shellClassic.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-inset",
+      visit: "page-shell-inset",
+      href: "#/page-shell-inset",
+      name: ui.catalog.pages.shellInset.title,
+      text: ui.catalog.pages.shellInset.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-rail",
+      visit: "page-shell-rail",
+      href: "#/page-shell-rail",
+      name: ui.catalog.pages.shellRail.title,
+      text: ui.catalog.pages.shellRail.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-rail-footer",
+      visit: "page-shell-rail-footer",
+      href: "#/page-shell-rail-footer",
+      name: ui.catalog.pages.shellRailFooter.title,
+      text: ui.catalog.pages.shellRailFooter.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-collapsed",
+      visit: "page-shell-collapsed",
+      href: "#/page-shell-collapsed",
+      name: ui.catalog.pages.shellCollapsed.title,
+      text: ui.catalog.pages.shellCollapsed.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-two-level",
+      visit: "page-shell-two-level",
+      href: "#/page-shell-two-level",
+      name: ui.catalog.pages.shellTwoLevel.title,
+      text: ui.catalog.pages.shellTwoLevel.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-two-level-full",
+      visit: "page-shell-two-level-full",
+      href: "#/page-shell-two-level-full",
+      name: ui.catalog.pages.shellTwoLevelFull.title,
+      text: ui.catalog.pages.shellTwoLevelFull.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-end",
+      visit: "page-shell-end",
+      href: "#/page-shell-end",
+      name: ui.catalog.pages.shellEnd.title,
+      text: ui.catalog.pages.shellEnd.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-rail-end",
+      visit: "page-shell-rail-end",
+      href: "#/page-shell-rail-end",
+      name: ui.catalog.pages.shellRailEnd.title,
+      text: ui.catalog.pages.shellRailEnd.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-top-only",
+      visit: "page-shell-top-only",
+      href: "#/page-shell-top-only",
+      name: ui.catalog.pages.shellTopOnly.title,
+      text: ui.catalog.pages.shellTopOnly.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-side-only",
+      visit: "page-shell-side-only",
+      href: "#/page-shell-side-only",
+      name: ui.catalog.pages.shellSideOnly.title,
+      text: ui.catalog.pages.shellSideOnly.text,
+      blocks: 1,
+    },
+    {
+      id: "shell-collapsed-end",
+      visit: "page-shell-collapsed-end",
+      href: "#/page-shell-collapsed-end",
+      name: ui.catalog.pages.shellCollapsedEnd.title,
+      text: ui.catalog.pages.shellCollapsedEnd.text,
+      blocks: 1,
+    },
+  ] as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="pages-title">
+          {ui.catalog.pagesTitle}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.catalog.pagesText}
+        </Text>
+      </Stack>
+      <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="page-list">
+        {#each PAGES as p (p.id)}
+          <ListItem class="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+            <Link
+              href={p.href}
+              variant="default"
+              class="font-bold"
+              data-testid="page-link"
+              data-page={p.id}
+              data-visit={p.visit}
+            >
+              {p.name}
+            </Link>
+            <Text size="sm" class="text-muted-foreground">
+              {p.text}
+            </Text>
+            <Text size="xs" class="text-muted-foreground" data-testid="page-count">
+              {tpl(ui.catalog.pageCount, p.blocks)}
+            </Text>
+          </ListItem>
+        {/each}
+      </List>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PromoBannersPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PromoBannersPage.svelte
new file mode 100644
index 0000000..69e2d74
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PromoBannersPage.svelte
@@ -0,0 +1,418 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The promo-banners page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    AnnouncementBar,
+    Block,
+    Box,
+    Container,
+    CookieBanner,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.promo.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.promoBanners}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 12)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-announcement-title"
+        data-testid="catalog-block"
+        data-block="announcement"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-announcement-title">
+            {ui.blocks.names.announcement}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.announcement}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-bar-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="bar"
+        >
+          <Title as={3} size="base" weight="bold" id="announcement-bar-label" data-testid="variant-label">
+            {ui.blocks.variants.announcement.bar}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              label={ui.promo.announcement.label}
+              text={ui.promo.announcement.text}
+              cta={ui.promo.announcement.cta}
+              ctaHref="#/pricing"
+              dismissLabel={ui.promo.announcement.dismiss}
+              badgeLabel={ui.promo.announcement.badge}
+              tone="default"
+              layout="center"
+              dismiss="hide"
+              badge="none"
+              position="top"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-badge-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="badge"
+        >
+          <Title as={3} size="base" weight="bold" id="announcement-badge-label" data-testid="variant-label">
+            {ui.blocks.variants.announcement.badge}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              label={ui.promo.announcement.label}
+              text={ui.promo.announcement.text}
+              cta={ui.promo.announcement.cta}
+              ctaHref="#/pricing"
+              dismissLabel={ui.promo.announcement.dismiss}
+              badgeLabel={ui.promo.announcement.badge}
+              tone="muted"
+              layout="center"
+              dismiss="hide"
+              badge="show"
+              position="top"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-bottom-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="bottom"
+        >
+          <Title as={3} size="base" weight="bold" id="announcement-bottom-label" data-testid="variant-label">
+            {ui.blocks.variants.announcement.bottom}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              label={ui.promo.announcement.label}
+              text={ui.promo.announcement.text}
+              cta={ui.promo.announcement.cta}
+              ctaHref="#/pricing"
+              dismissLabel={ui.promo.announcement.dismiss}
+              badgeLabel={ui.promo.announcement.badge}
+              tone="default"
+              layout="split"
+              dismiss="show"
+              badge="none"
+              position="bottom"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-muted-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="announcement-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.announcement.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              label={ui.promo.announcement.label}
+              text={ui.promo.announcement.text}
+              cta={ui.promo.announcement.cta}
+              ctaHref="#/pricing"
+              dismissLabel={ui.promo.announcement.dismiss}
+              badgeLabel={ui.promo.announcement.badge}
+              tone="muted"
+              layout="center"
+              dismiss="hide"
+              badge="none"
+              position="top"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.muted))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-split-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="announcement-split-label" data-testid="variant-label">
+            {ui.blocks.variants.announcement.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              label={ui.promo.announcement.label}
+              text={ui.promo.announcement.text}
+              cta={ui.promo.announcement.cta}
+              ctaHref="#/pricing"
+              dismissLabel={ui.promo.announcement.dismiss}
+              badgeLabel={ui.promo.announcement.badge}
+              tone="muted"
+              layout="split"
+              dismiss="hide"
+              badge="none"
+              position="top"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-dismissible-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="dismissible"
+        >
+          <Title as={3} size="base" weight="bold" id="announcement-dismissible-label" data-testid="variant-label">
+            {ui.blocks.variants.announcement.dismissible}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              label={ui.promo.announcement.label}
+              text={ui.promo.announcement.text}
+              cta={ui.promo.announcement.cta}
+              ctaHref="#/pricing"
+              dismissLabel={ui.promo.announcement.dismiss}
+              badgeLabel={ui.promo.announcement.badge}
+              tone="default"
+              layout="center"
+              dismiss="show"
+              badge="none"
+              position="top"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-shop-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="shop"
+        >
+          <Title as={3} size="base" weight="bold" id="announcement-shop-label" data-testid="variant-label">
+            {ui.blocks.variants.announcement.shop}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              label={ui.promo.announcement.label}
+              text={ui.cases.shop.announcement.text}
+              cta={ui.cases.shop.announcement.cta}
+              ctaHref="#/pricing"
+              dismissLabel={ui.promo.announcement.dismiss}
+              badgeLabel={ui.promo.announcement.badge}
+              tone="muted"
+              layout="center"
+              dismiss="show"
+              badge="none"
+              position="top"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-agency-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="agency"
+        >
+          <Title as={3} size="base" weight="bold" id="announcement-agency-label" data-testid="variant-label">
+            {ui.blocks.variants.announcement.agency}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              label={ui.promo.announcement.label}
+              text={ui.cases.agency.announcement.text}
+              cta={ui.cases.agency.announcement.cta}
+              ctaHref="#/pricing"
+              dismissLabel={ui.promo.announcement.dismiss}
+              badgeLabel={ui.promo.announcement.badge}
+              tone="default"
+              layout="split"
+              dismiss="hide"
+              badge="none"
+              position="top"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.agency))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-cookie-title"
+        data-testid="catalog-block"
+        data-block="cookie"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-cookie-title">
+            {ui.blocks.names.cookie}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.cookie}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cookie-bar-label"
+          data-testid="variant"
+          data-block="cookie"
+          data-variant="bar"
+        >
+          <Title as={3} size="base" weight="bold" id="cookie-bar-label" data-testid="variant-label">
+            {ui.blocks.variants.cookie.bar}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CookieBanner
+              id="cookie-bar"
+              title={ui.promo.cookie.title}
+              text={ui.promo.cookie.text}
+              accept={ui.promo.cookie.accept}
+              decline={ui.promo.cookie.decline}
+              settings={ui.promo.cookie.settings}
+              layout="bar"
+              actions="two"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cookie-card-label"
+          data-testid="variant"
+          data-block="cookie"
+          data-variant="card"
+        >
+          <Title as={3} size="base" weight="bold" id="cookie-card-label" data-testid="variant-label">
+            {ui.blocks.variants.cookie.card}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CookieBanner
+              id="cookie-card"
+              title={ui.promo.cookie.title}
+              text={ui.promo.cookie.text}
+              accept={ui.promo.cookie.accept}
+              decline={ui.promo.cookie.decline}
+              settings={ui.promo.cookie.settings}
+              layout="card"
+              actions="two"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cookie-settings-label"
+          data-testid="variant"
+          data-block="cookie"
+          data-variant="settings"
+        >
+          <Title as={3} size="base" weight="bold" id="cookie-settings-label" data-testid="variant-label">
+            {ui.blocks.variants.cookie.settings}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CookieBanner
+              id="cookie-settings"
+              title={ui.promo.cookie.title}
+              text={ui.promo.cookie.text}
+              accept={ui.promo.cookie.accept}
+              decline={ui.promo.cookie.decline}
+              settings={ui.promo.cookie.settings}
+              layout="bar"
+              actions="three"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cookie-muted-label"
+          data-testid="variant"
+          data-block="cookie"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="cookie-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.cookie.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CookieBanner
+              id="cookie-muted"
+              title={ui.promo.cookie.title}
+              text={ui.promo.cookie.text}
+              accept={ui.promo.cookie.accept}
+              decline={ui.promo.cookie.decline}
+              settings={ui.promo.cookie.settings}
+              layout="card"
+              actions="three"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/PromoNewsletterPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/PromoNewsletterPage.svelte
new file mode 100644
index 0000000..e29d2cf
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/PromoNewsletterPage.svelte
@@ -0,0 +1,200 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The promo-newsletter page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    Group,
+    Link,
+    NewsletterForm,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.promo.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.promoNewsletter}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 5)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-newsletter-title"
+        data-testid="catalog-block"
+        data-block="newsletter"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-newsletter-title">
+            {ui.blocks.names.newsletter}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.newsletter}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-inline-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="inline"
+        >
+          <Title as={3} size="base" weight="bold" id="newsletter-inline-label" data-testid="variant-label">
+            {ui.blocks.variants.newsletter.inline}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-inline"
+              title={ui.promo.newsletter.title}
+              text={ui.promo.newsletter.text}
+              label={ui.promo.newsletter.label}
+              submit={ui.promo.newsletter.submit}
+              consent={ui.promo.newsletter.consent}
+              layout="inline"
+              terms="hide"
+              tone="default"
+              align="center"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-stacked-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="stacked"
+        >
+          <Title as={3} size="base" weight="bold" id="newsletter-stacked-label" data-testid="variant-label">
+            {ui.blocks.variants.newsletter.stacked}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-stacked"
+              title={ui.promo.newsletter.title}
+              text={ui.promo.newsletter.text}
+              label={ui.promo.newsletter.label}
+              submit={ui.promo.newsletter.submit}
+              consent={ui.promo.newsletter.consent}
+              layout="stacked"
+              terms="hide"
+              tone="default"
+              align="center"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-split-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="newsletter-split-label" data-testid="variant-label">
+            {ui.blocks.variants.newsletter.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-split"
+              title={ui.promo.newsletter.title}
+              text={ui.promo.newsletter.text}
+              label={ui.promo.newsletter.label}
+              submit={ui.promo.newsletter.submit}
+              consent={ui.promo.newsletter.consent}
+              layout="split"
+              terms="hide"
+              tone="default"
+              align="start"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-consent-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="consent"
+        >
+          <Title as={3} size="base" weight="bold" id="newsletter-consent-label" data-testid="variant-label">
+            {ui.blocks.variants.newsletter.consent}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-consent"
+              title={ui.promo.newsletter.title}
+              text={ui.promo.newsletter.text}
+              label={ui.promo.newsletter.label}
+              submit={ui.promo.newsletter.submit}
+              consent={ui.promo.newsletter.consent}
+              layout="inline"
+              terms="show"
+              tone="default"
+              align="center"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-muted-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="newsletter-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.newsletter.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-muted"
+              title={ui.promo.newsletter.title}
+              text={ui.promo.newsletter.text}
+              label={ui.promo.newsletter.label}
+              submit={ui.promo.newsletter.submit}
+              consent={ui.promo.newsletter.consent}
+              layout="inline"
+              terms="show"
+              tone="muted"
+              align="start"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/ScreenHeader.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/ScreenHeader.svelte
new file mode 100644
index 0000000..7bbb7f8
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/ScreenHeader.svelte
@@ -0,0 +1,46 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The ScreenHeader part of CatalogScreen: its own file, so each file of the screen opens on one Block. -->
+<script lang="ts">
+  import { Block, Button, Container, Link, LinkPlain, NavBlock } from "@ui8kit/svelte-ui";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="header" class="border-b border-border">
+  <LinkPlain
+    href="#main-content"
+    class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+      "focus:px-4 focus:py-2 focus:text-sm focus:shadow"}
+    data-testid="skip-link"
+  >
+    {ui.site.header.skip}
+  </LinkPlain>
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+    <Link href="#/" variant="default" class="text-lg font-bold" data-testid="brand">
+      {ui.catalog.title}
+    </Link>
+    <NavBlock label={ui.catalog.navLabel} class="flex flex-wrap items-center gap-4">
+      <Link href="#/" variant="default" class="text-sm font-medium" data-testid="tab-categories">
+        {ui.catalog.categoriesTab}
+      </Link>
+      <Link href="#/pages" variant="default" class="text-sm font-medium" data-testid="tab-pages">
+        {ui.catalog.pagesTitle}
+      </Link>
+      <Link href="/blocks/" variant="default" class="text-sm font-medium" data-testid="gallery-link">
+        {ui.blocks.title}
+      </Link>
+      <Link href="/skins/" variant="default" class="text-sm font-medium" data-testid="skins-link">
+        {ui.skins.title}
+      </Link>
+      <Link href="/discovery/" variant="default" class="text-sm font-medium" data-testid="discovery-link">
+        {ui.discovery.title}
+      </Link>
+      <Button variant="outline" size="sm" data-testid="theme-toggle" onclick={() => actions.toggleTheme()}>
+        {ui.theme.toggle}
+      </Button>
+    </NavBlock>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/SupportContactPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/SupportContactPage.svelte
new file mode 100644
index 0000000..862df94
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/SupportContactPage.svelte
@@ -0,0 +1,367 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The support-contact page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    ContactForm,
+    Container,
+    Group,
+    Link,
+    Stack,
+    SupportChannels,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.support.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.supportContact}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 2, 10)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-contact-title"
+        data-testid="catalog-block"
+        data-block="contact"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-contact-title">
+            {ui.blocks.names.contact}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.contact}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-single-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="single"
+        >
+          <Title as={3} size="base" weight="bold" id="contact-single-label" data-testid="variant-label">
+            {ui.blocks.variants.contact.single}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-single"
+              title={ui.support.contact.title}
+              text={ui.support.contact.text}
+              labels={ui.support.contact.labels}
+              details={channels}
+              layout="single"
+              fields="full"
+              terms="hide"
+              page="section"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-page-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="page"
+        >
+          <Title as={3} size="base" weight="bold" id="contact-page-label" data-testid="variant-label">
+            {ui.blocks.variants.contact.page}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-page"
+              title={ui.support.contact.title}
+              text={ui.support.contact.text}
+              labels={ui.support.contact.labels}
+              details={channels}
+              layout="single"
+              fields="short"
+              terms="hide"
+              page="full"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.page))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-short-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="short"
+        >
+          <Title as={3} size="base" weight="bold" id="contact-short-label" data-testid="variant-label">
+            {ui.blocks.variants.contact.short}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-short"
+              title={ui.support.contact.title}
+              text={ui.support.contact.text}
+              labels={ui.support.contact.labels}
+              details={channels}
+              layout="single"
+              fields="short"
+              terms="hide"
+              page="section"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.short))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-split-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="contact-split-label" data-testid="variant-label">
+            {ui.blocks.variants.contact.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-split"
+              title={ui.support.contact.title}
+              text={ui.support.contact.text}
+              labels={ui.support.contact.labels}
+              details={channels}
+              layout="split"
+              fields="full"
+              terms="hide"
+              page="section"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-consent-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="consent"
+        >
+          <Title as={3} size="base" weight="bold" id="contact-consent-label" data-testid="variant-label">
+            {ui.blocks.variants.contact.consent}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-consent"
+              title={ui.support.contact.title}
+              text={ui.support.contact.text}
+              labels={ui.support.contact.labels}
+              details={channels}
+              layout="single"
+              fields="full"
+              terms="show"
+              page="section"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-muted-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="contact-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.contact.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-muted"
+              title={ui.support.contact.title}
+              text={ui.support.contact.text}
+              labels={ui.support.contact.labels}
+              details={channels}
+              layout="split"
+              fields="short"
+              terms="show"
+              page="section"
+              tone="muted"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-channels-title"
+        data-testid="catalog-block"
+        data-block="channels"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-channels-title">
+            {ui.blocks.names.channels}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.channels}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="channels-grid-label"
+          data-testid="variant"
+          data-block="channels"
+          data-variant="grid"
+        >
+          <Title as={3} size="base" weight="bold" id="channels-grid-label" data-testid="variant-label">
+            {ui.blocks.variants.channels.grid}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SupportChannels
+              id="channels-grid"
+              title={ui.support.channels.title}
+              channels={channels}
+              empty={ui.empty.channels}
+              open={ui.support.channels.open}
+              layout="grid"
+              cols="1-3"
+              action="link"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="channels-twoUp-label"
+          data-testid="variant"
+          data-block="channels"
+          data-variant="twoUp"
+        >
+          <Title as={3} size="base" weight="bold" id="channels-twoUp-label" data-testid="variant-label">
+            {ui.blocks.variants.channels.twoUp}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SupportChannels
+              id="channels-twoUp"
+              title={ui.support.channels.title}
+              channels={channels}
+              empty={ui.empty.channels}
+              open={ui.support.channels.open}
+              layout="grid"
+              cols="1-2"
+              action="link"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="channels-list-label"
+          data-testid="variant"
+          data-block="channels"
+          data-variant="list"
+        >
+          <Title as={3} size="base" weight="bold" id="channels-list-label" data-testid="variant-label">
+            {ui.blocks.variants.channels.list}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SupportChannels
+              id="channels-list"
+              title={ui.support.channels.title}
+              channels={channels}
+              empty={ui.empty.channels}
+              open={ui.support.channels.open}
+              layout="list"
+              cols="1-3"
+              action="link"
+              tone="default"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="channels-plain-label"
+          data-testid="variant"
+          data-block="channels"
+          data-variant="plain"
+        >
+          <Title as={3} size="base" weight="bold" id="channels-plain-label" data-testid="variant-label">
+            {ui.blocks.variants.channels.plain}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SupportChannels
+              id="channels-plain"
+              title={ui.support.channels.title}
+              channels={channels}
+              empty={ui.empty.channels}
+              open={ui.support.channels.open}
+              layout="grid"
+              cols="1-3"
+              action="none"
+              tone="muted"
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.plain))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/CatalogScreen/SupportStatesPage.svelte b/apps/host-svelte/xgen/screens/CatalogScreen/SupportStatesPage.svelte
new file mode 100644
index 0000000..c86a65f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/CatalogScreen/SupportStatesPage.svelte
@@ -0,0 +1,196 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The support-states page of CatalogScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Container,
+    ErrorPage,
+    Group,
+    Link,
+    Stack,
+    Text,
+    Title,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const ERRORPAGE_ACTIONS = { cta: ui.vibe.error.cta, href: "#/", secondary: ui.vibe.error.secondary, secondaryHref: "#/" } as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Group>
+        <Link href="#/" variant="default" data-testid="back">
+          {ui.catalog.back}
+        </Link>
+      </Group>
+      <Stack gap="2" align="stretch">
+        <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+          {ui.catalog.sections.support.title}
+        </Text>
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="category-title">
+          {ui.catalog.categories.supportStates}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {tpl(ui.catalog.count, 1, 5)}
+        </Text>
+      </Stack>
+      <Stack
+        gap="6"
+        align="stretch"
+        role="group"
+        aria-labelledby="catalog-errorpage-title"
+        data-testid="catalog-block"
+        data-block="errorpage"
+      >
+        <Stack gap="2" align="stretch">
+          <Title as={2} size="2xl" weight="bold" id="catalog-errorpage-title">
+            {ui.blocks.names.errorpage}
+          </Title>
+          <Text size="sm" class="max-w-2xl text-muted-foreground">
+            {ui.blocks.docs.errorpage}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-centered-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="centered"
+        >
+          <Title as={3} size="base" weight="bold" id="errorpage-centered-label" data-testid="variant-label">
+            {ui.blocks.variants.errorpage.centered}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-centered"
+              title={ui.vibe.error.title}
+              text={ui.vibe.error.text}
+              status={ui.vibe.error.status}
+              actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+              layout="centered"
+              code="show"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.centered))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-split-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="split"
+        >
+          <Title as={3} size="base" weight="bold" id="errorpage-split-label" data-testid="variant-label">
+            {ui.blocks.variants.errorpage.split}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-split"
+              title={ui.vibe.error.title}
+              text={ui.vibe.error.text}
+              status={ui.vibe.error.status}
+              actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+              layout="split"
+              code="show"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.split))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-noCode-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="noCode"
+        >
+          <Title as={3} size="base" weight="bold" id="errorpage-noCode-label" data-testid="variant-label">
+            {ui.blocks.variants.errorpage.noCode}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-noCode"
+              title={ui.vibe.error.title}
+              text={ui.vibe.error.text}
+              status={ui.vibe.error.status}
+              actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+              layout="centered"
+              code="hide"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.noCode))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-two-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="two"
+        >
+          <Title as={3} size="base" weight="bold" id="errorpage-two-label" data-testid="variant-label">
+            {ui.blocks.variants.errorpage.two}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-two"
+              title={ui.vibe.error.title}
+              text={ui.vibe.error.text}
+              status={ui.vibe.error.status}
+              actions={{ ...ERRORPAGE_ACTIONS, mode: "two" }}
+              layout="centered"
+              code="show"
+              tone="default"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.two))}
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-muted-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="muted"
+        >
+          <Title as={3} size="base" weight="bold" id="errorpage-muted-label" data-testid="variant-label">
+            {ui.blocks.variants.errorpage.muted}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-muted"
+              title={ui.vibe.error.title}
+              text={ui.vibe.error.text}
+              status={ui.vibe.error.status}
+              actions={{ ...ERRORPAGE_ACTIONS, mode: "one" }}
+              layout="centered"
+              code="show"
+              tone="muted"
+              level={2}
+              landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.muted))}
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/PlansScreen.svelte b/apps/host-svelte/xgen/screens/PlansScreen.svelte
new file mode 100644
index 0000000..7f54359
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/PlansScreen.svelte
@@ -0,0 +1,259 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/plans.json -->
+<!--
+  Collection -> record: a list of plans (search, sort, pager; all state in the URL) and the card of one plan.
+  Data: the Codex fixture `plans`.
+-->
+<script lang="ts">
+  import {
+    Badge,
+    Block,
+    Button,
+    Container,
+    Group,
+    Input,
+    Link,
+    PricingCard,
+    Stack,
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeadCell,
+    TableRow,
+    Text,
+    Title,
+    at,
+    fmtMoney,
+    tpl,
+    type Plan,
+  } from "@ui8kit/svelte-ui";
+  import { collectionView, fromCodex, matchRoute, screenActions, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { plans as entries } from "@ui8kit/app-shared/data/plans";
+
+  const LIST = { searchFields: ["name","tagline"], pageSize: 5, defaultSort: "price:asc" } as const;
+  const ROUTES = [{"path":"plans","area":"list"},{"path":"plans/:id","area":"record"}] as const;
+  const FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+    "status": "metadata.plan_status.value",
+  } as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const rows = fromCodex<Plan>(entries, FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "list", params: {} as Record<string, string> });
+  const view = $derived(collectionView(rows, LIST, url.query));
+  const record = $derived(route.area === "record" ? rows.find((r) => r.id === route.params.id) : undefined);
+  const actions = $derived(screenActions(url, view, "plans", (id) => `plans/${id}`, toggleTheme));
+</script>
+
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-8">
+    <Stack gap="6">
+      <Group gap="4" align="center" justify="between">
+        <Title as={1} size="2xl" weight="bold">
+          {ui.app.title}
+        </Title>
+        <Button variant="outline" size="sm" data-testid="theme-toggle" onclick={() => actions.toggleTheme()}>
+          {ui.theme.toggle}
+        </Button>
+      </Group>
+      {#if route.area === "record"}
+        <Stack gap="4">
+          <Group>
+            <Button variant="ghost" size="sm" data-testid="back" onclick={() => actions.back()}>
+              {ui.record.back}
+            </Button>
+          </Group>
+          {#if record}
+            <PricingCard plan={record} labels={ui.pricing} current={true} onselect={() => actions.back()}>
+              {#snippet footer(plan: Plan)}
+                <Text size="sm" class="text-muted-foreground" data-testid="record-id">
+                  {tpl(ui.record.id, plan.id)}
+                </Text>
+              {/snippet}
+            </PricingCard>
+          {:else}
+            <Text class="text-muted-foreground" data-testid="missing">
+              {ui.record.missing}
+            </Text>
+          {/if}
+        </Stack>
+      {:else}
+        <Stack gap="4">
+          <Group gap="4" align="center" justify="between" class="flex-wrap">
+            <Input
+              type="search"
+              size="default"
+              value={view.q}
+              placeholder={ui.plans.search}
+              aria-label={ui.plans.search}
+              class="max-w-xs"
+              data-testid="search"
+              oninput={(event: Event & { currentTarget: HTMLInputElement }) => actions.search(event.currentTarget.value)}
+            />
+            <Text size="sm" class="text-muted-foreground" data-testid="count">
+              {tpl(ui.plans.count, view.total)}
+            </Text>
+          </Group>
+          <Table class="w-full text-sm" data-testid="plans-table">
+            <TableCaption class="sr-only">
+              {ui.plans.caption}
+            </TableCaption>
+            <TableHead>
+              <TableRow>
+                {#if ((view.sort.field === "name") && (view.sort.dir === "asc"))}
+                  <TableHeadCell scope="col" aria-sort="ascending">
+                    <Button variant="ghost" size="sm" class="-mx-2 px-2" onclick={() => actions.sort("name")}>
+                      {ui.plans.col.name}
+                    </Button>
+                  </TableHeadCell>
+                {:else if ((view.sort.field === "name") && (view.sort.dir === "desc"))}
+                  <TableHeadCell scope="col" aria-sort="descending">
+                    <Button variant="ghost" size="sm" class="-mx-2 px-2" onclick={() => actions.sort("name")}>
+                      {ui.plans.col.name}
+                    </Button>
+                  </TableHeadCell>
+                {:else}
+                  <TableHeadCell scope="col" aria-sort="none">
+                    <Button variant="ghost" size="sm" class="-mx-2 px-2" onclick={() => actions.sort("name")}>
+                      {ui.plans.col.name}
+                    </Button>
+                  </TableHeadCell>
+                {/if}
+                {#if ((view.sort.field === "price") && (view.sort.dir === "asc"))}
+                  <TableHeadCell scope="col" class="text-right" aria-sort="ascending">
+                    <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onclick={() => actions.sort("price")}>
+                      {ui.plans.col.price}
+                    </Button>
+                  </TableHeadCell>
+                {:else if ((view.sort.field === "price") && (view.sort.dir === "desc"))}
+                  <TableHeadCell scope="col" class="text-right" aria-sort="descending">
+                    <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onclick={() => actions.sort("price")}>
+                      {ui.plans.col.price}
+                    </Button>
+                  </TableHeadCell>
+                {:else}
+                  <TableHeadCell scope="col" class="text-right" aria-sort="none">
+                    <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onclick={() => actions.sort("price")}>
+                      {ui.plans.col.price}
+                    </Button>
+                  </TableHeadCell>
+                {/if}
+                {#if ((view.sort.field === "seats") && (view.sort.dir === "asc"))}
+                  <TableHeadCell scope="col" class="text-right" aria-sort="ascending">
+                    <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onclick={() => actions.sort("seats")}>
+                      {ui.plans.col.seats}
+                    </Button>
+                  </TableHeadCell>
+                {:else if ((view.sort.field === "seats") && (view.sort.dir === "desc"))}
+                  <TableHeadCell scope="col" class="text-right" aria-sort="descending">
+                    <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onclick={() => actions.sort("seats")}>
+                      {ui.plans.col.seats}
+                    </Button>
+                  </TableHeadCell>
+                {:else}
+                  <TableHeadCell scope="col" class="text-right" aria-sort="none">
+                    <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onclick={() => actions.sort("seats")}>
+                      {ui.plans.col.seats}
+                    </Button>
+                  </TableHeadCell>
+                {/if}
+                {#if ((view.sort.field === "storage") && (view.sort.dir === "asc"))}
+                  <TableHeadCell scope="col" class="text-right" aria-sort="ascending">
+                    <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onclick={() => actions.sort("storage")}>
+                      {ui.plans.col.storage}
+                    </Button>
+                  </TableHeadCell>
+                {:else if ((view.sort.field === "storage") && (view.sort.dir === "desc"))}
+                  <TableHeadCell scope="col" class="text-right" aria-sort="descending">
+                    <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onclick={() => actions.sort("storage")}>
+                      {ui.plans.col.storage}
+                    </Button>
+                  </TableHeadCell>
+                {:else}
+                  <TableHeadCell scope="col" class="text-right" aria-sort="none">
+                    <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" onclick={() => actions.sort("storage")}>
+                      {ui.plans.col.storage}
+                    </Button>
+                  </TableHeadCell>
+                {/if}
+                <TableHeadCell scope="col">
+                  {ui.plans.col.status}
+                </TableHeadCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {#each view.rows as row (row.id)}
+                <TableRow data-testid="plan-row">
+                  <TableCell>
+                    <Link href={(("#/plans/" + row.id) + view.qs)} variant="default" data-testid="open-record">
+                      {row.name}
+                    </Link>
+                  </TableCell>
+                  <TableCell class="text-right">
+                    {fmtMoney(row.price, row.currency)}
+                  </TableCell>
+                  <TableCell class="text-right">
+                    {row.seats}
+                  </TableCell>
+                  <TableCell class="text-right">
+                    {row.storage}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={((row.status === "active") ? "default" : "secondary")} size="default">
+                      {at(ui.status, (row.status ?? ""))}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              {/each}
+            </TableBody>
+          </Table>
+          {#if (view.total === 0)}
+            <Text class="text-muted-foreground" data-testid="empty">
+              {ui.plans.empty}
+            </Text>
+          {/if}
+          <Group gap="4" align="center" justify="between" class="flex-wrap">
+            <Text size="sm" class="text-muted-foreground">
+              {tpl(ui.pager.showing, view.from, view.to, view.total)}
+            </Text>
+            <Group gap="2">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!(view.page > 1)}
+                data-testid="prev"
+                onclick={() => actions.page((view.page + -1))}
+              >
+                {ui.pager.previous}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!(view.page < view.pages)}
+                data-testid="next"
+                onclick={() => actions.page((view.page + 1))}
+              >
+                {ui.pager.next}
+              </Button>
+            </Group>
+          </Group>
+        </Stack>
+      {/if}
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/SiteScreen.svelte b/apps/host-svelte/xgen/screens/SiteScreen.svelte
new file mode 100644
index 0000000..0803b1e
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/SiteScreen.svelte
@@ -0,0 +1,205 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/site.json -->
+<!--
+  A marketing site of two routes, home and pricing, made of blocks: header, hero, features, pricing, FAQ, call
+  to action, footer. Data: the Codex fixtures `features`, `tiers` and `faq`. The only action is the theme
+  button.
+-->
+<script lang="ts">
+  import {
+    Block,
+    CtaBand,
+    FaqList,
+    FeatureGrid,
+    HeroClassic,
+    PricingTiers,
+    SiteFooter,
+    SiteHeader,
+    type CodeLine,
+    type Faq,
+    type FaqTab,
+    type Feature,
+    type Plan,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+  const ROUTES = [{"path":"","area":"home"},{"path":"pricing","area":"pricing"}] as const;
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "notfound", params: {} as Record<string, string> });
+  const actions = { toggleTheme };
+</script>
+
+<SiteHeader
+  labels={ui.site.header}
+  current={route.area}
+  cta={ui.site.header.cta}
+  layout="inline"
+  position="static"
+  actions="none"
+  routes={{ home: "#/", pricing: "#/pricing" }}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "home"}
+    <HeroClassic
+      id="home-hero"
+      title={ui.site.home.title}
+      text={ui.site.home.text}
+      actions={{
+        cta: ui.site.home.cta,
+        href: "#/pricing",
+        secondary: ui.site.home.secondary,
+        secondaryHref: "#/pricing",
+        emailLabel: ui.promo.newsletter.label,
+        mode: "one",
+      }}
+      media={{
+        codeTitle: ui.vibe.code.title,
+        prompt: ui.vibe.code.prompt,
+        lines: terminal,
+        kind: "none",
+        side: "end",
+      }}
+      layout="centered"
+      scale="default"
+      tone="default"
+      density="roomy"
+    />
+    <FeatureGrid
+      id="home-features"
+      title={ui.site.home.featuresTitle}
+      features={features}
+      empty={ui.empty.features}
+      action={{ label: ui.site.home.featuresAction, href: "#/" }}
+      layout="grid"
+      cols="1-3"
+      item="card"
+      mediaSide="end"
+      tone="default"
+      density="default"
+    />
+    <CtaBand
+      id="home-cta"
+      title={ui.site.home.ctaTitle}
+      text={ui.site.home.ctaText}
+      actions={{
+        cta: ui.site.home.ctaButton,
+        href: "#/pricing",
+        secondary: ui.site.home.ctaSecondary,
+        secondaryHref: "#/",
+        emailLabel: ui.promo.newsletter.label,
+        mode: "one",
+      }}
+      quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+      layout="card"
+      tone="muted"
+      proof="none"
+      density="default"
+    />
+  {:else if route.area === "pricing"}
+    <HeroClassic
+      id="pricing-hero"
+      title={ui.site.pricing.title}
+      text={ui.site.pricing.text}
+      actions={undefined}
+      media={{
+        codeTitle: ui.vibe.code.title,
+        prompt: ui.vibe.code.prompt,
+        lines: terminal,
+        kind: "none",
+        side: "end",
+      }}
+      layout="centered"
+      scale="default"
+      tone="default"
+      density="roomy"
+    />
+    <PricingTiers
+      id="pricing-tiers"
+      title={ui.site.pricing.tiersTitle}
+      plans={tiers}
+      labels={ui.pricing}
+      billingLabels={ui.vibe.billing}
+      layout="grid"
+      cols="1-3"
+      emphasis="auto"
+      billing="off"
+      tone="default"
+      density="default"
+    />
+    <FaqList
+      id="pricing-faq"
+      title={ui.site.pricing.faqTitle}
+      items={faq}
+      empty={ui.vibe.faq.empty}
+      search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+      filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+      layout="accordion"
+      cols="1"
+      tone="default"
+      density="default"
+    />
+  {:else}
+    <HeroClassic
+      id="not-found"
+      title={ui.site.notFound.title}
+      text={ui.site.notFound.text}
+      actions={{
+        cta: ui.site.notFound.back,
+        href: "#/",
+        secondary: ui.site.home.secondary,
+        secondaryHref: "#/pricing",
+        emailLabel: ui.promo.newsletter.label,
+        mode: "one",
+      }}
+      media={{
+        codeTitle: ui.vibe.code.title,
+        prompt: ui.vibe.code.prompt,
+        lines: terminal,
+        kind: "none",
+        side: "end",
+      }}
+      layout="centered"
+      scale="default"
+      tone="default"
+      density="roomy"
+    />
+  {/if}
+</Block>
+<SiteFooter
+  labels={ui.site.footer}
+  layout="minimal"
+  density="default"
+  routes={{ home: "#/", pricing: "#/pricing" }}
+/>
diff --git a/apps/host-svelte/xgen/screens/SkinsScreen.svelte b/apps/host-svelte/xgen/screens/SkinsScreen.svelte
new file mode 100644
index 0000000..f9dc4be
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/SkinsScreen.svelte
@@ -0,0 +1,33 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/skins.json -->
+<!--
+  The Skins screen: tiles that switch the look of the whole preview. A row of skins (the default theme and 14
+  tweakcn presets, each tile drawn in its skin), a row of Google fonts with Latin and Cyrillic over the font of
+  the skin, and a row of corner radii over the radius of the skin. The tiles are static; the preview runtime
+  (runtime/skins.ts) applies and stores the choice.
+-->
+<script lang="ts">
+  import { Block } from "@ui8kit/svelte-ui";
+  import IndexPage from "./SkinsScreen/IndexPage.svelte";
+  import NotfoundPage from "./SkinsScreen/NotfoundPage.svelte";
+  import ScreenHeader from "./SkinsScreen/ScreenHeader.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const ROUTES = [{"path":"","area":"index"}] as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "notfound", params: {} as Record<string, string> });
+  const actions = { toggleTheme };
+</script>
+
+<ScreenHeader />
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "index"}
+    <IndexPage />
+  {:else}
+    <NotfoundPage />
+  {/if}
+</Block>
diff --git a/apps/host-svelte/xgen/screens/SkinsScreen/IndexPage.svelte b/apps/host-svelte/xgen/screens/SkinsScreen/IndexPage.svelte
new file mode 100644
index 0000000..2831606
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/SkinsScreen/IndexPage.svelte
@@ -0,0 +1,240 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/skins.json -->
+<!-- The index page of SkinsScreen. -->
+<script lang="ts">
+  import {
+    Block,
+    Box,
+    Button,
+    ButtonPlain,
+    Container,
+    Inline,
+    List,
+    ListItem,
+    LucideIcon,
+    Stack,
+    Text,
+    Title,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const SKINS = [
+    { id: "default", name: ui.skins.skins.names.default },
+    { id: "modern-minimal", name: ui.skins.skins.names.modernMinimal },
+    { id: "violet-bloom", name: ui.skins.skins.names.violetBloom },
+    { id: "t3-chat", name: ui.skins.skins.names.t3Chat },
+    { id: "bubblegum", name: ui.skins.skins.names.bubblegum },
+    { id: "doom-64", name: ui.skins.skins.names.doom64 },
+    { id: "amber-minimal", name: ui.skins.skins.names.amberMinimal },
+    { id: "supabase", name: ui.skins.skins.names.supabase },
+    { id: "kodama-grove", name: ui.skins.skins.names.kodamaGrove },
+    { id: "perpetuity", name: ui.skins.skins.names.perpetuity },
+    { id: "cosmic-night", name: ui.skins.skins.names.cosmicNight },
+    { id: "claude", name: ui.skins.skins.names.claude },
+    { id: "mocha-mousse", name: ui.skins.skins.names.mochaMousse },
+    { id: "neo-brutalism", name: ui.skins.skins.names.neoBrutalism },
+    { id: "notebook", name: ui.skins.skins.names.notebook },
+  ] as const;
+  const FONTS = [
+    { id: "inter", family: "Inter", name: ui.skins.fonts.names.inter },
+    { id: "roboto", family: "Roboto", name: ui.skins.fonts.names.roboto },
+    { id: "manrope", family: "Manrope", name: ui.skins.fonts.names.manrope },
+    { id: "montserrat", family: "Montserrat", name: ui.skins.fonts.names.montserrat },
+    { id: "rubik", family: "Rubik", name: ui.skins.fonts.names.rubik },
+    { id: "nunito", family: "Nunito", name: ui.skins.fonts.names.nunito },
+    { id: "ibm-plex-sans", family: "IBM Plex Sans", name: ui.skins.fonts.names.ibmPlexSans },
+    { id: "golos-text", family: "Golos Text", name: ui.skins.fonts.names.golosText },
+    { id: "onest", family: "Onest", name: ui.skins.fonts.names.onest },
+    { id: "open-sans", family: "Open Sans", name: ui.skins.fonts.names.openSans },
+  ] as const;
+  const RADII = [
+    { id: "r0", value: "0px", name: ui.skins.radius.names.r0 },
+    { id: "r4", value: "4px", name: ui.skins.radius.names.r4 },
+    { id: "r8", value: "8px", name: ui.skins.radius.names.r8 },
+    { id: "r12", value: "12px", name: ui.skins.radius.names.r12 },
+    { id: "r16", value: "16px", name: ui.skins.radius.names.r16 },
+  ] as const;
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="8" align="stretch">
+      <Stack gap="2" align="stretch">
+        <Title as={1} size="4xl" weight="bold" id="page-title" data-testid="skins-title">
+          {ui.skins.title}
+        </Title>
+        <Text class="max-w-2xl text-muted-foreground">
+          {ui.skins.intro}
+        </Text>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="skins-skins-title"
+        data-testid="skins-row"
+        data-row="skins"
+      >
+        <Box class="flex flex-wrap items-end justify-between gap-4">
+          <Stack gap="2" align="stretch">
+            <Title as={2} size="2xl" weight="bold" id="skins-skins-title">
+              {ui.skins.skins.title}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {ui.skins.skins.text}
+            </Text>
+          </Stack>
+          <Button variant="outline" size="sm" data-look-reset="skin" data-testid="reset-skins">
+            {ui.skins.skins.reset}
+          </Button>
+        </Box>
+        <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5" data-testid="skins-list">
+          {#each SKINS as s (s.id)}
+            <ListItem class="flex">
+              <ButtonPlain
+                type="button"
+                class={"group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted " +
+                  "aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-2"}
+                aria-pressed={false}
+                data-skin-pick={s.id}
+                data-testid="skin-tile"
+              >
+                <Inline
+                  class="flex flex-col gap-4 rounded p-4 inset-ring inset-ring-border"
+                  data-skin={s.id}
+                  data-testid="skin-preview"
+                >
+                  <Inline class="flex flex-wrap gap-2">
+                    <Inline class="size-6 rounded bg-primary inset-ring inset-ring-border" />
+                    <Inline class="size-6 rounded bg-secondary inset-ring inset-ring-border" />
+                    <Inline class="size-6 rounded bg-accent inset-ring inset-ring-border" />
+                    <Inline class="size-6 rounded bg-muted inset-ring inset-ring-border" />
+                    <Inline class="size-6 rounded bg-foreground inset-ring inset-ring-border" />
+                  </Inline>
+                  <Inline class="flex flex-col gap-2 rounded bg-card p-4 text-card-foreground inset-ring inset-ring-border">
+                    <Inline class="text-sm font-semibold">
+                      {ui.skins.sample.card}
+                    </Inline>
+                    <Inline class="text-xs text-muted-foreground">
+                      {ui.skins.sample.text}
+                    </Inline>
+                    <Inline class={"inline-flex h-8 w-fit items-center rounded bg-primary px-4 text-sm font-medium text-primary-foreground"}>
+                      {ui.skins.sample.button}
+                    </Inline>
+                  </Inline>
+                </Inline>
+                <Inline class="flex items-center justify-between gap-2 px-2 pb-2 text-sm font-medium">
+                  <Inline>
+                    {s.name}
+                  </Inline>
+                  <Inline class="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                    <LucideIcon name="check" size={16} />
+                  </Inline>
+                </Inline>
+              </ButtonPlain>
+            </ListItem>
+          {/each}
+        </List>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="skins-fonts-title"
+        data-testid="skins-row"
+        data-row="fonts"
+      >
+        <Box class="flex flex-wrap items-end justify-between gap-4">
+          <Stack gap="2" align="stretch">
+            <Title as={2} size="2xl" weight="bold" id="skins-fonts-title">
+              {ui.skins.fonts.title}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {ui.skins.fonts.text}
+            </Text>
+          </Stack>
+          <Button variant="outline" size="sm" data-look-reset="font" data-testid="reset-fonts">
+            {ui.skins.fonts.reset}
+          </Button>
+        </Box>
+        <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5" data-testid="fonts-list">
+          {#each FONTS as f (f.id)}
+            <ListItem class="flex">
+              <ButtonPlain
+                type="button"
+                class={"group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted " +
+                  "aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-4"}
+                aria-pressed={false}
+                data-font-pick={f.id}
+                data-font-family={f.family}
+                data-testid="font-tile"
+              >
+                <Inline class="text-3xl">
+                  {ui.skins.fonts.specimen}
+                </Inline>
+                <Inline class="text-sm text-muted-foreground">
+                  {ui.skins.fonts.pangram}
+                </Inline>
+                <Inline class="flex items-center justify-between gap-2  text-sm font-medium">
+                  <Inline>
+                    {f.name}
+                  </Inline>
+                  <Inline class="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                    <LucideIcon name="check" size={16} />
+                  </Inline>
+                </Inline>
+              </ButtonPlain>
+            </ListItem>
+          {/each}
+        </List>
+      </Stack>
+      <Stack
+        gap="4"
+        align="stretch"
+        role="group"
+        aria-labelledby="skins-radius-title"
+        data-testid="skins-row"
+        data-row="radius"
+      >
+        <Box class="flex flex-wrap items-end justify-between gap-4">
+          <Stack gap="2" align="stretch">
+            <Title as={2} size="2xl" weight="bold" id="skins-radius-title">
+              {ui.skins.radius.title}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {ui.skins.radius.text}
+            </Text>
+          </Stack>
+          <Button variant="outline" size="sm" data-look-reset="radius" data-testid="reset-radius">
+            {ui.skins.radius.reset}
+          </Button>
+        </Box>
+        <List tag="ul" class="grid gap-4 grid-cols-2 sm:grid-cols-5" data-testid="radius-list">
+          {#each RADII as r (r.id)}
+            <ListItem class="flex">
+              <ButtonPlain
+                type="button"
+                class={"group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted " +
+                  "aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-4"}
+                aria-pressed={false}
+                data-radius-pick={r.id}
+                data-radius={r.value}
+                data-testid="radius-tile"
+              >
+                <Inline class="block h-16 w-full rounded bg-primary" data-radius-sample="" />
+                <Inline class="flex items-center justify-between gap-2  text-sm font-medium">
+                  <Inline>
+                    {r.name}
+                  </Inline>
+                  <Inline class="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                    <LucideIcon name="check" size={16} />
+                  </Inline>
+                </Inline>
+              </ButtonPlain>
+            </ListItem>
+          {/each}
+        </List>
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/SkinsScreen/NotfoundPage.svelte b/apps/host-svelte/xgen/screens/SkinsScreen/NotfoundPage.svelte
new file mode 100644
index 0000000..a6029ca
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/SkinsScreen/NotfoundPage.svelte
@@ -0,0 +1,23 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/skins.json -->
+<!-- The notfound page of SkinsScreen. -->
+<script lang="ts">
+  import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<Block tag="section" aria-labelledby="page-title" data-testid="page">
+  <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+    <Stack gap="4" align="stretch">
+      <Title as={1} size="4xl" weight="bold" id="page-title">
+        {ui.site.notFound.title}
+      </Title>
+      <Group>
+        <Button variant="default" size="default" href="#/">
+          {ui.skins.back}
+        </Button>
+      </Group>
+    </Stack>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/SkinsScreen/ScreenHeader.svelte b/apps/host-svelte/xgen/screens/SkinsScreen/ScreenHeader.svelte
new file mode 100644
index 0000000..18568c2
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/SkinsScreen/ScreenHeader.svelte
@@ -0,0 +1,37 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/skins.json -->
+<!-- The ScreenHeader part of SkinsScreen: its own file, so each file of the screen opens on one Block. -->
+<script lang="ts">
+  import { Block, Button, Container, Link, LinkPlain, NavBlock } from "@ui8kit/svelte-ui";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+
+  const actions = { toggleTheme };
+</script>
+
+<Block tag="header" class="border-b border-border">
+  <LinkPlain
+    href="#main-content"
+    class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+      "focus:px-4 focus:py-2 focus:text-sm focus:shadow"}
+    data-testid="skip-link"
+  >
+    {ui.site.header.skip}
+  </LinkPlain>
+  <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+    <Link href="#/" variant="default" class="text-lg font-bold" data-testid="brand">
+      {ui.skins.title}
+    </Link>
+    <NavBlock label={ui.skins.navLabel} class="flex flex-wrap items-center gap-4">
+      <Link href="/catalog/" variant="default" class="text-sm font-medium" data-testid="catalog-link">
+        {ui.catalog.title}
+      </Link>
+      <Link href="/blocks/" variant="default" class="text-sm font-medium" data-testid="gallery-link">
+        {ui.blocks.title}
+      </Link>
+      <Button variant="outline" size="sm" data-testid="theme-toggle" onclick={() => actions.toggleTheme()}>
+        {ui.theme.toggle}
+      </Button>
+    </NavBlock>
+  </Container>
+</Block>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen.svelte
new file mode 100644
index 0000000..4e7ab7c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen.svelte
@@ -0,0 +1,112 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!--
+  Sign-in and account pages: split, centered and minimal sign-in, sign-up, reset, magic link, social first, the
+  sign-up wizard, cards and the profile.
+-->
+<script lang="ts">
+  import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemeAccountPortalScreen/HomePage.svelte";
+  import StartPage from "./ThemeAccountPortalScreen/StartPage.svelte";
+  import SignupPage from "./ThemeAccountPortalScreen/SignupPage.svelte";
+  import WelcomePage from "./ThemeAccountPortalScreen/WelcomePage.svelte";
+  import ResetPage from "./ThemeAccountPortalScreen/ResetPage.svelte";
+  import MagicPage from "./ThemeAccountPortalScreen/MagicPage.svelte";
+  import MinimalPage from "./ThemeAccountPortalScreen/MinimalPage.svelte";
+  import OptionsPage from "./ThemeAccountPortalScreen/OptionsPage.svelte";
+  import JoinPage from "./ThemeAccountPortalScreen/JoinPage.svelte";
+  import CardsPage from "./ThemeAccountPortalScreen/CardsPage.svelte";
+  import ProfilePage from "./ThemeAccountPortalScreen/ProfilePage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemeAccountPortalScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const ROUTES = [
+    {"path":"","area":"home"},
+    {"path":"start","area":"start"},
+    {"path":"signup","area":"signup"},
+    {"path":"welcome","area":"welcome"},
+    {"path":"reset","area":"reset"},
+    {"path":"magic","area":"magic"},
+    {"path":"minimal","area":"minimal"},
+    {"path":"options","area":"options"},
+    {"path":"join","area":"join"},
+    {"path":"cards","area":"cards"},
+    {"path":"profile","area":"profile"},
+  ] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "start"}
+    <StartPage />
+  {:else if route.area === "signup"}
+    <SignupPage />
+  {:else if route.area === "welcome"}
+    <WelcomePage />
+  {:else if route.area === "reset"}
+    <ResetPage />
+  {:else if route.area === "magic"}
+    <MagicPage />
+  {:else if route.area === "minimal"}
+    <MinimalPage />
+  {:else if route.area === "options"}
+    <OptionsPage />
+  {:else if route.area === "join"}
+    <JoinPage />
+  {:else if route.area === "cards"}
+    <CardsPage />
+  {:else if route.area === "profile"}
+    <ProfilePage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<SitemapFooter
+  id="after-sitemap"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.vibe.sitemap.tagline}
+  copyright={ui.vibe.sitemap.copyright}
+  groups={sitemap}
+  signup={{
+    title: ui.vibe.sitemap.signupTitle,
+    label: ui.vibe.sitemap.signupLabel,
+    submit: ui.vibe.sitemap.signupSubmit,
+    mode: "none",
+  }}
+  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+  layout="row"
+  density="default"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/CardsPage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/CardsPage.svelte
new file mode 100644
index 0000000..228b3a6
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/CardsPage.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The cards page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { AuthCard, PageIntro, tpl, uniqLabel } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<PageIntro
+  id="cards-pagehead"
+  title={ui.pages.accountPortal.cards.title}
+  text={ui.pages.accountPortal.cards.text}
+  cta={ui.pages.accountPortal.cards.cta}
+  href="#/profile"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<AuthCard
+  id="cards-auth-1"
+  title={ui.auth.signin.title}
+  text={ui.auth.signin.text}
+  submit={ui.auth.signin.submit}
+  switchText={ui.auth.signin.switchText}
+  switchLink={ui.auth.signin.switchLink}
+  switchHref="#/"
+  labels={ui.auth.labels}
+  mode="signin"
+  layout="card"
+  social="none"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))}
+/>
+<AuthCard
+  id="cards-auth-2"
+  title={ui.auth.signin.title}
+  text={ui.auth.signin.text}
+  submit={ui.auth.signin.submit}
+  switchText={ui.auth.signin.switchText}
+  switchLink={ui.auth.signin.switchLink}
+  switchHref="#/"
+  labels={ui.auth.labels}
+  mode="signin"
+  layout="card"
+  social="show"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))}
+/>
+<AuthCard
+  id="cards-auth-3"
+  title={ui.auth.signup.title}
+  text={ui.auth.signup.text}
+  submit={ui.auth.signup.submit}
+  switchText={ui.auth.signup.switchText}
+  switchLink={ui.auth.signup.switchLink}
+  switchHref="#/"
+  labels={ui.auth.labels}
+  mode="signup"
+  layout="plain"
+  social="show"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/HomePage.svelte
new file mode 100644
index 0000000..e01c9b7
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/HomePage.svelte
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The home page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { AuthLayout } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<AuthLayout
+  id="home-authpage"
+  title={ui.pages.accountPortal.home.title}
+  text={ui.pages.accountPortal.home.text}
+  submit={ui.pages.accountPortal.home.cta}
+  switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+  labels={ui.auth.labels}
+  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+  layout="split"
+  side="end"
+  mode="signin"
+  social="none"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/JoinPage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/JoinPage.svelte
new file mode 100644
index 0000000..2c7b8ce
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/JoinPage.svelte
@@ -0,0 +1,52 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The join page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { PageIntro, SignupWizard, tpl, uniqLabel, type WizardStep } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+  const WIZARD_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "icon": "metadata.icon.value",
+    "fieldA": "metadata.fieldA.value",
+    "fieldB": "metadata.fieldB.value",
+  } as const;
+
+  const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="join-pagehead"
+  title={ui.pages.accountPortal.join.title}
+  text={ui.pages.accountPortal.join.text}
+  cta={ui.pages.accountPortal.join.cta}
+  href="#/cards"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<SignupWizard
+  id="join-wizard-1"
+  title={ui.vibe.wizard.title}
+  steps={wizard}
+  labels={ui.vibe.wizard.labels}
+  current={1}
+  progress="bar"
+  layout="card"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))}
+/>
+<SignupWizard
+  id="join-wizard-2"
+  title={ui.vibe.wizard.title}
+  steps={wizard}
+  labels={ui.vibe.wizard.labels}
+  current={1}
+  progress="list"
+  layout="card"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/MagicPage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/MagicPage.svelte
new file mode 100644
index 0000000..77330db
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/MagicPage.svelte
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The magic page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { AuthLayout } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<AuthLayout
+  id="magic-authpage"
+  title={ui.pages.accountPortal.magic.title}
+  text={ui.pages.accountPortal.magic.text}
+  submit={ui.pages.accountPortal.magic.cta}
+  switchTo={{ text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink, href: "#/" }}
+  labels={ui.auth.labels}
+  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+  layout="minimal"
+  side="end"
+  mode="magic"
+  social="none"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/MinimalPage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/MinimalPage.svelte
new file mode 100644
index 0000000..e937bd8
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/MinimalPage.svelte
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The minimal page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { AuthLayout } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<AuthLayout
+  id="minimal-authpage"
+  title={ui.pages.accountPortal.minimal.title}
+  text={ui.pages.accountPortal.minimal.text}
+  submit={ui.pages.accountPortal.minimal.cta}
+  switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+  labels={ui.auth.labels}
+  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+  layout="minimal"
+  side="end"
+  mode="signin"
+  social="none"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/OptionsPage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/OptionsPage.svelte
new file mode 100644
index 0000000..f931c63
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/OptionsPage.svelte
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The options page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { AuthLayout } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<AuthLayout
+  id="options-authpage"
+  title={ui.pages.accountPortal.options.title}
+  text={ui.pages.accountPortal.options.text}
+  submit={ui.pages.accountPortal.options.cta}
+  switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+  labels={ui.auth.labels}
+  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+  layout="split"
+  side="end"
+  mode="signin"
+  social="show"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/ProfilePage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/ProfilePage.svelte
new file mode 100644
index 0000000..2357e7d
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/ProfilePage.svelte
@@ -0,0 +1,41 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The profile page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { PageIntro, ProfileForm, tpl, uniqLabel } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<PageIntro
+  id="profile-pagehead"
+  title={ui.pages.accountPortal.profile.title}
+  text={ui.pages.accountPortal.profile.text}
+  cta={ui.pages.accountPortal.profile.cta}
+  href="#/"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<ProfileForm
+  id="profile-profile-1"
+  title={ui.account.profile.title}
+  text={ui.account.profile.text}
+  labels={ui.account.profile.labels}
+  layout="split"
+  avatar="show"
+  prefs="show"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))}
+/>
+<ProfileForm
+  id="profile-profile-2"
+  title={ui.account.profile.title}
+  text={ui.account.profile.text}
+  labels={ui.account.profile.labels}
+  layout="stacked"
+  avatar="show"
+  prefs="show"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/ResetPage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/ResetPage.svelte
new file mode 100644
index 0000000..0d04695
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/ResetPage.svelte
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The reset page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { AuthLayout } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<AuthLayout
+  id="reset-authpage"
+  title={ui.pages.accountPortal.reset.title}
+  text={ui.pages.accountPortal.reset.text}
+  submit={ui.pages.accountPortal.reset.cta}
+  switchTo={{ text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink, href: "#/" }}
+  labels={ui.auth.labels}
+  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+  layout="centered"
+  side="end"
+  mode="reset"
+  social="none"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/SignupPage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/SignupPage.svelte
new file mode 100644
index 0000000..cd8efa4
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/SignupPage.svelte
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The signup page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { AuthLayout } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<AuthLayout
+  id="signup-authpage"
+  title={ui.pages.accountPortal.signup.title}
+  text={ui.pages.accountPortal.signup.text}
+  submit={ui.pages.accountPortal.signup.cta}
+  switchTo={{ text: ui.auth.signup.switchText, link: ui.auth.signup.switchLink, href: "#/" }}
+  labels={ui.auth.labels}
+  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+  layout="split"
+  side="end"
+  mode="signup"
+  social="none"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/StartPage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/StartPage.svelte
new file mode 100644
index 0000000..7447b8f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/StartPage.svelte
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The start page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { AuthLayout } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<AuthLayout
+  id="start-authpage"
+  title={ui.pages.accountPortal.start.title}
+  text={ui.pages.accountPortal.start.text}
+  submit={ui.pages.accountPortal.start.cta}
+  switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+  labels={ui.auth.labels}
+  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+  layout="split"
+  side="start"
+  mode="signin"
+  social="none"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/WelcomePage.svelte b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/WelcomePage.svelte
new file mode 100644
index 0000000..dddf966
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeAccountPortalScreen/WelcomePage.svelte
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The welcome page of ThemeAccountPortalScreen. -->
+<script lang="ts">
+  import { AuthLayout } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<AuthLayout
+  id="welcome-authpage"
+  title={ui.pages.accountPortal.welcome.title}
+  text={ui.pages.accountPortal.welcome.text}
+  submit={ui.pages.accountPortal.welcome.cta}
+  switchTo={{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" }}
+  labels={ui.auth.labels}
+  visual={{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }}
+  layout="centered"
+  side="end"
+  mode="signin"
+  social="first"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen.svelte
new file mode 100644
index 0000000..6d91e41
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen.svelte
@@ -0,0 +1,104 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!--
+  A shop: home with categories and products, the catalog, offers, a product page with details and reviews, the
+  cart, the checkout, delivery and pickup, and the orders.
+-->
+<script lang="ts">
+  import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemeCommerceShopScreen/HomePage.svelte";
+  import CatalogPage from "./ThemeCommerceShopScreen/CatalogPage.svelte";
+  import BrowsePage from "./ThemeCommerceShopScreen/BrowsePage.svelte";
+  import OffersPage from "./ThemeCommerceShopScreen/OffersPage.svelte";
+  import ProductPage from "./ThemeCommerceShopScreen/ProductPage.svelte";
+  import CartPage from "./ThemeCommerceShopScreen/CartPage.svelte";
+  import CheckoutPage from "./ThemeCommerceShopScreen/CheckoutPage.svelte";
+  import DeliveryPage from "./ThemeCommerceShopScreen/DeliveryPage.svelte";
+  import OrdersPage from "./ThemeCommerceShopScreen/OrdersPage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemeCommerceShopScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const ROUTES = [
+    {"path":"","area":"home"},
+    {"path":"catalog","area":"catalog"},
+    {"path":"browse","area":"browse"},
+    {"path":"offers","area":"offers"},
+    {"path":"product","area":"product"},
+    {"path":"cart","area":"cart"},
+    {"path":"checkout","area":"checkout"},
+    {"path":"delivery","area":"delivery"},
+    {"path":"orders","area":"orders"},
+  ] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "catalog"}
+    <CatalogPage />
+  {:else if route.area === "browse"}
+    <BrowsePage />
+  {:else if route.area === "offers"}
+    <OffersPage />
+  {:else if route.area === "product"}
+    <ProductPage />
+  {:else if route.area === "cart"}
+    <CartPage />
+  {:else if route.area === "checkout"}
+    <CheckoutPage />
+  {:else if route.area === "delivery"}
+    <DeliveryPage />
+  {:else if route.area === "orders"}
+    <OrdersPage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<SitemapFooter
+  id="after-sitemap"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.vibe.sitemap.tagline}
+  copyright={ui.vibe.sitemap.copyright}
+  groups={sitemap}
+  signup={{
+    title: ui.vibe.sitemap.signupTitle,
+    label: ui.vibe.sitemap.signupLabel,
+    submit: ui.vibe.sitemap.signupSubmit,
+    mode: "none",
+  }}
+  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+  layout="columns"
+  density="default"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/BrowsePage.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/BrowsePage.svelte
new file mode 100644
index 0000000..46017eb
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/BrowsePage.svelte
@@ -0,0 +1,106 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The browse page of ThemeCommerceShopScreen. -->
+<script lang="ts">
+  import {
+    CategoryNav,
+    PageIntro,
+    ProductGrid,
+    tpl,
+    uniqLabel,
+    type Category,
+    type Product,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="browse-pagehead"
+  title={ui.pages.commerceShop.browse.title}
+  text={ui.pages.commerceShop.browse.text}
+  cta={ui.pages.commerceShop.browse.cta}
+  href="#/offers"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<CategoryNav
+  label={ui.commerce.nav.label}
+  categories={categories}
+  current="category-all"
+  tools={ui.commerce.tools}
+  layout="bar"
+  count="show"
+  icon="show"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))}
+/>
+<ProductGrid
+  id="browse-products-2"
+  title={ui.commerce.products.title}
+  products={products}
+  labels={ui.commerce.productLabels}
+  badges={ui.commerce.badges}
+  layout="grid"
+  cols="1-3"
+  ratio="4/3"
+  rating="show"
+  action="none"
+  tone="muted"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))}
+/>
+<ProductGrid
+  id="browse-products-3"
+  title={ui.commerce.products.title}
+  products={products}
+  labels={ui.commerce.productLabels}
+  badges={ui.commerce.badges}
+  layout="grid"
+  cols="1-3"
+  ratio="3/4"
+  rating="show"
+  action="button"
+  tone="default"
+  density="roomy"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))}
+/>
+<ProductGrid
+  id="browse-products-4"
+  title={ui.commerce.products.title}
+  products={products}
+  labels={ui.commerce.productLabels}
+  badges={ui.commerce.badges}
+  layout="list"
+  cols="1-3"
+  ratio="4/3"
+  rating="show"
+  action="button"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/CartPage.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/CartPage.svelte
new file mode 100644
index 0000000..da2aafa
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/CartPage.svelte
@@ -0,0 +1,94 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The cart page of ThemeCommerceShopScreen. -->
+<script lang="ts">
+  import {
+    CartList,
+    OrderSummary,
+    PageIntro,
+    ShoppingCart,
+    tpl,
+    uniqLabel,
+    type CartLine,
+    type Promo,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+  import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+  const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+  const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="cart-pagehead"
+  title={ui.pages.commerceShop.cart.title}
+  text={ui.pages.commerceShop.cart.text}
+  cta={ui.pages.commerceShop.cart.cta}
+  href="#/checkout"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<ShoppingCart
+  id="cart-cartpage"
+  title={ui.commerce.cartPage.title}
+  lines={cart}
+  rows={summary}
+  promos={promos}
+  labels={ui.commerce.cart}
+  totals={ui.commerce.totals}
+  actions={ui.commerce.cartPage}
+  layout="split"
+  promo="show"
+  progress="show"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))}
+/>
+<CartList
+  id="cart-cart"
+  title={ui.commerce.cart.title}
+  lines={cart}
+  empty={ui.empty.cart}
+  labels={ui.commerce.cart}
+  layout="table"
+  media="image"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))}
+/>
+<OrderSummary
+  id="cart-summary"
+  title={ui.commerce.summary.title}
+  rows={summary}
+  empty={ui.empty.summary}
+  labels={ui.commerce.summary}
+  layout="card"
+  cta="show"
+  note="show"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/CatalogPage.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/CatalogPage.svelte
new file mode 100644
index 0000000..c62a2e0
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/CatalogPage.svelte
@@ -0,0 +1,97 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The catalog page of ThemeCommerceShopScreen. -->
+<script lang="ts">
+  import {
+    CategoryNav,
+    PageTrail,
+    ProductGrid,
+    tpl,
+    uniqLabel,
+    type Category,
+    type NavLink,
+    type Product,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+  import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+</script>
+
+<PageTrail
+  id="catalog-pagetrail"
+  title={ui.marketing.pageTrail.title}
+  lead={ui.marketing.pageTrail.lead}
+  badge={ui.marketing.pageTrail.badge}
+  label={ui.marketing.pageTrail.label}
+  crumbs={crumbs}
+  extras={{
+    value: ui.marketing.pageTrail.value,
+    caption: ui.marketing.pageTrail.caption,
+    note: ui.marketing.pageTrail.note,
+    icon: "package",
+    facts: stats,
+  }}
+  aside="figure"
+  tone="default"
+/>
+<CategoryNav
+  label={ui.commerce.nav.label}
+  categories={categories}
+  current="category-all"
+  tools={ui.commerce.tools}
+  layout="sidebar"
+  count="show"
+  icon="show"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))}
+/>
+<ProductGrid
+  id="catalog-products"
+  title={ui.commerce.products.title}
+  products={products}
+  labels={ui.commerce.productLabels}
+  badges={ui.commerce.badges}
+  layout="grid"
+  cols="1-4"
+  ratio="1/1"
+  rating="hide"
+  action="button"
+  tone="default"
+  density="compact"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.svelte
new file mode 100644
index 0000000..1a314ac
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.svelte
@@ -0,0 +1,75 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The checkout page of ThemeCommerceShopScreen. -->
+<script lang="ts">
+  import {
+    CheckoutForm,
+    PageIntro,
+    tpl,
+    uniqLabel,
+    type CartLine,
+    type Day,
+    type Payment,
+    type Promo,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+  import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+  import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+  import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+  const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+  const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+  const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+  const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+  const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+  const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="checkout-pagehead"
+  title={ui.pages.commerceShop.checkout.title}
+  text={ui.pages.commerceShop.checkout.text}
+  cta={ui.pages.commerceShop.checkout.cta}
+  href="#/delivery"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<CheckoutForm
+  id="checkout-checkout"
+  title={ui.commerce.checkout.title}
+  days={days}
+  payments={payments}
+  lines={cart}
+  rows={summary}
+  promos={promos}
+  labels={ui.commerce.checkout}
+  totals={ui.commerce.totals}
+  layout="numbered"
+  summary="aside"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.svelte
new file mode 100644
index 0000000..f4add6e
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.svelte
@@ -0,0 +1,114 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The delivery page of ThemeCommerceShopScreen. -->
+<script lang="ts">
+  import {
+    DeliveryInfo,
+    PageIntro,
+    SlotBoard,
+    StoreLocations,
+    ZoneTable,
+    tpl,
+    uniqLabel,
+    type Day,
+    type Feature,
+    type Store,
+    type Zone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+  import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+  import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+  import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+  const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+  const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const ZONES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "area": "metadata.area.value",
+    "price": "metadata.price.value",
+    "freeFrom": "metadata.freeFrom.value",
+    "minOrder": "metadata.minOrder.value",
+    "time": "metadata.time.value",
+    "express": "metadata.express.value",
+    "currency": "metadata.currency.value",
+  } as const;
+  const STORES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "kind": "metadata.store_kind.value",
+    "address": "metadata.address.value",
+    "hours": "metadata.hours.value",
+    "phone": "metadata.phone.value",
+    "note": "metadata.note.value",
+    "services": "metadata.services.value",
+  } as const;
+
+  const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+  const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+  const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+  const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="delivery-pagehead"
+  title={ui.pages.commerceShop.delivery.title}
+  text={ui.pages.commerceShop.delivery.text}
+  cta={ui.pages.commerceShop.delivery.cta}
+  href="#/orders"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<DeliveryInfo
+  id="delivery-delivery"
+  title={ui.commerce.delivery.title}
+  lead={ui.commerce.delivery.lead}
+  facts={deliveryfacts}
+  zones={zones}
+  labels={ui.commerce.delivery}
+  layout="full"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))}
+/>
+<ZoneTable
+  id="delivery-zones"
+  title={ui.commerce.zones.title}
+  lead={ui.commerce.zones.lead}
+  zones={zones}
+  empty={ui.empty.zones}
+  labels={ui.commerce.zones}
+  layout="table"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))}
+/>
+<SlotBoard
+  id="delivery-slots"
+  title={ui.commerce.slots.title}
+  lead={ui.commerce.slots.lead}
+  days={days}
+  empty={ui.empty.days}
+  zone={zones.find((i) => i.id === "zone-central")!}
+  labels={ui.commerce.slots}
+  layout="split"
+  item="card"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))}
+/>
+<StoreLocations
+  id="delivery-locations"
+  title={ui.commerce.stores.title}
+  lead={ui.commerce.stores.lead}
+  stores={stores}
+  empty={ui.empty.stores}
+  kinds={ui.commerce.stores.kinds}
+  labels={ui.commerce.stores}
+  layout="cards"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/HomePage.svelte
new file mode 100644
index 0000000..741f9f2
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/HomePage.svelte
@@ -0,0 +1,152 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The home page of ThemeCommerceShopScreen. -->
+<script lang="ts">
+  import {
+    CategoryNav,
+    CtaBand,
+    HeroClassic,
+    NewsletterForm,
+    ProductGrid,
+    ReviewList,
+    tpl,
+    uniqLabel,
+    type Category,
+    type CodeLine,
+    type Product,
+    type Review,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+  import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const REVIEWS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "author": "author_id|author",
+    "rating": "metadata.rating.value",
+    "text": "metadata.text.value",
+    "date": "metadata.date.value|date",
+  } as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="home-hero"
+  title={ui.pages.commerceShop.home.title}
+  text={ui.pages.commerceShop.home.text}
+  actions={{
+    cta: ui.pages.commerceShop.home.cta,
+    href: "#/catalog",
+    secondary: ui.cases.shop.hero.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "image",
+    side: "start",
+  }}
+  layout="split"
+  scale="default"
+  tone="muted"
+  density="roomy"
+/>
+<CategoryNav
+  label={ui.commerce.nav.label}
+  categories={categories}
+  current="category-all"
+  tools={ui.commerce.tools}
+  layout="chips"
+  count="show"
+  icon="show"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))}
+/>
+<ProductGrid
+  id="home-products"
+  title={ui.commerce.products.title}
+  products={products}
+  labels={ui.commerce.productLabels}
+  badges={ui.commerce.badges}
+  layout="grid"
+  cols="1-4"
+  ratio="1/1"
+  rating="show"
+  action="button"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))}
+/>
+<ReviewList
+  id="home-reviews"
+  title={ui.commerce.reviews.title}
+  reviews={reviews}
+  labels={ui.commerce.reviewLabels}
+  layout="grid"
+  item="card"
+  avatar="none"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))}
+/>
+<NewsletterForm
+  id="home-newsletter"
+  title={ui.promo.newsletter.title}
+  text={ui.promo.newsletter.text}
+  label={ui.promo.newsletter.label}
+  submit={ui.promo.newsletter.submit}
+  consent={ui.promo.newsletter.consent}
+  layout="stacked"
+  terms="hide"
+  tone="default"
+  align="center"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+/>
+<CtaBand
+  id="home-cta"
+  title={ui.cases.shop.cta.title}
+  text={ui.cases.shop.cta.text}
+  actions={{
+    cta: ui.cases.shop.cta.cta,
+    href: "#/pricing",
+    secondary: ui.cases.shop.cta.secondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="split"
+  tone="default"
+  proof="none"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/OffersPage.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/OffersPage.svelte
new file mode 100644
index 0000000..80eb85c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/OffersPage.svelte
@@ -0,0 +1,114 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The offers page of ThemeCommerceShopScreen. -->
+<script lang="ts">
+  import {
+    CartDrawer,
+    ProductGrid,
+    StoreHero,
+    UspStrip,
+    tpl,
+    uniqLabel,
+    type CartLine,
+    type Feature,
+    type Product,
+    type SummaryRow,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+  import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+  import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+  import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const CART_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "variant": "metadata.variant.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "qty": "metadata.qty.value",
+  } as const;
+  const SUMMARY_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "amount": "metadata.amount.value",
+    "currency": "metadata.currency.value",
+    "strong": "metadata.strong.value",
+  } as const;
+
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+  const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+  const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+</script>
+
+<StoreHero
+  id="offers-storehero"
+  title={ui.commerce.storeHero.title}
+  lead={ui.commerce.storeHero.lead}
+  badge={ui.commerce.storeHero.badge}
+  perks={perks}
+  card={ui.commerce.storeHero.card}
+  actions={{
+    mode: "two",
+    cta: ui.commerce.storeHero.cta,
+    href: "#/catalog",
+    secondary: ui.commerce.storeHero.secondary,
+    secondaryHref: "#/delivery",
+  }}
+  layout="overlay"
+  mediaSide="end"
+  tone="default"
+/>
+<UspStrip
+  id="offers-usp"
+  perks={perks}
+  empty={ui.empty.perks}
+  layout="strip"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))}
+/>
+<ProductGrid
+  id="offers-products"
+  title={ui.commerce.products.title}
+  products={products}
+  labels={ui.commerce.productLabels}
+  badges={ui.commerce.badges}
+  layout="rail"
+  cols="1-3"
+  ratio="1/1"
+  rating="hide"
+  action="button"
+  tone="default"
+  density="compact"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))}
+/>
+<CartDrawer
+  id="offers-cartdrawer"
+  lines={cart}
+  rows={summary}
+  labels={ui.commerce.cart}
+  drawer={ui.commerce.drawer}
+  state="filled"
+  media="image"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/OrdersPage.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/OrdersPage.svelte
new file mode 100644
index 0000000..4b0f21c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/OrdersPage.svelte
@@ -0,0 +1,59 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The orders page of ThemeCommerceShopScreen. -->
+<script lang="ts">
+  import { OrderTable, PageIntro, tpl, uniqLabel, type Order } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+  const ORDERS_FIELDS = {
+    "id": "id",
+    "number": "title",
+    "date": "metadata.date.value|date",
+    "total": "metadata.total.value",
+    "currency": "metadata.currency.value",
+    "status": "metadata.order_status.value",
+    "items": "metadata.items.value",
+  } as const;
+
+  const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="orders-pagehead"
+  title={ui.pages.commerceShop.orders.title}
+  text={ui.pages.commerceShop.orders.text}
+  cta={ui.pages.commerceShop.orders.cta}
+  href="#/"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<OrderTable
+  id="orders-orders-1"
+  title={ui.commerce.orders.title}
+  orders={orders}
+  empty={ui.empty.orders}
+  statuses={ui.status}
+  labels={ui.commerce.orders}
+  layout="table"
+  pager="show"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))}
+/>
+<OrderTable
+  id="orders-orders-2"
+  title={ui.commerce.orders.title}
+  orders={orders}
+  empty={ui.empty.orders}
+  statuses={ui.status}
+  labels={ui.commerce.orders}
+  layout="cards"
+  pager="show"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/ProductPage.svelte b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/ProductPage.svelte
new file mode 100644
index 0000000..6c2b51f
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeCommerceShopScreen/ProductPage.svelte
@@ -0,0 +1,106 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The product page of ThemeCommerceShopScreen. -->
+<script lang="ts">
+  import {
+    ProductDetail,
+    ProductGrid,
+    ProductInfo,
+    ReviewList,
+    tpl,
+    uniqLabel,
+    type Detail,
+    type Product,
+    type Review,
+    type Spec,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+  import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+  import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+  import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+  const PRODUCTS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "summary": "metadata.summary.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "rating": "metadata.rating.value",
+    "reviews": "metadata.reviews.value",
+    "badge": "metadata.badge.value",
+    "category": "terms|term:product_category",
+    "inStock": "metadata.inStock.value",
+    "compareAt": "metadata.compare_at.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const REVIEWS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "author": "author_id|author",
+    "rating": "metadata.rating.value",
+    "text": "metadata.text.value",
+    "date": "metadata.date.value|date",
+  } as const;
+  const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+  const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+  const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+  const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+  const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+  const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+</script>
+
+<ProductDetail
+  id="product-product"
+  product={products.find((i) => i.id === "product-lamp")!}
+  labels={ui.commerce.detail}
+  badges={ui.commerce.badges}
+  layout="split"
+  mediaSide="start"
+  thumbs="below"
+  buy="full"
+  tone="default"
+  density="default"
+/>
+<ProductInfo
+  id="product-productinfo"
+  title={ui.commerce.info.title}
+  details={details}
+  specs={specs}
+  labels={ui.commerce.info}
+  layout="split"
+  expand="first"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))}
+/>
+<ReviewList
+  id="product-reviews"
+  title={ui.commerce.reviews.title}
+  reviews={reviews}
+  labels={ui.commerce.reviewLabels}
+  layout="list"
+  item="card"
+  avatar="none"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))}
+/>
+<ProductGrid
+  id="product-products"
+  title={ui.commerce.products.title}
+  products={products}
+  labels={ui.commerce.productLabels}
+  badges={ui.commerce.badges}
+  layout="grid"
+  cols="1-3"
+  ratio="4/3"
+  rating="show"
+  action="button"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeContentBlogScreen.svelte b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen.svelte
new file mode 100644
index 0000000..e846cb2
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen.svelte
@@ -0,0 +1,96 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!--
+  A blog: a magazine front page, filtered and plain lists, and articles with a table of contents, a single
+  column or no cover.
+-->
+<script lang="ts">
+  import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemeContentBlogScreen/HomePage.svelte";
+  import ArticlesPage from "./ThemeContentBlogScreen/ArticlesPage.svelte";
+  import ArchivePage from "./ThemeContentBlogScreen/ArchivePage.svelte";
+  import PostPage from "./ThemeContentBlogScreen/PostPage.svelte";
+  import StoryPage from "./ThemeContentBlogScreen/StoryPage.svelte";
+  import EssayPage from "./ThemeContentBlogScreen/EssayPage.svelte";
+  import PlainPage from "./ThemeContentBlogScreen/PlainPage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemeContentBlogScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const ROUTES = [
+    {"path":"","area":"home"},
+    {"path":"articles","area":"articles"},
+    {"path":"archive","area":"archive"},
+    {"path":"post","area":"post"},
+    {"path":"story","area":"story"},
+    {"path":"essay","area":"essay"},
+    {"path":"plain","area":"plain"},
+  ] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "articles"}
+    <ArticlesPage />
+  {:else if route.area === "archive"}
+    <ArchivePage />
+  {:else if route.area === "post"}
+    <PostPage />
+  {:else if route.area === "story"}
+    <StoryPage />
+  {:else if route.area === "essay"}
+    <EssayPage />
+  {:else if route.area === "plain"}
+    <PlainPage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<SitemapFooter
+  id="after-sitemap"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.vibe.sitemap.tagline}
+  copyright={ui.vibe.sitemap.copyright}
+  groups={sitemap}
+  signup={{
+    title: ui.vibe.sitemap.signupTitle,
+    label: ui.vibe.sitemap.signupLabel,
+    submit: ui.vibe.sitemap.signupSubmit,
+    mode: "none",
+  }}
+  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+  layout="columns"
+  density="compact"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/ArchivePage.svelte b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/ArchivePage.svelte
new file mode 100644
index 0000000..3c8b747
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/ArchivePage.svelte
@@ -0,0 +1,84 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The archive page of ThemeContentBlogScreen. -->
+<script lang="ts">
+  import { PageIntro, PostGrid, tpl, uniqLabel, type Post, type PostTopic } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="archive-pagehead"
+  title={ui.pages.contentBlog.archive.title}
+  text={ui.pages.contentBlog.archive.text}
+  cta={ui.pages.contentBlog.archive.cta}
+  href="#/post"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<PostGrid
+  id="archive-posts-1"
+  title={ui.content.posts.title}
+  posts={posts}
+  labels={ui.content.labels}
+  filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+  action={{ label: ui.content.posts.action, href: "#/" }}
+  layout="list"
+  cols="1-3"
+  media="image"
+  meta="full"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))}
+/>
+<PostGrid
+  id="archive-posts-2"
+  title={ui.content.posts.title}
+  posts={posts}
+  labels={ui.content.labels}
+  filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+  action={{ label: ui.content.posts.action, href: "#/" }}
+  layout="grid"
+  cols="1-3"
+  media="none"
+  meta="short"
+  tone="muted"
+  density="compact"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))}
+/>
+<PostGrid
+  id="archive-posts-3"
+  title={ui.content.posts.title}
+  posts={posts}
+  labels={ui.content.labels}
+  filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+  action={{ label: ui.content.posts.action, href: "#/" }}
+  layout="grid"
+  cols="1-3"
+  media="none"
+  meta="full"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/ArticlesPage.svelte b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/ArticlesPage.svelte
new file mode 100644
index 0000000..a14d1b6
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/ArticlesPage.svelte
@@ -0,0 +1,69 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The articles page of ThemeContentBlogScreen. -->
+<script lang="ts">
+  import { PageIntro, PostGrid, tpl, uniqLabel, type Post, type PostTopic } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="articles-pagehead"
+  title={ui.pages.contentBlog.articles.title}
+  text={ui.pages.contentBlog.articles.text}
+  cta={ui.pages.contentBlog.articles.cta}
+  href="#/archive"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<PostGrid
+  id="articles-posts-1"
+  title={ui.content.posts.title}
+  posts={posts}
+  labels={ui.content.labels}
+  filter={{ topics, label: ui.vibe.posts.topics, topic: "Design", mode: "topics" }}
+  action={{ label: ui.content.posts.action, href: "#/" }}
+  layout="grid"
+  cols="1-3"
+  media="image"
+  meta="full"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))}
+/>
+<PostGrid
+  id="articles-posts-2"
+  title={ui.content.posts.title}
+  posts={posts}
+  labels={ui.content.labels}
+  filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+  action={{ label: ui.content.posts.action, href: "#/" }}
+  layout="grid"
+  cols="1-2"
+  media="image"
+  meta="full"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/EssayPage.svelte b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/EssayPage.svelte
new file mode 100644
index 0000000..6183ca9
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/EssayPage.svelte
@@ -0,0 +1,70 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The essay page of ThemeContentBlogScreen. -->
+<script lang="ts">
+  import {
+    ArticleBody,
+    NewsletterForm,
+    PostHeader,
+    tpl,
+    uniqLabel,
+    type Post,
+    type Section,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<PostHeader
+  id="essay-postheader"
+  post={posts.find((i) => i.id === "post-static-first")!}
+  labels={ui.content.labels}
+  layout="center"
+  cover="show"
+  meta="full"
+  tone="default"
+/>
+<ArticleBody
+  id="essay-article"
+  title={ui.vibe.article.title}
+  sections={article}
+  empty={ui.empty.sections}
+  tocTitle={ui.vibe.article.toc}
+  layout="column"
+  quotes="show"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+/>
+<NewsletterForm
+  id="essay-newsletter"
+  title={ui.promo.newsletter.title}
+  text={ui.promo.newsletter.text}
+  label={ui.promo.newsletter.label}
+  submit={ui.promo.newsletter.submit}
+  consent={ui.promo.newsletter.consent}
+  layout="inline"
+  terms="hide"
+  tone="default"
+  align="center"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/HomePage.svelte
new file mode 100644
index 0000000..36f4f5d
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/HomePage.svelte
@@ -0,0 +1,91 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The home page of ThemeContentBlogScreen. -->
+<script lang="ts">
+  import {
+    NewsletterForm,
+    PageIntro,
+    PostGrid,
+    PostShowcase,
+    tpl,
+    uniqLabel,
+    type Post,
+    type PostTopic,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="home-pagehead"
+  title={ui.pages.contentBlog.home.title}
+  text={ui.pages.contentBlog.home.text}
+  cta={ui.pages.contentBlog.home.cta}
+  href="#/articles"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<PostGrid
+  id="home-posts"
+  title={ui.content.posts.title}
+  posts={posts}
+  labels={ui.content.labels}
+  filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+  action={{ label: ui.content.posts.action, href: "#/" }}
+  layout="magazine"
+  cols="1-3"
+  media="image"
+  meta="full"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))}
+/>
+<PostShowcase
+  id="home-postshowcase"
+  title={ui.content.postShowcase.title}
+  lead={ui.content.postShowcase.lead}
+  badge={ui.content.postShowcase.badge}
+  posts={posts}
+  empty={ui.empty.posts}
+  labels={ui.content.labels}
+  action={{ label: ui.content.postShowcase.action, href: "#/articles" }}
+  layout="intro"
+  cols="3"
+  mediaSide="start"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))}
+/>
+<NewsletterForm
+  id="home-newsletter"
+  title={ui.promo.newsletter.title}
+  text={ui.promo.newsletter.text}
+  label={ui.promo.newsletter.label}
+  submit={ui.promo.newsletter.submit}
+  consent={ui.promo.newsletter.consent}
+  layout="stacked"
+  terms="hide"
+  tone="default"
+  align="center"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/PlainPage.svelte b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/PlainPage.svelte
new file mode 100644
index 0000000..51d9b1c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/PlainPage.svelte
@@ -0,0 +1,76 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The plain page of ThemeContentBlogScreen. -->
+<script lang="ts">
+  import {
+    ArticleBody,
+    PostGrid,
+    PostHeader,
+    tpl,
+    uniqLabel,
+    type Post,
+    type PostTopic,
+    type Section,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+  import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+  const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+  const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<PostHeader
+  id="plain-postheader"
+  post={posts.find((i) => i.id === "post-static-first")!}
+  labels={ui.content.labels}
+  layout="start"
+  cover="hide"
+  meta="full"
+  tone="default"
+/>
+<ArticleBody
+  id="plain-article"
+  title={ui.vibe.article.title}
+  sections={article}
+  empty={ui.empty.sections}
+  tocTitle={ui.vibe.article.toc}
+  layout="column"
+  quotes="hide"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))}
+/>
+<PostGrid
+  id="plain-posts"
+  title={ui.content.posts.title}
+  posts={posts}
+  labels={ui.content.labels}
+  filter={{ topics, label: ui.vibe.posts.topics, topic: "", mode: "none" }}
+  action={{ label: ui.content.posts.action, href: "#/" }}
+  layout="grid"
+  cols="1-3"
+  media="image"
+  meta="full"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/PostPage.svelte b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/PostPage.svelte
new file mode 100644
index 0000000..7295903
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/PostPage.svelte
@@ -0,0 +1,49 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The post page of ThemeContentBlogScreen. -->
+<script lang="ts">
+  import { ArticleBody, PostHeader, tpl, uniqLabel, type Post, type Section } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<PostHeader
+  id="post-postheader"
+  post={posts.find((i) => i.id === "post-static-first")!}
+  labels={ui.content.labels}
+  layout="start"
+  cover="show"
+  meta="full"
+  tone="default"
+/>
+<ArticleBody
+  id="post-article"
+  title={ui.vibe.article.title}
+  sections={article}
+  empty={ui.empty.sections}
+  tocTitle={ui.vibe.article.toc}
+  layout="toc"
+  quotes="show"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/StoryPage.svelte b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/StoryPage.svelte
new file mode 100644
index 0000000..5926db1
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeContentBlogScreen/StoryPage.svelte
@@ -0,0 +1,73 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The story page of ThemeContentBlogScreen. -->
+<script lang="ts">
+  import {
+    ArticleBody,
+    PostSplit,
+    tpl,
+    uniqLabel,
+    type NavLink,
+    type Post,
+    type Section,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+  import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+  import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+  const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+  const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+  const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+</script>
+
+<PostSplit
+  id="story-postsplit"
+  post={posts.find((i) => i.id === "post-static-first")!}
+  labels={ui.content.postSplit.labels}
+  extras={{
+    role: ui.content.postSplit.role,
+    bio: ui.content.postSplit.bio,
+    views: ui.content.postSplit.views,
+    likes: ui.content.postSplit.likes,
+    tags: posttags,
+    outline,
+  }}
+  layout="split"
+  mediaSide="end"
+  author="card"
+  cover="wide"
+  actions="pair"
+  tone="muted"
+/>
+<ArticleBody
+  id="story-article"
+  title={ui.vibe.article.title}
+  sections={article}
+  empty={ui.empty.sections}
+  tocTitle={ui.vibe.article.toc}
+  layout="column"
+  quotes="show"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen.svelte b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen.svelte
new file mode 100644
index 0000000..56ce586
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen.svelte
@@ -0,0 +1,92 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!--
+  A console: overview with counters, chart and activity, a kanban board, app shells with sidebar, top bar and
+  panes, dashboard shells, navigation, and empty and loading states.
+-->
+<script lang="ts">
+  import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemeDashboardConsoleScreen/HomePage.svelte";
+  import BoardPage from "./ThemeDashboardConsoleScreen/BoardPage.svelte";
+  import WorkspacePage from "./ThemeDashboardConsoleScreen/WorkspacePage.svelte";
+  import ShellsPage from "./ThemeDashboardConsoleScreen/ShellsPage.svelte";
+  import LayoutsPage from "./ThemeDashboardConsoleScreen/LayoutsPage.svelte";
+  import StatesPage from "./ThemeDashboardConsoleScreen/StatesPage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemeDashboardConsoleScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const ROUTES = [
+    {"path":"","area":"home"},
+    {"path":"board","area":"board"},
+    {"path":"workspace","area":"workspace"},
+    {"path":"shells","area":"shells"},
+    {"path":"layouts","area":"layouts"},
+    {"path":"states","area":"states"},
+  ] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "board"}
+    <BoardPage />
+  {:else if route.area === "workspace"}
+    <WorkspacePage />
+  {:else if route.area === "shells"}
+    <ShellsPage />
+  {:else if route.area === "layouts"}
+    <LayoutsPage />
+  {:else if route.area === "states"}
+    <StatesPage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<SitemapFooter
+  id="after-sitemap"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.vibe.sitemap.tagline}
+  copyright={ui.vibe.sitemap.copyright}
+  groups={sitemap}
+  signup={{
+    title: ui.vibe.sitemap.signupTitle,
+    label: ui.vibe.sitemap.signupLabel,
+    submit: ui.vibe.sitemap.signupSubmit,
+    mode: "none",
+  }}
+  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+  layout="columns"
+  density="compact"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.svelte b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.svelte
new file mode 100644
index 0000000..b1a9734
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.svelte
@@ -0,0 +1,54 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The board page of ThemeDashboardConsoleScreen. -->
+<script lang="ts">
+  import { KanbanBoard, PageIntro, tpl, uniqLabel, type BoardCard, type Lane } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+  import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+  const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+  const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+  const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+  const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="board-pagehead"
+  title={ui.pages.dashboardConsole.board.title}
+  text={ui.pages.dashboardConsole.board.text}
+  cta={ui.pages.dashboardConsole.board.cta}
+  href="#/workspace"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<KanbanBoard
+  id="board-kanban-1"
+  title={ui.vibe.kanban.title}
+  lanes={lanes}
+  empty={ui.empty.lanes}
+  cards={cards}
+  countLabel={ui.vibe.kanban.count}
+  card="detail"
+  cols="3"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))}
+/>
+<KanbanBoard
+  id="board-kanban-2"
+  title={ui.vibe.kanban.title}
+  lanes={lanes}
+  empty={ui.empty.lanes}
+  cards={cards}
+  countLabel={ui.vibe.kanban.count}
+  card="detail"
+  cols="2"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/HomePage.svelte
new file mode 100644
index 0000000..d858655
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/HomePage.svelte
@@ -0,0 +1,110 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The home page of ThemeDashboardConsoleScreen. -->
+<script lang="ts">
+  import {
+    ActivityFeed,
+    ChartPanel,
+    DashboardOverview,
+    MetricRow,
+    PageIntro,
+    tpl,
+    uniqLabel,
+    type Event,
+    type Point,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+  import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+  import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+  const METRICS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const ACTIVITY_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "time": "metadata.time.value|ago",
+    "tone": "metadata.tone.value",
+  } as const;
+
+  const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+  const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+  const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="home-pagehead"
+  title={ui.pages.dashboardConsole.home.title}
+  text={ui.pages.dashboardConsole.home.text}
+  cta={ui.pages.dashboardConsole.home.cta}
+  href="#/board"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<DashboardOverview
+  id="home-overview"
+  title={ui.vibe.overview.title}
+  metrics={metrics}
+  chart={{
+    title: ui.dashboard.chart.title,
+    text: ui.dashboard.chart.text,
+    summary: ui.dashboard.chart.summary,
+    series,
+  }}
+  activity={{
+    title: ui.dashboard.activity.title,
+    text: ui.dashboard.activity.text,
+    events: activity,
+  }}
+  layout="split"
+  cols="4"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))}
+/>
+<MetricRow
+  id="home-metrics"
+  title={ui.dashboard.metrics.title}
+  metrics={metrics}
+  empty={ui.empty.metrics}
+  cols="4"
+  item="tile"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))}
+/>
+<ChartPanel
+  id="home-chart"
+  title={ui.dashboard.chart.title}
+  text={ui.dashboard.chart.text}
+  series={series}
+  empty={ui.empty.series}
+  summary={ui.dashboard.chart.summary}
+  percent={ui.dashboard.chart.percent}
+  chart="bars"
+  size="default"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))}
+/>
+<ActivityFeed
+  id="home-activity"
+  title={ui.dashboard.activity.title}
+  text={ui.dashboard.activity.text}
+  events={activity}
+  empty={ui.empty.activity}
+  layout="timeline"
+  density="default"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.svelte b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.svelte
new file mode 100644
index 0000000..393980e
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.svelte
@@ -0,0 +1,140 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The layouts page of ThemeDashboardConsoleScreen. -->
+<script lang="ts">
+  import {
+    BottomNav,
+    ChartPanel,
+    DashboardOverview,
+    MetricRow,
+    PageIntro,
+    SidebarNav,
+    tpl,
+    uniqLabel,
+    type Event,
+    type NavLink,
+    type Point,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+  import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+  import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+  const METRICS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const ACTIVITY_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "time": "metadata.time.value|ago",
+    "tone": "metadata.tone.value",
+  } as const;
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+  const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+  const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+  const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="layouts-pagehead"
+  title={ui.pages.dashboardConsole.layouts.title}
+  text={ui.pages.dashboardConsole.layouts.text}
+  cta={ui.pages.dashboardConsole.layouts.cta}
+  href="#/states"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<SidebarNav
+  label={ui.vibe.sidebar.label}
+  brand={ui.site.header.brand}
+  links={sidenav}
+  current="item-orders"
+  userName={ui.vibe.sidebar.userName}
+  userEmail={ui.vibe.sidebar.userEmail}
+  width="full"
+  user="show"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))}
+/>
+<SidebarNav
+  label={ui.vibe.sidebar.label}
+  brand={ui.site.header.brand}
+  links={sidenav}
+  current="item-orders"
+  userName={ui.vibe.sidebar.userName}
+  userEmail={ui.vibe.sidebar.userEmail}
+  width="compact"
+  user="show"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))}
+/>
+<BottomNav
+  label={ui.vibe.bottom.label}
+  tabs={tabs}
+  current="tab-explore"
+  labels="show"
+  position="static"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))}
+/>
+<MetricRow
+  id="layouts-metrics"
+  title={ui.dashboard.metrics.title}
+  metrics={metrics}
+  empty={ui.empty.metrics}
+  cols="4"
+  item="compact"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))}
+/>
+<ChartPanel
+  id="layouts-chart"
+  title={ui.dashboard.chart.title}
+  text={ui.dashboard.chart.text}
+  series={series}
+  empty={ui.empty.series}
+  summary={ui.dashboard.chart.summary}
+  percent={ui.dashboard.chart.percent}
+  chart="meters"
+  size="default"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))}
+/>
+<DashboardOverview
+  id="layouts-overview"
+  title={ui.vibe.overview.title}
+  metrics={metrics}
+  chart={{
+    title: ui.dashboard.chart.title,
+    text: ui.dashboard.chart.text,
+    summary: ui.dashboard.chart.summary,
+    series,
+  }}
+  activity={{
+    title: ui.dashboard.activity.title,
+    text: ui.dashboard.activity.text,
+    events: activity,
+  }}
+  layout="stacked"
+  cols="4"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.svelte b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.svelte
new file mode 100644
index 0000000..16acd22
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.svelte
@@ -0,0 +1,112 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The shells page of ThemeDashboardConsoleScreen. -->
+<script lang="ts">
+  import { DashboardShell, PageIntro, tpl, uniqLabel, type NavLink } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+  import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+  import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+  const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+  const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="shells-pagehead"
+  title={ui.pages.dashboardConsole.shells.title}
+  text={ui.pages.dashboardConsole.shells.text}
+  cta={ui.pages.dashboardConsole.shells.cta}
+  href="#/layouts"
+  align="start"
+  tone="muted"
+  density="compact"
+/>
+<DashboardShell
+  id="shells-dashshell-1"
+  title={ui.dashboard.shells.title}
+  nav={{
+    label: ui.dashboard.shells.label,
+    brand: ui.site.header.brand,
+    links: sidenav,
+    current: "item-orders",
+    subTitle: ui.dashboard.shells.subTitle,
+    sub: subnav,
+    subCurrent: "subitem-all",
+    search: ui.dashboard.shells.search,
+    shortcut: ui.dashboard.shells.shortcut,
+    expand: ui.dashboard.shells.expand,
+    userName: ui.dashboard.shells.userName,
+    copyright: ui.dashboard.shells.copyright,
+    footerLabel: ui.dashboard.shells.footerLabel,
+    footer: helplinks,
+  }}
+  topbar="full"
+  search="show"
+  sidebar="wide"
+  side="start"
+  footer="none"
+  content="grid"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))}
+/>
+<DashboardShell
+  id="shells-dashshell-2"
+  title={ui.dashboard.shells.title}
+  nav={{
+    label: ui.dashboard.shells.label,
+    brand: ui.site.header.brand,
+    links: sidenav,
+    current: "item-orders",
+    subTitle: ui.dashboard.shells.subTitle,
+    sub: subnav,
+    subCurrent: "subitem-all",
+    search: ui.dashboard.shells.search,
+    shortcut: ui.dashboard.shells.shortcut,
+    expand: ui.dashboard.shells.expand,
+    userName: ui.dashboard.shells.userName,
+    copyright: ui.dashboard.shells.copyright,
+    footerLabel: ui.dashboard.shells.footerLabel,
+    footer: helplinks,
+  }}
+  topbar="inset"
+  search="hide"
+  sidebar="twolevel"
+  side="start"
+  footer="inset"
+  content="list"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))}
+/>
+<DashboardShell
+  id="shells-dashshell-3"
+  title={ui.dashboard.shells.title}
+  nav={{
+    label: ui.dashboard.shells.label,
+    brand: ui.site.header.brand,
+    links: sidenav,
+    current: "item-orders",
+    subTitle: ui.dashboard.shells.subTitle,
+    sub: subnav,
+    subCurrent: "subitem-all",
+    search: ui.dashboard.shells.search,
+    shortcut: ui.dashboard.shells.shortcut,
+    expand: ui.dashboard.shells.expand,
+    userName: ui.dashboard.shells.userName,
+    copyright: ui.dashboard.shells.copyright,
+    footerLabel: ui.dashboard.shells.footerLabel,
+    footer: helplinks,
+  }}
+  topbar="full"
+  search="show"
+  sidebar="wide"
+  side="end"
+  footer="full"
+  content="split"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.svelte b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.svelte
new file mode 100644
index 0000000..77b48fe
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.svelte
@@ -0,0 +1,68 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The states page of ThemeDashboardConsoleScreen. -->
+<script lang="ts">
+  import { EmptyPanel, PageIntro, SkeletonLayout, tpl, uniqLabel, type Line } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+  const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+  const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="states-pagehead"
+  title={ui.pages.dashboardConsole.states.title}
+  text={ui.pages.dashboardConsole.states.text}
+  cta={ui.pages.dashboardConsole.states.cta}
+  href="#/"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<EmptyPanel
+  id="states-empty-1"
+  title={ui.dashboard.empty.tour.title}
+  text={ui.dashboard.empty.tour.text}
+  cta={ui.dashboard.empty.tour.cta}
+  ctaHref="#/"
+  layout="card"
+  actions="button"
+  visual="image"
+  size="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))}
+/>
+<EmptyPanel
+  id="states-empty-2"
+  title={ui.dashboard.empty.orders.title}
+  text={ui.dashboard.empty.orders.text}
+  cta={ui.dashboard.empty.orders.cta}
+  ctaHref="#/"
+  layout="card"
+  actions="button"
+  visual="icon"
+  size="default"
+  icon="shopping-bag"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))}
+/>
+<SkeletonLayout
+  id="states-skeleton-3"
+  title={ui.vibe.skeleton.title}
+  label={ui.vibe.skeleton.label}
+  lines={placeholders}
+  shape="cards"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))}
+/>
+<SkeletonLayout
+  id="states-skeleton-4"
+  title={ui.vibe.skeleton.title}
+  label={ui.vibe.skeleton.label}
+  lines={placeholders}
+  shape="list"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.svelte b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.svelte
new file mode 100644
index 0000000..4f73828
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.svelte
@@ -0,0 +1,136 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The workspace page of ThemeDashboardConsoleScreen. -->
+<script lang="ts">
+  import {
+    AppShell,
+    PageIntro,
+    tpl,
+    uniqLabel,
+    type Event,
+    type NavLink,
+    type Point,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+  import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+  import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+  import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+
+  const METRICS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const ACTIVITY_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "text": "metadata.text.value",
+    "time": "metadata.time.value|ago",
+    "tone": "metadata.tone.value",
+  } as const;
+  const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+  const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+  const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+  const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+  const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="workspace-pagehead"
+  title={ui.pages.dashboardConsole.workspace.title}
+  text={ui.pages.dashboardConsole.workspace.text}
+  cta={ui.pages.dashboardConsole.workspace.cta}
+  href="#/shells"
+  align="start"
+  tone="muted"
+  density="compact"
+/>
+<AppShell
+  id="workspace-shell-1"
+  title={ui.vibe.shell.title}
+  nav={{
+    label: ui.vibe.sidebar.label,
+    brand: ui.site.header.brand,
+    links: sidenav,
+    current: "item-overview",
+  }}
+  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  metrics={metrics}
+  chart={{
+    title: ui.dashboard.chart.title,
+    text: ui.dashboard.chart.text,
+    summary: ui.dashboard.chart.summary,
+    series,
+  }}
+  activity={{
+    title: ui.dashboard.activity.title,
+    text: ui.dashboard.activity.text,
+    events: activity,
+  }}
+  layout="sidebar"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))}
+/>
+<AppShell
+  id="workspace-shell-2"
+  title={ui.vibe.shell.title}
+  nav={{
+    label: ui.vibe.sidebar.label,
+    brand: ui.site.header.brand,
+    links: sidenav,
+    current: "item-overview",
+  }}
+  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  metrics={metrics}
+  chart={{
+    title: ui.dashboard.chart.title,
+    text: ui.dashboard.chart.text,
+    summary: ui.dashboard.chart.summary,
+    series,
+  }}
+  activity={{
+    title: ui.dashboard.activity.title,
+    text: ui.dashboard.activity.text,
+    events: activity,
+  }}
+  layout="top"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))}
+/>
+<AppShell
+  id="workspace-shell-3"
+  title={ui.vibe.shell.title}
+  nav={{
+    label: ui.vibe.sidebar.label,
+    brand: ui.site.header.brand,
+    links: sidenav,
+    current: "item-overview",
+  }}
+  user={{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  metrics={metrics}
+  chart={{
+    title: ui.dashboard.chart.title,
+    text: ui.dashboard.chart.text,
+    summary: ui.dashboard.chart.summary,
+    series,
+  }}
+  activity={{
+    title: ui.dashboard.activity.title,
+    text: ui.dashboard.activity.text,
+    events: activity,
+  }}
+  layout="panes"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen.svelte
new file mode 100644
index 0000000..c79bf66
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen.svelte
@@ -0,0 +1,101 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!--
+  Landing pages of a product: five heroes (screenshot, form, code, display type, backdrop) each followed by
+  proof, features and a call to action, then a company page, a portfolio and a page for teams built from the
+  split blocks.
+-->
+<script lang="ts">
+  import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemeMarketingLandingScreen/HomePage.svelte";
+  import LaunchPage from "./ThemeMarketingLandingScreen/LaunchPage.svelte";
+  import DevelopersPage from "./ThemeMarketingLandingScreen/DevelopersPage.svelte";
+  import StudioPage from "./ThemeMarketingLandingScreen/StudioPage.svelte";
+  import EventsPage from "./ThemeMarketingLandingScreen/EventsPage.svelte";
+  import CompanyPage from "./ThemeMarketingLandingScreen/CompanyPage.svelte";
+  import WorkPage from "./ThemeMarketingLandingScreen/WorkPage.svelte";
+  import TeamsPage from "./ThemeMarketingLandingScreen/TeamsPage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingLandingScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const ROUTES = [
+    {"path":"","area":"home"},
+    {"path":"launch","area":"launch"},
+    {"path":"developers","area":"developers"},
+    {"path":"studio","area":"studio"},
+    {"path":"events","area":"events"},
+    {"path":"company","area":"company"},
+    {"path":"work","area":"work"},
+    {"path":"teams","area":"teams"},
+  ] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "launch"}
+    <LaunchPage />
+  {:else if route.area === "developers"}
+    <DevelopersPage />
+  {:else if route.area === "studio"}
+    <StudioPage />
+  {:else if route.area === "events"}
+    <EventsPage />
+  {:else if route.area === "company"}
+    <CompanyPage />
+  {:else if route.area === "work"}
+    <WorkPage />
+  {:else if route.area === "teams"}
+    <TeamsPage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<SitemapFooter
+  id="after-sitemap"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.vibe.sitemap.tagline}
+  copyright={ui.vibe.sitemap.copyright}
+  groups={sitemap}
+  signup={{
+    title: ui.vibe.sitemap.signupTitle,
+    label: ui.vibe.sitemap.signupLabel,
+    submit: ui.vibe.sitemap.signupSubmit,
+    mode: "none",
+  }}
+  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+  layout="columns"
+  density="default"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.svelte
new file mode 100644
index 0000000..0f45359
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.svelte
@@ -0,0 +1,138 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The company page of ThemeMarketingLandingScreen. -->
+<script lang="ts">
+  import {
+    AboutCompany,
+    JobBoard,
+    MilestoneTimeline,
+    PageIntro,
+    StoryTabs,
+    TeamGrid,
+    tpl,
+    uniqLabel,
+    type Department,
+    type Feature,
+    type Job,
+    type Member,
+    type Milestone,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+  import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+  import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+  import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+  import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+  const MEMBERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "role": "metadata.role.value",
+    "dept": "metadata.dept.value",
+    "location": "metadata.location.value",
+    "bio": "metadata.bio.value",
+    "skills": "metadata.skills.value",
+  } as const;
+  const JOBS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "dept": "metadata.dept.value",
+    "location": "metadata.location.value",
+    "type": "metadata.type.value",
+    "salary": "metadata.salary.value",
+    "posted": "metadata.posted.value|ago-days",
+  } as const;
+  const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+  const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+  const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+  const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+  const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="company-pagehead"
+  title={ui.pages.marketingLanding.company.title}
+  text={ui.pages.marketingLanding.company.text}
+  cta={ui.pages.marketingLanding.company.cta}
+  href="#/work"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<AboutCompany
+  id="company-about"
+  title={ui.company.about.title}
+  lead={ui.company.about.lead}
+  stats={stats}
+  values={values}
+  layout="split"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))}
+/>
+<StoryTabs
+  id="company-storytabs"
+  title={ui.company.storyTabs.title}
+  lead={ui.company.storyTabs.lead}
+  badge={ui.company.storyTabs.badge}
+  steps={milestones}
+  empty={ui.empty.milestones}
+  active="milestone-runtimes"
+  labels={ui.company.storyTabs.labels}
+  layout="years"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))}
+/>
+<MilestoneTimeline
+  id="company-timeline"
+  title={ui.company.timeline.title}
+  lead={ui.company.timeline.lead}
+  milestones={milestones}
+  empty={ui.empty.milestones}
+  layout="split"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))}
+/>
+<TeamGrid
+  id="company-team"
+  title={ui.company.team.title}
+  lead={ui.company.team.lead}
+  members={members}
+  empty={ui.empty.members}
+  depts={ui.company.depts}
+  layout="cards"
+  cols="1-4"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))}
+/>
+<JobBoard
+  id="company-jobs"
+  title={ui.company.jobs.title}
+  lead={ui.company.jobs.lead}
+  jobs={jobs}
+  empty={ui.empty.jobs}
+  departments={departments}
+  labels={ui.company.jobs}
+  layout="grouped"
+  salary="hide"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.svelte
new file mode 100644
index 0000000..f176a43
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.svelte
@@ -0,0 +1,149 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The developers page of ThemeMarketingLandingScreen. -->
+<script lang="ts">
+  import {
+    BentoGrid,
+    CtaBand,
+    FaqList,
+    FeatureGrid,
+    HeroClassic,
+    TemplateGrid,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type Faq,
+    type FaqTab,
+    type Feature,
+    type Filter,
+    type Template,
+    type Tile,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+  import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+  import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+  import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+  const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+  const TEMPLATES_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "views": "metadata.views.value|compact",
+    "likes": "metadata.likes.value|compact",
+    "topic": "metadata.topic.value",
+  } as const;
+  const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+  const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+  const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+  const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="developers-hero"
+  title={ui.pages.marketingLanding.developers.title}
+  text={ui.pages.marketingLanding.developers.text}
+  actions={{
+    cta: ui.pages.marketingLanding.developers.cta,
+    href: "#/studio",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "two",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "code",
+    side: "end",
+  }}
+  layout="split"
+  scale="default"
+  tone="default"
+  density="roomy"
+/>
+<BentoGrid
+  id="developers-bento"
+  title={ui.vibe.bento.title}
+  tiles={bento}
+  empty={ui.empty.tiles}
+  layout="bento"
+  media="none"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))}
+/>
+<TemplateGrid
+  id="developers-templates"
+  title={ui.vibe.templates.title}
+  templates={templates}
+  filters={templateFilters}
+  labels={ui.vibe.templates}
+  browseHref="#/"
+  empty={ui.empty.templates}
+  cols="1-4"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))}
+/>
+<FeatureGrid
+  id="developers-features"
+  title={ui.site.home.featuresTitle}
+  features={features}
+  empty={ui.empty.features}
+  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+  layout="grid"
+  cols="1-4"
+  item="tile"
+  mediaSide="end"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+/>
+<FaqList
+  id="developers-faq"
+  title={ui.site.pricing.faqTitle}
+  items={faq}
+  empty={ui.vibe.faq.empty}
+  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+  filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "billing", mode: "categories" }}
+  layout="accordion"
+  cols="1"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+/>
+<CtaBand
+  id="developers-cta"
+  title={ui.site.home.ctaTitle}
+  text={ui.site.home.ctaText}
+  actions={{
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "two",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="split"
+  tone="default"
+  proof="none"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/EventsPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/EventsPage.svelte
new file mode 100644
index 0000000..295ce67
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/EventsPage.svelte
@@ -0,0 +1,135 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The events page of ThemeMarketingLandingScreen. -->
+<script lang="ts">
+  import {
+    CtaBand,
+    HeroClassic,
+    StatsBand,
+    TestimonialGrid,
+    VideoGrid,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type Quote,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="events-hero"
+  title={ui.pages.marketingLanding.events.title}
+  text={ui.pages.marketingLanding.events.text}
+  actions={{
+    cta: ui.pages.marketingLanding.events.cta,
+    href: "#/company",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "backdrop",
+    side: "end",
+  }}
+  layout="centered"
+  scale="default"
+  tone="muted"
+  density="roomy"
+/>
+<StatsBand
+  id="events-stats"
+  title={ui.marketing.stats.title}
+  stats={[stats?.[0], stats?.[1], stats?.[2]]}
+  empty={ui.marketing.stats.empty}
+  cols="3"
+  layout="row"
+  surface="none"
+  item="card"
+  align="center"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))}
+/>
+<TestimonialGrid
+  id="events-testimonials"
+  title={ui.marketing.testimonials.title}
+  quotes={testimonials}
+  empty={ui.empty.quotes}
+  labels={{
+    rating: ui.testimonials.rating,
+    byLine: ui.testimonials.byLine,
+    handleLine: ui.testimonials.handleLine,
+  }}
+  layout="strip"
+  cols="1-3"
+  item={{ kind: "card", avatar: "none", rating: "show", mark: "none" }}
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))}
+/>
+<VideoGrid
+  id="events-videos"
+  title={ui.vibe.videos.title}
+  quotes={testimonials}
+  empty={ui.empty.quotes}
+  playLabel={ui.vibe.videos.play}
+  byLine={ui.testimonials.byLine}
+  cols="1-3"
+  caption="overlay"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))}
+/>
+<CtaBand
+  id="events-cta"
+  title={ui.cases.agency.cta.title}
+  text={ui.cases.agency.cta.text}
+  actions={{
+    cta: ui.cases.agency.cta.cta,
+    href: "#/pricing",
+    secondary: ui.cases.agency.cta.secondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "two",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="card"
+  tone="muted"
+  proof="none"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/HomePage.svelte
new file mode 100644
index 0000000..3da5017
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/HomePage.svelte
@@ -0,0 +1,196 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The home page of ThemeMarketingLandingScreen. -->
+<script lang="ts">
+  import {
+    CtaBand,
+    FaqList,
+    FeatureGrid,
+    HeroClassic,
+    LogoCloud,
+    StatsBand,
+    StepsList,
+    TestimonialGrid,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type Faq,
+    type FaqTab,
+    type Feature,
+    type Logo,
+    type Quote,
+    type Stat,
+    type Step,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="home-hero"
+  title={ui.pages.marketingLanding.home.title}
+  text={ui.pages.marketingLanding.home.text}
+  actions={{
+    cta: ui.pages.marketingLanding.home.cta,
+    href: "#/launch",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "image",
+    side: "end",
+  }}
+  layout="centered"
+  scale="default"
+  tone="default"
+  density="roomy"
+/>
+<LogoCloud
+  id="home-logos"
+  title={ui.marketing.logos.title}
+  logos={logos}
+  empty={ui.empty.logos}
+  layout="row"
+  cols="4"
+  item="icon"
+  tone="default"
+  density="compact"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+/>
+<FeatureGrid
+  id="home-features"
+  title={ui.site.home.featuresTitle}
+  features={features}
+  empty={ui.empty.features}
+  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+  layout="rows"
+  cols="1-3"
+  item="card"
+  mediaSide="alternate"
+  tone="muted"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))}
+/>
+<StepsList
+  id="home-steps"
+  title={ui.marketing.steps.title}
+  steps={steps}
+  empty={ui.empty.steps}
+  layout="row"
+  marker="icon"
+  align="start"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))}
+/>
+<StatsBand
+  id="home-stats"
+  title={ui.marketing.stats.title}
+  stats={stats}
+  empty={ui.marketing.stats.empty}
+  cols="4"
+  layout="row"
+  surface="none"
+  item="icon"
+  align="start"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))}
+/>
+<TestimonialGrid
+  id="home-testimonials"
+  title={ui.marketing.testimonials.title}
+  quotes={testimonials}
+  empty={ui.empty.quotes}
+  labels={{
+    rating: ui.testimonials.rating,
+    byLine: ui.testimonials.byLine,
+    handleLine: ui.testimonials.handleLine,
+  }}
+  layout="single"
+  cols="1-3"
+  item={{ kind: "plain", avatar: "image", rating: "hide", mark: "none" }}
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))}
+/>
+<FaqList
+  id="home-faq"
+  title={ui.site.pricing.faqTitle}
+  items={faq}
+  empty={ui.vibe.faq.empty}
+  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+  filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+  layout="accordion"
+  cols="1"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))}
+/>
+<CtaBand
+  id="home-cta"
+  title={ui.site.home.ctaTitle}
+  text={ui.site.home.ctaText}
+  actions={{
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="band"
+  tone="muted"
+  proof="none"
+  density="roomy"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.svelte
new file mode 100644
index 0000000..28cfe0b
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.svelte
@@ -0,0 +1,139 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The launch page of ThemeMarketingLandingScreen. -->
+<script lang="ts">
+  import {
+    CtaBand,
+    HeroClassic,
+    IconWall,
+    ProofBand,
+    TestimonialGrid,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type Feature,
+    type Logo,
+    type Quote,
+    type Stat,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="launch-hero"
+  title={ui.pages.marketingLanding.launch.title}
+  text={ui.pages.marketingLanding.launch.text}
+  actions={{
+    cta: ui.pages.marketingLanding.launch.cta,
+    href: "#/developers",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "form",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "none",
+    side: "end",
+  }}
+  layout="centered"
+  scale="default"
+  tone="default"
+  density="roomy"
+/>
+<IconWall
+  id="launch-iconwall"
+  title={ui.vibe.wall.title}
+  features={features}
+  empty={ui.empty.features}
+  cols="4"
+  item="tile"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))}
+/>
+<ProofBand
+  id="launch-proof"
+  title={ui.vibe.proof.title}
+  logos={logos}
+  empty={ui.empty.logos}
+  stats={stats}
+  layout="above"
+  logoStyle="name"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))}
+/>
+<TestimonialGrid
+  id="launch-testimonials"
+  title={ui.marketing.testimonials.title}
+  quotes={testimonials}
+  empty={ui.empty.quotes}
+  labels={{
+    rating: ui.testimonials.rating,
+    byLine: ui.testimonials.byLine,
+    handleLine: ui.testimonials.handleLine,
+  }}
+  layout="grid"
+  cols="1-3"
+  item={{ kind: "card", avatar: "image", rating: "show", mark: "none" }}
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))}
+/>
+<CtaBand
+  id="launch-cta"
+  title={ui.site.home.ctaTitle}
+  text={ui.site.home.ctaText}
+  actions={{
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "form",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="band"
+  tone="muted"
+  proof="none"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/StudioPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/StudioPage.svelte
new file mode 100644
index 0000000..afac6a3
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/StudioPage.svelte
@@ -0,0 +1,132 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The studio page of ThemeMarketingLandingScreen. -->
+<script lang="ts">
+  import {
+    CtaBand,
+    FeatureGrid,
+    HeroClassic,
+    LogoCloud,
+    TestimonialGrid,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type Feature,
+    type Logo,
+    type Quote,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="studio-hero"
+  title={ui.pages.marketingLanding.studio.title}
+  text={ui.pages.marketingLanding.studio.text}
+  actions={{
+    cta: ui.pages.marketingLanding.studio.cta,
+    href: "#/events",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "none",
+    side: "end",
+  }}
+  layout="centered"
+  scale="display"
+  tone="default"
+  density="roomy"
+/>
+<LogoCloud
+  id="studio-logos"
+  title={ui.marketing.logos.title}
+  logos={logos}
+  empty={ui.empty.logos}
+  layout="grid"
+  cols="4"
+  item="name"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))}
+/>
+<FeatureGrid
+  id="studio-features"
+  title={ui.site.home.featuresTitle}
+  features={features}
+  empty={ui.empty.features}
+  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+  layout="grid"
+  cols="1-4"
+  item="tile"
+  mediaSide="end"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))}
+/>
+<TestimonialGrid
+  id="studio-testimonials"
+  title={ui.marketing.testimonials.title}
+  quotes={testimonials}
+  empty={ui.empty.quotes}
+  labels={{
+    rating: ui.testimonials.rating,
+    byLine: ui.testimonials.byLine,
+    handleLine: ui.testimonials.handleLine,
+  }}
+  layout="masonry"
+  cols="1-3"
+  item={{ kind: "card", avatar: "image", rating: "hide", mark: "none" }}
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))}
+/>
+<CtaBand
+  id="studio-cta"
+  title={ui.site.home.ctaTitle}
+  text={ui.site.home.ctaText}
+  actions={{
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="band"
+  tone="muted"
+  proof="none"
+  density="roomy"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.svelte
new file mode 100644
index 0000000..2fb37c0
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.svelte
@@ -0,0 +1,208 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The teams page of ThemeMarketingLandingScreen. -->
+<script lang="ts">
+  import {
+    CtaProof,
+    FaqSplit,
+    HeroSplit,
+    LogoCloud,
+    QuoteSplit,
+    tpl,
+    uniqLabel,
+    type FaqTab,
+    type Feature,
+    type Logo,
+    type Plan,
+    type Question,
+    type Quote,
+    type Stat,
+    type Zone,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+  import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+  import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+  const QUESTIONS_FIELDS = {
+    "id": "id",
+    "question": "title",
+    "answer": "metadata.answer.value",
+    "category": "terms|term:faq_category",
+    "icon": "metadata.icon.value",
+  } as const;
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const ZONES_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "area": "metadata.area.value",
+    "price": "metadata.price.value",
+    "freeFrom": "metadata.freeFrom.value",
+    "minOrder": "metadata.minOrder.value",
+    "time": "metadata.time.value",
+    "express": "metadata.express.value",
+    "currency": "metadata.currency.value",
+  } as const;
+
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+  const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+  const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+</script>
+
+<HeroSplit
+  id="teams-herosplit"
+  title={ui.marketing.heroSplit.title}
+  lead={ui.marketing.heroSplit.lead}
+  badge={ui.marketing.heroSplit.badge}
+  actions={{
+    mode: "two",
+    cta: ui.marketing.heroSplit.cta,
+    href: "#/pricing",
+    secondary: ui.marketing.heroSplit.secondary,
+    secondaryHref: "#/features",
+  }}
+  content={{
+    stats,
+    features,
+    people: testimonials,
+    plans: tiers,
+    proof: ui.marketing.heroSplit.proof,
+    card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+  }}
+  extra="quote"
+  media="card"
+  mediaSide="end"
+  tone="default"
+/>
+<LogoCloud
+  id="teams-logos"
+  title={ui.marketing.logos.title}
+  logos={logos}
+  empty={ui.empty.logos}
+  layout="row"
+  cols="4"
+  item="icon"
+  tone="default"
+  density="compact"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))}
+/>
+<FaqSplit
+  id="teams-faqsplit"
+  title={ui.marketing.faqSplit.title}
+  lead={ui.marketing.faqSplit.lead}
+  badge={ui.marketing.faqSplit.badge}
+  items={questions}
+  channels={channels}
+  topics={faqtabs}
+  labels={{
+    cta: ui.marketing.faqSplit.cta,
+    more: ui.marketing.faqSplit.more,
+    asideTitle: ui.marketing.faqSplit.asideTitle,
+    asideText: ui.marketing.faqSplit.asideText,
+    asideCta: ui.marketing.faqSplit.asideCta,
+    search: ui.marketing.faqSplit.search,
+    popular: ui.marketing.faqSplit.popular,
+  }}
+  layout="aside"
+  cards="grid3"
+  mediaSide="end"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))}
+/>
+<QuoteSplit
+  id="teams-quotesplit"
+  title={ui.marketing.quoteSplit.title}
+  lead={ui.marketing.quoteSplit.lead}
+  badge={ui.marketing.quoteSplit.badge}
+  quotes={testimonials}
+  empty={ui.empty.quotes}
+  labels={{
+    rating: ui.testimonials.rating,
+    byLine: ui.testimonials.byLine,
+    handleLine: ui.testimonials.handleLine,
+  }}
+  extras={{
+    stats,
+    logos,
+    rating: 5,
+    score: ui.marketing.quoteSplit.score,
+    reviews: ui.marketing.quoteSplit.reviews,
+  }}
+  actions={{
+    mode: "two",
+    cta: ui.marketing.quoteSplit.cta,
+    href: "#/customers",
+    secondary: ui.marketing.quoteSplit.secondary,
+    secondaryHref: "#/contact",
+  }}
+  layout="rating"
+  mediaSide="end"
+  tone="muted"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))}
+/>
+<CtaProof
+  id="teams-ctaproof"
+  title={ui.marketing.ctaProof.title}
+  lead={ui.marketing.ctaProof.lead}
+  badge={ui.marketing.ctaProof.badge}
+  actions={{
+    mode: "two",
+    cta: ui.marketing.ctaProof.cta,
+    href: "#/pricing",
+    secondary: ui.marketing.ctaProof.secondary,
+    secondaryHref: "#/contact",
+  }}
+  content={{ logos, features, stats, zones }}
+  layout="split"
+  proof="stats"
+  mediaSide="end"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/WorkPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/WorkPage.svelte
new file mode 100644
index 0000000..1d93809
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingLandingScreen/WorkPage.svelte
@@ -0,0 +1,87 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The work page of ThemeMarketingLandingScreen. -->
+<script lang="ts">
+  import {
+    AboutMe,
+    PhotoGallery,
+    ProjectGrid,
+    tpl,
+    uniqLabel,
+    type Photo,
+    type Project,
+    type Skill,
+    type Spec,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+  import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+  import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+  import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+
+  const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+  const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+  const PROJECTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "category": "terms|term:project_category",
+    "year": "metadata.year.value",
+    "summary": "metadata.summary.value",
+    "tags": "metadata.tags.value",
+    "featured": "metadata.featured.value",
+    "client": "metadata.client.value",
+  } as const;
+  const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+
+  const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+  const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+  const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+  const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+</script>
+
+<AboutMe
+  id="work-aboutme"
+  title={ui.company.aboutMe.title}
+  lead={ui.company.aboutMe.lead}
+  badge={ui.company.aboutMe.badge}
+  facts={profilefacts}
+  skills={skills}
+  labels={ui.company.aboutMe}
+  actions={{
+    mode: "two",
+    cta: ui.company.aboutMe.cta,
+    href: "#/work",
+    secondary: ui.company.aboutMe.more,
+    secondaryHref: "#/contact",
+  }}
+  layout="facts"
+  mediaSide="start"
+  tone="default"
+/>
+<ProjectGrid
+  id="work-projects"
+  title={ui.company.projects.title}
+  lead={ui.company.projects.lead}
+  projects={projects}
+  empty={ui.empty.projects}
+  labels={ui.company.projects}
+  layout="cards"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))}
+/>
+<PhotoGallery
+  id="work-photos"
+  title={ui.company.photos.title}
+  lead={ui.company.photos.lead}
+  photos={photos}
+  empty={ui.empty.photos}
+  labels={ui.company.photos}
+  layout="masonry"
+  captions="show"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen.svelte
new file mode 100644
index 0000000..ee3adc9
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen.svelte
@@ -0,0 +1,84 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!--
+  Pricing pages: tiers with a billing switch, a comparison table, one plan, a usage slider, credit packs, free
+  against pro, and us against the rest.
+-->
+<script lang="ts">
+  import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemeMarketingPricingScreen/HomePage.svelte";
+  import PlansPage from "./ThemeMarketingPricingScreen/PlansPage.svelte";
+  import UsagePage from "./ThemeMarketingPricingScreen/UsagePage.svelte";
+  import ComparePage from "./ThemeMarketingPricingScreen/ComparePage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingPricingScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const ROUTES = [
+    {"path":"","area":"home"},
+    {"path":"plans","area":"plans"},
+    {"path":"usage","area":"usage"},
+    {"path":"compare","area":"compare"},
+  ] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "plans"}
+    <PlansPage />
+  {:else if route.area === "usage"}
+    <UsagePage />
+  {:else if route.area === "compare"}
+    <ComparePage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<SitemapFooter
+  id="after-sitemap"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.vibe.sitemap.tagline}
+  copyright={ui.vibe.sitemap.copyright}
+  groups={sitemap}
+  signup={{
+    title: ui.vibe.sitemap.signupTitle,
+    label: ui.vibe.sitemap.signupLabel,
+    submit: ui.vibe.sitemap.signupSubmit,
+    mode: "first",
+  }}
+  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+  layout="columns"
+  density="default"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/ComparePage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/ComparePage.svelte
new file mode 100644
index 0000000..6f0747d
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/ComparePage.svelte
@@ -0,0 +1,134 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!-- The compare page of ThemeMarketingPricingScreen. -->
+<script lang="ts">
+  import {
+    ComparisonTable,
+    CtaBand,
+    FaqList,
+    HeroClassic,
+    TestimonialGrid,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type CompareRow,
+    type Faq,
+    type FaqTab,
+    type Quote,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+  const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+
+  const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="compare-hero"
+  title={ui.pages.marketingPricing.compare.title}
+  text={ui.pages.marketingPricing.compare.text}
+  actions={{
+    cta: ui.pages.marketingPricing.compare.cta,
+    href: "#/",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "none",
+    side: "end",
+  }}
+  layout="centered"
+  scale="default"
+  tone="muted"
+  density="default"
+/>
+<ComparisonTable
+  id="compare-compare"
+  title={ui.vibe.rivals.title}
+  rows={rivals}
+  empty={ui.empty.rows}
+  labels={ui.vibe.rivals.labels}
+  highlight="middle"
+  tone="muted"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))}
+/>
+<TestimonialGrid
+  id="compare-testimonials"
+  title={ui.marketing.testimonials.title}
+  quotes={testimonials}
+  empty={ui.empty.quotes}
+  labels={{
+    rating: ui.testimonials.rating,
+    byLine: ui.testimonials.byLine,
+    handleLine: ui.testimonials.handleLine,
+  }}
+  layout="single"
+  cols="1-3"
+  item={{ kind: "plain", avatar: "image", rating: "hide", mark: "icon" }}
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))}
+/>
+<FaqList
+  id="compare-faq"
+  title={ui.site.pricing.faqTitle}
+  items={faq}
+  empty={ui.vibe.faq.empty}
+  search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+  filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+  layout="accordion"
+  cols="1"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+/>
+<CtaBand
+  id="compare-cta"
+  title={ui.site.home.ctaTitle}
+  text={ui.site.home.ctaText}
+  actions={{
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="band"
+  tone="muted"
+  proof="quote"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/HomePage.svelte
new file mode 100644
index 0000000..786a69d
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/HomePage.svelte
@@ -0,0 +1,131 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!-- The home page of ThemeMarketingPricingScreen. -->
+<script lang="ts">
+  import {
+    ComparisonTable,
+    CtaBand,
+    FaqList,
+    LogoCloud,
+    PageIntro,
+    PricingTiers,
+    tpl,
+    uniqLabel,
+    type CompareRow,
+    type Faq,
+    type FaqTab,
+    type Logo,
+    type Plan,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+  import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+  const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+  const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="home-pagehead"
+  title={ui.pages.marketingPricing.home.title}
+  text={ui.pages.marketingPricing.home.text}
+  cta={ui.pages.marketingPricing.home.cta}
+  href="#/plans"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<PricingTiers
+  id="home-pricing"
+  title={ui.site.pricing.tiersTitle}
+  plans={tiers}
+  labels={ui.pricing}
+  billingLabels={ui.vibe.billing}
+  layout="grid"
+  cols="1-3"
+  emphasis="auto"
+  billing="monthly"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))}
+/>
+<LogoCloud
+  id="home-logos"
+  title={ui.marketing.logos.title}
+  logos={logos}
+  empty={ui.empty.logos}
+  layout="grid"
+  cols="3"
+  item="tile"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))}
+/>
+<ComparisonTable
+  id="home-compare"
+  title={ui.vibe.compare.title}
+  rows={compare}
+  empty={ui.empty.rows}
+  labels={ui.vibe.compare.labels}
+  highlight="none"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))}
+/>
+<FaqList
+  id="home-faq"
+  title={ui.site.pricing.faqTitle}
+  items={faq}
+  empty={ui.vibe.faq.empty}
+  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+  filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+  layout="accordion"
+  cols="2"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))}
+/>
+<CtaBand
+  id="home-cta"
+  title={ui.cases.saas.cta.title}
+  text={ui.cases.saas.cta.text}
+  actions={{
+    cta: ui.cases.saas.cta.cta,
+    href: "#/pricing",
+    secondary: ui.cases.saas.cta.secondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "two",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="band"
+  tone="muted"
+  proof="none"
+  density="roomy"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/PlansPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/PlansPage.svelte
new file mode 100644
index 0000000..4c2cb48
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/PlansPage.svelte
@@ -0,0 +1,107 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!-- The plans page of ThemeMarketingPricingScreen. -->
+<script lang="ts">
+  import {
+    ComparisonTable,
+    PageIntro,
+    PricingCard,
+    PricingTiers,
+    tpl,
+    uniqLabel,
+    type CompareRow,
+    type Plan,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+  import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+  import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+  const DUO_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+  const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+  const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+  const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="plans-pagehead"
+  title={ui.pages.marketingPricing.plans.title}
+  text={ui.pages.marketingPricing.plans.text}
+  cta={ui.pages.marketingPricing.plans.cta}
+  href="#/usage"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<PricingTiers
+  id="plans-pricing-1"
+  title={ui.site.pricing.tiersTitle}
+  plans={duo}
+  labels={ui.pricing}
+  billingLabels={ui.vibe.billing}
+  layout="grid"
+  cols="1-2"
+  emphasis="off"
+  billing="off"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))}
+/>
+<PricingCard
+  plan={tiers.find((i) => i.id === "tier-team")!}
+  labels={ui.pricing}
+  emphasis="auto"
+  density="default"
+/>
+<PricingTiers
+  id="plans-pricing-3"
+  title={ui.site.pricing.tiersTitle}
+  plans={tiers}
+  labels={ui.pricing}
+  billingLabels={ui.vibe.billing}
+  layout="stack"
+  cols="1-3"
+  emphasis="auto"
+  billing="off"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))}
+/>
+<ComparisonTable
+  id="plans-compare"
+  title={ui.vibe.compare.title}
+  rows={compare}
+  empty={ui.empty.rows}
+  labels={ui.vibe.compare.labels}
+  highlight="middle"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/UsagePage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/UsagePage.svelte
new file mode 100644
index 0000000..68afa3d
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingPricingScreen/UsagePage.svelte
@@ -0,0 +1,129 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!-- The usage page of ThemeMarketingPricingScreen. -->
+<script lang="ts">
+  import {
+    CreditPacks,
+    CtaBand,
+    PageIntro,
+    PricingTiers,
+    UsageCalculator,
+    tpl,
+    uniqLabel,
+    type Pack,
+    type Plan,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+  import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+  const TIERS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "tagline": "metadata.tagline.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "seats": "metadata.seats.value",
+    "storage": "metadata.storage.value",
+    "highlighted": "metadata.highlighted.value",
+    "features": "metadata.features.value",
+    "yearly": "metadata.yearly.value",
+  } as const;
+  const CREDITS_FIELDS = {
+    "id": "id",
+    "name": "title",
+    "credits": "metadata.credits.value",
+    "price": "metadata.price.value",
+    "currency": "metadata.currency.value",
+    "badge": "metadata.badge.value",
+  } as const;
+
+  const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+  const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="usage-pagehead"
+  title={ui.pages.marketingPricing.usage.title}
+  text={ui.pages.marketingPricing.usage.text}
+  cta={ui.pages.marketingPricing.usage.cta}
+  href="#/compare"
+  align="start"
+  tone="muted"
+  density="compact"
+/>
+<UsageCalculator
+  id="usage-usage"
+  title={ui.vibe.usage.title}
+  text={ui.vibe.usage.text}
+  usage={5000}
+  slider={{ min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit }}
+  price={{ rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate }}
+  cta={ui.vibe.usage.cta}
+  href="#/"
+  layout="card"
+  ends="show"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))}
+/>
+<CreditPacks
+  id="usage-credits-2"
+  title={ui.vibe.credits.title}
+  packs={credits}
+  empty={ui.empty.packs}
+  badges={ui.vibe.credits.badges}
+  buy={ui.vibe.credits.buy}
+  cols="4"
+  item="tile"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))}
+/>
+<CreditPacks
+  id="usage-credits-3"
+  title={ui.vibe.credits.title}
+  packs={credits}
+  empty={ui.empty.packs}
+  badges={ui.vibe.credits.badges}
+  buy={ui.vibe.credits.buy}
+  cols="4"
+  item="row"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))}
+/>
+<PricingTiers
+  id="usage-pricing"
+  title={ui.site.pricing.tiersTitle}
+  plans={tiers}
+  labels={ui.pricing}
+  billingLabels={ui.vibe.billing}
+  layout="grid"
+  cols="1-3"
+  emphasis="auto"
+  billing="annual"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))}
+/>
+<CtaBand
+  id="usage-cta"
+  title={ui.site.home.ctaTitle}
+  text={ui.site.home.ctaText}
+  actions={{
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="row"
+  tone="muted"
+  proof="none"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen.svelte
new file mode 100644
index 0000000..30edd17
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen.svelte
@@ -0,0 +1,84 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!--
+  Product pages: features as grids, bento, tabs, an accordion and a sticky list, before and after pictures, and
+  the navigation patterns.
+-->
+<script lang="ts">
+  import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemeMarketingProductScreen/HomePage.svelte";
+  import TourPage from "./ThemeMarketingProductScreen/TourPage.svelte";
+  import CapabilitiesPage from "./ThemeMarketingProductScreen/CapabilitiesPage.svelte";
+  import NavigationPage from "./ThemeMarketingProductScreen/NavigationPage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingProductScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const ROUTES = [
+    {"path":"","area":"home"},
+    {"path":"tour","area":"tour"},
+    {"path":"capabilities","area":"capabilities"},
+    {"path":"navigation","area":"navigation"},
+  ] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "tour"}
+    <TourPage />
+  {:else if route.area === "capabilities"}
+    <CapabilitiesPage />
+  {:else if route.area === "navigation"}
+    <NavigationPage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<SitemapFooter
+  id="after-sitemap"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.vibe.sitemap.tagline}
+  copyright={ui.vibe.sitemap.copyright}
+  groups={sitemap}
+  signup={{
+    title: ui.vibe.sitemap.signupTitle,
+    label: ui.vibe.sitemap.signupLabel,
+    submit: ui.vibe.sitemap.signupSubmit,
+    mode: "none",
+  }}
+  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+  layout="columns"
+  density="default"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.svelte
new file mode 100644
index 0000000..381c4ba
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.svelte
@@ -0,0 +1,119 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!-- The capabilities page of ThemeMarketingProductScreen. -->
+<script lang="ts">
+  import {
+    BeforeAfter,
+    CtaBand,
+    FeatureAccordion,
+    FeatureGrid,
+    FeatureSticky,
+    IconWall,
+    PageIntro,
+    tpl,
+    uniqLabel,
+    type Contrast,
+    type Feature,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="capabilities-pagehead"
+  title={ui.pages.marketingProduct.capabilities.title}
+  text={ui.pages.marketingProduct.capabilities.text}
+  cta={ui.pages.marketingProduct.capabilities.cta}
+  href="#/navigation"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<FeatureGrid
+  id="capabilities-features"
+  title={ui.site.home.featuresTitle}
+  features={features}
+  empty={ui.empty.features}
+  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+  layout="grid"
+  cols="1-2"
+  item="card"
+  mediaSide="end"
+  tone="default"
+  density="roomy"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))}
+/>
+<IconWall
+  id="capabilities-iconwall"
+  title={ui.vibe.wall.title}
+  features={features}
+  empty={ui.empty.features}
+  cols="6"
+  item="chip"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))}
+/>
+<FeatureAccordion
+  id="capabilities-accordion"
+  title={ui.vibe.accordion.title}
+  features={features}
+  empty={ui.empty.features}
+  expand="first"
+  media="none"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))}
+/>
+<BeforeAfter
+  id="capabilities-beforeafter"
+  title={ui.vibe.beforeafter.title}
+  points={beforeafter}
+  empty={ui.empty.points}
+  labels={ui.vibe.beforeafter.labels}
+  layout="rows"
+  icons="show"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))}
+/>
+<FeatureSticky
+  id="capabilities-sticky"
+  title={ui.vibe.sticky.title}
+  features={features}
+  empty={ui.empty.features}
+  active="feature-clear"
+  mediaSide="end"
+  item="card"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))}
+/>
+<CtaBand
+  id="capabilities-cta"
+  title={ui.site.home.ctaTitle}
+  text={ui.site.home.ctaText}
+  actions={{
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="card"
+  tone="muted"
+  proof="none"
+  density="compact"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/HomePage.svelte
new file mode 100644
index 0000000..42734b4
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/HomePage.svelte
@@ -0,0 +1,147 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!-- The home page of ThemeMarketingProductScreen. -->
+<script lang="ts">
+  import {
+    BentoGrid,
+    FeatureAccordion,
+    FeatureGrid,
+    FeatureShowcase,
+    FeatureSplit,
+    FeatureTabs,
+    HeroClassic,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type Feature,
+    type Stat,
+    type Tile,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="home-hero"
+  title={ui.pages.marketingProduct.home.title}
+  text={ui.pages.marketingProduct.home.text}
+  actions={{
+    cta: ui.pages.marketingProduct.home.cta,
+    href: "#/tour",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "image",
+    side: "end",
+  }}
+  layout="split"
+  scale="default"
+  tone="default"
+  density="roomy"
+/>
+<FeatureGrid
+  id="home-features"
+  title={ui.site.home.featuresTitle}
+  features={features}
+  empty={ui.empty.features}
+  action={{ label: ui.site.home.featuresAction, href: "#/" }}
+  layout="grid"
+  cols="1-3"
+  item="card"
+  mediaSide="end"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))}
+/>
+<FeatureSplit
+  id="home-featuresplit"
+  title={ui.marketing.featureSplit.title}
+  lead={ui.marketing.featureSplit.lead}
+  badge={ui.marketing.featureSplit.badge}
+  features={features}
+  stats={stats}
+  actions={{
+    mode: "two",
+    cta: ui.marketing.featureSplit.cta,
+    href: "#/start",
+    secondary: ui.marketing.featureSplit.secondary,
+    secondaryHref: "#/work",
+  }}
+  layout="metrics"
+  mediaSide="end"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))}
+/>
+<FeatureShowcase
+  id="home-featureshowcase"
+  title={ui.marketing.featureShowcase.title}
+  lead={ui.marketing.featureShowcase.lead}
+  features={features}
+  empty={ui.empty.features}
+  more={ui.marketing.featureShowcase.more}
+  item="panel"
+  cols="4"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))}
+/>
+<BentoGrid
+  id="home-bento"
+  title={ui.vibe.bento.title}
+  tiles={bento}
+  empty={ui.empty.tiles}
+  layout="bento"
+  media="image"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))}
+/>
+<FeatureTabs
+  id="home-featuretabs"
+  title={ui.vibe.tabs.title}
+  features={features}
+  empty={ui.empty.features}
+  tabsLabel={ui.vibe.tabs.label}
+  active="feature-clear"
+  panel="split"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))}
+/>
+<FeatureAccordion
+  id="home-accordion"
+  title={ui.vibe.accordion.title}
+  features={features}
+  empty={ui.empty.features}
+  expand="first"
+  media="image"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/NavigationPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/NavigationPage.svelte
new file mode 100644
index 0000000..6e76b1d
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/NavigationPage.svelte
@@ -0,0 +1,126 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!-- The navigation page of ThemeMarketingProductScreen. -->
+<script lang="ts">
+  import {
+    MegaMenu,
+    NavBar,
+    PageIntro,
+    SiteFooter,
+    SiteHeader,
+    tpl,
+    uniqLabel,
+    type MegaGroup,
+    type NavLink,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+  const actions = { toggleTheme };
+</script>
+
+<PageIntro
+  id="navigation-pagehead"
+  title={ui.pages.marketingProduct.navigation.title}
+  text={ui.pages.marketingProduct.navigation.text}
+  cta={ui.pages.marketingProduct.navigation.cta}
+  href="#/"
+  align="start"
+  tone="muted"
+  density="compact"
+/>
+<SiteHeader
+  labels={ui.site.header}
+  current="home"
+  cta={ui.site.header.cta}
+  layout="stacked"
+  position="static"
+  actions="none"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))}
+  ontheme={() => actions.toggleTheme()}
+/>
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={navlinks}
+  current="link-product"
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="split"
+  over="none"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))}
+  ontheme={() => actions.toggleTheme()}
+/>
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={navlinks}
+  current="link-product"
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="search"
+  over="none"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))}
+  ontheme={() => actions.toggleTheme()}
+/>
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={navlinks}
+  current="link-product"
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="media"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))}
+  ontheme={() => actions.toggleTheme()}
+/>
+<MegaMenu
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  trigger={ui.vibe.mega.trigger}
+  links={navlinks}
+  groups={megagroups}
+  promoTitle={ui.vibe.mega.promoTitle}
+  promoText={ui.vibe.mega.promoText}
+  panel="open"
+  cols="2"
+  promo="none"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))}
+/>
+<SiteFooter
+  labels={ui.site.footer}
+  layout="centered"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/TourPage.svelte b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/TourPage.svelte
new file mode 100644
index 0000000..7d2b507
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeMarketingProductScreen/TourPage.svelte
@@ -0,0 +1,127 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!-- The tour page of ThemeMarketingProductScreen. -->
+<script lang="ts">
+  import {
+    BeforeAfter,
+    FeatureSticky,
+    MegaMenu,
+    PageIntro,
+    StepsList,
+    VideoGrid,
+    tpl,
+    uniqLabel,
+    type Contrast,
+    type Feature,
+    type MegaGroup,
+    type NavLink,
+    type Quote,
+    type Step,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+  import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+  import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+  const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const TESTIMONIALS_FIELDS = {
+    "id": "id",
+    "author": "title",
+    "role": "metadata.role.value",
+    "company": "metadata.company.value",
+    "quote": "metadata.quote.value",
+    "rating": "metadata.rating.value",
+    "handle": "metadata.handle.value",
+    "time": "metadata.time.value|ago-short",
+    "mark": "metadata.mark.value",
+  } as const;
+  const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+  const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+  const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="tour-pagehead"
+  title={ui.pages.marketingProduct.tour.title}
+  text={ui.pages.marketingProduct.tour.text}
+  cta={ui.pages.marketingProduct.tour.cta}
+  href="#/capabilities"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<FeatureSticky
+  id="tour-sticky"
+  title={ui.vibe.sticky.title}
+  features={features}
+  empty={ui.empty.features}
+  active="feature-clear"
+  mediaSide="end"
+  item="plain"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))}
+/>
+<BeforeAfter
+  id="tour-beforeafter"
+  title={ui.vibe.beforeafter.title}
+  points={beforeafter}
+  empty={ui.empty.points}
+  labels={ui.vibe.beforeafter.labels}
+  layout="cards"
+  icons="show"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))}
+/>
+<StepsList
+  id="tour-steps"
+  title={ui.marketing.steps.title}
+  steps={steps}
+  empty={ui.empty.steps}
+  layout="column"
+  marker="number"
+  align="start"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))}
+/>
+<VideoGrid
+  id="tour-videos"
+  title={ui.vibe.videos.title}
+  quotes={testimonials}
+  empty={ui.empty.quotes}
+  playLabel={ui.vibe.videos.play}
+  byLine={ui.testimonials.byLine}
+  cols="1-3"
+  caption="below"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))}
+/>
+<MegaMenu
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  trigger={ui.vibe.mega.trigger}
+  links={navlinks}
+  groups={megagroups}
+  promoTitle={ui.vibe.mega.promoTitle}
+  promoText={ui.vibe.mega.promoText}
+  panel="open"
+  cols="3"
+  promo="none"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen.svelte b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen.svelte
new file mode 100644
index 0000000..a96c042
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen.svelte
@@ -0,0 +1,79 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!--
+  Onboarding: steps, a checklist that expands, a product tour with callouts, a welcome video and the first empty
+  screen.
+-->
+<script lang="ts">
+  import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemeOnboardingFlowScreen/HomePage.svelte";
+  import WelcomePage from "./ThemeOnboardingFlowScreen/WelcomePage.svelte";
+  import SetupPage from "./ThemeOnboardingFlowScreen/SetupPage.svelte";
+  import TourPage from "./ThemeOnboardingFlowScreen/TourPage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemeOnboardingFlowScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const ROUTES = [{"path":"","area":"home"},{"path":"welcome","area":"welcome"},{"path":"setup","area":"setup"},{"path":"tour","area":"tour"}] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "welcome"}
+    <WelcomePage />
+  {:else if route.area === "setup"}
+    <SetupPage />
+  {:else if route.area === "tour"}
+    <TourPage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<SitemapFooter
+  id="after-sitemap"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.vibe.sitemap.tagline}
+  copyright={ui.vibe.sitemap.copyright}
+  groups={sitemap}
+  signup={{
+    title: ui.vibe.sitemap.signupTitle,
+    label: ui.vibe.sitemap.signupLabel,
+    submit: ui.vibe.sitemap.signupSubmit,
+    mode: "none",
+  }}
+  status={{ label: ui.vibe.sitemap.status, mode: "none" }}
+  layout="row"
+  density="default"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/HomePage.svelte
new file mode 100644
index 0000000..83f100a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/HomePage.svelte
@@ -0,0 +1,76 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!-- The home page of ThemeOnboardingFlowScreen. -->
+<script lang="ts">
+  import {
+    Checklist,
+    PageIntro,
+    Stepper,
+    TourCallout,
+    tpl,
+    uniqLabel,
+    type Step,
+    type Task,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+  import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+  const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="home-pagehead"
+  title={ui.pages.onboardingFlow.home.title}
+  text={ui.pages.onboardingFlow.home.text}
+  cta={ui.pages.onboardingFlow.home.cta}
+  href="#/welcome"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<Stepper
+  id="home-stepper"
+  title={ui.onboarding.stepper.title}
+  steps={steps}
+  current={2}
+  stepLabel={ui.onboarding.stepper.stepLabel}
+  back={ui.onboarding.stepper.back}
+  next={ui.onboarding.stepper.next}
+  layout="horizontal"
+  marker="number"
+  summary="show"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))}
+/>
+<Checklist
+  id="home-checklist"
+  title={ui.onboarding.checklist.title}
+  tasks={checklist}
+  empty={ui.empty.tasks}
+  progressLabel={ui.onboarding.checklist.progress}
+  layout="card"
+  progress="bar"
+  marker="check"
+  detail="expand"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))}
+/>
+<TourCallout
+  id="home-tour"
+  title={ui.vibe.tour.title}
+  text={ui.vibe.tour.text}
+  target={ui.vibe.tour.target}
+  position={ui.vibe.tour.position}
+  skip={ui.vibe.tour.skip}
+  next={ui.vibe.tour.next}
+  placement="below"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.svelte b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.svelte
new file mode 100644
index 0000000..698d6e8
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.svelte
@@ -0,0 +1,76 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!-- The setup page of ThemeOnboardingFlowScreen. -->
+<script lang="ts">
+  import {
+    Checklist,
+    EmptyPanel,
+    PageIntro,
+    Stepper,
+    tpl,
+    uniqLabel,
+    type Step,
+    type Task,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+  import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+  const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="setup-pagehead"
+  title={ui.pages.onboardingFlow.setup.title}
+  text={ui.pages.onboardingFlow.setup.text}
+  cta={ui.pages.onboardingFlow.setup.cta}
+  href="#/tour"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<Stepper
+  id="setup-stepper"
+  title={ui.onboarding.stepper.title}
+  steps={steps}
+  current={2}
+  stepLabel={ui.onboarding.stepper.stepLabel}
+  back={ui.onboarding.stepper.back}
+  next={ui.onboarding.stepper.next}
+  layout="vertical"
+  marker="number"
+  summary="show"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))}
+/>
+<Checklist
+  id="setup-checklist"
+  title={ui.onboarding.checklist.title}
+  tasks={checklist}
+  empty={ui.empty.tasks}
+  progressLabel={ui.onboarding.checklist.progress}
+  layout="card"
+  progress="bar"
+  marker="check"
+  detail="always"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))}
+/>
+<EmptyPanel
+  id="setup-empty"
+  title={ui.dashboard.empty.inbox.title}
+  text={ui.dashboard.empty.inbox.text}
+  cta={ui.dashboard.empty.inbox.cta}
+  ctaHref="#/"
+  layout="card"
+  actions="button"
+  visual="icon"
+  size="compact"
+  icon="inbox"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/TourPage.svelte b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/TourPage.svelte
new file mode 100644
index 0000000..2b1c9f1
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/TourPage.svelte
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!-- The tour page of ThemeOnboardingFlowScreen. -->
+<script lang="ts">
+  import {
+    Checklist,
+    PageIntro,
+    TourCallout,
+    VideoModal,
+    tpl,
+    uniqLabel,
+    type Chapter,
+    type Task,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+  import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+  const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+  const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+  const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+  const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="tour-pagehead"
+  title={ui.pages.onboardingFlow.tour.title}
+  text={ui.pages.onboardingFlow.tour.text}
+  cta={ui.pages.onboardingFlow.tour.cta}
+  href="#/"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<TourCallout
+  id="tour-tour-1"
+  title={ui.vibe.tour.title}
+  text={ui.vibe.tour.text}
+  target={ui.vibe.tour.target}
+  position={ui.vibe.tour.position}
+  skip={ui.vibe.tour.skip}
+  next={ui.vibe.tour.next}
+  placement="above"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))}
+/>
+<TourCallout
+  id="tour-tour-2"
+  title={ui.vibe.tour.title}
+  text={ui.vibe.tour.text}
+  target={ui.vibe.tour.target}
+  position={ui.vibe.tour.position}
+  skip={ui.vibe.tour.skip}
+  next={ui.vibe.tour.next}
+  placement="end"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))}
+/>
+<Checklist
+  id="tour-checklist"
+  title={ui.onboarding.checklist.title}
+  tasks={checklist}
+  empty={ui.empty.tasks}
+  progressLabel={ui.onboarding.checklist.progress}
+  layout="card"
+  progress="text"
+  marker="check"
+  detail="always"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))}
+/>
+<VideoModal
+  id="tour-videomodal"
+  title={ui.vibe.modal.title}
+  text={ui.vibe.modal.text}
+  close={ui.vibe.modal.close}
+  play={ui.vibe.modal.play}
+  chaptersTitle={ui.vibe.modal.chapters}
+  chapters={chapters}
+  size="default"
+  outline="chapters"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.svelte b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.svelte
new file mode 100644
index 0000000..e1e5ab7
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.svelte
@@ -0,0 +1,62 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!-- The welcome page of ThemeOnboardingFlowScreen. -->
+<script lang="ts">
+  import {
+    Checklist,
+    PageIntro,
+    VideoModal,
+    tpl,
+    uniqLabel,
+    type Chapter,
+    type Task,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+  import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+  const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+  const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+  const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+  const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="welcome-pagehead"
+  title={ui.pages.onboardingFlow.welcome.title}
+  text={ui.pages.onboardingFlow.welcome.text}
+  cta={ui.pages.onboardingFlow.welcome.cta}
+  href="#/setup"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<VideoModal
+  id="welcome-videomodal"
+  title={ui.vibe.modal.title}
+  text={ui.vibe.modal.text}
+  close={ui.vibe.modal.close}
+  play={ui.vibe.modal.play}
+  chaptersTitle={ui.vibe.modal.chapters}
+  chapters={chapters}
+  size="default"
+  outline="none"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))}
+/>
+<Checklist
+  id="welcome-checklist"
+  title={ui.onboarding.checklist.title}
+  tasks={checklist}
+  empty={ui.empty.tasks}
+  progressLabel={ui.onboarding.checklist.progress}
+  layout="card"
+  progress="bar"
+  marker="number"
+  detail="always"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen.svelte b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen.svelte
new file mode 100644
index 0000000..2373633
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen.svelte
@@ -0,0 +1,98 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!--
+  Campaign pages: announcement bars in every position and tone, sign-up forms, calls to action with a pattern,
+  and the cookie notice.
+-->
+<script lang="ts">
+  import { Block, FooterSplit, NavBar, type Feature, type MegaGroup, type Stat } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemePromoCampaignScreen/HomePage.svelte";
+  import LaunchPage from "./ThemePromoCampaignScreen/LaunchPage.svelte";
+  import OfferPage from "./ThemePromoCampaignScreen/OfferPage.svelte";
+  import NoticesPage from "./ThemePromoCampaignScreen/NoticesPage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemePromoCampaignScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+  import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+  import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+  const ROUTES = [
+    {"path":"","area":"home"},
+    {"path":"launch","area":"launch"},
+    {"path":"offer","area":"offer"},
+    {"path":"notices","area":"notices"},
+  ] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+  const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+  const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "launch"}
+    <LaunchPage />
+  {:else if route.area === "offer"}
+    <OfferPage />
+  {:else if route.area === "notices"}
+    <NoticesPage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<FooterSplit
+  id="after-footersplit"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.marketing.footerSplit.tagline}
+  copyright={ui.marketing.footerSplit.copyright}
+  groups={sitemap}
+  extras={{ stats, points: features, contacts, channels: community }}
+  labels={ui.marketing.footerSplit.labels}
+  layout="newsletter"
+  mediaSide="start"
+  tone="default"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/HomePage.svelte
new file mode 100644
index 0000000..b709c3b
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/HomePage.svelte
@@ -0,0 +1,106 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!-- The home page of ThemePromoCampaignScreen. -->
+<script lang="ts">
+  import {
+    AnnouncementBar,
+    CookieBanner,
+    CtaBand,
+    HeroClassic,
+    NewsletterForm,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="home-hero"
+  title={ui.pages.promoCampaign.home.title}
+  text={ui.pages.promoCampaign.home.text}
+  actions={{
+    cta: ui.pages.promoCampaign.home.cta,
+    href: "#/launch",
+    secondary: ui.site.home.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "cluster",
+    side: "end",
+  }}
+  layout="split"
+  scale="default"
+  tone="default"
+  density="roomy"
+/>
+<AnnouncementBar
+  label={ui.promo.announcement.label}
+  text={ui.promo.announcement.text}
+  cta={ui.promo.announcement.cta}
+  ctaHref="#/pricing"
+  dismissLabel={ui.promo.announcement.dismiss}
+  badgeLabel={ui.promo.announcement.badge}
+  tone="muted"
+  layout="center"
+  dismiss="hide"
+  badge="show"
+  position="top"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+/>
+<NewsletterForm
+  id="home-newsletter"
+  title={ui.promo.newsletter.title}
+  text={ui.promo.newsletter.text}
+  label={ui.promo.newsletter.label}
+  submit={ui.promo.newsletter.submit}
+  consent={ui.promo.newsletter.consent}
+  layout="split"
+  terms="hide"
+  tone="default"
+  align="start"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))}
+/>
+<CtaBand
+  id="home-cta"
+  title={ui.site.home.ctaTitle}
+  text={ui.site.home.ctaText}
+  actions={{
+    cta: ui.site.home.ctaButton,
+    href: "#/pricing",
+    secondary: ui.site.home.ctaSecondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "form",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="band"
+  tone="muted"
+  proof="none"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))}
+/>
+<CookieBanner
+  id="home-cookie"
+  title={ui.promo.cookie.title}
+  text={ui.promo.cookie.text}
+  accept={ui.promo.cookie.accept}
+  decline={ui.promo.cookie.decline}
+  settings={ui.promo.cookie.settings}
+  layout="card"
+  actions="two"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/LaunchPage.svelte b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/LaunchPage.svelte
new file mode 100644
index 0000000..06b16eb
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/LaunchPage.svelte
@@ -0,0 +1,110 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!-- The launch page of ThemePromoCampaignScreen. -->
+<script lang="ts">
+  import {
+    AnnouncementBar,
+    CtaBand,
+    HeroClassic,
+    LogoCloud,
+    NewsletterForm,
+    tpl,
+    uniqLabel,
+    type CodeLine,
+    type Logo,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+  import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+  const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+  const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+  const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+  const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+</script>
+
+<HeroClassic
+  id="launch-hero"
+  title={ui.pages.promoCampaign.launch.title}
+  text={ui.pages.promoCampaign.launch.text}
+  actions={{
+    cta: ui.pages.promoCampaign.launch.cta,
+    href: "#/offer",
+    secondary: ui.cases.saas.hero.secondary,
+    secondaryHref: "#/pricing",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "two",
+  }}
+  media={{
+    codeTitle: ui.vibe.code.title,
+    prompt: ui.vibe.code.prompt,
+    lines: terminal,
+    kind: "image",
+    side: "end",
+  }}
+  layout="split"
+  scale="default"
+  tone="default"
+  density="roomy"
+/>
+<AnnouncementBar
+  label={ui.promo.announcement.label}
+  text={ui.promo.announcement.text}
+  cta={ui.promo.announcement.cta}
+  ctaHref="#/pricing"
+  dismissLabel={ui.promo.announcement.dismiss}
+  badgeLabel={ui.promo.announcement.badge}
+  tone="default"
+  layout="center"
+  dismiss="hide"
+  badge="none"
+  position="top"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))}
+/>
+<NewsletterForm
+  id="launch-newsletter"
+  title={ui.promo.newsletter.title}
+  text={ui.promo.newsletter.text}
+  label={ui.promo.newsletter.label}
+  submit={ui.promo.newsletter.submit}
+  consent={ui.promo.newsletter.consent}
+  layout="inline"
+  terms="hide"
+  tone="default"
+  align="center"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))}
+/>
+<LogoCloud
+  id="launch-logos"
+  title={ui.marketing.logos.title}
+  logos={logos}
+  empty={ui.empty.logos}
+  layout="grid"
+  cols="4"
+  item="tile"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))}
+/>
+<CtaBand
+  id="launch-cta"
+  title={ui.cases.saas.cta.title}
+  text={ui.cases.saas.cta.text}
+  actions={{
+    cta: ui.cases.saas.cta.cta,
+    href: "#/pricing",
+    secondary: ui.cases.saas.cta.secondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "two",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="band"
+  tone="muted"
+  proof="none"
+  density="roomy"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/NoticesPage.svelte b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/NoticesPage.svelte
new file mode 100644
index 0000000..f4cfead
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/NoticesPage.svelte
@@ -0,0 +1,91 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!-- The notices page of ThemePromoCampaignScreen. -->
+<script lang="ts">
+  import {
+    AnnouncementBar,
+    CookieBanner,
+    NewsletterForm,
+    PageIntro,
+    tpl,
+    uniqLabel,
+  } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<PageIntro
+  id="notices-pagehead"
+  title={ui.pages.promoCampaign.notices.title}
+  text={ui.pages.promoCampaign.notices.text}
+  cta={ui.pages.promoCampaign.notices.cta}
+  href="#/"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<AnnouncementBar
+  label={ui.promo.announcement.label}
+  text={ui.promo.announcement.text}
+  cta={ui.promo.announcement.cta}
+  ctaHref="#/pricing"
+  dismissLabel={ui.promo.announcement.dismiss}
+  badgeLabel={ui.promo.announcement.badge}
+  tone="default"
+  layout="center"
+  dismiss="show"
+  badge="none"
+  position="top"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))}
+/>
+<AnnouncementBar
+  label={ui.promo.announcement.label}
+  text={ui.promo.announcement.text}
+  cta={ui.promo.announcement.cta}
+  ctaHref="#/pricing"
+  dismissLabel={ui.promo.announcement.dismiss}
+  badgeLabel={ui.promo.announcement.badge}
+  tone="default"
+  layout="split"
+  dismiss="show"
+  badge="none"
+  position="bottom"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))}
+/>
+<CookieBanner
+  id="notices-cookie-3"
+  title={ui.promo.cookie.title}
+  text={ui.promo.cookie.text}
+  accept={ui.promo.cookie.accept}
+  decline={ui.promo.cookie.decline}
+  settings={ui.promo.cookie.settings}
+  layout="bar"
+  actions="three"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))}
+/>
+<CookieBanner
+  id="notices-cookie-4"
+  title={ui.promo.cookie.title}
+  text={ui.promo.cookie.text}
+  accept={ui.promo.cookie.accept}
+  decline={ui.promo.cookie.decline}
+  settings={ui.promo.cookie.settings}
+  layout="bar"
+  actions="two"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))}
+/>
+<NewsletterForm
+  id="notices-newsletter"
+  title={ui.promo.newsletter.title}
+  text={ui.promo.newsletter.text}
+  label={ui.promo.newsletter.label}
+  submit={ui.promo.newsletter.submit}
+  consent={ui.promo.newsletter.consent}
+  layout="inline"
+  terms="show"
+  tone="muted"
+  align="start"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/OfferPage.svelte b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/OfferPage.svelte
new file mode 100644
index 0000000..56a90b2
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemePromoCampaignScreen/OfferPage.svelte
@@ -0,0 +1,93 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!-- The offer page of ThemePromoCampaignScreen. -->
+<script lang="ts">
+  import { AnnouncementBar, CtaBand, NewsletterForm, PageIntro, tpl, uniqLabel } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<PageIntro
+  id="offer-pagehead"
+  title={ui.pages.promoCampaign.offer.title}
+  text={ui.pages.promoCampaign.offer.text}
+  cta={ui.pages.promoCampaign.offer.cta}
+  href="#/notices"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<AnnouncementBar
+  label={ui.promo.announcement.label}
+  text={ui.promo.announcement.text}
+  cta={ui.promo.announcement.cta}
+  ctaHref="#/pricing"
+  dismissLabel={ui.promo.announcement.dismiss}
+  badgeLabel={ui.promo.announcement.badge}
+  tone="muted"
+  layout="center"
+  dismiss="hide"
+  badge="show"
+  position="top"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))}
+/>
+<AnnouncementBar
+  label={ui.promo.announcement.label}
+  text={ui.promo.announcement.text}
+  cta={ui.promo.announcement.cta}
+  ctaHref="#/pricing"
+  dismissLabel={ui.promo.announcement.dismiss}
+  badgeLabel={ui.promo.announcement.badge}
+  tone="muted"
+  layout="split"
+  dismiss="hide"
+  badge="none"
+  position="top"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))}
+/>
+<AnnouncementBar
+  label={ui.promo.announcement.label}
+  text={ui.cases.shop.announcement.text}
+  cta={ui.cases.shop.announcement.cta}
+  ctaHref="#/pricing"
+  dismissLabel={ui.promo.announcement.dismiss}
+  badgeLabel={ui.promo.announcement.badge}
+  tone="muted"
+  layout="center"
+  dismiss="show"
+  badge="none"
+  position="top"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))}
+/>
+<CtaBand
+  id="offer-cta"
+  title={ui.cases.shop.cta.title}
+  text={ui.cases.shop.cta.text}
+  actions={{
+    cta: ui.cases.shop.cta.cta,
+    href: "#/pricing",
+    secondary: ui.cases.shop.cta.secondary,
+    secondaryHref: "#/",
+    emailLabel: ui.promo.newsletter.label,
+    mode: "one",
+  }}
+  quote={{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }}
+  layout="split"
+  tone="default"
+  proof="none"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))}
+/>
+<NewsletterForm
+  id="offer-newsletter"
+  title={ui.promo.newsletter.title}
+  text={ui.promo.newsletter.text}
+  label={ui.promo.newsletter.label}
+  submit={ui.promo.newsletter.submit}
+  consent={ui.promo.newsletter.consent}
+  layout="inline"
+  terms="show"
+  tone="default"
+  align="center"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen.svelte b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen.svelte
new file mode 100644
index 0000000..0ba6365
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen.svelte
@@ -0,0 +1,88 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!--
+  A help center: channels, FAQ as tabs, chat and search, contact forms, and the pages for a missing or moved
+  address.
+-->
+<script lang="ts">
+  import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/svelte-ui";
+  import HomePage from "./ThemeSupportCenterScreen/HomePage.svelte";
+  import FaqPage from "./ThemeSupportCenterScreen/FaqPage.svelte";
+  import ContactPage from "./ThemeSupportCenterScreen/ContactPage.svelte";
+  import MissingPage from "./ThemeSupportCenterScreen/MissingPage.svelte";
+  import MovedPage from "./ThemeSupportCenterScreen/MovedPage.svelte";
+  import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { navOf } from "@ui8kit/app-shared/nav/ThemeSupportCenterScreen";
+  import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+  const ROUTES = [
+    {"path":"","area":"home"},
+    {"path":"faq","area":"faq"},
+    {"path":"contact","area":"contact"},
+    {"path":"missing","area":"missing"},
+    {"path":"moved","area":"moved"},
+  ] as const;
+  const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+  let { url }: { url: UrlPort } = $props();
+
+  const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+  const nav = $derived(navOf(route.area));
+  const actions = { toggleTheme };
+</script>
+
+<NavBar
+  label={ui.vibe.nav.label}
+  brand={ui.site.header.brand}
+  links={nav.links}
+  current={nav.current}
+  actions={{
+    cta: ui.site.header.cta,
+    href: "#/",
+    login: ui.site.header.login,
+    loginHref: "#/login",
+    mode: "cta",
+    themeLabel: ui.theme.toggle,
+  }}
+  search={{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }}
+  layout="inline"
+  over="none"
+  tone="default"
+  brandHref="#/"
+  skip={ui.site.header.skip}
+  ontheme={() => actions.toggleTheme()}
+/>
+<Block tag="main" id="main-content" tabindex={-1} data-testid="main">
+  {#if route.area === "faq"}
+    <FaqPage />
+  {:else if route.area === "contact"}
+    <ContactPage />
+  {:else if route.area === "missing"}
+    <MissingPage />
+  {:else if route.area === "moved"}
+    <MovedPage />
+  {:else}
+    <HomePage />
+  {/if}
+</Block>
+<SitemapFooter
+  id="after-sitemap"
+  label={ui.vibe.sitemap.label}
+  brand={ui.site.header.brand}
+  tagline={ui.vibe.sitemap.tagline}
+  copyright={ui.vibe.sitemap.copyright}
+  groups={sitemap}
+  signup={{
+    title: ui.vibe.sitemap.signupTitle,
+    label: ui.vibe.sitemap.signupLabel,
+    submit: ui.vibe.sitemap.signupSubmit,
+    mode: "none",
+  }}
+  status={{ label: ui.vibe.sitemap.status, mode: "show" }}
+  layout="columns"
+  density="default"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/ContactPage.svelte b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/ContactPage.svelte
new file mode 100644
index 0000000..494fc2c
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/ContactPage.svelte
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The contact page of ThemeSupportCenterScreen. -->
+<script lang="ts">
+  import { ContactForm, PageIntro, SupportChannels, tpl, uniqLabel, type Feature } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="contact-pagehead"
+  title={ui.pages.supportCenter.contact.title}
+  text={ui.pages.supportCenter.contact.text}
+  cta={ui.pages.supportCenter.contact.cta}
+  href="#/missing"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<ContactForm
+  id="contact-contact-1"
+  title={ui.support.contact.title}
+  text={ui.support.contact.text}
+  labels={ui.support.contact.labels}
+  details={channels}
+  layout="single"
+  fields="full"
+  terms="hide"
+  page="section"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))}
+/>
+<SupportChannels
+  id="contact-channels"
+  title={ui.support.channels.title}
+  channels={channels}
+  empty={ui.empty.channels}
+  open={ui.support.channels.open}
+  layout="list"
+  cols="1-3"
+  action="link"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))}
+/>
+<ContactForm
+  id="contact-contact-3"
+  title={ui.support.contact.title}
+  text={ui.support.contact.text}
+  labels={ui.support.contact.labels}
+  details={channels}
+  layout="single"
+  fields="full"
+  terms="show"
+  page="section"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/FaqPage.svelte b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/FaqPage.svelte
new file mode 100644
index 0000000..dfbac58
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/FaqPage.svelte
@@ -0,0 +1,54 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The faq page of ThemeSupportCenterScreen. -->
+<script lang="ts">
+  import { FaqList, PageIntro, tpl, uniqLabel, type Faq, type FaqTab } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="faq-pagehead"
+  title={ui.pages.supportCenter.faq.title}
+  text={ui.pages.supportCenter.faq.text}
+  cta={ui.pages.supportCenter.faq.cta}
+  href="#/contact"
+  align="start"
+  tone="default"
+  density="default"
+/>
+<FaqList
+  id="faq-faq-1"
+  title={ui.site.pricing.faqTitle}
+  items={faq}
+  empty={ui.vibe.faq.empty}
+  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+  filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+  layout="chat"
+  cols="1"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))}
+/>
+<FaqList
+  id="faq-faq-2"
+  title={ui.site.pricing.faqTitle}
+  items={faq}
+  empty={ui.vibe.faq.empty}
+  search={{ label: ui.vibe.faq.search, query: "", mode: "field" }}
+  filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "", mode: "none" }}
+  layout="accordion"
+  cols="1"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/HomePage.svelte b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/HomePage.svelte
new file mode 100644
index 0000000..1ea2309
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/HomePage.svelte
@@ -0,0 +1,144 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The home page of ThemeSupportCenterScreen. -->
+<script lang="ts">
+  import {
+    ContactForm,
+    FaqList,
+    MediaList,
+    PageIntro,
+    SupportChannels,
+    tpl,
+    uniqLabel,
+    type Category,
+    type Faq,
+    type FaqTab,
+    type Feature,
+    type Post,
+    type Review,
+    type Stat,
+    type Step,
+  } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+  import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+  import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+  import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+  import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+  import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+  import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+  import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const STATS_FIELDS = {
+    "id": "id",
+    "label": "title",
+    "value": "metadata.value.value|number",
+    "icon": "metadata.icon.value",
+    "hint": "metadata.hint.value",
+  } as const;
+  const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+  const POSTS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "excerpt": "excerpt",
+    "category": "terms|term:category",
+    "author": "author_id|author",
+    "date": "metadata.date.value|date",
+    "minutes": "metadata.minutes.value",
+    "icon": "metadata.icon.value",
+    "href": "slug|route",
+    "image": "featured_media_id|media",
+  } as const;
+  const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+  const REVIEWS_FIELDS = {
+    "id": "id",
+    "title": "title",
+    "author": "author_id|author",
+    "rating": "metadata.rating.value",
+    "text": "metadata.text.value",
+    "date": "metadata.date.value|date",
+  } as const;
+  const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+  const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+  const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+  const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+  const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+  const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+  const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+  const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+  const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+</script>
+
+<PageIntro
+  id="home-pagehead"
+  title={ui.pages.supportCenter.home.title}
+  text={ui.pages.supportCenter.home.text}
+  cta={ui.pages.supportCenter.home.cta}
+  href="#/faq"
+  align="center"
+  tone="default"
+  density="default"
+/>
+<SupportChannels
+  id="home-channels"
+  title={ui.support.channels.title}
+  channels={channels}
+  empty={ui.empty.channels}
+  open={ui.support.channels.open}
+  layout="grid"
+  cols="1-3"
+  action="link"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))}
+/>
+<MediaList
+  id="home-medialist"
+  title={ui.marketing.mediaList.topics.title}
+  lead={ui.marketing.mediaList.topics.lead}
+  badge={ui.marketing.mediaList.topics.badge}
+  labels={{
+    list: ui.marketing.mediaList.topics.list,
+    count: ui.marketing.mediaList.count,
+    minutes: ui.content.labels.minutes,
+    featured: ui.marketing.mediaList.featured,
+    rating: ui.testimonials.rating,
+    figures: ui.marketing.mediaList.supportFigures,
+  }}
+  actions={{ mode: "one", cta: ui.marketing.mediaList.topics.cta, href: "#/start" }}
+  extras={{ stats, steps, posts, topics: categories, channels, reviews }}
+  layout="topics"
+  mediaSide="end"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))}
+/>
+<FaqList
+  id="home-faq"
+  title={ui.site.pricing.faqTitle}
+  items={faq}
+  empty={ui.vibe.faq.empty}
+  search={{ label: ui.vibe.faq.search, query: "", mode: "none" }}
+  filter={{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: "billing", mode: "categories" }}
+  layout="accordion"
+  cols="1"
+  tone="default"
+  density="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))}
+/>
+<ContactForm
+  id="home-contact"
+  title={ui.support.contact.title}
+  text={ui.support.contact.text}
+  labels={ui.support.contact.labels}
+  details={channels}
+  layout="split"
+  fields="full"
+  terms="hide"
+  page="section"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))}
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/MissingPage.svelte b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/MissingPage.svelte
new file mode 100644
index 0000000..75c15de
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/MissingPage.svelte
@@ -0,0 +1,25 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The missing page of ThemeSupportCenterScreen. -->
+<script lang="ts">
+  import { ErrorPage } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<ErrorPage
+  id="missing-errorpage"
+  title={ui.pages.supportCenter.missing.title}
+  text={ui.pages.supportCenter.missing.text}
+  status={ui.vibe.error.status}
+  actions={{
+    cta: ui.pages.supportCenter.missing.cta,
+    href: "#/moved",
+    secondary: ui.vibe.error.secondary,
+    secondaryHref: "#/",
+    mode: "one",
+  }}
+  layout="centered"
+  code="show"
+  tone="default"
+/>
diff --git a/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/MovedPage.svelte b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/MovedPage.svelte
new file mode 100644
index 0000000..b808a2a
--- /dev/null
+++ b/apps/host-svelte/xgen/screens/ThemeSupportCenterScreen/MovedPage.svelte
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The moved page of ThemeSupportCenterScreen. -->
+<script lang="ts">
+  import { ErrorPage, SupportChannels, tpl, uniqLabel, type Feature } from "@ui8kit/svelte-ui";
+  import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+  import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+  import { ui } from "@ui8kit/app-shared/content";
+  import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+  const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+  const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<ErrorPage
+  id="moved-errorpage"
+  title={ui.pages.supportCenter.moved.title}
+  text={ui.pages.supportCenter.moved.text}
+  status={ui.vibe.error.status}
+  actions={{
+    cta: ui.pages.supportCenter.moved.cta,
+    href: "#/",
+    secondary: ui.vibe.error.secondary,
+    secondaryHref: "#/",
+    mode: "one",
+  }}
+  layout="split"
+  code="show"
+  tone="default"
+/>
+<SupportChannels
+  id="moved-channels"
+  title={ui.support.channels.title}
+  channels={channels}
+  empty={ui.empty.channels}
+  open={ui.support.channels.open}
+  layout="grid"
+  cols="1-2"
+  action="link"
+  tone="default"
+  landmarkLabel={uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))}
+/>
diff --git a/apps/host-vue/index.html b/apps/host-vue/index.html
new file mode 100644
index 0000000..6e41e05
--- /dev/null
+++ b/apps/host-vue/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>xgen screens (Vue)</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/host-vue/package.json b/apps/host-vue/package.json
new file mode 100644
index 0000000..ff06ed0
--- /dev/null
+++ b/apps/host-vue/package.json
@@ -0,0 +1,42 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "host-vue",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Generated by xgen from xgen.app.json: the Vue 3 host of 15 screens (/<screen>/#/<route>). Generated under xgen/; src/ is the front controller.",
+  "ui8kit": {
+    "runtime": "vue",
+    "generated": true,
+    "kit": [
+      "xgen/runtime"
+    ],
+    "composition": [
+      "xgen/App.vue",
+      "xgen/screens"
+    ],
+    "blockRoot": [
+      "xgen/App.vue",
+      "xgen/screens"
+    ]
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "vue-tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@ui8kit/app-shared": "workspace:*",
+    "@ui8kit/vue-ui": "workspace:*",
+    "vue": "^3.5.43"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.2",
+    "vite": "^8.3.0",
+    "vue-tsc": "^3.3.12"
+  }
+}
diff --git a/apps/host-vue/src/app.css b/apps/host-vue/src/app.css
new file mode 100644
index 0000000..6399621
--- /dev/null
+++ b/apps/host-vue/src/app.css
@@ -0,0 +1,4 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/vue/src/app.ts (settings: apps/host-vue/xgen.app.json) */
+@import "@ui8kit/vue-ui/styles/index.css";
+@import "@ui8kit/app-shared/styles/skins.css";
diff --git a/apps/host-vue/src/main.ts b/apps/host-vue/src/main.ts
new file mode 100644
index 0000000..38bf92a
--- /dev/null
+++ b/apps/host-vue/src/main.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/vue/src/app.ts (settings: apps/host-vue/xgen.app.json)
+import { createApp } from "vue";
+import "./app.css";
+import { bootScreen, screenKeyOf } from "@ui8kit/app-shared/screens";
+import App from "../xgen/App.vue";
+
+const screen = screenKeyOf(location);
+const title = "xgen screens (Vue)";
+bootScreen(screen, "light", title);
+createApp(App, { screen, title }).mount("#app");
diff --git a/apps/host-vue/tsconfig.json b/apps/host-vue/tsconfig.json
new file mode 100644
index 0000000..9154b68
--- /dev/null
+++ b/apps/host-vue/tsconfig.json
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/vue/src/app.ts (settings: apps/host-vue/xgen.app.json)
+{
+  "compilerOptions": {
+    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "preserve",
+    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "xgen/**/*.ts", "xgen/**/*.vue"]
+}
diff --git a/apps/host-vue/vite.config.ts b/apps/host-vue/vite.config.ts
new file mode 100644
index 0000000..ca476e5
--- /dev/null
+++ b/apps/host-vue/vite.config.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/vue/src/app.ts (settings: apps/host-vue/xgen.app.json)
+import tailwindcss from "@tailwindcss/vite";
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), vue()],
+  server: { host: "127.0.0.1", port: 5182, strictPort: true, proxy: { "/__inspect": "http://127.0.0.1:5190" } },
+  preview: { host: "127.0.0.1", port: 5182, strictPort: true },
+});
diff --git a/apps/host-vue/xgen.app.json b/apps/host-vue/xgen.app.json
new file mode 100644
index 0000000..4eb167c
--- /dev/null
+++ b/apps/host-vue/xgen.app.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "../../xgen/schema/schemas/app.schema.json",
+  "specVersion": 1,
+  "name": "host-vue",
+  "runtime": "vue",
+  "screens": ["*"],
+  "title": "xgen screens (Vue)",
+  "port": 5182,
+  "locale": "en",
+  "theme": "light"
+}
diff --git a/apps/host-vue/xgen/.xgen-manifest.json b/apps/host-vue/xgen/.xgen-manifest.json
new file mode 100644
index 0000000..8c684f9
--- /dev/null
+++ b/apps/host-vue/xgen/.xgen-manifest.json
@@ -0,0 +1,271 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "apps/host-vue",
+  "files": {
+    "index.html": "ba8baea33cc2cba03780201dc069f981f4b49a12090b8b2dd39265a4b49ee735",
+    "package.json": "ffca020f9b00195e7f786aa24c1fc9b185992ddaea3b30168d00d067a5ec3e4e",
+    "src/app.css": "78b84c5ca4829304fdc97bd8f0a4adb2da8b85236bc5b060fdc0b0debc6ebf35",
+    "src/main.ts": "dfd456a312e284dce711ace6b584c0442655611ee76bb95767e5d181bd20ae39",
+    "tsconfig.json": "0cbf54a92e0f3c78ab8fbf11484269710a014612247b34c2c85c07947c469778",
+    "vite.config.ts": "01027282ecdce90fe58aa3b43de700a798eae1cdbaed8d9e7d6c25ada315d3de",
+    "xgen/App.vue": "b0541740b3971d4754f4a9075c2e5d1dca6c842b008a71056e6679b242b0b970",
+    "xgen/runtime/ScreenOutlet.vue": "b925444449bedcc2ea02d9907569ad085783a1776db2c85832b6ae26d45f75e0",
+    "xgen/runtime/url.ts": "db51b8dd272bae829b4d1c011ce6752b2dacc578e14ec12b3b5857351c75854b",
+    "xgen/screens/BlocksScreen.vue": "848a7583571789c5f714eb8fdccdb10e66da9ca8d26b1e4a9184dfa6d19e18de",
+    "xgen/screens/BlocksScreen/AboutmePage.vue": "2c95bc45d971ffb64a204ed08f33daa7b2363fb43ec247dfc18bba9243a9dcc8",
+    "xgen/screens/BlocksScreen/AboutPage.vue": "da8180728a31044a7a7a41e0e5a405dc81e0834b08915bd8622544cddfdd052a",
+    "xgen/screens/BlocksScreen/AccordionPage.vue": "d4cb340e6958026f921e2b871442a4c4f57fe7c8f0a6df18cd762c3faa97ae23",
+    "xgen/screens/BlocksScreen/ActivityPage.vue": "f6775e1d842961e1d56a516fca4d6563acaf62042d21205e52845ec39fb18a01",
+    "xgen/screens/BlocksScreen/AnnouncementPage.vue": "ef9908da8072af3aead47ae52ee66bc8819c618d61e0115ff4d9dfa168dac605",
+    "xgen/screens/BlocksScreen/ArticlePage.vue": "5a60b6a343895abdb3ac8fb74ed90d63985e8fa1cc78a0e5bb5b265b8d825546",
+    "xgen/screens/BlocksScreen/AuthPage.vue": "ad43e1821d72b0619e9c1e9f9af3b4a7c691774fc159096911edd18194945375",
+    "xgen/screens/BlocksScreen/AuthpagePage.vue": "efadb667437c3fbca003248b86c7dff9b4883612c7a49b8af160764b02799e89",
+    "xgen/screens/BlocksScreen/BeforeafterPage.vue": "8932ec80ebd580a82ff41665a538cf1bcb4b542eb4b5092f39e246c21c198ee0",
+    "xgen/screens/BlocksScreen/BentoPage.vue": "f1d14e47d431a6ecbde841899fae2dceb9412b809cb1b838d1baec5c112b5b90",
+    "xgen/screens/BlocksScreen/BottomnavPage.vue": "13c5b02b2a81ce3fa1421d79bcfb313c66108e288c4dc99e247d9510095b98a6",
+    "xgen/screens/BlocksScreen/CartdrawerPage.vue": "7be4f89034c521a646c9655723586003905a642bbe00ffb614349cd0c9dbc53c",
+    "xgen/screens/BlocksScreen/CartPage.vue": "32038fdde4ac187ac4d31a3867474d0a2d07c8487ef773b51471b322f2e4d006",
+    "xgen/screens/BlocksScreen/CartpagePage.vue": "559cf4503f5617ff792c3c03a46ef80548da8f44f238e434f7a452c99394dea4",
+    "xgen/screens/BlocksScreen/CategoriesPage.vue": "9f5989b9b395d2ad21e8a8f1beff39ecda2eb018735202d6f69fb8c10a17ed1b",
+    "xgen/screens/BlocksScreen/ChannelsPage.vue": "8905efcc4164253d151c99b45e60b46442e45f1785574c06c70b39100bf06dd7",
+    "xgen/screens/BlocksScreen/ChartPage.vue": "5191b30bf38d1a283cfdbca12b95cc6ff494d2dde90d3472cfeff52c461b55db",
+    "xgen/screens/BlocksScreen/ChecklistPage.vue": "fd89db1fd551d9ae50ff5b2eabd6f0259a448d958bfbbed85c36cac13f4e68e5",
+    "xgen/screens/BlocksScreen/CheckoutPage.vue": "8d77be39cfdc268d827080ef36269cf64798e046e1a8951b39fe20a883f9feaa",
+    "xgen/screens/BlocksScreen/ComparePage.vue": "0aa019aec8199ed5846e3731fdd05b148d653572119e15e5b8af51b4765223df",
+    "xgen/screens/BlocksScreen/ContactPage.vue": "a7b749fa4f72f19318f5da382837e5e481d883285aab9acedf29043244c6494c",
+    "xgen/screens/BlocksScreen/CookiePage.vue": "b05765e5948e2751017901a63e5e02a218dc1f6afba8807d9a9c4559c640f0c8",
+    "xgen/screens/BlocksScreen/CreditsPage.vue": "d95f3cc94a555dbb65fff5d9a0e1173e5c40d889ae924bed2d8d4e77843a0964",
+    "xgen/screens/BlocksScreen/CtaPage.vue": "2e0025ab155d602ae8aa351b7421aee55f6008e63ce3486fc02efb27164e2836",
+    "xgen/screens/BlocksScreen/CtaproofPage.vue": "9cb21f6dd29a3e0700ef8fd9c82327b6695c25a5fa5a882b363252dc6f1e780c",
+    "xgen/screens/BlocksScreen/DashshellPage.vue": "521e7358a801586e702b8d9678b92bf3b063009cb01ea98c0a98d1e6f7875681",
+    "xgen/screens/BlocksScreen/DeliveryPage.vue": "d7fc3050bfdc6eab7573aab92b8dae82526f304a0962842b31baef398091830d",
+    "xgen/screens/BlocksScreen/EmptyPage.vue": "45746ac9d69db52260f0487c7b3436683a488c20dc86b56a4e4a7aacc5881467",
+    "xgen/screens/BlocksScreen/ErrorpagePage.vue": "6082af9976f939ea05a4b6a08216de0313edac7d2b63a95ab9b2570bd83e1fbe",
+    "xgen/screens/BlocksScreen/FaqPage.vue": "8e2e01b1c56375ae66dca79851dba2db7f6978e13e29fe22deb13af59ce7bb23",
+    "xgen/screens/BlocksScreen/FaqsplitPage.vue": "31233a8bc1da02130ccdb8a392975765c59f8a642f3e08f81dc009a79a9e644f",
+    "xgen/screens/BlocksScreen/FeatureshowcasePage.vue": "0545f0928f3a2ad973311f6201ce2d34041ab6d8a2c6884b2ebfd1b313999f4c",
+    "xgen/screens/BlocksScreen/FeaturesPage.vue": "af1835c3a0c5800eeed31d333d0febaf226b3cbfbdd7888d154effceff05e633",
+    "xgen/screens/BlocksScreen/FeaturesplitPage.vue": "71554fed44eeff887d0b26d852f70cf299f04620f46b3321b2337cb6018f1812",
+    "xgen/screens/BlocksScreen/FeaturetabsPage.vue": "5221f524124ee53623c9391a13b206a16c913ff026d247ac38ff667553955eee",
+    "xgen/screens/BlocksScreen/FooterPage.vue": "24691994a1c782810db3d136b6be289a220dbf45ee96043e61f3866aba77ab63",
+    "xgen/screens/BlocksScreen/FootersplitPage.vue": "a1156f011470c6d898d9e37799aedf821b2f0efd84ef670ef3ab4ba288092653",
+    "xgen/screens/BlocksScreen/HeaderPage.vue": "156f188676c40a5b4cfc20d571ebe72d575bd2fbf3286cec0035f0bf7fce97f1",
+    "xgen/screens/BlocksScreen/HeroPage.vue": "ebbe3157dac466929052a762c3e58a68710fdd6981d1e88f66bfa5a2a1b794e1",
+    "xgen/screens/BlocksScreen/HerosplitPage.vue": "7febefe8c119b3e0488ad29f564eeb0a70e85ef94fcf2c934907cb4f6bc3d807",
+    "xgen/screens/BlocksScreen/IconwallPage.vue": "98b7fc3547bfdf8f98477add47d468e01108248f4eb6410269c4c3c1420ab6eb",
+    "xgen/screens/BlocksScreen/IndexPage.vue": "915f9134720a572e9edb99650ae57eac3ed7aaf7039ab4a04e2bba6466613085",
+    "xgen/screens/BlocksScreen/JobsPage.vue": "dfaf888701a91c6f7b3106816ed29a8bd5b63fa549b64aed0755501b7993f2a4",
+    "xgen/screens/BlocksScreen/KanbanPage.vue": "8923e7065a42510f7e81b731bf3cded396647671deb292d9b74eeb230676ec32",
+    "xgen/screens/BlocksScreen/LocationsPage.vue": "7ef3219915dabe72d8009d860903b94fad1622a1db8fb1f14d19b7b23f87970d",
+    "xgen/screens/BlocksScreen/LogosPage.vue": "9d694adce77ffc079696ff82a39fb519c4e7b090d36856636b058edc7cb27736",
+    "xgen/screens/BlocksScreen/MedialistPage.vue": "64133bad41b492a9276c52be47d1cf02fb760ca430ec15ed4a17b2b362dea300",
+    "xgen/screens/BlocksScreen/MegamenuPage.vue": "9b7daa076e7d6dc69ee00e66e2270cc3f74a29df2a380b3e396b2531ffc48419",
+    "xgen/screens/BlocksScreen/MetricsPage.vue": "24a2d023e532c759c405c9362eb1bed135222e177aa1b705777053a2e6423a77",
+    "xgen/screens/BlocksScreen/NavbarPage.vue": "23e67b00da45e2d9a09cce6660009ad8850a50521063bb99f9564ddd381d6c2b",
+    "xgen/screens/BlocksScreen/NewsletterPage.vue": "fe7f9a0cb4ab54800caf599a0aab3d349a9d753b49c3e1d91d55705cc297f0d2",
+    "xgen/screens/BlocksScreen/NotfoundPage.vue": "17e738fa0e2c5e5bcf529fb926469320a07085f6cad69fab7bfbd0349075aa66",
+    "xgen/screens/BlocksScreen/OrdersPage.vue": "7d8b9f7c9f8618c5a18f1c901514b4e6d045535f3067828dd812e1517672b23d",
+    "xgen/screens/BlocksScreen/OverviewPage.vue": "b6edf137dd00c870d83bd907de28784b1312e22a768b9b1b3a4cc55ad6998c49",
+    "xgen/screens/BlocksScreen/PageheadPage.vue": "99b80af3f5baf8c93503305af9660adcebcb8ae3af77defb9369b8f5c283d535",
+    "xgen/screens/BlocksScreen/PagetrailPage.vue": "6732ff0a0c079f9c1b564d4dc793c6933530704685f524880f05d2cb53324134",
+    "xgen/screens/BlocksScreen/PhotosPage.vue": "70ae44f9cdd10dfd2f837f9563c2bad9cee596c48201bdf5212f280150c7503c",
+    "xgen/screens/BlocksScreen/PlanPage.vue": "e47bacc57035e6900837a4a9fe0723cd67b562ad0e6ee878194d5bad9d56682b",
+    "xgen/screens/BlocksScreen/PostheaderPage.vue": "d9e891c618e44b7b4906375f07f1e852002ca0a55b2a3873b983492317e8a475",
+    "xgen/screens/BlocksScreen/PostshowcasePage.vue": "17f309a0430ae54032c42586d3142811b0451ca96cabfebf129f5d39d2c6b11c",
+    "xgen/screens/BlocksScreen/PostsPage.vue": "08b2bd5b3e5f642b3b63672c6c63f686628ebfd88b04c652799e16cfa847a3ff",
+    "xgen/screens/BlocksScreen/PostsplitPage.vue": "ee99c03a171938fdc915d806cf81b4b6abc4fe87e3900b2b97260203c3bedcfa",
+    "xgen/screens/BlocksScreen/PricingPage.vue": "9a1d539193fe3111fce44a9034ba5fde89a80af3baf9ef0eaca8c48fae3e9a41",
+    "xgen/screens/BlocksScreen/ProductinfoPage.vue": "fab5afeb4156e3489b64fc229923d0120fa5890a57a10dfae7ee2f18a79dc52a",
+    "xgen/screens/BlocksScreen/ProductPage.vue": "0fb8aebcdc920eaa0aa57cba6241875adff538c5cac7ac13d79623970a82dbbd",
+    "xgen/screens/BlocksScreen/ProductsPage.vue": "b3cc64951b48a639d43de068f246da7ebf4462fd07ffad1bae9950e52d5d4bdd",
+    "xgen/screens/BlocksScreen/ProfilePage.vue": "97337bf241a8a8d3a0462c934a4bb49384624ac871cc0dee37597767a6571c0b",
+    "xgen/screens/BlocksScreen/ProjectsPage.vue": "6376baaa417bd796f0e56b576e6ef977172a2d829430b0718440b2639060bb13",
+    "xgen/screens/BlocksScreen/ProofPage.vue": "78606eb9422dd803441dd0bd38d9bdeee341302e765214b0a710d86ecb286872",
+    "xgen/screens/BlocksScreen/QuotesplitPage.vue": "9327ec2d404a9ef3d136161b62c1bf5ce465741f1993285d44574a08e8a2e1bb",
+    "xgen/screens/BlocksScreen/ReviewsPage.vue": "0fbc8c5020bbf89e54650a421f27e7905cfb04c407d7e2fe3fec38e8aaa1ced2",
+    "xgen/screens/BlocksScreen/ScreenHeader.vue": "2fab0cf532d8febefd4bd195ce8286b405385fa7587e9c2530add13026acc3b0",
+    "xgen/screens/BlocksScreen/ShellPage.vue": "9bd3e25a3a8cc988bbee8da6cd673f2037fd89b8b69881b2374ffdc030ae919a",
+    "xgen/screens/BlocksScreen/SidenavPage.vue": "9718e9b43a71871947f4d2c09a5fae32fa463a26278b462f4041727581fe5dd5",
+    "xgen/screens/BlocksScreen/SitemapPage.vue": "c5bd64587b7f8e3f16ce98579f076919791782f9fe5c53c891960e645b8e3732",
+    "xgen/screens/BlocksScreen/SkeletonPage.vue": "dcf6722081fc34d14d1e60ea85ac7e34b09c0717bc3b35e8e752d3351ad74404",
+    "xgen/screens/BlocksScreen/SlotsPage.vue": "976245d6e31210dac29558c446c0ad1752bf71443da120abd7519a0769534273",
+    "xgen/screens/BlocksScreen/StatsPage.vue": "c6f3f67cc32396a16c2b19dd068aca6c3e2f1cfe3452f13a2b8f26b5db573f5b",
+    "xgen/screens/BlocksScreen/StepperPage.vue": "9726dccba2a1cb7f0d7b59276d10d5d256cff6c1aa5716f353e23c3c450bb402",
+    "xgen/screens/BlocksScreen/StepsPage.vue": "af1cf175dc227d02afee101fdbed50f7a8dfa3e23856152e925a48ca1e126087",
+    "xgen/screens/BlocksScreen/StickyPage.vue": "2809df63a892ab6faeef2995557eea39e3f504a8655b9257d9a3a74a09b71ee5",
+    "xgen/screens/BlocksScreen/StoreheroPage.vue": "891b3b00335fd3d9ad4307ebbb66e8520b7d43976d5fedbe1a611b6ded771c11",
+    "xgen/screens/BlocksScreen/StorytabsPage.vue": "f9054cd85343b94b41d3b06f5a43a446e675eddb559120d796b3fb6ec3db45e1",
+    "xgen/screens/BlocksScreen/SummaryPage.vue": "0293405c2a528d8a5d6c4cda3f4816d9c1984f1719334624e676a54bc6123cfa",
+    "xgen/screens/BlocksScreen/TeamPage.vue": "2807e19b43b14ceb88eb3b8334e4a420c3bf12bdf2eaee4b821630170b6354f8",
+    "xgen/screens/BlocksScreen/TemplatesPage.vue": "ddfa6918dc5551d579c3fcdbd1a5077ef32f8aa1079c972fdb6853b23218e434",
+    "xgen/screens/BlocksScreen/TestimonialsPage.vue": "7c37c5a41adaa0b2499ed7343f2203e52f776bca21396cc29d6428dae4b373ce",
+    "xgen/screens/BlocksScreen/TimelinePage.vue": "7acbfd26e9baeb3b8bffc72634a9b241064a3d53df31fac68104d967a9530cc3",
+    "xgen/screens/BlocksScreen/TourPage.vue": "57a67a4c17b79f4fc9c588de9fb92dfeec908ed8c8f98aff7f545592779c97cc",
+    "xgen/screens/BlocksScreen/UsagePage.vue": "0919b2a4d5b6bfba4cbcc70fbf3020dd8cb1c6dcb24a229187c967ebb7e206b7",
+    "xgen/screens/BlocksScreen/UspPage.vue": "0c0cf4ba88378c64bd38ad7d0ffe15b566c741fdb83bcce96b79bac2155e34e1",
+    "xgen/screens/BlocksScreen/VideomodalPage.vue": "e387237f5c180f2ecb5f816a93acfd1931f94811d08d46e1f69209fcd831d338",
+    "xgen/screens/BlocksScreen/VideosPage.vue": "d1d9553eb62c9d15588cea9789ead2f4b34af3b58a879afb7f8ecd998cb3f50a",
+    "xgen/screens/BlocksScreen/WizardPage.vue": "989ee08fd2db42661f23db6488ac7c84d5195b4c44bc12aae1bcd901cc46ee36",
+    "xgen/screens/BlocksScreen/ZonesPage.vue": "4e0676ef8d48b7f3583038d7fa91a3b6410425511ef534544389a761d8c76cb3",
+    "xgen/screens/CatalogScreen.vue": "bd169a16fe34095651763ab993c1baf6233ef791ec09e2ee675c8fa32311a1c7",
+    "xgen/screens/CatalogScreen/AppAuthPage.vue": "00949c11dc34173060b2a80cc413a7ef7318b74572dba350d553d3715f7ae27a",
+    "xgen/screens/CatalogScreen/AppAuthPagesPage.vue": "803dd19daf29dd035b62327744a30ad0ea7cc277edb44e5eb1112918452beca0",
+    "xgen/screens/CatalogScreen/AppBoardsPage.vue": "1f78a8d9cf30c406d677a2714e2958bdbd6d22156469633bb350046d59aa4c07",
+    "xgen/screens/CatalogScreen/AppDashboardShellsPage.vue": "f75315970aad37135e30f670e9222df6f6ecf99a42aa806805f6da922dc5433f",
+    "xgen/screens/CatalogScreen/AppGuidancePage.vue": "12db61fc27efce504045efbf8f594da90aee29dc7e0b0251e3f0b2f2489f1fdd",
+    "xgen/screens/CatalogScreen/AppOnboardingPage.vue": "cce336ff57b9da10c4b1c6c7f914d8d465ab253dfa44a9a891602d5d680bd594",
+    "xgen/screens/CatalogScreen/AppSettingsPage.vue": "b3a0fdaeb55628eea8332f1fc075fb047510716c54d5fda52004a5e4f20648cc",
+    "xgen/screens/CatalogScreen/AppShellPage.vue": "d58edcbe4b655f0f66eaf8677a316f497de8d0248501a2ac2b4adbe22cefe892",
+    "xgen/screens/CatalogScreen/AppStatesPage.vue": "1a5b983bd3fc4b92929a026f30b57d056e567b548dd6b389d99ee5ef993c167d",
+    "xgen/screens/CatalogScreen/AppWidgetsPage.vue": "2ef0a0abcaff369f19ef24182604b74116a39f69f361a22f98bb9d833eab7e65",
+    "xgen/screens/CatalogScreen/CommerceCartPage.vue": "7caa1742590358d090b79cbd4eba5144df0ac87373dabba832c0a07d0084e0cd",
+    "xgen/screens/CatalogScreen/CommerceCategoriesPage.vue": "6342535c352de35d9b3ad9610a965b3b69273e16341fc5fe4143668837a6535a",
+    "xgen/screens/CatalogScreen/CommerceCheckoutPage.vue": "2e14f5863fa5c37d561f453fa768122aa85aef3cce657cff655affa55948aab0",
+    "xgen/screens/CatalogScreen/CommerceDeliveryPage.vue": "a4ba9a971a58a0c22ad27f39e61aaded5065d87835969f368d279c55d503800e",
+    "xgen/screens/CatalogScreen/CommerceOrdersPage.vue": "42119b0c5771c4b9236dd63807c7057c12f6c593bb5853bcca8c8544a1044c2b",
+    "xgen/screens/CatalogScreen/CommerceProductPage.vue": "2502fc7782518f5283ad85db058d303205f623dbe5641a9ffe7ea006128bd25d",
+    "xgen/screens/CatalogScreen/CommerceProductsPage.vue": "d39014cdf018ea994ceb6e9c56f4120a4fe5297779271ba57e5abb1cf6942343",
+    "xgen/screens/CatalogScreen/CommerceStorefrontPage.vue": "cbbdefe57dacfff569e6ae57fbe37af0b85bc7961c3e7160138bc8828cbb8a2c",
+    "xgen/screens/CatalogScreen/ContentArticlePage.vue": "2a7ddf4a219e083a1eb8cd8152d5cf9424d977145e5a15a2490578bac905a352",
+    "xgen/screens/CatalogScreen/ContentBlogPage.vue": "6f50446d131c5856f0e57b163fc42416598f7629aa321bb9b541cce5545db079",
+    "xgen/screens/CatalogScreen/ContentPostHeaderPage.vue": "6ed6093337dec7ca4a9014a21a7e89eecae283ee1fc4464a9ddfd4b2cb25b4ab",
+    "xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.vue": "c7dfa58fcaa224100b4fe878f4925310870af5a537a0155ff38c9e8d49c2ec9e",
+    "xgen/screens/CatalogScreen/ContentPostShowcasePage.vue": "ec9e3626b45cb5ad95d9bd39b48f7830ec4f1869c6c6631f4f7d7dffef41705c",
+    "xgen/screens/CatalogScreen/ContentStoryTabsPage.vue": "296664c13d202e0c962242f5489431614a2984929e114d3f4023b4cd3d5f9785",
+    "xgen/screens/CatalogScreen/ContentTimelinePage.vue": "c580470dc54e1b5341ff8a78026e8d791eab57bea7dedd00842b445a8c62de3e",
+    "xgen/screens/CatalogScreen/IndexPage.vue": "ada7285068addfcc6351cee4a91fa7baad60bd1bf157d4b06559ada30e3bcc96",
+    "xgen/screens/CatalogScreen/MarketingAboutPage.vue": "dd104d153432cb9c53592f2c6cb1750106343773fecc4189fc70d92f0ea4d6e3",
+    "xgen/screens/CatalogScreen/MarketingCareersPage.vue": "6e8f1451a36a6fbef94c7b11b38de5be0caa609d547c68c3dfb4951e6ede26fc",
+    "xgen/screens/CatalogScreen/MarketingCtaPage.vue": "b48ef3648fb7115d58e1fa6e079e0b4b53816edf571961cd17062e1e9e6bd4a7",
+    "xgen/screens/CatalogScreen/MarketingCtaProofPage.vue": "b05d0702590effd63877ad474024fceebf2ff3d9d8f9f73ef9eedf910a509555",
+    "xgen/screens/CatalogScreen/MarketingFaqPage.vue": "4bd4caa909eec81b1eec07956fe0271aca66c851e45b024d3c124a352f3dcd96",
+    "xgen/screens/CatalogScreen/MarketingFeatureCardsPage.vue": "553adb9789deeeac964270ba1dc7b849c69005140cc407467588a9b597d2e973",
+    "xgen/screens/CatalogScreen/MarketingFeaturesPage.vue": "cb1129980f11e262b3d077bebcba44dae0dbcaf2047a04f4451d1110905b69a3",
+    "xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.vue": "e939f63522a9cf0116e2c4392365c45cddba2d8595d7df9a94bee04a525b7c45",
+    "xgen/screens/CatalogScreen/MarketingFooterPage.vue": "93da5aaa767d7746b5e0d141a0fc0a65d04295d31186886c4fea98b6b0a9924b",
+    "xgen/screens/CatalogScreen/MarketingFooterSplitPage.vue": "6370bf9a288d6b71a38c6eeec55e405c84059d18dcfb6aef0285e69f45f9cd22",
+    "xgen/screens/CatalogScreen/MarketingGalleryPage.vue": "5c3f5b6dce04499ef898d1415aed67df5bfb947bf30ac8749cfbdc7285c48507",
+    "xgen/screens/CatalogScreen/MarketingHeroPage.vue": "861e356e9b324ed226253b5ec00ab64597cbf775044ac92d2ba4c8b1dc605e8a",
+    "xgen/screens/CatalogScreen/MarketingHeroSplitPage.vue": "0ff5682f5c415a07b3ffee62add3403a4a81d34fccfc04b09ad50a63089d0b75",
+    "xgen/screens/CatalogScreen/MarketingHowItWorksPage.vue": "2c741630b0a79f4953233c858851fa5b1b46ec6dc6306b15de7ad26597a4faeb",
+    "xgen/screens/CatalogScreen/MarketingMediaListPage.vue": "4119f906c6be31a26b6eff00f28e378edac1b88e4971dfad45cc410d9500af69",
+    "xgen/screens/CatalogScreen/MarketingNavigationPage.vue": "c5cc09d215ea3846cfabefac74124063b3e434c72ac1e7c55b78fdc8aaf8782b",
+    "xgen/screens/CatalogScreen/MarketingPageHeadPage.vue": "996e72a9d240146c8e008c35cd622379cd0f6b16b76d7fe49f444c755b95976c",
+    "xgen/screens/CatalogScreen/MarketingPageTrailPage.vue": "da15147e56af9251800d7a00e9f9f85b6c43165fad8a65703918101c0e2fcb1b",
+    "xgen/screens/CatalogScreen/MarketingPortfolioPage.vue": "2a403c2f275354a47ed00225369246a3e19c22d62d905a3706c03793286774dd",
+    "xgen/screens/CatalogScreen/MarketingPricingPage.vue": "f6272f5694d3cbbd18ce9605ef061e0bad4f1f9cc7f85918ad57115ae7603357",
+    "xgen/screens/CatalogScreen/MarketingPricingToolsPage.vue": "c897d7596ca065715342ff77170ff4d5b7248e9a1b46a0577c3203f04a011a44",
+    "xgen/screens/CatalogScreen/MarketingProofPage.vue": "7c3c675e96befaeafca2d29d3de4020b05572b8261f257dcad41621f0121b3e2",
+    "xgen/screens/CatalogScreen/MarketingShowcasesPage.vue": "7510dee184049b48163be41766877b094f32fb8d6325e28a2904bab3907336a1",
+    "xgen/screens/CatalogScreen/MarketingStatsPage.vue": "5562984052295def2d699b66877c6224b02e02e5e37a5497afa6984918abd012",
+    "xgen/screens/CatalogScreen/MarketingTeamPage.vue": "5823feb933355d7faa7b7f9c25e17212359575736a380342694d36338cac7861",
+    "xgen/screens/CatalogScreen/MarketingTestimonialsPage.vue": "d45f1dff3eae213015c65bf8d53a917e8e0ff05758cf36e1cf743d08a7cd5dd4",
+    "xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.vue": "7cd11c82e285a701852994bb0a53891fd40f87c9d6bc16bf6738517f8eb5c527",
+    "xgen/screens/CatalogScreen/NotfoundPage.vue": "ec354d0bc360c03048e638a1bd2e6890ed381f3f5a35b5410a904f6e22a577a5",
+    "xgen/screens/CatalogScreen/PageCartPage.vue": "852044249d6688d32d1923681d48e06bcbfb47d4e0be56e9747d16874dacc461",
+    "xgen/screens/CatalogScreen/PageCheckoutPage.vue": "92d3180b1b4b5061d4031384b04227ca6cceada9aced2c717380135b9d19259a",
+    "xgen/screens/CatalogScreen/PageCompanyPage.vue": "3c788a5e5a7562ca71b737c50e2cc303510e0e3090ad673132117758fabc9ca3",
+    "xgen/screens/CatalogScreen/PagePortfolioPage.vue": "304dcfd08a20501ee71439d76f7257f73f7d77680749cb4b366d80f7103da37a",
+    "xgen/screens/CatalogScreen/PageProductDetailPage.vue": "372aa14b0d77721994995fe4f54e3b3320ad8e0ebeb62d56c453508c04bda736",
+    "xgen/screens/CatalogScreen/PageSaasLandingPage.vue": "a66d1de9588e512c35d8c4ca00fe5117496481cfdcec758e88383b4e362c8499",
+    "xgen/screens/CatalogScreen/PageShellClassicPage.vue": "3449cf00200a394ac5cf8ae6cd23cea43826219776d5b4962b36b8dfd2313ac0",
+    "xgen/screens/CatalogScreen/PageShellCollapsedEndPage.vue": "27c8d110a3dfd7ba16ffa634b90c463b87f9227a977d4678c34911027d9f906c",
+    "xgen/screens/CatalogScreen/PageShellCollapsedPage.vue": "2a45db1bc55c0ebe241d072175502f9ef1c1dad362db505fe0928499db177e61",
+    "xgen/screens/CatalogScreen/PageShellEndPage.vue": "3206fd52a4fd720afdc79fecbf5753bf19859119c470ebf1d0fe0424e3f26604",
+    "xgen/screens/CatalogScreen/PageShellInsetPage.vue": "f415043c975adadfa119b4dcbc6151122f5a48a534044881fbde153c56c115c9",
+    "xgen/screens/CatalogScreen/PageShellRailEndPage.vue": "717f03ebcbfef5a1a3491c3ccb101ae16573d989c5131cc9823d2be602f9e526",
+    "xgen/screens/CatalogScreen/PageShellRailFooterPage.vue": "186119742cfbf58db8adb3882ff2cb32dd2ab58fd0207eb4849699d1eacbe2e7",
+    "xgen/screens/CatalogScreen/PageShellRailPage.vue": "370f71f755f39f3416007440224a8fbe6ae45aca869e32e8aeae547c1e1e2b09",
+    "xgen/screens/CatalogScreen/PageShellSideOnlyPage.vue": "686128c8b1a10c25e1e57100fa204fd74f55e847c1e23b3f717a2271e9b64abc",
+    "xgen/screens/CatalogScreen/PageShellTopOnlyPage.vue": "9be13eebd7ba4782672f3c9e105bcb6212c95765cb43f960f02f19dc6d8d714e",
+    "xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.vue": "e6e8273e111547a741aa835f5a7f3b0d5606582f977c70f01a324a7f232eee88",
+    "xgen/screens/CatalogScreen/PageShellTwoLevelPage.vue": "042ffd9232cae30df6793961ecdf70102231c1b6b6612e6276696eb66d2459dd",
+    "xgen/screens/CatalogScreen/PagesPage.vue": "b193a22999995785fe24a9f9da385c1804fa166ade11abe717dc17a4802b2b3c",
+    "xgen/screens/CatalogScreen/PageStoreCatalogPage.vue": "cb10b6eef319f863beefc98f56da0daa3f75c2b7c36b173dfeae33a6a6c081d5",
+    "xgen/screens/CatalogScreen/PageStoreHome2Page.vue": "02f5faf3aa70d43d428d749c3337900a3c216459b778d0ecb058fe9da5b9c390",
+    "xgen/screens/CatalogScreen/PageStoreHomePage.vue": "f2973fa087190755414d97a9fce65e2e746bec59f296ae9f161954ab5a330766",
+    "xgen/screens/CatalogScreen/PromoBannersPage.vue": "50f8358af95f1d784d00d4a5505d754958001a755e2cdb6c641751a452e99252",
+    "xgen/screens/CatalogScreen/PromoNewsletterPage.vue": "79fabc10ac836957fdce73d9901199893866603616f842cc3b28ce4f10c19582",
+    "xgen/screens/CatalogScreen/ScreenHeader.vue": "a67e7805d3cf0768512b42b8b61e02c11992ee7c4b0f2f8702e31c8ed8d04c40",
+    "xgen/screens/CatalogScreen/SupportContactPage.vue": "871049337f5a6cf7fb01cebcd58a4c62c4e7af3f112094b457de378893991584",
+    "xgen/screens/CatalogScreen/SupportStatesPage.vue": "c114ccb23aaf975972d74f07662e078f3dd9385f78b61d3868932afea688e755",
+    "xgen/screens/PlansScreen.vue": "f297d8c346104e342f56eae23e141f2b9c1bd25fb5eeb15c81982ca1cd6e4d4c",
+    "xgen/screens/SiteScreen.vue": "418733931f63befa2c8a90aca07ecef3cfc45207ac47edf917d20c8f076593c9",
+    "xgen/screens/SkinsScreen.vue": "7e0eaee98d139c8f0bbcfe5c028e809e02693f4a2d02797fed5050d7a894e7f0",
+    "xgen/screens/SkinsScreen/IndexPage.vue": "bdfbd9eb05fc42421c886c853b81b73cc0b1fdc83a95b86224018bed3e30036c",
+    "xgen/screens/SkinsScreen/NotfoundPage.vue": "b0b92129261ef2136d9415d0fd319a6623ac27c21e71b8731ebaaf247c034b6c",
+    "xgen/screens/SkinsScreen/ScreenHeader.vue": "b9373270b5320764db830f239016d6e4d7842dcf29eff03f219946646abbbd6b",
+    "xgen/screens/ThemeAccountPortalScreen.vue": "c4b805f607e0116ad793d1e42e6f7698850e7bb92ae832a916df46643d2944c6",
+    "xgen/screens/ThemeAccountPortalScreen/CardsPage.vue": "f6e6b39692d8afce9d28d5c485de30f5c7fce65bd4b314a1aea3e94ebaea6873",
+    "xgen/screens/ThemeAccountPortalScreen/HomePage.vue": "4c297af6de0041302366fba7e845cbaae250661419e8f371b6f3e6eec5b35091",
+    "xgen/screens/ThemeAccountPortalScreen/JoinPage.vue": "ae5559b3b03c30c83807c7a11df049166df664a2735e0ecc2591da91b735edac",
+    "xgen/screens/ThemeAccountPortalScreen/MagicPage.vue": "b659a5ef66a173817794621730d1c10aedc0770f0a0f1ab85c88a877f0e16880",
+    "xgen/screens/ThemeAccountPortalScreen/MinimalPage.vue": "47ed06f2c3e9a4ab2aa553b97f13ffdd631c466ce235afbe5cc7209803b2326a",
+    "xgen/screens/ThemeAccountPortalScreen/OptionsPage.vue": "82fe9578d12418c52cebe88da539a7f2bf723438d12355e3e04b3046a5224e78",
+    "xgen/screens/ThemeAccountPortalScreen/ProfilePage.vue": "1cc987adbf50acb9a6a2bc2447731f23c3c9007622630d4c5b4e458937193e68",
+    "xgen/screens/ThemeAccountPortalScreen/ResetPage.vue": "f9607ecf14af5d0131ffe5a831b22fe8856daa36591de20d927326ce37f320ba",
+    "xgen/screens/ThemeAccountPortalScreen/SignupPage.vue": "a6cd217987e5c2156dd5bf22a7910fad2337fd9c3f74c324a12241d8cf400320",
+    "xgen/screens/ThemeAccountPortalScreen/StartPage.vue": "5194ad45554549d982d136e9d15f06ded21332eb3342414dd2ab2f3d01d3cc3b",
+    "xgen/screens/ThemeAccountPortalScreen/WelcomePage.vue": "bde041216e15cb1d5d1629e32c153953252ed29051e634acab217f5b2d3b06fe",
+    "xgen/screens/ThemeCommerceShopScreen.vue": "0db9cc3608a90f614d306d5aa82b9d05fe73841d512c6a6644b450bfaa5eb2b0",
+    "xgen/screens/ThemeCommerceShopScreen/BrowsePage.vue": "27e6fb6a813b18995fd15cf8d6485a9e13d83327f3d565dbf2347d296bbb2478",
+    "xgen/screens/ThemeCommerceShopScreen/CartPage.vue": "1643c568d3982545309190d81c51a0373efd3e94497b3b29f5c6aa9aae835e01",
+    "xgen/screens/ThemeCommerceShopScreen/CatalogPage.vue": "71994355e2b3fe2fee0138eed596cf365c11315cd04e2169179ec1ab859607bb",
+    "xgen/screens/ThemeCommerceShopScreen/CheckoutPage.vue": "38d5c9effb7b14d5742127f6304e2b9a4ff6da7468a39c0e2c78d5a9b692cd34",
+    "xgen/screens/ThemeCommerceShopScreen/DeliveryPage.vue": "924451ce52d093a344bac7b8dbb14f48784d0df90aea0bbccc44eabf1793065c",
+    "xgen/screens/ThemeCommerceShopScreen/HomePage.vue": "9a037a73ffe9cd6f87e51b868474086ec3c8c4884c0f9cc2f97000582032ddac",
+    "xgen/screens/ThemeCommerceShopScreen/OffersPage.vue": "8d5cef6743fa7b2bd16875534f98a0f1123d6c865a14587bbcb7a157de78a14b",
+    "xgen/screens/ThemeCommerceShopScreen/OrdersPage.vue": "ad0f67fafbdba6c0e69855ea2c667dc907a9648cca98aa6662af657a861cb15d",
+    "xgen/screens/ThemeCommerceShopScreen/ProductPage.vue": "0a1ce6efa54ea4e4978501729374a366b664fd92f2d48b08bcdf87501cf78746",
+    "xgen/screens/ThemeContentBlogScreen.vue": "922e227ff881c5eba43d4f47733e771e19e2daf90d328c8985699617e8f2ec12",
+    "xgen/screens/ThemeContentBlogScreen/ArchivePage.vue": "1865a8a7eda7c1c4d048a373b9e35444059ecd167ed9f13b91157f647f8e2ba9",
+    "xgen/screens/ThemeContentBlogScreen/ArticlesPage.vue": "7312326921395bcb703bd56422da4e8dd232fb3d256bc3cc5bc5c9d7785b4e65",
+    "xgen/screens/ThemeContentBlogScreen/EssayPage.vue": "0b031b32244e4cfe26815a8ef2b6eebb11d77045624e809f030f0037a709ee0a",
+    "xgen/screens/ThemeContentBlogScreen/HomePage.vue": "9f42f4382ee5ee610b3a4b6b69be8b809ff7cf0db98ca2cfd17e050e374523b1",
+    "xgen/screens/ThemeContentBlogScreen/PlainPage.vue": "097148e3d92a8bfdeb6d2306a87e0584f286a38495c5ed65c3b5f1425219dadd",
+    "xgen/screens/ThemeContentBlogScreen/PostPage.vue": "cfed141c739205d61cc0c7f27e7068243edb1e218c416dffff0cf09f1ef22666",
+    "xgen/screens/ThemeContentBlogScreen/StoryPage.vue": "1520b91d22bd6a7af91dc2b03c7e796f5cb864126108e574fbdbca2e7e711f40",
+    "xgen/screens/ThemeDashboardConsoleScreen.vue": "72a67fd1f7379b2b7f1a17c0912edd8f5b0cc266ddd0fd4f1c302ec6bc40cb11",
+    "xgen/screens/ThemeDashboardConsoleScreen/BoardPage.vue": "409b494e9a87c99e086f23c8cad2eecfddc4a4e3ebca5f6b1400469c4c4298a9",
+    "xgen/screens/ThemeDashboardConsoleScreen/HomePage.vue": "5bd7aeb8cc27c9bb29528803d38ab1d65b21bf46bdb6149ee04d9768d22bdb5d",
+    "xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.vue": "af37010f5e5057ace547f38b44653fe945496d5475eaff32e9a2a95b77907da3",
+    "xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.vue": "7ec24cfc7445a091a02a5677891bb1bcda5b59d8f8a8ed3efead11d00e79b17a",
+    "xgen/screens/ThemeDashboardConsoleScreen/StatesPage.vue": "7ed46398bace72e7a5bba15e314233da07a3f91eaf8aeef3b886dd636e8a02ac",
+    "xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.vue": "f374855a14d60fa39c73635958c2b25b473fe7deb92bfd0b0683cdcf1f7a656f",
+    "xgen/screens/ThemeMarketingLandingScreen.vue": "43261340cc2dd6c535be1333987e6f21c6cb135c6c734693540712c62e083c2e",
+    "xgen/screens/ThemeMarketingLandingScreen/CompanyPage.vue": "704fec5c5945c38084e9dcdc3265424dcfac99696044581d31e0a83756e8a56f",
+    "xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.vue": "5f5219e10ca28f11e3a69cfe8185c7c9e088e42de98b976403f7f3849f946116",
+    "xgen/screens/ThemeMarketingLandingScreen/EventsPage.vue": "c1e32e3ebb6b945d070b0d7cee6eb64e16bfd066082dcc25dfa112679de0517e",
+    "xgen/screens/ThemeMarketingLandingScreen/HomePage.vue": "8d6e3bc0fcef7dc6ad215c8eee93ff76c0ee0aca4932a3b6ea00b1f6cc37073d",
+    "xgen/screens/ThemeMarketingLandingScreen/LaunchPage.vue": "08f3c435a0ceac6a0ff5be74ffbd91dfe02365a47cc70a8735a4a0f083fab9fb",
+    "xgen/screens/ThemeMarketingLandingScreen/StudioPage.vue": "7ed6890a403c3f3ea359e22b4b09189424453df1fc69753ce8aff9e60055daa0",
+    "xgen/screens/ThemeMarketingLandingScreen/TeamsPage.vue": "59d7819ec38f959b8c22252ab54bba909a460a1cfaa9d34d13c668e14f0564e7",
+    "xgen/screens/ThemeMarketingLandingScreen/WorkPage.vue": "a0e7cae236d6af028c99379e66b689766bb85bfc99cf2df6cc12aae8a8ca282e",
+    "xgen/screens/ThemeMarketingPricingScreen.vue": "bd2c7df0216465213a9a1be50e5d23a663e53cdeae40c734de299975a0b048d5",
+    "xgen/screens/ThemeMarketingPricingScreen/ComparePage.vue": "452c4531627c881eee22f2c0afceb96a7f8d07a56ec7e7583170b5a91519c19d",
+    "xgen/screens/ThemeMarketingPricingScreen/HomePage.vue": "fc9a074c3c4578731ba2b12f03a77cc5a9c26840e3406fe214e744614ebe8501",
+    "xgen/screens/ThemeMarketingPricingScreen/PlansPage.vue": "b13e47e1d16e55508a624139f32c5ebb1eb9dff87ddc1d4f16c52a9b4fd2a5ef",
+    "xgen/screens/ThemeMarketingPricingScreen/UsagePage.vue": "1ee896283224712d9fdfd83ba05705044d4d089bb219acd39b3a0e5fa1efdfec",
+    "xgen/screens/ThemeMarketingProductScreen.vue": "9a85dc7212f4e904f22e22b5bdba94839437dd2ed53997a521a20a1632ca2162",
+    "xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.vue": "f85bf7d90ae5263c9cff94434ab80076ea39b84b53a7098ed883d9b35be36b46",
+    "xgen/screens/ThemeMarketingProductScreen/HomePage.vue": "d6d4ebe670772b530ea1df99860da8e4e9b8aa4cca792eaaadefb1d7cb2590bc",
+    "xgen/screens/ThemeMarketingProductScreen/NavigationPage.vue": "50ea3cca1bb12e441fe6ab8b9511501b92b6f9b98ce382fe0ca82c09dc017592",
+    "xgen/screens/ThemeMarketingProductScreen/TourPage.vue": "b384948db00c7a638216d325397ea92ce6dbc1b8d33b5d62b3ce217f389ca5d7",
+    "xgen/screens/ThemeOnboardingFlowScreen.vue": "f4c6ec3d80441a2d191acfc18a3919e98e971a216c400534283e147705240daa",
+    "xgen/screens/ThemeOnboardingFlowScreen/HomePage.vue": "ad489cc7aa78097014958fb02206bd28a8808bd5fc60f5a6b5a6c9dc709dd22c",
+    "xgen/screens/ThemeOnboardingFlowScreen/SetupPage.vue": "233499be6108b2a27c7b56cf2b6b498267b9d66ba70f501c1c1a44f7e3ce5a63",
+    "xgen/screens/ThemeOnboardingFlowScreen/TourPage.vue": "35320f0d4a961187a261b8a835fee755a07f818ddc64e218d874748a2e8dc075",
+    "xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.vue": "6b7356cd655c70d3635f54f7cecbbde68c0d2af39d2bcc5634faef515f9c7826",
+    "xgen/screens/ThemePromoCampaignScreen.vue": "d40d7a7276f0e8904ca3220a0a1e6497a59645d4547e4c9cf1d3bb89942bd0e0",
+    "xgen/screens/ThemePromoCampaignScreen/HomePage.vue": "fd3740179a524cc01f81fd6909db4d77f68499fccd514eb9661686798e276640",
+    "xgen/screens/ThemePromoCampaignScreen/LaunchPage.vue": "c6a66e276e5e03aa853dd5ed0021817b3d82f13c740820f8b392e2afe4406ea5",
+    "xgen/screens/ThemePromoCampaignScreen/NoticesPage.vue": "f40507197cee263d44f23742d93ef33aac3b49bf1c670fa8bd7a31656cdeedc1",
+    "xgen/screens/ThemePromoCampaignScreen/OfferPage.vue": "f3683b7e439070155e398317ad383b1d4cec5d9a426cdaf5aa18d40699531a0a",
+    "xgen/screens/ThemeSupportCenterScreen.vue": "201926b286d8719c024a71444dd9d2ed1519dbb1cb14d12cf2ecb862a1614929",
+    "xgen/screens/ThemeSupportCenterScreen/ContactPage.vue": "ff738eece97d57f7f672c12738c23cf7e329e8b7497b9161c1e280d7cc855720",
+    "xgen/screens/ThemeSupportCenterScreen/FaqPage.vue": "3edbab6f99107bff50b8f1ae0c5cdeb46480f4a2a70b81e704fa2373c7bf0523",
+    "xgen/screens/ThemeSupportCenterScreen/HomePage.vue": "52603a4c6e0ae8d87f1ded099d047b9ba92e61cce1629b79d94cac5ed58e2a96",
+    "xgen/screens/ThemeSupportCenterScreen/MissingPage.vue": "c540f8b3f567cdc9e0039c94a46cb062247ced007e740da592d6b565b135e98d",
+    "xgen/screens/ThemeSupportCenterScreen/MovedPage.vue": "cf686a8d065b2676d9b62116acb3e21a7eba06c5e123f1dd3f3959335d33251b"
+  }
+}
diff --git a/apps/host-vue/xgen/App.vue b/apps/host-vue/xgen/App.vue
new file mode 100644
index 0000000..e1c0c8d
--- /dev/null
+++ b/apps/host-vue/xgen/App.vue
@@ -0,0 +1,41 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/runtimes/vue/src/app.ts (settings: apps/host-vue/xgen.app.json) -->
+<script setup lang="ts">
+import type { Component } from "vue";
+import { Block, Link, List, ListItem, Title } from "@ui8kit/vue-ui";
+import { SCREENS } from "@ui8kit/app-shared/screens";
+import { url } from "./runtime/url";
+import ScreenOutlet from "./runtime/ScreenOutlet.vue";
+
+const { screen, title } = defineProps<{ screen: string; title: string }>();
+
+/** one chunk per screen: a landing is a screen spec, not an app */
+const LOADERS: Record<string, () => Promise<{ default: Component }>> = {
+  "blocks": () => import("./screens/BlocksScreen.vue"),
+  "catalog": () => import("./screens/CatalogScreen.vue"),
+  "plans": () => import("./screens/PlansScreen.vue"),
+  "site": () => import("./screens/SiteScreen.vue"),
+  "skins": () => import("./screens/SkinsScreen.vue"),
+  "theme-account-portal": () => import("./screens/ThemeAccountPortalScreen.vue"),
+  "theme-commerce-shop": () => import("./screens/ThemeCommerceShopScreen.vue"),
+  "theme-content-blog": () => import("./screens/ThemeContentBlogScreen.vue"),
+  "theme-dashboard-console": () => import("./screens/ThemeDashboardConsoleScreen.vue"),
+  "theme-marketing-landing": () => import("./screens/ThemeMarketingLandingScreen.vue"),
+  "theme-marketing-pricing": () => import("./screens/ThemeMarketingPricingScreen.vue"),
+  "theme-marketing-product": () => import("./screens/ThemeMarketingProductScreen.vue"),
+  "theme-onboarding-flow": () => import("./screens/ThemeOnboardingFlowScreen.vue"),
+  "theme-promo-campaign": () => import("./screens/ThemePromoCampaignScreen.vue"),
+  "theme-support-center": () => import("./screens/ThemeSupportCenterScreen.vue"),
+};
+const load = LOADERS[screen];
+</script>
+
+<template>
+  <Block v-if="!load" tag="main" id="main-content" class="mx-auto w-full max-w-3xl px-4 py-12" data-testid="host-index">
+    <Title :as="1" size="2xl" weight="semibold">{{ title }}</Title>
+    <List class="mt-6 grid gap-2">
+      <ListItem v-for="s in SCREENS" :key="s.key"><Link class="underline" :href="`/${s.key}/`" data-testid="host-screen">{{ s.key }}</Link></ListItem>
+    </List>
+  </Block>
+  <ScreenOutlet v-else :load="load" :url="url" />
+</template>
diff --git a/apps/host-vue/xgen/runtime/ScreenOutlet.vue b/apps/host-vue/xgen/runtime/ScreenOutlet.vue
new file mode 100644
index 0000000..4999f2b
--- /dev/null
+++ b/apps/host-vue/xgen/runtime/ScreenOutlet.vue
@@ -0,0 +1,14 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/runtimes/vue/src/app.ts (settings: apps/host-vue/xgen.app.json) -->
+<!-- The outlet of the host frame: renders the screen chunk behind a loader. -->
+<script setup lang="ts">
+import { defineAsyncComponent, type Component } from "vue";
+import type { UrlPort } from "@ui8kit/app-shared/runtime/core";
+
+const { load, url } = defineProps<{ load: () => Promise<{ default: Component }>; url: UrlPort }>();
+const Screen = defineAsyncComponent(load);
+</script>
+
+<template>
+  <Screen :url="url" />
+</template>
diff --git a/apps/host-vue/xgen/runtime/url.ts b/apps/host-vue/xgen/runtime/url.ts
new file mode 100644
index 0000000..f87a5ab
--- /dev/null
+++ b/apps/host-vue/xgen/runtime/url.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/vue/assets/url.ts
+// The URL as a reactive port for Vue: the hash store of the app runtime, mirrored into a reactive object.
+import { reactive } from "vue";
+import { createHashStore, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+
+const store = createHashStore();
+
+export const url: UrlPort = reactive({ ...store.getSnapshot(), go: store.go });
+store.subscribe(() => Object.assign(url, store.getSnapshot()));
diff --git a/apps/host-vue/xgen/screens/BlocksScreen.vue b/apps/host-vue/xgen/screens/BlocksScreen.vue
new file mode 100644
index 0000000..fcffc86
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen.vue
@@ -0,0 +1,309 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!--
+  The block gallery: an index of blocks grouped by topic and one page per block with every variant, on the
+  fixtures. Built from the block catalog; nothing is written by hand.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block } from "@ui8kit/vue-ui";
+import IndexPage from "./BlocksScreen/IndexPage.vue";
+import AboutPage from "./BlocksScreen/AboutPage.vue";
+import AboutmePage from "./BlocksScreen/AboutmePage.vue";
+import AccordionPage from "./BlocksScreen/AccordionPage.vue";
+import BeforeafterPage from "./BlocksScreen/BeforeafterPage.vue";
+import BentoPage from "./BlocksScreen/BentoPage.vue";
+import ComparePage from "./BlocksScreen/ComparePage.vue";
+import CreditsPage from "./BlocksScreen/CreditsPage.vue";
+import CtaPage from "./BlocksScreen/CtaPage.vue";
+import CtaproofPage from "./BlocksScreen/CtaproofPage.vue";
+import FaqPage from "./BlocksScreen/FaqPage.vue";
+import FaqsplitPage from "./BlocksScreen/FaqsplitPage.vue";
+import FeaturesPage from "./BlocksScreen/FeaturesPage.vue";
+import FeatureshowcasePage from "./BlocksScreen/FeatureshowcasePage.vue";
+import FeaturesplitPage from "./BlocksScreen/FeaturesplitPage.vue";
+import FeaturetabsPage from "./BlocksScreen/FeaturetabsPage.vue";
+import FooterPage from "./BlocksScreen/FooterPage.vue";
+import FootersplitPage from "./BlocksScreen/FootersplitPage.vue";
+import HeaderPage from "./BlocksScreen/HeaderPage.vue";
+import HeroPage from "./BlocksScreen/HeroPage.vue";
+import HerosplitPage from "./BlocksScreen/HerosplitPage.vue";
+import IconwallPage from "./BlocksScreen/IconwallPage.vue";
+import JobsPage from "./BlocksScreen/JobsPage.vue";
+import LogosPage from "./BlocksScreen/LogosPage.vue";
+import MedialistPage from "./BlocksScreen/MedialistPage.vue";
+import MegamenuPage from "./BlocksScreen/MegamenuPage.vue";
+import NavbarPage from "./BlocksScreen/NavbarPage.vue";
+import PageheadPage from "./BlocksScreen/PageheadPage.vue";
+import PagetrailPage from "./BlocksScreen/PagetrailPage.vue";
+import PhotosPage from "./BlocksScreen/PhotosPage.vue";
+import PlanPage from "./BlocksScreen/PlanPage.vue";
+import PricingPage from "./BlocksScreen/PricingPage.vue";
+import ProjectsPage from "./BlocksScreen/ProjectsPage.vue";
+import ProofPage from "./BlocksScreen/ProofPage.vue";
+import QuotesplitPage from "./BlocksScreen/QuotesplitPage.vue";
+import SitemapPage from "./BlocksScreen/SitemapPage.vue";
+import StatsPage from "./BlocksScreen/StatsPage.vue";
+import StepsPage from "./BlocksScreen/StepsPage.vue";
+import StickyPage from "./BlocksScreen/StickyPage.vue";
+import TeamPage from "./BlocksScreen/TeamPage.vue";
+import TemplatesPage from "./BlocksScreen/TemplatesPage.vue";
+import TestimonialsPage from "./BlocksScreen/TestimonialsPage.vue";
+import UsagePage from "./BlocksScreen/UsagePage.vue";
+import VideosPage from "./BlocksScreen/VideosPage.vue";
+import CartPage from "./BlocksScreen/CartPage.vue";
+import CartdrawerPage from "./BlocksScreen/CartdrawerPage.vue";
+import CartpagePage from "./BlocksScreen/CartpagePage.vue";
+import CategoriesPage from "./BlocksScreen/CategoriesPage.vue";
+import CheckoutPage from "./BlocksScreen/CheckoutPage.vue";
+import DeliveryPage from "./BlocksScreen/DeliveryPage.vue";
+import LocationsPage from "./BlocksScreen/LocationsPage.vue";
+import OrdersPage from "./BlocksScreen/OrdersPage.vue";
+import ProductPage from "./BlocksScreen/ProductPage.vue";
+import ProductinfoPage from "./BlocksScreen/ProductinfoPage.vue";
+import ProductsPage from "./BlocksScreen/ProductsPage.vue";
+import ReviewsPage from "./BlocksScreen/ReviewsPage.vue";
+import SlotsPage from "./BlocksScreen/SlotsPage.vue";
+import StoreheroPage from "./BlocksScreen/StoreheroPage.vue";
+import SummaryPage from "./BlocksScreen/SummaryPage.vue";
+import UspPage from "./BlocksScreen/UspPage.vue";
+import ZonesPage from "./BlocksScreen/ZonesPage.vue";
+import AnnouncementPage from "./BlocksScreen/AnnouncementPage.vue";
+import CookiePage from "./BlocksScreen/CookiePage.vue";
+import NewsletterPage from "./BlocksScreen/NewsletterPage.vue";
+import ArticlePage from "./BlocksScreen/ArticlePage.vue";
+import PostheaderPage from "./BlocksScreen/PostheaderPage.vue";
+import PostsPage from "./BlocksScreen/PostsPage.vue";
+import PostshowcasePage from "./BlocksScreen/PostshowcasePage.vue";
+import PostsplitPage from "./BlocksScreen/PostsplitPage.vue";
+import StorytabsPage from "./BlocksScreen/StorytabsPage.vue";
+import TimelinePage from "./BlocksScreen/TimelinePage.vue";
+import AuthPage from "./BlocksScreen/AuthPage.vue";
+import AuthpagePage from "./BlocksScreen/AuthpagePage.vue";
+import ProfilePage from "./BlocksScreen/ProfilePage.vue";
+import WizardPage from "./BlocksScreen/WizardPage.vue";
+import ActivityPage from "./BlocksScreen/ActivityPage.vue";
+import BottomnavPage from "./BlocksScreen/BottomnavPage.vue";
+import ChartPage from "./BlocksScreen/ChartPage.vue";
+import DashshellPage from "./BlocksScreen/DashshellPage.vue";
+import EmptyPage from "./BlocksScreen/EmptyPage.vue";
+import KanbanPage from "./BlocksScreen/KanbanPage.vue";
+import MetricsPage from "./BlocksScreen/MetricsPage.vue";
+import OverviewPage from "./BlocksScreen/OverviewPage.vue";
+import ShellPage from "./BlocksScreen/ShellPage.vue";
+import SidenavPage from "./BlocksScreen/SidenavPage.vue";
+import SkeletonPage from "./BlocksScreen/SkeletonPage.vue";
+import ChecklistPage from "./BlocksScreen/ChecklistPage.vue";
+import StepperPage from "./BlocksScreen/StepperPage.vue";
+import TourPage from "./BlocksScreen/TourPage.vue";
+import VideomodalPage from "./BlocksScreen/VideomodalPage.vue";
+import ChannelsPage from "./BlocksScreen/ChannelsPage.vue";
+import ContactPage from "./BlocksScreen/ContactPage.vue";
+import ErrorpagePage from "./BlocksScreen/ErrorpagePage.vue";
+import NotfoundPage from "./BlocksScreen/NotfoundPage.vue";
+import ScreenHeader from "./BlocksScreen/ScreenHeader.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ROUTES = [
+  {"path":"","area":"index"},
+  {"path":"about","area":"about"},
+  {"path":"aboutme","area":"aboutme"},
+  {"path":"accordion","area":"accordion"},
+  {"path":"beforeafter","area":"beforeafter"},
+  {"path":"bento","area":"bento"},
+  {"path":"compare","area":"compare"},
+  {"path":"credits","area":"credits"},
+  {"path":"cta","area":"cta"},
+  {"path":"ctaproof","area":"ctaproof"},
+  {"path":"faq","area":"faq"},
+  {"path":"faqsplit","area":"faqsplit"},
+  {"path":"features","area":"features"},
+  {"path":"featureshowcase","area":"featureshowcase"},
+  {"path":"featuresplit","area":"featuresplit"},
+  {"path":"featuretabs","area":"featuretabs"},
+  {"path":"footer","area":"footer"},
+  {"path":"footersplit","area":"footersplit"},
+  {"path":"header","area":"header"},
+  {"path":"hero","area":"hero"},
+  {"path":"herosplit","area":"herosplit"},
+  {"path":"iconwall","area":"iconwall"},
+  {"path":"jobs","area":"jobs"},
+  {"path":"logos","area":"logos"},
+  {"path":"medialist","area":"medialist"},
+  {"path":"megamenu","area":"megamenu"},
+  {"path":"navbar","area":"navbar"},
+  {"path":"pagehead","area":"pagehead"},
+  {"path":"pagetrail","area":"pagetrail"},
+  {"path":"photos","area":"photos"},
+  {"path":"plan","area":"plan"},
+  {"path":"pricing","area":"pricing"},
+  {"path":"projects","area":"projects"},
+  {"path":"proof","area":"proof"},
+  {"path":"quotesplit","area":"quotesplit"},
+  {"path":"sitemap","area":"sitemap"},
+  {"path":"stats","area":"stats"},
+  {"path":"steps","area":"steps"},
+  {"path":"sticky","area":"sticky"},
+  {"path":"team","area":"team"},
+  {"path":"templates","area":"templates"},
+  {"path":"testimonials","area":"testimonials"},
+  {"path":"usage","area":"usage"},
+  {"path":"videos","area":"videos"},
+  {"path":"cart","area":"cart"},
+  {"path":"cartdrawer","area":"cartdrawer"},
+  {"path":"cartpage","area":"cartpage"},
+  {"path":"categories","area":"categories"},
+  {"path":"checkout","area":"checkout"},
+  {"path":"delivery","area":"delivery"},
+  {"path":"locations","area":"locations"},
+  {"path":"orders","area":"orders"},
+  {"path":"product","area":"product"},
+  {"path":"productinfo","area":"productinfo"},
+  {"path":"products","area":"products"},
+  {"path":"reviews","area":"reviews"},
+  {"path":"slots","area":"slots"},
+  {"path":"storehero","area":"storehero"},
+  {"path":"summary","area":"summary"},
+  {"path":"usp","area":"usp"},
+  {"path":"zones","area":"zones"},
+  {"path":"announcement","area":"announcement"},
+  {"path":"cookie","area":"cookie"},
+  {"path":"newsletter","area":"newsletter"},
+  {"path":"article","area":"article"},
+  {"path":"postheader","area":"postheader"},
+  {"path":"posts","area":"posts"},
+  {"path":"postshowcase","area":"postshowcase"},
+  {"path":"postsplit","area":"postsplit"},
+  {"path":"storytabs","area":"storytabs"},
+  {"path":"timeline","area":"timeline"},
+  {"path":"auth","area":"auth"},
+  {"path":"authpage","area":"authpage"},
+  {"path":"profile","area":"profile"},
+  {"path":"wizard","area":"wizard"},
+  {"path":"activity","area":"activity"},
+  {"path":"bottomnav","area":"bottomnav"},
+  {"path":"chart","area":"chart"},
+  {"path":"dashshell","area":"dashshell"},
+  {"path":"empty","area":"empty"},
+  {"path":"kanban","area":"kanban"},
+  {"path":"metrics","area":"metrics"},
+  {"path":"overview","area":"overview"},
+  {"path":"shell","area":"shell"},
+  {"path":"sidenav","area":"sidenav"},
+  {"path":"skeleton","area":"skeleton"},
+  {"path":"checklist","area":"checklist"},
+  {"path":"stepper","area":"stepper"},
+  {"path":"tour","area":"tour"},
+  {"path":"videomodal","area":"videomodal"},
+  {"path":"channels","area":"channels"},
+  {"path":"contact","area":"contact"},
+  {"path":"errorpage","area":"errorpage"},
+] as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "notfound", params: {} as Record<string, string> });
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <ScreenHeader />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <IndexPage v-if="route.area === 'index'" />
+    <AboutPage v-else-if="route.area === 'about'" />
+    <AboutmePage v-else-if="route.area === 'aboutme'" />
+    <AccordionPage v-else-if="route.area === 'accordion'" />
+    <BeforeafterPage v-else-if="route.area === 'beforeafter'" />
+    <BentoPage v-else-if="route.area === 'bento'" />
+    <ComparePage v-else-if="route.area === 'compare'" />
+    <CreditsPage v-else-if="route.area === 'credits'" />
+    <CtaPage v-else-if="route.area === 'cta'" />
+    <CtaproofPage v-else-if="route.area === 'ctaproof'" />
+    <FaqPage v-else-if="route.area === 'faq'" />
+    <FaqsplitPage v-else-if="route.area === 'faqsplit'" />
+    <FeaturesPage v-else-if="route.area === 'features'" />
+    <FeatureshowcasePage v-else-if="route.area === 'featureshowcase'" />
+    <FeaturesplitPage v-else-if="route.area === 'featuresplit'" />
+    <FeaturetabsPage v-else-if="route.area === 'featuretabs'" />
+    <FooterPage v-else-if="route.area === 'footer'" />
+    <FootersplitPage v-else-if="route.area === 'footersplit'" />
+    <HeaderPage v-else-if="route.area === 'header'" />
+    <HeroPage v-else-if="route.area === 'hero'" />
+    <HerosplitPage v-else-if="route.area === 'herosplit'" />
+    <IconwallPage v-else-if="route.area === 'iconwall'" />
+    <JobsPage v-else-if="route.area === 'jobs'" />
+    <LogosPage v-else-if="route.area === 'logos'" />
+    <MedialistPage v-else-if="route.area === 'medialist'" />
+    <MegamenuPage v-else-if="route.area === 'megamenu'" />
+    <NavbarPage v-else-if="route.area === 'navbar'" />
+    <PageheadPage v-else-if="route.area === 'pagehead'" />
+    <PagetrailPage v-else-if="route.area === 'pagetrail'" />
+    <PhotosPage v-else-if="route.area === 'photos'" />
+    <PlanPage v-else-if="route.area === 'plan'" />
+    <PricingPage v-else-if="route.area === 'pricing'" />
+    <ProjectsPage v-else-if="route.area === 'projects'" />
+    <ProofPage v-else-if="route.area === 'proof'" />
+    <QuotesplitPage v-else-if="route.area === 'quotesplit'" />
+    <SitemapPage v-else-if="route.area === 'sitemap'" />
+    <StatsPage v-else-if="route.area === 'stats'" />
+    <StepsPage v-else-if="route.area === 'steps'" />
+    <StickyPage v-else-if="route.area === 'sticky'" />
+    <TeamPage v-else-if="route.area === 'team'" />
+    <TemplatesPage v-else-if="route.area === 'templates'" />
+    <TestimonialsPage v-else-if="route.area === 'testimonials'" />
+    <UsagePage v-else-if="route.area === 'usage'" />
+    <VideosPage v-else-if="route.area === 'videos'" />
+    <CartPage v-else-if="route.area === 'cart'" />
+    <CartdrawerPage v-else-if="route.area === 'cartdrawer'" />
+    <CartpagePage v-else-if="route.area === 'cartpage'" />
+    <CategoriesPage v-else-if="route.area === 'categories'" />
+    <CheckoutPage v-else-if="route.area === 'checkout'" />
+    <DeliveryPage v-else-if="route.area === 'delivery'" />
+    <LocationsPage v-else-if="route.area === 'locations'" />
+    <OrdersPage v-else-if="route.area === 'orders'" />
+    <ProductPage v-else-if="route.area === 'product'" />
+    <ProductinfoPage v-else-if="route.area === 'productinfo'" />
+    <ProductsPage v-else-if="route.area === 'products'" />
+    <ReviewsPage v-else-if="route.area === 'reviews'" />
+    <SlotsPage v-else-if="route.area === 'slots'" />
+    <StoreheroPage v-else-if="route.area === 'storehero'" />
+    <SummaryPage v-else-if="route.area === 'summary'" />
+    <UspPage v-else-if="route.area === 'usp'" />
+    <ZonesPage v-else-if="route.area === 'zones'" />
+    <AnnouncementPage v-else-if="route.area === 'announcement'" />
+    <CookiePage v-else-if="route.area === 'cookie'" />
+    <NewsletterPage v-else-if="route.area === 'newsletter'" />
+    <ArticlePage v-else-if="route.area === 'article'" />
+    <PostheaderPage v-else-if="route.area === 'postheader'" />
+    <PostsPage v-else-if="route.area === 'posts'" />
+    <PostshowcasePage v-else-if="route.area === 'postshowcase'" />
+    <PostsplitPage v-else-if="route.area === 'postsplit'" />
+    <StorytabsPage v-else-if="route.area === 'storytabs'" />
+    <TimelinePage v-else-if="route.area === 'timeline'" />
+    <AuthPage v-else-if="route.area === 'auth'" />
+    <AuthpagePage v-else-if="route.area === 'authpage'" />
+    <ProfilePage v-else-if="route.area === 'profile'" />
+    <WizardPage v-else-if="route.area === 'wizard'" />
+    <ActivityPage v-else-if="route.area === 'activity'" />
+    <BottomnavPage v-else-if="route.area === 'bottomnav'" />
+    <ChartPage v-else-if="route.area === 'chart'" />
+    <DashshellPage v-else-if="route.area === 'dashshell'" />
+    <EmptyPage v-else-if="route.area === 'empty'" />
+    <KanbanPage v-else-if="route.area === 'kanban'" />
+    <MetricsPage v-else-if="route.area === 'metrics'" />
+    <OverviewPage v-else-if="route.area === 'overview'" />
+    <ShellPage v-else-if="route.area === 'shell'" />
+    <SidenavPage v-else-if="route.area === 'sidenav'" />
+    <SkeletonPage v-else-if="route.area === 'skeleton'" />
+    <ChecklistPage v-else-if="route.area === 'checklist'" />
+    <StepperPage v-else-if="route.area === 'stepper'" />
+    <TourPage v-else-if="route.area === 'tour'" />
+    <VideomodalPage v-else-if="route.area === 'videomodal'" />
+    <ChannelsPage v-else-if="route.area === 'channels'" />
+    <ContactPage v-else-if="route.area === 'contact'" />
+    <ErrorpagePage v-else-if="route.area === 'errorpage'" />
+    <NotfoundPage v-else />
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/AboutPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/AboutPage.vue
new file mode 100644
index 0000000..b4441e9
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/AboutPage.vue
@@ -0,0 +1,140 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The about page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  AboutCompany,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.about }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.about }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="about-split-label"
+          data-testid="variant"
+          data-block="about"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="about-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.about.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutCompany
+              id="about-split"
+              :title="ui.company.about.title"
+              :lead="ui.company.about.lead"
+              :stats="stats"
+              :values="values"
+              layout="split"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="about-stacked-label"
+          data-testid="variant"
+          data-block="about"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="about-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.about.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutCompany
+              id="about-stacked"
+              :title="ui.company.about.title"
+              :lead="ui.company.about.lead"
+              :stats="stats"
+              :values="values"
+              layout="stacked"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.stacked))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="about-muted-label"
+          data-testid="variant"
+          data-block="about"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="about-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.about.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutCompany
+              id="about-muted"
+              :title="ui.company.about.title"
+              :lead="ui.company.about.lead"
+              :stats="stats"
+              :values="values"
+              layout="split"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/AboutmePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/AboutmePage.vue
new file mode 100644
index 0000000..6d225cb
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/AboutmePage.vue
@@ -0,0 +1,178 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The aboutme page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  AboutMe,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Skill,
+  type Spec,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+
+const ABOUTME_ACTIONS = { mode: "two", cta: ui.company.aboutMe.cta, href: "#/work", secondary: ui.company.aboutMe.more, secondaryHref: "#/contact" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.aboutme }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.aboutme }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="aboutme-facts-label"
+          data-testid="variant"
+          data-block="aboutme"
+          data-variant="facts"
+        >
+          <Title :as="2" size="base" weight="bold" id="aboutme-facts-label" data-testid="variant-label">
+            {{ ui.blocks.variants.aboutme.facts }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutMe
+              id="aboutme-facts"
+              :title="ui.company.aboutMe.title"
+              :lead="ui.company.aboutMe.lead"
+              :badge="ui.company.aboutMe.badge"
+              :facts="profilefacts"
+              :skills="skills"
+              :labels="ui.company.aboutMe"
+              :actions="ABOUTME_ACTIONS"
+              layout="facts"
+              mediaSide="start"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.facts))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="aboutme-factsEnd-label"
+          data-testid="variant"
+          data-block="aboutme"
+          data-variant="factsEnd"
+        >
+          <Title :as="2" size="base" weight="bold" id="aboutme-factsEnd-label" data-testid="variant-label">
+            {{ ui.blocks.variants.aboutme.factsEnd }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutMe
+              id="aboutme-factsEnd"
+              :title="ui.company.aboutMe.title"
+              :lead="ui.company.aboutMe.lead"
+              :badge="ui.company.aboutMe.badge"
+              :facts="profilefacts"
+              :skills="skills"
+              :labels="ui.company.aboutMe"
+              :actions="ABOUTME_ACTIONS"
+              layout="facts"
+              mediaSide="end"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.factsEnd))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="aboutme-skills-label"
+          data-testid="variant"
+          data-block="aboutme"
+          data-variant="skills"
+        >
+          <Title :as="2" size="base" weight="bold" id="aboutme-skills-label" data-testid="variant-label">
+            {{ ui.blocks.variants.aboutme.skills }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutMe
+              id="aboutme-skills"
+              :title="ui.company.aboutMe.title"
+              :lead="ui.company.aboutMe.lead"
+              :badge="ui.company.aboutMe.badge"
+              :facts="profilefacts"
+              :skills="skills"
+              :labels="ui.company.aboutMe"
+              :actions="ABOUTME_ACTIONS"
+              layout="skills"
+              mediaSide="start"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skills))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="aboutme-skillsMuted-label"
+          data-testid="variant"
+          data-block="aboutme"
+          data-variant="skillsMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="aboutme-skillsMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.aboutme.skillsMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AboutMe
+              id="aboutme-skillsMuted"
+              :title="ui.company.aboutMe.title"
+              :lead="ui.company.aboutMe.lead"
+              :badge="ui.company.aboutMe.badge"
+              :facts="profilefacts"
+              :skills="skills"
+              :labels="ui.company.aboutMe"
+              :actions="ABOUTME_ACTIONS"
+              layout="skills"
+              mediaSide="end"
+              tone="muted"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skillsMuted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/AccordionPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/AccordionPage.vue
new file mode 100644
index 0000000..987bc49
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/AccordionPage.vue
@@ -0,0 +1,156 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The accordion page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FeatureAccordion,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.accordion }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.accordion }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="accordion-first-label"
+          data-testid="variant"
+          data-block="accordion"
+          data-variant="first"
+        >
+          <Title :as="2" size="base" weight="bold" id="accordion-first-label" data-testid="variant-label">
+            {{ ui.blocks.variants.accordion.first }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureAccordion
+              id="accordion-first"
+              :title="ui.vibe.accordion.title"
+              :features="features"
+              :empty="ui.empty.features"
+              expand="first"
+              media="none"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="accordion-closed-label"
+          data-testid="variant"
+          data-block="accordion"
+          data-variant="closed"
+        >
+          <Title :as="2" size="base" weight="bold" id="accordion-closed-label" data-testid="variant-label">
+            {{ ui.blocks.variants.accordion.closed }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureAccordion
+              id="accordion-closed"
+              :title="ui.vibe.accordion.title"
+              :features="features"
+              :empty="ui.empty.features"
+              expand="none"
+              media="none"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.closed))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="accordion-media-label"
+          data-testid="variant"
+          data-block="accordion"
+          data-variant="media"
+        >
+          <Title :as="2" size="base" weight="bold" id="accordion-media-label" data-testid="variant-label">
+            {{ ui.blocks.variants.accordion.media }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureAccordion
+              id="accordion-media"
+              :title="ui.vibe.accordion.title"
+              :features="features"
+              :empty="ui.empty.features"
+              expand="first"
+              media="image"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="accordion-muted-label"
+          data-testid="variant"
+          data-block="accordion"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="accordion-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.accordion.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureAccordion
+              id="accordion-muted"
+              :title="ui.vibe.accordion.title"
+              :features="features"
+              :empty="ui.empty.features"
+              expand="first"
+              media="none"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ActivityPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ActivityPage.vue
new file mode 100644
index 0000000..b435e5a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ActivityPage.vue
@@ -0,0 +1,162 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The activity page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  ActivityFeed,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.activity }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.activity }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="activity-timeline-label"
+          data-testid="variant"
+          data-block="activity"
+          data-variant="timeline"
+        >
+          <Title :as="2" size="base" weight="bold" id="activity-timeline-label" data-testid="variant-label">
+            {{ ui.blocks.variants.activity.timeline }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ActivityFeed
+              id="activity-timeline"
+              :title="ui.dashboard.activity.title"
+              :text="ui.dashboard.activity.text"
+              :events="activity"
+              :empty="ui.empty.activity"
+              layout="timeline"
+              density="default"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="activity-list-label"
+          data-testid="variant"
+          data-block="activity"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="activity-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.activity.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ActivityFeed
+              id="activity-list"
+              :title="ui.dashboard.activity.title"
+              :text="ui.dashboard.activity.text"
+              :events="activity"
+              :empty="ui.empty.activity"
+              layout="list"
+              density="default"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="activity-compact-label"
+          data-testid="variant"
+          data-block="activity"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="activity-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.activity.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ActivityFeed
+              id="activity-compact"
+              :title="ui.dashboard.activity.title"
+              :text="ui.dashboard.activity.text"
+              :events="activity"
+              :empty="ui.empty.activity"
+              layout="list"
+              density="compact"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.compact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="activity-muted-label"
+          data-testid="variant"
+          data-block="activity"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="activity-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.activity.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ActivityFeed
+              id="activity-muted"
+              :title="ui.dashboard.activity.title"
+              :text="ui.dashboard.activity.text"
+              :events="activity"
+              :empty="ui.empty.activity"
+              layout="timeline"
+              density="default"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/AnnouncementPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/AnnouncementPage.vue
new file mode 100644
index 0000000..880c529
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/AnnouncementPage.vue
@@ -0,0 +1,277 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The announcement page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  AnnouncementBar,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+            {{ ui.blocks.themes.promo.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.announcement }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.announcement }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-bar-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="bar"
+        >
+          <Title :as="2" size="base" weight="bold" id="announcement-bar-label" data-testid="variant-label">
+            {{ ui.blocks.variants.announcement.bar }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              :label="ui.promo.announcement.label"
+              :text="ui.promo.announcement.text"
+              :cta="ui.promo.announcement.cta"
+              ctaHref="#/pricing"
+              :dismissLabel="ui.promo.announcement.dismiss"
+              :badgeLabel="ui.promo.announcement.badge"
+              tone="default"
+              layout="center"
+              dismiss="hide"
+              badge="none"
+              position="top"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-badge-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="badge"
+        >
+          <Title :as="2" size="base" weight="bold" id="announcement-badge-label" data-testid="variant-label">
+            {{ ui.blocks.variants.announcement.badge }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              :label="ui.promo.announcement.label"
+              :text="ui.promo.announcement.text"
+              :cta="ui.promo.announcement.cta"
+              ctaHref="#/pricing"
+              :dismissLabel="ui.promo.announcement.dismiss"
+              :badgeLabel="ui.promo.announcement.badge"
+              tone="muted"
+              layout="center"
+              dismiss="hide"
+              badge="show"
+              position="top"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-bottom-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="bottom"
+        >
+          <Title :as="2" size="base" weight="bold" id="announcement-bottom-label" data-testid="variant-label">
+            {{ ui.blocks.variants.announcement.bottom }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              :label="ui.promo.announcement.label"
+              :text="ui.promo.announcement.text"
+              :cta="ui.promo.announcement.cta"
+              ctaHref="#/pricing"
+              :dismissLabel="ui.promo.announcement.dismiss"
+              :badgeLabel="ui.promo.announcement.badge"
+              tone="default"
+              layout="split"
+              dismiss="show"
+              badge="none"
+              position="bottom"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-muted-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="announcement-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.announcement.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              :label="ui.promo.announcement.label"
+              :text="ui.promo.announcement.text"
+              :cta="ui.promo.announcement.cta"
+              ctaHref="#/pricing"
+              :dismissLabel="ui.promo.announcement.dismiss"
+              :badgeLabel="ui.promo.announcement.badge"
+              tone="muted"
+              layout="center"
+              dismiss="hide"
+              badge="none"
+              position="top"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.muted))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-split-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="announcement-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.announcement.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              :label="ui.promo.announcement.label"
+              :text="ui.promo.announcement.text"
+              :cta="ui.promo.announcement.cta"
+              ctaHref="#/pricing"
+              :dismissLabel="ui.promo.announcement.dismiss"
+              :badgeLabel="ui.promo.announcement.badge"
+              tone="muted"
+              layout="split"
+              dismiss="hide"
+              badge="none"
+              position="top"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-dismissible-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="dismissible"
+        >
+          <Title :as="2" size="base" weight="bold" id="announcement-dismissible-label" data-testid="variant-label">
+            {{ ui.blocks.variants.announcement.dismissible }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              :label="ui.promo.announcement.label"
+              :text="ui.promo.announcement.text"
+              :cta="ui.promo.announcement.cta"
+              ctaHref="#/pricing"
+              :dismissLabel="ui.promo.announcement.dismiss"
+              :badgeLabel="ui.promo.announcement.badge"
+              tone="default"
+              layout="center"
+              dismiss="show"
+              badge="none"
+              position="top"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-shop-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="shop"
+        >
+          <Title :as="2" size="base" weight="bold" id="announcement-shop-label" data-testid="variant-label">
+            {{ ui.blocks.variants.announcement.shop }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              :label="ui.promo.announcement.label"
+              :text="ui.cases.shop.announcement.text"
+              :cta="ui.cases.shop.announcement.cta"
+              ctaHref="#/pricing"
+              :dismissLabel="ui.promo.announcement.dismiss"
+              :badgeLabel="ui.promo.announcement.badge"
+              tone="muted"
+              layout="center"
+              dismiss="show"
+              badge="none"
+              position="top"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="announcement-agency-label"
+          data-testid="variant"
+          data-block="announcement"
+          data-variant="agency"
+        >
+          <Title :as="2" size="base" weight="bold" id="announcement-agency-label" data-testid="variant-label">
+            {{ ui.blocks.variants.announcement.agency }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AnnouncementBar
+              :label="ui.promo.announcement.label"
+              :text="ui.cases.agency.announcement.text"
+              :cta="ui.cases.agency.announcement.cta"
+              ctaHref="#/pricing"
+              :dismissLabel="ui.promo.announcement.dismiss"
+              :badgeLabel="ui.promo.announcement.badge"
+              tone="default"
+              layout="split"
+              dismiss="hide"
+              badge="none"
+              position="top"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.agency))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ArticlePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ArticlePage.vue
new file mode 100644
index 0000000..69d1716
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ArticlePage.vue
@@ -0,0 +1,156 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The article page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  ArticleBody,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Section,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+            {{ ui.blocks.themes.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.article }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.article }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="article-column-label"
+          data-testid="variant"
+          data-block="article"
+          data-variant="column"
+        >
+          <Title :as="2" size="base" weight="bold" id="article-column-label" data-testid="variant-label">
+            {{ ui.blocks.variants.article.column }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ArticleBody
+              id="article-column"
+              :title="ui.vibe.article.title"
+              :sections="article"
+              :empty="ui.empty.sections"
+              :tocTitle="ui.vibe.article.toc"
+              layout="column"
+              quotes="show"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="article-toc-label"
+          data-testid="variant"
+          data-block="article"
+          data-variant="toc"
+        >
+          <Title :as="2" size="base" weight="bold" id="article-toc-label" data-testid="variant-label">
+            {{ ui.blocks.variants.article.toc }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ArticleBody
+              id="article-toc"
+              :title="ui.vibe.article.title"
+              :sections="article"
+              :empty="ui.empty.sections"
+              :tocTitle="ui.vibe.article.toc"
+              layout="toc"
+              quotes="show"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="article-plain-label"
+          data-testid="variant"
+          data-block="article"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="article-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.article.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ArticleBody
+              id="article-plain"
+              :title="ui.vibe.article.title"
+              :sections="article"
+              :empty="ui.empty.sections"
+              :tocTitle="ui.vibe.article.toc"
+              layout="column"
+              quotes="hide"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="article-muted-label"
+          data-testid="variant"
+          data-block="article"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="article-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.article.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ArticleBody
+              id="article-muted"
+              :title="ui.vibe.article.title"
+              :sections="article"
+              :empty="ui.empty.sections"
+              :tocTitle="ui.vibe.article.toc"
+              layout="column"
+              quotes="show"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/AuthPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/AuthPage.vue
new file mode 100644
index 0000000..f380656
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/AuthPage.vue
@@ -0,0 +1,301 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The auth page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  AuthCard,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+            {{ ui.blocks.themes.account.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.auth }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.auth }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-signin-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="signin"
+        >
+          <Title :as="2" size="base" weight="bold" id="auth-signin-label" data-testid="variant-label">
+            {{ ui.blocks.variants.auth.signin }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-signin"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchText="ui.auth.signin.switchText"
+                :switchLink="ui.auth.signin.switchLink"
+                switchHref="#/"
+                :labels="ui.auth.labels"
+                mode="signin"
+                layout="card"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-magic-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="magic"
+        >
+          <Title :as="2" size="base" weight="bold" id="auth-magic-label" data-testid="variant-label">
+            {{ ui.blocks.variants.auth.magic }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-magic"
+                :title="ui.auth.magic.title"
+                :text="ui.auth.magic.text"
+                :submit="ui.auth.magic.submit"
+                :switchText="ui.auth.magic.switchText"
+                :switchLink="ui.auth.magic.switchLink"
+                switchHref="#/"
+                :labels="ui.auth.labels"
+                mode="magic"
+                layout="card"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.magic))"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-socialFirst-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="socialFirst"
+        >
+          <Title :as="2" size="base" weight="bold" id="auth-socialFirst-label" data-testid="variant-label">
+            {{ ui.blocks.variants.auth.socialFirst }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-socialFirst"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchText="ui.auth.signin.switchText"
+                :switchLink="ui.auth.signin.switchLink"
+                switchHref="#/"
+                :labels="ui.auth.labels"
+                mode="signin"
+                layout="card"
+                social="first"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.socialFirst))"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-signup-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="signup"
+        >
+          <Title :as="2" size="base" weight="bold" id="auth-signup-label" data-testid="variant-label">
+            {{ ui.blocks.variants.auth.signup }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-signup"
+                :title="ui.auth.signup.title"
+                :text="ui.auth.signup.text"
+                :submit="ui.auth.signup.submit"
+                :switchText="ui.auth.signup.switchText"
+                :switchLink="ui.auth.signup.switchLink"
+                switchHref="#/"
+                :labels="ui.auth.labels"
+                mode="signup"
+                layout="card"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signup))"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-reset-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="reset"
+        >
+          <Title :as="2" size="base" weight="bold" id="auth-reset-label" data-testid="variant-label">
+            {{ ui.blocks.variants.auth.reset }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-reset"
+                :title="ui.auth.reset.title"
+                :text="ui.auth.reset.text"
+                :submit="ui.auth.reset.submit"
+                :switchText="ui.auth.reset.switchText"
+                :switchLink="ui.auth.reset.switchLink"
+                switchHref="#/"
+                :labels="ui.auth.labels"
+                mode="reset"
+                layout="card"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.reset))"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-plain-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="auth-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.auth.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-plain"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchText="ui.auth.signin.switchText"
+                :switchLink="ui.auth.signin.switchLink"
+                switchHref="#/"
+                :labels="ui.auth.labels"
+                mode="signin"
+                layout="plain"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.plain))"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-social-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="social"
+        >
+          <Title :as="2" size="base" weight="bold" id="auth-social-label" data-testid="variant-label">
+            {{ ui.blocks.variants.auth.social }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-social"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchText="ui.auth.signin.switchText"
+                :switchLink="ui.auth.signin.switchLink"
+                switchHref="#/"
+                :labels="ui.auth.labels"
+                mode="signin"
+                layout="card"
+                social="show"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="auth-signupSocial-label"
+          data-testid="variant"
+          data-block="auth"
+          data-variant="signupSocial"
+        >
+          <Title :as="2" size="base" weight="bold" id="auth-signupSocial-label" data-testid="variant-label">
+            {{ ui.blocks.variants.auth.signupSocial }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <AuthCard
+                id="auth-signupSocial"
+                :title="ui.auth.signup.title"
+                :text="ui.auth.signup.text"
+                :submit="ui.auth.signup.submit"
+                :switchText="ui.auth.signup.switchText"
+                :switchLink="ui.auth.signup.switchLink"
+                switchHref="#/"
+                :labels="ui.auth.labels"
+                mode="signup"
+                layout="plain"
+                social="show"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))"
+              />
+            </Box>
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/AuthpagePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/AuthpagePage.vue
new file mode 100644
index 0000000..03f7cf7
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/AuthpagePage.vue
@@ -0,0 +1,320 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The authpage page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  AuthLayout,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const AUTHPAGE_SWITCH_TO = { text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+            {{ ui.blocks.themes.account.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.authpage }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.authpage }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-split-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="authpage-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.authpage.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-split"
+              :title="ui.auth.signin.title"
+              :text="ui.auth.signin.text"
+              :submit="ui.auth.signin.submit"
+              :switchTo="AUTHPAGE_SWITCH_TO"
+              :labels="ui.auth.labels"
+              :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+              layout="split"
+              side="end"
+              mode="signin"
+              social="none"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-splitStart-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="splitStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="authpage-splitStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.authpage.splitStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-splitStart"
+              :title="ui.auth.signin.title"
+              :text="ui.auth.signin.text"
+              :submit="ui.auth.signin.submit"
+              :switchTo="AUTHPAGE_SWITCH_TO"
+              :labels="ui.auth.labels"
+              :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+              layout="split"
+              side="start"
+              mode="signin"
+              social="none"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.splitStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-centered-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="centered"
+        >
+          <Title :as="2" size="base" weight="bold" id="authpage-centered-label" data-testid="variant-label">
+            {{ ui.blocks.variants.authpage.centered }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-centered"
+              :title="ui.auth.signin.title"
+              :text="ui.auth.signin.text"
+              :submit="ui.auth.signin.submit"
+              :switchTo="AUTHPAGE_SWITCH_TO"
+              :labels="ui.auth.labels"
+              :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+              layout="centered"
+              side="end"
+              mode="signin"
+              social="none"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.centered))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-minimal-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="minimal"
+        >
+          <Title :as="2" size="base" weight="bold" id="authpage-minimal-label" data-testid="variant-label">
+            {{ ui.blocks.variants.authpage.minimal }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-minimal"
+              :title="ui.auth.signin.title"
+              :text="ui.auth.signin.text"
+              :submit="ui.auth.signin.submit"
+              :switchTo="AUTHPAGE_SWITCH_TO"
+              :labels="ui.auth.labels"
+              :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+              layout="minimal"
+              side="end"
+              mode="signin"
+              social="none"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.minimal))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-signup-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="signup"
+        >
+          <Title :as="2" size="base" weight="bold" id="authpage-signup-label" data-testid="variant-label">
+            {{ ui.blocks.variants.authpage.signup }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-signup"
+              :title="ui.auth.signup.title"
+              :text="ui.auth.signup.text"
+              :submit="ui.auth.signup.submit"
+              :switchTo="{
+                ...AUTHPAGE_SWITCH_TO,
+                text: ui.auth.signup.switchText,
+                link: ui.auth.signup.switchLink,
+              }"
+              :labels="ui.auth.labels"
+              :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+              layout="split"
+              side="end"
+              mode="signup"
+              social="none"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.signup))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-reset-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="reset"
+        >
+          <Title :as="2" size="base" weight="bold" id="authpage-reset-label" data-testid="variant-label">
+            {{ ui.blocks.variants.authpage.reset }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-reset"
+              :title="ui.auth.reset.title"
+              :text="ui.auth.reset.text"
+              :submit="ui.auth.reset.submit"
+              :switchTo="{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink }"
+              :labels="ui.auth.labels"
+              :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+              layout="centered"
+              side="end"
+              mode="reset"
+              social="none"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.reset))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-magic-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="magic"
+        >
+          <Title :as="2" size="base" weight="bold" id="authpage-magic-label" data-testid="variant-label">
+            {{ ui.blocks.variants.authpage.magic }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-magic"
+              :title="ui.auth.magic.title"
+              :text="ui.auth.magic.text"
+              :submit="ui.auth.magic.submit"
+              :switchTo="{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink }"
+              :labels="ui.auth.labels"
+              :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+              layout="minimal"
+              side="end"
+              mode="magic"
+              social="none"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.magic))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-social-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="social"
+        >
+          <Title :as="2" size="base" weight="bold" id="authpage-social-label" data-testid="variant-label">
+            {{ ui.blocks.variants.authpage.social }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-social"
+              :title="ui.auth.signin.title"
+              :text="ui.auth.signin.text"
+              :submit="ui.auth.signin.submit"
+              :switchTo="AUTHPAGE_SWITCH_TO"
+              :labels="ui.auth.labels"
+              :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+              layout="split"
+              side="end"
+              mode="signin"
+              social="show"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.social))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="authpage-socialFirst-label"
+          data-testid="variant"
+          data-block="authpage"
+          data-variant="socialFirst"
+        >
+          <Title :as="2" size="base" weight="bold" id="authpage-socialFirst-label" data-testid="variant-label">
+            {{ ui.blocks.variants.authpage.socialFirst }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AuthLayout
+              id="authpage-socialFirst"
+              :title="ui.auth.signin.title"
+              :text="ui.auth.signin.text"
+              :submit="ui.auth.signin.submit"
+              :switchTo="AUTHPAGE_SWITCH_TO"
+              :labels="ui.auth.labels"
+              :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+              layout="centered"
+              side="end"
+              mode="signin"
+              social="first"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.socialFirst))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/BeforeafterPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/BeforeafterPage.vue
new file mode 100644
index 0000000..991b1da
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/BeforeafterPage.vue
@@ -0,0 +1,160 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The beforeafter page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  BeforeAfter,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Contrast,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.beforeafter }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.beforeafter }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="beforeafter-cards-label"
+          data-testid="variant"
+          data-block="beforeafter"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="beforeafter-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.beforeafter.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BeforeAfter
+              id="beforeafter-cards"
+              :title="ui.vibe.beforeafter.title"
+              :points="beforeafter"
+              :empty="ui.empty.points"
+              :labels="ui.vibe.beforeafter.labels"
+              layout="cards"
+              icons="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="beforeafter-rows-label"
+          data-testid="variant"
+          data-block="beforeafter"
+          data-variant="rows"
+        >
+          <Title :as="2" size="base" weight="bold" id="beforeafter-rows-label" data-testid="variant-label">
+            {{ ui.blocks.variants.beforeafter.rows }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BeforeAfter
+              id="beforeafter-rows"
+              :title="ui.vibe.beforeafter.title"
+              :points="beforeafter"
+              :empty="ui.empty.points"
+              :labels="ui.vibe.beforeafter.labels"
+              layout="rows"
+              icons="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="beforeafter-plain-label"
+          data-testid="variant"
+          data-block="beforeafter"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="beforeafter-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.beforeafter.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BeforeAfter
+              id="beforeafter-plain"
+              :title="ui.vibe.beforeafter.title"
+              :points="beforeafter"
+              :empty="ui.empty.points"
+              :labels="ui.vibe.beforeafter.labels"
+              layout="cards"
+              icons="hide"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.plain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="beforeafter-muted-label"
+          data-testid="variant"
+          data-block="beforeafter"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="beforeafter-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.beforeafter.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BeforeAfter
+              id="beforeafter-muted"
+              :title="ui.vibe.beforeafter.title"
+              :points="beforeafter"
+              :empty="ui.empty.points"
+              :labels="ui.vibe.beforeafter.labels"
+              layout="cards"
+              icons="show"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/BentoPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/BentoPage.vue
new file mode 100644
index 0000000..ac5204a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/BentoPage.vue
@@ -0,0 +1,156 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The bento page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  BentoGrid,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Tile,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.bento }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.bento }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bento-bento-label"
+          data-testid="variant"
+          data-block="bento"
+          data-variant="bento"
+        >
+          <Title :as="2" size="base" weight="bold" id="bento-bento-label" data-testid="variant-label">
+            {{ ui.blocks.variants.bento.bento }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BentoGrid
+              id="bento-bento"
+              :title="ui.vibe.bento.title"
+              :tiles="bento"
+              :empty="ui.empty.tiles"
+              layout="bento"
+              media="none"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bento-even-label"
+          data-testid="variant"
+          data-block="bento"
+          data-variant="even"
+        >
+          <Title :as="2" size="base" weight="bold" id="bento-even-label" data-testid="variant-label">
+            {{ ui.blocks.variants.bento.even }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BentoGrid
+              id="bento-even"
+              :title="ui.vibe.bento.title"
+              :tiles="bento"
+              :empty="ui.empty.tiles"
+              layout="even"
+              media="none"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.even))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bento-images-label"
+          data-testid="variant"
+          data-block="bento"
+          data-variant="images"
+        >
+          <Title :as="2" size="base" weight="bold" id="bento-images-label" data-testid="variant-label">
+            {{ ui.blocks.variants.bento.images }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BentoGrid
+              id="bento-images"
+              :title="ui.vibe.bento.title"
+              :tiles="bento"
+              :empty="ui.empty.tiles"
+              layout="bento"
+              media="image"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bento-muted-label"
+          data-testid="variant"
+          data-block="bento"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="bento-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.bento.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BentoGrid
+              id="bento-muted"
+              :title="ui.vibe.bento.title"
+              :tiles="bento"
+              :empty="ui.empty.tiles"
+              layout="bento"
+              media="none"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/BottomnavPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/BottomnavPage.vue
new file mode 100644
index 0000000..63f0199
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/BottomnavPage.vue
@@ -0,0 +1,148 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The bottomnav page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  BottomNav,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.bottomnav }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.bottomnav }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bottomnav-labels-label"
+          data-testid="variant"
+          data-block="bottomnav"
+          data-variant="labels"
+        >
+          <Title :as="2" size="base" weight="bold" id="bottomnav-labels-label" data-testid="variant-label">
+            {{ ui.blocks.variants.bottomnav.labels }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BottomNav
+              :label="ui.vibe.bottom.label"
+              :tabs="tabs"
+              current="tab-explore"
+              labels="show"
+              position="static"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bottomnav-icons-label"
+          data-testid="variant"
+          data-block="bottomnav"
+          data-variant="icons"
+        >
+          <Title :as="2" size="base" weight="bold" id="bottomnav-icons-label" data-testid="variant-label">
+            {{ ui.blocks.variants.bottomnav.icons }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BottomNav
+              :label="ui.vibe.bottom.label"
+              :tabs="tabs"
+              current="tab-explore"
+              labels="hide"
+              position="static"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.icons))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bottomnav-sticky-label"
+          data-testid="variant"
+          data-block="bottomnav"
+          data-variant="sticky"
+        >
+          <Title :as="2" size="base" weight="bold" id="bottomnav-sticky-label" data-testid="variant-label">
+            {{ ui.blocks.variants.bottomnav.sticky }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BottomNav
+              :label="ui.vibe.bottom.label"
+              :tabs="tabs"
+              current="tab-explore"
+              labels="show"
+              position="sticky"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.sticky))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="bottomnav-muted-label"
+          data-testid="variant"
+          data-block="bottomnav"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="bottomnav-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.bottomnav.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <BottomNav
+              :label="ui.vibe.bottom.label"
+              :tabs="tabs"
+              current="tab-explore"
+              labels="show"
+              position="static"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/CartPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/CartPage.vue
new file mode 100644
index 0000000..920717f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/CartPage.vue
@@ -0,0 +1,167 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cart page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  CartList,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.cart }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.cart }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cart-table-label"
+          data-testid="variant"
+          data-block="cart"
+          data-variant="table"
+        >
+          <Title :as="2" size="base" weight="bold" id="cart-table-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cart.table }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartList
+              id="cart-table"
+              :title="ui.commerce.cart.title"
+              :lines="cart"
+              :empty="ui.empty.cart"
+              :labels="ui.commerce.cart"
+              layout="table"
+              media="image"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cart-cards-label"
+          data-testid="variant"
+          data-block="cart"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="cart-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cart.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartList
+              id="cart-cards"
+              :title="ui.commerce.cart.title"
+              :lines="cart"
+              :empty="ui.empty.cart"
+              :labels="ui.commerce.cart"
+              layout="cards"
+              media="image"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cart-tableCompact-label"
+          data-testid="variant"
+          data-block="cart"
+          data-variant="tableCompact"
+        >
+          <Title :as="2" size="base" weight="bold" id="cart-tableCompact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cart.tableCompact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartList
+              id="cart-tableCompact"
+              :title="ui.commerce.cart.title"
+              :lines="cart"
+              :empty="ui.empty.cart"
+              :labels="ui.commerce.cart"
+              layout="table"
+              media="none"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.tableCompact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cart-cardsPlain-label"
+          data-testid="variant"
+          data-block="cart"
+          data-variant="cardsPlain"
+        >
+          <Title :as="2" size="base" weight="bold" id="cart-cardsPlain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cart.cardsPlain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartList
+              id="cart-cardsPlain"
+              :title="ui.commerce.cart.title"
+              :lines="cart"
+              :empty="ui.empty.cart"
+              :labels="ui.commerce.cart"
+              layout="cards"
+              media="none"
+              tone="muted"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cardsPlain))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/CartdrawerPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/CartdrawerPage.vue
new file mode 100644
index 0000000..52574ef
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/CartdrawerPage.vue
@@ -0,0 +1,144 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cartdrawer page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  CartDrawer,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.cartdrawer }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.cartdrawer }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartdrawer-filled-label"
+          data-testid="variant"
+          data-block="cartdrawer"
+          data-variant="filled"
+        >
+          <Title :as="2" size="base" weight="bold" id="cartdrawer-filled-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cartdrawer.filled }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartDrawer
+              id="cartdrawer-filled"
+              :lines="cart"
+              :rows="summary"
+              :labels="ui.commerce.cart"
+              :drawer="ui.commerce.drawer"
+              state="filled"
+              media="image"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartdrawer-compact-label"
+          data-testid="variant"
+          data-block="cartdrawer"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="cartdrawer-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cartdrawer.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartDrawer
+              id="cartdrawer-compact"
+              :lines="cart"
+              :rows="summary"
+              :labels="ui.commerce.cart"
+              :drawer="ui.commerce.drawer"
+              state="filled"
+              media="none"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.compact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartdrawer-empty-label"
+          data-testid="variant"
+          data-block="cartdrawer"
+          data-variant="empty"
+        >
+          <Title :as="2" size="base" weight="bold" id="cartdrawer-empty-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cartdrawer.empty }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CartDrawer
+              id="cartdrawer-empty"
+              :lines="cart"
+              :rows="summary"
+              :labels="ui.commerce.cart"
+              :drawer="ui.commerce.drawer"
+              state="empty"
+              media="image"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.empty))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/CartpagePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/CartpagePage.vue
new file mode 100644
index 0000000..3871121
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/CartpagePage.vue
@@ -0,0 +1,163 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cartpage page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ShoppingCart,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.cartpage }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.cartpage }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartpage-split-label"
+          data-testid="variant"
+          data-block="cartpage"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="cartpage-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cartpage.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ShoppingCart
+              id="cartpage-split"
+              :title="ui.commerce.cartPage.title"
+              :lines="cart"
+              :rows="summary"
+              :promos="promos"
+              :labels="ui.commerce.cart"
+              :totals="ui.commerce.totals"
+              :actions="ui.commerce.cartPage"
+              layout="split"
+              promo="show"
+              progress="show"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartpage-stacked-label"
+          data-testid="variant"
+          data-block="cartpage"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="cartpage-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cartpage.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ShoppingCart
+              id="cartpage-stacked"
+              :title="ui.commerce.cartPage.title"
+              :lines="cart"
+              :rows="summary"
+              :promos="promos"
+              :labels="ui.commerce.cart"
+              :totals="ui.commerce.totals"
+              :actions="ui.commerce.cartPage"
+              layout="stacked"
+              promo="show"
+              progress="show"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.stacked))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cartpage-plain-label"
+          data-testid="variant"
+          data-block="cartpage"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="cartpage-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cartpage.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ShoppingCart
+              id="cartpage-plain"
+              :title="ui.commerce.cartPage.title"
+              :lines="cart"
+              :rows="summary"
+              :promos="promos"
+              :labels="ui.commerce.cart"
+              :totals="ui.commerce.totals"
+              :actions="ui.commerce.cartPage"
+              layout="split"
+              promo="hide"
+              progress="hide"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.plain))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/CategoriesPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/CategoriesPage.vue
new file mode 100644
index 0000000..2045b41
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/CategoriesPage.vue
@@ -0,0 +1,234 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The categories page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.categories }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.categories }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-chips-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="chips"
+        >
+          <Title :as="2" size="base" weight="bold" id="categories-chips-label" data-testid="variant-label">
+            {{ ui.blocks.variants.categories.chips }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              :label="ui.commerce.nav.label"
+              :categories="categories"
+              current="category-all"
+              :tools="ui.commerce.tools"
+              layout="chips"
+              count="show"
+              icon="show"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-bar-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="bar"
+        >
+          <Title :as="2" size="base" weight="bold" id="categories-bar-label" data-testid="variant-label">
+            {{ ui.blocks.variants.categories.bar }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              :label="ui.commerce.nav.label"
+              :categories="categories"
+              current="category-all"
+              :tools="ui.commerce.tools"
+              layout="bar"
+              count="show"
+              icon="show"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-sidebar-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="sidebar"
+        >
+          <Title :as="2" size="base" weight="bold" id="categories-sidebar-label" data-testid="variant-label">
+            {{ ui.blocks.variants.categories.sidebar }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              :label="ui.commerce.nav.label"
+              :categories="categories"
+              current="category-all"
+              :tools="ui.commerce.tools"
+              layout="sidebar"
+              count="show"
+              icon="show"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-chipsPlain-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="chipsPlain"
+        >
+          <Title :as="2" size="base" weight="bold" id="categories-chipsPlain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.categories.chipsPlain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              :label="ui.commerce.nav.label"
+              :categories="categories"
+              current="category-all"
+              :tools="ui.commerce.tools"
+              layout="chips"
+              count="hide"
+              icon="hide"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chipsPlain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-barCompact-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="barCompact"
+        >
+          <Title :as="2" size="base" weight="bold" id="categories-barCompact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.categories.barCompact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              :label="ui.commerce.nav.label"
+              :categories="categories"
+              current="category-all"
+              :tools="ui.commerce.tools"
+              layout="bar"
+              count="show"
+              icon="hide"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.barCompact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-tiles-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="tiles"
+        >
+          <Title :as="2" size="base" weight="bold" id="categories-tiles-label" data-testid="variant-label">
+            {{ ui.blocks.variants.categories.tiles }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              :label="ui.commerce.nav.label"
+              :categories="categories"
+              current="category-all"
+              :tools="ui.commerce.tools"
+              layout="tiles"
+              count="show"
+              icon="show"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.tiles))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="categories-toolbar-label"
+          data-testid="variant"
+          data-block="categories"
+          data-variant="toolbar"
+        >
+          <Title :as="2" size="base" weight="bold" id="categories-toolbar-label" data-testid="variant-label">
+            {{ ui.blocks.variants.categories.toolbar }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CategoryNav
+              :label="ui.commerce.nav.label"
+              :categories="categories"
+              current="category-all"
+              :tools="ui.commerce.tools"
+              layout="toolbar"
+              count="show"
+              icon="hide"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.toolbar))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ChannelsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ChannelsPage.vue
new file mode 100644
index 0000000..fd54c53
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ChannelsPage.vue
@@ -0,0 +1,160 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The channels page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  SupportChannels,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+            {{ ui.blocks.themes.support.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.channels }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.channels }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="channels-grid-label"
+          data-testid="variant"
+          data-block="channels"
+          data-variant="grid"
+        >
+          <Title :as="2" size="base" weight="bold" id="channels-grid-label" data-testid="variant-label">
+            {{ ui.blocks.variants.channels.grid }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SupportChannels
+              id="channels-grid"
+              :title="ui.support.channels.title"
+              :channels="channels"
+              :empty="ui.empty.channels"
+              :open="ui.support.channels.open"
+              layout="grid"
+              cols="1-3"
+              action="link"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="channels-twoUp-label"
+          data-testid="variant"
+          data-block="channels"
+          data-variant="twoUp"
+        >
+          <Title :as="2" size="base" weight="bold" id="channels-twoUp-label" data-testid="variant-label">
+            {{ ui.blocks.variants.channels.twoUp }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SupportChannels
+              id="channels-twoUp"
+              :title="ui.support.channels.title"
+              :channels="channels"
+              :empty="ui.empty.channels"
+              :open="ui.support.channels.open"
+              layout="grid"
+              cols="1-2"
+              action="link"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="channels-list-label"
+          data-testid="variant"
+          data-block="channels"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="channels-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.channels.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SupportChannels
+              id="channels-list"
+              :title="ui.support.channels.title"
+              :channels="channels"
+              :empty="ui.empty.channels"
+              :open="ui.support.channels.open"
+              layout="list"
+              cols="1-3"
+              action="link"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="channels-plain-label"
+          data-testid="variant"
+          data-block="channels"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="channels-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.channels.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SupportChannels
+              id="channels-plain"
+              :title="ui.support.channels.title"
+              :channels="channels"
+              :empty="ui.empty.channels"
+              :open="ui.support.channels.open"
+              layout="grid"
+              cols="1-3"
+              action="none"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.plain))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ChartPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ChartPage.vue
new file mode 100644
index 0000000..b344678
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ChartPage.vue
@@ -0,0 +1,164 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The chart page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  ChartPanel,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Point,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.chart }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.chart }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="chart-bars-label"
+          data-testid="variant"
+          data-block="chart"
+          data-variant="bars"
+        >
+          <Title :as="2" size="base" weight="bold" id="chart-bars-label" data-testid="variant-label">
+            {{ ui.blocks.variants.chart.bars }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ChartPanel
+              id="chart-bars"
+              :title="ui.dashboard.chart.title"
+              :text="ui.dashboard.chart.text"
+              :series="series"
+              :empty="ui.empty.series"
+              :summary="ui.dashboard.chart.summary"
+              :percent="ui.dashboard.chart.percent"
+              chart="bars"
+              size="default"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="chart-short-label"
+          data-testid="variant"
+          data-block="chart"
+          data-variant="short"
+        >
+          <Title :as="2" size="base" weight="bold" id="chart-short-label" data-testid="variant-label">
+            {{ ui.blocks.variants.chart.short }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ChartPanel
+              id="chart-short"
+              :title="ui.dashboard.chart.title"
+              :text="ui.dashboard.chart.text"
+              :series="series"
+              :empty="ui.empty.series"
+              :summary="ui.dashboard.chart.summary"
+              :percent="ui.dashboard.chart.percent"
+              chart="bars"
+              size="compact"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.short))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="chart-meters-label"
+          data-testid="variant"
+          data-block="chart"
+          data-variant="meters"
+        >
+          <Title :as="2" size="base" weight="bold" id="chart-meters-label" data-testid="variant-label">
+            {{ ui.blocks.variants.chart.meters }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ChartPanel
+              id="chart-meters"
+              :title="ui.dashboard.chart.title"
+              :text="ui.dashboard.chart.text"
+              :series="series"
+              :empty="ui.empty.series"
+              :summary="ui.dashboard.chart.summary"
+              :percent="ui.dashboard.chart.percent"
+              chart="meters"
+              size="default"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="chart-muted-label"
+          data-testid="variant"
+          data-block="chart"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="chart-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.chart.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ChartPanel
+              id="chart-muted"
+              :title="ui.dashboard.chart.title"
+              :text="ui.dashboard.chart.text"
+              :series="series"
+              :empty="ui.empty.series"
+              :summary="ui.dashboard.chart.summary"
+              :percent="ui.dashboard.chart.percent"
+              chart="meters"
+              size="compact"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ChecklistPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ChecklistPage.vue
new file mode 100644
index 0000000..2e9fc13
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ChecklistPage.vue
@@ -0,0 +1,248 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The checklist page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Checklist,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Task,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+            {{ ui.blocks.themes.onboarding.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.checklist }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.checklist }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-card-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="card"
+        >
+          <Title :as="2" size="base" weight="bold" id="checklist-card-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checklist.card }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-card"
+              :title="ui.onboarding.checklist.title"
+              :tasks="checklist"
+              :empty="ui.empty.tasks"
+              :progressLabel="ui.onboarding.checklist.progress"
+              layout="card"
+              progress="bar"
+              marker="check"
+              detail="always"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-expand-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="expand"
+        >
+          <Title :as="2" size="base" weight="bold" id="checklist-expand-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checklist.expand }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-expand"
+              :title="ui.onboarding.checklist.title"
+              :tasks="checklist"
+              :empty="ui.empty.tasks"
+              :progressLabel="ui.onboarding.checklist.progress"
+              layout="card"
+              progress="bar"
+              marker="check"
+              detail="expand"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-plain-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="checklist-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checklist.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-plain"
+              :title="ui.onboarding.checklist.title"
+              :tasks="checklist"
+              :empty="ui.empty.tasks"
+              :progressLabel="ui.onboarding.checklist.progress"
+              layout="plain"
+              progress="bar"
+              marker="check"
+              detail="always"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.plain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-text-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="text"
+        >
+          <Title :as="2" size="base" weight="bold" id="checklist-text-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checklist.text }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-text"
+              :title="ui.onboarding.checklist.title"
+              :tasks="checklist"
+              :empty="ui.empty.tasks"
+              :progressLabel="ui.onboarding.checklist.progress"
+              layout="card"
+              progress="text"
+              marker="check"
+              detail="always"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-none-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="none"
+        >
+          <Title :as="2" size="base" weight="bold" id="checklist-none-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checklist.none }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-none"
+              :title="ui.onboarding.checklist.title"
+              :tasks="checklist"
+              :empty="ui.empty.tasks"
+              :progressLabel="ui.onboarding.checklist.progress"
+              layout="plain"
+              progress="none"
+              marker="check"
+              detail="always"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.none))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-numbered-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="numbered"
+        >
+          <Title :as="2" size="base" weight="bold" id="checklist-numbered-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checklist.numbered }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-numbered"
+              :title="ui.onboarding.checklist.title"
+              :tasks="checklist"
+              :empty="ui.empty.tasks"
+              :progressLabel="ui.onboarding.checklist.progress"
+              layout="card"
+              progress="bar"
+              marker="number"
+              detail="always"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checklist-muted-label"
+          data-testid="variant"
+          data-block="checklist"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="checklist-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checklist.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Checklist
+              id="checklist-muted"
+              :title="ui.onboarding.checklist.title"
+              :tasks="checklist"
+              :empty="ui.empty.tasks"
+              :progressLabel="ui.onboarding.checklist.progress"
+              layout="card"
+              progress="text"
+              marker="number"
+              detail="always"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/CheckoutPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/CheckoutPage.vue
new file mode 100644
index 0000000..2cc1a5b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/CheckoutPage.vue
@@ -0,0 +1,171 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The checkout page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  CheckoutForm,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Day,
+  type Payment,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.checkout }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.checkout }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checkout-cards-label"
+          data-testid="variant"
+          data-block="checkout"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="checkout-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checkout.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CheckoutForm
+              id="checkout-cards"
+              :title="ui.commerce.checkout.title"
+              :days="days"
+              :payments="payments"
+              :lines="cart"
+              :rows="summary"
+              :promos="promos"
+              :labels="ui.commerce.checkout"
+              :totals="ui.commerce.totals"
+              layout="cards"
+              summary="aside"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checkout-numbered-label"
+          data-testid="variant"
+          data-block="checkout"
+          data-variant="numbered"
+        >
+          <Title :as="2" size="base" weight="bold" id="checkout-numbered-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checkout.numbered }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CheckoutForm
+              id="checkout-numbered"
+              :title="ui.commerce.checkout.title"
+              :days="days"
+              :payments="payments"
+              :lines="cart"
+              :rows="summary"
+              :promos="promos"
+              :labels="ui.commerce.checkout"
+              :totals="ui.commerce.totals"
+              layout="numbered"
+              summary="aside"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="checkout-noSummary-label"
+          data-testid="variant"
+          data-block="checkout"
+          data-variant="noSummary"
+        >
+          <Title :as="2" size="base" weight="bold" id="checkout-noSummary-label" data-testid="variant-label">
+            {{ ui.blocks.variants.checkout.noSummary }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CheckoutForm
+              id="checkout-noSummary"
+              :title="ui.commerce.checkout.title"
+              :days="days"
+              :payments="payments"
+              :lines="cart"
+              :rows="summary"
+              :promos="promos"
+              :labels="ui.commerce.checkout"
+              :totals="ui.commerce.totals"
+              layout="cards"
+              summary="none"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.noSummary))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ComparePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ComparePage.vue
new file mode 100644
index 0000000..7b8da41
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ComparePage.vue
@@ -0,0 +1,159 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The compare page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  ComparisonTable,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.compare }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.compare }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="compare-plans-label"
+          data-testid="variant"
+          data-block="compare"
+          data-variant="plans"
+        >
+          <Title :as="2" size="base" weight="bold" id="compare-plans-label" data-testid="variant-label">
+            {{ ui.blocks.variants.compare.plans }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ComparisonTable
+              id="compare-plans"
+              :title="ui.vibe.compare.title"
+              :rows="compare"
+              :empty="ui.empty.rows"
+              :labels="ui.vibe.compare.labels"
+              highlight="none"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="compare-highlight-label"
+          data-testid="variant"
+          data-block="compare"
+          data-variant="highlight"
+        >
+          <Title :as="2" size="base" weight="bold" id="compare-highlight-label" data-testid="variant-label">
+            {{ ui.blocks.variants.compare.highlight }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ComparisonTable
+              id="compare-highlight"
+              :title="ui.vibe.compare.title"
+              :rows="compare"
+              :empty="ui.empty.rows"
+              :labels="ui.vibe.compare.labels"
+              highlight="middle"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="compare-rivals-label"
+          data-testid="variant"
+          data-block="compare"
+          data-variant="rivals"
+        >
+          <Title :as="2" size="base" weight="bold" id="compare-rivals-label" data-testid="variant-label">
+            {{ ui.blocks.variants.compare.rivals }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ComparisonTable
+              id="compare-rivals"
+              :title="ui.vibe.rivals.title"
+              :rows="rivals"
+              :empty="ui.empty.rows"
+              :labels="ui.vibe.rivals.labels"
+              highlight="middle"
+              tone="muted"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="compare-muted-label"
+          data-testid="variant"
+          data-block="compare"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="compare-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.compare.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ComparisonTable
+              id="compare-muted"
+              :title="ui.vibe.compare.title"
+              :rows="compare"
+              :empty="ui.empty.rows"
+              :labels="ui.vibe.compare.labels"
+              highlight="none"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ContactPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ContactPage.vue
new file mode 100644
index 0000000..7c3f9e6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ContactPage.vue
@@ -0,0 +1,226 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The contact page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  ContactForm,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+            {{ ui.blocks.themes.support.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.contact }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.contact }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-single-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="single"
+        >
+          <Title :as="2" size="base" weight="bold" id="contact-single-label" data-testid="variant-label">
+            {{ ui.blocks.variants.contact.single }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-single"
+              :title="ui.support.contact.title"
+              :text="ui.support.contact.text"
+              :labels="ui.support.contact.labels"
+              :details="channels"
+              layout="single"
+              fields="full"
+              terms="hide"
+              page="section"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-page-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="page"
+        >
+          <Title :as="2" size="base" weight="bold" id="contact-page-label" data-testid="variant-label">
+            {{ ui.blocks.variants.contact.page }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-page"
+              :title="ui.support.contact.title"
+              :text="ui.support.contact.text"
+              :labels="ui.support.contact.labels"
+              :details="channels"
+              layout="single"
+              fields="short"
+              terms="hide"
+              page="full"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.page))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-short-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="short"
+        >
+          <Title :as="2" size="base" weight="bold" id="contact-short-label" data-testid="variant-label">
+            {{ ui.blocks.variants.contact.short }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-short"
+              :title="ui.support.contact.title"
+              :text="ui.support.contact.text"
+              :labels="ui.support.contact.labels"
+              :details="channels"
+              layout="single"
+              fields="short"
+              terms="hide"
+              page="section"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.short))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-split-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="contact-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.contact.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-split"
+              :title="ui.support.contact.title"
+              :text="ui.support.contact.text"
+              :labels="ui.support.contact.labels"
+              :details="channels"
+              layout="split"
+              fields="full"
+              terms="hide"
+              page="section"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-consent-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="consent"
+        >
+          <Title :as="2" size="base" weight="bold" id="contact-consent-label" data-testid="variant-label">
+            {{ ui.blocks.variants.contact.consent }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-consent"
+              :title="ui.support.contact.title"
+              :text="ui.support.contact.text"
+              :labels="ui.support.contact.labels"
+              :details="channels"
+              layout="single"
+              fields="full"
+              terms="show"
+              page="section"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="contact-muted-label"
+          data-testid="variant"
+          data-block="contact"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="contact-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.contact.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ContactForm
+              id="contact-muted"
+              :title="ui.support.contact.title"
+              :text="ui.support.contact.text"
+              :labels="ui.support.contact.labels"
+              :details="channels"
+              layout="split"
+              fields="short"
+              terms="show"
+              page="section"
+              tone="muted"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/CookiePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/CookiePage.vue
new file mode 100644
index 0000000..5f20119
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/CookiePage.vue
@@ -0,0 +1,153 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cookie page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  CookieBanner,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+            {{ ui.blocks.themes.promo.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.cookie }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.cookie }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cookie-bar-label"
+          data-testid="variant"
+          data-block="cookie"
+          data-variant="bar"
+        >
+          <Title :as="2" size="base" weight="bold" id="cookie-bar-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cookie.bar }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CookieBanner
+              id="cookie-bar"
+              :title="ui.promo.cookie.title"
+              :text="ui.promo.cookie.text"
+              :accept="ui.promo.cookie.accept"
+              :decline="ui.promo.cookie.decline"
+              :settings="ui.promo.cookie.settings"
+              layout="bar"
+              actions="two"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cookie-card-label"
+          data-testid="variant"
+          data-block="cookie"
+          data-variant="card"
+        >
+          <Title :as="2" size="base" weight="bold" id="cookie-card-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cookie.card }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CookieBanner
+              id="cookie-card"
+              :title="ui.promo.cookie.title"
+              :text="ui.promo.cookie.text"
+              :accept="ui.promo.cookie.accept"
+              :decline="ui.promo.cookie.decline"
+              :settings="ui.promo.cookie.settings"
+              layout="card"
+              actions="two"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cookie-settings-label"
+          data-testid="variant"
+          data-block="cookie"
+          data-variant="settings"
+        >
+          <Title :as="2" size="base" weight="bold" id="cookie-settings-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cookie.settings }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CookieBanner
+              id="cookie-settings"
+              :title="ui.promo.cookie.title"
+              :text="ui.promo.cookie.text"
+              :accept="ui.promo.cookie.accept"
+              :decline="ui.promo.cookie.decline"
+              :settings="ui.promo.cookie.settings"
+              layout="bar"
+              actions="three"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cookie-muted-label"
+          data-testid="variant"
+          data-block="cookie"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="cookie-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cookie.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CookieBanner
+              id="cookie-muted"
+              :title="ui.promo.cookie.title"
+              :text="ui.promo.cookie.text"
+              :accept="ui.promo.cookie.accept"
+              :decline="ui.promo.cookie.decline"
+              :settings="ui.promo.cookie.settings"
+              layout="card"
+              actions="three"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/CreditsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/CreditsPage.vue
new file mode 100644
index 0000000..437c859
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/CreditsPage.vue
@@ -0,0 +1,171 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The credits page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  CreditPacks,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Pack,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+const CREDITS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "credits": "metadata.credits.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "badge": "metadata.badge.value",
+} as const;
+
+const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.credits }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.credits }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="credits-tiles4-label"
+          data-testid="variant"
+          data-block="credits"
+          data-variant="tiles4"
+        >
+          <Title :as="2" size="base" weight="bold" id="credits-tiles4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.credits.tiles4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CreditPacks
+              id="credits-tiles4"
+              :title="ui.vibe.credits.title"
+              :packs="credits"
+              :empty="ui.empty.packs"
+              :badges="ui.vibe.credits.badges"
+              :buy="ui.vibe.credits.buy"
+              cols="4"
+              item="tile"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="credits-tiles2-label"
+          data-testid="variant"
+          data-block="credits"
+          data-variant="tiles2"
+        >
+          <Title :as="2" size="base" weight="bold" id="credits-tiles2-label" data-testid="variant-label">
+            {{ ui.blocks.variants.credits.tiles2 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CreditPacks
+              id="credits-tiles2"
+              :title="ui.vibe.credits.title"
+              :packs="credits"
+              :empty="ui.empty.packs"
+              :badges="ui.vibe.credits.badges"
+              :buy="ui.vibe.credits.buy"
+              cols="2"
+              item="tile"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles2))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="credits-rows-label"
+          data-testid="variant"
+          data-block="credits"
+          data-variant="rows"
+        >
+          <Title :as="2" size="base" weight="bold" id="credits-rows-label" data-testid="variant-label">
+            {{ ui.blocks.variants.credits.rows }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CreditPacks
+              id="credits-rows"
+              :title="ui.vibe.credits.title"
+              :packs="credits"
+              :empty="ui.empty.packs"
+              :badges="ui.vibe.credits.badges"
+              :buy="ui.vibe.credits.buy"
+              cols="4"
+              item="row"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="credits-muted-label"
+          data-testid="variant"
+          data-block="credits"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="credits-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.credits.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CreditPacks
+              id="credits-muted"
+              :title="ui.vibe.credits.title"
+              :packs="credits"
+              :empty="ui.empty.packs"
+              :badges="ui.vibe.credits.badges"
+              :buy="ui.vibe.credits.buy"
+              cols="4"
+              item="tile"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/CtaPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/CtaPage.vue
new file mode 100644
index 0000000..6d7602c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/CtaPage.vue
@@ -0,0 +1,364 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The cta page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const CTA_ACTIONS = {
+  cta: ui.site.home.ctaButton,
+  href: "#/pricing",
+  secondary: ui.site.home.ctaSecondary,
+  secondaryHref: "#/",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.cta }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.cta }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-card-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="card"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-card-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.card }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-card"
+              :title="ui.site.home.ctaTitle"
+              :text="ui.site.home.ctaText"
+              :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="card"
+              tone="muted"
+              proof="none"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.card))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-banner-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="banner"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-banner-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.banner }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-banner"
+              :title="ui.site.home.ctaTitle"
+              :text="ui.site.home.ctaText"
+              :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="banner"
+              tone="muted"
+              proof="none"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.banner))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-row-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="row"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-row-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.row }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-row"
+              :title="ui.site.home.ctaTitle"
+              :text="ui.site.home.ctaText"
+              :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="row"
+              tone="muted"
+              proof="none"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-form-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="form"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-form-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.form }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-form"
+              :title="ui.site.home.ctaTitle"
+              :text="ui.site.home.ctaText"
+              :actions="{ ...CTA_ACTIONS, mode: 'form' }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="band"
+              tone="muted"
+              proof="none"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-quote-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="quote"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-quote-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.quote }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-quote"
+              :title="ui.site.home.ctaTitle"
+              :text="ui.site.home.ctaText"
+              :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="band"
+              tone="muted"
+              proof="quote"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-band-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="band"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-band-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.band }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-band"
+              :title="ui.site.home.ctaTitle"
+              :text="ui.site.home.ctaText"
+              :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="band"
+              tone="muted"
+              proof="none"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-split-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-split"
+              :title="ui.site.home.ctaTitle"
+              :text="ui.site.home.ctaText"
+              :actions="{ ...CTA_ACTIONS, mode: 'two' }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="split"
+              tone="default"
+              proof="none"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-compact-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-compact"
+              :title="ui.site.home.ctaTitle"
+              :text="ui.site.home.ctaText"
+              :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="card"
+              tone="muted"
+              proof="none"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-saas-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="saas"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-saas-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.saas }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-saas"
+              :title="ui.cases.saas.cta.title"
+              :text="ui.cases.saas.cta.text"
+              :actions="{
+                ...CTA_ACTIONS,
+                cta: ui.cases.saas.cta.cta,
+                secondary: ui.cases.saas.cta.secondary,
+                mode: 'two',
+              }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="band"
+              tone="muted"
+              proof="none"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-shop-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="shop"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-shop-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.shop }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-shop"
+              :title="ui.cases.shop.cta.title"
+              :text="ui.cases.shop.cta.text"
+              :actions="{
+                ...CTA_ACTIONS,
+                cta: ui.cases.shop.cta.cta,
+                secondary: ui.cases.shop.cta.secondary,
+                mode: 'one',
+              }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="split"
+              tone="default"
+              proof="none"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="cta-agency-label"
+          data-testid="variant"
+          data-block="cta"
+          data-variant="agency"
+        >
+          <Title :as="2" size="base" weight="bold" id="cta-agency-label" data-testid="variant-label">
+            {{ ui.blocks.variants.cta.agency }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaBand
+              id="cta-agency"
+              :title="ui.cases.agency.cta.title"
+              :text="ui.cases.agency.cta.text"
+              :actions="{
+                ...CTA_ACTIONS,
+                cta: ui.cases.agency.cta.cta,
+                secondary: ui.cases.agency.cta.secondary,
+                mode: 'two',
+              }"
+              :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+              layout="card"
+              tone="muted"
+              proof="none"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/CtaproofPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/CtaproofPage.vue
new file mode 100644
index 0000000..90cc971
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/CtaproofPage.vue
@@ -0,0 +1,286 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The ctaproof page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  CtaProof,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Logo,
+  type Stat,
+  type Zone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+const CTAPROOF_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.ctaProof.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.ctaProof.secondary,
+  secondaryHref: "#/contact",
+} as const;
+const CTAPROOF_CONTENT = { logos, features, stats, zones } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.ctaproof }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.ctaproof }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-centerLogos-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="centerLogos"
+        >
+          <Title :as="2" size="base" weight="bold" id="ctaproof-centerLogos-label" data-testid="variant-label">
+            {{ ui.blocks.variants.ctaproof.centerLogos }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-centerLogos"
+              :title="ui.marketing.ctaProof.title"
+              :lead="ui.marketing.ctaProof.lead"
+              :badge="ui.marketing.ctaProof.badge"
+              :actions="CTAPROOF_ACTIONS"
+              :content="CTAPROOF_CONTENT"
+              layout="center"
+              proof="logos"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerLogos))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-centerFeatures-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="centerFeatures"
+        >
+          <Title :as="2" size="base" weight="bold" id="ctaproof-centerFeatures-label" data-testid="variant-label">
+            {{ ui.blocks.variants.ctaproof.centerFeatures }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-centerFeatures"
+              :title="ui.marketing.ctaProof.title"
+              :lead="ui.marketing.ctaProof.lead"
+              :badge="ui.marketing.ctaProof.badge"
+              :actions="CTAPROOF_ACTIONS"
+              :content="CTAPROOF_CONTENT"
+              layout="center"
+              proof="features"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerFeatures))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-centerStats-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="centerStats"
+        >
+          <Title :as="2" size="base" weight="bold" id="ctaproof-centerStats-label" data-testid="variant-label">
+            {{ ui.blocks.variants.ctaproof.centerStats }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-centerStats"
+              :title="ui.marketing.ctaProof.title"
+              :lead="ui.marketing.ctaProof.lead"
+              :badge="ui.marketing.ctaProof.badge"
+              :actions="CTAPROOF_ACTIONS"
+              :content="CTAPROOF_CONTENT"
+              layout="center"
+              proof="stats"
+              mediaSide="end"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerStats))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-splitStats-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="splitStats"
+        >
+          <Title :as="2" size="base" weight="bold" id="ctaproof-splitStats-label" data-testid="variant-label">
+            {{ ui.blocks.variants.ctaproof.splitStats }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-splitStats"
+              :title="ui.marketing.ctaProof.title"
+              :lead="ui.marketing.ctaProof.lead"
+              :badge="ui.marketing.ctaProof.badge"
+              :actions="CTAPROOF_ACTIONS"
+              :content="CTAPROOF_CONTENT"
+              layout="split"
+              proof="stats"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-splitStatsStart-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="splitStatsStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="ctaproof-splitStatsStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.ctaproof.splitStatsStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-splitStatsStart"
+              :title="ui.marketing.ctaProof.title"
+              :lead="ui.marketing.ctaProof.lead"
+              :badge="ui.marketing.ctaProof.badge"
+              :actions="CTAPROOF_ACTIONS"
+              :content="CTAPROOF_CONTENT"
+              layout="split"
+              proof="stats"
+              mediaSide="start"
+              tone="default"
+              :note="ui.marketing.ctaProof.note"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStatsStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-splitRows-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="splitRows"
+        >
+          <Title :as="2" size="base" weight="bold" id="ctaproof-splitRows-label" data-testid="variant-label">
+            {{ ui.blocks.variants.ctaproof.splitRows }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-splitRows"
+              :title="ui.marketing.ctaProof.title"
+              :lead="ui.marketing.ctaProof.lead"
+              :badge="ui.marketing.ctaProof.badge"
+              :actions="CTAPROOF_ACTIONS"
+              :content="CTAPROOF_CONTENT"
+              layout="split"
+              proof="rows"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitRows))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="ctaproof-splitZones-label"
+          data-testid="variant"
+          data-block="ctaproof"
+          data-variant="splitZones"
+        >
+          <Title :as="2" size="base" weight="bold" id="ctaproof-splitZones-label" data-testid="variant-label">
+            {{ ui.blocks.variants.ctaproof.splitZones }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <CtaProof
+              id="ctaproof-splitZones"
+              :title="ui.marketing.ctaProof.zonesTitle"
+              :lead="ui.marketing.ctaProof.zonesLead"
+              :badge="ui.marketing.ctaProof.badge"
+              :actions="CTAPROOF_ACTIONS"
+              :content="CTAPROOF_CONTENT"
+              layout="split"
+              proof="zones"
+              mediaSide="end"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitZones))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/DashshellPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/DashshellPage.vue
new file mode 100644
index 0000000..1d42639
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/DashshellPage.vue
@@ -0,0 +1,411 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The dashshell page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  DashboardShell,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+const DASHSHELL_NAV = {
+  label: ui.dashboard.shells.label,
+  brand: ui.site.header.brand,
+  links: sidenav,
+  current: "item-orders",
+  subTitle: ui.dashboard.shells.subTitle,
+  sub: subnav,
+  subCurrent: "subitem-all",
+  search: ui.dashboard.shells.search,
+  shortcut: ui.dashboard.shells.shortcut,
+  expand: ui.dashboard.shells.expand,
+  userName: ui.dashboard.shells.userName,
+  copyright: ui.dashboard.shells.copyright,
+  footerLabel: ui.dashboard.shells.footerLabel,
+  footer: helplinks,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.dashshell }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.dashshell }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-classic-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="classic"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-classic-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.classic }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-classic"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="full"
+              search="show"
+              sidebar="wide"
+              side="start"
+              footer="none"
+              content="grid"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-inset-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="inset"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-inset-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.inset }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-inset"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="inset"
+              search="show"
+              sidebar="wide"
+              side="start"
+              footer="inset"
+              content="split"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.inset))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-rail-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="rail"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-rail-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.rail }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-rail"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="full"
+              search="hide"
+              sidebar="rail"
+              side="start"
+              footer="none"
+              content="list"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.rail))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-railFooter-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="railFooter"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-railFooter-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.railFooter }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-railFooter"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="inset"
+              search="show"
+              sidebar="rail"
+              side="start"
+              footer="full"
+              content="grid"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railFooter))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-collapsed-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="collapsed"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-collapsed-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.collapsed }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-collapsed"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="inset"
+              search="show"
+              sidebar="collapsed"
+              side="start"
+              footer="none"
+              content="split"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsed))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-twoLevel-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="twoLevel"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-twoLevel-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.twoLevel }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-twoLevel"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="inset"
+              search="hide"
+              sidebar="twolevel"
+              side="start"
+              footer="inset"
+              content="list"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-twoLevelFull-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="twoLevelFull"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-twoLevelFull-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.twoLevelFull }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-twoLevelFull"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="full"
+              search="show"
+              sidebar="twolevel"
+              side="start"
+              footer="full"
+              content="split"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevelFull))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-end-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="end"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-end-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.end }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-end"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="full"
+              search="show"
+              sidebar="wide"
+              side="end"
+              footer="full"
+              content="split"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-railEnd-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="railEnd"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-railEnd-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.railEnd }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-railEnd"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="inset"
+              search="hide"
+              sidebar="rail"
+              side="end"
+              footer="inset"
+              content="grid"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railEnd))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-topOnly-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="topOnly"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-topOnly-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.topOnly }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-topOnly"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="full"
+              search="show"
+              sidebar="none"
+              side="start"
+              footer="full"
+              content="grid"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.topOnly))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-sideOnly-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="sideOnly"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-sideOnly-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.sideOnly }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-sideOnly"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="none"
+              search="show"
+              sidebar="wide"
+              side="start"
+              footer="inset"
+              content="list"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.sideOnly))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="dashshell-collapsedEnd-label"
+          data-testid="variant"
+          data-block="dashshell"
+          data-variant="collapsedEnd"
+        >
+          <Title :as="2" size="base" weight="bold" id="dashshell-collapsedEnd-label" data-testid="variant-label">
+            {{ ui.blocks.variants.dashshell.collapsedEnd }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardShell
+              id="dashshell-collapsedEnd"
+              :title="ui.dashboard.shells.title"
+              :nav="DASHSHELL_NAV"
+              topbar="none"
+              search="show"
+              sidebar="collapsed"
+              side="end"
+              footer="full"
+              content="split"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsedEnd))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/DeliveryPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/DeliveryPage.vue
new file mode 100644
index 0000000..9017f25
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/DeliveryPage.vue
@@ -0,0 +1,147 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The delivery page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  DeliveryInfo,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Zone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.delivery }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.delivery }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="delivery-full-label"
+          data-testid="variant"
+          data-block="delivery"
+          data-variant="full"
+        >
+          <Title :as="2" size="base" weight="bold" id="delivery-full-label" data-testid="variant-label">
+            {{ ui.blocks.variants.delivery.full }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DeliveryInfo
+              id="delivery-full"
+              :title="ui.commerce.delivery.title"
+              :lead="ui.commerce.delivery.lead"
+              :facts="deliveryfacts"
+              :zones="zones"
+              :labels="ui.commerce.delivery"
+              layout="full"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="delivery-split-label"
+          data-testid="variant"
+          data-block="delivery"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="delivery-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.delivery.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DeliveryInfo
+              id="delivery-split"
+              :title="ui.commerce.delivery.title"
+              :lead="ui.commerce.delivery.lead"
+              :facts="deliveryfacts"
+              :zones="zones"
+              :labels="ui.commerce.delivery"
+              layout="split"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="delivery-facts-label"
+          data-testid="variant"
+          data-block="delivery"
+          data-variant="facts"
+        >
+          <Title :as="2" size="base" weight="bold" id="delivery-facts-label" data-testid="variant-label">
+            {{ ui.blocks.variants.delivery.facts }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DeliveryInfo
+              id="delivery-facts"
+              :title="ui.commerce.delivery.title"
+              :lead="ui.commerce.delivery.lead"
+              :facts="deliveryfacts"
+              :zones="zones"
+              :labels="ui.commerce.delivery"
+              layout="facts"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.facts))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/EmptyPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/EmptyPage.vue
new file mode 100644
index 0000000..0819417
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/EmptyPage.vue
@@ -0,0 +1,212 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The empty page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  EmptyPanel,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.empty }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.empty }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-illustrated-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="illustrated"
+        >
+          <Title :as="2" size="base" weight="bold" id="empty-illustrated-label" data-testid="variant-label">
+            {{ ui.blocks.variants.empty.illustrated }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-illustrated"
+              :title="ui.dashboard.empty.tour.title"
+              :text="ui.dashboard.empty.tour.text"
+              :cta="ui.dashboard.empty.tour.cta"
+              ctaHref="#/"
+              layout="card"
+              actions="button"
+              visual="image"
+              size="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-orders-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="orders"
+        >
+          <Title :as="2" size="base" weight="bold" id="empty-orders-label" data-testid="variant-label">
+            {{ ui.blocks.variants.empty.orders }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-orders"
+              :title="ui.dashboard.empty.orders.title"
+              :text="ui.dashboard.empty.orders.text"
+              :cta="ui.dashboard.empty.orders.cta"
+              ctaHref="#/"
+              layout="card"
+              actions="button"
+              visual="icon"
+              size="default"
+              icon="shopping-bag"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-results-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="results"
+        >
+          <Title :as="2" size="base" weight="bold" id="empty-results-label" data-testid="variant-label">
+            {{ ui.blocks.variants.empty.results }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-results"
+              :title="ui.dashboard.empty.results.title"
+              :text="ui.dashboard.empty.results.text"
+              :cta="ui.dashboard.empty.results.cta"
+              ctaHref="#/"
+              layout="plain"
+              actions="button"
+              visual="icon"
+              size="default"
+              icon="search"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.results))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-inbox-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="inbox"
+        >
+          <Title :as="2" size="base" weight="bold" id="empty-inbox-label" data-testid="variant-label">
+            {{ ui.blocks.variants.empty.inbox }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-inbox"
+              :title="ui.dashboard.empty.inbox.title"
+              :text="ui.dashboard.empty.inbox.text"
+              :cta="ui.dashboard.empty.inbox.cta"
+              ctaHref="#/"
+              layout="card"
+              actions="none"
+              visual="icon"
+              size="default"
+              icon="inbox"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.inbox))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-compact-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="empty-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.empty.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-compact"
+              :title="ui.dashboard.empty.inbox.title"
+              :text="ui.dashboard.empty.inbox.text"
+              :cta="ui.dashboard.empty.inbox.cta"
+              ctaHref="#/"
+              layout="card"
+              actions="button"
+              visual="icon"
+              size="compact"
+              icon="inbox"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="empty-plainNoAction-label"
+          data-testid="variant"
+          data-block="empty"
+          data-variant="plainNoAction"
+        >
+          <Title :as="2" size="base" weight="bold" id="empty-plainNoAction-label" data-testid="variant-label">
+            {{ ui.blocks.variants.empty.plainNoAction }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <EmptyPanel
+              id="empty-plainNoAction"
+              :title="ui.dashboard.empty.results.title"
+              :text="ui.dashboard.empty.results.text"
+              :cta="ui.dashboard.empty.results.cta"
+              ctaHref="#/"
+              layout="plain"
+              actions="none"
+              visual="icon"
+              size="compact"
+              icon="search"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.plainNoAction))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ErrorpagePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ErrorpagePage.vue
new file mode 100644
index 0000000..fa91467
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ErrorpagePage.vue
@@ -0,0 +1,181 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The errorpage page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  ErrorPage,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ERRORPAGE_ACTIONS = { cta: ui.vibe.error.cta, href: "#/", secondary: ui.vibe.error.secondary, secondaryHref: "#/" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="support">
+            {{ ui.blocks.themes.support.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.errorpage }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.errorpage }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-centered-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="centered"
+        >
+          <Title :as="2" size="base" weight="bold" id="errorpage-centered-label" data-testid="variant-label">
+            {{ ui.blocks.variants.errorpage.centered }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-centered"
+              :title="ui.vibe.error.title"
+              :text="ui.vibe.error.text"
+              :status="ui.vibe.error.status"
+              :actions="{ ...ERRORPAGE_ACTIONS, mode: 'one' }"
+              layout="centered"
+              code="show"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.centered))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-split-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="errorpage-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.errorpage.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-split"
+              :title="ui.vibe.error.title"
+              :text="ui.vibe.error.text"
+              :status="ui.vibe.error.status"
+              :actions="{ ...ERRORPAGE_ACTIONS, mode: 'one' }"
+              layout="split"
+              code="show"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-noCode-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="noCode"
+        >
+          <Title :as="2" size="base" weight="bold" id="errorpage-noCode-label" data-testid="variant-label">
+            {{ ui.blocks.variants.errorpage.noCode }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-noCode"
+              :title="ui.vibe.error.title"
+              :text="ui.vibe.error.text"
+              :status="ui.vibe.error.status"
+              :actions="{ ...ERRORPAGE_ACTIONS, mode: 'one' }"
+              layout="centered"
+              code="hide"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.noCode))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-two-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="two"
+        >
+          <Title :as="2" size="base" weight="bold" id="errorpage-two-label" data-testid="variant-label">
+            {{ ui.blocks.variants.errorpage.two }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-two"
+              :title="ui.vibe.error.title"
+              :text="ui.vibe.error.text"
+              :status="ui.vibe.error.status"
+              :actions="{ ...ERRORPAGE_ACTIONS, mode: 'two' }"
+              layout="centered"
+              code="show"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.two))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="errorpage-muted-label"
+          data-testid="variant"
+          data-block="errorpage"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="errorpage-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.errorpage.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ErrorPage
+              id="errorpage-muted"
+              :title="ui.vibe.error.title"
+              :text="ui.vibe.error.text"
+              :status="ui.vibe.error.status"
+              :actions="{ ...ERRORPAGE_ACTIONS, mode: 'one' }"
+              layout="centered"
+              code="show"
+              tone="muted"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/FaqPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/FaqPage.vue
new file mode 100644
index 0000000..26c623c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/FaqPage.vue
@@ -0,0 +1,254 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The faq page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FaqList,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Faq,
+  type FaqTab,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+
+const FAQ_FILTER = { tabs: faqtabs, label: ui.vibe.faq.tabs, category: "" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.faq }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.faq }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-list-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="faq-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faq.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-list"
+              :title="ui.site.pricing.faqTitle"
+              :items="faq"
+              :empty="ui.vibe.faq.empty"
+              :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+              :filter="{ ...FAQ_FILTER, mode: 'none' }"
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-chat-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="chat"
+        >
+          <Title :as="2" size="base" weight="bold" id="faq-chat-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faq.chat }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-chat"
+              :title="ui.site.pricing.faqTitle"
+              :items="faq"
+              :empty="ui.vibe.faq.empty"
+              :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+              :filter="{ ...FAQ_FILTER, mode: 'none' }"
+              layout="chat"
+              cols="1"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-search-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="search"
+        >
+          <Title :as="2" size="base" weight="bold" id="faq-search-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faq.search }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-search"
+              :title="ui.site.pricing.faqTitle"
+              :items="faq"
+              :empty="ui.vibe.faq.empty"
+              :search="{ label: ui.vibe.faq.search, query: '', mode: 'field' }"
+              :filter="{ ...FAQ_FILTER, mode: 'none' }"
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-tabs-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="tabs"
+        >
+          <Title :as="2" size="base" weight="bold" id="faq-tabs-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faq.tabs }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-tabs"
+              :title="ui.site.pricing.faqTitle"
+              :items="faq"
+              :empty="ui.vibe.faq.empty"
+              :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+              :filter="{ ...FAQ_FILTER, category: 'billing', mode: 'categories' }"
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-twoColumns-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="twoColumns"
+        >
+          <Title :as="2" size="base" weight="bold" id="faq-twoColumns-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faq.twoColumns }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-twoColumns"
+              :title="ui.site.pricing.faqTitle"
+              :items="faq"
+              :empty="ui.vibe.faq.empty"
+              :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+              :filter="{ ...FAQ_FILTER, mode: 'none' }"
+              layout="accordion"
+              cols="2"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-muted-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="faq-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faq.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-muted"
+              :title="ui.site.pricing.faqTitle"
+              :items="faq"
+              :empty="ui.vibe.faq.empty"
+              :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+              :filter="{ ...FAQ_FILTER, mode: 'none' }"
+              layout="accordion"
+              cols="1"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.muted))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faq-roomy-label"
+          data-testid="variant"
+          data-block="faq"
+          data-variant="roomy"
+        >
+          <Title :as="2" size="base" weight="bold" id="faq-roomy-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faq.roomy }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqList
+              id="faq-roomy"
+              :title="ui.site.pricing.faqTitle"
+              :items="faq"
+              :empty="ui.vibe.faq.empty"
+              :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+              :filter="{ ...FAQ_FILTER, mode: 'none' }"
+              layout="accordion"
+              cols="1"
+              tone="default"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.roomy))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/FaqsplitPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/FaqsplitPage.vue
new file mode 100644
index 0000000..102fa0c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/FaqsplitPage.vue
@@ -0,0 +1,286 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The faqsplit page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FaqSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type FaqTab,
+  type Feature,
+  type Question,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const QUESTIONS_FIELDS = {
+  "id": "id",
+  "question": "title",
+  "answer": "metadata.answer.value",
+  "category": "terms|term:faq_category",
+  "icon": "metadata.icon.value",
+} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+
+const FAQSPLIT_LABELS = {
+  cta: ui.marketing.faqSplit.cta,
+  more: ui.marketing.faqSplit.more,
+  asideTitle: ui.marketing.faqSplit.asideTitle,
+  asideText: ui.marketing.faqSplit.asideText,
+  asideCta: ui.marketing.faqSplit.asideCta,
+  search: ui.marketing.faqSplit.search,
+  popular: ui.marketing.faqSplit.popular,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.faqsplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.faqsplit }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-headSplit-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="headSplit"
+        >
+          <Title :as="2" size="base" weight="bold" id="faqsplit-headSplit-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faqsplit.headSplit }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-headSplit"
+              :title="ui.marketing.faqSplit.title"
+              :lead="ui.marketing.faqSplit.lead"
+              :badge="ui.marketing.faqSplit.badge"
+              :items="questions"
+              :channels="channels"
+              :topics="faqtabs"
+              :labels="FAQSPLIT_LABELS"
+              layout="head"
+              cards="grid3"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.headSplit))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-helpCard-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="helpCard"
+        >
+          <Title :as="2" size="base" weight="bold" id="faqsplit-helpCard-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faqsplit.helpCard }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-helpCard"
+              :title="ui.marketing.faqSplit.title"
+              :lead="ui.marketing.faqSplit.lead"
+              :badge="ui.marketing.faqSplit.badge"
+              :items="questions"
+              :channels="channels"
+              :topics="faqtabs"
+              :labels="FAQSPLIT_LABELS"
+              layout="aside"
+              cards="grid3"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-picture-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="picture"
+        >
+          <Title :as="2" size="base" weight="bold" id="faqsplit-picture-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faqsplit.picture }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-picture"
+              :title="ui.marketing.faqSplit.title"
+              :lead="ui.marketing.faqSplit.lead"
+              :badge="ui.marketing.faqSplit.badge"
+              :items="questions"
+              :channels="channels"
+              :topics="faqtabs"
+              :labels="FAQSPLIT_LABELS"
+              layout="media"
+              cards="grid3"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.picture))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-finder-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="finder"
+        >
+          <Title :as="2" size="base" weight="bold" id="faqsplit-finder-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faqsplit.finder }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-finder"
+              :title="ui.marketing.faqSplit.title"
+              :lead="ui.marketing.faqSplit.lead"
+              :badge="ui.marketing.faqSplit.badge"
+              :items="questions"
+              :channels="channels"
+              :topics="faqtabs"
+              :labels="FAQSPLIT_LABELS"
+              layout="search"
+              cards="grid3"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.finder))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-cards3-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="cards3"
+        >
+          <Title :as="2" size="base" weight="bold" id="faqsplit-cards3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faqsplit.cards3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-cards3"
+              :title="ui.marketing.faqSplit.title"
+              :lead="ui.marketing.faqSplit.lead"
+              :badge="ui.marketing.faqSplit.badge"
+              :items="questions"
+              :channels="channels"
+              :topics="faqtabs"
+              :labels="FAQSPLIT_LABELS"
+              layout="cards"
+              cards="grid3"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-cards4-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="cards4"
+        >
+          <Title :as="2" size="base" weight="bold" id="faqsplit-cards4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faqsplit.cards4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-cards4"
+              :title="ui.marketing.faqSplit.title"
+              :lead="ui.marketing.faqSplit.lead"
+              :badge="ui.marketing.faqSplit.badge"
+              :items="questions"
+              :channels="channels"
+              :topics="faqtabs"
+              :labels="FAQSPLIT_LABELS"
+              layout="cards"
+              cards="grid4"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="faqsplit-cardsIcons-label"
+          data-testid="variant"
+          data-block="faqsplit"
+          data-variant="cardsIcons"
+        >
+          <Title :as="2" size="base" weight="bold" id="faqsplit-cardsIcons-label" data-testid="variant-label">
+            {{ ui.blocks.variants.faqsplit.cardsIcons }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FaqSplit
+              id="faqsplit-cardsIcons"
+              :title="ui.marketing.faqSplit.title"
+              :lead="ui.marketing.faqSplit.lead"
+              :badge="ui.marketing.faqSplit.badge"
+              :items="questions"
+              :channels="channels"
+              :topics="faqtabs"
+              :labels="FAQSPLIT_LABELS"
+              layout="cards"
+              cards="icons"
+              mediaSide="end"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cardsIcons))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/FeaturesPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/FeaturesPage.vue
new file mode 100644
index 0000000..9220f1f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/FeaturesPage.vue
@@ -0,0 +1,284 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The features page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FeatureGrid,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.features }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.features }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-grid-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="grid"
+        >
+          <Title :as="2" size="base" weight="bold" id="features-grid-label" data-testid="variant-label">
+            {{ ui.blocks.variants.features.grid }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-grid"
+              :title="ui.site.home.featuresTitle"
+              :features="features"
+              :empty="ui.empty.features"
+              :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+              layout="grid"
+              cols="1-3"
+              item="card"
+              mediaSide="end"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-grid2-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="grid2"
+        >
+          <Title :as="2" size="base" weight="bold" id="features-grid2-label" data-testid="variant-label">
+            {{ ui.blocks.variants.features.grid2 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-grid2"
+              :title="ui.site.home.featuresTitle"
+              :features="features"
+              :empty="ui.empty.features"
+              :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+              layout="grid"
+              cols="1-2"
+              item="card"
+              mediaSide="end"
+              tone="default"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-tiles4-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="tiles4"
+        >
+          <Title :as="2" size="base" weight="bold" id="features-tiles4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.features.tiles4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-tiles4"
+              :title="ui.site.home.featuresTitle"
+              :features="features"
+              :empty="ui.empty.features"
+              :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+              layout="grid"
+              cols="1-4"
+              item="tile"
+              mediaSide="end"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-cells4-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="cells4"
+        >
+          <Title :as="2" size="base" weight="bold" id="features-cells4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.features.cells4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-cells4"
+              :title="ui.site.home.featuresTitle"
+              :features="features"
+              :empty="ui.empty.features"
+              :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+              layout="grid"
+              cols="1-4"
+              item="cell"
+              mediaSide="end"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.cells4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-rows-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="rows"
+        >
+          <Title :as="2" size="base" weight="bold" id="features-rows-label" data-testid="variant-label">
+            {{ ui.blocks.variants.features.rows }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-rows"
+              :title="ui.site.home.featuresTitle"
+              :features="features"
+              :empty="ui.empty.features"
+              :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+              layout="rows"
+              cols="1-3"
+              item="card"
+              mediaSide="end"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rows))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-rowsStart-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="rowsStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="features-rowsStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.features.rowsStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-rowsStart"
+              :title="ui.site.home.featuresTitle"
+              :features="features"
+              :empty="ui.empty.features"
+              :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+              layout="rows"
+              cols="1-3"
+              item="card"
+              mediaSide="start"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-rowsAlternate-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="rowsAlternate"
+        >
+          <Title :as="2" size="base" weight="bold" id="features-rowsAlternate-label" data-testid="variant-label">
+            {{ ui.blocks.variants.features.rowsAlternate }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-rowsAlternate"
+              :title="ui.site.home.featuresTitle"
+              :features="features"
+              :empty="ui.empty.features"
+              :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+              layout="rows"
+              cols="1-3"
+              item="card"
+              mediaSide="alternate"
+              tone="muted"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="features-tilesMuted-label"
+          data-testid="variant"
+          data-block="features"
+          data-variant="tilesMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="features-tilesMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.features.tilesMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureGrid
+              id="features-tilesMuted"
+              :title="ui.site.home.featuresTitle"
+              :features="features"
+              :empty="ui.empty.features"
+              :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+              layout="grid"
+              cols="1-3"
+              item="tile"
+              mediaSide="end"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tilesMuted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/FeatureshowcasePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/FeatureshowcasePage.vue
new file mode 100644
index 0000000..fb61806
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/FeatureshowcasePage.vue
@@ -0,0 +1,163 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The featureshowcase page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FeatureShowcase,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.featureshowcase }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.featureshowcase }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featureshowcase-pictureCards3-label"
+          data-testid="variant"
+          data-block="featureshowcase"
+          data-variant="pictureCards3"
+        >
+          <Title :as="2" size="base" weight="bold" id="featureshowcase-pictureCards3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featureshowcase.pictureCards3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureShowcase
+              id="featureshowcase-pictureCards3"
+              :title="ui.marketing.featureShowcase.title"
+              :lead="ui.marketing.featureShowcase.lead"
+              :features="values"
+              :empty="ui.empty.features"
+              :more="ui.marketing.featureShowcase.more"
+              item="picture"
+              cols="3"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featureshowcase-panelCards4-label"
+          data-testid="variant"
+          data-block="featureshowcase"
+          data-variant="panelCards4"
+        >
+          <Title :as="2" size="base" weight="bold" id="featureshowcase-panelCards4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featureshowcase.panelCards4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureShowcase
+              id="featureshowcase-panelCards4"
+              :title="ui.marketing.featureShowcase.title"
+              :lead="ui.marketing.featureShowcase.lead"
+              :features="features"
+              :empty="ui.empty.features"
+              :more="ui.marketing.featureShowcase.more"
+              item="panel"
+              cols="4"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featureshowcase-pictureCards4-label"
+          data-testid="variant"
+          data-block="featureshowcase"
+          data-variant="pictureCards4"
+        >
+          <Title :as="2" size="base" weight="bold" id="featureshowcase-pictureCards4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featureshowcase.pictureCards4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureShowcase
+              id="featureshowcase-pictureCards4"
+              :title="ui.marketing.featureShowcase.title"
+              :lead="ui.marketing.featureShowcase.lead"
+              :features="features"
+              :empty="ui.empty.features"
+              :more="ui.marketing.featureShowcase.more"
+              item="picture"
+              cols="4"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featureshowcase-panelCards3-label"
+          data-testid="variant"
+          data-block="featureshowcase"
+          data-variant="panelCards3"
+        >
+          <Title :as="2" size="base" weight="bold" id="featureshowcase-panelCards3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featureshowcase.panelCards3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureShowcase
+              id="featureshowcase-panelCards3"
+              :title="ui.marketing.featureShowcase.title"
+              :lead="ui.marketing.featureShowcase.lead"
+              :features="values"
+              :empty="ui.empty.features"
+              :more="ui.marketing.featureShowcase.more"
+              item="panel"
+              cols="3"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards3))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/FeaturesplitPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/FeaturesplitPage.vue
new file mode 100644
index 0000000..4729557
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/FeaturesplitPage.vue
@@ -0,0 +1,215 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The featuresplit page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FeatureSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+const FEATURESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.featureSplit.cta,
+  href: "#/start",
+  secondary: ui.marketing.featureSplit.secondary,
+  secondaryHref: "#/work",
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.featuresplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.featuresplit }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-gridStart-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="gridStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="featuresplit-gridStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featuresplit.gridStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-gridStart"
+              :title="ui.marketing.featureSplit.title"
+              :lead="ui.marketing.featureSplit.lead"
+              :badge="ui.marketing.featureSplit.badge"
+              :features="features"
+              :stats="stats"
+              :actions="FEATURESPLIT_ACTIONS"
+              layout="grid"
+              mediaSide="start"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-statsStart-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="statsStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="featuresplit-statsStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featuresplit.statsStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-statsStart"
+              :title="ui.marketing.featureSplit.title"
+              :lead="ui.marketing.featureSplit.lead"
+              :badge="ui.marketing.featureSplit.badge"
+              :features="features"
+              :stats="stats"
+              :actions="FEATURESPLIT_ACTIONS"
+              layout="stats"
+              mediaSide="start"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.statsStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-gridMuted-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="gridMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="featuresplit-gridMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featuresplit.gridMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-gridMuted"
+              :title="ui.marketing.featureSplit.title"
+              :lead="ui.marketing.featureSplit.lead"
+              :badge="ui.marketing.featureSplit.badge"
+              :features="features"
+              :stats="stats"
+              :actions="FEATURESPLIT_ACTIONS"
+              layout="grid"
+              mediaSide="end"
+              tone="muted"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridMuted))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-metricCards-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="metricCards"
+        >
+          <Title :as="2" size="base" weight="bold" id="featuresplit-metricCards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featuresplit.metricCards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-metricCards"
+              :title="ui.marketing.featureSplit.title"
+              :lead="ui.marketing.featureSplit.lead"
+              :badge="ui.marketing.featureSplit.badge"
+              :features="features"
+              :stats="stats"
+              :actions="FEATURESPLIT_ACTIONS"
+              layout="metrics"
+              mediaSide="end"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuresplit-featureCards-label"
+          data-testid="variant"
+          data-block="featuresplit"
+          data-variant="featureCards"
+        >
+          <Title :as="2" size="base" weight="bold" id="featuresplit-featureCards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featuresplit.featureCards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSplit
+              id="featuresplit-featureCards"
+              :title="ui.marketing.featureSplit.title"
+              :lead="ui.marketing.featureSplit.lead"
+              :badge="ui.marketing.featureSplit.badge"
+              :features="features"
+              :stats="stats"
+              :actions="FEATURESPLIT_ACTIONS"
+              layout="cards"
+              mediaSide="end"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.featureCards))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/FeaturetabsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/FeaturetabsPage.vue
new file mode 100644
index 0000000..1b1d870
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/FeaturetabsPage.vue
@@ -0,0 +1,133 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The featuretabs page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FeatureTabs,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.featuretabs }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.featuretabs }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuretabs-split-label"
+          data-testid="variant"
+          data-block="featuretabs"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="featuretabs-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featuretabs.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureTabs
+              id="featuretabs-split"
+              :title="ui.vibe.tabs.title"
+              :features="features"
+              :empty="ui.empty.features"
+              :tabsLabel="ui.vibe.tabs.label"
+              active="feature-clear"
+              panel="split"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuretabs-stack-label"
+          data-testid="variant"
+          data-block="featuretabs"
+          data-variant="stack"
+        >
+          <Title :as="2" size="base" weight="bold" id="featuretabs-stack-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featuretabs.stack }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureTabs
+              id="featuretabs-stack"
+              :title="ui.vibe.tabs.title"
+              :features="features"
+              :empty="ui.empty.features"
+              :tabsLabel="ui.vibe.tabs.label"
+              active="feature-clear"
+              panel="stack"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.stack))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="featuretabs-muted-label"
+          data-testid="variant"
+          data-block="featuretabs"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="featuretabs-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.featuretabs.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureTabs
+              id="featuretabs-muted"
+              :title="ui.vibe.tabs.title"
+              :features="features"
+              :empty="ui.empty.features"
+              :tabsLabel="ui.vibe.tabs.label"
+              active="feature-clear"
+              panel="split"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/FooterPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/FooterPage.vue
new file mode 100644
index 0000000..8e80144
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/FooterPage.vue
@@ -0,0 +1,108 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The footer page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SiteFooter,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.footer }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.footer }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footer-minimal-label"
+          data-testid="variant"
+          data-block="footer"
+          data-variant="minimal"
+        >
+          <Title :as="2" size="base" weight="bold" id="footer-minimal-label" data-testid="variant-label">
+            {{ ui.blocks.variants.footer.minimal }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteFooter
+              :labels="ui.site.footer"
+              layout="minimal"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.minimal))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footer-centered-label"
+          data-testid="variant"
+          data-block="footer"
+          data-variant="centered"
+        >
+          <Title :as="2" size="base" weight="bold" id="footer-centered-label" data-testid="variant-label">
+            {{ ui.blocks.variants.footer.centered }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteFooter
+              :labels="ui.site.footer"
+              layout="centered"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footer-compact-label"
+          data-testid="variant"
+          data-block="footer"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="footer-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.footer.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteFooter
+              :labels="ui.site.footer"
+              layout="minimal"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.compact))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/FootersplitPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/FootersplitPage.vue
new file mode 100644
index 0000000..8436c26
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/FootersplitPage.vue
@@ -0,0 +1,248 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The footersplit page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FooterSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type MegaGroup,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+
+const FOOTERSPLIT_EXTRAS = { stats, points: features, contacts, channels: community } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.footersplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.footersplit }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-statsCards-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="statsCards"
+        >
+          <Title :as="2" size="base" weight="bold" id="footersplit-statsCards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.footersplit.statsCards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-statsCards"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.marketing.footerSplit.tagline"
+              :copyright="ui.marketing.footerSplit.copyright"
+              :groups="sitemap"
+              :extras="FOOTERSPLIT_EXTRAS"
+              :labels="ui.marketing.footerSplit.labels"
+              layout="stats"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.statsCards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-splitPoints-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="splitPoints"
+        >
+          <Title :as="2" size="base" weight="bold" id="footersplit-splitPoints-label" data-testid="variant-label">
+            {{ ui.blocks.variants.footersplit.splitPoints }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-splitPoints"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.marketing.footerSplit.tagline"
+              :copyright="ui.marketing.footerSplit.copyright"
+              :groups="sitemap"
+              :extras="FOOTERSPLIT_EXTRAS"
+              :labels="ui.marketing.footerSplit.labels"
+              layout="points"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitPoints))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-splitLinks-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="splitLinks"
+        >
+          <Title :as="2" size="base" weight="bold" id="footersplit-splitLinks-label" data-testid="variant-label">
+            {{ ui.blocks.variants.footersplit.splitLinks }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-splitLinks"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.marketing.footerSplit.tagline"
+              :copyright="ui.marketing.footerSplit.copyright"
+              :groups="sitemap"
+              :extras="FOOTERSPLIT_EXTRAS"
+              :labels="ui.marketing.footerSplit.labels"
+              layout="links"
+              mediaSide="end"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitLinks))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-newsletterStart-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="newsletterStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="footersplit-newsletterStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.footersplit.newsletterStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-newsletterStart"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.marketing.footerSplit.tagline"
+              :copyright="ui.marketing.footerSplit.copyright"
+              :groups="sitemap"
+              :extras="FOOTERSPLIT_EXTRAS"
+              :labels="ui.marketing.footerSplit.labels"
+              layout="newsletter"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.newsletterStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-splitContacts-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="splitContacts"
+        >
+          <Title :as="2" size="base" weight="bold" id="footersplit-splitContacts-label" data-testid="variant-label">
+            {{ ui.blocks.variants.footersplit.splitContacts }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-splitContacts"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.marketing.footerSplit.tagline"
+              :copyright="ui.marketing.footerSplit.copyright"
+              :groups="sitemap"
+              :extras="FOOTERSPLIT_EXTRAS"
+              :labels="ui.marketing.footerSplit.labels"
+              layout="contacts"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitContacts))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="footersplit-channelsStart-label"
+          data-testid="variant"
+          data-block="footersplit"
+          data-variant="channelsStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="footersplit-channelsStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.footersplit.channelsStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FooterSplit
+              id="footersplit-channelsStart"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.marketing.footerSplit.tagline"
+              :copyright="ui.marketing.footerSplit.copyright"
+              :groups="sitemap"
+              :extras="FOOTERSPLIT_EXTRAS"
+              :labels="ui.marketing.footerSplit.labels"
+              layout="channels"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.channelsStart))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/HeaderPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/HeaderPage.vue
new file mode 100644
index 0000000..65bb0f4
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/HeaderPage.vue
@@ -0,0 +1,147 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The header page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SiteHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.header }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.header }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="header-inline-label"
+          data-testid="variant"
+          data-block="header"
+          data-variant="inline"
+        >
+          <Title :as="2" size="base" weight="bold" id="header-inline-label" data-testid="variant-label">
+            {{ ui.blocks.variants.header.inline }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteHeader
+              :labels="ui.site.header"
+              current="home"
+              :cta="ui.site.header.cta"
+              layout="inline"
+              position="static"
+              actions="none"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.inline))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="header-stacked-label"
+          data-testid="variant"
+          data-block="header"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="header-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.header.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteHeader
+              :labels="ui.site.header"
+              current="home"
+              :cta="ui.site.header.cta"
+              layout="stacked"
+              position="static"
+              actions="none"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="header-sticky-label"
+          data-testid="variant"
+          data-block="header"
+          data-variant="sticky"
+        >
+          <Title :as="2" size="base" weight="bold" id="header-sticky-label" data-testid="variant-label">
+            {{ ui.blocks.variants.header.sticky }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteHeader
+              :labels="ui.site.header"
+              current="home"
+              :cta="ui.site.header.cta"
+              layout="inline"
+              position="sticky"
+              actions="none"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.sticky))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="header-withCta-label"
+          data-testid="variant"
+          data-block="header"
+          data-variant="withCta"
+        >
+          <Title :as="2" size="base" weight="bold" id="header-withCta-label" data-testid="variant-label">
+            {{ ui.blocks.variants.header.withCta }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SiteHeader
+              :labels="ui.site.header"
+              current="home"
+              :cta="ui.site.header.cta"
+              layout="inline"
+              position="static"
+              actions="cta"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.withCta))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/HeroPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/HeroPage.vue
new file mode 100644
index 0000000..097b4e3
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/HeroPage.vue
@@ -0,0 +1,512 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The hero page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroClassic,
+  HeroPrompt,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type NavLink,
+  type Topic,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { prompts as promptsEntries } from "@ui8kit/app-shared/data/prompts";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const PROMPTS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const prompts = fromCodex<Topic>(promptsEntries, PROMPTS_FIELDS, CODEX);
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+
+const HERO_ACTIONS = {
+  cta: ui.site.home.cta,
+  href: "#/pricing",
+  secondary: ui.site.home.secondary,
+  secondaryHref: "#/pricing",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+const HERO_MEDIA = { codeTitle: ui.vibe.code.title, prompt: ui.vibe.code.prompt, lines: terminal } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.hero }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.hero }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-centered-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="centered"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-centered-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.centered }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-centered"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+              :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.centered))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-screenshot-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="screenshot"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-screenshot-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.screenshot }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-screenshot"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+              :media="{ ...HERO_MEDIA, kind: 'image', side: 'end' }"
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.screenshot))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-backdrop-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="backdrop"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-backdrop-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.backdrop }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-backdrop"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+              :media="{ ...HERO_MEDIA, kind: 'backdrop', side: 'end' }"
+              layout="centered"
+              scale="default"
+              tone="muted"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.backdrop))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-code-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="code"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-code-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.code }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-code"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'two' }"
+              :media="{ ...HERO_MEDIA, kind: 'code', side: 'end' }"
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.code))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-cluster-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="cluster"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-cluster-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.cluster }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-cluster"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+              :media="{ ...HERO_MEDIA, kind: 'cluster', side: 'end' }"
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.cluster))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-display-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="display"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-display-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.display }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-display"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+              :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+              layout="centered"
+              scale="display"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.display))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-form-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="form"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-form-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.form }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-form"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'form' }"
+              :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.form))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-prompt-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="prompt"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-prompt-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.prompt }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroPrompt
+              :title="ui.vibe.hero.title"
+              :actions="{ ...HERO_ACTIONS, emailLabel: ui.vibe.hero.promptLabel, mode: 'form' }"
+              :composer="{ attachLabel: ui.vibe.hero.attach, modelLabel: ui.vibe.hero.model }"
+              :nav="{
+                brand: ui.site.header.brand,
+                links: navlinks,
+                current: 'link-product',
+                skip: ui.site.header.skip,
+                label: ui.site.header.nav,
+                login: ui.site.header.login,
+                loginHref: '#/login',
+              }"
+              density="compact"
+              :badge="ui.vibe.hero.badgeLabel"
+              :badgeMark="ui.vibe.hero.badgeMark"
+              :topics="prompts"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.prompt))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-twoActions-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="twoActions"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-twoActions-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.twoActions }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-twoActions"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'two' }"
+              :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.twoActions))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-split-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-split"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+              :media="{ ...HERO_MEDIA, kind: 'image', side: 'end' }"
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-splitStart-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="splitStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-splitStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.splitStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-splitStart"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'two' }"
+              :media="{ ...HERO_MEDIA, kind: 'image', side: 'start' }"
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.splitStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-muted-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-muted"
+              :title="ui.site.home.title"
+              :text="ui.site.home.text"
+              :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+              :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+              layout="centered"
+              scale="default"
+              tone="muted"
+              density="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.muted))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-saas-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="saas"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-saas-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.saas }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-saas"
+              :title="ui.cases.saas.hero.title"
+              :text="ui.cases.saas.hero.text"
+              :actions="{
+                ...HERO_ACTIONS,
+                cta: ui.cases.saas.hero.cta,
+                secondary: ui.cases.saas.hero.secondary,
+                mode: 'two',
+              }"
+              :media="{ ...HERO_MEDIA, kind: 'image', side: 'end' }"
+              layout="split"
+              scale="default"
+              tone="default"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.saas))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-shop-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="shop"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.shop }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-shop"
+              :title="ui.cases.shop.hero.title"
+              :text="ui.cases.shop.hero.text"
+              :actions="{
+                ...HERO_ACTIONS,
+                cta: ui.cases.shop.hero.cta,
+                secondary: ui.cases.shop.hero.secondary,
+                mode: 'one',
+              }"
+              :media="{ ...HERO_MEDIA, kind: 'image', side: 'start' }"
+              layout="split"
+              scale="default"
+              tone="muted"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="hero-blog-label"
+          data-testid="variant"
+          data-block="hero"
+          data-variant="blog"
+        >
+          <Title :as="2" size="base" weight="bold" id="hero-blog-label" data-testid="variant-label">
+            {{ ui.blocks.variants.hero.blog }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroClassic
+              id="hero-blog"
+              :title="ui.cases.blog.hero.title"
+              :text="ui.cases.blog.hero.text"
+              :actions="{
+                ...HERO_ACTIONS,
+                cta: ui.cases.blog.hero.cta,
+                secondary: ui.cases.blog.hero.secondary,
+                mode: 'one',
+              }"
+              :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+              layout="centered"
+              scale="default"
+              tone="default"
+              density="compact"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.blog))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/HerosplitPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/HerosplitPage.vue
new file mode 100644
index 0000000..25bd99c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/HerosplitPage.vue
@@ -0,0 +1,310 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The herosplit page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroSplit,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Plan,
+  type Quote,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+const HEROSPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.heroSplit.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.heroSplit.secondary,
+  secondaryHref: "#/features",
+} as const;
+const HEROSPLIT_CONTENT = {
+  stats,
+  features,
+  people: testimonials,
+  plans: tiers,
+  proof: ui.marketing.heroSplit.proof,
+  card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.herosplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.herosplit }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-statsCards-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="statsCards"
+        >
+          <Title :as="2" size="base" weight="bold" id="herosplit-statsCards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.herosplit.statsCards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-statsCards"
+              :title="ui.marketing.heroSplit.title"
+              :lead="ui.marketing.heroSplit.lead"
+              :badge="ui.marketing.heroSplit.badge"
+              :actions="HEROSPLIT_ACTIONS"
+              :content="HEROSPLIT_CONTENT"
+              extra="stats"
+              media="picture"
+              mediaSide="end"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.statsCards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-avatars-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="avatars"
+        >
+          <Title :as="2" size="base" weight="bold" id="herosplit-avatars-label" data-testid="variant-label">
+            {{ ui.blocks.variants.herosplit.avatars }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-avatars"
+              :title="ui.marketing.heroSplit.title"
+              :lead="ui.marketing.heroSplit.lead"
+              :badge="ui.marketing.heroSplit.badge"
+              :actions="HEROSPLIT_ACTIONS"
+              :content="HEROSPLIT_CONTENT"
+              extra="avatars"
+              media="picture"
+              mediaSide="end"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.avatars))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-miniCards-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="miniCards"
+        >
+          <Title :as="2" size="base" weight="bold" id="herosplit-miniCards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.herosplit.miniCards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-miniCards"
+              :title="ui.marketing.heroSplit.title"
+              :lead="ui.marketing.heroSplit.lead"
+              :badge="ui.marketing.heroSplit.badge"
+              :actions="HEROSPLIT_ACTIONS"
+              :content="HEROSPLIT_CONTENT"
+              extra="minis"
+              media="card"
+              mediaSide="end"
+              tone="muted"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.miniCards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-quoteStats-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="quoteStats"
+        >
+          <Title :as="2" size="base" weight="bold" id="herosplit-quoteStats-label" data-testid="variant-label">
+            {{ ui.blocks.variants.herosplit.quoteStats }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-quoteStats"
+              :title="ui.marketing.heroSplit.title"
+              :lead="ui.marketing.heroSplit.lead"
+              :badge="ui.marketing.heroSplit.badge"
+              :actions="HEROSPLIT_ACTIONS"
+              :content="HEROSPLIT_CONTENT"
+              extra="quote"
+              media="card"
+              mediaSide="end"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.quoteStats))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-planCards-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="planCards"
+        >
+          <Title :as="2" size="base" weight="bold" id="herosplit-planCards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.herosplit.planCards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-planCards"
+              :title="ui.marketing.heroSplit.title"
+              :lead="ui.marketing.heroSplit.lead"
+              :badge="ui.marketing.heroSplit.badge"
+              :actions="HEROSPLIT_ACTIONS"
+              :content="HEROSPLIT_CONTENT"
+              extra="none"
+              media="plans"
+              mediaSide="start"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.planCards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-pictureGrid-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="pictureGrid"
+        >
+          <Title :as="2" size="base" weight="bold" id="herosplit-pictureGrid-label" data-testid="variant-label">
+            {{ ui.blocks.variants.herosplit.pictureGrid }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-pictureGrid"
+              :title="ui.marketing.heroSplit.title"
+              :lead="ui.marketing.heroSplit.lead"
+              :badge="ui.marketing.heroSplit.badge"
+              :actions="HEROSPLIT_ACTIONS"
+              :content="HEROSPLIT_CONTENT"
+              extra="stats"
+              media="grid"
+              mediaSide="end"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGrid))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="herosplit-pictureGridStart-label"
+          data-testid="variant"
+          data-block="herosplit"
+          data-variant="pictureGridStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="herosplit-pictureGridStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.herosplit.pictureGridStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <HeroSplit
+              id="herosplit-pictureGridStart"
+              :title="ui.marketing.heroSplit.title"
+              :lead="ui.marketing.heroSplit.lead"
+              :badge="ui.marketing.heroSplit.badge"
+              :actions="HEROSPLIT_ACTIONS"
+              :content="HEROSPLIT_CONTENT"
+              extra="avatars"
+              media="grid"
+              mediaSide="start"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGridStart))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/IconwallPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/IconwallPage.vue
new file mode 100644
index 0000000..35c14bf
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/IconwallPage.vue
@@ -0,0 +1,182 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The iconwall page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  IconWall,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.iconwall }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.iconwall }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-tiles4-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="tiles4"
+        >
+          <Title :as="2" size="base" weight="bold" id="iconwall-tiles4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.iconwall.tiles4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-tiles4"
+              :title="ui.vibe.wall.title"
+              :features="features"
+              :empty="ui.empty.features"
+              cols="4"
+              item="tile"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-tiles3-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="tiles3"
+        >
+          <Title :as="2" size="base" weight="bold" id="iconwall-tiles3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.iconwall.tiles3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-tiles3"
+              :title="ui.vibe.wall.title"
+              :features="features"
+              :empty="ui.empty.features"
+              cols="3"
+              item="tile"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-chips6-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="chips6"
+        >
+          <Title :as="2" size="base" weight="bold" id="iconwall-chips6-label" data-testid="variant-label">
+            {{ ui.blocks.variants.iconwall.chips6 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-chips6"
+              :title="ui.vibe.wall.title"
+              :features="features"
+              :empty="ui.empty.features"
+              cols="6"
+              item="chip"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-chips4-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="chips4"
+        >
+          <Title :as="2" size="base" weight="bold" id="iconwall-chips4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.iconwall.chips4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-chips4"
+              :title="ui.vibe.wall.title"
+              :features="features"
+              :empty="ui.empty.features"
+              cols="4"
+              item="chip"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="iconwall-muted-label"
+          data-testid="variant"
+          data-block="iconwall"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="iconwall-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.iconwall.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <IconWall
+              id="iconwall-muted"
+              :title="ui.vibe.wall.title"
+              :features="features"
+              :empty="ui.empty.features"
+              cols="4"
+              item="tile"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/IndexPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/IndexPage.vue
new file mode 100644
index 0000000..8cab09f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/IndexPage.vue
@@ -0,0 +1,221 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The index page of BlocksScreen. -->
+<script setup lang="ts">
+import { Block, Container, Link, List, ListItem, Stack, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const TOPICS = [
+  {
+    id: "marketing",
+    titleId: "theme-marketing-title",
+    title: ui.blocks.themes.marketing.title,
+    text: ui.blocks.themes.marketing.text,
+    blocks: [
+      { key: "about", href: "#/about", name: ui.blocks.names.about, docs: ui.blocks.docs.about },
+      { key: "aboutme", href: "#/aboutme", name: ui.blocks.names.aboutme, docs: ui.blocks.docs.aboutme },
+      { key: "accordion", href: "#/accordion", name: ui.blocks.names.accordion, docs: ui.blocks.docs.accordion },
+      { key: "beforeafter", href: "#/beforeafter", name: ui.blocks.names.beforeafter, docs: ui.blocks.docs.beforeafter },
+      { key: "bento", href: "#/bento", name: ui.blocks.names.bento, docs: ui.blocks.docs.bento },
+      { key: "compare", href: "#/compare", name: ui.blocks.names.compare, docs: ui.blocks.docs.compare },
+      { key: "credits", href: "#/credits", name: ui.blocks.names.credits, docs: ui.blocks.docs.credits },
+      { key: "cta", href: "#/cta", name: ui.blocks.names.cta, docs: ui.blocks.docs.cta },
+      { key: "ctaproof", href: "#/ctaproof", name: ui.blocks.names.ctaproof, docs: ui.blocks.docs.ctaproof },
+      { key: "faq", href: "#/faq", name: ui.blocks.names.faq, docs: ui.blocks.docs.faq },
+      { key: "faqsplit", href: "#/faqsplit", name: ui.blocks.names.faqsplit, docs: ui.blocks.docs.faqsplit },
+      { key: "features", href: "#/features", name: ui.blocks.names.features, docs: ui.blocks.docs.features },
+      { key: "featureshowcase", href: "#/featureshowcase", name: ui.blocks.names.featureshowcase, docs: ui.blocks.docs.featureshowcase },
+      { key: "featuresplit", href: "#/featuresplit", name: ui.blocks.names.featuresplit, docs: ui.blocks.docs.featuresplit },
+      { key: "featuretabs", href: "#/featuretabs", name: ui.blocks.names.featuretabs, docs: ui.blocks.docs.featuretabs },
+      { key: "footer", href: "#/footer", name: ui.blocks.names.footer, docs: ui.blocks.docs.footer },
+      { key: "footersplit", href: "#/footersplit", name: ui.blocks.names.footersplit, docs: ui.blocks.docs.footersplit },
+      { key: "header", href: "#/header", name: ui.blocks.names.header, docs: ui.blocks.docs.header },
+      { key: "hero", href: "#/hero", name: ui.blocks.names.hero, docs: ui.blocks.docs.hero },
+      { key: "herosplit", href: "#/herosplit", name: ui.blocks.names.herosplit, docs: ui.blocks.docs.herosplit },
+      { key: "iconwall", href: "#/iconwall", name: ui.blocks.names.iconwall, docs: ui.blocks.docs.iconwall },
+      { key: "jobs", href: "#/jobs", name: ui.blocks.names.jobs, docs: ui.blocks.docs.jobs },
+      { key: "logos", href: "#/logos", name: ui.blocks.names.logos, docs: ui.blocks.docs.logos },
+      { key: "medialist", href: "#/medialist", name: ui.blocks.names.medialist, docs: ui.blocks.docs.medialist },
+      { key: "megamenu", href: "#/megamenu", name: ui.blocks.names.megamenu, docs: ui.blocks.docs.megamenu },
+      { key: "navbar", href: "#/navbar", name: ui.blocks.names.navbar, docs: ui.blocks.docs.navbar },
+      { key: "pagehead", href: "#/pagehead", name: ui.blocks.names.pagehead, docs: ui.blocks.docs.pagehead },
+      { key: "pagetrail", href: "#/pagetrail", name: ui.blocks.names.pagetrail, docs: ui.blocks.docs.pagetrail },
+      { key: "photos", href: "#/photos", name: ui.blocks.names.photos, docs: ui.blocks.docs.photos },
+      { key: "plan", href: "#/plan", name: ui.blocks.names.plan, docs: ui.blocks.docs.plan },
+      { key: "pricing", href: "#/pricing", name: ui.blocks.names.pricing, docs: ui.blocks.docs.pricing },
+      { key: "projects", href: "#/projects", name: ui.blocks.names.projects, docs: ui.blocks.docs.projects },
+      { key: "proof", href: "#/proof", name: ui.blocks.names.proof, docs: ui.blocks.docs.proof },
+      { key: "quotesplit", href: "#/quotesplit", name: ui.blocks.names.quotesplit, docs: ui.blocks.docs.quotesplit },
+      { key: "sitemap", href: "#/sitemap", name: ui.blocks.names.sitemap, docs: ui.blocks.docs.sitemap },
+      { key: "stats", href: "#/stats", name: ui.blocks.names.stats, docs: ui.blocks.docs.stats },
+      { key: "steps", href: "#/steps", name: ui.blocks.names.steps, docs: ui.blocks.docs.steps },
+      { key: "sticky", href: "#/sticky", name: ui.blocks.names.sticky, docs: ui.blocks.docs.sticky },
+      { key: "team", href: "#/team", name: ui.blocks.names.team, docs: ui.blocks.docs.team },
+      { key: "templates", href: "#/templates", name: ui.blocks.names.templates, docs: ui.blocks.docs.templates },
+      { key: "testimonials", href: "#/testimonials", name: ui.blocks.names.testimonials, docs: ui.blocks.docs.testimonials },
+      { key: "usage", href: "#/usage", name: ui.blocks.names.usage, docs: ui.blocks.docs.usage },
+      { key: "videos", href: "#/videos", name: ui.blocks.names.videos, docs: ui.blocks.docs.videos },
+    ],
+  },
+  {
+    id: "commerce",
+    titleId: "theme-commerce-title",
+    title: ui.blocks.themes.commerce.title,
+    text: ui.blocks.themes.commerce.text,
+    blocks: [
+      { key: "cart", href: "#/cart", name: ui.blocks.names.cart, docs: ui.blocks.docs.cart },
+      { key: "cartdrawer", href: "#/cartdrawer", name: ui.blocks.names.cartdrawer, docs: ui.blocks.docs.cartdrawer },
+      { key: "cartpage", href: "#/cartpage", name: ui.blocks.names.cartpage, docs: ui.blocks.docs.cartpage },
+      { key: "categories", href: "#/categories", name: ui.blocks.names.categories, docs: ui.blocks.docs.categories },
+      { key: "checkout", href: "#/checkout", name: ui.blocks.names.checkout, docs: ui.blocks.docs.checkout },
+      { key: "delivery", href: "#/delivery", name: ui.blocks.names.delivery, docs: ui.blocks.docs.delivery },
+      { key: "locations", href: "#/locations", name: ui.blocks.names.locations, docs: ui.blocks.docs.locations },
+      { key: "orders", href: "#/orders", name: ui.blocks.names.orders, docs: ui.blocks.docs.orders },
+      { key: "product", href: "#/product", name: ui.blocks.names.product, docs: ui.blocks.docs.product },
+      { key: "productinfo", href: "#/productinfo", name: ui.blocks.names.productinfo, docs: ui.blocks.docs.productinfo },
+      { key: "products", href: "#/products", name: ui.blocks.names.products, docs: ui.blocks.docs.products },
+      { key: "reviews", href: "#/reviews", name: ui.blocks.names.reviews, docs: ui.blocks.docs.reviews },
+      { key: "slots", href: "#/slots", name: ui.blocks.names.slots, docs: ui.blocks.docs.slots },
+      { key: "storehero", href: "#/storehero", name: ui.blocks.names.storehero, docs: ui.blocks.docs.storehero },
+      { key: "summary", href: "#/summary", name: ui.blocks.names.summary, docs: ui.blocks.docs.summary },
+      { key: "usp", href: "#/usp", name: ui.blocks.names.usp, docs: ui.blocks.docs.usp },
+      { key: "zones", href: "#/zones", name: ui.blocks.names.zones, docs: ui.blocks.docs.zones },
+    ],
+  },
+  {
+    id: "promo",
+    titleId: "theme-promo-title",
+    title: ui.blocks.themes.promo.title,
+    text: ui.blocks.themes.promo.text,
+    blocks: [
+      { key: "announcement", href: "#/announcement", name: ui.blocks.names.announcement, docs: ui.blocks.docs.announcement },
+      { key: "cookie", href: "#/cookie", name: ui.blocks.names.cookie, docs: ui.blocks.docs.cookie },
+      { key: "newsletter", href: "#/newsletter", name: ui.blocks.names.newsletter, docs: ui.blocks.docs.newsletter },
+    ],
+  },
+  {
+    id: "content",
+    titleId: "theme-content-title",
+    title: ui.blocks.themes.content.title,
+    text: ui.blocks.themes.content.text,
+    blocks: [
+      { key: "article", href: "#/article", name: ui.blocks.names.article, docs: ui.blocks.docs.article },
+      { key: "postheader", href: "#/postheader", name: ui.blocks.names.postheader, docs: ui.blocks.docs.postheader },
+      { key: "posts", href: "#/posts", name: ui.blocks.names.posts, docs: ui.blocks.docs.posts },
+      { key: "postshowcase", href: "#/postshowcase", name: ui.blocks.names.postshowcase, docs: ui.blocks.docs.postshowcase },
+      { key: "postsplit", href: "#/postsplit", name: ui.blocks.names.postsplit, docs: ui.blocks.docs.postsplit },
+      { key: "storytabs", href: "#/storytabs", name: ui.blocks.names.storytabs, docs: ui.blocks.docs.storytabs },
+      { key: "timeline", href: "#/timeline", name: ui.blocks.names.timeline, docs: ui.blocks.docs.timeline },
+    ],
+  },
+  {
+    id: "account",
+    titleId: "theme-account-title",
+    title: ui.blocks.themes.account.title,
+    text: ui.blocks.themes.account.text,
+    blocks: [
+      { key: "auth", href: "#/auth", name: ui.blocks.names.auth, docs: ui.blocks.docs.auth },
+      { key: "authpage", href: "#/authpage", name: ui.blocks.names.authpage, docs: ui.blocks.docs.authpage },
+      { key: "profile", href: "#/profile", name: ui.blocks.names.profile, docs: ui.blocks.docs.profile },
+      { key: "wizard", href: "#/wizard", name: ui.blocks.names.wizard, docs: ui.blocks.docs.wizard },
+    ],
+  },
+  {
+    id: "dashboard",
+    titleId: "theme-dashboard-title",
+    title: ui.blocks.themes.dashboard.title,
+    text: ui.blocks.themes.dashboard.text,
+    blocks: [
+      { key: "activity", href: "#/activity", name: ui.blocks.names.activity, docs: ui.blocks.docs.activity },
+      { key: "bottomnav", href: "#/bottomnav", name: ui.blocks.names.bottomnav, docs: ui.blocks.docs.bottomnav },
+      { key: "chart", href: "#/chart", name: ui.blocks.names.chart, docs: ui.blocks.docs.chart },
+      { key: "dashshell", href: "#/dashshell", name: ui.blocks.names.dashshell, docs: ui.blocks.docs.dashshell },
+      { key: "empty", href: "#/empty", name: ui.blocks.names.empty, docs: ui.blocks.docs.empty },
+      { key: "kanban", href: "#/kanban", name: ui.blocks.names.kanban, docs: ui.blocks.docs.kanban },
+      { key: "metrics", href: "#/metrics", name: ui.blocks.names.metrics, docs: ui.blocks.docs.metrics },
+      { key: "overview", href: "#/overview", name: ui.blocks.names.overview, docs: ui.blocks.docs.overview },
+      { key: "shell", href: "#/shell", name: ui.blocks.names.shell, docs: ui.blocks.docs.shell },
+      { key: "sidenav", href: "#/sidenav", name: ui.blocks.names.sidenav, docs: ui.blocks.docs.sidenav },
+      { key: "skeleton", href: "#/skeleton", name: ui.blocks.names.skeleton, docs: ui.blocks.docs.skeleton },
+    ],
+  },
+  {
+    id: "onboarding",
+    titleId: "theme-onboarding-title",
+    title: ui.blocks.themes.onboarding.title,
+    text: ui.blocks.themes.onboarding.text,
+    blocks: [
+      { key: "checklist", href: "#/checklist", name: ui.blocks.names.checklist, docs: ui.blocks.docs.checklist },
+      { key: "stepper", href: "#/stepper", name: ui.blocks.names.stepper, docs: ui.blocks.docs.stepper },
+      { key: "tour", href: "#/tour", name: ui.blocks.names.tour, docs: ui.blocks.docs.tour },
+      { key: "videomodal", href: "#/videomodal", name: ui.blocks.names.videomodal, docs: ui.blocks.docs.videomodal },
+    ],
+  },
+  {
+    id: "support",
+    titleId: "theme-support-title",
+    title: ui.blocks.themes.support.title,
+    text: ui.blocks.themes.support.text,
+    blocks: [
+      { key: "channels", href: "#/channels", name: ui.blocks.names.channels, docs: ui.blocks.docs.channels },
+      { key: "contact", href: "#/contact", name: ui.blocks.names.contact, docs: ui.blocks.docs.contact },
+      { key: "errorpage", href: "#/errorpage", name: ui.blocks.names.errorpage, docs: ui.blocks.docs.errorpage },
+    ],
+  },
+] as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Stack gap="4" align="stretch">
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="gallery-title">
+            {{ ui.blocks.title }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.intro }}
+          </Text>
+        </Stack>
+        <Stack v-for="topic in TOPICS" :key="topic.id"
+          gap="4"
+          align="stretch"
+          role="group"
+          :aria-labelledby="topic.titleId"
+          data-testid="theme-section"
+          :data-theme-id="topic.id"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" :id="topic.titleId">
+              {{ topic.title }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ topic.text }}
+            </Text>
+          </Stack>
+          <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="block-list">
+            <ListItem
+              v-for="block in topic.blocks"
+              :key="block.key"
+              class="flex flex-col gap-1 rounded-xl p-4 inset-ring inset-ring-border"
+            >
+              <Link
+                :href="block.href"
+                variant="default"
+                class="font-bold"
+                data-testid="block-link"
+                :data-block="block.key"
+                :data-theme-id="topic.id"
+              >
+                {{ block.name }}
+              </Link>
+              <Text size="sm" class="text-muted-foreground">
+                {{ block.docs }}
+              </Text>
+            </ListItem>
+          </List>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/JobsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/JobsPage.vue
new file mode 100644
index 0000000..aff936a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/JobsPage.vue
@@ -0,0 +1,176 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The jobs page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  JobBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Department,
+  type Job,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.jobs }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.jobs }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="jobs-grid-label"
+          data-testid="variant"
+          data-block="jobs"
+          data-variant="grid"
+        >
+          <Title :as="2" size="base" weight="bold" id="jobs-grid-label" data-testid="variant-label">
+            {{ ui.blocks.variants.jobs.grid }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <JobBoard
+              id="jobs-grid"
+              :title="ui.company.jobs.title"
+              :lead="ui.company.jobs.lead"
+              :jobs="jobs"
+              :empty="ui.empty.jobs"
+              :departments="departments"
+              :labels="ui.company.jobs"
+              layout="grid"
+              salary="hide"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grid))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="jobs-salary-label"
+          data-testid="variant"
+          data-block="jobs"
+          data-variant="salary"
+        >
+          <Title :as="2" size="base" weight="bold" id="jobs-salary-label" data-testid="variant-label">
+            {{ ui.blocks.variants.jobs.salary }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <JobBoard
+              id="jobs-salary"
+              :title="ui.company.jobs.title"
+              :lead="ui.company.jobs.lead"
+              :jobs="jobs"
+              :empty="ui.empty.jobs"
+              :departments="departments"
+              :labels="ui.company.jobs"
+              layout="grid"
+              salary="show"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.salary))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="jobs-grouped-label"
+          data-testid="variant"
+          data-block="jobs"
+          data-variant="grouped"
+        >
+          <Title :as="2" size="base" weight="bold" id="jobs-grouped-label" data-testid="variant-label">
+            {{ ui.blocks.variants.jobs.grouped }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <JobBoard
+              id="jobs-grouped"
+              :title="ui.company.jobs.title"
+              :lead="ui.company.jobs.lead"
+              :jobs="jobs"
+              :empty="ui.empty.jobs"
+              :departments="departments"
+              :labels="ui.company.jobs"
+              layout="grouped"
+              salary="hide"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="jobs-table-label"
+          data-testid="variant"
+          data-block="jobs"
+          data-variant="table"
+        >
+          <Title :as="2" size="base" weight="bold" id="jobs-table-label" data-testid="variant-label">
+            {{ ui.blocks.variants.jobs.table }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <JobBoard
+              id="jobs-table"
+              :title="ui.company.jobs.title"
+              :lead="ui.company.jobs.lead"
+              :jobs="jobs"
+              :empty="ui.empty.jobs"
+              :departments="departments"
+              :labels="ui.company.jobs"
+              layout="table"
+              salary="show"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.table))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/KanbanPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/KanbanPage.vue
new file mode 100644
index 0000000..3c3179e
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/KanbanPage.vue
@@ -0,0 +1,168 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The kanban page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  KanbanBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type BoardCard,
+  type Lane,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.kanban }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.kanban }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="kanban-detail-label"
+          data-testid="variant"
+          data-block="kanban"
+          data-variant="detail"
+        >
+          <Title :as="2" size="base" weight="bold" id="kanban-detail-label" data-testid="variant-label">
+            {{ ui.blocks.variants.kanban.detail }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <KanbanBoard
+              id="kanban-detail"
+              :title="ui.vibe.kanban.title"
+              :lanes="lanes"
+              :empty="ui.empty.lanes"
+              :cards="cards"
+              :countLabel="ui.vibe.kanban.count"
+              card="detail"
+              cols="3"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="kanban-simple-label"
+          data-testid="variant"
+          data-block="kanban"
+          data-variant="simple"
+        >
+          <Title :as="2" size="base" weight="bold" id="kanban-simple-label" data-testid="variant-label">
+            {{ ui.blocks.variants.kanban.simple }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <KanbanBoard
+              id="kanban-simple"
+              :title="ui.vibe.kanban.title"
+              :lanes="lanes"
+              :empty="ui.empty.lanes"
+              :cards="cards"
+              :countLabel="ui.vibe.kanban.count"
+              card="simple"
+              cols="3"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.simple))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="kanban-twoCols-label"
+          data-testid="variant"
+          data-block="kanban"
+          data-variant="twoCols"
+        >
+          <Title :as="2" size="base" weight="bold" id="kanban-twoCols-label" data-testid="variant-label">
+            {{ ui.blocks.variants.kanban.twoCols }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <KanbanBoard
+              id="kanban-twoCols"
+              :title="ui.vibe.kanban.title"
+              :lanes="lanes"
+              :empty="ui.empty.lanes"
+              :cards="cards"
+              :countLabel="ui.vibe.kanban.count"
+              card="detail"
+              cols="2"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="kanban-muted-label"
+          data-testid="variant"
+          data-block="kanban"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="kanban-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.kanban.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <KanbanBoard
+              id="kanban-muted"
+              :title="ui.vibe.kanban.title"
+              :lanes="lanes"
+              :empty="ui.empty.lanes"
+              :cards="cards"
+              :countLabel="ui.vibe.kanban.count"
+              card="detail"
+              cols="3"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/LocationsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/LocationsPage.vue
new file mode 100644
index 0000000..762e2f1
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/LocationsPage.vue
@@ -0,0 +1,142 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The locations page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoreLocations,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Store,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.locations }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.locations }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="locations-cards-label"
+          data-testid="variant"
+          data-block="locations"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="locations-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.locations.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreLocations
+              id="locations-cards"
+              :title="ui.commerce.stores.title"
+              :lead="ui.commerce.stores.lead"
+              :stores="stores"
+              :empty="ui.empty.stores"
+              :kinds="ui.commerce.stores.kinds"
+              :labels="ui.commerce.stores"
+              layout="cards"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="locations-list-label"
+          data-testid="variant"
+          data-block="locations"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="locations-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.locations.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreLocations
+              id="locations-list"
+              :title="ui.commerce.stores.title"
+              :lead="ui.commerce.stores.lead"
+              :stores="stores"
+              :empty="ui.empty.stores"
+              :kinds="ui.commerce.stores.kinds"
+              :labels="ui.commerce.stores"
+              layout="list"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="locations-map-label"
+          data-testid="variant"
+          data-block="locations"
+          data-variant="map"
+        >
+          <Title :as="2" size="base" weight="bold" id="locations-map-label" data-testid="variant-label">
+            {{ ui.blocks.variants.locations.map }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreLocations
+              id="locations-map"
+              :title="ui.commerce.stores.title"
+              :lead="ui.commerce.stores.lead"
+              :stores="stores"
+              :empty="ui.empty.stores"
+              :kinds="ui.commerce.stores.kinds"
+              :labels="ui.commerce.stores"
+              layout="map"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.map))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/LogosPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/LogosPage.vue
new file mode 100644
index 0000000..9a20122
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/LogosPage.vue
@@ -0,0 +1,214 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The logos page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  LogoCloud,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.logos }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.logos }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-grid4-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="grid4"
+        >
+          <Title :as="2" size="base" weight="bold" id="logos-grid4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.logos.grid4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-grid4"
+              :title="ui.marketing.logos.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              layout="grid"
+              cols="4"
+              item="name"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-grid3-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="grid3"
+        >
+          <Title :as="2" size="base" weight="bold" id="logos-grid3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.logos.grid3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-grid3"
+              :title="ui.marketing.logos.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              layout="grid"
+              cols="3"
+              item="tile"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-row-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="row"
+        >
+          <Title :as="2" size="base" weight="bold" id="logos-row-label" data-testid="variant-label">
+            {{ ui.blocks.variants.logos.row }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-row"
+              :title="ui.marketing.logos.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              layout="row"
+              cols="4"
+              item="icon"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-icons-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="icons"
+        >
+          <Title :as="2" size="base" weight="bold" id="logos-icons-label" data-testid="variant-label">
+            {{ ui.blocks.variants.logos.icons }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-icons"
+              :title="ui.marketing.logos.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              layout="grid"
+              cols="4"
+              item="icon"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.icons))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-grid2-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="grid2"
+        >
+          <Title :as="2" size="base" weight="bold" id="logos-grid2-label" data-testid="variant-label">
+            {{ ui.blocks.variants.logos.grid2 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-grid2"
+              :title="ui.marketing.logos.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              layout="grid"
+              cols="2"
+              item="name"
+              tone="default"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid2))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="logos-tiles4-label"
+          data-testid="variant"
+          data-block="logos"
+          data-variant="tiles4"
+        >
+          <Title :as="2" size="base" weight="bold" id="logos-tiles4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.logos.tiles4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <LogoCloud
+              id="logos-tiles4"
+              :title="ui.marketing.logos.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              layout="grid"
+              cols="4"
+              item="tile"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/MedialistPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/MedialistPage.vue
new file mode 100644
index 0000000..f773954
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/MedialistPage.vue
@@ -0,0 +1,279 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The medialist page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MediaList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Feature,
+  type Post,
+  type Review,
+  type Stat,
+  type Step,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+const MEDIALIST_LABELS = {
+  count: ui.marketing.mediaList.count,
+  minutes: ui.content.labels.minutes,
+  featured: ui.marketing.mediaList.featured,
+  rating: ui.testimonials.rating,
+  figures: ui.marketing.mediaList.supportFigures,
+} as const;
+const MEDIALIST_EXTRAS = { stats, steps, posts, topics: categories, channels, reviews } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.medialist }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.medialist }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-figuresStart-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="figuresStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="medialist-figuresStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.medialist.figuresStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-figuresStart"
+              :title="ui.marketing.mediaList.figures.title"
+              :lead="ui.marketing.mediaList.figures.lead"
+              :badge="ui.marketing.mediaList.figures.badge"
+              :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.figures.list }"
+              :actions="{ mode: 'one', cta: ui.marketing.mediaList.figures.cta, href: '#/start' }"
+              :extras="MEDIALIST_EXTRAS"
+              layout="figures"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.figuresStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-proofReview-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="proofReview"
+        >
+          <Title :as="2" size="base" weight="bold" id="medialist-proofReview-label" data-testid="variant-label">
+            {{ ui.blocks.variants.medialist.proofReview }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-proofReview"
+              :title="ui.marketing.mediaList.proof.title"
+              :lead="ui.marketing.mediaList.proof.lead"
+              :badge="ui.marketing.mediaList.proof.badge"
+              :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.proof.list }"
+              :actions="{
+                mode: 'two',
+                cta: ui.marketing.mediaList.proof.cta,
+                href: '#/start',
+                secondary: ui.marketing.mediaList.proof.secondary,
+                secondaryHref: '#/more',
+              }"
+              :extras="MEDIALIST_EXTRAS"
+              layout="proof"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.proofReview))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-stepsRows-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="stepsRows"
+        >
+          <Title :as="2" size="base" weight="bold" id="medialist-stepsRows-label" data-testid="variant-label">
+            {{ ui.blocks.variants.medialist.stepsRows }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-stepsRows"
+              :title="ui.marketing.mediaList.steps.title"
+              :lead="ui.marketing.mediaList.steps.lead"
+              :badge="ui.marketing.mediaList.steps.badge"
+              :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.steps.list }"
+              :actions="{ mode: 'one', cta: ui.marketing.mediaList.steps.cta, href: '#/start' }"
+              :extras="MEDIALIST_EXTRAS"
+              layout="steps"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.stepsRows))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-latestPosts-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="latestPosts"
+        >
+          <Title :as="2" size="base" weight="bold" id="medialist-latestPosts-label" data-testid="variant-label">
+            {{ ui.blocks.variants.medialist.latestPosts }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-latestPosts"
+              :title="ui.marketing.mediaList.posts.title"
+              :lead="ui.marketing.mediaList.posts.lead"
+              :badge="ui.marketing.mediaList.posts.badge"
+              :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.posts.list }"
+              :actions="{ mode: 'one', cta: ui.marketing.mediaList.posts.cta, href: '#/start' }"
+              :extras="MEDIALIST_EXTRAS"
+              layout="posts"
+              mediaSide="end"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.latestPosts))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-topicRows-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="topicRows"
+        >
+          <Title :as="2" size="base" weight="bold" id="medialist-topicRows-label" data-testid="variant-label">
+            {{ ui.blocks.variants.medialist.topicRows }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-topicRows"
+              :title="ui.marketing.mediaList.topics.title"
+              :lead="ui.marketing.mediaList.topics.lead"
+              :badge="ui.marketing.mediaList.topics.badge"
+              :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.topics.list }"
+              :actions="{ mode: 'one', cta: ui.marketing.mediaList.topics.cta, href: '#/start' }"
+              :extras="MEDIALIST_EXTRAS"
+              layout="topics"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="medialist-contactStart-label"
+          data-testid="variant"
+          data-block="medialist"
+          data-variant="contactStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="medialist-contactStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.medialist.contactStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MediaList
+              id="medialist-contactStart"
+              :title="ui.marketing.mediaList.contact.title"
+              :lead="ui.marketing.mediaList.contact.lead"
+              :badge="ui.marketing.mediaList.contact.badge"
+              :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.contact.list }"
+              :actions="{ mode: 'one', cta: ui.marketing.mediaList.contact.cta, href: '#/start' }"
+              :extras="MEDIALIST_EXTRAS"
+              layout="contact"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.contactStart))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/MegamenuPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/MegamenuPage.vue
new file mode 100644
index 0000000..98381d7
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/MegamenuPage.vue
@@ -0,0 +1,168 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The megamenu page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MegaMenu,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+  type NavLink,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.megamenu }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.megamenu }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="megamenu-open-label"
+          data-testid="variant"
+          data-block="megamenu"
+          data-variant="open"
+        >
+          <Title :as="2" size="base" weight="bold" id="megamenu-open-label" data-testid="variant-label">
+            {{ ui.blocks.variants.megamenu.open }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MegaMenu
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :trigger="ui.vibe.mega.trigger"
+              :links="navlinks"
+              :groups="megagroups"
+              :promoTitle="ui.vibe.mega.promoTitle"
+              :promoText="ui.vibe.mega.promoText"
+              panel="open"
+              cols="3"
+              promo="none"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="megamenu-closed-label"
+          data-testid="variant"
+          data-block="megamenu"
+          data-variant="closed"
+        >
+          <Title :as="2" size="base" weight="bold" id="megamenu-closed-label" data-testid="variant-label">
+            {{ ui.blocks.variants.megamenu.closed }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MegaMenu
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :trigger="ui.vibe.mega.trigger"
+              :links="navlinks"
+              :groups="megagroups"
+              :promoTitle="ui.vibe.mega.promoTitle"
+              :promoText="ui.vibe.mega.promoText"
+              panel="closed"
+              cols="3"
+              promo="none"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.closed))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="megamenu-twoCols-label"
+          data-testid="variant"
+          data-block="megamenu"
+          data-variant="twoCols"
+        >
+          <Title :as="2" size="base" weight="bold" id="megamenu-twoCols-label" data-testid="variant-label">
+            {{ ui.blocks.variants.megamenu.twoCols }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MegaMenu
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :trigger="ui.vibe.mega.trigger"
+              :links="navlinks"
+              :groups="megagroups"
+              :promoTitle="ui.vibe.mega.promoTitle"
+              :promoText="ui.vibe.mega.promoText"
+              panel="open"
+              cols="2"
+              promo="none"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="megamenu-promo-label"
+          data-testid="variant"
+          data-block="megamenu"
+          data-variant="promo"
+        >
+          <Title :as="2" size="base" weight="bold" id="megamenu-promo-label" data-testid="variant-label">
+            {{ ui.blocks.variants.megamenu.promo }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MegaMenu
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :trigger="ui.vibe.mega.trigger"
+              :links="navlinks"
+              :groups="megagroups"
+              :promoTitle="ui.vibe.mega.promoTitle"
+              :promoText="ui.vibe.mega.promoText"
+              panel="open"
+              cols="3"
+              promo="card"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.promo))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/MetricsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/MetricsPage.vue
new file mode 100644
index 0000000..ef410f4
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/MetricsPage.vue
@@ -0,0 +1,162 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The metrics page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MetricRow,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.metrics }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.metrics }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="metrics-tiles-label"
+          data-testid="variant"
+          data-block="metrics"
+          data-variant="tiles"
+        >
+          <Title :as="2" size="base" weight="bold" id="metrics-tiles-label" data-testid="variant-label">
+            {{ ui.blocks.variants.metrics.tiles }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MetricRow
+              id="metrics-tiles"
+              :title="ui.dashboard.metrics.title"
+              :metrics="metrics"
+              :empty="ui.empty.metrics"
+              cols="4"
+              item="tile"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="metrics-twoUp-label"
+          data-testid="variant"
+          data-block="metrics"
+          data-variant="twoUp"
+        >
+          <Title :as="2" size="base" weight="bold" id="metrics-twoUp-label" data-testid="variant-label">
+            {{ ui.blocks.variants.metrics.twoUp }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MetricRow
+              id="metrics-twoUp"
+              :title="ui.dashboard.metrics.title"
+              :metrics="metrics"
+              :empty="ui.empty.metrics"
+              cols="2"
+              item="tile"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.twoUp))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="metrics-compact-label"
+          data-testid="variant"
+          data-block="metrics"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="metrics-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.metrics.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MetricRow
+              id="metrics-compact"
+              :title="ui.dashboard.metrics.title"
+              :metrics="metrics"
+              :empty="ui.empty.metrics"
+              cols="4"
+              item="compact"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="metrics-muted-label"
+          data-testid="variant"
+          data-block="metrics"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="metrics-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.metrics.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MetricRow
+              id="metrics-muted"
+              :title="ui.dashboard.metrics.title"
+              :metrics="metrics"
+              :empty="ui.empty.metrics"
+              cols="2"
+              item="compact"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/NavbarPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/NavbarPage.vue
new file mode 100644
index 0000000..f98b1c6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/NavbarPage.vue
@@ -0,0 +1,224 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The navbar page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  NavBar,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+const NAVBAR_ACTIONS = { cta: ui.site.header.cta, href: "#/", login: ui.site.header.login, loginHref: "#/login" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.navbar }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.navbar }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-inline-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="inline"
+        >
+          <Title :as="2" size="base" weight="bold" id="navbar-inline-label" data-testid="variant-label">
+            {{ ui.blocks.variants.navbar.inline }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :links="navlinks"
+              current="link-product"
+              :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              layout="inline"
+              over="none"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inline))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-split-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="navbar-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.navbar.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :links="navlinks"
+              current="link-product"
+              :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              layout="split"
+              over="none"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-search-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="search"
+        >
+          <Title :as="2" size="base" weight="bold" id="navbar-search-label" data-testid="variant-label">
+            {{ ui.blocks.variants.navbar.search }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :links="navlinks"
+              current="link-product"
+              :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              layout="search"
+              over="none"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-media-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="media"
+        >
+          <Title :as="2" size="base" weight="bold" id="navbar-media-label" data-testid="variant-label">
+            {{ ui.blocks.variants.navbar.media }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :links="navlinks"
+              current="link-product"
+              :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              layout="inline"
+              over="media"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-plain-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="navbar-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.navbar.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :links="navlinks"
+              current="link-product"
+              :actions="{ ...NAVBAR_ACTIONS, mode: 'none' }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              layout="inline"
+              over="none"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.plain))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="navbar-inverse-label"
+          data-testid="variant"
+          data-block="navbar"
+          data-variant="inverse"
+        >
+          <Title :as="2" size="base" weight="bold" id="navbar-inverse-label" data-testid="variant-label">
+            {{ ui.blocks.variants.navbar.inverse }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NavBar
+              :label="ui.vibe.nav.label"
+              :brand="ui.site.header.brand"
+              :links="navlinks"
+              current="link-product"
+              :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              layout="inline"
+              over="none"
+              tone="inverse"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inverse))"
+              @theme="() => actions.toggleTheme()"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/NewsletterPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/NewsletterPage.vue
new file mode 100644
index 0000000..bdfa2df
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/NewsletterPage.vue
@@ -0,0 +1,185 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The newsletter page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  NewsletterForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="promo">
+            {{ ui.blocks.themes.promo.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.newsletter }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.newsletter }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-inline-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="inline"
+        >
+          <Title :as="2" size="base" weight="bold" id="newsletter-inline-label" data-testid="variant-label">
+            {{ ui.blocks.variants.newsletter.inline }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-inline"
+              :title="ui.promo.newsletter.title"
+              :text="ui.promo.newsletter.text"
+              :label="ui.promo.newsletter.label"
+              :submit="ui.promo.newsletter.submit"
+              :consent="ui.promo.newsletter.consent"
+              layout="inline"
+              terms="hide"
+              tone="default"
+              align="center"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-stacked-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="newsletter-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.newsletter.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-stacked"
+              :title="ui.promo.newsletter.title"
+              :text="ui.promo.newsletter.text"
+              :label="ui.promo.newsletter.label"
+              :submit="ui.promo.newsletter.submit"
+              :consent="ui.promo.newsletter.consent"
+              layout="stacked"
+              terms="hide"
+              tone="default"
+              align="center"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-split-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="newsletter-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.newsletter.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-split"
+              :title="ui.promo.newsletter.title"
+              :text="ui.promo.newsletter.text"
+              :label="ui.promo.newsletter.label"
+              :submit="ui.promo.newsletter.submit"
+              :consent="ui.promo.newsletter.consent"
+              layout="split"
+              terms="hide"
+              tone="default"
+              align="start"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-consent-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="consent"
+        >
+          <Title :as="2" size="base" weight="bold" id="newsletter-consent-label" data-testid="variant-label">
+            {{ ui.blocks.variants.newsletter.consent }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-consent"
+              :title="ui.promo.newsletter.title"
+              :text="ui.promo.newsletter.text"
+              :label="ui.promo.newsletter.label"
+              :submit="ui.promo.newsletter.submit"
+              :consent="ui.promo.newsletter.consent"
+              layout="inline"
+              terms="show"
+              tone="default"
+              align="center"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="newsletter-muted-label"
+          data-testid="variant"
+          data-block="newsletter"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="newsletter-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.newsletter.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <NewsletterForm
+              id="newsletter-muted"
+              :title="ui.promo.newsletter.title"
+              :text="ui.promo.newsletter.text"
+              :label="ui.promo.newsletter.label"
+              :submit="ui.promo.newsletter.submit"
+              :consent="ui.promo.newsletter.consent"
+              layout="inline"
+              terms="show"
+              tone="muted"
+              align="start"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/NotfoundPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/NotfoundPage.vue
new file mode 100644
index 0000000..88432d8
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/NotfoundPage.vue
@@ -0,0 +1,25 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The notfound page of BlocksScreen. -->
+<script setup lang="ts">
+import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="4" align="stretch">
+        <Title :as="1" size="4xl" weight="bold" id="page-title">
+          {{ ui.site.notFound.title }}
+        </Title>
+        <Group>
+          <Button variant="default" size="default" href="#/">
+            {{ ui.blocks.back }}
+          </Button>
+        </Group>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/OrdersPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/OrdersPage.vue
new file mode 100644
index 0000000..7998f68
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/OrdersPage.vue
@@ -0,0 +1,172 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The orders page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  OrderTable,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Order,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+const ORDERS_FIELDS = {
+  "id": "id",
+  "number": "title",
+  "date": "metadata.date.value|date",
+  "total": "metadata.total.value",
+  "currency": "metadata.currency.value",
+  "status": "metadata.order_status.value",
+  "items": "metadata.items.value",
+} as const;
+
+const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.orders }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.orders }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="orders-table-label"
+          data-testid="variant"
+          data-block="orders"
+          data-variant="table"
+        >
+          <Title :as="2" size="base" weight="bold" id="orders-table-label" data-testid="variant-label">
+            {{ ui.blocks.variants.orders.table }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderTable
+              id="orders-table"
+              :title="ui.commerce.orders.title"
+              :orders="orders"
+              :empty="ui.empty.orders"
+              :statuses="ui.status"
+              :labels="ui.commerce.orders"
+              layout="table"
+              pager="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="orders-cards-label"
+          data-testid="variant"
+          data-block="orders"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="orders-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.orders.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderTable
+              id="orders-cards"
+              :title="ui.commerce.orders.title"
+              :orders="orders"
+              :empty="ui.empty.orders"
+              :statuses="ui.status"
+              :labels="ui.commerce.orders"
+              layout="cards"
+              pager="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="orders-noPager-label"
+          data-testid="variant"
+          data-block="orders"
+          data-variant="noPager"
+        >
+          <Title :as="2" size="base" weight="bold" id="orders-noPager-label" data-testid="variant-label">
+            {{ ui.blocks.variants.orders.noPager }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderTable
+              id="orders-noPager"
+              :title="ui.commerce.orders.title"
+              :orders="orders"
+              :empty="ui.empty.orders"
+              :statuses="ui.status"
+              :labels="ui.commerce.orders"
+              layout="table"
+              pager="hide"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.noPager))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="orders-compactMuted-label"
+          data-testid="variant"
+          data-block="orders"
+          data-variant="compactMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="orders-compactMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.orders.compactMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderTable
+              id="orders-compactMuted"
+              :title="ui.commerce.orders.title"
+              :orders="orders"
+              :empty="ui.empty.orders"
+              :statuses="ui.status"
+              :labels="ui.commerce.orders"
+              layout="table"
+              pager="hide"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.compactMuted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/OverviewPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/OverviewPage.vue
new file mode 100644
index 0000000..b43f551
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/OverviewPage.vue
@@ -0,0 +1,183 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The overview page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  DashboardOverview,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type Point,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+const OVERVIEW_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const OVERVIEW_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.overview }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.overview }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="overview-split-label"
+          data-testid="variant"
+          data-block="overview"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="overview-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.overview.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardOverview
+              id="overview-split"
+              :title="ui.vibe.overview.title"
+              :metrics="metrics"
+              :chart="OVERVIEW_CHART"
+              :activity="OVERVIEW_ACTIVITY"
+              layout="split"
+              cols="4"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="overview-stacked-label"
+          data-testid="variant"
+          data-block="overview"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="overview-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.overview.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardOverview
+              id="overview-stacked"
+              :title="ui.vibe.overview.title"
+              :metrics="metrics"
+              :chart="OVERVIEW_CHART"
+              :activity="OVERVIEW_ACTIVITY"
+              layout="stacked"
+              cols="4"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="overview-twoCols-label"
+          data-testid="variant"
+          data-block="overview"
+          data-variant="twoCols"
+        >
+          <Title :as="2" size="base" weight="bold" id="overview-twoCols-label" data-testid="variant-label">
+            {{ ui.blocks.variants.overview.twoCols }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardOverview
+              id="overview-twoCols"
+              :title="ui.vibe.overview.title"
+              :metrics="metrics"
+              :chart="OVERVIEW_CHART"
+              :activity="OVERVIEW_ACTIVITY"
+              layout="split"
+              cols="2"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.twoCols))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="overview-muted-label"
+          data-testid="variant"
+          data-block="overview"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="overview-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.overview.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <DashboardOverview
+              id="overview-muted"
+              :title="ui.vibe.overview.title"
+              :metrics="metrics"
+              :chart="OVERVIEW_CHART"
+              :activity="OVERVIEW_ACTIVITY"
+              layout="split"
+              cols="4"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/PageheadPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/PageheadPage.vue
new file mode 100644
index 0000000..54e9fcb
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/PageheadPage.vue
@@ -0,0 +1,126 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The pagehead page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageIntro,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.pagehead }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.pagehead }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagehead-start-label"
+          data-testid="variant"
+          data-block="pagehead"
+          data-variant="start"
+        >
+          <Title :as="2" size="base" weight="bold" id="pagehead-start-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pagehead.start }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageIntro
+              id="pagehead-start"
+              :title="ui.vibe.pagehead.title"
+              :text="ui.vibe.pagehead.text"
+              :cta="ui.vibe.pagehead.cta"
+              href="#/"
+              align="start"
+              tone="default"
+              density="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.start))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagehead-center-label"
+          data-testid="variant"
+          data-block="pagehead"
+          data-variant="center"
+        >
+          <Title :as="2" size="base" weight="bold" id="pagehead-center-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pagehead.center }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageIntro
+              id="pagehead-center"
+              :title="ui.vibe.pagehead.title"
+              :text="ui.vibe.pagehead.text"
+              :cta="ui.vibe.pagehead.cta"
+              href="#/"
+              align="center"
+              tone="default"
+              density="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.center))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagehead-muted-label"
+          data-testid="variant"
+          data-block="pagehead"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="pagehead-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pagehead.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageIntro
+              id="pagehead-muted"
+              :title="ui.vibe.pagehead.title"
+              :text="ui.vibe.pagehead.text"
+              :cta="ui.vibe.pagehead.cta"
+              href="#/"
+              align="start"
+              tone="muted"
+              density="compact"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/PagetrailPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/PagetrailPage.vue
new file mode 100644
index 0000000..e617a78
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/PagetrailPage.vue
@@ -0,0 +1,182 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The pagetrail page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageTrail,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+
+const PAGETRAIL_EXTRAS = {
+  value: ui.marketing.pageTrail.value,
+  caption: ui.marketing.pageTrail.caption,
+  note: ui.marketing.pageTrail.note,
+  icon: "package",
+  facts: stats,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.pagetrail }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.pagetrail }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagetrail-crumbs-label"
+          data-testid="variant"
+          data-block="pagetrail"
+          data-variant="crumbs"
+        >
+          <Title :as="2" size="base" weight="bold" id="pagetrail-crumbs-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pagetrail.crumbs }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageTrail
+              id="pagetrail-crumbs"
+              :title="ui.marketing.pageTrail.title"
+              :lead="ui.marketing.pageTrail.lead"
+              :badge="ui.marketing.pageTrail.badge"
+              :label="ui.marketing.pageTrail.label"
+              :crumbs="crumbs"
+              :extras="PAGETRAIL_EXTRAS"
+              aside="none"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbs))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagetrail-crumbsFigure-label"
+          data-testid="variant"
+          data-block="pagetrail"
+          data-variant="crumbsFigure"
+        >
+          <Title :as="2" size="base" weight="bold" id="pagetrail-crumbsFigure-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pagetrail.crumbsFigure }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageTrail
+              id="pagetrail-crumbsFigure"
+              :title="ui.marketing.pageTrail.title"
+              :lead="ui.marketing.pageTrail.lead"
+              :badge="ui.marketing.pageTrail.badge"
+              :label="ui.marketing.pageTrail.label"
+              :crumbs="crumbs"
+              :extras="PAGETRAIL_EXTRAS"
+              aside="figure"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsFigure))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagetrail-crumbsNote-label"
+          data-testid="variant"
+          data-block="pagetrail"
+          data-variant="crumbsNote"
+        >
+          <Title :as="2" size="base" weight="bold" id="pagetrail-crumbsNote-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pagetrail.crumbsNote }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageTrail
+              id="pagetrail-crumbsNote"
+              :title="ui.marketing.pageTrail.title"
+              :lead="ui.marketing.pageTrail.lead"
+              :badge="ui.marketing.pageTrail.badge"
+              :label="ui.marketing.pageTrail.label"
+              :crumbs="crumbs"
+              :extras="PAGETRAIL_EXTRAS"
+              aside="note"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsNote))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pagetrail-keyFacts-label"
+          data-testid="variant"
+          data-block="pagetrail"
+          data-variant="keyFacts"
+        >
+          <Title :as="2" size="base" weight="bold" id="pagetrail-keyFacts-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pagetrail.keyFacts }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PageTrail
+              id="pagetrail-keyFacts"
+              :title="ui.marketing.pageTrail.title"
+              :lead="ui.marketing.pageTrail.lead"
+              :badge="ui.marketing.pageTrail.badge"
+              :label="ui.marketing.pageTrail.label"
+              :crumbs="crumbs"
+              :extras="PAGETRAIL_EXTRAS"
+              aside="facts"
+              tone="muted"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.keyFacts))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/PhotosPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/PhotosPage.vue
new file mode 100644
index 0000000..63f1e57
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/PhotosPage.vue
@@ -0,0 +1,220 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The photos page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PhotoGallery,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Photo,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.photos }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.photos }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-grid-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="grid"
+        >
+          <Title :as="2" size="base" weight="bold" id="photos-grid-label" data-testid="variant-label">
+            {{ ui.blocks.variants.photos.grid }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-grid"
+              :title="ui.company.photos.title"
+              :lead="ui.company.photos.lead"
+              :photos="photos"
+              :empty="ui.empty.photos"
+              :labels="ui.company.photos"
+              layout="grid"
+              captions="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.grid))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-gridPlain-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="gridPlain"
+        >
+          <Title :as="2" size="base" weight="bold" id="photos-gridPlain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.photos.gridPlain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-gridPlain"
+              :title="ui.company.photos.title"
+              :lead="ui.company.photos.lead"
+              :photos="photos"
+              :empty="ui.empty.photos"
+              :labels="ui.company.photos"
+              layout="grid"
+              captions="hide"
+              tone="muted"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.gridPlain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-masonry-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="masonry"
+        >
+          <Title :as="2" size="base" weight="bold" id="photos-masonry-label" data-testid="variant-label">
+            {{ ui.blocks.variants.photos.masonry }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-masonry"
+              :title="ui.company.photos.title"
+              :lead="ui.company.photos.lead"
+              :photos="photos"
+              :empty="ui.empty.photos"
+              :labels="ui.company.photos"
+              layout="masonry"
+              captions="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-mosaic-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="mosaic"
+        >
+          <Title :as="2" size="base" weight="bold" id="photos-mosaic-label" data-testid="variant-label">
+            {{ ui.blocks.variants.photos.mosaic }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-mosaic"
+              :title="ui.company.photos.title"
+              :lead="ui.company.photos.lead"
+              :photos="photos"
+              :empty="ui.empty.photos"
+              :labels="ui.company.photos"
+              layout="mosaic"
+              captions="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.mosaic))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-featured-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="featured"
+        >
+          <Title :as="2" size="base" weight="bold" id="photos-featured-label" data-testid="variant-label">
+            {{ ui.blocks.variants.photos.featured }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-featured"
+              :title="ui.company.photos.title"
+              :lead="ui.company.photos.lead"
+              :photos="photos"
+              :empty="ui.empty.photos"
+              :labels="ui.company.photos"
+              layout="featured"
+              captions="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.featured))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="photos-cards-label"
+          data-testid="variant"
+          data-block="photos"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="photos-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.photos.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PhotoGallery
+              id="photos-cards"
+              :title="ui.company.photos.title"
+              :lead="ui.company.photos.lead"
+              :photos="photos"
+              :empty="ui.empty.photos"
+              :labels="ui.company.photos"
+              layout="cards"
+              captions="show"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.cards))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/PlanPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/PlanPage.vue
new file mode 100644
index 0000000..b9bca9f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/PlanPage.vue
@@ -0,0 +1,130 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The plan page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PricingCard,
+  Stack,
+  Text,
+  Title,
+  type Plan,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.plan }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.plan }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="plan-standard-label"
+          data-testid="variant"
+          data-block="plan"
+          data-variant="standard"
+        >
+          <Title :as="2" size="base" weight="bold" id="plan-standard-label" data-testid="variant-label">
+            {{ ui.blocks.variants.plan.standard }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <PricingCard
+                :plan="tiers.find((i) => i.id === 'tier-team')!"
+                :labels="ui.pricing"
+                emphasis="auto"
+                density="default"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="plan-flat-label"
+          data-testid="variant"
+          data-block="plan"
+          data-variant="flat"
+        >
+          <Title :as="2" size="base" weight="bold" id="plan-flat-label" data-testid="variant-label">
+            {{ ui.blocks.variants.plan.flat }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <PricingCard
+                :plan="tiers.find((i) => i.id === 'tier-team')!"
+                :labels="ui.pricing"
+                emphasis="off"
+                density="default"
+              />
+            </Box>
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="plan-compact-label"
+          data-testid="variant"
+          data-block="plan"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="plan-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.plan.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+              <PricingCard
+                :plan="tiers.find((i) => i.id === 'tier-team')!"
+                :labels="ui.pricing"
+                emphasis="auto"
+                density="compact"
+              />
+            </Box>
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/PostheaderPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/PostheaderPage.vue
new file mode 100644
index 0000000..3d8400d
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/PostheaderPage.vue
@@ -0,0 +1,167 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The postheader page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+            {{ ui.blocks.themes.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.postheader }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.postheader }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postheader-start-label"
+          data-testid="variant"
+          data-block="postheader"
+          data-variant="start"
+        >
+          <Title :as="2" size="base" weight="bold" id="postheader-start-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postheader.start }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostHeader
+              id="postheader-start"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.labels"
+              layout="start"
+              cover="show"
+              meta="full"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.start))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postheader-center-label"
+          data-testid="variant"
+          data-block="postheader"
+          data-variant="center"
+        >
+          <Title :as="2" size="base" weight="bold" id="postheader-center-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postheader.center }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostHeader
+              id="postheader-center"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.labels"
+              layout="center"
+              cover="show"
+              meta="full"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.center))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postheader-noCover-label"
+          data-testid="variant"
+          data-block="postheader"
+          data-variant="noCover"
+        >
+          <Title :as="2" size="base" weight="bold" id="postheader-noCover-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postheader.noCover }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostHeader
+              id="postheader-noCover"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.labels"
+              layout="start"
+              cover="hide"
+              meta="full"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.noCover))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postheader-minimal-label"
+          data-testid="variant"
+          data-block="postheader"
+          data-variant="minimal"
+        >
+          <Title :as="2" size="base" weight="bold" id="postheader-minimal-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postheader.minimal }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostHeader
+              id="postheader-minimal"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.labels"
+              layout="center"
+              cover="hide"
+              meta="short"
+              tone="muted"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.minimal))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/PostsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/PostsPage.vue
new file mode 100644
index 0000000..b3d610b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/PostsPage.vue
@@ -0,0 +1,339 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The posts page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+const POSTS_FILTER = { topics, label: ui.vibe.posts.topics, topic: "" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+            {{ ui.blocks.themes.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.posts }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.posts }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-grid-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="grid"
+        >
+          <Title :as="2" size="base" weight="bold" id="posts-grid-label" data-testid="variant-label">
+            {{ ui.blocks.variants.posts.grid }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-grid"
+              :title="ui.content.posts.title"
+              :posts="posts"
+              :labels="ui.content.labels"
+              :filter="{ ...POSTS_FILTER, mode: 'none' }"
+              :action="{ label: ui.content.posts.action, href: '#/' }"
+              layout="grid"
+              cols="1-3"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-filters-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="filters"
+        >
+          <Title :as="2" size="base" weight="bold" id="posts-filters-label" data-testid="variant-label">
+            {{ ui.blocks.variants.posts.filters }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-filters"
+              :title="ui.content.posts.title"
+              :posts="posts"
+              :labels="ui.content.labels"
+              :filter="{ ...POSTS_FILTER, topic: 'Design', mode: 'topics' }"
+              :action="{ label: ui.content.posts.action, href: '#/' }"
+              layout="grid"
+              cols="1-3"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-twoUp-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="twoUp"
+        >
+          <Title :as="2" size="base" weight="bold" id="posts-twoUp-label" data-testid="variant-label">
+            {{ ui.blocks.variants.posts.twoUp }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-twoUp"
+              :title="ui.content.posts.title"
+              :posts="posts"
+              :labels="ui.content.labels"
+              :filter="{ ...POSTS_FILTER, mode: 'none' }"
+              :action="{ label: ui.content.posts.action, href: '#/' }"
+              layout="grid"
+              cols="1-2"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-row4-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="row4"
+        >
+          <Title :as="2" size="base" weight="bold" id="posts-row4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.posts.row4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-row4"
+              :title="ui.content.posts.title"
+              :posts="posts"
+              :labels="ui.content.labels"
+              :filter="{ ...POSTS_FILTER, mode: 'none' }"
+              :action="{ label: ui.content.posts.action, href: '#/' }"
+              layout="grid"
+              cols="1-4"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.row4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-news4-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="news4"
+        >
+          <Title :as="2" size="base" weight="bold" id="posts-news4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.posts.news4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-news4"
+              :title="ui.content.posts.title"
+              :posts="posts"
+              :labels="ui.content.labels"
+              :filter="{ ...POSTS_FILTER, mode: 'none' }"
+              :action="{ label: ui.content.posts.action, href: '#/' }"
+              layout="grid"
+              cols="1-4"
+              media="image"
+              meta="news"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.news4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-list-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="posts-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.posts.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-list"
+              :title="ui.content.posts.title"
+              :posts="posts"
+              :labels="ui.content.labels"
+              :filter="{ ...POSTS_FILTER, mode: 'none' }"
+              :action="{ label: ui.content.posts.action, href: '#/' }"
+              layout="list"
+              cols="1-3"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-magazine-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="magazine"
+        >
+          <Title :as="2" size="base" weight="bold" id="posts-magazine-label" data-testid="variant-label">
+            {{ ui.blocks.variants.posts.magazine }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-magazine"
+              :title="ui.content.posts.title"
+              :posts="posts"
+              :labels="ui.content.labels"
+              :filter="{ ...POSTS_FILTER, mode: 'none' }"
+              :action="{ label: ui.content.posts.action, href: '#/' }"
+              layout="magazine"
+              cols="1-3"
+              media="image"
+              meta="full"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-textOnly-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="textOnly"
+        >
+          <Title :as="2" size="base" weight="bold" id="posts-textOnly-label" data-testid="variant-label">
+            {{ ui.blocks.variants.posts.textOnly }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-textOnly"
+              :title="ui.content.posts.title"
+              :posts="posts"
+              :labels="ui.content.labels"
+              :filter="{ ...POSTS_FILTER, mode: 'none' }"
+              :action="{ label: ui.content.posts.action, href: '#/' }"
+              layout="grid"
+              cols="1-3"
+              media="none"
+              meta="full"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="posts-digest-label"
+          data-testid="variant"
+          data-block="posts"
+          data-variant="digest"
+        >
+          <Title :as="2" size="base" weight="bold" id="posts-digest-label" data-testid="variant-label">
+            {{ ui.blocks.variants.posts.digest }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostGrid
+              id="posts-digest"
+              :title="ui.content.posts.title"
+              :posts="posts"
+              :labels="ui.content.labels"
+              :filter="{ ...POSTS_FILTER, mode: 'none' }"
+              :action="{ label: ui.content.posts.action, href: '#/' }"
+              layout="grid"
+              cols="1-3"
+              media="none"
+              meta="short"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/PostshowcasePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/PostshowcasePage.vue
new file mode 100644
index 0000000..e743892
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/PostshowcasePage.vue
@@ -0,0 +1,183 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The postshowcase page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostShowcase,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+            {{ ui.blocks.themes.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.postshowcase }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.postshowcase }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postshowcase-introCards-label"
+          data-testid="variant"
+          data-block="postshowcase"
+          data-variant="introCards"
+        >
+          <Title :as="2" size="base" weight="bold" id="postshowcase-introCards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postshowcase.introCards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostShowcase
+              id="postshowcase-introCards"
+              :title="ui.content.postShowcase.title"
+              :lead="ui.content.postShowcase.lead"
+              :badge="ui.content.postShowcase.badge"
+              :posts="posts"
+              :empty="ui.empty.posts"
+              :labels="ui.content.labels"
+              :action="{ label: ui.content.postShowcase.action, href: '#/articles' }"
+              layout="intro"
+              cols="3"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postshowcase-featuredEnd-label"
+          data-testid="variant"
+          data-block="postshowcase"
+          data-variant="featuredEnd"
+        >
+          <Title :as="2" size="base" weight="bold" id="postshowcase-featuredEnd-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postshowcase.featuredEnd }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostShowcase
+              id="postshowcase-featuredEnd"
+              :title="ui.content.postShowcase.title"
+              :lead="ui.content.postShowcase.lead"
+              :badge="ui.content.postShowcase.badge"
+              :posts="posts"
+              :empty="ui.empty.posts"
+              :labels="ui.content.labels"
+              :action="{ label: ui.content.postShowcase.action, href: '#/articles' }"
+              layout="featured"
+              cols="3"
+              mediaSide="end"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.featuredEnd))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postshowcase-overlay3-label"
+          data-testid="variant"
+          data-block="postshowcase"
+          data-variant="overlay3"
+        >
+          <Title :as="2" size="base" weight="bold" id="postshowcase-overlay3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postshowcase.overlay3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostShowcase
+              id="postshowcase-overlay3"
+              :title="ui.content.postShowcase.title"
+              :lead="ui.content.postShowcase.lead"
+              :badge="ui.content.postShowcase.badge"
+              :posts="posts"
+              :empty="ui.empty.posts"
+              :labels="ui.content.labels"
+              :action="{ label: ui.content.postShowcase.action, href: '#/articles' }"
+              layout="overlay"
+              cols="3"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postshowcase-overlay2-label"
+          data-testid="variant"
+          data-block="postshowcase"
+          data-variant="overlay2"
+        >
+          <Title :as="2" size="base" weight="bold" id="postshowcase-overlay2-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postshowcase.overlay2 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostShowcase
+              id="postshowcase-overlay2"
+              :title="ui.content.postShowcase.title"
+              :lead="ui.content.postShowcase.lead"
+              :badge="ui.content.postShowcase.badge"
+              :posts="posts"
+              :empty="ui.empty.posts"
+              :labels="ui.content.labels"
+              :action="{ label: ui.content.postShowcase.action, href: '#/articles' }"
+              layout="overlay"
+              cols="2"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay2))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/PostsplitPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/PostsplitPage.vue
new file mode 100644
index 0000000..667ecc1
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/PostsplitPage.vue
@@ -0,0 +1,253 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The postsplit page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Post,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+const POSTSPLIT_EXTRAS = {
+  role: ui.content.postSplit.role,
+  bio: ui.content.postSplit.bio,
+  views: ui.content.postSplit.views,
+  likes: ui.content.postSplit.likes,
+  tags: posttags,
+  outline,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+            {{ ui.blocks.themes.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.postsplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.postsplit }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-centerShare-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="centerShare"
+        >
+          <Title :as="2" size="base" weight="bold" id="postsplit-centerShare-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postsplit.centerShare }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-centerShare"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.postSplit.labels"
+              :extras="POSTSPLIT_EXTRAS"
+              layout="center"
+              mediaSide="end"
+              author="line"
+              cover="wide"
+              actions="pair"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.centerShare))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-splitTags-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="splitTags"
+        >
+          <Title :as="2" size="base" weight="bold" id="postsplit-splitTags-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postsplit.splitTags }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-splitTags"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.postSplit.labels"
+              :extras="POSTSPLIT_EXTRAS"
+              layout="split"
+              mediaSide="end"
+              author="line"
+              cover="wide"
+              actions="pair"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitTags))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-splitBioStart-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="splitBioStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="postsplit-splitBioStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postsplit.splitBioStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-splitBioStart"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.postSplit.labels"
+              :extras="POSTSPLIT_EXTRAS"
+              layout="split"
+              mediaSide="start"
+              author="bio"
+              cover="wide"
+              actions="wide"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitBioStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-splitSquare-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="splitSquare"
+        >
+          <Title :as="2" size="base" weight="bold" id="postsplit-splitSquare-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postsplit.splitSquare }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-splitSquare"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.postSplit.labels"
+              :extras="POSTSPLIT_EXTRAS"
+              layout="split"
+              mediaSide="end"
+              author="line"
+              cover="square"
+              actions="icons"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitSquare))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-outlineStart-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="outlineStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="postsplit-outlineStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postsplit.outlineStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-outlineStart"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.postSplit.labels"
+              :extras="POSTSPLIT_EXTRAS"
+              layout="outline"
+              mediaSide="start"
+              author="line"
+              cover="wide"
+              actions="pair"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.outlineStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="postsplit-splitStats-label"
+          data-testid="variant"
+          data-block="postsplit"
+          data-variant="splitStats"
+        >
+          <Title :as="2" size="base" weight="bold" id="postsplit-splitStats-label" data-testid="variant-label">
+            {{ ui.blocks.variants.postsplit.splitStats }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PostSplit
+              id="postsplit-splitStats"
+              :post="posts.find((i) => i.id === 'post-static-first')!"
+              :labels="ui.content.postSplit.labels"
+              :extras="POSTSPLIT_EXTRAS"
+              layout="split"
+              mediaSide="end"
+              author="card"
+              cover="wide"
+              actions="pair"
+              tone="muted"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitStats))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/PricingPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/PricingPage.vue
new file mode 100644
index 0000000..f500b7a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/PricingPage.vue
@@ -0,0 +1,367 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The pricing page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PricingTiers,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Plan,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const DUO_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.pricing }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.pricing }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-grid-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="grid"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-grid-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.grid }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-grid"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="tiers"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-monthly-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="monthly"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-monthly-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.monthly }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-monthly"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="tiers"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="monthly"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-annual-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="annual"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-annual-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.annual }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-annual"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="tiers"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="annual"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-duo-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="duo"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-duo-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.duo }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-duo"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="duo"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="grid"
+              cols="1-2"
+              emphasis="off"
+              billing="off"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-grid2-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="grid2"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-grid2-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.grid2 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-grid2"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="tiers"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="grid"
+              cols="1-2"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid2))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-grid4-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="grid4"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-grid4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.grid4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-grid4"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="tiers"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="grid"
+              cols="1-4"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-stack-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="stack"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-stack-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.stack }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-stack"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="tiers"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="stack"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-flat-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="flat"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-flat-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.flat }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-flat"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="tiers"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="grid"
+              cols="1-3"
+              emphasis="off"
+              billing="off"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.flat))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-compactMuted-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="compactMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-compactMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.compactMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-compactMuted"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="tiers"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.compactMuted))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="pricing-roomy-label"
+          data-testid="variant"
+          data-block="pricing"
+          data-variant="roomy"
+        >
+          <Title :as="2" size="base" weight="bold" id="pricing-roomy-label" data-testid="variant-label">
+            {{ ui.blocks.variants.pricing.roomy }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <PricingTiers
+              id="pricing-roomy"
+              :title="ui.site.pricing.tiersTitle"
+              :plans="tiers"
+              :labels="ui.pricing"
+              :billingLabels="ui.vibe.billing"
+              layout="grid"
+              cols="1-3"
+              emphasis="auto"
+              billing="off"
+              tone="default"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.roomy))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ProductPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ProductPage.vue
new file mode 100644
index 0000000..ff6191b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ProductPage.vue
@@ -0,0 +1,211 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The product page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductDetail,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Product,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.product }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.product }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-split-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="product-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.product.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-split"
+              :product="products.find((i) => i.id === 'product-lamp')!"
+              :labels="ui.commerce.detail"
+              :badges="ui.commerce.badges"
+              layout="split"
+              mediaSide="start"
+              thumbs="below"
+              buy="full"
+              tone="default"
+              density="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-splitEnd-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="splitEnd"
+        >
+          <Title :as="2" size="base" weight="bold" id="product-splitEnd-label" data-testid="variant-label">
+            {{ ui.blocks.variants.product.splitEnd }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-splitEnd"
+              :product="products.find((i) => i.id === 'product-lamp')!"
+              :labels="ui.commerce.detail"
+              :badges="ui.commerce.badges"
+              layout="split"
+              mediaSide="end"
+              thumbs="below"
+              buy="full"
+              tone="default"
+              density="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.splitEnd))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-stacked-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="product-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.product.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-stacked"
+              :product="products.find((i) => i.id === 'product-lamp')!"
+              :labels="ui.commerce.detail"
+              :badges="ui.commerce.badges"
+              layout="stacked"
+              mediaSide="start"
+              thumbs="none"
+              buy="full"
+              tone="default"
+              density="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.stacked))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-compact-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="product-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.product.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-compact"
+              :product="products.find((i) => i.id === 'product-lamp')!"
+              :labels="ui.commerce.detail"
+              :badges="ui.commerce.badges"
+              layout="split"
+              mediaSide="start"
+              thumbs="none"
+              buy="compact"
+              tone="default"
+              density="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.compact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="product-muted-label"
+          data-testid="variant"
+          data-block="product"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="product-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.product.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductDetail
+              id="product-muted"
+              :product="products.find((i) => i.id === 'product-lamp')!"
+              :labels="ui.commerce.detail"
+              :badges="ui.commerce.badges"
+              layout="split"
+              mediaSide="start"
+              thumbs="below"
+              buy="full"
+              tone="muted"
+              density="roomy"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ProductinfoPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ProductinfoPage.vue
new file mode 100644
index 0000000..13a2276
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ProductinfoPage.vue
@@ -0,0 +1,134 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The productinfo page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductInfo,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Detail,
+  type Spec,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.productinfo }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.productinfo }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="productinfo-split-label"
+          data-testid="variant"
+          data-block="productinfo"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="productinfo-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.productinfo.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductInfo
+              id="productinfo-split"
+              :title="ui.commerce.info.title"
+              :details="details"
+              :specs="specs"
+              :labels="ui.commerce.info"
+              layout="split"
+              expand="first"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="productinfo-stacked-label"
+          data-testid="variant"
+          data-block="productinfo"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="productinfo-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.productinfo.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductInfo
+              id="productinfo-stacked"
+              :title="ui.commerce.info.title"
+              :details="details"
+              :specs="specs"
+              :labels="ui.commerce.info"
+              layout="stacked"
+              expand="first"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.stacked))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="productinfo-closed-label"
+          data-testid="variant"
+          data-block="productinfo"
+          data-variant="closed"
+        >
+          <Title :as="2" size="base" weight="bold" id="productinfo-closed-label" data-testid="variant-label">
+            {{ ui.blocks.variants.productinfo.closed }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductInfo
+              id="productinfo-closed"
+              :title="ui.commerce.info.title"
+              :details="details"
+              :specs="specs"
+              :labels="ui.commerce.info"
+              layout="split"
+              expand="none"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.closed))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ProductsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ProductsPage.vue
new file mode 100644
index 0000000..16dd93a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ProductsPage.vue
@@ -0,0 +1,336 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The products page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Product,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.products }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.products }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-grid3-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="grid3"
+        >
+          <Title :as="2" size="base" weight="bold" id="products-grid3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.products.grid3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-grid3"
+              :title="ui.commerce.products.title"
+              :products="products"
+              :labels="ui.commerce.productLabels"
+              :badges="ui.commerce.badges"
+              layout="grid"
+              cols="1-3"
+              ratio="4/3"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-grid4-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="grid4"
+        >
+          <Title :as="2" size="base" weight="bold" id="products-grid4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.products.grid4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-grid4"
+              :title="ui.commerce.products.title"
+              :products="products"
+              :labels="ui.commerce.productLabels"
+              :badges="ui.commerce.badges"
+              layout="grid"
+              cols="1-4"
+              ratio="1/1"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-grid2-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="grid2"
+        >
+          <Title :as="2" size="base" weight="bold" id="products-grid2-label" data-testid="variant-label">
+            {{ ui.blocks.variants.products.grid2 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-grid2"
+              :title="ui.commerce.products.title"
+              :products="products"
+              :labels="ui.commerce.productLabels"
+              :badges="ui.commerce.badges"
+              layout="grid"
+              cols="1-2"
+              ratio="3/4"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid2))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-list-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="products-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.products.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-list"
+              :title="ui.commerce.products.title"
+              :products="products"
+              :labels="ui.commerce.productLabels"
+              :badges="ui.commerce.badges"
+              layout="list"
+              cols="1-3"
+              ratio="4/3"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-catalog-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="catalog"
+        >
+          <Title :as="2" size="base" weight="bold" id="products-catalog-label" data-testid="variant-label">
+            {{ ui.blocks.variants.products.catalog }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-catalog"
+              :title="ui.commerce.products.title"
+              :products="products"
+              :labels="ui.commerce.productLabels"
+              :badges="ui.commerce.badges"
+              layout="grid"
+              cols="1-4"
+              ratio="1/1"
+              rating="hide"
+              action="button"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-browse-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="browse"
+        >
+          <Title :as="2" size="base" weight="bold" id="products-browse-label" data-testid="variant-label">
+            {{ ui.blocks.variants.products.browse }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-browse"
+              :title="ui.commerce.products.title"
+              :products="products"
+              :labels="ui.commerce.productLabels"
+              :badges="ui.commerce.badges"
+              layout="grid"
+              cols="1-3"
+              ratio="4/3"
+              rating="show"
+              action="none"
+              tone="muted"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-showcase-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="showcase"
+        >
+          <Title :as="2" size="base" weight="bold" id="products-showcase-label" data-testid="variant-label">
+            {{ ui.blocks.variants.products.showcase }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-showcase"
+              :title="ui.commerce.products.title"
+              :products="products"
+              :labels="ui.commerce.productLabels"
+              :badges="ui.commerce.badges"
+              layout="grid"
+              cols="1-3"
+              ratio="3/4"
+              rating="show"
+              action="button"
+              tone="default"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-rail-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="rail"
+        >
+          <Title :as="2" size="base" weight="bold" id="products-rail-label" data-testid="variant-label">
+            {{ ui.blocks.variants.products.rail }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-rail"
+              :title="ui.commerce.products.title"
+              :products="products"
+              :labels="ui.commerce.productLabels"
+              :badges="ui.commerce.badges"
+              layout="rail"
+              cols="1-3"
+              ratio="4/3"
+              rating="show"
+              action="button"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="products-railCompact-label"
+          data-testid="variant"
+          data-block="products"
+          data-variant="railCompact"
+        >
+          <Title :as="2" size="base" weight="bold" id="products-railCompact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.products.railCompact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProductGrid
+              id="products-railCompact"
+              :title="ui.commerce.products.title"
+              :products="products"
+              :labels="ui.commerce.productLabels"
+              :badges="ui.commerce.badges"
+              layout="rail"
+              cols="1-3"
+              ratio="1/1"
+              rating="hide"
+              action="button"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ProfilePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ProfilePage.vue
new file mode 100644
index 0000000..6e9cb03
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ProfilePage.vue
@@ -0,0 +1,149 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The profile page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProfileForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+            {{ ui.blocks.themes.account.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.profile }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.profile }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="profile-stacked-label"
+          data-testid="variant"
+          data-block="profile"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="profile-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.profile.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProfileForm
+              id="profile-stacked"
+              :title="ui.account.profile.title"
+              :text="ui.account.profile.text"
+              :labels="ui.account.profile.labels"
+              layout="stacked"
+              avatar="show"
+              prefs="show"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="profile-split-label"
+          data-testid="variant"
+          data-block="profile"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="profile-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.profile.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProfileForm
+              id="profile-split"
+              :title="ui.account.profile.title"
+              :text="ui.account.profile.text"
+              :labels="ui.account.profile.labels"
+              layout="split"
+              avatar="show"
+              prefs="show"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="profile-minimal-label"
+          data-testid="variant"
+          data-block="profile"
+          data-variant="minimal"
+        >
+          <Title :as="2" size="base" weight="bold" id="profile-minimal-label" data-testid="variant-label">
+            {{ ui.blocks.variants.profile.minimal }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProfileForm
+              id="profile-minimal"
+              :title="ui.account.profile.title"
+              :text="ui.account.profile.text"
+              :labels="ui.account.profile.labels"
+              layout="stacked"
+              avatar="hide"
+              prefs="hide"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.minimal))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="profile-muted-label"
+          data-testid="variant"
+          data-block="profile"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="profile-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.profile.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProfileForm
+              id="profile-muted"
+              :title="ui.account.profile.title"
+              :text="ui.account.profile.text"
+              :labels="ui.account.profile.labels"
+              layout="split"
+              avatar="show"
+              prefs="show"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ProjectsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ProjectsPage.vue
new file mode 100644
index 0000000..4452580
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ProjectsPage.vue
@@ -0,0 +1,223 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The projects page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProjectGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Project,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.projects }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.projects }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-cards-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="projects-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.projects.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-cards"
+              :title="ui.company.projects.title"
+              :lead="ui.company.projects.lead"
+              :projects="projects"
+              :empty="ui.empty.projects"
+              :labels="ui.company.projects"
+              layout="cards"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-compact-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="projects-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.projects.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-compact"
+              :title="ui.company.projects.title"
+              :lead="ui.company.projects.lead"
+              :projects="projects"
+              :empty="ui.empty.projects"
+              :labels="ui.company.projects"
+              layout="compact"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.compact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-overlay-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="overlay"
+        >
+          <Title :as="2" size="base" weight="bold" id="projects-overlay-label" data-testid="variant-label">
+            {{ ui.blocks.variants.projects.overlay }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-overlay"
+              :title="ui.company.projects.title"
+              :lead="ui.company.projects.lead"
+              :projects="projects"
+              :empty="ui.empty.projects"
+              :labels="ui.company.projects"
+              layout="overlay"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.overlay))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-bento-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="bento"
+        >
+          <Title :as="2" size="base" weight="bold" id="projects-bento-label" data-testid="variant-label">
+            {{ ui.blocks.variants.projects.bento }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-bento"
+              :title="ui.company.projects.title"
+              :lead="ui.company.projects.lead"
+              :projects="projects"
+              :empty="ui.empty.projects"
+              :labels="ui.company.projects"
+              layout="bento"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.bento))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-list-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="projects-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.projects.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-list"
+              :title="ui.company.projects.title"
+              :lead="ui.company.projects.lead"
+              :projects="projects"
+              :empty="ui.empty.projects"
+              :labels="ui.company.projects"
+              layout="list"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="projects-cardsMuted-label"
+          data-testid="variant"
+          data-block="projects"
+          data-variant="cardsMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="projects-cardsMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.projects.cardsMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProjectGrid
+              id="projects-cardsMuted"
+              :title="ui.company.projects.title"
+              :lead="ui.company.projects.lead"
+              :projects="projects"
+              :empty="ui.empty.projects"
+              :labels="ui.company.projects"
+              layout="cards"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cardsMuted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ProofPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ProofPage.vue
new file mode 100644
index 0000000..619b637
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ProofPage.vue
@@ -0,0 +1,170 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The proof page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProofBand,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.proof }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.proof }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="proof-above-label"
+          data-testid="variant"
+          data-block="proof"
+          data-variant="above"
+        >
+          <Title :as="2" size="base" weight="bold" id="proof-above-label" data-testid="variant-label">
+            {{ ui.blocks.variants.proof.above }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProofBand
+              id="proof-above"
+              :title="ui.vibe.proof.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              :stats="stats"
+              layout="above"
+              logoStyle="name"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="proof-beside-label"
+          data-testid="variant"
+          data-block="proof"
+          data-variant="beside"
+        >
+          <Title :as="2" size="base" weight="bold" id="proof-beside-label" data-testid="variant-label">
+            {{ ui.blocks.variants.proof.beside }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProofBand
+              id="proof-beside"
+              :title="ui.vibe.proof.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              :stats="stats"
+              layout="beside"
+              logoStyle="name"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.beside))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="proof-icons-label"
+          data-testid="variant"
+          data-block="proof"
+          data-variant="icons"
+        >
+          <Title :as="2" size="base" weight="bold" id="proof-icons-label" data-testid="variant-label">
+            {{ ui.blocks.variants.proof.icons }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProofBand
+              id="proof-icons"
+              :title="ui.vibe.proof.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              :stats="stats"
+              layout="above"
+              logoStyle="icon"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.icons))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="proof-muted-label"
+          data-testid="variant"
+          data-block="proof"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="proof-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.proof.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ProofBand
+              id="proof-muted"
+              :title="ui.vibe.proof.title"
+              :logos="logos"
+              :empty="ui.empty.logos"
+              :stats="stats"
+              layout="above"
+              logoStyle="name"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/QuotesplitPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/QuotesplitPage.vue
new file mode 100644
index 0000000..6a7acf6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/QuotesplitPage.vue
@@ -0,0 +1,266 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The quotesplit page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  QuoteSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+const QUOTESPLIT_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+const QUOTESPLIT_EXTRAS = { stats, logos, rating: 5, score: ui.marketing.quoteSplit.score, reviews: ui.marketing.quoteSplit.reviews } as const;
+const QUOTESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.quoteSplit.cta,
+  href: "#/customers",
+  secondary: ui.marketing.quoteSplit.secondary,
+  secondaryHref: "#/contact",
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.quotesplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.quotesplit }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-quoteCard-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="quoteCard"
+        >
+          <Title :as="2" size="base" weight="bold" id="quotesplit-quoteCard-label" data-testid="variant-label">
+            {{ ui.blocks.variants.quotesplit.quoteCard }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-quoteCard"
+              :title="ui.marketing.quoteSplit.title"
+              :lead="ui.marketing.quoteSplit.lead"
+              :badge="ui.marketing.quoteSplit.badge"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="QUOTESPLIT_LABELS"
+              :extras="QUOTESPLIT_EXTRAS"
+              :actions="QUOTESPLIT_ACTIONS"
+              layout="media"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.quoteCard))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-logoTiles-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="logoTiles"
+        >
+          <Title :as="2" size="base" weight="bold" id="quotesplit-logoTiles-label" data-testid="variant-label">
+            {{ ui.blocks.variants.quotesplit.logoTiles }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-logoTiles"
+              :title="ui.marketing.quoteSplit.title"
+              :lead="ui.marketing.quoteSplit.lead"
+              :badge="ui.marketing.quoteSplit.badge"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="QUOTESPLIT_LABELS"
+              :extras="QUOTESPLIT_EXTRAS"
+              :actions="QUOTESPLIT_ACTIONS"
+              layout="logos"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.logoTiles))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-ratingPanel-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="ratingPanel"
+        >
+          <Title :as="2" size="base" weight="bold" id="quotesplit-ratingPanel-label" data-testid="variant-label">
+            {{ ui.blocks.variants.quotesplit.ratingPanel }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-ratingPanel"
+              :title="ui.marketing.quoteSplit.title"
+              :lead="ui.marketing.quoteSplit.lead"
+              :badge="ui.marketing.quoteSplit.badge"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="QUOTESPLIT_LABELS"
+              :extras="QUOTESPLIT_EXTRAS"
+              :actions="QUOTESPLIT_ACTIONS"
+              layout="rating"
+              mediaSide="end"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-stackedCards-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="stackedCards"
+        >
+          <Title :as="2" size="base" weight="bold" id="quotesplit-stackedCards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.quotesplit.stackedCards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-stackedCards"
+              :title="ui.marketing.quoteSplit.title"
+              :lead="ui.marketing.quoteSplit.lead"
+              :badge="ui.marketing.quoteSplit.badge"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="QUOTESPLIT_LABELS"
+              :extras="QUOTESPLIT_EXTRAS"
+              :actions="QUOTESPLIT_ACTIONS"
+              layout="stack"
+              mediaSide="start"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.stackedCards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-compact4-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="compact4"
+        >
+          <Title :as="2" size="base" weight="bold" id="quotesplit-compact4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.quotesplit.compact4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-compact4"
+              :title="ui.marketing.quoteSplit.title"
+              :lead="ui.marketing.quoteSplit.lead"
+              :badge="ui.marketing.quoteSplit.badge"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="QUOTESPLIT_LABELS"
+              :extras="QUOTESPLIT_EXTRAS"
+              :actions="QUOTESPLIT_ACTIONS"
+              layout="compact"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.compact4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="quotesplit-bentoFigures-label"
+          data-testid="variant"
+          data-block="quotesplit"
+          data-variant="bentoFigures"
+        >
+          <Title :as="2" size="base" weight="bold" id="quotesplit-bentoFigures-label" data-testid="variant-label">
+            {{ ui.blocks.variants.quotesplit.bentoFigures }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <QuoteSplit
+              id="quotesplit-bentoFigures"
+              :title="ui.marketing.quoteSplit.title"
+              :lead="ui.marketing.quoteSplit.lead"
+              :badge="ui.marketing.quoteSplit.badge"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="QUOTESPLIT_LABELS"
+              :extras="QUOTESPLIT_EXTRAS"
+              :actions="QUOTESPLIT_ACTIONS"
+              layout="bento"
+              mediaSide="end"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.bentoFigures))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ReviewsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ReviewsPage.vue
new file mode 100644
index 0000000..e10b93b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ReviewsPage.vue
@@ -0,0 +1,194 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The reviews page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ReviewList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Review,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.reviews }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.reviews }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-list-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="reviews-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.reviews.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-list"
+              :title="ui.commerce.reviews.title"
+              :reviews="reviews"
+              :labels="ui.commerce.reviewLabels"
+              layout="list"
+              item="card"
+              avatar="none"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-grid-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="grid"
+        >
+          <Title :as="2" size="base" weight="bold" id="reviews-grid-label" data-testid="variant-label">
+            {{ ui.blocks.variants.reviews.grid }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-grid"
+              :title="ui.commerce.reviews.title"
+              :reviews="reviews"
+              :labels="ui.commerce.reviewLabels"
+              layout="grid"
+              item="card"
+              avatar="none"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-plain-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="reviews-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.reviews.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-plain"
+              :title="ui.commerce.reviews.title"
+              :reviews="reviews"
+              :labels="ui.commerce.reviewLabels"
+              layout="list"
+              item="plain"
+              avatar="none"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.plain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-avatars-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="avatars"
+        >
+          <Title :as="2" size="base" weight="bold" id="reviews-avatars-label" data-testid="variant-label">
+            {{ ui.blocks.variants.reviews.avatars }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-avatars"
+              :title="ui.commerce.reviews.title"
+              :reviews="reviews"
+              :labels="ui.commerce.reviewLabels"
+              layout="list"
+              item="card"
+              avatar="image"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.avatars))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="reviews-mutedGrid-label"
+          data-testid="variant"
+          data-block="reviews"
+          data-variant="mutedGrid"
+        >
+          <Title :as="2" size="base" weight="bold" id="reviews-mutedGrid-label" data-testid="variant-label">
+            {{ ui.blocks.variants.reviews.mutedGrid }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ReviewList
+              id="reviews-mutedGrid"
+              :title="ui.commerce.reviews.title"
+              :reviews="reviews"
+              :labels="ui.commerce.reviewLabels"
+              layout="grid"
+              item="card"
+              avatar="image"
+              tone="muted"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.mutedGrid))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ScreenHeader.vue b/apps/host-vue/xgen/screens/BlocksScreen/ScreenHeader.vue
new file mode 100644
index 0000000..8f35cfe
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ScreenHeader.vue
@@ -0,0 +1,42 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The ScreenHeader part of BlocksScreen: its own file, so each file of the screen opens on one Block. -->
+<script setup lang="ts">
+import { Block, Button, Container, Group, Link, LinkPlain } from "@ui8kit/vue-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="header" class="border-b border-border">
+    <LinkPlain
+      href="#main-content"
+      :class="'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded-md focus:bg-background ' +
+        'focus:px-4 focus:py-2 focus:text-sm focus:shadow'"
+      data-testid="skip-link"
+    >
+      {{ ui.site.header.skip }}
+    </LinkPlain>
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+      <Link href="#/" variant="default" class="text-lg font-bold" data-testid="brand">
+        {{ ui.blocks.title }}
+      </Link>
+      <Group gap="4" align="center" class="flex-wrap">
+        <Link href="/catalog/" variant="default" class="text-sm font-medium" data-testid="catalog-link">
+          {{ ui.catalog.title }}
+        </Link>
+        <Link href="/skins/" variant="default" class="text-sm font-medium" data-testid="skins-link">
+          {{ ui.skins.title }}
+        </Link>
+        <Link href="/discovery/" variant="default" class="text-sm font-medium" data-testid="discovery-link">
+          {{ ui.discovery.title }}
+        </Link>
+        <Button variant="outline" size="sm" data-testid="theme-toggle" @click="() => actions.toggleTheme()">
+          {{ ui.theme.toggle }}
+        </Button>
+      </Group>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ShellPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ShellPage.vue
new file mode 100644
index 0000000..69e910d
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ShellPage.vue
@@ -0,0 +1,192 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The shell page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  AppShell,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+
+const SHELL_NAV = { label: ui.vibe.sidebar.label, brand: ui.site.header.brand, links: sidenav, current: "item-overview" } as const;
+const SHELL_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const SHELL_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.shell }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.shell }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="shell-sidebar-label"
+          data-testid="variant"
+          data-block="shell"
+          data-variant="sidebar"
+        >
+          <Title :as="2" size="base" weight="bold" id="shell-sidebar-label" data-testid="variant-label">
+            {{ ui.blocks.variants.shell.sidebar }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AppShell
+              id="shell-sidebar"
+              :title="ui.vibe.shell.title"
+              :nav="SHELL_NAV"
+              :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              :metrics="metrics"
+              :chart="SHELL_CHART"
+              :activity="SHELL_ACTIVITY"
+              layout="sidebar"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="shell-top-label"
+          data-testid="variant"
+          data-block="shell"
+          data-variant="top"
+        >
+          <Title :as="2" size="base" weight="bold" id="shell-top-label" data-testid="variant-label">
+            {{ ui.blocks.variants.shell.top }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AppShell
+              id="shell-top"
+              :title="ui.vibe.shell.title"
+              :nav="SHELL_NAV"
+              :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              :metrics="metrics"
+              :chart="SHELL_CHART"
+              :activity="SHELL_ACTIVITY"
+              layout="top"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="shell-panes-label"
+          data-testid="variant"
+          data-block="shell"
+          data-variant="panes"
+        >
+          <Title :as="2" size="base" weight="bold" id="shell-panes-label" data-testid="variant-label">
+            {{ ui.blocks.variants.shell.panes }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AppShell
+              id="shell-panes"
+              :title="ui.vibe.shell.title"
+              :nav="SHELL_NAV"
+              :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              :metrics="metrics"
+              :chart="SHELL_CHART"
+              :activity="SHELL_ACTIVITY"
+              layout="panes"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="shell-dense-label"
+          data-testid="variant"
+          data-block="shell"
+          data-variant="dense"
+        >
+          <Title :as="2" size="base" weight="bold" id="shell-dense-label" data-testid="variant-label">
+            {{ ui.blocks.variants.shell.dense }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <AppShell
+              id="shell-dense"
+              :title="ui.vibe.shell.title"
+              :nav="SHELL_NAV"
+              :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+              :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+              :metrics="metrics"
+              :chart="SHELL_CHART"
+              :activity="SHELL_ACTIVITY"
+              layout="sidebar"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.dense))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/SidenavPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/SidenavPage.vue
new file mode 100644
index 0000000..b178ea9
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/SidenavPage.vue
@@ -0,0 +1,160 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The sidenav page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SidebarNav,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.sidenav }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.sidenav }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sidenav-full-label"
+          data-testid="variant"
+          data-block="sidenav"
+          data-variant="full"
+        >
+          <Title :as="2" size="base" weight="bold" id="sidenav-full-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sidenav.full }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SidebarNav
+              :label="ui.vibe.sidebar.label"
+              :brand="ui.site.header.brand"
+              :links="sidenav"
+              current="item-orders"
+              :userName="ui.vibe.sidebar.userName"
+              :userEmail="ui.vibe.sidebar.userEmail"
+              width="full"
+              user="show"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sidenav-compact-label"
+          data-testid="variant"
+          data-block="sidenav"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="sidenav-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sidenav.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SidebarNav
+              :label="ui.vibe.sidebar.label"
+              :brand="ui.site.header.brand"
+              :links="sidenav"
+              current="item-orders"
+              :userName="ui.vibe.sidebar.userName"
+              :userEmail="ui.vibe.sidebar.userEmail"
+              width="compact"
+              user="show"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sidenav-noUser-label"
+          data-testid="variant"
+          data-block="sidenav"
+          data-variant="noUser"
+        >
+          <Title :as="2" size="base" weight="bold" id="sidenav-noUser-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sidenav.noUser }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SidebarNav
+              :label="ui.vibe.sidebar.label"
+              :brand="ui.site.header.brand"
+              :links="sidenav"
+              current="item-orders"
+              :userName="ui.vibe.sidebar.userName"
+              :userEmail="ui.vibe.sidebar.userEmail"
+              width="full"
+              user="hide"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.noUser))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sidenav-dense-label"
+          data-testid="variant"
+          data-block="sidenav"
+          data-variant="dense"
+        >
+          <Title :as="2" size="base" weight="bold" id="sidenav-dense-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sidenav.dense }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SidebarNav
+              :label="ui.vibe.sidebar.label"
+              :brand="ui.site.header.brand"
+              :links="sidenav"
+              current="item-orders"
+              :userName="ui.vibe.sidebar.userName"
+              :userEmail="ui.vibe.sidebar.userEmail"
+              width="full"
+              user="show"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.dense))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/SitemapPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/SitemapPage.vue
new file mode 100644
index 0000000..27b3599
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/SitemapPage.vue
@@ -0,0 +1,222 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The sitemap page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SitemapFooter,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+
+const SITEMAP_SIGNUP = { title: ui.vibe.sitemap.signupTitle, label: ui.vibe.sitemap.signupLabel, submit: ui.vibe.sitemap.signupSubmit } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.sitemap }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.sitemap }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-columns-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="columns"
+        >
+          <Title :as="2" size="base" weight="bold" id="sitemap-columns-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sitemap.columns }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-columns"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.vibe.sitemap.tagline"
+              :copyright="ui.vibe.sitemap.copyright"
+              :groups="sitemap"
+              :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+              :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+              layout="columns"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.columns))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-card-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="card"
+        >
+          <Title :as="2" size="base" weight="bold" id="sitemap-card-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sitemap.card }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-card"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.vibe.sitemap.tagline"
+              :copyright="ui.vibe.sitemap.copyright"
+              :groups="sitemap"
+              :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+              :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+              layout="card"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.card))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-row-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="row"
+        >
+          <Title :as="2" size="base" weight="bold" id="sitemap-row-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sitemap.row }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-row"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.vibe.sitemap.tagline"
+              :copyright="ui.vibe.sitemap.copyright"
+              :groups="sitemap"
+              :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+              :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+              layout="row"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.row))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-newsletter-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="newsletter"
+        >
+          <Title :as="2" size="base" weight="bold" id="sitemap-newsletter-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sitemap.newsletter }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-newsletter"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.vibe.sitemap.tagline"
+              :copyright="ui.vibe.sitemap.copyright"
+              :groups="sitemap"
+              :signup="{ ...SITEMAP_SIGNUP, mode: 'first' }"
+              :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+              layout="columns"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.newsletter))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-status-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="status"
+        >
+          <Title :as="2" size="base" weight="bold" id="sitemap-status-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sitemap.status }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-status"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.vibe.sitemap.tagline"
+              :copyright="ui.vibe.sitemap.copyright"
+              :groups="sitemap"
+              :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+              :status="{ label: ui.vibe.sitemap.status, mode: 'show' }"
+              layout="columns"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.status))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sitemap-compact-label"
+          data-testid="variant"
+          data-block="sitemap"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="sitemap-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sitemap.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SitemapFooter
+              id="sitemap-compact"
+              :label="ui.vibe.sitemap.label"
+              :brand="ui.site.header.brand"
+              :tagline="ui.vibe.sitemap.tagline"
+              :copyright="ui.vibe.sitemap.copyright"
+              :groups="sitemap"
+              :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+              :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+              layout="columns"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.compact))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/SkeletonPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/SkeletonPage.vue
new file mode 100644
index 0000000..a63d8a4
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/SkeletonPage.vue
@@ -0,0 +1,148 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The skeleton page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SkeletonLayout,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Line,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="dashboard">
+            {{ ui.blocks.themes.dashboard.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.skeleton }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.skeleton }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skeleton-cards-label"
+          data-testid="variant"
+          data-block="skeleton"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="skeleton-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.skeleton.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SkeletonLayout
+              id="skeleton-cards"
+              :title="ui.vibe.skeleton.title"
+              :label="ui.vibe.skeleton.label"
+              :lines="placeholders"
+              shape="cards"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skeleton-list-label"
+          data-testid="variant"
+          data-block="skeleton"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="skeleton-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.skeleton.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SkeletonLayout
+              id="skeleton-list"
+              :title="ui.vibe.skeleton.title"
+              :label="ui.vibe.skeleton.label"
+              :lines="placeholders"
+              shape="list"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skeleton-article-label"
+          data-testid="variant"
+          data-block="skeleton"
+          data-variant="article"
+        >
+          <Title :as="2" size="base" weight="bold" id="skeleton-article-label" data-testid="variant-label">
+            {{ ui.blocks.variants.skeleton.article }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SkeletonLayout
+              id="skeleton-article"
+              :title="ui.vibe.skeleton.title"
+              :label="ui.vibe.skeleton.label"
+              :lines="placeholders"
+              shape="article"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.article))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skeleton-muted-label"
+          data-testid="variant"
+          data-block="skeleton"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="skeleton-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.skeleton.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SkeletonLayout
+              id="skeleton-muted"
+              :title="ui.vibe.skeleton.title"
+              :label="ui.vibe.skeleton.label"
+              :lines="placeholders"
+              shape="cards"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/SlotsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/SlotsPage.vue
new file mode 100644
index 0000000..dffa3db
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/SlotsPage.vue
@@ -0,0 +1,150 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The slots page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SlotBoard,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Day,
+  type Zone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.slots }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.slots }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="slots-split-label"
+          data-testid="variant"
+          data-block="slots"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="slots-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.slots.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SlotBoard
+              id="slots-split"
+              :title="ui.commerce.slots.title"
+              :lead="ui.commerce.slots.lead"
+              :days="days"
+              :empty="ui.empty.days"
+              :zone="zones.find((i) => i.id === 'zone-central')!"
+              :labels="ui.commerce.slots"
+              layout="split"
+              item="card"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="slots-plain-label"
+          data-testid="variant"
+          data-block="slots"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="slots-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.slots.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SlotBoard
+              id="slots-plain"
+              :title="ui.commerce.slots.title"
+              :lead="ui.commerce.slots.lead"
+              :days="days"
+              :empty="ui.empty.days"
+              :zone="zones.find((i) => i.id === 'zone-central')!"
+              :labels="ui.commerce.slots"
+              layout="split"
+              item="plain"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.plain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="slots-stacked-label"
+          data-testid="variant"
+          data-block="slots"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="slots-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.slots.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SlotBoard
+              id="slots-stacked"
+              :title="ui.commerce.slots.title"
+              :lead="ui.commerce.slots.lead"
+              :days="days"
+              :empty="ui.empty.days"
+              :zone="zones.find((i) => i.id === 'zone-central')!"
+              :labels="ui.commerce.slots"
+              layout="stacked"
+              item="card"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.stacked))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/StatsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/StatsPage.vue
new file mode 100644
index 0000000..0d8a41a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/StatsPage.vue
@@ -0,0 +1,290 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The stats page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StatsBand,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.stats }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.stats }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-plain4-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="plain4"
+        >
+          <Title :as="2" size="base" weight="bold" id="stats-plain4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stats.plain4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-plain4"
+              :title="ui.marketing.stats.title"
+              :stats="stats"
+              :empty="ui.marketing.stats.empty"
+              cols="4"
+              layout="row"
+              surface="none"
+              item="plain"
+              align="center"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.plain4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-panel-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="panel"
+        >
+          <Title :as="2" size="base" weight="bold" id="stats-panel-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stats.panel }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-panel"
+              title=""
+              :stats="stats"
+              :empty="ui.marketing.stats.empty"
+              cols="4"
+              layout="row"
+              surface="panel"
+              item="plain"
+              align="center"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.panel))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-stack-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="stack"
+        >
+          <Title :as="2" size="base" weight="bold" id="stats-stack-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stats.stack }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-stack"
+              :title="ui.marketing.stats.title"
+              :stats="stats"
+              :empty="ui.marketing.stats.empty"
+              cols="4"
+              layout="stack"
+              surface="none"
+              item="plain"
+              align="start"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.stack))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-image-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="image"
+        >
+          <Title :as="2" size="base" weight="bold" id="stats-image-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stats.image }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-image"
+              :title="ui.marketing.stats.title"
+              :stats="stats"
+              :empty="ui.marketing.stats.empty"
+              cols="4"
+              layout="row"
+              surface="image"
+              item="plain"
+              align="center"
+              tone="default"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.image))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-cards-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="stats-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stats.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-cards"
+              :title="ui.marketing.stats.title"
+              :stats="[stats?.[0], stats?.[1], stats?.[2]]"
+              :empty="ui.marketing.stats.empty"
+              cols="3"
+              layout="row"
+              surface="none"
+              item="card"
+              align="center"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-icons-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="icons"
+        >
+          <Title :as="2" size="base" weight="bold" id="stats-icons-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stats.icons }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-icons"
+              :title="ui.marketing.stats.title"
+              :stats="stats"
+              :empty="ui.marketing.stats.empty"
+              cols="4"
+              layout="row"
+              surface="none"
+              item="icon"
+              align="start"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-muted2-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="muted2"
+        >
+          <Title :as="2" size="base" weight="bold" id="stats-muted2-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stats.muted2 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-muted2"
+              :title="ui.marketing.stats.title"
+              :stats="stats"
+              :empty="ui.marketing.stats.empty"
+              cols="2"
+              layout="row"
+              surface="none"
+              item="plain"
+              align="center"
+              tone="muted"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.muted2))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stats-cardsCompact-label"
+          data-testid="variant"
+          data-block="stats"
+          data-variant="cardsCompact"
+        >
+          <Title :as="2" size="base" weight="bold" id="stats-cardsCompact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stats.cardsCompact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StatsBand
+              id="stats-cardsCompact"
+              :title="ui.marketing.stats.title"
+              :stats="stats"
+              :empty="ui.marketing.stats.empty"
+              cols="4"
+              layout="row"
+              surface="none"
+              item="card"
+              align="center"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cardsCompact))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/StepperPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/StepperPage.vue
new file mode 100644
index 0000000..f38bd3b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/StepperPage.vue
@@ -0,0 +1,164 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The stepper page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Stepper,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+            {{ ui.blocks.themes.onboarding.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.stepper }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.stepper }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stepper-horizontal-label"
+          data-testid="variant"
+          data-block="stepper"
+          data-variant="horizontal"
+        >
+          <Title :as="2" size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stepper.horizontal }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Stepper
+              id="stepper-horizontal"
+              :title="ui.onboarding.stepper.title"
+              :steps="steps"
+              :current="2"
+              :stepLabel="ui.onboarding.stepper.stepLabel"
+              :back="ui.onboarding.stepper.back"
+              :next="ui.onboarding.stepper.next"
+              layout="horizontal"
+              marker="number"
+              summary="show"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stepper-vertical-label"
+          data-testid="variant"
+          data-block="stepper"
+          data-variant="vertical"
+        >
+          <Title :as="2" size="base" weight="bold" id="stepper-vertical-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stepper.vertical }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Stepper
+              id="stepper-vertical"
+              :title="ui.onboarding.stepper.title"
+              :steps="steps"
+              :current="2"
+              :stepLabel="ui.onboarding.stepper.stepLabel"
+              :back="ui.onboarding.stepper.back"
+              :next="ui.onboarding.stepper.next"
+              layout="vertical"
+              marker="number"
+              summary="show"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stepper-icons-label"
+          data-testid="variant"
+          data-block="stepper"
+          data-variant="icons"
+        >
+          <Title :as="2" size="base" weight="bold" id="stepper-icons-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stepper.icons }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Stepper
+              id="stepper-icons"
+              :title="ui.onboarding.stepper.title"
+              :steps="steps"
+              :current="2"
+              :stepLabel="ui.onboarding.stepper.stepLabel"
+              :back="ui.onboarding.stepper.back"
+              :next="ui.onboarding.stepper.next"
+              layout="horizontal"
+              marker="icon"
+              summary="show"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.icons))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="stepper-bare-label"
+          data-testid="variant"
+          data-block="stepper"
+          data-variant="bare"
+        >
+          <Title :as="2" size="base" weight="bold" id="stepper-bare-label" data-testid="variant-label">
+            {{ ui.blocks.variants.stepper.bare }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <Stepper
+              id="stepper-bare"
+              :title="ui.onboarding.stepper.title"
+              :steps="steps"
+              :current="2"
+              :stepLabel="ui.onboarding.stepper.stepLabel"
+              :back="ui.onboarding.stepper.back"
+              :next="ui.onboarding.stepper.next"
+              layout="vertical"
+              marker="icon"
+              summary="hide"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.bare))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/StepsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/StepsPage.vue
new file mode 100644
index 0000000..a3cbefa
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/StepsPage.vue
@@ -0,0 +1,214 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The steps page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StepsList,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.steps }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.steps }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-row-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="row"
+        >
+          <Title :as="2" size="base" weight="bold" id="steps-row-label" data-testid="variant-label">
+            {{ ui.blocks.variants.steps.row }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-row"
+              :title="ui.marketing.steps.title"
+              :steps="steps"
+              :empty="ui.empty.steps"
+              layout="row"
+              marker="number"
+              align="start"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.row))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-rowIcons-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="rowIcons"
+        >
+          <Title :as="2" size="base" weight="bold" id="steps-rowIcons-label" data-testid="variant-label">
+            {{ ui.blocks.variants.steps.rowIcons }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-rowIcons"
+              :title="ui.marketing.steps.title"
+              :steps="steps"
+              :empty="ui.empty.steps"
+              layout="row"
+              marker="icon"
+              align="start"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-column-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="column"
+        >
+          <Title :as="2" size="base" weight="bold" id="steps-column-label" data-testid="variant-label">
+            {{ ui.blocks.variants.steps.column }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-column"
+              :title="ui.marketing.steps.title"
+              :steps="steps"
+              :empty="ui.empty.steps"
+              layout="column"
+              marker="number"
+              align="start"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-centered-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="centered"
+        >
+          <Title :as="2" size="base" weight="bold" id="steps-centered-label" data-testid="variant-label">
+            {{ ui.blocks.variants.steps.centered }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-centered"
+              :title="ui.marketing.steps.title"
+              :steps="steps"
+              :empty="ui.empty.steps"
+              layout="row"
+              marker="number"
+              align="center"
+              tone="muted"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.centered))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-columnIcons-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="columnIcons"
+        >
+          <Title :as="2" size="base" weight="bold" id="steps-columnIcons-label" data-testid="variant-label">
+            {{ ui.blocks.variants.steps.columnIcons }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-columnIcons"
+              :title="ui.marketing.steps.title"
+              :steps="steps"
+              :empty="ui.empty.steps"
+              layout="column"
+              marker="icon"
+              align="start"
+              tone="default"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.columnIcons))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="steps-compact-label"
+          data-testid="variant"
+          data-block="steps"
+          data-variant="compact"
+        >
+          <Title :as="2" size="base" weight="bold" id="steps-compact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.steps.compact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StepsList
+              id="steps-compact"
+              :title="ui.marketing.steps.title"
+              :steps="steps"
+              :empty="ui.empty.steps"
+              layout="row"
+              marker="number"
+              align="start"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.compact))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/StickyPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/StickyPage.vue
new file mode 100644
index 0000000..49c6d20
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/StickyPage.vue
@@ -0,0 +1,160 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The sticky page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FeatureSticky,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.sticky }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.sticky }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sticky-end-label"
+          data-testid="variant"
+          data-block="sticky"
+          data-variant="end"
+        >
+          <Title :as="2" size="base" weight="bold" id="sticky-end-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sticky.end }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSticky
+              id="sticky-end"
+              :title="ui.vibe.sticky.title"
+              :features="features"
+              :empty="ui.empty.features"
+              active="feature-clear"
+              mediaSide="end"
+              item="plain"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sticky-start-label"
+          data-testid="variant"
+          data-block="sticky"
+          data-variant="start"
+        >
+          <Title :as="2" size="base" weight="bold" id="sticky-start-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sticky.start }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSticky
+              id="sticky-start"
+              :title="ui.vibe.sticky.title"
+              :features="features"
+              :empty="ui.empty.features"
+              active="feature-clear"
+              mediaSide="start"
+              item="plain"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.start))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sticky-card-label"
+          data-testid="variant"
+          data-block="sticky"
+          data-variant="card"
+        >
+          <Title :as="2" size="base" weight="bold" id="sticky-card-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sticky.card }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSticky
+              id="sticky-card"
+              :title="ui.vibe.sticky.title"
+              :features="features"
+              :empty="ui.empty.features"
+              active="feature-clear"
+              mediaSide="end"
+              item="card"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="sticky-muted-label"
+          data-testid="variant"
+          data-block="sticky"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="sticky-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.sticky.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <FeatureSticky
+              id="sticky-muted"
+              :title="ui.vibe.sticky.title"
+              :features="features"
+              :empty="ui.empty.features"
+              active="feature-clear"
+              mediaSide="end"
+              item="plain"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/StoreheroPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/StoreheroPage.vue
new file mode 100644
index 0000000..e78f2b6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/StoreheroPage.vue
@@ -0,0 +1,176 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The storehero page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoreHero,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+const STOREHERO_ACTIONS = {
+  mode: "two",
+  cta: ui.commerce.storeHero.cta,
+  href: "#/catalog",
+  secondary: ui.commerce.storeHero.secondary,
+  secondaryHref: "#/delivery",
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.storehero }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.storehero }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storehero-overlay-label"
+          data-testid="variant"
+          data-block="storehero"
+          data-variant="overlay"
+        >
+          <Title :as="2" size="base" weight="bold" id="storehero-overlay-label" data-testid="variant-label">
+            {{ ui.blocks.variants.storehero.overlay }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreHero
+              id="storehero-overlay"
+              :title="ui.commerce.storeHero.title"
+              :lead="ui.commerce.storeHero.lead"
+              :badge="ui.commerce.storeHero.badge"
+              :perks="perks"
+              :card="ui.commerce.storeHero.card"
+              :actions="STOREHERO_ACTIONS"
+              layout="overlay"
+              mediaSide="end"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlay))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storehero-overlayStart-label"
+          data-testid="variant"
+          data-block="storehero"
+          data-variant="overlayStart"
+        >
+          <Title :as="2" size="base" weight="bold" id="storehero-overlayStart-label" data-testid="variant-label">
+            {{ ui.blocks.variants.storehero.overlayStart }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreHero
+              id="storehero-overlayStart"
+              :title="ui.commerce.storeHero.title"
+              :lead="ui.commerce.storeHero.lead"
+              :badge="ui.commerce.storeHero.badge"
+              :perks="perks"
+              :card="ui.commerce.storeHero.card"
+              :actions="STOREHERO_ACTIONS"
+              layout="overlay"
+              mediaSide="start"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlayStart))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storehero-backdrop-label"
+          data-testid="variant"
+          data-block="storehero"
+          data-variant="backdrop"
+        >
+          <Title :as="2" size="base" weight="bold" id="storehero-backdrop-label" data-testid="variant-label">
+            {{ ui.blocks.variants.storehero.backdrop }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreHero
+              id="storehero-backdrop"
+              :title="ui.commerce.storeHero.title"
+              :lead="ui.commerce.storeHero.lead"
+              :badge="ui.commerce.storeHero.badge"
+              :perks="perks"
+              :card="ui.commerce.storeHero.card"
+              :actions="STOREHERO_ACTIONS"
+              layout="backdrop"
+              mediaSide="end"
+              tone="default"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.backdrop))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storehero-muted-label"
+          data-testid="variant"
+          data-block="storehero"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="storehero-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.storehero.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoreHero
+              id="storehero-muted"
+              :title="ui.commerce.storeHero.title"
+              :lead="ui.commerce.storeHero.lead"
+              :badge="ui.commerce.storeHero.badge"
+              :perks="perks"
+              :card="ui.commerce.storeHero.card"
+              :actions="{ ...STOREHERO_ACTIONS, mode: 'one' }"
+              layout="overlay"
+              mediaSide="end"
+              tone="muted"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/StorytabsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/StorytabsPage.vue
new file mode 100644
index 0000000..6688f84
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/StorytabsPage.vue
@@ -0,0 +1,136 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The storytabs page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoryTabs,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+            {{ ui.blocks.themes.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.storytabs }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.storytabs }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storytabs-yearTabs-label"
+          data-testid="variant"
+          data-block="storytabs"
+          data-variant="yearTabs"
+        >
+          <Title :as="2" size="base" weight="bold" id="storytabs-yearTabs-label" data-testid="variant-label">
+            {{ ui.blocks.variants.storytabs.yearTabs }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoryTabs
+              id="storytabs-yearTabs"
+              :title="ui.company.storyTabs.title"
+              :lead="ui.company.storyTabs.lead"
+              :badge="ui.company.storyTabs.badge"
+              :steps="milestones"
+              :empty="ui.empty.milestones"
+              active="milestone-runtimes"
+              :labels="ui.company.storyTabs.labels"
+              layout="years"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storytabs-carouselSplit-label"
+          data-testid="variant"
+          data-block="storytabs"
+          data-variant="carouselSplit"
+        >
+          <Title :as="2" size="base" weight="bold" id="storytabs-carouselSplit-label" data-testid="variant-label">
+            {{ ui.blocks.variants.storytabs.carouselSplit }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoryTabs
+              id="storytabs-carouselSplit"
+              :title="ui.company.storyTabs.title"
+              :lead="ui.company.storyTabs.lead"
+              :badge="ui.company.storyTabs.badge"
+              :steps="milestones"
+              :empty="ui.empty.milestones"
+              active="milestone-runtimes"
+              :labels="ui.company.storyTabs.labels"
+              layout="carousel"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.carouselSplit))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="storytabs-yearTabsMuted-label"
+          data-testid="variant"
+          data-block="storytabs"
+          data-variant="yearTabsMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="storytabs-yearTabsMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.storytabs.yearTabsMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <StoryTabs
+              id="storytabs-yearTabsMuted"
+              :title="ui.company.storyTabs.title"
+              :lead="ui.company.storyTabs.lead"
+              :badge="ui.company.storyTabs.badge"
+              :steps="milestones"
+              :empty="ui.empty.milestones"
+              active="milestone-runtimes"
+              :labels="ui.company.storyTabs.labels"
+              layout="years"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabsMuted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/SummaryPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/SummaryPage.vue
new file mode 100644
index 0000000..04ddb0d
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/SummaryPage.vue
@@ -0,0 +1,170 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The summary page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  OrderSummary,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.summary }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.summary }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="summary-card-label"
+          data-testid="variant"
+          data-block="summary"
+          data-variant="card"
+        >
+          <Title :as="2" size="base" weight="bold" id="summary-card-label" data-testid="variant-label">
+            {{ ui.blocks.variants.summary.card }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderSummary
+              id="summary-card"
+              :title="ui.commerce.summary.title"
+              :rows="summary"
+              :empty="ui.empty.summary"
+              :labels="ui.commerce.summary"
+              layout="card"
+              cta="show"
+              note="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="summary-plain-label"
+          data-testid="variant"
+          data-block="summary"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="summary-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.summary.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderSummary
+              id="summary-plain"
+              :title="ui.commerce.summary.title"
+              :rows="summary"
+              :empty="ui.empty.summary"
+              :labels="ui.commerce.summary"
+              layout="plain"
+              cta="show"
+              note="hide"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.plain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="summary-noCta-label"
+          data-testid="variant"
+          data-block="summary"
+          data-variant="noCta"
+        >
+          <Title :as="2" size="base" weight="bold" id="summary-noCta-label" data-testid="variant-label">
+            {{ ui.blocks.variants.summary.noCta }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderSummary
+              id="summary-noCta"
+              :title="ui.commerce.summary.title"
+              :rows="summary"
+              :empty="ui.empty.summary"
+              :labels="ui.commerce.summary"
+              layout="card"
+              cta="hide"
+              note="show"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.noCta))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="summary-muted-label"
+          data-testid="variant"
+          data-block="summary"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="summary-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.summary.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <OrderSummary
+              id="summary-muted"
+              :title="ui.commerce.summary.title"
+              :rows="summary"
+              :empty="ui.empty.summary"
+              :labels="ui.commerce.summary"
+              layout="card"
+              cta="show"
+              note="show"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/TeamPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/TeamPage.vue
new file mode 100644
index 0000000..921e9ea
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/TeamPage.vue
@@ -0,0 +1,228 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The team page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TeamGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Member,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.team }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.team }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-cards4-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="cards4"
+        >
+          <Title :as="2" size="base" weight="bold" id="team-cards4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.team.cards4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-cards4"
+              :title="ui.company.team.title"
+              :lead="ui.company.team.lead"
+              :members="members"
+              :empty="ui.empty.members"
+              :depts="ui.company.depts"
+              layout="cards"
+              cols="1-4"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-cards3-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="cards3"
+        >
+          <Title :as="2" size="base" weight="bold" id="team-cards3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.team.cards3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-cards3"
+              :title="ui.company.team.title"
+              :lead="ui.company.team.lead"
+              :members="members"
+              :empty="ui.empty.members"
+              :depts="ui.company.depts"
+              layout="cards"
+              cols="1-3"
+              tone="muted"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-minimal-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="minimal"
+        >
+          <Title :as="2" size="base" weight="bold" id="team-minimal-label" data-testid="variant-label">
+            {{ ui.blocks.variants.team.minimal }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-minimal"
+              :title="ui.company.team.title"
+              :lead="ui.company.team.lead"
+              :members="members"
+              :empty="ui.empty.members"
+              :depts="ui.company.depts"
+              layout="minimal"
+              cols="1-4"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.minimal))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-detailed-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="detailed"
+        >
+          <Title :as="2" size="base" weight="bold" id="team-detailed-label" data-testid="variant-label">
+            {{ ui.blocks.variants.team.detailed }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-detailed"
+              :title="ui.company.team.title"
+              :lead="ui.company.team.lead"
+              :members="members"
+              :empty="ui.empty.members"
+              :depts="ui.company.depts"
+              layout="detailed"
+              cols="1-3"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.detailed))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-list-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="team-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.team.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-list"
+              :title="ui.company.team.title"
+              :lead="ui.company.team.lead"
+              :members="members"
+              :empty="ui.empty.members"
+              :depts="ui.company.depts"
+              layout="list"
+              cols="1-4"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="team-directory-label"
+          data-testid="variant"
+          data-block="team"
+          data-variant="directory"
+        >
+          <Title :as="2" size="base" weight="bold" id="team-directory-label" data-testid="variant-label">
+            {{ ui.blocks.variants.team.directory }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TeamGrid
+              id="team-directory"
+              :title="ui.company.team.title"
+              :lead="ui.company.team.lead"
+              :members="members"
+              :empty="ui.empty.members"
+              :depts="ui.company.depts"
+              layout="directory"
+              cols="1-4"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.directory))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/TemplatesPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/TemplatesPage.vue
new file mode 100644
index 0000000..b63a35c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/TemplatesPage.vue
@@ -0,0 +1,174 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The templates page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TemplateGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Filter,
+  type Template,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+const TEMPLATES_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "views": "metadata.views.value|compact",
+  "likes": "metadata.likes.value|compact",
+  "topic": "metadata.topic.value",
+} as const;
+const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.templates }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.templates }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="templates-grid4-label"
+          data-testid="variant"
+          data-block="templates"
+          data-variant="grid4"
+        >
+          <Title :as="2" size="base" weight="bold" id="templates-grid4-label" data-testid="variant-label">
+            {{ ui.blocks.variants.templates.grid4 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TemplateGrid
+              id="templates-grid4"
+              :title="ui.vibe.templates.title"
+              :templates="templates"
+              :filters="templateFilters"
+              :labels="ui.vibe.templates"
+              browseHref="#/"
+              :empty="ui.empty.templates"
+              cols="1-4"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="templates-grid3-label"
+          data-testid="variant"
+          data-block="templates"
+          data-variant="grid3"
+        >
+          <Title :as="2" size="base" weight="bold" id="templates-grid3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.templates.grid3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TemplateGrid
+              id="templates-grid3"
+              :title="ui.vibe.templates.title"
+              :templates="templates"
+              :filters="templateFilters"
+              :labels="ui.vibe.templates"
+              browseHref="#/"
+              :empty="ui.empty.templates"
+              cols="1-3"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="templates-muted-label"
+          data-testid="variant"
+          data-block="templates"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="templates-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.templates.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TemplateGrid
+              id="templates-muted"
+              :title="ui.vibe.templates.title"
+              :templates="templates"
+              :filters="templateFilters"
+              :labels="ui.vibe.templates"
+              browseHref="#/"
+              :empty="ui.empty.templates"
+              cols="1-4"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.muted))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="templates-roomy-label"
+          data-testid="variant"
+          data-block="templates"
+          data-variant="roomy"
+        >
+          <Title :as="2" size="base" weight="bold" id="templates-roomy-label" data-testid="variant-label">
+            {{ ui.blocks.variants.templates.roomy }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TemplateGrid
+              id="templates-roomy"
+              :title="ui.vibe.templates.title"
+              :templates="templates"
+              :filters="templateFilters"
+              :labels="ui.vibe.templates"
+              browseHref="#/"
+              :empty="ui.empty.templates"
+              cols="1-4"
+              tone="default"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.roomy))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/TestimonialsPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/TestimonialsPage.vue
new file mode 100644
index 0000000..deaf842
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/TestimonialsPage.vue
@@ -0,0 +1,344 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The testimonials page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TestimonialGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Quote,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+const TESTIMONIALS_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.testimonials }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.testimonials }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-grid3-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="grid3"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-grid3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.grid3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-grid3"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="grid"
+              cols="1-3"
+              :item="{ kind: 'card', avatar: 'image', rating: 'show', mark: 'none' }"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-masonry-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="masonry"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-masonry-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.masonry }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-masonry"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="masonry"
+              cols="1-3"
+              :item="{ kind: 'card', avatar: 'image', rating: 'hide', mark: 'none' }"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-strip-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="strip"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-strip-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.strip }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-strip"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="strip"
+              cols="1-3"
+              :item="{ kind: 'card', avatar: 'none', rating: 'show', mark: 'none' }"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-social-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="social"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-social-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.social }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-social"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="masonry"
+              cols="1-3"
+              :item="{ kind: 'social', avatar: 'image', rating: 'hide', mark: 'none' }"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.social))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-featured-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="featured"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-featured-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.featured }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-featured"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="single"
+              cols="1-3"
+              :item="{ kind: 'plain', avatar: 'image', rating: 'hide', mark: 'icon' }"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-grid2-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="grid2"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-grid2-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.grid2 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-grid2"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="grid"
+              cols="1-2"
+              :item="{ kind: 'card', avatar: 'image', rating: 'show', mark: 'none' }"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid2))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-single-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="single"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-single-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.single }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-single"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="single"
+              cols="1-3"
+              :item="{ kind: 'plain', avatar: 'image', rating: 'hide', mark: 'none' }"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-stack-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="stack"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-stack-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.stack }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-stack"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="stack"
+              cols="1-3"
+              :item="{ kind: 'card', avatar: 'none', rating: 'show', mark: 'none' }"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.stack))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-plain-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-plain"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="grid"
+              cols="1-3"
+              :item="{ kind: 'plain', avatar: 'none', rating: 'show', mark: 'none' }"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.plain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="testimonials-noRating-label"
+          data-testid="variant"
+          data-block="testimonials"
+          data-variant="noRating"
+        >
+          <Title :as="2" size="base" weight="bold" id="testimonials-noRating-label" data-testid="variant-label">
+            {{ ui.blocks.variants.testimonials.noRating }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TestimonialGrid
+              id="testimonials-noRating"
+              :title="ui.marketing.testimonials.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :labels="TESTIMONIALS_LABELS"
+              layout="grid"
+              cols="1-3"
+              :item="{ kind: 'card', avatar: 'image', rating: 'hide', mark: 'none' }"
+              tone="default"
+              density="roomy"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.noRating))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/TimelinePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/TimelinePage.vue
new file mode 100644
index 0000000..dabdb88
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/TimelinePage.vue
@@ -0,0 +1,156 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The timeline page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MilestoneTimeline,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="content">
+            {{ ui.blocks.themes.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.timeline }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.timeline }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="timeline-split-label"
+          data-testid="variant"
+          data-block="timeline"
+          data-variant="split"
+        >
+          <Title :as="2" size="base" weight="bold" id="timeline-split-label" data-testid="variant-label">
+            {{ ui.blocks.variants.timeline.split }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MilestoneTimeline
+              id="timeline-split"
+              :title="ui.company.timeline.title"
+              :lead="ui.company.timeline.lead"
+              :milestones="milestones"
+              :empty="ui.empty.milestones"
+              layout="split"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="timeline-stacked-label"
+          data-testid="variant"
+          data-block="timeline"
+          data-variant="stacked"
+        >
+          <Title :as="2" size="base" weight="bold" id="timeline-stacked-label" data-testid="variant-label">
+            {{ ui.blocks.variants.timeline.stacked }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MilestoneTimeline
+              id="timeline-stacked"
+              :title="ui.company.timeline.title"
+              :lead="ui.company.timeline.lead"
+              :milestones="milestones"
+              :empty="ui.empty.milestones"
+              layout="stacked"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.stacked))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="timeline-row-label"
+          data-testid="variant"
+          data-block="timeline"
+          data-variant="row"
+        >
+          <Title :as="2" size="base" weight="bold" id="timeline-row-label" data-testid="variant-label">
+            {{ ui.blocks.variants.timeline.row }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MilestoneTimeline
+              id="timeline-row"
+              :title="ui.company.timeline.title"
+              :lead="ui.company.timeline.lead"
+              :milestones="milestones"
+              :empty="ui.empty.milestones"
+              layout="row"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.row))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="timeline-rowMuted-label"
+          data-testid="variant"
+          data-block="timeline"
+          data-variant="rowMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="timeline-rowMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.timeline.rowMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <MilestoneTimeline
+              id="timeline-rowMuted"
+              :title="ui.company.timeline.title"
+              :lead="ui.company.timeline.lead"
+              :milestones="milestones"
+              :empty="ui.empty.milestones"
+              layout="row"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.rowMuted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/TourPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/TourPage.vue
new file mode 100644
index 0000000..bf89ac0
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/TourPage.vue
@@ -0,0 +1,157 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The tour page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  TourCallout,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+            {{ ui.blocks.themes.onboarding.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.tour }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.tour }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="tour-below-label"
+          data-testid="variant"
+          data-block="tour"
+          data-variant="below"
+        >
+          <Title :as="2" size="base" weight="bold" id="tour-below-label" data-testid="variant-label">
+            {{ ui.blocks.variants.tour.below }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TourCallout
+              id="tour-below"
+              :title="ui.vibe.tour.title"
+              :text="ui.vibe.tour.text"
+              :target="ui.vibe.tour.target"
+              :position="ui.vibe.tour.position"
+              :skip="ui.vibe.tour.skip"
+              :next="ui.vibe.tour.next"
+              placement="below"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="tour-above-label"
+          data-testid="variant"
+          data-block="tour"
+          data-variant="above"
+        >
+          <Title :as="2" size="base" weight="bold" id="tour-above-label" data-testid="variant-label">
+            {{ ui.blocks.variants.tour.above }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TourCallout
+              id="tour-above"
+              :title="ui.vibe.tour.title"
+              :text="ui.vibe.tour.text"
+              :target="ui.vibe.tour.target"
+              :position="ui.vibe.tour.position"
+              :skip="ui.vibe.tour.skip"
+              :next="ui.vibe.tour.next"
+              placement="above"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="tour-end-label"
+          data-testid="variant"
+          data-block="tour"
+          data-variant="end"
+        >
+          <Title :as="2" size="base" weight="bold" id="tour-end-label" data-testid="variant-label">
+            {{ ui.blocks.variants.tour.end }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TourCallout
+              id="tour-end"
+              :title="ui.vibe.tour.title"
+              :text="ui.vibe.tour.text"
+              :target="ui.vibe.tour.target"
+              :position="ui.vibe.tour.position"
+              :skip="ui.vibe.tour.skip"
+              :next="ui.vibe.tour.next"
+              placement="end"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="tour-muted-label"
+          data-testid="variant"
+          data-block="tour"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="tour-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.tour.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <TourCallout
+              id="tour-muted"
+              :title="ui.vibe.tour.title"
+              :text="ui.vibe.tour.text"
+              :target="ui.vibe.tour.target"
+              :position="ui.vibe.tour.position"
+              :skip="ui.vibe.tour.skip"
+              :next="ui.vibe.tour.next"
+              placement="below"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/UsagePage.vue b/apps/host-vue/xgen/screens/BlocksScreen/UsagePage.vue
new file mode 100644
index 0000000..10b13e6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/UsagePage.vue
@@ -0,0 +1,163 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The usage page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  UsageCalculator,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const USAGE_SLIDER = { min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit } as const;
+const USAGE_PRICE = { rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.usage }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.usage }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usage-card-label"
+          data-testid="variant"
+          data-block="usage"
+          data-variant="card"
+        >
+          <Title :as="2" size="base" weight="bold" id="usage-card-label" data-testid="variant-label">
+            {{ ui.blocks.variants.usage.card }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UsageCalculator
+              id="usage-card"
+              :title="ui.vibe.usage.title"
+              :text="ui.vibe.usage.text"
+              :usage="5000"
+              :slider="USAGE_SLIDER"
+              :price="USAGE_PRICE"
+              :cta="ui.vibe.usage.cta"
+              href="#/"
+              layout="card"
+              ends="show"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usage-plain-label"
+          data-testid="variant"
+          data-block="usage"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="usage-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.usage.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UsageCalculator
+              id="usage-plain"
+              :title="ui.vibe.usage.title"
+              :text="ui.vibe.usage.text"
+              :usage="5000"
+              :slider="USAGE_SLIDER"
+              :price="USAGE_PRICE"
+              :cta="ui.vibe.usage.cta"
+              href="#/"
+              layout="plain"
+              ends="show"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.plain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usage-noEnds-label"
+          data-testid="variant"
+          data-block="usage"
+          data-variant="noEnds"
+        >
+          <Title :as="2" size="base" weight="bold" id="usage-noEnds-label" data-testid="variant-label">
+            {{ ui.blocks.variants.usage.noEnds }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UsageCalculator
+              id="usage-noEnds"
+              :title="ui.vibe.usage.title"
+              :text="ui.vibe.usage.text"
+              :usage="5000"
+              :slider="USAGE_SLIDER"
+              :price="USAGE_PRICE"
+              :cta="ui.vibe.usage.cta"
+              href="#/"
+              layout="card"
+              ends="hide"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.noEnds))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usage-muted-label"
+          data-testid="variant"
+          data-block="usage"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="usage-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.usage.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UsageCalculator
+              id="usage-muted"
+              :title="ui.vibe.usage.title"
+              :text="ui.vibe.usage.text"
+              :usage="5000"
+              :slider="USAGE_SLIDER"
+              :price="USAGE_PRICE"
+              :cta="ui.vibe.usage.cta"
+              href="#/"
+              layout="card"
+              ends="show"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/UspPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/UspPage.vue
new file mode 100644
index 0000000..bde986c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/UspPage.vue
@@ -0,0 +1,173 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The usp page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.usp }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.usp }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-strip-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="strip"
+        >
+          <Title :as="2" size="base" weight="bold" id="usp-strip-label" data-testid="variant-label">
+            {{ ui.blocks.variants.usp.strip }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-strip"
+              :perks="perks"
+              :empty="ui.empty.perks"
+              layout="strip"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-cards-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="usp-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.usp.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-cards"
+              :perks="perks"
+              :empty="ui.empty.perks"
+              layout="cards"
+              tone="default"
+              density="default"
+              :title="ui.commerce.usp.title"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-stripCompact-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="stripCompact"
+        >
+          <Title :as="2" size="base" weight="bold" id="usp-stripCompact-label" data-testid="variant-label">
+            {{ ui.blocks.variants.usp.stripCompact }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-stripCompact"
+              :perks="perks"
+              :empty="ui.empty.perks"
+              layout="strip"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.stripCompact))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-bar-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="bar"
+        >
+          <Title :as="2" size="base" weight="bold" id="usp-bar-label" data-testid="variant-label">
+            {{ ui.blocks.variants.usp.bar }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-bar"
+              :perks="perks"
+              :empty="ui.empty.perks"
+              layout="bar"
+              tone="default"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.bar))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="usp-barMuted-label"
+          data-testid="variant"
+          data-block="usp"
+          data-variant="barMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="usp-barMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.usp.barMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <UspStrip
+              id="usp-barMuted"
+              :perks="perks"
+              :empty="ui.empty.perks"
+              layout="bar"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.barMuted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/VideomodalPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/VideomodalPage.vue
new file mode 100644
index 0000000..e159677
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/VideomodalPage.vue
@@ -0,0 +1,164 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The videomodal page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  VideoModal,
+  tpl,
+  uniqLabel,
+  type Chapter,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="onboarding">
+            {{ ui.blocks.themes.onboarding.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.videomodal }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.videomodal }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videomodal-default-label"
+          data-testid="variant"
+          data-block="videomodal"
+          data-variant="default"
+        >
+          <Title :as="2" size="base" weight="bold" id="videomodal-default-label" data-testid="variant-label">
+            {{ ui.blocks.variants.videomodal.default }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoModal
+              id="videomodal-default"
+              :title="ui.vibe.modal.title"
+              :text="ui.vibe.modal.text"
+              :close="ui.vibe.modal.close"
+              :play="ui.vibe.modal.play"
+              :chaptersTitle="ui.vibe.modal.chapters"
+              :chapters="chapters"
+              size="default"
+              outline="none"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videomodal-wide-label"
+          data-testid="variant"
+          data-block="videomodal"
+          data-variant="wide"
+        >
+          <Title :as="2" size="base" weight="bold" id="videomodal-wide-label" data-testid="variant-label">
+            {{ ui.blocks.variants.videomodal.wide }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoModal
+              id="videomodal-wide"
+              :title="ui.vibe.modal.title"
+              :text="ui.vibe.modal.text"
+              :close="ui.vibe.modal.close"
+              :play="ui.vibe.modal.play"
+              :chaptersTitle="ui.vibe.modal.chapters"
+              :chapters="chapters"
+              size="wide"
+              outline="none"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.wide))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videomodal-chapters-label"
+          data-testid="variant"
+          data-block="videomodal"
+          data-variant="chapters"
+        >
+          <Title :as="2" size="base" weight="bold" id="videomodal-chapters-label" data-testid="variant-label">
+            {{ ui.blocks.variants.videomodal.chapters }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoModal
+              id="videomodal-chapters"
+              :title="ui.vibe.modal.title"
+              :text="ui.vibe.modal.text"
+              :close="ui.vibe.modal.close"
+              :play="ui.vibe.modal.play"
+              :chaptersTitle="ui.vibe.modal.chapters"
+              :chapters="chapters"
+              size="default"
+              outline="chapters"
+              tone="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videomodal-muted-label"
+          data-testid="variant"
+          data-block="videomodal"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="videomodal-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.videomodal.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoModal
+              id="videomodal-muted"
+              :title="ui.vibe.modal.title"
+              :text="ui.vibe.modal.text"
+              :close="ui.vibe.modal.close"
+              :play="ui.vibe.modal.play"
+              :chaptersTitle="ui.vibe.modal.chapters"
+              :chapters="chapters"
+              size="default"
+              outline="none"
+              tone="muted"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/VideosPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/VideosPage.vue
new file mode 100644
index 0000000..938925a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/VideosPage.vue
@@ -0,0 +1,174 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The videos page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type Quote,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="marketing">
+            {{ ui.blocks.themes.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.videos }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.videos }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videos-grid3-label"
+          data-testid="variant"
+          data-block="videos"
+          data-variant="grid3"
+        >
+          <Title :as="2" size="base" weight="bold" id="videos-grid3-label" data-testid="variant-label">
+            {{ ui.blocks.variants.videos.grid3 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoGrid
+              id="videos-grid3"
+              :title="ui.vibe.videos.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :playLabel="ui.vibe.videos.play"
+              :byLine="ui.testimonials.byLine"
+              cols="1-3"
+              caption="below"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videos-grid2-label"
+          data-testid="variant"
+          data-block="videos"
+          data-variant="grid2"
+        >
+          <Title :as="2" size="base" weight="bold" id="videos-grid2-label" data-testid="variant-label">
+            {{ ui.blocks.variants.videos.grid2 }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoGrid
+              id="videos-grid2"
+              :title="ui.vibe.videos.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :playLabel="ui.vibe.videos.play"
+              :byLine="ui.testimonials.byLine"
+              cols="1-2"
+              caption="below"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid2))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videos-overlay-label"
+          data-testid="variant"
+          data-block="videos"
+          data-variant="overlay"
+        >
+          <Title :as="2" size="base" weight="bold" id="videos-overlay-label" data-testid="variant-label">
+            {{ ui.blocks.variants.videos.overlay }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoGrid
+              id="videos-overlay"
+              :title="ui.vibe.videos.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :playLabel="ui.vibe.videos.play"
+              :byLine="ui.testimonials.byLine"
+              cols="1-3"
+              caption="overlay"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="videos-muted-label"
+          data-testid="variant"
+          data-block="videos"
+          data-variant="muted"
+        >
+          <Title :as="2" size="base" weight="bold" id="videos-muted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.videos.muted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <VideoGrid
+              id="videos-muted"
+              :title="ui.vibe.videos.title"
+              :quotes="testimonials"
+              :empty="ui.empty.quotes"
+              :playLabel="ui.vibe.videos.play"
+              :byLine="ui.testimonials.byLine"
+              cols="1-3"
+              caption="below"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.muted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/WizardPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/WizardPage.vue
new file mode 100644
index 0000000..b074530
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/WizardPage.vue
@@ -0,0 +1,163 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The wizard page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SignupWizard,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type WizardStep,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+const WIZARD_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "icon": "metadata.icon.value",
+  "fieldA": "metadata.fieldA.value",
+  "fieldB": "metadata.fieldB.value",
+} as const;
+
+const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="account">
+            {{ ui.blocks.themes.account.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.wizard }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.wizard }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="wizard-bar-label"
+          data-testid="variant"
+          data-block="wizard"
+          data-variant="bar"
+        >
+          <Title :as="2" size="base" weight="bold" id="wizard-bar-label" data-testid="variant-label">
+            {{ ui.blocks.variants.wizard.bar }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SignupWizard
+              id="wizard-bar"
+              :title="ui.vibe.wizard.title"
+              :steps="wizard"
+              :labels="ui.vibe.wizard.labels"
+              :current="1"
+              progress="bar"
+              layout="card"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="wizard-list-label"
+          data-testid="variant"
+          data-block="wizard"
+          data-variant="list"
+        >
+          <Title :as="2" size="base" weight="bold" id="wizard-list-label" data-testid="variant-label">
+            {{ ui.blocks.variants.wizard.list }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SignupWizard
+              id="wizard-list"
+              :title="ui.vibe.wizard.title"
+              :steps="wizard"
+              :labels="ui.vibe.wizard.labels"
+              :current="1"
+              progress="list"
+              layout="card"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="wizard-plain-label"
+          data-testid="variant"
+          data-block="wizard"
+          data-variant="plain"
+        >
+          <Title :as="2" size="base" weight="bold" id="wizard-plain-label" data-testid="variant-label">
+            {{ ui.blocks.variants.wizard.plain }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SignupWizard
+              id="wizard-plain"
+              :title="ui.vibe.wizard.title"
+              :steps="wizard"
+              :labels="ui.vibe.wizard.labels"
+              :current="1"
+              progress="bar"
+              layout="plain"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.plain))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="wizard-second-label"
+          data-testid="variant"
+          data-block="wizard"
+          data-variant="second"
+        >
+          <Title :as="2" size="base" weight="bold" id="wizard-second-label" data-testid="variant-label">
+            {{ ui.blocks.variants.wizard.second }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <SignupWizard
+              id="wizard-second"
+              :title="ui.vibe.wizard.title"
+              :steps="wizard"
+              :labels="ui.vibe.wizard.labels"
+              :current="2"
+              progress="list"
+              layout="plain"
+              :level="2"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.second))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/BlocksScreen/ZonesPage.vue b/apps/host-vue/xgen/screens/BlocksScreen/ZonesPage.vue
new file mode 100644
index 0000000..1e58cf1
--- /dev/null
+++ b/apps/host-vue/xgen/screens/BlocksScreen/ZonesPage.vue
@@ -0,0 +1,143 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/blocks.json -->
+<!-- The zones page of BlocksScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  ZoneTable,
+  tpl,
+  uniqLabel,
+  type Zone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.blocks.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="block-theme" data-theme-id="commerce">
+            {{ ui.blocks.themes.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="block-title">
+            {{ ui.blocks.names.zones }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.blocks.docs.zones }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="zones-table-label"
+          data-testid="variant"
+          data-block="zones"
+          data-variant="table"
+        >
+          <Title :as="2" size="base" weight="bold" id="zones-table-label" data-testid="variant-label">
+            {{ ui.blocks.variants.zones.table }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ZoneTable
+              id="zones-table"
+              :title="ui.commerce.zones.title"
+              :lead="ui.commerce.zones.lead"
+              :zones="zones"
+              :empty="ui.empty.zones"
+              :labels="ui.commerce.zones"
+              layout="table"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="zones-cards-label"
+          data-testid="variant"
+          data-block="zones"
+          data-variant="cards"
+        >
+          <Title :as="2" size="base" weight="bold" id="zones-cards-label" data-testid="variant-label">
+            {{ ui.blocks.variants.zones.cards }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ZoneTable
+              id="zones-cards"
+              :title="ui.commerce.zones.title"
+              :lead="ui.commerce.zones.lead"
+              :zones="zones"
+              :empty="ui.empty.zones"
+              :labels="ui.commerce.zones"
+              layout="cards"
+              tone="default"
+              density="default"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.cards))"
+            />
+          </Box>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="zones-tableMuted-label"
+          data-testid="variant"
+          data-block="zones"
+          data-variant="tableMuted"
+        >
+          <Title :as="2" size="base" weight="bold" id="zones-tableMuted-label" data-testid="variant-label">
+            {{ ui.blocks.variants.zones.tableMuted }}
+          </Title>
+          <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+            <ZoneTable
+              id="zones-tableMuted"
+              :title="ui.commerce.zones.title"
+              :lead="ui.commerce.zones.lead"
+              :zones="zones"
+              :empty="ui.empty.zones"
+              :labels="ui.commerce.zones"
+              layout="table"
+              tone="muted"
+              density="compact"
+              :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.tableMuted))"
+            />
+          </Box>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen.vue b/apps/host-vue/xgen/screens/CatalogScreen.vue
new file mode 100644
index 0000000..4e51e5d
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen.vue
@@ -0,0 +1,268 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!--
+  The catalog: the blocks of the kit by section and category (Marketing, Content, Promo, Support, Commerce, App
+  and dashboard), one page per category with every variant of its blocks, and whole pages composed of blocks.
+  Built from the catalog tree and the blocks.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block } from "@ui8kit/vue-ui";
+import MarketingNavigationPage from "./CatalogScreen/MarketingNavigationPage.vue";
+import MarketingHeroPage from "./CatalogScreen/MarketingHeroPage.vue";
+import MarketingHeroSplitPage from "./CatalogScreen/MarketingHeroSplitPage.vue";
+import MarketingPageHeadPage from "./CatalogScreen/MarketingPageHeadPage.vue";
+import MarketingPageTrailPage from "./CatalogScreen/MarketingPageTrailPage.vue";
+import MarketingFeaturesPage from "./CatalogScreen/MarketingFeaturesPage.vue";
+import MarketingFeaturesSplitPage from "./CatalogScreen/MarketingFeaturesSplitPage.vue";
+import MarketingFeatureCardsPage from "./CatalogScreen/MarketingFeatureCardsPage.vue";
+import MarketingMediaListPage from "./CatalogScreen/MarketingMediaListPage.vue";
+import MarketingShowcasesPage from "./CatalogScreen/MarketingShowcasesPage.vue";
+import MarketingHowItWorksPage from "./CatalogScreen/MarketingHowItWorksPage.vue";
+import MarketingProofPage from "./CatalogScreen/MarketingProofPage.vue";
+import MarketingStatsPage from "./CatalogScreen/MarketingStatsPage.vue";
+import MarketingTestimonialsPage from "./CatalogScreen/MarketingTestimonialsPage.vue";
+import MarketingTestimonialsSplitPage from "./CatalogScreen/MarketingTestimonialsSplitPage.vue";
+import MarketingPricingPage from "./CatalogScreen/MarketingPricingPage.vue";
+import MarketingPricingToolsPage from "./CatalogScreen/MarketingPricingToolsPage.vue";
+import MarketingFaqPage from "./CatalogScreen/MarketingFaqPage.vue";
+import MarketingCtaPage from "./CatalogScreen/MarketingCtaPage.vue";
+import MarketingCtaProofPage from "./CatalogScreen/MarketingCtaProofPage.vue";
+import MarketingTeamPage from "./CatalogScreen/MarketingTeamPage.vue";
+import MarketingAboutPage from "./CatalogScreen/MarketingAboutPage.vue";
+import MarketingPortfolioPage from "./CatalogScreen/MarketingPortfolioPage.vue";
+import MarketingCareersPage from "./CatalogScreen/MarketingCareersPage.vue";
+import MarketingGalleryPage from "./CatalogScreen/MarketingGalleryPage.vue";
+import MarketingFooterPage from "./CatalogScreen/MarketingFooterPage.vue";
+import MarketingFooterSplitPage from "./CatalogScreen/MarketingFooterSplitPage.vue";
+import ContentBlogPage from "./CatalogScreen/ContentBlogPage.vue";
+import ContentPostShowcasePage from "./CatalogScreen/ContentPostShowcasePage.vue";
+import ContentPostHeaderPage from "./CatalogScreen/ContentPostHeaderPage.vue";
+import ContentPostHeaderSplitPage from "./CatalogScreen/ContentPostHeaderSplitPage.vue";
+import ContentArticlePage from "./CatalogScreen/ContentArticlePage.vue";
+import ContentTimelinePage from "./CatalogScreen/ContentTimelinePage.vue";
+import ContentStoryTabsPage from "./CatalogScreen/ContentStoryTabsPage.vue";
+import PromoBannersPage from "./CatalogScreen/PromoBannersPage.vue";
+import PromoNewsletterPage from "./CatalogScreen/PromoNewsletterPage.vue";
+import SupportContactPage from "./CatalogScreen/SupportContactPage.vue";
+import SupportStatesPage from "./CatalogScreen/SupportStatesPage.vue";
+import CommerceStorefrontPage from "./CatalogScreen/CommerceStorefrontPage.vue";
+import CommerceCategoriesPage from "./CatalogScreen/CommerceCategoriesPage.vue";
+import CommerceProductsPage from "./CatalogScreen/CommerceProductsPage.vue";
+import CommerceProductPage from "./CatalogScreen/CommerceProductPage.vue";
+import CommerceCartPage from "./CatalogScreen/CommerceCartPage.vue";
+import CommerceCheckoutPage from "./CatalogScreen/CommerceCheckoutPage.vue";
+import CommerceDeliveryPage from "./CatalogScreen/CommerceDeliveryPage.vue";
+import CommerceOrdersPage from "./CatalogScreen/CommerceOrdersPage.vue";
+import AppShellPage from "./CatalogScreen/AppShellPage.vue";
+import AppDashboardShellsPage from "./CatalogScreen/AppDashboardShellsPage.vue";
+import AppWidgetsPage from "./CatalogScreen/AppWidgetsPage.vue";
+import AppBoardsPage from "./CatalogScreen/AppBoardsPage.vue";
+import AppStatesPage from "./CatalogScreen/AppStatesPage.vue";
+import AppAuthPage from "./CatalogScreen/AppAuthPage.vue";
+import AppAuthPagesPage from "./CatalogScreen/AppAuthPagesPage.vue";
+import AppSettingsPage from "./CatalogScreen/AppSettingsPage.vue";
+import AppOnboardingPage from "./CatalogScreen/AppOnboardingPage.vue";
+import AppGuidancePage from "./CatalogScreen/AppGuidancePage.vue";
+import PageSaasLandingPage from "./CatalogScreen/PageSaasLandingPage.vue";
+import PageCompanyPage from "./CatalogScreen/PageCompanyPage.vue";
+import PagePortfolioPage from "./CatalogScreen/PagePortfolioPage.vue";
+import PageStoreHomePage from "./CatalogScreen/PageStoreHomePage.vue";
+import PageStoreHome2Page from "./CatalogScreen/PageStoreHome2Page.vue";
+import PageStoreCatalogPage from "./CatalogScreen/PageStoreCatalogPage.vue";
+import PageProductDetailPage from "./CatalogScreen/PageProductDetailPage.vue";
+import PageCartPage from "./CatalogScreen/PageCartPage.vue";
+import PageCheckoutPage from "./CatalogScreen/PageCheckoutPage.vue";
+import PageShellClassicPage from "./CatalogScreen/PageShellClassicPage.vue";
+import PageShellInsetPage from "./CatalogScreen/PageShellInsetPage.vue";
+import PageShellRailPage from "./CatalogScreen/PageShellRailPage.vue";
+import PageShellRailFooterPage from "./CatalogScreen/PageShellRailFooterPage.vue";
+import PageShellCollapsedPage from "./CatalogScreen/PageShellCollapsedPage.vue";
+import PageShellTwoLevelPage from "./CatalogScreen/PageShellTwoLevelPage.vue";
+import PageShellTwoLevelFullPage from "./CatalogScreen/PageShellTwoLevelFullPage.vue";
+import PageShellEndPage from "./CatalogScreen/PageShellEndPage.vue";
+import PageShellRailEndPage from "./CatalogScreen/PageShellRailEndPage.vue";
+import PageShellTopOnlyPage from "./CatalogScreen/PageShellTopOnlyPage.vue";
+import PageShellSideOnlyPage from "./CatalogScreen/PageShellSideOnlyPage.vue";
+import PageShellCollapsedEndPage from "./CatalogScreen/PageShellCollapsedEndPage.vue";
+import IndexPage from "./CatalogScreen/IndexPage.vue";
+import PagesPage from "./CatalogScreen/PagesPage.vue";
+import NotfoundPage from "./CatalogScreen/NotfoundPage.vue";
+import ScreenHeader from "./CatalogScreen/ScreenHeader.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ROUTES = [
+  {"path":"","area":"index"},
+  {"path":"pages","area":"pages"},
+  {"path":"marketing-navigation","area":"marketing-navigation"},
+  {"path":"marketing-hero","area":"marketing-hero"},
+  {"path":"marketing-hero-split","area":"marketing-hero-split"},
+  {"path":"marketing-page-head","area":"marketing-page-head"},
+  {"path":"marketing-page-trail","area":"marketing-page-trail"},
+  {"path":"marketing-features","area":"marketing-features"},
+  {"path":"marketing-features-split","area":"marketing-features-split"},
+  {"path":"marketing-feature-cards","area":"marketing-feature-cards"},
+  {"path":"marketing-media-list","area":"marketing-media-list"},
+  {"path":"marketing-showcases","area":"marketing-showcases"},
+  {"path":"marketing-how-it-works","area":"marketing-how-it-works"},
+  {"path":"marketing-proof","area":"marketing-proof"},
+  {"path":"marketing-stats","area":"marketing-stats"},
+  {"path":"marketing-testimonials","area":"marketing-testimonials"},
+  {"path":"marketing-testimonials-split","area":"marketing-testimonials-split"},
+  {"path":"marketing-pricing","area":"marketing-pricing"},
+  {"path":"marketing-pricing-tools","area":"marketing-pricing-tools"},
+  {"path":"marketing-faq","area":"marketing-faq"},
+  {"path":"marketing-cta","area":"marketing-cta"},
+  {"path":"marketing-cta-proof","area":"marketing-cta-proof"},
+  {"path":"marketing-team","area":"marketing-team"},
+  {"path":"marketing-about","area":"marketing-about"},
+  {"path":"marketing-portfolio","area":"marketing-portfolio"},
+  {"path":"marketing-careers","area":"marketing-careers"},
+  {"path":"marketing-gallery","area":"marketing-gallery"},
+  {"path":"marketing-footer","area":"marketing-footer"},
+  {"path":"marketing-footer-split","area":"marketing-footer-split"},
+  {"path":"content-blog","area":"content-blog"},
+  {"path":"content-post-showcase","area":"content-post-showcase"},
+  {"path":"content-post-header","area":"content-post-header"},
+  {"path":"content-post-header-split","area":"content-post-header-split"},
+  {"path":"content-article","area":"content-article"},
+  {"path":"content-timeline","area":"content-timeline"},
+  {"path":"content-story-tabs","area":"content-story-tabs"},
+  {"path":"promo-banners","area":"promo-banners"},
+  {"path":"promo-newsletter","area":"promo-newsletter"},
+  {"path":"support-contact","area":"support-contact"},
+  {"path":"support-states","area":"support-states"},
+  {"path":"commerce-storefront","area":"commerce-storefront"},
+  {"path":"commerce-categories","area":"commerce-categories"},
+  {"path":"commerce-products","area":"commerce-products"},
+  {"path":"commerce-product","area":"commerce-product"},
+  {"path":"commerce-cart","area":"commerce-cart"},
+  {"path":"commerce-checkout","area":"commerce-checkout"},
+  {"path":"commerce-delivery","area":"commerce-delivery"},
+  {"path":"commerce-orders","area":"commerce-orders"},
+  {"path":"app-shell","area":"app-shell"},
+  {"path":"app-dashboard-shells","area":"app-dashboard-shells"},
+  {"path":"app-widgets","area":"app-widgets"},
+  {"path":"app-boards","area":"app-boards"},
+  {"path":"app-states","area":"app-states"},
+  {"path":"app-auth","area":"app-auth"},
+  {"path":"app-auth-pages","area":"app-auth-pages"},
+  {"path":"app-settings","area":"app-settings"},
+  {"path":"app-onboarding","area":"app-onboarding"},
+  {"path":"app-guidance","area":"app-guidance"},
+  {"path":"page-saas-landing","area":"page-saas-landing"},
+  {"path":"page-company","area":"page-company"},
+  {"path":"page-portfolio","area":"page-portfolio"},
+  {"path":"page-store-home","area":"page-store-home"},
+  {"path":"page-store-home-2","area":"page-store-home-2"},
+  {"path":"page-store-catalog","area":"page-store-catalog"},
+  {"path":"page-product-detail","area":"page-product-detail"},
+  {"path":"page-cart","area":"page-cart"},
+  {"path":"page-checkout","area":"page-checkout"},
+  {"path":"page-shell-classic","area":"page-shell-classic"},
+  {"path":"page-shell-inset","area":"page-shell-inset"},
+  {"path":"page-shell-rail","area":"page-shell-rail"},
+  {"path":"page-shell-rail-footer","area":"page-shell-rail-footer"},
+  {"path":"page-shell-collapsed","area":"page-shell-collapsed"},
+  {"path":"page-shell-two-level","area":"page-shell-two-level"},
+  {"path":"page-shell-two-level-full","area":"page-shell-two-level-full"},
+  {"path":"page-shell-end","area":"page-shell-end"},
+  {"path":"page-shell-rail-end","area":"page-shell-rail-end"},
+  {"path":"page-shell-top-only","area":"page-shell-top-only"},
+  {"path":"page-shell-side-only","area":"page-shell-side-only"},
+  {"path":"page-shell-collapsed-end","area":"page-shell-collapsed-end"},
+] as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "notfound", params: {} as Record<string, string> });
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <ScreenHeader />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <IndexPage v-if="route.area === 'index'" />
+    <PagesPage v-else-if="route.area === 'pages'" />
+    <MarketingNavigationPage v-else-if="route.area === 'marketing-navigation'" />
+    <MarketingHeroPage v-else-if="route.area === 'marketing-hero'" />
+    <MarketingHeroSplitPage v-else-if="route.area === 'marketing-hero-split'" />
+    <MarketingPageHeadPage v-else-if="route.area === 'marketing-page-head'" />
+    <MarketingPageTrailPage v-else-if="route.area === 'marketing-page-trail'" />
+    <MarketingFeaturesPage v-else-if="route.area === 'marketing-features'" />
+    <MarketingFeaturesSplitPage v-else-if="route.area === 'marketing-features-split'" />
+    <MarketingFeatureCardsPage v-else-if="route.area === 'marketing-feature-cards'" />
+    <MarketingMediaListPage v-else-if="route.area === 'marketing-media-list'" />
+    <MarketingShowcasesPage v-else-if="route.area === 'marketing-showcases'" />
+    <MarketingHowItWorksPage v-else-if="route.area === 'marketing-how-it-works'" />
+    <MarketingProofPage v-else-if="route.area === 'marketing-proof'" />
+    <MarketingStatsPage v-else-if="route.area === 'marketing-stats'" />
+    <MarketingTestimonialsPage v-else-if="route.area === 'marketing-testimonials'" />
+    <MarketingTestimonialsSplitPage v-else-if="route.area === 'marketing-testimonials-split'" />
+    <MarketingPricingPage v-else-if="route.area === 'marketing-pricing'" />
+    <MarketingPricingToolsPage v-else-if="route.area === 'marketing-pricing-tools'" />
+    <MarketingFaqPage v-else-if="route.area === 'marketing-faq'" />
+    <MarketingCtaPage v-else-if="route.area === 'marketing-cta'" />
+    <MarketingCtaProofPage v-else-if="route.area === 'marketing-cta-proof'" />
+    <MarketingTeamPage v-else-if="route.area === 'marketing-team'" />
+    <MarketingAboutPage v-else-if="route.area === 'marketing-about'" />
+    <MarketingPortfolioPage v-else-if="route.area === 'marketing-portfolio'" />
+    <MarketingCareersPage v-else-if="route.area === 'marketing-careers'" />
+    <MarketingGalleryPage v-else-if="route.area === 'marketing-gallery'" />
+    <MarketingFooterPage v-else-if="route.area === 'marketing-footer'" />
+    <MarketingFooterSplitPage v-else-if="route.area === 'marketing-footer-split'" />
+    <ContentBlogPage v-else-if="route.area === 'content-blog'" />
+    <ContentPostShowcasePage v-else-if="route.area === 'content-post-showcase'" />
+    <ContentPostHeaderPage v-else-if="route.area === 'content-post-header'" />
+    <ContentPostHeaderSplitPage v-else-if="route.area === 'content-post-header-split'" />
+    <ContentArticlePage v-else-if="route.area === 'content-article'" />
+    <ContentTimelinePage v-else-if="route.area === 'content-timeline'" />
+    <ContentStoryTabsPage v-else-if="route.area === 'content-story-tabs'" />
+    <PromoBannersPage v-else-if="route.area === 'promo-banners'" />
+    <PromoNewsletterPage v-else-if="route.area === 'promo-newsletter'" />
+    <SupportContactPage v-else-if="route.area === 'support-contact'" />
+    <SupportStatesPage v-else-if="route.area === 'support-states'" />
+    <CommerceStorefrontPage v-else-if="route.area === 'commerce-storefront'" />
+    <CommerceCategoriesPage v-else-if="route.area === 'commerce-categories'" />
+    <CommerceProductsPage v-else-if="route.area === 'commerce-products'" />
+    <CommerceProductPage v-else-if="route.area === 'commerce-product'" />
+    <CommerceCartPage v-else-if="route.area === 'commerce-cart'" />
+    <CommerceCheckoutPage v-else-if="route.area === 'commerce-checkout'" />
+    <CommerceDeliveryPage v-else-if="route.area === 'commerce-delivery'" />
+    <CommerceOrdersPage v-else-if="route.area === 'commerce-orders'" />
+    <AppShellPage v-else-if="route.area === 'app-shell'" />
+    <AppDashboardShellsPage v-else-if="route.area === 'app-dashboard-shells'" />
+    <AppWidgetsPage v-else-if="route.area === 'app-widgets'" />
+    <AppBoardsPage v-else-if="route.area === 'app-boards'" />
+    <AppStatesPage v-else-if="route.area === 'app-states'" />
+    <AppAuthPage v-else-if="route.area === 'app-auth'" />
+    <AppAuthPagesPage v-else-if="route.area === 'app-auth-pages'" />
+    <AppSettingsPage v-else-if="route.area === 'app-settings'" />
+    <AppOnboardingPage v-else-if="route.area === 'app-onboarding'" />
+    <AppGuidancePage v-else-if="route.area === 'app-guidance'" />
+    <PageSaasLandingPage v-else-if="route.area === 'page-saas-landing'" />
+    <PageCompanyPage v-else-if="route.area === 'page-company'" />
+    <PagePortfolioPage v-else-if="route.area === 'page-portfolio'" />
+    <PageStoreHomePage v-else-if="route.area === 'page-store-home'" />
+    <PageStoreHome2Page v-else-if="route.area === 'page-store-home-2'" />
+    <PageStoreCatalogPage v-else-if="route.area === 'page-store-catalog'" />
+    <PageProductDetailPage v-else-if="route.area === 'page-product-detail'" />
+    <PageCartPage v-else-if="route.area === 'page-cart'" />
+    <PageCheckoutPage v-else-if="route.area === 'page-checkout'" />
+    <PageShellClassicPage v-else-if="route.area === 'page-shell-classic'" />
+    <PageShellInsetPage v-else-if="route.area === 'page-shell-inset'" />
+    <PageShellRailPage v-else-if="route.area === 'page-shell-rail'" />
+    <PageShellRailFooterPage v-else-if="route.area === 'page-shell-rail-footer'" />
+    <PageShellCollapsedPage v-else-if="route.area === 'page-shell-collapsed'" />
+    <PageShellTwoLevelPage v-else-if="route.area === 'page-shell-two-level'" />
+    <PageShellTwoLevelFullPage v-else-if="route.area === 'page-shell-two-level-full'" />
+    <PageShellEndPage v-else-if="route.area === 'page-shell-end'" />
+    <PageShellRailEndPage v-else-if="route.area === 'page-shell-rail-end'" />
+    <PageShellTopOnlyPage v-else-if="route.area === 'page-shell-top-only'" />
+    <PageShellSideOnlyPage v-else-if="route.area === 'page-shell-side-only'" />
+    <PageShellCollapsedEndPage v-else-if="route.area === 'page-shell-collapsed-end'" />
+    <NotfoundPage v-else />
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppAuthPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppAuthPage.vue
new file mode 100644
index 0000000..160aca8
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppAuthPage.vue
@@ -0,0 +1,454 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-auth page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  AuthCard,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SignupWizard,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type WizardStep,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+const WIZARD_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "icon": "metadata.icon.value",
+  "fieldA": "metadata.fieldA.value",
+  "fieldB": "metadata.fieldB.value",
+} as const;
+
+const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appAuth }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 12) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-auth-title"
+          data-testid="catalog-block"
+          data-block="auth"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-auth-title">
+              {{ ui.blocks.names.auth }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.auth }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-signin-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="signin"
+          >
+            <Title :as="3" size="base" weight="bold" id="auth-signin-label" data-testid="variant-label">
+              {{ ui.blocks.variants.auth.signin }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-signin"
+                  :title="ui.auth.signin.title"
+                  :text="ui.auth.signin.text"
+                  :submit="ui.auth.signin.submit"
+                  :switchText="ui.auth.signin.switchText"
+                  :switchLink="ui.auth.signin.switchLink"
+                  switchHref="#/"
+                  :labels="ui.auth.labels"
+                  mode="signin"
+                  layout="card"
+                  social="none"
+                  :level="2"
+                  :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-magic-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="magic"
+          >
+            <Title :as="3" size="base" weight="bold" id="auth-magic-label" data-testid="variant-label">
+              {{ ui.blocks.variants.auth.magic }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-magic"
+                  :title="ui.auth.magic.title"
+                  :text="ui.auth.magic.text"
+                  :submit="ui.auth.magic.submit"
+                  :switchText="ui.auth.magic.switchText"
+                  :switchLink="ui.auth.magic.switchLink"
+                  switchHref="#/"
+                  :labels="ui.auth.labels"
+                  mode="magic"
+                  layout="card"
+                  social="none"
+                  :level="2"
+                  :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.magic))"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-socialFirst-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="socialFirst"
+          >
+            <Title :as="3" size="base" weight="bold" id="auth-socialFirst-label" data-testid="variant-label">
+              {{ ui.blocks.variants.auth.socialFirst }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-socialFirst"
+                  :title="ui.auth.signin.title"
+                  :text="ui.auth.signin.text"
+                  :submit="ui.auth.signin.submit"
+                  :switchText="ui.auth.signin.switchText"
+                  :switchLink="ui.auth.signin.switchLink"
+                  switchHref="#/"
+                  :labels="ui.auth.labels"
+                  mode="signin"
+                  layout="card"
+                  social="first"
+                  :level="2"
+                  :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.socialFirst))"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-signup-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="signup"
+          >
+            <Title :as="3" size="base" weight="bold" id="auth-signup-label" data-testid="variant-label">
+              {{ ui.blocks.variants.auth.signup }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-signup"
+                  :title="ui.auth.signup.title"
+                  :text="ui.auth.signup.text"
+                  :submit="ui.auth.signup.submit"
+                  :switchText="ui.auth.signup.switchText"
+                  :switchLink="ui.auth.signup.switchLink"
+                  switchHref="#/"
+                  :labels="ui.auth.labels"
+                  mode="signup"
+                  layout="card"
+                  social="none"
+                  :level="2"
+                  :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signup))"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-reset-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="reset"
+          >
+            <Title :as="3" size="base" weight="bold" id="auth-reset-label" data-testid="variant-label">
+              {{ ui.blocks.variants.auth.reset }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-reset"
+                  :title="ui.auth.reset.title"
+                  :text="ui.auth.reset.text"
+                  :submit="ui.auth.reset.submit"
+                  :switchText="ui.auth.reset.switchText"
+                  :switchLink="ui.auth.reset.switchLink"
+                  switchHref="#/"
+                  :labels="ui.auth.labels"
+                  mode="reset"
+                  layout="card"
+                  social="none"
+                  :level="2"
+                  :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.reset))"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-plain-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="auth-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.auth.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-plain"
+                  :title="ui.auth.signin.title"
+                  :text="ui.auth.signin.text"
+                  :submit="ui.auth.signin.submit"
+                  :switchText="ui.auth.signin.switchText"
+                  :switchLink="ui.auth.signin.switchLink"
+                  switchHref="#/"
+                  :labels="ui.auth.labels"
+                  mode="signin"
+                  layout="plain"
+                  social="none"
+                  :level="2"
+                  :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.plain))"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-social-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="social"
+          >
+            <Title :as="3" size="base" weight="bold" id="auth-social-label" data-testid="variant-label">
+              {{ ui.blocks.variants.auth.social }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-social"
+                  :title="ui.auth.signin.title"
+                  :text="ui.auth.signin.text"
+                  :submit="ui.auth.signin.submit"
+                  :switchText="ui.auth.signin.switchText"
+                  :switchLink="ui.auth.signin.switchLink"
+                  switchHref="#/"
+                  :labels="ui.auth.labels"
+                  mode="signin"
+                  layout="card"
+                  social="show"
+                  :level="2"
+                  :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="auth-signupSocial-label"
+            data-testid="variant"
+            data-block="auth"
+            data-variant="signupSocial"
+          >
+            <Title :as="3" size="base" weight="bold" id="auth-signupSocial-label" data-testid="variant-label">
+              {{ ui.blocks.variants.auth.signupSocial }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <AuthCard
+                  id="auth-signupSocial"
+                  :title="ui.auth.signup.title"
+                  :text="ui.auth.signup.text"
+                  :submit="ui.auth.signup.submit"
+                  :switchText="ui.auth.signup.switchText"
+                  :switchLink="ui.auth.signup.switchLink"
+                  switchHref="#/"
+                  :labels="ui.auth.labels"
+                  mode="signup"
+                  layout="plain"
+                  social="show"
+                  :level="2"
+                  :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))"
+                />
+              </Box>
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-wizard-title"
+          data-testid="catalog-block"
+          data-block="wizard"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-wizard-title">
+              {{ ui.blocks.names.wizard }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.wizard }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-bar-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="bar"
+          >
+            <Title :as="3" size="base" weight="bold" id="wizard-bar-label" data-testid="variant-label">
+              {{ ui.blocks.variants.wizard.bar }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-bar"
+                :title="ui.vibe.wizard.title"
+                :steps="wizard"
+                :labels="ui.vibe.wizard.labels"
+                :current="1"
+                progress="bar"
+                layout="card"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-list-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="wizard-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.wizard.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-list"
+                :title="ui.vibe.wizard.title"
+                :steps="wizard"
+                :labels="ui.vibe.wizard.labels"
+                :current="1"
+                progress="list"
+                layout="card"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-plain-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="wizard-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.wizard.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-plain"
+                :title="ui.vibe.wizard.title"
+                :steps="wizard"
+                :labels="ui.vibe.wizard.labels"
+                :current="1"
+                progress="bar"
+                layout="plain"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.plain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="wizard-second-label"
+            data-testid="variant"
+            data-block="wizard"
+            data-variant="second"
+          >
+            <Title :as="3" size="base" weight="bold" id="wizard-second-label" data-testid="variant-label">
+              {{ ui.blocks.variants.wizard.second }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SignupWizard
+                id="wizard-second"
+                :title="ui.vibe.wizard.title"
+                :steps="wizard"
+                :labels="ui.vibe.wizard.labels"
+                :current="2"
+                progress="list"
+                layout="plain"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.second))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppAuthPagesPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppAuthPagesPage.vue
new file mode 100644
index 0000000..0afba88
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppAuthPagesPage.vue
@@ -0,0 +1,337 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-auth-pages page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  AuthLayout,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const AUTHPAGE_SWITCH_TO = { text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: "#/" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appAuthPages }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 9) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-authpage-title"
+          data-testid="catalog-block"
+          data-block="authpage"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-authpage-title">
+              {{ ui.blocks.names.authpage }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.authpage }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-split-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="authpage-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.authpage.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-split"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchTo="AUTHPAGE_SWITCH_TO"
+                :labels="ui.auth.labels"
+                :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+                layout="split"
+                side="end"
+                mode="signin"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-splitStart-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="splitStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="authpage-splitStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.authpage.splitStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-splitStart"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchTo="AUTHPAGE_SWITCH_TO"
+                :labels="ui.auth.labels"
+                :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+                layout="split"
+                side="start"
+                mode="signin"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.splitStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-centered-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="centered"
+          >
+            <Title :as="3" size="base" weight="bold" id="authpage-centered-label" data-testid="variant-label">
+              {{ ui.blocks.variants.authpage.centered }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-centered"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchTo="AUTHPAGE_SWITCH_TO"
+                :labels="ui.auth.labels"
+                :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+                layout="centered"
+                side="end"
+                mode="signin"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.centered))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-minimal-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="minimal"
+          >
+            <Title :as="3" size="base" weight="bold" id="authpage-minimal-label" data-testid="variant-label">
+              {{ ui.blocks.variants.authpage.minimal }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-minimal"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchTo="AUTHPAGE_SWITCH_TO"
+                :labels="ui.auth.labels"
+                :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+                layout="minimal"
+                side="end"
+                mode="signin"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.minimal))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-signup-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="signup"
+          >
+            <Title :as="3" size="base" weight="bold" id="authpage-signup-label" data-testid="variant-label">
+              {{ ui.blocks.variants.authpage.signup }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-signup"
+                :title="ui.auth.signup.title"
+                :text="ui.auth.signup.text"
+                :submit="ui.auth.signup.submit"
+                :switchTo="{
+                  ...AUTHPAGE_SWITCH_TO,
+                  text: ui.auth.signup.switchText,
+                  link: ui.auth.signup.switchLink,
+                }"
+                :labels="ui.auth.labels"
+                :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+                layout="split"
+                side="end"
+                mode="signup"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.signup))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-reset-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="reset"
+          >
+            <Title :as="3" size="base" weight="bold" id="authpage-reset-label" data-testid="variant-label">
+              {{ ui.blocks.variants.authpage.reset }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-reset"
+                :title="ui.auth.reset.title"
+                :text="ui.auth.reset.text"
+                :submit="ui.auth.reset.submit"
+                :switchTo="{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink }"
+                :labels="ui.auth.labels"
+                :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+                layout="centered"
+                side="end"
+                mode="reset"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.reset))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-magic-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="magic"
+          >
+            <Title :as="3" size="base" weight="bold" id="authpage-magic-label" data-testid="variant-label">
+              {{ ui.blocks.variants.authpage.magic }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-magic"
+                :title="ui.auth.magic.title"
+                :text="ui.auth.magic.text"
+                :submit="ui.auth.magic.submit"
+                :switchTo="{ ...AUTHPAGE_SWITCH_TO, text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink }"
+                :labels="ui.auth.labels"
+                :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+                layout="minimal"
+                side="end"
+                mode="magic"
+                social="none"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.magic))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-social-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="social"
+          >
+            <Title :as="3" size="base" weight="bold" id="authpage-social-label" data-testid="variant-label">
+              {{ ui.blocks.variants.authpage.social }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-social"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchTo="AUTHPAGE_SWITCH_TO"
+                :labels="ui.auth.labels"
+                :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+                layout="split"
+                side="end"
+                mode="signin"
+                social="show"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.social))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="authpage-socialFirst-label"
+            data-testid="variant"
+            data-block="authpage"
+            data-variant="socialFirst"
+          >
+            <Title :as="3" size="base" weight="bold" id="authpage-socialFirst-label" data-testid="variant-label">
+              {{ ui.blocks.variants.authpage.socialFirst }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AuthLayout
+                id="authpage-socialFirst"
+                :title="ui.auth.signin.title"
+                :text="ui.auth.signin.text"
+                :submit="ui.auth.signin.submit"
+                :switchTo="AUTHPAGE_SWITCH_TO"
+                :labels="ui.auth.labels"
+                :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+                layout="centered"
+                side="end"
+                mode="signin"
+                social="first"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.authpage, ui.blocks.variants.authpage.socialFirst))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppBoardsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppBoardsPage.vue
new file mode 100644
index 0000000..7d80346
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppBoardsPage.vue
@@ -0,0 +1,338 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-boards page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  DashboardOverview,
+  Group,
+  KanbanBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type BoardCard,
+  type Event,
+  type Lane,
+  type Point,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+
+const OVERVIEW_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const OVERVIEW_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appBoards }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 8) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-overview-title"
+          data-testid="catalog-block"
+          data-block="overview"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-overview-title">
+              {{ ui.blocks.names.overview }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.overview }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-split-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="overview-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.overview.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-split"
+                :title="ui.vibe.overview.title"
+                :metrics="metrics"
+                :chart="OVERVIEW_CHART"
+                :activity="OVERVIEW_ACTIVITY"
+                layout="split"
+                cols="4"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-stacked-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="overview-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.overview.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-stacked"
+                :title="ui.vibe.overview.title"
+                :metrics="metrics"
+                :chart="OVERVIEW_CHART"
+                :activity="OVERVIEW_ACTIVITY"
+                layout="stacked"
+                cols="4"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-twoCols-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="twoCols"
+          >
+            <Title :as="3" size="base" weight="bold" id="overview-twoCols-label" data-testid="variant-label">
+              {{ ui.blocks.variants.overview.twoCols }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-twoCols"
+                :title="ui.vibe.overview.title"
+                :metrics="metrics"
+                :chart="OVERVIEW_CHART"
+                :activity="OVERVIEW_ACTIVITY"
+                layout="split"
+                cols="2"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.twoCols))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="overview-muted-label"
+            data-testid="variant"
+            data-block="overview"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="overview-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.overview.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardOverview
+                id="overview-muted"
+                :title="ui.vibe.overview.title"
+                :metrics="metrics"
+                :chart="OVERVIEW_CHART"
+                :activity="OVERVIEW_ACTIVITY"
+                layout="split"
+                cols="4"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-kanban-title"
+          data-testid="catalog-block"
+          data-block="kanban"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-kanban-title">
+              {{ ui.blocks.names.kanban }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.kanban }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-detail-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="detail"
+          >
+            <Title :as="3" size="base" weight="bold" id="kanban-detail-label" data-testid="variant-label">
+              {{ ui.blocks.variants.kanban.detail }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-detail"
+                :title="ui.vibe.kanban.title"
+                :lanes="lanes"
+                :empty="ui.empty.lanes"
+                :cards="cards"
+                :countLabel="ui.vibe.kanban.count"
+                card="detail"
+                cols="3"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-simple-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="simple"
+          >
+            <Title :as="3" size="base" weight="bold" id="kanban-simple-label" data-testid="variant-label">
+              {{ ui.blocks.variants.kanban.simple }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-simple"
+                :title="ui.vibe.kanban.title"
+                :lanes="lanes"
+                :empty="ui.empty.lanes"
+                :cards="cards"
+                :countLabel="ui.vibe.kanban.count"
+                card="simple"
+                cols="3"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.simple))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-twoCols-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="twoCols"
+          >
+            <Title :as="3" size="base" weight="bold" id="kanban-twoCols-label" data-testid="variant-label">
+              {{ ui.blocks.variants.kanban.twoCols }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-twoCols"
+                :title="ui.vibe.kanban.title"
+                :lanes="lanes"
+                :empty="ui.empty.lanes"
+                :cards="cards"
+                :countLabel="ui.vibe.kanban.count"
+                card="detail"
+                cols="2"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="kanban-muted-label"
+            data-testid="variant"
+            data-block="kanban"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="kanban-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.kanban.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <KanbanBoard
+                id="kanban-muted"
+                :title="ui.vibe.kanban.title"
+                :lanes="lanes"
+                :empty="ui.empty.lanes"
+                :cards="cards"
+                :countLabel="ui.vibe.kanban.count"
+                card="detail"
+                cols="3"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppDashboardShellsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppDashboardShellsPage.vue
new file mode 100644
index 0000000..79f3c6b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppDashboardShellsPage.vue
@@ -0,0 +1,428 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-dashboard-shells page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  DashboardShell,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+
+const DASHSHELL_NAV = {
+  label: ui.dashboard.shells.label,
+  brand: ui.site.header.brand,
+  links: sidenav,
+  current: "item-orders",
+  subTitle: ui.dashboard.shells.subTitle,
+  sub: subnav,
+  subCurrent: "subitem-all",
+  search: ui.dashboard.shells.search,
+  shortcut: ui.dashboard.shells.shortcut,
+  expand: ui.dashboard.shells.expand,
+  userName: ui.dashboard.shells.userName,
+  copyright: ui.dashboard.shells.copyright,
+  footerLabel: ui.dashboard.shells.footerLabel,
+  footer: helplinks,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appDashboardShells }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 12) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-dashshell-title"
+          data-testid="catalog-block"
+          data-block="dashshell"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-dashshell-title">
+              {{ ui.blocks.names.dashshell }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.dashshell }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-classic-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="classic"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-classic-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.classic }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-classic"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="full"
+                search="show"
+                sidebar="wide"
+                side="start"
+                footer="none"
+                content="grid"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-inset-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="inset"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-inset-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.inset }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-inset"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="inset"
+                search="show"
+                sidebar="wide"
+                side="start"
+                footer="inset"
+                content="split"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.inset))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-rail-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="rail"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-rail-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.rail }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-rail"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="full"
+                search="hide"
+                sidebar="rail"
+                side="start"
+                footer="none"
+                content="list"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.rail))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-railFooter-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="railFooter"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-railFooter-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.railFooter }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-railFooter"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="inset"
+                search="show"
+                sidebar="rail"
+                side="start"
+                footer="full"
+                content="grid"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railFooter))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-collapsed-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="collapsed"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-collapsed-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.collapsed }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-collapsed"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="inset"
+                search="show"
+                sidebar="collapsed"
+                side="start"
+                footer="none"
+                content="split"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsed))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-twoLevel-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="twoLevel"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-twoLevel-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.twoLevel }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-twoLevel"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="inset"
+                search="hide"
+                sidebar="twolevel"
+                side="start"
+                footer="inset"
+                content="list"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-twoLevelFull-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="twoLevelFull"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-twoLevelFull-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.twoLevelFull }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-twoLevelFull"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="full"
+                search="show"
+                sidebar="twolevel"
+                side="start"
+                footer="full"
+                content="split"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevelFull))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-end-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="end"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-end-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.end }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-end"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="full"
+                search="show"
+                sidebar="wide"
+                side="end"
+                footer="full"
+                content="split"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-railEnd-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="railEnd"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-railEnd-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.railEnd }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-railEnd"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="inset"
+                search="hide"
+                sidebar="rail"
+                side="end"
+                footer="inset"
+                content="grid"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.railEnd))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-topOnly-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="topOnly"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-topOnly-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.topOnly }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-topOnly"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="full"
+                search="show"
+                sidebar="none"
+                side="start"
+                footer="full"
+                content="grid"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.topOnly))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-sideOnly-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="sideOnly"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-sideOnly-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.sideOnly }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-sideOnly"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="none"
+                search="show"
+                sidebar="wide"
+                side="start"
+                footer="inset"
+                content="list"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.sideOnly))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="dashshell-collapsedEnd-label"
+            data-testid="variant"
+            data-block="dashshell"
+            data-variant="collapsedEnd"
+          >
+            <Title :as="3" size="base" weight="bold" id="dashshell-collapsedEnd-label" data-testid="variant-label">
+              {{ ui.blocks.variants.dashshell.collapsedEnd }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DashboardShell
+                id="dashshell-collapsedEnd"
+                :title="ui.dashboard.shells.title"
+                :nav="DASHSHELL_NAV"
+                topbar="none"
+                search="show"
+                sidebar="collapsed"
+                side="end"
+                footer="full"
+                content="split"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.collapsedEnd))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppGuidancePage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppGuidancePage.vue
new file mode 100644
index 0000000..2c98bad
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppGuidancePage.vue
@@ -0,0 +1,311 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-guidance page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  TourCallout,
+  VideoModal,
+  tpl,
+  uniqLabel,
+  type Chapter,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appGuidance }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 8) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-tour-title"
+          data-testid="catalog-block"
+          data-block="tour"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-tour-title">
+              {{ ui.blocks.names.tour }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.tour }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-below-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="below"
+          >
+            <Title :as="3" size="base" weight="bold" id="tour-below-label" data-testid="variant-label">
+              {{ ui.blocks.variants.tour.below }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-below"
+                :title="ui.vibe.tour.title"
+                :text="ui.vibe.tour.text"
+                :target="ui.vibe.tour.target"
+                :position="ui.vibe.tour.position"
+                :skip="ui.vibe.tour.skip"
+                :next="ui.vibe.tour.next"
+                placement="below"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-above-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="above"
+          >
+            <Title :as="3" size="base" weight="bold" id="tour-above-label" data-testid="variant-label">
+              {{ ui.blocks.variants.tour.above }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-above"
+                :title="ui.vibe.tour.title"
+                :text="ui.vibe.tour.text"
+                :target="ui.vibe.tour.target"
+                :position="ui.vibe.tour.position"
+                :skip="ui.vibe.tour.skip"
+                :next="ui.vibe.tour.next"
+                placement="above"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-end-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="end"
+          >
+            <Title :as="3" size="base" weight="bold" id="tour-end-label" data-testid="variant-label">
+              {{ ui.blocks.variants.tour.end }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-end"
+                :title="ui.vibe.tour.title"
+                :text="ui.vibe.tour.text"
+                :target="ui.vibe.tour.target"
+                :position="ui.vibe.tour.position"
+                :skip="ui.vibe.tour.skip"
+                :next="ui.vibe.tour.next"
+                placement="end"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="tour-muted-label"
+            data-testid="variant"
+            data-block="tour"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="tour-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.tour.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TourCallout
+                id="tour-muted"
+                :title="ui.vibe.tour.title"
+                :text="ui.vibe.tour.text"
+                :target="ui.vibe.tour.target"
+                :position="ui.vibe.tour.position"
+                :skip="ui.vibe.tour.skip"
+                :next="ui.vibe.tour.next"
+                placement="below"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-videomodal-title"
+          data-testid="catalog-block"
+          data-block="videomodal"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-videomodal-title">
+              {{ ui.blocks.names.videomodal }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.videomodal }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-default-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="default"
+          >
+            <Title :as="3" size="base" weight="bold" id="videomodal-default-label" data-testid="variant-label">
+              {{ ui.blocks.variants.videomodal.default }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-default"
+                :title="ui.vibe.modal.title"
+                :text="ui.vibe.modal.text"
+                :close="ui.vibe.modal.close"
+                :play="ui.vibe.modal.play"
+                :chaptersTitle="ui.vibe.modal.chapters"
+                :chapters="chapters"
+                size="default"
+                outline="none"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-wide-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="wide"
+          >
+            <Title :as="3" size="base" weight="bold" id="videomodal-wide-label" data-testid="variant-label">
+              {{ ui.blocks.variants.videomodal.wide }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-wide"
+                :title="ui.vibe.modal.title"
+                :text="ui.vibe.modal.text"
+                :close="ui.vibe.modal.close"
+                :play="ui.vibe.modal.play"
+                :chaptersTitle="ui.vibe.modal.chapters"
+                :chapters="chapters"
+                size="wide"
+                outline="none"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.wide))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-chapters-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="chapters"
+          >
+            <Title :as="3" size="base" weight="bold" id="videomodal-chapters-label" data-testid="variant-label">
+              {{ ui.blocks.variants.videomodal.chapters }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-chapters"
+                :title="ui.vibe.modal.title"
+                :text="ui.vibe.modal.text"
+                :close="ui.vibe.modal.close"
+                :play="ui.vibe.modal.play"
+                :chaptersTitle="ui.vibe.modal.chapters"
+                :chapters="chapters"
+                size="default"
+                outline="chapters"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videomodal-muted-label"
+            data-testid="variant"
+            data-block="videomodal"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="videomodal-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.videomodal.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoModal
+                id="videomodal-muted"
+                :title="ui.vibe.modal.title"
+                :text="ui.vibe.modal.text"
+                :close="ui.vibe.modal.close"
+                :play="ui.vibe.modal.play"
+                :chaptersTitle="ui.vibe.modal.chapters"
+                :chapters="chapters"
+                size="default"
+                outline="none"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppOnboardingPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppOnboardingPage.vue
new file mode 100644
index 0000000..d0a0358
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppOnboardingPage.vue
@@ -0,0 +1,399 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-onboarding page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Checklist,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Stepper,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+  type Task,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appOnboarding }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 11) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-checklist-title"
+          data-testid="catalog-block"
+          data-block="checklist"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-checklist-title">
+              {{ ui.blocks.names.checklist }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.checklist }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-card-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="card"
+          >
+            <Title :as="3" size="base" weight="bold" id="checklist-card-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checklist.card }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-card"
+                :title="ui.onboarding.checklist.title"
+                :tasks="checklist"
+                :empty="ui.empty.tasks"
+                :progressLabel="ui.onboarding.checklist.progress"
+                layout="card"
+                progress="bar"
+                marker="check"
+                detail="always"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-expand-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="expand"
+          >
+            <Title :as="3" size="base" weight="bold" id="checklist-expand-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checklist.expand }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-expand"
+                :title="ui.onboarding.checklist.title"
+                :tasks="checklist"
+                :empty="ui.empty.tasks"
+                :progressLabel="ui.onboarding.checklist.progress"
+                layout="card"
+                progress="bar"
+                marker="check"
+                detail="expand"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-plain-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="checklist-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checklist.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-plain"
+                :title="ui.onboarding.checklist.title"
+                :tasks="checklist"
+                :empty="ui.empty.tasks"
+                :progressLabel="ui.onboarding.checklist.progress"
+                layout="plain"
+                progress="bar"
+                marker="check"
+                detail="always"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.plain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-text-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="text"
+          >
+            <Title :as="3" size="base" weight="bold" id="checklist-text-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checklist.text }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-text"
+                :title="ui.onboarding.checklist.title"
+                :tasks="checklist"
+                :empty="ui.empty.tasks"
+                :progressLabel="ui.onboarding.checklist.progress"
+                layout="card"
+                progress="text"
+                marker="check"
+                detail="always"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-none-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="none"
+          >
+            <Title :as="3" size="base" weight="bold" id="checklist-none-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checklist.none }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-none"
+                :title="ui.onboarding.checklist.title"
+                :tasks="checklist"
+                :empty="ui.empty.tasks"
+                :progressLabel="ui.onboarding.checklist.progress"
+                layout="plain"
+                progress="none"
+                marker="check"
+                detail="always"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.none))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-numbered-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="numbered"
+          >
+            <Title :as="3" size="base" weight="bold" id="checklist-numbered-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checklist.numbered }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-numbered"
+                :title="ui.onboarding.checklist.title"
+                :tasks="checklist"
+                :empty="ui.empty.tasks"
+                :progressLabel="ui.onboarding.checklist.progress"
+                layout="card"
+                progress="bar"
+                marker="number"
+                detail="always"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checklist-muted-label"
+            data-testid="variant"
+            data-block="checklist"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="checklist-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checklist.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Checklist
+                id="checklist-muted"
+                :title="ui.onboarding.checklist.title"
+                :tasks="checklist"
+                :empty="ui.empty.tasks"
+                :progressLabel="ui.onboarding.checklist.progress"
+                layout="card"
+                progress="text"
+                marker="number"
+                detail="always"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-stepper-title"
+          data-testid="catalog-block"
+          data-block="stepper"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-stepper-title">
+              {{ ui.blocks.names.stepper }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.stepper }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-horizontal-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="horizontal"
+          >
+            <Title :as="3" size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stepper.horizontal }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-horizontal"
+                :title="ui.onboarding.stepper.title"
+                :steps="steps"
+                :current="2"
+                :stepLabel="ui.onboarding.stepper.stepLabel"
+                :back="ui.onboarding.stepper.back"
+                :next="ui.onboarding.stepper.next"
+                layout="horizontal"
+                marker="number"
+                summary="show"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-vertical-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="vertical"
+          >
+            <Title :as="3" size="base" weight="bold" id="stepper-vertical-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stepper.vertical }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-vertical"
+                :title="ui.onboarding.stepper.title"
+                :steps="steps"
+                :current="2"
+                :stepLabel="ui.onboarding.stepper.stepLabel"
+                :back="ui.onboarding.stepper.back"
+                :next="ui.onboarding.stepper.next"
+                layout="vertical"
+                marker="number"
+                summary="show"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-icons-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="icons"
+          >
+            <Title :as="3" size="base" weight="bold" id="stepper-icons-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stepper.icons }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-icons"
+                :title="ui.onboarding.stepper.title"
+                :steps="steps"
+                :current="2"
+                :stepLabel="ui.onboarding.stepper.stepLabel"
+                :back="ui.onboarding.stepper.back"
+                :next="ui.onboarding.stepper.next"
+                layout="horizontal"
+                marker="icon"
+                summary="show"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.icons))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-bare-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="bare"
+          >
+            <Title :as="3" size="base" weight="bold" id="stepper-bare-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stepper.bare }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-bare"
+                :title="ui.onboarding.stepper.title"
+                :steps="steps"
+                :current="2"
+                :stepLabel="ui.onboarding.stepper.stepLabel"
+                :back="ui.onboarding.stepper.back"
+                :next="ui.onboarding.stepper.next"
+                layout="vertical"
+                marker="icon"
+                summary="hide"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.bare))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppSettingsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppSettingsPage.vue
new file mode 100644
index 0000000..27ee37a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppSettingsPage.vue
@@ -0,0 +1,166 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-settings page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProfileForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appSettings }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 4) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-profile-title"
+          data-testid="catalog-block"
+          data-block="profile"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-profile-title">
+              {{ ui.blocks.names.profile }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.profile }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-stacked-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="profile-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.profile.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-stacked"
+                :title="ui.account.profile.title"
+                :text="ui.account.profile.text"
+                :labels="ui.account.profile.labels"
+                layout="stacked"
+                avatar="show"
+                prefs="show"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-split-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="profile-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.profile.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-split"
+                :title="ui.account.profile.title"
+                :text="ui.account.profile.text"
+                :labels="ui.account.profile.labels"
+                layout="split"
+                avatar="show"
+                prefs="show"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-minimal-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="minimal"
+          >
+            <Title :as="3" size="base" weight="bold" id="profile-minimal-label" data-testid="variant-label">
+              {{ ui.blocks.variants.profile.minimal }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-minimal"
+                :title="ui.account.profile.title"
+                :text="ui.account.profile.text"
+                :labels="ui.account.profile.labels"
+                layout="stacked"
+                avatar="hide"
+                prefs="hide"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.minimal))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="profile-muted-label"
+            data-testid="variant"
+            data-block="profile"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="profile-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.profile.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProfileForm
+                id="profile-muted"
+                :title="ui.account.profile.title"
+                :text="ui.account.profile.text"
+                :labels="ui.account.profile.labels"
+                layout="split"
+                avatar="show"
+                prefs="show"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppShellPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppShellPage.vue
new file mode 100644
index 0000000..56b5637
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppShellPage.vue
@@ -0,0 +1,452 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-shell page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  AppShell,
+  Block,
+  BottomNav,
+  Box,
+  Container,
+  Group,
+  Link,
+  SidebarNav,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+
+const SHELL_NAV = { label: ui.vibe.sidebar.label, brand: ui.site.header.brand, links: sidenav, current: "item-overview" } as const;
+const SHELL_CHART = { title: ui.dashboard.chart.title, text: ui.dashboard.chart.text, summary: ui.dashboard.chart.summary, series } as const;
+const SHELL_ACTIVITY = { title: ui.dashboard.activity.title, text: ui.dashboard.activity.text, events: activity } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appShell }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 12) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-shell-title"
+          data-testid="catalog-block"
+          data-block="shell"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-shell-title">
+              {{ ui.blocks.names.shell }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.shell }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-sidebar-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="sidebar"
+          >
+            <Title :as="3" size="base" weight="bold" id="shell-sidebar-label" data-testid="variant-label">
+              {{ ui.blocks.variants.shell.sidebar }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-sidebar"
+                :title="ui.vibe.shell.title"
+                :nav="SHELL_NAV"
+                :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                :metrics="metrics"
+                :chart="SHELL_CHART"
+                :activity="SHELL_ACTIVITY"
+                layout="sidebar"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-top-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="top"
+          >
+            <Title :as="3" size="base" weight="bold" id="shell-top-label" data-testid="variant-label">
+              {{ ui.blocks.variants.shell.top }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-top"
+                :title="ui.vibe.shell.title"
+                :nav="SHELL_NAV"
+                :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                :metrics="metrics"
+                :chart="SHELL_CHART"
+                :activity="SHELL_ACTIVITY"
+                layout="top"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-panes-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="panes"
+          >
+            <Title :as="3" size="base" weight="bold" id="shell-panes-label" data-testid="variant-label">
+              {{ ui.blocks.variants.shell.panes }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-panes"
+                :title="ui.vibe.shell.title"
+                :nav="SHELL_NAV"
+                :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                :metrics="metrics"
+                :chart="SHELL_CHART"
+                :activity="SHELL_ACTIVITY"
+                layout="panes"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="shell-dense-label"
+            data-testid="variant"
+            data-block="shell"
+            data-variant="dense"
+          >
+            <Title :as="3" size="base" weight="bold" id="shell-dense-label" data-testid="variant-label">
+              {{ ui.blocks.variants.shell.dense }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AppShell
+                id="shell-dense"
+                :title="ui.vibe.shell.title"
+                :nav="SHELL_NAV"
+                :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                :metrics="metrics"
+                :chart="SHELL_CHART"
+                :activity="SHELL_ACTIVITY"
+                layout="sidebar"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.dense))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-sidenav-title"
+          data-testid="catalog-block"
+          data-block="sidenav"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-sidenav-title">
+              {{ ui.blocks.names.sidenav }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.sidenav }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-full-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="full"
+          >
+            <Title :as="3" size="base" weight="bold" id="sidenav-full-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sidenav.full }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                :label="ui.vibe.sidebar.label"
+                :brand="ui.site.header.brand"
+                :links="sidenav"
+                current="item-orders"
+                :userName="ui.vibe.sidebar.userName"
+                :userEmail="ui.vibe.sidebar.userEmail"
+                width="full"
+                user="show"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-compact-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="sidenav-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sidenav.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                :label="ui.vibe.sidebar.label"
+                :brand="ui.site.header.brand"
+                :links="sidenav"
+                current="item-orders"
+                :userName="ui.vibe.sidebar.userName"
+                :userEmail="ui.vibe.sidebar.userEmail"
+                width="compact"
+                user="show"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-noUser-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="noUser"
+          >
+            <Title :as="3" size="base" weight="bold" id="sidenav-noUser-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sidenav.noUser }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                :label="ui.vibe.sidebar.label"
+                :brand="ui.site.header.brand"
+                :links="sidenav"
+                current="item-orders"
+                :userName="ui.vibe.sidebar.userName"
+                :userEmail="ui.vibe.sidebar.userEmail"
+                width="full"
+                user="hide"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.noUser))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sidenav-dense-label"
+            data-testid="variant"
+            data-block="sidenav"
+            data-variant="dense"
+          >
+            <Title :as="3" size="base" weight="bold" id="sidenav-dense-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sidenav.dense }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SidebarNav
+                :label="ui.vibe.sidebar.label"
+                :brand="ui.site.header.brand"
+                :links="sidenav"
+                current="item-orders"
+                :userName="ui.vibe.sidebar.userName"
+                :userEmail="ui.vibe.sidebar.userEmail"
+                width="full"
+                user="show"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.dense))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-bottomnav-title"
+          data-testid="catalog-block"
+          data-block="bottomnav"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-bottomnav-title">
+              {{ ui.blocks.names.bottomnav }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.bottomnav }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-labels-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="labels"
+          >
+            <Title :as="3" size="base" weight="bold" id="bottomnav-labels-label" data-testid="variant-label">
+              {{ ui.blocks.variants.bottomnav.labels }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                :label="ui.vibe.bottom.label"
+                :tabs="tabs"
+                current="tab-explore"
+                labels="show"
+                position="static"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-icons-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="icons"
+          >
+            <Title :as="3" size="base" weight="bold" id="bottomnav-icons-label" data-testid="variant-label">
+              {{ ui.blocks.variants.bottomnav.icons }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                :label="ui.vibe.bottom.label"
+                :tabs="tabs"
+                current="tab-explore"
+                labels="hide"
+                position="static"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.icons))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-sticky-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="sticky"
+          >
+            <Title :as="3" size="base" weight="bold" id="bottomnav-sticky-label" data-testid="variant-label">
+              {{ ui.blocks.variants.bottomnav.sticky }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                :label="ui.vibe.bottom.label"
+                :tabs="tabs"
+                current="tab-explore"
+                labels="show"
+                position="sticky"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.sticky))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bottomnav-muted-label"
+            data-testid="variant"
+            data-block="bottomnav"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="bottomnav-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.bottomnav.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BottomNav
+                :label="ui.vibe.bottom.label"
+                :tabs="tabs"
+                current="tab-explore"
+                labels="show"
+                position="static"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppStatesPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppStatesPage.vue
new file mode 100644
index 0000000..06b6ed5
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppStatesPage.vue
@@ -0,0 +1,350 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-states page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  EmptyPanel,
+  Group,
+  Link,
+  SkeletonLayout,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Line,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appStates }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 10) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-empty-title"
+          data-testid="catalog-block"
+          data-block="empty"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-empty-title">
+              {{ ui.blocks.names.empty }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.empty }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-illustrated-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="illustrated"
+          >
+            <Title :as="3" size="base" weight="bold" id="empty-illustrated-label" data-testid="variant-label">
+              {{ ui.blocks.variants.empty.illustrated }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-illustrated"
+                :title="ui.dashboard.empty.tour.title"
+                :text="ui.dashboard.empty.tour.text"
+                :cta="ui.dashboard.empty.tour.cta"
+                ctaHref="#/"
+                layout="card"
+                actions="button"
+                visual="image"
+                size="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-orders-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="orders"
+          >
+            <Title :as="3" size="base" weight="bold" id="empty-orders-label" data-testid="variant-label">
+              {{ ui.blocks.variants.empty.orders }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-orders"
+                :title="ui.dashboard.empty.orders.title"
+                :text="ui.dashboard.empty.orders.text"
+                :cta="ui.dashboard.empty.orders.cta"
+                ctaHref="#/"
+                layout="card"
+                actions="button"
+                visual="icon"
+                size="default"
+                icon="shopping-bag"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-results-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="results"
+          >
+            <Title :as="3" size="base" weight="bold" id="empty-results-label" data-testid="variant-label">
+              {{ ui.blocks.variants.empty.results }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-results"
+                :title="ui.dashboard.empty.results.title"
+                :text="ui.dashboard.empty.results.text"
+                :cta="ui.dashboard.empty.results.cta"
+                ctaHref="#/"
+                layout="plain"
+                actions="button"
+                visual="icon"
+                size="default"
+                icon="search"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.results))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-inbox-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="inbox"
+          >
+            <Title :as="3" size="base" weight="bold" id="empty-inbox-label" data-testid="variant-label">
+              {{ ui.blocks.variants.empty.inbox }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-inbox"
+                :title="ui.dashboard.empty.inbox.title"
+                :text="ui.dashboard.empty.inbox.text"
+                :cta="ui.dashboard.empty.inbox.cta"
+                ctaHref="#/"
+                layout="card"
+                actions="none"
+                visual="icon"
+                size="default"
+                icon="inbox"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.inbox))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-compact-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="empty-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.empty.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-compact"
+                :title="ui.dashboard.empty.inbox.title"
+                :text="ui.dashboard.empty.inbox.text"
+                :cta="ui.dashboard.empty.inbox.cta"
+                ctaHref="#/"
+                layout="card"
+                actions="button"
+                visual="icon"
+                size="compact"
+                icon="inbox"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="empty-plainNoAction-label"
+            data-testid="variant"
+            data-block="empty"
+            data-variant="plainNoAction"
+          >
+            <Title :as="3" size="base" weight="bold" id="empty-plainNoAction-label" data-testid="variant-label">
+              {{ ui.blocks.variants.empty.plainNoAction }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <EmptyPanel
+                id="empty-plainNoAction"
+                :title="ui.dashboard.empty.results.title"
+                :text="ui.dashboard.empty.results.text"
+                :cta="ui.dashboard.empty.results.cta"
+                ctaHref="#/"
+                layout="plain"
+                actions="none"
+                visual="icon"
+                size="compact"
+                icon="search"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.plainNoAction))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-skeleton-title"
+          data-testid="catalog-block"
+          data-block="skeleton"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-skeleton-title">
+              {{ ui.blocks.names.skeleton }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.skeleton }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-cards-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="skeleton-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.skeleton.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-cards"
+                :title="ui.vibe.skeleton.title"
+                :label="ui.vibe.skeleton.label"
+                :lines="placeholders"
+                shape="cards"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-list-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="skeleton-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.skeleton.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-list"
+                :title="ui.vibe.skeleton.title"
+                :label="ui.vibe.skeleton.label"
+                :lines="placeholders"
+                shape="list"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-article-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="article"
+          >
+            <Title :as="3" size="base" weight="bold" id="skeleton-article-label" data-testid="variant-label">
+              {{ ui.blocks.variants.skeleton.article }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-article"
+                :title="ui.vibe.skeleton.title"
+                :label="ui.vibe.skeleton.label"
+                :lines="placeholders"
+                shape="article"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.article))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="skeleton-muted-label"
+            data-testid="variant"
+            data-block="skeleton"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="skeleton-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.skeleton.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SkeletonLayout
+                id="skeleton-muted"
+                :title="ui.vibe.skeleton.title"
+                :label="ui.vibe.skeleton.label"
+                :lines="placeholders"
+                shape="cards"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/AppWidgetsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/AppWidgetsPage.vue
new file mode 100644
index 0000000..9246faa
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/AppWidgetsPage.vue
@@ -0,0 +1,445 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The app-widgets page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  ActivityFeed,
+  Block,
+  Box,
+  ChartPanel,
+  Container,
+  Group,
+  Link,
+  MetricRow,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Event,
+  type Point,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.app.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.appWidgets }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 12) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-metrics-title"
+          data-testid="catalog-block"
+          data-block="metrics"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-metrics-title">
+              {{ ui.blocks.names.metrics }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.metrics }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-tiles-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="tiles"
+          >
+            <Title :as="3" size="base" weight="bold" id="metrics-tiles-label" data-testid="variant-label">
+              {{ ui.blocks.variants.metrics.tiles }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-tiles"
+                :title="ui.dashboard.metrics.title"
+                :metrics="metrics"
+                :empty="ui.empty.metrics"
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-twoUp-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="twoUp"
+          >
+            <Title :as="3" size="base" weight="bold" id="metrics-twoUp-label" data-testid="variant-label">
+              {{ ui.blocks.variants.metrics.twoUp }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-twoUp"
+                :title="ui.dashboard.metrics.title"
+                :metrics="metrics"
+                :empty="ui.empty.metrics"
+                cols="2"
+                item="tile"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.twoUp))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-compact-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="metrics-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.metrics.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-compact"
+                :title="ui.dashboard.metrics.title"
+                :metrics="metrics"
+                :empty="ui.empty.metrics"
+                cols="4"
+                item="compact"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="metrics-muted-label"
+            data-testid="variant"
+            data-block="metrics"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="metrics-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.metrics.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MetricRow
+                id="metrics-muted"
+                :title="ui.dashboard.metrics.title"
+                :metrics="metrics"
+                :empty="ui.empty.metrics"
+                cols="2"
+                item="compact"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-chart-title"
+          data-testid="catalog-block"
+          data-block="chart"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-chart-title">
+              {{ ui.blocks.names.chart }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.chart }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-bars-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="bars"
+          >
+            <Title :as="3" size="base" weight="bold" id="chart-bars-label" data-testid="variant-label">
+              {{ ui.blocks.variants.chart.bars }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-bars"
+                :title="ui.dashboard.chart.title"
+                :text="ui.dashboard.chart.text"
+                :series="series"
+                :empty="ui.empty.series"
+                :summary="ui.dashboard.chart.summary"
+                :percent="ui.dashboard.chart.percent"
+                chart="bars"
+                size="default"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-short-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="short"
+          >
+            <Title :as="3" size="base" weight="bold" id="chart-short-label" data-testid="variant-label">
+              {{ ui.blocks.variants.chart.short }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-short"
+                :title="ui.dashboard.chart.title"
+                :text="ui.dashboard.chart.text"
+                :series="series"
+                :empty="ui.empty.series"
+                :summary="ui.dashboard.chart.summary"
+                :percent="ui.dashboard.chart.percent"
+                chart="bars"
+                size="compact"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.short))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-meters-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="meters"
+          >
+            <Title :as="3" size="base" weight="bold" id="chart-meters-label" data-testid="variant-label">
+              {{ ui.blocks.variants.chart.meters }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-meters"
+                :title="ui.dashboard.chart.title"
+                :text="ui.dashboard.chart.text"
+                :series="series"
+                :empty="ui.empty.series"
+                :summary="ui.dashboard.chart.summary"
+                :percent="ui.dashboard.chart.percent"
+                chart="meters"
+                size="default"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="chart-muted-label"
+            data-testid="variant"
+            data-block="chart"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="chart-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.chart.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ChartPanel
+                id="chart-muted"
+                :title="ui.dashboard.chart.title"
+                :text="ui.dashboard.chart.text"
+                :series="series"
+                :empty="ui.empty.series"
+                :summary="ui.dashboard.chart.summary"
+                :percent="ui.dashboard.chart.percent"
+                chart="meters"
+                size="compact"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-activity-title"
+          data-testid="catalog-block"
+          data-block="activity"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-activity-title">
+              {{ ui.blocks.names.activity }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.activity }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-timeline-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="timeline"
+          >
+            <Title :as="3" size="base" weight="bold" id="activity-timeline-label" data-testid="variant-label">
+              {{ ui.blocks.variants.activity.timeline }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-timeline"
+                :title="ui.dashboard.activity.title"
+                :text="ui.dashboard.activity.text"
+                :events="activity"
+                :empty="ui.empty.activity"
+                layout="timeline"
+                density="default"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-list-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="activity-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.activity.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-list"
+                :title="ui.dashboard.activity.title"
+                :text="ui.dashboard.activity.text"
+                :events="activity"
+                :empty="ui.empty.activity"
+                layout="list"
+                density="default"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-compact-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="activity-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.activity.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-compact"
+                :title="ui.dashboard.activity.title"
+                :text="ui.dashboard.activity.text"
+                :events="activity"
+                :empty="ui.empty.activity"
+                layout="list"
+                density="compact"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.compact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="activity-muted-label"
+            data-testid="variant"
+            data-block="activity"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="activity-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.activity.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ActivityFeed
+                id="activity-muted"
+                :title="ui.dashboard.activity.title"
+                :text="ui.dashboard.activity.text"
+                :events="activity"
+                :empty="ui.empty.activity"
+                layout="timeline"
+                density="default"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/CommerceCartPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/CommerceCartPage.vue
new file mode 100644
index 0000000..9a19f98
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/CommerceCartPage.vue
@@ -0,0 +1,399 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-cart page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  CartDrawer,
+  CartList,
+  Container,
+  Group,
+  Link,
+  ShoppingCart,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.commerceCart }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 10) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-cart-title"
+          data-testid="catalog-block"
+          data-block="cart"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-cart-title">
+              {{ ui.blocks.names.cart }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.cart }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-table-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="table"
+          >
+            <Title :as="3" size="base" weight="bold" id="cart-table-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cart.table }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-table"
+                :title="ui.commerce.cart.title"
+                :lines="cart"
+                :empty="ui.empty.cart"
+                :labels="ui.commerce.cart"
+                layout="table"
+                media="image"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-cards-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="cart-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cart.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-cards"
+                :title="ui.commerce.cart.title"
+                :lines="cart"
+                :empty="ui.empty.cart"
+                :labels="ui.commerce.cart"
+                layout="cards"
+                media="image"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-tableCompact-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="tableCompact"
+          >
+            <Title :as="3" size="base" weight="bold" id="cart-tableCompact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cart.tableCompact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-tableCompact"
+                :title="ui.commerce.cart.title"
+                :lines="cart"
+                :empty="ui.empty.cart"
+                :labels="ui.commerce.cart"
+                layout="table"
+                media="none"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.tableCompact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cart-cardsPlain-label"
+            data-testid="variant"
+            data-block="cart"
+            data-variant="cardsPlain"
+          >
+            <Title :as="3" size="base" weight="bold" id="cart-cardsPlain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cart.cardsPlain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartList
+                id="cart-cardsPlain"
+                :title="ui.commerce.cart.title"
+                :lines="cart"
+                :empty="ui.empty.cart"
+                :labels="ui.commerce.cart"
+                layout="cards"
+                media="none"
+                tone="muted"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.cardsPlain))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-cartpage-title"
+          data-testid="catalog-block"
+          data-block="cartpage"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-cartpage-title">
+              {{ ui.blocks.names.cartpage }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.cartpage }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartpage-split-label"
+            data-testid="variant"
+            data-block="cartpage"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="cartpage-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cartpage.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ShoppingCart
+                id="cartpage-split"
+                :title="ui.commerce.cartPage.title"
+                :lines="cart"
+                :rows="summary"
+                :promos="promos"
+                :labels="ui.commerce.cart"
+                :totals="ui.commerce.totals"
+                :actions="ui.commerce.cartPage"
+                layout="split"
+                promo="show"
+                progress="show"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartpage-stacked-label"
+            data-testid="variant"
+            data-block="cartpage"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="cartpage-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cartpage.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ShoppingCart
+                id="cartpage-stacked"
+                :title="ui.commerce.cartPage.title"
+                :lines="cart"
+                :rows="summary"
+                :promos="promos"
+                :labels="ui.commerce.cart"
+                :totals="ui.commerce.totals"
+                :actions="ui.commerce.cartPage"
+                layout="stacked"
+                promo="show"
+                progress="show"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.stacked))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartpage-plain-label"
+            data-testid="variant"
+            data-block="cartpage"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="cartpage-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cartpage.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ShoppingCart
+                id="cartpage-plain"
+                :title="ui.commerce.cartPage.title"
+                :lines="cart"
+                :rows="summary"
+                :promos="promos"
+                :labels="ui.commerce.cart"
+                :totals="ui.commerce.totals"
+                :actions="ui.commerce.cartPage"
+                layout="split"
+                promo="hide"
+                progress="hide"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.plain))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-cartdrawer-title"
+          data-testid="catalog-block"
+          data-block="cartdrawer"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-cartdrawer-title">
+              {{ ui.blocks.names.cartdrawer }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.cartdrawer }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartdrawer-filled-label"
+            data-testid="variant"
+            data-block="cartdrawer"
+            data-variant="filled"
+          >
+            <Title :as="3" size="base" weight="bold" id="cartdrawer-filled-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cartdrawer.filled }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartDrawer
+                id="cartdrawer-filled"
+                :lines="cart"
+                :rows="summary"
+                :labels="ui.commerce.cart"
+                :drawer="ui.commerce.drawer"
+                state="filled"
+                media="image"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartdrawer-compact-label"
+            data-testid="variant"
+            data-block="cartdrawer"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="cartdrawer-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cartdrawer.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartDrawer
+                id="cartdrawer-compact"
+                :lines="cart"
+                :rows="summary"
+                :labels="ui.commerce.cart"
+                :drawer="ui.commerce.drawer"
+                state="filled"
+                media="none"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.compact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cartdrawer-empty-label"
+            data-testid="variant"
+            data-block="cartdrawer"
+            data-variant="empty"
+          >
+            <Title :as="3" size="base" weight="bold" id="cartdrawer-empty-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cartdrawer.empty }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CartDrawer
+                id="cartdrawer-empty"
+                :lines="cart"
+                :rows="summary"
+                :labels="ui.commerce.cart"
+                :drawer="ui.commerce.drawer"
+                state="empty"
+                media="image"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.empty))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/CommerceCategoriesPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/CommerceCategoriesPage.vue
new file mode 100644
index 0000000..28bee59
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/CommerceCategoriesPage.vue
@@ -0,0 +1,251 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-categories page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.commerceCategories }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 7) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-categories-title"
+          data-testid="catalog-block"
+          data-block="categories"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-categories-title">
+              {{ ui.blocks.names.categories }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.categories }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-chips-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="chips"
+          >
+            <Title :as="3" size="base" weight="bold" id="categories-chips-label" data-testid="variant-label">
+              {{ ui.blocks.variants.categories.chips }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                :label="ui.commerce.nav.label"
+                :categories="categories"
+                current="category-all"
+                :tools="ui.commerce.tools"
+                layout="chips"
+                count="show"
+                icon="show"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-bar-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="bar"
+          >
+            <Title :as="3" size="base" weight="bold" id="categories-bar-label" data-testid="variant-label">
+              {{ ui.blocks.variants.categories.bar }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                :label="ui.commerce.nav.label"
+                :categories="categories"
+                current="category-all"
+                :tools="ui.commerce.tools"
+                layout="bar"
+                count="show"
+                icon="show"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-sidebar-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="sidebar"
+          >
+            <Title :as="3" size="base" weight="bold" id="categories-sidebar-label" data-testid="variant-label">
+              {{ ui.blocks.variants.categories.sidebar }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                :label="ui.commerce.nav.label"
+                :categories="categories"
+                current="category-all"
+                :tools="ui.commerce.tools"
+                layout="sidebar"
+                count="show"
+                icon="show"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-chipsPlain-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="chipsPlain"
+          >
+            <Title :as="3" size="base" weight="bold" id="categories-chipsPlain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.categories.chipsPlain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                :label="ui.commerce.nav.label"
+                :categories="categories"
+                current="category-all"
+                :tools="ui.commerce.tools"
+                layout="chips"
+                count="hide"
+                icon="hide"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chipsPlain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-barCompact-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="barCompact"
+          >
+            <Title :as="3" size="base" weight="bold" id="categories-barCompact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.categories.barCompact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                :label="ui.commerce.nav.label"
+                :categories="categories"
+                current="category-all"
+                :tools="ui.commerce.tools"
+                layout="bar"
+                count="show"
+                icon="hide"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.barCompact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-tiles-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="tiles"
+          >
+            <Title :as="3" size="base" weight="bold" id="categories-tiles-label" data-testid="variant-label">
+              {{ ui.blocks.variants.categories.tiles }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                :label="ui.commerce.nav.label"
+                :categories="categories"
+                current="category-all"
+                :tools="ui.commerce.tools"
+                layout="tiles"
+                count="show"
+                icon="show"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.tiles))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="categories-toolbar-label"
+            data-testid="variant"
+            data-block="categories"
+            data-variant="toolbar"
+          >
+            <Title :as="3" size="base" weight="bold" id="categories-toolbar-label" data-testid="variant-label">
+              {{ ui.blocks.variants.categories.toolbar }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CategoryNav
+                :label="ui.commerce.nav.label"
+                :categories="categories"
+                current="category-all"
+                :tools="ui.commerce.tools"
+                layout="toolbar"
+                count="show"
+                icon="hide"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.toolbar))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/CommerceCheckoutPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/CommerceCheckoutPage.vue
new file mode 100644
index 0000000..7e172f0
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/CommerceCheckoutPage.vue
@@ -0,0 +1,368 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-checkout page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  CheckoutForm,
+  Container,
+  Group,
+  Link,
+  OrderSummary,
+  Stack,
+  Stepper,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Day,
+  type Payment,
+  type Promo,
+  type Step,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.commerceCheckout }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 8) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-checkout-title"
+          data-testid="catalog-block"
+          data-block="checkout"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-checkout-title">
+              {{ ui.blocks.names.checkout }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.checkout }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checkout-cards-label"
+            data-testid="variant"
+            data-block="checkout"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="checkout-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checkout.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CheckoutForm
+                id="checkout-cards"
+                :title="ui.commerce.checkout.title"
+                :days="days"
+                :payments="payments"
+                :lines="cart"
+                :rows="summary"
+                :promos="promos"
+                :labels="ui.commerce.checkout"
+                :totals="ui.commerce.totals"
+                layout="cards"
+                summary="aside"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checkout-numbered-label"
+            data-testid="variant"
+            data-block="checkout"
+            data-variant="numbered"
+          >
+            <Title :as="3" size="base" weight="bold" id="checkout-numbered-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checkout.numbered }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CheckoutForm
+                id="checkout-numbered"
+                :title="ui.commerce.checkout.title"
+                :days="days"
+                :payments="payments"
+                :lines="cart"
+                :rows="summary"
+                :promos="promos"
+                :labels="ui.commerce.checkout"
+                :totals="ui.commerce.totals"
+                layout="numbered"
+                summary="aside"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="checkout-noSummary-label"
+            data-testid="variant"
+            data-block="checkout"
+            data-variant="noSummary"
+          >
+            <Title :as="3" size="base" weight="bold" id="checkout-noSummary-label" data-testid="variant-label">
+              {{ ui.blocks.variants.checkout.noSummary }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CheckoutForm
+                id="checkout-noSummary"
+                :title="ui.commerce.checkout.title"
+                :days="days"
+                :payments="payments"
+                :lines="cart"
+                :rows="summary"
+                :promos="promos"
+                :labels="ui.commerce.checkout"
+                :totals="ui.commerce.totals"
+                layout="cards"
+                summary="none"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.noSummary))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-summary-title"
+          data-testid="catalog-block"
+          data-block="summary"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-summary-title">
+              {{ ui.blocks.names.summary }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.summary }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-card-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="card"
+          >
+            <Title :as="3" size="base" weight="bold" id="summary-card-label" data-testid="variant-label">
+              {{ ui.blocks.variants.summary.card }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-card"
+                :title="ui.commerce.summary.title"
+                :rows="summary"
+                :empty="ui.empty.summary"
+                :labels="ui.commerce.summary"
+                layout="card"
+                cta="show"
+                note="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-plain-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="summary-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.summary.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-plain"
+                :title="ui.commerce.summary.title"
+                :rows="summary"
+                :empty="ui.empty.summary"
+                :labels="ui.commerce.summary"
+                layout="plain"
+                cta="show"
+                note="hide"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.plain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-noCta-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="noCta"
+          >
+            <Title :as="3" size="base" weight="bold" id="summary-noCta-label" data-testid="variant-label">
+              {{ ui.blocks.variants.summary.noCta }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-noCta"
+                :title="ui.commerce.summary.title"
+                :rows="summary"
+                :empty="ui.empty.summary"
+                :labels="ui.commerce.summary"
+                layout="card"
+                cta="hide"
+                note="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.noCta))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="summary-muted-label"
+            data-testid="variant"
+            data-block="summary"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="summary-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.summary.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderSummary
+                id="summary-muted"
+                :title="ui.commerce.summary.title"
+                :rows="summary"
+                :empty="ui.empty.summary"
+                :labels="ui.commerce.summary"
+                layout="card"
+                cta="show"
+                note="show"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-stepper-title"
+          data-testid="catalog-block"
+          data-block="stepper"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-stepper-title">
+              {{ ui.blocks.names.stepper }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.stepper }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stepper-horizontal-label"
+            data-testid="variant"
+            data-block="stepper"
+            data-variant="horizontal"
+          >
+            <Title :as="3" size="base" weight="bold" id="stepper-horizontal-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stepper.horizontal }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Stepper
+                id="stepper-horizontal"
+                :title="ui.onboarding.stepper.title"
+                :steps="steps"
+                :current="2"
+                :stepLabel="ui.onboarding.stepper.stepLabel"
+                :back="ui.onboarding.stepper.back"
+                :next="ui.onboarding.stepper.next"
+                layout="horizontal"
+                marker="number"
+                summary="show"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/CommerceDeliveryPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/CommerceDeliveryPage.vue
new file mode 100644
index 0000000..9ba0dc9
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/CommerceDeliveryPage.vue
@@ -0,0 +1,481 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-delivery page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  DeliveryInfo,
+  Group,
+  Link,
+  SlotBoard,
+  Stack,
+  StoreLocations,
+  Text,
+  Title,
+  ZoneTable,
+  tpl,
+  uniqLabel,
+  type Day,
+  type Feature,
+  type Store,
+  type Zone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.commerceDelivery }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 4, 12) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-delivery-title"
+          data-testid="catalog-block"
+          data-block="delivery"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-delivery-title">
+              {{ ui.blocks.names.delivery }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.delivery }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="delivery-full-label"
+            data-testid="variant"
+            data-block="delivery"
+            data-variant="full"
+          >
+            <Title :as="3" size="base" weight="bold" id="delivery-full-label" data-testid="variant-label">
+              {{ ui.blocks.variants.delivery.full }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DeliveryInfo
+                id="delivery-full"
+                :title="ui.commerce.delivery.title"
+                :lead="ui.commerce.delivery.lead"
+                :facts="deliveryfacts"
+                :zones="zones"
+                :labels="ui.commerce.delivery"
+                layout="full"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="delivery-split-label"
+            data-testid="variant"
+            data-block="delivery"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="delivery-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.delivery.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DeliveryInfo
+                id="delivery-split"
+                :title="ui.commerce.delivery.title"
+                :lead="ui.commerce.delivery.lead"
+                :facts="deliveryfacts"
+                :zones="zones"
+                :labels="ui.commerce.delivery"
+                layout="split"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="delivery-facts-label"
+            data-testid="variant"
+            data-block="delivery"
+            data-variant="facts"
+          >
+            <Title :as="3" size="base" weight="bold" id="delivery-facts-label" data-testid="variant-label">
+              {{ ui.blocks.variants.delivery.facts }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <DeliveryInfo
+                id="delivery-facts"
+                :title="ui.commerce.delivery.title"
+                :lead="ui.commerce.delivery.lead"
+                :facts="deliveryfacts"
+                :zones="zones"
+                :labels="ui.commerce.delivery"
+                layout="facts"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.facts))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-zones-title"
+          data-testid="catalog-block"
+          data-block="zones"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-zones-title">
+              {{ ui.blocks.names.zones }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.zones }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="zones-table-label"
+            data-testid="variant"
+            data-block="zones"
+            data-variant="table"
+          >
+            <Title :as="3" size="base" weight="bold" id="zones-table-label" data-testid="variant-label">
+              {{ ui.blocks.variants.zones.table }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ZoneTable
+                id="zones-table"
+                :title="ui.commerce.zones.title"
+                :lead="ui.commerce.zones.lead"
+                :zones="zones"
+                :empty="ui.empty.zones"
+                :labels="ui.commerce.zones"
+                layout="table"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="zones-cards-label"
+            data-testid="variant"
+            data-block="zones"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="zones-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.zones.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ZoneTable
+                id="zones-cards"
+                :title="ui.commerce.zones.title"
+                :lead="ui.commerce.zones.lead"
+                :zones="zones"
+                :empty="ui.empty.zones"
+                :labels="ui.commerce.zones"
+                layout="cards"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="zones-tableMuted-label"
+            data-testid="variant"
+            data-block="zones"
+            data-variant="tableMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="zones-tableMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.zones.tableMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ZoneTable
+                id="zones-tableMuted"
+                :title="ui.commerce.zones.title"
+                :lead="ui.commerce.zones.lead"
+                :zones="zones"
+                :empty="ui.empty.zones"
+                :labels="ui.commerce.zones"
+                layout="table"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.tableMuted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-slots-title"
+          data-testid="catalog-block"
+          data-block="slots"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-slots-title">
+              {{ ui.blocks.names.slots }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.slots }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="slots-split-label"
+            data-testid="variant"
+            data-block="slots"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="slots-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.slots.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SlotBoard
+                id="slots-split"
+                :title="ui.commerce.slots.title"
+                :lead="ui.commerce.slots.lead"
+                :days="days"
+                :empty="ui.empty.days"
+                :zone="zones.find((i) => i.id === 'zone-central')!"
+                :labels="ui.commerce.slots"
+                layout="split"
+                item="card"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="slots-plain-label"
+            data-testid="variant"
+            data-block="slots"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="slots-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.slots.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SlotBoard
+                id="slots-plain"
+                :title="ui.commerce.slots.title"
+                :lead="ui.commerce.slots.lead"
+                :days="days"
+                :empty="ui.empty.days"
+                :zone="zones.find((i) => i.id === 'zone-central')!"
+                :labels="ui.commerce.slots"
+                layout="split"
+                item="plain"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.plain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="slots-stacked-label"
+            data-testid="variant"
+            data-block="slots"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="slots-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.slots.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SlotBoard
+                id="slots-stacked"
+                :title="ui.commerce.slots.title"
+                :lead="ui.commerce.slots.lead"
+                :days="days"
+                :empty="ui.empty.days"
+                :zone="zones.find((i) => i.id === 'zone-central')!"
+                :labels="ui.commerce.slots"
+                layout="stacked"
+                item="card"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.stacked))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-locations-title"
+          data-testid="catalog-block"
+          data-block="locations"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-locations-title">
+              {{ ui.blocks.names.locations }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.locations }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="locations-cards-label"
+            data-testid="variant"
+            data-block="locations"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="locations-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.locations.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreLocations
+                id="locations-cards"
+                :title="ui.commerce.stores.title"
+                :lead="ui.commerce.stores.lead"
+                :stores="stores"
+                :empty="ui.empty.stores"
+                :kinds="ui.commerce.stores.kinds"
+                :labels="ui.commerce.stores"
+                layout="cards"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="locations-list-label"
+            data-testid="variant"
+            data-block="locations"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="locations-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.locations.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreLocations
+                id="locations-list"
+                :title="ui.commerce.stores.title"
+                :lead="ui.commerce.stores.lead"
+                :stores="stores"
+                :empty="ui.empty.stores"
+                :kinds="ui.commerce.stores.kinds"
+                :labels="ui.commerce.stores"
+                layout="list"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="locations-map-label"
+            data-testid="variant"
+            data-block="locations"
+            data-variant="map"
+          >
+            <Title :as="3" size="base" weight="bold" id="locations-map-label" data-testid="variant-label">
+              {{ ui.blocks.variants.locations.map }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreLocations
+                id="locations-map"
+                :title="ui.commerce.stores.title"
+                :lead="ui.commerce.stores.lead"
+                :stores="stores"
+                :empty="ui.empty.stores"
+                :kinds="ui.commerce.stores.kinds"
+                :labels="ui.commerce.stores"
+                layout="map"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.map))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/CommerceOrdersPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/CommerceOrdersPage.vue
new file mode 100644
index 0000000..43c24a9
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/CommerceOrdersPage.vue
@@ -0,0 +1,189 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-orders page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  OrderTable,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Order,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+const ORDERS_FIELDS = {
+  "id": "id",
+  "number": "title",
+  "date": "metadata.date.value|date",
+  "total": "metadata.total.value",
+  "currency": "metadata.currency.value",
+  "status": "metadata.order_status.value",
+  "items": "metadata.items.value",
+} as const;
+
+const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.commerceOrders }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 4) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-orders-title"
+          data-testid="catalog-block"
+          data-block="orders"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-orders-title">
+              {{ ui.blocks.names.orders }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.orders }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-table-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="table"
+          >
+            <Title :as="3" size="base" weight="bold" id="orders-table-label" data-testid="variant-label">
+              {{ ui.blocks.variants.orders.table }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-table"
+                :title="ui.commerce.orders.title"
+                :orders="orders"
+                :empty="ui.empty.orders"
+                :statuses="ui.status"
+                :labels="ui.commerce.orders"
+                layout="table"
+                pager="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-cards-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="orders-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.orders.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-cards"
+                :title="ui.commerce.orders.title"
+                :orders="orders"
+                :empty="ui.empty.orders"
+                :statuses="ui.status"
+                :labels="ui.commerce.orders"
+                layout="cards"
+                pager="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-noPager-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="noPager"
+          >
+            <Title :as="3" size="base" weight="bold" id="orders-noPager-label" data-testid="variant-label">
+              {{ ui.blocks.variants.orders.noPager }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-noPager"
+                :title="ui.commerce.orders.title"
+                :orders="orders"
+                :empty="ui.empty.orders"
+                :statuses="ui.status"
+                :labels="ui.commerce.orders"
+                layout="table"
+                pager="hide"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.noPager))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="orders-compactMuted-label"
+            data-testid="variant"
+            data-block="orders"
+            data-variant="compactMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="orders-compactMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.orders.compactMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <OrderTable
+                id="orders-compactMuted"
+                :title="ui.commerce.orders.title"
+                :orders="orders"
+                :empty="ui.empty.orders"
+                :statuses="ui.status"
+                :labels="ui.commerce.orders"
+                layout="table"
+                pager="hide"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.compactMuted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/CommerceProductPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/CommerceProductPage.vue
new file mode 100644
index 0000000..9ba222b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/CommerceProductPage.vue
@@ -0,0 +1,496 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-product page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductDetail,
+  ProductInfo,
+  ReviewList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Detail,
+  type Product,
+  type Review,
+  type Spec,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.commerceProduct }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 13) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-product-title"
+          data-testid="catalog-block"
+          data-block="product"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-product-title">
+              {{ ui.blocks.names.product }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.product }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-split-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="product-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.product.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-split"
+                :product="products.find((i) => i.id === 'product-lamp')!"
+                :labels="ui.commerce.detail"
+                :badges="ui.commerce.badges"
+                layout="split"
+                mediaSide="start"
+                thumbs="below"
+                buy="full"
+                tone="default"
+                density="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-splitEnd-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="splitEnd"
+          >
+            <Title :as="3" size="base" weight="bold" id="product-splitEnd-label" data-testid="variant-label">
+              {{ ui.blocks.variants.product.splitEnd }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-splitEnd"
+                :product="products.find((i) => i.id === 'product-lamp')!"
+                :labels="ui.commerce.detail"
+                :badges="ui.commerce.badges"
+                layout="split"
+                mediaSide="end"
+                thumbs="below"
+                buy="full"
+                tone="default"
+                density="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.splitEnd))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-stacked-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="product-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.product.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-stacked"
+                :product="products.find((i) => i.id === 'product-lamp')!"
+                :labels="ui.commerce.detail"
+                :badges="ui.commerce.badges"
+                layout="stacked"
+                mediaSide="start"
+                thumbs="none"
+                buy="full"
+                tone="default"
+                density="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.stacked))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-compact-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="product-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.product.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-compact"
+                :product="products.find((i) => i.id === 'product-lamp')!"
+                :labels="ui.commerce.detail"
+                :badges="ui.commerce.badges"
+                layout="split"
+                mediaSide="start"
+                thumbs="none"
+                buy="compact"
+                tone="default"
+                density="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.compact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="product-muted-label"
+            data-testid="variant"
+            data-block="product"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="product-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.product.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductDetail
+                id="product-muted"
+                :product="products.find((i) => i.id === 'product-lamp')!"
+                :labels="ui.commerce.detail"
+                :badges="ui.commerce.badges"
+                layout="split"
+                mediaSide="start"
+                thumbs="below"
+                buy="full"
+                tone="muted"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.product, ui.blocks.variants.product.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-productinfo-title"
+          data-testid="catalog-block"
+          data-block="productinfo"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-productinfo-title">
+              {{ ui.blocks.names.productinfo }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.productinfo }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="productinfo-split-label"
+            data-testid="variant"
+            data-block="productinfo"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="productinfo-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.productinfo.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductInfo
+                id="productinfo-split"
+                :title="ui.commerce.info.title"
+                :details="details"
+                :specs="specs"
+                :labels="ui.commerce.info"
+                layout="split"
+                expand="first"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="productinfo-stacked-label"
+            data-testid="variant"
+            data-block="productinfo"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="productinfo-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.productinfo.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductInfo
+                id="productinfo-stacked"
+                :title="ui.commerce.info.title"
+                :details="details"
+                :specs="specs"
+                :labels="ui.commerce.info"
+                layout="stacked"
+                expand="first"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.stacked))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="productinfo-closed-label"
+            data-testid="variant"
+            data-block="productinfo"
+            data-variant="closed"
+          >
+            <Title :as="3" size="base" weight="bold" id="productinfo-closed-label" data-testid="variant-label">
+              {{ ui.blocks.variants.productinfo.closed }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductInfo
+                id="productinfo-closed"
+                :title="ui.commerce.info.title"
+                :details="details"
+                :specs="specs"
+                :labels="ui.commerce.info"
+                layout="split"
+                expand="none"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.closed))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-reviews-title"
+          data-testid="catalog-block"
+          data-block="reviews"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-reviews-title">
+              {{ ui.blocks.names.reviews }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.reviews }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-list-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="reviews-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.reviews.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-list"
+                :title="ui.commerce.reviews.title"
+                :reviews="reviews"
+                :labels="ui.commerce.reviewLabels"
+                layout="list"
+                item="card"
+                avatar="none"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-grid-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="grid"
+          >
+            <Title :as="3" size="base" weight="bold" id="reviews-grid-label" data-testid="variant-label">
+              {{ ui.blocks.variants.reviews.grid }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-grid"
+                :title="ui.commerce.reviews.title"
+                :reviews="reviews"
+                :labels="ui.commerce.reviewLabels"
+                layout="grid"
+                item="card"
+                avatar="none"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-plain-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="reviews-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.reviews.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-plain"
+                :title="ui.commerce.reviews.title"
+                :reviews="reviews"
+                :labels="ui.commerce.reviewLabels"
+                layout="list"
+                item="plain"
+                avatar="none"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.plain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-avatars-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="avatars"
+          >
+            <Title :as="3" size="base" weight="bold" id="reviews-avatars-label" data-testid="variant-label">
+              {{ ui.blocks.variants.reviews.avatars }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-avatars"
+                :title="ui.commerce.reviews.title"
+                :reviews="reviews"
+                :labels="ui.commerce.reviewLabels"
+                layout="list"
+                item="card"
+                avatar="image"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.avatars))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="reviews-mutedGrid-label"
+            data-testid="variant"
+            data-block="reviews"
+            data-variant="mutedGrid"
+          >
+            <Title :as="3" size="base" weight="bold" id="reviews-mutedGrid-label" data-testid="variant-label">
+              {{ ui.blocks.variants.reviews.mutedGrid }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ReviewList
+                id="reviews-mutedGrid"
+                :title="ui.commerce.reviews.title"
+                :reviews="reviews"
+                :labels="ui.commerce.reviewLabels"
+                layout="grid"
+                item="card"
+                avatar="image"
+                tone="muted"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.mutedGrid))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/CommerceProductsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/CommerceProductsPage.vue
new file mode 100644
index 0000000..29698f0
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/CommerceProductsPage.vue
@@ -0,0 +1,353 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-products page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProductGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Product,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.commerceProducts }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 9) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-products-title"
+          data-testid="catalog-block"
+          data-block="products"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-products-title">
+              {{ ui.blocks.names.products }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.products }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-grid3-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="grid3"
+          >
+            <Title :as="3" size="base" weight="bold" id="products-grid3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.products.grid3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-grid3"
+                :title="ui.commerce.products.title"
+                :products="products"
+                :labels="ui.commerce.productLabels"
+                :badges="ui.commerce.badges"
+                layout="grid"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-grid4-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="grid4"
+          >
+            <Title :as="3" size="base" weight="bold" id="products-grid4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.products.grid4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-grid4"
+                :title="ui.commerce.products.title"
+                :products="products"
+                :labels="ui.commerce.productLabels"
+                :badges="ui.commerce.badges"
+                layout="grid"
+                cols="1-4"
+                ratio="1/1"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-grid2-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="grid2"
+          >
+            <Title :as="3" size="base" weight="bold" id="products-grid2-label" data-testid="variant-label">
+              {{ ui.blocks.variants.products.grid2 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-grid2"
+                :title="ui.commerce.products.title"
+                :products="products"
+                :labels="ui.commerce.productLabels"
+                :badges="ui.commerce.badges"
+                layout="grid"
+                cols="1-2"
+                ratio="3/4"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid2))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-list-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="products-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.products.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-list"
+                :title="ui.commerce.products.title"
+                :products="products"
+                :labels="ui.commerce.productLabels"
+                :badges="ui.commerce.badges"
+                layout="list"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-catalog-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="catalog"
+          >
+            <Title :as="3" size="base" weight="bold" id="products-catalog-label" data-testid="variant-label">
+              {{ ui.blocks.variants.products.catalog }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-catalog"
+                :title="ui.commerce.products.title"
+                :products="products"
+                :labels="ui.commerce.productLabels"
+                :badges="ui.commerce.badges"
+                layout="grid"
+                cols="1-4"
+                ratio="1/1"
+                rating="hide"
+                action="button"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-browse-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="browse"
+          >
+            <Title :as="3" size="base" weight="bold" id="products-browse-label" data-testid="variant-label">
+              {{ ui.blocks.variants.products.browse }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-browse"
+                :title="ui.commerce.products.title"
+                :products="products"
+                :labels="ui.commerce.productLabels"
+                :badges="ui.commerce.badges"
+                layout="grid"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="none"
+                tone="muted"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-showcase-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="showcase"
+          >
+            <Title :as="3" size="base" weight="bold" id="products-showcase-label" data-testid="variant-label">
+              {{ ui.blocks.variants.products.showcase }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-showcase"
+                :title="ui.commerce.products.title"
+                :products="products"
+                :labels="ui.commerce.productLabels"
+                :badges="ui.commerce.badges"
+                layout="grid"
+                cols="1-3"
+                ratio="3/4"
+                rating="show"
+                action="button"
+                tone="default"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-rail-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="rail"
+          >
+            <Title :as="3" size="base" weight="bold" id="products-rail-label" data-testid="variant-label">
+              {{ ui.blocks.variants.products.rail }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-rail"
+                :title="ui.commerce.products.title"
+                :products="products"
+                :labels="ui.commerce.productLabels"
+                :badges="ui.commerce.badges"
+                layout="rail"
+                cols="1-3"
+                ratio="4/3"
+                rating="show"
+                action="button"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="products-railCompact-label"
+            data-testid="variant"
+            data-block="products"
+            data-variant="railCompact"
+          >
+            <Title :as="3" size="base" weight="bold" id="products-railCompact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.products.railCompact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProductGrid
+                id="products-railCompact"
+                :title="ui.commerce.products.title"
+                :products="products"
+                :labels="ui.commerce.productLabels"
+                :badges="ui.commerce.badges"
+                layout="rail"
+                cols="1-3"
+                ratio="1/1"
+                rating="hide"
+                action="button"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/CommerceStorefrontPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/CommerceStorefrontPage.vue
new file mode 100644
index 0000000..fd453e6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/CommerceStorefrontPage.vue
@@ -0,0 +1,395 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The commerce-storefront page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroClassic,
+  Link,
+  Stack,
+  StoreHero,
+  Text,
+  Title,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+
+const STOREHERO_ACTIONS = {
+  mode: "two",
+  cta: ui.commerce.storeHero.cta,
+  href: "#/catalog",
+  secondary: ui.commerce.storeHero.secondary,
+  secondaryHref: "#/delivery",
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.commerce.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.commerceStorefront }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 10) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-hero-title"
+          data-testid="catalog-block"
+          data-block="hero"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-hero-title">
+              {{ ui.blocks.names.hero }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.hero }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-shop-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="shop"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.shop }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-shop"
+                :title="ui.cases.shop.hero.title"
+                :text="ui.cases.shop.hero.text"
+                :actions="{
+                  cta: ui.cases.shop.hero.cta,
+                  href: '#/pricing',
+                  secondary: ui.cases.shop.hero.secondary,
+                  secondaryHref: '#/pricing',
+                  emailLabel: ui.promo.newsletter.label,
+                  mode: 'one',
+                }"
+                :media="{
+                  codeTitle: ui.vibe.code.title,
+                  prompt: ui.vibe.code.prompt,
+                  lines: terminal,
+                  kind: 'image',
+                  side: 'start',
+                }"
+                layout="split"
+                scale="default"
+                tone="muted"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-storehero-title"
+          data-testid="catalog-block"
+          data-block="storehero"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-storehero-title">
+              {{ ui.blocks.names.storehero }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.storehero }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-overlay-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="overlay"
+          >
+            <Title :as="3" size="base" weight="bold" id="storehero-overlay-label" data-testid="variant-label">
+              {{ ui.blocks.variants.storehero.overlay }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-overlay"
+                :title="ui.commerce.storeHero.title"
+                :lead="ui.commerce.storeHero.lead"
+                :badge="ui.commerce.storeHero.badge"
+                :perks="perks"
+                :card="ui.commerce.storeHero.card"
+                :actions="STOREHERO_ACTIONS"
+                layout="overlay"
+                mediaSide="end"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlay))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-overlayStart-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="overlayStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="storehero-overlayStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.storehero.overlayStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-overlayStart"
+                :title="ui.commerce.storeHero.title"
+                :lead="ui.commerce.storeHero.lead"
+                :badge="ui.commerce.storeHero.badge"
+                :perks="perks"
+                :card="ui.commerce.storeHero.card"
+                :actions="STOREHERO_ACTIONS"
+                layout="overlay"
+                mediaSide="start"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.overlayStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-backdrop-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="backdrop"
+          >
+            <Title :as="3" size="base" weight="bold" id="storehero-backdrop-label" data-testid="variant-label">
+              {{ ui.blocks.variants.storehero.backdrop }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-backdrop"
+                :title="ui.commerce.storeHero.title"
+                :lead="ui.commerce.storeHero.lead"
+                :badge="ui.commerce.storeHero.badge"
+                :perks="perks"
+                :card="ui.commerce.storeHero.card"
+                :actions="STOREHERO_ACTIONS"
+                layout="backdrop"
+                mediaSide="end"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.backdrop))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storehero-muted-label"
+            data-testid="variant"
+            data-block="storehero"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="storehero-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.storehero.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoreHero
+                id="storehero-muted"
+                :title="ui.commerce.storeHero.title"
+                :lead="ui.commerce.storeHero.lead"
+                :badge="ui.commerce.storeHero.badge"
+                :perks="perks"
+                :card="ui.commerce.storeHero.card"
+                :actions="{ ...STOREHERO_ACTIONS, mode: 'one' }"
+                layout="overlay"
+                mediaSide="end"
+                tone="muted"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storehero, ui.blocks.variants.storehero.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-usp-title"
+          data-testid="catalog-block"
+          data-block="usp"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-usp-title">
+              {{ ui.blocks.names.usp }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.usp }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-strip-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="strip"
+          >
+            <Title :as="3" size="base" weight="bold" id="usp-strip-label" data-testid="variant-label">
+              {{ ui.blocks.variants.usp.strip }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-strip"
+                :perks="perks"
+                :empty="ui.empty.perks"
+                layout="strip"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-cards-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="usp-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.usp.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-cards"
+                :perks="perks"
+                :empty="ui.empty.perks"
+                layout="cards"
+                tone="default"
+                density="default"
+                :title="ui.commerce.usp.title"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-stripCompact-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="stripCompact"
+          >
+            <Title :as="3" size="base" weight="bold" id="usp-stripCompact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.usp.stripCompact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-stripCompact"
+                :perks="perks"
+                :empty="ui.empty.perks"
+                layout="strip"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.stripCompact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-bar-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="bar"
+          >
+            <Title :as="3" size="base" weight="bold" id="usp-bar-label" data-testid="variant-label">
+              {{ ui.blocks.variants.usp.bar }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-bar"
+                :perks="perks"
+                :empty="ui.empty.perks"
+                layout="bar"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.bar))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usp-barMuted-label"
+            data-testid="variant"
+            data-block="usp"
+            data-variant="barMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="usp-barMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.usp.barMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UspStrip
+                id="usp-barMuted"
+                :perks="perks"
+                :empty="ui.empty.perks"
+                layout="bar"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.barMuted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/ContentArticlePage.vue b/apps/host-vue/xgen/screens/CatalogScreen/ContentArticlePage.vue
new file mode 100644
index 0000000..535a44f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/ContentArticlePage.vue
@@ -0,0 +1,173 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-article page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  ArticleBody,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Section,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.contentArticle }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 4) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-article-title"
+          data-testid="catalog-block"
+          data-block="article"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-article-title">
+              {{ ui.blocks.names.article }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.article }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-column-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="column"
+          >
+            <Title :as="3" size="base" weight="bold" id="article-column-label" data-testid="variant-label">
+              {{ ui.blocks.variants.article.column }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-column"
+                :title="ui.vibe.article.title"
+                :sections="article"
+                :empty="ui.empty.sections"
+                :tocTitle="ui.vibe.article.toc"
+                layout="column"
+                quotes="show"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-toc-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="toc"
+          >
+            <Title :as="3" size="base" weight="bold" id="article-toc-label" data-testid="variant-label">
+              {{ ui.blocks.variants.article.toc }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-toc"
+                :title="ui.vibe.article.title"
+                :sections="article"
+                :empty="ui.empty.sections"
+                :tocTitle="ui.vibe.article.toc"
+                layout="toc"
+                quotes="show"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-plain-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="article-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.article.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-plain"
+                :title="ui.vibe.article.title"
+                :sections="article"
+                :empty="ui.empty.sections"
+                :tocTitle="ui.vibe.article.toc"
+                layout="column"
+                quotes="hide"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="article-muted-label"
+            data-testid="variant"
+            data-block="article"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="article-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.article.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ArticleBody
+                id="article-muted"
+                :title="ui.vibe.article.title"
+                :sections="article"
+                :empty="ui.empty.sections"
+                :tocTitle="ui.vibe.article.toc"
+                layout="column"
+                quotes="show"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/ContentBlogPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/ContentBlogPage.vue
new file mode 100644
index 0000000..33efc62
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/ContentBlogPage.vue
@@ -0,0 +1,356 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-blog page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+
+const POSTS_FILTER = { topics, label: ui.vibe.posts.topics, topic: "" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.contentBlog }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 9) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-posts-title"
+          data-testid="catalog-block"
+          data-block="posts"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-posts-title">
+              {{ ui.blocks.names.posts }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.posts }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-grid-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="grid"
+          >
+            <Title :as="3" size="base" weight="bold" id="posts-grid-label" data-testid="variant-label">
+              {{ ui.blocks.variants.posts.grid }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-grid"
+                :title="ui.content.posts.title"
+                :posts="posts"
+                :labels="ui.content.labels"
+                :filter="{ ...POSTS_FILTER, mode: 'none' }"
+                :action="{ label: ui.content.posts.action, href: '#/' }"
+                layout="grid"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-filters-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="filters"
+          >
+            <Title :as="3" size="base" weight="bold" id="posts-filters-label" data-testid="variant-label">
+              {{ ui.blocks.variants.posts.filters }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-filters"
+                :title="ui.content.posts.title"
+                :posts="posts"
+                :labels="ui.content.labels"
+                :filter="{ ...POSTS_FILTER, topic: 'Design', mode: 'topics' }"
+                :action="{ label: ui.content.posts.action, href: '#/' }"
+                layout="grid"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-twoUp-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="twoUp"
+          >
+            <Title :as="3" size="base" weight="bold" id="posts-twoUp-label" data-testid="variant-label">
+              {{ ui.blocks.variants.posts.twoUp }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-twoUp"
+                :title="ui.content.posts.title"
+                :posts="posts"
+                :labels="ui.content.labels"
+                :filter="{ ...POSTS_FILTER, mode: 'none' }"
+                :action="{ label: ui.content.posts.action, href: '#/' }"
+                layout="grid"
+                cols="1-2"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-row4-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="row4"
+          >
+            <Title :as="3" size="base" weight="bold" id="posts-row4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.posts.row4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-row4"
+                :title="ui.content.posts.title"
+                :posts="posts"
+                :labels="ui.content.labels"
+                :filter="{ ...POSTS_FILTER, mode: 'none' }"
+                :action="{ label: ui.content.posts.action, href: '#/' }"
+                layout="grid"
+                cols="1-4"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.row4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-news4-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="news4"
+          >
+            <Title :as="3" size="base" weight="bold" id="posts-news4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.posts.news4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-news4"
+                :title="ui.content.posts.title"
+                :posts="posts"
+                :labels="ui.content.labels"
+                :filter="{ ...POSTS_FILTER, mode: 'none' }"
+                :action="{ label: ui.content.posts.action, href: '#/' }"
+                layout="grid"
+                cols="1-4"
+                media="image"
+                meta="news"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.news4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-list-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="posts-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.posts.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-list"
+                :title="ui.content.posts.title"
+                :posts="posts"
+                :labels="ui.content.labels"
+                :filter="{ ...POSTS_FILTER, mode: 'none' }"
+                :action="{ label: ui.content.posts.action, href: '#/' }"
+                layout="list"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-magazine-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="magazine"
+          >
+            <Title :as="3" size="base" weight="bold" id="posts-magazine-label" data-testid="variant-label">
+              {{ ui.blocks.variants.posts.magazine }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-magazine"
+                :title="ui.content.posts.title"
+                :posts="posts"
+                :labels="ui.content.labels"
+                :filter="{ ...POSTS_FILTER, mode: 'none' }"
+                :action="{ label: ui.content.posts.action, href: '#/' }"
+                layout="magazine"
+                cols="1-3"
+                media="image"
+                meta="full"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-textOnly-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="textOnly"
+          >
+            <Title :as="3" size="base" weight="bold" id="posts-textOnly-label" data-testid="variant-label">
+              {{ ui.blocks.variants.posts.textOnly }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-textOnly"
+                :title="ui.content.posts.title"
+                :posts="posts"
+                :labels="ui.content.labels"
+                :filter="{ ...POSTS_FILTER, mode: 'none' }"
+                :action="{ label: ui.content.posts.action, href: '#/' }"
+                layout="grid"
+                cols="1-3"
+                media="none"
+                meta="full"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="posts-digest-label"
+            data-testid="variant"
+            data-block="posts"
+            data-variant="digest"
+          >
+            <Title :as="3" size="base" weight="bold" id="posts-digest-label" data-testid="variant-label">
+              {{ ui.blocks.variants.posts.digest }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostGrid
+                id="posts-digest"
+                :title="ui.content.posts.title"
+                :posts="posts"
+                :labels="ui.content.labels"
+                :filter="{ ...POSTS_FILTER, mode: 'none' }"
+                :action="{ label: ui.content.posts.action, href: '#/' }"
+                layout="grid"
+                cols="1-3"
+                media="none"
+                meta="short"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/ContentPostHeaderPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/ContentPostHeaderPage.vue
new file mode 100644
index 0000000..90523cb
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/ContentPostHeaderPage.vue
@@ -0,0 +1,184 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-post-header page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.contentPostHeader }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 4) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-postheader-title"
+          data-testid="catalog-block"
+          data-block="postheader"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-postheader-title">
+              {{ ui.blocks.names.postheader }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.postheader }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-start-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="start"
+          >
+            <Title :as="3" size="base" weight="bold" id="postheader-start-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postheader.start }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-start"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.labels"
+                layout="start"
+                cover="show"
+                meta="full"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.start))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-center-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="center"
+          >
+            <Title :as="3" size="base" weight="bold" id="postheader-center-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postheader.center }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-center"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.labels"
+                layout="center"
+                cover="show"
+                meta="full"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.center))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-noCover-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="noCover"
+          >
+            <Title :as="3" size="base" weight="bold" id="postheader-noCover-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postheader.noCover }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-noCover"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.labels"
+                layout="start"
+                cover="hide"
+                meta="full"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.noCover))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postheader-minimal-label"
+            data-testid="variant"
+            data-block="postheader"
+            data-variant="minimal"
+          >
+            <Title :as="3" size="base" weight="bold" id="postheader-minimal-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postheader.minimal }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostHeader
+                id="postheader-minimal"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.labels"
+                layout="center"
+                cover="hide"
+                meta="short"
+                tone="muted"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postheader, ui.blocks.variants.postheader.minimal))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.vue
new file mode 100644
index 0000000..6e82f2f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/ContentPostHeaderSplitPage.vue
@@ -0,0 +1,270 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-post-header-split page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Post,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+
+const POSTSPLIT_EXTRAS = {
+  role: ui.content.postSplit.role,
+  bio: ui.content.postSplit.bio,
+  views: ui.content.postSplit.views,
+  likes: ui.content.postSplit.likes,
+  tags: posttags,
+  outline,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.contentPostHeaderSplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 6) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-postsplit-title"
+          data-testid="catalog-block"
+          data-block="postsplit"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-postsplit-title">
+              {{ ui.blocks.names.postsplit }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.postsplit }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-centerShare-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="centerShare"
+          >
+            <Title :as="3" size="base" weight="bold" id="postsplit-centerShare-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postsplit.centerShare }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-centerShare"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.postSplit.labels"
+                :extras="POSTSPLIT_EXTRAS"
+                layout="center"
+                mediaSide="end"
+                author="line"
+                cover="wide"
+                actions="pair"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.centerShare))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitTags-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitTags"
+          >
+            <Title :as="3" size="base" weight="bold" id="postsplit-splitTags-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postsplit.splitTags }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitTags"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.postSplit.labels"
+                :extras="POSTSPLIT_EXTRAS"
+                layout="split"
+                mediaSide="end"
+                author="line"
+                cover="wide"
+                actions="pair"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitTags))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitBioStart-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitBioStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="postsplit-splitBioStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postsplit.splitBioStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitBioStart"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.postSplit.labels"
+                :extras="POSTSPLIT_EXTRAS"
+                layout="split"
+                mediaSide="start"
+                author="bio"
+                cover="wide"
+                actions="wide"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitBioStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitSquare-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitSquare"
+          >
+            <Title :as="3" size="base" weight="bold" id="postsplit-splitSquare-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postsplit.splitSquare }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitSquare"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.postSplit.labels"
+                :extras="POSTSPLIT_EXTRAS"
+                layout="split"
+                mediaSide="end"
+                author="line"
+                cover="square"
+                actions="icons"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitSquare))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-outlineStart-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="outlineStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="postsplit-outlineStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postsplit.outlineStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-outlineStart"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.postSplit.labels"
+                :extras="POSTSPLIT_EXTRAS"
+                layout="outline"
+                mediaSide="start"
+                author="line"
+                cover="wide"
+                actions="pair"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.outlineStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postsplit-splitStats-label"
+            data-testid="variant"
+            data-block="postsplit"
+            data-variant="splitStats"
+          >
+            <Title :as="3" size="base" weight="bold" id="postsplit-splitStats-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postsplit.splitStats }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostSplit
+                id="postsplit-splitStats"
+                :post="posts.find((i) => i.id === 'post-static-first')!"
+                :labels="ui.content.postSplit.labels"
+                :extras="POSTSPLIT_EXTRAS"
+                layout="split"
+                mediaSide="end"
+                author="card"
+                cover="wide"
+                actions="pair"
+                tone="muted"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postsplit, ui.blocks.variants.postsplit.splitStats))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/ContentPostShowcasePage.vue b/apps/host-vue/xgen/screens/CatalogScreen/ContentPostShowcasePage.vue
new file mode 100644
index 0000000..62bd0f9
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/ContentPostShowcasePage.vue
@@ -0,0 +1,200 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-post-showcase page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PostShowcase,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Post,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.contentPostShowcase }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 4) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-postshowcase-title"
+          data-testid="catalog-block"
+          data-block="postshowcase"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-postshowcase-title">
+              {{ ui.blocks.names.postshowcase }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.postshowcase }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-introCards-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="introCards"
+          >
+            <Title :as="3" size="base" weight="bold" id="postshowcase-introCards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postshowcase.introCards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-introCards"
+                :title="ui.content.postShowcase.title"
+                :lead="ui.content.postShowcase.lead"
+                :badge="ui.content.postShowcase.badge"
+                :posts="posts"
+                :empty="ui.empty.posts"
+                :labels="ui.content.labels"
+                :action="{ label: ui.content.postShowcase.action, href: '#/articles' }"
+                layout="intro"
+                cols="3"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-featuredEnd-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="featuredEnd"
+          >
+            <Title :as="3" size="base" weight="bold" id="postshowcase-featuredEnd-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postshowcase.featuredEnd }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-featuredEnd"
+                :title="ui.content.postShowcase.title"
+                :lead="ui.content.postShowcase.lead"
+                :badge="ui.content.postShowcase.badge"
+                :posts="posts"
+                :empty="ui.empty.posts"
+                :labels="ui.content.labels"
+                :action="{ label: ui.content.postShowcase.action, href: '#/articles' }"
+                layout="featured"
+                cols="3"
+                mediaSide="end"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.featuredEnd))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-overlay3-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="overlay3"
+          >
+            <Title :as="3" size="base" weight="bold" id="postshowcase-overlay3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postshowcase.overlay3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-overlay3"
+                :title="ui.content.postShowcase.title"
+                :lead="ui.content.postShowcase.lead"
+                :badge="ui.content.postShowcase.badge"
+                :posts="posts"
+                :empty="ui.empty.posts"
+                :labels="ui.content.labels"
+                :action="{ label: ui.content.postShowcase.action, href: '#/articles' }"
+                layout="overlay"
+                cols="3"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="postshowcase-overlay2-label"
+            data-testid="variant"
+            data-block="postshowcase"
+            data-variant="overlay2"
+          >
+            <Title :as="3" size="base" weight="bold" id="postshowcase-overlay2-label" data-testid="variant-label">
+              {{ ui.blocks.variants.postshowcase.overlay2 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PostShowcase
+                id="postshowcase-overlay2"
+                :title="ui.content.postShowcase.title"
+                :lead="ui.content.postShowcase.lead"
+                :badge="ui.content.postShowcase.badge"
+                :posts="posts"
+                :empty="ui.empty.posts"
+                :labels="ui.content.labels"
+                :action="{ label: ui.content.postShowcase.action, href: '#/articles' }"
+                layout="overlay"
+                cols="2"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.overlay2))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/ContentStoryTabsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/ContentStoryTabsPage.vue
new file mode 100644
index 0000000..6f32b08
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/ContentStoryTabsPage.vue
@@ -0,0 +1,153 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-story-tabs page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StoryTabs,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.contentStoryTabs }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 3) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-storytabs-title"
+          data-testid="catalog-block"
+          data-block="storytabs"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-storytabs-title">
+              {{ ui.blocks.names.storytabs }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.storytabs }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storytabs-yearTabs-label"
+            data-testid="variant"
+            data-block="storytabs"
+            data-variant="yearTabs"
+          >
+            <Title :as="3" size="base" weight="bold" id="storytabs-yearTabs-label" data-testid="variant-label">
+              {{ ui.blocks.variants.storytabs.yearTabs }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoryTabs
+                id="storytabs-yearTabs"
+                :title="ui.company.storyTabs.title"
+                :lead="ui.company.storyTabs.lead"
+                :badge="ui.company.storyTabs.badge"
+                :steps="milestones"
+                :empty="ui.empty.milestones"
+                active="milestone-runtimes"
+                :labels="ui.company.storyTabs.labels"
+                layout="years"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storytabs-carouselSplit-label"
+            data-testid="variant"
+            data-block="storytabs"
+            data-variant="carouselSplit"
+          >
+            <Title :as="3" size="base" weight="bold" id="storytabs-carouselSplit-label" data-testid="variant-label">
+              {{ ui.blocks.variants.storytabs.carouselSplit }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoryTabs
+                id="storytabs-carouselSplit"
+                :title="ui.company.storyTabs.title"
+                :lead="ui.company.storyTabs.lead"
+                :badge="ui.company.storyTabs.badge"
+                :steps="milestones"
+                :empty="ui.empty.milestones"
+                active="milestone-runtimes"
+                :labels="ui.company.storyTabs.labels"
+                layout="carousel"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.carouselSplit))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="storytabs-yearTabsMuted-label"
+            data-testid="variant"
+            data-block="storytabs"
+            data-variant="yearTabsMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="storytabs-yearTabsMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.storytabs.yearTabsMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StoryTabs
+                id="storytabs-yearTabsMuted"
+                :title="ui.company.storyTabs.title"
+                :lead="ui.company.storyTabs.lead"
+                :badge="ui.company.storyTabs.badge"
+                :steps="milestones"
+                :empty="ui.empty.milestones"
+                active="milestone-runtimes"
+                :labels="ui.company.storyTabs.labels"
+                layout="years"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabsMuted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/ContentTimelinePage.vue b/apps/host-vue/xgen/screens/CatalogScreen/ContentTimelinePage.vue
new file mode 100644
index 0000000..76d0a43
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/ContentTimelinePage.vue
@@ -0,0 +1,173 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The content-timeline page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MilestoneTimeline,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Milestone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.content.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.contentTimeline }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 4) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-timeline-title"
+          data-testid="catalog-block"
+          data-block="timeline"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-timeline-title">
+              {{ ui.blocks.names.timeline }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.timeline }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-split-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="timeline-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.timeline.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-split"
+                :title="ui.company.timeline.title"
+                :lead="ui.company.timeline.lead"
+                :milestones="milestones"
+                :empty="ui.empty.milestones"
+                layout="split"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-stacked-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="timeline-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.timeline.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-stacked"
+                :title="ui.company.timeline.title"
+                :lead="ui.company.timeline.lead"
+                :milestones="milestones"
+                :empty="ui.empty.milestones"
+                layout="stacked"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.stacked))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-row-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="row"
+          >
+            <Title :as="3" size="base" weight="bold" id="timeline-row-label" data-testid="variant-label">
+              {{ ui.blocks.variants.timeline.row }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-row"
+                :title="ui.company.timeline.title"
+                :lead="ui.company.timeline.lead"
+                :milestones="milestones"
+                :empty="ui.empty.milestones"
+                layout="row"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.row))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="timeline-rowMuted-label"
+            data-testid="variant"
+            data-block="timeline"
+            data-variant="rowMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="timeline-rowMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.timeline.rowMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MilestoneTimeline
+                id="timeline-rowMuted"
+                :title="ui.company.timeline.title"
+                :lead="ui.company.timeline.lead"
+                :milestones="milestones"
+                :empty="ui.empty.milestones"
+                layout="row"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.rowMuted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/IndexPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/IndexPage.vue
new file mode 100644
index 0000000..cb58a6b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/IndexPage.vue
@@ -0,0 +1,495 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The index page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Container, Link, List, ListItem, Stack, Text, Title, tpl } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const CATALOG = [
+  {
+    id: "marketing",
+    titleId: "section-marketing-title",
+    title: ui.catalog.sections.marketing.title,
+    text: ui.catalog.sections.marketing.text,
+    categories: [
+      {
+        id: "marketing-navigation",
+        href: "#/marketing-navigation",
+        name: ui.catalog.categories.marketingNavigation,
+        blocks: 3,
+        variants: 14,
+      },
+      { id: "marketing-hero", href: "#/marketing-hero", name: ui.catalog.categories.marketingHero, blocks: 1, variants: 15 },
+      {
+        id: "marketing-hero-split",
+        href: "#/marketing-hero-split",
+        name: ui.catalog.categories.marketingHeroSplit,
+        blocks: 1,
+        variants: 7,
+      },
+      {
+        id: "marketing-page-head",
+        href: "#/marketing-page-head",
+        name: ui.catalog.categories.marketingPageHead,
+        blocks: 1,
+        variants: 3,
+      },
+      {
+        id: "marketing-page-trail",
+        href: "#/marketing-page-trail",
+        name: ui.catalog.categories.marketingPageTrail,
+        blocks: 1,
+        variants: 4,
+      },
+      { id: "marketing-features", href: "#/marketing-features", name: ui.catalog.categories.marketingFeatures, blocks: 3, variants: 17 },
+      {
+        id: "marketing-features-split",
+        href: "#/marketing-features-split",
+        name: ui.catalog.categories.marketingFeaturesSplit,
+        blocks: 1,
+        variants: 5,
+      },
+      {
+        id: "marketing-feature-cards",
+        href: "#/marketing-feature-cards",
+        name: ui.catalog.categories.marketingFeatureCards,
+        blocks: 1,
+        variants: 4,
+      },
+      {
+        id: "marketing-media-list",
+        href: "#/marketing-media-list",
+        name: ui.catalog.categories.marketingMediaList,
+        blocks: 1,
+        variants: 6,
+      },
+      {
+        id: "marketing-showcases",
+        href: "#/marketing-showcases",
+        name: ui.catalog.categories.marketingShowcases,
+        blocks: 4,
+        variants: 15,
+      },
+      {
+        id: "marketing-how-it-works",
+        href: "#/marketing-how-it-works",
+        name: ui.catalog.categories.marketingHowItWorks,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "marketing-proof", href: "#/marketing-proof", name: ui.catalog.categories.marketingProof, blocks: 3, variants: 14 },
+      { id: "marketing-stats", href: "#/marketing-stats", name: ui.catalog.categories.marketingStats, blocks: 1, variants: 8 },
+      {
+        id: "marketing-testimonials",
+        href: "#/marketing-testimonials",
+        name: ui.catalog.categories.marketingTestimonials,
+        blocks: 1,
+        variants: 10,
+      },
+      {
+        id: "marketing-testimonials-split",
+        href: "#/marketing-testimonials-split",
+        name: ui.catalog.categories.marketingTestimonialsSplit,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "marketing-pricing", href: "#/marketing-pricing", name: ui.catalog.categories.marketingPricing, blocks: 2, variants: 13 },
+      {
+        id: "marketing-pricing-tools",
+        href: "#/marketing-pricing-tools",
+        name: ui.catalog.categories.marketingPricingTools,
+        blocks: 3,
+        variants: 12,
+      },
+      { id: "marketing-faq", href: "#/marketing-faq", name: ui.catalog.categories.marketingFaq, blocks: 2, variants: 14 },
+      { id: "marketing-cta", href: "#/marketing-cta", name: ui.catalog.categories.marketingCta, blocks: 1, variants: 11 },
+      {
+        id: "marketing-cta-proof",
+        href: "#/marketing-cta-proof",
+        name: ui.catalog.categories.marketingCtaProof,
+        blocks: 1,
+        variants: 7,
+      },
+      { id: "marketing-team", href: "#/marketing-team", name: ui.catalog.categories.marketingTeam, blocks: 1, variants: 6 },
+      { id: "marketing-about", href: "#/marketing-about", name: ui.catalog.categories.marketingAbout, blocks: 2, variants: 7 },
+      {
+        id: "marketing-portfolio",
+        href: "#/marketing-portfolio",
+        name: ui.catalog.categories.marketingPortfolio,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "marketing-careers", href: "#/marketing-careers", name: ui.catalog.categories.marketingCareers, blocks: 1, variants: 4 },
+      { id: "marketing-gallery", href: "#/marketing-gallery", name: ui.catalog.categories.marketingGallery, blocks: 2, variants: 10 },
+      { id: "marketing-footer", href: "#/marketing-footer", name: ui.catalog.categories.marketingFooter, blocks: 2, variants: 9 },
+      {
+        id: "marketing-footer-split",
+        href: "#/marketing-footer-split",
+        name: ui.catalog.categories.marketingFooterSplit,
+        blocks: 1,
+        variants: 6,
+      },
+    ],
+  },
+  {
+    id: "content",
+    titleId: "section-content-title",
+    title: ui.catalog.sections.content.title,
+    text: ui.catalog.sections.content.text,
+    categories: [
+      { id: "content-blog", href: "#/content-blog", name: ui.catalog.categories.contentBlog, blocks: 1, variants: 9 },
+      {
+        id: "content-post-showcase",
+        href: "#/content-post-showcase",
+        name: ui.catalog.categories.contentPostShowcase,
+        blocks: 1,
+        variants: 4,
+      },
+      {
+        id: "content-post-header",
+        href: "#/content-post-header",
+        name: ui.catalog.categories.contentPostHeader,
+        blocks: 1,
+        variants: 4,
+      },
+      {
+        id: "content-post-header-split",
+        href: "#/content-post-header-split",
+        name: ui.catalog.categories.contentPostHeaderSplit,
+        blocks: 1,
+        variants: 6,
+      },
+      { id: "content-article", href: "#/content-article", name: ui.catalog.categories.contentArticle, blocks: 1, variants: 4 },
+      { id: "content-timeline", href: "#/content-timeline", name: ui.catalog.categories.contentTimeline, blocks: 1, variants: 4 },
+      { id: "content-story-tabs", href: "#/content-story-tabs", name: ui.catalog.categories.contentStoryTabs, blocks: 1, variants: 3 },
+    ],
+  },
+  {
+    id: "promo",
+    titleId: "section-promo-title",
+    title: ui.catalog.sections.promo.title,
+    text: ui.catalog.sections.promo.text,
+    categories: [
+      { id: "promo-banners", href: "#/promo-banners", name: ui.catalog.categories.promoBanners, blocks: 2, variants: 12 },
+      { id: "promo-newsletter", href: "#/promo-newsletter", name: ui.catalog.categories.promoNewsletter, blocks: 1, variants: 5 },
+    ],
+  },
+  {
+    id: "support",
+    titleId: "section-support-title",
+    title: ui.catalog.sections.support.title,
+    text: ui.catalog.sections.support.text,
+    categories: [
+      { id: "support-contact", href: "#/support-contact", name: ui.catalog.categories.supportContact, blocks: 2, variants: 10 },
+      { id: "support-states", href: "#/support-states", name: ui.catalog.categories.supportStates, blocks: 1, variants: 5 },
+    ],
+  },
+  {
+    id: "commerce",
+    titleId: "section-commerce-title",
+    title: ui.catalog.sections.commerce.title,
+    text: ui.catalog.sections.commerce.text,
+    categories: [
+      {
+        id: "commerce-storefront",
+        href: "#/commerce-storefront",
+        name: ui.catalog.categories.commerceStorefront,
+        blocks: 3,
+        variants: 10,
+      },
+      {
+        id: "commerce-categories",
+        href: "#/commerce-categories",
+        name: ui.catalog.categories.commerceCategories,
+        blocks: 1,
+        variants: 7,
+      },
+      { id: "commerce-products", href: "#/commerce-products", name: ui.catalog.categories.commerceProducts, blocks: 1, variants: 9 },
+      { id: "commerce-product", href: "#/commerce-product", name: ui.catalog.categories.commerceProduct, blocks: 3, variants: 13 },
+      { id: "commerce-cart", href: "#/commerce-cart", name: ui.catalog.categories.commerceCart, blocks: 3, variants: 10 },
+      { id: "commerce-checkout", href: "#/commerce-checkout", name: ui.catalog.categories.commerceCheckout, blocks: 3, variants: 8 },
+      { id: "commerce-delivery", href: "#/commerce-delivery", name: ui.catalog.categories.commerceDelivery, blocks: 4, variants: 12 },
+      { id: "commerce-orders", href: "#/commerce-orders", name: ui.catalog.categories.commerceOrders, blocks: 1, variants: 4 },
+    ],
+  },
+  {
+    id: "app",
+    titleId: "section-app-title",
+    title: ui.catalog.sections.app.title,
+    text: ui.catalog.sections.app.text,
+    categories: [
+      { id: "app-shell", href: "#/app-shell", name: ui.catalog.categories.appShell, blocks: 3, variants: 12 },
+      {
+        id: "app-dashboard-shells",
+        href: "#/app-dashboard-shells",
+        name: ui.catalog.categories.appDashboardShells,
+        blocks: 1,
+        variants: 12,
+      },
+      { id: "app-widgets", href: "#/app-widgets", name: ui.catalog.categories.appWidgets, blocks: 3, variants: 12 },
+      { id: "app-boards", href: "#/app-boards", name: ui.catalog.categories.appBoards, blocks: 2, variants: 8 },
+      { id: "app-states", href: "#/app-states", name: ui.catalog.categories.appStates, blocks: 2, variants: 10 },
+      { id: "app-auth", href: "#/app-auth", name: ui.catalog.categories.appAuth, blocks: 2, variants: 12 },
+      { id: "app-auth-pages", href: "#/app-auth-pages", name: ui.catalog.categories.appAuthPages, blocks: 1, variants: 9 },
+      { id: "app-settings", href: "#/app-settings", name: ui.catalog.categories.appSettings, blocks: 1, variants: 4 },
+      { id: "app-onboarding", href: "#/app-onboarding", name: ui.catalog.categories.appOnboarding, blocks: 2, variants: 11 },
+      { id: "app-guidance", href: "#/app-guidance", name: ui.catalog.categories.appGuidance, blocks: 2, variants: 8 },
+    ],
+  },
+] as const;
+const PAGES = [
+  {
+    id: "saas-landing",
+    visit: "page-saas-landing",
+    href: "#/page-saas-landing",
+    name: ui.catalog.pages.saasLanding.title,
+    text: ui.catalog.pages.saasLanding.text,
+    blocks: 11,
+  },
+  {
+    id: "company",
+    visit: "page-company",
+    href: "#/page-company",
+    name: ui.catalog.pages.company.title,
+    text: ui.catalog.pages.company.text,
+    blocks: 9,
+  },
+  {
+    id: "portfolio",
+    visit: "page-portfolio",
+    href: "#/page-portfolio",
+    name: ui.catalog.pages.portfolio.title,
+    text: ui.catalog.pages.portfolio.text,
+    blocks: 7,
+  },
+  {
+    id: "store-home",
+    visit: "page-store-home",
+    href: "#/page-store-home",
+    name: ui.catalog.pages.storeHome.title,
+    text: ui.catalog.pages.storeHome.text,
+    blocks: 9,
+  },
+  {
+    id: "store-home-2",
+    visit: "page-store-home-2",
+    href: "#/page-store-home-2",
+    name: ui.catalog.pages.storeHome2.title,
+    text: ui.catalog.pages.storeHome2.text,
+    blocks: 7,
+  },
+  {
+    id: "store-catalog",
+    visit: "page-store-catalog",
+    href: "#/page-store-catalog",
+    name: ui.catalog.pages.storeCatalog.title,
+    text: ui.catalog.pages.storeCatalog.text,
+    blocks: 6,
+  },
+  {
+    id: "product-detail",
+    visit: "page-product-detail",
+    href: "#/page-product-detail",
+    name: ui.catalog.pages.productDetail.title,
+    text: ui.catalog.pages.productDetail.text,
+    blocks: 6,
+  },
+  {
+    id: "cart",
+    visit: "page-cart",
+    href: "#/page-cart",
+    name: ui.catalog.pages.cart.title,
+    text: ui.catalog.pages.cart.text,
+    blocks: 5,
+  },
+  {
+    id: "checkout",
+    visit: "page-checkout",
+    href: "#/page-checkout",
+    name: ui.catalog.pages.checkout.title,
+    text: ui.catalog.pages.checkout.text,
+    blocks: 4,
+  },
+  {
+    id: "shell-classic",
+    visit: "page-shell-classic",
+    href: "#/page-shell-classic",
+    name: ui.catalog.pages.shellClassic.title,
+    text: ui.catalog.pages.shellClassic.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-inset",
+    visit: "page-shell-inset",
+    href: "#/page-shell-inset",
+    name: ui.catalog.pages.shellInset.title,
+    text: ui.catalog.pages.shellInset.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail",
+    visit: "page-shell-rail",
+    href: "#/page-shell-rail",
+    name: ui.catalog.pages.shellRail.title,
+    text: ui.catalog.pages.shellRail.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-footer",
+    visit: "page-shell-rail-footer",
+    href: "#/page-shell-rail-footer",
+    name: ui.catalog.pages.shellRailFooter.title,
+    text: ui.catalog.pages.shellRailFooter.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed",
+    visit: "page-shell-collapsed",
+    href: "#/page-shell-collapsed",
+    name: ui.catalog.pages.shellCollapsed.title,
+    text: ui.catalog.pages.shellCollapsed.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level",
+    visit: "page-shell-two-level",
+    href: "#/page-shell-two-level",
+    name: ui.catalog.pages.shellTwoLevel.title,
+    text: ui.catalog.pages.shellTwoLevel.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level-full",
+    visit: "page-shell-two-level-full",
+    href: "#/page-shell-two-level-full",
+    name: ui.catalog.pages.shellTwoLevelFull.title,
+    text: ui.catalog.pages.shellTwoLevelFull.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-end",
+    visit: "page-shell-end",
+    href: "#/page-shell-end",
+    name: ui.catalog.pages.shellEnd.title,
+    text: ui.catalog.pages.shellEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-end",
+    visit: "page-shell-rail-end",
+    href: "#/page-shell-rail-end",
+    name: ui.catalog.pages.shellRailEnd.title,
+    text: ui.catalog.pages.shellRailEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-top-only",
+    visit: "page-shell-top-only",
+    href: "#/page-shell-top-only",
+    name: ui.catalog.pages.shellTopOnly.title,
+    text: ui.catalog.pages.shellTopOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-side-only",
+    visit: "page-shell-side-only",
+    href: "#/page-shell-side-only",
+    name: ui.catalog.pages.shellSideOnly.title,
+    text: ui.catalog.pages.shellSideOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed-end",
+    visit: "page-shell-collapsed-end",
+    href: "#/page-shell-collapsed-end",
+    name: ui.catalog.pages.shellCollapsedEnd.title,
+    text: ui.catalog.pages.shellCollapsedEnd.text,
+    blocks: 1,
+  },
+] as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Stack gap="2" align="stretch">
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="catalog-title">
+            {{ ui.catalog.title }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.catalog.intro }}
+          </Text>
+        </Stack>
+        <Stack v-for="section in CATALOG" :key="section.id"
+          gap="4"
+          align="stretch"
+          role="group"
+          :aria-labelledby="section.titleId"
+          data-testid="catalog-section"
+          :data-section="section.id"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" :id="section.titleId">
+              {{ section.title }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ section.text }}
+            </Text>
+          </Stack>
+          <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="category-list">
+            <ListItem
+              v-for="cat in section.categories"
+              :key="cat.id"
+              class="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border"
+            >
+              <Link
+                :href="cat.href"
+                variant="default"
+                class="font-bold"
+                data-testid="category-link"
+                :data-category="cat.id"
+                :data-visit="cat.id"
+              >
+                {{ cat.name }}
+              </Link>
+              <Text size="sm" class="text-muted-foreground" data-testid="category-count">
+                {{ tpl(ui.catalog.count, cat.blocks, cat.variants) }}
+              </Text>
+            </ListItem>
+          </List>
+        </Stack>
+        <Stack gap="4" align="stretch" role="group" aria-labelledby="pages-title-2" data-testid="pages-section">
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="pages-title-2">
+              {{ ui.catalog.pagesTitle }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.catalog.pagesText }}
+            </Text>
+          </Stack>
+          <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="page-list">
+            <ListItem v-for="p in PAGES" :key="p.id" class="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+              <Link
+                :href="p.href"
+                variant="default"
+                class="font-bold"
+                data-testid="page-link"
+                :data-page="p.id"
+                :data-visit="p.visit"
+              >
+                {{ p.name }}
+              </Link>
+              <Text size="sm" class="text-muted-foreground">
+                {{ p.text }}
+              </Text>
+              <Text size="xs" class="text-muted-foreground" data-testid="page-count">
+                {{ tpl(ui.catalog.pageCount, p.blocks) }}
+              </Text>
+            </ListItem>
+          </List>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingAboutPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingAboutPage.vue
new file mode 100644
index 0000000..49fd5f7
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingAboutPage.vue
@@ -0,0 +1,305 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-about page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  AboutCompany,
+  AboutMe,
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Skill,
+  type Spec,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+
+const ABOUTME_ACTIONS = { mode: "two", cta: ui.company.aboutMe.cta, href: "#/work", secondary: ui.company.aboutMe.more, secondaryHref: "#/contact" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingAbout }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 7) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-about-title"
+          data-testid="catalog-block"
+          data-block="about"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-about-title">
+              {{ ui.blocks.names.about }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.about }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="about-split-label"
+            data-testid="variant"
+            data-block="about"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="about-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.about.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutCompany
+                id="about-split"
+                :title="ui.company.about.title"
+                :lead="ui.company.about.lead"
+                :stats="stats"
+                :values="values"
+                layout="split"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="about-stacked-label"
+            data-testid="variant"
+            data-block="about"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="about-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.about.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutCompany
+                id="about-stacked"
+                :title="ui.company.about.title"
+                :lead="ui.company.about.lead"
+                :stats="stats"
+                :values="values"
+                layout="stacked"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.stacked))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="about-muted-label"
+            data-testid="variant"
+            data-block="about"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="about-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.about.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutCompany
+                id="about-muted"
+                :title="ui.company.about.title"
+                :lead="ui.company.about.lead"
+                :stats="stats"
+                :values="values"
+                layout="split"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-aboutme-title"
+          data-testid="catalog-block"
+          data-block="aboutme"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-aboutme-title">
+              {{ ui.blocks.names.aboutme }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.aboutme }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-facts-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="facts"
+          >
+            <Title :as="3" size="base" weight="bold" id="aboutme-facts-label" data-testid="variant-label">
+              {{ ui.blocks.variants.aboutme.facts }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-facts"
+                :title="ui.company.aboutMe.title"
+                :lead="ui.company.aboutMe.lead"
+                :badge="ui.company.aboutMe.badge"
+                :facts="profilefacts"
+                :skills="skills"
+                :labels="ui.company.aboutMe"
+                :actions="ABOUTME_ACTIONS"
+                layout="facts"
+                mediaSide="start"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.facts))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-factsEnd-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="factsEnd"
+          >
+            <Title :as="3" size="base" weight="bold" id="aboutme-factsEnd-label" data-testid="variant-label">
+              {{ ui.blocks.variants.aboutme.factsEnd }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-factsEnd"
+                :title="ui.company.aboutMe.title"
+                :lead="ui.company.aboutMe.lead"
+                :badge="ui.company.aboutMe.badge"
+                :facts="profilefacts"
+                :skills="skills"
+                :labels="ui.company.aboutMe"
+                :actions="ABOUTME_ACTIONS"
+                layout="facts"
+                mediaSide="end"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.factsEnd))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-skills-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="skills"
+          >
+            <Title :as="3" size="base" weight="bold" id="aboutme-skills-label" data-testid="variant-label">
+              {{ ui.blocks.variants.aboutme.skills }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-skills"
+                :title="ui.company.aboutMe.title"
+                :lead="ui.company.aboutMe.lead"
+                :badge="ui.company.aboutMe.badge"
+                :facts="profilefacts"
+                :skills="skills"
+                :labels="ui.company.aboutMe"
+                :actions="ABOUTME_ACTIONS"
+                layout="skills"
+                mediaSide="start"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skills))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="aboutme-skillsMuted-label"
+            data-testid="variant"
+            data-block="aboutme"
+            data-variant="skillsMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="aboutme-skillsMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.aboutme.skillsMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AboutMe
+                id="aboutme-skillsMuted"
+                :title="ui.company.aboutMe.title"
+                :lead="ui.company.aboutMe.lead"
+                :badge="ui.company.aboutMe.badge"
+                :facts="profilefacts"
+                :skills="skills"
+                :labels="ui.company.aboutMe"
+                :actions="ABOUTME_ACTIONS"
+                layout="skills"
+                mediaSide="end"
+                tone="muted"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.aboutme, ui.blocks.variants.aboutme.skillsMuted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingCareersPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingCareersPage.vue
new file mode 100644
index 0000000..4644930
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingCareersPage.vue
@@ -0,0 +1,193 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-careers page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  JobBoard,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Department,
+  type Job,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingCareers }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 4) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-jobs-title"
+          data-testid="catalog-block"
+          data-block="jobs"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-jobs-title">
+              {{ ui.blocks.names.jobs }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.jobs }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-grid-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="grid"
+          >
+            <Title :as="3" size="base" weight="bold" id="jobs-grid-label" data-testid="variant-label">
+              {{ ui.blocks.variants.jobs.grid }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-grid"
+                :title="ui.company.jobs.title"
+                :lead="ui.company.jobs.lead"
+                :jobs="jobs"
+                :empty="ui.empty.jobs"
+                :departments="departments"
+                :labels="ui.company.jobs"
+                layout="grid"
+                salary="hide"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grid))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-salary-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="salary"
+          >
+            <Title :as="3" size="base" weight="bold" id="jobs-salary-label" data-testid="variant-label">
+              {{ ui.blocks.variants.jobs.salary }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-salary"
+                :title="ui.company.jobs.title"
+                :lead="ui.company.jobs.lead"
+                :jobs="jobs"
+                :empty="ui.empty.jobs"
+                :departments="departments"
+                :labels="ui.company.jobs"
+                layout="grid"
+                salary="show"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.salary))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-grouped-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="grouped"
+          >
+            <Title :as="3" size="base" weight="bold" id="jobs-grouped-label" data-testid="variant-label">
+              {{ ui.blocks.variants.jobs.grouped }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-grouped"
+                :title="ui.company.jobs.title"
+                :lead="ui.company.jobs.lead"
+                :jobs="jobs"
+                :empty="ui.empty.jobs"
+                :departments="departments"
+                :labels="ui.company.jobs"
+                layout="grouped"
+                salary="hide"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="jobs-table-label"
+            data-testid="variant"
+            data-block="jobs"
+            data-variant="table"
+          >
+            <Title :as="3" size="base" weight="bold" id="jobs-table-label" data-testid="variant-label">
+              {{ ui.blocks.variants.jobs.table }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <JobBoard
+                id="jobs-table"
+                :title="ui.company.jobs.title"
+                :lead="ui.company.jobs.lead"
+                :jobs="jobs"
+                :empty="ui.empty.jobs"
+                :departments="departments"
+                :labels="ui.company.jobs"
+                layout="table"
+                salary="show"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.table))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingCtaPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingCtaPage.vue
new file mode 100644
index 0000000..cebc5c4
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingCtaPage.vue
@@ -0,0 +1,381 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-cta page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const CTA_ACTIONS = {
+  cta: ui.site.home.ctaButton,
+  href: "#/pricing",
+  secondary: ui.site.home.ctaSecondary,
+  secondaryHref: "#/",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingCta }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 11) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-cta-title"
+          data-testid="catalog-block"
+          data-block="cta"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-cta-title">
+              {{ ui.blocks.names.cta }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.cta }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-card-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="card"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-card-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.card }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-card"
+                :title="ui.site.home.ctaTitle"
+                :text="ui.site.home.ctaText"
+                :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="card"
+                tone="muted"
+                proof="none"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.card))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-banner-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="banner"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-banner-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.banner }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-banner"
+                :title="ui.site.home.ctaTitle"
+                :text="ui.site.home.ctaText"
+                :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="banner"
+                tone="muted"
+                proof="none"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.banner))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-row-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="row"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-row-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.row }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-row"
+                :title="ui.site.home.ctaTitle"
+                :text="ui.site.home.ctaText"
+                :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="row"
+                tone="muted"
+                proof="none"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-form-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="form"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-form-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.form }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-form"
+                :title="ui.site.home.ctaTitle"
+                :text="ui.site.home.ctaText"
+                :actions="{ ...CTA_ACTIONS, mode: 'form' }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="band"
+                tone="muted"
+                proof="none"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-quote-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="quote"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-quote-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.quote }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-quote"
+                :title="ui.site.home.ctaTitle"
+                :text="ui.site.home.ctaText"
+                :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="band"
+                tone="muted"
+                proof="quote"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-band-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="band"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-band-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.band }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-band"
+                :title="ui.site.home.ctaTitle"
+                :text="ui.site.home.ctaText"
+                :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="band"
+                tone="muted"
+                proof="none"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-split-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-split"
+                :title="ui.site.home.ctaTitle"
+                :text="ui.site.home.ctaText"
+                :actions="{ ...CTA_ACTIONS, mode: 'two' }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="split"
+                tone="default"
+                proof="none"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-compact-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-compact"
+                :title="ui.site.home.ctaTitle"
+                :text="ui.site.home.ctaText"
+                :actions="{ ...CTA_ACTIONS, mode: 'one' }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="card"
+                tone="muted"
+                proof="none"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-saas-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="saas"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-saas-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.saas }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-saas"
+                :title="ui.cases.saas.cta.title"
+                :text="ui.cases.saas.cta.text"
+                :actions="{
+                  ...CTA_ACTIONS,
+                  cta: ui.cases.saas.cta.cta,
+                  secondary: ui.cases.saas.cta.secondary,
+                  mode: 'two',
+                }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="band"
+                tone="muted"
+                proof="none"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-shop-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="shop"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-shop-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.shop }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-shop"
+                :title="ui.cases.shop.cta.title"
+                :text="ui.cases.shop.cta.text"
+                :actions="{
+                  ...CTA_ACTIONS,
+                  cta: ui.cases.shop.cta.cta,
+                  secondary: ui.cases.shop.cta.secondary,
+                  mode: 'one',
+                }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="split"
+                tone="default"
+                proof="none"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cta-agency-label"
+            data-testid="variant"
+            data-block="cta"
+            data-variant="agency"
+          >
+            <Title :as="3" size="base" weight="bold" id="cta-agency-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cta.agency }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaBand
+                id="cta-agency"
+                :title="ui.cases.agency.cta.title"
+                :text="ui.cases.agency.cta.text"
+                :actions="{
+                  ...CTA_ACTIONS,
+                  cta: ui.cases.agency.cta.cta,
+                  secondary: ui.cases.agency.cta.secondary,
+                  mode: 'two',
+                }"
+                :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+                layout="card"
+                tone="muted"
+                proof="none"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingCtaProofPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingCtaProofPage.vue
new file mode 100644
index 0000000..2b92bff
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingCtaProofPage.vue
@@ -0,0 +1,303 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-cta-proof page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  CtaProof,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Logo,
+  type Stat,
+  type Zone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+
+const CTAPROOF_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.ctaProof.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.ctaProof.secondary,
+  secondaryHref: "#/contact",
+} as const;
+const CTAPROOF_CONTENT = { logos, features, stats, zones } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingCtaProof }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 7) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-ctaproof-title"
+          data-testid="catalog-block"
+          data-block="ctaproof"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-ctaproof-title">
+              {{ ui.blocks.names.ctaproof }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.ctaproof }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-centerLogos-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="centerLogos"
+          >
+            <Title :as="3" size="base" weight="bold" id="ctaproof-centerLogos-label" data-testid="variant-label">
+              {{ ui.blocks.variants.ctaproof.centerLogos }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-centerLogos"
+                :title="ui.marketing.ctaProof.title"
+                :lead="ui.marketing.ctaProof.lead"
+                :badge="ui.marketing.ctaProof.badge"
+                :actions="CTAPROOF_ACTIONS"
+                :content="CTAPROOF_CONTENT"
+                layout="center"
+                proof="logos"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerLogos))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-centerFeatures-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="centerFeatures"
+          >
+            <Title :as="3" size="base" weight="bold" id="ctaproof-centerFeatures-label" data-testid="variant-label">
+              {{ ui.blocks.variants.ctaproof.centerFeatures }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-centerFeatures"
+                :title="ui.marketing.ctaProof.title"
+                :lead="ui.marketing.ctaProof.lead"
+                :badge="ui.marketing.ctaProof.badge"
+                :actions="CTAPROOF_ACTIONS"
+                :content="CTAPROOF_CONTENT"
+                layout="center"
+                proof="features"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerFeatures))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-centerStats-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="centerStats"
+          >
+            <Title :as="3" size="base" weight="bold" id="ctaproof-centerStats-label" data-testid="variant-label">
+              {{ ui.blocks.variants.ctaproof.centerStats }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-centerStats"
+                :title="ui.marketing.ctaProof.title"
+                :lead="ui.marketing.ctaProof.lead"
+                :badge="ui.marketing.ctaProof.badge"
+                :actions="CTAPROOF_ACTIONS"
+                :content="CTAPROOF_CONTENT"
+                layout="center"
+                proof="stats"
+                mediaSide="end"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.centerStats))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitStats-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitStats"
+          >
+            <Title :as="3" size="base" weight="bold" id="ctaproof-splitStats-label" data-testid="variant-label">
+              {{ ui.blocks.variants.ctaproof.splitStats }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitStats"
+                :title="ui.marketing.ctaProof.title"
+                :lead="ui.marketing.ctaProof.lead"
+                :badge="ui.marketing.ctaProof.badge"
+                :actions="CTAPROOF_ACTIONS"
+                :content="CTAPROOF_CONTENT"
+                layout="split"
+                proof="stats"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitStatsStart-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitStatsStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="ctaproof-splitStatsStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.ctaproof.splitStatsStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitStatsStart"
+                :title="ui.marketing.ctaProof.title"
+                :lead="ui.marketing.ctaProof.lead"
+                :badge="ui.marketing.ctaProof.badge"
+                :actions="CTAPROOF_ACTIONS"
+                :content="CTAPROOF_CONTENT"
+                layout="split"
+                proof="stats"
+                mediaSide="start"
+                tone="default"
+                :note="ui.marketing.ctaProof.note"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStatsStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitRows-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitRows"
+          >
+            <Title :as="3" size="base" weight="bold" id="ctaproof-splitRows-label" data-testid="variant-label">
+              {{ ui.blocks.variants.ctaproof.splitRows }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitRows"
+                :title="ui.marketing.ctaProof.title"
+                :lead="ui.marketing.ctaProof.lead"
+                :badge="ui.marketing.ctaProof.badge"
+                :actions="CTAPROOF_ACTIONS"
+                :content="CTAPROOF_CONTENT"
+                layout="split"
+                proof="rows"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitRows))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="ctaproof-splitZones-label"
+            data-testid="variant"
+            data-block="ctaproof"
+            data-variant="splitZones"
+          >
+            <Title :as="3" size="base" weight="bold" id="ctaproof-splitZones-label" data-testid="variant-label">
+              {{ ui.blocks.variants.ctaproof.splitZones }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CtaProof
+                id="ctaproof-splitZones"
+                :title="ui.marketing.ctaProof.zonesTitle"
+                :lead="ui.marketing.ctaProof.zonesLead"
+                :badge="ui.marketing.ctaProof.badge"
+                :actions="CTAPROOF_ACTIONS"
+                :content="CTAPROOF_CONTENT"
+                layout="split"
+                proof="zones"
+                mediaSide="end"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitZones))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingFaqPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFaqPage.vue
new file mode 100644
index 0000000..8d2fb1a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFaqPage.vue
@@ -0,0 +1,522 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-faq page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FaqList,
+  FaqSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Question,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const QUESTIONS_FIELDS = {
+  "id": "id",
+  "question": "title",
+  "answer": "metadata.answer.value",
+  "category": "terms|term:faq_category",
+  "icon": "metadata.icon.value",
+} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+
+const FAQ_FILTER = { tabs: faqtabs, label: ui.vibe.faq.tabs, category: "" } as const;
+const FAQSPLIT_LABELS = {
+  cta: ui.marketing.faqSplit.cta,
+  more: ui.marketing.faqSplit.more,
+  asideTitle: ui.marketing.faqSplit.asideTitle,
+  asideText: ui.marketing.faqSplit.asideText,
+  asideCta: ui.marketing.faqSplit.asideCta,
+  search: ui.marketing.faqSplit.search,
+  popular: ui.marketing.faqSplit.popular,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingFaq }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 14) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-faq-title"
+          data-testid="catalog-block"
+          data-block="faq"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-faq-title">
+              {{ ui.blocks.names.faq }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.faq }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-list-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="faq-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faq.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-list"
+                :title="ui.site.pricing.faqTitle"
+                :items="faq"
+                :empty="ui.vibe.faq.empty"
+                :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+                :filter="{ ...FAQ_FILTER, mode: 'none' }"
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-chat-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="chat"
+          >
+            <Title :as="3" size="base" weight="bold" id="faq-chat-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faq.chat }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-chat"
+                :title="ui.site.pricing.faqTitle"
+                :items="faq"
+                :empty="ui.vibe.faq.empty"
+                :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+                :filter="{ ...FAQ_FILTER, mode: 'none' }"
+                layout="chat"
+                cols="1"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-search-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="search"
+          >
+            <Title :as="3" size="base" weight="bold" id="faq-search-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faq.search }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-search"
+                :title="ui.site.pricing.faqTitle"
+                :items="faq"
+                :empty="ui.vibe.faq.empty"
+                :search="{ label: ui.vibe.faq.search, query: '', mode: 'field' }"
+                :filter="{ ...FAQ_FILTER, mode: 'none' }"
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-tabs-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="tabs"
+          >
+            <Title :as="3" size="base" weight="bold" id="faq-tabs-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faq.tabs }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-tabs"
+                :title="ui.site.pricing.faqTitle"
+                :items="faq"
+                :empty="ui.vibe.faq.empty"
+                :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+                :filter="{ ...FAQ_FILTER, category: 'billing', mode: 'categories' }"
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-twoColumns-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="twoColumns"
+          >
+            <Title :as="3" size="base" weight="bold" id="faq-twoColumns-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faq.twoColumns }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-twoColumns"
+                :title="ui.site.pricing.faqTitle"
+                :items="faq"
+                :empty="ui.vibe.faq.empty"
+                :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+                :filter="{ ...FAQ_FILTER, mode: 'none' }"
+                layout="accordion"
+                cols="2"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-muted-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="faq-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faq.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-muted"
+                :title="ui.site.pricing.faqTitle"
+                :items="faq"
+                :empty="ui.vibe.faq.empty"
+                :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+                :filter="{ ...FAQ_FILTER, mode: 'none' }"
+                layout="accordion"
+                cols="1"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.muted))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faq-roomy-label"
+            data-testid="variant"
+            data-block="faq"
+            data-variant="roomy"
+          >
+            <Title :as="3" size="base" weight="bold" id="faq-roomy-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faq.roomy }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqList
+                id="faq-roomy"
+                :title="ui.site.pricing.faqTitle"
+                :items="faq"
+                :empty="ui.vibe.faq.empty"
+                :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+                :filter="{ ...FAQ_FILTER, mode: 'none' }"
+                layout="accordion"
+                cols="1"
+                tone="default"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.roomy))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-faqsplit-title"
+          data-testid="catalog-block"
+          data-block="faqsplit"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-faqsplit-title">
+              {{ ui.blocks.names.faqsplit }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.faqsplit }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-headSplit-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="headSplit"
+          >
+            <Title :as="3" size="base" weight="bold" id="faqsplit-headSplit-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faqsplit.headSplit }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-headSplit"
+                :title="ui.marketing.faqSplit.title"
+                :lead="ui.marketing.faqSplit.lead"
+                :badge="ui.marketing.faqSplit.badge"
+                :items="questions"
+                :channels="channels"
+                :topics="faqtabs"
+                :labels="FAQSPLIT_LABELS"
+                layout="head"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.headSplit))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-helpCard-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="helpCard"
+          >
+            <Title :as="3" size="base" weight="bold" id="faqsplit-helpCard-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faqsplit.helpCard }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-helpCard"
+                :title="ui.marketing.faqSplit.title"
+                :lead="ui.marketing.faqSplit.lead"
+                :badge="ui.marketing.faqSplit.badge"
+                :items="questions"
+                :channels="channels"
+                :topics="faqtabs"
+                :labels="FAQSPLIT_LABELS"
+                layout="aside"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-picture-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="picture"
+          >
+            <Title :as="3" size="base" weight="bold" id="faqsplit-picture-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faqsplit.picture }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-picture"
+                :title="ui.marketing.faqSplit.title"
+                :lead="ui.marketing.faqSplit.lead"
+                :badge="ui.marketing.faqSplit.badge"
+                :items="questions"
+                :channels="channels"
+                :topics="faqtabs"
+                :labels="FAQSPLIT_LABELS"
+                layout="media"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.picture))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-finder-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="finder"
+          >
+            <Title :as="3" size="base" weight="bold" id="faqsplit-finder-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faqsplit.finder }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-finder"
+                :title="ui.marketing.faqSplit.title"
+                :lead="ui.marketing.faqSplit.lead"
+                :badge="ui.marketing.faqSplit.badge"
+                :items="questions"
+                :channels="channels"
+                :topics="faqtabs"
+                :labels="FAQSPLIT_LABELS"
+                layout="search"
+                cards="grid3"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.finder))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-cards3-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="cards3"
+          >
+            <Title :as="3" size="base" weight="bold" id="faqsplit-cards3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faqsplit.cards3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-cards3"
+                :title="ui.marketing.faqSplit.title"
+                :lead="ui.marketing.faqSplit.lead"
+                :badge="ui.marketing.faqSplit.badge"
+                :items="questions"
+                :channels="channels"
+                :topics="faqtabs"
+                :labels="FAQSPLIT_LABELS"
+                layout="cards"
+                cards="grid3"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-cards4-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="cards4"
+          >
+            <Title :as="3" size="base" weight="bold" id="faqsplit-cards4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faqsplit.cards4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-cards4"
+                :title="ui.marketing.faqSplit.title"
+                :lead="ui.marketing.faqSplit.lead"
+                :badge="ui.marketing.faqSplit.badge"
+                :items="questions"
+                :channels="channels"
+                :topics="faqtabs"
+                :labels="FAQSPLIT_LABELS"
+                layout="cards"
+                cards="grid4"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cards4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="faqsplit-cardsIcons-label"
+            data-testid="variant"
+            data-block="faqsplit"
+            data-variant="cardsIcons"
+          >
+            <Title :as="3" size="base" weight="bold" id="faqsplit-cardsIcons-label" data-testid="variant-label">
+              {{ ui.blocks.variants.faqsplit.cardsIcons }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FaqSplit
+                id="faqsplit-cardsIcons"
+                :title="ui.marketing.faqSplit.title"
+                :lead="ui.marketing.faqSplit.lead"
+                :badge="ui.marketing.faqSplit.badge"
+                :items="questions"
+                :channels="channels"
+                :topics="faqtabs"
+                :labels="FAQSPLIT_LABELS"
+                layout="cards"
+                cards="icons"
+                mediaSide="end"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.cardsIcons))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.vue
new file mode 100644
index 0000000..ac9d024
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFeatureCardsPage.vue
@@ -0,0 +1,180 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-feature-cards page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FeatureShowcase,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingFeatureCards }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 4) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-featureshowcase-title"
+          data-testid="catalog-block"
+          data-block="featureshowcase"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-featureshowcase-title">
+              {{ ui.blocks.names.featureshowcase }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.featureshowcase }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-pictureCards3-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="pictureCards3"
+          >
+            <Title :as="3" size="base" weight="bold" id="featureshowcase-pictureCards3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featureshowcase.pictureCards3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-pictureCards3"
+                :title="ui.marketing.featureShowcase.title"
+                :lead="ui.marketing.featureShowcase.lead"
+                :features="values"
+                :empty="ui.empty.features"
+                :more="ui.marketing.featureShowcase.more"
+                item="picture"
+                cols="3"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-panelCards4-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="panelCards4"
+          >
+            <Title :as="3" size="base" weight="bold" id="featureshowcase-panelCards4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featureshowcase.panelCards4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-panelCards4"
+                :title="ui.marketing.featureShowcase.title"
+                :lead="ui.marketing.featureShowcase.lead"
+                :features="features"
+                :empty="ui.empty.features"
+                :more="ui.marketing.featureShowcase.more"
+                item="panel"
+                cols="4"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-pictureCards4-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="pictureCards4"
+          >
+            <Title :as="3" size="base" weight="bold" id="featureshowcase-pictureCards4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featureshowcase.pictureCards4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-pictureCards4"
+                :title="ui.marketing.featureShowcase.title"
+                :lead="ui.marketing.featureShowcase.lead"
+                :features="features"
+                :empty="ui.empty.features"
+                :more="ui.marketing.featureShowcase.more"
+                item="picture"
+                cols="4"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.pictureCards4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featureshowcase-panelCards3-label"
+            data-testid="variant"
+            data-block="featureshowcase"
+            data-variant="panelCards3"
+          >
+            <Title :as="3" size="base" weight="bold" id="featureshowcase-panelCards3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featureshowcase.panelCards3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureShowcase
+                id="featureshowcase-panelCards3"
+                :title="ui.marketing.featureShowcase.title"
+                :lead="ui.marketing.featureShowcase.lead"
+                :features="values"
+                :empty="ui.empty.features"
+                :more="ui.marketing.featureShowcase.more"
+                item="panel"
+                cols="3"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards3))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingFeaturesPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFeaturesPage.vue
new file mode 100644
index 0000000..e1fb4ef
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFeaturesPage.vue
@@ -0,0 +1,579 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-features page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  BeforeAfter,
+  Block,
+  Box,
+  Container,
+  FeatureGrid,
+  Group,
+  IconWall,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Contrast,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingFeatures }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 17) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-features-title"
+          data-testid="catalog-block"
+          data-block="features"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-features-title">
+              {{ ui.blocks.names.features }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.features }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-grid-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="grid"
+          >
+            <Title :as="3" size="base" weight="bold" id="features-grid-label" data-testid="variant-label">
+              {{ ui.blocks.variants.features.grid }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-grid"
+                :title="ui.site.home.featuresTitle"
+                :features="features"
+                :empty="ui.empty.features"
+                :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+                layout="grid"
+                cols="1-3"
+                item="card"
+                mediaSide="end"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-grid2-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="grid2"
+          >
+            <Title :as="3" size="base" weight="bold" id="features-grid2-label" data-testid="variant-label">
+              {{ ui.blocks.variants.features.grid2 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-grid2"
+                :title="ui.site.home.featuresTitle"
+                :features="features"
+                :empty="ui.empty.features"
+                :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+                layout="grid"
+                cols="1-2"
+                item="card"
+                mediaSide="end"
+                tone="default"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-tiles4-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="tiles4"
+          >
+            <Title :as="3" size="base" weight="bold" id="features-tiles4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.features.tiles4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-tiles4"
+                :title="ui.site.home.featuresTitle"
+                :features="features"
+                :empty="ui.empty.features"
+                :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+                layout="grid"
+                cols="1-4"
+                item="tile"
+                mediaSide="end"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-cells4-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="cells4"
+          >
+            <Title :as="3" size="base" weight="bold" id="features-cells4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.features.cells4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-cells4"
+                :title="ui.site.home.featuresTitle"
+                :features="features"
+                :empty="ui.empty.features"
+                :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+                layout="grid"
+                cols="1-4"
+                item="cell"
+                mediaSide="end"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.cells4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-rows-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="rows"
+          >
+            <Title :as="3" size="base" weight="bold" id="features-rows-label" data-testid="variant-label">
+              {{ ui.blocks.variants.features.rows }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-rows"
+                :title="ui.site.home.featuresTitle"
+                :features="features"
+                :empty="ui.empty.features"
+                :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+                layout="rows"
+                cols="1-3"
+                item="card"
+                mediaSide="end"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rows))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-rowsStart-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="rowsStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="features-rowsStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.features.rowsStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-rowsStart"
+                :title="ui.site.home.featuresTitle"
+                :features="features"
+                :empty="ui.empty.features"
+                :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+                layout="rows"
+                cols="1-3"
+                item="card"
+                mediaSide="start"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-rowsAlternate-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="rowsAlternate"
+          >
+            <Title :as="3" size="base" weight="bold" id="features-rowsAlternate-label" data-testid="variant-label">
+              {{ ui.blocks.variants.features.rowsAlternate }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-rowsAlternate"
+                :title="ui.site.home.featuresTitle"
+                :features="features"
+                :empty="ui.empty.features"
+                :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+                layout="rows"
+                cols="1-3"
+                item="card"
+                mediaSide="alternate"
+                tone="muted"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="features-tilesMuted-label"
+            data-testid="variant"
+            data-block="features"
+            data-variant="tilesMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="features-tilesMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.features.tilesMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureGrid
+                id="features-tilesMuted"
+                :title="ui.site.home.featuresTitle"
+                :features="features"
+                :empty="ui.empty.features"
+                :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+                layout="grid"
+                cols="1-3"
+                item="tile"
+                mediaSide="end"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tilesMuted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-iconwall-title"
+          data-testid="catalog-block"
+          data-block="iconwall"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-iconwall-title">
+              {{ ui.blocks.names.iconwall }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.iconwall }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-tiles4-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="tiles4"
+          >
+            <Title :as="3" size="base" weight="bold" id="iconwall-tiles4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.iconwall.tiles4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-tiles4"
+                :title="ui.vibe.wall.title"
+                :features="features"
+                :empty="ui.empty.features"
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-tiles3-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="tiles3"
+          >
+            <Title :as="3" size="base" weight="bold" id="iconwall-tiles3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.iconwall.tiles3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-tiles3"
+                :title="ui.vibe.wall.title"
+                :features="features"
+                :empty="ui.empty.features"
+                cols="3"
+                item="tile"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-chips6-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="chips6"
+          >
+            <Title :as="3" size="base" weight="bold" id="iconwall-chips6-label" data-testid="variant-label">
+              {{ ui.blocks.variants.iconwall.chips6 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-chips6"
+                :title="ui.vibe.wall.title"
+                :features="features"
+                :empty="ui.empty.features"
+                cols="6"
+                item="chip"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-chips4-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="chips4"
+          >
+            <Title :as="3" size="base" weight="bold" id="iconwall-chips4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.iconwall.chips4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-chips4"
+                :title="ui.vibe.wall.title"
+                :features="features"
+                :empty="ui.empty.features"
+                cols="4"
+                item="chip"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="iconwall-muted-label"
+            data-testid="variant"
+            data-block="iconwall"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="iconwall-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.iconwall.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <IconWall
+                id="iconwall-muted"
+                :title="ui.vibe.wall.title"
+                :features="features"
+                :empty="ui.empty.features"
+                cols="4"
+                item="tile"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-beforeafter-title"
+          data-testid="catalog-block"
+          data-block="beforeafter"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-beforeafter-title">
+              {{ ui.blocks.names.beforeafter }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.beforeafter }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-cards-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="beforeafter-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.beforeafter.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-cards"
+                :title="ui.vibe.beforeafter.title"
+                :points="beforeafter"
+                :empty="ui.empty.points"
+                :labels="ui.vibe.beforeafter.labels"
+                layout="cards"
+                icons="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-rows-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="rows"
+          >
+            <Title :as="3" size="base" weight="bold" id="beforeafter-rows-label" data-testid="variant-label">
+              {{ ui.blocks.variants.beforeafter.rows }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-rows"
+                :title="ui.vibe.beforeafter.title"
+                :points="beforeafter"
+                :empty="ui.empty.points"
+                :labels="ui.vibe.beforeafter.labels"
+                layout="rows"
+                icons="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-plain-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="beforeafter-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.beforeafter.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-plain"
+                :title="ui.vibe.beforeafter.title"
+                :points="beforeafter"
+                :empty="ui.empty.points"
+                :labels="ui.vibe.beforeafter.labels"
+                layout="cards"
+                icons="hide"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.plain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="beforeafter-muted-label"
+            data-testid="variant"
+            data-block="beforeafter"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="beforeafter-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.beforeafter.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BeforeAfter
+                id="beforeafter-muted"
+                :title="ui.vibe.beforeafter.title"
+                :points="beforeafter"
+                :empty="ui.empty.points"
+                :labels="ui.vibe.beforeafter.labels"
+                layout="cards"
+                icons="show"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.vue
new file mode 100644
index 0000000..7e1583a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFeaturesSplitPage.vue
@@ -0,0 +1,232 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-features-split page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FeatureSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+
+const FEATURESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.featureSplit.cta,
+  href: "#/start",
+  secondary: ui.marketing.featureSplit.secondary,
+  secondaryHref: "#/work",
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingFeaturesSplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 5) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-featuresplit-title"
+          data-testid="catalog-block"
+          data-block="featuresplit"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-featuresplit-title">
+              {{ ui.blocks.names.featuresplit }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.featuresplit }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-gridStart-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="gridStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="featuresplit-gridStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featuresplit.gridStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-gridStart"
+                :title="ui.marketing.featureSplit.title"
+                :lead="ui.marketing.featureSplit.lead"
+                :badge="ui.marketing.featureSplit.badge"
+                :features="features"
+                :stats="stats"
+                :actions="FEATURESPLIT_ACTIONS"
+                layout="grid"
+                mediaSide="start"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-statsStart-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="statsStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="featuresplit-statsStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featuresplit.statsStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-statsStart"
+                :title="ui.marketing.featureSplit.title"
+                :lead="ui.marketing.featureSplit.lead"
+                :badge="ui.marketing.featureSplit.badge"
+                :features="features"
+                :stats="stats"
+                :actions="FEATURESPLIT_ACTIONS"
+                layout="stats"
+                mediaSide="start"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.statsStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-gridMuted-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="gridMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="featuresplit-gridMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featuresplit.gridMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-gridMuted"
+                :title="ui.marketing.featureSplit.title"
+                :lead="ui.marketing.featureSplit.lead"
+                :badge="ui.marketing.featureSplit.badge"
+                :features="features"
+                :stats="stats"
+                :actions="FEATURESPLIT_ACTIONS"
+                layout="grid"
+                mediaSide="end"
+                tone="muted"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.gridMuted))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-metricCards-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="metricCards"
+          >
+            <Title :as="3" size="base" weight="bold" id="featuresplit-metricCards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featuresplit.metricCards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-metricCards"
+                :title="ui.marketing.featureSplit.title"
+                :lead="ui.marketing.featureSplit.lead"
+                :badge="ui.marketing.featureSplit.badge"
+                :features="features"
+                :stats="stats"
+                :actions="FEATURESPLIT_ACTIONS"
+                layout="metrics"
+                mediaSide="end"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuresplit-featureCards-label"
+            data-testid="variant"
+            data-block="featuresplit"
+            data-variant="featureCards"
+          >
+            <Title :as="3" size="base" weight="bold" id="featuresplit-featureCards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featuresplit.featureCards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSplit
+                id="featuresplit-featureCards"
+                :title="ui.marketing.featureSplit.title"
+                :lead="ui.marketing.featureSplit.lead"
+                :badge="ui.marketing.featureSplit.badge"
+                :features="features"
+                :stats="stats"
+                :actions="FEATURESPLIT_ACTIONS"
+                layout="cards"
+                mediaSide="end"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.featureCards))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingFooterPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFooterPage.vue
new file mode 100644
index 0000000..d1090e6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFooterPage.vue
@@ -0,0 +1,320 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-footer page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  SiteFooter,
+  SitemapFooter,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+
+const SITEMAP_SIGNUP = { title: ui.vibe.sitemap.signupTitle, label: ui.vibe.sitemap.signupLabel, submit: ui.vibe.sitemap.signupSubmit } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingFooter }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 9) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-footer-title"
+          data-testid="catalog-block"
+          data-block="footer"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-footer-title">
+              {{ ui.blocks.names.footer }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.footer }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footer-minimal-label"
+            data-testid="variant"
+            data-block="footer"
+            data-variant="minimal"
+          >
+            <Title :as="3" size="base" weight="bold" id="footer-minimal-label" data-testid="variant-label">
+              {{ ui.blocks.variants.footer.minimal }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteFooter
+                :labels="ui.site.footer"
+                layout="minimal"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.minimal))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footer-centered-label"
+            data-testid="variant"
+            data-block="footer"
+            data-variant="centered"
+          >
+            <Title :as="3" size="base" weight="bold" id="footer-centered-label" data-testid="variant-label">
+              {{ ui.blocks.variants.footer.centered }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteFooter
+                :labels="ui.site.footer"
+                layout="centered"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footer-compact-label"
+            data-testid="variant"
+            data-block="footer"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="footer-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.footer.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteFooter
+                :labels="ui.site.footer"
+                layout="minimal"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.compact))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-sitemap-title"
+          data-testid="catalog-block"
+          data-block="sitemap"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-sitemap-title">
+              {{ ui.blocks.names.sitemap }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.sitemap }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-columns-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="columns"
+          >
+            <Title :as="3" size="base" weight="bold" id="sitemap-columns-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sitemap.columns }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-columns"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.vibe.sitemap.tagline"
+                :copyright="ui.vibe.sitemap.copyright"
+                :groups="sitemap"
+                :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+                :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+                layout="columns"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.columns))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-card-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="card"
+          >
+            <Title :as="3" size="base" weight="bold" id="sitemap-card-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sitemap.card }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-card"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.vibe.sitemap.tagline"
+                :copyright="ui.vibe.sitemap.copyright"
+                :groups="sitemap"
+                :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+                :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+                layout="card"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.card))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-row-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="row"
+          >
+            <Title :as="3" size="base" weight="bold" id="sitemap-row-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sitemap.row }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-row"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.vibe.sitemap.tagline"
+                :copyright="ui.vibe.sitemap.copyright"
+                :groups="sitemap"
+                :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+                :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+                layout="row"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.row))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-newsletter-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="newsletter"
+          >
+            <Title :as="3" size="base" weight="bold" id="sitemap-newsletter-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sitemap.newsletter }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-newsletter"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.vibe.sitemap.tagline"
+                :copyright="ui.vibe.sitemap.copyright"
+                :groups="sitemap"
+                :signup="{ ...SITEMAP_SIGNUP, mode: 'first' }"
+                :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+                layout="columns"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.newsletter))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-status-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="status"
+          >
+            <Title :as="3" size="base" weight="bold" id="sitemap-status-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sitemap.status }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-status"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.vibe.sitemap.tagline"
+                :copyright="ui.vibe.sitemap.copyright"
+                :groups="sitemap"
+                :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+                :status="{ label: ui.vibe.sitemap.status, mode: 'show' }"
+                layout="columns"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.status))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sitemap-compact-label"
+            data-testid="variant"
+            data-block="sitemap"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="sitemap-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sitemap.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SitemapFooter
+                id="sitemap-compact"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.vibe.sitemap.tagline"
+                :copyright="ui.vibe.sitemap.copyright"
+                :groups="sitemap"
+                :signup="{ ...SITEMAP_SIGNUP, mode: 'none' }"
+                :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+                layout="columns"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sitemap, ui.blocks.variants.sitemap.compact))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingFooterSplitPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFooterSplitPage.vue
new file mode 100644
index 0000000..2ae6763
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingFooterSplitPage.vue
@@ -0,0 +1,265 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-footer-split page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  FooterSplit,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type MegaGroup,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+
+const FOOTERSPLIT_EXTRAS = { stats, points: features, contacts, channels: community } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingFooterSplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 6) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-footersplit-title"
+          data-testid="catalog-block"
+          data-block="footersplit"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-footersplit-title">
+              {{ ui.blocks.names.footersplit }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.footersplit }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-statsCards-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="statsCards"
+          >
+            <Title :as="3" size="base" weight="bold" id="footersplit-statsCards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.footersplit.statsCards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-statsCards"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.marketing.footerSplit.tagline"
+                :copyright="ui.marketing.footerSplit.copyright"
+                :groups="sitemap"
+                :extras="FOOTERSPLIT_EXTRAS"
+                :labels="ui.marketing.footerSplit.labels"
+                layout="stats"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.statsCards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-splitPoints-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="splitPoints"
+          >
+            <Title :as="3" size="base" weight="bold" id="footersplit-splitPoints-label" data-testid="variant-label">
+              {{ ui.blocks.variants.footersplit.splitPoints }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-splitPoints"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.marketing.footerSplit.tagline"
+                :copyright="ui.marketing.footerSplit.copyright"
+                :groups="sitemap"
+                :extras="FOOTERSPLIT_EXTRAS"
+                :labels="ui.marketing.footerSplit.labels"
+                layout="points"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitPoints))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-splitLinks-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="splitLinks"
+          >
+            <Title :as="3" size="base" weight="bold" id="footersplit-splitLinks-label" data-testid="variant-label">
+              {{ ui.blocks.variants.footersplit.splitLinks }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-splitLinks"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.marketing.footerSplit.tagline"
+                :copyright="ui.marketing.footerSplit.copyright"
+                :groups="sitemap"
+                :extras="FOOTERSPLIT_EXTRAS"
+                :labels="ui.marketing.footerSplit.labels"
+                layout="links"
+                mediaSide="end"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitLinks))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-newsletterStart-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="newsletterStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="footersplit-newsletterStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.footersplit.newsletterStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-newsletterStart"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.marketing.footerSplit.tagline"
+                :copyright="ui.marketing.footerSplit.copyright"
+                :groups="sitemap"
+                :extras="FOOTERSPLIT_EXTRAS"
+                :labels="ui.marketing.footerSplit.labels"
+                layout="newsletter"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.newsletterStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-splitContacts-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="splitContacts"
+          >
+            <Title :as="3" size="base" weight="bold" id="footersplit-splitContacts-label" data-testid="variant-label">
+              {{ ui.blocks.variants.footersplit.splitContacts }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-splitContacts"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.marketing.footerSplit.tagline"
+                :copyright="ui.marketing.footerSplit.copyright"
+                :groups="sitemap"
+                :extras="FOOTERSPLIT_EXTRAS"
+                :labels="ui.marketing.footerSplit.labels"
+                layout="contacts"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.splitContacts))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="footersplit-channelsStart-label"
+            data-testid="variant"
+            data-block="footersplit"
+            data-variant="channelsStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="footersplit-channelsStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.footersplit.channelsStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FooterSplit
+                id="footersplit-channelsStart"
+                :label="ui.vibe.sitemap.label"
+                :brand="ui.site.header.brand"
+                :tagline="ui.marketing.footerSplit.tagline"
+                :copyright="ui.marketing.footerSplit.copyright"
+                :groups="sitemap"
+                :extras="FOOTERSPLIT_EXTRAS"
+                :labels="ui.marketing.footerSplit.labels"
+                layout="channels"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footersplit, ui.blocks.variants.footersplit.channelsStart))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingGalleryPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingGalleryPage.vue
new file mode 100644
index 0000000..b1dc878
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingGalleryPage.vue
@@ -0,0 +1,381 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-gallery page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PhotoGallery,
+  Stack,
+  TemplateGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Filter,
+  type Photo,
+  type Template,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+const TEMPLATES_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "views": "metadata.views.value|compact",
+  "likes": "metadata.likes.value|compact",
+  "topic": "metadata.topic.value",
+} as const;
+const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingGallery }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 10) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-photos-title"
+          data-testid="catalog-block"
+          data-block="photos"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-photos-title">
+              {{ ui.blocks.names.photos }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.photos }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-grid-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="grid"
+          >
+            <Title :as="3" size="base" weight="bold" id="photos-grid-label" data-testid="variant-label">
+              {{ ui.blocks.variants.photos.grid }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-grid"
+                :title="ui.company.photos.title"
+                :lead="ui.company.photos.lead"
+                :photos="photos"
+                :empty="ui.empty.photos"
+                :labels="ui.company.photos"
+                layout="grid"
+                captions="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.grid))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-gridPlain-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="gridPlain"
+          >
+            <Title :as="3" size="base" weight="bold" id="photos-gridPlain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.photos.gridPlain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-gridPlain"
+                :title="ui.company.photos.title"
+                :lead="ui.company.photos.lead"
+                :photos="photos"
+                :empty="ui.empty.photos"
+                :labels="ui.company.photos"
+                layout="grid"
+                captions="hide"
+                tone="muted"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.gridPlain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-masonry-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="masonry"
+          >
+            <Title :as="3" size="base" weight="bold" id="photos-masonry-label" data-testid="variant-label">
+              {{ ui.blocks.variants.photos.masonry }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-masonry"
+                :title="ui.company.photos.title"
+                :lead="ui.company.photos.lead"
+                :photos="photos"
+                :empty="ui.empty.photos"
+                :labels="ui.company.photos"
+                layout="masonry"
+                captions="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-mosaic-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="mosaic"
+          >
+            <Title :as="3" size="base" weight="bold" id="photos-mosaic-label" data-testid="variant-label">
+              {{ ui.blocks.variants.photos.mosaic }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-mosaic"
+                :title="ui.company.photos.title"
+                :lead="ui.company.photos.lead"
+                :photos="photos"
+                :empty="ui.empty.photos"
+                :labels="ui.company.photos"
+                layout="mosaic"
+                captions="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.mosaic))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-featured-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="featured"
+          >
+            <Title :as="3" size="base" weight="bold" id="photos-featured-label" data-testid="variant-label">
+              {{ ui.blocks.variants.photos.featured }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-featured"
+                :title="ui.company.photos.title"
+                :lead="ui.company.photos.lead"
+                :photos="photos"
+                :empty="ui.empty.photos"
+                :labels="ui.company.photos"
+                layout="featured"
+                captions="show"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.featured))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="photos-cards-label"
+            data-testid="variant"
+            data-block="photos"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="photos-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.photos.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PhotoGallery
+                id="photos-cards"
+                :title="ui.company.photos.title"
+                :lead="ui.company.photos.lead"
+                :photos="photos"
+                :empty="ui.empty.photos"
+                :labels="ui.company.photos"
+                layout="cards"
+                captions="show"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.cards))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-templates-title"
+          data-testid="catalog-block"
+          data-block="templates"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-templates-title">
+              {{ ui.blocks.names.templates }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.templates }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-grid4-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="grid4"
+          >
+            <Title :as="3" size="base" weight="bold" id="templates-grid4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.templates.grid4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-grid4"
+                :title="ui.vibe.templates.title"
+                :templates="templates"
+                :filters="templateFilters"
+                :labels="ui.vibe.templates"
+                browseHref="#/"
+                :empty="ui.empty.templates"
+                cols="1-4"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-grid3-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="grid3"
+          >
+            <Title :as="3" size="base" weight="bold" id="templates-grid3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.templates.grid3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-grid3"
+                :title="ui.vibe.templates.title"
+                :templates="templates"
+                :filters="templateFilters"
+                :labels="ui.vibe.templates"
+                browseHref="#/"
+                :empty="ui.empty.templates"
+                cols="1-3"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-muted-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="templates-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.templates.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-muted"
+                :title="ui.vibe.templates.title"
+                :templates="templates"
+                :filters="templateFilters"
+                :labels="ui.vibe.templates"
+                browseHref="#/"
+                :empty="ui.empty.templates"
+                cols="1-4"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.muted))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="templates-roomy-label"
+            data-testid="variant"
+            data-block="templates"
+            data-variant="roomy"
+          >
+            <Title :as="3" size="base" weight="bold" id="templates-roomy-label" data-testid="variant-label">
+              {{ ui.blocks.variants.templates.roomy }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TemplateGrid
+                id="templates-roomy"
+                :title="ui.vibe.templates.title"
+                :templates="templates"
+                :filters="templateFilters"
+                :labels="ui.vibe.templates"
+                browseHref="#/"
+                :empty="ui.empty.templates"
+                cols="1-4"
+                tone="default"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.roomy))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingHeroPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingHeroPage.vue
new file mode 100644
index 0000000..634234e
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingHeroPage.vue
@@ -0,0 +1,529 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-hero page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroClassic,
+  HeroPrompt,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type NavLink,
+  type Topic,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { prompts as promptsEntries } from "@ui8kit/app-shared/data/prompts";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const PROMPTS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const prompts = fromCodex<Topic>(promptsEntries, PROMPTS_FIELDS, CODEX);
+
+const HERO_ACTIONS = {
+  cta: ui.site.home.cta,
+  href: "#/pricing",
+  secondary: ui.site.home.secondary,
+  secondaryHref: "#/pricing",
+  emailLabel: ui.promo.newsletter.label,
+} as const;
+const HERO_MEDIA = { codeTitle: ui.vibe.code.title, prompt: ui.vibe.code.prompt, lines: terminal } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingHero }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 15) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-hero-title"
+          data-testid="catalog-block"
+          data-block="hero"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-hero-title">
+              {{ ui.blocks.names.hero }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.hero }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-centered-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="centered"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-centered-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.centered }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-centered"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+                :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.centered))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-screenshot-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="screenshot"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-screenshot-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.screenshot }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-screenshot"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+                :media="{ ...HERO_MEDIA, kind: 'image', side: 'end' }"
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.screenshot))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-backdrop-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="backdrop"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-backdrop-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.backdrop }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-backdrop"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+                :media="{ ...HERO_MEDIA, kind: 'backdrop', side: 'end' }"
+                layout="centered"
+                scale="default"
+                tone="muted"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.backdrop))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-code-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="code"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-code-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.code }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-code"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'two' }"
+                :media="{ ...HERO_MEDIA, kind: 'code', side: 'end' }"
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.code))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-cluster-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="cluster"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-cluster-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.cluster }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-cluster"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+                :media="{ ...HERO_MEDIA, kind: 'cluster', side: 'end' }"
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.cluster))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-display-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="display"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-display-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.display }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-display"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+                :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+                layout="centered"
+                scale="display"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.display))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-form-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="form"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-form-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.form }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-form"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'form' }"
+                :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.form))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-prompt-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="prompt"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-prompt-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.prompt }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroPrompt
+                :title="ui.vibe.hero.title"
+                :actions="{ ...HERO_ACTIONS, emailLabel: ui.vibe.hero.promptLabel, mode: 'form' }"
+                :composer="{ attachLabel: ui.vibe.hero.attach, modelLabel: ui.vibe.hero.model }"
+                :nav="{
+                  brand: ui.site.header.brand,
+                  links: navlinks,
+                  current: 'link-product',
+                  skip: ui.site.header.skip,
+                  label: ui.site.header.nav,
+                  login: ui.site.header.login,
+                  loginHref: '#/login',
+                }"
+                density="compact"
+                :badge="ui.vibe.hero.badgeLabel"
+                :badgeMark="ui.vibe.hero.badgeMark"
+                :topics="prompts"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.prompt))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-twoActions-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="twoActions"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-twoActions-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.twoActions }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-twoActions"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'two' }"
+                :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.twoActions))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-split-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-split"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+                :media="{ ...HERO_MEDIA, kind: 'image', side: 'end' }"
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-splitStart-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="splitStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-splitStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.splitStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-splitStart"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'two' }"
+                :media="{ ...HERO_MEDIA, kind: 'image', side: 'start' }"
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.splitStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-muted-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-muted"
+                :title="ui.site.home.title"
+                :text="ui.site.home.text"
+                :actions="{ ...HERO_ACTIONS, mode: 'one' }"
+                :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+                layout="centered"
+                scale="default"
+                tone="muted"
+                density="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.muted))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-saas-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="saas"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-saas-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.saas }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-saas"
+                :title="ui.cases.saas.hero.title"
+                :text="ui.cases.saas.hero.text"
+                :actions="{
+                  ...HERO_ACTIONS,
+                  cta: ui.cases.saas.hero.cta,
+                  secondary: ui.cases.saas.hero.secondary,
+                  mode: 'two',
+                }"
+                :media="{ ...HERO_MEDIA, kind: 'image', side: 'end' }"
+                layout="split"
+                scale="default"
+                tone="default"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.saas))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-shop-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="shop"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-shop-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.shop }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-shop"
+                :title="ui.cases.shop.hero.title"
+                :text="ui.cases.shop.hero.text"
+                :actions="{
+                  ...HERO_ACTIONS,
+                  cta: ui.cases.shop.hero.cta,
+                  secondary: ui.cases.shop.hero.secondary,
+                  mode: 'one',
+                }"
+                :media="{ ...HERO_MEDIA, kind: 'image', side: 'start' }"
+                layout="split"
+                scale="default"
+                tone="muted"
+                density="roomy"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.shop))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="hero-blog-label"
+            data-testid="variant"
+            data-block="hero"
+            data-variant="blog"
+          >
+            <Title :as="3" size="base" weight="bold" id="hero-blog-label" data-testid="variant-label">
+              {{ ui.blocks.variants.hero.blog }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroClassic
+                id="hero-blog"
+                :title="ui.cases.blog.hero.title"
+                :text="ui.cases.blog.hero.text"
+                :actions="{
+                  ...HERO_ACTIONS,
+                  cta: ui.cases.blog.hero.cta,
+                  secondary: ui.cases.blog.hero.secondary,
+                  mode: 'one',
+                }"
+                :media="{ ...HERO_MEDIA, kind: 'none', side: 'end' }"
+                layout="centered"
+                scale="default"
+                tone="default"
+                density="compact"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.hero, ui.blocks.variants.hero.blog))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingHeroSplitPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingHeroSplitPage.vue
new file mode 100644
index 0000000..aa7b4f9
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingHeroSplitPage.vue
@@ -0,0 +1,327 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-hero-split page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  HeroSplit,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Plan,
+  type Quote,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+
+const HEROSPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.heroSplit.cta,
+  href: "#/pricing",
+  secondary: ui.marketing.heroSplit.secondary,
+  secondaryHref: "#/features",
+} as const;
+const HEROSPLIT_CONTENT = {
+  stats,
+  features,
+  people: testimonials,
+  plans: tiers,
+  proof: ui.marketing.heroSplit.proof,
+  card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: "zap" },
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingHeroSplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 7) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-herosplit-title"
+          data-testid="catalog-block"
+          data-block="herosplit"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-herosplit-title">
+              {{ ui.blocks.names.herosplit }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.herosplit }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-statsCards-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="statsCards"
+          >
+            <Title :as="3" size="base" weight="bold" id="herosplit-statsCards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.herosplit.statsCards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-statsCards"
+                :title="ui.marketing.heroSplit.title"
+                :lead="ui.marketing.heroSplit.lead"
+                :badge="ui.marketing.heroSplit.badge"
+                :actions="HEROSPLIT_ACTIONS"
+                :content="HEROSPLIT_CONTENT"
+                extra="stats"
+                media="picture"
+                mediaSide="end"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.statsCards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-avatars-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="avatars"
+          >
+            <Title :as="3" size="base" weight="bold" id="herosplit-avatars-label" data-testid="variant-label">
+              {{ ui.blocks.variants.herosplit.avatars }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-avatars"
+                :title="ui.marketing.heroSplit.title"
+                :lead="ui.marketing.heroSplit.lead"
+                :badge="ui.marketing.heroSplit.badge"
+                :actions="HEROSPLIT_ACTIONS"
+                :content="HEROSPLIT_CONTENT"
+                extra="avatars"
+                media="picture"
+                mediaSide="end"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.avatars))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-miniCards-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="miniCards"
+          >
+            <Title :as="3" size="base" weight="bold" id="herosplit-miniCards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.herosplit.miniCards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-miniCards"
+                :title="ui.marketing.heroSplit.title"
+                :lead="ui.marketing.heroSplit.lead"
+                :badge="ui.marketing.heroSplit.badge"
+                :actions="HEROSPLIT_ACTIONS"
+                :content="HEROSPLIT_CONTENT"
+                extra="minis"
+                media="card"
+                mediaSide="end"
+                tone="muted"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.miniCards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-quoteStats-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="quoteStats"
+          >
+            <Title :as="3" size="base" weight="bold" id="herosplit-quoteStats-label" data-testid="variant-label">
+              {{ ui.blocks.variants.herosplit.quoteStats }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-quoteStats"
+                :title="ui.marketing.heroSplit.title"
+                :lead="ui.marketing.heroSplit.lead"
+                :badge="ui.marketing.heroSplit.badge"
+                :actions="HEROSPLIT_ACTIONS"
+                :content="HEROSPLIT_CONTENT"
+                extra="quote"
+                media="card"
+                mediaSide="end"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.quoteStats))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-planCards-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="planCards"
+          >
+            <Title :as="3" size="base" weight="bold" id="herosplit-planCards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.herosplit.planCards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-planCards"
+                :title="ui.marketing.heroSplit.title"
+                :lead="ui.marketing.heroSplit.lead"
+                :badge="ui.marketing.heroSplit.badge"
+                :actions="HEROSPLIT_ACTIONS"
+                :content="HEROSPLIT_CONTENT"
+                extra="none"
+                media="plans"
+                mediaSide="start"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.planCards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-pictureGrid-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="pictureGrid"
+          >
+            <Title :as="3" size="base" weight="bold" id="herosplit-pictureGrid-label" data-testid="variant-label">
+              {{ ui.blocks.variants.herosplit.pictureGrid }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-pictureGrid"
+                :title="ui.marketing.heroSplit.title"
+                :lead="ui.marketing.heroSplit.lead"
+                :badge="ui.marketing.heroSplit.badge"
+                :actions="HEROSPLIT_ACTIONS"
+                :content="HEROSPLIT_CONTENT"
+                extra="stats"
+                media="grid"
+                mediaSide="end"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGrid))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="herosplit-pictureGridStart-label"
+            data-testid="variant"
+            data-block="herosplit"
+            data-variant="pictureGridStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="herosplit-pictureGridStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.herosplit.pictureGridStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <HeroSplit
+                id="herosplit-pictureGridStart"
+                :title="ui.marketing.heroSplit.title"
+                :lead="ui.marketing.heroSplit.lead"
+                :badge="ui.marketing.heroSplit.badge"
+                :actions="HEROSPLIT_ACTIONS"
+                :content="HEROSPLIT_CONTENT"
+                extra="avatars"
+                media="grid"
+                mediaSide="start"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.herosplit, ui.blocks.variants.herosplit.pictureGridStart))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingHowItWorksPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingHowItWorksPage.vue
new file mode 100644
index 0000000..8dde4d8
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingHowItWorksPage.vue
@@ -0,0 +1,231 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-how-it-works page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StepsList,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Step,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingHowItWorks }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 6) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-steps-title"
+          data-testid="catalog-block"
+          data-block="steps"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-steps-title">
+              {{ ui.blocks.names.steps }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.steps }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-row-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="row"
+          >
+            <Title :as="3" size="base" weight="bold" id="steps-row-label" data-testid="variant-label">
+              {{ ui.blocks.variants.steps.row }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-row"
+                :title="ui.marketing.steps.title"
+                :steps="steps"
+                :empty="ui.empty.steps"
+                layout="row"
+                marker="number"
+                align="start"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.row))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-rowIcons-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="rowIcons"
+          >
+            <Title :as="3" size="base" weight="bold" id="steps-rowIcons-label" data-testid="variant-label">
+              {{ ui.blocks.variants.steps.rowIcons }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-rowIcons"
+                :title="ui.marketing.steps.title"
+                :steps="steps"
+                :empty="ui.empty.steps"
+                layout="row"
+                marker="icon"
+                align="start"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-column-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="column"
+          >
+            <Title :as="3" size="base" weight="bold" id="steps-column-label" data-testid="variant-label">
+              {{ ui.blocks.variants.steps.column }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-column"
+                :title="ui.marketing.steps.title"
+                :steps="steps"
+                :empty="ui.empty.steps"
+                layout="column"
+                marker="number"
+                align="start"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-centered-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="centered"
+          >
+            <Title :as="3" size="base" weight="bold" id="steps-centered-label" data-testid="variant-label">
+              {{ ui.blocks.variants.steps.centered }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-centered"
+                :title="ui.marketing.steps.title"
+                :steps="steps"
+                :empty="ui.empty.steps"
+                layout="row"
+                marker="number"
+                align="center"
+                tone="muted"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.centered))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-columnIcons-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="columnIcons"
+          >
+            <Title :as="3" size="base" weight="bold" id="steps-columnIcons-label" data-testid="variant-label">
+              {{ ui.blocks.variants.steps.columnIcons }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-columnIcons"
+                :title="ui.marketing.steps.title"
+                :steps="steps"
+                :empty="ui.empty.steps"
+                layout="column"
+                marker="icon"
+                align="start"
+                tone="default"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.columnIcons))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="steps-compact-label"
+            data-testid="variant"
+            data-block="steps"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="steps-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.steps.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StepsList
+                id="steps-compact"
+                :title="ui.marketing.steps.title"
+                :steps="steps"
+                :empty="ui.empty.steps"
+                layout="row"
+                marker="number"
+                align="start"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.compact))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingMediaListPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingMediaListPage.vue
new file mode 100644
index 0000000..b5bb4fa
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingMediaListPage.vue
@@ -0,0 +1,296 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-media-list page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MediaList,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Feature,
+  type Post,
+  type Review,
+  type Stat,
+  type Step,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+
+const MEDIALIST_LABELS = {
+  count: ui.marketing.mediaList.count,
+  minutes: ui.content.labels.minutes,
+  featured: ui.marketing.mediaList.featured,
+  rating: ui.testimonials.rating,
+  figures: ui.marketing.mediaList.supportFigures,
+} as const;
+const MEDIALIST_EXTRAS = { stats, steps, posts, topics: categories, channels, reviews } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingMediaList }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 6) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-medialist-title"
+          data-testid="catalog-block"
+          data-block="medialist"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-medialist-title">
+              {{ ui.blocks.names.medialist }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.medialist }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-figuresStart-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="figuresStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="medialist-figuresStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.medialist.figuresStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-figuresStart"
+                :title="ui.marketing.mediaList.figures.title"
+                :lead="ui.marketing.mediaList.figures.lead"
+                :badge="ui.marketing.mediaList.figures.badge"
+                :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.figures.list }"
+                :actions="{ mode: 'one', cta: ui.marketing.mediaList.figures.cta, href: '#/start' }"
+                :extras="MEDIALIST_EXTRAS"
+                layout="figures"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.figuresStart))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-proofReview-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="proofReview"
+          >
+            <Title :as="3" size="base" weight="bold" id="medialist-proofReview-label" data-testid="variant-label">
+              {{ ui.blocks.variants.medialist.proofReview }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-proofReview"
+                :title="ui.marketing.mediaList.proof.title"
+                :lead="ui.marketing.mediaList.proof.lead"
+                :badge="ui.marketing.mediaList.proof.badge"
+                :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.proof.list }"
+                :actions="{
+                  mode: 'two',
+                  cta: ui.marketing.mediaList.proof.cta,
+                  href: '#/start',
+                  secondary: ui.marketing.mediaList.proof.secondary,
+                  secondaryHref: '#/more',
+                }"
+                :extras="MEDIALIST_EXTRAS"
+                layout="proof"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.proofReview))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-stepsRows-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="stepsRows"
+          >
+            <Title :as="3" size="base" weight="bold" id="medialist-stepsRows-label" data-testid="variant-label">
+              {{ ui.blocks.variants.medialist.stepsRows }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-stepsRows"
+                :title="ui.marketing.mediaList.steps.title"
+                :lead="ui.marketing.mediaList.steps.lead"
+                :badge="ui.marketing.mediaList.steps.badge"
+                :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.steps.list }"
+                :actions="{ mode: 'one', cta: ui.marketing.mediaList.steps.cta, href: '#/start' }"
+                :extras="MEDIALIST_EXTRAS"
+                layout="steps"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.stepsRows))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-latestPosts-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="latestPosts"
+          >
+            <Title :as="3" size="base" weight="bold" id="medialist-latestPosts-label" data-testid="variant-label">
+              {{ ui.blocks.variants.medialist.latestPosts }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-latestPosts"
+                :title="ui.marketing.mediaList.posts.title"
+                :lead="ui.marketing.mediaList.posts.lead"
+                :badge="ui.marketing.mediaList.posts.badge"
+                :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.posts.list }"
+                :actions="{ mode: 'one', cta: ui.marketing.mediaList.posts.cta, href: '#/start' }"
+                :extras="MEDIALIST_EXTRAS"
+                layout="posts"
+                mediaSide="end"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.latestPosts))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-topicRows-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="topicRows"
+          >
+            <Title :as="3" size="base" weight="bold" id="medialist-topicRows-label" data-testid="variant-label">
+              {{ ui.blocks.variants.medialist.topicRows }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-topicRows"
+                :title="ui.marketing.mediaList.topics.title"
+                :lead="ui.marketing.mediaList.topics.lead"
+                :badge="ui.marketing.mediaList.topics.badge"
+                :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.topics.list }"
+                :actions="{ mode: 'one', cta: ui.marketing.mediaList.topics.cta, href: '#/start' }"
+                :extras="MEDIALIST_EXTRAS"
+                layout="topics"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="medialist-contactStart-label"
+            data-testid="variant"
+            data-block="medialist"
+            data-variant="contactStart"
+          >
+            <Title :as="3" size="base" weight="bold" id="medialist-contactStart-label" data-testid="variant-label">
+              {{ ui.blocks.variants.medialist.contactStart }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MediaList
+                id="medialist-contactStart"
+                :title="ui.marketing.mediaList.contact.title"
+                :lead="ui.marketing.mediaList.contact.lead"
+                :badge="ui.marketing.mediaList.contact.badge"
+                :labels="{ ...MEDIALIST_LABELS, list: ui.marketing.mediaList.contact.list }"
+                :actions="{ mode: 'one', cta: ui.marketing.mediaList.contact.cta, href: '#/start' }"
+                :extras="MEDIALIST_EXTRAS"
+                layout="contact"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.contactStart))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingNavigationPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingNavigationPage.vue
new file mode 100644
index 0000000..a61b8ed
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingNavigationPage.vue
@@ -0,0 +1,493 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-navigation page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  MegaMenu,
+  NavBar,
+  SiteHeader,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+  type NavLink,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+const actions = { toggleTheme };
+
+const NAVBAR_ACTIONS = { cta: ui.site.header.cta, href: "#/", login: ui.site.header.login, loginHref: "#/login" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingNavigation }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 14) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-header-title"
+          data-testid="catalog-block"
+          data-block="header"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-header-title">
+              {{ ui.blocks.names.header }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.header }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-inline-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="inline"
+          >
+            <Title :as="3" size="base" weight="bold" id="header-inline-label" data-testid="variant-label">
+              {{ ui.blocks.variants.header.inline }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                :labels="ui.site.header"
+                current="home"
+                :cta="ui.site.header.cta"
+                layout="inline"
+                position="static"
+                actions="none"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.inline))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-stacked-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="header-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.header.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                :labels="ui.site.header"
+                current="home"
+                :cta="ui.site.header.cta"
+                layout="stacked"
+                position="static"
+                actions="none"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-sticky-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="sticky"
+          >
+            <Title :as="3" size="base" weight="bold" id="header-sticky-label" data-testid="variant-label">
+              {{ ui.blocks.variants.header.sticky }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                :labels="ui.site.header"
+                current="home"
+                :cta="ui.site.header.cta"
+                layout="inline"
+                position="sticky"
+                actions="none"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.sticky))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="header-withCta-label"
+            data-testid="variant"
+            data-block="header"
+            data-variant="withCta"
+          >
+            <Title :as="3" size="base" weight="bold" id="header-withCta-label" data-testid="variant-label">
+              {{ ui.blocks.variants.header.withCta }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SiteHeader
+                :labels="ui.site.header"
+                current="home"
+                :cta="ui.site.header.cta"
+                layout="inline"
+                position="static"
+                actions="cta"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.withCta))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-navbar-title"
+          data-testid="catalog-block"
+          data-block="navbar"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-navbar-title">
+              {{ ui.blocks.names.navbar }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.navbar }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-inline-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="inline"
+          >
+            <Title :as="3" size="base" weight="bold" id="navbar-inline-label" data-testid="variant-label">
+              {{ ui.blocks.variants.navbar.inline }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :links="navlinks"
+                current="link-product"
+                :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                layout="inline"
+                over="none"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inline))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-split-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="navbar-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.navbar.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :links="navlinks"
+                current="link-product"
+                :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                layout="split"
+                over="none"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-search-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="search"
+          >
+            <Title :as="3" size="base" weight="bold" id="navbar-search-label" data-testid="variant-label">
+              {{ ui.blocks.variants.navbar.search }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :links="navlinks"
+                current="link-product"
+                :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                layout="search"
+                over="none"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-media-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="media"
+          >
+            <Title :as="3" size="base" weight="bold" id="navbar-media-label" data-testid="variant-label">
+              {{ ui.blocks.variants.navbar.media }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :links="navlinks"
+                current="link-product"
+                :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                layout="inline"
+                over="media"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-plain-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="navbar-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.navbar.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :links="navlinks"
+                current="link-product"
+                :actions="{ ...NAVBAR_ACTIONS, mode: 'none' }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                layout="inline"
+                over="none"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.plain))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="navbar-inverse-label"
+            data-testid="variant"
+            data-block="navbar"
+            data-variant="inverse"
+          >
+            <Title :as="3" size="base" weight="bold" id="navbar-inverse-label" data-testid="variant-label">
+              {{ ui.blocks.variants.navbar.inverse }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NavBar
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :links="navlinks"
+                current="link-product"
+                :actions="{ ...NAVBAR_ACTIONS, mode: 'cta' }"
+                :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+                layout="inline"
+                over="none"
+                tone="inverse"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.inverse))"
+                @theme="() => actions.toggleTheme()"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-megamenu-title"
+          data-testid="catalog-block"
+          data-block="megamenu"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-megamenu-title">
+              {{ ui.blocks.names.megamenu }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.megamenu }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-open-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="open"
+          >
+            <Title :as="3" size="base" weight="bold" id="megamenu-open-label" data-testid="variant-label">
+              {{ ui.blocks.variants.megamenu.open }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :trigger="ui.vibe.mega.trigger"
+                :links="navlinks"
+                :groups="megagroups"
+                :promoTitle="ui.vibe.mega.promoTitle"
+                :promoText="ui.vibe.mega.promoText"
+                panel="open"
+                cols="3"
+                promo="none"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-closed-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="closed"
+          >
+            <Title :as="3" size="base" weight="bold" id="megamenu-closed-label" data-testid="variant-label">
+              {{ ui.blocks.variants.megamenu.closed }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :trigger="ui.vibe.mega.trigger"
+                :links="navlinks"
+                :groups="megagroups"
+                :promoTitle="ui.vibe.mega.promoTitle"
+                :promoText="ui.vibe.mega.promoText"
+                panel="closed"
+                cols="3"
+                promo="none"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.closed))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-twoCols-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="twoCols"
+          >
+            <Title :as="3" size="base" weight="bold" id="megamenu-twoCols-label" data-testid="variant-label">
+              {{ ui.blocks.variants.megamenu.twoCols }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :trigger="ui.vibe.mega.trigger"
+                :links="navlinks"
+                :groups="megagroups"
+                :promoTitle="ui.vibe.mega.promoTitle"
+                :promoText="ui.vibe.mega.promoText"
+                panel="open"
+                cols="2"
+                promo="none"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="megamenu-promo-label"
+            data-testid="variant"
+            data-block="megamenu"
+            data-variant="promo"
+          >
+            <Title :as="3" size="base" weight="bold" id="megamenu-promo-label" data-testid="variant-label">
+              {{ ui.blocks.variants.megamenu.promo }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <MegaMenu
+                :label="ui.vibe.nav.label"
+                :brand="ui.site.header.brand"
+                :trigger="ui.vibe.mega.trigger"
+                :links="navlinks"
+                :groups="megagroups"
+                :promoTitle="ui.vibe.mega.promoTitle"
+                :promoText="ui.vibe.mega.promoText"
+                panel="open"
+                cols="3"
+                promo="card"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.promo))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingPageHeadPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPageHeadPage.vue
new file mode 100644
index 0000000..2def5dc
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPageHeadPage.vue
@@ -0,0 +1,143 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-page-head page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageIntro,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingPageHead }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 3) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-pagehead-title"
+          data-testid="catalog-block"
+          data-block="pagehead"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-pagehead-title">
+              {{ ui.blocks.names.pagehead }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.pagehead }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagehead-start-label"
+            data-testid="variant"
+            data-block="pagehead"
+            data-variant="start"
+          >
+            <Title :as="3" size="base" weight="bold" id="pagehead-start-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pagehead.start }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageIntro
+                id="pagehead-start"
+                :title="ui.vibe.pagehead.title"
+                :text="ui.vibe.pagehead.text"
+                :cta="ui.vibe.pagehead.cta"
+                href="#/"
+                align="start"
+                tone="default"
+                density="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.start))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagehead-center-label"
+            data-testid="variant"
+            data-block="pagehead"
+            data-variant="center"
+          >
+            <Title :as="3" size="base" weight="bold" id="pagehead-center-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pagehead.center }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageIntro
+                id="pagehead-center"
+                :title="ui.vibe.pagehead.title"
+                :text="ui.vibe.pagehead.text"
+                :cta="ui.vibe.pagehead.cta"
+                href="#/"
+                align="center"
+                tone="default"
+                density="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.center))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagehead-muted-label"
+            data-testid="variant"
+            data-block="pagehead"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="pagehead-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pagehead.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageIntro
+                id="pagehead-muted"
+                :title="ui.vibe.pagehead.title"
+                :text="ui.vibe.pagehead.text"
+                :cta="ui.vibe.pagehead.cta"
+                href="#/"
+                align="start"
+                tone="muted"
+                density="compact"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagehead, ui.blocks.variants.pagehead.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingPageTrailPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPageTrailPage.vue
new file mode 100644
index 0000000..abe9153
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPageTrailPage.vue
@@ -0,0 +1,199 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-page-trail page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PageTrail,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+
+const PAGETRAIL_EXTRAS = {
+  value: ui.marketing.pageTrail.value,
+  caption: ui.marketing.pageTrail.caption,
+  note: ui.marketing.pageTrail.note,
+  icon: "package",
+  facts: stats,
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingPageTrail }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 4) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-pagetrail-title"
+          data-testid="catalog-block"
+          data-block="pagetrail"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-pagetrail-title">
+              {{ ui.blocks.names.pagetrail }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.pagetrail }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-crumbs-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="crumbs"
+          >
+            <Title :as="3" size="base" weight="bold" id="pagetrail-crumbs-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pagetrail.crumbs }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-crumbs"
+                :title="ui.marketing.pageTrail.title"
+                :lead="ui.marketing.pageTrail.lead"
+                :badge="ui.marketing.pageTrail.badge"
+                :label="ui.marketing.pageTrail.label"
+                :crumbs="crumbs"
+                :extras="PAGETRAIL_EXTRAS"
+                aside="none"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbs))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-crumbsFigure-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="crumbsFigure"
+          >
+            <Title :as="3" size="base" weight="bold" id="pagetrail-crumbsFigure-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pagetrail.crumbsFigure }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-crumbsFigure"
+                :title="ui.marketing.pageTrail.title"
+                :lead="ui.marketing.pageTrail.lead"
+                :badge="ui.marketing.pageTrail.badge"
+                :label="ui.marketing.pageTrail.label"
+                :crumbs="crumbs"
+                :extras="PAGETRAIL_EXTRAS"
+                aside="figure"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsFigure))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-crumbsNote-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="crumbsNote"
+          >
+            <Title :as="3" size="base" weight="bold" id="pagetrail-crumbsNote-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pagetrail.crumbsNote }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-crumbsNote"
+                :title="ui.marketing.pageTrail.title"
+                :lead="ui.marketing.pageTrail.lead"
+                :badge="ui.marketing.pageTrail.badge"
+                :label="ui.marketing.pageTrail.label"
+                :crumbs="crumbs"
+                :extras="PAGETRAIL_EXTRAS"
+                aside="note"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.crumbsNote))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pagetrail-keyFacts-label"
+            data-testid="variant"
+            data-block="pagetrail"
+            data-variant="keyFacts"
+          >
+            <Title :as="3" size="base" weight="bold" id="pagetrail-keyFacts-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pagetrail.keyFacts }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PageTrail
+                id="pagetrail-keyFacts"
+                :title="ui.marketing.pageTrail.title"
+                :lead="ui.marketing.pageTrail.lead"
+                :badge="ui.marketing.pageTrail.badge"
+                :label="ui.marketing.pageTrail.label"
+                :crumbs="crumbs"
+                :extras="PAGETRAIL_EXTRAS"
+                aside="facts"
+                tone="muted"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pagetrail, ui.blocks.variants.pagetrail.keyFacts))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingPortfolioPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPortfolioPage.vue
new file mode 100644
index 0000000..65a81f8
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPortfolioPage.vue
@@ -0,0 +1,240 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-portfolio page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  ProjectGrid,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Project,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingPortfolio }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 6) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-projects-title"
+          data-testid="catalog-block"
+          data-block="projects"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-projects-title">
+              {{ ui.blocks.names.projects }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.projects }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-cards-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="projects-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.projects.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-cards"
+                :title="ui.company.projects.title"
+                :lead="ui.company.projects.lead"
+                :projects="projects"
+                :empty="ui.empty.projects"
+                :labels="ui.company.projects"
+                layout="cards"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-compact-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="projects-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.projects.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-compact"
+                :title="ui.company.projects.title"
+                :lead="ui.company.projects.lead"
+                :projects="projects"
+                :empty="ui.empty.projects"
+                :labels="ui.company.projects"
+                layout="compact"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.compact))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-overlay-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="overlay"
+          >
+            <Title :as="3" size="base" weight="bold" id="projects-overlay-label" data-testid="variant-label">
+              {{ ui.blocks.variants.projects.overlay }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-overlay"
+                :title="ui.company.projects.title"
+                :lead="ui.company.projects.lead"
+                :projects="projects"
+                :empty="ui.empty.projects"
+                :labels="ui.company.projects"
+                layout="overlay"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.overlay))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-bento-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="bento"
+          >
+            <Title :as="3" size="base" weight="bold" id="projects-bento-label" data-testid="variant-label">
+              {{ ui.blocks.variants.projects.bento }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-bento"
+                :title="ui.company.projects.title"
+                :lead="ui.company.projects.lead"
+                :projects="projects"
+                :empty="ui.empty.projects"
+                :labels="ui.company.projects"
+                layout="bento"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.bento))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-list-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="projects-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.projects.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-list"
+                :title="ui.company.projects.title"
+                :lead="ui.company.projects.lead"
+                :projects="projects"
+                :empty="ui.empty.projects"
+                :labels="ui.company.projects"
+                layout="list"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="projects-cardsMuted-label"
+            data-testid="variant"
+            data-block="projects"
+            data-variant="cardsMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="projects-cardsMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.projects.cardsMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProjectGrid
+                id="projects-cardsMuted"
+                :title="ui.company.projects.title"
+                :lead="ui.company.projects.lead"
+                :projects="projects"
+                :empty="ui.empty.projects"
+                :labels="ui.company.projects"
+                layout="cards"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cardsMuted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingPricingPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPricingPage.vue
new file mode 100644
index 0000000..80ce86f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPricingPage.vue
@@ -0,0 +1,471 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-pricing page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  PricingCard,
+  PricingTiers,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Plan,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const DUO_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingPricing }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 13) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-pricing-title"
+          data-testid="catalog-block"
+          data-block="pricing"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-pricing-title">
+              {{ ui.blocks.names.pricing }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.pricing }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-grid-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="grid"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-grid-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.grid }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-grid"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="tiers"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-monthly-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="monthly"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-monthly-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.monthly }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-monthly"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="tiers"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="monthly"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-annual-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="annual"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-annual-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.annual }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-annual"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="tiers"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="annual"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-duo-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="duo"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-duo-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.duo }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-duo"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="duo"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="grid"
+                cols="1-2"
+                emphasis="off"
+                billing="off"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-grid2-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="grid2"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-grid2-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.grid2 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-grid2"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="tiers"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="grid"
+                cols="1-2"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid2))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-grid4-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="grid4"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-grid4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.grid4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-grid4"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="tiers"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="grid"
+                cols="1-4"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.grid4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-stack-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="stack"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-stack-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.stack }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-stack"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="tiers"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="stack"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-flat-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="flat"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-flat-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.flat }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-flat"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="tiers"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="grid"
+                cols="1-3"
+                emphasis="off"
+                billing="off"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.flat))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-compactMuted-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="compactMuted"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-compactMuted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.compactMuted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-compactMuted"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="tiers"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.compactMuted))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="pricing-roomy-label"
+            data-testid="variant"
+            data-block="pricing"
+            data-variant="roomy"
+          >
+            <Title :as="3" size="base" weight="bold" id="pricing-roomy-label" data-testid="variant-label">
+              {{ ui.blocks.variants.pricing.roomy }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <PricingTiers
+                id="pricing-roomy"
+                :title="ui.site.pricing.tiersTitle"
+                :plans="tiers"
+                :labels="ui.pricing"
+                :billingLabels="ui.vibe.billing"
+                layout="grid"
+                cols="1-3"
+                emphasis="auto"
+                billing="off"
+                tone="default"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.roomy))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-plan-title"
+          data-testid="catalog-block"
+          data-block="plan"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-plan-title">
+              {{ ui.blocks.names.plan }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.plan }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="plan-standard-label"
+            data-testid="variant"
+            data-block="plan"
+            data-variant="standard"
+          >
+            <Title :as="3" size="base" weight="bold" id="plan-standard-label" data-testid="variant-label">
+              {{ ui.blocks.variants.plan.standard }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <PricingCard
+                  :plan="tiers.find((i) => i.id === 'tier-team')!"
+                  :labels="ui.pricing"
+                  emphasis="auto"
+                  density="default"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="plan-flat-label"
+            data-testid="variant"
+            data-block="plan"
+            data-variant="flat"
+          >
+            <Title :as="3" size="base" weight="bold" id="plan-flat-label" data-testid="variant-label">
+              {{ ui.blocks.variants.plan.flat }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <PricingCard
+                  :plan="tiers.find((i) => i.id === 'tier-team')!"
+                  :labels="ui.pricing"
+                  emphasis="off"
+                  density="default"
+                />
+              </Box>
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="plan-compact-label"
+            data-testid="variant"
+            data-block="plan"
+            data-variant="compact"
+          >
+            <Title :as="3" size="base" weight="bold" id="plan-compact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.plan.compact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <Box class="mx-auto w-full max-w-sm px-4 py-6" data-slot="container">
+                <PricingCard
+                  :plan="tiers.find((i) => i.id === 'tier-team')!"
+                  :labels="ui.pricing"
+                  emphasis="auto"
+                  density="compact"
+                />
+              </Box>
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingPricingToolsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPricingToolsPage.vue
new file mode 100644
index 0000000..f359a9b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingPricingToolsPage.vue
@@ -0,0 +1,454 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-pricing-tools page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  ComparisonTable,
+  Container,
+  CreditPacks,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  UsageCalculator,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+  type Pack,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const CREDITS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "credits": "metadata.credits.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "badge": "metadata.badge.value",
+} as const;
+
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+
+const USAGE_SLIDER = { min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit } as const;
+const USAGE_PRICE = { rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingPricingTools }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 12) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-compare-title"
+          data-testid="catalog-block"
+          data-block="compare"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-compare-title">
+              {{ ui.blocks.names.compare }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.compare }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-plans-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="plans"
+          >
+            <Title :as="3" size="base" weight="bold" id="compare-plans-label" data-testid="variant-label">
+              {{ ui.blocks.variants.compare.plans }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-plans"
+                :title="ui.vibe.compare.title"
+                :rows="compare"
+                :empty="ui.empty.rows"
+                :labels="ui.vibe.compare.labels"
+                highlight="none"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-highlight-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="highlight"
+          >
+            <Title :as="3" size="base" weight="bold" id="compare-highlight-label" data-testid="variant-label">
+              {{ ui.blocks.variants.compare.highlight }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-highlight"
+                :title="ui.vibe.compare.title"
+                :rows="compare"
+                :empty="ui.empty.rows"
+                :labels="ui.vibe.compare.labels"
+                highlight="middle"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-rivals-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="rivals"
+          >
+            <Title :as="3" size="base" weight="bold" id="compare-rivals-label" data-testid="variant-label">
+              {{ ui.blocks.variants.compare.rivals }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-rivals"
+                :title="ui.vibe.rivals.title"
+                :rows="rivals"
+                :empty="ui.empty.rows"
+                :labels="ui.vibe.rivals.labels"
+                highlight="middle"
+                tone="muted"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="compare-muted-label"
+            data-testid="variant"
+            data-block="compare"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="compare-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.compare.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ComparisonTable
+                id="compare-muted"
+                :title="ui.vibe.compare.title"
+                :rows="compare"
+                :empty="ui.empty.rows"
+                :labels="ui.vibe.compare.labels"
+                highlight="none"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-credits-title"
+          data-testid="catalog-block"
+          data-block="credits"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-credits-title">
+              {{ ui.blocks.names.credits }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.credits }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-tiles4-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="tiles4"
+          >
+            <Title :as="3" size="base" weight="bold" id="credits-tiles4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.credits.tiles4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-tiles4"
+                :title="ui.vibe.credits.title"
+                :packs="credits"
+                :empty="ui.empty.packs"
+                :badges="ui.vibe.credits.badges"
+                :buy="ui.vibe.credits.buy"
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-tiles2-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="tiles2"
+          >
+            <Title :as="3" size="base" weight="bold" id="credits-tiles2-label" data-testid="variant-label">
+              {{ ui.blocks.variants.credits.tiles2 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-tiles2"
+                :title="ui.vibe.credits.title"
+                :packs="credits"
+                :empty="ui.empty.packs"
+                :badges="ui.vibe.credits.badges"
+                :buy="ui.vibe.credits.buy"
+                cols="2"
+                item="tile"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles2))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-rows-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="rows"
+          >
+            <Title :as="3" size="base" weight="bold" id="credits-rows-label" data-testid="variant-label">
+              {{ ui.blocks.variants.credits.rows }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-rows"
+                :title="ui.vibe.credits.title"
+                :packs="credits"
+                :empty="ui.empty.packs"
+                :badges="ui.vibe.credits.badges"
+                :buy="ui.vibe.credits.buy"
+                cols="4"
+                item="row"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="credits-muted-label"
+            data-testid="variant"
+            data-block="credits"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="credits-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.credits.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CreditPacks
+                id="credits-muted"
+                :title="ui.vibe.credits.title"
+                :packs="credits"
+                :empty="ui.empty.packs"
+                :badges="ui.vibe.credits.badges"
+                :buy="ui.vibe.credits.buy"
+                cols="4"
+                item="tile"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-usage-title"
+          data-testid="catalog-block"
+          data-block="usage"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-usage-title">
+              {{ ui.blocks.names.usage }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.usage }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-card-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="card"
+          >
+            <Title :as="3" size="base" weight="bold" id="usage-card-label" data-testid="variant-label">
+              {{ ui.blocks.variants.usage.card }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-card"
+                :title="ui.vibe.usage.title"
+                :text="ui.vibe.usage.text"
+                :usage="5000"
+                :slider="USAGE_SLIDER"
+                :price="USAGE_PRICE"
+                :cta="ui.vibe.usage.cta"
+                href="#/"
+                layout="card"
+                ends="show"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-plain-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="usage-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.usage.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-plain"
+                :title="ui.vibe.usage.title"
+                :text="ui.vibe.usage.text"
+                :usage="5000"
+                :slider="USAGE_SLIDER"
+                :price="USAGE_PRICE"
+                :cta="ui.vibe.usage.cta"
+                href="#/"
+                layout="plain"
+                ends="show"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.plain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-noEnds-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="noEnds"
+          >
+            <Title :as="3" size="base" weight="bold" id="usage-noEnds-label" data-testid="variant-label">
+              {{ ui.blocks.variants.usage.noEnds }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-noEnds"
+                :title="ui.vibe.usage.title"
+                :text="ui.vibe.usage.text"
+                :usage="5000"
+                :slider="USAGE_SLIDER"
+                :price="USAGE_PRICE"
+                :cta="ui.vibe.usage.cta"
+                href="#/"
+                layout="card"
+                ends="hide"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.noEnds))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="usage-muted-label"
+            data-testid="variant"
+            data-block="usage"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="usage-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.usage.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <UsageCalculator
+                id="usage-muted"
+                :title="ui.vibe.usage.title"
+                :text="ui.vibe.usage.text"
+                :usage="5000"
+                :slider="USAGE_SLIDER"
+                :price="USAGE_PRICE"
+                :cta="ui.vibe.usage.cta"
+                href="#/"
+                layout="card"
+                ends="show"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingProofPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingProofPage.vue
new file mode 100644
index 0000000..002624f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingProofPage.vue
@@ -0,0 +1,511 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-proof page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  LogoCloud,
+  ProofBand,
+  Stack,
+  Text,
+  Title,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingProof }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 3, 14) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-logos-title"
+          data-testid="catalog-block"
+          data-block="logos"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-logos-title">
+              {{ ui.blocks.names.logos }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.logos }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-grid4-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="grid4"
+          >
+            <Title :as="3" size="base" weight="bold" id="logos-grid4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.logos.grid4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-grid4"
+                :title="ui.marketing.logos.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                layout="grid"
+                cols="4"
+                item="name"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-grid3-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="grid3"
+          >
+            <Title :as="3" size="base" weight="bold" id="logos-grid3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.logos.grid3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-grid3"
+                :title="ui.marketing.logos.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                layout="grid"
+                cols="3"
+                item="tile"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-row-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="row"
+          >
+            <Title :as="3" size="base" weight="bold" id="logos-row-label" data-testid="variant-label">
+              {{ ui.blocks.variants.logos.row }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-row"
+                :title="ui.marketing.logos.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                layout="row"
+                cols="4"
+                item="icon"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-icons-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="icons"
+          >
+            <Title :as="3" size="base" weight="bold" id="logos-icons-label" data-testid="variant-label">
+              {{ ui.blocks.variants.logos.icons }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-icons"
+                :title="ui.marketing.logos.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                layout="grid"
+                cols="4"
+                item="icon"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.icons))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-grid2-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="grid2"
+          >
+            <Title :as="3" size="base" weight="bold" id="logos-grid2-label" data-testid="variant-label">
+              {{ ui.blocks.variants.logos.grid2 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-grid2"
+                :title="ui.marketing.logos.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                layout="grid"
+                cols="2"
+                item="name"
+                tone="default"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid2))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="logos-tiles4-label"
+            data-testid="variant"
+            data-block="logos"
+            data-variant="tiles4"
+          >
+            <Title :as="3" size="base" weight="bold" id="logos-tiles4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.logos.tiles4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <LogoCloud
+                id="logos-tiles4"
+                :title="ui.marketing.logos.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                layout="grid"
+                cols="4"
+                item="tile"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-proof-title"
+          data-testid="catalog-block"
+          data-block="proof"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-proof-title">
+              {{ ui.blocks.names.proof }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.proof }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-above-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="above"
+          >
+            <Title :as="3" size="base" weight="bold" id="proof-above-label" data-testid="variant-label">
+              {{ ui.blocks.variants.proof.above }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-above"
+                :title="ui.vibe.proof.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                :stats="stats"
+                layout="above"
+                logoStyle="name"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-beside-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="beside"
+          >
+            <Title :as="3" size="base" weight="bold" id="proof-beside-label" data-testid="variant-label">
+              {{ ui.blocks.variants.proof.beside }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-beside"
+                :title="ui.vibe.proof.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                :stats="stats"
+                layout="beside"
+                logoStyle="name"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.beside))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-icons-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="icons"
+          >
+            <Title :as="3" size="base" weight="bold" id="proof-icons-label" data-testid="variant-label">
+              {{ ui.blocks.variants.proof.icons }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-icons"
+                :title="ui.vibe.proof.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                :stats="stats"
+                layout="above"
+                logoStyle="icon"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.icons))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="proof-muted-label"
+            data-testid="variant"
+            data-block="proof"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="proof-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.proof.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ProofBand
+                id="proof-muted"
+                :title="ui.vibe.proof.title"
+                :logos="logos"
+                :empty="ui.empty.logos"
+                :stats="stats"
+                layout="above"
+                logoStyle="name"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-videos-title"
+          data-testid="catalog-block"
+          data-block="videos"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-videos-title">
+              {{ ui.blocks.names.videos }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.videos }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-grid3-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="grid3"
+          >
+            <Title :as="3" size="base" weight="bold" id="videos-grid3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.videos.grid3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-grid3"
+                :title="ui.vibe.videos.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :playLabel="ui.vibe.videos.play"
+                :byLine="ui.testimonials.byLine"
+                cols="1-3"
+                caption="below"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-grid2-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="grid2"
+          >
+            <Title :as="3" size="base" weight="bold" id="videos-grid2-label" data-testid="variant-label">
+              {{ ui.blocks.variants.videos.grid2 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-grid2"
+                :title="ui.vibe.videos.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :playLabel="ui.vibe.videos.play"
+                :byLine="ui.testimonials.byLine"
+                cols="1-2"
+                caption="below"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid2))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-overlay-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="overlay"
+          >
+            <Title :as="3" size="base" weight="bold" id="videos-overlay-label" data-testid="variant-label">
+              {{ ui.blocks.variants.videos.overlay }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-overlay"
+                :title="ui.vibe.videos.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :playLabel="ui.vibe.videos.play"
+                :byLine="ui.testimonials.byLine"
+                cols="1-3"
+                caption="overlay"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="videos-muted-label"
+            data-testid="variant"
+            data-block="videos"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="videos-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.videos.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <VideoGrid
+                id="videos-muted"
+                :title="ui.vibe.videos.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :playLabel="ui.vibe.videos.play"
+                :byLine="ui.testimonials.byLine"
+                cols="1-3"
+                caption="below"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingShowcasesPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingShowcasesPage.vue
new file mode 100644
index 0000000..5cf015d
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingShowcasesPage.vue
@@ -0,0 +1,524 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-showcases page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  BentoGrid,
+  Block,
+  Box,
+  Container,
+  FeatureAccordion,
+  FeatureSticky,
+  FeatureTabs,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+  type Tile,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingShowcases }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 4, 15) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-bento-title"
+          data-testid="catalog-block"
+          data-block="bento"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-bento-title">
+              {{ ui.blocks.names.bento }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.bento }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-bento-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="bento"
+          >
+            <Title :as="3" size="base" weight="bold" id="bento-bento-label" data-testid="variant-label">
+              {{ ui.blocks.variants.bento.bento }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-bento"
+                :title="ui.vibe.bento.title"
+                :tiles="bento"
+                :empty="ui.empty.tiles"
+                layout="bento"
+                media="none"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-even-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="even"
+          >
+            <Title :as="3" size="base" weight="bold" id="bento-even-label" data-testid="variant-label">
+              {{ ui.blocks.variants.bento.even }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-even"
+                :title="ui.vibe.bento.title"
+                :tiles="bento"
+                :empty="ui.empty.tiles"
+                layout="even"
+                media="none"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.even))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-images-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="images"
+          >
+            <Title :as="3" size="base" weight="bold" id="bento-images-label" data-testid="variant-label">
+              {{ ui.blocks.variants.bento.images }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-images"
+                :title="ui.vibe.bento.title"
+                :tiles="bento"
+                :empty="ui.empty.tiles"
+                layout="bento"
+                media="image"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="bento-muted-label"
+            data-testid="variant"
+            data-block="bento"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="bento-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.bento.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <BentoGrid
+                id="bento-muted"
+                :title="ui.vibe.bento.title"
+                :tiles="bento"
+                :empty="ui.empty.tiles"
+                layout="bento"
+                media="none"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-featuretabs-title"
+          data-testid="catalog-block"
+          data-block="featuretabs"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-featuretabs-title">
+              {{ ui.blocks.names.featuretabs }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.featuretabs }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuretabs-split-label"
+            data-testid="variant"
+            data-block="featuretabs"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="featuretabs-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featuretabs.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureTabs
+                id="featuretabs-split"
+                :title="ui.vibe.tabs.title"
+                :features="features"
+                :empty="ui.empty.features"
+                :tabsLabel="ui.vibe.tabs.label"
+                active="feature-clear"
+                panel="split"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuretabs-stack-label"
+            data-testid="variant"
+            data-block="featuretabs"
+            data-variant="stack"
+          >
+            <Title :as="3" size="base" weight="bold" id="featuretabs-stack-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featuretabs.stack }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureTabs
+                id="featuretabs-stack"
+                :title="ui.vibe.tabs.title"
+                :features="features"
+                :empty="ui.empty.features"
+                :tabsLabel="ui.vibe.tabs.label"
+                active="feature-clear"
+                panel="stack"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.stack))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="featuretabs-muted-label"
+            data-testid="variant"
+            data-block="featuretabs"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="featuretabs-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.featuretabs.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureTabs
+                id="featuretabs-muted"
+                :title="ui.vibe.tabs.title"
+                :features="features"
+                :empty="ui.empty.features"
+                :tabsLabel="ui.vibe.tabs.label"
+                active="feature-clear"
+                panel="split"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-accordion-title"
+          data-testid="catalog-block"
+          data-block="accordion"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-accordion-title">
+              {{ ui.blocks.names.accordion }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.accordion }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-first-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="first"
+          >
+            <Title :as="3" size="base" weight="bold" id="accordion-first-label" data-testid="variant-label">
+              {{ ui.blocks.variants.accordion.first }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-first"
+                :title="ui.vibe.accordion.title"
+                :features="features"
+                :empty="ui.empty.features"
+                expand="first"
+                media="none"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-closed-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="closed"
+          >
+            <Title :as="3" size="base" weight="bold" id="accordion-closed-label" data-testid="variant-label">
+              {{ ui.blocks.variants.accordion.closed }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-closed"
+                :title="ui.vibe.accordion.title"
+                :features="features"
+                :empty="ui.empty.features"
+                expand="none"
+                media="none"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.closed))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-media-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="media"
+          >
+            <Title :as="3" size="base" weight="bold" id="accordion-media-label" data-testid="variant-label">
+              {{ ui.blocks.variants.accordion.media }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-media"
+                :title="ui.vibe.accordion.title"
+                :features="features"
+                :empty="ui.empty.features"
+                expand="first"
+                media="image"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="accordion-muted-label"
+            data-testid="variant"
+            data-block="accordion"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="accordion-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.accordion.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureAccordion
+                id="accordion-muted"
+                :title="ui.vibe.accordion.title"
+                :features="features"
+                :empty="ui.empty.features"
+                expand="first"
+                media="none"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-sticky-title"
+          data-testid="catalog-block"
+          data-block="sticky"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-sticky-title">
+              {{ ui.blocks.names.sticky }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.sticky }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-end-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="end"
+          >
+            <Title :as="3" size="base" weight="bold" id="sticky-end-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sticky.end }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-end"
+                :title="ui.vibe.sticky.title"
+                :features="features"
+                :empty="ui.empty.features"
+                active="feature-clear"
+                mediaSide="end"
+                item="plain"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-start-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="start"
+          >
+            <Title :as="3" size="base" weight="bold" id="sticky-start-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sticky.start }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-start"
+                :title="ui.vibe.sticky.title"
+                :features="features"
+                :empty="ui.empty.features"
+                active="feature-clear"
+                mediaSide="start"
+                item="plain"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.start))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-card-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="card"
+          >
+            <Title :as="3" size="base" weight="bold" id="sticky-card-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sticky.card }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-card"
+                :title="ui.vibe.sticky.title"
+                :features="features"
+                :empty="ui.empty.features"
+                active="feature-clear"
+                mediaSide="end"
+                item="card"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="sticky-muted-label"
+            data-testid="variant"
+            data-block="sticky"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="sticky-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.sticky.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <FeatureSticky
+                id="sticky-muted"
+                :title="ui.vibe.sticky.title"
+                :features="features"
+                :empty="ui.empty.features"
+                active="feature-clear"
+                mediaSide="end"
+                item="plain"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingStatsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingStatsPage.vue
new file mode 100644
index 0000000..b41388d
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingStatsPage.vue
@@ -0,0 +1,307 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-stats page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  StatsBand,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingStats }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 8) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-stats-title"
+          data-testid="catalog-block"
+          data-block="stats"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-stats-title">
+              {{ ui.blocks.names.stats }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.stats }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-plain4-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="plain4"
+          >
+            <Title :as="3" size="base" weight="bold" id="stats-plain4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stats.plain4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-plain4"
+                :title="ui.marketing.stats.title"
+                :stats="stats"
+                :empty="ui.marketing.stats.empty"
+                cols="4"
+                layout="row"
+                surface="none"
+                item="plain"
+                align="center"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.plain4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-panel-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="panel"
+          >
+            <Title :as="3" size="base" weight="bold" id="stats-panel-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stats.panel }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-panel"
+                title=""
+                :stats="stats"
+                :empty="ui.marketing.stats.empty"
+                cols="4"
+                layout="row"
+                surface="panel"
+                item="plain"
+                align="center"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.panel))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-stack-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="stack"
+          >
+            <Title :as="3" size="base" weight="bold" id="stats-stack-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stats.stack }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-stack"
+                :title="ui.marketing.stats.title"
+                :stats="stats"
+                :empty="ui.marketing.stats.empty"
+                cols="4"
+                layout="stack"
+                surface="none"
+                item="plain"
+                align="start"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.stack))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-image-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="image"
+          >
+            <Title :as="3" size="base" weight="bold" id="stats-image-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stats.image }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-image"
+                :title="ui.marketing.stats.title"
+                :stats="stats"
+                :empty="ui.marketing.stats.empty"
+                cols="4"
+                layout="row"
+                surface="image"
+                item="plain"
+                align="center"
+                tone="default"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.image))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-cards-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="cards"
+          >
+            <Title :as="3" size="base" weight="bold" id="stats-cards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stats.cards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-cards"
+                :title="ui.marketing.stats.title"
+                :stats="[stats?.[0], stats?.[1], stats?.[2]]"
+                :empty="ui.marketing.stats.empty"
+                cols="3"
+                layout="row"
+                surface="none"
+                item="card"
+                align="center"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-icons-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="icons"
+          >
+            <Title :as="3" size="base" weight="bold" id="stats-icons-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stats.icons }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-icons"
+                :title="ui.marketing.stats.title"
+                :stats="stats"
+                :empty="ui.marketing.stats.empty"
+                cols="4"
+                layout="row"
+                surface="none"
+                item="icon"
+                align="start"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-muted2-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="muted2"
+          >
+            <Title :as="3" size="base" weight="bold" id="stats-muted2-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stats.muted2 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-muted2"
+                :title="ui.marketing.stats.title"
+                :stats="stats"
+                :empty="ui.marketing.stats.empty"
+                cols="2"
+                layout="row"
+                surface="none"
+                item="plain"
+                align="center"
+                tone="muted"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.muted2))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="stats-cardsCompact-label"
+            data-testid="variant"
+            data-block="stats"
+            data-variant="cardsCompact"
+          >
+            <Title :as="3" size="base" weight="bold" id="stats-cardsCompact-label" data-testid="variant-label">
+              {{ ui.blocks.variants.stats.cardsCompact }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <StatsBand
+                id="stats-cardsCompact"
+                :title="ui.marketing.stats.title"
+                :stats="stats"
+                :empty="ui.marketing.stats.empty"
+                cols="4"
+                layout="row"
+                surface="none"
+                item="card"
+                align="center"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cardsCompact))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingTeamPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingTeamPage.vue
new file mode 100644
index 0000000..46b65d0
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingTeamPage.vue
@@ -0,0 +1,245 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-team page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TeamGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Member,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingTeam }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 6) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-team-title"
+          data-testid="catalog-block"
+          data-block="team"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-team-title">
+              {{ ui.blocks.names.team }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.team }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-cards4-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="cards4"
+          >
+            <Title :as="3" size="base" weight="bold" id="team-cards4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.team.cards4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-cards4"
+                :title="ui.company.team.title"
+                :lead="ui.company.team.lead"
+                :members="members"
+                :empty="ui.empty.members"
+                :depts="ui.company.depts"
+                layout="cards"
+                cols="1-4"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-cards3-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="cards3"
+          >
+            <Title :as="3" size="base" weight="bold" id="team-cards3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.team.cards3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-cards3"
+                :title="ui.company.team.title"
+                :lead="ui.company.team.lead"
+                :members="members"
+                :empty="ui.empty.members"
+                :depts="ui.company.depts"
+                layout="cards"
+                cols="1-3"
+                tone="muted"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-minimal-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="minimal"
+          >
+            <Title :as="3" size="base" weight="bold" id="team-minimal-label" data-testid="variant-label">
+              {{ ui.blocks.variants.team.minimal }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-minimal"
+                :title="ui.company.team.title"
+                :lead="ui.company.team.lead"
+                :members="members"
+                :empty="ui.empty.members"
+                :depts="ui.company.depts"
+                layout="minimal"
+                cols="1-4"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.minimal))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-detailed-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="detailed"
+          >
+            <Title :as="3" size="base" weight="bold" id="team-detailed-label" data-testid="variant-label">
+              {{ ui.blocks.variants.team.detailed }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-detailed"
+                :title="ui.company.team.title"
+                :lead="ui.company.team.lead"
+                :members="members"
+                :empty="ui.empty.members"
+                :depts="ui.company.depts"
+                layout="detailed"
+                cols="1-3"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.detailed))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-list-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="team-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.team.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-list"
+                :title="ui.company.team.title"
+                :lead="ui.company.team.lead"
+                :members="members"
+                :empty="ui.empty.members"
+                :depts="ui.company.depts"
+                layout="list"
+                cols="1-4"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="team-directory-label"
+            data-testid="variant"
+            data-block="team"
+            data-variant="directory"
+          >
+            <Title :as="3" size="base" weight="bold" id="team-directory-label" data-testid="variant-label">
+              {{ ui.blocks.variants.team.directory }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TeamGrid
+                id="team-directory"
+                :title="ui.company.team.title"
+                :lead="ui.company.team.lead"
+                :members="members"
+                :empty="ui.empty.members"
+                :depts="ui.company.depts"
+                layout="directory"
+                cols="1-4"
+                tone="default"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.directory))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingTestimonialsPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingTestimonialsPage.vue
new file mode 100644
index 0000000..35e9a32
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingTestimonialsPage.vue
@@ -0,0 +1,361 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-testimonials page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  Stack,
+  TestimonialGrid,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Quote,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+
+const TESTIMONIALS_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingTestimonials }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 10) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-testimonials-title"
+          data-testid="catalog-block"
+          data-block="testimonials"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-testimonials-title">
+              {{ ui.blocks.names.testimonials }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.testimonials }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-grid3-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="grid3"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-grid3-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.grid3 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-grid3"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="grid"
+                cols="1-3"
+                :item="{ kind: 'card', avatar: 'image', rating: 'show', mark: 'none' }"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-masonry-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="masonry"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-masonry-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.masonry }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-masonry"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="masonry"
+                cols="1-3"
+                :item="{ kind: 'card', avatar: 'image', rating: 'hide', mark: 'none' }"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-strip-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="strip"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-strip-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.strip }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-strip"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="strip"
+                cols="1-3"
+                :item="{ kind: 'card', avatar: 'none', rating: 'show', mark: 'none' }"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-social-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="social"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-social-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.social }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-social"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="masonry"
+                cols="1-3"
+                :item="{ kind: 'social', avatar: 'image', rating: 'hide', mark: 'none' }"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.social))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-featured-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="featured"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-featured-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.featured }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-featured"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="single"
+                cols="1-3"
+                :item="{ kind: 'plain', avatar: 'image', rating: 'hide', mark: 'icon' }"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-grid2-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="grid2"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-grid2-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.grid2 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-grid2"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="grid"
+                cols="1-2"
+                :item="{ kind: 'card', avatar: 'image', rating: 'show', mark: 'none' }"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid2))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-single-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="single"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-single-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.single }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-single"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="single"
+                cols="1-3"
+                :item="{ kind: 'plain', avatar: 'image', rating: 'hide', mark: 'none' }"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-stack-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="stack"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-stack-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.stack }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-stack"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="stack"
+                cols="1-3"
+                :item="{ kind: 'card', avatar: 'none', rating: 'show', mark: 'none' }"
+                tone="default"
+                density="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.stack))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-plain-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-plain"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="grid"
+                cols="1-3"
+                :item="{ kind: 'plain', avatar: 'none', rating: 'show', mark: 'none' }"
+                tone="muted"
+                density="compact"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.plain))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="testimonials-noRating-label"
+            data-testid="variant"
+            data-block="testimonials"
+            data-variant="noRating"
+          >
+            <Title :as="3" size="base" weight="bold" id="testimonials-noRating-label" data-testid="variant-label">
+              {{ ui.blocks.variants.testimonials.noRating }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <TestimonialGrid
+                id="testimonials-noRating"
+                :title="ui.marketing.testimonials.title"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="TESTIMONIALS_LABELS"
+                layout="grid"
+                cols="1-3"
+                :item="{ kind: 'card', avatar: 'image', rating: 'hide', mark: 'none' }"
+                tone="default"
+                density="roomy"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.noRating))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.vue
new file mode 100644
index 0000000..e80fda5
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/MarketingTestimonialsSplitPage.vue
@@ -0,0 +1,283 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The marketing-testimonials-split page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  QuoteSplit,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+
+const QUOTESPLIT_LABELS = { rating: ui.testimonials.rating, byLine: ui.testimonials.byLine, handleLine: ui.testimonials.handleLine } as const;
+const QUOTESPLIT_EXTRAS = { stats, logos, rating: 5, score: ui.marketing.quoteSplit.score, reviews: ui.marketing.quoteSplit.reviews } as const;
+const QUOTESPLIT_ACTIONS = {
+  mode: "two",
+  cta: ui.marketing.quoteSplit.cta,
+  href: "#/customers",
+  secondary: ui.marketing.quoteSplit.secondary,
+  secondaryHref: "#/contact",
+} as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.marketing.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.marketingTestimonialsSplit }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 6) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-quotesplit-title"
+          data-testid="catalog-block"
+          data-block="quotesplit"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-quotesplit-title">
+              {{ ui.blocks.names.quotesplit }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.quotesplit }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-quoteCard-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="quoteCard"
+          >
+            <Title :as="3" size="base" weight="bold" id="quotesplit-quoteCard-label" data-testid="variant-label">
+              {{ ui.blocks.variants.quotesplit.quoteCard }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-quoteCard"
+                :title="ui.marketing.quoteSplit.title"
+                :lead="ui.marketing.quoteSplit.lead"
+                :badge="ui.marketing.quoteSplit.badge"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="QUOTESPLIT_LABELS"
+                :extras="QUOTESPLIT_EXTRAS"
+                :actions="QUOTESPLIT_ACTIONS"
+                layout="media"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.quoteCard))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-logoTiles-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="logoTiles"
+          >
+            <Title :as="3" size="base" weight="bold" id="quotesplit-logoTiles-label" data-testid="variant-label">
+              {{ ui.blocks.variants.quotesplit.logoTiles }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-logoTiles"
+                :title="ui.marketing.quoteSplit.title"
+                :lead="ui.marketing.quoteSplit.lead"
+                :badge="ui.marketing.quoteSplit.badge"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="QUOTESPLIT_LABELS"
+                :extras="QUOTESPLIT_EXTRAS"
+                :actions="QUOTESPLIT_ACTIONS"
+                layout="logos"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.logoTiles))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-ratingPanel-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="ratingPanel"
+          >
+            <Title :as="3" size="base" weight="bold" id="quotesplit-ratingPanel-label" data-testid="variant-label">
+              {{ ui.blocks.variants.quotesplit.ratingPanel }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-ratingPanel"
+                :title="ui.marketing.quoteSplit.title"
+                :lead="ui.marketing.quoteSplit.lead"
+                :badge="ui.marketing.quoteSplit.badge"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="QUOTESPLIT_LABELS"
+                :extras="QUOTESPLIT_EXTRAS"
+                :actions="QUOTESPLIT_ACTIONS"
+                layout="rating"
+                mediaSide="end"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-stackedCards-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="stackedCards"
+          >
+            <Title :as="3" size="base" weight="bold" id="quotesplit-stackedCards-label" data-testid="variant-label">
+              {{ ui.blocks.variants.quotesplit.stackedCards }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-stackedCards"
+                :title="ui.marketing.quoteSplit.title"
+                :lead="ui.marketing.quoteSplit.lead"
+                :badge="ui.marketing.quoteSplit.badge"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="QUOTESPLIT_LABELS"
+                :extras="QUOTESPLIT_EXTRAS"
+                :actions="QUOTESPLIT_ACTIONS"
+                layout="stack"
+                mediaSide="start"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.stackedCards))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-compact4-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="compact4"
+          >
+            <Title :as="3" size="base" weight="bold" id="quotesplit-compact4-label" data-testid="variant-label">
+              {{ ui.blocks.variants.quotesplit.compact4 }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-compact4"
+                :title="ui.marketing.quoteSplit.title"
+                :lead="ui.marketing.quoteSplit.lead"
+                :badge="ui.marketing.quoteSplit.badge"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="QUOTESPLIT_LABELS"
+                :extras="QUOTESPLIT_EXTRAS"
+                :actions="QUOTESPLIT_ACTIONS"
+                layout="compact"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.compact4))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="quotesplit-bentoFigures-label"
+            data-testid="variant"
+            data-block="quotesplit"
+            data-variant="bentoFigures"
+          >
+            <Title :as="3" size="base" weight="bold" id="quotesplit-bentoFigures-label" data-testid="variant-label">
+              {{ ui.blocks.variants.quotesplit.bentoFigures }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <QuoteSplit
+                id="quotesplit-bentoFigures"
+                :title="ui.marketing.quoteSplit.title"
+                :lead="ui.marketing.quoteSplit.lead"
+                :badge="ui.marketing.quoteSplit.badge"
+                :quotes="testimonials"
+                :empty="ui.empty.quotes"
+                :labels="QUOTESPLIT_LABELS"
+                :extras="QUOTESPLIT_EXTRAS"
+                :actions="QUOTESPLIT_ACTIONS"
+                layout="bento"
+                mediaSide="end"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.bentoFigures))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/NotfoundPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/NotfoundPage.vue
new file mode 100644
index 0000000..7ed325e
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/NotfoundPage.vue
@@ -0,0 +1,25 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The notfound page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Title :as="1" size="4xl" weight="bold" id="page-title">
+          {{ ui.site.notFound.title }}
+        </Title>
+        <Group>
+          <Button variant="default" size="default" href="#/">
+            {{ ui.catalog.back }}
+          </Button>
+        </Group>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageCartPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageCartPage.vue
new file mode 100644
index 0000000..d065fe2
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageCartPage.vue
@@ -0,0 +1,163 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-cart page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Link,
+  NavBar,
+  PageIntro,
+  ProductGrid,
+  ShoppingCart,
+  SitemapFooter,
+  Text,
+  type CartLine,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.cart.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="cart">
+    <NavBar
+      :label="ui.vibe.nav.label"
+      :brand="ui.site.header.brand"
+      :links="navlinks"
+      current="link-product"
+      :actions="{
+        cta: ui.site.header.cta,
+        href: '#/',
+        login: ui.site.header.login,
+        loginHref: '#/login',
+        mode: 'cta',
+      }"
+      :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+      layout="search"
+      over="none"
+      tone="default"
+      @theme="() => actions.toggleTheme()"
+    />
+    <PageIntro
+      id="cart-pagehead"
+      :title="ui.commerce.cartPage.title"
+      :text="ui.commerce.pages.cartLead"
+      cta=""
+      href="#/"
+      align="start"
+      tone="default"
+      density="default"
+    />
+    <ShoppingCart
+      id="cart-cartpage"
+      :title="ui.commerce.cart.caption"
+      :lines="cart"
+      :rows="summary"
+      :promos="promos"
+      :labels="ui.commerce.cart"
+      :totals="ui.commerce.totals"
+      :actions="ui.commerce.cartPage"
+      layout="split"
+      promo="show"
+      progress="show"
+      tone="default"
+    />
+    <ProductGrid
+      id="cart-products"
+      :title="ui.commerce.pages.related"
+      :products="products"
+      :labels="ui.commerce.productLabels"
+      :badges="ui.commerce.badges"
+      layout="rail"
+      cols="1-3"
+      ratio="1/1"
+      rating="hide"
+      action="button"
+      tone="default"
+      density="compact"
+    />
+    <SitemapFooter
+      id="cart-sitemap"
+      :label="ui.vibe.sitemap.label"
+      :brand="ui.site.header.brand"
+      :tagline="ui.vibe.sitemap.tagline"
+      :copyright="ui.vibe.sitemap.copyright"
+      :groups="sitemap"
+      :signup="{
+        title: ui.vibe.sitemap.signupTitle,
+        label: ui.vibe.sitemap.signupLabel,
+        submit: ui.vibe.sitemap.signupSubmit,
+        mode: 'none',
+      }"
+      :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+      layout="columns"
+      density="default"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageCheckoutPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageCheckoutPage.vue
new file mode 100644
index 0000000..570b304
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageCheckoutPage.vue
@@ -0,0 +1,138 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-checkout page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  CheckoutForm,
+  Container,
+  Link,
+  NavBar,
+  PageIntro,
+  SitemapFooter,
+  Text,
+  type CartLine,
+  type Day,
+  type MegaGroup,
+  type NavLink,
+  type Payment,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.checkout.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="checkout">
+    <NavBar
+      :label="ui.vibe.nav.label"
+      :brand="ui.site.header.brand"
+      :links="navlinks"
+      current="link-product"
+      :actions="{
+        cta: ui.site.header.cta,
+        href: '#/',
+        login: ui.site.header.login,
+        loginHref: '#/login',
+        mode: 'cta',
+      }"
+      :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+      layout="search"
+      over="none"
+      tone="default"
+      @theme="() => actions.toggleTheme()"
+    />
+    <PageIntro
+      id="checkout-pagehead"
+      :title="ui.commerce.checkout.title"
+      :text="ui.commerce.pages.checkoutLead"
+      cta=""
+      href="#/"
+      align="start"
+      tone="default"
+      density="default"
+    />
+    <CheckoutForm
+      id="checkout-checkout"
+      title=""
+      :days="days"
+      :payments="payments"
+      :lines="cart"
+      :rows="summary"
+      :promos="promos"
+      :labels="ui.commerce.checkout"
+      :totals="ui.commerce.totals"
+      layout="cards"
+      summary="aside"
+      tone="default"
+    />
+    <SitemapFooter
+      id="checkout-sitemap"
+      :label="ui.vibe.sitemap.label"
+      :brand="ui.site.header.brand"
+      :tagline="ui.vibe.sitemap.tagline"
+      :copyright="ui.vibe.sitemap.copyright"
+      :groups="sitemap"
+      :signup="{
+        title: ui.vibe.sitemap.signupTitle,
+        label: ui.vibe.sitemap.signupLabel,
+        submit: ui.vibe.sitemap.signupSubmit,
+        mode: 'none',
+      }"
+      :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+      layout="columns"
+      density="compact"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageCompanyPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageCompanyPage.vue
new file mode 100644
index 0000000..a3cf5ae
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageCompanyPage.vue
@@ -0,0 +1,220 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-company page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  AboutCompany,
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  JobBoard,
+  Link,
+  MilestoneTimeline,
+  NavBar,
+  PageIntro,
+  PhotoGallery,
+  SitemapFooter,
+  TeamGrid,
+  Text,
+  type Department,
+  type Feature,
+  type Job,
+  type MegaGroup,
+  type Member,
+  type Milestone,
+  type NavLink,
+  type Photo,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.company.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="company">
+    <NavBar
+      :label="ui.vibe.nav.label"
+      :brand="ui.site.header.brand"
+      :links="navlinks"
+      current="link-product"
+      :actions="{
+        cta: ui.site.header.cta,
+        href: '#/',
+        login: ui.site.header.login,
+        loginHref: '#/login',
+        mode: 'cta',
+      }"
+      :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+      layout="inline"
+      over="none"
+      tone="default"
+      @theme="() => actions.toggleTheme()"
+    />
+    <PageIntro
+      id="company-pagehead"
+      :title="ui.company.pages.companyTitle"
+      :text="ui.company.pages.companyLead"
+      cta=""
+      href="#/"
+      align="center"
+      tone="default"
+      density="default"
+    />
+    <AboutCompany
+      id="company-about"
+      :title="ui.company.about.title"
+      :lead="ui.company.about.lead"
+      :stats="stats"
+      :values="values"
+      layout="split"
+      tone="default"
+      density="default"
+    />
+    <MilestoneTimeline
+      id="company-timeline"
+      :title="ui.company.timeline.title"
+      :lead="ui.company.timeline.lead"
+      :milestones="milestones"
+      :empty="ui.empty.milestones"
+      layout="split"
+      tone="default"
+      density="default"
+    />
+    <TeamGrid
+      id="company-team"
+      :title="ui.company.team.title"
+      :lead="ui.company.team.lead"
+      :members="members"
+      :empty="ui.empty.members"
+      :depts="ui.company.depts"
+      layout="cards"
+      cols="1-4"
+      tone="default"
+      density="default"
+    />
+    <PhotoGallery
+      id="company-photos"
+      :title="ui.company.photos.title"
+      :lead="ui.company.photos.lead"
+      :photos="photos"
+      :empty="ui.empty.photos"
+      :labels="ui.company.photos"
+      layout="mosaic"
+      captions="show"
+      tone="default"
+      density="default"
+    />
+    <JobBoard
+      id="company-jobs"
+      :title="ui.company.jobs.title"
+      :lead="ui.company.jobs.lead"
+      :jobs="jobs"
+      :empty="ui.empty.jobs"
+      :departments="departments"
+      :labels="ui.company.jobs"
+      layout="grouped"
+      salary="hide"
+      tone="default"
+    />
+    <CtaBand
+      id="company-cta"
+      :title="ui.site.home.ctaTitle"
+      :text="ui.site.home.ctaText"
+      :actions="{
+        cta: ui.site.home.ctaButton,
+        href: '#/pricing',
+        secondary: ui.site.home.ctaSecondary,
+        secondaryHref: '#/',
+        emailLabel: ui.promo.newsletter.label,
+        mode: 'one',
+      }"
+      :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+      layout="card"
+      tone="muted"
+      proof="none"
+      density="default"
+    />
+    <SitemapFooter
+      id="company-sitemap"
+      :label="ui.vibe.sitemap.label"
+      :brand="ui.site.header.brand"
+      :tagline="ui.vibe.sitemap.tagline"
+      :copyright="ui.vibe.sitemap.copyright"
+      :groups="sitemap"
+      :signup="{
+        title: ui.vibe.sitemap.signupTitle,
+        label: ui.vibe.sitemap.signupLabel,
+        submit: ui.vibe.sitemap.signupSubmit,
+        mode: 'none',
+      }"
+      :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+      layout="columns"
+      density="default"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PagePortfolioPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PagePortfolioPage.vue
new file mode 100644
index 0000000..8722a92
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PagePortfolioPage.vue
@@ -0,0 +1,200 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-portfolio page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  AboutMe,
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  Link,
+  NavBar,
+  PhotoGallery,
+  ProjectGrid,
+  SitemapFooter,
+  TestimonialGrid,
+  Text,
+  type MegaGroup,
+  type NavLink,
+  type Photo,
+  type Project,
+  type Quote,
+  type Skill,
+  type Spec,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.portfolio.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="portfolio">
+    <NavBar
+      :label="ui.vibe.nav.label"
+      :brand="ui.site.header.brand"
+      :links="navlinks"
+      current="link-product"
+      :actions="{
+        cta: ui.site.header.cta,
+        href: '#/',
+        login: ui.site.header.login,
+        loginHref: '#/login',
+        mode: 'cta',
+      }"
+      :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+      layout="inline"
+      over="none"
+      tone="default"
+      @theme="() => actions.toggleTheme()"
+    />
+    <AboutMe
+      id="portfolio-aboutme"
+      :title="ui.company.aboutMe.title"
+      :lead="ui.company.aboutMe.lead"
+      :badge="ui.company.aboutMe.badge"
+      :facts="profilefacts"
+      :skills="skills"
+      :labels="ui.company.aboutMe"
+      :actions="{
+        mode: 'two',
+        cta: ui.company.aboutMe.cta,
+        href: '#/work',
+        secondary: ui.company.aboutMe.more,
+        secondaryHref: '#/contact',
+      }"
+      layout="facts"
+      mediaSide="start"
+      tone="default"
+      :level="1"
+    />
+    <ProjectGrid
+      id="portfolio-projects"
+      :title="ui.company.projects.title"
+      :lead="ui.company.projects.lead"
+      :projects="projects"
+      :empty="ui.empty.projects"
+      :labels="ui.company.projects"
+      layout="cards"
+      tone="default"
+      density="default"
+    />
+    <PhotoGallery
+      id="portfolio-photos"
+      :title="ui.company.photos.title"
+      :lead="ui.company.photos.lead"
+      :photos="photos"
+      :empty="ui.empty.photos"
+      :labels="ui.company.photos"
+      layout="masonry"
+      captions="show"
+      tone="default"
+      density="default"
+    />
+    <TestimonialGrid
+      id="portfolio-testimonials"
+      :title="ui.marketing.testimonials.title"
+      :quotes="testimonials"
+      :empty="ui.empty.quotes"
+      :labels="{
+        rating: ui.testimonials.rating,
+        byLine: ui.testimonials.byLine,
+        handleLine: ui.testimonials.handleLine,
+      }"
+      layout="grid"
+      cols="1-3"
+      :item="{ kind: 'card', avatar: 'image', rating: 'show', mark: 'none' }"
+      tone="default"
+      density="default"
+    />
+    <CtaBand
+      id="portfolio-cta"
+      :title="ui.site.home.ctaTitle"
+      :text="ui.site.home.ctaText"
+      :actions="{
+        cta: ui.site.home.ctaButton,
+        href: '#/pricing',
+        secondary: ui.site.home.ctaSecondary,
+        secondaryHref: '#/',
+        emailLabel: ui.promo.newsletter.label,
+        mode: 'one',
+      }"
+      :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+      layout="card"
+      tone="muted"
+      proof="none"
+      density="default"
+    />
+    <SitemapFooter
+      id="portfolio-sitemap"
+      :label="ui.vibe.sitemap.label"
+      :brand="ui.site.header.brand"
+      :tagline="ui.vibe.sitemap.tagline"
+      :copyright="ui.vibe.sitemap.copyright"
+      :groups="sitemap"
+      :signup="{
+        title: ui.vibe.sitemap.signupTitle,
+        label: ui.vibe.sitemap.signupLabel,
+        submit: ui.vibe.sitemap.signupSubmit,
+        mode: 'none',
+      }"
+      :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+      layout="columns"
+      density="default"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageProductDetailPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageProductDetailPage.vue
new file mode 100644
index 0000000..a03c365
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageProductDetailPage.vue
@@ -0,0 +1,167 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-product-detail page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Link,
+  NavBar,
+  ProductDetail,
+  ProductGrid,
+  ProductInfo,
+  ReviewList,
+  SitemapFooter,
+  Text,
+  type Detail,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+  type Review,
+  type Spec,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.productDetail.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="product-detail">
+    <NavBar
+      :label="ui.vibe.nav.label"
+      :brand="ui.site.header.brand"
+      :links="navlinks"
+      current="link-product"
+      :actions="{
+        cta: ui.site.header.cta,
+        href: '#/',
+        login: ui.site.header.login,
+        loginHref: '#/login',
+        mode: 'cta',
+      }"
+      :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+      layout="search"
+      over="none"
+      tone="default"
+      @theme="() => actions.toggleTheme()"
+    />
+    <ProductDetail
+      id="product-detail-product"
+      :product="products.find((i) => i.id === 'product-lamp')!"
+      :labels="ui.commerce.detail"
+      :badges="ui.commerce.badges"
+      layout="split"
+      mediaSide="start"
+      thumbs="below"
+      buy="full"
+      tone="default"
+      density="default"
+    />
+    <ProductInfo
+      id="product-detail-productinfo"
+      :title="ui.commerce.info.title"
+      :details="details"
+      :specs="specs"
+      :labels="ui.commerce.info"
+      layout="split"
+      expand="first"
+      tone="default"
+    />
+    <ReviewList
+      id="product-detail-reviews"
+      :title="ui.commerce.reviews.title"
+      :reviews="reviews"
+      :labels="ui.commerce.reviewLabels"
+      layout="grid"
+      item="card"
+      avatar="none"
+      tone="default"
+      density="default"
+    />
+    <ProductGrid
+      id="product-detail-products"
+      :title="ui.commerce.pages.related"
+      :products="products"
+      :labels="ui.commerce.productLabels"
+      :badges="ui.commerce.badges"
+      layout="rail"
+      cols="1-3"
+      ratio="1/1"
+      rating="hide"
+      action="button"
+      tone="default"
+      density="compact"
+    />
+    <SitemapFooter
+      id="product-detail-sitemap"
+      :label="ui.vibe.sitemap.label"
+      :brand="ui.site.header.brand"
+      :tagline="ui.vibe.sitemap.tagline"
+      :copyright="ui.vibe.sitemap.copyright"
+      :groups="sitemap"
+      :signup="{
+        title: ui.vibe.sitemap.signupTitle,
+        label: ui.vibe.sitemap.signupLabel,
+        submit: ui.vibe.sitemap.signupSubmit,
+        mode: 'none',
+      }"
+      :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+      layout="columns"
+      density="default"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageSaasLandingPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageSaasLandingPage.vue
new file mode 100644
index 0000000..30828e4
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageSaasLandingPage.vue
@@ -0,0 +1,279 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-saas-landing page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  FeatureSticky,
+  HeroClassic,
+  Link,
+  LogoCloud,
+  NavBar,
+  PricingTiers,
+  SitemapFooter,
+  StatsBand,
+  TestimonialGrid,
+  Text,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Logo,
+  type MegaGroup,
+  type NavLink,
+  type Plan,
+  type Quote,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.saasLanding.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="saas-landing">
+    <NavBar
+      :label="ui.vibe.nav.label"
+      :brand="ui.site.header.brand"
+      :links="navlinks"
+      current="link-product"
+      :actions="{
+        cta: ui.site.header.cta,
+        href: '#/',
+        login: ui.site.header.login,
+        loginHref: '#/login',
+        mode: 'cta',
+      }"
+      :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+      layout="inline"
+      over="none"
+      tone="default"
+      @theme="() => actions.toggleTheme()"
+    />
+    <HeroClassic
+      id="saas-landing-hero"
+      :title="ui.cases.saas.hero.title"
+      :text="ui.cases.saas.hero.text"
+      :actions="{
+        cta: ui.cases.saas.hero.cta,
+        href: '#/pricing',
+        secondary: ui.cases.saas.hero.secondary,
+        secondaryHref: '#/pricing',
+        emailLabel: ui.promo.newsletter.label,
+        mode: 'two',
+      }"
+      :media="{
+        codeTitle: ui.vibe.code.title,
+        prompt: ui.vibe.code.prompt,
+        lines: terminal,
+        kind: 'image',
+        side: 'end',
+      }"
+      layout="split"
+      scale="default"
+      tone="default"
+      density="roomy"
+      :level="1"
+    />
+    <LogoCloud
+      id="saas-landing-logos"
+      :title="ui.marketing.logos.title"
+      :logos="logos"
+      :empty="ui.empty.logos"
+      layout="row"
+      cols="4"
+      item="icon"
+      tone="default"
+      density="compact"
+    />
+    <FeatureGrid
+      id="saas-landing-features"
+      :title="ui.site.home.featuresTitle"
+      :features="features"
+      :empty="ui.empty.features"
+      :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+      layout="grid"
+      cols="1-3"
+      item="card"
+      mediaSide="end"
+      tone="default"
+      density="default"
+    />
+    <FeatureSticky
+      id="saas-landing-sticky"
+      :title="ui.vibe.sticky.title"
+      :features="features"
+      :empty="ui.empty.features"
+      active="feature-clear"
+      mediaSide="end"
+      item="plain"
+      tone="default"
+      density="default"
+    />
+    <StatsBand
+      id="saas-landing-stats"
+      :title="ui.marketing.stats.title"
+      :stats="stats"
+      :empty="ui.marketing.stats.empty"
+      cols="4"
+      layout="row"
+      surface="none"
+      item="icon"
+      align="start"
+      tone="default"
+      density="default"
+    />
+    <TestimonialGrid
+      id="saas-landing-testimonials"
+      :title="ui.marketing.testimonials.title"
+      :quotes="testimonials"
+      :empty="ui.empty.quotes"
+      :labels="{
+        rating: ui.testimonials.rating,
+        byLine: ui.testimonials.byLine,
+        handleLine: ui.testimonials.handleLine,
+      }"
+      layout="grid"
+      cols="1-3"
+      :item="{ kind: 'card', avatar: 'image', rating: 'show', mark: 'none' }"
+      tone="default"
+      density="default"
+    />
+    <PricingTiers
+      id="saas-landing-pricing"
+      :title="ui.site.pricing.tiersTitle"
+      :plans="tiers"
+      :labels="ui.pricing"
+      :billingLabels="ui.vibe.billing"
+      layout="grid"
+      cols="1-3"
+      emphasis="auto"
+      billing="off"
+      tone="default"
+      density="default"
+    />
+    <FaqList
+      id="saas-landing-faq"
+      :title="ui.site.pricing.faqTitle"
+      :items="faq"
+      :empty="ui.vibe.faq.empty"
+      :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+      :filter="{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: '', mode: 'none' }"
+      layout="accordion"
+      cols="1"
+      tone="default"
+      density="default"
+    />
+    <CtaBand
+      id="saas-landing-cta"
+      :title="ui.site.home.ctaTitle"
+      :text="ui.site.home.ctaText"
+      :actions="{
+        cta: ui.site.home.ctaButton,
+        href: '#/pricing',
+        secondary: ui.site.home.ctaSecondary,
+        secondaryHref: '#/',
+        emailLabel: ui.promo.newsletter.label,
+        mode: 'one',
+      }"
+      :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+      layout="card"
+      tone="muted"
+      proof="none"
+      density="default"
+    />
+    <SitemapFooter
+      id="saas-landing-sitemap"
+      :label="ui.vibe.sitemap.label"
+      :brand="ui.site.header.brand"
+      :tagline="ui.vibe.sitemap.tagline"
+      :copyright="ui.vibe.sitemap.copyright"
+      :groups="sitemap"
+      :signup="{
+        title: ui.vibe.sitemap.signupTitle,
+        label: ui.vibe.sitemap.signupLabel,
+        submit: ui.vibe.sitemap.signupSubmit,
+        mode: 'none',
+      }"
+      :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+      layout="columns"
+      density="default"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellClassicPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellClassicPage.vue
new file mode 100644
index 0000000..7fcabaf
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellClassicPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-classic page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellClassic.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-classic">
+    <DashboardShell
+      id="shell-classic-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="full"
+      search="show"
+      sidebar="wide"
+      side="start"
+      footer="none"
+      content="grid"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.vue
new file mode 100644
index 0000000..ceaec61
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellCollapsedEndPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-collapsed-end page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellCollapsedEnd.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-collapsed-end">
+    <DashboardShell
+      id="shell-collapsed-end-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="none"
+      search="show"
+      sidebar="collapsed"
+      side="end"
+      footer="full"
+      content="split"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellCollapsedPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellCollapsedPage.vue
new file mode 100644
index 0000000..b5a48cf
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellCollapsedPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-collapsed page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellCollapsed.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-collapsed">
+    <DashboardShell
+      id="shell-collapsed-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="inset"
+      search="show"
+      sidebar="collapsed"
+      side="start"
+      footer="none"
+      content="split"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellEndPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellEndPage.vue
new file mode 100644
index 0000000..a5944c6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellEndPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-end page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellEnd.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-end">
+    <DashboardShell
+      id="shell-end-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="full"
+      search="show"
+      sidebar="wide"
+      side="end"
+      footer="full"
+      content="split"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellInsetPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellInsetPage.vue
new file mode 100644
index 0000000..81de1ed
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellInsetPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-inset page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellInset.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-inset">
+    <DashboardShell
+      id="shell-inset-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="inset"
+      search="show"
+      sidebar="wide"
+      side="start"
+      footer="inset"
+      content="split"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellRailEndPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellRailEndPage.vue
new file mode 100644
index 0000000..5217a59
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellRailEndPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-rail-end page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellRailEnd.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-rail-end">
+    <DashboardShell
+      id="shell-rail-end-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="inset"
+      search="hide"
+      sidebar="rail"
+      side="end"
+      footer="inset"
+      content="grid"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellRailFooterPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellRailFooterPage.vue
new file mode 100644
index 0000000..9f13816
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellRailFooterPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-rail-footer page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellRailFooter.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-rail-footer">
+    <DashboardShell
+      id="shell-rail-footer-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="inset"
+      search="show"
+      sidebar="rail"
+      side="start"
+      footer="full"
+      content="grid"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellRailPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellRailPage.vue
new file mode 100644
index 0000000..f837f01
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellRailPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-rail page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellRail.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-rail">
+    <DashboardShell
+      id="shell-rail-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="full"
+      search="hide"
+      sidebar="rail"
+      side="start"
+      footer="none"
+      content="list"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellSideOnlyPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellSideOnlyPage.vue
new file mode 100644
index 0000000..8250f29
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellSideOnlyPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-side-only page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellSideOnly.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-side-only">
+    <DashboardShell
+      id="shell-side-only-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="none"
+      search="show"
+      sidebar="wide"
+      side="start"
+      footer="inset"
+      content="list"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellTopOnlyPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellTopOnlyPage.vue
new file mode 100644
index 0000000..40a27c3
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellTopOnlyPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-top-only page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellTopOnly.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-top-only">
+    <DashboardShell
+      id="shell-top-only-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="full"
+      search="show"
+      sidebar="none"
+      side="start"
+      footer="full"
+      content="grid"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.vue
new file mode 100644
index 0000000..eded00a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellTwoLevelFullPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-two-level-full page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellTwoLevelFull.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-two-level-full">
+    <DashboardShell
+      id="shell-two-level-full-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="full"
+      search="show"
+      sidebar="twolevel"
+      side="start"
+      footer="full"
+      content="split"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageShellTwoLevelPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageShellTwoLevelPage.vue
new file mode 100644
index 0000000..62d7162
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageShellTwoLevelPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-shell-two-level page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Box, Container, DashboardShell, Link, Text, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.shellTwoLevel.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="shell-two-level">
+    <DashboardShell
+      id="shell-two-level-dashshell"
+      :title="ui.dashboard.shells.title"
+      :nav="{
+        label: ui.dashboard.shells.label,
+        brand: ui.site.header.brand,
+        links: sidenav,
+        current: 'item-orders',
+        subTitle: ui.dashboard.shells.subTitle,
+        sub: subnav,
+        subCurrent: 'subitem-all',
+        search: ui.dashboard.shells.search,
+        shortcut: ui.dashboard.shells.shortcut,
+        expand: ui.dashboard.shells.expand,
+        userName: ui.dashboard.shells.userName,
+        copyright: ui.dashboard.shells.copyright,
+        footerLabel: ui.dashboard.shells.footerLabel,
+        footer: helplinks,
+      }"
+      topbar="inset"
+      search="hide"
+      sidebar="twolevel"
+      side="start"
+      footer="inset"
+      content="list"
+      frame="page"
+      :level="1"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageStoreCatalogPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageStoreCatalogPage.vue
new file mode 100644
index 0000000..398d086
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageStoreCatalogPage.vue
@@ -0,0 +1,151 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-store-catalog page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  Link,
+  NavBar,
+  PageIntro,
+  ProductGrid,
+  SitemapFooter,
+  Text,
+  UspStrip,
+  type Category,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.storeCatalog.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="store-catalog">
+    <NavBar
+      :label="ui.vibe.nav.label"
+      :brand="ui.site.header.brand"
+      :links="navlinks"
+      current="link-product"
+      :actions="{
+        cta: ui.site.header.cta,
+        href: '#/',
+        login: ui.site.header.login,
+        loginHref: '#/login',
+        mode: 'cta',
+      }"
+      :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+      layout="search"
+      over="none"
+      tone="default"
+      @theme="() => actions.toggleTheme()"
+    />
+    <PageIntro
+      id="store-catalog-pagehead"
+      :title="ui.commerce.pages.catalogTitle"
+      :text="ui.commerce.pages.catalogLead"
+      cta=""
+      href="#/"
+      align="start"
+      tone="default"
+      density="default"
+    />
+    <CategoryNav
+      :label="ui.commerce.nav.label"
+      :categories="categories"
+      current="category-all"
+      :tools="ui.commerce.tools"
+      layout="toolbar"
+      count="show"
+      icon="hide"
+      density="default"
+    />
+    <ProductGrid
+      id="store-catalog-products"
+      :title="ui.commerce.products.title"
+      :products="products"
+      :labels="ui.commerce.productLabels"
+      :badges="ui.commerce.badges"
+      layout="grid"
+      cols="1-4"
+      ratio="1/1"
+      rating="hide"
+      action="button"
+      tone="default"
+      density="compact"
+    />
+    <UspStrip
+      id="store-catalog-usp"
+      :perks="perks"
+      :empty="ui.empty.perks"
+      layout="bar"
+      tone="default"
+      density="compact"
+    />
+    <SitemapFooter
+      id="store-catalog-sitemap"
+      :label="ui.vibe.sitemap.label"
+      :brand="ui.site.header.brand"
+      :tagline="ui.vibe.sitemap.tagline"
+      :copyright="ui.vibe.sitemap.copyright"
+      :groups="sitemap"
+      :signup="{
+        title: ui.vibe.sitemap.signupTitle,
+        label: ui.vibe.sitemap.signupLabel,
+        submit: ui.vibe.sitemap.signupSubmit,
+        mode: 'none',
+      }"
+      :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+      layout="columns"
+      density="default"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageStoreHome2Page.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageStoreHome2Page.vue
new file mode 100644
index 0000000..f4ccd49
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageStoreHome2Page.vue
@@ -0,0 +1,199 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-store-home-2 page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  DeliveryInfo,
+  Link,
+  NavBar,
+  ProductGrid,
+  SitemapFooter,
+  StoreHero,
+  StoreLocations,
+  Text,
+  UspStrip,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+  type Store,
+  type Zone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.storeHome2.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="store-home-2">
+    <NavBar
+      :label="ui.vibe.nav.label"
+      :brand="ui.site.header.brand"
+      :links="navlinks"
+      current="link-product"
+      :actions="{
+        cta: ui.site.header.cta,
+        href: '#/',
+        login: ui.site.header.login,
+        loginHref: '#/login',
+        mode: 'cta',
+      }"
+      :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+      layout="inline"
+      over="none"
+      tone="default"
+      @theme="() => actions.toggleTheme()"
+    />
+    <StoreHero
+      id="store-home-2-storehero"
+      :title="ui.commerce.storeHero.title"
+      :lead="ui.commerce.storeHero.lead"
+      :badge="ui.commerce.storeHero.badge"
+      :perks="perks"
+      :card="ui.commerce.storeHero.card"
+      :actions="{
+        mode: 'two',
+        cta: ui.commerce.storeHero.cta,
+        href: '#/catalog',
+        secondary: ui.commerce.storeHero.secondary,
+        secondaryHref: '#/delivery',
+      }"
+      layout="backdrop"
+      mediaSide="end"
+      tone="default"
+      :level="1"
+    />
+    <UspStrip
+      id="store-home-2-usp"
+      :perks="perks"
+      :empty="ui.empty.perks"
+      layout="strip"
+      tone="default"
+      density="default"
+    />
+    <ProductGrid
+      id="store-home-2-products"
+      :title="ui.commerce.products.title"
+      :products="products"
+      :labels="ui.commerce.productLabels"
+      :badges="ui.commerce.badges"
+      layout="grid"
+      cols="1-3"
+      ratio="4/3"
+      rating="show"
+      action="button"
+      tone="default"
+      density="default"
+    />
+    <DeliveryInfo
+      id="store-home-2-delivery"
+      :title="ui.commerce.delivery.title"
+      :lead="ui.commerce.delivery.lead"
+      :facts="deliveryfacts"
+      :zones="zones"
+      :labels="ui.commerce.delivery"
+      layout="full"
+      tone="default"
+      density="default"
+    />
+    <StoreLocations
+      id="store-home-2-locations"
+      :title="ui.commerce.stores.title"
+      :lead="ui.commerce.stores.lead"
+      :stores="stores"
+      :empty="ui.empty.stores"
+      :kinds="ui.commerce.stores.kinds"
+      :labels="ui.commerce.stores"
+      layout="map"
+      tone="default"
+    />
+    <SitemapFooter
+      id="store-home-2-sitemap"
+      :label="ui.vibe.sitemap.label"
+      :brand="ui.site.header.brand"
+      :tagline="ui.vibe.sitemap.tagline"
+      :copyright="ui.vibe.sitemap.copyright"
+      :groups="sitemap"
+      :signup="{
+        title: ui.vibe.sitemap.signupTitle,
+        label: ui.vibe.sitemap.signupLabel,
+        submit: ui.vibe.sitemap.signupSubmit,
+        mode: 'none',
+      }"
+      :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+      layout="columns"
+      density="default"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PageStoreHomePage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PageStoreHomePage.vue
new file mode 100644
index 0000000..996f62a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PageStoreHomePage.vue
@@ -0,0 +1,212 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The page-store-home page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  AnnouncementBar,
+  Block,
+  Box,
+  CategoryNav,
+  Container,
+  CtaBand,
+  Link,
+  NavBar,
+  ProductGrid,
+  SitemapFooter,
+  StoreHero,
+  Text,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Product,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="div" class="border-b border-border bg-muted" data-testid="page-bar">
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-2">
+      <Link href="#/pages" variant="default" class="text-sm" data-testid="back">
+        {{ ui.catalog.backPages }}
+      </Link>
+      <Text size="sm" class="text-muted-foreground" data-testid="page-name">
+        {{ ui.catalog.pages.storeHome.title }}
+      </Text>
+    </Container>
+  </Block>
+  <Box class="flex flex-col" data-testid="page-body" data-page="store-home">
+    <AnnouncementBar
+      :label="ui.promo.announcement.label"
+      :text="ui.cases.shop.announcement.text"
+      :cta="ui.cases.shop.announcement.cta"
+      ctaHref="#/pricing"
+      :dismissLabel="ui.promo.announcement.dismiss"
+      :badgeLabel="ui.promo.announcement.badge"
+      tone="muted"
+      layout="center"
+      dismiss="show"
+      badge="none"
+      position="top"
+    />
+    <NavBar
+      :label="ui.vibe.nav.label"
+      :brand="ui.site.header.brand"
+      :links="navlinks"
+      current="link-product"
+      :actions="{
+        cta: ui.site.header.cta,
+        href: '#/',
+        login: ui.site.header.login,
+        loginHref: '#/login',
+        mode: 'cta',
+      }"
+      :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+      layout="search"
+      over="none"
+      tone="default"
+      @theme="() => actions.toggleTheme()"
+    />
+    <StoreHero
+      id="store-home-storehero"
+      :title="ui.commerce.storeHero.title"
+      :lead="ui.commerce.storeHero.lead"
+      :badge="ui.commerce.storeHero.badge"
+      :perks="perks"
+      :card="ui.commerce.storeHero.card"
+      :actions="{
+        mode: 'two',
+        cta: ui.commerce.storeHero.cta,
+        href: '#/catalog',
+        secondary: ui.commerce.storeHero.secondary,
+        secondaryHref: '#/delivery',
+      }"
+      layout="overlay"
+      mediaSide="end"
+      tone="default"
+      :level="1"
+    />
+    <CategoryNav
+      :label="ui.commerce.nav.label"
+      :categories="categories"
+      current="category-all"
+      :tools="ui.commerce.tools"
+      layout="tiles"
+      count="show"
+      icon="show"
+      density="default"
+    />
+    <ProductGrid
+      id="store-home-products-4"
+      :title="ui.commerce.pages.bestsellers"
+      :products="products"
+      :labels="ui.commerce.productLabels"
+      :badges="ui.commerce.badges"
+      layout="grid"
+      cols="1-4"
+      ratio="1/1"
+      rating="show"
+      action="button"
+      tone="default"
+      density="default"
+      :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))"
+    />
+    <ProductGrid
+      id="deals"
+      :title="ui.commerce.rail.title"
+      :products="products"
+      :labels="ui.commerce.productLabels"
+      :badges="ui.commerce.badges"
+      layout="rail"
+      cols="1-3"
+      ratio="4/3"
+      rating="show"
+      action="button"
+      tone="default"
+      density="default"
+      :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.rail))"
+    />
+    <UspStrip
+      id="store-home-usp"
+      :perks="perks"
+      :empty="ui.empty.perks"
+      layout="cards"
+      tone="default"
+      density="default"
+      :title="ui.commerce.usp.title"
+    />
+    <CtaBand
+      id="store-home-cta"
+      :title="ui.cases.shop.cta.title"
+      :text="ui.cases.shop.cta.text"
+      :actions="{
+        cta: ui.cases.shop.cta.cta,
+        href: '#/pricing',
+        secondary: ui.cases.shop.cta.secondary,
+        secondaryHref: '#/',
+        emailLabel: ui.promo.newsletter.label,
+        mode: 'one',
+      }"
+      :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+      layout="split"
+      tone="default"
+      proof="none"
+      density="default"
+    />
+    <SitemapFooter
+      id="store-home-sitemap"
+      :label="ui.vibe.sitemap.label"
+      :brand="ui.site.header.brand"
+      :tagline="ui.vibe.sitemap.tagline"
+      :copyright="ui.vibe.sitemap.copyright"
+      :groups="sitemap"
+      :signup="{
+        title: ui.vibe.sitemap.signupTitle,
+        label: ui.vibe.sitemap.signupLabel,
+        submit: ui.vibe.sitemap.signupSubmit,
+        mode: 'none',
+      }"
+      :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+      layout="columns"
+      density="default"
+    />
+  </Box>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PagesPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PagesPage.vue
new file mode 100644
index 0000000..ce92443
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PagesPage.vue
@@ -0,0 +1,220 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The pages page of CatalogScreen. -->
+<script setup lang="ts">
+import { Block, Container, Group, Link, List, ListItem, Stack, Text, Title, tpl } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const PAGES = [
+  {
+    id: "saas-landing",
+    visit: "page-saas-landing",
+    href: "#/page-saas-landing",
+    name: ui.catalog.pages.saasLanding.title,
+    text: ui.catalog.pages.saasLanding.text,
+    blocks: 11,
+  },
+  {
+    id: "company",
+    visit: "page-company",
+    href: "#/page-company",
+    name: ui.catalog.pages.company.title,
+    text: ui.catalog.pages.company.text,
+    blocks: 9,
+  },
+  {
+    id: "portfolio",
+    visit: "page-portfolio",
+    href: "#/page-portfolio",
+    name: ui.catalog.pages.portfolio.title,
+    text: ui.catalog.pages.portfolio.text,
+    blocks: 7,
+  },
+  {
+    id: "store-home",
+    visit: "page-store-home",
+    href: "#/page-store-home",
+    name: ui.catalog.pages.storeHome.title,
+    text: ui.catalog.pages.storeHome.text,
+    blocks: 9,
+  },
+  {
+    id: "store-home-2",
+    visit: "page-store-home-2",
+    href: "#/page-store-home-2",
+    name: ui.catalog.pages.storeHome2.title,
+    text: ui.catalog.pages.storeHome2.text,
+    blocks: 7,
+  },
+  {
+    id: "store-catalog",
+    visit: "page-store-catalog",
+    href: "#/page-store-catalog",
+    name: ui.catalog.pages.storeCatalog.title,
+    text: ui.catalog.pages.storeCatalog.text,
+    blocks: 6,
+  },
+  {
+    id: "product-detail",
+    visit: "page-product-detail",
+    href: "#/page-product-detail",
+    name: ui.catalog.pages.productDetail.title,
+    text: ui.catalog.pages.productDetail.text,
+    blocks: 6,
+  },
+  {
+    id: "cart",
+    visit: "page-cart",
+    href: "#/page-cart",
+    name: ui.catalog.pages.cart.title,
+    text: ui.catalog.pages.cart.text,
+    blocks: 5,
+  },
+  {
+    id: "checkout",
+    visit: "page-checkout",
+    href: "#/page-checkout",
+    name: ui.catalog.pages.checkout.title,
+    text: ui.catalog.pages.checkout.text,
+    blocks: 4,
+  },
+  {
+    id: "shell-classic",
+    visit: "page-shell-classic",
+    href: "#/page-shell-classic",
+    name: ui.catalog.pages.shellClassic.title,
+    text: ui.catalog.pages.shellClassic.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-inset",
+    visit: "page-shell-inset",
+    href: "#/page-shell-inset",
+    name: ui.catalog.pages.shellInset.title,
+    text: ui.catalog.pages.shellInset.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail",
+    visit: "page-shell-rail",
+    href: "#/page-shell-rail",
+    name: ui.catalog.pages.shellRail.title,
+    text: ui.catalog.pages.shellRail.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-footer",
+    visit: "page-shell-rail-footer",
+    href: "#/page-shell-rail-footer",
+    name: ui.catalog.pages.shellRailFooter.title,
+    text: ui.catalog.pages.shellRailFooter.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed",
+    visit: "page-shell-collapsed",
+    href: "#/page-shell-collapsed",
+    name: ui.catalog.pages.shellCollapsed.title,
+    text: ui.catalog.pages.shellCollapsed.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level",
+    visit: "page-shell-two-level",
+    href: "#/page-shell-two-level",
+    name: ui.catalog.pages.shellTwoLevel.title,
+    text: ui.catalog.pages.shellTwoLevel.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-two-level-full",
+    visit: "page-shell-two-level-full",
+    href: "#/page-shell-two-level-full",
+    name: ui.catalog.pages.shellTwoLevelFull.title,
+    text: ui.catalog.pages.shellTwoLevelFull.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-end",
+    visit: "page-shell-end",
+    href: "#/page-shell-end",
+    name: ui.catalog.pages.shellEnd.title,
+    text: ui.catalog.pages.shellEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-rail-end",
+    visit: "page-shell-rail-end",
+    href: "#/page-shell-rail-end",
+    name: ui.catalog.pages.shellRailEnd.title,
+    text: ui.catalog.pages.shellRailEnd.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-top-only",
+    visit: "page-shell-top-only",
+    href: "#/page-shell-top-only",
+    name: ui.catalog.pages.shellTopOnly.title,
+    text: ui.catalog.pages.shellTopOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-side-only",
+    visit: "page-shell-side-only",
+    href: "#/page-shell-side-only",
+    name: ui.catalog.pages.shellSideOnly.title,
+    text: ui.catalog.pages.shellSideOnly.text,
+    blocks: 1,
+  },
+  {
+    id: "shell-collapsed-end",
+    visit: "page-shell-collapsed-end",
+    href: "#/page-shell-collapsed-end",
+    name: ui.catalog.pages.shellCollapsedEnd.title,
+    text: ui.catalog.pages.shellCollapsedEnd.text,
+    blocks: 1,
+  },
+] as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="pages-title">
+            {{ ui.catalog.pagesTitle }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.catalog.pagesText }}
+          </Text>
+        </Stack>
+        <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" data-testid="page-list">
+          <ListItem v-for="p in PAGES" :key="p.id" class="flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border">
+            <Link
+              :href="p.href"
+              variant="default"
+              class="font-bold"
+              data-testid="page-link"
+              :data-page="p.id"
+              :data-visit="p.visit"
+            >
+              {{ p.name }}
+            </Link>
+            <Text size="sm" class="text-muted-foreground">
+              {{ p.text }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground" data-testid="page-count">
+              {{ tpl(ui.catalog.pageCount, p.blocks) }}
+            </Text>
+          </ListItem>
+        </List>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PromoBannersPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PromoBannersPage.vue
new file mode 100644
index 0000000..4055cf2
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PromoBannersPage.vue
@@ -0,0 +1,420 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The promo-banners page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  AnnouncementBar,
+  Block,
+  Box,
+  Container,
+  CookieBanner,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.promo.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.promoBanners }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 12) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-announcement-title"
+          data-testid="catalog-block"
+          data-block="announcement"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-announcement-title">
+              {{ ui.blocks.names.announcement }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.announcement }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-bar-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="bar"
+          >
+            <Title :as="3" size="base" weight="bold" id="announcement-bar-label" data-testid="variant-label">
+              {{ ui.blocks.variants.announcement.bar }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                :label="ui.promo.announcement.label"
+                :text="ui.promo.announcement.text"
+                :cta="ui.promo.announcement.cta"
+                ctaHref="#/pricing"
+                :dismissLabel="ui.promo.announcement.dismiss"
+                :badgeLabel="ui.promo.announcement.badge"
+                tone="default"
+                layout="center"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-badge-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="badge"
+          >
+            <Title :as="3" size="base" weight="bold" id="announcement-badge-label" data-testid="variant-label">
+              {{ ui.blocks.variants.announcement.badge }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                :label="ui.promo.announcement.label"
+                :text="ui.promo.announcement.text"
+                :cta="ui.promo.announcement.cta"
+                ctaHref="#/pricing"
+                :dismissLabel="ui.promo.announcement.dismiss"
+                :badgeLabel="ui.promo.announcement.badge"
+                tone="muted"
+                layout="center"
+                dismiss="hide"
+                badge="show"
+                position="top"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-bottom-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="bottom"
+          >
+            <Title :as="3" size="base" weight="bold" id="announcement-bottom-label" data-testid="variant-label">
+              {{ ui.blocks.variants.announcement.bottom }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                :label="ui.promo.announcement.label"
+                :text="ui.promo.announcement.text"
+                :cta="ui.promo.announcement.cta"
+                ctaHref="#/pricing"
+                :dismissLabel="ui.promo.announcement.dismiss"
+                :badgeLabel="ui.promo.announcement.badge"
+                tone="default"
+                layout="split"
+                dismiss="show"
+                badge="none"
+                position="bottom"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-muted-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="announcement-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.announcement.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                :label="ui.promo.announcement.label"
+                :text="ui.promo.announcement.text"
+                :cta="ui.promo.announcement.cta"
+                ctaHref="#/pricing"
+                :dismissLabel="ui.promo.announcement.dismiss"
+                :badgeLabel="ui.promo.announcement.badge"
+                tone="muted"
+                layout="center"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.muted))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-split-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="announcement-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.announcement.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                :label="ui.promo.announcement.label"
+                :text="ui.promo.announcement.text"
+                :cta="ui.promo.announcement.cta"
+                ctaHref="#/pricing"
+                :dismissLabel="ui.promo.announcement.dismiss"
+                :badgeLabel="ui.promo.announcement.badge"
+                tone="muted"
+                layout="split"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-dismissible-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="dismissible"
+          >
+            <Title :as="3" size="base" weight="bold" id="announcement-dismissible-label" data-testid="variant-label">
+              {{ ui.blocks.variants.announcement.dismissible }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                :label="ui.promo.announcement.label"
+                :text="ui.promo.announcement.text"
+                :cta="ui.promo.announcement.cta"
+                ctaHref="#/pricing"
+                :dismissLabel="ui.promo.announcement.dismiss"
+                :badgeLabel="ui.promo.announcement.badge"
+                tone="default"
+                layout="center"
+                dismiss="show"
+                badge="none"
+                position="top"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-shop-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="shop"
+          >
+            <Title :as="3" size="base" weight="bold" id="announcement-shop-label" data-testid="variant-label">
+              {{ ui.blocks.variants.announcement.shop }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                :label="ui.promo.announcement.label"
+                :text="ui.cases.shop.announcement.text"
+                :cta="ui.cases.shop.announcement.cta"
+                ctaHref="#/pricing"
+                :dismissLabel="ui.promo.announcement.dismiss"
+                :badgeLabel="ui.promo.announcement.badge"
+                tone="muted"
+                layout="center"
+                dismiss="show"
+                badge="none"
+                position="top"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="announcement-agency-label"
+            data-testid="variant"
+            data-block="announcement"
+            data-variant="agency"
+          >
+            <Title :as="3" size="base" weight="bold" id="announcement-agency-label" data-testid="variant-label">
+              {{ ui.blocks.variants.announcement.agency }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <AnnouncementBar
+                :label="ui.promo.announcement.label"
+                :text="ui.cases.agency.announcement.text"
+                :cta="ui.cases.agency.announcement.cta"
+                ctaHref="#/pricing"
+                :dismissLabel="ui.promo.announcement.dismiss"
+                :badgeLabel="ui.promo.announcement.badge"
+                tone="default"
+                layout="split"
+                dismiss="hide"
+                badge="none"
+                position="top"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.agency))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-cookie-title"
+          data-testid="catalog-block"
+          data-block="cookie"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-cookie-title">
+              {{ ui.blocks.names.cookie }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.cookie }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-bar-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="bar"
+          >
+            <Title :as="3" size="base" weight="bold" id="cookie-bar-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cookie.bar }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-bar"
+                :title="ui.promo.cookie.title"
+                :text="ui.promo.cookie.text"
+                :accept="ui.promo.cookie.accept"
+                :decline="ui.promo.cookie.decline"
+                :settings="ui.promo.cookie.settings"
+                layout="bar"
+                actions="two"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-card-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="card"
+          >
+            <Title :as="3" size="base" weight="bold" id="cookie-card-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cookie.card }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-card"
+                :title="ui.promo.cookie.title"
+                :text="ui.promo.cookie.text"
+                :accept="ui.promo.cookie.accept"
+                :decline="ui.promo.cookie.decline"
+                :settings="ui.promo.cookie.settings"
+                layout="card"
+                actions="two"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-settings-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="settings"
+          >
+            <Title :as="3" size="base" weight="bold" id="cookie-settings-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cookie.settings }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-settings"
+                :title="ui.promo.cookie.title"
+                :text="ui.promo.cookie.text"
+                :accept="ui.promo.cookie.accept"
+                :decline="ui.promo.cookie.decline"
+                :settings="ui.promo.cookie.settings"
+                layout="bar"
+                actions="three"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="cookie-muted-label"
+            data-testid="variant"
+            data-block="cookie"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="cookie-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.cookie.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <CookieBanner
+                id="cookie-muted"
+                :title="ui.promo.cookie.title"
+                :text="ui.promo.cookie.text"
+                :accept="ui.promo.cookie.accept"
+                :decline="ui.promo.cookie.decline"
+                :settings="ui.promo.cookie.settings"
+                layout="card"
+                actions="three"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/PromoNewsletterPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/PromoNewsletterPage.vue
new file mode 100644
index 0000000..e69bf6c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/PromoNewsletterPage.vue
@@ -0,0 +1,202 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The promo-newsletter page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  Group,
+  Link,
+  NewsletterForm,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.promo.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.promoNewsletter }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 5) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-newsletter-title"
+          data-testid="catalog-block"
+          data-block="newsletter"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-newsletter-title">
+              {{ ui.blocks.names.newsletter }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.newsletter }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-inline-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="inline"
+          >
+            <Title :as="3" size="base" weight="bold" id="newsletter-inline-label" data-testid="variant-label">
+              {{ ui.blocks.variants.newsletter.inline }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-inline"
+                :title="ui.promo.newsletter.title"
+                :text="ui.promo.newsletter.text"
+                :label="ui.promo.newsletter.label"
+                :submit="ui.promo.newsletter.submit"
+                :consent="ui.promo.newsletter.consent"
+                layout="inline"
+                terms="hide"
+                tone="default"
+                align="center"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-stacked-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="stacked"
+          >
+            <Title :as="3" size="base" weight="bold" id="newsletter-stacked-label" data-testid="variant-label">
+              {{ ui.blocks.variants.newsletter.stacked }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-stacked"
+                :title="ui.promo.newsletter.title"
+                :text="ui.promo.newsletter.text"
+                :label="ui.promo.newsletter.label"
+                :submit="ui.promo.newsletter.submit"
+                :consent="ui.promo.newsletter.consent"
+                layout="stacked"
+                terms="hide"
+                tone="default"
+                align="center"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-split-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="newsletter-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.newsletter.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-split"
+                :title="ui.promo.newsletter.title"
+                :text="ui.promo.newsletter.text"
+                :label="ui.promo.newsletter.label"
+                :submit="ui.promo.newsletter.submit"
+                :consent="ui.promo.newsletter.consent"
+                layout="split"
+                terms="hide"
+                tone="default"
+                align="start"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-consent-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="consent"
+          >
+            <Title :as="3" size="base" weight="bold" id="newsletter-consent-label" data-testid="variant-label">
+              {{ ui.blocks.variants.newsletter.consent }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-consent"
+                :title="ui.promo.newsletter.title"
+                :text="ui.promo.newsletter.text"
+                :label="ui.promo.newsletter.label"
+                :submit="ui.promo.newsletter.submit"
+                :consent="ui.promo.newsletter.consent"
+                layout="inline"
+                terms="show"
+                tone="default"
+                align="center"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="newsletter-muted-label"
+            data-testid="variant"
+            data-block="newsletter"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="newsletter-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.newsletter.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <NewsletterForm
+                id="newsletter-muted"
+                :title="ui.promo.newsletter.title"
+                :text="ui.promo.newsletter.text"
+                :label="ui.promo.newsletter.label"
+                :submit="ui.promo.newsletter.submit"
+                :consent="ui.promo.newsletter.consent"
+                layout="inline"
+                terms="show"
+                tone="muted"
+                align="start"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/ScreenHeader.vue b/apps/host-vue/xgen/screens/CatalogScreen/ScreenHeader.vue
new file mode 100644
index 0000000..5e46ff5
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/ScreenHeader.vue
@@ -0,0 +1,48 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The ScreenHeader part of CatalogScreen: its own file, so each file of the screen opens on one Block. -->
+<script setup lang="ts">
+import { Block, Button, Container, Link, LinkPlain, NavBlock } from "@ui8kit/vue-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="header" class="border-b border-border">
+    <LinkPlain
+      href="#main-content"
+      :class="'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background ' +
+        'focus:px-4 focus:py-2 focus:text-sm focus:shadow'"
+      data-testid="skip-link"
+    >
+      {{ ui.site.header.skip }}
+    </LinkPlain>
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+      <Link href="#/" variant="default" class="text-lg font-bold" data-testid="brand">
+        {{ ui.catalog.title }}
+      </Link>
+      <NavBlock :label="ui.catalog.navLabel" class="flex flex-wrap items-center gap-4">
+        <Link href="#/" variant="default" class="text-sm font-medium" data-testid="tab-categories">
+          {{ ui.catalog.categoriesTab }}
+        </Link>
+        <Link href="#/pages" variant="default" class="text-sm font-medium" data-testid="tab-pages">
+          {{ ui.catalog.pagesTitle }}
+        </Link>
+        <Link href="/blocks/" variant="default" class="text-sm font-medium" data-testid="gallery-link">
+          {{ ui.blocks.title }}
+        </Link>
+        <Link href="/skins/" variant="default" class="text-sm font-medium" data-testid="skins-link">
+          {{ ui.skins.title }}
+        </Link>
+        <Link href="/discovery/" variant="default" class="text-sm font-medium" data-testid="discovery-link">
+          {{ ui.discovery.title }}
+        </Link>
+        <Button variant="outline" size="sm" data-testid="theme-toggle" @click="() => actions.toggleTheme()">
+          {{ ui.theme.toggle }}
+        </Button>
+      </NavBlock>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/SupportContactPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/SupportContactPage.vue
new file mode 100644
index 0000000..84a6f21
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/SupportContactPage.vue
@@ -0,0 +1,369 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The support-contact page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  ContactForm,
+  Container,
+  Group,
+  Link,
+  Stack,
+  SupportChannels,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.support.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.supportContact }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 2, 10) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-contact-title"
+          data-testid="catalog-block"
+          data-block="contact"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-contact-title">
+              {{ ui.blocks.names.contact }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.contact }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-single-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="single"
+          >
+            <Title :as="3" size="base" weight="bold" id="contact-single-label" data-testid="variant-label">
+              {{ ui.blocks.variants.contact.single }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-single"
+                :title="ui.support.contact.title"
+                :text="ui.support.contact.text"
+                :labels="ui.support.contact.labels"
+                :details="channels"
+                layout="single"
+                fields="full"
+                terms="hide"
+                page="section"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-page-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="page"
+          >
+            <Title :as="3" size="base" weight="bold" id="contact-page-label" data-testid="variant-label">
+              {{ ui.blocks.variants.contact.page }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-page"
+                :title="ui.support.contact.title"
+                :text="ui.support.contact.text"
+                :labels="ui.support.contact.labels"
+                :details="channels"
+                layout="single"
+                fields="short"
+                terms="hide"
+                page="full"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.page))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-short-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="short"
+          >
+            <Title :as="3" size="base" weight="bold" id="contact-short-label" data-testid="variant-label">
+              {{ ui.blocks.variants.contact.short }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-short"
+                :title="ui.support.contact.title"
+                :text="ui.support.contact.text"
+                :labels="ui.support.contact.labels"
+                :details="channels"
+                layout="single"
+                fields="short"
+                terms="hide"
+                page="section"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.short))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-split-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="contact-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.contact.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-split"
+                :title="ui.support.contact.title"
+                :text="ui.support.contact.text"
+                :labels="ui.support.contact.labels"
+                :details="channels"
+                layout="split"
+                fields="full"
+                terms="hide"
+                page="section"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-consent-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="consent"
+          >
+            <Title :as="3" size="base" weight="bold" id="contact-consent-label" data-testid="variant-label">
+              {{ ui.blocks.variants.contact.consent }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-consent"
+                :title="ui.support.contact.title"
+                :text="ui.support.contact.text"
+                :labels="ui.support.contact.labels"
+                :details="channels"
+                layout="single"
+                fields="full"
+                terms="show"
+                page="section"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="contact-muted-label"
+            data-testid="variant"
+            data-block="contact"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="contact-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.contact.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ContactForm
+                id="contact-muted"
+                :title="ui.support.contact.title"
+                :text="ui.support.contact.text"
+                :labels="ui.support.contact.labels"
+                :details="channels"
+                layout="split"
+                fields="short"
+                terms="show"
+                page="section"
+                tone="muted"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-channels-title"
+          data-testid="catalog-block"
+          data-block="channels"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-channels-title">
+              {{ ui.blocks.names.channels }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.channels }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-grid-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="grid"
+          >
+            <Title :as="3" size="base" weight="bold" id="channels-grid-label" data-testid="variant-label">
+              {{ ui.blocks.variants.channels.grid }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-grid"
+                :title="ui.support.channels.title"
+                :channels="channels"
+                :empty="ui.empty.channels"
+                :open="ui.support.channels.open"
+                layout="grid"
+                cols="1-3"
+                action="link"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-twoUp-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="twoUp"
+          >
+            <Title :as="3" size="base" weight="bold" id="channels-twoUp-label" data-testid="variant-label">
+              {{ ui.blocks.variants.channels.twoUp }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-twoUp"
+                :title="ui.support.channels.title"
+                :channels="channels"
+                :empty="ui.empty.channels"
+                :open="ui.support.channels.open"
+                layout="grid"
+                cols="1-2"
+                action="link"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-list-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="list"
+          >
+            <Title :as="3" size="base" weight="bold" id="channels-list-label" data-testid="variant-label">
+              {{ ui.blocks.variants.channels.list }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-list"
+                :title="ui.support.channels.title"
+                :channels="channels"
+                :empty="ui.empty.channels"
+                :open="ui.support.channels.open"
+                layout="list"
+                cols="1-3"
+                action="link"
+                tone="default"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="channels-plain-label"
+            data-testid="variant"
+            data-block="channels"
+            data-variant="plain"
+          >
+            <Title :as="3" size="base" weight="bold" id="channels-plain-label" data-testid="variant-label">
+              {{ ui.blocks.variants.channels.plain }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <SupportChannels
+                id="channels-plain"
+                :title="ui.support.channels.title"
+                :channels="channels"
+                :empty="ui.empty.channels"
+                :open="ui.support.channels.open"
+                layout="grid"
+                cols="1-3"
+                action="none"
+                tone="muted"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.plain))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/CatalogScreen/SupportStatesPage.vue b/apps/host-vue/xgen/screens/CatalogScreen/SupportStatesPage.vue
new file mode 100644
index 0000000..b51e10a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/CatalogScreen/SupportStatesPage.vue
@@ -0,0 +1,198 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/catalog.json -->
+<!-- The support-states page of CatalogScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Container,
+  ErrorPage,
+  Group,
+  Link,
+  Stack,
+  Text,
+  Title,
+  tpl,
+  uniqLabel,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ERRORPAGE_ACTIONS = { cta: ui.vibe.error.cta, href: "#/", secondary: ui.vibe.error.secondary, secondaryHref: "#/" } as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Group>
+          <Link href="#/" variant="default" data-testid="back">
+            {{ ui.catalog.back }}
+          </Link>
+        </Group>
+        <Stack gap="2" align="stretch">
+          <Text size="sm" class="font-medium text-muted-foreground" data-testid="catalog-eyebrow">
+            {{ ui.catalog.sections.support.title }}
+          </Text>
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="category-title">
+            {{ ui.catalog.categories.supportStates }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ tpl(ui.catalog.count, 1, 5) }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="6"
+          align="stretch"
+          role="group"
+          aria-labelledby="catalog-errorpage-title"
+          data-testid="catalog-block"
+          data-block="errorpage"
+        >
+          <Stack gap="2" align="stretch">
+            <Title :as="2" size="2xl" weight="bold" id="catalog-errorpage-title">
+              {{ ui.blocks.names.errorpage }}
+            </Title>
+            <Text size="sm" class="max-w-2xl text-muted-foreground">
+              {{ ui.blocks.docs.errorpage }}
+            </Text>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-centered-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="centered"
+          >
+            <Title :as="3" size="base" weight="bold" id="errorpage-centered-label" data-testid="variant-label">
+              {{ ui.blocks.variants.errorpage.centered }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-centered"
+                :title="ui.vibe.error.title"
+                :text="ui.vibe.error.text"
+                :status="ui.vibe.error.status"
+                :actions="{ ...ERRORPAGE_ACTIONS, mode: 'one' }"
+                layout="centered"
+                code="show"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.centered))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-split-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="split"
+          >
+            <Title :as="3" size="base" weight="bold" id="errorpage-split-label" data-testid="variant-label">
+              {{ ui.blocks.variants.errorpage.split }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-split"
+                :title="ui.vibe.error.title"
+                :text="ui.vibe.error.text"
+                :status="ui.vibe.error.status"
+                :actions="{ ...ERRORPAGE_ACTIONS, mode: 'one' }"
+                layout="split"
+                code="show"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.split))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-noCode-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="noCode"
+          >
+            <Title :as="3" size="base" weight="bold" id="errorpage-noCode-label" data-testid="variant-label">
+              {{ ui.blocks.variants.errorpage.noCode }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-noCode"
+                :title="ui.vibe.error.title"
+                :text="ui.vibe.error.text"
+                :status="ui.vibe.error.status"
+                :actions="{ ...ERRORPAGE_ACTIONS, mode: 'one' }"
+                layout="centered"
+                code="hide"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.noCode))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-two-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="two"
+          >
+            <Title :as="3" size="base" weight="bold" id="errorpage-two-label" data-testid="variant-label">
+              {{ ui.blocks.variants.errorpage.two }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-two"
+                :title="ui.vibe.error.title"
+                :text="ui.vibe.error.text"
+                :status="ui.vibe.error.status"
+                :actions="{ ...ERRORPAGE_ACTIONS, mode: 'two' }"
+                layout="centered"
+                code="show"
+                tone="default"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.two))"
+              />
+            </Box>
+          </Stack>
+          <Stack
+            gap="4"
+            align="stretch"
+            role="group"
+            aria-labelledby="errorpage-muted-label"
+            data-testid="variant"
+            data-block="errorpage"
+            data-variant="muted"
+          >
+            <Title :as="3" size="base" weight="bold" id="errorpage-muted-label" data-testid="variant-label">
+              {{ ui.blocks.variants.errorpage.muted }}
+            </Title>
+            <Box class="overflow-clip rounded-xl inset-ring inset-ring-border" data-testid="variant-body">
+              <ErrorPage
+                id="errorpage-muted"
+                :title="ui.vibe.error.title"
+                :text="ui.vibe.error.text"
+                :status="ui.vibe.error.status"
+                :actions="{ ...ERRORPAGE_ACTIONS, mode: 'one' }"
+                layout="centered"
+                code="show"
+                tone="muted"
+                :level="2"
+                :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.errorpage, ui.blocks.variants.errorpage.muted))"
+              />
+            </Box>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/PlansScreen.vue b/apps/host-vue/xgen/screens/PlansScreen.vue
new file mode 100644
index 0000000..1e2e218
--- /dev/null
+++ b/apps/host-vue/xgen/screens/PlansScreen.vue
@@ -0,0 +1,274 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/plans.json -->
+<!--
+  Collection -> record: a list of plans (search, sort, pager; all state in the URL) and the card of one plan.
+  Data: the Codex fixture `plans`.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  Badge,
+  Block,
+  Button,
+  Container,
+  Group,
+  Input,
+  Link,
+  PricingCard,
+  Stack,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+  Text,
+  Title,
+  at,
+  fmtMoney,
+  tpl,
+  type Plan,
+} from "@ui8kit/vue-ui";
+import { collectionView, fromCodex, matchRoute, screenActions, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { plans as entries } from "@ui8kit/app-shared/data/plans";
+
+const LIST = { searchFields: ["name","tagline"], pageSize: 5, defaultSort: "price:asc" } as const;
+const ROUTES = [{"path":"plans","area":"list"},{"path":"plans/:id","area":"record"}] as const;
+const FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+  "status": "metadata.plan_status.value",
+} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const rows = fromCodex<Plan>(entries, FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "list", params: {} as Record<string, string> });
+const view = computed(() => collectionView(rows, LIST, url.query));
+const record = computed(() => route.value.area === "record" ? rows.find((r) => r.id === route.value.params.id) : undefined);
+const actions = computed(() => screenActions(url, view.value, "plans", (id) => `plans/${id}`, toggleTheme));
+</script>
+
+<template>
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-8">
+      <Stack gap="6">
+        <Group gap="4" align="center" justify="between">
+          <Title :as="1" size="2xl" weight="bold">
+            {{ ui.app.title }}
+          </Title>
+          <Button variant="outline" size="sm" data-testid="theme-toggle" @click="() => actions.toggleTheme()">
+            {{ ui.theme.toggle }}
+          </Button>
+        </Group>
+        <Stack v-if="route.area === 'record'" gap="4">
+          <Group>
+            <Button variant="ghost" size="sm" data-testid="back" @click="() => actions.back()">
+              {{ ui.record.back }}
+            </Button>
+          </Group>
+          <PricingCard v-if="record" :plan="record" :labels="ui.pricing" :current="true" @select="() => actions.back()">
+            <template #footer="{ plan }">
+              <Text size="sm" class="text-muted-foreground" data-testid="record-id">
+                {{ tpl(ui.record.id, plan.id) }}
+              </Text>
+            </template>
+          </PricingCard>
+          <Text v-else class="text-muted-foreground" data-testid="missing">
+            {{ ui.record.missing }}
+          </Text>
+        </Stack>
+        <Stack v-else gap="4">
+          <Group gap="4" align="center" justify="between" class="flex-wrap">
+            <Input
+              type="search"
+              size="default"
+              :value="view.q"
+              :placeholder="ui.plans.search"
+              :aria-label="ui.plans.search"
+              class="max-w-xs"
+              data-testid="search"
+              @input="(event: Event & { currentTarget: HTMLInputElement }) => actions.search(event.currentTarget.value)"
+            />
+            <Text size="sm" class="text-muted-foreground" data-testid="count">
+              {{ tpl(ui.plans.count, view.total) }}
+            </Text>
+          </Group>
+          <Table class="w-full text-sm" data-testid="plans-table">
+            <TableCaption class="sr-only">
+              {{ ui.plans.caption }}
+            </TableCaption>
+            <TableHead>
+              <TableRow>
+                <TableHeadCell
+                  v-if="((view.sort.field === 'name') && (view.sort.dir === 'asc'))"
+                  scope="col"
+                  aria-sort="ascending"
+                >
+                  <Button variant="ghost" size="sm" class="-mx-2 px-2" @click="() => actions.sort('name')">
+                    {{ ui.plans.col.name }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell
+                  v-else-if="((view.sort.field === 'name') && (view.sort.dir === 'desc'))"
+                  scope="col"
+                  aria-sort="descending"
+                >
+                  <Button variant="ghost" size="sm" class="-mx-2 px-2" @click="() => actions.sort('name')">
+                    {{ ui.plans.col.name }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell v-else scope="col" aria-sort="none">
+                  <Button variant="ghost" size="sm" class="-mx-2 px-2" @click="() => actions.sort('name')">
+                    {{ ui.plans.col.name }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell
+                  v-if="((view.sort.field === 'price') && (view.sort.dir === 'asc'))"
+                  scope="col"
+                  class="text-right"
+                  aria-sort="ascending"
+                >
+                  <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" @click="() => actions.sort('price')">
+                    {{ ui.plans.col.price }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell
+                  v-else-if="((view.sort.field === 'price') && (view.sort.dir === 'desc'))"
+                  scope="col"
+                  class="text-right"
+                  aria-sort="descending"
+                >
+                  <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" @click="() => actions.sort('price')">
+                    {{ ui.plans.col.price }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell v-else scope="col" class="text-right" aria-sort="none">
+                  <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" @click="() => actions.sort('price')">
+                    {{ ui.plans.col.price }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell
+                  v-if="((view.sort.field === 'seats') && (view.sort.dir === 'asc'))"
+                  scope="col"
+                  class="text-right"
+                  aria-sort="ascending"
+                >
+                  <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" @click="() => actions.sort('seats')">
+                    {{ ui.plans.col.seats }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell
+                  v-else-if="((view.sort.field === 'seats') && (view.sort.dir === 'desc'))"
+                  scope="col"
+                  class="text-right"
+                  aria-sort="descending"
+                >
+                  <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" @click="() => actions.sort('seats')">
+                    {{ ui.plans.col.seats }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell v-else scope="col" class="text-right" aria-sort="none">
+                  <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" @click="() => actions.sort('seats')">
+                    {{ ui.plans.col.seats }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell
+                  v-if="((view.sort.field === 'storage') && (view.sort.dir === 'asc'))"
+                  scope="col"
+                  class="text-right"
+                  aria-sort="ascending"
+                >
+                  <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" @click="() => actions.sort('storage')">
+                    {{ ui.plans.col.storage }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell
+                  v-else-if="((view.sort.field === 'storage') && (view.sort.dir === 'desc'))"
+                  scope="col"
+                  class="text-right"
+                  aria-sort="descending"
+                >
+                  <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" @click="() => actions.sort('storage')">
+                    {{ ui.plans.col.storage }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell v-else scope="col" class="text-right" aria-sort="none">
+                  <Button variant="ghost" size="sm" class="-mx-2 ml-auto px-2" @click="() => actions.sort('storage')">
+                    {{ ui.plans.col.storage }}
+                  </Button>
+                </TableHeadCell>
+                <TableHeadCell scope="col">
+                  {{ ui.plans.col.status }}
+                </TableHeadCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow v-for="row in view.rows" :key="row.id" data-testid="plan-row">
+                <TableCell>
+                  <Link :href="(('#/plans/' + row.id) + view.qs)" variant="default" data-testid="open-record">
+                    {{ row.name }}
+                  </Link>
+                </TableCell>
+                <TableCell class="text-right">
+                  {{ fmtMoney(row.price, row.currency) }}
+                </TableCell>
+                <TableCell class="text-right">
+                  {{ row.seats }}
+                </TableCell>
+                <TableCell class="text-right">
+                  {{ row.storage }}
+                </TableCell>
+                <TableCell>
+                  <Badge :variant="((row.status === 'active') ? 'default' : 'secondary')" size="default">
+                    {{ at(ui.status, (row.status ?? "")) }}
+                  </Badge>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+          <Text v-if="(view.total === 0)" class="text-muted-foreground" data-testid="empty">
+            {{ ui.plans.empty }}
+          </Text>
+          <Group gap="4" align="center" justify="between" class="flex-wrap">
+            <Text size="sm" class="text-muted-foreground">
+              {{ tpl(ui.pager.showing, view.from, view.to, view.total) }}
+            </Text>
+            <Group gap="2">
+              <Button
+                variant="outline"
+                size="sm"
+                :disabled="!(view.page > 1)"
+                data-testid="prev"
+                @click="() => actions.page((view.page + -1))"
+              >
+                {{ ui.pager.previous }}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                :disabled="!(view.page < view.pages)"
+                data-testid="next"
+                @click="() => actions.page((view.page + 1))"
+              >
+                {{ ui.pager.next }}
+              </Button>
+            </Group>
+          </Group>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/SiteScreen.vue b/apps/host-vue/xgen/screens/SiteScreen.vue
new file mode 100644
index 0000000..ed7b0d7
--- /dev/null
+++ b/apps/host-vue/xgen/screens/SiteScreen.vue
@@ -0,0 +1,208 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/site.json -->
+<!--
+  A marketing site of two routes, home and pricing, made of blocks: header, hero, features, pricing, FAQ, call
+  to action, footer. Data: the Codex fixtures `features`, `tiers` and `faq`. The only action is the theme
+  button.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  Block,
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  HeroClassic,
+  PricingTiers,
+  SiteFooter,
+  SiteHeader,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Plan,
+} from "@ui8kit/vue-ui";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const ROUTES = [{"path":"","area":"home"},{"path":"pricing","area":"pricing"}] as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "notfound", params: {} as Record<string, string> });
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <SiteHeader
+    :labels="ui.site.header"
+    :current="route.area"
+    :cta="ui.site.header.cta"
+    layout="inline"
+    position="static"
+    actions="none"
+    :routes="{ home: '#/', pricing: '#/pricing' }"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <template v-if="route.area === 'home'">
+      <HeroClassic
+        id="home-hero"
+        :title="ui.site.home.title"
+        :text="ui.site.home.text"
+        :actions="{
+          cta: ui.site.home.cta,
+          href: '#/pricing',
+          secondary: ui.site.home.secondary,
+          secondaryHref: '#/pricing',
+          emailLabel: ui.promo.newsletter.label,
+          mode: 'one',
+        }"
+        :media="{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: 'none',
+          side: 'end',
+        }"
+        layout="centered"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <FeatureGrid
+        id="home-features"
+        :title="ui.site.home.featuresTitle"
+        :features="features"
+        :empty="ui.empty.features"
+        :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+        layout="grid"
+        cols="1-3"
+        item="card"
+        mediaSide="end"
+        tone="default"
+        density="default"
+      />
+      <CtaBand
+        id="home-cta"
+        :title="ui.site.home.ctaTitle"
+        :text="ui.site.home.ctaText"
+        :actions="{
+          cta: ui.site.home.ctaButton,
+          href: '#/pricing',
+          secondary: ui.site.home.ctaSecondary,
+          secondaryHref: '#/',
+          emailLabel: ui.promo.newsletter.label,
+          mode: 'one',
+        }"
+        :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+        layout="card"
+        tone="muted"
+        proof="none"
+        density="default"
+      />
+    </template>
+    <template v-else-if="route.area === 'pricing'">
+      <HeroClassic
+        id="pricing-hero"
+        :title="ui.site.pricing.title"
+        :text="ui.site.pricing.text"
+        :actions="undefined"
+        :media="{
+          codeTitle: ui.vibe.code.title,
+          prompt: ui.vibe.code.prompt,
+          lines: terminal,
+          kind: 'none',
+          side: 'end',
+        }"
+        layout="centered"
+        scale="default"
+        tone="default"
+        density="roomy"
+      />
+      <PricingTiers
+        id="pricing-tiers"
+        :title="ui.site.pricing.tiersTitle"
+        :plans="tiers"
+        :labels="ui.pricing"
+        :billingLabels="ui.vibe.billing"
+        layout="grid"
+        cols="1-3"
+        emphasis="auto"
+        billing="off"
+        tone="default"
+        density="default"
+      />
+      <FaqList
+        id="pricing-faq"
+        :title="ui.site.pricing.faqTitle"
+        :items="faq"
+        :empty="ui.vibe.faq.empty"
+        :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+        :filter="{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: '', mode: 'none' }"
+        layout="accordion"
+        cols="1"
+        tone="default"
+        density="default"
+      />
+    </template>
+    <HeroClassic v-else
+      id="not-found"
+      :title="ui.site.notFound.title"
+      :text="ui.site.notFound.text"
+      :actions="{
+        cta: ui.site.notFound.back,
+        href: '#/',
+        secondary: ui.site.home.secondary,
+        secondaryHref: '#/pricing',
+        emailLabel: ui.promo.newsletter.label,
+        mode: 'one',
+      }"
+      :media="{
+        codeTitle: ui.vibe.code.title,
+        prompt: ui.vibe.code.prompt,
+        lines: terminal,
+        kind: 'none',
+        side: 'end',
+      }"
+      layout="centered"
+      scale="default"
+      tone="default"
+      density="roomy"
+    />
+  </Block>
+  <SiteFooter
+    :labels="ui.site.footer"
+    layout="minimal"
+    density="default"
+    :routes="{ home: '#/', pricing: '#/pricing' }"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/SkinsScreen.vue b/apps/host-vue/xgen/screens/SkinsScreen.vue
new file mode 100644
index 0000000..2a8f6cc
--- /dev/null
+++ b/apps/host-vue/xgen/screens/SkinsScreen.vue
@@ -0,0 +1,33 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/skins.json -->
+<!--
+  The Skins screen: tiles that switch the look of the whole preview. A row of skins (the default theme and 14
+  tweakcn presets, each tile drawn in its skin), a row of Google fonts with Latin and Cyrillic over the font of
+  the skin, and a row of corner radii over the radius of the skin. The tiles are static; the preview runtime
+  (runtime/skins.ts) applies and stores the choice.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block } from "@ui8kit/vue-ui";
+import IndexPage from "./SkinsScreen/IndexPage.vue";
+import NotfoundPage from "./SkinsScreen/NotfoundPage.vue";
+import ScreenHeader from "./SkinsScreen/ScreenHeader.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const ROUTES = [{"path":"","area":"index"}] as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "notfound", params: {} as Record<string, string> });
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <ScreenHeader />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <IndexPage v-if="route.area === 'index'" />
+    <NotfoundPage v-else />
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/SkinsScreen/IndexPage.vue b/apps/host-vue/xgen/screens/SkinsScreen/IndexPage.vue
new file mode 100644
index 0000000..0ce92ae
--- /dev/null
+++ b/apps/host-vue/xgen/screens/SkinsScreen/IndexPage.vue
@@ -0,0 +1,236 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/skins.json -->
+<!-- The index page of SkinsScreen. -->
+<script setup lang="ts">
+import {
+  Block,
+  Box,
+  Button,
+  ButtonPlain,
+  Container,
+  Inline,
+  List,
+  ListItem,
+  LucideIcon,
+  Stack,
+  Text,
+  Title,
+} from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+const SKINS = [
+  { id: "default", name: ui.skins.skins.names.default },
+  { id: "modern-minimal", name: ui.skins.skins.names.modernMinimal },
+  { id: "violet-bloom", name: ui.skins.skins.names.violetBloom },
+  { id: "t3-chat", name: ui.skins.skins.names.t3Chat },
+  { id: "bubblegum", name: ui.skins.skins.names.bubblegum },
+  { id: "doom-64", name: ui.skins.skins.names.doom64 },
+  { id: "amber-minimal", name: ui.skins.skins.names.amberMinimal },
+  { id: "supabase", name: ui.skins.skins.names.supabase },
+  { id: "kodama-grove", name: ui.skins.skins.names.kodamaGrove },
+  { id: "perpetuity", name: ui.skins.skins.names.perpetuity },
+  { id: "cosmic-night", name: ui.skins.skins.names.cosmicNight },
+  { id: "claude", name: ui.skins.skins.names.claude },
+  { id: "mocha-mousse", name: ui.skins.skins.names.mochaMousse },
+  { id: "neo-brutalism", name: ui.skins.skins.names.neoBrutalism },
+  { id: "notebook", name: ui.skins.skins.names.notebook },
+] as const;
+const FONTS = [
+  { id: "inter", family: "Inter", name: ui.skins.fonts.names.inter },
+  { id: "roboto", family: "Roboto", name: ui.skins.fonts.names.roboto },
+  { id: "manrope", family: "Manrope", name: ui.skins.fonts.names.manrope },
+  { id: "montserrat", family: "Montserrat", name: ui.skins.fonts.names.montserrat },
+  { id: "rubik", family: "Rubik", name: ui.skins.fonts.names.rubik },
+  { id: "nunito", family: "Nunito", name: ui.skins.fonts.names.nunito },
+  { id: "ibm-plex-sans", family: "IBM Plex Sans", name: ui.skins.fonts.names.ibmPlexSans },
+  { id: "golos-text", family: "Golos Text", name: ui.skins.fonts.names.golosText },
+  { id: "onest", family: "Onest", name: ui.skins.fonts.names.onest },
+  { id: "open-sans", family: "Open Sans", name: ui.skins.fonts.names.openSans },
+] as const;
+const RADII = [
+  { id: "r0", value: "0px", name: ui.skins.radius.names.r0 },
+  { id: "r4", value: "4px", name: ui.skins.radius.names.r4 },
+  { id: "r8", value: "8px", name: ui.skins.radius.names.r8 },
+  { id: "r12", value: "12px", name: ui.skins.radius.names.r12 },
+  { id: "r16", value: "16px", name: ui.skins.radius.names.r16 },
+] as const;
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="8" align="stretch">
+        <Stack gap="2" align="stretch">
+          <Title :as="1" size="4xl" weight="bold" id="page-title" data-testid="skins-title">
+            {{ ui.skins.title }}
+          </Title>
+          <Text class="max-w-2xl text-muted-foreground">
+            {{ ui.skins.intro }}
+          </Text>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skins-skins-title"
+          data-testid="skins-row"
+          data-row="skins"
+        >
+          <Box class="flex flex-wrap items-end justify-between gap-4">
+            <Stack gap="2" align="stretch">
+              <Title :as="2" size="2xl" weight="bold" id="skins-skins-title">
+                {{ ui.skins.skins.title }}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {{ ui.skins.skins.text }}
+              </Text>
+            </Stack>
+            <Button variant="outline" size="sm" data-look-reset="skin" data-testid="reset-skins">
+              {{ ui.skins.skins.reset }}
+            </Button>
+          </Box>
+          <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5" data-testid="skins-list">
+            <ListItem v-for="s in SKINS" :key="s.id" class="flex">
+              <ButtonPlain
+                type="button"
+                :class="'group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted ' +
+                  'aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-2'"
+                :aria-pressed="false"
+                :data-skin-pick="s.id"
+                data-testid="skin-tile"
+              >
+                <Inline
+                  class="flex flex-col gap-4 rounded p-4 inset-ring inset-ring-border"
+                  :data-skin="s.id"
+                  data-testid="skin-preview"
+                >
+                  <Inline class="flex flex-wrap gap-2">
+                    <Inline class="size-6 rounded bg-primary inset-ring inset-ring-border" />
+                    <Inline class="size-6 rounded bg-secondary inset-ring inset-ring-border" />
+                    <Inline class="size-6 rounded bg-accent inset-ring inset-ring-border" />
+                    <Inline class="size-6 rounded bg-muted inset-ring inset-ring-border" />
+                    <Inline class="size-6 rounded bg-foreground inset-ring inset-ring-border" />
+                  </Inline>
+                  <Inline class="flex flex-col gap-2 rounded bg-card p-4 text-card-foreground inset-ring inset-ring-border">
+                    <Inline class="text-sm font-semibold">
+                      {{ ui.skins.sample.card }}
+                    </Inline>
+                    <Inline class="text-xs text-muted-foreground">
+                      {{ ui.skins.sample.text }}
+                    </Inline>
+                    <Inline :class="'inline-flex h-8 w-fit items-center rounded bg-primary px-4 text-sm font-medium text-primary-foreground'">
+                      {{ ui.skins.sample.button }}
+                    </Inline>
+                  </Inline>
+                </Inline>
+                <Inline class="flex items-center justify-between gap-2 px-2 pb-2 text-sm font-medium">
+                  <Inline>
+                    {{ s.name }}
+                  </Inline>
+                  <Inline class="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                    <LucideIcon name="check" :size="16" />
+                  </Inline>
+                </Inline>
+              </ButtonPlain>
+            </ListItem>
+          </List>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skins-fonts-title"
+          data-testid="skins-row"
+          data-row="fonts"
+        >
+          <Box class="flex flex-wrap items-end justify-between gap-4">
+            <Stack gap="2" align="stretch">
+              <Title :as="2" size="2xl" weight="bold" id="skins-fonts-title">
+                {{ ui.skins.fonts.title }}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {{ ui.skins.fonts.text }}
+              </Text>
+            </Stack>
+            <Button variant="outline" size="sm" data-look-reset="font" data-testid="reset-fonts">
+              {{ ui.skins.fonts.reset }}
+            </Button>
+          </Box>
+          <List tag="ul" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5" data-testid="fonts-list">
+            <ListItem v-for="f in FONTS" :key="f.id" class="flex">
+              <ButtonPlain
+                type="button"
+                :class="'group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted ' +
+                  'aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-4'"
+                :aria-pressed="false"
+                :data-font-pick="f.id"
+                :data-font-family="f.family"
+                data-testid="font-tile"
+              >
+                <Inline class="text-3xl">
+                  {{ ui.skins.fonts.specimen }}
+                </Inline>
+                <Inline class="text-sm text-muted-foreground">
+                  {{ ui.skins.fonts.pangram }}
+                </Inline>
+                <Inline class="flex items-center justify-between gap-2  text-sm font-medium">
+                  <Inline>
+                    {{ f.name }}
+                  </Inline>
+                  <Inline class="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                    <LucideIcon name="check" :size="16" />
+                  </Inline>
+                </Inline>
+              </ButtonPlain>
+            </ListItem>
+          </List>
+        </Stack>
+        <Stack
+          gap="4"
+          align="stretch"
+          role="group"
+          aria-labelledby="skins-radius-title"
+          data-testid="skins-row"
+          data-row="radius"
+        >
+          <Box class="flex flex-wrap items-end justify-between gap-4">
+            <Stack gap="2" align="stretch">
+              <Title :as="2" size="2xl" weight="bold" id="skins-radius-title">
+                {{ ui.skins.radius.title }}
+              </Title>
+              <Text size="sm" class="max-w-2xl text-muted-foreground">
+                {{ ui.skins.radius.text }}
+              </Text>
+            </Stack>
+            <Button variant="outline" size="sm" data-look-reset="radius" data-testid="reset-radius">
+              {{ ui.skins.radius.reset }}
+            </Button>
+          </Box>
+          <List tag="ul" class="grid gap-4 grid-cols-2 sm:grid-cols-5" data-testid="radius-list">
+            <ListItem v-for="r in RADII" :key="r.id" class="flex">
+              <ButtonPlain
+                type="button"
+                :class="'group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted ' +
+                  'aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary p-4'"
+                :aria-pressed="false"
+                :data-radius-pick="r.id"
+                :data-radius="r.value"
+                data-testid="radius-tile"
+              >
+                <Inline class="block h-16 w-full rounded bg-primary" data-radius-sample="" />
+                <Inline class="flex items-center justify-between gap-2  text-sm font-medium">
+                  <Inline>
+                    {{ r.name }}
+                  </Inline>
+                  <Inline class="hidden text-primary group-aria-pressed:inline-flex" data-testid="tile-check">
+                    <LucideIcon name="check" :size="16" />
+                  </Inline>
+                </Inline>
+              </ButtonPlain>
+            </ListItem>
+          </List>
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/SkinsScreen/NotfoundPage.vue b/apps/host-vue/xgen/screens/SkinsScreen/NotfoundPage.vue
new file mode 100644
index 0000000..0a4fa4f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/SkinsScreen/NotfoundPage.vue
@@ -0,0 +1,25 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/skins.json -->
+<!-- The notfound page of SkinsScreen. -->
+<script setup lang="ts">
+import { Block, Button, Container, Group, Stack, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <Block tag="section" aria-labelledby="page-title" data-testid="page">
+    <Container class="mx-auto w-full max-w-6xl px-4 py-10">
+      <Stack gap="4" align="stretch">
+        <Title :as="1" size="4xl" weight="bold" id="page-title">
+          {{ ui.site.notFound.title }}
+        </Title>
+        <Group>
+          <Button variant="default" size="default" href="#/">
+            {{ ui.skins.back }}
+          </Button>
+        </Group>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/SkinsScreen/ScreenHeader.vue b/apps/host-vue/xgen/screens/SkinsScreen/ScreenHeader.vue
new file mode 100644
index 0000000..80f9500
--- /dev/null
+++ b/apps/host-vue/xgen/screens/SkinsScreen/ScreenHeader.vue
@@ -0,0 +1,39 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/skins.json -->
+<!-- The ScreenHeader part of SkinsScreen: its own file, so each file of the screen opens on one Block. -->
+<script setup lang="ts">
+import { Block, Button, Container, Link, LinkPlain, NavBlock } from "@ui8kit/vue-ui";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <Block tag="header" class="border-b border-border">
+    <LinkPlain
+      href="#main-content"
+      :class="'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background ' +
+        'focus:px-4 focus:py-2 focus:text-sm focus:shadow'"
+      data-testid="skip-link"
+    >
+      {{ ui.site.header.skip }}
+    </LinkPlain>
+    <Container class="mx-auto w-full max-w-6xl px-4 flex flex-wrap items-center justify-between gap-4 py-3">
+      <Link href="#/" variant="default" class="text-lg font-bold" data-testid="brand">
+        {{ ui.skins.title }}
+      </Link>
+      <NavBlock :label="ui.skins.navLabel" class="flex flex-wrap items-center gap-4">
+        <Link href="/catalog/" variant="default" class="text-sm font-medium" data-testid="catalog-link">
+          {{ ui.catalog.title }}
+        </Link>
+        <Link href="/blocks/" variant="default" class="text-sm font-medium" data-testid="gallery-link">
+          {{ ui.blocks.title }}
+        </Link>
+        <Button variant="outline" size="sm" data-testid="theme-toggle" @click="() => actions.toggleTheme()">
+          {{ ui.theme.toggle }}
+        </Button>
+      </NavBlock>
+    </Container>
+  </Block>
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen.vue
new file mode 100644
index 0000000..c2b3384
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen.vue
@@ -0,0 +1,103 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!--
+  Sign-in and account pages: split, centered and minimal sign-in, sign-up, reset, magic link, social first, the
+  sign-up wizard, cards and the profile.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/vue-ui";
+import HomePage from "./ThemeAccountPortalScreen/HomePage.vue";
+import StartPage from "./ThemeAccountPortalScreen/StartPage.vue";
+import SignupPage from "./ThemeAccountPortalScreen/SignupPage.vue";
+import WelcomePage from "./ThemeAccountPortalScreen/WelcomePage.vue";
+import ResetPage from "./ThemeAccountPortalScreen/ResetPage.vue";
+import MagicPage from "./ThemeAccountPortalScreen/MagicPage.vue";
+import MinimalPage from "./ThemeAccountPortalScreen/MinimalPage.vue";
+import OptionsPage from "./ThemeAccountPortalScreen/OptionsPage.vue";
+import JoinPage from "./ThemeAccountPortalScreen/JoinPage.vue";
+import CardsPage from "./ThemeAccountPortalScreen/CardsPage.vue";
+import ProfilePage from "./ThemeAccountPortalScreen/ProfilePage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeAccountPortalScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"start","area":"start"},
+  {"path":"signup","area":"signup"},
+  {"path":"welcome","area":"welcome"},
+  {"path":"reset","area":"reset"},
+  {"path":"magic","area":"magic"},
+  {"path":"minimal","area":"minimal"},
+  {"path":"options","area":"options"},
+  {"path":"join","area":"join"},
+  {"path":"cards","area":"cards"},
+  {"path":"profile","area":"profile"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <StartPage v-if="route.area === 'start'" />
+    <SignupPage v-else-if="route.area === 'signup'" />
+    <WelcomePage v-else-if="route.area === 'welcome'" />
+    <ResetPage v-else-if="route.area === 'reset'" />
+    <MagicPage v-else-if="route.area === 'magic'" />
+    <MinimalPage v-else-if="route.area === 'minimal'" />
+    <OptionsPage v-else-if="route.area === 'options'" />
+    <JoinPage v-else-if="route.area === 'join'" />
+    <CardsPage v-else-if="route.area === 'cards'" />
+    <ProfilePage v-else-if="route.area === 'profile'" />
+    <HomePage v-else />
+  </Block>
+  <SitemapFooter
+    id="after-sitemap"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.vibe.sitemap.tagline"
+    :copyright="ui.vibe.sitemap.copyright"
+    :groups="sitemap"
+    :signup="{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: 'none',
+    }"
+    :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+    layout="row"
+    density="default"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/CardsPage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/CardsPage.vue
new file mode 100644
index 0000000..d37b701
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/CardsPage.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The cards page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { AuthCard, PageIntro, tpl, uniqLabel } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <PageIntro
+    id="cards-pagehead"
+    :title="ui.pages.accountPortal.cards.title"
+    :text="ui.pages.accountPortal.cards.text"
+    :cta="ui.pages.accountPortal.cards.cta"
+    href="#/profile"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <AuthCard
+    id="cards-auth-1"
+    :title="ui.auth.signin.title"
+    :text="ui.auth.signin.text"
+    :submit="ui.auth.signin.submit"
+    :switchText="ui.auth.signin.switchText"
+    :switchLink="ui.auth.signin.switchLink"
+    switchHref="#/"
+    :labels="ui.auth.labels"
+    mode="signin"
+    layout="card"
+    social="none"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signin))"
+  />
+  <AuthCard
+    id="cards-auth-2"
+    :title="ui.auth.signin.title"
+    :text="ui.auth.signin.text"
+    :submit="ui.auth.signin.submit"
+    :switchText="ui.auth.signin.switchText"
+    :switchLink="ui.auth.signin.switchLink"
+    switchHref="#/"
+    :labels="ui.auth.labels"
+    mode="signin"
+    layout="card"
+    social="show"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.social))"
+  />
+  <AuthCard
+    id="cards-auth-3"
+    :title="ui.auth.signup.title"
+    :text="ui.auth.signup.text"
+    :submit="ui.auth.signup.submit"
+    :switchText="ui.auth.signup.switchText"
+    :switchLink="ui.auth.signup.switchLink"
+    switchHref="#/"
+    :labels="ui.auth.labels"
+    mode="signup"
+    layout="plain"
+    social="show"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.auth, ui.blocks.variants.auth.signupSocial))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/HomePage.vue
new file mode 100644
index 0000000..af90ef3
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/HomePage.vue
@@ -0,0 +1,24 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The home page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { AuthLayout } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <AuthLayout
+    id="home-authpage"
+    :title="ui.pages.accountPortal.home.title"
+    :text="ui.pages.accountPortal.home.text"
+    :submit="ui.pages.accountPortal.home.cta"
+    :switchTo="{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: '#/' }"
+    :labels="ui.auth.labels"
+    :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+    layout="split"
+    side="end"
+    mode="signin"
+    social="none"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/JoinPage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/JoinPage.vue
new file mode 100644
index 0000000..ab0888d
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/JoinPage.vue
@@ -0,0 +1,54 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The join page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { PageIntro, SignupWizard, tpl, uniqLabel, type WizardStep } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { wizard as wizardEntries } from "@ui8kit/app-shared/data/wizard";
+
+const WIZARD_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "icon": "metadata.icon.value",
+  "fieldA": "metadata.fieldA.value",
+  "fieldB": "metadata.fieldB.value",
+} as const;
+
+const wizard = fromCodex<WizardStep>(wizardEntries, WIZARD_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="join-pagehead"
+    :title="ui.pages.accountPortal.join.title"
+    :text="ui.pages.accountPortal.join.text"
+    :cta="ui.pages.accountPortal.join.cta"
+    href="#/cards"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <SignupWizard
+    id="join-wizard-1"
+    :title="ui.vibe.wizard.title"
+    :steps="wizard"
+    :labels="ui.vibe.wizard.labels"
+    :current="1"
+    progress="bar"
+    layout="card"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.bar))"
+  />
+  <SignupWizard
+    id="join-wizard-2"
+    :title="ui.vibe.wizard.title"
+    :steps="wizard"
+    :labels="ui.vibe.wizard.labels"
+    :current="1"
+    progress="list"
+    layout="card"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.wizard, ui.blocks.variants.wizard.list))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/MagicPage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/MagicPage.vue
new file mode 100644
index 0000000..a51af51
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/MagicPage.vue
@@ -0,0 +1,24 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The magic page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { AuthLayout } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <AuthLayout
+    id="magic-authpage"
+    :title="ui.pages.accountPortal.magic.title"
+    :text="ui.pages.accountPortal.magic.text"
+    :submit="ui.pages.accountPortal.magic.cta"
+    :switchTo="{ text: ui.auth.magic.switchText, link: ui.auth.magic.switchLink, href: '#/' }"
+    :labels="ui.auth.labels"
+    :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+    layout="minimal"
+    side="end"
+    mode="magic"
+    social="none"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/MinimalPage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/MinimalPage.vue
new file mode 100644
index 0000000..35d0f56
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/MinimalPage.vue
@@ -0,0 +1,24 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The minimal page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { AuthLayout } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <AuthLayout
+    id="minimal-authpage"
+    :title="ui.pages.accountPortal.minimal.title"
+    :text="ui.pages.accountPortal.minimal.text"
+    :submit="ui.pages.accountPortal.minimal.cta"
+    :switchTo="{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: '#/' }"
+    :labels="ui.auth.labels"
+    :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+    layout="minimal"
+    side="end"
+    mode="signin"
+    social="none"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/OptionsPage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/OptionsPage.vue
new file mode 100644
index 0000000..59005e4
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/OptionsPage.vue
@@ -0,0 +1,24 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The options page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { AuthLayout } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <AuthLayout
+    id="options-authpage"
+    :title="ui.pages.accountPortal.options.title"
+    :text="ui.pages.accountPortal.options.text"
+    :submit="ui.pages.accountPortal.options.cta"
+    :switchTo="{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: '#/' }"
+    :labels="ui.auth.labels"
+    :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+    layout="split"
+    side="end"
+    mode="signin"
+    social="show"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/ProfilePage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/ProfilePage.vue
new file mode 100644
index 0000000..7cf769c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/ProfilePage.vue
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The profile page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { PageIntro, ProfileForm, tpl, uniqLabel } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <PageIntro
+    id="profile-pagehead"
+    :title="ui.pages.accountPortal.profile.title"
+    :text="ui.pages.accountPortal.profile.text"
+    :cta="ui.pages.accountPortal.profile.cta"
+    href="#/"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <ProfileForm
+    id="profile-profile-1"
+    :title="ui.account.profile.title"
+    :text="ui.account.profile.text"
+    :labels="ui.account.profile.labels"
+    layout="split"
+    avatar="show"
+    prefs="show"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.split))"
+  />
+  <ProfileForm
+    id="profile-profile-2"
+    :title="ui.account.profile.title"
+    :text="ui.account.profile.text"
+    :labels="ui.account.profile.labels"
+    layout="stacked"
+    avatar="show"
+    prefs="show"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.profile, ui.blocks.variants.profile.stacked))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/ResetPage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/ResetPage.vue
new file mode 100644
index 0000000..6d36746
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/ResetPage.vue
@@ -0,0 +1,24 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The reset page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { AuthLayout } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <AuthLayout
+    id="reset-authpage"
+    :title="ui.pages.accountPortal.reset.title"
+    :text="ui.pages.accountPortal.reset.text"
+    :submit="ui.pages.accountPortal.reset.cta"
+    :switchTo="{ text: ui.auth.reset.switchText, link: ui.auth.reset.switchLink, href: '#/' }"
+    :labels="ui.auth.labels"
+    :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+    layout="centered"
+    side="end"
+    mode="reset"
+    social="none"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/SignupPage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/SignupPage.vue
new file mode 100644
index 0000000..ebee4ed
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/SignupPage.vue
@@ -0,0 +1,24 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The signup page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { AuthLayout } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <AuthLayout
+    id="signup-authpage"
+    :title="ui.pages.accountPortal.signup.title"
+    :text="ui.pages.accountPortal.signup.text"
+    :submit="ui.pages.accountPortal.signup.cta"
+    :switchTo="{ text: ui.auth.signup.switchText, link: ui.auth.signup.switchLink, href: '#/' }"
+    :labels="ui.auth.labels"
+    :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+    layout="split"
+    side="end"
+    mode="signup"
+    social="none"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/StartPage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/StartPage.vue
new file mode 100644
index 0000000..e6e019f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/StartPage.vue
@@ -0,0 +1,24 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The start page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { AuthLayout } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <AuthLayout
+    id="start-authpage"
+    :title="ui.pages.accountPortal.start.title"
+    :text="ui.pages.accountPortal.start.text"
+    :submit="ui.pages.accountPortal.start.cta"
+    :switchTo="{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: '#/' }"
+    :labels="ui.auth.labels"
+    :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+    layout="split"
+    side="start"
+    mode="signin"
+    social="none"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/WelcomePage.vue b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/WelcomePage.vue
new file mode 100644
index 0000000..d0bd046
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeAccountPortalScreen/WelcomePage.vue
@@ -0,0 +1,24 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-account-portal.json -->
+<!-- The welcome page of ThemeAccountPortalScreen. -->
+<script setup lang="ts">
+import { AuthLayout } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <AuthLayout
+    id="welcome-authpage"
+    :title="ui.pages.accountPortal.welcome.title"
+    :text="ui.pages.accountPortal.welcome.text"
+    :submit="ui.pages.accountPortal.welcome.cta"
+    :switchTo="{ text: ui.auth.signin.switchText, link: ui.auth.signin.switchLink, href: '#/' }"
+    :labels="ui.auth.labels"
+    :visual="{ title: ui.vibe.authpage.visualTitle, text: ui.vibe.authpage.visualText }"
+    layout="centered"
+    side="end"
+    mode="signin"
+    social="first"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen.vue
new file mode 100644
index 0000000..ed68cf6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen.vue
@@ -0,0 +1,97 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!--
+  A shop: home with categories and products, the catalog, offers, a product page with details and reviews, the
+  cart, the checkout, delivery and pickup, and the orders.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/vue-ui";
+import HomePage from "./ThemeCommerceShopScreen/HomePage.vue";
+import CatalogPage from "./ThemeCommerceShopScreen/CatalogPage.vue";
+import BrowsePage from "./ThemeCommerceShopScreen/BrowsePage.vue";
+import OffersPage from "./ThemeCommerceShopScreen/OffersPage.vue";
+import ProductPage from "./ThemeCommerceShopScreen/ProductPage.vue";
+import CartPage from "./ThemeCommerceShopScreen/CartPage.vue";
+import CheckoutPage from "./ThemeCommerceShopScreen/CheckoutPage.vue";
+import DeliveryPage from "./ThemeCommerceShopScreen/DeliveryPage.vue";
+import OrdersPage from "./ThemeCommerceShopScreen/OrdersPage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeCommerceShopScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"catalog","area":"catalog"},
+  {"path":"browse","area":"browse"},
+  {"path":"offers","area":"offers"},
+  {"path":"product","area":"product"},
+  {"path":"cart","area":"cart"},
+  {"path":"checkout","area":"checkout"},
+  {"path":"delivery","area":"delivery"},
+  {"path":"orders","area":"orders"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <CatalogPage v-if="route.area === 'catalog'" />
+    <BrowsePage v-else-if="route.area === 'browse'" />
+    <OffersPage v-else-if="route.area === 'offers'" />
+    <ProductPage v-else-if="route.area === 'product'" />
+    <CartPage v-else-if="route.area === 'cart'" />
+    <CheckoutPage v-else-if="route.area === 'checkout'" />
+    <DeliveryPage v-else-if="route.area === 'delivery'" />
+    <OrdersPage v-else-if="route.area === 'orders'" />
+    <HomePage v-else />
+  </Block>
+  <SitemapFooter
+    id="after-sitemap"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.vibe.sitemap.tagline"
+    :copyright="ui.vibe.sitemap.copyright"
+    :groups="sitemap"
+    :signup="{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: 'none',
+    }"
+    :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+    layout="columns"
+    density="default"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/BrowsePage.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/BrowsePage.vue
new file mode 100644
index 0000000..c2f348e
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/BrowsePage.vue
@@ -0,0 +1,108 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The browse page of ThemeCommerceShopScreen. -->
+<script setup lang="ts">
+import {
+  CategoryNav,
+  PageIntro,
+  ProductGrid,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Product,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="browse-pagehead"
+    :title="ui.pages.commerceShop.browse.title"
+    :text="ui.pages.commerceShop.browse.text"
+    :cta="ui.pages.commerceShop.browse.cta"
+    href="#/offers"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <CategoryNav
+    :label="ui.commerce.nav.label"
+    :categories="categories"
+    current="category-all"
+    :tools="ui.commerce.tools"
+    layout="bar"
+    count="show"
+    icon="show"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.bar))"
+  />
+  <ProductGrid
+    id="browse-products-2"
+    :title="ui.commerce.products.title"
+    :products="products"
+    :labels="ui.commerce.productLabels"
+    :badges="ui.commerce.badges"
+    layout="grid"
+    cols="1-3"
+    ratio="4/3"
+    rating="show"
+    action="none"
+    tone="muted"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.browse))"
+  />
+  <ProductGrid
+    id="browse-products-3"
+    :title="ui.commerce.products.title"
+    :products="products"
+    :labels="ui.commerce.productLabels"
+    :badges="ui.commerce.badges"
+    layout="grid"
+    cols="1-3"
+    ratio="3/4"
+    rating="show"
+    action="button"
+    tone="default"
+    density="roomy"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.showcase))"
+  />
+  <ProductGrid
+    id="browse-products-4"
+    :title="ui.commerce.products.title"
+    :products="products"
+    :labels="ui.commerce.productLabels"
+    :badges="ui.commerce.badges"
+    layout="list"
+    cols="1-3"
+    ratio="4/3"
+    rating="show"
+    action="button"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.list))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/CartPage.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/CartPage.vue
new file mode 100644
index 0000000..f821245
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/CartPage.vue
@@ -0,0 +1,96 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The cart page of ThemeCommerceShopScreen. -->
+<script setup lang="ts">
+import {
+  CartList,
+  OrderSummary,
+  PageIntro,
+  ShoppingCart,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="cart-pagehead"
+    :title="ui.pages.commerceShop.cart.title"
+    :text="ui.pages.commerceShop.cart.text"
+    :cta="ui.pages.commerceShop.cart.cta"
+    href="#/checkout"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <ShoppingCart
+    id="cart-cartpage"
+    :title="ui.commerce.cartPage.title"
+    :lines="cart"
+    :rows="summary"
+    :promos="promos"
+    :labels="ui.commerce.cart"
+    :totals="ui.commerce.totals"
+    :actions="ui.commerce.cartPage"
+    layout="split"
+    promo="show"
+    progress="show"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartpage, ui.blocks.variants.cartpage.split))"
+  />
+  <CartList
+    id="cart-cart"
+    :title="ui.commerce.cart.title"
+    :lines="cart"
+    :empty="ui.empty.cart"
+    :labels="ui.commerce.cart"
+    layout="table"
+    media="image"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cart, ui.blocks.variants.cart.table))"
+  />
+  <OrderSummary
+    id="cart-summary"
+    :title="ui.commerce.summary.title"
+    :rows="summary"
+    :empty="ui.empty.summary"
+    :labels="ui.commerce.summary"
+    layout="card"
+    cta="show"
+    note="show"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.summary, ui.blocks.variants.summary.card))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/CatalogPage.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/CatalogPage.vue
new file mode 100644
index 0000000..741e17e
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/CatalogPage.vue
@@ -0,0 +1,99 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The catalog page of ThemeCommerceShopScreen. -->
+<script setup lang="ts">
+import {
+  CategoryNav,
+  PageTrail,
+  ProductGrid,
+  tpl,
+  uniqLabel,
+  type Category,
+  type NavLink,
+  type Product,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { crumbs as crumbsEntries } from "@ui8kit/app-shared/data/crumbs";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CRUMBS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const crumbs = fromCodex<NavLink>(crumbsEntries, CRUMBS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageTrail
+    id="catalog-pagetrail"
+    :title="ui.marketing.pageTrail.title"
+    :lead="ui.marketing.pageTrail.lead"
+    :badge="ui.marketing.pageTrail.badge"
+    :label="ui.marketing.pageTrail.label"
+    :crumbs="crumbs"
+    :extras="{
+      value: ui.marketing.pageTrail.value,
+      caption: ui.marketing.pageTrail.caption,
+      note: ui.marketing.pageTrail.note,
+      icon: 'package',
+      facts: stats,
+    }"
+    aside="figure"
+    tone="default"
+  />
+  <CategoryNav
+    :label="ui.commerce.nav.label"
+    :categories="categories"
+    current="category-all"
+    :tools="ui.commerce.tools"
+    layout="sidebar"
+    count="show"
+    icon="show"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.sidebar))"
+  />
+  <ProductGrid
+    id="catalog-products"
+    :title="ui.commerce.products.title"
+    :products="products"
+    :labels="ui.commerce.productLabels"
+    :badges="ui.commerce.badges"
+    layout="grid"
+    cols="1-4"
+    ratio="1/1"
+    rating="hide"
+    action="button"
+    tone="default"
+    density="compact"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.catalog))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.vue
new file mode 100644
index 0000000..55f6794
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/CheckoutPage.vue
@@ -0,0 +1,77 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The checkout page of ThemeCommerceShopScreen. -->
+<script setup lang="ts">
+import {
+  CheckoutForm,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Day,
+  type Payment,
+  type Promo,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+import { promos as promosEntries } from "@ui8kit/app-shared/data/promos";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { payments as paymentsEntries } from "@ui8kit/app-shared/data/payments";
+
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+const PROMOS_FIELDS = {"id":"id","code":"title"} as const;
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const PAYMENTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+const promos = fromCodex<Promo>(promosEntries, PROMOS_FIELDS, CODEX);
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const payments = fromCodex<Payment>(paymentsEntries, PAYMENTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="checkout-pagehead"
+    :title="ui.pages.commerceShop.checkout.title"
+    :text="ui.pages.commerceShop.checkout.text"
+    :cta="ui.pages.commerceShop.checkout.cta"
+    href="#/delivery"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <CheckoutForm
+    id="checkout-checkout"
+    :title="ui.commerce.checkout.title"
+    :days="days"
+    :payments="payments"
+    :lines="cart"
+    :rows="summary"
+    :promos="promos"
+    :labels="ui.commerce.checkout"
+    :totals="ui.commerce.totals"
+    layout="numbered"
+    summary="aside"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checkout, ui.blocks.variants.checkout.numbered))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.vue
new file mode 100644
index 0000000..e61f237
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/DeliveryPage.vue
@@ -0,0 +1,116 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The delivery page of ThemeCommerceShopScreen. -->
+<script setup lang="ts">
+import {
+  DeliveryInfo,
+  PageIntro,
+  SlotBoard,
+  StoreLocations,
+  ZoneTable,
+  tpl,
+  uniqLabel,
+  type Day,
+  type Feature,
+  type Store,
+  type Zone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { days as daysEntries } from "@ui8kit/app-shared/data/days";
+import { deliveryfacts as deliveryfactsEntries } from "@ui8kit/app-shared/data/deliveryfacts";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+import { stores as storesEntries } from "@ui8kit/app-shared/data/stores";
+
+const DAYS_FIELDS = {"id":"id","title":"title","note":"metadata.note.value","slots":"metadata.slots.value","closed":"metadata.closed.value"} as const;
+const DELIVERYFACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+const STORES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "kind": "metadata.store_kind.value",
+  "address": "metadata.address.value",
+  "hours": "metadata.hours.value",
+  "phone": "metadata.phone.value",
+  "note": "metadata.note.value",
+  "services": "metadata.services.value",
+} as const;
+
+const days = fromCodex<Day>(daysEntries, DAYS_FIELDS, CODEX);
+const deliveryfacts = fromCodex<Feature>(deliveryfactsEntries, DELIVERYFACTS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+const stores = fromCodex<Store>(storesEntries, STORES_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="delivery-pagehead"
+    :title="ui.pages.commerceShop.delivery.title"
+    :text="ui.pages.commerceShop.delivery.text"
+    :cta="ui.pages.commerceShop.delivery.cta"
+    href="#/orders"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <DeliveryInfo
+    id="delivery-delivery"
+    :title="ui.commerce.delivery.title"
+    :lead="ui.commerce.delivery.lead"
+    :facts="deliveryfacts"
+    :zones="zones"
+    :labels="ui.commerce.delivery"
+    layout="full"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.delivery, ui.blocks.variants.delivery.full))"
+  />
+  <ZoneTable
+    id="delivery-zones"
+    :title="ui.commerce.zones.title"
+    :lead="ui.commerce.zones.lead"
+    :zones="zones"
+    :empty="ui.empty.zones"
+    :labels="ui.commerce.zones"
+    layout="table"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.zones, ui.blocks.variants.zones.table))"
+  />
+  <SlotBoard
+    id="delivery-slots"
+    :title="ui.commerce.slots.title"
+    :lead="ui.commerce.slots.lead"
+    :days="days"
+    :empty="ui.empty.days"
+    :zone="zones.find((i) => i.id === 'zone-central')!"
+    :labels="ui.commerce.slots"
+    layout="split"
+    item="card"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.slots, ui.blocks.variants.slots.split))"
+  />
+  <StoreLocations
+    id="delivery-locations"
+    :title="ui.commerce.stores.title"
+    :lead="ui.commerce.stores.lead"
+    :stores="stores"
+    :empty="ui.empty.stores"
+    :kinds="ui.commerce.stores.kinds"
+    :labels="ui.commerce.stores"
+    layout="cards"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.locations, ui.blocks.variants.locations.cards))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/HomePage.vue
new file mode 100644
index 0000000..4d30a41
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/HomePage.vue
@@ -0,0 +1,154 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The home page of ThemeCommerceShopScreen. -->
+<script setup lang="ts">
+import {
+  CategoryNav,
+  CtaBand,
+  HeroClassic,
+  NewsletterForm,
+  ProductGrid,
+  ReviewList,
+  tpl,
+  uniqLabel,
+  type Category,
+  type CodeLine,
+  type Product,
+  type Review,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="home-hero"
+    :title="ui.pages.commerceShop.home.title"
+    :text="ui.pages.commerceShop.home.text"
+    :actions="{
+      cta: ui.pages.commerceShop.home.cta,
+      href: '#/catalog',
+      secondary: ui.cases.shop.hero.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'image',
+      side: 'start',
+    }"
+    layout="split"
+    scale="default"
+    tone="muted"
+    density="roomy"
+  />
+  <CategoryNav
+    :label="ui.commerce.nav.label"
+    :categories="categories"
+    current="category-all"
+    :tools="ui.commerce.tools"
+    layout="chips"
+    count="show"
+    icon="show"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.categories, ui.blocks.variants.categories.chips))"
+  />
+  <ProductGrid
+    id="home-products"
+    :title="ui.commerce.products.title"
+    :products="products"
+    :labels="ui.commerce.productLabels"
+    :badges="ui.commerce.badges"
+    layout="grid"
+    cols="1-4"
+    ratio="1/1"
+    rating="show"
+    action="button"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid4))"
+  />
+  <ReviewList
+    id="home-reviews"
+    :title="ui.commerce.reviews.title"
+    :reviews="reviews"
+    :labels="ui.commerce.reviewLabels"
+    layout="grid"
+    item="card"
+    avatar="none"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.grid))"
+  />
+  <NewsletterForm
+    id="home-newsletter"
+    :title="ui.promo.newsletter.title"
+    :text="ui.promo.newsletter.text"
+    :label="ui.promo.newsletter.label"
+    :submit="ui.promo.newsletter.submit"
+    :consent="ui.promo.newsletter.consent"
+    layout="stacked"
+    terms="hide"
+    tone="default"
+    align="center"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))"
+  />
+  <CtaBand
+    id="home-cta"
+    :title="ui.cases.shop.cta.title"
+    :text="ui.cases.shop.cta.text"
+    :actions="{
+      cta: ui.cases.shop.cta.cta,
+      href: '#/pricing',
+      secondary: ui.cases.shop.cta.secondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="split"
+    tone="default"
+    proof="none"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/OffersPage.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/OffersPage.vue
new file mode 100644
index 0000000..71e158e
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/OffersPage.vue
@@ -0,0 +1,116 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The offers page of ThemeCommerceShopScreen. -->
+<script setup lang="ts">
+import {
+  CartDrawer,
+  ProductGrid,
+  StoreHero,
+  UspStrip,
+  tpl,
+  uniqLabel,
+  type CartLine,
+  type Feature,
+  type Product,
+  type SummaryRow,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { perks as perksEntries } from "@ui8kit/app-shared/data/perks";
+import { cart as cartEntries } from "@ui8kit/app-shared/data/cart";
+import { summary as summaryEntries } from "@ui8kit/app-shared/data/summary";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const PERKS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CART_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "variant": "metadata.variant.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "qty": "metadata.qty.value",
+} as const;
+const SUMMARY_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "amount": "metadata.amount.value",
+  "currency": "metadata.currency.value",
+  "strong": "metadata.strong.value",
+} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const perks = fromCodex<Feature>(perksEntries, PERKS_FIELDS, CODEX);
+const cart = fromCodex<CartLine>(cartEntries, CART_FIELDS, CODEX);
+const summary = fromCodex<SummaryRow>(summaryEntries, SUMMARY_FIELDS, CODEX);
+</script>
+
+<template>
+  <StoreHero
+    id="offers-storehero"
+    :title="ui.commerce.storeHero.title"
+    :lead="ui.commerce.storeHero.lead"
+    :badge="ui.commerce.storeHero.badge"
+    :perks="perks"
+    :card="ui.commerce.storeHero.card"
+    :actions="{
+      mode: 'two',
+      cta: ui.commerce.storeHero.cta,
+      href: '#/catalog',
+      secondary: ui.commerce.storeHero.secondary,
+      secondaryHref: '#/delivery',
+    }"
+    layout="overlay"
+    mediaSide="end"
+    tone="default"
+  />
+  <UspStrip
+    id="offers-usp"
+    :perks="perks"
+    :empty="ui.empty.perks"
+    layout="strip"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usp, ui.blocks.variants.usp.strip))"
+  />
+  <ProductGrid
+    id="offers-products"
+    :title="ui.commerce.products.title"
+    :products="products"
+    :labels="ui.commerce.productLabels"
+    :badges="ui.commerce.badges"
+    layout="rail"
+    cols="1-3"
+    ratio="1/1"
+    rating="hide"
+    action="button"
+    tone="default"
+    density="compact"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.railCompact))"
+  />
+  <CartDrawer
+    id="offers-cartdrawer"
+    :lines="cart"
+    :rows="summary"
+    :labels="ui.commerce.cart"
+    :drawer="ui.commerce.drawer"
+    state="filled"
+    media="image"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cartdrawer, ui.blocks.variants.cartdrawer.filled))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/OrdersPage.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/OrdersPage.vue
new file mode 100644
index 0000000..a0a390c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/OrdersPage.vue
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The orders page of ThemeCommerceShopScreen. -->
+<script setup lang="ts">
+import { OrderTable, PageIntro, tpl, uniqLabel, type Order } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { orders as ordersEntries } from "@ui8kit/app-shared/data/orders";
+
+const ORDERS_FIELDS = {
+  "id": "id",
+  "number": "title",
+  "date": "metadata.date.value|date",
+  "total": "metadata.total.value",
+  "currency": "metadata.currency.value",
+  "status": "metadata.order_status.value",
+  "items": "metadata.items.value",
+} as const;
+
+const orders = fromCodex<Order>(ordersEntries, ORDERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="orders-pagehead"
+    :title="ui.pages.commerceShop.orders.title"
+    :text="ui.pages.commerceShop.orders.text"
+    :cta="ui.pages.commerceShop.orders.cta"
+    href="#/"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <OrderTable
+    id="orders-orders-1"
+    :title="ui.commerce.orders.title"
+    :orders="orders"
+    :empty="ui.empty.orders"
+    :statuses="ui.status"
+    :labels="ui.commerce.orders"
+    layout="table"
+    pager="show"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.table))"
+  />
+  <OrderTable
+    id="orders-orders-2"
+    :title="ui.commerce.orders.title"
+    :orders="orders"
+    :empty="ui.empty.orders"
+    :statuses="ui.status"
+    :labels="ui.commerce.orders"
+    layout="cards"
+    pager="show"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.orders, ui.blocks.variants.orders.cards))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/ProductPage.vue b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/ProductPage.vue
new file mode 100644
index 0000000..15bde56
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeCommerceShopScreen/ProductPage.vue
@@ -0,0 +1,108 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-commerce-shop.json -->
+<!-- The product page of ThemeCommerceShopScreen. -->
+<script setup lang="ts">
+import {
+  ProductDetail,
+  ProductGrid,
+  ProductInfo,
+  ReviewList,
+  tpl,
+  uniqLabel,
+  type Detail,
+  type Product,
+  type Review,
+  type Spec,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { products as productsEntries } from "@ui8kit/app-shared/data/products";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { details as detailsEntries } from "@ui8kit/app-shared/data/details";
+import { specs as specsEntries } from "@ui8kit/app-shared/data/specs";
+
+const PRODUCTS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "summary": "metadata.summary.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "rating": "metadata.rating.value",
+  "reviews": "metadata.reviews.value",
+  "badge": "metadata.badge.value",
+  "category": "terms|term:product_category",
+  "inStock": "metadata.inStock.value",
+  "compareAt": "metadata.compare_at.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const DETAILS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+const SPECS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+
+const products = fromCodex<Product>(productsEntries, PRODUCTS_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const details = fromCodex<Detail>(detailsEntries, DETAILS_FIELDS, CODEX);
+const specs = fromCodex<Spec>(specsEntries, SPECS_FIELDS, CODEX);
+</script>
+
+<template>
+  <ProductDetail
+    id="product-product"
+    :product="products.find((i) => i.id === 'product-lamp')!"
+    :labels="ui.commerce.detail"
+    :badges="ui.commerce.badges"
+    layout="split"
+    mediaSide="start"
+    thumbs="below"
+    buy="full"
+    tone="default"
+    density="default"
+  />
+  <ProductInfo
+    id="product-productinfo"
+    :title="ui.commerce.info.title"
+    :details="details"
+    :specs="specs"
+    :labels="ui.commerce.info"
+    layout="split"
+    expand="first"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.productinfo, ui.blocks.variants.productinfo.split))"
+  />
+  <ReviewList
+    id="product-reviews"
+    :title="ui.commerce.reviews.title"
+    :reviews="reviews"
+    :labels="ui.commerce.reviewLabels"
+    layout="list"
+    item="card"
+    avatar="none"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.reviews, ui.blocks.variants.reviews.list))"
+  />
+  <ProductGrid
+    id="product-products"
+    :title="ui.commerce.products.title"
+    :products="products"
+    :labels="ui.commerce.productLabels"
+    :badges="ui.commerce.badges"
+    layout="grid"
+    cols="1-3"
+    ratio="4/3"
+    rating="show"
+    action="button"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.products, ui.blocks.variants.products.grid3))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeContentBlogScreen.vue b/apps/host-vue/xgen/screens/ThemeContentBlogScreen.vue
new file mode 100644
index 0000000..67ef7ba
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeContentBlogScreen.vue
@@ -0,0 +1,91 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!--
+  A blog: a magazine front page, filtered and plain lists, and articles with a table of contents, a single
+  column or no cover.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/vue-ui";
+import HomePage from "./ThemeContentBlogScreen/HomePage.vue";
+import ArticlesPage from "./ThemeContentBlogScreen/ArticlesPage.vue";
+import ArchivePage from "./ThemeContentBlogScreen/ArchivePage.vue";
+import PostPage from "./ThemeContentBlogScreen/PostPage.vue";
+import StoryPage from "./ThemeContentBlogScreen/StoryPage.vue";
+import EssayPage from "./ThemeContentBlogScreen/EssayPage.vue";
+import PlainPage from "./ThemeContentBlogScreen/PlainPage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeContentBlogScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"articles","area":"articles"},
+  {"path":"archive","area":"archive"},
+  {"path":"post","area":"post"},
+  {"path":"story","area":"story"},
+  {"path":"essay","area":"essay"},
+  {"path":"plain","area":"plain"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <ArticlesPage v-if="route.area === 'articles'" />
+    <ArchivePage v-else-if="route.area === 'archive'" />
+    <PostPage v-else-if="route.area === 'post'" />
+    <StoryPage v-else-if="route.area === 'story'" />
+    <EssayPage v-else-if="route.area === 'essay'" />
+    <PlainPage v-else-if="route.area === 'plain'" />
+    <HomePage v-else />
+  </Block>
+  <SitemapFooter
+    id="after-sitemap"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.vibe.sitemap.tagline"
+    :copyright="ui.vibe.sitemap.copyright"
+    :groups="sitemap"
+    :signup="{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: 'none',
+    }"
+    :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+    layout="columns"
+    density="compact"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeContentBlogScreen/ArchivePage.vue b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/ArchivePage.vue
new file mode 100644
index 0000000..8845e91
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/ArchivePage.vue
@@ -0,0 +1,86 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The archive page of ThemeContentBlogScreen. -->
+<script setup lang="ts">
+import { PageIntro, PostGrid, tpl, uniqLabel, type Post, type PostTopic } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="archive-pagehead"
+    :title="ui.pages.contentBlog.archive.title"
+    :text="ui.pages.contentBlog.archive.text"
+    :cta="ui.pages.contentBlog.archive.cta"
+    href="#/post"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <PostGrid
+    id="archive-posts-1"
+    :title="ui.content.posts.title"
+    :posts="posts"
+    :labels="ui.content.labels"
+    :filter="{ topics, label: ui.vibe.posts.topics, topic: '', mode: 'none' }"
+    :action="{ label: ui.content.posts.action, href: '#/' }"
+    layout="list"
+    cols="1-3"
+    media="image"
+    meta="full"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.list))"
+  />
+  <PostGrid
+    id="archive-posts-2"
+    :title="ui.content.posts.title"
+    :posts="posts"
+    :labels="ui.content.labels"
+    :filter="{ topics, label: ui.vibe.posts.topics, topic: '', mode: 'none' }"
+    :action="{ label: ui.content.posts.action, href: '#/' }"
+    layout="grid"
+    cols="1-3"
+    media="none"
+    meta="short"
+    tone="muted"
+    density="compact"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.digest))"
+  />
+  <PostGrid
+    id="archive-posts-3"
+    :title="ui.content.posts.title"
+    :posts="posts"
+    :labels="ui.content.labels"
+    :filter="{ topics, label: ui.vibe.posts.topics, topic: '', mode: 'none' }"
+    :action="{ label: ui.content.posts.action, href: '#/' }"
+    layout="grid"
+    cols="1-3"
+    media="none"
+    meta="full"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.textOnly))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeContentBlogScreen/ArticlesPage.vue b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/ArticlesPage.vue
new file mode 100644
index 0000000..ce33d72
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/ArticlesPage.vue
@@ -0,0 +1,71 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The articles page of ThemeContentBlogScreen. -->
+<script setup lang="ts">
+import { PageIntro, PostGrid, tpl, uniqLabel, type Post, type PostTopic } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="articles-pagehead"
+    :title="ui.pages.contentBlog.articles.title"
+    :text="ui.pages.contentBlog.articles.text"
+    :cta="ui.pages.contentBlog.articles.cta"
+    href="#/archive"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <PostGrid
+    id="articles-posts-1"
+    :title="ui.content.posts.title"
+    :posts="posts"
+    :labels="ui.content.labels"
+    :filter="{ topics, label: ui.vibe.posts.topics, topic: 'Design', mode: 'topics' }"
+    :action="{ label: ui.content.posts.action, href: '#/' }"
+    layout="grid"
+    cols="1-3"
+    media="image"
+    meta="full"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.filters))"
+  />
+  <PostGrid
+    id="articles-posts-2"
+    :title="ui.content.posts.title"
+    :posts="posts"
+    :labels="ui.content.labels"
+    :filter="{ topics, label: ui.vibe.posts.topics, topic: '', mode: 'none' }"
+    :action="{ label: ui.content.posts.action, href: '#/' }"
+    layout="grid"
+    cols="1-2"
+    media="image"
+    meta="full"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.twoUp))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeContentBlogScreen/EssayPage.vue b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/EssayPage.vue
new file mode 100644
index 0000000..ebb4dee
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/EssayPage.vue
@@ -0,0 +1,72 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The essay page of ThemeContentBlogScreen. -->
+<script setup lang="ts">
+import {
+  ArticleBody,
+  NewsletterForm,
+  PostHeader,
+  tpl,
+  uniqLabel,
+  type Post,
+  type Section,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<template>
+  <PostHeader
+    id="essay-postheader"
+    :post="posts.find((i) => i.id === 'post-static-first')!"
+    :labels="ui.content.labels"
+    layout="center"
+    cover="show"
+    meta="full"
+    tone="default"
+  />
+  <ArticleBody
+    id="essay-article"
+    :title="ui.vibe.article.title"
+    :sections="article"
+    :empty="ui.empty.sections"
+    :tocTitle="ui.vibe.article.toc"
+    layout="column"
+    quotes="show"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))"
+  />
+  <NewsletterForm
+    id="essay-newsletter"
+    :title="ui.promo.newsletter.title"
+    :text="ui.promo.newsletter.text"
+    :label="ui.promo.newsletter.label"
+    :submit="ui.promo.newsletter.submit"
+    :consent="ui.promo.newsletter.consent"
+    layout="inline"
+    terms="hide"
+    tone="default"
+    align="center"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeContentBlogScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/HomePage.vue
new file mode 100644
index 0000000..d4a89bd
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/HomePage.vue
@@ -0,0 +1,93 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The home page of ThemeContentBlogScreen. -->
+<script setup lang="ts">
+import {
+  NewsletterForm,
+  PageIntro,
+  PostGrid,
+  PostShowcase,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="home-pagehead"
+    :title="ui.pages.contentBlog.home.title"
+    :text="ui.pages.contentBlog.home.text"
+    :cta="ui.pages.contentBlog.home.cta"
+    href="#/articles"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <PostGrid
+    id="home-posts"
+    :title="ui.content.posts.title"
+    :posts="posts"
+    :labels="ui.content.labels"
+    :filter="{ topics, label: ui.vibe.posts.topics, topic: '', mode: 'none' }"
+    :action="{ label: ui.content.posts.action, href: '#/' }"
+    layout="magazine"
+    cols="1-3"
+    media="image"
+    meta="full"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.magazine))"
+  />
+  <PostShowcase
+    id="home-postshowcase"
+    :title="ui.content.postShowcase.title"
+    :lead="ui.content.postShowcase.lead"
+    :badge="ui.content.postShowcase.badge"
+    :posts="posts"
+    :empty="ui.empty.posts"
+    :labels="ui.content.labels"
+    :action="{ label: ui.content.postShowcase.action, href: '#/articles' }"
+    layout="intro"
+    cols="3"
+    mediaSide="start"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.postshowcase, ui.blocks.variants.postshowcase.introCards))"
+  />
+  <NewsletterForm
+    id="home-newsletter"
+    :title="ui.promo.newsletter.title"
+    :text="ui.promo.newsletter.text"
+    :label="ui.promo.newsletter.label"
+    :submit="ui.promo.newsletter.submit"
+    :consent="ui.promo.newsletter.consent"
+    layout="stacked"
+    terms="hide"
+    tone="default"
+    align="center"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.stacked))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeContentBlogScreen/PlainPage.vue b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/PlainPage.vue
new file mode 100644
index 0000000..25e6c5b
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/PlainPage.vue
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The plain page of ThemeContentBlogScreen. -->
+<script setup lang="ts">
+import {
+  ArticleBody,
+  PostGrid,
+  PostHeader,
+  tpl,
+  uniqLabel,
+  type Post,
+  type PostTopic,
+  type Section,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { topics as topicsEntries } from "@ui8kit/app-shared/data/topics";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const TOPICS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const topics = fromCodex<PostTopic>(topicsEntries, TOPICS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<template>
+  <PostHeader
+    id="plain-postheader"
+    :post="posts.find((i) => i.id === 'post-static-first')!"
+    :labels="ui.content.labels"
+    layout="start"
+    cover="hide"
+    meta="full"
+    tone="default"
+  />
+  <ArticleBody
+    id="plain-article"
+    :title="ui.vibe.article.title"
+    :sections="article"
+    :empty="ui.empty.sections"
+    :tocTitle="ui.vibe.article.toc"
+    layout="column"
+    quotes="hide"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.plain))"
+  />
+  <PostGrid
+    id="plain-posts"
+    :title="ui.content.posts.title"
+    :posts="posts"
+    :labels="ui.content.labels"
+    :filter="{ topics, label: ui.vibe.posts.topics, topic: '', mode: 'none' }"
+    :action="{ label: ui.content.posts.action, href: '#/' }"
+    layout="grid"
+    cols="1-3"
+    media="image"
+    meta="full"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.posts, ui.blocks.variants.posts.grid))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeContentBlogScreen/PostPage.vue b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/PostPage.vue
new file mode 100644
index 0000000..503e4ca
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/PostPage.vue
@@ -0,0 +1,51 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The post page of ThemeContentBlogScreen. -->
+<script setup lang="ts">
+import { ArticleBody, PostHeader, tpl, uniqLabel, type Post, type Section } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+</script>
+
+<template>
+  <PostHeader
+    id="post-postheader"
+    :post="posts.find((i) => i.id === 'post-static-first')!"
+    :labels="ui.content.labels"
+    layout="start"
+    cover="show"
+    meta="full"
+    tone="default"
+  />
+  <ArticleBody
+    id="post-article"
+    :title="ui.vibe.article.title"
+    :sections="article"
+    :empty="ui.empty.sections"
+    :tocTitle="ui.vibe.article.toc"
+    layout="toc"
+    quotes="show"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.toc))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeContentBlogScreen/StoryPage.vue b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/StoryPage.vue
new file mode 100644
index 0000000..c8cb502
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeContentBlogScreen/StoryPage.vue
@@ -0,0 +1,75 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-content-blog.json -->
+<!-- The story page of ThemeContentBlogScreen. -->
+<script setup lang="ts">
+import {
+  ArticleBody,
+  PostSplit,
+  tpl,
+  uniqLabel,
+  type NavLink,
+  type Post,
+  type Section,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { article as articleEntries } from "@ui8kit/app-shared/data/article";
+import { posttags as posttagsEntries } from "@ui8kit/app-shared/data/posttags";
+import { outline as outlineEntries } from "@ui8kit/app-shared/data/outline";
+
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const ARTICLE_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","quote":"metadata.quote.value"} as const;
+const POSTTAGS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const OUTLINE_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const article = fromCodex<Section>(articleEntries, ARTICLE_FIELDS, CODEX);
+const posttags = fromCodex<NavLink>(posttagsEntries, POSTTAGS_FIELDS, CODEX);
+const outline = fromCodex<NavLink>(outlineEntries, OUTLINE_FIELDS, CODEX);
+</script>
+
+<template>
+  <PostSplit
+    id="story-postsplit"
+    :post="posts.find((i) => i.id === 'post-static-first')!"
+    :labels="ui.content.postSplit.labels"
+    :extras="{
+      role: ui.content.postSplit.role,
+      bio: ui.content.postSplit.bio,
+      views: ui.content.postSplit.views,
+      likes: ui.content.postSplit.likes,
+      tags: posttags,
+      outline,
+    }"
+    layout="split"
+    mediaSide="end"
+    author="card"
+    cover="wide"
+    actions="pair"
+    tone="muted"
+  />
+  <ArticleBody
+    id="story-article"
+    :title="ui.vibe.article.title"
+    :sections="article"
+    :empty="ui.empty.sections"
+    :tocTitle="ui.vibe.article.toc"
+    layout="column"
+    quotes="show"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.article, ui.blocks.variants.article.column))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen.vue b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen.vue
new file mode 100644
index 0000000..63b3733
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen.vue
@@ -0,0 +1,88 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!--
+  A console: overview with counters, chart and activity, a kanban board, app shells with sidebar, top bar and
+  panes, dashboard shells, navigation, and empty and loading states.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/vue-ui";
+import HomePage from "./ThemeDashboardConsoleScreen/HomePage.vue";
+import BoardPage from "./ThemeDashboardConsoleScreen/BoardPage.vue";
+import WorkspacePage from "./ThemeDashboardConsoleScreen/WorkspacePage.vue";
+import ShellsPage from "./ThemeDashboardConsoleScreen/ShellsPage.vue";
+import LayoutsPage from "./ThemeDashboardConsoleScreen/LayoutsPage.vue";
+import StatesPage from "./ThemeDashboardConsoleScreen/StatesPage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeDashboardConsoleScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"board","area":"board"},
+  {"path":"workspace","area":"workspace"},
+  {"path":"shells","area":"shells"},
+  {"path":"layouts","area":"layouts"},
+  {"path":"states","area":"states"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <BoardPage v-if="route.area === 'board'" />
+    <WorkspacePage v-else-if="route.area === 'workspace'" />
+    <ShellsPage v-else-if="route.area === 'shells'" />
+    <LayoutsPage v-else-if="route.area === 'layouts'" />
+    <StatesPage v-else-if="route.area === 'states'" />
+    <HomePage v-else />
+  </Block>
+  <SitemapFooter
+    id="after-sitemap"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.vibe.sitemap.tagline"
+    :copyright="ui.vibe.sitemap.copyright"
+    :groups="sitemap"
+    :signup="{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: 'none',
+    }"
+    :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+    layout="columns"
+    density="compact"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.vue b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.vue
new file mode 100644
index 0000000..f53e9aa
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/BoardPage.vue
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The board page of ThemeDashboardConsoleScreen. -->
+<script setup lang="ts">
+import { KanbanBoard, PageIntro, tpl, uniqLabel, type BoardCard, type Lane } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { lanes as lanesEntries } from "@ui8kit/app-shared/data/lanes";
+import { cards as cardsEntries } from "@ui8kit/app-shared/data/cards";
+
+const LANES_FIELDS = {"id":"id","key":"slug","title":"title"} as const;
+const CARDS_FIELDS = {"id":"id","lane":"metadata.lane.value","title":"title","tag":"metadata.tag.value","who":"metadata.who.value"} as const;
+
+const lanes = fromCodex<Lane>(lanesEntries, LANES_FIELDS, CODEX);
+const cards = fromCodex<BoardCard>(cardsEntries, CARDS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="board-pagehead"
+    :title="ui.pages.dashboardConsole.board.title"
+    :text="ui.pages.dashboardConsole.board.text"
+    :cta="ui.pages.dashboardConsole.board.cta"
+    href="#/workspace"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <KanbanBoard
+    id="board-kanban-1"
+    :title="ui.vibe.kanban.title"
+    :lanes="lanes"
+    :empty="ui.empty.lanes"
+    :cards="cards"
+    :countLabel="ui.vibe.kanban.count"
+    card="detail"
+    cols="3"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.detail))"
+  />
+  <KanbanBoard
+    id="board-kanban-2"
+    :title="ui.vibe.kanban.title"
+    :lanes="lanes"
+    :empty="ui.empty.lanes"
+    :cards="cards"
+    :countLabel="ui.vibe.kanban.count"
+    card="detail"
+    cols="2"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.kanban, ui.blocks.variants.kanban.twoCols))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/HomePage.vue
new file mode 100644
index 0000000..478fb02
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/HomePage.vue
@@ -0,0 +1,112 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The home page of ThemeDashboardConsoleScreen. -->
+<script setup lang="ts">
+import {
+  ActivityFeed,
+  ChartPanel,
+  DashboardOverview,
+  MetricRow,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type Event,
+  type Point,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="home-pagehead"
+    :title="ui.pages.dashboardConsole.home.title"
+    :text="ui.pages.dashboardConsole.home.text"
+    :cta="ui.pages.dashboardConsole.home.cta"
+    href="#/board"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <DashboardOverview
+    id="home-overview"
+    :title="ui.vibe.overview.title"
+    :metrics="metrics"
+    :chart="{
+      title: ui.dashboard.chart.title,
+      text: ui.dashboard.chart.text,
+      summary: ui.dashboard.chart.summary,
+      series,
+    }"
+    :activity="{
+      title: ui.dashboard.activity.title,
+      text: ui.dashboard.activity.text,
+      events: activity,
+    }"
+    layout="split"
+    cols="4"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.split))"
+  />
+  <MetricRow
+    id="home-metrics"
+    :title="ui.dashboard.metrics.title"
+    :metrics="metrics"
+    :empty="ui.empty.metrics"
+    cols="4"
+    item="tile"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.tiles))"
+  />
+  <ChartPanel
+    id="home-chart"
+    :title="ui.dashboard.chart.title"
+    :text="ui.dashboard.chart.text"
+    :series="series"
+    :empty="ui.empty.series"
+    :summary="ui.dashboard.chart.summary"
+    :percent="ui.dashboard.chart.percent"
+    chart="bars"
+    size="default"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.bars))"
+  />
+  <ActivityFeed
+    id="home-activity"
+    :title="ui.dashboard.activity.title"
+    :text="ui.dashboard.activity.text"
+    :events="activity"
+    :empty="ui.empty.activity"
+    layout="timeline"
+    density="default"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.activity, ui.blocks.variants.activity.timeline))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.vue b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.vue
new file mode 100644
index 0000000..f26ff42
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/LayoutsPage.vue
@@ -0,0 +1,142 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The layouts page of ThemeDashboardConsoleScreen. -->
+<script setup lang="ts">
+import {
+  BottomNav,
+  ChartPanel,
+  DashboardOverview,
+  MetricRow,
+  PageIntro,
+  SidebarNav,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { tabs as tabsEntries } from "@ui8kit/app-shared/data/tabs";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const TABS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const tabs = fromCodex<NavLink>(tabsEntries, TABS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="layouts-pagehead"
+    :title="ui.pages.dashboardConsole.layouts.title"
+    :text="ui.pages.dashboardConsole.layouts.text"
+    :cta="ui.pages.dashboardConsole.layouts.cta"
+    href="#/states"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <SidebarNav
+    :label="ui.vibe.sidebar.label"
+    :brand="ui.site.header.brand"
+    :links="sidenav"
+    current="item-orders"
+    :userName="ui.vibe.sidebar.userName"
+    :userEmail="ui.vibe.sidebar.userEmail"
+    width="full"
+    user="show"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.full))"
+  />
+  <SidebarNav
+    :label="ui.vibe.sidebar.label"
+    :brand="ui.site.header.brand"
+    :links="sidenav"
+    current="item-orders"
+    :userName="ui.vibe.sidebar.userName"
+    :userEmail="ui.vibe.sidebar.userEmail"
+    width="compact"
+    user="show"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sidenav, ui.blocks.variants.sidenav.compact))"
+  />
+  <BottomNav
+    :label="ui.vibe.bottom.label"
+    :tabs="tabs"
+    current="tab-explore"
+    labels="show"
+    position="static"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bottomnav, ui.blocks.variants.bottomnav.labels))"
+  />
+  <MetricRow
+    id="layouts-metrics"
+    :title="ui.dashboard.metrics.title"
+    :metrics="metrics"
+    :empty="ui.empty.metrics"
+    cols="4"
+    item="compact"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.metrics, ui.blocks.variants.metrics.compact))"
+  />
+  <ChartPanel
+    id="layouts-chart"
+    :title="ui.dashboard.chart.title"
+    :text="ui.dashboard.chart.text"
+    :series="series"
+    :empty="ui.empty.series"
+    :summary="ui.dashboard.chart.summary"
+    :percent="ui.dashboard.chart.percent"
+    chart="meters"
+    size="default"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.chart, ui.blocks.variants.chart.meters))"
+  />
+  <DashboardOverview
+    id="layouts-overview"
+    :title="ui.vibe.overview.title"
+    :metrics="metrics"
+    :chart="{
+      title: ui.dashboard.chart.title,
+      text: ui.dashboard.chart.text,
+      summary: ui.dashboard.chart.summary,
+      series,
+    }"
+    :activity="{
+      title: ui.dashboard.activity.title,
+      text: ui.dashboard.activity.text,
+      events: activity,
+    }"
+    layout="stacked"
+    cols="4"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.overview, ui.blocks.variants.overview.stacked))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.vue b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.vue
new file mode 100644
index 0000000..5e66cb7
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/ShellsPage.vue
@@ -0,0 +1,114 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The shells page of ThemeDashboardConsoleScreen. -->
+<script setup lang="ts">
+import { DashboardShell, PageIntro, tpl, uniqLabel, type NavLink } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+import { subnav as subnavEntries } from "@ui8kit/app-shared/data/subnav";
+import { helplinks as helplinksEntries } from "@ui8kit/app-shared/data/helplinks";
+
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const SUBNAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const HELPLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+const subnav = fromCodex<NavLink>(subnavEntries, SUBNAV_FIELDS, CODEX);
+const helplinks = fromCodex<NavLink>(helplinksEntries, HELPLINKS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="shells-pagehead"
+    :title="ui.pages.dashboardConsole.shells.title"
+    :text="ui.pages.dashboardConsole.shells.text"
+    :cta="ui.pages.dashboardConsole.shells.cta"
+    href="#/layouts"
+    align="start"
+    tone="muted"
+    density="compact"
+  />
+  <DashboardShell
+    id="shells-dashshell-1"
+    :title="ui.dashboard.shells.title"
+    :nav="{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: 'item-orders',
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: 'subitem-all',
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }"
+    topbar="full"
+    search="show"
+    sidebar="wide"
+    side="start"
+    footer="none"
+    content="grid"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.classic))"
+  />
+  <DashboardShell
+    id="shells-dashshell-2"
+    :title="ui.dashboard.shells.title"
+    :nav="{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: 'item-orders',
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: 'subitem-all',
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }"
+    topbar="inset"
+    search="hide"
+    sidebar="twolevel"
+    side="start"
+    footer="inset"
+    content="list"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.twoLevel))"
+  />
+  <DashboardShell
+    id="shells-dashshell-3"
+    :title="ui.dashboard.shells.title"
+    :nav="{
+      label: ui.dashboard.shells.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: 'item-orders',
+      subTitle: ui.dashboard.shells.subTitle,
+      sub: subnav,
+      subCurrent: 'subitem-all',
+      search: ui.dashboard.shells.search,
+      shortcut: ui.dashboard.shells.shortcut,
+      expand: ui.dashboard.shells.expand,
+      userName: ui.dashboard.shells.userName,
+      copyright: ui.dashboard.shells.copyright,
+      footerLabel: ui.dashboard.shells.footerLabel,
+      footer: helplinks,
+    }"
+    topbar="full"
+    search="show"
+    sidebar="wide"
+    side="end"
+    footer="full"
+    content="split"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.dashshell, ui.blocks.variants.dashshell.end))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.vue b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.vue
new file mode 100644
index 0000000..d8619e3
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/StatesPage.vue
@@ -0,0 +1,70 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The states page of ThemeDashboardConsoleScreen. -->
+<script setup lang="ts">
+import { EmptyPanel, PageIntro, SkeletonLayout, tpl, uniqLabel, type Line } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { placeholders as placeholdersEntries } from "@ui8kit/app-shared/data/placeholders";
+
+const PLACEHOLDERS_FIELDS = {"id":"id"} as const;
+
+const placeholders = fromCodex<Line>(placeholdersEntries, PLACEHOLDERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="states-pagehead"
+    :title="ui.pages.dashboardConsole.states.title"
+    :text="ui.pages.dashboardConsole.states.text"
+    :cta="ui.pages.dashboardConsole.states.cta"
+    href="#/"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <EmptyPanel
+    id="states-empty-1"
+    :title="ui.dashboard.empty.tour.title"
+    :text="ui.dashboard.empty.tour.text"
+    :cta="ui.dashboard.empty.tour.cta"
+    ctaHref="#/"
+    layout="card"
+    actions="button"
+    visual="image"
+    size="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.illustrated))"
+  />
+  <EmptyPanel
+    id="states-empty-2"
+    :title="ui.dashboard.empty.orders.title"
+    :text="ui.dashboard.empty.orders.text"
+    :cta="ui.dashboard.empty.orders.cta"
+    ctaHref="#/"
+    layout="card"
+    actions="button"
+    visual="icon"
+    size="default"
+    icon="shopping-bag"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.orders))"
+  />
+  <SkeletonLayout
+    id="states-skeleton-3"
+    :title="ui.vibe.skeleton.title"
+    :label="ui.vibe.skeleton.label"
+    :lines="placeholders"
+    shape="cards"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.cards))"
+  />
+  <SkeletonLayout
+    id="states-skeleton-4"
+    :title="ui.vibe.skeleton.title"
+    :label="ui.vibe.skeleton.label"
+    :lines="placeholders"
+    shape="list"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.skeleton, ui.blocks.variants.skeleton.list))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.vue b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.vue
new file mode 100644
index 0000000..4d4bf45
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeDashboardConsoleScreen/WorkspacePage.vue
@@ -0,0 +1,138 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-dashboard-console.json -->
+<!-- The workspace page of ThemeDashboardConsoleScreen. -->
+<script setup lang="ts">
+import {
+  AppShell,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type Event,
+  type NavLink,
+  type Point,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { metrics as metricsEntries } from "@ui8kit/app-shared/data/metrics";
+import { series as seriesEntries } from "@ui8kit/app-shared/data/series";
+import { activity as activityEntries } from "@ui8kit/app-shared/data/activity";
+import { sidenav as sidenavEntries } from "@ui8kit/app-shared/data/sidenav";
+
+const METRICS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const SERIES_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const ACTIVITY_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "text": "metadata.text.value",
+  "time": "metadata.time.value|ago",
+  "tone": "metadata.tone.value",
+} as const;
+const SIDENAV_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+
+const metrics = fromCodex<Stat>(metricsEntries, METRICS_FIELDS, CODEX);
+const series = fromCodex<Point>(seriesEntries, SERIES_FIELDS, CODEX);
+const activity = fromCodex<Event>(activityEntries, ACTIVITY_FIELDS, CODEX);
+const sidenav = fromCodex<NavLink>(sidenavEntries, SIDENAV_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="workspace-pagehead"
+    :title="ui.pages.dashboardConsole.workspace.title"
+    :text="ui.pages.dashboardConsole.workspace.text"
+    :cta="ui.pages.dashboardConsole.workspace.cta"
+    href="#/shells"
+    align="start"
+    tone="muted"
+    density="compact"
+  />
+  <AppShell
+    id="workspace-shell-1"
+    :title="ui.vibe.shell.title"
+    :nav="{
+      label: ui.vibe.sidebar.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: 'item-overview',
+    }"
+    :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    :metrics="metrics"
+    :chart="{
+      title: ui.dashboard.chart.title,
+      text: ui.dashboard.chart.text,
+      summary: ui.dashboard.chart.summary,
+      series,
+    }"
+    :activity="{
+      title: ui.dashboard.activity.title,
+      text: ui.dashboard.activity.text,
+      events: activity,
+    }"
+    layout="sidebar"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.sidebar))"
+  />
+  <AppShell
+    id="workspace-shell-2"
+    :title="ui.vibe.shell.title"
+    :nav="{
+      label: ui.vibe.sidebar.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: 'item-overview',
+    }"
+    :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    :metrics="metrics"
+    :chart="{
+      title: ui.dashboard.chart.title,
+      text: ui.dashboard.chart.text,
+      summary: ui.dashboard.chart.summary,
+      series,
+    }"
+    :activity="{
+      title: ui.dashboard.activity.title,
+      text: ui.dashboard.activity.text,
+      events: activity,
+    }"
+    layout="top"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.top))"
+  />
+  <AppShell
+    id="workspace-shell-3"
+    :title="ui.vibe.shell.title"
+    :nav="{
+      label: ui.vibe.sidebar.label,
+      brand: ui.site.header.brand,
+      links: sidenav,
+      current: 'item-overview',
+    }"
+    :user="{ name: ui.vibe.sidebar.userName, email: ui.vibe.sidebar.userEmail }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    :metrics="metrics"
+    :chart="{
+      title: ui.dashboard.chart.title,
+      text: ui.dashboard.chart.text,
+      summary: ui.dashboard.chart.summary,
+      series,
+    }"
+    :activity="{
+      title: ui.dashboard.activity.title,
+      text: ui.dashboard.activity.text,
+      events: activity,
+    }"
+    layout="panes"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.shell, ui.blocks.variants.shell.panes))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen.vue b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen.vue
new file mode 100644
index 0000000..43e936c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen.vue
@@ -0,0 +1,95 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!--
+  Landing pages of a product: five heroes (screenshot, form, code, display type, backdrop) each followed by
+  proof, features and a call to action, then a company page, a portfolio and a page for teams built from the
+  split blocks.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/vue-ui";
+import HomePage from "./ThemeMarketingLandingScreen/HomePage.vue";
+import LaunchPage from "./ThemeMarketingLandingScreen/LaunchPage.vue";
+import DevelopersPage from "./ThemeMarketingLandingScreen/DevelopersPage.vue";
+import StudioPage from "./ThemeMarketingLandingScreen/StudioPage.vue";
+import EventsPage from "./ThemeMarketingLandingScreen/EventsPage.vue";
+import CompanyPage from "./ThemeMarketingLandingScreen/CompanyPage.vue";
+import WorkPage from "./ThemeMarketingLandingScreen/WorkPage.vue";
+import TeamsPage from "./ThemeMarketingLandingScreen/TeamsPage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingLandingScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"launch","area":"launch"},
+  {"path":"developers","area":"developers"},
+  {"path":"studio","area":"studio"},
+  {"path":"events","area":"events"},
+  {"path":"company","area":"company"},
+  {"path":"work","area":"work"},
+  {"path":"teams","area":"teams"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <LaunchPage v-if="route.area === 'launch'" />
+    <DevelopersPage v-else-if="route.area === 'developers'" />
+    <StudioPage v-else-if="route.area === 'studio'" />
+    <EventsPage v-else-if="route.area === 'events'" />
+    <CompanyPage v-else-if="route.area === 'company'" />
+    <WorkPage v-else-if="route.area === 'work'" />
+    <TeamsPage v-else-if="route.area === 'teams'" />
+    <HomePage v-else />
+  </Block>
+  <SitemapFooter
+    id="after-sitemap"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.vibe.sitemap.tagline"
+    :copyright="ui.vibe.sitemap.copyright"
+    :groups="sitemap"
+    :signup="{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: 'none',
+    }"
+    :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+    layout="columns"
+    density="default"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.vue
new file mode 100644
index 0000000..185564e
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/CompanyPage.vue
@@ -0,0 +1,140 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The company page of ThemeMarketingLandingScreen. -->
+<script setup lang="ts">
+import {
+  AboutCompany,
+  JobBoard,
+  MilestoneTimeline,
+  PageIntro,
+  StoryTabs,
+  TeamGrid,
+  tpl,
+  uniqLabel,
+  type Department,
+  type Feature,
+  type Job,
+  type Member,
+  type Milestone,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { values as valuesEntries } from "@ui8kit/app-shared/data/values";
+import { milestones as milestonesEntries } from "@ui8kit/app-shared/data/milestones";
+import { members as membersEntries } from "@ui8kit/app-shared/data/members";
+import { jobs as jobsEntries } from "@ui8kit/app-shared/data/jobs";
+import { departments as departmentsEntries } from "@ui8kit/app-shared/data/departments";
+
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const VALUES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const MILESTONES_FIELDS = {"id":"id","date":"metadata.date.value","title":"title","text":"metadata.text.value","tag":"metadata.tag.value"} as const;
+const MEMBERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "role": "metadata.role.value",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "bio": "metadata.bio.value",
+  "skills": "metadata.skills.value",
+} as const;
+const JOBS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "dept": "metadata.dept.value",
+  "location": "metadata.location.value",
+  "type": "metadata.type.value",
+  "salary": "metadata.salary.value",
+  "posted": "metadata.posted.value|ago-days",
+} as const;
+const DEPARTMENTS_FIELDS = {"id":"id","name":"title"} as const;
+
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const values = fromCodex<Feature>(valuesEntries, VALUES_FIELDS, CODEX);
+const milestones = fromCodex<Milestone>(milestonesEntries, MILESTONES_FIELDS, CODEX);
+const members = fromCodex<Member>(membersEntries, MEMBERS_FIELDS, CODEX);
+const jobs = fromCodex<Job>(jobsEntries, JOBS_FIELDS, CODEX);
+const departments = fromCodex<Department>(departmentsEntries, DEPARTMENTS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="company-pagehead"
+    :title="ui.pages.marketingLanding.company.title"
+    :text="ui.pages.marketingLanding.company.text"
+    :cta="ui.pages.marketingLanding.company.cta"
+    href="#/work"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <AboutCompany
+    id="company-about"
+    :title="ui.company.about.title"
+    :lead="ui.company.about.lead"
+    :stats="stats"
+    :values="values"
+    layout="split"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.about, ui.blocks.variants.about.split))"
+  />
+  <StoryTabs
+    id="company-storytabs"
+    :title="ui.company.storyTabs.title"
+    :lead="ui.company.storyTabs.lead"
+    :badge="ui.company.storyTabs.badge"
+    :steps="milestones"
+    :empty="ui.empty.milestones"
+    active="milestone-runtimes"
+    :labels="ui.company.storyTabs.labels"
+    layout="years"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.storytabs, ui.blocks.variants.storytabs.yearTabs))"
+  />
+  <MilestoneTimeline
+    id="company-timeline"
+    :title="ui.company.timeline.title"
+    :lead="ui.company.timeline.lead"
+    :milestones="milestones"
+    :empty="ui.empty.milestones"
+    layout="split"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.timeline, ui.blocks.variants.timeline.split))"
+  />
+  <TeamGrid
+    id="company-team"
+    :title="ui.company.team.title"
+    :lead="ui.company.team.lead"
+    :members="members"
+    :empty="ui.empty.members"
+    :depts="ui.company.depts"
+    layout="cards"
+    cols="1-4"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.team, ui.blocks.variants.team.cards4))"
+  />
+  <JobBoard
+    id="company-jobs"
+    :title="ui.company.jobs.title"
+    :lead="ui.company.jobs.lead"
+    :jobs="jobs"
+    :empty="ui.empty.jobs"
+    :departments="departments"
+    :labels="ui.company.jobs"
+    layout="grouped"
+    salary="hide"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.jobs, ui.blocks.variants.jobs.grouped))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.vue
new file mode 100644
index 0000000..e8c1107
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/DevelopersPage.vue
@@ -0,0 +1,151 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The developers page of ThemeMarketingLandingScreen. -->
+<script setup lang="ts">
+import {
+  BentoGrid,
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  HeroClassic,
+  TemplateGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Filter,
+  type Template,
+  type Tile,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+import { templates as templatesEntries } from "@ui8kit/app-shared/data/templates";
+import { prompts as templateFiltersEntries } from "@ui8kit/app-shared/data/prompts";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+const TEMPLATES_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "views": "metadata.views.value|compact",
+  "likes": "metadata.likes.value|compact",
+  "topic": "metadata.topic.value",
+} as const;
+const TEMPLATEFILTERS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value","icon":"metadata.icon.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+const templates = fromCodex<Template>(templatesEntries, TEMPLATES_FIELDS, CODEX);
+const templateFilters = fromCodex<Filter>(templateFiltersEntries, TEMPLATEFILTERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="developers-hero"
+    :title="ui.pages.marketingLanding.developers.title"
+    :text="ui.pages.marketingLanding.developers.text"
+    :actions="{
+      cta: ui.pages.marketingLanding.developers.cta,
+      href: '#/studio',
+      secondary: ui.site.home.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'two',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'code',
+      side: 'end',
+    }"
+    layout="split"
+    scale="default"
+    tone="default"
+    density="roomy"
+  />
+  <BentoGrid
+    id="developers-bento"
+    :title="ui.vibe.bento.title"
+    :tiles="bento"
+    :empty="ui.empty.tiles"
+    layout="bento"
+    media="none"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.bento))"
+  />
+  <TemplateGrid
+    id="developers-templates"
+    :title="ui.vibe.templates.title"
+    :templates="templates"
+    :filters="templateFilters"
+    :labels="ui.vibe.templates"
+    browseHref="#/"
+    :empty="ui.empty.templates"
+    cols="1-4"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.templates, ui.blocks.variants.templates.grid4))"
+  />
+  <FeatureGrid
+    id="developers-features"
+    :title="ui.site.home.featuresTitle"
+    :features="features"
+    :empty="ui.empty.features"
+    :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+    layout="grid"
+    cols="1-4"
+    item="tile"
+    mediaSide="end"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))"
+  />
+  <FaqList
+    id="developers-faq"
+    :title="ui.site.pricing.faqTitle"
+    :items="faq"
+    :empty="ui.vibe.faq.empty"
+    :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+    :filter="{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: 'billing', mode: 'categories' }"
+    layout="accordion"
+    cols="1"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))"
+  />
+  <CtaBand
+    id="developers-cta"
+    :title="ui.site.home.ctaTitle"
+    :text="ui.site.home.ctaText"
+    :actions="{
+      cta: ui.site.home.ctaButton,
+      href: '#/pricing',
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'two',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="split"
+    tone="default"
+    proof="none"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.split))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/EventsPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/EventsPage.vue
new file mode 100644
index 0000000..564fd4f
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/EventsPage.vue
@@ -0,0 +1,137 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The events page of ThemeMarketingLandingScreen. -->
+<script setup lang="ts">
+import {
+  CtaBand,
+  HeroClassic,
+  StatsBand,
+  TestimonialGrid,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Quote,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="events-hero"
+    :title="ui.pages.marketingLanding.events.title"
+    :text="ui.pages.marketingLanding.events.text"
+    :actions="{
+      cta: ui.pages.marketingLanding.events.cta,
+      href: '#/company',
+      secondary: ui.site.home.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'backdrop',
+      side: 'end',
+    }"
+    layout="centered"
+    scale="default"
+    tone="muted"
+    density="roomy"
+  />
+  <StatsBand
+    id="events-stats"
+    :title="ui.marketing.stats.title"
+    :stats="[stats?.[0], stats?.[1], stats?.[2]]"
+    :empty="ui.marketing.stats.empty"
+    cols="3"
+    layout="row"
+    surface="none"
+    item="card"
+    align="center"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.cards))"
+  />
+  <TestimonialGrid
+    id="events-testimonials"
+    :title="ui.marketing.testimonials.title"
+    :quotes="testimonials"
+    :empty="ui.empty.quotes"
+    :labels="{
+      rating: ui.testimonials.rating,
+      byLine: ui.testimonials.byLine,
+      handleLine: ui.testimonials.handleLine,
+    }"
+    layout="strip"
+    cols="1-3"
+    :item="{ kind: 'card', avatar: 'none', rating: 'show', mark: 'none' }"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.strip))"
+  />
+  <VideoGrid
+    id="events-videos"
+    :title="ui.vibe.videos.title"
+    :quotes="testimonials"
+    :empty="ui.empty.quotes"
+    :playLabel="ui.vibe.videos.play"
+    :byLine="ui.testimonials.byLine"
+    cols="1-3"
+    caption="overlay"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.overlay))"
+  />
+  <CtaBand
+    id="events-cta"
+    :title="ui.cases.agency.cta.title"
+    :text="ui.cases.agency.cta.text"
+    :actions="{
+      cta: ui.cases.agency.cta.cta,
+      href: '#/pricing',
+      secondary: ui.cases.agency.cta.secondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'two',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="card"
+    tone="muted"
+    proof="none"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.agency))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/HomePage.vue
new file mode 100644
index 0000000..4b124d6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/HomePage.vue
@@ -0,0 +1,198 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The home page of ThemeMarketingLandingScreen. -->
+<script setup lang="ts">
+import {
+  CtaBand,
+  FaqList,
+  FeatureGrid,
+  HeroClassic,
+  LogoCloud,
+  StatsBand,
+  StepsList,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Logo,
+  type Quote,
+  type Stat,
+  type Step,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="home-hero"
+    :title="ui.pages.marketingLanding.home.title"
+    :text="ui.pages.marketingLanding.home.text"
+    :actions="{
+      cta: ui.pages.marketingLanding.home.cta,
+      href: '#/launch',
+      secondary: ui.site.home.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'image',
+      side: 'end',
+    }"
+    layout="centered"
+    scale="default"
+    tone="default"
+    density="roomy"
+  />
+  <LogoCloud
+    id="home-logos"
+    :title="ui.marketing.logos.title"
+    :logos="logos"
+    :empty="ui.empty.logos"
+    layout="row"
+    cols="4"
+    item="icon"
+    tone="default"
+    density="compact"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))"
+  />
+  <FeatureGrid
+    id="home-features"
+    :title="ui.site.home.featuresTitle"
+    :features="features"
+    :empty="ui.empty.features"
+    :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+    layout="rows"
+    cols="1-3"
+    item="card"
+    mediaSide="alternate"
+    tone="muted"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.rowsAlternate))"
+  />
+  <StepsList
+    id="home-steps"
+    :title="ui.marketing.steps.title"
+    :steps="steps"
+    :empty="ui.empty.steps"
+    layout="row"
+    marker="icon"
+    align="start"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.rowIcons))"
+  />
+  <StatsBand
+    id="home-stats"
+    :title="ui.marketing.stats.title"
+    :stats="stats"
+    :empty="ui.marketing.stats.empty"
+    cols="4"
+    layout="row"
+    surface="none"
+    item="icon"
+    align="start"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stats, ui.blocks.variants.stats.icons))"
+  />
+  <TestimonialGrid
+    id="home-testimonials"
+    :title="ui.marketing.testimonials.title"
+    :quotes="testimonials"
+    :empty="ui.empty.quotes"
+    :labels="{
+      rating: ui.testimonials.rating,
+      byLine: ui.testimonials.byLine,
+      handleLine: ui.testimonials.handleLine,
+    }"
+    layout="single"
+    cols="1-3"
+    :item="{ kind: 'plain', avatar: 'image', rating: 'hide', mark: 'none' }"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.single))"
+  />
+  <FaqList
+    id="home-faq"
+    :title="ui.site.pricing.faqTitle"
+    :items="faq"
+    :empty="ui.vibe.faq.empty"
+    :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+    :filter="{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: '', mode: 'none' }"
+    layout="accordion"
+    cols="1"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.list))"
+  />
+  <CtaBand
+    id="home-cta"
+    :title="ui.site.home.ctaTitle"
+    :text="ui.site.home.ctaText"
+    :actions="{
+      cta: ui.site.home.ctaButton,
+      href: '#/pricing',
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="band"
+    tone="muted"
+    proof="none"
+    density="roomy"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.vue
new file mode 100644
index 0000000..a51c5e6
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/LaunchPage.vue
@@ -0,0 +1,141 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The launch page of ThemeMarketingLandingScreen. -->
+<script setup lang="ts">
+import {
+  CtaBand,
+  HeroClassic,
+  IconWall,
+  ProofBand,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+  type Logo,
+  type Quote,
+  type Stat,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="launch-hero"
+    :title="ui.pages.marketingLanding.launch.title"
+    :text="ui.pages.marketingLanding.launch.text"
+    :actions="{
+      cta: ui.pages.marketingLanding.launch.cta,
+      href: '#/developers',
+      secondary: ui.site.home.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'form',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'none',
+      side: 'end',
+    }"
+    layout="centered"
+    scale="default"
+    tone="default"
+    density="roomy"
+  />
+  <IconWall
+    id="launch-iconwall"
+    :title="ui.vibe.wall.title"
+    :features="features"
+    :empty="ui.empty.features"
+    cols="4"
+    item="tile"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.tiles4))"
+  />
+  <ProofBand
+    id="launch-proof"
+    :title="ui.vibe.proof.title"
+    :logos="logos"
+    :empty="ui.empty.logos"
+    :stats="stats"
+    layout="above"
+    logoStyle="name"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.proof, ui.blocks.variants.proof.above))"
+  />
+  <TestimonialGrid
+    id="launch-testimonials"
+    :title="ui.marketing.testimonials.title"
+    :quotes="testimonials"
+    :empty="ui.empty.quotes"
+    :labels="{
+      rating: ui.testimonials.rating,
+      byLine: ui.testimonials.byLine,
+      handleLine: ui.testimonials.handleLine,
+    }"
+    layout="grid"
+    cols="1-3"
+    :item="{ kind: 'card', avatar: 'image', rating: 'show', mark: 'none' }"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.grid3))"
+  />
+  <CtaBand
+    id="launch-cta"
+    :title="ui.site.home.ctaTitle"
+    :text="ui.site.home.ctaText"
+    :actions="{
+      cta: ui.site.home.ctaButton,
+      href: '#/pricing',
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'form',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="band"
+    tone="muted"
+    proof="none"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/StudioPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/StudioPage.vue
new file mode 100644
index 0000000..5104494
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/StudioPage.vue
@@ -0,0 +1,134 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The studio page of ThemeMarketingLandingScreen. -->
+<script setup lang="ts">
+import {
+  CtaBand,
+  FeatureGrid,
+  HeroClassic,
+  LogoCloud,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+  type Logo,
+  type Quote,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="studio-hero"
+    :title="ui.pages.marketingLanding.studio.title"
+    :text="ui.pages.marketingLanding.studio.text"
+    :actions="{
+      cta: ui.pages.marketingLanding.studio.cta,
+      href: '#/events',
+      secondary: ui.site.home.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'none',
+      side: 'end',
+    }"
+    layout="centered"
+    scale="display"
+    tone="default"
+    density="roomy"
+  />
+  <LogoCloud
+    id="studio-logos"
+    :title="ui.marketing.logos.title"
+    :logos="logos"
+    :empty="ui.empty.logos"
+    layout="grid"
+    cols="4"
+    item="name"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid4))"
+  />
+  <FeatureGrid
+    id="studio-features"
+    :title="ui.site.home.featuresTitle"
+    :features="features"
+    :empty="ui.empty.features"
+    :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+    layout="grid"
+    cols="1-4"
+    item="tile"
+    mediaSide="end"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.tiles4))"
+  />
+  <TestimonialGrid
+    id="studio-testimonials"
+    :title="ui.marketing.testimonials.title"
+    :quotes="testimonials"
+    :empty="ui.empty.quotes"
+    :labels="{
+      rating: ui.testimonials.rating,
+      byLine: ui.testimonials.byLine,
+      handleLine: ui.testimonials.handleLine,
+    }"
+    layout="masonry"
+    cols="1-3"
+    :item="{ kind: 'card', avatar: 'image', rating: 'hide', mark: 'none' }"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.masonry))"
+  />
+  <CtaBand
+    id="studio-cta"
+    :title="ui.site.home.ctaTitle"
+    :text="ui.site.home.ctaText"
+    :actions="{
+      cta: ui.site.home.ctaButton,
+      href: '#/pricing',
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="band"
+    tone="muted"
+    proof="none"
+    density="roomy"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.band))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.vue
new file mode 100644
index 0000000..b7a6241
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/TeamsPage.vue
@@ -0,0 +1,210 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The teams page of ThemeMarketingLandingScreen. -->
+<script setup lang="ts">
+import {
+  CtaProof,
+  FaqSplit,
+  HeroSplit,
+  LogoCloud,
+  QuoteSplit,
+  tpl,
+  uniqLabel,
+  type FaqTab,
+  type Feature,
+  type Logo,
+  type Plan,
+  type Question,
+  type Quote,
+  type Stat,
+  type Zone,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { questions as questionsEntries } from "@ui8kit/app-shared/data/questions";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { zones as zonesEntries } from "@ui8kit/app-shared/data/zones";
+
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const QUESTIONS_FIELDS = {
+  "id": "id",
+  "question": "title",
+  "answer": "metadata.answer.value",
+  "category": "terms|term:faq_category",
+  "icon": "metadata.icon.value",
+} as const;
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const ZONES_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "area": "metadata.area.value",
+  "price": "metadata.price.value",
+  "freeFrom": "metadata.freeFrom.value",
+  "minOrder": "metadata.minOrder.value",
+  "time": "metadata.time.value",
+  "express": "metadata.express.value",
+  "currency": "metadata.currency.value",
+} as const;
+
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const questions = fromCodex<Question>(questionsEntries, QUESTIONS_FIELDS, CODEX);
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const zones = fromCodex<Zone>(zonesEntries, ZONES_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroSplit
+    id="teams-herosplit"
+    :title="ui.marketing.heroSplit.title"
+    :lead="ui.marketing.heroSplit.lead"
+    :badge="ui.marketing.heroSplit.badge"
+    :actions="{
+      mode: 'two',
+      cta: ui.marketing.heroSplit.cta,
+      href: '#/pricing',
+      secondary: ui.marketing.heroSplit.secondary,
+      secondaryHref: '#/features',
+    }"
+    :content="{
+      stats,
+      features,
+      people: testimonials,
+      plans: tiers,
+      proof: ui.marketing.heroSplit.proof,
+      card: { title: ui.marketing.heroSplit.cardTitle, text: ui.marketing.heroSplit.cardText, icon: 'zap' },
+    }"
+    extra="quote"
+    media="card"
+    mediaSide="end"
+    tone="default"
+  />
+  <LogoCloud
+    id="teams-logos"
+    :title="ui.marketing.logos.title"
+    :logos="logos"
+    :empty="ui.empty.logos"
+    layout="row"
+    cols="4"
+    item="icon"
+    tone="default"
+    density="compact"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.row))"
+  />
+  <FaqSplit
+    id="teams-faqsplit"
+    :title="ui.marketing.faqSplit.title"
+    :lead="ui.marketing.faqSplit.lead"
+    :badge="ui.marketing.faqSplit.badge"
+    :items="questions"
+    :channels="channels"
+    :topics="faqtabs"
+    :labels="{
+      cta: ui.marketing.faqSplit.cta,
+      more: ui.marketing.faqSplit.more,
+      asideTitle: ui.marketing.faqSplit.asideTitle,
+      asideText: ui.marketing.faqSplit.asideText,
+      asideCta: ui.marketing.faqSplit.asideCta,
+      search: ui.marketing.faqSplit.search,
+      popular: ui.marketing.faqSplit.popular,
+    }"
+    layout="aside"
+    cards="grid3"
+    mediaSide="end"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faqsplit, ui.blocks.variants.faqsplit.helpCard))"
+  />
+  <QuoteSplit
+    id="teams-quotesplit"
+    :title="ui.marketing.quoteSplit.title"
+    :lead="ui.marketing.quoteSplit.lead"
+    :badge="ui.marketing.quoteSplit.badge"
+    :quotes="testimonials"
+    :empty="ui.empty.quotes"
+    :labels="{
+      rating: ui.testimonials.rating,
+      byLine: ui.testimonials.byLine,
+      handleLine: ui.testimonials.handleLine,
+    }"
+    :extras="{
+      stats,
+      logos,
+      rating: 5,
+      score: ui.marketing.quoteSplit.score,
+      reviews: ui.marketing.quoteSplit.reviews,
+    }"
+    :actions="{
+      mode: 'two',
+      cta: ui.marketing.quoteSplit.cta,
+      href: '#/customers',
+      secondary: ui.marketing.quoteSplit.secondary,
+      secondaryHref: '#/contact',
+    }"
+    layout="rating"
+    mediaSide="end"
+    tone="muted"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.quotesplit, ui.blocks.variants.quotesplit.ratingPanel))"
+  />
+  <CtaProof
+    id="teams-ctaproof"
+    :title="ui.marketing.ctaProof.title"
+    :lead="ui.marketing.ctaProof.lead"
+    :badge="ui.marketing.ctaProof.badge"
+    :actions="{
+      mode: 'two',
+      cta: ui.marketing.ctaProof.cta,
+      href: '#/pricing',
+      secondary: ui.marketing.ctaProof.secondary,
+      secondaryHref: '#/contact',
+    }"
+    :content="{ logos, features, stats, zones }"
+    layout="split"
+    proof="stats"
+    mediaSide="end"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.ctaproof, ui.blocks.variants.ctaproof.splitStats))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/WorkPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/WorkPage.vue
new file mode 100644
index 0000000..add9d20
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingLandingScreen/WorkPage.vue
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-landing.json -->
+<!-- The work page of ThemeMarketingLandingScreen. -->
+<script setup lang="ts">
+import {
+  AboutMe,
+  PhotoGallery,
+  ProjectGrid,
+  tpl,
+  uniqLabel,
+  type Photo,
+  type Project,
+  type Skill,
+  type Spec,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { profilefacts as profilefactsEntries } from "@ui8kit/app-shared/data/profilefacts";
+import { skills as skillsEntries } from "@ui8kit/app-shared/data/skills";
+import { projects as projectsEntries } from "@ui8kit/app-shared/data/projects";
+import { photos as photosEntries } from "@ui8kit/app-shared/data/photos";
+
+const PROFILEFACTS_FIELDS = {"id":"id","label":"title","value":"metadata.value.value"} as const;
+const SKILLS_FIELDS = {"id":"id","label":"title","level":"metadata.level.value"} as const;
+const PROJECTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "category": "terms|term:project_category",
+  "year": "metadata.year.value",
+  "summary": "metadata.summary.value",
+  "tags": "metadata.tags.value",
+  "featured": "metadata.featured.value",
+  "client": "metadata.client.value",
+} as const;
+const PHOTOS_FIELDS = {"id":"id","title":"title","tag":"metadata.tag.value","size":"metadata.size.value"} as const;
+
+const profilefacts = fromCodex<Spec>(profilefactsEntries, PROFILEFACTS_FIELDS, CODEX);
+const skills = fromCodex<Skill>(skillsEntries, SKILLS_FIELDS, CODEX);
+const projects = fromCodex<Project>(projectsEntries, PROJECTS_FIELDS, CODEX);
+const photos = fromCodex<Photo>(photosEntries, PHOTOS_FIELDS, CODEX);
+</script>
+
+<template>
+  <AboutMe
+    id="work-aboutme"
+    :title="ui.company.aboutMe.title"
+    :lead="ui.company.aboutMe.lead"
+    :badge="ui.company.aboutMe.badge"
+    :facts="profilefacts"
+    :skills="skills"
+    :labels="ui.company.aboutMe"
+    :actions="{
+      mode: 'two',
+      cta: ui.company.aboutMe.cta,
+      href: '#/work',
+      secondary: ui.company.aboutMe.more,
+      secondaryHref: '#/contact',
+    }"
+    layout="facts"
+    mediaSide="start"
+    tone="default"
+  />
+  <ProjectGrid
+    id="work-projects"
+    :title="ui.company.projects.title"
+    :lead="ui.company.projects.lead"
+    :projects="projects"
+    :empty="ui.empty.projects"
+    :labels="ui.company.projects"
+    layout="cards"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.projects, ui.blocks.variants.projects.cards))"
+  />
+  <PhotoGallery
+    id="work-photos"
+    :title="ui.company.photos.title"
+    :lead="ui.company.photos.lead"
+    :photos="photos"
+    :empty="ui.empty.photos"
+    :labels="ui.company.photos"
+    layout="masonry"
+    captions="show"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.photos, ui.blocks.variants.photos.masonry))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen.vue b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen.vue
new file mode 100644
index 0000000..28c2c37
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen.vue
@@ -0,0 +1,82 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!--
+  Pricing pages: tiers with a billing switch, a comparison table, one plan, a usage slider, credit packs, free
+  against pro, and us against the rest.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/vue-ui";
+import HomePage from "./ThemeMarketingPricingScreen/HomePage.vue";
+import PlansPage from "./ThemeMarketingPricingScreen/PlansPage.vue";
+import UsagePage from "./ThemeMarketingPricingScreen/UsagePage.vue";
+import ComparePage from "./ThemeMarketingPricingScreen/ComparePage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingPricingScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"plans","area":"plans"},
+  {"path":"usage","area":"usage"},
+  {"path":"compare","area":"compare"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <PlansPage v-if="route.area === 'plans'" />
+    <UsagePage v-else-if="route.area === 'usage'" />
+    <ComparePage v-else-if="route.area === 'compare'" />
+    <HomePage v-else />
+  </Block>
+  <SitemapFooter
+    id="after-sitemap"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.vibe.sitemap.tagline"
+    :copyright="ui.vibe.sitemap.copyright"
+    :groups="sitemap"
+    :signup="{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: 'first',
+    }"
+    :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+    layout="columns"
+    density="default"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/ComparePage.vue b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/ComparePage.vue
new file mode 100644
index 0000000..4de5d8c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/ComparePage.vue
@@ -0,0 +1,136 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!-- The compare page of ThemeMarketingPricingScreen. -->
+<script setup lang="ts">
+import {
+  ComparisonTable,
+  CtaBand,
+  FaqList,
+  HeroClassic,
+  TestimonialGrid,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type CompareRow,
+  type Faq,
+  type FaqTab,
+  type Quote,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { rivals as rivalsEntries } from "@ui8kit/app-shared/data/rivals";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+
+const RIVALS_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+
+const rivals = fromCodex<CompareRow>(rivalsEntries, RIVALS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="compare-hero"
+    :title="ui.pages.marketingPricing.compare.title"
+    :text="ui.pages.marketingPricing.compare.text"
+    :actions="{
+      cta: ui.pages.marketingPricing.compare.cta,
+      href: '#/',
+      secondary: ui.site.home.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'none',
+      side: 'end',
+    }"
+    layout="centered"
+    scale="default"
+    tone="muted"
+    density="default"
+  />
+  <ComparisonTable
+    id="compare-compare"
+    :title="ui.vibe.rivals.title"
+    :rows="rivals"
+    :empty="ui.empty.rows"
+    :labels="ui.vibe.rivals.labels"
+    highlight="middle"
+    tone="muted"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.rivals))"
+  />
+  <TestimonialGrid
+    id="compare-testimonials"
+    :title="ui.marketing.testimonials.title"
+    :quotes="testimonials"
+    :empty="ui.empty.quotes"
+    :labels="{
+      rating: ui.testimonials.rating,
+      byLine: ui.testimonials.byLine,
+      handleLine: ui.testimonials.handleLine,
+    }"
+    layout="single"
+    cols="1-3"
+    :item="{ kind: 'plain', avatar: 'image', rating: 'hide', mark: 'icon' }"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.testimonials, ui.blocks.variants.testimonials.featured))"
+  />
+  <FaqList
+    id="compare-faq"
+    :title="ui.site.pricing.faqTitle"
+    :items="faq"
+    :empty="ui.vibe.faq.empty"
+    :search="{ label: ui.vibe.faq.search, query: '', mode: 'field' }"
+    :filter="{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: '', mode: 'none' }"
+    layout="accordion"
+    cols="1"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))"
+  />
+  <CtaBand
+    id="compare-cta"
+    :title="ui.site.home.ctaTitle"
+    :text="ui.site.home.ctaText"
+    :actions="{
+      cta: ui.site.home.ctaButton,
+      href: '#/pricing',
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="band"
+    tone="muted"
+    proof="quote"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.quote))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/HomePage.vue
new file mode 100644
index 0000000..43423ad
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/HomePage.vue
@@ -0,0 +1,133 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!-- The home page of ThemeMarketingPricingScreen. -->
+<script setup lang="ts">
+import {
+  ComparisonTable,
+  CtaBand,
+  FaqList,
+  LogoCloud,
+  PageIntro,
+  PricingTiers,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+  type Faq,
+  type FaqTab,
+  type Logo,
+  type Plan,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="home-pagehead"
+    :title="ui.pages.marketingPricing.home.title"
+    :text="ui.pages.marketingPricing.home.text"
+    :cta="ui.pages.marketingPricing.home.cta"
+    href="#/plans"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <PricingTiers
+    id="home-pricing"
+    :title="ui.site.pricing.tiersTitle"
+    :plans="tiers"
+    :labels="ui.pricing"
+    :billingLabels="ui.vibe.billing"
+    layout="grid"
+    cols="1-3"
+    emphasis="auto"
+    billing="monthly"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.monthly))"
+  />
+  <LogoCloud
+    id="home-logos"
+    :title="ui.marketing.logos.title"
+    :logos="logos"
+    :empty="ui.empty.logos"
+    layout="grid"
+    cols="3"
+    item="tile"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.grid3))"
+  />
+  <ComparisonTable
+    id="home-compare"
+    :title="ui.vibe.compare.title"
+    :rows="compare"
+    :empty="ui.empty.rows"
+    :labels="ui.vibe.compare.labels"
+    highlight="none"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.plans))"
+  />
+  <FaqList
+    id="home-faq"
+    :title="ui.site.pricing.faqTitle"
+    :items="faq"
+    :empty="ui.vibe.faq.empty"
+    :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+    :filter="{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: '', mode: 'none' }"
+    layout="accordion"
+    cols="2"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.twoColumns))"
+  />
+  <CtaBand
+    id="home-cta"
+    :title="ui.cases.saas.cta.title"
+    :text="ui.cases.saas.cta.text"
+    :actions="{
+      cta: ui.cases.saas.cta.cta,
+      href: '#/pricing',
+      secondary: ui.cases.saas.cta.secondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'two',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="band"
+    tone="muted"
+    proof="none"
+    density="roomy"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/PlansPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/PlansPage.vue
new file mode 100644
index 0000000..913bd81
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/PlansPage.vue
@@ -0,0 +1,109 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!-- The plans page of ThemeMarketingPricingScreen. -->
+<script setup lang="ts">
+import {
+  ComparisonTable,
+  PageIntro,
+  PricingCard,
+  PricingTiers,
+  tpl,
+  uniqLabel,
+  type CompareRow,
+  type Plan,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { duo as duoEntries } from "@ui8kit/app-shared/data/duo";
+import { compare as compareEntries } from "@ui8kit/app-shared/data/compare";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const DUO_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const COMPARE_FIELDS = {"id":"id","label":"title","a":"metadata.a.value","b":"metadata.b.value","c":"metadata.c.value"} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const duo = fromCodex<Plan>(duoEntries, DUO_FIELDS, CODEX);
+const compare = fromCodex<CompareRow>(compareEntries, COMPARE_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="plans-pagehead"
+    :title="ui.pages.marketingPricing.plans.title"
+    :text="ui.pages.marketingPricing.plans.text"
+    :cta="ui.pages.marketingPricing.plans.cta"
+    href="#/usage"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <PricingTiers
+    id="plans-pricing-1"
+    :title="ui.site.pricing.tiersTitle"
+    :plans="duo"
+    :labels="ui.pricing"
+    :billingLabels="ui.vibe.billing"
+    layout="grid"
+    cols="1-2"
+    emphasis="off"
+    billing="off"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.duo))"
+  />
+  <PricingCard
+    :plan="tiers.find((i) => i.id === 'tier-team')!"
+    :labels="ui.pricing"
+    emphasis="auto"
+    density="default"
+  />
+  <PricingTiers
+    id="plans-pricing-3"
+    :title="ui.site.pricing.tiersTitle"
+    :plans="tiers"
+    :labels="ui.pricing"
+    :billingLabels="ui.vibe.billing"
+    layout="stack"
+    cols="1-3"
+    emphasis="auto"
+    billing="off"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.stack))"
+  />
+  <ComparisonTable
+    id="plans-compare"
+    :title="ui.vibe.compare.title"
+    :rows="compare"
+    :empty="ui.empty.rows"
+    :labels="ui.vibe.compare.labels"
+    highlight="middle"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.compare, ui.blocks.variants.compare.highlight))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/UsagePage.vue b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/UsagePage.vue
new file mode 100644
index 0000000..7413369
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingPricingScreen/UsagePage.vue
@@ -0,0 +1,131 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-pricing.json -->
+<!-- The usage page of ThemeMarketingPricingScreen. -->
+<script setup lang="ts">
+import {
+  CreditPacks,
+  CtaBand,
+  PageIntro,
+  PricingTiers,
+  UsageCalculator,
+  tpl,
+  uniqLabel,
+  type Pack,
+  type Plan,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { tiers as tiersEntries } from "@ui8kit/app-shared/data/tiers";
+import { credits as creditsEntries } from "@ui8kit/app-shared/data/credits";
+
+const TIERS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "tagline": "metadata.tagline.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "seats": "metadata.seats.value",
+  "storage": "metadata.storage.value",
+  "highlighted": "metadata.highlighted.value",
+  "features": "metadata.features.value",
+  "yearly": "metadata.yearly.value",
+} as const;
+const CREDITS_FIELDS = {
+  "id": "id",
+  "name": "title",
+  "credits": "metadata.credits.value",
+  "price": "metadata.price.value",
+  "currency": "metadata.currency.value",
+  "badge": "metadata.badge.value",
+} as const;
+
+const tiers = fromCodex<Plan>(tiersEntries, TIERS_FIELDS, CODEX);
+const credits = fromCodex<Pack>(creditsEntries, CREDITS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="usage-pagehead"
+    :title="ui.pages.marketingPricing.usage.title"
+    :text="ui.pages.marketingPricing.usage.text"
+    :cta="ui.pages.marketingPricing.usage.cta"
+    href="#/compare"
+    align="start"
+    tone="muted"
+    density="compact"
+  />
+  <UsageCalculator
+    id="usage-usage"
+    :title="ui.vibe.usage.title"
+    :text="ui.vibe.usage.text"
+    :usage="5000"
+    :slider="{ min: 100, max: 10000, label: ui.vibe.usage.slider, unit: ui.vibe.usage.unit }"
+    :price="{ rate: 1, currency: ui.vibe.usage.currency, label: ui.vibe.usage.estimate }"
+    :cta="ui.vibe.usage.cta"
+    href="#/"
+    layout="card"
+    ends="show"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.usage, ui.blocks.variants.usage.card))"
+  />
+  <CreditPacks
+    id="usage-credits-2"
+    :title="ui.vibe.credits.title"
+    :packs="credits"
+    :empty="ui.empty.packs"
+    :badges="ui.vibe.credits.badges"
+    :buy="ui.vibe.credits.buy"
+    cols="4"
+    item="tile"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.tiles4))"
+  />
+  <CreditPacks
+    id="usage-credits-3"
+    :title="ui.vibe.credits.title"
+    :packs="credits"
+    :empty="ui.empty.packs"
+    :badges="ui.vibe.credits.badges"
+    :buy="ui.vibe.credits.buy"
+    cols="4"
+    item="row"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.credits, ui.blocks.variants.credits.rows))"
+  />
+  <PricingTiers
+    id="usage-pricing"
+    :title="ui.site.pricing.tiersTitle"
+    :plans="tiers"
+    :labels="ui.pricing"
+    :billingLabels="ui.vibe.billing"
+    layout="grid"
+    cols="1-3"
+    emphasis="auto"
+    billing="annual"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.pricing, ui.blocks.variants.pricing.annual))"
+  />
+  <CtaBand
+    id="usage-cta"
+    :title="ui.site.home.ctaTitle"
+    :text="ui.site.home.ctaText"
+    :actions="{
+      cta: ui.site.home.ctaButton,
+      href: '#/pricing',
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="row"
+    tone="muted"
+    proof="none"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.row))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingProductScreen.vue b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen.vue
new file mode 100644
index 0000000..4e5962c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen.vue
@@ -0,0 +1,82 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!--
+  Product pages: features as grids, bento, tabs, an accordion and a sticky list, before and after pictures, and
+  the navigation patterns.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/vue-ui";
+import HomePage from "./ThemeMarketingProductScreen/HomePage.vue";
+import TourPage from "./ThemeMarketingProductScreen/TourPage.vue";
+import CapabilitiesPage from "./ThemeMarketingProductScreen/CapabilitiesPage.vue";
+import NavigationPage from "./ThemeMarketingProductScreen/NavigationPage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeMarketingProductScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"tour","area":"tour"},
+  {"path":"capabilities","area":"capabilities"},
+  {"path":"navigation","area":"navigation"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <TourPage v-if="route.area === 'tour'" />
+    <CapabilitiesPage v-else-if="route.area === 'capabilities'" />
+    <NavigationPage v-else-if="route.area === 'navigation'" />
+    <HomePage v-else />
+  </Block>
+  <SitemapFooter
+    id="after-sitemap"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.vibe.sitemap.tagline"
+    :copyright="ui.vibe.sitemap.copyright"
+    :groups="sitemap"
+    :signup="{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: 'none',
+    }"
+    :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+    layout="columns"
+    density="default"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.vue
new file mode 100644
index 0000000..ab24d0c
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/CapabilitiesPage.vue
@@ -0,0 +1,121 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!-- The capabilities page of ThemeMarketingProductScreen. -->
+<script setup lang="ts">
+import {
+  BeforeAfter,
+  CtaBand,
+  FeatureAccordion,
+  FeatureGrid,
+  FeatureSticky,
+  IconWall,
+  PageIntro,
+  tpl,
+  uniqLabel,
+  type Contrast,
+  type Feature,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="capabilities-pagehead"
+    :title="ui.pages.marketingProduct.capabilities.title"
+    :text="ui.pages.marketingProduct.capabilities.text"
+    :cta="ui.pages.marketingProduct.capabilities.cta"
+    href="#/navigation"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <FeatureGrid
+    id="capabilities-features"
+    :title="ui.site.home.featuresTitle"
+    :features="features"
+    :empty="ui.empty.features"
+    :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+    layout="grid"
+    cols="1-2"
+    item="card"
+    mediaSide="end"
+    tone="default"
+    density="roomy"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid2))"
+  />
+  <IconWall
+    id="capabilities-iconwall"
+    :title="ui.vibe.wall.title"
+    :features="features"
+    :empty="ui.empty.features"
+    cols="6"
+    item="chip"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.iconwall, ui.blocks.variants.iconwall.chips6))"
+  />
+  <FeatureAccordion
+    id="capabilities-accordion"
+    :title="ui.vibe.accordion.title"
+    :features="features"
+    :empty="ui.empty.features"
+    expand="first"
+    media="none"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.first))"
+  />
+  <BeforeAfter
+    id="capabilities-beforeafter"
+    :title="ui.vibe.beforeafter.title"
+    :points="beforeafter"
+    :empty="ui.empty.points"
+    :labels="ui.vibe.beforeafter.labels"
+    layout="rows"
+    icons="show"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.rows))"
+  />
+  <FeatureSticky
+    id="capabilities-sticky"
+    :title="ui.vibe.sticky.title"
+    :features="features"
+    :empty="ui.empty.features"
+    active="feature-clear"
+    mediaSide="end"
+    item="card"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.card))"
+  />
+  <CtaBand
+    id="capabilities-cta"
+    :title="ui.site.home.ctaTitle"
+    :text="ui.site.home.ctaText"
+    :actions="{
+      cta: ui.site.home.ctaButton,
+      href: '#/pricing',
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="card"
+    tone="muted"
+    proof="none"
+    density="compact"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.compact))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/HomePage.vue
new file mode 100644
index 0000000..e2b8a33
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/HomePage.vue
@@ -0,0 +1,149 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!-- The home page of ThemeMarketingProductScreen. -->
+<script setup lang="ts">
+import {
+  BentoGrid,
+  FeatureAccordion,
+  FeatureGrid,
+  FeatureShowcase,
+  FeatureSplit,
+  FeatureTabs,
+  HeroClassic,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Feature,
+  type Stat,
+  type Tile,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { bento as bentoEntries } from "@ui8kit/app-shared/data/bento";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const BENTO_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value","size":"metadata.size.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const bento = fromCodex<Tile>(bentoEntries, BENTO_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="home-hero"
+    :title="ui.pages.marketingProduct.home.title"
+    :text="ui.pages.marketingProduct.home.text"
+    :actions="{
+      cta: ui.pages.marketingProduct.home.cta,
+      href: '#/tour',
+      secondary: ui.site.home.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'image',
+      side: 'end',
+    }"
+    layout="split"
+    scale="default"
+    tone="default"
+    density="roomy"
+  />
+  <FeatureGrid
+    id="home-features"
+    :title="ui.site.home.featuresTitle"
+    :features="features"
+    :empty="ui.empty.features"
+    :action="{ label: ui.site.home.featuresAction, href: '#/' }"
+    layout="grid"
+    cols="1-3"
+    item="card"
+    mediaSide="end"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.features, ui.blocks.variants.features.grid))"
+  />
+  <FeatureSplit
+    id="home-featuresplit"
+    :title="ui.marketing.featureSplit.title"
+    :lead="ui.marketing.featureSplit.lead"
+    :badge="ui.marketing.featureSplit.badge"
+    :features="features"
+    :stats="stats"
+    :actions="{
+      mode: 'two',
+      cta: ui.marketing.featureSplit.cta,
+      href: '#/start',
+      secondary: ui.marketing.featureSplit.secondary,
+      secondaryHref: '#/work',
+    }"
+    layout="metrics"
+    mediaSide="end"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuresplit, ui.blocks.variants.featuresplit.metricCards))"
+  />
+  <FeatureShowcase
+    id="home-featureshowcase"
+    :title="ui.marketing.featureShowcase.title"
+    :lead="ui.marketing.featureShowcase.lead"
+    :features="features"
+    :empty="ui.empty.features"
+    :more="ui.marketing.featureShowcase.more"
+    item="panel"
+    cols="4"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featureshowcase, ui.blocks.variants.featureshowcase.panelCards4))"
+  />
+  <BentoGrid
+    id="home-bento"
+    :title="ui.vibe.bento.title"
+    :tiles="bento"
+    :empty="ui.empty.tiles"
+    layout="bento"
+    media="image"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.bento, ui.blocks.variants.bento.images))"
+  />
+  <FeatureTabs
+    id="home-featuretabs"
+    :title="ui.vibe.tabs.title"
+    :features="features"
+    :empty="ui.empty.features"
+    :tabsLabel="ui.vibe.tabs.label"
+    active="feature-clear"
+    panel="split"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.featuretabs, ui.blocks.variants.featuretabs.split))"
+  />
+  <FeatureAccordion
+    id="home-accordion"
+    :title="ui.vibe.accordion.title"
+    :features="features"
+    :empty="ui.empty.features"
+    expand="first"
+    media="image"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.accordion, ui.blocks.variants.accordion.media))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/NavigationPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/NavigationPage.vue
new file mode 100644
index 0000000..149cf0e
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/NavigationPage.vue
@@ -0,0 +1,128 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!-- The navigation page of ThemeMarketingProductScreen. -->
+<script setup lang="ts">
+import {
+  MegaMenu,
+  NavBar,
+  PageIntro,
+  SiteFooter,
+  SiteHeader,
+  tpl,
+  uniqLabel,
+  type MegaGroup,
+  type NavLink,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <PageIntro
+    id="navigation-pagehead"
+    :title="ui.pages.marketingProduct.navigation.title"
+    :text="ui.pages.marketingProduct.navigation.text"
+    :cta="ui.pages.marketingProduct.navigation.cta"
+    href="#/"
+    align="start"
+    tone="muted"
+    density="compact"
+  />
+  <SiteHeader
+    :labels="ui.site.header"
+    current="home"
+    :cta="ui.site.header.cta"
+    layout="stacked"
+    position="static"
+    actions="none"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.header, ui.blocks.variants.header.stacked))"
+    @theme="() => actions.toggleTheme()"
+  />
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="navlinks"
+    current="link-product"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="split"
+    over="none"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.split))"
+    @theme="() => actions.toggleTheme()"
+  />
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="navlinks"
+    current="link-product"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="search"
+    over="none"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.search))"
+    @theme="() => actions.toggleTheme()"
+  />
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="navlinks"
+    current="link-product"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="media"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.navbar, ui.blocks.variants.navbar.media))"
+    @theme="() => actions.toggleTheme()"
+  />
+  <MegaMenu
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :trigger="ui.vibe.mega.trigger"
+    :links="navlinks"
+    :groups="megagroups"
+    :promoTitle="ui.vibe.mega.promoTitle"
+    :promoText="ui.vibe.mega.promoText"
+    panel="open"
+    cols="2"
+    promo="none"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.twoCols))"
+  />
+  <SiteFooter
+    :labels="ui.site.footer"
+    layout="centered"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.footer, ui.blocks.variants.footer.centered))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/TourPage.vue b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/TourPage.vue
new file mode 100644
index 0000000..9dbdcd1
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeMarketingProductScreen/TourPage.vue
@@ -0,0 +1,129 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-marketing-product.json -->
+<!-- The tour page of ThemeMarketingProductScreen. -->
+<script setup lang="ts">
+import {
+  BeforeAfter,
+  FeatureSticky,
+  MegaMenu,
+  PageIntro,
+  StepsList,
+  VideoGrid,
+  tpl,
+  uniqLabel,
+  type Contrast,
+  type Feature,
+  type MegaGroup,
+  type NavLink,
+  type Quote,
+  type Step,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { navlinks as navlinksEntries } from "@ui8kit/app-shared/data/navlinks";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { beforeafter as beforeafterEntries } from "@ui8kit/app-shared/data/beforeafter";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { testimonials as testimonialsEntries } from "@ui8kit/app-shared/data/testimonials";
+import { megagroups as megagroupsEntries } from "@ui8kit/app-shared/data/megagroups";
+
+const NAVLINKS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","href":"slug|route"} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const BEFOREAFTER_FIELDS = {"id":"id","title":"title","before":"metadata.before.value","after":"metadata.after.value"} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const TESTIMONIALS_FIELDS = {
+  "id": "id",
+  "author": "title",
+  "role": "metadata.role.value",
+  "company": "metadata.company.value",
+  "quote": "metadata.quote.value",
+  "rating": "metadata.rating.value",
+  "handle": "metadata.handle.value",
+  "time": "metadata.time.value|ago-short",
+  "mark": "metadata.mark.value",
+} as const;
+const MEGAGROUPS_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const navlinks = fromCodex<NavLink>(navlinksEntries, NAVLINKS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const beforeafter = fromCodex<Contrast>(beforeafterEntries, BEFOREAFTER_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const testimonials = fromCodex<Quote>(testimonialsEntries, TESTIMONIALS_FIELDS, CODEX);
+const megagroups = fromCodex<MegaGroup>(megagroupsEntries, MEGAGROUPS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="tour-pagehead"
+    :title="ui.pages.marketingProduct.tour.title"
+    :text="ui.pages.marketingProduct.tour.text"
+    :cta="ui.pages.marketingProduct.tour.cta"
+    href="#/capabilities"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <FeatureSticky
+    id="tour-sticky"
+    :title="ui.vibe.sticky.title"
+    :features="features"
+    :empty="ui.empty.features"
+    active="feature-clear"
+    mediaSide="end"
+    item="plain"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.sticky, ui.blocks.variants.sticky.end))"
+  />
+  <BeforeAfter
+    id="tour-beforeafter"
+    :title="ui.vibe.beforeafter.title"
+    :points="beforeafter"
+    :empty="ui.empty.points"
+    :labels="ui.vibe.beforeafter.labels"
+    layout="cards"
+    icons="show"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.beforeafter, ui.blocks.variants.beforeafter.cards))"
+  />
+  <StepsList
+    id="tour-steps"
+    :title="ui.marketing.steps.title"
+    :steps="steps"
+    :empty="ui.empty.steps"
+    layout="column"
+    marker="number"
+    align="start"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.steps, ui.blocks.variants.steps.column))"
+  />
+  <VideoGrid
+    id="tour-videos"
+    :title="ui.vibe.videos.title"
+    :quotes="testimonials"
+    :empty="ui.empty.quotes"
+    :playLabel="ui.vibe.videos.play"
+    :byLine="ui.testimonials.byLine"
+    cols="1-3"
+    caption="below"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videos, ui.blocks.variants.videos.grid3))"
+  />
+  <MegaMenu
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :trigger="ui.vibe.mega.trigger"
+    :links="navlinks"
+    :groups="megagroups"
+    :promoTitle="ui.vibe.mega.promoTitle"
+    :promoText="ui.vibe.mega.promoText"
+    panel="open"
+    cols="3"
+    promo="none"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.megamenu, ui.blocks.variants.megamenu.open))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen.vue b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen.vue
new file mode 100644
index 0000000..10a3b68
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen.vue
@@ -0,0 +1,77 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!--
+  Onboarding: steps, a checklist that expands, a product tour with callouts, a welcome video and the first empty
+  screen.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/vue-ui";
+import HomePage from "./ThemeOnboardingFlowScreen/HomePage.vue";
+import WelcomePage from "./ThemeOnboardingFlowScreen/WelcomePage.vue";
+import SetupPage from "./ThemeOnboardingFlowScreen/SetupPage.vue";
+import TourPage from "./ThemeOnboardingFlowScreen/TourPage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeOnboardingFlowScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [{"path":"","area":"home"},{"path":"welcome","area":"welcome"},{"path":"setup","area":"setup"},{"path":"tour","area":"tour"}] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <WelcomePage v-if="route.area === 'welcome'" />
+    <SetupPage v-else-if="route.area === 'setup'" />
+    <TourPage v-else-if="route.area === 'tour'" />
+    <HomePage v-else />
+  </Block>
+  <SitemapFooter
+    id="after-sitemap"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.vibe.sitemap.tagline"
+    :copyright="ui.vibe.sitemap.copyright"
+    :groups="sitemap"
+    :signup="{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: 'none',
+    }"
+    :status="{ label: ui.vibe.sitemap.status, mode: 'none' }"
+    layout="row"
+    density="default"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/HomePage.vue
new file mode 100644
index 0000000..5322e9e
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/HomePage.vue
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!-- The home page of ThemeOnboardingFlowScreen. -->
+<script setup lang="ts">
+import {
+  Checklist,
+  PageIntro,
+  Stepper,
+  TourCallout,
+  tpl,
+  uniqLabel,
+  type Step,
+  type Task,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="home-pagehead"
+    :title="ui.pages.onboardingFlow.home.title"
+    :text="ui.pages.onboardingFlow.home.text"
+    :cta="ui.pages.onboardingFlow.home.cta"
+    href="#/welcome"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <Stepper
+    id="home-stepper"
+    :title="ui.onboarding.stepper.title"
+    :steps="steps"
+    :current="2"
+    :stepLabel="ui.onboarding.stepper.stepLabel"
+    :back="ui.onboarding.stepper.back"
+    :next="ui.onboarding.stepper.next"
+    layout="horizontal"
+    marker="number"
+    summary="show"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.horizontal))"
+  />
+  <Checklist
+    id="home-checklist"
+    :title="ui.onboarding.checklist.title"
+    :tasks="checklist"
+    :empty="ui.empty.tasks"
+    :progressLabel="ui.onboarding.checklist.progress"
+    layout="card"
+    progress="bar"
+    marker="check"
+    detail="expand"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.expand))"
+  />
+  <TourCallout
+    id="home-tour"
+    :title="ui.vibe.tour.title"
+    :text="ui.vibe.tour.text"
+    :target="ui.vibe.tour.target"
+    :position="ui.vibe.tour.position"
+    :skip="ui.vibe.tour.skip"
+    :next="ui.vibe.tour.next"
+    placement="below"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.below))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.vue b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.vue
new file mode 100644
index 0000000..f188092
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/SetupPage.vue
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!-- The setup page of ThemeOnboardingFlowScreen. -->
+<script setup lang="ts">
+import {
+  Checklist,
+  EmptyPanel,
+  PageIntro,
+  Stepper,
+  tpl,
+  uniqLabel,
+  type Step,
+  type Task,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="setup-pagehead"
+    :title="ui.pages.onboardingFlow.setup.title"
+    :text="ui.pages.onboardingFlow.setup.text"
+    :cta="ui.pages.onboardingFlow.setup.cta"
+    href="#/tour"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <Stepper
+    id="setup-stepper"
+    :title="ui.onboarding.stepper.title"
+    :steps="steps"
+    :current="2"
+    :stepLabel="ui.onboarding.stepper.stepLabel"
+    :back="ui.onboarding.stepper.back"
+    :next="ui.onboarding.stepper.next"
+    layout="vertical"
+    marker="number"
+    summary="show"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.stepper, ui.blocks.variants.stepper.vertical))"
+  />
+  <Checklist
+    id="setup-checklist"
+    :title="ui.onboarding.checklist.title"
+    :tasks="checklist"
+    :empty="ui.empty.tasks"
+    :progressLabel="ui.onboarding.checklist.progress"
+    layout="card"
+    progress="bar"
+    marker="check"
+    detail="always"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.card))"
+  />
+  <EmptyPanel
+    id="setup-empty"
+    :title="ui.dashboard.empty.inbox.title"
+    :text="ui.dashboard.empty.inbox.text"
+    :cta="ui.dashboard.empty.inbox.cta"
+    ctaHref="#/"
+    layout="card"
+    actions="button"
+    visual="icon"
+    size="compact"
+    icon="inbox"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.empty, ui.blocks.variants.empty.compact))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/TourPage.vue b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/TourPage.vue
new file mode 100644
index 0000000..63bbcb2
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/TourPage.vue
@@ -0,0 +1,91 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!-- The tour page of ThemeOnboardingFlowScreen. -->
+<script setup lang="ts">
+import {
+  Checklist,
+  PageIntro,
+  TourCallout,
+  VideoModal,
+  tpl,
+  uniqLabel,
+  type Chapter,
+  type Task,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="tour-pagehead"
+    :title="ui.pages.onboardingFlow.tour.title"
+    :text="ui.pages.onboardingFlow.tour.text"
+    :cta="ui.pages.onboardingFlow.tour.cta"
+    href="#/"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <TourCallout
+    id="tour-tour-1"
+    :title="ui.vibe.tour.title"
+    :text="ui.vibe.tour.text"
+    :target="ui.vibe.tour.target"
+    :position="ui.vibe.tour.position"
+    :skip="ui.vibe.tour.skip"
+    :next="ui.vibe.tour.next"
+    placement="above"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.above))"
+  />
+  <TourCallout
+    id="tour-tour-2"
+    :title="ui.vibe.tour.title"
+    :text="ui.vibe.tour.text"
+    :target="ui.vibe.tour.target"
+    :position="ui.vibe.tour.position"
+    :skip="ui.vibe.tour.skip"
+    :next="ui.vibe.tour.next"
+    placement="end"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.tour, ui.blocks.variants.tour.end))"
+  />
+  <Checklist
+    id="tour-checklist"
+    :title="ui.onboarding.checklist.title"
+    :tasks="checklist"
+    :empty="ui.empty.tasks"
+    :progressLabel="ui.onboarding.checklist.progress"
+    layout="card"
+    progress="text"
+    marker="check"
+    detail="always"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.text))"
+  />
+  <VideoModal
+    id="tour-videomodal"
+    :title="ui.vibe.modal.title"
+    :text="ui.vibe.modal.text"
+    :close="ui.vibe.modal.close"
+    :play="ui.vibe.modal.play"
+    :chaptersTitle="ui.vibe.modal.chapters"
+    :chapters="chapters"
+    size="default"
+    outline="chapters"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.chapters))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.vue b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.vue
new file mode 100644
index 0000000..2b26440
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeOnboardingFlowScreen/WelcomePage.vue
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-onboarding-flow.json -->
+<!-- The welcome page of ThemeOnboardingFlowScreen. -->
+<script setup lang="ts">
+import { Checklist, PageIntro, VideoModal, tpl, uniqLabel, type Chapter, type Task } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { checklist as checklistEntries } from "@ui8kit/app-shared/data/checklist";
+import { chapters as chaptersEntries } from "@ui8kit/app-shared/data/chapters";
+
+const CHECKLIST_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","done":"metadata.done.value"} as const;
+const CHAPTERS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value"} as const;
+
+const checklist = fromCodex<Task>(checklistEntries, CHECKLIST_FIELDS, CODEX);
+const chapters = fromCodex<Chapter>(chaptersEntries, CHAPTERS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="welcome-pagehead"
+    :title="ui.pages.onboardingFlow.welcome.title"
+    :text="ui.pages.onboardingFlow.welcome.text"
+    :cta="ui.pages.onboardingFlow.welcome.cta"
+    href="#/setup"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <VideoModal
+    id="welcome-videomodal"
+    :title="ui.vibe.modal.title"
+    :text="ui.vibe.modal.text"
+    :close="ui.vibe.modal.close"
+    :play="ui.vibe.modal.play"
+    :chaptersTitle="ui.vibe.modal.chapters"
+    :chapters="chapters"
+    size="default"
+    outline="none"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.videomodal, ui.blocks.variants.videomodal.default))"
+  />
+  <Checklist
+    id="welcome-checklist"
+    :title="ui.onboarding.checklist.title"
+    :tasks="checklist"
+    :empty="ui.empty.tasks"
+    :progressLabel="ui.onboarding.checklist.progress"
+    layout="card"
+    progress="bar"
+    marker="number"
+    detail="always"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.checklist, ui.blocks.variants.checklist.numbered))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemePromoCampaignScreen.vue b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen.vue
new file mode 100644
index 0000000..92d8362
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen.vue
@@ -0,0 +1,96 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!--
+  Campaign pages: announcement bars in every position and tone, sign-up forms, calls to action with a pattern,
+  and the cookie notice.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, FooterSplit, NavBar, type Feature, type MegaGroup, type Stat } from "@ui8kit/vue-ui";
+import HomePage from "./ThemePromoCampaignScreen/HomePage.vue";
+import LaunchPage from "./ThemePromoCampaignScreen/LaunchPage.vue";
+import OfferPage from "./ThemePromoCampaignScreen/OfferPage.vue";
+import NoticesPage from "./ThemePromoCampaignScreen/NoticesPage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemePromoCampaignScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { features as featuresEntries } from "@ui8kit/app-shared/data/features";
+import { contacts as contactsEntries } from "@ui8kit/app-shared/data/contacts";
+import { community as communityEntries } from "@ui8kit/app-shared/data/community";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"launch","area":"launch"},
+  {"path":"offer","area":"offer"},
+  {"path":"notices","area":"notices"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const FEATURES_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const CONTACTS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const COMMUNITY_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const features = fromCodex<Feature>(featuresEntries, FEATURES_FIELDS, CODEX);
+const contacts = fromCodex<Feature>(contactsEntries, CONTACTS_FIELDS, CODEX);
+const community = fromCodex<Feature>(communityEntries, COMMUNITY_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <LaunchPage v-if="route.area === 'launch'" />
+    <OfferPage v-else-if="route.area === 'offer'" />
+    <NoticesPage v-else-if="route.area === 'notices'" />
+    <HomePage v-else />
+  </Block>
+  <FooterSplit
+    id="after-footersplit"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.marketing.footerSplit.tagline"
+    :copyright="ui.marketing.footerSplit.copyright"
+    :groups="sitemap"
+    :extras="{ stats, points: features, contacts, channels: community }"
+    :labels="ui.marketing.footerSplit.labels"
+    layout="newsletter"
+    mediaSide="start"
+    tone="default"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/HomePage.vue
new file mode 100644
index 0000000..86829dd
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/HomePage.vue
@@ -0,0 +1,108 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!-- The home page of ThemePromoCampaignScreen. -->
+<script setup lang="ts">
+import {
+  AnnouncementBar,
+  CookieBanner,
+  CtaBand,
+  HeroClassic,
+  NewsletterForm,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="home-hero"
+    :title="ui.pages.promoCampaign.home.title"
+    :text="ui.pages.promoCampaign.home.text"
+    :actions="{
+      cta: ui.pages.promoCampaign.home.cta,
+      href: '#/launch',
+      secondary: ui.site.home.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'cluster',
+      side: 'end',
+    }"
+    layout="split"
+    scale="default"
+    tone="default"
+    density="roomy"
+  />
+  <AnnouncementBar
+    :label="ui.promo.announcement.label"
+    :text="ui.promo.announcement.text"
+    :cta="ui.promo.announcement.cta"
+    ctaHref="#/pricing"
+    :dismissLabel="ui.promo.announcement.dismiss"
+    :badgeLabel="ui.promo.announcement.badge"
+    tone="muted"
+    layout="center"
+    dismiss="hide"
+    badge="show"
+    position="top"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))"
+  />
+  <NewsletterForm
+    id="home-newsletter"
+    :title="ui.promo.newsletter.title"
+    :text="ui.promo.newsletter.text"
+    :label="ui.promo.newsletter.label"
+    :submit="ui.promo.newsletter.submit"
+    :consent="ui.promo.newsletter.consent"
+    layout="split"
+    terms="hide"
+    tone="default"
+    align="start"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.split))"
+  />
+  <CtaBand
+    id="home-cta"
+    :title="ui.site.home.ctaTitle"
+    :text="ui.site.home.ctaText"
+    :actions="{
+      cta: ui.site.home.ctaButton,
+      href: '#/pricing',
+      secondary: ui.site.home.ctaSecondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'form',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="band"
+    tone="muted"
+    proof="none"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.form))"
+  />
+  <CookieBanner
+    id="home-cookie"
+    :title="ui.promo.cookie.title"
+    :text="ui.promo.cookie.text"
+    :accept="ui.promo.cookie.accept"
+    :decline="ui.promo.cookie.decline"
+    :settings="ui.promo.cookie.settings"
+    layout="card"
+    actions="two"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.card))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/LaunchPage.vue b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/LaunchPage.vue
new file mode 100644
index 0000000..1885c71
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/LaunchPage.vue
@@ -0,0 +1,112 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!-- The launch page of ThemePromoCampaignScreen. -->
+<script setup lang="ts">
+import {
+  AnnouncementBar,
+  CtaBand,
+  HeroClassic,
+  LogoCloud,
+  NewsletterForm,
+  tpl,
+  uniqLabel,
+  type CodeLine,
+  type Logo,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { terminal as terminalEntries } from "@ui8kit/app-shared/data/terminal";
+import { logos as logosEntries } from "@ui8kit/app-shared/data/logos";
+
+const TERMINAL_FIELDS = {"id":"id","text":"title","kind":"metadata.line_kind.value"} as const;
+const LOGOS_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value"} as const;
+
+const terminal = fromCodex<CodeLine>(terminalEntries, TERMINAL_FIELDS, CODEX);
+const logos = fromCodex<Logo>(logosEntries, LOGOS_FIELDS, CODEX);
+</script>
+
+<template>
+  <HeroClassic
+    id="launch-hero"
+    :title="ui.pages.promoCampaign.launch.title"
+    :text="ui.pages.promoCampaign.launch.text"
+    :actions="{
+      cta: ui.pages.promoCampaign.launch.cta,
+      href: '#/offer',
+      secondary: ui.cases.saas.hero.secondary,
+      secondaryHref: '#/pricing',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'two',
+    }"
+    :media="{
+      codeTitle: ui.vibe.code.title,
+      prompt: ui.vibe.code.prompt,
+      lines: terminal,
+      kind: 'image',
+      side: 'end',
+    }"
+    layout="split"
+    scale="default"
+    tone="default"
+    density="roomy"
+  />
+  <AnnouncementBar
+    :label="ui.promo.announcement.label"
+    :text="ui.promo.announcement.text"
+    :cta="ui.promo.announcement.cta"
+    ctaHref="#/pricing"
+    :dismissLabel="ui.promo.announcement.dismiss"
+    :badgeLabel="ui.promo.announcement.badge"
+    tone="default"
+    layout="center"
+    dismiss="hide"
+    badge="none"
+    position="top"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bar))"
+  />
+  <NewsletterForm
+    id="launch-newsletter"
+    :title="ui.promo.newsletter.title"
+    :text="ui.promo.newsletter.text"
+    :label="ui.promo.newsletter.label"
+    :submit="ui.promo.newsletter.submit"
+    :consent="ui.promo.newsletter.consent"
+    layout="inline"
+    terms="hide"
+    tone="default"
+    align="center"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.inline))"
+  />
+  <LogoCloud
+    id="launch-logos"
+    :title="ui.marketing.logos.title"
+    :logos="logos"
+    :empty="ui.empty.logos"
+    layout="grid"
+    cols="4"
+    item="tile"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.logos, ui.blocks.variants.logos.tiles4))"
+  />
+  <CtaBand
+    id="launch-cta"
+    :title="ui.cases.saas.cta.title"
+    :text="ui.cases.saas.cta.text"
+    :actions="{
+      cta: ui.cases.saas.cta.cta,
+      href: '#/pricing',
+      secondary: ui.cases.saas.cta.secondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'two',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="band"
+    tone="muted"
+    proof="none"
+    density="roomy"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.saas))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/NoticesPage.vue b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/NoticesPage.vue
new file mode 100644
index 0000000..88158e7
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/NoticesPage.vue
@@ -0,0 +1,86 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!-- The notices page of ThemePromoCampaignScreen. -->
+<script setup lang="ts">
+import { AnnouncementBar, CookieBanner, NewsletterForm, PageIntro, tpl, uniqLabel } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <PageIntro
+    id="notices-pagehead"
+    :title="ui.pages.promoCampaign.notices.title"
+    :text="ui.pages.promoCampaign.notices.text"
+    :cta="ui.pages.promoCampaign.notices.cta"
+    href="#/"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <AnnouncementBar
+    :label="ui.promo.announcement.label"
+    :text="ui.promo.announcement.text"
+    :cta="ui.promo.announcement.cta"
+    ctaHref="#/pricing"
+    :dismissLabel="ui.promo.announcement.dismiss"
+    :badgeLabel="ui.promo.announcement.badge"
+    tone="default"
+    layout="center"
+    dismiss="show"
+    badge="none"
+    position="top"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.dismissible))"
+  />
+  <AnnouncementBar
+    :label="ui.promo.announcement.label"
+    :text="ui.promo.announcement.text"
+    :cta="ui.promo.announcement.cta"
+    ctaHref="#/pricing"
+    :dismissLabel="ui.promo.announcement.dismiss"
+    :badgeLabel="ui.promo.announcement.badge"
+    tone="default"
+    layout="split"
+    dismiss="show"
+    badge="none"
+    position="bottom"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.bottom))"
+  />
+  <CookieBanner
+    id="notices-cookie-3"
+    :title="ui.promo.cookie.title"
+    :text="ui.promo.cookie.text"
+    :accept="ui.promo.cookie.accept"
+    :decline="ui.promo.cookie.decline"
+    :settings="ui.promo.cookie.settings"
+    layout="bar"
+    actions="three"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.settings))"
+  />
+  <CookieBanner
+    id="notices-cookie-4"
+    :title="ui.promo.cookie.title"
+    :text="ui.promo.cookie.text"
+    :accept="ui.promo.cookie.accept"
+    :decline="ui.promo.cookie.decline"
+    :settings="ui.promo.cookie.settings"
+    layout="bar"
+    actions="two"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cookie, ui.blocks.variants.cookie.bar))"
+  />
+  <NewsletterForm
+    id="notices-newsletter"
+    :title="ui.promo.newsletter.title"
+    :text="ui.promo.newsletter.text"
+    :label="ui.promo.newsletter.label"
+    :submit="ui.promo.newsletter.submit"
+    :consent="ui.promo.newsletter.consent"
+    layout="inline"
+    terms="show"
+    tone="muted"
+    align="start"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.muted))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/OfferPage.vue b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/OfferPage.vue
new file mode 100644
index 0000000..9e92d11
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemePromoCampaignScreen/OfferPage.vue
@@ -0,0 +1,95 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-promo-campaign.json -->
+<!-- The offer page of ThemePromoCampaignScreen. -->
+<script setup lang="ts">
+import { AnnouncementBar, CtaBand, NewsletterForm, PageIntro, tpl, uniqLabel } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <PageIntro
+    id="offer-pagehead"
+    :title="ui.pages.promoCampaign.offer.title"
+    :text="ui.pages.promoCampaign.offer.text"
+    :cta="ui.pages.promoCampaign.offer.cta"
+    href="#/notices"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <AnnouncementBar
+    :label="ui.promo.announcement.label"
+    :text="ui.promo.announcement.text"
+    :cta="ui.promo.announcement.cta"
+    ctaHref="#/pricing"
+    :dismissLabel="ui.promo.announcement.dismiss"
+    :badgeLabel="ui.promo.announcement.badge"
+    tone="muted"
+    layout="center"
+    dismiss="hide"
+    badge="show"
+    position="top"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.badge))"
+  />
+  <AnnouncementBar
+    :label="ui.promo.announcement.label"
+    :text="ui.promo.announcement.text"
+    :cta="ui.promo.announcement.cta"
+    ctaHref="#/pricing"
+    :dismissLabel="ui.promo.announcement.dismiss"
+    :badgeLabel="ui.promo.announcement.badge"
+    tone="muted"
+    layout="split"
+    dismiss="hide"
+    badge="none"
+    position="top"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.split))"
+  />
+  <AnnouncementBar
+    :label="ui.promo.announcement.label"
+    :text="ui.cases.shop.announcement.text"
+    :cta="ui.cases.shop.announcement.cta"
+    ctaHref="#/pricing"
+    :dismissLabel="ui.promo.announcement.dismiss"
+    :badgeLabel="ui.promo.announcement.badge"
+    tone="muted"
+    layout="center"
+    dismiss="show"
+    badge="none"
+    position="top"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.announcement, ui.blocks.variants.announcement.shop))"
+  />
+  <CtaBand
+    id="offer-cta"
+    :title="ui.cases.shop.cta.title"
+    :text="ui.cases.shop.cta.text"
+    :actions="{
+      cta: ui.cases.shop.cta.cta,
+      href: '#/pricing',
+      secondary: ui.cases.shop.cta.secondary,
+      secondaryHref: '#/',
+      emailLabel: ui.promo.newsletter.label,
+      mode: 'one',
+    }"
+    :quote="{ text: ui.vibe.cta.quote, by: ui.vibe.cta.quoteBy }"
+    layout="split"
+    tone="default"
+    proof="none"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.cta, ui.blocks.variants.cta.shop))"
+  />
+  <NewsletterForm
+    id="offer-newsletter"
+    :title="ui.promo.newsletter.title"
+    :text="ui.promo.newsletter.text"
+    :label="ui.promo.newsletter.label"
+    :submit="ui.promo.newsletter.submit"
+    :consent="ui.promo.newsletter.consent"
+    layout="inline"
+    terms="show"
+    tone="default"
+    align="center"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.newsletter, ui.blocks.variants.newsletter.consent))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeSupportCenterScreen.vue b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen.vue
new file mode 100644
index 0000000..80fef1d
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen.vue
@@ -0,0 +1,85 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!--
+  A help center: channels, FAQ as tabs, chat and search, contact forms, and the pages for a missing or moved
+  address.
+-->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Block, NavBar, SitemapFooter, type MegaGroup } from "@ui8kit/vue-ui";
+import HomePage from "./ThemeSupportCenterScreen/HomePage.vue";
+import FaqPage from "./ThemeSupportCenterScreen/FaqPage.vue";
+import ContactPage from "./ThemeSupportCenterScreen/ContactPage.vue";
+import MissingPage from "./ThemeSupportCenterScreen/MissingPage.vue";
+import MovedPage from "./ThemeSupportCenterScreen/MovedPage.vue";
+import { fromCodex, matchRoute, type UrlPort } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { toggleTheme } from "@ui8kit/app-shared/runtime/theme";
+import { ui } from "@ui8kit/app-shared/content";
+import { navOf } from "@ui8kit/app-shared/nav/ThemeSupportCenterScreen";
+import { sitemap as sitemapEntries } from "@ui8kit/app-shared/data/sitemap";
+
+const ROUTES = [
+  {"path":"","area":"home"},
+  {"path":"faq","area":"faq"},
+  {"path":"contact","area":"contact"},
+  {"path":"missing","area":"missing"},
+  {"path":"moved","area":"moved"},
+] as const;
+const SITEMAP_FIELDS = {"id":"id","title":"title","icon":"metadata.icon.value","links":"id|menu","href":"slug|route"} as const;
+
+const { url } = defineProps<{ url: UrlPort }>();
+
+const sitemap = fromCodex<MegaGroup>(sitemapEntries, SITEMAP_FIELDS, CODEX);
+const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: "home", params: {} as Record<string, string> });
+const nav = computed(() => navOf(route.value.area));
+const actions = { toggleTheme };
+</script>
+
+<template>
+  <NavBar
+    :label="ui.vibe.nav.label"
+    :brand="ui.site.header.brand"
+    :links="nav.links"
+    :current="nav.current"
+    :actions="{
+      cta: ui.site.header.cta,
+      href: '#/',
+      login: ui.site.header.login,
+      loginHref: '#/login',
+      mode: 'cta',
+      themeLabel: ui.theme.toggle,
+    }"
+    :search="{ label: ui.vibe.nav.search, shortcut: ui.vibe.nav.shortcut }"
+    layout="inline"
+    over="none"
+    tone="default"
+    brandHref="#/"
+    :skip="ui.site.header.skip"
+    @theme="() => actions.toggleTheme()"
+  />
+  <Block tag="main" id="main-content" :tabindex="-1" data-testid="main">
+    <FaqPage v-if="route.area === 'faq'" />
+    <ContactPage v-else-if="route.area === 'contact'" />
+    <MissingPage v-else-if="route.area === 'missing'" />
+    <MovedPage v-else-if="route.area === 'moved'" />
+    <HomePage v-else />
+  </Block>
+  <SitemapFooter
+    id="after-sitemap"
+    :label="ui.vibe.sitemap.label"
+    :brand="ui.site.header.brand"
+    :tagline="ui.vibe.sitemap.tagline"
+    :copyright="ui.vibe.sitemap.copyright"
+    :groups="sitemap"
+    :signup="{
+      title: ui.vibe.sitemap.signupTitle,
+      label: ui.vibe.sitemap.signupLabel,
+      submit: ui.vibe.sitemap.signupSubmit,
+      mode: 'none',
+    }"
+    :status="{ label: ui.vibe.sitemap.status, mode: 'show' }"
+    layout="columns"
+    density="default"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/ContactPage.vue b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/ContactPage.vue
new file mode 100644
index 0000000..308b5a2
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/ContactPage.vue
@@ -0,0 +1,65 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The contact page of ThemeSupportCenterScreen. -->
+<script setup lang="ts">
+import { ContactForm, PageIntro, SupportChannels, tpl, uniqLabel, type Feature } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="contact-pagehead"
+    :title="ui.pages.supportCenter.contact.title"
+    :text="ui.pages.supportCenter.contact.text"
+    :cta="ui.pages.supportCenter.contact.cta"
+    href="#/missing"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <ContactForm
+    id="contact-contact-1"
+    :title="ui.support.contact.title"
+    :text="ui.support.contact.text"
+    :labels="ui.support.contact.labels"
+    :details="channels"
+    layout="single"
+    fields="full"
+    terms="hide"
+    page="section"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.single))"
+  />
+  <SupportChannels
+    id="contact-channels"
+    :title="ui.support.channels.title"
+    :channels="channels"
+    :empty="ui.empty.channels"
+    :open="ui.support.channels.open"
+    layout="list"
+    cols="1-3"
+    action="link"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.list))"
+  />
+  <ContactForm
+    id="contact-contact-3"
+    :title="ui.support.contact.title"
+    :text="ui.support.contact.text"
+    :labels="ui.support.contact.labels"
+    :details="channels"
+    layout="single"
+    fields="full"
+    terms="show"
+    page="section"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.consent))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/FaqPage.vue b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/FaqPage.vue
new file mode 100644
index 0000000..c014325
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/FaqPage.vue
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The faq page of ThemeSupportCenterScreen. -->
+<script setup lang="ts">
+import { FaqList, PageIntro, tpl, uniqLabel, type Faq, type FaqTab } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="faq-pagehead"
+    :title="ui.pages.supportCenter.faq.title"
+    :text="ui.pages.supportCenter.faq.text"
+    :cta="ui.pages.supportCenter.faq.cta"
+    href="#/contact"
+    align="start"
+    tone="default"
+    density="default"
+  />
+  <FaqList
+    id="faq-faq-1"
+    :title="ui.site.pricing.faqTitle"
+    :items="faq"
+    :empty="ui.vibe.faq.empty"
+    :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+    :filter="{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: '', mode: 'none' }"
+    layout="chat"
+    cols="1"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.chat))"
+  />
+  <FaqList
+    id="faq-faq-2"
+    :title="ui.site.pricing.faqTitle"
+    :items="faq"
+    :empty="ui.vibe.faq.empty"
+    :search="{ label: ui.vibe.faq.search, query: '', mode: 'field' }"
+    :filter="{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: '', mode: 'none' }"
+    layout="accordion"
+    cols="1"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.search))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/HomePage.vue b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/HomePage.vue
new file mode 100644
index 0000000..610a96a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/HomePage.vue
@@ -0,0 +1,146 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The home page of ThemeSupportCenterScreen. -->
+<script setup lang="ts">
+import {
+  ContactForm,
+  FaqList,
+  MediaList,
+  PageIntro,
+  SupportChannels,
+  tpl,
+  uniqLabel,
+  type Category,
+  type Faq,
+  type FaqTab,
+  type Feature,
+  type Post,
+  type Review,
+  type Stat,
+  type Step,
+} from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+import { stats as statsEntries } from "@ui8kit/app-shared/data/stats";
+import { steps as stepsEntries } from "@ui8kit/app-shared/data/steps";
+import { posts as postsEntries } from "@ui8kit/app-shared/data/posts";
+import { categories as categoriesEntries } from "@ui8kit/app-shared/data/categories";
+import { reviews as reviewsEntries } from "@ui8kit/app-shared/data/reviews";
+import { faq as faqEntries } from "@ui8kit/app-shared/data/faq";
+import { faqtabs as faqtabsEntries } from "@ui8kit/app-shared/data/faqtabs";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const STATS_FIELDS = {
+  "id": "id",
+  "label": "title",
+  "value": "metadata.value.value|number",
+  "icon": "metadata.icon.value",
+  "hint": "metadata.hint.value",
+} as const;
+const STEPS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+const POSTS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "excerpt": "excerpt",
+  "category": "terms|term:category",
+  "author": "author_id|author",
+  "date": "metadata.date.value|date",
+  "minutes": "metadata.minutes.value",
+  "icon": "metadata.icon.value",
+  "href": "slug|route",
+  "image": "featured_media_id|media",
+} as const;
+const CATEGORIES_FIELDS = {"id":"id","name":"title","icon":"metadata.icon.value","count":"metadata.count.value","href":"slug|route"} as const;
+const REVIEWS_FIELDS = {
+  "id": "id",
+  "title": "title",
+  "author": "author_id|author",
+  "rating": "metadata.rating.value",
+  "text": "metadata.text.value",
+  "date": "metadata.date.value|date",
+} as const;
+const FAQ_FIELDS = {"id":"id","question":"title","answer":"metadata.answer.value","category":"terms|term-slug:faq_category"} as const;
+const FAQTABS_FIELDS = {"id":"id","title":"title","value":"metadata.value.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+const stats = fromCodex<Stat>(statsEntries, STATS_FIELDS, CODEX);
+const steps = fromCodex<Step>(stepsEntries, STEPS_FIELDS, CODEX);
+const posts = fromCodex<Post>(postsEntries, POSTS_FIELDS, CODEX);
+const categories = fromCodex<Category>(categoriesEntries, CATEGORIES_FIELDS, CODEX);
+const reviews = fromCodex<Review>(reviewsEntries, REVIEWS_FIELDS, CODEX);
+const faq = fromCodex<Faq>(faqEntries, FAQ_FIELDS, CODEX);
+const faqtabs = fromCodex<FaqTab>(faqtabsEntries, FAQTABS_FIELDS, CODEX);
+</script>
+
+<template>
+  <PageIntro
+    id="home-pagehead"
+    :title="ui.pages.supportCenter.home.title"
+    :text="ui.pages.supportCenter.home.text"
+    :cta="ui.pages.supportCenter.home.cta"
+    href="#/faq"
+    align="center"
+    tone="default"
+    density="default"
+  />
+  <SupportChannels
+    id="home-channels"
+    :title="ui.support.channels.title"
+    :channels="channels"
+    :empty="ui.empty.channels"
+    :open="ui.support.channels.open"
+    layout="grid"
+    cols="1-3"
+    action="link"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.grid))"
+  />
+  <MediaList
+    id="home-medialist"
+    :title="ui.marketing.mediaList.topics.title"
+    :lead="ui.marketing.mediaList.topics.lead"
+    :badge="ui.marketing.mediaList.topics.badge"
+    :labels="{
+      list: ui.marketing.mediaList.topics.list,
+      count: ui.marketing.mediaList.count,
+      minutes: ui.content.labels.minutes,
+      featured: ui.marketing.mediaList.featured,
+      rating: ui.testimonials.rating,
+      figures: ui.marketing.mediaList.supportFigures,
+    }"
+    :actions="{ mode: 'one', cta: ui.marketing.mediaList.topics.cta, href: '#/start' }"
+    :extras="{ stats, steps, posts, topics: categories, channels, reviews }"
+    layout="topics"
+    mediaSide="end"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.medialist, ui.blocks.variants.medialist.topicRows))"
+  />
+  <FaqList
+    id="home-faq"
+    :title="ui.site.pricing.faqTitle"
+    :items="faq"
+    :empty="ui.vibe.faq.empty"
+    :search="{ label: ui.vibe.faq.search, query: '', mode: 'none' }"
+    :filter="{ tabs: faqtabs, label: ui.vibe.faq.tabs, category: 'billing', mode: 'categories' }"
+    layout="accordion"
+    cols="1"
+    tone="default"
+    density="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.faq, ui.blocks.variants.faq.tabs))"
+  />
+  <ContactForm
+    id="home-contact"
+    :title="ui.support.contact.title"
+    :text="ui.support.contact.text"
+    :labels="ui.support.contact.labels"
+    :details="channels"
+    layout="split"
+    fields="full"
+    terms="hide"
+    page="section"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.contact, ui.blocks.variants.contact.split))"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/MissingPage.vue b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/MissingPage.vue
new file mode 100644
index 0000000..621f52a
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/MissingPage.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The missing page of ThemeSupportCenterScreen. -->
+<script setup lang="ts">
+import { ErrorPage } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+</script>
+
+<template>
+  <ErrorPage
+    id="missing-errorpage"
+    :title="ui.pages.supportCenter.missing.title"
+    :text="ui.pages.supportCenter.missing.text"
+    :status="ui.vibe.error.status"
+    :actions="{
+      cta: ui.pages.supportCenter.missing.cta,
+      href: '#/moved',
+      secondary: ui.vibe.error.secondary,
+      secondaryHref: '#/',
+      mode: 'one',
+    }"
+    layout="centered"
+    code="show"
+    tone="default"
+  />
+</template>
diff --git a/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/MovedPage.vue b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/MovedPage.vue
new file mode 100644
index 0000000..846ceb3
--- /dev/null
+++ b/apps/host-vue/xgen/screens/ThemeSupportCenterScreen/MovedPage.vue
@@ -0,0 +1,45 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/screens/theme-support-center.json -->
+<!-- The moved page of ThemeSupportCenterScreen. -->
+<script setup lang="ts">
+import { ErrorPage, SupportChannels, tpl, uniqLabel, type Feature } from "@ui8kit/vue-ui";
+import { fromCodex } from "@ui8kit/app-shared/runtime/core";
+import { CODEX } from "@ui8kit/app-shared/runtime/codex";
+import { ui } from "@ui8kit/app-shared/content";
+import { channels as channelsEntries } from "@ui8kit/app-shared/data/channels";
+
+const CHANNELS_FIELDS = {"id":"id","title":"title","text":"metadata.text.value","icon":"metadata.icon.value"} as const;
+
+const channels = fromCodex<Feature>(channelsEntries, CHANNELS_FIELDS, CODEX);
+</script>
+
+<template>
+  <ErrorPage
+    id="moved-errorpage"
+    :title="ui.pages.supportCenter.moved.title"
+    :text="ui.pages.supportCenter.moved.text"
+    :status="ui.vibe.error.status"
+    :actions="{
+      cta: ui.pages.supportCenter.moved.cta,
+      href: '#/',
+      secondary: ui.vibe.error.secondary,
+      secondaryHref: '#/',
+      mode: 'one',
+    }"
+    layout="split"
+    code="show"
+    tone="default"
+  />
+  <SupportChannels
+    id="moved-channels"
+    :title="ui.support.channels.title"
+    :channels="channels"
+    :empty="ui.empty.channels"
+    :open="ui.support.channels.open"
+    layout="grid"
+    cols="1-2"
+    action="link"
+    tone="default"
+    :landmarkLabel="uniqLabel(tpl(ui.blocks.landmark, ui.blocks.names.channels, ui.blocks.variants.channels.twoUp))"
+  />
+</template>
diff --git a/bricks/_dsl.ts b/bricks/_dsl.ts
deleted file mode 100644
index 1cacede..0000000
--- a/bricks/_dsl.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * Authoring prelude for brick definitions — re-exports the IR constructors
- * and provides factories for the recurring prop shapes so each definition
- * stays close to the prose of its spec.
- */
-
-import type { BrickDef, PartDef, PropDef } from "../src/domain/model";
-import type { VariantRecipe } from "../src/domain/recipe";
-
-export * from "../src/domain/expr";
-export {
-  attrBool,
-  attrClass,
-  attrExpr,
-  attrRest,
-  attrStatic,
-  el,
-  forEach,
-  fwd,
-  slot,
-  text,
-  when,
-} from "../src/domain/model";
-export type { AttrSpec, BrickDef, ClassSpec, PartDef, PropDef, TagSpec } from "../src/domain/model";
-
-// ---------------------------------------------------------------------------
-// Prop factories
-// ---------------------------------------------------------------------------
-
-export const pClass = (docs = "adds Tailwind utilities"): PropDef => ({
-  name: "Class",
-  type: "string",
-  cva: false,
-  docs,
-});
-
-export const pAttrs = (): PropDef => ({ name: "Attrs", type: "attrs", cva: false });
-
-export const pChildren = (): PropDef => ({ name: "Children", type: "children", cva: false });
-
-export const pVariant = (docs = "sets appearance preset"): PropDef => ({
-  name: "Variant",
-  type: "string",
-  cva: true,
-  docs,
-});
-
-export const pSize = (docs = "sets density preset"): PropDef => ({
-  name: "Size",
-  type: "string",
-  cva: true,
-  docs,
-});
-
-/** A cva prop bound to an explicit recipe dimension key. */
-export const pCva = (name: string, cvaKey: string, docs?: string): PropDef => ({
-  name,
-  type: "string",
-  cva: true,
-  cvaKey,
-  docs,
-});
-
-export const pStr = (name: string, docs?: string): PropDef => ({
-  name,
-  type: "string",
-  cva: false,
-  docs,
-});
-
-export const pBool = (name: string, docs?: string): PropDef => ({
-  name,
-  type: "bool",
-  cva: false,
-  docs,
-});
-
-export const pInt = (name: string, docs?: string): PropDef => ({
-  name,
-  type: "int",
-  cva: false,
-  docs,
-});
-
-/** Forwarded verbatim as a DOM attribute; TS runtimes absorb it via rest. */
-export const pPass = (name: string, docs?: string): PropDef => ({
-  name,
-  type: "string",
-  cva: false,
-  passthrough: true,
-  docs,
-});
-
-/** The recurring ID/Role/TabIndex/AriaLabel quartet on form controls. */
-export const controlPassthroughProps = (): PropDef[] => [
-  pPass("ID", "element id"),
-  pPass("Role", "ARIA role override"),
-  pPass("TabIndex", "tab order override"),
-  pPass("AriaLabel", "accessible name for unlabeled controls"),
-];
-
-// ---------------------------------------------------------------------------
-// Brick assembly
-// ---------------------------------------------------------------------------
-
-export interface BrickInput {
-  id: string;
-  dir: string;
-  file?: string;
-  goPackage?: string;
-  docs: string;
-  parts: PartDef[];
-  recordTypes?: BrickDef["recordTypes"];
-  /** recipeId → [variants.json file name, parsed recipe]. */
-  recipes?: Record<string, { file: string; recipe: VariantRecipe }>;
-}
-
-export function brick(input: BrickInput): BrickDef {
-  const recipes: Record<string, VariantRecipe> = {};
-  const recipeFiles: Record<string, string> = {};
-  for (const [id, entry] of Object.entries(input.recipes ?? {})) {
-    recipes[id] = entry.recipe;
-    recipeFiles[id] = entry.file;
-  }
-  return {
-    id: input.id,
-    dir: input.dir,
-    file: input.file,
-    goPackage: input.goPackage,
-    docs: input.docs,
-    parts: input.parts,
-    recordTypes: input.recordTypes,
-    recipes,
-    recipeFiles,
-  };
-}
diff --git a/bricks/alert/alert.def.ts b/bricks/alert/alert.def.ts
deleted file mode 100644
index 8320368..0000000
--- a/bricks/alert/alert.def.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  defaultIfEmpty,
-  el,
-  oneOfOr,
-  pAttrs,
-  pChildren,
-  pClass,
-  prop,
-  pStr,
-  pVariant,
-  slot,
-} from "../_dsl";
-import alertVariants from "./alert.variants.json";
-
-export default brick({
-  id: "ui.alert",
-  dir: "alert",
-  docs:
-    "Alert displays a static status or informational message.\n" +
-    "Renders a live region with role=status by default; children carry the message body.",
-  recipes: { alert: { file: "alert.variants.json", recipe: alertVariants } },
-  parts: [
-    {
-      name: "Alert",
-      docs: "Alert renders a div with alert or status semantics.",
-      recipeId: "alert",
-      asChild: true,
-      classes: { recipe: { variant: "Variant" } },
-      props: [
-        pClass(),
-        pVariant("default, destructive, or wireframe preset"),
-        {
-          name: "Role",
-          type: "string",
-          cva: false,
-          enumValues: ["status", "alert"],
-          docs: "status or alert (defaults to status)",
-        },
-        {
-          name: "AriaLive",
-          type: "string",
-          cva: false,
-          enumValues: ["off", "polite", "assertive"],
-          docs: "polite or assertive (defaults to polite)",
-        },
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "div",
-        [
-          attrClass(),
-          attrExpr("role", oneOfOr(prop("Role"), ["status", "alert"], "status")),
-          attrExpr("aria-live", defaultIfEmpty(prop("AriaLive"), "polite")),
-          attrRest(),
-        ],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/alert/alert.variants.json b/bricks/alert/alert.variants.json
deleted file mode 100644
index 2a441d3..0000000
--- a/bricks/alert/alert.variants.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "id": "ui.alert",
-  "base": "rounded-lg border px-4 py-3 shadow-sm outline-none ring-offset-background gap-6",
-  "keys": ["variant"],
-  "defaults": {
-    "variant": "default"
-  },
-  "byKey": {
-    "variant": {
-      "default": "bg-card text-card-foreground",
-      "destructive": "border-destructive bg-destructive/10 text-destructive",
-      "success": "border-primary bg-primary/10 text-primary",
-      "warning": "border-border bg-accent text-accent-foreground"
-    }
-  }
-}
diff --git a/bricks/badge/badge.data.json b/bricks/badge/badge.data.json
deleted file mode 100644
index 23ddefb..0000000
--- a/bricks/badge/badge.data.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.badge",
-  "showcase": {
-    "size.lg": {
-      "props": {
-        "Size": "lg",
-        "Variant": "default"
-      }
-    },
-    "size.sm": {
-      "props": {
-        "Size": "sm",
-        "Variant": "default"
-      }
-    },
-    "variant.default": {
-      "props": {
-        "Size": "default",
-        "Variant": "default"
-      }
-    },
-    "variant.destructive": {
-      "props": {
-        "Size": "default",
-        "Variant": "destructive"
-      }
-    },
-    "variant.outline": {
-      "props": {
-        "Size": "default",
-        "Variant": "outline"
-      }
-    },
-    "variant.secondary": {
-      "props": {
-        "Size": "default",
-        "Variant": "secondary"
-      }
-    }
-  }
-}
diff --git a/bricks/badge/badge.def.ts b/bricks/badge/badge.def.ts
deleted file mode 100644
index 56fb28b..0000000
--- a/bricks/badge/badge.def.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import {
-  attrClass,
-  attrRest,
-  brick,
-  el,
-  pAttrs,
-  pChildren,
-  pClass,
-  pSize,
-  pVariant,
-  slot,
-} from "../_dsl";
-import badgeVariants from "./badge.variants.json";
-
-export default brick({
-  id: "ui.badge",
-  dir: "badge",
-  docs: "Badge shows a short status label.\nBadge uses variant and size presets.",
-  recipes: { badge: { file: "badge.variants.json", recipe: badgeVariants } },
-  parts: [
-    {
-      name: "Badge",
-      docs: "Badge renders label text in a div wrapper.",
-      recipeId: "badge",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant("color preset: default, secondary, destructive, outline"),
-        pSize("density preset: default, sm, lg"),
-        pClass(),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el("div", [attrClass(), attrRest()], [slot()]),
-    },
-  ],
-});
diff --git a/bricks/badge/badge.variants.json b/bricks/badge/badge.variants.json
deleted file mode 100644
index b1e4017..0000000
--- a/bricks/badge/badge.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "inline-flex items-center rounded-full border px-2 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  "byKey": {
-    "size": {
-      "default": "px-2 py-1 text-xs",
-      "lg": "px-3 py-1 text-sm",
-      "sm": "px-2 py-1 text-xs"
-    },
-    "variant": {
-      "default": "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-      "destructive": "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-      "outline": "text-foreground",
-      "secondary": "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.badge",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/block/block.data.json b/bricks/block/block.data.json
deleted file mode 100644
index e14a462..0000000
--- a/bricks/block/block.data.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.block",
-  "showcase": {
-    "tag.footer": {
-      "props": {
-        "Class": "border-t border-border",
-        "Tag": "footer"
-      }
-    },
-    "tag.header": {
-      "props": {
-        "Class": "border-b border-border",
-        "Tag": "header"
-      }
-    },
-    "tag.main": {
-      "props": {
-        "Class": "min-h-screen",
-        "Tag": "main"
-      }
-    },
-    "tag.nav": {
-      "props": {
-        "Class": "py-2",
-        "Tag": "nav"
-      }
-    },
-    "tag.section": {
-      "props": {
-        "Class": "py-8",
-        "Tag": "section"
-      }
-    }
-  }
-}
diff --git a/bricks/block/block.def.ts b/bricks/block/block.def.ts
deleted file mode 100644
index 3d8bc84..0000000
--- a/bricks/block/block.def.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {
-  attrClass,
-  attrRest,
-  brick,
-  el,
-  fwd,
-  pAttrs,
-  pChildren,
-  pClass,
-  pPass,
-  pStr,
-  slot,
-} from "../_dsl";
-import blockVariants from "./block.variants.json";
-
-export default brick({
-  id: "ui.block",
-  dir: "block",
-  docs:
-    "Block is a top-level page landmark (main, header, section, nav, …).\n" +
-    "Use for document structure; do not nest Block inside Block.",
-  recipes: { block: { file: "block.variants.json", recipe: blockVariants } },
-  parts: [
-    {
-      name: "Block",
-      docs: "Block renders a resolved landmark element with children.",
-      recipeId: "block",
-      asChild: true,
-      classes: { recipe: {} },
-      props: [
-        pPass("ID"),
-        pClass(),
-        pStr("Tag", "semantic landmark: main, header, section, footer, nav, article, aside, figure"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        { kind: "resolved", fromProp: "Tag", fallback: "div", group: "Layout" },
-        [attrClass(), fwd("id", "ID"), attrRest()],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/block/block.variants.json b/bricks/block/block.variants.json
deleted file mode 100644
index 406906a..0000000
--- a/bricks/block/block.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.block",
-  "keys": []
-}
diff --git a/bricks/box/box.data.json b/bricks/box/box.data.json
deleted file mode 100644
index a789db0..0000000
--- a/bricks/box/box.data.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.box",
-  "showcase": {
-    "tag.default": {
-      "props": {
-        "Tag": "div"
-      }
-    },
-    "class.padded": {
-      "props": {
-        "Class": "p-4 rounded-md border border-border"
-      }
-    }
-  }
-}
diff --git a/bricks/box/box.def.ts b/bricks/box/box.def.ts
deleted file mode 100644
index 87d4df0..0000000
--- a/bricks/box/box.def.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { attrClass, attrRest, brick, el, pAttrs, pChildren, pClass, pStr, slot } from "../_dsl";
-import boxVariants from "./box.variants.json";
-
-export default brick({
-  id: "ui.box",
-  dir: "box",
-  docs:
-    "Box is a generic layout wrapper for internal sections.\n" +
-    "Not for top-level landmarks — use Block for page regions.",
-  recipes: { box: { file: "box.variants.json", recipe: boxVariants } },
-  parts: [
-    {
-      name: "Box",
-      docs: "Box renders a div layout wrapper.",
-      recipeId: "box",
-      asChild: true,
-      classes: { recipe: {} },
-      props: [
-        pClass(),
-        pStr("Tag", "div only. Use Block for landmarks (aside, section, header, nav)."),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        { kind: "resolved", fromProp: "Tag", fallback: "div", group: "BoxAllowed" },
-        [attrClass(), attrRest()],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/box/box.variants.json b/bricks/box/box.variants.json
deleted file mode 100644
index 6feadda..0000000
--- a/bricks/box/box.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.box",
-  "keys": []
-}
diff --git a/bricks/breadcrumb/breadcrumb.def.ts b/bricks/breadcrumb/breadcrumb.def.ts
deleted file mode 100644
index 73d732e..0000000
--- a/bricks/breadcrumb/breadcrumb.def.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import {
-  and,
-  attrClass,
-  attrExpr,
-  attrRest,
-  attrStatic,
-  brick,
-  cond,
-  el,
-  forEach,
-  fwd,
-  isSet,
-  item,
-  lit,
-  not,
-  pAttrs,
-  pClass,
-  pPass,
-  text,
-  when,
-} from "../_dsl";
-
-const itemClasses = {
-  staticBase: "text-sm",
-  extra: [
-    cond(
-      item("Current"),
-      lit("font-medium"),
-      cond(
-        item("Disabled"),
-        lit("text-muted-foreground"),
-        lit("text-primary underline-offset-4 hover:underline")
-      )
-    ),
-  ],
-  includeClassProp: false,
-};
-
-const itemAttrs = [
-  attrClass(itemClasses),
-  attrExpr("aria-current", lit("page"), { when: item("Current") }),
-];
-
-export default brick({
-  id: "ui.breadcrumb",
-  dir: "breadcrumb",
-  docs:
-    "Breadcrumb shows the current page location within a hierarchy.\n" +
-    "Renders nav with ordered links and aria-current on the active item.",
-  recordTypes: [
-    {
-      name: "BreadcrumbItem",
-      fields: [
-        { name: "Label", type: "string" },
-        { name: "Href", type: "string" },
-        { name: "Current", type: "bool", docs: "marks the active page (aria-current=page)" },
-        { name: "Disabled", type: "bool" },
-      ],
-    },
-  ],
-  parts: [
-    {
-      name: "Breadcrumb",
-      docs: "Breadcrumb renders the full navigation trail.",
-      classes: { staticBase: "text-sm" },
-      props: [
-        pClass(),
-        { name: "Items", type: "items", cva: false, itemsOf: "BreadcrumbItem" },
-        pPass("AriaLabel"),
-        pPass("DataUI8Kit", "opt-in behavior hook; empty emits nothing"),
-        pAttrs(),
-      ],
-      render: el(
-        "nav",
-        [attrClass(), fwd("aria-label", "AriaLabel"), fwd("data-ui8kit", "DataUI8Kit"), attrRest()],
-        [
-          el(
-            "ol",
-            [attrStatic("class", "flex flex-wrap items-center gap-2")],
-            [
-              forEach("Items", [
-                el(
-                  "li",
-                  [attrStatic("class", "inline-flex items-center")],
-                  [
-                    when(
-                      and(isSet(item("Href")), not(item("Disabled"))),
-                      [
-                        el(
-                          "a",
-                          [attrExpr("href", item("Href")), ...itemAttrs],
-                          [text(item("Label"))]
-                        ),
-                      ],
-                      [el("span", itemAttrs, [text(item("Label"))])]
-                    ),
-                  ]
-                ),
-              ]),
-            ]
-          ),
-        ]
-      ),
-    },
-  ],
-});
diff --git a/bricks/button/button.data.json b/bricks/button/button.data.json
deleted file mode 100644
index 4cf0afc..0000000
--- a/bricks/button/button.data.json
+++ /dev/null
@@ -1,107 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.button",
-  "showcase": {
-    "size.icon": {
-      "props": {
-        "AriaLabel": "Settings",
-        "Size": "icon",
-        "Variant": "default"
-      }
-    },
-    "size.lg": {
-      "props": {
-        "Size": "lg",
-        "Variant": "default"
-      }
-    },
-    "size.sm": {
-      "props": {
-        "Size": "sm",
-        "Variant": "default"
-      }
-    },
-    "state.disabled": {
-      "props": {
-        "Disabled": true,
-        "Variant": "default"
-      }
-    },
-    "state.reset": {
-      "props": {
-        "Type": "reset",
-        "Variant": "outline"
-      }
-    },
-    "state.submit": {
-      "props": {
-        "Type": "submit",
-        "Variant": "default"
-      }
-    },
-    "variant.default": {
-      "props": {
-        "Size": "default",
-        "Variant": "default"
-      }
-    },
-    "variant.destructive": {
-      "props": {
-        "Size": "default",
-        "Variant": "destructive"
-      }
-    },
-    "variant.ghost": {
-      "props": {
-        "Size": "sm",
-        "Variant": "ghost"
-      }
-    },
-    "variant.link": {
-      "props": {
-        "Variant": "link"
-      }
-    },
-    "variant.outline": {
-      "props": {
-        "Size": "sm",
-        "Variant": "outline"
-      }
-    },
-    "variant.secondary": {
-      "props": {
-        "Size": "default",
-        "Variant": "secondary"
-      }
-    },
-    "composition.aschild-link": {
-      "props": {
-        "AsChild": true,
-        "Variant": "outline",
-        "Size": "sm"
-      }
-    },
-    "composition.href": {
-      "props": {
-        "Href": "/cart",
-        "Variant": "default",
-        "Size": "default"
-      }
-    },
-    "composition.href-external": {
-      "props": {
-        "Href": "https://example.com",
-        "External": true,
-        "Variant": "outline",
-        "Size": "sm"
-      }
-    },
-    "composition.href-disabled": {
-      "props": {
-        "Href": "/cart",
-        "Disabled": true,
-        "Variant": "secondary"
-      }
-    }
-  }
-}
diff --git a/bricks/button/button.def.ts b/bricks/button/button.def.ts
deleted file mode 100644
index bdf4086..0000000
--- a/bricks/button/button.def.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  cond,
-  controlPassthroughProps,
-  derived,
-  el,
-  eq,
-  fwd,
-  isSet,
-  lit,
-  oneOfOr,
-  or,
-  pAttrs,
-  pBool,
-  pChildren,
-  pClass,
-  pPass,
-  prop,
-  pSize,
-  pStr,
-  pVariant,
-  slot,
-  when,
-} from "../_dsl";
-import buttonVariants from "./button.variants.json";
-
-export default brick({
-  id: "ui.button",
-  dir: "button",
-  docs:
-    "Button triggers an action on click.\n" +
-    "Optional Href renders an anchor with button appearance (CTA navigation).\n" +
-    "For exotic roots, use ButtonClasses (Templ/Svelte/Vue/Solid) or asChild (React).\n" +
-    "Prefer Link for prose/semantic navigation.",
-  recipes: { button: { file: "button.variants.json", recipe: buttonVariants } },
-  parts: [
-    {
-      name: "Button",
-      docs:
-        "Button renders a button element, or an anchor when Href is set.\n" +
-        "Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.",
-      recipeId: "button",
-      asChild: true,
-      classes: {
-        recipe: { variant: "Variant", size: "Size" },
-        state: [{ test: prop("Disabled"), classes: "pointer-events-none opacity-50" }],
-      },
-      derived: {
-        target: cond(isSet(prop("Target")), prop("Target"), cond(prop("External"), lit("_blank"), lit(""))),
-        rel: cond(
-          isSet(prop("Rel")),
-          prop("Rel"),
-          cond(
-            or(prop("External"), eq(derived("target"), lit("_blank"))),
-            lit("noopener noreferrer"),
-            lit("")
-          )
-        ),
-      },
-      props: [
-        pVariant("appearance preset: default, secondary, destructive, outline, ghost, link"),
-        pSize("density preset: default, sm, lg, icon"),
-        pClass(),
-        pStr("Type", "button type: button, submit, reset (ignored when Href is set)"),
-        pPass("Form", "links button to a form id (ignored when Href is set)"),
-        pStr("Href", "when set, renders an anchor with button appearance"),
-        pStr("Target", "explicit target; External implies _blank (anchor mode)"),
-        pStr("Rel", "explicit rel; external links default to noopener noreferrer (anchor mode)"),
-        pBool("External", "opens in a new tab with safe rel defaults (anchor mode)"),
-        pBool("Disabled", "blocks interaction"),
-        ...controlPassthroughProps(),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: when(
-        isSet(prop("Href")),
-        [
-          el(
-            "a",
-            [
-              attrExpr("href", prop("Href")),
-              attrClass(),
-              fwd("id", "ID"),
-              attrExpr("target", derived("target")),
-              attrExpr("rel", derived("rel")),
-              fwd("role", "Role"),
-              fwd("aria-label", "AriaLabel"),
-              attrExpr("aria-disabled", lit("true"), { when: prop("Disabled") }),
-              attrExpr("tabindex", lit(-1), { when: prop("Disabled") }),
-              attrRest(),
-            ],
-            [slot()]
-          ),
-        ],
-        [
-          el(
-            "button",
-            [
-              attrExpr("type", oneOfOr(prop("Type"), ["submit", "reset"], "button")),
-              attrClass(),
-              attrBool("disabled", prop("Disabled")),
-              fwd("id", "ID"),
-              fwd("form", "Form"),
-              fwd("role", "Role"),
-              fwd("tabindex", "TabIndex"),
-              fwd("aria-label", "AriaLabel"),
-              attrRest(),
-            ],
-            [slot()]
-          ),
-        ]
-      ),
-    },
-  ],
-});
diff --git a/bricks/button/button.variants.json b/bricks/button/button.variants.json
deleted file mode 100644
index b65cfe1..0000000
--- a/bricks/button/button.variants.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-9 px-4 py-2",
-      "icon": "h-9 w-9",
-      "lg": "h-10 rounded-md px-6",
-      "sm": "h-8 gap-1.5 rounded-md px-3"
-    },
-    "variant": {
-      "default": "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-      "destructive": "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
-      "ghost": "hover:bg-accent hover:text-accent-foreground",
-      "link": "text-primary underline-offset-4 hover:underline",
-      "outline": "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
-      "secondary": "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.button",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/card/card.def.ts b/bricks/card/card.def.ts
deleted file mode 100644
index 54b51ba..0000000
--- a/bricks/card/card.def.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-  attrClass,
-  attrRest,
-  brick,
-  el,
-  pAttrs,
-  pChildren,
-  pClass,
-  pVariant,
-  slot,
-  type PartDef,
-} from "../_dsl";
-import cardVariants from "./card.variants.json";
-
-function staticPart(name: string, docs: string, tag: string, base: string): PartDef {
-  return {
-    name,
-    docs,
-    classes: { staticBase: base },
-    props: [pClass(), pAttrs(), pChildren()],
-    render: el(tag, [attrClass(), attrRest()], [slot()]),
-  };
-}
-
-export default brick({
-  id: "ui.card",
-  dir: "card",
-  docs:
-    "Card groups related content in one bordered surface.\n" +
-    "Card uses header, content, and footer slots.\n" +
-    "For semantic root elements (section, article), use CardClasses on a manual wrapper.",
-  recipes: { card: { file: "card.variants.json", recipe: cardVariants } },
-  parts: [
-    {
-      name: "Card",
-      docs: "Card renders the bordered surface wrapper.",
-      recipeId: "card",
-      asChild: true,
-      classes: { recipe: { variant: "Variant" } },
-      props: [
-        pClass(),
-        pVariant("surface preset: default, raised, kpi, muted, ghost, compact, flat, accent"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el("div", [attrClass(), attrRest()], [slot()]),
-    },
-    staticPart(
-      "CardHeader",
-      "CardHeader renders the top slot.",
-      "div",
-      "grid auto-rows-min items-start gap-1.5 px-6"
-    ),
-    {
-      name: "CardTitle",
-      docs: "CardTitle renders heading text at the As level (default h2).",
-      classes: { staticBase: "font-semibold leading-none" },
-      props: [
-        pClass(),
-        {
-          name: "As",
-          type: "int",
-          cva: false,
-          enumValues: ["1", "2", "3", "4", "5", "6"],
-          goType: "uiutils.HeadingLevel",
-          docs: "maps to h1-h6 (default h2)",
-        },
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el({ kind: "heading", fromProp: "As" }, [attrClass(), attrRest()], [slot()]),
-    },
-    staticPart(
-      "CardDescription",
-      "CardDescription renders a muted subtitle in a p element.",
-      "p",
-      "text-sm text-muted-foreground"
-    ),
-    staticPart("CardContent", "CardContent renders the padded main body slot.", "div", "px-6"),
-    staticPart(
-      "CardFooter",
-      "CardFooter renders the bottom action slot.",
-      "div",
-      "flex items-center px-6"
-    ),
-  ],
-});
diff --git a/bricks/card/card.variants.json b/bricks/card/card.variants.json
deleted file mode 100644
index d16baf7..0000000
--- a/bricks/card/card.variants.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "id": "ui.card",
-  "base": "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
-  "keys": ["variant"],
-  "defaults": {
-    "variant": "default"
-  },
-  "byKey": {
-    "variant": {
-      "default": "",
-      "raised": "",
-      "kpi": "bg-card/50",
-      "muted": "bg-muted/40",
-      "ghost": "border-dashed bg-background shadow-none",
-      "compact": "p-4",
-      "flat": "shadow-none",
-      "accent": "border-transparent bg-accent/30"
-    }
-  }
-}
diff --git a/bricks/checkbox/checkbox.data.json b/bricks/checkbox/checkbox.data.json
deleted file mode 100644
index 125035b..0000000
--- a/bricks/checkbox/checkbox.data.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.checkbox",
-  "showcase": {
-    "state.checked": {
-      "props": {
-        "Checked": true,
-        "ID": "terms",
-        "Name": "terms"
-      }
-    },
-    "state.disabled": {
-      "props": {
-        "Checked": true,
-        "Disabled": true,
-        "Name": "locked"
-      }
-    },
-    "state.unchecked": {
-      "props": {
-        "ID": "terms",
-        "Name": "terms"
-      }
-    }
-  }
-}
diff --git a/bricks/checkbox/checkbox.def.ts b/bricks/checkbox/checkbox.def.ts
deleted file mode 100644
index 2a7ef89..0000000
--- a/bricks/checkbox/checkbox.def.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrRest,
-  attrStatic,
-  brick,
-  controlPassthroughProps,
-  el,
-  fwd,
-  pAttrs,
-  pBool,
-  pClass,
-  pPass,
-  prop,
-  pSize,
-  pVariant,
-} from "../_dsl";
-import checkboxVariants from "./checkbox.variants.json";
-
-export default brick({
-  id: "ui.checkbox",
-  dir: "checkbox",
-  docs:
-    "Checkbox is a native boolean form control.\n" +
-    "Wireframe styling via Variant and Size; supports standard ARIA attrs.",
-  recipes: { checkbox: { file: "checkbox.variants.json", recipe: checkboxVariants } },
-  parts: [
-    {
-      name: "Checkbox",
-      docs: "Checkbox renders a styled input[type=checkbox].",
-      recipeId: "checkbox",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pPass("Name"),
-        pPass("Value"),
-        pBool("Checked"),
-        pBool("Disabled"),
-        pBool("Required"),
-        ...controlPassthroughProps(),
-        pAttrs(),
-      ],
-      render: el(
-        "input",
-        [
-          fwd("id", "ID"),
-          attrStatic("type", "checkbox"),
-          fwd("name", "Name"),
-          fwd("value", "Value"),
-          attrClass(),
-          attrBool("checked", prop("Checked")),
-          attrBool("disabled", prop("Disabled")),
-          attrBool("required", prop("Required")),
-          fwd("role", "Role"),
-          fwd("tabindex", "TabIndex"),
-          fwd("aria-label", "AriaLabel"),
-          attrRest(),
-        ],
-        [],
-        { void: true }
-      ),
-    },
-  ],
-});
diff --git a/bricks/checkbox/checkbox.variants.json b/bricks/checkbox/checkbox.variants.json
deleted file mode 100644
index e9cc01c..0000000
--- a/bricks/checkbox/checkbox.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-4 w-4",
-      "lg": "h-5 w-5",
-      "sm": "h-4 w-4",
-      "xs": "h-3 w-3"
-    },
-    "variant": {
-      "default": "border-primary",
-      "ghost": "border-primary bg-muted/30",
-      "outline": "border-primary"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.checkbox",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/container/container.data.json b/bricks/container/container.data.json
deleted file mode 100644
index 04c2638..0000000
--- a/bricks/container/container.data.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.container",
-  "showcase": {
-    "tag.default": {
-      "props": {
-        "Class": "mx-auto max-w-5xl px-6",
-        "Tag": "div"
-      }
-    },
-    "tag.main": {
-      "props": {
-        "Class": "mx-auto max-w-5xl px-6",
-        "Tag": "main"
-      }
-    }
-  }
-}
diff --git a/bricks/container/container.def.ts b/bricks/container/container.def.ts
deleted file mode 100644
index f47ee28..0000000
--- a/bricks/container/container.def.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { attrClass, attrRest, brick, el, pAttrs, pChildren, pClass, pStr, slot } from "../_dsl";
-import containerVariants from "./container.variants.json";
-
-export default brick({
-  id: "ui.container",
-  dir: "container",
-  docs:
-    "Container wraps page content with a constrained width shell.\n" +
-    "Optional main or section tag for inner layout regions.",
-  recipes: { container: { file: "container.variants.json", recipe: containerVariants } },
-  parts: [
-    {
-      name: "Container",
-      docs: "Container renders the outer content shell.",
-      recipeId: "container",
-      asChild: true,
-      classes: { recipe: {} },
-      props: [pClass(), pStr("Tag", "div, main, or section"), pAttrs(), pChildren()],
-      render: el(
-        { kind: "resolved", fromProp: "Tag", fallback: "div", group: "Container" },
-        [attrClass(), attrRest()],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/container/container.variants.json b/bricks/container/container.variants.json
deleted file mode 100644
index 017083a..0000000
--- a/bricks/container/container.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.container",
-  "keys": []
-}
diff --git a/bricks/dialog/dialog.data.json b/bricks/dialog/dialog.data.json
deleted file mode 100644
index adc551d..0000000
--- a/bricks/dialog/dialog.data.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.dialog",
-  "showcase": {
-    "variant.default": {
-      "props": {
-        "AriaLabel": "Dialog",
-        "Size": "default",
-        "Variant": "default"
-      }
-    },
-    "variant.sheet": {
-      "props": {
-        "AriaLabel": "Panel",
-        "Size": "full",
-        "Variant": "sheet"
-      }
-    }
-  }
-}
diff --git a/bricks/dialog/dialog.def.ts b/bricks/dialog/dialog.def.ts
deleted file mode 100644
index 1c111a9..0000000
--- a/bricks/dialog/dialog.def.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrRest,
-  brick,
-  el,
-  fwd,
-  pAttrs,
-  pBool,
-  pChildren,
-  pClass,
-  pPass,
-  prop,
-  pSize,
-  pVariant,
-  slot,
-} from "../_dsl";
-import dialogVariants from "./dialog.variants.json";
-
-export default brick({
-  id: "ui.dialog",
-  dir: "dialog",
-  docs:
-    "Dialog renders a native dialog root with an optional behavior hook.\n" +
-    "The data-ui8kit hook defaults off; the registry ships no client JS.",
-  recipes: { dialog: { file: "dialog.variants.json", recipe: dialogVariants } },
-  parts: [
-    {
-      name: "Dialog",
-      docs: "Dialog renders a native dialog element.",
-      recipeId: "dialog",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pPass("ID"),
-        pBool("Open", "initial open state (static attribute only)"),
-        pPass("DataUI8Kit", "opt-in behavior hook; empty emits nothing"),
-        pPass("AriaLabel"),
-        pPass("AriaLabelledBy"),
-        pPass("AriaDescribedBy"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "dialog",
-        [
-          attrClass(),
-          attrBool("open", prop("Open")),
-          fwd("id", "ID"),
-          fwd("data-ui8kit", "DataUI8Kit"),
-          fwd("aria-label", "AriaLabel"),
-          fwd("aria-labelledby", "AriaLabelledBy"),
-          fwd("aria-describedby", "AriaDescribedBy"),
-          attrRest(),
-        ],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/dialog/dialog.variants.json b/bricks/dialog/dialog.variants.json
deleted file mode 100644
index e5eebbd..0000000
--- a/bricks/dialog/dialog.variants.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "m-auto rounded-lg border border-border bg-background text-foreground shadow-lg backdrop:bg-background/80",
-  "byKey": {
-    "size": {
-      "default": "w-full max-w-lg",
-      "full": "h-full w-full max-w-none",
-      "lg": "w-full max-w-2xl",
-      "sm": "w-full max-w-sm",
-      "xl": "w-full max-w-4xl"
-    },
-    "variant": {
-      "card": "bg-card text-card-foreground",
-      "default": "",
-      "sheet": "min-h-screen rounded-none"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.dialog",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/disclosure/disclosure.data.json b/bricks/disclosure/disclosure.data.json
deleted file mode 100644
index ac60758..0000000
--- a/bricks/disclosure/disclosure.data.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.disclosure",
-  "showcase": {
-    "state.open": {
-      "props": {
-        "Open": true
-      }
-    },
-    "variant.default": {
-      "props": {
-        "Variant": "default"
-      }
-    }
-  }
-}
diff --git a/bricks/disclosure/disclosure.def.ts b/bricks/disclosure/disclosure.def.ts
deleted file mode 100644
index aace934..0000000
--- a/bricks/disclosure/disclosure.def.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrRest,
-  brick,
-  el,
-  pAttrs,
-  pBool,
-  pChildren,
-  pClass,
-  prop,
-  pSize,
-  pVariant,
-  slot,
-} from "../_dsl";
-import disclosureVariants from "./disclosure.variants.json";
-import summaryVariants from "./summary.variants.json";
-
-export default brick({
-  id: "ui.disclosure",
-  dir: "disclosure",
-  docs:
-    "Disclosure renders native details and summary elements.\n" +
-    "Open is a static attribute only — no controlled-state contract.",
-  recipes: {
-    disclosure: { file: "disclosure.variants.json", recipe: disclosureVariants },
-    summary: { file: "summary.variants.json", recipe: summaryVariants },
-  },
-  parts: [
-    {
-      name: "Disclosure",
-      docs: "Disclosure renders native details.",
-      recipeId: "disclosure",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pBool("Open", "initial open state (static attribute only)"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "details",
-        [attrClass(), attrBool("open", prop("Open")), attrRest()],
-        [slot()]
-      ),
-    },
-    {
-      name: "Summary",
-      docs: "Summary renders native summary.",
-      recipeId: "summary",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [pVariant(), pSize(), pClass(), pAttrs(), pChildren()],
-      render: el("summary", [attrClass(), attrRest()], [slot()]),
-    },
-  ],
-});
diff --git a/bricks/disclosure/disclosure.variants.json b/bricks/disclosure/disclosure.variants.json
deleted file mode 100644
index bc0fd7a..0000000
--- a/bricks/disclosure/disclosure.variants.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "group",
-  "byKey": {
-    "size": {
-      "default": "text-sm",
-      "lg": "text-base",
-      "sm": "text-sm"
-    },
-    "variant": {
-      "card": "rounded-md border border-border bg-card text-card-foreground",
-      "default": "rounded-md border border-border",
-      "ghost": ""
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.disclosure",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/disclosure/summary.variants.json b/bricks/disclosure/summary.variants.json
deleted file mode 100644
index 230e552..0000000
--- a/bricks/disclosure/summary.variants.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "flex cursor-pointer list-none items-center justify-between gap-2 [\u0026::-webkit-details-marker]:hidden",
-  "byKey": {
-    "size": {
-      "default": "text-sm",
-      "lg": "text-base",
-      "sm": "text-sm"
-    },
-    "variant": {
-      "card": "px-4 py-3 font-medium",
-      "default": "px-4 py-3 font-medium",
-      "ghost": "py-2 font-medium"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.disclosure.summary",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/form/controls.data.json b/bricks/form/controls.data.json
deleted file mode 100644
index d13710e..0000000
--- a/bricks/form/controls.data.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.form.controls",
-  "showcase": {
-    "group.fieldset": {
-      "props": {
-        "Variant": "card"
-      }
-    },
-    "status.progress": {
-      "props": {
-        "Max": "100",
-        "Value": "40"
-      }
-    }
-  }
-}
diff --git a/bricks/form/controls.def.ts b/bricks/form/controls.def.ts
deleted file mode 100644
index 5eb087d..0000000
--- a/bricks/form/controls.def.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrRest,
-  brick,
-  el,
-  fwd,
-  pAttrs,
-  pBool,
-  pChildren,
-  pClass,
-  pPass,
-  prop,
-  pSize,
-  pStr,
-  pVariant,
-  slot,
-  text,
-} from "../_dsl";
-import fieldsetVariants from "./fieldset.variants.json";
-import legendVariants from "./legend.variants.json";
-import meterVariants from "./meter.variants.json";
-import progressVariants from "./progress.variants.json";
-
-export default brick({
-  id: "ui.form.controls",
-  dir: "form",
-  file: "controls",
-  goPackage: "form",
-  docs: "Form controls covers fieldset, legend, datalist, output, meter, and progress.",
-  recipes: {
-    fieldset: { file: "fieldset.variants.json", recipe: fieldsetVariants },
-    legend: { file: "legend.variants.json", recipe: legendVariants },
-    meter: { file: "meter.variants.json", recipe: meterVariants },
-    progress: { file: "progress.variants.json", recipe: progressVariants },
-  },
-  parts: [
-    {
-      name: "Fieldset",
-      docs: "Fieldset renders a native fieldset.",
-      recipeId: "fieldset",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pPass("Name"),
-        pPass("Form"),
-        pBool("Disabled"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "fieldset",
-        [
-          attrClass(),
-          fwd("name", "Name"),
-          fwd("form", "Form"),
-          attrBool("disabled", prop("Disabled")),
-          attrRest(),
-        ],
-        [slot()]
-      ),
-    },
-    {
-      name: "Legend",
-      docs: "Legend renders a native legend.",
-      recipeId: "legend",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [pVariant(), pSize(), pClass(), pAttrs(), pChildren()],
-      render: el("legend", [attrClass(), attrRest()], [slot()]),
-    },
-    {
-      name: "DataList",
-      docs: "DataList renders a native datalist.",
-      classes: {},
-      props: [pPass("ID"), pClass(), pAttrs(), pChildren()],
-      render: el("datalist", [fwd("id", "ID"), attrClass(), attrRest()], [slot()]),
-    },
-    {
-      name: "DataOption",
-      docs: "DataOption renders an option inside a datalist.",
-      props: [pPass("Value"), pPass("Label"), pAttrs()],
-      render: el("option", [fwd("value", "Value"), fwd("label", "Label"), attrRest()], []),
-    },
-    {
-      name: "Output",
-      docs: "Output renders a native output element.",
-      classes: {},
-      props: [
-        pPass("ID"),
-        pClass(),
-        pPass("Name"),
-        pPass("For"),
-        pStr("Value", "initial output text"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "output",
-        [fwd("id", "ID"), attrClass(), fwd("name", "Name"), fwd("for", "For"), attrRest()],
-        [text(prop("Value")), slot()]
-      ),
-    },
-    {
-      name: "Meter",
-      docs: "Meter renders a native meter.",
-      recipeId: "meter",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pPass("ID"),
-        pClass(),
-        pPass("Value"),
-        pPass("Min"),
-        pPass("Max"),
-        pPass("Low"),
-        pPass("High"),
-        pPass("Optimum"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "meter",
-        [
-          fwd("id", "ID"),
-          attrClass(),
-          fwd("value", "Value"),
-          fwd("min", "Min"),
-          fwd("max", "Max"),
-          fwd("low", "Low"),
-          fwd("high", "High"),
-          fwd("optimum", "Optimum"),
-          attrRest(),
-        ],
-        [slot()]
-      ),
-    },
-    {
-      name: "Progress",
-      docs: "Progress renders a native progress element.",
-      recipeId: "progress",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pPass("ID"),
-        pClass(),
-        pPass("Value"),
-        pPass("Max"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "progress",
-        [fwd("id", "ID"), attrClass(), fwd("value", "Value"), fwd("max", "Max"), attrRest()],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/form/fieldset.variants.json b/bricks/form/fieldset.variants.json
deleted file mode 100644
index bd0e9a8..0000000
--- a/bricks/form/fieldset.variants.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "grid gap-4",
-  "byKey": {
-    "size": {
-      "default": "gap-4",
-      "lg": "gap-6",
-      "sm": "gap-2"
-    },
-    "variant": {
-      "card": "rounded-md border border-border p-4",
-      "default": "",
-      "inline": "flex flex-wrap items-start gap-4"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.form.fieldset",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/form/form-description.variants.json b/bricks/form/form-description.variants.json
deleted file mode 100644
index 616593c..0000000
--- a/bricks/form/form-description.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "text-xs text-muted-foreground",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.form.description",
-  "keys": []
-}
diff --git a/bricks/form/form-item.variants.json b/bricks/form/form-item.variants.json
deleted file mode 100644
index 3e34e1e..0000000
--- a/bricks/form/form-item.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "grid gap-2",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.form.item",
-  "keys": []
-}
diff --git a/bricks/form/form-message.variants.json b/bricks/form/form-message.variants.json
deleted file mode 100644
index e9764dd..0000000
--- a/bricks/form/form-message.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "text-sm font-medium text-destructive",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.form.message",
-  "keys": []
-}
diff --git a/bricks/form/form.data.json b/bricks/form/form.data.json
deleted file mode 100644
index b00a7b5..0000000
--- a/bricks/form/form.data.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.form",
-  "showcase": {
-    "layout.field-with-label": {
-      "props": {
-        "Method": "post"
-      }
-    },
-    "layout.with-message": {
-      "props": {}
-    }
-  }
-}
diff --git a/bricks/form/form.def.ts b/bricks/form/form.def.ts
deleted file mode 100644
index 0e20a8d..0000000
--- a/bricks/form/form.def.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrRest,
-  attrStatic,
-  brick,
-  el,
-  fwd,
-  pAttrs,
-  pBool,
-  pChildren,
-  pClass,
-  pPass,
-  prop,
-  slot,
-  type PartDef,
-} from "../_dsl";
-import formVariants from "./form.variants.json";
-import formItemVariants from "./form-item.variants.json";
-import formDescriptionVariants from "./form-description.variants.json";
-import formMessageVariants from "./form-message.variants.json";
-
-function recipePart(
-  name: string,
-  docs: string,
-  tag: string,
-  recipeId: string,
-  extraAttrs: ReturnType<typeof attrStatic>[] = []
-): PartDef {
-  return {
-    name,
-    docs,
-    recipeId,
-    classes: { recipe: {} },
-    props: [pClass(), pAttrs(), pChildren()],
-    render: el(tag, [attrClass(), ...extraAttrs, attrRest()], [slot()]),
-  };
-}
-
-export default brick({
-  id: "ui.form",
-  dir: "form",
-  docs:
-    "Form primitives: form wrapper, field item, description, and validation message.\n" +
-    "Composes with Label, Input, and other controls.",
-  recipes: {
-    form: { file: "form.variants.json", recipe: formVariants },
-    "form-item": { file: "form-item.variants.json", recipe: formItemVariants },
-    "form-description": { file: "form-description.variants.json", recipe: formDescriptionVariants },
-    "form-message": { file: "form-message.variants.json", recipe: formMessageVariants },
-  },
-  parts: [
-    {
-      name: "Form",
-      docs: "Form renders a vertical grid form container.",
-      recipeId: "form",
-      classes: { recipe: {} },
-      props: [
-        pPass("ID"),
-        pClass(),
-        pPass("Action"),
-        pPass("Method"),
-        pPass("Enctype"),
-        pPass("Autocomplete"),
-        pPass("Name"),
-        pPass("Target"),
-        pBool("NoValidate"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "form",
-        [
-          fwd("id", "ID"),
-          attrClass(),
-          fwd("action", "Action"),
-          fwd("method", "Method"),
-          fwd("enctype", "Enctype"),
-          fwd("autocomplete", "Autocomplete"),
-          fwd("name", "Name"),
-          fwd("target", "Target"),
-          attrBool("novalidate", prop("NoValidate")),
-          attrRest(),
-        ],
-        [slot()]
-      ),
-    },
-    recipePart(
-      "FormItem",
-      "FormItem groups a single field with spacing for label and control.",
-      "div",
-      "form-item"
-    ),
-    recipePart(
-      "FormDescription",
-      "FormDescription renders muted helper copy below a control.",
-      "p",
-      "form-description"
-    ),
-    recipePart(
-      "FormMessage",
-      "FormMessage renders destructive validation feedback.",
-      "p",
-      "form-message",
-      [attrStatic("role", "alert")]
-    ),
-  ],
-});
diff --git a/bricks/form/form.variants.json b/bricks/form/form.variants.json
deleted file mode 100644
index ff3ecd4..0000000
--- a/bricks/form/form.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.form",
-  "keys": []
-}
diff --git a/bricks/form/legend.variants.json b/bricks/form/legend.variants.json
deleted file mode 100644
index e54b08f..0000000
--- a/bricks/form/legend.variants.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "text-sm font-medium",
-  "byKey": {
-    "size": {
-      "default": "text-sm",
-      "lg": "text-base",
-      "sm": "text-xs"
-    },
-    "variant": {
-      "default": "",
-      "muted": "text-muted-foreground"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.form.legend",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/form/meter.variants.json b/bricks/form/meter.variants.json
deleted file mode 100644
index c642aea..0000000
--- a/bricks/form/meter.variants.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "h-2 w-full",
-  "byKey": {
-    "size": {
-      "default": "h-2",
-      "lg": "h-3",
-      "sm": "h-1"
-    },
-    "variant": {
-      "default": "accent-primary",
-      "muted": "accent-muted-foreground"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.form.meter",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/form/progress.variants.json b/bricks/form/progress.variants.json
deleted file mode 100644
index 2a985d0..0000000
--- a/bricks/form/progress.variants.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "h-2 w-full",
-  "byKey": {
-    "size": {
-      "default": "h-2",
-      "lg": "h-3",
-      "sm": "h-1"
-    },
-    "variant": {
-      "default": "accent-primary",
-      "muted": "accent-muted-foreground"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.form.progress",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/grid/grid.data.json b/bricks/grid/grid.data.json
deleted file mode 100644
index 23da6e2..0000000
--- a/bricks/grid/grid.data.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.grid",
-  "showcase": {
-    "layout.three-col": {
-      "props": {
-        "Class": "gap-4",
-        "Cols": "3"
-      }
-    },
-    "layout.two-col": {
-      "props": {
-        "Class": "gap-4",
-        "Cols": "2"
-      }
-    }
-  }
-}
diff --git a/bricks/grid/grid.def.ts b/bricks/grid/grid.def.ts
deleted file mode 100644
index 8c8031a..0000000
--- a/bricks/grid/grid.def.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
-  attrClass,
-  attrRest,
-  brick,
-  cond,
-  contains,
-  defaultIfEmpty,
-  el,
-  intMapOr,
-  lit,
-  mapOr,
-  pAttrs,
-  pChildren,
-  pClass,
-  pInt,
-  prop,
-  pStr,
-  slot,
-} from "../_dsl";
-import gridVariants from "./grid.variants.json";
-
-const GRID_COLS: Record<string, string> = {
-  "1": "grid-cols-1",
-  "2": "grid-cols-2",
-  "3": "grid-cols-3",
-  "4": "grid-cols-4",
-  "5": "grid-cols-5",
-  "6": "grid-cols-6",
-  "7": "grid-cols-7",
-  "8": "grid-cols-8",
-  "9": "grid-cols-9",
-  "10": "grid-cols-10",
-  "11": "grid-cols-11",
-  "12": "grid-cols-12",
-  "1-2": "grid-cols-1 md:grid-cols-2",
-  "1-3": "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
-  "1-4": "grid-cols-1 md:grid-cols-2 xl:grid-cols-4",
-};
-
-const intMap = (prefix: string): Record<number, string> =>
-  Object.fromEntries(Array.from({ length: 12 }, (_, i) => [i + 1, `${prefix}-${i + 1}`]));
-
-export default brick({
-  id: "ui.grid",
-  dir: "grid",
-  docs: "Grid lays out children in a CSS grid with optional column wrappers.",
-  recipes: { grid: { file: "grid.variants.json", recipe: gridVariants } },
-  parts: [
-    {
-      name: "Grid",
-      docs: "Grid renders a display:grid container.",
-      recipeId: "grid",
-      asChild: true,
-      classes: {
-        recipe: {},
-        extra: [
-          cond(
-            contains(prop("Class"), "grid-cols-"),
-            lit(""),
-            mapOr(defaultIfEmpty(prop("Cols"), "1"), GRID_COLS, "")
-          ),
-        ],
-      },
-      props: [
-        pClass(),
-        pStr("Cols", "column preset: 1–12 or responsive 1-2, 1-3, 1-4"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el("div", [attrClass(), attrRest()], [slot()]),
-    },
-    {
-      name: "GridCol",
-      docs: "GridCol renders one grid column child.",
-      asChild: true,
-      classes: {
-        extra: [
-          intMapOr(prop("Span"), intMap("col-span"), ""),
-          intMapOr(prop("Start"), intMap("col-start"), ""),
-          intMapOr(prop("End"), intMap("col-end"), ""),
-          intMapOr(prop("Order"), intMap("order"), ""),
-        ],
-      },
-      props: [
-        pClass(),
-        pInt("Span", "col-span-1..12"),
-        pInt("Start", "col-start-1..12"),
-        pInt("End", "col-end-1..12"),
-        pInt("Order", "order-1..12"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el("div", [attrClass(), attrRest()], [slot()]),
-    },
-  ],
-});
diff --git a/bricks/grid/grid.variants.json b/bricks/grid/grid.variants.json
deleted file mode 100644
index 03aef69..0000000
--- a/bricks/grid/grid.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "grid",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.grid",
-  "keys": []
-}
diff --git a/bricks/group/group.data.json b/bricks/group/group.data.json
deleted file mode 100644
index a4175c5..0000000
--- a/bricks/group/group.data.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.group",
-  "showcase": {
-    "tag.default": {
-      "props": {
-        "Class": "gap-2",
-        "Tag": "div"
-      }
-    },
-    "tag.fieldset": {
-      "props": {
-        "Class": "gap-2",
-        "Tag": "fieldset"
-      }
-    }
-  }
-}
diff --git a/bricks/group/group.def.ts b/bricks/group/group.def.ts
deleted file mode 100644
index a069f50..0000000
--- a/bricks/group/group.def.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { attrClass, attrRest, brick, el, pAttrs, pChildren, pClass, pStr, slot } from "../_dsl";
-import groupVariants from "./group.variants.json";
-
-export default brick({
-  id: "ui.group",
-  dir: "group",
-  docs:
-    "Group arranges children in a horizontal flex row.\n" +
-    "Supports fieldset for related form controls.",
-  recipes: { group: { file: "group.variants.json", recipe: groupVariants } },
-  parts: [
-    {
-      name: "Group",
-      docs: "Group renders a horizontal flex container.",
-      recipeId: "group",
-      asChild: true,
-      classes: { recipe: {} },
-      props: [
-        pClass(),
-        pStr("Tag", "div, fieldset, or dl. Use fieldset for related form controls."),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        { kind: "resolved", fromProp: "Tag", fallback: "div", group: "Group" },
-        [attrClass(), attrRest()],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/group/group.variants.json b/bricks/group/group.variants.json
deleted file mode 100644
index e804824..0000000
--- a/bricks/group/group.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "flex items-center",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.group",
-  "keys": []
-}
diff --git a/bricks/icon/icon.data.json b/bricks/icon/icon.data.json
deleted file mode 100644
index b750162..0000000
--- a/bricks/icon/icon.data.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.icon",
-  "showcase": {
-    "type.class": {
-      "props": {
-        "BaseClass": "icon",
-        "Name": "home",
-        "Prefix": "icon-",
-        "Size": "sm",
-        "Type": "class"
-      }
-    },
-    "type.svg": {
-      "props": {
-        "Href": "#check",
-        "Title": "Done",
-        "Type": "svg"
-      }
-    }
-  }
-}
diff --git a/bricks/icon/icon.def.ts b/bricks/icon/icon.def.ts
deleted file mode 100644
index ac2fcc8..0000000
--- a/bricks/icon/icon.def.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  and,
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  concat,
-  cond,
-  derived,
-  el,
-  eq,
-  isSet,
-  lit,
-  mapOr,
-  not,
-  or,
-  pAttrs,
-  pBool,
-  pChildren,
-  pClass,
-  prop,
-  pSize,
-  pStr,
-  slot,
-  text,
-  when,
-  type PartDef,
-} from "../_dsl";
-import iconVariants from "./icon.variants.json";
-
-const typeExpr = mapOr(prop("Type"), { svg: "svg", text: "text" }, "class");
-
-const ariaAttrs = [
-  attrExpr("aria-hidden", lit("true"), { when: derived("isDecorative") }),
-  attrExpr("role", lit("img"), { when: not(derived("isDecorative")) }),
-  attrExpr("aria-label", prop("AriaLabel"), {
-    when: and(not(derived("isDecorative")), isSet(prop("AriaLabel"))),
-  }),
-];
-
-const iconPart: PartDef = {
-  name: "Icon",
-  docs: "Icon renders a class-based span, svg use, or text fallback host.",
-  recipeId: "icon",
-  classes: {
-    recipe: { type: typeExpr, size: "Size" },
-    extra: [
-      cond(eq(typeExpr, lit("class")), prop("BaseClass"), lit("")),
-      cond(
-        and(eq(typeExpr, lit("class")), isSet(prop("Name"))),
-        concat(prop("Prefix"), prop("Name")),
-        lit("")
-      ),
-    ],
-  },
-  derived: {
-    iconKind: typeExpr,
-    isDecorative: or(
-      prop("Decorative"),
-      and(not(isSet(prop("Title"))), not(isSet(prop("AriaLabel"))))
-    ),
-  },
-  props: [
-    pStr("Name", "icon name appended to Prefix in class mode"),
-    pStr("Type", "svg, text, or class (default)"),
-    pStr("BaseClass", "base icon font class in class mode"),
-    pStr("Prefix", "icon font prefix in class mode"),
-    pSize(),
-    pClass(),
-    pStr("Href", "svg use href in svg mode"),
-    pStr("Title", "svg title / accessible name"),
-    pStr("AriaLabel", "accessible name for non-decorative icons"),
-    pBool("Decorative", "hides the icon from assistive technology"),
-    pAttrs(),
-    pChildren(),
-  ],
-  render: when(
-    eq(derived("iconKind"), lit("svg")),
-    [
-      el(
-        "svg",
-        [attrClass(), ...ariaAttrs, attrRest()],
-        [
-          when(isSet(prop("Title")), [el("title", [], [text(prop("Title"))])]),
-          when(isSet(prop("Href")), [el("use", [attrExpr("href", prop("Href"))], [])]),
-          slot(),
-        ]
-      ),
-    ],
-    [
-      when(
-        eq(derived("iconKind"), lit("text")),
-        [el("span", [attrClass(), ...ariaAttrs, attrRest()], [slot()])],
-        [el("span", [attrClass(), ...ariaAttrs, attrRest()], [])]
-      ),
-    ]
-  ),
-};
-
-export default brick({
-  id: "ui.icon",
-  dir: "icon",
-  docs:
-    "Icon renders a class-based span, svg use reference, or text fallback.\n" +
-    "Decorative icons are hidden from assistive technology by default.",
-  recipes: { icon: { file: "icon.variants.json", recipe: iconVariants } },
-  parts: [iconPart],
-});
diff --git a/bricks/icon/icon.variants.json b/bricks/icon/icon.variants.json
deleted file mode 100644
index 89ff1bf..0000000
--- a/bricks/icon/icon.variants.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "inline-block shrink-0",
-  "byKey": {
-    "size": {
-      "default": "h-4 w-4",
-      "lg": "h-6 w-6",
-      "md": "h-5 w-5",
-      "sm": "h-4 w-4",
-      "xl": "h-8 w-8",
-      "xs": "h-3 w-3"
-    },
-    "type": {
-      "class": "",
-      "svg": "",
-      "text": ""
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "type": "class"
-  },
-  "id": "ui.icon",
-  "keys": [
-    "type",
-    "size"
-  ]
-}
diff --git a/bricks/iconbadge/iconbadge.def.ts b/bricks/iconbadge/iconbadge.def.ts
deleted file mode 100644
index 24407c7..0000000
--- a/bricks/iconbadge/iconbadge.def.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  attrClass,
-  attrRest,
-  brick,
-  el,
-  pAttrs,
-  pChildren,
-  pClass,
-  pSize,
-  pVariant,
-  slot,
-} from "../_dsl";
-import iconbadgeVariants from "./iconbadge.variants.json";
-
-export default brick({
-  id: "ui.iconbadge",
-  dir: "iconbadge",
-  docs:
-    "IconBadge renders a small icon surface for nav rows, cards, and status blocks.\n" +
-    "Pass the letter, glyph, or Icon node as children.",
-  recipes: { iconbadge: { file: "iconbadge.variants.json", recipe: iconbadgeVariants } },
-  parts: [
-    {
-      name: "IconBadge",
-      docs: "IconBadge renders children as the badge content.",
-      recipeId: "iconbadge",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [pVariant(), pSize(), pClass(), pAttrs(), pChildren()],
-      render: el("span", [attrClass(), attrRest()], [slot()]),
-    },
-  ],
-});
diff --git a/bricks/iconbadge/iconbadge.variants.json b/bricks/iconbadge/iconbadge.variants.json
deleted file mode 100644
index d4e009a..0000000
--- a/bricks/iconbadge/iconbadge.variants.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "id": "ui.iconbadge",
-  "base": "inline-flex shrink-0 items-center justify-center rounded-md font-semibold",
-  "keys": ["variant", "size"],
-  "defaults": {
-    "variant": "default",
-    "size": "default"
-  },
-  "byKey": {
-    "variant": {
-      "default": "bg-muted text-muted-foreground",
-      "accent": "bg-accent text-accent-foreground",
-      "secondary": "bg-secondary text-secondary-foreground",
-      "outline": "border border-border text-foreground",
-      "destructive": "bg-destructive text-destructive-foreground"
-    },
-    "size": {
-      "xs": "h-6 w-6 text-xs",
-      "sm": "h-8 w-8 text-xs",
-      "default": "h-10 w-10 text-sm",
-      "lg": "h-12 w-12 text-base"
-    }
-  }
-}
diff --git a/bricks/image/image.data.json b/bricks/image/image.data.json
deleted file mode 100644
index ae0b313..0000000
--- a/bricks/image/image.data.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.image",
-  "showcase": {
-    "layout.picture": {
-      "props": {},
-      "children": {
-        "Source": {
-          "props": {
-            "SrcSet": "/hero.webp",
-            "Type": "image/webp"
-          }
-        },
-        "Image": {
-          "props": {
-            "Alt": "Hero image",
-            "Src": "/hero.jpg",
-            "Variant": "rounded"
-          }
-        }
-      }
-    },
-    "variant.avatar": {
-      "props": {
-        "Alt": "User avatar",
-        "Size": "md",
-        "Src": "/avatar.png",
-        "Variant": "avatar"
-      }
-    }
-  }
-}
diff --git a/bricks/image/image.def.ts b/bricks/image/image.def.ts
deleted file mode 100644
index c67cb73..0000000
--- a/bricks/image/image.def.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import {
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  cond,
-  el,
-  fwd,
-  lit,
-  oneOfOr,
-  pAttrs,
-  pBool,
-  pChildren,
-  pClass,
-  pCva,
-  pPass,
-  prop,
-  pSize,
-  pStr,
-  pVariant,
-  slot,
-} from "../_dsl";
-import imageVariants from "./image.variants.json";
-
-export default brick({
-  id: "ui.image",
-  dir: "image",
-  docs:
-    "Image renders accessible img, picture, and source primitives.\n" +
-    "Use Decorative for purely visual images so alt stays empty.",
-  recipes: { image: { file: "image.variants.json", recipe: imageVariants } },
-  parts: [
-    {
-      name: "Image",
-      docs: "Image renders an accessible img element.",
-      recipeId: "image",
-      classes: {
-        recipe: {
-          variant: "Variant",
-          size: "Size",
-          fit: "Fit",
-          position: "Position",
-          aspect: "Aspect",
-        },
-      },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pPass("Src"),
-        pPass("SrcSet"),
-        pPass("Sizes"),
-        pStr("Alt", "alternative text; ignored when Decorative"),
-        pPass("Width"),
-        pPass("Height"),
-        pCva("Fit", "fit", "object-fit preset"),
-        pCva("Position", "position", "object-position preset"),
-        pCva("Aspect", "aspect", "aspect-ratio preset"),
-        pStr("Loading", "eager or lazy (default lazy)"),
-        pStr("Decoding", "sync, auto, or async (default async)"),
-        pPass("FetchPriority"),
-        pBool("Decorative", "marks the image as purely presentational"),
-        pPass("ID"),
-        pAttrs(),
-      ],
-      render: el(
-        "img",
-        [
-          fwd("src", "Src"),
-          fwd("srcset", "SrcSet"),
-          fwd("sizes", "Sizes"),
-          attrExpr("alt", cond(prop("Decorative"), lit(""), prop("Alt")), { keepEmpty: true }),
-          fwd("width", "Width"),
-          fwd("height", "Height"),
-          attrExpr("loading", oneOfOr(prop("Loading"), ["eager"], "lazy")),
-          attrExpr("decoding", oneOfOr(prop("Decoding"), ["sync", "auto"], "async")),
-          fwd("fetchpriority", "FetchPriority"),
-          attrClass(),
-          fwd("id", "ID"),
-          attrExpr("aria-hidden", lit("true"), { when: prop("Decorative") }),
-          attrRest(),
-        ],
-        [],
-        { void: true }
-      ),
-    },
-    {
-      name: "Picture",
-      docs: "Picture renders a responsive image wrapper.",
-      classes: {},
-      props: [pClass(), pAttrs(), pChildren()],
-      render: el("picture", [attrClass(), attrRest()], [slot()]),
-    },
-    {
-      name: "Source",
-      docs: "Source renders a source candidate for picture, video, or audio.",
-      props: [
-        pPass("SrcSet"),
-        pPass("Src"),
-        pPass("Media"),
-        pPass("Type"),
-        pPass("Sizes"),
-        pAttrs(),
-      ],
-      render: el(
-        "source",
-        [
-          fwd("srcset", "SrcSet"),
-          fwd("src", "Src"),
-          fwd("media", "Media"),
-          fwd("type", "Type"),
-          fwd("sizes", "Sizes"),
-          attrRest(),
-        ],
-        [],
-        { void: true }
-      ),
-    },
-  ],
-});
diff --git a/bricks/image/image.variants.json b/bricks/image/image.variants.json
deleted file mode 100644
index 985bb30..0000000
--- a/bricks/image/image.variants.json
+++ /dev/null
@@ -1,61 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "block max-w-full",
-  "byKey": {
-    "aspect": {
-      "auto": "aspect-auto",
-      "square": "aspect-square",
-      "video": "aspect-video"
-    },
-    "fit": {
-      "contain": "object-contain",
-      "cover": "object-cover",
-      "fill": "object-fill",
-      "none": "object-none",
-      "scale-down": "object-scale-down"
-    },
-    "position": {
-      "bottom": "object-bottom",
-      "center": "object-center",
-      "left": "object-left",
-      "left-bottom": "object-left-bottom",
-      "left-top": "object-left-top",
-      "right": "object-right",
-      "right-bottom": "object-right-bottom",
-      "right-top": "object-right-top",
-      "top": "object-top"
-    },
-    "size": {
-      "auto": "",
-      "default": "",
-      "full": "h-full w-full",
-      "lg": "h-16 w-16",
-      "md": "h-12 w-12",
-      "sm": "h-8 w-8",
-      "xl": "h-24 w-24",
-      "xs": "h-6 w-6"
-    },
-    "variant": {
-      "avatar": "rounded-full",
-      "default": "",
-      "logo": "object-contain",
-      "rounded": "rounded-md",
-      "thumbnail": "rounded-md border border-border"
-    }
-  },
-  "defaults": {
-    "aspect": "auto",
-    "fit": "cover",
-    "position": "center",
-    "size": "auto",
-    "variant": "default"
-  },
-  "id": "ui.image",
-  "keys": [
-    "variant",
-    "size",
-    "fit",
-    "position",
-    "aspect"
-  ]
-}
diff --git a/bricks/index.ts b/bricks/index.ts
deleted file mode 100644
index 94374bc..0000000
--- a/bricks/index.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Brick registry — every `ui/` primitive definition, in facade order.
- */
-
-import type { BrickDef } from "../src/domain/model";
-
-import alert from "./alert/alert.def";
-import badge from "./badge/badge.def";
-import block from "./block/block.def";
-import box from "./box/box.def";
-import breadcrumb from "./breadcrumb/breadcrumb.def";
-import button from "./button/button.def";
-import card from "./card/card.def";
-import checkbox from "./checkbox/checkbox.def";
-import container from "./container/container.def";
-import dialog from "./dialog/dialog.def";
-import disclosure from "./disclosure/disclosure.def";
-import form from "./form/form.def";
-import formControls from "./form/controls.def";
-import grid from "./grid/grid.def";
-import group from "./group/group.def";
-import icon from "./icon/icon.def";
-import iconbadge from "./iconbadge/iconbadge.def";
-import image from "./image/image.def";
-import inline from "./inline/inline.def";
-import input from "./input/input.def";
-import label from "./label/label.def";
-import linebreak from "./linebreak/linebreak.def";
-import link from "./link/link.def";
-import list from "./list/list.def";
-import radio from "./radio/radio.def";
-import select from "./select/select.def";
-import separator from "./separator/separator.def";
-import stack from "./stack/stack.def";
-import switchBrick from "./switch/switch.def";
-import table from "./table/table.def";
-import text from "./text/text.def";
-import textarea from "./textarea/textarea.def";
-import title from "./title/title.def";
-
-export const bricks: BrickDef[] = [
-  alert,
-  badge,
-  block,
-  box,
-  breadcrumb,
-  button,
-  card,
-  checkbox,
-  container,
-  dialog,
-  disclosure,
-  form,
-  formControls,
-  grid,
-  group,
-  icon,
-  iconbadge,
-  image,
-  inline,
-  input,
-  label,
-  linebreak,
-  link,
-  list,
-  radio,
-  select,
-  separator,
-  stack,
-  switchBrick,
-  table,
-  text,
-  textarea,
-  title,
-];
diff --git a/bricks/inline/inline.data.json b/bricks/inline/inline.data.json
deleted file mode 100644
index c061399..0000000
--- a/bricks/inline/inline.data.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.inline",
-  "showcase": {
-    "default": {
-      "props": {
-        "Class": "text-muted-foreground"
-      }
-    }
-  }
-}
diff --git a/bricks/inline/inline.def.ts b/bricks/inline/inline.def.ts
deleted file mode 100644
index 8025dbf..0000000
--- a/bricks/inline/inline.def.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { attrClass, attrRest, brick, el, pAttrs, pChildren, pClass, slot } from "../_dsl";
-import inlineVariants from "./inline.variants.json";
-
-export default brick({
-  id: "ui.inline",
-  dir: "inline",
-  docs:
-    "Inline renders inline copy as a span. Use Text for paragraph blocks and\n" +
-    "Title (as 1–6) for headings.",
-  recipes: { inline: { file: "inline.variants.json", recipe: inlineVariants } },
-  parts: [
-    {
-      name: "Inline",
-      docs: "Inline renders a span element with inline copy classes.",
-      recipeId: "inline",
-      asChild: true,
-      classes: { recipe: {} },
-      props: [pClass(), pAttrs(), pChildren()],
-      render: el("span", [attrClass(), attrRest()], [slot()]),
-    },
-  ],
-});
diff --git a/bricks/inline/inline.variants.json b/bricks/inline/inline.variants.json
deleted file mode 100644
index 841bf3a..0000000
--- a/bricks/inline/inline.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "id": "ui.inline",
-  "base": "",
-  "keys": [],
-  "defaults": {},
-  "byKey": {}
-}
diff --git a/bricks/input/input.data.json b/bricks/input/input.data.json
deleted file mode 100644
index 7572cfc..0000000
--- a/bricks/input/input.data.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.input",
-  "showcase": {
-    "size.sm": {
-      "props": {
-        "Name": "q",
-        "Placeholder": "Search",
-        "Size": "sm"
-      }
-    },
-    "state.disabled": {
-      "props": {
-        "Disabled": true,
-        "Name": "locked",
-        "Value": "Read only"
-      }
-    },
-    "state.required": {
-      "props": {
-        "Name": "name",
-        "Placeholder": "Required field",
-        "Required": true
-      }
-    },
-    "type.email": {
-      "props": {
-        "ID": "demo-email",
-        "Name": "email",
-        "Type": "email"
-      }
-    },
-    "variant.default": {
-      "props": {
-        "Name": "email",
-        "Placeholder": "name@example.com",
-        "Type": "text",
-        "Variant": "default"
-      }
-    }
-  }
-}
diff --git a/bricks/input/input.def.ts b/bricks/input/input.def.ts
deleted file mode 100644
index 19eb992..0000000
--- a/bricks/input/input.def.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  controlPassthroughProps,
-  defaultIfEmpty,
-  el,
-  fwd,
-  pAttrs,
-  pBool,
-  pClass,
-  pPass,
-  prop,
-  pSize,
-  pStr,
-  pVariant,
-} from "../_dsl";
-import inputVariants from "./input.variants.json";
-
-export default brick({
-  id: "ui.input",
-  dir: "input",
-  docs:
-    "Input is a single-line native text field.\n" +
-    "Supports types, validation attrs, and wireframe variant/size classes.",
-  recipes: { input: { file: "input.variants.json", recipe: inputVariants } },
-  parts: [
-    {
-      name: "Input",
-      docs: "Input renders a styled single-line form control.",
-      recipeId: "input",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pStr("Type", "input type; defaults to text"),
-        pPass("Name"),
-        pPass("Value"),
-        pPass("Placeholder"),
-        pBool("Disabled"),
-        pBool("Required"),
-        pPass("Autocomplete"),
-        pPass("Min"),
-        pPass("Max"),
-        ...controlPassthroughProps(),
-        pAttrs(),
-      ],
-      render: el(
-        "input",
-        [
-          fwd("id", "ID"),
-          attrExpr("type", defaultIfEmpty(prop("Type"), "text")),
-          fwd("name", "Name"),
-          fwd("value", "Value"),
-          fwd("placeholder", "Placeholder"),
-          fwd("autocomplete", "Autocomplete"),
-          fwd("min", "Min"),
-          fwd("max", "Max"),
-          attrClass(),
-          attrBool("disabled", prop("Disabled")),
-          attrBool("required", prop("Required")),
-          fwd("role", "Role"),
-          fwd("tabindex", "TabIndex"),
-          fwd("aria-label", "AriaLabel"),
-          attrRest(),
-        ],
-        [],
-        { void: true }
-      ),
-    },
-  ],
-});
diff --git a/bricks/input/input.variants.json b/bricks/input/input.variants.json
deleted file mode 100644
index 3c042c1..0000000
--- a/bricks/input/input.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-10 px-3 py-2 text-sm",
-      "lg": "h-12 px-4 text-base",
-      "sm": "h-8 px-3 text-sm",
-      "xs": "h-8 px-2 text-xs"
-    },
-    "variant": {
-      "default": "border-border bg-background",
-      "ghost": "border-transparent bg-muted",
-      "outline": "border-border bg-background"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.input",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/label/label.data.json b/bricks/label/label.data.json
deleted file mode 100644
index 6495ab3..0000000
--- a/bricks/label/label.data.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.label",
-  "showcase": {
-    "layout.with-control": {
-      "props": {
-        "HTMLFor": "demo-email"
-      }
-    }
-  }
-}
diff --git a/bricks/label/label.def.ts b/bricks/label/label.def.ts
deleted file mode 100644
index def513e..0000000
--- a/bricks/label/label.def.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { attrClass, attrRest, brick, el, fwd, pAttrs, pChildren, pClass, pPass, slot } from "../_dsl";
-import labelVariants from "./label.variants.json";
-
-export default brick({
-  id: "ui.label",
-  dir: "label",
-  docs: "Label associates visible text with a form control via the for attribute.",
-  recipes: { label: { file: "label.variants.json", recipe: labelVariants } },
-  parts: [
-    {
-      name: "Label",
-      docs: "Label renders accessible text linked to a control.",
-      recipeId: "label",
-      classes: { recipe: {} },
-      props: [pClass(), pPass("HTMLFor", "id of the labeled control"), pAttrs(), pChildren()],
-      render: el("label", [attrClass(), fwd("for", "HTMLFor"), attrRest()], [slot()]),
-    },
-  ],
-});
diff --git a/bricks/label/label.variants.json b/bricks/label/label.variants.json
deleted file mode 100644
index 5fdf5a5..0000000
--- a/bricks/label/label.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "text-sm font-medium leading-none",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.label",
-  "keys": []
-}
diff --git a/bricks/linebreak/linebreak.data.json b/bricks/linebreak/linebreak.data.json
deleted file mode 100644
index a840a7a..0000000
--- a/bricks/linebreak/linebreak.data.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.linebreak",
-  "showcase": {
-    "type.br": {
-      "props": {
-        "Type": "br"
-      }
-    },
-    "type.wbr": {
-      "props": {
-        "Type": "wbr"
-      }
-    }
-  }
-}
diff --git a/bricks/linebreak/linebreak.def.ts b/bricks/linebreak/linebreak.def.ts
deleted file mode 100644
index bd9bccb..0000000
--- a/bricks/linebreak/linebreak.def.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { attrClass, attrRest, brick, el, mapOr, pAttrs, pClass, prop, pStr } from "../_dsl";
-import linebreakVariants from "./linebreak.variants.json";
-
-export default brick({
-  id: "ui.linebreak",
-  dir: "linebreak",
-  docs: "Break renders br or wbr for controlled inline wrapping.",
-  recipes: { linebreak: { file: "linebreak.variants.json", recipe: linebreakVariants } },
-  parts: [
-    {
-      name: "Break",
-      docs: "Break renders br by default, or wbr when Type is wbr/word.",
-      recipeId: "linebreak",
-      classes: { recipe: {} },
-      props: [pStr("Type", "br (default) or wbr/word"), pClass(), pAttrs()],
-      render: el(
-        {
-          kind: "mapped",
-          expr: mapOr(prop("Type"), { wbr: "wbr", word: "wbr" }, "br"),
-          tags: ["wbr", "br"],
-        },
-        [attrClass(), attrRest()],
-        [],
-        { void: true }
-      ),
-    },
-  ],
-});
diff --git a/bricks/linebreak/linebreak.variants.json b/bricks/linebreak/linebreak.variants.json
deleted file mode 100644
index 301f839..0000000
--- a/bricks/linebreak/linebreak.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.linebreak",
-  "keys": []
-}
diff --git a/bricks/link/link.data.json b/bricks/link/link.data.json
deleted file mode 100644
index 3639658..0000000
--- a/bricks/link/link.data.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.link",
-  "showcase": {
-    "variant.default": {
-      "props": {
-        "Href": "/docs"
-      }
-    },
-    "variant.external": {
-      "props": {
-        "External": true,
-        "Href": "https://example.com"
-      }
-    }
-  }
-}
diff --git a/bricks/link/link.def.ts b/bricks/link/link.def.ts
deleted file mode 100644
index df10491..0000000
--- a/bricks/link/link.def.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import {
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  cond,
-  derived,
-  el,
-  eq,
-  fwd,
-  isSet,
-  lit,
-  or,
-  pAttrs,
-  pBool,
-  pChildren,
-  pClass,
-  pPass,
-  prop,
-  pSize,
-  pStr,
-  pVariant,
-  slot,
-} from "../_dsl";
-import linkVariants from "./link.variants.json";
-
-export default brick({
-  id: "ui.link",
-  dir: "link",
-  docs:
-    "Link renders a semantic anchor for navigation and prose.\n" +
-    "Use Button for actions; use Link for destinations.",
-  recipes: { link: { file: "link.variants.json", recipe: linkVariants } },
-  parts: [
-    {
-      name: "Link",
-      docs: "Link renders a semantic anchor element.",
-      recipeId: "link",
-      classes: {
-        recipe: { variant: "Variant", size: "Size" },
-        state: [{ test: prop("Disabled"), classes: "pointer-events-none opacity-50" }],
-      },
-      derived: {
-        target: cond(isSet(prop("Target")), prop("Target"), cond(prop("External"), lit("_blank"), lit(""))),
-        rel: cond(
-          isSet(prop("Rel")),
-          prop("Rel"),
-          cond(
-            or(prop("External"), eq(derived("target"), lit("_blank"))),
-            lit("noopener noreferrer"),
-            lit("")
-          )
-        ),
-      },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pPass("Href"),
-        pStr("Target", "explicit target; External implies _blank"),
-        pStr("Rel", "explicit rel; external links default to noopener noreferrer"),
-        pPass("Download"),
-        pBool("External", "opens in a new tab with safe rel defaults"),
-        pBool("Disabled", "visually and semantically disables the link"),
-        pPass("AriaCurrent"),
-        pPass("AriaLabel"),
-        pPass("ID"),
-        pPass("Role"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "a",
-        [
-          fwd("href", "Href"),
-          attrClass(),
-          fwd("id", "ID"),
-          attrExpr("target", derived("target")),
-          attrExpr("rel", derived("rel")),
-          fwd("download", "Download"),
-          fwd("role", "Role"),
-          fwd("aria-label", "AriaLabel"),
-          fwd("aria-current", "AriaCurrent"),
-          attrExpr("aria-disabled", lit("true"), { when: prop("Disabled") }),
-          attrExpr("tabindex", lit(-1), { when: prop("Disabled") }),
-          attrRest(),
-        ],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/link/link.variants.json b/bricks/link/link.variants.json
deleted file mode 100644
index da1ea32..0000000
--- a/bricks/link/link.variants.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-  "byKey": {
-    "size": {
-      "default": "text-sm",
-      "lg": "text-lg",
-      "md": "text-base",
-      "sm": "text-sm"
-    },
-    "variant": {
-      "block": "flex w-full text-foreground hover:text-primary",
-      "default": "text-primary hover:underline",
-      "external": "text-primary hover:underline",
-      "muted": "text-muted-foreground hover:text-foreground hover:underline",
-      "nav": "text-foreground hover:text-primary"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.link",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/list/list.data.json b/bricks/list/list.data.json
deleted file mode 100644
index 4a6e2f7..0000000
--- a/bricks/list/list.data.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.list",
-  "showcase": {
-    "tag.dl": {
-      "props": {
-        "Class": "grid grid-cols-[auto_1fr] gap-x-3 gap-y-2",
-        "Tag": "dl"
-      }
-    },
-    "tag.ol": {
-      "props": {
-        "Class": "list-decimal pl-4",
-        "Tag": "ol"
-      }
-    },
-    "tag.ul": {
-      "props": {
-        "Class": "gap-2",
-        "Tag": "ul"
-      }
-    }
-  }
-}
diff --git a/bricks/list/list.def.ts b/bricks/list/list.def.ts
deleted file mode 100644
index 43d100d..0000000
--- a/bricks/list/list.def.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  and,
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  el,
-  eq,
-  intToString,
-  isSet,
-  lit,
-  pAttrs,
-  pChildren,
-  pClass,
-  pInt,
-  prop,
-  pStr,
-  resolvedTag,
-  slot,
-} from "../_dsl";
-import listVariants from "./list.variants.json";
-
-export default brick({
-  id: "ui.list",
-  dir: "list",
-  docs: "List renders semantic ul, ol, dl, or menu lists with ListItem children.",
-  recipes: { list: { file: "list.variants.json", recipe: listVariants } },
-  parts: [
-    {
-      name: "List",
-      docs: "List renders a list container (ul, ol, dl, or menu).",
-      recipeId: "list",
-      classes: { recipe: {} },
-      props: [pClass(), pStr("Tag", "ul, ol, dl, or menu"), pAttrs(), pChildren()],
-      render: el(
-        { kind: "resolved", fromProp: "Tag", fallback: "ul", group: "List" },
-        [attrClass(), attrRest()],
-        [slot()]
-      ),
-    },
-    {
-      name: "ListItem",
-      docs: "ListItem renders one li with optional value attribute.",
-      recipeId: "list",
-      classes: { recipe: {} },
-      props: [
-        pClass(),
-        pStr("Tag", "li, dt, or dd; defaults to li"),
-        pInt("Value", "optional li value for ordered contexts"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        { kind: "resolved", fromProp: "Tag", fallback: "li", group: "ListItem" },
-        [
-          attrClass(),
-          attrExpr("value", intToString(prop("Value")), {
-            when: and(isSet(prop("Value")), eq(resolvedTag(), lit("li"))),
-          }),
-          attrRest(),
-        ],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/list/list.variants.json b/bricks/list/list.variants.json
deleted file mode 100644
index 3a851b3..0000000
--- a/bricks/list/list.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.list",
-  "keys": []
-}
diff --git a/bricks/radio/radio.data.json b/bricks/radio/radio.data.json
deleted file mode 100644
index e71a46f..0000000
--- a/bricks/radio/radio.data.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.radio",
-  "showcase": {
-    "layout.group": {
-      "props": {
-        "Name": "plan"
-      }
-    },
-    "state.disabled": {
-      "props": {
-        "Disabled": true,
-        "Name": "plan",
-        "Value": "pro"
-      }
-    }
-  }
-}
diff --git a/bricks/radio/radio.def.ts b/bricks/radio/radio.def.ts
deleted file mode 100644
index 6ff2310..0000000
--- a/bricks/radio/radio.def.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrRest,
-  attrStatic,
-  brick,
-  controlPassthroughProps,
-  el,
-  fwd,
-  pAttrs,
-  pBool,
-  pClass,
-  pPass,
-  prop,
-  pSize,
-  pVariant,
-} from "../_dsl";
-import radioVariants from "./radio.variants.json";
-
-export default brick({
-  id: "ui.radio",
-  dir: "radio",
-  docs: "Radio is a native single-choice control within a named group.",
-  recipes: { radio: { file: "radio.variants.json", recipe: radioVariants } },
-  parts: [
-    {
-      name: "Radio",
-      docs: "Radio renders input[type=radio] with shared Name for grouping.",
-      recipeId: "radio",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pPass("Name"),
-        pPass("Value"),
-        pBool("Checked"),
-        pBool("Disabled"),
-        pBool("Required"),
-        ...controlPassthroughProps(),
-        pAttrs(),
-      ],
-      render: el(
-        "input",
-        [
-          fwd("id", "ID"),
-          attrStatic("type", "radio"),
-          fwd("name", "Name"),
-          fwd("value", "Value"),
-          attrClass(),
-          attrBool("checked", prop("Checked")),
-          attrBool("disabled", prop("Disabled")),
-          attrBool("required", prop("Required")),
-          fwd("role", "Role"),
-          fwd("tabindex", "TabIndex"),
-          fwd("aria-label", "AriaLabel"),
-          attrRest(),
-        ],
-        [],
-        { void: true }
-      ),
-    },
-  ],
-});
diff --git a/bricks/radio/radio.variants.json b/bricks/radio/radio.variants.json
deleted file mode 100644
index b147abf..0000000
--- a/bricks/radio/radio.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-4 w-4",
-      "lg": "h-5 w-5",
-      "sm": "h-4 w-4",
-      "xs": "h-3 w-3"
-    },
-    "variant": {
-      "default": "border-primary",
-      "ghost": "border-primary bg-muted/30",
-      "outline": "border-primary"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.radio",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/select/select.data.json b/bricks/select/select.data.json
deleted file mode 100644
index 1af3da0..0000000
--- a/bricks/select/select.data.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.select",
-  "showcase": {
-    "state.disabled": {
-      "props": {
-        "Disabled": true,
-        "Name": "locked",
-        "Options": [
-          {
-            "Label": "Option A",
-            "Value": "a"
-          }
-        ]
-      }
-    },
-    "variant.default": {
-      "props": {
-        "Name": "country",
-        "Options": [
-          {
-            "Label": "United States",
-            "Value": "us"
-          },
-          {
-            "Label": "Canada",
-            "Value": "ca"
-          }
-        ],
-        "Value": "us"
-      }
-    }
-  }
-}
diff --git a/bricks/select/select.def.ts b/bricks/select/select.def.ts
deleted file mode 100644
index 6eaa443..0000000
--- a/bricks/select/select.def.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  controlPassthroughProps,
-  el,
-  eq,
-  forEach,
-  fwd,
-  item,
-  pAttrs,
-  pBool,
-  pChildren,
-  pClass,
-  pPass,
-  prop,
-  pSize,
-  pStr,
-  pVariant,
-  slot,
-  text,
-} from "../_dsl";
-import selectVariants from "./select.variants.json";
-
-export default brick({
-  id: "ui.select",
-  dir: "select",
-  goPackage: "selectfield",
-  docs: "Select is a native dropdown built from Option items.",
-  recordTypes: [
-    {
-      name: "SelectOptionItem",
-      fields: [
-        { name: "Value", type: "string" },
-        { name: "Label", type: "string" },
-      ],
-    },
-  ],
-  recipes: { select: { file: "select.variants.json", recipe: selectVariants } },
-  parts: [
-    {
-      name: "Select",
-      docs: "Select renders option children from the Options list plus manual children.",
-      recipeId: "select",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pPass("Name"),
-        pStr("Value", "currently selected option value"),
-        pBool("Disabled"),
-        pBool("Required"),
-        { name: "Options", type: "items", cva: false, itemsOf: "SelectOptionItem" },
-        ...controlPassthroughProps(),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "select",
-        [
-          fwd("id", "ID"),
-          fwd("name", "Name"),
-          attrClass(),
-          attrBool("disabled", prop("Disabled")),
-          attrBool("required", prop("Required")),
-          fwd("role", "Role"),
-          fwd("tabindex", "TabIndex"),
-          fwd("aria-label", "AriaLabel"),
-          attrRest(),
-        ],
-        [
-          forEach("Options", [
-            el(
-              "option",
-              [
-                attrExpr("value", item("Value"), { keepEmpty: true }),
-                attrBool("selected", eq(item("Value"), prop("Value"))),
-              ],
-              [text(item("Label"))]
-            ),
-          ]),
-          slot(),
-        ]
-      ),
-    },
-    {
-      name: "SelectOption",
-      docs: "SelectOption renders an option for custom Select children.",
-      props: [
-        pPass("Value"),
-        pPass("Label"),
-        pBool("Selected"),
-        pBool("Disabled"),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        "option",
-        [
-          fwd("value", "Value"),
-          fwd("label", "Label"),
-          attrBool("selected", prop("Selected")),
-          attrBool("disabled", prop("Disabled")),
-          attrRest(),
-        ],
-        [slot()]
-      ),
-    },
-    {
-      name: "OptGroup",
-      docs: "OptGroup renders a native optgroup around option children.",
-      classes: {},
-      props: [pClass(), pPass("Label"), pBool("Disabled"), pAttrs(), pChildren()],
-      render: el(
-        "optgroup",
-        [
-          attrClass(),
-          fwd("label", "Label"),
-          attrBool("disabled", prop("Disabled")),
-          attrRest(),
-        ],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/select/select.variants.json b/bricks/select/select.variants.json
deleted file mode 100644
index de12d1f..0000000
--- a/bricks/select/select.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-10 px-3 py-2 text-sm",
-      "lg": "h-12 px-4 text-base",
-      "sm": "h-8 px-3 text-sm",
-      "xs": "h-8 px-2 text-xs"
-    },
-    "variant": {
-      "default": "border-border bg-background",
-      "ghost": "border-transparent bg-muted",
-      "outline": "border-border bg-background"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.select",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/separator/separator.data.json b/bricks/separator/separator.data.json
deleted file mode 100644
index 1a99579..0000000
--- a/bricks/separator/separator.data.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.separator",
-  "showcase": {
-    "orientation.vertical": {
-      "props": {
-        "Decorative": true,
-        "Orientation": "vertical"
-      }
-    },
-    "variant.default": {
-      "props": {
-        "Variant": "default"
-      }
-    }
-  }
-}
diff --git a/bricks/separator/separator.def.ts b/bricks/separator/separator.def.ts
deleted file mode 100644
index bbec605..0000000
--- a/bricks/separator/separator.def.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  el,
-  eq,
-  lit,
-  pAttrs,
-  pBool,
-  pClass,
-  pCva,
-  prop,
-  pVariant,
-} from "../_dsl";
-import separatorVariants from "./separator.variants.json";
-
-export default brick({
-  id: "ui.separator",
-  dir: "separator",
-  docs: "Separator renders a semantic or decorative hr.",
-  recipes: { separator: { file: "separator.variants.json", recipe: separatorVariants } },
-  parts: [
-    {
-      name: "Separator",
-      docs: "Separator renders hr with optional decorative semantics.",
-      recipeId: "separator",
-      classes: { recipe: { variant: "Variant", orientation: "Orientation" } },
-      props: [
-        pVariant(),
-        pCva("Orientation", "orientation", "horizontal or vertical"),
-        pClass(),
-        pBool("Decorative", "hides the rule from assistive technology"),
-        pAttrs(),
-      ],
-      render: el(
-        "hr",
-        [
-          attrClass(),
-          attrExpr("role", lit("presentation"), { when: prop("Decorative") }),
-          attrExpr("aria-hidden", lit("true"), { when: prop("Decorative") }),
-          attrExpr("aria-orientation", lit("vertical"), {
-            when: eq(prop("Orientation"), lit("vertical")),
-          }),
-          attrRest(),
-        ],
-        [],
-        { void: true }
-      ),
-    },
-  ],
-});
diff --git a/bricks/separator/separator.variants.json b/bricks/separator/separator.variants.json
deleted file mode 100644
index b3716f6..0000000
--- a/bricks/separator/separator.variants.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "shrink-0 border-0 bg-border",
-  "byKey": {
-    "orientation": {
-      "horizontal": "h-px w-full",
-      "vertical": "h-full w-px"
-    },
-    "variant": {
-      "default": "",
-      "muted": "bg-muted",
-      "spaced": "my-4",
-      "strong": "bg-foreground"
-    }
-  },
-  "defaults": {
-    "orientation": "horizontal",
-    "variant": "default"
-  },
-  "id": "ui.separator",
-  "keys": [
-    "orientation",
-    "variant"
-  ]
-}
diff --git a/bricks/stack/stack.data.json b/bricks/stack/stack.data.json
deleted file mode 100644
index 48288cb..0000000
--- a/bricks/stack/stack.data.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.stack",
-  "showcase": {
-    "tag.default": {
-      "props": {
-        "Class": "gap-4",
-        "Tag": "div"
-      }
-    },
-    "tag.ul": {
-      "props": {
-        "Class": "gap-2",
-        "Tag": "ul"
-      }
-    }
-  }
-}
diff --git a/bricks/stack/stack.def.ts b/bricks/stack/stack.def.ts
deleted file mode 100644
index 9ee0a30..0000000
--- a/bricks/stack/stack.def.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { attrClass, attrRest, brick, el, pAttrs, pChildren, pClass, pStr, slot } from "../_dsl";
-import stackVariants from "./stack.variants.json";
-
-export default brick({
-  id: "ui.stack",
-  dir: "stack",
-  docs:
-    "Stack arranges children vertically in a flex column.\n" +
-    "Default layout primitive for spacing sections and form fields.",
-  recipes: { stack: { file: "stack.variants.json", recipe: stackVariants } },
-  parts: [
-    {
-      name: "Stack",
-      docs: "Stack renders a vertical flex container.",
-      recipeId: "stack",
-      asChild: true,
-      classes: { recipe: {} },
-      props: [
-        pClass(),
-        pStr("Tag", "div, ul, or ol. Use Block for landmarks (aside, section, header, nav)."),
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        { kind: "resolved", fromProp: "Tag", fallback: "div", group: "Stack" },
-        [attrClass(), attrRest()],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/stack/stack.variants.json b/bricks/stack/stack.variants.json
deleted file mode 100644
index 37b9aa4..0000000
--- a/bricks/stack/stack.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "flex flex-col",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.stack",
-  "keys": []
-}
diff --git a/bricks/switch/switch.data.json b/bricks/switch/switch.data.json
deleted file mode 100644
index 7894506..0000000
--- a/bricks/switch/switch.data.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.switch",
-  "showcase": {
-    "state.disabled": {
-      "props": {
-        "AriaLabel": "Locked setting",
-        "Checked": true,
-        "Disabled": true,
-        "Name": "locked"
-      }
-    },
-    "state.off": {
-      "props": {
-        "AriaLabel": "Notifications",
-        "ID": "notifications",
-        "Name": "notifications"
-      }
-    },
-    "state.on": {
-      "props": {
-        "AriaLabel": "Notifications",
-        "Checked": true,
-        "ID": "notifications",
-        "Name": "notifications"
-      }
-    }
-  }
-}
diff --git a/bricks/switch/switch.def.ts b/bricks/switch/switch.def.ts
deleted file mode 100644
index 7ceb261..0000000
--- a/bricks/switch/switch.def.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrExpr,
-  attrRest,
-  attrStatic,
-  boolToString,
-  brick,
-  el,
-  fwd,
-  pAttrs,
-  pBool,
-  pClass,
-  pPass,
-  prop,
-  pSize,
-  pVariant,
-} from "../_dsl";
-import switchVariants from "./switch.variants.json";
-
-export default brick({
-  id: "ui.switch",
-  dir: "switch",
-  goPackage: "formswitch",
-  docs:
-    "Switch is a toggle control (checkbox with switch ARIA semantics).\n" +
-    "Use for on/off settings; wireframe uses native checkbox styling.",
-  recipes: { switch: { file: "switch.variants.json", recipe: switchVariants } },
-  parts: [
-    {
-      name: "Switch",
-      docs: "Switch renders input[type=checkbox] with switch role attrs.",
-      recipeId: "switch",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pPass("Name"),
-        pPass("Value"),
-        pBool("Checked"),
-        pBool("Disabled"),
-        pBool("Required"),
-        pPass("ID"),
-        pPass("TabIndex"),
-        pPass("AriaLabel"),
-        pAttrs(),
-      ],
-      render: el(
-        "input",
-        [
-          fwd("id", "ID"),
-          attrStatic("type", "checkbox"),
-          fwd("name", "Name"),
-          fwd("value", "Value"),
-          attrClass(),
-          attrBool("checked", prop("Checked")),
-          attrBool("disabled", prop("Disabled")),
-          attrBool("required", prop("Required")),
-          fwd("tabindex", "TabIndex"),
-          fwd("aria-label", "AriaLabel"),
-          attrStatic("role", "switch"),
-          attrExpr("aria-checked", boolToString(prop("Checked"))),
-          attrRest(),
-        ],
-        [],
-        { void: true }
-      ),
-    },
-  ],
-});
diff --git a/bricks/switch/switch.variants.json b/bricks/switch/switch.variants.json
deleted file mode 100644
index c3f7447..0000000
--- a/bricks/switch/switch.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-4 w-4",
-      "lg": "h-5 w-5",
-      "sm": "h-4 w-4",
-      "xs": "h-3 w-3"
-    },
-    "variant": {
-      "default": "border-primary",
-      "ghost": "border-primary bg-muted/30",
-      "outline": "border-primary"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.switch",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/table/table.data.json b/bricks/table/table.data.json
deleted file mode 100644
index 072355a..0000000
--- a/bricks/table/table.data.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.table",
-  "showcase": {
-    "layout.basic": {
-      "props": {
-        "Class": "w-full text-sm"
-      },
-      "children": {
-        "TableHeadCell": {
-          "props": {
-            "Scope": "col"
-          }
-        }
-      }
-    },
-    "cell.colspan": {
-      "props": {},
-      "children": {
-        "TableCell": {
-          "props": {
-            "ColSpan": 2
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/bricks/table/table.def.ts b/bricks/table/table.def.ts
deleted file mode 100644
index f203be6..0000000
--- a/bricks/table/table.def.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import {
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  el,
-  intToString,
-  isSet,
-  oneOfOr,
-  pAttrs,
-  pChildren,
-  pClass,
-  pInt,
-  pPass,
-  prop,
-  pStr,
-  slot,
-  type AttrSpec,
-  type PartDef,
-} from "../_dsl";
-import tableVariants from "./table.variants.json";
-
-function plainPart(name: string, docs: string, tag: string, extraAttrs: AttrSpec[] = []): PartDef {
-  return {
-    name,
-    docs,
-    classes: {},
-    props: [pClass(), pAttrs(), pChildren()],
-    render: el(tag, [attrClass(), ...extraAttrs, attrRest()], [slot()]),
-  };
-}
-
-const spanAttr = attrExpr("span", intToString(prop("Span")), { when: isSet(prop("Span")) });
-
-function cellProps() {
-  return [
-    pClass(),
-    pStr("Scope", "th scope: col, row, colgroup, rowgroup"),
-    pInt("ColSpan"),
-    pInt("RowSpan"),
-    pPass("Headers", "ids of related header cells"),
-    pStr("Abbr", "abbreviated header text for th"),
-    pAttrs(),
-    pChildren(),
-  ];
-}
-
-function cellAttrs(heading: boolean): AttrSpec[] {
-  const attrs: AttrSpec[] = [attrClass()];
-  if (heading) {
-    attrs.push(
-      attrExpr("scope", oneOfOr(prop("Scope"), ["col", "colgroup", "row", "rowgroup"], "", { lower: true })),
-      attrExpr("abbr", prop("Abbr"))
-    );
-  }
-  attrs.push(
-    attrExpr("colspan", intToString(prop("ColSpan")), { when: isSet(prop("ColSpan")) }),
-    attrExpr("rowspan", intToString(prop("RowSpan")), { when: isSet(prop("RowSpan")) }),
-    fwdHeaders(),
-    attrRest()
-  );
-  return attrs;
-}
-
-function fwdHeaders(): AttrSpec {
-  return attrExpr("headers", prop("Headers"));
-}
-
-export default brick({
-  id: "ui.table",
-  dir: "table",
-  docs:
-    "Table composes semantic table, caption, sections, rows, and cells.\n" +
-    "Supports scope, colspan, and headers attrs on head cells.",
-  recipes: { table: { file: "table.variants.json", recipe: tableVariants } },
-  parts: [
-    {
-      name: "Table",
-      docs: "Table renders the root table element.",
-      recipeId: "table",
-      classes: { recipe: {} },
-      props: [pClass(), pAttrs(), pChildren()],
-      render: el("table", [attrClass(), attrRest()], [slot()]),
-    },
-    plainPart("TableCaption", "TableCaption renders the table caption.", "caption"),
-    plainPart("TableHead", "TableHead renders the thead section.", "thead"),
-    plainPart("TableBody", "TableBody renders the tbody section.", "tbody"),
-    plainPart("TableFoot", "TableFoot renders the tfoot section.", "tfoot"),
-    plainPart("TableRow", "TableRow renders one tr row.", "tr"),
-    {
-      name: "TableHeadCell",
-      docs: "TableHeadCell renders th with optional scope and abbr.",
-      classes: {},
-      props: cellProps(),
-      render: el("th", cellAttrs(true), [slot()]),
-    },
-    {
-      name: "TableCell",
-      docs: "TableCell renders td with colspan and rowspan.",
-      classes: {},
-      props: cellProps(),
-      render: el("td", cellAttrs(false), [slot()]),
-    },
-    {
-      name: "TableColGroup",
-      docs: "TableColGroup renders colgroup with optional span.",
-      classes: {},
-      props: [pClass(), pInt("Span"), pAttrs(), pChildren()],
-      render: el("colgroup", [attrClass(), spanAttr, attrRest()], [slot()]),
-    },
-    {
-      name: "TableCol",
-      docs: "TableCol renders a single col definition.",
-      classes: {},
-      props: [pClass(), pInt("Span"), pAttrs()],
-      render: el("col", [attrClass(), spanAttr, attrRest()], [], { void: true }),
-    },
-  ],
-});
diff --git a/bricks/table/table.variants.json b/bricks/table/table.variants.json
deleted file mode 100644
index 9b48058..0000000
--- a/bricks/table/table.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "w-full caption-bottom text-sm",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.table",
-  "keys": []
-}
diff --git a/bricks/text/text.data.json b/bricks/text/text.data.json
deleted file mode 100644
index e45cf97..0000000
--- a/bricks/text/text.data.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.text",
-  "showcase": {
-    "default": {
-      "props": {}
-    },
-    "muted": {
-      "props": {
-        "Class": "text-muted-foreground"
-      }
-    },
-    "code": {
-      "props": {
-        "Class": "text-sm font-mono"
-      }
-    }
-  }
-}
diff --git a/bricks/text/text.def.ts b/bricks/text/text.def.ts
deleted file mode 100644
index 2bf5299..0000000
--- a/bricks/text/text.def.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { attrClass, attrRest, brick, el, pAttrs, pChildren, pClass, slot } from "../_dsl";
-import textVariants from "./text.variants.json";
-
-export default brick({
-  id: "ui.text",
-  dir: "text",
-  docs:
-    "Text renders a paragraph of body copy. Use Inline for inline span copy\n" +
-    "and Title (as 1–6) for headings.",
-  recipes: { text: { file: "text.variants.json", recipe: textVariants } },
-  parts: [
-    {
-      name: "Text",
-      docs: "Text renders a p element with body copy classes.",
-      recipeId: "text",
-      asChild: true,
-      classes: { recipe: {} },
-      props: [pClass(), pAttrs(), pChildren()],
-      render: el("p", [attrClass(), attrRest()], [slot()]),
-    },
-  ],
-});
diff --git a/bricks/text/text.variants.json b/bricks/text/text.variants.json
deleted file mode 100644
index 12af129..0000000
--- a/bricks/text/text.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.text",
-  "keys": []
-}
diff --git a/bricks/textarea/textarea.data.json b/bricks/textarea/textarea.data.json
deleted file mode 100644
index 3aa0bd1..0000000
--- a/bricks/textarea/textarea.data.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.textarea",
-  "showcase": {
-    "rows.custom": {
-      "props": {
-        "Name": "bio",
-        "Placeholder": "Bio",
-        "Rows": 6
-      }
-    },
-    "state.disabled": {
-      "props": {
-        "Disabled": true,
-        "Name": "locked",
-        "Value": "Fixed text"
-      }
-    },
-    "variant.default": {
-      "props": {
-        "Name": "message",
-        "Placeholder": "Your message"
-      }
-    }
-  }
-}
diff --git a/bricks/textarea/textarea.def.ts b/bricks/textarea/textarea.def.ts
deleted file mode 100644
index 11d0bc5..0000000
--- a/bricks/textarea/textarea.def.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
-  attrBool,
-  attrClass,
-  attrExpr,
-  attrRest,
-  brick,
-  cond,
-  controlPassthroughProps,
-  el,
-  fwd,
-  intToString,
-  isSet,
-  lit,
-  pAttrs,
-  pBool,
-  pClass,
-  pInt,
-  pPass,
-  prop,
-  pSize,
-  pStr,
-  pVariant,
-  text,
-} from "../_dsl";
-import textareaVariants from "./textarea.variants.json";
-
-export default brick({
-  id: "ui.textarea",
-  dir: "textarea",
-  docs: "Textarea is a multi-line native text field with row sizing.",
-  recipes: { textarea: { file: "textarea.variants.json", recipe: textareaVariants } },
-  parts: [
-    {
-      name: "Textarea",
-      docs: "Textarea renders a styled multi-line form control.",
-      recipeId: "textarea",
-      classes: { recipe: { variant: "Variant", size: "Size" } },
-      props: [
-        pVariant(),
-        pSize(),
-        pClass(),
-        pPass("Name"),
-        pStr("Value", "initial textarea content"),
-        pPass("Placeholder"),
-        pInt("Rows", "visible line count; defaults to 4 when zero"),
-        pBool("Disabled"),
-        pBool("Required"),
-        ...controlPassthroughProps(),
-        pAttrs(),
-      ],
-      render: el(
-        "textarea",
-        [
-          fwd("id", "ID"),
-          fwd("name", "Name"),
-          attrClass(),
-          attrExpr("rows", cond(isSet(prop("Rows")), intToString(prop("Rows")), lit("4"))),
-          fwd("placeholder", "Placeholder"),
-          attrBool("disabled", prop("Disabled")),
-          attrBool("required", prop("Required")),
-          fwd("role", "Role"),
-          fwd("tabindex", "TabIndex"),
-          fwd("aria-label", "AriaLabel"),
-          attrRest(),
-        ],
-        [text(prop("Value"))]
-      ),
-    },
-  ],
-});
diff --git a/bricks/textarea/textarea.variants.json b/bricks/textarea/textarea.variants.json
deleted file mode 100644
index bd2cbbc..0000000
--- a/bricks/textarea/textarea.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-10 px-3 py-2 text-sm",
-      "lg": "h-12 px-4 text-base",
-      "sm": "h-8 px-3 text-sm",
-      "xs": "h-8 px-2 text-xs"
-    },
-    "variant": {
-      "default": "border-border bg-background",
-      "ghost": "border-transparent bg-muted",
-      "outline": "border-border bg-background"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.textarea",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/bricks/title/title.data.json b/bricks/title/title.data.json
deleted file mode 100644
index 1868022..0000000
--- a/bricks/title/title.data.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "$schema": "../../schemas/data.schema.json",
-  "id": "ui.title",
-  "showcase": {
-    "as.h1": {
-      "props": {
-        "As": 1
-      }
-    },
-    "as.h2": {
-      "props": {
-        "As": 2
-      }
-    },
-    "as.h3": {
-      "props": {
-        "As": 3,
-        "Class": "text-lg"
-      }
-    }
-  }
-}
diff --git a/bricks/title/title.def.ts b/bricks/title/title.def.ts
deleted file mode 100644
index 406e261..0000000
--- a/bricks/title/title.def.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { attrClass, attrRest, brick, el, pAttrs, pChildren, pClass, slot } from "../_dsl";
-import titleVariants from "./title.variants.json";
-
-export default brick({
-  id: "ui.title",
-  dir: "title",
-  docs:
-    "Title renders a heading (h1–h6) from As (1–6). Defaults to h2 when As is 0\n" +
-    "or out of range.",
-  recipes: { title: { file: "title.variants.json", recipe: titleVariants } },
-  parts: [
-    {
-      name: "Title",
-      docs: "Title renders the resolved heading element.",
-      recipeId: "title",
-      asChild: true,
-      classes: { recipe: {} },
-      props: [
-        pClass(),
-        {
-          name: "As",
-          type: "int",
-          cva: false,
-          enumValues: ["1", "2", "3", "4", "5", "6"],
-          goType: "uiutils.HeadingLevel",
-          docs: "maps to h1–h6; 0 and 2 default to h2",
-        },
-        pAttrs(),
-        pChildren(),
-      ],
-      render: el(
-        { kind: "heading", fromProp: "As" },
-        [attrClass(), attrRest()],
-        [slot()]
-      ),
-    },
-  ],
-});
diff --git a/bricks/title/title.variants.json b/bricks/title/title.variants.json
deleted file mode 100644
index 22a3a83..0000000
--- a/bricks/title/title.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.title",
-  "keys": []
-}
diff --git a/bun.lock b/bun.lock
index 62a5835..fd4b186 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,34 +1,344 @@
 {
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "configVersion": 1,
   "workspaces": {
     "": {
-      "name": "@ui8kit/codegen",
+      "name": "ui8kit",
+      "devDependencies": {
+        "@types/bun": "^1.4.2",
+        "html-validate": "^11.16.2",
+        "ui8px": "0.2.4",
+      },
+    },
+    "apps/host-react": {
+      "name": "host-react",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/app-shared": "workspace:*",
+        "@ui8kit/react-ui": "workspace:*",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+      },
+      "devDependencies": {
+        "@tailwindcss/vite": "^4.3.3",
+        "@types/react": "^19.2.0",
+        "@types/react-dom": "^19.2.0",
+        "@vitejs/plugin-react": "^6.1.0",
+        "tailwindcss": "^4.3.3",
+        "typescript": "~6.0.2",
+        "vite": "^8.3.0",
+      },
+    },
+    "apps/host-solid": {
+      "name": "host-solid",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/app-shared": "workspace:*",
+        "@ui8kit/solid-ui": "workspace:*",
+        "solid-js": "^1.9.0",
+      },
+      "devDependencies": {
+        "@tailwindcss/vite": "^4.3.3",
+        "tailwindcss": "^4.3.3",
+        "typescript": "~6.0.2",
+        "vite": "^8.3.0",
+        "vite-plugin-solid": "^2.11.0",
+      },
+    },
+    "apps/host-svelte": {
+      "name": "host-svelte",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/app-shared": "workspace:*",
+        "@ui8kit/svelte-ui": "workspace:*",
+        "svelte": "^5.57.0",
+      },
+      "devDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^7.3.0",
+        "@tailwindcss/vite": "^4.3.3",
+        "@tsconfig/svelte": "^5.0.8",
+        "svelte-check": "^4.7.6",
+        "tailwindcss": "^4.3.3",
+        "typescript": "~6.0.2",
+        "vite": "^8.3.0",
+      },
+    },
+    "apps/host-vue": {
+      "name": "host-vue",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/app-shared": "workspace:*",
+        "@ui8kit/vue-ui": "workspace:*",
+        "vue": "^3.5.43",
+      },
+      "devDependencies": {
+        "@tailwindcss/vite": "^4.3.3",
+        "@vitejs/plugin-vue": "^6.0.9",
+        "tailwindcss": "^4.3.3",
+        "typescript": "~6.0.2",
+        "vite": "^8.3.0",
+        "vue-tsc": "^3.3.12",
+      },
+    },
+    "packages/jinja2/ui": {
+      "name": "@ui8kit/jinja2-ui",
+      "version": "0.0.0",
+    },
+    "packages/latte/ui": {
+      "name": "@ui8kit/latte-ui",
+      "version": "0.0.0",
+    },
+    "packages/react/ui": {
+      "name": "@ui8kit/react-ui",
+      "version": "0.0.0",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.7.0",
+      },
+      "devDependencies": {
+        "@types/react": "^19.2.0",
+        "@types/react-dom": "^19.2.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "typescript": "~6.0.2",
+      },
+      "peerDependencies": {
+        "react": "^19.2.0",
+        "tailwindcss": "^4.3.3",
+      },
+    },
+    "packages/shared/app": {
+      "name": "@ui8kit/app-shared",
+      "version": "0.0.0",
+      "dependencies": {
+        "modern-screenshot": "^4.6.0",
+      },
+      "devDependencies": {
+        "typescript": "~6.0.2",
+      },
+    },
+    "packages/solid/ui": {
+      "name": "@ui8kit/solid-ui",
+      "version": "0.0.0",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.7.0",
+      },
+      "devDependencies": {
+        "solid-js": "^1.9.0",
+        "typescript": "~6.0.2",
+      },
+      "peerDependencies": {
+        "solid-js": "^1.9.0",
+        "tailwindcss": "^4.3.3",
+      },
+    },
+    "packages/svelte/ui": {
+      "name": "@ui8kit/svelte-ui",
+      "version": "0.0.0",
       "dependencies": {
         "clsx": "^2.1.1",
-        "tailwind-merge": "^2.6.0",
+        "tailwind-merge": "^3.7.0",
       },
       "devDependencies": {
-        "@babel/core": "7",
-        "@babel/preset-typescript": "7",
-        "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "@types/node": "^22.10.5",
-        "@types/react": "^19.0.8",
-        "@types/react-dom": "^19.0.3",
-        "@vitejs/plugin-vue": "^5.2.1",
-        "@vue/server-renderer": "^3.5.13",
-        "babel-preset-solid": "^1.9.12",
-        "bun-types": "^1.3.14",
-        "parse5": "^7.2.1",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "solid-js": "^1.9.5",
-        "svelte": "^5.19.0",
-        "tsx": "^4.19.2",
-        "typescript": "^5.7.3",
-        "vite-plugin-solid": "^2.11.6",
-        "vitest": "^3.0.4",
-        "vue": "^3.5.13",
+        "@tsconfig/svelte": "^5.0.8",
+        "svelte": "^5.57.0",
+        "svelte-check": "^4.7.6",
+        "typescript": "~6.0.2",
+      },
+      "peerDependencies": {
+        "svelte": "^5.57.0",
+        "tailwindcss": "^4.3.3",
+      },
+    },
+    "packages/templ/ui": {
+      "name": "@ui8kit/templ-ui",
+      "version": "0.0.0",
+    },
+    "packages/tooling": {
+      "name": "@ui8kit/xgen-tooling",
+      "version": "0.0.0",
+      "bin": {
+        "xgen-rules": "./bin/rules.mjs",
+        "xgen-audit": "./bin/audit.sh",
+        "xgen-zones": "./bin/zones.mjs",
+      },
+    },
+    "packages/twig/ui": {
+      "name": "@ui8kit/twig-ui",
+      "version": "0.0.0",
+    },
+    "packages/vue/ui": {
+      "name": "@ui8kit/vue-ui",
+      "version": "0.0.0",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.7.0",
+      },
+      "devDependencies": {
+        "typescript": "~6.0.2",
+        "vue": "^3.5.43",
+        "vue-tsc": "^3.3.12",
+      },
+      "peerDependencies": {
+        "tailwindcss": "^4.3.3",
+        "vue": "^3.5.43",
+      },
+    },
+    "xgen/check": {
+      "name": "@ui8kit/xgen-check",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-generator": "workspace:*",
+        "@ui8kit/xgen-runtime-core": "workspace:*",
+        "@ui8kit/xgen-runtime-jinja2": "workspace:*",
+        "@ui8kit/xgen-runtime-twig": "workspace:*",
+        "@ui8kit/xgen-schema": "workspace:*",
+        "@ui8kit/xgen-screens": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+        "@vue/compiler-sfc": "^3.5.43",
+        "playwright-core": "^1.63.0",
+        "svelte": "^5.57.0",
+        "typescript": "~6.0.2",
+      },
+      "devDependencies": {
+        "@babel/core": "^7",
+        "@babel/preset-typescript": "^7",
+        "babel-preset-solid": "^1.9",
+        "parse5": "7",
+        "solid-js": "^1.9",
+      },
+    },
+    "xgen/cli": {
+      "name": "@ui8kit/xgen",
+      "version": "0.0.0",
+      "bin": {
+        "xgen": "./src/cli.ts",
+      },
+      "dependencies": {
+        "@ui8kit/xgen-check": "workspace:*",
+        "@ui8kit/xgen-generator": "workspace:*",
+        "@ui8kit/xgen-schema": "workspace:*",
+        "@ui8kit/xgen-screens": "workspace:*",
+      },
+    },
+    "xgen/generator": {
+      "name": "@ui8kit/xgen-generator",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-runtime-core": "workspace:*",
+        "@ui8kit/xgen-runtime-jinja2": "workspace:*",
+        "@ui8kit/xgen-runtime-latte": "workspace:*",
+        "@ui8kit/xgen-runtime-react": "workspace:*",
+        "@ui8kit/xgen-runtime-solid": "workspace:*",
+        "@ui8kit/xgen-runtime-svelte": "workspace:*",
+        "@ui8kit/xgen-runtime-templ": "workspace:*",
+        "@ui8kit/xgen-runtime-twig": "workspace:*",
+        "@ui8kit/xgen-runtime-vue": "workspace:*",
+        "@ui8kit/xgen-schema": "workspace:*",
+        "@ui8kit/xgen-screens": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+      },
+    },
+    "xgen/runtimes/core": {
+      "name": "@ui8kit/xgen-runtime-core",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-screens": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+      },
+    },
+    "xgen/runtimes/jinja2": {
+      "name": "@ui8kit/xgen-runtime-jinja2",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-runtime-twig": "workspace:*",
+      },
+    },
+    "xgen/runtimes/latte": {
+      "name": "@ui8kit/xgen-runtime-latte",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-runtime-twig": "workspace:*",
+      },
+    },
+    "xgen/runtimes/react": {
+      "name": "@ui8kit/xgen-runtime-react",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-runtime-core": "workspace:*",
+        "@ui8kit/xgen-screens": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+      },
+    },
+    "xgen/runtimes/solid": {
+      "name": "@ui8kit/xgen-runtime-solid",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-runtime-core": "workspace:*",
+        "@ui8kit/xgen-screens": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+      },
+    },
+    "xgen/runtimes/svelte": {
+      "name": "@ui8kit/xgen-runtime-svelte",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-runtime-core": "workspace:*",
+        "@ui8kit/xgen-screens": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+      },
+    },
+    "xgen/runtimes/templ": {
+      "name": "@ui8kit/xgen-runtime-templ",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-runtime-core": "workspace:*",
+        "@ui8kit/xgen-screens": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+      },
+    },
+    "xgen/runtimes/twig": {
+      "name": "@ui8kit/xgen-runtime-twig",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-runtime-core": "workspace:*",
+        "@ui8kit/xgen-screens": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+      },
+    },
+    "xgen/runtimes/vue": {
+      "name": "@ui8kit/xgen-runtime-vue",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-runtime-core": "workspace:*",
+        "@ui8kit/xgen-screens": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+      },
+    },
+    "xgen/schema": {
+      "name": "@ui8kit/xgen-schema",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/contract": "^0.2.0",
+        "ajv": "^8.17.1",
+      },
+    },
+    "xgen/screens": {
+      "name": "@ui8kit/xgen-screens",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-schema": "workspace:*",
+        "@ui8kit/xgen-spec": "workspace:*",
+      },
+    },
+    "xgen/spec": {
+      "name": "@ui8kit/xgen-spec",
+      "version": "0.0.0",
+      "dependencies": {
+        "@ui8kit/xgen-schema": "workspace:*",
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.7.0",
       },
     },
   },
@@ -39,7 +349,7 @@
 
     "@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-compilation-targets": "^7.29.7", "@babel/helper-module-transforms": "^7.29.7", "@babel/helpers": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA=="],
 
-    "@babel/generator": ["@babel/generator@7.29.7", "", { "dependencies": { "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ=="],
+    "@babel/generator": ["@babel/generator@7.29.8", "", { "dependencies": { "@babel/parser": "^7.29.8", "@babel/types": "^7.29.8", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg=="],
 
     "@babel/helper-annotate-as-pure": ["@babel/helper-annotate-as-pure@7.29.7", "", { "dependencies": { "@babel/types": "^7.29.7" } }, "sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw=="],
 
@@ -69,9 +379,9 @@
 
     "@babel/helper-validator-option": ["@babel/helper-validator-option@7.29.7", "", {}, "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw=="],
 
-    "@babel/helpers": ["@babel/helpers@7.29.7", "", { "dependencies": { "@babel/template": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg=="],
+    "@babel/helpers": ["@babel/helpers@7.29.10", "", { "dependencies": { "@babel/template": "^7.29.7", "@babel/types": "^7.29.8" } }, "sha512-EMCx3AGZ3WfAl6ht7AyQoPm2Lh+BGYEMdc4Q6Hf7uSCDOZFuLq44qNwL+iaim8VlyYhRAo4X43+weadK8ZB4Yg=="],
 
-    "@babel/parser": ["@babel/parser@7.29.7", "", { "dependencies": { "@babel/types": "^7.29.7" }, "bin": "./bin/babel-parser.js" }, "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg=="],
+    "@babel/parser": ["@babel/parser@7.29.9", "", { "dependencies": { "@babel/types": "^7.29.8" }, "bin": "./bin/babel-parser.js" }, "sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA=="],
 
     "@babel/plugin-syntax-jsx": ["@babel/plugin-syntax-jsx@7.29.7", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A=="],
 
@@ -79,215 +389,225 @@
 
     "@babel/plugin-transform-modules-commonjs": ["@babel/plugin-transform-modules-commonjs@7.29.7", "", { "dependencies": { "@babel/helper-module-transforms": "^7.29.7", "@babel/helper-plugin-utils": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ=="],
 
-    "@babel/plugin-transform-typescript": ["@babel/plugin-transform-typescript@7.29.7", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.29.7", "@babel/helper-create-class-features-plugin": "^7.29.7", "@babel/helper-plugin-utils": "^7.29.7", "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7", "@babel/plugin-syntax-typescript": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw=="],
+    "@babel/plugin-transform-typescript": ["@babel/plugin-transform-typescript@7.29.9", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.29.7", "@babel/helper-create-class-features-plugin": "^7.29.7", "@babel/helper-plugin-utils": "^7.29.7", "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7", "@babel/plugin-syntax-typescript": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-FFwIwzU+7SCOuxxV4YtJql6T9981ZVTm+FHO5GhVsRqCTdy0WwrEZh3l42ARpXruJUDGOptdduHW6Zr7pNPLNg=="],
 
     "@babel/preset-typescript": ["@babel/preset-typescript@7.29.7", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.29.7", "@babel/helper-validator-option": "^7.29.7", "@babel/plugin-syntax-jsx": "^7.29.7", "@babel/plugin-transform-modules-commonjs": "^7.29.7", "@babel/plugin-transform-typescript": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-/Foi8vKY2EVbed/1eZx0gJEEwHAIxogrySI7rULcRIvhZzbvoE/b5qG5Ghc0WKAFKOHA9SD1x7RsFlOYdutIiQ=="],
 
     "@babel/template": ["@babel/template@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg=="],
 
-    "@babel/traverse": ["@babel/traverse@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-globals": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/types": "^7.29.7", "debug": "^4.3.1" } }, "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw=="],
+    "@babel/traverse": ["@babel/traverse@7.29.10", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.8", "@babel/helper-globals": "^7.29.7", "@babel/parser": "^7.29.9", "@babel/template": "^7.29.7", "@babel/types": "^7.29.8", "debug": "^4.3.1" } }, "sha512-B3lYAs2nkKskbgQ1nfy8Ma9ao9Q1rntTAQHrzzyDuj+TSO+X3le6PfWwqDvodsb+OumE10eMFfuMCTQSQ5iuIQ=="],
 
-    "@babel/types": ["@babel/types@7.29.7", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],
+    "@babel/types": ["@babel/types@7.29.8", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg=="],
 
-    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.28.1", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ=="],
+    "@html-validate/stylish": ["@html-validate/stylish@6.1.0", "", {}, "sha512-ceNvF6/5hgvw/OrxXtdl2KurRVLN/Q/OkD/qminRRY/IIERmVaqJOpDF1nhRZMrOG/vyKKW0+Nxw6lSoHUP4Ow=="],
 
-    "@esbuild/android-arm": ["@esbuild/android-arm@0.28.1", "", { "os": "android", "cpu": "arm" }, "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ=="],
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
-    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.28.1", "", { "os": "android", "cpu": "arm64" }, "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg=="],
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
 
-    "@esbuild/android-x64": ["@esbuild/android-x64@0.28.1", "", { "os": "android", "cpu": "x64" }, "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng=="],
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
 
-    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.28.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q=="],
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.6.0", "", {}, "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw=="],
 
-    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.28.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ=="],
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.28.1", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw=="],
+    "@oxc-project/types": ["@oxc-project/types@0.152.0", "", {}, "sha512-oM/5rLBm2tPkg0iBgkH/FOeR3PCDpY19GTgAZjMFM8h9WI9VW7cLgzp6nwtarYKmovavIQZ+Fe/RKX/8C8O/Rw=="],
 
-    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.28.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ=="],
+    "@rolldown/binding-android-arm-eabi": ["@rolldown/binding-android-arm-eabi@1.2.12", "", { "os": "android", "cpu": "arm" }, "sha512-dB/a1214qKfHMXCpgqR4OZT+jS4kTyEXbQGJPqzobt5EwH5rX080pxE37alt3RzvR1bf1Yz/yGqRfrYAxuPw0A=="],
 
-    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.28.1", "", { "os": "linux", "cpu": "arm" }, "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ=="],
+    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.2.12", "", { "os": "android", "cpu": "arm64" }, "sha512-7KHFgQ5VJxIHcLlrwrc3Xbds7oTNQT7Pgi9gQCJKrd2VGab/UksIOYp6VD8MzCstGxOKMgNamPwUCfxPdP1OHg=="],
 
-    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.28.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g=="],
+    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.2.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-3YIhqHD96nA5SaYNRBR16HnGv4oavZvXfD/ayHM+oYZ0WD/8lBAtf6zQua4kEyAvpqrluKXl0lnOBoiNby7x9w=="],
 
-    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.28.1", "", { "os": "linux", "cpu": "ia32" }, "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w=="],
+    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.2.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-UuuJ35MFw4gmFOrE9pEqIV+K3syIKveph+Qc1/ljHZVdoDW4pz/JHR/eMVom+TZGl/5OOvGJOWaOCVt3ZfqhxA=="],
 
-    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.28.1", "", { "os": "linux", "cpu": "none" }, "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg=="],
+    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.2.12", "", { "os": "freebsd", "cpu": "x64" }, "sha512-uMvssit0a4W+/7D8CbHUvG719mH3R2jwXAlh/XcPvuHTE0g++LymF88DCGNX0HM2rBOn0xrzgXktIB6fLSJBTQ=="],
 
-    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.28.1", "", { "os": "linux", "cpu": "none" }, "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ=="],
+    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.2.12", "", { "os": "linux", "cpu": "arm" }, "sha512-XcFu0R0xWnwzSf4IQgFH1rJIckPN1pLy2R+4r9IDB7Yfu/ys9cVqfa4pBrMHj7a3gl8mIR4nRNPg0e5IvEVs6g=="],
 
-    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.28.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ=="],
+    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.2.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-260UrKgn8tz39ak+SMDOirKzr7V04M9dWPw5llW00SwBivCZoWcRBKV1d8cXnRkUmSZA3BdiUmBHWk7734Ulpw=="],
 
-    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.28.1", "", { "os": "linux", "cpu": "none" }, "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ=="],
+    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.2.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-5YK1I9SqDkbPgc1IA8BgDl34suqUS2q0KWnBrirm0E51YjOs6eo6dV6jbQfNE/argHRSvd0QUGgtpIoYx+WWpw=="],
 
-    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.28.1", "", { "os": "linux", "cpu": "s390x" }, "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag=="],
+    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.2.12", "", { "os": "linux", "cpu": "ppc64" }, "sha512-Rkcrmp7eFRg74yL5fXEU91JEWbdEPLevWwGtXpmhbjlD1StScbWTmO94Bhly+Mo+ketKYkdmM1vNUKeWSlx8cQ=="],
 
-    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.28.1", "", { "os": "linux", "cpu": "x64" }, "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA=="],
+    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.2.12", "", { "os": "linux", "cpu": "s390x" }, "sha512-qvK4DuAsQc2BSjlx+Xr+IzOIvvxbGZqxFwdWfG6F518Erj0GGISyQbJ6pIappnOxlNPzNHvo/L0BwB30GZ+zVw=="],
 
-    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.28.1", "", { "os": "none", "cpu": "arm64" }, "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw=="],
+    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.2.12", "", { "os": "linux", "cpu": "x64" }, "sha512-Q9uLBO53Xd4QIq1WOycVQyPP1O4HhraEV2qqb3uTrnVw6QZih9duY4vNXOivL1xoUS1/z+W8eF4NMfl2a8Sdjw=="],
 
-    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.28.1", "", { "os": "none", "cpu": "x64" }, "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg=="],
+    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.2.12", "", { "os": "linux", "cpu": "x64" }, "sha512-3IBxWFMjbOZskDPKv8Lf9BCnahlKuHthWkYnyIxOH/QcJrFcS4EmcenthApkwr/5+nEqZlLzeYbxeMaX7A5u4g=="],
 
-    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.28.1", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q=="],
+    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.2.12", "", { "os": "none", "cpu": "arm64" }, "sha512-xtX61xg4LKPkPWilZU1ynKClz5Gj4bf74LML4r3eVLWumKnGjoEr1OSHQhMdbBDoYTi+yjrujvpZe2pUnqCrrA=="],
 
-    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.28.1", "", { "os": "openbsd", "cpu": "x64" }, "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw=="],
+    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.2.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-At7fPB6PCaIjzgIhEZFxuT+BBFqiQibJDT4d3PhiR3f4E7bbMZF4aKblbFfEM3sETRDd1YiQx/+U/g/B/ou5Ew=="],
 
-    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.28.1", "", { "os": "none", "cpu": "arm64" }, "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg=="],
+    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.2.12", "", { "os": "win32", "cpu": "x64" }, "sha512-WIw2haVKwjuYdXkHaoC0mF8Le71TuCBxjrdKqLbJGctbBABj+ClfmNvtbOnzpq3RokNo5+V1qhtSzJyXorsklQ=="],
 
-    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.28.1", "", { "os": "sunos", "cpu": "x64" }, "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ=="],
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.1", "", {}, "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw=="],
 
-    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.28.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA=="],
+    "@sidvind/better-ajv-errors": ["@sidvind/better-ajv-errors@7.0.0", "", { "peerDependencies": { "ajv": "^8.0.0" } }, "sha512-imVsp5D3KxJ8+uUmu2dsLKnFg3qdX952v/L1gZoCa0NO2ivhQWHMpYM2KmpFrRXHWFjlqkNZ/935nxiTqXEi1A=="],
 
-    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.28.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg=="],
+    "@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.13", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-wgKggnhZVL9Bfx1OaKKTrYY9BFRk6C8UAkQNUcIv1+llzYrIqy+RZm5HPKzn0NpEBvTVhTqB4kQyllZywsRBRQ=="],
 
-    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.28.1", "", { "os": "win32", "cpu": "x64" }, "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A=="],
+    "@sveltejs/load-config": ["@sveltejs/load-config@0.2.3", "", {}, "sha512-VT3qmUb8pRV2QrZjd8iAmtg8lf4W0TIjZbvXtz5MKei/q96teWZgGJyyidJzOjzZzvdq616eSRVeMYIQChUTAQ=="],
 
-    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+    "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@7.3.1", "", { "dependencies": { "deepmerge": "^4.3.1", "magic-string": "^1.0.0", "obug": "^2.1.0", "vitefu": "^1.1.2" }, "peerDependencies": { "svelte": "^5.46.4", "vite": "^8.0.0-beta.7 || ^8.0.0" } }, "sha512-ZPsLN8B1e/En+Ak5s4V7srFDT532oS0qieLsQwu63NGKsS+iAjoO2Js1BochlHlglcU+Pt7WAO3C5Ee+4f6gVA=="],
 
-    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.3.3", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.1", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.3" } }, "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg=="],
 
-    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.3", "@tailwindcss/oxide-darwin-arm64": "4.3.3", "@tailwindcss/oxide-darwin-x64": "4.3.3", "@tailwindcss/oxide-freebsd-x64": "4.3.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", "@tailwindcss/oxide-linux-x64-musl": "4.3.3", "@tailwindcss/oxide-wasm32-wasi": "4.3.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" } }, "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA=="],
 
-    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.3", "", { "os": "android", "cpu": "arm64" }, "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw=="],
 
-    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw=="],
 
-    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.62.2", "", { "os": "android", "cpu": "arm" }, "sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw=="],
 
-    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.62.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw=="],
 
-    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.62.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3", "", { "os": "linux", "cpu": "arm" }, "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ=="],
 
-    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.62.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w=="],
 
-    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.62.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA=="],
 
-    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.62.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w=="],
 
-    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.62.2", "", { "os": "linux", "cpu": "arm" }, "sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img=="],
 
-    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.62.2", "", { "os": "linux", "cpu": "arm" }, "sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA=="],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.3", "", { "dependencies": { "@emnapi/core": "^1.11.1", "@emnapi/runtime": "^1.11.1", "@emnapi/wasi-threads": "^1.2.2", "@napi-rs/wasm-runtime": "^1.1.4", "@tybys/wasm-util": "^0.10.2", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ=="],
 
-    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.62.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ=="],
 
-    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.62.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.3", "", { "os": "win32", "cpu": "x64" }, "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw=="],
 
-    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.62.2", "", { "os": "linux", "cpu": "none" }, "sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg=="],
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.3.3", "", { "dependencies": { "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "tailwindcss": "4.3.3" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw=="],
 
-    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.62.2", "", { "os": "linux", "cpu": "none" }, "sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ=="],
+    "@tsconfig/svelte": ["@tsconfig/svelte@5.0.8", "", {}, "sha512-UkNnw1/oFEfecR8ypyHIQuWYdkPvHiwcQ78sh+ymIiYoF+uc5H1UBetbjyqT+vgGJ3qQN6nhucJviX6HesWtKQ=="],
 
-    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.62.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A=="],
+    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
 
-    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.62.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w=="],
+    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
 
-    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.62.2", "", { "os": "linux", "cpu": "none" }, "sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg=="],
+    "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="],
 
-    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.62.2", "", { "os": "linux", "cpu": "none" }, "sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q=="],
+    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
 
-    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.62.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg=="],
+    "@types/bun": ["@types/bun@1.4.2", "", { "dependencies": { "bun-types": "1.4.2" } }, "sha512-GimotNn7+ZV0uVArItBbriZsR1oNf0+WTzPkdcFrzShI7k2norL0uzEaJT8T33dWr7O/c9ZDuAFQrctKCi72oQ=="],
 
-    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.62.2", "", { "os": "linux", "cpu": "x64" }, "sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A=="],
+    "@types/estree": ["@types/estree@1.0.9", "", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
 
-    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.62.2", "", { "os": "linux", "cpu": "x64" }, "sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg=="],
+    "@types/node": ["@types/node@26.6.4", "", { "dependencies": { "undici-types": "~8.9.0" } }, "sha512-ldVPDCzj7fsaGZrLB0NuHuTvJcsNasysBAqMolr/cgxrLd1xbqxIr3XJiPnHHJUCxj5sNF1vnRj9aWnrVh5Jcg=="],
 
-    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.62.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg=="],
+    "@types/react": ["@types/react@19.3.0", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg=="],
 
-    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.62.2", "", { "os": "none", "cpu": "arm64" }, "sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA=="],
+    "@types/react-dom": ["@types/react-dom@19.3.0", "", { "peerDependencies": { "@types/react": "^19.3.0" } }, "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q=="],
 
-    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.62.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg=="],
+    "@ui8kit/app-shared": ["@ui8kit/app-shared@workspace:packages/shared/app"],
 
-    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.62.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q=="],
+    "@ui8kit/contract": ["@ui8kit/contract@0.2.0", "", {}, "sha512-Ba+YQPjwSmgFNh3nUYSyt3+Ap/fYUK6IQCXEj33WoDbeT6j0ejmq1ln8wGLHVe5dgBcRhI5/QDPprjgOYkYeXg=="],
 
-    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.62.2", "", { "os": "win32", "cpu": "x64" }, "sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg=="],
+    "@ui8kit/jinja2-ui": ["@ui8kit/jinja2-ui@workspace:packages/jinja2/ui"],
 
-    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.62.2", "", { "os": "win32", "cpu": "x64" }, "sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA=="],
+    "@ui8kit/latte-ui": ["@ui8kit/latte-ui@workspace:packages/latte/ui"],
 
-    "@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.11", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-LFuZUkjJ9iF7JZye/aG5XM0SFcQ5VyL0oVX4WJ9dc0Va3R3s0OauX1BESVCb+YN/ol8TAfqGDDAQsTG627Y5kw=="],
+    "@ui8kit/react-ui": ["@ui8kit/react-ui@workspace:packages/react/ui"],
 
-    "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@5.1.1", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1", "debug": "^4.4.1", "deepmerge": "^4.3.1", "kleur": "^4.1.5", "magic-string": "^0.30.17", "vitefu": "^1.0.6" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.0.0" } }, "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ=="],
+    "@ui8kit/solid-ui": ["@ui8kit/solid-ui@workspace:packages/solid/ui"],
 
-    "@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@4.0.1", "", { "dependencies": { "debug": "^4.3.7" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^5.0.0", "svelte": "^5.0.0", "vite": "^6.0.0" } }, "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw=="],
+    "@ui8kit/svelte-ui": ["@ui8kit/svelte-ui@workspace:packages/svelte/ui"],
 
-    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
+    "@ui8kit/templ-ui": ["@ui8kit/templ-ui@workspace:packages/templ/ui"],
 
-    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
+    "@ui8kit/twig-ui": ["@ui8kit/twig-ui@workspace:packages/twig/ui"],
 
-    "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="],
+    "@ui8kit/vue-ui": ["@ui8kit/vue-ui@workspace:packages/vue/ui"],
 
-    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
+    "@ui8kit/xgen": ["@ui8kit/xgen@workspace:xgen/cli"],
 
-    "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
+    "@ui8kit/xgen-check": ["@ui8kit/xgen-check@workspace:xgen/check"],
 
-    "@types/deep-eql": ["@types/deep-eql@4.0.2", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="],
+    "@ui8kit/xgen-generator": ["@ui8kit/xgen-generator@workspace:xgen/generator"],
 
-    "@types/estree": ["@types/estree@1.0.9", "", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
+    "@ui8kit/xgen-runtime-core": ["@ui8kit/xgen-runtime-core@workspace:xgen/runtimes/core"],
 
-    "@types/node": ["@types/node@22.20.1", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q=="],
+    "@ui8kit/xgen-runtime-jinja2": ["@ui8kit/xgen-runtime-jinja2@workspace:xgen/runtimes/jinja2"],
 
-    "@types/react": ["@types/react@19.2.17", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw=="],
+    "@ui8kit/xgen-runtime-latte": ["@ui8kit/xgen-runtime-latte@workspace:xgen/runtimes/latte"],
 
-    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+    "@ui8kit/xgen-runtime-react": ["@ui8kit/xgen-runtime-react@workspace:xgen/runtimes/react"],
 
-    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+    "@ui8kit/xgen-runtime-solid": ["@ui8kit/xgen-runtime-solid@workspace:xgen/runtimes/solid"],
 
-    "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.4", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA=="],
+    "@ui8kit/xgen-runtime-svelte": ["@ui8kit/xgen-runtime-svelte@workspace:xgen/runtimes/svelte"],
 
-    "@vitest/expect": ["@vitest/expect@3.2.7", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/spy": "3.2.7", "@vitest/utils": "3.2.7", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" } }, "sha512-E8eBXaKibuvH2pSZErOjdVb5vF4PbKYcrnluBTYxEk1l/VhhwZg1kZQsdtjq+CsF5CFydf2Rdkz7jDHKSisi3w=="],
+    "@ui8kit/xgen-runtime-templ": ["@ui8kit/xgen-runtime-templ@workspace:xgen/runtimes/templ"],
 
-    "@vitest/mocker": ["@vitest/mocker@3.2.7", "", { "dependencies": { "@vitest/spy": "3.2.7", "estree-walker": "^3.0.3", "magic-string": "^0.30.17" }, "peerDependencies": { "msw": "^2.4.9", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0" }, "optionalPeers": ["msw", "vite"] }, "sha512-Trr0hYO9CM3Wj6ksWHRhK9IZpIY6wTMO5u/MqXurMxT57sWBaOPEtP3Oq60ihZuh5JsiagKfz95OcxdEP6dBrA=="],
+    "@ui8kit/xgen-runtime-twig": ["@ui8kit/xgen-runtime-twig@workspace:xgen/runtimes/twig"],
 
-    "@vitest/pretty-format": ["@vitest/pretty-format@3.2.7", "", { "dependencies": { "tinyrainbow": "^2.0.0" } }, "sha512-KUHlwqVu0sRlhCdyPdQ/wBoTfRahjUky1MubOmYw9fWfIZy1gNoHpuaaQBPAaMaVYdQYHJLurzj8ECCj5OwTqA=="],
+    "@ui8kit/xgen-runtime-vue": ["@ui8kit/xgen-runtime-vue@workspace:xgen/runtimes/vue"],
 
-    "@vitest/runner": ["@vitest/runner@3.2.7", "", { "dependencies": { "@vitest/utils": "3.2.7", "pathe": "^2.0.3", "strip-literal": "^3.0.0" } }, "sha512-sB9y4ovltoQP+WaUPwmSxO9WIg9Ig694Di5PalVPsYHklAdE027mehpWF2SQSVq+k6sFgaivbTjTJwZLSHbedA=="],
+    "@ui8kit/xgen-schema": ["@ui8kit/xgen-schema@workspace:xgen/schema"],
 
-    "@vitest/snapshot": ["@vitest/snapshot@3.2.7", "", { "dependencies": { "@vitest/pretty-format": "3.2.7", "magic-string": "^0.30.17", "pathe": "^2.0.3" } }, "sha512-7C+MwShwtBSI5Buwoyg3s/iY1eHL9PKAf+O1wVh/TdnjXUtkoL/9YQtre90i4MtNXM6edP1wJ2zOBpfCyhIS7g=="],
+    "@ui8kit/xgen-screens": ["@ui8kit/xgen-screens@workspace:xgen/screens"],
 
-    "@vitest/spy": ["@vitest/spy@3.2.7", "", { "dependencies": { "tinyspy": "^4.0.3" } }, "sha512-Q2eQGI6d2L/hBtZ0qNuKcAGid68XK6cv1xsoaIma6PaJhHPoqcEJhYpXZ/5myCMqkNgtP6UKuBhbc0nHKnrkuQ=="],
+    "@ui8kit/xgen-spec": ["@ui8kit/xgen-spec@workspace:xgen/spec"],
 
-    "@vitest/utils": ["@vitest/utils@3.2.7", "", { "dependencies": { "@vitest/pretty-format": "3.2.7", "loupe": "^3.1.4", "tinyrainbow": "^2.0.0" } }, "sha512-x6BDOd7dyo3PFLY3I9/HJ25X/6OurhGXk2/B9gOZNPF7XDVjeBK4k01lQE5uvDpbuheErh91qYuE1E2OEjK3Rw=="],
+    "@ui8kit/xgen-tooling": ["@ui8kit/xgen-tooling@workspace:packages/tooling"],
 
-    "@vue/compiler-core": ["@vue/compiler-core@3.5.39", "", { "dependencies": { "@babel/parser": "^7.29.7", "@vue/shared": "3.5.39", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-16KBTEXAJCpDr0mwlw+AZyhu8iyC7R3S2vBwsI7QnWJU6X3WKc9VKeNEZpiMdZ569qWhz9574L3vV55qRL0Vtw=="],
+    "@vitejs/plugin-react": ["@vitejs/plugin-react@6.1.1", "", { "dependencies": { "@rolldown/pluginutils": "^1.0.1" }, "peerDependencies": { "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0", "babel-plugin-react-compiler": "^1.0.0", "oxc-transform-react": "^0.145.0", "vite": "^8.0.0" }, "optionalPeers": ["@rolldown/plugin-babel", "babel-plugin-react-compiler", "oxc-transform-react"] }, "sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw=="],
 
-    "@vue/compiler-dom": ["@vue/compiler-dom@3.5.39", "", { "dependencies": { "@vue/compiler-core": "3.5.39", "@vue/shared": "3.5.39" } }, "sha512-oQPigALqYbNxTNPvNgSOe+czwVExfbVF02lz8jP0S3AXJiu3jxYDygNUiqSep4ezzW8XgnubqH63My2A7JR/vg=="],
+    "@vitejs/plugin-vue": ["@vitejs/plugin-vue@6.0.9", "", { "dependencies": { "@rolldown/pluginutils": "^1.0.1" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vue": "^3.2.25" } }, "sha512-rD/MORlhaZMlXWW0rEn4FB4wMinWC0z/D7Ye160S5+Rs1mC8ZDAdcDp4SjKfUhG5t8q1ktcPVw4xuTkPRlzrSA=="],
 
-    "@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.39", "", { "dependencies": { "@babel/parser": "^7.29.7", "@vue/compiler-core": "3.5.39", "@vue/compiler-dom": "3.5.39", "@vue/compiler-ssr": "3.5.39", "@vue/shared": "3.5.39", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.15", "source-map-js": "^1.2.1" } }, "sha512-d0ki86iOyN8LoZPBmk5SJWNwHP19CnDDCfuo//+2WJa2g5Ke0Jay983PIBIcSSzldC68I8DrD5GrHV3OSDfodg=="],
+    "@volar/language-core": ["@volar/language-core@2.4.28", "", { "dependencies": { "@volar/source-map": "2.4.28" } }, "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ=="],
 
-    "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.39", "", { "dependencies": { "@vue/compiler-dom": "3.5.39", "@vue/shared": "3.5.39" } }, "sha512-Ce7/wvwMHai74bdszfXExdazFigYnlF9zgCmEQUcM1j0fOymlouZ7XilTYNo8oUjhlnjYOZbGrcYKuqjz89Ucw=="],
+    "@volar/source-map": ["@volar/source-map@2.4.28", "", {}, "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ=="],
 
-    "@vue/reactivity": ["@vue/reactivity@3.5.39", "", { "dependencies": { "@vue/shared": "3.5.39" } }, "sha512-TpsuBJ9gGlZa5d23XcM2y8EXanz9dZeVDQBXRwzy46ItgvM+rWpzs+UVM0wcRLxGvcav0HE5jz2gNL53xlRAog=="],
+    "@volar/typescript": ["@volar/typescript@2.4.28", "", { "dependencies": { "@volar/language-core": "2.4.28", "path-browserify": "^1.0.1", "vscode-uri": "^3.0.8" } }, "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw=="],
 
-    "@vue/runtime-core": ["@vue/runtime-core@3.5.39", "", { "dependencies": { "@vue/reactivity": "3.5.39", "@vue/shared": "3.5.39" } }, "sha512-9GLtNyRvPAUMbX+7ono0RC2j0guo2LXVi8LvcmAooImACUKm0oFf0jjwbX8/H0AE/t1nxhAkn8RSl9PMCzzxZw=="],
+    "@vue/compiler-core": ["@vue/compiler-core@3.5.43", "", { "dependencies": { "@babel/parser": "^7.29.8", "@vue/shared": "3.5.43", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-zdiLhnbe1QQqgDT8xZMpNmyqZ3qlI+/Q/FHQco57Kwl/b05HhCzN6eVGN9QU9rbga4CrS0H5SYY8VGHZCt/1Hg=="],
 
-    "@vue/runtime-dom": ["@vue/runtime-dom@3.5.39", "", { "dependencies": { "@vue/reactivity": "3.5.39", "@vue/runtime-core": "3.5.39", "@vue/shared": "3.5.39", "csstype": "^3.2.3" } }, "sha512-7Y6aAGboKcXAZ3ECuUy7RrS5yy2r47dhTp2SKaJmYxjopImaVFaNa5Ne66NwGovsrxVAl5S5rwc7m22UG7Lmww=="],
+    "@vue/compiler-dom": ["@vue/compiler-dom@3.5.43", "", { "dependencies": { "@vue/compiler-core": "3.5.43", "@vue/shared": "3.5.43" } }, "sha512-PEZoAk3NQmsn/ejMzSOCyTYqwGqczrWm70PuhBKjjv1+TCoQAaO/zOqNwjV+honlNstT5ILxtc+8r8UUfj+iEQ=="],
 
-    "@vue/server-renderer": ["@vue/server-renderer@3.5.39", "", { "dependencies": { "@vue/compiler-ssr": "3.5.39", "@vue/shared": "3.5.39" }, "peerDependencies": { "vue": "3.5.39" } }, "sha512-yZSakiAGw85rZfG7UM8akMnIF+FmeiNk47uvHf2nVBBSe+dIKUhZuZq9+XgJhbV3nS5Z4ALH23/MpXofW+mbcw=="],
+    "@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.43", "", { "dependencies": { "@babel/parser": "^7.29.8", "@vue/compiler-core": "3.5.43", "@vue/compiler-dom": "3.5.43", "@vue/compiler-ssr": "3.5.43", "@vue/shared": "3.5.43", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.28", "source-map-js": "^1.2.1" } }, "sha512-FCbrG3XNCRl+js3huuKx4IVHBLTvMkJhVepjbxSPu1gn4yWLaYtGNQdjJGZaMytXB6qb76qQDDmDSLy/vkmleQ=="],
 
-    "@vue/shared": ["@vue/shared@3.5.39", "", {}, "sha512-l1rrBtBfTnmxvtsvdQDXltUUy8S1Y+ZaqdfUzmAnJkTd8Z8rv5v/ytW+TKiqEOWyHPoqtPlNFSs0lhRmYVSHVA=="],
+    "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.43", "", { "dependencies": { "@vue/compiler-dom": "3.5.43", "@vue/shared": "3.5.43" } }, "sha512-GF62orf7KiJX9RqrHNGrYBudsQGD0OhJ5nDs90O8UiDuS40+YMYomiXu6w6EuvtXuRDc3MSNis3EaaSKAVSWpg=="],
 
-    "acorn": ["acorn@8.17.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg=="],
+    "@vue/language-core": ["@vue/language-core@3.3.12", "", { "dependencies": { "@volar/language-core": "2.4.28", "@vue/compiler-dom": "^3.5.0", "@vue/shared": "^3.5.0", "alien-signals": "^3.2.1", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1", "picomatch": "^4.0.4" } }, "sha512-k7uIKR0n4CBidk233y7cac9osnDQ5WRidTl6nsrNvpZ3nf8cx9iJxRVsRzVsoPRHbowT/iKgGMTS9RGov3jeIA=="],
 
-    "aria-query": ["aria-query@5.3.1", "", {}, "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g=="],
+    "@vue/reactivity": ["@vue/reactivity@3.5.43", "", { "dependencies": { "@vue/shared": "3.5.43" } }, "sha512-G/c9GyOZNI2jVaaS6OX1EF1SSFSv7H0ERqNTl4+DTFMlZmB5eVAB53aLQNam/7NL2NPtaDD7RdVrzf8uJzMuOA=="],
 
-    "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
+    "@vue/runtime-core": ["@vue/runtime-core@3.5.43", "", { "dependencies": { "@vue/reactivity": "3.5.43", "@vue/shared": "3.5.43" } }, "sha512-hU6U6VnVhBGQDpvlnnDlIB8ZGJBiOcgk2lh/0InltHiz3D8oSkluvuvY+do1G2H3+udeKFsmaBlgVYP7gXQzEw=="],
 
-    "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
+    "@vue/runtime-dom": ["@vue/runtime-dom@3.5.43", "", { "dependencies": { "@vue/reactivity": "3.5.43", "@vue/runtime-core": "3.5.43", "@vue/shared": "3.5.43", "csstype": "^3.2.3" } }, "sha512-Bb2Jc0YjjJdMt1SJmb9b2L/IWd3I8lIT9x9eS/xvvP9CiVgna0ffua74xKRmt4/uSJ+0r4iN8ex1jrqkhQGWQw=="],
 
-    "babel-plugin-jsx-dom-expressions": ["babel-plugin-jsx-dom-expressions@0.40.7", "", { "dependencies": { "@babel/helper-module-imports": "7.18.6", "@babel/plugin-syntax-jsx": "^7.18.6", "@babel/types": "^7.20.7", "html-entities": "2.3.3", "parse5": "^7.1.2" }, "peerDependencies": { "@babel/core": "^7.20.12" } }, "sha512-/O6JWUmjv03OI9lL2ry9bUjpD5S3PclM55RRJEyCdcFZ5W2SEA/59d+l2hNsk3gI6kiWRdRPdOtqZmsQzFN1pQ=="],
+    "@vue/server-renderer": ["@vue/server-renderer@3.5.43", "", { "dependencies": { "@vue/compiler-ssr": "3.5.43", "@vue/runtime-dom": "3.5.43", "@vue/shared": "3.5.43" } }, "sha512-l2Ygjv9NehV94PSBxNWsAHC0j/eIIKbn92mBuWXAPGLnn6HfJ6MH5ubsd+Nk0YoZ5FRuxWI1P2VSoh+dbPQhCQ=="],
 
-    "babel-preset-solid": ["babel-preset-solid@1.9.12", "", { "dependencies": { "babel-plugin-jsx-dom-expressions": "^0.40.6" }, "peerDependencies": { "@babel/core": "^7.0.0", "solid-js": "^1.9.12" }, "optionalPeers": ["solid-js"] }, "sha512-LLqnuKVDlKpyBlMPcH6qEvs/wmS9a+NczppxJ3ryS/c0O5IiSFOIBQi9GzyiGDSbcJpx4Gr87jyFTos1MyEuWg=="],
+    "@vue/shared": ["@vue/shared@3.5.43", "", {}, "sha512-uksS7YGMR5NZyr4JNq0Rp+QyLns0ueaz20KwzIPW9R0LH1Vnt4E+XUM29PNseEbf1www2gOuhuDi5AKOIXag9Q=="],
 
-    "baseline-browser-mapping": ["baseline-browser-mapping@2.10.43", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-AjYpR78kDWAY3Efj+cDTFH9t9SCoL7OoTp1BOb0mQV7S+6CiLwnWM3FyxhJtdPufDFKzmCSFoUncKjWgJEZTCQ=="],
+    "acorn": ["acorn@8.18.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ=="],
+
+    "ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
+
+    "alien-signals": ["alien-signals@3.2.1", "", {}, "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g=="],
+
+    "aria-query": ["aria-query@5.3.1", "", {}, "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g=="],
+
+    "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
 
-    "browserslist": ["browserslist@4.28.6", "", { "dependencies": { "baseline-browser-mapping": "^2.10.42", "caniuse-lite": "^1.0.30001803", "electron-to-chromium": "^1.5.389", "node-releases": "^2.0.51", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-FQBYNK15VMslhLHpA7+n+n1GOlF1kId2xcCg7/j95f24AOF6VDYMNH4mFxF7KuaTdv627faazpOAjFzMrfJOUw=="],
+    "babel-plugin-jsx-dom-expressions": ["babel-plugin-jsx-dom-expressions@0.40.11", "", { "dependencies": { "@babel/helper-module-imports": "7.18.6", "@babel/plugin-syntax-jsx": "^7.18.6", "@babel/types": "^7.20.7", "html-entities": "2.3.3", "parse5": "^7.1.2" }, "peerDependencies": { "@babel/core": "^7.20.12" } }, "sha512-k7TkOv7uVYnrq/bYyVvG5cWOC9IObAGfmyW3aMkG8l2sq2qt/5THkUBja69PMLEGGi8G+fXB2Fh7eS4OwZRBoQ=="],
 
-    "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
+    "babel-preset-solid": ["babel-preset-solid@1.9.16", "", { "dependencies": { "babel-plugin-jsx-dom-expressions": "^0.40.11" }, "peerDependencies": { "@babel/core": "^7.0.0", "solid-js": "^1.9.16" }, "optionalPeers": ["solid-js"] }, "sha512-+0h40Qk2oBfkQ4OGDBHIDtvq/XQiOnCfzjNHmMxriAr8MmdsaIbyJgqYglDs4d70sF8O08sSpx61TKdpUt3oRw=="],
 
-    "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.11.28", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-br0LOmjJqr6Rt4AEkadbcNf67Zpo7EPwKsWbjnRrJIa1QYFHQBqM4C7F2WTbV8ahTEcg1Eo+Y0aWjjORInYFyA=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001806", "", {}, "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw=="],
+    "browserslist": ["browserslist@4.29.3", "", { "dependencies": { "baseline-browser-mapping": "^2.11.26", "caniuse-lite": "^1.0.30001813", "electron-to-chromium": "^1.5.439", "node-releases": "^2.0.57", "update-browserslist-db": "^1.3.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-1R4kiYKXGViqEN0CnoDrXc1StD9niAwu+j2dukWzrD4bJgsD4lDmEp0CRbc6E/vYJIfTHwPmwyaKtVSudICdPA=="],
 
-    "chai": ["chai@5.3.3", "", { "dependencies": { "assertion-error": "^2.0.1", "check-error": "^2.1.1", "deep-eql": "^5.0.1", "loupe": "^3.1.0", "pathval": "^2.0.0" } }, "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw=="],
+    "bun-types": ["bun-types@1.4.2", "", { "dependencies": { "@types/node": "*" } }, "sha512-bxV1FgK7yBIzjRe5zBozIM4Bem11ZJcCXSrjWRG3YWLt8yFDePu4cLjpebO8OvPeIE9trbyPF4fuj3Cia4Fj3w=="],
 
-    "check-error": ["check-error@2.1.3", "", {}, "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001816", "", {}, "sha512-+8Yx7BXCoqk6IF8yTicjfUR6D/ldJzdlsodlEOiOSPmhK844WIgk67/zIQaGAOxNkZyyvBlrRFnLvqKIoqbAFw=="],
+
+    "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
@@ -297,29 +617,29 @@
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" }, "peerDependencies": { "supports-color": "*" }, "optionalPeers": ["supports-color"] }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
-    "deep-eql": ["deep-eql@5.0.2", "", {}, "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q=="],
-
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
 
-    "devalue": ["devalue@5.8.1", "", {}, "sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw=="],
+    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.393", "", {}, "sha512-kiDJdIUawuEIcp9XoICKp1iTYDEbgguIPq526N1Q7jIQDeQ3CqoMx71025PI/7E48Ddtw2HuWsVjY7afEgNxmg=="],
+    "devalue": ["devalue@5.9.4", "", {}, "sha512-sPAT4pztbu6586/hrhOnMKS17IJrvg12mXiSPSS3W5qDeN2RGgvZ0diZCm31dBbnevfVmujNO3IM2wrS4Y2Rhg=="],
 
-    "entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.454", "", {}, "sha512-NqD5GhkXnxJpDQVCmmpc546qjH6kei2VI9m45CTF+sQU7bcS7YeVt7ba0cnjueMH1AXGRu/driZUP9iYVSv7vg=="],
 
-    "es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
+    "enhanced-resolve": ["enhanced-resolve@5.26.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-9vhedylFonb2YGogzUKX6+Ja72gOJbN1QHAqdrvqLwhdl/QWbKopzoUC9EbQNVsAns/bx/4uyqalrQAoy1IByw=="],
 
-    "esbuild": ["esbuild@0.28.1", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.28.1", "@esbuild/android-arm": "0.28.1", "@esbuild/android-arm64": "0.28.1", "@esbuild/android-x64": "0.28.1", "@esbuild/darwin-arm64": "0.28.1", "@esbuild/darwin-x64": "0.28.1", "@esbuild/freebsd-arm64": "0.28.1", "@esbuild/freebsd-x64": "0.28.1", "@esbuild/linux-arm": "0.28.1", "@esbuild/linux-arm64": "0.28.1", "@esbuild/linux-ia32": "0.28.1", "@esbuild/linux-loong64": "0.28.1", "@esbuild/linux-mips64el": "0.28.1", "@esbuild/linux-ppc64": "0.28.1", "@esbuild/linux-riscv64": "0.28.1", "@esbuild/linux-s390x": "0.28.1", "@esbuild/linux-x64": "0.28.1", "@esbuild/netbsd-arm64": "0.28.1", "@esbuild/netbsd-x64": "0.28.1", "@esbuild/openbsd-arm64": "0.28.1", "@esbuild/openbsd-x64": "0.28.1", "@esbuild/openharmony-arm64": "0.28.1", "@esbuild/sunos-x64": "0.28.1", "@esbuild/win32-arm64": "0.28.1", "@esbuild/win32-ia32": "0.28.1", "@esbuild/win32-x64": "0.28.1" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw=="],
+    "entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
     "esm-env": ["esm-env@1.2.2", "", {}, "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="],
 
-    "esrap": ["esrap@2.2.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, "peerDependencies": { "@typescript-eslint/types": "^8.2.0" }, "optionalPeers": ["@typescript-eslint/types"] }, "sha512-m8jH5hZgJE2RRUK/jjkGPcJEDAV+dYnZYFkosQaPTcE+Yw4xynXHOo6FUdwaWBtdR3b1MMa7wEDTSHeR2VWsGA=="],
+    "esrap": ["esrap@2.4.0", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, "peerDependencies": { "@typescript-eslint/types": "^8.2.0" }, "optionalPeers": ["@typescript-eslint/types"] }, "sha512-CQPcneEHw/czj32uwQC52nYnax8H4SXt25FCM+LIwGZ49cMIxpOj3bP8wmzcI+Z0HIy5KkClaPhRLfCySzwHPA=="],
+
+    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
-    "estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
+    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
-    "expect-type": ["expect-type@1.4.0", "", {}, "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA=="],
+    "fast-uri": ["fast-uri@3.1.8", "", {}, "sha512-GZMtZUTNRpOVIECoXwLNZS5xUGE+mVNbTB8h/7Rwh2TFWcBQiPzTgyZi05BF9UMZKkLJv8XBRJTlU7zg8+ZfMg=="],
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
@@ -327,23 +647,61 @@
 
     "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
 
+    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
+
+    "host-react": ["host-react@workspace:apps/host-react"],
+
+    "host-solid": ["host-solid@workspace:apps/host-solid"],
+
+    "host-svelte": ["host-svelte@workspace:apps/host-svelte"],
+
+    "host-vue": ["host-vue@workspace:apps/host-vue"],
+
     "html-entities": ["html-entities@2.3.3", "", {}, "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA=="],
 
+    "html-validate": ["html-validate@11.16.2", "", { "dependencies": { "@html-validate/stylish": "^6.0.0", "@sidvind/better-ajv-errors": "7.0.0", "ajv": "^8.0.0", "kleur": "^4.1.0", "prompts": "^2.0.0", "semver": "^7.0.0" }, "peerDependencies": { "@jest/globals": "^29.0.3 || ^30.0.0", "@vitest/expect": "^3.2.0 || ^4.0.1 || ^5.0.0", "jest": "^29.0.3 || ^30.0.0", "jest-snapshot": "^29.0.3 || ^30.0.0", "vitest": "^3.2.0 || ^4.0.1 || ^5.0.0" }, "optionalPeers": ["@jest/globals", "@vitest/expect", "jest", "jest-snapshot", "vitest"], "bin": { "html-validate": "bin/html-validate.mjs" } }, "sha512-oci8F4t1AQdAwkOK895hOOrMTSY0zZ6fk4p2LCvGKQDjL/CYDTGyIoVTzZWII0DfwA7gpq7+qJxAKubUofgo1Q=="],
+
     "is-reference": ["is-reference@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],
 
     "is-what": ["is-what@4.1.16", "", {}, "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A=="],
 
+    "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
+
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
+    "json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
+
     "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
 
     "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
 
-    "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
+    "lightningcss": ["lightningcss@1.33.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.33.0", "lightningcss-darwin-arm64": "1.33.0", "lightningcss-darwin-x64": "1.33.0", "lightningcss-freebsd-x64": "1.33.0", "lightningcss-linux-arm-gnueabihf": "1.33.0", "lightningcss-linux-arm64-gnu": "1.33.0", "lightningcss-linux-arm64-musl": "1.33.0", "lightningcss-linux-x64-gnu": "1.33.0", "lightningcss-linux-x64-musl": "1.33.0", "lightningcss-win32-arm64-msvc": "1.33.0", "lightningcss-win32-x64-msvc": "1.33.0" } }, "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.33.0", "", { "os": "android", "cpu": "arm64" }, "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.33.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.33.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.33.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.33.0", "", { "os": "linux", "cpu": "arm" }, "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.33.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.33.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.33.0", "", { "os": "linux", "cpu": "x64" }, "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.33.0", "", { "os": "linux", "cpu": "x64" }, "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw=="],
 
-    "loupe": ["loupe@3.2.1", "", {}, "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ=="],
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.33.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.33.0", "", { "os": "win32", "cpu": "x64" }, "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA=="],
+
+    "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
@@ -351,102 +709,146 @@
 
     "merge-anything": ["merge-anything@5.1.7", "", { "dependencies": { "is-what": "^4.1.8" } }, "sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ=="],
 
+    "modern-screenshot": ["modern-screenshot@4.7.0", "", {}, "sha512-9YxN+ddPSMMlhylOv25VHzXrl9u67QRxoh7+SEewGtgUw7t6hHTrjptSDJUSne9oG4Xk/h2cwG15nIt4Hc9ujg=="],
+
+    "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
-    "nanoid": ["nanoid@3.3.15", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA=="],
+    "muggle-string": ["muggle-string@0.4.1", "", {}, "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ=="],
 
-    "node-releases": ["node-releases@2.0.51", "", {}, "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ=="],
+    "nanoid": ["nanoid@3.3.19", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug=="],
 
-    "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
+    "node-releases": ["node-releases@2.0.58", "", {}, "sha512-BdiKAgbfRlvfMq/XzO/AF9NPmaA8a+YpLAyAFTVFBj3gARrAIfWvNq7Q7NE4se3KgFu0KkrvQMxTS0XVnsGzHg=="],
 
-    "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
+    "obug": ["obug@2.2.1", "", {}, "sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q=="],
 
-    "pathval": ["pathval@2.0.1", "", {}, "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ=="],
+    "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
 
-    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+    "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
 
-    "picomatch": ["picomatch@4.0.5", "", {}, "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A=="],
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
-    "postcss": ["postcss@8.5.16", "", { "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg=="],
+    "picomatch": ["picomatch@4.0.7", "", {}, "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA=="],
 
-    "react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],
+    "playwright-core": ["playwright-core@1.63.0", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg=="],
 
-    "react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
+    "postcss": ["postcss@8.5.28", "", { "dependencies": { "nanoid": "^3.3.18", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A=="],
 
-    "rollup": ["rollup@4.62.2", "", { "dependencies": { "@types/estree": "1.0.9" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.62.2", "@rollup/rollup-android-arm64": "4.62.2", "@rollup/rollup-darwin-arm64": "4.62.2", "@rollup/rollup-darwin-x64": "4.62.2", "@rollup/rollup-freebsd-arm64": "4.62.2", "@rollup/rollup-freebsd-x64": "4.62.2", "@rollup/rollup-linux-arm-gnueabihf": "4.62.2", "@rollup/rollup-linux-arm-musleabihf": "4.62.2", "@rollup/rollup-linux-arm64-gnu": "4.62.2", "@rollup/rollup-linux-arm64-musl": "4.62.2", "@rollup/rollup-linux-loong64-gnu": "4.62.2", "@rollup/rollup-linux-loong64-musl": "4.62.2", "@rollup/rollup-linux-ppc64-gnu": "4.62.2", "@rollup/rollup-linux-ppc64-musl": "4.62.2", "@rollup/rollup-linux-riscv64-gnu": "4.62.2", "@rollup/rollup-linux-riscv64-musl": "4.62.2", "@rollup/rollup-linux-s390x-gnu": "4.62.2", "@rollup/rollup-linux-x64-gnu": "4.62.2", "@rollup/rollup-linux-x64-musl": "4.62.2", "@rollup/rollup-openbsd-x64": "4.62.2", "@rollup/rollup-openharmony-arm64": "4.62.2", "@rollup/rollup-win32-arm64-msvc": "4.62.2", "@rollup/rollup-win32-ia32-msvc": "4.62.2", "@rollup/rollup-win32-x64-gnu": "4.62.2", "@rollup/rollup-win32-x64-msvc": "4.62.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA=="],
+    "prompts": ["prompts@2.4.2", "", { "dependencies": { "kleur": "^3.0.3", "sisteransi": "^1.0.5" } }, "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q=="],
 
-    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+    "react": ["react@19.3.0", "", {}, "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog=="],
 
-    "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+    "react-dom": ["react-dom@19.3.0", "", { "dependencies": { "scheduler": "^0.28.0" }, "peerDependencies": { "react": "^19.3.0" } }, "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q=="],
 
-    "seroval": ["seroval@1.5.5", "", {}, "sha512-bSjOuPcwPKLSJNhr9+bZxA20nQxVle5J5MNsYRVE6cIg7KpRLXGupymePavu0jrxlPiPsr4xGZSB8yUY2sH2sw=="],
+    "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
 
-    "seroval-plugins": ["seroval-plugins@1.5.5", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-+BDhqYM6CEn3x09v44dpa9p6974FuUB2dxk+Ctn04k0cO1Zt6QODTXfmEZK0eBaTe/fJBvP4NMGuNJ+R8T+QMg=="],
+    "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],
 
-    "siginfo": ["siginfo@2.0.0", "", {}, "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g=="],
+    "rolldown": ["rolldown@1.2.12", "", { "dependencies": { "@oxc-project/types": "=0.152.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm-eabi": "1.2.12", "@rolldown/binding-android-arm64": "1.2.12", "@rolldown/binding-darwin-arm64": "1.2.12", "@rolldown/binding-darwin-x64": "1.2.12", "@rolldown/binding-freebsd-x64": "1.2.12", "@rolldown/binding-linux-arm-gnueabihf": "1.2.12", "@rolldown/binding-linux-arm64-gnu": "1.2.12", "@rolldown/binding-linux-arm64-musl": "1.2.12", "@rolldown/binding-linux-ppc64-gnu": "1.2.12", "@rolldown/binding-linux-s390x-gnu": "1.2.12", "@rolldown/binding-linux-x64-gnu": "1.2.12", "@rolldown/binding-linux-x64-musl": "1.2.12", "@rolldown/binding-openharmony-arm64": "1.2.12", "@rolldown/binding-win32-arm64-msvc": "1.2.12", "@rolldown/binding-win32-x64-msvc": "1.2.12" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-8wafseiaG80xmXSfqidUNqZcylTlhmPZZt+za2m+js2sFZ8dTNlhIOV2WcbIPx2hgwPBJpEUGFAMZ9bgBBLTSQ=="],
 
-    "solid-js": ["solid-js@1.9.14", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "~1.5.4", "seroval-plugins": "~1.5.4" } }, "sha512-sAEXC0Kk0S1EDg+8ysEWJDbYhA3RRoEjwuySUGlKIemeo0I5YZfOyumNjNs9Sv3y2nmhD+0rW66ag2HsMuQiGQ=="],
+    "sade": ["sade@1.8.1", "", { "dependencies": { "mri": "^1.1.0" } }, "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="],
 
-    "solid-refresh": ["solid-refresh@0.6.3", "", { "dependencies": { "@babel/generator": "^7.23.6", "@babel/helper-module-imports": "^7.22.15", "@babel/types": "^7.23.6" }, "peerDependencies": { "solid-js": "^1.3" } }, "sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA=="],
+    "scheduler": ["scheduler@0.28.0", "", {}, "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw=="],
 
-    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+    "semver": ["semver@7.8.5", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA=="],
 
-    "stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="],
+    "seroval": ["seroval@1.6.9", "", {}, "sha512-UeEzHwAK+yl0YLbsvROV1t5yMYEwZZ0CfKYxDvUgS2fO9Vxdf8djqVIB+OuVpuawRNPqw68LE1Du/GMsW2ZPqA=="],
 
-    "std-env": ["std-env@3.10.0", "", {}, "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg=="],
+    "seroval-plugins": ["seroval-plugins@1.6.9", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-kiDK/Tb8IWZ61WEU8pA2PDmAuw37gKph9Y77OZlD56mg0Y2g0Bg7gZ1HeHhs5d40w+nRoUq/wj08V26ilbez9g=="],
 
-    "strip-literal": ["strip-literal@3.1.0", "", { "dependencies": { "js-tokens": "^9.0.1" } }, "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg=="],
+    "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
 
-    "svelte": ["svelte@5.56.4", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.10", "@types/estree": "^1.0.5", "@types/trusted-types": "^2.0.7", "acorn": "^8.12.1", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.8.1", "esm-env": "^1.2.1", "esrap": "^2.2.12", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-/d0QHehmRuJW8gVz395MTkPcPozxzdjBMBE8oEYGz8O3b9KTMzzQ9ZHJQLuFKOHOPQbU6kx/X4iid/EBBzH7iw=="],
+    "solid-js": ["solid-js@1.9.17", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "~1.6.8", "seroval-plugins": "~1.6.8" } }, "sha512-4GAmLOWPfNV8H9Jfn2LSFTpNEG6jiOKPiwd5lnLGQtehHaX6l3TOLzJqQ7mqwB/3k1Yy3zyumFVopmc/tm34ow=="],
 
-    "tailwind-merge": ["tailwind-merge@2.6.1", "", {}, "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ=="],
+    "solid-refresh": ["solid-refresh@0.6.3", "", { "dependencies": { "@babel/generator": "^7.23.6", "@babel/helper-module-imports": "^7.22.15", "@babel/types": "^7.23.6" }, "peerDependencies": { "solid-js": "^1.3" } }, "sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA=="],
 
-    "tinybench": ["tinybench@2.9.0", "", {}, "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="],
+    "source-map-js": ["source-map-js@1.2.2", "", {}, "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw=="],
 
-    "tinyexec": ["tinyexec@0.3.2", "", {}, "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA=="],
+    "svelte": ["svelte@5.57.1", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@jridgewell/sourcemap-codec": "^1.6.0", "@sveltejs/acorn-typescript": "^1.0.13", "@types/estree": "^1.0.9", "acorn": "^8.18.0", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.9.2", "esm-env": "^1.2.1", "esrap": "^2.3.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-Uqj49lWKB+iSSnneuwiYYJ7MZgkB+eXr0LXBhv4uDuAkXqnWmq65Sxflfvp0Lc6MdKjMUxGaeOKWJqz5SNiVIA=="],
 
-    "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
+    "svelte-check": ["svelte-check@4.7.6", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "@sveltejs/load-config": "^0.2.3", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": "^5.0.0 || ^6.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-t2scM//ZuVbSY/T2w6FSBw1v9s2NEmh/g+sy1lqtosW5ylBV5AF4wFb1Ts9Kf3MbfPDUDJDZ9L436YT0SPTdvw=="],
 
-    "tinypool": ["tinypool@1.1.1", "", {}, "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg=="],
+    "tailwind-merge": ["tailwind-merge@3.7.0", "", {}, "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA=="],
 
-    "tinyrainbow": ["tinyrainbow@2.0.0", "", {}, "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw=="],
+    "tailwindcss": ["tailwindcss@4.3.3", "", {}, "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ=="],
 
-    "tinyspy": ["tinyspy@4.0.4", "", {}, "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q=="],
+    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
 
-    "tsx": ["tsx@4.23.0", "", { "dependencies": { "esbuild": "~0.28.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "bin": { "tsx": "dist/cli.mjs" } }, "sha512-eUdUIaCr963q2h5u3+QwvYp0+eqPvn+egeqZUm0hwERCqqx1E3kK5ehbGCvqSE5MQAULr67ww0cA3jKc3YkM1w=="],
+    "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
 
-    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+    "typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="],
 
-    "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+    "ui8px": ["ui8px@0.2.4", "", { "bin": { "ui8px": "dist/index.js" } }, "sha512-4Zfq7n1V8z3SRupbXYapbiUWn3Ikk5ziH5WLglZew2NSLWicjoqsvimKD1/LibjLWJ1wu0Q0+26zDpZ2yfYtEg=="],
 
-    "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
+    "undici-types": ["undici-types@8.9.0", "", {}, "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg=="],
 
-    "vite": ["vite@7.3.6", "", { "dependencies": { "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg=="],
+    "update-browserslist-db": ["update-browserslist-db@1.3.4", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-t8wonIOdQyOjtPd2VktlBu6QjTVTks6v8bSi7kd0r2Vll8TK1JYDZtRRdbmCHOAMphkZgrzK+L+vXK4pyZ8t4A=="],
 
-    "vite-node": ["vite-node@3.2.4", "", { "dependencies": { "cac": "^6.7.14", "debug": "^4.4.1", "es-module-lexer": "^1.7.0", "pathe": "^2.0.3", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0" }, "bin": { "vite-node": "vite-node.mjs" } }, "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg=="],
+    "vite": ["vite@8.3.2", "", { "dependencies": { "lightningcss": "^1.33.0", "picomatch": "^4.0.7", "postcss": "^8.5.28", "rolldown": "~1.2.11", "tinyglobby": "^0.2.17" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.7.1", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-SQr1x6W5vVSbROg7vsyXIaxK9b0G7zsT68acdWWRmnBUsgDieLCRG+Rep9WdZgcposvv/GSnr4GUUBqB3vXq6w=="],
 
-    "vite-plugin-solid": ["vite-plugin-solid@2.11.12", "", { "dependencies": { "@babel/core": "^7.23.3", "@types/babel__core": "^7.20.4", "babel-preset-solid": "^1.8.4", "merge-anything": "^5.1.7", "solid-refresh": "^0.6.3", "vitefu": "^1.0.4" }, "peerDependencies": { "@testing-library/jest-dom": "^5.16.6 || ^5.17.0 || ^6.*", "solid-js": "^1.7.2", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["@testing-library/jest-dom"] }, "sha512-FgjPcx2OwX9h6f28jli7A4bG7PP3te8uyakE5iqsmpq3Jqi1TWLgSroC9N6cMfGRU2zXsl4Q6ISvTr2VL0QHpA=="],
+    "vite-plugin-solid": ["vite-plugin-solid@2.11.14", "", { "dependencies": { "@babel/core": "^7.23.3", "@types/babel__core": "^7.20.4", "babel-preset-solid": "^1.8.4", "merge-anything": "^5.1.7", "solid-refresh": "^0.6.3", "vitefu": "^1.0.4" }, "peerDependencies": { "@testing-library/jest-dom": "^5.16.6 || ^5.17.0 || ^6.0.0 || ^7.0.0", "solid-js": "^1.7.2", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0" }, "optionalPeers": ["@testing-library/jest-dom"] }, "sha512-7ZVBt8rpoyqmlwin2kRIUveaHoF6/kulY7gsnD+qFh4nS29V4OPAnw+ojoAspXIjObiL9o1xh9a/nTuYHm02Rw=="],
 
     "vitefu": ["vitefu@1.1.3", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["vite"] }, "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg=="],
 
-    "vitest": ["vitest@3.2.7", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/expect": "3.2.7", "@vitest/mocker": "3.2.7", "@vitest/pretty-format": "^3.2.7", "@vitest/runner": "3.2.7", "@vitest/snapshot": "3.2.7", "@vitest/spy": "3.2.7", "@vitest/utils": "3.2.7", "chai": "^5.2.0", "debug": "^4.4.1", "expect-type": "^1.2.1", "magic-string": "^0.30.17", "pathe": "^2.0.3", "picomatch": "^4.0.2", "std-env": "^3.9.0", "tinybench": "^2.9.0", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.14", "tinypool": "^1.1.1", "tinyrainbow": "^2.0.0", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0", "vite-node": "3.2.4", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@types/debug": "^4.1.12", "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "@vitest/browser": "3.2.7", "@vitest/ui": "3.2.7", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@types/debug", "@types/node", "@vitest/browser", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "./vitest.mjs" } }, "sha512-KrxIJ62Fd89gfysR4WotlgZABiz2dqFPgqGzX7s+CwsqLFomRH7777ZcrOD6+WVAh7khPQP41A+BKbpcJFrdEg=="],
+    "vscode-uri": ["vscode-uri@3.2.0", "", {}, "sha512-m2gXo3bn0G1kT9InzMf07fTbqMbGtyckj3bH5ktLO+1Ssv+yiATZ4dhwaQv9UZWxJh6E9IFGnQyjgWVDWVBDrg=="],
 
-    "vue": ["vue@3.5.39", "", { "dependencies": { "@vue/compiler-dom": "3.5.39", "@vue/compiler-sfc": "3.5.39", "@vue/runtime-dom": "3.5.39", "@vue/server-renderer": "3.5.39", "@vue/shared": "3.5.39" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-xmZCYabFGcirU8r0fTuvl/LICc1OU620rnqepaJDL/a141ZigkG7AyaxQLdqJ02ZRYzWe6YPaDHeQx7MfknQfA=="],
+    "vue": ["vue@3.5.43", "", { "dependencies": { "@vue/compiler-dom": "3.5.43", "@vue/compiler-sfc": "3.5.43", "@vue/runtime-dom": "3.5.43", "@vue/server-renderer": "3.5.43", "@vue/shared": "3.5.43" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-o5qZoksdnjIKvW1srZ3ab7pcDNYAerBjRe54D0LBLfRdCYFrSgBHVXokMas35czQc0//lmx4/tuY4ZNQ+Rf2Ng=="],
 
-    "why-is-node-running": ["why-is-node-running@2.3.0", "", { "dependencies": { "siginfo": "^2.0.0", "stackback": "0.0.2" }, "bin": { "why-is-node-running": "cli.js" } }, "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w=="],
+    "vue-tsc": ["vue-tsc@3.3.12", "", { "dependencies": { "@volar/typescript": "2.4.28", "@vue/language-core": "3.3.12" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "bin/vue-tsc.js" } }, "sha512-kbpaz18O9jPVkXVHD1BEjpUXM6WhXSu+62L1sGGr6Wbzd8GbvkBQWjoj3KZ/C0aq2MZllce7UdtWzwCIYsBMGA=="],
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
-    "zimmerframe": ["zimmerframe@1.1.4", "", {}, "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="],
+    "zimmerframe": ["zimmerframe@1.1.5", "", {}, "sha512-msJxIvYDYcoNL+PJsu+7qmpDWsYmAxTY+2TNYXXF0hzBzBk0BMecOqDOG/EckUoKCuKwObfbugIl8QpqHDXeFA=="],
 
-    "@vue/compiler-core/entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
+    "@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "@babel/helper-compilation-targets/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "@babel/helper-create-class-features-plugin/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "@sveltejs/vite-plugin-svelte/magic-string": ["magic-string@1.4.2", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.6.0" } }, "sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g=="],
+
+    "@tailwindcss/node/lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
 
-    "@vue/compiler-core/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.3", "tslib": "^2.4.0" }, "bundled": true }, "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg=="],
 
-    "@vue/compiler-sfc/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.2.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^1.7.1 || ^2.0.0-alpha.4", "@emnapi/runtime": "^1.7.1 || ^2.0.0-alpha.4" }, "bundled": true }, "sha512-AJxoUD2/15ESHbvpcyjU274nsAPLuOtPHCk0vKJM5pj//Fg/B1FXNWjPnXTT9PymCYYiHo4zPj0ZomXBKhoy7g=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.4", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "@vue/compiler-core/entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
 
     "babel-plugin-jsx-dom-expressions/@babel/helper-module-imports": ["@babel/helper-module-imports@7.18.6", "", { "dependencies": { "@babel/types": "^7.18.6" } }, "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA=="],
 
-    "strip-literal/js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="],
+    "prompts/kleur": ["kleur@3.0.3", "", {}, "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
   }
 }
diff --git a/bunfig.toml b/bunfig.toml
index 935f206..57f75ba 100644
--- a/bunfig.toml
+++ b/bunfig.toml
@@ -1,2 +1,2 @@
-[test]
-preload = ["./tests/preload-bun.ts"]
+[install]
+linker = "hoisted"
diff --git a/docs/README.md b/docs/README.md
index 4ea874c..fb9099c 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,35 +1,14 @@
-# UI8Kit Codegen — Documentation
-
-Spec-driven codegen engine for UI8Kit `ui/` primitives. One typed render contract per brick, seven generated runtimes (plus a static HTML export), and DOM parity verified by tests.
-
-## Contents
-
-| Document | Description |
-|----------|-------------|
-| [Overview](./overview.md) | Goals, runtimes, scope, repository layout |
-| [Getting started](./getting-started.md) | Install, generate, verify, consume outputs |
-| [Architecture](./architecture.md) | Domain model, expression IR, render tree, emitters, pipeline |
-| [Brick definitions](./bricks.md) | Authoring bricks, DSL, fixtures, validation, adding a brick |
-| [Runtimes](./runtimes.md) | Go Templ, React, Svelte, Vue, Latte, Twig, static HTML |
-| [Cross-runtime contract](./contract.md) | Prop naming, variants, classes, attrs, children, tags |
-| [CLI and scripts](./cli-and-scripts.md) | `ui8kit-codegen` CLI, npm/bun scripts, example tooling |
-| [Testing and CI](./testing-and-ci.md) | Test suites, parity harnesses, toolchains, GitHub Actions |
-| [Examples](./examples.md) | Seven welcome previews, static export, local dev servers |
-| [PHP complex parts](./php-complex-parts.md) | The three structurally complex parts skipped by Latte/Twig |
-| [Latte theme bundle](./latte-bundle.md) | Emit Latte-only package for wp-fasty / theme consumers |
-| [Near-term plans](../.project/README.md) | Roadmap / Jinja2 runtime plan |
-
-## Quick reference
-
-```bash
-bun install
-bun run check                 # validate all brick definitions
-bun run generate              # emit all runtimes into generated/
-bun run generate:latte-bundle # Latte-only package (no Twig / parity harness)
-bun test                      # domain + parity (Go/PHP optional)
-bun run verify                # check + typecheck + tests (CI command)
-```
-
-**Inventory:** 33 bricks · 63 exported parts · 60 PHP template parts · 6 codegen runtimes
-
-For the high-level project README, see [../README.md](../README.md).
+# Documentation
+
+| Guide | What |
+|---|---|
+| [specs-guide.md](specs-guide.md) | Authoring specs end to end: bricks, parts, patterns, organisms, blocks, screens, fixtures, content, the gates |
+| [architecture.md](architecture.md) | The xgen packages, the build flow, the generated targets and the checks |
+| [runtimes.md](runtimes.md) | The eight targets (Svelte, React, Vue, Solid, templ, Twig, Latte, Jinja2) and how to consume each |
+| [cli.md](cli.md) | `xgen` commands and the root scripts |
+| [contract.md](contract.md) | Codex v0.4 fixtures, `@ui8kit/contract`, the manifest and the block data (`blocks.json`) |
+| [registry.md](registry.md) | The public registry (ui.buildy.tw, `npx ui8kit add`) and how it is built from this repository |
+| [../MIGRATION.md](../MIGRATION.md) | Upgrading from `@ui8kit/codegen` 0.1 |
+
+Working notes kept from the development of xgen (some mention surfaces of the codegen-x monorepo that are not part of this
+repository: the magazine app and the taste screens): `xgen/docs/*.md`.
diff --git a/docs/architecture.md b/docs/architecture.md
index 841f20e..676f1e2 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -1,156 +1,60 @@
 # Architecture
 
-## Dependency direction
-
-Clean architecture with the dependency arrow pointing inward:
+## Flow
 
 ```
-bricks/          definitions (data)
-    ↓
-src/domain/      pure model, zero I/O — expr, model, render, validate
-    ↓
-src/emitters/    runtime printers (templ, react, svelte, vue, latte, twig)
-    ↓
-src/application/ generate pipeline (validate → emit → write)
-    ↓
-src/infrastructure/ CLI
+xgen/specs/ui/*.json (+ *.variants.json) ─┐
+xgen/specs/_nonportable.json              │  @ui8kit/xgen-spec     (load, validate, normalize bricks; canonical renderer)
+xgen/screens/src/authoring/*.ts ──────────┼─ @ui8kit/xgen-screens  (view IR builder -> specs/{parts,patterns,organisms,blocks,presets,screens})
+xgen/fixtures/*.json (Codex v0.4) ────────┤  @ui8kit/xgen-schema   (JSON Schemas, Codex manifest, @ui8kit/contract validation)
+xgen/content/ui/en.json ──────────────────┤
+apps/host-*/xgen.app.json ────────────────┘
+                 │
+                 ▼
+       @ui8kit/xgen-generator  ── runtimes/{svelte,react,vue,solid,templ,twig,jinja2,latte} (+ runtimes/core)
+                 │
+                 ├─► packages/{svelte,react,vue,solid}/ui      TypeScript UI packages (source only)
+                 ├─► packages/{templ,twig,jinja2,latte}/ui     server templates + Go / PHP / Python helpers
+                 ├─► packages/shared/app                       dictionary, data, menus, URL/runtime core, skins (emitted once)
+                 └─► apps/host-{svelte,react,vue,solid}        one host per TS runtime; every screen is a lazy chunk at /<screen>/
 ```
 
-`runtime/` is copied verbatim into `generated/utils` (Go/TS) or `generated/php/UI8Kit` (PHP) during generation.
-
-## Domain model (`src/domain/`)
-
-| Module | Role |
-|--------|------|
-| `model.ts` | `PropDef`, `PartDef`, `BrickDef`, render-tree nodes (`element`, `text`, `slot`, `when`, `forEach`) |
-| `expr.ts` | Expression IR: `lit`, `prop`, `cond`, `mapOr`, `isSet`, `and`/`or`/`not`, `eq`, … |
-| `recipe.ts` | `VariantRecipe` validation and class composition |
-| `tags.ts` | `TagGroup` allow-lists for dynamic root tags |
-| `naming.ts` | Per-runtime prop naming (Go PascalCase, React camelCase, HTML-native for Svelte/Vue/PHP) |
-| `render.ts` | **Canonical renderer** — executes definitions, produces reference HTML |
-| `validate.ts` | Definition invariants (recipe integrity, prop references, passthrough rules) |
-| `php-support.ts` | Mechanical predicate for Latte/Twig template eligibility |
-
-## Expression IR
-
-Deliberately tiny and non-Turing-complete:
-
-- **No** user-defined functions, loops-with-state, or embedded templating language.
-- **Thirteen** expression kinds cover all 33 bricks.
-- Every emitter implements exhaustive `switch` over the discriminated union.
-
-Expressions drive: attribute values, class fragments, derived values, conditional tests, and dynamic tags.
-
-## Render tree nodes
-
-| Node | Purpose |
-|------|---------|
-| `element` | HTML element with attrs and children |
-| `text` | Text content from an expression |
-| `slot` | Children insertion point |
-| `when` | Conditional branches (`then` / optional `else`) |
-| `forEach` | Loop over typed `items` props |
-
-## Emitters (`src/emitters/`)
-
-Each runtime implements the `Emitter` interface from `common.ts`:
-
-```ts
-interface Emitter {
-  readonly runtime: RuntimeName;
-  emit(brick: BrickDef): GeneratedFile[];
-}
-```
-
-| Emitter | Key files |
-|---------|-----------|
-| Templ | `templ.ts`, `go-expr.ts`, `go-harness.ts` |
-| React | `react.ts`, `ts-expr.ts`, `ts-common.ts` |
-| Svelte | `svelte.ts` |
-| Vue | `vue.ts` |
-| Latte | `latte.ts`, `php-expr.ts`, `php-common.ts` |
-| Twig | `twig.ts`, `twig-expr.ts` |
-| PHP classes | `php-classes.ts` — `Classes.php` for all parts |
-| PHP harness | `php-harness.ts` — `composer.json`, parity scripts |
-
-Shared analysis lives in `ts-common.ts` (TS runtimes) and `php-common.ts` (PHP runtimes).
-
-## Generation pipeline (`src/application/generate.ts`)
-
-```
-validateRegistry(bricks)
-    → for each brick:
-        copy recipe JSON files
-        emit <brick>.shared.ts (if TS runtimes requested)
-        run each selected Emitter
-    → copy runtime support files
-    → emit barrels (index.ts, index.svelte.ts, index.vue.ts, shared.ts)
-    → emit Go mod + parity harness (if templ)
-    → emit composer.json + Classes.php + PHP parity harnesses (if latte/twig)
-    → assert no duplicate output paths
-    → writeFiles
-```
-
-### Generated tree (typical)
-
-```
-generated/
-  go.mod
-  composer.json
-  cmd/
-    parity/main.go           # Go Templ parity harness
-    parity-latte/main.php
-    parity-twig/main.php
-  php/UI8Kit/
-    Rt.php                   # expression + tag helpers
-    Classes.php              # generated class helpers + embedded recipes
-    TwigExtension.php
-  utils/                     # Go + TS runtime (cn, expr, tags, variants, …)
-  ui/
-    index.ts                 # React barrel
-    index.svelte.ts
-    index.vue.ts
-    shared.ts
-    slot/slot.tsx            # React-only
-    <brick>/
-      <brick>.variants.json
-      <brick>.shared.ts
-      <brick>.templ + <brick>_gen.go
-      <brick>.tsx
-      <Part>.svelte / <Part>.vue
-      <Part>.latte / <Part>.html.twig
-```
-
-## Runtime support layer (`runtime/`)
-
-| Path | Consumed by |
-|------|-------------|
-| `runtime/go/*.go` | Generated Templ output (`utils/`) |
-| `runtime/ts/*.ts` | Generated React/Svelte/Vue (`utils/`) |
-| `runtime/react/slot.tsx` | React `asChild` composition |
-| `runtime/php/Rt.php` | Latte/Twig templates |
-| `runtime/php/TwigExtension.php` | Twig attribute merging, tag resolution |
-
-PHP `Rt.php` mirrors `utils/expr.go` and `utils/expr.ts` so all runtimes resolve defaults identically.
-
-## Canonical renderer as executable spec
-
-`renderPart(brick, partName, props, options)` in `src/domain/render.ts` is the ground truth for DOM parity tests. It:
-
-- Resolves variants through shared recipes
-- Applies class merge order
-- Omits empty attributes
-- Distinguishes boolean attrs from ARIA state attrs
-- Resolves dynamic tags against `TagGroup` allow-lists
-
-Every parity test compares normalized output from a generated runtime against this function.
-
-## Adding a new runtime
-
-1. Implement `Emitter` in `src/emitters/<runtime>.ts`.
-2. Add expression printer if not reusing an existing one.
-3. Register in `ALL_RUNTIMES` and `generateFiles()` in `src/application/generate.ts`.
-4. Add parity test suite under `tests/`.
-5. Extend `emitters.test.ts` with structural convention checks.
-
-The domain model and IR should not need changes if the new runtime can express the same vocabulary.
+`xgen build` writes every target with a `.xgen-manifest.json` (sha-256 of every file). `xgen check` plans the same build in
+memory and compares it with the disk (`drift`).
+
+## Tiers
+
+- **Bricks** (`xgen/specs/ui`): the only place that names HTML tags. Props, recipes (CVA-style variant tables with
+  compound variants), slots, events, ARIA, `data-*` hooks, tokens, examples, portability.
+- **Parts and patterns** (`specs/parts`, `specs/patterns`): components composed from bricks (`src/components`).
+- **Organisms** (`specs/organisms`): page sections (`src/blocks`), typed props, render-prop slots, events.
+- **Blocks** (`specs/blocks`): an organism plus its axes and named variants, the unit of the gallery and the registry.
+- **Screens** (`specs/screens`): routes, URL state, menus, the blocks of a page; served by the host apps.
+
+Organisms, blocks, presets and screens are written with the TypeScript builder (`xgen/screens/src/authoring`) and stored
+as JSON; the `authored` group fails when the JSON differs from the builder.
+
+## Packages
+
+| package | folder | job |
+|---|---|---|
+| `@ui8kit/xgen-schema` | `xgen/schema` | JSON Schemas (spec, variants, organism, block, screen, app, collection, dictionary, preset), Codex manifest and block data |
+| `@ui8kit/xgen-spec` | `xgen/spec` | brick loader, typed render model, recipes, canonical renderer; `tools/import-codegen.ts` imports 0.1 bricks |
+| `@ui8kit/xgen-screens` | `xgen/screens` | view IR (`use`, `text`, `when`, `each`, `slot`, `organism`, `outlet`), builder, validation, loaders, route/URL planning |
+| `@ui8kit/xgen-runtime-core` | `xgen/runtimes/core` | shared emitter helpers and the runtime assets (utils, styles, skins, app runtime) |
+| `@ui8kit/xgen-runtime-*` | `xgen/runtimes/<rt>` | one emitter per runtime; Twig is the dialect base of Jinja2 and Latte |
+| `@ui8kit/xgen-generator` | `xgen/generator` | the build plan of every target, writer, drift |
+| `@ui8kit/xgen-check` | `xgen/check` | the check groups, parity gates, e2e, screenshots, visual gate |
+| `@ui8kit/xgen` | `xgen/cli` | the `xgen` command |
+| `@ui8kit/xgen-tooling` | `packages/tooling` | rules, zones, ui8px gate and pre-push audit as bins |
+
+The xgen packages depend only on each other (never on `packages/` or `apps/`); the folder can be synced with the
+codegen-x/ui8kit monorepo, where the same layer also feeds hand-written apps.
+
+## Checks (`bun run check`)
+
+`schema`, `props`, `a11y`, `authored`, `coverage`, `recipes`, `nonportable`, `text`, `dictionary`, `blocks`, `registry`,
+`themes`, `routes`, `structure`, `hardcode`, `corners`, `shadows`, `spacing` (8 + 4 grid, no half steps), `readability`,
+`dead`, `duplicates`, `versions`, `tests`, `rules` (composition rules 01/02/03/06 on every runtime), `codex`, `drift`, and
+the real-engine parity groups `templ`, `solid`, `twig`, `jinja2`, `latte` (every brick case and every block case renders
+the same normalized DOM as React; every block document passes html-validate).
diff --git a/docs/bricks.md b/docs/bricks.md
deleted file mode 100644
index 3c4347f..0000000
--- a/docs/bricks.md
+++ /dev/null
@@ -1,205 +0,0 @@
-# Brick definitions
-
-Brick definitions are the single source of truth for every runtime. They live in `bricks/<name>/` and are registered in `bricks/index.ts`.
-
-## Inventory
-
-**33 bricks · 63 parts**
-
-| Brick | Parts |
-|-------|-------|
-| `alert` | Alert |
-| `badge` | Badge |
-| `block` | Block |
-| `box` | Box |
-| `breadcrumb` | Breadcrumb |
-| `button` | Button |
-| `card` | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
-| `checkbox` | Checkbox |
-| `container` | Container |
-| `dialog` | Dialog |
-| `disclosure` | Disclosure, Summary |
-| `form` | Form, FormItem, FormDescription, FormMessage |
-| `form/controls` | Fieldset, Legend, DataList, DataOption, Output, Meter, Progress |
-| `grid` | Grid, GridCol |
-| `group` | Group |
-| `icon` | Icon |
-| `iconbadge` | IconBadge |
-| `image` | Image, Picture, Source |
-| `inline` | Inline |
-| `input` | Input |
-| `label` | Label |
-| `linebreak` | Break |
-| `link` | Link |
-| `list` | List, ListItem |
-| `radio` | Radio |
-| `select` | Select, SelectOption, OptGroup |
-| `separator` | Separator |
-| `stack` | Stack |
-| `switch` | Switch |
-| `table` | Table, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeadCell, TableCell, TableColGroup, TableCol |
-| `text` | Text |
-| `textarea` | Textarea |
-| `title` | Title |
-
-List at any time:
-
-```bash
-bun src/infrastructure/cli.ts list
-```
-
-## File layout per brick
-
-```
-bricks/button/
-  button.def.ts           # definition (required)
-  button.variants.json    # CVA-style class recipe (if brick uses variants)
-  button.data.json        # showcase fixtures for parity tests (optional)
-```
-
-## Authoring DSL (`bricks/_dsl.ts`)
-
-Definitions import from `../_dsl`, which re-exports IR constructors and prop factories:
-
-| Factory | Prop |
-|---------|------|
-| `pVariant()`, `pSize()` | CVA-bound string props |
-| `pClass()` | Caller Tailwind utilities |
-| `pStr(name)`, `pBool(name)`, `pInt(name)` | Scalar props |
-| `pAttrs()` | Rest/attrs escape hatch |
-| `pChildren()` | Children slot |
-| `pPass(name)` | Passthrough attribute forward |
-| `controlPassthroughProps()` | Common form control forwards |
-
-Render tree builders: `el`, `text`, `slot`, `when`, `forEach`, `fwd`, `attrClass`, `attrExpr`, `attrBool`, `attrStatic`, `attrRest`.
-
-## Example (abridged)
-
-```ts
-// bricks/button/button.def.ts
-export default brick({
-  id: "ui.button",
-  dir: "button",
-  recipes: { button: { file: "button.variants.json", recipe: buttonVariants } },
-  parts: [{
-    name: "Button",
-    recipeId: "button",
-    asChild: true,  // React-only; other runtimes use ButtonClasses()
-    classes: {
-      recipe: { variant: "Variant", size: "Size" },
-      state: [{ test: prop("Disabled"), classes: "pointer-events-none opacity-50" }],
-    },
-    props: [
-      pVariant(), pSize(), pClass(), pStr("Type"), pStr("Href"),
-      pBool("Disabled"), ...controlPassthroughProps(), pAttrs(), pChildren(),
-    ],
-    // Optional Href → <a> with button classes; else <button>.
-    render: when(isSet(prop("Href")), [el("a", …)], [el("button", …)]),
-  }],
-});
-```
-
-## Variant recipes (`*.variants.json`)
-
-CVA-style JSON consumed by all runtimes:
-
-```json
-{
-  "id": "ui.button",
-  "base": "inline-flex …",
-  "keys": ["variant", "size"],
-  "defaults": { "variant": "default", "size": "default" },
-  "byKey": {
-    "variant": { "default": "…", "ghost": "…" },
-    "size": { "default": "…", "sm": "…" }
-  }
-}
-```
-
-- Go embeds via `//go:embed` in `<brick>_gen.go`.
-- TS runtimes import JSON and derive literal-union types in `<brick>.shared.ts`.
-- PHP compiles recipes into constants in `Classes.php`.
-
-## Showcase fixtures (`*.data.json`)
-
-Optional colocated fixtures become parity test cases automatically:
-
-```json
-{
-  "id": "ui.button",
-  "showcase": {
-    "variant.ghost": {
-      "props": { "Variant": "ghost", "Size": "sm" }
-    }
-  }
-}
-```
-
-`tests/support/fixtures.ts` loads `bricks/<dir>/<stem>.data.json` and expands each showcase entry into a test case (defaults + each fixture).
-
-## Validation (`bun run check`)
-
-`validateRegistry` enforces before emission:
-
-- Recipe integrity and key alignment
-- All expression `prop()` references exist on the part
-- Passthrough props are not used in logic (only forwarded)
-- Slot/children symmetry
-- Tag group membership for dynamic tags
-- No duplicate brick IDs or part names
-
-Failures throw `DefinitionError` with a descriptive message.
-
-## Adding a brick
-
-1. Create `bricks/<name>/<name>.def.ts` and colocate `<name>.variants.json` (and optional `<name>.data.json`).
-2. Register the import in `bricks/index.ts`.
-3. Run `bun run check`.
-4. Run `bun test` — parity across all runtimes is asserted automatically; no per-runtime test authoring needed.
-
-## Multi-part bricks
-
-Svelte and Vue require one file per part (SFC constraint):
-
-- `Card.svelte`, `CardHeader.svelte`, …
-
-Go Templ and React colocate all parts in one file per brick:
-
-- `card.templ`, `card.tsx`
-
-Latte and Twig always emit one template per part:
-
-- `Card.latte`, `CardHeader.latte`, …
-
-## Record types and `items` props
-
-Some bricks declare typed records for list-driven rendering:
-
-```ts
-recordTypes: [{
-  name: "SelectOptionItem",
-  fields: [
-    { name: "Value", type: "string" },
-    { name: "Label", type: "string" },
-  ],
-}],
-props: [
-  { name: "Options", type: "items", cva: false, itemsOf: "SelectOptionItem" },
-],
-render: el("select", [...], [
-  forEach("Options", [ el("option", [...], [text(item("Label"))]) ]),
-  slot(),
-]),
-```
-
-`forEach` and branched roots affect PHP template eligibility — see [PHP complex parts](./php-complex-parts.md).
-
-## Deliberate deviations from upstream
-
-Uniform contract improvements verified across all runtimes:
-
-- Empty string attributes are omitted (`name=""`, `class=""` never emitted).
-- `IconBadge` deprecated legacy props dropped from generated API.
-- React `<textarea>` maps content to `defaultValue` (SSR output identical).
-- Rest/`Attrs` spread is always last — caller wins deterministically.
-- `Title`/`CardTitle` React-only `H1`–`H6` wrappers not generated; use `as={1..6}`.
diff --git a/docs/cli-and-scripts.md b/docs/cli-and-scripts.md
deleted file mode 100644
index bd649f6..0000000
--- a/docs/cli-and-scripts.md
+++ /dev/null
@@ -1,158 +0,0 @@
-# CLI and scripts
-
-## `ui8kit-codegen` CLI
-
-Entry: `src/infrastructure/cli.ts` (also exposed as `ui8kit-codegen` bin when published).
-
-### Commands
-
-| Command | Description |
-|---------|-------------|
-| `check` | Validate all brick definitions; no file output |
-| `list` | Print every brick ID and part name |
-| `generate` | Emit runtime files into output directory |
-
-### `generate` flags
-
-| Flag | Default | Description |
-|------|---------|-------------|
-| `--out <dir>` | `generated` | Output directory |
-| `--go-module <module>` | `github.com/ui8kit/ui` | Go module path in `go.mod` |
-| `--runtimes <list>` | all seven | Comma-separated: `templ,react,svelte,vue,solid,latte,twig` |
-
-### Examples
-
-```bash
-# Validate only
-bun src/infrastructure/cli.ts check
-
-# List inventory
-bun src/infrastructure/cli.ts list
-
-# Generate everything
-bun src/infrastructure/cli.ts generate --out generated
-
-# React + Vue only
-bun src/infrastructure/cli.ts generate --runtimes react,vue
-
-# Custom Go module
-bun src/infrastructure/cli.ts generate --go-module example.com/myui
-```
-
-On generate with `latte` or `twig`, the CLI prints PHP part coverage and skip reasons.
-
----
-
-## Root package scripts (`package.json`)
-
-| Script | Command | Purpose |
-|--------|---------|---------|
-| `generate` | `bun src/infrastructure/cli.ts generate --out generated` | Emit all runtimes |
-| `check` | `bun src/infrastructure/cli.ts check` | Validate definitions |
-| `test` | `bun test` | Run all test suites |
-| `test:watch` | `bun test --watch` | Watch mode |
-| `typecheck` | `tsc --noEmit` | Typecheck engine (`src/`, `bricks/`, `tests/`) |
-| `typecheck:generated` | `bun run generate && bun x tsc -p tsconfig.generated.json` | Typecheck generated React/TS |
-| `verify` | `check` + `typecheck` + `typecheck:generated` + `test` | Full CI gate |
-| `dev:templ` | `cd examples && bun run dev:templ` | Go Templ preview :8080 |
-| `dev:react` | `cd examples && bun run dev:react` | React preview :5173 |
-| `dev:svelte` | `cd examples && bun run dev:svelte` | Svelte preview :5174 |
-| `dev:vue` | `cd examples && bun run dev:vue` | Vue preview :5175 |
-| `dev:latte` | `cd examples && bun run dev:latte` | Latte preview :5176 |
-| `dev:twig` | `cd examples && bun run dev:twig` | Twig preview :5177 |
-| `build:html` | `cd examples && bun run build:html` | Static HTML export |
-| `build:css` | `cd examples && bun run build:css` | Tailwind CSS for examples |
-
----
-
-## Examples package scripts (`examples/package.json`)
-
-| Script | Purpose |
-|--------|---------|
-| `build:css` | `tailwindcss` compile `web/static/css/input.css` → `app.css` |
-| `gen:templ` | Run `templ generate` on `generated/` and `examples/templ/` |
-| `composer:install` | `composer install` in `generated/` (with phar fallback) |
-| `dev:templ` | `gen:templ` + `build:css` + Go HTTP server on :8080 |
-| `dev:react` | `build:css` + Vite (React) on :5173 |
-| `dev:svelte` | `build:css` + Vite (Svelte) on :5174 |
-| `dev:vue` | `build:css` + Vite (Vue) on :5175 |
-| `dev:latte` | `composer:install` + `build:css` + PHP server on :5176 |
-| `dev:twig` | `composer:install` + `build:css` + PHP server on :5177 |
-| `build:html` | `build:css` + `react/script/generate-static.tsx` |
-
----
-
-## Example helper scripts (`examples/scripts/`)
-
-### `composer-install.mjs`
-
-Installs PHP dependencies into `generated/`:
-
-1. Tries `composer install` in `generated/`.
-2. Falls back to downloading `composer.phar` if global Composer is unavailable.
-3. Requires PHP 8.1+ (`resolve-php.mjs`).
-
-### `resolve-php.mjs`
-
-Resolves PHP binary:
-
-- Honors `PHP` environment variable.
-- Searches common install paths on Windows/macOS/Linux.
-
-### `php-server.mjs`
-
-Starts PHP built-in server for Latte or Twig previews:
-
-```bash
-bun scripts/php-server.mjs latte [port]   # default 5176
-bun scripts/php-server.mjs twig [port]    # default 5177
-```
-
-Document root: `examples/latte/` or `examples/twig/` (each has `server.php`).
-
-### `generate-static.tsx` (`examples/react/script/`)
-
-Renders React welcome view with `renderToStaticMarkup`, wraps in HTML shell, writes multi-route static export to `examples/html/`.
-
----
-
-## TypeScript configs
-
-| File | Scope |
-|------|-------|
-| `tsconfig.json` | Engine: `src/`, `bricks/`, `tests/` |
-| `tsconfig.generated.json` | Generated: `generated/ui/**/*.ts(x)`, `generated/utils/` |
-
----
-
-## Bun configuration (`bunfig.toml`)
-
-```toml
-[test]
-preload = ["./tests/preload-bun.ts"]
-```
-
-Preload registers Bun plugins to compile Svelte SSR and Vue SFCs before parity tests import them.
-
----
-
-## Vitest configuration (`vitest.config.ts`)
-
-Used when running tests via Vitest directly (project primarily uses `bun test`):
-
-- `globalSetup`: `tests/global-setup.ts` — regenerates `generated/` before run
-- `include`: `tests/**/*.test.ts(x)`
-- Plugins: Svelte (runes), Vue
-- `resolve.conditions`: `["node"]` for SSR builds
-
----
-
-## Generated artifacts (not in git)
-
-`generated/` is gitignored. Created by:
-
-- `bun run generate`
-- Test global setup / `ensureGenerated()`
-- `bun run typecheck:generated`
-
-Never commit `generated/` — CI and tests regenerate it on every run.
diff --git a/docs/cli.md b/docs/cli.md
new file mode 100644
index 0000000..1d7043d
--- /dev/null
+++ b/docs/cli.md
@@ -0,0 +1,25 @@
+# CLI and scripts
+
+The `xgen` command (`xgen/cli/src/cli.ts`, bin of `@ui8kit/xgen`); run it through the root scripts:
+
+| Script | Command | What |
+|---|---|---|
+| `bun run build` | `xgen build` | write every generated target from specs, fixtures and content (and the builder JSON) |
+| `bun run check` | `xgen check` | every gate (see [architecture.md](architecture.md)); exit 1 on any problem |
+| `bun xgen/cli/src/cli.ts list` | `xgen list` | counts, targets, hand-written files per app |
+| `bun run e2e` | `xgen e2e` | every screen in every host: scenario, light/dark screenshots, DOM pair test, html-validate (run `bun run build:hosts` first) |
+| `bun run shot <screen>` | `xgen shot` | one full-page screenshot |
+| `bun run visual` | `xgen visual` | pixel gate over every state of every host |
+| `bun run verify` | | `check` + `codex:validate` + `typecheck` + `test` (CI) |
+| `bun run typecheck` | | `tsc` on xgen and svelte-check / tsc / vue-tsc on the TS packages and hosts |
+| `bun run test` | | `bun test xgen` |
+| `bun run codex:manifest` / `codex:validate` / `codex:blocks` | | write the Codex manifest, validate every fixture with `@ui8kit/contract`, write `blocks.json` |
+| `bun run rules` / `rules:baseline` | | composition rules 01/02/03/06; rewrite `rules/zones.json` and baselines after an accepted change |
+| `bun run lint:px` | | ui8px gate over the class sets (8 px grid) |
+| `bun run audit:push` | | nothing private, no binaries or secrets in the commits of the branch |
+| `bun run hooks:install` | | pre-push hook: check + audit |
+
+Flags: `--root <workspace>` on every `xgen` command; `UI8KIT_REQUIRE_ALL_RUNTIMES=1` fails a skipped template runtime.
+
+The end-user CLI that installs items into an app is a different tool: [`ui8kit`](https://github.com/ui8kit/cli) on npm
+(`npx ui8kit init`, `npx ui8kit add <name>`), reading the registry described in [registry.md](registry.md).
diff --git a/docs/contract.md b/docs/contract.md
index 269cae3..7a64567 100644
--- a/docs/contract.md
+++ b/docs/contract.md
@@ -1,125 +1,17 @@
-# Cross-runtime contract
+# Data contract: Codex v0.4 and `@ui8kit/contract`
 
-Decisions made once in the domain layer and applied uniformly across every brick and runtime. See `src/domain/naming.ts` and the emitters for implementation.
+xgen never hard-codes sample data in a view. Blocks and screens read **Codex v0.4 collections**, the content contract of
+[`@ui8kit/contract`](https://github.com/ui8kit/contract) (types, JSON Schemas and a strict validator).
 
-## 1. Prop naming
+| File | What | Gate |
+|---|---|---|
+| `xgen/fixtures/<collection>.json` | Codex entries (77 collections, 733 entries, 62 kinds) | `bun run codex:validate` (`validateCollectionV04`), schema group |
+| `xgen/fixtures/taxonomies/*.json` | taxonomy bundles (definition + terms) | same |
+| `xgen/schema/codex/manifest.json` | every kind, its record type and fields, menus, taxonomies | written by `codex:manifest`, validated against `@ui8kit/contract/schemas/manifest.schema.json` |
+| `xgen/schema/codex/blocks.json` | for every kit block and screen: the collections, kinds, record types and required / optional fields it reads, labels, settings, empty state | written by `codex:blocks`; `codex` group fails on drift; `xgen/schema/test/blocks.test.ts` checks every binding against the manifest |
+| `xgen/runtimes/core/assets/app/fields.ts` | the central field maps (`CODEX_FIELDS`) from Codex entries to the record types of the organisms | copied into `packages/shared/app` |
 
-Canonical names in brick definitions use **Go PascalCase**:
+At run time the hosts and any consumer turn entries into records with `fromCodex(collection, CODEX_FIELDS.<map>)`
+(`packages/shared/app/src/runtime/core.ts`). A CMS or API that serves Codex v0.4 can feed the blocks directly.
 
-| Canonical | React | Svelte / Vue / HTML | Go | PHP templates |
-|-----------|-------|---------------------|-----|---------------|
-| `Variant` | `variant` | `variant` | `Variant` | `$variant` |
-| `Class` | `className` | `class` | `Class` | `$class` |
-| `AriaLabel` | `aria-label` | `aria-label` | `AriaLabel` | `$ariaLabel` |
-| `HTMLFor` | `htmlFor` | `for` | `HTMLFor` | `$for` |
-
-## 2. Variants
-
-Every `cva: true` prop resolves through the shared `*.variants.json`:
-
-- TS runtimes: literal-union types derived from recipe keys (`RecipeKey`).
-- Go: embedded `Variants` struct from JSON.
-- PHP: constants in `Classes.php`.
-
-## 3. Class merge order
-
-Applied identically in logic; merge *mechanism* differs:
-
-1. Recipe base
-2. Variant/size classes from recipe
-3. Static base from `classes.staticBase`
-4. Computed `classes.extra` fragments
-5. State classes (`classes.state` tests)
-6. Caller `Class` / `class` / `className`
-
-| Runtime | Merge function | Conflict resolution |
-|---------|----------------|---------------------|
-| React, Svelte, Vue, canonical | `cn()` | Tailwind-aware (`tailwind-merge`) |
-| Go, PHP | `Cn()` / `Rt::cn()` | Plain concatenation |
-
-Parity tests compare the **effective** utility set after conflict resolution — identical across all runtimes.
-
-## 4. Children
-
-| Runtime | API |
-|---------|-----|
-| Templ | `{ children... }` |
-| React | `children` prop |
-| Svelte 5 | `{@render children?.()}` snippet |
-| Vue | `<slot />` |
-| Latte / Twig | `children` as pre-rendered HTML string |
-
-Childless bricks render no slot anywhere.
-
-## 5. Root tag resolution
-
-Tier-B bricks resolve their root tag against `TagGroup` allow-lists (`src/domain/tags.ts`):
-
-| Runtime | Mechanism |
-|---------|-----------|
-| Go | Local `switch` |
-| React | `resolveTag(...) as ElementType` |
-| Svelte | `<svelte:element this={…}>` |
-| Vue | `<component :is="…">` |
-| Latte / Twig | `$uiTag` / `uiTag` from `Rt::resolveTag()` or `ui8kit_resolve_tag()` |
-
-`Title` uses `ui8kit_title_tag(as)` / `titleTag(level)` for heading levels 1–6.
-
-## 6. Boolean vs ARIA-state attributes
-
-| Kind | Examples | Behavior |
-|------|----------|----------|
-| Native boolean | `disabled`, `checked`, `open`, `required` | Present-or-absent in all runtimes |
-| ARIA state | `aria-checked`, `aria-expanded`, … | Always stringified `"true"` / `"false"`, never omitted |
-
-## 7. Attrs / rest escape hatch
-
-Caller-supplied extra attributes always win — spread comes **last**:
-
-| Runtime | Mechanism |
-|---------|-----------|
-| Go | `templ.Attributes` `{ p.Attrs... }` |
-| React / Svelte | `...rest` |
-| Vue | `v-bind` of non-class attrs (`inheritAttrs: false`) |
-| Latte | `...$attrs` in `n:attr` |
-| Twig | second arg to `ui8kit_attr_str(computed, attrs)` |
-
-## 8. Passthrough props
-
-Props like `ID`, `Name`, `AriaLabel`, `data-ui8kit` that only forward to attributes:
-
-- Explicit struct fields in Go
-- Flow through rest props in TS runtimes
-- Validator enforces they are never referenced by render logic
-
-## 9. Behavior hooks
-
-`DataUI8Kit` emits `data-ui8kit="…"` only when explicitly set. No client JS ships in generated primitives — behavior belongs to `@ui8kit/aria` at the app level.
-
-## 10. Reusability / escape hatches
-
-Every part exports class composition helpers for manual re-rooting:
-
-| Runtime | Helper |
-|---------|--------|
-| Go | `ButtonClasses(p ButtonProps) string` |
-| TS | `buttonClasses()` in `<brick>.shared.ts` |
-| PHP | `Classes::buttonClasses(array $in): string` |
-
-React additionally ships `asChild` / `Slot` for composition without duplicating class logic.
-
-Svelte and Vue follow the Go pattern: use the classes helper on a manual root.
-
-## Empty attribute omission
-
-Attributes with empty string values are never emitted. This applies uniformly — upstream hand-written Templ occasionally rendered `class=""`.
-
-## Parity normalization
-
-`tests/support/normalize.ts` normalizes HTML before comparison:
-
-- Whitespace collapse
-- Attribute ordering
-- Equivalent class set comparison (Tailwind conflict resolution applied to both sides)
-
-This allows Go/PHP concatenation and TS `cn()` to compare fairly.
+`@ui8kit/contract` is a dependency of `@ui8kit/xgen-schema` (`^0.2.0`, Codex schema line v0.4).
diff --git a/docs/examples.md b/docs/examples.md
deleted file mode 100644
index 67b8f52..0000000
--- a/docs/examples.md
+++ /dev/null
@@ -1,151 +0,0 @@
-# Examples
-
-Seven local welcome previews demonstrate **generated** `ui/` primitives with shared shadcn design tokens and identical layout across runtimes.
-
-## Preview matrix
-
-| Path | Runtime | Dev command | URL |
-|------|---------|-------------|-----|
-| [`examples/html/`](../examples/html/) | Static HTML export | `bun run build:html` | Open `html/index.html` |
-| [`examples/templ/`](../examples/templ/) | Go Templ + HTTP | `bun run dev:templ` | http://127.0.0.1:8080 |
-| [`examples/react/`](../examples/react/) | React 19 + Vite | `bun run dev:react` | http://127.0.0.1:5173 |
-| [`examples/svelte/`](../examples/svelte/) | Svelte 5 + Vite | `bun run dev:svelte` | http://127.0.0.1:5174 |
-| [`examples/vue/`](../examples/vue/) | Vue 3 + Vite | `bun run dev:vue` | http://127.0.0.1:5175 |
-| [`examples/latte/`](../examples/latte/) | Latte + PHP server | `bun run dev:latte` | http://127.0.0.1:5176 |
-| [`examples/twig/`](../examples/twig/) | Twig + PHP server | `bun run dev:twig` | http://127.0.0.1:5177 |
-
-## Quick start
-
-From repo root:
-
-```bash
-bun run generate
-cd examples && bun install
-bun run build:css
-bun run dev:react    # or any dev:* command
-```
-
-Or from root (after `examples` deps installed):
-
-```bash
-bun run dev:react
-```
-
-**Prerequisite:** `bun run generate` must have run first — all previews import from `../generated/ui/`.
-
-**PHP previews** (`dev:latte`, `dev:twig`) additionally need PHP 8.1+ and Composer. Dependencies install into `../generated/php/vendor` via `examples/scripts/composer-install.mjs`.
-
-## Shared assets
-
-| Path | Role |
-|------|------|
-| `examples/data/welcome.json` | Runtime-neutral copy and port map |
-| `examples/web/static/css/tokens.css` | shadcn-compatible CSS variables |
-| `examples/web/static/css/input.css` | Tailwind v4 `@source` for generated + example files |
-| `examples/web/static/css/app.css` | Built Tailwind output (`bun run build:css`) |
-
-## Per-runtime welcome sources
-
-| Runtime | Source file |
-|---------|-------------|
-| Templ | `examples/templ/welcome.templ` |
-| React | `examples/react/src/Welcome.tsx` |
-| Svelte | `examples/svelte/src/Welcome.svelte` |
-| Vue | `examples/vue/src/Welcome.vue` |
-| Latte | `examples/latte/templates/welcome.latte` |
-| Twig | `examples/twig/templates/welcome.html.twig` |
-| Static HTML | Generated from React via `examples/react/script/generate-static.tsx` |
-
-## Welcome page content
-
-Each preview renders:
-
-1. **Hero** — runtime badge, title, subtitle
-2. **Primitives card** — button variants, badge variants (generated components)
-3. **Feature grid** — three cards describing spec-driven codegen, seven runtimes, DOM parity
-4. **Links box** — documentation links
-5. **Footer** — attribution line
-
-### Primitives showcased
-
-The welcome page demonstrates a **subset** of the full inventory:
-
-- `Badge`, `Title`, `Text`, `Stack`
-- `Button` (5 variants), `Badge` (3 variants), `Group`
-- `Card`, `CardHeader`, `CardTitle`, `CardContent`
-
-It does not render every brick — full coverage is in parity tests. Parts skipped by PHP (Icon, Select, Breadcrumb) are not in the welcome demo.
-
-## Latte composition example
-
-From `examples/latte/templates/welcome.latte`:
-
-```latte
-{capture $buttons}
-  {include '../../../generated/ui/button/Button.latte', variant: 'default', size: 'sm', children: 'Default'}
-  {* … more buttons … *}
-{/capture}
-{capture $primitivesCard}
-  {include '../../../generated/ui/card/Card.latte', variant: 'default', children: (string) $primitivesCardInner}
-{/capture}
-```
-
-Nested includes require `(string)` casts when concatenating captures.
-
-## Twig composition example
-
-From `examples/twig/templates/welcome.html.twig`:
-
-```twig
-{% set buttons %}
-  {% include 'button/Button.html.twig' with {variant: 'default', size: 'sm', children: 'Default'} only %}
-{% endset %}
-{% include 'card/Card.html.twig' with {variant: 'default', children: primitivesInner} only %}
-```
-
-Twig loader root: `generated/ui/` (configured in `server.php`).
-
-## Static HTML export
-
-```bash
-bun run build:html
-```
-
-`generate-static.tsx`:
-
-1. Renders React `Welcome` with `renderToStaticMarkup`
-2. Wraps in plain HTML shell with CSS links
-3. Writes routes:
-   - `examples/html/index.html`
-   - `examples/html/about/index.html`
-4. Uses relative links to `static/css/`
-
-## PHP dev servers
-
-`examples/latte/server.php` and `examples/twig/server.php`:
-
-- Bootstrap Latte/Twig with `generated/ui/` as template root
-- Serve `welcome` and `page` routes
-- Link shared CSS from `examples/web/static/`
-
-Started by `examples/scripts/php-server.mjs`.
-
-## Templ dev server
-
-`examples/templ/cmd/server` — Go HTTP server after `gen:templ`:
-
-1. `templ generate` on `generated/` and `examples/templ/`
-2. `go run ./cmd/server` on port 8080
-
-## Vite dev servers
-
-React, Svelte, Vue each have `vite.config.ts` pointing at generated `ui/` imports and shared CSS.
-
-## Tailwind v4 setup
-
-`examples/web/static/css/input.css` uses `@source` directives to scan:
-
-- Generated component files
-- Example source files
-
-Ensures utility classes used in generated primitives are included in `app.css`.
diff --git a/docs/getting-started.md b/docs/getting-started.md
deleted file mode 100644
index b949cd9..0000000
--- a/docs/getting-started.md
+++ /dev/null
@@ -1,141 +0,0 @@
-# Getting started
-
-## Prerequisites
-
-| Tool | Version | Required for |
-|------|---------|--------------|
-| [Bun](https://bun.sh) | latest | package manager, test runner, CLI execution |
-| [Go](https://go.dev) | 1.25+ | Templ parity tests, Templ examples |
-| [PHP](https://www.php.net) | 8.1+ | Latte/Twig parity tests and examples |
-| [Composer](https://getcomposer.org) | latest | PHP dependencies in `generated/` |
-
-Go and PHP toolchains are **optional locally** — their parity suites are skipped when the binary is not on `PATH`. CI installs all three.
-
-## Install
-
-```bash
-git clone <repo-url>
-cd Codegen
-bun install
-```
-
-## Validate and generate
-
-```bash
-bun run check       # validate all brick definitions (no I/O)
-bun run generate    # emit all seven runtimes into generated/
-```
-
-Generate with custom options:
-
-```bash
-bun src/infrastructure/cli.ts generate \
-  --out generated \
-  --go-module github.com/ui8kit/ui \
-  --runtimes templ,react,svelte,vue,latte,twig
-```
-
-On generate, when Latte or Twig is requested, the CLI prints PHP coverage:
-
-```
-PHP runtimes (latte/twig): 59/63 parts.
-  skipped breadcrumb/Breadcrumb: forEach over typed items
-  skipped icon/Icon: root is not a single element (branched roots need per-branch slots)
-  skipped select/Select: forEach over typed items
-```
-
-## Verify (full CI-equivalent check)
-
-```bash
-bun run verify
-```
-
-This runs, in order:
-
-1. `bun run check` — definition validation
-2. `tsc --noEmit` — engine typecheck
-3. `bun run typecheck:generated` — regenerate + typecheck generated React/TS outputs
-4. `bun test` — domain units + parity suites
-
-## Run tests only
-
-```bash
-bun test
-bun test --watch    # via npm script: bun run test:watch
-```
-
-Tests auto-regenerate `generated/` before parity runs (see [Testing and CI](./testing-and-ci.md)).
-
-## Local welcome previews
-
-After generating:
-
-```bash
-cd examples && bun install && bun run build:css
-```
-
-From the repo root:
-
-```bash
-bun run dev:templ   # http://127.0.0.1:8080
-bun run dev:react   # http://127.0.0.1:5173
-bun run dev:svelte  # http://127.0.0.1:5174
-bun run dev:vue     # http://127.0.0.1:5175
-bun run dev:latte   # http://127.0.0.1:5176
-bun run dev:twig    # http://127.0.0.1:5177
-bun run build:html  # static export → examples/html/
-```
-
-See [Examples](./examples.md) for layout and PHP setup.
-
-## Consuming generated output
-
-### Go Templ
-
-```bash
-cd generated
-templ generate && go build
-```
-
-Set `--go-module` at generate time to control `go.mod` module path (default: `github.com/ui8kit/ui`).
-
-### React / Svelte / Vue
-
-Import from `generated/ui/`. Peer dependencies: `react`, `svelte`, or `vue`, plus `clsx` and `tailwind-merge` for the shared `cn()` helper.
-
-Typecheck generated TS:
-
-```bash
-bun run typecheck:generated
-```
-
-### Latte / Twig
-
-```bash
-cd generated
-composer install    # vendor-dir: php/vendor
-```
-
-Point a `Latte\Engine` `FileLoader` or Twig `FilesystemLoader` at `generated/ui/`. Register `UI8Kit\TwigExtension` for Twig.
-
-Children are pre-rendered HTML strings — compose nested bricks with `{capture}` (Latte) or `{% set %}` (Twig). See `examples/latte/` and `examples/twig/`.
-
-### PHP system packages (Ubuntu)
-
-```bash
-sudo apt-get install -y php-cli php-xml php-mbstring composer
-```
-
-## CLI entry points
-
-| Command | Entry |
-|---------|-------|
-| `bun run generate` | `bun src/infrastructure/cli.ts generate --out generated` |
-| `bun run check` | `bun src/infrastructure/cli.ts check` |
-| `ui8kit-codegen` | `./bin/ui8kit-codegen.js` (if published) |
-
-List all bricks and parts:
-
-```bash
-bun src/infrastructure/cli.ts list
-```
diff --git a/docs/latte-bundle.md b/docs/latte-bundle.md
deleted file mode 100644
index 626686d..0000000
--- a/docs/latte-bundle.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Latte theme bundle
-
-Profile for WordPress / theme consumers that need **only** Latte primitives
-and the PHP runtime — not the full six-runtime `generated/` tree.
-
-## Command
-
-```bash
-bun run generate:latte-bundle -- --out /path/to/ui8kit-latte
-```
-
-Default `--out` is `generated/latte-bundle`.
-
-## What is included
-
-| Path | Role |
-|------|------|
-| `ui/<brick>/<Part>.latte` | 60 supported parts |
-| `ui/<brick>/*.variants.json` | Shared recipes |
-| `php/UI8Kit/Rt.php` | Expression helpers |
-| `php/UI8Kit/Classes.php` | Class helpers (all 63 parts) |
-| `composer.json` | Package `ui8kit/latte-primitives` (Latte only) |
-| `manifest.json` | Coverage + skip summary |
-| `README.md` | Consumer notes |
-
-## What is excluded
-
-- Twig templates / `TwigExtension`
-- `cmd/parity-latte` harness
-- React / Svelte / Vue / Templ / TS barrels
-
-## wp-fasty integration
-
-In the [wp-fasty](https://github.com/godudy/wpfasty) monorepo:
-
-```bash
-bun run ui:primitives   # → .workspaces/ui8kit-latte
-```
-
-Codegen is expected as `packages/ui8kit-codegen` (git submodule) or via
-`UI8KIT_CODEGEN` / a sibling checkout.
diff --git a/docs/overview.md b/docs/overview.md
deleted file mode 100644
index 4689397..0000000
--- a/docs/overview.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# Overview
-
-## What this project does
-
-UI8Kit Codegen is a **spec-driven codegen engine** for UI8Kit `ui/` primitives. Each brick is defined once in TypeScript as data (props, derived values, class recipes, render tree). The engine:
-
-1. **Validates** definitions before emitting anything.
-2. **Renders** a canonical reference DOM via `src/domain/render.ts` — the executable specification.
-3. **Emits** idiomatic code for seven runtimes from the same definition.
-4. **Tests** that every generated runtime produces identical normalized DOM for every part and showcase fixture.
-
-Identity across runtimes is not a review convention — it is enforced by the test suite.
-
-## Supported runtimes
-
-| Runtime | Output | Composition model |
-|---------|--------|-------------------|
-| **Go Templ** | `ui/<brick>/<brick>.templ` + `<brick>_gen.go` | SSR, `{ children... }`, `Attrs` map |
-| **React 19** | `ui/<brick>/<brick>.tsx` | `forwardRef`, `asChild` via `Slot`, rest props |
-| **Svelte 5** | `ui/<brick>/<Part>.svelte` | runes, snippets, `<svelte:element>` |
-| **Vue 3** | `ui/<brick>/<Part>.vue` | `<script setup>`, slots, `<component :is>` |
-| **SolidJS** | `ui/<brick>/<brick>.solid.tsx` | `splitProps`, `Dynamic`, shared `*Classes()` |
-| **Latte** | `ui/<brick>/<Part>.latte` | typed `{parameters}`, `n:attr`, children as HTML string |
-| **Twig** | `ui/<brick>/<Part>.html.twig` | `ui8kit_attr_str`, `include with`, children as HTML string |
-
-A **static HTML export** (via React `renderToStaticMarkup`) lives in `examples/html/` and is built by `bun run build:html`.
-
-All runtimes consume the **same** colocated `*.variants.json` (CVA-style class recipes). Attribute logic is written once as a small typed expression IR and printed per runtime.
-
-## PHP template coverage
-
-Latte and Twig cover **60 of 63** parts. Three structurally complex parts are skipped by a mechanical predicate (`src/domain/php-support.ts`). Class helpers in `php/UI8Kit/Classes.php` are still emitted for **all** parts as an app-level escape hatch.
-
-See [PHP complex parts](./php-complex-parts.md) for details.
-
-## Scope
-
-**In scope:** `ui/` primitives only — 33 bricks, 63 exported parts (Tiers A–E of the upstream inventory), including multi-part composites (`card`, `table`, `form`, `form/controls`, `select`, `breadcrumb`).
-
-**Out of scope (separate phase):** behavior-driven `components/` composites (Sheet, Tabs, Popover, Combobox, Menu, Toast) that need the `@ui8kit/aria` client contract. The engine IR and emitters are ready to host them once that contract is specified.
-
-## Repository layout
-
-```
-Codegen/
-├── bricks/                 # 33 brick definitions + variants.json + data.json fixtures
-│   ├── _dsl.ts             # authoring prelude (prop factories, IR re-exports)
-│   └── index.ts            # brick registry
-├── src/
-│   ├── domain/             # pure model: expr, model, render, validate, tags, recipe
-│   ├── emitters/           # one printer per runtime + shared analysis
-│   ├── application/        # generate pipeline
-│   └── infrastructure/     # CLI
-├── runtime/                # support files copied into generated/ (Go, TS, PHP)
-├── generated/              # codegen output (gitignored; created by `bun run generate`)
-├── tests/                  # domain units + cross-runtime parity suites
-├── examples/               # eight welcome previews + static HTML export
-├── docs/                   # this documentation
-└── .github/workflows/      # CI
-```
-
-## Design principles
-
-- **Single source of truth:** brick definitions in `bricks/<name>/<name>.def.ts`.
-- **Non-Turing-complete IR:** thirteen expression kinds and five node kinds — enough for all 33 bricks, provably coverable by every emitter.
-- **Fail fast:** `validateRegistry` runs before emission; duplicate generated paths throw.
-- **Open/closed emitters:** adding a runtime is a new `Emitter` implementation, not a change to the domain model.
-- **DRY:** one `*.variants.json` per recipe; one expression IR; TS runtimes share `<brick>.shared.ts`.
-
-## Why an IR instead of hand-written runtimes
-
-The upstream registry hand-writes `.templ` and `.tsx` pairs against a shared spec. Adding Svelte, Vue, Solid, Latte, and Twig by hand multiplies drift surface. This engine inverts the workflow: definitions are data, the canonical renderer is the spec, emitters are printers, parity tests are the gate.
-
-## License
-
-MIT © UI8Kit.
diff --git a/docs/php-complex-parts.md b/docs/php-complex-parts.md
deleted file mode 100644
index 4482e9c..0000000
--- a/docs/php-complex-parts.md
+++ /dev/null
@@ -1,410 +0,0 @@
-# PHP complex parts
-
-Latte and Twig emitters cover **59 of 63** parts. Four parts are **structurally complex** — their render trees exceed what the PHP template composition model can express mechanically.
-
-This is not a hand-maintained exclusion list. Eligibility is decided by `phpSupported()` in `src/domain/php-support.ts` and reported on every `generate` run.
-
-## Summary
-
-| Part | Brick | Skip reason | Workaround |
-|------|-------|-------------|------------|
-| `Breadcrumb` | `breadcrumb` | `forEach` over typed items | Manual loop in app template + `Classes::breadcrumbClasses()` |
-| `Select` | `select` | `forEach` over typed items | Use `SelectOption` / `OptGroup` includes + `Classes::selectClasses()` |
-| `Icon` | `icon` | Branched root (`when` at top level) | Branch in app template + `Classes::iconClasses()` |
-| `Button` | `button` | Branched root (`when` on optional `Href`) | Branch in app template + `Classes::buttonClasses()`, or omit `Href` and use a manual `<a>` |
-
-Sibling parts in the same brick **are** generated:
-
-| Brick | Generated | Skipped |
-|-------|-----------|---------|
-| `select` | `SelectOption`, `OptGroup` | `Select` |
-| `breadcrumb` | — | `Breadcrumb` (only part) |
-| `icon` | — | `Icon` (only part) |
-| `button` | — | `Button` (only part; class helper still emitted) |
-
-Class helpers in `php/UI8Kit/Classes.php` are emitted for **all four** skipped parts.
-
----
-
-## The PHP support predicate
-
-A part is supported if and only if:
-
-1. **Single element root** — `part.render.kind === "element"`. Branched roots (`when` at the top) fail.
-2. **No `forEach`** — loops over typed `items` props are not emitted into Latte/Twig.
-3. **No branched slots** — a `slot` (children insertion) inside `when` branches fails, because Latte/Twig cannot declare the same children parameter twice across exclusive branches.
-
-```ts
-// src/domain/php-support.ts (simplified)
-export function phpSupported(part: PartDef): PhpSupport {
-  if (part.render.kind !== "element")
-    return { ok: false, reason: "root is not a single element (branched roots need per-branch slots)" };
-  if (hasForEach(part.render))
-    return { ok: false, reason: "forEach over typed items" };
-  if (hasBranchedSlot(part.render))
-    return { ok: false, reason: "slot inside when branches" };
-  return { ok: true };
-}
-```
-
-### Why children are HTML strings in PHP
-
-Latte and Twig compose nested components by passing **pre-rendered HTML strings** as the `children` parameter. There is no nested component slot protocol like React `children` or Vue `<slot>`.
-
-This works for linear trees: capture inner HTML, pass to outer include. It breaks for:
-
-- **Loops** — the emitter would need to generate `{% for %}` / `{foreach}` over typed records with per-item class logic.
-- **Branched roots** — different element types (`svg` vs `span`) at the root require different parameter signatures per branch.
-
----
-
-## 1. `breadcrumb/Breadcrumb`
-
-### Definition
-
-`bricks/breadcrumb/breadcrumb.def.ts` — single part, list-driven navigation.
-
-**Props:**
-
-| Prop | Type | Role |
-|------|------|------|
-| `Items` | `items` of `BreadcrumbItem` | Trail entries |
-| `Class` | string | Caller utilities |
-| `AriaLabel` | passthrough | `aria-label` on `<nav>` |
-| `DataUI8Kit` | passthrough | Optional behavior hook |
-| `Attrs` | attrs | Rest escape hatch |
-
-**`BreadcrumbItem` record:**
-
-| Field | Type |
-|-------|------|
-| `Label` | string |
-| `Href` | string |
-| `Current` | bool — active page (`aria-current="page"`) |
-| `Disabled` | bool |
-
-### Render structure
-
-```
-nav
-  ol
-    forEach Items →
-      li
-        when (Href set AND NOT Disabled) →
-          a [href, item classes, aria-current?]
-            text Label
-        else →
-          span [item classes, aria-current?]
-            text Label
-```
-
-### Why it is skipped
-
-`forEach("Items", …)` iterates typed records. The emitter would need to generate a template loop with per-item conditional link vs span rendering and dynamic `aria-current`.
-
-### Canonical DOM (reference)
-
-Other runtimes (React, Templ, etc.) render this fully. Parity fixtures would use props like:
-
-```json
-{
-  "Items": [
-    { "Label": "Home", "Href": "/" },
-    { "Label": "Settings", "Href": "/settings" },
-    { "Label": "Profile", "Current": true }
-  ],
-  "AriaLabel": "Breadcrumb"
-}
-```
-
-### App-level workaround (Twig)
-
-Twig class helpers are invoked via `ui8kit_classes('methodName', {…})` (see `TwigExtension`):
-
-```twig
-{% set navClass = ui8kit_classes('breadcrumbClasses', {class: 'my-nav'}) %}
-<nav class="{{ navClass }}" aria-label="Breadcrumb">
-  <ol class="flex flex-wrap items-center gap-2">
-    {% for item in items %}
-      <li class="inline-flex items-center">
-        {# Item-level classes: inline the recipe from breadcrumb.def.ts or use Rt::cn() #}
-        {% set itemClass = item.current ? 'text-sm font-medium' : (item.disabled ? 'text-sm text-muted-foreground' : 'text-sm text-primary underline-offset-4 hover:underline') %}
-        {% if item.href and not item.disabled %}
-          <a href="{{ item.href }}" class="{{ itemClass }}"{{ item.current ? ' aria-current="page"' }}>{{ item.label }}</a>
-        {% else %}
-          <span class="{{ itemClass }}"{{ item.current ? ' aria-current="page"' }}>{{ item.label }}</span>
-        {% endif %}
-      </li>
-    {% endfor %}
-  </ol>
-</nav>
-```
-
-Use `UI8Kit\Classes::breadcrumbClasses($in)` for the nav wrapper classes. Item-level classes follow the recipe in the brick definition (`text-sm`, conditional `font-medium` / `text-primary` / `text-muted-foreground`).
-
-### App-level workaround (Latte)
-
-Same structure with `{foreach $items as $item}` and `{include}` or inline markup, calling `Classes::breadcrumbClasses()` for class strings.
-
----
-
-## 2. `select/Select`
-
-### Definition
-
-`bricks/select/select.def.ts` — three parts; only `Select` is skipped.
-
-### `Select` props
-
-| Prop | Type | Role |
-|------|------|------|
-| `Variant`, `Size` | CVA | Appearance |
-| `Options` | `items` of `SelectOptionItem` | Generated `<option>` elements |
-| `Value` | string | Selected value |
-| `Name`, `Disabled`, `Required` | scalars | Native select attrs |
-| `Children` | children | Manual options after generated ones |
-| Control passthroughs | | `ID`, `AriaLabel`, `Role`, `TabIndex`, … |
-| `Attrs` | attrs | Rest |
-
-**`SelectOptionItem`:**
-
-| Field | Type |
-|-------|------|
-| `Value` | string |
-| `Label` | string |
-
-### Render structure
-
-```
-select [attrs, classes]
-  forEach Options →
-    option [value, selected?]
-      text Label
-  slot (manual children)
-```
-
-### Why it is skipped
-
-`forEach("Options", …)` generates options from typed data. Combined with a children slot for manual `SelectOption` / `OptGroup` content, the emitter would need loop + slot composition.
-
-### Generated siblings
-
-| Part | Template | Use |
-|------|----------|-----|
-| `SelectOption` | ✅ | Single `<option>` |
-| `OptGroup` | ✅ | `<optgroup>` wrapper |
-
-### Showcase fixtures
-
-From `bricks/select/select.data.json`:
-
-```json
-{
-  "variant.default": {
-    "props": {
-      "Name": "country",
-      "Options": [
-        { "Label": "United States", "Value": "us" },
-        { "Label": "Canada", "Value": "ca" }
-      ],
-      "Value": "us"
-    }
-  }
-}
-```
-
-### App-level workaround (Twig)
-
-**Option A — manual options only:**
-
-```twig
-{% set optionHtml %}
-  {% include 'select/SelectOption.html.twig' with {value: 'us', label: 'United States', selected: true} only %}
-  {% include 'select/SelectOption.html.twig' with {value: 'ca', label: 'Canada'} only %}
-{% endset %}
-
-{# Build <select> attrs/classes via Classes::selectClasses() #}
-<select class="{{ selectClass }}" name="country"{{ disabled ? ' disabled' }}>
-  {{ optionHtml|raw }}
-</select>
-```
-
-**Option B — loop in app template:**
-
-```twig
-<select class="{{ ui8kit_classes('selectClasses', {variant: 'default'}) }}" name="country">
-  {% for opt in options %}
-  <option value="{{ opt.value }}"{{ opt.value == selected ? ' selected' }}>{{ opt.label }}</option>
-  {% endfor %}
-</select>
-```
-
-Use `UI8Kit\Classes::selectClasses(['variant' => 'default', 'size' => 'default', 'class' => '…'])` for the select element classes.
-
-### App-level workaround (Latte)
-
-```latte
-{var $class = UI8Kit\Classes::selectClasses(['variant' => 'default', 'name' => 'country'])}
-<select class="{$class}" name="country">
-  {foreach $options as $opt}
-    {include '../../../generated/ui/select/SelectOption.latte',
-      value: $opt->value, label: $opt->label, selected: $opt->value === $selected}
-  {/foreach}
-</select>
-```
-
----
-
-## 3. `icon/Icon`
-
-### Definition
-
-`bricks/icon/icon.def.ts` — single part with **three rendering modes** based on `Type`.
-
-### Props
-
-| Prop | Role |
-|------|------|
-| `Type` | `svg`, `text`, or `class` (default) |
-| `Name`, `Prefix`, `BaseClass` | Icon font class mode |
-| `Href`, `Title` | SVG `<use>` mode |
-| `Size` | CVA size |
-| `Decorative`, `AriaLabel` | Accessibility |
-| `Children` | Slot (SVG/text modes) |
-| `Class`, `Attrs` | Styling escape hatches |
-
-### Derived values
-
-| Name | Logic |
-|------|-------|
-| `iconKind` | Resolved from `Type` prop |
-| `isDecorative` | `Decorative` OR (no `Title` AND no `AriaLabel`) |
-
-### Render structure (branched root)
-
-```
-when iconKind == "svg" →
-  svg [classes, aria-*]
-    when Title set → title
-    when Href set → use
-    slot
-
-else when iconKind == "text" →
-  span [classes, aria-*]
-    slot
-
-else →
-  span [classes, aria-*]   (class mode — no children)
-```
-
-### Why it is skipped
-
-The render tree root is `when`, not `element`. Each branch produces a different root element (`svg` vs `span`) with different child structure. PHP templates declare one parameter block and one root tag per file — they cannot switch root element types at the file level without duplicating the entire part across separate templates.
-
-Additionally, `slot` appears inside `when` branches (branched slot pattern), which the predicate rejects even for non-root conditionals.
-
-### Showcase fixtures
-
-From `bricks/icon/icon.data.json`:
-
-```json
-{
-  "type.class": {
-    "props": { "Type": "class", "BaseClass": "icon", "Name": "home", "Prefix": "icon-", "Size": "sm" }
-  },
-  "type.svg": {
-    "props": { "Type": "svg", "Href": "#check", "Title": "Done" }
-  }
-}
-```
-
-### App-level workaround (Twig)
-
-Branch in the consuming template:
-
-```twig
-{% if type == 'svg' %}
-  <svg class="{{ ui8kit_classes('iconClasses', {type: 'svg', size: size, class: class}) }}"
-       {{ decorative ? 'aria-hidden="true"' : 'role="img"' }}
-       {{ ariaLabel and not decorative ? 'aria-label="' ~ ariaLabel ~ '"' }}>
-    {% if title %}<title>{{ title }}</title>{% endif %}
-    {% if href %}<use href="{{ href }}"></use>{% endif %}
-    {{ children|raw }}
-  </svg>
-{% elseif type == 'text' %}
-  <span class="{{ ui8kit_classes('iconClasses', {type: 'text', class: class}) }}" …>{{ children|raw }}</span>
-{% else %}
-  <span class="{{ ui8kit_classes('iconClasses', {type: 'class', name: name, prefix: prefix, baseClass: baseClass, class: class}) }}" …></span>
-{% endif %}
-```
-
-Use `UI8Kit\Classes::iconClasses($in)` — it handles all three modes' class composition including prefix/name concatenation in class mode.
-
-### App-level workaround (Latte)
-
-```latte
-{if $type === 'svg'}
-  {var $class = UI8Kit\Classes::iconClasses(['type' => 'svg', 'size' => $size, 'class' => $class])}
-  <svg class="{$class}" …>…</svg>
-{elseif $type === 'text'}
-  …
-{else}
-  {var $class = UI8Kit\Classes::iconClasses(['type' => 'class', 'name' => $name, 'prefix' => $prefix, 'baseClass' => $baseClass])}
-  <span class="{$class}" …></span>
-{/if}
-```
-
----
-
-## Class helpers for skipped parts
-
-`src/emitters/php-classes.ts` emits `Classes::<part>Classes()` for **every** part with a classes contract, including skipped template parts:
-
-```php
-// Generated into php/UI8Kit/Classes.php
-public static function breadcrumbClasses(array $in): string { … }
-public static function selectClasses(array $in): string { … }
-public static function iconClasses(array $in): string { … }
-```
-
-These methods:
-
-- Accept the same prop names as template parameters (PHP naming: `$variant` → `'variant'` key)
-- Embed variant recipes as PHP constants
-- Mirror `buttonClasses()` / Go `ButtonClasses()` logic
-
-They are the **documented escape hatch** for app-level markup when templates are not generated.
-
----
-
-## Parity test coverage
-
-| Part | React/Svelte/Vue/Templ parity | Latte/Twig parity |
-|------|--------------------------------|-------------------|
-| `Breadcrumb` | ✅ | ❌ excluded |
-| `Select` | ✅ | ❌ excluded |
-| `SelectOption`, `OptGroup` | ✅ | ✅ |
-| `Icon` | ✅ | ❌ excluded |
-
-PHP parity tests in `tests/support/php.ts` skip unsupported parts with the same `phpSupported()` predicate used by emitters.
-
----
-
-## Future: closing the gap
-
-Possible approaches (not implemented):
-
-1. **Split branched parts** into multiple generated templates (`IconSvg.latte`, `IconClass.latte`) with a thin app-level dispatcher.
-2. **Emit loops** for `forEach` parts — generate `{% for item in options %}` with per-item class expressions inlined.
-3. **Macro/block layer** — generate Latte `{define}` / Twig `{% macro %}` helpers for item rows, composed by a hand-written outer shell.
-
-The current design favors mechanical correctness and identical DOM over partial codegen that could drift from the canonical renderer.
-
----
-
-## Related reading
-
-- [Runtimes](./runtimes.md) — Latte/Twig composition model
-- [Cross-runtime contract](./contract.md) — class merge order, ARIA rules
-- [Testing and CI](./testing-and-ci.md) — PHP parity scope
-- [Brick definitions](./bricks.md) — `forEach`, `when`, record types
diff --git a/docs/registry.md b/docs/registry.md
new file mode 100644
index 0000000..203cdcc
--- /dev/null
+++ b/docs/registry.md
@@ -0,0 +1,40 @@
+# The public registry
+
+ui8kit 2.0 is published as a shadcn-style registry: the CLI copies source files into an app.
+
+| | |
+|---|---|
+| Docs and previews | https://ui.buildy.tw (source: [ui8kit/site](https://github.com/ui8kit/site), `generator/`, `content/`) |
+| Registry roots | `https://registry.buildy.tw/<runtime>` for svelte, react, vue, solid, templ, twig, latte, jinja2 (`index.json`, `<type>/<name>.json`); all runtimes: `https://registry.buildy.tw/registry.json` (`contractVersion` 2.0.0) |
+| CLI | [`ui8kit`](https://github.com/ui8kit/cli) on npm, 2.0.x: `init`, `add <name...>`, `add --all`, `list`, `diff`, `scan` / `build` |
+| Item types | `registry:ui` (bricks = `src/primitives`), `registry:component` (`src/components`), `registry:block` (`src/blocks`), `registry:utils`, `registry:lib` |
+
+```bash
+npx ui8kit init --yes --framework svelte --dir src --registry-url https://registry.buildy.tw/svelte --strict-cdn
+npx ui8kit add hero-split
+```
+
+## How the registry maps to this repository
+
+The registry tooling of ui8kit/site (`registry/src/*.ts`, `@ui8kit/registry-tooling`) reads a source checkout given by
+`--src` or `UI8KIT_SRC`:
+
+| It reads | Here |
+|---|---|
+| `packages/<svelte|react|vue|solid>/ui/src/{primitives,components,blocks,utils,presets}` | generated by `bun run build` |
+| `packages/<templ|twig|latte|jinja2>/ui` | generated |
+| `packages/shared/app/src/{content.ts,runtime/core.ts,data/*}` | generated (previews: dictionary, `fromCodex`, fixtures) |
+| `xgen/specs/blocks`, `xgen/specs/screens`, `xgen/specs/ui` (props tables) | specs |
+| `xgen/screens/src/authoring/screens/themes.ts`, `apps/host-<rt>/xgen/screens/*` | builder and generated host screens (templates pages) |
+
+The layout of this repository is the same as the codegen-x/ui8kit monorepo it was ported from, so the site can be built
+from a public checkout instead of the private monorepo:
+
+```bash
+git clone https://github.com/ui8kit/codegen && (cd codegen && bun install && bun run build)
+cd site && bun run registry:build -- --src ../codegen && bun run previews:build -- --src ../codegen && bun run templates:build -- --src ../codegen
+```
+
+Differences to expect today: this repository adds two bricks the registry does not list yet (`themetoggle`, `sheet`),
+so a rebuilt registry will have 39 primitives per TypeScript runtime instead of 37; the 97 registry blocks are the 97
+organisms of `src/blocks` (92 of them have a gallery block spec in `xgen/specs/blocks`).
diff --git a/docs/runtimes.md b/docs/runtimes.md
index 546eb31..cf38e9c 100644
--- a/docs/runtimes.md
+++ b/docs/runtimes.md
@@ -1,180 +1,28 @@
 # Runtimes
 
-Each runtime is generated from the same brick definition. This page describes output shape, composition model, and consumption notes.
-
-## Go Templ
-
-**Output:** `ui/<brick>/<brick>.templ` + `ui/<brick>/<brick>_gen.go`
-
-| Feature | Implementation |
-|---------|----------------|
-| Children | `{ children... }` |
-| Attrs escape hatch | `templ.Attributes` spread `{ p.Attrs... }` (last) |
-| Variants | `//go:embed <brick>.variants.json` → `ButtonVariants` |
-| Class helper | `func ButtonClasses(p ButtonProps) string` |
-| Dynamic tags | Local `switch` over `TagGroup` allow-list |
-| Boolean attrs | `disabled?={ p.Disabled }` (present-or-absent) |
-
-**Build:**
-
-```bash
-cd generated
-templ generate && go build
-```
-
-**Module path:** set with `--go-module` at generate time (default `github.com/ui8kit/ui`).
-
-## React 19
-
-**Output:** `ui/<brick>/<brick>.tsx` (all parts in one file)
-
-| Feature | Implementation |
-|---------|----------------|
-| Children | `children` prop |
-| `asChild` | `Slot` from `ui/slot/slot.tsx` (parts with `asChild: true`) |
-| Rest props | `...rest` spread last |
-| Prop naming | camelCase (`variant`, `className`, `htmlFor`, `aria-label`) |
-| Class merge | `cn()` — Tailwind conflict-aware |
-| Shared types | `<brick>.shared.ts` — literal unions + `buttonClasses()` |
-
-**Peer deps:** `react`, `react-dom`, `clsx`, `tailwind-merge`.
-
-**Note:** `<textarea>` uses `defaultValue` instead of children (React constraint); SSR DOM matches other runtimes.
-
-## Svelte 5
-
-**Output:** `ui/<brick>/<Part>.svelte` (one SFC per part)
-
-| Feature | Implementation |
-|---------|----------------|
-| Children | Snippets — `{@render children?.()}` |
-| Prop naming | HTML-native (`class`, `for`, `aria-label`) |
-| Dynamic tags | `<svelte:element this={resolvedTag}>` |
-| Class merge | `cn()` |
-
-**Peer deps:** `svelte`, `clsx`, `tailwind-merge`.
-
-Bun test preload compiles `.svelte` with `generate: "server"` for parity tests (`tests/preload-bun.ts`).
-
-## Vue 3
-
-**Output:** `ui/<brick>/<Part>.vue` (one SFC per part)
-
-| Feature | Implementation |
-|---------|----------------|
-| Children | `<slot />` |
-| Prop naming | HTML-native (`class`, `for`, …) |
-| Dynamic tags | `<component :is="resolvedTag">` |
-| Attrs | `inheritAttrs: false`; class consumed into `cn` merge |
-| Class merge | `cn()` |
-
-**Peer deps:** `vue`, `clsx`, `tailwind-merge`.
-
-## SolidJS
-
-**Output:** `ui/<brick>/<brick>.solid.tsx` (all parts in one file; `.solid.tsx` avoids colliding with React)
-
-| Feature | Implementation |
-|---------|----------------|
-| Children | `children` prop (`JSX.Element`) |
-| Prop naming | camelCase variants; HTML-native `class` (+ `className` alias) |
-| Dynamic tags | `<Dynamic component={…}>` from `solid-js/web` |
-| Rest props | `splitProps` → `{...rest}` spread last |
-| Class merge | shared `*Classes()` helpers (no `asChild`) |
-| Shared types | `<brick>.shared.ts` — same as React/Svelte/Vue |
-
-**Composition:** no Radix-style `asChild`. Style another element via `buttonClasses()` / `*Classes()` — same substitute as Svelte/Vue.
-
-**Peer deps:** `solid-js`, `clsx`, `tailwind-merge`.
-
-Bun/Vitest transform `*.solid.tsx` with `babel-preset-solid` / `vite-plugin-solid` (`generate: "ssr"`) for parity tests.
-
-## Latte (PHP)
-
-**Output:** `ui/<brick>/<Part>.latte`
-
-| Feature | Implementation |
-|---------|----------------|
-| Parameters | Typed `{parameters}` block |
-| Attrs | Single `n:attr` map; caller `$attrs` spread last |
-| Children | `$children` HTML string, printed with `\|noescape` |
-| Expressions | `UI8Kit\Rt` helpers + generated preamble for derived values |
-| Class merge | `Rt::cn()` — plain concatenation (like Go) |
-
-**Coverage:** 59/63 parts (see [PHP complex parts](./php-complex-parts.md)).
-
-**Composition pattern:**
-
-```latte
-{capture $inner}
-  {include 'button/Button.latte', variant: 'default', children: 'Click'}
-{/capture}
-{include 'stack/Stack.latte', class: 'gap-4', children: (string) $inner}
-```
-
-**Peer dep:** `latte/latte ^3`
-
-## Twig (PHP)
-
-**Output:** `ui/<brick>/<Part>.html.twig`
-
-| Feature | Implementation |
-|---------|----------------|
-| Attrs | `{{ ui8kit_attr_str(computed, attrs) }}` via `TwigExtension` |
-| Children | `children` param, printed `\|raw` |
-| Dynamic tags | `{% set uiTag = … %}` interpolation |
-| Class merge | `Rt::cn()` via extension |
-
-**Coverage:** 59/63 parts (same predicate as Latte).
-
-**Composition pattern:**
-
-```twig
-{% set inner %}
-  {% include 'button/Button.html.twig' with {variant: 'default', children: 'Click'} only %}
-{% endset %}
-{% include 'stack/Stack.html.twig' with {class: 'gap-4', children: inner} only %}
-```
-
-**Peer deps:** `twig/twig ^3`; register `UI8Kit\TwigExtension`.
-
-## PHP class helpers (all 63 parts)
-
-`php/UI8Kit/Classes.php` exposes static methods for every part with a classes contract:
-
-```php
-UI8Kit\Classes::buttonClasses(['variant' => 'ghost', 'size' => 'sm', 'class' => 'mt-2']);
-UI8Kit\Classes::iconClasses([...]);      // even though Icon.latte is not generated
-UI8Kit\Classes::selectClasses([...]);    // even though Select.html.twig is not generated
-```
-
-Use these when building markup manually for parts the template emitters skip.
-
-## Static HTML export
-
-Not a generated runtime — built from the React welcome view:
-
-```bash
-bun run build:html   # examples/react/script/generate-static.tsx
-```
-
-Writes `examples/html/index.html`, `examples/html/about/index.html` with relative asset links.
-
-## Runtime selection at generate time
-
-```bash
-bun src/infrastructure/cli.ts generate --runtimes react,svelte
-```
-
-Valid values: `templ`, `react`, `svelte`, `vue`, `solid`, `latte`, `twig` (comma-separated). Default: all seven.
-
-## Parity policy per runtime
-
-| Runtime | Parity test | Skipped when |
-|---------|-------------|--------------|
-| React, Svelte, Vue, Solid | `tests/parity.test.ts` | never (always run) |
-| Go Templ | `tests/parity.templ.test.ts` | `go` not on PATH |
-| Latte | `tests/parity.latte.test.ts` | PHP or Composer unavailable |
-| Twig | `tests/parity.twig.test.ts` | PHP or Composer unavailable |
-
-PHP parity excludes the three structurally complex parts symmetrically with the emitters.
+All eight targets are generated from the same specs. React is the reference DOM; the other runtimes are compared with it.
+
+| Runtime | Package dir | Name | Consume |
+|---|---|---|---|
+| Svelte 5 | `packages/svelte/ui` | `@ui8kit/svelte-ui` | import from the package (Vite + `@sveltejs/vite-plugin-svelte`); `@import "@ui8kit/svelte-ui/styles/index.css"` |
+| React 19 | `packages/react/ui` | `@ui8kit/react-ui` | Vite or any bundler that compiles TSX |
+| Vue 3 | `packages/vue/ui` | `@ui8kit/vue-ui` | `@vitejs/plugin-vue` |
+| SolidJS 1.9 | `packages/solid/ui` | `@ui8kit/solid-ui` | `vite-plugin-solid` |
+| Go templ | `packages/templ/ui` | `github.com/ui8kit/codegen/packages/templ/ui` | `templ generate && go build` (templ v0.3.1070 pinned in `go.mod`: use `go run github.com/a-h/templ/cmd/templ@v0.3.1070 generate`) |
+| Twig | `packages/twig/ui` | `@ui8kit/twig-ui` | `composer install`, register the extension, a loader rooted at `ui/` |
+| Latte | `packages/latte/ui` | `@ui8kit/latte-ui` | `composer install`, the Latte extension in `php/` |
+| Jinja2 | `packages/jinja2/ui` | `@ui8kit/jinja2-ui` | `pip install -r requirements.txt`, the `ui8kit_jinja` helpers in `py/`, a loader rooted at `ui/` |
+
+Layout of a TypeScript package: `src/primitives/<brick>/` (bricks), `src/components/` (parts and patterns),
+`src/blocks/` (organisms), `src/presets/`, `src/utils/` (`cn`, `variants`, formatting helpers), `src/styles/`
+(`theme.css` tokens, `kit.css`, `index.css`). File names are kebab-case (`sheet-trigger.svelte`, `theme-toggle.tsx`).
+
+Layout of a template package: `ui/<brick>/` (bricks), `blocks/` (organisms), helpers (`utils/` in Go, `php/` in PHP,
+`py/ui8kit_jinja/` in Python), and the variant tables as JSON next to the templates.
+
+Styles: Tailwind v4 with shadcn tokens (`theme.css`), skins override variables only (`packages/shared/app/src/styles/skins.css`,
+sources in `xgen/runtimes/core/assets/styles/skins`). Add `@source` for the package or template folder so Tailwind sees
+every class.
+
+What does not carry over between runtimes (context, `$bindable`, attachments, raw HTML, `v-model`) and the explicit
+contract that replaces it: `xgen/specs/_nonportable.json`, checked by the `nonportable` group.
diff --git a/docs/specs-guide.md b/docs/specs-guide.md
new file mode 100644
index 0000000..002682f
--- /dev/null
+++ b/docs/specs-guide.md
@@ -0,0 +1,345 @@
+# Authoring specs for xgen: a practical guide
+
+This guide is for someone new to the repo who has to add or change UI. In ui8kit you never write the
+components themselves. You write **specs**, and `xgen` generates the same UI for eight runtimes:
+
+| Runtime | Package | Host app |
+|---|---|---|
+| Svelte 5 | `packages/svelte/ui` | `apps/host-svelte` (port 5180) |
+| React 19 | `packages/react/ui` | `apps/host-react` (5181) |
+| Vue 3 | `packages/vue/ui` | `apps/host-vue` (5182) |
+| Solid | `packages/solid/ui` | `apps/host-solid` (5183) |
+| Go templ | `packages/templ/ui` | none (server templates) |
+| Twig (PHP) | `packages/twig/ui` | none |
+| Jinja2 (Python) | `packages/jinja2/ui` | none |
+| Latte (PHP) | `packages/latte/ui` | none |
+
+The four TypeScript runtimes have host apps that serve every screen. The four template runtimes (templ, Twig, Jinja2,
+Latte) are checked by rendering every brick and block case with the real engine and comparing the DOM with React.
+
+## 1. The golden rules
+
+1. **Never edit a generated file.** Everything under `packages/*/ui`, `packages/shared/app` and `apps/host-*` starts with
+   `Code generated by xgen. DO NOT EDIT.` and has a `Source:` line naming the spec it came from. `bun run check` (group
+   `drift`) regenerates everything in memory and fails on any difference. Fix the spec, the builder or the emitter, then
+   run `bun run build`.
+2. **No literal text in views.** Every visible or announced word is a key in the dictionary `xgen/content/ui/en.json`
+   (or a prop the organism receives).
+3. **No Cyrillic** in any tracked file (group `text` scans `git ls-files`).
+4. **Tags come from primitives only.** A view never names an HTML element directly (section 4).
+5. **One `Block` per render path**, at the top of the file, with a semantic tag (section 4).
+6. **Spacing on the 8 px grid**, 4 px steps only inside controls (section 8).
+
+## 2. Where specs live
+
+| What | Where | Written as | Generated into |
+|---|---|---|---|
+| Bricks (primitives) | `xgen/specs/ui/<name>.json` + `<name>.variants.json` | JSON by hand | `src/primitives/` (TS runtimes), `ui/` (template runtimes) |
+| Parts (small pieces) | `xgen/specs/parts/*.json` | **TypeScript builder**: `xgen/screens/src/authoring/components/` | `src/components/` |
+| Patterns (composite widgets) | `xgen/specs/patterns/*.json` | builder, same folder | `src/components/` |
+| Organisms (page sections) | `xgen/specs/organisms/*.json` | builder: `xgen/screens/src/authoring/blocks/` | `src/blocks/` (`blocks/` in template runtimes) |
+| Blocks (organism + axes + variants) | `xgen/specs/blocks/*.json` | builder: `xgen/screens/src/authoring/gallery/blocks*.ts` | gallery, catalog and theme screens |
+| Recipes (variant tables of organisms) | `xgen/specs/recipes/*.variants.json` | JSON | next to the component |
+| Presets (named layout classes) | `xgen/specs/presets/defaults.json` | builder: `authoring/presets/` | `src/presets/` |
+| Screens | `xgen/specs/screens/*.json` | builder: `authoring/screens/`, `authoring/gallery/` | `apps/host-*/xgen/screens/` |
+| Fixtures (sample data) | `xgen/fixtures/*.json` | JSON | `packages/shared/app` |
+| Content (dictionary) | `xgen/content/ui/en.json` | JSON (+ tools) | `packages/shared/app` |
+
+The tiers are: **bricks** (primitives, the only place that knows HTML tags) -> **parts / patterns** (components) ->
+**organisms** (blocks). Organism ids say their tier: `organism.*`, `part.*`, `pattern.*`.
+
+Important: the JSON in `specs/organisms`, `specs/parts`, `specs/patterns`, `specs/blocks`, `specs/presets` and
+`specs/screens` is **written by `bun run build` from the TypeScript builder**. The `authored` group of `bun run check`
+fails when the stored JSON differs from the builder. Edit the `.ts` file, not the JSON. Only bricks
+(`specs/ui`), recipes, fixtures and content are edited as JSON.
+
+## 3. Anatomy of the specs
+
+### 3.1 A brick (`xgen/specs/ui/badge.json`, abridged)
+
+```jsonc
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.badge",            // ui.<name>
+  "tier": "brick",
+  "dir": "badge",              // folder of the generated files
+  "variants": { "badge": "badge.variants.json" },
+  "parts": [{
+    "name": "Badge",
+    "recipeId": "badge",
+    "classes": { "recipe": { "size": "Size", "variant": "Variant" } },   // recipe key -> prop
+    "props": [
+      { "name": "Variant", "type": "string", "cva": true, "docs": "color preset: default, secondary, destructive, outline" },
+      { "name": "Size", "type": "string", "cva": true },
+      { "name": "Class", "type": "string", "cva": false, "docs": "adds Tailwind utilities" },
+      { "name": "Attrs", "type": "attrs", "cva": false },     // every other attribute, ARIA included
+      { "name": "Children", "type": "children", "cva": false }
+    ],
+    "render": {                                             // the typed render tree
+      "kind": "element", "tag": { "kind": "static", "tag": "div" },
+      "attrs": [{ "kind": "class" }, { "kind": "static", "name": "data-slot", "value": "badge" }, { "kind": "rest" }],
+      "children": [{ "kind": "slot" }]
+    },
+    "a11y": { "roots": ["div"], "roles": [], "aria": [], "keyboard": [] },
+    "tokens": ["--border", "--primary"]
+  }],
+  "examples": [{ "id": "size.lg", "props": { "Size": "lg", "Variant": "default" } }]   // become parity cases
+}
+```
+
+Brick props use PascalCase (`Variant`, `Size`, `Class`, `Attrs`). The `examples` become the brick cases that every runtime
+must render identically.
+
+### 3.2 Variants and sizes (`badge.variants.json`)
+
+```json
+{
+  "id": "ui.badge",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+  "keys": ["size", "variant"],
+  "defaults": { "size": "default", "variant": "default" },
+  "byKey": {
+    "size": { "sm": "h-5 px-2 text-xs", "default": "h-6 px-3 text-xs", "lg": "h-8 px-4 text-sm" },
+    "variant": { "default": "bg-primary text-primary-foreground inset-ring-primary", "secondary": "bg-muted text-foreground inset-ring-transparent" }
+  },
+  "compound": []
+}
+```
+
+This is a CVA table: `base` + one class string per key value + optional `compound` rows. Controls share one size scale:
+`sm / default / lg` = `h-8 / h-10 / h-12`. Organisms have their own tables in `xgen/specs/recipes/` and read them with
+the `recipe` op (example from `pattern.file-tree-item`: `recipes: { fileTreeItem: "file-tree-item" }` and
+`{ "op": "recipe", "args": ["fileTreeItem", "kind", { "$": "kind" }] }`).
+
+### 3.3 An organism (builder: `xgen/screens/src/authoring/blocks/promo.ts`)
+
+```ts
+const announcementBar = spec("organism.announcement-bar", "AnnouncementBar", "A thin strip above the page ...", {
+  props: [
+    { name: "label", type: "string", required: true, docs: "accessible name of the strip" },
+    { name: "text", type: "string", required: true },
+    { name: "tone", type: tone, default: "default" },                    // a union type = a block axis
+    { name: "layout", type: tsOf("center", "split"), default: "center" },
+  ],
+  view: [
+    use("Block", { props: { Tag: "aside", Class: cn("w-full", cond(eq(ref("tone"), "muted"), "bg-muted text-foreground", "bg-primary text-primary-foreground")) },
+                   attrs: { "aria-label": ref("label"), "data-testid": "announcement" } },
+      use("Container", { props: { Class: "mx-auto w-full max-w-6xl px-4" } },
+        use("Text", { props: { Size: "sm" } }, text(ref("text"))))),
+  ],
+});
+```
+
+Builder functions (`xgen/screens/src/build.ts`):
+
+| Function | Meaning |
+|---|---|
+| `use(Name, { props, attrs }, ...children)` | a primitive (or part) |
+| `text(value)` | a text node; the value is a prop, a dictionary key or an expression, never a literal word |
+| `ref("x")` | the prop `x`; `ref("ui.some.key")` is a dictionary key |
+| `when(test, then, else?)` | if / else |
+| `each(items, "item", key, ...body)` | a loop |
+| `slot(name, ...args)`, `organism(Name, props, { slots, on })` | slots and nested organisms |
+| `cn`, `cond`, `eq`, `and`, `or`, `not`, `coalesce`, `len`, `money`, `preset`, ... | expressions (ops) |
+
+Prop types: `"string"`, `"number"`, `"boolean"`, `{ ts: '"a" \| "b"' }` (`tsOf("a", "b")`), `{ record: "Name" }`
+(a record declared in `records`). Organism props use camelCase JSON names; templates also accept `className`.
+
+### 3.4 A block (builder: `xgen/screens/src/authoring/gallery/blocks-more.ts`)
+
+```ts
+const announcement = define({
+  key: "announcement", theme: "promo", group: "banner", name: "Announcement bar", docs: "A thin strip above the page with one sentence and a link.",
+  organism: "AnnouncementBar", axes: ["tone", "layout", "dismiss", "badge", "position"],   // props with a union type
+  variants: [
+    ["bar", "Primary strip"],                                         // [id, label, axis values?, case props?]
+    ["muted", "Muted strip", { tone: "muted" }],
+    ["shop", "Shop: free shipping, muted", { tone: "muted", dismiss: "show" }, annCase("shop")],
+  ],
+  sample: { label: t("promo.announcement.label"), text: t("promo.announcement.text"), ctaHref: "#/pricing" },
+});
+```
+
+`t("promo.announcement.text")` is the dictionary key `ui.promo.announcement.text`. The allowed axis values and
+defaults are read from the organism, so a block cannot disagree with it. Optional `facts` describe what each variant must
+show in the browser (`{ sel: '[data-testid="item"]', n: 3 }`), and the e2e checks them.
+
+## 4. Tags, primitives and Block
+
+Composition (organisms, parts, patterns, screens) never writes an HTML tag. Pick the primitive and its `Tag`/`As` prop
+(full rule: `.cursor/rules/01-block-root.mdc`):
+
+| Primitive | Tags |
+|---|---|
+| `Block` | `div` (default), `section`, `article`, `aside`, `header`, `footer`, `main`, `nav`, `figure`, `search`, `hgroup` |
+| `Box` | `div` only, never a wrapper or a root |
+| `Container` | `div`, `main`, `section` |
+| `Stack` | `div`, `ul`, `ol` |
+| `Group` | `div`, `fieldset`, `dl` |
+| `List` / `ListItem` | `ul`, `ol`, `dl`, `menu` / `li`, `dt`, `dd` |
+| `Title` | `h1`..`h6` (`As` 1..6) |
+| `Text` | `p` (default), `blockquote`, `figcaption`, `address`, `pre`, inline elements |
+| `Inline` | `span` |
+
+Plus `Button`, `Link`, `LinkPlain`, `Card*`, `Grid`, `Image`, `LucideIcon`, `Input`, `Select`, `Table*`, `Dialog` and the rest
+of `xgen/specs/ui` (40 bricks, 72 parts). There are **no extra primitives** such as `Nav`, `Header`, `Article`: landmarks
+and sectioning come only from `Block` with a semantic `Tag`. Do not add a primitive for one use.
+
+Block rules (detector `block-root` of `bun run rules`):
+
+- An organism (blocks) opens on `Block` with a semantic tag (`section`, `aside`, `header`, ...).
+- At most **one `Block` per render path**. Mutually exclusive branches of `when(...)` may each have their own Block.
+- Never a `Block` nested in another `Block` of the same component, never in an `each` loop. Need one there? Make it a
+  separate part (for example `NavBlock`, `FigureBlock`, `ArticleBlock` in `authoring/components/landmarks.ts`).
+
+## 5. Text, the dictionary and landmark labels
+
+- Texts live in `xgen/content/ui/en.json`. A view reads them by key (`ref("ui.promo.announcement.text")`, or `t(...)`
+  in block files). The `dictionary` group fails when a key is read but missing, or exists but nobody reads it.
+- The names, notes and variant labels of blocks are copied into the dictionary by a tool. Run it after adding or
+  renaming a block or variant: `bun xgen/screens/tools/author-block-texts.ts`.
+- **Landmark labels.** Every organism whose view holds a landmark automatically gets an optional prop `landmarkLabel`
+  (`authoring/landmarks.ts`). It replaces the root landmark's accessible name, so a page that shows the same block twice
+  still has distinct landmarks. Give your root landmark a name anyway: `attrs: { "aria-label": ref("title") }` or
+  `aria-labelledby` pointing at the heading.
+
+## 6. ARIA
+
+ARIA goes through `attrs` (`Attrs` on bricks); there are no role props. Prefer static ARIA (`"aria-hidden": "true"`,
+`role: "group"`) or a name from a prop. A reactive ARIA state (`aria-expanded` computed from state) is reported by the
+`reactive-aria` detector; existing cases are recorded in `rules/baselines/*.json`, new ones fail.
+
+## 7. Presets
+
+`xgen/specs/presets/defaults.json` holds named class sets for the geometry of blocks (`hero.band`, `text.tiny`, ...).
+Read them with `preset("defaults", "hero.band")` in the builder. Swapping the preset resizes every block that uses it.
+
+## 8. Spacing and style policy
+
+- **8 + 4:** layout spacing (`gap`, `p*`, `m*`, `space-*`, `inset`, sizes) uses even Tailwind steps (8 px grid: `gap-2`,
+  `p-4`, `py-16`). Odd steps (4 px: `gap-1`, `px-3`) are allowed only inside controls (the `controls` scope in
+  `.ui8px/policy/scopes.json`). Hairlines `gap-px`/`p-px` are allowed.
+- `bun run lint:px` extracts every class set of the specs and fails on any blocking hit (`UI8PX001`, `UI8PX003`,
+  `UI8PX005`, `GRID`). The ratchet in `.ui8px/gate.json` is `max: 0`. `UI8PX002` and `UI8PX004` are report-only.
+- `bun run check` adds: one corner token (plain `rounded`), shadows only on floating layers, no arbitrary values or
+  palette colors (`hardcode`), Tailwind-step spacing keys (`spacing`), size limits (`readability`).
+
+## 9. Commands
+
+```sh
+bun run build                 # specs -> all 8 runtimes, shared app, host apps (also rewrites authored JSON)
+bun run check                 # every gate; includes drift, rules, and real-engine parity for templ/solid/twig/jinja2/latte
+bun run test                  # bun test of xgen/*
+bun run lint:px               # spacing gate
+bun run rules:baseline        # rewrite rules/zones.json and rules/baselines after an accepted change
+bun run build:hosts           # vite build of the 4 host apps (needed before e2e)
+XGEN_E2E_ONLY=blocks,theme-promo-campaign bun run e2e   # browser e2e of some screens; without the variable: all
+bun run check:all             # everything above in order
+```
+
+The template runtimes need their toolchains: Go for templ, PHP 8.2+ with composer for Twig and Latte, Python 3 for Jinja2.
+Without them the group prints `skipped: ...` locally. With `UI8KIT_REQUIRE_ALL_RUNTIMES=1` (CI) a skip is a failure.
+The pre-push hook (`bun run hooks:install`) runs `bun run check` and the audit. Never bypass it.
+
+## 10. Reading `bun run check` output
+
+Each group prints `ok` or `FAIL` and then one line per problem, with the file and what to do:
+
+```
+FAIL  themes   every theme is a screen spec, every block is used by a theme, ...
+        block keyfigure: not used by any theme screen; add it to a page in screens/src/authoring/screens/themes.ts
+```
+
+Common failures:
+
+| Message | Fix |
+|---|---|
+| `drift: ... differs from the generated file (run: bun run build)` | run `bun run build`; if it persists, someone edited a generated file: revert it |
+| `authored: ... differs` | you edited JSON in `specs/organisms` etc. Edit the builder `.ts` instead and build |
+| `CatalogScreen: <block>.<variant> is in no category` | add the block to a category in `authoring/gallery/catalog.ts` |
+| `block <key>: not used by any theme screen` | add a variant to a page in `authoring/screens/themes.ts` |
+| `dead: <block>.json: no facts and no branch in ... e2e` | add `facts` to the block, or a case in `xgen/check/src/e2e/generic.ts` |
+| `dictionary: key ... missing` / `not read` | add or remove the key in `en.json`; rerun `author-block-texts.ts` for block labels |
+| `rules/zones.json: differs ...; run: bun run rules:baseline` | a new generated file joined a zone: run it and commit the result |
+| `rules: <file>:<line> block-root ...` | a second/nested Block, or a root that is not Block: restructure or extract a part |
+| `twig/jinja2/latte/templ: <case>: DOM differs` with a `react:` / `<runtime>:` pair | an emitter bug or an op the runtime lacks; compare the two lines |
+| `xgen build: N problem(s) in the inputs, nothing written` | the build refused invalid specs; the lines above say which |
+
+## 11. Walkthrough: a new organism end to end
+
+This was done in a scratch branch on 2026-10-13 and passed `bun run check`, `bun run lint:px` and
+`XGEN_E2E_ONLY=theme-promo-campaign bun run e2e`. The example adds `KeyFigure`, a section showing one big number.
+
+**Step 1. Write the organism** in a new file `xgen/screens/src/authoring/blocks/key-figure.ts`:
+
+```ts
+import { cn, cond, eq, ref, text, use, when } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { spec } from "../kit";
+import { tsOf } from "../props";
+
+const keyFigure = spec("organism.key-figure", "KeyFigure", "One big number with a caption and a short note. Axes: tone (default, muted), align (start, center).", {
+  props: [
+    { name: "title", type: "string", required: true, docs: "heading of the section" },
+    { name: "value", type: "string", required: true, docs: "the figure, already formatted" },
+    { name: "caption", type: "string", required: true },
+    { name: "note", type: "string" },
+    { name: "tone", type: tsOf("default", "muted"), default: "default" },
+    { name: "align", type: tsOf("start", "center"), default: "start" },
+  ],
+  view: [
+    use("Block", { props: { Tag: "section", Class: cn("w-full py-16", cond(eq(ref("tone"), "muted"), "bg-muted", "")) }, attrs: { "aria-label": ref("title"), "data-testid": "key-figure" } },
+      use("Container", { props: { Class: "mx-auto w-full max-w-6xl px-4" } },
+        use("Stack", { props: { Gap: "2", Class: cond(eq(ref("align"), "center"), "items-center text-center", "items-start") } },
+          use("Title", { props: { As: 2, Size: "lg" } }, text(ref("title"))),
+          use("Text", { props: { Size: "5xl", Weight: "bold" }, attrs: { "data-testid": "key-figure-value" } }, text(ref("value"))),
+          use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("caption"))),
+          when(ref("note"), [use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(ref("note")))])))),
+  ],
+});
+
+export const keyFigureOrganisms: OrganismSpec[] = [keyFigure];
+```
+
+**Step 2. Register it** in `authoring/blocks/organisms.ts`: import `keyFigureOrganisms` and add `...keyFigureOrganisms`
+to `allOrganisms`.
+
+**Step 3. Define the block** in `authoring/gallery/blocks-more.ts` (and add `keyFigure` to `moreBlocks` at the bottom):
+
+```ts
+const keyFigure = define({
+  key: "keyfigure", theme: "promo", group: "banner", name: "Key figure", docs: "One big number with a caption.",
+  organism: "KeyFigure", axes: ["tone", "align"],
+  variants: [["start", "Number on the left"], ["center", "Centered, muted", { align: "center", tone: "muted" }]],
+  facts: [{ sel: '[data-testid="key-figure-value"]', n: 1 }],
+  sample: { title: t("promo.keyfigure.title"), value: "98%", caption: t("promo.keyfigure.caption"), note: t("promo.keyfigure.note") },
+});
+```
+
+**Step 4. Add the texts** to `xgen/content/ui/en.json` under `promo`:
+
+```json
+"keyfigure": { "title": "Customer satisfaction", "caption": "of customers would recommend us", "note": "Survey of 1200 customers, 2026." }
+```
+
+then copy the block name and variant labels into the dictionary: `bun xgen/screens/tools/author-block-texts.ts`.
+
+**Step 5. Build and read the check.** `bun run build` refuses at first:
+`CatalogScreen: keyfigure.start is in no category`. `bun run check` also reports the theme and `dead` problems from the
+table in section 10. Fix them:
+
+- `authoring/gallery/catalog.ts`: `...all("announcement", "cookie", "keyfigure")` in the `promo-banners` category;
+- `authoring/screens/themes.ts`: add `"keyfigure.start"` and `"keyfigure.center"` to pages of the promo theme;
+- the `facts` in step 3 cover the `dead` group (or add a case in `xgen/check/src/e2e/generic.ts`).
+
+**Step 6. Build again, then refresh the zones**: `bun run build`, then `bun run rules:baseline` (the new
+`blocks/key-figure.*` files join the block-root zone in `rules/zones.json`).
+
+**Step 7. Verify**: `bun run check` (all groups ok, including real Twig/Jinja2/Latte/templ parity of the new block
+cases), `bun run test`, `bun run lint:px`, then `bun run build:hosts` and
+`XGEN_E2E_ONLY=blocks,theme-promo-campaign bun run e2e`.
+
+**Step 8. Commit** the builder files, `en.json`, the generated JSON specs (`specs/organisms/key-figure.json`,
+`specs/blocks/keyfigure.json`, the changed screens), all generated packages and apps, and `rules/zones.json`. Push
+through the normal hook.
diff --git a/docs/testing-and-ci.md b/docs/testing-and-ci.md
deleted file mode 100644
index c779d35..0000000
--- a/docs/testing-and-ci.md
+++ /dev/null
@@ -1,201 +0,0 @@
-# Testing and CI
-
-## Philosophy
-
-The **canonical renderer** (`src/domain/render.ts`) is the executable DOM specification. Parity tests server-render every generated component and assert normalized HTML equals the canonical output for:
-
-- Every brick
-- Every part (or every PHP-supported part)
-- Default props + every showcase fixture from `*.data.json`
-
-No per-runtime test authoring is needed when adding bricks — fixtures drive cases automatically.
-
-## Test suites
-
-| File | What it tests |
-|------|---------------|
-| `tests/domain.test.ts` | Recipe composition, tag resolution, expression evaluation, naming, validation |
-| `tests/emitters.test.ts` | Structural conventions in generated code (syntax idioms, embeds, escape hatches) |
-| `tests/parity.test.ts` | React 19 + Svelte 5 + Vue 3 DOM parity (always runs) |
-| `tests/parity.templ.test.ts` | Go Templ DOM parity via `cmd/parity` harness |
-| `tests/parity.latte.test.ts` | Latte DOM parity via `cmd/parity-latte` |
-| `tests/parity.twig.test.ts` | Twig DOM parity via `cmd/parity-twig` |
-
-### Running tests
-
-```bash
-bun test                  # all suites
-bun run test:watch        # watch mode
-bun run verify            # check + typecheck + tests (CI)
-```
-
-### Test infrastructure
-
-| Module | Role |
-|--------|------|
-| `tests/global-setup.ts` | Vitest: regenerate `generated/` before run |
-| `tests/preload-bun.ts` | Bun: Svelte SSR + Vue SFC compile plugins |
-| `tests/support/ensure-generated.ts` | Write `generated/` once per process |
-| `tests/support/fixtures.ts` | Load `*.data.json` showcase cases |
-| `tests/support/normalize.ts` | HTML normalization for fair comparison |
-| `tests/support/props.ts` | Map canonical props → runtime-specific props |
-| `tests/support/generated-ui.ts` | Dynamic import of generated React/Svelte/Vue modules |
-| `tests/support/php.ts` | PHP toolchain detection, Composer install, parity runner |
-
-## Parity harnesses
-
-### TypeScript runtimes (`parity.test.ts`)
-
-For each brick × part × fixture:
-
-1. Build canonical HTML via `renderPart()`.
-2. Server-render generated component:
-   - React: `react-dom/server` `renderToStaticMarkup`
-   - Svelte: `svelte/server` `render`
-   - Vue: `@vue/server-renderer` `renderToString`
-3. Compare `normalizeHtml(actual)` vs `normalizeHtml(expected)`.
-
-Children fixture text: `"Content"` when the part has a children prop.
-
-### Go Templ (`parity.templ.test.ts`)
-
-1. `templ generate` + `go mod tidy` in `generated/`.
-2. Pipe JSON cases to `go run ./cmd/parity`.
-3. Compare results to canonical renderer.
-
-**Skipped when:** `go version` fails.
-
-Timeout: 300 seconds (Templ compile + Go build).
-
-### PHP Latte / Twig (`parity.latte.test.ts`, `parity.twig.test.ts`)
-
-1. Build cases for PHP-supported parts only (`phpSupported(part).ok`).
-2. `composer install` in `generated/` if vendor missing.
-3. Pipe JSON to `php cmd/parity-latte/main.php` or `cmd/parity-twig/main.php`.
-4. Compare results to canonical renderer.
-
-**Skipped when:** PHP unavailable, or Composer unavailable and `php/vendor` not installed.
-
-Timeout: 120 seconds per suite.
-
-### Harness JSON protocol
-
-**Input** (stdin): array of cases
-
-```json
-[
-  {
-    "template": "button/Button.latte",
-    "props": { "variant": "default", "size": "sm" },
-    "attrs": {},
-    "children": "Content"
-  }
-]
-```
-
-**Output** (stdout): array of HTML strings in the same order.
-
-Go Templ harness uses `name` instead of `template`: `"button/button/Button"`.
-
-## Emitter convention tests
-
-`tests/emitters.test.ts` checks properties DOM parity cannot see:
-
-- Templ: boolean attr syntax, `Attrs` spread, `//go:embed`, `ButtonClasses` export
-- React: `forwardRef`, `Slot`, `cn` import
-- Svelte: runes, snippet children
-- Vue: `inheritAttrs: false`
-- Latte/Twig: `n:attr` / `ui8kit_attr_str`, parameter blocks
-
-Runs `generateFiles(bricks)` in-memory — no disk write required.
-
-## Domain unit tests
-
-Cover:
-
-- `composeRecipe` / `validateRecipe`
-- Expression evaluators (`cond`, `mapOr`, `oneOfOr`, …)
-- `resolveTag`, `titleTag`
-- `validateBrick` error cases
-- `renderPart` smoke cases
-
-## CI (GitHub Actions)
-
-Workflow: `.github/workflows/ci.yml`
-
-```yaml
-name: CI
-on:
-  push:
-    branches: [main]
-  pull_request:
-
-jobs:
-  verify:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v2
-      - uses: actions/setup-go@v5
-        with:
-          go-version: "1.25"
-      - uses: shivammathur/setup-php@v2
-        with:
-          php-version: "8.3"
-          tools: composer
-      - run: bun install --frozen-lockfile
-      - run: bun run verify
-```
-
-### What `bun run verify` exercises in CI
-
-1. **Definition validation** — all 33 bricks, 63 parts
-2. **Engine TypeScript** — strict mode, no emit
-3. **Generated TypeScript** — full regenerate + typecheck React outputs
-4. **All test suites** including:
-   - Domain units
-   - Emitter conventions
-   - React/Svelte/Vue parity (all 63 parts)
-   - Go Templ parity (all 63 parts)
-   - Latte parity (60 PHP-supported parts)
-   - Twig parity (60 PHP-supported parts)
-
-CI installs Go 1.25, PHP 8.3, and Composer so optional local skips do not apply.
-
-## Local toolchain gaps
-
-| Missing tool | Effect |
-|--------------|--------|
-| Go | `parity.templ.test.ts` skipped |
-| PHP | Latte/Twig parity skipped |
-| Composer (no vendor) | Latte/Twig parity skipped |
-
-React/Svelte/Vue parity always runs — core guarantee.
-
-## Adding test coverage for a new brick
-
-1. Add `bricks/<name>/<name>.data.json` with showcase fixtures (optional but recommended).
-2. `bun run check` + `bun test` — parity cases appear automatically.
-
-No changes to test files required unless the new brick introduces a novel runtime concern.
-
-## Debugging parity failures
-
-1. Identify failing label: `{brick.id} {part.name} · {fixture.id}`.
-2. Reproduce canonical output:
-
-   ```ts
-   import { renderPart } from "./src/domain/render";
-   // renderPart(brick, "Button", { Variant: "ghost" }, { children: "Content" })
-   ```
-
-3. Inspect generated file in `generated/ui/<brick>/`.
-4. For PHP: run harness manually:
-
-   ```bash
-   cd generated
-   echo '[{"template":"button/Button.latte","props":{},"attrs":{},"children":""}]' \
-     | php cmd/parity-latte/main.php
-   ```
-
-5. Compare raw HTML before normalization if class order differs cosmetically.
diff --git a/examples/README.md b/examples/README.md
deleted file mode 100644
index f6b59e7..0000000
--- a/examples/README.md
+++ /dev/null
@@ -1,65 +0,0 @@
-# Codegen examples — eight welcome screens
-
-Local preview for **generated** `ui/` primitives. Same shadcn tokens and
-welcome layout on all eight surfaces (seven codegen runtimes + static HTML).
-
-| Path | Runtime | Dev command | URL |
-|------|---------|-------------|-----|
-| [`html/`](html/) | Static HTML export | `bun run build:html` | open `html/index.html` |
-| [`templ/`](templ/) | Go Templ + HTTP | `bun run dev:templ` | http://127.0.0.1:8080 |
-| [`react/`](react/) | React 19 + Vite | `bun run dev:react` | http://127.0.0.1:5173 |
-| [`svelte/`](svelte/) | Svelte 5 + Vite | `bun run dev:svelte` | http://127.0.0.1:5174 |
-| [`vue/`](vue/) | Vue 3 + Vite | `bun run dev:vue` | http://127.0.0.1:5175 |
-| [`latte/`](latte/) | Latte + PHP server | `bun run dev:latte` | http://127.0.0.1:5176 |
-| [`twig/`](twig/) | Twig + PHP server | `bun run dev:twig` | http://127.0.0.1:5177 |
-| [`solid/`](solid/) | SolidJS + Vite | `bun run dev:solid` | http://127.0.0.1:5178 |
-
-Shared assets live under [`web/static/`](web/static/) (CSS tokens, Tailwind
-output). Copy and feature text in [`data/welcome.json`](data/welcome.json).
-
-All previews import from [`../generated/ui/`](../generated/ui/) — run
-`bun run generate` in the parent package first. The PHP previews
-(`dev:latte`, `dev:twig`) need `php` ≥ 8.1 and `composer` (deps install into
-`../generated/php/vendor` automatically).
-
-The static export ([`react/script/generate-static.tsx`](react/script/generate-static.tsx))
-renders the React welcome view with `renderToStaticMarkup`, wraps it in a
-plain HTML shell, and writes one directory per route — `html/index.html`,
-`html/about/index.html` — with relative links to `html/static/`.
-
-## Quick start
-
-From `ui8kit-codegen/`:
-
-```bash
-bun run generate          # emit generated/ui (if missing)
-cd examples && bun install
-bun run build:css         # Tailwind → web/static/css/app.css
-bun run dev:templ         # or dev:react / dev:svelte / dev:vue / dev:solid
-```
-
-Or from `ui8kit-codegen/` root (after `examples` deps are installed):
-
-```bash
-bun run dev:templ
-bun run dev:react
-bun run dev:svelte
-bun run dev:vue
-bun run dev:solid
-```
-
-## Layout
-
-| Path | Role |
-|------|------|
-| `data/welcome.json` | Runtime-neutral copy and port map |
-| `web/static/css/tokens.css` | shadcn-compatible CSS variables |
-| `web/static/css/input.css` | Tailwind `@source` for generated + example files |
-| `templ/welcome.templ` | Go Templ welcome block |
-| `react/src/Welcome.tsx` | React twin |
-| `react/script/generate-static.tsx` | Static HTML export (routes + relative links) |
-| `svelte/src/Welcome.svelte` | Svelte twin |
-| `vue/src/Welcome.vue` | Vue twin |
-| `solid/src/Welcome.tsx` | Solid twin |
-| `latte/templates/welcome.latte` | Latte twin (generated `.latte` includes) |
-| `twig/templates/welcome.html.twig` | Twig twin (generated `.html.twig` includes) |
diff --git a/examples/bun.lock b/examples/bun.lock
deleted file mode 100644
index d8623c4..0000000
--- a/examples/bun.lock
+++ /dev/null
@@ -1,468 +0,0 @@
-{
-  "lockfileVersion": 1,
-  "configVersion": 1,
-  "workspaces": {
-    "": {
-      "name": "ui8kit-codegen-examples",
-      "dependencies": {
-        "clsx": "^2.1.1",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "svelte": "^5.19.0",
-        "tailwind-merge": "^2.6.0",
-        "vue": "^3.5.13",
-      },
-      "devDependencies": {
-        "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "@tailwindcss/cli": "^4.2.1",
-        "@types/react": "^19.0.8",
-        "@types/react-dom": "^19.0.3",
-        "@vitejs/plugin-react": "^4.5.2",
-        "@vitejs/plugin-vue": "^5.2.1",
-        "sirv": "^3.0.1",
-        "tailwindcss": "^4.2.1",
-        "typescript": "^5.7.3",
-        "vite": "^6.3.5",
-      },
-    },
-  },
-  "packages": {
-    "@babel/code-frame": ["@babel/code-frame@7.29.7", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw=="],
-
-    "@babel/compat-data": ["@babel/compat-data@7.29.7", "", {}, "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg=="],
-
-    "@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-compilation-targets": "^7.29.7", "@babel/helper-module-transforms": "^7.29.7", "@babel/helpers": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA=="],
-
-    "@babel/generator": ["@babel/generator@7.29.7", "", { "dependencies": { "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ=="],
-
-    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.29.7", "", { "dependencies": { "@babel/compat-data": "^7.29.7", "@babel/helper-validator-option": "^7.29.7", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g=="],
-
-    "@babel/helper-globals": ["@babel/helper-globals@7.29.7", "", {}, "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA=="],
-
-    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.29.7", "", { "dependencies": { "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g=="],
-
-    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.29.7", "", { "dependencies": { "@babel/helper-module-imports": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7", "@babel/traverse": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg=="],
-
-    "@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.29.7", "", {}, "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw=="],
-
-    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.29.7", "", {}, "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw=="],
-
-    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
-
-    "@babel/helper-validator-option": ["@babel/helper-validator-option@7.29.7", "", {}, "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw=="],
-
-    "@babel/helpers": ["@babel/helpers@7.29.7", "", { "dependencies": { "@babel/template": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg=="],
-
-    "@babel/parser": ["@babel/parser@7.29.7", "", { "dependencies": { "@babel/types": "^7.29.7" }, "bin": "./bin/babel-parser.js" }, "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg=="],
-
-    "@babel/plugin-transform-react-jsx-self": ["@babel/plugin-transform-react-jsx-self@7.29.7", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw=="],
-
-    "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.29.7", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q=="],
-
-    "@babel/template": ["@babel/template@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg=="],
-
-    "@babel/traverse": ["@babel/traverse@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-globals": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/types": "^7.29.7", "debug": "^4.3.1" } }, "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw=="],
-
-    "@babel/types": ["@babel/types@7.29.7", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],
-
-    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="],
-
-    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.12", "", { "os": "android", "cpu": "arm" }, "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg=="],
-
-    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.12", "", { "os": "android", "cpu": "arm64" }, "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg=="],
-
-    "@esbuild/android-x64": ["@esbuild/android-x64@0.25.12", "", { "os": "android", "cpu": "x64" }, "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg=="],
-
-    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg=="],
-
-    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA=="],
-
-    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.12", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg=="],
-
-    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.12", "", { "os": "freebsd", "cpu": "x64" }, "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ=="],
-
-    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.12", "", { "os": "linux", "cpu": "arm" }, "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw=="],
-
-    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ=="],
-
-    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.12", "", { "os": "linux", "cpu": "ia32" }, "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA=="],
-
-    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng=="],
-
-    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw=="],
-
-    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.12", "", { "os": "linux", "cpu": "ppc64" }, "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA=="],
-
-    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w=="],
-
-    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.12", "", { "os": "linux", "cpu": "s390x" }, "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg=="],
-
-    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.12", "", { "os": "linux", "cpu": "x64" }, "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw=="],
-
-    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.12", "", { "os": "none", "cpu": "arm64" }, "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg=="],
-
-    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.12", "", { "os": "none", "cpu": "x64" }, "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ=="],
-
-    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.12", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A=="],
-
-    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.12", "", { "os": "openbsd", "cpu": "x64" }, "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw=="],
-
-    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.25.12", "", { "os": "none", "cpu": "arm64" }, "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg=="],
-
-    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.12", "", { "os": "sunos", "cpu": "x64" }, "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w=="],
-
-    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg=="],
-
-    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.12", "", { "os": "win32", "cpu": "ia32" }, "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ=="],
-
-    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.12", "", { "os": "win32", "cpu": "x64" }, "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA=="],
-
-    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
-
-    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
-
-    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
-
-    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
-
-    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
-
-    "@parcel/watcher": ["@parcel/watcher@2.5.1", "", { "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", "micromatch": "^4.0.5", "node-addon-api": "^7.0.0" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.1", "@parcel/watcher-darwin-arm64": "2.5.1", "@parcel/watcher-darwin-x64": "2.5.1", "@parcel/watcher-freebsd-x64": "2.5.1", "@parcel/watcher-linux-arm-glibc": "2.5.1", "@parcel/watcher-linux-arm-musl": "2.5.1", "@parcel/watcher-linux-arm64-glibc": "2.5.1", "@parcel/watcher-linux-arm64-musl": "2.5.1", "@parcel/watcher-linux-x64-glibc": "2.5.1", "@parcel/watcher-linux-x64-musl": "2.5.1", "@parcel/watcher-win32-arm64": "2.5.1", "@parcel/watcher-win32-ia32": "2.5.1", "@parcel/watcher-win32-x64": "2.5.1" } }, "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg=="],
-
-    "@parcel/watcher-android-arm64": ["@parcel/watcher-android-arm64@2.5.1", "", { "os": "android", "cpu": "arm64" }, "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA=="],
-
-    "@parcel/watcher-darwin-arm64": ["@parcel/watcher-darwin-arm64@2.5.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw=="],
-
-    "@parcel/watcher-darwin-x64": ["@parcel/watcher-darwin-x64@2.5.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg=="],
-
-    "@parcel/watcher-freebsd-x64": ["@parcel/watcher-freebsd-x64@2.5.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ=="],
-
-    "@parcel/watcher-linux-arm-glibc": ["@parcel/watcher-linux-arm-glibc@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA=="],
-
-    "@parcel/watcher-linux-arm-musl": ["@parcel/watcher-linux-arm-musl@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q=="],
-
-    "@parcel/watcher-linux-arm64-glibc": ["@parcel/watcher-linux-arm64-glibc@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w=="],
-
-    "@parcel/watcher-linux-arm64-musl": ["@parcel/watcher-linux-arm64-musl@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg=="],
-
-    "@parcel/watcher-linux-x64-glibc": ["@parcel/watcher-linux-x64-glibc@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A=="],
-
-    "@parcel/watcher-linux-x64-musl": ["@parcel/watcher-linux-x64-musl@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg=="],
-
-    "@parcel/watcher-win32-arm64": ["@parcel/watcher-win32-arm64@2.5.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw=="],
-
-    "@parcel/watcher-win32-ia32": ["@parcel/watcher-win32-ia32@2.5.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ=="],
-
-    "@parcel/watcher-win32-x64": ["@parcel/watcher-win32-x64@2.5.1", "", { "os": "win32", "cpu": "x64" }, "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA=="],
-
-    "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
-
-    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.27", "", {}, "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA=="],
-
-    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.62.2", "", { "os": "android", "cpu": "arm" }, "sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg=="],
-
-    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.62.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw=="],
-
-    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.62.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A=="],
-
-    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.62.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA=="],
-
-    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.62.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw=="],
-
-    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.62.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg=="],
-
-    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.62.2", "", { "os": "linux", "cpu": "arm" }, "sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg=="],
-
-    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.62.2", "", { "os": "linux", "cpu": "arm" }, "sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA=="],
-
-    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.62.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA=="],
-
-    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.62.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ=="],
-
-    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.62.2", "", { "os": "linux", "cpu": "none" }, "sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg=="],
-
-    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.62.2", "", { "os": "linux", "cpu": "none" }, "sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ=="],
-
-    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.62.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A=="],
-
-    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.62.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w=="],
-
-    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.62.2", "", { "os": "linux", "cpu": "none" }, "sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg=="],
-
-    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.62.2", "", { "os": "linux", "cpu": "none" }, "sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q=="],
-
-    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.62.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg=="],
-
-    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.62.2", "", { "os": "linux", "cpu": "x64" }, "sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A=="],
-
-    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.62.2", "", { "os": "linux", "cpu": "x64" }, "sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg=="],
-
-    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.62.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg=="],
-
-    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.62.2", "", { "os": "none", "cpu": "arm64" }, "sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA=="],
-
-    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.62.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg=="],
-
-    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.62.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q=="],
-
-    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.62.2", "", { "os": "win32", "cpu": "x64" }, "sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg=="],
-
-    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.62.2", "", { "os": "win32", "cpu": "x64" }, "sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA=="],
-
-    "@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.11", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-LFuZUkjJ9iF7JZye/aG5XM0SFcQ5VyL0oVX4WJ9dc0Va3R3s0OauX1BESVCb+YN/ol8TAfqGDDAQsTG627Y5kw=="],
-
-    "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@5.1.1", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1", "debug": "^4.4.1", "deepmerge": "^4.3.1", "kleur": "^4.1.5", "magic-string": "^0.30.17", "vitefu": "^1.0.6" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.0.0" } }, "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ=="],
-
-    "@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@4.0.1", "", { "dependencies": { "debug": "^4.3.7" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^5.0.0", "svelte": "^5.0.0", "vite": "^6.0.0" } }, "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw=="],
-
-    "@tailwindcss/cli": ["@tailwindcss/cli@4.3.2", "", { "dependencies": { "@parcel/watcher": "2.5.1", "@tailwindcss/node": "4.3.2", "@tailwindcss/oxide": "4.3.2", "enhanced-resolve": "5.21.6", "mri": "^1.2.0", "picocolors": "^1.1.1", "tailwindcss": "4.3.2" }, "bin": { "tailwindcss": "./dist/index.mjs" } }, "sha512-Fzt+HrIZHDlkRYKdLMBeufaroaPvwCBG70sMLdmurdeadNMO/LxbmT8Sbb+P83ep0iAlAImettb7Y+rO+37rXw=="],
-
-    "@tailwindcss/node": ["@tailwindcss/node@4.3.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "5.21.6", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.2" } }, "sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg=="],
-
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.2", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.2", "@tailwindcss/oxide-darwin-arm64": "4.3.2", "@tailwindcss/oxide-darwin-x64": "4.3.2", "@tailwindcss/oxide-freebsd-x64": "4.3.2", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2", "@tailwindcss/oxide-linux-arm64-musl": "4.3.2", "@tailwindcss/oxide-linux-x64-gnu": "4.3.2", "@tailwindcss/oxide-linux-x64-musl": "4.3.2", "@tailwindcss/oxide-wasm32-wasi": "4.3.2", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2", "@tailwindcss/oxide-win32-x64-msvc": "4.3.2" } }, "sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag=="],
-
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.2", "", { "os": "android", "cpu": "arm64" }, "sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA=="],
-
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w=="],
-
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ=="],
-
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA=="],
-
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.2", "", { "os": "linux", "cpu": "arm" }, "sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w=="],
-
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw=="],
-
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA=="],
-
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.2", "", { "os": "linux", "cpu": "x64" }, "sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w=="],
-
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.2", "", { "os": "linux", "cpu": "x64" }, "sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw=="],
-
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.2", "", { "dependencies": { "@emnapi/core": "^1.11.1", "@emnapi/runtime": "^1.11.1", "@emnapi/wasi-threads": "^1.2.2", "@napi-rs/wasm-runtime": "^1.1.4", "@tybys/wasm-util": "^0.10.2", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw=="],
-
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ=="],
-
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.2", "", { "os": "win32", "cpu": "x64" }, "sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ=="],
-
-    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
-
-    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
-
-    "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="],
-
-    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
-
-    "@types/estree": ["@types/estree@1.0.9", "", {}, "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg=="],
-
-    "@types/react": ["@types/react@19.2.17", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw=="],
-
-    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
-
-    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
-
-    "@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="],
-
-    "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.4", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA=="],
-
-    "@vue/compiler-core": ["@vue/compiler-core@3.5.39", "", { "dependencies": { "@babel/parser": "^7.29.7", "@vue/shared": "3.5.39", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-16KBTEXAJCpDr0mwlw+AZyhu8iyC7R3S2vBwsI7QnWJU6X3WKc9VKeNEZpiMdZ569qWhz9574L3vV55qRL0Vtw=="],
-
-    "@vue/compiler-dom": ["@vue/compiler-dom@3.5.39", "", { "dependencies": { "@vue/compiler-core": "3.5.39", "@vue/shared": "3.5.39" } }, "sha512-oQPigALqYbNxTNPvNgSOe+czwVExfbVF02lz8jP0S3AXJiu3jxYDygNUiqSep4ezzW8XgnubqH63My2A7JR/vg=="],
-
-    "@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.39", "", { "dependencies": { "@babel/parser": "^7.29.7", "@vue/compiler-core": "3.5.39", "@vue/compiler-dom": "3.5.39", "@vue/compiler-ssr": "3.5.39", "@vue/shared": "3.5.39", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.15", "source-map-js": "^1.2.1" } }, "sha512-d0ki86iOyN8LoZPBmk5SJWNwHP19CnDDCfuo//+2WJa2g5Ke0Jay983PIBIcSSzldC68I8DrD5GrHV3OSDfodg=="],
-
-    "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.39", "", { "dependencies": { "@vue/compiler-dom": "3.5.39", "@vue/shared": "3.5.39" } }, "sha512-Ce7/wvwMHai74bdszfXExdazFigYnlF9zgCmEQUcM1j0fOymlouZ7XilTYNo8oUjhlnjYOZbGrcYKuqjz89Ucw=="],
-
-    "@vue/reactivity": ["@vue/reactivity@3.5.39", "", { "dependencies": { "@vue/shared": "3.5.39" } }, "sha512-TpsuBJ9gGlZa5d23XcM2y8EXanz9dZeVDQBXRwzy46ItgvM+rWpzs+UVM0wcRLxGvcav0HE5jz2gNL53xlRAog=="],
-
-    "@vue/runtime-core": ["@vue/runtime-core@3.5.39", "", { "dependencies": { "@vue/reactivity": "3.5.39", "@vue/shared": "3.5.39" } }, "sha512-9GLtNyRvPAUMbX+7ono0RC2j0guo2LXVi8LvcmAooImACUKm0oFf0jjwbX8/H0AE/t1nxhAkn8RSl9PMCzzxZw=="],
-
-    "@vue/runtime-dom": ["@vue/runtime-dom@3.5.39", "", { "dependencies": { "@vue/reactivity": "3.5.39", "@vue/runtime-core": "3.5.39", "@vue/shared": "3.5.39", "csstype": "^3.2.3" } }, "sha512-7Y6aAGboKcXAZ3ECuUy7RrS5yy2r47dhTp2SKaJmYxjopImaVFaNa5Ne66NwGovsrxVAl5S5rwc7m22UG7Lmww=="],
-
-    "@vue/server-renderer": ["@vue/server-renderer@3.5.39", "", { "dependencies": { "@vue/compiler-ssr": "3.5.39", "@vue/shared": "3.5.39" }, "peerDependencies": { "vue": "3.5.39" } }, "sha512-yZSakiAGw85rZfG7UM8akMnIF+FmeiNk47uvHf2nVBBSe+dIKUhZuZq9+XgJhbV3nS5Z4ALH23/MpXofW+mbcw=="],
-
-    "@vue/shared": ["@vue/shared@3.5.39", "", {}, "sha512-l1rrBtBfTnmxvtsvdQDXltUUy8S1Y+ZaqdfUzmAnJkTd8Z8rv5v/ytW+TKiqEOWyHPoqtPlNFSs0lhRmYVSHVA=="],
-
-    "acorn": ["acorn@8.17.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg=="],
-
-    "aria-query": ["aria-query@5.3.1", "", {}, "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g=="],
-
-    "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
-
-    "baseline-browser-mapping": ["baseline-browser-mapping@2.10.42", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-c/jurFrDLyui7o1J86yLkRu4LMsTYcBohveus7/I2Hzdn9KIP2bdJPTue/lR1KH46enoPbD77GKeSYNdyPoD3Q=="],
-
-    "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
-
-    "browserslist": ["browserslist@4.28.5", "", { "dependencies": { "baseline-browser-mapping": "^2.10.42", "caniuse-lite": "^1.0.30001800", "electron-to-chromium": "^1.5.387", "node-releases": "^2.0.50", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-Cu2E6QejHWzuDMTkuwgpABFgDfZrXLQq5V13YOACZx4mFAG4IwGTbTfHPMr4WtxlHoXSM8FIuRwYYCz5XiabaQ=="],
-
-    "caniuse-lite": ["caniuse-lite@1.0.30001803", "", {}, "sha512-g/uHREV2ZpK9qMalCsWaxmA6ol+DX8GYhuf3T40RKoP+oL7vhRJh8LNt73PCjpnR6l14FzfPrB5Yux4PKm2meg=="],
-
-    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
-
-    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
-
-    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
-
-    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" }, "peerDependencies": { "supports-color": "*" }, "optionalPeers": ["supports-color"] }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
-
-    "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
-
-    "detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="],
-
-    "devalue": ["devalue@5.8.1", "", {}, "sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw=="],
-
-    "electron-to-chromium": ["electron-to-chromium@1.5.388", "", {}, "sha512-Pl/aJaqOOxYxda3vcx1IKSJimwYXHDkEnGn0F+kG2EE68dDtx2uCinaS+Vih8Z91B9t8CSAbiF/HKyWcnXjhzw=="],
-
-    "enhanced-resolve": ["enhanced-resolve@5.21.6", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ=="],
-
-    "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
-
-    "esbuild": ["esbuild@0.25.12", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.12", "@esbuild/android-arm": "0.25.12", "@esbuild/android-arm64": "0.25.12", "@esbuild/android-x64": "0.25.12", "@esbuild/darwin-arm64": "0.25.12", "@esbuild/darwin-x64": "0.25.12", "@esbuild/freebsd-arm64": "0.25.12", "@esbuild/freebsd-x64": "0.25.12", "@esbuild/linux-arm": "0.25.12", "@esbuild/linux-arm64": "0.25.12", "@esbuild/linux-ia32": "0.25.12", "@esbuild/linux-loong64": "0.25.12", "@esbuild/linux-mips64el": "0.25.12", "@esbuild/linux-ppc64": "0.25.12", "@esbuild/linux-riscv64": "0.25.12", "@esbuild/linux-s390x": "0.25.12", "@esbuild/linux-x64": "0.25.12", "@esbuild/netbsd-arm64": "0.25.12", "@esbuild/netbsd-x64": "0.25.12", "@esbuild/openbsd-arm64": "0.25.12", "@esbuild/openbsd-x64": "0.25.12", "@esbuild/openharmony-arm64": "0.25.12", "@esbuild/sunos-x64": "0.25.12", "@esbuild/win32-arm64": "0.25.12", "@esbuild/win32-ia32": "0.25.12", "@esbuild/win32-x64": "0.25.12" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg=="],
-
-    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
-
-    "esm-env": ["esm-env@1.2.2", "", {}, "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="],
-
-    "esrap": ["esrap@2.2.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, "peerDependencies": { "@typescript-eslint/types": "^8.2.0" }, "optionalPeers": ["@typescript-eslint/types"] }, "sha512-m8jH5hZgJE2RRUK/jjkGPcJEDAV+dYnZYFkosQaPTcE+Yw4xynXHOo6FUdwaWBtdR3b1MMa7wEDTSHeR2VWsGA=="],
-
-    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
-
-    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
-
-    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
-
-    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
-
-    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
-
-    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
-
-    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
-
-    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
-
-    "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
-
-    "is-reference": ["is-reference@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],
-
-    "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
-
-    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
-
-    "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
-
-    "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
-
-    "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
-
-    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
-
-    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
-
-    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
-
-    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
-
-    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
-
-    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
-
-    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
-
-    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
-
-    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
-
-    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
-
-    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
-
-    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
-
-    "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
-
-    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
-
-    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
-
-    "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
-
-    "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
-
-    "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
-
-    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
-
-    "nanoid": ["nanoid@3.3.15", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA=="],
-
-    "node-addon-api": ["node-addon-api@7.1.1", "", {}, "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="],
-
-    "node-releases": ["node-releases@2.0.50", "", {}, "sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg=="],
-
-    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
-
-    "picomatch": ["picomatch@4.0.5", "", {}, "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A=="],
-
-    "postcss": ["postcss@8.5.16", "", { "dependencies": { "nanoid": "^3.3.12", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg=="],
-
-    "react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="],
-
-    "react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="],
-
-    "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
-
-    "rollup": ["rollup@4.62.2", "", { "dependencies": { "@types/estree": "1.0.9" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.62.2", "@rollup/rollup-android-arm64": "4.62.2", "@rollup/rollup-darwin-arm64": "4.62.2", "@rollup/rollup-darwin-x64": "4.62.2", "@rollup/rollup-freebsd-arm64": "4.62.2", "@rollup/rollup-freebsd-x64": "4.62.2", "@rollup/rollup-linux-arm-gnueabihf": "4.62.2", "@rollup/rollup-linux-arm-musleabihf": "4.62.2", "@rollup/rollup-linux-arm64-gnu": "4.62.2", "@rollup/rollup-linux-arm64-musl": "4.62.2", "@rollup/rollup-linux-loong64-gnu": "4.62.2", "@rollup/rollup-linux-loong64-musl": "4.62.2", "@rollup/rollup-linux-ppc64-gnu": "4.62.2", "@rollup/rollup-linux-ppc64-musl": "4.62.2", "@rollup/rollup-linux-riscv64-gnu": "4.62.2", "@rollup/rollup-linux-riscv64-musl": "4.62.2", "@rollup/rollup-linux-s390x-gnu": "4.62.2", "@rollup/rollup-linux-x64-gnu": "4.62.2", "@rollup/rollup-linux-x64-musl": "4.62.2", "@rollup/rollup-openbsd-x64": "4.62.2", "@rollup/rollup-openharmony-arm64": "4.62.2", "@rollup/rollup-win32-arm64-msvc": "4.62.2", "@rollup/rollup-win32-ia32-msvc": "4.62.2", "@rollup/rollup-win32-x64-gnu": "4.62.2", "@rollup/rollup-win32-x64-msvc": "4.62.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA=="],
-
-    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
-
-    "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
-
-    "sirv": ["sirv@3.0.2", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g=="],
-
-    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
-
-    "svelte": ["svelte@5.56.4", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.10", "@types/estree": "^1.0.5", "@types/trusted-types": "^2.0.7", "acorn": "^8.12.1", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.8.1", "esm-env": "^1.2.1", "esrap": "^2.2.12", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-/d0QHehmRuJW8gVz395MTkPcPozxzdjBMBE8oEYGz8O3b9KTMzzQ9ZHJQLuFKOHOPQbU6kx/X4iid/EBBzH7iw=="],
-
-    "tailwind-merge": ["tailwind-merge@2.6.1", "", {}, "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ=="],
-
-    "tailwindcss": ["tailwindcss@4.3.2", "", {}, "sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA=="],
-
-    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
-
-    "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
-
-    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
-
-    "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
-
-    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
-
-    "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
-
-    "vite": ["vite@6.4.3", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A=="],
-
-    "vitefu": ["vitefu@1.1.3", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["vite"] }, "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg=="],
-
-    "vue": ["vue@3.5.39", "", { "dependencies": { "@vue/compiler-dom": "3.5.39", "@vue/compiler-sfc": "3.5.39", "@vue/runtime-dom": "3.5.39", "@vue/server-renderer": "3.5.39", "@vue/shared": "3.5.39" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-xmZCYabFGcirU8r0fTuvl/LICc1OU620rnqepaJDL/a141ZigkG7AyaxQLdqJ02ZRYzWe6YPaDHeQx7MfknQfA=="],
-
-    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
-
-    "zimmerframe": ["zimmerframe@1.1.4", "", {}, "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.2", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.6", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" }, "bundled": true }, "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg=="],
-
-    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
-    "lightningcss/detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
-
-    "micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
-  }
-}
diff --git a/examples/data/welcome.json b/examples/data/welcome.json
deleted file mode 100644
index cb68bef..0000000
--- a/examples/data/welcome.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "title": "UI8Kit Codegen",
-  "subtitle": "One typed render contract — seven generated runtimes with identical DOM, design, and ARIA.",
-  "features": [
-    {
-      "title": "Spec-driven",
-      "description": "Brick definitions in a tiny expression IR — no hand-written drift across stacks."
-    },
-    {
-      "title": "Seven runtimes",
-      "description": "Go Templ, React 19, Svelte 5, Vue 3, SolidJS, Latte, and Twig from the same source."
-    },
-    {
-      "title": "DOM parity",
-      "description": "The canonical renderer is the executable specification, verified by tests."
-    }
-  ],
-  "runtimes": [
-    { "id": "templ", "label": "Go Templ", "port": 8080 },
-    { "id": "react", "label": "React 19", "port": 5173 },
-    { "id": "svelte", "label": "Svelte 5", "port": 5174 },
-    { "id": "vue", "label": "Vue 3", "port": 5175 },
-    { "id": "latte", "label": "Latte", "port": 5176 },
-    { "id": "twig", "label": "Twig", "port": 5177 },
-    { "id": "solid", "label": "SolidJS", "port": 5178 }
-  ]
-}
diff --git a/examples/dist/static/css/app.css b/examples/dist/static/css/app.css
deleted file mode 100644
index d644c67..0000000
--- a/examples/dist/static/css/app.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:var(--font-sans);--font-serif:var(--font-serif);--font-mono:var(--font-mono);--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-2xl:42rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--shadow-2xs:var(--shadow-2xs);--shadow-xs:var(--shadow-xs);--shadow-sm:var(--shadow-sm);--shadow-md:var(--shadow-md);--shadow-lg:var(--shadow-lg);--shadow-xl:var(--shadow-xl);--shadow-2xl:var(--shadow-2xl);--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--shadow:var(--shadow)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6}.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9}.col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12}.col-end-1{grid-column-end:1}.col-end-2{grid-column-end:2}.col-end-3{grid-column-end:3}.col-end-4{grid-column-end:4}.col-end-5{grid-column-end:5}.col-end-6{grid-column-end:6}.col-end-7{grid-column-end:7}.col-end-8{grid-column-end:8}.col-end-9{grid-column-end:9}.col-end-10{grid-column-end:10}.col-end-11{grid-column-end:11}.col-end-12{grid-column-end:12}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-auto{aspect-ratio:auto}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.h-1{height:var(--spacing)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-full{height:100%}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-none{max-width:none}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-border{border-color:var(--border)}.border-destructive{border-color:var(--destructive)}.border-input{border-color:var(--input)}.border-primary{border-color:var(--primary)}.border-transparent{border-color:#0000}.bg-accent,.bg-accent\/30{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/30{background-color:color-mix(in oklab, var(--accent) 30%, transparent)}}.bg-background{background-color:var(--background)}.bg-border{background-color:var(--border)}.bg-card,.bg-card\/50{background-color:var(--card)}@supports (color:color-mix(in lab, red, red)){.bg-card\/50{background-color:color-mix(in oklab, var(--card) 50%, transparent)}}.bg-destructive,.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.bg-foreground{background-color:var(--foreground)}.bg-muted,.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.bg-muted\/40{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.bg-primary,.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-secondary{background-color:var(--secondary)}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-fill{object-fit:fill}.object-none{object-fit:none}.object-scale-down{object-fit:scale-down}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-left-bottom{object-position:left bottom}.object-left-top{object-position:left top}.object-right{object-position:right}.object-right-bottom{object-position:right bottom}.object-right-top{object-position:right top}.object-top{object-position:top}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-16{padding-block:calc(var(--spacing) * 16)}.text-center{text-align:center}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--accent-foreground)}.text-card-foreground{color:var(--card-foreground)}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.uppercase{text-transform:uppercase}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-muted-foreground{accent-color:var(--muted-foreground)}.accent-primary{accent-color:var(--primary)}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:var(--shadow-lg);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.backdrop\:bg-background\/80::backdrop{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.backdrop\:bg-background\/80::backdrop{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/80:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/80:hover{background-color:color-mix(in oklab, var(--destructive) 80%, transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-primary\/80:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab, var(--primary) 80%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-primary:hover{color:var(--primary)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:80rem){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}}:root{--background:#e8ebed;--foreground:#333;--card:#fff;--card-foreground:#333;--popover:#fff;--popover-foreground:#333;--primary:#df6035;--primary-foreground:#fff;--secondary:#2f4b79;--secondary-foreground:#fff;--muted:#f9fafb;--muted-foreground:#6b7280;--accent:#d6e4f0;--accent-foreground:#1e3a8a;--destructive:#ef4444;--destructive-foreground:#fff;--success:#16a34a;--success-foreground:#fff;--warning:#eab308;--warning-foreground:#1a1a1a;--border:#ccc;--input:#f4f5f7;--ring:#e05d38;--chart-1:#7399bf;--chart-2:#e16f41;--chart-3:#d54450;--chart-4:#e2b146;--chart-5:#3c4c76;--sidebar:#dddfe2;--sidebar-foreground:#333;--sidebar-primary:#e05d38;--sidebar-primary-foreground:#fff;--sidebar-accent:#d6e4f0;--sidebar-accent-foreground:#1e3a8a;--sidebar-border:#e5e7eb;--sidebar-ring:#e05d38;--font-sans:"Google Sans", sans-serif;--font-serif:ui-serif, Georgia, serif;--font-mono:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:3px;--shadow-spread:0px;--shadow-opacity:.1;--shadow-color:#1a1a1a;--shadow-2xs:0px 1px 3px 0px #1a1a1a0d;--shadow-xs:0px 1px 3px 0px #1a1a1a0d;--shadow-sm:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow-md:0px 1px 3px 0px #1a1a1a1a, 0px 2px 4px -1px #1a1a1a1a;--shadow-lg:0px 1px 3px 0px #1a1a1a1a, 0px 4px 6px -1px #1a1a1a1a;--shadow-xl:0px 1px 3px 0px #1a1a1a1a, 0px 8px 10px -1px #1a1a1a1a;--shadow-2xl:0px 1px 3px 0px #1a1a1a40;--tracking-normal:0em;--spacing:.25rem;--code-default:var(--foreground);--code-comment:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){:root{--code-comment:color-mix(in hsl, var(--muted-foreground) 88%, var(--foreground))}}:root{--code-keyword:#63149f;--code-keyword-op:#63149f;--code-keyword-const:#0000c2;--code-type:#005a61;--code-string:#2546bb;--code-number:#0000c2;--code-name:var(--foreground);--code-at:var(--foreground);--code-function:#7f064c;--code-variable:#00558a;--code-builtin:#8f0069;--code-operator:#00558a;--code-tag:#00558a;--code-error-fg:var(--destructive);--code-error-bg:var(--destructive)}@supports (color:color-mix(in lab, red, red)){:root{--code-error-bg:color-mix(in hsl, var(--destructive) 15%, transparent)}}:root{--code-diff-add:#005a61;--code-diff-del:var(--destructive);--code-highlight:var(--accent)}@supports (color:color-mix(in lab, red, red)){:root{--code-highlight:color-mix(in hsl, var(--accent) 50%, transparent)}}.dark{--background:#1a1a1a;--foreground:#e5e5e5;--card:#202020;--card-foreground:#e5e5e5;--popover:#202020;--popover-foreground:#e5e5e5;--primary:#df6035;--primary-foreground:#fff;--secondary:#284167;--secondary-foreground:#e5e5e5;--muted:#2a2a2a;--muted-foreground:gray;--accent:#2a3656;--accent-foreground:#bfdbfe;--destructive:#ef4444;--destructive-foreground:#fff;--success:#16a34a;--success-foreground:#fff;--warning:#eab308;--warning-foreground:#1a1a1a;--border:#353535;--input:#303030;--ring:#e05d38;--chart-1:#85a6c7;--chart-2:#e16f41;--chart-3:#d54450;--chart-4:#e2b146;--chart-5:#3c4c76;--sidebar:#1f1f1f;--sidebar-foreground:#e5e5e5;--sidebar-primary:#e05d38;--sidebar-primary-foreground:#fff;--sidebar-accent:#2a3656;--sidebar-accent-foreground:#bfdbfe;--sidebar-border:#353535;--sidebar-ring:#e05d38;--font-sans:"Google Sans", sans-serif;--font-serif:ui-serif, Georgia, serif;--font-mono:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:3px;--shadow-spread:0px;--shadow-opacity:.1;--shadow-color:#1a1a1a;--shadow-2xs:0px 1px 3px 0px #1a1a1a0d;--shadow-xs:0px 1px 3px 0px #1a1a1a0d;--shadow-sm:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow-md:0px 1px 3px 0px #1a1a1a1a, 0px 2px 4px -1px #1a1a1a1a;--shadow-lg:0px 1px 3px 0px #1a1a1a1a, 0px 4px 6px -1px #1a1a1a1a;--shadow-xl:0px 1px 3px 0px #1a1a1a1a, 0px 8px 10px -1px #1a1a1a1a;--shadow-2xl:0px 1px 3px 0px #1a1a1a40;--code-comment:#a8a8a8;--code-keyword:#bea8ff;--code-keyword-op:#bea8ff;--code-keyword-const:#00bfff;--code-type:#78e3bc;--code-string:#7aa2ff;--code-number:#00bfff;--code-function:#fdafd6;--code-variable:#00d1ca;--code-builtin:#f99fec;--code-operator:#00d1ca;--code-tag:#00d1ca;--code-diff-add:#78e3bc;--code-highlight:var(--accent)}@supports (color:color-mix(in lab, red, red)){.dark{--code-highlight:color-mix(in hsl, var(--accent) 65%, transparent)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
\ No newline at end of file
diff --git a/examples/dist/static/css/input.css b/examples/dist/static/css/input.css
deleted file mode 100644
index 69aed03..0000000
--- a/examples/dist/static/css/input.css
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "tailwindcss";
-
-@source "../../../../generated/ui/**/*.tsx";
-@source "../../../../generated/ui/**/*.svelte";
-@source "../../../../generated/ui/**/*.vue";
-@source "../../../../generated/ui/**/*.templ";
-@source "../../../../generated/ui/**/*_templ.go";
-@source "../../../../generated/ui/**/*.variants.json";
-@source "../../../../generated/utils/**/*.ts";
-@source "../../../react/src/**/*.tsx";
-@source "../../../svelte/src/**/*.svelte";
-@source "../../../vue/src/**/*.vue";
-@source "../../../templ/**/*.templ";
-@source "../../../templ/**/*_templ.go";
-
-@import "./tokens.css";
diff --git a/examples/dist/static/css/tokens.css b/examples/dist/static/css/tokens.css
deleted file mode 100644
index a5c5820..0000000
--- a/examples/dist/static/css/tokens.css
+++ /dev/null
@@ -1,221 +0,0 @@
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --background: hsl(204.0000 12.1951% 91.9608%);
-  --foreground: hsl(0 0% 20%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 20%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 20%);
-  --primary: hsl(15.1765 72.6496% 54.1176%);
-  --primary-foreground: hsl(0 0% 100%);
-  --secondary: hsl(217.2973 44.0476% 32.9412%);
-  --secondary-foreground: hsl(0 0% 100%);
-  --muted: hsl(210 20.0000% 98.0392%);
-  --muted-foreground: hsl(220 8.9362% 46.0784%);
-  --accent: hsl(207.6923 46.4286% 89.0196%);
-  --accent-foreground: hsl(224.4444 64.2857% 32.9412%);
-  --destructive: hsl(0 84.2365% 60.1961%);
-  --destructive-foreground: hsl(0 0% 100%);
-  --success: hsl(142.1 76.2% 36.3%);
-  --success-foreground: hsl(0 0% 100%);
-  --warning: hsl(45.4 93.4% 47.5%);
-  --warning-foreground: hsl(0 0% 10%);
-  --border: hsl(0 0% 80%);
-  --input: hsl(220 15.7895% 96.2745%);
-  --ring: hsl(13.2143 73.0435% 54.9020%);
-  --chart-1: hsl(210 37.2549% 60%);
-  --chart-2: hsl(17.2500 72.7273% 56.8627%);
-  --chart-3: hsl(355.0345 63.3188% 55.0980%);
-  --chart-4: hsl(41.1538 72.8972% 58.0392%);
-  --chart-5: hsl(223.4483 32.5843% 34.9020%);
-  --sidebar: hsl(216 7.9365% 87.6471%);
-  --sidebar-foreground: hsl(0 0% 20%);
-  --sidebar-primary: hsl(13.2143 73.0435% 54.9020%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(207.6923 46.4286% 89.0196%);
-  --sidebar-accent-foreground: hsl(224.4444 64.2857% 32.9412%);
-  --sidebar-border: hsl(220 13.0435% 90.9804%);
-  --sidebar-ring: hsl(13.2143 73.0435% 54.9020%);
-  --font-sans: "Google Sans", sans-serif;
-  --font-serif: ui-serif, Georgia, serif;
-  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: #1a1a1a;
-  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-md: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.25);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
-
-  /* Modus Operandi (light) code roles — see modus-vivendi overrides in .dark */
-  --code-default: var(--foreground);
-  --code-comment: color-mix(in hsl, var(--muted-foreground) 88%, var(--foreground));
-  --code-keyword: hsl(274 78% 35%);
-  --code-keyword-op: hsl(274 78% 35%);
-  --code-keyword-const: hsl(240 100% 38%);
-  --code-type: hsl(184 100% 19%);
-  --code-string: hsl(227 67% 44%);
-  --code-number: hsl(240 100% 38%);
-  --code-name: var(--foreground);
-  --code-at: var(--foreground);
-  --code-function: hsl(325 91% 26%);
-  --code-variable: hsl(203 100% 27%);
-  --code-builtin: hsl(316 100% 28%);
-  --code-operator: hsl(203 100% 27%);
-  --code-tag: hsl(203 100% 27%);
-  --code-error-fg: var(--destructive);
-  --code-error-bg: color-mix(in hsl, var(--destructive) 15%, transparent);
-  --code-diff-add: hsl(184 100% 19%);
-  --code-diff-del: var(--destructive);
-  --code-highlight: color-mix(in hsl, var(--accent) 50%, transparent);
-}
-
-.dark {
-  --background: hsl(0 0% 10.1961%);
-  --foreground: hsl(0 0% 89.8039%);
-  --card: hsl(0 0% 12.5490%);
-  --card-foreground: hsl(0 0% 89.8039%);
-  --popover: hsl(0 0% 12.5490%);
-  --popover-foreground: hsl(0 0% 89.8039%);
-  --primary: hsl(15.1765 72.6496% 54.1176%);
-  --primary-foreground: hsl(0 0% 100%);
-  --secondary: hsl(216.1905 44.0559% 28.0392%);
-  --secondary-foreground: hsl(0 0% 89.8039%);
-  --muted: hsl(0 0% 16.4706%);
-  --muted-foreground: hsl(0 0% 50.1961%);
-  --accent: hsl(223.6364 34.3750% 25.0980%);
-  --accent-foreground: hsl(213.3333 96.9231% 87.2549%);
-  --destructive: hsl(0 84.2365% 60.1961%);
-  --destructive-foreground: hsl(0 0% 100%);
-  --success: hsl(142.1 76.2% 36.3%);
-  --success-foreground: hsl(0 0% 100%);
-  --warning: hsl(45.4 93.4% 47.5%);
-  --warning-foreground: hsl(0 0% 10%);
-  --border: hsl(0 0% 20.7843%);
-  --input: hsl(0 0% 18.8235%);
-  --ring: hsl(13.2143 73.0435% 54.9020%);
-  --chart-1: hsl(210 37.0787% 65.0980%);
-  --chart-2: hsl(17.2500 72.7273% 56.8627%);
-  --chart-3: hsl(355.0345 63.3188% 55.0980%);
-  --chart-4: hsl(41.1538 72.8972% 58.0392%);
-  --chart-5: hsl(223.4483 32.5843% 34.9020%);
-  --sidebar: hsl(0 0% 12.1569%);
-  --sidebar-foreground: hsl(0 0% 89.8039%);
-  --sidebar-primary: hsl(13.2143 73.0435% 54.9020%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(223.6364 34.3750% 25.0980%);
-  --sidebar-accent-foreground: hsl(213.3333 96.9231% 87.2549%);
-  --sidebar-border: hsl(0 0% 20.7843%);
-  --sidebar-ring: hsl(13.2143 73.0435% 54.9020%);
-  --font-sans: "Google Sans", sans-serif;
-  --font-serif: ui-serif, Georgia, serif;
-  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: #1a1a1a;
-  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-md: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.25);
-
-  /* Modus Vivendi (dark) code roles */
-  --code-comment: hsl(0 0% 66%);
-  --code-keyword: hsl(255 100% 83%);
-  --code-keyword-op: hsl(255 100% 83%);
-  --code-keyword-const: hsl(195 100% 50%);
-  --code-type: hsl(158 66% 68%);
-  --code-string: hsl(222 100% 74%);
-  --code-number: hsl(195 100% 50%);
-  --code-function: hsl(330 95% 84%);
-  --code-variable: hsl(178 100% 41%);
-  --code-builtin: hsl(309 89% 80%);
-  --code-operator: hsl(178 100% 41%);
-  --code-tag: hsl(178 100% 41%);
-  --code-diff-add: hsl(158 66% 68%);
-  --code-highlight: color-mix(in hsl, var(--accent) 65%, transparent);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/examples/html/about/index.html b/examples/html/about/index.html
deleted file mode 100644
index 18e8923..0000000
--- a/examples/html/about/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>UI8Kit Codegen · About</title>
-		<link rel="stylesheet" href="../static/css/app.css">
-	</head>
-	<body class="bg-background text-foreground antialiased">
-<main class="min-h-screen bg-muted/30 text-foreground"><div class="mx-auto max-w-4xl px-4 py-16"><div class="flex flex-col items-start justify-start gap-8"><div class="flex flex-col justify-start items-center gap-4 text-center"><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground px-2 py-1 text-xs uppercase tracking-wide">Static HTML · About</div><h1 class="text-3xl font-bold tracking-tight">UI8Kit Codegen</h1><p class="max-w-2xl text-muted-foreground">One typed render contract — seven generated runtimes with identical DOM, design, and ARIA.</p></div><div class="rounded-md border border-border bg-card text-card-foreground shadow-sm"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">Generated primitives</h2></div><div class="p-4"><div class="flex flex-col items-start justify-start gap-4"><div class="flex min-w-0 flex-wrap gap-2"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-8 rounded-md px-3">Default</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-8 rounded-md px-3">Secondary</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3">Outline</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3">Ghost</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-8 rounded-md px-3">Destructive</button></div><div class="flex min-w-0 flex-wrap gap-2"><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 px-2 py-1 text-xs">Badge</div><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 px-2 py-1 text-xs">Secondary</div><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground px-2 py-1 text-xs">Outline</div></div></div></div></div><div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"><div class="rounded-md border border-border text-card-foreground shadow-sm bg-muted/40"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">Spec-driven</h2></div><div class="p-4"><p class="text-sm text-muted-foreground">Brick definitions in a tiny expression IR — no hand-written drift across stacks.</p></div></div><div class="rounded-md border border-border text-card-foreground shadow-sm bg-muted/40"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">Seven runtimes</h2></div><div class="p-4"><p class="text-sm text-muted-foreground">Go Templ, React 19, Svelte 5, Vue 3, Latte, Twig, and static HTML from the same source.</p></div></div><div class="rounded-md border border-border text-card-foreground shadow-sm bg-muted/40"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">DOM parity</h2></div><div class="p-4"><p class="text-sm text-muted-foreground">The canonical renderer is the executable specification, verified by tests.</p></div></div></div><div class="rounded-lg border border-border bg-card p-4"><div class="flex flex-col items-start justify-start gap-3"><p class="text-sm font-medium">Preview other runtimes</p><div class="flex min-w-0 flex-wrap gap-3"><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:8080">Go Templ</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5173">React 19</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5174">Svelte 5</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5175">Vue 3</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5176">Latte</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5177">Twig</a></div></div></div><p class="text-center text-sm text-muted-foreground">Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen</p></div></div></main>
-	</body>
-</html>
diff --git a/examples/html/index.html b/examples/html/index.html
deleted file mode 100644
index 2e919a5..0000000
--- a/examples/html/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>UI8Kit Codegen · Static HTML</title>
-		<link rel="stylesheet" href="./static/css/app.css">
-	</head>
-	<body class="bg-background text-foreground antialiased">
-<main class="min-h-screen bg-muted/30 text-foreground"><div class="mx-auto max-w-4xl px-4 py-16"><div class="flex flex-col items-start justify-start gap-8"><div class="flex flex-col justify-start items-center gap-4 text-center"><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground px-2 py-1 text-xs uppercase tracking-wide">Static HTML</div><h1 class="text-3xl font-bold tracking-tight">UI8Kit Codegen</h1><p class="max-w-2xl text-muted-foreground">One typed render contract — seven generated runtimes with identical DOM, design, and ARIA.</p></div><div class="rounded-md border border-border bg-card text-card-foreground shadow-sm"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">Generated primitives</h2></div><div class="p-4"><div class="flex flex-col items-start justify-start gap-4"><div class="flex min-w-0 flex-wrap gap-2"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-8 rounded-md px-3">Default</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-8 rounded-md px-3">Secondary</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3">Outline</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3">Ghost</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-8 rounded-md px-3">Destructive</button></div><div class="flex min-w-0 flex-wrap gap-2"><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 px-2 py-1 text-xs">Badge</div><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 px-2 py-1 text-xs">Secondary</div><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground px-2 py-1 text-xs">Outline</div></div></div></div></div><div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"><div class="rounded-md border border-border text-card-foreground shadow-sm bg-muted/40"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">Spec-driven</h2></div><div class="p-4"><p class="text-sm text-muted-foreground">Brick definitions in a tiny expression IR — no hand-written drift across stacks.</p></div></div><div class="rounded-md border border-border text-card-foreground shadow-sm bg-muted/40"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">Seven runtimes</h2></div><div class="p-4"><p class="text-sm text-muted-foreground">Go Templ, React 19, Svelte 5, Vue 3, Latte, Twig, and static HTML from the same source.</p></div></div><div class="rounded-md border border-border text-card-foreground shadow-sm bg-muted/40"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">DOM parity</h2></div><div class="p-4"><p class="text-sm text-muted-foreground">The canonical renderer is the executable specification, verified by tests.</p></div></div></div><div class="rounded-lg border border-border bg-card p-4"><div class="flex flex-col items-start justify-start gap-3"><p class="text-sm font-medium">Preview other runtimes</p><div class="flex min-w-0 flex-wrap gap-3"><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:8080">Go Templ</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5173">React 19</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5174">Svelte 5</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5175">Vue 3</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5176">Latte</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5177">Twig</a></div></div></div><p class="text-center text-sm text-muted-foreground">Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen</p></div></div></main>
-	</body>
-</html>
diff --git a/examples/html/static/css/app.css b/examples/html/static/css/app.css
deleted file mode 100644
index bad6e36..0000000
--- a/examples/html/static/css/app.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:var(--font-sans);--font-serif:var(--font-serif);--font-mono:var(--font-mono);--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-2xl:42rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--shadow-2xs:var(--shadow-2xs);--shadow-xs:var(--shadow-xs);--shadow-sm:var(--shadow-sm);--shadow-md:var(--shadow-md);--shadow-lg:var(--shadow-lg);--shadow-xl:var(--shadow-xl);--shadow-2xl:var(--shadow-2xl);--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--shadow:var(--shadow)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.isolate{isolation:isolate}.isolation-auto{isolation:auto}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6}.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9}.col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12}.col-end-1{grid-column-end:1}.col-end-2{grid-column-end:2}.col-end-3{grid-column-end:3}.col-end-4{grid-column-end:4}.col-end-5{grid-column-end:5}.col-end-6{grid-column-end:6}.col-end-7{grid-column-end:7}.col-end-8{grid-column-end:8}.col-end-9{grid-column-end:9}.col-end-10{grid-column-end:10}.col-end-11{grid-column-end:11}.col-end-12{grid-column-end:12}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.block{display:block}.contents{display:contents}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.inline-table{display:inline-table}.list-item{display:list-item}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row{display:table-row}.table-row-group{display:table-row-group}.aspect-auto{aspect-ratio:auto}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.h-1{height:var(--spacing)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-full{height:100%}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-none{max-width:none}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.touch-pinch-zoom{--tw-pinch-zoom:pinch-zoom;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-reverse>:not(:last-child)){--tw-space-y-reverse:1}:where(.space-x-reverse>:not(:last-child)){--tw-space-x-reverse:1}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-reverse>:not(:last-child)){--tw-divide-y-reverse:1}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.rounded-s{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.rounded-ss{border-start-start-radius:.25rem}.rounded-e{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.rounded-se{border-start-end-radius:.25rem}.rounded-ee{border-end-end-radius:.25rem}.rounded-es{border-end-start-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-tl{border-top-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-tr{border-top-right-radius:.25rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-br{border-bottom-right-radius:.25rem}.rounded-bl{border-bottom-left-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-border{border-color:var(--border)}.border-destructive{border-color:var(--destructive)}.border-input{border-color:var(--input)}.border-primary{border-color:var(--primary)}.border-transparent{border-color:#0000}.bg-accent,.bg-accent\/30{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/30{background-color:color-mix(in oklab, var(--accent) 30%, transparent)}}.bg-background{background-color:var(--background)}.bg-border{background-color:var(--border)}.bg-card,.bg-card\/50{background-color:var(--card)}@supports (color:color-mix(in lab, red, red)){.bg-card\/50{background-color:color-mix(in oklab, var(--card) 50%, transparent)}}.bg-destructive,.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.bg-foreground{background-color:var(--foreground)}.bg-muted,.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.bg-muted\/40{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.bg-primary,.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-repeat{background-repeat:repeat}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-fill{object-fit:fill}.object-none{object-fit:none}.object-scale-down{object-fit:scale-down}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-left-bottom{object-position:left bottom}.object-left-top{object-position:left top}.object-right{object-position:right}.object-right-bottom{object-position:right bottom}.object-right-top{object-position:right top}.object-top{object-position:top}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-16{padding-block:calc(var(--spacing) * 16)}.text-center{text-align:center}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-wrap{text-wrap:wrap}.text-clip{text-overflow:clip}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--accent-foreground)}.text-card-foreground{color:var(--card-foreground)}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.diagonal-fractions{--tw-numeric-fraction:diagonal-fractions;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.oldstyle-nums{--tw-numeric-figure:oldstyle-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.slashed-zero{--tw-slashed-zero:slashed-zero;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.stacked-fractions{--tw-numeric-fraction:stacked-fractions;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.normal-nums{font-variant-numeric:normal}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.accent-muted-foreground{accent-color:var(--muted-foreground)}.accent-primary{accent-color:var(--primary)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--shadow-lg);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.sepia{--tw-sepia:sepia(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-grayscale{--tw-backdrop-grayscale:grayscale(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-invert{--tw-backdrop-invert:invert(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-sepia{--tw-backdrop-sepia:sepia(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}:where(.divide-x-reverse>:not(:last-child)){--tw-divide-x-reverse:1}.ring-inset{--tw-ring-inset:inset}.backdrop\:bg-background\/80::backdrop{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.backdrop\:bg-background\/80::backdrop{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/80:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/80:hover{background-color:color-mix(in oklab, var(--destructive) 80%, transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-primary\/80:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab, var(--primary) 80%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-primary:hover{color:var(--primary)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:80rem){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}}:root{--background:#e8ebed;--foreground:#333;--card:#fff;--card-foreground:#333;--popover:#fff;--popover-foreground:#333;--primary:#df6035;--primary-foreground:#fff;--secondary:#2f4b79;--secondary-foreground:#fff;--muted:#f9fafb;--muted-foreground:#6b7280;--accent:#d6e4f0;--accent-foreground:#1e3a8a;--destructive:#ef4444;--destructive-foreground:#fff;--success:#16a34a;--success-foreground:#fff;--warning:#eab308;--warning-foreground:#1a1a1a;--border:#ccc;--input:#f4f5f7;--ring:#e05d38;--chart-1:#7399bf;--chart-2:#e16f41;--chart-3:#d54450;--chart-4:#e2b146;--chart-5:#3c4c76;--sidebar:#dddfe2;--sidebar-foreground:#333;--sidebar-primary:#e05d38;--sidebar-primary-foreground:#fff;--sidebar-accent:#d6e4f0;--sidebar-accent-foreground:#1e3a8a;--sidebar-border:#e5e7eb;--sidebar-ring:#e05d38;--font-sans:"Google Sans", sans-serif;--font-serif:ui-serif, Georgia, serif;--font-mono:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:3px;--shadow-spread:0px;--shadow-opacity:.1;--shadow-color:#1a1a1a;--shadow-2xs:0px 1px 3px 0px #1a1a1a0d;--shadow-xs:0px 1px 3px 0px #1a1a1a0d;--shadow-sm:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow-md:0px 1px 3px 0px #1a1a1a1a, 0px 2px 4px -1px #1a1a1a1a;--shadow-lg:0px 1px 3px 0px #1a1a1a1a, 0px 4px 6px -1px #1a1a1a1a;--shadow-xl:0px 1px 3px 0px #1a1a1a1a, 0px 8px 10px -1px #1a1a1a1a;--shadow-2xl:0px 1px 3px 0px #1a1a1a40;--tracking-normal:0em;--spacing:.25rem;--code-default:var(--foreground);--code-comment:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){:root{--code-comment:color-mix(in hsl, var(--muted-foreground) 88%, var(--foreground))}}:root{--code-keyword:#63149f;--code-keyword-op:#63149f;--code-keyword-const:#0000c2;--code-type:#005a61;--code-string:#2546bb;--code-number:#0000c2;--code-name:var(--foreground);--code-at:var(--foreground);--code-function:#7f064c;--code-variable:#00558a;--code-builtin:#8f0069;--code-operator:#00558a;--code-tag:#00558a;--code-error-fg:var(--destructive);--code-error-bg:var(--destructive)}@supports (color:color-mix(in lab, red, red)){:root{--code-error-bg:color-mix(in hsl, var(--destructive) 15%, transparent)}}:root{--code-diff-add:#005a61;--code-diff-del:var(--destructive);--code-highlight:var(--accent)}@supports (color:color-mix(in lab, red, red)){:root{--code-highlight:color-mix(in hsl, var(--accent) 50%, transparent)}}.dark{--background:#1a1a1a;--foreground:#e5e5e5;--card:#202020;--card-foreground:#e5e5e5;--popover:#202020;--popover-foreground:#e5e5e5;--primary:#df6035;--primary-foreground:#fff;--secondary:#284167;--secondary-foreground:#e5e5e5;--muted:#2a2a2a;--muted-foreground:gray;--accent:#2a3656;--accent-foreground:#bfdbfe;--destructive:#ef4444;--destructive-foreground:#fff;--success:#16a34a;--success-foreground:#fff;--warning:#eab308;--warning-foreground:#1a1a1a;--border:#353535;--input:#303030;--ring:#e05d38;--chart-1:#85a6c7;--chart-2:#e16f41;--chart-3:#d54450;--chart-4:#e2b146;--chart-5:#3c4c76;--sidebar:#1f1f1f;--sidebar-foreground:#e5e5e5;--sidebar-primary:#e05d38;--sidebar-primary-foreground:#fff;--sidebar-accent:#2a3656;--sidebar-accent-foreground:#bfdbfe;--sidebar-border:#353535;--sidebar-ring:#e05d38;--font-sans:"Google Sans", sans-serif;--font-serif:ui-serif, Georgia, serif;--font-mono:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:3px;--shadow-spread:0px;--shadow-opacity:.1;--shadow-color:#1a1a1a;--shadow-2xs:0px 1px 3px 0px #1a1a1a0d;--shadow-xs:0px 1px 3px 0px #1a1a1a0d;--shadow-sm:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow-md:0px 1px 3px 0px #1a1a1a1a, 0px 2px 4px -1px #1a1a1a1a;--shadow-lg:0px 1px 3px 0px #1a1a1a1a, 0px 4px 6px -1px #1a1a1a1a;--shadow-xl:0px 1px 3px 0px #1a1a1a1a, 0px 8px 10px -1px #1a1a1a1a;--shadow-2xl:0px 1px 3px 0px #1a1a1a40;--code-comment:#a8a8a8;--code-keyword:#bea8ff;--code-keyword-op:#bea8ff;--code-keyword-const:#00bfff;--code-type:#78e3bc;--code-string:#7aa2ff;--code-number:#00bfff;--code-function:#fdafd6;--code-variable:#00d1ca;--code-builtin:#f99fec;--code-operator:#00d1ca;--code-tag:#00d1ca;--code-diff-add:#78e3bc;--code-highlight:var(--accent)}@supports (color:color-mix(in lab, red, red)){.dark{--code-highlight:color-mix(in hsl, var(--accent) 65%, transparent)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}
\ No newline at end of file
diff --git a/examples/html/static/css/input.css b/examples/html/static/css/input.css
deleted file mode 100644
index 98bf96a..0000000
--- a/examples/html/static/css/input.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@import "tailwindcss";
-
-@source "../../../../generated/ui/**/*.tsx";
-@source "../../../../generated/ui/**/*.svelte";
-@source "../../../../generated/ui/**/*.vue";
-@source "../../../../generated/ui/**/*.templ";
-@source "../../../../generated/ui/**/*_templ.go";
-@source "../../../../generated/ui/**/*.variants.json";
-@source "../../../../generated/utils/**/*.ts";
-@source "../../../../generated/ui/**/*.latte";
-@source "../../../../generated/ui/**/*.html.twig";
-@source "../../../react/src/**/*.tsx";
-@source "../../../svelte/src/**/*.svelte";
-@source "../../../vue/src/**/*.vue";
-@source "../../../templ/**/*.templ";
-@source "../../../templ/**/*_templ.go";
-@source "../../../latte/templates/**/*.latte";
-@source "../../../twig/templates/**/*.html.twig";
-
-@import "./tokens.css";
diff --git a/examples/html/static/css/tokens.css b/examples/html/static/css/tokens.css
deleted file mode 100644
index a5c5820..0000000
--- a/examples/html/static/css/tokens.css
+++ /dev/null
@@ -1,221 +0,0 @@
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --background: hsl(204.0000 12.1951% 91.9608%);
-  --foreground: hsl(0 0% 20%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 20%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 20%);
-  --primary: hsl(15.1765 72.6496% 54.1176%);
-  --primary-foreground: hsl(0 0% 100%);
-  --secondary: hsl(217.2973 44.0476% 32.9412%);
-  --secondary-foreground: hsl(0 0% 100%);
-  --muted: hsl(210 20.0000% 98.0392%);
-  --muted-foreground: hsl(220 8.9362% 46.0784%);
-  --accent: hsl(207.6923 46.4286% 89.0196%);
-  --accent-foreground: hsl(224.4444 64.2857% 32.9412%);
-  --destructive: hsl(0 84.2365% 60.1961%);
-  --destructive-foreground: hsl(0 0% 100%);
-  --success: hsl(142.1 76.2% 36.3%);
-  --success-foreground: hsl(0 0% 100%);
-  --warning: hsl(45.4 93.4% 47.5%);
-  --warning-foreground: hsl(0 0% 10%);
-  --border: hsl(0 0% 80%);
-  --input: hsl(220 15.7895% 96.2745%);
-  --ring: hsl(13.2143 73.0435% 54.9020%);
-  --chart-1: hsl(210 37.2549% 60%);
-  --chart-2: hsl(17.2500 72.7273% 56.8627%);
-  --chart-3: hsl(355.0345 63.3188% 55.0980%);
-  --chart-4: hsl(41.1538 72.8972% 58.0392%);
-  --chart-5: hsl(223.4483 32.5843% 34.9020%);
-  --sidebar: hsl(216 7.9365% 87.6471%);
-  --sidebar-foreground: hsl(0 0% 20%);
-  --sidebar-primary: hsl(13.2143 73.0435% 54.9020%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(207.6923 46.4286% 89.0196%);
-  --sidebar-accent-foreground: hsl(224.4444 64.2857% 32.9412%);
-  --sidebar-border: hsl(220 13.0435% 90.9804%);
-  --sidebar-ring: hsl(13.2143 73.0435% 54.9020%);
-  --font-sans: "Google Sans", sans-serif;
-  --font-serif: ui-serif, Georgia, serif;
-  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: #1a1a1a;
-  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-md: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.25);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
-
-  /* Modus Operandi (light) code roles — see modus-vivendi overrides in .dark */
-  --code-default: var(--foreground);
-  --code-comment: color-mix(in hsl, var(--muted-foreground) 88%, var(--foreground));
-  --code-keyword: hsl(274 78% 35%);
-  --code-keyword-op: hsl(274 78% 35%);
-  --code-keyword-const: hsl(240 100% 38%);
-  --code-type: hsl(184 100% 19%);
-  --code-string: hsl(227 67% 44%);
-  --code-number: hsl(240 100% 38%);
-  --code-name: var(--foreground);
-  --code-at: var(--foreground);
-  --code-function: hsl(325 91% 26%);
-  --code-variable: hsl(203 100% 27%);
-  --code-builtin: hsl(316 100% 28%);
-  --code-operator: hsl(203 100% 27%);
-  --code-tag: hsl(203 100% 27%);
-  --code-error-fg: var(--destructive);
-  --code-error-bg: color-mix(in hsl, var(--destructive) 15%, transparent);
-  --code-diff-add: hsl(184 100% 19%);
-  --code-diff-del: var(--destructive);
-  --code-highlight: color-mix(in hsl, var(--accent) 50%, transparent);
-}
-
-.dark {
-  --background: hsl(0 0% 10.1961%);
-  --foreground: hsl(0 0% 89.8039%);
-  --card: hsl(0 0% 12.5490%);
-  --card-foreground: hsl(0 0% 89.8039%);
-  --popover: hsl(0 0% 12.5490%);
-  --popover-foreground: hsl(0 0% 89.8039%);
-  --primary: hsl(15.1765 72.6496% 54.1176%);
-  --primary-foreground: hsl(0 0% 100%);
-  --secondary: hsl(216.1905 44.0559% 28.0392%);
-  --secondary-foreground: hsl(0 0% 89.8039%);
-  --muted: hsl(0 0% 16.4706%);
-  --muted-foreground: hsl(0 0% 50.1961%);
-  --accent: hsl(223.6364 34.3750% 25.0980%);
-  --accent-foreground: hsl(213.3333 96.9231% 87.2549%);
-  --destructive: hsl(0 84.2365% 60.1961%);
-  --destructive-foreground: hsl(0 0% 100%);
-  --success: hsl(142.1 76.2% 36.3%);
-  --success-foreground: hsl(0 0% 100%);
-  --warning: hsl(45.4 93.4% 47.5%);
-  --warning-foreground: hsl(0 0% 10%);
-  --border: hsl(0 0% 20.7843%);
-  --input: hsl(0 0% 18.8235%);
-  --ring: hsl(13.2143 73.0435% 54.9020%);
-  --chart-1: hsl(210 37.0787% 65.0980%);
-  --chart-2: hsl(17.2500 72.7273% 56.8627%);
-  --chart-3: hsl(355.0345 63.3188% 55.0980%);
-  --chart-4: hsl(41.1538 72.8972% 58.0392%);
-  --chart-5: hsl(223.4483 32.5843% 34.9020%);
-  --sidebar: hsl(0 0% 12.1569%);
-  --sidebar-foreground: hsl(0 0% 89.8039%);
-  --sidebar-primary: hsl(13.2143 73.0435% 54.9020%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(223.6364 34.3750% 25.0980%);
-  --sidebar-accent-foreground: hsl(213.3333 96.9231% 87.2549%);
-  --sidebar-border: hsl(0 0% 20.7843%);
-  --sidebar-ring: hsl(13.2143 73.0435% 54.9020%);
-  --font-sans: "Google Sans", sans-serif;
-  --font-serif: ui-serif, Georgia, serif;
-  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: #1a1a1a;
-  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-md: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.25);
-
-  /* Modus Vivendi (dark) code roles */
-  --code-comment: hsl(0 0% 66%);
-  --code-keyword: hsl(255 100% 83%);
-  --code-keyword-op: hsl(255 100% 83%);
-  --code-keyword-const: hsl(195 100% 50%);
-  --code-type: hsl(158 66% 68%);
-  --code-string: hsl(222 100% 74%);
-  --code-number: hsl(195 100% 50%);
-  --code-function: hsl(330 95% 84%);
-  --code-variable: hsl(178 100% 41%);
-  --code-builtin: hsl(309 89% 80%);
-  --code-operator: hsl(178 100% 41%);
-  --code-tag: hsl(178 100% 41%);
-  --code-diff-add: hsl(158 66% 68%);
-  --code-highlight: color-mix(in hsl, var(--accent) 65%, transparent);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/examples/latte/server.php b/examples/latte/server.php
deleted file mode 100644
index 520f0e2..0000000
--- a/examples/latte/server.php
+++ /dev/null
@@ -1,37 +0,0 @@
-<?php
-
-/**
- * Latte welcome preview — php -S 127.0.0.1:5176 server.php
- * Renders the generated .latte primitives with the shared shadcn tokens.
- */
-
-declare(strict_types=1);
-
-$root = dirname(__DIR__, 2); // ui8kit-codegen/
-
-$uri = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH) ?: '/';
-
-if (str_starts_with($uri, '/static/')) {
-    $file = dirname(__DIR__) . '/web' . $uri;
-    if (is_file($file)) {
-        $types = ['css' => 'text/css', 'js' => 'text/javascript', 'svg' => 'image/svg+xml', 'woff2' => 'font/woff2'];
-        header('Content-Type: ' . ($types[pathinfo($file, PATHINFO_EXTENSION)] ?? 'application/octet-stream'));
-        readfile($file);
-        return;
-    }
-    http_response_code(404);
-    echo 'Not found';
-    return;
-}
-
-require $root . '/generated/php/vendor/autoload.php';
-
-$latte = new Latte\Engine();
-$tmp = sys_get_temp_dir() . '/ui8kit-latte-example';
-if (!is_dir($tmp)) {
-    mkdir($tmp, 0777, true);
-}
-$latte->setTempDirectory($tmp);
-$latte->setLoader(new Latte\Loaders\FileLoader($root));
-
-echo $latte->renderToString('examples/latte/templates/page.latte', ['runtime' => 'Latte']);
diff --git a/examples/latte/templates/page.latte b/examples/latte/templates/page.latte
deleted file mode 100644
index cdcee04..0000000
--- a/examples/latte/templates/page.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{parameters string $runtime = 'Latte'}
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>UI8Kit Codegen · Latte</title>
-		<link rel="stylesheet" href="/static/css/app.css">
-	</head>
-	<body class="bg-background text-foreground antialiased">
-		{include 'welcome.latte', runtime: $runtime}
-	</body>
-</html>
diff --git a/examples/latte/templates/welcome.latte b/examples/latte/templates/welcome.latte
deleted file mode 100644
index 213f3a1..0000000
--- a/examples/latte/templates/welcome.latte
+++ /dev/null
@@ -1,107 +0,0 @@
-{parameters string $runtime = 'Latte'}
-
-{* Hero *}
-{capture $hero}
-	{include '../../../generated/ui/badge/Badge.latte', variant: 'outline', class: 'text-xs uppercase tracking-wide', children: $runtime}
-	{include '../../../generated/ui/title/Title.latte', as: 1, class: 'text-3xl font-bold tracking-tight', children: 'UI8Kit Codegen'}
-	{include '../../../generated/ui/text/Text.latte', class: 'max-w-2xl text-muted-foreground', children: 'One typed render contract — seven generated runtimes with identical DOM, design, and ARIA.'}
-{/capture}
-{capture $heroStack}
-	{include '../../../generated/ui/stack/Stack.latte', class: 'items-center gap-4 text-center', children: (string) $hero}
-{/capture}
-
-{* Primitives card *}
-{capture $buttons}
-	{include '../../../generated/ui/button/Button.latte', variant: 'default', size: 'sm', children: 'Default'}
-	{include '../../../generated/ui/button/Button.latte', variant: 'secondary', size: 'sm', children: 'Secondary'}
-	{include '../../../generated/ui/button/Button.latte', variant: 'outline', size: 'sm', children: 'Outline'}
-	{include '../../../generated/ui/button/Button.latte', variant: 'ghost', size: 'sm', children: 'Ghost'}
-	{include '../../../generated/ui/button/Button.latte', variant: 'destructive', size: 'sm', children: 'Destructive'}
-{/capture}
-{capture $badges}
-	{include '../../../generated/ui/badge/Badge.latte', variant: 'default', children: 'Badge'}
-	{include '../../../generated/ui/badge/Badge.latte', variant: 'secondary', children: 'Secondary'}
-	{include '../../../generated/ui/badge/Badge.latte', variant: 'outline', children: 'Outline'}
-{/capture}
-{capture $showcase}
-	{include '../../../generated/ui/group/Group.latte', class: 'flex-wrap gap-2', children: (string) $buttons}
-	{include '../../../generated/ui/group/Group.latte', class: 'flex-wrap gap-2', children: (string) $badges}
-{/capture}
-{capture $showcaseStack}
-	{include '../../../generated/ui/stack/Stack.latte', class: 'gap-4', children: (string) $showcase}
-{/capture}
-{capture $primitivesTitle}
-	{include '../../../generated/ui/card/CardTitle.latte', children: 'Generated primitives'}
-{/capture}
-{capture $primitivesCardInner}
-	{include '../../../generated/ui/card/CardHeader.latte', children: (string) $primitivesTitle}
-	{include '../../../generated/ui/card/CardContent.latte', children: (string) $showcaseStack}
-{/capture}
-{capture $primitivesCard}
-	{include '../../../generated/ui/card/Card.latte', variant: 'default', children: (string) $primitivesCardInner}
-{/capture}
-
-{* Feature cards *}
-{var $features = [
-	['title' => 'Spec-driven', 'description' => 'Brick definitions in a tiny expression IR — no hand-written drift across stacks.'],
-	['title' => 'Seven runtimes', 'description' => 'Go Templ, React 19, Svelte 5, Vue 3, Latte, Twig, and static HTML from the same source.'],
-	['title' => 'DOM parity', 'description' => 'The canonical renderer is the executable specification, verified by tests.'],
-]}
-{capture $featureCards}
-	{foreach $features as $feature}
-		{capture $featureTitle}
-			{include '../../../generated/ui/card/CardTitle.latte', children: $feature['title']}
-		{/capture}
-		{capture $featureText}
-			{include '../../../generated/ui/text/Text.latte', class: 'text-sm text-muted-foreground', children: $feature['description']}
-		{/capture}
-		{capture $featureInner}
-			{include '../../../generated/ui/card/CardHeader.latte', children: (string) $featureTitle}
-			{include '../../../generated/ui/card/CardContent.latte', children: (string) $featureText}
-		{/capture}
-		{include '../../../generated/ui/card/Card.latte', variant: 'muted', children: (string) $featureInner}
-	{/foreach}
-{/capture}
-{capture $featureGrid}
-	{include '../../../generated/ui/grid/Grid.latte', cols: '1-3', class: 'gap-4', children: (string) $featureCards}
-{/capture}
-
-{* Runtime links *}
-{var $runtimes = [
-	['label' => 'Go Templ', 'port' => 8080],
-	['label' => 'React 19', 'port' => 5173],
-	['label' => 'Svelte 5', 'port' => 5174],
-	['label' => 'Vue 3', 'port' => 5175],
-	['label' => 'Latte', 'port' => 5176],
-	['label' => 'Twig', 'port' => 5177],
-]}
-{capture $links}
-	{foreach $runtimes as $rt}
-		{include '../../../generated/ui/link/Link.latte', href: 'http://127.0.0.1:' . $rt['port'], variant: 'default', children: $rt['label']}
-	{/foreach}
-{/capture}
-{capture $linksLabel}
-	{include '../../../generated/ui/text/Text.latte', class: 'text-sm font-medium', children: 'Preview other runtimes'}
-{/capture}
-{capture $linksGroup}
-	{include '../../../generated/ui/group/Group.latte', class: 'flex-wrap gap-3', children: (string) $links}
-{/capture}
-{capture $linksStack}
-	{include '../../../generated/ui/stack/Stack.latte', class: 'gap-3', children: (string) $linksLabel . (string) $linksGroup}
-{/capture}
-{capture $linksBox}
-	{include '../../../generated/ui/box/Box.latte', class: 'rounded-lg border border-border bg-card p-4', children: (string) $linksStack}
-{/capture}
-
-{capture $footer}
-	{include '../../../generated/ui/text/Text.latte', class: 'text-center text-sm text-muted-foreground', children: 'Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen'}
-{/capture}
-
-{* Page assembly *}
-{capture $pageStack}
-	{include '../../../generated/ui/stack/Stack.latte', class: 'gap-8', children: (string) $heroStack . (string) $primitivesCard . (string) $featureGrid . (string) $linksBox . (string) $footer}
-{/capture}
-{capture $container}
-	{include '../../../generated/ui/container/Container.latte', class: 'mx-auto max-w-4xl px-4 py-16', children: (string) $pageStack}
-{/capture}
-{include '../../../generated/ui/block/Block.latte', tag: 'main', class: 'min-h-screen bg-muted/30 text-foreground', children: (string) $container}
diff --git a/examples/package.json b/examples/package.json
deleted file mode 100644
index 0036d03..0000000
--- a/examples/package.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "name": "ui8kit-codegen-examples",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build:css": "tailwindcss -i ./web/static/css/input.css -o ./web/static/css/app.css --minify",
-    "gen:templ": "cd ../generated && go run github.com/a-h/templ/cmd/templ@v0.3.1001 generate ./... && cd ../examples/templ && go run github.com/a-h/templ/cmd/templ@v0.3.1001 generate ./...",
-    "composer:install": "bun scripts/composer-install.mjs",
-    "dev:templ": "bun run gen:templ && bun run build:css && cd templ && go run ./cmd/server",
-    "dev:react": "bun run build:css && vite --config react/vite.config.ts",
-    "dev:svelte": "bun run build:css && vite --config svelte/vite.config.ts",
-    "dev:vue": "bun run build:css && vite --config vue/vite.config.ts",
-    "dev:solid": "bun run build:css && vite --config solid/vite.config.ts",
-    "dev:latte": "bun run composer:install && bun run build:css && bun scripts/php-server.mjs latte 5176",
-    "dev:twig": "bun run composer:install && bun run build:css && bun scripts/php-server.mjs twig 5177",
-    "build:html": "bun run build:css && bun react/script/generate-static.tsx"
-  },
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "solid-js": "^1.9.5",
-    "svelte": "^5.19.0",
-    "tailwind-merge": "^2.6.0",
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/cli": "^4.2.1",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "@vitejs/plugin-react": "^4.5.2",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "sirv": "^3.0.1",
-    "tailwindcss": "^4.2.1",
-    "typescript": "^5.7.3",
-    "vite": "^6.3.5",
-    "vite-plugin-solid": "^2.11.6"
-  }
-}
diff --git a/examples/react/dist/assets/index-TdQjjyEy.js b/examples/react/dist/assets/index-TdQjjyEy.js
deleted file mode 100644
index 9e4ecbd..0000000
--- a/examples/react/dist/assets/index-TdQjjyEy.js
+++ /dev/null
@@ -1,49 +0,0 @@
-(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const y of document.querySelectorAll('link[rel="modulepreload"]'))s(y);new MutationObserver(y=>{for(const m of y)if(m.type==="childList")for(const g of m.addedNodes)g.tagName==="LINK"&&g.rel==="modulepreload"&&s(g)}).observe(document,{childList:!0,subtree:!0});function o(y){const m={};return y.integrity&&(m.integrity=y.integrity),y.referrerPolicy&&(m.referrerPolicy=y.referrerPolicy),y.crossOrigin==="use-credentials"?m.credentials="include":y.crossOrigin==="anonymous"?m.credentials="omit":m.credentials="same-origin",m}function s(y){if(y.ep)return;y.ep=!0;const m=o(y);fetch(y.href,m)}})();var Ds={exports:{}},Yn={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var Fd;function Wv(){if(Fd)return Yn;Fd=1;var c=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(s,y,m){var g=null;if(m!==void 0&&(g=""+m),y.key!==void 0&&(g=""+y.key),"key"in y){m={};for(var T in y)T!=="key"&&(m[T]=y[T])}else m=y;return y=m.ref,{$$typeof:c,type:s,key:g,ref:y!==void 0?y:null,props:m}}return Yn.Fragment=r,Yn.jsx=o,Yn.jsxs=o,Yn}var Id;function Fv(){return Id||(Id=1,Ds.exports=Wv()),Ds.exports}var C=Fv(),js={exports:{}},Z={};/**
- * @license React
- * react.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var Pd;function Iv(){if(Pd)return Z;Pd=1;var c=Symbol.for("react.transitional.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),s=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),m=Symbol.for("react.consumer"),g=Symbol.for("react.context"),T=Symbol.for("react.forward_ref"),N=Symbol.for("react.suspense"),p=Symbol.for("react.memo"),H=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),Q=Symbol.iterator;function at(v){return v===null||typeof v!="object"?null:(v=Q&&v[Q]||v["@@iterator"],typeof v=="function"?v:null)}var ft={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},nt=Object.assign,$={};function mt(v,M,U){this.props=v,this.context=M,this.refs=$,this.updater=U||ft}mt.prototype.isReactComponent={},mt.prototype.setState=function(v,M){if(typeof v!="object"&&typeof v!="function"&&v!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,v,M,"setState")},mt.prototype.forceUpdate=function(v){this.updater.enqueueForceUpdate(this,v,"forceUpdate")};function Ot(){}Ot.prototype=mt.prototype;function Rt(v,M,U){this.props=v,this.context=M,this.refs=$,this.updater=U||ft}var Ut=Rt.prototype=new Ot;Ut.constructor=Rt,nt(Ut,mt.prototype),Ut.isPureReactComponent=!0;var Ft=Array.isArray;function Kt(){}var P={H:null,A:null,T:null,S:null},Vt=Object.prototype.hasOwnProperty;function te(v,M,U){var w=U.ref;return{$$typeof:c,type:v,key:M,ref:w!==void 0?w:null,props:U}}function Be(v,M){return te(v.type,M,v.props)}function ee(v){return typeof v=="object"&&v!==null&&v.$$typeof===c}function I(v){var M={"=":"=0",":":"=2"};return"$"+v.replace(/[=:]/g,function(U){return M[U]})}var qe=/\/+/g;function le(v,M){return typeof v=="object"&&v!==null&&v.key!=null?I(""+v.key):M.toString(36)}function ae(v){switch(v.status){case"fulfilled":return v.value;case"rejected":throw v.reason;default:switch(typeof v.status=="string"?v.then(Kt,Kt):(v.status="pending",v.then(function(M){v.status==="pending"&&(v.status="fulfilled",v.value=M)},function(M){v.status==="pending"&&(v.status="rejected",v.reason=M)})),v.status){case"fulfilled":return v.value;case"rejected":throw v.reason}}throw v}function E(v,M,U,w,L){var tt=typeof v;(tt==="undefined"||tt==="boolean")&&(v=null);var vt=!1;if(v===null)vt=!0;else switch(tt){case"bigint":case"string":case"number":vt=!0;break;case"object":switch(v.$$typeof){case c:case r:vt=!0;break;case H:return vt=v._init,E(vt(v._payload),M,U,w,L)}}if(vt)return L=L(v),vt=w===""?"."+le(v,0):w,Ft(L)?(U="",vt!=null&&(U=vt.replace(qe,"$&/")+"/"),E(L,M,U,"",function(La){return La})):L!=null&&(ee(L)&&(L=Be(L,U+(L.key==null||v&&v.key===L.key?"":(""+L.key).replace(qe,"$&/")+"/")+vt)),M.push(L)),1;vt=0;var It=w===""?".":w+":";if(Ft(v))for(var Mt=0;Mt<v.length;Mt++)w=v[Mt],tt=It+le(w,Mt),vt+=E(w,M,U,tt,L);else if(Mt=at(v),typeof Mt=="function")for(v=Mt.call(v),Mt=0;!(w=v.next()).done;)w=w.value,tt=It+le(w,Mt++),vt+=E(w,M,U,tt,L);else if(tt==="object"){if(typeof v.then=="function")return E(ae(v),M,U,w,L);throw M=String(v),Error("Objects are not valid as a React child (found: "+(M==="[object Object]"?"object with keys {"+Object.keys(v).join(", ")+"}":M)+"). If you meant to render a collection of children, use an array instead.")}return vt}function D(v,M,U){if(v==null)return v;var w=[],L=0;return E(v,w,"","",function(tt){return M.call(U,tt,L++)}),w}function K(v){if(v._status===-1){var M=v._result;M=M(),M.then(function(U){(v._status===0||v._status===-1)&&(v._status=1,v._result=U)},function(U){(v._status===0||v._status===-1)&&(v._status=2,v._result=U)}),v._status===-1&&(v._status=0,v._result=M)}if(v._status===1)return v._result.default;throw v._result}var st=typeof reportError=="function"?reportError:function(v){if(typeof window=="object"&&typeof window.ErrorEvent=="function"){var M=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:typeof v=="object"&&v!==null&&typeof v.message=="string"?String(v.message):String(v),error:v});if(!window.dispatchEvent(M))return}else if(typeof process=="object"&&typeof process.emit=="function"){process.emit("uncaughtException",v);return}console.error(v)},yt={map:D,forEach:function(v,M,U){D(v,function(){M.apply(this,arguments)},U)},count:function(v){var M=0;return D(v,function(){M++}),M},toArray:function(v){return D(v,function(M){return M})||[]},only:function(v){if(!ee(v))throw Error("React.Children.only expected to receive a single React element child.");return v}};return Z.Activity=j,Z.Children=yt,Z.Component=mt,Z.Fragment=o,Z.Profiler=y,Z.PureComponent=Rt,Z.StrictMode=s,Z.Suspense=N,Z.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=P,Z.__COMPILER_RUNTIME={__proto__:null,c:function(v){return P.H.useMemoCache(v)}},Z.cache=function(v){return function(){return v.apply(null,arguments)}},Z.cacheSignal=function(){return null},Z.cloneElement=function(v,M,U){if(v==null)throw Error("The argument must be a React element, but you passed "+v+".");var w=nt({},v.props),L=v.key;if(M!=null)for(tt in M.key!==void 0&&(L=""+M.key),M)!Vt.call(M,tt)||tt==="key"||tt==="__self"||tt==="__source"||tt==="ref"&&M.ref===void 0||(w[tt]=M[tt]);var tt=arguments.length-2;if(tt===1)w.children=U;else if(1<tt){for(var vt=Array(tt),It=0;It<tt;It++)vt[It]=arguments[It+2];w.children=vt}return te(v.type,L,w)},Z.createContext=function(v){return v={$$typeof:g,_currentValue:v,_currentValue2:v,_threadCount:0,Provider:null,Consumer:null},v.Provider=v,v.Consumer={$$typeof:m,_context:v},v},Z.createElement=function(v,M,U){var w,L={},tt=null;if(M!=null)for(w in M.key!==void 0&&(tt=""+M.key),M)Vt.call(M,w)&&w!=="key"&&w!=="__self"&&w!=="__source"&&(L[w]=M[w]);var vt=arguments.length-2;if(vt===1)L.children=U;else if(1<vt){for(var It=Array(vt),Mt=0;Mt<vt;Mt++)It[Mt]=arguments[Mt+2];L.children=It}if(v&&v.defaultProps)for(w in vt=v.defaultProps,vt)L[w]===void 0&&(L[w]=vt[w]);return te(v,tt,L)},Z.createRef=function(){return{current:null}},Z.forwardRef=function(v){return{$$typeof:T,render:v}},Z.isValidElement=ee,Z.lazy=function(v){return{$$typeof:H,_payload:{_status:-1,_result:v},_init:K}},Z.memo=function(v,M){return{$$typeof:p,type:v,compare:M===void 0?null:M}},Z.startTransition=function(v){var M=P.T,U={};P.T=U;try{var w=v(),L=P.S;L!==null&&L(U,w),typeof w=="object"&&w!==null&&typeof w.then=="function"&&w.then(Kt,st)}catch(tt){st(tt)}finally{M!==null&&U.types!==null&&(M.types=U.types),P.T=M}},Z.unstable_useCacheRefresh=function(){return P.H.useCacheRefresh()},Z.use=function(v){return P.H.use(v)},Z.useActionState=function(v,M,U){return P.H.useActionState(v,M,U)},Z.useCallback=function(v,M){return P.H.useCallback(v,M)},Z.useContext=function(v){return P.H.useContext(v)},Z.useDebugValue=function(){},Z.useDeferredValue=function(v,M){return P.H.useDeferredValue(v,M)},Z.useEffect=function(v,M){return P.H.useEffect(v,M)},Z.useEffectEvent=function(v){return P.H.useEffectEvent(v)},Z.useId=function(){return P.H.useId()},Z.useImperativeHandle=function(v,M,U){return P.H.useImperativeHandle(v,M,U)},Z.useInsertionEffect=function(v,M){return P.H.useInsertionEffect(v,M)},Z.useLayoutEffect=function(v,M){return P.H.useLayoutEffect(v,M)},Z.useMemo=function(v,M){return P.H.useMemo(v,M)},Z.useOptimistic=function(v,M){return P.H.useOptimistic(v,M)},Z.useReducer=function(v,M,U){return P.H.useReducer(v,M,U)},Z.useRef=function(v){return P.H.useRef(v)},Z.useState=function(v){return P.H.useState(v)},Z.useSyncExternalStore=function(v,M,U){return P.H.useSyncExternalStore(v,M,U)},Z.useTransition=function(){return P.H.useTransition()},Z.version="19.2.7",Z}var tm;function Zs(){return tm||(tm=1,js.exports=Iv()),js.exports}var B=Zs(),Us={exports:{}},Xn={},Hs={exports:{}},Bs={};/**
- * @license React
- * scheduler.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var em;function Pv(){return em||(em=1,(function(c){function r(E,D){var K=E.length;E.push(D);t:for(;0<K;){var st=K-1>>>1,yt=E[st];if(0<y(yt,D))E[st]=D,E[K]=yt,K=st;else break t}}function o(E){return E.length===0?null:E[0]}function s(E){if(E.length===0)return null;var D=E[0],K=E.pop();if(K!==D){E[0]=K;t:for(var st=0,yt=E.length,v=yt>>>1;st<v;){var M=2*(st+1)-1,U=E[M],w=M+1,L=E[w];if(0>y(U,K))w<yt&&0>y(L,U)?(E[st]=L,E[w]=K,st=w):(E[st]=U,E[M]=K,st=M);else if(w<yt&&0>y(L,K))E[st]=L,E[w]=K,st=w;else break t}}return D}function y(E,D){var K=E.sortIndex-D.sortIndex;return K!==0?K:E.id-D.id}if(c.unstable_now=void 0,typeof performance=="object"&&typeof performance.now=="function"){var m=performance;c.unstable_now=function(){return m.now()}}else{var g=Date,T=g.now();c.unstable_now=function(){return g.now()-T}}var N=[],p=[],H=1,j=null,Q=3,at=!1,ft=!1,nt=!1,$=!1,mt=typeof setTimeout=="function"?setTimeout:null,Ot=typeof clearTimeout=="function"?clearTimeout:null,Rt=typeof setImmediate<"u"?setImmediate:null;function Ut(E){for(var D=o(p);D!==null;){if(D.callback===null)s(p);else if(D.startTime<=E)s(p),D.sortIndex=D.expirationTime,r(N,D);else break;D=o(p)}}function Ft(E){if(nt=!1,Ut(E),!ft)if(o(N)!==null)ft=!0,Kt||(Kt=!0,I());else{var D=o(p);D!==null&&ae(Ft,D.startTime-E)}}var Kt=!1,P=-1,Vt=5,te=-1;function Be(){return $?!0:!(c.unstable_now()-te<Vt)}function ee(){if($=!1,Kt){var E=c.unstable_now();te=E;var D=!0;try{t:{ft=!1,nt&&(nt=!1,Ot(P),P=-1),at=!0;var K=Q;try{e:{for(Ut(E),j=o(N);j!==null&&!(j.expirationTime>E&&Be());){var st=j.callback;if(typeof st=="function"){j.callback=null,Q=j.priorityLevel;var yt=st(j.expirationTime<=E);if(E=c.unstable_now(),typeof yt=="function"){j.callback=yt,Ut(E),D=!0;break e}j===o(N)&&s(N),Ut(E)}else s(N);j=o(N)}if(j!==null)D=!0;else{var v=o(p);v!==null&&ae(Ft,v.startTime-E),D=!1}}break t}finally{j=null,Q=K,at=!1}D=void 0}}finally{D?I():Kt=!1}}}var I;if(typeof Rt=="function")I=function(){Rt(ee)};else if(typeof MessageChannel<"u"){var qe=new MessageChannel,le=qe.port2;qe.port1.onmessage=ee,I=function(){le.postMessage(null)}}else I=function(){mt(ee,0)};function ae(E,D){P=mt(function(){E(c.unstable_now())},D)}c.unstable_IdlePriority=5,c.unstable_ImmediatePriority=1,c.unstable_LowPriority=4,c.unstable_NormalPriority=3,c.unstable_Profiling=null,c.unstable_UserBlockingPriority=2,c.unstable_cancelCallback=function(E){E.callback=null},c.unstable_forceFrameRate=function(E){0>E||125<E?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):Vt=0<E?Math.floor(1e3/E):5},c.unstable_getCurrentPriorityLevel=function(){return Q},c.unstable_next=function(E){switch(Q){case 1:case 2:case 3:var D=3;break;default:D=Q}var K=Q;Q=D;try{return E()}finally{Q=K}},c.unstable_requestPaint=function(){$=!0},c.unstable_runWithPriority=function(E,D){switch(E){case 1:case 2:case 3:case 4:case 5:break;default:E=3}var K=Q;Q=E;try{return D()}finally{Q=K}},c.unstable_scheduleCallback=function(E,D,K){var st=c.unstable_now();switch(typeof K=="object"&&K!==null?(K=K.delay,K=typeof K=="number"&&0<K?st+K:st):K=st,E){case 1:var yt=-1;break;case 2:yt=250;break;case 5:yt=1073741823;break;case 4:yt=1e4;break;default:yt=5e3}return yt=K+yt,E={id:H++,callback:D,priorityLevel:E,startTime:K,expirationTime:yt,sortIndex:-1},K>st?(E.sortIndex=K,r(p,E),o(N)===null&&E===o(p)&&(nt?(Ot(P),P=-1):nt=!0,ae(Ft,K-st))):(E.sortIndex=yt,r(N,E),ft||at||(ft=!0,Kt||(Kt=!0,I()))),E},c.unstable_shouldYield=Be,c.unstable_wrapCallback=function(E){var D=Q;return function(){var K=Q;Q=D;try{return E.apply(this,arguments)}finally{Q=K}}}})(Bs)),Bs}var lm;function tb(){return lm||(lm=1,Hs.exports=Pv()),Hs.exports}var qs={exports:{}},Wt={};/**
- * @license React
- * react-dom.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var am;function eb(){if(am)return Wt;am=1;var c=Zs();function r(N){var p="https://react.dev/errors/"+N;if(1<arguments.length){p+="?args[]="+encodeURIComponent(arguments[1]);for(var H=2;H<arguments.length;H++)p+="&args[]="+encodeURIComponent(arguments[H])}return"Minified React error #"+N+"; visit "+p+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function o(){}var s={d:{f:o,r:function(){throw Error(r(522))},D:o,C:o,L:o,m:o,X:o,S:o,M:o},p:0,findDOMNode:null},y=Symbol.for("react.portal");function m(N,p,H){var j=3<arguments.length&&arguments[3]!==void 0?arguments[3]:null;return{$$typeof:y,key:j==null?null:""+j,children:N,containerInfo:p,implementation:H}}var g=c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;function T(N,p){if(N==="font")return"";if(typeof p=="string")return p==="use-credentials"?p:""}return Wt.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=s,Wt.createPortal=function(N,p){var H=2<arguments.length&&arguments[2]!==void 0?arguments[2]:null;if(!p||p.nodeType!==1&&p.nodeType!==9&&p.nodeType!==11)throw Error(r(299));return m(N,p,null,H)},Wt.flushSync=function(N){var p=g.T,H=s.p;try{if(g.T=null,s.p=2,N)return N()}finally{g.T=p,s.p=H,s.d.f()}},Wt.preconnect=function(N,p){typeof N=="string"&&(p?(p=p.crossOrigin,p=typeof p=="string"?p==="use-credentials"?p:"":void 0):p=null,s.d.C(N,p))},Wt.prefetchDNS=function(N){typeof N=="string"&&s.d.D(N)},Wt.preinit=function(N,p){if(typeof N=="string"&&p&&typeof p.as=="string"){var H=p.as,j=T(H,p.crossOrigin),Q=typeof p.integrity=="string"?p.integrity:void 0,at=typeof p.fetchPriority=="string"?p.fetchPriority:void 0;H==="style"?s.d.S(N,typeof p.precedence=="string"?p.precedence:void 0,{crossOrigin:j,integrity:Q,fetchPriority:at}):H==="script"&&s.d.X(N,{crossOrigin:j,integrity:Q,fetchPriority:at,nonce:typeof p.nonce=="string"?p.nonce:void 0})}},Wt.preinitModule=function(N,p){if(typeof N=="string")if(typeof p=="object"&&p!==null){if(p.as==null||p.as==="script"){var H=T(p.as,p.crossOrigin);s.d.M(N,{crossOrigin:H,integrity:typeof p.integrity=="string"?p.integrity:void 0,nonce:typeof p.nonce=="string"?p.nonce:void 0})}}else p==null&&s.d.M(N)},Wt.preload=function(N,p){if(typeof N=="string"&&typeof p=="object"&&p!==null&&typeof p.as=="string"){var H=p.as,j=T(H,p.crossOrigin);s.d.L(N,H,{crossOrigin:j,integrity:typeof p.integrity=="string"?p.integrity:void 0,nonce:typeof p.nonce=="string"?p.nonce:void 0,type:typeof p.type=="string"?p.type:void 0,fetchPriority:typeof p.fetchPriority=="string"?p.fetchPriority:void 0,referrerPolicy:typeof p.referrerPolicy=="string"?p.referrerPolicy:void 0,imageSrcSet:typeof p.imageSrcSet=="string"?p.imageSrcSet:void 0,imageSizes:typeof p.imageSizes=="string"?p.imageSizes:void 0,media:typeof p.media=="string"?p.media:void 0})}},Wt.preloadModule=function(N,p){if(typeof N=="string")if(p){var H=T(p.as,p.crossOrigin);s.d.m(N,{as:typeof p.as=="string"&&p.as!=="script"?p.as:void 0,crossOrigin:H,integrity:typeof p.integrity=="string"?p.integrity:void 0})}else s.d.m(N)},Wt.requestFormReset=function(N){s.d.r(N)},Wt.unstable_batchedUpdates=function(N,p){return N(p)},Wt.useFormState=function(N,p,H){return g.H.useFormState(N,p,H)},Wt.useFormStatus=function(){return g.H.useHostTransitionStatus()},Wt.version="19.2.7",Wt}var nm;function lb(){if(nm)return qs.exports;nm=1;function c(){if(!(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__>"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!="function"))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(c)}catch(r){console.error(r)}}return c(),qs.exports=eb(),qs.exports}/**
- * @license React
- * react-dom-client.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var um;function ab(){if(um)return Xn;um=1;var c=tb(),r=Zs(),o=lb();function s(t){var e="https://react.dev/errors/"+t;if(1<arguments.length){e+="?args[]="+encodeURIComponent(arguments[1]);for(var l=2;l<arguments.length;l++)e+="&args[]="+encodeURIComponent(arguments[l])}return"Minified React error #"+t+"; visit "+e+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function y(t){return!(!t||t.nodeType!==1&&t.nodeType!==9&&t.nodeType!==11)}function m(t){var e=t,l=t;if(t.alternate)for(;e.return;)e=e.return;else{t=e;do e=t,(e.flags&4098)!==0&&(l=e.return),t=e.return;while(t)}return e.tag===3?l:null}function g(t){if(t.tag===13){var e=t.memoizedState;if(e===null&&(t=t.alternate,t!==null&&(e=t.memoizedState)),e!==null)return e.dehydrated}return null}function T(t){if(t.tag===31){var e=t.memoizedState;if(e===null&&(t=t.alternate,t!==null&&(e=t.memoizedState)),e!==null)return e.dehydrated}return null}function N(t){if(m(t)!==t)throw Error(s(188))}function p(t){var e=t.alternate;if(!e){if(e=m(t),e===null)throw Error(s(188));return e!==t?null:t}for(var l=t,a=e;;){var n=l.return;if(n===null)break;var u=n.alternate;if(u===null){if(a=n.return,a!==null){l=a;continue}break}if(n.child===u.child){for(u=n.child;u;){if(u===l)return N(n),t;if(u===a)return N(n),e;u=u.sibling}throw Error(s(188))}if(l.return!==a.return)l=n,a=u;else{for(var i=!1,f=n.child;f;){if(f===l){i=!0,l=n,a=u;break}if(f===a){i=!0,a=n,l=u;break}f=f.sibling}if(!i){for(f=u.child;f;){if(f===l){i=!0,l=u,a=n;break}if(f===a){i=!0,a=u,l=n;break}f=f.sibling}if(!i)throw Error(s(189))}}if(l.alternate!==a)throw Error(s(190))}if(l.tag!==3)throw Error(s(188));return l.stateNode.current===l?t:e}function H(t){var e=t.tag;if(e===5||e===26||e===27||e===6)return t;for(t=t.child;t!==null;){if(e=H(t),e!==null)return e;t=t.sibling}return null}var j=Object.assign,Q=Symbol.for("react.element"),at=Symbol.for("react.transitional.element"),ft=Symbol.for("react.portal"),nt=Symbol.for("react.fragment"),$=Symbol.for("react.strict_mode"),mt=Symbol.for("react.profiler"),Ot=Symbol.for("react.consumer"),Rt=Symbol.for("react.context"),Ut=Symbol.for("react.forward_ref"),Ft=Symbol.for("react.suspense"),Kt=Symbol.for("react.suspense_list"),P=Symbol.for("react.memo"),Vt=Symbol.for("react.lazy"),te=Symbol.for("react.activity"),Be=Symbol.for("react.memo_cache_sentinel"),ee=Symbol.iterator;function I(t){return t===null||typeof t!="object"?null:(t=ee&&t[ee]||t["@@iterator"],typeof t=="function"?t:null)}var qe=Symbol.for("react.client.reference");function le(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===qe?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case nt:return"Fragment";case mt:return"Profiler";case $:return"StrictMode";case Ft:return"Suspense";case Kt:return"SuspenseList";case te:return"Activity"}if(typeof t=="object")switch(t.$$typeof){case ft:return"Portal";case Rt:return t.displayName||"Context";case Ot:return(t._context.displayName||"Context")+".Consumer";case Ut:var e=t.render;return t=t.displayName,t||(t=e.displayName||e.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case P:return e=t.displayName||null,e!==null?e:le(t.type)||"Memo";case Vt:e=t._payload,t=t._init;try{return le(t(e))}catch{}}return null}var ae=Array.isArray,E=r.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=o.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K={pending:!1,data:null,method:null,action:null},st=[],yt=-1;function v(t){return{current:t}}function M(t){0>yt||(t.current=st[yt],st[yt]=null,yt--)}function U(t,e){yt++,st[yt]=t.current,t.current=e}var w=v(null),L=v(null),tt=v(null),vt=v(null);function It(t,e){switch(U(tt,e),U(L,t),U(w,null),e.nodeType){case 9:case 11:t=(t=e.documentElement)&&(t=t.namespaceURI)?Sd(t):0;break;default:if(t=e.tagName,e=e.namespaceURI)e=Sd(e),t=zd(e,t);else switch(t){case"svg":t=1;break;case"math":t=2;break;default:t=0}}M(w),U(w,t)}function Mt(){M(w),M(L),M(tt)}function La(t){t.memoizedState!==null&&U(vt,t);var e=w.current,l=zd(e,t.type);e!==l&&(U(L,t),U(w,l))}function Jn(t){L.current===t&&(M(w),M(L)),vt.current===t&&(M(vt),Bn._currentValue=K)}var yi,$s;function ql(t){if(yi===void 0)try{throw Error()}catch(l){var e=l.stack.trim().match(/\n( *(at )?)/);yi=e&&e[1]||"",$s=-1<l.stack.indexOf(`
-    at`)?" (<anonymous>)":-1<l.stack.indexOf("@")?"@unknown:0:0":""}return`
-`+yi+t+$s}var vi=!1;function bi(t,e){if(!t||vi)return"";vi=!0;var l=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var a={DetermineComponentFrameRoot:function(){try{if(e){var O=function(){throw Error()};if(Object.defineProperty(O.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(O,[])}catch(A){var x=A}Reflect.construct(t,[],O)}else{try{O.call()}catch(A){x=A}t.call(O.prototype)}}else{try{throw Error()}catch(A){x=A}(O=t())&&typeof O.catch=="function"&&O.catch(function(){})}}catch(A){if(A&&x&&typeof A.stack=="string")return[A.stack,x.stack]}return[null,null]}};a.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var n=Object.getOwnPropertyDescriptor(a.DetermineComponentFrameRoot,"name");n&&n.configurable&&Object.defineProperty(a.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var u=a.DetermineComponentFrameRoot(),i=u[0],f=u[1];if(i&&f){var d=i.split(`
-`),z=f.split(`
-`);for(n=a=0;a<d.length&&!d[a].includes("DetermineComponentFrameRoot");)a++;for(;n<z.length&&!z[n].includes("DetermineComponentFrameRoot");)n++;if(a===d.length||n===z.length)for(a=d.length-1,n=z.length-1;1<=a&&0<=n&&d[a]!==z[n];)n--;for(;1<=a&&0<=n;a--,n--)if(d[a]!==z[n]){if(a!==1||n!==1)do if(a--,n--,0>n||d[a]!==z[n]){var R=`
-`+d[a].replace(" at new "," at ");return t.displayName&&R.includes("<anonymous>")&&(R=R.replace("<anonymous>",t.displayName)),R}while(1<=a&&0<=n);break}}}finally{vi=!1,Error.prepareStackTrace=l}return(l=t?t.displayName||t.name:"")?ql(l):""}function Rm(t,e){switch(t.tag){case 26:case 27:case 5:return ql(t.type);case 16:return ql("Lazy");case 13:return t.child!==e&&e!==null?ql("Suspense Fallback"):ql("Suspense");case 19:return ql("SuspenseList");case 0:case 15:return bi(t.type,!1);case 11:return bi(t.type.render,!1);case 1:return bi(t.type,!0);case 31:return ql("Activity");default:return""}}function ks(t){try{var e="",l=null;do e+=Rm(t,l),l=t,t=t.return;while(t);return e}catch(a){return`
-Error generating stack: `+a.message+`
-`+a.stack}}var gi=Object.prototype.hasOwnProperty,hi=c.unstable_scheduleCallback,pi=c.unstable_cancelCallback,Cm=c.unstable_shouldYield,_m=c.unstable_requestPaint,de=c.unstable_now,Om=c.unstable_getCurrentPriorityLevel,Ws=c.unstable_ImmediatePriority,Fs=c.unstable_UserBlockingPriority,$n=c.unstable_NormalPriority,Mm=c.unstable_LowPriority,Is=c.unstable_IdlePriority,Dm=c.log,jm=c.unstable_setDisableYieldValue,Ja=null,me=null;function cl(t){if(typeof Dm=="function"&&jm(t),me&&typeof me.setStrictMode=="function")try{me.setStrictMode(Ja,t)}catch{}}var ye=Math.clz32?Math.clz32:Bm,Um=Math.log,Hm=Math.LN2;function Bm(t){return t>>>=0,t===0?32:31-(Um(t)/Hm|0)|0}var kn=256,Wn=262144,Fn=4194304;function Gl(t){var e=t&42;if(e!==0)return e;switch(t&-t){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:return 128;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:return t&261888;case 262144:case 524288:case 1048576:case 2097152:return t&3932160;case 4194304:case 8388608:case 16777216:case 33554432:return t&62914560;case 67108864:return 67108864;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 0;default:return t}}function In(t,e,l){var a=t.pendingLanes;if(a===0)return 0;var n=0,u=t.suspendedLanes,i=t.pingedLanes;t=t.warmLanes;var f=a&134217727;return f!==0?(a=f&~u,a!==0?n=Gl(a):(i&=f,i!==0?n=Gl(i):l||(l=f&~t,l!==0&&(n=Gl(l))))):(f=a&~u,f!==0?n=Gl(f):i!==0?n=Gl(i):l||(l=a&~t,l!==0&&(n=Gl(l)))),n===0?0:e!==0&&e!==n&&(e&u)===0&&(u=n&-n,l=e&-e,u>=l||u===32&&(l&4194048)!==0)?e:n}function $a(t,e){return(t.pendingLanes&~(t.suspendedLanes&~t.pingedLanes)&e)===0}function qm(t,e){switch(t){case 1:case 2:case 4:case 8:case 64:return e+250;case 16:case 32:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return e+5e3;case 4194304:case 8388608:case 16777216:case 33554432:return-1;case 67108864:case 134217728:case 268435456:case 536870912:case 1073741824:return-1;default:return-1}}function Ps(){var t=Fn;return Fn<<=1,(Fn&62914560)===0&&(Fn=4194304),t}function Si(t){for(var e=[],l=0;31>l;l++)e.push(t);return e}function ka(t,e){t.pendingLanes|=e,e!==268435456&&(t.suspendedLanes=0,t.pingedLanes=0,t.warmLanes=0)}function Gm(t,e,l,a,n,u){var i=t.pendingLanes;t.pendingLanes=l,t.suspendedLanes=0,t.pingedLanes=0,t.warmLanes=0,t.expiredLanes&=l,t.entangledLanes&=l,t.errorRecoveryDisabledLanes&=l,t.shellSuspendCounter=0;var f=t.entanglements,d=t.expirationTimes,z=t.hiddenUpdates;for(l=i&~l;0<l;){var R=31-ye(l),O=1<<R;f[R]=0,d[R]=-1;var x=z[R];if(x!==null)for(z[R]=null,R=0;R<x.length;R++){var A=x[R];A!==null&&(A.lane&=-536870913)}l&=~O}a!==0&&tf(t,a,0),u!==0&&n===0&&t.tag!==0&&(t.suspendedLanes|=u&~(i&~e))}function tf(t,e,l){t.pendingLanes|=e,t.suspendedLanes&=~e;var a=31-ye(e);t.entangledLanes|=e,t.entanglements[a]=t.entanglements[a]|1073741824|l&261930}function ef(t,e){var l=t.entangledLanes|=e;for(t=t.entanglements;l;){var a=31-ye(l),n=1<<a;n&e|t[a]&e&&(t[a]|=e),l&=~n}}function lf(t,e){var l=e&-e;return l=(l&42)!==0?1:zi(l),(l&(t.suspendedLanes|e))!==0?0:l}function zi(t){switch(t){case 2:t=1;break;case 8:t=4;break;case 32:t=16;break;case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:t=128;break;case 268435456:t=134217728;break;default:t=0}return t}function xi(t){return t&=-t,2<t?8<t?(t&134217727)!==0?32:268435456:8:2}function af(){var t=D.p;return t!==0?t:(t=window.event,t===void 0?32:Vd(t.type))}function nf(t,e){var l=D.p;try{return D.p=t,e()}finally{D.p=l}}var sl=Math.random().toString(36).slice(2),Zt="__reactFiber$"+sl,ne="__reactProps$"+sl,na="__reactContainer$"+sl,Ti="__reactEvents$"+sl,wm="__reactListeners$"+sl,Ym="__reactHandles$"+sl,uf="__reactResources$"+sl,Wa="__reactMarker$"+sl;function Ni(t){delete t[Zt],delete t[ne],delete t[Ti],delete t[wm],delete t[Ym]}function ua(t){var e=t[Zt];if(e)return e;for(var l=t.parentNode;l;){if(e=l[na]||l[Zt]){if(l=e.alternate,e.child!==null||l!==null&&l.child!==null)for(t=Cd(t);t!==null;){if(l=t[Zt])return l;t=Cd(t)}return e}t=l,l=t.parentNode}return null}function ia(t){if(t=t[Zt]||t[na]){var e=t.tag;if(e===5||e===6||e===13||e===31||e===26||e===27||e===3)return t}return null}function Fa(t){var e=t.tag;if(e===5||e===26||e===27||e===6)return t.stateNode;throw Error(s(33))}function ca(t){var e=t[uf];return e||(e=t[uf]={hoistableStyles:new Map,hoistableScripts:new Map}),e}function Xt(t){t[Wa]=!0}var cf=new Set,sf={};function wl(t,e){sa(t,e),sa(t+"Capture",e)}function sa(t,e){for(sf[t]=e,t=0;t<e.length;t++)cf.add(e[t])}var Xm=RegExp("^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$"),ff={},of={};function Qm(t){return gi.call(of,t)?!0:gi.call(ff,t)?!1:Xm.test(t)?of[t]=!0:(ff[t]=!0,!1)}function Pn(t,e,l){if(Qm(e))if(l===null)t.removeAttribute(e);else{switch(typeof l){case"undefined":case"function":case"symbol":t.removeAttribute(e);return;case"boolean":var a=e.toLowerCase().slice(0,5);if(a!=="data-"&&a!=="aria-"){t.removeAttribute(e);return}}t.setAttribute(e,""+l)}}function tu(t,e,l){if(l===null)t.removeAttribute(e);else{switch(typeof l){case"undefined":case"function":case"symbol":case"boolean":t.removeAttribute(e);return}t.setAttribute(e,""+l)}}function Qe(t,e,l,a){if(a===null)t.removeAttribute(l);else{switch(typeof a){case"undefined":case"function":case"symbol":case"boolean":t.removeAttribute(l);return}t.setAttributeNS(e,l,""+a)}}function xe(t){switch(typeof t){case"bigint":case"boolean":case"number":case"string":case"undefined":return t;case"object":return t;default:return""}}function rf(t){var e=t.type;return(t=t.nodeName)&&t.toLowerCase()==="input"&&(e==="checkbox"||e==="radio")}function Km(t,e,l){var a=Object.getOwnPropertyDescriptor(t.constructor.prototype,e);if(!t.hasOwnProperty(e)&&typeof a<"u"&&typeof a.get=="function"&&typeof a.set=="function"){var n=a.get,u=a.set;return Object.defineProperty(t,e,{configurable:!0,get:function(){return n.call(this)},set:function(i){l=""+i,u.call(this,i)}}),Object.defineProperty(t,e,{enumerable:a.enumerable}),{getValue:function(){return l},setValue:function(i){l=""+i},stopTracking:function(){t._valueTracker=null,delete t[e]}}}}function Ai(t){if(!t._valueTracker){var e=rf(t)?"checked":"value";t._valueTracker=Km(t,e,""+t[e])}}function df(t){if(!t)return!1;var e=t._valueTracker;if(!e)return!0;var l=e.getValue(),a="";return t&&(a=rf(t)?t.checked?"true":"false":t.value),t=a,t!==l?(e.setValue(t),!0):!1}function eu(t){if(t=t||(typeof document<"u"?document:void 0),typeof t>"u")return null;try{return t.activeElement||t.body}catch{return t.body}}var Vm=/[\n"\\]/g;function Te(t){return t.replace(Vm,function(e){return"\\"+e.charCodeAt(0).toString(16)+" "})}function Ei(t,e,l,a,n,u,i,f){t.name="",i!=null&&typeof i!="function"&&typeof i!="symbol"&&typeof i!="boolean"?t.type=i:t.removeAttribute("type"),e!=null?i==="number"?(e===0&&t.value===""||t.value!=e)&&(t.value=""+xe(e)):t.value!==""+xe(e)&&(t.value=""+xe(e)):i!=="submit"&&i!=="reset"||t.removeAttribute("value"),e!=null?Ri(t,i,xe(e)):l!=null?Ri(t,i,xe(l)):a!=null&&t.removeAttribute("value"),n==null&&u!=null&&(t.defaultChecked=!!u),n!=null&&(t.checked=n&&typeof n!="function"&&typeof n!="symbol"),f!=null&&typeof f!="function"&&typeof f!="symbol"&&typeof f!="boolean"?t.name=""+xe(f):t.removeAttribute("name")}function mf(t,e,l,a,n,u,i,f){if(u!=null&&typeof u!="function"&&typeof u!="symbol"&&typeof u!="boolean"&&(t.type=u),e!=null||l!=null){if(!(u!=="submit"&&u!=="reset"||e!=null)){Ai(t);return}l=l!=null?""+xe(l):"",e=e!=null?""+xe(e):l,f||e===t.value||(t.value=e),t.defaultValue=e}a=a??n,a=typeof a!="function"&&typeof a!="symbol"&&!!a,t.checked=f?t.checked:!!a,t.defaultChecked=!!a,i!=null&&typeof i!="function"&&typeof i!="symbol"&&typeof i!="boolean"&&(t.name=i),Ai(t)}function Ri(t,e,l){e==="number"&&eu(t.ownerDocument)===t||t.defaultValue===""+l||(t.defaultValue=""+l)}function fa(t,e,l,a){if(t=t.options,e){e={};for(var n=0;n<l.length;n++)e["$"+l[n]]=!0;for(l=0;l<t.length;l++)n=e.hasOwnProperty("$"+t[l].value),t[l].selected!==n&&(t[l].selected=n),n&&a&&(t[l].defaultSelected=!0)}else{for(l=""+xe(l),e=null,n=0;n<t.length;n++){if(t[n].value===l){t[n].selected=!0,a&&(t[n].defaultSelected=!0);return}e!==null||t[n].disabled||(e=t[n])}e!==null&&(e.selected=!0)}}function yf(t,e,l){if(e!=null&&(e=""+xe(e),e!==t.value&&(t.value=e),l==null)){t.defaultValue!==e&&(t.defaultValue=e);return}t.defaultValue=l!=null?""+xe(l):""}function vf(t,e,l,a){if(e==null){if(a!=null){if(l!=null)throw Error(s(92));if(ae(a)){if(1<a.length)throw Error(s(93));a=a[0]}l=a}l==null&&(l=""),e=l}l=xe(e),t.defaultValue=l,a=t.textContent,a===l&&a!==""&&a!==null&&(t.value=a),Ai(t)}function oa(t,e){if(e){var l=t.firstChild;if(l&&l===t.lastChild&&l.nodeType===3){l.nodeValue=e;return}}t.textContent=e}var Zm=new Set("animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth boxFlex boxFlexGroup boxOrdinalGroup columnCount columns flex flexGrow flexPositive flexShrink flexNegative flexOrder gridArea gridRow gridRowEnd gridRowSpan gridRowStart gridColumn gridColumnEnd gridColumnSpan gridColumnStart fontWeight lineClamp lineHeight opacity order orphans scale tabSize widows zIndex zoom fillOpacity floodOpacity stopOpacity strokeDasharray strokeDashoffset strokeMiterlimit strokeOpacity strokeWidth MozAnimationIterationCount MozBoxFlex MozBoxFlexGroup MozLineClamp msAnimationIterationCount msFlex msZoom msFlexGrow msFlexNegative msFlexOrder msFlexPositive msFlexShrink msGridColumn msGridColumnSpan msGridRow msGridRowSpan WebkitAnimationIterationCount WebkitBoxFlex WebKitBoxFlexGroup WebkitBoxOrdinalGroup WebkitColumnCount WebkitColumns WebkitFlex WebkitFlexGrow WebkitFlexPositive WebkitFlexShrink WebkitLineClamp".split(" "));function bf(t,e,l){var a=e.indexOf("--")===0;l==null||typeof l=="boolean"||l===""?a?t.setProperty(e,""):e==="float"?t.cssFloat="":t[e]="":a?t.setProperty(e,l):typeof l!="number"||l===0||Zm.has(e)?e==="float"?t.cssFloat=l:t[e]=(""+l).trim():t[e]=l+"px"}function gf(t,e,l){if(e!=null&&typeof e!="object")throw Error(s(62));if(t=t.style,l!=null){for(var a in l)!l.hasOwnProperty(a)||e!=null&&e.hasOwnProperty(a)||(a.indexOf("--")===0?t.setProperty(a,""):a==="float"?t.cssFloat="":t[a]="");for(var n in e)a=e[n],e.hasOwnProperty(n)&&l[n]!==a&&bf(t,n,a)}else for(var u in e)e.hasOwnProperty(u)&&bf(t,u,e[u])}function Ci(t){if(t.indexOf("-")===-1)return!1;switch(t){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var Lm=new Map([["acceptCharset","accept-charset"],["htmlFor","for"],["httpEquiv","http-equiv"],["crossOrigin","crossorigin"],["accentHeight","accent-height"],["alignmentBaseline","alignment-baseline"],["arabicForm","arabic-form"],["baselineShift","baseline-shift"],["capHeight","cap-height"],["clipPath","clip-path"],["clipRule","clip-rule"],["colorInterpolation","color-interpolation"],["colorInterpolationFilters","color-interpolation-filters"],["colorProfile","color-profile"],["colorRendering","color-rendering"],["dominantBaseline","dominant-baseline"],["enableBackground","enable-background"],["fillOpacity","fill-opacity"],["fillRule","fill-rule"],["floodColor","flood-color"],["floodOpacity","flood-opacity"],["fontFamily","font-family"],["fontSize","font-size"],["fontSizeAdjust","font-size-adjust"],["fontStretch","font-stretch"],["fontStyle","font-style"],["fontVariant","font-variant"],["fontWeight","font-weight"],["glyphName","glyph-name"],["glyphOrientationHorizontal","glyph-orientation-horizontal"],["glyphOrientationVertical","glyph-orientation-vertical"],["horizAdvX","horiz-adv-x"],["horizOriginX","horiz-origin-x"],["imageRendering","image-rendering"],["letterSpacing","letter-spacing"],["lightingColor","lighting-color"],["markerEnd","marker-end"],["markerMid","marker-mid"],["markerStart","marker-start"],["overlinePosition","overline-position"],["overlineThickness","overline-thickness"],["paintOrder","paint-order"],["panose-1","panose-1"],["pointerEvents","pointer-events"],["renderingIntent","rendering-intent"],["shapeRendering","shape-rendering"],["stopColor","stop-color"],["stopOpacity","stop-opacity"],["strikethroughPosition","strikethrough-position"],["strikethroughThickness","strikethrough-thickness"],["strokeDasharray","stroke-dasharray"],["strokeDashoffset","stroke-dashoffset"],["strokeLinecap","stroke-linecap"],["strokeLinejoin","stroke-linejoin"],["strokeMiterlimit","stroke-miterlimit"],["strokeOpacity","stroke-opacity"],["strokeWidth","stroke-width"],["textAnchor","text-anchor"],["textDecoration","text-decoration"],["textRendering","text-rendering"],["transformOrigin","transform-origin"],["underlinePosition","underline-position"],["underlineThickness","underline-thickness"],["unicodeBidi","unicode-bidi"],["unicodeRange","unicode-range"],["unitsPerEm","units-per-em"],["vAlphabetic","v-alphabetic"],["vHanging","v-hanging"],["vIdeographic","v-ideographic"],["vMathematical","v-mathematical"],["vectorEffect","vector-effect"],["vertAdvY","vert-adv-y"],["vertOriginX","vert-origin-x"],["vertOriginY","vert-origin-y"],["wordSpacing","word-spacing"],["writingMode","writing-mode"],["xmlnsXlink","xmlns:xlink"],["xHeight","x-height"]]),Jm=/^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*:/i;function lu(t){return Jm.test(""+t)?"javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')":t}function Ke(){}var _i=null;function Oi(t){return t=t.target||t.srcElement||window,t.correspondingUseElement&&(t=t.correspondingUseElement),t.nodeType===3?t.parentNode:t}var ra=null,da=null;function hf(t){var e=ia(t);if(e&&(t=e.stateNode)){var l=t[ne]||null;t:switch(t=e.stateNode,e.type){case"input":if(Ei(t,l.value,l.defaultValue,l.defaultValue,l.checked,l.defaultChecked,l.type,l.name),e=l.name,l.type==="radio"&&e!=null){for(l=t;l.parentNode;)l=l.parentNode;for(l=l.querySelectorAll('input[name="'+Te(""+e)+'"][type="radio"]'),e=0;e<l.length;e++){var a=l[e];if(a!==t&&a.form===t.form){var n=a[ne]||null;if(!n)throw Error(s(90));Ei(a,n.value,n.defaultValue,n.defaultValue,n.checked,n.defaultChecked,n.type,n.name)}}for(e=0;e<l.length;e++)a=l[e],a.form===t.form&&df(a)}break t;case"textarea":yf(t,l.value,l.defaultValue);break t;case"select":e=l.value,e!=null&&fa(t,!!l.multiple,e,!1)}}}var Mi=!1;function pf(t,e,l){if(Mi)return t(e,l);Mi=!0;try{var a=t(e);return a}finally{if(Mi=!1,(ra!==null||da!==null)&&(Ku(),ra&&(e=ra,t=da,da=ra=null,hf(e),t)))for(e=0;e<t.length;e++)hf(t[e])}}function Ia(t,e){var l=t.stateNode;if(l===null)return null;var a=l[ne]||null;if(a===null)return null;l=a[e];t:switch(e){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":case"onMouseEnter":(a=!a.disabled)||(t=t.type,a=!(t==="button"||t==="input"||t==="select"||t==="textarea")),t=!a;break t;default:t=!1}if(t)return null;if(l&&typeof l!="function")throw Error(s(231,e,typeof l));return l}var Ve=!(typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"),Di=!1;if(Ve)try{var Pa={};Object.defineProperty(Pa,"passive",{get:function(){Di=!0}}),window.addEventListener("test",Pa,Pa),window.removeEventListener("test",Pa,Pa)}catch{Di=!1}var fl=null,ji=null,au=null;function Sf(){if(au)return au;var t,e=ji,l=e.length,a,n="value"in fl?fl.value:fl.textContent,u=n.length;for(t=0;t<l&&e[t]===n[t];t++);var i=l-t;for(a=1;a<=i&&e[l-a]===n[u-a];a++);return au=n.slice(t,1<a?1-a:void 0)}function nu(t){var e=t.keyCode;return"charCode"in t?(t=t.charCode,t===0&&e===13&&(t=13)):t=e,t===10&&(t=13),32<=t||t===13?t:0}function uu(){return!0}function zf(){return!1}function ue(t){function e(l,a,n,u,i){this._reactName=l,this._targetInst=n,this.type=a,this.nativeEvent=u,this.target=i,this.currentTarget=null;for(var f in t)t.hasOwnProperty(f)&&(l=t[f],this[f]=l?l(u):u[f]);return this.isDefaultPrevented=(u.defaultPrevented!=null?u.defaultPrevented:u.returnValue===!1)?uu:zf,this.isPropagationStopped=zf,this}return j(e.prototype,{preventDefault:function(){this.defaultPrevented=!0;var l=this.nativeEvent;l&&(l.preventDefault?l.preventDefault():typeof l.returnValue!="unknown"&&(l.returnValue=!1),this.isDefaultPrevented=uu)},stopPropagation:function(){var l=this.nativeEvent;l&&(l.stopPropagation?l.stopPropagation():typeof l.cancelBubble!="unknown"&&(l.cancelBubble=!0),this.isPropagationStopped=uu)},persist:function(){},isPersistent:uu}),e}var Yl={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(t){return t.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},iu=ue(Yl),tn=j({},Yl,{view:0,detail:0}),$m=ue(tn),Ui,Hi,en,cu=j({},tn,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:qi,button:0,buttons:0,relatedTarget:function(t){return t.relatedTarget===void 0?t.fromElement===t.srcElement?t.toElement:t.fromElement:t.relatedTarget},movementX:function(t){return"movementX"in t?t.movementX:(t!==en&&(en&&t.type==="mousemove"?(Ui=t.screenX-en.screenX,Hi=t.screenY-en.screenY):Hi=Ui=0,en=t),Ui)},movementY:function(t){return"movementY"in t?t.movementY:Hi}}),xf=ue(cu),km=j({},cu,{dataTransfer:0}),Wm=ue(km),Fm=j({},tn,{relatedTarget:0}),Bi=ue(Fm),Im=j({},Yl,{animationName:0,elapsedTime:0,pseudoElement:0}),Pm=ue(Im),ty=j({},Yl,{clipboardData:function(t){return"clipboardData"in t?t.clipboardData:window.clipboardData}}),ey=ue(ty),ly=j({},Yl,{data:0}),Tf=ue(ly),ay={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},ny={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},uy={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function iy(t){var e=this.nativeEvent;return e.getModifierState?e.getModifierState(t):(t=uy[t])?!!e[t]:!1}function qi(){return iy}var cy=j({},tn,{key:function(t){if(t.key){var e=ay[t.key]||t.key;if(e!=="Unidentified")return e}return t.type==="keypress"?(t=nu(t),t===13?"Enter":String.fromCharCode(t)):t.type==="keydown"||t.type==="keyup"?ny[t.keyCode]||"Unidentified":""},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:qi,charCode:function(t){return t.type==="keypress"?nu(t):0},keyCode:function(t){return t.type==="keydown"||t.type==="keyup"?t.keyCode:0},which:function(t){return t.type==="keypress"?nu(t):t.type==="keydown"||t.type==="keyup"?t.keyCode:0}}),sy=ue(cy),fy=j({},cu,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0}),Nf=ue(fy),oy=j({},tn,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:qi}),ry=ue(oy),dy=j({},Yl,{propertyName:0,elapsedTime:0,pseudoElement:0}),my=ue(dy),yy=j({},cu,{deltaX:function(t){return"deltaX"in t?t.deltaX:"wheelDeltaX"in t?-t.wheelDeltaX:0},deltaY:function(t){return"deltaY"in t?t.deltaY:"wheelDeltaY"in t?-t.wheelDeltaY:"wheelDelta"in t?-t.wheelDelta:0},deltaZ:0,deltaMode:0}),vy=ue(yy),by=j({},Yl,{newState:0,oldState:0}),gy=ue(by),hy=[9,13,27,32],Gi=Ve&&"CompositionEvent"in window,ln=null;Ve&&"documentMode"in document&&(ln=document.documentMode);var py=Ve&&"TextEvent"in window&&!ln,Af=Ve&&(!Gi||ln&&8<ln&&11>=ln),Ef=" ",Rf=!1;function Cf(t,e){switch(t){case"keyup":return hy.indexOf(e.keyCode)!==-1;case"keydown":return e.keyCode!==229;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function _f(t){return t=t.detail,typeof t=="object"&&"data"in t?t.data:null}var ma=!1;function Sy(t,e){switch(t){case"compositionend":return _f(e);case"keypress":return e.which!==32?null:(Rf=!0,Ef);case"textInput":return t=e.data,t===Ef&&Rf?null:t;default:return null}}function zy(t,e){if(ma)return t==="compositionend"||!Gi&&Cf(t,e)?(t=Sf(),au=ji=fl=null,ma=!1,t):null;switch(t){case"paste":return null;case"keypress":if(!(e.ctrlKey||e.altKey||e.metaKey)||e.ctrlKey&&e.altKey){if(e.char&&1<e.char.length)return e.char;if(e.which)return String.fromCharCode(e.which)}return null;case"compositionend":return Af&&e.locale!=="ko"?null:e.data;default:return null}}var xy={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function Of(t){var e=t&&t.nodeName&&t.nodeName.toLowerCase();return e==="input"?!!xy[t.type]:e==="textarea"}function Mf(t,e,l,a){ra?da?da.push(a):da=[a]:ra=a,e=Wu(e,"onChange"),0<e.length&&(l=new iu("onChange","change",null,l,a),t.push({event:l,listeners:e}))}var an=null,nn=null;function Ty(t){yd(t,0)}function su(t){var e=Fa(t);if(df(e))return t}function Df(t,e){if(t==="change")return e}var jf=!1;if(Ve){var wi;if(Ve){var Yi="oninput"in document;if(!Yi){var Uf=document.createElement("div");Uf.setAttribute("oninput","return;"),Yi=typeof Uf.oninput=="function"}wi=Yi}else wi=!1;jf=wi&&(!document.documentMode||9<document.documentMode)}function Hf(){an&&(an.detachEvent("onpropertychange",Bf),nn=an=null)}function Bf(t){if(t.propertyName==="value"&&su(nn)){var e=[];Mf(e,nn,t,Oi(t)),pf(Ty,e)}}function Ny(t,e,l){t==="focusin"?(Hf(),an=e,nn=l,an.attachEvent("onpropertychange",Bf)):t==="focusout"&&Hf()}function Ay(t){if(t==="selectionchange"||t==="keyup"||t==="keydown")return su(nn)}function Ey(t,e){if(t==="click")return su(e)}function Ry(t,e){if(t==="input"||t==="change")return su(e)}function Cy(t,e){return t===e&&(t!==0||1/t===1/e)||t!==t&&e!==e}var ve=typeof Object.is=="function"?Object.is:Cy;function un(t,e){if(ve(t,e))return!0;if(typeof t!="object"||t===null||typeof e!="object"||e===null)return!1;var l=Object.keys(t),a=Object.keys(e);if(l.length!==a.length)return!1;for(a=0;a<l.length;a++){var n=l[a];if(!gi.call(e,n)||!ve(t[n],e[n]))return!1}return!0}function qf(t){for(;t&&t.firstChild;)t=t.firstChild;return t}function Gf(t,e){var l=qf(t);t=0;for(var a;l;){if(l.nodeType===3){if(a=t+l.textContent.length,t<=e&&a>=e)return{node:l,offset:e-t};t=a}t:{for(;l;){if(l.nextSibling){l=l.nextSibling;break t}l=l.parentNode}l=void 0}l=qf(l)}}function wf(t,e){return t&&e?t===e?!0:t&&t.nodeType===3?!1:e&&e.nodeType===3?wf(t,e.parentNode):"contains"in t?t.contains(e):t.compareDocumentPosition?!!(t.compareDocumentPosition(e)&16):!1:!1}function Yf(t){t=t!=null&&t.ownerDocument!=null&&t.ownerDocument.defaultView!=null?t.ownerDocument.defaultView:window;for(var e=eu(t.document);e instanceof t.HTMLIFrameElement;){try{var l=typeof e.contentWindow.location.href=="string"}catch{l=!1}if(l)t=e.contentWindow;else break;e=eu(t.document)}return e}function Xi(t){var e=t&&t.nodeName&&t.nodeName.toLowerCase();return e&&(e==="input"&&(t.type==="text"||t.type==="search"||t.type==="tel"||t.type==="url"||t.type==="password")||e==="textarea"||t.contentEditable==="true")}var _y=Ve&&"documentMode"in document&&11>=document.documentMode,ya=null,Qi=null,cn=null,Ki=!1;function Xf(t,e,l){var a=l.window===l?l.document:l.nodeType===9?l:l.ownerDocument;Ki||ya==null||ya!==eu(a)||(a=ya,"selectionStart"in a&&Xi(a)?a={start:a.selectionStart,end:a.selectionEnd}:(a=(a.ownerDocument&&a.ownerDocument.defaultView||window).getSelection(),a={anchorNode:a.anchorNode,anchorOffset:a.anchorOffset,focusNode:a.focusNode,focusOffset:a.focusOffset}),cn&&un(cn,a)||(cn=a,a=Wu(Qi,"onSelect"),0<a.length&&(e=new iu("onSelect","select",null,e,l),t.push({event:e,listeners:a}),e.target=ya)))}function Xl(t,e){var l={};return l[t.toLowerCase()]=e.toLowerCase(),l["Webkit"+t]="webkit"+e,l["Moz"+t]="moz"+e,l}var va={animationend:Xl("Animation","AnimationEnd"),animationiteration:Xl("Animation","AnimationIteration"),animationstart:Xl("Animation","AnimationStart"),transitionrun:Xl("Transition","TransitionRun"),transitionstart:Xl("Transition","TransitionStart"),transitioncancel:Xl("Transition","TransitionCancel"),transitionend:Xl("Transition","TransitionEnd")},Vi={},Qf={};Ve&&(Qf=document.createElement("div").style,"AnimationEvent"in window||(delete va.animationend.animation,delete va.animationiteration.animation,delete va.animationstart.animation),"TransitionEvent"in window||delete va.transitionend.transition);function Ql(t){if(Vi[t])return Vi[t];if(!va[t])return t;var e=va[t],l;for(l in e)if(e.hasOwnProperty(l)&&l in Qf)return Vi[t]=e[l];return t}var Kf=Ql("animationend"),Vf=Ql("animationiteration"),Zf=Ql("animationstart"),Oy=Ql("transitionrun"),My=Ql("transitionstart"),Dy=Ql("transitioncancel"),Lf=Ql("transitionend"),Jf=new Map,Zi="abort auxClick beforeToggle cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");Zi.push("scrollEnd");function De(t,e){Jf.set(t,e),wl(e,[t])}var fu=typeof reportError=="function"?reportError:function(t){if(typeof window=="object"&&typeof window.ErrorEvent=="function"){var e=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:typeof t=="object"&&t!==null&&typeof t.message=="string"?String(t.message):String(t),error:t});if(!window.dispatchEvent(e))return}else if(typeof process=="object"&&typeof process.emit=="function"){process.emit("uncaughtException",t);return}console.error(t)},Ne=[],ba=0,Li=0;function ou(){for(var t=ba,e=Li=ba=0;e<t;){var l=Ne[e];Ne[e++]=null;var a=Ne[e];Ne[e++]=null;var n=Ne[e];Ne[e++]=null;var u=Ne[e];if(Ne[e++]=null,a!==null&&n!==null){var i=a.pending;i===null?n.next=n:(n.next=i.next,i.next=n),a.pending=n}u!==0&&$f(l,n,u)}}function ru(t,e,l,a){Ne[ba++]=t,Ne[ba++]=e,Ne[ba++]=l,Ne[ba++]=a,Li|=a,t.lanes|=a,t=t.alternate,t!==null&&(t.lanes|=a)}function Ji(t,e,l,a){return ru(t,e,l,a),du(t)}function Kl(t,e){return ru(t,null,null,e),du(t)}function $f(t,e,l){t.lanes|=l;var a=t.alternate;a!==null&&(a.lanes|=l);for(var n=!1,u=t.return;u!==null;)u.childLanes|=l,a=u.alternate,a!==null&&(a.childLanes|=l),u.tag===22&&(t=u.stateNode,t===null||t._visibility&1||(n=!0)),t=u,u=u.return;return t.tag===3?(u=t.stateNode,n&&e!==null&&(n=31-ye(l),t=u.hiddenUpdates,a=t[n],a===null?t[n]=[e]:a.push(e),e.lane=l|536870912),u):null}function du(t){if(50<_n)throw _n=0,ls=null,Error(s(185));for(var e=t.return;e!==null;)t=e,e=t.return;return t.tag===3?t.stateNode:null}var ga={};function jy(t,e,l,a){this.tag=t,this.key=l,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.refCleanup=this.ref=null,this.pendingProps=e,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=a,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function be(t,e,l,a){return new jy(t,e,l,a)}function $i(t){return t=t.prototype,!(!t||!t.isReactComponent)}function Ze(t,e){var l=t.alternate;return l===null?(l=be(t.tag,e,t.key,t.mode),l.elementType=t.elementType,l.type=t.type,l.stateNode=t.stateNode,l.alternate=t,t.alternate=l):(l.pendingProps=e,l.type=t.type,l.flags=0,l.subtreeFlags=0,l.deletions=null),l.flags=t.flags&65011712,l.childLanes=t.childLanes,l.lanes=t.lanes,l.child=t.child,l.memoizedProps=t.memoizedProps,l.memoizedState=t.memoizedState,l.updateQueue=t.updateQueue,e=t.dependencies,l.dependencies=e===null?null:{lanes:e.lanes,firstContext:e.firstContext},l.sibling=t.sibling,l.index=t.index,l.ref=t.ref,l.refCleanup=t.refCleanup,l}function kf(t,e){t.flags&=65011714;var l=t.alternate;return l===null?(t.childLanes=0,t.lanes=e,t.child=null,t.subtreeFlags=0,t.memoizedProps=null,t.memoizedState=null,t.updateQueue=null,t.dependencies=null,t.stateNode=null):(t.childLanes=l.childLanes,t.lanes=l.lanes,t.child=l.child,t.subtreeFlags=0,t.deletions=null,t.memoizedProps=l.memoizedProps,t.memoizedState=l.memoizedState,t.updateQueue=l.updateQueue,t.type=l.type,e=l.dependencies,t.dependencies=e===null?null:{lanes:e.lanes,firstContext:e.firstContext}),t}function mu(t,e,l,a,n,u){var i=0;if(a=t,typeof t=="function")$i(t)&&(i=1);else if(typeof t=="string")i=Gv(t,l,w.current)?26:t==="html"||t==="head"||t==="body"?27:5;else t:switch(t){case te:return t=be(31,l,e,n),t.elementType=te,t.lanes=u,t;case nt:return Vl(l.children,n,u,e);case $:i=8,n|=24;break;case mt:return t=be(12,l,e,n|2),t.elementType=mt,t.lanes=u,t;case Ft:return t=be(13,l,e,n),t.elementType=Ft,t.lanes=u,t;case Kt:return t=be(19,l,e,n),t.elementType=Kt,t.lanes=u,t;default:if(typeof t=="object"&&t!==null)switch(t.$$typeof){case Rt:i=10;break t;case Ot:i=9;break t;case Ut:i=11;break t;case P:i=14;break t;case Vt:i=16,a=null;break t}i=29,l=Error(s(130,t===null?"null":typeof t,"")),a=null}return e=be(i,l,e,n),e.elementType=t,e.type=a,e.lanes=u,e}function Vl(t,e,l,a){return t=be(7,t,a,e),t.lanes=l,t}function ki(t,e,l){return t=be(6,t,null,e),t.lanes=l,t}function Wf(t){var e=be(18,null,null,0);return e.stateNode=t,e}function Wi(t,e,l){return e=be(4,t.children!==null?t.children:[],t.key,e),e.lanes=l,e.stateNode={containerInfo:t.containerInfo,pendingChildren:null,implementation:t.implementation},e}var Ff=new WeakMap;function Ae(t,e){if(typeof t=="object"&&t!==null){var l=Ff.get(t);return l!==void 0?l:(e={value:t,source:e,stack:ks(e)},Ff.set(t,e),e)}return{value:t,source:e,stack:ks(e)}}var ha=[],pa=0,yu=null,sn=0,Ee=[],Re=0,ol=null,Ge=1,we="";function Le(t,e){ha[pa++]=sn,ha[pa++]=yu,yu=t,sn=e}function If(t,e,l){Ee[Re++]=Ge,Ee[Re++]=we,Ee[Re++]=ol,ol=t;var a=Ge;t=we;var n=32-ye(a)-1;a&=~(1<<n),l+=1;var u=32-ye(e)+n;if(30<u){var i=n-n%5;u=(a&(1<<i)-1).toString(32),a>>=i,n-=i,Ge=1<<32-ye(e)+n|l<<n|a,we=u+t}else Ge=1<<u|l<<n|a,we=t}function Fi(t){t.return!==null&&(Le(t,1),If(t,1,0))}function Ii(t){for(;t===yu;)yu=ha[--pa],ha[pa]=null,sn=ha[--pa],ha[pa]=null;for(;t===ol;)ol=Ee[--Re],Ee[Re]=null,we=Ee[--Re],Ee[Re]=null,Ge=Ee[--Re],Ee[Re]=null}function Pf(t,e){Ee[Re++]=Ge,Ee[Re++]=we,Ee[Re++]=ol,Ge=e.id,we=e.overflow,ol=t}var Lt=null,Tt=null,ct=!1,rl=null,Ce=!1,Pi=Error(s(519));function dl(t){var e=Error(s(418,1<arguments.length&&arguments[1]!==void 0&&arguments[1]?"text":"HTML",""));throw fn(Ae(e,t)),Pi}function to(t){var e=t.stateNode,l=t.type,a=t.memoizedProps;switch(e[Zt]=t,e[ne]=a,l){case"dialog":lt("cancel",e),lt("close",e);break;case"iframe":case"object":case"embed":lt("load",e);break;case"video":case"audio":for(l=0;l<Mn.length;l++)lt(Mn[l],e);break;case"source":lt("error",e);break;case"img":case"image":case"link":lt("error",e),lt("load",e);break;case"details":lt("toggle",e);break;case"input":lt("invalid",e),mf(e,a.value,a.defaultValue,a.checked,a.defaultChecked,a.type,a.name,!0);break;case"select":lt("invalid",e);break;case"textarea":lt("invalid",e),vf(e,a.value,a.defaultValue,a.children)}l=a.children,typeof l!="string"&&typeof l!="number"&&typeof l!="bigint"||e.textContent===""+l||a.suppressHydrationWarning===!0||hd(e.textContent,l)?(a.popover!=null&&(lt("beforetoggle",e),lt("toggle",e)),a.onScroll!=null&&lt("scroll",e),a.onScrollEnd!=null&&lt("scrollend",e),a.onClick!=null&&(e.onclick=Ke),e=!0):e=!1,e||dl(t,!0)}function eo(t){for(Lt=t.return;Lt;)switch(Lt.tag){case 5:case 31:case 13:Ce=!1;return;case 27:case 3:Ce=!0;return;default:Lt=Lt.return}}function Sa(t){if(t!==Lt)return!1;if(!ct)return eo(t),ct=!0,!1;var e=t.tag,l;if((l=e!==3&&e!==27)&&((l=e===5)&&(l=t.type,l=!(l!=="form"&&l!=="button")||gs(t.type,t.memoizedProps)),l=!l),l&&Tt&&dl(t),eo(t),e===13){if(t=t.memoizedState,t=t!==null?t.dehydrated:null,!t)throw Error(s(317));Tt=Rd(t)}else if(e===31){if(t=t.memoizedState,t=t!==null?t.dehydrated:null,!t)throw Error(s(317));Tt=Rd(t)}else e===27?(e=Tt,El(t.type)?(t=xs,xs=null,Tt=t):Tt=e):Tt=Lt?Oe(t.stateNode.nextSibling):null;return!0}function Zl(){Tt=Lt=null,ct=!1}function tc(){var t=rl;return t!==null&&(fe===null?fe=t:fe.push.apply(fe,t),rl=null),t}function fn(t){rl===null?rl=[t]:rl.push(t)}var ec=v(null),Ll=null,Je=null;function ml(t,e,l){U(ec,e._currentValue),e._currentValue=l}function $e(t){t._currentValue=ec.current,M(ec)}function lc(t,e,l){for(;t!==null;){var a=t.alternate;if((t.childLanes&e)!==e?(t.childLanes|=e,a!==null&&(a.childLanes|=e)):a!==null&&(a.childLanes&e)!==e&&(a.childLanes|=e),t===l)break;t=t.return}}function ac(t,e,l,a){var n=t.child;for(n!==null&&(n.return=t);n!==null;){var u=n.dependencies;if(u!==null){var i=n.child;u=u.firstContext;t:for(;u!==null;){var f=u;u=n;for(var d=0;d<e.length;d++)if(f.context===e[d]){u.lanes|=l,f=u.alternate,f!==null&&(f.lanes|=l),lc(u.return,l,t),a||(i=null);break t}u=f.next}}else if(n.tag===18){if(i=n.return,i===null)throw Error(s(341));i.lanes|=l,u=i.alternate,u!==null&&(u.lanes|=l),lc(i,l,t),i=null}else i=n.child;if(i!==null)i.return=n;else for(i=n;i!==null;){if(i===t){i=null;break}if(n=i.sibling,n!==null){n.return=i.return,i=n;break}i=i.return}n=i}}function za(t,e,l,a){t=null;for(var n=e,u=!1;n!==null;){if(!u){if((n.flags&524288)!==0)u=!0;else if((n.flags&262144)!==0)break}if(n.tag===10){var i=n.alternate;if(i===null)throw Error(s(387));if(i=i.memoizedProps,i!==null){var f=n.type;ve(n.pendingProps.value,i.value)||(t!==null?t.push(f):t=[f])}}else if(n===vt.current){if(i=n.alternate,i===null)throw Error(s(387));i.memoizedState.memoizedState!==n.memoizedState.memoizedState&&(t!==null?t.push(Bn):t=[Bn])}n=n.return}t!==null&&ac(e,t,l,a),e.flags|=262144}function vu(t){for(t=t.firstContext;t!==null;){if(!ve(t.context._currentValue,t.memoizedValue))return!0;t=t.next}return!1}function Jl(t){Ll=t,Je=null,t=t.dependencies,t!==null&&(t.firstContext=null)}function Jt(t){return lo(Ll,t)}function bu(t,e){return Ll===null&&Jl(t),lo(t,e)}function lo(t,e){var l=e._currentValue;if(e={context:e,memoizedValue:l,next:null},Je===null){if(t===null)throw Error(s(308));Je=e,t.dependencies={lanes:0,firstContext:e},t.flags|=524288}else Je=Je.next=e;return l}var Uy=typeof AbortController<"u"?AbortController:function(){var t=[],e=this.signal={aborted:!1,addEventListener:function(l,a){t.push(a)}};this.abort=function(){e.aborted=!0,t.forEach(function(l){return l()})}},Hy=c.unstable_scheduleCallback,By=c.unstable_NormalPriority,Ht={$$typeof:Rt,Consumer:null,Provider:null,_currentValue:null,_currentValue2:null,_threadCount:0};function nc(){return{controller:new Uy,data:new Map,refCount:0}}function on(t){t.refCount--,t.refCount===0&&Hy(By,function(){t.controller.abort()})}var rn=null,uc=0,xa=0,Ta=null;function qy(t,e){if(rn===null){var l=rn=[];uc=0,xa=ss(),Ta={status:"pending",value:void 0,then:function(a){l.push(a)}}}return uc++,e.then(ao,ao),e}function ao(){if(--uc===0&&rn!==null){Ta!==null&&(Ta.status="fulfilled");var t=rn;rn=null,xa=0,Ta=null;for(var e=0;e<t.length;e++)(0,t[e])()}}function Gy(t,e){var l=[],a={status:"pending",value:null,reason:null,then:function(n){l.push(n)}};return t.then(function(){a.status="fulfilled",a.value=e;for(var n=0;n<l.length;n++)(0,l[n])(e)},function(n){for(a.status="rejected",a.reason=n,n=0;n<l.length;n++)(0,l[n])(void 0)}),a}var no=E.S;E.S=function(t,e){Qr=de(),typeof e=="object"&&e!==null&&typeof e.then=="function"&&qy(t,e),no!==null&&no(t,e)};var $l=v(null);function ic(){var t=$l.current;return t!==null?t:xt.pooledCache}function gu(t,e){e===null?U($l,$l.current):U($l,e.pool)}function uo(){var t=ic();return t===null?null:{parent:Ht._currentValue,pool:t}}var Na=Error(s(460)),cc=Error(s(474)),hu=Error(s(542)),pu={then:function(){}};function io(t){return t=t.status,t==="fulfilled"||t==="rejected"}function co(t,e,l){switch(l=t[l],l===void 0?t.push(e):l!==e&&(e.then(Ke,Ke),e=l),e.status){case"fulfilled":return e.value;case"rejected":throw t=e.reason,fo(t),t;default:if(typeof e.status=="string")e.then(Ke,Ke);else{if(t=xt,t!==null&&100<t.shellSuspendCounter)throw Error(s(482));t=e,t.status="pending",t.then(function(a){if(e.status==="pending"){var n=e;n.status="fulfilled",n.value=a}},function(a){if(e.status==="pending"){var n=e;n.status="rejected",n.reason=a}})}switch(e.status){case"fulfilled":return e.value;case"rejected":throw t=e.reason,fo(t),t}throw Wl=e,Na}}function kl(t){try{var e=t._init;return e(t._payload)}catch(l){throw l!==null&&typeof l=="object"&&typeof l.then=="function"?(Wl=l,Na):l}}var Wl=null;function so(){if(Wl===null)throw Error(s(459));var t=Wl;return Wl=null,t}function fo(t){if(t===Na||t===hu)throw Error(s(483))}var Aa=null,dn=0;function Su(t){var e=dn;return dn+=1,Aa===null&&(Aa=[]),co(Aa,t,e)}function mn(t,e){e=e.props.ref,t.ref=e!==void 0?e:null}function zu(t,e){throw e.$$typeof===Q?Error(s(525)):(t=Object.prototype.toString.call(e),Error(s(31,t==="[object Object]"?"object with keys {"+Object.keys(e).join(", ")+"}":t)))}function oo(t){function e(h,b){if(t){var S=h.deletions;S===null?(h.deletions=[b],h.flags|=16):S.push(b)}}function l(h,b){if(!t)return null;for(;b!==null;)e(h,b),b=b.sibling;return null}function a(h){for(var b=new Map;h!==null;)h.key!==null?b.set(h.key,h):b.set(h.index,h),h=h.sibling;return b}function n(h,b){return h=Ze(h,b),h.index=0,h.sibling=null,h}function u(h,b,S){return h.index=S,t?(S=h.alternate,S!==null?(S=S.index,S<b?(h.flags|=67108866,b):S):(h.flags|=67108866,b)):(h.flags|=1048576,b)}function i(h){return t&&h.alternate===null&&(h.flags|=67108866),h}function f(h,b,S,_){return b===null||b.tag!==6?(b=ki(S,h.mode,_),b.return=h,b):(b=n(b,S),b.return=h,b)}function d(h,b,S,_){var X=S.type;return X===nt?R(h,b,S.props.children,_,S.key):b!==null&&(b.elementType===X||typeof X=="object"&&X!==null&&X.$$typeof===Vt&&kl(X)===b.type)?(b=n(b,S.props),mn(b,S),b.return=h,b):(b=mu(S.type,S.key,S.props,null,h.mode,_),mn(b,S),b.return=h,b)}function z(h,b,S,_){return b===null||b.tag!==4||b.stateNode.containerInfo!==S.containerInfo||b.stateNode.implementation!==S.implementation?(b=Wi(S,h.mode,_),b.return=h,b):(b=n(b,S.children||[]),b.return=h,b)}function R(h,b,S,_,X){return b===null||b.tag!==7?(b=Vl(S,h.mode,_,X),b.return=h,b):(b=n(b,S),b.return=h,b)}function O(h,b,S){if(typeof b=="string"&&b!==""||typeof b=="number"||typeof b=="bigint")return b=ki(""+b,h.mode,S),b.return=h,b;if(typeof b=="object"&&b!==null){switch(b.$$typeof){case at:return S=mu(b.type,b.key,b.props,null,h.mode,S),mn(S,b),S.return=h,S;case ft:return b=Wi(b,h.mode,S),b.return=h,b;case Vt:return b=kl(b),O(h,b,S)}if(ae(b)||I(b))return b=Vl(b,h.mode,S,null),b.return=h,b;if(typeof b.then=="function")return O(h,Su(b),S);if(b.$$typeof===Rt)return O(h,bu(h,b),S);zu(h,b)}return null}function x(h,b,S,_){var X=b!==null?b.key:null;if(typeof S=="string"&&S!==""||typeof S=="number"||typeof S=="bigint")return X!==null?null:f(h,b,""+S,_);if(typeof S=="object"&&S!==null){switch(S.$$typeof){case at:return S.key===X?d(h,b,S,_):null;case ft:return S.key===X?z(h,b,S,_):null;case Vt:return S=kl(S),x(h,b,S,_)}if(ae(S)||I(S))return X!==null?null:R(h,b,S,_,null);if(typeof S.then=="function")return x(h,b,Su(S),_);if(S.$$typeof===Rt)return x(h,b,bu(h,S),_);zu(h,S)}return null}function A(h,b,S,_,X){if(typeof _=="string"&&_!==""||typeof _=="number"||typeof _=="bigint")return h=h.get(S)||null,f(b,h,""+_,X);if(typeof _=="object"&&_!==null){switch(_.$$typeof){case at:return h=h.get(_.key===null?S:_.key)||null,d(b,h,_,X);case ft:return h=h.get(_.key===null?S:_.key)||null,z(b,h,_,X);case Vt:return _=kl(_),A(h,b,S,_,X)}if(ae(_)||I(_))return h=h.get(S)||null,R(b,h,_,X,null);if(typeof _.then=="function")return A(h,b,S,Su(_),X);if(_.$$typeof===Rt)return A(h,b,S,bu(b,_),X);zu(b,_)}return null}function q(h,b,S,_){for(var X=null,ot=null,Y=b,k=b=0,it=null;Y!==null&&k<S.length;k++){Y.index>k?(it=Y,Y=null):it=Y.sibling;var rt=x(h,Y,S[k],_);if(rt===null){Y===null&&(Y=it);break}t&&Y&&rt.alternate===null&&e(h,Y),b=u(rt,b,k),ot===null?X=rt:ot.sibling=rt,ot=rt,Y=it}if(k===S.length)return l(h,Y),ct&&Le(h,k),X;if(Y===null){for(;k<S.length;k++)Y=O(h,S[k],_),Y!==null&&(b=u(Y,b,k),ot===null?X=Y:ot.sibling=Y,ot=Y);return ct&&Le(h,k),X}for(Y=a(Y);k<S.length;k++)it=A(Y,h,k,S[k],_),it!==null&&(t&&it.alternate!==null&&Y.delete(it.key===null?k:it.key),b=u(it,b,k),ot===null?X=it:ot.sibling=it,ot=it);return t&&Y.forEach(function(Ml){return e(h,Ml)}),ct&&Le(h,k),X}function V(h,b,S,_){if(S==null)throw Error(s(151));for(var X=null,ot=null,Y=b,k=b=0,it=null,rt=S.next();Y!==null&&!rt.done;k++,rt=S.next()){Y.index>k?(it=Y,Y=null):it=Y.sibling;var Ml=x(h,Y,rt.value,_);if(Ml===null){Y===null&&(Y=it);break}t&&Y&&Ml.alternate===null&&e(h,Y),b=u(Ml,b,k),ot===null?X=Ml:ot.sibling=Ml,ot=Ml,Y=it}if(rt.done)return l(h,Y),ct&&Le(h,k),X;if(Y===null){for(;!rt.done;k++,rt=S.next())rt=O(h,rt.value,_),rt!==null&&(b=u(rt,b,k),ot===null?X=rt:ot.sibling=rt,ot=rt);return ct&&Le(h,k),X}for(Y=a(Y);!rt.done;k++,rt=S.next())rt=A(Y,h,k,rt.value,_),rt!==null&&(t&&rt.alternate!==null&&Y.delete(rt.key===null?k:rt.key),b=u(rt,b,k),ot===null?X=rt:ot.sibling=rt,ot=rt);return t&&Y.forEach(function(kv){return e(h,kv)}),ct&&Le(h,k),X}function St(h,b,S,_){if(typeof S=="object"&&S!==null&&S.type===nt&&S.key===null&&(S=S.props.children),typeof S=="object"&&S!==null){switch(S.$$typeof){case at:t:{for(var X=S.key;b!==null;){if(b.key===X){if(X=S.type,X===nt){if(b.tag===7){l(h,b.sibling),_=n(b,S.props.children),_.return=h,h=_;break t}}else if(b.elementType===X||typeof X=="object"&&X!==null&&X.$$typeof===Vt&&kl(X)===b.type){l(h,b.sibling),_=n(b,S.props),mn(_,S),_.return=h,h=_;break t}l(h,b);break}else e(h,b);b=b.sibling}S.type===nt?(_=Vl(S.props.children,h.mode,_,S.key),_.return=h,h=_):(_=mu(S.type,S.key,S.props,null,h.mode,_),mn(_,S),_.return=h,h=_)}return i(h);case ft:t:{for(X=S.key;b!==null;){if(b.key===X)if(b.tag===4&&b.stateNode.containerInfo===S.containerInfo&&b.stateNode.implementation===S.implementation){l(h,b.sibling),_=n(b,S.children||[]),_.return=h,h=_;break t}else{l(h,b);break}else e(h,b);b=b.sibling}_=Wi(S,h.mode,_),_.return=h,h=_}return i(h);case Vt:return S=kl(S),St(h,b,S,_)}if(ae(S))return q(h,b,S,_);if(I(S)){if(X=I(S),typeof X!="function")throw Error(s(150));return S=X.call(S),V(h,b,S,_)}if(typeof S.then=="function")return St(h,b,Su(S),_);if(S.$$typeof===Rt)return St(h,b,bu(h,S),_);zu(h,S)}return typeof S=="string"&&S!==""||typeof S=="number"||typeof S=="bigint"?(S=""+S,b!==null&&b.tag===6?(l(h,b.sibling),_=n(b,S),_.return=h,h=_):(l(h,b),_=ki(S,h.mode,_),_.return=h,h=_),i(h)):l(h,b)}return function(h,b,S,_){try{dn=0;var X=St(h,b,S,_);return Aa=null,X}catch(Y){if(Y===Na||Y===hu)throw Y;var ot=be(29,Y,null,h.mode);return ot.lanes=_,ot.return=h,ot}finally{}}}var Fl=oo(!0),ro=oo(!1),yl=!1;function sc(t){t.updateQueue={baseState:t.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null,lanes:0,hiddenCallbacks:null},callbacks:null}}function fc(t,e){t=t.updateQueue,e.updateQueue===t&&(e.updateQueue={baseState:t.baseState,firstBaseUpdate:t.firstBaseUpdate,lastBaseUpdate:t.lastBaseUpdate,shared:t.shared,callbacks:null})}function vl(t){return{lane:t,tag:0,payload:null,callback:null,next:null}}function bl(t,e,l){var a=t.updateQueue;if(a===null)return null;if(a=a.shared,(dt&2)!==0){var n=a.pending;return n===null?e.next=e:(e.next=n.next,n.next=e),a.pending=e,e=du(t),$f(t,null,l),e}return ru(t,a,e,l),du(t)}function yn(t,e,l){if(e=e.updateQueue,e!==null&&(e=e.shared,(l&4194048)!==0)){var a=e.lanes;a&=t.pendingLanes,l|=a,e.lanes=l,ef(t,l)}}function oc(t,e){var l=t.updateQueue,a=t.alternate;if(a!==null&&(a=a.updateQueue,l===a)){var n=null,u=null;if(l=l.firstBaseUpdate,l!==null){do{var i={lane:l.lane,tag:l.tag,payload:l.payload,callback:null,next:null};u===null?n=u=i:u=u.next=i,l=l.next}while(l!==null);u===null?n=u=e:u=u.next=e}else n=u=e;l={baseState:a.baseState,firstBaseUpdate:n,lastBaseUpdate:u,shared:a.shared,callbacks:a.callbacks},t.updateQueue=l;return}t=l.lastBaseUpdate,t===null?l.firstBaseUpdate=e:t.next=e,l.lastBaseUpdate=e}var rc=!1;function vn(){if(rc){var t=Ta;if(t!==null)throw t}}function bn(t,e,l,a){rc=!1;var n=t.updateQueue;yl=!1;var u=n.firstBaseUpdate,i=n.lastBaseUpdate,f=n.shared.pending;if(f!==null){n.shared.pending=null;var d=f,z=d.next;d.next=null,i===null?u=z:i.next=z,i=d;var R=t.alternate;R!==null&&(R=R.updateQueue,f=R.lastBaseUpdate,f!==i&&(f===null?R.firstBaseUpdate=z:f.next=z,R.lastBaseUpdate=d))}if(u!==null){var O=n.baseState;i=0,R=z=d=null,f=u;do{var x=f.lane&-536870913,A=x!==f.lane;if(A?(ut&x)===x:(a&x)===x){x!==0&&x===xa&&(rc=!0),R!==null&&(R=R.next={lane:0,tag:f.tag,payload:f.payload,callback:null,next:null});t:{var q=t,V=f;x=e;var St=l;switch(V.tag){case 1:if(q=V.payload,typeof q=="function"){O=q.call(St,O,x);break t}O=q;break t;case 3:q.flags=q.flags&-65537|128;case 0:if(q=V.payload,x=typeof q=="function"?q.call(St,O,x):q,x==null)break t;O=j({},O,x);break t;case 2:yl=!0}}x=f.callback,x!==null&&(t.flags|=64,A&&(t.flags|=8192),A=n.callbacks,A===null?n.callbacks=[x]:A.push(x))}else A={lane:x,tag:f.tag,payload:f.payload,callback:f.callback,next:null},R===null?(z=R=A,d=O):R=R.next=A,i|=x;if(f=f.next,f===null){if(f=n.shared.pending,f===null)break;A=f,f=A.next,A.next=null,n.lastBaseUpdate=A,n.shared.pending=null}}while(!0);R===null&&(d=O),n.baseState=d,n.firstBaseUpdate=z,n.lastBaseUpdate=R,u===null&&(n.shared.lanes=0),zl|=i,t.lanes=i,t.memoizedState=O}}function mo(t,e){if(typeof t!="function")throw Error(s(191,t));t.call(e)}function yo(t,e){var l=t.callbacks;if(l!==null)for(t.callbacks=null,t=0;t<l.length;t++)mo(l[t],e)}var Ea=v(null),xu=v(0);function vo(t,e){t=al,U(xu,t),U(Ea,e),al=t|e.baseLanes}function dc(){U(xu,al),U(Ea,Ea.current)}function mc(){al=xu.current,M(Ea),M(xu)}var ge=v(null),_e=null;function gl(t){var e=t.alternate;U(Dt,Dt.current&1),U(ge,t),_e===null&&(e===null||Ea.current!==null||e.memoizedState!==null)&&(_e=t)}function yc(t){U(Dt,Dt.current),U(ge,t),_e===null&&(_e=t)}function bo(t){t.tag===22?(U(Dt,Dt.current),U(ge,t),_e===null&&(_e=t)):hl()}function hl(){U(Dt,Dt.current),U(ge,ge.current)}function he(t){M(ge),_e===t&&(_e=null),M(Dt)}var Dt=v(0);function Tu(t){for(var e=t;e!==null;){if(e.tag===13){var l=e.memoizedState;if(l!==null&&(l=l.dehydrated,l===null||Ss(l)||zs(l)))return e}else if(e.tag===19&&(e.memoizedProps.revealOrder==="forwards"||e.memoizedProps.revealOrder==="backwards"||e.memoizedProps.revealOrder==="unstable_legacy-backwards"||e.memoizedProps.revealOrder==="together")){if((e.flags&128)!==0)return e}else if(e.child!==null){e.child.return=e,e=e.child;continue}if(e===t)break;for(;e.sibling===null;){if(e.return===null||e.return===t)return null;e=e.return}e.sibling.return=e.return,e=e.sibling}return null}var ke=0,J=null,ht=null,Bt=null,Nu=!1,Ra=!1,Il=!1,Au=0,gn=0,Ca=null,wy=0;function Ct(){throw Error(s(321))}function vc(t,e){if(e===null)return!1;for(var l=0;l<e.length&&l<t.length;l++)if(!ve(t[l],e[l]))return!1;return!0}function bc(t,e,l,a,n,u){return ke=u,J=e,e.memoizedState=null,e.updateQueue=null,e.lanes=0,E.H=t===null||t.memoizedState===null?Po:Mc,Il=!1,u=l(a,n),Il=!1,Ra&&(u=ho(e,l,a,n)),go(t),u}function go(t){E.H=Sn;var e=ht!==null&&ht.next!==null;if(ke=0,Bt=ht=J=null,Nu=!1,gn=0,Ca=null,e)throw Error(s(300));t===null||qt||(t=t.dependencies,t!==null&&vu(t)&&(qt=!0))}function ho(t,e,l,a){J=t;var n=0;do{if(Ra&&(Ca=null),gn=0,Ra=!1,25<=n)throw Error(s(301));if(n+=1,Bt=ht=null,t.updateQueue!=null){var u=t.updateQueue;u.lastEffect=null,u.events=null,u.stores=null,u.memoCache!=null&&(u.memoCache.index=0)}E.H=tr,u=e(l,a)}while(Ra);return u}function Yy(){var t=E.H,e=t.useState()[0];return e=typeof e.then=="function"?hn(e):e,t=t.useState()[0],(ht!==null?ht.memoizedState:null)!==t&&(J.flags|=1024),e}function gc(){var t=Au!==0;return Au=0,t}function hc(t,e,l){e.updateQueue=t.updateQueue,e.flags&=-2053,t.lanes&=~l}function pc(t){if(Nu){for(t=t.memoizedState;t!==null;){var e=t.queue;e!==null&&(e.pending=null),t=t.next}Nu=!1}ke=0,Bt=ht=J=null,Ra=!1,gn=Au=0,Ca=null}function Pt(){var t={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return Bt===null?J.memoizedState=Bt=t:Bt=Bt.next=t,Bt}function jt(){if(ht===null){var t=J.alternate;t=t!==null?t.memoizedState:null}else t=ht.next;var e=Bt===null?J.memoizedState:Bt.next;if(e!==null)Bt=e,ht=t;else{if(t===null)throw J.alternate===null?Error(s(467)):Error(s(310));ht=t,t={memoizedState:ht.memoizedState,baseState:ht.baseState,baseQueue:ht.baseQueue,queue:ht.queue,next:null},Bt===null?J.memoizedState=Bt=t:Bt=Bt.next=t}return Bt}function Eu(){return{lastEffect:null,events:null,stores:null,memoCache:null}}function hn(t){var e=gn;return gn+=1,Ca===null&&(Ca=[]),t=co(Ca,t,e),e=J,(Bt===null?e.memoizedState:Bt.next)===null&&(e=e.alternate,E.H=e===null||e.memoizedState===null?Po:Mc),t}function Ru(t){if(t!==null&&typeof t=="object"){if(typeof t.then=="function")return hn(t);if(t.$$typeof===Rt)return Jt(t)}throw Error(s(438,String(t)))}function Sc(t){var e=null,l=J.updateQueue;if(l!==null&&(e=l.memoCache),e==null){var a=J.alternate;a!==null&&(a=a.updateQueue,a!==null&&(a=a.memoCache,a!=null&&(e={data:a.data.map(function(n){return n.slice()}),index:0})))}if(e==null&&(e={data:[],index:0}),l===null&&(l=Eu(),J.updateQueue=l),l.memoCache=e,l=e.data[e.index],l===void 0)for(l=e.data[e.index]=Array(t),a=0;a<t;a++)l[a]=Be;return e.index++,l}function We(t,e){return typeof e=="function"?e(t):e}function Cu(t){var e=jt();return zc(e,ht,t)}function zc(t,e,l){var a=t.queue;if(a===null)throw Error(s(311));a.lastRenderedReducer=l;var n=t.baseQueue,u=a.pending;if(u!==null){if(n!==null){var i=n.next;n.next=u.next,u.next=i}e.baseQueue=n=u,a.pending=null}if(u=t.baseState,n===null)t.memoizedState=u;else{e=n.next;var f=i=null,d=null,z=e,R=!1;do{var O=z.lane&-536870913;if(O!==z.lane?(ut&O)===O:(ke&O)===O){var x=z.revertLane;if(x===0)d!==null&&(d=d.next={lane:0,revertLane:0,gesture:null,action:z.action,hasEagerState:z.hasEagerState,eagerState:z.eagerState,next:null}),O===xa&&(R=!0);else if((ke&x)===x){z=z.next,x===xa&&(R=!0);continue}else O={lane:0,revertLane:z.revertLane,gesture:null,action:z.action,hasEagerState:z.hasEagerState,eagerState:z.eagerState,next:null},d===null?(f=d=O,i=u):d=d.next=O,J.lanes|=x,zl|=x;O=z.action,Il&&l(u,O),u=z.hasEagerState?z.eagerState:l(u,O)}else x={lane:O,revertLane:z.revertLane,gesture:z.gesture,action:z.action,hasEagerState:z.hasEagerState,eagerState:z.eagerState,next:null},d===null?(f=d=x,i=u):d=d.next=x,J.lanes|=O,zl|=O;z=z.next}while(z!==null&&z!==e);if(d===null?i=u:d.next=f,!ve(u,t.memoizedState)&&(qt=!0,R&&(l=Ta,l!==null)))throw l;t.memoizedState=u,t.baseState=i,t.baseQueue=d,a.lastRenderedState=u}return n===null&&(a.lanes=0),[t.memoizedState,a.dispatch]}function xc(t){var e=jt(),l=e.queue;if(l===null)throw Error(s(311));l.lastRenderedReducer=t;var a=l.dispatch,n=l.pending,u=e.memoizedState;if(n!==null){l.pending=null;var i=n=n.next;do u=t(u,i.action),i=i.next;while(i!==n);ve(u,e.memoizedState)||(qt=!0),e.memoizedState=u,e.baseQueue===null&&(e.baseState=u),l.lastRenderedState=u}return[u,a]}function po(t,e,l){var a=J,n=jt(),u=ct;if(u){if(l===void 0)throw Error(s(407));l=l()}else l=e();var i=!ve((ht||n).memoizedState,l);if(i&&(n.memoizedState=l,qt=!0),n=n.queue,Ac(xo.bind(null,a,n,t),[t]),n.getSnapshot!==e||i||Bt!==null&&Bt.memoizedState.tag&1){if(a.flags|=2048,_a(9,{destroy:void 0},zo.bind(null,a,n,l,e),null),xt===null)throw Error(s(349));u||(ke&127)!==0||So(a,e,l)}return l}function So(t,e,l){t.flags|=16384,t={getSnapshot:e,value:l},e=J.updateQueue,e===null?(e=Eu(),J.updateQueue=e,e.stores=[t]):(l=e.stores,l===null?e.stores=[t]:l.push(t))}function zo(t,e,l,a){e.value=l,e.getSnapshot=a,To(e)&&No(t)}function xo(t,e,l){return l(function(){To(e)&&No(t)})}function To(t){var e=t.getSnapshot;t=t.value;try{var l=e();return!ve(t,l)}catch{return!0}}function No(t){var e=Kl(t,2);e!==null&&oe(e,t,2)}function Tc(t){var e=Pt();if(typeof t=="function"){var l=t;if(t=l(),Il){cl(!0);try{l()}finally{cl(!1)}}}return e.memoizedState=e.baseState=t,e.queue={pending:null,lanes:0,dispatch:null,lastRenderedReducer:We,lastRenderedState:t},e}function Ao(t,e,l,a){return t.baseState=l,zc(t,ht,typeof a=="function"?a:We)}function Xy(t,e,l,a,n){if(Mu(t))throw Error(s(485));if(t=e.action,t!==null){var u={payload:n,action:t,next:null,isTransition:!0,status:"pending",value:null,reason:null,listeners:[],then:function(i){u.listeners.push(i)}};E.T!==null?l(!0):u.isTransition=!1,a(u),l=e.pending,l===null?(u.next=e.pending=u,Eo(e,u)):(u.next=l.next,e.pending=l.next=u)}}function Eo(t,e){var l=e.action,a=e.payload,n=t.state;if(e.isTransition){var u=E.T,i={};E.T=i;try{var f=l(n,a),d=E.S;d!==null&&d(i,f),Ro(t,e,f)}catch(z){Nc(t,e,z)}finally{u!==null&&i.types!==null&&(u.types=i.types),E.T=u}}else try{u=l(n,a),Ro(t,e,u)}catch(z){Nc(t,e,z)}}function Ro(t,e,l){l!==null&&typeof l=="object"&&typeof l.then=="function"?l.then(function(a){Co(t,e,a)},function(a){return Nc(t,e,a)}):Co(t,e,l)}function Co(t,e,l){e.status="fulfilled",e.value=l,_o(e),t.state=l,e=t.pending,e!==null&&(l=e.next,l===e?t.pending=null:(l=l.next,e.next=l,Eo(t,l)))}function Nc(t,e,l){var a=t.pending;if(t.pending=null,a!==null){a=a.next;do e.status="rejected",e.reason=l,_o(e),e=e.next;while(e!==a)}t.action=null}function _o(t){t=t.listeners;for(var e=0;e<t.length;e++)(0,t[e])()}function Oo(t,e){return e}function Mo(t,e){if(ct){var l=xt.formState;if(l!==null){t:{var a=J;if(ct){if(Tt){e:{for(var n=Tt,u=Ce;n.nodeType!==8;){if(!u){n=null;break e}if(n=Oe(n.nextSibling),n===null){n=null;break e}}u=n.data,n=u==="F!"||u==="F"?n:null}if(n){Tt=Oe(n.nextSibling),a=n.data==="F!";break t}}dl(a)}a=!1}a&&(e=l[0])}}return l=Pt(),l.memoizedState=l.baseState=e,a={pending:null,lanes:0,dispatch:null,lastRenderedReducer:Oo,lastRenderedState:e},l.queue=a,l=Wo.bind(null,J,a),a.dispatch=l,a=Tc(!1),u=Oc.bind(null,J,!1,a.queue),a=Pt(),n={state:e,dispatch:null,action:t,pending:null},a.queue=n,l=Xy.bind(null,J,n,u,l),n.dispatch=l,a.memoizedState=t,[e,l,!1]}function Do(t){var e=jt();return jo(e,ht,t)}function jo(t,e,l){if(e=zc(t,e,Oo)[0],t=Cu(We)[0],typeof e=="object"&&e!==null&&typeof e.then=="function")try{var a=hn(e)}catch(i){throw i===Na?hu:i}else a=e;e=jt();var n=e.queue,u=n.dispatch;return l!==e.memoizedState&&(J.flags|=2048,_a(9,{destroy:void 0},Qy.bind(null,n,l),null)),[a,u,t]}function Qy(t,e){t.action=e}function Uo(t){var e=jt(),l=ht;if(l!==null)return jo(e,l,t);jt(),e=e.memoizedState,l=jt();var a=l.queue.dispatch;return l.memoizedState=t,[e,a,!1]}function _a(t,e,l,a){return t={tag:t,create:l,deps:a,inst:e,next:null},e=J.updateQueue,e===null&&(e=Eu(),J.updateQueue=e),l=e.lastEffect,l===null?e.lastEffect=t.next=t:(a=l.next,l.next=t,t.next=a,e.lastEffect=t),t}function Ho(){return jt().memoizedState}function _u(t,e,l,a){var n=Pt();J.flags|=t,n.memoizedState=_a(1|e,{destroy:void 0},l,a===void 0?null:a)}function Ou(t,e,l,a){var n=jt();a=a===void 0?null:a;var u=n.memoizedState.inst;ht!==null&&a!==null&&vc(a,ht.memoizedState.deps)?n.memoizedState=_a(e,u,l,a):(J.flags|=t,n.memoizedState=_a(1|e,u,l,a))}function Bo(t,e){_u(8390656,8,t,e)}function Ac(t,e){Ou(2048,8,t,e)}function Ky(t){J.flags|=4;var e=J.updateQueue;if(e===null)e=Eu(),J.updateQueue=e,e.events=[t];else{var l=e.events;l===null?e.events=[t]:l.push(t)}}function qo(t){var e=jt().memoizedState;return Ky({ref:e,nextImpl:t}),function(){if((dt&2)!==0)throw Error(s(440));return e.impl.apply(void 0,arguments)}}function Go(t,e){return Ou(4,2,t,e)}function wo(t,e){return Ou(4,4,t,e)}function Yo(t,e){if(typeof e=="function"){t=t();var l=e(t);return function(){typeof l=="function"?l():e(null)}}if(e!=null)return t=t(),e.current=t,function(){e.current=null}}function Xo(t,e,l){l=l!=null?l.concat([t]):null,Ou(4,4,Yo.bind(null,e,t),l)}function Ec(){}function Qo(t,e){var l=jt();e=e===void 0?null:e;var a=l.memoizedState;return e!==null&&vc(e,a[1])?a[0]:(l.memoizedState=[t,e],t)}function Ko(t,e){var l=jt();e=e===void 0?null:e;var a=l.memoizedState;if(e!==null&&vc(e,a[1]))return a[0];if(a=t(),Il){cl(!0);try{t()}finally{cl(!1)}}return l.memoizedState=[a,e],a}function Rc(t,e,l){return l===void 0||(ke&1073741824)!==0&&(ut&261930)===0?t.memoizedState=e:(t.memoizedState=l,t=Vr(),J.lanes|=t,zl|=t,l)}function Vo(t,e,l,a){return ve(l,e)?l:Ea.current!==null?(t=Rc(t,l,a),ve(t,e)||(qt=!0),t):(ke&42)===0||(ke&1073741824)!==0&&(ut&261930)===0?(qt=!0,t.memoizedState=l):(t=Vr(),J.lanes|=t,zl|=t,e)}function Zo(t,e,l,a,n){var u=D.p;D.p=u!==0&&8>u?u:8;var i=E.T,f={};E.T=f,Oc(t,!1,e,l);try{var d=n(),z=E.S;if(z!==null&&z(f,d),d!==null&&typeof d=="object"&&typeof d.then=="function"){var R=Gy(d,a);pn(t,e,R,ze(t))}else pn(t,e,a,ze(t))}catch(O){pn(t,e,{then:function(){},status:"rejected",reason:O},ze())}finally{D.p=u,i!==null&&f.types!==null&&(i.types=f.types),E.T=i}}function Vy(){}function Cc(t,e,l,a){if(t.tag!==5)throw Error(s(476));var n=Lo(t).queue;Zo(t,n,e,K,l===null?Vy:function(){return Jo(t),l(a)})}function Lo(t){var e=t.memoizedState;if(e!==null)return e;e={memoizedState:K,baseState:K,baseQueue:null,queue:{pending:null,lanes:0,dispatch:null,lastRenderedReducer:We,lastRenderedState:K},next:null};var l={};return e.next={memoizedState:l,baseState:l,baseQueue:null,queue:{pending:null,lanes:0,dispatch:null,lastRenderedReducer:We,lastRenderedState:l},next:null},t.memoizedState=e,t=t.alternate,t!==null&&(t.memoizedState=e),e}function Jo(t){var e=Lo(t);e.next===null&&(e=t.alternate.memoizedState),pn(t,e.next.queue,{},ze())}function _c(){return Jt(Bn)}function $o(){return jt().memoizedState}function ko(){return jt().memoizedState}function Zy(t){for(var e=t.return;e!==null;){switch(e.tag){case 24:case 3:var l=ze();t=vl(l);var a=bl(e,t,l);a!==null&&(oe(a,e,l),yn(a,e,l)),e={cache:nc()},t.payload=e;return}e=e.return}}function Ly(t,e,l){var a=ze();l={lane:a,revertLane:0,gesture:null,action:l,hasEagerState:!1,eagerState:null,next:null},Mu(t)?Fo(e,l):(l=Ji(t,e,l,a),l!==null&&(oe(l,t,a),Io(l,e,a)))}function Wo(t,e,l){var a=ze();pn(t,e,l,a)}function pn(t,e,l,a){var n={lane:a,revertLane:0,gesture:null,action:l,hasEagerState:!1,eagerState:null,next:null};if(Mu(t))Fo(e,n);else{var u=t.alternate;if(t.lanes===0&&(u===null||u.lanes===0)&&(u=e.lastRenderedReducer,u!==null))try{var i=e.lastRenderedState,f=u(i,l);if(n.hasEagerState=!0,n.eagerState=f,ve(f,i))return ru(t,e,n,0),xt===null&&ou(),!1}catch{}finally{}if(l=Ji(t,e,n,a),l!==null)return oe(l,t,a),Io(l,e,a),!0}return!1}function Oc(t,e,l,a){if(a={lane:2,revertLane:ss(),gesture:null,action:a,hasEagerState:!1,eagerState:null,next:null},Mu(t)){if(e)throw Error(s(479))}else e=Ji(t,l,a,2),e!==null&&oe(e,t,2)}function Mu(t){var e=t.alternate;return t===J||e!==null&&e===J}function Fo(t,e){Ra=Nu=!0;var l=t.pending;l===null?e.next=e:(e.next=l.next,l.next=e),t.pending=e}function Io(t,e,l){if((l&4194048)!==0){var a=e.lanes;a&=t.pendingLanes,l|=a,e.lanes=l,ef(t,l)}}var Sn={readContext:Jt,use:Ru,useCallback:Ct,useContext:Ct,useEffect:Ct,useImperativeHandle:Ct,useLayoutEffect:Ct,useInsertionEffect:Ct,useMemo:Ct,useReducer:Ct,useRef:Ct,useState:Ct,useDebugValue:Ct,useDeferredValue:Ct,useTransition:Ct,useSyncExternalStore:Ct,useId:Ct,useHostTransitionStatus:Ct,useFormState:Ct,useActionState:Ct,useOptimistic:Ct,useMemoCache:Ct,useCacheRefresh:Ct};Sn.useEffectEvent=Ct;var Po={readContext:Jt,use:Ru,useCallback:function(t,e){return Pt().memoizedState=[t,e===void 0?null:e],t},useContext:Jt,useEffect:Bo,useImperativeHandle:function(t,e,l){l=l!=null?l.concat([t]):null,_u(4194308,4,Yo.bind(null,e,t),l)},useLayoutEffect:function(t,e){return _u(4194308,4,t,e)},useInsertionEffect:function(t,e){_u(4,2,t,e)},useMemo:function(t,e){var l=Pt();e=e===void 0?null:e;var a=t();if(Il){cl(!0);try{t()}finally{cl(!1)}}return l.memoizedState=[a,e],a},useReducer:function(t,e,l){var a=Pt();if(l!==void 0){var n=l(e);if(Il){cl(!0);try{l(e)}finally{cl(!1)}}}else n=e;return a.memoizedState=a.baseState=n,t={pending:null,lanes:0,dispatch:null,lastRenderedReducer:t,lastRenderedState:n},a.queue=t,t=t.dispatch=Ly.bind(null,J,t),[a.memoizedState,t]},useRef:function(t){var e=Pt();return t={current:t},e.memoizedState=t},useState:function(t){t=Tc(t);var e=t.queue,l=Wo.bind(null,J,e);return e.dispatch=l,[t.memoizedState,l]},useDebugValue:Ec,useDeferredValue:function(t,e){var l=Pt();return Rc(l,t,e)},useTransition:function(){var t=Tc(!1);return t=Zo.bind(null,J,t.queue,!0,!1),Pt().memoizedState=t,[!1,t]},useSyncExternalStore:function(t,e,l){var a=J,n=Pt();if(ct){if(l===void 0)throw Error(s(407));l=l()}else{if(l=e(),xt===null)throw Error(s(349));(ut&127)!==0||So(a,e,l)}n.memoizedState=l;var u={value:l,getSnapshot:e};return n.queue=u,Bo(xo.bind(null,a,u,t),[t]),a.flags|=2048,_a(9,{destroy:void 0},zo.bind(null,a,u,l,e),null),l},useId:function(){var t=Pt(),e=xt.identifierPrefix;if(ct){var l=we,a=Ge;l=(a&~(1<<32-ye(a)-1)).toString(32)+l,e="_"+e+"R_"+l,l=Au++,0<l&&(e+="H"+l.toString(32)),e+="_"}else l=wy++,e="_"+e+"r_"+l.toString(32)+"_";return t.memoizedState=e},useHostTransitionStatus:_c,useFormState:Mo,useActionState:Mo,useOptimistic:function(t){var e=Pt();e.memoizedState=e.baseState=t;var l={pending:null,lanes:0,dispatch:null,lastRenderedReducer:null,lastRenderedState:null};return e.queue=l,e=Oc.bind(null,J,!0,l),l.dispatch=e,[t,e]},useMemoCache:Sc,useCacheRefresh:function(){return Pt().memoizedState=Zy.bind(null,J)},useEffectEvent:function(t){var e=Pt(),l={impl:t};return e.memoizedState=l,function(){if((dt&2)!==0)throw Error(s(440));return l.impl.apply(void 0,arguments)}}},Mc={readContext:Jt,use:Ru,useCallback:Qo,useContext:Jt,useEffect:Ac,useImperativeHandle:Xo,useInsertionEffect:Go,useLayoutEffect:wo,useMemo:Ko,useReducer:Cu,useRef:Ho,useState:function(){return Cu(We)},useDebugValue:Ec,useDeferredValue:function(t,e){var l=jt();return Vo(l,ht.memoizedState,t,e)},useTransition:function(){var t=Cu(We)[0],e=jt().memoizedState;return[typeof t=="boolean"?t:hn(t),e]},useSyncExternalStore:po,useId:$o,useHostTransitionStatus:_c,useFormState:Do,useActionState:Do,useOptimistic:function(t,e){var l=jt();return Ao(l,ht,t,e)},useMemoCache:Sc,useCacheRefresh:ko};Mc.useEffectEvent=qo;var tr={readContext:Jt,use:Ru,useCallback:Qo,useContext:Jt,useEffect:Ac,useImperativeHandle:Xo,useInsertionEffect:Go,useLayoutEffect:wo,useMemo:Ko,useReducer:xc,useRef:Ho,useState:function(){return xc(We)},useDebugValue:Ec,useDeferredValue:function(t,e){var l=jt();return ht===null?Rc(l,t,e):Vo(l,ht.memoizedState,t,e)},useTransition:function(){var t=xc(We)[0],e=jt().memoizedState;return[typeof t=="boolean"?t:hn(t),e]},useSyncExternalStore:po,useId:$o,useHostTransitionStatus:_c,useFormState:Uo,useActionState:Uo,useOptimistic:function(t,e){var l=jt();return ht!==null?Ao(l,ht,t,e):(l.baseState=t,[t,l.queue.dispatch])},useMemoCache:Sc,useCacheRefresh:ko};tr.useEffectEvent=qo;function Dc(t,e,l,a){e=t.memoizedState,l=l(a,e),l=l==null?e:j({},e,l),t.memoizedState=l,t.lanes===0&&(t.updateQueue.baseState=l)}var jc={enqueueSetState:function(t,e,l){t=t._reactInternals;var a=ze(),n=vl(a);n.payload=e,l!=null&&(n.callback=l),e=bl(t,n,a),e!==null&&(oe(e,t,a),yn(e,t,a))},enqueueReplaceState:function(t,e,l){t=t._reactInternals;var a=ze(),n=vl(a);n.tag=1,n.payload=e,l!=null&&(n.callback=l),e=bl(t,n,a),e!==null&&(oe(e,t,a),yn(e,t,a))},enqueueForceUpdate:function(t,e){t=t._reactInternals;var l=ze(),a=vl(l);a.tag=2,e!=null&&(a.callback=e),e=bl(t,a,l),e!==null&&(oe(e,t,l),yn(e,t,l))}};function er(t,e,l,a,n,u,i){return t=t.stateNode,typeof t.shouldComponentUpdate=="function"?t.shouldComponentUpdate(a,u,i):e.prototype&&e.prototype.isPureReactComponent?!un(l,a)||!un(n,u):!0}function lr(t,e,l,a){t=e.state,typeof e.componentWillReceiveProps=="function"&&e.componentWillReceiveProps(l,a),typeof e.UNSAFE_componentWillReceiveProps=="function"&&e.UNSAFE_componentWillReceiveProps(l,a),e.state!==t&&jc.enqueueReplaceState(e,e.state,null)}function Pl(t,e){var l=e;if("ref"in e){l={};for(var a in e)a!=="ref"&&(l[a]=e[a])}if(t=t.defaultProps){l===e&&(l=j({},l));for(var n in t)l[n]===void 0&&(l[n]=t[n])}return l}function ar(t){fu(t)}function nr(t){console.error(t)}function ur(t){fu(t)}function Du(t,e){try{var l=t.onUncaughtError;l(e.value,{componentStack:e.stack})}catch(a){setTimeout(function(){throw a})}}function ir(t,e,l){try{var a=t.onCaughtError;a(l.value,{componentStack:l.stack,errorBoundary:e.tag===1?e.stateNode:null})}catch(n){setTimeout(function(){throw n})}}function Uc(t,e,l){return l=vl(l),l.tag=3,l.payload={element:null},l.callback=function(){Du(t,e)},l}function cr(t){return t=vl(t),t.tag=3,t}function sr(t,e,l,a){var n=l.type.getDerivedStateFromError;if(typeof n=="function"){var u=a.value;t.payload=function(){return n(u)},t.callback=function(){ir(e,l,a)}}var i=l.stateNode;i!==null&&typeof i.componentDidCatch=="function"&&(t.callback=function(){ir(e,l,a),typeof n!="function"&&(xl===null?xl=new Set([this]):xl.add(this));var f=a.stack;this.componentDidCatch(a.value,{componentStack:f!==null?f:""})})}function Jy(t,e,l,a,n){if(l.flags|=32768,a!==null&&typeof a=="object"&&typeof a.then=="function"){if(e=l.alternate,e!==null&&za(e,l,n,!0),l=ge.current,l!==null){switch(l.tag){case 31:case 13:return _e===null?Vu():l.alternate===null&&_t===0&&(_t=3),l.flags&=-257,l.flags|=65536,l.lanes=n,a===pu?l.flags|=16384:(e=l.updateQueue,e===null?l.updateQueue=new Set([a]):e.add(a),us(t,a,n)),!1;case 22:return l.flags|=65536,a===pu?l.flags|=16384:(e=l.updateQueue,e===null?(e={transitions:null,markerInstances:null,retryQueue:new Set([a])},l.updateQueue=e):(l=e.retryQueue,l===null?e.retryQueue=new Set([a]):l.add(a)),us(t,a,n)),!1}throw Error(s(435,l.tag))}return us(t,a,n),Vu(),!1}if(ct)return e=ge.current,e!==null?((e.flags&65536)===0&&(e.flags|=256),e.flags|=65536,e.lanes=n,a!==Pi&&(t=Error(s(422),{cause:a}),fn(Ae(t,l)))):(a!==Pi&&(e=Error(s(423),{cause:a}),fn(Ae(e,l))),t=t.current.alternate,t.flags|=65536,n&=-n,t.lanes|=n,a=Ae(a,l),n=Uc(t.stateNode,a,n),oc(t,n),_t!==4&&(_t=2)),!1;var u=Error(s(520),{cause:a});if(u=Ae(u,l),Cn===null?Cn=[u]:Cn.push(u),_t!==4&&(_t=2),e===null)return!0;a=Ae(a,l),l=e;do{switch(l.tag){case 3:return l.flags|=65536,t=n&-n,l.lanes|=t,t=Uc(l.stateNode,a,t),oc(l,t),!1;case 1:if(e=l.type,u=l.stateNode,(l.flags&128)===0&&(typeof e.getDerivedStateFromError=="function"||u!==null&&typeof u.componentDidCatch=="function"&&(xl===null||!xl.has(u))))return l.flags|=65536,n&=-n,l.lanes|=n,n=cr(n),sr(n,t,l,a),oc(l,n),!1}l=l.return}while(l!==null);return!1}var Hc=Error(s(461)),qt=!1;function $t(t,e,l,a){e.child=t===null?ro(e,null,l,a):Fl(e,t.child,l,a)}function fr(t,e,l,a,n){l=l.render;var u=e.ref;if("ref"in a){var i={};for(var f in a)f!=="ref"&&(i[f]=a[f])}else i=a;return Jl(e),a=bc(t,e,l,i,u,n),f=gc(),t!==null&&!qt?(hc(t,e,n),Fe(t,e,n)):(ct&&f&&Fi(e),e.flags|=1,$t(t,e,a,n),e.child)}function or(t,e,l,a,n){if(t===null){var u=l.type;return typeof u=="function"&&!$i(u)&&u.defaultProps===void 0&&l.compare===null?(e.tag=15,e.type=u,rr(t,e,u,a,n)):(t=mu(l.type,null,a,e,e.mode,n),t.ref=e.ref,t.return=e,e.child=t)}if(u=t.child,!Kc(t,n)){var i=u.memoizedProps;if(l=l.compare,l=l!==null?l:un,l(i,a)&&t.ref===e.ref)return Fe(t,e,n)}return e.flags|=1,t=Ze(u,a),t.ref=e.ref,t.return=e,e.child=t}function rr(t,e,l,a,n){if(t!==null){var u=t.memoizedProps;if(un(u,a)&&t.ref===e.ref)if(qt=!1,e.pendingProps=a=u,Kc(t,n))(t.flags&131072)!==0&&(qt=!0);else return e.lanes=t.lanes,Fe(t,e,n)}return Bc(t,e,l,a,n)}function dr(t,e,l,a){var n=a.children,u=t!==null?t.memoizedState:null;if(t===null&&e.stateNode===null&&(e.stateNode={_visibility:1,_pendingMarkers:null,_retryCache:null,_transitions:null}),a.mode==="hidden"){if((e.flags&128)!==0){if(u=u!==null?u.baseLanes|l:l,t!==null){for(a=e.child=t.child,n=0;a!==null;)n=n|a.lanes|a.childLanes,a=a.sibling;a=n&~u}else a=0,e.child=null;return mr(t,e,u,l,a)}if((l&536870912)!==0)e.memoizedState={baseLanes:0,cachePool:null},t!==null&&gu(e,u!==null?u.cachePool:null),u!==null?vo(e,u):dc(),bo(e);else return a=e.lanes=536870912,mr(t,e,u!==null?u.baseLanes|l:l,l,a)}else u!==null?(gu(e,u.cachePool),vo(e,u),hl(),e.memoizedState=null):(t!==null&&gu(e,null),dc(),hl());return $t(t,e,n,l),e.child}function zn(t,e){return t!==null&&t.tag===22||e.stateNode!==null||(e.stateNode={_visibility:1,_pendingMarkers:null,_retryCache:null,_transitions:null}),e.sibling}function mr(t,e,l,a,n){var u=ic();return u=u===null?null:{parent:Ht._currentValue,pool:u},e.memoizedState={baseLanes:l,cachePool:u},t!==null&&gu(e,null),dc(),bo(e),t!==null&&za(t,e,a,!0),e.childLanes=n,null}function ju(t,e){return e=Hu({mode:e.mode,children:e.children},t.mode),e.ref=t.ref,t.child=e,e.return=t,e}function yr(t,e,l){return Fl(e,t.child,null,l),t=ju(e,e.pendingProps),t.flags|=2,he(e),e.memoizedState=null,t}function $y(t,e,l){var a=e.pendingProps,n=(e.flags&128)!==0;if(e.flags&=-129,t===null){if(ct){if(a.mode==="hidden")return t=ju(e,a),e.lanes=536870912,zn(null,t);if(yc(e),(t=Tt)?(t=Ed(t,Ce),t=t!==null&&t.data==="&"?t:null,t!==null&&(e.memoizedState={dehydrated:t,treeContext:ol!==null?{id:Ge,overflow:we}:null,retryLane:536870912,hydrationErrors:null},l=Wf(t),l.return=e,e.child=l,Lt=e,Tt=null)):t=null,t===null)throw dl(e);return e.lanes=536870912,null}return ju(e,a)}var u=t.memoizedState;if(u!==null){var i=u.dehydrated;if(yc(e),n)if(e.flags&256)e.flags&=-257,e=yr(t,e,l);else if(e.memoizedState!==null)e.child=t.child,e.flags|=128,e=null;else throw Error(s(558));else if(qt||za(t,e,l,!1),n=(l&t.childLanes)!==0,qt||n){if(a=xt,a!==null&&(i=lf(a,l),i!==0&&i!==u.retryLane))throw u.retryLane=i,Kl(t,i),oe(a,t,i),Hc;Vu(),e=yr(t,e,l)}else t=u.treeContext,Tt=Oe(i.nextSibling),Lt=e,ct=!0,rl=null,Ce=!1,t!==null&&Pf(e,t),e=ju(e,a),e.flags|=4096;return e}return t=Ze(t.child,{mode:a.mode,children:a.children}),t.ref=e.ref,e.child=t,t.return=e,t}function Uu(t,e){var l=e.ref;if(l===null)t!==null&&t.ref!==null&&(e.flags|=4194816);else{if(typeof l!="function"&&typeof l!="object")throw Error(s(284));(t===null||t.ref!==l)&&(e.flags|=4194816)}}function Bc(t,e,l,a,n){return Jl(e),l=bc(t,e,l,a,void 0,n),a=gc(),t!==null&&!qt?(hc(t,e,n),Fe(t,e,n)):(ct&&a&&Fi(e),e.flags|=1,$t(t,e,l,n),e.child)}function vr(t,e,l,a,n,u){return Jl(e),e.updateQueue=null,l=ho(e,a,l,n),go(t),a=gc(),t!==null&&!qt?(hc(t,e,u),Fe(t,e,u)):(ct&&a&&Fi(e),e.flags|=1,$t(t,e,l,u),e.child)}function br(t,e,l,a,n){if(Jl(e),e.stateNode===null){var u=ga,i=l.contextType;typeof i=="object"&&i!==null&&(u=Jt(i)),u=new l(a,u),e.memoizedState=u.state!==null&&u.state!==void 0?u.state:null,u.updater=jc,e.stateNode=u,u._reactInternals=e,u=e.stateNode,u.props=a,u.state=e.memoizedState,u.refs={},sc(e),i=l.contextType,u.context=typeof i=="object"&&i!==null?Jt(i):ga,u.state=e.memoizedState,i=l.getDerivedStateFromProps,typeof i=="function"&&(Dc(e,l,i,a),u.state=e.memoizedState),typeof l.getDerivedStateFromProps=="function"||typeof u.getSnapshotBeforeUpdate=="function"||typeof u.UNSAFE_componentWillMount!="function"&&typeof u.componentWillMount!="function"||(i=u.state,typeof u.componentWillMount=="function"&&u.componentWillMount(),typeof u.UNSAFE_componentWillMount=="function"&&u.UNSAFE_componentWillMount(),i!==u.state&&jc.enqueueReplaceState(u,u.state,null),bn(e,a,u,n),vn(),u.state=e.memoizedState),typeof u.componentDidMount=="function"&&(e.flags|=4194308),a=!0}else if(t===null){u=e.stateNode;var f=e.memoizedProps,d=Pl(l,f);u.props=d;var z=u.context,R=l.contextType;i=ga,typeof R=="object"&&R!==null&&(i=Jt(R));var O=l.getDerivedStateFromProps;R=typeof O=="function"||typeof u.getSnapshotBeforeUpdate=="function",f=e.pendingProps!==f,R||typeof u.UNSAFE_componentWillReceiveProps!="function"&&typeof u.componentWillReceiveProps!="function"||(f||z!==i)&&lr(e,u,a,i),yl=!1;var x=e.memoizedState;u.state=x,bn(e,a,u,n),vn(),z=e.memoizedState,f||x!==z||yl?(typeof O=="function"&&(Dc(e,l,O,a),z=e.memoizedState),(d=yl||er(e,l,d,a,x,z,i))?(R||typeof u.UNSAFE_componentWillMount!="function"&&typeof u.componentWillMount!="function"||(typeof u.componentWillMount=="function"&&u.componentWillMount(),typeof u.UNSAFE_componentWillMount=="function"&&u.UNSAFE_componentWillMount()),typeof u.componentDidMount=="function"&&(e.flags|=4194308)):(typeof u.componentDidMount=="function"&&(e.flags|=4194308),e.memoizedProps=a,e.memoizedState=z),u.props=a,u.state=z,u.context=i,a=d):(typeof u.componentDidMount=="function"&&(e.flags|=4194308),a=!1)}else{u=e.stateNode,fc(t,e),i=e.memoizedProps,R=Pl(l,i),u.props=R,O=e.pendingProps,x=u.context,z=l.contextType,d=ga,typeof z=="object"&&z!==null&&(d=Jt(z)),f=l.getDerivedStateFromProps,(z=typeof f=="function"||typeof u.getSnapshotBeforeUpdate=="function")||typeof u.UNSAFE_componentWillReceiveProps!="function"&&typeof u.componentWillReceiveProps!="function"||(i!==O||x!==d)&&lr(e,u,a,d),yl=!1,x=e.memoizedState,u.state=x,bn(e,a,u,n),vn();var A=e.memoizedState;i!==O||x!==A||yl||t!==null&&t.dependencies!==null&&vu(t.dependencies)?(typeof f=="function"&&(Dc(e,l,f,a),A=e.memoizedState),(R=yl||er(e,l,R,a,x,A,d)||t!==null&&t.dependencies!==null&&vu(t.dependencies))?(z||typeof u.UNSAFE_componentWillUpdate!="function"&&typeof u.componentWillUpdate!="function"||(typeof u.componentWillUpdate=="function"&&u.componentWillUpdate(a,A,d),typeof u.UNSAFE_componentWillUpdate=="function"&&u.UNSAFE_componentWillUpdate(a,A,d)),typeof u.componentDidUpdate=="function"&&(e.flags|=4),typeof u.getSnapshotBeforeUpdate=="function"&&(e.flags|=1024)):(typeof u.componentDidUpdate!="function"||i===t.memoizedProps&&x===t.memoizedState||(e.flags|=4),typeof u.getSnapshotBeforeUpdate!="function"||i===t.memoizedProps&&x===t.memoizedState||(e.flags|=1024),e.memoizedProps=a,e.memoizedState=A),u.props=a,u.state=A,u.context=d,a=R):(typeof u.componentDidUpdate!="function"||i===t.memoizedProps&&x===t.memoizedState||(e.flags|=4),typeof u.getSnapshotBeforeUpdate!="function"||i===t.memoizedProps&&x===t.memoizedState||(e.flags|=1024),a=!1)}return u=a,Uu(t,e),a=(e.flags&128)!==0,u||a?(u=e.stateNode,l=a&&typeof l.getDerivedStateFromError!="function"?null:u.render(),e.flags|=1,t!==null&&a?(e.child=Fl(e,t.child,null,n),e.child=Fl(e,null,l,n)):$t(t,e,l,n),e.memoizedState=u.state,t=e.child):t=Fe(t,e,n),t}function gr(t,e,l,a){return Zl(),e.flags|=256,$t(t,e,l,a),e.child}var qc={dehydrated:null,treeContext:null,retryLane:0,hydrationErrors:null};function Gc(t){return{baseLanes:t,cachePool:uo()}}function wc(t,e,l){return t=t!==null?t.childLanes&~l:0,e&&(t|=Se),t}function hr(t,e,l){var a=e.pendingProps,n=!1,u=(e.flags&128)!==0,i;if((i=u)||(i=t!==null&&t.memoizedState===null?!1:(Dt.current&2)!==0),i&&(n=!0,e.flags&=-129),i=(e.flags&32)!==0,e.flags&=-33,t===null){if(ct){if(n?gl(e):hl(),(t=Tt)?(t=Ed(t,Ce),t=t!==null&&t.data!=="&"?t:null,t!==null&&(e.memoizedState={dehydrated:t,treeContext:ol!==null?{id:Ge,overflow:we}:null,retryLane:536870912,hydrationErrors:null},l=Wf(t),l.return=e,e.child=l,Lt=e,Tt=null)):t=null,t===null)throw dl(e);return zs(t)?e.lanes=32:e.lanes=536870912,null}var f=a.children;return a=a.fallback,n?(hl(),n=e.mode,f=Hu({mode:"hidden",children:f},n),a=Vl(a,n,l,null),f.return=e,a.return=e,f.sibling=a,e.child=f,a=e.child,a.memoizedState=Gc(l),a.childLanes=wc(t,i,l),e.memoizedState=qc,zn(null,a)):(gl(e),Yc(e,f))}var d=t.memoizedState;if(d!==null&&(f=d.dehydrated,f!==null)){if(u)e.flags&256?(gl(e),e.flags&=-257,e=Xc(t,e,l)):e.memoizedState!==null?(hl(),e.child=t.child,e.flags|=128,e=null):(hl(),f=a.fallback,n=e.mode,a=Hu({mode:"visible",children:a.children},n),f=Vl(f,n,l,null),f.flags|=2,a.return=e,f.return=e,a.sibling=f,e.child=a,Fl(e,t.child,null,l),a=e.child,a.memoizedState=Gc(l),a.childLanes=wc(t,i,l),e.memoizedState=qc,e=zn(null,a));else if(gl(e),zs(f)){if(i=f.nextSibling&&f.nextSibling.dataset,i)var z=i.dgst;i=z,a=Error(s(419)),a.stack="",a.digest=i,fn({value:a,source:null,stack:null}),e=Xc(t,e,l)}else if(qt||za(t,e,l,!1),i=(l&t.childLanes)!==0,qt||i){if(i=xt,i!==null&&(a=lf(i,l),a!==0&&a!==d.retryLane))throw d.retryLane=a,Kl(t,a),oe(i,t,a),Hc;Ss(f)||Vu(),e=Xc(t,e,l)}else Ss(f)?(e.flags|=192,e.child=t.child,e=null):(t=d.treeContext,Tt=Oe(f.nextSibling),Lt=e,ct=!0,rl=null,Ce=!1,t!==null&&Pf(e,t),e=Yc(e,a.children),e.flags|=4096);return e}return n?(hl(),f=a.fallback,n=e.mode,d=t.child,z=d.sibling,a=Ze(d,{mode:"hidden",children:a.children}),a.subtreeFlags=d.subtreeFlags&65011712,z!==null?f=Ze(z,f):(f=Vl(f,n,l,null),f.flags|=2),f.return=e,a.return=e,a.sibling=f,e.child=a,zn(null,a),a=e.child,f=t.child.memoizedState,f===null?f=Gc(l):(n=f.cachePool,n!==null?(d=Ht._currentValue,n=n.parent!==d?{parent:d,pool:d}:n):n=uo(),f={baseLanes:f.baseLanes|l,cachePool:n}),a.memoizedState=f,a.childLanes=wc(t,i,l),e.memoizedState=qc,zn(t.child,a)):(gl(e),l=t.child,t=l.sibling,l=Ze(l,{mode:"visible",children:a.children}),l.return=e,l.sibling=null,t!==null&&(i=e.deletions,i===null?(e.deletions=[t],e.flags|=16):i.push(t)),e.child=l,e.memoizedState=null,l)}function Yc(t,e){return e=Hu({mode:"visible",children:e},t.mode),e.return=t,t.child=e}function Hu(t,e){return t=be(22,t,null,e),t.lanes=0,t}function Xc(t,e,l){return Fl(e,t.child,null,l),t=Yc(e,e.pendingProps.children),t.flags|=2,e.memoizedState=null,t}function pr(t,e,l){t.lanes|=e;var a=t.alternate;a!==null&&(a.lanes|=e),lc(t.return,e,l)}function Qc(t,e,l,a,n,u){var i=t.memoizedState;i===null?t.memoizedState={isBackwards:e,rendering:null,renderingStartTime:0,last:a,tail:l,tailMode:n,treeForkCount:u}:(i.isBackwards=e,i.rendering=null,i.renderingStartTime=0,i.last=a,i.tail=l,i.tailMode=n,i.treeForkCount=u)}function Sr(t,e,l){var a=e.pendingProps,n=a.revealOrder,u=a.tail;a=a.children;var i=Dt.current,f=(i&2)!==0;if(f?(i=i&1|2,e.flags|=128):i&=1,U(Dt,i),$t(t,e,a,l),a=ct?sn:0,!f&&t!==null&&(t.flags&128)!==0)t:for(t=e.child;t!==null;){if(t.tag===13)t.memoizedState!==null&&pr(t,l,e);else if(t.tag===19)pr(t,l,e);else if(t.child!==null){t.child.return=t,t=t.child;continue}if(t===e)break t;for(;t.sibling===null;){if(t.return===null||t.return===e)break t;t=t.return}t.sibling.return=t.return,t=t.sibling}switch(n){case"forwards":for(l=e.child,n=null;l!==null;)t=l.alternate,t!==null&&Tu(t)===null&&(n=l),l=l.sibling;l=n,l===null?(n=e.child,e.child=null):(n=l.sibling,l.sibling=null),Qc(e,!1,n,l,u,a);break;case"backwards":case"unstable_legacy-backwards":for(l=null,n=e.child,e.child=null;n!==null;){if(t=n.alternate,t!==null&&Tu(t)===null){e.child=n;break}t=n.sibling,n.sibling=l,l=n,n=t}Qc(e,!0,l,null,u,a);break;case"together":Qc(e,!1,null,null,void 0,a);break;default:e.memoizedState=null}return e.child}function Fe(t,e,l){if(t!==null&&(e.dependencies=t.dependencies),zl|=e.lanes,(l&e.childLanes)===0)if(t!==null){if(za(t,e,l,!1),(l&e.childLanes)===0)return null}else return null;if(t!==null&&e.child!==t.child)throw Error(s(153));if(e.child!==null){for(t=e.child,l=Ze(t,t.pendingProps),e.child=l,l.return=e;t.sibling!==null;)t=t.sibling,l=l.sibling=Ze(t,t.pendingProps),l.return=e;l.sibling=null}return e.child}function Kc(t,e){return(t.lanes&e)!==0?!0:(t=t.dependencies,!!(t!==null&&vu(t)))}function ky(t,e,l){switch(e.tag){case 3:It(e,e.stateNode.containerInfo),ml(e,Ht,t.memoizedState.cache),Zl();break;case 27:case 5:La(e);break;case 4:It(e,e.stateNode.containerInfo);break;case 10:ml(e,e.type,e.memoizedProps.value);break;case 31:if(e.memoizedState!==null)return e.flags|=128,yc(e),null;break;case 13:var a=e.memoizedState;if(a!==null)return a.dehydrated!==null?(gl(e),e.flags|=128,null):(l&e.child.childLanes)!==0?hr(t,e,l):(gl(e),t=Fe(t,e,l),t!==null?t.sibling:null);gl(e);break;case 19:var n=(t.flags&128)!==0;if(a=(l&e.childLanes)!==0,a||(za(t,e,l,!1),a=(l&e.childLanes)!==0),n){if(a)return Sr(t,e,l);e.flags|=128}if(n=e.memoizedState,n!==null&&(n.rendering=null,n.tail=null,n.lastEffect=null),U(Dt,Dt.current),a)break;return null;case 22:return e.lanes=0,dr(t,e,l,e.pendingProps);case 24:ml(e,Ht,t.memoizedState.cache)}return Fe(t,e,l)}function zr(t,e,l){if(t!==null)if(t.memoizedProps!==e.pendingProps)qt=!0;else{if(!Kc(t,l)&&(e.flags&128)===0)return qt=!1,ky(t,e,l);qt=(t.flags&131072)!==0}else qt=!1,ct&&(e.flags&1048576)!==0&&If(e,sn,e.index);switch(e.lanes=0,e.tag){case 16:t:{var a=e.pendingProps;if(t=kl(e.elementType),e.type=t,typeof t=="function")$i(t)?(a=Pl(t,a),e.tag=1,e=br(null,e,t,a,l)):(e.tag=0,e=Bc(null,e,t,a,l));else{if(t!=null){var n=t.$$typeof;if(n===Ut){e.tag=11,e=fr(null,e,t,a,l);break t}else if(n===P){e.tag=14,e=or(null,e,t,a,l);break t}}throw e=le(t)||t,Error(s(306,e,""))}}return e;case 0:return Bc(t,e,e.type,e.pendingProps,l);case 1:return a=e.type,n=Pl(a,e.pendingProps),br(t,e,a,n,l);case 3:t:{if(It(e,e.stateNode.containerInfo),t===null)throw Error(s(387));a=e.pendingProps;var u=e.memoizedState;n=u.element,fc(t,e),bn(e,a,null,l);var i=e.memoizedState;if(a=i.cache,ml(e,Ht,a),a!==u.cache&&ac(e,[Ht],l,!0),vn(),a=i.element,u.isDehydrated)if(u={element:a,isDehydrated:!1,cache:i.cache},e.updateQueue.baseState=u,e.memoizedState=u,e.flags&256){e=gr(t,e,a,l);break t}else if(a!==n){n=Ae(Error(s(424)),e),fn(n),e=gr(t,e,a,l);break t}else{switch(t=e.stateNode.containerInfo,t.nodeType){case 9:t=t.body;break;default:t=t.nodeName==="HTML"?t.ownerDocument.body:t}for(Tt=Oe(t.firstChild),Lt=e,ct=!0,rl=null,Ce=!0,l=ro(e,null,a,l),e.child=l;l;)l.flags=l.flags&-3|4096,l=l.sibling}else{if(Zl(),a===n){e=Fe(t,e,l);break t}$t(t,e,a,l)}e=e.child}return e;case 26:return Uu(t,e),t===null?(l=Dd(e.type,null,e.pendingProps,null))?e.memoizedState=l:ct||(l=e.type,t=e.pendingProps,a=Fu(tt.current).createElement(l),a[Zt]=e,a[ne]=t,kt(a,l,t),Xt(a),e.stateNode=a):e.memoizedState=Dd(e.type,t.memoizedProps,e.pendingProps,t.memoizedState),null;case 27:return La(e),t===null&&ct&&(a=e.stateNode=_d(e.type,e.pendingProps,tt.current),Lt=e,Ce=!0,n=Tt,El(e.type)?(xs=n,Tt=Oe(a.firstChild)):Tt=n),$t(t,e,e.pendingProps.children,l),Uu(t,e),t===null&&(e.flags|=4194304),e.child;case 5:return t===null&&ct&&((n=a=Tt)&&(a=Av(a,e.type,e.pendingProps,Ce),a!==null?(e.stateNode=a,Lt=e,Tt=Oe(a.firstChild),Ce=!1,n=!0):n=!1),n||dl(e)),La(e),n=e.type,u=e.pendingProps,i=t!==null?t.memoizedProps:null,a=u.children,gs(n,u)?a=null:i!==null&&gs(n,i)&&(e.flags|=32),e.memoizedState!==null&&(n=bc(t,e,Yy,null,null,l),Bn._currentValue=n),Uu(t,e),$t(t,e,a,l),e.child;case 6:return t===null&&ct&&((t=l=Tt)&&(l=Ev(l,e.pendingProps,Ce),l!==null?(e.stateNode=l,Lt=e,Tt=null,t=!0):t=!1),t||dl(e)),null;case 13:return hr(t,e,l);case 4:return It(e,e.stateNode.containerInfo),a=e.pendingProps,t===null?e.child=Fl(e,null,a,l):$t(t,e,a,l),e.child;case 11:return fr(t,e,e.type,e.pendingProps,l);case 7:return $t(t,e,e.pendingProps,l),e.child;case 8:return $t(t,e,e.pendingProps.children,l),e.child;case 12:return $t(t,e,e.pendingProps.children,l),e.child;case 10:return a=e.pendingProps,ml(e,e.type,a.value),$t(t,e,a.children,l),e.child;case 9:return n=e.type._context,a=e.pendingProps.children,Jl(e),n=Jt(n),a=a(n),e.flags|=1,$t(t,e,a,l),e.child;case 14:return or(t,e,e.type,e.pendingProps,l);case 15:return rr(t,e,e.type,e.pendingProps,l);case 19:return Sr(t,e,l);case 31:return $y(t,e,l);case 22:return dr(t,e,l,e.pendingProps);case 24:return Jl(e),a=Jt(Ht),t===null?(n=ic(),n===null&&(n=xt,u=nc(),n.pooledCache=u,u.refCount++,u!==null&&(n.pooledCacheLanes|=l),n=u),e.memoizedState={parent:a,cache:n},sc(e),ml(e,Ht,n)):((t.lanes&l)!==0&&(fc(t,e),bn(e,null,null,l),vn()),n=t.memoizedState,u=e.memoizedState,n.parent!==a?(n={parent:a,cache:a},e.memoizedState=n,e.lanes===0&&(e.memoizedState=e.updateQueue.baseState=n),ml(e,Ht,a)):(a=u.cache,ml(e,Ht,a),a!==n.cache&&ac(e,[Ht],l,!0))),$t(t,e,e.pendingProps.children,l),e.child;case 29:throw e.pendingProps}throw Error(s(156,e.tag))}function Ie(t){t.flags|=4}function Vc(t,e,l,a,n){if((e=(t.mode&32)!==0)&&(e=!1),e){if(t.flags|=16777216,(n&335544128)===n)if(t.stateNode.complete)t.flags|=8192;else if($r())t.flags|=8192;else throw Wl=pu,cc}else t.flags&=-16777217}function xr(t,e){if(e.type!=="stylesheet"||(e.state.loading&4)!==0)t.flags&=-16777217;else if(t.flags|=16777216,!qd(e))if($r())t.flags|=8192;else throw Wl=pu,cc}function Bu(t,e){e!==null&&(t.flags|=4),t.flags&16384&&(e=t.tag!==22?Ps():536870912,t.lanes|=e,ja|=e)}function xn(t,e){if(!ct)switch(t.tailMode){case"hidden":e=t.tail;for(var l=null;e!==null;)e.alternate!==null&&(l=e),e=e.sibling;l===null?t.tail=null:l.sibling=null;break;case"collapsed":l=t.tail;for(var a=null;l!==null;)l.alternate!==null&&(a=l),l=l.sibling;a===null?e||t.tail===null?t.tail=null:t.tail.sibling=null:a.sibling=null}}function Nt(t){var e=t.alternate!==null&&t.alternate.child===t.child,l=0,a=0;if(e)for(var n=t.child;n!==null;)l|=n.lanes|n.childLanes,a|=n.subtreeFlags&65011712,a|=n.flags&65011712,n.return=t,n=n.sibling;else for(n=t.child;n!==null;)l|=n.lanes|n.childLanes,a|=n.subtreeFlags,a|=n.flags,n.return=t,n=n.sibling;return t.subtreeFlags|=a,t.childLanes=l,e}function Wy(t,e,l){var a=e.pendingProps;switch(Ii(e),e.tag){case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return Nt(e),null;case 1:return Nt(e),null;case 3:return l=e.stateNode,a=null,t!==null&&(a=t.memoizedState.cache),e.memoizedState.cache!==a&&(e.flags|=2048),$e(Ht),Mt(),l.pendingContext&&(l.context=l.pendingContext,l.pendingContext=null),(t===null||t.child===null)&&(Sa(e)?Ie(e):t===null||t.memoizedState.isDehydrated&&(e.flags&256)===0||(e.flags|=1024,tc())),Nt(e),null;case 26:var n=e.type,u=e.memoizedState;return t===null?(Ie(e),u!==null?(Nt(e),xr(e,u)):(Nt(e),Vc(e,n,null,a,l))):u?u!==t.memoizedState?(Ie(e),Nt(e),xr(e,u)):(Nt(e),e.flags&=-16777217):(t=t.memoizedProps,t!==a&&Ie(e),Nt(e),Vc(e,n,t,a,l)),null;case 27:if(Jn(e),l=tt.current,n=e.type,t!==null&&e.stateNode!=null)t.memoizedProps!==a&&Ie(e);else{if(!a){if(e.stateNode===null)throw Error(s(166));return Nt(e),null}t=w.current,Sa(e)?to(e):(t=_d(n,a,l),e.stateNode=t,Ie(e))}return Nt(e),null;case 5:if(Jn(e),n=e.type,t!==null&&e.stateNode!=null)t.memoizedProps!==a&&Ie(e);else{if(!a){if(e.stateNode===null)throw Error(s(166));return Nt(e),null}if(u=w.current,Sa(e))to(e);else{var i=Fu(tt.current);switch(u){case 1:u=i.createElementNS("http://www.w3.org/2000/svg",n);break;case 2:u=i.createElementNS("http://www.w3.org/1998/Math/MathML",n);break;default:switch(n){case"svg":u=i.createElementNS("http://www.w3.org/2000/svg",n);break;case"math":u=i.createElementNS("http://www.w3.org/1998/Math/MathML",n);break;case"script":u=i.createElement("div"),u.innerHTML="<script><\/script>",u=u.removeChild(u.firstChild);break;case"select":u=typeof a.is=="string"?i.createElement("select",{is:a.is}):i.createElement("select"),a.multiple?u.multiple=!0:a.size&&(u.size=a.size);break;default:u=typeof a.is=="string"?i.createElement(n,{is:a.is}):i.createElement(n)}}u[Zt]=e,u[ne]=a;t:for(i=e.child;i!==null;){if(i.tag===5||i.tag===6)u.appendChild(i.stateNode);else if(i.tag!==4&&i.tag!==27&&i.child!==null){i.child.return=i,i=i.child;continue}if(i===e)break t;for(;i.sibling===null;){if(i.return===null||i.return===e)break t;i=i.return}i.sibling.return=i.return,i=i.sibling}e.stateNode=u;t:switch(kt(u,n,a),n){case"button":case"input":case"select":case"textarea":a=!!a.autoFocus;break t;case"img":a=!0;break t;default:a=!1}a&&Ie(e)}}return Nt(e),Vc(e,e.type,t===null?null:t.memoizedProps,e.pendingProps,l),null;case 6:if(t&&e.stateNode!=null)t.memoizedProps!==a&&Ie(e);else{if(typeof a!="string"&&e.stateNode===null)throw Error(s(166));if(t=tt.current,Sa(e)){if(t=e.stateNode,l=e.memoizedProps,a=null,n=Lt,n!==null)switch(n.tag){case 27:case 5:a=n.memoizedProps}t[Zt]=e,t=!!(t.nodeValue===l||a!==null&&a.suppressHydrationWarning===!0||hd(t.nodeValue,l)),t||dl(e,!0)}else t=Fu(t).createTextNode(a),t[Zt]=e,e.stateNode=t}return Nt(e),null;case 31:if(l=e.memoizedState,t===null||t.memoizedState!==null){if(a=Sa(e),l!==null){if(t===null){if(!a)throw Error(s(318));if(t=e.memoizedState,t=t!==null?t.dehydrated:null,!t)throw Error(s(557));t[Zt]=e}else Zl(),(e.flags&128)===0&&(e.memoizedState=null),e.flags|=4;Nt(e),t=!1}else l=tc(),t!==null&&t.memoizedState!==null&&(t.memoizedState.hydrationErrors=l),t=!0;if(!t)return e.flags&256?(he(e),e):(he(e),null);if((e.flags&128)!==0)throw Error(s(558))}return Nt(e),null;case 13:if(a=e.memoizedState,t===null||t.memoizedState!==null&&t.memoizedState.dehydrated!==null){if(n=Sa(e),a!==null&&a.dehydrated!==null){if(t===null){if(!n)throw Error(s(318));if(n=e.memoizedState,n=n!==null?n.dehydrated:null,!n)throw Error(s(317));n[Zt]=e}else Zl(),(e.flags&128)===0&&(e.memoizedState=null),e.flags|=4;Nt(e),n=!1}else n=tc(),t!==null&&t.memoizedState!==null&&(t.memoizedState.hydrationErrors=n),n=!0;if(!n)return e.flags&256?(he(e),e):(he(e),null)}return he(e),(e.flags&128)!==0?(e.lanes=l,e):(l=a!==null,t=t!==null&&t.memoizedState!==null,l&&(a=e.child,n=null,a.alternate!==null&&a.alternate.memoizedState!==null&&a.alternate.memoizedState.cachePool!==null&&(n=a.alternate.memoizedState.cachePool.pool),u=null,a.memoizedState!==null&&a.memoizedState.cachePool!==null&&(u=a.memoizedState.cachePool.pool),u!==n&&(a.flags|=2048)),l!==t&&l&&(e.child.flags|=8192),Bu(e,e.updateQueue),Nt(e),null);case 4:return Mt(),t===null&&ds(e.stateNode.containerInfo),Nt(e),null;case 10:return $e(e.type),Nt(e),null;case 19:if(M(Dt),a=e.memoizedState,a===null)return Nt(e),null;if(n=(e.flags&128)!==0,u=a.rendering,u===null)if(n)xn(a,!1);else{if(_t!==0||t!==null&&(t.flags&128)!==0)for(t=e.child;t!==null;){if(u=Tu(t),u!==null){for(e.flags|=128,xn(a,!1),t=u.updateQueue,e.updateQueue=t,Bu(e,t),e.subtreeFlags=0,t=l,l=e.child;l!==null;)kf(l,t),l=l.sibling;return U(Dt,Dt.current&1|2),ct&&Le(e,a.treeForkCount),e.child}t=t.sibling}a.tail!==null&&de()>Xu&&(e.flags|=128,n=!0,xn(a,!1),e.lanes=4194304)}else{if(!n)if(t=Tu(u),t!==null){if(e.flags|=128,n=!0,t=t.updateQueue,e.updateQueue=t,Bu(e,t),xn(a,!0),a.tail===null&&a.tailMode==="hidden"&&!u.alternate&&!ct)return Nt(e),null}else 2*de()-a.renderingStartTime>Xu&&l!==536870912&&(e.flags|=128,n=!0,xn(a,!1),e.lanes=4194304);a.isBackwards?(u.sibling=e.child,e.child=u):(t=a.last,t!==null?t.sibling=u:e.child=u,a.last=u)}return a.tail!==null?(t=a.tail,a.rendering=t,a.tail=t.sibling,a.renderingStartTime=de(),t.sibling=null,l=Dt.current,U(Dt,n?l&1|2:l&1),ct&&Le(e,a.treeForkCount),t):(Nt(e),null);case 22:case 23:return he(e),mc(),a=e.memoizedState!==null,t!==null?t.memoizedState!==null!==a&&(e.flags|=8192):a&&(e.flags|=8192),a?(l&536870912)!==0&&(e.flags&128)===0&&(Nt(e),e.subtreeFlags&6&&(e.flags|=8192)):Nt(e),l=e.updateQueue,l!==null&&Bu(e,l.retryQueue),l=null,t!==null&&t.memoizedState!==null&&t.memoizedState.cachePool!==null&&(l=t.memoizedState.cachePool.pool),a=null,e.memoizedState!==null&&e.memoizedState.cachePool!==null&&(a=e.memoizedState.cachePool.pool),a!==l&&(e.flags|=2048),t!==null&&M($l),null;case 24:return l=null,t!==null&&(l=t.memoizedState.cache),e.memoizedState.cache!==l&&(e.flags|=2048),$e(Ht),Nt(e),null;case 25:return null;case 30:return null}throw Error(s(156,e.tag))}function Fy(t,e){switch(Ii(e),e.tag){case 1:return t=e.flags,t&65536?(e.flags=t&-65537|128,e):null;case 3:return $e(Ht),Mt(),t=e.flags,(t&65536)!==0&&(t&128)===0?(e.flags=t&-65537|128,e):null;case 26:case 27:case 5:return Jn(e),null;case 31:if(e.memoizedState!==null){if(he(e),e.alternate===null)throw Error(s(340));Zl()}return t=e.flags,t&65536?(e.flags=t&-65537|128,e):null;case 13:if(he(e),t=e.memoizedState,t!==null&&t.dehydrated!==null){if(e.alternate===null)throw Error(s(340));Zl()}return t=e.flags,t&65536?(e.flags=t&-65537|128,e):null;case 19:return M(Dt),null;case 4:return Mt(),null;case 10:return $e(e.type),null;case 22:case 23:return he(e),mc(),t!==null&&M($l),t=e.flags,t&65536?(e.flags=t&-65537|128,e):null;case 24:return $e(Ht),null;case 25:return null;default:return null}}function Tr(t,e){switch(Ii(e),e.tag){case 3:$e(Ht),Mt();break;case 26:case 27:case 5:Jn(e);break;case 4:Mt();break;case 31:e.memoizedState!==null&&he(e);break;case 13:he(e);break;case 19:M(Dt);break;case 10:$e(e.type);break;case 22:case 23:he(e),mc(),t!==null&&M($l);break;case 24:$e(Ht)}}function Tn(t,e){try{var l=e.updateQueue,a=l!==null?l.lastEffect:null;if(a!==null){var n=a.next;l=n;do{if((l.tag&t)===t){a=void 0;var u=l.create,i=l.inst;a=u(),i.destroy=a}l=l.next}while(l!==n)}}catch(f){gt(e,e.return,f)}}function pl(t,e,l){try{var a=e.updateQueue,n=a!==null?a.lastEffect:null;if(n!==null){var u=n.next;a=u;do{if((a.tag&t)===t){var i=a.inst,f=i.destroy;if(f!==void 0){i.destroy=void 0,n=e;var d=l,z=f;try{z()}catch(R){gt(n,d,R)}}}a=a.next}while(a!==u)}}catch(R){gt(e,e.return,R)}}function Nr(t){var e=t.updateQueue;if(e!==null){var l=t.stateNode;try{yo(e,l)}catch(a){gt(t,t.return,a)}}}function Ar(t,e,l){l.props=Pl(t.type,t.memoizedProps),l.state=t.memoizedState;try{l.componentWillUnmount()}catch(a){gt(t,e,a)}}function Nn(t,e){try{var l=t.ref;if(l!==null){switch(t.tag){case 26:case 27:case 5:var a=t.stateNode;break;case 30:a=t.stateNode;break;default:a=t.stateNode}typeof l=="function"?t.refCleanup=l(a):l.current=a}}catch(n){gt(t,e,n)}}function Ye(t,e){var l=t.ref,a=t.refCleanup;if(l!==null)if(typeof a=="function")try{a()}catch(n){gt(t,e,n)}finally{t.refCleanup=null,t=t.alternate,t!=null&&(t.refCleanup=null)}else if(typeof l=="function")try{l(null)}catch(n){gt(t,e,n)}else l.current=null}function Er(t){var e=t.type,l=t.memoizedProps,a=t.stateNode;try{t:switch(e){case"button":case"input":case"select":case"textarea":l.autoFocus&&a.focus();break t;case"img":l.src?a.src=l.src:l.srcSet&&(a.srcset=l.srcSet)}}catch(n){gt(t,t.return,n)}}function Zc(t,e,l){try{var a=t.stateNode;pv(a,t.type,l,e),a[ne]=e}catch(n){gt(t,t.return,n)}}function Rr(t){return t.tag===5||t.tag===3||t.tag===26||t.tag===27&&El(t.type)||t.tag===4}function Lc(t){t:for(;;){for(;t.sibling===null;){if(t.return===null||Rr(t.return))return null;t=t.return}for(t.sibling.return=t.return,t=t.sibling;t.tag!==5&&t.tag!==6&&t.tag!==18;){if(t.tag===27&&El(t.type)||t.flags&2||t.child===null||t.tag===4)continue t;t.child.return=t,t=t.child}if(!(t.flags&2))return t.stateNode}}function Jc(t,e,l){var a=t.tag;if(a===5||a===6)t=t.stateNode,e?(l.nodeType===9?l.body:l.nodeName==="HTML"?l.ownerDocument.body:l).insertBefore(t,e):(e=l.nodeType===9?l.body:l.nodeName==="HTML"?l.ownerDocument.body:l,e.appendChild(t),l=l._reactRootContainer,l!=null||e.onclick!==null||(e.onclick=Ke));else if(a!==4&&(a===27&&El(t.type)&&(l=t.stateNode,e=null),t=t.child,t!==null))for(Jc(t,e,l),t=t.sibling;t!==null;)Jc(t,e,l),t=t.sibling}function qu(t,e,l){var a=t.tag;if(a===5||a===6)t=t.stateNode,e?l.insertBefore(t,e):l.appendChild(t);else if(a!==4&&(a===27&&El(t.type)&&(l=t.stateNode),t=t.child,t!==null))for(qu(t,e,l),t=t.sibling;t!==null;)qu(t,e,l),t=t.sibling}function Cr(t){var e=t.stateNode,l=t.memoizedProps;try{for(var a=t.type,n=e.attributes;n.length;)e.removeAttributeNode(n[0]);kt(e,a,l),e[Zt]=t,e[ne]=l}catch(u){gt(t,t.return,u)}}var Pe=!1,Gt=!1,$c=!1,_r=typeof WeakSet=="function"?WeakSet:Set,Qt=null;function Iy(t,e){if(t=t.containerInfo,vs=ni,t=Yf(t),Xi(t)){if("selectionStart"in t)var l={start:t.selectionStart,end:t.selectionEnd};else t:{l=(l=t.ownerDocument)&&l.defaultView||window;var a=l.getSelection&&l.getSelection();if(a&&a.rangeCount!==0){l=a.anchorNode;var n=a.anchorOffset,u=a.focusNode;a=a.focusOffset;try{l.nodeType,u.nodeType}catch{l=null;break t}var i=0,f=-1,d=-1,z=0,R=0,O=t,x=null;e:for(;;){for(var A;O!==l||n!==0&&O.nodeType!==3||(f=i+n),O!==u||a!==0&&O.nodeType!==3||(d=i+a),O.nodeType===3&&(i+=O.nodeValue.length),(A=O.firstChild)!==null;)x=O,O=A;for(;;){if(O===t)break e;if(x===l&&++z===n&&(f=i),x===u&&++R===a&&(d=i),(A=O.nextSibling)!==null)break;O=x,x=O.parentNode}O=A}l=f===-1||d===-1?null:{start:f,end:d}}else l=null}l=l||{start:0,end:0}}else l=null;for(bs={focusedElem:t,selectionRange:l},ni=!1,Qt=e;Qt!==null;)if(e=Qt,t=e.child,(e.subtreeFlags&1028)!==0&&t!==null)t.return=e,Qt=t;else for(;Qt!==null;){switch(e=Qt,u=e.alternate,t=e.flags,e.tag){case 0:if((t&4)!==0&&(t=e.updateQueue,t=t!==null?t.events:null,t!==null))for(l=0;l<t.length;l++)n=t[l],n.ref.impl=n.nextImpl;break;case 11:case 15:break;case 1:if((t&1024)!==0&&u!==null){t=void 0,l=e,n=u.memoizedProps,u=u.memoizedState,a=l.stateNode;try{var q=Pl(l.type,n);t=a.getSnapshotBeforeUpdate(q,u),a.__reactInternalSnapshotBeforeUpdate=t}catch(V){gt(l,l.return,V)}}break;case 3:if((t&1024)!==0){if(t=e.stateNode.containerInfo,l=t.nodeType,l===9)ps(t);else if(l===1)switch(t.nodeName){case"HEAD":case"HTML":case"BODY":ps(t);break;default:t.textContent=""}}break;case 5:case 26:case 27:case 6:case 4:case 17:break;default:if((t&1024)!==0)throw Error(s(163))}if(t=e.sibling,t!==null){t.return=e.return,Qt=t;break}Qt=e.return}}function Or(t,e,l){var a=l.flags;switch(l.tag){case 0:case 11:case 15:el(t,l),a&4&&Tn(5,l);break;case 1:if(el(t,l),a&4)if(t=l.stateNode,e===null)try{t.componentDidMount()}catch(i){gt(l,l.return,i)}else{var n=Pl(l.type,e.memoizedProps);e=e.memoizedState;try{t.componentDidUpdate(n,e,t.__reactInternalSnapshotBeforeUpdate)}catch(i){gt(l,l.return,i)}}a&64&&Nr(l),a&512&&Nn(l,l.return);break;case 3:if(el(t,l),a&64&&(t=l.updateQueue,t!==null)){if(e=null,l.child!==null)switch(l.child.tag){case 27:case 5:e=l.child.stateNode;break;case 1:e=l.child.stateNode}try{yo(t,e)}catch(i){gt(l,l.return,i)}}break;case 27:e===null&&a&4&&Cr(l);case 26:case 5:el(t,l),e===null&&a&4&&Er(l),a&512&&Nn(l,l.return);break;case 12:el(t,l);break;case 31:el(t,l),a&4&&jr(t,l);break;case 13:el(t,l),a&4&&Ur(t,l),a&64&&(t=l.memoizedState,t!==null&&(t=t.dehydrated,t!==null&&(l=cv.bind(null,l),Rv(t,l))));break;case 22:if(a=l.memoizedState!==null||Pe,!a){e=e!==null&&e.memoizedState!==null||Gt,n=Pe;var u=Gt;Pe=a,(Gt=e)&&!u?ll(t,l,(l.subtreeFlags&8772)!==0):el(t,l),Pe=n,Gt=u}break;case 30:break;default:el(t,l)}}function Mr(t){var e=t.alternate;e!==null&&(t.alternate=null,Mr(e)),t.child=null,t.deletions=null,t.sibling=null,t.tag===5&&(e=t.stateNode,e!==null&&Ni(e)),t.stateNode=null,t.return=null,t.dependencies=null,t.memoizedProps=null,t.memoizedState=null,t.pendingProps=null,t.stateNode=null,t.updateQueue=null}var Et=null,ie=!1;function tl(t,e,l){for(l=l.child;l!==null;)Dr(t,e,l),l=l.sibling}function Dr(t,e,l){if(me&&typeof me.onCommitFiberUnmount=="function")try{me.onCommitFiberUnmount(Ja,l)}catch{}switch(l.tag){case 26:Gt||Ye(l,e),tl(t,e,l),l.memoizedState?l.memoizedState.count--:l.stateNode&&(l=l.stateNode,l.parentNode.removeChild(l));break;case 27:Gt||Ye(l,e);var a=Et,n=ie;El(l.type)&&(Et=l.stateNode,ie=!1),tl(t,e,l),jn(l.stateNode),Et=a,ie=n;break;case 5:Gt||Ye(l,e);case 6:if(a=Et,n=ie,Et=null,tl(t,e,l),Et=a,ie=n,Et!==null)if(ie)try{(Et.nodeType===9?Et.body:Et.nodeName==="HTML"?Et.ownerDocument.body:Et).removeChild(l.stateNode)}catch(u){gt(l,e,u)}else try{Et.removeChild(l.stateNode)}catch(u){gt(l,e,u)}break;case 18:Et!==null&&(ie?(t=Et,Nd(t.nodeType===9?t.body:t.nodeName==="HTML"?t.ownerDocument.body:t,l.stateNode),Xa(t)):Nd(Et,l.stateNode));break;case 4:a=Et,n=ie,Et=l.stateNode.containerInfo,ie=!0,tl(t,e,l),Et=a,ie=n;break;case 0:case 11:case 14:case 15:pl(2,l,e),Gt||pl(4,l,e),tl(t,e,l);break;case 1:Gt||(Ye(l,e),a=l.stateNode,typeof a.componentWillUnmount=="function"&&Ar(l,e,a)),tl(t,e,l);break;case 21:tl(t,e,l);break;case 22:Gt=(a=Gt)||l.memoizedState!==null,tl(t,e,l),Gt=a;break;default:tl(t,e,l)}}function jr(t,e){if(e.memoizedState===null&&(t=e.alternate,t!==null&&(t=t.memoizedState,t!==null))){t=t.dehydrated;try{Xa(t)}catch(l){gt(e,e.return,l)}}}function Ur(t,e){if(e.memoizedState===null&&(t=e.alternate,t!==null&&(t=t.memoizedState,t!==null&&(t=t.dehydrated,t!==null))))try{Xa(t)}catch(l){gt(e,e.return,l)}}function Py(t){switch(t.tag){case 31:case 13:case 19:var e=t.stateNode;return e===null&&(e=t.stateNode=new _r),e;case 22:return t=t.stateNode,e=t._retryCache,e===null&&(e=t._retryCache=new _r),e;default:throw Error(s(435,t.tag))}}function Gu(t,e){var l=Py(t);e.forEach(function(a){if(!l.has(a)){l.add(a);var n=sv.bind(null,t,a);a.then(n,n)}})}function ce(t,e){var l=e.deletions;if(l!==null)for(var a=0;a<l.length;a++){var n=l[a],u=t,i=e,f=i;t:for(;f!==null;){switch(f.tag){case 27:if(El(f.type)){Et=f.stateNode,ie=!1;break t}break;case 5:Et=f.stateNode,ie=!1;break t;case 3:case 4:Et=f.stateNode.containerInfo,ie=!0;break t}f=f.return}if(Et===null)throw Error(s(160));Dr(u,i,n),Et=null,ie=!1,u=n.alternate,u!==null&&(u.return=null),n.return=null}if(e.subtreeFlags&13886)for(e=e.child;e!==null;)Hr(e,t),e=e.sibling}var je=null;function Hr(t,e){var l=t.alternate,a=t.flags;switch(t.tag){case 0:case 11:case 14:case 15:ce(e,t),se(t),a&4&&(pl(3,t,t.return),Tn(3,t),pl(5,t,t.return));break;case 1:ce(e,t),se(t),a&512&&(Gt||l===null||Ye(l,l.return)),a&64&&Pe&&(t=t.updateQueue,t!==null&&(a=t.callbacks,a!==null&&(l=t.shared.hiddenCallbacks,t.shared.hiddenCallbacks=l===null?a:l.concat(a))));break;case 26:var n=je;if(ce(e,t),se(t),a&512&&(Gt||l===null||Ye(l,l.return)),a&4){var u=l!==null?l.memoizedState:null;if(a=t.memoizedState,l===null)if(a===null)if(t.stateNode===null){t:{a=t.type,l=t.memoizedProps,n=n.ownerDocument||n;e:switch(a){case"title":u=n.getElementsByTagName("title")[0],(!u||u[Wa]||u[Zt]||u.namespaceURI==="http://www.w3.org/2000/svg"||u.hasAttribute("itemprop"))&&(u=n.createElement(a),n.head.insertBefore(u,n.querySelector("head > title"))),kt(u,a,l),u[Zt]=t,Xt(u),a=u;break t;case"link":var i=Hd("link","href",n).get(a+(l.href||""));if(i){for(var f=0;f<i.length;f++)if(u=i[f],u.getAttribute("href")===(l.href==null||l.href===""?null:l.href)&&u.getAttribute("rel")===(l.rel==null?null:l.rel)&&u.getAttribute("title")===(l.title==null?null:l.title)&&u.getAttribute("crossorigin")===(l.crossOrigin==null?null:l.crossOrigin)){i.splice(f,1);break e}}u=n.createElement(a),kt(u,a,l),n.head.appendChild(u);break;case"meta":if(i=Hd("meta","content",n).get(a+(l.content||""))){for(f=0;f<i.length;f++)if(u=i[f],u.getAttribute("content")===(l.content==null?null:""+l.content)&&u.getAttribute("name")===(l.name==null?null:l.name)&&u.getAttribute("property")===(l.property==null?null:l.property)&&u.getAttribute("http-equiv")===(l.httpEquiv==null?null:l.httpEquiv)&&u.getAttribute("charset")===(l.charSet==null?null:l.charSet)){i.splice(f,1);break e}}u=n.createElement(a),kt(u,a,l),n.head.appendChild(u);break;default:throw Error(s(468,a))}u[Zt]=t,Xt(u),a=u}t.stateNode=a}else Bd(n,t.type,t.stateNode);else t.stateNode=Ud(n,a,t.memoizedProps);else u!==a?(u===null?l.stateNode!==null&&(l=l.stateNode,l.parentNode.removeChild(l)):u.count--,a===null?Bd(n,t.type,t.stateNode):Ud(n,a,t.memoizedProps)):a===null&&t.stateNode!==null&&Zc(t,t.memoizedProps,l.memoizedProps)}break;case 27:ce(e,t),se(t),a&512&&(Gt||l===null||Ye(l,l.return)),l!==null&&a&4&&Zc(t,t.memoizedProps,l.memoizedProps);break;case 5:if(ce(e,t),se(t),a&512&&(Gt||l===null||Ye(l,l.return)),t.flags&32){n=t.stateNode;try{oa(n,"")}catch(q){gt(t,t.return,q)}}a&4&&t.stateNode!=null&&(n=t.memoizedProps,Zc(t,n,l!==null?l.memoizedProps:n)),a&1024&&($c=!0);break;case 6:if(ce(e,t),se(t),a&4){if(t.stateNode===null)throw Error(s(162));a=t.memoizedProps,l=t.stateNode;try{l.nodeValue=a}catch(q){gt(t,t.return,q)}}break;case 3:if(ti=null,n=je,je=Iu(e.containerInfo),ce(e,t),je=n,se(t),a&4&&l!==null&&l.memoizedState.isDehydrated)try{Xa(e.containerInfo)}catch(q){gt(t,t.return,q)}$c&&($c=!1,Br(t));break;case 4:a=je,je=Iu(t.stateNode.containerInfo),ce(e,t),se(t),je=a;break;case 12:ce(e,t),se(t);break;case 31:ce(e,t),se(t),a&4&&(a=t.updateQueue,a!==null&&(t.updateQueue=null,Gu(t,a)));break;case 13:ce(e,t),se(t),t.child.flags&8192&&t.memoizedState!==null!=(l!==null&&l.memoizedState!==null)&&(Yu=de()),a&4&&(a=t.updateQueue,a!==null&&(t.updateQueue=null,Gu(t,a)));break;case 22:n=t.memoizedState!==null;var d=l!==null&&l.memoizedState!==null,z=Pe,R=Gt;if(Pe=z||n,Gt=R||d,ce(e,t),Gt=R,Pe=z,se(t),a&8192)t:for(e=t.stateNode,e._visibility=n?e._visibility&-2:e._visibility|1,n&&(l===null||d||Pe||Gt||ta(t)),l=null,e=t;;){if(e.tag===5||e.tag===26){if(l===null){d=l=e;try{if(u=d.stateNode,n)i=u.style,typeof i.setProperty=="function"?i.setProperty("display","none","important"):i.display="none";else{f=d.stateNode;var O=d.memoizedProps.style,x=O!=null&&O.hasOwnProperty("display")?O.display:null;f.style.display=x==null||typeof x=="boolean"?"":(""+x).trim()}}catch(q){gt(d,d.return,q)}}}else if(e.tag===6){if(l===null){d=e;try{d.stateNode.nodeValue=n?"":d.memoizedProps}catch(q){gt(d,d.return,q)}}}else if(e.tag===18){if(l===null){d=e;try{var A=d.stateNode;n?Ad(A,!0):Ad(d.stateNode,!1)}catch(q){gt(d,d.return,q)}}}else if((e.tag!==22&&e.tag!==23||e.memoizedState===null||e===t)&&e.child!==null){e.child.return=e,e=e.child;continue}if(e===t)break t;for(;e.sibling===null;){if(e.return===null||e.return===t)break t;l===e&&(l=null),e=e.return}l===e&&(l=null),e.sibling.return=e.return,e=e.sibling}a&4&&(a=t.updateQueue,a!==null&&(l=a.retryQueue,l!==null&&(a.retryQueue=null,Gu(t,l))));break;case 19:ce(e,t),se(t),a&4&&(a=t.updateQueue,a!==null&&(t.updateQueue=null,Gu(t,a)));break;case 30:break;case 21:break;default:ce(e,t),se(t)}}function se(t){var e=t.flags;if(e&2){try{for(var l,a=t.return;a!==null;){if(Rr(a)){l=a;break}a=a.return}if(l==null)throw Error(s(160));switch(l.tag){case 27:var n=l.stateNode,u=Lc(t);qu(t,u,n);break;case 5:var i=l.stateNode;l.flags&32&&(oa(i,""),l.flags&=-33);var f=Lc(t);qu(t,f,i);break;case 3:case 4:var d=l.stateNode.containerInfo,z=Lc(t);Jc(t,z,d);break;default:throw Error(s(161))}}catch(R){gt(t,t.return,R)}t.flags&=-3}e&4096&&(t.flags&=-4097)}function Br(t){if(t.subtreeFlags&1024)for(t=t.child;t!==null;){var e=t;Br(e),e.tag===5&&e.flags&1024&&e.stateNode.reset(),t=t.sibling}}function el(t,e){if(e.subtreeFlags&8772)for(e=e.child;e!==null;)Or(t,e.alternate,e),e=e.sibling}function ta(t){for(t=t.child;t!==null;){var e=t;switch(e.tag){case 0:case 11:case 14:case 15:pl(4,e,e.return),ta(e);break;case 1:Ye(e,e.return);var l=e.stateNode;typeof l.componentWillUnmount=="function"&&Ar(e,e.return,l),ta(e);break;case 27:jn(e.stateNode);case 26:case 5:Ye(e,e.return),ta(e);break;case 22:e.memoizedState===null&&ta(e);break;case 30:ta(e);break;default:ta(e)}t=t.sibling}}function ll(t,e,l){for(l=l&&(e.subtreeFlags&8772)!==0,e=e.child;e!==null;){var a=e.alternate,n=t,u=e,i=u.flags;switch(u.tag){case 0:case 11:case 15:ll(n,u,l),Tn(4,u);break;case 1:if(ll(n,u,l),a=u,n=a.stateNode,typeof n.componentDidMount=="function")try{n.componentDidMount()}catch(z){gt(a,a.return,z)}if(a=u,n=a.updateQueue,n!==null){var f=a.stateNode;try{var d=n.shared.hiddenCallbacks;if(d!==null)for(n.shared.hiddenCallbacks=null,n=0;n<d.length;n++)mo(d[n],f)}catch(z){gt(a,a.return,z)}}l&&i&64&&Nr(u),Nn(u,u.return);break;case 27:Cr(u);case 26:case 5:ll(n,u,l),l&&a===null&&i&4&&Er(u),Nn(u,u.return);break;case 12:ll(n,u,l);break;case 31:ll(n,u,l),l&&i&4&&jr(n,u);break;case 13:ll(n,u,l),l&&i&4&&Ur(n,u);break;case 22:u.memoizedState===null&&ll(n,u,l),Nn(u,u.return);break;case 30:break;default:ll(n,u,l)}e=e.sibling}}function kc(t,e){var l=null;t!==null&&t.memoizedState!==null&&t.memoizedState.cachePool!==null&&(l=t.memoizedState.cachePool.pool),t=null,e.memoizedState!==null&&e.memoizedState.cachePool!==null&&(t=e.memoizedState.cachePool.pool),t!==l&&(t!=null&&t.refCount++,l!=null&&on(l))}function Wc(t,e){t=null,e.alternate!==null&&(t=e.alternate.memoizedState.cache),e=e.memoizedState.cache,e!==t&&(e.refCount++,t!=null&&on(t))}function Ue(t,e,l,a){if(e.subtreeFlags&10256)for(e=e.child;e!==null;)qr(t,e,l,a),e=e.sibling}function qr(t,e,l,a){var n=e.flags;switch(e.tag){case 0:case 11:case 15:Ue(t,e,l,a),n&2048&&Tn(9,e);break;case 1:Ue(t,e,l,a);break;case 3:Ue(t,e,l,a),n&2048&&(t=null,e.alternate!==null&&(t=e.alternate.memoizedState.cache),e=e.memoizedState.cache,e!==t&&(e.refCount++,t!=null&&on(t)));break;case 12:if(n&2048){Ue(t,e,l,a),t=e.stateNode;try{var u=e.memoizedProps,i=u.id,f=u.onPostCommit;typeof f=="function"&&f(i,e.alternate===null?"mount":"update",t.passiveEffectDuration,-0)}catch(d){gt(e,e.return,d)}}else Ue(t,e,l,a);break;case 31:Ue(t,e,l,a);break;case 13:Ue(t,e,l,a);break;case 23:break;case 22:u=e.stateNode,i=e.alternate,e.memoizedState!==null?u._visibility&2?Ue(t,e,l,a):An(t,e):u._visibility&2?Ue(t,e,l,a):(u._visibility|=2,Oa(t,e,l,a,(e.subtreeFlags&10256)!==0||!1)),n&2048&&kc(i,e);break;case 24:Ue(t,e,l,a),n&2048&&Wc(e.alternate,e);break;default:Ue(t,e,l,a)}}function Oa(t,e,l,a,n){for(n=n&&((e.subtreeFlags&10256)!==0||!1),e=e.child;e!==null;){var u=t,i=e,f=l,d=a,z=i.flags;switch(i.tag){case 0:case 11:case 15:Oa(u,i,f,d,n),Tn(8,i);break;case 23:break;case 22:var R=i.stateNode;i.memoizedState!==null?R._visibility&2?Oa(u,i,f,d,n):An(u,i):(R._visibility|=2,Oa(u,i,f,d,n)),n&&z&2048&&kc(i.alternate,i);break;case 24:Oa(u,i,f,d,n),n&&z&2048&&Wc(i.alternate,i);break;default:Oa(u,i,f,d,n)}e=e.sibling}}function An(t,e){if(e.subtreeFlags&10256)for(e=e.child;e!==null;){var l=t,a=e,n=a.flags;switch(a.tag){case 22:An(l,a),n&2048&&kc(a.alternate,a);break;case 24:An(l,a),n&2048&&Wc(a.alternate,a);break;default:An(l,a)}e=e.sibling}}var En=8192;function Ma(t,e,l){if(t.subtreeFlags&En)for(t=t.child;t!==null;)Gr(t,e,l),t=t.sibling}function Gr(t,e,l){switch(t.tag){case 26:Ma(t,e,l),t.flags&En&&t.memoizedState!==null&&wv(l,je,t.memoizedState,t.memoizedProps);break;case 5:Ma(t,e,l);break;case 3:case 4:var a=je;je=Iu(t.stateNode.containerInfo),Ma(t,e,l),je=a;break;case 22:t.memoizedState===null&&(a=t.alternate,a!==null&&a.memoizedState!==null?(a=En,En=16777216,Ma(t,e,l),En=a):Ma(t,e,l));break;default:Ma(t,e,l)}}function wr(t){var e=t.alternate;if(e!==null&&(t=e.child,t!==null)){e.child=null;do e=t.sibling,t.sibling=null,t=e;while(t!==null)}}function Rn(t){var e=t.deletions;if((t.flags&16)!==0){if(e!==null)for(var l=0;l<e.length;l++){var a=e[l];Qt=a,Xr(a,t)}wr(t)}if(t.subtreeFlags&10256)for(t=t.child;t!==null;)Yr(t),t=t.sibling}function Yr(t){switch(t.tag){case 0:case 11:case 15:Rn(t),t.flags&2048&&pl(9,t,t.return);break;case 3:Rn(t);break;case 12:Rn(t);break;case 22:var e=t.stateNode;t.memoizedState!==null&&e._visibility&2&&(t.return===null||t.return.tag!==13)?(e._visibility&=-3,wu(t)):Rn(t);break;default:Rn(t)}}function wu(t){var e=t.deletions;if((t.flags&16)!==0){if(e!==null)for(var l=0;l<e.length;l++){var a=e[l];Qt=a,Xr(a,t)}wr(t)}for(t=t.child;t!==null;){switch(e=t,e.tag){case 0:case 11:case 15:pl(8,e,e.return),wu(e);break;case 22:l=e.stateNode,l._visibility&2&&(l._visibility&=-3,wu(e));break;default:wu(e)}t=t.sibling}}function Xr(t,e){for(;Qt!==null;){var l=Qt;switch(l.tag){case 0:case 11:case 15:pl(8,l,e);break;case 23:case 22:if(l.memoizedState!==null&&l.memoizedState.cachePool!==null){var a=l.memoizedState.cachePool.pool;a!=null&&a.refCount++}break;case 24:on(l.memoizedState.cache)}if(a=l.child,a!==null)a.return=l,Qt=a;else t:for(l=t;Qt!==null;){a=Qt;var n=a.sibling,u=a.return;if(Mr(a),a===l){Qt=null;break t}if(n!==null){n.return=u,Qt=n;break t}Qt=u}}}var tv={getCacheForType:function(t){var e=Jt(Ht),l=e.data.get(t);return l===void 0&&(l=t(),e.data.set(t,l)),l},cacheSignal:function(){return Jt(Ht).controller.signal}},ev=typeof WeakMap=="function"?WeakMap:Map,dt=0,xt=null,et=null,ut=0,bt=0,pe=null,Sl=!1,Da=!1,Fc=!1,al=0,_t=0,zl=0,ea=0,Ic=0,Se=0,ja=0,Cn=null,fe=null,Pc=!1,Yu=0,Qr=0,Xu=1/0,Qu=null,xl=null,Yt=0,Tl=null,Ua=null,nl=0,ts=0,es=null,Kr=null,_n=0,ls=null;function ze(){return(dt&2)!==0&&ut!==0?ut&-ut:E.T!==null?ss():af()}function Vr(){if(Se===0)if((ut&536870912)===0||ct){var t=Wn;Wn<<=1,(Wn&3932160)===0&&(Wn=262144),Se=t}else Se=536870912;return t=ge.current,t!==null&&(t.flags|=32),Se}function oe(t,e,l){(t===xt&&(bt===2||bt===9)||t.cancelPendingCommit!==null)&&(Ha(t,0),Nl(t,ut,Se,!1)),ka(t,l),((dt&2)===0||t!==xt)&&(t===xt&&((dt&2)===0&&(ea|=l),_t===4&&Nl(t,ut,Se,!1)),Xe(t))}function Zr(t,e,l){if((dt&6)!==0)throw Error(s(327));var a=!l&&(e&127)===0&&(e&t.expiredLanes)===0||$a(t,e),n=a?nv(t,e):ns(t,e,!0),u=a;do{if(n===0){Da&&!a&&Nl(t,e,0,!1);break}else{if(l=t.current.alternate,u&&!lv(l)){n=ns(t,e,!1),u=!1;continue}if(n===2){if(u=e,t.errorRecoveryDisabledLanes&u)var i=0;else i=t.pendingLanes&-536870913,i=i!==0?i:i&536870912?536870912:0;if(i!==0){e=i;t:{var f=t;n=Cn;var d=f.current.memoizedState.isDehydrated;if(d&&(Ha(f,i).flags|=256),i=ns(f,i,!1),i!==2){if(Fc&&!d){f.errorRecoveryDisabledLanes|=u,ea|=u,n=4;break t}u=fe,fe=n,u!==null&&(fe===null?fe=u:fe.push.apply(fe,u))}n=i}if(u=!1,n!==2)continue}}if(n===1){Ha(t,0),Nl(t,e,0,!0);break}t:{switch(a=t,u=n,u){case 0:case 1:throw Error(s(345));case 4:if((e&4194048)!==e)break;case 6:Nl(a,e,Se,!Sl);break t;case 2:fe=null;break;case 3:case 5:break;default:throw Error(s(329))}if((e&62914560)===e&&(n=Yu+300-de(),10<n)){if(Nl(a,e,Se,!Sl),In(a,0,!0)!==0)break t;nl=e,a.timeoutHandle=xd(Lr.bind(null,a,l,fe,Qu,Pc,e,Se,ea,ja,Sl,u,"Throttled",-0,0),n);break t}Lr(a,l,fe,Qu,Pc,e,Se,ea,ja,Sl,u,null,-0,0)}}break}while(!0);Xe(t)}function Lr(t,e,l,a,n,u,i,f,d,z,R,O,x,A){if(t.timeoutHandle=-1,O=e.subtreeFlags,O&8192||(O&16785408)===16785408){O={stylesheets:null,count:0,imgCount:0,imgBytes:0,suspenseyImages:[],waitingForImages:!0,waitingForViewTransition:!1,unsuspend:Ke},Gr(e,u,O);var q=(u&62914560)===u?Yu-de():(u&4194048)===u?Qr-de():0;if(q=Yv(O,q),q!==null){nl=u,t.cancelPendingCommit=q(td.bind(null,t,e,u,l,a,n,i,f,d,R,O,null,x,A)),Nl(t,u,i,!z);return}}td(t,e,u,l,a,n,i,f,d)}function lv(t){for(var e=t;;){var l=e.tag;if((l===0||l===11||l===15)&&e.flags&16384&&(l=e.updateQueue,l!==null&&(l=l.stores,l!==null)))for(var a=0;a<l.length;a++){var n=l[a],u=n.getSnapshot;n=n.value;try{if(!ve(u(),n))return!1}catch{return!1}}if(l=e.child,e.subtreeFlags&16384&&l!==null)l.return=e,e=l;else{if(e===t)break;for(;e.sibling===null;){if(e.return===null||e.return===t)return!0;e=e.return}e.sibling.return=e.return,e=e.sibling}}return!0}function Nl(t,e,l,a){e&=~Ic,e&=~ea,t.suspendedLanes|=e,t.pingedLanes&=~e,a&&(t.warmLanes|=e),a=t.expirationTimes;for(var n=e;0<n;){var u=31-ye(n),i=1<<u;a[u]=-1,n&=~i}l!==0&&tf(t,l,e)}function Ku(){return(dt&6)===0?(On(0),!1):!0}function as(){if(et!==null){if(bt===0)var t=et.return;else t=et,Je=Ll=null,pc(t),Aa=null,dn=0,t=et;for(;t!==null;)Tr(t.alternate,t),t=t.return;et=null}}function Ha(t,e){var l=t.timeoutHandle;l!==-1&&(t.timeoutHandle=-1,xv(l)),l=t.cancelPendingCommit,l!==null&&(t.cancelPendingCommit=null,l()),nl=0,as(),xt=t,et=l=Ze(t.current,null),ut=e,bt=0,pe=null,Sl=!1,Da=$a(t,e),Fc=!1,ja=Se=Ic=ea=zl=_t=0,fe=Cn=null,Pc=!1,(e&8)!==0&&(e|=e&32);var a=t.entangledLanes;if(a!==0)for(t=t.entanglements,a&=e;0<a;){var n=31-ye(a),u=1<<n;e|=t[n],a&=~u}return al=e,ou(),l}function Jr(t,e){J=null,E.H=Sn,e===Na||e===hu?(e=so(),bt=3):e===cc?(e=so(),bt=4):bt=e===Hc?8:e!==null&&typeof e=="object"&&typeof e.then=="function"?6:1,pe=e,et===null&&(_t=1,Du(t,Ae(e,t.current)))}function $r(){var t=ge.current;return t===null?!0:(ut&4194048)===ut?_e===null:(ut&62914560)===ut||(ut&536870912)!==0?t===_e:!1}function kr(){var t=E.H;return E.H=Sn,t===null?Sn:t}function Wr(){var t=E.A;return E.A=tv,t}function Vu(){_t=4,Sl||(ut&4194048)!==ut&&ge.current!==null||(Da=!0),(zl&134217727)===0&&(ea&134217727)===0||xt===null||Nl(xt,ut,Se,!1)}function ns(t,e,l){var a=dt;dt|=2;var n=kr(),u=Wr();(xt!==t||ut!==e)&&(Qu=null,Ha(t,e)),e=!1;var i=_t;t:do try{if(bt!==0&&et!==null){var f=et,d=pe;switch(bt){case 8:as(),i=6;break t;case 3:case 2:case 9:case 6:ge.current===null&&(e=!0);var z=bt;if(bt=0,pe=null,Ba(t,f,d,z),l&&Da){i=0;break t}break;default:z=bt,bt=0,pe=null,Ba(t,f,d,z)}}av(),i=_t;break}catch(R){Jr(t,R)}while(!0);return e&&t.shellSuspendCounter++,Je=Ll=null,dt=a,E.H=n,E.A=u,et===null&&(xt=null,ut=0,ou()),i}function av(){for(;et!==null;)Fr(et)}function nv(t,e){var l=dt;dt|=2;var a=kr(),n=Wr();xt!==t||ut!==e?(Qu=null,Xu=de()+500,Ha(t,e)):Da=$a(t,e);t:do try{if(bt!==0&&et!==null){e=et;var u=pe;e:switch(bt){case 1:bt=0,pe=null,Ba(t,e,u,1);break;case 2:case 9:if(io(u)){bt=0,pe=null,Ir(e);break}e=function(){bt!==2&&bt!==9||xt!==t||(bt=7),Xe(t)},u.then(e,e);break t;case 3:bt=7;break t;case 4:bt=5;break t;case 7:io(u)?(bt=0,pe=null,Ir(e)):(bt=0,pe=null,Ba(t,e,u,7));break;case 5:var i=null;switch(et.tag){case 26:i=et.memoizedState;case 5:case 27:var f=et;if(i?qd(i):f.stateNode.complete){bt=0,pe=null;var d=f.sibling;if(d!==null)et=d;else{var z=f.return;z!==null?(et=z,Zu(z)):et=null}break e}}bt=0,pe=null,Ba(t,e,u,5);break;case 6:bt=0,pe=null,Ba(t,e,u,6);break;case 8:as(),_t=6;break t;default:throw Error(s(462))}}uv();break}catch(R){Jr(t,R)}while(!0);return Je=Ll=null,E.H=a,E.A=n,dt=l,et!==null?0:(xt=null,ut=0,ou(),_t)}function uv(){for(;et!==null&&!Cm();)Fr(et)}function Fr(t){var e=zr(t.alternate,t,al);t.memoizedProps=t.pendingProps,e===null?Zu(t):et=e}function Ir(t){var e=t,l=e.alternate;switch(e.tag){case 15:case 0:e=vr(l,e,e.pendingProps,e.type,void 0,ut);break;case 11:e=vr(l,e,e.pendingProps,e.type.render,e.ref,ut);break;case 5:pc(e);default:Tr(l,e),e=et=kf(e,al),e=zr(l,e,al)}t.memoizedProps=t.pendingProps,e===null?Zu(t):et=e}function Ba(t,e,l,a){Je=Ll=null,pc(e),Aa=null,dn=0;var n=e.return;try{if(Jy(t,n,e,l,ut)){_t=1,Du(t,Ae(l,t.current)),et=null;return}}catch(u){if(n!==null)throw et=n,u;_t=1,Du(t,Ae(l,t.current)),et=null;return}e.flags&32768?(ct||a===1?t=!0:Da||(ut&536870912)!==0?t=!1:(Sl=t=!0,(a===2||a===9||a===3||a===6)&&(a=ge.current,a!==null&&a.tag===13&&(a.flags|=16384))),Pr(e,t)):Zu(e)}function Zu(t){var e=t;do{if((e.flags&32768)!==0){Pr(e,Sl);return}t=e.return;var l=Wy(e.alternate,e,al);if(l!==null){et=l;return}if(e=e.sibling,e!==null){et=e;return}et=e=t}while(e!==null);_t===0&&(_t=5)}function Pr(t,e){do{var l=Fy(t.alternate,t);if(l!==null){l.flags&=32767,et=l;return}if(l=t.return,l!==null&&(l.flags|=32768,l.subtreeFlags=0,l.deletions=null),!e&&(t=t.sibling,t!==null)){et=t;return}et=t=l}while(t!==null);_t=6,et=null}function td(t,e,l,a,n,u,i,f,d){t.cancelPendingCommit=null;do Lu();while(Yt!==0);if((dt&6)!==0)throw Error(s(327));if(e!==null){if(e===t.current)throw Error(s(177));if(u=e.lanes|e.childLanes,u|=Li,Gm(t,l,u,i,f,d),t===xt&&(et=xt=null,ut=0),Ua=e,Tl=t,nl=l,ts=u,es=n,Kr=a,(e.subtreeFlags&10256)!==0||(e.flags&10256)!==0?(t.callbackNode=null,t.callbackPriority=0,fv($n,function(){return ud(),null})):(t.callbackNode=null,t.callbackPriority=0),a=(e.flags&13878)!==0,(e.subtreeFlags&13878)!==0||a){a=E.T,E.T=null,n=D.p,D.p=2,i=dt,dt|=4;try{Iy(t,e,l)}finally{dt=i,D.p=n,E.T=a}}Yt=1,ed(),ld(),ad()}}function ed(){if(Yt===1){Yt=0;var t=Tl,e=Ua,l=(e.flags&13878)!==0;if((e.subtreeFlags&13878)!==0||l){l=E.T,E.T=null;var a=D.p;D.p=2;var n=dt;dt|=4;try{Hr(e,t);var u=bs,i=Yf(t.containerInfo),f=u.focusedElem,d=u.selectionRange;if(i!==f&&f&&f.ownerDocument&&wf(f.ownerDocument.documentElement,f)){if(d!==null&&Xi(f)){var z=d.start,R=d.end;if(R===void 0&&(R=z),"selectionStart"in f)f.selectionStart=z,f.selectionEnd=Math.min(R,f.value.length);else{var O=f.ownerDocument||document,x=O&&O.defaultView||window;if(x.getSelection){var A=x.getSelection(),q=f.textContent.length,V=Math.min(d.start,q),St=d.end===void 0?V:Math.min(d.end,q);!A.extend&&V>St&&(i=St,St=V,V=i);var h=Gf(f,V),b=Gf(f,St);if(h&&b&&(A.rangeCount!==1||A.anchorNode!==h.node||A.anchorOffset!==h.offset||A.focusNode!==b.node||A.focusOffset!==b.offset)){var S=O.createRange();S.setStart(h.node,h.offset),A.removeAllRanges(),V>St?(A.addRange(S),A.extend(b.node,b.offset)):(S.setEnd(b.node,b.offset),A.addRange(S))}}}}for(O=[],A=f;A=A.parentNode;)A.nodeType===1&&O.push({element:A,left:A.scrollLeft,top:A.scrollTop});for(typeof f.focus=="function"&&f.focus(),f=0;f<O.length;f++){var _=O[f];_.element.scrollLeft=_.left,_.element.scrollTop=_.top}}ni=!!vs,bs=vs=null}finally{dt=n,D.p=a,E.T=l}}t.current=e,Yt=2}}function ld(){if(Yt===2){Yt=0;var t=Tl,e=Ua,l=(e.flags&8772)!==0;if((e.subtreeFlags&8772)!==0||l){l=E.T,E.T=null;var a=D.p;D.p=2;var n=dt;dt|=4;try{Or(t,e.alternate,e)}finally{dt=n,D.p=a,E.T=l}}Yt=3}}function ad(){if(Yt===4||Yt===3){Yt=0,_m();var t=Tl,e=Ua,l=nl,a=Kr;(e.subtreeFlags&10256)!==0||(e.flags&10256)!==0?Yt=5:(Yt=0,Ua=Tl=null,nd(t,t.pendingLanes));var n=t.pendingLanes;if(n===0&&(xl=null),xi(l),e=e.stateNode,me&&typeof me.onCommitFiberRoot=="function")try{me.onCommitFiberRoot(Ja,e,void 0,(e.current.flags&128)===128)}catch{}if(a!==null){e=E.T,n=D.p,D.p=2,E.T=null;try{for(var u=t.onRecoverableError,i=0;i<a.length;i++){var f=a[i];u(f.value,{componentStack:f.stack})}}finally{E.T=e,D.p=n}}(nl&3)!==0&&Lu(),Xe(t),n=t.pendingLanes,(l&261930)!==0&&(n&42)!==0?t===ls?_n++:(_n=0,ls=t):_n=0,On(0)}}function nd(t,e){(t.pooledCacheLanes&=e)===0&&(e=t.pooledCache,e!=null&&(t.pooledCache=null,on(e)))}function Lu(){return ed(),ld(),ad(),ud()}function ud(){if(Yt!==5)return!1;var t=Tl,e=ts;ts=0;var l=xi(nl),a=E.T,n=D.p;try{D.p=32>l?32:l,E.T=null,l=es,es=null;var u=Tl,i=nl;if(Yt=0,Ua=Tl=null,nl=0,(dt&6)!==0)throw Error(s(331));var f=dt;if(dt|=4,Yr(u.current),qr(u,u.current,i,l),dt=f,On(0,!1),me&&typeof me.onPostCommitFiberRoot=="function")try{me.onPostCommitFiberRoot(Ja,u)}catch{}return!0}finally{D.p=n,E.T=a,nd(t,e)}}function id(t,e,l){e=Ae(l,e),e=Uc(t.stateNode,e,2),t=bl(t,e,2),t!==null&&(ka(t,2),Xe(t))}function gt(t,e,l){if(t.tag===3)id(t,t,l);else for(;e!==null;){if(e.tag===3){id(e,t,l);break}else if(e.tag===1){var a=e.stateNode;if(typeof e.type.getDerivedStateFromError=="function"||typeof a.componentDidCatch=="function"&&(xl===null||!xl.has(a))){t=Ae(l,t),l=cr(2),a=bl(e,l,2),a!==null&&(sr(l,a,e,t),ka(a,2),Xe(a));break}}e=e.return}}function us(t,e,l){var a=t.pingCache;if(a===null){a=t.pingCache=new ev;var n=new Set;a.set(e,n)}else n=a.get(e),n===void 0&&(n=new Set,a.set(e,n));n.has(l)||(Fc=!0,n.add(l),t=iv.bind(null,t,e,l),e.then(t,t))}function iv(t,e,l){var a=t.pingCache;a!==null&&a.delete(e),t.pingedLanes|=t.suspendedLanes&l,t.warmLanes&=~l,xt===t&&(ut&l)===l&&(_t===4||_t===3&&(ut&62914560)===ut&&300>de()-Yu?(dt&2)===0&&Ha(t,0):Ic|=l,ja===ut&&(ja=0)),Xe(t)}function cd(t,e){e===0&&(e=Ps()),t=Kl(t,e),t!==null&&(ka(t,e),Xe(t))}function cv(t){var e=t.memoizedState,l=0;e!==null&&(l=e.retryLane),cd(t,l)}function sv(t,e){var l=0;switch(t.tag){case 31:case 13:var a=t.stateNode,n=t.memoizedState;n!==null&&(l=n.retryLane);break;case 19:a=t.stateNode;break;case 22:a=t.stateNode._retryCache;break;default:throw Error(s(314))}a!==null&&a.delete(e),cd(t,l)}function fv(t,e){return hi(t,e)}var Ju=null,qa=null,is=!1,$u=!1,cs=!1,Al=0;function Xe(t){t!==qa&&t.next===null&&(qa===null?Ju=qa=t:qa=qa.next=t),$u=!0,is||(is=!0,rv())}function On(t,e){if(!cs&&$u){cs=!0;do for(var l=!1,a=Ju;a!==null;){if(t!==0){var n=a.pendingLanes;if(n===0)var u=0;else{var i=a.suspendedLanes,f=a.pingedLanes;u=(1<<31-ye(42|t)+1)-1,u&=n&~(i&~f),u=u&201326741?u&201326741|1:u?u|2:0}u!==0&&(l=!0,rd(a,u))}else u=ut,u=In(a,a===xt?u:0,a.cancelPendingCommit!==null||a.timeoutHandle!==-1),(u&3)===0||$a(a,u)||(l=!0,rd(a,u));a=a.next}while(l);cs=!1}}function ov(){sd()}function sd(){$u=is=!1;var t=0;Al!==0&&zv()&&(t=Al);for(var e=de(),l=null,a=Ju;a!==null;){var n=a.next,u=fd(a,e);u===0?(a.next=null,l===null?Ju=n:l.next=n,n===null&&(qa=l)):(l=a,(t!==0||(u&3)!==0)&&($u=!0)),a=n}Yt!==0&&Yt!==5||On(t),Al!==0&&(Al=0)}function fd(t,e){for(var l=t.suspendedLanes,a=t.pingedLanes,n=t.expirationTimes,u=t.pendingLanes&-62914561;0<u;){var i=31-ye(u),f=1<<i,d=n[i];d===-1?((f&l)===0||(f&a)!==0)&&(n[i]=qm(f,e)):d<=e&&(t.expiredLanes|=f),u&=~f}if(e=xt,l=ut,l=In(t,t===e?l:0,t.cancelPendingCommit!==null||t.timeoutHandle!==-1),a=t.callbackNode,l===0||t===e&&(bt===2||bt===9)||t.cancelPendingCommit!==null)return a!==null&&a!==null&&pi(a),t.callbackNode=null,t.callbackPriority=0;if((l&3)===0||$a(t,l)){if(e=l&-l,e===t.callbackPriority)return e;switch(a!==null&&pi(a),xi(l)){case 2:case 8:l=Fs;break;case 32:l=$n;break;case 268435456:l=Is;break;default:l=$n}return a=od.bind(null,t),l=hi(l,a),t.callbackPriority=e,t.callbackNode=l,e}return a!==null&&a!==null&&pi(a),t.callbackPriority=2,t.callbackNode=null,2}function od(t,e){if(Yt!==0&&Yt!==5)return t.callbackNode=null,t.callbackPriority=0,null;var l=t.callbackNode;if(Lu()&&t.callbackNode!==l)return null;var a=ut;return a=In(t,t===xt?a:0,t.cancelPendingCommit!==null||t.timeoutHandle!==-1),a===0?null:(Zr(t,a,e),fd(t,de()),t.callbackNode!=null&&t.callbackNode===l?od.bind(null,t):null)}function rd(t,e){if(Lu())return null;Zr(t,e,!0)}function rv(){Tv(function(){(dt&6)!==0?hi(Ws,ov):sd()})}function ss(){if(Al===0){var t=xa;t===0&&(t=kn,kn<<=1,(kn&261888)===0&&(kn=256)),Al=t}return Al}function dd(t){return t==null||typeof t=="symbol"||typeof t=="boolean"?null:typeof t=="function"?t:lu(""+t)}function md(t,e){var l=e.ownerDocument.createElement("input");return l.name=e.name,l.value=e.value,t.id&&l.setAttribute("form",t.id),e.parentNode.insertBefore(l,e),t=new FormData(t),l.parentNode.removeChild(l),t}function dv(t,e,l,a,n){if(e==="submit"&&l&&l.stateNode===n){var u=dd((n[ne]||null).action),i=a.submitter;i&&(e=(e=i[ne]||null)?dd(e.formAction):i.getAttribute("formAction"),e!==null&&(u=e,i=null));var f=new iu("action","action",null,a,n);t.push({event:f,listeners:[{instance:null,listener:function(){if(a.defaultPrevented){if(Al!==0){var d=i?md(n,i):new FormData(n);Cc(l,{pending:!0,data:d,method:n.method,action:u},null,d)}}else typeof u=="function"&&(f.preventDefault(),d=i?md(n,i):new FormData(n),Cc(l,{pending:!0,data:d,method:n.method,action:u},u,d))},currentTarget:n}]})}}for(var fs=0;fs<Zi.length;fs++){var os=Zi[fs],mv=os.toLowerCase(),yv=os[0].toUpperCase()+os.slice(1);De(mv,"on"+yv)}De(Kf,"onAnimationEnd"),De(Vf,"onAnimationIteration"),De(Zf,"onAnimationStart"),De("dblclick","onDoubleClick"),De("focusin","onFocus"),De("focusout","onBlur"),De(Oy,"onTransitionRun"),De(My,"onTransitionStart"),De(Dy,"onTransitionCancel"),De(Lf,"onTransitionEnd"),sa("onMouseEnter",["mouseout","mouseover"]),sa("onMouseLeave",["mouseout","mouseover"]),sa("onPointerEnter",["pointerout","pointerover"]),sa("onPointerLeave",["pointerout","pointerover"]),wl("onChange","change click focusin focusout input keydown keyup selectionchange".split(" ")),wl("onSelect","focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange".split(" ")),wl("onBeforeInput",["compositionend","keypress","textInput","paste"]),wl("onCompositionEnd","compositionend focusout keydown keypress keyup mousedown".split(" ")),wl("onCompositionStart","compositionstart focusout keydown keypress keyup mousedown".split(" ")),wl("onCompositionUpdate","compositionupdate focusout keydown keypress keyup mousedown".split(" "));var Mn="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange resize seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),vv=new Set("beforetoggle cancel close invalid load scroll scrollend toggle".split(" ").concat(Mn));function yd(t,e){e=(e&4)!==0;for(var l=0;l<t.length;l++){var a=t[l],n=a.event;a=a.listeners;t:{var u=void 0;if(e)for(var i=a.length-1;0<=i;i--){var f=a[i],d=f.instance,z=f.currentTarget;if(f=f.listener,d!==u&&n.isPropagationStopped())break t;u=f,n.currentTarget=z;try{u(n)}catch(R){fu(R)}n.currentTarget=null,u=d}else for(i=0;i<a.length;i++){if(f=a[i],d=f.instance,z=f.currentTarget,f=f.listener,d!==u&&n.isPropagationStopped())break t;u=f,n.currentTarget=z;try{u(n)}catch(R){fu(R)}n.currentTarget=null,u=d}}}}function lt(t,e){var l=e[Ti];l===void 0&&(l=e[Ti]=new Set);var a=t+"__bubble";l.has(a)||(vd(e,t,2,!1),l.add(a))}function rs(t,e,l){var a=0;e&&(a|=4),vd(l,t,a,e)}var ku="_reactListening"+Math.random().toString(36).slice(2);function ds(t){if(!t[ku]){t[ku]=!0,cf.forEach(function(l){l!=="selectionchange"&&(vv.has(l)||rs(l,!1,t),rs(l,!0,t))});var e=t.nodeType===9?t:t.ownerDocument;e===null||e[ku]||(e[ku]=!0,rs("selectionchange",!1,e))}}function vd(t,e,l,a){switch(Vd(e)){case 2:var n=Kv;break;case 8:n=Vv;break;default:n=Rs}l=n.bind(null,e,l,t),n=void 0,!Di||e!=="touchstart"&&e!=="touchmove"&&e!=="wheel"||(n=!0),a?n!==void 0?t.addEventListener(e,l,{capture:!0,passive:n}):t.addEventListener(e,l,!0):n!==void 0?t.addEventListener(e,l,{passive:n}):t.addEventListener(e,l,!1)}function ms(t,e,l,a,n){var u=a;if((e&1)===0&&(e&2)===0&&a!==null)t:for(;;){if(a===null)return;var i=a.tag;if(i===3||i===4){var f=a.stateNode.containerInfo;if(f===n)break;if(i===4)for(i=a.return;i!==null;){var d=i.tag;if((d===3||d===4)&&i.stateNode.containerInfo===n)return;i=i.return}for(;f!==null;){if(i=ua(f),i===null)return;if(d=i.tag,d===5||d===6||d===26||d===27){a=u=i;continue t}f=f.parentNode}}a=a.return}pf(function(){var z=u,R=Oi(l),O=[];t:{var x=Jf.get(t);if(x!==void 0){var A=iu,q=t;switch(t){case"keypress":if(nu(l)===0)break t;case"keydown":case"keyup":A=sy;break;case"focusin":q="focus",A=Bi;break;case"focusout":q="blur",A=Bi;break;case"beforeblur":case"afterblur":A=Bi;break;case"click":if(l.button===2)break t;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":A=xf;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":A=Wm;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":A=ry;break;case Kf:case Vf:case Zf:A=Pm;break;case Lf:A=my;break;case"scroll":case"scrollend":A=$m;break;case"wheel":A=vy;break;case"copy":case"cut":case"paste":A=ey;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":A=Nf;break;case"toggle":case"beforetoggle":A=gy}var V=(e&4)!==0,St=!V&&(t==="scroll"||t==="scrollend"),h=V?x!==null?x+"Capture":null:x;V=[];for(var b=z,S;b!==null;){var _=b;if(S=_.stateNode,_=_.tag,_!==5&&_!==26&&_!==27||S===null||h===null||(_=Ia(b,h),_!=null&&V.push(Dn(b,_,S))),St)break;b=b.return}0<V.length&&(x=new A(x,q,null,l,R),O.push({event:x,listeners:V}))}}if((e&7)===0){t:{if(x=t==="mouseover"||t==="pointerover",A=t==="mouseout"||t==="pointerout",x&&l!==_i&&(q=l.relatedTarget||l.fromElement)&&(ua(q)||q[na]))break t;if((A||x)&&(x=R.window===R?R:(x=R.ownerDocument)?x.defaultView||x.parentWindow:window,A?(q=l.relatedTarget||l.toElement,A=z,q=q?ua(q):null,q!==null&&(St=m(q),V=q.tag,q!==St||V!==5&&V!==27&&V!==6)&&(q=null)):(A=null,q=z),A!==q)){if(V=xf,_="onMouseLeave",h="onMouseEnter",b="mouse",(t==="pointerout"||t==="pointerover")&&(V=Nf,_="onPointerLeave",h="onPointerEnter",b="pointer"),St=A==null?x:Fa(A),S=q==null?x:Fa(q),x=new V(_,b+"leave",A,l,R),x.target=St,x.relatedTarget=S,_=null,ua(R)===z&&(V=new V(h,b+"enter",q,l,R),V.target=S,V.relatedTarget=St,_=V),St=_,A&&q)e:{for(V=bv,h=A,b=q,S=0,_=h;_;_=V(_))S++;_=0;for(var X=b;X;X=V(X))_++;for(;0<S-_;)h=V(h),S--;for(;0<_-S;)b=V(b),_--;for(;S--;){if(h===b||b!==null&&h===b.alternate){V=h;break e}h=V(h),b=V(b)}V=null}else V=null;A!==null&&bd(O,x,A,V,!1),q!==null&&St!==null&&bd(O,St,q,V,!0)}}t:{if(x=z?Fa(z):window,A=x.nodeName&&x.nodeName.toLowerCase(),A==="select"||A==="input"&&x.type==="file")var ot=Df;else if(Of(x))if(jf)ot=Ry;else{ot=Ay;var Y=Ny}else A=x.nodeName,!A||A.toLowerCase()!=="input"||x.type!=="checkbox"&&x.type!=="radio"?z&&Ci(z.elementType)&&(ot=Df):ot=Ey;if(ot&&(ot=ot(t,z))){Mf(O,ot,l,R);break t}Y&&Y(t,x,z),t==="focusout"&&z&&x.type==="number"&&z.memoizedProps.value!=null&&Ri(x,"number",x.value)}switch(Y=z?Fa(z):window,t){case"focusin":(Of(Y)||Y.contentEditable==="true")&&(ya=Y,Qi=z,cn=null);break;case"focusout":cn=Qi=ya=null;break;case"mousedown":Ki=!0;break;case"contextmenu":case"mouseup":case"dragend":Ki=!1,Xf(O,l,R);break;case"selectionchange":if(_y)break;case"keydown":case"keyup":Xf(O,l,R)}var k;if(Gi)t:{switch(t){case"compositionstart":var it="onCompositionStart";break t;case"compositionend":it="onCompositionEnd";break t;case"compositionupdate":it="onCompositionUpdate";break t}it=void 0}else ma?Cf(t,l)&&(it="onCompositionEnd"):t==="keydown"&&l.keyCode===229&&(it="onCompositionStart");it&&(Af&&l.locale!=="ko"&&(ma||it!=="onCompositionStart"?it==="onCompositionEnd"&&ma&&(k=Sf()):(fl=R,ji="value"in fl?fl.value:fl.textContent,ma=!0)),Y=Wu(z,it),0<Y.length&&(it=new Tf(it,t,null,l,R),O.push({event:it,listeners:Y}),k?it.data=k:(k=_f(l),k!==null&&(it.data=k)))),(k=py?Sy(t,l):zy(t,l))&&(it=Wu(z,"onBeforeInput"),0<it.length&&(Y=new Tf("onBeforeInput","beforeinput",null,l,R),O.push({event:Y,listeners:it}),Y.data=k)),dv(O,t,z,l,R)}yd(O,e)})}function Dn(t,e,l){return{instance:t,listener:e,currentTarget:l}}function Wu(t,e){for(var l=e+"Capture",a=[];t!==null;){var n=t,u=n.stateNode;if(n=n.tag,n!==5&&n!==26&&n!==27||u===null||(n=Ia(t,l),n!=null&&a.unshift(Dn(t,n,u)),n=Ia(t,e),n!=null&&a.push(Dn(t,n,u))),t.tag===3)return a;t=t.return}return[]}function bv(t){if(t===null)return null;do t=t.return;while(t&&t.tag!==5&&t.tag!==27);return t||null}function bd(t,e,l,a,n){for(var u=e._reactName,i=[];l!==null&&l!==a;){var f=l,d=f.alternate,z=f.stateNode;if(f=f.tag,d!==null&&d===a)break;f!==5&&f!==26&&f!==27||z===null||(d=z,n?(z=Ia(l,u),z!=null&&i.unshift(Dn(l,z,d))):n||(z=Ia(l,u),z!=null&&i.push(Dn(l,z,d)))),l=l.return}i.length!==0&&t.push({event:e,listeners:i})}var gv=/\r\n?/g,hv=/\u0000|\uFFFD/g;function gd(t){return(typeof t=="string"?t:""+t).replace(gv,`
-`).replace(hv,"")}function hd(t,e){return e=gd(e),gd(t)===e}function pt(t,e,l,a,n,u){switch(l){case"children":typeof a=="string"?e==="body"||e==="textarea"&&a===""||oa(t,a):(typeof a=="number"||typeof a=="bigint")&&e!=="body"&&oa(t,""+a);break;case"className":tu(t,"class",a);break;case"tabIndex":tu(t,"tabindex",a);break;case"dir":case"role":case"viewBox":case"width":case"height":tu(t,l,a);break;case"style":gf(t,a,u);break;case"data":if(e!=="object"){tu(t,"data",a);break}case"src":case"href":if(a===""&&(e!=="a"||l!=="href")){t.removeAttribute(l);break}if(a==null||typeof a=="function"||typeof a=="symbol"||typeof a=="boolean"){t.removeAttribute(l);break}a=lu(""+a),t.setAttribute(l,a);break;case"action":case"formAction":if(typeof a=="function"){t.setAttribute(l,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}else typeof u=="function"&&(l==="formAction"?(e!=="input"&&pt(t,e,"name",n.name,n,null),pt(t,e,"formEncType",n.formEncType,n,null),pt(t,e,"formMethod",n.formMethod,n,null),pt(t,e,"formTarget",n.formTarget,n,null)):(pt(t,e,"encType",n.encType,n,null),pt(t,e,"method",n.method,n,null),pt(t,e,"target",n.target,n,null)));if(a==null||typeof a=="symbol"||typeof a=="boolean"){t.removeAttribute(l);break}a=lu(""+a),t.setAttribute(l,a);break;case"onClick":a!=null&&(t.onclick=Ke);break;case"onScroll":a!=null&&lt("scroll",t);break;case"onScrollEnd":a!=null&&lt("scrollend",t);break;case"dangerouslySetInnerHTML":if(a!=null){if(typeof a!="object"||!("__html"in a))throw Error(s(61));if(l=a.__html,l!=null){if(n.children!=null)throw Error(s(60));t.innerHTML=l}}break;case"multiple":t.multiple=a&&typeof a!="function"&&typeof a!="symbol";break;case"muted":t.muted=a&&typeof a!="function"&&typeof a!="symbol";break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":break;case"autoFocus":break;case"xlinkHref":if(a==null||typeof a=="function"||typeof a=="boolean"||typeof a=="symbol"){t.removeAttribute("xlink:href");break}l=lu(""+a),t.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",l);break;case"contentEditable":case"spellCheck":case"draggable":case"value":case"autoReverse":case"externalResourcesRequired":case"focusable":case"preserveAlpha":a!=null&&typeof a!="function"&&typeof a!="symbol"?t.setAttribute(l,""+a):t.removeAttribute(l);break;case"inert":case"allowFullScreen":case"async":case"autoPlay":case"controls":case"default":case"defer":case"disabled":case"disablePictureInPicture":case"disableRemotePlayback":case"formNoValidate":case"hidden":case"loop":case"noModule":case"noValidate":case"open":case"playsInline":case"readOnly":case"required":case"reversed":case"scoped":case"seamless":case"itemScope":a&&typeof a!="function"&&typeof a!="symbol"?t.setAttribute(l,""):t.removeAttribute(l);break;case"capture":case"download":a===!0?t.setAttribute(l,""):a!==!1&&a!=null&&typeof a!="function"&&typeof a!="symbol"?t.setAttribute(l,a):t.removeAttribute(l);break;case"cols":case"rows":case"size":case"span":a!=null&&typeof a!="function"&&typeof a!="symbol"&&!isNaN(a)&&1<=a?t.setAttribute(l,a):t.removeAttribute(l);break;case"rowSpan":case"start":a==null||typeof a=="function"||typeof a=="symbol"||isNaN(a)?t.removeAttribute(l):t.setAttribute(l,a);break;case"popover":lt("beforetoggle",t),lt("toggle",t),Pn(t,"popover",a);break;case"xlinkActuate":Qe(t,"http://www.w3.org/1999/xlink","xlink:actuate",a);break;case"xlinkArcrole":Qe(t,"http://www.w3.org/1999/xlink","xlink:arcrole",a);break;case"xlinkRole":Qe(t,"http://www.w3.org/1999/xlink","xlink:role",a);break;case"xlinkShow":Qe(t,"http://www.w3.org/1999/xlink","xlink:show",a);break;case"xlinkTitle":Qe(t,"http://www.w3.org/1999/xlink","xlink:title",a);break;case"xlinkType":Qe(t,"http://www.w3.org/1999/xlink","xlink:type",a);break;case"xmlBase":Qe(t,"http://www.w3.org/XML/1998/namespace","xml:base",a);break;case"xmlLang":Qe(t,"http://www.w3.org/XML/1998/namespace","xml:lang",a);break;case"xmlSpace":Qe(t,"http://www.w3.org/XML/1998/namespace","xml:space",a);break;case"is":Pn(t,"is",a);break;case"innerText":case"textContent":break;default:(!(2<l.length)||l[0]!=="o"&&l[0]!=="O"||l[1]!=="n"&&l[1]!=="N")&&(l=Lm.get(l)||l,Pn(t,l,a))}}function ys(t,e,l,a,n,u){switch(l){case"style":gf(t,a,u);break;case"dangerouslySetInnerHTML":if(a!=null){if(typeof a!="object"||!("__html"in a))throw Error(s(61));if(l=a.__html,l!=null){if(n.children!=null)throw Error(s(60));t.innerHTML=l}}break;case"children":typeof a=="string"?oa(t,a):(typeof a=="number"||typeof a=="bigint")&&oa(t,""+a);break;case"onScroll":a!=null&&lt("scroll",t);break;case"onScrollEnd":a!=null&&lt("scrollend",t);break;case"onClick":a!=null&&(t.onclick=Ke);break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"innerHTML":case"ref":break;case"innerText":case"textContent":break;default:if(!sf.hasOwnProperty(l))t:{if(l[0]==="o"&&l[1]==="n"&&(n=l.endsWith("Capture"),e=l.slice(2,n?l.length-7:void 0),u=t[ne]||null,u=u!=null?u[l]:null,typeof u=="function"&&t.removeEventListener(e,u,n),typeof a=="function")){typeof u!="function"&&u!==null&&(l in t?t[l]=null:t.hasAttribute(l)&&t.removeAttribute(l)),t.addEventListener(e,a,n);break t}l in t?t[l]=a:a===!0?t.setAttribute(l,""):Pn(t,l,a)}}}function kt(t,e,l){switch(e){case"div":case"span":case"svg":case"path":case"a":case"g":case"p":case"li":break;case"img":lt("error",t),lt("load",t);var a=!1,n=!1,u;for(u in l)if(l.hasOwnProperty(u)){var i=l[u];if(i!=null)switch(u){case"src":a=!0;break;case"srcSet":n=!0;break;case"children":case"dangerouslySetInnerHTML":throw Error(s(137,e));default:pt(t,e,u,i,l,null)}}n&&pt(t,e,"srcSet",l.srcSet,l,null),a&&pt(t,e,"src",l.src,l,null);return;case"input":lt("invalid",t);var f=u=i=n=null,d=null,z=null;for(a in l)if(l.hasOwnProperty(a)){var R=l[a];if(R!=null)switch(a){case"name":n=R;break;case"type":i=R;break;case"checked":d=R;break;case"defaultChecked":z=R;break;case"value":u=R;break;case"defaultValue":f=R;break;case"children":case"dangerouslySetInnerHTML":if(R!=null)throw Error(s(137,e));break;default:pt(t,e,a,R,l,null)}}mf(t,u,f,d,z,i,n,!1);return;case"select":lt("invalid",t),a=i=u=null;for(n in l)if(l.hasOwnProperty(n)&&(f=l[n],f!=null))switch(n){case"value":u=f;break;case"defaultValue":i=f;break;case"multiple":a=f;default:pt(t,e,n,f,l,null)}e=u,l=i,t.multiple=!!a,e!=null?fa(t,!!a,e,!1):l!=null&&fa(t,!!a,l,!0);return;case"textarea":lt("invalid",t),u=n=a=null;for(i in l)if(l.hasOwnProperty(i)&&(f=l[i],f!=null))switch(i){case"value":a=f;break;case"defaultValue":n=f;break;case"children":u=f;break;case"dangerouslySetInnerHTML":if(f!=null)throw Error(s(91));break;default:pt(t,e,i,f,l,null)}vf(t,a,n,u);return;case"option":for(d in l)if(l.hasOwnProperty(d)&&(a=l[d],a!=null))switch(d){case"selected":t.selected=a&&typeof a!="function"&&typeof a!="symbol";break;default:pt(t,e,d,a,l,null)}return;case"dialog":lt("beforetoggle",t),lt("toggle",t),lt("cancel",t),lt("close",t);break;case"iframe":case"object":lt("load",t);break;case"video":case"audio":for(a=0;a<Mn.length;a++)lt(Mn[a],t);break;case"image":lt("error",t),lt("load",t);break;case"details":lt("toggle",t);break;case"embed":case"source":case"link":lt("error",t),lt("load",t);case"area":case"base":case"br":case"col":case"hr":case"keygen":case"meta":case"param":case"track":case"wbr":case"menuitem":for(z in l)if(l.hasOwnProperty(z)&&(a=l[z],a!=null))switch(z){case"children":case"dangerouslySetInnerHTML":throw Error(s(137,e));default:pt(t,e,z,a,l,null)}return;default:if(Ci(e)){for(R in l)l.hasOwnProperty(R)&&(a=l[R],a!==void 0&&ys(t,e,R,a,l,void 0));return}}for(f in l)l.hasOwnProperty(f)&&(a=l[f],a!=null&&pt(t,e,f,a,l,null))}function pv(t,e,l,a){switch(e){case"div":case"span":case"svg":case"path":case"a":case"g":case"p":case"li":break;case"input":var n=null,u=null,i=null,f=null,d=null,z=null,R=null;for(A in l){var O=l[A];if(l.hasOwnProperty(A)&&O!=null)switch(A){case"checked":break;case"value":break;case"defaultValue":d=O;default:a.hasOwnProperty(A)||pt(t,e,A,null,a,O)}}for(var x in a){var A=a[x];if(O=l[x],a.hasOwnProperty(x)&&(A!=null||O!=null))switch(x){case"type":u=A;break;case"name":n=A;break;case"checked":z=A;break;case"defaultChecked":R=A;break;case"value":i=A;break;case"defaultValue":f=A;break;case"children":case"dangerouslySetInnerHTML":if(A!=null)throw Error(s(137,e));break;default:A!==O&&pt(t,e,x,A,a,O)}}Ei(t,i,f,d,z,R,u,n);return;case"select":A=i=f=x=null;for(u in l)if(d=l[u],l.hasOwnProperty(u)&&d!=null)switch(u){case"value":break;case"multiple":A=d;default:a.hasOwnProperty(u)||pt(t,e,u,null,a,d)}for(n in a)if(u=a[n],d=l[n],a.hasOwnProperty(n)&&(u!=null||d!=null))switch(n){case"value":x=u;break;case"defaultValue":f=u;break;case"multiple":i=u;default:u!==d&&pt(t,e,n,u,a,d)}e=f,l=i,a=A,x!=null?fa(t,!!l,x,!1):!!a!=!!l&&(e!=null?fa(t,!!l,e,!0):fa(t,!!l,l?[]:"",!1));return;case"textarea":A=x=null;for(f in l)if(n=l[f],l.hasOwnProperty(f)&&n!=null&&!a.hasOwnProperty(f))switch(f){case"value":break;case"children":break;default:pt(t,e,f,null,a,n)}for(i in a)if(n=a[i],u=l[i],a.hasOwnProperty(i)&&(n!=null||u!=null))switch(i){case"value":x=n;break;case"defaultValue":A=n;break;case"children":break;case"dangerouslySetInnerHTML":if(n!=null)throw Error(s(91));break;default:n!==u&&pt(t,e,i,n,a,u)}yf(t,x,A);return;case"option":for(var q in l)if(x=l[q],l.hasOwnProperty(q)&&x!=null&&!a.hasOwnProperty(q))switch(q){case"selected":t.selected=!1;break;default:pt(t,e,q,null,a,x)}for(d in a)if(x=a[d],A=l[d],a.hasOwnProperty(d)&&x!==A&&(x!=null||A!=null))switch(d){case"selected":t.selected=x&&typeof x!="function"&&typeof x!="symbol";break;default:pt(t,e,d,x,a,A)}return;case"img":case"link":case"area":case"base":case"br":case"col":case"embed":case"hr":case"keygen":case"meta":case"param":case"source":case"track":case"wbr":case"menuitem":for(var V in l)x=l[V],l.hasOwnProperty(V)&&x!=null&&!a.hasOwnProperty(V)&&pt(t,e,V,null,a,x);for(z in a)if(x=a[z],A=l[z],a.hasOwnProperty(z)&&x!==A&&(x!=null||A!=null))switch(z){case"children":case"dangerouslySetInnerHTML":if(x!=null)throw Error(s(137,e));break;default:pt(t,e,z,x,a,A)}return;default:if(Ci(e)){for(var St in l)x=l[St],l.hasOwnProperty(St)&&x!==void 0&&!a.hasOwnProperty(St)&&ys(t,e,St,void 0,a,x);for(R in a)x=a[R],A=l[R],!a.hasOwnProperty(R)||x===A||x===void 0&&A===void 0||ys(t,e,R,x,a,A);return}}for(var h in l)x=l[h],l.hasOwnProperty(h)&&x!=null&&!a.hasOwnProperty(h)&&pt(t,e,h,null,a,x);for(O in a)x=a[O],A=l[O],!a.hasOwnProperty(O)||x===A||x==null&&A==null||pt(t,e,O,x,a,A)}function pd(t){switch(t){case"css":case"script":case"font":case"img":case"image":case"input":case"link":return!0;default:return!1}}function Sv(){if(typeof performance.getEntriesByType=="function"){for(var t=0,e=0,l=performance.getEntriesByType("resource"),a=0;a<l.length;a++){var n=l[a],u=n.transferSize,i=n.initiatorType,f=n.duration;if(u&&f&&pd(i)){for(i=0,f=n.responseEnd,a+=1;a<l.length;a++){var d=l[a],z=d.startTime;if(z>f)break;var R=d.transferSize,O=d.initiatorType;R&&pd(O)&&(d=d.responseEnd,i+=R*(d<f?1:(f-z)/(d-z)))}if(--a,e+=8*(u+i)/(n.duration/1e3),t++,10<t)break}}if(0<t)return e/t/1e6}return navigator.connection&&(t=navigator.connection.downlink,typeof t=="number")?t:5}var vs=null,bs=null;function Fu(t){return t.nodeType===9?t:t.ownerDocument}function Sd(t){switch(t){case"http://www.w3.org/2000/svg":return 1;case"http://www.w3.org/1998/Math/MathML":return 2;default:return 0}}function zd(t,e){if(t===0)switch(e){case"svg":return 1;case"math":return 2;default:return 0}return t===1&&e==="foreignObject"?0:t}function gs(t,e){return t==="textarea"||t==="noscript"||typeof e.children=="string"||typeof e.children=="number"||typeof e.children=="bigint"||typeof e.dangerouslySetInnerHTML=="object"&&e.dangerouslySetInnerHTML!==null&&e.dangerouslySetInnerHTML.__html!=null}var hs=null;function zv(){var t=window.event;return t&&t.type==="popstate"?t===hs?!1:(hs=t,!0):(hs=null,!1)}var xd=typeof setTimeout=="function"?setTimeout:void 0,xv=typeof clearTimeout=="function"?clearTimeout:void 0,Td=typeof Promise=="function"?Promise:void 0,Tv=typeof queueMicrotask=="function"?queueMicrotask:typeof Td<"u"?function(t){return Td.resolve(null).then(t).catch(Nv)}:xd;function Nv(t){setTimeout(function(){throw t})}function El(t){return t==="head"}function Nd(t,e){var l=e,a=0;do{var n=l.nextSibling;if(t.removeChild(l),n&&n.nodeType===8)if(l=n.data,l==="/$"||l==="/&"){if(a===0){t.removeChild(n),Xa(e);return}a--}else if(l==="$"||l==="$?"||l==="$~"||l==="$!"||l==="&")a++;else if(l==="html")jn(t.ownerDocument.documentElement);else if(l==="head"){l=t.ownerDocument.head,jn(l);for(var u=l.firstChild;u;){var i=u.nextSibling,f=u.nodeName;u[Wa]||f==="SCRIPT"||f==="STYLE"||f==="LINK"&&u.rel.toLowerCase()==="stylesheet"||l.removeChild(u),u=i}}else l==="body"&&jn(t.ownerDocument.body);l=n}while(l);Xa(e)}function Ad(t,e){var l=t;t=0;do{var a=l.nextSibling;if(l.nodeType===1?e?(l._stashedDisplay=l.style.display,l.style.display="none"):(l.style.display=l._stashedDisplay||"",l.getAttribute("style")===""&&l.removeAttribute("style")):l.nodeType===3&&(e?(l._stashedText=l.nodeValue,l.nodeValue=""):l.nodeValue=l._stashedText||""),a&&a.nodeType===8)if(l=a.data,l==="/$"){if(t===0)break;t--}else l!=="$"&&l!=="$?"&&l!=="$~"&&l!=="$!"||t++;l=a}while(l)}function ps(t){var e=t.firstChild;for(e&&e.nodeType===10&&(e=e.nextSibling);e;){var l=e;switch(e=e.nextSibling,l.nodeName){case"HTML":case"HEAD":case"BODY":ps(l),Ni(l);continue;case"SCRIPT":case"STYLE":continue;case"LINK":if(l.rel.toLowerCase()==="stylesheet")continue}t.removeChild(l)}}function Av(t,e,l,a){for(;t.nodeType===1;){var n=l;if(t.nodeName.toLowerCase()!==e.toLowerCase()){if(!a&&(t.nodeName!=="INPUT"||t.type!=="hidden"))break}else if(a){if(!t[Wa])switch(e){case"meta":if(!t.hasAttribute("itemprop"))break;return t;case"link":if(u=t.getAttribute("rel"),u==="stylesheet"&&t.hasAttribute("data-precedence"))break;if(u!==n.rel||t.getAttribute("href")!==(n.href==null||n.href===""?null:n.href)||t.getAttribute("crossorigin")!==(n.crossOrigin==null?null:n.crossOrigin)||t.getAttribute("title")!==(n.title==null?null:n.title))break;return t;case"style":if(t.hasAttribute("data-precedence"))break;return t;case"script":if(u=t.getAttribute("src"),(u!==(n.src==null?null:n.src)||t.getAttribute("type")!==(n.type==null?null:n.type)||t.getAttribute("crossorigin")!==(n.crossOrigin==null?null:n.crossOrigin))&&u&&t.hasAttribute("async")&&!t.hasAttribute("itemprop"))break;return t;default:return t}}else if(e==="input"&&t.type==="hidden"){var u=n.name==null?null:""+n.name;if(n.type==="hidden"&&t.getAttribute("name")===u)return t}else return t;if(t=Oe(t.nextSibling),t===null)break}return null}function Ev(t,e,l){if(e==="")return null;for(;t.nodeType!==3;)if((t.nodeType!==1||t.nodeName!=="INPUT"||t.type!=="hidden")&&!l||(t=Oe(t.nextSibling),t===null))return null;return t}function Ed(t,e){for(;t.nodeType!==8;)if((t.nodeType!==1||t.nodeName!=="INPUT"||t.type!=="hidden")&&!e||(t=Oe(t.nextSibling),t===null))return null;return t}function Ss(t){return t.data==="$?"||t.data==="$~"}function zs(t){return t.data==="$!"||t.data==="$?"&&t.ownerDocument.readyState!=="loading"}function Rv(t,e){var l=t.ownerDocument;if(t.data==="$~")t._reactRetry=e;else if(t.data!=="$?"||l.readyState!=="loading")e();else{var a=function(){e(),l.removeEventListener("DOMContentLoaded",a)};l.addEventListener("DOMContentLoaded",a),t._reactRetry=a}}function Oe(t){for(;t!=null;t=t.nextSibling){var e=t.nodeType;if(e===1||e===3)break;if(e===8){if(e=t.data,e==="$"||e==="$!"||e==="$?"||e==="$~"||e==="&"||e==="F!"||e==="F")break;if(e==="/$"||e==="/&")return null}}return t}var xs=null;function Rd(t){t=t.nextSibling;for(var e=0;t;){if(t.nodeType===8){var l=t.data;if(l==="/$"||l==="/&"){if(e===0)return Oe(t.nextSibling);e--}else l!=="$"&&l!=="$!"&&l!=="$?"&&l!=="$~"&&l!=="&"||e++}t=t.nextSibling}return null}function Cd(t){t=t.previousSibling;for(var e=0;t;){if(t.nodeType===8){var l=t.data;if(l==="$"||l==="$!"||l==="$?"||l==="$~"||l==="&"){if(e===0)return t;e--}else l!=="/$"&&l!=="/&"||e++}t=t.previousSibling}return null}function _d(t,e,l){switch(e=Fu(l),t){case"html":if(t=e.documentElement,!t)throw Error(s(452));return t;case"head":if(t=e.head,!t)throw Error(s(453));return t;case"body":if(t=e.body,!t)throw Error(s(454));return t;default:throw Error(s(451))}}function jn(t){for(var e=t.attributes;e.length;)t.removeAttributeNode(e[0]);Ni(t)}var Me=new Map,Od=new Set;function Iu(t){return typeof t.getRootNode=="function"?t.getRootNode():t.nodeType===9?t:t.ownerDocument}var ul=D.d;D.d={f:Cv,r:_v,D:Ov,C:Mv,L:Dv,m:jv,X:Hv,S:Uv,M:Bv};function Cv(){var t=ul.f(),e=Ku();return t||e}function _v(t){var e=ia(t);e!==null&&e.tag===5&&e.type==="form"?Jo(e):ul.r(t)}var Ga=typeof document>"u"?null:document;function Md(t,e,l){var a=Ga;if(a&&typeof e=="string"&&e){var n=Te(e);n='link[rel="'+t+'"][href="'+n+'"]',typeof l=="string"&&(n+='[crossorigin="'+l+'"]'),Od.has(n)||(Od.add(n),t={rel:t,crossOrigin:l,href:e},a.querySelector(n)===null&&(e=a.createElement("link"),kt(e,"link",t),Xt(e),a.head.appendChild(e)))}}function Ov(t){ul.D(t),Md("dns-prefetch",t,null)}function Mv(t,e){ul.C(t,e),Md("preconnect",t,e)}function Dv(t,e,l){ul.L(t,e,l);var a=Ga;if(a&&t&&e){var n='link[rel="preload"][as="'+Te(e)+'"]';e==="image"&&l&&l.imageSrcSet?(n+='[imagesrcset="'+Te(l.imageSrcSet)+'"]',typeof l.imageSizes=="string"&&(n+='[imagesizes="'+Te(l.imageSizes)+'"]')):n+='[href="'+Te(t)+'"]';var u=n;switch(e){case"style":u=wa(t);break;case"script":u=Ya(t)}Me.has(u)||(t=j({rel:"preload",href:e==="image"&&l&&l.imageSrcSet?void 0:t,as:e},l),Me.set(u,t),a.querySelector(n)!==null||e==="style"&&a.querySelector(Un(u))||e==="script"&&a.querySelector(Hn(u))||(e=a.createElement("link"),kt(e,"link",t),Xt(e),a.head.appendChild(e)))}}function jv(t,e){ul.m(t,e);var l=Ga;if(l&&t){var a=e&&typeof e.as=="string"?e.as:"script",n='link[rel="modulepreload"][as="'+Te(a)+'"][href="'+Te(t)+'"]',u=n;switch(a){case"audioworklet":case"paintworklet":case"serviceworker":case"sharedworker":case"worker":case"script":u=Ya(t)}if(!Me.has(u)&&(t=j({rel:"modulepreload",href:t},e),Me.set(u,t),l.querySelector(n)===null)){switch(a){case"audioworklet":case"paintworklet":case"serviceworker":case"sharedworker":case"worker":case"script":if(l.querySelector(Hn(u)))return}a=l.createElement("link"),kt(a,"link",t),Xt(a),l.head.appendChild(a)}}}function Uv(t,e,l){ul.S(t,e,l);var a=Ga;if(a&&t){var n=ca(a).hoistableStyles,u=wa(t);e=e||"default";var i=n.get(u);if(!i){var f={loading:0,preload:null};if(i=a.querySelector(Un(u)))f.loading=5;else{t=j({rel:"stylesheet",href:t,"data-precedence":e},l),(l=Me.get(u))&&Ts(t,l);var d=i=a.createElement("link");Xt(d),kt(d,"link",t),d._p=new Promise(function(z,R){d.onload=z,d.onerror=R}),d.addEventListener("load",function(){f.loading|=1}),d.addEventListener("error",function(){f.loading|=2}),f.loading|=4,Pu(i,e,a)}i={type:"stylesheet",instance:i,count:1,state:f},n.set(u,i)}}}function Hv(t,e){ul.X(t,e);var l=Ga;if(l&&t){var a=ca(l).hoistableScripts,n=Ya(t),u=a.get(n);u||(u=l.querySelector(Hn(n)),u||(t=j({src:t,async:!0},e),(e=Me.get(n))&&Ns(t,e),u=l.createElement("script"),Xt(u),kt(u,"link",t),l.head.appendChild(u)),u={type:"script",instance:u,count:1,state:null},a.set(n,u))}}function Bv(t,e){ul.M(t,e);var l=Ga;if(l&&t){var a=ca(l).hoistableScripts,n=Ya(t),u=a.get(n);u||(u=l.querySelector(Hn(n)),u||(t=j({src:t,async:!0,type:"module"},e),(e=Me.get(n))&&Ns(t,e),u=l.createElement("script"),Xt(u),kt(u,"link",t),l.head.appendChild(u)),u={type:"script",instance:u,count:1,state:null},a.set(n,u))}}function Dd(t,e,l,a){var n=(n=tt.current)?Iu(n):null;if(!n)throw Error(s(446));switch(t){case"meta":case"title":return null;case"style":return typeof l.precedence=="string"&&typeof l.href=="string"?(e=wa(l.href),l=ca(n).hoistableStyles,a=l.get(e),a||(a={type:"style",instance:null,count:0,state:null},l.set(e,a)),a):{type:"void",instance:null,count:0,state:null};case"link":if(l.rel==="stylesheet"&&typeof l.href=="string"&&typeof l.precedence=="string"){t=wa(l.href);var u=ca(n).hoistableStyles,i=u.get(t);if(i||(n=n.ownerDocument||n,i={type:"stylesheet",instance:null,count:0,state:{loading:0,preload:null}},u.set(t,i),(u=n.querySelector(Un(t)))&&!u._p&&(i.instance=u,i.state.loading=5),Me.has(t)||(l={rel:"preload",as:"style",href:l.href,crossOrigin:l.crossOrigin,integrity:l.integrity,media:l.media,hrefLang:l.hrefLang,referrerPolicy:l.referrerPolicy},Me.set(t,l),u||qv(n,t,l,i.state))),e&&a===null)throw Error(s(528,""));return i}if(e&&a!==null)throw Error(s(529,""));return null;case"script":return e=l.async,l=l.src,typeof l=="string"&&e&&typeof e!="function"&&typeof e!="symbol"?(e=Ya(l),l=ca(n).hoistableScripts,a=l.get(e),a||(a={type:"script",instance:null,count:0,state:null},l.set(e,a)),a):{type:"void",instance:null,count:0,state:null};default:throw Error(s(444,t))}}function wa(t){return'href="'+Te(t)+'"'}function Un(t){return'link[rel="stylesheet"]['+t+"]"}function jd(t){return j({},t,{"data-precedence":t.precedence,precedence:null})}function qv(t,e,l,a){t.querySelector('link[rel="preload"][as="style"]['+e+"]")?a.loading=1:(e=t.createElement("link"),a.preload=e,e.addEventListener("load",function(){return a.loading|=1}),e.addEventListener("error",function(){return a.loading|=2}),kt(e,"link",l),Xt(e),t.head.appendChild(e))}function Ya(t){return'[src="'+Te(t)+'"]'}function Hn(t){return"script[async]"+t}function Ud(t,e,l){if(e.count++,e.instance===null)switch(e.type){case"style":var a=t.querySelector('style[data-href~="'+Te(l.href)+'"]');if(a)return e.instance=a,Xt(a),a;var n=j({},l,{"data-href":l.href,"data-precedence":l.precedence,href:null,precedence:null});return a=(t.ownerDocument||t).createElement("style"),Xt(a),kt(a,"style",n),Pu(a,l.precedence,t),e.instance=a;case"stylesheet":n=wa(l.href);var u=t.querySelector(Un(n));if(u)return e.state.loading|=4,e.instance=u,Xt(u),u;a=jd(l),(n=Me.get(n))&&Ts(a,n),u=(t.ownerDocument||t).createElement("link"),Xt(u);var i=u;return i._p=new Promise(function(f,d){i.onload=f,i.onerror=d}),kt(u,"link",a),e.state.loading|=4,Pu(u,l.precedence,t),e.instance=u;case"script":return u=Ya(l.src),(n=t.querySelector(Hn(u)))?(e.instance=n,Xt(n),n):(a=l,(n=Me.get(u))&&(a=j({},l),Ns(a,n)),t=t.ownerDocument||t,n=t.createElement("script"),Xt(n),kt(n,"link",a),t.head.appendChild(n),e.instance=n);case"void":return null;default:throw Error(s(443,e.type))}else e.type==="stylesheet"&&(e.state.loading&4)===0&&(a=e.instance,e.state.loading|=4,Pu(a,l.precedence,t));return e.instance}function Pu(t,e,l){for(var a=l.querySelectorAll('link[rel="stylesheet"][data-precedence],style[data-precedence]'),n=a.length?a[a.length-1]:null,u=n,i=0;i<a.length;i++){var f=a[i];if(f.dataset.precedence===e)u=f;else if(u!==n)break}u?u.parentNode.insertBefore(t,u.nextSibling):(e=l.nodeType===9?l.head:l,e.insertBefore(t,e.firstChild))}function Ts(t,e){t.crossOrigin==null&&(t.crossOrigin=e.crossOrigin),t.referrerPolicy==null&&(t.referrerPolicy=e.referrerPolicy),t.title==null&&(t.title=e.title)}function Ns(t,e){t.crossOrigin==null&&(t.crossOrigin=e.crossOrigin),t.referrerPolicy==null&&(t.referrerPolicy=e.referrerPolicy),t.integrity==null&&(t.integrity=e.integrity)}var ti=null;function Hd(t,e,l){if(ti===null){var a=new Map,n=ti=new Map;n.set(l,a)}else n=ti,a=n.get(l),a||(a=new Map,n.set(l,a));if(a.has(t))return a;for(a.set(t,null),l=l.getElementsByTagName(t),n=0;n<l.length;n++){var u=l[n];if(!(u[Wa]||u[Zt]||t==="link"&&u.getAttribute("rel")==="stylesheet")&&u.namespaceURI!=="http://www.w3.org/2000/svg"){var i=u.getAttribute(e)||"";i=t+i;var f=a.get(i);f?f.push(u):a.set(i,[u])}}return a}function Bd(t,e,l){t=t.ownerDocument||t,t.head.insertBefore(l,e==="title"?t.querySelector("head > title"):null)}function Gv(t,e,l){if(l===1||e.itemProp!=null)return!1;switch(t){case"meta":case"title":return!0;case"style":if(typeof e.precedence!="string"||typeof e.href!="string"||e.href==="")break;return!0;case"link":if(typeof e.rel!="string"||typeof e.href!="string"||e.href===""||e.onLoad||e.onError)break;switch(e.rel){case"stylesheet":return t=e.disabled,typeof e.precedence=="string"&&t==null;default:return!0}case"script":if(e.async&&typeof e.async!="function"&&typeof e.async!="symbol"&&!e.onLoad&&!e.onError&&e.src&&typeof e.src=="string")return!0}return!1}function qd(t){return!(t.type==="stylesheet"&&(t.state.loading&3)===0)}function wv(t,e,l,a){if(l.type==="stylesheet"&&(typeof a.media!="string"||matchMedia(a.media).matches!==!1)&&(l.state.loading&4)===0){if(l.instance===null){var n=wa(a.href),u=e.querySelector(Un(n));if(u){e=u._p,e!==null&&typeof e=="object"&&typeof e.then=="function"&&(t.count++,t=ei.bind(t),e.then(t,t)),l.state.loading|=4,l.instance=u,Xt(u);return}u=e.ownerDocument||e,a=jd(a),(n=Me.get(n))&&Ts(a,n),u=u.createElement("link"),Xt(u);var i=u;i._p=new Promise(function(f,d){i.onload=f,i.onerror=d}),kt(u,"link",a),l.instance=u}t.stylesheets===null&&(t.stylesheets=new Map),t.stylesheets.set(l,e),(e=l.state.preload)&&(l.state.loading&3)===0&&(t.count++,l=ei.bind(t),e.addEventListener("load",l),e.addEventListener("error",l))}}var As=0;function Yv(t,e){return t.stylesheets&&t.count===0&&ai(t,t.stylesheets),0<t.count||0<t.imgCount?function(l){var a=setTimeout(function(){if(t.stylesheets&&ai(t,t.stylesheets),t.unsuspend){var u=t.unsuspend;t.unsuspend=null,u()}},6e4+e);0<t.imgBytes&&As===0&&(As=62500*Sv());var n=setTimeout(function(){if(t.waitingForImages=!1,t.count===0&&(t.stylesheets&&ai(t,t.stylesheets),t.unsuspend)){var u=t.unsuspend;t.unsuspend=null,u()}},(t.imgBytes>As?50:800)+e);return t.unsuspend=l,function(){t.unsuspend=null,clearTimeout(a),clearTimeout(n)}}:null}function ei(){if(this.count--,this.count===0&&(this.imgCount===0||!this.waitingForImages)){if(this.stylesheets)ai(this,this.stylesheets);else if(this.unsuspend){var t=this.unsuspend;this.unsuspend=null,t()}}}var li=null;function ai(t,e){t.stylesheets=null,t.unsuspend!==null&&(t.count++,li=new Map,e.forEach(Xv,t),li=null,ei.call(t))}function Xv(t,e){if(!(e.state.loading&4)){var l=li.get(t);if(l)var a=l.get(null);else{l=new Map,li.set(t,l);for(var n=t.querySelectorAll("link[data-precedence],style[data-precedence]"),u=0;u<n.length;u++){var i=n[u];(i.nodeName==="LINK"||i.getAttribute("media")!=="not all")&&(l.set(i.dataset.precedence,i),a=i)}a&&l.set(null,a)}n=e.instance,i=n.getAttribute("data-precedence"),u=l.get(i)||a,u===a&&l.set(null,n),l.set(i,n),this.count++,a=ei.bind(this),n.addEventListener("load",a),n.addEventListener("error",a),u?u.parentNode.insertBefore(n,u.nextSibling):(t=t.nodeType===9?t.head:t,t.insertBefore(n,t.firstChild)),e.state.loading|=4}}var Bn={$$typeof:Rt,Provider:null,Consumer:null,_currentValue:K,_currentValue2:K,_threadCount:0};function Qv(t,e,l,a,n,u,i,f,d){this.tag=1,this.containerInfo=t,this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.next=this.pendingContext=this.context=this.cancelPendingCommit=null,this.callbackPriority=0,this.expirationTimes=Si(-1),this.entangledLanes=this.shellSuspendCounter=this.errorRecoveryDisabledLanes=this.expiredLanes=this.warmLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=Si(0),this.hiddenUpdates=Si(null),this.identifierPrefix=a,this.onUncaughtError=n,this.onCaughtError=u,this.onRecoverableError=i,this.pooledCache=null,this.pooledCacheLanes=0,this.formState=d,this.incompleteTransitions=new Map}function Gd(t,e,l,a,n,u,i,f,d,z,R,O){return t=new Qv(t,e,l,i,d,z,R,O,f),e=1,u===!0&&(e|=24),u=be(3,null,null,e),t.current=u,u.stateNode=t,e=nc(),e.refCount++,t.pooledCache=e,e.refCount++,u.memoizedState={element:a,isDehydrated:l,cache:e},sc(u),t}function wd(t){return t?(t=ga,t):ga}function Yd(t,e,l,a,n,u){n=wd(n),a.context===null?a.context=n:a.pendingContext=n,a=vl(e),a.payload={element:l},u=u===void 0?null:u,u!==null&&(a.callback=u),l=bl(t,a,e),l!==null&&(oe(l,t,e),yn(l,t,e))}function Xd(t,e){if(t=t.memoizedState,t!==null&&t.dehydrated!==null){var l=t.retryLane;t.retryLane=l!==0&&l<e?l:e}}function Es(t,e){Xd(t,e),(t=t.alternate)&&Xd(t,e)}function Qd(t){if(t.tag===13||t.tag===31){var e=Kl(t,67108864);e!==null&&oe(e,t,67108864),Es(t,67108864)}}function Kd(t){if(t.tag===13||t.tag===31){var e=ze();e=zi(e);var l=Kl(t,e);l!==null&&oe(l,t,e),Es(t,e)}}var ni=!0;function Kv(t,e,l,a){var n=E.T;E.T=null;var u=D.p;try{D.p=2,Rs(t,e,l,a)}finally{D.p=u,E.T=n}}function Vv(t,e,l,a){var n=E.T;E.T=null;var u=D.p;try{D.p=8,Rs(t,e,l,a)}finally{D.p=u,E.T=n}}function Rs(t,e,l,a){if(ni){var n=Cs(a);if(n===null)ms(t,e,a,ui,l),Zd(t,a);else if(Lv(n,t,e,l,a))a.stopPropagation();else if(Zd(t,a),e&4&&-1<Zv.indexOf(t)){for(;n!==null;){var u=ia(n);if(u!==null)switch(u.tag){case 3:if(u=u.stateNode,u.current.memoizedState.isDehydrated){var i=Gl(u.pendingLanes);if(i!==0){var f=u;for(f.pendingLanes|=2,f.entangledLanes|=2;i;){var d=1<<31-ye(i);f.entanglements[1]|=d,i&=~d}Xe(u),(dt&6)===0&&(Xu=de()+500,On(0))}}break;case 31:case 13:f=Kl(u,2),f!==null&&oe(f,u,2),Ku(),Es(u,2)}if(u=Cs(a),u===null&&ms(t,e,a,ui,l),u===n)break;n=u}n!==null&&a.stopPropagation()}else ms(t,e,a,null,l)}}function Cs(t){return t=Oi(t),_s(t)}var ui=null;function _s(t){if(ui=null,t=ua(t),t!==null){var e=m(t);if(e===null)t=null;else{var l=e.tag;if(l===13){if(t=g(e),t!==null)return t;t=null}else if(l===31){if(t=T(e),t!==null)return t;t=null}else if(l===3){if(e.stateNode.current.memoizedState.isDehydrated)return e.tag===3?e.stateNode.containerInfo:null;t=null}else e!==t&&(t=null)}}return ui=t,null}function Vd(t){switch(t){case"beforetoggle":case"cancel":case"click":case"close":case"contextmenu":case"copy":case"cut":case"auxclick":case"dblclick":case"dragend":case"dragstart":case"drop":case"focusin":case"focusout":case"input":case"invalid":case"keydown":case"keypress":case"keyup":case"mousedown":case"mouseup":case"paste":case"pause":case"play":case"pointercancel":case"pointerdown":case"pointerup":case"ratechange":case"reset":case"resize":case"seeked":case"submit":case"toggle":case"touchcancel":case"touchend":case"touchstart":case"volumechange":case"change":case"selectionchange":case"textInput":case"compositionstart":case"compositionend":case"compositionupdate":case"beforeblur":case"afterblur":case"beforeinput":case"blur":case"fullscreenchange":case"focus":case"hashchange":case"popstate":case"select":case"selectstart":return 2;case"drag":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"mousemove":case"mouseout":case"mouseover":case"pointermove":case"pointerout":case"pointerover":case"scroll":case"touchmove":case"wheel":case"mouseenter":case"mouseleave":case"pointerenter":case"pointerleave":return 8;case"message":switch(Om()){case Ws:return 2;case Fs:return 8;case $n:case Mm:return 32;case Is:return 268435456;default:return 32}default:return 32}}var Os=!1,Rl=null,Cl=null,_l=null,qn=new Map,Gn=new Map,Ol=[],Zv="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset".split(" ");function Zd(t,e){switch(t){case"focusin":case"focusout":Rl=null;break;case"dragenter":case"dragleave":Cl=null;break;case"mouseover":case"mouseout":_l=null;break;case"pointerover":case"pointerout":qn.delete(e.pointerId);break;case"gotpointercapture":case"lostpointercapture":Gn.delete(e.pointerId)}}function wn(t,e,l,a,n,u){return t===null||t.nativeEvent!==u?(t={blockedOn:e,domEventName:l,eventSystemFlags:a,nativeEvent:u,targetContainers:[n]},e!==null&&(e=ia(e),e!==null&&Qd(e)),t):(t.eventSystemFlags|=a,e=t.targetContainers,n!==null&&e.indexOf(n)===-1&&e.push(n),t)}function Lv(t,e,l,a,n){switch(e){case"focusin":return Rl=wn(Rl,t,e,l,a,n),!0;case"dragenter":return Cl=wn(Cl,t,e,l,a,n),!0;case"mouseover":return _l=wn(_l,t,e,l,a,n),!0;case"pointerover":var u=n.pointerId;return qn.set(u,wn(qn.get(u)||null,t,e,l,a,n)),!0;case"gotpointercapture":return u=n.pointerId,Gn.set(u,wn(Gn.get(u)||null,t,e,l,a,n)),!0}return!1}function Ld(t){var e=ua(t.target);if(e!==null){var l=m(e);if(l!==null){if(e=l.tag,e===13){if(e=g(l),e!==null){t.blockedOn=e,nf(t.priority,function(){Kd(l)});return}}else if(e===31){if(e=T(l),e!==null){t.blockedOn=e,nf(t.priority,function(){Kd(l)});return}}else if(e===3&&l.stateNode.current.memoizedState.isDehydrated){t.blockedOn=l.tag===3?l.stateNode.containerInfo:null;return}}}t.blockedOn=null}function ii(t){if(t.blockedOn!==null)return!1;for(var e=t.targetContainers;0<e.length;){var l=Cs(t.nativeEvent);if(l===null){l=t.nativeEvent;var a=new l.constructor(l.type,l);_i=a,l.target.dispatchEvent(a),_i=null}else return e=ia(l),e!==null&&Qd(e),t.blockedOn=l,!1;e.shift()}return!0}function Jd(t,e,l){ii(t)&&l.delete(e)}function Jv(){Os=!1,Rl!==null&&ii(Rl)&&(Rl=null),Cl!==null&&ii(Cl)&&(Cl=null),_l!==null&&ii(_l)&&(_l=null),qn.forEach(Jd),Gn.forEach(Jd)}function ci(t,e){t.blockedOn===e&&(t.blockedOn=null,Os||(Os=!0,c.unstable_scheduleCallback(c.unstable_NormalPriority,Jv)))}var si=null;function $d(t){si!==t&&(si=t,c.unstable_scheduleCallback(c.unstable_NormalPriority,function(){si===t&&(si=null);for(var e=0;e<t.length;e+=3){var l=t[e],a=t[e+1],n=t[e+2];if(typeof a!="function"){if(_s(a||l)===null)continue;break}var u=ia(l);u!==null&&(t.splice(e,3),e-=3,Cc(u,{pending:!0,data:n,method:l.method,action:a},a,n))}}))}function Xa(t){function e(d){return ci(d,t)}Rl!==null&&ci(Rl,t),Cl!==null&&ci(Cl,t),_l!==null&&ci(_l,t),qn.forEach(e),Gn.forEach(e);for(var l=0;l<Ol.length;l++){var a=Ol[l];a.blockedOn===t&&(a.blockedOn=null)}for(;0<Ol.length&&(l=Ol[0],l.blockedOn===null);)Ld(l),l.blockedOn===null&&Ol.shift();if(l=(t.ownerDocument||t).$$reactFormReplay,l!=null)for(a=0;a<l.length;a+=3){var n=l[a],u=l[a+1],i=n[ne]||null;if(typeof u=="function")i||$d(l);else if(i){var f=null;if(u&&u.hasAttribute("formAction")){if(n=u,i=u[ne]||null)f=i.formAction;else if(_s(n)!==null)continue}else f=i.action;typeof f=="function"?l[a+1]=f:(l.splice(a,3),a-=3),$d(l)}}}function kd(){function t(u){u.canIntercept&&u.info==="react-transition"&&u.intercept({handler:function(){return new Promise(function(i){return n=i})},focusReset:"manual",scroll:"manual"})}function e(){n!==null&&(n(),n=null),a||setTimeout(l,20)}function l(){if(!a&&!navigation.transition){var u=navigation.currentEntry;u&&u.url!=null&&navigation.navigate(u.url,{state:u.getState(),info:"react-transition",history:"replace"})}}if(typeof navigation=="object"){var a=!1,n=null;return navigation.addEventListener("navigate",t),navigation.addEventListener("navigatesuccess",e),navigation.addEventListener("navigateerror",e),setTimeout(l,100),function(){a=!0,navigation.removeEventListener("navigate",t),navigation.removeEventListener("navigatesuccess",e),navigation.removeEventListener("navigateerror",e),n!==null&&(n(),n=null)}}}function Ms(t){this._internalRoot=t}fi.prototype.render=Ms.prototype.render=function(t){var e=this._internalRoot;if(e===null)throw Error(s(409));var l=e.current,a=ze();Yd(l,a,t,e,null,null)},fi.prototype.unmount=Ms.prototype.unmount=function(){var t=this._internalRoot;if(t!==null){this._internalRoot=null;var e=t.containerInfo;Yd(t.current,2,null,t,null,null),Ku(),e[na]=null}};function fi(t){this._internalRoot=t}fi.prototype.unstable_scheduleHydration=function(t){if(t){var e=af();t={blockedOn:null,target:t,priority:e};for(var l=0;l<Ol.length&&e!==0&&e<Ol[l].priority;l++);Ol.splice(l,0,t),l===0&&Ld(t)}};var Wd=r.version;if(Wd!=="19.2.7")throw Error(s(527,Wd,"19.2.7"));D.findDOMNode=function(t){var e=t._reactInternals;if(e===void 0)throw typeof t.render=="function"?Error(s(188)):(t=Object.keys(t).join(","),Error(s(268,t)));return t=p(e),t=t!==null?H(t):null,t=t===null?null:t.stateNode,t};var $v={bundleType:0,version:"19.2.7",rendererPackageName:"react-dom",currentDispatcherRef:E,reconcilerVersion:"19.2.7"};if(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"){var oi=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!oi.isDisabled&&oi.supportsFiber)try{Ja=oi.inject($v),me=oi}catch{}}return Xn.createRoot=function(t,e){if(!y(t))throw Error(s(299));var l=!1,a="",n=ar,u=nr,i=ur;return e!=null&&(e.unstable_strictMode===!0&&(l=!0),e.identifierPrefix!==void 0&&(a=e.identifierPrefix),e.onUncaughtError!==void 0&&(n=e.onUncaughtError),e.onCaughtError!==void 0&&(u=e.onCaughtError),e.onRecoverableError!==void 0&&(i=e.onRecoverableError)),e=Gd(t,1,!1,null,null,l,a,null,n,u,i,kd),t[na]=e.current,ds(t),new Ms(e)},Xn.hydrateRoot=function(t,e,l){if(!y(t))throw Error(s(299));var a=!1,n="",u=ar,i=nr,f=ur,d=null;return l!=null&&(l.unstable_strictMode===!0&&(a=!0),l.identifierPrefix!==void 0&&(n=l.identifierPrefix),l.onUncaughtError!==void 0&&(u=l.onUncaughtError),l.onCaughtError!==void 0&&(i=l.onCaughtError),l.onRecoverableError!==void 0&&(f=l.onRecoverableError),l.formState!==void 0&&(d=l.formState)),e=Gd(t,1,!0,e,l??null,a,n,d,u,i,f,kd),e.context=wd(null),l=e.current,a=ze(),a=zi(a),n=vl(a),n.callback=null,bl(l,n,a),l=a,e.current.lanes=l,ka(e,l),Xe(e),t[na]=e.current,ds(t),new fi(e)},Xn.version="19.2.7",Xn}var im;function nb(){if(im)return Us.exports;im=1;function c(){if(!(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__>"u"||typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE!="function"))try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(c)}catch(r){console.error(r)}}return c(),Us.exports=ab(),Us.exports}var ub=nb();function dm(c){var r,o,s="";if(typeof c=="string"||typeof c=="number")s+=c;else if(typeof c=="object")if(Array.isArray(c)){var y=c.length;for(r=0;r<y;r++)c[r]&&(o=dm(c[r]))&&(s&&(s+=" "),s+=o)}else for(o in c)c[o]&&(s&&(s+=" "),s+=o);return s}function ib(){for(var c,r,o=0,s="",y=arguments.length;o<y;o++)(c=arguments[o])&&(r=dm(c))&&(s&&(s+=" "),s+=r);return s}const Ls="-",cb=c=>{const r=fb(c),{conflictingClassGroups:o,conflictingClassGroupModifiers:s}=c;return{getClassGroupId:g=>{const T=g.split(Ls);return T[0]===""&&T.length!==1&&T.shift(),mm(T,r)||sb(g)},getConflictingClassGroupIds:(g,T)=>{const N=o[g]||[];return T&&s[g]?[...N,...s[g]]:N}}},mm=(c,r)=>{var g;if(c.length===0)return r.classGroupId;const o=c[0],s=r.nextPart.get(o),y=s?mm(c.slice(1),s):void 0;if(y)return y;if(r.validators.length===0)return;const m=c.join(Ls);return(g=r.validators.find(({validator:T})=>T(m)))==null?void 0:g.classGroupId},cm=/^\[(.+)\]$/,sb=c=>{if(cm.test(c)){const r=cm.exec(c)[1],o=r==null?void 0:r.substring(0,r.indexOf(":"));if(o)return"arbitrary.."+o}},fb=c=>{const{theme:r,prefix:o}=c,s={nextPart:new Map,validators:[]};return rb(Object.entries(c.classGroups),o).forEach(([m,g])=>{ws(g,s,m,r)}),s},ws=(c,r,o,s)=>{c.forEach(y=>{if(typeof y=="string"){const m=y===""?r:sm(r,y);m.classGroupId=o;return}if(typeof y=="function"){if(ob(y)){ws(y(s),r,o,s);return}r.validators.push({validator:y,classGroupId:o});return}Object.entries(y).forEach(([m,g])=>{ws(g,sm(r,m),o,s)})})},sm=(c,r)=>{let o=c;return r.split(Ls).forEach(s=>{o.nextPart.has(s)||o.nextPart.set(s,{nextPart:new Map,validators:[]}),o=o.nextPart.get(s)}),o},ob=c=>c.isThemeGetter,rb=(c,r)=>r?c.map(([o,s])=>{const y=s.map(m=>typeof m=="string"?r+m:typeof m=="object"?Object.fromEntries(Object.entries(m).map(([g,T])=>[r+g,T])):m);return[o,y]}):c,db=c=>{if(c<1)return{get:()=>{},set:()=>{}};let r=0,o=new Map,s=new Map;const y=(m,g)=>{o.set(m,g),r++,r>c&&(r=0,s=o,o=new Map)};return{get(m){let g=o.get(m);if(g!==void 0)return g;if((g=s.get(m))!==void 0)return y(m,g),g},set(m,g){o.has(m)?o.set(m,g):y(m,g)}}},ym="!",mb=c=>{const{separator:r,experimentalParseClassName:o}=c,s=r.length===1,y=r[0],m=r.length,g=T=>{const N=[];let p=0,H=0,j;for(let $=0;$<T.length;$++){let mt=T[$];if(p===0){if(mt===y&&(s||T.slice($,$+m)===r)){N.push(T.slice(H,$)),H=$+m;continue}if(mt==="/"){j=$;continue}}mt==="["?p++:mt==="]"&&p--}const Q=N.length===0?T:T.substring(H),at=Q.startsWith(ym),ft=at?Q.substring(1):Q,nt=j&&j>H?j-H:void 0;return{modifiers:N,hasImportantModifier:at,baseClassName:ft,maybePostfixModifierPosition:nt}};return o?T=>o({className:T,parseClassName:g}):g},yb=c=>{if(c.length<=1)return c;const r=[];let o=[];return c.forEach(s=>{s[0]==="["?(r.push(...o.sort(),s),o=[]):o.push(s)}),r.push(...o.sort()),r},vb=c=>({cache:db(c.cacheSize),parseClassName:mb(c),...cb(c)}),bb=/\s+/,gb=(c,r)=>{const{parseClassName:o,getClassGroupId:s,getConflictingClassGroupIds:y}=r,m=[],g=c.trim().split(bb);let T="";for(let N=g.length-1;N>=0;N-=1){const p=g[N],{modifiers:H,hasImportantModifier:j,baseClassName:Q,maybePostfixModifierPosition:at}=o(p);let ft=!!at,nt=s(ft?Q.substring(0,at):Q);if(!nt){if(!ft){T=p+(T.length>0?" "+T:T);continue}if(nt=s(Q),!nt){T=p+(T.length>0?" "+T:T);continue}ft=!1}const $=yb(H).join(":"),mt=j?$+ym:$,Ot=mt+nt;if(m.includes(Ot))continue;m.push(Ot);const Rt=y(nt,ft);for(let Ut=0;Ut<Rt.length;++Ut){const Ft=Rt[Ut];m.push(mt+Ft)}T=p+(T.length>0?" "+T:T)}return T};function hb(){let c=0,r,o,s="";for(;c<arguments.length;)(r=arguments[c++])&&(o=vm(r))&&(s&&(s+=" "),s+=o);return s}const vm=c=>{if(typeof c=="string")return c;let r,o="";for(let s=0;s<c.length;s++)c[s]&&(r=vm(c[s]))&&(o&&(o+=" "),o+=r);return o};function pb(c,...r){let o,s,y,m=g;function g(N){const p=r.reduce((H,j)=>j(H),c());return o=vb(p),s=o.cache.get,y=o.cache.set,m=T,T(N)}function T(N){const p=s(N);if(p)return p;const H=gb(N,o);return y(N,H),H}return function(){return m(hb.apply(null,arguments))}}const At=c=>{const r=o=>o[c]||[];return r.isThemeGetter=!0,r},bm=/^\[(?:([a-z-]+):)?(.+)\]$/i,Sb=/^\d+\/\d+$/,zb=new Set(["px","full","screen"]),xb=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,Tb=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,Nb=/^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/,Ab=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,Eb=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,il=c=>Ka(c)||zb.has(c)||Sb.test(c),Dl=c=>Za(c,"length",Ub),Ka=c=>!!c&&!Number.isNaN(Number(c)),Gs=c=>Za(c,"number",Ka),Qn=c=>!!c&&Number.isInteger(Number(c)),Rb=c=>c.endsWith("%")&&Ka(c.slice(0,-1)),W=c=>bm.test(c),jl=c=>xb.test(c),Cb=new Set(["length","size","percentage"]),_b=c=>Za(c,Cb,gm),Ob=c=>Za(c,"position",gm),Mb=new Set(["image","url"]),Db=c=>Za(c,Mb,Bb),jb=c=>Za(c,"",Hb),Kn=()=>!0,Za=(c,r,o)=>{const s=bm.exec(c);return s?s[1]?typeof r=="string"?s[1]===r:r.has(s[1]):o(s[2]):!1},Ub=c=>Tb.test(c)&&!Nb.test(c),gm=()=>!1,Hb=c=>Ab.test(c),Bb=c=>Eb.test(c),qb=()=>{const c=At("colors"),r=At("spacing"),o=At("blur"),s=At("brightness"),y=At("borderColor"),m=At("borderRadius"),g=At("borderSpacing"),T=At("borderWidth"),N=At("contrast"),p=At("grayscale"),H=At("hueRotate"),j=At("invert"),Q=At("gap"),at=At("gradientColorStops"),ft=At("gradientColorStopPositions"),nt=At("inset"),$=At("margin"),mt=At("opacity"),Ot=At("padding"),Rt=At("saturate"),Ut=At("scale"),Ft=At("sepia"),Kt=At("skew"),P=At("space"),Vt=At("translate"),te=()=>["auto","contain","none"],Be=()=>["auto","hidden","clip","visible","scroll"],ee=()=>["auto",W,r],I=()=>[W,r],qe=()=>["",il,Dl],le=()=>["auto",Ka,W],ae=()=>["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],E=()=>["solid","dashed","dotted","double","none"],D=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],K=()=>["start","end","center","between","around","evenly","stretch"],st=()=>["","0",W],yt=()=>["auto","avoid","all","avoid-page","page","left","right","column"],v=()=>[Ka,W];return{cacheSize:500,separator:":",theme:{colors:[Kn],spacing:[il,Dl],blur:["none","",jl,W],brightness:v(),borderColor:[c],borderRadius:["none","","full",jl,W],borderSpacing:I(),borderWidth:qe(),contrast:v(),grayscale:st(),hueRotate:v(),invert:st(),gap:I(),gradientColorStops:[c],gradientColorStopPositions:[Rb,Dl],inset:ee(),margin:ee(),opacity:v(),padding:I(),saturate:v(),scale:v(),sepia:st(),skew:v(),space:I(),translate:I()},classGroups:{aspect:[{aspect:["auto","square","video",W]}],container:["container"],columns:[{columns:[jl]}],"break-after":[{"break-after":yt()}],"break-before":[{"break-before":yt()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[...ae(),W]}],overflow:[{overflow:Be()}],"overflow-x":[{"overflow-x":Be()}],"overflow-y":[{"overflow-y":Be()}],overscroll:[{overscroll:te()}],"overscroll-x":[{"overscroll-x":te()}],"overscroll-y":[{"overscroll-y":te()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[nt]}],"inset-x":[{"inset-x":[nt]}],"inset-y":[{"inset-y":[nt]}],start:[{start:[nt]}],end:[{end:[nt]}],top:[{top:[nt]}],right:[{right:[nt]}],bottom:[{bottom:[nt]}],left:[{left:[nt]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",Qn,W]}],basis:[{basis:ee()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",W]}],grow:[{grow:st()}],shrink:[{shrink:st()}],order:[{order:["first","last","none",Qn,W]}],"grid-cols":[{"grid-cols":[Kn]}],"col-start-end":[{col:["auto",{span:["full",Qn,W]},W]}],"col-start":[{"col-start":le()}],"col-end":[{"col-end":le()}],"grid-rows":[{"grid-rows":[Kn]}],"row-start-end":[{row:["auto",{span:[Qn,W]},W]}],"row-start":[{"row-start":le()}],"row-end":[{"row-end":le()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",W]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",W]}],gap:[{gap:[Q]}],"gap-x":[{"gap-x":[Q]}],"gap-y":[{"gap-y":[Q]}],"justify-content":[{justify:["normal",...K()]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal",...K(),"baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[...K(),"baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[Ot]}],px:[{px:[Ot]}],py:[{py:[Ot]}],ps:[{ps:[Ot]}],pe:[{pe:[Ot]}],pt:[{pt:[Ot]}],pr:[{pr:[Ot]}],pb:[{pb:[Ot]}],pl:[{pl:[Ot]}],m:[{m:[$]}],mx:[{mx:[$]}],my:[{my:[$]}],ms:[{ms:[$]}],me:[{me:[$]}],mt:[{mt:[$]}],mr:[{mr:[$]}],mb:[{mb:[$]}],ml:[{ml:[$]}],"space-x":[{"space-x":[P]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[P]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit","svw","lvw","dvw",W,r]}],"min-w":[{"min-w":[W,r,"min","max","fit"]}],"max-w":[{"max-w":[W,r,"none","full","min","max","fit","prose",{screen:[jl]},jl]}],h:[{h:[W,r,"auto","min","max","fit","svh","lvh","dvh"]}],"min-h":[{"min-h":[W,r,"min","max","fit","svh","lvh","dvh"]}],"max-h":[{"max-h":[W,r,"min","max","fit","svh","lvh","dvh"]}],size:[{size:[W,r,"auto","min","max","fit"]}],"font-size":[{text:["base",jl,Dl]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",Gs]}],"font-family":[{font:[Kn]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",W]}],"line-clamp":[{"line-clamp":["none",Ka,Gs]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",il,W]}],"list-image":[{"list-image":["none",W]}],"list-style-type":[{list:["none","disc","decimal",W]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[c]}],"placeholder-opacity":[{"placeholder-opacity":[mt]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[c]}],"text-opacity":[{"text-opacity":[mt]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...E(),"wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",il,Dl]}],"underline-offset":[{"underline-offset":["auto",il,W]}],"text-decoration-color":[{decoration:[c]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:I()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",W]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",W]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[mt]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[...ae(),Ob]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",_b]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},Db]}],"bg-color":[{bg:[c]}],"gradient-from-pos":[{from:[ft]}],"gradient-via-pos":[{via:[ft]}],"gradient-to-pos":[{to:[ft]}],"gradient-from":[{from:[at]}],"gradient-via":[{via:[at]}],"gradient-to":[{to:[at]}],rounded:[{rounded:[m]}],"rounded-s":[{"rounded-s":[m]}],"rounded-e":[{"rounded-e":[m]}],"rounded-t":[{"rounded-t":[m]}],"rounded-r":[{"rounded-r":[m]}],"rounded-b":[{"rounded-b":[m]}],"rounded-l":[{"rounded-l":[m]}],"rounded-ss":[{"rounded-ss":[m]}],"rounded-se":[{"rounded-se":[m]}],"rounded-ee":[{"rounded-ee":[m]}],"rounded-es":[{"rounded-es":[m]}],"rounded-tl":[{"rounded-tl":[m]}],"rounded-tr":[{"rounded-tr":[m]}],"rounded-br":[{"rounded-br":[m]}],"rounded-bl":[{"rounded-bl":[m]}],"border-w":[{border:[T]}],"border-w-x":[{"border-x":[T]}],"border-w-y":[{"border-y":[T]}],"border-w-s":[{"border-s":[T]}],"border-w-e":[{"border-e":[T]}],"border-w-t":[{"border-t":[T]}],"border-w-r":[{"border-r":[T]}],"border-w-b":[{"border-b":[T]}],"border-w-l":[{"border-l":[T]}],"border-opacity":[{"border-opacity":[mt]}],"border-style":[{border:[...E(),"hidden"]}],"divide-x":[{"divide-x":[T]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[T]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[mt]}],"divide-style":[{divide:E()}],"border-color":[{border:[y]}],"border-color-x":[{"border-x":[y]}],"border-color-y":[{"border-y":[y]}],"border-color-s":[{"border-s":[y]}],"border-color-e":[{"border-e":[y]}],"border-color-t":[{"border-t":[y]}],"border-color-r":[{"border-r":[y]}],"border-color-b":[{"border-b":[y]}],"border-color-l":[{"border-l":[y]}],"divide-color":[{divide:[y]}],"outline-style":[{outline:["",...E()]}],"outline-offset":[{"outline-offset":[il,W]}],"outline-w":[{outline:[il,Dl]}],"outline-color":[{outline:[c]}],"ring-w":[{ring:qe()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[c]}],"ring-opacity":[{"ring-opacity":[mt]}],"ring-offset-w":[{"ring-offset":[il,Dl]}],"ring-offset-color":[{"ring-offset":[c]}],shadow:[{shadow:["","inner","none",jl,jb]}],"shadow-color":[{shadow:[Kn]}],opacity:[{opacity:[mt]}],"mix-blend":[{"mix-blend":[...D(),"plus-lighter","plus-darker"]}],"bg-blend":[{"bg-blend":D()}],filter:[{filter:["","none"]}],blur:[{blur:[o]}],brightness:[{brightness:[s]}],contrast:[{contrast:[N]}],"drop-shadow":[{"drop-shadow":["","none",jl,W]}],grayscale:[{grayscale:[p]}],"hue-rotate":[{"hue-rotate":[H]}],invert:[{invert:[j]}],saturate:[{saturate:[Rt]}],sepia:[{sepia:[Ft]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[o]}],"backdrop-brightness":[{"backdrop-brightness":[s]}],"backdrop-contrast":[{"backdrop-contrast":[N]}],"backdrop-grayscale":[{"backdrop-grayscale":[p]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[H]}],"backdrop-invert":[{"backdrop-invert":[j]}],"backdrop-opacity":[{"backdrop-opacity":[mt]}],"backdrop-saturate":[{"backdrop-saturate":[Rt]}],"backdrop-sepia":[{"backdrop-sepia":[Ft]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[g]}],"border-spacing-x":[{"border-spacing-x":[g]}],"border-spacing-y":[{"border-spacing-y":[g]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",W]}],duration:[{duration:v()}],ease:[{ease:["linear","in","out","in-out",W]}],delay:[{delay:v()}],animate:[{animate:["none","spin","ping","pulse","bounce",W]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[Ut]}],"scale-x":[{"scale-x":[Ut]}],"scale-y":[{"scale-y":[Ut]}],rotate:[{rotate:[Qn,W]}],"translate-x":[{"translate-x":[Vt]}],"translate-y":[{"translate-y":[Vt]}],"skew-x":[{"skew-x":[Kt]}],"skew-y":[{"skew-y":[Kt]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",W]}],accent:[{accent:["auto",c]}],appearance:[{appearance:["none","auto"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",W]}],"caret-color":[{caret:[c]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":I()}],"scroll-mx":[{"scroll-mx":I()}],"scroll-my":[{"scroll-my":I()}],"scroll-ms":[{"scroll-ms":I()}],"scroll-me":[{"scroll-me":I()}],"scroll-mt":[{"scroll-mt":I()}],"scroll-mr":[{"scroll-mr":I()}],"scroll-mb":[{"scroll-mb":I()}],"scroll-ml":[{"scroll-ml":I()}],"scroll-p":[{"scroll-p":I()}],"scroll-px":[{"scroll-px":I()}],"scroll-py":[{"scroll-py":I()}],"scroll-ps":[{"scroll-ps":I()}],"scroll-pe":[{"scroll-pe":I()}],"scroll-pt":[{"scroll-pt":I()}],"scroll-pr":[{"scroll-pr":I()}],"scroll-pb":[{"scroll-pb":I()}],"scroll-pl":[{"scroll-pl":I()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",W]}],fill:[{fill:[c,"none"]}],"stroke-w":[{stroke:[il,Dl,Gs]}],stroke:[{stroke:[c,"none"]}],sr:["sr-only","not-sr-only"],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-s","border-color-e","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}},Gb=pb(qb);function G(...c){return Gb(ib(c))}const wb={BASE_URL:"/",DEV:!1,MODE:"production",PROD:!0,SSR:!1};function Ys(){try{const c=wb;if(c&&typeof c.DEV=="boolean")return c.DEV}catch{}return!1}function Yb(c){return{id:c.id,base:c.base,keys:c.keys,defaults:c.defaults??{},byKey:c.byKey}}function Xb(c,r,...o){const s=[];c.base.trim()!==""&&s.push(c.base.trim());for(const y of c.keys){const m=c.byKey[y];if(!m)continue;const g=(r[y]??"").trim(),T=(c.defaults[y]??"").trim(),N=g||T;if(!N){if(Ys()&&Object.keys(m).length>0)throw new Error(`[compose] missing default for key "${y}" (recipe id: ${String(c.id??"?")})`);continue}const p=m[N];if(p!==void 0)p.trim()!==""&&s.push(p.trim());else if(Ys())throw new Error(`[compose] unknown variant "${N}" for key "${y}" (recipe id: ${String(c.id??"?")})`)}return G(...s,...o)}function F(c,r,...o){return Xb(Yb(c),r,...o)}const zt={Layout:"Layout",BoxAllowed:"BoxAllowed",BlockText:"BlockText",Inline:"Inline",Heading:"Heading",List:"List",ListItem:"ListItem",Form:"Form",FormControl:"FormControl",FormLabel:"FormLabel",Table:"Table",TableSection:"TableSection",TableRow:"TableRow",TableCell:"TableCell",TableColumn:"TableColumn",Media:"Media",Disclosure:"Disclosure",Container:"Container",Stack:"Stack",Group:"Group",Text:"Text"},Qb=new Set(["div","section","article","aside","header","footer","main","nav","figure","search","hgroup"]),Kb=new Set(["div"]),fm=new Set(["p","blockquote","figcaption","address","pre"]),om=new Set(["span","em","strong","small","abbr","cite","code","kbd","mark","time","data","var","samp","sub","sup","b","i","u","s","q","dfn","bdo","bdi","ins","del"]),Vb=new Set(["h1","h2","h3","h4","h5","h6"]),Zb=new Set(["ul","ol","dl","menu"]),Lb=new Set(["li","dt","dd"]),Jb=new Set(["form","fieldset"]),$b=new Set(["input","textarea","select","button","option","optgroup","datalist","output","meter","progress"]),kb=new Set(["label","legend"]),Wb=new Set(["table"]),Fb=new Set(["thead","tbody","tfoot"]),Ib=new Set(["tr"]),Pb=new Set(["th","td"]),tg=new Set(["colgroup","col"]),eg=new Set(["img","picture","source"]),lg=new Set(["details","summary"]),ag=new Set(["div","main","section"]),ng=new Set(["div","ul","ol"]),ug=new Set(["div","fieldset","dl"]);function wt(c,r){return r.has(c)}const rm=new Set;function ig(c,r,o){if(!Ys())return;const s=`${o}:${c}:${r}`;rm.has(s)||(rm.add(s),console.warn(`[resolveTag] disallowed tag "${c}" for group "${o}", fallback "${r}" used.`))}function cg(c,r){const o=c.trim().toLowerCase();switch(r){case zt.Layout:return wt(o,Qb);case zt.BoxAllowed:return wt(o,Kb);case zt.BlockText:return wt(o,fm);case zt.Inline:return wt(o,om);case zt.Heading:return wt(o,Vb);case zt.List:return wt(o,Zb);case zt.ListItem:return wt(o,Lb);case zt.Form:return wt(o,Jb);case zt.FormControl:return wt(o,$b);case zt.FormLabel:return wt(o,kb);case zt.Table:return wt(o,Wb);case zt.TableSection:return wt(o,Fb);case zt.TableRow:return wt(o,Ib);case zt.TableCell:return wt(o,Pb);case zt.TableColumn:return wt(o,tg);case zt.Media:return wt(o,eg);case zt.Disclosure:return wt(o,lg);case zt.Container:return wt(o,ag);case zt.Stack:return wt(o,ng);case zt.Group:return wt(o,ug);case zt.Text:return fm.has(o)||om.has(o);default:return!1}}function la(c,r,o){const s=(c==null?void 0:c.trim().toLowerCase())??"";return s?cg(s,o)?s:(ig(s,r,o),r):r}const aa=c=>c==null?"":String(c).trim(),He=c=>aa(c)!=="",Hl=c=>(c??0)>0,Js=(c,r)=>{const o=aa(c);return o===""?r:o},Ul=(c,r,...o)=>{const s=aa(c);return o.includes(s)?s:r},sg=(c,r,...o)=>{const s=aa(c).toLowerCase();return o.includes(s)?s:r},hm=(c,r,o)=>r[aa(c)]??o,ri=(c,r,o)=>r[c??0]??o,Bl=(c,r)=>(c??"")===(r??""),fg=c=>c?"true":"false",og=(...c)=>c.map(aa).join(""),Va=c=>aa(c)===""?void 0:String(c),pm=c=>{switch(c){case 1:return"h1";case 3:return"h3";case 4:return"h4";case 5:return"h5";case 6:return"h6";default:return"h2"}},rg="ui.alert",dg="rounded-lg border px-4 py-3 shadow-sm outline-none ring-offset-background gap-6",mg=["variant"],yg={variant:"default"},vg={variant:{default:"bg-card text-card-foreground",destructive:"border-destructive bg-destructive/10 text-destructive",success:"border-primary bg-primary/10 text-primary",warning:"border-border bg-accent text-accent-foreground"}},bg={id:rg,base:dg,keys:mg,defaults:yg,byKey:vg},gg=bg;function hg(c={}){return G(F(gg,{variant:c.variant}),c.className)}function pg(...c){return r=>{for(const o of c)typeof o=="function"?o(r):o&&typeof o=="object"&&(o.current=r)}}function Sg(c,r){return c.startsWith("on")&&typeof r=="function"}const re=B.forwardRef(function({children:r,className:o,...s},y){const m=B.Children.toArray(r)[0];if(!B.isValidElement(m))return null;const g=m.props,T=g.ref,N={...g};for(const[H,j]of Object.entries(s))if(Sg(H,j)){const Q=j,at=g[H];typeof at=="function"?N[H]=(...ft)=>{at(...ft),Q(...ft)}:N[H]=Q}else j!==void 0&&(N[H]=j);const p=typeof g.className=="string"?g.className:void 0;return N.className=G(String(o??""),p),N.ref=pg(y,T),B.cloneElement(m,N)});re.displayName="Slot";const zg=B.forwardRef(function({variant:r,role:o,"aria-live":s,className:y,children:m,asChild:g,...T},N){const p=hg({variant:r,className:y});return g?C.jsx(re,{ref:N,className:p,...T,children:m}):C.jsx("div",{ref:N,className:p||void 0,role:Ul(o,"status","status","alert"),"aria-live":Js(s,"polite"),...T,children:m})});zg.displayName="Alert";const xg="inline-flex items-center rounded-full border px-2 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",Tg={size:{default:"px-2 py-1 text-xs",lg:"px-3 py-1 text-sm",sm:"px-2 py-1 text-xs"},variant:{default:"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",destructive:"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",outline:"text-foreground",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"}},Ng={size:"default",variant:"default"},Ag="ui.badge",Eg=["variant","size"],Rg={base:xg,byKey:Tg,defaults:Ng,id:Ag,keys:Eg},Cg=Rg;function _g(c={}){return G(F(Cg,{variant:c.variant,size:c.size}),c.className)}const Vn=B.forwardRef(function({variant:r,size:o,className:s,children:y,...m},g){const T=_g({variant:r,size:o,className:s});return C.jsx("div",{ref:g,className:T||void 0,...m,children:y})});Vn.displayName="Badge";const Og="",Mg={},Dg={},jg="ui.block",Ug=[],Hg={base:Og,byKey:Mg,defaults:Dg,id:jg,keys:Ug},Bg=Hg;function qg(c={}){return G(F(Bg,{}),c.className)}const Sm=B.forwardRef(function({tag:r,className:o,children:s,asChild:y,...m},g){const T=qg({className:o}),p=la(r,"div",zt.Layout);return y?C.jsx(re,{ref:g,className:T,...m,children:s}):C.jsx(p,{ref:g,className:T||void 0,...m,children:s})});Sm.displayName="Block";const Gg="",wg={},Yg={},Xg="ui.box",Qg=[],Kg={base:Gg,byKey:wg,defaults:Yg,id:Xg,keys:Qg},Vg=Kg;function Zg(c={}){return G(F(Vg,{}),c.className)}const zm=B.forwardRef(function({tag:r,className:o,children:s,asChild:y,...m},g){const T=Zg({className:o}),p=la(r,"div",zt.BoxAllowed);return y?C.jsx(re,{ref:g,className:T,...m,children:s}):C.jsx(p,{ref:g,className:T||void 0,...m,children:s})});zm.displayName="Box";function Lg(c={}){return G("text-sm",c.className)}const Jg=B.forwardRef(function({items:r,className:o,...s},y){const m=Lg({className:o});return C.jsx("nav",{ref:y,className:m||void 0,...s,children:C.jsx("ol",{className:"flex flex-wrap items-center gap-2",children:(r??[]).map((g,T)=>C.jsx("li",{className:"inline-flex items-center",children:He(g.href)&&!g.disabled?C.jsx("a",{href:Va(g.href),className:G("text-sm",g.current?"font-medium":g.disabled?"text-muted-foreground":"text-primary underline-offset-4 hover:underline")||void 0,"aria-current":g.current?"page":void 0,children:g.label}):C.jsx("span",{className:G("text-sm",g.current?"font-medium":g.disabled?"text-muted-foreground":"text-primary underline-offset-4 hover:underline")||void 0,"aria-current":g.current?"page":void 0,children:g.label})},T))})})});Jg.displayName="Breadcrumb";const $g="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",kg={size:{default:"h-10 px-4 py-2",icon:"h-10 w-10",lg:"h-12 rounded-md px-8",sm:"h-8 rounded-md px-3"},variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80"}},Wg={size:"default",variant:"default"},Fg="ui.button",Ig=["variant","size"],Pg={base:$g,byKey:kg,defaults:Wg,id:Fg,keys:Ig},t0=Pg;function e0(c={}){return G(F(t0,{variant:c.variant,size:c.size}),c.disabled?"pointer-events-none opacity-50":"",c.className)}const Qa=B.forwardRef(function({variant:r,size:o,type:s,disabled:y,className:m,children:g,asChild:T,...N},p){const H=e0({variant:r,size:o,disabled:y,className:m});return T?C.jsx(re,{ref:p,className:H,...N,children:g}):C.jsx("button",{ref:p,type:Ul(s,"button","submit","reset"),className:H||void 0,disabled:y||void 0,...N,children:g})});Qa.displayName="Button";const l0="ui.card",a0="rounded-md border border-border bg-card text-card-foreground shadow-sm",n0=["variant"],u0={variant:"default"},i0={variant:{default:"",raised:"",kpi:"bg-card/50",muted:"bg-muted/40",ghost:"border-dashed bg-background shadow-none",compact:"p-4",flat:"shadow-none",accent:"border-transparent bg-accent/30"}},c0={id:l0,base:a0,keys:n0,defaults:u0,byKey:i0},s0=c0;function f0(c={}){return G(F(s0,{variant:c.variant}),c.className)}function o0(c={}){return G("border-b border-border px-4 py-2",c.className)}function r0(c={}){return G("text-sm font-semibold",c.className)}function d0(c={}){return G("text-sm text-muted-foreground",c.className)}function m0(c={}){return G("p-4",c.className)}function y0(c={}){return G("border-t border-border px-4 py-3",c.className)}const Xs=B.forwardRef(function({variant:r,className:o,children:s,asChild:y,...m},g){const T=f0({variant:r,className:o});return y?C.jsx(re,{ref:g,className:T,...m,children:s}):C.jsx("div",{ref:g,className:T||void 0,...m,children:s})});Xs.displayName="Card";const Qs=B.forwardRef(function({className:r,children:o,...s},y){const m=o0({className:r});return C.jsx("div",{ref:y,className:m||void 0,...s,children:o})});Qs.displayName="CardHeader";const Ks=B.forwardRef(function({as:r,className:o,children:s,...y},m){const g=r0({className:o}),N=pm(r);return C.jsx(N,{ref:m,className:g||void 0,...y,children:s})});Ks.displayName="CardTitle";const v0=B.forwardRef(function({className:r,children:o,...s},y){const m=d0({className:r});return C.jsx("p",{ref:y,className:m||void 0,...s,children:o})});v0.displayName="CardDescription";const Vs=B.forwardRef(function({className:r,children:o,...s},y){const m=m0({className:r});return C.jsx("div",{ref:y,className:m||void 0,...s,children:o})});Vs.displayName="CardContent";const b0=B.forwardRef(function({className:r,children:o,...s},y){const m=y0({className:r});return C.jsx("div",{ref:y,className:m||void 0,...s,children:o})});b0.displayName="CardFooter";const g0="rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",h0={size:{default:"h-4 w-4",lg:"h-5 w-5",sm:"h-4 w-4",xs:"h-3 w-3"},variant:{default:"border-primary",ghost:"border-primary bg-muted/30",outline:"border-primary"}},p0={size:"default",variant:"default"},S0="ui.checkbox",z0=["variant","size"],x0={base:g0,byKey:h0,defaults:p0,id:S0,keys:z0},T0=x0;function N0(c={}){return G(F(T0,{variant:c.variant,size:c.size}),c.className)}const A0=B.forwardRef(function({variant:r,size:o,checked:s,disabled:y,required:m,className:g,...T},N){const p=N0({variant:r,size:o,className:g});return C.jsx("input",{ref:N,type:"checkbox",className:p||void 0,checked:s||void 0,disabled:y||void 0,required:m||void 0,...T})});A0.displayName="Checkbox";const E0="",R0={},C0={},_0="ui.container",O0=[],M0={base:E0,byKey:R0,defaults:C0,id:_0,keys:O0},D0=M0;function j0(c={}){return G(F(D0,{}),c.className)}const xm=B.forwardRef(function({tag:r,className:o,children:s,asChild:y,...m},g){const T=j0({className:o}),p=la(r,"div",zt.Container);return y?C.jsx(re,{ref:g,className:T,...m,children:s}):C.jsx(p,{ref:g,className:T||void 0,...m,children:s})});xm.displayName="Container";const U0="m-auto rounded-lg border border-border bg-background text-foreground shadow-lg backdrop:bg-background/80",H0={size:{default:"w-full max-w-lg",full:"h-full w-full max-w-none",lg:"w-full max-w-2xl",sm:"w-full max-w-sm",xl:"w-full max-w-4xl"},variant:{card:"bg-card text-card-foreground",default:"",sheet:"min-h-screen rounded-none"}},B0={size:"default",variant:"default"},q0="ui.dialog",G0=["variant","size"],w0={base:U0,byKey:H0,defaults:B0,id:q0,keys:G0},Y0=w0;function X0(c={}){return G(F(Y0,{variant:c.variant,size:c.size}),c.className)}const Q0=B.forwardRef(function({variant:r,size:o,open:s,className:y,children:m,...g},T){const N=X0({variant:r,size:o,className:y});return C.jsx("dialog",{ref:T,className:N||void 0,open:s||void 0,...g,children:m})});Q0.displayName="Dialog";const K0="group",V0={size:{default:"text-sm",lg:"text-base",sm:"text-sm"},variant:{card:"rounded-md border border-border bg-card text-card-foreground",default:"rounded-md border border-border",ghost:""}},Z0={size:"default",variant:"default"},L0="ui.disclosure",J0=["variant","size"],$0={base:K0,byKey:V0,defaults:Z0,id:L0,keys:J0},k0="flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",W0={size:{default:"text-sm",lg:"text-base",sm:"text-sm"},variant:{card:"px-4 py-3 font-medium",default:"px-4 py-3 font-medium",ghost:"py-2 font-medium"}},F0={size:"default",variant:"default"},I0="ui.disclosure.summary",P0=["variant","size"],th={base:k0,byKey:W0,defaults:F0,id:I0,keys:P0},eh=$0,lh=th;function ah(c={}){return G(F(eh,{variant:c.variant,size:c.size}),c.className)}function nh(c={}){return G(F(lh,{variant:c.variant,size:c.size}),c.className)}const uh=B.forwardRef(function({variant:r,size:o,open:s,className:y,children:m,...g},T){const N=ah({variant:r,size:o,className:y});return C.jsx("details",{ref:T,className:N||void 0,open:s||void 0,...g,children:m})});uh.displayName="Disclosure";const ih=B.forwardRef(function({variant:r,size:o,className:s,children:y,...m},g){const T=nh({variant:r,size:o,className:s});return C.jsx("summary",{ref:g,className:T||void 0,...m,children:y})});ih.displayName="Summary";const ch="grid gap-4",sh={},fh={},oh="ui.form",rh=[],dh={base:ch,byKey:sh,defaults:fh,id:oh,keys:rh},mh="flex flex-col gap-2",yh={},vh={},bh="ui.form.item",gh=[],hh={base:mh,byKey:yh,defaults:vh,id:bh,keys:gh},ph="text-xs text-muted-foreground",Sh={},zh={},xh="ui.form.description",Th=[],Nh={base:ph,byKey:Sh,defaults:zh,id:xh,keys:Th},Ah="text-sm font-medium text-destructive",Eh={},Rh={},Ch="ui.form.message",_h=[],Oh={base:Ah,byKey:Eh,defaults:Rh,id:Ch,keys:_h},Mh=dh,Dh=hh,jh=Nh,Uh=Oh;function Hh(c={}){return G(F(Mh,{}),c.className)}function Bh(c={}){return G(F(Dh,{}),c.className)}function qh(c={}){return G(F(jh,{}),c.className)}function Gh(c={}){return G(F(Uh,{}),c.className)}const wh=B.forwardRef(function({noValidate:r,className:o,children:s,...y},m){const g=Hh({className:o});return C.jsx("form",{ref:m,className:g||void 0,noValidate:r||void 0,...y,children:s})});wh.displayName="Form";const Yh=B.forwardRef(function({className:r,children:o,...s},y){const m=Bh({className:r});return C.jsx("div",{ref:y,className:m||void 0,...s,children:o})});Yh.displayName="FormItem";const Xh=B.forwardRef(function({className:r,children:o,...s},y){const m=qh({className:r});return C.jsx("p",{ref:y,className:m||void 0,...s,children:o})});Xh.displayName="FormDescription";const Qh=B.forwardRef(function({className:r,children:o,...s},y){const m=Gh({className:r});return C.jsx("p",{ref:y,className:m||void 0,role:"alert",...s,children:o})});Qh.displayName="FormMessage";const Kh="grid gap-4",Vh={size:{default:"gap-4",lg:"gap-6",sm:"gap-2"},variant:{card:"rounded-md border border-border p-4",default:"",inline:"flex flex-wrap items-start gap-4"}},Zh={size:"default",variant:"default"},Lh="ui.form.fieldset",Jh=["variant","size"],$h={base:Kh,byKey:Vh,defaults:Zh,id:Lh,keys:Jh},kh="text-sm font-medium",Wh={size:{default:"text-sm",lg:"text-base",sm:"text-xs"},variant:{default:"",muted:"text-muted-foreground"}},Fh={size:"default",variant:"default"},Ih="ui.form.legend",Ph=["variant","size"],tp={base:kh,byKey:Wh,defaults:Fh,id:Ih,keys:Ph},ep="h-2 w-full",lp={size:{default:"h-2",lg:"h-3",sm:"h-1"},variant:{default:"accent-primary",muted:"accent-muted-foreground"}},ap={size:"default",variant:"default"},np="ui.form.meter",up=["variant","size"],ip={base:ep,byKey:lp,defaults:ap,id:np,keys:up},cp="h-2 w-full",sp={size:{default:"h-2",lg:"h-3",sm:"h-1"},variant:{default:"accent-primary",muted:"accent-muted-foreground"}},fp={size:"default",variant:"default"},op="ui.form.progress",rp=["variant","size"],dp={base:cp,byKey:sp,defaults:fp,id:op,keys:rp},mp=$h,yp=tp,vp=ip,bp=dp;function gp(c={}){return G(F(mp,{variant:c.variant,size:c.size}),c.className)}function hp(c={}){return G(F(yp,{variant:c.variant,size:c.size}),c.className)}function pp(c={}){return G(c.className)}function Sp(c={}){return G(c.className)}function zp(c={}){return G(F(vp,{variant:c.variant,size:c.size}),c.className)}function xp(c={}){return G(F(bp,{variant:c.variant,size:c.size}),c.className)}const Tp=B.forwardRef(function({variant:r,size:o,disabled:s,className:y,children:m,...g},T){const N=gp({variant:r,size:o,className:y});return C.jsx("fieldset",{ref:T,className:N||void 0,disabled:s||void 0,...g,children:m})});Tp.displayName="Fieldset";const Np=B.forwardRef(function({variant:r,size:o,className:s,children:y,...m},g){const T=hp({variant:r,size:o,className:s});return C.jsx("legend",{ref:g,className:T||void 0,...m,children:y})});Np.displayName="Legend";const Ap=B.forwardRef(function({className:r,children:o,...s},y){const m=pp({className:r});return C.jsx("datalist",{ref:y,className:m||void 0,...s,children:o})});Ap.displayName="DataList";const Ep=B.forwardRef(function({className:r,...o},s){return C.jsx("option",{ref:s,...o})});Ep.displayName="DataOption";const Rp=B.forwardRef(function({value:r,className:o,children:s,...y},m){const g=Sp({className:o});return C.jsxs("output",{ref:m,className:g||void 0,...y,children:[r,s]})});Rp.displayName="Output";const Cp=B.forwardRef(function({variant:r,size:o,className:s,children:y,...m},g){const T=zp({variant:r,size:o,className:s});return C.jsx("meter",{ref:g,className:T||void 0,...m,children:y})});Cp.displayName="Meter";const _p=B.forwardRef(function({variant:r,size:o,className:s,children:y,...m},g){const T=xp({variant:r,size:o,className:s});return C.jsx("progress",{ref:g,className:T||void 0,...m,children:y})});_p.displayName="Progress";const Op="grid",Mp={},Dp={},jp="ui.grid",Up=[],Hp={base:Op,byKey:Mp,defaults:Dp,id:jp,keys:Up},Bp=Hp;function qp(c={}){return G(F(Bp,{}),(c.className??"").includes("grid-cols-")?"":hm(Js(c.cols,"1"),{1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5",6:"grid-cols-6",7:"grid-cols-7",8:"grid-cols-8",9:"grid-cols-9",10:"grid-cols-10",11:"grid-cols-11",12:"grid-cols-12","1-2":"grid-cols-1 md:grid-cols-2","1-3":"grid-cols-1 md:grid-cols-2 xl:grid-cols-3","1-4":"grid-cols-1 md:grid-cols-2 xl:grid-cols-4"},""),c.className)}function Gp(c={}){return G(ri(c.span,{1:"col-span-1",2:"col-span-2",3:"col-span-3",4:"col-span-4",5:"col-span-5",6:"col-span-6",7:"col-span-7",8:"col-span-8",9:"col-span-9",10:"col-span-10",11:"col-span-11",12:"col-span-12"},""),ri(c.start,{1:"col-start-1",2:"col-start-2",3:"col-start-3",4:"col-start-4",5:"col-start-5",6:"col-start-6",7:"col-start-7",8:"col-start-8",9:"col-start-9",10:"col-start-10",11:"col-start-11",12:"col-start-12"},""),ri(c.end,{1:"col-end-1",2:"col-end-2",3:"col-end-3",4:"col-end-4",5:"col-end-5",6:"col-end-6",7:"col-end-7",8:"col-end-8",9:"col-end-9",10:"col-end-10",11:"col-end-11",12:"col-end-12"},""),ri(c.order,{1:"order-1",2:"order-2",3:"order-3",4:"order-4",5:"order-5",6:"order-6",7:"order-7",8:"order-8",9:"order-9",10:"order-10",11:"order-11",12:"order-12"},""),c.className)}const Tm=B.forwardRef(function({cols:r,className:o,children:s,asChild:y,...m},g){const T=qp({cols:r,className:o});return y?C.jsx(re,{ref:g,className:T,...m,children:s}):C.jsx("div",{ref:g,className:T||void 0,...m,children:s})});Tm.displayName="Grid";const wp=B.forwardRef(function({span:r,start:o,end:s,order:y,className:m,children:g,asChild:T,...N},p){const H=Gp({span:r,start:o,end:s,order:y,className:m});return T?C.jsx(re,{ref:p,className:H,...N,children:g}):C.jsx("div",{ref:p,className:H||void 0,...N,children:g})});wp.displayName="GridCol";const Yp="flex min-w-0",Xp={},Qp={},Kp="ui.group",Vp=[],Zp={base:Yp,byKey:Xp,defaults:Qp,id:Kp,keys:Vp},Lp=Zp;function Jp(c={}){return G(F(Lp,{}),c.className)}const mi=B.forwardRef(function({tag:r,className:o,children:s,asChild:y,...m},g){const T=Jp({className:o}),p=la(r,"div",zt.Group);return y?C.jsx(re,{ref:g,className:T,...m,children:s}):C.jsx(p,{ref:g,className:T||void 0,...m,children:s})});mi.displayName="Group";const $p="inline-block shrink-0",kp={size:{default:"h-4 w-4",lg:"h-6 w-6",md:"h-5 w-5",sm:"h-4 w-4",xl:"h-8 w-8",xs:"h-3 w-3"},type:{class:"",svg:"",text:""}},Wp={size:"default",type:"class"},Fp="ui.icon",Ip=["type","size"],Pp={base:$p,byKey:kp,defaults:Wp,id:Fp,keys:Ip},t1=Pp;function e1(c={}){return G(F(t1,{type:Ul(c.type,"class","svg","text"),size:c.size}),Bl(Ul(c.type,"class","svg","text"),"class")?c.baseClass:"",Bl(Ul(c.type,"class","svg","text"),"class")&&He(c.name)?og(c.prefix,c.name):"",c.className)}const l1=B.forwardRef(function({name:r,type:o,baseClass:s,prefix:y,size:m,href:g,title:T,"aria-label":N,decorative:p,className:H,children:j,...Q},at){const ft=e1({type:o,size:m,baseClass:s,name:r,prefix:y,className:H}),nt=Ul(o,"class","svg","text"),$=p||!He(T)&&!He(N);return Bl(nt,"svg")?C.jsxs("svg",{ref:at,className:ft||void 0,"aria-hidden":$?"true":void 0,role:$?void 0:"img","aria-label":!$&&He(N)?N:void 0,...Q,children:[He(T)?C.jsx("title",{children:T}):null,He(g)?C.jsx("use",{href:Va(g)}):null,j]}):Bl(nt,"text")?C.jsx("span",{ref:at,className:ft||void 0,"aria-hidden":$?"true":void 0,role:$?void 0:"img","aria-label":!$&&He(N)?N:void 0,...Q,children:j}):C.jsx("span",{ref:at,className:ft||void 0,"aria-hidden":$?"true":void 0,role:$?void 0:"img","aria-label":!$&&He(N)?N:void 0,...Q})});l1.displayName="Icon";const a1="ui.iconbadge",n1="inline-flex shrink-0 items-center justify-center rounded-md font-semibold",u1=["variant","size"],i1={variant:"default",size:"default"},c1={variant:{default:"bg-muted text-muted-foreground",accent:"bg-accent text-accent-foreground",secondary:"bg-secondary text-secondary-foreground",outline:"border border-border text-foreground",destructive:"bg-destructive text-destructive-foreground"},size:{xs:"h-6 w-6 text-xs",sm:"h-8 w-8 text-xs",default:"h-10 w-10 text-sm",lg:"h-12 w-12 text-base"}},s1={id:a1,base:n1,keys:u1,defaults:i1,byKey:c1},f1=s1;function o1(c={}){return G(F(f1,{variant:c.variant,size:c.size}),c.className)}const r1=B.forwardRef(function({variant:r,size:o,className:s,children:y,...m},g){const T=o1({variant:r,size:o,className:s});return C.jsx("span",{ref:g,className:T||void 0,...m,children:y})});r1.displayName="IconBadge";const d1="block max-w-full",m1={aspect:{auto:"aspect-auto",square:"aspect-square",video:"aspect-video"},fit:{contain:"object-contain",cover:"object-cover",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},position:{bottom:"object-bottom",center:"object-center",left:"object-left","left-bottom":"object-left-bottom","left-top":"object-left-top",right:"object-right","right-bottom":"object-right-bottom","right-top":"object-right-top",top:"object-top"},size:{auto:"",default:"",full:"h-full w-full",lg:"h-16 w-16",md:"h-12 w-12",sm:"h-8 w-8",xl:"h-24 w-24",xs:"h-6 w-6"},variant:{avatar:"rounded-full",default:"",logo:"object-contain",rounded:"rounded-md",thumbnail:"rounded-md border border-border"}},y1={aspect:"auto",fit:"cover",position:"center",size:"auto",variant:"default"},v1="ui.image",b1=["variant","size","fit","position","aspect"],g1={base:d1,byKey:m1,defaults:y1,id:v1,keys:b1},h1=g1;function p1(c={}){return G(F(h1,{variant:c.variant,size:c.size,fit:c.fit,position:c.position,aspect:c.aspect}),c.className)}function S1(c={}){return G(c.className)}const z1=B.forwardRef(function({variant:r,size:o,alt:s,fit:y,position:m,aspect:g,loading:T,decoding:N,decorative:p,className:H,...j},Q){const at=p1({variant:r,size:o,fit:y,position:m,aspect:g,className:H});return C.jsx("img",{ref:Q,alt:(p?"":s)??"",loading:Ul(T,"lazy","eager"),decoding:Ul(N,"async","sync","auto"),className:at||void 0,"aria-hidden":p?"true":void 0,...j})});z1.displayName="Image";const x1=B.forwardRef(function({className:r,children:o,...s},y){const m=S1({className:r});return C.jsx("picture",{ref:y,className:m||void 0,...s,children:o})});x1.displayName="Picture";const T1=B.forwardRef(function({className:r,...o},s){return C.jsx("source",{ref:s,...o})});T1.displayName="Source";const N1="ui.inline",A1="",E1=[],R1={},C1={},_1={id:N1,base:A1,keys:E1,defaults:R1,byKey:C1},O1=_1;function M1(c={}){return G(F(O1,{}),c.className)}const D1=B.forwardRef(function({className:r,children:o,asChild:s,...y},m){const g=M1({className:r});return s?C.jsx(re,{ref:m,className:g,...y,children:o}):C.jsx("span",{ref:m,className:g||void 0,...y,children:o})});D1.displayName="Inline";const j1="w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",U1={size:{default:"h-10 px-3 py-2 text-sm",lg:"h-12 px-4 text-base",sm:"h-8 px-3 text-sm",xs:"h-8 px-2 text-xs"},variant:{default:"border-border bg-background",ghost:"border-transparent bg-muted",outline:"border-border bg-background"}},H1={size:"default",variant:"default"},B1="ui.input",q1=["variant","size"],G1={base:j1,byKey:U1,defaults:H1,id:B1,keys:q1},w1=G1;function Y1(c={}){return G(F(w1,{variant:c.variant,size:c.size}),c.className)}const X1=B.forwardRef(function({variant:r,size:o,type:s,disabled:y,required:m,className:g,...T},N){const p=Y1({variant:r,size:o,className:g});return C.jsx("input",{ref:N,type:Js(s,"text"),className:p||void 0,disabled:y||void 0,required:m||void 0,...T})});X1.displayName="Input";const Q1="text-sm font-medium leading-none",K1={},V1={},Z1="ui.label",L1=[],J1={base:Q1,byKey:K1,defaults:V1,id:Z1,keys:L1},$1=J1;function k1(c={}){return G(F($1,{}),c.className)}const W1=B.forwardRef(function({className:r,children:o,...s},y){const m=k1({className:r});return C.jsx("label",{ref:y,className:m||void 0,...s,children:o})});W1.displayName="Label";const F1="",I1={},P1={},t2="ui.linebreak",e2=[],l2={base:F1,byKey:I1,defaults:P1,id:t2,keys:e2},a2=l2;function n2(c={}){return G(F(a2,{}),c.className)}const u2=B.forwardRef(function({type:r,className:o,...s},y){const m=n2({className:o}),T=hm(r,{wbr:"wbr",word:"wbr"},"br");return C.jsx(T,{ref:y,className:m||void 0,...s})});u2.displayName="Break";const i2="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",c2={size:{default:"text-sm",lg:"text-lg",md:"text-base",sm:"text-sm"},variant:{block:"flex w-full text-foreground hover:text-primary",default:"text-primary hover:underline",external:"text-primary hover:underline",muted:"text-muted-foreground hover:text-foreground hover:underline",nav:"text-foreground hover:text-primary"}},s2={size:"default",variant:"default"},f2="ui.link",o2=["variant","size"],r2={base:i2,byKey:c2,defaults:s2,id:f2,keys:o2},d2=r2;function m2(c={}){return G(F(d2,{variant:c.variant,size:c.size}),c.disabled?"pointer-events-none opacity-50":"",c.className)}const Nm=B.forwardRef(function({variant:r,size:o,target:s,rel:y,external:m,disabled:g,className:T,children:N,...p},H){const j=m2({variant:r,size:o,disabled:g,className:T}),Q=He(s)?s:m?"_blank":"",at=He(y)?y:m||Bl(Q,"_blank")?"noopener noreferrer":"";return C.jsx("a",{ref:H,className:j||void 0,target:Va(Q),rel:Va(at),"aria-disabled":g?"true":void 0,tabIndex:g?-1:void 0,...p,children:N})});Nm.displayName="Link";const y2="",v2={},b2={},g2="ui.list",h2=[],p2={base:y2,byKey:v2,defaults:b2,id:g2,keys:h2},Am=p2;function S2(c={}){return G(F(Am,{}),c.className)}function z2(c={}){return G(F(Am,{}),c.className)}const x2=B.forwardRef(function({tag:r,className:o,children:s,...y},m){const g=S2({className:o}),N=la(r,"ul",zt.List);return C.jsx(N,{ref:m,className:g||void 0,...y,children:s})});x2.displayName="List";const T2=B.forwardRef(function({tag:r,value:o,className:s,children:y,...m},g){const T=z2({className:s}),N=la(r,"li",zt.ListItem),p=N;return C.jsx(p,{ref:g,className:T||void 0,value:Hl(o)&&Bl(N,"li")?String(o??0):void 0,...m,children:y})});T2.displayName="ListItem";const N2="rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",A2={size:{default:"h-4 w-4",lg:"h-5 w-5",sm:"h-4 w-4",xs:"h-3 w-3"},variant:{default:"border-primary",ghost:"border-primary bg-muted/30",outline:"border-primary"}},E2={size:"default",variant:"default"},R2="ui.radio",C2=["variant","size"],_2={base:N2,byKey:A2,defaults:E2,id:R2,keys:C2},O2=_2;function M2(c={}){return G(F(O2,{variant:c.variant,size:c.size}),c.className)}const D2=B.forwardRef(function({variant:r,size:o,checked:s,disabled:y,required:m,className:g,...T},N){const p=M2({variant:r,size:o,className:g});return C.jsx("input",{ref:N,type:"radio",className:p||void 0,checked:s||void 0,disabled:y||void 0,required:m||void 0,...T})});D2.displayName="Radio";const j2="w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",U2={size:{default:"h-10 px-3 py-2 text-sm",lg:"h-12 px-4 text-base",sm:"h-8 px-3 text-sm",xs:"h-8 px-2 text-xs"},variant:{default:"border-border bg-background",ghost:"border-transparent bg-muted",outline:"border-border bg-background"}},H2={size:"default",variant:"default"},B2="ui.select",q2=["variant","size"],G2={base:j2,byKey:U2,defaults:H2,id:B2,keys:q2},w2=G2;function Y2(c={}){return G(F(w2,{variant:c.variant,size:c.size}),c.className)}function X2(c={}){return G(c.className)}const Q2=B.forwardRef(function({variant:r,size:o,value:s,disabled:y,required:m,options:g,className:T,children:N,...p},H){const j=Y2({variant:r,size:o,className:T});return C.jsxs("select",{ref:H,className:j||void 0,disabled:y||void 0,required:m||void 0,...p,children:[(g??[]).map((Q,at)=>C.jsx("option",{value:Q.value??"",selected:Bl(Q.value,s)||void 0,children:Q.label},at)),N]})});Q2.displayName="Select";const K2=B.forwardRef(function({selected:r,disabled:o,className:s,children:y,...m},g){return C.jsx("option",{ref:g,selected:r||void 0,disabled:o||void 0,...m,children:y})});K2.displayName="SelectOption";const V2=B.forwardRef(function({disabled:r,className:o,children:s,...y},m){const g=X2({className:o});return C.jsx("optgroup",{ref:m,className:g||void 0,disabled:r||void 0,...y,children:s})});V2.displayName="OptGroup";const Z2="shrink-0 border-0 bg-border",L2={orientation:{horizontal:"h-px w-full",vertical:"h-full w-px"},variant:{default:"",muted:"bg-muted",spaced:"my-4",strong:"bg-foreground"}},J2={orientation:"horizontal",variant:"default"},$2="ui.separator",k2=["orientation","variant"],W2={base:Z2,byKey:L2,defaults:J2,id:$2,keys:k2},F2=W2;function I2(c={}){return G(F(F2,{variant:c.variant,orientation:c.orientation}),c.className)}const P2=B.forwardRef(function({variant:r,orientation:o,decorative:s,className:y,...m},g){const T=I2({variant:r,orientation:o,className:y});return C.jsx("hr",{ref:g,className:T||void 0,role:s?"presentation":void 0,"aria-hidden":s?"true":void 0,"aria-orientation":Bl(o,"vertical")?"vertical":void 0,...m})});P2.displayName="Separator";const tS="flex flex-col items-start justify-start",eS={},lS={},aS="ui.stack",nS=[],uS={base:tS,byKey:eS,defaults:lS,id:aS,keys:nS},iS=uS;function cS(c={}){return G(F(iS,{}),c.className)}const Zn=B.forwardRef(function({tag:r,className:o,children:s,asChild:y,...m},g){const T=cS({className:o}),p=la(r,"div",zt.Stack);return y?C.jsx(re,{ref:g,className:T,...m,children:s}):C.jsx(p,{ref:g,className:T||void 0,...m,children:s})});Zn.displayName="Stack";const sS="rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",fS={size:{default:"h-4 w-4",lg:"h-5 w-5",sm:"h-4 w-4",xs:"h-3 w-3"},variant:{default:"border-primary",ghost:"border-primary bg-muted/30",outline:"border-primary"}},oS={size:"default",variant:"default"},rS="ui.switch",dS=["variant","size"],mS={base:sS,byKey:fS,defaults:oS,id:rS,keys:dS},yS=mS;function vS(c={}){return G(F(yS,{variant:c.variant,size:c.size}),c.className)}const bS=B.forwardRef(function({variant:r,size:o,checked:s,disabled:y,required:m,className:g,...T},N){const p=vS({variant:r,size:o,className:g});return C.jsx("input",{ref:N,type:"checkbox",className:p||void 0,checked:s||void 0,disabled:y||void 0,required:m||void 0,role:"switch","aria-checked":fg(s),...T})});bS.displayName="Switch";const gS="",hS={},pS={},SS="ui.table",zS=[],xS={base:gS,byKey:hS,defaults:pS,id:SS,keys:zS},TS=xS;function NS(c={}){return G(F(TS,{}),c.className)}function AS(c={}){return G(c.className)}function ES(c={}){return G(c.className)}function RS(c={}){return G(c.className)}function CS(c={}){return G(c.className)}function _S(c={}){return G(c.className)}function OS(c={}){return G(c.className)}function MS(c={}){return G(c.className)}function DS(c={}){return G(c.className)}function jS(c={}){return G(c.className)}const US=B.forwardRef(function({className:r,children:o,...s},y){const m=NS({className:r});return C.jsx("table",{ref:y,className:m||void 0,...s,children:o})});US.displayName="Table";const HS=B.forwardRef(function({className:r,children:o,...s},y){const m=AS({className:r});return C.jsx("caption",{ref:y,className:m||void 0,...s,children:o})});HS.displayName="TableCaption";const BS=B.forwardRef(function({className:r,children:o,...s},y){const m=ES({className:r});return C.jsx("thead",{ref:y,className:m||void 0,...s,children:o})});BS.displayName="TableHead";const qS=B.forwardRef(function({className:r,children:o,...s},y){const m=RS({className:r});return C.jsx("tbody",{ref:y,className:m||void 0,...s,children:o})});qS.displayName="TableBody";const GS=B.forwardRef(function({className:r,children:o,...s},y){const m=CS({className:r});return C.jsx("tfoot",{ref:y,className:m||void 0,...s,children:o})});GS.displayName="TableFoot";const wS=B.forwardRef(function({className:r,children:o,...s},y){const m=_S({className:r});return C.jsx("tr",{ref:y,className:m||void 0,...s,children:o})});wS.displayName="TableRow";const YS=B.forwardRef(function({scope:r,colSpan:o,rowSpan:s,abbr:y,className:m,children:g,...T},N){const p=OS({className:m});return C.jsx("th",{ref:N,className:p||void 0,scope:Va(sg(r,"","col","colgroup","row","rowgroup")),abbr:Va(y),colSpan:Hl(o)?o:void 0,rowSpan:Hl(s)?s:void 0,...T,children:g})});YS.displayName="TableHeadCell";const XS=B.forwardRef(function({scope:r,colSpan:o,rowSpan:s,abbr:y,className:m,children:g,...T},N){const p=MS({className:m});return C.jsx("td",{ref:N,className:p||void 0,colSpan:Hl(o)?o:void 0,rowSpan:Hl(s)?s:void 0,...T,children:g})});XS.displayName="TableCell";const QS=B.forwardRef(function({span:r,className:o,children:s,...y},m){const g=DS({className:o});return C.jsx("colgroup",{ref:m,className:g||void 0,span:Hl(r)?r:void 0,...y,children:s})});QS.displayName="TableColGroup";const KS=B.forwardRef(function({span:r,className:o,...s},y){const m=jS({className:o});return C.jsx("col",{ref:y,className:m||void 0,span:Hl(r)?r:void 0,...s})});KS.displayName="TableCol";const VS="",ZS={},LS={},JS="ui.text",$S=[],kS={base:VS,byKey:ZS,defaults:LS,id:JS,keys:$S},WS=kS;function FS(c={}){return G(F(WS,{}),c.className)}const Ln=B.forwardRef(function({className:r,children:o,asChild:s,...y},m){const g=FS({className:r});return s?C.jsx(re,{ref:m,className:g,...y,children:o}):C.jsx("p",{ref:m,className:g||void 0,...y,children:o})});Ln.displayName="Text";const IS="w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",PS={size:{default:"h-10 px-3 py-2 text-sm",lg:"h-12 px-4 text-base",sm:"h-8 px-3 text-sm",xs:"h-8 px-2 text-xs"},variant:{default:"border-border bg-background",ghost:"border-transparent bg-muted",outline:"border-border bg-background"}},tz={size:"default",variant:"default"},ez="ui.textarea",lz=["variant","size"],az={base:IS,byKey:PS,defaults:tz,id:ez,keys:lz},nz=az;function uz(c={}){return G(F(nz,{variant:c.variant,size:c.size}),c.className)}const iz=B.forwardRef(function({variant:r,size:o,value:s,rows:y,disabled:m,required:g,className:T,...N},p){const H=uz({variant:r,size:o,className:T});return C.jsx("textarea",{ref:p,className:H||void 0,rows:Hl(y)?y:4,disabled:m||void 0,required:g||void 0,...N,defaultValue:s??""})});iz.displayName="Textarea";const cz="",sz={},fz={},oz="ui.title",rz=[],dz={base:cz,byKey:sz,defaults:fz,id:oz,keys:rz},mz=dz;function yz(c={}){return G(F(mz,{}),c.className)}const Em=B.forwardRef(function({as:r,className:o,children:s,asChild:y,...m},g){const T=yz({className:o}),p=pm(r);return y?C.jsx(re,{ref:g,className:T,...m,children:s}):C.jsx(p,{ref:g,className:T||void 0,...m,children:s})});Em.displayName="Title";const vz="UI8Kit Codegen",bz="One typed render contract — four generated runtimes with identical DOM, design, and ARIA.",gz=[{title:"Spec-driven",description:"Brick definitions in a tiny expression IR — no hand-written drift across stacks."},{title:"Four runtimes",description:"Go Templ, React 19, Svelte 5, and Vue 3 emitted from the same source."},{title:"DOM parity",description:"The canonical renderer is the executable specification, verified by tests."}],hz=[{id:"templ",label:"Go Templ",port:8080},{id:"react",label:"React 19",port:5173},{id:"svelte",label:"Svelte 5",port:5174},{id:"vue",label:"Vue 3",port:5175}],di={title:vz,subtitle:bz,features:gz,runtimes:hz};function pz({runtime:c}){return C.jsx(Sm,{tag:"main",className:"min-h-screen bg-muted/30 text-foreground",children:C.jsx(xm,{className:"mx-auto max-w-4xl px-4 py-16",children:C.jsxs(Zn,{className:"gap-8",children:[C.jsxs(Zn,{className:"items-center gap-4 text-center",children:[C.jsx(Vn,{variant:"outline",className:"text-xs uppercase tracking-wide",children:c}),C.jsx(Em,{as:1,className:"text-3xl font-bold tracking-tight",children:di.title}),C.jsx(Ln,{className:"max-w-2xl text-muted-foreground",children:di.subtitle})]}),C.jsxs(Xs,{variant:"default",children:[C.jsx(Qs,{children:C.jsx(Ks,{children:"Generated primitives"})}),C.jsx(Vs,{children:C.jsxs(Zn,{className:"gap-4",children:[C.jsxs(mi,{className:"flex-wrap gap-2",children:[C.jsx(Qa,{variant:"default",size:"sm",children:"Default"}),C.jsx(Qa,{variant:"secondary",size:"sm",children:"Secondary"}),C.jsx(Qa,{variant:"outline",size:"sm",children:"Outline"}),C.jsx(Qa,{variant:"ghost",size:"sm",children:"Ghost"}),C.jsx(Qa,{variant:"destructive",size:"sm",children:"Destructive"})]}),C.jsxs(mi,{className:"flex-wrap gap-2",children:[C.jsx(Vn,{variant:"default",children:"Badge"}),C.jsx(Vn,{variant:"secondary",children:"Secondary"}),C.jsx(Vn,{variant:"outline",children:"Outline"})]})]})})]}),C.jsx(Tm,{cols:"1-3",className:"gap-4",children:di.features.map(r=>C.jsxs(Xs,{variant:"muted",children:[C.jsx(Qs,{children:C.jsx(Ks,{children:r.title})}),C.jsx(Vs,{children:C.jsx(Ln,{className:"text-sm text-muted-foreground",children:r.description})})]},r.title))}),C.jsx(zm,{className:"rounded-lg border border-border bg-card p-4",children:C.jsxs(Zn,{className:"gap-3",children:[C.jsx(Ln,{className:"text-sm font-medium",children:"Preview other runtimes"}),C.jsx(mi,{className:"flex-wrap gap-3",children:di.runtimes.map(r=>C.jsx(Nm,{href:`http://127.0.0.1:${r.port}`,variant:"default",children:r.label},r.id))})]})}),C.jsx(Ln,{className:"text-center text-sm text-muted-foreground",children:"Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen"})]})})})}ub.createRoot(document.getElementById("root")).render(C.jsx(B.StrictMode,{children:C.jsx(pz,{runtime:"React 19"})}));
diff --git a/examples/react/dist/index.html b/examples/react/dist/index.html
deleted file mode 100644
index eb6e415..0000000
--- a/examples/react/dist/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UI8Kit Codegen · React 19</title>
-    <link rel="stylesheet" href="/static/css/app.css" />
-    <script type="module" crossorigin src="/assets/index-TdQjjyEy.js"></script>
-  </head>
-  <body class="bg-background text-foreground antialiased">
-    <div id="root"></div>

-  </body>
-</html>
diff --git a/examples/react/index.html b/examples/react/index.html
deleted file mode 100644
index b75dbc2..0000000
--- a/examples/react/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UI8Kit Codegen · React 19</title>
-    <link rel="stylesheet" href="/static/css/app.css" />
-  </head>
-  <body class="bg-background text-foreground antialiased">
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
diff --git a/examples/react/script/generate-static.tsx b/examples/react/script/generate-static.tsx
deleted file mode 100644
index addeeb0..0000000
--- a/examples/react/script/generate-static.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Static HTML export — renders the React welcome view with
- * renderToStaticMarkup and writes plain HTML pages into examples/html/,
- * one directory per route (index.html, about/index.html) with relative
- * links to the shared static assets. Run with: bun run build:html
- */
-
-import { cpSync, mkdirSync, writeFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { renderToStaticMarkup } from "react-dom/server";
-import { WelcomeView } from "../src/Welcome";
-
-const examplesRoot = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
-const outRoot = join(examplesRoot, "html");
-
-interface Route {
-  /** Directory under examples/html/ ("" is the site root). */
-  path: string;
-  title: string;
-  runtime: string;
-}
-
-const routes: Route[] = [
-  { path: "", title: "UI8Kit Codegen · Static HTML", runtime: "Static HTML" },
-  { path: "about", title: "UI8Kit Codegen · About", runtime: "Static HTML · About" },
-];
-
-/** Depth-aware prefix so nested routes link ../static, the root ./static. */
-function relPrefix(routePath: string): string {
-  const depth = routePath === "" ? 0 : routePath.split("/").length;
-  return depth === 0 ? "./" : "../".repeat(depth);
-}
-
-function pageShell(title: string, cssHref: string, bodyHtml: string): string {
-  return `<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>${title}</title>
-		<link rel="stylesheet" href="${cssHref}">
-	</head>
-	<body class="bg-background text-foreground antialiased">
-${bodyHtml}
-	</body>
-</html>
-`;
-}
-
-for (const route of routes) {
-  const markup = renderToStaticMarkup(<WelcomeView runtime={route.runtime} />);
-  const dir = route.path === "" ? outRoot : join(outRoot, route.path);
-  mkdirSync(dir, { recursive: true });
-  const html = pageShell(route.title, `${relPrefix(route.path)}static/css/app.css`, markup);
-  writeFileSync(join(dir, "index.html"), html);
-  console.log(`wrote ${join(dir, "index.html")}`);
-}
-
-cpSync(join(examplesRoot, "web", "static"), join(outRoot, "static"), { recursive: true });
-console.log(`copied static assets -> ${join(outRoot, "static")}`);
diff --git a/examples/react/src/Welcome.tsx b/examples/react/src/Welcome.tsx
deleted file mode 100644
index f1902ff..0000000
--- a/examples/react/src/Welcome.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import {
-  Badge,
-  Block,
-  Box,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Container,
-  Grid,
-  Group,
-  Link,
-  Stack,
-  Text,
-  Title,
-} from "@ui";
-import welcome from "../../data/welcome.json";
-
-export type WelcomeViewProps = {
-  runtime: string;
-};
-
-export function WelcomeView({ runtime }: WelcomeViewProps) {
-  return (
-    <Block tag="main" className="min-h-screen bg-muted/30 text-foreground">
-      <Container className="mx-auto max-w-4xl px-4 py-16">
-        <Stack className="gap-8">
-          <Stack className="items-center gap-4 text-center">
-            <Badge variant="outline" className="text-xs uppercase tracking-wide">
-              {runtime}
-            </Badge>
-            <Title as={1} className="text-3xl font-bold tracking-tight">
-              {welcome.title}
-            </Title>
-            <Text className="max-w-2xl text-muted-foreground">{welcome.subtitle}</Text>
-          </Stack>
-
-          <Card variant="default">
-            <CardHeader>
-              <CardTitle>Generated primitives</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Stack className="gap-4">
-                <Group className="flex-wrap gap-2">
-                  <Button variant="default" size="sm">
-                    Default
-                  </Button>
-                  <Button variant="secondary" size="sm">
-                    Secondary
-                  </Button>
-                  <Button variant="outline" size="sm">
-                    Outline
-                  </Button>
-                  <Button variant="ghost" size="sm">
-                    Ghost
-                  </Button>
-                  <Button variant="destructive" size="sm">
-                    Destructive
-                  </Button>
-                </Group>
-                <Group className="flex-wrap gap-2">
-                  <Badge variant="default">Badge</Badge>
-                  <Badge variant="secondary">Secondary</Badge>
-                  <Badge variant="outline">Outline</Badge>
-                </Group>
-              </Stack>
-            </CardContent>
-          </Card>
-
-          <Grid cols="1-3" className="gap-4">
-            {welcome.features.map((feature) => (
-              <Card key={feature.title} variant="muted">
-                <CardHeader>
-                  <CardTitle>{feature.title}</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <Text className="text-sm text-muted-foreground">{feature.description}</Text>
-                </CardContent>
-              </Card>
-            ))}
-          </Grid>
-
-          <Box className="rounded-lg border border-border bg-card p-4">
-            <Stack className="gap-3">
-              <Text className="text-sm font-medium">Preview other runtimes</Text>
-              <Group className="flex-wrap gap-3">
-                {welcome.runtimes.map((rt) => (
-                  <Link key={rt.id} href={`http://127.0.0.1:${rt.port}`} variant="default">
-                    {rt.label}
-                  </Link>
-                ))}
-              </Group>
-            </Stack>
-          </Box>
-
-          <Text className="text-center text-sm text-muted-foreground">
-            Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen
-          </Text>
-        </Stack>
-      </Container>
-    </Block>
-  );
-}
diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
deleted file mode 100644
index a59af97..0000000
--- a/examples/react/src/main.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { WelcomeView } from "./Welcome";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <WelcomeView runtime="React 19" />
-  </StrictMode>
-);
diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json
deleted file mode 100644
index 0a49192..0000000
--- a/examples/react/tsconfig.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "paths": {
-      "@ui": ["../../generated/ui/index.ts"],
-      "@ui/*": ["../../generated/ui/*"]
-    }
-  },
-  "include": ["src/**/*.tsx", "script/**/*.tsx", "../data/**/*.json"]
-}
diff --git a/examples/react/vite.config.ts b/examples/react/vite.config.ts
deleted file mode 100644
index ad2e902..0000000
--- a/examples/react/vite.config.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import path from "path";
-import { fileURLToPath } from "url";
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-import { generatedUiRoot, generatedUtilsRoot, serveExamplesStatic } from "../shared/vite-static";
-
-const rootDir = path.dirname(fileURLToPath(import.meta.url));
-
-export default defineConfig({
-  root: rootDir,
-  plugins: [react(), serveExamplesStatic()],
-  resolve: {
-    alias: {
-      "@ui": path.join(generatedUiRoot, "index.ts"),
-      "@ui-utils": generatedUtilsRoot,
-    },
-  },
-  server: {
-    port: 5173,
-    fs: {
-      allow: [path.resolve(rootDir, ".."), path.resolve(rootDir, "../../generated")],
-    },
-  },
-});
diff --git a/examples/scripts/composer-install.mjs b/examples/scripts/composer-install.mjs
deleted file mode 100644
index d73fc09..0000000
--- a/examples/scripts/composer-install.mjs
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * composer install in generated/ — uses global composer or local composer.phar.
- */
-import { existsSync } from "node:fs";
-import { join, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-import { spawnSync } from "node:child_process";
-import { resolvePhp } from "./resolve-php.mjs";
-
-const generated = join(dirname(fileURLToPath(import.meta.url)), "..", "..", "generated");
-const php = resolvePhp();
-
-if (!php) {
-  console.error("php not found — install PHP 8.1+ or set PHP=/path/to/php");
-  process.exit(1);
-}
-
-function run(cmd, args) {
-  const r = spawnSync(cmd, args, { cwd: generated, stdio: "inherit", shell: cmd === "composer" });
-  return r.status ?? 1;
-}
-
-if (run("composer", ["install", "--no-interaction"]) === 0) {
-  process.exit(0);
-}
-
-const phar = join(generated, "composer.phar");
-if (!existsSync(phar)) {
-  console.log("Downloading composer.phar…");
-  const curl = spawnSync("curl", ["-sS", "https://getcomposer.org/installer", "-o", "composer-setup.php"], {
-    cwd: generated,
-    stdio: "inherit",
-  });
-  if (curl.status !== 0) process.exit(curl.status ?? 1);
-  const setup = spawnSync(php, ["composer-setup.php", "--quiet"], { cwd: generated, stdio: "inherit" });
-  if (setup.status !== 0) process.exit(setup.status ?? 1);
-}
-
-process.exit(run(php, [phar, "install", "--no-interaction"]));
diff --git a/examples/scripts/php-server.mjs b/examples/scripts/php-server.mjs
deleted file mode 100644
index 1dbeb67..0000000
--- a/examples/scripts/php-server.mjs
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Start PHP built-in server for Latte/Twig previews.
- * Usage: bun scripts/php-server.mjs <latte|twig> [port]
- */
-import { spawn } from "node:child_process";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { resolvePhp } from "./resolve-php.mjs";
-
-const examplesRoot = join(dirname(fileURLToPath(import.meta.url)), "..");
-const target = process.argv[2];
-const port = process.argv[3] ?? (target === "twig" ? "5177" : "5176");
-
-if (target !== "latte" && target !== "twig") {
-  console.error("usage: bun scripts/php-server.mjs <latte|twig> [port]");
-  process.exit(1);
-}
-
-const php = resolvePhp();
-if (!php) {
-  console.error("php not found — install PHP 8.1+ or set PHP=/path/to/php");
-  process.exit(1);
-}
-
-const cwd = join(examplesRoot, target);
-const child = spawn(php, ["-S", `127.0.0.1:${port}`, "server.php"], {
-  cwd,
-  stdio: "inherit",
-  shell: false,
-});
-
-child.on("exit", (code) => process.exit(code ?? 0));
diff --git a/examples/scripts/resolve-php.mjs b/examples/scripts/resolve-php.mjs
deleted file mode 100644
index b2fe790..0000000
--- a/examples/scripts/resolve-php.mjs
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Resolve PHP executable: PHP env → PATH → common WinGet install path.
- */
-import { existsSync } from "node:fs";
-import { homedir } from "node:os";
-import { join } from "node:path";
-import { spawnSync } from "node:child_process";
-
-function tryPhp(path) {
-  if (!path || !existsSync(path)) return null;
-  const r = spawnSync(path, ["--version"], { encoding: "utf8" });
-  return r.status === 0 ? path : null;
-}
-
-function fromPath() {
-  const r = spawnSync("php", ["--version"], { encoding: "utf8", shell: true });
-  return r.status === 0 ? "php" : null;
-}
-
-function wingetPhp() {
-  const base = join(
-    homedir(),
-    "AppData/Local/Microsoft/WinGet/Packages/PHP.PHP.8.3_Microsoft.Winget.Source_8wekyb3d8bbwe"
-  );
-  return tryPhp(join(base, process.platform === "win32" ? "php.exe" : "php"));
-}
-
-export function resolvePhp() {
-  if (process.env.PHP) {
-    const explicit = tryPhp(process.env.PHP);
-    if (explicit) return explicit;
-  }
-  return fromPath() ?? wingetPhp();
-}
-
-if (import.meta.url === new URL(process.argv[1], "file:").href) {
-  const php = resolvePhp();
-  if (!php) {
-    console.error("php not found — install PHP 8.1+ or set PHP=/path/to/php");
-    process.exit(1);
-  }
-  console.log(php);
-}
diff --git a/examples/shared/vite-static.ts b/examples/shared/vite-static.ts
deleted file mode 100644
index 5009563..0000000
--- a/examples/shared/vite-static.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import path from "path";
-import { fileURLToPath } from "url";
-import { cpSync, existsSync } from "fs";
-import sirv from "sirv";
-import type { Connect, Plugin } from "vite";
-
-const examplesRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-const staticRoot = path.join(examplesRoot, "web/static");
-
-export function serveExamplesStatic(): Plugin {
-  const attach = (middlewares: Connect.Server) => {
-    middlewares.use("/static", sirv(staticRoot, { dev: true, etag: true, single: false }));
-  };
-  return {
-    name: "serve-codegen-examples-static",
-    configureServer(server) {
-      attach(server.middlewares);
-    },
-    configurePreviewServer(server) {
-      attach(server.middlewares);
-    },
-    closeBundle() {
-      const outStatic = path.join(examplesRoot, "dist/static");
-      if (existsSync(staticRoot)) {
-        cpSync(staticRoot, outStatic, { recursive: true });
-      }
-    },
-  };
-}
-
-export const generatedUiRoot = path.resolve(examplesRoot, "../generated/ui");
-export const generatedUtilsRoot = path.resolve(examplesRoot, "../generated/utils");
diff --git a/examples/solid/index.html b/examples/solid/index.html
deleted file mode 100644
index 648a9ff..0000000
--- a/examples/solid/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UI8Kit Codegen · SolidJS</title>
-    <link rel="stylesheet" href="/static/css/app.css" />
-  </head>
-  <body class="bg-background text-foreground antialiased">
-    <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
diff --git a/examples/solid/src/Welcome.tsx b/examples/solid/src/Welcome.tsx
deleted file mode 100644
index 72767a4..0000000
--- a/examples/solid/src/Welcome.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-/* @jsxImportSource solid-js */
-import {
-  Badge,
-  Block,
-  Box,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Container,
-  Grid,
-  Group,
-  Link,
-  Stack,
-  Text,
-  Title,
-} from "@ui";
-import welcome from "../../data/welcome.json";
-
-export type WelcomeViewProps = {
-  runtime: string;
-};
-
-export function WelcomeView(props: WelcomeViewProps) {
-  return (
-    <Block tag="main" class="min-h-screen bg-muted/30 text-foreground">
-      <Container class="mx-auto max-w-4xl px-4 py-16">
-        <Stack class="gap-8">
-          <Stack class="items-center gap-4 text-center">
-            <Badge variant="outline" class="text-xs uppercase tracking-wide">
-              {props.runtime}
-            </Badge>
-            <Title as={1} class="text-3xl font-bold tracking-tight">
-              {welcome.title}
-            </Title>
-            <Text class="max-w-2xl text-muted-foreground">{welcome.subtitle}</Text>
-          </Stack>
-
-          <Card variant="default">
-            <CardHeader>
-              <CardTitle>Generated primitives</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Stack class="gap-4">
-                <Group class="flex-wrap gap-2">
-                  <Button variant="default" size="sm">
-                    Default
-                  </Button>
-                  <Button variant="secondary" size="sm">
-                    Secondary
-                  </Button>
-                  <Button variant="outline" size="sm">
-                    Outline
-                  </Button>
-                  <Button variant="ghost" size="sm">
-                    Ghost
-                  </Button>
-                  <Button variant="destructive" size="sm">
-                    Destructive
-                  </Button>
-                </Group>
-                <Group class="flex-wrap gap-2">
-                  <Badge variant="default">Badge</Badge>
-                  <Badge variant="secondary">Secondary</Badge>
-                  <Badge variant="outline">Outline</Badge>
-                </Group>
-              </Stack>
-            </CardContent>
-          </Card>
-
-          <Grid cols="1-3" class="gap-4">
-            {welcome.features.map((feature) => (
-              <Card variant="muted">
-                <CardHeader>
-                  <CardTitle>{feature.title}</CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <Text class="text-sm text-muted-foreground">{feature.description}</Text>
-                </CardContent>
-              </Card>
-            ))}
-          </Grid>
-
-          <Box class="rounded-lg border border-border bg-card p-4">
-            <Stack class="gap-3">
-              <Text class="text-sm font-medium">Preview other runtimes</Text>
-              <Group class="flex-wrap gap-3">
-                {welcome.runtimes.map((rt) => (
-                  <Link href={`http://127.0.0.1:${rt.port}`} variant="default">
-                    {rt.label}
-                  </Link>
-                ))}
-              </Group>
-            </Stack>
-          </Box>
-
-          <Text class="text-center text-sm text-muted-foreground">
-            Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen
-          </Text>
-        </Stack>
-      </Container>
-    </Block>
-  );
-}
diff --git a/examples/solid/src/main.tsx b/examples/solid/src/main.tsx
deleted file mode 100644
index a761e77..0000000
--- a/examples/solid/src/main.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-/* @jsxImportSource solid-js */
-import { render } from "solid-js/web";
-import { WelcomeView } from "./Welcome";
-
-render(() => <WelcomeView runtime="SolidJS" />, document.getElementById("app")!);
diff --git a/examples/solid/tsconfig.json b/examples/solid/tsconfig.json
deleted file mode 100644
index 0ddfd47..0000000
--- a/examples/solid/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "jsx": "preserve",
-    "jsxImportSource": "solid-js",
-    "paths": {
-      "@ui": ["../../generated/ui/index.solid.ts"],
-      "@ui/*": ["../../generated/ui/*"]
-    }
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "../data/**/*.json"]
-}
diff --git a/examples/solid/vite.config.ts b/examples/solid/vite.config.ts
deleted file mode 100644
index eaeb8e2..0000000
--- a/examples/solid/vite.config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import path from "path";
-import { fileURLToPath } from "url";
-import { defineConfig } from "vite";
-import solid from "vite-plugin-solid";
-import { generatedUiRoot, serveExamplesStatic } from "../shared/vite-static";
-
-const rootDir = path.dirname(fileURLToPath(import.meta.url));
-
-export default defineConfig({
-  root: rootDir,
-  plugins: [solid(), serveExamplesStatic()],
-  resolve: {
-    alias: {
-      "@ui": path.join(generatedUiRoot, "index.solid.ts"),
-    },
-  },
-  server: {
-    port: 5178,
-    fs: {
-      allow: [path.resolve(rootDir, ".."), path.resolve(rootDir, "../../generated")],
-    },
-  },
-});
diff --git a/examples/svelte/dist/assets/index-Bluwn2uY.js b/examples/svelte/dist/assets/index-Bluwn2uY.js
deleted file mode 100644
index a3c266b..0000000
--- a/examples/svelte/dist/assets/index-Bluwn2uY.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var To=Object.defineProperty;var Vn=e=>{throw TypeError(e)};var Eo=(e,t,r)=>t in e?To(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var _e=(e,t,r)=>Eo(e,typeof t!="symbol"?t+"":t,r),en=(e,t,r)=>t.has(e)||Vn("Cannot "+r);var u=(e,t,r)=>(en(e,t,"read from private field"),r?r.call(e):t.get(e)),T=(e,t,r)=>t.has(e)?Vn("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,r),$=(e,t,r,n)=>(en(e,t,"write to private field"),n?n.call(e,r):t.set(e,r),r),M=(e,t,r)=>(en(e,t,"access private method"),r);(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))n(s);new MutationObserver(s=>{for(const o of s)if(o.type==="childList")for(const l of o.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&n(l)}).observe(document,{childList:!0,subtree:!0});function r(s){const o={};return s.integrity&&(o.integrity=s.integrity),s.referrerPolicy&&(o.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?o.credentials="include":s.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function n(s){if(s.ep)return;s.ep=!0;const o=r(s);fetch(s.href,o)}})();const xs=!1;var Cn=Array.isArray,Co=Array.prototype.indexOf,jr=Array.prototype.includes,Jr=Array.from,Ao=Object.defineProperty,dr=Object.getOwnPropertyDescriptor,ks=Object.getOwnPropertyDescriptors,Po=Object.prototype,Ro=Array.prototype,An=Object.getPrototypeOf,Kn=Object.isExtensible;const ie=()=>{};function No(e){return e()}function un(e){for(var t=0;t<e.length;t++)e[t]()}function $s(){var e,t,r=new Promise((n,s)=>{e=n,t=s});return{promise:r,resolve:e,reject:t}}const te=2,Ut=4,xr=8,Pn=1<<24,Oe=16,Le=32,ut=64,fn=128,Ce=512,W=1024,J=2048,Ue=4096,ce=8192,Ae=16384,Jt=32768,Bn=1<<25,Et=65536,Gr=1<<17,zo=1<<18,Yt=1<<19,Ss=1<<20,Qe=1<<25,Ct=65536,Dr=1<<21,It=1<<22,at=1<<23,kt=Symbol("$state"),Mo=Symbol(""),Mr=Symbol("attributes"),dn=Symbol("class"),hn=Symbol("style"),ir=Symbol("text"),Yr=new class extends Error{constructor(){super(...arguments);_e(this,"name","StaleReactionError");_e(this,"message","The reaction that called `getAbortSignal()` was re-run or destroyed")}};var _s;const Rn=!!((_s=globalThis.document)!=null&&_s.contentType)&&globalThis.document.contentType.includes("xml");function Oo(){throw new Error("https://svelte.dev/e/async_derived_orphan")}function Io(e,t,r){throw new Error("https://svelte.dev/e/each_key_duplicate")}function Lo(e){throw new Error("https://svelte.dev/e/effect_in_teardown")}function Fo(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function jo(e){throw new Error("https://svelte.dev/e/effect_orphan")}function Go(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function Do(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function Vo(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function Ko(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function Bo(){throw new Error("https://svelte.dev/e/svelte_boundary_reset_onerror")}const Uo=1,qo=2,Ho=16,Wo=1,Jo=2,U=Symbol("uninitialized"),Ts="http://www.w3.org/1999/xhtml",Yo="http://www.w3.org/2000/svg",Xo="@attach";function Zo(){console.warn("https://svelte.dev/e/derived_inert")}function Qo(){console.warn("https://svelte.dev/e/select_multiple_invalid_value")}function ei(){console.warn("https://svelte.dev/e/svelte_boundary_reset_noop")}function Es(e){return e===this.v}function ti(e,t){return e!=e?t==t:e!==t||e!==null&&typeof e=="object"||typeof e=="function"}function Cs(e){return!ti(e,this.v)}let Xr=!1,ri=!1;function ni(){Xr=!0}let q=null;function qt(e){q=e}function re(e,t=!1,r){q={p:q,i:!1,c:null,e:null,s:e,x:null,r:N,l:Xr&&!t?{s:null,u:null,$:[]}:null}}function ne(e){var t=q,r=t.e;if(r!==null){t.e=null;for(var n of r)Ys(n)}return t.i=!0,q=t.p,{}}function kr(){return!Xr||q!==null&&q.l===null}let Mt=[];function si(){var e=Mt;Mt=[],un(e)}function ct(e){if(Mt.length===0){var t=Mt;queueMicrotask(()=>{t===Mt&&si()})}Mt.push(e)}function As(e){var t=N;if(t===null)return P.f|=at,e;if((t.f&Jt)===0&&(t.f&Ut)===0)throw e;lt(e,t)}function lt(e,t){if(!(t!==null&&(t.f&Ae)!==0)){for(;t!==null;){if((t.f&fn)!==0){if((t.f&Jt)===0)throw e;try{t.b.error(e);return}catch(r){e=r}}t=t.parent}throw e}}const oi=-7169;function K(e,t){e.f=e.f&oi|t}function Nn(e){(e.f&Ce)!==0||e.deps===null?K(e,W):K(e,Ue)}function Ps(e){if(e!==null)for(const t of e)(t.f&te)===0||(t.f&Ct)===0||(t.f^=Ct,Ps(t.deps))}function Rs(e,t,r){(e.f&J)!==0?t.add(e):(e.f&Ue)!==0&&r.add(e),Ps(e.deps),K(e,W)}function ii(e){let t=0,r=Pt(0),n;return()=>{Ln()&&(y(r),Pi(()=>(t===0&&(n=uo(()=>e(()=>vr(r)))),t+=1,()=>{ct(()=>{t-=1,t===0&&(n==null||n(),n=void 0,vr(r))})})))}}var li=Et|Yt;function ai(e,t,r,n){new ci(e,t,r,n)}var Se,En,Te,mt,he,Ee,ae,we,Je,_t,ot,Ft,br,mr,Ye,qr,V,ui,fi,di,vn,Or,Ir,pn,gn;class ci{constructor(t,r,n,s){T(this,V);_e(this,"parent");_e(this,"is_pending",!1);_e(this,"transform_error");T(this,Se);T(this,En,null);T(this,Te);T(this,mt);T(this,he);T(this,Ee,null);T(this,ae,null);T(this,we,null);T(this,Je,null);T(this,_t,0);T(this,ot,0);T(this,Ft,!1);T(this,br,new Set);T(this,mr,new Set);T(this,Ye,null);T(this,qr,ii(()=>($(this,Ye,Pt(u(this,_t))),()=>{$(this,Ye,null)})));var o;$(this,Se,t),$(this,Te,r),$(this,mt,l=>{var i=N;i.b=this,i.f|=fn,n(l)}),this.parent=N.b,this.transform_error=s??((o=this.parent)==null?void 0:o.transform_error)??(l=>l),$(this,he,Qr(()=>{M(this,V,vn).call(this)},li))}defer_effect(t){Rs(t,u(this,br),u(this,mr))}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!u(this,Te).pending}update_pending_count(t,r){M(this,V,pn).call(this,t,r),$(this,_t,u(this,_t)+t),!(!u(this,Ye)||u(this,Ft))&&($(this,Ft,!0),ct(()=>{$(this,Ft,!1),u(this,Ye)&&Ht(u(this,Ye),u(this,_t))}))}get_effect_pending(){return u(this,qr).call(this),y(u(this,Ye))}error(t){if(!u(this,Te).onerror&&!u(this,Te).failed)throw t;S!=null&&S.is_fork?(u(this,Ee)&&S.skip_effect(u(this,Ee)),u(this,ae)&&S.skip_effect(u(this,ae)),u(this,we)&&S.skip_effect(u(this,we)),S.oncommit(()=>{M(this,V,gn).call(this,t)})):M(this,V,gn).call(this,t)}}Se=new WeakMap,En=new WeakMap,Te=new WeakMap,mt=new WeakMap,he=new WeakMap,Ee=new WeakMap,ae=new WeakMap,we=new WeakMap,Je=new WeakMap,_t=new WeakMap,ot=new WeakMap,Ft=new WeakMap,br=new WeakMap,mr=new WeakMap,Ye=new WeakMap,qr=new WeakMap,V=new WeakSet,ui=function(){try{$(this,Ee,ge(()=>u(this,mt).call(this,u(this,Se))))}catch(t){this.error(t)}},fi=function(t){const r=u(this,Te).failed;r&&$(this,we,ge(()=>{r(u(this,Se),()=>t,()=>()=>{})}))},di=function(){const t=u(this,Te).pending;t&&(this.is_pending=!0,$(this,ae,ge(()=>t(u(this,Se)))),ct(()=>{var r=$(this,Je,document.createDocumentFragment()),n=et();r.append(n),$(this,Ee,M(this,V,Ir).call(this,()=>ge(()=>u(this,mt).call(this,n)))),u(this,ot)===0&&(u(this,Se).before(r),$(this,Je,null),St(u(this,ae),()=>{$(this,ae,null)}),M(this,V,Or).call(this,S))}))},vn=function(){try{if(this.is_pending=this.has_pending_snippet(),$(this,ot,0),$(this,_t,0),$(this,Ee,ge(()=>{u(this,mt).call(this,u(this,Se))})),u(this,ot)>0){var t=$(this,Je,document.createDocumentFragment());Gn(u(this,Ee),t);const r=u(this,Te).pending;$(this,ae,ge(()=>r(u(this,Se))))}else M(this,V,Or).call(this,S)}catch(r){this.error(r)}},Or=function(t){this.is_pending=!1,t.transfer_effects(u(this,br),u(this,mr))},Ir=function(t){var r=N,n=P,s=q;qe(u(this,he)),Pe(u(this,he)),qt(u(this,he).ctx);try{return At.ensure(),t()}catch(o){return As(o),null}finally{qe(r),Pe(n),qt(s)}},pn=function(t,r){var n;if(!this.has_pending_snippet()){this.parent&&M(n=this.parent,V,pn).call(n,t,r);return}$(this,ot,u(this,ot)+t),u(this,ot)===0&&(M(this,V,Or).call(this,r),u(this,ae)&&St(u(this,ae),()=>{$(this,ae,null)}),u(this,Je)&&(u(this,Se).before(u(this,Je)),$(this,Je,null)))},gn=function(t){u(this,Ee)&&(ee(u(this,Ee)),$(this,Ee,null)),u(this,ae)&&(ee(u(this,ae)),$(this,ae,null)),u(this,we)&&(ee(u(this,we)),$(this,we,null));var r=u(this,Te).onerror;let n=u(this,Te).failed;var s=!1,o=!1;const l=()=>{if(s){ei();return}s=!0,o&&Bo(),u(this,we)!==null&&St(u(this,we),()=>{$(this,we,null)}),M(this,V,Ir).call(this,()=>{M(this,V,vn).call(this)})},i=c=>{try{o=!0,r==null||r(c,l),o=!1}catch(a){lt(a,u(this,he)&&u(this,he).parent)}n&&$(this,we,M(this,V,Ir).call(this,()=>{try{return ge(()=>{var a=N;a.b=this,a.f|=fn,n(u(this,Se),()=>c,()=>l)})}catch(a){return lt(a,u(this,he).parent),null}}))};ct(()=>{var c;try{c=this.transform_error(t)}catch(a){lt(a,u(this,he)&&u(this,he).parent);return}c!==null&&typeof c=="object"&&typeof c.then=="function"?c.then(i,a=>lt(a,u(this,he)&&u(this,he).parent)):i(c)})};function Ns(e,t,r,n){const s=kr()?Zr:Ms;var o=e.filter(p=>!p.settled),l=t.map(s);if(r.length===0&&o.length===0){n(l);return}var i=N,c=hi(),a=o.length===1?o[0].promise:o.length>1?Promise.all(o.map(p=>p.promise)):null;function h(p){if((i.f&Ae)===0){c();try{n([...l,...p])}catch(d){lt(d,i)}Vr()}}var v=zs();if(r.length===0){a.then(()=>h([])).finally(v);return}function f(){Promise.all(r.map(p=>vi(p))).then(h).catch(p=>lt(p,i)).finally(v)}a?a.then(()=>{c(),f(),Vr()}):f()}function hi(){var e=N,t=P,r=q,n=S;return function(o=!0){qe(e),Pe(t),qt(r),o&&(e.f&Ae)===0&&(n==null||n.activate(),n==null||n.apply())}}function Vr(e=!0){qe(null),Pe(null),qt(null),e&&(S==null||S.deactivate())}function zs(){var e=N,t=e.b,r=S,n=!!(t!=null&&t.is_rendered());return t==null||t.update_pending_count(1,r),r.increment(n,e),()=>{t==null||t.update_pending_count(-1,r),r.decrement(n,e)}}function Zr(e){var t=te|J;return N!==null&&(N.f|=Yt),{ctx:q,deps:null,effects:null,equals:Es,f:t,fn:e,reactions:null,rv:0,v:U,wv:0,parent:N,ac:null}}const lr=Symbol("obsolete");function vi(e,t,r){let n=N;n===null&&Oo();var s=void 0,o=Pt(U),l=!P,i=new Set;return Ai(()=>{var p,d;var c=N,a=$s();s=a.promise;try{Promise.resolve(e()).then(a.resolve,g=>{g!==Yr&&a.reject(g)}).finally(Vr)}catch(g){a.reject(g),Vr()}var h=S;if(l){if((c.f&Jt)!==0)var v=zs();if((p=n.b)!=null&&p.is_rendered())(d=h.async_deriveds.get(c))==null||d.reject(lr);else for(const g of i.values())g.reject(lr);i.add(a),h.async_deriveds.set(c,a)}const f=(g,m=void 0)=>{v==null||v(),i.delete(a),m!==lr&&(h.activate(),m?(o.f|=at,Ht(o,m)):((o.f&at)!==0&&(o.f^=at),Ht(o,g)),h.deactivate())};a.promise.then(f,g=>f(null,g||"unknown"))}),Fn(()=>{for(const c of i)c.reject(lr)}),new Promise(c=>{function a(h){function v(){h===s?c(o):a(s)}h.then(v,v)}a(s)})}function D(e){const t=Zr(e);return no(t),t}function Ms(e){const t=Zr(e);return t.equals=Cs,t}function pi(e){var t=e.effects;if(t!==null){e.effects=null;for(var r=0;r<t.length;r+=1)ee(t[r])}}function zn(e){var t,r=N,n=e.parent;if(!ft&&n!==null&&e.v!==U&&(n.f&(Ae|ce))!==0)return Zo(),e.v;qe(n);try{e.f&=~Ct,pi(e),t=lo(e)}finally{qe(r)}return t}function Os(e){var t=zn(e);if(!e.equals(t)&&(e.wv=oo(),(!(S!=null&&S.is_fork)||e.deps===null)&&(S!==null?(S.capture(e,t,!0),hr==null||hr.capture(e,t,!0)):e.v=t,e.deps===null))){K(e,W);return}ft||(Q!==null?(Ln()||S!=null&&S.is_fork)&&Q.set(e,t):Nn(e))}function gi(e){var t,r;if(e.effects!==null)for(const n of e.effects)(n.teardown||n.ac)&&((t=n.teardown)==null||t.call(n),(r=n.ac)==null||r.abort(Yr),n.fn!==null&&(n.teardown=ie),n.ac=null,pr(n,0),jn(n))}function Is(e){if(e.effects!==null)for(const t of e.effects)t.teardown&&t.fn!==null&&Wt(t)}let tn=null,Nt=null,S=null,hr=null,Q=null,bn=null,rn=!1,Ot=null,Lr=null;var Un=0;let bi=1;var jt,it,yt,Gt,Dt,Vt,Xe,Kt,ve,_r,Ze,ze,Ve,Bt,wt,I,mn,ar,_n,Ls,Fs,zt,mi,cr;const Hr=class Hr{constructor(){T(this,I);_e(this,"id",bi++);T(this,jt,!1);_e(this,"linked",!0);T(this,it,null);T(this,yt,null);_e(this,"async_deriveds",new Map);_e(this,"current",new Map);_e(this,"previous",new Map);T(this,Gt,new Set);T(this,Dt,new Set);T(this,Vt,0);T(this,Xe,new Map);T(this,Kt,null);T(this,ve,[]);T(this,_r,[]);T(this,Ze,new Set);T(this,ze,new Set);T(this,Ve,new Map);T(this,Bt,new Set);_e(this,"is_fork",!1);T(this,wt,!1);Nt===null?tn=Nt=this:($(Nt,yt,this),$(this,it,Nt)),Nt=this}skip_effect(t){u(this,Ve).has(t)||u(this,Ve).set(t,{d:[],m:[]}),u(this,Bt).delete(t)}unskip_effect(t,r=n=>this.schedule(n)){var n=u(this,Ve).get(t);if(n){u(this,Ve).delete(t);for(var s of n.d)K(s,J),r(s);for(s of n.m)K(s,Ue),r(s)}u(this,Bt).add(t)}capture(t,r,n=!1){t.v!==U&&!this.previous.has(t)&&this.previous.set(t,t.v),(t.f&at)===0&&(this.current.set(t,[r,n]),Q==null||Q.set(t,r)),this.is_fork||(t.v=r)}activate(){S=this}deactivate(){S=null,Q=null}flush(){try{rn=!0,S=this,M(this,I,ar).call(this)}finally{Un=0,bn=null,Ot=null,Lr=null,rn=!1,S=null,Q=null,$t.clear()}}discard(){var t;for(const r of u(this,Dt))r(this);u(this,Dt).clear();for(const r of this.async_deriveds.values())r.reject(lr);M(this,I,cr).call(this),(t=u(this,Kt))==null||t.resolve()}register_created_effect(t){u(this,_r).push(t)}increment(t,r){if($(this,Vt,u(this,Vt)+1),t){let n=u(this,Xe).get(r)??0;u(this,Xe).set(r,n+1)}}decrement(t,r){if($(this,Vt,u(this,Vt)-1),t){let n=u(this,Xe).get(r)??0;n===1?u(this,Xe).delete(r):u(this,Xe).set(r,n-1)}u(this,wt)||($(this,wt,!0),ct(()=>{$(this,wt,!1),this.linked&&this.flush()}))}transfer_effects(t,r){for(const n of t)u(this,Ze).add(n);for(const n of r)u(this,ze).add(n);t.clear(),r.clear()}oncommit(t){u(this,Gt).add(t)}ondiscard(t){u(this,Dt).add(t)}settled(){return(u(this,Kt)??$(this,Kt,$s())).promise}static ensure(){if(S===null){const t=S=new Hr;rn||ct(()=>{u(t,jt)||t.flush()})}return S}apply(){{Q=null;return}}schedule(t){var s;if(bn=t,(s=t.b)!=null&&s.is_pending&&(t.f&(Ut|xr|Pn))!==0&&(t.f&Jt)===0){t.b.defer_effect(t);return}for(var r=t;r.parent!==null;){r=r.parent;var n=r.f;if(Ot!==null&&r===N&&(P===null||(P.f&te)===0))return;if((n&(ut|Le))!==0){if((n&W)===0)return;r.f^=W}}u(this,ve).push(r)}};jt=new WeakMap,it=new WeakMap,yt=new WeakMap,Gt=new WeakMap,Dt=new WeakMap,Vt=new WeakMap,Xe=new WeakMap,Kt=new WeakMap,ve=new WeakMap,_r=new WeakMap,Ze=new WeakMap,ze=new WeakMap,Ve=new WeakMap,Bt=new WeakMap,wt=new WeakMap,I=new WeakSet,mn=function(){if(this.is_fork)return!0;for(const n of u(this,Xe).keys()){for(var t=n,r=!1;t.parent!==null;){if(u(this,Ve).has(t)){r=!0;break}t=t.parent}if(!r)return!0}return!1},ar=function(){var c,a,h,v;$(this,jt,!0),Un++>1e3&&(M(this,I,cr).call(this),_i());for(const f of u(this,Ze))u(this,ze).delete(f),K(f,J),this.schedule(f);for(const f of u(this,ze))K(f,Ue),this.schedule(f);const t=u(this,ve);$(this,ve,[]),this.apply();var r=Ot=[],n=[],s=Lr=[];for(const f of t)try{M(this,I,_n).call(this,f,r,n)}catch(p){throw Ds(f),M(this,I,mn).call(this)||this.discard(),p}if(S=null,s.length>0){var o=Hr.ensure();for(const f of s)o.schedule(f)}if(Ot=null,Lr=null,M(this,I,mn).call(this)){M(this,I,zt).call(this,n),M(this,I,zt).call(this,r);for(const[f,p]of u(this,Ve))Gs(f,p);s.length>0&&M(c=S,I,ar).call(c);return}const l=M(this,I,Ls).call(this);if(l){M(this,I,zt).call(this,n),M(this,I,zt).call(this,r),M(a=l,I,Fs).call(a,this);return}u(this,Ze).clear(),u(this,ze).clear();for(const f of u(this,Gt))f(this);u(this,Gt).clear(),hr=this,qn(n),qn(r),hr=null,(h=u(this,Kt))==null||h.resolve();var i=S;if(u(this,Vt)===0&&(u(this,ve).length===0||i!==null)&&M(this,I,cr).call(this),u(this,ve).length>0)if(i!==null){const f=i;u(f,ve).push(...u(this,ve).filter(p=>!u(f,ve).includes(p)))}else i=this;i!==null&&M(v=i,I,ar).call(v)},_n=function(t,r,n){t.f^=W;for(var s=t.first;s!==null;){var o=s.f,l=(o&(Le|ut))!==0,i=l&&(o&W)!==0,c=i||(o&ce)!==0||u(this,Ve).has(s);if(!c&&s.fn!==null){l?s.f^=W:(o&Ut)!==0?r.push(s):Sr(s)&&((o&Oe)!==0&&u(this,ze).add(s),Wt(s));var a=s.first;if(a!==null){s=a;continue}}for(;s!==null;){var h=s.next;if(h!==null){s=h;break}s=s.parent}}},Ls=function(){for(var t=u(this,it);t!==null;){if(!t.is_fork){for(const[r,[,n]]of this.current)if(t.current.has(r)&&!n)return t}t=u(t,it)}return null},Fs=function(t){var n;for(const[s,o]of t.current)!this.previous.has(s)&&t.previous.has(s)&&this.previous.set(s,t.previous.get(s)),this.current.set(s,o);for(const[s,o]of t.async_deriveds){const l=this.async_deriveds.get(s);l&&o.promise.then(l.resolve).catch(l.reject)}t.async_deriveds.clear(),this.transfer_effects(u(t,Ze),u(t,ze));const r=s=>{var o=s.reactions;if(o!==null)for(const c of o){var l=c.f;if((l&te)!==0)r(c);else{var i=c;l&(It|Oe)&&!this.async_deriveds.has(i)&&(u(this,ze).delete(i),K(i,J),this.schedule(i))}}};for(const s of this.current.keys())r(s);this.oncommit(()=>t.discard()),M(n=t,I,cr).call(n),S=this,M(this,I,ar).call(this)},zt=function(t){for(var r=0;r<t.length;r+=1)Rs(t[r],u(this,Ze),u(this,ze))},mi=function(){var v;for(let f=tn;f!==null;f=u(f,yt)){var t=f.id<this.id,r=[];for(const[p,[d,g]]of this.current){if(f.current.has(p)){var n=f.current.get(p)[0];if(t&&d!==n)f.current.set(p,[d,g]);else continue}r.push(p)}if(t)for(const[p,d]of this.async_deriveds){const g=f.async_deriveds.get(p);g&&d.promise.then(g.resolve).catch(g.reject)}var s=[...f.current.keys()].filter(p=>!f.current.get(p)[1]);if(!(!u(f,jt)||s.length===0)){var o=s.filter(p=>!this.current.has(p));if(o.length===0)t&&f.discard();else if(r.length>0){if(t)for(const p of u(this,Bt))f.unskip_effect(p,d=>{var g;(d.f&(Oe|It))!==0?f.schedule(d):M(g=f,I,zt).call(g,[d])});f.activate();var l=new Set,i=new Map;for(var c of r)js(c,o,l,i);i=new Map;var a=[...f.current].filter(([p,d])=>{const g=this.current.get(p);return g?g[0]!==d[0]||g[1]!==d[1]:!0}).map(([p])=>p);if(a.length>0)for(const p of u(this,_r))(p.f&(Ae|ce|Gr))===0&&Mn(p,a,i)&&((p.f&(It|Oe))!==0?(K(p,J),f.schedule(p)):u(f,Ze).add(p));if(u(f,ve).length>0&&!u(f,wt)){f.apply();for(var h of u(f,ve))M(v=f,I,_n).call(v,h,[],[]);$(f,ve,[])}f.deactivate()}}}},cr=function(){if(this.linked){var t=u(this,it),r=u(this,yt);t===null?tn=r:$(t,yt,r),r===null?Nt=t:$(r,it,t),this.linked=!1}};let At=Hr;function _i(){try{Go()}catch(e){lt(e,bn)}}let Ne=null;function qn(e){var t=e.length;if(t!==0){for(var r=0;r<t;){var n=e[r++];if((n.f&(Ae|ce))===0&&Sr(n)&&(Ne=new Set,Wt(n),n.deps===null&&n.first===null&&n.nodes===null&&n.teardown===null&&n.ac===null&&eo(n),(Ne==null?void 0:Ne.size)>0)){$t.clear();for(const s of Ne){if((s.f&(Ae|ce))!==0)continue;const o=[s];let l=s.parent;for(;l!==null;)Ne.has(l)&&(Ne.delete(l),o.push(l)),l=l.parent;for(let i=o.length-1;i>=0;i--){const c=o[i];(c.f&(Ae|ce))===0&&Wt(c)}}Ne.clear()}}Ne=null}}function js(e,t,r,n){if(!r.has(e)&&(r.add(e),e.reactions!==null))for(const s of e.reactions){const o=s.f;(o&te)!==0?js(s,t,r,n):(o&(It|Oe))!==0&&(o&J)===0&&Mn(s,t,n)&&(K(s,J),On(s))}}function Mn(e,t,r){const n=r.get(e);if(n!==void 0)return n;if(e.deps!==null)for(const s of e.deps){if(jr.call(t,s))return!0;if((s.f&te)!==0&&Mn(s,t,r))return r.set(s,!0),!0}return r.set(e,!1),!1}function On(e){S.schedule(e)}function Gs(e,t){if(!((e.f&Le)!==0&&(e.f&W)!==0)){(e.f&J)!==0?t.d.push(e):(e.f&Ue)!==0&&t.m.push(e),K(e,W);for(var r=e.first;r!==null;)Gs(r,t),r=r.next}}function Ds(e){K(e,W);for(var t=e.first;t!==null;)Ds(t),t=t.next}let Kr=new Set;const $t=new Map;let Vs=!1;function Pt(e,t){var r={f:0,v:e,reactions:null,equals:Es,rv:0,wv:0};return r}function tt(e,t){const r=Pt(e);return no(r),r}function yi(e,t=!1,r=!0){var s;const n=Pt(e);return t||(n.equals=Cs),Xr&&r&&q!==null&&q.l!==null&&((s=q.l).s??(s.s=[])).push(n),n}function pt(e,t,r=!1){P!==null&&(!Ie||(P.f&Gr)!==0)&&kr()&&(P.f&(te|Oe|It|Gr))!==0&&(Be===null||!Be.has(e))&&Ko();let n=r?ur(t):t;return Ht(e,n,Lr)}function Ht(e,t,r=null){if(!e.equals(t)){$t.set(e,ft?t:e.v);var n=At.ensure();if(n.capture(e,t),(e.f&te)!==0){const s=e;(e.f&J)!==0&&zn(s),Q===null&&Nn(s)}e.wv=oo(),Ks(e,J,r),kr()&&N!==null&&(N.f&W)!==0&&(N.f&(Le|ut))===0&&($e===null?zi([e]):$e.push(e)),!n.is_fork&&Kr.size>0&&!Vs&&wi()}return t}function wi(){Vs=!1;for(const e of Kr){(e.f&W)!==0&&K(e,Ue);let t;try{t=Sr(e)}catch{t=!0}t&&Wt(e)}Kr.clear()}function vr(e){pt(e,e.v+1)}function Ks(e,t,r){var n=e.reactions;if(n!==null)for(var s=kr(),o=n.length,l=0;l<o;l++){var i=n[l],c=i.f;if(!(!s&&i===N)){var a=(c&J)===0;if(a&&K(i,t),(c&Gr)!==0)Kr.add(i);else if((c&te)!==0){var h=i;Q==null||Q.delete(h),(c&Ct)===0&&(c&Ce&&(N===null||(N.f&Dr)===0)&&(i.f|=Ct),Ks(h,Ue,r))}else if(a){var v=i;(c&Oe)!==0&&Ne!==null&&Ne.add(v),r!==null?r.push(v):On(v)}}}}function ur(e){if(typeof e!="object"||e===null||kt in e)return e;const t=An(e);if(t!==Po&&t!==Ro)return e;var r=new Map,n=Cn(e),s=tt(0),o=Tt,l=i=>{if(Tt===o)return i();var c=P,a=Tt;Pe(null),Xn(o);var h=i();return Pe(c),Xn(a),h};return n&&r.set("length",tt(e.length)),new Proxy(e,{defineProperty(i,c,a){(!("value"in a)||a.configurable===!1||a.enumerable===!1||a.writable===!1)&&Do();var h=r.get(c);return h===void 0?l(()=>{var v=tt(a.value);return r.set(c,v),v}):pt(h,a.value,!0),!0},deleteProperty(i,c){var a=r.get(c);if(a===void 0){if(c in i){const h=l(()=>tt(U));r.set(c,h),vr(s)}}else pt(a,U),vr(s);return!0},get(i,c,a){var p;if(c===kt)return e;var h=r.get(c),v=c in i;if(h===void 0&&(!v||(p=dr(i,c))!=null&&p.writable)&&(h=l(()=>{var d=ur(v?i[c]:U),g=tt(d);return g}),r.set(c,h)),h!==void 0){var f=y(h);return f===U?void 0:f}return Reflect.get(i,c,a)},getOwnPropertyDescriptor(i,c){var a=Reflect.getOwnPropertyDescriptor(i,c);if(a&&"value"in a){var h=r.get(c);h&&(a.value=y(h))}else if(a===void 0){var v=r.get(c),f=v==null?void 0:v.v;if(v!==void 0&&f!==U)return{enumerable:!0,configurable:!0,value:f,writable:!0}}return a},has(i,c){var f;if(c===kt)return!0;var a=r.get(c),h=a!==void 0&&a.v!==U||Reflect.has(i,c);if(a!==void 0||N!==null&&(!h||(f=dr(i,c))!=null&&f.writable)){a===void 0&&(a=l(()=>{var p=h?ur(i[c]):U,d=tt(p);return d}),r.set(c,a));var v=y(a);if(v===U)return!1}return h},set(i,c,a,h){var C;var v=r.get(c),f=c in i;if(n&&c==="length")for(var p=a;p<v.v;p+=1){var d=r.get(p+"");d!==void 0?pt(d,U):p in i&&(d=l(()=>tt(U)),r.set(p+"",d))}if(v===void 0)(!f||(C=dr(i,c))!=null&&C.writable)&&(v=l(()=>tt(void 0)),pt(v,ur(a)),r.set(c,v));else{f=v.v!==U;var g=l(()=>ur(a));pt(v,g)}var m=Reflect.getOwnPropertyDescriptor(i,c);if(m!=null&&m.set&&m.set.call(h,a),!f){if(n&&typeof c=="string"){var b=r.get("length"),_=Number(c);Number.isInteger(_)&&_>=b.v&&pt(b,_+1)}vr(s)}return!0},ownKeys(i){y(s);var c=Reflect.ownKeys(i).filter(v=>{var f=r.get(v);return f===void 0||f.v!==U});for(var[a,h]of r)h.v!==U&&!(a in i)&&c.push(a);return c},setPrototypeOf(){Vo()}})}function Hn(e){try{if(e!==null&&typeof e=="object"&&kt in e)return e[kt]}catch{}return e}function xi(e,t){return Object.is(Hn(e),Hn(t))}var Wn,Bs,Us,qs;function ki(){if(Wn===void 0){Wn=window,Bs=/Firefox/.test(navigator.userAgent);var e=Element.prototype,t=Node.prototype,r=Text.prototype;Us=dr(t,"firstChild").get,qs=dr(t,"nextSibling").get,Kn(e)&&(e[dn]=void 0,e[Mr]=null,e[hn]=void 0,e.__e=void 0),Kn(r)&&(r[ir]=void 0)}}function et(e=""){return document.createTextNode(e)}function Br(e){return Us.call(e)}function $r(e){return qs.call(e)}function dt(e,t){return Br(e)}function G(e,t=!1){{var r=Br(e);return r instanceof Comment&&r.data===""?$r(r):r}}function se(e,t=1,r=!1){let n=e;for(;t--;)n=$r(n);return n}function $i(e){e.textContent=""}function Hs(){return!1}function Ws(e,t,r){return t==null||t===Ts?r?document.createElement(e,{is:r}):document.createElement(e):r?document.createElementNS(t,e,{is:r}):document.createElementNS(t,e)}function Si(e,t){if(t){const r=document.body;e.autofocus=!0,ct(()=>{document.activeElement===r&&e.focus()})}}function In(e){var t=P,r=N;Pe(null),qe(null);try{return e()}finally{Pe(t),qe(r)}}function Js(e){N===null&&(P===null&&jo(),Fo()),ft&&Lo()}function Ti(e,t){var r=t.last;r===null?t.last=t.first=e:(r.next=e,e.prev=r,t.last=e)}function Fe(e,t){var r=N;r!==null&&(r.f&ce)!==0&&(e|=ce);var n={ctx:q,deps:null,nodes:null,f:e|J|Ce,first:null,fn:t,last:null,next:null,parent:r,b:r&&r.b,prev:null,teardown:null,wv:0,ac:null};S==null||S.register_created_effect(n);var s=n;if((e&Ut)!==0)Ot!==null?Ot.push(n):At.ensure().schedule(n);else if(t!==null){try{Wt(n)}catch(l){throw ee(n),l}s.deps===null&&s.teardown===null&&s.nodes===null&&s.first===s.last&&(s.f&Yt)===0&&(s=s.first,(e&Oe)!==0&&(e&Et)!==0&&s!==null&&(s.f|=Et))}if(s!==null&&(s.parent=r,r!==null&&Ti(s,r),P!==null&&(P.f&te)!==0&&(e&ut)===0)){var o=P;(o.effects??(o.effects=[])).push(s)}return n}function Ln(){return P!==null&&!Ie}function Fn(e){const t=Fe(xr,null);return K(t,W),t.teardown=e,t}function Jn(e){Js();var t=N.f,r=!P&&(t&Le)!==0&&q!==null&&!q.i;if(r){var n=q;(n.e??(n.e=[])).push(e)}else return Ys(e)}function Ys(e){return Fe(Ut|Ss,e)}function Ei(e){return Js(),Fe(xr|Ss,e)}function Ci(e){At.ensure();const t=Fe(ut|Yt,e);return(r={})=>new Promise(n=>{r.outro?St(t,()=>{ee(t),n(void 0)}):(ee(t),n(void 0))})}function Xs(e){return Fe(Ut,e)}function Ai(e){return Fe(It|Yt,e)}function Pi(e,t=0){return Fe(xr|t,e)}function Zt(e,t=[],r=[],n=[]){Ns(n,t,r,s=>{Fe(xr,()=>{e(...s.map(y))})})}function Qr(e,t=0){var r=Fe(Oe|t,e);return r}function Zs(e,t=0){var r=Fe(Pn|t,e);return r}function ge(e){return Fe(Le|Yt,e)}function Qs(e){var t=e.teardown;if(t!==null){const r=ft,n=P;Yn(!0),Pe(null);try{t.call(null)}finally{Yn(r),Pe(n)}}}function jn(e,t=!1){var r=e.first;for(e.first=e.last=null;r!==null;){const s=r.ac;s!==null&&In(()=>{s.abort(Yr)});var n=r.next;(r.f&ut)!==0?r.parent=null:ee(r,t),r=n}}function Ri(e){for(var t=e.first;t!==null;){var r=t.next;(t.f&Le)===0&&ee(t),t=r}}function ee(e,t=!0){var r=!1;(t||(e.f&zo)!==0)&&e.nodes!==null&&e.nodes.end!==null&&(Ni(e.nodes.start,e.nodes.end),r=!0),e.f|=Bn,jn(e,t&&!r),pr(e,0);var n=e.nodes&&e.nodes.t;if(n!==null)for(const o of n)o.stop();Qs(e),e.f^=Bn,e.f|=Ae;var s=e.parent;s!==null&&s.first!==null&&eo(e),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes=e.ac=e.b=null}function Ni(e,t){for(;e!==null;){var r=e===t?null:$r(e);e.remove(),e=r}}function eo(e){var t=e.parent,r=e.prev,n=e.next;r!==null&&(r.next=n),n!==null&&(n.prev=r),t!==null&&(t.first===e&&(t.first=n),t.last===e&&(t.last=r))}function St(e,t,r=!0){var n=[];to(e,n,!0);var s=()=>{r&&ee(e),t&&t()},o=n.length;if(o>0){var l=()=>--o||s();for(var i of n)i.out(l)}else s()}function to(e,t,r){if((e.f&ce)===0){e.f^=ce;var n=e.nodes&&e.nodes.t;if(n!==null)for(const i of n)(i.is_global||r)&&t.push(i);for(var s=e.first;s!==null;){var o=s.next;if((s.f&ut)===0){var l=(s.f&Et)!==0||(s.f&Le)!==0&&(e.f&Oe)!==0;to(s,t,l?r:!1)}s=o}}}function Ur(e){ro(e,!0)}function ro(e,t){if((e.f&ce)!==0){e.f^=ce,(e.f&W)===0&&(K(e,J),At.ensure().schedule(e));for(var r=e.first;r!==null;){var n=r.next,s=(r.f&Et)!==0||(r.f&Le)!==0;ro(r,s?t:!1),r=n}var o=e.nodes&&e.nodes.t;if(o!==null)for(const l of o)(l.is_global||t)&&l.in()}}function Gn(e,t){if(e.nodes)for(var r=e.nodes.start,n=e.nodes.end;r!==null;){var s=r===n?null:$r(r);t.append(r),r=s}}let Fr=!1,ft=!1;function Yn(e){ft=e}let P=null,Ie=!1;function Pe(e){P=e}let N=null;function qe(e){N=e}let Be=null;function no(e){P!==null&&(Be??(Be=new Set)).add(e)}let pe=null,ye=0,$e=null;function zi(e){$e=e}let so=1,gt=0,Tt=gt;function Xn(e){Tt=e}function oo(){return++so}function Sr(e){var t=e.f;if((t&J)!==0)return!0;if(t&te&&(e.f&=~Ct),(t&Ue)!==0){for(var r=e.deps,n=r.length,s=0;s<n;s++){var o=r[s];if(Sr(o)&&Os(o),o.wv>e.wv)return!0}(t&Ce)!==0&&Q===null&&K(e,W)}return!1}function io(e,t,r=!0){var n=e.reactions;if(n!==null&&!(Be!==null&&Be.has(e)))for(var s=0;s<n.length;s++){var o=n[s];(o.f&te)!==0?io(o,t,!1):t===o&&(r?K(o,J):(o.f&W)!==0&&K(o,Ue),On(o))}}function lo(e){var g;var t=pe,r=ye,n=$e,s=P,o=Be,l=q,i=Ie,c=Tt,a=e.f;pe=null,ye=0,$e=null,P=(a&(Le|ut))===0?e:null,Be=null,qt(e.ctx),Ie=!1,Tt=++gt,e.ac!==null&&(In(()=>{e.ac.abort(Yr)}),e.ac=null);try{e.f|=Dr;var h=e.fn,v=h();e.f|=Jt;var f=e.deps,p=S==null?void 0:S.is_fork;if(pe!==null){var d;if(p||pr(e,ye),f!==null&&ye>0)for(f.length=ye+pe.length,d=0;d<pe.length;d++)f[ye+d]=pe[d];else e.deps=f=pe;if(Ln()&&(e.f&Ce)!==0)for(d=ye;d<f.length;d++)((g=f[d]).reactions??(g.reactions=[])).push(e)}else!p&&f!==null&&ye<f.length&&(pr(e,ye),f.length=ye);if(kr()&&$e!==null&&!Ie&&f!==null&&(e.f&(te|Ue|J))===0)for(d=0;d<$e.length;d++)io($e[d],e);if(s!==null&&s!==e){if(gt++,s.deps!==null)for(let m=0;m<r;m+=1)s.deps[m].rv=gt;if(t!==null)for(const m of t)m.rv=gt;$e!==null&&(n===null?n=$e:n.push(...$e))}return(e.f&at)!==0&&(e.f^=at),v}catch(m){return As(m)}finally{e.f^=Dr,pe=t,ye=r,$e=n,P=s,Be=o,qt(l),Ie=i,Tt=c}}function Mi(e,t){let r=t.reactions;if(r!==null){var n=Co.call(r,e);if(n!==-1){var s=r.length-1;s===0?r=t.reactions=null:(r[n]=r[s],r.pop())}}if(r===null&&(t.f&te)!==0&&(pe===null||!jr.call(pe,t))){var o=t;(o.f&Ce)!==0&&(o.f^=Ce,o.f&=~Ct),o.v!==U&&Nn(o),gi(o),pr(o,0)}}function pr(e,t){var r=e.deps;if(r!==null)for(var n=t;n<r.length;n++)Mi(e,r[n])}function Wt(e){var t=e.f;if((t&Ae)===0){K(e,W);var r=N,n=Fr;N=e,Fr=!0;try{(t&(Oe|Pn))!==0?Ri(e):jn(e),Qs(e);var s=lo(e);e.teardown=typeof s=="function"?s:null,e.wv=so;var o;xs&&ri&&(e.f&J)!==0&&e.deps}finally{Fr=n,N=r}}}function y(e){var t=e.f,r=(t&te)!==0;if(P!==null&&!Ie){var n=N!==null&&(N.f&Ae)!==0;if(!n&&(Be===null||!Be.has(e))){var s=P.deps;if((P.f&Dr)!==0)e.rv<gt&&(e.rv=gt,pe===null&&s!==null&&s[ye]===e?ye++:pe===null?pe=[e]:pe.push(e));else{P.deps??(P.deps=[]),jr.call(P.deps,e)||P.deps.push(e);var o=e.reactions;o===null?e.reactions=[P]:jr.call(o,P)||o.push(P)}}}if(ft&&$t.has(e))return $t.get(e);if(r){var l=e;if(ft){var i=l.v;return((l.f&W)===0&&l.reactions!==null||co(l))&&(i=zn(l)),$t.set(l,i),i}var c=(l.f&Ce)===0&&!Ie&&P!==null&&(Fr||(P.f&Ce)!==0),a=(l.f&Jt)===0;Sr(l)&&(c&&(l.f|=Ce),Os(l)),c&&!a&&(Is(l),ao(l))}if(Q!=null&&Q.has(e))return Q.get(e);if((e.f&at)!==0)throw e.v;return e.v}function ao(e){if(e.f|=Ce,e.deps!==null)for(const t of e.deps)(t.reactions??(t.reactions=[])).push(e),(t.f&te)!==0&&(t.f&Ce)===0&&(Is(t),ao(t))}function co(e){if(e.v===U)return!0;if(e.deps===null)return!1;for(const t of e.deps)if($t.has(t)||(t.f&te)!==0&&co(t))return!0;return!1}function uo(e){var t=Ie;try{return Ie=!0,e()}finally{Ie=t}}function Oi(e){if(!(typeof e!="object"||!e||e instanceof EventTarget)){if(kt in e)yn(e);else if(!Array.isArray(e))for(let t in e){const r=e[t];typeof r=="object"&&r&&kt in r&&yn(r)}}}function yn(e,t=new Set){if(typeof e=="object"&&e!==null&&!(e instanceof EventTarget)&&!t.has(e)){t.add(e),e instanceof Date&&e.getTime();for(let n in e)try{yn(e[n],t)}catch{}const r=An(e);if(r!==Object.prototype&&r!==Array.prototype&&r!==Map.prototype&&r!==Set.prototype&&r!==Date.prototype){const n=ks(r);for(let s in n){const o=n[s].get;if(o)try{o.call(e)}catch{}}}}}function Ii(e){return e.endsWith("capture")&&e!=="gotpointercapture"&&e!=="lostpointercapture"}const Li=["beforeinput","click","change","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"];function Fi(e){return Li.includes(e)}const ji={formnovalidate:"formNoValidate",ismap:"isMap",nomodule:"noModule",playsinline:"playsInline",readonly:"readOnly",defaultvalue:"defaultValue",defaultchecked:"defaultChecked",srcobject:"srcObject",novalidate:"noValidate",allowfullscreen:"allowFullscreen",disablepictureinpicture:"disablePictureInPicture",disableremoteplayback:"disableRemotePlayback"};function Gi(e){return e=e.toLowerCase(),ji[e]??e}const Di=["touchstart","touchmove"];function Vi(e){return Di.includes(e)}const bt=Symbol("events"),fo=new Set,wn=new Set;function Ki(e,t,r,n={}){function s(o){if(n.capture||xn.call(t,o),!o.cancelBubble)return In(()=>r==null?void 0:r.call(this,o))}return e.startsWith("pointer")||e.startsWith("touch")||e==="wheel"?ct(()=>{t.addEventListener(e,s,n)}):t.addEventListener(e,s,n),s}function Bi(e,t,r){(t[bt]??(t[bt]={}))[e]=r}function Ui(e){for(var t=0;t<e.length;t++)fo.add(e[t]);for(var r of wn)r(e)}let Zn=null;function xn(e){var g,m;var t=this,r=t.ownerDocument,n=e.type,s=((g=e.composedPath)==null?void 0:g.call(e))||[],o=s[0]||e.target;Zn=e;var l=0,i=Zn===e&&e[bt];if(i){var c=s.indexOf(i);if(c!==-1&&(t===document||t===window)){e[bt]=t;return}var a=s.indexOf(t);if(a===-1)return;c<=a&&(l=c)}if(o=s[l]||e.target,o!==t){Ao(e,"currentTarget",{configurable:!0,get(){return o||r}});var h=P,v=N;Pe(null),qe(null);try{for(var f,p=[];o!==null&&o!==t;){try{var d=(m=o[bt])==null?void 0:m[n];d!=null&&(!o.disabled||e.target===o)&&d.call(o,e)}catch(b){f?p.push(b):f=b}if(e.cancelBubble)break;l++,o=l<s.length?s[l]:null}if(f){for(let b of p)queueMicrotask(()=>{throw b});throw f}}finally{e[bt]=t,delete e.currentTarget,Pe(h),qe(v)}}}var ys;const nn=((ys=globalThis==null?void 0:globalThis.window)==null?void 0:ys.trustedTypes)&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:e=>e});function qi(e){return(nn==null?void 0:nn.createHTML(e))??e}function Hi(e){var t=Ws("template");return t.innerHTML=qi(e.replaceAll("<!>","<!---->")),t.content}function gr(e,t){var r=N;r.nodes===null&&(r.nodes={start:e,end:t,a:null,t:null})}function je(e,t){var r=(t&Wo)!==0,n=(t&Jo)!==0,s,o=!e.startsWith("<!>");return()=>{s===void 0&&(s=Hi(o?e:"<!>"+e),r||(s=Br(s)));var l=n||Bs?document.importNode(s,!0):s.cloneNode(!0);if(r){var i=Br(l),c=l.lastChild;gr(i,c)}else gr(l,l);return l}}function Z(e=""){{var t=et(e+"");return gr(t,t),t}}function oe(){var e=document.createDocumentFragment(),t=document.createComment(""),r=et();return e.append(t,r),gr(t,r),e}function x(e,t){e!==null&&e.before(t)}function Qt(e,t){var r=t==null?"":typeof t=="object"?`${t}`:t;r!==(e[ir]??(e[ir]=e.nodeValue))&&(e[ir]=r,e.nodeValue=`${r}`)}function Wi(e,t){return Ji(e,t)}const Cr=new Map;function Ji(e,{target:t,anchor:r,props:n={},events:s,context:o,intro:l=!0,transformError:i}){ki();var c=void 0,a=Ci(()=>{var h=r??t.appendChild(et());ai(h,{pending:()=>{}},p=>{re({});var d=q;o&&(d.c=o),s&&(n.$$events=s),c=e(p,n)||{},ne()},i);var v=new Set,f=p=>{for(var d=0;d<p.length;d++){var g=p[d];if(!v.has(g)){v.add(g);var m=Vi(g);for(const C of[t,document]){var b=Cr.get(C);b===void 0&&(b=new Map,Cr.set(C,b));var _=b.get(g);_===void 0?(C.addEventListener(g,xn,{passive:m}),b.set(g,1)):b.set(g,_+1)}}}};return f(Jr(fo)),wn.add(f),()=>{var m;for(var p of v)for(const b of[t,document]){var d=Cr.get(b),g=d.get(p);--g==0?(b.removeEventListener(p,xn),d.delete(p),d.size===0&&Cr.delete(b)):d.set(p,g)}wn.delete(f),h!==r&&((m=h.parentNode)==null||m.removeChild(h))}});return Yi.set(c,a),c}let Yi=new WeakMap;var Me,Ke,xe,xt,yr,wr,Wr;class ho{constructor(t,r=!0){_e(this,"anchor");T(this,Me,new Map);T(this,Ke,new Map);T(this,xe,new Map);T(this,xt,new Set);T(this,yr,!0);T(this,wr,t=>{if(u(this,Me).has(t)){var r=u(this,Me).get(t),n=u(this,Ke).get(r);if(n)Ur(n),u(this,xt).delete(r);else{var s=u(this,xe).get(r);s&&(Ur(s.effect),u(this,Ke).set(r,s.effect),u(this,xe).delete(r),s.fragment.lastChild.remove(),this.anchor.before(s.fragment),n=s.effect)}for(const[o,l]of u(this,Me)){if(u(this,Me).delete(o),o===t)break;const i=u(this,xe).get(l);i&&(ee(i.effect),u(this,xe).delete(l))}for(const[o,l]of u(this,Ke)){if(o===r||u(this,xt).has(o))continue;const i=()=>{if(Array.from(u(this,Me).values()).includes(o)){var a=document.createDocumentFragment();Gn(l,a),a.append(et()),u(this,xe).set(o,{effect:l,fragment:a})}else ee(l);u(this,xt).delete(o),u(this,Ke).delete(o)};u(this,yr)||!n?(u(this,xt).add(o),St(l,i,!1)):i()}}});T(this,Wr,t=>{u(this,Me).delete(t);const r=Array.from(u(this,Me).values());for(const[n,s]of u(this,xe))r.includes(n)||(ee(s.effect),u(this,xe).delete(n))});this.anchor=t,$(this,yr,r)}ensure(t,r){var n=S,s=Hs();if(r&&!u(this,Ke).has(t)&&!u(this,xe).has(t))if(s){var o=document.createDocumentFragment(),l=et();o.append(l),u(this,xe).set(t,{effect:ge(()=>r(l)),fragment:o})}else u(this,Ke).set(t,ge(()=>r(this.anchor)));if(u(this,Me).set(n,t),s){for(const[i,c]of u(this,Ke))i===t?n.unskip_effect(c):n.skip_effect(c);for(const[i,c]of u(this,xe))i===t?n.unskip_effect(c.effect):n.skip_effect(c.effect);n.oncommit(u(this,wr)),n.ondiscard(u(this,Wr))}else u(this,wr).call(this,n)}}Me=new WeakMap,Ke=new WeakMap,xe=new WeakMap,xt=new WeakMap,yr=new WeakMap,wr=new WeakMap,Wr=new WeakMap;function Xi(e,t,r){for(var n=[],s=t.length,o,l=t.length,i=0;i<s;i++){let v=t[i];St(v,()=>{if(o){if(o.pending.delete(v),o.done.add(v),o.pending.size===0){var f=e.outrogroups;kn(e,Jr(o.done)),f.delete(o),f.size===0&&(e.outrogroups=null)}}else l-=1},!1)}if(l===0){var c=n.length===0&&r!==null;if(c){var a=r,h=a.parentNode;$i(h),h.append(a),e.items.clear()}kn(e,t,!c)}else o={pending:new Set(t),done:new Set},(e.outrogroups??(e.outrogroups=new Set)).add(o)}function kn(e,t,r=!0){var n;if(e.pending.size>0){n=new Set;for(const l of e.pending.values())for(const i of l)n.add(e.items.get(i).e)}for(var s=0;s<t.length;s++){var o=t[s];if(n!=null&&n.has(o)){o.f|=Qe;const l=document.createDocumentFragment();Gn(o,l)}else ee(t[s],r)}}var Qn;function es(e,t,r,n,s,o=null){var l=e,i=new Map,c=null,a=Ms(()=>{var b=r();return Cn(b)?b:b==null?[]:Jr(b)}),h,v=new Map,f=!0;function p(b){(m.effect.f&Ae)===0&&(m.pending.delete(b),m.fallback=c,Zi(m,h,l,t,n),c!==null&&(h.length===0?(c.f&Qe)===0?Ur(c):(c.f^=Qe,fr(c,null,l)):St(c,()=>{c=null})))}function d(b){m.pending.delete(b)}var g=Qr(()=>{h=y(a);for(var b=h.length,_=new Set,C=S,L=Hs(),w=0;w<b;w+=1){var k=h[w],R=n(k,w),O=f?null:i.get(R);O?(O.v&&Ht(O.v,k),O.i&&Ht(O.i,w),L&&C.unskip_effect(O.e)):(O=Qi(i,f?l:Qn??(Qn=et()),k,R,w,s,t,r),f||(O.e.f|=Qe),i.set(R,O)),_.add(R)}if(b===0&&o&&!c&&(f?c=ge(()=>o(l)):(c=ge(()=>o(Qn??(Qn=et()))),c.f|=Qe)),b>_.size&&Io(),!f)if(v.set(C,_),L){for(const[A,Y]of i)_.has(A)||C.skip_effect(Y.e);C.oncommit(p),C.ondiscard(d)}else p(C);y(a)}),m={effect:g,items:i,pending:v,outrogroups:null,fallback:c};f=!1}function er(e){for(;e!==null&&(e.f&Le)===0;)e=e.next;return e}function Zi(e,t,r,n,s){var O;var o=t.length,l=e.items,i=er(e.effect.first),c,a=null,h=[],v=[],f,p,d,g;for(g=0;g<o;g+=1){if(f=t[g],p=s(f,g),d=l.get(p).e,e.outrogroups!==null)for(const A of e.outrogroups)A.pending.delete(d),A.done.delete(d);if((d.f&ce)!==0&&Ur(d),(d.f&Qe)!==0)if(d.f^=Qe,d===i)fr(d,null,r);else{var m=a?a.next:i;d===e.effect.last&&(e.effect.last=d.prev),d.prev&&(d.prev.next=d.next),d.next&&(d.next.prev=d.prev),rt(e,a,d),rt(e,d,m),fr(d,m,r),a=d,h=[],v=[],i=er(a.next);continue}if(d!==i){if(c!==void 0&&c.has(d)){if(h.length<v.length){var b=v[0],_;a=b.prev;var C=h[0],L=h[h.length-1];for(_=0;_<h.length;_+=1)fr(h[_],b,r);for(_=0;_<v.length;_+=1)c.delete(v[_]);rt(e,C.prev,L.next),rt(e,a,C),rt(e,L,b),i=b,a=L,g-=1,h=[],v=[]}else c.delete(d),fr(d,i,r),rt(e,d.prev,d.next),rt(e,d,a===null?e.effect.first:a.next),rt(e,a,d),a=d;continue}for(h=[],v=[];i!==null&&i!==d;)(c??(c=new Set)).add(i),v.push(i),i=er(i.next);if(i===null)continue}(d.f&Qe)===0&&h.push(d),a=d,i=er(d.next)}if(e.outrogroups!==null){for(const A of e.outrogroups)A.pending.size===0&&(kn(e,Jr(A.done)),(O=e.outrogroups)==null||O.delete(A));e.outrogroups.size===0&&(e.outrogroups=null)}if(i!==null||c!==void 0){var w=[];if(c!==void 0)for(d of c)(d.f&ce)===0&&w.push(d);for(;i!==null;)(i.f&ce)===0&&i!==e.fallback&&w.push(i),i=er(i.next);var k=w.length;if(k>0){var R=null;Xi(e,w,R)}}}function Qi(e,t,r,n,s,o,l,i){var c=(l&Uo)!==0?(l&Ho)===0?yi(r,!1,!1):Pt(r):null,a=(l&qo)!==0?Pt(s):null;return{v:c,i:a,e:ge(()=>(o(t,c??r,a??s,i),()=>{e.delete(n)}))}}function fr(e,t,r){if(e.nodes)for(var n=e.nodes.start,s=e.nodes.end,o=t&&(t.f&Qe)===0?t.nodes.start:r;n!==null;){var l=$r(n);if(o.before(n),n===s)return;n=l}}function rt(e,t,r){t===null?e.effect.first=r:t.next=r,r===null?e.effect.last=t:r.prev=t}function ue(e,t,...r){var n=new ho(e);Qr(()=>{const s=t()??null;n.ensure(s,s&&(o=>s(o,...r)))},Et)}function Rt(e,t,r,n,s,o){var l=null,i=e,c=new ho(i,!1);Qr(()=>{const a=t()||null;var h=a==="svg"?Yo:void 0;if(a===null){c.ensure(null,null);return}return c.ensure(a,v=>{if(a){if(l=Ws(a,h),gr(l,l),n){var f=null,p=l.appendChild(et());n(l,p),f==null||f.remove()}N.nodes.end=l,v.before(l)}}),()=>{}},Et),Fn(()=>{})}function el(e,t){var r=void 0,n;Zs(()=>{r!==(r=t())&&(n&&(ee(n),n=null),r&&(n=ge(()=>{Xs(()=>r(e))})))})}function vo(e){var t,r,n="";if(typeof e=="string"||typeof e=="number")n+=e;else if(typeof e=="object")if(Array.isArray(e)){var s=e.length;for(t=0;t<s;t++)e[t]&&(r=vo(e[t]))&&(n&&(n+=" "),n+=r)}else for(r in e)e[r]&&(n&&(n+=" "),n+=r);return n}function tl(){for(var e,t,r=0,n="",s=arguments.length;r<s;r++)(e=arguments[r])&&(t=vo(e))&&(n&&(n+=" "),n+=t);return n}function rl(e){return typeof e=="object"?tl(e):e??""}const ts=[...` 	
-\r\f \v\uFEFF`];function nl(e,t,r){var n=e==null?"":""+e;if(r){for(var s of Object.keys(r))if(r[s])n=n?n+" "+s:s;else if(n.length)for(var o=s.length,l=0;(l=n.indexOf(s,l))>=0;){var i=l+o;(l===0||ts.includes(n[l-1]))&&(i===n.length||ts.includes(n[i]))?n=(l===0?"":n.substring(0,l))+n.substring(i+1):l=i}}return n===""?null:n}function rs(e,t=!1){var r=t?" !important;":";",n="";for(var s of Object.keys(e)){var o=e[s];o!=null&&o!==""&&(n+=" "+s+": "+o+r)}return n}function sn(e){return e[0]!=="-"||e[1]!=="-"?e.toLowerCase():e}function sl(e,t){if(t){var r="",n,s;if(Array.isArray(t)?(n=t[0],s=t[1]):n=t,e){e=String(e).replaceAll(/\s*\/\*.*?\*\/\s*/g,"").trim();var o=!1,l=0,i=!1,c=[];n&&c.push(...Object.keys(n).map(sn)),s&&c.push(...Object.keys(s).map(sn));var a=0,h=-1;const g=e.length;for(var v=0;v<g;v++){var f=e[v];if(i?f==="/"&&e[v-1]==="*"&&(i=!1):o?o===f&&(o=!1):f==="/"&&e[v+1]==="*"?i=!0:f==='"'||f==="'"?o=f:f==="("?l++:f===")"&&l--,!i&&o===!1&&l===0){if(f===":"&&h===-1)h=v;else if(f===";"||v===g-1){if(h!==-1){var p=sn(e.substring(a,h).trim());if(!c.includes(p)){f!==";"&&v++;var d=e.substring(a,v).trim();r+=" "+d+";"}}a=v+1,h=-1}}}}return n&&(r+=rs(n)),s&&(r+=rs(s,!0)),r=r.trim(),r===""?null:r}return e==null?null:String(e)}function ol(e,t,r,n,s,o){var l=e[dn];if(l!==r||l===void 0){var i=nl(r,n,o);i==null?e.removeAttribute("class"):t?e.className=i:e.setAttribute("class",i),e[dn]=r}else if(o&&s!==o)for(var c in o){var a=!!o[c];(s==null||a!==!!s[c])&&e.classList.toggle(c,a)}return o}function on(e,t={},r,n){for(var s in r){var o=r[s];t[s]!==o&&(r[s]==null?e.style.removeProperty(s):e.style.setProperty(s,o,n))}}function il(e,t,r,n){var s=e[hn];if(s!==t){var o=sl(t,n);o==null?e.removeAttribute("style"):e.style.cssText=o,e[hn]=t}else n&&(Array.isArray(n)?(on(e,r==null?void 0:r[0],n[0]),on(e,r==null?void 0:r[1],n[1],"important")):on(e,r,n));return n}function $n(e,t,r=!1){if(e.multiple){if(t==null)return;if(!Cn(t))return Qo();for(var n of e.options)n.selected=t.includes(ns(n));return}for(n of e.options){var s=ns(n);if(xi(s,t)){n.selected=!0;return}}(!r||t!==void 0)&&(e.selectedIndex=-1)}function ll(e){var t=new MutationObserver(()=>{$n(e,e.__value)});t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),Fn(()=>{t.disconnect()})}function ns(e){return"__value"in e?e.__value:e.value}const tr=Symbol("class"),rr=Symbol("style"),po=Symbol("is custom element"),go=Symbol("is html"),al=Rn?"input":"INPUT",cl=Rn?"option":"OPTION",ul=Rn?"select":"SELECT";function fl(e,t){t?e.hasAttribute("selected")||e.setAttribute("selected",""):e.removeAttribute("selected")}function ln(e,t,r,n){var s=bo(e);s[t]!==(s[t]=r)&&(t==="loading"&&(e[Mo]=r),r==null?e.removeAttribute(t):typeof r!="string"&&mo(e).includes(t)?e[t]=r:e.setAttribute(t,r))}function dl(e,t,r,n,s=!1,o=!1){var l=bo(e),i=l[po],c=!l[go],a=t||{},h=e.nodeName===cl;for(var v in t)v in r||(r[v]=null);r.class?r.class=rl(r.class):r[tr]&&(r.class=null),r[rr]&&(r.style??(r.style=null));var f=mo(e);if(e.nodeName===al&&"type"in r&&("value"in r||"__value"in r)){var p=r.type;(p!==a.type||p===void 0&&e.hasAttribute("type"))&&(a.type=p,ln(e,"type",p))}for(const w in r){let k=r[w];if(h&&w==="value"&&k==null){e.value=e.__value="",a[w]=k;continue}if(w==="class"){var d=e.namespaceURI==="http://www.w3.org/1999/xhtml";ol(e,d,k,n,t==null?void 0:t[tr],r[tr]),a[w]=k,a[tr]=r[tr];continue}if(w==="style"){il(e,k,t==null?void 0:t[rr],r[rr]),a[w]=k,a[rr]=r[rr];continue}var g=a[w];if(!(k===g&&!(k===void 0&&e.hasAttribute(w)))){a[w]=k;var m=w[0]+w[1];if(m!=="$$")if(m==="on"){const R={},O="$$"+w;let A=w.slice(2);var b=Fi(A);if(Ii(A)&&(A=A.slice(0,-7),R.capture=!0),!b&&g){if(k!=null)continue;e.removeEventListener(A,a[O],R),a[O]=null}if(b)Bi(A,e,k),Ui([A]);else if(k!=null){let Y=function(be){a[w].call(this,be)};var L=Y;a[O]=Ki(A,e,Y,R)}}else if(w==="style")ln(e,w,k);else if(w==="autofocus")Si(e,!!k);else if(!i&&(w==="__value"||w==="value"&&k!=null))e.value=e.__value=k;else if(w==="selected"&&h)fl(e,k);else{var _=w;c||(_=Gi(_));var C=_==="defaultValue"||_==="defaultChecked";if(k==null&&!i&&!C)if(l[w]=null,_==="value"||_==="checked"){let R=e;const O=t===void 0;if(_==="value"){let A=R.defaultValue;R.removeAttribute(_),R.defaultValue=A,R.value=R.__value=O?A:null}else{let A=R.defaultChecked;R.removeAttribute(_),R.defaultChecked=A,R.checked=O?A:!1}}else e.removeAttribute(w);else C||f.includes(_)&&(i||typeof k!="string")?(e[_]=k,_ in l&&(l[_]=U)):typeof k!="function"&&ln(e,_,k)}}}return a}function fe(e,t,r=[],n=[],s=[],o,l=!1,i=!1){Ns(s,r,n,c=>{var a=void 0,h={},v=e.nodeName===ul,f=!1;if(Zs(()=>{var d=t(...c.map(y)),g=dl(e,a,d,o,l,i);f&&v&&"value"in d&&$n(e,d.value);for(let b of Object.getOwnPropertySymbols(h))d[b]||ee(h[b]);for(let b of Object.getOwnPropertySymbols(d)){var m=d[b];b.description===Xo&&(!a||m!==a[b])&&(h[b]&&ee(h[b]),h[b]=ge(()=>el(e,()=>m))),g[b]=m}a=g}),v){var p=e;Xs(()=>{$n(p,a.value,!0),ll(p)})}f=!0})}function bo(e){return e[Mr]??(e[Mr]={[po]:e.nodeName.includes("-"),[go]:e.namespaceURI===Ts})}var ss=new Map;function mo(e){var t=e.getAttribute("is")||e.nodeName,r=ss.get(t);if(r)return r;ss.set(t,r=[]);for(var n,s=e,o=Element.prototype;o!==s;){n=ks(s);for(var l in n)n[l].set&&l!=="innerHTML"&&l!=="textContent"&&l!=="innerText"&&r.push(l);s=An(s)}return r}function hl(e=!1){const t=q,r=t.l.u;if(!r)return;let n=()=>Oi(t.s);if(e){let s=0,o={};const l=Zr(()=>{let i=!1;const c=t.s;for(const a in c)c[a]!==o[a]&&(o[a]=c[a],i=!0);return i&&s++,s});n=()=>y(l)}r.b.length&&Ei(()=>{os(t,n),un(r.b)}),Jn(()=>{const s=uo(()=>r.m.map(No));return()=>{for(const o of s)typeof o=="function"&&o()}}),r.a.length&&Jn(()=>{os(t,n),un(r.a)})}function os(e,t){if(e.l.s)for(const r of e.l.s)y(r);t()}const vl={get(e,t){if(!e.exclude.has(t))return e.props[t]},set(e,t){return!1},getOwnPropertyDescriptor(e,t){if(!e.exclude.has(t)&&t in e.props)return{enumerable:!0,configurable:!0,value:e.props[t]}},has(e,t){return e.exclude.has(t)?!1:t in e.props},ownKeys(e){return Reflect.ownKeys(e.props).filter(t=>!e.exclude.has(t))}};function de(e,t,r){return new Proxy({props:e,exclude:t},vl)}const pl="5";var ws;typeof window<"u"&&((ws=window.__svelte??(window.__svelte={})).v??(ws.v=new Set)).add(pl);ni();const gl="UI8Kit Codegen",bl="One typed render contract — four generated runtimes with identical DOM, design, and ARIA.",ml=[{title:"Spec-driven",description:"Brick definitions in a tiny expression IR — no hand-written drift across stacks."},{title:"Four runtimes",description:"Go Templ, React 19, Svelte 5, and Vue 3 emitted from the same source."},{title:"DOM parity",description:"The canonical renderer is the executable specification, verified by tests."}],_l=[{id:"templ",label:"Go Templ",port:8080},{id:"react",label:"React 19",port:5173},{id:"svelte",label:"Svelte 5",port:5174},{id:"vue",label:"Vue 3",port:5175}],Ar={title:gl,subtitle:bl,features:ml,runtimes:_l};function _o(e){var t,r,n="";if(typeof e=="string"||typeof e=="number")n+=e;else if(typeof e=="object")if(Array.isArray(e)){var s=e.length;for(t=0;t<s;t++)e[t]&&(r=_o(e[t]))&&(n&&(n+=" "),n+=r)}else for(r in e)e[r]&&(n&&(n+=" "),n+=r);return n}function yl(){for(var e,t,r=0,n="",s=arguments.length;r<s;r++)(e=arguments[r])&&(t=_o(e))&&(n&&(n+=" "),n+=t);return n}const Dn="-",wl=e=>{const t=kl(e),{conflictingClassGroups:r,conflictingClassGroupModifiers:n}=e;return{getClassGroupId:l=>{const i=l.split(Dn);return i[0]===""&&i.length!==1&&i.shift(),yo(i,t)||xl(l)},getConflictingClassGroupIds:(l,i)=>{const c=r[l]||[];return i&&n[l]?[...c,...n[l]]:c}}},yo=(e,t)=>{var l;if(e.length===0)return t.classGroupId;const r=e[0],n=t.nextPart.get(r),s=n?yo(e.slice(1),n):void 0;if(s)return s;if(t.validators.length===0)return;const o=e.join(Dn);return(l=t.validators.find(({validator:i})=>i(o)))==null?void 0:l.classGroupId},is=/^\[(.+)\]$/,xl=e=>{if(is.test(e)){const t=is.exec(e)[1],r=t==null?void 0:t.substring(0,t.indexOf(":"));if(r)return"arbitrary.."+r}},kl=e=>{const{theme:t,prefix:r}=e,n={nextPart:new Map,validators:[]};return Sl(Object.entries(e.classGroups),r).forEach(([o,l])=>{Sn(l,n,o,t)}),n},Sn=(e,t,r,n)=>{e.forEach(s=>{if(typeof s=="string"){const o=s===""?t:ls(t,s);o.classGroupId=r;return}if(typeof s=="function"){if($l(s)){Sn(s(n),t,r,n);return}t.validators.push({validator:s,classGroupId:r});return}Object.entries(s).forEach(([o,l])=>{Sn(l,ls(t,o),r,n)})})},ls=(e,t)=>{let r=e;return t.split(Dn).forEach(n=>{r.nextPart.has(n)||r.nextPart.set(n,{nextPart:new Map,validators:[]}),r=r.nextPart.get(n)}),r},$l=e=>e.isThemeGetter,Sl=(e,t)=>t?e.map(([r,n])=>{const s=n.map(o=>typeof o=="string"?t+o:typeof o=="object"?Object.fromEntries(Object.entries(o).map(([l,i])=>[t+l,i])):o);return[r,s]}):e,Tl=e=>{if(e<1)return{get:()=>{},set:()=>{}};let t=0,r=new Map,n=new Map;const s=(o,l)=>{r.set(o,l),t++,t>e&&(t=0,n=r,r=new Map)};return{get(o){let l=r.get(o);if(l!==void 0)return l;if((l=n.get(o))!==void 0)return s(o,l),l},set(o,l){r.has(o)?r.set(o,l):s(o,l)}}},wo="!",El=e=>{const{separator:t,experimentalParseClassName:r}=e,n=t.length===1,s=t[0],o=t.length,l=i=>{const c=[];let a=0,h=0,v;for(let m=0;m<i.length;m++){let b=i[m];if(a===0){if(b===s&&(n||i.slice(m,m+o)===t)){c.push(i.slice(h,m)),h=m+o;continue}if(b==="/"){v=m;continue}}b==="["?a++:b==="]"&&a--}const f=c.length===0?i:i.substring(h),p=f.startsWith(wo),d=p?f.substring(1):f,g=v&&v>h?v-h:void 0;return{modifiers:c,hasImportantModifier:p,baseClassName:d,maybePostfixModifierPosition:g}};return r?i=>r({className:i,parseClassName:l}):l},Cl=e=>{if(e.length<=1)return e;const t=[];let r=[];return e.forEach(n=>{n[0]==="["?(t.push(...r.sort(),n),r=[]):r.push(n)}),t.push(...r.sort()),t},Al=e=>({cache:Tl(e.cacheSize),parseClassName:El(e),...wl(e)}),Pl=/\s+/,Rl=(e,t)=>{const{parseClassName:r,getClassGroupId:n,getConflictingClassGroupIds:s}=t,o=[],l=e.trim().split(Pl);let i="";for(let c=l.length-1;c>=0;c-=1){const a=l[c],{modifiers:h,hasImportantModifier:v,baseClassName:f,maybePostfixModifierPosition:p}=r(a);let d=!!p,g=n(d?f.substring(0,p):f);if(!g){if(!d){i=a+(i.length>0?" "+i:i);continue}if(g=n(f),!g){i=a+(i.length>0?" "+i:i);continue}d=!1}const m=Cl(h).join(":"),b=v?m+wo:m,_=b+g;if(o.includes(_))continue;o.push(_);const C=s(g,d);for(let L=0;L<C.length;++L){const w=C[L];o.push(b+w)}i=a+(i.length>0?" "+i:i)}return i};function Nl(){let e=0,t,r,n="";for(;e<arguments.length;)(t=arguments[e++])&&(r=xo(t))&&(n&&(n+=" "),n+=r);return n}const xo=e=>{if(typeof e=="string")return e;let t,r="";for(let n=0;n<e.length;n++)e[n]&&(t=xo(e[n]))&&(r&&(r+=" "),r+=t);return r};function zl(e,...t){let r,n,s,o=l;function l(c){const a=t.reduce((h,v)=>v(h),e());return r=Al(a),n=r.cache.get,s=r.cache.set,o=i,i(c)}function i(c){const a=n(c);if(a)return a;const h=Rl(c,r);return s(c,h),h}return function(){return o(Nl.apply(null,arguments))}}const j=e=>{const t=r=>r[e]||[];return t.isThemeGetter=!0,t},ko=/^\[(?:([a-z-]+):)?(.+)\]$/i,Ml=/^\d+\/\d+$/,Ol=new Set(["px","full","screen"]),Il=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,Ll=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,Fl=/^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/,jl=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,Gl=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,We=e=>Lt(e)||Ol.has(e)||Ml.test(e),nt=e=>Xt(e,"length",Wl),Lt=e=>!!e&&!Number.isNaN(Number(e)),an=e=>Xt(e,"number",Lt),nr=e=>!!e&&Number.isInteger(Number(e)),Dl=e=>e.endsWith("%")&&Lt(e.slice(0,-1)),E=e=>ko.test(e),st=e=>Il.test(e),Vl=new Set(["length","size","percentage"]),Kl=e=>Xt(e,Vl,$o),Bl=e=>Xt(e,"position",$o),Ul=new Set(["image","url"]),ql=e=>Xt(e,Ul,Yl),Hl=e=>Xt(e,"",Jl),sr=()=>!0,Xt=(e,t,r)=>{const n=ko.exec(e);return n?n[1]?typeof t=="string"?n[1]===t:t.has(n[1]):r(n[2]):!1},Wl=e=>Ll.test(e)&&!Fl.test(e),$o=()=>!1,Jl=e=>jl.test(e),Yl=e=>Gl.test(e),Xl=()=>{const e=j("colors"),t=j("spacing"),r=j("blur"),n=j("brightness"),s=j("borderColor"),o=j("borderRadius"),l=j("borderSpacing"),i=j("borderWidth"),c=j("contrast"),a=j("grayscale"),h=j("hueRotate"),v=j("invert"),f=j("gap"),p=j("gradientColorStops"),d=j("gradientColorStopPositions"),g=j("inset"),m=j("margin"),b=j("opacity"),_=j("padding"),C=j("saturate"),L=j("scale"),w=j("sepia"),k=j("skew"),R=j("space"),O=j("translate"),A=()=>["auto","contain","none"],Y=()=>["auto","hidden","clip","visible","scroll"],be=()=>["auto",E,t],z=()=>[E,t],X=()=>["",We,nt],Ge=()=>["auto",Lt,E],ht=()=>["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],me=()=>["solid","dashed","dotted","double","none"],vt=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],H=()=>["start","end","center","between","around","evenly","stretch"],De=()=>["","0",E],ke=()=>["auto","avoid","all","avoid-page","page","left","right","column"],He=()=>[Lt,E];return{cacheSize:500,separator:":",theme:{colors:[sr],spacing:[We,nt],blur:["none","",st,E],brightness:He(),borderColor:[e],borderRadius:["none","","full",st,E],borderSpacing:z(),borderWidth:X(),contrast:He(),grayscale:De(),hueRotate:He(),invert:De(),gap:z(),gradientColorStops:[e],gradientColorStopPositions:[Dl,nt],inset:be(),margin:be(),opacity:He(),padding:z(),saturate:He(),scale:He(),sepia:De(),skew:He(),space:z(),translate:z()},classGroups:{aspect:[{aspect:["auto","square","video",E]}],container:["container"],columns:[{columns:[st]}],"break-after":[{"break-after":ke()}],"break-before":[{"break-before":ke()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[...ht(),E]}],overflow:[{overflow:Y()}],"overflow-x":[{"overflow-x":Y()}],"overflow-y":[{"overflow-y":Y()}],overscroll:[{overscroll:A()}],"overscroll-x":[{"overscroll-x":A()}],"overscroll-y":[{"overscroll-y":A()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[g]}],"inset-x":[{"inset-x":[g]}],"inset-y":[{"inset-y":[g]}],start:[{start:[g]}],end:[{end:[g]}],top:[{top:[g]}],right:[{right:[g]}],bottom:[{bottom:[g]}],left:[{left:[g]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",nr,E]}],basis:[{basis:be()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",E]}],grow:[{grow:De()}],shrink:[{shrink:De()}],order:[{order:["first","last","none",nr,E]}],"grid-cols":[{"grid-cols":[sr]}],"col-start-end":[{col:["auto",{span:["full",nr,E]},E]}],"col-start":[{"col-start":Ge()}],"col-end":[{"col-end":Ge()}],"grid-rows":[{"grid-rows":[sr]}],"row-start-end":[{row:["auto",{span:[nr,E]},E]}],"row-start":[{"row-start":Ge()}],"row-end":[{"row-end":Ge()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",E]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",E]}],gap:[{gap:[f]}],"gap-x":[{"gap-x":[f]}],"gap-y":[{"gap-y":[f]}],"justify-content":[{justify:["normal",...H()]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal",...H(),"baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[...H(),"baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[_]}],px:[{px:[_]}],py:[{py:[_]}],ps:[{ps:[_]}],pe:[{pe:[_]}],pt:[{pt:[_]}],pr:[{pr:[_]}],pb:[{pb:[_]}],pl:[{pl:[_]}],m:[{m:[m]}],mx:[{mx:[m]}],my:[{my:[m]}],ms:[{ms:[m]}],me:[{me:[m]}],mt:[{mt:[m]}],mr:[{mr:[m]}],mb:[{mb:[m]}],ml:[{ml:[m]}],"space-x":[{"space-x":[R]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[R]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit","svw","lvw","dvw",E,t]}],"min-w":[{"min-w":[E,t,"min","max","fit"]}],"max-w":[{"max-w":[E,t,"none","full","min","max","fit","prose",{screen:[st]},st]}],h:[{h:[E,t,"auto","min","max","fit","svh","lvh","dvh"]}],"min-h":[{"min-h":[E,t,"min","max","fit","svh","lvh","dvh"]}],"max-h":[{"max-h":[E,t,"min","max","fit","svh","lvh","dvh"]}],size:[{size:[E,t,"auto","min","max","fit"]}],"font-size":[{text:["base",st,nt]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",an]}],"font-family":[{font:[sr]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",E]}],"line-clamp":[{"line-clamp":["none",Lt,an]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",We,E]}],"list-image":[{"list-image":["none",E]}],"list-style-type":[{list:["none","disc","decimal",E]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[e]}],"placeholder-opacity":[{"placeholder-opacity":[b]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[e]}],"text-opacity":[{"text-opacity":[b]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...me(),"wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",We,nt]}],"underline-offset":[{"underline-offset":["auto",We,E]}],"text-decoration-color":[{decoration:[e]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:z()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",E]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",E]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[b]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[...ht(),Bl]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",Kl]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},ql]}],"bg-color":[{bg:[e]}],"gradient-from-pos":[{from:[d]}],"gradient-via-pos":[{via:[d]}],"gradient-to-pos":[{to:[d]}],"gradient-from":[{from:[p]}],"gradient-via":[{via:[p]}],"gradient-to":[{to:[p]}],rounded:[{rounded:[o]}],"rounded-s":[{"rounded-s":[o]}],"rounded-e":[{"rounded-e":[o]}],"rounded-t":[{"rounded-t":[o]}],"rounded-r":[{"rounded-r":[o]}],"rounded-b":[{"rounded-b":[o]}],"rounded-l":[{"rounded-l":[o]}],"rounded-ss":[{"rounded-ss":[o]}],"rounded-se":[{"rounded-se":[o]}],"rounded-ee":[{"rounded-ee":[o]}],"rounded-es":[{"rounded-es":[o]}],"rounded-tl":[{"rounded-tl":[o]}],"rounded-tr":[{"rounded-tr":[o]}],"rounded-br":[{"rounded-br":[o]}],"rounded-bl":[{"rounded-bl":[o]}],"border-w":[{border:[i]}],"border-w-x":[{"border-x":[i]}],"border-w-y":[{"border-y":[i]}],"border-w-s":[{"border-s":[i]}],"border-w-e":[{"border-e":[i]}],"border-w-t":[{"border-t":[i]}],"border-w-r":[{"border-r":[i]}],"border-w-b":[{"border-b":[i]}],"border-w-l":[{"border-l":[i]}],"border-opacity":[{"border-opacity":[b]}],"border-style":[{border:[...me(),"hidden"]}],"divide-x":[{"divide-x":[i]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[i]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[b]}],"divide-style":[{divide:me()}],"border-color":[{border:[s]}],"border-color-x":[{"border-x":[s]}],"border-color-y":[{"border-y":[s]}],"border-color-s":[{"border-s":[s]}],"border-color-e":[{"border-e":[s]}],"border-color-t":[{"border-t":[s]}],"border-color-r":[{"border-r":[s]}],"border-color-b":[{"border-b":[s]}],"border-color-l":[{"border-l":[s]}],"divide-color":[{divide:[s]}],"outline-style":[{outline:["",...me()]}],"outline-offset":[{"outline-offset":[We,E]}],"outline-w":[{outline:[We,nt]}],"outline-color":[{outline:[e]}],"ring-w":[{ring:X()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[e]}],"ring-opacity":[{"ring-opacity":[b]}],"ring-offset-w":[{"ring-offset":[We,nt]}],"ring-offset-color":[{"ring-offset":[e]}],shadow:[{shadow:["","inner","none",st,Hl]}],"shadow-color":[{shadow:[sr]}],opacity:[{opacity:[b]}],"mix-blend":[{"mix-blend":[...vt(),"plus-lighter","plus-darker"]}],"bg-blend":[{"bg-blend":vt()}],filter:[{filter:["","none"]}],blur:[{blur:[r]}],brightness:[{brightness:[n]}],contrast:[{contrast:[c]}],"drop-shadow":[{"drop-shadow":["","none",st,E]}],grayscale:[{grayscale:[a]}],"hue-rotate":[{"hue-rotate":[h]}],invert:[{invert:[v]}],saturate:[{saturate:[C]}],sepia:[{sepia:[w]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[r]}],"backdrop-brightness":[{"backdrop-brightness":[n]}],"backdrop-contrast":[{"backdrop-contrast":[c]}],"backdrop-grayscale":[{"backdrop-grayscale":[a]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[h]}],"backdrop-invert":[{"backdrop-invert":[v]}],"backdrop-opacity":[{"backdrop-opacity":[b]}],"backdrop-saturate":[{"backdrop-saturate":[C]}],"backdrop-sepia":[{"backdrop-sepia":[w]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[l]}],"border-spacing-x":[{"border-spacing-x":[l]}],"border-spacing-y":[{"border-spacing-y":[l]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",E]}],duration:[{duration:He()}],ease:[{ease:["linear","in","out","in-out",E]}],delay:[{delay:He()}],animate:[{animate:["none","spin","ping","pulse","bounce",E]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[L]}],"scale-x":[{"scale-x":[L]}],"scale-y":[{"scale-y":[L]}],rotate:[{rotate:[nr,E]}],"translate-x":[{"translate-x":[O]}],"translate-y":[{"translate-y":[O]}],"skew-x":[{"skew-x":[k]}],"skew-y":[{"skew-y":[k]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",E]}],accent:[{accent:["auto",e]}],appearance:[{appearance:["none","auto"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",E]}],"caret-color":[{caret:[e]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":z()}],"scroll-mx":[{"scroll-mx":z()}],"scroll-my":[{"scroll-my":z()}],"scroll-ms":[{"scroll-ms":z()}],"scroll-me":[{"scroll-me":z()}],"scroll-mt":[{"scroll-mt":z()}],"scroll-mr":[{"scroll-mr":z()}],"scroll-mb":[{"scroll-mb":z()}],"scroll-ml":[{"scroll-ml":z()}],"scroll-p":[{"scroll-p":z()}],"scroll-px":[{"scroll-px":z()}],"scroll-py":[{"scroll-py":z()}],"scroll-ps":[{"scroll-ps":z()}],"scroll-pe":[{"scroll-pe":z()}],"scroll-pt":[{"scroll-pt":z()}],"scroll-pr":[{"scroll-pr":z()}],"scroll-pb":[{"scroll-pb":z()}],"scroll-pl":[{"scroll-pl":z()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",E]}],fill:[{fill:[e,"none"]}],"stroke-w":[{stroke:[We,nt,an]}],stroke:[{stroke:[e,"none"]}],sr:["sr-only","not-sr-only"],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-s","border-color-e","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}},Zl=zl(Xl);function le(...e){return Zl(yl(e))}const Ql={BASE_URL:"/",DEV:!1,MODE:"production",PROD:!0,SSR:!1};function Tn(){try{const e=Ql;if(e&&typeof e.DEV=="boolean")return e.DEV}catch{}return!1}function ea(e){return{id:e.id,base:e.base,keys:e.keys,defaults:e.defaults??{},byKey:e.byKey}}function ta(e,t,...r){const n=[];e.base.trim()!==""&&n.push(e.base.trim());for(const s of e.keys){const o=e.byKey[s];if(!o)continue;const l=(t[s]??"").trim(),i=(e.defaults[s]??"").trim(),c=l||i;if(!c){if(Tn()&&Object.keys(o).length>0)throw new Error(`[compose] missing default for key "${s}" (recipe id: ${String(e.id??"?")})`);continue}const a=o[c];if(a!==void 0)a.trim()!==""&&n.push(a.trim());else if(Tn())throw new Error(`[compose] unknown variant "${c}" for key "${s}" (recipe id: ${String(e.id??"?")})`)}return le(...n,...r)}function Re(e,t,...r){return ta(ea(e),t,...r)}const F={Layout:"Layout",BoxAllowed:"BoxAllowed",BlockText:"BlockText",Inline:"Inline",Heading:"Heading",List:"List",ListItem:"ListItem",Form:"Form",FormControl:"FormControl",FormLabel:"FormLabel",Table:"Table",TableSection:"TableSection",TableRow:"TableRow",TableCell:"TableCell",TableColumn:"TableColumn",Media:"Media",Disclosure:"Disclosure",Container:"Container",Stack:"Stack",Group:"Group",Text:"Text"},ra=new Set(["div","section","article","aside","header","footer","main","nav","figure","search","hgroup"]),na=new Set(["div"]),as=new Set(["p","blockquote","figcaption","address","pre"]),cs=new Set(["span","em","strong","small","abbr","cite","code","kbd","mark","time","data","var","samp","sub","sup","b","i","u","s","q","dfn","bdo","bdi","ins","del"]),sa=new Set(["h1","h2","h3","h4","h5","h6"]),oa=new Set(["ul","ol","dl","menu"]),ia=new Set(["li","dt","dd"]),la=new Set(["form","fieldset"]),aa=new Set(["input","textarea","select","button","option","optgroup","datalist","output","meter","progress"]),ca=new Set(["label","legend"]),ua=new Set(["table"]),fa=new Set(["thead","tbody","tfoot"]),da=new Set(["tr"]),ha=new Set(["th","td"]),va=new Set(["colgroup","col"]),pa=new Set(["img","picture","source"]),ga=new Set(["details","summary"]),ba=new Set(["div","main","section"]),ma=new Set(["div","ul","ol"]),_a=new Set(["div","fieldset","dl"]);function B(e,t){return t.has(e)}const us=new Set;function ya(e,t,r){if(!Tn())return;const n=`${r}:${e}:${t}`;us.has(n)||(us.add(n),console.warn(`[resolveTag] disallowed tag "${e}" for group "${r}", fallback "${t}" used.`))}function wa(e,t){const r=e.trim().toLowerCase();switch(t){case F.Layout:return B(r,ra);case F.BoxAllowed:return B(r,na);case F.BlockText:return B(r,as);case F.Inline:return B(r,cs);case F.Heading:return B(r,sa);case F.List:return B(r,oa);case F.ListItem:return B(r,ia);case F.Form:return B(r,la);case F.FormControl:return B(r,aa);case F.FormLabel:return B(r,ca);case F.Table:return B(r,ua);case F.TableSection:return B(r,fa);case F.TableRow:return B(r,da);case F.TableCell:return B(r,ha);case F.TableColumn:return B(r,va);case F.Media:return B(r,pa);case F.Disclosure:return B(r,ga);case F.Container:return B(r,ba);case F.Stack:return B(r,ma);case F.Group:return B(r,_a);case F.Text:return as.has(r)||cs.has(r);default:return!1}}function Tr(e,t,r){const n=(e==null?void 0:e.trim().toLowerCase())??"";return n?wa(n,r)?n:(ya(n,t,r),t):t}const Er=e=>e==null?"":String(e).trim(),fs=e=>Er(e)!=="",xa=(e,t)=>{const r=Er(e);return r===""?t:r},ka=(e,t,...r)=>{const n=Er(e);return r.includes(n)?n:t},$a=(e,t,r)=>t[Er(e)]??r,Sa=(e,t)=>(e??"")===t,ds=e=>Er(e)===""?void 0:String(e),So=e=>{switch(e){case 1:return"h1";case 3:return"h3";case 4:return"h4";case 5:return"h5";case 6:return"h6";default:return"h2"}},Ta="inline-flex items-center rounded-full border px-2 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",Ea={size:{default:"px-2 py-1 text-xs",lg:"px-3 py-1 text-sm",sm:"px-2 py-1 text-xs"},variant:{default:"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",destructive:"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",outline:"text-foreground",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"}},Ca={size:"default",variant:"default"},Aa="ui.badge",Pa=["variant","size"],Ra={base:Ta,byKey:Ea,defaults:Ca,id:Aa,keys:Pa},Na=Ra;function za(e={}){return le(Re(Na,{variant:e.variant,size:e.size}),e.className)}var Ma=new Set(["$$slots","$$events","$$legacy","variant","size","class","children"]),Oa=je("<div><!></div>");function Pr(e,t){re(t,!0);let r=de(t,Ma);const n=D(()=>za({variant:t.variant,size:t.size,className:t.class}));var s=Oa();fe(s,()=>({...y(n)?{class:y(n)}:{},...r}));var o=dt(s);ue(o,()=>t.children??ie),x(e,s),ne()}const Ia="",La={},Fa={},ja="ui.block",Ga=[],Da={base:Ia,byKey:La,defaults:Fa,id:ja,keys:Ga},Va=Da;function Ka(e={}){return le(Re(Va,{}),e.className)}var Ba=new Set(["$$slots","$$events","$$legacy","tag","class","children"]);function Ua(e,t){re(t,!0);let r=de(t,Ba);const n=D(()=>Ka({className:t.class})),s=D(()=>Tr(t.tag,"div",F.Layout));var o=oe(),l=G(o);Rt(l,()=>y(s),!1,(i,c)=>{fe(i,()=>({...y(n)?{class:y(n)}:{},...r}));var a=oe(),h=G(a);ue(h,()=>t.children??ie),x(c,a)}),x(e,o),ne()}const qa="",Ha={},Wa={},Ja="ui.box",Ya=[],Xa={base:qa,byKey:Ha,defaults:Wa,id:Ja,keys:Ya},Za=Xa;function Qa(e={}){return le(Re(Za,{}),e.className)}var ec=new Set(["$$slots","$$events","$$legacy","tag","class","children"]);function tc(e,t){re(t,!0);let r=de(t,ec);const n=D(()=>Qa({className:t.class})),s=D(()=>Tr(t.tag,"div",F.BoxAllowed));var o=oe(),l=G(o);Rt(l,()=>y(s),!1,(i,c)=>{fe(i,()=>({...y(n)?{class:y(n)}:{},...r}));var a=oe(),h=G(a);ue(h,()=>t.children??ie),x(c,a)}),x(e,o),ne()}const rc="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",nc={size:{default:"h-10 px-4 py-2",icon:"h-10 w-10",lg:"h-12 rounded-md px-8",sm:"h-8 rounded-md px-3"},variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80"}},sc={size:"default",variant:"default"},oc="ui.button",ic=["variant","size"],lc={base:rc,byKey:nc,defaults:sc,id:oc,keys:ic},ac=lc;function cc(e={}){return le(Re(ac,{variant:e.variant,size:e.size}),e.disabled?"pointer-events-none opacity-50":"",e.className)}var uc=new Set(["$$slots","$$events","$$legacy","variant","size","type","disabled","class","children"]),fc=je("<button><!></button>");function or(e,t){re(t,!0);let r=de(t,uc);const n=D(()=>cc({variant:t.variant,size:t.size,disabled:t.disabled,className:t.class}));var s=fc();fe(s,l=>({type:l,...y(n)?{class:y(n)}:{},disabled:t.disabled||void 0,...r}),[()=>ka(t.type,"button","submit","reset")]);var o=dt(s);ue(o,()=>t.children??ie),x(e,s),ne()}const dc="ui.card",hc="rounded-md border border-border bg-card text-card-foreground shadow-sm",vc=["variant"],pc={variant:"default"},gc={variant:{default:"",raised:"",kpi:"bg-card/50",muted:"bg-muted/40",ghost:"border-dashed bg-background shadow-none",compact:"p-4",flat:"shadow-none",accent:"border-transparent bg-accent/30"}},bc={id:dc,base:hc,keys:vc,defaults:pc,byKey:gc},mc=bc;function _c(e={}){return le(Re(mc,{variant:e.variant}),e.className)}function yc(e={}){return le("border-b border-border px-4 py-2",e.className)}function wc(e={}){return le("text-sm font-semibold",e.className)}function xc(e={}){return le("p-4",e.className)}var kc=new Set(["$$slots","$$events","$$legacy","variant","class","children"]),$c=je("<div><!></div>");function hs(e,t){re(t,!0);let r=de(t,kc);const n=D(()=>_c({variant:t.variant,className:t.class}));var s=$c();fe(s,()=>({...y(n)?{class:y(n)}:{},...r}));var o=dt(s);ue(o,()=>t.children??ie),x(e,s),ne()}var Sc=new Set(["$$slots","$$events","$$legacy","class","children"]),Tc=je("<div><!></div>");function vs(e,t){re(t,!0);let r=de(t,Sc);const n=D(()=>yc({className:t.class}));var s=Tc();fe(s,()=>({...y(n)?{class:y(n)}:{},...r}));var o=dt(s);ue(o,()=>t.children??ie),x(e,s),ne()}var Ec=new Set(["$$slots","$$events","$$legacy","as","class","children"]);function ps(e,t){re(t,!0);let r=de(t,Ec);const n=D(()=>wc({className:t.class})),s=D(()=>So(t.as));var o=oe(),l=G(o);Rt(l,()=>y(s),!1,(i,c)=>{fe(i,()=>({...y(n)?{class:y(n)}:{},...r}));var a=oe(),h=G(a);ue(h,()=>t.children??ie),x(c,a)}),x(e,o),ne()}var Cc=new Set(["$$slots","$$events","$$legacy","class","children"]),Ac=je("<div><!></div>");function gs(e,t){re(t,!0);let r=de(t,Cc);const n=D(()=>xc({className:t.class}));var s=Ac();fe(s,()=>({...y(n)?{class:y(n)}:{},...r}));var o=dt(s);ue(o,()=>t.children??ie),x(e,s),ne()}const Pc="",Rc={},Nc={},zc="ui.container",Mc=[],Oc={base:Pc,byKey:Rc,defaults:Nc,id:zc,keys:Mc},Ic=Oc;function Lc(e={}){return le(Re(Ic,{}),e.className)}var Fc=new Set(["$$slots","$$events","$$legacy","tag","class","children"]);function jc(e,t){re(t,!0);let r=de(t,Fc);const n=D(()=>Lc({className:t.class})),s=D(()=>Tr(t.tag,"div",F.Container));var o=oe(),l=G(o);Rt(l,()=>y(s),!1,(i,c)=>{fe(i,()=>({...y(n)?{class:y(n)}:{},...r}));var a=oe(),h=G(a);ue(h,()=>t.children??ie),x(c,a)}),x(e,o),ne()}const Gc="grid",Dc={},Vc={},Kc="ui.grid",Bc=[],Uc={base:Gc,byKey:Dc,defaults:Vc,id:Kc,keys:Bc},qc=Uc;function Hc(e={}){return le(Re(qc,{}),(e.className??"").includes("grid-cols-")?"":$a(xa(e.cols,"1"),{1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5",6:"grid-cols-6",7:"grid-cols-7",8:"grid-cols-8",9:"grid-cols-9",10:"grid-cols-10",11:"grid-cols-11",12:"grid-cols-12","1-2":"grid-cols-1 md:grid-cols-2","1-3":"grid-cols-1 md:grid-cols-2 xl:grid-cols-3","1-4":"grid-cols-1 md:grid-cols-2 xl:grid-cols-4"},""),e.className)}var Wc=new Set(["$$slots","$$events","$$legacy","cols","class","children"]),Jc=je("<div><!></div>");function Yc(e,t){re(t,!0);let r=de(t,Wc);const n=D(()=>Hc({cols:t.cols,className:t.class}));var s=Jc();fe(s,()=>({...y(n)?{class:y(n)}:{},...r}));var o=dt(s);ue(o,()=>t.children??ie),x(e,s),ne()}const Xc="flex min-w-0",Zc={},Qc={},eu="ui.group",tu=[],ru={base:Xc,byKey:Zc,defaults:Qc,id:eu,keys:tu},nu=ru;function su(e={}){return le(Re(nu,{}),e.className)}var ou=new Set(["$$slots","$$events","$$legacy","tag","class","children"]);function cn(e,t){re(t,!0);let r=de(t,ou);const n=D(()=>su({className:t.class})),s=D(()=>Tr(t.tag,"div",F.Group));var o=oe(),l=G(o);Rt(l,()=>y(s),!1,(i,c)=>{fe(i,()=>({...y(n)?{class:y(n)}:{},...r}));var a=oe(),h=G(a);ue(h,()=>t.children??ie),x(c,a)}),x(e,o),ne()}const iu="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",lu={size:{default:"text-sm",lg:"text-lg",md:"text-base",sm:"text-sm"},variant:{block:"flex w-full text-foreground hover:text-primary",default:"text-primary hover:underline",external:"text-primary hover:underline",muted:"text-muted-foreground hover:text-foreground hover:underline",nav:"text-foreground hover:text-primary"}},au={size:"default",variant:"default"},cu="ui.link",uu=["variant","size"],fu={base:iu,byKey:lu,defaults:au,id:cu,keys:uu},du=fu;function hu(e={}){return le(Re(du,{variant:e.variant,size:e.size}),e.disabled?"pointer-events-none opacity-50":"",e.className)}var vu=new Set(["$$slots","$$events","$$legacy","variant","size","target","rel","external","disabled","class","children"]),pu=je("<a><!></a>");function gu(e,t){re(t,!0);let r=de(t,vu);const n=D(()=>hu({variant:t.variant,size:t.size,disabled:t.disabled,className:t.class})),s=D(()=>fs(t.target)?t.target:t.external?"_blank":""),o=D(()=>fs(t.rel)?t.rel:t.external||Sa(y(s),"_blank")?"noopener noreferrer":"");var l=pu();fe(l,(c,a)=>({...y(n)?{class:y(n)}:{},target:c,rel:a,"aria-disabled":t.disabled?"true":void 0,tabindex:t.disabled?-1:void 0,...r}),[()=>ds(y(s)),()=>ds(y(o))]);var i=dt(l);ue(i,()=>t.children??ie),x(e,l),ne()}const bu="flex flex-col items-start justify-start",mu={},_u={},yu="ui.stack",wu=[],xu={base:bu,byKey:mu,defaults:_u,id:yu,keys:wu},ku=xu;function $u(e={}){return le(Re(ku,{}),e.className)}var Su=new Set(["$$slots","$$events","$$legacy","tag","class","children"]);function Rr(e,t){re(t,!0);let r=de(t,Su);const n=D(()=>$u({className:t.class})),s=D(()=>Tr(t.tag,"div",F.Stack));var o=oe(),l=G(o);Rt(l,()=>y(s),!1,(i,c)=>{fe(i,()=>({...y(n)?{class:y(n)}:{},...r}));var a=oe(),h=G(a);ue(h,()=>t.children??ie),x(c,a)}),x(e,o),ne()}const Tu="",Eu={},Cu={},Au="ui.text",Pu=[],Ru={base:Tu,byKey:Eu,defaults:Cu,id:Au,keys:Pu},Nu=Ru;function zu(e={}){return le(Re(Nu,{}),e.className)}var Mu=new Set(["$$slots","$$events","$$legacy","class","children"]),Ou=je("<p><!></p>");function Nr(e,t){re(t,!0);let r=de(t,Mu);const n=D(()=>zu({className:t.class}));var s=Ou();fe(s,()=>({...y(n)?{class:y(n)}:{},...r}));var o=dt(s);ue(o,()=>t.children??ie),x(e,s),ne()}const Iu="",Lu={},Fu={},ju="ui.title",Gu=[],Du={base:Iu,byKey:Lu,defaults:Fu,id:ju,keys:Gu},Vu=Du;function Ku(e={}){return le(Re(Vu,{}),e.className)}var Bu=new Set(["$$slots","$$events","$$legacy","as","class","children"]);function Uu(e,t){re(t,!0);let r=de(t,Bu);const n=D(()=>Ku({className:t.class})),s=D(()=>So(t.as));var o=oe(),l=G(o);Rt(l,()=>y(s),!1,(i,c)=>{fe(i,()=>({...y(n)?{class:y(n)}:{},...r}));var a=oe(),h=G(a);ue(h,()=>t.children??ie),x(c,a)}),x(e,o),ne()}var bs=je("<!> <!> <!>",1),ms=je("<!> <!> <!> <!> <!>",1),zr=je("<!> <!>",1);function qu(e,t){re(t,!1),hl(),Ua(e,{tag:"main",class:"min-h-screen bg-muted/30 text-foreground",children:(r,n)=>{jc(r,{class:"mx-auto max-w-4xl px-4 py-16",children:(s,o)=>{Rr(s,{class:"gap-8",children:(l,i)=>{var c=ms(),a=G(c);Rr(a,{class:"items-center gap-4 text-center",children:(d,g)=>{var m=bs(),b=G(m);Pr(b,{variant:"outline",class:"text-xs uppercase tracking-wide",children:(L,w)=>{var k=Z("Svelte 5");x(L,k)},$$slots:{default:!0}});var _=se(b,2);Uu(_,{as:1,class:"text-3xl font-bold tracking-tight",children:(L,w)=>{var k=Z();Zt(()=>Qt(k,Ar.title)),x(L,k)},$$slots:{default:!0}});var C=se(_,2);Nr(C,{class:"max-w-2xl text-muted-foreground",children:(L,w)=>{var k=Z();Zt(()=>Qt(k,Ar.subtitle)),x(L,k)},$$slots:{default:!0}}),x(d,m)},$$slots:{default:!0}});var h=se(a,2);hs(h,{variant:"default",children:(d,g)=>{var m=zr(),b=G(m);vs(b,{children:(C,L)=>{ps(C,{children:(w,k)=>{var R=Z("Generated primitives");x(w,R)},$$slots:{default:!0}})},$$slots:{default:!0}});var _=se(b,2);gs(_,{children:(C,L)=>{Rr(C,{class:"gap-4",children:(w,k)=>{var R=zr(),O=G(R);cn(O,{class:"flex-wrap gap-2",children:(Y,be)=>{var z=ms(),X=G(z);or(X,{variant:"default",size:"sm",children:(H,De)=>{var ke=Z("Default");x(H,ke)},$$slots:{default:!0}});var Ge=se(X,2);or(Ge,{variant:"secondary",size:"sm",children:(H,De)=>{var ke=Z("Secondary");x(H,ke)},$$slots:{default:!0}});var ht=se(Ge,2);or(ht,{variant:"outline",size:"sm",children:(H,De)=>{var ke=Z("Outline");x(H,ke)},$$slots:{default:!0}});var me=se(ht,2);or(me,{variant:"ghost",size:"sm",children:(H,De)=>{var ke=Z("Ghost");x(H,ke)},$$slots:{default:!0}});var vt=se(me,2);or(vt,{variant:"destructive",size:"sm",children:(H,De)=>{var ke=Z("Destructive");x(H,ke)},$$slots:{default:!0}}),x(Y,z)},$$slots:{default:!0}});var A=se(O,2);cn(A,{class:"flex-wrap gap-2",children:(Y,be)=>{var z=bs(),X=G(z);Pr(X,{variant:"default",children:(me,vt)=>{var H=Z("Badge");x(me,H)},$$slots:{default:!0}});var Ge=se(X,2);Pr(Ge,{variant:"secondary",children:(me,vt)=>{var H=Z("Secondary");x(me,H)},$$slots:{default:!0}});var ht=se(Ge,2);Pr(ht,{variant:"outline",children:(me,vt)=>{var H=Z("Outline");x(me,H)},$$slots:{default:!0}}),x(Y,z)},$$slots:{default:!0}}),x(w,R)},$$slots:{default:!0}})},$$slots:{default:!0}}),x(d,m)},$$slots:{default:!0}});var v=se(h,2);Yc(v,{cols:"1-3",class:"gap-4",children:(d,g)=>{var m=oe(),b=G(m);es(b,1,()=>Ar.features,_=>_.title,(_,C)=>{hs(_,{variant:"muted",children:(L,w)=>{var k=zr(),R=G(k);vs(R,{children:(A,Y)=>{ps(A,{children:(be,z)=>{var X=Z();Zt(()=>Qt(X,y(C).title)),x(be,X)},$$slots:{default:!0}})},$$slots:{default:!0}});var O=se(R,2);gs(O,{children:(A,Y)=>{Nr(A,{class:"text-sm text-muted-foreground",children:(be,z)=>{var X=Z();Zt(()=>Qt(X,y(C).description)),x(be,X)},$$slots:{default:!0}})},$$slots:{default:!0}}),x(L,k)},$$slots:{default:!0}})}),x(d,m)},$$slots:{default:!0}});var f=se(v,2);tc(f,{class:"rounded-lg border border-border bg-card p-4",children:(d,g)=>{Rr(d,{class:"gap-3",children:(m,b)=>{var _=zr(),C=G(_);Nr(C,{class:"text-sm font-medium",children:(w,k)=>{var R=Z("Preview other runtimes");x(w,R)},$$slots:{default:!0}});var L=se(C,2);cn(L,{class:"flex-wrap gap-3",children:(w,k)=>{var R=oe(),O=G(R);es(O,1,()=>Ar.runtimes,A=>A.id,(A,Y)=>{gu(A,{get href(){return`http://127.0.0.1:${y(Y).port??""}`},variant:"default",children:(be,z)=>{var X=Z();Zt(()=>Qt(X,y(Y).label)),x(be,X)},$$slots:{default:!0}})}),x(w,R)},$$slots:{default:!0}}),x(m,_)},$$slots:{default:!0}})},$$slots:{default:!0}});var p=se(f,2);Nr(p,{class:"text-center text-sm text-muted-foreground",children:(d,g)=>{var m=Z("Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen");x(d,m)},$$slots:{default:!0}}),x(l,c)},$$slots:{default:!0}})},$$slots:{default:!0}})},$$slots:{default:!0}}),ne()}Wi(qu,{target:document.getElementById("app")});
diff --git a/examples/svelte/dist/index.html b/examples/svelte/dist/index.html
deleted file mode 100644
index c807cf4..0000000
--- a/examples/svelte/dist/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UI8Kit Codegen · Svelte 5</title>
-    <link rel="stylesheet" href="/static/css/app.css" />
-    <script type="module" crossorigin src="/assets/index-Bluwn2uY.js"></script>
-  </head>
-  <body class="bg-background text-foreground antialiased">
-    <div id="app"></div>

-  </body>
-</html>
diff --git a/examples/svelte/index.html b/examples/svelte/index.html
deleted file mode 100644
index a9e2a35..0000000
--- a/examples/svelte/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UI8Kit Codegen · Svelte 5</title>
-    <link rel="stylesheet" href="/static/css/app.css" />
-  </head>
-  <body class="bg-background text-foreground antialiased">
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
diff --git a/examples/svelte/src/Welcome.svelte b/examples/svelte/src/Welcome.svelte
deleted file mode 100644
index 402c4a4..0000000
--- a/examples/svelte/src/Welcome.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script lang="ts">
-  import welcome from "../../data/welcome.json";
-  import {
-    Badge,
-    Block,
-    Box,
-    Button,
-    Card,
-    CardContent,
-    CardHeader,
-    CardTitle,
-    Container,
-    Grid,
-    Group,
-    Link,
-    Stack,
-    Text,
-    Title,
-  } from "@ui";
-</script>
-
-<Block tag="main" class="min-h-screen bg-muted/30 text-foreground">
-  <Container class="mx-auto max-w-4xl px-4 py-16">
-    <Stack class="gap-8">
-      <Stack class="items-center gap-4 text-center">
-        <Badge variant="outline" class="text-xs uppercase tracking-wide">Svelte 5</Badge>
-        <Title as={1} class="text-3xl font-bold tracking-tight">{welcome.title}</Title>
-        <Text class="max-w-2xl text-muted-foreground">{welcome.subtitle}</Text>
-      </Stack>
-
-      <Card variant="default">
-        <CardHeader>
-          <CardTitle>Generated primitives</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Stack class="gap-4">
-            <Group class="flex-wrap gap-2">
-              <Button variant="default" size="sm">Default</Button>
-              <Button variant="secondary" size="sm">Secondary</Button>
-              <Button variant="outline" size="sm">Outline</Button>
-              <Button variant="ghost" size="sm">Ghost</Button>
-              <Button variant="destructive" size="sm">Destructive</Button>
-            </Group>
-            <Group class="flex-wrap gap-2">
-              <Badge variant="default">Badge</Badge>
-              <Badge variant="secondary">Secondary</Badge>
-              <Badge variant="outline">Outline</Badge>
-            </Group>
-          </Stack>
-        </CardContent>
-      </Card>
-
-      <Grid cols="1-3" class="gap-4">
-        {#each welcome.features as feature (feature.title)}
-          <Card variant="muted">
-            <CardHeader>
-              <CardTitle>{feature.title}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Text class="text-sm text-muted-foreground">{feature.description}</Text>
-            </CardContent>
-          </Card>
-        {/each}
-      </Grid>
-
-      <Box class="rounded-lg border border-border bg-card p-4">
-        <Stack class="gap-3">
-          <Text class="text-sm font-medium">Preview other runtimes</Text>
-          <Group class="flex-wrap gap-3">
-            {#each welcome.runtimes as rt (rt.id)}
-              <Link href="http://127.0.0.1:{rt.port}" variant="default">{rt.label}</Link>
-            {/each}
-          </Group>
-        </Stack>
-      </Box>
-
-      <Text class="text-center text-sm text-muted-foreground">
-        Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen
-      </Text>
-    </Stack>
-  </Container>
-</Block>
diff --git a/examples/svelte/src/main.ts b/examples/svelte/src/main.ts
deleted file mode 100644
index c05a07e..0000000
--- a/examples/svelte/src/main.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mount } from "svelte";
-import Welcome from "./Welcome.svelte";
-
-mount(Welcome, { target: document.getElementById("app")! });
diff --git a/examples/svelte/svelte.config.js b/examples/svelte/svelte.config.js
deleted file mode 100644
index e82cbe4..0000000
--- a/examples/svelte/svelte.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-
-/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
-export default {
-  preprocess: vitePreprocess(),
-};
diff --git a/examples/svelte/tsconfig.json b/examples/svelte/tsconfig.json
deleted file mode 100644
index d81cdef..0000000
--- a/examples/svelte/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "paths": {
-      "@ui": ["../../generated/ui/index.svelte.ts"],
-      "@ui/*": ["../../generated/ui/*"]
-    }
-  },
-  "include": ["src/**/*.ts", "src/**/*.svelte", "../data/**/*.json"]
-}
diff --git a/examples/svelte/vite.config.ts b/examples/svelte/vite.config.ts
deleted file mode 100644
index 2c9d138..0000000
--- a/examples/svelte/vite.config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import path from "path";
-import { fileURLToPath } from "url";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { defineConfig } from "vite";
-import { generatedUiRoot, serveExamplesStatic } from "../shared/vite-static";
-
-const rootDir = path.dirname(fileURLToPath(import.meta.url));
-
-export default defineConfig({
-  root: rootDir,
-  plugins: [svelte(), serveExamplesStatic()],
-  resolve: {
-    alias: {
-      "@ui": path.join(generatedUiRoot, "index.svelte.ts"),
-    },
-  },
-  server: {
-    port: 5174,
-    fs: {
-      allow: [path.resolve(rootDir, ".."), path.resolve(rootDir, "../../generated")],
-    },
-  },
-});
diff --git a/examples/templ/cmd/server/main.go b/examples/templ/cmd/server/main.go
deleted file mode 100644
index 1526cf7..0000000
--- a/examples/templ/cmd/server/main.go
+++ /dev/null
@@ -1,54 +0,0 @@
-package main
-
-import (
-	"log"
-	"net/http"
-	"os"
-	"path/filepath"
-
-	templpreview "github.com/ui8kit/codegen-examples/templ"
-)
-
-func main() {
-	addr := envOr("ADDR", "127.0.0.1:8080")
-	staticDir := filepath.Join(examplesRoot(), "web", "static")
-
-	mux := http.NewServeMux()
-	mux.HandleFunc("GET /{$}", func(w http.ResponseWriter, r *http.Request) {
-		if err := templpreview.Page().Render(r.Context(), w); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-		}
-	})
-	mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir(staticDir))))
-
-	log.Printf("codegen welcome (templ) http://%s/", addr)
-	if err := http.ListenAndServe(addr, mux); err != nil {
-		log.Fatal(err)
-	}
-}
-
-func envOr(key, fallback string) string {
-	if v := os.Getenv(key); v != "" {
-		return v
-	}
-	return fallback
-}
-
-func examplesRoot() string {
-	dir, err := os.Getwd()
-	if err != nil {
-		log.Fatal(err)
-	}
-	for {
-		if _, err := os.Stat(filepath.Join(dir, "package.json")); err == nil {
-			if _, err := os.Stat(filepath.Join(dir, "web", "static")); err == nil {
-				return dir
-			}
-		}
-		parent := filepath.Dir(dir)
-		if parent == dir {
-			log.Fatal("examples root not found")
-		}
-		dir = parent
-	}
-}
diff --git a/examples/templ/go.mod b/examples/templ/go.mod
deleted file mode 100644
index 873f92b..0000000
--- a/examples/templ/go.mod
+++ /dev/null
@@ -1,10 +0,0 @@
-module github.com/ui8kit/codegen-examples/templ
-
-go 1.23.0
-
-require (
-	github.com/a-h/templ v0.3.1001
-	github.com/ui8kit/ui v0.0.0
-)
-
-replace github.com/ui8kit/ui => ../../generated
diff --git a/examples/templ/go.sum b/examples/templ/go.sum
deleted file mode 100644
index bcce387..0000000
--- a/examples/templ/go.sum
+++ /dev/null
@@ -1,4 +0,0 @@
-github.com/a-h/templ v0.3.1001 h1:yHDTgexACdJttyiyamcTHXr2QkIeVF1MukLy44EAhMY=
-github.com/a-h/templ v0.3.1001/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
-github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
-github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
diff --git a/examples/templ/page.templ b/examples/templ/page.templ
deleted file mode 100644
index d3dfb5c..0000000
--- a/examples/templ/page.templ
+++ /dev/null
@@ -1,16 +0,0 @@
-package templpreview
-
-templ Page() {
-	<!DOCTYPE html>
-	<html lang="en">
-		<head>
-			<meta charset="UTF-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1"/>
-			<title>UI8Kit Codegen · Go Templ</title>
-			<link rel="stylesheet" href="/static/css/app.css"/>
-		</head>
-		<body class="bg-background text-foreground antialiased">
-			@Welcome(WelcomeProps{Runtime: "Go Templ"})
-		</body>
-	</html>
-}
diff --git a/examples/templ/page_templ.go b/examples/templ/page_templ.go
deleted file mode 100644
index adad0b3..0000000
--- a/examples/templ/page_templ.go
+++ /dev/null
@@ -1,48 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-package templpreview
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-func Page() templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>UI8Kit Codegen · Go Templ</title><link rel=\"stylesheet\" href=\"/static/css/app.css\"></head><body class=\"bg-background text-foreground antialiased\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = Welcome(WelcomeProps{Runtime: "Go Templ"}).Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</body></html>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/examples/templ/welcome.templ b/examples/templ/welcome.templ
deleted file mode 100644
index 3ef22d7..0000000
--- a/examples/templ/welcome.templ
+++ /dev/null
@@ -1,148 +0,0 @@
-package templpreview
-
-import (
-	uiutils "github.com/ui8kit/ui/utils"
-	"github.com/ui8kit/ui/ui/badge"
-	"github.com/ui8kit/ui/ui/block"
-	"github.com/ui8kit/ui/ui/box"
-	"github.com/ui8kit/ui/ui/button"
-	"github.com/ui8kit/ui/ui/card"
-	"github.com/ui8kit/ui/ui/container"
-	"github.com/ui8kit/ui/ui/grid"
-	"github.com/ui8kit/ui/ui/group"
-	"github.com/ui8kit/ui/ui/link"
-	"github.com/ui8kit/ui/ui/stack"
-	"github.com/ui8kit/ui/ui/text"
-	"github.com/ui8kit/ui/ui/title"
-)
-
-type WelcomeProps struct {
-	Runtime string
-}
-
-templ Welcome(props WelcomeProps) {
-	@block.Block(block.BlockProps{Tag: "main", Class: "min-h-screen bg-muted/30 text-foreground"}) {
-		@container.Container(container.ContainerProps{Class: "mx-auto max-w-4xl px-4 py-16"}) {
-			@stack.Stack(stack.StackProps{Class: "gap-8"}) {
-				@stack.Stack(stack.StackProps{Class: "items-center gap-4 text-center"}) {
-					@badge.Badge(badge.BadgeProps{Variant: "outline", Class: "text-xs uppercase tracking-wide"}) {
-						{ props.Runtime }
-					}
-					@title.Title(title.TitleProps{As: uiutils.H1, Class: "text-3xl font-bold tracking-tight"}) {
-						UI8Kit Codegen
-					}
-					@text.Text(text.TextProps{Class: "max-w-2xl text-muted-foreground"}) {
-						One typed render contract — seven generated runtimes with identical DOM, design, and ARIA.
-					}
-				}
-				@card.Card(card.CardProps{Variant: "default"}) {
-					@card.CardHeader(card.CardHeaderProps{}) {
-						@card.CardTitle(card.CardTitleProps{}) {
-							Generated primitives
-						}
-					}
-					@card.CardContent(card.CardContentProps{}) {
-						@stack.Stack(stack.StackProps{Class: "gap-4"}) {
-							@group.Group(group.GroupProps{Class: "flex-wrap gap-2"}) {
-								@button.Button(button.ButtonProps{Variant: "default", Size: "sm"}) {
-									Default
-								}
-								@button.Button(button.ButtonProps{Variant: "secondary", Size: "sm"}) {
-									Secondary
-								}
-								@button.Button(button.ButtonProps{Variant: "outline", Size: "sm"}) {
-									Outline
-								}
-								@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm"}) {
-									Ghost
-								}
-								@button.Button(button.ButtonProps{Variant: "destructive", Size: "sm"}) {
-									Destructive
-								}
-							}
-							@group.Group(group.GroupProps{Class: "flex-wrap gap-2"}) {
-								@badge.Badge(badge.BadgeProps{Variant: "default"}) {
-									Badge
-								}
-								@badge.Badge(badge.BadgeProps{Variant: "secondary"}) {
-									Secondary
-								}
-								@badge.Badge(badge.BadgeProps{Variant: "outline"}) {
-									Outline
-								}
-							}
-						}
-					}
-				}
-				@grid.Grid(grid.GridProps{Cols: "1-3", Class: "gap-4"}) {
-					@card.Card(card.CardProps{Variant: "muted"}) {
-						@card.CardHeader(card.CardHeaderProps{}) {
-							@card.CardTitle(card.CardTitleProps{}) {
-								Spec-driven
-							}
-						}
-						@card.CardContent(card.CardContentProps{}) {
-							@text.Text(text.TextProps{Class: "text-sm text-muted-foreground"}) {
-								Brick definitions in a tiny expression IR — no hand-written drift across stacks.
-							}
-						}
-					}
-					@card.Card(card.CardProps{Variant: "muted"}) {
-						@card.CardHeader(card.CardHeaderProps{}) {
-							@card.CardTitle(card.CardTitleProps{}) {
-								Seven runtimes
-							}
-						}
-						@card.CardContent(card.CardContentProps{}) {
-							@text.Text(text.TextProps{Class: "text-sm text-muted-foreground"}) {
-								Go Templ, React 19, Svelte 5, Vue 3, Latte, Twig, and static HTML from the same source.
-							}
-						}
-					}
-					@card.Card(card.CardProps{Variant: "muted"}) {
-						@card.CardHeader(card.CardHeaderProps{}) {
-							@card.CardTitle(card.CardTitleProps{}) {
-								DOM parity
-							}
-						}
-						@card.CardContent(card.CardContentProps{}) {
-							@text.Text(text.TextProps{Class: "text-sm text-muted-foreground"}) {
-								The canonical renderer is the executable specification, verified by tests.
-							}
-						}
-					}
-				}
-				@box.Box(box.BoxProps{Class: "rounded-lg border border-border bg-card p-4"}) {
-					@stack.Stack(stack.StackProps{Class: "gap-3"}) {
-						@text.Text(text.TextProps{Class: "text-sm font-medium"}) {
-							Preview other runtimes
-						}
-						@group.Group(group.GroupProps{Class: "flex-wrap gap-3"}) {
-							@link.Link(link.LinkProps{Href: "http://127.0.0.1:8080", Variant: "default"}) {
-								Go Templ
-							}
-							@link.Link(link.LinkProps{Href: "http://127.0.0.1:5173", Variant: "default"}) {
-								React 19
-							}
-							@link.Link(link.LinkProps{Href: "http://127.0.0.1:5174", Variant: "default"}) {
-								Svelte 5
-							}
-							@link.Link(link.LinkProps{Href: "http://127.0.0.1:5175", Variant: "default"}) {
-								Vue 3
-							}
-							@link.Link(link.LinkProps{Href: "http://127.0.0.1:5176", Variant: "default"}) {
-								Latte
-							}
-							@link.Link(link.LinkProps{Href: "http://127.0.0.1:5177", Variant: "default"}) {
-								Twig
-							}
-						}
-					}
-				}
-				@text.Text(text.TextProps{Class: "text-center text-sm text-muted-foreground"}) {
-					Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen
-				}
-			}
-		}
-	}
-}
diff --git a/examples/templ/welcome_templ.go b/examples/templ/welcome_templ.go
deleted file mode 100644
index 8e4a889..0000000
--- a/examples/templ/welcome_templ.go
+++ /dev/null
@@ -1,1147 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-package templpreview
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"github.com/ui8kit/ui/ui/badge"
-	"github.com/ui8kit/ui/ui/block"
-	"github.com/ui8kit/ui/ui/box"
-	"github.com/ui8kit/ui/ui/button"
-	"github.com/ui8kit/ui/ui/card"
-	"github.com/ui8kit/ui/ui/container"
-	"github.com/ui8kit/ui/ui/grid"
-	"github.com/ui8kit/ui/ui/group"
-	"github.com/ui8kit/ui/ui/link"
-	"github.com/ui8kit/ui/ui/stack"
-	"github.com/ui8kit/ui/ui/text"
-	"github.com/ui8kit/ui/ui/title"
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-type WelcomeProps struct {
-	Runtime string
-}
-
-func Welcome(props WelcomeProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-			if !templ_7745c5c3_IsBuffer {
-				defer func() {
-					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-					if templ_7745c5c3_Err == nil {
-						templ_7745c5c3_Err = templ_7745c5c3_BufErr
-					}
-				}()
-			}
-			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Var3 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-				templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-				templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-				if !templ_7745c5c3_IsBuffer {
-					defer func() {
-						templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err == nil {
-							templ_7745c5c3_Err = templ_7745c5c3_BufErr
-						}
-					}()
-				}
-				ctx = templ.InitializeContext(ctx)
-				templ_7745c5c3_Var4 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-					templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-					templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-					if !templ_7745c5c3_IsBuffer {
-						defer func() {
-							templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err == nil {
-								templ_7745c5c3_Err = templ_7745c5c3_BufErr
-							}
-						}()
-					}
-					ctx = templ.InitializeContext(ctx)
-					templ_7745c5c3_Var5 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-						templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-						templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-						if !templ_7745c5c3_IsBuffer {
-							defer func() {
-								templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err == nil {
-									templ_7745c5c3_Err = templ_7745c5c3_BufErr
-								}
-							}()
-						}
-						ctx = templ.InitializeContext(ctx)
-						templ_7745c5c3_Var6 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-							templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-							templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-							if !templ_7745c5c3_IsBuffer {
-								defer func() {
-									templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err == nil {
-										templ_7745c5c3_Err = templ_7745c5c3_BufErr
-									}
-								}()
-							}
-							ctx = templ.InitializeContext(ctx)
-							var templ_7745c5c3_Var7 string
-							templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(props.Runtime)
-							if templ_7745c5c3_Err != nil {
-								return templ.Error{Err: templ_7745c5c3_Err, FileName: `welcome.templ`, Line: 29, Col: 21}
-							}
-							_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							return nil
-						})
-						templ_7745c5c3_Err = badge.Badge(badge.BadgeProps{Variant: "outline", Class: "text-xs uppercase tracking-wide"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var6), templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " ")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Var8 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-							templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-							templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-							if !templ_7745c5c3_IsBuffer {
-								defer func() {
-									templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err == nil {
-										templ_7745c5c3_Err = templ_7745c5c3_BufErr
-									}
-								}()
-							}
-							ctx = templ.InitializeContext(ctx)
-							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "UI8Kit Codegen")
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							return nil
-						})
-						templ_7745c5c3_Err = title.Title(title.TitleProps{As: uiutils.H1, Class: "text-3xl font-bold tracking-tight"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var8), templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " ")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Var9 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-							templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-							templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-							if !templ_7745c5c3_IsBuffer {
-								defer func() {
-									templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err == nil {
-										templ_7745c5c3_Err = templ_7745c5c3_BufErr
-									}
-								}()
-							}
-							ctx = templ.InitializeContext(ctx)
-							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "One typed render contract — seven generated runtimes with identical DOM, design, and ARIA.")
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							return nil
-						})
-						templ_7745c5c3_Err = text.Text(text.TextProps{Class: "max-w-2xl text-muted-foreground"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var9), templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						return nil
-					})
-					templ_7745c5c3_Err = stack.Stack(stack.StackProps{Class: "items-center gap-4 text-center"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var5), templ_7745c5c3_Buffer)
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " ")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Var10 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-						templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-						templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-						if !templ_7745c5c3_IsBuffer {
-							defer func() {
-								templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err == nil {
-									templ_7745c5c3_Err = templ_7745c5c3_BufErr
-								}
-							}()
-						}
-						ctx = templ.InitializeContext(ctx)
-						templ_7745c5c3_Var11 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-							templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-							templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-							if !templ_7745c5c3_IsBuffer {
-								defer func() {
-									templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err == nil {
-										templ_7745c5c3_Err = templ_7745c5c3_BufErr
-									}
-								}()
-							}
-							ctx = templ.InitializeContext(ctx)
-							templ_7745c5c3_Var12 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "Generated primitives")
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = card.CardTitle(card.CardTitleProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var12), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							return nil
-						})
-						templ_7745c5c3_Err = card.CardHeader(card.CardHeaderProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var11), templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " ")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Var13 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-							templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-							templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-							if !templ_7745c5c3_IsBuffer {
-								defer func() {
-									templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err == nil {
-										templ_7745c5c3_Err = templ_7745c5c3_BufErr
-									}
-								}()
-							}
-							ctx = templ.InitializeContext(ctx)
-							templ_7745c5c3_Var14 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Var15 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Var16 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-										templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-										templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-										if !templ_7745c5c3_IsBuffer {
-											defer func() {
-												templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-												if templ_7745c5c3_Err == nil {
-													templ_7745c5c3_Err = templ_7745c5c3_BufErr
-												}
-											}()
-										}
-										ctx = templ.InitializeContext(ctx)
-										templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "Default")
-										if templ_7745c5c3_Err != nil {
-											return templ_7745c5c3_Err
-										}
-										return nil
-									})
-									templ_7745c5c3_Err = button.Button(button.ButtonProps{Variant: "default", Size: "sm"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var16), templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " ")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Var17 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-										templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-										templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-										if !templ_7745c5c3_IsBuffer {
-											defer func() {
-												templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-												if templ_7745c5c3_Err == nil {
-													templ_7745c5c3_Err = templ_7745c5c3_BufErr
-												}
-											}()
-										}
-										ctx = templ.InitializeContext(ctx)
-										templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "Secondary")
-										if templ_7745c5c3_Err != nil {
-											return templ_7745c5c3_Err
-										}
-										return nil
-									})
-									templ_7745c5c3_Err = button.Button(button.ButtonProps{Variant: "secondary", Size: "sm"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var17), templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " ")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Var18 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-										templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-										templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-										if !templ_7745c5c3_IsBuffer {
-											defer func() {
-												templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-												if templ_7745c5c3_Err == nil {
-													templ_7745c5c3_Err = templ_7745c5c3_BufErr
-												}
-											}()
-										}
-										ctx = templ.InitializeContext(ctx)
-										templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "Outline")
-										if templ_7745c5c3_Err != nil {
-											return templ_7745c5c3_Err
-										}
-										return nil
-									})
-									templ_7745c5c3_Err = button.Button(button.ButtonProps{Variant: "outline", Size: "sm"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var18), templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " ")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Var19 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-										templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-										templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-										if !templ_7745c5c3_IsBuffer {
-											defer func() {
-												templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-												if templ_7745c5c3_Err == nil {
-													templ_7745c5c3_Err = templ_7745c5c3_BufErr
-												}
-											}()
-										}
-										ctx = templ.InitializeContext(ctx)
-										templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "Ghost")
-										if templ_7745c5c3_Err != nil {
-											return templ_7745c5c3_Err
-										}
-										return nil
-									})
-									templ_7745c5c3_Err = button.Button(button.ButtonProps{Variant: "ghost", Size: "sm"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var19), templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, " ")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Var20 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-										templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-										templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-										if !templ_7745c5c3_IsBuffer {
-											defer func() {
-												templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-												if templ_7745c5c3_Err == nil {
-													templ_7745c5c3_Err = templ_7745c5c3_BufErr
-												}
-											}()
-										}
-										ctx = templ.InitializeContext(ctx)
-										templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "Destructive")
-										if templ_7745c5c3_Err != nil {
-											return templ_7745c5c3_Err
-										}
-										return nil
-									})
-									templ_7745c5c3_Err = button.Button(button.ButtonProps{Variant: "destructive", Size: "sm"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var20), templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = group.Group(group.GroupProps{Class: "flex-wrap gap-2"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var15), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, " ")
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Var21 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Var22 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-										templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-										templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-										if !templ_7745c5c3_IsBuffer {
-											defer func() {
-												templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-												if templ_7745c5c3_Err == nil {
-													templ_7745c5c3_Err = templ_7745c5c3_BufErr
-												}
-											}()
-										}
-										ctx = templ.InitializeContext(ctx)
-										templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "Badge")
-										if templ_7745c5c3_Err != nil {
-											return templ_7745c5c3_Err
-										}
-										return nil
-									})
-									templ_7745c5c3_Err = badge.Badge(badge.BadgeProps{Variant: "default"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var22), templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " ")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Var23 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-										templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-										templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-										if !templ_7745c5c3_IsBuffer {
-											defer func() {
-												templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-												if templ_7745c5c3_Err == nil {
-													templ_7745c5c3_Err = templ_7745c5c3_BufErr
-												}
-											}()
-										}
-										ctx = templ.InitializeContext(ctx)
-										templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "Secondary")
-										if templ_7745c5c3_Err != nil {
-											return templ_7745c5c3_Err
-										}
-										return nil
-									})
-									templ_7745c5c3_Err = badge.Badge(badge.BadgeProps{Variant: "secondary"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var23), templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, " ")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									templ_7745c5c3_Var24 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-										templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-										templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-										if !templ_7745c5c3_IsBuffer {
-											defer func() {
-												templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-												if templ_7745c5c3_Err == nil {
-													templ_7745c5c3_Err = templ_7745c5c3_BufErr
-												}
-											}()
-										}
-										ctx = templ.InitializeContext(ctx)
-										templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "Outline")
-										if templ_7745c5c3_Err != nil {
-											return templ_7745c5c3_Err
-										}
-										return nil
-									})
-									templ_7745c5c3_Err = badge.Badge(badge.BadgeProps{Variant: "outline"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var24), templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = group.Group(group.GroupProps{Class: "flex-wrap gap-2"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var21), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = stack.Stack(stack.StackProps{Class: "gap-4"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var14), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							return nil
-						})
-						templ_7745c5c3_Err = card.CardContent(card.CardContentProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var13), templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						return nil
-					})
-					templ_7745c5c3_Err = card.Card(card.CardProps{Variant: "default"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var10), templ_7745c5c3_Buffer)
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, " ")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Var25 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-						templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-						templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-						if !templ_7745c5c3_IsBuffer {
-							defer func() {
-								templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err == nil {
-									templ_7745c5c3_Err = templ_7745c5c3_BufErr
-								}
-							}()
-						}
-						ctx = templ.InitializeContext(ctx)
-						templ_7745c5c3_Var26 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-							templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-							templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-							if !templ_7745c5c3_IsBuffer {
-								defer func() {
-									templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err == nil {
-										templ_7745c5c3_Err = templ_7745c5c3_BufErr
-									}
-								}()
-							}
-							ctx = templ.InitializeContext(ctx)
-							templ_7745c5c3_Var27 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Var28 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "Spec-driven")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = card.CardTitle(card.CardTitleProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var28), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = card.CardHeader(card.CardHeaderProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var27), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, " ")
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							templ_7745c5c3_Var29 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Var30 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "Brick definitions in a tiny expression IR — no hand-written drift across stacks.")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = text.Text(text.TextProps{Class: "text-sm text-muted-foreground"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var30), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = card.CardContent(card.CardContentProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var29), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							return nil
-						})
-						templ_7745c5c3_Err = card.Card(card.CardProps{Variant: "muted"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var26), templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, " ")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Var31 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-							templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-							templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-							if !templ_7745c5c3_IsBuffer {
-								defer func() {
-									templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err == nil {
-										templ_7745c5c3_Err = templ_7745c5c3_BufErr
-									}
-								}()
-							}
-							ctx = templ.InitializeContext(ctx)
-							templ_7745c5c3_Var32 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Var33 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "Seven runtimes")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = card.CardTitle(card.CardTitleProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var33), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = card.CardHeader(card.CardHeaderProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var32), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, " ")
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							templ_7745c5c3_Var34 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Var35 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "Go Templ, React 19, Svelte 5, Vue 3, Latte, Twig, and static HTML from the same source.")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = text.Text(text.TextProps{Class: "text-sm text-muted-foreground"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var35), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = card.CardContent(card.CardContentProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var34), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							return nil
-						})
-						templ_7745c5c3_Err = card.Card(card.CardProps{Variant: "muted"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var31), templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, " ")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						templ_7745c5c3_Var36 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-							templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-							templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-							if !templ_7745c5c3_IsBuffer {
-								defer func() {
-									templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err == nil {
-										templ_7745c5c3_Err = templ_7745c5c3_BufErr
-									}
-								}()
-							}
-							ctx = templ.InitializeContext(ctx)
-							templ_7745c5c3_Var37 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Var38 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "DOM parity")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = card.CardTitle(card.CardTitleProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var38), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = card.CardHeader(card.CardHeaderProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var37), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, " ")
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							templ_7745c5c3_Var39 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Var40 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "The canonical renderer is the executable specification, verified by tests.")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = text.Text(text.TextProps{Class: "text-sm text-muted-foreground"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var40), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = card.CardContent(card.CardContentProps{}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var39), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							return nil
-						})
-						templ_7745c5c3_Err = card.Card(card.CardProps{Variant: "muted"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var36), templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						return nil
-					})
-					templ_7745c5c3_Err = grid.Grid(grid.GridProps{Cols: "1-3", Class: "gap-4"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var25), templ_7745c5c3_Buffer)
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, " ")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Var41 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-						templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-						templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-						if !templ_7745c5c3_IsBuffer {
-							defer func() {
-								templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err == nil {
-									templ_7745c5c3_Err = templ_7745c5c3_BufErr
-								}
-							}()
-						}
-						ctx = templ.InitializeContext(ctx)
-						templ_7745c5c3_Var42 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-							templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-							templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-							if !templ_7745c5c3_IsBuffer {
-								defer func() {
-									templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-									if templ_7745c5c3_Err == nil {
-										templ_7745c5c3_Err = templ_7745c5c3_BufErr
-									}
-								}()
-							}
-							ctx = templ.InitializeContext(ctx)
-							templ_7745c5c3_Var43 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "Preview other runtimes")
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = text.Text(text.TextProps{Class: "text-sm font-medium"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var43), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, " ")
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							templ_7745c5c3_Var44 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-								templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-								templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-								if !templ_7745c5c3_IsBuffer {
-									defer func() {
-										templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-										if templ_7745c5c3_Err == nil {
-											templ_7745c5c3_Err = templ_7745c5c3_BufErr
-										}
-									}()
-								}
-								ctx = templ.InitializeContext(ctx)
-								templ_7745c5c3_Var45 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "Go Templ")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = link.Link(link.LinkProps{Href: "http://127.0.0.1:8080", Variant: "default"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var45), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, " ")
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Var46 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "React 19")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = link.Link(link.LinkProps{Href: "http://127.0.0.1:5173", Variant: "default"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var46), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, " ")
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Var47 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "Svelte 5")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = link.Link(link.LinkProps{Href: "http://127.0.0.1:5174", Variant: "default"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var47), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, " ")
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Var48 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "Vue 3")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = link.Link(link.LinkProps{Href: "http://127.0.0.1:5175", Variant: "default"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var48), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, " ")
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Var49 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "Latte")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = link.Link(link.LinkProps{Href: "http://127.0.0.1:5176", Variant: "default"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var49), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, " ")
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								templ_7745c5c3_Var50 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-									templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-									templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-									if !templ_7745c5c3_IsBuffer {
-										defer func() {
-											templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-											if templ_7745c5c3_Err == nil {
-												templ_7745c5c3_Err = templ_7745c5c3_BufErr
-											}
-										}()
-									}
-									ctx = templ.InitializeContext(ctx)
-									templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "Twig")
-									if templ_7745c5c3_Err != nil {
-										return templ_7745c5c3_Err
-									}
-									return nil
-								})
-								templ_7745c5c3_Err = link.Link(link.LinkProps{Href: "http://127.0.0.1:5177", Variant: "default"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var50), templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err != nil {
-									return templ_7745c5c3_Err
-								}
-								return nil
-							})
-							templ_7745c5c3_Err = group.Group(group.GroupProps{Class: "flex-wrap gap-3"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var44), templ_7745c5c3_Buffer)
-							if templ_7745c5c3_Err != nil {
-								return templ_7745c5c3_Err
-							}
-							return nil
-						})
-						templ_7745c5c3_Err = stack.Stack(stack.StackProps{Class: "gap-3"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var42), templ_7745c5c3_Buffer)
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						return nil
-					})
-					templ_7745c5c3_Err = box.Box(box.BoxProps{Class: "rounded-lg border border-border bg-card p-4"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var41), templ_7745c5c3_Buffer)
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, " ")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Var51 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-						templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-						templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-						if !templ_7745c5c3_IsBuffer {
-							defer func() {
-								templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-								if templ_7745c5c3_Err == nil {
-									templ_7745c5c3_Err = templ_7745c5c3_BufErr
-								}
-							}()
-						}
-						ctx = templ.InitializeContext(ctx)
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen")
-						if templ_7745c5c3_Err != nil {
-							return templ_7745c5c3_Err
-						}
-						return nil
-					})
-					templ_7745c5c3_Err = text.Text(text.TextProps{Class: "text-center text-sm text-muted-foreground"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var51), templ_7745c5c3_Buffer)
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					return nil
-				})
-				templ_7745c5c3_Err = stack.Stack(stack.StackProps{Class: "gap-8"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var4), templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				return nil
-			})
-			templ_7745c5c3_Err = container.Container(container.ContainerProps{Class: "mx-auto max-w-4xl px-4 py-16"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var3), templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			return nil
-		})
-		templ_7745c5c3_Err = block.Block(block.BlockProps{Tag: "main", Class: "min-h-screen bg-muted/30 text-foreground"}).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/examples/twig/server.php b/examples/twig/server.php
deleted file mode 100644
index 3005533..0000000
--- a/examples/twig/server.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php
-
-/**
- * Twig welcome preview — php -S 127.0.0.1:5177 server.php
- * Renders the generated .html.twig primitives with the shared shadcn tokens.
- */
-
-declare(strict_types=1);
-
-$root = dirname(__DIR__, 2); // ui8kit-codegen/
-
-$uri = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH) ?: '/';
-
-if (str_starts_with($uri, '/static/')) {
-    $file = dirname(__DIR__) . '/web' . $uri;
-    if (is_file($file)) {
-        $types = ['css' => 'text/css', 'js' => 'text/javascript', 'svg' => 'image/svg+xml', 'woff2' => 'font/woff2'];
-        header('Content-Type: ' . ($types[pathinfo($file, PATHINFO_EXTENSION)] ?? 'application/octet-stream'));
-        readfile($file);
-        return;
-    }
-    http_response_code(404);
-    echo 'Not found';
-    return;
-}
-
-require $root . '/generated/php/vendor/autoload.php';
-
-$twig = new Twig\Environment(
-    new Twig\Loader\FilesystemLoader([__DIR__ . '/templates', $root . '/generated/ui']),
-    ['autoescape' => 'html', 'strict_variables' => false, 'cache' => false]
-);
-$twig->addExtension(new UI8Kit\TwigExtension());
-
-echo $twig->render('page.html.twig', ['runtime' => 'Twig']);
diff --git a/examples/twig/templates/page.html.twig b/examples/twig/templates/page.html.twig
deleted file mode 100644
index 65e7eaf..0000000
--- a/examples/twig/templates/page.html.twig
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<title>UI8Kit Codegen · Twig</title>
-		<link rel="stylesheet" href="/static/css/app.css">
-	</head>
-	<body class="bg-background text-foreground antialiased">
-		{% include 'welcome.html.twig' with {'runtime': runtime|default('Twig')} %}
-	</body>
-</html>
diff --git a/examples/twig/templates/welcome.html.twig b/examples/twig/templates/welcome.html.twig
deleted file mode 100644
index 8013a78..0000000
--- a/examples/twig/templates/welcome.html.twig
+++ /dev/null
@@ -1,105 +0,0 @@
-{# Hero #}
-{% set hero %}
-	{% include 'badge/Badge.html.twig' with {'variant': 'outline', 'class': 'text-xs uppercase tracking-wide', 'children': runtime|default('Twig')} only %}
-	{% include 'title/Title.html.twig' with {'as': 1, 'class': 'text-3xl font-bold tracking-tight', 'children': 'UI8Kit Codegen'} only %}
-	{% include 'text/Text.html.twig' with {'class': 'max-w-2xl text-muted-foreground', 'children': 'One typed render contract — seven generated runtimes with identical DOM, design, and ARIA.'} only %}
-{% endset %}
-{% set heroStack %}
-	{% include 'stack/Stack.html.twig' with {'class': 'items-center gap-4 text-center', 'children': hero} only %}
-{% endset %}
-
-{# Primitives card #}
-{% set buttons %}
-	{% include 'button/Button.html.twig' with {'variant': 'default', 'size': 'sm', 'children': 'Default'} only %}
-	{% include 'button/Button.html.twig' with {'variant': 'secondary', 'size': 'sm', 'children': 'Secondary'} only %}
-	{% include 'button/Button.html.twig' with {'variant': 'outline', 'size': 'sm', 'children': 'Outline'} only %}
-	{% include 'button/Button.html.twig' with {'variant': 'ghost', 'size': 'sm', 'children': 'Ghost'} only %}
-	{% include 'button/Button.html.twig' with {'variant': 'destructive', 'size': 'sm', 'children': 'Destructive'} only %}
-{% endset %}
-{% set badges %}
-	{% include 'badge/Badge.html.twig' with {'variant': 'default', 'children': 'Badge'} only %}
-	{% include 'badge/Badge.html.twig' with {'variant': 'secondary', 'children': 'Secondary'} only %}
-	{% include 'badge/Badge.html.twig' with {'variant': 'outline', 'children': 'Outline'} only %}
-{% endset %}
-{% set showcase %}
-	{% include 'group/Group.html.twig' with {'class': 'flex-wrap gap-2', 'children': buttons} only %}
-	{% include 'group/Group.html.twig' with {'class': 'flex-wrap gap-2', 'children': badges} only %}
-{% endset %}
-{% set showcaseStack %}
-	{% include 'stack/Stack.html.twig' with {'class': 'gap-4', 'children': showcase} only %}
-{% endset %}
-{% set primitivesTitle %}
-	{% include 'card/CardTitle.html.twig' with {'children': 'Generated primitives'} only %}
-{% endset %}
-{% set primitivesInner %}
-	{% include 'card/CardHeader.html.twig' with {'children': primitivesTitle} only %}
-	{% include 'card/CardContent.html.twig' with {'children': showcaseStack} only %}
-{% endset %}
-{% set primitivesCard %}
-	{% include 'card/Card.html.twig' with {'variant': 'default', 'children': primitivesInner} only %}
-{% endset %}
-
-{# Feature cards #}
-{% set features = [
-	{'title': 'Spec-driven', 'description': 'Brick definitions in a tiny expression IR — no hand-written drift across stacks.'},
-	{'title': 'Seven runtimes', 'description': 'Go Templ, React 19, Svelte 5, Vue 3, Latte, Twig, and static HTML from the same source.'},
-	{'title': 'DOM parity', 'description': 'The canonical renderer is the executable specification, verified by tests.'}
-] %}
-{% set featureCards %}
-	{% for feature in features %}
-		{% set featureTitle %}
-			{% include 'card/CardTitle.html.twig' with {'children': feature.title} only %}
-		{% endset %}
-		{% set featureText %}
-			{% include 'text/Text.html.twig' with {'class': 'text-sm text-muted-foreground', 'children': feature.description} only %}
-		{% endset %}
-		{% set featureInner %}
-			{% include 'card/CardHeader.html.twig' with {'children': featureTitle} only %}
-			{% include 'card/CardContent.html.twig' with {'children': featureText} only %}
-		{% endset %}
-		{% include 'card/Card.html.twig' with {'variant': 'muted', 'children': featureInner} only %}
-	{% endfor %}
-{% endset %}
-{% set featureGrid %}
-	{% include 'grid/Grid.html.twig' with {'cols': '1-3', 'class': 'gap-4', 'children': featureCards} only %}
-{% endset %}
-
-{# Runtime links #}
-{% set runtimes = [
-	{'label': 'Go Templ', 'port': 8080},
-	{'label': 'React 19', 'port': 5173},
-	{'label': 'Svelte 5', 'port': 5174},
-	{'label': 'Vue 3', 'port': 5175},
-	{'label': 'Latte', 'port': 5176},
-	{'label': 'Twig', 'port': 5177}
-] %}
-{% set links %}
-	{% for rt in runtimes %}
-		{% include 'link/Link.html.twig' with {'href': 'http://127.0.0.1:' ~ rt.port, 'variant': 'default', 'children': rt.label} only %}
-	{% endfor %}
-{% endset %}
-{% set linksLabel %}
-	{% include 'text/Text.html.twig' with {'class': 'text-sm font-medium', 'children': 'Preview other runtimes'} only %}
-{% endset %}
-{% set linksGroup %}
-	{% include 'group/Group.html.twig' with {'class': 'flex-wrap gap-3', 'children': links} only %}
-{% endset %}
-{% set linksStack %}
-	{% include 'stack/Stack.html.twig' with {'class': 'gap-3', 'children': linksLabel ~ linksGroup} only %}
-{% endset %}
-{% set linksBox %}
-	{% include 'box/Box.html.twig' with {'class': 'rounded-lg border border-border bg-card p-4', 'children': linksStack} only %}
-{% endset %}
-
-{% set footer %}
-	{% include 'text/Text.html.twig' with {'class': 'text-center text-sm text-muted-foreground', 'children': 'Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen'} only %}
-{% endset %}
-
-{# Page assembly #}
-{% set pageStack %}
-	{% include 'stack/Stack.html.twig' with {'class': 'gap-8', 'children': heroStack ~ primitivesCard ~ featureGrid ~ linksBox ~ footer} only %}
-{% endset %}
-{% set container %}
-	{% include 'container/Container.html.twig' with {'class': 'mx-auto max-w-4xl px-4 py-16', 'children': pageStack} only %}
-{% endset %}
-{% include 'block/Block.html.twig' with {'tag': 'main', 'class': 'min-h-screen bg-muted/30 text-foreground', 'children': container} only %}
diff --git a/examples/vue/dist/assets/index-CdiGC986.js b/examples/vue/dist/assets/index-CdiGC986.js
deleted file mode 100644
index 7f368cb..0000000
--- a/examples/vue/dist/assets/index-CdiGC986.js
+++ /dev/null
@@ -1,17 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const n of document.querySelectorAll('link[rel="modulepreload"]'))r(n);new MutationObserver(n=>{for(const o of n)if(o.type==="childList")for(const i of o.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&r(i)}).observe(document,{childList:!0,subtree:!0});function s(n){const o={};return n.integrity&&(o.integrity=n.integrity),n.referrerPolicy&&(o.referrerPolicy=n.referrerPolicy),n.crossOrigin==="use-credentials"?o.credentials="include":n.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(n){if(n.ep)return;n.ep=!0;const o=s(n);fetch(n.href,o)}})();/**
-* @vue/shared v3.5.39
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/function ur(e){const t=Object.create(null);for(const s of e.split(","))t[s]=1;return s=>s in t}const Q={},At=[],Ge=()=>{},Sn=()=>!1,Ts=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),As=e=>e.startsWith("onUpdate:"),fe=Object.assign,fr=(e,t)=>{const s=e.indexOf(t);s>-1&&e.splice(s,1)},Vo=Object.prototype.hasOwnProperty,B=(e,t)=>Vo.call(e,t),P=Array.isArray,Et=e=>rs(e)==="[object Map]",Tn=e=>rs(e)==="[object Set]",Nr=e=>rs(e)==="[object Date]",F=e=>typeof e=="function",se=e=>typeof e=="string",Le=e=>typeof e=="symbol",J=e=>e!==null&&typeof e=="object",An=e=>(J(e)||F(e))&&F(e.then)&&F(e.catch),En=Object.prototype.toString,rs=e=>En.call(e),Bo=e=>rs(e).slice(8,-1),$n=e=>rs(e)==="[object Object]",dr=e=>se(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Ut=ur(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Es=e=>{const t=Object.create(null);return(s=>t[s]||(t[s]=e(s)))},Wo=/-\w/g,xe=Es(e=>e.replace(Wo,t=>t.slice(1).toUpperCase())),Uo=/\B([A-Z])/g,_t=Es(e=>e.replace(Uo,"-$1").toLowerCase()),$s=Es(e=>e.charAt(0).toUpperCase()+e.slice(1)),Fs=Es(e=>e?`on${$s(e)}`:""),st=(e,t)=>!Object.is(e,t),Ls=(e,...t)=>{for(let s=0;s<e.length;s++)e[s](...t)},Rn=(e,t,s,r=!1)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,writable:r,value:s})},Go=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let Fr;const Rs=()=>Fr||(Fr=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function pr(e){if(P(e)){const t={};for(let s=0;s<e.length;s++){const r=e[s],n=se(r)?Xo(r):pr(r);if(n)for(const o in n)t[o]=n[o]}return t}else if(se(e)||J(e))return e}const Jo=/;(?![^(]*\))/g,qo=/:([^]+)/,Yo=/\/\*[^]*?\*\//g;function Xo(e){const t={};return e.replace(Yo,"").split(Jo).forEach(s=>{if(s){const r=s.split(qo);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t}function hr(e){let t="";if(se(e))t=e;else if(P(e))for(let s=0;s<e.length;s++){const r=hr(e[s]);r&&(t+=r+" ")}else if(J(e))for(const s in e)e[s]&&(t+=s+" ");return t.trim()}const Zo="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",Qo=ur(Zo);function On(e){return!!e||e===""}function ei(e,t){if(e.length!==t.length)return!1;let s=!0;for(let r=0;s&&r<e.length;r++)s=gr(e[r],t[r]);return s}function gr(e,t){if(e===t)return!0;let s=Nr(e),r=Nr(t);if(s||r)return s&&r?e.getTime()===t.getTime():!1;if(s=Le(e),r=Le(t),s||r)return e===t;if(s=P(e),r=P(t),s||r)return s&&r?ei(e,t):!1;if(s=J(e),r=J(t),s||r){if(!s||!r)return!1;const n=Object.keys(e).length,o=Object.keys(t).length;if(n!==o)return!1;for(const i in e){const l=e.hasOwnProperty(i),c=t.hasOwnProperty(i);if(l&&!c||!l&&c||!gr(e[i],t[i]))return!1}}return String(e)===String(t)}const Mn=e=>!!(e&&e.__v_isRef===!0),St=e=>se(e)?e:e==null?"":P(e)||J(e)&&(e.toString===En||!F(e.toString))?Mn(e)?St(e.value):JSON.stringify(e,Pn,2):String(e),Pn=(e,t)=>Mn(t)?Pn(e,t.value):Et(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((s,[r,n],o)=>(s[js(r,o)+" =>"]=n,s),{})}:Tn(t)?{[`Set(${t.size})`]:[...t.values()].map(s=>js(s))}:Le(t)?js(t):J(t)&&!P(t)&&!$n(t)?String(t):t,js=(e,t="")=>{var s;return Le(e)?`Symbol(${(s=e.description)!=null?s:t})`:e};/**
-* @vue/reactivity v3.5.39
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/let ue;class ti{constructor(t=!1){this.detached=t,this._active=!0,this._on=0,this.effects=[],this.cleanups=[],this._isPaused=!1,this._warnOnRun=!0,this.__v_skip=!0,!t&&ue&&(ue.active?(this.parent=ue,this.index=(ue.scopes||(ue.scopes=[])).push(this)-1):(this._active=!1,this._warnOnRun=!1))}get active(){return this._active}pause(){if(this._active){this._isPaused=!0;let t,s;if(this.scopes)for(t=0,s=this.scopes.length;t<s;t++)this.scopes[t].pause();for(t=0,s=this.effects.length;t<s;t++)this.effects[t].pause()}}resume(){if(this._active&&this._isPaused){this._isPaused=!1;let t,s;if(this.scopes)for(t=0,s=this.scopes.length;t<s;t++)this.scopes[t].resume();for(t=0,s=this.effects.length;t<s;t++)this.effects[t].resume()}}run(t){if(this._active){const s=ue;try{return ue=this,t()}finally{ue=s}}}on(){++this._on===1&&(this.prevScope=ue,ue=this)}off(){if(this._on>0&&--this._on===0){if(ue===this)ue=this.prevScope;else{let t=ue;for(;t;){if(t.prevScope===this){t.prevScope=this.prevScope;break}t=t.prevScope}}this.prevScope=void 0}}stop(t){if(this._active){this._active=!1;let s,r;for(s=0,r=this.effects.length;s<r;s++)this.effects[s].stop();for(this.effects.length=0,s=0,r=this.cleanups.length;s<r;s++)this.cleanups[s]();if(this.cleanups.length=0,this.scopes){for(s=0,r=this.scopes.length;s<r;s++)this.scopes[s].stop(!0);this.scopes.length=0}if(!this.detached&&this.parent&&!t){const n=this.parent.scopes.pop();n&&n!==this&&(this.parent.scopes[this.index]=n,n.index=this.index)}this.parent=void 0}}}function si(){return ue}let Z;const Ds=new WeakSet;class In{constructor(t){this.fn=t,this.deps=void 0,this.depsTail=void 0,this.flags=5,this.next=void 0,this.cleanup=void 0,this.scheduler=void 0,ue&&(ue.active?ue.effects.push(this):this.flags&=-2)}pause(){this.flags|=64}resume(){this.flags&64&&(this.flags&=-65,Ds.has(this)&&(Ds.delete(this),this.trigger()))}notify(){this.flags&2&&!(this.flags&32)||this.flags&8||Nn(this)}run(){if(!(this.flags&1))return this.fn();this.flags|=2,Lr(this),Fn(this);const t=Z,s=Ne;Z=this,Ne=!0;try{return this.fn()}finally{Ln(this),Z=t,Ne=s,this.flags&=-3}}stop(){if(this.flags&1){for(let t=this.deps;t;t=t.nextDep)yr(t);this.deps=this.depsTail=void 0,Lr(this),this.onStop&&this.onStop(),this.flags&=-2}}trigger(){this.flags&64?Ds.add(this):this.scheduler?this.scheduler():this.runIfDirty()}runIfDirty(){Xs(this)&&this.run()}get dirty(){return Xs(this)}}let kn=0,Gt,Jt;function Nn(e,t=!1){if(e.flags|=8,t){e.next=Jt,Jt=e;return}e.next=Gt,Gt=e}function br(){kn++}function mr(){if(--kn>0)return;if(Jt){let t=Jt;for(Jt=void 0;t;){const s=t.next;t.next=void 0,t.flags&=-9,t=s}}let e;for(;Gt;){let t=Gt;for(Gt=void 0;t;){const s=t.next;if(t.next=void 0,t.flags&=-9,t.flags&1)try{t.trigger()}catch(r){e||(e=r)}t=s}}if(e)throw e}function Fn(e){for(let t=e.deps;t;t=t.nextDep)t.version=-1,t.prevActiveLink=t.dep.activeLink,t.dep.activeLink=t}function Ln(e){let t,s=e.depsTail,r=s;for(;r;){const n=r.prevDep;r.version===-1?(r===s&&(s=n),yr(r),ri(r)):t=r,r.dep.activeLink=r.prevActiveLink,r.prevActiveLink=void 0,r=n}e.deps=t,e.depsTail=s}function Xs(e){for(let t=e.deps;t;t=t.nextDep)if(t.dep.version!==t.version||t.dep.computed&&(jn(t.dep.computed)||t.dep.version!==t.version))return!0;return!!e._dirty}function jn(e){if(e.flags&4&&!(e.flags&16)||(e.flags&=-17,e.globalVersion===Zt)||(e.globalVersion=Zt,!e.isSSR&&e.flags&128&&(!e.deps&&!e._dirty||!Xs(e))))return;e.flags|=2;const t=e.dep,s=Z,r=Ne;Z=e,Ne=!0;try{Fn(e);const n=e.fn(e._value);(t.version===0||st(n,e._value))&&(e.flags|=128,e._value=n,t.version++)}catch(n){throw t.version++,n}finally{Z=s,Ne=r,Ln(e),e.flags&=-3}}function yr(e,t=!1){const{dep:s,prevSub:r,nextSub:n}=e;if(r&&(r.nextSub=n,e.prevSub=void 0),n&&(n.prevSub=r,e.nextSub=void 0),s.subs===e&&(s.subs=r,!r&&s.computed)){s.computed.flags&=-5;for(let o=s.computed.deps;o;o=o.nextDep)yr(o,!0)}!t&&!--s.sc&&s.map&&s.map.delete(s.key)}function ri(e){const{prevDep:t,nextDep:s}=e;t&&(t.nextDep=s,e.prevDep=void 0),s&&(s.prevDep=t,e.nextDep=void 0)}let Ne=!0;const Dn=[];function Je(){Dn.push(Ne),Ne=!1}function qe(){const e=Dn.pop();Ne=e===void 0?!0:e}function Lr(e){const{cleanup:t}=e;if(e.cleanup=void 0,t){const s=Z;Z=void 0;try{t()}finally{Z=s}}}let Zt=0;class ni{constructor(t,s){this.sub=t,this.dep=s,this.version=s.version,this.nextDep=this.prevDep=this.nextSub=this.prevSub=this.prevActiveLink=void 0}}class zn{constructor(t){this.computed=t,this.version=0,this.activeLink=void 0,this.subs=void 0,this.map=void 0,this.key=void 0,this.sc=0,this.__v_skip=!0}track(t){if(!Z||!Ne||Z===this.computed)return;let s=this.activeLink;if(s===void 0||s.sub!==Z)s=this.activeLink=new ni(Z,this),Z.deps?(s.prevDep=Z.depsTail,Z.depsTail.nextDep=s,Z.depsTail=s):Z.deps=Z.depsTail=s,Kn(s);else if(s.version===-1&&(s.version=this.version,s.nextDep)){const r=s.nextDep;r.prevDep=s.prevDep,s.prevDep&&(s.prevDep.nextDep=r),s.prevDep=Z.depsTail,s.nextDep=void 0,Z.depsTail.nextDep=s,Z.depsTail=s,Z.deps===s&&(Z.deps=r)}return s}trigger(t){this.version++,Zt++,this.notify(t)}notify(t){br();try{for(let s=this.subs;s;s=s.prevSub)s.sub.notify()&&s.sub.dep.notify()}finally{mr()}}}function Kn(e){if(e.dep.sc++,e.sub.flags&4){const t=e.dep.computed;if(t&&!e.dep.subs){t.flags|=20;for(let r=t.deps;r;r=r.nextDep)Kn(r)}const s=e.dep.subs;s!==e&&(e.prevSub=s,s&&(s.nextSub=e)),e.dep.subs=e}}const Zs=new WeakMap,yt=Symbol(""),Qs=Symbol(""),Qt=Symbol("");function de(e,t,s){if(Ne&&Z){let r=Zs.get(e);r||Zs.set(e,r=new Map);let n=r.get(s);n||(r.set(s,n=new zn),n.map=r,n.key=s),n.track()}}function rt(e,t,s,r,n,o){const i=Zs.get(e);if(!i){Zt++;return}const l=c=>{c&&c.trigger()};if(br(),t==="clear")i.forEach(l);else{const c=P(e),d=c&&dr(s);if(c&&s==="length"){const f=Number(r);i.forEach((h,_)=>{(_==="length"||_===Qt||!Le(_)&&_>=f)&&l(h)})}else switch((s!==void 0||i.has(void 0))&&l(i.get(s)),d&&l(i.get(Qt)),t){case"add":c?d&&l(i.get("length")):(l(i.get(yt)),Et(e)&&l(i.get(Qs)));break;case"delete":c||(l(i.get(yt)),Et(e)&&l(i.get(Qs)));break;case"set":Et(e)&&l(i.get(yt));break}}mr()}function Ct(e){const t=G(e);return t===e?t:(de(t,"iterate",Qt),Fe(e)?t:t.map(nt))}function Os(e){return de(e=G(e),"iterate",Qt),e}function We(e,t){return dt(e)?Pt(vt(e)?nt(t):t):nt(t)}const oi={__proto__:null,[Symbol.iterator](){return zs(this,Symbol.iterator,e=>We(this,e))},concat(...e){return Ct(this).concat(...e.map(t=>P(t)?Ct(t):t))},entries(){return zs(this,"entries",e=>(e[1]=We(this,e[1]),e))},every(e,t){return Ze(this,"every",e,t,void 0,arguments)},filter(e,t){return Ze(this,"filter",e,t,s=>s.map(r=>We(this,r)),arguments)},find(e,t){return Ze(this,"find",e,t,s=>We(this,s),arguments)},findIndex(e,t){return Ze(this,"findIndex",e,t,void 0,arguments)},findLast(e,t){return Ze(this,"findLast",e,t,s=>We(this,s),arguments)},findLastIndex(e,t){return Ze(this,"findLastIndex",e,t,void 0,arguments)},forEach(e,t){return Ze(this,"forEach",e,t,void 0,arguments)},includes(...e){return Ks(this,"includes",e)},indexOf(...e){return Ks(this,"indexOf",e)},join(e){return Ct(this).join(e)},lastIndexOf(...e){return Ks(this,"lastIndexOf",e)},map(e,t){return Ze(this,"map",e,t,void 0,arguments)},pop(){return Dt(this,"pop")},push(...e){return Dt(this,"push",e)},reduce(e,...t){return jr(this,"reduce",e,t)},reduceRight(e,...t){return jr(this,"reduceRight",e,t)},shift(){return Dt(this,"shift")},some(e,t){return Ze(this,"some",e,t,void 0,arguments)},splice(...e){return Dt(this,"splice",e)},toReversed(){return Ct(this).toReversed()},toSorted(e){return Ct(this).toSorted(e)},toSpliced(...e){return Ct(this).toSpliced(...e)},unshift(...e){return Dt(this,"unshift",e)},values(){return zs(this,"values",e=>We(this,e))}};function zs(e,t,s){const r=Os(e),n=r[t]();return r!==e&&!Fe(e)&&(n._next=n.next,n.next=()=>{const o=n._next();return o.done||(o.value=s(o.value)),o}),n}const ii=Array.prototype;function Ze(e,t,s,r,n,o){const i=Os(e),l=i!==e&&!Fe(e),c=i[t];if(c!==ii[t]){const h=c.apply(e,o);return l?nt(h):h}let d=s;i!==e&&(l?d=function(h,_){return s.call(this,We(e,h),_,e)}:s.length>2&&(d=function(h,_){return s.call(this,h,_,e)}));const f=c.call(i,d,r);return l&&n?n(f):f}function jr(e,t,s,r){const n=Os(e),o=n!==e&&!Fe(e);let i=s,l=!1;n!==e&&(o?(l=r.length===0,i=function(d,f,h){return l&&(l=!1,d=We(e,d)),s.call(this,d,We(e,f),h,e)}):s.length>3&&(i=function(d,f,h){return s.call(this,d,f,h,e)}));const c=n[t](i,...r);return l?We(e,c):c}function Ks(e,t,s){const r=G(e);de(r,"iterate",Qt);const n=r[t](...s);return(n===-1||n===!1)&&wr(s[0])?(s[0]=G(s[0]),r[t](...s)):n}function Dt(e,t,s=[]){Je(),br();const r=G(e)[t].apply(e,s);return mr(),qe(),r}const li=ur("__proto__,__v_isRef,__isVue"),Hn=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Le));function ci(e){Le(e)||(e=String(e));const t=G(this);return de(t,"has",e),t.hasOwnProperty(e)}class Vn{constructor(t=!1,s=!1){this._isReadonly=t,this._isShallow=s}get(t,s,r){if(s==="__v_skip")return t.__v_skip;const n=this._isReadonly,o=this._isShallow;if(s==="__v_isReactive")return!n;if(s==="__v_isReadonly")return n;if(s==="__v_isShallow")return o;if(s==="__v_raw")return r===(n?o?yi:Gn:o?Un:Wn).get(t)||Object.getPrototypeOf(t)===Object.getPrototypeOf(r)?t:void 0;const i=P(t);if(!n){let c;if(i&&(c=oi[s]))return c;if(s==="hasOwnProperty")return ci}const l=Reflect.get(t,s,_e(t)?t:r);if((Le(s)?Hn.has(s):li(s))||(n||de(t,"get",s),o))return l;if(_e(l)){const c=i&&dr(s)?l:l.value;return n&&J(c)?tr(c):c}return J(l)?n?tr(l):xr(l):l}}class Bn extends Vn{constructor(t=!1){super(!1,t)}set(t,s,r,n){let o=t[s];const i=P(t)&&dr(s);if(!this._isShallow){const d=dt(o);if(!Fe(r)&&!dt(r)&&(o=G(o),r=G(r)),!i&&_e(o)&&!_e(r))return d||(o.value=r),!0}const l=i?Number(s)<t.length:B(t,s),c=Reflect.set(t,s,r,_e(t)?t:n);return t===G(n)&&c&&(l?st(r,o)&&rt(t,"set",s,r):rt(t,"add",s,r)),c}deleteProperty(t,s){const r=B(t,s);t[s];const n=Reflect.deleteProperty(t,s);return n&&r&&rt(t,"delete",s,void 0),n}has(t,s){const r=Reflect.has(t,s);return(!Le(s)||!Hn.has(s))&&de(t,"has",s),r}ownKeys(t){return de(t,"iterate",P(t)?"length":yt),Reflect.ownKeys(t)}}class ai extends Vn{constructor(t=!1){super(!0,t)}set(t,s){return!0}deleteProperty(t,s){return!0}}const ui=new Bn,fi=new ai,di=new Bn(!0);const er=e=>e,as=e=>Reflect.getPrototypeOf(e);function pi(e,t,s){return function(...r){const n=this.__v_raw,o=G(n),i=Et(o),l=e==="entries"||e===Symbol.iterator&&i,c=e==="keys"&&i,d=n[e](...r),f=s?er:t?Pt:nt;return!t&&de(o,"iterate",c?Qs:yt),fe(Object.create(d),{next(){const{value:h,done:_}=d.next();return _?{value:h,done:_}:{value:l?[f(h[0]),f(h[1])]:f(h),done:_}}})}}function us(e){return function(...t){return e==="delete"?!1:e==="clear"?void 0:this}}function hi(e,t){const s={get(n){const o=this.__v_raw,i=G(o),l=G(n);e||(st(n,l)&&de(i,"get",n),de(i,"get",l));const{has:c}=as(i),d=t?er:e?Pt:nt;if(c.call(i,n))return d(o.get(n));if(c.call(i,l))return d(o.get(l));o!==i&&o.get(n)},get size(){const n=this.__v_raw;return!e&&de(G(n),"iterate",yt),n.size},has(n){const o=this.__v_raw,i=G(o),l=G(n);return e||(st(n,l)&&de(i,"has",n),de(i,"has",l)),n===l?o.has(n):o.has(n)||o.has(l)},forEach(n,o){const i=this,l=i.__v_raw,c=G(l),d=t?er:e?Pt:nt;return!e&&de(c,"iterate",yt),l.forEach((f,h)=>n.call(o,d(f),d(h),i))}};return fe(s,e?{add:us("add"),set:us("set"),delete:us("delete"),clear:us("clear")}:{add(n){const o=G(this),i=as(o),l=G(n),c=!t&&!Fe(n)&&!dt(n)?l:n;return i.has.call(o,c)||st(n,c)&&i.has.call(o,n)||st(l,c)&&i.has.call(o,l)||(o.add(c),rt(o,"add",c,c)),this},set(n,o){!t&&!Fe(o)&&!dt(o)&&(o=G(o));const i=G(this),{has:l,get:c}=as(i);let d=l.call(i,n);d||(n=G(n),d=l.call(i,n));const f=c.call(i,n);return i.set(n,o),d?st(o,f)&&rt(i,"set",n,o):rt(i,"add",n,o),this},delete(n){const o=G(this),{has:i,get:l}=as(o);let c=i.call(o,n);c||(n=G(n),c=i.call(o,n)),l&&l.call(o,n);const d=o.delete(n);return c&&rt(o,"delete",n,void 0),d},clear(){const n=G(this),o=n.size!==0,i=n.clear();return o&&rt(n,"clear",void 0,void 0),i}}),["keys","values","entries",Symbol.iterator].forEach(n=>{s[n]=pi(n,e,t)}),s}function vr(e,t){const s=hi(e,t);return(r,n,o)=>n==="__v_isReactive"?!e:n==="__v_isReadonly"?e:n==="__v_raw"?r:Reflect.get(B(s,n)&&n in r?s:r,n,o)}const gi={get:vr(!1,!1)},bi={get:vr(!1,!0)},mi={get:vr(!0,!1)};const Wn=new WeakMap,Un=new WeakMap,Gn=new WeakMap,yi=new WeakMap;function vi(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function xr(e){return dt(e)?e:_r(e,!1,ui,gi,Wn)}function xi(e){return _r(e,!1,di,bi,Un)}function tr(e){return _r(e,!0,fi,mi,Gn)}function _r(e,t,s,r,n){if(!J(e)||e.__v_raw&&!(t&&e.__v_isReactive)||e.__v_skip||!Object.isExtensible(e))return e;const o=n.get(e);if(o)return o;const i=vi(Bo(e));if(i===0)return e;const l=new Proxy(e,i===2?r:s);return n.set(e,l),l}function vt(e){return dt(e)?vt(e.__v_raw):!!(e&&e.__v_isReactive)}function dt(e){return!!(e&&e.__v_isReadonly)}function Fe(e){return!!(e&&e.__v_isShallow)}function wr(e){return e?!!e.__v_raw:!1}function G(e){const t=e&&e.__v_raw;return t?G(t):e}function _i(e){return!B(e,"__v_skip")&&Object.isExtensible(e)&&Rn(e,"__v_skip",!0),e}const nt=e=>J(e)?xr(e):e,Pt=e=>J(e)?tr(e):e;function _e(e){return e?e.__v_isRef===!0:!1}function k(e){return _e(e)?e.value:e}const wi={get:(e,t,s)=>t==="__v_raw"?e:k(Reflect.get(e,t,s)),set:(e,t,s,r)=>{const n=e[t];return _e(n)&&!_e(s)?(n.value=s,!0):Reflect.set(e,t,s,r)}};function Jn(e){return vt(e)?e:new Proxy(e,wi)}class Ci{constructor(t,s,r){this.fn=t,this.setter=s,this._value=void 0,this.dep=new zn(this),this.__v_isRef=!0,this.deps=void 0,this.depsTail=void 0,this.flags=16,this.globalVersion=Zt-1,this.next=void 0,this.effect=this,this.__v_isReadonly=!s,this.isSSR=r}notify(){if(this.flags|=16,!(this.flags&8)&&Z!==this)return Nn(this,!0),!0}get value(){const t=this.dep.track();return jn(this),t&&(t.version=this.dep.version),this._value}set value(t){this.setter&&this.setter(t)}}function Si(e,t,s=!1){let r,n;return F(e)?r=e:(r=e.get,n=e.set),new Ci(r,n,s)}const fs={},ys=new WeakMap;let mt;function Ti(e,t=!1,s=mt){if(s){let r=ys.get(s);r||ys.set(s,r=[]),r.push(e)}}function Ai(e,t,s=Q){const{immediate:r,deep:n,once:o,scheduler:i,augmentJob:l,call:c}=s,d=E=>n?E:Fe(E)||n===!1||n===0?ft(E,1):ft(E);let f,h,_,S,z=!1,T=!1;if(_e(e)?(h=()=>e.value,z=Fe(e)):vt(e)?(h=()=>d(e),z=!0):P(e)?(T=!0,z=e.some(E=>vt(E)||Fe(E)),h=()=>e.map(E=>{if(_e(E))return E.value;if(vt(E))return d(E);if(F(E))return c?c(E,2):E()})):F(e)?t?h=c?()=>c(e,2):e:h=()=>{if(_){Je();try{_()}finally{qe()}}const E=mt;mt=f;try{return c?c(e,3,[S]):e(S)}finally{mt=E}}:h=Ge,t&&n){const E=h,te=n===!0?1/0:n;h=()=>ft(E(),te)}const I=si(),L=()=>{f.stop(),I&&I.active&&fr(I.effects,f)};if(o&&t){const E=t;t=(...te)=>{const Ae=E(...te);return L(),Ae}}let M=T?new Array(e.length).fill(fs):fs;const H=E=>{if(!(!(f.flags&1)||!f.dirty&&!E))if(t){const te=f.run();if(E||n||z||(T?te.some((Ae,Ee)=>st(Ae,M[Ee])):st(te,M))){_&&_();const Ae=mt;mt=f;try{const Ee=[te,M===fs?void 0:T&&M[0]===fs?[]:M,S];M=te,c?c(t,3,Ee):t(...Ee)}finally{mt=Ae}}}else f.run()};return l&&l(H),f=new In(h),f.scheduler=i?()=>i(H,!1):H,S=E=>Ti(E,!1,f),_=f.onStop=()=>{const E=ys.get(f);if(E){if(c)c(E,4);else for(const te of E)te();ys.delete(f)}},t?r?H(!0):M=f.run():i?i(H.bind(null,!0),!0):f.run(),L.pause=f.pause.bind(f),L.resume=f.resume.bind(f),L.stop=L,L}function ft(e,t=1/0,s){if(t<=0||!J(e)||e.__v_skip||(s=s||new Map,(s.get(e)||0)>=t))return e;if(s.set(e,t),t--,_e(e))ft(e.value,t,s);else if(P(e))for(let r=0;r<e.length;r++)ft(e[r],t,s);else if(Tn(e)||Et(e))e.forEach(r=>{ft(r,t,s)});else if($n(e)){for(const r in e)ft(e[r],t,s);for(const r of Object.getOwnPropertySymbols(e))Object.prototype.propertyIsEnumerable.call(e,r)&&ft(e[r],t,s)}return e}/**
-* @vue/runtime-core v3.5.39
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/function ns(e,t,s,r){try{return r?e(...r):e()}catch(n){Ms(n,t,s)}}function je(e,t,s,r){if(F(e)){const n=ns(e,t,s,r);return n&&An(n)&&n.catch(o=>{Ms(o,t,s)}),n}if(P(e)){const n=[];for(let o=0;o<e.length;o++)n.push(je(e[o],t,s,r));return n}}function Ms(e,t,s,r=!0){const n=t?t.vnode:null,{errorHandler:o,throwUnhandledErrorInProduction:i}=t&&t.appContext.config||Q;if(t){let l=t.parent;const c=t.proxy,d=`https://vuejs.org/error-reference/#runtime-${s}`;for(;l;){const f=l.ec;if(f){for(let h=0;h<f.length;h++)if(f[h](e,c,d)===!1)return}l=l.parent}if(o){Je(),ns(o,null,10,[e,c,d]),qe();return}}Ei(e,s,n,r,i)}function Ei(e,t,s,r=!0,n=!1){if(n)throw e;console.error(e)}const ye=[];let Be=-1;const $t=[];let ut=null,Tt=0;const qn=Promise.resolve();let vs=null;function $i(e){const t=vs||qn;return e?t.then(this?e.bind(this):e):t}function Ri(e){let t=Be+1,s=ye.length;for(;t<s;){const r=t+s>>>1,n=ye[r],o=es(n);o<e||o===e&&n.flags&2?t=r+1:s=r}return t}function Cr(e){if(!(e.flags&1)){const t=es(e),s=ye[ye.length-1];!s||!(e.flags&2)&&t>=es(s)?ye.push(e):ye.splice(Ri(t),0,e),e.flags|=1,Yn()}}function Yn(){vs||(vs=qn.then(Zn))}function Oi(e){P(e)?$t.push(...e):ut&&e.id===-1?ut.splice(Tt+1,0,e):e.flags&1||($t.push(e),e.flags|=1),Yn()}function Dr(e,t,s=Be+1){for(;s<ye.length;s++){const r=ye[s];if(r&&r.flags&2){if(e&&r.id!==e.uid)continue;ye.splice(s,1),s--,r.flags&4&&(r.flags&=-2),r(),r.flags&4||(r.flags&=-2)}}}function Xn(e){if($t.length){const t=[...new Set($t)].sort((s,r)=>es(s)-es(r));if($t.length=0,ut){ut.push(...t);return}for(ut=t,Tt=0;Tt<ut.length;Tt++){const s=ut[Tt];s.flags&4&&(s.flags&=-2),s.flags&8||s(),s.flags&=-2}ut=null,Tt=0}}const es=e=>e.id==null?e.flags&2?-1:1/0:e.id;function Zn(e){try{for(Be=0;Be<ye.length;Be++){const t=ye[Be];t&&!(t.flags&8)&&(t.flags&4&&(t.flags&=-2),ns(t,t.i,t.i?15:14),t.flags&4||(t.flags&=-2))}}finally{for(;Be<ye.length;Be++){const t=ye[Be];t&&(t.flags&=-2)}Be=-1,ye.length=0,Xn(),vs=null,(ye.length||$t.length)&&Zn()}}let ve=null,Qn=null;function xs(e){const t=ve;return ve=e,Qn=e&&e.type.__scopeId||null,t}function N(e,t=ve,s){if(!t||e._n)return e;const r=(...n)=>{r._d&&Zr(-1);const o=xs(t);let i;try{i=e(...n)}finally{xs(o),r._d&&Zr(1)}return i};return r._n=!0,r._c=!0,r._d=!0,r}function gt(e,t,s,r){const n=e.dirs,o=t&&t.dirs;for(let i=0;i<n.length;i++){const l=n[i];o&&(l.oldValue=o[i].value);let c=l.dir[r];c&&(Je(),je(c,s,8,[e.el,l,e,t]),qe())}}function Mi(e,t){if(pe){let s=pe.provides;const r=pe.parent&&pe.parent.provides;r===s&&(s=pe.provides=Object.create(r)),s[e]=t}}function bs(e,t,s=!1){const r=Ro();if(r||Ot){let n=Ot?Ot._context.provides:r?r.parent==null||r.ce?r.vnode.appContext&&r.vnode.appContext.provides:r.parent.provides:void 0;if(n&&e in n)return n[e];if(arguments.length>1)return s&&F(t)?t.call(r&&r.proxy):t}}const Pi=Symbol.for("v-scx"),Ii=()=>bs(Pi);function Hs(e,t,s){return eo(e,t,s)}function eo(e,t,s=Q){const{immediate:r,deep:n,flush:o,once:i}=s,l=fe({},s),c=t&&r||!t&&o!=="post";let d;if(ss){if(o==="sync"){const S=Ii();d=S.__watcherHandles||(S.__watcherHandles=[])}else if(!c){const S=()=>{};return S.stop=Ge,S.resume=Ge,S.pause=Ge,S}}const f=pe;l.call=(S,z,T)=>je(S,f,z,T);let h=!1;o==="post"?l.scheduler=S=>{Se(S,f&&f.suspense)}:o!=="sync"&&(h=!0,l.scheduler=(S,z)=>{z?S():Cr(S)}),l.augmentJob=S=>{t&&(S.flags|=4),h&&(S.flags|=2,f&&(S.id=f.uid,S.i=f))};const _=Ai(e,t,l);return ss&&(d?d.push(_):c&&_()),_}function ki(e,t,s){const r=this.proxy,n=se(e)?e.includes(".")?to(r,e):()=>r[e]:e.bind(r,r);let o;F(t)?o=t:(o=t.handler,s=t);const i=os(this),l=eo(n,o.bind(r),s);return i(),l}function to(e,t){const s=t.split(".");return()=>{let r=e;for(let n=0;n<s.length&&r;n++)r=r[s[n]];return r}}const Ni=Symbol("_vte"),Fi=e=>e.__isTeleport,Vs=Symbol("_leaveCb");function Sr(e,t){e.shapeFlag&6&&e.component?(e.transition=t,Sr(e.component.subTree,t)):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function he(e,t){return F(e)?fe({name:e.name},t,{setup:e}):e}function so(e){e.ids=[e.ids[0]+e.ids[2]+++"-",0,0]}function zr(e,t){let s;return!!((s=Object.getOwnPropertyDescriptor(e,t))&&!s.configurable)}const _s=new WeakMap;function qt(e,t,s,r,n=!1){if(P(e)){e.forEach((T,I)=>qt(T,t&&(P(t)?t[I]:t),s,r,n));return}if(Rt(r)&&!n){r.shapeFlag&512&&r.type.__asyncResolved&&r.component.subTree.component&&qt(e,t,s,r.component.subTree);return}const o=r.shapeFlag&4?$r(r.component):r.el,i=n?null:o,{i:l,r:c}=e,d=t&&t.r,f=l.refs===Q?l.refs={}:l.refs,h=l.setupState,_=G(h),S=h===Q?Sn:T=>zr(f,T)?!1:B(_,T),z=(T,I)=>!(I&&zr(f,I));if(d!=null&&d!==c){if(Kr(t),se(d))f[d]=null,S(d)&&(h[d]=null);else if(_e(d)){const T=t;z(d,T.k)&&(d.value=null),T.k&&(f[T.k]=null)}}if(F(c)){Je();try{ns(c,l,12,[i,f])}finally{qe()}}else{const T=se(c),I=_e(c);if(T||I){const L=()=>{if(e.f){const M=T?S(c)?h[c]:f[c]:z()||!e.k?c.value:f[e.k];if(n)P(M)&&fr(M,o);else if(P(M))M.includes(o)||M.push(o);else if(T)f[c]=[o],S(c)&&(h[c]=f[c]);else{const H=[o];z(c,e.k)&&(c.value=H),e.k&&(f[e.k]=H)}}else T?(f[c]=i,S(c)&&(h[c]=i)):I&&(z(c,e.k)&&(c.value=i),e.k&&(f[e.k]=i))};if(i){const M=()=>{L(),_s.delete(e)};M.id=-1,_s.set(e,M),Se(M,s)}else Kr(e),L()}}}function Kr(e){const t=_s.get(e);t&&(t.flags|=8,_s.delete(e))}Rs().requestIdleCallback;Rs().cancelIdleCallback;const Rt=e=>!!e.type.__asyncLoader,ro=e=>e.type.__isKeepAlive;function Li(e,t){no(e,"a",t)}function ji(e,t){no(e,"da",t)}function no(e,t,s=pe){const r=e.__wdc||(e.__wdc=()=>{let n=s;for(;n;){if(n.isDeactivated)return;n=n.parent}return e()});if(Ps(t,r,s),s){let n=s.parent;for(;n&&n.parent;)ro(n.parent.vnode)&&Di(r,t,s,n),n=n.parent}}function Di(e,t,s,r){const n=Ps(t,e,r,!0);oo(()=>{fr(r[t],n)},s)}function Ps(e,t,s=pe,r=!1){if(s){const n=s[e]||(s[e]=[]),o=t.__weh||(t.__weh=(...i)=>{Je();const l=os(s),c=je(t,s,e,i);return l(),qe(),c});return r?n.unshift(o):n.push(o),o}}const ot=e=>(t,s=pe)=>{(!ss||e==="sp")&&Ps(e,(...r)=>t(...r),s)},zi=ot("bm"),Ki=ot("m"),Hi=ot("bu"),Vi=ot("u"),Bi=ot("bum"),oo=ot("um"),Wi=ot("sp"),Ui=ot("rtg"),Gi=ot("rtc");function Ji(e,t=pe){Ps("ec",e,t)}const qi="components",io=Symbol.for("v-ndc");function wt(e){return se(e)?Yi(qi,e,!1)||e:e||io}function Yi(e,t,s=!0,r=!1){const n=ve||pe;if(n){const o=n.type;{const l=Il(o,!1);if(l&&(l===t||l===xe(t)||l===$s(xe(t))))return o}const i=Hr(n[e]||o[e],t)||Hr(n.appContext[e],t);return!i&&r?o:i}}function Hr(e,t){return e&&(e[t]||e[xe(t)]||e[$s(xe(t))])}function Vr(e,t,s,r){let n;const o=s,i=P(e);if(i||se(e)){const l=i&&vt(e);let c=!1,d=!1;l&&(c=!Fe(e),d=dt(e),e=Os(e)),n=new Array(e.length);for(let f=0,h=e.length;f<h;f++)n[f]=t(c?d?Pt(nt(e[f])):nt(e[f]):e[f],f,void 0,o)}else if(typeof e=="number"){n=new Array(e);for(let l=0;l<e;l++)n[l]=t(l+1,l,void 0,o)}else if(J(e))if(e[Symbol.iterator])n=Array.from(e,(l,c)=>t(l,c,void 0,o));else{const l=Object.keys(e);n=new Array(l.length);for(let c=0,d=l.length;c<d;c++){const f=l[c];n[c]=t(e[f],f,c,o)}}else n=[];return n}function we(e,t,s={},r,n){if(ve.ce||ve.parent&&Rt(ve.parent)&&ve.parent.ce){const d=Object.keys(s).length>0;return re(),Me(Te,null,[D("slot",s,r)],d?-2:64)}let o=e[t];o&&o._c&&(o._d=!1),re();const i=o&&lo(o(s)),l=s.key||i&&i.key,c=Me(Te,{key:(l&&!Le(l)?l:`_${t}`)+(!i&&r?"_fb":"")},i||[],i&&e._===1?64:-2);return c.scopeId&&(c.slotScopeIds=[c.scopeId+"-s"]),o&&o._c&&(o._d=!0),c}function lo(e){return e.some(t=>Er(t)?!(t.type===xt||t.type===Te&&!lo(t.children)):!0)?e:null}const sr=e=>e?Oo(e)?$r(e):sr(e.parent):null,Yt=fe(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>sr(e.parent),$root:e=>sr(e.root),$host:e=>e.ce,$emit:e=>e.emit,$options:e=>ao(e),$forceUpdate:e=>e.f||(e.f=()=>{Cr(e.update)}),$nextTick:e=>e.n||(e.n=$i.bind(e.proxy)),$watch:e=>ki.bind(e)}),Bs=(e,t)=>e!==Q&&!e.__isScriptSetup&&B(e,t),Xi={get({_:e},t){if(t==="__v_skip")return!0;const{ctx:s,setupState:r,data:n,props:o,accessCache:i,type:l,appContext:c}=e;if(t[0]!=="$"){const _=i[t];if(_!==void 0)switch(_){case 1:return r[t];case 2:return n[t];case 4:return s[t];case 3:return o[t]}else{if(Bs(r,t))return i[t]=1,r[t];if(n!==Q&&B(n,t))return i[t]=2,n[t];if(B(o,t))return i[t]=3,o[t];if(s!==Q&&B(s,t))return i[t]=4,s[t];rr&&(i[t]=0)}}const d=Yt[t];let f,h;if(d)return t==="$attrs"&&de(e.attrs,"get",""),d(e);if((f=l.__cssModules)&&(f=f[t]))return f;if(s!==Q&&B(s,t))return i[t]=4,s[t];if(h=c.config.globalProperties,B(h,t))return h[t]},set({_:e},t,s){const{data:r,setupState:n,ctx:o}=e;return Bs(n,t)?(n[t]=s,!0):r!==Q&&B(r,t)?(r[t]=s,!0):B(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(o[t]=s,!0)},has({_:{data:e,setupState:t,accessCache:s,ctx:r,appContext:n,props:o,type:i}},l){let c;return!!(s[l]||e!==Q&&l[0]!=="$"&&B(e,l)||Bs(t,l)||B(o,l)||B(r,l)||B(Yt,l)||B(n.config.globalProperties,l)||(c=i.__cssModules)&&c[l])},defineProperty(e,t,s){return s.get!=null?e._.accessCache[t]=0:B(s,"value")&&this.set(e,t,s.value,null),Reflect.defineProperty(e,t,s)}};function Ce(){return Zi().attrs}function Zi(e){const t=Ro();return t.setupContext||(t.setupContext=Po(t))}function Br(e){return P(e)?e.reduce((t,s)=>(t[s]=null,t),{}):e}let rr=!0;function Qi(e){const t=ao(e),s=e.proxy,r=e.ctx;rr=!1,t.beforeCreate&&Wr(t.beforeCreate,e,"bc");const{data:n,computed:o,methods:i,watch:l,provide:c,inject:d,created:f,beforeMount:h,mounted:_,beforeUpdate:S,updated:z,activated:T,deactivated:I,beforeDestroy:L,beforeUnmount:M,destroyed:H,unmounted:E,render:te,renderTracked:Ae,renderTriggered:Ee,errorCaptured:Ie,serverPrefetch:it,expose:ke,inheritAttrs:Xe,components:W,directives:pt,filters:lt}=t;if(d&&el(d,r,null),i)for(const Y in i){const V=i[Y];F(V)&&(r[Y]=V.bind(s))}if(n){const Y=n.call(s,s);J(Y)&&(e.data=xr(Y))}if(rr=!0,o)for(const Y in o){const V=o[Y],$e=F(V)?V.bind(s,s):F(V.get)?V.get.bind(s,s):Ge,ht=!F(V)&&F(V.set)?V.set.bind(s):Ge,ce=A({get:$e,set:ht});Object.defineProperty(r,Y,{enumerable:!0,configurable:!0,get:()=>ce.value,set:De=>ce.value=De})}if(l)for(const Y in l)co(l[Y],r,s,Y);if(c){const Y=F(c)?c.call(s):c;Reflect.ownKeys(Y).forEach(V=>{Mi(V,Y[V])})}f&&Wr(f,e,"c");function ne(Y,V){P(V)?V.forEach($e=>Y($e.bind(s))):V&&Y(V.bind(s))}if(ne(zi,h),ne(Ki,_),ne(Hi,S),ne(Vi,z),ne(Li,T),ne(ji,I),ne(Ji,Ie),ne(Gi,Ae),ne(Ui,Ee),ne(Bi,M),ne(oo,E),ne(Wi,it),P(ke))if(ke.length){const Y=e.exposed||(e.exposed={});ke.forEach(V=>{Object.defineProperty(Y,V,{get:()=>s[V],set:$e=>s[V]=$e,enumerable:!0})})}else e.exposed||(e.exposed={});te&&e.render===Ge&&(e.render=te),Xe!=null&&(e.inheritAttrs=Xe),W&&(e.components=W),pt&&(e.directives=pt),it&&so(e)}function el(e,t,s=Ge){P(e)&&(e=nr(e));for(const r in e){const n=e[r];let o;J(n)?"default"in n?o=bs(n.from||r,n.default,!0):o=bs(n.from||r):o=bs(n),_e(o)?Object.defineProperty(t,r,{enumerable:!0,configurable:!0,get:()=>o.value,set:i=>o.value=i}):t[r]=o}}function Wr(e,t,s){je(P(e)?e.map(r=>r.bind(t.proxy)):e.bind(t.proxy),t,s)}function co(e,t,s,r){let n=r.includes(".")?to(s,r):()=>s[r];if(se(e)){const o=t[e];F(o)&&Hs(n,o)}else if(F(e))Hs(n,e.bind(s));else if(J(e))if(P(e))e.forEach(o=>co(o,t,s,r));else{const o=F(e.handler)?e.handler.bind(s):t[e.handler];F(o)&&Hs(n,o,e)}}function ao(e){const t=e.type,{mixins:s,extends:r}=t,{mixins:n,optionsCache:o,config:{optionMergeStrategies:i}}=e.appContext,l=o.get(t);let c;return l?c=l:!n.length&&!s&&!r?c=t:(c={},n.length&&n.forEach(d=>ws(c,d,i,!0)),ws(c,t,i)),J(t)&&o.set(t,c),c}function ws(e,t,s,r=!1){const{mixins:n,extends:o}=t;o&&ws(e,o,s,!0),n&&n.forEach(i=>ws(e,i,s,!0));for(const i in t)if(!(r&&i==="expose")){const l=tl[i]||s&&s[i];e[i]=l?l(e[i],t[i]):t[i]}return e}const tl={data:Ur,props:Gr,emits:Gr,methods:Bt,computed:Bt,beforeCreate:me,created:me,beforeMount:me,mounted:me,beforeUpdate:me,updated:me,beforeDestroy:me,beforeUnmount:me,destroyed:me,unmounted:me,activated:me,deactivated:me,errorCaptured:me,serverPrefetch:me,components:Bt,directives:Bt,watch:rl,provide:Ur,inject:sl};function Ur(e,t){return t?e?function(){return fe(F(e)?e.call(this,this):e,F(t)?t.call(this,this):t)}:t:e}function sl(e,t){return Bt(nr(e),nr(t))}function nr(e){if(P(e)){const t={};for(let s=0;s<e.length;s++)t[e[s]]=e[s];return t}return e}function me(e,t){return e?[...new Set([].concat(e,t))]:t}function Bt(e,t){return e?fe(Object.create(null),e,t):t}function Gr(e,t){return e?P(e)&&P(t)?[...new Set([...e,...t])]:fe(Object.create(null),Br(e),Br(t??{})):t}function rl(e,t){if(!e)return t;if(!t)return e;const s=fe(Object.create(null),e);for(const r in t)s[r]=me(e[r],t[r]);return s}function uo(){return{app:null,config:{isNativeTag:Sn,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let nl=0;function ol(e,t){return function(r,n=null){F(r)||(r=fe({},r)),n!=null&&!J(n)&&(n=null);const o=uo(),i=new WeakSet,l=[];let c=!1;const d=o.app={_uid:nl++,_component:r,_props:n,_container:null,_context:o,_instance:null,version:Nl,get config(){return o.config},set config(f){},use(f,...h){return i.has(f)||(f&&F(f.install)?(i.add(f),f.install(d,...h)):F(f)&&(i.add(f),f(d,...h))),d},mixin(f){return o.mixins.includes(f)||o.mixins.push(f),d},component(f,h){return h?(o.components[f]=h,d):o.components[f]},directive(f,h){return h?(o.directives[f]=h,d):o.directives[f]},mount(f,h,_){if(!c){const S=d._ceVNode||D(r,n);return S.appContext=o,_===!0?_="svg":_===!1&&(_=void 0),e(S,f,_),c=!0,d._container=f,f.__vue_app__=d,$r(S.component)}},onUnmount(f){l.push(f)},unmount(){c&&(je(l,d._instance,16),e(null,d._container),delete d._container.__vue_app__)},provide(f,h){return o.provides[f]=h,d},runWithContext(f){const h=Ot;Ot=d;try{return f()}finally{Ot=h}}};return d}}let Ot=null;const il=(e,t)=>t==="modelValue"||t==="model-value"?e.modelModifiers:e[`${t}Modifiers`]||e[`${xe(t)}Modifiers`]||e[`${_t(t)}Modifiers`];function ll(e,t,...s){if(e.isUnmounted)return;const r=e.vnode.props||Q;let n=s;const o=t.startsWith("update:"),i=o&&il(r,t.slice(7));i&&(i.trim&&(n=s.map(f=>se(f)?f.trim():f)),i.number&&(n=s.map(Go)));let l,c=r[l=Fs(t)]||r[l=Fs(xe(t))];!c&&o&&(c=r[l=Fs(_t(t))]),c&&je(c,e,6,n);const d=r[l+"Once"];if(d){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,je(d,e,6,n)}}const cl=new WeakMap;function fo(e,t,s=!1){const r=s?cl:t.emitsCache,n=r.get(e);if(n!==void 0)return n;const o=e.emits;let i={},l=!1;if(!F(e)){const c=d=>{const f=fo(d,t,!0);f&&(l=!0,fe(i,f))};!s&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!o&&!l?(J(e)&&r.set(e,null),null):(P(o)?o.forEach(c=>i[c]=null):fe(i,o),J(e)&&r.set(e,i),i)}function Is(e,t){return!e||!Ts(t)?!1:(t=t.slice(2),t=t==="Once"?t:t.replace(/Once$/,""),B(e,t[0].toLowerCase()+t.slice(1))||B(e,_t(t))||B(e,t))}function Jr(e){const{type:t,vnode:s,proxy:r,withProxy:n,propsOptions:[o],slots:i,attrs:l,emit:c,render:d,renderCache:f,props:h,data:_,setupState:S,ctx:z,inheritAttrs:T}=e,I=xs(e);let L,M;try{if(s.shapeFlag&4){const E=n||r,te=E;L=Ue(d.call(te,E,f,h,S,_,z)),M=l}else{const E=t;L=Ue(E.length>1?E(h,{attrs:l,slots:i,emit:c}):E(h,null)),M=t.props?l:al(l)}}catch(E){Xt.length=0,Ms(E,e,1),L=D(xt)}let H=L;if(M&&T!==!1){const E=Object.keys(M),{shapeFlag:te}=H;E.length&&te&7&&(o&&E.some(As)&&(M=ul(M,o)),H=It(H,M,!1,!0))}return s.dirs&&(H=It(H,null,!1,!0),H.dirs=H.dirs?H.dirs.concat(s.dirs):s.dirs),s.transition&&Sr(H,s.transition),L=H,xs(I),L}const al=e=>{let t;for(const s in e)(s==="class"||s==="style"||Ts(s))&&((t||(t={}))[s]=e[s]);return t},ul=(e,t)=>{const s={};for(const r in e)(!As(r)||!(r.slice(9)in t))&&(s[r]=e[r]);return s};function fl(e,t,s){const{props:r,children:n,component:o}=e,{props:i,children:l,patchFlag:c}=t,d=o.emitsOptions;if(t.dirs||t.transition)return!0;if(s&&c>=0){if(c&1024)return!0;if(c&16)return r?qr(r,i,d):!!i;if(c&8){const f=t.dynamicProps;for(let h=0;h<f.length;h++){const _=f[h];if(po(i,r,_)&&!Is(d,_))return!0}}}else return(n||l)&&(!l||!l.$stable)?!0:r===i?!1:r?i?qr(r,i,d):!0:!!i;return!1}function qr(e,t,s){const r=Object.keys(t);if(r.length!==Object.keys(e).length)return!0;for(let n=0;n<r.length;n++){const o=r[n];if(po(t,e,o)&&!Is(s,o))return!0}return!1}function po(e,t,s){const r=e[s],n=t[s];return s==="style"&&J(r)&&J(n)?!gr(r,n):r!==n}function dl({vnode:e,parent:t,suspense:s},r){for(;t;){const n=t.subTree;if(n.suspense&&n.suspense.activeBranch===e&&(n.suspense.vnode.el=n.el=r,e=n),n===e)(e=t.vnode).el=r,t=t.parent;else break}s&&s.activeBranch===e&&(s.vnode.el=r)}const ho={},go=()=>Object.create(ho),bo=e=>Object.getPrototypeOf(e)===ho;function pl(e,t,s,r=!1){const n={},o=go();e.propsDefaults=Object.create(null),mo(e,t,n,o);for(const i in e.propsOptions[0])i in n||(n[i]=void 0);s?e.props=r?n:xi(n):e.type.props?e.props=n:e.props=o,e.attrs=o}function hl(e,t,s,r){const{props:n,attrs:o,vnode:{patchFlag:i}}=e,l=G(n),[c]=e.propsOptions;let d=!1;if((r||i>0)&&!(i&16)){if(i&8){const f=e.vnode.dynamicProps;for(let h=0;h<f.length;h++){let _=f[h];if(Is(e.emitsOptions,_))continue;const S=t[_];if(c)if(B(o,_))S!==o[_]&&(o[_]=S,d=!0);else{const z=xe(_);n[z]=or(c,l,z,S,e,!1)}else S!==o[_]&&(o[_]=S,d=!0)}}}else{mo(e,t,n,o)&&(d=!0);let f;for(const h in l)(!t||!B(t,h)&&((f=_t(h))===h||!B(t,f)))&&(c?s&&(s[h]!==void 0||s[f]!==void 0)&&(n[h]=or(c,l,h,void 0,e,!0)):delete n[h]);if(o!==l)for(const h in o)(!t||!B(t,h))&&(delete o[h],d=!0)}d&&rt(e.attrs,"set","")}function mo(e,t,s,r){const[n,o]=e.propsOptions;let i=!1,l;if(t)for(let c in t){if(Ut(c))continue;const d=t[c];let f;n&&B(n,f=xe(c))?!o||!o.includes(f)?s[f]=d:(l||(l={}))[f]=d:Is(e.emitsOptions,c)||(!(c in r)||d!==r[c])&&(r[c]=d,i=!0)}if(o){const c=G(s),d=l||Q;for(let f=0;f<o.length;f++){const h=o[f];s[h]=or(n,c,h,d[h],e,!B(d,h))}}return i}function or(e,t,s,r,n,o){const i=e[s];if(i!=null){const l=B(i,"default");if(l&&r===void 0){const c=i.default;if(i.type!==Function&&!i.skipFactory&&F(c)){const{propsDefaults:d}=n;if(s in d)r=d[s];else{const f=os(n);r=d[s]=c.call(null,t),f()}}else r=c;n.ce&&n.ce._setProp(s,r)}i[0]&&(o&&!l?r=!1:i[1]&&(r===""||r===_t(s))&&(r=!0))}return r}const gl=new WeakMap;function yo(e,t,s=!1){const r=s?gl:t.propsCache,n=r.get(e);if(n)return n;const o=e.props,i={},l=[];let c=!1;if(!F(e)){const f=h=>{c=!0;const[_,S]=yo(h,t,!0);fe(i,_),S&&l.push(...S)};!s&&t.mixins.length&&t.mixins.forEach(f),e.extends&&f(e.extends),e.mixins&&e.mixins.forEach(f)}if(!o&&!c)return J(e)&&r.set(e,At),At;if(P(o))for(let f=0;f<o.length;f++){const h=xe(o[f]);Yr(h)&&(i[h]=Q)}else if(o)for(const f in o){const h=xe(f);if(Yr(h)){const _=o[f],S=i[h]=P(_)||F(_)?{type:_}:fe({},_),z=S.type;let T=!1,I=!0;if(P(z))for(let L=0;L<z.length;++L){const M=z[L],H=F(M)&&M.name;if(H==="Boolean"){T=!0;break}else H==="String"&&(I=!1)}else T=F(z)&&z.name==="Boolean";S[0]=T,S[1]=I,(T||B(S,"default"))&&l.push(h)}}const d=[i,l];return J(e)&&r.set(e,d),d}function Yr(e){return e[0]!=="$"&&!Ut(e)}const Tr=e=>e==="_"||e==="_ctx"||e==="$stable",Ar=e=>P(e)?e.map(Ue):[Ue(e)],bl=(e,t,s)=>{if(t._n)return t;const r=N((...n)=>Ar(t(...n)),s);return r._c=!1,r},vo=(e,t,s)=>{const r=e._ctx;for(const n in e){if(Tr(n))continue;const o=e[n];if(F(o))t[n]=bl(n,o,r);else if(o!=null){const i=Ar(o);t[n]=()=>i}}},xo=(e,t)=>{const s=Ar(t);e.slots.default=()=>s},_o=(e,t,s)=>{for(const r in t)(s||!Tr(r))&&(e[r]=t[r])},ml=(e,t,s)=>{const r=e.slots=go();if(e.vnode.shapeFlag&32){const n=t._;n?(_o(r,t,s),s&&Rn(r,"_",n,!0)):vo(t,r)}else t&&xo(e,t)},yl=(e,t,s)=>{const{vnode:r,slots:n}=e;let o=!0,i=Q;if(r.shapeFlag&32){const l=t._;l?s&&l===1?o=!1:_o(n,t,s):(o=!t.$stable,vo(t,n)),i=t}else t&&(xo(e,t),i={default:1});if(o)for(const l in n)!Tr(l)&&i[l]==null&&delete n[l]},Se=Cl;function vl(e){return xl(e)}function xl(e,t){const s=Rs();s.__VUE__=!0;const{insert:r,remove:n,patchProp:o,createElement:i,createText:l,createComment:c,setText:d,setElementText:f,parentNode:h,nextSibling:_,setScopeId:S=Ge,insertStaticContent:z}=e,T=(a,u,p,y=null,m=null,g=null,w=void 0,x=null,v=!!u.dynamicChildren)=>{if(a===u)return;a&&!zt(a,u)&&(y=cs(a),De(a,m,g,!0),a=null),u.patchFlag===-2&&(v=!1,u.dynamicChildren=null);const{type:b,ref:R,shapeFlag:C}=u;switch(b){case ks:I(a,u,p,y);break;case xt:L(a,u,p,y);break;case Us:a==null&&M(u,p,y,w);break;case Te:W(a,u,p,y,m,g,w,x,v);break;default:C&1?te(a,u,p,y,m,g,w,x,v):C&6?pt(a,u,p,y,m,g,w,x,v):(C&64||C&128)&&b.process(a,u,p,y,m,g,w,x,v,Lt)}R!=null&&m?qt(R,a&&a.ref,g,u||a,!u):R==null&&a&&a.ref!=null&&qt(a.ref,null,g,a,!0)},I=(a,u,p,y)=>{if(a==null)r(u.el=l(u.children),p,y);else{const m=u.el=a.el;u.children!==a.children&&d(m,u.children)}},L=(a,u,p,y)=>{a==null?r(u.el=c(u.children||""),p,y):u.el=a.el},M=(a,u,p,y)=>{[a.el,a.anchor]=z(a.children,u,p,y,a.el,a.anchor)},H=({el:a,anchor:u},p,y)=>{let m;for(;a&&a!==u;)m=_(a),r(a,p,y),a=m;r(u,p,y)},E=({el:a,anchor:u})=>{let p;for(;a&&a!==u;)p=_(a),n(a),a=p;n(u)},te=(a,u,p,y,m,g,w,x,v)=>{if(u.type==="svg"?w="svg":u.type==="math"&&(w="mathml"),a==null)Ae(u,p,y,m,g,w,x,v);else{const b=a.el&&a.el._isVueCE?a.el:null;try{b&&b._beginPatch(),it(a,u,m,g,w,x,v)}finally{b&&b._endPatch()}}},Ae=(a,u,p,y,m,g,w,x)=>{let v,b;const{props:R,shapeFlag:C,transition:$,dirs:O}=a;if(v=a.el=i(a.type,g,R&&R.is,R),C&8?f(v,a.children):C&16&&Ie(a.children,v,null,y,m,Ws(a,g),w,x),O&&gt(a,null,y,"created"),Ee(v,a,a.scopeId,w,y),R){for(const q in R)q!=="value"&&!Ut(q)&&o(v,q,null,R[q],g,y);"value"in R&&o(v,"value",null,R.value,g),(b=R.onVnodeBeforeMount)&&Ve(b,y,a)}O&&gt(a,null,y,"beforeMount");const K=_l(m,$);K&&$.beforeEnter(v),r(v,u,p),((b=R&&R.onVnodeMounted)||K||O)&&Se(()=>{try{b&&Ve(b,y,a),K&&$.enter(v),O&&gt(a,null,y,"mounted")}finally{}},m)},Ee=(a,u,p,y,m)=>{if(p&&S(a,p),y)for(let g=0;g<y.length;g++)S(a,y[g]);if(m){let g=m.subTree;if(u===g||To(g.type)&&(g.ssContent===u||g.ssFallback===u)){const w=m.vnode;Ee(a,w,w.scopeId,w.slotScopeIds,m.parent)}}},Ie=(a,u,p,y,m,g,w,x,v=0)=>{for(let b=v;b<a.length;b++){const R=a[b]=x?tt(a[b]):Ue(a[b]);T(null,R,u,p,y,m,g,w,x)}},it=(a,u,p,y,m,g,w)=>{const x=u.el=a.el;let{patchFlag:v,dynamicChildren:b,dirs:R}=u;v|=a.patchFlag&16;const C=a.props||Q,$=u.props||Q;let O;if(p&&bt(p,!1),(O=$.onVnodeBeforeUpdate)&&Ve(O,p,u,a),R&&gt(u,a,p,"beforeUpdate"),p&&bt(p,!0),b&&(!a.dynamicChildren||a.dynamicChildren.length!==b.length)&&(v=0,w=!1,b=null),(C.innerHTML&&$.innerHTML==null||C.textContent&&$.textContent==null)&&f(x,""),b?ke(a.dynamicChildren,b,x,p,y,Ws(u,m),g):w||V(a,u,x,null,p,y,Ws(u,m),g,!1),v>0){if(v&16)Xe(x,C,$,p,m);else if(v&2&&C.class!==$.class&&o(x,"class",null,$.class,m),v&4&&o(x,"style",C.style,$.style,m),v&8){const K=u.dynamicProps;for(let q=0;q<K.length;q++){const U=K[q],oe=C[U],ae=$[U];(ae!==oe||U==="value")&&o(x,U,oe,ae,m,p)}}v&1&&a.children!==u.children&&f(x,u.children)}else!w&&b==null&&Xe(x,C,$,p,m);((O=$.onVnodeUpdated)||R)&&Se(()=>{O&&Ve(O,p,u,a),R&&gt(u,a,p,"updated")},y)},ke=(a,u,p,y,m,g,w)=>{for(let x=0;x<u.length;x++){const v=a[x],b=u[x],R=v.el&&(v.type===Te||!zt(v,b)||v.shapeFlag&198)?h(v.el):p;T(v,b,R,null,y,m,g,w,!0)}},Xe=(a,u,p,y,m)=>{if(u!==p){if(u!==Q)for(const g in u)!Ut(g)&&!(g in p)&&o(a,g,u[g],null,m,y);for(const g in p){if(Ut(g))continue;const w=p[g],x=u[g];w!==x&&g!=="value"&&o(a,g,x,w,m,y)}"value"in p&&o(a,"value",u.value,p.value,m)}},W=(a,u,p,y,m,g,w,x,v)=>{const b=u.el=a?a.el:l(""),R=u.anchor=a?a.anchor:l("");let{patchFlag:C,dynamicChildren:$,slotScopeIds:O}=u;O&&(x=x?x.concat(O):O),a==null?(r(b,p,y),r(R,p,y),Ie(u.children||[],p,R,m,g,w,x,v)):C>0&&C&64&&$&&a.dynamicChildren&&a.dynamicChildren.length===$.length?(ke(a.dynamicChildren,$,p,m,g,w,x),(u.key!=null||m&&u===m.subTree)&&wo(a,u,!0)):V(a,u,p,R,m,g,w,x,v)},pt=(a,u,p,y,m,g,w,x,v)=>{u.slotScopeIds=x,a==null?u.shapeFlag&512?m.ctx.activate(u,p,y,w,v):lt(u,p,y,m,g,w,v):Nt(a,u,v)},lt=(a,u,p,y,m,g,w)=>{const x=a.component=Rl(a,y,m);if(ro(a)&&(x.ctx.renderer=Lt),Ol(x,!1,w),x.asyncDep){if(m&&m.registerDep(x,ne,w),!a.el){const v=x.subTree=D(xt);L(null,v,u,p),a.placeholder=v.el}}else ne(x,a,u,p,m,g,w)},Nt=(a,u,p)=>{const y=u.component=a.component;if(fl(a,u,p))if(y.asyncDep&&!y.asyncResolved){Y(y,u,p);return}else y.next=u,y.update();else u.el=a.el,y.vnode=u},ne=(a,u,p,y,m,g,w)=>{const x=()=>{if(a.isMounted){let{next:C,bu:$,u:O,parent:K,vnode:q}=a;{const Ke=Co(a);if(Ke){C&&(C.el=q.el,Y(a,C,w)),Ke.asyncDep.then(()=>{Se(()=>{a.isUnmounted||b()},m)});return}}let U=C,oe;bt(a,!1),C?(C.el=q.el,Y(a,C,w)):C=q,$&&Ls($),(oe=C.props&&C.props.onVnodeBeforeUpdate)&&Ve(oe,K,C,q),bt(a,!0);const ae=Jr(a),ze=a.subTree;a.subTree=ae,T(ze,ae,h(ze.el),cs(ze),a,m,g),C.el=ae.el,U===null&&dl(a,ae.el),O&&Se(O,m),(oe=C.props&&C.props.onVnodeUpdated)&&Se(()=>Ve(oe,K,C,q),m)}else{let C;const{el:$,props:O}=u,{bm:K,m:q,parent:U,root:oe,type:ae}=a,ze=Rt(u);bt(a,!1),K&&Ls(K),!ze&&(C=O&&O.onVnodeBeforeMount)&&Ve(C,U,u),bt(a,!0);{oe.ce&&oe.ce._hasShadowRoot()&&oe.ce._injectChildStyle(ae,a.parent?a.parent.type:void 0);const Ke=a.subTree=Jr(a);T(null,Ke,p,y,a,m,g),u.el=Ke.el}if(q&&Se(q,m),!ze&&(C=O&&O.onVnodeMounted)){const Ke=u;Se(()=>Ve(C,U,Ke),m)}(u.shapeFlag&256||U&&Rt(U.vnode)&&U.vnode.shapeFlag&256)&&a.a&&Se(a.a,m),a.isMounted=!0,u=p=y=null}};a.scope.on();const v=a.effect=new In(x);a.scope.off();const b=a.update=v.run.bind(v),R=a.job=v.runIfDirty.bind(v);R.i=a,R.id=a.uid,v.scheduler=()=>Cr(R),bt(a,!0),b()},Y=(a,u,p)=>{u.component=a;const y=a.vnode.props;a.vnode=u,a.next=null,hl(a,u.props,y,p),yl(a,u.children,p),Je(),Dr(a),qe()},V=(a,u,p,y,m,g,w,x,v=!1)=>{const b=a&&a.children,R=a?a.shapeFlag:0,C=u.children,{patchFlag:$,shapeFlag:O}=u;if($>0){if($&128){ht(b,C,p,y,m,g,w,x,v);return}else if($&256){$e(b,C,p,y,m,g,w,x,v);return}}O&8?(R&16&&Ft(b,m,g),C!==b&&f(p,C)):R&16?O&16?ht(b,C,p,y,m,g,w,x,v):Ft(b,m,g,!0):(R&8&&f(p,""),O&16&&Ie(C,p,y,m,g,w,x,v))},$e=(a,u,p,y,m,g,w,x,v)=>{a=a||At,u=u||At;const b=a.length,R=u.length,C=Math.min(b,R);let $;for($=0;$<C;$++){const O=u[$]=v?tt(u[$]):Ue(u[$]);T(a[$],O,p,null,m,g,w,x,v)}b>R?Ft(a,m,g,!0,!1,C):Ie(u,p,y,m,g,w,x,v,C)},ht=(a,u,p,y,m,g,w,x,v)=>{let b=0;const R=u.length;let C=a.length-1,$=R-1;for(;b<=C&&b<=$;){const O=a[b],K=u[b]=v?tt(u[b]):Ue(u[b]);if(zt(O,K))T(O,K,p,null,m,g,w,x,v);else break;b++}for(;b<=C&&b<=$;){const O=a[C],K=u[$]=v?tt(u[$]):Ue(u[$]);if(zt(O,K))T(O,K,p,null,m,g,w,x,v);else break;C--,$--}if(b>C){if(b<=$){const O=$+1,K=O<R?u[O].el:y;for(;b<=$;)T(null,u[b]=v?tt(u[b]):Ue(u[b]),p,K,m,g,w,x,v),b++}}else if(b>$)for(;b<=C;)De(a[b],m,g,!0),b++;else{const O=b,K=b,q=new Map;for(b=K;b<=$;b++){const Re=u[b]=v?tt(u[b]):Ue(u[b]);Re.key!=null&&q.set(Re.key,b)}let U,oe=0;const ae=$-K+1;let ze=!1,Ke=0;const jt=new Array(ae);for(b=0;b<ae;b++)jt[b]=0;for(b=O;b<=C;b++){const Re=a[b];if(oe>=ae){De(Re,m,g,!0);continue}let He;if(Re.key!=null)He=q.get(Re.key);else for(U=K;U<=$;U++)if(jt[U-K]===0&&zt(Re,u[U])){He=U;break}He===void 0?De(Re,m,g,!0):(jt[He-K]=b+1,He>=Ke?Ke=He:ze=!0,T(Re,u[He],p,null,m,g,w,x,v),oe++)}const Pr=ze?wl(jt):At;for(U=Pr.length-1,b=ae-1;b>=0;b--){const Re=K+b,He=u[Re],Ir=u[Re+1],kr=Re+1<R?Ir.el||So(Ir):y;jt[b]===0?T(null,He,p,kr,m,g,w,x,v):ze&&(U<0||b!==Pr[U]?ce(He,p,kr,2):U--)}}},ce=(a,u,p,y,m=null)=>{const{el:g,type:w,transition:x,children:v,shapeFlag:b}=a;if(b&6){ce(a.component.subTree,u,p,y);return}if(b&128){a.suspense.move(u,p,y);return}if(b&64){w.move(a,u,p,Lt);return}if(w===Te){r(g,u,p);for(let C=0;C<v.length;C++)ce(v[C],u,p,y);r(a.anchor,u,p);return}if(w===Us){H(a,u,p);return}if(y!==2&&b&1&&x)if(y===0)x.persisted&&!g[Vs]?r(g,u,p):(x.beforeEnter(g),r(g,u,p),Se(()=>x.enter(g),m));else{const{leave:C,delayLeave:$,afterLeave:O}=x,K=()=>{a.ctx.isUnmounted?n(g):r(g,u,p)},q=()=>{const U=g._isLeaving||!!g[Vs];g._isLeaving&&g[Vs](!0),x.persisted&&!U?K():C(g,()=>{K(),O&&O()})};$?$(g,K,q):q()}else r(g,u,p)},De=(a,u,p,y=!1,m=!1)=>{const{type:g,props:w,ref:x,children:v,dynamicChildren:b,shapeFlag:R,patchFlag:C,dirs:$,cacheIndex:O,memo:K}=a;if(C===-2&&(m=!1),x!=null&&(Je(),qt(x,null,p,a,!0),qe()),O!=null&&(u.renderCache[O]=void 0),R&256){u.ctx.deactivate(a);return}const q=R&1&&$,U=!Rt(a);let oe;if(U&&(oe=w&&w.onVnodeBeforeUnmount)&&Ve(oe,u,a),R&6)Ho(a.component,p,y);else{if(R&128){a.suspense.unmount(p,y);return}q&&gt(a,null,u,"beforeUnmount"),R&64?a.type.remove(a,u,p,Lt,y):b&&!b.hasOnce&&(g!==Te||C>0&&C&64)?Ft(b,u,p,!1,!0):(g===Te&&C&384||!m&&R&16)&&Ft(v,u,p),y&&Or(a)}const ae=K!=null&&O==null;(U&&(oe=w&&w.onVnodeUnmounted)||q||ae)&&Se(()=>{oe&&Ve(oe,u,a),q&&gt(a,null,u,"unmounted"),ae&&(a.el=null)},p)},Or=a=>{const{type:u,el:p,anchor:y,transition:m}=a;if(u===Te){Ko(p,y);return}if(u===Us){E(a);return}const g=()=>{n(p),m&&!m.persisted&&m.afterLeave&&m.afterLeave()};if(a.shapeFlag&1&&m&&!m.persisted){const{leave:w,delayLeave:x}=m,v=()=>w(p,g);x?x(a.el,g,v):v()}else g()},Ko=(a,u)=>{let p;for(;a!==u;)p=_(a),n(a),a=p;n(u)},Ho=(a,u,p)=>{const{bum:y,scope:m,job:g,subTree:w,um:x,m:v,a:b}=a;Xr(v),Xr(b),y&&Ls(y),m.stop(),g&&(g.flags|=8,De(w,a,u,p)),x&&Se(x,u),Se(()=>{a.isUnmounted=!0},u)},Ft=(a,u,p,y=!1,m=!1,g=0)=>{for(let w=g;w<a.length;w++)De(a[w],u,p,y,m)},cs=a=>{if(a.shapeFlag&6)return cs(a.component.subTree);if(a.shapeFlag&128)return a.suspense.next();const u=_(a.anchor||a.el),p=u&&u[Ni];return p?_(p):u};let Ns=!1;const Mr=(a,u,p)=>{let y;a==null?u._vnode&&(De(u._vnode,null,null,!0),y=u._vnode.component):T(u._vnode||null,a,u,null,null,null,p),u._vnode=a,Ns||(Ns=!0,Dr(y),Xn(),Ns=!1)},Lt={p:T,um:De,m:ce,r:Or,mt:lt,mc:Ie,pc:V,pbc:ke,n:cs,o:e};return{render:Mr,hydrate:void 0,createApp:ol(Mr)}}function Ws({type:e,props:t},s){return s==="svg"&&e==="foreignObject"||s==="mathml"&&e==="annotation-xml"&&t&&t.encoding&&t.encoding.includes("html")?void 0:s}function bt({effect:e,job:t},s){s?(e.flags|=32,t.flags|=4):(e.flags&=-33,t.flags&=-5)}function _l(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function wo(e,t,s=!1){const r=e.children,n=t.children;if(P(r)&&P(n))for(let o=0;o<r.length;o++){const i=r[o];let l=n[o];l.shapeFlag&1&&!l.dynamicChildren&&((l.patchFlag<=0||l.patchFlag===32)&&(l=n[o]=tt(n[o]),l.el=i.el),!s&&l.patchFlag!==-2&&wo(i,l)),l.type===ks&&(l.patchFlag===-1&&(l=n[o]=tt(l)),l.el=i.el),l.type===xt&&!l.el&&(l.el=i.el)}}function wl(e){const t=e.slice(),s=[0];let r,n,o,i,l;const c=e.length;for(r=0;r<c;r++){const d=e[r];if(d!==0){if(n=s[s.length-1],e[n]<d){t[r]=n,s.push(r);continue}for(o=0,i=s.length-1;o<i;)l=o+i>>1,e[s[l]]<d?o=l+1:i=l;d<e[s[o]]&&(o>0&&(t[r]=s[o-1]),s[o]=r)}}for(o=s.length,i=s[o-1];o-- >0;)s[o]=i,i=t[i];return s}function Co(e){const t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:Co(t)}function Xr(e){if(e)for(let t=0;t<e.length;t++)e[t].flags|=8}function So(e){if(e.placeholder)return e.placeholder;const t=e.component;return t?So(t.subTree):null}const To=e=>e.__isSuspense;function Cl(e,t){t&&t.pendingBranch?P(e)?t.effects.push(...e):t.effects.push(e):Oi(e)}const Te=Symbol.for("v-fgt"),ks=Symbol.for("v-txt"),xt=Symbol.for("v-cmt"),Us=Symbol.for("v-stc"),Xt=[];let Oe=null;function re(e=!1){Xt.push(Oe=e?null:[])}function Sl(){Xt.pop(),Oe=Xt[Xt.length-1]||null}let ts=1;function Zr(e,t=!1){ts+=e,e<0&&Oe&&t&&(Oe.hasOnce=!0)}function Ao(e){return e.dynamicChildren=ts>0?Oe||At:null,Sl(),ts>0&&Oe&&Oe.push(e),e}function Ye(e,t,s,r,n,o){return Ao($o(e,t,s,r,n,o,!0))}function Me(e,t,s,r,n){return Ao(D(e,t,s,r,n,!0))}function Er(e){return e?e.__v_isVNode===!0:!1}function zt(e,t){return e.type===t.type&&e.key===t.key}const Eo=({key:e})=>e??null,ms=({ref:e,ref_key:t,ref_for:s})=>(typeof e=="number"&&(e=""+e),e!=null?se(e)||_e(e)||F(e)?{i:ve,r:e,k:t,f:!!s}:e:null);function $o(e,t=null,s=null,r=0,n=null,o=e===Te?0:1,i=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Eo(t),ref:t&&ms(t),scopeId:Qn,slotScopeIds:null,children:s,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetStart:null,targetAnchor:null,staticCount:0,shapeFlag:o,patchFlag:r,dynamicProps:n,dynamicChildren:null,appContext:null,ctx:ve};return l?(Cs(c,s),o&128&&e.normalize(c)):s&&(c.shapeFlag|=se(s)?8:16),ts>0&&!i&&Oe&&(c.patchFlag>0||o&6)&&c.patchFlag!==32&&Oe.push(c),c}const D=Tl;function Tl(e,t=null,s=null,r=0,n=null,o=!1){if((!e||e===io)&&(e=xt),Er(e)){const l=It(e,t,!0);return s&&Cs(l,s),ts>0&&!o&&Oe&&(l.shapeFlag&6?Oe[Oe.indexOf(e)]=l:Oe.push(l)),l.patchFlag=-2,l}if(kl(e)&&(e=e.__vccOpts),t){t=Al(t);let{class:l,style:c}=t;l&&!se(l)&&(t.class=hr(l)),J(c)&&(wr(c)&&!P(c)&&(c=fe({},c)),t.style=pr(c))}const i=se(e)?1:To(e)?128:Fi(e)?64:J(e)?4:F(e)?2:0;return $o(e,t,s,r,n,i,o,!0)}function Al(e){return e?wr(e)||bo(e)?fe({},e):e:null}function It(e,t,s=!1,r=!1){const{props:n,ref:o,patchFlag:i,children:l,transition:c}=e,d=t?ge(n||{},t):n,f={__v_isVNode:!0,__v_skip:!0,type:e.type,props:d,key:d&&Eo(d),ref:t&&t.ref?s&&o?P(o)?o.concat(ms(t)):[o,ms(t)]:ms(t):o,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:l,target:e.target,targetStart:e.targetStart,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==Te?i===-1?16:i|16:i,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:c,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&It(e.ssContent),ssFallback:e.ssFallback&&It(e.ssFallback),placeholder:e.placeholder,el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce};return c&&r&&Sr(f,c.clone(f)),f}function le(e=" ",t=0){return D(ks,null,e,t)}function Ue(e){return e==null||typeof e=="boolean"?D(xt):P(e)?D(Te,null,e.slice()):Er(e)?tt(e):D(ks,null,String(e))}function tt(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:It(e)}function Cs(e,t){let s=0;const{shapeFlag:r}=e;if(t==null)t=null;else if(P(t))s=16;else if(typeof t=="object")if(r&65){const n=t.default;n&&(n._c&&(n._d=!1),Cs(e,n()),n._c&&(n._d=!0));return}else{s=32;const n=t._;!n&&!bo(t)?t._ctx=ve:n===3&&ve&&(ve.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else if(F(t)){if(r&65){Cs(e,{default:t});return}t={default:t,_ctx:ve},s=32}else t=String(t),r&64?(s=16,t=[le(t)]):s=8;e.children=t,e.shapeFlag|=s}function ge(...e){const t={};for(let s=0;s<e.length;s++){const r=e[s];for(const n in r)if(n==="class")t.class!==r.class&&(t.class=hr([t.class,r.class]));else if(n==="style")t.style=pr([t.style,r.style]);else if(Ts(n)){const o=t[n],i=r[n];i&&o!==i&&!(P(o)&&o.includes(i))?t[n]=o?[].concat(o,i):i:i==null&&o==null&&!As(n)&&(t[n]=i)}else n!==""&&(t[n]=r[n])}return t}function Ve(e,t,s,r=null){je(e,t,7,[s,r])}const El=uo();let $l=0;function Rl(e,t,s){const r=e.type,n=(t?t.appContext:e.appContext)||El,o={uid:$l++,vnode:e,type:r,parent:t,appContext:n,root:null,next:null,subTree:null,effect:null,update:null,job:null,scope:new ti(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(n.provides),ids:t?t.ids:["",0,0],accessCache:null,renderCache:[],components:null,directives:null,propsOptions:yo(r,n),emitsOptions:fo(r,n),emit:null,emitted:null,propsDefaults:Q,inheritAttrs:r.inheritAttrs,ctx:Q,data:Q,props:Q,attrs:Q,slots:Q,refs:Q,setupState:Q,setupContext:null,suspense:s,suspenseId:s?s.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return o.ctx={_:o},o.root=t?t.root:o,o.emit=ll.bind(null,o),e.ce&&e.ce(o),o}let pe=null;const Ro=()=>pe||ve;let Ss,ir;{const e=Rs(),t=(s,r)=>{let n;return(n=e[s])||(n=e[s]=[]),n.push(r),o=>{n.length>1?n.forEach(i=>i(o)):n[0](o)}};Ss=t("__VUE_INSTANCE_SETTERS__",s=>pe=s),ir=t("__VUE_SSR_SETTERS__",s=>ss=s)}const os=e=>{const t=pe;return Ss(e),e.scope.on(),()=>{e.scope.off(),Ss(t)}},Qr=()=>{pe&&pe.scope.off(),Ss(null)};function Oo(e){return e.vnode.shapeFlag&4}let ss=!1;function Ol(e,t=!1,s=!1){t&&ir(t);const{props:r,children:n}=e.vnode,o=Oo(e);pl(e,r,o,t),ml(e,n,s||t);const i=o?Ml(e,t):void 0;return t&&ir(!1),i}function Ml(e,t){const s=e.type;e.accessCache=Object.create(null),e.proxy=new Proxy(e.ctx,Xi);const{setup:r}=s;if(r){Je();const n=e.setupContext=r.length>1?Po(e):null,o=os(e),i=ns(r,e,0,[e.props,n]),l=An(i);if(qe(),o(),(l||e.sp)&&!Rt(e)&&so(e),l){if(i.then(Qr,Qr),t)return i.then(c=>{en(e,c)}).catch(c=>{Ms(c,e,0)});e.asyncDep=i}else en(e,i)}else Mo(e)}function en(e,t,s){F(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:J(t)&&(e.setupState=Jn(t)),Mo(e)}function Mo(e,t,s){const r=e.type;e.render||(e.render=r.render||Ge);{const n=os(e);Je();try{Qi(e)}finally{qe(),n()}}}const Pl={get(e,t){return de(e,"get",""),e[t]}};function Po(e){const t=s=>{e.exposed=s||{}};return{attrs:new Proxy(e.attrs,Pl),slots:e.slots,emit:e.emit,expose:t}}function $r(e){return e.exposed?e.exposeProxy||(e.exposeProxy=new Proxy(Jn(_i(e.exposed)),{get(t,s){if(s in t)return t[s];if(s in Yt)return Yt[s](e)},has(t,s){return s in t||s in Yt}})):e.proxy}function Il(e,t=!0){return F(e)?e.displayName||e.name:e.name||t&&e.__name}function kl(e){return F(e)&&"__vccOpts"in e}const A=(e,t)=>Si(e,t,ss),Nl="3.5.39";/**
-* @vue/runtime-dom v3.5.39
-* (c) 2018-present Yuxi (Evan) You and Vue contributors
-* @license MIT
-**/let lr;const tn=typeof window<"u"&&window.trustedTypes;if(tn)try{lr=tn.createPolicy("vue",{createHTML:e=>e})}catch{}const Io=lr?e=>lr.createHTML(e):e=>e,Fl="http://www.w3.org/2000/svg",Ll="http://www.w3.org/1998/Math/MathML",et=typeof document<"u"?document:null,sn=et&&et.createElement("template"),jl={insert:(e,t,s)=>{t.insertBefore(e,s||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,s,r)=>{const n=t==="svg"?et.createElementNS(Fl,e):t==="mathml"?et.createElementNS(Ll,e):s?et.createElement(e,{is:s}):et.createElement(e);return e==="select"&&r&&r.multiple!=null&&n.setAttribute("multiple",r.multiple),n},createText:e=>et.createTextNode(e),createComment:e=>et.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>et.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,s,r,n,o){const i=s?s.previousSibling:t.lastChild;if(n&&(n===o||n.nextSibling))for(;t.insertBefore(n.cloneNode(!0),s),!(n===o||!(n=n.nextSibling)););else{sn.innerHTML=Io(r==="svg"?`<svg>${e}</svg>`:r==="mathml"?`<math>${e}</math>`:e);const l=sn.content;if(r==="svg"||r==="mathml"){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,s)}return[i?i.nextSibling:t.firstChild,s?s.previousSibling:t.lastChild]}},Dl=Symbol("_vtc");function zl(e,t,s){const r=e[Dl];r&&(t=(t?[t,...r]:[...r]).join(" ")),t==null?e.removeAttribute("class"):s?e.setAttribute("class",t):e.className=t}const rn=Symbol("_vod"),Kl=Symbol("_vsh"),Hl=Symbol(""),Vl=/(?:^|;)\s*display\s*:/;function Bl(e,t,s){const r=e.style,n=se(s);let o=!1;if(s&&!n){if(t)if(se(t))for(const i of t.split(";")){const l=i.slice(0,i.indexOf(":")).trim();s[l]==null&&Wt(r,l,"")}else for(const i in t)s[i]==null&&Wt(r,i,"");for(const i in s){i==="display"&&(o=!0);const l=s[i];l!=null?Ul(e,i,!se(t)&&t?t[i]:void 0,l)||Wt(r,i,l):Wt(r,i,"")}}else if(n){if(t!==s){const i=r[Hl];i&&(s+=";"+i),r.cssText=s,o=Vl.test(s)}}else t&&e.removeAttribute("style");rn in e&&(e[rn]=o?r.display:"",e[Kl]&&(r.display="none"))}const nn=/\s*!important$/;function Wt(e,t,s){if(P(s))s.forEach(r=>Wt(e,t,r));else if(s==null&&(s=""),t.startsWith("--"))e.setProperty(t,s);else{const r=Wl(e,t);nn.test(s)?e.setProperty(_t(r),s.replace(nn,""),"important"):e[r]=s}}const on=["Webkit","Moz","ms"],Gs={};function Wl(e,t){const s=Gs[t];if(s)return s;let r=xe(t);if(r!=="filter"&&r in e)return Gs[t]=r;r=$s(r);for(let n=0;n<on.length;n++){const o=on[n]+r;if(o in e)return Gs[t]=o}return t}function Ul(e,t,s,r){return e.tagName==="TEXTAREA"&&(t==="width"||t==="height")&&se(r)&&s===r}const ln="http://www.w3.org/1999/xlink";function cn(e,t,s,r,n,o=Qo(t)){r&&t.startsWith("xlink:")?s==null?e.removeAttributeNS(ln,t.slice(6,t.length)):e.setAttributeNS(ln,t,s):s==null||o&&!On(s)?e.removeAttribute(t):e.setAttribute(t,o?"":Le(s)?String(s):s)}function an(e,t,s,r,n){if(t==="innerHTML"||t==="textContent"){s!=null&&(e[t]=t==="innerHTML"?Io(s):s);return}const o=e.tagName;if(t==="value"&&o!=="PROGRESS"&&!o.includes("-")){const l=o==="OPTION"?e.getAttribute("value")||"":e.value,c=s==null?e.type==="checkbox"?"on":"":String(s);(l!==c||!("_value"in e))&&(e.value=c),s==null&&e.removeAttribute(t),e._value=s;return}let i=!1;if(s===""||s==null){const l=typeof e[t];l==="boolean"?s=On(s):s==null&&l==="string"?(s="",i=!0):l==="number"&&(s=0,i=!0)}try{e[t]=s}catch{}i&&e.removeAttribute(n||t)}function Gl(e,t,s,r){e.addEventListener(t,s,r)}function Jl(e,t,s,r){e.removeEventListener(t,s,r)}const un=Symbol("_vei");function ql(e,t,s,r,n=null){const o=e[un]||(e[un]={}),i=o[t];if(r&&i)i.value=r;else{const[l,c]=Zl(t);if(r){const d=o[t]=tc(r,n);Gl(e,l,d,c)}else i&&(Jl(e,l,i,c),o[t]=void 0)}}const Yl=/(Once|Passive|Capture)$/,Xl=/^on:?(?:Once|Passive|Capture)$/;function Zl(e){let t,s;for(;(s=e.match(Yl))&&!Xl.test(e);)t||(t={}),e=e.slice(0,e.length-s[1].length),t[s[1].toLowerCase()]=!0;return[e[2]===":"?e.slice(3):_t(e.slice(2)),t]}let Js=0;const Ql=Promise.resolve(),ec=()=>Js||(Ql.then(()=>Js=0),Js=Date.now());function tc(e,t){const s=r=>{if(!r._vts)r._vts=Date.now();else if(r._vts<=s.attached)return;const n=s.value;if(P(n)){const o=r.stopImmediatePropagation;r.stopImmediatePropagation=()=>{o.call(r),r._stopped=!0};const i=n.slice(),l=[r];for(let c=0;c<i.length&&!r._stopped;c++){const d=i[c];d&&je(d,t,5,l)}}else je(n,t,5,[r])};return s.value=e,s.attached=ec(),s}const fn=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,sc=(e,t,s,r,n,o)=>{const i=n==="svg";t==="class"?zl(e,r,i):t==="style"?Bl(e,s,r):Ts(t)?As(t)||ql(e,t,s,r,o):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):rc(e,t,r,i))?(an(e,t,r),!e.tagName.includes("-")&&(t==="value"||t==="checked"||t==="selected")&&cn(e,t,r,i,o,t!=="value")):e._isVueCE&&(nc(e,t)||e._def.__asyncLoader&&(/[A-Z]/.test(t)||!se(r)))?an(e,xe(t),r,o,t):(t==="true-value"?e._trueValue=r:t==="false-value"&&(e._falseValue=r),cn(e,t,r,i))};function rc(e,t,s,r){if(r)return!!(t==="innerHTML"||t==="textContent"||t in e&&fn(t)&&F(s));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="autocorrect"||t==="sandbox"&&e.tagName==="IFRAME"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const n=e.tagName;if(n==="IMG"||n==="VIDEO"||n==="CANVAS"||n==="SOURCE")return!1}return fn(t)&&se(s)?!1:t in e}function nc(e,t){const s=e._def.props;if(!s)return!1;const r=xe(t);return Array.isArray(s)?s.some(n=>xe(n)===r):Object.keys(s).some(n=>xe(n)===r)}const oc=fe({patchProp:sc},jl);let dn;function ic(){return dn||(dn=vl(oc))}const lc=((...e)=>{const t=ic().createApp(...e),{mount:s}=t;return t.mount=r=>{const n=ac(r);if(!n)return;const o=t._component;!F(o)&&!o.render&&!o.template&&(o.template=n.innerHTML),n.nodeType===1&&(n.textContent="");const i=s(n,!1,cc(n));return n instanceof Element&&(n.removeAttribute("v-cloak"),n.setAttribute("data-v-app","")),i},t});function cc(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function ac(e){return se(e)?document.querySelector(e):e}const uc="UI8Kit Codegen",fc="One typed render contract — four generated runtimes with identical DOM, design, and ARIA.",dc=[{title:"Spec-driven",description:"Brick definitions in a tiny expression IR — no hand-written drift across stacks."},{title:"Four runtimes",description:"Go Templ, React 19, Svelte 5, and Vue 3 emitted from the same source."},{title:"DOM parity",description:"The canonical renderer is the executable specification, verified by tests."}],pc=[{id:"templ",label:"Go Templ",port:8080},{id:"react",label:"React 19",port:5173},{id:"svelte",label:"Svelte 5",port:5174},{id:"vue",label:"Vue 3",port:5175}],ds={title:uc,subtitle:fc,features:dc,runtimes:pc};function ko(e){var t,s,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e)){var n=e.length;for(t=0;t<n;t++)e[t]&&(s=ko(e[t]))&&(r&&(r+=" "),r+=s)}else for(s in e)e[s]&&(r&&(r+=" "),r+=s);return r}function hc(){for(var e,t,s=0,r="",n=arguments.length;s<n;s++)(e=arguments[s])&&(t=ko(e))&&(r&&(r+=" "),r+=t);return r}const Rr="-",gc=e=>{const t=mc(e),{conflictingClassGroups:s,conflictingClassGroupModifiers:r}=e;return{getClassGroupId:i=>{const l=i.split(Rr);return l[0]===""&&l.length!==1&&l.shift(),No(l,t)||bc(i)},getConflictingClassGroupIds:(i,l)=>{const c=s[i]||[];return l&&r[i]?[...c,...r[i]]:c}}},No=(e,t)=>{var i;if(e.length===0)return t.classGroupId;const s=e[0],r=t.nextPart.get(s),n=r?No(e.slice(1),r):void 0;if(n)return n;if(t.validators.length===0)return;const o=e.join(Rr);return(i=t.validators.find(({validator:l})=>l(o)))==null?void 0:i.classGroupId},pn=/^\[(.+)\]$/,bc=e=>{if(pn.test(e)){const t=pn.exec(e)[1],s=t==null?void 0:t.substring(0,t.indexOf(":"));if(s)return"arbitrary.."+s}},mc=e=>{const{theme:t,prefix:s}=e,r={nextPart:new Map,validators:[]};return vc(Object.entries(e.classGroups),s).forEach(([o,i])=>{cr(i,r,o,t)}),r},cr=(e,t,s,r)=>{e.forEach(n=>{if(typeof n=="string"){const o=n===""?t:hn(t,n);o.classGroupId=s;return}if(typeof n=="function"){if(yc(n)){cr(n(r),t,s,r);return}t.validators.push({validator:n,classGroupId:s});return}Object.entries(n).forEach(([o,i])=>{cr(i,hn(t,o),s,r)})})},hn=(e,t)=>{let s=e;return t.split(Rr).forEach(r=>{s.nextPart.has(r)||s.nextPart.set(r,{nextPart:new Map,validators:[]}),s=s.nextPart.get(r)}),s},yc=e=>e.isThemeGetter,vc=(e,t)=>t?e.map(([s,r])=>{const n=r.map(o=>typeof o=="string"?t+o:typeof o=="object"?Object.fromEntries(Object.entries(o).map(([i,l])=>[t+i,l])):o);return[s,n]}):e,xc=e=>{if(e<1)return{get:()=>{},set:()=>{}};let t=0,s=new Map,r=new Map;const n=(o,i)=>{s.set(o,i),t++,t>e&&(t=0,r=s,s=new Map)};return{get(o){let i=s.get(o);if(i!==void 0)return i;if((i=r.get(o))!==void 0)return n(o,i),i},set(o,i){s.has(o)?s.set(o,i):n(o,i)}}},Fo="!",_c=e=>{const{separator:t,experimentalParseClassName:s}=e,r=t.length===1,n=t[0],o=t.length,i=l=>{const c=[];let d=0,f=0,h;for(let I=0;I<l.length;I++){let L=l[I];if(d===0){if(L===n&&(r||l.slice(I,I+o)===t)){c.push(l.slice(f,I)),f=I+o;continue}if(L==="/"){h=I;continue}}L==="["?d++:L==="]"&&d--}const _=c.length===0?l:l.substring(f),S=_.startsWith(Fo),z=S?_.substring(1):_,T=h&&h>f?h-f:void 0;return{modifiers:c,hasImportantModifier:S,baseClassName:z,maybePostfixModifierPosition:T}};return s?l=>s({className:l,parseClassName:i}):i},wc=e=>{if(e.length<=1)return e;const t=[];let s=[];return e.forEach(r=>{r[0]==="["?(t.push(...s.sort(),r),s=[]):s.push(r)}),t.push(...s.sort()),t},Cc=e=>({cache:xc(e.cacheSize),parseClassName:_c(e),...gc(e)}),Sc=/\s+/,Tc=(e,t)=>{const{parseClassName:s,getClassGroupId:r,getConflictingClassGroupIds:n}=t,o=[],i=e.trim().split(Sc);let l="";for(let c=i.length-1;c>=0;c-=1){const d=i[c],{modifiers:f,hasImportantModifier:h,baseClassName:_,maybePostfixModifierPosition:S}=s(d);let z=!!S,T=r(z?_.substring(0,S):_);if(!T){if(!z){l=d+(l.length>0?" "+l:l);continue}if(T=r(_),!T){l=d+(l.length>0?" "+l:l);continue}z=!1}const I=wc(f).join(":"),L=h?I+Fo:I,M=L+T;if(o.includes(M))continue;o.push(M);const H=n(T,z);for(let E=0;E<H.length;++E){const te=H[E];o.push(L+te)}l=d+(l.length>0?" "+l:l)}return l};function Ac(){let e=0,t,s,r="";for(;e<arguments.length;)(t=arguments[e++])&&(s=Lo(t))&&(r&&(r+=" "),r+=s);return r}const Lo=e=>{if(typeof e=="string")return e;let t,s="";for(let r=0;r<e.length;r++)e[r]&&(t=Lo(e[r]))&&(s&&(s+=" "),s+=t);return s};function Ec(e,...t){let s,r,n,o=i;function i(c){const d=t.reduce((f,h)=>h(f),e());return s=Cc(d),r=s.cache.get,n=s.cache.set,o=l,l(c)}function l(c){const d=r(c);if(d)return d;const f=Tc(c,s);return n(c,f),f}return function(){return o(Ac.apply(null,arguments))}}const ee=e=>{const t=s=>s[e]||[];return t.isThemeGetter=!0,t},jo=/^\[(?:([a-z-]+):)?(.+)\]$/i,$c=/^\d+\/\d+$/,Rc=new Set(["px","full","screen"]),Oc=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,Mc=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,Pc=/^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/,Ic=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,kc=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,Qe=e=>Mt(e)||Rc.has(e)||$c.test(e),ct=e=>kt(e,"length",Hc),Mt=e=>!!e&&!Number.isNaN(Number(e)),qs=e=>kt(e,"number",Mt),Kt=e=>!!e&&Number.isInteger(Number(e)),Nc=e=>e.endsWith("%")&&Mt(e.slice(0,-1)),j=e=>jo.test(e),at=e=>Oc.test(e),Fc=new Set(["length","size","percentage"]),Lc=e=>kt(e,Fc,Do),jc=e=>kt(e,"position",Do),Dc=new Set(["image","url"]),zc=e=>kt(e,Dc,Bc),Kc=e=>kt(e,"",Vc),Ht=()=>!0,kt=(e,t,s)=>{const r=jo.exec(e);return r?r[1]?typeof t=="string"?r[1]===t:t.has(r[1]):s(r[2]):!1},Hc=e=>Mc.test(e)&&!Pc.test(e),Do=()=>!1,Vc=e=>Ic.test(e),Bc=e=>kc.test(e),Wc=()=>{const e=ee("colors"),t=ee("spacing"),s=ee("blur"),r=ee("brightness"),n=ee("borderColor"),o=ee("borderRadius"),i=ee("borderSpacing"),l=ee("borderWidth"),c=ee("contrast"),d=ee("grayscale"),f=ee("hueRotate"),h=ee("invert"),_=ee("gap"),S=ee("gradientColorStops"),z=ee("gradientColorStopPositions"),T=ee("inset"),I=ee("margin"),L=ee("opacity"),M=ee("padding"),H=ee("saturate"),E=ee("scale"),te=ee("sepia"),Ae=ee("skew"),Ee=ee("space"),Ie=ee("translate"),it=()=>["auto","contain","none"],ke=()=>["auto","hidden","clip","visible","scroll"],Xe=()=>["auto",j,t],W=()=>[j,t],pt=()=>["",Qe,ct],lt=()=>["auto",Mt,j],Nt=()=>["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],ne=()=>["solid","dashed","dotted","double","none"],Y=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],V=()=>["start","end","center","between","around","evenly","stretch"],$e=()=>["","0",j],ht=()=>["auto","avoid","all","avoid-page","page","left","right","column"],ce=()=>[Mt,j];return{cacheSize:500,separator:":",theme:{colors:[Ht],spacing:[Qe,ct],blur:["none","",at,j],brightness:ce(),borderColor:[e],borderRadius:["none","","full",at,j],borderSpacing:W(),borderWidth:pt(),contrast:ce(),grayscale:$e(),hueRotate:ce(),invert:$e(),gap:W(),gradientColorStops:[e],gradientColorStopPositions:[Nc,ct],inset:Xe(),margin:Xe(),opacity:ce(),padding:W(),saturate:ce(),scale:ce(),sepia:$e(),skew:ce(),space:W(),translate:W()},classGroups:{aspect:[{aspect:["auto","square","video",j]}],container:["container"],columns:[{columns:[at]}],"break-after":[{"break-after":ht()}],"break-before":[{"break-before":ht()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[...Nt(),j]}],overflow:[{overflow:ke()}],"overflow-x":[{"overflow-x":ke()}],"overflow-y":[{"overflow-y":ke()}],overscroll:[{overscroll:it()}],"overscroll-x":[{"overscroll-x":it()}],"overscroll-y":[{"overscroll-y":it()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[T]}],"inset-x":[{"inset-x":[T]}],"inset-y":[{"inset-y":[T]}],start:[{start:[T]}],end:[{end:[T]}],top:[{top:[T]}],right:[{right:[T]}],bottom:[{bottom:[T]}],left:[{left:[T]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",Kt,j]}],basis:[{basis:Xe()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",j]}],grow:[{grow:$e()}],shrink:[{shrink:$e()}],order:[{order:["first","last","none",Kt,j]}],"grid-cols":[{"grid-cols":[Ht]}],"col-start-end":[{col:["auto",{span:["full",Kt,j]},j]}],"col-start":[{"col-start":lt()}],"col-end":[{"col-end":lt()}],"grid-rows":[{"grid-rows":[Ht]}],"row-start-end":[{row:["auto",{span:[Kt,j]},j]}],"row-start":[{"row-start":lt()}],"row-end":[{"row-end":lt()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",j]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",j]}],gap:[{gap:[_]}],"gap-x":[{"gap-x":[_]}],"gap-y":[{"gap-y":[_]}],"justify-content":[{justify:["normal",...V()]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal",...V(),"baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[...V(),"baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[M]}],px:[{px:[M]}],py:[{py:[M]}],ps:[{ps:[M]}],pe:[{pe:[M]}],pt:[{pt:[M]}],pr:[{pr:[M]}],pb:[{pb:[M]}],pl:[{pl:[M]}],m:[{m:[I]}],mx:[{mx:[I]}],my:[{my:[I]}],ms:[{ms:[I]}],me:[{me:[I]}],mt:[{mt:[I]}],mr:[{mr:[I]}],mb:[{mb:[I]}],ml:[{ml:[I]}],"space-x":[{"space-x":[Ee]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[Ee]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit","svw","lvw","dvw",j,t]}],"min-w":[{"min-w":[j,t,"min","max","fit"]}],"max-w":[{"max-w":[j,t,"none","full","min","max","fit","prose",{screen:[at]},at]}],h:[{h:[j,t,"auto","min","max","fit","svh","lvh","dvh"]}],"min-h":[{"min-h":[j,t,"min","max","fit","svh","lvh","dvh"]}],"max-h":[{"max-h":[j,t,"min","max","fit","svh","lvh","dvh"]}],size:[{size:[j,t,"auto","min","max","fit"]}],"font-size":[{text:["base",at,ct]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",qs]}],"font-family":[{font:[Ht]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",j]}],"line-clamp":[{"line-clamp":["none",Mt,qs]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",Qe,j]}],"list-image":[{"list-image":["none",j]}],"list-style-type":[{list:["none","disc","decimal",j]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[e]}],"placeholder-opacity":[{"placeholder-opacity":[L]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[e]}],"text-opacity":[{"text-opacity":[L]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...ne(),"wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",Qe,ct]}],"underline-offset":[{"underline-offset":["auto",Qe,j]}],"text-decoration-color":[{decoration:[e]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:W()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",j]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",j]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[L]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[...Nt(),jc]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",Lc]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},zc]}],"bg-color":[{bg:[e]}],"gradient-from-pos":[{from:[z]}],"gradient-via-pos":[{via:[z]}],"gradient-to-pos":[{to:[z]}],"gradient-from":[{from:[S]}],"gradient-via":[{via:[S]}],"gradient-to":[{to:[S]}],rounded:[{rounded:[o]}],"rounded-s":[{"rounded-s":[o]}],"rounded-e":[{"rounded-e":[o]}],"rounded-t":[{"rounded-t":[o]}],"rounded-r":[{"rounded-r":[o]}],"rounded-b":[{"rounded-b":[o]}],"rounded-l":[{"rounded-l":[o]}],"rounded-ss":[{"rounded-ss":[o]}],"rounded-se":[{"rounded-se":[o]}],"rounded-ee":[{"rounded-ee":[o]}],"rounded-es":[{"rounded-es":[o]}],"rounded-tl":[{"rounded-tl":[o]}],"rounded-tr":[{"rounded-tr":[o]}],"rounded-br":[{"rounded-br":[o]}],"rounded-bl":[{"rounded-bl":[o]}],"border-w":[{border:[l]}],"border-w-x":[{"border-x":[l]}],"border-w-y":[{"border-y":[l]}],"border-w-s":[{"border-s":[l]}],"border-w-e":[{"border-e":[l]}],"border-w-t":[{"border-t":[l]}],"border-w-r":[{"border-r":[l]}],"border-w-b":[{"border-b":[l]}],"border-w-l":[{"border-l":[l]}],"border-opacity":[{"border-opacity":[L]}],"border-style":[{border:[...ne(),"hidden"]}],"divide-x":[{"divide-x":[l]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[l]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[L]}],"divide-style":[{divide:ne()}],"border-color":[{border:[n]}],"border-color-x":[{"border-x":[n]}],"border-color-y":[{"border-y":[n]}],"border-color-s":[{"border-s":[n]}],"border-color-e":[{"border-e":[n]}],"border-color-t":[{"border-t":[n]}],"border-color-r":[{"border-r":[n]}],"border-color-b":[{"border-b":[n]}],"border-color-l":[{"border-l":[n]}],"divide-color":[{divide:[n]}],"outline-style":[{outline:["",...ne()]}],"outline-offset":[{"outline-offset":[Qe,j]}],"outline-w":[{outline:[Qe,ct]}],"outline-color":[{outline:[e]}],"ring-w":[{ring:pt()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[e]}],"ring-opacity":[{"ring-opacity":[L]}],"ring-offset-w":[{"ring-offset":[Qe,ct]}],"ring-offset-color":[{"ring-offset":[e]}],shadow:[{shadow:["","inner","none",at,Kc]}],"shadow-color":[{shadow:[Ht]}],opacity:[{opacity:[L]}],"mix-blend":[{"mix-blend":[...Y(),"plus-lighter","plus-darker"]}],"bg-blend":[{"bg-blend":Y()}],filter:[{filter:["","none"]}],blur:[{blur:[s]}],brightness:[{brightness:[r]}],contrast:[{contrast:[c]}],"drop-shadow":[{"drop-shadow":["","none",at,j]}],grayscale:[{grayscale:[d]}],"hue-rotate":[{"hue-rotate":[f]}],invert:[{invert:[h]}],saturate:[{saturate:[H]}],sepia:[{sepia:[te]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[s]}],"backdrop-brightness":[{"backdrop-brightness":[r]}],"backdrop-contrast":[{"backdrop-contrast":[c]}],"backdrop-grayscale":[{"backdrop-grayscale":[d]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[f]}],"backdrop-invert":[{"backdrop-invert":[h]}],"backdrop-opacity":[{"backdrop-opacity":[L]}],"backdrop-saturate":[{"backdrop-saturate":[H]}],"backdrop-sepia":[{"backdrop-sepia":[te]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[i]}],"border-spacing-x":[{"border-spacing-x":[i]}],"border-spacing-y":[{"border-spacing-y":[i]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",j]}],duration:[{duration:ce()}],ease:[{ease:["linear","in","out","in-out",j]}],delay:[{delay:ce()}],animate:[{animate:["none","spin","ping","pulse","bounce",j]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[E]}],"scale-x":[{"scale-x":[E]}],"scale-y":[{"scale-y":[E]}],rotate:[{rotate:[Kt,j]}],"translate-x":[{"translate-x":[Ie]}],"translate-y":[{"translate-y":[Ie]}],"skew-x":[{"skew-x":[Ae]}],"skew-y":[{"skew-y":[Ae]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",j]}],accent:[{accent:["auto",e]}],appearance:[{appearance:["none","auto"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",j]}],"caret-color":[{caret:[e]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":W()}],"scroll-mx":[{"scroll-mx":W()}],"scroll-my":[{"scroll-my":W()}],"scroll-ms":[{"scroll-ms":W()}],"scroll-me":[{"scroll-me":W()}],"scroll-mt":[{"scroll-mt":W()}],"scroll-mr":[{"scroll-mr":W()}],"scroll-mb":[{"scroll-mb":W()}],"scroll-ml":[{"scroll-ml":W()}],"scroll-p":[{"scroll-p":W()}],"scroll-px":[{"scroll-px":W()}],"scroll-py":[{"scroll-py":W()}],"scroll-ps":[{"scroll-ps":W()}],"scroll-pe":[{"scroll-pe":W()}],"scroll-pt":[{"scroll-pt":W()}],"scroll-pr":[{"scroll-pr":W()}],"scroll-pb":[{"scroll-pb":W()}],"scroll-pl":[{"scroll-pl":W()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",j]}],fill:[{fill:[e,"none"]}],"stroke-w":[{stroke:[Qe,ct,qs]}],stroke:[{stroke:[e,"none"]}],sr:["sr-only","not-sr-only"],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-s","border-color-e","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}},Uc=Ec(Wc);function be(...e){return Uc(hc(e))}const Gc={BASE_URL:"/",DEV:!1,MODE:"production",PROD:!0,SSR:!1};function ar(){try{const e=Gc;if(e&&typeof e.DEV=="boolean")return e.DEV}catch{}return!1}function Jc(e){return{id:e.id,base:e.base,keys:e.keys,defaults:e.defaults??{},byKey:e.byKey}}function qc(e,t,...s){const r=[];e.base.trim()!==""&&r.push(e.base.trim());for(const n of e.keys){const o=e.byKey[n];if(!o)continue;const i=(t[n]??"").trim(),l=(e.defaults[n]??"").trim(),c=i||l;if(!c){if(ar()&&Object.keys(o).length>0)throw new Error(`[compose] missing default for key "${n}" (recipe id: ${String(e.id??"?")})`);continue}const d=o[c];if(d!==void 0)d.trim()!==""&&r.push(d.trim());else if(ar())throw new Error(`[compose] unknown variant "${c}" for key "${n}" (recipe id: ${String(e.id??"?")})`)}return be(...r,...s)}function Pe(e,t,...s){return qc(Jc(e),t,...s)}const X={Layout:"Layout",BoxAllowed:"BoxAllowed",BlockText:"BlockText",Inline:"Inline",Heading:"Heading",List:"List",ListItem:"ListItem",Form:"Form",FormControl:"FormControl",FormLabel:"FormLabel",Table:"Table",TableSection:"TableSection",TableRow:"TableRow",TableCell:"TableCell",TableColumn:"TableColumn",Media:"Media",Disclosure:"Disclosure",Container:"Container",Stack:"Stack",Group:"Group",Text:"Text"},Yc=new Set(["div","section","article","aside","header","footer","main","nav","figure","search","hgroup"]),Xc=new Set(["div"]),gn=new Set(["p","blockquote","figcaption","address","pre"]),bn=new Set(["span","em","strong","small","abbr","cite","code","kbd","mark","time","data","var","samp","sub","sup","b","i","u","s","q","dfn","bdo","bdi","ins","del"]),Zc=new Set(["h1","h2","h3","h4","h5","h6"]),Qc=new Set(["ul","ol","dl","menu"]),ea=new Set(["li","dt","dd"]),ta=new Set(["form","fieldset"]),sa=new Set(["input","textarea","select","button","option","optgroup","datalist","output","meter","progress"]),ra=new Set(["label","legend"]),na=new Set(["table"]),oa=new Set(["thead","tbody","tfoot"]),ia=new Set(["tr"]),la=new Set(["th","td"]),ca=new Set(["colgroup","col"]),aa=new Set(["img","picture","source"]),ua=new Set(["details","summary"]),fa=new Set(["div","main","section"]),da=new Set(["div","ul","ol"]),pa=new Set(["div","fieldset","dl"]);function ie(e,t){return t.has(e)}const mn=new Set;function ha(e,t,s){if(!ar())return;const r=`${s}:${e}:${t}`;mn.has(r)||(mn.add(r),console.warn(`[resolveTag] disallowed tag "${e}" for group "${s}", fallback "${t}" used.`))}function ga(e,t){const s=e.trim().toLowerCase();switch(t){case X.Layout:return ie(s,Yc);case X.BoxAllowed:return ie(s,Xc);case X.BlockText:return ie(s,gn);case X.Inline:return ie(s,bn);case X.Heading:return ie(s,Zc);case X.List:return ie(s,Qc);case X.ListItem:return ie(s,ea);case X.Form:return ie(s,ta);case X.FormControl:return ie(s,sa);case X.FormLabel:return ie(s,ra);case X.Table:return ie(s,na);case X.TableSection:return ie(s,oa);case X.TableRow:return ie(s,ia);case X.TableCell:return ie(s,la);case X.TableColumn:return ie(s,ca);case X.Media:return ie(s,aa);case X.Disclosure:return ie(s,ua);case X.Container:return ie(s,fa);case X.Stack:return ie(s,da);case X.Group:return ie(s,pa);case X.Text:return gn.has(s)||bn.has(s);default:return!1}}function is(e,t,s){const r=(e==null?void 0:e.trim().toLowerCase())??"";return r?ga(r,s)?r:(ha(r,t,s),t):t}const ls=e=>e==null?"":String(e).trim(),yn=e=>ls(e)!=="",ba=(e,t)=>{const s=ls(e);return s===""?t:s},ma=(e,t,...s)=>{const r=ls(e);return s.includes(r)?r:t},ya=(e,t,s)=>t[ls(e)]??s,va=(e,t)=>(e??"")===t,vn=e=>ls(e)===""?void 0:String(e),zo=e=>{switch(e){case 1:return"h1";case 3:return"h3";case 4:return"h4";case 5:return"h5";case 6:return"h6";default:return"h2"}},xa="inline-flex items-center rounded-full border px-2 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",_a={size:{default:"px-2 py-1 text-xs",lg:"px-3 py-1 text-sm",sm:"px-2 py-1 text-xs"},variant:{default:"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",destructive:"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",outline:"text-foreground",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"}},wa={size:"default",variant:"default"},Ca="ui.badge",Sa=["variant","size"],Ta={base:xa,byKey:_a,defaults:wa,id:Ca,keys:Sa},Aa=Ta;function Ea(e={}){return be(Pe(Aa,{variant:e.variant,size:e.size}),e.className)}const ps=he({name:"Badge",inheritAttrs:!1,__name:"Badge",props:{variant:{},size:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:i,...l}=s;return l}),o=A(()=>Ea({variant:t.variant,size:t.size,className:r.value}));return(i,l)=>(re(),Ye("div",ge({class:o.value||void 0},n.value),[we(i.$slots,"default")],16))}}),$a="",Ra={},Oa={},Ma="ui.block",Pa=[],Ia={base:$a,byKey:Ra,defaults:Oa,id:Ma,keys:Pa},ka=Ia;function Na(e={}){return be(Pe(ka,{}),e.className)}const Fa=he({name:"Block",inheritAttrs:!1,__name:"Block",props:{tag:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:l,...c}=s;return c}),o=A(()=>Na({className:r.value})),i=A(()=>is(t.tag,"div",X.Layout));return(l,c)=>(re(),Me(wt(i.value),ge({class:o.value||void 0},n.value),{default:N(()=>[we(l.$slots,"default")]),_:3},16,["class"]))}}),La="",ja={},Da={},za="ui.box",Ka=[],Ha={base:La,byKey:ja,defaults:Da,id:za,keys:Ka},Va=Ha;function Ba(e={}){return be(Pe(Va,{}),e.className)}const Wa=he({name:"Box",inheritAttrs:!1,__name:"Box",props:{tag:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:l,...c}=s;return c}),o=A(()=>Ba({className:r.value})),i=A(()=>is(t.tag,"div",X.BoxAllowed));return(l,c)=>(re(),Me(wt(i.value),ge({class:o.value||void 0},n.value),{default:N(()=>[we(l.$slots,"default")]),_:3},16,["class"]))}}),Ua="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",Ga={size:{default:"h-10 px-4 py-2",icon:"h-10 w-10",lg:"h-12 rounded-md px-8",sm:"h-8 rounded-md px-3"},variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80"}},Ja={size:"default",variant:"default"},qa="ui.button",Ya=["variant","size"],Xa={base:Ua,byKey:Ga,defaults:Ja,id:qa,keys:Ya},Za=Xa;function Qa(e={}){return be(Pe(Za,{variant:e.variant,size:e.size}),e.disabled?"pointer-events-none opacity-50":"",e.className)}const eu=["type","disabled"],Vt=he({name:"Button",inheritAttrs:!1,__name:"Button",props:{variant:{},size:{},type:{},disabled:{type:Boolean}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:i,...l}=s;return l}),o=A(()=>Qa({variant:t.variant,size:t.size,disabled:t.disabled,className:r.value}));return(i,l)=>(re(),Ye("button",ge({type:k(ma)(t.type,"button","submit","reset"),class:o.value||void 0,disabled:t.disabled||void 0},n.value),[we(i.$slots,"default")],16,eu))}}),tu="ui.card",su="rounded-md border border-border bg-card text-card-foreground shadow-sm",ru=["variant"],nu={variant:"default"},ou={variant:{default:"",raised:"",kpi:"bg-card/50",muted:"bg-muted/40",ghost:"border-dashed bg-background shadow-none",compact:"p-4",flat:"shadow-none",accent:"border-transparent bg-accent/30"}},iu={id:tu,base:su,keys:ru,defaults:nu,byKey:ou},lu=iu;function cu(e={}){return be(Pe(lu,{variant:e.variant}),e.className)}function au(e={}){return be("border-b border-border px-4 py-2",e.className)}function uu(e={}){return be("text-sm font-semibold",e.className)}function fu(e={}){return be("p-4",e.className)}const xn=he({name:"Card",inheritAttrs:!1,__name:"Card",props:{variant:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:i,...l}=s;return l}),o=A(()=>cu({variant:t.variant,className:r.value}));return(i,l)=>(re(),Ye("div",ge({class:o.value||void 0},n.value),[we(i.$slots,"default")],16))}}),_n=he({name:"CardHeader",inheritAttrs:!1,__name:"CardHeader",setup(e){const t=Ce(),s=A(()=>t.class),r=A(()=>{const{class:o,...i}=t;return i}),n=A(()=>au({className:s.value}));return(o,i)=>(re(),Ye("div",ge({class:n.value||void 0},r.value),[we(o.$slots,"default")],16))}}),wn=he({name:"CardTitle",inheritAttrs:!1,__name:"CardTitle",props:{as:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:l,...c}=s;return c}),o=A(()=>uu({className:r.value})),i=A(()=>zo(t.as));return(l,c)=>(re(),Me(wt(i.value),ge({class:o.value||void 0},n.value),{default:N(()=>[we(l.$slots,"default")]),_:3},16,["class"]))}}),Cn=he({name:"CardContent",inheritAttrs:!1,__name:"CardContent",setup(e){const t=Ce(),s=A(()=>t.class),r=A(()=>{const{class:o,...i}=t;return i}),n=A(()=>fu({className:s.value}));return(o,i)=>(re(),Ye("div",ge({class:n.value||void 0},r.value),[we(o.$slots,"default")],16))}}),du="",pu={},hu={},gu="ui.container",bu=[],mu={base:du,byKey:pu,defaults:hu,id:gu,keys:bu},yu=mu;function vu(e={}){return be(Pe(yu,{}),e.className)}const xu=he({name:"Container",inheritAttrs:!1,__name:"Container",props:{tag:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:l,...c}=s;return c}),o=A(()=>vu({className:r.value})),i=A(()=>is(t.tag,"div",X.Container));return(l,c)=>(re(),Me(wt(i.value),ge({class:o.value||void 0},n.value),{default:N(()=>[we(l.$slots,"default")]),_:3},16,["class"]))}}),_u="grid",wu={},Cu={},Su="ui.grid",Tu=[],Au={base:_u,byKey:wu,defaults:Cu,id:Su,keys:Tu},Eu=Au;function $u(e={}){return be(Pe(Eu,{}),(e.className??"").includes("grid-cols-")?"":ya(ba(e.cols,"1"),{1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",5:"grid-cols-5",6:"grid-cols-6",7:"grid-cols-7",8:"grid-cols-8",9:"grid-cols-9",10:"grid-cols-10",11:"grid-cols-11",12:"grid-cols-12","1-2":"grid-cols-1 md:grid-cols-2","1-3":"grid-cols-1 md:grid-cols-2 xl:grid-cols-3","1-4":"grid-cols-1 md:grid-cols-2 xl:grid-cols-4"},""),e.className)}const Ru=he({name:"Grid",inheritAttrs:!1,__name:"Grid",props:{cols:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:i,...l}=s;return l}),o=A(()=>$u({cols:t.cols,className:r.value}));return(i,l)=>(re(),Ye("div",ge({class:o.value||void 0},n.value),[we(i.$slots,"default")],16))}}),Ou="flex min-w-0",Mu={},Pu={},Iu="ui.group",ku=[],Nu={base:Ou,byKey:Mu,defaults:Pu,id:Iu,keys:ku},Fu=Nu;function Lu(e={}){return be(Pe(Fu,{}),e.className)}const Ys=he({name:"Group",inheritAttrs:!1,__name:"Group",props:{tag:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:l,...c}=s;return c}),o=A(()=>Lu({className:r.value})),i=A(()=>is(t.tag,"div",X.Group));return(l,c)=>(re(),Me(wt(i.value),ge({class:o.value||void 0},n.value),{default:N(()=>[we(l.$slots,"default")]),_:3},16,["class"]))}}),ju="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",Du={size:{default:"text-sm",lg:"text-lg",md:"text-base",sm:"text-sm"},variant:{block:"flex w-full text-foreground hover:text-primary",default:"text-primary hover:underline",external:"text-primary hover:underline",muted:"text-muted-foreground hover:text-foreground hover:underline",nav:"text-foreground hover:text-primary"}},zu={size:"default",variant:"default"},Ku="ui.link",Hu=["variant","size"],Vu={base:ju,byKey:Du,defaults:zu,id:Ku,keys:Hu},Bu=Vu;function Wu(e={}){return be(Pe(Bu,{variant:e.variant,size:e.size}),e.disabled?"pointer-events-none opacity-50":"",e.className)}const Uu=["target","rel","aria-disabled","tabindex"],Gu=he({name:"Link",inheritAttrs:!1,__name:"Link",props:{variant:{},size:{},target:{},rel:{},external:{type:Boolean},disabled:{type:Boolean}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:c,...d}=s;return d}),o=A(()=>Wu({variant:t.variant,size:t.size,disabled:t.disabled,className:r.value})),i=A(()=>yn(t.target)?t.target:t.external?"_blank":""),l=A(()=>yn(t.rel)?t.rel:t.external||va(i.value,"_blank")?"noopener noreferrer":"");return(c,d)=>(re(),Ye("a",ge({class:o.value||void 0,target:k(vn)(i.value),rel:k(vn)(l.value),"aria-disabled":t.disabled?"true":void 0,tabindex:t.disabled?-1:void 0},n.value),[we(c.$slots,"default")],16,Uu))}}),Ju="flex flex-col items-start justify-start",qu={},Yu={},Xu="ui.stack",Zu=[],Qu={base:Ju,byKey:qu,defaults:Yu,id:Xu,keys:Zu},ef=Qu;function tf(e={}){return be(Pe(ef,{}),e.className)}const hs=he({name:"Stack",inheritAttrs:!1,__name:"Stack",props:{tag:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:l,...c}=s;return c}),o=A(()=>tf({className:r.value})),i=A(()=>is(t.tag,"div",X.Stack));return(l,c)=>(re(),Me(wt(i.value),ge({class:o.value||void 0},n.value),{default:N(()=>[we(l.$slots,"default")]),_:3},16,["class"]))}}),sf="",rf={},nf={},of="ui.text",lf=[],cf={base:sf,byKey:rf,defaults:nf,id:of,keys:lf},af=cf;function uf(e={}){return be(Pe(af,{}),e.className)}const gs=he({name:"Text",inheritAttrs:!1,__name:"Text",setup(e){const t=Ce(),s=A(()=>t.class),r=A(()=>{const{class:o,...i}=t;return i}),n=A(()=>uf({className:s.value}));return(o,i)=>(re(),Ye("p",ge({class:n.value||void 0},r.value),[we(o.$slots,"default")],16))}}),ff="",df={},pf={},hf="ui.title",gf=[],bf={base:ff,byKey:df,defaults:pf,id:hf,keys:gf},mf=bf;function yf(e={}){return be(Pe(mf,{}),e.className)}const vf=he({name:"Title",inheritAttrs:!1,__name:"Title",props:{as:{}},setup(e){const t=e,s=Ce(),r=A(()=>s.class),n=A(()=>{const{class:l,...c}=s;return c}),o=A(()=>yf({className:r.value})),i=A(()=>zo(t.as));return(l,c)=>(re(),Me(wt(i.value),ge({class:o.value||void 0},n.value),{default:N(()=>[we(l.$slots,"default")]),_:3},16,["class"]))}}),xf=he({__name:"Welcome",setup(e){return(t,s)=>(re(),Me(k(Fa),{tag:"main",class:"min-h-screen bg-muted/30 text-foreground"},{default:N(()=>[D(k(xu),{class:"mx-auto max-w-4xl px-4 py-16"},{default:N(()=>[D(k(hs),{class:"gap-8"},{default:N(()=>[D(k(hs),{class:"items-center gap-4 text-center"},{default:N(()=>[D(k(ps),{variant:"outline",class:"text-xs uppercase tracking-wide"},{default:N(()=>[...s[0]||(s[0]=[le("Vue 3",-1)])]),_:1}),D(k(vf),{as:1,class:"text-3xl font-bold tracking-tight"},{default:N(()=>[le(St(k(ds).title),1)]),_:1}),D(k(gs),{class:"max-w-2xl text-muted-foreground"},{default:N(()=>[le(St(k(ds).subtitle),1)]),_:1})]),_:1}),D(k(xn),{variant:"default"},{default:N(()=>[D(k(_n),null,{default:N(()=>[D(k(wn),null,{default:N(()=>[...s[1]||(s[1]=[le("Generated primitives",-1)])]),_:1})]),_:1}),D(k(Cn),null,{default:N(()=>[D(k(hs),{class:"gap-4"},{default:N(()=>[D(k(Ys),{class:"flex-wrap gap-2"},{default:N(()=>[D(k(Vt),{variant:"default",size:"sm"},{default:N(()=>[...s[2]||(s[2]=[le("Default",-1)])]),_:1}),D(k(Vt),{variant:"secondary",size:"sm"},{default:N(()=>[...s[3]||(s[3]=[le("Secondary",-1)])]),_:1}),D(k(Vt),{variant:"outline",size:"sm"},{default:N(()=>[...s[4]||(s[4]=[le("Outline",-1)])]),_:1}),D(k(Vt),{variant:"ghost",size:"sm"},{default:N(()=>[...s[5]||(s[5]=[le("Ghost",-1)])]),_:1}),D(k(Vt),{variant:"destructive",size:"sm"},{default:N(()=>[...s[6]||(s[6]=[le("Destructive",-1)])]),_:1})]),_:1}),D(k(Ys),{class:"flex-wrap gap-2"},{default:N(()=>[D(k(ps),{variant:"default"},{default:N(()=>[...s[7]||(s[7]=[le("Badge",-1)])]),_:1}),D(k(ps),{variant:"secondary"},{default:N(()=>[...s[8]||(s[8]=[le("Secondary",-1)])]),_:1}),D(k(ps),{variant:"outline"},{default:N(()=>[...s[9]||(s[9]=[le("Outline",-1)])]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),D(k(Ru),{cols:"1-3",class:"gap-4"},{default:N(()=>[(re(!0),Ye(Te,null,Vr(k(ds).features,r=>(re(),Me(k(xn),{key:r.title,variant:"muted"},{default:N(()=>[D(k(_n),null,{default:N(()=>[D(k(wn),null,{default:N(()=>[le(St(r.title),1)]),_:2},1024)]),_:2},1024),D(k(Cn),null,{default:N(()=>[D(k(gs),{class:"text-sm text-muted-foreground"},{default:N(()=>[le(St(r.description),1)]),_:2},1024)]),_:2},1024)]),_:2},1024))),128))]),_:1}),D(k(Wa),{class:"rounded-lg border border-border bg-card p-4"},{default:N(()=>[D(k(hs),{class:"gap-3"},{default:N(()=>[D(k(gs),{class:"text-sm font-medium"},{default:N(()=>[...s[10]||(s[10]=[le("Preview other runtimes",-1)])]),_:1}),D(k(Ys),{class:"flex-wrap gap-3"},{default:N(()=>[(re(!0),Ye(Te,null,Vr(k(ds).runtimes,r=>(re(),Me(k(Gu),{key:r.id,href:`http://127.0.0.1:${r.port}`,variant:"default"},{default:N(()=>[le(St(r.label),1)]),_:2},1032,["href"]))),128))]),_:1})]),_:1})]),_:1}),D(k(gs),{class:"text-center text-sm text-muted-foreground"},{default:N(()=>[...s[11]||(s[11]=[le(" Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen ",-1)])]),_:1})]),_:1})]),_:1})]),_:1}))}});lc(xf).mount("#app");
diff --git a/examples/vue/dist/index.html b/examples/vue/dist/index.html
deleted file mode 100644
index f59fd15..0000000
--- a/examples/vue/dist/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UI8Kit Codegen · Vue 3</title>
-    <link rel="stylesheet" href="/static/css/app.css" />
-    <script type="module" crossorigin src="/assets/index-CdiGC986.js"></script>
-  </head>
-  <body class="bg-background text-foreground antialiased">
-    <div id="app"></div>

-  </body>
-</html>
diff --git a/examples/vue/index.html b/examples/vue/index.html
deleted file mode 100644
index 853a732..0000000
--- a/examples/vue/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UI8Kit Codegen · Vue 3</title>
-    <link rel="stylesheet" href="/static/css/app.css" />
-  </head>
-  <body class="bg-background text-foreground antialiased">
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
diff --git a/examples/vue/src/Welcome.vue b/examples/vue/src/Welcome.vue
deleted file mode 100644
index b213b82..0000000
--- a/examples/vue/src/Welcome.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import welcome from "../../data/welcome.json";
-import {
-  Badge,
-  Block,
-  Box,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Container,
-  Grid,
-  Group,
-  Link,
-  Stack,
-  Text,
-  Title,
-} from "@ui";
-</script>
-
-<template>
-  <Block tag="main" class="min-h-screen bg-muted/30 text-foreground">
-    <Container class="mx-auto max-w-4xl px-4 py-16">
-      <Stack class="gap-8">
-        <Stack class="items-center gap-4 text-center">
-          <Badge variant="outline" class="text-xs uppercase tracking-wide">Vue 3</Badge>
-          <Title :as="1" class="text-3xl font-bold tracking-tight">{{ welcome.title }}</Title>
-          <Text class="max-w-2xl text-muted-foreground">{{ welcome.subtitle }}</Text>
-        </Stack>
-
-        <Card variant="default">
-          <CardHeader>
-            <CardTitle>Generated primitives</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Stack class="gap-4">
-              <Group class="flex-wrap gap-2">
-                <Button variant="default" size="sm">Default</Button>
-                <Button variant="secondary" size="sm">Secondary</Button>
-                <Button variant="outline" size="sm">Outline</Button>
-                <Button variant="ghost" size="sm">Ghost</Button>
-                <Button variant="destructive" size="sm">Destructive</Button>
-              </Group>
-              <Group class="flex-wrap gap-2">
-                <Badge variant="default">Badge</Badge>
-                <Badge variant="secondary">Secondary</Badge>
-                <Badge variant="outline">Outline</Badge>
-              </Group>
-            </Stack>
-          </CardContent>
-        </Card>
-
-        <Grid cols="1-3" class="gap-4">
-          <Card v-for="feature in welcome.features" :key="feature.title" variant="muted">
-            <CardHeader>
-              <CardTitle>{{ feature.title }}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Text class="text-sm text-muted-foreground">{{ feature.description }}</Text>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Box class="rounded-lg border border-border bg-card p-4">
-          <Stack class="gap-3">
-            <Text class="text-sm font-medium">Preview other runtimes</Text>
-            <Group class="flex-wrap gap-3">
-              <Link
-                v-for="rt in welcome.runtimes"
-                :key="rt.id"
-                :href="`http://127.0.0.1:${rt.port}`"
-                variant="default"
-              >
-                {{ rt.label }}
-              </Link>
-            </Group>
-          </Stack>
-        </Box>
-
-        <Text class="text-center text-sm text-muted-foreground">
-          Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen
-        </Text>
-      </Stack>
-    </Container>
-  </Block>
-</template>
diff --git a/examples/vue/src/main.ts b/examples/vue/src/main.ts
deleted file mode 100644
index de73b7b..0000000
--- a/examples/vue/src/main.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createApp } from "vue";
-import Welcome from "./Welcome.vue";
-
-createApp(Welcome).mount("#app");
diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json
deleted file mode 100644
index 8958ee7..0000000
--- a/examples/vue/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "jsx": "preserve",
-    "paths": {
-      "@ui": ["../../generated/ui/index.vue.ts"],
-      "@ui/*": ["../../generated/ui/*"]
-    }
-  },
-  "include": ["src/**/*.ts", "src/**/*.vue", "../data/**/*.json"]
-}
diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts
deleted file mode 100644
index a503ccd..0000000
--- a/examples/vue/vite.config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import path from "path";
-import { fileURLToPath } from "url";
-import vue from "@vitejs/plugin-vue";
-import { defineConfig } from "vite";
-import { generatedUiRoot, serveExamplesStatic } from "../shared/vite-static";
-
-const rootDir = path.dirname(fileURLToPath(import.meta.url));
-
-export default defineConfig({
-  root: rootDir,
-  plugins: [vue(), serveExamplesStatic()],
-  resolve: {
-    alias: {
-      "@ui": path.join(generatedUiRoot, "index.vue.ts"),
-    },
-  },
-  server: {
-    port: 5175,
-    fs: {
-      allow: [path.resolve(rootDir, ".."), path.resolve(rootDir, "../../generated")],
-    },
-  },
-});
diff --git a/examples/web/static/css/app.css b/examples/web/static/css/app.css
deleted file mode 100644
index bad6e36..0000000
--- a/examples/web/static/css/app.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:var(--font-sans);--font-serif:var(--font-serif);--font-mono:var(--font-mono);--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-2xl:42rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--shadow-2xs:var(--shadow-2xs);--shadow-xs:var(--shadow-xs);--shadow-sm:var(--shadow-sm);--shadow-md:var(--shadow-md);--shadow-lg:var(--shadow-lg);--shadow-xl:var(--shadow-xl);--shadow-2xl:var(--shadow-2xl);--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--shadow:var(--shadow)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.isolate{isolation:isolate}.isolation-auto{isolation:auto}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6}.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9}.col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12}.col-end-1{grid-column-end:1}.col-end-2{grid-column-end:2}.col-end-3{grid-column-end:3}.col-end-4{grid-column-end:4}.col-end-5{grid-column-end:5}.col-end-6{grid-column-end:6}.col-end-7{grid-column-end:7}.col-end-8{grid-column-end:8}.col-end-9{grid-column-end:9}.col-end-10{grid-column-end:10}.col-end-11{grid-column-end:11}.col-end-12{grid-column-end:12}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.block{display:block}.contents{display:contents}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.inline-table{display:inline-table}.list-item{display:list-item}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row{display:table-row}.table-row-group{display:table-row-group}.aspect-auto{aspect-ratio:auto}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.h-1{height:var(--spacing)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-full{height:100%}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-none{max-width:none}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.touch-pinch-zoom{--tw-pinch-zoom:pinch-zoom;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-reverse>:not(:last-child)){--tw-space-y-reverse:1}:where(.space-x-reverse>:not(:last-child)){--tw-space-x-reverse:1}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-reverse>:not(:last-child)){--tw-divide-y-reverse:1}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-none{border-radius:0}.rounded-s{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.rounded-ss{border-start-start-radius:.25rem}.rounded-e{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.rounded-se{border-start-end-radius:.25rem}.rounded-ee{border-end-end-radius:.25rem}.rounded-es{border-end-start-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-tl{border-top-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-tr{border-top-right-radius:.25rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-br{border-bottom-right-radius:.25rem}.rounded-bl{border-bottom-left-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-x{border-inline-style:var(--tw-border-style);border-inline-width:1px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-border{border-color:var(--border)}.border-destructive{border-color:var(--destructive)}.border-input{border-color:var(--input)}.border-primary{border-color:var(--primary)}.border-transparent{border-color:#0000}.bg-accent,.bg-accent\/30{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/30{background-color:color-mix(in oklab, var(--accent) 30%, transparent)}}.bg-background{background-color:var(--background)}.bg-border{background-color:var(--border)}.bg-card,.bg-card\/50{background-color:var(--card)}@supports (color:color-mix(in lab, red, red)){.bg-card\/50{background-color:color-mix(in oklab, var(--card) 50%, transparent)}}.bg-destructive,.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.bg-foreground{background-color:var(--foreground)}.bg-muted,.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.bg-muted\/40{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.bg-primary,.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-repeat{background-repeat:repeat}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-fill{object-fit:fill}.object-none{object-fit:none}.object-scale-down{object-fit:scale-down}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-left-bottom{object-position:left bottom}.object-left-top{object-position:left top}.object-right{object-position:right}.object-right-bottom{object-position:right bottom}.object-right-top{object-position:right top}.object-top{object-position:top}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-16{padding-block:calc(var(--spacing) * 16)}.text-center{text-align:center}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-wrap{text-wrap:wrap}.text-clip{text-overflow:clip}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--accent-foreground)}.text-card-foreground{color:var(--card-foreground)}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.diagonal-fractions{--tw-numeric-fraction:diagonal-fractions;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.oldstyle-nums{--tw-numeric-figure:oldstyle-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.slashed-zero{--tw-slashed-zero:slashed-zero;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.stacked-fractions{--tw-numeric-fraction:stacked-fractions;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.normal-nums{font-variant-numeric:normal}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.accent-muted-foreground{accent-color:var(--muted-foreground)}.accent-primary{accent-color:var(--primary)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--shadow-lg);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.sepia{--tw-sepia:sepia(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-grayscale{--tw-backdrop-grayscale:grayscale(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-invert{--tw-backdrop-invert:invert(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-sepia{--tw-backdrop-sepia:sepia(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}:where(.divide-x-reverse>:not(:last-child)){--tw-divide-x-reverse:1}.ring-inset{--tw-ring-inset:inset}.backdrop\:bg-background\/80::backdrop{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.backdrop\:bg-background\/80::backdrop{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/80:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/80:hover{background-color:color-mix(in oklab, var(--destructive) 80%, transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-primary\/80:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab, var(--primary) 80%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-primary:hover{color:var(--primary)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:80rem){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}}:root{--background:#e8ebed;--foreground:#333;--card:#fff;--card-foreground:#333;--popover:#fff;--popover-foreground:#333;--primary:#df6035;--primary-foreground:#fff;--secondary:#2f4b79;--secondary-foreground:#fff;--muted:#f9fafb;--muted-foreground:#6b7280;--accent:#d6e4f0;--accent-foreground:#1e3a8a;--destructive:#ef4444;--destructive-foreground:#fff;--success:#16a34a;--success-foreground:#fff;--warning:#eab308;--warning-foreground:#1a1a1a;--border:#ccc;--input:#f4f5f7;--ring:#e05d38;--chart-1:#7399bf;--chart-2:#e16f41;--chart-3:#d54450;--chart-4:#e2b146;--chart-5:#3c4c76;--sidebar:#dddfe2;--sidebar-foreground:#333;--sidebar-primary:#e05d38;--sidebar-primary-foreground:#fff;--sidebar-accent:#d6e4f0;--sidebar-accent-foreground:#1e3a8a;--sidebar-border:#e5e7eb;--sidebar-ring:#e05d38;--font-sans:"Google Sans", sans-serif;--font-serif:ui-serif, Georgia, serif;--font-mono:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:3px;--shadow-spread:0px;--shadow-opacity:.1;--shadow-color:#1a1a1a;--shadow-2xs:0px 1px 3px 0px #1a1a1a0d;--shadow-xs:0px 1px 3px 0px #1a1a1a0d;--shadow-sm:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow-md:0px 1px 3px 0px #1a1a1a1a, 0px 2px 4px -1px #1a1a1a1a;--shadow-lg:0px 1px 3px 0px #1a1a1a1a, 0px 4px 6px -1px #1a1a1a1a;--shadow-xl:0px 1px 3px 0px #1a1a1a1a, 0px 8px 10px -1px #1a1a1a1a;--shadow-2xl:0px 1px 3px 0px #1a1a1a40;--tracking-normal:0em;--spacing:.25rem;--code-default:var(--foreground);--code-comment:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){:root{--code-comment:color-mix(in hsl, var(--muted-foreground) 88%, var(--foreground))}}:root{--code-keyword:#63149f;--code-keyword-op:#63149f;--code-keyword-const:#0000c2;--code-type:#005a61;--code-string:#2546bb;--code-number:#0000c2;--code-name:var(--foreground);--code-at:var(--foreground);--code-function:#7f064c;--code-variable:#00558a;--code-builtin:#8f0069;--code-operator:#00558a;--code-tag:#00558a;--code-error-fg:var(--destructive);--code-error-bg:var(--destructive)}@supports (color:color-mix(in lab, red, red)){:root{--code-error-bg:color-mix(in hsl, var(--destructive) 15%, transparent)}}:root{--code-diff-add:#005a61;--code-diff-del:var(--destructive);--code-highlight:var(--accent)}@supports (color:color-mix(in lab, red, red)){:root{--code-highlight:color-mix(in hsl, var(--accent) 50%, transparent)}}.dark{--background:#1a1a1a;--foreground:#e5e5e5;--card:#202020;--card-foreground:#e5e5e5;--popover:#202020;--popover-foreground:#e5e5e5;--primary:#df6035;--primary-foreground:#fff;--secondary:#284167;--secondary-foreground:#e5e5e5;--muted:#2a2a2a;--muted-foreground:gray;--accent:#2a3656;--accent-foreground:#bfdbfe;--destructive:#ef4444;--destructive-foreground:#fff;--success:#16a34a;--success-foreground:#fff;--warning:#eab308;--warning-foreground:#1a1a1a;--border:#353535;--input:#303030;--ring:#e05d38;--chart-1:#85a6c7;--chart-2:#e16f41;--chart-3:#d54450;--chart-4:#e2b146;--chart-5:#3c4c76;--sidebar:#1f1f1f;--sidebar-foreground:#e5e5e5;--sidebar-primary:#e05d38;--sidebar-primary-foreground:#fff;--sidebar-accent:#2a3656;--sidebar-accent-foreground:#bfdbfe;--sidebar-border:#353535;--sidebar-ring:#e05d38;--font-sans:"Google Sans", sans-serif;--font-serif:ui-serif, Georgia, serif;--font-mono:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--radius:.5rem;--shadow-x:0px;--shadow-y:1px;--shadow-blur:3px;--shadow-spread:0px;--shadow-opacity:.1;--shadow-color:#1a1a1a;--shadow-2xs:0px 1px 3px 0px #1a1a1a0d;--shadow-xs:0px 1px 3px 0px #1a1a1a0d;--shadow-sm:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow:0px 1px 3px 0px #1a1a1a1a, 0px 1px 2px -1px #1a1a1a1a;--shadow-md:0px 1px 3px 0px #1a1a1a1a, 0px 2px 4px -1px #1a1a1a1a;--shadow-lg:0px 1px 3px 0px #1a1a1a1a, 0px 4px 6px -1px #1a1a1a1a;--shadow-xl:0px 1px 3px 0px #1a1a1a1a, 0px 8px 10px -1px #1a1a1a1a;--shadow-2xl:0px 1px 3px 0px #1a1a1a40;--code-comment:#a8a8a8;--code-keyword:#bea8ff;--code-keyword-op:#bea8ff;--code-keyword-const:#00bfff;--code-type:#78e3bc;--code-string:#7aa2ff;--code-number:#00bfff;--code-function:#fdafd6;--code-variable:#00d1ca;--code-builtin:#f99fec;--code-operator:#00d1ca;--code-tag:#00d1ca;--code-diff-add:#78e3bc;--code-highlight:var(--accent)}@supports (color:color-mix(in lab, red, red)){.dark{--code-highlight:color-mix(in hsl, var(--accent) 65%, transparent)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}
\ No newline at end of file
diff --git a/examples/web/static/css/input.css b/examples/web/static/css/input.css
deleted file mode 100644
index 4749582..0000000
--- a/examples/web/static/css/input.css
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "tailwindcss";
-
-@source "../../../../generated/ui/**/*.tsx";
-@source "../../../../generated/ui/**/*.svelte";
-@source "../../../../generated/ui/**/*.vue";
-@source "../../../../generated/ui/**/*.templ";
-@source "../../../../generated/ui/**/*_templ.go";
-@source "../../../../generated/ui/**/*.variants.json";
-@source "../../../../generated/utils/**/*.ts";
-@source "../../../../generated/ui/**/*.latte";
-@source "../../../../generated/ui/**/*.html.twig";
-@source "../../../react/src/**/*.tsx";
-@source "../../../svelte/src/**/*.svelte";
-@source "../../../vue/src/**/*.vue";
-@source "../../../solid/src/**/*.tsx";
-@source "../../../templ/**/*.templ";
-@source "../../../templ/**/*_templ.go";
-@source "../../../latte/templates/**/*.latte";
-@source "../../../twig/templates/**/*.html.twig";
-
-@import "./tokens.css";
diff --git a/examples/web/static/css/tokens.css b/examples/web/static/css/tokens.css
deleted file mode 100644
index a5c5820..0000000
--- a/examples/web/static/css/tokens.css
+++ /dev/null
@@ -1,221 +0,0 @@
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --background: hsl(204.0000 12.1951% 91.9608%);
-  --foreground: hsl(0 0% 20%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 20%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 20%);
-  --primary: hsl(15.1765 72.6496% 54.1176%);
-  --primary-foreground: hsl(0 0% 100%);
-  --secondary: hsl(217.2973 44.0476% 32.9412%);
-  --secondary-foreground: hsl(0 0% 100%);
-  --muted: hsl(210 20.0000% 98.0392%);
-  --muted-foreground: hsl(220 8.9362% 46.0784%);
-  --accent: hsl(207.6923 46.4286% 89.0196%);
-  --accent-foreground: hsl(224.4444 64.2857% 32.9412%);
-  --destructive: hsl(0 84.2365% 60.1961%);
-  --destructive-foreground: hsl(0 0% 100%);
-  --success: hsl(142.1 76.2% 36.3%);
-  --success-foreground: hsl(0 0% 100%);
-  --warning: hsl(45.4 93.4% 47.5%);
-  --warning-foreground: hsl(0 0% 10%);
-  --border: hsl(0 0% 80%);
-  --input: hsl(220 15.7895% 96.2745%);
-  --ring: hsl(13.2143 73.0435% 54.9020%);
-  --chart-1: hsl(210 37.2549% 60%);
-  --chart-2: hsl(17.2500 72.7273% 56.8627%);
-  --chart-3: hsl(355.0345 63.3188% 55.0980%);
-  --chart-4: hsl(41.1538 72.8972% 58.0392%);
-  --chart-5: hsl(223.4483 32.5843% 34.9020%);
-  --sidebar: hsl(216 7.9365% 87.6471%);
-  --sidebar-foreground: hsl(0 0% 20%);
-  --sidebar-primary: hsl(13.2143 73.0435% 54.9020%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(207.6923 46.4286% 89.0196%);
-  --sidebar-accent-foreground: hsl(224.4444 64.2857% 32.9412%);
-  --sidebar-border: hsl(220 13.0435% 90.9804%);
-  --sidebar-ring: hsl(13.2143 73.0435% 54.9020%);
-  --font-sans: "Google Sans", sans-serif;
-  --font-serif: ui-serif, Georgia, serif;
-  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: #1a1a1a;
-  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-md: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.25);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
-
-  /* Modus Operandi (light) code roles — see modus-vivendi overrides in .dark */
-  --code-default: var(--foreground);
-  --code-comment: color-mix(in hsl, var(--muted-foreground) 88%, var(--foreground));
-  --code-keyword: hsl(274 78% 35%);
-  --code-keyword-op: hsl(274 78% 35%);
-  --code-keyword-const: hsl(240 100% 38%);
-  --code-type: hsl(184 100% 19%);
-  --code-string: hsl(227 67% 44%);
-  --code-number: hsl(240 100% 38%);
-  --code-name: var(--foreground);
-  --code-at: var(--foreground);
-  --code-function: hsl(325 91% 26%);
-  --code-variable: hsl(203 100% 27%);
-  --code-builtin: hsl(316 100% 28%);
-  --code-operator: hsl(203 100% 27%);
-  --code-tag: hsl(203 100% 27%);
-  --code-error-fg: var(--destructive);
-  --code-error-bg: color-mix(in hsl, var(--destructive) 15%, transparent);
-  --code-diff-add: hsl(184 100% 19%);
-  --code-diff-del: var(--destructive);
-  --code-highlight: color-mix(in hsl, var(--accent) 50%, transparent);
-}
-
-.dark {
-  --background: hsl(0 0% 10.1961%);
-  --foreground: hsl(0 0% 89.8039%);
-  --card: hsl(0 0% 12.5490%);
-  --card-foreground: hsl(0 0% 89.8039%);
-  --popover: hsl(0 0% 12.5490%);
-  --popover-foreground: hsl(0 0% 89.8039%);
-  --primary: hsl(15.1765 72.6496% 54.1176%);
-  --primary-foreground: hsl(0 0% 100%);
-  --secondary: hsl(216.1905 44.0559% 28.0392%);
-  --secondary-foreground: hsl(0 0% 89.8039%);
-  --muted: hsl(0 0% 16.4706%);
-  --muted-foreground: hsl(0 0% 50.1961%);
-  --accent: hsl(223.6364 34.3750% 25.0980%);
-  --accent-foreground: hsl(213.3333 96.9231% 87.2549%);
-  --destructive: hsl(0 84.2365% 60.1961%);
-  --destructive-foreground: hsl(0 0% 100%);
-  --success: hsl(142.1 76.2% 36.3%);
-  --success-foreground: hsl(0 0% 100%);
-  --warning: hsl(45.4 93.4% 47.5%);
-  --warning-foreground: hsl(0 0% 10%);
-  --border: hsl(0 0% 20.7843%);
-  --input: hsl(0 0% 18.8235%);
-  --ring: hsl(13.2143 73.0435% 54.9020%);
-  --chart-1: hsl(210 37.0787% 65.0980%);
-  --chart-2: hsl(17.2500 72.7273% 56.8627%);
-  --chart-3: hsl(355.0345 63.3188% 55.0980%);
-  --chart-4: hsl(41.1538 72.8972% 58.0392%);
-  --chart-5: hsl(223.4483 32.5843% 34.9020%);
-  --sidebar: hsl(0 0% 12.1569%);
-  --sidebar-foreground: hsl(0 0% 89.8039%);
-  --sidebar-primary: hsl(13.2143 73.0435% 54.9020%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(223.6364 34.3750% 25.0980%);
-  --sidebar-accent-foreground: hsl(213.3333 96.9231% 87.2549%);
-  --sidebar-border: hsl(0 0% 20.7843%);
-  --sidebar-ring: hsl(13.2143 73.0435% 54.9020%);
-  --font-sans: "Google Sans", sans-serif;
-  --font-serif: ui-serif, Georgia, serif;
-  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: #1a1a1a;
-  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
-  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-md: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.10), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.10);
-  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.25);
-
-  /* Modus Vivendi (dark) code roles */
-  --code-comment: hsl(0 0% 66%);
-  --code-keyword: hsl(255 100% 83%);
-  --code-keyword-op: hsl(255 100% 83%);
-  --code-keyword-const: hsl(195 100% 50%);
-  --code-type: hsl(158 66% 68%);
-  --code-string: hsl(222 100% 74%);
-  --code-number: hsl(195 100% 50%);
-  --code-function: hsl(330 95% 84%);
-  --code-variable: hsl(178 100% 41%);
-  --code-builtin: hsl(309 89% 80%);
-  --code-operator: hsl(178 100% 41%);
-  --code-tag: hsl(178 100% 41%);
-  --code-diff-add: hsl(158 66% 68%);
-  --code-highlight: color-mix(in hsl, var(--accent) 65%, transparent);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/generated/cmd/parity-latte/main.php b/generated/cmd/parity-latte/main.php
deleted file mode 100644
index 9eed61d..0000000
--- a/generated/cmd/parity-latte/main.php
+++ /dev/null
@@ -1,29 +0,0 @@
-<?php
-
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-//
-// Command parity-latte renders generated .latte parts from canonical JSON.
-// stdin:  [{"template":"button/Button.latte","props":{...},"attrs":{},"children":"x"}]
-// stdout: ["<button ...>...</button>", ...]
-
-declare(strict_types=1);
-
-require __DIR__ . '/../../php/vendor/autoload.php';
-
-$engine = new Latte\Engine();
-$tmp = sys_get_temp_dir() . '/ui8kit-latte-' . md5(__DIR__);
-if (!is_dir($tmp)) {
-    mkdir($tmp, 0777, true);
-}
-$engine->setTempDirectory($tmp);
-$engine->setLoader(new Latte\Loaders\FileLoader(__DIR__ . '/../../ui'));
-
-$cases = json_decode(stream_get_contents(STDIN), true, 512, JSON_THROW_ON_ERROR);
-$out = [];
-foreach ($cases as $case) {
-    $params = (array) ($case['props'] ?? []);
-    $params['attrs'] = (array) ($case['attrs'] ?? []);
-    $params['children'] = (string) ($case['children'] ?? '');
-    $out[] = $engine->renderToString($case['template'], $params);
-}
-echo json_encode($out, JSON_THROW_ON_ERROR);
diff --git a/generated/cmd/parity-twig/main.php b/generated/cmd/parity-twig/main.php
deleted file mode 100644
index 6132942..0000000
--- a/generated/cmd/parity-twig/main.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-//
-// Command parity-twig renders generated .html.twig parts from canonical JSON.
-// stdin:  [{"template":"button/Button.html.twig","props":{...},"attrs":{},"children":"x"}]
-// stdout: ["<button ...>...</button>", ...]
-
-declare(strict_types=1);
-
-require __DIR__ . '/../../php/vendor/autoload.php';
-
-$twig = new Twig\Environment(
-    new Twig\Loader\FilesystemLoader(__DIR__ . '/../../ui'),
-    ['autoescape' => 'html', 'strict_variables' => false, 'cache' => false]
-);
-$twig->addExtension(new UI8Kit\TwigExtension());
-
-$cases = json_decode(stream_get_contents(STDIN), true, 512, JSON_THROW_ON_ERROR);
-$out = [];
-foreach ($cases as $case) {
-    $params = (array) ($case['props'] ?? []);
-    $params['attrs'] = (array) ($case['attrs'] ?? []);
-    $params['children'] = (string) ($case['children'] ?? '');
-    $out[] = $twig->render($case['template'], $params);
-}
-echo json_encode($out, JSON_THROW_ON_ERROR);
diff --git a/generated/cmd/parity/main.go b/generated/cmd/parity/main.go
deleted file mode 100644
index f02efb7..0000000
--- a/generated/cmd/parity/main.go
+++ /dev/null
@@ -1,462 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-// Command parity renders any generated part from canonical JSON props.
-// stdin:  [{"name":"button/button/Button","props":{...},"children":"<b>x</b>"}]
-// stdout: ["<button ...>...</button>", ...]
-package main
-
-import (
-	"bufio"
-	"context"
-	"encoding/json"
-	"fmt"
-	"os"
-	"strings"
-
-	"github.com/a-h/templ"
-
-	"github.com/ui8kit/ui/ui/alert"
-	"github.com/ui8kit/ui/ui/badge"
-	"github.com/ui8kit/ui/ui/block"
-	"github.com/ui8kit/ui/ui/box"
-	"github.com/ui8kit/ui/ui/breadcrumb"
-	"github.com/ui8kit/ui/ui/button"
-	"github.com/ui8kit/ui/ui/card"
-	"github.com/ui8kit/ui/ui/checkbox"
-	"github.com/ui8kit/ui/ui/container"
-	"github.com/ui8kit/ui/ui/dialog"
-	"github.com/ui8kit/ui/ui/disclosure"
-	"github.com/ui8kit/ui/ui/form"
-	"github.com/ui8kit/ui/ui/grid"
-	"github.com/ui8kit/ui/ui/group"
-	"github.com/ui8kit/ui/ui/icon"
-	"github.com/ui8kit/ui/ui/iconbadge"
-	"github.com/ui8kit/ui/ui/image"
-	"github.com/ui8kit/ui/ui/inline"
-	"github.com/ui8kit/ui/ui/input"
-	"github.com/ui8kit/ui/ui/label"
-	"github.com/ui8kit/ui/ui/linebreak"
-	"github.com/ui8kit/ui/ui/link"
-	"github.com/ui8kit/ui/ui/list"
-	"github.com/ui8kit/ui/ui/radio"
-	selectfield "github.com/ui8kit/ui/ui/select"
-	"github.com/ui8kit/ui/ui/separator"
-	"github.com/ui8kit/ui/ui/stack"
-	formswitch "github.com/ui8kit/ui/ui/switch"
-	"github.com/ui8kit/ui/ui/table"
-	"github.com/ui8kit/ui/ui/text"
-	"github.com/ui8kit/ui/ui/textarea"
-	"github.com/ui8kit/ui/ui/title"
-)
-
-type renderRequest struct {
-	Name     string          `json:"name"`
-	Props    json.RawMessage `json:"props"`
-	Children string          `json:"children"`
-}
-
-func renderCase(ctx context.Context, name string, propsJSON []byte, children templ.Component, buf *strings.Builder) error {
-	switch name {
-	case "alert/alert/Alert":
-		var p alert.AlertProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return alert.Alert(p).Render(templ.WithChildren(ctx, children), buf)
-	case "badge/badge/Badge":
-		var p badge.BadgeProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return badge.Badge(p).Render(templ.WithChildren(ctx, children), buf)
-	case "block/block/Block":
-		var p block.BlockProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return block.Block(p).Render(templ.WithChildren(ctx, children), buf)
-	case "box/box/Box":
-		var p box.BoxProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return box.Box(p).Render(templ.WithChildren(ctx, children), buf)
-	case "breadcrumb/breadcrumb/Breadcrumb":
-		var p breadcrumb.BreadcrumbProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return breadcrumb.Breadcrumb(p).Render(ctx, buf)
-	case "button/button/Button":
-		var p button.ButtonProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return button.Button(p).Render(templ.WithChildren(ctx, children), buf)
-	case "card/card/Card":
-		var p card.CardProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return card.Card(p).Render(templ.WithChildren(ctx, children), buf)
-	case "card/card/CardHeader":
-		var p card.CardHeaderProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return card.CardHeader(p).Render(templ.WithChildren(ctx, children), buf)
-	case "card/card/CardTitle":
-		var p card.CardTitleProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return card.CardTitle(p).Render(templ.WithChildren(ctx, children), buf)
-	case "card/card/CardDescription":
-		var p card.CardDescriptionProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return card.CardDescription(p).Render(templ.WithChildren(ctx, children), buf)
-	case "card/card/CardContent":
-		var p card.CardContentProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return card.CardContent(p).Render(templ.WithChildren(ctx, children), buf)
-	case "card/card/CardFooter":
-		var p card.CardFooterProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return card.CardFooter(p).Render(templ.WithChildren(ctx, children), buf)
-	case "checkbox/checkbox/Checkbox":
-		var p checkbox.CheckboxProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return checkbox.Checkbox(p).Render(ctx, buf)
-	case "container/container/Container":
-		var p container.ContainerProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return container.Container(p).Render(templ.WithChildren(ctx, children), buf)
-	case "dialog/dialog/Dialog":
-		var p dialog.DialogProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return dialog.Dialog(p).Render(templ.WithChildren(ctx, children), buf)
-	case "disclosure/disclosure/Disclosure":
-		var p disclosure.DisclosureProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return disclosure.Disclosure(p).Render(templ.WithChildren(ctx, children), buf)
-	case "disclosure/disclosure/Summary":
-		var p disclosure.SummaryProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return disclosure.Summary(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/form/Form":
-		var p form.FormProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.Form(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/form/FormItem":
-		var p form.FormItemProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.FormItem(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/form/FormDescription":
-		var p form.FormDescriptionProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.FormDescription(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/form/FormMessage":
-		var p form.FormMessageProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.FormMessage(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/controls/Fieldset":
-		var p form.FieldsetProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.Fieldset(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/controls/Legend":
-		var p form.LegendProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.Legend(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/controls/DataList":
-		var p form.DataListProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.DataList(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/controls/DataOption":
-		var p form.DataOptionProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.DataOption(p).Render(ctx, buf)
-	case "form/controls/Output":
-		var p form.OutputProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.Output(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/controls/Meter":
-		var p form.MeterProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.Meter(p).Render(templ.WithChildren(ctx, children), buf)
-	case "form/controls/Progress":
-		var p form.ProgressProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return form.Progress(p).Render(templ.WithChildren(ctx, children), buf)
-	case "grid/grid/Grid":
-		var p grid.GridProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return grid.Grid(p).Render(templ.WithChildren(ctx, children), buf)
-	case "grid/grid/GridCol":
-		var p grid.GridColProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return grid.GridCol(p).Render(templ.WithChildren(ctx, children), buf)
-	case "group/group/Group":
-		var p group.GroupProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return group.Group(p).Render(templ.WithChildren(ctx, children), buf)
-	case "icon/icon/Icon":
-		var p icon.IconProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return icon.Icon(p).Render(templ.WithChildren(ctx, children), buf)
-	case "iconbadge/iconbadge/IconBadge":
-		var p iconbadge.IconBadgeProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return iconbadge.IconBadge(p).Render(templ.WithChildren(ctx, children), buf)
-	case "image/image/Image":
-		var p image.ImageProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return image.Image(p).Render(ctx, buf)
-	case "image/image/Picture":
-		var p image.PictureProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return image.Picture(p).Render(templ.WithChildren(ctx, children), buf)
-	case "image/image/Source":
-		var p image.SourceProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return image.Source(p).Render(ctx, buf)
-	case "inline/inline/Inline":
-		var p inline.InlineProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return inline.Inline(p).Render(templ.WithChildren(ctx, children), buf)
-	case "input/input/Input":
-		var p input.InputProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return input.Input(p).Render(ctx, buf)
-	case "label/label/Label":
-		var p label.LabelProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return label.Label(p).Render(templ.WithChildren(ctx, children), buf)
-	case "linebreak/linebreak/Break":
-		var p linebreak.BreakProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return linebreak.Break(p).Render(ctx, buf)
-	case "link/link/Link":
-		var p link.LinkProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return link.Link(p).Render(templ.WithChildren(ctx, children), buf)
-	case "list/list/List":
-		var p list.ListProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return list.List(p).Render(templ.WithChildren(ctx, children), buf)
-	case "list/list/ListItem":
-		var p list.ListItemProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return list.ListItem(p).Render(templ.WithChildren(ctx, children), buf)
-	case "radio/radio/Radio":
-		var p radio.RadioProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return radio.Radio(p).Render(ctx, buf)
-	case "select/select/Select":
-		var p selectfield.SelectProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return selectfield.Select(p).Render(templ.WithChildren(ctx, children), buf)
-	case "select/select/SelectOption":
-		var p selectfield.SelectOptionProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return selectfield.SelectOption(p).Render(templ.WithChildren(ctx, children), buf)
-	case "select/select/OptGroup":
-		var p selectfield.OptGroupProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return selectfield.OptGroup(p).Render(templ.WithChildren(ctx, children), buf)
-	case "separator/separator/Separator":
-		var p separator.SeparatorProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return separator.Separator(p).Render(ctx, buf)
-	case "stack/stack/Stack":
-		var p stack.StackProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return stack.Stack(p).Render(templ.WithChildren(ctx, children), buf)
-	case "switch/switch/Switch":
-		var p formswitch.SwitchProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return formswitch.Switch(p).Render(ctx, buf)
-	case "table/table/Table":
-		var p table.TableProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.Table(p).Render(templ.WithChildren(ctx, children), buf)
-	case "table/table/TableCaption":
-		var p table.TableCaptionProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.TableCaption(p).Render(templ.WithChildren(ctx, children), buf)
-	case "table/table/TableHead":
-		var p table.TableHeadProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.TableHead(p).Render(templ.WithChildren(ctx, children), buf)
-	case "table/table/TableBody":
-		var p table.TableBodyProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.TableBody(p).Render(templ.WithChildren(ctx, children), buf)
-	case "table/table/TableFoot":
-		var p table.TableFootProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.TableFoot(p).Render(templ.WithChildren(ctx, children), buf)
-	case "table/table/TableRow":
-		var p table.TableRowProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.TableRow(p).Render(templ.WithChildren(ctx, children), buf)
-	case "table/table/TableHeadCell":
-		var p table.TableHeadCellProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.TableHeadCell(p).Render(templ.WithChildren(ctx, children), buf)
-	case "table/table/TableCell":
-		var p table.TableCellProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.TableCell(p).Render(templ.WithChildren(ctx, children), buf)
-	case "table/table/TableColGroup":
-		var p table.TableColGroupProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.TableColGroup(p).Render(templ.WithChildren(ctx, children), buf)
-	case "table/table/TableCol":
-		var p table.TableColProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return table.TableCol(p).Render(ctx, buf)
-	case "text/text/Text":
-		var p text.TextProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return text.Text(p).Render(templ.WithChildren(ctx, children), buf)
-	case "textarea/textarea/Textarea":
-		var p textarea.TextareaProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return textarea.Textarea(p).Render(ctx, buf)
-	case "title/title/Title":
-		var p title.TitleProps
-		if err := json.Unmarshal(propsJSON, &p); err != nil {
-			return err
-		}
-		return title.Title(p).Render(templ.WithChildren(ctx, children), buf)
-	}
-	return fmt.Errorf("unknown case %q", name)
-}
-
-func main() {
-	var requests []renderRequest
-	if err := json.NewDecoder(bufio.NewReader(os.Stdin)).Decode(&requests); err != nil {
-		fmt.Fprintln(os.Stderr, err)
-		os.Exit(1)
-	}
-	results := make([]string, 0, len(requests))
-	for _, req := range requests {
-		var buf strings.Builder
-		children := templ.Raw(req.Children)
-		if err := renderCase(context.Background(), req.Name, req.Props, children, &buf); err != nil {
-			fmt.Fprintf(os.Stderr, "%s: %v\n", req.Name, err)
-			os.Exit(1)
-		}
-		results = append(results, buf.String())
-	}
-	if err := json.NewEncoder(os.Stdout).Encode(results); err != nil {
-		fmt.Fprintln(os.Stderr, err)
-		os.Exit(1)
-	}
-}
diff --git a/generated/composer.json b/generated/composer.json
deleted file mode 100644
index 9654feb..0000000
--- a/generated/composer.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "description": "Generated UI8Kit PHP runtimes (Latte + Twig). Do not edit.",
-  "config": {
-    "vendor-dir": "php/vendor"
-  },
-  "require": {
-    "php": ">=8.1",
-    "latte/latte": "^3.0",
-    "twig/twig": "^3.0"
-  },
-  "autoload": {
-    "psr-4": {
-      "UI8Kit\\": "php/UI8Kit/"
-    }
-  }
-}
diff --git a/generated/composer.lock b/generated/composer.lock
deleted file mode 100644
index 98fd640..0000000
--- a/generated/composer.lock
+++ /dev/null
@@ -1,431 +0,0 @@
-{
-    "_readme": [
-        "This file locks the dependencies of your project to a known state",
-        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
-        "This file is @generated automatically"
-    ],
-    "content-hash": "e50ead6fd841707ba46459723d1eeeeb",
-    "packages": [
-        {
-            "name": "latte/latte",
-            "version": "v3.1.4",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/nette/latte.git",
-                "reference": "14dea9fc32c0d1cf5e9a1bd59556ae8be023c2a6"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/nette/latte/zipball/14dea9fc32c0d1cf5e9a1bd59556ae8be023c2a6",
-                "reference": "14dea9fc32c0d1cf5e9a1bd59556ae8be023c2a6",
-                "shasum": ""
-            },
-            "require": {
-                "ext-json": "*",
-                "ext-tokenizer": "*",
-                "php": "8.2 - 8.5"
-            },
-            "conflict": {
-                "nette/application": "<3.1.7",
-                "nette/caching": "<3.1.4"
-            },
-            "require-dev": {
-                "nette/php-generator": "^4.0",
-                "nette/phpstan-rules": "^1.0",
-                "nette/tester": "^2.6",
-                "nette/utils": "^4.0",
-                "phpstan/extension-installer": "^1.4@stable",
-                "phpstan/phpstan": "^2.1@stable",
-                "tracy/tracy": "^2.10"
-            },
-            "suggest": {
-                "ext-fileinfo": "to use filter |datastream",
-                "ext-iconv": "to use filters |reverse, |substring",
-                "ext-intl": "to use Latte\\Engine::setLocale()",
-                "ext-mbstring": "to use filters like lower, upper, capitalize, ...",
-                "nette/php-generator": "to use tag {templatePrint}",
-                "nette/utils": "to use filter |webalize"
-            },
-            "bin": [
-                "bin/latte-lint"
-            ],
-            "type": "library",
-            "extra": {
-                "branch-alias": {
-                    "dev-master": "3.1-dev"
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Latte\\": "src/Latte"
-                },
-                "classmap": [
-                    "src/"
-                ]
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause",
-                "GPL-2.0-only",
-                "GPL-3.0-only"
-            ],
-            "authors": [
-                {
-                    "name": "David Grudl",
-                    "homepage": "https://davidgrudl.com"
-                },
-                {
-                    "name": "Nette Community",
-                    "homepage": "https://nette.org/contributors"
-                }
-            ],
-            "description": "☕ Latte: the intuitive and fast template engine for those who want the most secure PHP sites. Introduces context-sensitive escaping.",
-            "homepage": "https://latte.nette.org",
-            "keywords": [
-                "context-sensitive",
-                "engine",
-                "escaping",
-                "html",
-                "nette",
-                "security",
-                "template",
-                "twig"
-            ],
-            "support": {
-                "issues": "https://github.com/nette/latte/issues",
-                "source": "https://github.com/nette/latte/tree/v3.1.4"
-            },
-            "time": "2026-04-23T06:30:25+00:00"
-        },
-        {
-            "name": "symfony/deprecation-contracts",
-            "version": "v3.7.1",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/deprecation-contracts.git",
-                "reference": "f3202fa1b5097b0af062dc978b32ecf63404e31d"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/deprecation-contracts/zipball/f3202fa1b5097b0af062dc978b32ecf63404e31d",
-                "reference": "f3202fa1b5097b0af062dc978b32ecf63404e31d",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=8.1"
-            },
-            "type": "library",
-            "extra": {
-                "thanks": {
-                    "url": "https://github.com/symfony/contracts",
-                    "name": "symfony/contracts"
-                },
-                "branch-alias": {
-                    "dev-main": "3.7-dev"
-                }
-            },
-            "autoload": {
-                "files": [
-                    "function.php"
-                ]
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Nicolas Grekas",
-                    "email": "p@tchwork.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "A generic function and convention to trigger deprecation notices",
-            "homepage": "https://symfony.com",
-            "support": {
-                "source": "https://github.com/symfony/deprecation-contracts/tree/v3.7.1"
-            },
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://github.com/nicolas-grekas",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2026-06-05T06:23:12+00:00"
-        },
-        {
-            "name": "symfony/polyfill-ctype",
-            "version": "v1.37.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/polyfill-ctype.git",
-                "reference": "141046a8f9477948ff284fa65be2095baafb94f2"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/141046a8f9477948ff284fa65be2095baafb94f2",
-                "reference": "141046a8f9477948ff284fa65be2095baafb94f2",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=7.2"
-            },
-            "provide": {
-                "ext-ctype": "*"
-            },
-            "suggest": {
-                "ext-ctype": "For best performance"
-            },
-            "type": "library",
-            "extra": {
-                "thanks": {
-                    "url": "https://github.com/symfony/polyfill",
-                    "name": "symfony/polyfill"
-                }
-            },
-            "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
-                "psr-4": {
-                    "Symfony\\Polyfill\\Ctype\\": ""
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Gert de Pagter",
-                    "email": "BackEndTea@gmail.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Symfony polyfill for ctype functions",
-            "homepage": "https://symfony.com",
-            "keywords": [
-                "compatibility",
-                "ctype",
-                "polyfill",
-                "portable"
-            ],
-            "support": {
-                "source": "https://github.com/symfony/polyfill-ctype/tree/v1.37.0"
-            },
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://github.com/nicolas-grekas",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2026-04-10T16:19:22+00:00"
-        },
-        {
-            "name": "symfony/polyfill-mbstring",
-            "version": "v1.38.2",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/polyfill-mbstring.git",
-                "reference": "d3d318bad5e7a1bfbd026009c8bfb8d8f99ae6b6"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/d3d318bad5e7a1bfbd026009c8bfb8d8f99ae6b6",
-                "reference": "d3d318bad5e7a1bfbd026009c8bfb8d8f99ae6b6",
-                "shasum": ""
-            },
-            "require": {
-                "ext-iconv": "*",
-                "php": ">=7.2"
-            },
-            "provide": {
-                "ext-mbstring": "*"
-            },
-            "suggest": {
-                "ext-mbstring": "For best performance"
-            },
-            "type": "library",
-            "extra": {
-                "thanks": {
-                    "url": "https://github.com/symfony/polyfill",
-                    "name": "symfony/polyfill"
-                }
-            },
-            "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
-                "psr-4": {
-                    "Symfony\\Polyfill\\Mbstring\\": ""
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Nicolas Grekas",
-                    "email": "p@tchwork.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Symfony polyfill for the Mbstring extension",
-            "homepage": "https://symfony.com",
-            "keywords": [
-                "compatibility",
-                "mbstring",
-                "polyfill",
-                "portable",
-                "shim"
-            ],
-            "support": {
-                "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.38.2"
-            },
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://github.com/nicolas-grekas",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2026-05-27T06:59:30+00:00"
-        },
-        {
-            "name": "twig/twig",
-            "version": "v3.28.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/twigphp/Twig.git",
-                "reference": "597c12ed286fb9d1701a36684ce6e0cbe28ebc8b"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/twigphp/Twig/zipball/597c12ed286fb9d1701a36684ce6e0cbe28ebc8b",
-                "reference": "597c12ed286fb9d1701a36684ce6e0cbe28ebc8b",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=8.1.0",
-                "symfony/deprecation-contracts": "^2.5|^3",
-                "symfony/polyfill-ctype": "^1.8",
-                "symfony/polyfill-mbstring": "^1.3"
-            },
-            "require-dev": {
-                "php-cs-fixer/shim": "^3.0@stable",
-                "phpstan/phpstan": "^2.0@stable",
-                "psr/container": "^1.0|^2.0",
-                "symfony/phpunit-bridge": "^5.4.9|^6.4|^7.0"
-            },
-            "type": "library",
-            "autoload": {
-                "files": [
-                    "src/Resources/core.php",
-                    "src/Resources/debug.php",
-                    "src/Resources/escaper.php",
-                    "src/Resources/string_loader.php"
-                ],
-                "psr-4": {
-                    "Twig\\": "src/"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
-            "authors": [
-                {
-                    "name": "Fabien Potencier",
-                    "email": "fabien@symfony.com",
-                    "homepage": "http://fabien.potencier.org",
-                    "role": "Lead Developer"
-                },
-                {
-                    "name": "Twig Team",
-                    "role": "Contributors"
-                },
-                {
-                    "name": "Armin Ronacher",
-                    "email": "armin.ronacher@active-4.com",
-                    "role": "Project Founder"
-                }
-            ],
-            "description": "Twig, the flexible, fast, and secure template language for PHP",
-            "homepage": "https://twig.symfony.com",
-            "keywords": [
-                "templating"
-            ],
-            "support": {
-                "issues": "https://github.com/twigphp/Twig/issues",
-                "source": "https://github.com/twigphp/Twig/tree/v3.28.0"
-            },
-            "funding": [
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2026-07-03T20:44:34+00:00"
-        }
-    ],
-    "packages-dev": [],
-    "aliases": [],
-    "minimum-stability": "stable",
-    "stability-flags": {},
-    "prefer-stable": false,
-    "prefer-lowest": false,
-    "platform": {
-        "php": ">=8.1"
-    },
-    "platform-dev": {},
-    "plugin-api-version": "2.9.0"
-}
diff --git a/generated/go.mod b/generated/go.mod
deleted file mode 100644
index 0e09bd6..0000000
--- a/generated/go.mod
+++ /dev/null
@@ -1,5 +0,0 @@
-module github.com/ui8kit/ui
-
-go 1.23.0
-
-require github.com/a-h/templ v0.3.1001
diff --git a/generated/go.sum b/generated/go.sum
deleted file mode 100644
index bcce387..0000000
--- a/generated/go.sum
+++ /dev/null
@@ -1,4 +0,0 @@
-github.com/a-h/templ v0.3.1001 h1:yHDTgexACdJttyiyamcTHXr2QkIeVF1MukLy44EAhMY=
-github.com/a-h/templ v0.3.1001/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
-github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
-github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
diff --git a/generated/php/UI8Kit/Classes.php b/generated/php/UI8Kit/Classes.php
deleted file mode 100644
index 1476b43..0000000
--- a/generated/php/UI8Kit/Classes.php
+++ /dev/null
@@ -1,410 +0,0 @@
-<?php
-
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-declare(strict_types=1);
-
-namespace UI8Kit;
-
-final class Classes
-{
-    private const ALERT_ALERT = ['base' => 'rounded-lg border px-4 py-3 shadow-sm outline-none ring-offset-background gap-6', 'keys' => ['variant'], 'defaults' => ['variant' => 'default'], 'byKey' => ['variant' => ['default' => 'bg-card text-card-foreground', 'destructive' => 'border-destructive bg-destructive/10 text-destructive', 'success' => 'border-primary bg-primary/10 text-primary', 'warning' => 'border-border bg-accent text-accent-foreground']]];
-    private const BADGE_BADGE = ['base' => 'inline-flex items-center rounded-full border px-2 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'px-2 py-1 text-xs', 'lg' => 'px-3 py-1 text-sm', 'sm' => 'px-2 py-1 text-xs'], 'variant' => ['default' => 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', 'destructive' => 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', 'outline' => 'text-foreground', 'secondary' => 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80']]];
-    private const BLOCK_BLOCK = ['base' => '', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const BOX_BOX = ['base' => '', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const BUTTON_BUTTON = ['base' => 'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'h-9 px-4 py-2', 'icon' => 'h-9 w-9', 'lg' => 'h-10 rounded-md px-6', 'sm' => 'h-8 gap-1.5 rounded-md px-3'], 'variant' => ['default' => 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90', 'destructive' => 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90', 'ghost' => 'hover:bg-accent hover:text-accent-foreground', 'link' => 'text-primary underline-offset-4 hover:underline', 'outline' => 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground', 'secondary' => 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80']]];
-    private const CARD_CARD = ['base' => 'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm', 'keys' => ['variant'], 'defaults' => ['variant' => 'default'], 'byKey' => ['variant' => ['default' => '', 'raised' => '', 'kpi' => 'bg-card/50', 'muted' => 'bg-muted/40', 'ghost' => 'border-dashed bg-background shadow-none', 'compact' => 'p-4', 'flat' => 'shadow-none', 'accent' => 'border-transparent bg-accent/30']]];
-    private const CHECKBOX_CHECKBOX = ['base' => 'rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'h-4 w-4', 'lg' => 'h-5 w-5', 'sm' => 'h-4 w-4', 'xs' => 'h-3 w-3'], 'variant' => ['default' => 'border-primary', 'ghost' => 'border-primary bg-muted/30', 'outline' => 'border-primary']]];
-    private const CONTAINER_CONTAINER = ['base' => '', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const DIALOG_DIALOG = ['base' => 'm-auto rounded-lg border border-border bg-background text-foreground shadow-lg backdrop:bg-background/80', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'w-full max-w-lg', 'full' => 'h-full w-full max-w-none', 'lg' => 'w-full max-w-2xl', 'sm' => 'w-full max-w-sm', 'xl' => 'w-full max-w-4xl'], 'variant' => ['card' => 'bg-card text-card-foreground', 'default' => '', 'sheet' => 'min-h-screen rounded-none']]];
-    private const DISCLOSURE_DISCLOSURE = ['base' => 'group', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'text-sm', 'lg' => 'text-base', 'sm' => 'text-sm'], 'variant' => ['card' => 'rounded-md border border-border bg-card text-card-foreground', 'default' => 'rounded-md border border-border', 'ghost' => '']]];
-    private const DISCLOSURE_SUMMARY = ['base' => 'flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'text-sm', 'lg' => 'text-base', 'sm' => 'text-sm'], 'variant' => ['card' => 'px-4 py-3 font-medium', 'default' => 'px-4 py-3 font-medium', 'ghost' => 'py-2 font-medium']]];
-    private const FORM_FORM = ['base' => '', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const FORM_FORM_ITEM = ['base' => 'grid gap-2', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const FORM_FORM_DESCRIPTION = ['base' => 'text-xs text-muted-foreground', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const FORM_FORM_MESSAGE = ['base' => 'text-sm font-medium text-destructive', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const CONTROLS_FIELDSET = ['base' => 'grid gap-4', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'gap-4', 'lg' => 'gap-6', 'sm' => 'gap-2'], 'variant' => ['card' => 'rounded-md border border-border p-4', 'default' => '', 'inline' => 'flex flex-wrap items-start gap-4']]];
-    private const CONTROLS_LEGEND = ['base' => 'text-sm font-medium', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'text-sm', 'lg' => 'text-base', 'sm' => 'text-xs'], 'variant' => ['default' => '', 'muted' => 'text-muted-foreground']]];
-    private const CONTROLS_METER = ['base' => 'h-2 w-full', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'h-2', 'lg' => 'h-3', 'sm' => 'h-1'], 'variant' => ['default' => 'accent-primary', 'muted' => 'accent-muted-foreground']]];
-    private const CONTROLS_PROGRESS = ['base' => 'h-2 w-full', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'h-2', 'lg' => 'h-3', 'sm' => 'h-1'], 'variant' => ['default' => 'accent-primary', 'muted' => 'accent-muted-foreground']]];
-    private const GRID_GRID = ['base' => 'grid', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const GROUP_GROUP = ['base' => 'flex items-center', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const ICON_ICON = ['base' => 'inline-block shrink-0', 'keys' => ['type', 'size'], 'defaults' => ['size' => 'default', 'type' => 'class'], 'byKey' => ['size' => ['default' => 'h-4 w-4', 'lg' => 'h-6 w-6', 'md' => 'h-5 w-5', 'sm' => 'h-4 w-4', 'xl' => 'h-8 w-8', 'xs' => 'h-3 w-3'], 'type' => ['class' => '', 'svg' => '', 'text' => '']]];
-    private const ICONBADGE_ICONBADGE = ['base' => 'inline-flex shrink-0 items-center justify-center rounded-md font-semibold', 'keys' => ['variant', 'size'], 'defaults' => ['variant' => 'default', 'size' => 'default'], 'byKey' => ['variant' => ['default' => 'bg-muted text-muted-foreground', 'accent' => 'bg-accent text-accent-foreground', 'secondary' => 'bg-secondary text-secondary-foreground', 'outline' => 'border border-border text-foreground', 'destructive' => 'bg-destructive text-destructive-foreground'], 'size' => ['xs' => 'h-6 w-6 text-xs', 'sm' => 'h-8 w-8 text-xs', 'default' => 'h-10 w-10 text-sm', 'lg' => 'h-12 w-12 text-base']]];
-    private const IMAGE_IMAGE = ['base' => 'block max-w-full', 'keys' => ['variant', 'size', 'fit', 'position', 'aspect'], 'defaults' => ['aspect' => 'auto', 'fit' => 'cover', 'position' => 'center', 'size' => 'auto', 'variant' => 'default'], 'byKey' => ['aspect' => ['auto' => 'aspect-auto', 'square' => 'aspect-square', 'video' => 'aspect-video'], 'fit' => ['contain' => 'object-contain', 'cover' => 'object-cover', 'fill' => 'object-fill', 'none' => 'object-none', 'scale-down' => 'object-scale-down'], 'position' => ['bottom' => 'object-bottom', 'center' => 'object-center', 'left' => 'object-left', 'left-bottom' => 'object-left-bottom', 'left-top' => 'object-left-top', 'right' => 'object-right', 'right-bottom' => 'object-right-bottom', 'right-top' => 'object-right-top', 'top' => 'object-top'], 'size' => ['auto' => '', 'default' => '', 'full' => 'h-full w-full', 'lg' => 'h-16 w-16', 'md' => 'h-12 w-12', 'sm' => 'h-8 w-8', 'xl' => 'h-24 w-24', 'xs' => 'h-6 w-6'], 'variant' => ['avatar' => 'rounded-full', 'default' => '', 'logo' => 'object-contain', 'rounded' => 'rounded-md', 'thumbnail' => 'rounded-md border border-border']]];
-    private const INLINE_INLINE = ['base' => '', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const INPUT_INPUT = ['base' => 'w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'h-10 px-3 py-2 text-sm', 'lg' => 'h-12 px-4 text-base', 'sm' => 'h-8 px-3 text-sm', 'xs' => 'h-8 px-2 text-xs'], 'variant' => ['default' => 'border-border bg-background', 'ghost' => 'border-transparent bg-muted', 'outline' => 'border-border bg-background']]];
-    private const LABEL_LABEL = ['base' => 'text-sm font-medium leading-none', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const LINEBREAK_LINEBREAK = ['base' => '', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const LINK_LINK = ['base' => 'inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'text-sm', 'lg' => 'text-lg', 'md' => 'text-base', 'sm' => 'text-sm'], 'variant' => ['block' => 'flex w-full text-foreground hover:text-primary', 'default' => 'text-primary hover:underline', 'external' => 'text-primary hover:underline', 'muted' => 'text-muted-foreground hover:text-foreground hover:underline', 'nav' => 'text-foreground hover:text-primary']]];
-    private const LIST_LIST = ['base' => '', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const RADIO_RADIO = ['base' => 'rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'h-4 w-4', 'lg' => 'h-5 w-5', 'sm' => 'h-4 w-4', 'xs' => 'h-3 w-3'], 'variant' => ['default' => 'border-primary', 'ghost' => 'border-primary bg-muted/30', 'outline' => 'border-primary']]];
-    private const SELECT_SELECT = ['base' => 'w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'h-10 px-3 py-2 text-sm', 'lg' => 'h-12 px-4 text-base', 'sm' => 'h-8 px-3 text-sm', 'xs' => 'h-8 px-2 text-xs'], 'variant' => ['default' => 'border-border bg-background', 'ghost' => 'border-transparent bg-muted', 'outline' => 'border-border bg-background']]];
-    private const SEPARATOR_SEPARATOR = ['base' => 'shrink-0 border-0 bg-border', 'keys' => ['orientation', 'variant'], 'defaults' => ['orientation' => 'horizontal', 'variant' => 'default'], 'byKey' => ['orientation' => ['horizontal' => 'h-px w-full', 'vertical' => 'h-full w-px'], 'variant' => ['default' => '', 'muted' => 'bg-muted', 'spaced' => 'my-4', 'strong' => 'bg-foreground']]];
-    private const STACK_STACK = ['base' => 'flex flex-col', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const SWITCH_SWITCH = ['base' => 'rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'h-4 w-4', 'lg' => 'h-5 w-5', 'sm' => 'h-4 w-4', 'xs' => 'h-3 w-3'], 'variant' => ['default' => 'border-primary', 'ghost' => 'border-primary bg-muted/30', 'outline' => 'border-primary']]];
-    private const TABLE_TABLE = ['base' => 'w-full caption-bottom text-sm', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const TEXT_TEXT = ['base' => '', 'keys' => [], 'defaults' => [], 'byKey' => []];
-    private const TEXTAREA_TEXTAREA = ['base' => 'w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'keys' => ['variant', 'size'], 'defaults' => ['size' => 'default', 'variant' => 'default'], 'byKey' => ['size' => ['default' => 'h-10 px-3 py-2 text-sm', 'lg' => 'h-12 px-4 text-base', 'sm' => 'h-8 px-3 text-sm', 'xs' => 'h-8 px-2 text-xs'], 'variant' => ['default' => 'border-border bg-background', 'ghost' => 'border-transparent bg-muted', 'outline' => 'border-border bg-background']]];
-    private const TITLE_TITLE = ['base' => '', 'keys' => [], 'defaults' => [], 'byKey' => []];
-
-    /** Alert class composition — the server-side asChild substitute. */
-    public static function alertClasses(array $in = []): string
-    {
-        return Rt::compose(self::ALERT_ALERT, ['variant' => (string) ($in['variant'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Badge class composition — the server-side asChild substitute. */
-    public static function badgeClasses(array $in = []): string
-    {
-        return Rt::compose(self::BADGE_BADGE, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Block class composition — the server-side asChild substitute. */
-    public static function blockClasses(array $in = []): string
-    {
-        return Rt::compose(self::BLOCK_BLOCK, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Box class composition — the server-side asChild substitute. */
-    public static function boxClasses(array $in = []): string
-    {
-        return Rt::compose(self::BOX_BOX, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Breadcrumb class composition — the server-side asChild substitute. */
-    public static function breadcrumbClasses(array $in = []): string
-    {
-        return Rt::cn('text-sm', (string) ($in['class'] ?? ''));
-    }
-
-    /** Button class composition — the server-side asChild substitute. */
-    public static function buttonClasses(array $in = []): string
-    {
-        return Rt::compose(self::BUTTON_BUTTON, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (((bool) ($in['disabled'] ?? false)) ? 'pointer-events-none opacity-50' : ''), (string) ($in['class'] ?? ''));
-    }
-
-    /** Card class composition — the server-side asChild substitute. */
-    public static function cardClasses(array $in = []): string
-    {
-        return Rt::compose(self::CARD_CARD, ['variant' => (string) ($in['variant'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** CardHeader class composition — the server-side asChild substitute. */
-    public static function cardHeaderClasses(array $in = []): string
-    {
-        return Rt::cn('grid auto-rows-min items-start gap-1.5 px-6', (string) ($in['class'] ?? ''));
-    }
-
-    /** CardTitle class composition — the server-side asChild substitute. */
-    public static function cardTitleClasses(array $in = []): string
-    {
-        return Rt::cn('font-semibold leading-none', (string) ($in['class'] ?? ''));
-    }
-
-    /** CardDescription class composition — the server-side asChild substitute. */
-    public static function cardDescriptionClasses(array $in = []): string
-    {
-        return Rt::cn('text-sm text-muted-foreground', (string) ($in['class'] ?? ''));
-    }
-
-    /** CardContent class composition — the server-side asChild substitute. */
-    public static function cardContentClasses(array $in = []): string
-    {
-        return Rt::cn('px-6', (string) ($in['class'] ?? ''));
-    }
-
-    /** CardFooter class composition — the server-side asChild substitute. */
-    public static function cardFooterClasses(array $in = []): string
-    {
-        return Rt::cn('flex items-center px-6', (string) ($in['class'] ?? ''));
-    }
-
-    /** Checkbox class composition — the server-side asChild substitute. */
-    public static function checkboxClasses(array $in = []): string
-    {
-        return Rt::compose(self::CHECKBOX_CHECKBOX, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Container class composition — the server-side asChild substitute. */
-    public static function containerClasses(array $in = []): string
-    {
-        return Rt::compose(self::CONTAINER_CONTAINER, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Dialog class composition — the server-side asChild substitute. */
-    public static function dialogClasses(array $in = []): string
-    {
-        return Rt::compose(self::DIALOG_DIALOG, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Disclosure class composition — the server-side asChild substitute. */
-    public static function disclosureClasses(array $in = []): string
-    {
-        return Rt::compose(self::DISCLOSURE_DISCLOSURE, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Summary class composition — the server-side asChild substitute. */
-    public static function summaryClasses(array $in = []): string
-    {
-        return Rt::compose(self::DISCLOSURE_SUMMARY, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Form class composition — the server-side asChild substitute. */
-    public static function formClasses(array $in = []): string
-    {
-        return Rt::compose(self::FORM_FORM, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** FormItem class composition — the server-side asChild substitute. */
-    public static function formItemClasses(array $in = []): string
-    {
-        return Rt::compose(self::FORM_FORM_ITEM, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** FormDescription class composition — the server-side asChild substitute. */
-    public static function formDescriptionClasses(array $in = []): string
-    {
-        return Rt::compose(self::FORM_FORM_DESCRIPTION, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** FormMessage class composition — the server-side asChild substitute. */
-    public static function formMessageClasses(array $in = []): string
-    {
-        return Rt::compose(self::FORM_FORM_MESSAGE, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Fieldset class composition — the server-side asChild substitute. */
-    public static function fieldsetClasses(array $in = []): string
-    {
-        return Rt::compose(self::CONTROLS_FIELDSET, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Legend class composition — the server-side asChild substitute. */
-    public static function legendClasses(array $in = []): string
-    {
-        return Rt::compose(self::CONTROLS_LEGEND, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** DataList class composition — the server-side asChild substitute. */
-    public static function dataListClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** Output class composition — the server-side asChild substitute. */
-    public static function outputClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** Meter class composition — the server-side asChild substitute. */
-    public static function meterClasses(array $in = []): string
-    {
-        return Rt::compose(self::CONTROLS_METER, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Progress class composition — the server-side asChild substitute. */
-    public static function progressClasses(array $in = []): string
-    {
-        return Rt::compose(self::CONTROLS_PROGRESS, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Grid class composition — the server-side asChild substitute. */
-    public static function gridClasses(array $in = []): string
-    {
-        return Rt::compose(self::GRID_GRID, [], ((str_contains((string) ($in['class'] ?? ''), 'grid-cols-')) ? '' : \UI8Kit\Rt::mapOr(\UI8Kit\Rt::defaultIfEmpty((string) ($in['cols'] ?? ''), '1'), ['1' => 'grid-cols-1', '2' => 'grid-cols-2', '3' => 'grid-cols-3', '4' => 'grid-cols-4', '5' => 'grid-cols-5', '6' => 'grid-cols-6', '7' => 'grid-cols-7', '8' => 'grid-cols-8', '9' => 'grid-cols-9', '10' => 'grid-cols-10', '11' => 'grid-cols-11', '12' => 'grid-cols-12', '1-2' => 'grid-cols-1 md:grid-cols-2', '1-3' => 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3', '1-4' => 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4'], '')), (string) ($in['class'] ?? ''));
-    }
-
-    /** GridCol class composition — the server-side asChild substitute. */
-    public static function gridColClasses(array $in = []): string
-    {
-        return Rt::cn(\UI8Kit\Rt::intMapOr((int) ($in['span'] ?? 0), [1 => 'col-span-1', 2 => 'col-span-2', 3 => 'col-span-3', 4 => 'col-span-4', 5 => 'col-span-5', 6 => 'col-span-6', 7 => 'col-span-7', 8 => 'col-span-8', 9 => 'col-span-9', 10 => 'col-span-10', 11 => 'col-span-11', 12 => 'col-span-12'], ''), \UI8Kit\Rt::intMapOr((int) ($in['start'] ?? 0), [1 => 'col-start-1', 2 => 'col-start-2', 3 => 'col-start-3', 4 => 'col-start-4', 5 => 'col-start-5', 6 => 'col-start-6', 7 => 'col-start-7', 8 => 'col-start-8', 9 => 'col-start-9', 10 => 'col-start-10', 11 => 'col-start-11', 12 => 'col-start-12'], ''), \UI8Kit\Rt::intMapOr((int) ($in['end'] ?? 0), [1 => 'col-end-1', 2 => 'col-end-2', 3 => 'col-end-3', 4 => 'col-end-4', 5 => 'col-end-5', 6 => 'col-end-6', 7 => 'col-end-7', 8 => 'col-end-8', 9 => 'col-end-9', 10 => 'col-end-10', 11 => 'col-end-11', 12 => 'col-end-12'], ''), \UI8Kit\Rt::intMapOr((int) ($in['order'] ?? 0), [1 => 'order-1', 2 => 'order-2', 3 => 'order-3', 4 => 'order-4', 5 => 'order-5', 6 => 'order-6', 7 => 'order-7', 8 => 'order-8', 9 => 'order-9', 10 => 'order-10', 11 => 'order-11', 12 => 'order-12'], ''), (string) ($in['class'] ?? ''));
-    }
-
-    /** Group class composition — the server-side asChild substitute. */
-    public static function groupClasses(array $in = []): string
-    {
-        return Rt::compose(self::GROUP_GROUP, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Icon class composition — the server-side asChild substitute. */
-    public static function iconClasses(array $in = []): string
-    {
-        return Rt::compose(self::ICON_ICON, ['type' => \UI8Kit\Rt::oneOfOr((string) ($in['type'] ?? ''), 'class', 'svg', 'text'), 'size' => (string) ($in['size'] ?? '')], (((\UI8Kit\Rt::oneOfOr((string) ($in['type'] ?? ''), 'class', 'svg', 'text') === 'class')) ? (string) ($in['baseClass'] ?? '') : ''), ((((\UI8Kit\Rt::oneOfOr((string) ($in['type'] ?? ''), 'class', 'svg', 'text') === 'class') && \UI8Kit\Rt::isSetStr((string) ($in['name'] ?? '')))) ? \UI8Kit\Rt::concatTrim((string) ($in['prefix'] ?? ''), (string) ($in['name'] ?? '')) : ''), (string) ($in['class'] ?? ''));
-    }
-
-    /** IconBadge class composition — the server-side asChild substitute. */
-    public static function iconBadgeClasses(array $in = []): string
-    {
-        return Rt::compose(self::ICONBADGE_ICONBADGE, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Image class composition — the server-side asChild substitute. */
-    public static function imageClasses(array $in = []): string
-    {
-        return Rt::compose(self::IMAGE_IMAGE, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? ''), 'fit' => (string) ($in['fit'] ?? ''), 'position' => (string) ($in['position'] ?? ''), 'aspect' => (string) ($in['aspect'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Picture class composition — the server-side asChild substitute. */
-    public static function pictureClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** Inline class composition — the server-side asChild substitute. */
-    public static function inlineClasses(array $in = []): string
-    {
-        return Rt::compose(self::INLINE_INLINE, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Input class composition — the server-side asChild substitute. */
-    public static function inputClasses(array $in = []): string
-    {
-        return Rt::compose(self::INPUT_INPUT, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Label class composition — the server-side asChild substitute. */
-    public static function labelClasses(array $in = []): string
-    {
-        return Rt::compose(self::LABEL_LABEL, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Break class composition — the server-side asChild substitute. */
-    public static function breakClasses(array $in = []): string
-    {
-        return Rt::compose(self::LINEBREAK_LINEBREAK, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Link class composition — the server-side asChild substitute. */
-    public static function linkClasses(array $in = []): string
-    {
-        return Rt::compose(self::LINK_LINK, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (((bool) ($in['disabled'] ?? false)) ? 'pointer-events-none opacity-50' : ''), (string) ($in['class'] ?? ''));
-    }
-
-    /** List class composition — the server-side asChild substitute. */
-    public static function listClasses(array $in = []): string
-    {
-        return Rt::compose(self::LIST_LIST, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** ListItem class composition — the server-side asChild substitute. */
-    public static function listItemClasses(array $in = []): string
-    {
-        return Rt::compose(self::LIST_LIST, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Radio class composition — the server-side asChild substitute. */
-    public static function radioClasses(array $in = []): string
-    {
-        return Rt::compose(self::RADIO_RADIO, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Select class composition — the server-side asChild substitute. */
-    public static function selectClasses(array $in = []): string
-    {
-        return Rt::compose(self::SELECT_SELECT, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** OptGroup class composition — the server-side asChild substitute. */
-    public static function optGroupClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** Separator class composition — the server-side asChild substitute. */
-    public static function separatorClasses(array $in = []): string
-    {
-        return Rt::compose(self::SEPARATOR_SEPARATOR, ['variant' => (string) ($in['variant'] ?? ''), 'orientation' => (string) ($in['orientation'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Stack class composition — the server-side asChild substitute. */
-    public static function stackClasses(array $in = []): string
-    {
-        return Rt::compose(self::STACK_STACK, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Switch class composition — the server-side asChild substitute. */
-    public static function switchClasses(array $in = []): string
-    {
-        return Rt::compose(self::SWITCH_SWITCH, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Table class composition — the server-side asChild substitute. */
-    public static function tableClasses(array $in = []): string
-    {
-        return Rt::compose(self::TABLE_TABLE, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** TableCaption class composition — the server-side asChild substitute. */
-    public static function tableCaptionClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** TableHead class composition — the server-side asChild substitute. */
-    public static function tableHeadClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** TableBody class composition — the server-side asChild substitute. */
-    public static function tableBodyClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** TableFoot class composition — the server-side asChild substitute. */
-    public static function tableFootClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** TableRow class composition — the server-side asChild substitute. */
-    public static function tableRowClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** TableHeadCell class composition — the server-side asChild substitute. */
-    public static function tableHeadCellClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** TableCell class composition — the server-side asChild substitute. */
-    public static function tableCellClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** TableColGroup class composition — the server-side asChild substitute. */
-    public static function tableColGroupClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** TableCol class composition — the server-side asChild substitute. */
-    public static function tableColClasses(array $in = []): string
-    {
-        return Rt::cn((string) ($in['class'] ?? ''));
-    }
-
-    /** Text class composition — the server-side asChild substitute. */
-    public static function textClasses(array $in = []): string
-    {
-        return Rt::compose(self::TEXT_TEXT, [], (string) ($in['class'] ?? ''));
-    }
-
-    /** Textarea class composition — the server-side asChild substitute. */
-    public static function textareaClasses(array $in = []): string
-    {
-        return Rt::compose(self::TEXTAREA_TEXTAREA, ['variant' => (string) ($in['variant'] ?? ''), 'size' => (string) ($in['size'] ?? '')], (string) ($in['class'] ?? ''));
-    }
-
-    /** Title class composition — the server-side asChild substitute. */
-    public static function titleClasses(array $in = []): string
-    {
-        return Rt::compose(self::TITLE_TITLE, [], (string) ($in['class'] ?? ''));
-    }
-}
diff --git a/generated/php/UI8Kit/Rt.php b/generated/php/UI8Kit/Rt.php
deleted file mode 100644
index 432b3a1..0000000
--- a/generated/php/UI8Kit/Rt.php
+++ /dev/null
@@ -1,190 +0,0 @@
-<?php
-
-/**
- * UI8Kit PHP runtime helpers — one implementation of every decision-table
- * primitive used by generated Latte and Twig templates. Mirrors utils/expr.go
- * and utils/expr.ts so all runtimes resolve defaults identically.
- */
-
-declare(strict_types=1);
-
-namespace UI8Kit;
-
-final class Rt
-{
-    /** Allowed root tags per semantic group (mirrors src/domain/tags.ts). */
-    public const GROUPS = [
-        'Layout' => ['div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'figure', 'search', 'hgroup'],
-        'BoxAllowed' => ['div'],
-        'BlockText' => ['p', 'blockquote', 'figcaption', 'address', 'pre'],
-        'Inline' => ['span', 'em', 'strong', 'small', 'abbr', 'cite', 'code', 'kbd', 'mark', 'time', 'data', 'var', 'samp', 'sub', 'sup', 'b', 'i', 'u', 's', 'q', 'dfn', 'bdo', 'bdi', 'ins', 'del'],
-        'Heading' => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-        'List' => ['ul', 'ol', 'dl', 'menu'],
-        'ListItem' => ['li', 'dt', 'dd'],
-        'Form' => ['form', 'fieldset'],
-        'FormControl' => ['input', 'textarea', 'select', 'button', 'option', 'optgroup', 'datalist', 'output', 'meter', 'progress'],
-        'FormLabel' => ['label', 'legend'],
-        'Table' => ['table'],
-        'TableSection' => ['thead', 'tbody', 'tfoot'],
-        'TableRow' => ['tr'],
-        'TableCell' => ['th', 'td'],
-        'TableColumn' => ['colgroup', 'col'],
-        'Media' => ['img', 'picture', 'source'],
-        'Disclosure' => ['details', 'summary'],
-        'Container' => ['div', 'main', 'section'],
-        'Stack' => ['div', 'ul', 'ol'],
-        'Group' => ['div', 'fieldset', 'dl'],
-    ];
-
-    /** Join non-empty class fragments with a single space (Go Cn). */
-    public static function cn(?string ...$classes): string
-    {
-        $parts = [];
-        foreach ($classes as $c) {
-            $t = trim((string) ($c ?? ''));
-            if ($t !== '') {
-                $parts[] = $t;
-            }
-        }
-        return implode(' ', $parts);
-    }
-
-    /** Omit-if-empty attribute value: '' → null so the attribute is dropped. */
-    public static function orNull(?string $v): ?string
-    {
-        return trim((string) ($v ?? '')) === '' ? null : $v;
-    }
-
-    public static function isSetStr(?string $v): bool
-    {
-        return trim((string) ($v ?? '')) !== '';
-    }
-
-    public static function defaultIfEmpty(?string $v, string $fallback): string
-    {
-        $t = trim((string) ($v ?? ''));
-        return $t === '' ? $fallback : $t;
-    }
-
-    public static function oneOfOr(?string $v, string $fallback, string ...$allowed): string
-    {
-        $t = trim((string) ($v ?? ''));
-        return in_array($t, $allowed, true) ? $t : $fallback;
-    }
-
-    public static function oneOfOrLower(?string $v, string $fallback, string ...$allowed): string
-    {
-        return self::oneOfOr(strtolower(trim((string) ($v ?? ''))), $fallback, ...$allowed);
-    }
-
-    /** Decision table: mapping[trim(v)] ?? fallback. */
-    public static function mapOr(?string $v, array $mapping, string $fallback): string
-    {
-        return $mapping[trim((string) ($v ?? ''))] ?? $fallback;
-    }
-
-    public static function mapOrLower(?string $v, array $mapping, string $fallback): string
-    {
-        return $mapping[strtolower(trim((string) ($v ?? '')))] ?? $fallback;
-    }
-
-    /** Integer decision table: mapping[v] ?? fallback. */
-    public static function intMapOr(int $v, array $mapping, string $fallback): string
-    {
-        return $mapping[$v] ?? $fallback;
-    }
-
-    /** ARIA state stringification: always 'true'/'false', never omitted. */
-    public static function boolStr(bool $v): string
-    {
-        return $v ? 'true' : 'false';
-    }
-
-    /** Concatenation of trimmed parts (icon Prefix + Name). */
-    public static function concatTrim(?string ...$parts): string
-    {
-        $out = '';
-        foreach ($parts as $p) {
-            $out .= trim((string) ($p ?? ''));
-        }
-        return $out;
-    }
-
-    /** Returns tag when allowed for the group, otherwise fallback. */
-    public static function resolveTag(?string $tag, string $fallback, string $group): string
-    {
-        $t = strtolower(trim((string) ($tag ?? '')));
-        if ($t === '') {
-            return $fallback;
-        }
-        return in_array($t, self::GROUPS[$group] ?? [], true) ? $t : $fallback;
-    }
-
-    /** h1–h6 from a heading level; 0/out-of-range default to h2. */
-    public static function titleTag(int $order): string
-    {
-        return match ($order) {
-            1 => 'h1',
-            3 => 'h3',
-            4 => 'h4',
-            5 => 'h5',
-            6 => 'h6',
-            default => 'h2',
-        };
-    }
-
-    /**
-     * Merge recipe base, keyed variant selections, and extra fragments.
-     * Recipe shape mirrors *.variants.json: base, keys, defaults, byKey.
-     * Unknown choices are silently dropped (Go Compose behavior).
-     */
-    public static function compose(array $recipe, array $selection, ?string ...$extra): string
-    {
-        $parts = [];
-        $base = trim((string) ($recipe['base'] ?? ''));
-        if ($base !== '') {
-            $parts[] = $base;
-        }
-        foreach (($recipe['keys'] ?? []) as $key) {
-            $choices = $recipe['byKey'][$key] ?? null;
-            if ($choices === null) {
-                continue;
-            }
-            $choice = trim((string) ($selection[$key] ?? ''));
-            if ($choice === '') {
-                $choice = trim((string) ($recipe['defaults'][$key] ?? ''));
-            }
-            if ($choice === '') {
-                continue;
-            }
-            $cls = $choices[$choice] ?? null;
-            if ($cls !== null && trim($cls) !== '') {
-                $parts[] = $cls;
-            }
-        }
-        return self::cn(...$parts, ...$extra);
-    }
-
-    /**
-     * Print an attribute string for Twig templates. Computed attrs first,
-     * rest (caller) attrs merged last so the caller wins. Semantics match
-     * the canonical renderer: null/false omit, true prints a bare boolean
-     * attribute, everything else stringifies and escapes.
-     */
-    public static function attrStr(array $attrs, array $rest = []): string
-    {
-        $merged = array_merge($attrs, $rest);
-        $out = '';
-        foreach ($merged as $name => $value) {
-            if ($value === null || $value === false) {
-                continue;
-            }
-            if ($value === true) {
-                $out .= ' ' . $name;
-                continue;
-            }
-            $out .= ' ' . $name . '="' . htmlspecialchars((string) $value, ENT_QUOTES) . '"';
-        }
-        return $out;
-    }
-}
diff --git a/generated/php/UI8Kit/TwigExtension.php b/generated/php/UI8Kit/TwigExtension.php
deleted file mode 100644
index 070b1b9..0000000
--- a/generated/php/UI8Kit/TwigExtension.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php
-
-/**
- * Twig bindings for the UI8Kit runtime — thin delegates to UI8Kit\Rt and the
- * generated UI8Kit\Classes helpers. Register once per Twig environment:
- *
- *   $twig->addExtension(new \UI8Kit\TwigExtension());
- */
-
-declare(strict_types=1);
-
-namespace UI8Kit;
-
-use Twig\Extension\AbstractExtension;
-use Twig\TwigFunction;
-
-final class TwigExtension extends AbstractExtension
-{
-    public function getFunctions(): array
-    {
-        return [
-            new TwigFunction('ui8kit_attr_str', [Rt::class, 'attrStr'], ['is_safe' => ['html']]),
-            new TwigFunction('ui8kit_or_null', [Rt::class, 'orNull']),
-            new TwigFunction('ui8kit_is_set_str', [Rt::class, 'isSetStr']),
-            new TwigFunction('ui8kit_default_if_empty', [Rt::class, 'defaultIfEmpty']),
-            new TwigFunction('ui8kit_map_or', static fn ($v, array $mapping, string $fallback, bool $lower = false): string => $lower ? Rt::mapOrLower(self::str($v), $mapping, $fallback) : Rt::mapOr(self::str($v), $mapping, $fallback)),
-            new TwigFunction('ui8kit_one_of_or', static fn ($v, string $fallback, array $allowed, bool $lower = false): string => $lower ? Rt::oneOfOrLower(self::str($v), $fallback, ...$allowed) : Rt::oneOfOr(self::str($v), $fallback, ...$allowed)),
-            new TwigFunction('ui8kit_int_map_or', static fn ($v, array $mapping, string $fallback): string => Rt::intMapOr((int) ($v ?? 0), $mapping, $fallback)),
-            new TwigFunction('ui8kit_concat_trim', static fn (array $parts): string => Rt::concatTrim(...array_map(static fn ($p) => (string) ($p ?? ''), $parts))),
-            new TwigFunction('ui8kit_cn', static fn (array $parts): string => Rt::cn(...array_map(static fn ($p) => (string) ($p ?? ''), $parts))),
-            new TwigFunction('ui8kit_resolve_tag', static fn ($tag, string $fallback, string $group): string => Rt::resolveTag(self::str($tag), $fallback, $group)),
-            new TwigFunction('ui8kit_title_tag', static fn ($order): string => Rt::titleTag((int) ($order ?? 0))),
-            new TwigFunction('ui8kit_classes', static fn (string $method, array $input = []): string => \call_user_func([Classes::class, $method], $input)),
-        ];
-    }
-
-    private static function str(mixed $v): string
-    {
-        return (string) ($v ?? '');
-    }
-}
diff --git a/generated/php/vendor/autoload.php b/generated/php/vendor/autoload.php
deleted file mode 100644
index f4c4fb5..0000000
--- a/generated/php/vendor/autoload.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php
-
-// autoload.php @generated by Composer
-
-if (PHP_VERSION_ID < 50600) {
-    if (!headers_sent()) {
-        header('HTTP/1.1 500 Internal Server Error');
-    }
-    $err = 'Composer 2.3.0 dropped support for autoloading on PHP <5.6 and you are running '.PHP_VERSION.', please upgrade PHP or use Composer 2.2 LTS via "composer self-update --2.2". Aborting.'.PHP_EOL;
-    if (!ini_get('display_errors')) {
-        if (PHP_SAPI === 'cli' || PHP_SAPI === 'phpdbg') {
-            fwrite(STDERR, $err);
-        } elseif (!headers_sent()) {
-            echo $err;
-        }
-    }
-    throw new RuntimeException($err);
-}
-
-require_once __DIR__ . '/composer/autoload_real.php';
-
-return ComposerAutoloaderInite50ead6fd841707ba46459723d1eeeeb::getLoader();
diff --git a/generated/php/vendor/bin/latte-lint b/generated/php/vendor/bin/latte-lint
deleted file mode 100644
index df90b81..0000000
--- a/generated/php/vendor/bin/latte-lint
+++ /dev/null
@@ -1,119 +0,0 @@
-#!/usr/bin/env php
-<?php
-
-/**
- * Proxy PHP file generated by Composer
- *
- * This file includes the referenced bin path (../latte/latte/bin/latte-lint)
- * using a stream wrapper to prevent the shebang from being output on PHP<8
- *
- * @generated
- */
-
-namespace Composer;
-
-$GLOBALS['_composer_bin_dir'] = __DIR__;
-$GLOBALS['_composer_autoload_path'] = __DIR__ . '/..'.'/autoload.php';
-
-if (PHP_VERSION_ID < 80000) {
-    if (!class_exists('Composer\BinProxyWrapper')) {
-        /**
-         * @internal
-         */
-        final class BinProxyWrapper
-        {
-            private $handle;
-            private $position;
-            private $realpath;
-
-            public function stream_open($path, $mode, $options, &$opened_path)
-            {
-                // get rid of phpvfscomposer:// prefix for __FILE__ & __DIR__ resolution
-                $opened_path = substr($path, 17);
-                $this->realpath = realpath($opened_path) ?: $opened_path;
-                $opened_path = $this->realpath;
-                $this->handle = fopen($this->realpath, $mode);
-                $this->position = 0;
-
-                return (bool) $this->handle;
-            }
-
-            public function stream_read($count)
-            {
-                $data = fread($this->handle, $count);
-
-                if ($this->position === 0) {
-                    $data = preg_replace('{^#!.*\r?\n}', '', $data);
-                }
-
-                $this->position += strlen($data);
-
-                return $data;
-            }
-
-            public function stream_cast($castAs)
-            {
-                return $this->handle;
-            }
-
-            public function stream_close()
-            {
-                fclose($this->handle);
-            }
-
-            public function stream_lock($operation)
-            {
-                return $operation ? flock($this->handle, $operation) : true;
-            }
-
-            public function stream_seek($offset, $whence)
-            {
-                if (0 === fseek($this->handle, $offset, $whence)) {
-                    $this->position = ftell($this->handle);
-                    return true;
-                }
-
-                return false;
-            }
-
-            public function stream_tell()
-            {
-                return $this->position;
-            }
-
-            public function stream_eof()
-            {
-                return feof($this->handle);
-            }
-
-            public function stream_stat()
-            {
-                return array();
-            }
-
-            public function stream_set_option($option, $arg1, $arg2)
-            {
-                return true;
-            }
-
-            public function url_stat($path, $flags)
-            {
-                $path = substr($path, 17);
-                if (file_exists($path)) {
-                    return stat($path);
-                }
-
-                return false;
-            }
-        }
-    }
-
-    if (
-        (function_exists('stream_get_wrappers') && in_array('phpvfscomposer', stream_get_wrappers(), true))
-        || (function_exists('stream_wrapper_register') && stream_wrapper_register('phpvfscomposer', 'Composer\BinProxyWrapper'))
-    ) {
-        return include("phpvfscomposer://" . __DIR__ . '/..'.'/latte/latte/bin/latte-lint');
-    }
-}
-
-return include __DIR__ . '/..'.'/latte/latte/bin/latte-lint';
diff --git a/generated/php/vendor/bin/latte-lint.bat b/generated/php/vendor/bin/latte-lint.bat
deleted file mode 100644
index 2fb8891..0000000
--- a/generated/php/vendor/bin/latte-lint.bat
+++ /dev/null
@@ -1,5 +0,0 @@
-@ECHO OFF
-setlocal DISABLEDELAYEDEXPANSION
-SET BIN_TARGET=%~dp0/latte-lint
-SET COMPOSER_RUNTIME_BIN_DIR=%~dp0
-php "%BIN_TARGET%" %*
diff --git a/generated/php/vendor/composer/ClassLoader.php b/generated/php/vendor/composer/ClassLoader.php
deleted file mode 100644
index 7824d8f..0000000
--- a/generated/php/vendor/composer/ClassLoader.php
+++ /dev/null
@@ -1,579 +0,0 @@
-<?php
-
-/*
- * This file is part of Composer.
- *
- * (c) Nils Adermann <naderman@naderman.de>
- *     Jordi Boggiano <j.boggiano@seld.be>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Composer\Autoload;
-
-/**
- * ClassLoader implements a PSR-0, PSR-4 and classmap class loader.
- *
- *     $loader = new \Composer\Autoload\ClassLoader();
- *
- *     // register classes with namespaces
- *     $loader->add('Symfony\Component', __DIR__.'/component');
- *     $loader->add('Symfony',           __DIR__.'/framework');
- *
- *     // activate the autoloader
- *     $loader->register();
- *
- *     // to enable searching the include path (eg. for PEAR packages)
- *     $loader->setUseIncludePath(true);
- *
- * In this example, if you try to use a class in the Symfony\Component
- * namespace or one of its children (Symfony\Component\Console for instance),
- * the autoloader will first look for the class under the component/
- * directory, and it will then fallback to the framework/ directory if not
- * found before giving up.
- *
- * This class is loosely based on the Symfony UniversalClassLoader.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- * @author Jordi Boggiano <j.boggiano@seld.be>
- * @see    https://www.php-fig.org/psr/psr-0/
- * @see    https://www.php-fig.org/psr/psr-4/
- */
-class ClassLoader
-{
-    /** @var \Closure(string):void */
-    private static $includeFile;
-
-    /** @var string|null */
-    private $vendorDir;
-
-    // PSR-4
-    /**
-     * @var array<string, array<string, int>>
-     */
-    private $prefixLengthsPsr4 = array();
-    /**
-     * @var array<string, list<string>>
-     */
-    private $prefixDirsPsr4 = array();
-    /**
-     * @var list<string>
-     */
-    private $fallbackDirsPsr4 = array();
-
-    // PSR-0
-    /**
-     * List of PSR-0 prefixes
-     *
-     * Structured as array('F (first letter)' => array('Foo\Bar (full prefix)' => array('path', 'path2')))
-     *
-     * @var array<string, array<string, list<string>>>
-     */
-    private $prefixesPsr0 = array();
-    /**
-     * @var list<string>
-     */
-    private $fallbackDirsPsr0 = array();
-
-    /** @var bool */
-    private $useIncludePath = false;
-
-    /**
-     * @var array<string, string>
-     */
-    private $classMap = array();
-
-    /** @var bool */
-    private $classMapAuthoritative = false;
-
-    /**
-     * @var array<string, bool>
-     */
-    private $missingClasses = array();
-
-    /** @var string|null */
-    private $apcuPrefix;
-
-    /**
-     * @var array<string, self>
-     */
-    private static $registeredLoaders = array();
-
-    /**
-     * @param string|null $vendorDir
-     */
-    public function __construct($vendorDir = null)
-    {
-        $this->vendorDir = $vendorDir;
-        self::initializeIncludeClosure();
-    }
-
-    /**
-     * @return array<string, list<string>>
-     */
-    public function getPrefixes()
-    {
-        if (!empty($this->prefixesPsr0)) {
-            return call_user_func_array('array_merge', array_values($this->prefixesPsr0));
-        }
-
-        return array();
-    }
-
-    /**
-     * @return array<string, list<string>>
-     */
-    public function getPrefixesPsr4()
-    {
-        return $this->prefixDirsPsr4;
-    }
-
-    /**
-     * @return list<string>
-     */
-    public function getFallbackDirs()
-    {
-        return $this->fallbackDirsPsr0;
-    }
-
-    /**
-     * @return list<string>
-     */
-    public function getFallbackDirsPsr4()
-    {
-        return $this->fallbackDirsPsr4;
-    }
-
-    /**
-     * @return array<string, string> Array of classname => path
-     */
-    public function getClassMap()
-    {
-        return $this->classMap;
-    }
-
-    /**
-     * @param array<string, string> $classMap Class to filename map
-     *
-     * @return void
-     */
-    public function addClassMap(array $classMap)
-    {
-        if ($this->classMap) {
-            $this->classMap = array_merge($this->classMap, $classMap);
-        } else {
-            $this->classMap = $classMap;
-        }
-    }
-
-    /**
-     * Registers a set of PSR-0 directories for a given prefix, either
-     * appending or prepending to the ones previously set for this prefix.
-     *
-     * @param string              $prefix  The prefix
-     * @param list<string>|string $paths   The PSR-0 root directories
-     * @param bool                $prepend Whether to prepend the directories
-     *
-     * @return void
-     */
-    public function add($prefix, $paths, $prepend = false)
-    {
-        $paths = (array) $paths;
-        if (!$prefix) {
-            if ($prepend) {
-                $this->fallbackDirsPsr0 = array_merge(
-                    $paths,
-                    $this->fallbackDirsPsr0
-                );
-            } else {
-                $this->fallbackDirsPsr0 = array_merge(
-                    $this->fallbackDirsPsr0,
-                    $paths
-                );
-            }
-
-            return;
-        }
-
-        $first = $prefix[0];
-        if (!isset($this->prefixesPsr0[$first][$prefix])) {
-            $this->prefixesPsr0[$first][$prefix] = $paths;
-
-            return;
-        }
-        if ($prepend) {
-            $this->prefixesPsr0[$first][$prefix] = array_merge(
-                $paths,
-                $this->prefixesPsr0[$first][$prefix]
-            );
-        } else {
-            $this->prefixesPsr0[$first][$prefix] = array_merge(
-                $this->prefixesPsr0[$first][$prefix],
-                $paths
-            );
-        }
-    }
-
-    /**
-     * Registers a set of PSR-4 directories for a given namespace, either
-     * appending or prepending to the ones previously set for this namespace.
-     *
-     * @param string              $prefix  The prefix/namespace, with trailing '\\'
-     * @param list<string>|string $paths   The PSR-4 base directories
-     * @param bool                $prepend Whether to prepend the directories
-     *
-     * @throws \InvalidArgumentException
-     *
-     * @return void
-     */
-    public function addPsr4($prefix, $paths, $prepend = false)
-    {
-        $paths = (array) $paths;
-        if (!$prefix) {
-            // Register directories for the root namespace.
-            if ($prepend) {
-                $this->fallbackDirsPsr4 = array_merge(
-                    $paths,
-                    $this->fallbackDirsPsr4
-                );
-            } else {
-                $this->fallbackDirsPsr4 = array_merge(
-                    $this->fallbackDirsPsr4,
-                    $paths
-                );
-            }
-        } elseif (!isset($this->prefixDirsPsr4[$prefix])) {
-            // Register directories for a new namespace.
-            $length = strlen($prefix);
-            if ('\\' !== $prefix[$length - 1]) {
-                throw new \InvalidArgumentException("A non-empty PSR-4 prefix must end with a namespace separator.");
-            }
-            $this->prefixLengthsPsr4[$prefix[0]][$prefix] = $length;
-            $this->prefixDirsPsr4[$prefix] = $paths;
-        } elseif ($prepend) {
-            // Prepend directories for an already registered namespace.
-            $this->prefixDirsPsr4[$prefix] = array_merge(
-                $paths,
-                $this->prefixDirsPsr4[$prefix]
-            );
-        } else {
-            // Append directories for an already registered namespace.
-            $this->prefixDirsPsr4[$prefix] = array_merge(
-                $this->prefixDirsPsr4[$prefix],
-                $paths
-            );
-        }
-    }
-
-    /**
-     * Registers a set of PSR-0 directories for a given prefix,
-     * replacing any others previously set for this prefix.
-     *
-     * @param string              $prefix The prefix
-     * @param list<string>|string $paths  The PSR-0 base directories
-     *
-     * @return void
-     */
-    public function set($prefix, $paths)
-    {
-        if (!$prefix) {
-            $this->fallbackDirsPsr0 = (array) $paths;
-        } else {
-            $this->prefixesPsr0[$prefix[0]][$prefix] = (array) $paths;
-        }
-    }
-
-    /**
-     * Registers a set of PSR-4 directories for a given namespace,
-     * replacing any others previously set for this namespace.
-     *
-     * @param string              $prefix The prefix/namespace, with trailing '\\'
-     * @param list<string>|string $paths  The PSR-4 base directories
-     *
-     * @throws \InvalidArgumentException
-     *
-     * @return void
-     */
-    public function setPsr4($prefix, $paths)
-    {
-        if (!$prefix) {
-            $this->fallbackDirsPsr4 = (array) $paths;
-        } else {
-            $length = strlen($prefix);
-            if ('\\' !== $prefix[$length - 1]) {
-                throw new \InvalidArgumentException("A non-empty PSR-4 prefix must end with a namespace separator.");
-            }
-            $this->prefixLengthsPsr4[$prefix[0]][$prefix] = $length;
-            $this->prefixDirsPsr4[$prefix] = (array) $paths;
-        }
-    }
-
-    /**
-     * Turns on searching the include path for class files.
-     *
-     * @param bool $useIncludePath
-     *
-     * @return void
-     */
-    public function setUseIncludePath($useIncludePath)
-    {
-        $this->useIncludePath = $useIncludePath;
-    }
-
-    /**
-     * Can be used to check if the autoloader uses the include path to check
-     * for classes.
-     *
-     * @return bool
-     */
-    public function getUseIncludePath()
-    {
-        return $this->useIncludePath;
-    }
-
-    /**
-     * Turns off searching the prefix and fallback directories for classes
-     * that have not been registered with the class map.
-     *
-     * @param bool $classMapAuthoritative
-     *
-     * @return void
-     */
-    public function setClassMapAuthoritative($classMapAuthoritative)
-    {
-        $this->classMapAuthoritative = $classMapAuthoritative;
-    }
-
-    /**
-     * Should class lookup fail if not found in the current class map?
-     *
-     * @return bool
-     */
-    public function isClassMapAuthoritative()
-    {
-        return $this->classMapAuthoritative;
-    }
-
-    /**
-     * APCu prefix to use to cache found/not-found classes, if the extension is enabled.
-     *
-     * @param string|null $apcuPrefix
-     *
-     * @return void
-     */
-    public function setApcuPrefix($apcuPrefix)
-    {
-        $this->apcuPrefix = function_exists('apcu_fetch') && filter_var(ini_get('apc.enabled'), FILTER_VALIDATE_BOOLEAN) ? $apcuPrefix : null;
-    }
-
-    /**
-     * The APCu prefix in use, or null if APCu caching is not enabled.
-     *
-     * @return string|null
-     */
-    public function getApcuPrefix()
-    {
-        return $this->apcuPrefix;
-    }
-
-    /**
-     * Registers this instance as an autoloader.
-     *
-     * @param bool $prepend Whether to prepend the autoloader or not
-     *
-     * @return void
-     */
-    public function register($prepend = false)
-    {
-        spl_autoload_register(array($this, 'loadClass'), true, $prepend);
-
-        if (null === $this->vendorDir) {
-            return;
-        }
-
-        if ($prepend) {
-            self::$registeredLoaders = array($this->vendorDir => $this) + self::$registeredLoaders;
-        } else {
-            unset(self::$registeredLoaders[$this->vendorDir]);
-            self::$registeredLoaders[$this->vendorDir] = $this;
-        }
-    }
-
-    /**
-     * Unregisters this instance as an autoloader.
-     *
-     * @return void
-     */
-    public function unregister()
-    {
-        spl_autoload_unregister(array($this, 'loadClass'));
-
-        if (null !== $this->vendorDir) {
-            unset(self::$registeredLoaders[$this->vendorDir]);
-        }
-    }
-
-    /**
-     * Loads the given class or interface.
-     *
-     * @param  string    $class The name of the class
-     * @return true|null True if loaded, null otherwise
-     */
-    public function loadClass($class)
-    {
-        if ($file = $this->findFile($class)) {
-            $includeFile = self::$includeFile;
-            $includeFile($file);
-
-            return true;
-        }
-
-        return null;
-    }
-
-    /**
-     * Finds the path to the file where the class is defined.
-     *
-     * @param string $class The name of the class
-     *
-     * @return string|false The path if found, false otherwise
-     */
-    public function findFile($class)
-    {
-        // class map lookup
-        if (isset($this->classMap[$class])) {
-            return $this->classMap[$class];
-        }
-        if ($this->classMapAuthoritative || isset($this->missingClasses[$class])) {
-            return false;
-        }
-        if (null !== $this->apcuPrefix) {
-            $file = apcu_fetch($this->apcuPrefix.$class, $hit);
-            if ($hit) {
-                return $file;
-            }
-        }
-
-        $file = $this->findFileWithExtension($class, '.php');
-
-        // Search for Hack files if we are running on HHVM
-        if (false === $file && defined('HHVM_VERSION')) {
-            $file = $this->findFileWithExtension($class, '.hh');
-        }
-
-        if (null !== $this->apcuPrefix) {
-            apcu_add($this->apcuPrefix.$class, $file);
-        }
-
-        if (false === $file) {
-            // Remember that this class does not exist.
-            $this->missingClasses[$class] = true;
-        }
-
-        return $file;
-    }
-
-    /**
-     * Returns the currently registered loaders keyed by their corresponding vendor directories.
-     *
-     * @return array<string, self>
-     */
-    public static function getRegisteredLoaders()
-    {
-        return self::$registeredLoaders;
-    }
-
-    /**
-     * @param  string       $class
-     * @param  string       $ext
-     * @return string|false
-     */
-    private function findFileWithExtension($class, $ext)
-    {
-        // PSR-4 lookup
-        $logicalPathPsr4 = strtr($class, '\\', DIRECTORY_SEPARATOR) . $ext;
-
-        $first = $class[0];
-        if (isset($this->prefixLengthsPsr4[$first])) {
-            $subPath = $class;
-            while (false !== $lastPos = strrpos($subPath, '\\')) {
-                $subPath = substr($subPath, 0, $lastPos);
-                $search = $subPath . '\\';
-                if (isset($this->prefixDirsPsr4[$search])) {
-                    $pathEnd = DIRECTORY_SEPARATOR . substr($logicalPathPsr4, $lastPos + 1);
-                    foreach ($this->prefixDirsPsr4[$search] as $dir) {
-                        if (file_exists($file = $dir . $pathEnd)) {
-                            return $file;
-                        }
-                    }
-                }
-            }
-        }
-
-        // PSR-4 fallback dirs
-        foreach ($this->fallbackDirsPsr4 as $dir) {
-            if (file_exists($file = $dir . DIRECTORY_SEPARATOR . $logicalPathPsr4)) {
-                return $file;
-            }
-        }
-
-        // PSR-0 lookup
-        if (false !== $pos = strrpos($class, '\\')) {
-            // namespaced class name
-            $logicalPathPsr0 = substr($logicalPathPsr4, 0, $pos + 1)
-                . strtr(substr($logicalPathPsr4, $pos + 1), '_', DIRECTORY_SEPARATOR);
-        } else {
-            // PEAR-like class name
-            $logicalPathPsr0 = strtr($class, '_', DIRECTORY_SEPARATOR) . $ext;
-        }
-
-        if (isset($this->prefixesPsr0[$first])) {
-            foreach ($this->prefixesPsr0[$first] as $prefix => $dirs) {
-                if (0 === strpos($class, $prefix)) {
-                    foreach ($dirs as $dir) {
-                        if (file_exists($file = $dir . DIRECTORY_SEPARATOR . $logicalPathPsr0)) {
-                            return $file;
-                        }
-                    }
-                }
-            }
-        }
-
-        // PSR-0 fallback dirs
-        foreach ($this->fallbackDirsPsr0 as $dir) {
-            if (file_exists($file = $dir . DIRECTORY_SEPARATOR . $logicalPathPsr0)) {
-                return $file;
-            }
-        }
-
-        // PSR-0 include paths.
-        if ($this->useIncludePath && $file = stream_resolve_include_path($logicalPathPsr0)) {
-            return $file;
-        }
-
-        return false;
-    }
-
-    /**
-     * @return void
-     */
-    private static function initializeIncludeClosure()
-    {
-        if (self::$includeFile !== null) {
-            return;
-        }
-
-        /**
-         * Scope isolated include.
-         *
-         * Prevents access to $this/self from included files.
-         *
-         * @param  string $file
-         * @return void
-         */
-        self::$includeFile = \Closure::bind(static function($file) {
-            include $file;
-        }, null, null);
-    }
-}
diff --git a/generated/php/vendor/composer/InstalledVersions.php b/generated/php/vendor/composer/InstalledVersions.php
deleted file mode 100644
index 2052022..0000000
--- a/generated/php/vendor/composer/InstalledVersions.php
+++ /dev/null
@@ -1,396 +0,0 @@
-<?php
-
-/*
- * This file is part of Composer.
- *
- * (c) Nils Adermann <naderman@naderman.de>
- *     Jordi Boggiano <j.boggiano@seld.be>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Composer;
-
-use Composer\Autoload\ClassLoader;
-use Composer\Semver\VersionParser;
-
-/**
- * This class is copied in every Composer installed project and available to all
- *
- * See also https://getcomposer.org/doc/07-runtime.md#installed-versions
- *
- * To require its presence, you can require `composer-runtime-api ^2.0`
- *
- * @final
- */
-class InstalledVersions
-{
-    /**
-     * @var string|null if set (by reflection by Composer), this should be set to the path where this class is being copied to
-     * @internal
-     */
-    private static $selfDir = null;
-
-    /**
-     * @var mixed[]|null
-     * @psalm-var array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}|array{}|null
-     */
-    private static $installed;
-
-    /**
-     * @var bool
-     */
-    private static $installedIsLocalDir;
-
-    /**
-     * @var bool|null
-     */
-    private static $canGetVendors;
-
-    /**
-     * @var array[]
-     * @psalm-var array<string, array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}>
-     */
-    private static $installedByVendor = array();
-
-    /**
-     * Returns a list of all package names which are present, either by being installed, replaced or provided
-     *
-     * @return string[]
-     * @psalm-return list<string>
-     */
-    public static function getInstalledPackages()
-    {
-        $packages = array();
-        foreach (self::getInstalled() as $installed) {
-            $packages[] = array_keys($installed['versions']);
-        }
-
-        if (1 === \count($packages)) {
-            return $packages[0];
-        }
-
-        return array_keys(array_flip(\call_user_func_array('array_merge', $packages)));
-    }
-
-    /**
-     * Returns a list of all package names with a specific type e.g. 'library'
-     *
-     * @param  string   $type
-     * @return string[]
-     * @psalm-return list<string>
-     */
-    public static function getInstalledPackagesByType($type)
-    {
-        $packagesByType = array();
-
-        foreach (self::getInstalled() as $installed) {
-            foreach ($installed['versions'] as $name => $package) {
-                if (isset($package['type']) && $package['type'] === $type) {
-                    $packagesByType[] = $name;
-                }
-            }
-        }
-
-        return $packagesByType;
-    }
-
-    /**
-     * Checks whether the given package is installed
-     *
-     * This also returns true if the package name is provided or replaced by another package
-     *
-     * @param  string $packageName
-     * @param  bool   $includeDevRequirements
-     * @return bool
-     */
-    public static function isInstalled($packageName, $includeDevRequirements = true)
-    {
-        foreach (self::getInstalled() as $installed) {
-            if (isset($installed['versions'][$packageName])) {
-                return $includeDevRequirements || !isset($installed['versions'][$packageName]['dev_requirement']) || $installed['versions'][$packageName]['dev_requirement'] === false;
-            }
-        }
-
-        return false;
-    }
-
-    /**
-     * Checks whether the given package satisfies a version constraint
-     *
-     * e.g. If you want to know whether version 2.3+ of package foo/bar is installed, you would call:
-     *
-     *   Composer\InstalledVersions::satisfies(new VersionParser, 'foo/bar', '^2.3')
-     *
-     * @param  VersionParser $parser      Install composer/semver to have access to this class and functionality
-     * @param  string        $packageName
-     * @param  string|null   $constraint  A version constraint to check for, if you pass one you have to make sure composer/semver is required by your package
-     * @return bool
-     */
-    public static function satisfies(VersionParser $parser, $packageName, $constraint)
-    {
-        $constraint = $parser->parseConstraints((string) $constraint);
-        $provided = $parser->parseConstraints(self::getVersionRanges($packageName));
-
-        return $provided->matches($constraint);
-    }
-
-    /**
-     * Returns a version constraint representing all the range(s) which are installed for a given package
-     *
-     * It is easier to use this via isInstalled() with the $constraint argument if you need to check
-     * whether a given version of a package is installed, and not just whether it exists
-     *
-     * @param  string $packageName
-     * @return string Version constraint usable with composer/semver
-     */
-    public static function getVersionRanges($packageName)
-    {
-        foreach (self::getInstalled() as $installed) {
-            if (!isset($installed['versions'][$packageName])) {
-                continue;
-            }
-
-            $ranges = array();
-            if (isset($installed['versions'][$packageName]['pretty_version'])) {
-                $ranges[] = $installed['versions'][$packageName]['pretty_version'];
-            }
-            if (array_key_exists('aliases', $installed['versions'][$packageName])) {
-                $ranges = array_merge($ranges, $installed['versions'][$packageName]['aliases']);
-            }
-            if (array_key_exists('replaced', $installed['versions'][$packageName])) {
-                $ranges = array_merge($ranges, $installed['versions'][$packageName]['replaced']);
-            }
-            if (array_key_exists('provided', $installed['versions'][$packageName])) {
-                $ranges = array_merge($ranges, $installed['versions'][$packageName]['provided']);
-            }
-
-            return implode(' || ', $ranges);
-        }
-
-        throw new \OutOfBoundsException('Package "' . $packageName . '" is not installed');
-    }
-
-    /**
-     * @param  string      $packageName
-     * @return string|null If the package is being replaced or provided but is not really installed, null will be returned as version, use satisfies or getVersionRanges if you need to know if a given version is present
-     */
-    public static function getVersion($packageName)
-    {
-        foreach (self::getInstalled() as $installed) {
-            if (!isset($installed['versions'][$packageName])) {
-                continue;
-            }
-
-            if (!isset($installed['versions'][$packageName]['version'])) {
-                return null;
-            }
-
-            return $installed['versions'][$packageName]['version'];
-        }
-
-        throw new \OutOfBoundsException('Package "' . $packageName . '" is not installed');
-    }
-
-    /**
-     * @param  string      $packageName
-     * @return string|null If the package is being replaced or provided but is not really installed, null will be returned as version, use satisfies or getVersionRanges if you need to know if a given version is present
-     */
-    public static function getPrettyVersion($packageName)
-    {
-        foreach (self::getInstalled() as $installed) {
-            if (!isset($installed['versions'][$packageName])) {
-                continue;
-            }
-
-            if (!isset($installed['versions'][$packageName]['pretty_version'])) {
-                return null;
-            }
-
-            return $installed['versions'][$packageName]['pretty_version'];
-        }
-
-        throw new \OutOfBoundsException('Package "' . $packageName . '" is not installed');
-    }
-
-    /**
-     * @param  string      $packageName
-     * @return string|null If the package is being replaced or provided but is not really installed, null will be returned as reference
-     */
-    public static function getReference($packageName)
-    {
-        foreach (self::getInstalled() as $installed) {
-            if (!isset($installed['versions'][$packageName])) {
-                continue;
-            }
-
-            if (!isset($installed['versions'][$packageName]['reference'])) {
-                return null;
-            }
-
-            return $installed['versions'][$packageName]['reference'];
-        }
-
-        throw new \OutOfBoundsException('Package "' . $packageName . '" is not installed');
-    }
-
-    /**
-     * @param  string      $packageName
-     * @return string|null If the package is being replaced or provided but is not really installed, null will be returned as install path. Packages of type metapackages also have a null install path.
-     */
-    public static function getInstallPath($packageName)
-    {
-        foreach (self::getInstalled() as $installed) {
-            if (!isset($installed['versions'][$packageName])) {
-                continue;
-            }
-
-            return isset($installed['versions'][$packageName]['install_path']) ? $installed['versions'][$packageName]['install_path'] : null;
-        }
-
-        throw new \OutOfBoundsException('Package "' . $packageName . '" is not installed');
-    }
-
-    /**
-     * @return array
-     * @psalm-return array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}
-     */
-    public static function getRootPackage()
-    {
-        $installed = self::getInstalled();
-
-        return $installed[0]['root'];
-    }
-
-    /**
-     * Returns the raw installed.php data for custom implementations
-     *
-     * @deprecated Use getAllRawData() instead which returns all datasets for all autoloaders present in the process. getRawData only returns the first dataset loaded, which may not be what you expect.
-     * @return array[]
-     * @psalm-return array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}
-     */
-    public static function getRawData()
-    {
-        @trigger_error('getRawData only returns the first dataset loaded, which may not be what you expect. Use getAllRawData() instead which returns all datasets for all autoloaders present in the process.', E_USER_DEPRECATED);
-
-        if (null === self::$installed) {
-            // only require the installed.php file if this file is loaded from its dumped location,
-            // and not from its source location in the composer/composer package, see https://github.com/composer/composer/issues/9937
-            if (substr(__DIR__, -8, 1) !== 'C') {
-                self::$installed = include __DIR__ . '/installed.php';
-            } else {
-                self::$installed = array();
-            }
-        }
-
-        return self::$installed;
-    }
-
-    /**
-     * Returns the raw data of all installed.php which are currently loaded for custom implementations
-     *
-     * @return array[]
-     * @psalm-return list<array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}>
-     */
-    public static function getAllRawData()
-    {
-        return self::getInstalled();
-    }
-
-    /**
-     * Lets you reload the static array from another file
-     *
-     * This is only useful for complex integrations in which a project needs to use
-     * this class but then also needs to execute another project's autoloader in process,
-     * and wants to ensure both projects have access to their version of installed.php.
-     *
-     * A typical case would be PHPUnit, where it would need to make sure it reads all
-     * the data it needs from this class, then call reload() with
-     * `require $CWD/vendor/composer/installed.php` (or similar) as input to make sure
-     * the project in which it runs can then also use this class safely, without
-     * interference between PHPUnit's dependencies and the project's dependencies.
-     *
-     * @param  array[] $data A vendor/composer/installed.php data set
-     * @return void
-     *
-     * @psalm-param array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>} $data
-     */
-    public static function reload($data)
-    {
-        self::$installed = $data;
-        self::$installedByVendor = array();
-
-        // when using reload, we disable the duplicate protection to ensure that self::$installed data is
-        // always returned, but we cannot know whether it comes from the installed.php in __DIR__ or not,
-        // so we have to assume it does not, and that may result in duplicate data being returned when listing
-        // all installed packages for example
-        self::$installedIsLocalDir = false;
-    }
-
-    /**
-     * @return string
-     */
-    private static function getSelfDir()
-    {
-        if (self::$selfDir === null) {
-            self::$selfDir = strtr(__DIR__, '\\', '/');
-        }
-
-        return self::$selfDir;
-    }
-
-    /**
-     * @return array[]
-     * @psalm-return list<array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>}>
-     */
-    private static function getInstalled()
-    {
-        if (null === self::$canGetVendors) {
-            self::$canGetVendors = method_exists('Composer\Autoload\ClassLoader', 'getRegisteredLoaders');
-        }
-
-        $installed = array();
-        $copiedLocalDir = false;
-
-        if (self::$canGetVendors) {
-            $selfDir = self::getSelfDir();
-            foreach (ClassLoader::getRegisteredLoaders() as $vendorDir => $loader) {
-                $vendorDir = strtr($vendorDir, '\\', '/');
-                if (isset(self::$installedByVendor[$vendorDir])) {
-                    $installed[] = self::$installedByVendor[$vendorDir];
-                } elseif (is_file($vendorDir.'/composer/installed.php')) {
-                    /** @var array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>} $required */
-                    $required = require $vendorDir.'/composer/installed.php';
-                    self::$installedByVendor[$vendorDir] = $required;
-                    $installed[] = $required;
-                    if (self::$installed === null && $vendorDir.'/composer' === $selfDir) {
-                        self::$installed = $required;
-                        self::$installedIsLocalDir = true;
-                    }
-                }
-                if (self::$installedIsLocalDir && $vendorDir.'/composer' === $selfDir) {
-                    $copiedLocalDir = true;
-                }
-            }
-        }
-
-        if (null === self::$installed) {
-            // only require the installed.php file if this file is loaded from its dumped location,
-            // and not from its source location in the composer/composer package, see https://github.com/composer/composer/issues/9937
-            if (substr(__DIR__, -8, 1) !== 'C') {
-                /** @var array{root: array{name: string, pretty_version: string, version: string, reference: string|null, type: string, install_path: string, aliases: string[], dev: bool}, versions: array<string, array{pretty_version?: string, version?: string, reference?: string|null, type?: string, install_path?: string, aliases?: string[], dev_requirement: bool, replaced?: string[], provided?: string[]}>} $required */
-                $required = require __DIR__ . '/installed.php';
-                self::$installed = $required;
-            } else {
-                self::$installed = array();
-            }
-        }
-
-        if (self::$installed !== array() && !$copiedLocalDir) {
-            $installed[] = self::$installed;
-        }
-
-        return $installed;
-    }
-}
diff --git a/generated/php/vendor/composer/LICENSE b/generated/php/vendor/composer/LICENSE
deleted file mode 100644
index f27399a..0000000
--- a/generated/php/vendor/composer/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-
-Copyright (c) Nils Adermann, Jordi Boggiano
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is furnished
-to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
diff --git a/generated/php/vendor/composer/autoload_classmap.php b/generated/php/vendor/composer/autoload_classmap.php
deleted file mode 100644
index c43c9c9..0000000
--- a/generated/php/vendor/composer/autoload_classmap.php
+++ /dev/null
@@ -1,192 +0,0 @@
-<?php
-
-// autoload_classmap.php @generated by Composer
-
-$vendorDir = dirname(__DIR__);
-$baseDir = dirname(dirname($vendorDir));
-
-return array(
-    'Composer\\InstalledVersions' => $vendorDir . '/composer/InstalledVersions.php',
-    'Latte\\Attributes\\TemplateFilter' => $vendorDir . '/latte/latte/src/Latte/attributes.php',
-    'Latte\\Attributes\\TemplateFunction' => $vendorDir . '/latte/latte/src/Latte/attributes.php',
-    'Latte\\Bridges\\Tracy\\BlueScreenPanel' => $vendorDir . '/latte/latte/src/Bridges/Tracy/BlueScreenPanel.php',
-    'Latte\\Bridges\\Tracy\\LattePanel' => $vendorDir . '/latte/latte/src/Bridges/Tracy/LattePanel.php',
-    'Latte\\Bridges\\Tracy\\TracyExtension' => $vendorDir . '/latte/latte/src/Bridges/Tracy/TracyExtension.php',
-    'Latte\\CompileException' => $vendorDir . '/latte/latte/src/Latte/exceptions.php',
-    'Latte\\Compiler\\Block' => $vendorDir . '/latte/latte/src/Latte/Compiler/Block.php',
-    'Latte\\Compiler\\Dedent' => $vendorDir . '/latte/latte/src/Latte/Compiler/Dedent.php',
-    'Latte\\Compiler\\Escaper' => $vendorDir . '/latte/latte/src/Latte/Compiler/Escaper.php',
-    'Latte\\Compiler\\Node' => $vendorDir . '/latte/latte/src/Latte/Compiler/Node.php',
-    'Latte\\Compiler\\NodeHelpers' => $vendorDir . '/latte/latte/src/Latte/Compiler/NodeHelpers.php',
-    'Latte\\Compiler\\NodeTraverser' => $vendorDir . '/latte/latte/src/Latte/Compiler/NodeTraverser.php',
-    'Latte\\Compiler\\Nodes\\AreaNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/AreaNode.php',
-    'Latte\\Compiler\\Nodes\\AuxiliaryNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/AuxiliaryNode.php',
-    'Latte\\Compiler\\Nodes\\FragmentNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/FragmentNode.php',
-    'Latte\\Compiler\\Nodes\\Html\\AttributeNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Html/AttributeNode.php',
-    'Latte\\Compiler\\Nodes\\Html\\BogusTagNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Html/BogusTagNode.php',
-    'Latte\\Compiler\\Nodes\\Html\\CommentNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Html/CommentNode.php',
-    'Latte\\Compiler\\Nodes\\Html\\ElementNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Html/ElementNode.php',
-    'Latte\\Compiler\\Nodes\\Html\\ExpressionAttributeNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Html/ExpressionAttributeNode.php',
-    'Latte\\Compiler\\Nodes\\Html\\TagNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Html/TagNode.php',
-    'Latte\\Compiler\\Nodes\\NopNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/NopNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ArgumentNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ArgumentNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ArrayItemNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ArrayItemNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ClosureUseNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ClosureUseNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ComplexTypeNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ComplexTypeNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ExpressionNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ExpressionNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\ArrayAccessNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayAccessNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\ArrayNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\AssignNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\AssignOpNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignOpNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\AuxiliaryNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AuxiliaryNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\BinaryOpNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/BinaryOpNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\CastNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CastNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\ClassConstantFetchNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClassConstantFetchNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\CloneNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CloneNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\ClosureNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClosureNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\ConstantFetchNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ConstantFetchNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\EmptyNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/EmptyNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\FilterCallNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FilterCallNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\FunctionCallNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FunctionCallNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\InNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\InstanceofNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InstanceofNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\IssetNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/IssetNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\MatchNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MatchNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\MethodCallNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MethodCallNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\NewNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/NewNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\PostOpNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PostOpNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\PreOpNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PreOpNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\PropertyFetchNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PropertyFetchNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\StaticMethodCallNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticMethodCallNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\StaticPropertyFetchNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticPropertyFetchNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\TemporaryNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TemporaryNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\TernaryNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TernaryNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\UnaryOpNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/UnaryOpNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Expression\\VariableNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/VariableNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\FilterNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/FilterNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\IdentifierNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/IdentifierNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\InterpolatedStringPartNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/InterpolatedStringPartNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\IntersectionTypeNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/IntersectionTypeNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ListItemNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ListItemNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ListNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ListNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\MatchArmNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/MatchArmNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ModifierNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ModifierNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\NameNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/NameNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\NullableTypeNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/NullableTypeNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\OperatorNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/OperatorNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ParameterNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ParameterNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\ScalarNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/ScalarNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Scalar\\BooleanNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/BooleanNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Scalar\\FloatNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/FloatNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Scalar\\IntegerNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/IntegerNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Scalar\\InterpolatedStringNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/InterpolatedStringNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Scalar\\NullNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/NullNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\Scalar\\StringNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/StringNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\SuperiorTypeNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/SuperiorTypeNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\UnionTypeNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/UnionTypeNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\VarLikeIdentifierNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/VarLikeIdentifierNode.php',
-    'Latte\\Compiler\\Nodes\\Php\\VariadicPlaceholderNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/Php/VariadicPlaceholderNode.php',
-    'Latte\\Compiler\\Nodes\\PrintNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/PrintNode.php',
-    'Latte\\Compiler\\Nodes\\StatementNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/StatementNode.php',
-    'Latte\\Compiler\\Nodes\\TemplateNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/TemplateNode.php',
-    'Latte\\Compiler\\Nodes\\TextNode' => $vendorDir . '/latte/latte/src/Latte/Compiler/Nodes/TextNode.php',
-    'Latte\\Compiler\\PhpHelpers' => $vendorDir . '/latte/latte/src/Latte/Compiler/PhpHelpers.php',
-    'Latte\\Compiler\\Position' => $vendorDir . '/latte/latte/src/Latte/Compiler/Position.php',
-    'Latte\\Compiler\\PrintContext' => $vendorDir . '/latte/latte/src/Latte/Compiler/PrintContext.php',
-    'Latte\\Compiler\\Range' => $vendorDir . '/latte/latte/src/Latte/Compiler/Range.php',
-    'Latte\\Compiler\\Tag' => $vendorDir . '/latte/latte/src/Latte/Compiler/Tag.php',
-    'Latte\\Compiler\\TagLexer' => $vendorDir . '/latte/latte/src/Latte/Compiler/TagLexer.php',
-    'Latte\\Compiler\\TagParser' => $vendorDir . '/latte/latte/src/Latte/Compiler/TagParser.php',
-    'Latte\\Compiler\\TagParserData' => $vendorDir . '/latte/latte/src/Latte/Compiler/TagParserData.php',
-    'Latte\\Compiler\\TemplateGenerator' => $vendorDir . '/latte/latte/src/Latte/Compiler/TemplateGenerator.php',
-    'Latte\\Compiler\\TemplateLexer' => $vendorDir . '/latte/latte/src/Latte/Compiler/TemplateLexer.php',
-    'Latte\\Compiler\\TemplateParser' => $vendorDir . '/latte/latte/src/Latte/Compiler/TemplateParser.php',
-    'Latte\\Compiler\\TemplateParserHtml' => $vendorDir . '/latte/latte/src/Latte/Compiler/TemplateParserHtml.php',
-    'Latte\\Compiler\\Token' => $vendorDir . '/latte/latte/src/Latte/Compiler/Token.php',
-    'Latte\\Compiler\\TokenStream' => $vendorDir . '/latte/latte/src/Latte/Compiler/TokenStream.php',
-    'Latte\\ContentType' => $vendorDir . '/latte/latte/src/Latte/ContentType.php',
-    'Latte\\Engine' => $vendorDir . '/latte/latte/src/Latte/Engine.php',
-    'Latte\\Essential\\AuxiliaryIterator' => $vendorDir . '/latte/latte/src/Latte/Essential/AuxiliaryIterator.php',
-    'Latte\\Essential\\Blueprint' => $vendorDir . '/latte/latte/src/Latte/Essential/Blueprint.php',
-    'Latte\\Essential\\CachingIterator' => $vendorDir . '/latte/latte/src/Latte/Essential/CachingIterator.php',
-    'Latte\\Essential\\CoreExtension' => $vendorDir . '/latte/latte/src/Latte/Essential/CoreExtension.php',
-    'Latte\\Essential\\Filters' => $vendorDir . '/latte/latte/src/Latte/Essential/Filters.php',
-    'Latte\\Essential\\Nodes\\BlockNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/BlockNode.php',
-    'Latte\\Essential\\Nodes\\CaptureNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/CaptureNode.php',
-    'Latte\\Essential\\Nodes\\ContentTypeNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/ContentTypeNode.php',
-    'Latte\\Essential\\Nodes\\CustomFunctionCallNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/CustomFunctionCallNode.php',
-    'Latte\\Essential\\Nodes\\DebugbreakNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/DebugbreakNode.php',
-    'Latte\\Essential\\Nodes\\DefineNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/DefineNode.php',
-    'Latte\\Essential\\Nodes\\DoNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/DoNode.php',
-    'Latte\\Essential\\Nodes\\DumpNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/DumpNode.php',
-    'Latte\\Essential\\Nodes\\EmbedNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/EmbedNode.php',
-    'Latte\\Essential\\Nodes\\ExtendsNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/ExtendsNode.php',
-    'Latte\\Essential\\Nodes\\FirstLastSepNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/FirstLastSepNode.php',
-    'Latte\\Essential\\Nodes\\ForNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/ForNode.php',
-    'Latte\\Essential\\Nodes\\ForeachNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/ForeachNode.php',
-    'Latte\\Essential\\Nodes\\IfChangedNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/IfChangedNode.php',
-    'Latte\\Essential\\Nodes\\IfContentNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/IfContentNode.php',
-    'Latte\\Essential\\Nodes\\IfNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/IfNode.php',
-    'Latte\\Essential\\Nodes\\ImportNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/ImportNode.php',
-    'Latte\\Essential\\Nodes\\IncludeBlockNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/IncludeBlockNode.php',
-    'Latte\\Essential\\Nodes\\IncludeFileNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/IncludeFileNode.php',
-    'Latte\\Essential\\Nodes\\IterateWhileNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/IterateWhileNode.php',
-    'Latte\\Essential\\Nodes\\JumpNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/JumpNode.php',
-    'Latte\\Essential\\Nodes\\NAttrNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/NAttrNode.php',
-    'Latte\\Essential\\Nodes\\NClassNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/NClassNode.php',
-    'Latte\\Essential\\Nodes\\NElseNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/NElseNode.php',
-    'Latte\\Essential\\Nodes\\NTagNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/NTagNode.php',
-    'Latte\\Essential\\Nodes\\ParametersNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/ParametersNode.php',
-    'Latte\\Essential\\Nodes\\RawPhpNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/RawPhpNode.php',
-    'Latte\\Essential\\Nodes\\RollbackNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/RollbackNode.php',
-    'Latte\\Essential\\Nodes\\SpacelessNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/SpacelessNode.php',
-    'Latte\\Essential\\Nodes\\SwitchNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/SwitchNode.php',
-    'Latte\\Essential\\Nodes\\TemplatePrintNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/TemplatePrintNode.php',
-    'Latte\\Essential\\Nodes\\TemplateTypeNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/TemplateTypeNode.php',
-    'Latte\\Essential\\Nodes\\TraceNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/TraceNode.php',
-    'Latte\\Essential\\Nodes\\TranslateNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/TranslateNode.php',
-    'Latte\\Essential\\Nodes\\TryNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/TryNode.php',
-    'Latte\\Essential\\Nodes\\VarNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/VarNode.php',
-    'Latte\\Essential\\Nodes\\VarPrintNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/VarPrintNode.php',
-    'Latte\\Essential\\Nodes\\VarTypeNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/VarTypeNode.php',
-    'Latte\\Essential\\Nodes\\WhileNode' => $vendorDir . '/latte/latte/src/Latte/Essential/Nodes/WhileNode.php',
-    'Latte\\Essential\\Passes' => $vendorDir . '/latte/latte/src/Latte/Essential/Passes.php',
-    'Latte\\Essential\\RawPhpExtension' => $vendorDir . '/latte/latte/src/Latte/Essential/RawPhpExtension.php',
-    'Latte\\Essential\\RollbackException' => $vendorDir . '/latte/latte/src/Latte/Essential/RollbackException.php',
-    'Latte\\Essential\\Tracer' => $vendorDir . '/latte/latte/src/Latte/Essential/Tracer.php',
-    'Latte\\Essential\\TranslatorExtension' => $vendorDir . '/latte/latte/src/Latte/Essential/TranslatorExtension.php',
-    'Latte\\Exception' => $vendorDir . '/latte/latte/src/Latte/exceptions.php',
-    'Latte\\Extension' => $vendorDir . '/latte/latte/src/Latte/Extension.php',
-    'Latte\\Feature' => $vendorDir . '/latte/latte/src/Latte/enums.php',
-    'Latte\\Helpers' => $vendorDir . '/latte/latte/src/Latte/Helpers.php',
-    'Latte\\Loader' => $vendorDir . '/latte/latte/src/Latte/Loader.php',
-    'Latte\\Loaders\\FileLoader' => $vendorDir . '/latte/latte/src/Latte/Loaders/FileLoader.php',
-    'Latte\\Loaders\\StringLoader' => $vendorDir . '/latte/latte/src/Latte/Loaders/StringLoader.php',
-    'Latte\\Policy' => $vendorDir . '/latte/latte/src/Latte/Policy.php',
-    'Latte\\PositionAwareException' => $vendorDir . '/latte/latte/src/Latte/exceptions.php',
-    'Latte\\RuntimeException' => $vendorDir . '/latte/latte/src/Latte/exceptions.php',
-    'Latte\\Runtime\\Block' => $vendorDir . '/latte/latte/src/Latte/Runtime/Block.php',
-    'Latte\\Runtime\\Cache' => $vendorDir . '/latte/latte/src/Latte/Runtime/Cache.php',
-    'Latte\\Runtime\\FilterExecutor' => $vendorDir . '/latte/latte/src/Latte/Runtime/FilterExecutor.php',
-    'Latte\\Runtime\\FilterInfo' => $vendorDir . '/latte/latte/src/Latte/Runtime/FilterInfo.php',
-    'Latte\\Runtime\\FunctionExecutor' => $vendorDir . '/latte/latte/src/Latte/Runtime/FunctionExecutor.php',
-    'Latte\\Runtime\\Helpers' => $vendorDir . '/latte/latte/src/Latte/Runtime/Helpers.php',
-    'Latte\\Runtime\\Html' => $vendorDir . '/latte/latte/src/Latte/Runtime/Html.php',
-    'Latte\\Runtime\\HtmlHelpers' => $vendorDir . '/latte/latte/src/Latte/Runtime/HtmlHelpers.php',
-    'Latte\\Runtime\\HtmlStringable' => $vendorDir . '/latte/latte/src/Latte/Runtime/HtmlStringable.php',
-    'Latte\\Runtime\\Template' => $vendorDir . '/latte/latte/src/Latte/Runtime/Template.php',
-    'Latte\\Runtime\\XmlHelpers' => $vendorDir . '/latte/latte/src/Latte/Runtime/XmlHelpers.php',
-    'Latte\\Sandbox\\Nodes\\FunctionCallNode' => $vendorDir . '/latte/latte/src/Latte/Sandbox/Nodes/FunctionCallNode.php',
-    'Latte\\Sandbox\\Nodes\\MethodCallNode' => $vendorDir . '/latte/latte/src/Latte/Sandbox/Nodes/MethodCallNode.php',
-    'Latte\\Sandbox\\Nodes\\PropertyFetchNode' => $vendorDir . '/latte/latte/src/Latte/Sandbox/Nodes/PropertyFetchNode.php',
-    'Latte\\Sandbox\\Nodes\\SandboxNode' => $vendorDir . '/latte/latte/src/Latte/Sandbox/Nodes/SandboxNode.php',
-    'Latte\\Sandbox\\Nodes\\StaticMethodCallNode' => $vendorDir . '/latte/latte/src/Latte/Sandbox/Nodes/StaticMethodCallNode.php',
-    'Latte\\Sandbox\\Nodes\\StaticPropertyFetchNode' => $vendorDir . '/latte/latte/src/Latte/Sandbox/Nodes/StaticPropertyFetchNode.php',
-    'Latte\\Sandbox\\RuntimeChecker' => $vendorDir . '/latte/latte/src/Latte/Sandbox/RuntimeChecker.php',
-    'Latte\\Sandbox\\SandboxExtension' => $vendorDir . '/latte/latte/src/Latte/Sandbox/SandboxExtension.php',
-    'Latte\\Sandbox\\SecurityPolicy' => $vendorDir . '/latte/latte/src/Latte/Sandbox/SecurityPolicy.php',
-    'Latte\\SecurityViolationException' => $vendorDir . '/latte/latte/src/Latte/exceptions.php',
-    'Latte\\TemplateNotFoundException' => $vendorDir . '/latte/latte/src/Latte/exceptions.php',
-    'Latte\\Tools\\Linter' => $vendorDir . '/latte/latte/src/Tools/Linter.php',
-    'Latte\\Tools\\LinterExtension' => $vendorDir . '/latte/latte/src/Tools/LinterExtension.php',
-);
diff --git a/generated/php/vendor/composer/autoload_files.php b/generated/php/vendor/composer/autoload_files.php
deleted file mode 100644
index b30d2f3..0000000
--- a/generated/php/vendor/composer/autoload_files.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<?php
-
-// autoload_files.php @generated by Composer
-
-$vendorDir = dirname(__DIR__);
-$baseDir = dirname(dirname($vendorDir));
-
-return array(
-    '6e3fae29631ef280660b3cdad06f25a8' => $vendorDir . '/symfony/deprecation-contracts/function.php',
-    '320cde22f66dd4f5d3fd621d3e88b98f' => $vendorDir . '/symfony/polyfill-ctype/bootstrap.php',
-    '0e6d7bf4a5811bfa5cf40c5ccd6fae6a' => $vendorDir . '/symfony/polyfill-mbstring/bootstrap.php',
-    '89efb1254ef2d1c5d80096acd12c4098' => $vendorDir . '/twig/twig/src/Resources/core.php',
-    'ffecb95d45175fd40f75be8a23b34f90' => $vendorDir . '/twig/twig/src/Resources/debug.php',
-    'c7baa00073ee9c61edf148c51917cfb4' => $vendorDir . '/twig/twig/src/Resources/escaper.php',
-    'f844ccf1d25df8663951193c3fc307c8' => $vendorDir . '/twig/twig/src/Resources/string_loader.php',
-);
diff --git a/generated/php/vendor/composer/autoload_namespaces.php b/generated/php/vendor/composer/autoload_namespaces.php
deleted file mode 100644
index f1ae7a0..0000000
--- a/generated/php/vendor/composer/autoload_namespaces.php
+++ /dev/null
@@ -1,9 +0,0 @@
-<?php
-
-// autoload_namespaces.php @generated by Composer
-
-$vendorDir = dirname(__DIR__);
-$baseDir = dirname(dirname($vendorDir));
-
-return array(
-);
diff --git a/generated/php/vendor/composer/autoload_psr4.php b/generated/php/vendor/composer/autoload_psr4.php
deleted file mode 100644
index 1340590..0000000
--- a/generated/php/vendor/composer/autoload_psr4.php
+++ /dev/null
@@ -1,14 +0,0 @@
-<?php
-
-// autoload_psr4.php @generated by Composer
-
-$vendorDir = dirname(__DIR__);
-$baseDir = dirname(dirname($vendorDir));
-
-return array(
-    'UI8Kit\\' => array($baseDir . '/php/UI8Kit'),
-    'Twig\\' => array($vendorDir . '/twig/twig/src'),
-    'Symfony\\Polyfill\\Mbstring\\' => array($vendorDir . '/symfony/polyfill-mbstring'),
-    'Symfony\\Polyfill\\Ctype\\' => array($vendorDir . '/symfony/polyfill-ctype'),
-    'Latte\\' => array($vendorDir . '/latte/latte/src/Latte'),
-);
diff --git a/generated/php/vendor/composer/autoload_real.php b/generated/php/vendor/composer/autoload_real.php
deleted file mode 100644
index 40fcd7b..0000000
--- a/generated/php/vendor/composer/autoload_real.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<?php
-
-// autoload_real.php @generated by Composer
-
-class ComposerAutoloaderInite50ead6fd841707ba46459723d1eeeeb
-{
-    private static $loader;
-
-    public static function loadClassLoader($class)
-    {
-        if ('Composer\Autoload\ClassLoader' === $class) {
-            require __DIR__ . '/ClassLoader.php';
-        }
-    }
-
-    /**
-     * @return \Composer\Autoload\ClassLoader
-     */
-    public static function getLoader()
-    {
-        if (null !== self::$loader) {
-            return self::$loader;
-        }
-
-        require __DIR__ . '/platform_check.php';
-
-        spl_autoload_register(array('ComposerAutoloaderInite50ead6fd841707ba46459723d1eeeeb', 'loadClassLoader'), true, true);
-        self::$loader = $loader = new \Composer\Autoload\ClassLoader(\dirname(__DIR__));
-        spl_autoload_unregister(array('ComposerAutoloaderInite50ead6fd841707ba46459723d1eeeeb', 'loadClassLoader'));
-
-        require __DIR__ . '/autoload_static.php';
-        call_user_func(\Composer\Autoload\ComposerStaticInite50ead6fd841707ba46459723d1eeeeb::getInitializer($loader));
-
-        $loader->register(true);
-
-        $filesToLoad = \Composer\Autoload\ComposerStaticInite50ead6fd841707ba46459723d1eeeeb::$files;
-        $requireFile = \Closure::bind(static function ($fileIdentifier, $file) {
-            if (empty($GLOBALS['__composer_autoload_files'][$fileIdentifier])) {
-                $GLOBALS['__composer_autoload_files'][$fileIdentifier] = true;
-
-                require $file;
-            }
-        }, null, null);
-        foreach ($filesToLoad as $fileIdentifier => $file) {
-            $requireFile($fileIdentifier, $file);
-        }
-
-        return $loader;
-    }
-}
diff --git a/generated/php/vendor/composer/autoload_static.php b/generated/php/vendor/composer/autoload_static.php
deleted file mode 100644
index e48a1fe..0000000
--- a/generated/php/vendor/composer/autoload_static.php
+++ /dev/null
@@ -1,257 +0,0 @@
-<?php
-
-// autoload_static.php @generated by Composer
-
-namespace Composer\Autoload;
-
-class ComposerStaticInite50ead6fd841707ba46459723d1eeeeb
-{
-    public static $files = array (
-        '6e3fae29631ef280660b3cdad06f25a8' => __DIR__ . '/..' . '/symfony/deprecation-contracts/function.php',
-        '320cde22f66dd4f5d3fd621d3e88b98f' => __DIR__ . '/..' . '/symfony/polyfill-ctype/bootstrap.php',
-        '0e6d7bf4a5811bfa5cf40c5ccd6fae6a' => __DIR__ . '/..' . '/symfony/polyfill-mbstring/bootstrap.php',
-        '89efb1254ef2d1c5d80096acd12c4098' => __DIR__ . '/..' . '/twig/twig/src/Resources/core.php',
-        'ffecb95d45175fd40f75be8a23b34f90' => __DIR__ . '/..' . '/twig/twig/src/Resources/debug.php',
-        'c7baa00073ee9c61edf148c51917cfb4' => __DIR__ . '/..' . '/twig/twig/src/Resources/escaper.php',
-        'f844ccf1d25df8663951193c3fc307c8' => __DIR__ . '/..' . '/twig/twig/src/Resources/string_loader.php',
-    );
-
-    public static $prefixLengthsPsr4 = array (
-        'U' =>
-        array (
-            'UI8Kit\\' => 7,
-        ),
-        'T' =>
-        array (
-            'Twig\\' => 5,
-        ),
-        'S' =>
-        array (
-            'Symfony\\Polyfill\\Mbstring\\' => 26,
-            'Symfony\\Polyfill\\Ctype\\' => 23,
-        ),
-        'L' =>
-        array (
-            'Latte\\' => 6,
-        ),
-    );
-
-    public static $prefixDirsPsr4 = array (
-        'UI8Kit\\' =>
-        array (
-            0 => __DIR__ . '/../../..' . '/php/UI8Kit',
-        ),
-        'Twig\\' =>
-        array (
-            0 => __DIR__ . '/..' . '/twig/twig/src',
-        ),
-        'Symfony\\Polyfill\\Mbstring\\' =>
-        array (
-            0 => __DIR__ . '/..' . '/symfony/polyfill-mbstring',
-        ),
-        'Symfony\\Polyfill\\Ctype\\' =>
-        array (
-            0 => __DIR__ . '/..' . '/symfony/polyfill-ctype',
-        ),
-        'Latte\\' =>
-        array (
-            0 => __DIR__ . '/..' . '/latte/latte/src/Latte',
-        ),
-    );
-
-    public static $classMap = array (
-        'Composer\\InstalledVersions' => __DIR__ . '/..' . '/composer/InstalledVersions.php',
-        'Latte\\Attributes\\TemplateFilter' => __DIR__ . '/..' . '/latte/latte/src/Latte/attributes.php',
-        'Latte\\Attributes\\TemplateFunction' => __DIR__ . '/..' . '/latte/latte/src/Latte/attributes.php',
-        'Latte\\Bridges\\Tracy\\BlueScreenPanel' => __DIR__ . '/..' . '/latte/latte/src/Bridges/Tracy/BlueScreenPanel.php',
-        'Latte\\Bridges\\Tracy\\LattePanel' => __DIR__ . '/..' . '/latte/latte/src/Bridges/Tracy/LattePanel.php',
-        'Latte\\Bridges\\Tracy\\TracyExtension' => __DIR__ . '/..' . '/latte/latte/src/Bridges/Tracy/TracyExtension.php',
-        'Latte\\CompileException' => __DIR__ . '/..' . '/latte/latte/src/Latte/exceptions.php',
-        'Latte\\Compiler\\Block' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Block.php',
-        'Latte\\Compiler\\Dedent' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Dedent.php',
-        'Latte\\Compiler\\Escaper' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Escaper.php',
-        'Latte\\Compiler\\Node' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Node.php',
-        'Latte\\Compiler\\NodeHelpers' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/NodeHelpers.php',
-        'Latte\\Compiler\\NodeTraverser' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/NodeTraverser.php',
-        'Latte\\Compiler\\Nodes\\AreaNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/AreaNode.php',
-        'Latte\\Compiler\\Nodes\\AuxiliaryNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/AuxiliaryNode.php',
-        'Latte\\Compiler\\Nodes\\FragmentNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/FragmentNode.php',
-        'Latte\\Compiler\\Nodes\\Html\\AttributeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Html/AttributeNode.php',
-        'Latte\\Compiler\\Nodes\\Html\\BogusTagNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Html/BogusTagNode.php',
-        'Latte\\Compiler\\Nodes\\Html\\CommentNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Html/CommentNode.php',
-        'Latte\\Compiler\\Nodes\\Html\\ElementNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Html/ElementNode.php',
-        'Latte\\Compiler\\Nodes\\Html\\ExpressionAttributeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Html/ExpressionAttributeNode.php',
-        'Latte\\Compiler\\Nodes\\Html\\TagNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Html/TagNode.php',
-        'Latte\\Compiler\\Nodes\\NopNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/NopNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ArgumentNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ArgumentNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ArrayItemNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ArrayItemNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ClosureUseNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ClosureUseNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ComplexTypeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ComplexTypeNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ExpressionNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ExpressionNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\ArrayAccessNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayAccessNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\ArrayNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\AssignNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\AssignOpNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignOpNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\AuxiliaryNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AuxiliaryNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\BinaryOpNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/BinaryOpNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\CastNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CastNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\ClassConstantFetchNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClassConstantFetchNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\CloneNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CloneNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\ClosureNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClosureNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\ConstantFetchNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ConstantFetchNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\EmptyNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/EmptyNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\FilterCallNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FilterCallNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\FunctionCallNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FunctionCallNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\InNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\InstanceofNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InstanceofNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\IssetNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/IssetNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\MatchNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MatchNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\MethodCallNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MethodCallNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\NewNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/NewNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\PostOpNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PostOpNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\PreOpNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PreOpNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\PropertyFetchNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PropertyFetchNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\StaticMethodCallNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticMethodCallNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\StaticPropertyFetchNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticPropertyFetchNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\TemporaryNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TemporaryNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\TernaryNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TernaryNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\UnaryOpNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/UnaryOpNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Expression\\VariableNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/VariableNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\FilterNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/FilterNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\IdentifierNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/IdentifierNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\InterpolatedStringPartNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/InterpolatedStringPartNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\IntersectionTypeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/IntersectionTypeNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ListItemNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ListItemNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ListNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ListNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\MatchArmNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/MatchArmNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ModifierNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ModifierNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\NameNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/NameNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\NullableTypeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/NullableTypeNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\OperatorNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/OperatorNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ParameterNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ParameterNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\ScalarNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/ScalarNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Scalar\\BooleanNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/BooleanNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Scalar\\FloatNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/FloatNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Scalar\\IntegerNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/IntegerNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Scalar\\InterpolatedStringNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/InterpolatedStringNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Scalar\\NullNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/NullNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\Scalar\\StringNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/StringNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\SuperiorTypeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/SuperiorTypeNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\UnionTypeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/UnionTypeNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\VarLikeIdentifierNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/VarLikeIdentifierNode.php',
-        'Latte\\Compiler\\Nodes\\Php\\VariadicPlaceholderNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/Php/VariadicPlaceholderNode.php',
-        'Latte\\Compiler\\Nodes\\PrintNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/PrintNode.php',
-        'Latte\\Compiler\\Nodes\\StatementNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/StatementNode.php',
-        'Latte\\Compiler\\Nodes\\TemplateNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/TemplateNode.php',
-        'Latte\\Compiler\\Nodes\\TextNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Nodes/TextNode.php',
-        'Latte\\Compiler\\PhpHelpers' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/PhpHelpers.php',
-        'Latte\\Compiler\\Position' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Position.php',
-        'Latte\\Compiler\\PrintContext' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/PrintContext.php',
-        'Latte\\Compiler\\Range' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Range.php',
-        'Latte\\Compiler\\Tag' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Tag.php',
-        'Latte\\Compiler\\TagLexer' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/TagLexer.php',
-        'Latte\\Compiler\\TagParser' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/TagParser.php',
-        'Latte\\Compiler\\TagParserData' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/TagParserData.php',
-        'Latte\\Compiler\\TemplateGenerator' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/TemplateGenerator.php',
-        'Latte\\Compiler\\TemplateLexer' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/TemplateLexer.php',
-        'Latte\\Compiler\\TemplateParser' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/TemplateParser.php',
-        'Latte\\Compiler\\TemplateParserHtml' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/TemplateParserHtml.php',
-        'Latte\\Compiler\\Token' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/Token.php',
-        'Latte\\Compiler\\TokenStream' => __DIR__ . '/..' . '/latte/latte/src/Latte/Compiler/TokenStream.php',
-        'Latte\\ContentType' => __DIR__ . '/..' . '/latte/latte/src/Latte/ContentType.php',
-        'Latte\\Engine' => __DIR__ . '/..' . '/latte/latte/src/Latte/Engine.php',
-        'Latte\\Essential\\AuxiliaryIterator' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/AuxiliaryIterator.php',
-        'Latte\\Essential\\Blueprint' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Blueprint.php',
-        'Latte\\Essential\\CachingIterator' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/CachingIterator.php',
-        'Latte\\Essential\\CoreExtension' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/CoreExtension.php',
-        'Latte\\Essential\\Filters' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Filters.php',
-        'Latte\\Essential\\Nodes\\BlockNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/BlockNode.php',
-        'Latte\\Essential\\Nodes\\CaptureNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/CaptureNode.php',
-        'Latte\\Essential\\Nodes\\ContentTypeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/ContentTypeNode.php',
-        'Latte\\Essential\\Nodes\\CustomFunctionCallNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/CustomFunctionCallNode.php',
-        'Latte\\Essential\\Nodes\\DebugbreakNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/DebugbreakNode.php',
-        'Latte\\Essential\\Nodes\\DefineNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/DefineNode.php',
-        'Latte\\Essential\\Nodes\\DoNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/DoNode.php',
-        'Latte\\Essential\\Nodes\\DumpNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/DumpNode.php',
-        'Latte\\Essential\\Nodes\\EmbedNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/EmbedNode.php',
-        'Latte\\Essential\\Nodes\\ExtendsNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/ExtendsNode.php',
-        'Latte\\Essential\\Nodes\\FirstLastSepNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/FirstLastSepNode.php',
-        'Latte\\Essential\\Nodes\\ForNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/ForNode.php',
-        'Latte\\Essential\\Nodes\\ForeachNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/ForeachNode.php',
-        'Latte\\Essential\\Nodes\\IfChangedNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/IfChangedNode.php',
-        'Latte\\Essential\\Nodes\\IfContentNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/IfContentNode.php',
-        'Latte\\Essential\\Nodes\\IfNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/IfNode.php',
-        'Latte\\Essential\\Nodes\\ImportNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/ImportNode.php',
-        'Latte\\Essential\\Nodes\\IncludeBlockNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/IncludeBlockNode.php',
-        'Latte\\Essential\\Nodes\\IncludeFileNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/IncludeFileNode.php',
-        'Latte\\Essential\\Nodes\\IterateWhileNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/IterateWhileNode.php',
-        'Latte\\Essential\\Nodes\\JumpNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/JumpNode.php',
-        'Latte\\Essential\\Nodes\\NAttrNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/NAttrNode.php',
-        'Latte\\Essential\\Nodes\\NClassNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/NClassNode.php',
-        'Latte\\Essential\\Nodes\\NElseNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/NElseNode.php',
-        'Latte\\Essential\\Nodes\\NTagNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/NTagNode.php',
-        'Latte\\Essential\\Nodes\\ParametersNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/ParametersNode.php',
-        'Latte\\Essential\\Nodes\\RawPhpNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/RawPhpNode.php',
-        'Latte\\Essential\\Nodes\\RollbackNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/RollbackNode.php',
-        'Latte\\Essential\\Nodes\\SpacelessNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/SpacelessNode.php',
-        'Latte\\Essential\\Nodes\\SwitchNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/SwitchNode.php',
-        'Latte\\Essential\\Nodes\\TemplatePrintNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/TemplatePrintNode.php',
-        'Latte\\Essential\\Nodes\\TemplateTypeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/TemplateTypeNode.php',
-        'Latte\\Essential\\Nodes\\TraceNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/TraceNode.php',
-        'Latte\\Essential\\Nodes\\TranslateNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/TranslateNode.php',
-        'Latte\\Essential\\Nodes\\TryNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/TryNode.php',
-        'Latte\\Essential\\Nodes\\VarNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/VarNode.php',
-        'Latte\\Essential\\Nodes\\VarPrintNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/VarPrintNode.php',
-        'Latte\\Essential\\Nodes\\VarTypeNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/VarTypeNode.php',
-        'Latte\\Essential\\Nodes\\WhileNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Nodes/WhileNode.php',
-        'Latte\\Essential\\Passes' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Passes.php',
-        'Latte\\Essential\\RawPhpExtension' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/RawPhpExtension.php',
-        'Latte\\Essential\\RollbackException' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/RollbackException.php',
-        'Latte\\Essential\\Tracer' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/Tracer.php',
-        'Latte\\Essential\\TranslatorExtension' => __DIR__ . '/..' . '/latte/latte/src/Latte/Essential/TranslatorExtension.php',
-        'Latte\\Exception' => __DIR__ . '/..' . '/latte/latte/src/Latte/exceptions.php',
-        'Latte\\Extension' => __DIR__ . '/..' . '/latte/latte/src/Latte/Extension.php',
-        'Latte\\Feature' => __DIR__ . '/..' . '/latte/latte/src/Latte/enums.php',
-        'Latte\\Helpers' => __DIR__ . '/..' . '/latte/latte/src/Latte/Helpers.php',
-        'Latte\\Loader' => __DIR__ . '/..' . '/latte/latte/src/Latte/Loader.php',
-        'Latte\\Loaders\\FileLoader' => __DIR__ . '/..' . '/latte/latte/src/Latte/Loaders/FileLoader.php',
-        'Latte\\Loaders\\StringLoader' => __DIR__ . '/..' . '/latte/latte/src/Latte/Loaders/StringLoader.php',
-        'Latte\\Policy' => __DIR__ . '/..' . '/latte/latte/src/Latte/Policy.php',
-        'Latte\\PositionAwareException' => __DIR__ . '/..' . '/latte/latte/src/Latte/exceptions.php',
-        'Latte\\RuntimeException' => __DIR__ . '/..' . '/latte/latte/src/Latte/exceptions.php',
-        'Latte\\Runtime\\Block' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/Block.php',
-        'Latte\\Runtime\\Cache' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/Cache.php',
-        'Latte\\Runtime\\FilterExecutor' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/FilterExecutor.php',
-        'Latte\\Runtime\\FilterInfo' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/FilterInfo.php',
-        'Latte\\Runtime\\FunctionExecutor' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/FunctionExecutor.php',
-        'Latte\\Runtime\\Helpers' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/Helpers.php',
-        'Latte\\Runtime\\Html' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/Html.php',
-        'Latte\\Runtime\\HtmlHelpers' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/HtmlHelpers.php',
-        'Latte\\Runtime\\HtmlStringable' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/HtmlStringable.php',
-        'Latte\\Runtime\\Template' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/Template.php',
-        'Latte\\Runtime\\XmlHelpers' => __DIR__ . '/..' . '/latte/latte/src/Latte/Runtime/XmlHelpers.php',
-        'Latte\\Sandbox\\Nodes\\FunctionCallNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Sandbox/Nodes/FunctionCallNode.php',
-        'Latte\\Sandbox\\Nodes\\MethodCallNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Sandbox/Nodes/MethodCallNode.php',
-        'Latte\\Sandbox\\Nodes\\PropertyFetchNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Sandbox/Nodes/PropertyFetchNode.php',
-        'Latte\\Sandbox\\Nodes\\SandboxNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Sandbox/Nodes/SandboxNode.php',
-        'Latte\\Sandbox\\Nodes\\StaticMethodCallNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Sandbox/Nodes/StaticMethodCallNode.php',
-        'Latte\\Sandbox\\Nodes\\StaticPropertyFetchNode' => __DIR__ . '/..' . '/latte/latte/src/Latte/Sandbox/Nodes/StaticPropertyFetchNode.php',
-        'Latte\\Sandbox\\RuntimeChecker' => __DIR__ . '/..' . '/latte/latte/src/Latte/Sandbox/RuntimeChecker.php',
-        'Latte\\Sandbox\\SandboxExtension' => __DIR__ . '/..' . '/latte/latte/src/Latte/Sandbox/SandboxExtension.php',
-        'Latte\\Sandbox\\SecurityPolicy' => __DIR__ . '/..' . '/latte/latte/src/Latte/Sandbox/SecurityPolicy.php',
-        'Latte\\SecurityViolationException' => __DIR__ . '/..' . '/latte/latte/src/Latte/exceptions.php',
-        'Latte\\TemplateNotFoundException' => __DIR__ . '/..' . '/latte/latte/src/Latte/exceptions.php',
-        'Latte\\Tools\\Linter' => __DIR__ . '/..' . '/latte/latte/src/Tools/Linter.php',
-        'Latte\\Tools\\LinterExtension' => __DIR__ . '/..' . '/latte/latte/src/Tools/LinterExtension.php',
-    );
-
-    public static function getInitializer(ClassLoader $loader)
-    {
-        return \Closure::bind(function () use ($loader) {
-            $loader->prefixLengthsPsr4 = ComposerStaticInite50ead6fd841707ba46459723d1eeeeb::$prefixLengthsPsr4;
-            $loader->prefixDirsPsr4 = ComposerStaticInite50ead6fd841707ba46459723d1eeeeb::$prefixDirsPsr4;
-            $loader->classMap = ComposerStaticInite50ead6fd841707ba46459723d1eeeeb::$classMap;
-
-        }, null, ClassLoader::class);
-    }
-}
diff --git a/generated/php/vendor/composer/installed.json b/generated/php/vendor/composer/installed.json
deleted file mode 100644
index 2ad9183..0000000
--- a/generated/php/vendor/composer/installed.json
+++ /dev/null
@@ -1,431 +0,0 @@
-{
-    "packages": [
-        {
-            "name": "latte/latte",
-            "version": "v3.1.4",
-            "version_normalized": "3.1.4.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/nette/latte.git",
-                "reference": "14dea9fc32c0d1cf5e9a1bd59556ae8be023c2a6"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/nette/latte/zipball/14dea9fc32c0d1cf5e9a1bd59556ae8be023c2a6",
-                "reference": "14dea9fc32c0d1cf5e9a1bd59556ae8be023c2a6",
-                "shasum": ""
-            },
-            "require": {
-                "ext-json": "*",
-                "ext-tokenizer": "*",
-                "php": "8.2 - 8.5"
-            },
-            "conflict": {
-                "nette/application": "<3.1.7",
-                "nette/caching": "<3.1.4"
-            },
-            "require-dev": {
-                "nette/php-generator": "^4.0",
-                "nette/phpstan-rules": "^1.0",
-                "nette/tester": "^2.6",
-                "nette/utils": "^4.0",
-                "phpstan/extension-installer": "^1.4@stable",
-                "phpstan/phpstan": "^2.1@stable",
-                "tracy/tracy": "^2.10"
-            },
-            "suggest": {
-                "ext-fileinfo": "to use filter |datastream",
-                "ext-iconv": "to use filters |reverse, |substring",
-                "ext-intl": "to use Latte\\Engine::setLocale()",
-                "ext-mbstring": "to use filters like lower, upper, capitalize, ...",
-                "nette/php-generator": "to use tag {templatePrint}",
-                "nette/utils": "to use filter |webalize"
-            },
-            "time": "2026-04-23T06:30:25+00:00",
-            "bin": [
-                "bin/latte-lint"
-            ],
-            "type": "library",
-            "extra": {
-                "branch-alias": {
-                    "dev-master": "3.1-dev"
-                }
-            },
-            "installation-source": "dist",
-            "autoload": {
-                "psr-4": {
-                    "Latte\\": "src/Latte"
-                },
-                "classmap": [
-                    "src/"
-                ]
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause",
-                "GPL-2.0-only",
-                "GPL-3.0-only"
-            ],
-            "authors": [
-                {
-                    "name": "David Grudl",
-                    "homepage": "https://davidgrudl.com"
-                },
-                {
-                    "name": "Nette Community",
-                    "homepage": "https://nette.org/contributors"
-                }
-            ],
-            "description": "☕ Latte: the intuitive and fast template engine for those who want the most secure PHP sites. Introduces context-sensitive escaping.",
-            "homepage": "https://latte.nette.org",
-            "keywords": [
-                "context-sensitive",
-                "engine",
-                "escaping",
-                "html",
-                "nette",
-                "security",
-                "template",
-                "twig"
-            ],
-            "support": {
-                "issues": "https://github.com/nette/latte/issues",
-                "source": "https://github.com/nette/latte/tree/v3.1.4"
-            },
-            "install-path": "../latte/latte"
-        },
-        {
-            "name": "symfony/deprecation-contracts",
-            "version": "v3.7.1",
-            "version_normalized": "3.7.1.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/deprecation-contracts.git",
-                "reference": "f3202fa1b5097b0af062dc978b32ecf63404e31d"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/deprecation-contracts/zipball/f3202fa1b5097b0af062dc978b32ecf63404e31d",
-                "reference": "f3202fa1b5097b0af062dc978b32ecf63404e31d",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=8.1"
-            },
-            "time": "2026-06-05T06:23:12+00:00",
-            "type": "library",
-            "extra": {
-                "thanks": {
-                    "url": "https://github.com/symfony/contracts",
-                    "name": "symfony/contracts"
-                },
-                "branch-alias": {
-                    "dev-main": "3.7-dev"
-                }
-            },
-            "installation-source": "dist",
-            "autoload": {
-                "files": [
-                    "function.php"
-                ]
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Nicolas Grekas",
-                    "email": "p@tchwork.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "A generic function and convention to trigger deprecation notices",
-            "homepage": "https://symfony.com",
-            "support": {
-                "source": "https://github.com/symfony/deprecation-contracts/tree/v3.7.1"
-            },
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://github.com/nicolas-grekas",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "install-path": "../symfony/deprecation-contracts"
-        },
-        {
-            "name": "symfony/polyfill-ctype",
-            "version": "v1.37.0",
-            "version_normalized": "1.37.0.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/polyfill-ctype.git",
-                "reference": "141046a8f9477948ff284fa65be2095baafb94f2"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/141046a8f9477948ff284fa65be2095baafb94f2",
-                "reference": "141046a8f9477948ff284fa65be2095baafb94f2",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=7.2"
-            },
-            "provide": {
-                "ext-ctype": "*"
-            },
-            "suggest": {
-                "ext-ctype": "For best performance"
-            },
-            "time": "2026-04-10T16:19:22+00:00",
-            "type": "library",
-            "extra": {
-                "thanks": {
-                    "url": "https://github.com/symfony/polyfill",
-                    "name": "symfony/polyfill"
-                }
-            },
-            "installation-source": "dist",
-            "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
-                "psr-4": {
-                    "Symfony\\Polyfill\\Ctype\\": ""
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Gert de Pagter",
-                    "email": "BackEndTea@gmail.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Symfony polyfill for ctype functions",
-            "homepage": "https://symfony.com",
-            "keywords": [
-                "compatibility",
-                "ctype",
-                "polyfill",
-                "portable"
-            ],
-            "support": {
-                "source": "https://github.com/symfony/polyfill-ctype/tree/v1.37.0"
-            },
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://github.com/nicolas-grekas",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "install-path": "../symfony/polyfill-ctype"
-        },
-        {
-            "name": "symfony/polyfill-mbstring",
-            "version": "v1.38.2",
-            "version_normalized": "1.38.2.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/polyfill-mbstring.git",
-                "reference": "d3d318bad5e7a1bfbd026009c8bfb8d8f99ae6b6"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/d3d318bad5e7a1bfbd026009c8bfb8d8f99ae6b6",
-                "reference": "d3d318bad5e7a1bfbd026009c8bfb8d8f99ae6b6",
-                "shasum": ""
-            },
-            "require": {
-                "ext-iconv": "*",
-                "php": ">=7.2"
-            },
-            "provide": {
-                "ext-mbstring": "*"
-            },
-            "suggest": {
-                "ext-mbstring": "For best performance"
-            },
-            "time": "2026-05-27T06:59:30+00:00",
-            "type": "library",
-            "extra": {
-                "thanks": {
-                    "url": "https://github.com/symfony/polyfill",
-                    "name": "symfony/polyfill"
-                }
-            },
-            "installation-source": "dist",
-            "autoload": {
-                "files": [
-                    "bootstrap.php"
-                ],
-                "psr-4": {
-                    "Symfony\\Polyfill\\Mbstring\\": ""
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Nicolas Grekas",
-                    "email": "p@tchwork.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Symfony polyfill for the Mbstring extension",
-            "homepage": "https://symfony.com",
-            "keywords": [
-                "compatibility",
-                "mbstring",
-                "polyfill",
-                "portable",
-                "shim"
-            ],
-            "support": {
-                "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.38.2"
-            },
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://github.com/nicolas-grekas",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "install-path": "../symfony/polyfill-mbstring"
-        },
-        {
-            "name": "twig/twig",
-            "version": "v3.28.0",
-            "version_normalized": "3.28.0.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/twigphp/Twig.git",
-                "reference": "597c12ed286fb9d1701a36684ce6e0cbe28ebc8b"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/twigphp/Twig/zipball/597c12ed286fb9d1701a36684ce6e0cbe28ebc8b",
-                "reference": "597c12ed286fb9d1701a36684ce6e0cbe28ebc8b",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=8.1.0",
-                "symfony/deprecation-contracts": "^2.5|^3",
-                "symfony/polyfill-ctype": "^1.8",
-                "symfony/polyfill-mbstring": "^1.3"
-            },
-            "require-dev": {
-                "php-cs-fixer/shim": "^3.0@stable",
-                "phpstan/phpstan": "^2.0@stable",
-                "psr/container": "^1.0|^2.0",
-                "symfony/phpunit-bridge": "^5.4.9|^6.4|^7.0"
-            },
-            "time": "2026-07-03T20:44:34+00:00",
-            "type": "library",
-            "installation-source": "dist",
-            "autoload": {
-                "files": [
-                    "src/Resources/core.php",
-                    "src/Resources/debug.php",
-                    "src/Resources/escaper.php",
-                    "src/Resources/string_loader.php"
-                ],
-                "psr-4": {
-                    "Twig\\": "src/"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "BSD-3-Clause"
-            ],
-            "authors": [
-                {
-                    "name": "Fabien Potencier",
-                    "email": "fabien@symfony.com",
-                    "homepage": "http://fabien.potencier.org",
-                    "role": "Lead Developer"
-                },
-                {
-                    "name": "Twig Team",
-                    "role": "Contributors"
-                },
-                {
-                    "name": "Armin Ronacher",
-                    "email": "armin.ronacher@active-4.com",
-                    "role": "Project Founder"
-                }
-            ],
-            "description": "Twig, the flexible, fast, and secure template language for PHP",
-            "homepage": "https://twig.symfony.com",
-            "keywords": [
-                "templating"
-            ],
-            "support": {
-                "issues": "https://github.com/twigphp/Twig/issues",
-                "source": "https://github.com/twigphp/Twig/tree/v3.28.0"
-            },
-            "funding": [
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
-                    "type": "tidelift"
-                }
-            ],
-            "install-path": "../twig/twig"
-        }
-    ],
-    "dev": true,
-    "dev-package-names": []
-}
diff --git a/generated/php/vendor/composer/installed.php b/generated/php/vendor/composer/installed.php
deleted file mode 100644
index e8c34c8..0000000
--- a/generated/php/vendor/composer/installed.php
+++ /dev/null
@@ -1,68 +0,0 @@
-<?php return array(
-    'root' => array(
-        'name' => '__root__',
-        'pretty_version' => 'dev-main',
-        'version' => 'dev-main',
-        'reference' => '3a7f4da640c42b5aba416c84f44509af7e880950',
-        'type' => 'library',
-        'install_path' => __DIR__ . '/../../../',
-        'aliases' => array(),
-        'dev' => true,
-    ),
-    'versions' => array(
-        '__root__' => array(
-            'pretty_version' => 'dev-main',
-            'version' => 'dev-main',
-            'reference' => '3a7f4da640c42b5aba416c84f44509af7e880950',
-            'type' => 'library',
-            'install_path' => __DIR__ . '/../../../',
-            'aliases' => array(),
-            'dev_requirement' => false,
-        ),
-        'latte/latte' => array(
-            'pretty_version' => 'v3.1.4',
-            'version' => '3.1.4.0',
-            'reference' => '14dea9fc32c0d1cf5e9a1bd59556ae8be023c2a6',
-            'type' => 'library',
-            'install_path' => __DIR__ . '/../latte/latte',
-            'aliases' => array(),
-            'dev_requirement' => false,
-        ),
-        'symfony/deprecation-contracts' => array(
-            'pretty_version' => 'v3.7.1',
-            'version' => '3.7.1.0',
-            'reference' => 'f3202fa1b5097b0af062dc978b32ecf63404e31d',
-            'type' => 'library',
-            'install_path' => __DIR__ . '/../symfony/deprecation-contracts',
-            'aliases' => array(),
-            'dev_requirement' => false,
-        ),
-        'symfony/polyfill-ctype' => array(
-            'pretty_version' => 'v1.37.0',
-            'version' => '1.37.0.0',
-            'reference' => '141046a8f9477948ff284fa65be2095baafb94f2',
-            'type' => 'library',
-            'install_path' => __DIR__ . '/../symfony/polyfill-ctype',
-            'aliases' => array(),
-            'dev_requirement' => false,
-        ),
-        'symfony/polyfill-mbstring' => array(
-            'pretty_version' => 'v1.38.2',
-            'version' => '1.38.2.0',
-            'reference' => 'd3d318bad5e7a1bfbd026009c8bfb8d8f99ae6b6',
-            'type' => 'library',
-            'install_path' => __DIR__ . '/../symfony/polyfill-mbstring',
-            'aliases' => array(),
-            'dev_requirement' => false,
-        ),
-        'twig/twig' => array(
-            'pretty_version' => 'v3.28.0',
-            'version' => '3.28.0.0',
-            'reference' => '597c12ed286fb9d1701a36684ce6e0cbe28ebc8b',
-            'type' => 'library',
-            'install_path' => __DIR__ . '/../twig/twig',
-            'aliases' => array(),
-            'dev_requirement' => false,
-        ),
-    ),
-);
diff --git a/generated/php/vendor/composer/platform_check.php b/generated/php/vendor/composer/platform_check.php
deleted file mode 100644
index 14bf88d..0000000
--- a/generated/php/vendor/composer/platform_check.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-
-// platform_check.php @generated by Composer
-
-$issues = array();
-
-if (!(PHP_VERSION_ID >= 80200)) {
-    $issues[] = 'Your Composer dependencies require a PHP version ">= 8.2.0". You are running ' . PHP_VERSION . '.';
-}
-
-if ($issues) {
-    if (!headers_sent()) {
-        header('HTTP/1.1 500 Internal Server Error');
-    }
-    if (!ini_get('display_errors')) {
-        if (PHP_SAPI === 'cli' || PHP_SAPI === 'phpdbg') {
-            fwrite(STDERR, 'Composer detected issues in your platform:' . PHP_EOL.PHP_EOL . implode(PHP_EOL, $issues) . PHP_EOL.PHP_EOL);
-        } elseif (!headers_sent()) {
-            echo 'Composer detected issues in your platform:' . PHP_EOL.PHP_EOL . str_replace('You are running '.PHP_VERSION.'.', '', implode(PHP_EOL, $issues)) . PHP_EOL.PHP_EOL;
-        }
-    }
-    throw new \RuntimeException(
-        'Composer detected issues in your platform: ' . implode(' ', $issues)
-    );
-}
diff --git a/generated/php/vendor/latte/latte/bin/latte-lint b/generated/php/vendor/latte/latte/bin/latte-lint
deleted file mode 100644
index 34d38bc..0000000
--- a/generated/php/vendor/latte/latte/bin/latte-lint
+++ /dev/null
@@ -1,40 +0,0 @@
-#!/usr/bin/env php
-<?php declare(strict_types=1);
-
-if (
-	!(is_file($file = __DIR__ . '/../vendor/autoload.php') && include $file) &&
-	!(is_file($file = __DIR__ . '/../../../autoload.php') && include $file)
-) {
-	fwrite(STDERR, "Install packages using Composer.\n");
-	exit(1);
-}
-
-
-echo '
-Latte linter
-------------
-';
-
-if ($argc < 2) {
-	echo "Usage: latte-lint <path>\n";
-	exit(1);
-}
-
-if ($debug = in_array('--debug', $argv, true)) {
-	echo "Debug mode\n";
-}
-if ($strict = in_array('--strict', $argv, true)) {
-	echo "Strict mode\n";
-}
-
-$path = $argv[1];
-
-try {
-	$linter = new Latte\Tools\Linter(debug: $debug, strict: $strict);
-	$ok = $linter->scanDirectory($path);
-	exit($ok ? 0 : 1);
-
-} catch (Throwable $e) {
-	fwrite(STDERR, $debug ? "\n$e\n" : "\nError: {$e->getMessage()}\n");
-	exit(2);
-}
diff --git a/generated/php/vendor/latte/latte/composer.json b/generated/php/vendor/latte/latte/composer.json
deleted file mode 100644
index de78c53..0000000
--- a/generated/php/vendor/latte/latte/composer.json
+++ /dev/null
@@ -1,65 +0,0 @@
-{
-	"name": "latte/latte",
-	"description": "☕ Latte: the intuitive and fast template engine for those who want the most secure PHP sites. Introduces context-sensitive escaping.",
-	"keywords": ["template", "nette", "security", "engine", "html", "twig", "context-sensitive", "escaping"],
-	"homepage": "https://latte.nette.org",
-	"license": ["BSD-3-Clause", "GPL-2.0-only", "GPL-3.0-only"],
-	"authors": [
-		{
-			"name": "David Grudl",
-			"homepage": "https://davidgrudl.com"
-		},
-		{
-			"name": "Nette Community",
-			"homepage": "https://nette.org/contributors"
-		}
-	],
-	"require": {
-		"php": "8.2 - 8.5",
-		"ext-json": "*",
-		"ext-tokenizer": "*"
-	},
-	"require-dev": {
-		"nette/tester": "^2.6",
-		"tracy/tracy": "^2.10",
-		"nette/utils": "^4.0",
-		"nette/php-generator": "^4.0",
-		"phpstan/phpstan": "^2.1@stable",
-		"phpstan/extension-installer": "^1.4@stable",
-		"nette/phpstan-rules": "^1.0"
-	},
-	"suggest": {
-		"ext-iconv": "to use filters |reverse, |substring",
-		"ext-mbstring": "to use filters like lower, upper, capitalize, ...",
-		"ext-fileinfo": "to use filter |datastream",
-		"ext-intl": "to use Latte\\Engine::setLocale()",
-		"nette/utils": "to use filter |webalize",
-		"nette/php-generator": "to use tag {templatePrint}"
-	},
-	"conflict": {
-		"nette/application": "<3.1.7",
-		"nette/caching": "<3.1.4"
-	},
-	"autoload": {
-		"classmap": ["src/"],
-		"psr-4": {
-			"Latte\\": "src/Latte"
-		}
-	},
-	"minimum-stability": "dev",
-	"bin": ["bin/latte-lint"],
-	"scripts": {
-		"phpstan": "phpstan analyse",
-		"tester": "tester tests -s"
-	},
-	"extra": {
-		"branch-alias": {
-			"dev-master": "3.1-dev"
-		}
-	},
-	"config": {
-		"allow-plugins": {
-			"phpstan/extension-installer": true
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/license.md b/generated/php/vendor/latte/latte/license.md
deleted file mode 100644
index cf741bd..0000000
--- a/generated/php/vendor/latte/latte/license.md
+++ /dev/null
@@ -1,60 +0,0 @@
-Licenses
-========
-
-Good news! You may use Nette Framework under the terms of either
-the New BSD License or the GNU General Public License (GPL) version 2 or 3.
-
-The BSD License is recommended for most projects. It is easy to understand and it
-places almost no restrictions on what you can do with the framework. If the GPL
-fits better to your project, you can use the framework under this license.
-
-You don't have to notify anyone which license you are using. You can freely
-use Nette Framework in commercial projects as long as the copyright header
-remains intact.
-
-Please be advised that the name "Nette Framework" is a protected trademark and its
-usage has some limitations. So please do not use word "Nette" in the name of your
-project or top-level domain, and choose a name that stands on its own merits.
-If your stuff is good, it will not take long to establish a reputation for yourselves.
-
-
-New BSD License
----------------
-
-Copyright (c) 2004, 2014 David Grudl (https://davidgrudl.com)
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
-
-	* Redistributions of source code must retain the above copyright notice,
-	this list of conditions and the following disclaimer.
-
-	* Redistributions in binary form must reproduce the above copyright notice,
-	this list of conditions and the following disclaimer in the documentation
-	and/or other materials provided with the distribution.
-
-	* Neither the name of "Nette Framework" nor the names of its contributors
-	may be used to endorse or promote products derived from this software
-	without specific prior written permission.
-
-This software is provided by the copyright holders and contributors "as is" and
-any express or implied warranties, including, but not limited to, the implied
-warranties of merchantability and fitness for a particular purpose are
-disclaimed. In no event shall the copyright owner or contributors be liable for
-any direct, indirect, incidental, special, exemplary, or consequential damages
-(including, but not limited to, procurement of substitute goods or services;
-loss of use, data, or profits; or business interruption) however caused and on
-any theory of liability, whether in contract, strict liability, or tort
-(including negligence or otherwise) arising in any way out of the use of this
-software, even if advised of the possibility of such damage.
-
-
-GNU General Public License
---------------------------
-
-GPL licenses are very very long, so instead of including them here we offer
-you URLs with full text:
-
-- [GPL version 2](http://www.gnu.org/licenses/gpl-2.0.html)
-- [GPL version 3](http://www.gnu.org/licenses/gpl-3.0.html)
diff --git a/generated/php/vendor/latte/latte/readme.md b/generated/php/vendor/latte/latte/readme.md
deleted file mode 100644
index 3b76fcd..0000000
--- a/generated/php/vendor/latte/latte/readme.md
+++ /dev/null
@@ -1,47 +0,0 @@
-[![Latte](https://github.com/nette/latte/assets/194960/76c098ff-427c-4b30-9676-97e2d8fd4a56)](https://latte.nette.org)
-
- <!---->
-
-<h3>
-
-✅ The [only truly secure](https://latte.nette.org/en/safety-first) templating system for PHP<br>
-✅ [You already know the syntax](https://latte.nette.org/en/syntax)<br>
-✅ Highly mature, fast, and widely used library
-
-</h3>
-
- <!---->
-
-Latte is the safest templating system for PHP. It is cleverly designed and easy to learn for those familiar with PHP, as they can quickly adopt its basic tags.
-A wide range of useful features will significantly simplify your work. It provides top-notch protection against critical vulnerabilities and allows you to focus on creating high-quality applications without worrying about their security.
-
-🟨 Only 1% of programmers [can pass this quiz](https://blog.nette.org/en/quiz-can-you-defend-against-xss-vulnerability)!
-
- <!---->
-
-Getting started
-=======
-
-<h3>
-
-1️⃣ First, familiarize yourself with [Latte syntax](https://latte.nette.org/en/syntax) and [try it online](https://fiddle.nette.org/latte/#9cc0cf6d89)<br>
-2️⃣ Take a look at the basic set of [tags](https://latte.nette.org/en/tags) and [filters](https://latte.nette.org/en/filters)<br>
-3️⃣ Render a template with a [few lines of PHP code](https://latte.nette.org/en/develop)
-
-</h3>
-
- <!---->
-
-Editor Integration
-==================
-
-- PhpStorm ([Latte](https://plugins.jetbrains.com/plugin/24218-latte-support) or [Latte Pro](https://plugins.jetbrains.com/plugin/19661-latte-pro))
-- Visual Studio Code ([Nette Latte + Neon](https://marketplace.visualstudio.com/items?itemName=Kasik96.latte) or [Nette for VS Code](https://marketplace.visualstudio.com/items?itemName=franken-ui.nette-for-vscode))
-
- <!---->
-
-Do you like Latte? Are you looking forward to the new features?
-
-[![Buy me a coffee](https://files.nette.org/icons/donation-3.svg)](https://github.com/sponsors/dg)
-
-Thank you!
diff --git a/generated/php/vendor/latte/latte/src/Bridges/Tracy/BlueScreenPanel.php b/generated/php/vendor/latte/latte/src/Bridges/Tracy/BlueScreenPanel.php
deleted file mode 100644
index aa676d4..0000000
--- a/generated/php/vendor/latte/latte/src/Bridges/Tracy/BlueScreenPanel.php
+++ /dev/null
@@ -1,98 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Bridges\Tracy;
-
-use Latte;
-use Tracy;
-use Tracy\BlueScreen;
-use Tracy\Helpers;
-use const ENT_IGNORE;
-
-
-/**
- * BlueScreen panels for Tracy 2.x
- * @internal
- */
-class BlueScreenPanel
-{
-	private static bool $initialized = false;
-
-
-	public static function initialize(?BlueScreen $blueScreen = null): void
-	{
-		if (self::$initialized) {
-			return;
-		}
-		self::$initialized = true;
-
-		$blueScreen ??= Tracy\Debugger::getBlueScreen();
-		$blueScreen->addPanel(self::renderError(...));
-		$blueScreen->addAction(self::renderUnknownMacro(...));
-		if (
-			version_compare(Tracy\Debugger::VERSION, '2.9.0', '>=')
-			&& version_compare(Tracy\Debugger::VERSION, '3.0', '<')
-		) {
-			Tracy\Debugger::addSourceMapper(self::mapLatteSourceCode(...));
-			$blueScreen->addFileGenerator(fn(string $file) => str_ends_with($file, '.latte')
-					? "{block content}\n\$END\$"
-					: null);
-		}
-	}
-
-
-	/** @return ?array{tab: string, panel: string} */
-	public static function renderError(?\Throwable $e): ?array
-	{
-		if ($e instanceof Latte\CompileException && $e->sourceName) {
-			return [
-				'tab' => 'Template',
-				'panel' => (preg_match('#\n|\?#', $e->sourceName)
-						? ''
-						: '<p>'
-							. (@is_file($e->sourceName) // @ - may trigger error
-								? '<b>File:</b> ' . Helpers::editorLink($e->sourceName, $e->position?->line)
-								: '<b>' . htmlspecialchars($e->sourceName . ($e->position?->line ? ':' . $e->position->line : '')) . '</b>')
-							. '</p>')
-					. '<pre class="code tracy-code"><div>'
-					. BlueScreen::highlightLine(htmlspecialchars($e->sourceCode ?? '', ENT_IGNORE, 'UTF-8'), $e->position->line ?? 0, 15, $e->position->column ?? 0)
-					. '</div></pre>',
-			];
-		}
-
-		return null;
-	}
-
-
-	/** @return ?array{link: string, label: string} */
-	public static function renderUnknownMacro(?\Throwable $e): ?array
-	{
-		if (
-			$e instanceof Latte\CompileException
-			&& $e->sourceName
-			&& @is_file($e->sourceName) // @ - may trigger error
-			&& (preg_match('#Unknown tag (\{\w+)\}, did you mean (\{\w+)\}\?#A', $e->getMessage(), $m)
-				|| preg_match('#Unknown attribute (n:\w+), did you mean (n:\w+)\?#A', $e->getMessage(), $m))
-		) {
-			return [
-				'link' => (string) Helpers::editorUri($e->sourceName, $e->position?->line, 'fix', $m[1], $m[2]),
-				'label' => 'fix it',
-			];
-		}
-
-		return null;
-	}
-
-
-	/** @return array{file: string, line: int, label: string, active: bool} */
-	public static function mapLatteSourceCode(string $file, int $line): ?array
-	{
-		return ($source = Latte\Helpers::mapCompiledToSource($file, $line)) && $source['name'] !== null && @is_file($source['name']) // @ - may trigger error
-			? ['file' => $source['name'], 'line' => $source['line'] ?? 0, 'column' => $source['column'] ?? 0, 'label' => 'Latte', 'active' => true]
-			: null;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Bridges/Tracy/LattePanel.php b/generated/php/vendor/latte/latte/src/Bridges/Tracy/LattePanel.php
deleted file mode 100644
index debe1c2..0000000
--- a/generated/php/vendor/latte/latte/src/Bridges/Tracy/LattePanel.php
+++ /dev/null
@@ -1,124 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Bridges\Tracy;
-
-use Latte\Engine;
-use Latte\Extension;
-use Latte\Runtime\Template;
-use Tracy;
-
-
-/**
- * Bar panel for Tracy 2.x
- * @internal
- */
-class LattePanel implements Tracy\IBarPanel
-{
-	public bool $dumpParameters = true;
-
-	/** @var Template[] */
-	private array $templates = [];
-
-	/** @var \stdClass[] */
-	private array $list;
-	private ?string $name = null;
-
-
-	#[\Deprecated('use TracyExtension see https://bit.ly/46flfDi')]
-	public static function initialize(Engine $latte, ?string $name = null, ?Tracy\Bar $bar = null): void
-	{
-		$bar ??= Tracy\Debugger::getBar();
-		$bar->addPanel(new self($latte, $name));
-	}
-
-
-	/** @deprecated use TracyExtension see https://bit.ly/46flfDi */
-	public function __construct(?Engine $latte = null, ?string $name = null)
-	{
-		$this->name = $name;
-		if ($latte) {
-			trigger_error('Replace LattePanel with TracyExtension; see https://bit.ly/46flfDi', E_USER_DEPRECATED);
-			$latte->addExtension(
-				new class ($this->templates) extends Extension {
-					public function __construct(
-						private array &$templates,
-					) {
-					}
-
-
-					public function beforeRender(Template $template): void
-					{
-						$this->templates[] = $template;
-					}
-				},
-			);
-		}
-	}
-
-
-	public function addTemplate(Template $template): void
-	{
-		$this->templates[] = $template;
-	}
-
-
-	/**
-	 * Renders tab.
-	 */
-	public function getTab(): ?string
-	{
-		if (!$this->templates) {
-			return null;
-		}
-
-		return Tracy\Helpers::capture(function () {
-			$first = reset($this->templates);
-			$name = $this->name ?? ($first ? basename($first->getName()) : '');
-			require __DIR__ . '/dist/tab.phtml';
-		});
-	}
-
-
-	/**
-	 * Renders panel.
-	 */
-	public function getPanel(): string
-	{
-		$this->list = [];
-		$this->buildList($this->templates[0]);
-
-		return Tracy\Helpers::capture(function () {
-			$list = $this->list;
-			$dumpParameters = $this->dumpParameters;
-			require __DIR__ . '/dist/panel.phtml';
-		});
-	}
-
-
-	private function buildList(Template $template, int $depth = 0, int $count = 1): void
-	{
-		$this->list[] = (object) [
-			'template' => $template,
-			'depth' => $depth,
-			'count' => $count,
-			'phpFile' => (new \ReflectionObject($template))->getFileName(),
-		];
-
-		$children = $counter = [];
-		foreach ($this->templates as $t) {
-			if ($t->getReferringTemplate() === $template) {
-				$children[$t->getName()] = $t;
-				@$counter[$t->getName()]++;
-			}
-		}
-
-		foreach ($children as $name => $t) {
-			$this->buildList($t, $depth + 1, $counter[$name]);
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Bridges/Tracy/TracyExtension.php b/generated/php/vendor/latte/latte/src/Bridges/Tracy/TracyExtension.php
deleted file mode 100644
index 2a73a5a..0000000
--- a/generated/php/vendor/latte/latte/src/Bridges/Tracy/TracyExtension.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Bridges\Tracy;
-
-use Latte\Extension;
-use Latte\Runtime\Template;
-use Tracy;
-
-
-/**
- * Extension for Tracy 2.x
- */
-class TracyExtension extends Extension
-{
-	private readonly LattePanel $panel;
-
-
-	public function __construct(?string $name = null)
-	{
-		BlueScreenPanel::initialize();
-		$this->panel = new LattePanel(name: $name);
-		Tracy\Debugger::getBar()->addPanel($this->panel);
-	}
-
-
-	public function beforeRender(Template $template): void
-	{
-		$this->panel->addTemplate($template);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Bridges/Tracy/dist/panel.phtml b/generated/php/vendor/latte/latte/src/Bridges/Tracy/dist/panel.phtml
deleted file mode 100644
index d8c698a..0000000
--- a/generated/php/vendor/latte/latte/src/Bridges/Tracy/dist/panel.phtml
+++ /dev/null
@@ -1,94 +0,0 @@
-<?php declare(strict_types=1); ?>
-<?php /** @var \stdClass[] $list */ ?><?php /** @var bool $dumpParameters */ ?><?php $colors = [
-	'include' => '#00000052',
-	'extends' => '#cd1c1c7d',
-	'import' => '#17c35b8f',
-	'includeblock' => '#17c35b8f',
-	'embed' => '#4f1ccd7d',
-	'sandbox' => 'black',
-] ?>
-<style class="tracy-debug">
-	#tracy-debug .LattePanel td {
-		white-space: nowrap;
-	}
-
-	#tracy-debug .LattePanel-php {
-		background: #8993be;
-		color: white;
-		border-radius: 79px;
-		padding: 1px 4px 3px 4px;
-		font-size: 75%;
-		font-style: italic;
-		font-weight: bold;
-		vertical-align: text-top;
-		opacity: .5;
-		margin-left: 2ex;
-	}
-
-	#tracy-debug .LattePanel-type {
-		border-radius: 2px;
-		padding: 2px 4px;
-		font-size: 80%;
-		color: white;
-		font-weight: bold;
-	}
-
-	#tracy-debug .LattePanel-include {
-		background: #00000052;
-	}
-
-	#tracy-debug .LattePanel-extends {
-		background: #cd1c1c7d;
-	}
-
-	#tracy-debug .LattePanel-import,
-	#tracy-debug .LattePanel-includeblock {
-		background: #17c35b8f;
-	}
-
-	#tracy-debug .LattePanel-embed {
-		background: #4f1ccd7d;
-	}
-
-	#tracy-debug .LattePanel-sandbox {
-		background: black;
-	}
-</style>
-
-<h1>Rendered Templates</h1>
-
-<div class="tracy-inner LattePanel">
-	<table>
-<?php foreach ($list as $item): ?>			<tr>
-				<td>
-<?php if ($item->template->getReferenceType()): ?>						<span style="margin-left: <?= Tracy\Helpers::escapeHtml($item->depth * 4) ?>
-ex"></span>└ 
-						<span class="LattePanel-type" style="background: <?= Tracy\Helpers::escapeHtml($colors[$item->template->getReferenceType()]) ?>
-"><?= Tracy\Helpers::escapeHtml($item->template->getReferenceType()) ?>
-</span>
-<?php endif ?>
-					<?= Tracy\Helpers::editorLink($item->template->getName()) ?>
-
-
-					<a href="<?= Tracy\Helpers::escapeHtml(Tracy\Helpers::editorUri($item->phpFile)) ?>
-" class="LattePanel-php">php</a>
-				</td>
-
-				<td><?= Tracy\Helpers::escapeHtml($item->count > 1 ? $item->count . '×' : '') ?>
-</td>
-			</tr>
-<?php endforeach ?>	</table>
-
-<?php if ($dumpParameters): ?>		<h2>Parameters</h2>
-
-		<div class="tracy-inner">
-			<table class="tracy-sortable">
-<?php foreach (reset($list)->template->getParameters() as $k => $v): ?>					<tr>
-						<th><?= Tracy\Helpers::escapeHtml($k) ?>
-</th>
-						<td><?= Tracy\Dumper::toHtml($v, [Tracy\Dumper::LIVE => true]) ?>
-</td>
-					</tr>
-<?php endforeach ?>			</table>
-		</div>
-<?php endif ?></div>
diff --git a/generated/php/vendor/latte/latte/src/Bridges/Tracy/dist/tab.phtml b/generated/php/vendor/latte/latte/src/Bridges/Tracy/dist/tab.phtml
deleted file mode 100644
index b122074..0000000
--- a/generated/php/vendor/latte/latte/src/Bridges/Tracy/dist/tab.phtml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?php declare(strict_types=1); ?>
-<?php /** @var string $name */ ?><span title="Latte Templates">
-	<svg viewBox="0 0 1793.77 1538.57">
-		<path fill="#F1A443" d="M934.87 1166.46c41.84,-2.2 75.14,-17.07 99.91,-44.59 24.77,-27.53 37.16,-58.9 37.16,-94.13 0,-38.53 -12.38,-71.01 -37.16,-97.43 -24.77,-26.42 -58.08,-45.14 -99.91,-56.15l0 292.31zm-67.71 -786.08c-40.74,2.2 -72.66,15.41 -95.79,39.63 -23.12,24.22 -34.68,52.29 -34.68,84.22 0,33.03 11.29,63.03 33.86,90 22.57,26.98 54.77,43.21 96.61,48.72l0 -262.58zm0 1013.98l0 -64.41c-61.66,-5.5 -114.22,-15.97 -157.71,-31.38 -43.49,-15.41 -79.27,-37.43 -107.34,-66.06 -28.07,-28.63 -48.72,-64.13 -61.93,-106.52 -13.21,-42.39 -19.82,-92.76 -19.82,-151.11l198.18 0c4.4,35.23 10.18,64.41 17.34,87.53 7.16,23.12 16.51,41.84 28.07,56.15 11.56,14.31 25.6,25.05 42.11,32.2 16.51,7.16 36.88,12.39 61.1,15.69l0 -318.73c-55.05,-14.31 -102.94,-30.55 -143.67,-48.72 -40.74,-18.16 -74.59,-39.63 -101.57,-64.41 -26.97,-24.77 -47.34,-53.4 -61.1,-85.88 -13.76,-32.48 -20.64,-71.29 -20.64,-116.43 0,-42.93 8.26,-83.39 24.77,-121.38 16.51,-37.98 39.36,-71.29 68.53,-99.91 29.18,-28.63 63.58,-51.19 103.22,-67.71 39.63,-16.51 83.12,-25.32 130.46,-26.42l0 -72.67 67.71 0 0 72.67c203.68,6.6 310.47,113.4 320.38,320.38l-194.87 0c-5.5,-59.45 -18.44,-99.91 -38.81,-121.38 -20.37,-21.47 -49.27,-33.31 -86.7,-35.51l0 284.05c73.76,24.22 132.94,47.89 177.53,71.01 44.59,23.12 78.72,47.61 102.39,73.49 23.67,25.87 39.36,54.22 47.07,85.05 7.71,30.83 11.56,66.61 11.56,107.34 0,48.44 -7.98,92.2 -23.94,131.29 -15.97,39.08 -38.81,72.94 -68.54,101.56 -29.72,28.63 -65.5,51.2 -107.34,67.71 -41.84,16.51 -88.08,25.87 -138.72,28.07l0 64.41 -67.71 0z"/>
-		<path fill="#5F4D36" d="M462.33 1411.31c-54.32,0 -98.33,-4.78 -132.03,-14.33 -33.7,-9.56 -59.85,-24.14 -78.46,-43.76 -18.61,-19.62 -30.93,-44.51 -36.97,-74.69 -6.04,-30.18 -9.05,-65.38 -9.05,-105.62 0,-9.05 0.5,-22.13 1.51,-39.23 1.01,-17.1 1.76,-35.21 2.27,-54.32 0.5,-19.11 1.26,-36.97 2.26,-53.56 1.01,-16.6 1.51,-28.42 1.51,-35.46 0,-58.34 -8.8,-99.08 -26.41,-122.22 -17.6,-23.13 -50.05,-34.7 -97.33,-34.7l0 -129.76c47.28,0 79.72,-11.82 97.33,-35.46 17.6,-23.64 26.41,-64.63 26.41,-122.97 0,-7.04 -0.5,-18.86 -1.51,-35.46 -1.01,-16.6 -1.76,-33.95 -2.26,-52.06 -0.5,-18.11 -1.26,-35.71 -2.27,-52.81 -1.01,-17.1 -1.51,-30.18 -1.51,-39.23 0,-40.24 3.02,-75.45 9.05,-105.62 6.03,-30.18 18.36,-55.08 36.97,-74.69 18.61,-19.62 44.76,-34.2 78.46,-43.76 33.7,-9.56 77.71,-14.34 132.03,-14.34l55.83 0 0 123.73 -33.2 0c-44.26,0 -74.18,7.04 -89.78,21.12 -15.59,14.08 -23.39,38.73 -23.39,73.94 0,45.27 1.51,90.03 4.53,134.29 3.02,44.26 4.53,89.02 4.53,134.29 0,21.12 -4.53,40.49 -13.58,58.09 -9.05,17.6 -20.87,33.19 -35.46,46.77 -14.59,13.58 -31.69,24.4 -51.3,32.44 -19.62,8.05 -39.98,13.58 -61.11,16.6 21.12,3.02 41.49,8.55 61.11,16.59 19.61,8.05 36.72,18.86 51.3,32.44 14.59,13.58 26.41,29.17 35.46,46.77 9.05,17.6 13.58,36.97 13.58,58.09 0,45.27 -1.51,90.28 -4.53,135.04 -3.02,44.76 -4.53,89.78 -4.53,135.05 0,35.21 7.79,59.85 23.39,73.94 15.59,14.08 45.52,21.12 89.78,21.12l33.2 0 0 123.73 -55.83 0z"/>
-		<path fill="#5F4D36" d="M1275.61 1411.31l0 -123.73 33.2 0c44.26,0 74.19,-7.04 89.78,-21.12 15.59,-14.08 23.39,-38.73 23.39,-73.94 0,-45.27 -1.51,-90.28 -4.53,-135.05 -3.02,-44.76 -4.53,-89.78 -4.53,-135.04 0,-21.12 4.53,-40.49 13.58,-58.09 9.05,-17.6 20.87,-33.19 35.46,-46.77 14.59,-13.58 31.69,-24.4 51.3,-32.44 19.61,-8.05 39.98,-13.58 61.11,-16.59 -21.12,-3.02 -41.5,-8.55 -61.11,-16.6 -19.62,-8.05 -36.72,-18.86 -51.3,-32.44 -14.59,-13.58 -26.41,-29.17 -35.46,-46.77 -9.05,-17.6 -13.58,-36.97 -13.58,-58.09 0,-45.27 1.51,-90.03 4.53,-134.29 3.02,-44.26 4.53,-89.02 4.53,-134.29 0,-35.21 -7.8,-59.85 -23.39,-73.94 -15.59,-14.08 -45.52,-21.12 -89.78,-21.12l-33.2 0 0 -123.73 55.83 0c54.32,0 98.33,4.78 132.03,14.34 33.7,9.55 59.85,24.14 78.46,43.76 18.61,19.61 30.93,44.51 36.97,74.69 6.03,30.17 9.05,65.38 9.05,105.62 0,9.05 -0.5,22.13 -1.51,39.23 -1.01,17.1 -1.76,34.7 -2.26,52.81 -0.5,18.11 -1.26,35.46 -2.27,52.06 -1.01,16.59 -1.51,28.41 -1.51,35.46 0,58.34 8.8,99.33 26.41,122.97 17.6,23.64 50.04,35.46 97.32,35.46l0 129.76c-47.28,0 -79.72,11.57 -97.32,34.7 -17.6,23.14 -26.41,63.88 -26.41,122.22 0,7.04 0.5,18.86 1.51,35.46 1.01,16.6 1.76,34.45 2.27,53.56 0.5,19.11 1.26,37.22 2.26,54.32 1.01,17.1 1.51,30.18 1.51,39.23 0,40.24 -3.02,75.44 -9.05,105.62 -6.04,30.18 -18.36,55.07 -36.97,74.69 -18.61,19.61 -44.76,34.2 -78.46,43.76 -33.7,9.55 -77.7,14.33 -132.03,14.33l-55.83 0z"/>
-	</svg
-	><span class="tracy-label"><?= Tracy\Helpers::escapeHtml($name) ?>
-</span>
-</span>
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Block.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Block.php
deleted file mode 100644
index 4e5c239..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Block.php
+++ /dev/null
@@ -1,39 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ParameterNode;
-use Latte\Compiler\Nodes\Php\Scalar;
-
-
-/** @internal */
-final class Block
-{
-	public string $method;
-	public string $content;
-	public string $escaping;
-
-	/** @var ParameterNode[] */
-	public array $parameters = [];
-
-
-	public function __construct(
-		public readonly ExpressionNode $name,
-		public readonly int|string $layer,
-		public readonly Tag $tag,
-	) {
-	}
-
-
-	public function isDynamic(): bool
-	{
-		return !$this->name instanceof Scalar\StringNode
-			&& !$this->name instanceof Scalar\IntegerNode;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Dedent.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Dedent.php
deleted file mode 100644
index 642b581..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Dedent.php
+++ /dev/null
@@ -1,144 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\FragmentNode;
-use function count, explode, implode, preg_match, str_ends_with, str_starts_with, strlen, substr, trim;
-
-
-/**
- * Removes one level of indentation introduced by paired Latte tags.
- *
- * Each paired tag ({if}, {foreach}, …) strips exactly one indent level
- * from its content. The indent unit is auto-detected from the first
- * content line; the tag's source column determines how much structural
- * indent to preserve.
- */
-final class Dedent
-{
-	public static function apply(FragmentNode $fragment, Tag $startTag): void
-	{
-		$tagIndentLen = $startTag->position->column - 1;
-
-		$textNodes = [];
-		self::collectTextNodes($fragment, $textNodes);
-
-		$baseIndent = self::detectIndent($textNodes, $startTag);
-		if ($baseIndent === null || strlen($baseIndent) <= $tagIndentLen) {
-			return;
-		}
-
-		self::stripIndent($textNodes, $baseIndent, $tagIndentLen);
-	}
-
-
-	/** @param list<Nodes\TextNode> $out */
-	private static function collectTextNodes(Node $node, array &$out): void
-	{
-		if ($node instanceof Nodes\TextNode) {
-			$out[] = $node;
-		} elseif ($node instanceof Nodes\Html\ElementNode) {
-			if ($node->content) {
-				self::collectTextNodes($node->content, $out);
-			}
-		} else {
-			foreach ($node as $child) {
-				if ($child instanceof AreaNode) {
-					self::collectTextNodes($child, $out);
-				}
-			}
-		}
-	}
-
-
-	/** @param list<Nodes\TextNode> $textNodes */
-	private static function detectIndent(array $textNodes, Tag $startTag): ?string
-	{
-		$inlineChecked = false;
-		$lastNonEmpty = -1;
-		for ($k = count($textNodes) - 1; $k >= 0; $k--) {
-			if ($textNodes[$k]->content !== '') {
-				$lastNonEmpty = $k;
-				break;
-			}
-		}
-
-		foreach ($textNodes as $idx => $node) {
-			if ($node->content === '') {
-				continue;
-			}
-
-			if (!$inlineChecked) {
-				$inlineChecked = true;
-				if ($node->position?->line === $startTag->position->line) {
-					return null;
-				}
-			}
-
-			$firstLineAtStart = $node->position?->column === 1;
-			$lines = explode("\n", $node->content);
-			$lineCount = count($lines);
-			$lastContinues = !str_ends_with($node->content, "\n") && $idx < $lastNonEmpty;
-
-			foreach ($lines as $j => $line) {
-				$isLineStart = $j === 0 ? $firstLineAtStart : true;
-				if (!$isLineStart || $line === '') {
-					continue;
-				}
-
-				$hasContent = trim($line) !== '';
-				$continuesWithExpr = !$hasContent && $j === $lineCount - 1 && $lastContinues;
-
-				if ($hasContent) {
-					preg_match('/^(\t+| +)/', $line, $m);
-					return $m[1] ?? null;
-				} elseif ($continuesWithExpr) {
-					return $line;
-				}
-			}
-		}
-
-		return null;
-	}
-
-
-	/** @param list<Nodes\TextNode> $textNodes */
-	private static function stripIndent(array $textNodes, string $baseIndent, int $tagIndentLen): void
-	{
-		foreach ($textNodes as $node) {
-			if ($node->content === '') {
-				continue;
-			}
-
-			$firstLineAtStart = $node->position?->column === 1;
-			$lines = explode("\n", $node->content);
-			$modified = false;
-
-			foreach ($lines as $j => &$line) {
-				$isLineStart = $j === 0 ? $firstLineAtStart : true;
-				if (!$isLineStart || $line === '') {
-					continue;
-				}
-
-				if (str_starts_with($line, $baseIndent)) {
-					$line = substr($line, 0, $tagIndentLen) . substr($line, strlen($baseIndent));
-					$modified = true;
-				} elseif (trim($line) !== '') {
-					throw new CompileException('Inconsistent indentation.', $node->position ? new Position($node->position->line + $j, 1) : null);
-				}
-			}
-
-			unset($line);
-			if ($modified) {
-				$node->content = implode("\n", $lines);
-			}
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Escaper.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Escaper.php
deleted file mode 100644
index ecb6696..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Escaper.php
+++ /dev/null
@@ -1,261 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte;
-use Latte\Compiler\Nodes\Html\ElementNode;
-use Latte\ContentType;
-use Latte\Runtime\Helpers;
-use Latte\Runtime\HtmlHelpers;
-use function in_array, is_string, str_starts_with, strtolower;
-
-
-/**
- * Context-aware escaping.
- */
-class Escaper
-{
-	public const
-		Text = 'text',
-		JavaScript = 'js',
-		Css = 'css',
-		ICal = 'ical';
-
-	public const
-		HtmlText = 'html',
-		HtmlComment = 'html/comment',
-		HtmlBogusTag = 'html/bogus',
-		HtmlRawText = 'html/raw',
-		HtmlTag = 'html/tag',
-		HtmlAttribute = 'html/attr';
-
-	private const Convertors = [
-		self::Text => [
-			self::HtmlText => 'HtmlHelpers::escapeText',
-			self::HtmlAttribute => 'HtmlHelpers::escapeAttr',
-			self::HtmlAttribute . '/' . self::JavaScript => 'HtmlHelpers::escapeAttr',
-			self::HtmlAttribute . '/' . self::Css => 'HtmlHelpers::escapeAttr',
-			self::HtmlComment => 'HtmlHelpers::escapeComment',
-			'xml' => 'XmlHelpers::escapeText',
-			'xml/attr' => 'XmlHelpers::escapeAttr',
-		],
-		self::JavaScript => [
-			self::HtmlText => 'HtmlHelpers::escapeText',
-			self::HtmlAttribute => 'HtmlHelpers::escapeAttr',
-			self::HtmlAttribute . '/' . self::JavaScript => 'HtmlHelpers::escapeAttr',
-			self::HtmlRawText . '/' . self::JavaScript => 'HtmlHelpers::convertJSToRawText',
-			self::HtmlComment => 'HtmlHelpers::escapeComment',
-		],
-		self::Css => [
-			self::HtmlText => 'HtmlHelpers::escapeText',
-			self::HtmlAttribute => 'HtmlHelpers::escapeAttr',
-			self::HtmlAttribute . '/' . self::Css => 'HtmlHelpers::escapeAttr',
-			self::HtmlRawText . '/' . self::Css => 'HtmlHelpers::convertJSToRawText',
-			self::HtmlComment => 'HtmlHelpers::escapeComment',
-		],
-		self::HtmlText => [
-			self::Text => 'HtmlHelpers::convertHtmlToText',
-			self::HtmlAttribute => 'HtmlHelpers::convertHtmlToAttr',
-			self::HtmlAttribute . '/' . self::JavaScript => 'HtmlHelpers::convertHtmlToAttr',
-			self::HtmlAttribute . '/' . self::Css => 'HtmlHelpers::convertHtmlToAttr',
-			self::HtmlComment => 'HtmlHelpers::escapeComment',
-			self::HtmlRawText . '/' . self::HtmlText => 'HtmlHelpers::convertHtmlToRawText',
-		],
-		self::HtmlAttribute => [
-			self::HtmlText => 'HtmlHelpers::convertAttrToHtml',
-		],
-	];
-
-	private string $state = '';
-	private string $subType = '';
-
-
-	public function __construct(
-		private string $contentType,
-	) {
-		$this->state = in_array($contentType, [ContentType::Html, ContentType::Xml], strict: true)
-			? self::HtmlText
-			: $contentType;
-	}
-
-
-	public function getContentType(): string
-	{
-		return $this->contentType;
-	}
-
-
-	public function getState(): string
-	{
-		return $this->state;
-	}
-
-
-	/**
-	 * Returns the current escaping state as a string (e.g. "html/attr/js").
-	 */
-	public function export(): string
-	{
-		return $this->state . ($this->subType ? '/' . $this->subType : '');
-	}
-
-
-	public function enterContentType(string $type): void
-	{
-		$this->contentType = $this->state = $type;
-	}
-
-
-	public function enterHtmlText(ElementNode $el): void
-	{
-		if ($el->isRawText()) {
-			$this->state = self::HtmlRawText;
-			if ($el->is('script')) {
-				$type = $el->getAttribute('type');
-				$this->subType = $type === true || $type === null
-					? self::JavaScript
-					: (is_string($type) ? HtmlHelpers::classifyScriptType($type) : '');
-			} elseif ($el->is('style')) {
-				$this->subType = self::Css;
-			}
-
-		} else {
-			$this->state = self::HtmlText;
-			$this->subType = '';
-		}
-	}
-
-
-	public function enterHtmlTag(string $name): void
-	{
-		$this->state = self::HtmlTag;
-	}
-
-
-	public function enterHtmlRaw(string $subType): void
-	{
-		$this->state = self::HtmlRawText;
-		$this->subType = $subType;
-	}
-
-
-	public function enterHtmlAttribute(?string $name = null): void
-	{
-		$this->state = self::HtmlAttribute;
-		$this->subType = '';
-
-		if ($this->contentType === ContentType::Html && is_string($name)) {
-			$name = strtolower($name);
-			if (str_starts_with($name, 'on')) {
-				$this->subType = self::JavaScript;
-			} elseif ($name === 'style') {
-				$this->subType = self::Css;
-			}
-		}
-	}
-
-
-	public function enterHtmlBogusTag(): void
-	{
-		$this->state = self::HtmlBogusTag;
-	}
-
-
-	public function enterHtmlComment(): void
-	{
-		$this->state = self::HtmlComment;
-	}
-
-
-	public function escape(string $str): string
-	{
-		return match ($this->contentType) {
-			ContentType::Html => match ($this->state) {
-				self::HtmlText => 'LR\HtmlHelpers::escapeText(' . $str . ')',
-				self::HtmlTag => 'LR\HtmlHelpers::escapeTag(' . $str . ')',
-				self::HtmlAttribute => match ($this->subType) {
-					'' => 'LR\HtmlHelpers::escapeAttr(' . $str . ')',
-					self::JavaScript => 'LR\HtmlHelpers::escapeAttr(LR\Helpers::escapeJs(' . $str . '))',
-					self::Css => 'LR\HtmlHelpers::escapeAttr(LR\Helpers::escapeCss(' . $str . '))',
-				},
-				self::HtmlComment => 'LR\HtmlHelpers::escapeComment(' . $str . ')',
-				self::HtmlBogusTag => 'LR\HtmlHelpers::escapeTag(' . $str . ')',
-				self::HtmlRawText => match ($this->subType) {
-					self::Text => 'LR\HtmlHelpers::convertJSToRawText(' . $str . ')', // sanitization, escaping is not possible
-					self::HtmlText => 'LR\HtmlHelpers::escapeRawHtml(' . $str . ')',
-					self::JavaScript => 'LR\Helpers::escapeJs(' . $str . ')',
-					self::Css => 'LR\Helpers::escapeCss(' . $str . ')',
-				},
-				default => throw new \LogicException("Unknown context $this->contentType, $this->state."),
-			},
-			ContentType::Xml => match ($this->state) {
-				self::HtmlText => 'LR\XmlHelpers::escapeText(' . $str . ')',
-				self::HtmlBogusTag => 'LR\XmlHelpers::escapeTag(' . $str . ')',
-				self::HtmlAttribute => 'LR\XmlHelpers::escapeAttr(' . $str . ')',
-				self::HtmlComment => 'LR\HtmlHelpers::escapeComment(' . $str . ')',
-				self::HtmlTag => 'LR\XmlHelpers::escapeTag(' . $str . ')',
-				default => throw new \LogicException("Unknown context $this->contentType, $this->state."),
-			},
-			ContentType::JavaScript => 'LR\Helpers::escapeJs(' . $str . ')',
-			ContentType::Css => 'LR\Helpers::escapeCss(' . $str . ')',
-			ContentType::ICal => 'LR\Helpers::escapeIcal(' . $str . ')',
-			ContentType::Text => '($this->filters->escape)(' . $str . ')',
-			default => throw new \LogicException("Unknown content-type $this->contentType."),
-		};
-	}
-
-
-	/**
-	 * Applies mandatory escaping that cannot be suppressed (e.g. quotes in attributes).
-	 */
-	public function escapeMandatory(string $str, ?Position $position = null): string
-	{
-		return match ($this->contentType) {
-			ContentType::Html => match ($this->state) {
-				self::HtmlAttribute => "LR\\HtmlHelpers::escapeQuotes($str)",
-				self::HtmlRawText => match ($this->subType) {
-					self::HtmlText => 'LR\HtmlHelpers::convertHtmlToRawText(' . $str . ')',
-					default => "LR\\HtmlHelpers::convertJSToRawText($str)",
-				},
-				self::HtmlComment => throw new Latte\CompileException('Using |noescape is not allowed in this context.', $position),
-				default => $str,
-			},
-			ContentType::Xml => match ($this->state) {
-				self::HtmlAttribute => "LR\\HtmlHelpers::escapeQuotes($str)",
-				self::HtmlComment => throw new Latte\CompileException('Using |noescape is not allowed in this context.', $position),
-				default => $str,
-			},
-			default => $str,
-		};
-	}
-
-
-	/**
-	 * Generates code that converts content between content types at runtime using FilterInfo.
-	 */
-	public function escapeContent(string $str): string
-	{
-		return 'LR\Helpers::convertTo($ʟ_fi, '
-			. var_export($this->export(), return: true) . ', '
-			. $str
-			. ')';
-	}
-
-
-	/**
-	 * Returns a callable that converts content from $source type to $dest type, or null if unsupported.
-	 */
-	public static function getConvertor(string $source, string $dest): ?callable
-	{
-		return match (true) {
-			$source === $dest => Helpers::nop(...),
-			isset(self::Convertors[$source][$dest]) => 'Latte\Runtime\\' . self::Convertors[$source][$dest],
-			default => null,
-		};
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Node.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Node.php
deleted file mode 100644
index 9cced1a..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Node.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php declare(strict_types=1);
-
-namespace Latte\Compiler;
-
-
-/**
- * Base class for AST nodes representing parsed template structure.
- *
- * Each node must implement print() to generate PHP code and getIterator()
- * to yield child nodes for compiler passes.
- *
- * @implements \IteratorAggregate<Node>
- */
-abstract class Node implements \IteratorAggregate
-{
-	public ?Position $position = null;
-
-
-	abstract public function print(PrintContext $context): string;
-
-
-	/** @return \Generator<self> */
-	abstract public function &getIterator(): \Generator;
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/NodeHelpers.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/NodeHelpers.php
deleted file mode 100644
index 254f0c0..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/NodeHelpers.php
+++ /dev/null
@@ -1,152 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\Scalar;
-use function array_merge, constant, defined;
-
-
-/**
- * Utility functions for working with AST nodes.
- */
-final class NodeHelpers
-{
-	/**
-	 * Finds all nodes matching the filter and returns them in traversal order.
-	 * @param callable(Node): bool  $filter
-	 * @return list<Node>
-	 */
-	public static function find(Node $node, callable $filter): array
-	{
-		$found = [];
-		(new NodeTraverser)
-			->traverse($node, enter: function (Node $node) use ($filter, &$found) {
-				if ($filter($node)) {
-					$found[] = $node;
-				}
-			});
-		return $found;
-	}
-
-
-	/**
-	 * Finds the first node matching the filter, or null if none.
-	 * @param callable(Node): bool  $filter
-	 */
-	public static function findFirst(Node $node, callable $filter): ?Node
-	{
-		$found = null;
-		(new NodeTraverser)
-			->traverse($node, enter: function (Node $node) use ($filter, &$found) {
-				if ($filter($node)) {
-					$found = $node;
-					return NodeTraverser::StopTraversal;
-				}
-			});
-		return $found;
-	}
-
-
-	/**
-	 * Creates a deep clone of the node tree.
-	 */
-	public static function clone(Node $node): Node
-	{
-		return (new NodeTraverser)
-			->traverse($node, enter: fn(Node $node) => clone $node) ?? throw new \LogicException;
-	}
-
-
-	/**
-	 * Evaluates a scalar expression node to a PHP value. Resolves constants when $constants is true.
-	 * Throws InvalidArgumentException if the expression cannot be reduced to a value.
-	 */
-	public static function toValue(ExpressionNode $node, bool $constants = false): mixed
-	{
-		if ($node instanceof Scalar\BooleanNode
-			|| $node instanceof Scalar\FloatNode
-			|| $node instanceof Scalar\IntegerNode
-			|| $node instanceof Scalar\StringNode
-		) {
-			return $node->value;
-
-		} elseif ($node instanceof Scalar\NullNode) {
-			return null;
-
-		} elseif ($node instanceof Expression\ArrayNode) {
-			$res = [];
-			foreach ($node->items as $item) {
-				$value = self::toValue($item->value, $constants);
-				if ($item->key) {
-					$key = $item->key instanceof Php\IdentifierNode
-						? $item->key->name
-						: self::toValue($item->key, $constants);
-					$res[$key] = $value;
-
-				} elseif ($item->unpack) {
-					$res = array_merge($res, $value);
-
-				} else {
-					$res[] = $value;
-				}
-			}
-
-			return $res;
-
-		} elseif ($node instanceof Expression\ConstantFetchNode && $constants) {
-			$name = $node->name->toCodeString();
-			return defined($name)
-				? constant($name)
-				: throw new \InvalidArgumentException("The constant '$name' is not defined.");
-
-		} elseif (
-			$node instanceof Expression\ClassConstantFetchNode
-			&& $constants
-			&& $node->name instanceof Php\IdentifierNode
-		) {
-			$class = $node->class instanceof Php\NameNode
-				? $node->class->toCodeString()
-				: self::toValue($node->class, $constants);
-			$name = $class . '::' . $node->name->name;
-			return defined($name)
-				? constant($name)
-				: throw new \InvalidArgumentException("The constant '$name' is not defined.");
-
-		} else {
-			throw new \InvalidArgumentException('The expression cannot be converted to PHP value.');
-		}
-	}
-
-
-	/**
-	 * Extracts plain text from a node if it contains only static text, or returns null.
-	 */
-	public static function toText(?Node $node): ?string
-	{
-		if ($node instanceof Nodes\FragmentNode) {
-			$res = '';
-			foreach ($node->children as $child) {
-				if (($s = self::toText($child)) === null) {
-					return null;
-				}
-				$res .= $s;
-			}
-
-			return $res;
-		}
-
-		return match (true) {
-			$node instanceof Nodes\TextNode => $node->content,
-			$node instanceof Nodes\NopNode => '',
-			default => null,
-		};
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/NodeTraverser.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/NodeTraverser.php
deleted file mode 100644
index a992a48..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/NodeTraverser.php
+++ /dev/null
@@ -1,88 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-
-/**
- * Traverses and transforms AST nodes using visitor pattern.
- */
-final class NodeTraverser
-{
-	public const DontTraverseChildren = 1;
-	public const StopTraversal = 2;
-	public const RemoveNode = 3;
-
-	/** @var ?(\Closure(Node): (Node|int|void|null)) */
-	private ?\Closure $enter = null;
-
-	/** @var ?(\Closure(Node): (Node|int|void|null)) */
-	private ?\Closure $leave = null;
-
-	private bool $stop;
-
-
-	/**
-	 * Traverses the AST, calling $enter before and $leave after visiting each node's children.
-	 * The callable may return a replacement Node, or one of the class constants to control traversal.
-	 * @param ?(callable(Node): (Node|int|void|null))  $enter
-	 * @param ?(callable(Node): (Node|int|void|null))  $leave
-	 */
-	public function traverse(Node $node, ?callable $enter = null, ?callable $leave = null): ?Node
-	{
-		$this->enter = $enter ? $enter(...) : null;
-		$this->leave = $leave ? $leave(...) : null;
-		$this->stop = false;
-		return $this->traverseNode($node);
-	}
-
-
-	private function traverseNode(Node $node): ?Node
-	{
-		$children = true;
-		if ($this->enter) {
-			$res = ($this->enter)($node);
-			if ($res instanceof Node) {
-				$node = $res;
-
-			} elseif ($res === self::DontTraverseChildren) {
-				$children = false;
-
-			} elseif ($res === self::StopTraversal) {
-				$this->stop = true;
-				return $node;
-
-			} elseif ($res === self::RemoveNode) {
-				return null;
-			}
-		}
-
-		if ($children) {
-			foreach ($node as &$subnode) {
-				$subnode = $this->traverseNode($subnode);
-				if ($this->stop) {
-					break;
-				}
-			}
-		}
-
-		if (!$this->stop && $this->leave) {
-			$res = ($this->leave)($node);
-			if ($res instanceof Node) {
-				$node = $res;
-
-			} elseif ($res === self::StopTraversal) {
-				$this->stop = true;
-
-			} elseif ($res === self::RemoveNode) {
-				return null;
-			}
-		}
-
-		return $node;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/AreaNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/AreaNode.php
deleted file mode 100644
index a787b75..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/AreaNode.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes;
-
-use Latte\Compiler\Node;
-
-
-/**
- * Base for nodes representing template content that produces output.
- *
- * Includes text, HTML elements, and Latte tags. Extend StatementNode
- * for custom Latte tags, or AreaNode directly for passive content.
- */
-abstract class AreaNode extends Node
-{
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/AuxiliaryNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/AuxiliaryNode.php
deleted file mode 100644
index 86e0a17..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/AuxiliaryNode.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Code generator hidden from compiler passes. Pass child nodes for traversal.
- */
-class AuxiliaryNode extends AreaNode
-{
-	public function __construct(
-		public readonly \Closure $print,
-		/** @var (?Node)[] */
-		public array $nodes = [],
-	) {
-		(function (?Node ...$nodes) {})(...$nodes);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return ($this->print)($context, ...$this->nodes);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->nodes as &$node) {
-			if ($node) {
-				yield $node;
-			}
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/FragmentNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/FragmentNode.php
deleted file mode 100644
index e8f0cf2..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/FragmentNode.php
+++ /dev/null
@@ -1,79 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes;
-
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-use function array_merge, count;
-
-
-/**
- * Container for sequence of child nodes.
- */
-final class FragmentNode extends AreaNode
-{
-	/** @var AreaNode[] */
-	public array $children = [];
-
-
-	/** @param AreaNode[]  $children */
-	public function __construct(array $children = [])
-	{
-		foreach ($children as $child) {
-			$this->append($child);
-		}
-	}
-
-
-	/**
-	 * Appends a node. FragmentNode children are merged inline; NopNodes are discarded.
-	 */
-	public function append(AreaNode $node): static
-	{
-		if ($node instanceof self) {
-			$this->children = array_merge($this->children, $node->children);
-		} elseif (!$node instanceof NopNode) {
-			$this->children[] = $node;
-		}
-		$this->position ??= $node->position;
-		return $this;
-	}
-
-
-	/**
-	 * Returns null (or self) for an empty fragment, the single child when there is only one, or self otherwise.
-	 */
-	public function simplify(bool $allowsNull = true): ?AreaNode
-	{
-		return match (true) {
-			!$this->children => $allowsNull ? null : $this,
-			count($this->children) === 1 => $this->children[0],
-			default => $this,
-		};
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$res = '';
-		foreach ($this->children as $child) {
-			$res .= $child->print($context);
-		}
-
-		return $res;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->children as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->children);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/AttributeNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/AttributeNode.php
deleted file mode 100644
index d73cfac..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/AttributeNode.php
+++ /dev/null
@@ -1,58 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Html;
-
-use Latte\Compiler\NodeHelpers;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\TextNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * HTML attribute with name, optional value, and quote style.
- */
-class AttributeNode extends AreaNode
-{
-	public function __construct(
-		public AreaNode $name,
-		public ?AreaNode $value = null,
-		public ?string $quote = null,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$res = $this->name->print($context);
-		if (!$this->value) {
-			return $res;
-		}
-
-		$res .= "echo '=';";
-		$quote = $this->quote ?? ($this->value instanceof TextNode ? null : '"');
-		$res .= $quote ? 'echo ' . var_export($quote, return: true) . ';' : '';
-
-		$escaper = $context->beginEscape();
-		$escaper->enterHtmlAttribute(NodeHelpers::toText($this->name));
-		$res .= $this->value->print($context);
-		$context->restoreEscape();
-		$res .= $quote ? 'echo ' . var_export($quote, return: true) . ';' : '';
-		return $res;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->name;
-		if ($this->value) {
-			yield $this->value;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/BogusTagNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/BogusTagNode.php
deleted file mode 100644
index b930f01..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/BogusTagNode.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Html;
-
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * DOCTYPE or bogus HTML tags.
- */
-class BogusTagNode extends AreaNode
-{
-	public function __construct(
-		public string $openDelimiter,
-		public AreaNode $content,
-		public string $endDelimiter,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$res = 'echo ' . var_export($this->openDelimiter, return: true) . ';';
-		$context->beginEscape()->enterHtmlBogusTag();
-		$res .= $this->content->print($context);
-		$context->restoreEscape();
-		$res .= 'echo ' . var_export($this->endDelimiter, return: true) . ';';
-		return $res;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/CommentNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/CommentNode.php
deleted file mode 100644
index c2eeef4..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/CommentNode.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Html;
-
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * HTML comment (<!-- ... -->).
- */
-class CommentNode extends AreaNode
-{
-	public function __construct(
-		public AreaNode $content,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$context->beginEscape()->enterHtmlComment();
-		$content = $this->content->print($context);
-		$context->restoreEscape();
-		return "echo '<!--'; $content echo '-->';";
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/ElementNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/ElementNode.php
deleted file mode 100644
index 7b1ba4c..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/ElementNode.php
+++ /dev/null
@@ -1,131 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Html;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\NodeHelpers;
-use Latte\Compiler\Nodes;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\FragmentNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\ContentType;
-
-
-/**
- * HTML/XML element with attributes, content, and n:attribute support.
- */
-class ElementNode extends AreaNode
-{
-	public FragmentNode $attributes;
-	public bool $selfClosing = false;
-	public ?AreaNode $content = null;
-
-	/** @var Tag[] */
-	public array $nAttributes = [];
-	public ?AreaNode $dynamicTag = null;
-	public bool $breakable = false;
-
-
-	public function __construct(
-		public readonly string $name,
-		public ?Position $position = null,
-		public readonly ?self $parent = null,
-		public string $contentType = ContentType::Html,
-	) {
-		$this->attributes = new FragmentNode;
-	}
-
-
-	/**
-	 * Returns the attribute value: plain string if static, Node if dynamic, true if it is a boolean or n:attribute, null if not found.
-	 */
-	public function getAttribute(string $name): string|Node|bool|null
-	{
-		foreach ($this->attributes->children as $child) {
-			if ($child instanceof AttributeNode
-				&& $child->name instanceof Nodes\TextNode
-				&& $this->matchesIdentifier($name, $child->name->content)
-			) {
-				return NodeHelpers::toText($child->value) ?? $child->value ?? true;
-			} elseif ($child instanceof ExpressionAttributeNode
-				&& $this->matchesIdentifier($name, $child->name)
-			) {
-				return true;
-			}
-		}
-
-		return null;
-	}
-
-
-	/**
-	 * Checks whether the element has the given tag name (case-insensitive in HTML, case-sensitive in XML).
-	 */
-	public function is(string $name): bool
-	{
-		return $this->matchesIdentifier($this->name, $name);
-	}
-
-
-	private function matchesIdentifier(string $a, string $b): bool
-	{
-		return $this->contentType === ContentType::Html
-			? strcasecmp($a, $b) === 0
-			: $a === $b;
-	}
-
-
-	/**
-	 * Checks whether the element contains raw text (i.e., is a <script> or <style> element).
-	 */
-	public function isRawText(): bool
-	{
-		return $this->contentType === ContentType::Html
-			&& ($this->is('script') || $this->is('style'));
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$res = $this->dynamicTag
-			? $this->dynamicTag->print($context)
-			: (new TagNode($this))->print($context, captureEnd: false);
-
-		if ($innerContent = $this->content) {
-			if ($this->dynamicTag) {
-				$endTag = '$ʟ_tags[' . ($context->generateId()) . ']';
-				$res = "\$ʟ_tag = ''; $res $endTag = \$ʟ_tag;";
-			} else {
-				$endTag = var_export('</' . $this->name . '>', return: true);
-			}
-
-			$context->beginEscape()->enterHtmlText($this);
-			$content = $innerContent->print($context);
-			$context->restoreEscape();
-			$res .= $this->breakable
-				? 'try { ' . $content . ' } finally { echo ' . $endTag . '; } '
-				: $content . ' echo ' . $endTag . ';';
-		}
-
-		return $res;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->dynamicTag) {
-			yield $this->dynamicTag;
-		}
-		yield $this->attributes;
-		if ($this->content) {
-			yield $this->content;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/ExpressionAttributeNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/ExpressionAttributeNode.php
deleted file mode 100644
index d2aaa2d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/ExpressionAttributeNode.php
+++ /dev/null
@@ -1,60 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Html;
-
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ModifierNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\ContentType;
-use Latte\Feature;
-use Latte\Runtime as LR;
-
-
-/**
- * Dynamic HTML attribute generated from expression.
- */
-class ExpressionAttributeNode extends AreaNode
-{
-	public function __construct(
-		public string $name,
-		public ExpressionNode $value,
-		public ModifierNode $modifier,
-		public ?string $indentation = null,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if ($context->getEscaper()->getContentType() === ContentType::Html) {
-			$type = $this->modifier->removeFilter('toggle') ? 'bool' : LR\HtmlHelpers::classifyAttributeType($this->name);
-			$method = 'LR\HtmlHelpers::format' . ucfirst($type) . 'Attribute';
-		} else {
-			$method = 'LR\XmlHelpers::formatAttribute';
-		}
-		return $context->format(
-			'echo %raw(%dump, %modify(%node), %dump?) %line;',
-			$method,
-			$this->indentation . $this->name,
-			$this->modifier,
-			$this->value,
-			(!$this->modifier->removeFilter('accept') && $context->hasFeature(Feature::MigrationWarnings)) ?: null,
-			$this->value->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->value;
-		yield $this->modifier;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/TagNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/TagNode.php
deleted file mode 100644
index 66e42fe..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Html/TagNode.php
+++ /dev/null
@@ -1,70 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Html;
-
-use Latte\Compiler\Nodes;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\PrintContext;
-use Latte\ContentType;
-
-
-/**
- * Helper node for rendering HTML tags with n:tag and n:tag* support.
- * Writes end tag to $ʟ_tag.
- */
-class TagNode extends AreaNode
-{
-	public function __construct(
-		public readonly ElementNode $element,
-		public ?Nodes\Php\ExpressionNode $name = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context, ?bool $captureEnd = null): string
-	{
-		$captureEnd ??= (bool) $this->element->content;
-		$context->beginEscape()->enterHtmlTag($this->element->name);
-
-		$res = $this->name
-			? $context->format(
-				<<<'XX'
-					$ʟ_tmp = LR\%raw::validateTagChange(%node, %dump);
-					%raw
-					echo '<', $ʟ_tmp %line;
-					%node
-					echo %dump;
-					XX,
-				$this->element->contentType === ContentType::Html ? 'HtmlHelpers' : 'XmlHelpers',
-				$this->name,
-				$this->element->name,
-				$captureEnd ? '$ʟ_tag = \'</\' . $ʟ_tmp . \'>\' . $ʟ_tag;' : '',
-				$this->element->position,
-				$this->element->attributes,
-				$this->element->selfClosing ? '/>' : '>',
-			)
-			: $context->format(
-				'%raw echo %dump; %node echo %dump;',
-				$captureEnd ? '$ʟ_tag = ' . $context->encodeString("</{$this->element->name}>") . ' . $ʟ_tag;' : '',
-				'<' . $this->element->name,
-				$this->element->attributes,
-				$this->element->selfClosing ? '/>' : '>',
-			);
-
-		$context->restoreEscape();
-		return $res;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->name) {
-			yield $this->name;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/NopNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/NopNode.php
deleted file mode 100644
index 03612d6..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/NopNode.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes;
-
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Placeholder for removed or filtered-out content.
- */
-class NopNode extends AreaNode
-{
-	public function print(PrintContext $context): string
-	{
-		return '';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ArgumentNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ArgumentNode.php
deleted file mode 100644
index 6c6bb40..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ArgumentNode.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Function/method argument with optional name, reference, and unpacking.
- */
-class ArgumentNode extends Node
-{
-	public function __construct(
-		public ExpressionNode $value,
-		public bool $byRef = false,
-		public bool $unpack = false,
-		public ?IdentifierNode $name = null,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return ($this->name ? $this->name . ': ' : '')
-			. ($this->byRef ? '&' : '')
-			. ($this->unpack ? '...' : '')
-			. $this->value->print($context);
-	}
-
-
-	public function toArrayItem(): ArrayItemNode
-	{
-		return new ArrayItemNode($this->value, $this->name, $this->byRef, $this->unpack, $this->position);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->name) {
-			yield $this->name;
-		}
-		yield $this->value;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ArrayItemNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ArrayItemNode.php
deleted file mode 100644
index 329f1ea..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ArrayItemNode.php
+++ /dev/null
@@ -1,63 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Array item with optional key, reference, and spread operator.
- */
-class ArrayItemNode extends Node
-{
-	public function __construct(
-		public ExpressionNode $value,
-		public ExpressionNode|IdentifierNode|null $key = null,
-		public bool $byRef = false,
-		public bool $unpack = false,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$key = match (true) {
-			$this->key instanceof ExpressionNode => $this->key->print($context) . ' => ',
-			$this->key instanceof IdentifierNode => $context->encodeString($this->key->name) . ' => ',
-			$this->key === null => '',
-		};
-		return $key
-			. ($this->byRef ? '&' : '')
-			. ($this->unpack ? '...' : '')
-			. $this->value->print($context);
-	}
-
-
-	public function toArgument(): ArgumentNode
-	{
-		$key = match (true) {
-			$this->key instanceof Scalar\StringNode => new IdentifierNode($this->key->value),
-			$this->key instanceof IdentifierNode => $this->key,
-			$this->key === null => null,
-			default => throw new \InvalidArgumentException('The expression used in the key cannot be converted to an argument.'),
-		};
-		return new ArgumentNode($this->value, $this->byRef, $this->unpack, $key, $this->position);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->key) {
-			yield $this->key;
-		}
-		yield $this->value;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ClosureUseNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ClosureUseNode.php
deleted file mode 100644
index 60ab72c..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ClosureUseNode.php
+++ /dev/null
@@ -1,39 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Nodes\Php\Expression\VariableNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Closure use variable ($var or &$var).
- */
-class ClosureUseNode extends Node
-{
-	public function __construct(
-		public VariableNode $var,
-		public bool $byRef = false,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return ($this->byRef ? '&' : '') . $this->var->print($context);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->var;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ComplexTypeNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ComplexTypeNode.php
deleted file mode 100644
index 9f1b7e1..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ComplexTypeNode.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-
-
-/**
- * Base for complex type declarations (nullable, union, intersection).
- */
-abstract class ComplexTypeNode extends Node
-{
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayAccessNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayAccessNode.php
deleted file mode 100644
index a5e20c1..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayAccessNode.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Array or string element access ($arr[$key]).
- */
-class ArrayAccessNode extends ExpressionNode
-{
-	public function __construct(
-		public ExpressionNode $expr,
-		public ?ExpressionNode $index = null,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->dereferenceExpr($this->expr)
-			. '[' . ($this->index !== null ? $this->index->print($context) : '') . ']';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expr;
-		if ($this->index) {
-			yield $this->index;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayNode.php
deleted file mode 100644
index 54da053..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ArrayNode.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ArgumentNode;
-use Latte\Compiler\Nodes\Php\ArrayItemNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Array literal.
- */
-class ArrayNode extends ExpressionNode
-{
-	public function __construct(
-		/** @var array<ArrayItemNode> */
-		public array $items = [],
-		public ?Position $position = null,
-	) {
-		(function (ArrayItemNode ...$args) {})(...$items);
-	}
-
-
-	/** @return ArgumentNode[] */
-	public function toArguments(): array
-	{
-		return array_map(fn(ArrayItemNode $item) => $item->toArgument(), $this->items);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '[' . $context->implode($this->items) . ']';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->items as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->items);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignNode.php
deleted file mode 100644
index 3642775..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignNode.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ListNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Assignment ($var = expr or $var = &$ref).
- */
-class AssignNode extends ExpressionNode implements OperatorNode
-{
-	public const Precedence = [90, self::AssocRight];
-
-
-	public function __construct(
-		public ExpressionNode|ListNode $var,
-		public ExpressionNode $expr,
-		public bool $byRef = false,
-		public ?Position $position = null,
-	) {
-		$this->validate();
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$this->validate();
-		return $context->parenthesize($this, $this->var, self::AssocLeft)
-			. ($this->byRef ? ' = &' : ' = ')
-			. $context->parenthesize($this, $this->expr, self::AssocRight);
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return self::Precedence;
-	}
-
-
-	public function validate(): void
-	{
-		if ($this->var instanceof ExpressionNode && !$this->var->isWritable()) {
-			throw new CompileException('Cannot write to the expression: ' . $this->var->print(new PrintContext), $this->var->position);
-		} elseif ($this->byRef && !$this->expr->isWritable()) {
-			throw new CompileException('Cannot take reference to the expression: ' . $this->expr->print(new PrintContext), $this->expr->position);
-		}
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->var;
-		yield $this->expr;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignOpNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignOpNode.php
deleted file mode 100644
index b3296b4..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AssignOpNode.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use function in_array;
-
-
-/**
- * Compound assignment ($var += expr, $var .= expr, etc.).
- */
-class AssignOpNode extends ExpressionNode implements OperatorNode
-{
-	private const Ops = ['+', '-', '*', '/', '.', '%', '&', '|', '^', '<<', '>>', '**', '??'];
-
-
-	public function __construct(
-		public ExpressionNode $var,
-		public string $operator,
-		public ExpressionNode $expr,
-		public ?Position $position = null,
-	) {
-		if (!in_array($this->operator, self::Ops, strict: true)) {
-			throw new \InvalidArgumentException("Unexpected operator '$this->operator'");
-		}
-		$this->validate();
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$this->validate();
-		return $context->parenthesize($this, $this->var, self::AssocLeft)
-			. ' ' . $this->operator . '= '
-			. $context->parenthesize($this, $this->expr, self::AssocRight);
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return AssignNode::Precedence;
-	}
-
-
-	public function validate(): void
-	{
-		if (!$this->var->isWritable()) {
-			throw new CompileException('Cannot write to the expression: ' . $this->var->print(new PrintContext), $this->var->position);
-		}
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->var;
-		yield $this->expr;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AuxiliaryNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AuxiliaryNode.php
deleted file mode 100644
index 7be1244..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/AuxiliaryNode.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Code generator hidden from compiler passes. Pass child nodes for traversal.
- */
-class AuxiliaryNode extends ExpressionNode
-{
-	public function __construct(
-		public readonly \Closure $print,
-		/** @var (?Node)[] */
-		public array $nodes = [],
-	) {
-		(function (?Node ...$nodes) {})(...$nodes);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return ($this->print)($context, ...$this->nodes);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->nodes as &$node) {
-			if ($node) {
-				yield $node;
-			}
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/BinaryOpNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/BinaryOpNode.php
deleted file mode 100644
index dcef29a..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/BinaryOpNode.php
+++ /dev/null
@@ -1,94 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use function count, in_array, strtolower;
-
-
-/**
- * Binary operation: arithmetic, logical, bitwise, comparison, null-coalescing, or pipe.
- */
-class BinaryOpNode extends ExpressionNode implements OperatorNode
-{
-	private const Ops = ['||', '&&', 'or', 'and', 'xor', '|', '&', '^', '.', '+', '-', '*', '/', '%', '<<', '>>', '**',
-		'==', '!=', '===', '!==', '<=>', '<', '<=', '>', '>=', '??', '|>'];
-
-
-	public function __construct(
-		public ExpressionNode $left,
-		public string $operator,
-		public ExpressionNode $right,
-		public ?Position $position = null,
-	) {
-		if (!in_array(strtolower($this->operator), self::Ops, strict: true)) {
-			throw new \InvalidArgumentException("Unexpected operator '$this->operator'");
-		}
-	}
-
-
-	/**
-	 * Creates nested BinaryOp nodes from a list of expressions.
-	 */
-	public static function nest(string $operator, ExpressionNode ...$exprs): ExpressionNode
-	{
-		$count = count($exprs);
-		if ($count < 2) {
-			return $exprs[0];
-		}
-
-		$last = $exprs[0];
-		for ($i = 1; $i < $count; $i++) {
-			$last = new static($last, $operator, $exprs[$i]);
-		}
-
-		return $last;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->parenthesize($this, $this->left, self::AssocLeft)
-			. ' ' . $this->operator . ' '
-			. $context->parenthesize($this, $this->right, self::AssocRight);
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return match (strtolower($this->operator)) {
-			'**' => [250, self::AssocRight],
-			'*', '/', '%' => [210, self::AssocLeft],
-			'+', '-' => [200, self::AssocLeft],
-			'<<', '>>' => [190, self::AssocLeft],
-			'.' => [185, self::AssocLeft],
-			'|>' => [183, self::AssocLeft],
-			'<', '<=', '>', '>=', '<=>' => [180, self::AssocNone],
-			'==', '!=', '===', '!==' => [170, self::AssocNone],
-			'&' => [160, self::AssocLeft],
-			'^' => [150, self::AssocLeft],
-			'|' => [140, self::AssocLeft],
-			'&&' => [130, self::AssocLeft],
-			'||' => [120, self::AssocLeft],
-			'??' => [110, self::AssocRight],
-			'and' => [50, self::AssocLeft],
-			'xor' => [40, self::AssocLeft],
-			'or' => [30, self::AssocLeft],
-		};
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->left;
-		yield $this->right;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CastNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CastNode.php
deleted file mode 100644
index 20263d8..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CastNode.php
+++ /dev/null
@@ -1,51 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Type cast (int), (string), (array), etc.
- */
-class CastNode extends ExpressionNode implements OperatorNode
-{
-	private const Types = ['int' => 1, 'float' => 1, 'string' => 1, 'array' => 1, 'object' => 1, 'bool' => 1];
-
-
-	public function __construct(
-		public string $type,
-		public ExpressionNode $expr,
-		public ?Position $position = null,
-	) {
-		if (!isset(self::Types[strtolower($this->type)])) {
-			throw new \InvalidArgumentException("Unexpected type '$this->type'");
-		}
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '(' . $this->type . ') ' . $context->parenthesize($this, $this->expr, self::AssocRight);
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return [240, self::AssocRight];
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expr;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClassConstantFetchNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClassConstantFetchNode.php
deleted file mode 100644
index 5bdd24e..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClassConstantFetchNode.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\IdentifierNode;
-use Latte\Compiler\Nodes\Php\NameNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Class constant access (Foo::CONST or Foo::class).
- */
-class ClassConstantFetchNode extends ExpressionNode
-{
-	public function __construct(
-		public NameNode|ExpressionNode $class,
-		public IdentifierNode|ExpressionNode $name,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->dereferenceExpr($this->class)
-			. '::'
-			. $context->objectProperty($this->name);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->class;
-		yield $this->name;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CloneNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CloneNode.php
deleted file mode 100644
index 856c38b..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/CloneNode.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Object cloning (clone $obj).
- */
-class CloneNode extends ExpressionNode implements OperatorNode
-{
-	public function __construct(
-		public ExpressionNode $expr,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return 'clone ' . $this->expr->print($context);
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return [270, self::AssocNone];
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expr;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClosureNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClosureNode.php
deleted file mode 100644
index 90e9a2b..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ClosureNode.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\ClosureUseNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Closure or arrow function (fn($x) => $x or function($x) use ($y) {}).
- */
-class ClosureNode extends ExpressionNode
-{
-	public function __construct(
-		public bool $byRef,
-		/** @var Php\ParameterNode[] */
-		public array $params,
-		/** @var ClosureUseNode[] */
-		public array $uses,
-		public Php\IdentifierNode|Php\NameNode|Php\ComplexTypeNode|null $returnType = null,
-		public ?ExpressionNode $expr = null,
-		public ?Position $position = null,
-	) {
-		(function (Php\ParameterNode ...$args) {})(...$params);
-		(function (ClosureUseNode ...$args) {})(...$uses);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$usesByRef = false;
-		foreach ($this->uses as $use) {
-			$usesByRef = $usesByRef || $use->byRef;
-		}
-
-		return $this->expr && !$usesByRef
-			? 'fn' . ($this->byRef ? '&' : '')
-				. '(' . $context->implode($this->params) . ')'
-				. ($this->returnType !== null ? ': ' . $this->returnType->print($context) : '')
-				. ' => '
-				. $this->expr->print($context)
-			: 'function ' . ($this->byRef ? '&' : '')
-				. '(' . $context->implode($this->params) . ')'
-				. (!empty($this->uses) ? ' use (' . $context->implode($this->uses) . ')' : '')
-				. ($this->returnType !== null ? ' : ' . $this->returnType->print($context) : '')
-				. ($this->expr ? ' { return ' . $this->expr->print($context) . '; }' : ' {}');
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->params as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->params);
-
-		foreach ($this->uses as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->uses);
-
-		if ($this->returnType) {
-			yield $this->returnType;
-		}
-		if ($this->expr) {
-			yield $this->expr;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ConstantFetchNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ConstantFetchNode.php
deleted file mode 100644
index e55e1bc..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/ConstantFetchNode.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\NameNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Global constant access (CONST or \CONST).
- */
-class ConstantFetchNode extends ExpressionNode
-{
-	public function __construct(
-		public NameNode $name,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if ($this->name->kind === NameNode::KindNormal) {
-			return match ((string) $this->name) {
-				'__LINE__' => (string) ($this->position->line ?? 0),
-				'__FILE__' => '(is_file($this->getName()) ? $this->getName() : null)',
-				'__DIR__' => '(is_file($this->getName()) ? dirname($this->getName()) : null)',
-				default => $this->name->print($context),
-			};
-		}
-		return $this->name->print($context);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->name;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/EmptyNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/EmptyNode.php
deleted file mode 100644
index 7acf0da..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/EmptyNode.php
+++ /dev/null
@@ -1,37 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * empty() language construct.
- */
-class EmptyNode extends ExpressionNode
-{
-	public function __construct(
-		public ExpressionNode $expr,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return 'empty(' . $this->expr->print($context) . ')';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expr;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FilterCallNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FilterCallNode.php
deleted file mode 100644
index cfbefc6..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FilterCallNode.php
+++ /dev/null
@@ -1,45 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Expression with filter applied ($expr|filter).
- */
-class FilterCallNode extends ExpressionNode
-{
-	public function __construct(
-		public ExpressionNode $expr,
-		public Php\FilterNode $filter,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$filters = [];
-		for ($node = $this; $node instanceof self; $node = $node->expr) {
-			array_unshift($filters, $node->filter);
-		}
-
-		return Php\FilterNode::printSimple($context, $filters, $node->print($context));
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expr;
-		yield $this->filter;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FunctionCallNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FunctionCallNode.php
deleted file mode 100644
index 61f1ecb..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/FunctionCallNode.php
+++ /dev/null
@@ -1,54 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\NameNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Function call with partial application or first-class callable support.
- */
-class FunctionCallNode extends ExpressionNode
-{
-	public function __construct(
-		public NameNode|ExpressionNode $name,
-		/** @var array<Php\ArgumentNode|Php\VariadicPlaceholderNode> */
-		public array $args = [],
-		public ?Position $position = null,
-	) {
-		(function (Php\ArgumentNode|Php\VariadicPlaceholderNode ...$args) {})(...$args);
-	}
-
-
-	public function isPartialFunction(): bool
-	{
-		return ($this->args[0] ?? null) instanceof Php\VariadicPlaceholderNode;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->callExpr($this->name)
-			. '(' . $context->implode($this->args) . ')';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->name;
-		foreach ($this->args as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->args);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InNode.php
deleted file mode 100644
index 8d8b667..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InNode.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Latte's `in` operator compiled to in_array() with strict mode.
- */
-class InNode extends ExpressionNode
-{
-	public function __construct(
-		public ExpressionNode $needle,
-		public ExpressionNode $haystack,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return 'in_array('
-			. $this->needle->print($context)
-			. ', '
-			. $this->haystack->print($context)
-			. ', true)';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->needle;
-		yield $this->haystack;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InstanceofNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InstanceofNode.php
deleted file mode 100644
index 93fd6e5..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/InstanceofNode.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\NameNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * instanceof type check.
- */
-class InstanceofNode extends ExpressionNode implements OperatorNode
-{
-	public function __construct(
-		public ExpressionNode $expr,
-		public NameNode|ExpressionNode $class,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->parenthesize($this, $this->expr, self::AssocLeft)
-			. ' instanceof '
-			. $context->dereferenceExpr($this->class);
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return [230, self::AssocNone];
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expr;
-		yield $this->class;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/IssetNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/IssetNode.php
deleted file mode 100644
index 79d6a7f..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/IssetNode.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * isset() language construct.
- */
-class IssetNode extends ExpressionNode
-{
-	public function __construct(
-		/** @var ExpressionNode[] */
-		public array $vars,
-		public ?Position $position = null,
-	) {
-		$this->validate();
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$this->validate();
-		return 'isset(' . $context->implode($this->vars) . ')';
-	}
-
-
-	public function validate(): void
-	{
-		foreach ($this->vars as $var) {
-			if (!$var instanceof ExpressionNode) {
-				throw new \TypeError('Variable must be ExpressionNode, ' . get_debug_type($var) . ' given.');
-			} elseif (!$var->isVariable()) {
-				throw new CompileException('Cannot use isset() on expression: ' . $var->print(new PrintContext), $var->position);
-			}
-		}
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->vars as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->vars);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MatchNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MatchNode.php
deleted file mode 100644
index 989f057..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MatchNode.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\MatchArmNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Match expression.
- */
-class MatchNode extends Php\ExpressionNode
-{
-	public function __construct(
-		public Php\ExpressionNode $cond,
-		/** @var MatchArmNode[] */
-		public array $arms = [],
-		public ?Position $position = null,
-	) {
-		(function (MatchArmNode ...$args) {})(...$arms);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$res = 'match (' . $this->cond->print($context) . ') {';
-		foreach ($this->arms as $node) {
-			$res .= "\n" . $node->print($context) . ',';
-		}
-
-		$res .= "\n}";
-		return $res;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->cond;
-		foreach ($this->arms as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->arms);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MethodCallNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MethodCallNode.php
deleted file mode 100644
index 061e5a0..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/MethodCallNode.php
+++ /dev/null
@@ -1,63 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\IdentifierNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Method call with nullsafe support, partial application, or first-class callable.
- */
-class MethodCallNode extends ExpressionNode
-{
-	public function __construct(
-		public ExpressionNode $object,
-		public IdentifierNode|ExpressionNode $name,
-		/** @var array<Php\ArgumentNode|Php\VariadicPlaceholderNode> */
-		public array $args = [],
-		public bool $nullsafe = false,
-		public ?Position $position = null,
-	) {
-		(function (Php\ArgumentNode|Php\VariadicPlaceholderNode ...$args) {})(...$args);
-	}
-
-
-	public function isPartialFunction(): bool
-	{
-		return ($this->args[0] ?? null) instanceof Php\VariadicPlaceholderNode;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if ($this->nullsafe && $this->isPartialFunction()) {
-			throw new CompileException('Cannot combine nullsafe operator with Closure creation', $this->position);
-		}
-		return $context->dereferenceExpr($this->object)
-			. ($this->nullsafe ? '?->' : '->')
-			. $context->objectProperty($this->name)
-			. '(' . $context->implode($this->args) . ')';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->object;
-		yield $this->name;
-		foreach ($this->args as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->args);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/NewNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/NewNode.php
deleted file mode 100644
index 5d753f4..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/NewNode.php
+++ /dev/null
@@ -1,55 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\NameNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Object instantiation (new ClassName or new $expr).
- */
-class NewNode extends ExpressionNode implements OperatorNode
-{
-	public function __construct(
-		public NameNode|ExpressionNode $class,
-		/** @var Php\ArgumentNode[] */
-		public array $args = [],
-		public ?Position $position = null,
-	) {
-		(function (Php\ArgumentNode ...$args) {})(...$args);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return 'new ' . $context->dereferenceExpr($this->class)
-			. ($this->args ? '(' . $context->implode($this->args) . ')' : '');
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return [270, self::AssocNone];
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->class;
-		foreach ($this->args as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->args);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PostOpNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PostOpNode.php
deleted file mode 100644
index 85b3949..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PostOpNode.php
+++ /dev/null
@@ -1,62 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Postfix increment/decrement ($var++, $var--).
- */
-class PostOpNode extends ExpressionNode implements OperatorNode
-{
-	private const Ops = ['++' => 1, '--' => 1];
-
-
-	public function __construct(
-		public ExpressionNode $var,
-		public string $operator,
-		public ?Position $position = null,
-	) {
-		if (!isset(self::Ops[$this->operator])) {
-			throw new \InvalidArgumentException("Unexpected operator '$this->operator'");
-		}
-		$this->validate();
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$this->validate();
-		return $context->parenthesize($this, $this->var, self::AssocLeft) . $this->operator;
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return [240, self::AssocLeft];
-	}
-
-
-	public function validate(): void
-	{
-		if (!$this->var->isWritable()) {
-			throw new CompileException('Cannot write to the expression: ' . $this->var->print(new PrintContext), $this->var->position);
-		}
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->var;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PreOpNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PreOpNode.php
deleted file mode 100644
index 1820a44..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PreOpNode.php
+++ /dev/null
@@ -1,62 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Prefix increment/decrement (++$var, --$var).
- */
-class PreOpNode extends ExpressionNode implements OperatorNode
-{
-	private const Ops = ['++' => 1, '--' => 1];
-
-
-	public function __construct(
-		public ExpressionNode $var,
-		public string $operator,
-		public ?Position $position = null,
-	) {
-		if (!isset(self::Ops[$this->operator])) {
-			throw new \InvalidArgumentException("Unexpected operator '$this->operator'");
-		}
-		$this->validate();
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$this->validate();
-		return $this->operator . $context->parenthesize($this, $this->var, self::AssocRight);
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return [240, self::AssocRight];
-	}
-
-
-	public function validate(): void
-	{
-		if (!$this->var->isWritable()) {
-			throw new CompileException('Cannot write to the expression: ' . $this->var->print(new PrintContext), $this->var->position);
-		}
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->var;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PropertyFetchNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PropertyFetchNode.php
deleted file mode 100644
index 12311fe..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/PropertyFetchNode.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\IdentifierNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Property access with nullsafe support ($obj->prop, $obj?->prop).
- */
-class PropertyFetchNode extends ExpressionNode
-{
-	public function __construct(
-		public ExpressionNode $object,
-		public IdentifierNode|ExpressionNode $name,
-		public bool $nullsafe = false,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->dereferenceExpr($this->object)
-			. ($this->nullsafe ? '?->' : '->')
-			. $context->objectProperty($this->name);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->object;
-		yield $this->name;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticMethodCallNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticMethodCallNode.php
deleted file mode 100644
index a6215b9..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticMethodCallNode.php
+++ /dev/null
@@ -1,64 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\IdentifierNode;
-use Latte\Compiler\Nodes\Php\NameNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Static method call with partial application or first-class callable support.
- */
-class StaticMethodCallNode extends ExpressionNode
-{
-	public function __construct(
-		public NameNode|ExpressionNode $class,
-		public IdentifierNode|ExpressionNode $name,
-		/** @var array<Php\ArgumentNode|Php\VariadicPlaceholderNode> */
-		public array $args = [],
-		public ?Position $position = null,
-	) {
-		(function (Php\ArgumentNode|Php\VariadicPlaceholderNode ...$args) {})(...$args);
-	}
-
-
-	public function isPartialFunction(): bool
-	{
-		return ($this->args[0] ?? null) instanceof Php\VariadicPlaceholderNode;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$name = match (true) {
-			$this->name instanceof VariableNode => $this->name->print($context),
-			$this->name instanceof ExpressionNode => '{' . $this->name->print($context) . '}',
-			default => $this->name,
-		};
-		return $context->dereferenceExpr($this->class)
-			. '::'
-			. $name
-			. '(' . $context->implode($this->args) . ')';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->class;
-		yield $this->name;
-		foreach ($this->args as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->args);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticPropertyFetchNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticPropertyFetchNode.php
deleted file mode 100644
index 6ce325f..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/StaticPropertyFetchNode.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\NameNode;
-use Latte\Compiler\Nodes\Php\VarLikeIdentifierNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Static property access (Foo::$prop).
- */
-class StaticPropertyFetchNode extends ExpressionNode
-{
-	public function __construct(
-		public NameNode|ExpressionNode $class,
-		public VarLikeIdentifierNode|ExpressionNode $name,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->dereferenceExpr($this->class)
-			. '::$'
-			. $context->objectProperty($this->name);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->class;
-		yield $this->name;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TemporaryNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TemporaryNode.php
deleted file mode 100644
index 197dbc7..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TemporaryNode.php
+++ /dev/null
@@ -1,37 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ListNode;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Temporary container for partial parsing results (e.g., array destructuring).
- * @internal
- */
-class TemporaryNode extends ExpressionNode
-{
-	public function __construct(
-		public ?ListNode $value,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TernaryNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TernaryNode.php
deleted file mode 100644
index ff1ce5e..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/TernaryNode.php
+++ /dev/null
@@ -1,55 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Nodes\Php\Scalar\NullNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Ternary conditional ($cond ? $then : $else) or elvis operator ($a ?: $b).
- */
-class TernaryNode extends ExpressionNode implements OperatorNode
-{
-	public function __construct(
-		public ExpressionNode $cond,
-		public ?ExpressionNode $if,
-		public ?ExpressionNode $else,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->parenthesize($this, $this->cond, self::AssocLeft)
-			. ($this->if ? ' ? ' . $this->if->print($context) . ' : ' : ' ?: ')
-			. $context->parenthesize($this, $this->else ?? new NullNode, self::AssocRight);
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return [100, self::AssocNone];
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->cond;
-		if ($this->if) {
-			yield $this->if;
-		}
-		if ($this->else) {
-			yield $this->else;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/UnaryOpNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/UnaryOpNode.php
deleted file mode 100644
index 4b6345b..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/UnaryOpNode.php
+++ /dev/null
@@ -1,55 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Unary prefix operation (+, -, ~, @, !).
- */
-class UnaryOpNode extends ExpressionNode implements OperatorNode
-{
-	private const Ops = ['+' => 1, '-' => 1, '~' => 1, '@' => 1, '!' => 1];
-
-
-	public function __construct(
-		public ExpressionNode $expr,
-		public string $operator,
-		public ?Position $position = null,
-	) {
-		if (!isset(self::Ops[$this->operator])) {
-			throw new \InvalidArgumentException("Unexpected operator '$this->operator'");
-		}
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$pos = $this->expr instanceof self || $this->expr instanceof PreOpNode ? self::AssocLeft : self::AssocRight; // Enforce -(-$expr) instead of --$expr
-		return $this->operator . $context->parenthesize($this, $this->expr, $pos);
-	}
-
-
-	public function getOperatorPrecedence(): array
-	{
-		return match ($this->operator) {
-			'+', '-', '~', '@' => [240, self::AssocRight],
-			'!' => [220, self::AssocRight],
-		};
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expr;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/VariableNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/VariableNode.php
deleted file mode 100644
index a2b9e59..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Expression/VariableNode.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Expression;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Variable access ($name or ${expr} for variable variables).
- */
-class VariableNode extends ExpressionNode
-{
-	public function __construct(
-		public string|ExpressionNode $name,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->name instanceof ExpressionNode
-			? '${' . $this->name->print($context) . '}'
-			: '$' . $this->name;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->name instanceof ExpressionNode) {
-			yield $this->name;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ExpressionNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ExpressionNode.php
deleted file mode 100644
index ce261e0..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ExpressionNode.php
+++ /dev/null
@@ -1,51 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-
-
-/**
- * Base for PHP expression nodes (variables, operators, calls, literals).
- */
-abstract class ExpressionNode extends Node
-{
-	/**
-	 * Checks whether the expression can be used as the target of an assignment.
-	 */
-	public function isWritable(): bool
-	{
-		return $this instanceof Expression\ArrayAccessNode
-			|| ($this instanceof Expression\PropertyFetchNode && !$this->nullsafe)
-			|| $this instanceof Expression\StaticPropertyFetchNode
-			|| $this instanceof Expression\VariableNode;
-	}
-
-
-	/**
-	 * Checks whether the expression represents a variable-like access (variable, property, or array element).
-	 */
-	public function isVariable(): bool
-	{
-		return $this instanceof Expression\ArrayAccessNode
-			|| $this instanceof Expression\PropertyFetchNode
-			|| $this instanceof Expression\StaticPropertyFetchNode
-			|| $this instanceof Expression\VariableNode;
-	}
-
-
-	/**
-	 * Checks whether the expression is a function or method call.
-	 */
-	public function isCall(): bool
-	{
-		return $this instanceof Expression\FunctionCallNode
-			|| $this instanceof Expression\MethodCallNode
-			|| $this instanceof Expression\StaticMethodCallNode;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/FilterNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/FilterNode.php
deleted file mode 100644
index a834e44..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/FilterNode.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\CompileException;
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Single filter with name, arguments, and nullsafe flag (|name:arg).
- */
-class FilterNode extends Node
-{
-	public function __construct(
-		public IdentifierNode $name,
-		/** @var ArgumentNode[] */
-		public array $args = [],
-		public bool $nullsafe = false,
-		public ?Position $position = null,
-	) {
-		if ($name->name === 'escape') {
-			throw new CompileException("Filter 'escape' is not allowed.", $position);
-		}
-		(function (ArgumentNode ...$args) {})(...$args);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		throw new \LogicException('Cannot directly print FilterNode');
-	}
-
-
-	/** @param  self[]  $filters */
-	public static function printSimple(PrintContext $context, array $filters, string $expr): string
-	{
-		$nullsafe = false;
-		$chain = $expr;
-		$tmp = '$ʟ_tmp';
-		foreach ($filters as $filter) {
-			if ($filter->nullsafe) {
-				$expr = $nullsafe ? "(($tmp = $expr) === null ? null : $chain)" : $chain;
-				$chain = $tmp;
-				$nullsafe = true;
-			}
-
-			$chain = '($this->filters->' . $context->objectProperty($filter->name) . ')('
-				. $chain
-				. ($filter->args ? ', ' . $context->implode($filter->args) : '')
-				. ')';
-		}
-
-		return $nullsafe ? "(($tmp = $expr) === null ? null : $chain)" : $chain;
-	}
-
-
-	public function printContentAware(PrintContext $context, string $expr): string
-	{
-		if ($this->nullsafe) {
-			throw new CompileException('Content-aware filter cannot be nullsafe.', $this->position);
-		}
-		return '$this->filters->filterContent('
-			. $context->encodeString($this->name->name)
-			. ', $ʟ_fi, '
-			. $expr
-			. ($this->args ? ', ' . $context->implode($this->args) : '')
-			. ')';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->name;
-		foreach ($this->args as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->args);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/IdentifierNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/IdentifierNode.php
deleted file mode 100644
index 4597f52..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/IdentifierNode.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Simple identifier (unqualified name).
- */
-class IdentifierNode extends Node
-{
-	public function __construct(
-		public string $name,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function __toString(): string
-	{
-		return $this->name;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->name;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/InterpolatedStringPartNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/InterpolatedStringPartNode.php
deleted file mode 100644
index 6893fdf..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/InterpolatedStringPartNode.php
+++ /dev/null
@@ -1,37 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Literal part of interpolated string.
- */
-class InterpolatedStringPartNode extends Node
-{
-	public function __construct(
-		public string $value,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		throw new \LogicException('Cannot directly print InterpolatedStringPart');
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/IntersectionTypeNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/IntersectionTypeNode.php
deleted file mode 100644
index 9662f82..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/IntersectionTypeNode.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Intersection type (Type1&Type2).
- */
-class IntersectionTypeNode extends ComplexTypeNode
-{
-	public function __construct(
-		/** @var array<IdentifierNode|NameNode> */
-		public array $types,
-		public ?Position $position = null,
-	) {
-		(function (IdentifierNode|NameNode ...$args) {})(...$types);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->implode($this->types, '&');
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->types as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->types);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ListItemNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ListItemNode.php
deleted file mode 100644
index 9f910ef..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ListItemNode.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Array destructuring item.
- */
-class ListItemNode extends Node
-{
-	public function __construct(
-		public ExpressionNode|ListNode $value,
-		public ExpressionNode|IdentifierNode|null $key = null,
-		public bool $byRef = false,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$key = match (true) {
-			$this->key instanceof ExpressionNode => $this->key->print($context) . ' => ',
-			$this->key instanceof IdentifierNode => $context->encodeString($this->key->name) . ' => ',
-			$this->key === null => '',
-		};
-		return $key
-			. ($this->byRef ? '&' : '')
-			. $this->value->print($context);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->key) {
-			yield $this->key;
-		}
-		yield $this->value;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ListNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ListNode.php
deleted file mode 100644
index 65f255a..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ListNode.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\CompileException;
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Array destructuring ([$a, $b] = $arr).
- */
-class ListNode extends Node
-{
-	public function __construct(
-		/** @var array<ListItemNode|null> */
-		public array $items = [],
-		public ?Position $position = null,
-	) {
-		$this->validate();
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$this->validate();
-		return '[' . $context->implode($this->items) . ']';
-	}
-
-
-	public function validate(): void
-	{
-		foreach ($this->items as $item) {
-			if ($item !== null && !$item instanceof ListItemNode) {
-				throw new \TypeError('Item must be null or ListItemNode, ' . get_debug_type($item) . ' given.');
-			} elseif ($item?->value instanceof ExpressionNode && !$item->value->isWritable()) {
-				throw new CompileException('Cannot write to the expression: ' . $item->value->print(new PrintContext), $item->value->position);
-			}
-		}
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->items as &$item) {
-			if ($item) {
-				yield $item;
-			}
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/MatchArmNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/MatchArmNode.php
deleted file mode 100644
index dbc2ab7..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/MatchArmNode.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Match expression arm with conditions and body.
- */
-class MatchArmNode extends Node
-{
-	public function __construct(
-		/** @var ExpressionNode[]|null */
-		public ?array $conds,
-		public ExpressionNode $body,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return ($this->conds ? $context->implode($this->conds) : 'default')
-			. ' => '
-			. $this->body->print($context);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->conds) {
-			foreach ($this->conds as &$item) {
-				yield $item;
-			}
-			Helpers::removeNulls($this->conds);
-		}
-		yield $this->body;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ModifierNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ModifierNode.php
deleted file mode 100644
index 8563a5e..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ModifierNode.php
+++ /dev/null
@@ -1,98 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Chain of filters with auto-escape flag.
- */
-class ModifierNode extends Node
-{
-	/** @deprecated */
-	public bool $check = true;
-
-
-	public function __construct(
-		/** @var FilterNode[] */
-		public array $filters,
-		public bool $escape = false,
-		public ?Position $position = null,
-	) {
-		(function (FilterNode ...$args) {})(...$filters);
-	}
-
-
-	public function hasFilter(string $name): bool
-	{
-		foreach ($this->filters as $filter) {
-			if ($filter->name->name === $name) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-
-	/**
-	 * Removes and returns the first filter with the given name, or null if not found.
-	 */
-	public function removeFilter(string $name): ?FilterNode
-	{
-		foreach ($this->filters as $i => $filter) {
-			if ($filter->name->name === $name) {
-				return array_splice($this->filters, $i, 1)[0];
-			}
-		}
-
-		return null;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		throw new \LogicException('Cannot directly print ModifierNode');
-	}
-
-
-	public function printSimple(PrintContext $context, string $expr): string
-	{
-		$expr = FilterNode::printSimple($context, $this->filters, $expr);
-
-		$escaper = $context->getEscaper();
-		return $this->escape
-			? $escaper->escape($expr)
-			: $escaper->escapeMandatory($expr, $this->position);
-	}
-
-
-	public function printContentAware(PrintContext $context, string $expr): string
-	{
-		foreach ($this->filters as $filter) {
-			$expr = $filter->printContentAware($context, $expr);
-		}
-
-		return $this->escape
-			? $context->getEscaper()->escapeContent($expr)
-			: $expr;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->filters as &$filter) {
-			yield $filter;
-		}
-		Helpers::removeNulls($this->filters);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/NameNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/NameNode.php
deleted file mode 100644
index dbaffc5..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/NameNode.php
+++ /dev/null
@@ -1,90 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use function array_flip, str_starts_with, strtolower, substr;
-
-
-/**
- * Qualified name for functions, classes, or constants (\Foo\Bar).
- */
-class NameNode extends Node
-{
-	public const
-		KindNormal = 1,
-		KindFullyQualified = 2;
-
-
-	public function __construct(
-		public string $name,
-		public int $kind = self::KindNormal,
-		public ?Position $position = null,
-	) {
-		if ($name === '') {
-			throw new \InvalidArgumentException('Name cannot be empty');
-		} elseif (str_starts_with($name, 'namespace\\')) {
-			throw new \InvalidArgumentException('Relative name is not supported');
-		} elseif (str_starts_with($name, '\\')) {
-			$this->kind = self::KindFullyQualified;
-			$this->name = substr($name, 1);
-		} else {
-			if ($kind === -1 && !str_starts_with($name, '__')) {
-				trigger_error("Using unqualified constant '$name' is deprecated. Use '\\$name' with a leading backslash $position", E_USER_DEPRECATED);
-			}
-			$this->kind = self::KindNormal;
-		}
-	}
-
-
-	public function isKeyword(): bool
-	{
-		static $keywords;
-		$keywords ??= array_flip([ // https://www.php.net/manual/en/reserved.keywords.php
-			'__halt_compiler', '__class__', '__dir__', '__file__', '__function__', '__line__', '__method__', '__namespace__', '__trait__',
-			'abstract', 'and', 'array', 'as', 'break', 'callable', 'case', 'catch', 'class', 'const', 'continue', 'declare',
-			'default', 'die', 'do', 'echo', 'else', 'elseif', 'empty', 'enddeclare', 'endfor', 'endforeach', 'endif', 'endswitch',
-			'endwhile', 'eval', 'exit', 'extends', 'final', 'finally', 'fn', 'for', 'foreach', 'function', 'global', 'goto', 'if',
-			'implements', 'include', 'include_once', 'instanceof', 'insteadof', 'interface', 'isset', 'list', 'match', 'namespace',
-			'new', 'or', 'print', 'private', 'protected', 'public', 'readonly', 'require', 'require_once', 'return', 'static',
-			'switch', 'throw', 'trait', 'try', 'unset', 'use', 'var', 'while', 'xor', 'yield',
-			'parent', 'self', 'mixed', 'void', 'enum', // extra
-		]);
-		return isset($keywords[strtolower($this->name)]);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->toCodeString();
-	}
-
-
-	public function __toString(): string
-	{
-		return $this->name;
-	}
-
-
-	public function toCodeString(): string
-	{
-		$prefix = match ($this->kind) {
-			self::KindNormal => $this->isKeyword() ? 'namespace\\' : '',
-			self::KindFullyQualified => '\\',
-		};
-		return $prefix . $this->name;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/NullableTypeNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/NullableTypeNode.php
deleted file mode 100644
index 18db1a6..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/NullableTypeNode.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Nullable type (?Type).
- */
-class NullableTypeNode extends ComplexTypeNode
-{
-	public function __construct(
-		public IdentifierNode|NameNode $type,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '?' . $this->type->print($context);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->type;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/OperatorNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/OperatorNode.php
deleted file mode 100644
index 0d91414..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/OperatorNode.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-
-/**
- * Interface for expression nodes that represent operators with precedence.
- */
-interface OperatorNode
-{
-	/** Operator associativity or position */
-	public const
-		AssocLeft = -1,
-		AssocNone = 0,
-		AssocRight = 1;
-
-	/**
-	 * Returns [precedence, associativity] for this operator.
-	 * @return array{int, self::AssocLeft|self::AssocNone|self::AssocRight}
-	 */
-	public function getOperatorPrecedence(): array;
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ParameterNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ParameterNode.php
deleted file mode 100644
index 3acad7f..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ParameterNode.php
+++ /dev/null
@@ -1,55 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\CompileException;
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Function parameter with type, default value, and variadic support.
- */
-class ParameterNode extends Node
-{
-	public function __construct(
-		public Expression\VariableNode $var,
-		public ?ExpressionNode $default = null,
-		public IdentifierNode|NameNode|ComplexTypeNode|null $type = null,
-		public bool $byRef = false,
-		public bool $variadic = false,
-		public ?Position $position = null,
-	) {
-		if ($variadic && $default !== null) {
-			throw new CompileException('Variadic parameter cannot have a default value', $position);
-		}
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return ($this->type ? $this->type->print($context) . ' ' : '')
-			. ($this->byRef ? '&' : '')
-			. ($this->variadic ? '...' : '')
-			. $this->var->print($context)
-			. ($this->default ? ' = ' . $this->default->print($context) : '');
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->type) {
-			yield $this->type;
-		}
-		yield $this->var;
-		if ($this->default) {
-			yield $this->default;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/BooleanNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/BooleanNode.php
deleted file mode 100644
index a989213..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/BooleanNode.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Scalar;
-
-use Latte\Compiler\Nodes\Php\ScalarNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Boolean literal (true/false).
- */
-class BooleanNode extends ScalarNode
-{
-	public function __construct(
-		public bool $value,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->value ? 'true' : 'false';
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/FloatNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/FloatNode.php
deleted file mode 100644
index fe63516..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/FloatNode.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Scalar;
-
-use Latte\Compiler\Nodes\Php\ScalarNode;
-use Latte\Compiler\PhpHelpers;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use function is_finite, preg_match, sprintf, str_replace, strpbrk;
-use const INF;
-
-
-/**
- * Floating-point literal including infinity and NaN.
- */
-class FloatNode extends ScalarNode
-{
-	public function __construct(
-		public float $value,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public static function parse(string $str, ?Position $position): static
-	{
-		return strpbrk($str, '.eE') === false
-			? new static((float) PhpHelpers::decodeNumber($str), $position)
-			: new static((float) str_replace('_', '', $str), $position);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if (!is_finite($this->value)) {
-			if ($this->value === INF) {
-				return '\INF';
-			} elseif ($this->value === -INF) {
-				return '-\INF';
-			} else {
-				return '\NAN';
-			}
-		}
-
-		// Try to find a short full-precision representation
-		$stringValue = sprintf('%.16G', $this->value);
-		if ($this->value !== (float) $stringValue) {
-			$stringValue = sprintf('%.17G', $this->value);
-		}
-
-		// %G is locale dependent and there exists no locale-independent alternative. We don't want
-		// mess with switching locales here, so let's assume that a comma is the only non-standard
-		// decimal separator we may encounter...
-		$stringValue = str_replace(',', '.', $stringValue);
-
-		// ensure that number is really printed as float
-		return preg_match('/^-?[0-9]+$/', $stringValue)
-			? $stringValue . '.0'
-			: $stringValue;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/IntegerNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/IntegerNode.php
deleted file mode 100644
index eaa068a..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/IntegerNode.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Scalar;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\ScalarNode;
-use Latte\Compiler\PhpHelpers;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use const PHP_INT_MAX;
-
-
-/**
- * Integer literal in decimal, hex, octal, or binary notation.
- */
-class IntegerNode extends ScalarNode
-{
-	public const KindBinary = 2;
-	public const KindOctal = 8;
-	public const KindDecimal = 10;
-	public const KindHexa = 16;
-
-
-	public function __construct(
-		public int $value,
-		public int $kind = self::KindDecimal,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public static function parse(string $str, ?Position $position): static
-	{
-		$num = PhpHelpers::decodeNumber($str, $base);
-		if ($num === null) {
-			throw new CompileException('Invalid numeric literal', $position);
-		}
-		return new static($num, $base, $position);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if ($this->value === -PHP_INT_MAX - 1) {
-			// PHP_INT_MIN cannot be represented as a literal, because the sign is not part of the literal
-			return '(-' . PHP_INT_MAX . '-1)';
-
-		} elseif ($this->kind === self::KindDecimal) {
-			return (string) $this->value;
-		}
-
-		if ($this->value < 0) {
-			$sign = '-';
-			$str = (string) -$this->value;
-		} else {
-			$sign = '';
-			$str = (string) $this->value;
-		}
-
-		return match ($this->kind) {
-			self::KindBinary => $sign . '0b' . base_convert($str, 10, 2),
-			self::KindOctal => $sign . '0' . base_convert($str, 10, 8),
-			self::KindHexa => $sign . '0x' . base_convert($str, 10, 16),
-			default => throw new \Exception('Invalid number kind'),
-		};
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/InterpolatedStringNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/InterpolatedStringNode.php
deleted file mode 100644
index 6cf8233..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/InterpolatedStringNode.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Scalar;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\InterpolatedStringPartNode;
-use Latte\Compiler\Nodes\Php\ScalarNode;
-use Latte\Compiler\PhpHelpers;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-use function substr;
-
-
-/**
- * Double-quoted string with embedded expressions ("Hello $name").
- */
-class InterpolatedStringNode extends ScalarNode
-{
-	public function __construct(
-		/** @var array<ExpressionNode|InterpolatedStringPartNode> */
-		public array $parts,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	/** @param array<ExpressionNode|InterpolatedStringPartNode>  $parts */
-	public static function parse(array $parts, ?Position $position): static
-	{
-		foreach ($parts as $part) {
-			if ($part instanceof InterpolatedStringPartNode) {
-				$part->value = PhpHelpers::decodeEscapeSequences($part->value, '"');
-			}
-		}
-
-		return new static($parts, $position);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$s = '';
-		$expr = false;
-		foreach ($this->parts as $part) {
-			if ($part instanceof InterpolatedStringPartNode) {
-				$s .= substr($context->encodeString($part->value, '"'), 1, -1);
-				continue;
-			}
-
-			$partStr = $part->print($context);
-			if ($partStr[0] === '$' && $part->isVariable()) {
-				$s .= '{' . $partStr . '}';
-			} else {
-				$s .= '" . (' . $partStr . ') . "';
-				$expr = true;
-			}
-		}
-
-		return $expr
-			? '("' . $s . '")'
-			: '"' . $s . '"';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->parts as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->parts);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/NullNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/NullNode.php
deleted file mode 100644
index 2b03f0a..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/NullNode.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Scalar;
-
-use Latte\Compiler\Nodes\Php\ScalarNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Null literal.
- */
-class NullNode extends ScalarNode
-{
-	public function __construct(
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return 'null';
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/StringNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/StringNode.php
deleted file mode 100644
index 09ac653..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/Scalar/StringNode.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php\Scalar;
-
-use Latte\Compiler\Nodes\Php\ScalarNode;
-use Latte\Compiler\PhpHelpers;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use function strtr, substr;
-
-
-/**
- * String literal, single or double quoted.
- */
-class StringNode extends ScalarNode
-{
-	public function __construct(
-		public string $value,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public static function parse(string $str, ?Position $position): static
-	{
-		$str = $str[0] === "'"
-			? strtr(substr($str, 1, -1), ['\\\\' => '\\', "\\'" => "'"])
-			: PhpHelpers::decodeEscapeSequences(substr($str, 1, -1), '"');
-		return new static($str, $position);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->encodeString($this->value);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ScalarNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ScalarNode.php
deleted file mode 100644
index 7c362cd..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/ScalarNode.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-
-/**
- * Base for literal value nodes (strings, numbers, booleans, null).
- */
-abstract class ScalarNode extends ExpressionNode
-{
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/SuperiorTypeNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/SuperiorTypeNode.php
deleted file mode 100644
index 7c6e461..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/SuperiorTypeNode.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Type not expressible in native PHP syntax (e.g., int[], array<K,V>).
- */
-class SuperiorTypeNode extends ComplexTypeNode
-{
-	public function __construct(
-		public string $type,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		throw new \LogicException('Cannot directly print SuperiorTypeNode');
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/UnionTypeNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/UnionTypeNode.php
deleted file mode 100644
index 3d62bd7..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/UnionTypeNode.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Union type (Type1|Type2).
- */
-class UnionTypeNode extends ComplexTypeNode
-{
-	public function __construct(
-		/** @var array<IdentifierNode|NameNode> */
-		public array $types,
-		public ?Position $position = null,
-	) {
-		(function (IdentifierNode|NameNode ...$args) {})(...$types);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->implode($this->types, '|');
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->types as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->types);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/VarLikeIdentifierNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/VarLikeIdentifierNode.php
deleted file mode 100644
index fe0c842..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/VarLikeIdentifierNode.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Identifier for static property name in Foo::$bar syntax.
- */
-class VarLikeIdentifierNode extends IdentifierNode
-{
-	public function print(PrintContext $context): string
-	{
-		return '$' . $this->name;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/VariadicPlaceholderNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/VariadicPlaceholderNode.php
deleted file mode 100644
index e7d1657..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/Php/VariadicPlaceholderNode.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes\Php;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Placeholder ... for partial function application or first-class callable creation.
- */
-class VariadicPlaceholderNode extends Node
-{
-	public function __construct(
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '...';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/PrintNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/PrintNode.php
deleted file mode 100644
index 49fb019..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/PrintNode.php
+++ /dev/null
@@ -1,59 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes;
-
-use Latte;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ModifierNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TemplateParser;
-
-
-/**
- * {= $expr|filter}
- * Outputs escaped expression.
- */
-class PrintNode extends StatementNode
-{
-	public ExpressionNode $expression;
-	public ModifierNode $modifier;
-
-
-	public static function create(Tag $tag, TemplateParser $parser): static
-	{
-		$tag->outputMode = $tag::OutputKeepIndentation;
-		$tag->expectArguments();
-		$node = new static;
-		$node->expression = $tag->parser->parseExpression();
-		$node->modifier = $tag->parser->parseModifier();
-		$node->modifier->escape = !$node->modifier->removeFilter('noescape');
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			"echo %modify(%node) %line;\n",
-			$this->modifier,
-			$this->expression,
-			$this->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expression;
-		yield $this->modifier;
-	}
-}
-
-
-class_alias(PrintNode::class, Latte\Essential\Nodes\PrintNode::class);
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/StatementNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/StatementNode.php
deleted file mode 100644
index 315b0ad..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/StatementNode.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes;
-
-use Latte\Compiler\Range;
-
-
-/**
- * Base for Latte tags like {if}, {foreach}, {block}.
- *
- * Extend this class when creating custom tags. Implement static create(Tag)
- * for parsing and print(PrintContext) for PHP code generation.
- */
-abstract class StatementNode extends AreaNode
-{
-	/** @var list<Range> positions of all tags (opening, intermediate like {else}, closing) */
-	public array $tagRanges = [];
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/TemplateNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/TemplateNode.php
deleted file mode 100644
index a15d99d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/TemplateNode.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Root of template AST containing head declarations and main content fragment.
- */
-final class TemplateNode extends Node
-{
-	public FragmentNode $head;
-	public FragmentNode $main;
-	public string $contentType;
-
-
-	public function print(PrintContext $context): string
-	{
-		throw new \LogicException('Cannot directly print TemplateNode');
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->head;
-		yield $this->main;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/TextNode.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/TextNode.php
deleted file mode 100644
index 7033331..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Nodes/TextNode.php
+++ /dev/null
@@ -1,45 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler\Nodes;
-
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use function trim, var_export;
-
-
-/**
- * Literal text content in template.
- */
-class TextNode extends AreaNode
-{
-	public function __construct(
-		public string $content,
-		public ?Position $position = null,
-	) {
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->content === ''
-			? ''
-			: 'echo ' . var_export($this->content, return: true) . ";\n";
-	}
-
-
-	public function isWhitespace(): bool
-	{
-		return trim($this->content) === '';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/PhpHelpers.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/PhpHelpers.php
deleted file mode 100644
index 0d110b4..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/PhpHelpers.php
+++ /dev/null
@@ -1,279 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\CompileException;
-use function bindec, chr, count, explode, fclose, fwrite, hexdec, in_array, is_array, is_resource, max, octdec, preg_match, preg_replace, preg_replace_callback, proc_close, proc_open, str_repeat, str_replace, stream_get_contents, strip_tags, stripslashes, strlen, strpbrk, substr, substr_count, substr_replace, token_get_all, trim, var_export;
-use const T_CATCH, T_CLOSE_TAG, T_COMMENT, T_CONSTANT_ENCAPSED_STRING, T_CURLY_OPEN, T_DOC_COMMENT, T_DOLLAR_OPEN_CURLY_BRACES, T_ECHO, T_ELSE, T_ELSEIF, T_FINALLY, T_OBJECT_OPERATOR, T_OPEN_TAG, T_WHITESPACE;
-
-
-/**
- * PHP helpers.
- * @internal
- */
-final class PhpHelpers
-{
-	/**
-	 * Optimizes code readability.
-	 */
-	public static function reformatCode(string $source): string
-	{
-		$res = '';
-		$lastChar = ';';
-		$tokens = new \ArrayIterator(token_get_all($source));
-		$level = 0;
-
-		foreach ($tokens as $n => $token) {
-			$next = $tokens[$n + 1] ?? [null, ''];
-
-			if (is_array($token)) {
-				[$name, $token] = $token;
-				if ($name === T_ELSE || $name === T_ELSEIF) {
-					if ($next === ':' && $lastChar === '}') {
-						$res .= ';'; // semicolon needed in if(): ... if() ... else:
-					}
-
-					$lastChar = '';
-					$res .= $token;
-
-				} elseif ($name === T_DOC_COMMENT || $name === T_COMMENT) {
-					$res .= preg_replace("#\n[ \t]*+(?!\n)#", "\n" . str_repeat("\t", $level), $token);
-
-				} elseif ($name === T_WHITESPACE) {
-					$prev = $tokens[$n - 1];
-					$lines = substr_count($token, "\n");
-					if ($prev === '}' && in_array($next[0], [T_ELSE, T_ELSEIF, T_CATCH, T_FINALLY], strict: true)) {
-						$token = ' ';
-					} elseif ($prev === '{' || $prev === '}' || $prev === ';' || $lines) {
-						$token = str_repeat("\n", max(1, $lines)) . str_repeat("\t", $level); // indent last line
-					} elseif (is_array($prev) && $prev[0] === T_OPEN_TAG) {
-						$token = '';
-					}
-
-					$res .= $token;
-
-				} elseif ($name === T_OBJECT_OPERATOR) {
-					$lastChar = '->';
-					$res .= $token;
-
-				} elseif ($name === T_OPEN_TAG) {
-					$res .= $next[0] === T_DECLARE ? '<?php ' : "<?php\n";
-
-				} elseif ($name === T_CLOSE_TAG) {
-					throw new \LogicException('Unexpected token');
-
-				} else {
-					if (in_array($name, [T_CURLY_OPEN, T_DOLLAR_OPEN_CURLY_BRACES], strict: true)) {
-						$level++;
-					}
-
-					$lastChar = '';
-					$res .= $token;
-				}
-			} else {
-				if ($token === '{' || $token === '[') {
-					$level++;
-				} elseif ($token === '}' || $token === ']') {
-					$level--;
-					$res .= "\x08";
-
-				} elseif ($token === ';') {
-					if ($next[0] !== T_WHITESPACE) {
-						$token .= "\n" . str_repeat("\t", $level); // indent last line
-					}
-				}
-
-				$lastChar = $token;
-				$res .= $token;
-			}
-		}
-
-		$res = str_replace(["\t\x08", "\x08"], '', $res);
-		return $res;
-	}
-
-
-	/**
-	 * Exports value to PHP code representation.
-	 */
-	public static function dump(mixed $value, bool $multiline = false): string
-	{
-		if (is_array($value)) {
-			$indexed = array_is_list($value);
-			$s = '';
-			foreach ($value as $k => $v) {
-				$s .= $multiline
-					? ($s === '' ? "\n" : '') . "\t" . ($indexed ? '' : self::dump($k) . ' => ') . self::dump($v) . ",\n"
-					: ($s === '' ? '' : ', ') . ($indexed ? '' : self::dump($k) . ' => ') . self::dump($v);
-			}
-
-			return '[' . $s . ']';
-		} elseif ($value === null) {
-			return 'null';
-		} else {
-			return var_export($value, return: true);
-		}
-	}
-
-
-	/**
-	 * Optimizes consecutive echo statements into single call.
-	 */
-	public static function optimizeEcho(string $source): string
-	{
-		$res = '';
-		$tokens = token_get_all($source);
-		$start = null;
-		$str = '';
-
-		for ($i = 0; $i < count($tokens); $i++) {
-			$token = $tokens[$i];
-			if ($token[0] === T_ECHO) {
-				if ($start === null) {
-					$str = '';
-					$start = strlen($res);
-				}
-
-			} elseif ($start !== null && $token[0] === T_CONSTANT_ENCAPSED_STRING && $token[1][0] === "'") {
-				$str .= stripslashes(substr($token[1], 1, -1));
-
-			} elseif ($start !== null && $token === ';') {
-				if ($str !== '') {
-					$res = substr_replace(
-						$res,
-						'echo ' . ($str === "\n" ? '"\n"' : var_export($str, return: true)),
-						$start,
-						strlen($res) - $start,
-					);
-				}
-
-			} elseif ($token[0] !== T_WHITESPACE) {
-				$start = null;
-			}
-
-			$res .= is_array($token) ? $token[1] : $token;
-		}
-
-		return $res;
-	}
-
-
-	/**
-	 * Decodes number string to int or float value.
-	 */
-	public static function decodeNumber(string $str, ?int &$base = null): int|float|null
-	{
-		$str = str_replace('_', '', $str);
-
-		if ($str[0] !== '0' || $str === '0') {
-			$base = 10;
-			return $str + 0;
-		} elseif ($str[1] === 'x' || $str[1] === 'X') {
-			$base = 16;
-			return hexdec($str);
-		} elseif ($str[1] === 'b' || $str[1] === 'B') {
-			$base = 2;
-			return bindec($str);
-		} elseif (strpbrk($str, '89')) {
-			return null;
-		} else {
-			$base = 8;
-			return octdec($str);
-		}
-	}
-
-
-	/**
-	 * Decodes PHP string escape sequences (e.g. \n, \x1B, \u{1F600}).
-	 * Pass $quote to also unescape the given quote character.
-	 */
-	public static function decodeEscapeSequences(string $str, ?string $quote): string
-	{
-		if ($quote !== null) {
-			$str = str_replace('\\' . $quote, $quote, $str);
-		}
-
-		return preg_replace_callback(
-			'~\\\([\\\$nrtfve]|[xX][0-9a-fA-F]{1,2}|[0-7]{1,3}|u\{([0-9a-fA-F]+)\})~',
-			function ($matches) {
-				$ch = $matches[1];
-				$replacements = [
-					'\\' => '\\',
-					'$' => '$',
-					'n' => "\n",
-					'r' => "\r",
-					't' => "\t",
-					'f' => "\f",
-					'v' => "\v",
-					'e' => "\x1B",
-				];
-				if (isset($replacements[$ch])) {
-					return $replacements[$ch];
-				} elseif ($ch[0] === 'x' || $ch[0] === 'X') {
-					return chr((int) hexdec(substr($ch, 1)));
-				} elseif ($ch[0] === 'u') {
-					return self::codePointToUtf8((int) hexdec($matches[2]));
-				} else {
-					$num = (int) octdec($ch);
-					if ($num > 255) {
-						throw new CompileException("Octal escape sequence \\$ch is greater than \\377");
-					}
-					return chr($num);
-				}
-			},
-			$str,
-		);
-	}
-
-
-	private static function codePointToUtf8(int $num): string
-	{
-		return match (true) {
-			$num <= 0x7F => chr($num),
-			$num <= 0x7FF => chr(($num >> 6) + 0xC0) . chr(($num & 0x3F) + 0x80),
-			$num <= 0xFFFF => chr(($num >> 12) + 0xE0) . chr((($num >> 6) & 0x3F) + 0x80) . chr(($num & 0x3F) + 0x80),
-			$num <= 0x1FFFFF => chr(($num >> 18) + 0xF0) . chr((($num >> 12) & 0x3F) + 0x80)
-				. chr((($num >> 6) & 0x3F) + 0x80) . chr(($num & 0x3F) + 0x80),
-			default => throw new CompileException('Invalid UTF-8 codepoint escape sequence: Codepoint too large'),
-		};
-	}
-
-
-	/**
-	 * Validates the generated PHP code using the given PHP binary as a linter.
-	 * Throws CompileException if the code contains syntax errors.
-	 */
-	public static function checkCode(string $phpBinary, string $code, string $name): void
-	{
-		$process = proc_open(
-			[$phpBinary, '-l', '-n'],
-			[['pipe', 'r'], ['pipe', 'w'], ['pipe', 'w']],
-			$pipes,
-			null,
-			null,
-			['bypass_shell' => true],
-		);
-		if (!is_resource($process)) {
-			throw new CompileException('Unable to check that the generated PHP is correct.');
-		}
-
-		fwrite($pipes[0], $code);
-		fclose($pipes[0]);
-		$error = stream_get_contents($pipes[1]);
-		if (!proc_close($process)) {
-			return;
-		}
-		$error = strip_tags(explode("\n", $error)[1]);
-		$position = preg_match('~ on line (\d+)~', $error, $m)
-			? new Position((int) $m[1], 0)
-			: null;
-		$error = preg_replace('~(^Fatal error: | in Standard input code| on line \d+)~', '', $error);
-		throw (new CompileException('Error in generated code: ' . trim($error), $position))
-			->setSource($code, $name);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Position.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Position.php
deleted file mode 100644
index 9fbf18e..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Position.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use function strlen, strrpos, substr_count;
-
-
-/**
- * Source position (line, column, byte offset) within a template.
- * @phpstan-sealed Range
- */
-readonly class Position
-{
-	public function __construct(
-		public int $line = 1,
-		public int $column = 1,
-		public int $offset = 0,
-	) {
-	}
-
-
-	/**
-	 * Returns a new position advanced by the length of the given string.
-	 */
-	public function advance(string $str): self
-	{
-		if ($lines = substr_count($str, "\n")) {
-			return new self(
-				$this->line + $lines,
-				strlen($str) - strrpos($str, "\n"),
-				$this->offset + strlen($str),
-			);
-		} else {
-			return new self(
-				$this->line,
-				$this->column + strlen($str),
-				$this->offset + strlen($str),
-			);
-		}
-	}
-
-
-	public function __toString(): string
-	{
-		return "on line $this->line" . ($this->column ? " at column $this->column" : '');
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/PrintContext.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/PrintContext.php
deleted file mode 100644
index 4091965..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/PrintContext.php
+++ /dev/null
@@ -1,323 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\Compiler\Nodes\Php as Nodes;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\Nodes\Php\OperatorNode;
-use Latte\Compiler\Nodes\Php\Scalar;
-use Latte\ContentType;
-use Latte\Feature;
-use function addcslashes, array_pop, end, implode, preg_replace, preg_replace_callback, strtolower, substr, trim, ucfirst;
-
-
-/**
- * Context for PHP code generation with escaping management.
- */
-final class PrintContext
-{
-	/** @var Nodes\ParameterNode[] */
-	public array $paramsExtraction = [];
-
-	/** @var array<string, Block> */
-	public array $blocks = [];
-	private int $counter = 0;
-
-	/** @var Escaper[] */
-	private array $escaperStack = [];
-
-
-	public function __construct(
-		string $contentType = ContentType::Html,
-		/** @var array<string, bool> */
-		private array $features = [],
-		?Escaper $escaper = null,
-	) {
-		$this->escaperStack[] = $escaper ?? new Escaper($contentType);
-	}
-
-
-	/**
-	 * Expands %node, %dump, %raw, %args, %line, %escape(), %modify(), %modifyContent() in code.
-	 */
-	public function format(string $mask, mixed ...$args): string
-	{
-		$pos = 0; // enumerate arguments except for %escape
-		$mask = preg_replace_callback(
-			'#%([a-z]{3,})#i',
-			function ($m) use (&$pos) {
-				return $m[1] === 'escape'
-					? '%0.escape'
-					: '%' . ($pos++) . '.' . $m[1];
-			},
-			$mask,
-		);
-
-		$mask = preg_replace_callback(
-			'#% (\d+) \. (escape|modify(?:Content)?) ( \( ([^()]*+|(?-2))+ \) )#xi',
-			function ($m) use ($args) {
-				[, $pos, $fn, $var] = $m;
-				$var = substr($var, 1, -1);
-				/** @var Nodes\ModifierNode[] $args */
-				return match ($fn) {
-					'modify' => $args[$pos]->printSimple($this, $var),
-					'modifyContent' => $args[$pos]->printContentAware($this, $var),
-					'escape' => $this->getEscaper()->escape($var),
-				};
-			},
-			$mask,
-		);
-
-		return preg_replace_callback(
-			'#([,+]?\s*)? % (\d+) \. ([a-z]{3,}) (\?)? (\s*\+\s*)? ()#xi',
-			function ($m) use ($args) {
-				[, $left, $pos, $format, $cond, $right] = $m;
-				$arg = $args[$pos];
-
-				$code = match ($format) {
-					'dump' => PhpHelpers::dump($arg),
-					'node' => match (true) {
-						!$arg => '',
-						$arg instanceof OperatorNode && $arg->getOperatorPrecedence() < Expression\AssignNode::Precedence => '(' . $arg->print($this) . ')',
-						default => $arg->print($this),
-					},
-					'raw' => (string) $arg,
-					'args' => $this->implode($arg instanceof Expression\ArrayNode ? $arg->toArguments() : $arg),
-					'line' => $arg?->line ? "/* pos $arg->line" . ($arg->column ? ":$arg->column" : '') . ' */' : '',
-				};
-
-				if ($cond && ($code === '[]' || $code === '' || $code === 'null')) {
-					return $right ? $left : $right;
-				}
-
-				return $code === ''
-					? trim($left) . $right
-					: $left . $code . $right;
-			},
-			$mask,
-		);
-	}
-
-
-	/**
-	 * Saves the current escaping context and returns it. Call restoreEscape() to revert.
-	 */
-	public function beginEscape(): Escaper
-	{
-		return $this->escaperStack[] = $this->getEscaper();
-	}
-
-
-	/**
-	 * Restores the escaping context saved by beginEscape().
-	 */
-	public function restoreEscape(): void
-	{
-		array_pop($this->escaperStack);
-	}
-
-
-	/**
-	 * Returns a clone of the current escaping context.
-	 */
-	public function getEscaper(): Escaper
-	{
-		$escaper = end($this->escaperStack);
-		assert($escaper instanceof Escaper);
-		return clone $escaper;
-	}
-
-
-	public function addBlock(Block $block): void
-	{
-		$block->escaping = $this->getEscaper()->export();
-		$block->method = 'block' . ucfirst(trim(preg_replace('#\W+#', '_', $block->name->print($this)), '_'));
-		$lower = strtolower($block->method);
-		$used = $this->blocks + ['block' => 1];
-		$counter = null;
-		while (isset($used[$lower . $counter])) {
-			$counter++;
-		}
-
-		$block->method .= $counter;
-		$this->blocks[$lower . $counter] = $block;
-	}
-
-
-	/**
-	 * Generates unique ID for temporary variables.
-	 */
-	public function generateId(): int
-	{
-		return $this->counter++;
-	}
-
-
-	public function hasFeature(Feature $feature): bool
-	{
-		return $this->features[$feature->name] ?? false;
-	}
-
-
-	// PHP helpers
-
-
-	/**
-	 * Encodes a string as a PHP string literal using single or double quotes.
-	 */
-	public function encodeString(string $str, string $quote = "'"): string
-	{
-		return $quote === "'"
-			? "'" . addcslashes($str, "'\\") . "'"
-			: '"' . addcslashes($str, "\n\r\t\f\v$\"\\") . '"';
-	}
-
-
-	#[\Deprecated]
-	public function infixOp(Node $node, Node $leftNode, string $operatorString, Node $rightNode): string
-	{
-		return $this->parenthesize($node, $leftNode, OperatorNode::AssocLeft)
-			. $operatorString
-			. $this->parenthesize($node, $rightNode, OperatorNode::AssocRight);
-	}
-
-
-	#[\Deprecated]
-	public function prefixOp(Node $node, string $operatorString, Node $expr): string
-	{
-		return $operatorString . $this->parenthesize($node, $expr, OperatorNode::AssocRight);
-	}
-
-
-	#[\Deprecated]
-	public function postfixOp(Node $node, Node $var, string $operatorString): string
-	{
-		return $this->parenthesize($node, $var, OperatorNode::AssocLeft) . $operatorString;
-	}
-
-
-	/**
-	 * Prints an expression node with the least amount of parentheses necessary to preserve the meaning.
-	 */
-	public function parenthesize(OperatorNode $parentNode, Node $childNode, int $childPosition): string
-	{
-		[$parentPrec, $parentAssoc] = $parentNode->getOperatorPrecedence();
-		[$childPrec] = $childNode instanceof OperatorNode ? $childNode->getOperatorPrecedence() : [null];
-		return $childPrec && ($childPrec < $parentPrec || ($parentPrec === $childPrec && $parentAssoc !== $childPosition))
-			? '(' . $childNode->print($this) . ')'
-			: $childNode->print($this);
-	}
-
-
-	/**
-	 * Prints an array of nodes and implodes the printed values with $glue
-	 * @param  (?Node)[]  $nodes
-	 */
-	public function implode(array $nodes, string $glue = ', '): string
-	{
-		$pNodes = [];
-		foreach ($nodes as $node) {
-			if ($node === null) {
-				$pNodes[] = '';
-			} else {
-				$pNodes[] = $node->print($this);
-			}
-		}
-
-		return implode($glue, $pNodes);
-	}
-
-
-	/**
-	 * Prints a property or method name as a PHP identifier or a dynamic expression in braces.
-	 */
-	public function objectProperty(Node $node): string
-	{
-		return $node instanceof Nodes\NameNode || $node instanceof Nodes\IdentifierNode
-			? (string) $node
-			: '{' . $node->print($this) . '}';
-	}
-
-
-	/**
-	 * Prints a property or method name as a quoted PHP string or a dynamic expression.
-	 */
-	public function memberAsString(Node $node): string
-	{
-		return $node instanceof Nodes\NameNode || $node instanceof Nodes\IdentifierNode
-			? $this->encodeString((string) $node)
-			: $node->print($this);
-	}
-
-
-	/**
-	 * Wraps the LHS of a call in parentheses if needed.
-	 */
-	public function callExpr(Node $expr): string
-	{
-		return $expr instanceof Nodes\NameNode
-			|| $expr instanceof Expression\VariableNode
-			|| $expr instanceof Expression\ArrayAccessNode
-			|| $expr instanceof Expression\FunctionCallNode
-			|| $expr instanceof Expression\MethodCallNode
-			|| $expr instanceof Expression\StaticMethodCallNode
-			|| $expr instanceof Expression\ArrayNode
-			? $expr->print($this)
-			: '(' . $expr->print($this) . ')';
-	}
-
-
-	/**
-	 * Wraps the LHS of a dereferencing operation in parentheses if needed.
-	 */
-	public function dereferenceExpr(Node $expr): string
-	{
-		return $expr instanceof Expression\VariableNode
-			|| $expr instanceof Nodes\NameNode
-			|| $expr instanceof Expression\ArrayAccessNode
-			|| $expr instanceof Expression\PropertyFetchNode
-			|| $expr instanceof Expression\StaticPropertyFetchNode
-			|| $expr instanceof Expression\FunctionCallNode
-			|| $expr instanceof Expression\MethodCallNode
-			|| $expr instanceof Expression\StaticMethodCallNode
-			|| $expr instanceof Expression\ArrayNode
-			|| $expr instanceof Scalar\StringNode
-			|| $expr instanceof Scalar\BooleanNode
-			|| $expr instanceof Scalar\NullNode
-			|| $expr instanceof Expression\ConstantFetchNode
-			|| $expr instanceof Expression\ClassConstantFetchNode
-			? $expr->print($this)
-			: '(' . $expr->print($this) . ')';
-	}
-
-
-	/**
-	 * Converts a list of argument nodes to a PHP array literal string.
-	 * @param  Nodes\ArgumentNode[]  $args
-	 */
-	public function argumentsAsArray(array $args): string
-	{
-		$items = array_map(fn(Nodes\ArgumentNode $arg) => $arg->toArrayItem(), $args);
-		return '[' . $this->implode($items) . ']';
-	}
-
-
-	/**
-	 * Ensures that expression evaluates to string or throws exception.
-	 */
-	public function ensureString(Nodes\ExpressionNode $name, string $entity): string
-	{
-		return $name instanceof Scalar\StringNode
-			? $name->print($this)
-			: $this->format(
-				'(LR\Helpers::stringOrNull($ʟ_tmp = %node) ?? throw new InvalidArgumentException(sprintf(%dump, get_debug_type($ʟ_tmp))))',
-				$name,
-				$entity . ' must be a string, %s given.',
-			);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Range.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Range.php
deleted file mode 100644
index 421dee0..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Range.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-
-/**
- * Source range (starting position plus byte length) within a template.
- */
-final readonly class Range extends Position
-{
-	public static function span(?self $start, ?self $end): ?self
-	{
-		return $start && $end
-			? new self($start->line, $start->column, $start->offset, $end->offset + $end->length - $start->offset)
-			: $start;
-	}
-
-
-	public function __construct(
-		public int $line,
-		public int $column,
-		public int $offset,
-		public int $length,
-	) {
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Tag.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Tag.php
deleted file mode 100644
index cbb4418..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Tag.php
+++ /dev/null
@@ -1,128 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Html\ElementNode;
-use function array_search, in_array;
-
-
-/**
- * Represents a Latte tag or n:attribute during parsing.
- */
-final class Tag
-{
-	public const
-		PrefixInner = 'inner',
-		PrefixTag = 'tag',
-		PrefixNone = '';
-
-	public const
-		OutputNone = 0,
-		OutputKeepIndentation = 1,
-		OutputRemoveIndentation = 2;
-
-	public TagParser $parser;
-	public int $outputMode = self::OutputNone;
-
-
-	/** @param list<Token> $tokens */
-	public function __construct(
-		public readonly string $name,
-		array $tokens,
-		public readonly Range $position,
-		public readonly bool $void = false,
-		public readonly bool $closing = false,
-		public readonly bool $inHead = false,
-		public readonly bool $inTag = false,
-		public readonly ?ElementNode $htmlElement = null,
-		public ?self $parent = null,
-		public readonly ?string $prefix = null,
-		public ?AreaNode $node = null,
-		public ?AreaNode $nAttribute = null,
-	) {
-		$this->parser = new TagParser($tokens);
-	}
-
-
-	public function isInHead(): bool
-	{
-		return $this->inHead && !$this->parent;
-	}
-
-
-	public function isInText(): bool
-	{
-		return !$this->inTag;
-	}
-
-
-	public function isNAttribute(): bool
-	{
-		return $this->prefix !== null;
-	}
-
-
-	/**
-	 * Returns the tag notation, e.g. {tagName} or n:tagName="...".
-	 */
-	public function getNotation(bool $withArgs = false): string
-	{
-		return $this->isNAttribute()
-			? TemplateLexer::NPrefix . ($this->prefix ? $this->prefix . '-' : '')
-				. $this->name
-				. ($withArgs ? '="' . $this->parser->text . '"' : '')
-			: '{'
-				. ($this->closing ? '/' : '')
-				. $this->name
-				. ($withArgs ? $this->parser->text : '')
-			. '}';
-	}
-
-
-	/**
-	 * Finds the nearest ancestor tag whose node is an instance of one of the given classes,
-	 * optionally filtered by a condition. Returns null if none is found.
-	 * @param  class-string[]  $classes
-	 */
-	public function closestTag(array $classes, ?callable $condition = null): ?self
-	{
-		$tag = $this->parent;
-		while ($tag && (
-			!in_array($tag->node ? $tag->node::class : null, $classes, strict: true)
-			|| ($condition && !$condition($tag))
-		)) {
-			$tag = $tag->parent;
-		}
-
-		return $tag;
-	}
-
-
-	/**
-	 * Throws a CompileException if the tag has no arguments.
-	 */
-	public function expectArguments(string $what = 'arguments'): void
-	{
-		if ($this->parser->isEnd()) {
-			throw new CompileException("Missing $what in " . $this->getNotation(), $this->position);
-		}
-	}
-
-
-	/**
-	 * Replaces the current n:attribute node in the parent HTML element with the given node.
-	 */
-	public function replaceNAttribute(AreaNode $node): void
-	{
-		assert($this->htmlElement !== null);
-		$index = array_search($this->nAttribute, $this->htmlElement->attributes->children, strict: true);
-		$this->htmlElement->attributes->children[$index] = $this->nAttribute = $node;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/TagLexer.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/TagLexer.php
deleted file mode 100644
index 2acae7d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/TagLexer.php
+++ /dev/null
@@ -1,399 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\CompileException;
-use function array_splice, constant, count, is_float, is_int, is_numeric, ord, preg_last_error, preg_last_error_msg, preg_match, preg_match_all, str_contains, str_replace, str_split, strlen, strtolower, substr, trim;
-use const PREG_SET_ORDER, PREG_UNMATCHED_AS_NULL;
-
-
-/**
- * Lexer for PHP-like expression language used in tags.
- */
-final class TagLexer
-{
-	private const Keywords = [
-		'and' => Token::Php_LogicalAnd,
-		'array' => Token::Php_Array,
-		'clone' => Token::Php_Clone,
-		'default' => Token::Php_Default,
-		'in' => Token::Php_In,
-		'instanceof' => Token::Php_Instanceof,
-		'new' => Token::Php_New,
-		'or' => Token::Php_LogicalOr,
-		'return' => Token::Php_Return,
-		'xor' => Token::Php_LogicalXor,
-		'null' => Token::Php_Null,
-		'true' => Token::Php_True,
-		'false' => Token::Php_False,
-	];
-
-	private const KeywordsFollowed = [ // must follows ( & =
-		'empty' => Token::Php_Empty,
-		'fn' => Token::Php_Fn,
-		'function' => Token::Php_Function,
-		'isset' => Token::Php_Isset,
-		'list' => Token::Php_List,
-		'match' => Token::Php_Match,
-		'use' => Token::Php_Use,
-	];
-
-	/** @var Token[] */
-	private array $tokens;
-	private string $input;
-	private int $offset;
-	private Position $position;
-
-
-	/** @return Token[] */
-	public function tokenize(string $input, ?Position $position = null): array
-	{
-		$position ??= new Position;
-		$this->tokens = $this->tokenizePartially($input, $position, 0);
-		if ($this->offset !== strlen($input)) {
-			$token = str_replace("\n", '\n', substr($input, $this->offset, 10));
-			throw new CompileException("Unexpected '$token'", $position);
-		}
-
-		$this->tokens[] = new Token(Token::End, '', $position);
-		return $this->tokens;
-	}
-
-
-	/** @return Token[] */
-	public function tokenizePartially(string $input, Position &$position, ?int $ofs = null): array
-	{
-		$this->input = $input;
-		$this->offset = $ofs ?? $position->offset;
-		$this->position = &$position;
-		$this->tokens = [];
-		$this->tokenizeCode();
-		return $this->tokens;
-	}
-
-
-	/** @return Token[]|null */
-	public function tokenizeUnquotedString(string $input, Position $position, bool $colon, int $offsetDelta): ?array
-	{
-		preg_match(
-			$colon
-				? '~ ( [./@_a-z0-9#!-] | :(?!:) | \{\$ [_a-z0-9\[\]()>-]+ } )++  (?=\s+[!"\'$(\[{,\\\|\~\w-] | [,|]  | \s*$) ~xAi'
-				: '~ ( [./@_a-z0-9#!-]          | \{\$ [_a-z0-9\[\]()>-]+ } )++  (?=\s+[!"\'$(\[{,\\\|\~\w-] | [,:|] | \s*$) ~xAi',
-			$input,
-			$match,
-			offset: $position->offset - $offsetDelta,
-		);
-		$position = new Position($position->line, $position->column - 1, $position->offset - 1);
-		return $match && !is_numeric($match[0])
-			? $this->tokenize('"' . $match[0] . '"', $position)
-			: null;
-	}
-
-
-	private function tokenizeCode(): void
-	{
-		$re = <<<'XX'
-			~(?J)(?n)   # allow duplicate named groups, no auto capture
-			(?(DEFINE) (?<label>  [a-zA-Z_\x80-\xff][a-zA-Z0-9_\x80-\xff]*  ) )
-
-			(?<Php_Whitespace>  [ \t\r\n]+  )|
-			( (?<Php_ConstantEncapsedString>  '  )  (?<rest>  ( \\. | [^'\\] )*  '  )?  )|
-			( (?<string>  "  )  .*  )|
-			( (?<Php_StartHeredoc>  <<< [ \t]* (?: (?&label) | ' (?&label) ' | " (?&label) " ) \r?\n  ) .*  )|
-			( (?<Php_Comment>  /\*  )   (?<rest>  .*?\*/  )?  )|
-			(?<Php_Variable>  \$  (?&label)  )|
-			(?<Php_Float>
-				((?&lnum) | (?&dnum)) [eE][+-]? (?&lnum)|
-				(?<dnum>   (?&lnum)? \. (?&lnum) | (?&lnum) \. (?&lnum)?  )
-			)|
-			(?<Php_Integer>
-				0[xX][0-9a-fA-F]+(_[0-9a-fA-F]+)*|
-				0[bB][01]+(_[01]+)*|
-				0[oO][0-7]+(_[0-7]+)*|
-				(?<lnum>  [0-9]+(_[0-9]+)*  )
-			)|
-			(?<Php_NameFullyQualified>  \\ (?&label) ( \\ (?&label) )*  )|
-			(?<Php_NameQualified>  (?&label) ( \\ (?&label) )+  )|
-			(?<Php_IdentifierFollowed>  (?&label)  (?= [ \t\r\n]* [(&=] )  )|
-			(?<Php_Identifier>  (?&label)((--?|\.)[a-zA-Z0-9_\x80-\xff]+)*  )|
-			(
-				(
-					(?<Php_ObjectOperator>  ->  )|
-					(?<Php_NullsafeObjectOperator>  \?->  )|
-					(?<Php_UndefinedsafeObjectOperator>  \?\?->  )
-				)
-				(?<Php_Whitespace>  [ \t\r\n]+  )?
-				(?<Php_Identifier>  (?&label)  )?
-			)|
-			(?<Php_DoubleArrow>  =>  )|
-			(?<Php_PlusEqual>  \+=  )|
-			(?<Php_MinusEqual>  -=  )|
-			(?<Php_MulEqual>  \*=  )|
-			(?<Php_DivEqual>  /=  )|
-			(?<Php_ConcatEqual>  \.=  )|
-			(?<Php_ModEqual>  %=  )|
-			(?<Php_AndEqual>  &=  )|
-			(?<Php_OrEqual>  \|=  )|
-			(?<Php_XorEqual>  \^=  )|
-			(?<Php_SlEqual>  <<=  )|
-			(?<Php_SrEqual>  >>=  )|
-			(?<Php_PowEqual>  \*\*=  )|
-			(?<Php_CoalesceEqual>  \?\?=  )|
-			(?<Php_Coalesce>  \?\?  )|
-			(?<Php_NullsafePipe>  \?\|  )|
-			(?<Php_BooleanOr>  \|\|  )|
-			(?<Php_BooleanAnd>  &&  )|
-			(?<Php_Pipe>  \|>  )|
-			(?<Php_FilterPipe>  \| (?= [ \t]* [a-z] )  )|
-			(?<Php_AmpersandFollowed>  & (?= [ \t\r\n]* (\$|\.\.\.) )  )|
-			(?<Php_AmpersandNotFollowed>  &  )|
-			(?<Php_IsIdentical>  ===  )|
-			(?<Php_IsNotIdentical>  !==  )|
-			(?<Php_IsEqual>  ==  )|
-			(?<Php_IsNotEqual>  !=  |  <>  )|
-			(?<Php_Spaceship>  <=>  )|
-			(?<Php_IsSmallerOrEqual>  <=  )|
-			(?<Php_IsGreaterOrEqual>  >=  )|
-			(?<Php_Sl>  <<  )|
-			(?<Php_Sr>  >>  )|
-			(?<Php_Inc>  \+\+  )|
-			(?<Php_Dec>  --  )|
-			(?<Php_Pow>  \*\*  )|
-			(?<Php_PaamayimNekudotayim>  ::  )|
-			(?<Php_NsSeparator>  \\  )|
-			(?<Php_Ellipsis>  \.\.\.  )|
-			(?<Php_IntCast>  \( [ \t]* int [ \t]* \)  )|
-			(?<Php_FloatCast>  \( [ \t]* float [ \t]* \)  )|
-			(?<Php_StringCast>  \( [ \t]* string [ \t]* \)  )|
-			(?<Php_ArrayCast>  \( [ \t]* array [ \t]* \)  )|
-			(?<Php_ObjectCast>  \( [ \t]* object [ \t]* \)  )|
-			(?<Php_BoolCast>  \( [ \t]* bool [ \t]* \)  )|
-			(?<Php_ExpandCast>  \( [ \t]* expand [ \t]* \)  )|
-			( (?<end>  /?}  ) .* )|
-			(?<char>  [;:,.|^&+/*=%!\~$<>?@#(){[\]-]  )|
-			(?<badchar>  .  )
-			~xsA
-			XX;
-
-		$depth = 0;
-		matchRE:
-		preg_match_all($re, $this->input, $matches, PREG_SET_ORDER | PREG_UNMATCHED_AS_NULL, $this->offset);
-		if (preg_last_error()) {
-			throw new CompileException(preg_last_error_msg());
-		}
-
-		foreach ($matches as $m) {
-			if (isset($m['char'])) {
-				if ($m['char'] === '{') {
-					$depth++;
-				}
-				$this->addToken(null, $m['char']);
-
-			} elseif (isset($m['end'])) {
-				$depth--;
-				if ($depth < 0) {
-					return;
-				}
-				foreach (str_split($m['end']) as $ch) {
-					$this->addToken(null, $ch);
-				}
-
-				goto matchRE;
-
-			} elseif (isset($m[$type = 'Php_ObjectOperator'])
-				|| isset($m[$type = 'Php_NullsafeObjectOperator'])
-				|| isset($m[$type = 'Php_UndefinedsafeObjectOperator'])
-			) {
-				$this->addToken(constant(Token::class . '::' . $type), $m[$type] ?? '');
-				if (isset($m['Php_Whitespace'])) {
-					$this->addToken(Token::Php_Whitespace, $m['Php_Whitespace']);
-				}
-				if (isset($m['Php_Identifier'])) {
-					$this->addToken(Token::Php_Identifier, $m['Php_Identifier']);
-				}
-
-			} elseif (isset($m['Php_Identifier'])) {
-				$lower = strtolower($m['Php_Identifier']);
-				$this->addToken(
-					self::Keywords[$lower] ?? (preg_match('~[A-Z_][A-Z0-9_]{2,}$~DA', $m['Php_Identifier']) ? Token::Php_Constant : Token::Php_Identifier),
-					$m['Php_Identifier'],
-				);
-
-			} elseif (isset($m['Php_IdentifierFollowed'])) {
-				$lower = strtolower($m['Php_IdentifierFollowed']);
-				$this->addToken(self::KeywordsFollowed[$lower] ?? self::Keywords[$lower] ?? Token::Php_Identifier, $m['Php_IdentifierFollowed']);
-
-			} elseif (isset($m['Php_ConstantEncapsedString'])) {
-				isset($m['rest'])
-					? $this->addToken(Token::Php_ConstantEncapsedString, "'" . $m['rest'])
-					: throw new CompileException('Unterminated string.', $this->position);
-
-			} elseif (isset($m['string'])) {
-				$pos = $this->position;
-				$this->addToken(null, '"');
-				$count = count($this->tokens);
-				$this->tokenizeString('"');
-				$token = $this->tokens[$count] ?? null;
-				$this->addToken(null, '"');
-				if (
-					count($this->tokens) <= $count + 2
-					&& (!$token || $token->type === Token::Php_EncapsedAndWhitespace)
-				) {
-					array_splice($this->tokens, $count - 1, null, [new Token(Token::Php_ConstantEncapsedString, '"' . $token?->text . '"', $pos)]);
-				}
-				goto matchRE;
-
-			} elseif (isset($m['Php_Integer'])) {
-				$num = PhpHelpers::decodeNumber($m['Php_Integer']);
-				$this->addToken(is_float($num) ? Token::Php_Float : Token::Php_Integer, $m['Php_Integer']);
-
-			} elseif (isset($m['Php_StartHeredoc'])) {
-				$this->addToken(Token::Php_StartHeredoc, $m['Php_StartHeredoc']);
-				$endRe = '(?<=\n)[ \t]*' . trim($m['Php_StartHeredoc'], "< \t\r\n'\"") . '\b';
-				if (str_contains($m['Php_StartHeredoc'], "'")) { // nowdoc
-					if (!preg_match('~(.*?)(' . $endRe . ')~sA', $this->input, $m, 0, $this->offset)) {
-						throw new CompileException('Unterminated NOWDOC.', $this->position);
-					} elseif ($m[1] !== '') {
-						$this->addToken(Token::Php_EncapsedAndWhitespace, $m[1]);
-					}
-					$this->addToken(Token::Php_EndHeredoc, $m[2]);
-				} else {
-					$end = $this->tokenizeString($endRe);
-					$this->addToken(Token::Php_EndHeredoc, $end);
-				}
-				goto matchRE;
-
-			} elseif (isset($m['Php_Comment'])) {
-				isset($m['rest'])
-					? $this->addToken(Token::Php_Comment, '/*' . $m['rest'])
-					: throw new CompileException('Unterminated comment.', $this->position);
-
-			} elseif (isset($m['badchar'])) {
-				throw new CompileException("Unexpected '$m[badchar]'", $this->position);
-
-			} else {
-				foreach ($m as $type => $text) {
-					if ($text !== null && !is_int($type)) {
-						$this->addToken(constant(Token::class . '::' . $type), $text);
-						break;
-					}
-				}
-			}
-		}
-	}
-
-
-	private function tokenizeString(string $endRe): string
-	{
-		$re = <<<'XX'
-			~(?J)(?n)   # allow duplicate named groups, no auto capture
-			(?(DEFINE) (?<label>  [a-zA-Z_\x80-\xff][a-zA-Z0-9_\x80-\xff]*  ) )
-
-			( (?<Php_CurlyOpen>  \{\$  )  .*  )|
-			(?<Php_DollarOpenCurlyBraces>  \$\{  )|
-			( (?<Php_Variable>  \$  (?&label)  )
-				(
-					(
-						(?<Php_ObjectOperator>  ->  )|
-						(?<Php_NullsafeObjectOperator>  \?->  )|
-						(?<Php_UndefinedsafeObjectOperator>  \?\?->  )
-					)
-					(?<Php_Identifier>  (?&label)  )
-					|
-					(?<offset>  \[  )
-					(
-						(?<offsetVar>  \$  (?&label)  )|
-						(?<offsetString>  (?&label)  )|
-						(?<offsetMinus>  -  )?
-						(?<Php_NumString>
-							0[xX][0-9a-fA-F]+(_[0-9a-fA-F]+)*|
-							0[bB][01]+(_[01]+)*|
-							0[oO][0-7]+(_[0-7]+)*|
-							[0-9]+(_[0-9]+)*
-						)
-					)?
-					(?<offsetEnd>  ]  )?
-					|
-				)
-			)|
-			XX . "
-			((?<end>  $endRe  )  .*  )|
-			(?<char>  ( \\\\. | [^\\\\] )  )
-			~xsA";
-
-		matchRE:
-		preg_match_all($re, $this->input, $matches, PREG_SET_ORDER | PREG_UNMATCHED_AS_NULL, $this->offset);
-		if (preg_last_error()) {
-			throw new CompileException(preg_last_error_msg());
-		}
-
-		$buffer = '';
-		foreach ($matches as $m) {
-			if (isset($m['char'])) {
-				$buffer .= $m['char'];
-				continue;
-			} elseif ($buffer !== '') {
-				$this->addToken(Token::Php_EncapsedAndWhitespace, $buffer);
-				$buffer = '';
-			}
-
-			if (isset($m['Php_CurlyOpen'])) {
-				$this->addToken(Token::Php_CurlyOpen, '{');
-				$this->tokenizeCode();
-				if (($this->input[$this->offset] ?? null) === '}') {
-					$this->addToken(null, '}');
-				}
-				goto matchRE;
-
-			} elseif (isset($m['Php_DollarOpenCurlyBraces'])) {
-				throw new CompileException('Syntax ${...} is not supported.', $this->position);
-
-			} elseif (isset($m['Php_Variable'])) {
-				$this->addToken(Token::Php_Variable, $m['Php_Variable']);
-				if (isset($m[$type = 'Php_ObjectOperator'])
-					|| isset($m[$type = 'Php_NullsafeObjectOperator'])
-					|| isset($m[$type = 'Php_UndefinedsafeObjectOperator'])
-				) {
-					$this->addToken(constant(Token::class . '::' . $type), $m[$type] ?? '');
-					$this->addToken(Token::Php_Identifier, $m['Php_Identifier'] ?? '');
-
-				} elseif (isset($m['offset'])) {
-					$this->addToken(null, '[');
-					if (!isset($m['offsetEnd'])) {
-						throw new CompileException("Missing ']'", $this->position);
-					} elseif (isset($m['offsetVar'])) {
-						$this->addToken(Token::Php_Variable, $m['offsetVar']);
-					} elseif (isset($m['offsetString'])) {
-						$this->addToken(Token::Php_Identifier, $m['offsetString']);
-					} elseif (isset($m['Php_NumString'])) {
-						if (isset($m['offsetMinus'])) {
-							$this->addToken(null, '-');
-						}
-						$this->addToken(Token::Php_NumString, $m['Php_NumString']);
-					} else {
-						throw new CompileException("Unexpected '" . substr($this->input, $this->offset - 1, 5) . "'", $this->position);
-					}
-					$this->addToken(null, ']');
-				}
-
-			} elseif (isset($m['end'])) {
-				return $m['end'];
-			}
-		}
-
-		throw new CompileException('Unterminated string.', $this->position->advance($buffer));
-	}
-
-
-	private function addToken(?int $type, string $text): void
-	{
-		$this->tokens[] = new Token($type ?? ord($text), $text, $this->position);
-		$this->position = $this->position->advance($text);
-		$this->offset += strlen($text);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/TagParser.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/TagParser.php
deleted file mode 100644
index 8e7b2c2..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/TagParser.php
+++ /dev/null
@@ -1,492 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte;
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php as Node;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\NameNode;
-use Latte\Compiler\Nodes\Php\Scalar;
-use function count, is_int, ord, preg_match, preg_replace, preg_replace_callback, str_contains, strlen, strtolower, substr;
-
-
-/**
- * Parser for PHP-like expression language used in tags.
- * Based on works by Nikita Popov, Moriyoshi Koizumi and Masato Bito.
- */
-final class TagParser
-{
-	use TagParserData;
-
-	private const
-		SchemaExpression = 'e',
-		SchemaArguments = 'a',
-		SchemaFilters = 'm',
-		SchemaForeach = 'f';
-
-	private const SymbolNone = -1;
-
-	public readonly TokenStream $stream;
-	public string $text;
-
-	/** @var \SplObjectStorage<Expression\ArrayNode, null> */
-	protected \SplObjectStorage $shortArrays;
-	private readonly int $offsetDelta;
-
-
-	/** @param array<int, mixed>  $tokens */
-	public function __construct(array $tokens)
-	{
-		$this->offsetDelta = $tokens[0]->position->offset;
-		$tokens = $this->filterTokens($tokens);
-		$this->stream = new TokenStream(new \ArrayIterator($tokens));
-	}
-
-
-	/**
-	 * Parses PHP-like expression.
-	 */
-	public function parseExpression(): ExpressionNode
-	{
-		return $this->parse(self::SchemaExpression, recovery: true);
-	}
-
-
-	/**
-	 * Parses optional list of arguments. Named and variadic arguments are also supported.
-	 */
-	public function parseArguments(): Expression\ArrayNode
-	{
-		return $this->parse(self::SchemaArguments, recovery: true);
-	}
-
-
-	/**
-	 * Parses optional list of filters.
-	 */
-	public function parseModifier(): Node\ModifierNode
-	{
-		return $this->isEnd()
-			? new Node\ModifierNode([])
-			: $this->parse(self::SchemaFilters);
-	}
-
-
-	/**
-	 * Parses unquoted string or PHP-like expression.
-	 */
-	public function parseUnquotedStringOrExpression(bool $colon = true): ExpressionNode
-	{
-		$position = $this->stream->peek()->position;
-		$lexer = new TagLexer;
-		$tokens = $lexer->tokenizeUnquotedString($this->text, $position, $colon, $this->offsetDelta);
-
-		if (!$tokens) {
-			return $this->parseExpression();
-		}
-
-		$parser = new self($tokens);
-		$end = $position->offset + strlen($parser->text) - 2; // 2 quotes
-		do {
-			$this->stream->consume();
-		} while ($this->stream->peek()->position->offset < $end);
-
-		return $parser->parseExpression();
-	}
-
-
-	/**
-	 * Parses optional type declaration.
-	 */
-	public function parseType(): ?Node\SuperiorTypeNode
-	{
-		$kind = [
-			Token::Php_Identifier, Token::Php_Constant, Token::Php_Ellipsis, Token::Php_Array, Token::Php_Integer,
-			Token::Php_NameFullyQualified, Token::Php_NameQualified, Token::Php_Null, Token::Php_False, Token::Php_FilterPipe,
-			'(', ')', '<', '>', '[', ']', '|', '&', '{', '}', ':', ',', '=', '?',
-			Token::Php_Sr, // >> in nested generics like array<int, array<string, mixed>>
-		];
-		$res = null;
-		while ($token = $this->stream->tryConsume(...$kind)) {
-			$res .= $token->text;
-		}
-
-		return $res ? new Node\SuperiorTypeNode($res) : null;
-	}
-
-
-	/**
-	 * Parses variables used in foreach.
-	 * @return array{?Nodes\Php\ExpressionNode, Nodes\Php\ExpressionNode|Nodes\Php\ListNode, bool}
-	 * @internal
-	 */
-	public function parseForeach(): array
-	{
-		return $this->parse(self::SchemaForeach);
-	}
-
-
-	/**
-	 * Consumes optional token followed by whitespace. Suitable before parseUnquotedStringOrExpression().
-	 */
-	public function tryConsumeTokenBeforeUnquotedString(string ...$kind): ?Token
-	{
-		$token = $this->stream->peek();
-		return $token->is(...$kind) // is followed by whitespace
-			&& $this->stream->peek(1)->position->offset > $token->position->offset + $token->position->length
-			? $this->stream->consume()
-			: null;
-	}
-
-
-	#[\Deprecated('use tryConsumeTokenBeforeUnquotedString()')]
-	public function tryConsumeModifier(string ...$kind): ?Token
-	{
-		trigger_error(__METHOD__ . '() was renamed to tryConsumeTokenBeforeUnquotedString()', E_USER_DEPRECATED);
-		return $this->tryConsumeTokenBeforeUnquotedString(...$kind);
-	}
-
-
-	public function isEnd(): bool
-	{
-		return $this->stream->peek()->isEnd();
-	}
-
-
-	/** @throws Latte\CompileException */
-	private function parse(string $schema, bool $recovery = false): mixed
-	{
-		$symbol = self::SymbolNone; // We start off with no lookahead-token
-		$this->startTokenStack = []; // Keep stack of start token
-		$this->endTokenStack = []; // Keep stack of end token
-		$token = null;
-		$state = 0; // Start off in the initial state and keep a stack of previous states
-		$stateStack = [$state];
-		$this->semStack = []; // Semantic value stack (contains values of tokens and semantic action results)
-		$stackPos = 0; // Current position in the stack(s)
-		$this->shortArrays = new \SplObjectStorage;
-
-		do {
-			if (self::ActionBase[$state] === 0) {
-				$rule = self::ActionDefault[$state];
-			} else {
-				if ($symbol === self::SymbolNone) {
-					$recovery = $recovery
-						? [$this->stream->getIndex(), $state, $stateStack, $stackPos, $this->semValue, $this->semStack, $this->startTokenStack, $this->endTokenStack]
-						: null;
-
-
-					$token = $token
-						? $this->stream->consume()
-						: new Token(ord($schema), $schema);
-
-					recovery:
-					$symbol = self::TokenToSymbol[$token->type];
-				}
-
-				$idx = self::ActionBase[$state] + $symbol;
-				if ((($idx >= 0 && $idx < count(self::Action) && self::ActionCheck[$idx] === $symbol)
-					|| ($state < self::Yy2Tblstate
-						&& ($idx = self::ActionBase[$state + self::NumNonLeafStates] + $symbol) >= 0
-						&& $idx < count(self::Action) && self::ActionCheck[$idx] === $symbol))
-					&& ($action = self::Action[$idx]) !== self::DefaultAction
-				) {
-					/*
-					>= numNonLeafStates: shift and reduce
-					> 0: shift
-					= 0: accept
-					< 0: reduce
-					= -YYUNEXPECTED: error
-					*/
-					if ($action > 0) { // shift
-						++$stackPos;
-						$stateStack[$stackPos] = $state = $action;
-						$this->semStack[$stackPos] = $token->text;
-						$this->startTokenStack[$stackPos] = $token;
-						$this->endTokenStack[$stackPos] = $token;
-						$symbol = self::SymbolNone;
-						if ($action < self::NumNonLeafStates) {
-							continue;
-						}
-
-						$rule = $action - self::NumNonLeafStates; // shift-and-reduce
-					} else {
-						$rule = -$action;
-					}
-				} else {
-					$rule = self::ActionDefault[$state];
-				}
-			}
-
-			do {
-				if ($rule === 0) { // accept
-					$this->finalizeShortArrays();
-					return $this->semValue;
-
-				} elseif ($rule !== self::UnexpectedTokenRule) { // reduce
-					$lastEndToken = $this->endTokenStack[$stackPos] ?? $token;
-					$this->reduce($rule, $stackPos);
-
-					// Goto - shift nonterminal
-					$ruleLength = self::RuleToLength[$rule];
-					$stackPos -= $ruleLength;
-					$nonTerminal = self::RuleToNonTerminal[$rule];
-					$idx = self::GotoBase[$nonTerminal] + $stateStack[$stackPos];
-					if ($idx >= 0 && $idx < count(self::Goto) && self::GotoCheck[$idx] === $nonTerminal) {
-						$state = self::Goto[$idx];
-					} else {
-						$state = self::GotoDefault[$nonTerminal];
-					}
-
-					++$stackPos;
-					$stateStack[$stackPos] = $state;
-					$this->semStack[$stackPos] = $this->semValue;
-					$this->endTokenStack[$stackPos] = $lastEndToken;
-					if ($ruleLength === 0) {
-						$this->startTokenStack[$stackPos] = $token;
-					}
-
-				} elseif ($recovery && $this->isExpectedEof($state)) { // recoverable error
-					[, $state, $stateStack, $stackPos, $this->semValue, $this->semStack, $this->startTokenStack, $this->endTokenStack] = $recovery;
-					$this->stream->seek($recovery[0]);
-					$token = new Token(Token::End, '');
-					goto recovery;
-
-				} else { // error
-					throw new Latte\CompileException('Unexpected ' . ($token->text ? "'$token->text'" : 'end'), $token->position);
-				}
-
-				if ($state < self::NumNonLeafStates) {
-					break;
-				}
-
-				$rule = $state - self::NumNonLeafStates; // shift-and-reduce
-			} while (true);
-		} while (true);
-	}
-
-
-	/**
-	 * Can EOF be the next token?
-	 */
-	private function isExpectedEof(int $state): bool
-	{
-		foreach (self::SymbolToName as $symbol => $name) {
-			$idx = self::ActionBase[$state] + $symbol;
-			if (($idx >= 0 && $idx < count(self::Action) && self::ActionCheck[$idx] === $symbol
-					|| $state < self::Yy2Tblstate
-					&& ($idx = self::ActionBase[$state + self::NumNonLeafStates] + $symbol) >= 0
-					&& $idx < count(self::Action) && self::ActionCheck[$idx] === $symbol)
-				&& self::Action[$idx] !== self::UnexpectedTokenRule
-				&& self::Action[$idx] !== self::DefaultAction
-				&& $symbol === 0
-			) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-
-	private function createRange(int $startPos, int $endPos): ?Position
-	{
-		return Range::span(
-			$this->startTokenStack[$startPos]->position,
-			$this->endTokenStack[$endPos]->position,
-		);
-	}
-
-
-	public function throwReservedKeywordException(Token $token): never
-	{
-		throw new Latte\CompileException("Keyword '$token->text' cannot be used in Latte.", $token->position);
-	}
-
-
-	private function checkFunctionName(Expression\FunctionCallNode $func): Expression\FunctionCallNode
-	{
-		if ($func->name instanceof NameNode && $func->name->isKeyword()) {
-			$this->throwReservedKeywordException(new Token(0, (string) $func->name, $func->name->position));
-		}
-		return $func;
-	}
-
-
-	private static function handleBuiltinTypes(NameNode $name): NameNode|Node\IdentifierNode
-	{
-		$builtinTypes = [
-			'bool' => true, 'int' => true, 'float' => true, 'string' => true, 'iterable' => true, 'void' => true,
-			'object' => true, 'null' => true, 'false' => true, 'mixed' => true, 'never' => true,
-		];
-
-		$lowerName = strtolower($name->toCodeString());
-		return isset($builtinTypes[$lowerName])
-			? new Node\IdentifierNode($lowerName, $name->position)
-			: $name;
-	}
-
-
-	private static function parseOffset(string $str, Position $position): Scalar\StringNode|Scalar\IntegerNode
-	{
-		if (!preg_match('/^(?:0|-?[1-9][0-9]*)$/', $str)) {
-			return new Scalar\StringNode($str, $position);
-		}
-
-		$num = +$str;
-		if (!is_int($num)) {
-			return new Scalar\StringNode($str, $position);
-		}
-
-		return new Scalar\IntegerNode($num, Scalar\IntegerNode::KindDecimal, $position);
-	}
-
-
-	/** @param ExpressionNode[]  $parts */
-	private function parseDocString(
-		string $startToken,
-		array $parts,
-		string $endToken,
-		Position $startPos,
-		Position $endPos,
-	): Scalar\StringNode|Scalar\InterpolatedStringNode
-	{
-		$hereDoc = !str_contains($startToken, "'");
-		preg_match('/\A[ \t]*/', $endToken, $matches);
-		$indentation = $matches[0];
-		if (str_contains($indentation, ' ') && str_contains($indentation, "\t")) {
-			throw new CompileException('Invalid indentation - tabs and spaces cannot be mixed', $endPos);
-
-		} elseif (!$parts) {
-			return new Scalar\StringNode('', $startPos);
-
-		} elseif (!$parts[0] instanceof Node\InterpolatedStringPartNode) {
-			// If there is no leading encapsed string part, pretend there is an empty one
-			$this->stripIndentation('', $indentation, true, false, $parts[0]->position);
-		}
-
-		$newParts = [];
-		foreach ($parts as $i => $part) {
-			if ($part instanceof Node\InterpolatedStringPartNode) {
-				$isLast = $i === count($parts) - 1;
-				$part->value = $this->stripIndentation(
-					$part->value,
-					$indentation,
-					$i === 0,
-					$isLast,
-					$part->position,
-				);
-				if ($isLast) {
-					$part->value = preg_replace('~(\r\n|\n|\r)\z~', '', $part->value);
-				}
-				if ($hereDoc) {
-					$part->value = PhpHelpers::decodeEscapeSequences($part->value, null);
-				}
-				if ($i === 0 && $isLast) {
-					return new Scalar\StringNode($part->value, $startPos);
-				}
-				if ($part->value === '') {
-					continue;
-				}
-			}
-			$newParts[] = $part;
-		}
-
-		return new Scalar\InterpolatedStringNode($newParts, $startPos);
-	}
-
-
-	private function stripIndentation(
-		string $str,
-		string $indentation,
-		bool $atStart,
-		bool $atEnd,
-		Position $position,
-	): string
-	{
-		if ($indentation === '') {
-			return $str;
-		}
-		$start = $atStart ? '(?:(?<=\n)|\A)' : '(?<=\n)';
-		$end = $atEnd ? '(?:(?=[\r\n])|\z)' : '(?=[\r\n])';
-		$regex = '/' . $start . '([ \t]*)(' . $end . ')?/D';
-		return preg_replace_callback(
-			$regex,
-			function ($matches) use ($indentation, $position) {
-				$indentLen = strlen($indentation);
-				$prefix = substr($matches[1], 0, $indentLen);
-				if (str_contains($prefix, $indentation[0] === ' ' ? "\t" : ' ')) {
-					throw new CompileException('Invalid indentation - tabs and spaces cannot be mixed', $position);
-				} elseif (strlen($prefix) < $indentLen && !isset($matches[2])) {
-					throw new CompileException(
-						'Invalid body indentation level ' .
-						'(expecting an indentation level of at least ' . $indentLen . ')',
-						$position,
-					);
-				}
-				return substr($matches[0], strlen($prefix));
-			},
-			$str,
-		);
-	}
-
-
-	public function convertArrayToList(Expression\ArrayNode $array): Node\ListNode
-	{
-		unset($this->shortArrays[$array]);
-		$items = [];
-		foreach ($array->items as $item) {
-			$value = $item->value;
-			if ($item->unpack) {
-				throw new CompileException('Spread operator is not supported in assignments.', $value->position);
-			}
-			$value = match (true) {
-				$value instanceof Expression\TemporaryNode => $value->value,
-				$value instanceof Expression\ArrayNode && isset($this->shortArrays[$value]) => $this->convertArrayToList($value),
-				default => $value,
-			};
-			$items[] = $value
-				? new Node\ListItemNode($value, $item->key, $item->byRef, $item->position)
-				: null;
-		}
-		return new Node\ListNode($items, $array->position);
-	}
-
-
-	private function finalizeShortArrays(): void
-	{
-		foreach ($this->shortArrays as $node) {
-			foreach ($node->items as $item) {
-				if ($item->value instanceof Expression\TemporaryNode) {
-					throw new CompileException('Cannot use empty array elements or list() in arrays.', $item->position);
-				}
-			}
-		}
-	}
-
-
-	/**
-	 * @param  Token[]  $tokens
-	 * @return Token[]
-	 */
-	private function filterTokens(array $tokens): array
-	{
-		$this->text = '';
-		$res = [];
-		foreach ($tokens as $token) {
-			$this->text .= $token->text;
-			if (!$token->is(Token::Php_Whitespace, Token::Php_Comment)) {
-				$res[] = $token;
-			}
-		}
-
-		return $res;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/TagParserData.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/TagParserData.php
deleted file mode 100644
index f215175..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/TagParserData.php
+++ /dev/null
@@ -1,629 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\Compiler\Nodes\Php as Node;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\Nodes\Php\Scalar;
-use function array_pop, count, is_string, substr;
-
-
-/** @internal generated part of TagParser */
-trait TagParserData
-{
-	/** Symbol number of error recovery token */
-	protected const ErrorSymbol = 1;
-
-	/** Action number signifying default action */
-	protected const DefaultAction = -8190;
-
-	/** Rule number signifying that an unexpected token was encountered */
-	protected const UnexpectedTokenRule = 8191;
-
-	protected const Yy2Tblstate = 266;
-
-	/** Number of non-leaf states */
-	protected const NumNonLeafStates = 367;
-
-	/** Map of lexer tokens to internal symbols */
-	protected const TokenToSymbol = [
-		0,     116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,
-		116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   51,    111,   116,   112,   50,    116,   116,
-		105,   106,   48,    46,    2,     47,    42,    49,    116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   22,    109,
-		37,    7,     39,    21,    62,    116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,
-		116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   64,    116,   110,   29,    116,   116,   103,   116,   116,
-		116,   101,   104,   116,   116,   116,   116,   116,   116,   102,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,
-		116,   116,   116,   107,   26,    108,   53,    116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,
-		116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,
-		116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,
-		116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,
-		116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,
-		116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,
-		116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   116,   1,     3,     4,     5,
-		6,     8,     9,     10,    11,    12,    13,    14,    15,    16,    17,    18,    19,    20,    23,    24,    25,    27,    28,    30,
-		31,    32,    33,    34,    35,    36,    38,    40,    41,    43,    44,    45,    52,    54,    55,    56,    57,    58,    59,    60,
-		61,    63,    65,    66,    67,    68,    69,    70,    71,    72,    73,    74,    75,    76,    77,    78,    79,    80,    81,    82,
-		83,    84,    85,    86,    87,    88,    89,    90,    91,    92,    93,    113,   94,    95,    96,    97,    114,   115,   98,    99,
-		100,
-	];
-
-	/** Map of states to a displacement into the self::Action table. The corresponding action for this
-	 *  state/symbol pair is self::Action[self::ActionBase[$state] + $symbol]. If self::ActionBase[$state] is 0, the
-	 *  action is defaulted, i.e. self::ActionDefault[$state] should be used instead. */
-	protected const ActionBase = [
-		452,   283,   119,   283,   162,   283,   283,   201,   283,   244,   283,   327,   327,   327,   327,   -30,   -30,   -30,   -30,   -12,
-		-12,   49,    232,   364,   312,   364,   312,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,
-		364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,
-		364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,
-		364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,   364,
-		364,   364,   364,   364,   364,   364,   364,   455,   56,    308,   323,   468,   471,   470,   472,   485,   486,   484,   487,   492,
-		68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    282,   272,   352,   143,   143,   143,
-		143,   143,   143,   143,   143,   143,   143,   143,   143,   143,   143,   143,   143,   143,   143,   298,   298,   298,   313,   482,
-		476,   469,   125,   152,   152,   435,   435,   435,   435,   435,   192,   366,   366,   -35,   -35,   -35,   -35,   186,   186,   311,
-		311,   311,   311,   311,   311,   311,   311,   311,   149,   302,   -10,   -10,   194,   208,   147,   147,   147,   147,   27,    27,
-		27,    27,    27,    27,    27,    65,    174,   174,   174,   391,   424,   427,   440,   340,   -57,   -57,   -57,   -57,   -57,   -57,
-		360,   493,   -8,    304,   304,   450,   338,   338,   126,   304,   362,   113,   139,   454,   463,   466,   234,   159,   62,    465,
-		336,   345,   355,   18,    18,    467,   17,    382,   448,   448,   354,   382,   382,   382,   354,   -56,   -56,   -56,   -42,   -19,
-		54,    301,   473,   301,   301,   301,   285,   -47,   418,   418,   158,   426,   426,   161,   228,   167,   418,   418,   418,   418,
-		167,   255,   167,   167,   344,   330,   369,   269,   172,   369,   343,   343,   258,   130,   436,   432,   437,   423,   417,   475,
-		326,   332,   358,   348,   416,   329,   436,   432,   437,   351,   22,    410,   411,   357,   357,   357,   357,   357,   357,   357,
-		357,   357,   357,   326,   449,   150,   359,   439,   441,   95,    365,   456,   457,   458,   478,   350,   479,   357,   459,   384,
-		328,   489,   414,   121,   326,   490,   460,   474,   356,   371,   451,   353,   491,   461,   462,   373,   480,   284,   453,   287,
-		481,   299,   477,   334,   464,   488,   483,   0,     -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,
-		-30,   -30,   0,     0,     0,     0,     -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,
-		-30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,
-		-30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,
-		-30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,
-		-30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   -30,   68,    68,    68,    68,    68,    68,
-		68,    68,    68,    68,    68,    68,    68,    0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,
-		0,     68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,    68,
-		68,    68,    68,    68,    68,    68,    68,    68,    68,    0,     68,    68,    68,    68,    68,    68,    68,    366,   0,     0,
-		174,   174,   174,   174,   331,   331,   331,   331,   331,   331,   331,   331,   331,   331,   331,   174,   174,   331,   331,   331,
-		331,   331,   331,   331,   331,   331,   331,   331,   331,   331,   331,   331,   0,     0,     0,     0,     0,     0,     0,     0,
-		362,   343,   343,   343,   343,   343,   343,   362,   362,   0,     0,     0,     0,     174,   174,   0,     0,     0,     362,   343,
-		0,     0,     0,     0,     0,     0,     382,   382,   382,   362,   426,   426,   354,   0,     0,     343,   343,   0,     0,     0,
-		0,     0,     0,     0,     0,     0,     0,     0,     357,   150,   357,   357,   357,
-	];
-
-	/** Table of actions. Indexed according to self::ActionBase comment. */
-	protected const Action = [
-		373,   372,   -8191, -8191, -8191, -8191, 68,    69,    70,    71,    72,    198,   392,   392,   393,   393,   31,    32,    -8190, -8190,
-		11,    33,    -50,   34,    179,   180,   35,    36,    37,    38,    39,    40,    41,    29,    1,     194,   24,    588,   589,   209,
-		12,    570,   394,   199,   200,   586,   294,   201,   251,   252,   97,    -202,  295,   296,   -47,   299,   -238,  297,   298,   213,
-		178,   553,   -288,  -202,  -288,  287,   572,   571,   594,   592,   593,   49,    50,    51,    -201,  25,    -238,  -238,  -238,  -8190,
-		-8190, 230,   299,   171,   172,   -238,  -201,  -22,   431,   22,    430,   52,    53,    54,    55,    -48,   -52,   56,    57,    58,
-		59,    60,    61,    62,    63,    64,    65,    66,    67,    68,    69,    70,    71,    72,    73,    74,    75,    76,    77,    334,
-		197,   -47,   375,   376,   374,   431,   -88,   430,   -88,   -242,  0,     78,    15,    79,    80,    81,    82,    83,    84,    85,
-		86,    87,    88,    89,    90,    91,    -8190, -8190, -8190, -242,  -242,  -242,  8,     -88,   -88,   -8190, -8190, -8190, -201,  -286,
-		10,    -286,  212,   13,    385,   375,   376,   374,   -288,  14,    -201,  379,   -288,  -8190, 20,    -8190, -8190, -8190, -8190, 497,
-		499,   -8190, -8190, -8190, 195,   26,    351,   -8190, 205,   -235,  305,   69,    70,    71,    72,    306,   381,   240,   241,   380,
-		386,   307,   308,   597,   375,   376,   374,   385,   673,   -235,  -235,  -235,  674,   94,    379,   198,   373,   372,   -235,  394,
-		73,    74,    75,    76,    77,    446,   197,   195,   26,    198,   100,   205,   -88,   305,   -284,  -8190, -284,  78,    306,   381,
-		240,   241,   380,   386,   307,   308,   385,   375,   376,   374,   1,     196,   45,    379,   95,    259,   94,    192,   394,   299,
-		239,   586,   -8190, -8190, 394,   -286,  195,   26,    458,   -286,  205,   396,   305,   297,   298,   -8190, -8190, 306,   381,   240,
-		241,   380,   386,   307,   308,   -8190, 375,   376,   374,   385,   103,   44,    431,   104,   430,   98,    379,   230,   299,   96,
-		-29,   -8190, -8190, -8190, 299,   105,   431,   442,   430,   195,   26,    202,   203,   205,   16,    305,   -8190, -8190, -8190, -8190,
-		306,   381,   240,   241,   380,   386,   307,   308,   385,   18,    375,   376,   374,   92,    -8190, 379,   -8190, -8190, 98,    93,
-		-284,  106,   -8190, -8190, -284,  70,    71,    72,    195,   26,    448,   -23,   205,   197,   305,   -8190, -8190, -8190, -17,   306,
-		381,   240,   241,   380,   386,   307,   308,   -16,   -235,  375,   376,   374,   385,   17,    102,   1,     196,   42,    43,    379,
-		259,   171,   172,   394,   -8190, -8190, 586,   99,    -235,  -235,  -235,  193,   195,   26,    -8190, -8190, 205,   -235,  305,   298,
-		568,   204,   570,   306,   381,   240,   241,   380,   386,   307,   308,   385,   373,   372,   101,   394,   44,    2,     379,   429,
-		78,    98,    230,   299,   404,   358,   675,   572,   571,   -8190, 598,   378,   377,   -271,  394,   389,   662,   390,   -8190, -8190,
-		-8190, -210,  382,   381,   384,   383,   380,   386,   387,   388,   599,   170,   248,   21,    183,   -242,  -8190, 9,     -8190, -8190,
-		-8190, -8190, 284,   0,     -8190, -8190, -8190, -8191, -8191, -8191, -8191, -8191, -8190, -8190, -8190, -242,  -242,  -242,  -270,  -8190,
-		-8190, -8190, 171,   172,   -201,  -8190, -8190, -8190, -239,  -269,  -8190, -237,  -8190, -8190, -8190, -8190, -201,  -8190, -8190, -8190,
-		-8190, -8190, -8190, -8190, -236,  -8190, -8190, -8190, -239,  -239,  -239,  -237,  -237,  -237,  28,    -246,  -245,  -239,  -241,  -244,
-		-237,  -243,  3,     4,     -236,  -236,  -236,  27,    6,     -246,  232,   7,     -245,  -236,  217,   218,   219,   23,    -241,  -241,
-		-241,  46,    47,    249,   190,   -244,  191,   214,   215,   216,   255,   256,   257,   30,    250,   5,     177,   286,   247,   583,
-		299,   212,   449,   541,   584,   460,   447,   459,   443,   0,     559,   -29,   0,     536,   342,   0,     347,   575,   542,   642,
-		0,     19,    48,    0,     267,   0,     670,   672,   405,   671,   0,     552,   355,   669,   626,   640,   0,     366,   0,     615,
-		630,   665,   360,   0,     587,
-	];
-
-	/** Table indexed analogously to self::Action. If self::ActionCheck[self::ActionBase[$state] + $symbol] != $symbol
-	 *  then the action is defaulted, i.e. self::ActionDefault[$state] should be used instead. */
-	protected const ActionCheck = [
-		30,    31,    37,    38,    39,    40,    41,    42,    43,    44,    45,    21,    69,    69,    71,    71,    46,    47,    30,    31,
-		2,     51,    0,     53,    54,    55,    56,    57,    58,    59,    60,    61,    62,    80,    64,    65,    66,    67,    68,    69,
-		22,    71,    72,    26,    27,    75,    76,    30,    78,    79,    107,   93,    82,    83,    0,     112,   64,    87,    88,    89,
-		6,     108,   0,     105,   2,     77,    96,    97,    98,    99,    100,   3,     4,     5,     93,    105,   84,    85,    86,    30,
-		31,    111,   112,   27,    28,    93,    105,   22,    98,    21,    100,   23,    24,    25,    26,    0,     106,   29,    30,    31,
-		32,    33,    34,    35,    36,    37,    38,    39,    40,    41,    42,    43,    44,    45,    46,    47,    48,    49,    50,    70,
-		52,    0,     3,     4,     5,     98,    0,     100,   2,     64,    0,     63,    7,     8,     9,     10,    11,    12,    13,    14,
-		15,    16,    17,    18,    19,    20,    3,     4,     5,     84,    85,    86,    2,     27,    28,    3,     4,     5,     93,    0,
-		2,     2,     106,   2,     45,    3,     4,     5,     106,   2,     105,   52,    110,   21,    2,     23,    24,    25,    26,    54,
-		55,    29,    30,    31,    65,    66,    47,    74,    69,    64,    71,    42,    43,    44,    45,    76,    77,    78,    79,    80,
-		81,    82,    83,    90,    3,     4,     5,     45,    69,    84,    85,    86,    73,    94,    52,    21,    30,    31,    93,    72,
-		46,    47,    48,    49,    50,    106,   52,    65,    66,    21,    2,     69,    106,   71,    0,     88,    2,     63,    76,    77,
-		78,    79,    80,    81,    82,    83,    45,    3,     4,     5,     64,    65,    105,   52,    22,    69,    94,    2,     72,    112,
-		2,     75,    30,    31,    72,    106,   65,    66,    106,   110,   69,    2,     71,    87,    88,    3,     4,     76,    77,    78,
-		79,    80,    81,    82,    83,    3,     3,     4,     5,     45,    6,     105,   98,    6,     100,   94,    52,    111,   112,   107,
-		106,   3,     4,     5,     112,   6,     98,    106,   100,   65,    66,    26,    27,    69,    6,     71,    3,     4,     5,     21,
-		76,    77,    78,    79,    80,    81,    82,    83,    45,    6,     3,     4,     5,     7,     21,    52,    23,    24,    94,    7,
-		106,   7,     30,    31,    110,   43,    44,    45,    65,    66,    106,   22,    69,    52,    71,    3,     4,     5,     22,    76,
-		77,    78,    79,    80,    81,    82,    83,    22,    64,    3,     4,     5,     45,    22,    22,    64,    65,    94,    95,    52,
-		69,    27,    28,    72,    46,    47,    75,    22,    84,    85,    86,    22,    65,    66,    30,    31,    69,    93,    71,    88,
-		69,    30,    71,    76,    77,    78,    79,    80,    81,    82,    83,    45,    30,    31,    64,    72,    105,   105,   52,    88,
-		63,    94,    111,   112,   94,    81,    73,    96,    97,    74,    90,    65,    66,    105,   72,    69,    74,    71,    3,     4,
-		5,     93,    76,    77,    78,    79,    80,    81,    82,    83,    90,    93,    93,    91,    92,    64,    21,    2,     23,    24,
-		25,    26,    106,   -1,    29,    30,    31,    32,    33,    34,    35,    36,    3,     4,     5,     84,    85,    86,    105,   3,
-		4,     5,     27,    28,    93,    3,     4,     5,     64,    105,   21,    64,    23,    24,    25,    26,    105,   21,    29,    23,
-		24,    25,    26,    21,    64,    23,    24,    25,    84,    85,    86,    84,    85,    86,    64,    105,   105,   93,    64,    105,
-		93,    105,   105,   105,   84,    85,    86,    64,    105,   105,   64,    105,   105,   93,    84,    85,    86,    105,   84,    85,
-		86,    105,   105,   93,    105,   105,   105,   84,    85,    86,    84,    85,    86,    101,   102,   103,   104,   106,   105,   110,
-		112,   106,   106,   106,   106,   106,   106,   106,   106,   -1,    106,   106,   -1,    106,   106,   -1,    106,   106,   106,   106,
-		-1,    107,   107,   -1,    107,   -1,    108,   108,   108,   108,   -1,    108,   108,   108,   108,   108,   -1,    109,   -1,    110,
-		110,   110,   110,   -1,    111,
-	];
-
-	/** Map of states to their default action */
-	protected const ActionDefault = [
-		8191,  282,   8191,  282,   8191,  31,    282,   8191,  282,   8191,  29,    8191,  8191,  29,    29,    8191,  8191,  8191,  8191,  39,
-		29,    8191,  8191,  8191,  8191,  8191,  10,    233,   233,   233,   8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,
-		8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,
-		8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,
-		8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  94,    8191,  8191,  8191,  8191,  8191,
-		29,    8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  283,   283,   8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,
-		1,     289,   290,   97,    86,    234,   285,   287,   89,    90,    96,    43,    44,    56,    136,   138,   172,   137,   111,   117,
-		118,   119,   120,   121,   122,   123,   124,   125,   126,   127,   128,   129,   109,   110,   184,   173,   171,   170,   134,   135,
-		139,   142,   108,   140,   141,   159,   160,   157,   158,   161,   8191,  8191,  8191,  162,   163,   164,   165,   8191,  8191,  8191,
-		8191,  8191,  8191,  8191,  8191,  8191,  8191,  8191,  166,   143,   71,    71,    71,    8191,  8191,  11,    8191,  8191,  8191,  8191,
-		8191,  8191,  8191,  8191,  8191,  224,   149,   150,   152,   224,   189,   223,   168,   8191,  8191,  8191,  8191,  8191,  8191,  8191,
-		8191,  8191,  229,   131,   133,   207,   144,   145,   235,   112,   8191,  8191,  8191,  228,   8191,  297,   235,   235,   235,   34,
-		34,    34,    8191,  104,   104,   8191,  57,    34,    8191,  8191,  8191,  34,    34,    34,    2,     8191,  8191,  8191,  213,   242,
-		235,   155,   8191,  146,   147,   148,   59,    8191,  200,   8191,  28,    188,   8191,  28,    28,    28,    8191,  255,   256,   257,
-		28,    28,    28,    28,    191,   36,    73,    28,    28,    73,    8191,  8191,  28,    8191,  8191,  8191,  8191,  8191,  8191,  8191,
-		8191,  218,   8191,  240,   253,   203,   15,    20,    21,    8191,  218,   239,   237,   153,   154,   156,   176,   177,   178,   179,
-		180,   181,   182,   280,   8191,  276,   206,   8191,  8191,  235,   8191,  8191,  8191,  8191,  296,   8191,  235,   151,   8191,  214,
-		260,   8191,  236,   235,   281,   8191,  8191,  8191,  8191,  60,    8191,  8191,  8191,  8191,  8191,  215,   8191,  8191,  8191,  8191,
-		8191,  8191,  8191,  55,    8191,  8191,  8191,
-	];
-
-	/** Map of non-terminals to a displacement into the self::Goto table. The corresponding goto state for this
-	 *  non-terminal/state pair is self::Goto[self::GotoBase[$nonTerminal] + $state] (unless defaulted) */
-	protected const GotoBase = [
-		0,     0,     -1,    0,     0,     0,     105,   0,     260,   -62,   58,    -28,   0,     102,   61,    0,     0,     0,     0,     229,
-		239,   95,    -22,   266,   -11,   86,    0,     88,    0,     117,   93,    0,     0,     -66,   28,    34,    274,   295,   0,     0,
-		110,   4,     -266,  0,     0,     53,    67,    0,     54,    0,     0,     168,   5,     0,     0,     0,     68,    0,     0,     0,
-		0,     -78,   -51,   0,     0,     0,     27,    38,    106,   57,    69,    18,    0,     0,     -16,   11,    0,     8,     2,     169,
-		45,    0,     0,
-	];
-
-	/** Table of states to goto after reduction. Indexed according to self::GotoBase comment. */
-	protected const Goto = [
-		110,   107,   110,   565,   109,   110,   451,   110,   262,   109,   566,   617,   618,   619,   138,   126,   127,   126,   123,   123,
-		115,   136,   123,   483,   108,   483,   125,   125,   125,   120,   313,   314,   261,   315,   316,   317,   318,   319,   320,   321,
-		322,   121,   122,   111,   112,   113,   114,   116,   134,   135,   137,   155,   158,   159,   160,   161,   163,   164,   165,   166,
-		167,   168,   169,   173,   174,   175,   176,   188,   189,   206,   207,   208,   226,   227,   263,   264,   265,   337,   139,   140,
-		141,   142,   143,   144,   145,   146,   147,   148,   149,   150,   151,   152,   153,   128,   156,   117,   118,   128,   129,   130,
-		119,   157,   131,   154,   132,   133,   181,   399,   181,   333,   181,   181,   400,   181,   338,   181,   326,   326,   326,   326,
-		185,   186,   187,   186,   428,   428,   428,   428,   567,   567,   567,   567,   428,   428,   428,   428,   428,   428,   428,   569,
-		569,   569,   569,   569,   569,   569,   569,   569,   569,   569,   569,   569,   569,   569,   340,   260,   343,   223,   224,   236,
-		329,   336,   228,   229,   237,   238,   310,   310,   585,   585,   585,   585,   585,   585,   585,   585,   585,   644,   629,   629,
-		629,   629,   311,   311,   311,   311,   311,   311,   311,   311,   311,   311,   311,   666,   667,   668,   345,   365,   641,   641,
-		641,   641,   641,   641,   608,   608,   608,   608,   608,   608,   608,   608,   608,   608,   608,   605,   605,   605,   605,   605,
-		605,   605,   605,   605,   605,   605,   278,   279,   631,   632,   633,   231,   627,   627,   312,   312,   312,   312,   312,   312,
-		312,   312,   312,   312,   312,   346,   462,   353,   242,   409,   272,   534,   354,   418,   473,   472,   634,   635,   660,   361,
-		407,   309,   332,   309,   560,   309,   309,   323,   309,   323,   309,   235,   323,   413,   323,   660,   661,   350,   235,   235,
-		421,   280,   182,   182,   344,   282,   283,   661,   235,   235,   676,   425,   432,   434,   436,   433,   435,   437,   466,   221,
-		235,   327,   328,   467,   450,   554,   554,   468,   452,   445,   441,   470,   327,   328,   285,   561,   0,     362,   0,     0,
-		0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,
-		0,     0,     0,     0,     402,   402,   402,   0,     363,   563,   0,     0,     402,   0,     0,     0,     402,   402,   402,   0,
-		0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,
-		0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,
-		0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     0,
-		0,     0,     0,     0,     0,     0,     0,     0,     0,     0,     339,   243,   244,   0,     0,     0,     0,     0,     0,     0,
-		0,     0,     0,     416,   416,
-	];
-
-	/** Table indexed analogously to self::Goto. If self::GotoCheck[self::GotoBase[$nonTerminal] + $state] != $nonTerminal
-	 *  then the goto state is defaulted, i.e. self::GotoDefault[$nonTerminal] should be used. */
-	protected const GotoCheck = [
-		2,     2,     2,     42,    2,     2,     41,    2,     78,    2,     42,    42,    42,    42,    2,     2,     2,     2,     2,     2,
-		2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,
-		2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,
-		2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,
-		2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,
-		2,     2,     2,     2,     2,     2,     6,     13,    6,     68,    6,     6,     13,    6,     40,    6,     61,    61,    61,    61,
-		6,     6,     6,     6,     33,    33,    33,    33,    33,    33,    33,    33,    33,    33,    33,    33,    33,    33,    33,    62,
-		62,    62,    62,    62,    62,    62,    62,    62,    62,    62,    62,    62,    62,    62,    74,    22,    22,    22,    22,    22,
-		22,    22,    22,    22,    22,    22,    24,    24,    24,    24,    24,    24,    24,    24,    24,    24,    24,    79,    74,    74,
-		74,    74,    52,    52,    52,    52,    52,    52,    52,    52,    52,    52,    52,    9,     9,     9,     51,    51,    74,    74,
-		74,    74,    74,    74,    66,    66,    66,    66,    66,    66,    66,    66,    66,    66,    66,    67,    67,    67,    67,    67,
-		67,    67,    67,    67,    67,    67,    75,    75,    75,    75,    75,    71,    74,    74,    69,    69,    69,    69,    69,    69,
-		69,    69,    69,    69,    69,    11,    11,    11,    71,    19,    48,    48,    11,    11,    11,    11,    77,    77,    80,    11,
-		11,    8,     20,    8,     11,    8,     8,     23,    8,     23,    8,     10,    23,    21,    23,    80,    80,    25,    10,    10,
-		27,    36,    6,     6,     23,    36,    36,    80,    10,    10,    10,    30,    30,    30,    30,    30,    30,    30,    45,    70,
-		10,    14,    14,    45,    37,    35,    35,    45,    37,    37,    29,    46,    14,    14,    14,    56,    -1,    34,    -1,    -1,
-		-1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,
-		-1,    -1,    -1,    -1,    6,     6,     6,     -1,    10,    10,    -1,    -1,    6,     -1,    -1,    -1,    6,     6,     6,     -1,
-		-1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,
-		-1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,
-		-1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,
-		-1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    -1,    8,     8,     8,     -1,    -1,    -1,    -1,    -1,    -1,    -1,
-		-1,    -1,    -1,    23,    23,
-	];
-
-	/** Map of non-terminals to the default state to goto after their reduction */
-	protected const GotoDefault = [
-		-8192, 293,   124,   254,   370,   371,   184,   391,   330,   639,   625,   397,   270,   646,   291,   290,   481,   356,   288,   408,
-		357,   412,   162,   300,   301,   348,   281,   420,   253,   439,   246,   266,   349,   268,   359,   474,   275,   444,   482,   273,
-		331,   454,   564,   274,   245,   465,   469,   480,   271,   550,   289,   341,   210,   557,   364,   292,   562,   616,   269,   302,
-		276,   576,   258,   225,   303,   -8192, 233,   222,   324,   211,   220,   659,   234,   304,   614,   277,   621,   628,   325,   645,
-		658,   335,   352,
-	];
-
-	/** Map of rules to the non-terminal on their left-hand side, i.e. the non-terminal to use for
-	 *  determining the state to goto after reduction. */
-	protected const RuleToNonTerminal = [
-		0,     1,     1,     1,     1,     6,     6,     7,     7,     7,     7,     7,     7,     7,     7,     7,     7,     7,     7,     7,
-		7,     7,     8,     8,     8,     9,     9,     10,    11,    11,    4,     4,     12,    12,    14,    14,    15,    15,    16,    17,
-		17,    18,    18,    19,    19,    5,     5,     21,    21,    21,    21,    25,    25,    26,    26,    27,    27,    29,    29,    29,
-		29,    30,    30,    30,    30,    31,    31,    31,    31,    32,    32,    28,    28,    34,    34,    35,    35,    36,    36,    38,
-		38,    38,    38,    39,    39,    39,    37,    37,    41,    41,    41,    42,    42,    42,    40,    20,    43,    43,    44,    44,
-		3,     3,     45,    45,    46,    46,    46,    46,    2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,
-		2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,
-		2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,
-		2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,     2,
-		2,     2,     2,     2,     2,     2,     2,     52,    53,    47,    47,    50,    50,    54,    55,    55,    56,    57,    57,    57,
-		61,    33,    33,    62,    62,    62,    48,    48,    48,    59,    59,    65,    65,    66,    67,    67,    24,    69,    69,    69,
-		69,    49,    49,    49,    49,    49,    49,    49,    49,    49,    49,    49,    49,    51,    51,    64,    64,    64,    64,    64,
-		72,    72,    72,    58,    58,    58,    58,    73,    73,    73,    73,    73,    73,    22,    22,    22,    22,    22,    74,    74,
-		77,    76,    63,    63,    63,    63,    63,    63,    63,    60,    60,    60,    75,    75,    75,    23,    68,    78,    78,    79,
-		79,    79,    79,    13,    13,    13,    13,    13,    13,    13,    13,    70,    70,    70,    70,    71,    81,    80,    80,    80,
-		80,    80,    80,    80,    80,    80,    82,    82,    82,    82,
-	];
-
-	/** Map of rules to the length of their right-hand side, which is the number of elements that have to
-	 *  be popped from the stack(s) on reduction. */
-	protected const RuleToLength = [
-		1,     2,     2,     2,     2,     1,     1,     1,     1,     1,     1,     1,     1,     1,     1,     1,     1,     1,     1,     1,
-		1,     1,     1,     1,     1,     1,     1,     1,     0,     1,     2,     0,     1,     3,     0,     1,     0,     1,     7,     0,
-		2,     1,     3,     3,     4,     1,     3,     1,     2,     1,     1,     2,     0,     1,     3,     4,     6,     1,     2,     1,
-		1,     1,     1,     1,     1,     3,     3,     3,     3,     3,     3,     0,     1,     0,     2,     2,     4,     1,     3,     2,
-		4,     4,     3,     3,     1,     3,     1,     1,     2,     2,     3,     2,     4,     3,     1,     2,     3,     1,     2,     2,
-		1,     2,     3,     3,     0,     3,     3,     1,     1,     3,     3,     3,     4,     1,     1,     2,     2,     3,     3,     3,
-		3,     3,     3,     3,     3,     3,     3,     3,     3,     3,     2,     2,     2,     2,     3,     3,     3,     3,     3,     3,
-		3,     3,     3,     3,     3,     3,     3,     3,     3,     3,     3,     3,     3,     2,     2,     2,     2,     3,     3,     3,
-		3,     3,     3,     3,     3,     3,     3,     3,     3,     3,     5,     4,     3,     3,     4,     4,     2,     2,     2,     2,
-		2,     2,     2,     1,     8,     12,    9,     3,     2,     1,     1,     0,     4,     2,     1,     3,     2,     2,     2,     4,
-		1,     1,     1,     1,     1,     1,     1,     1,     3,     1,     1,     0,     1,     1,     3,     5,     3,     4,     1,     1,
-		3,     1,     1,     1,     1,     1,     1,     1,     1,     1,     3,     2,     3,     0,     1,     1,     3,     1,     1,     1,
-		1,     1,     1,     1,     3,     1,     1,     1,     4,     1,     4,     4,     4,     1,     1,     3,     3,     3,     1,     4,
-		1,     3,     1,     4,     3,     3,     3,     3,     3,     1,     3,     1,     1,     3,     1,     4,     1,     3,     1,     1,
-		1,     3,     0,     1,     2,     3,     4,     3,     4,     2,     2,     2,     2,     1,     2,     1,     1,     1,     4,     3,
-		3,     3,     3,     3,     6,     3,     1,     1,     2,     1,
-	];
-
-	/** Map of symbols to their names */
-	protected const SymbolToName = [
-		'end',
-		'error',
-		"','",
-		"'or'",
-		"'xor'",
-		"'and'",
-		"'=>'",
-		"'='",
-		"'+='",
-		"'-='",
-		"'*='",
-		"'/='",
-		"'.='",
-		"'%='",
-		"'&='",
-		"'|='",
-		"'^='",
-		"'<<='",
-		"'>>='",
-		"'**='",
-		"'??='",
-		"'?'",
-		"':'",
-		"'??'",
-		"'||'",
-		"'&&'",
-		"'|'",
-		"'|'",
-		"'?|'",
-		"'^'",
-		"'&'",
-		"'&'",
-		"'=='",
-		"'!='",
-		"'==='",
-		"'!=='",
-		"'<=>'",
-		"'<'",
-		"'<='",
-		"'>'",
-		"'>='",
-		"'|>'",
-		"'.'",
-		"'<<'",
-		"'>>'",
-		"'in'",
-		"'+'",
-		"'-'",
-		"'*'",
-		"'/'",
-		"'%'",
-		"'!'",
-		"'instanceof'",
-		"'~'",
-		"'++'",
-		"'--'",
-		"'(int)'",
-		"'(float'",
-		"'(string)'",
-		"'(array)'",
-		"'(object)'",
-		"'(bool)'",
-		"'@'",
-		"'**'",
-		"'['",
-		"'new'",
-		"'clone'",
-		'integer',
-		'floating-point number',
-		'identifier',
-		'variable name',
-		'constant',
-		'variable',
-		'number',
-		'string content',
-		'quoted string',
-		"'match'",
-		"'default'",
-		"'function'",
-		"'fn'",
-		"'return'",
-		"'use'",
-		"'isset'",
-		"'empty'",
-		"'->'",
-		"'?->'",
-		"'??->'",
-		"'list'",
-		"'array'",
-		"'heredoc start'",
-		"'heredoc end'",
-		"'\${'",
-		"'{\$'",
-		"'::'",
-		"'...'",
-		"'(expand)'",
-		'fully qualified name',
-		'namespaced name',
-		"'null'",
-		"'true'",
-		"'false'",
-		"'e'",
-		"'m'",
-		"'a'",
-		"'f'",
-		"'('",
-		"')'",
-		"'{'",
-		"'}'",
-		"';'",
-		"']'",
-		"'\"'",
-		"'$'",
-		"'\\\\'",
-		'whitespace',
-		'comment',
-	];
-
-	/** Temporary value containing the result of last semantic action (reduction) */
-	protected mixed $semValue = null;
-
-	/** Semantic value stack (contains values of tokens and semantic action results) */
-	protected array $semStack;
-
-	/** @var array<int, ?Token> Start attribute stack */
-	protected array $startTokenStack;
-
-	/** @var array<int, ?Token> End attribute stack */
-	protected array $endTokenStack;
-
-
-	protected function reduce(int $rule, int $pos): void
-	{
-		(match ($rule) {
-			0, 1, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 28, 29, 57, 72, 74, 87, 107, 108, 113, 114, 183, 189, 190, 200, 202, 206, 207, 209, 210, 212, 223, 228, 229, 234, 235, 237, 238, 239, 240, 241, 243, 245, 246, 247, 249, 253, 254, 258, 262, 269, 271, 272, 274, 279, 297, 309 => fn() => $this->semValue = $this->semStack[$pos],
-			2 => fn() => $this->semValue = new Node\ModifierNode($this->semStack[$pos], position: $this->createRange($pos, $pos)),
-			3 => fn() => $this->semValue = new Expression\ArrayNode($this->semStack[$pos], position: $this->createRange($pos, $pos)),
-			22, 23, 24, 25, 26, 62, 63, 64 => fn() => $this->semValue = new Node\IdentifierNode($this->semStack[$pos], $this->createRange($pos, $pos)),
-			27 => fn() => $this->semValue = new Expression\VariableNode(substr($this->semStack[$pos], 1), $this->createRange($pos, $pos)),
-			30, 40, 51, 95, 105, 106, 168, 169, 192, 193, 208, 236, 244, 270, 273, 305 => fn() => $this->semValue = $this->semStack[$pos - 1],
-			31, 39, 52, 75, 79, 91, 104, 191, 211 => fn() => $this->semValue = [],
-			32, 41, 53, 77, 84, 97, 100, 194, 278, 293 => fn() => $this->semValue = [$this->semStack[$pos]],
-			33, 42, 54, 66, 68, 70, 78, 85, 96, 195, 277 => function () use ($pos) {
-				$this->semStack[$pos - 2][] = $this->semStack[$pos];
-				$this->semValue = $this->semStack[$pos - 2];
-			},
-			34, 36 => fn() => $this->semValue = false,
-			35, 37 => fn() => $this->semValue = true,
-			38 => fn() => $this->semValue = new Expression\MatchNode($this->semStack[$pos - 4], $this->semStack[$pos - 1], $this->createRange($pos - 6, $pos)),
-			43 => fn() => $this->semValue = new Node\MatchArmNode($this->semStack[$pos - 2], $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			44 => fn() => $this->semValue = new Node\MatchArmNode(null, $this->semStack[$pos], $this->createRange($pos - 3, $pos)),
-			45 => fn() => $this->semValue = [null, ...$this->semStack[$pos]],
-			46 => fn() => $this->semValue = [$this->semStack[$pos - 2], ...$this->semStack[$pos]],
-			47, 49 => fn() => $this->semValue = [$this->semStack[$pos], false],
-			48 => fn() => $this->semValue = [$this->semStack[$pos], true],
-			50 => fn() => $this->semValue = [$this->convertArrayToList($this->semStack[$pos]), false],
-			55 => fn() => $this->semValue = new Node\ParameterNode($this->semStack[$pos], null, $this->semStack[$pos - 3], $this->semStack[$pos - 2], $this->semStack[$pos - 1], $this->createRange($pos - 3, $pos)),
-			56 => fn() => $this->semValue = new Node\ParameterNode($this->semStack[$pos - 2], $this->semStack[$pos], $this->semStack[$pos - 5], $this->semStack[$pos - 4], $this->semStack[$pos - 3], $this->createRange($pos - 5, $pos)),
-			58 => fn() => $this->semValue = new Node\NullableTypeNode($this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			59 => fn() => $this->semValue = new Node\UnionTypeNode($this->semStack[$pos], $this->createRange($pos, $pos)),
-			60 => fn() => $this->semValue = new Node\IntersectionTypeNode($this->semStack[$pos], $this->createRange($pos, $pos)),
-			61 => fn() => $this->semValue = TagParser::handleBuiltinTypes($this->semStack[$pos]),
-			65, 67, 69 => fn() => $this->semValue = [$this->semStack[$pos - 2], $this->semStack[$pos]],
-			71, 73, 233 => fn() => $this->semValue = null,
-			76, 80, 92 => fn() => $this->semValue = $this->semStack[$pos - 2],
-			81 => fn() => $this->semValue = [new Node\ArgumentNode($this->semStack[$pos - 2], false, false, null, $this->createRange($pos - 3, $pos))],
-			82, 93 => fn() => $this->semValue = [$this->semStack[$pos - 1]],
-			83 => fn() => $this->semValue = [new Node\ArgumentNode($this->semStack[$pos - 2], false, false, null, $this->createRange($pos - 2, $pos)), $this->semStack[$pos]],
-			86 => fn() => $this->semValue = new Node\ArgumentNode($this->semStack[$pos], false, false, null, $this->createRange($pos, $pos)),
-			88 => fn() => $this->semValue = new Node\ArgumentNode($this->semStack[$pos], true, false, null, $this->createRange($pos - 1, $pos)),
-			89 => fn() => $this->semValue = new Node\ArgumentNode($this->semStack[$pos], false, true, null, $this->createRange($pos - 1, $pos)),
-			90 => fn() => $this->semValue = new Node\ArgumentNode($this->semStack[$pos], false, false, $this->semStack[$pos - 2], $this->createRange($pos - 2, $pos)),
-			94 => fn() => $this->semValue = new Node\VariadicPlaceholderNode($this->createRange($pos, $pos)),
-			98, 99 => fn() => $this->semValue = new Expression\FilterCallNode($this->semStack[$pos - 1], $this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			101, 291, 292 => function () use ($pos) {
-				$this->semStack[$pos - 1][] = $this->semStack[$pos];
-				$this->semValue = $this->semStack[$pos - 1];
-			},
-			102 => fn() => $this->semValue = new Node\FilterNode($this->semStack[$pos - 1], $this->semStack[$pos], false, $this->createRange($pos - 2, $pos)),
-			103 => fn() => $this->semValue = new Node\FilterNode($this->semStack[$pos - 1], $this->semStack[$pos], true, $this->createRange($pos - 2, $pos)),
-			109, 111 => fn() => $this->semValue = new Expression\AssignNode($this->semStack[$pos - 2], $this->semStack[$pos], false, $this->createRange($pos - 2, $pos)),
-			110 => fn() => $this->semValue = new Expression\AssignNode($this->convertArrayToList($this->semStack[$pos - 2]), $this->semStack[$pos], false, $this->createRange($pos - 2, $pos)),
-			112 => fn() => $this->semValue = new Expression\AssignNode($this->semStack[$pos - 3], $this->semStack[$pos], true, $this->createRange($pos - 3, $pos)),
-			115 => fn() => $this->semValue = new Expression\FunctionCallNode(new Node\NameNode($this->semStack[$pos - 1], Node\NameNode::KindNormal, $this->createRange($pos - 1, $pos)), $this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			116 => fn() => $this->semValue = new Expression\CloneNode($this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			117 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '+', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			118 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '-', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			119 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '*', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			120 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '/', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			121 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '.', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			122 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '%', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			123 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '&', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			124 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '|', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			125 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '^', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			126 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '<<', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			127 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '>>', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			128 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '**', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			129 => fn() => $this->semValue = new Expression\AssignOpNode($this->semStack[$pos - 2], '??', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			130 => fn() => $this->semValue = new Expression\PostOpNode($this->semStack[$pos - 1], '++', $this->createRange($pos - 1, $pos)),
-			131 => fn() => $this->semValue = new Expression\PreOpNode($this->semStack[$pos], '++', $this->createRange($pos - 1, $pos)),
-			132 => fn() => $this->semValue = new Expression\PostOpNode($this->semStack[$pos - 1], '--', $this->createRange($pos - 1, $pos)),
-			133 => fn() => $this->semValue = new Expression\PreOpNode($this->semStack[$pos], '--', $this->createRange($pos - 1, $pos)),
-			134 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '||', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			135 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '&&', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			136 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], 'or', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			137 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], 'and', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			138 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], 'xor', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			139 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '|', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			140, 141 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '&', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			142 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '^', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			143 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '.', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			144 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '+', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			145 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '-', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			146 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '*', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			147 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '/', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			148 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '%', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			149 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '<<', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			150 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '>>', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			151 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '**', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			152 => fn() => $this->semValue = new Expression\InNode($this->semStack[$pos - 2], $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			153 => fn() => $this->semValue = new Expression\UnaryOpNode($this->semStack[$pos], '+', $this->createRange($pos - 1, $pos)),
-			154 => fn() => $this->semValue = new Expression\UnaryOpNode($this->semStack[$pos], '-', $this->createRange($pos - 1, $pos)),
-			155 => fn() => $this->semValue = new Expression\UnaryOpNode($this->semStack[$pos], '!', $this->createRange($pos - 1, $pos)),
-			156 => fn() => $this->semValue = new Expression\UnaryOpNode($this->semStack[$pos], '~', $this->createRange($pos - 1, $pos)),
-			157 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '===', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			158 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '!==', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			159 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '==', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			160 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '!=', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			161 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '<=>', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			162 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '<', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			163 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '<=', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			164 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '>', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			165 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '>=', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			166 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '|>', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			167 => fn() => $this->semValue = new Expression\InstanceofNode($this->semStack[$pos - 2], $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			170 => fn() => $this->semValue = new Expression\TernaryNode($this->semStack[$pos - 4], $this->semStack[$pos - 2], $this->semStack[$pos], $this->createRange($pos - 4, $pos)),
-			171 => fn() => $this->semValue = new Expression\TernaryNode($this->semStack[$pos - 3], null, $this->semStack[$pos], $this->createRange($pos - 3, $pos)),
-			172 => fn() => $this->semValue = new Expression\TernaryNode($this->semStack[$pos - 2], $this->semStack[$pos], null, $this->createRange($pos - 2, $pos)),
-			173 => fn() => $this->semValue = new Expression\BinaryOpNode($this->semStack[$pos - 2], '??', $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			174 => fn() => $this->semValue = new Expression\IssetNode($this->semStack[$pos - 1], $this->createRange($pos - 3, $pos)),
-			175 => fn() => $this->semValue = new Expression\EmptyNode($this->semStack[$pos - 1], $this->createRange($pos - 3, $pos)),
-			176 => fn() => $this->semValue = new Expression\CastNode('int', $this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			177 => fn() => $this->semValue = new Expression\CastNode('float', $this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			178 => fn() => $this->semValue = new Expression\CastNode('string', $this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			179 => fn() => $this->semValue = new Expression\CastNode('array', $this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			180 => fn() => $this->semValue = new Expression\CastNode('object', $this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			181 => fn() => $this->semValue = new Expression\CastNode('bool', $this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-			182 => fn() => $this->semValue = new Expression\UnaryOpNode($this->semStack[$pos], '@', $this->createRange($pos - 1, $pos)),
-			184 => fn() => $this->semValue = new Expression\ClosureNode((bool) $this->semStack[$pos - 6], $this->semStack[$pos - 4], [], $this->semStack[$pos - 2], $this->semStack[$pos], $this->createRange($pos - 7, $pos)),
-			185 => fn() => $this->semValue = new Expression\ClosureNode((bool) $this->semStack[$pos - 10], $this->semStack[$pos - 8], $this->semStack[$pos - 6], $this->semStack[$pos - 5], $this->semStack[$pos - 2], $this->createRange($pos - 11, $pos)),
-			186 => fn() => $this->semValue = new Expression\ClosureNode((bool) $this->semStack[$pos - 7], $this->semStack[$pos - 5], $this->semStack[$pos - 3], $this->semStack[$pos - 2], null, $this->createRange($pos - 8, $pos)),
-			187 => fn() => $this->semValue = new Expression\NewNode($this->semStack[$pos - 1], $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			188 => fn() => $this->semValue = new Expression\NewNode($this->semStack[$pos], [], $this->createRange($pos - 1, $pos)),
-			196 => fn() => $this->semValue = new Node\ClosureUseNode($this->semStack[$pos], $this->semStack[$pos - 1], $this->createRange($pos - 1, $pos)),
-			197, 198 => fn() => $this->semValue = $this->checkFunctionName(new Expression\FunctionCallNode($this->semStack[$pos - 1], $this->semStack[$pos], $this->createRange($pos - 1, $pos))),
-			199 => fn() => $this->semValue = new Expression\StaticMethodCallNode($this->semStack[$pos - 3], $this->semStack[$pos - 1], $this->semStack[$pos], $this->createRange($pos - 3, $pos)),
-			201, 204 => fn() => $this->semValue = new Node\NameNode($this->semStack[$pos], Node\NameNode::KindNormal, $this->createRange($pos, $pos)),
-			203 => fn() => $this->semValue = new Node\NameNode($this->semStack[$pos], -1, $this->createRange($pos, $pos)),
-			205 => fn() => $this->semValue = new Node\NameNode($this->semStack[$pos], Node\NameNode::KindFullyQualified, $this->createRange($pos, $pos)),
-			213 => fn() => $this->semValue = new Expression\ConstantFetchNode($this->semStack[$pos], $this->createRange($pos, $pos)),
-			214 => fn() => $this->semValue = new Expression\ClassConstantFetchNode($this->semStack[$pos - 2], $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			215 => fn() => $this->semValue = new Expression\ClassConstantFetchNode($this->semStack[$pos - 4], $this->semStack[$pos - 1], $this->createRange($pos - 4, $pos)),
-			216 => fn() => $this->semValue = new Expression\ArrayNode($this->semStack[$pos - 1], $this->createRange($pos - 2, $pos)),
-			217 => fn() => $this->semValue = new Expression\ArrayNode($this->semStack[$pos - 1], $this->createRange($pos - 3, $pos)),
-			218 => function () use ($pos) {
-				$this->semValue = $this->semStack[$pos];
-				$this->shortArrays->offsetSet($this->semValue);
-			},
-			219 => fn() => $this->semValue = Scalar\StringNode::parse($this->semStack[$pos], $this->createRange($pos, $pos)),
-			220 => fn() => $this->semValue = Scalar\InterpolatedStringNode::parse($this->semStack[$pos - 1], $this->createRange($pos - 2, $pos)),
-			221 => fn() => $this->semValue = Scalar\IntegerNode::parse($this->semStack[$pos], $this->createRange($pos, $pos)),
-			222 => fn() => $this->semValue = Scalar\FloatNode::parse($this->semStack[$pos], $this->createRange($pos, $pos)),
-			224, 306 => fn() => $this->semValue = new Scalar\StringNode($this->semStack[$pos], $this->createRange($pos, $pos)),
-			225 => fn() => $this->semValue = new Scalar\BooleanNode(true, $this->createRange($pos, $pos)),
-			226 => fn() => $this->semValue = new Scalar\BooleanNode(false, $this->createRange($pos, $pos)),
-			227 => fn() => $this->semValue = new Scalar\NullNode($this->createRange($pos, $pos)),
-			230 => fn() => $this->semValue = $this->parseDocString($this->semStack[$pos - 2], [$this->semStack[$pos - 1]], $this->semStack[$pos], $this->createRange($pos - 2, $pos), $this->startTokenStack[$pos]->position),
-			231 => fn() => $this->semValue = $this->parseDocString($this->semStack[$pos - 1], [], $this->semStack[$pos], $this->createRange($pos - 1, $pos), $this->startTokenStack[$pos]->position),
-			232 => fn() => $this->semValue = $this->parseDocString($this->semStack[$pos - 2], $this->semStack[$pos - 1], $this->semStack[$pos], $this->createRange($pos - 2, $pos), $this->startTokenStack[$pos]->position),
-			242 => fn() => $this->semValue = new Expression\ConstantFetchNode(new Node\NameNode($this->semStack[$pos], Node\NameNode::KindNormal, $this->createRange($pos, $pos)), $this->createRange($pos, $pos)),
-			248, 263, 298 => fn() => $this->semValue = new Expression\ArrayAccessNode($this->semStack[$pos - 3], $this->semStack[$pos - 1], $this->createRange($pos - 3, $pos)),
-			250 => fn() => $this->semValue = new Expression\MethodCallNode($this->semStack[$pos - 3], $this->semStack[$pos - 1], $this->semStack[$pos], false, $this->createRange($pos - 3, $pos)),
-			251 => fn() => $this->semValue = new Expression\MethodCallNode($this->semStack[$pos - 3], $this->semStack[$pos - 1], $this->semStack[$pos], true, $this->createRange($pos - 3, $pos)),
-			252 => function () use ($pos) {
-				$this->semValue = new Expression\MethodCallNode(new Expression\BinaryOpNode($this->semStack[$pos - 3], '??', new Scalar\NullNode($this->createRange($pos - 3, $pos)), $this->createRange($pos - 3, $pos)), $this->semStack[$pos - 1], $this->semStack[$pos], true, $this->createRange($pos - 3, $pos));
-				trigger_error('Latte: undefined-nullsafe operator ??-> is deprecated, used ' . $this->createRange($pos - 3, $pos));
-			},
-			255, 264, 299 => fn() => $this->semValue = new Expression\PropertyFetchNode($this->semStack[$pos - 2], $this->semStack[$pos], false, $this->createRange($pos - 2, $pos)),
-			256, 265, 300 => fn() => $this->semValue = new Expression\PropertyFetchNode($this->semStack[$pos - 2], $this->semStack[$pos], true, $this->createRange($pos - 2, $pos)),
-			257, 266, 301 => function () use ($pos) {
-				$this->semValue = new Expression\PropertyFetchNode(new Expression\BinaryOpNode($this->semStack[$pos - 2], '??', new Scalar\NullNode($this->createRange($pos - 2, $pos)), $this->createRange($pos - 2, $pos)), $this->semStack[$pos], true, $this->createRange($pos - 2, $pos));
-				trigger_error('Latte: undefined-nullsafe operator ??-> is deprecated, used ' . $this->createRange($pos - 2, $pos));
-			},
-			259 => fn() => $this->semValue = new Expression\VariableNode($this->semStack[$pos - 1], $this->createRange($pos - 3, $pos)),
-			260 => function () use ($pos) {
-				$var = $this->semStack[$pos]->name;
-				$this->semValue = \is_string($var) ? new Node\VarLikeIdentifierNode($var, $this->createRange($pos, $pos)) : $var;
-			},
-			261, 267, 268 => fn() => $this->semValue = new Expression\StaticPropertyFetchNode($this->semStack[$pos - 2], $this->semStack[$pos], $this->createRange($pos - 2, $pos)),
-			275 => fn() => $this->semValue = $this->convertArrayToList(new Expression\ArrayNode($this->semStack[$pos - 1], $this->createRange($pos - 3, $pos))),
-			276 => function () use ($pos) {
-				$this->semValue = $this->semStack[$pos];
-				$end = count($this->semValue) - 1;
-				if ($this->semValue[$end]->value instanceof Expression\TemporaryNode && !$this->semValue[$end]->value->value) {
-					array_pop($this->semValue);
-				}
-			},
-			280 => fn() => $this->semValue = new Node\ArrayItemNode(new Expression\TemporaryNode($this->semStack[$pos], $this->createRange($pos, $pos)), null, false, false, $this->createRange($pos, $pos)),
-			281 => fn() => $this->semValue = new Node\ArrayItemNode(new Expression\TemporaryNode($this->semStack[$pos], $this->createRange($pos - 2, $pos)), $this->semStack[$pos - 2], false, false, $this->createRange($pos - 2, $pos)),
-			282 => fn() => $this->semValue = new Node\ArrayItemNode(new Expression\TemporaryNode(null), null, false, false, $this->createRange($pos, $pos)),
-			283 => fn() => $this->semValue = new Node\ArrayItemNode($this->semStack[$pos], null, false, false, $this->createRange($pos, $pos)),
-			284 => fn() => $this->semValue = new Node\ArrayItemNode($this->semStack[$pos], null, true, false, $this->createRange($pos - 1, $pos)),
-			285, 287 => fn() => $this->semValue = new Node\ArrayItemNode($this->semStack[$pos], $this->semStack[$pos - 2], false, false, $this->createRange($pos - 2, $pos)),
-			286, 288 => fn() => $this->semValue = new Node\ArrayItemNode($this->semStack[$pos], $this->semStack[$pos - 3], true, false, $this->createRange($pos - 3, $pos)),
-			289, 290 => fn() => $this->semValue = new Node\ArrayItemNode($this->semStack[$pos], null, false, true, $this->createRange($pos - 1, $pos)),
-			294 => fn() => $this->semValue = [$this->semStack[$pos - 1], $this->semStack[$pos]],
-			295 => fn() => $this->semValue = new Node\InterpolatedStringPartNode($this->semStack[$pos], $this->createRange($pos, $pos)),
-			296 => fn() => $this->semValue = new Expression\VariableNode($this->semStack[$pos], $this->createRange($pos, $pos)),
-			302, 303 => fn() => $this->semValue = new Expression\VariableNode($this->semStack[$pos - 1], $this->createRange($pos - 2, $pos)),
-			304 => fn() => $this->semValue = new Expression\ArrayAccessNode($this->semStack[$pos - 4], $this->semStack[$pos - 2], $this->createRange($pos - 5, $pos)),
-			307 => fn() => $this->semValue = TagParser::parseOffset($this->semStack[$pos], $this->createRange($pos, $pos)),
-			308 => fn() => $this->semValue = TagParser::parseOffset('-' . $this->semStack[$pos], $this->createRange($pos - 1, $pos)),
-		})();
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateGenerator.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateGenerator.php
deleted file mode 100644
index 98d9b82..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateGenerator.php
+++ /dev/null
@@ -1,220 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\ContentType;
-use Latte\Engine;
-use function array_filter, compact, implode, is_int, preg_match, str_contains, str_replace, trim;
-
-
-/**
- * Template code generator.
- */
-final class TemplateGenerator
-{
-	/** @var array<string, ?array{body: string, arguments: string, returns: string, comment: ?string}> */
-	private array $methods = [];
-
-	/** @var array<string, mixed> */
-	private array $properties = [];
-
-	/** @var array<string, mixed> */
-	private array $constants = [];
-
-
-	/**
-	 * Builds template class.
-	 * @param array<string, bool>  $features
-	 */
-	public function buildClass(Nodes\TemplateNode $node, array $features = []): void
-	{
-		$context = new PrintContext($node->contentType, $features);
-		$this->generateBase($node, $context);
-		$this->generateBlocks($context);
-	}
-
-
-	/**
-	 * Compiles to PHP file
-	 */
-	public function generateCode(string $className, ?string $templateName, bool $strictMode): string
-	{
-		$templateName = $templateName === null || preg_match('#\n|\?#', $templateName) ? null : $templateName;
-		$members = [];
-		foreach ($this->constants as $name => $value) {
-			$members[] = "\tpublic const $name = " . PhpHelpers::dump($value, multiline: true) . ';';
-		}
-
-		foreach ($this->properties as $name => $value) {
-			$members[] = "\tpublic $$name = " . PhpHelpers::dump($value, multiline: true) . ';';
-		}
-
-		foreach (array_filter($this->methods) as $name => $method) {
-			$members[] = ($method['comment'] === null ? '' : "\n\t/** " . str_replace('*/', '* /', $method['comment']) . ' */')
-				. "\n\tpublic function $name($method[arguments])"
-				. ($method['returns'] ? ': ' . $method['returns'] : '')
-				. "\n\t{\n"
-				. ($method['body'] ? "\t\t$method[body]\n" : '') . "\t}";
-		}
-
-		$code = '<?php' . ($strictMode ? ' declare(strict_types=1);' : '') . "\n\n"
-			. '/** Generated by Latte ' . Engine::Version . " */\n\n"
-			. "use Latte\\Runtime as LR;\n\n"
-			. ($templateName === null ? '' : '/** source: ' . str_replace('*/', '* /', $templateName) . " */\n")
-			. "final class $className extends Latte\\Runtime\\Template\n{\n"
-			. implode("\n\n", $members)
-			. "\n}\n";
-
-		$code = PhpHelpers::optimizeEcho($code);
-		$code = PhpHelpers::reformatCode($code);
-		return $code;
-	}
-
-
-	private function generateBase(Nodes\TemplateNode $node, PrintContext $context): void
-	{
-		$code = $node->main->print($context);
-		$code = self::buildParams($code, [], '$ʟ_args', $context);
-		$this->addMethod('main', $code, 'array $ʟ_args');
-
-		$head = (new NodeTraverser)->traverse(
-			$node->head,
-			fn(Node $node) => $node instanceof Nodes\TextNode ? new Nodes\NopNode : $node,
-		);
-		$code = $head?->print($context) ?? '';
-		if ($code || $context->paramsExtraction) {
-			$code .= 'return get_defined_vars();';
-			$code = self::buildParams($code, $context->paramsExtraction, '$this->params', $context);
-			$this->addMethod('prepare', $code, '', 'array');
-		}
-
-		if ($node->contentType !== ContentType::Html) {
-			$this->addConstant('ContentType', $node->contentType);
-		}
-	}
-
-
-	private function generateBlocks(PrintContext $context): void
-	{
-		$contentType = $context->getEscaper()->getContentType();
-		foreach ($context->blocks as $block) {
-			$name = $block->name;
-			if (!$block->isDynamic()
-				&& ($name instanceof Nodes\Php\Scalar\StringNode || $name instanceof Nodes\Php\Scalar\IntegerNode)
-			) {
-				$meta[$block->layer][$name->value] = $contentType === $block->escaping
-					? $block->method
-					: [$block->method, $block->escaping];
-			}
-
-			$body = $this->buildParams($block->content, $block->parameters, '$ʟ_args', $context);
-			if (!$block->isDynamic() && str_contains($body, '$')) {
-				$embedded = $block->tag->name === 'block' && is_int($block->layer) && $block->layer;
-				$body = 'extract(' . ($embedded ? 'end($this->varStack)' : '$this->params') . ');' . $body;
-			}
-
-			$this->addMethod(
-				$block->method,
-				$body,
-				'array $ʟ_args',
-				'void',
-				$block->tag->getNotation(true) . ' on line ' . $block->tag->position->line,
-			);
-		}
-
-		if (isset($meta)) {
-			$this->addConstant('Blocks', $meta);
-		}
-	}
-
-
-	/** @param Nodes\Php\ParameterNode[] $params */
-	private function buildParams(string $body, array $params, string $cont, PrintContext $context): string
-	{
-		if (!str_contains($body, '$') && !str_contains($body, 'get_defined_vars()')) {
-			return $body;
-		}
-
-		$res = [];
-		foreach ($params as $i => $param) {
-			$res[] = $context->format(
-				'%node = %raw[%dump] ?? %raw[%dump] ?? %node;',
-				$param->var,
-				$cont,
-				$i,
-				$cont,
-				$param->var->name,
-				$param->default,
-			);
-		}
-
-		$extract = $params
-			? implode('', $res) . 'unset($ʟ_args);'
-			: "extract($cont);" . (str_contains($cont, '$this') ? '' : "unset($cont);");
-		return $extract . "\n\n" . $body;
-	}
-
-
-	/**
-	 * Adds custom method to template.
-	 * @internal
-	 */
-	public function addMethod(
-		string $name,
-		string $body,
-		string $arguments = '',
-		string $returns = 'void',
-		?string $comment = null,
-	): void
-	{
-		$body = trim($body);
-		$this->methods[$name] = compact('body', 'arguments', 'returns', 'comment');
-	}
-
-
-	/**
-	 * Returns custom methods.
-	 * @return array<string, ?array{body: string, arguments: string, returns: string, comment: ?string}>
-	 * @internal
-	 */
-	public function getMethods(): array
-	{
-		return $this->methods;
-	}
-
-
-	/**
-	 * Adds custom property to template.
-	 * @internal
-	 */
-	public function addProperty(string $name, mixed $value): void
-	{
-		$this->properties[$name] = $value;
-	}
-
-
-	/**
-	 * Returns custom properties.
-	 * @return array<string, mixed>
-	 * @internal
-	 */
-	public function getProperties(): array
-	{
-		return $this->properties;
-	}
-
-
-	/**
-	 * Adds custom constant to template.
-	 * @internal
-	 */
-	public function addConstant(string $name, mixed $value): void
-	{
-		$this->constants[$name] = $value;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateLexer.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateLexer.php
deleted file mode 100644
index 9078506..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateLexer.php
+++ /dev/null
@@ -1,343 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\CompileException;
-use function array_merge, array_pop, array_shift, array_unshift, constant, dechex, is_int, ord, preg_last_error, preg_last_error_msg, preg_match, preg_quote, str_replace, str_starts_with, strlen, substr;
-use const PREG_UNMATCHED_AS_NULL;
-
-
-/**
- * Tokenizes Latte template source code.
- */
-final class TemplateLexer
-{
-	public const
-		StatePlain = 'Plain',
-		StateLatteTag = 'LatteTag',
-		StateLatteContent = 'LatteContent',
-		StateLatteComment = 'LatteComment',
-		StateHtmlText = 'HtmlText',
-		StateHtmlTag = 'HtmlTag',
-		StateHtmlQuotedValue = 'HtmlQuotedValue',
-		StateHtmlQuotedNAttrValue = 'HtmlQuotedNAttrValue',
-		StateHtmlRawText = 'HtmlRawText',
-		StateHtmlComment = 'HtmlComment',
-		StateHtmlBogus = 'HtmlBogus';
-
-	/** HTML tag name for Latte needs (actually is [a-zA-Z][^\s/>]*) */
-	public const ReTagName = '[a-zA-Z][a-zA-Z0-9:_.-]*';
-
-	/** special HTML attribute prefix */
-	public const NPrefix = 'n:';
-
-	/** HTML attribute name/value (\p{C} means \x00-\x1F except space) */
-	public const ReAttrName = '[^\p{C} "\'<>=`/]';
-
-	private string $openDelimiter = '';
-	private string $closeDelimiter = '';
-
-	/** @var array{string, string}[] */
-	private array $delimiters = [];
-	private TagLexer $tagLexer;
-
-	/** @var array<array{name: string, args: mixed[]}> */
-	private array $states = [];
-	private string $input;
-	private Position $position;
-
-
-	public function __construct()
-	{
-		$this->position = new Position;
-		$this->setState(self::StatePlain);
-		$this->setSyntax(null);
-		$this->tagLexer = new TagLexer;
-	}
-
-
-	/** @return \Generator<Token> */
-	public function tokenize(string $template): \Generator
-	{
-		$this->input = $this->normalize($template);
-
-		do {
-			$offset = $this->position->offset;
-			$state = $this->states[0];
-			$tokens = $this->{"state$state[name]"}(...$state['args']);
-			yield from $tokens;
-
-		} while ($offset !== $this->position->offset);
-
-		if ($offset < strlen($this->input)) {
-			throw new CompileException("Unexpected '" . substr($this->input, $offset, 10) . "'", $this->position);
-		}
-
-		yield new Token(Token::End, '', $this->position);
-	}
-
-
-	/** @return Token[] */
-	private function statePlain(): array
-	{
-		return $this->match('~
-			(?<Text>.+?)??
-			(?<Indentation>(?<=\n|^)[ \t]+)?
-			(
-				(?<Latte_TagOpen>' . $this->openDelimiter . '(?!\*))|      # {tag
-				(?<Latte_CommentOpen>' . $this->openDelimiter . '\*)|      # {* comment
-				$
-			)
-		~xsiAuD');
-	}
-
-
-	/** @return Token[] */
-	private function stateLatteTag(): array
-	{
-		$tokens[] = $this->match('~
-			(?<Slash>/)?
-			(?<Latte_Name> = | _(?!_) | [a-z]\w*+(?:[.:-]\w+)*+(?!::|\(|\\\))?   # name, /name, but not function( or class:: or namespace\
-		~xsiAu');
-
-		$tokens[] = $this->stateLatteContent();
-
-		return array_merge(...$tokens);
-	}
-
-
-	/** @return Token[] */
-	private function stateLatteContent(): array
-	{
-		$tokens[] = $this->tagLexer->tokenizePartially($this->input, $this->position);
-
-		$tokens[] = $this->match('~
-			(?<Slash>/)?
-			(?<Latte_TagClose>' . $this->closeDelimiter . ')
-			(?<Newline>[ \t]*\R)?
-		~xsiAu');
-
-		return array_merge(...$tokens);
-	}
-
-
-	/** @return Token[] */
-	private function stateLatteComment(): array
-	{
-		return $this->match('~
-			(?<Text>.+?)??
-			(
-				(?<Latte_CommentClose>\*' . $this->closeDelimiter . ')(?<Newline>[ \t]*\R{1,2})?|
-				$
-			)
-		~xsiAu');
-	}
-
-
-	/** @return Token[] */
-	private function stateHtmlText(): array
-	{
-		return $this->match('~(?J)
-			(?<Text>.+?)??
-			(
-				(?<Indentation>(?<=\n|^)[ \t]+)?(?<Html_TagOpen><)(?<Slash>/)?(?=[a-z]|' . $this->openDelimiter . ')|  # < </ tag
-				(?<Html_CommentOpen><!--(?!>|->))|                                                      # <!-- comment
-				(?<Html_BogusOpen><[?!])|                                                               # <!doctype <?xml or error
-				(?<Indentation>(?<=\n|^)[ \t]+)?(?<Latte_TagOpen>' . $this->openDelimiter . '(?!\*))|   # {tag
-				(?<Indentation>(?<=\n|^)[ \t]+)?(?<Latte_CommentOpen>' . $this->openDelimiter . '\*)|   # {* comment
-				$
-			)
-		~xsiAuD');
-	}
-
-
-	/** @return Token[] */
-	private function stateHtmlTag(): array
-	{
-		return $this->match('~(?J)
-			(?<Equals>=)
-				(?<Whitespace>\s+)?
-				(?<Html_Name>(?:(?!' . $this->openDelimiter . ')' . self::ReAttrName . '|/)+)?  # HTML attribute value can contain /
-			|
-			(?<Whitespace>\s+)|                                        # whitespace
-			(?<Quote>["\'])|
-			(?<Slash>/)?(?<Html_TagClose>>)(?<Newline>[ \t]*\R)?|      # > />
-			(?<Html_Name>(?:(?!' . $this->openDelimiter . ')' . self::ReAttrName . ')+)|  # HTML attribute name/value
-			(?<Latte_TagOpen>' . $this->openDelimiter . '(?!\*))|      # {tag
-			(?<Latte_CommentOpen>' . $this->openDelimiter . '\*)       # {* comment
-		~xsiAu');
-	}
-
-
-	/** @return Token[] */
-	private function stateHtmlQuotedValue(string $quote): array
-	{
-		return $this->match('~
-			(?<Text>.+?)??
-			(
-				(?<Quote>' . $quote . ')|
-				(?<Latte_TagOpen>' . $this->openDelimiter . '(?!\*))|      # {tag
-				(?<Latte_CommentOpen>' . $this->openDelimiter . '\*)|      # {* comment
-				$
-			)
-		~xsiAu');
-	}
-
-
-	/** @return Token[] */
-	private function stateHtmlQuotedNAttrValue(string $quote): array
-	{
-		return $this->match('~
-			(?<Text>.+?)??
-			(
-				(?<Quote>' . $quote . ')|
-				$
-			)
-		~xsiAu');
-	}
-
-
-	/** @return Token[] */
-	private function stateHtmlRawText(string $tagName): array
-	{
-		return $this->match('~
-			(?<Text>.+?)??
-			(?<Indentation>(?<=\n|^)[ \t]+)?
-			(
-				(?<Html_TagOpen><)(?<Slash>/)(?<Html_Name>' . preg_quote($tagName, '~') . ')|  # </tag
-				(?<Latte_TagOpen>' . $this->openDelimiter . '(?!\*))|                          # {tag
-				(?<Latte_CommentOpen>' . $this->openDelimiter . '\*)|                          # {* comment
-				$
-			)
-		~xsiAu');
-	}
-
-
-	/** @return Token[] */
-	private function stateHtmlComment(): array
-	{
-		return $this->match('~(?J)
-			(?<Text>.+?)??
-			(
-				(?<Html_CommentClose>-->)|                                                              # -->
-				(?<Indentation>(?<=\n|^)[ \t]+)?(?<Latte_TagOpen>' . $this->openDelimiter . '(?!\*))|   # {tag
-				(?<Indentation>(?<=\n|^)[ \t]+)?(?<Latte_CommentOpen>' . $this->openDelimiter . '\*)|   # {* comment
-				$
-			)
-		~xsiAu');
-	}
-
-
-	/** @return Token[] */
-	private function stateHtmlBogus(): array
-	{
-		return $this->match('~
-			(?<Text>.+?)??
-			(
-				(?<Html_TagClose>>)|                                       # >
-				(?<Latte_TagOpen>' . $this->openDelimiter . '(?!\*))|      # {tag
-				(?<Latte_CommentOpen>' . $this->openDelimiter . '\*)|      # {* comment
-				$
-			)
-		~xsiAu');
-	}
-
-
-	/**
-	 * Matches next token.
-	 * @return Token[]
-	 */
-	private function match(string $re): array
-	{
-		preg_match($re, $this->input, $matches, PREG_UNMATCHED_AS_NULL, $this->position->offset);
-		if (preg_last_error()) {
-			throw new CompileException(preg_last_error_msg());
-		}
-
-		$tokens = [];
-		foreach ($matches as $k => $v) {
-			if ($v !== null && !is_int($k)) {
-				$tokens[] = new Token(constant(Token::class . '::' . $k), $v, $this->position);
-				$this->position = $this->position->advance($v);
-			}
-		}
-
-		return $tokens;
-	}
-
-
-	public function setState(string $state, mixed ...$args): void
-	{
-		$this->states[0] = ['name' => $state, 'args' => $args];
-	}
-
-
-	public function pushState(string $state, mixed ...$args): void
-	{
-		array_unshift($this->states, ['name' => '', 'args' => []]);
-		$this->setState($state, ...$args);
-	}
-
-
-	public function popState(): void
-	{
-		array_shift($this->states);
-	}
-
-
-	public function getState(): string
-	{
-		return $this->states[0]['name'];
-	}
-
-
-	/**
-	 * Changes tag delimiters.
-	 */
-	public function setSyntax(?string $type, ?string $endTag = null): static
-	{
-		$left = '\{(?![\s\'"{}])';
-		$end = $endTag ? '\{/' . preg_quote($endTag, '~') . '\}' : null;
-
-		$this->delimiters[] = [$this->openDelimiter, $this->closeDelimiter];
-		[$this->openDelimiter, $this->closeDelimiter] = match ($type) {
-			null, 'single' => [$left, '\}'], // {...}
-			'off' => [$endTag ? '(?=' . $end . ')\{' : '(?!x)x', '\}'],
-			'double' => $endTag // {{...}}
-				? ['(?:\{' . $left . '|(?=' . $end . ')\{)', '\}(?:\}|(?<=' . $end . '))']
-				: ['\{' . $left, '\}\}'],
-			default => throw new \InvalidArgumentException("Unknown syntax '$type'"),
-		};
-		return $this;
-	}
-
-
-	public function popSyntax(): void
-	{
-		[$this->openDelimiter, $this->closeDelimiter] = array_pop($this->delimiters) ?? throw new \LogicException;
-	}
-
-
-	private function normalize(string $str): string
-	{
-		if (str_starts_with($str, "\u{FEFF}")) { // BOM
-			$str = substr($str, 3);
-		}
-
-		$str = str_replace("\r\n", "\n", $str);
-
-		if (!preg_match('##u', $str)) {
-			preg_match('#(?:[\x00-\x7F]|[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3})*+#A', $str, $m);
-			throw new CompileException('Template is not valid UTF-8 stream.', $this->position->advance($m[0]));
-
-		} elseif (preg_match('#(.*?)([\x00-\x08\x0B\x0C\x0E-\x1F\x7F])#s', $str, $m)) {
-			throw new CompileException('Template contains control character \x' . dechex(ord($m[2])), $this->position->advance($m[1]));
-		}
-		return $str;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateParser.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateParser.php
deleted file mode 100644
index b327427..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateParser.php
+++ /dev/null
@@ -1,509 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte;
-use Latte\CompileException;
-use Latte\Compiler\Nodes\FragmentNode;
-use Latte\ContentType;
-use Latte\Helpers;
-use Latte\Policy;
-use Latte\Runtime\Template;
-use Latte\SecurityViolationException;
-use function array_keys, array_splice, count, end, in_array, preg_match, str_ends_with, str_starts_with, strlen, substr, trim, ucfirst;
-
-
-/**
- * Parses Latte template tokens into AST.
- */
-final class TemplateParser
-{
-	/** @var Block[][] */
-	public array $blocks = [[]];
-	public int $blockLayer = Template::LayerTop;
-	public bool $inHead = true;
-	public bool $strict = false;
-	public bool $dedent = false;
-	public ?Nodes\TextNode $lastIndentation = null;
-
-	/** @var array<string, \Closure(Tag, self): (Node|\Generator|void)> */
-	private array $tagParsers = [];
-
-	/** @var array<string, \stdClass> */
-	private array $attrParsersInfo = [];
-
-	private TemplateParserHtml $html;
-	private TokenStream $stream;
-	private TemplateLexer $lexer;
-	private ?Policy $policy = null;
-	private string $contentType;
-	private int $counter = 0;
-	private ?Tag $tag = null;
-	private ?\Closure $lastResolver = null;
-
-	/** @var \WeakMap<Tag, ?list<string>> */
-	private \WeakMap $lookFor;
-
-
-	public function __construct()
-	{
-		$this->lexer = new TemplateLexer;
-		$this->stream = new TokenStream(new \EmptyIterator);
-		$this->setContentType(ContentType::Html);
-	}
-
-
-	/**
-	 * Parses tokens to nodes.
-	 * @throws CompileException
-	 */
-	public function parse(string $template): Nodes\TemplateNode
-	{
-		$this->html = new TemplateParserHtml($this, $this->completeAttrParsers());
-		$this->stream = new TokenStream($this->lexer->tokenize($template));
-		$this->lookFor = new \WeakMap;
-
-		$headLength = 0;
-		$findLength = function (FragmentNode $fragment) use (&$headLength) {
-			if ($this->inHead && !end($fragment->children) instanceof Nodes\TextNode) {
-				$headLength = count($fragment->children);
-			}
-		};
-
-		$node = new Nodes\TemplateNode;
-		$node->main = $this->parseFragment($this->html->inTextResolve(...), $findLength);
-		$node->head = new FragmentNode(array_splice($node->main->children, 0, $headLength));
-		$node->contentType = $this->contentType;
-
-		if (!$this->stream->peek()->isEnd()) {
-			$this->stream->throwUnexpectedException();
-		}
-
-		return $node;
-	}
-
-
-	/**
-	 * @param  \Closure(FragmentNode): ?Node  $resolver
-	 * @param  ?(\Closure(FragmentNode): void)  $after
-	 */
-	public function parseFragment(\Closure $resolver, ?\Closure $after = null): FragmentNode
-	{
-		$res = new FragmentNode;
-		$save = [$this->lastResolver, $this->tag];
-		$this->lastResolver = $resolver;
-		try {
-			while (!$this->stream->peek()->isEnd()) {
-				if ($node = $resolver($res)) {
-					assert($node instanceof Nodes\AreaNode);
-					$res->append($node);
-					$after && $after($res);
-				} else {
-					break;
-				}
-			}
-
-			return $res;
-		} finally {
-			[$this->lastResolver, $this->tag] = $save;
-		}
-	}
-
-
-	/**
-	 * Resolves the next node in plain text context (text, indentation, Latte tag, or comment).
-	 */
-	public function inTextResolve(): ?Node
-	{
-		$token = $this->stream->peek();
-		return match ($token->type) {
-			Token::Text => $this->parseText(),
-			Token::Indentation => $this->parseIndentation(),
-			Token::Newline => $this->parseNewline(),
-			Token::Latte_TagOpen => $this->parseLatteStatement(),
-			Token::Latte_CommentOpen => $this->parseLatteComment(),
-			default => null,
-		};
-	}
-
-
-	/**
-	 * Consumes a text token and returns a TextNode.
-	 */
-	public function parseText(): Nodes\TextNode
-	{
-		$token = $this->stream->consume(Token::Text, Token::Html_Name);
-		$this->inHead = $this->inHead && trim($token->text) === '';
-		$this->lastIndentation = null;
-		return new Nodes\TextNode($token->text, $token->position);
-	}
-
-
-	private function parseIndentation(): Nodes\TextNode
-	{
-		$token = $this->stream->consume(Token::Indentation);
-		return $this->lastIndentation = new Nodes\TextNode($token->text, $token->position);
-	}
-
-
-	private function parseNewline(): Nodes\AreaNode
-	{
-		$token = $this->stream->consume(Token::Newline);
-		if ($this->lastIndentation) { // drop indentation & newline
-			$this->lastIndentation->content = '';
-			$this->lastIndentation = null;
-			return new Nodes\NopNode;
-		} else {
-			return new Nodes\TextNode($token->text, $token->position);
-		}
-	}
-
-
-	/**
-	 * Consumes a Latte comment and returns a NopNode.
-	 */
-	public function parseLatteComment(): Nodes\NopNode
-	{
-		if (str_ends_with($this->stream->tryPeek(-1)->text ?? "\n", "\n")) {
-			$this->lastIndentation ??= new Nodes\TextNode('');
-		}
-		$openToken = $this->stream->consume(Token::Latte_CommentOpen);
-		$this->lexer->pushState(TemplateLexer::StateLatteComment);
-		$this->stream->consume(Token::Text);
-		$this->stream->tryConsume(Token::Latte_CommentClose) || $this->stream->throwUnexpectedException([Token::Latte_CommentClose], addendum: " started $openToken->position");
-		$this->lexer->popState();
-		return new Nodes\NopNode;
-	}
-
-
-	public function parseLatteStatement(?\Closure $resolver = null): ?Node
-	{
-		$this->lexer->pushState(TemplateLexer::StateLatteTag);
-		if ($this->stream->peek(1)->is(Token::Slash)
-			|| (isset($this->tag, $this->lookFor[$this->tag]) && in_array($this->stream->peek(1)->text, $this->lookFor[$this->tag], strict: true))
-		) {
-			$this->lexer->popState();
-			return null; // go back to previous parseLatteStatement()
-		}
-		$this->lexer->popState();
-
-		$token = $this->stream->peek();
-		$startTag = $this->pushTag($this->parseLatteTag());
-		$tagRanges = [$startTag->position];
-
-		$parser = $this->getTagParser($startTag->name, $token->position);
-		$res = $parser($startTag, $this);
-		if ($res instanceof \Generator) {
-			if (!$res->valid() && !$startTag->void) {
-				throw new \LogicException("Incorrect behavior of {{$startTag->name}} parser, yield call is expected (on line {$startTag->position->line})");
-			}
-
-			$this->ensureIsConsumed($startTag);
-			if ($startTag->outputMode === $startTag::OutputKeepIndentation) {
-				$this->lastIndentation = null;
-			}
-
-			if ($startTag->void) {
-				$res->send([new FragmentNode, $startTag]);
-			} else {
-				while ($res->valid()) {
-					$this->lookFor[$startTag] = $res->current() ?: null;
-					$content = $this->parseFragment($resolver ?? $this->lastResolver);
-					if ($this->dedent) {
-						Dedent::apply($content, $startTag);
-					}
-
-					if (!$this->stream->is(Token::Latte_TagOpen)) {
-						$this->checkEndTag($startTag, null);
-						$res->send([$content, null]);
-						break;
-					}
-
-					$tag = $this->parseLatteTag();
-
-					if ($startTag->outputMode === $startTag::OutputKeepIndentation) {
-						$this->lastIndentation = null;
-					}
-
-					if ($tag->closing) {
-						$this->checkEndTag($startTag, $tag);
-						$tagRanges[] = $tag->position;
-						$res->send([$content, $tag]);
-						$this->ensureIsConsumed($tag);
-						break;
-					} elseif (in_array($tag->name, $this->lookFor[$startTag] ?? [], strict: true)) {
-						$tagRanges[] = $tag->position;
-						$this->pushTag($tag);
-						$res->send([$content, $tag]);
-						$this->ensureIsConsumed($tag);
-						$this->popTag();
-					} else {
-						throw new CompileException('Unexpected tag ' . substr($tag->getNotation(withArgs: true), 0, -1) . '}', $tag->position);
-					}
-				}
-			}
-
-			if ($res->valid()) {
-				throw new \LogicException("Incorrect behavior of {{$startTag->name}} parser, more yield calls than expected (on line {$startTag->position->line})");
-			}
-
-			$node = $res->getReturn();
-
-		} elseif ($startTag->void) {
-			throw new CompileException('Unexpected /} in tag ' . substr($startTag->getNotation(withArgs: true), 0, -1) . '/}', $startTag->position);
-
-		} else {
-			$this->ensureIsConsumed($startTag);
-			$node = $res;
-			if ($startTag->outputMode === $startTag::OutputKeepIndentation) {
-				$this->lastIndentation = null;
-			}
-		}
-
-		if (!$node instanceof Node) {
-			throw new \LogicException("Incorrect behavior of {{$startTag->name}} parser, unexpected returned value (on line {$startTag->position->line})");
-		}
-
-		$this->inHead = $this->inHead && $startTag->outputMode === $startTag::OutputNone;
-
-		$this->popTag();
-
-		$node->position = isset($tag) && $tag->closing
-			? Range::span($startTag->position, $tag->position)
-			: $startTag->position;
-
-		if ($node instanceof Nodes\StatementNode) {
-			$node->tagRanges = $tagRanges;
-		}
-
-		return $node;
-	}
-
-
-	private function parseLatteTag(): Tag
-	{
-		$stream = $this->stream;
-		if (str_ends_with($stream->tryPeek(-1)->text ?? "\n", "\n")) {
-			$this->lastIndentation ??= new Nodes\TextNode('');
-		}
-
-		$inTag = in_array($this->lexer->getState(), [TemplateLexer::StateHtmlTag, TemplateLexer::StateHtmlQuotedValue, TemplateLexer::StateHtmlComment, TemplateLexer::StateHtmlBogus], strict: true);
-		$openToken = $stream->consume(Token::Latte_TagOpen);
-		$this->lexer->pushState(TemplateLexer::StateLatteTag);
-		$closing = (bool) $stream->tryConsume(Token::Slash);
-		$nameToken = $stream->tryConsume(Token::Latte_Name);
-		$tokens = $this->consumeTag();
-		$void = (bool) $stream->tryConsume(Token::Slash);
-		$closeToken = $stream->tryConsume(Token::Latte_TagClose) ?? $stream->throwUnexpectedException([Token::Latte_TagClose], addendum: " started $openToken->position");
-		$tag = new Tag(
-			position: Range::span($openToken->position, $closeToken->position),
-			closing: $closing,
-			name: $nameToken ? $nameToken->text : ($closing ? '' : '='),
-			tokens: $tokens,
-			void: $void,
-			inHead: $this->inHead,
-			inTag: $inTag,
-			htmlElement: $this->html->getElement(),
-		);
-		$this->lexer->popState();
-		return $tag;
-	}
-
-
-	/**
-	 * Consumes all PHP tokens of the current tag body and returns them.
-	 * @return Token[]
-	 */
-	public function consumeTag(): array
-	{
-		$res = [];
-		while ($this->stream->peek()->isPhpKind()) {
-			$res[] = $this->stream->consume();
-		}
-
-		$res[] = new Token(Token::End, '', $this->stream->peek()->position);
-		return $res;
-	}
-
-
-	/** @param  array<string, \stdClass|callable(Tag, self): (Node|\Generator|void)>  $parsers */
-	public function addTags(array $parsers): static
-	{
-		foreach ($parsers as $name => $info) {
-			$info = $info instanceof \stdClass ? $info : Latte\Extension::order($info);
-			if (str_starts_with($name, TemplateLexer::NPrefix)) {
-				$this->attrParsersInfo[substr($name, 2)] = $info;
-			} else {
-				$this->tagParsers[$name] = $info->subject;
-				if ($info->generator = Helpers::toReflection($info->subject)->isGenerator()) {
-					$this->attrParsersInfo[$name] = $info;
-				}
-			}
-		}
-
-		return $this;
-	}
-
-
-	/** @return \Closure(Tag, self): (Node|\Generator|void) */
-	private function getTagParser(string $name, Position $pos): \Closure
-	{
-		if (!isset($this->tagParsers[$name])) {
-			$hint = ($t = Helpers::getSuggestion(array_keys($this->tagParsers), $name))
-				? ", did you mean {{$t}}?"
-				: '';
-			if ($this->html->getElement()?->isRawText()) {
-				$hint .= ' (in JavaScript or CSS, try to put a space after bracket or use n:syntax=off)';
-			}
-			throw new CompileException("Unexpected tag {{$name}}$hint", $pos);
-		} elseif (!$this->isTagAllowed($name)) {
-			throw new SecurityViolationException("Tag {{$name}} is not allowed", $pos);
-		}
-
-		return $this->tagParsers[$name];
-	}
-
-
-	/** @return array<string, \Closure(Tag, self): (Node|\Generator|void)> */
-	private function completeAttrParsers(): array
-	{
-		$list = Helpers::sortBeforeAfter($this->attrParsersInfo);
-		$parsers = [];
-		foreach ($list as $name => $info) {
-			$parsers[$name] = $info->subject;
-			if ($info->generator ?? false) {
-				$parsers[Tag::PrefixInner . '-' . $name] = $parsers[Tag::PrefixTag . '-' . $name] = $parsers[$name];
-			}
-		}
-
-		return $parsers;
-	}
-
-
-	private function checkEndTag(Tag $start, ?Tag $end): void
-	{
-		if (!$end) {
-			if ($start->name !== 'syntax' && ($start->name !== 'block' || $this->tag->parent)) { // TODO: hardcoded
-				$this->stream->throwUnexpectedException(expected: ["{/$start->name}"]);
-			}
-
-		} elseif (
-			($end->name !== $start->name && $end->name !== '')
-			|| !$end->closing
-			|| $end->void
-		) {
-			throw new CompileException("Unexpected {$end->getNotation()}, expecting {/$start->name}", $end->position);
-		}
-	}
-
-
-	/**
-	 * Throws if the tag parser has not consumed all tokens.
-	 */
-	public function ensureIsConsumed(Tag $tag): void
-	{
-		if (!$tag->parser->isEnd()) {
-			$end = $tag->isNAttribute() ? ['end of attribute'] : ['end of tag'];
-			$tag->parser->stream->throwUnexpectedException($end, addendum: ' in ' . $tag->getNotation());
-		}
-	}
-
-
-	/**
-	 * Validates that the block name is valid and not already declared, then registers it.
-	 */
-	public function checkBlockIsUnique(Block $block): void
-	{
-		if ($block->isDynamic() || !preg_match('#^[a-z]#iD', $name = (string) $block->name->value)) {
-			throw new CompileException(ucfirst($block->tag->name) . " name must start with letter a-z, '$name' given.", $block->tag->position);
-		}
-
-		if ($block->layer === Template::LayerSnippet
-			? isset($this->blocks[$block->layer][$name])
-			: (isset($this->blocks[Template::LayerLocal][$name]) || isset($this->blocks[$this->blockLayer][$name]))
-		) {
-			throw new CompileException("Cannot redeclare {$block->tag->name} '{$name}'", $block->tag->position);
-		}
-
-		$this->blocks[$block->layer][$name] = $block;
-	}
-
-
-	public function setPolicy(?Policy $policy): static
-	{
-		$this->policy = $policy;
-		return $this;
-	}
-
-
-	public function setContentType(string $type): static
-	{
-		$this->contentType = $type;
-		$this->lexer->setState($type === ContentType::Html || $type === ContentType::Xml
-			? TemplateLexer::StateHtmlText
-			: TemplateLexer::StatePlain);
-		return $this;
-	}
-
-
-	public function getContentType(): string
-	{
-		return $this->contentType;
-	}
-
-
-	/** @internal */
-	public function getStream(): TokenStream
-	{
-		return $this->stream;
-	}
-
-
-	public function getLexer(): TemplateLexer
-	{
-		return $this->lexer;
-	}
-
-
-	/**
-	 * Returns the currently parsed tag, or null if no tag is being parsed.
-	 */
-	public function peekTag(): ?Tag
-	{
-		return $this->tag;
-	}
-
-
-	public function pushTag(Tag $tag): Tag
-	{
-		$tag->parent = $this->tag;
-		$this->tag = $tag;
-		return $tag;
-	}
-
-
-	public function popTag(): void
-	{
-		$this->tag = $this->tag->parent;
-	}
-
-
-	/**
-	 * Generates a unique integer ID for use in compiled output.
-	 */
-	public function generateId(): int
-	{
-		return $this->counter++;
-	}
-
-
-	public function isTagAllowed(string $name): bool
-	{
-		return !$this->policy || $this->policy->isTagAllowed($name);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateParserHtml.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateParserHtml.php
deleted file mode 100644
index 59459c0..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/TemplateParserHtml.php
+++ /dev/null
@@ -1,631 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte;
-use Latte\CompileException;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\FragmentNode;
-use Latte\Compiler\Nodes\Html;
-use Latte\ContentType;
-use Latte\Helpers;
-use Latte\SecurityViolationException;
-use function array_keys, array_pop, end, implode, in_array, key, preg_replace, str_starts_with, strlen, substr;
-
-
-/**
- * Template parser extension for HTML.
- */
-final class TemplateParserHtml
-{
-	private ?Html\ElementNode $element = null;
-
-	/** @var array{string, ?Nodes\Php\ExpressionNode, ?Range}|null */
-	private ?array $endName = null;
-
-	/** @var \WeakMap<Html\ElementNode, object{tag: mixed, textualName: string, unclosedTags?: array<string>}> */
-	private \WeakMap $elementData;
-
-
-	public function __construct(
-		private readonly TemplateParser $parser,
-		/** @var array<string, \Closure(Tag, TemplateParser): (Node|\Generator|void)> */
-		private readonly array $attrParsers,
-	) {
-		$this->elementData = new \WeakMap;
-	}
-
-
-	public function getElement(): ?Html\ElementNode
-	{
-		return $this->element;
-	}
-
-
-	public function inTextResolve(): ?Node
-	{
-		$stream = $this->parser->getStream();
-		$token = $stream->peek();
-		return match ($token->type) {
-			Token::Html_TagOpen => $this->parseTag(),
-			Token::Html_CommentOpen => $this->parseComment(),
-			Token::Html_BogusOpen => $this->parseBogusTag(),
-			default => $this->parser->inTextResolve(),
-		};
-	}
-
-
-	public function inTagResolve(FragmentNode $fragment): ?Node
-	{
-		$stream = $this->parser->getStream();
-		$token = $stream->peek();
-		return match ($token->type) {
-			Token::Html_Name => str_starts_with($token->text, TemplateLexer::NPrefix)
-				? $this->parseNAttribute()
-				: $this->parseAttribute($fragment),
-			Token::Latte_TagOpen => $this->parseAttribute($fragment),
-			Token::Whitespace => $this->parseAttributeWhitespace(),
-			Token::Html_TagClose => null,
-			default => $this->parser->inTextResolve(),
-		};
-	}
-
-
-	private function parseTag(): ?Node
-	{
-		$stream = $this->parser->getStream();
-		$lexer = $this->parser->getLexer();
-		$lexer->pushState(TemplateLexer::StateHtmlTag);
-		$closing = $stream->tryPeek(1)?->is(Token::Slash);
-		$lexer->popState();
-		if (!$closing) {
-			return $this->parseElement();
-		}
-
-		if ($this->element
-			&& $this->parser->peekTag() === $this->elementData[$this->element]->tag // is directly in the element
-		) {
-			$save = $stream->getIndex();
-			$this->endName = [$endText] = $this->parseEndTag();
-			if ($this->element->is($endText) || $this->elementData[$this->element]->textualName === $endText) {
-				return null; // go to parseElement() one level up to close the element
-			}
-			$stream->seek($save);
-			if (!in_array($endText, $this->elementData[$this->element]->unclosedTags ?? [], strict: true)) {
-				return null; // go to parseElement() one level up to collapse
-			}
-		}
-
-		if ($this->parser->strict) {
-			$stream->throwUnexpectedException(excerpt: '/');
-		}
-		return $this->parseBogusEndTag();
-	}
-
-
-	private function parseElement(): Node
-	{
-		$res = new FragmentNode;
-		$res->append($this->extractIndentation());
-		$res->append($this->parseStartTag($this->element));
-		$elem = $this->element;
-
-		$stream = $this->parser->getStream();
-		$void = $this->resolveVoidness($elem);
-		$attrs = $this->prepareNAttrs($elem->nAttributes, $void);
-		$outerNodes = $this->openNAttrNodes($attrs[Tag::PrefixNone] ?? []);
-		$tagNodes = $this->openNAttrNodes($attrs[Tag::PrefixTag] ?? []);
-		if ($tagNodes) {
-			$elem->dynamicTag = $this->finishNAttrNodes($elem->dynamicTag ?? new Nodes\Html\TagNode($elem), $tagNodes);
-		}
-
-		if (!$void) {
-			if ($elem->isRawText()) {
-				$this->parser->getLexer()->pushState(TemplateLexer::StateHtmlRawText, $elem->name);
-			}
-			$content = new FragmentNode;
-			if ($token = $stream->tryConsume(Token::Newline)) {
-				$content->append(new Nodes\TextNode($token->text, $token->position));
-			}
-
-			$innerNodes = $this->openNAttrNodes($attrs[Tag::PrefixInner] ?? []);
-			$this->elementData[$elem]->tag = $this->parser->peekTag();
-			$frag = $this->parser->parseFragment($this->inTextResolve(...));
-			$content->append($this->finishNAttrNodes($frag, $innerNodes));
-			if ($elem->isRawText()) {
-				$this->parser->getLexer()->popState();
-			}
-
-			[$endText, $endVariable, $endRange] = $this->endName ?? [null, null, null];
-			$this->endName = null;
-			if ($endText && ($this->element->is($endText) || $this->elementData[$this->element]->textualName === $endText)) {
-				$elem->content = $content;
-				$elem->content->append($this->extractIndentation());
-				$elem->position = Range::span($elem->position, $endRange);
-
-			} elseif ($outerNodes || $innerNodes
-				|| $elem->dynamicTag
-				|| $this->parser->strict
-				|| $endVariable
-				|| $elem->isRawText()
-			) {
-				$stream->throwUnexpectedException(
-					addendum: ", expecting </{$this->elementData[$elem]->textualName}> for element started $elem->position",
-					excerpt: $endText ? "/{$endText}>" : ($stream->tryPeek(1)->text ?? '') . ($stream->tryPeek(2)->text ?? ''),
-				);
-			} else { // element collapsed to tags
-				$res->append($content);
-				$this->element = $elem->parent;
-				if ($this->element && !$stream->is(Token::Html_TagOpen)) {
-					$this->elementData[$this->element]->unclosedTags[] = $elem->name;
-				}
-				return $res;
-			}
-		}
-
-		if ($token = $stream->tryConsume(Token::Newline)) {
-			$res->append(new Nodes\TextNode($token->text, $token->position));
-		}
-
-		$res = $this->finishNAttrNodes($res, $outerNodes);
-		$this->element = $elem->parent;
-		return $res;
-	}
-
-
-	private function extractIndentation(): AreaNode
-	{
-		if ($this->parser->lastIndentation) {
-			$dolly = clone $this->parser->lastIndentation;
-			$this->parser->lastIndentation->content = '';
-			return $dolly;
-		} else {
-			return new Nodes\NopNode;
-		}
-	}
-
-
-	/** @param-out Html\ElementNode $elem */
-	private function parseStartTag(&$elem = null): Html\ElementNode
-	{
-		$stream = $this->parser->getStream();
-		$lexer = $this->parser->getLexer();
-		$openToken = $stream->consume(Token::Html_TagOpen);
-		$lexer->pushState(TemplateLexer::StateHtmlTag);
-
-		[$textual, $variable] = $this->parseTagName($this->parser->strict);
-		if (($this->parser->strict || $variable)
-			&& !$stream->is(Token::Whitespace, Token::Slash, Token::Html_TagClose)
-		) {
-			throw $stream->throwUnexpectedException();
-		}
-
-		$this->parser->lastIndentation = null;
-		$this->parser->inHead = false;
-		$elem = new Html\ElementNode(
-			name: $variable ? '' : $textual,
-			position: $openToken->position,
-			parent: $this->element,
-			contentType: $this->parser->getContentType(),
-		);
-		$this->elementData[$elem] = (object) [
-			'tag' => $this->parser->peekTag(),
-			'textualName' => $textual,
-		];
-		$elem->attributes = $this->parser->parseFragment($this->inTagResolve(...));
-		$elem->selfClosing = (bool) $stream->tryConsume(Token::Slash);
-		if ($variable) {
-			$elem->dynamicTag = new Nodes\Html\TagNode($elem, $variable);
-		}
-		$elem->position = Range::span($openToken->position, $stream->consume(Token::Html_TagClose)->position);
-		$lexer->popState();
-		return $elem;
-	}
-
-
-	/** @return array{string, ?Nodes\Php\ExpressionNode, ?Range} */
-	private function parseEndTag(): array
-	{
-		$stream = $this->parser->getStream();
-		$lexer = $this->parser->getLexer();
-		$stream->consume(Token::Html_TagOpen);
-		$lexer->pushState(TemplateLexer::StateHtmlTag);
-		$stream->consume(Token::Slash);
-		if (isset($this->element->nAttributes['syntax'])) {  // hardcoded
-			$lexer->popSyntax();
-		}
-		[$text, $variable] = $this->parseTagName();
-		$stream->tryConsume(Token::Whitespace);
-		$closeToken = $stream->consume(Token::Html_TagClose);
-		$lexer->popState();
-		return [$text, $variable, $closeToken->position];
-	}
-
-
-	/** @return array{string, ?Nodes\Php\ExpressionNode} */
-	private function parseTagName(bool $strict = true): array
-	{
-		$variable = null;
-		$text = '';
-		$parts = [];
-		$stream = $this->parser->getStream();
-		do {
-			if ($stream->is(Token::Latte_TagOpen)) {
-				$save = $stream->getIndex();
-				$statement = $this->parser->parseLatteStatement($this->inTagResolve(...));
-				if (!$statement instanceof Nodes\PrintNode) {
-					if (!$parts || $strict) {
-						throw new CompileException('Only expression can be used as a HTML tag name.', $statement?->position);
-					}
-					$stream->seek($save);
-					break;
-				}
-				$parts[] = $statement->expression;
-				$save -= $stream->getIndex();
-				while ($save < 0) {
-					$text .= $stream->peek($save++)->text;
-				}
-				$variable = true;
-
-			} elseif ($token = $stream->tryConsume(Token::Html_Name)) {
-				$parts[] = new Latte\Compiler\Nodes\Php\Scalar\StringNode($token->text, $token->position);
-				$text .= $token->text;
-
-			} elseif (!$parts) {
-				throw $stream->throwUnexpectedException([Token::Html_Name, Token::Latte_TagOpen]);
-			} else {
-				break;
-			}
-		} while (true);
-
-		$variable = $variable
-			? Latte\Compiler\Nodes\Php\Expression\BinaryOpNode::nest('.', ...$parts)
-			: null;
-		return [$text, $variable];
-	}
-
-
-	private function parseBogusEndTag(): Html\BogusTagNode
-	{
-		$stream = $this->parser->getStream();
-		$lexer = $this->parser->getLexer();
-		$openToken = $stream->consume(Token::Html_TagOpen);
-		$lexer->pushState(TemplateLexer::StateHtmlTag);
-		$this->parser->lastIndentation = null;
-		$this->parser->inHead = false;
-		$openDelimiter = $openToken->text . $stream->consume(Token::Slash)->text . $stream->consume(Token::Html_Name)->text;
-		$wsToken = $stream->tryConsume(Token::Whitespace);
-		$closeToken = $stream->consume(Token::Html_TagClose);
-		$node = new Html\BogusTagNode(
-			openDelimiter: $openDelimiter,
-			content: new Nodes\TextNode($wsToken->text ?? '', $wsToken?->position),
-			endDelimiter: $closeToken->text,
-			position: Range::span($openToken->position, $closeToken->position),
-		);
-		$lexer->popState();
-		return $node;
-	}
-
-
-	private function parseBogusTag(): Html\BogusTagNode
-	{
-		$stream = $this->parser->getStream();
-		$lexer = $this->parser->getLexer();
-		$openToken = $stream->consume(Token::Html_BogusOpen);
-		$lexer->pushState(TemplateLexer::StateHtmlBogus);
-		$this->parser->lastIndentation = null;
-		$this->parser->inHead = false;
-		$content = $this->parser->parseFragment($this->parser->inTextResolve(...));
-		$lexer->popState();
-		$closeToken = $stream->consume(Token::Html_TagClose);
-		return new Html\BogusTagNode(
-			openDelimiter: $openToken->text,
-			content: $content,
-			endDelimiter: $closeToken->text,
-			position: Range::span($openToken->position, $closeToken->position),
-		);
-	}
-
-
-	private function resolveVoidness(Html\ElementNode $elem): bool
-	{
-		if ($elem->contentType !== ContentType::Html) {
-			return $elem->selfClosing;
-		} elseif (Latte\Runtime\HtmlHelpers::isVoidElement($elem->name)) {
-			return true;
-		} elseif ($elem->selfClosing) { // auto-correct
-			$elem->content = new Nodes\NopNode;
-			$elem->selfClosing = false;
-			$last = end($elem->attributes->children);
-			if ($last instanceof Nodes\TextNode && $last->isWhitespace()) {
-				array_pop($elem->attributes->children);
-			}
-			return true;
-		}
-
-		return $elem->selfClosing;
-	}
-
-
-	private function parseAttributeWhitespace(): Node
-	{
-		$stream = $this->parser->getStream();
-		$token = $stream->consume(Token::Whitespace);
-		return $stream->is(Token::Html_Name) && str_starts_with($stream->peek()->text, TemplateLexer::NPrefix)
-			? new Nodes\NopNode
-			: new Nodes\TextNode($token->text, $token->position);
-	}
-
-
-	private function parseAttribute(FragmentNode $fragment): ?Node
-	{
-		$stream = $this->parser->getStream();
-		if ($stream->is(Token::Latte_TagOpen)) {
-			$name = $this->parser->parseLatteStatement();
-			if (!$name instanceof Nodes\PrintNode) {
-				return $name; // value like '<span {if true}attr1=val{/if}>'
-			}
-		} else {
-			$name = $this->parser->parseText();
-		}
-
-		[$value, $quote] = $this->parseAttributeValue() ?? [null, null];
-		$range = Range::span($name->position, $this->parser->getStream()->peek(-1)->position);
-		if ($name instanceof Nodes\TextNode && $value instanceof Nodes\PrintNode && $value->modifier->escape) {
-			if (($indent = end($fragment->children)) instanceof Nodes\TextNode && $indent->isWhitespace()) {
-				array_pop($fragment->children);
-			}
-			$value->modifier->escape = false;
-			return new Html\ExpressionAttributeNode(
-				name: $name->content,
-				value: $value->expression,
-				modifier: $value->modifier,
-				indentation: $indent->content ?? null,
-				position: $range,
-			);
-		}
-
-		return new Html\AttributeNode(
-			name: $name,
-			value: $value,
-			quote: $quote,
-			position: $range,
-		);
-	}
-
-
-	/** @return ?array{AreaNode|Nodes\PrintNode, ?string} */
-	private function parseAttributeValue(): ?array
-	{
-		$stream = $this->parser->getStream();
-		$save = $stream->getIndex();
-		$this->consumeIgnored();
-		if (!$stream->tryConsume(Token::Equals)) {
-			$stream->seek($save);
-			return null;
-		}
-
-		$this->consumeIgnored();
-		if ($quoteToken = $stream->tryConsume(Token::Quote)) {
-			$lexer = $this->parser->getLexer();
-			$lexer->pushState(TemplateLexer::StateHtmlQuotedValue, $quoteToken->text);
-			$value = $this->parser->parseFragment($this->parser->inTextResolve(...))->simplify(allowsNull: false);
-			assert($value !== null);
-			$stream->tryConsume(Token::Quote) || $stream->throwUnexpectedException([$quoteToken->text], addendum: ", end of HTML attribute started $quoteToken->position");
-			$lexer->popState();
-			return [$value, $quoteToken->text];
-		}
-
-		$value = $this->parser->parseFragment(
-			fn() => match ($stream->peek()->type) {
-				Token::Html_Name => $this->parser->parseText(),
-				Token::Latte_TagOpen => $this->parser->parseLatteStatement(),
-				Token::Latte_CommentOpen => $this->parser->parseLatteComment(),
-				default => null,
-			},
-		)->simplify() ?? $stream->throwUnexpectedException();
-		return [$value, null];
-	}
-
-
-	private function parseNAttribute(): Nodes\TextNode
-	{
-		assert($this->element !== null);
-		$elem = $this->element;
-		$stream = $this->parser->getStream();
-		$nameToken = $stream->consume(Token::Html_Name);
-		$save = $stream->getIndex();
-		$pos = $stream->peek()->position;
-		$name = substr($nameToken->text, strlen(TemplateLexer::NPrefix));
-		if ($this->parser->peekTag() !== $this->elementData[$elem]->tag) {
-			throw new CompileException("Attribute n:$name must not appear inside {tags}", $nameToken->position);
-
-		} elseif (isset($elem->nAttributes[$name])) {
-			throw new CompileException("Found multiple attributes n:$name.", $nameToken->position);
-		}
-
-		$this->consumeIgnored();
-		$endToken = $nameToken;
-		if ($stream->tryConsume(Token::Equals)) {
-			$lexer = $this->parser->getLexer();
-			$this->consumeIgnored();
-			if ($quoteToken = $stream->tryConsume(Token::Quote)) {
-				$lexer->pushState(TemplateLexer::StateHtmlQuotedNAttrValue, $quoteToken->text);
-				$valueToken = $stream->tryConsume(Token::Text);
-				$pos = $stream->peek()->position;
-				$endToken = $stream->tryConsume(Token::Quote) ?? $stream->throwUnexpectedException([$quoteToken->text], addendum: ", end of n:attribute started $quoteToken->position");
-				$lexer->popState();
-				$tokens = $valueToken ? (new TagLexer)->tokenize($valueToken->text, $valueToken->position) : null;
-
-			} elseif ($openToken = $stream->tryConsume(Token::Latte_TagOpen)) {
-				$lexer->pushState(TemplateLexer::StateLatteContent);
-				$tokens = $this->parser->consumeTag();
-				$endToken = $stream->tryConsume(Token::Latte_TagClose) ?? $stream->throwUnexpectedException([Token::Latte_TagClose], addendum: " started $openToken->position");
-				$lexer->popState();
-
-			} else {
-				$endToken = $valueToken = $stream->consume(Token::Html_Name);
-				$tokens = (new TagLexer)->tokenize($valueToken->text, $valueToken->position);
-			}
-		} else {
-			$stream->seek($save);
-		}
-		$tokens ??= [new Token(Token::End, '', $pos)];
-
-		$elem->nAttributes[$name] = new Tag(
-			name: preg_replace('~(inner-|tag-|)~', '', $name),
-			tokens: $tokens,
-			position: Range::span($nameToken->position, $endToken->position),
-			prefix: $this->getPrefix($name),
-			inTag: true,
-			htmlElement: $elem,
-			nAttribute: $node = new Nodes\TextNode(''),
-		);
-		return $node;
-	}
-
-
-	private function parseComment(): Html\CommentNode
-	{
-		$lexer = $this->parser->getLexer();
-		$this->parser->lastIndentation = null;
-		$this->parser->inHead = false;
-		$lexer->pushState(TemplateLexer::StateHtmlComment);
-		$stream = $this->parser->getStream();
-		$openToken = $stream->consume(Token::Html_CommentOpen);
-		$node = new Html\CommentNode(
-			position: $openToken->position,
-			content: $this->parser->parseFragment($this->parser->inTextResolve(...)),
-		);
-		$closeToken = $stream->tryConsume(Token::Html_CommentClose) ?? $stream->throwUnexpectedException([Token::Html_CommentClose], addendum: " started $openToken->position");
-		$node->position = Range::span($openToken->position, $closeToken->position);
-		$lexer->popState();
-		return $node;
-	}
-
-
-	private function consumeIgnored(): void
-	{
-		$stream = $this->parser->getStream();
-		$lexer = $this->parser->getLexer();
-		do {
-			if ($stream->tryConsume(Token::Whitespace)) {
-				continue;
-			}
-			if ($stream->tryConsume(Token::Latte_CommentOpen)) {
-				$lexer->pushState(TemplateLexer::StateLatteComment);
-				$stream->consume(Token::Text);
-				$stream->consume(Token::Latte_CommentClose);
-				$lexer->popState();
-				$stream->tryConsume(Token::Newline);
-				continue;
-			}
-			return;
-		} while (true);
-	}
-
-
-	/**
-	 * @param  array<Tag>  $attrs
-	 * @return array<string, list<Tag>>
-	 */
-	private function prepareNAttrs(array $attrs, bool $void): array
-	{
-		$res = [];
-		foreach ($this->attrParsers as $name => $foo) {
-			if ($tag = $attrs[$name] ?? null) {
-				$prefix = $this->getPrefix($name);
-				if (!$prefix || !$void) {
-					$res[$prefix][] = $tag;
-					unset($attrs[$name]);
-				}
-			}
-		}
-
-		if ($attrs) {
-			$hint = Helpers::getSuggestion(array_keys($this->attrParsers), $k = key($attrs));
-			throw new CompileException('Unexpected attribute n:'
-				. ($hint ? "$k, did you mean n:$hint?" : implode(' and n:', array_keys($attrs))), $attrs[$k]->position);
-		}
-
-		return $res;
-	}
-
-
-	/**
-	 * @param  array<Tag>  $toOpen
-	 * @return array<array{\Generator, Tag}>
-	 */
-	private function openNAttrNodes(array $toOpen): array
-	{
-		$toClose = [];
-		foreach ($toOpen as $tag) {
-			$parser = $this->getAttrParser($tag->name, $tag->position);
-			$this->parser->pushTag($tag);
-			$res = $parser($tag, $this->parser);
-			if ($res instanceof \Generator && $res->valid()) {
-				$toClose[] = [$res, $tag];
-
-			} elseif ($res instanceof AreaNode) {
-				$this->parser->ensureIsConsumed($tag);
-				$res->position = $tag->position;
-				$tag->replaceNAttribute($res);
-				$this->parser->popTag();
-
-			} elseif (!$res) {
-				$this->parser->ensureIsConsumed($tag);
-				$this->parser->popTag();
-
-			} else {
-				throw new CompileException("Unexpected value returned by {$tag->getNotation()} parser.", $tag->position);
-			}
-		}
-
-		return $toClose;
-	}
-
-
-	/** @param  array<array{\Generator, Tag}>  $toClose */
-	private function finishNAttrNodes(AreaNode $node, array $toClose): AreaNode
-	{
-		while ([$gen, $tag] = array_pop($toClose)) {
-			$gen->send([$node, null]);
-			$node = $gen->getReturn();
-			$node->position = $tag->position;
-			$this->parser->popTag();
-			$this->parser->ensureIsConsumed($tag);
-		}
-
-		return $node;
-	}
-
-
-	/** @return \Closure(Tag, TemplateParser): (Node|\Generator|void) */
-	private function getAttrParser(string $name, Position $pos): \Closure
-	{
-		if (!isset($this->attrParsers[$name])) {
-			$hint = ($t = Helpers::getSuggestion(array_keys($this->attrParsers), $name))
-				? ", did you mean n:$t?"
-				: '';
-			throw new CompileException("Unknown n:{$name}{$hint}", $pos);
-		} elseif (!$this->parser->isTagAllowed($name)) {
-			throw new SecurityViolationException("Attribute n:$name is not allowed", $pos);
-		}
-		return $this->attrParsers[$name];
-	}
-
-
-	private function getPrefix(string $name): string
-	{
-		return match (true) {
-			str_starts_with($name, 'inner-') => Tag::PrefixInner,
-			str_starts_with($name, 'tag-') => Tag::PrefixTag,
-			default => Tag::PrefixNone,
-		};
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/Token.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/Token.php
deleted file mode 100644
index 6d5262d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/Token.php
+++ /dev/null
@@ -1,270 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use function in_array;
-
-
-/**
- * Token produced by lexers.
- */
-final readonly class Token
-{
-	public const
-		End = 0,
-		Text = 10000,
-		Whitespace = 10002,
-		Newline = 10003,
-		Indentation = 10004,
-		Slash = 10005,
-		Equals = 10006,
-		Quote = 10007; // single or double quote
-
-	public const
-		Latte_TagOpen = 10010,
-		Latte_TagClose = 10011,
-		Latte_Name = 10012,
-		Latte_CommentOpen = 10014,
-		Latte_CommentClose = 10015;
-
-	public const
-		Html_TagOpen = 10020,
-		Html_TagClose = 10021,
-		Html_CommentOpen = 10022,
-		Html_CommentClose = 10023,
-		Html_BogusOpen = 10024,
-		Html_Name = 10025;
-
-	public const
-		Php_LogicalOr = 257,
-		Php_LogicalXor = 258,
-		Php_LogicalAnd = 259,
-		Php_DoubleArrow = 260,
-		Php_PlusEqual = 261,
-		Php_MinusEqual = 262,
-		Php_MulEqual = 263,
-		Php_DivEqual = 264,
-		Php_ConcatEqual = 265,
-		Php_ModEqual = 266,
-		Php_AndEqual = 267,
-		Php_OrEqual = 268,
-		Php_XorEqual = 269,
-		Php_SlEqual = 270,
-		Php_SrEqual = 271,
-		Php_PowEqual = 272,
-		Php_CoalesceEqual = 273,
-		Php_Coalesce = 274,
-		Php_BooleanOr = 275,
-		Php_BooleanAnd = 276,
-		Php_FilterPipe = 277,
-		Php_NullsafePipe = 278,
-		Php_AmpersandNotFollowed = 279,
-		Php_AmpersandFollowed = 280,
-		Php_IsEqual = 281,
-		Php_IsNotEqual = 282,
-		Php_IsIdentical = 283,
-		Php_IsNotIdentical = 284,
-		Php_Spaceship = 285,
-		Php_IsSmallerOrEqual = 286,
-		Php_IsGreaterOrEqual = 287,
-		Php_Pipe = 288,
-		Php_Sl = 289,
-		Php_Sr = 290,
-		Php_In = 291,
-		Php_Instanceof = 292,
-		Php_Inc = 293,
-		Php_Dec = 294,
-		Php_IntCast = 295,
-		Php_FloatCast = 296,
-		Php_StringCast = 297,
-		Php_ArrayCast = 298,
-		Php_ObjectCast = 299,
-		Php_BoolCast = 300,
-		Php_Pow = 301,
-		Php_New = 302,
-		Php_Clone = 303,
-		Php_Integer = 304,
-		Php_Float = 305,
-		Php_Identifier = 306,
-		Php_StringVarname = 307,
-		Php_Constant = 308,
-		Php_Variable = 309,
-		Php_NumString = 310,
-		Php_EncapsedAndWhitespace = 311,
-		Php_ConstantEncapsedString = 312,
-		Php_Match = 313,
-		Php_Default = 314,
-		Php_Function = 315,
-		Php_Fn = 316,
-		Php_Return = 317,
-		Php_Use = 318,
-		Php_Isset = 319,
-		Php_Empty = 320,
-		Php_ObjectOperator = 321,
-		Php_NullsafeObjectOperator = 322,
-		Php_UndefinedsafeObjectOperator = 323,
-		Php_List = 324,
-		Php_Array = 325,
-		Php_StartHeredoc = 326,
-		Php_EndHeredoc = 327,
-		Php_DollarOpenCurlyBraces = 328,
-		Php_CurlyOpen = 329,
-		Php_PaamayimNekudotayim = 330,
-		Php_NsSeparator = 331,
-		Php_Ellipsis = 332,
-		Php_ExpandCast = 333,
-		Php_NameFullyQualified = 334,
-		Php_NameQualified = 335,
-		Php_Whitespace = 336,
-		Php_Comment = 337,
-		Php_Null = 338,
-		Php_True = 339,
-		Php_False = 340;
-
-	public const Names = [
-		self::End => '[EOF]',
-		self::Text => 'text',
-		self::Whitespace => 'whitespace',
-		self::Newline => 'newline',
-		self::Indentation => 'indentation',
-		self::Slash => "'/'",
-		self::Equals => "'='",
-		self::Quote => 'quote',
-
-		self::Latte_TagOpen => 'Latte tag',
-		self::Latte_TagClose => 'end of Latte tag',
-		self::Latte_Name => 'tag name',
-		self::Latte_CommentOpen => 'Latte comment',
-		self::Latte_CommentClose => 'end of Latte comment',
-
-		self::Html_TagOpen => 'HTML tag',
-		self::Html_TagClose => 'end of HTML tag',
-		self::Html_CommentOpen => 'HTML comment',
-		self::Html_CommentClose => 'end of HTML comment',
-		self::Html_BogusOpen => 'HTML bogus tag',
-		self::Html_Name => 'HTML name',
-
-		self::Php_LogicalOr => "'or'",
-		self::Php_LogicalXor => "'xor'",
-		self::Php_LogicalAnd => "'and'",
-		self::Php_DoubleArrow => "'=>'",
-		self::Php_PlusEqual => "'+='",
-		self::Php_MinusEqual => "'-='",
-		self::Php_MulEqual => "'*='",
-		self::Php_DivEqual => "'/='",
-		self::Php_ConcatEqual => "'.='",
-		self::Php_ModEqual => "'%='",
-		self::Php_AndEqual => "'&='",
-		self::Php_OrEqual => "'|='",
-		self::Php_XorEqual => "'^='",
-		self::Php_SlEqual => "'<<='",
-		self::Php_SrEqual => "'>>='",
-		self::Php_PowEqual => "'**='",
-		self::Php_CoalesceEqual => "'??='",
-		self::Php_Coalesce => "'??'",
-		self::Php_BooleanOr => "'||'",
-		self::Php_BooleanAnd => "'&&'",
-		self::Php_FilterPipe => "'|'",
-		self::Php_NullsafePipe => "'?|",
-		self::Php_AmpersandNotFollowed => "'&'",
-		self::Php_AmpersandFollowed => "'&'",
-		self::Php_IsEqual => "'=='",
-		self::Php_IsNotEqual => "'!='",
-		self::Php_IsIdentical => "'==='",
-		self::Php_IsNotIdentical => "'!=='",
-		self::Php_Spaceship => "'<=>'",
-		self::Php_IsSmallerOrEqual => "'<='",
-		self::Php_IsGreaterOrEqual => "'>='",
-		self::Php_Pipe => "'|>'",
-		self::Php_Sl => "'<<'",
-		self::Php_Sr => "'>>'",
-		self::Php_In => "'in'",
-		self::Php_Instanceof => "'instanceof'",
-		self::Php_Inc => "'++'",
-		self::Php_Dec => "'--'",
-		self::Php_IntCast => "'(int)'",
-		self::Php_FloatCast => "'(float)'",
-		self::Php_StringCast => "'(string)'",
-		self::Php_ArrayCast => "'(array)'",
-		self::Php_ObjectCast => "'(object)'",
-		self::Php_BoolCast => "'(bool)'",
-		self::Php_Pow => "'**'",
-		self::Php_New => "'new'",
-		self::Php_Clone => "'clone'",
-		self::Php_Integer => 'integer',
-		self::Php_Float => 'floating-point number',
-		self::Php_Identifier => 'identifier',
-		self::Php_StringVarname => 'variable name',
-		self::Php_Constant => 'constant',
-		self::Php_Variable => 'variable',
-		self::Php_NumString => 'number',
-		self::Php_EncapsedAndWhitespace => 'string content',
-		self::Php_ConstantEncapsedString => 'quoted string',
-		self::Php_Match => "'match'",
-		self::Php_Default => "'default'",
-		self::Php_Function => "'function'",
-		self::Php_Fn => "'fn'",
-		self::Php_Return => "'return'",
-		self::Php_Use => "'use'",
-		self::Php_Isset => "'isset'",
-		self::Php_Empty => "'empty'",
-		self::Php_ObjectOperator => "'->'",
-		self::Php_NullsafeObjectOperator => "'?->'",
-		self::Php_UndefinedsafeObjectOperator => "'??->'",
-		self::Php_List => "'list'",
-		self::Php_Array => "'array'",
-		self::Php_StartHeredoc => 'heredoc start',
-		self::Php_EndHeredoc => 'heredoc end',
-		self::Php_DollarOpenCurlyBraces => "'\${'",
-		self::Php_CurlyOpen => "'{\$'",
-		self::Php_PaamayimNekudotayim => "'::'",
-		self::Php_NsSeparator => "'\\'",
-		self::Php_Ellipsis => "'...'",
-		self::Php_ExpandCast => "'(expand)'",
-		self::Php_NameFullyQualified => 'fully qualified name',
-		self::Php_NameQualified => 'namespaced name',
-		self::Php_Whitespace => 'whitespace',
-		self::Php_Comment => 'comment',
-		self::Php_Null => "'null'",
-		self::Php_True => "'true'",
-		self::Php_False => "'false'",
-	];
-
-	public ?Range $position;
-
-
-	public function __construct(
-		public int $type,
-		public string $text,
-		?Position $position = null,
-	) {
-		$this->position = $position ? new Range($position->line, $position->column, $position->offset, strlen($text)) : null;
-	}
-
-
-	public function is(int|string ...$kind): bool
-	{
-		return in_array($this->type, $kind, strict: true)
-			|| in_array($this->text, $kind, strict: true);
-	}
-
-
-	public function isEnd(): bool
-	{
-		return $this->type === self::End;
-	}
-
-
-	/**
-	 * Checks whether the token is a PHP expression token (not a structural delimiter).
-	 */
-	public function isPhpKind(): bool
-	{
-		return $this->type > 0 && $this->type < 10000;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Compiler/TokenStream.php b/generated/php/vendor/latte/latte/src/Latte/Compiler/TokenStream.php
deleted file mode 100644
index c2edf52..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Compiler/TokenStream.php
+++ /dev/null
@@ -1,141 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Compiler;
-
-use Latte\CompileException;
-use function array_map, count, implode, is_int, is_string, trim;
-
-
-/**
- * Lazy token buffer over an iterator with random-access peek and consume operations.
- */
-final class TokenStream
-{
-	/** @var Token[] */
-	private array $tokens = [];
-	private int $index = 0;
-
-
-	public function __construct(
-		private readonly \Iterator $source,
-	) {
-	}
-
-
-	/**
-	 * Tells whether the token at current position is of given kind.
-	 */
-	public function is(int|string ...$kind): bool
-	{
-		return $this->peek()->is(...$kind);
-	}
-
-
-	/**
-	 * Gets the token at $offset from the current position or throws.
-	 */
-	public function peek(int $offset = 0): Token
-	{
-		return $this->tryPeek($offset) ?? throw new CompileException('Unexpected end');
-	}
-
-
-	/**
-	 * Gets the token at $offset from the current position.
-	 */
-	public function tryPeek(int $offset = 0): ?Token
-	{
-		$pos = $this->index + $offset;
-		while ($pos >= 0 && !isset($this->tokens[$pos]) && $this->source->valid()) {
-			if ($this->tokens) {
-				$this->source->next();
-			}
-
-			if ($this->source->valid()) {
-				$this->tokens[] = $this->source->current();
-			}
-		}
-
-		return $this->tokens[$pos] ?? null;
-	}
-
-
-	/**
-	 * Consumes the current token (if is of given kind) or throws exception on end.
-	 * @throws CompileException
-	 */
-	public function consume(int|string ...$kind): Token
-	{
-		$token = $this->peek();
-		if ($kind && !$token->is(...$kind)) {
-			$kind = array_map(fn($item) => is_string($item) ? "'$item'" : Token::Names[$item], $kind);
-			$this->throwUnexpectedException($kind);
-		} elseif (!$token->isEnd()) {
-			$this->index++;
-		}
-		return $token;
-	}
-
-
-	/**
-	 * Consumes the current token of given kind or returns null.
-	 */
-	public function tryConsume(int|string ...$kind): ?Token
-	{
-		$token = $this->tryPeek();
-		if (!$token?->is(...$kind)) {
-			return null;
-		} elseif (!$token->isEnd()) {
-			$this->index++;
-		}
-		return $token;
-	}
-
-
-	/**
-	 * Sets the input cursor to the position.
-	 */
-	public function seek(int $index): void
-	{
-		if ($index >= count($this->tokens) || $index < 0) {
-			throw new \InvalidArgumentException('The position is out of range.');
-		}
-		$this->index = $index;
-	}
-
-
-	/**
-	 * Returns the cursor position.
-	 */
-	public function getIndex(): int
-	{
-		return $this->index;
-	}
-
-
-	/**
-	 * @throws CompileException
-	 * @param  array<string|int>  $expected
-	 */
-	public function throwUnexpectedException(array $expected = [], string $addendum = '', string $excerpt = ''): never
-	{
-		$token = ($this->tryPeek()->text ?? '') . $excerpt;
-		$expected = array_map(fn($item) => is_int($item) ? Token::Names[$item] : $item, $expected);
-		throw new CompileException(
-			'Unexpected '
-			. ($token === ''
-				? 'end'
-				: "'" . trim($token, "\n") . "'")
-			. ($expected && count($expected) < 5
-				? ', expecting ' . implode(', ', $expected)
-				: '')
-			. $addendum,
-			$this->tryPeek()?->position,
-		);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/ContentType.php b/generated/php/vendor/latte/latte/src/Latte/ContentType.php
deleted file mode 100644
index 53e1369..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/ContentType.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte;
-
-
-/**
- * Content type constants for context-aware escaping.
- */
-/*enum*/ final class ContentType
-{
-	public const
-		Text = 'text',
-		Html = 'html',
-		Xml = 'xml',
-		JavaScript = 'js',
-		Css = 'css',
-		ICal = 'ical';
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Engine.php b/generated/php/vendor/latte/latte/src/Latte/Engine.php
deleted file mode 100644
index 792e3c8..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Engine.php
+++ /dev/null
@@ -1,589 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte;
-
-use Latte\Compiler\Nodes\TemplateNode;
-use function array_map, array_merge, class_exists, extension_loaded, get_debug_type, preg_match, serialize, substr;
-
-
-/**
- * Templating engine Latte.
- */
-class Engine
-{
-	public const Version = '3.1.4';
-	public const VersionId = 30104;
-
-	/** @deprecated use Engine::Version */
-	public const
-		VERSION = self::Version,
-		VERSION_ID = self::VersionId;
-
-	#[\Deprecated('use Latte\ContentType::Html')]
-	public const CONTENT_HTML = ContentType::Html;
-
-	#[\Deprecated('use Latte\ContentType::Xml')]
-	public const CONTENT_XML = ContentType::Xml;
-
-	#[\Deprecated('use Latte\ContentType::JavaScript')]
-	public const CONTENT_JS = ContentType::JavaScript;
-
-	#[\Deprecated('use Latte\ContentType::Css')]
-	public const CONTENT_CSS = ContentType::Css;
-
-	#[\Deprecated('use Latte\ContentType::ICal')]
-	public const CONTENT_ICAL = ContentType::ICal;
-
-	#[\Deprecated('use Latte\ContentType::Text')]
-	public const CONTENT_TEXT = ContentType::Text;
-
-	private ?Loader $loader = null;
-	private Runtime\FilterExecutor $filters;
-	private Runtime\FunctionExecutor $functions;
-	private \stdClass $providers;
-
-	/** @var Extension[] */
-	private array $extensions = [];
-	private string $contentType = ContentType::Html;
-	private Runtime\Cache $cache;
-
-	/** @var array<string, bool> */
-	private array $features = [
-		Feature::StrictTypes->name => true,
-	];
-
-	private ?Policy $policy = null;
-	private bool $sandboxed = false;
-	private ?string $phpBinary = null;
-	private ?string $configurationHash;
-	private ?string $locale = null;
-	private ?string $syntax = null;
-
-
-	public function __construct()
-	{
-		$this->cache = new Runtime\Cache;
-		$this->filters = new Runtime\FilterExecutor;
-		$this->functions = new Runtime\FunctionExecutor;
-		$this->providers = new \stdClass;
-		$this->addDefaultExtensions();
-	}
-
-
-	/**
-	 * Renders template to output.
-	 * @param  object|mixed[]  $params
-	 */
-	public function render(string $name, object|array $params = [], ?string $block = null): void
-	{
-		$template = $this->createTemplate($name, Helpers::resolveParams($this, $params));
-		$template->global->coreCaptured = false;
-		$template->render($block);
-	}
-
-
-	/**
-	 * Renders template to string.
-	 * @param  object|mixed[]  $params
-	 */
-	public function renderToString(string $name, object|array $params = [], ?string $block = null): string
-	{
-		$template = $this->createTemplate($name, Helpers::resolveParams($this, $params));
-		$template->global->coreCaptured = true;
-		return $template->capture(fn() => $template->render($block));
-	}
-
-
-	/**
-	 * Creates template object.
-	 * @param  mixed[]  $params
-	 */
-	public function createTemplate(string $name, array $params = [], bool $clearCache = true): Runtime\Template
-	{
-		$this->configurationHash = $clearCache ? null : $this->configurationHash;
-		$class = $this->loadTemplate($name);
-		$this->providers->fn = $this->functions;
-		return new $class(
-			$this,
-			$params,
-			$this->filters,
-			$this->providers,
-			$name,
-		);
-	}
-
-
-	/**
-	 * Compiles template to PHP code.
-	 */
-	public function compile(string $name): string
-	{
-		if ($this->sandboxed && !$this->policy) {
-			throw new \LogicException('In sandboxed mode you need to set a security policy.');
-		}
-
-		$template = $this->getLoader()->getContent($name);
-
-		try {
-			$node = $this->parse($template);
-			$this->applyPasses($node);
-			$compiled = $this->generate($node, $name);
-
-		} catch (\Throwable $e) {
-			if (!$e instanceof CompileException && !$e instanceof SecurityViolationException) {
-				$e = new CompileException("Thrown exception '{$e->getMessage()}'", previous: $e);
-			}
-
-			throw $e->setSource($template, $name);
-		}
-
-		if ($this->phpBinary) {
-			Compiler\PhpHelpers::checkCode($this->phpBinary, $compiled, "(compiled $name)");
-		}
-
-		return $compiled;
-	}
-
-
-	/**
-	 * Parses template to AST node.
-	 */
-	public function parse(string $template): TemplateNode
-	{
-		$parser = new Compiler\TemplateParser;
-		$parser->getLexer()->setSyntax($this->syntax);
-		$parser->strict = $this->hasFeature(Feature::StrictParsing);
-		$parser->dedent = $this->hasFeature(Feature::Dedent);
-
-		foreach ($this->extensions as $extension) {
-			$extension->beforeCompile($this);
-			$parser->addTags($extension->getTags());
-		}
-
-		return $parser
-			->setContentType($this->contentType)
-			->setPolicy($this->getPolicy(effective: true))
-			->parse($template);
-	}
-
-
-	/**
-	 * Runs all registered compiler passes over the AST.
-	 */
-	public function applyPasses(TemplateNode &$node): void
-	{
-		$passes = [];
-		foreach ($this->extensions as $extension) {
-			$passes = array_merge($passes, $extension->getPasses());
-		}
-
-		$passes = Helpers::sortBeforeAfter($passes);
-		foreach ($passes as $pass) {
-			$pass = $pass instanceof \stdClass ? $pass->subject : $pass;
-			($pass)($node);
-		}
-	}
-
-
-	/**
-	 * Generates compiled PHP code.
-	 */
-	public function generate(TemplateNode $node, string $name): string
-	{
-		$generator = new Compiler\TemplateGenerator;
-		$generator->buildClass($node, $this->features);
-		return $generator->generateCode($this->getTemplateClass($name), $name, $this->hasFeature(Feature::StrictTypes));
-	}
-
-
-	/**
-	 * Compiles template to cache.
-	 * @throws \LogicException
-	 */
-	public function warmupCache(string $name): void
-	{
-		if (!$this->cache->directory) {
-			throw new \LogicException('Path to temporary directory is not set.');
-		}
-
-		$this->loadTemplate($name);
-	}
-
-
-	/** @return class-string<Runtime\Template> */
-	private function loadTemplate(string $name): string
-	{
-		$class = $this->getTemplateClass($name);
-		if (class_exists($class, autoload: false)) {
-			// nothing
-		} elseif ($this->cache->directory) {
-			$this->cache->loadOrCreate($this, $name);
-		} else {
-			$compiled = $this->compile($name);
-			if (@eval(substr($compiled, 5)) === false) { // @ is escalated to exception, substr removes <?php
-				throw (new CompileException('Error in template: ' . (error_get_last()['message'] ?? '')))
-					->setSource($compiled, "$name (compiled)");
-			}
-		}
-		return $class;
-	}
-
-
-	/**
-	 * Returns the file path where compiled template will be cached.
-	 */
-	public function getCacheFile(string $name): string
-	{
-		return $this->cache->generateFilePath($this, $name);
-	}
-
-
-	/**
-	 * Returns the PHP class name for compiled template.
-	 */
-	public function getTemplateClass(string $name): string
-	{
-		return 'Template_' . $this->generateTemplateHash($name);
-	}
-
-
-	/**
-	 * Generates unique hash for template based on current configuration.
-	 * Used to create isolated cache files for different engine configurations.
-	 * @internal
-	 */
-	public function generateTemplateHash(string $name): string
-	{
-		$hash = $this->configurationHash ?? hash('xxh128', serialize($this->generateConfigurationSignature()));
-		$hash .= $this->getLoader()->getUniqueId($name);
-		return substr(hash('xxh128', $hash), 0, 10);
-	}
-
-
-	/**
-	 * Returns values that determine isolation for different configurations.
-	 * When any of these values change, a new compiled template is created to avoid conflicts.
-	 * @return list<mixed>
-	 */
-	protected function generateConfigurationSignature(): array
-	{
-		return [
-			$this->contentType,
-			$this->features,
-			$this->syntax,
-			array_map(
-				fn($extension) => [get_debug_type($extension), $extension->getCacheKey($this)],
-				$this->extensions,
-			),
-		];
-	}
-
-
-	/**
-	 * Registers run-time filter.
-	 */
-	public function addFilter(string $name, callable $callback): static
-	{
-		if (!preg_match('#^[a-z]\w*$#iD', $name)) {
-			throw new \LogicException("Invalid filter name '$name'.");
-		}
-
-		$this->filters->add($name, $callback);
-		return $this;
-	}
-
-
-	#[\Deprecated('Use addFilter() instead.')]
-	public function addFilterLoader(callable $loader): static
-	{
-		trigger_error('Filter loader is deprecated, use addFilter() instead.', E_USER_DEPRECATED);
-		$this->filters->add(null, $loader);
-		return $this;
-	}
-
-
-	/**
-	 * Returns all run-time filters.
-	 * @return array<string, callable>
-	 */
-	public function getFilters(): array
-	{
-		return $this->filters->getAll();
-	}
-
-
-	/**
-	 * Calls a run-time filter.
-	 * @param  mixed[]  $args
-	 */
-	public function invokeFilter(string $name, array $args): mixed
-	{
-		return ($this->filters->$name)(...$args);
-	}
-
-
-	/**
-	 * Adds new extension.
-	 */
-	public function addExtension(Extension $extension): static
-	{
-		$this->extensions[] = $extension;
-		foreach ($extension->getFilters() as $name => $value) {
-			$this->filters->add($name, $value);
-		}
-
-		foreach ($extension->getFunctions() as $name => $value) {
-			$this->functions->add($name, $value);
-		}
-
-		foreach ($extension->getProviders() as $name => $value) {
-			$this->providers->$name = $value;
-		}
-		return $this;
-	}
-
-
-	/** @return list<Extension> */
-	public function getExtensions(): array
-	{
-		return array_values($this->extensions);
-	}
-
-
-	/**
-	 * Registers run-time function.
-	 */
-	public function addFunction(string $name, callable $callback): static
-	{
-		if (!preg_match('#^[a-z]\w*$#iD', $name)) {
-			throw new \LogicException("Invalid function name '$name'.");
-		}
-
-		$this->functions->add($name, $callback);
-		return $this;
-	}
-
-
-	/**
-	 * Calls a run-time function.
-	 * @param  mixed[]  $args
-	 */
-	public function invokeFunction(string $name, array $args): mixed
-	{
-		return ($this->functions->$name)(null, ...$args);
-	}
-
-
-	/**
-	 * Returns all run-time functions.
-	 * @return array<string, callable>
-	 */
-	public function getFunctions(): array
-	{
-		return $this->functions->getAll();
-	}
-
-
-	/**
-	 * Adds new provider.
-	 */
-	public function addProvider(string $name, mixed $provider): static
-	{
-		if (!preg_match('#^[a-z]\w*$#iD', $name)) {
-			throw new \LogicException("Invalid provider name '$name'.");
-		}
-
-		$this->providers->$name = $provider;
-		return $this;
-	}
-
-
-	/**
-	 * Returns all providers.
-	 * @return array<string, mixed>
-	 */
-	public function getProviders(): array
-	{
-		return (array) $this->providers;
-	}
-
-
-	public function setPolicy(?Policy $policy): static
-	{
-		$this->policy = $policy;
-		return $this;
-	}
-
-
-	public function getPolicy(bool $effective = false): ?Policy
-	{
-		return !$effective || $this->sandboxed
-			? $this->policy
-			: null;
-	}
-
-
-	/**
-	 * Sets a handler called when an exception occurs during template rendering.
-	 */
-	public function setExceptionHandler(callable $handler): static
-	{
-		$this->providers->coreExceptionHandler = $handler(...);
-		return $this;
-	}
-
-
-	public function setSandboxMode(bool $state = true): static
-	{
-		$this->sandboxed = $state;
-		return $this;
-	}
-
-
-	public function setContentType(string $type): static
-	{
-		$this->contentType = $type;
-		return $this;
-	}
-
-
-	/**
-	 * Sets path to cache directory.
-	 */
-	public function setCacheDirectory(?string $path): static
-	{
-		$this->cache->directory = $path;
-		return $this;
-	}
-
-
-	/** @deprecated use setCacheDirectory() instead */
-	public function setTempDirectory(?string $path): static
-	{
-		return $this->setCacheDirectory($path);
-	}
-
-
-	/**
-	 * Sets auto-refresh mode.
-	 */
-	public function setAutoRefresh(bool $state = true): static
-	{
-		$this->cache->autoRefresh = $state;
-		return $this;
-	}
-
-
-	/**
-	 * Enables or disables an engine feature.
-	 */
-	public function setFeature(Feature $feature, bool $state = true): static
-	{
-		$this->features[$feature->name] = $state;
-		return $this;
-	}
-
-
-	/**
-	 * Checks if a feature is enabled.
-	 */
-	public function hasFeature(Feature $feature): bool
-	{
-		return $this->features[$feature->name] ?? false;
-	}
-
-
-	/**
-	 * Enables declare(strict_types=1) in templates.
-	 * @deprecated use setFeature(Feature::StrictTypes, ...) instead
-	 */
-	public function setStrictTypes(bool $state = true): static
-	{
-		return $this->setFeature(Feature::StrictTypes, $state);
-	}
-
-
-	/** @deprecated use setFeature(Feature::StrictParsing, ...) instead */
-	public function setStrictParsing(bool $state = true): static
-	{
-		return $this->setFeature(Feature::StrictParsing, $state);
-	}
-
-
-	/** @deprecated use hasFeature(Feature::StrictParsing) instead */
-	public function isStrictParsing(): bool
-	{
-		return $this->hasFeature(Feature::StrictParsing);
-	}
-
-
-	/**
-	 * Sets the locale. It uses the same identifiers as the PHP intl extension.
-	 */
-	public function setLocale(?string $locale): static
-	{
-		if ($locale && !extension_loaded('intl')) {
-			throw new RuntimeException("Setting a locale requires the 'intl' extension to be installed.");
-		}
-		$this->locale = $locale;
-		return $this;
-	}
-
-
-	public function getLocale(): ?string
-	{
-		return $this->locale;
-	}
-
-
-	public function setLoader(Loader $loader): static
-	{
-		$this->loader = $loader;
-		return $this;
-	}
-
-
-	public function getLoader(): Loader
-	{
-		return $this->loader ??= new Loaders\FileLoader;
-	}
-
-
-	/**
-	 * Validates compiled PHP code using the given PHP binary. Pass null to disable.
-	 */
-	public function enablePhpLinter(?string $phpBinary): static
-	{
-		$this->phpBinary = $phpBinary;
-		return $this;
-	}
-
-
-	/**
-	 * Sets default Latte syntax. Available options: 'single', 'double', 'off'
-	 */
-	public function setSyntax(string $syntax): static
-	{
-		$this->syntax = $syntax;
-		return $this;
-	}
-
-
-	/** @deprecated use setFeature(Feature::MigrationWarnings, ...) instead */
-	public function setMigrationWarnings(bool $state = true): static
-	{
-		return $this->setFeature(Feature::MigrationWarnings, $state);
-	}
-
-
-	protected function addDefaultExtensions(): void
-	{
-		$this->addExtension(new Essential\CoreExtension);
-		$this->addExtension(new Sandbox\SandboxExtension);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/AuxiliaryIterator.php b/generated/php/vendor/latte/latte/src/Latte/Essential/AuxiliaryIterator.php
deleted file mode 100644
index 5977c9e..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/AuxiliaryIterator.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-use function count;
-
-
-/**
- * Iterates over key-value pairs.
- * @internal
- * @template K
- * @template V
- * @implements \IteratorAggregate<K, V>
- */
-class AuxiliaryIterator implements \IteratorAggregate, \Countable
-{
-	public function __construct(
-		/** @var  array<array{K, V}> */
-		private readonly array $pairs,
-	) {
-	}
-
-
-	/**
-	 * @return \Generator<K, V>
-	 */
-	public function getIterator(): \Generator
-	{
-		foreach ($this->pairs as [$key, $value]) {
-			yield $key => $value;
-		}
-	}
-
-
-	public function count(): int
-	{
-		return count($this->pairs);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Blueprint.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Blueprint.php
deleted file mode 100644
index 8115da9..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Blueprint.php
+++ /dev/null
@@ -1,183 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Nette Framework (https://nette.org)
- * Copyright (c) 2004 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-use Nette\PhpGenerator as Php;
-use const DIRECTORY_SEPARATOR;
-
-
-/**
- * Generates blueprint of template class.
- * @internal
- */
-final class Blueprint
-{
-	/** @param array<string, mixed> $params */
-	public function generateTemplateClass(
-		array $params,
-		?string $name = 'Template',
-		?string $extends = null,
-	): Php\ClassType
-	{
-		if (!class_exists(Php\ClassType::class)) {
-			throw new \LogicException('Nette PhpGenerator is required to generate blueprint, install package `nette/php-generator`.');
-		}
-
-		$namespace = new Php\PhpNamespace(Php\Helpers::extractNamespace($name));
-		$class = $namespace->addClass(Php\Helpers::extractShortName($name));
-		if ($extends) {
-			if (class_exists($extends)) {
-				if ((new \ReflectionClass($extends))->isFinal()) {
-					throw new \LogicException("Blueprint error: Unable to extend final class $extends");
-				}
-				$class->setExtends($extends);
-			} elseif (trait_exists($extends)) {
-				$class->addTrait($extends);
-			} else {
-				throw new \LogicException("Blueprint error: Class '$extends' doesn't exist.");
-			}
-			$params = array_diff_key($params, get_class_vars($extends));
-		}
-		$this->addProperties($class, $params);
-		return $class;
-	}
-
-
-	public function printClass(Php\ClassType $class): void
-	{
-		$this->printCode((string) $class->getNamespace());
-	}
-
-
-	public function clickableFile(string $file, int $line = 1): string
-	{
-		$link = 'editor://open/?file=' . rawurlencode(strtr($file, '/', DIRECTORY_SEPARATOR)) . '&line=' . $line;
-		return '<a href="' . htmlspecialchars($link) . '">' . htmlspecialchars($file) . '</a>';
-	}
-
-
-	/**
-	 * @param  mixed[]  $vars
-	 */
-	public function printVars(array $vars): void
-	{
-		$res = '';
-		foreach ($vars as $name => $value) {
-			if (!str_starts_with($name, 'ʟ_')) {
-				$type = $this->getType($value);
-				$res .= "{varType $type $$name}\n";
-			}
-		}
-
-		$this->printHeader('varPrint');
-		$this->printCode($res ?: 'No variables', 'latte');
-	}
-
-
-	/**
-	 * @param  mixed[]  $props
-	 */
-	public function addProperties(Php\ClassType $class, array $props): void
-	{
-		foreach ($props as $name => $value) {
-			$class->removeProperty($name);
-			$type = $this->getType($value);
-			$prop = $class->addProperty($name);
-			$prop->setType($type);
-		}
-	}
-
-
-	/**
-	 * @param  callable[]  $funcs
-	 */
-	public function addFunctions(Php\ClassType $class, array $funcs): void
-	{
-		foreach ($funcs as $name => $func) {
-			$method = (new Php\Factory)->fromCallable($func);
-			$type = $this->printType($method->getReturnType(), $method->isReturnNullable(), $class->getNamespace()) ?: 'mixed';
-			$class->addComment("@method $type $name" . $this->printParameters($method, $class->getNamespace()));
-		}
-	}
-
-
-	private function printType(?string $type, bool $nullable, ?Php\PhpNamespace $namespace): string
-	{
-		if ($type === null) {
-			return '';
-		}
-
-		if ($namespace) {
-			$type = $namespace->simplifyName($type);
-		}
-
-		if ($nullable && strcasecmp($type, 'mixed')) {
-			$type = str_contains($type, '|')
-				? $type . '|null'
-				: '?' . $type;
-		}
-
-		return $type;
-	}
-
-
-	public function printParameters(
-		Php\Closure|Php\GlobalFunction|Php\Method $function,
-		?Php\PhpNamespace $namespace = null,
-	): string
-	{
-		$params = [];
-		$list = $function->getParameters();
-		foreach ($list as $param) {
-			$variadic = $function->isVariadic() && $param === end($list);
-			$params[] = ltrim($this->printType($param->getType(), $param->isNullable(), $namespace) . ' ')
-				. ($param->isReference() ? '&' : '')
-				. ($variadic ? '...' : '')
-				. '$' . $param->getName()
-				. ($param->hasDefaultValue() && !$variadic ? ' = ' . var_export($param->getDefaultValue(), return: true) : '');
-		}
-
-		return '(' . implode(', ', $params) . ')';
-	}
-
-
-	public function printBegin(): void
-	{
-		echo '<script src="https://nette.github.io/resources/prism/prism.js"></script>';
-		echo '<link rel="stylesheet" href="https://nette.github.io/resources/prism/prism.css">';
-		echo "<div style='all:initial;position:fixed;overflow:auto;z-index:1000;left:0;right:0;top:0;bottom:0;color:black;background:white;padding:1em'>\n";
-	}
-
-
-	public function printEnd(): void
-	{
-		echo "</div>\n";
-	}
-
-
-	public function printHeader(string $string): void
-	{
-		echo "<h1 style='all:initial;display:block;font-size:2em;margin:1em 0'>",
-			htmlspecialchars($string),
-			"</h1>\n";
-	}
-
-
-	public function printCode(string $code, string $lang = 'php'): void
-	{
-		echo '<pre><code class="language-', htmlspecialchars($lang), '">',
-			htmlspecialchars($code),
-			"</code></pre>\n";
-	}
-
-
-	private function getType(mixed $value): string
-	{
-		return $value === null ? 'mixed' : get_debug_type($value);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/CachingIterator.php b/generated/php/vendor/latte/latte/src/Latte/Essential/CachingIterator.php
deleted file mode 100644
index c44474d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/CachingIterator.php
+++ /dev/null
@@ -1,222 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-use function get_debug_type, is_array, max, method_exists, sprintf;
-
-
-/**
- * Smarter caching iterator.
- *
- * @property-read bool $first
- * @property-read bool $last
- * @property-read bool $empty
- * @property-read bool $odd
- * @property-read bool $even
- * @property-read int $counter
- * @property-read int $counter0
- * @property-read mixed $nextKey
- * @property-read mixed $nextValue
- * @property-read ?self $parent
- * @extends \CachingIterator<mixed, mixed, \Iterator<mixed, mixed>>
- * @internal
- */
-class CachingIterator extends \CachingIterator implements \Countable
-{
-	private int $counter = 0;
-	private ?self $parent = null;
-
-
-	public function __construct(mixed $iterator, ?self $parent = null)
-	{
-		if (is_array($iterator) || $iterator instanceof \stdClass) {
-			$iterator = new \ArrayIterator((array) $iterator);
-
-		} elseif ($iterator instanceof \IteratorAggregate) {
-			do {
-				$iterator = $iterator->getIterator();
-			} while (!$iterator instanceof \Iterator);
-		} elseif ($iterator instanceof \Traversable) {
-			if (!$iterator instanceof \Iterator) {
-				$iterator = new \IteratorIterator($iterator);
-			}
-		} else {
-			throw new \InvalidArgumentException(sprintf('Invalid argument passed to foreach; array or Traversable expected, %s given.', get_debug_type($iterator)));
-		}
-
-		parent::__construct($iterator, 0);
-		$this->parent = $parent;
-	}
-
-
-	/**
-	 * Is the current element the first one?
-	 */
-	public function isFirst(?int $width = null): bool
-	{
-		return $this->counter === 1 || ($width && $this->counter !== 0 && (($this->counter - 1) % $width) === 0);
-	}
-
-
-	/**
-	 * Is the current element the last one?
-	 */
-	public function isLast(?int $width = null): bool
-	{
-		return !$this->hasNext() || ($width && ($this->counter % $width) === 0);
-	}
-
-
-	/**
-	 * Is the iterator empty?
-	 */
-	public function isEmpty(): bool
-	{
-		return $this->counter === 0;
-	}
-
-
-	/**
-	 * Is the counter odd?
-	 */
-	public function isOdd(): bool
-	{
-		return $this->counter % 2 === 1;
-	}
-
-
-	/**
-	 * Is the counter even?
-	 */
-	public function isEven(): bool
-	{
-		return $this->counter % 2 === 0;
-	}
-
-
-	/**
-	 * Returns the 1-indexed counter.
-	 */
-	public function getCounter(): int
-	{
-		return $this->counter;
-	}
-
-
-	/**
-	 * Returns the 0-indexed counter.
-	 */
-	public function getCounter0(): int
-	{
-		return max(0, $this->counter - 1);
-	}
-
-
-	/**
-	 * Decrements the counter (minimum 0) to skip the current iteration in counting.
-	 */
-	public function skipRound(): void
-	{
-		$this->counter = max($this->counter - 1, 0);
-	}
-
-
-	public function __toString(): string
-	{
-		return (string) $this->counter;
-	}
-
-
-	public function count(): int
-	{
-		$inner = $this->getInnerIterator();
-		if ($inner instanceof \Countable) {
-			return $inner->count();
-
-		} else {
-			throw new \LogicException('Iterator is not countable.');
-		}
-	}
-
-
-	/**
-	 * Forwards to the next element.
-	 */
-	public function next(): void
-	{
-		parent::next();
-		if (parent::valid()) {
-			$this->counter++;
-		}
-	}
-
-
-	/**
-	 * Rewinds the Iterator.
-	 */
-	public function rewind(): void
-	{
-		parent::rewind();
-		$this->counter = parent::valid() ? 1 : 0;
-	}
-
-
-	/**
-	 * Returns the next key or null if position is not valid.
-	 */
-	public function getNextKey(): mixed
-	{
-		$iterator = $this->getInnerIterator();
-		return $iterator->valid() ? $iterator->key() : null;
-	}
-
-
-	/**
-	 * Returns the next element or null if position is not valid.
-	 */
-	public function getNextValue(): mixed
-	{
-		$iterator = $this->getInnerIterator();
-		return $iterator->valid() ? $iterator->current() : null;
-	}
-
-
-	/**
-	 * Returns the iterator surrounding the current one.
-	 */
-	public function getParent(): ?self
-	{
-		return $this->parent;
-	}
-
-
-	/********************* property accessor ****************d*g**/
-
-
-	/**
-	 * Returns property value.
-	 * @throws \LogicException if the property is not defined.
-	 */
-	public function __get(string $name): mixed
-	{
-		if (method_exists($this, $m = 'get' . $name) || method_exists($this, $m = 'is' . $name)) {
-			return $this->$m();
-		}
-
-		throw new \LogicException('Attempt to read undeclared property ' . static::class . "::\$$name.");
-	}
-
-
-	/**
-	 * Is property defined?
-	 */
-	public function __isset(string $name): bool
-	{
-		return method_exists($this, 'get' . $name) || method_exists($this, 'is' . $name);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/CoreExtension.php b/generated/php/vendor/latte/latte/src/Latte/Essential/CoreExtension.php
deleted file mode 100644
index 2ad7a73..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/CoreExtension.php
+++ /dev/null
@@ -1,292 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-use Latte;
-use Latte\Compiler\Nodes\Php\Scalar;
-use Latte\Compiler\Nodes\TextNode;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TemplateParser;
-use Latte\Runtime;
-use Latte\RuntimeException;
-use Nette;
-use function array_keys, class_exists, extension_loaded, preg_match;
-
-
-/**
- * Basic tags and filters for Latte.
- */
-final class CoreExtension extends Latte\Extension
-{
-	private Latte\Engine $engine;
-	private Filters $filters;
-
-
-	public function __construct()
-	{
-		$this->filters = new Filters;
-	}
-
-
-	public function beforeCompile(Latte\Engine $engine): void
-	{
-		$this->engine = $engine;
-	}
-
-
-	public function beforeRender(Runtime\Template $template): void
-	{
-		$this->engine = $template->getEngine();
-		$this->filters->locale = $this->engine->getLocale();
-	}
-
-
-	public function getTags(): array
-	{
-		return [
-			'embed' => Nodes\EmbedNode::create(...),
-			'define' => Nodes\DefineNode::create(...),
-			'block' => Nodes\BlockNode::create(...),
-			'layout' => Nodes\ExtendsNode::create(...),
-			'extends' => Nodes\ExtendsNode::create(...),
-			'import' => Nodes\ImportNode::create(...),
-			'include' => $this->includeSplitter(...),
-
-			'n:attr' => Nodes\NAttrNode::create(...),
-			'n:class' => Nodes\NClassNode::create(...),
-			'n:tag' => Nodes\NTagNode::create(...),
-
-			'parameters' => Nodes\ParametersNode::create(...),
-			'varType' => Nodes\VarTypeNode::create(...),
-			'varPrint' => Nodes\VarPrintNode::create(...),
-			'templateType' => Nodes\TemplateTypeNode::create(...),
-			'templatePrint' => Nodes\TemplatePrintNode::create(...),
-
-			'=' => Latte\Compiler\Nodes\PrintNode::create(...),
-			'do' => Nodes\DoNode::create(...),
-			'php' => Nodes\DoNode::create(...), // obsolete
-			'contentType' => Nodes\ContentTypeNode::create(...),
-			'spaceless' => Nodes\SpacelessNode::create(...),
-			'capture' => Nodes\CaptureNode::create(...),
-			'l' => fn(Tag $tag) => new TextNode('{', $tag->position),
-			'r' => fn(Tag $tag) => new TextNode('}', $tag->position),
-			'syntax' => $this->parseSyntax(...),
-
-			'dump' => Nodes\DumpNode::create(...),
-			'debugbreak' => Nodes\DebugbreakNode::create(...),
-			'trace' => Nodes\TraceNode::create(...),
-
-			'var' => Nodes\VarNode::create(...),
-			'default' => Nodes\VarNode::create(...),
-
-			'try' => Nodes\TryNode::create(...),
-			'rollback' => Nodes\RollbackNode::create(...),
-
-			'foreach' => Nodes\ForeachNode::create(...),
-			'for' => Nodes\ForNode::create(...),
-			'while' => Nodes\WhileNode::create(...),
-			'iterateWhile' => Nodes\IterateWhileNode::create(...),
-			'sep' => Nodes\FirstLastSepNode::create(...),
-			'last' => Nodes\FirstLastSepNode::create(...),
-			'first' => Nodes\FirstLastSepNode::create(...),
-			'skipIf' => Nodes\JumpNode::create(...),
-			'breakIf' => Nodes\JumpNode::create(...),
-			'exitIf' => Nodes\JumpNode::create(...),
-			'continueIf' => Nodes\JumpNode::create(...),
-
-			'if' => Nodes\IfNode::create(...),
-			'ifset' => Nodes\IfNode::create(...),
-			'ifchanged' => Nodes\IfChangedNode::create(...),
-			'n:ifcontent' => Nodes\IfContentNode::create(...),
-			'n:else' => Nodes\NElseNode::create(...),
-			'n:elseif' => Nodes\NElseNode::create(...),
-			'switch' => Nodes\SwitchNode::create(...),
-		];
-	}
-
-
-	public function getFilters(): array
-	{
-		return [
-			'batch' => $this->filters->batch(...),
-			'breakLines' => $this->filters->breaklines(...),
-			'breaklines' => $this->filters->breaklines(...),
-			'bytes' => $this->filters->bytes(...),
-			'capitalize' => extension_loaded('mbstring')
-				? $this->filters->capitalize(...)
-				: fn() => throw new RuntimeException('Filter |capitalize requires mbstring extension.'),
-			'ceil' => $this->filters->ceil(...),
-			'checkUrl' => $this->filters->checkUrl(...),
-			'clamp' => $this->filters->clamp(...),
-			'column' => $this->filters->column(...),
-			'commas' => $this->filters->commas(...),
-			'dataStream' => $this->filters->dataStream(...),
-			'datastream' => $this->filters->dataStream(...),
-			'date' => $this->filters->date(...),
-			'escape' => Latte\Runtime\Helpers::nop(...),
-			'escapeCss' => Latte\Runtime\Helpers::escapeCss(...),
-			'escapeHtml' => Latte\Runtime\HtmlHelpers::escapeText(...),
-			'escapeHtmlComment' => Latte\Runtime\HtmlHelpers::escapeComment(...),
-			'escapeICal' => Latte\Runtime\Helpers::escapeICal(...),
-			'escapeJs' => Latte\Runtime\Helpers::escapeJs(...),
-			'escapeUrl' => 'rawurlencode',
-			'escapeXml' => Latte\Runtime\XmlHelpers::escapeText(...),
-			'explode' => $this->filters->explode(...),
-			'filter' => $this->filters->filter(...),
-			'first' => $this->filters->first(...),
-			'firstLower' => extension_loaded('mbstring')
-				? $this->filters->firstLower(...)
-				: fn() => throw new RuntimeException('Filter |firstLower requires mbstring extension.'),
-			'firstUpper' => extension_loaded('mbstring')
-				? $this->filters->firstUpper(...)
-				: fn() => throw new RuntimeException('Filter |firstUpper requires mbstring extension.'),
-			'floor' => $this->filters->floor(...),
-			'group' => $this->filters->group(...),
-			'implode' => $this->filters->implode(...),
-			'indent' => $this->filters->indent(...),
-			'join' => $this->filters->implode(...),
-			'last' => $this->filters->last(...),
-			'length' => $this->filters->length(...),
-			'limit' => fn(string|iterable $value, int $length) => Filters::slice($value, 0, $length, preserveKeys: true),
-			'localDate' => $this->filters->localDate(...),
-			'lower' => extension_loaded('mbstring')
-				? $this->filters->lower(...)
-				: fn() => throw new RuntimeException('Filter |lower requires mbstring extension.'),
-			'number' => $this->filters->number(...),
-			'padLeft' => $this->filters->padLeft(...),
-			'padRight' => $this->filters->padRight(...),
-			'query' => $this->filters->query(...),
-			'random' => $this->filters->random(...),
-			'repeat' => $this->filters->repeat(...),
-			'replace' => $this->filters->replace(...),
-			'replaceRe' => $this->filters->replaceRe(...),
-			'replaceRE' => $this->filters->replaceRe(...),
-			'reverse' => $this->filters->reverse(...),
-			'round' => $this->filters->round(...),
-			'slice' => $this->filters->slice(...),
-			'sort' => $this->filters->sort(...),
-			'spaceless' => $this->filters->strip(...),
-			'split' => $this->filters->explode(...),
-			'strip' => $this->filters->strip(...), // obsolete
-			'stripHtml' => $this->filters->stripHtml(...),
-			'striphtml' => $this->filters->stripHtml(...),
-			'stripTags' => $this->filters->stripTags(...),
-			'striptags' => $this->filters->stripTags(...),
-			'substr' => $this->filters->substring(...),
-			'trim' => $this->filters->trim(...),
-			'truncate' => $this->filters->truncate(...),
-			'upper' => extension_loaded('mbstring')
-				? $this->filters->upper(...)
-				: fn() => throw new RuntimeException('Filter |upper requires mbstring extension.'),
-			'webalize' => class_exists(Nette\Utils\Strings::class)
-				? Nette\Utils\Strings::webalize(...)
-				: fn() => throw new RuntimeException('Filter |webalize requires nette/utils package.'),
-		];
-	}
-
-
-	public function getFunctions(): array
-	{
-		return [
-			'clamp' => $this->filters->clamp(...),
-			'divisibleBy' => $this->filters->divisibleBy(...),
-			'even' => $this->filters->even(...),
-			'first' => $this->filters->first(...),
-			'group' => $this->filters->group(...),
-			'last' => $this->filters->last(...),
-			'odd' => $this->filters->odd(...),
-			'slice' => $this->filters->slice(...),
-			'hasBlock' => fn(Runtime\Template $template, string $name): bool => $template->hasBlock($name),
-			'hasTemplate' => fn(Runtime\Template $template, string $name): bool => $this->hasTemplate($name, $template->getName()),
-		];
-	}
-
-
-	public function getPasses(): array
-	{
-		$passes = new Passes($this->engine);
-		return [
-			'internalVariables' => $passes->forbiddenVariablesPass(...),
-			'checkUrls' => $passes->checkUrlsPass(...),
-			'overwrittenVariables' => function (Latte\Compiler\Nodes\TemplateNode $node): void {
-				if (!$this->engine->hasFeature(Latte\Feature::ScopedLoopVariables)) {
-					Nodes\ForeachNode::overwrittenVariablesPass($node);
-				}
-			},
-			'customFunctions' => $passes->customFunctionsPass(...),
-			'moveTemplatePrintToHead' => Nodes\TemplatePrintNode::moveToHeadPass(...),
-			'nElse' => Nodes\NElseNode::processPass(...),
-			'scriptTagQuotes' => $passes->scriptTagQuotesPass(...),
-		];
-	}
-
-
-	public function getCacheKey(Latte\Engine $engine): mixed
-	{
-		return array_keys($engine->getFunctions());
-	}
-
-
-	/**
-	 * {include [file] "file" [with blocks] [,] [params]}
-	 * {include [block] name [,] [params]}
-	 */
-	private function includeSplitter(Tag $tag, TemplateParser $parser): Nodes\IncludeBlockNode|Nodes\IncludeFileNode
-	{
-		$tag->expectArguments();
-		$mod = $tag->parser->tryConsumeTokenBeforeUnquotedString('block', 'file');
-		if ($mod) {
-			$block = $mod->text === 'block';
-		} elseif ($tag->parser->stream->tryConsume('#')) {
-			$block = true;
-		} else {
-			$name = $tag->parser->parseUnquotedStringOrExpression();
-			$block = $name instanceof Scalar\StringNode && preg_match('~[\w-]+$~DA', $name->value);
-		}
-		$tag->parser->stream->seek(0);
-
-		return $block
-			? Nodes\IncludeBlockNode::create($tag, $parser)
-			: Nodes\IncludeFileNode::create($tag);
-	}
-
-
-	/**
-	 * {syntax ...}
-	 */
-	private function parseSyntax(Tag $tag, TemplateParser $parser): \Generator
-	{
-		if ($tag->isNAttribute() && $tag->prefix !== $tag::PrefixNone) {
-			throw new Latte\CompileException("Use n:syntax instead of {$tag->getNotation()}", $tag->position);
-		}
-		$tag->expectArguments();
-		$token = $tag->parser->stream->consume();
-		$lexer = $parser->getLexer();
-		$lexer->setSyntax($token->text, $tag->isNAttribute() ? null : $tag->name);
-		[$inner] = yield;
-		if (!$tag->isNAttribute()) {
-			$lexer->popSyntax();
-		}
-		return $inner;
-	}
-
-
-	/**
-	 * Checks if template exists.
-	 */
-	private function hasTemplate(string $name, string $referringName): bool
-	{
-		try {
-			$name = $this->engine->getLoader()->getReferredName($name, $referringName);
-			$this->engine->createTemplate($name, [], clearCache: false);
-			return true;
-		} catch (Latte\TemplateNotFoundException) {
-			return false;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Filters.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Filters.php
deleted file mode 100644
index af7a9ee..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Filters.php
+++ /dev/null
@@ -1,855 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-use Latte;
-use Latte\ContentType;
-use Latte\Runtime\FilterInfo;
-use Latte\Runtime\Html;
-use Stringable;
-use function abs, array_combine, array_fill_keys, array_key_last, array_map, array_rand, array_reverse, array_search, array_slice, base64_encode, ceil, count, end, explode, extension_loaded, finfo_buffer, finfo_open, floor, func_num_args, htmlspecialchars, http_build_query, iconv, iconv_strlen, iconv_substr, implode, is_array, is_int, is_numeric, is_string, iterator_count, iterator_to_array, key, ltrim, max, mb_convert_case, mb_strlen, mb_strtolower, mb_strtoupper, mb_substr, min, nl2br, number_format, preg_last_error, preg_last_error_msg, preg_match, preg_quote, preg_replace, preg_replace_callback, preg_split, reset, round, rtrim, str_repeat, str_replace, strip_tags, strlen, strrev, strtr, substr, trim, uasort, uksort, urlencode, utf8_decode;
-use const ENT_NOQUOTES, ENT_SUBSTITUTE, FILEINFO_MIME_TYPE, MB_CASE_TITLE, PHP_OUTPUT_HANDLER_FINAL, PHP_OUTPUT_HANDLER_START, PREG_SPLIT_NO_EMPTY;
-
-
-/**
- * Template filters. Uses UTF-8 only.
- * @internal
- */
-final class Filters
-{
-	public ?string $locale = null;
-
-
-	/**
-	 * Converts HTML to plain text.
-	 */
-	public static function stripHtml(FilterInfo $info, string|Stringable|null $s): string
-	{
-		$info->validate([null, 'html', 'html/attr', 'xml', 'xml/attr'], __FUNCTION__);
-		$info->contentType = ContentType::Text;
-		return Latte\Runtime\HtmlHelpers::convertHtmlToText((string) $s);
-	}
-
-
-	/**
-	 * Removes tags from HTML (but remains HTML entities).
-	 */
-	public static function stripTags(FilterInfo $info, string|Stringable|null $s): string
-	{
-		$info->contentType ??= ContentType::Html;
-		$info->validate(['html', 'html/attr', 'xml', 'xml/attr'], __FUNCTION__);
-		return strip_tags((string) $s);
-	}
-
-
-	/**
-	 * Replaces all repeated white spaces with a single space.
-	 */
-	public static function strip(FilterInfo $info, string $s): string
-	{
-		return $info->contentType === ContentType::Html
-			? trim(self::spacelessHtml($s))
-			: trim(self::spacelessText($s));
-	}
-
-
-	/**
-	 * Replaces all repeated white spaces with a single space.
-	 */
-	public static function spacelessHtml(string $s, bool &$strip = true): string
-	{
-		return preg_replace_callback(
-			'#[ \t\r\n]+|<(/)?(textarea|pre|script)(?=\W)#si',
-			function ($m) use (&$strip) {
-				if (empty($m[2])) {
-					return $strip ? ' ' : $m[0];
-				} else {
-					$strip = !empty($m[1]);
-					return $m[0];
-				}
-			},
-			$s,
-		);
-	}
-
-
-	/**
-	 * Output buffering handler for spacelessHtml.
-	 */
-	public static function spacelessHtmlHandler(string $s, ?int $phase = null): string
-	{
-		static $strip;
-		$left = $right = '';
-
-		if ($phase & PHP_OUTPUT_HANDLER_START) {
-			$strip = true;
-			$tmp = ltrim($s);
-			$left = substr($s, 0, strlen($s) - strlen($tmp));
-			$s = $tmp;
-		}
-
-		if ($phase & PHP_OUTPUT_HANDLER_FINAL) {
-			$tmp = rtrim($s);
-			$right = substr($s, strlen($tmp));
-			$s = $tmp;
-		}
-
-		return $left . self::spacelessHtml($s, $strip) . $right;
-	}
-
-
-	/**
-	 * Replaces all repeated white spaces with a single space.
-	 */
-	public static function spacelessText(string $s): string
-	{
-		return preg_replace('#[ \t\r\n]+#', ' ', $s);
-	}
-
-
-	/**
-	 * Indents plain text or HTML the content from the left.
-	 */
-	public static function indent(FilterInfo $info, string $s, int $level = 1, string $chars = "\t"): string
-	{
-		if ($level < 1) {
-			// do nothing
-		} elseif ($info->contentType === ContentType::Html) {
-			$s = preg_replace_callback('#<(textarea|pre).*?</\1#si', fn($m) => strtr($m[0], " \t\r\n", "\x1F\x1E\x1D\x1A"), $s);
-			if (preg_last_error()) {
-				throw new Latte\RuntimeException(preg_last_error_msg());
-			}
-
-			$s = preg_replace('#(?:^|[\r\n]+)(?=[^\r\n])#', '$0' . str_repeat($chars, $level), $s);
-			$s = strtr($s, "\x1F\x1E\x1D\x1A", " \t\r\n");
-		} else {
-			$s = preg_replace('#(?:^|[\r\n]+)(?=[^\r\n])#', '$0' . str_repeat($chars, $level), $s);
-		}
-
-		return $s;
-	}
-
-
-	/**
-	 * Join array of text or HTML elements with a string.
-	 * @param  string[]  $arr
-	 */
-	public static function implode(array $arr, string $glue = ''): string
-	{
-		return implode($glue, $arr);
-	}
-
-
-	/**
-	 * Join array elements with a comma and space.
-	 * @param  string[]  $arr
-	 */
-	public static function commas(array $arr, ?string $lastGlue = null): string
-	{
-		if ($lastGlue === null || count($arr) < 2) {
-			return implode(', ', $arr);
-		}
-
-		$last = array_pop($arr);
-		return implode(', ', $arr) . $lastGlue . $last;
-	}
-
-
-	/**
-	 * Splits a string by a string.
-	 * @return list<string>
-	 */
-	public static function explode(string $value, string $separator = ''): array
-	{
-		return $separator === ''
-			? preg_split('//u', $value, -1, PREG_SPLIT_NO_EMPTY)
-			: explode($separator, $value);
-	}
-
-
-	/**
-	 * Repeats text.
-	 */
-	public static function repeat(FilterInfo $info, string|Stringable|null $s, int $count): string
-	{
-		return str_repeat((string) $s, $count);
-	}
-
-
-	/**
-	 * Date/time formatting.
-	 */
-	public static function date(
-		string|int|\DateTimeInterface|\DateInterval|null $time,
-		string $format = "j.\u{a0}n.\u{a0}Y",
-	): ?string
-	{
-		if ($time == null) { // intentionally ==
-			return null;
-		} elseif ($time instanceof \DateInterval) {
-			return $time->format($format);
-		} elseif (is_numeric($time)) {
-			$time = (new \DateTime)->setTimestamp((int) $time);
-		} elseif (!$time instanceof \DateTimeInterface) {
-			$time = new \DateTime($time);
-		}
-
-		return $time->format($format);
-	}
-
-
-	/**
-	 * Date/time formatting according to locale.
-	 */
-	public function localDate(
-		string|int|\DateTimeInterface|null $value,
-		?string $format = null,
-		?string $date = null,
-		?string $time = null,
-	): ?string
-	{
-		if ($this->locale === null) {
-			throw new Latte\RuntimeException('Filter |localDate requires the locale to be set using Engine::setLocale()');
-		} elseif ($value == null) { // intentionally ==
-			return null;
-		} elseif (is_numeric($value)) {
-			$value = (new \DateTime)->setTimestamp((int) $value);
-		} elseif (!$value instanceof \DateTimeInterface) {
-			$value = new \DateTime($value);
-			$errors = \DateTime::getLastErrors();
-			if (!empty($errors['warnings'])) {
-				throw new \InvalidArgumentException(reset($errors['warnings']));
-			}
-		}
-
-		if ($format === null) {
-			$xlt = ['' => \IntlDateFormatter::NONE, 'full' => \IntlDateFormatter::FULL, 'long' => \IntlDateFormatter::LONG, 'medium' => \IntlDateFormatter::MEDIUM, 'short' => \IntlDateFormatter::SHORT,
-				'relative-full' => \IntlDateFormatter::RELATIVE_FULL, 'relative-long' => \IntlDateFormatter::RELATIVE_LONG, 'relative-medium' => \IntlDateFormatter::RELATIVE_MEDIUM, 'relative-short' => \IntlDateFormatter::RELATIVE_SHORT];
-			$time ??= '';
-			$date ??= $time === '' ? 'long' : '';
-			$formatter = new \IntlDateFormatter($this->locale, $xlt[$date], $xlt[$time]);
-		} else {
-			$formatter = new \IntlDateFormatter($this->locale, pattern: (new \IntlDatePatternGenerator($this->locale))->getBestPattern($format));
-		}
-
-		$res = $formatter->format($value);
-		$res = preg_replace('~(\d\.) ~', "\$1\u{a0}", $res);
-		return $res;
-	}
-
-
-	/**
-	 * Formats a number with grouped thousands and optionally decimal digits according to locale.
-	 */
-	public function number(
-		float $number,
-		string|int $patternOrDecimals = 0,
-		string $decimalSeparator = '.',
-		string $thousandsSeparator = ',',
-	): string
-	{
-		if (is_int($patternOrDecimals) && $patternOrDecimals < 0) {
-			throw new Latte\RuntimeException('Filter |number: the number of decimal must not be negative');
-		} elseif ($this->locale === null || func_num_args() > 2) {
-			if (is_string($patternOrDecimals)) {
-				throw new Latte\RuntimeException('Filter |number: using a pattern requires setting a locale via Engine::setLocale().');
-			}
-			return number_format($number, $patternOrDecimals, $decimalSeparator, $thousandsSeparator);
-		}
-
-		$formatter = new \NumberFormatter($this->locale, \NumberFormatter::DECIMAL);
-		if (is_string($patternOrDecimals)) {
-			$formatter->setPattern($patternOrDecimals);
-		} else {
-			$formatter->setAttribute(\NumberFormatter::FRACTION_DIGITS, $patternOrDecimals);
-		}
-		return $formatter->format($number);
-	}
-
-
-	/**
-	 * Converts to human-readable file size.
-	 */
-	public function bytes(float $bytes, int $precision = 2): string
-	{
-		$bytes = round($bytes);
-		$units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
-		foreach ($units as $unit) {
-			if (abs($bytes) < 1024 || $unit === end($units)) {
-				break;
-			}
-
-			$bytes /= 1024;
-		}
-
-		if ($this->locale === null) {
-			$bytes = (string) round($bytes, $precision);
-		} else {
-			$formatter = new \NumberFormatter($this->locale, \NumberFormatter::DECIMAL);
-			$formatter->setAttribute(\NumberFormatter::MAX_FRACTION_DIGITS, $precision);
-			$bytes = $formatter->format($bytes);
-		}
-
-		return $bytes . ' ' . $unit;
-	}
-
-
-	/**
-	 * Performs a search and replace.
-	 * @param  string|array<string, string>|array<string>  $search
-	 * @param  string|array<string>|null  $replace
-	 */
-	public static function replace(
-		FilterInfo $info,
-		string $subject,
-		string|array $search,
-		string|array|null $replace = null,
-	): string
-	{
-		if (is_array($search)) {
-			if (is_array($replace)) {
-				return strtr($subject, array_combine($search, $replace));
-			} elseif ($replace === null && is_string(key($search))) {
-				return strtr($subject, $search);
-			} else {
-				return strtr($subject, array_fill_keys($search, $replace));
-			}
-		}
-
-		return str_replace($search, $replace ?? '', $subject);
-	}
-
-
-	/**
-	 * Perform a regular expression search and replace.
-	 */
-	public static function replaceRe(string $subject, string $pattern, string $replacement = ''): string
-	{
-		$res = preg_replace($pattern, $replacement, $subject);
-		if (preg_last_error() || $res === null) {
-			throw new Latte\RuntimeException(preg_last_error_msg());
-		}
-
-		return $res;
-	}
-
-
-	/**
-	 * The data: URI generator.
-	 */
-	public static function dataStream(string $data, ?string $type = null): string
-	{
-		if ($type === null) {
-			$finfo = finfo_open(FILEINFO_MIME_TYPE);
-			if ($finfo) {
-				$type = finfo_buffer($finfo, $data) ?: null;
-			}
-		}
-		return 'data:' . ($type ? "$type;" : '') . 'base64,' . base64_encode($data);
-	}
-
-
-	/**
-	 * Converts newlines to HTML <br> tags.
-	 */
-	public static function breaklines(string|Stringable|null $s): Html
-	{
-		$s = htmlspecialchars((string) $s, ENT_NOQUOTES | ENT_SUBSTITUTE, 'UTF-8');
-		return new Html(nl2br($s, use_xhtml: false));
-	}
-
-
-	/**
-	 * Returns a part of string.
-	 */
-	public static function substring(string|Stringable|null $s, int $start, ?int $length = null): string
-	{
-		$s = (string) $s;
-		return match (true) {
-			extension_loaded('mbstring') => mb_substr($s, $start, $length, 'UTF-8'),
-			extension_loaded('iconv') => (string) iconv_substr($s, $start, $length, 'UTF-8'),
-			default => throw new Latte\RuntimeException("Filter |substr requires 'mbstring' or 'iconv' extension."),
-		};
-	}
-
-
-	/**
-	 * Truncates string to maximal length.
-	 */
-	public static function truncate(string|Stringable|null $s, int $length, string $append = "\u{2026}"): string
-	{
-		$s = (string) $s;
-		if (self::strLength($s) > $length) {
-			$length -= self::strLength($append);
-			if ($length < 1) {
-				return $append;
-
-			} elseif (preg_match('#^.{1,' . $length . '}(?=[\s\x00-/:-@\[-`{-~])#us', $s, $matches)) {
-				return $matches[0] . $append;
-
-			} else {
-				return self::substring($s, 0, $length) . $append;
-			}
-		}
-
-		return $s;
-	}
-
-
-	/**
-	 * Convert to lower case.
-	 */
-	public static function lower(string|Stringable|null $s): string
-	{
-		return mb_strtolower((string) $s, 'UTF-8');
-	}
-
-
-	/**
-	 * Convert to upper case.
-	 */
-	public static function upper(string|Stringable|null $s): string
-	{
-		return mb_strtoupper((string) $s, 'UTF-8');
-	}
-
-
-	/**
-	 * Convert first character to lower case.
-	 */
-	public static function firstLower(string|Stringable|null $s): string
-	{
-		$s = (string) $s;
-		return self::lower(self::substring($s, 0, 1)) . self::substring($s, 1);
-	}
-
-
-	/**
-	 * Convert first character to upper case.
-	 */
-	public static function firstUpper(string|Stringable|null $s): string
-	{
-		$s = (string) $s;
-		return self::upper(self::substring($s, 0, 1)) . self::substring($s, 1);
-	}
-
-
-	/**
-	 * Capitalize string.
-	 */
-	public static function capitalize(string|Stringable|null $s): string
-	{
-		return mb_convert_case((string) $s, MB_CASE_TITLE, 'UTF-8');
-	}
-
-
-	/**
-	 * Returns length of string or iterable.
-	 * @param  array<mixed>|\Countable|\Traversable<mixed>|string  $val
-	 */
-	public static function length(array|\Countable|\Traversable|string $val): int
-	{
-		if (is_countable($val)) {
-			return count($val);
-		} elseif ($val instanceof \Traversable) {
-			return iterator_count($val);
-		} else {
-			return self::strLength($val);
-		}
-	}
-
-
-	private static function strLength(string $s): int
-	{
-		return match (true) {
-			extension_loaded('mbstring') => mb_strlen($s, 'UTF-8'),
-			extension_loaded('iconv') => (int) iconv_strlen($s, 'UTF-8'),
-			default => strlen(@utf8_decode($s)), // deprecated
-		};
-	}
-
-
-	/**
-	 * Strips whitespace.
-	 */
-	public static function trim(FilterInfo $info, string $s, string $charlist = " \t\n\r\0\x0B\u{A0}"): string
-	{
-		$charlist = preg_quote($charlist, '#');
-		$s = preg_replace('#^[' . $charlist . ']+|[' . $charlist . ']+$#Du', '', (string) $s);
-		if (preg_last_error() || $s === null) {
-			throw new Latte\RuntimeException(preg_last_error_msg());
-		}
-
-		return $s;
-	}
-
-
-	/**
-	 * Pad a string to a certain length with another string.
-	 */
-	public static function padLeft(string|Stringable|int|float|null $s, int $length, string $append = ' '): string
-	{
-		$s = (string) $s;
-		$length = max(0, $length - self::strLength($s));
-		$l = self::strLength($append);
-		return str_repeat($append, (int) ($length / $l)) . self::substring($append, 0, $length % $l) . $s;
-	}
-
-
-	/**
-	 * Pad a string to a certain length with another string.
-	 */
-	public static function padRight(string|Stringable|int|float|null $s, int $length, string $append = ' '): string
-	{
-		$s = (string) $s;
-		$length = max(0, $length - self::strLength($s));
-		$l = self::strLength($append);
-		return $s . str_repeat($append, (int) ($length / $l)) . self::substring($append, 0, $length % $l);
-	}
-
-
-	/**
-	 * Reverses string or array.
-	 * @template K
-	 * @template V
-	 * @param  iterable<K, V>|string  $val
-	 * @return ($val is string ? string : array<K, V>)
-	 */
-	public static function reverse(string|iterable $val, bool $preserveKeys = false): string|array
-	{
-		return is_string($val)
-			? (string) iconv('UTF-32LE', 'UTF-8', strrev((string) iconv('UTF-8', 'UTF-32BE', $val)))
-			: array_reverse(iterator_to_array($val), $preserveKeys);
-	}
-
-
-	/**
-	 * Returns the values from a single column in the input array.
-	 * @param  iterable<mixed>  $data
-	 * @return mixed[]
-	 */
-	public static function column(iterable $data, string|int|null $columnKey, string|int|null $indexKey = null): array
-	{
-		return array_column(iterator_to_array($data), $columnKey, $indexKey);
-	}
-
-
-	/**
-	 * Chunks items by returning an array of arrays with the given number of items.
-	 * @param  iterable<mixed>  $list
-	 * @return \Generator<int, array<mixed>>
-	 */
-	public static function batch(iterable $list, int $length, mixed $rest = null): \Generator
-	{
-		$batch = [];
-		foreach ($list as $key => $value) {
-			$batch[$key] = $value;
-			if (count($batch) >= $length) {
-				yield $batch;
-				$batch = [];
-			}
-		}
-
-		if ($batch) {
-			if ($rest !== null) {
-				while (count($batch) < $length) {
-					$batch[] = $rest;
-				}
-			}
-
-			yield $batch;
-		}
-	}
-
-
-	/**
-	 * Sorts elements using the comparison function and preserves the key association.
-	 * @template K
-	 * @template V
-	 * @param  iterable<K, V>  $data
-	 * @param  ?(\Closure(V, V): int)  $comparison
-	 * @param  string|int|(\Closure(V): mixed)|null  $by
-	 * @param  string|int|(\Closure(K): mixed)|bool  $byKey
-	 * @return iterable<K, V>
-	 */
-	public function sort(
-		iterable $data,
-		?\Closure $comparison = null,
-		string|int|\Closure|null $by = null,
-		string|int|\Closure|bool $byKey = false,
-	): iterable
-	{
-		if ($byKey !== false) {
-			if ($by !== null) {
-				throw new \InvalidArgumentException('Filter |sort cannot use both $by and $byKey.');
-			}
-			$by = $byKey === true ? null : $byKey;
-		}
-
-		if ($comparison) {
-		} elseif ($this->locale === null) {
-			$comparison = fn($a, $b) => $a <=> $b;
-		} else {
-			$collator = new \Collator($this->locale);
-			$comparison = fn($a, $b) => is_string($a) && is_string($b)
-				? $collator->compare($a, $b)
-				: $a <=> $b;
-		}
-
-		$comparison = match (true) {
-			$by === null => $comparison,
-			$by instanceof \Closure => fn($a, $b) => $comparison($by($a), $by($b)),
-			default => fn($a, $b) => $comparison(is_array($a) ? $a[$by] : $a->$by, is_array($b) ? $b[$by] : $b->$by),
-		};
-
-		if (is_array($data)) {
-			$byKey ? uksort($data, $comparison) : uasort($data, $comparison);
-			return $data;
-		}
-
-		$pairs = [];
-		foreach ($data as $key => $value) {
-			$pairs[] = [$key, $value];
-		}
-		uasort($pairs, fn($a, $b) => $byKey ? $comparison($a[0], $b[0]) : $comparison($a[1], $b[1]));
-
-		return new AuxiliaryIterator($pairs);
-	}
-
-
-	/**
-	 * Groups elements by the element indices and preserves the key association and order.
-	 * @template K
-	 * @template V
-	 * @param  iterable<K, V>  $data
-	 * @param  string|int|(\Closure(V, K): mixed)  $by
-	 * @return iterable<iterable<K, V>>
-	 */
-	public static function group(iterable $data, string|int|\Closure $by): iterable
-	{
-		$fn = $by instanceof \Closure ? $by : fn($a) => is_array($a) ? $a[$by] : $a->$by;
-		$keys = $groups = [];
-
-		foreach ($data as $k => $v) {
-			$groupKey = $fn($v, $k);
-			if (!$groups || $prevKey !== $groupKey) {
-				$index = array_search($groupKey, $keys, strict: true);
-				if ($index === false) {
-					$index = count($keys);
-					$keys[$index] = $groupKey;
-				}
-				$prevKey = $groupKey;
-			}
-			$groups[$index][] = [$k, $v];
-		}
-
-		return new AuxiliaryIterator(array_map(
-			fn($key, $group) => [$key, new AuxiliaryIterator($group)],
-			$keys,
-			$groups,
-		));
-	}
-
-
-	/**
-	 * Filters elements according to a given $predicate. Maintains original keys.
-	 * @template K
-	 * @template V
-	 * @param  iterable<K, V>  $iterable
-	 * @param  callable(V, K, iterable<K, V>): bool  $predicate
-	 * @return iterable<K, V>
-	 */
-	public static function filter(iterable $iterable, callable $predicate): iterable
-	{
-		foreach ($iterable as $k => $v) {
-			if ($predicate($v, $k, $iterable)) {
-				yield $k => $v;
-			}
-		}
-	}
-
-
-	/**
-	 * Returns value clamped to the inclusive range of min and max.
-	 */
-	public static function clamp(int|float $value, int|float $min, int|float $max): int|float
-	{
-		if ($min > $max) {
-			throw new \InvalidArgumentException("Minimum ($min) is not less than maximum ($max).");
-		}
-
-		return min(max($value, $min), $max);
-	}
-
-
-	/**
-	 * Generates URL-encoded query string
-	 * @param  string|array<mixed>  $data
-	 */
-	public static function query(string|array $data): string
-	{
-		return is_array($data)
-			? http_build_query($data, '', '&')
-			: urlencode($data);
-	}
-
-
-	/**
-	 * Is divisible by?
-	 */
-	public static function divisibleBy(int $value, int $by): bool
-	{
-		return $value % $by === 0;
-	}
-
-
-	/**
-	 * Is odd?
-	 */
-	public static function odd(int $value): bool
-	{
-		return $value % 2 !== 0;
-	}
-
-
-	/**
-	 * Is even?
-	 */
-	public static function even(int $value): bool
-	{
-		return $value % 2 === 0;
-	}
-
-
-	/**
-	 * Returns the first element in an array or character in a string, or null if none.
-	 * @param  string|iterable<mixed>  $value
-	 * @return ($value is string ? string : mixed)
-	 */
-	public static function first(string|iterable $value): mixed
-	{
-		if (is_string($value)) {
-			return self::substring($value, 0, 1);
-		}
-
-		foreach ($value as $item) {
-			return $item;
-		}
-
-		return null;
-	}
-
-
-	/**
-	 * Returns the last element in an array or character in a string, or null if none.
-	 * @param  string|array<mixed>  $value
-	 * @return ($value is string ? string : mixed)
-	 */
-	public static function last(string|array $value): mixed
-	{
-		return is_array($value)
-			? ($value ? $value[array_key_last($value)] : null)
-			: self::substring($value, -1);
-	}
-
-
-	/**
-	 * Extracts a slice of an array, string or iterator.
-	 * @param  string|iterable<mixed>  $value
-	 * @return ($value is string ? string : ($value is array ? array<mixed> : \Generator))
-	 */
-	public static function slice(
-		string|iterable $value,
-		int $start,
-		?int $length = null,
-		bool $preserveKeys = false,
-	): string|array|\Generator
-	{
-		if (is_string($value)) {
-			return self::substring($value, $start, $length);
-		} elseif (is_array($value)) {
-			return array_slice($value, $start, $length, $preserveKeys);
-		}
-
-		return (function () use ($value, $start, $length, $preserveKeys) {
-			$i = 0;
-			$count = 0;
-			foreach ($value as $key => $val) {
-				if ($i++ < $start) {
-					continue;
-				}
-				if ($length !== null && $count >= $length) {
-					break;
-				}
-				if ($preserveKeys) {
-					yield $key => $val;
-				} else {
-					yield $val;
-				}
-				$count++;
-			}
-		})();
-	}
-
-
-	/**
-	 * Rounds number to specified precision.
-	 */
-	public static function round(float $value, int $precision = 0): float
-	{
-		return round($value, $precision);
-	}
-
-
-	/**
-	 * Rounds number down to specified precision.
-	 */
-	public static function floor(float $value, int $precision = 0): float
-	{
-		return floor($value * 10 ** $precision) / 10 ** $precision;
-	}
-
-
-	/**
-	 * Rounds number up to specified precision.
-	 */
-	public static function ceil(float $value, int $precision = 0): float
-	{
-		return ceil($value * 10 ** $precision) / 10 ** $precision;
-	}
-
-
-	/**
-	 * Picks random element/char.
-	 * @param  string|array<mixed>  $values
-	 * @return ($values is string ? string : mixed)
-	 */
-	public static function random(string|array $values): mixed
-	{
-		if (is_string($values)) {
-			$values = preg_split('//u', $values, -1, PREG_SPLIT_NO_EMPTY);
-		}
-
-		return $values
-			? $values[array_rand($values, 1)]
-			: null;
-	}
-
-
-	/**
-	 * Sanitizes string for use inside href attribute.
-	 */
-	public static function checkUrl(mixed $s): string
-	{
-		$s = $s instanceof Latte\Runtime\HtmlStringable
-			? Latte\Runtime\HtmlHelpers::convertHtmlToText((string) $s)
-			: (string) $s;
-
-		return preg_match('~^(?:(?:https?|ftp)://[^@]+(?:/.*)?|(?:mailto|tel|sms):.+|[/?#].*|[^:]+)$~Di', $s) ? $s : '';
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/BlockNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/BlockNode.php
deleted file mode 100644
index bdb59a7..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/BlockNode.php
+++ /dev/null
@@ -1,161 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Block;
-use Latte\Compiler\Escaper;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\ModifierNode;
-use Latte\Compiler\Nodes\Php\Scalar;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TemplateParser;
-use Latte\Compiler\Token;
-use Latte\Runtime\Template;
-
-
-/**
- * {block [local] name} ... {/block}
- * {block|filter} ... {/block}  (anonymous filter block)
- */
-class BlockNode extends StatementNode
-{
-	public ?Block $block = null;
-	public ModifierNode $modifier;
-	public AreaNode $content;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag, TemplateParser $parser): \Generator
-	{
-		$tag->outputMode = $tag::OutputRemoveIndentation;
-		$stream = $tag->parser->stream;
-		$node = $tag->node = new static;
-		$name = null;
-
-		if (!$stream->is('|', Token::End)) {
-			$layer = $tag->parser->tryConsumeTokenBeforeUnquotedString('local')
-				? Template::LayerLocal
-				: $parser->blockLayer;
-			$stream->tryConsume('#');
-			$name = $tag->parser->parseUnquotedStringOrExpression();
-			$node->block = new Block($name, $layer, $tag);
-
-			if (!$node->block->isDynamic()) {
-				$parser->checkBlockIsUnique($node->block);
-			}
-		}
-
-		$node->modifier = $tag->parser->parseModifier();
-		$noEscape = $node->modifier->removeFilter('noescape');
-		if ($noEscape && !$node->modifier->filters) {
-			throw new CompileException('Filter |noescape is not expected here.', $tag->position);
-		}
-		$node->modifier->escape = $node->modifier->filters && !$noEscape;
-
-		[$node->content, $endTag] = yield;
-
-		if ($node->block && $endTag && $name instanceof Scalar\StringNode) {
-			$endTag->parser->stream->tryConsume($name->value);
-		}
-
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if (!$this->block) {
-			return $this->printFilter($context);
-
-		} elseif ($this->block->isDynamic()) {
-			return $this->printDynamic($context);
-		}
-
-		return $this->printStatic($context);
-	}
-
-
-	private function printFilter(PrintContext $context): string
-	{
-		return $context->format(
-			<<<'XX'
-				ob_start(fn() => '') %line;
-				try {
-					(function () { extract(func_get_arg(0));
-						%node
-					})(get_defined_vars());
-				} finally {
-					$ʟ_fi = new LR\FilterInfo(%dump);
-					echo %modifyContent(ob_get_clean());
-				}
-
-				XX,
-			$this->position,
-			$this->content,
-			$context->getEscaper()->export(),
-			$this->modifier,
-		);
-	}
-
-
-	private function printStatic(PrintContext $context): string
-	{
-		assert($this->block !== null);
-		$this->modifier->escape = $this->modifier->escape || $context->getEscaper()->getState() === Escaper::HtmlAttribute;
-		$context->addBlock($this->block);
-		$this->block->content = $this->content->print($context); // must be compiled after is added
-
-		return $context->format(
-			'$this->renderBlock(%raw, get_defined_vars()'
-			. ($this->modifier->filters || $this->modifier->escape
-				? ', function ($s, $type) { $ʟ_fi = new LR\FilterInfo($type); return %modifyContent($s); }'
-				: '')
-			. ') %2.line;',
-			$context->ensureString($this->block->name, 'Block name'),
-			$this->modifier,
-			$this->position,
-		);
-	}
-
-
-	private function printDynamic(PrintContext $context): string
-	{
-		assert($this->block !== null);
-		$context->addBlock($this->block);
-		$this->block->content = $this->content->print($context); // must be compiled after is added
-		$escaper = $context->getEscaper();
-		$this->modifier->escape = $this->modifier->escape || $escaper->getState() === Escaper::HtmlAttribute;
-
-		return $context->format(
-			'$this->addBlock($ʟ_nm = %raw, %dump, [$this->%raw(...)], %dump);
-			$this->renderBlock($ʟ_nm, get_defined_vars()'
-			. ($this->modifier->filters || $this->modifier->escape
-				? ', function ($s, $type) { $ʟ_fi = new LR\FilterInfo($type); return %modifyContent($s); }'
-				: '')
-			. ');',
-			$context->ensureString($this->block->name, 'Block name'),
-			$escaper->export(),
-			$this->block->method,
-			$this->block->layer,
-			$this->modifier,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->block) {
-			yield $this->block->name;
-		}
-		yield $this->modifier;
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/CaptureNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/CaptureNode.php
deleted file mode 100644
index 8004ff9..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/CaptureNode.php
+++ /dev/null
@@ -1,86 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Escaper;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ModifierNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {capture $var} ... {/capture}
- * Captures block output into variable.
- */
-class CaptureNode extends StatementNode
-{
-	public ExpressionNode $variable;
-	public ModifierNode $modifier;
-	public AreaNode $content;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$tag->expectArguments();
-		$variable = $tag->parser->parseExpression();
-		if (!$variable->isWritable()) {
-			$text = '';
-			$i = 0;
-			while ($token = $tag->parser->stream->tryPeek(--$i)) {
-				$text = $token->text . $text;
-			}
-
-			throw new CompileException("It is not possible to write into '$text' in " . $tag->getNotation(), $tag->position);
-		}
-		$node = $tag->node = new static;
-		$node->variable = $variable;
-		$node->modifier = $tag->parser->parseModifier();
-		[$node->content] = yield;
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$escaper = $context->getEscaper();
-		return $context->format(
-			<<<'XX'
-				ob_start(fn() => '') %line;
-				try {
-					%node
-				} finally {
-					$ʟ_tmp = %raw;
-				}
-				$ʟ_fi = new LR\FilterInfo(%dump); %node = %modifyContent($ʟ_tmp);
-
-
-				XX,
-			$this->position,
-			$this->content,
-			$escaper->getState() === Escaper::HtmlText
-				? 'ob_get_length() ? new LR\Html(ob_get_clean()) : ob_get_clean()'
-				: 'ob_get_clean()',
-			$escaper->export(),
-			$this->variable,
-			$this->modifier,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->variable;
-		yield $this->modifier;
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ContentTypeNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ContentTypeNode.php
deleted file mode 100644
index 54ba675..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ContentTypeNode.php
+++ /dev/null
@@ -1,86 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TemplateParser;
-use Latte\ContentType;
-
-
-/**
- * {contentType html|xml|js|css|text|...}
- * Switches escaping mode and optionally sends HTTP header.
- */
-class ContentTypeNode extends StatementNode
-{
-	public string $contentType;
-	public ?string $mimeType = null;
-	public bool $inScript;
-
-
-	public static function create(Tag $tag, TemplateParser $parser): static
-	{
-		$tag->expectArguments();
-		while (!$tag->parser->stream->consume()->isEnd());
-		$type = trim($tag->parser->text);
-
-		if (!$tag->isInHead() && !($tag->htmlElement?->is('script') && str_contains($type, 'html'))) {
-			throw new CompileException('{contentType} is allowed only in template header.', $tag->position);
-		}
-
-		$node = new static;
-		$node->inScript = (bool) $tag->htmlElement;
-		$node->contentType = match (true) {
-			str_contains($type, 'html') => ContentType::Html,
-			str_contains($type, 'xml') => ContentType::Xml,
-			str_contains($type, 'javascript') => ContentType::JavaScript,
-			str_contains($type, 'css') => ContentType::Css,
-			str_contains($type, 'calendar') => ContentType::ICal,
-			default => ContentType::Text
-		};
-		$parser->setContentType($node->contentType);
-
-		if (strpos($type, '/') && !$tag->htmlElement) {
-			$node->mimeType = $type;
-		}
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if ($this->inScript) {
-			$context->getEscaper()->enterHtmlRaw($this->contentType);
-			return '';
-		}
-
-		$context->beginEscape()->enterContentType($this->contentType);
-
-		return $this->mimeType
-			? $context->format(
-				<<<'XX'
-					if (empty($this->global->coreCaptured) && in_array($this->getReferenceType(), ['extends', null], true)) {
-						header(%dump) %line;
-					}
-
-					XX,
-				'Content-Type: ' . $this->mimeType,
-				$this->position,
-			)
-			: '';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/CustomFunctionCallNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/CustomFunctionCallNode.php
deleted file mode 100644
index a04e035..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/CustomFunctionCallNode.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Helpers;
-
-
-/**
- * Wrapper for custom function calls in Latte expressions.
- */
-class CustomFunctionCallNode extends ExpressionNode
-{
-	public function __construct(
-		public Php\NameNode $name,
-		/** @var array<Php\ArgumentNode> */
-		public array $args = [],
-		public ?Position $position = null,
-	) {
-		(function (Php\ArgumentNode ...$args) {})(...$args);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '($this->global->fn->' . $this->name . ')($this, ' . $context->implode($this->args) . ')';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->name;
-		foreach ($this->args as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->args);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DebugbreakNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DebugbreakNode.php
deleted file mode 100644
index 1b96355..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DebugbreakNode.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {debugbreak [$cond]}
- * Triggers debugger breakpoint.
- */
-class DebugbreakNode extends StatementNode
-{
-	public ?ExpressionNode $condition;
-
-
-	public static function create(Tag $tag): static
-	{
-		$node = new static;
-		$node->condition = $tag->parser->isEnd() ? null : $tag->parser->parseExpression();
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if (function_exists($func = 'debugbreak') || function_exists($func = 'xdebug_break')) {
-			return $context->format(
-				($this->condition ? 'if (%1.node) ' : '') . $func . '() %0.line;',
-				$this->position,
-				$this->condition,
-			);
-		}
-		return '';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->condition) {
-			yield $this->condition;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DefineNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DefineNode.php
deleted file mode 100644
index 235482f..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DefineNode.php
+++ /dev/null
@@ -1,136 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Block;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\Expression\AssignNode;
-use Latte\Compiler\Nodes\Php\Expression\VariableNode;
-use Latte\Compiler\Nodes\Php\ParameterNode;
-use Latte\Compiler\Nodes\Php\Scalar;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TemplateParser;
-use Latte\Compiler\Token;
-use Latte\Helpers;
-use Latte\Runtime\Template;
-use function is_string;
-
-
-/**
- * {define name($params)} ... {/define}
- * Defines reusable block with parameters.
- */
-class DefineNode extends StatementNode
-{
-	public Block $block;
-	public AreaNode $content;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag, TemplateParser $parser): \Generator
-	{
-		$tag->expectArguments();
-		$layer = $tag->parser->tryConsumeTokenBeforeUnquotedString('local')
-			? Template::LayerLocal
-			: $parser->blockLayer;
-		$tag->parser->stream->tryConsume('#');
-		$name = $tag->parser->parseUnquotedStringOrExpression();
-
-		$node = $tag->node = new static;
-		$node->block = new Block($name, $layer, $tag);
-		if (!$node->block->isDynamic()) {
-			$parser->checkBlockIsUnique($node->block);
-			$tag->parser->stream->tryConsume(',');
-			$node->block->parameters = self::parseParameters($tag);
-		}
-
-		[$node->content, $endTag] = yield;
-		if ($endTag && $name instanceof Scalar\StringNode) {
-			$endTag->parser->stream->tryConsume($name->value);
-		}
-
-		return $node;
-	}
-
-
-	/** @return ParameterNode[] */
-	private static function parseParameters(Tag $tag): array
-	{
-		$stream = $tag->parser->stream;
-		$params = [];
-		while (!$stream->is(Token::End)) {
-			$type = $tag->parser->parseType();
-
-			$save = $stream->getIndex();
-			$expr = $stream->is(Token::Php_Variable) ? $tag->parser->parseExpression() : null;
-			if ($expr instanceof VariableNode && is_string($expr->name)) {
-				$params[] = new ParameterNode($expr, new Scalar\NullNode, $type);
-			} elseif (
-				$expr instanceof AssignNode
-				&& $expr->var instanceof VariableNode
-				&& is_string($expr->var->name)
-			) {
-				$params[] = new ParameterNode($expr->var, $expr->expr, $type);
-			} else {
-				$stream->seek($save);
-				$stream->throwUnexpectedException(addendum: ' in ' . $tag->getNotation());
-			}
-
-			if (!$stream->tryConsume(',')) {
-				break;
-			}
-		}
-
-		return $params;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->block->isDynamic()
-			? $this->printDynamic($context)
-			: $this->printStatic($context);
-	}
-
-
-	private function printStatic(PrintContext $context): string
-	{
-		$context->addBlock($this->block);
-		$this->block->content = $this->content->print($context); // must be compiled after is added
-		return '';
-	}
-
-
-	private function printDynamic(PrintContext $context): string
-	{
-		$context->addBlock($this->block);
-		$this->block->content = $this->content->print($context); // must be compiled after is added
-
-		return $context->format(
-			'$this->addBlock(%raw, %dump, [$this->%raw(...)], %dump);',
-			$context->ensureString($this->block->name, 'Block name'),
-			$context->getEscaper()->export(),
-			$this->block->method,
-			$this->block->layer,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->block->name;
-		foreach ($this->block->parameters as &$param) {
-			yield $param;
-		}
-		Helpers::removeNulls($this->block->parameters);
-
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DoNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DoNode.php
deleted file mode 100644
index 2c030a9..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DoNode.php
+++ /dev/null
@@ -1,60 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {do $expr}
- * Executes expression without output.
- */
-class DoNode extends StatementNode
-{
-	private const RefusedKeywords = [
-		'for', 'foreach', 'switch', 'while', 'if', 'do', 'try',
-		'include', 'include_once', 'require', 'require_once',
-		'throw', 'yield', 'return', 'exit', 'break', 'continue',
-		'class', 'function', 'interface', 'trait', 'enum',
-	];
-	public ExpressionNode $expression;
-
-
-	public static function create(Tag $tag): static
-	{
-		$tag->expectArguments();
-
-		$token = $tag->parser->stream->peek();
-		if ($token->is(...self::RefusedKeywords)) {
-			$tag->parser->throwReservedKeywordException($token);
-		}
-
-		$node = new static;
-		$node->expression = $tag->parser->parseExpression();
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			'%node %line;',
-			$this->expression,
-			$this->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expression;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DumpNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DumpNode.php
deleted file mode 100644
index f103a19..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/DumpNode.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {dump [$var]}
- * Dumps variable or all variables to Tracy Bar.
- */
-class DumpNode extends StatementNode
-{
-	public ?ExpressionNode $expression = null;
-
-
-	public static function create(Tag $tag): static
-	{
-		$node = new static;
-		$node->expression = $tag->parser->isEnd()
-			? null
-			: $tag->parser->parseExpression();
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->expression
-			? $context->format(
-				'Tracy\Debugger::barDump(%node, %dump) %line;',
-				$this->expression,
-				$this->expression->print($context),
-				$this->position,
-			)
-			: $context->format(
-				"Tracy\\Debugger::barDump(get_defined_vars(), 'variables') %line;",
-				$this->position,
-			);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->expression) {
-			yield $this->expression;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/EmbedNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/EmbedNode.php
deleted file mode 100644
index daafdbd..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/EmbedNode.php
+++ /dev/null
@@ -1,124 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\FragmentNode;
-use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\Scalar\StringNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\Nodes\TextNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TemplateParser;
-use function count, preg_match;
-
-
-/**
- * {embed 'file.latte'|#block} ... {/embed}
- */
-class EmbedNode extends StatementNode
-{
-	public ExpressionNode $name;
-	public string $mode;
-	public ArrayNode $args;
-	public FragmentNode $blocks;
-	public int|string|null $layer;
-
-
-	/** @return \Generator<int, ?list<string>, array{FragmentNode, ?Tag}, static> */
-	public static function create(Tag $tag, TemplateParser $parser): \Generator
-	{
-		if ($tag->isNAttribute()) {
-			throw new CompileException('Attribute n:embed is not supported.', $tag->position);
-		}
-
-		$tag->outputMode = $tag::OutputRemoveIndentation;
-		$tag->expectArguments();
-
-		$node = $tag->node = new static;
-		$mode = $tag->parser->tryConsumeTokenBeforeUnquotedString('block', 'file')?->text;
-		$node->name = $tag->parser->parseUnquotedStringOrExpression();
-		$node->mode = $mode ?? ($node->name instanceof StringNode && preg_match('~[\w-]+$~DA', $node->name->value) ? 'block' : 'file');
-		$tag->parser->stream->tryConsume(',');
-		$node->args = $tag->parser->parseArguments();
-
-		$prevIndex = $parser->blockLayer;
-		$parser->blockLayer = $node->layer = count($parser->blocks);
-		$parser->blocks[$parser->blockLayer] = [];
-		[$node->blocks] = yield;
-
-		foreach ($node->blocks->children as $child) {
-			if (!$child instanceof ImportNode && !$child instanceof BlockNode && !$child instanceof TextNode) {
-				throw new CompileException('Unexpected content inside {embed} tags.', $child->position);
-			}
-		}
-
-		$parser->blockLayer = $prevIndex;
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$imports = '';
-		foreach ($this->blocks->children as $child) {
-			if ($child instanceof ImportNode) {
-				$imports .= $child->print($context);
-			} else {
-				$child->print($context);
-			}
-		}
-
-		return $this->mode === 'file'
-			? $context->format(
-				<<<'XX'
-					$this->enterBlockLayer(%dump, get_defined_vars()) %line; %raw
-					try {
-						$this->createTemplate(%raw, %node, "embed")->renderToContentType(%dump) %1.line;
-					} finally {
-						$this->leaveBlockLayer();
-					}
-
-					XX,
-				$this->layer,
-				$this->position,
-				$imports,
-				$context->ensureString($this->name, 'Template name'),
-				$this->args,
-				$context->getEscaper()->export(),
-			)
-			: $context->format(
-				<<<'XX'
-					$this->enterBlockLayer(%dump, get_defined_vars()) %line; %raw
-					$this->copyBlockLayer();
-					try {
-						$this->renderBlock(%raw, %node, %dump) %1.line;
-					} finally {
-						$this->leaveBlockLayer();
-					}
-
-					XX,
-				$this->layer,
-				$this->position,
-				$imports,
-				$context->ensureString($this->name, 'Block name'),
-				$this->args,
-				$context->getEscaper()->export(),
-			);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->name;
-		yield $this->args;
-		yield $this->blocks;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ExtendsNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ExtendsNode.php
deleted file mode 100644
index d38a829..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ExtendsNode.php
+++ /dev/null
@@ -1,55 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\Scalar\BooleanNode;
-use Latte\Compiler\Nodes\Php\Scalar\NullNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {extends 'parent.latte'}
- * {layout 'layout.latte'}
- */
-class ExtendsNode extends StatementNode
-{
-	public ExpressionNode $extends;
-
-
-	public static function create(Tag $tag): static
-	{
-		$tag->expectArguments();
-		$node = new static;
-		if (!$tag->isInHead()) {
-			throw new CompileException("{{$tag->name}} must be placed in template head.", $tag->position);
-		} elseif ($tag->parser->stream->tryConsume('auto')) {
-			$node->extends = new NullNode;
-		} elseif ($tag->parser->stream->tryConsume('none')) {
-			$node->extends = new BooleanNode(false);
-		} else {
-			$node->extends = $tag->parser->parseUnquotedStringOrExpression();
-		}
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format('$this->parentName = %node;', $this->extends);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->extends;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/FirstLastSepNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/FirstLastSepNode.php
deleted file mode 100644
index 2b9d7b0..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/FirstLastSepNode.php
+++ /dev/null
@@ -1,75 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {first} ... {/first}, {last} ... {/last}, {sep} ... {/sep}
- * Loop iteration helpers inside {foreach}.
- */
-class FirstLastSepNode extends StatementNode
-{
-	public string $name;
-	public ?ExpressionNode $width;
-	public AreaNode $then;
-	public ?AreaNode $else = null;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$node = $tag->node = new static;
-		$node->name = $tag->name;
-		$node->width = $tag->parser->isEnd() ? null : $tag->parser->parseExpression();
-
-		[$node->then, $nextTag] = yield ['else'];
-		if ($nextTag?->name === 'else') {
-			[$node->else] = yield;
-		}
-
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$cond = match ($this->name) {
-			'first' => '$iterator->isFirst',
-			'last' => '$iterator->isLast',
-			'sep' => '!$iterator->isLast',
-		};
-		return $context->format(
-			$this->else
-				? "if ($cond(%node)) %line { %node } else %line { %node }\n"
-				: "if ($cond(%node)) %line { %node }\n",
-			$this->width,
-			$this->position,
-			$this->then,
-			$this->tagRanges[1] ?? null,
-			$this->else,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->width) {
-			yield $this->width;
-		}
-		yield $this->then;
-		if ($this->else) {
-			yield $this->else;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ForNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ForNode.php
deleted file mode 100644
index cb958cc..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ForNode.php
+++ /dev/null
@@ -1,92 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Helpers;
-
-
-/**
- * {for $i = 0; $i < 10; $i++} ... {/for}
- */
-class ForNode extends StatementNode
-{
-	/** @var ExpressionNode[]  */
-	public array $init = [];
-	public ?ExpressionNode $condition;
-
-	/** @var ExpressionNode[]  */
-	public array $next = [];
-	public AreaNode $content;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$tag->expectArguments();
-		$stream = $tag->parser->stream;
-		$node = $tag->node = new static;
-		while (!$stream->is(';')) {
-			$node->init[] = $tag->parser->parseExpression();
-			$stream->tryConsume(',');
-		}
-
-		$stream->consume(';');
-		$node->condition = $stream->is(';') ? null : $tag->parser->parseExpression();
-		$stream->consume(';');
-		while (!$tag->parser->isEnd()) {
-			$node->next[] = $tag->parser->parseExpression();
-			$stream->tryConsume(',');
-		}
-
-		[$node->content] = yield;
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			<<<'XX'
-				for (%args; %node; %args) %line {
-					%node
-				}
-
-				XX,
-			$this->init,
-			$this->condition,
-			$this->next,
-			$this->position,
-			$this->content,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->init as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->init);
-
-		if ($this->condition) {
-			yield $this->condition;
-		}
-
-		foreach ($this->next as &$item) {
-			yield $item;
-		}
-		Helpers::removeNulls($this->next);
-
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ForeachNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ForeachNode.php
deleted file mode 100644
index b69bdfd..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ForeachNode.php
+++ /dev/null
@@ -1,207 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Node;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\AuxiliaryNode;
-use Latte\Compiler\Nodes\NopNode;
-use Latte\Compiler\Nodes\Php\Expression\VariableNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ListNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\Nodes\TemplateNode;
-use Latte\Compiler\NodeTraverser;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TagParser;
-use Latte\Feature;
-use function array_map, array_unshift, implode, is_string, preg_match;
-
-
-/**
- * {foreach $array as $item} ... {/foreach}
- * {foreach $array as $key => $value} ... {else} ... {/foreach}
- */
-class ForeachNode extends StatementNode
-{
-	public ExpressionNode $expression;
-	public ?ExpressionNode $key = null;
-	public bool $byRef = false;
-	public ExpressionNode|ListNode $value;
-	public AreaNode $content;
-	public ?AreaNode $else = null;
-	public ?bool $iterator = null;
-	public bool $checkArgs = true;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$tag->expectArguments();
-		$node = $tag->node = new static;
-		self::parseArguments($tag->parser, $node);
-
-		$modifier = $tag->parser->parseModifier();
-		foreach ($modifier->filters as $filter) {
-			match ($filter->name->name) {
-				'nocheck', 'noCheck' => $node->checkArgs = false,
-				'noiterator', 'noIterator' => $node->iterator = false,
-				default => throw new CompileException('Only modifiers |noiterator and |nocheck are allowed here.', $tag->position),
-			};
-		}
-
-		if ($tag->void) {
-			$node->content = new NopNode;
-			return $node;
-		}
-
-		[$node->content, $nextTag] = yield ['else'];
-		if ($nextTag?->name === 'else') {
-			[$node->else] = yield;
-		}
-
-		return $node;
-	}
-
-
-	private static function parseArguments(TagParser $parser, self $node): void
-	{
-		$stream = $parser->stream;
-		$node->expression = $parser->parseExpression();
-		$stream->consume('as');
-		[$node->key, $node->value, $node->byRef] = $parser->parseForeach();
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$content = $this->content->print($context);
-		$useIterator = $this->else || ($this->iterator ?? preg_match('#\$iterator\W|\Wget_defined_vars\W#', $content));
-
-		$code = $context->format(
-			"foreach (%raw as %raw) %line { %raw\n}\n",
-			$useIterator
-				? $context->format('$iterator = $ʟ_it = new Latte\Essential\CachingIterator(%node, $ʟ_it ?? null)', $this->expression)
-				: $this->expression->print($context),
-			$this->printArgs($context),
-			$this->position,
-			$content,
-		);
-
-		if ($this->else) {
-			$code .= $context->format(
-				"if (%raw) %line { %node\n}\n",
-				$useIterator ? '$iterator->isEmpty()' : $context->format('empty(%node)', $this->expression),
-				$this->tagRanges[1] ?? null,
-				$this->else,
-			);
-		}
-
-		if ($useIterator) {
-			$code .= '$iterator = $ʟ_it = $ʟ_it->getParent();' . "\n";
-		}
-
-		if (
-			$context->hasFeature(Feature::ScopedLoopVariables)
-			&& !$this->byRef
-			&& ($vars = array_merge($this->key ? $this->collectVariables($this->key) : [], $this->collectVariables($this->value)))
-		) {
-			$backup = '$ʟ_fe_' . $context->generateId();
-			$unsetList = implode(', ', array_map(fn($var) => $var->print($context), $vars));
-			$restoreCode = implode('', array_map(fn($var) => $context->format("if (array_key_exists(%dump, $backup)) { %node = &{$backup}[%0.dump]; }\n", $var->name, $var), $vars));
-			$code = <<<XX
-				try {
-					$backup = get_defined_vars();
-					unset($unsetList);
-
-					$code
-				} finally {
-					unset($unsetList);
-					$restoreCode
-					unset($backup);
-				}
-
-				XX;
-		}
-
-		return $code . "\n";
-	}
-
-
-	private function printArgs(PrintContext $context): string
-	{
-		return ($this->key ? $this->key->print($context) . ' => ' : '')
-			. ($this->byRef ? '&' : '')
-			. $this->value->print($context);
-	}
-
-
-	/**
-	 * Recursively collects variable names from a node (handles ListNode destructuring).
-	 * @return VariableNode[]
-	 */
-	private function collectVariables(ExpressionNode|ListNode $node): array
-	{
-		$res = [];
-		if ($node instanceof VariableNode && is_string($node->name)) {
-			$res[] = $node;
-		} elseif ($node instanceof ListNode) {
-			foreach ($node->items as $item) {
-				$res = array_merge($res, $item ? $this->collectVariables($item->value) : []);
-			}
-		}
-		return $res;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->expression;
-		if ($this->key) {
-			yield $this->key;
-		}
-		yield $this->value;
-		yield $this->content;
-		if ($this->else) {
-			yield $this->else;
-		}
-	}
-
-
-	/**
-	 * Pass: checks if foreach overrides template variables.
-	 */
-	public static function overwrittenVariablesPass(TemplateNode $node): void
-	{
-		$vars = [];
-		(new NodeTraverser)->traverse($node, function (Node $node) use (&$vars) {
-			if ($node instanceof self && $node->checkArgs) {
-				foreach ([$node->key, $node->value] as $var) {
-					if ($var instanceof VariableNode && is_string($var->name)) {
-						$vars[$var->name][] = $node->position?->line;
-					}
-				}
-			}
-		});
-		if ($vars) {
-			array_unshift($node->head->children, new AuxiliaryNode(fn(PrintContext $context) => $context->format(
-				<<<'XX'
-					if (!$this->getReferringTemplate() || $this->getReferenceType() === 'extends') {
-						foreach (array_intersect_key(%dump, $this->params) as $ʟ_v => $ʟ_l) {
-							trigger_error("Variable \$$ʟ_v overwritten in foreach on line $ʟ_l");
-						}
-					}
-
-					XX,
-				array_map(fn($l) => implode(', ', $l), $vars),
-			)));
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IfChangedNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IfChangedNode.php
deleted file mode 100644
index 6987ea5..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IfChangedNode.php
+++ /dev/null
@@ -1,137 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {ifchanged [$var]} ... {/ifchanged}
- * Renders content only when value changes between iterations.
- */
-class IfChangedNode extends StatementNode
-{
-	public ArrayNode $conditions;
-	public AreaNode $then;
-	public ?AreaNode $else = null;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$node = $tag->node = new static;
-		$node->conditions = $tag->parser->parseArguments();
-
-		[$node->then, $nextTag] = yield ['else'];
-		if ($nextTag?->name === 'else') {
-			[$node->else] = yield;
-		}
-
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->conditions->items
-			? $this->printExpression($context)
-			: $this->printCapturing($context);
-	}
-
-
-	private function printExpression(PrintContext $context): string
-	{
-		return $this->else
-			? $context->format(
-				<<<'XX'
-					if (($ʟ_loc[%dump] ?? null) !== ($ʟ_tmp = %node)) {
-						$ʟ_loc[%0.dump] = $ʟ_tmp;
-						%node
-					} else %line {
-						%node
-					}
-
-
-					XX,
-				$context->generateId(),
-				$this->conditions,
-				$this->then,
-				$this->tagRanges[1] ?? null,
-				$this->else,
-			)
-			: $context->format(
-				<<<'XX'
-					if (($ʟ_loc[%dump] ?? null) !== ($ʟ_tmp = %node)) {
-						$ʟ_loc[%0.dump] = $ʟ_tmp;
-						%2.node
-					}
-
-
-					XX,
-				$context->generateId(),
-				$this->conditions,
-				$this->then,
-			);
-	}
-
-
-	private function printCapturing(PrintContext $context): string
-	{
-		return $this->else
-			? $context->format(
-				<<<'XX'
-					ob_start(fn() => '');
-					try %line {
-						%node
-					} finally { $ʟ_tmp = ob_get_clean(); }
-					if (($ʟ_loc[%dump] ?? null) !== $ʟ_tmp) {
-						echo $ʟ_loc[%2.dump] = $ʟ_tmp;
-					} else %line {
-						%node
-					}
-
-
-					XX,
-				$this->position,
-				$this->then,
-				$context->generateId(),
-				$this->tagRanges[1] ?? null,
-				$this->else,
-			)
-			: $context->format(
-				<<<'XX'
-					ob_start(fn() => '');
-					try %line {
-						%node
-					} finally { $ʟ_tmp = ob_get_clean(); }
-					if (($ʟ_loc[%dump] ?? null) !== $ʟ_tmp) {
-						echo $ʟ_loc[%2.dump] = $ʟ_tmp;
-					}
-
-
-					XX,
-				$this->position,
-				$this->then,
-				$context->generateId(),
-			);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->conditions;
-		yield $this->then;
-		if ($this->else) {
-			yield $this->else;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IfContentNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IfContentNode.php
deleted file mode 100644
index dd3d5b2..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IfContentNode.php
+++ /dev/null
@@ -1,86 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\AuxiliaryNode;
-use Latte\Compiler\Nodes\Html\ElementNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TemplateParser;
-
-
-/**
- * <div n:ifcontent> ... </div>
- * Omits element if content is empty or whitespace only.
- */
-class IfContentNode extends StatementNode
-{
-	public AreaNode $content;
-	public int $id;
-	public ElementNode $htmlElement;
-	public ?AreaNode $else = null;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag, TemplateParser $parser): \Generator
-	{
-		$node = $tag->node = new static;
-		$node->id = $parser->generateId();
-		[$node->content] = yield;
-		assert($tag->htmlElement !== null);
-		$node->htmlElement = $tag->htmlElement;
-		if (!$node->htmlElement->content) {
-			throw new CompileException("Unnecessary n:ifcontent on empty element <{$node->htmlElement->name}>", $tag->position);
-		}
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$saved = $this->htmlElement->content;
-		assert($saved !== null);
-		try {
-			$else = $this->else ?? new AuxiliaryNode(fn() => '');
-			$this->htmlElement->content = new AuxiliaryNode(fn() => <<<XX
-				ob_start();
-				try {
-					{$saved->print($context)}
-				} finally {
-					\$ʟ_ifc[$this->id] = rtrim(ob_get_flush()) === '';
-				}
-
-				XX);
-			return <<<XX
-				ob_start(fn() => '');
-				try {
-					{$this->content->print($context)}
-				} finally {
-					if (\$ʟ_ifc[$this->id] ?? null) {
-						ob_end_clean();
-						{$else->print($context)}
-					} else {
-						echo ob_get_clean();
-					}
-				}
-
-				XX;
-		} finally {
-			$this->htmlElement->content = $saved;
-		}
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IfNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IfNode.php
deleted file mode 100644
index 715d2c2..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IfNode.php
+++ /dev/null
@@ -1,182 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\Scalar\StringNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\Position;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TagParser;
-use Latte\Compiler\TemplateParser;
-use function in_array;
-
-
-/**
- * {if $cond} ... {elseif $cond} ... {else} ... {/if}
- * {ifset $var} ... {elseifset $var} ... {/ifset}
- */
-class IfNode extends StatementNode
-{
-	public ExpressionNode $condition;
-	public AreaNode $then;
-	public ?AreaNode $else = null;
-	public ?Position $elseLine = null;
-	public bool $capture = false;
-	public bool $ifset = false;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag, TemplateParser $parser): \Generator
-	{
-		$node = $tag->node = new static;
-		$node->ifset = in_array($tag->name, ['ifset', 'elseifset'], strict: true);
-		$node->capture = !$tag->isNAttribute() && $tag->name === 'if' && $tag->parser->isEnd();
-		$node->position = $tag->position;
-		if (!$node->capture) {
-			$node->condition = $node->ifset
-				? self::buildCondition($tag->parser)
-				: $tag->parser->parseExpression();
-		}
-
-		[$node->then, $nextTag] = yield $node->capture
-			? ['else']
-			: ['else', 'elseif', 'elseifset'];
-
-		if ($nextTag?->name === 'else') {
-			if ($nextTag->parser->stream->is('if')) {
-				throw new CompileException('Arguments are not allowed in {else}, did you mean {elseif}?', $nextTag->position);
-			}
-			$node->elseLine = $nextTag->position;
-			[$node->else, $nextTag] = yield;
-
-		} elseif ($nextTag?->name === 'elseif' || $nextTag?->name === 'elseifset') {
-			if ($node->capture) {
-				throw new CompileException('Tag ' . $nextTag->getNotation() . ' is unexpected here.', $nextTag->position);
-			}
-			$node->else = yield from self::create($nextTag, $parser);
-		}
-
-		if ($node->capture) {
-			assert($nextTag !== null);
-			$node->condition = $nextTag->parser->parseExpression();
-		}
-
-		return $node;
-	}
-
-
-	private static function buildCondition(TagParser $parser): ExpressionNode
-	{
-		$list = [];
-		do {
-			$block = $parser->tryConsumeTokenBeforeUnquotedString('block') ?? $parser->stream->tryConsume('#');
-			$name = $parser->parseUnquotedStringOrExpression();
-			$list[] = $block || $name instanceof StringNode
-				? new Expression\AuxiliaryNode(
-					fn(PrintContext $context, ExpressionNode $name) => '$this->hasBlock(' . $context->ensureString($name, 'Block name') . ')',
-					[$name],
-				)
-				: new Expression\IssetNode([$name]);
-		} while ($parser->stream->tryConsume(','));
-
-		return Expression\BinaryOpNode::nest('&&', ...$list);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->capture
-			? $this->printCapturing($context)
-			: $this->printCommon($context);
-	}
-
-
-	private function printCommon(PrintContext $context): string
-	{
-		if ($this->else) {
-			return $context->format(
-				($this->else instanceof self
-					? "if (%node) %line { %node } else%node\n"
-					: "if (%node) %line { %node } else %4.line { %3.node }\n"),
-				$this->condition,
-				$this->position,
-				$this->then,
-				$this->else,
-				$this->elseLine,
-			);
-		}
-		return $context->format(
-			"if (%node) %line { %node }\n",
-			$this->condition,
-			$this->position,
-			$this->then,
-		);
-	}
-
-
-	private function printCapturing(PrintContext $context): string
-	{
-		if ($this->else) {
-			return $context->format(
-				<<<'XX'
-					ob_start(fn() => '') %line;
-					try {
-						%node
-						ob_start(fn() => '') %line;
-						try {
-							%node
-						} finally {
-							$ʟ_ifB = ob_get_clean();
-						}
-					} finally {
-						$ʟ_ifA = ob_get_clean();
-					}
-					echo (%node) ? $ʟ_ifA : $ʟ_ifB %0.line;
-
-
-					XX,
-				$this->position,
-				$this->then,
-				$this->elseLine,
-				$this->else,
-				$this->condition,
-			);
-		}
-
-		return $context->format(
-			<<<'XX'
-				ob_start(fn() => '') %line;
-				try {
-					%node
-				} finally {
-					$ʟ_ifA = ob_get_clean();
-				}
-				if (%node) %0.line { echo $ʟ_ifA; }
-
-				XX,
-			$this->position,
-			$this->then,
-			$this->condition,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->condition;
-		yield $this->then;
-		if ($this->else) {
-			yield $this->else;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ImportNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ImportNode.php
deleted file mode 100644
index 508be45..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ImportNode.php
+++ /dev/null
@@ -1,54 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {import 'file.latte'}
- * Imports block definitions from another template.
- */
-class ImportNode extends StatementNode
-{
-	public ExpressionNode $file;
-	public ArrayNode $args;
-
-
-	public static function create(Tag $tag): static
-	{
-		$tag->expectArguments();
-		$node = new static;
-		$node->file = $tag->parser->parseUnquotedStringOrExpression();
-		$tag->parser->stream->tryConsume(',');
-		$node->args = $tag->parser->parseArguments();
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			'$this->createTemplate(%raw, %node? + $this->params, "import")->render() %line;',
-			$context->ensureString($this->file, 'Template name'),
-			$this->args,
-			$this->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->file;
-		yield $this->args;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IncludeBlockNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IncludeBlockNode.php
deleted file mode 100644
index 439312d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IncludeBlockNode.php
+++ /dev/null
@@ -1,142 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Block;
-use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ModifierNode;
-use Latte\Compiler\Nodes\Php\Scalar;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PhpHelpers;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\TemplateParser;
-use Latte\Runtime\Template;
-
-
-/**
- * {include #name|parent|this [from 'file.latte']}
- */
-class IncludeBlockNode extends StatementNode
-{
-	public ExpressionNode $name;
-	public ?ExpressionNode $from = null;
-	public ArrayNode $args;
-	public ModifierNode $modifier;
-	public int|string|null $layer;
-	public bool $parent = false;
-
-	/** @var Block[][] */
-	public array $blocks;
-
-
-	public static function create(Tag $tag, TemplateParser $parser): static
-	{
-		$tag->outputMode = $tag::OutputRemoveIndentation;
-
-		$tag->expectArguments();
-		$node = new static;
-		$stream = $tag->parser->stream;
-		$tag->parser->tryConsumeTokenBeforeUnquotedString('block') ?? $stream->tryConsume('#');
-		$node->name = $tag->parser->parseUnquotedStringOrExpression();
-		$tokenName = $stream->peek(-1);
-
-		if ($stream->tryConsume('from')) {
-			$node->from = $tag->parser->parseUnquotedStringOrExpression();
-		}
-
-		$stream->tryConsume(',');
-		$node->args = $tag->parser->parseArguments();
-		$node->modifier = $tag->parser->parseModifier();
-
-		$node->parent = $tokenName->is('parent');
-		if ($node->parent && $node->modifier->filters) {
-			throw new CompileException('Filters are not allowed in {include parent}', $tag->position);
-
-		} elseif ($node->parent || $tokenName->is('this')) {
-			$item = $tag->closestTag(
-				[BlockNode::class, DefineNode::class],
-				fn($item) => ($item->node instanceof BlockNode || $item->node instanceof DefineNode)
-					&& $item->node->block && !$item->node->block->isDynamic(),
-			);
-			if (!$item || !($item->node instanceof BlockNode || $item->node instanceof DefineNode)) {
-				throw new CompileException("Cannot include $tokenName->text block outside of any block.", $tag->position);
-			}
-
-			assert($item->node->block !== null);
-			$node->name = $item->node->block->name;
-		}
-
-		$node->modifier->escape = !$node->modifier->removeFilter('noescape') && !$node->parent;
-		$node->blocks = &$parser->blocks;
-		$node->layer = $parser->blockLayer;
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$contentFilter = $this->modifier->filters
-			? $context->format(
-				'function ($s, $type) { $ʟ_fi = new LR\FilterInfo($type); return %modifyContent($s); }',
-				$this->modifier,
-			)
-			: ($this->modifier->escape ? PhpHelpers::dump($context->getEscaper()->export()) : '');
-
-		return $this->from
-			? $this->printBlockFrom($context, $contentFilter)
-			: $this->printBlock($context, $contentFilter);
-	}
-
-
-	private function printBlock(PrintContext $context, string $contentFilter): string
-	{
-		if ($this->name instanceof Scalar\StringNode || $this->name instanceof Scalar\IntegerNode) {
-			$staticName = (string) $this->name->value;
-			$block = ($this->layer !== null ? $this->blocks[$this->layer][$staticName] ?? null : null) ?? $this->blocks[Template::LayerLocal][$staticName] ?? null;
-		}
-
-		return $context->format(
-			'$this->render' . ($this->parent ? 'ParentBlock' : 'Block')
-			. '(%raw, %node? + '
-			. (isset($block) && !$block->parameters ? 'get_defined_vars()' : '[]')
-			. '%raw) %line;',
-			$context->ensureString($this->name, 'Block name'),
-			$this->args,
-			$contentFilter ? ", $contentFilter" : '',
-			$this->position,
-		);
-	}
-
-
-	private function printBlockFrom(PrintContext $context, string $contentFilter): string
-	{
-		assert($this->from !== null);
-		return $context->format(
-			'$this->createTemplate(%raw, %node? + $this->params, "include")->renderToContentType(%raw, %raw) %line;',
-			$context->ensureString($this->from, 'Template name'),
-			$this->args,
-			$contentFilter,
-			$context->ensureString($this->name, 'Block name'),
-			$this->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->name;
-		if ($this->from) {
-			yield $this->from;
-		}
-		yield $this->args;
-		yield $this->modifier;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IncludeFileNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IncludeFileNode.php
deleted file mode 100644
index e8f2bc8..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IncludeFileNode.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ModifierNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PhpHelpers;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {include 'file.latte' [with blocks]}
- */
-class IncludeFileNode extends StatementNode
-{
-	public ExpressionNode $file;
-	public ArrayNode $args;
-	public ModifierNode $modifier;
-	public string $mode;
-
-
-	public static function create(Tag $tag): static
-	{
-		$tag->outputMode = $tag::OutputRemoveIndentation;
-
-		$tag->expectArguments();
-		$node = new static;
-		$tag->parser->tryConsumeTokenBeforeUnquotedString('file');
-		$node->file = $tag->parser->parseUnquotedStringOrExpression();
-		$node->mode = 'include';
-
-		$stream = $tag->parser->stream;
-		if ($stream->tryConsume('with')) {
-			$stream->consume('blocks');
-			$node->mode = 'includeblock';
-		}
-
-		$stream->tryConsume(',');
-		$node->args = $tag->parser->parseArguments();
-		$node->modifier = $tag->parser->parseModifier();
-		$node->modifier->escape = !$node->modifier->removeFilter('noescape');
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			'$this->createTemplate(%raw, %node? + $this->params, %dump)->renderToContentType(%raw) %line;',
-			$context->ensureString($this->file, 'Template name'),
-			$this->args,
-			$this->mode,
-			$this->modifier->filters
-				? $context->format(
-					'function ($s, $type) { $ʟ_fi = new LR\FilterInfo($type); return %modifyContent($s); }',
-					$this->modifier,
-				)
-				: PhpHelpers::dump($this->modifier->escape ? $context->getEscaper()->export() : null),
-			$this->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->file;
-		yield $this->args;
-		yield $this->modifier;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IterateWhileNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IterateWhileNode.php
deleted file mode 100644
index be7e381..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/IterateWhileNode.php
+++ /dev/null
@@ -1,96 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\Php\ListNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {iterateWhile [$cond]} ... {/iterateWhile [$cond]}
- * Groups consecutive items in {foreach} by condition.
- */
-class IterateWhileNode extends StatementNode
-{
-	public ExpressionNode $condition;
-	public AreaNode $content;
-	public ?ExpressionNode $key;
-	public ExpressionNode|ListNode $value;
-	public bool $postTest;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$foreach = $tag->closestTag([ForeachNode::class])?->node;
-		if (!$foreach instanceof ForeachNode) {
-			throw new CompileException("Tag {{$tag->name}} must be inside {foreach} ... {/foreach}.", $tag->position);
-		}
-
-		$node = $tag->node = new static;
-		$node->postTest = $tag->parser->isEnd();
-		if (!$node->postTest) {
-			$node->condition = $tag->parser->parseExpression();
-		}
-
-		$node->key = $foreach->key;
-		$node->value = $foreach->value;
-		[$node->content, $nextTag] = yield;
-		if ($node->postTest) {
-			assert($nextTag !== null);
-			$nextTag->expectArguments();
-			$node->condition = $nextTag->parser->parseExpression();
-		}
-
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$stmt = $context->format(
-			<<<'XX'
-				if (!$iterator->hasNext() || !(%node)) {
-					break;
-				}
-				$iterator->next();
-				[%node, %node] = [$iterator->key(), $iterator->current()];
-				XX,
-			$this->condition,
-			$this->key,
-			$this->value,
-		);
-
-		$stmt = $this->postTest
-			? $this->content->print($context) . "\n" . $stmt
-			: $stmt . "\n" . $this->content->print($context);
-
-		return $context->format(
-			<<<'XX'
-				do %line {
-					%raw
-				} while (true);
-
-				XX,
-			$this->position,
-			$stmt,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->condition;
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/JumpNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/JumpNode.php
deleted file mode 100644
index 94a1963..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/JumpNode.php
+++ /dev/null
@@ -1,84 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {breakIf $cond}, {continueIf $cond}, {skipIf $cond}, {exitIf $cond}
- * Note: {skipIf} is like {continueIf} but doesn't increment $iterator->counter.
- */
-class JumpNode extends StatementNode
-{
-	public string $type;
-	public ExpressionNode $condition;
-
-
-	public static function create(Tag $tag): static
-	{
-		$tag->expectArguments();
-		$tag->outputMode = $tag->name === 'exitIf' // to not be in prepare()
-			? $tag::OutputRemoveIndentation
-			: $tag::OutputNone;
-
-		for (
-			$parent = $tag->parent;
-			$parent?->node instanceof IfNode || $parent?->node instanceof IfContentNode;
-			$parent = $parent->parent
-		);
-		$pnode = $parent?->node;
-		if (!match ($tag->name) {
-			'breakIf', 'continueIf' => $pnode instanceof ForNode || $pnode instanceof ForeachNode || $pnode instanceof WhileNode,
-			'skipIf' => $pnode instanceof ForeachNode,
-			'exitIf' => !$pnode || $pnode instanceof BlockNode || $pnode instanceof DefineNode,
-		}) {
-			throw new CompileException("Tag {{$tag->name}} is unexpected here.", $tag->position);
-		}
-
-		$last = $parent?->prefix === Tag::PrefixNone
-			? $parent->htmlElement?->parent
-			: $parent?->htmlElement;
-		$el = $tag->htmlElement;
-		while ($el && $el !== $last) {
-			$el->breakable = true;
-			$el = $el->parent;
-		}
-
-		$node = new static;
-		$node->type = $tag->name;
-		$node->condition = $tag->parser->parseExpression();
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			"if (%node) %line %raw\n",
-			$this->condition,
-			$this->position,
-			match ($this->type) {
-				'breakIf' => 'break;',
-				'continueIf' => 'continue;',
-				'skipIf' => '{ $iterator->skipRound(); continue; }',
-				'exitIf' => 'return;',
-			},
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->condition;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NAttrNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NAttrNode.php
deleted file mode 100644
index 6d3a1c6..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NAttrNode.php
+++ /dev/null
@@ -1,93 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte;
-use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Runtime as LR;
-use function is_array;
-
-
-/**
- * <div n:attr="class => $class, id => $id">
- */
-final class NAttrNode extends StatementNode
-{
-	public ArrayNode $args;
-
-
-	public static function create(Tag $tag): static
-	{
-		$tag->expectArguments();
-		$node = new static;
-		$node->args = $tag->parser->parseArguments();
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			'$ʟ_tmp = %node;
-			echo %raw::attrs($ʟ_tmp, %dump, %dump?) %line;',
-			$this->args,
-			self::class,
-			$context->getEscaper()->getContentType() === Latte\ContentType::Xml,
-			$context->hasFeature(Latte\Feature::MigrationWarnings) ?: null,
-			$this->position,
-		);
-	}
-
-
-	public static function attrs(mixed $attrs, bool $xml, bool $migrationWarnings = false): string
-	{
-		$attrs = $attrs === [$attrs[0] ?? null] ? $attrs[0] : $attrs; // checks if the value is an array, e.g. n:attr="$attrs"
-		if (!is_array($attrs)) {
-			return '';
-		}
-
-		$res = '';
-		foreach ($attrs as $name => $value) {
-			$attr = $xml ? self::formatXmlAttribute($name, $value) : self::formatHtmlAttribute($name, $value, $migrationWarnings);
-			$res .= $attr ? ' ' . $attr : '';
-		}
-
-		return $res;
-	}
-
-
-	public static function formatHtmlAttribute(mixed $name, mixed $value, bool $migrationWarnings = false): string
-	{
-		LR\HtmlHelpers::validateAttributeName($name);
-		$type = LR\HtmlHelpers::classifyAttributeType($name);
-		if ($value === null || ($value === false && $type !== 'data' && $type !== 'aria')) {
-			return '';
-		} elseif ($value === true && $type === '') {
-			return $name;
-		} elseif ($migrationWarnings && is_array($value) && $type === 'data') {
-			LR\HtmlHelpers::triggerMigrationWarning($name, "array value: previously it rendered as $name=\"val1 val2 ...\", now the attribute is JSON-encoded");
-		}
-		return LR\HtmlHelpers::{"format{$type}Attribute"}($name, $value, $migrationWarnings);
-	}
-
-
-	public static function formatXmlAttribute(mixed $name, mixed $value): string
-	{
-		LR\XmlHelpers::validateAttributeName($name);
-		return $value === false ? '' : LR\XmlHelpers::formatAttribute($name, $value);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->args;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NClassNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NClassNode.php
deleted file mode 100644
index 10993c7..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NClassNode.php
+++ /dev/null
@@ -1,53 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * <div n:class="$isActive ? active, highlight">
- */
-final class NClassNode extends StatementNode
-{
-	public ArrayNode $args;
-
-
-	public static function create(Tag $tag): static
-	{
-		assert($tag->htmlElement !== null);
-		if ($tag->htmlElement->getAttribute('class')) {
-			throw new CompileException('It is not possible to combine class with n:class.', $tag->position);
-		}
-
-		$tag->expectArguments();
-		$node = new static;
-		$node->args = $tag->parser->parseArguments();
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			'echo ($ʟ_tmp = array_filter(%node)) ? \' class="\' . LR\HtmlHelpers::escapeAttr(implode(" ", array_unique($ʟ_tmp))) . \'"\' : "" %line;',
-			$this->args,
-			$this->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->args;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NElseNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NElseNode.php
deleted file mode 100644
index ae38280..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NElseNode.php
+++ /dev/null
@@ -1,123 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Node;
-use Latte\Compiler\Nodes;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\NodeTraverser;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * <div n:if="$cond"> ... <div n:else>
- * <div n:if="$cond"> ... <div n:elseif="$cond2">
- */
-final class NElseNode extends StatementNode
-{
-	public AreaNode $content;
-	public ?ExpressionNode $condition = null;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$node = $tag->node = new static;
-		if ($tag->name === 'elseif') {
-			$tag->expectArguments();
-			$node->condition = $tag->parser->parseExpression();
-		}
-		[$node->content] = yield;
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		throw new \LogicException('Cannot directly print');
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->condition) {
-			yield $this->condition;
-		}
-		yield $this->content;
-	}
-
-
-	public static function processPass(Node $node): void
-	{
-		(new NodeTraverser)->traverse($node, function (Node $node) {
-			if ($node instanceof Nodes\FragmentNode) {
-				$node->children = self::processFragment($node->children);
-			} elseif ($node instanceof self) {
-				self::processFragment([$node]);
-			}
-		});
-	}
-
-
-	/**
-	 * @param  AreaNode[]  $children
-	 * @return AreaNode[]
-	 */
-	private static function processFragment(array $children): array
-	{
-		$currentNode = null;
-		for ($i = 0; isset($children[$i]); $i++) {
-			$child = $children[$i];
-
-			if ($child instanceof IfNode
-				|| $child instanceof ForeachNode
-				|| $child instanceof TryNode
-				|| $child instanceof IfChangedNode
-				|| $child instanceof IfContentNode
-			) {
-				$currentNode = $child;
-
-			} elseif ($child instanceof Nodes\TextNode && trim($child->content) === '') {
-				continue;
-
-			} elseif ($child instanceof self) {
-				$nElse = $child;
-				if ($currentNode === null) {
-					throw new CompileException('n:else must be immediately after n:if, n:foreach etc', $nElse->position);
-				} elseif ($currentNode->else) {
-					throw new CompileException('Multiple "else" found.', $nElse->position);
-				}
-
-				if ($nElse->condition) {
-					$elseIfNode = new IfNode;
-					$elseIfNode->condition = $nElse->condition;
-					$elseIfNode->then = $nElse->content;
-					$elseIfNode->position = $nElse->position;
-					$currentNode->else = $elseIfNode;
-					$currentNode = $elseIfNode;
-				} else {
-					$currentNode->else = $nElse->content;
-					$currentNode = null;
-				}
-
-				unset($children[$i]);
-				for ($o = 1; ($children[$i - $o] ?? null) instanceof Nodes\TextNode; $o++) {
-					unset($children[$i - $o]);
-				}
-			} else {
-				$currentNode = null;
-			}
-		}
-
-		return array_values($children);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NTagNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NTagNode.php
deleted file mode 100644
index bace13b..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/NTagNode.php
+++ /dev/null
@@ -1,47 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Html\TagNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use function preg_match;
-
-
-/**
- * <div n:tag="$useSpan ? span">
- */
-final class NTagNode extends StatementNode
-{
-	public static function create(Tag $tag): void
-	{
-		assert($tag->htmlElement !== null);
-		if (preg_match('(style$|script$)iA', $tag->htmlElement->name)) {
-			throw new CompileException('Attribute n:tag is not allowed in <script> or <style>', $tag->position);
-		}
-
-		$tag->expectArguments();
-		$tag->htmlElement->dynamicTag ??= new TagNode($tag->htmlElement);
-		assert($tag->htmlElement->dynamicTag instanceof TagNode);
-		$tag->htmlElement->dynamicTag->name = $tag->parser->parseExpression();
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		throw new \LogicException('Cannot directly print');
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ParametersNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ParametersNode.php
deleted file mode 100644
index bcc8e1c..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/ParametersNode.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\Php\Expression\AssignNode;
-use Latte\Compiler\Nodes\Php\Expression\VariableNode;
-use Latte\Compiler\Nodes\Php\ParameterNode;
-use Latte\Compiler\Nodes\Php\Scalar\NullNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\Token;
-use Latte\Helpers;
-use function is_string;
-
-
-/**
- * {parameters [Type] $name [= default], ...}
- * Declares and filters template parameters.
- */
-class ParametersNode extends StatementNode
-{
-	/** @var ParameterNode[] */
-	public array $parameters = [];
-
-
-	public static function create(Tag $tag): static
-	{
-		if (!$tag->isInHead()) {
-			throw new CompileException('{parameters} is allowed only in template header.', $tag->position);
-		}
-		$tag->expectArguments();
-		$node = new static;
-		$node->parameters = self::parseParameters($tag);
-		return $node;
-	}
-
-
-	/** @return ParameterNode[] */
-	private static function parseParameters(Tag $tag): array
-	{
-		$stream = $tag->parser->stream;
-		$params = [];
-		do {
-			$type = $tag->parser->parseType();
-
-			$save = $stream->getIndex();
-			$expr = $stream->is(Token::Php_Variable) ? $tag->parser->parseExpression() : null;
-			if ($expr instanceof VariableNode && is_string($expr->name)) {
-				$params[] = new ParameterNode($expr, new NullNode, $type);
-			} elseif (
-				$expr instanceof AssignNode
-				&& $expr->var instanceof VariableNode
-				&& is_string($expr->var->name)
-			) {
-				$params[] = new ParameterNode($expr->var, $expr->expr, $type);
-			} else {
-				$stream->seek($save);
-				$stream->throwUnexpectedException(addendum: ' in ' . $tag->getNotation());
-			}
-		} while ($stream->tryConsume(',') && !$stream->peek()->isEnd());
-
-		return $params;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$context->paramsExtraction = $this->parameters;
-		return '';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->parameters as &$param) {
-			yield $param;
-		}
-		Helpers::removeNulls($this->parameters);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/RawPhpNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/RawPhpNode.php
deleted file mode 100644
index edf2e3d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/RawPhpNode.php
+++ /dev/null
@@ -1,51 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use function preg_match, trim;
-
-
-/**
- * {php code} (requires RawPhpExtension)
- */
-class RawPhpNode extends StatementNode
-{
-	public string $code;
-
-
-	public static function create(Tag $tag): static
-	{
-		$tag->expectArguments();
-		while (!$tag->parser->stream->consume()->isEnd());
-		$node = new static;
-		$node->code = trim($tag->parser->text);
-		if (!preg_match('~[;}]$~', $node->code)) {
-			$node->code .= ';';
-		}
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			'%line; %raw ',
-			$this->position,
-			$this->code,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/RollbackNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/RollbackNode.php
deleted file mode 100644
index f7eff38..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/RollbackNode.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {rollback}
- * Discards {try} block output and jumps to {else}.
- */
-class RollbackNode extends StatementNode
-{
-	public static function create(Tag $tag): static
-	{
-		if (!$tag->closestTag([TryNode::class])) {
-			throw new CompileException('Tag {rollback} must be inside {try} ... {/try}.', $tag->position);
-		}
-
-		return new static;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return 'throw new Latte\Essential\RollbackException;';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/SpacelessNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/SpacelessNode.php
deleted file mode 100644
index 080811b..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/SpacelessNode.php
+++ /dev/null
@@ -1,61 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\ContentType;
-
-
-/**
- * {spaceless} ... {/spaceless}
- * Removes whitespace between HTML tags.
- */
-class SpacelessNode extends StatementNode
-{
-	public AreaNode $content;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$node = $tag->node = new static;
-		[$node->content] = yield;
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			<<<'XX'
-				ob_start('Latte\Essential\Filters::%raw', 4096) %line;
-				try {
-					%node
-				} finally {
-					ob_end_flush();
-				}
-
-
-				XX,
-			$context->getEscaper()->getContentType() === ContentType::Html
-				? 'spacelessHtmlHandler'
-				: 'spacelessText',
-			$this->position,
-			$this->content,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/SwitchNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/SwitchNode.php
deleted file mode 100644
index 9914eca..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/SwitchNode.php
+++ /dev/null
@@ -1,121 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\FragmentNode;
-use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\Nodes\TextNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {switch $expr} {case $val} ... {default} ... {/switch}
- * Uses strict comparison (===) without fallthrough.
- */
-class SwitchNode extends StatementNode
-{
-	public ?ExpressionNode $expression;
-
-	/** @var array<array{?ArrayNode, FragmentNode}> */
-	public array $cases = [];
-
-
-	/** @return \Generator<int, ?list<string>, array{FragmentNode, Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		if ($tag->isNAttribute()) {
-			throw new CompileException('Attribute n:switch is not supported.', $tag->position);
-		}
-
-		$node = $tag->node = new static;
-		$node->expression = $tag->parser->isEnd()
-			? null
-			: $tag->parser->parseExpression();
-
-		[$content, $nextTag] = yield ['case', 'default'];
-		foreach ($content->children as $child) {
-			if (!$child instanceof TextNode || !$child->isWhitespace()) {
-				throw new CompileException('No content is allowed between {switch} and {case}', $child->position);
-			}
-		}
-
-		$default = 0;
-		while (true) {
-			if ($nextTag->name === 'case') {
-				$nextTag->expectArguments();
-				$case = $nextTag->parser->parseArguments();
-				[$content, $nextTag] = yield ['case', 'default'];
-				$node->cases[] = [$case, $content];
-
-			} elseif ($nextTag->name === 'default') {
-				if ($default++) {
-					throw new CompileException('Tag {switch} may only contain one {default} clause.', $nextTag->position);
-				}
-				[$content, $nextTag] = yield ['case', 'default'];
-				$node->cases[] = [null, $content];
-
-			} else {
-				return $node;
-			}
-		}
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$res = $context->format(
-			'$ʟ_switch = (%node) %line;',
-			$this->expression,
-			$this->position,
-		);
-		$first = true;
-		$default = null;
-		foreach ($this->cases as $i => [$case, $content]) {
-			if (!$case) {
-				$default = $content->print($context);
-				continue;
-			} elseif (!$first) {
-				$res .= 'else';
-			}
-
-			$first = false;
-			$single = count($case->items) === 1 && !$case->items[0]->unpack;
-			$res .= $context->format(
-				$single
-					? 'if ($ʟ_switch === (%node)) %line { %node } '
-					: 'if (in_array($ʟ_switch, %node, true)) %line { %node } ',
-				$single ? $case->items[0]->value : $case,
-				$this->tagRanges[$i + 1] ?? null,
-				$content,
-			);
-		}
-
-		if ($default) {
-			$res .= $first ? $default : 'else { ' . $default . ' } ';
-		}
-		return $res;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		if ($this->expression) {
-			yield $this->expression;
-		}
-		foreach ($this->cases as [&$case, &$stmt]) {
-			if ($case) {
-				yield $case;
-			}
-			yield $stmt;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TemplatePrintNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TemplatePrintNode.php
deleted file mode 100644
index 4d47c87..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TemplatePrintNode.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Node;
-use Latte\Compiler\Nodes;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\NodeTraverser;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\Token;
-use function array_unshift;
-
-
-/**
- * {templatePrint [ClassName]}
- * Suggests parameter class for {templateType}.
- */
-class TemplatePrintNode extends StatementNode
-{
-	public ?string $template;
-
-
-	public static function create(Tag $tag): static
-	{
-		$node = new static;
-		$node->template = $tag->parser->stream->tryConsume(Token::Php_Identifier, Token::Php_NameFullyQualified, Token::Php_NameQualified)?->text;
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(<<<'XX'
-			$ʟ_bp = new Latte\Essential\Blueprint;
-			$ʟ_bp->printBegin();
-			$ʟ_bp->printClass($ʟ_bp->generateTemplateClass($this->getParameters(), extends: %dump));
-			$ʟ_bp->printEnd();
-			exit;
-			XX, $this->template);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-
-
-	/**
-	 * Pass: moves this node to head.
-	 */
-	public static function moveToHeadPass(Nodes\TemplateNode $templateNode): void
-	{
-		(new NodeTraverser)->traverse($templateNode->main, function (Node $node) use ($templateNode) {
-			if ($node instanceof self) {
-				array_unshift($templateNode->head->children, $node);
-				return new Nodes\NopNode;
-			}
-		});
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TemplateTypeNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TemplateTypeNode.php
deleted file mode 100644
index 579f3b7..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TemplateTypeNode.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\CompileException;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {templateType App\MyTemplateClass}
- * Declares parameter types via class for IDE autocompletion.
- */
-class TemplateTypeNode extends StatementNode
-{
-	public static function create(Tag $tag): static
-	{
-		if (!$tag->isInHead()) {
-			throw new CompileException('{templateType} is allowed only in template header.', $tag->position);
-		}
-		$tag->expectArguments('class name');
-		$tag->parser->parseExpression();
-		return new static;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TraceNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TraceNode.php
deleted file mode 100644
index 3ca5224..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TraceNode.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {trace}
- * Throws exception with template stack trace.
- */
-class TraceNode extends StatementNode
-{
-	public static function create(Tag $tag): static
-	{
-		return new static;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			'Latte\Essential\Tracer::throw() %line;',
-			$this->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TranslateNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TranslateNode.php
deleted file mode 100644
index 1782e54..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TranslateNode.php
+++ /dev/null
@@ -1,104 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\NodeHelpers;
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\NopNode;
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\ModifierNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\Nodes\TextNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Essential\TranslatorExtension;
-use function array_unshift, is_array, is_string;
-
-
-/**
- * {translate} ... {/translate}
- * Translates block content.
- */
-class TranslateNode extends StatementNode
-{
-	public AreaNode $content;
-	public ModifierNode $modifier;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static|NopNode> */
-	public static function create(Tag $tag, ?callable $translator): \Generator
-	{
-		$tag->outputMode = $tag::OutputKeepIndentation;
-
-		$node = $tag->node = new static;
-		$args = $tag->parser->parseArguments();
-		$node->modifier = $tag->parser->parseModifier();
-		$node->modifier->escape = !$node->modifier->removeFilter('noescape');
-		if ($tag->void) {
-			return new NopNode;
-		}
-
-		[$node->content] = yield;
-
-		if ($text = NodeHelpers::toText($node->content)) {
-			if ($translator
-				&& is_array($values = TranslatorExtension::toValue($args))
-				&& is_string($translation = $translator($text, ...$values))
-			) {
-				$node->content = new TextNode($translation);
-				return $node;
-			}
-			$node->content = new TextNode($text);
-		}
-
-		array_unshift($node->modifier->filters, new Php\FilterNode(new Php\IdentifierNode('translate'), $args->toArguments()));
-
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if ($this->content instanceof TextNode) {
-			return $context->format(
-				<<<'XX'
-					$ʟ_fi = new LR\FilterInfo(%dump);
-					echo %modifyContent(%dump) %line;
-					XX,
-				$context->getEscaper()->export(),
-				$this->modifier,
-				$this->content->content,
-				$this->position,
-			);
-
-		} else {
-			return $context->format(
-				<<<'XX'
-					ob_start(fn() => ''); try {
-						%node
-					} finally {
-						$ʟ_tmp = ob_get_clean();
-					}
-					$ʟ_fi = new LR\FilterInfo(%dump);
-					echo %modifyContent($ʟ_tmp) %line;
-					XX,
-				$this->content,
-				$context->getEscaper()->export(),
-				$this->modifier,
-				$this->position,
-			);
-		}
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->content;
-		yield $this->modifier;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TryNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TryNode.php
deleted file mode 100644
index 14a06c8..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/TryNode.php
+++ /dev/null
@@ -1,73 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {try} ... {else} ... {/try}
- * Discards block output on exception, renders {else} instead.
- */
-class TryNode extends StatementNode
-{
-	public AreaNode $try;
-	public ?AreaNode $else = null;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$node = $tag->node = new static;
-		[$node->try, $nextTag] = yield ['else'];
-		if ($nextTag?->name === 'else') {
-			[$node->else] = yield;
-		}
-
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			<<<'XX'
-				$ʟ_try[%dump] = [$ʟ_it ?? null];
-				ob_start(fn() => '');
-				try %line {
-					%node
-				} catch (Throwable $ʟ_e) {
-					ob_clean();
-					if (!($ʟ_e instanceof Latte\Essential\RollbackException) && isset($this->global->coreExceptionHandler)) {
-						($this->global->coreExceptionHandler)($ʟ_e, $this);
-					}
-					%node
-				} finally {
-					echo ob_get_clean();
-					$iterator = $ʟ_it = $ʟ_try[%0.dump][0];
-				}
-				XX,
-			$context->generateId(),
-			$this->position,
-			$this->try,
-			$this->else,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->try;
-		if ($this->else) {
-			yield $this->else;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/VarNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/VarNode.php
deleted file mode 100644
index 968bfa3..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/VarNode.php
+++ /dev/null
@@ -1,106 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\Php\Expression\AssignNode;
-use Latte\Compiler\Nodes\Php\Expression\AssignOpNode;
-use Latte\Compiler\Nodes\Php\Expression\AuxiliaryNode;
-use Latte\Compiler\Nodes\Php\Expression\TernaryNode;
-use Latte\Compiler\Nodes\Php\Expression\VariableNode;
-use Latte\Compiler\Nodes\Php\Scalar\NullNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\Token;
-use Latte\Helpers;
-use function assert, implode, is_string;
-
-
-/**
- * {var [type] $name = value}
- * {default $name = value}
- */
-class VarNode extends StatementNode
-{
-	public bool $default;
-
-	/** @var AssignNode[] */
-	public array $assignments = [];
-
-
-	public static function create(Tag $tag): static
-	{
-		$tag->expectArguments();
-		$node = new static;
-		$node->default = $tag->name === 'default';
-		$node->assignments = self::parseAssignments($tag, $node->default);
-		return $node;
-	}
-
-
-	/** @return AssignNode[] */
-	private static function parseAssignments(Tag $tag, bool $default): array
-	{
-		$stream = $tag->parser->stream;
-		$res = [];
-		do {
-			$tag->parser->parseType();
-
-			$save = $stream->getIndex();
-			$expr = $stream->is(Token::Php_Variable) ? $tag->parser->parseExpression() : null;
-			if ($expr instanceof VariableNode) {
-				$res[] = new AssignNode($expr, new NullNode);
-			} elseif ($expr instanceof AssignNode && (!$default || $expr->var instanceof VariableNode)) {
-				$res[] = $expr;
-			} else {
-				$stream->seek($save);
-				$stream->throwUnexpectedException(addendum: ' in ' . $tag->getNotation());
-			}
-		} while ($stream->tryConsume(',') && !$stream->peek()->isEnd());
-
-		return $res;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$res = [];
-		foreach ($this->assignments as $assign) {
-			if ($this->default) {
-				assert($assign->var instanceof VariableNode);
-				assert(is_string($assign->var->name));
-				$varName = $assign->var->name;
-				$assign = new AssignOpNode(
-					$assign->var,
-					'??',
-					new TernaryNode(
-						new AuxiliaryNode(fn() => 'array_key_exists(' . $context->encodeString($varName) . ', get_defined_vars())'),
-						new NullNode,
-						$assign->expr,
-					),
-				);
-			}
-			$res[] = $assign->print($context);
-		}
-
-		return $context->format(
-			'%raw %line;',
-			implode('; ', $res),
-			$this->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		foreach ($this->assignments as &$assign) {
-			yield $assign;
-		}
-		Helpers::removeNulls($this->assignments);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/VarPrintNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/VarPrintNode.php
deleted file mode 100644
index 838af8b..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/VarPrintNode.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {varPrint [all]}
- * Suggests {varType} declarations for variables.
- */
-class VarPrintNode extends StatementNode
-{
-	public bool $all;
-
-
-	public static function create(Tag $tag): static
-	{
-		$stream = $tag->parser->stream;
-		$node = new static;
-		$node->all = $stream->consume()->text === 'all';
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		$vars = $this->all
-			? 'get_defined_vars()'
-			: 'array_diff_key(get_defined_vars(), $this->getParameters())';
-		return <<<XX
-			\$ʟ_bp = new Latte\\Essential\\Blueprint;
-			\$ʟ_bp->printBegin();
-			\$ʟ_bp->printVars($vars);
-			\$ʟ_bp->printEnd();
-			exit;
-			XX;
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/VarTypeNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/VarTypeNode.php
deleted file mode 100644
index 1d613f9..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/VarTypeNode.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-use Latte\Compiler\Token;
-
-
-/**
- * {varType Type $name}
- * Declares variable type for IDE autocompletion.
- */
-class VarTypeNode extends StatementNode
-{
-	public static function create(Tag $tag): static
-	{
-		$tag->expectArguments();
-		$tag->parser->parseType();
-		$tag->parser->stream->consume(Token::Php_Variable);
-		return new static;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '';
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		false && yield;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/WhileNode.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/WhileNode.php
deleted file mode 100644
index d2365ca..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Nodes/WhileNode.php
+++ /dev/null
@@ -1,81 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential\Nodes;
-
-use Latte\Compiler\Nodes\AreaNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {while $cond} ... {/while}
- * {while} ... {/while $cond}
- */
-class WhileNode extends StatementNode
-{
-	public ExpressionNode $condition;
-	public AreaNode $content;
-	public bool $postTest;
-
-
-	/** @return \Generator<int, ?list<string>, array{AreaNode, ?Tag}, static> */
-	public static function create(Tag $tag): \Generator
-	{
-		$node = $tag->node = new static;
-		$node->postTest = $tag->parser->isEnd();
-		if (!$node->postTest) {
-			$node->condition = $tag->parser->parseExpression();
-		}
-
-		[$node->content, $nextTag] = yield;
-		if ($node->postTest) {
-			assert($nextTag !== null);
-			$nextTag->expectArguments();
-			$node->condition = $nextTag->parser->parseExpression();
-		}
-
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $this->postTest
-			? $context->format(
-				<<<'XX'
-					do %line {
-						%node
-					} while (%node);
-
-					XX,
-				$this->position,
-				$this->content,
-				$this->condition,
-			)
-			: $context->format(
-				<<<'XX'
-					while (%node) %line {
-						%node
-					}
-
-					XX,
-				$this->condition,
-				$this->position,
-				$this->content,
-			);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->condition;
-		yield $this->content;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Passes.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Passes.php
deleted file mode 100644
index d829bfe..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Passes.php
+++ /dev/null
@@ -1,134 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-use Latte\CompileException;
-use Latte\Compiler\Node;
-use Latte\Compiler\Nodes\Html\ElementNode;
-use Latte\Compiler\Nodes\Html\ExpressionAttributeNode;
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\Nodes\Php\Expression\VariableNode;
-use Latte\Compiler\Nodes\PrintNode;
-use Latte\Compiler\Nodes\TemplateNode;
-use Latte\Compiler\Nodes\TextNode;
-use Latte\Compiler\NodeTraverser;
-use Latte\ContentType;
-use Latte\Engine;
-use Latte\Feature;
-use Latte\Runtime\HtmlHelpers;
-use function is_string;
-
-
-/**
- * Built-in compiler passes.
- */
-final class Passes
-{
-	public function __construct(
-		private Engine $engine,
-	) {
-	}
-
-
-	/**
-	 * Replaces calls to registered functions with CustomFunctionCallNode wrappers.
-	 */
-	public function customFunctionsPass(TemplateNode $node): void
-	{
-		$functions = $this->engine->getFunctions();
-		(new NodeTraverser)->traverse($node, function (Node $node) use ($functions) {
-			if (($node instanceof Expression\FunctionCallNode)
-				&& $node->name instanceof Php\NameNode
-				&& isset($functions[$node->name->name])
-			) {
-				if ($node->isPartialFunction()) {
-					throw new CompileException("Custom function '{$node->name->name}' cannot be used as partial function.", $node->position);
-				}
-
-				/** @var array<Php\ArgumentNode> $args */
-				$args = $node->args;
-				return new Nodes\CustomFunctionCallNode($node->name, $args, $node->position);
-			}
-		});
-	}
-
-
-	/**
-	 * Forbids use of internal Latte variables ($ʟ_xxx), $GLOBALS, and $this in templates.
-	 */
-	public function forbiddenVariablesPass(TemplateNode $node): void
-	{
-		(new NodeTraverser)->traverse($node, function (Node $node) {
-			if ($node instanceof VariableNode
-				&& is_string($node->name)
-				&& (preg_match('/ʟ_|__|GLOBALS$|this$/A', $node->name))
-			) {
-				if (preg_match('/__|this$/A', $node->name) && !$this->engine->hasFeature(Feature::StrictParsing)) {
-					trigger_error("Using the \$$node->name variable in the template is deprecated ($node->position)", E_USER_DEPRECATED);
-					return;
-				}
-				throw new CompileException("Forbidden variable \$$node->name.", $node->position);
-			}
-		});
-	}
-
-
-	/**
-	 * Detects print statements immediately followed by quotes inside <script> and throws an error.
-	 */
-	public function scriptTagQuotesPass(TemplateNode $node): void
-	{
-		if ($node->contentType !== ContentType::Html) {
-			return;
-		}
-		(new NodeTraverser)->traverse($node, function (Node $node) {
-			if ($node instanceof ElementNode && $node->is('script')) {
-				$type = $node->getAttribute('type');
-				if ((is_string($type) || $type === null)
-					&& HtmlHelpers::classifyScriptType((string) $type) === ContentType::JavaScript
-				) {
-					$prev = null;
-					foreach ($node->content ?? [] as $child) {
-						if ($prev instanceof PrintNode && $child instanceof TextNode) {
-							if (preg_match('/^["\']/', $child->content)) {
-								throw new CompileException('Do not place print statement {...} inside quotes in JavaScript.', $prev->position);
-							}
-						}
-						$prev = $child;
-					}
-				}
-			}
-		});
-	}
-
-
-	/**
-	 * Validates and secures potentially dangerous URLs attributes in HTML elements.
-	 */
-	public function checkUrlsPass(TemplateNode $node): void
-	{
-		if ($node->contentType !== ContentType::Html) {
-			return;
-		}
-
-		$elem = null;
-		(new NodeTraverser)->traverse($node, function (Node $node) use (&$elem) {
-			if ($node instanceof ElementNode) {
-				$elem = $node;
-
-			} elseif ($node instanceof ExpressionAttributeNode
-				&& $elem && HtmlHelpers::isUrlAttribute($elem->name, $node->name)
-				&& !$node->modifier->removeFilter('nocheck') && !$node->modifier->removeFilter('noCheck')
-				&& !$node->modifier->hasFilter('datastream') && !$node->modifier->hasFilter('dataStream')
-			) {
-				$node->modifier->filters[] = new Php\FilterNode(new Php\IdentifierNode('checkUrl'));
-			}
-		});
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/RawPhpExtension.php b/generated/php/vendor/latte/latte/src/Latte/Essential/RawPhpExtension.php
deleted file mode 100644
index 989598b..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/RawPhpExtension.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-use Latte;
-
-
-/**
- * Raw PHP in {php ...}
- */
-final class RawPhpExtension extends Latte\Extension
-{
-	public function getTags(): array
-	{
-		return [
-			'php' => Nodes\RawPhpNode::create(...),
-		];
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/RollbackException.php b/generated/php/vendor/latte/latte/src/Latte/Essential/RollbackException.php
deleted file mode 100644
index f7a90a9..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/RollbackException.php
+++ /dev/null
@@ -1,14 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-
-/** @internal */
-class RollbackException extends \Exception
-{
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/Tracer.php b/generated/php/vendor/latte/latte/src/Latte/Essential/Tracer.php
deleted file mode 100644
index 2c10ce3..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/Tracer.php
+++ /dev/null
@@ -1,116 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-use Latte;
-use Latte\Engine;
-use Latte\Helpers;
-use Latte\Runtime\Template;
-use function count, is_string;
-
-
-/**
- * @internal
- */
-final class Tracer
-{
-	/**
-	 * Throws a RuntimeException with a backtrace mapped back to Latte template source positions.
-	 */
-	public static function throw(): void
-	{
-		$e = new Latte\RuntimeException('Your location in Latte templates');
-		$trace = debug_backtrace();
-		$source = Helpers::mapCompiledToSource($trace[0]['file'] ?? '', $trace[0]['line'] ?? 0);
-		$props = [
-			'file' => $source['name'] ?? '',
-			'line' => $source['line'] ?? 0,
-			'trace' => self::generateTrace($trace),
-		];
-		foreach ($props as $name => $value) {
-			$ref = new \ReflectionProperty('Exception', $name);
-			$ref->setValue($e, $value);
-		}
-
-		throw $e;
-	}
-
-
-	/**
-	 * @param  array<array{file?: string, line?: int, function?: string, object?: object, args?: mixed[]}>  $trace
-	 * @return array<array{function: string, file: string, line: int, args: mixed[]}>
-	 */
-	private static function generateTrace(array $trace): array
-	{
-		$res = [];
-		foreach ($trace as $i => $item) {
-			$object = $item['object'] ?? null;
-			if ($object instanceof Template) {
-				$method = $item['function'] ?? '';
-
-				if (str_starts_with($method, 'block')) {
-					// begin of block
-					$comment = (new \ReflectionMethod($object, $method))->getDocComment() ?: '';
-					$res[] = [
-						'function' => preg_match('~(\{.+\})~', $comment, $m) ? $m[1] : '?',
-						'file' => $object->getName(),
-						'line' => preg_match('~ on line (\d+)~', $comment, $m) ? (int) $m[1] : 0,
-						'args' => [], // $L_args is not true, will be added in next step
-					];
-
-				} elseif ($method === 'render' && $object->getReferenceType()) {
-					// begin of included/extended/... file
-					$res[] = [
-						'function' => '{' . $object->getReferenceType() . ' ' . basename($object->getName()) . '}',
-						'file' => $object->getReferringTemplate()?->getName() ?? '',
-						'line' => 0, // will be added in next step
-						'args' => self::filterParams($object->getParameters()),
-					];
-
-				} elseif ($method === 'renderToContentType') {
-					// {include file}, extends, embed, sandbox, ...
-					$res[count($res) - 1]['line'] = Helpers::mapCompiledToSource($item['file'] ?? '', $item['line'] ?? 0)['line'] ?? 0;
-
-				} elseif ($method === 'renderBlock' || $method === 'renderParentBlock') {
-					// {include block}
-					$args = $item['args'] ?? [];
-					$res[count($res) - 1]['args'] = self::filterParams($args[1] + $object->getParameters());
-
-					if ($method !== 'renderBlock' || isset($args[2])) { // is not {block}
-						$res[] = [
-							'function' => '{include ' . ($method === 'renderParentBlock' ? 'parent' : $args[0]) . '}',
-							'file' => $object->getName(),
-							'line' => Helpers::mapCompiledToSource($item['file'] ?? '', $item['line'] ?? 0)['line'] ?? 0,
-							'args' => self::filterParams($args[1]),
-						];
-					}
-				}
-			} elseif ($object instanceof Engine) {
-				break;
-			}
-		}
-
-		return $res;
-	}
-
-
-	/**
-	 * @param  array<mixed>  $params
-	 * @return array<mixed>
-	 */
-	private static function filterParams(array $params): array
-	{
-		foreach ($params as $key => $foo) {
-			if (is_string($key) && str_starts_with($key, 'ʟ_')) {
-				unset($params[$key]);
-			}
-		}
-
-		return $params;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Essential/TranslatorExtension.php b/generated/php/vendor/latte/latte/src/Latte/Essential/TranslatorExtension.php
deleted file mode 100644
index 6d08ab4..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Essential/TranslatorExtension.php
+++ /dev/null
@@ -1,106 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Essential;
-
-use Latte;
-use Latte\Compiler\NodeHelpers;
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\PrintNode;
-use Latte\Compiler\Tag;
-use Latte\Engine;
-use Nette\Localization\Translator;
-use function array_unshift, is_array, is_string;
-
-
-/**
- * Extension for translations.
- */
-final class TranslatorExtension extends Latte\Extension
-{
-	private ?\Closure $translator;
-
-
-	public function __construct(
-		callable|Translator|null $translator,
-		private ?string $key = null,
-	) {
-		$this->translator = match (true) {
-			$translator === null => null,
-			$translator instanceof Translator => $translator->translate(...),
-			default => $translator(...),
-		};
-	}
-
-
-	public function getTags(): array
-	{
-		return [
-			'_' => $this->parseTranslate(...),
-			'translate' => fn(Tag $tag) => yield from Nodes\TranslateNode::create($tag, $this->key ? $this->translator : null),
-		];
-	}
-
-
-	public function getFilters(): array
-	{
-		return [
-			'translate' => fn(Latte\Runtime\FilterInfo $fi, ...$args) => $this->translator
-				? ($this->translator)(...$args)
-				: $args[0],
-		];
-	}
-
-
-	public function getCacheKey(Engine $engine): mixed
-	{
-		return $this->key;
-	}
-
-
-	/**
-	 * {_ ...}
-	 */
-	private function parseTranslate(Tag $tag): PrintNode
-	{
-		$tag->outputMode = $tag::OutputKeepIndentation;
-		$tag->expectArguments();
-		$node = new PrintNode;
-		$node->expression = $tag->parser->parseUnquotedStringOrExpression();
-		$args = new Php\Expression\ArrayNode;
-		if ($tag->parser->stream->tryConsume(',')) {
-			$args = $tag->parser->parseArguments();
-		}
-
-		$node->modifier = $tag->parser->parseModifier();
-		$node->modifier->escape = !$node->modifier->removeFilter('noescape');
-
-		if ($this->translator
-			&& $this->key
-			&& ($expr = self::toValue($node->expression))
-			&& is_array($values = self::toValue($args))
-			&& is_string($translation = ($this->translator)($expr, ...$values))
-		) {
-			$node->expression = new Php\Scalar\StringNode($translation);
-			return $node;
-		}
-
-		array_unshift($node->modifier->filters, new Php\FilterNode(new Php\IdentifierNode('translate'), $args->toArguments()));
-		return $node;
-	}
-
-
-	public static function toValue(ExpressionNode $args): mixed
-	{
-		try {
-			return NodeHelpers::toValue($args, constants: true);
-		} catch (\InvalidArgumentException) {
-			return null;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Extension.php b/generated/php/vendor/latte/latte/src/Latte/Extension.php
deleted file mode 100644
index f626525..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Extension.php
+++ /dev/null
@@ -1,103 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte;
-
-use function get_defined_vars;
-
-
-/**
- * Latte extension.
- */
-abstract class Extension
-{
-	/**
-	 * Initializes before template is compiled.
-	 */
-	public function beforeCompile(Engine $engine): void
-	{
-	}
-
-
-	/**
-	 * Returns a list of parsers for Latte tags.
-	 * @return array<string, callable(Compiler\Tag, Compiler\TemplateParser): (Compiler\Node|\Generator|void)|\stdClass>
-	 */
-	public function getTags(): array
-	{
-		return [];
-	}
-
-
-	/**
-	 * Returns a list of compiler passes.
-	 * @return array<string, callable(Compiler\Nodes\TemplateNode): void|\stdClass>
-	 */
-	public function getPasses(): array
-	{
-		return [];
-	}
-
-
-	/**
-	 * Returns a list of |filters.
-	 * @return array<string, callable>
-	 */
-	public function getFilters(): array
-	{
-		return [];
-	}
-
-
-	/**
-	 * Returns a list of functions used in templates.
-	 * @return array<string, callable>
-	 */
-	public function getFunctions(): array
-	{
-		return [];
-	}
-
-
-	/**
-	 * Returns a list of providers.
-	 * @return array<string, mixed>
-	 */
-	public function getProviders(): array
-	{
-		return [];
-	}
-
-
-	/**
-	 * Returns a value that invalidates the template cache when the extension configuration changes.
-	 */
-	public function getCacheKey(Engine $engine): mixed
-	{
-		return null;
-	}
-
-
-	/**
-	 * Initializes before template is rendered.
-	 */
-	public function beforeRender(Runtime\Template $template): void
-	{
-	}
-
-
-	/**
-	 * Wraps callable with ordering metadata for tags and passes.
-	 * @param  array<string>|string  $before
-	 * @param  array<string>|string  $after
-	 */
-	public static function order(callable $subject, array|string $before = [], array|string $after = []): \stdClass
-	{
-		$subject = $subject(...);
-		return (object) get_defined_vars();
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Helpers.php b/generated/php/vendor/latte/latte/src/Latte/Helpers.php
deleted file mode 100644
index 0580883..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Helpers.php
+++ /dev/null
@@ -1,234 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte;
-
-use function array_filter, array_keys, array_unique, count, in_array, is_array, is_object, is_string, levenshtein, strlen, strpos;
-use const PHP_VERSION_ID;
-
-
-/**
- * Latte helpers.
- * @internal
- */
-class Helpers
-{
-	/**
-	 * Finds the best suggestion.
-	 * @param  string[]  $items
-	 */
-	public static function getSuggestion(array $items, string $value): ?string
-	{
-		$best = null;
-		$min = (strlen($value) / 4 + 1) * 10 + .1;
-		foreach (array_unique($items) as $item) {
-			if (($len = levenshtein($item, $value, 10, 11, 10)) > 0 && $len < $min) {
-				$min = $len;
-				$best = $item;
-			}
-		}
-
-		return $best;
-	}
-
-
-	/**
-	 * Returns a reflection object for the given callable.
-	 * Intentionally without callable type hint to avoid unhelpful error messages.
-	 */
-	public static function toReflection(mixed $callable): \ReflectionFunctionAbstract
-	{
-		if (is_string($callable) && strpos($callable, '::')) {
-			return PHP_VERSION_ID < 80300
-				? new \ReflectionMethod($callable)
-				: \ReflectionMethod::createFromMethodName($callable);
-		} elseif (is_array($callable)) {
-			return new \ReflectionMethod($callable[0], $callable[1]);
-		} elseif (is_object($callable) && !$callable instanceof \Closure) {
-			return new \ReflectionMethod($callable, '__invoke');
-		} else {
-			return new \ReflectionFunction($callable);
-		}
-	}
-
-
-	/**
-	 * Sorts items by before/after ordering constraints defined as \stdClass objects.
-	 * @param  array<string, mixed|\stdClass>  $list
-	 * @return array<string, mixed|\stdClass>
-	 */
-	public static function sortBeforeAfter(array $list): array
-	{
-		$names = array_keys($list);
-
-		// Build adjacency list and in-degree count
-		// Edge A → B means "A must come before B"
-		$graph = array_fill_keys($names, []);
-		$inDegree = array_fill_keys($names, 0);
-
-		foreach ($list as $name => $info) {
-			if (!$info instanceof \stdClass) {
-				continue;
-			}
-
-			// "before: X" means this node → X (this comes before X)
-			foreach ((array) ($info->before ?? []) as $target) {
-				if ($target === '*') {
-					foreach ($names as $other) {
-						if ($other !== $name && !in_array($other, $graph[$name], true)) {
-							$graph[$name][] = $other;
-							$inDegree[$other]++;
-						}
-					}
-				} elseif (isset($list[$target]) && $target !== $name) {
-					if (!in_array($target, $graph[$name], true)) {
-						$graph[$name][] = $target;
-						$inDegree[$target]++;
-					}
-				}
-			}
-
-			// "after: X" means X → this node (X comes before this)
-			foreach ((array) ($info->after ?? []) as $target) {
-				if ($target === '*') {
-					foreach ($names as $other) {
-						if ($other !== $name && !in_array($name, $graph[$other], true)) {
-							$graph[$other][] = $name;
-							$inDegree[$name]++;
-						}
-					}
-				} elseif (isset($list[$target]) && $target !== $name) {
-					if (!in_array($name, $graph[$target], true)) {
-						$graph[$target][] = $name;
-						$inDegree[$name]++;
-					}
-				}
-			}
-		}
-
-		// Kahn's algorithm
-		$queue = [];
-		foreach ($names as $name) {
-			if ($inDegree[$name] === 0) {
-				$queue[] = $name;
-			}
-		}
-
-		$result = [];
-		while ($queue) {
-			$node = array_shift($queue);
-			$result[$node] = $list[$node];
-
-			foreach ($graph[$node] as $neighbor) {
-				$inDegree[$neighbor]--;
-				if ($inDegree[$neighbor] === 0) {
-					$queue[] = $neighbor;
-				}
-			}
-		}
-
-		if (count($result) !== count($list)) {
-			$cycle = array_diff($names, array_keys($result));
-			throw new \LogicException('Circular dependency detected among: ' . implode(', ', $cycle));
-		}
-
-		return $result;
-	}
-
-
-	/**
-	 * Removes null values from the array and re-indexes it.
-	 * @param  mixed[]  $items
-	 */
-	public static function removeNulls(array &$items): void
-	{
-		$items = array_values(array_filter($items, fn($item) => $item !== null));
-	}
-
-
-	/**
-	 * Attempts to map the compiled template to the source.
-	 * @return array{name: ?string, line: ?int, column: ?int}|null
-	 */
-	public static function mapCompiledToSource(string $compiledFile, ?int $compiledLine = null): ?array
-	{
-		if (!Runtime\Cache::isCacheFile($compiledFile)) {
-			return null;
-		}
-
-		$content = file_get_contents($compiledFile);
-		if ($content === false) {
-			return null;
-		}
-		$name = preg_match('#^/\*\* source: (\S.+) \*/#m', $content, $m) ? $m[1] : null;
-		$compiledLine && preg_match('~/\* pos (\d+)(?::(\d+))? \*/~', explode("\n", $content)[$compiledLine - 1], $pos);
-		$line = isset($pos[1]) ? (int) $pos[1] : null;
-		$column = isset($pos[2]) ? (int) $pos[2] : null;
-		return $name || $line ? compact('name', 'line', 'column') : null;
-	}
-
-
-	/**
-	 * Tries to guess the template position from the backtrace. Returns a human-readable string like
-	 * "in 'path/to/template.latte' on line 42", or null if the position cannot be determined.
-	 */
-	public static function guessTemplatePosition(): ?string
-	{
-		$trace = debug_backtrace();
-		foreach ($trace as $item) {
-			if (isset($item['file']) && ($source = self::mapCompiledToSource($item['file'], $item['line'] ?? null))) {
-				$res = [];
-				if ($source['name'] && is_file($source['name'])) {
-					$res[] = "in '" . str_replace(dirname($source['name'], 2), '...', $source['name']) . "'";
-				}
-				if ($source['line']) {
-					$res[] = 'on line ' . $source['line'] . ($source['column'] ? ' at column ' . $source['column'] : '');
-				}
-				return implode(' ', $res);
-			}
-		}
-		return null;
-	}
-
-
-	/**
-	 * Resolves template parameters from an object, its public properties are extracted as variables
-	 * and annotated methods are registered as filters/functions.
-	 * @param  object|mixed[]  $params
-	 * @return array<string, mixed>
-	 */
-	public static function resolveParams(Engine $engine, object|array $params): array
-	{
-		if (is_array($params)) {
-			return $params;
-		}
-
-		$rc = new \ReflectionClass($params);
-		$methods = $rc->getMethods(\ReflectionMethod::IS_PUBLIC);
-		foreach ($methods as $method) {
-			if ($method->getAttributes(Attributes\TemplateFilter::class)) {
-				$engine->addFilter($method->name, $method->getClosure($params));
-			}
-
-			if ($method->getAttributes(Attributes\TemplateFunction::class)) {
-				$engine->addFunction($method->name, $method->getClosure($params));
-			}
-		}
-
-		$res = get_object_vars($params);
-		if (PHP_VERSION_ID >= 80400) {
-			foreach ($rc->getProperties(\ReflectionProperty::IS_PUBLIC) as $property) {
-				if ($property->isVirtual() && $property->hasHook(\PropertyHookType::Get)) {
-					$name = $property->getName();
-					$res[$name] = $params->$name;
-				}
-			}
-		}
-
-		return $res;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Loader.php b/generated/php/vendor/latte/latte/src/Latte/Loader.php
deleted file mode 100644
index 5019870..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Loader.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte;
-
-
-/**
- * Template loader.
- */
-interface Loader
-{
-	/**
-	 * Returns template source code.
-	 */
-	function getContent(string $name): string;
-
-	/**
-	 * Returns referred template name.
-	 */
-	function getReferredName(string $name, string $referringName): string;
-
-	/**
-	 * Returns unique identifier for caching.
-	 */
-	function getUniqueId(string $name): string;
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Loaders/FileLoader.php b/generated/php/vendor/latte/latte/src/Latte/Loaders/FileLoader.php
deleted file mode 100644
index 6d9e099..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Loaders/FileLoader.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Loaders;
-
-use Latte;
-use function array_pop, end, explode, file_get_contents, implode, is_file, preg_match, str_starts_with, strtr;
-use const DIRECTORY_SEPARATOR;
-
-
-/**
- * Loads templates from filesystem.
- */
-class FileLoader implements Latte\Loader
-{
-	protected ?string $baseDir = null;
-
-
-	public function __construct(?string $baseDir = null)
-	{
-		$this->baseDir = $baseDir ? $this->normalizePath("$baseDir/") : null;
-	}
-
-
-	/**
-	 * Returns template source code.
-	 */
-	public function getContent(string $fileName): string
-	{
-		$file = $this->baseDir . $fileName;
-		if ($this->baseDir && !str_starts_with($this->normalizePath($file), $this->baseDir)) {
-			throw new Latte\RuntimeException("Template '$file' is not within the allowed path '{$this->baseDir}'.");
-
-		} elseif (!is_file($file)) {
-			throw new Latte\TemplateNotFoundException("Missing template file '$file'.");
-		}
-
-		$content = file_get_contents($file);
-		if ($content === false) {
-			throw new Latte\RuntimeException("Unable to read file '$file'.");
-		}
-
-		return $content;
-	}
-
-
-	/**
-	 * Returns referred template name.
-	 */
-	public function getReferredName(string $file, string $referringFile): string
-	{
-		if ($this->baseDir || !preg_match('#/|\\\|[a-z]:|phar:#iA', $file)) {
-			$file = $this->normalizePath($referringFile . '/../' . $file);
-		}
-
-		return $file;
-	}
-
-
-	/**
-	 * Returns unique identifier for caching.
-	 */
-	public function getUniqueId(string $file): string
-	{
-		return $this->baseDir . strtr($file, '/', DIRECTORY_SEPARATOR);
-	}
-
-
-	protected static function normalizePath(string $path): string
-	{
-		preg_match('#^([a-z]:|phar://.+?/)?(.*)#i', $path, $m) ?: throw new \LogicException;
-		$res = [];
-		foreach (explode('/', strtr($m[2], '\\', '/')) as $part) {
-			if ($part === '..' && $res && end($res) !== '..' && end($res) !== '') {
-				array_pop($res);
-			} elseif ($part !== '.') {
-				$res[] = $part;
-			}
-		}
-
-		return $m[1] . implode(DIRECTORY_SEPARATOR, $res);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Loaders/StringLoader.php b/generated/php/vendor/latte/latte/src/Latte/Loaders/StringLoader.php
deleted file mode 100644
index 9a387d7..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Loaders/StringLoader.php
+++ /dev/null
@@ -1,60 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Loaders;
-
-use Latte;
-
-
-/**
- * Loads templates from strings or an in-memory array.
- */
-class StringLoader implements Latte\Loader
-{
-	public function __construct(
-		/** @var array<string, string>|null */
-		private ?array $templates = null,
-	) {
-	}
-
-
-	/**
-	 * Returns template source code.
-	 */
-	public function getContent(string $name): string
-	{
-		if ($this->templates === null) {
-			return $name;
-		} elseif (isset($this->templates[$name])) {
-			return $this->templates[$name];
-		} else {
-			throw new Latte\TemplateNotFoundException("Missing template '$name'.");
-		}
-	}
-
-
-	/**
-	 * Returns referred template name.
-	 */
-	public function getReferredName(string $name, string $referringName): string
-	{
-		if ($this->templates === null) {
-			throw new Latte\TemplateNotFoundException("Missing template '$name'.");
-		}
-
-		return $name;
-	}
-
-
-	/**
-	 * Returns unique identifier for caching.
-	 */
-	public function getUniqueId(string $name): string
-	{
-		return $this->getContent($name);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Policy.php b/generated/php/vendor/latte/latte/src/Latte/Policy.php
deleted file mode 100644
index 3783e6c..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Policy.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte;
-
-
-/**
- * Security policy for sandbox mode.
- */
-interface Policy
-{
-	function isTagAllowed(string $tag): bool;
-
-	function isFilterAllowed(string $filter): bool;
-
-	function isFunctionAllowed(string $function): bool;
-
-	function isMethodAllowed(string $class, string $method): bool;
-
-	function isPropertyAllowed(string $class, string $property): bool;
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/Block.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/Block.php
deleted file mode 100644
index 204a715..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/Block.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-
-/** @internal */
-final class Block
-{
-	public ?string $contentType = null;
-
-	/** @var \Closure[] */
-	public array $functions = [];
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/Cache.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/Cache.php
deleted file mode 100644
index d1e8778..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/Cache.php
+++ /dev/null
@@ -1,146 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-use Latte\Engine;
-use Latte\RuntimeException;
-use function array_map, defined, dirname, file_put_contents, filemtime, flock, fopen, fseek, ftell, ftruncate, function_exists, fwrite, is_dir, is_file, mkdir, preg_match, preg_replace, rename, serialize, stream_get_contents, strlen, substr, unlink;
-use const LOCK_EX, LOCK_SH, LOCK_UN;
-
-
-/**
- * Caching of compiled templates.
- * @internal
- */
-final class Cache
-{
-	public ?string $directory = null;
-	public bool $autoRefresh = true;
-
-
-	/**
-	 * Loads existing cache or compiles template if needed.
-	 * Uses file locking to ensure atomic operations and prevent race conditions.
-	 */
-	public function loadOrCreate(Engine $engine, string $name): void
-	{
-		// Solving atomicity to work everywhere is really pain in the ass.
-		// 1) We want to do as little as possible IO calls on production and also directory and file can be not writable
-		// so on Linux we include the file directly without shared lock, therefore, the file must be created atomically by renaming.
-		// 2) On Windows file cannot be renamed-to while is open (ie by include), so we have to acquire a lock.
-		$file = $this->generateFilePath($engine, $name);
-		$signature = $this->autoRefresh
-			? hash('xxh128', serialize($this->generateRefreshSignature($engine, $name)))
-			: null;
-		$lock = defined('PHP_WINDOWS_VERSION_BUILD') || $signature
-			? $this->acquireLock("$file.lock", LOCK_SH)
-			: null;
-
-		if (
-			!($signature && $lock && $signature !== stream_get_contents($lock))
-			&& (@include $file) !== false // @ - file may not exist
-		) {
-			return;
-		}
-
-		if ($lock) {
-			flock($lock, LOCK_UN); // release shared lock so we can get exclusive
-			fseek($lock, 0);
-		}
-
-		$lock = $this->acquireLock("$file.lock", LOCK_EX);
-
-		// while waiting for exclusive lock, someone might have already created the cache
-		if (!is_file($file) || ($signature && $signature !== stream_get_contents($lock))) {
-			$compiled = $engine->compile($name);
-			if (
-				file_put_contents("$file.tmp", $compiled) !== strlen($compiled)
-				|| !rename("$file.tmp", $file)
-			) {
-				@unlink("$file.tmp"); // @ - file may not exist
-				throw new RuntimeException("Unable to create '$file'.");
-			}
-
-			fseek($lock, 0);
-			fwrite($lock, $signature ?? hash('xxh128', serialize($this->generateRefreshSignature($engine, $name))));
-			ftruncate($lock, (int) ftell($lock));
-
-			if (function_exists('opcache_invalidate')) {
-				@opcache_invalidate($file, force: true); // @ can be restricted
-			}
-		}
-
-		if ((include $file) === false) {
-			throw new RuntimeException("Unable to load '$file'.");
-		}
-
-		flock($lock, LOCK_UN);
-	}
-
-
-	/** @return resource */
-	private function acquireLock(string $file, int $mode)
-	{
-		$dir = dirname($file);
-		if (!is_dir($dir) && !@mkdir($dir) && !is_dir($dir)) { // @ - dir may already exist
-			throw new RuntimeException("Unable to create directory '$dir'. " . (error_get_last()['message'] ?? ''));
-		}
-
-		$handle = @fopen($file, 'c+'); // @ is escalated to exception
-		if (!$handle) {
-			throw new RuntimeException("Unable to create file '$file'. " . (error_get_last()['message'] ?? ''));
-		} elseif (!@flock($handle, $mode)) { // @ is escalated to exception
-			throw new RuntimeException('Unable to acquire ' . ($mode & LOCK_EX ? 'exclusive' : 'shared') . " lock on file '$file'. " . (error_get_last()['message'] ?? ''));
-		}
-
-		return $handle;
-	}
-
-
-	/**
-	 * Returns the file path where compiled template will be cached.
-	 * Different configurations produce different file paths.
-	 */
-	public function generateFilePath(Engine $engine, string $name): string
-	{
-		$base = preg_match('#([/\\\][\w@.-]{3,35}){1,3}$#D', '/' . $name, $m)
-			? preg_replace('#[^\w@.-]+#', '-', substr($m[0], 1))
-			: '';
-		if (!str_ends_with($base, 'latte')) {
-			$base .= '-latte';
-		}
-		return $this->directory . '/' . $base . '--' . $engine->generateTemplateHash($name) . '.php';
-	}
-
-
-	/**
-	 * Checks whether the file path looks like a Latte cache file.
-	 */
-	public static function isCacheFile(string $file): bool
-	{
-		return (bool) preg_match('/latte--\w{10}\.php$/', $file);
-	}
-
-
-	/**
-	 * Returns values used to detect if cached template needs recompilation when autoRefresh is enabled.
-	 * Triggers recompilation when template code, Latte engine, or any extension changes.
-	 * @return list<mixed>
-	 */
-	protected function generateRefreshSignature(Engine $engine, string $name): array
-	{
-		return [
-			Engine::Version,
-			$engine->getLoader()->getContent($name),
-			array_map(
-				fn($extension) => @filemtime((string) (new \ReflectionObject($extension))->getFileName()), // @ file may not exist
-				$engine->getExtensions(),
-			),
-		];
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/FilterExecutor.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/FilterExecutor.php
deleted file mode 100644
index 8d51f61..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/FilterExecutor.php
+++ /dev/null
@@ -1,143 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-use Latte;
-use Latte\ContentType;
-use Latte\Helpers;
-use function array_column, array_combine, array_keys, array_unshift, strtoupper;
-
-
-/**
- * Filter executor.
- * @internal
- */
-#[\AllowDynamicProperties]
-class FilterExecutor
-{
-	/** @var array<callable> */
-	private array $_dynamic = [];
-
-	/** @var array<string, array{callable, ?bool}> */
-	private array $_static = [];
-
-
-	/**
-	 * Registers run-time filter.
-	 */
-	public function add(?string $name, callable $callback): static
-	{
-		if ($name === null) {
-			array_unshift($this->_dynamic, $callback);
-		} else {
-			$this->_static[$name] = [$callback, null];
-			unset($this->$name);
-		}
-
-		return $this;
-	}
-
-
-	/**
-	 * Returns all run-time filters.
-	 * @return array<string, callable>
-	 */
-	public function getAll(): array
-	{
-		return array_combine(array_keys($this->_static), array_column($this->_static, 0));
-	}
-
-
-	/**
-	 * Returns the named filter as a simple callable (without FilterInfo context argument).
-	 */
-	public function __get(string $name): callable
-	{
-		[$callback, $infoAware] = $this->prepareFilter($name);
-		return $this->$name = $infoAware
-			? fn(...$args) => $this->callInfoAwareAsClassic($callback, ...$args)
-			: $callback;
-	}
-
-
-	/**
-	 * Calls filter with FilterInfo.
-	 */
-	public function filterContent(string $name, FilterInfo $info, mixed ...$args): mixed
-	{
-		if ($info->contentType === ContentType::Html && $args[0] instanceof HtmlStringable) {
-			$args[0] = $args[0]->__toString();
-		}
-
-		[$callback, $infoAware] = $this->prepareFilter($name);
-		if ($infoAware) {
-			array_unshift($args, $info);
-			return $callback(...$args);
-		}
-
-		// classic filter
-		if ($info->contentType !== ContentType::Text) {
-			throw new Latte\RuntimeException("Filter |$name is called with incompatible content type " . strtoupper($info->contentType ?? 'NULL')
-				. ($info->contentType === ContentType::Html ? ', try to prepend |stripHtml.' : '.'));
-		}
-
-		$res = $callback(...$args);
-		if ($res instanceof HtmlStringable) {
-			trigger_error("Filter |$name should be changed to content-aware filter.");
-			$info->contentType = ContentType::Html;
-			$res = $res->__toString();
-		}
-
-		return $res;
-	}
-
-
-	/**
-	 * @return array{callable, bool}
-	 */
-	private function prepareFilter(string $name): array
-	{
-		if (isset($this->_static[$name])) {
-			$this->_static[$name][1] ??= $this->isInfoAware($this->_static[$name][0]);
-			return $this->_static[$name];
-		}
-
-		foreach ($this->_dynamic as $loader) {
-			if ($callback = $loader($name)) {
-				return $this->_static[$name] = [$callback, $this->isInfoAware($callback)];
-			}
-		}
-
-		$hint = ($t = Helpers::getSuggestion(array_keys($this->_static), $name))
-			? ", did you mean '$t'?"
-			: '.';
-		throw new \LogicException("Filter '$name' is not defined or not allowed here$hint");
-	}
-
-
-	private function isInfoAware(callable $filter): bool
-	{
-		$params = Helpers::toReflection($filter)->getParameters();
-		return $params && (string) $params[0]->getType() === FilterInfo::class;
-	}
-
-
-	private function callInfoAwareAsClassic(callable $filter, mixed ...$args): mixed
-	{
-		array_unshift($args, $info = new FilterInfo);
-		if ($args[1] instanceof HtmlStringable) {
-			$args[1] = $args[1]->__toString();
-			$info->contentType = ContentType::Html;
-		}
-
-		$res = $filter(...$args);
-		return $info->contentType === ContentType::Html
-			? new Html($res)
-			: $res;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/FilterInfo.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/FilterInfo.php
deleted file mode 100644
index 1410b0d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/FilterInfo.php
+++ /dev/null
@@ -1,37 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-use Latte;
-use function in_array, strtoupper;
-
-
-/**
- * Content type context for contextual filters.
- */
-class FilterInfo
-{
-	public function __construct(
-		public ?string $contentType = null,
-	) {
-	}
-
-
-	/**
-	 * Validates content type is allowed for this filter.
-	 * @param  list<string|null>  $contentTypes
-	 */
-	public function validate(array $contentTypes, ?string $name = null): void
-	{
-		if (!in_array($this->contentType, $contentTypes, strict: true)) {
-			$name = $name ? " |$name" : $name;
-			$type = $this->contentType ? ' ' . strtoupper($this->contentType) : '';
-			throw new Latte\RuntimeException("Filter{$name} used with incompatible type{$type}.");
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/FunctionExecutor.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/FunctionExecutor.php
deleted file mode 100644
index d1f1bd8..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/FunctionExecutor.php
+++ /dev/null
@@ -1,70 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-use Latte\Helpers;
-use function array_keys;
-
-
-/**
- * Functions executor.
- * @internal
- */
-#[\AllowDynamicProperties]
-class FunctionExecutor
-{
-	/** @var array<string, callable> */
-	private array $_list = [];
-
-	/** @var array<string, bool> */
-	private array $_aware = [];
-
-
-	/**
-	 * Registers run-time function.
-	 */
-	public function add(string $name, callable $callback): static
-	{
-		$this->_list[$name] = $callback;
-		unset($this->$name, $this->_aware[$name]);
-		return $this;
-	}
-
-
-	/**
-	 * Returns all run-time functions.
-	 * @return array<string, callable>
-	 */
-	public function getAll(): array
-	{
-		return $this->_list;
-	}
-
-
-	/**
-	 * Returns the named function wrapped to accept or skip a Template argument based on its signature.
-	 */
-	public function __get(string $name): callable
-	{
-		$callback = $this->_list[$name] ?? null;
-		if (!$callback) {
-			$hint = ($t = Helpers::getSuggestion(array_keys($this->_list), $name))
-				? ", did you mean '$t'?"
-				: '.';
-			throw new \LogicException("Function '$name' is not defined$hint");
-
-		} elseif (!isset($this->_aware[$name])) {
-			$params = Helpers::toReflection($callback)->getParameters();
-			$this->_aware[$name] = $params && (string) $params[0]->getType() === Template::class;
-		}
-
-		return $this->$name = $this->_aware[$name]
-			? $callback
-			: fn($info, ...$args) => $callback(...$args);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/Helpers.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/Helpers.php
deleted file mode 100644
index 42c8597..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/Helpers.php
+++ /dev/null
@@ -1,91 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-use Latte;
-use Latte\ContentType;
-use Latte\RuntimeException;
-use Nette;
-use function addcslashes, is_string, json_encode, preg_replace, str_replace, strtoupper;
-use const JSON_INVALID_UTF8_SUBSTITUTE, JSON_THROW_ON_ERROR, JSON_UNESCAPED_SLASHES, JSON_UNESCAPED_UNICODE;
-
-
-/**
- * Template runtime helpers.
- * @internal
- */
-class Helpers
-{
-	/**
-	 * Ensures the value is a string or returns null.
-	 * @return ($value is string ? string : null)
-	 */
-	public static function stringOrNull(mixed $value): ?string
-	{
-		return is_string($value) ? $value : null;
-	}
-
-
-	/**
-	 * Escapes string for use inside CSS template.
-	 */
-	public static function escapeCss(mixed $s): string
-	{
-		// http://www.w3.org/TR/2006/WD-CSS21-20060411/syndata.html#q6
-		return addcslashes((string) $s, "\x00..\x1F!\"#$%&'()*+,./:;<=>?@[\\]^`{|}~");
-	}
-
-
-	/**
-	 * Escapes variables for use inside <script>.
-	 */
-	public static function escapeJs(mixed $s): string
-	{
-		if ($s instanceof HtmlStringable || $s instanceof Nette\HtmlStringable) {
-			$s = $s->__toString();
-		}
-
-		$json = json_encode($s, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_INVALID_UTF8_SUBSTITUTE | JSON_THROW_ON_ERROR);
-		return str_replace([']]>', '<!', '</'], [']]\u003E', '\u003C!', '<\/'], $json);
-	}
-
-
-	/**
-	 * Escapes string for use inside iCal template.
-	 */
-	public static function escapeICal(mixed $s): string
-	{
-		// https://www.ietf.org/rfc/rfc5545.txt
-		$s = str_replace("\r", '', (string) $s);
-		$s = preg_replace('#[\x00-\x08\x0B-\x1F]#', "\u{FFFD}", (string) $s);
-		return addcslashes($s, "\";\\,:\n");
-	}
-
-
-	/**
-	 * Converts content between content types.
-	 */
-	public static function convertTo(FilterInfo $info, string $dest, string $s): string
-	{
-		$source = $info->contentType ?: ContentType::Text;
-		if ($source === $dest) {
-			return $s;
-		} elseif ($conv = Latte\Compiler\Escaper::getConvertor($source, $dest)) {
-			$info->contentType = $dest;
-			return $conv($s);
-		} else {
-			throw new RuntimeException('Filters: unable to convert content type ' . strtoupper($source) . ' to ' . strtoupper($dest));
-		}
-	}
-
-
-	public static function nop(mixed $s): string
-	{
-		return (string) $s;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/Html.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/Html.php
deleted file mode 100644
index d827d2a..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/Html.php
+++ /dev/null
@@ -1,29 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-
-/**
- * Wraps a pre-escaped HTML string so it is not escaped again when rendered.
- */
-class Html implements HtmlStringable
-{
-	private readonly string $value;
-
-
-	public function __construct(string|\Stringable|null $value)
-	{
-		$this->value = (string) $value;
-	}
-
-
-	public function __toString(): string
-	{
-		return $this->value;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/HtmlHelpers.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/HtmlHelpers.php
deleted file mode 100644
index 97485a2..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/HtmlHelpers.php
+++ /dev/null
@@ -1,385 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-use Latte;
-use Latte\ContentType;
-use Nette;
-use function get_debug_type, html_entity_decode, htmlspecialchars, in_array, is_array, is_bool, is_float, is_int, is_string, ord, preg_match, preg_replace, preg_replace_callback, str_replace, strip_tags, strtolower, strtr;
-use const ENT_HTML5, ENT_NOQUOTES, ENT_QUOTES, ENT_SUBSTITUTE, JSON_INVALID_UTF8_SUBSTITUTE, JSON_THROW_ON_ERROR, JSON_UNESCAPED_SLASHES, JSON_UNESCAPED_UNICODE;
-
-
-/**
- * Runtime utilities for handling HTML.
- * @internal
- */
-final class HtmlHelpers
-{
-	private const BooleanAttributes = [
-		'allowfullscreen' => 1, 'async' => 1, 'autofocus' => 1, 'autoplay' => 1, 'checked' => 1, 'controls' => 1,
-		'contenteditable' => 1, 'default' => 1, 'defer' => 1, 'disabled' => 1, 'draggable' => 1, 'formnovalidate' => 1,
-		'hidden' => 1, 'inert' => 1, 'ismap' => 1, 'itemscope' => 1, 'loop' => 1, 'multiple' => 1, 'muted' => 1,
-		'nomodule' => 1, 'novalidate' => 1, 'open' => 1, 'playsinline' => 1, 'readonly' => 1, 'required' => 1,
-		'reversed' => 1, 'selected' => 1, 'spellcheck' => 1,
-	];
-
-	private const SpaceSeparatedAttributes = [
-		'accesskey' => 1, 'class' => 1, 'headers' => 1, 'itemprop' => 1, 'ping' => 1, 'rel' => 1, 'role' => 1, 'sandbox' => 1,
-	];
-
-
-	/**
-	 * Escapes string for use inside HTML text.
-	 */
-	public static function escapeText(mixed $s): string
-	{
-		if ($s instanceof HtmlStringable || $s instanceof Nette\HtmlStringable) {
-			return $s->__toString();
-		}
-
-		$s = htmlspecialchars((string) $s, ENT_NOQUOTES | ENT_SUBSTITUTE, 'UTF-8');
-		$s = strtr($s, ['{{' => '{<!-- -->{', '{' => '&#123;']);
-		return $s;
-	}
-
-
-	/**
-	 * Escapes string for use inside HTML attribute value.
-	 */
-	public static function escapeAttr(mixed $s): string
-	{
-		if ($s instanceof HtmlStringable) {
-			$s = self::convertHtmlToText($s->__toString());
-		}
-		$s = (string) $s;
-		$s = htmlspecialchars($s, ENT_QUOTES | ENT_HTML5 | ENT_SUBSTITUTE, 'UTF-8');
-		$s = str_replace('{', '&#123;', $s);
-		return $s;
-	}
-
-
-	/**
-	 * Escapes string for use inside HTML tag.
-	 */
-	public static function escapeTag(mixed $s): string
-	{
-		$s = (string) $s;
-		$s = htmlspecialchars($s, ENT_QUOTES | ENT_HTML5 | ENT_SUBSTITUTE, 'UTF-8');
-		return preg_replace_callback(
-			'#[=/\s]#',
-			fn($m) => '&#' . ord($m[0]) . ';',
-			$s,
-		);
-	}
-
-
-	/**
-	 * Escapes string for use inside HTML/XML comments.
-	 */
-	public static function escapeComment(mixed $s): string
-	{
-		$s = (string) $s;
-		if ($s && ($s[0] === '-' || $s[0] === '>' || $s[0] === '!')) {
-			$s = ' ' . $s;
-		}
-
-		$s = str_replace('--', '- - ', $s);
-		if (str_ends_with($s, '-')) {
-			$s .= ' ';
-		}
-
-		return $s;
-	}
-
-
-	/**
-	 * Escapes HTML for usage in <script type=text/html>
-	 */
-	public static function escapeRawHtml(mixed $s): string
-	{
-		if ($s instanceof HtmlStringable || $s instanceof Nette\HtmlStringable) {
-			return self::convertHtmlToRawText($s->__toString());
-		}
-
-		return htmlspecialchars((string) $s, ENT_QUOTES | ENT_HTML5 | ENT_SUBSTITUTE, 'UTF-8');
-	}
-
-
-	/**
-	 * Escapes only quotes.
-	 */
-	public static function escapeQuotes(mixed $s): string
-	{
-		return strtr((string) $s, ['"' => '&quot;', "'" => '&apos;']);
-	}
-
-
-	/**
-	 * Converts JS and CSS for usage in <script> or <style>
-	 */
-	public static function convertJSToRawText(mixed $s): string
-	{
-		return preg_replace('#</(script|style)#i', '<\/$1', (string) $s);
-	}
-
-
-	/**
-	 * Sanitizes <script> in <script type=text/html>
-	 */
-	public static function convertHtmlToRawText(string $s): string
-	{
-		return preg_replace('#(</?)(script)#i', '$1x-$2', $s);
-	}
-
-
-	/**
-	 * Converts HTML text to quoted attribute.
-	 */
-	public static function convertHtmlToAttr(string $s): string
-	{
-		return self::escapeAttr(self::convertHtmlToText($s));
-	}
-
-
-	/**
-	 * Converts an HTML attribute value back to HTML text with re-encoded special characters.
-	 */
-	public static function convertAttrToHtml(string $s): string
-	{
-		return self::escapeAttr(html_entity_decode($s, ENT_QUOTES | ENT_HTML5, 'UTF-8'));
-	}
-
-
-	/**
-	 * Converts HTML to plain text.
-	 */
-	public static function convertHtmlToText(string $s): string
-	{
-		$s = strip_tags($s);
-		return html_entity_decode($s, ENT_QUOTES | ENT_HTML5, 'UTF-8');
-	}
-
-
-	/**
-	 * Returns the type category of an HTML attribute: 'bool', 'list', 'data', 'aria', 'style', or ''.
-	 */
-	public static function classifyAttributeType(string $name): string
-	{
-		$name = strtolower($name);
-		return match (true) {
-			isset(self::BooleanAttributes[$name]) => 'bool',
-			isset(self::SpaceSeparatedAttributes[$name]) => 'list',
-			str_starts_with($name, 'data-') => 'data',
-			str_starts_with($name, 'aria-') => 'aria',
-			$name === 'style' => 'style',
-			default => '',
-		};
-	}
-
-
-	/**
-	 * Formats common HTML attribute.
-	 */
-	public static function formatAttribute(string $namePart, mixed $value, bool $migrationWarnings = false): string
-	{
-		if ($migrationWarnings) {
-			if ($value === null) {
-				self::triggerMigrationWarning(trim($namePart), $value);
-			} elseif (is_string($value) && str_starts_with($name = ltrim($namePart), 'on')) {
-				self::triggerMigrationWarning($name, 'string value: previously it was JSON-encoded, now it is rendered as a string');
-			}
-		}
-		return match (true) {
-			is_string($value), is_int($value), is_float($value), $value instanceof \Stringable => $namePart . '="' . self::escapeAttr($value) . '"',
-			$value === null => '',
-			default => self::triggerInvalidValue(trim($namePart), $value) ?? '',
-		};
-	}
-
-
-	/**
-	 * Formats boolean HTML attribute.
-	 */
-	public static function formatBoolAttribute(string $namePart, mixed $value): string
-	{
-		return $value ? $namePart : '';
-	}
-
-
-	/**
-	 * Formats space separated HTML attribute.
-	 */
-	public static function formatListAttribute(string $namePart, mixed $value): string
-	{
-		return match (true) {
-			is_array($value) => self::formatArrayAttribute($namePart, $value, fn($v, $k) => $v === true ? $k : $v, ' '),
-			default => self::formatAttribute($namePart, $value),
-		};
-	}
-
-
-	/**
-	 * Formats HTML attribute 'style'.
-	 */
-	public static function formatStyleAttribute(string $namePart, mixed $value): string
-	{
-		return match (true) {
-			is_array($value) => self::formatArrayAttribute($namePart, $value, fn($v, $k) => is_string($k) ? $k . ': ' . $v : $v, '; '),
-			default => self::formatAttribute($namePart, $value),
-		};
-	}
-
-
-	/**
-	 * Formats data-* HTML attribute.
-	 */
-	public static function formatDataAttribute(string $namePart, mixed $value, bool $migrationWarnings = false): string
-	{
-		if ($migrationWarnings && (is_bool($value) || $value === null)) {
-			self::triggerMigrationWarning(trim($namePart), $value);
-		}
-		$escape = fn($value) => str_contains($value, '"')
-			? "'" . str_replace(['&', "'"], ['&amp;', '&apos;'], $value) . "'"
-			: '"' . str_replace(['&', '"'], ['&amp;', '&quot;'], $value) . '"';
-		return match (true) {
-			is_bool($value) => $namePart . '="' . ($value ? 'true' : 'false') . '"',
-			is_array($value) || $value instanceof \stdClass => $namePart . '=' . $escape(json_encode($value, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_INVALID_UTF8_SUBSTITUTE | JSON_THROW_ON_ERROR)),
-			default => self::formatAttribute($namePart, $value),
-		};
-	}
-
-
-	/**
-	 * Formats aria-* HTML attribute.
-	 */
-	public static function formatAriaAttribute(string $namePart, mixed $value, bool $migrationWarnings = false): string
-	{
-		if ($migrationWarnings && is_bool($value)) {
-			self::triggerMigrationWarning(trim($namePart), $value);
-		}
-		return match (true) {
-			is_bool($value) => $namePart . '="' . ($value ? 'true' : 'false') . '"',
-			is_array($value) => self::formatArrayAttribute($namePart, $value, fn($v, $k) => $v === true ? $k : $v, ' '),
-			default => self::formatAttribute($namePart, $value),
-		};
-	}
-
-
-	/** @param  array<mixed>  $items */
-	private static function formatArrayAttribute(string $namePart, array $items, \Closure $cb, string $separator): string
-	{
-		$res = [];
-		foreach ($items as $k => $v) {
-			if ($v != null) { // intentionally ==, skip nulls & empty string
-				$res[] = $cb($v, $k);
-			}
-		}
-		return $res ? $namePart . '="' . self::escapeAttr(implode($separator, $res)) . '"' : '';
-	}
-
-
-	/**
-	 * Triggers an E_USER_WARNING for an invalid attribute value type.
-	 */
-	public static function triggerInvalidValue(string $name, mixed $value): void
-	{
-		$source = Latte\Helpers::guessTemplatePosition();
-		$type = get_debug_type($value);
-		trigger_error("Invalid value for attribute '$name': $type is not allowed" . ($source ? " ($source)" : '.'), E_USER_WARNING);
-	}
-
-
-	/**
-	 * Triggers an E_USER_WARNING about a behavior change in attribute rendering.
-	 */
-	public static function triggerMigrationWarning(string $name, mixed $value): void
-	{
-		$source = Latte\Helpers::guessTemplatePosition();
-		$message = match ($value) {
-			null => "value null: previously it rendered as $name=\"\", now the attribute is omitted",
-			true => "value true: previously it rendered as $name=\"1\", now it renders as $name=\"true\"",
-			false => "value false: previously it rendered as $name=\"\", now it renders as $name=\"false\"",
-			default => $value,
-		};
-		trigger_error("Behavior change for attribute '$name' with $message" . ($source ? " ($source)" : '.'), E_USER_WARNING);
-	}
-
-
-	/**
-	 * Checks if the given tag name represents a void (empty) HTML element.
-	 */
-	public static function isVoidElement(string $name): bool
-	{
-		static $names = [
-			'img' => 1, 'hr' => 1, 'br' => 1, 'input' => 1, 'meta' => 1, 'area' => 1, 'embed' => 1, 'keygen' => 1, 'source' => 1, 'base' => 1,
-			'col' => 1, 'link' => 1, 'param' => 1, 'basefont' => 1, 'frame' => 1, 'isindex' => 1, 'wbr' => 1, 'command' => 1, 'track' => 1,
-		];
-		return isset($names[strtolower($name)]);
-	}
-
-
-	/**
-	 * Determines if the given HTML attribute is a URL attribute that requires special handling.
-	 */
-	public static function isUrlAttribute(string $tag, string $attr): bool
-	{
-		$attr = strtolower($attr);
-		return in_array($attr, ['href', 'src', 'action', 'formaction'], strict: true)
-			|| ($attr === 'data' && strtolower($tag) === 'object');
-	}
-
-
-	/**
-	 * Classifies script content type based on the MIME type.
-	 */
-	public static function classifyScriptType(string $type): string
-	{
-		if (preg_match('#((application|text)/(((x-)?java|ecma|j|live)script|json)|application/.+\+json|text/plain|module|importmap|)$#Ai', $type)) {
-			return ContentType::JavaScript;
-
-		} elseif (preg_match('#text/((x-)?template|html)$#Ai', $type)) {
-			return ContentType::Html;
-		}
-
-		return ContentType::Text;
-	}
-
-
-	/**
-	 * Checks that the HTML tag name can be changed.
-	 */
-	public static function validateTagChange(mixed $name, ?string $origName = null): string
-	{
-		$name ??= $origName;
-		if (!is_string($name)) {
-			throw new Latte\RuntimeException('Tag name must be string, ' . get_debug_type($name) . ' given');
-
-		} elseif (!preg_match('~' . Latte\Compiler\TemplateLexer::ReTagName . '$~DAu', $name)) {
-			throw new Latte\RuntimeException("Invalid tag name '$name'");
-
-		} elseif (self::isVoidElement($name) !== self::isVoidElement($origName ?? 'div') // non-void is default
-			|| in_array(strtolower($name), ['style', 'script'], strict: true)) {
-			throw new Latte\RuntimeException("Forbidden: Cannot change element to <$name>");
-		}
-		return $name;
-	}
-
-
-	/**
-	 * Validates that the HTML attribute name contains only allowed characters.
-	 */
-	public static function validateAttributeName(mixed $name): void
-	{
-		if (!is_string($name)) {
-			throw new Latte\RuntimeException('Attribute name must be string, ' . get_debug_type($name) . ' given');
-
-		} elseif (!preg_match('~' . Latte\Compiler\TemplateLexer::ReAttrName . '+$~DAu', $name)) {
-			throw new Latte\RuntimeException("Invalid attribute name '$name'");
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/HtmlStringable.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/HtmlStringable.php
deleted file mode 100644
index fc6948f..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/HtmlStringable.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-
-/**
- * Marks a value as pre-escaped HTML that should not be escaped again when rendered.
- */
-interface HtmlStringable
-{
-	/** Returns content in HTML format (no further escaping needed). */
-	function __toString(): string;
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/Template.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/Template.php
deleted file mode 100644
index c0f1aca..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/Template.php
+++ /dev/null
@@ -1,366 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-use Latte;
-use Latte\Compiler\Escaper;
-use Latte\Engine;
-use function array_keys, array_merge, array_pop, end, in_array, is_array, next, ob_end_clean, ob_get_clean, ob_start, prev, reset, sprintf, strtoupper;
-
-
-/**
- * Base class for compiled templates.
- */
-class Template
-{
-	public const
-		LayerTop = 0,
-		LayerSnippet = 'snippet',
-		LayerLocal = 'local';
-
-	public const ContentType = Latte\ContentType::Html;
-
-	public const Blocks = [];
-
-	/** @internal */
-	protected string|false|null $parentName = null;
-
-	/** @var mixed[][] */
-	protected array $varStack = [];
-
-	/** @var Block[][] */
-	protected array $blocks;
-
-	/** @var mixed[][] */
-	private array $blockStack = [];
-	private ?Template $referringTemplate = null;
-	private ?string $referenceType = null;
-
-
-	public function __construct(
-		private readonly Engine $engine,
-		/** @var array<string, mixed> */
-		protected array $params,
-		protected FilterExecutor $filters,
-		public \stdClass $global,
-		private readonly string $name,
-	) {
-		$this->initBlockLayer(self::LayerTop);
-		$this->initBlockLayer(self::LayerLocal);
-		$this->initBlockLayer(self::LayerSnippet);
-	}
-
-
-	/**
-	 * Renders template.
-	 * @internal
-	 */
-	public function render(?string $block = null): void
-	{
-		foreach ($this->engine->getExtensions() as $extension) {
-			$extension->beforeRender($this);
-		}
-
-		$params = $this->prepare();
-
-		if ($this->parentName === null && !$this->referringTemplate && isset($this->global->coreParentFinder)) {
-			$this->parentName = ($this->global->coreParentFinder)($this);
-		}
-
-		if ($this->referenceType === 'import') {
-			if ($this->parentName) {
-				throw new Latte\RuntimeException('Imported template cannot use {extends} or {layout}, use {import}');
-			}
-
-		} elseif ($this->parentName) { // extends
-			$this->params = $params;
-			$this->createTemplate($this->parentName, $params, 'extends')->render($block);
-
-		} elseif ($block !== null) { // single block rendering
-			$this->renderBlock($block, $this->params);
-
-		} else {
-			$this->main($params);
-		}
-	}
-
-
-	/**
-	 * Renders block.
-	 * @param  mixed[]  $params
-	 * @param  string|\Closure|null  $mod  content-type name or modifier closure
-	 * @internal
-	 */
-	public function renderBlock(
-		string $name,
-		array $params,
-		string|\Closure|null $mod = null,
-		int|string|null $layer = null,
-	): void
-	{
-		$block = $layer
-			? ($this->blocks[$layer][$name] ?? null)
-			: ($this->blocks[self::LayerLocal][$name] ?? $this->blocks[self::LayerTop][$name] ?? null);
-
-		if (!$block) {
-			$hint = $layer && ($t = Latte\Helpers::getSuggestion($this->getBlockNames($layer), $name))
-				? ", did you mean '$t'?"
-				: '.';
-			$name = $layer ? "$layer $name" : $name;
-			throw new Latte\RuntimeException("Cannot include undefined block '$name'$hint");
-		}
-
-		$fn = reset($block->functions);
-		assert($fn !== false);
-		$this->filter(
-			fn() => $fn($params),
-			$mod,
-			$block->contentType ?? static::ContentType,
-			"block $name",
-		);
-	}
-
-
-	/**
-	 * Renders parent block.
-	 * @param  mixed[]  $params
-	 * @internal
-	 */
-	public function renderParentBlock(string $name, array $params): void
-	{
-		$block = $this->blocks[self::LayerLocal][$name] ?? $this->blocks[self::LayerTop][$name] ?? null;
-		if (!$block || ($function = next($block->functions)) === false) {
-			throw new Latte\RuntimeException("Cannot include undefined parent block '$name'.");
-		}
-		$function($params);
-		prev($block->functions);
-	}
-
-
-	/**
-	 * @param  string|\Closure|null  $mod  content-type name or modifier closure
-	 * @internal
-	 */
-	public function renderToContentType(string|\Closure|null $mod, ?string $block = null): void
-	{
-		$this->filter(
-			fn() => $this->render($block),
-			$mod,
-			static::ContentType,
-			"'$this->name'",
-		);
-	}
-
-
-	/**
-	 * Renders template.
-	 * @param  mixed[]  $params
-	 * @internal
-	 */
-	public function createTemplate(string $name, array $params, string $relation): self
-	{
-		$name = $this->engine->getLoader()->getReferredName($name, $this->name);
-		$child = $relation === 'sandbox'
-			? (clone $this->engine)->setSandboxMode()->createTemplate($name, $params)
-			: $this->engine->createTemplate($name, $params, clearCache: false);
-
-		$child->referringTemplate = $this;
-		$child->referenceType = $relation;
-		$child->global = $this->global;
-
-		if (in_array($relation, ['extends', 'includeblock', 'import', 'embed'], strict: true)) {
-			foreach ($child->blocks[self::LayerTop] as $nm => $block) {
-				$this->addBlock($nm, $block->contentType ?? static::ContentType, $block->functions);
-			}
-
-			$child->blocks[self::LayerTop] = &$this->blocks[self::LayerTop];
-
-			$this->blocks[self::LayerSnippet] += $child->blocks[self::LayerSnippet];
-			$child->blocks[self::LayerSnippet] = &$this->blocks[self::LayerSnippet];
-		}
-
-		return $child;
-	}
-
-
-	/**
-	 * @param  string|\Closure|null  $targetType  content-type name or modifier closure
-	 */
-	private function filter(callable $producer, string|\Closure|null $targetType, string $contentType, string $name): void
-	{
-		if ($targetType === null || $targetType === $contentType) {
-			$producer();
-
-		} elseif ($targetType instanceof \Closure) {
-			echo $targetType($this->capture($producer), $contentType);
-
-		} elseif ($filter = Escaper::getConvertor($contentType, $targetType)) {
-			echo $filter($this->capture($producer));
-
-		} else {
-			throw new Latte\RuntimeException(sprintf(
-				"Including $name with content type %s into incompatible type %s.",
-				strtoupper($contentType),
-				strtoupper($targetType),
-			));
-		}
-	}
-
-
-	/**
-	 * Captures output to string.
-	 * @internal
-	 */
-	public function capture(callable $function): string
-	{
-		try {
-			ob_start(fn() => '');
-			$function();
-			return ob_get_clean();
-		} catch (\Throwable $e) {
-			ob_end_clean();
-			throw $e;
-		}
-	}
-
-
-	public function getEngine(): Engine
-	{
-		return $this->engine;
-	}
-
-
-	public function getName(): string
-	{
-		return $this->name;
-	}
-
-
-	/**
-	 * Returns array of all parameters.
-	 * @return array<string, mixed>
-	 */
-	public function getParameters(): array
-	{
-		return $this->params;
-	}
-
-
-	public function getParentName(): ?string
-	{
-		return $this->parentName ?: null;
-	}
-
-
-	public function getReferringTemplate(): ?self
-	{
-		return $this->referringTemplate;
-	}
-
-
-	/**
-	 * Returns the relation type ('extends', 'include', 'import', 'embed', 'sandbox'), or null for root.
-	 */
-	public function getReferenceType(): ?string
-	{
-		return $this->referenceType;
-	}
-
-
-	/** @return array<string, mixed> */
-	public function prepare(): array
-	{
-		return $this->params;
-	}
-
-
-	/** @param mixed[]  $params */
-	public function main(array $params): void
-	{
-	}
-
-
-	/********************* blocks ****************d*g**/
-
-
-	/**
-	 * Creates block if doesn't exist and checks if content type is the same.
-	 * @param  \Closure[]  $functions
-	 * @internal
-	 */
-	protected function addBlock(
-		string $name,
-		string $contentType,
-		array $functions,
-		int|string|null $layer = null,
-	): void
-	{
-		$block = &$this->blocks[$layer ?? self::LayerTop][$name];
-		$block ??= new Block;
-		if ($block->contentType === null) {
-			$block->contentType = $contentType;
-
-		} elseif (!Escaper::getConvertor($contentType, $block->contentType)) {
-			throw new Latte\RuntimeException(sprintf(
-				"Overridden block $name with content type %s by incompatible type %s.",
-				strtoupper($contentType),
-				strtoupper($block->contentType),
-			));
-		}
-
-		$block->functions = array_merge($block->functions, $functions);
-	}
-
-
-	public function hasBlock(string $name): bool
-	{
-		return isset($this->blocks[self::LayerLocal][$name]) || isset($this->blocks[self::LayerTop][$name]);
-	}
-
-
-	/** @return list<string> */
-	public function getBlockNames(int|string $layer = self::LayerTop): array
-	{
-		return array_keys($this->blocks[$layer] ?? []);
-	}
-
-
-	private function initBlockLayer(int|string $staticId, ?int $destId = null): void
-	{
-		$destId ??= $staticId;
-		$this->blocks[$destId] = [];
-		foreach (static::Blocks[$staticId] ?? [] as $nm => $info) {
-			[$method, $contentType] = is_array($info) ? $info : [$info, static::ContentType];
-			$this->addBlock($nm, $contentType, [$this->$method(...)], $destId);
-		}
-	}
-
-
-	/** @param array<string, mixed> $vars */
-	protected function enterBlockLayer(int $staticId, array $vars): void
-	{
-		$this->blockStack[] = $this->blocks[self::LayerTop];
-		$this->initBlockLayer($staticId, self::LayerTop);
-		$this->varStack[] = $vars;
-	}
-
-
-	protected function copyBlockLayer(): void
-	{
-		foreach (end($this->blockStack) ?: [] as $nm => $block) {
-			$this->addBlock($nm, $block->contentType ?? static::ContentType, $block->functions);
-		}
-	}
-
-
-	protected function leaveBlockLayer(): void
-	{
-		$this->blocks[self::LayerTop] = array_pop($this->blockStack) ?? [];
-		array_pop($this->varStack);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Runtime/XmlHelpers.php b/generated/php/vendor/latte/latte/src/Latte/Runtime/XmlHelpers.php
deleted file mode 100644
index 9042039..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Runtime/XmlHelpers.php
+++ /dev/null
@@ -1,114 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Runtime;
-
-use Latte;
-use function get_debug_type, htmlspecialchars, is_float, is_int, is_string, ord, preg_match, preg_replace, preg_replace_callback;
-use const ENT_QUOTES, ENT_SUBSTITUTE, ENT_XML1;
-
-
-/**
- * Runtime utilities for handling XML.
- * @internal
- */
-final class XmlHelpers
-{
-	// https://www.w3.org/TR/xml/#NT-Name
-	private const
-		ReNameStart = ':A-Z_a-z\x{C0}-\x{D6}\x{D8}-\x{F6}\x{F8}-\x{2FF}\x{370}-\x{37D}\x{37F}-\x{1FFF}\x{200C}-\x{200D}\x{2070}-\x{218F}\x{2C00}-\x{2FEF}\x{3001}-\x{D7FF}\x{F900}-\x{FDCF}\x{FDF0}-\x{FFFD}\x{10000}-\x{EFFFF}',
-		ReName = '[' . self::ReNameStart . '][-.0-9\x{B7}\x{300}-\x{36F}\x{203F}-\x{2040}' . self::ReNameStart . ']*';
-
-
-	/**
-	 * Escapes string for use everywhere inside XML (except for comments and tags).
-	 */
-	public static function escapeText(mixed $s): string
-	{
-		if ($s instanceof HtmlStringable) {
-			return $s->__toString();
-		}
-
-		// XML 1.0: \x09 \x0A \x0D and C1 allowed directly, C0 forbidden
-		// XML 1.1: \x00 forbidden directly and as a character reference,
-		//   \x09 \x0A \x0D \x85 allowed directly, C0, C1 and \x7F allowed as character references
-		$s = preg_replace('#[\x00-\x08\x0B\x0C\x0E-\x1F]#', "\u{FFFD}", (string) $s);
-		return htmlspecialchars($s, ENT_QUOTES | ENT_XML1 | ENT_SUBSTITUTE, 'UTF-8');
-	}
-
-
-	/**
-	 * Escapes string for use inside XML attribute value.
-	 */
-	public static function escapeAttr(mixed $s): string
-	{
-		if ($s instanceof HtmlStringable) {
-			$s = HtmlHelpers::convertHtmlToText($s->__toString());
-		}
-		return self::escapeText($s);
-	}
-
-
-	/**
-	 * Escapes string for use inside XML tag.
-	 */
-	public static function escapeTag(mixed $s): string
-	{
-		$s = self::escapeText((string) $s);
-		return preg_replace_callback(
-			'#[=/\s]#',
-			fn($m) => '&#' . ord($m[0]) . ';',
-			$s,
-		);
-	}
-
-
-	/**
-	 * Formats an XML attribute.
-	 */
-	public static function formatAttribute(string $namePart, mixed $value, bool $migrationWarnings = false): string
-	{
-		if ($migrationWarnings && $value === null) {
-			HtmlHelpers::triggerMigrationWarning(trim($namePart), $value);
-		}
-		return match (true) {
-			is_string($value), is_int($value), is_float($value), $value instanceof \Stringable => $namePart . '="' . self::escapeAttr($value) . '"',
-			$value === null => '',
-			default => HtmlHelpers::triggerInvalidValue(trim($namePart), $value) ?? '',
-		};
-	}
-
-
-	/**
-	 * Checks that the HTML tag name can be changed.
-	 */
-	public static function validateTagChange(mixed $name, ?string $origName = null): string
-	{
-		$name ??= $origName;
-		if (!is_string($name)) {
-			throw new Latte\RuntimeException('Tag name must be string, ' . get_debug_type($name) . ' given');
-
-		} elseif (!preg_match('~' . self::ReName . '$~DAu', $name)) {
-			throw new Latte\RuntimeException("Invalid tag name '$name'");
-		}
-		return $name;
-	}
-
-
-	/**
-	 * Validates that the XML attribute name is a valid XML Name.
-	 */
-	public static function validateAttributeName(mixed $name): void
-	{
-		if (!is_string($name)) {
-			throw new Latte\RuntimeException('Attribute name must be string, ' . get_debug_type($name) . ' given');
-
-		} elseif (!preg_match('~' . self::ReName . '$~DAu', $name)) {
-			throw new Latte\RuntimeException("Invalid attribute name '$name'");
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/FunctionCallNode.php b/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/FunctionCallNode.php
deleted file mode 100644
index 262d344..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/FunctionCallNode.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Sandbox\Nodes;
-
-use Latte\Compiler\Nodes\Php\ArgumentNode;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Function call routed through sandbox security policy.
- */
-class FunctionCallNode extends Expression\FunctionCallNode
-{
-	public function __construct(Expression\FunctionCallNode $from)
-	{
-		parent::__construct($from->name, $from->args, $from->position);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if ($this->isPartialFunction()) {
-			return '$this->global->sandbox->closure(' . $context->memberAsString($this->name) . ')';
-		}
-
-		/** @var array<ArgumentNode> $args */
-		$args = $this->args;
-		return '$this->global->sandbox->call('
-			. $context->memberAsString($this->name) . ', '
-			. $context->argumentsAsArray($args) . ')';
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/MethodCallNode.php b/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/MethodCallNode.php
deleted file mode 100644
index 4db289d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/MethodCallNode.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Sandbox\Nodes;
-
-use Latte\Compiler\Nodes\Php\ArgumentNode;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Method call routed through sandbox security policy.
- */
-class MethodCallNode extends Expression\MethodCallNode
-{
-	public function __construct(Expression\MethodCallNode $from)
-	{
-		parent::__construct($from->object, $from->name, $from->args, $from->nullsafe, $from->position);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if ($this->isPartialFunction()) {
-			return '$this->global->sandbox->closure(['
-				. $this->object->print($context) . ', '
-				. $context->memberAsString($this->name) . '])';
-		}
-
-		/** @var array<ArgumentNode> $args */
-		$args = $this->args;
-		return '$this->global->sandbox->callMethod('
-			. $this->object->print($context) . ', '
-			. $context->memberAsString($this->name) . ', '
-			. $context->argumentsAsArray($args)
-			. ', ' . var_export($this->nullsafe, return: true) . ')';
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/PropertyFetchNode.php b/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/PropertyFetchNode.php
deleted file mode 100644
index 749434e..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/PropertyFetchNode.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Sandbox\Nodes;
-
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Property access routed through sandbox security policy.
- */
-class PropertyFetchNode extends Expression\PropertyFetchNode
-{
-	public function __construct(Expression\PropertyFetchNode $from)
-	{
-		parent::__construct($from->object, $from->name, $from->nullsafe, $from->position);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '$this->global->sandbox->prop('
-			. $this->object->print($context) . ', '
-			. $context->memberAsString($this->name) . ')'
-			. ($this->nullsafe ? '?->' : '->')
-			. $context->objectProperty($this->name);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/SandboxNode.php b/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/SandboxNode.php
deleted file mode 100644
index 072ea4f..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/SandboxNode.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Sandbox\Nodes;
-
-use Latte\Compiler\Nodes\Php\Expression\ArrayNode;
-use Latte\Compiler\Nodes\Php\ExpressionNode;
-use Latte\Compiler\Nodes\StatementNode;
-use Latte\Compiler\PrintContext;
-use Latte\Compiler\Tag;
-
-
-/**
- * {sandbox 'file.latte'}
- * Isolated template rendering with sandbox policy.
- */
-class SandboxNode extends StatementNode
-{
-	public ExpressionNode $file;
-	public ArrayNode $args;
-
-
-	public static function create(Tag $tag): static
-	{
-		$tag->outputMode = $tag::OutputRemoveIndentation;
-		$tag->expectArguments();
-		$node = new static;
-		$node->file = $tag->parser->parseUnquotedStringOrExpression();
-		$tag->parser->stream->tryConsume(',');
-		$node->args = $tag->parser->parseArguments();
-		return $node;
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return $context->format(
-			<<<'XX'
-				ob_start(fn() => '');
-				try {
-					$this->createTemplate(%raw, %node, 'sandbox')->renderToContentType(%dump) %line;
-				} catch (\Throwable $ʟ_e) {
-					if (isset($this->global->coreExceptionHandler)) {
-						ob_clean();
-						($this->global->coreExceptionHandler)($ʟ_e, $this);
-					} else {
-						throw $ʟ_e;
-					}
-				} finally {
-					echo ob_get_clean();
-				}
-
-
-				XX,
-			$context->ensureString($this->file, 'Template name'),
-			$this->args,
-			$context->getEscaper()->export(),
-			$this->position,
-		);
-	}
-
-
-	public function &getIterator(): \Generator
-	{
-		yield $this->file;
-		yield $this->args;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/StaticMethodCallNode.php b/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/StaticMethodCallNode.php
deleted file mode 100644
index 59f5072..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/StaticMethodCallNode.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Sandbox\Nodes;
-
-use Latte\Compiler\Nodes\Php\ArgumentNode;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Static method call routed through sandbox security policy.
- */
-class StaticMethodCallNode extends Expression\StaticMethodCallNode
-{
-	public function __construct(Expression\StaticMethodCallNode $from)
-	{
-		parent::__construct($from->class, $from->name, $from->args, $from->position);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		if ($this->isPartialFunction()) {
-			return '$this->global->sandbox->closure(['
-				. $context->memberAsString($this->class) . ', '
-				. $context->memberAsString($this->name) . '])';
-		}
-
-		/** @var array<ArgumentNode> $args */
-		$args = $this->args;
-		return '$this->global->sandbox->call(['
-			. $context->memberAsString($this->class) . ', '
-			. $context->memberAsString($this->name) . '], '
-			. $context->argumentsAsArray($args) . ')';
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/StaticPropertyFetchNode.php b/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/StaticPropertyFetchNode.php
deleted file mode 100644
index 02caf2d..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Sandbox/Nodes/StaticPropertyFetchNode.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Sandbox\Nodes;
-
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\PrintContext;
-
-
-/**
- * Static property access routed through sandbox security policy.
- */
-class StaticPropertyFetchNode extends Expression\StaticPropertyFetchNode
-{
-	public function __construct(Expression\StaticPropertyFetchNode $from)
-	{
-		parent::__construct($from->class, $from->name, $from->position);
-	}
-
-
-	public function print(PrintContext $context): string
-	{
-		return '$this->global->sandbox->prop('
-			. $context->memberAsString($this->class) . ', '
-			. $context->memberAsString($this->name) . ')'
-			. '::$'
-			. $context->objectProperty($this->name);
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Sandbox/RuntimeChecker.php b/generated/php/vendor/latte/latte/src/Latte/Sandbox/RuntimeChecker.php
deleted file mode 100644
index d278fd3..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Sandbox/RuntimeChecker.php
+++ /dev/null
@@ -1,131 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Sandbox;
-
-use Latte;
-use function count, explode, is_array, is_callable, is_object, is_string;
-
-
-/** @internal */
-final class RuntimeChecker
-{
-	public function __construct(
-		public Latte\Policy $policy,
-	) {
-	}
-
-
-	/**
-	 * Calls a function after verifying it is allowed by the policy.
-	 * @param  array<mixed>  $args
-	 */
-	public function call(mixed $callable, array $args): mixed
-	{
-		self::checkCallable($callable);
-		self::args(...$args);
-		return $callable(...$args);
-	}
-
-
-	/**
-	 * Calls a method on an object after verifying it is allowed by the policy.
-	 * @param  array<mixed>  $args
-	 */
-	public function callMethod(mixed $object, mixed $method, array $args, bool $nullsafe = false): mixed
-	{
-		if ($object === null) {
-			if ($nullsafe) {
-				throw new \Error("Call to a member function $method() on null");
-			}
-			return null;
-
-		} elseif (!is_object($object) || !is_string($method)) {
-			throw new Latte\SecurityViolationException('Invalid callable.');
-
-		} elseif (!$this->policy->isMethodAllowed($class = $object::class, $method)) {
-			throw new Latte\SecurityViolationException("Calling $class::$method() is not allowed.");
-		}
-
-		self::args(...$args);
-		return $object->$method(...$args);
-	}
-
-
-	/**
-	 * Returns the callable wrapped as a Closure after verifying it is allowed by the policy.
-	 */
-	public function closure(mixed $callable): \Closure
-	{
-		self::checkCallable($callable);
-		return $callable(...);
-	}
-
-
-	/**
-	 * Validates that no array argument is a disallowed callable and returns the arguments.
-	 * @return list<mixed>
-	 */
-	public function args(mixed ...$args): array
-	{
-		foreach ($args as $arg) {
-			if (
-				is_array($arg)
-				&& is_callable($arg, true, $text)
-				&& !$this->policy->isMethodAllowed(is_object($arg[0]) ? $arg[0]::class : $arg[0], $arg[1])
-			) {
-				throw new Latte\SecurityViolationException("Calling $text() is not allowed.");
-			}
-		}
-
-		return $args;
-	}
-
-
-	/**
-	 * Validates that property access is allowed by the policy and returns the object.
-	 */
-	public function prop(mixed $object, mixed $property): mixed
-	{
-		$class = is_object($object) ? $object::class : $object;
-		if (is_string($class) && !$this->policy->isPropertyAllowed($class, (string) $property)) {
-			throw new Latte\SecurityViolationException("Access to '$property' property on a $class object is not allowed.");
-		}
-
-		return $object;
-	}
-
-
-	private function checkCallable(mixed $callable): void
-	{
-		if (!is_callable($callable)) {
-			throw new Latte\SecurityViolationException('Invalid callable.');
-
-		} elseif (is_string($callable)) {
-			$parts = explode('::', $callable);
-			$allowed = count($parts) === 1
-				? $this->policy->isFunctionAllowed($parts[0])
-				: $this->policy->isMethodAllowed(...$parts);
-
-		} elseif (is_array($callable)) {
-			$allowed = $this->policy->isMethodAllowed(is_object($callable[0]) ? $callable[0]::class : $callable[0], $callable[1]);
-
-		} elseif (is_object($callable)) {
-			$allowed = $callable instanceof \Closure
-				? true
-				: $this->policy->isMethodAllowed($callable::class, '__invoke');
-
-		} else {
-			$allowed = false;
-		}
-
-		if (!$allowed) {
-			is_callable($callable, false, $text);
-			throw new Latte\SecurityViolationException("Calling $text() is not allowed.");
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Sandbox/SandboxExtension.php b/generated/php/vendor/latte/latte/src/Latte/Sandbox/SandboxExtension.php
deleted file mode 100644
index 6d20109..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Sandbox/SandboxExtension.php
+++ /dev/null
@@ -1,140 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Sandbox;
-
-use Latte;
-use Latte\Compiler\Node;
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\Nodes\TemplateNode;
-use Latte\Compiler\NodeTraverser;
-use Latte\Compiler\PrintContext;
-use Latte\Engine;
-use Latte\Runtime\Template;
-use Latte\SecurityViolationException;
-use function is_string, strrchr;
-
-
-/**
- * Security protection for the sandbox.
- */
-final class SandboxExtension extends Latte\Extension
-{
-	private ?Latte\Policy $policy;
-
-
-	public function beforeCompile(Engine $engine): void
-	{
-		$this->policy = $engine->getPolicy(effective: true);
-	}
-
-
-	public function getTags(): array
-	{
-		return [
-			'sandbox' => Nodes\SandboxNode::create(...),
-		];
-	}
-
-
-	public function getPasses(): array
-	{
-		return $this->policy
-			? ['sandbox' => self::order($this->processPass(...), before: '*')]
-			: [];
-	}
-
-
-	public function beforeRender(Template $template): void
-	{
-		$engine = $template->getEngine();
-		if ($policy = $engine->getPolicy()) {
-			$engine->addProvider('sandbox', new RuntimeChecker($policy));
-		}
-	}
-
-
-	public function getCacheKey(Engine $engine): mixed
-	{
-		return (bool) $engine->getPolicy(effective: true);
-	}
-
-
-	private function processPass(TemplateNode $node): void
-	{
-		(new NodeTraverser)->traverse($node, leave: $this->sandboxVisitor(...));
-	}
-
-
-	private function sandboxVisitor(Node $node): Node
-	{
-		assert($this->policy !== null);
-		if ($node instanceof Expression\VariableNode) {
-			if ($node->name === 'this') {
-				throw new SecurityViolationException("Forbidden variable \${$node->name}.", $node->position);
-			} elseif (!is_string($node->name)) {
-				throw new SecurityViolationException('Forbidden variable variables.', $node->position);
-			}
-
-			return $node;
-
-		} elseif ($node instanceof Latte\Compiler\Nodes\PrintNode && !$node->modifier->escape) {
-			throw new SecurityViolationException('Filter |noescape is not allowed.', $node->modifier->position);
-
-		} elseif ($node instanceof Expression\NewNode) {
-			throw new SecurityViolationException("Forbidden keyword 'new'", $node->position);
-
-		} elseif (
-			$node instanceof Expression\FunctionCallNode
-			&& $node->name instanceof Php\NameNode
-			&& !$node->isPartialFunction()
-		) {
-			if (!$this->policy->isFunctionAllowed((string) $node->name)) {
-				throw new SecurityViolationException("Function $node->name() is not allowed.", $node->position);
-
-			} elseif ($node->args) {
-				$arg = new Expression\AuxiliaryNode(
-					fn(PrintContext $context, ...$args) => '$this->global->sandbox->args(' . $context->implode($args) . ')',
-					$node->args,
-				);
-				$node->args = [new Php\ArgumentNode($arg, unpack: true)];
-			}
-
-			return $node;
-
-		} elseif ($node instanceof Php\FilterNode) {
-			$name = (string) $node->name;
-			if (!$this->policy->isFilterAllowed($name)) {
-				throw new SecurityViolationException("Filter |$name is not allowed.", $node->position);
-
-			} elseif ($node->args) {
-				$arg = new Expression\AuxiliaryNode(
-					fn(PrintContext $context, ...$args) => '$this->global->sandbox->args(' . $context->implode($args) . ')',
-					$node->args,
-				);
-				$node->args = [new Php\ArgumentNode($arg, unpack: true)];
-			}
-
-			return $node;
-
-		} elseif ($node instanceof Expression\PropertyFetchNode
-			|| $node instanceof Expression\StaticPropertyFetchNode
-			|| $node instanceof Expression\FunctionCallNode
-			|| $node instanceof Expression\MethodCallNode
-			|| $node instanceof Expression\StaticMethodCallNode
-		) {
-			$class = namespace\Nodes::class . strrchr($node::class, '\\');
-			$result = new $class($node);
-			assert($result instanceof Node);
-			return $result;
-
-		} else {
-			return $node;
-		}
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/Sandbox/SecurityPolicy.php b/generated/php/vendor/latte/latte/src/Latte/Sandbox/SecurityPolicy.php
deleted file mode 100644
index b9bae5c..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/Sandbox/SecurityPolicy.php
+++ /dev/null
@@ -1,189 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Sandbox;
-
-use Latte;
-use function array_flip, array_map, assert, is_a, is_bool, strtolower;
-
-
-/**
- * Default-deny security policy. Allowlist permitted tags, filters, functions, methods, and properties.
- */
-class SecurityPolicy implements Latte\Policy
-{
-	public const All = ['*'];
-	public const ALL = self::All;
-
-	/** @var array<string, int> */
-	private array $tags = [];
-
-	/** @var array<string, int> */
-	private array $filters = [];
-
-	/** @var array<string, int> */
-	private array $functions = [];
-
-	/** @var array<string, array<string, int>> */
-	private array $methods = [];
-
-	/** @var array<string, array<string, int>> */
-	private array $properties = [];
-
-	/** @var array<string, array<string, bool>> */
-	private array $methodCache = [];
-
-	/** @var array<string, array<string, bool>> */
-	private array $propertyCache = [];
-
-
-	/**
-	 * Creates policy with safe defaults for user-generated templates.
-	 */
-	public static function createSafePolicy(): self
-	{
-		$policy = new self;
-
-		// does not include: contentType, debugbreak, dump, extends, import, include, layout,
-		// php (but 'do' is allowed), sandbox, snippet, snippetArea, templatePrint, varPrint, embed
-		$policy->allowTags([
-			'_', '=', 'attr', 'block', 'breakIf', 'capture', 'case', 'class', 'continueIf', 'default',
-			'define', 'do', 'else', 'elseif', 'elseifset', 'first', 'for', 'foreach', 'if', 'ifchanged',
-			'ifcontent', 'iterateWhile', 'ifset', 'l', 'last', 'r', 'rollback', 'sep', 'skipIf', 'spaceless',
-			'switch', 'templateType', 'translate', 'try', 'var', 'varType', 'while',
-		]);
-
-		// does not include: dataStream, noEscape, noCheck
-		$policy->allowFilters([
-			'batch', 'breaklines', 'breakLines', 'bytes', 'capitalize', 'ceil', 'clamp', 'date', 'escapeCss', 'escapeHtml',
-			'escapeHtmlComment', 'escapeICal', 'escapeJs', 'escapeUrl', 'escapeXml', 'explode', 'first',
-			'firstUpper', 'floor', 'checkUrl', 'implode', 'indent', 'join', 'last', 'length', 'lower',
-			'limit', 'number', 'padLeft', 'padRight', 'query', 'random', 'repeat', 'replace', 'replaceRe', 'reverse',
-			'round', 'slice', 'sort', 'spaceless', 'split', 'strip', 'striphtml', 'stripHtml', 'striptags', 'stripTags', 'substr',
-			'trim', 'truncate', 'upper', 'webalize',
-		]);
-
-		$policy->allowFunctions(['clamp', 'divisibleBy', 'even', 'first', 'last', 'odd', 'slice']);
-
-		$policy->allowMethods(Latte\Essential\CachingIterator::class, self::All);
-		$policy->allowProperties(Latte\Essential\CachingIterator::class, self::All);
-
-		return $policy;
-	}
-
-
-	/**
-	 * @param  string[]  $tags
-	 */
-	public function allowTags(array $tags): self
-	{
-		$this->tags += array_flip(array_map(strtolower(...), $tags));
-		return $this;
-	}
-
-
-	/**
-	 * @param  string[]  $filters
-	 */
-	public function allowFilters(array $filters): self
-	{
-		$this->filters += array_flip(array_map(strtolower(...), $filters));
-		return $this;
-	}
-
-
-	/**
-	 * @param  string[]  $functions
-	 */
-	public function allowFunctions(array $functions): self
-	{
-		$this->functions += array_flip(array_map(strtolower(...), $functions));
-		return $this;
-	}
-
-
-	/**
-	 * Adds methods of the given class (or its subclasses) to the allowlist.
-	 * Use SecurityPolicy::All to allow all methods.
-	 * @param  string[]  $methods
-	 */
-	public function allowMethods(string $class, array $methods): self
-	{
-		$this->methodCache = [];
-		$this->methods[$class] = array_flip(array_map(strtolower(...), $methods));
-		return $this;
-	}
-
-
-	/**
-	 * Adds properties of the given class (or its subclasses) to the allowlist.
-	 * Use SecurityPolicy::All to allow all properties.
-	 * @param  string[]  $properties
-	 */
-	public function allowProperties(string $class, array $properties): self
-	{
-		$this->propertyCache = [];
-		$this->properties[$class] = array_flip(array_map(strtolower(...), $properties));
-		return $this;
-	}
-
-
-	public function isTagAllowed(string $tag): bool
-	{
-		return isset($this->tags[strtolower($tag)]) || isset($this->tags['*']);
-	}
-
-
-	public function isFilterAllowed(string $filter): bool
-	{
-		return isset($this->filters[strtolower($filter)]) || isset($this->filters['*']);
-	}
-
-
-	public function isFunctionAllowed(string $function): bool
-	{
-		return isset($this->functions[strtolower($function)]) || isset($this->functions['*']);
-	}
-
-
-	public function isMethodAllowed(string $class, string $method): bool
-	{
-		$method = strtolower($method);
-		$res = &$this->methodCache[$class][$method];
-		assert(is_bool($res) || $res === null);
-		if (isset($res)) {
-			return $res;
-		}
-
-		foreach ($this->methods as $c => $methods) {
-			if (is_a($class, $c, allow_string: true) && (isset($methods[$method]) || isset($methods['*']))) {
-				return $res = true;
-			}
-		}
-
-		return $res = false;
-	}
-
-
-	public function isPropertyAllowed(string $class, string $property): bool
-	{
-		$property = strtolower($property);
-		$res = &$this->propertyCache[$class][$property];
-		assert(is_bool($res) || $res === null);
-		if (isset($res)) {
-			return $res;
-		}
-
-		foreach ($this->properties as $c => $properties) {
-			if (is_a($class, $c, allow_string: true) && (isset($properties[$property]) || isset($properties['*']))) {
-				return $res = true;
-			}
-		}
-
-		return $res = false;
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/attributes.php b/generated/php/vendor/latte/latte/src/Latte/attributes.php
deleted file mode 100644
index ca54af0..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/attributes.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Attributes;
-
-use Attribute;
-
-
-/**
- * Marks method as a template function.
- */
-#[Attribute(Attribute::TARGET_METHOD)]
-class TemplateFunction
-{
-}
-
-
-/**
- * Marks method as a template filter.
- */
-#[Attribute(Attribute::TARGET_METHOD)]
-class TemplateFilter
-{
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/enums.php b/generated/php/vendor/latte/latte/src/Latte/enums.php
deleted file mode 100644
index 86221a3..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/enums.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte;
-
-
-/**
- * Latte engine feature flags.
- */
-enum Feature
-{
-	/** Adds declare(strict_types=1) to compiled templates (enabled by default) */
-	case StrictTypes;
-
-	/** Enforces strict HTML parsing */
-	case StrictParsing;
-
-	/** Shows warnings for deprecated Latte 3.0 syntax */
-	case MigrationWarnings;
-
-	/** Variables from {foreach} exist only within the loop */
-	case ScopedLoopVariables;
-
-	/** Removes structural indentation from paired tag content */
-	case Dedent;
-}
diff --git a/generated/php/vendor/latte/latte/src/Latte/exceptions.php b/generated/php/vendor/latte/latte/src/Latte/exceptions.php
deleted file mode 100644
index 624adba..0000000
--- a/generated/php/vendor/latte/latte/src/Latte/exceptions.php
+++ /dev/null
@@ -1,106 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte;
-
-
-/**
- * Common interface for all Latte exceptions.
- */
-interface Exception
-{
-}
-
-
-/**
- * @internal
- */
-trait PositionAwareException
-{
-	public ?string $sourceCode = null;
-	public ?string $sourceName = null;
-	public ?Compiler\Position $position = null;
-	private string $origMessage;
-
-
-	public function setSource(string $code, ?string $name = null): self
-	{
-		$this->sourceCode = $code;
-		$this->sourceName = $name;
-		$this->generateMessage();
-		return $this;
-	}
-
-
-	private function generateMessage(): void
-	{
-		$this->origMessage ??= $this->message;
-		$info = [];
-		if ($this->sourceName && @is_file($this->sourceName)) { // @ - may trigger error
-			$info[] = "in '" . str_replace(dirname($this->sourceName, 2), '...', $this->sourceName) . "'";
-		}
-		if ($this->position) {
-			$info[] = $this->position;
-		}
-		$this->message = $info
-			? rtrim($this->origMessage, '.') . ' (' . implode(' ', $info) . ')'
-			: $this->origMessage;
-	}
-}
-
-
-/**
- * Template compilation failed.
- */
-class CompileException extends \Exception implements Exception
-{
-	use PositionAwareException;
-
-	/** @deprecated */
-	public ?int $sourceLine;
-
-
-	public function __construct(string $message, ?Compiler\Position $position = null, ?\Throwable $previous = null)
-	{
-		parent::__construct($message, 0, $previous);
-		$this->position = $position;
-		$this->sourceLine = $position?->line;
-		$this->generateMessage();
-	}
-}
-
-
-/**
- * Template rendering failed.
- */
-class RuntimeException extends \RuntimeException implements Exception
-{
-}
-
-
-/**
- * Template file not found or could not be loaded.
- */
-class TemplateNotFoundException extends RuntimeException
-{
-}
-
-
-/**
- * Template uses forbidden function, filter or variable in sandbox mode.
- */
-class SecurityViolationException extends \Exception implements Exception
-{
-	use PositionAwareException;
-
-	public function __construct(string $message, ?Compiler\Position $position = null)
-	{
-		parent::__construct($message);
-		$this->position = $position;
-		$this->generateMessage();
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Tools/Linter.php b/generated/php/vendor/latte/latte/src/Tools/Linter.php
deleted file mode 100644
index ec8b348..0000000
--- a/generated/php/vendor/latte/latte/src/Tools/Linter.php
+++ /dev/null
@@ -1,199 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Tools;
-
-use Latte;
-use Nette;
-use function in_array, strlen;
-use const DIRECTORY_SEPARATOR, PHP_BINARY, STDERR;
-
-
-/**
- * Validates Latte template syntax.
- */
-final class Linter
-{
-	/** @var string[] */
-	public array $excludedDirs = ['.*', '*.tmp', 'temp', 'vendor', 'node_modules'];
-
-
-	public function __construct(
-		private ?Latte\Engine $engine = null,
-		private readonly bool $debug = false,
-		private readonly bool $strict = false,
-	) {
-	}
-
-
-	public function scanDirectory(string $path): bool
-	{
-		echo "Scanning $path\n";
-		return $this->scanFiles($this->getFiles($path));
-	}
-
-
-	/**
-	 * @param  iterable<\Stringable>  $files
-	 */
-	public function scanFiles(iterable $files): bool
-	{
-		$this->initialize();
-
-		$counter = 0;
-		$errors = 0;
-		foreach ($files as $file) {
-			$file = (string) $file;
-			echo preg_replace('~\.?[/\\\]~A', '', $file), "\x0D";
-			$errors += $this->lintLatte($file) ? 0 : 1;
-			echo str_pad('...', strlen($file)), "\x0D";
-			$counter++;
-		}
-
-		echo "Done (checked $counter files, found errors in $errors)\n";
-		return !$errors;
-	}
-
-
-	private function createEngine(): Latte\Engine
-	{
-		$engine = new Latte\Engine;
-		$engine->enablePhpLinter(PHP_BINARY);
-		$engine->setFeature(Latte\Feature::StrictParsing, $this->strict);
-		$engine->addExtension(new Latte\Essential\TranslatorExtension(null));
-
-		if (class_exists(Nette\Bridges\ApplicationLatte\UIExtension::class)) {
-			$engine->addExtension(new Nette\Bridges\ApplicationLatte\UIExtension(null));
-		}
-
-		if (class_exists(Nette\Bridges\CacheLatte\CacheExtension::class)) {
-			$engine->addExtension(new Nette\Bridges\CacheLatte\CacheExtension(new Nette\Caching\Storages\DevNullStorage));
-		}
-
-		if (class_exists(Nette\Bridges\FormsLatte\FormsExtension::class)) {
-			$engine->addExtension(new Nette\Bridges\FormsLatte\FormsExtension);
-		}
-
-		if (class_exists(Nette\Bridges\AssetsLatte\LatteExtension::class)) {
-			$engine->addExtension(new Nette\Bridges\AssetsLatte\LatteExtension(new Nette\Assets\Registry));
-		}
-
-		$engine->addExtension(new LinterExtension);
-
-		return $engine;
-	}
-
-
-	public function getEngine(): Latte\Engine
-	{
-		$this->engine ??= $this->createEngine();
-		return $this->engine;
-	}
-
-
-	public function lintLatte(string $file): bool
-	{
-		set_error_handler(function (int $severity, string $message, string $errFile = '', int $errLine = 0) use ($file): bool {
-			if (in_array($severity, [E_USER_DEPRECATED, E_USER_WARNING, E_USER_NOTICE], strict: true)) {
-				$pos = preg_match('~on line (\d+)~', $message, $m) ? ':' . $m[1] : '';
-				$label = $severity === E_USER_DEPRECATED ? 'DEPRECATED' : 'WARNING';
-				$this->writeError($label, $file . $pos, $message);
-				return true;
-			}
-			return false;
-		});
-
-		if ($this->debug) {
-			echo $file, "\n";
-		}
-		$s = file_get_contents($file);
-		if ($s === false) {
-			$this->writeError('ERROR', $file, 'unable to read file');
-			return false;
-		}
-		if (str_starts_with($s, "\xEF\xBB\xBF")) {
-			$this->writeError('WARNING', $file, 'contains BOM');
-		}
-
-		try {
-			$this->getEngine()
-				->setLoader(new Latte\Loaders\StringLoader)
-				->compile($s);
-
-		} catch (Latte\CompileException $e) {
-			if ($this->debug) {
-				echo $e;
-			}
-			$pos = $e->position?->line ? ':' . $e->position->line : '';
-			$pos .= $e->position?->column ? ':' . $e->position->column : '';
-			$this->writeError('ERROR', $file . $pos, $e->getMessage());
-			return false;
-
-		} finally {
-			restore_error_handler();
-		}
-
-		return true;
-	}
-
-
-	private function initialize(): void
-	{
-		if (function_exists('pcntl_signal')) {
-			pcntl_signal(SIGINT, function (): never {
-				pcntl_signal(SIGINT, SIG_DFL);
-				echo "Terminated\n";
-				exit(1);
-			});
-		} elseif (function_exists('sapi_windows_set_ctrl_handler')) {
-			sapi_windows_set_ctrl_handler(function (): never {
-				echo "Terminated\n";
-				exit(1);
-			});
-		}
-
-		set_time_limit(0);
-	}
-
-
-	private function getFiles(string $path): \Iterator
-	{
-		$it = match (true) {
-			is_file($path) => new \ArrayIterator([$path]),
-			is_dir($path) => $this->findLatteFiles($path),
-			(bool) preg_match('~[*?]~', $path) => new \GlobIterator($path),
-			default => throw new \InvalidArgumentException("File or directory '$path' not found."),
-		};
-		$it = new \CallbackFilterIterator($it, fn($file) => is_file((string) $file));
-		return $it;
-	}
-
-
-	private function findLatteFiles(string $dir): \Generator
-	{
-		foreach (scandir($dir) as $name) {
-			$path = ($dir === '.' ? '' : $dir . DIRECTORY_SEPARATOR) . $name;
-			if ($name !== '.' && $name !== '..' && is_dir($path)) {
-				foreach ($this->excludedDirs as $pattern) {
-					if (fnmatch($pattern, $name)) {
-						continue 2;
-					}
-				}
-				yield from $this->findLatteFiles($path);
-
-			} elseif (str_ends_with($name, '.latte')) {
-				yield $path;
-			}
-		}
-	}
-
-
-	private function writeError(string $label, string $file, string $message): void
-	{
-		fwrite(STDERR, str_pad("[$label]", 13) . ' ' . $file . '    ' . $message . "\n");
-	}
-}
diff --git a/generated/php/vendor/latte/latte/src/Tools/LinterExtension.php b/generated/php/vendor/latte/latte/src/Tools/LinterExtension.php
deleted file mode 100644
index bf7875f..0000000
--- a/generated/php/vendor/latte/latte/src/Tools/LinterExtension.php
+++ /dev/null
@@ -1,176 +0,0 @@
-<?php declare(strict_types=1);
-
-/**
- * This file is part of the Latte (https://latte.nette.org)
- * Copyright (c) 2008 David Grudl (https://davidgrudl.com)
- */
-
-namespace Latte\Tools;
-
-use Latte;
-use Latte\Compiler\Node;
-use Latte\Compiler\Nodes\Php;
-use Latte\Compiler\Nodes\Php\Expression;
-use Latte\Compiler\Nodes\TemplateNode;
-use Latte\Compiler\NodeTraverser;
-use function defined;
-
-
-/**
- * Linter extension for validating filters, functions, classes, methods, constants and more.
- */
-final class LinterExtension extends Latte\Extension
-{
-	private ?Latte\Engine $engine = null;
-
-
-	public function beforeCompile(Latte\Engine $engine): void
-	{
-		$this->engine = $engine;
-	}
-
-
-	public function getPasses(): array
-	{
-		return [
-			'linter' => $this->linterPass(...),
-		];
-	}
-
-
-	private function linterPass(TemplateNode $node): void
-	{
-		(new NodeTraverser)->traverse($node, function (Node $node) {
-			if ($node instanceof Php\FilterNode) {
-				$this->validateFilter($node);
-
-			} elseif ($node instanceof Expression\FunctionCallNode && $node->name instanceof Php\NameNode) {
-				$this->validateFunction($node);
-
-			} elseif ($node instanceof Expression\NewNode && $node->class instanceof Php\NameNode) {
-				$this->validateNewObject($node);
-
-			} elseif ($node instanceof Expression\StaticMethodCallNode
-				&& $node->class instanceof Php\NameNode
-				&& $node->name instanceof Php\IdentifierNode
-			) {
-				$this->validateStaticMethod($node);
-
-			} elseif ($node instanceof Expression\ClassConstantFetchNode
-				&& $node->class instanceof Php\NameNode
-				&& $node->name instanceof Php\IdentifierNode
-			) {
-				$node->name->name === 'class'
-					? $this->validateClassType($node->class)
-					: $this->validateClassConstant($node);
-
-			} elseif ($node instanceof Expression\ConstantFetchNode) {
-				$this->validateConstant($node);
-
-			} elseif ($node instanceof Expression\InstanceofNode && $node->class instanceof Php\NameNode) {
-				$this->validateInstanceof($node);
-
-			} elseif ($node instanceof Expression\StaticPropertyFetchNode
-				&& $node->class instanceof Php\NameNode
-				&& $node->name instanceof Php\VarLikeIdentifierNode
-			) {
-				$this->validateStaticProperty($node);
-			}
-		});
-	}
-
-
-	private function validateFilter(Php\FilterNode $node): void
-	{
-		$name = $node->name->name;
-		assert($this->engine !== null);
-		$filters = $this->engine->getFilters();
-		if (!isset($filters[$name])) {
-			trigger_error("Unknown filter |$name $node->position", E_USER_WARNING);
-		}
-	}
-
-
-	private function validateFunction(Expression\FunctionCallNode $node): void
-	{
-		assert($node->name instanceof Php\NameNode);
-		$name = (string) $node->name;
-		if (!function_exists($name)) {
-			trigger_error("Unknown function $name() $node->position", E_USER_WARNING);
-		}
-	}
-
-
-	private function validateNewObject(Expression\NewNode $node): void
-	{
-		assert($node->class instanceof Php\NameNode);
-		$className = (string) $node->class;
-		if (!class_exists($className)) {
-			trigger_error("Unknown class $className $node->position", E_USER_WARNING);
-		}
-	}
-
-
-	private function validateStaticMethod(Expression\StaticMethodCallNode $node): void
-	{
-		assert($node->class instanceof Php\NameNode);
-		assert($node->name instanceof Php\IdentifierNode);
-		$className = (string) $node->class;
-		$methodName = $node->name->name;
-		if (!method_exists($className, $methodName)) {
-			trigger_error("Unknown method $className::$methodName() $node->position", E_USER_WARNING);
-		}
-	}
-
-
-	private function validateClassType(Php\NameNode $node): void
-	{
-		$className = (string) $node;
-		if (!class_exists($className) && !interface_exists($className) && !trait_exists($className)) {
-			trigger_error("Unknown class $className $node->position", E_USER_WARNING);
-		}
-	}
-
-
-	private function validateClassConstant(Expression\ClassConstantFetchNode $node): void
-	{
-		assert($node->class instanceof Php\NameNode);
-		assert($node->name instanceof Php\IdentifierNode);
-		$name = "{$node->class}::{$node->name->name}";
-		if (!defined($name)) {
-			trigger_error("Unknown class constant $name $node->position", E_USER_WARNING);
-		}
-	}
-
-
-	private function validateConstant(Expression\ConstantFetchNode $node): void
-	{
-		$magic = ['__LINE__' => 1, '__FILE__' => 1, '__DIR__' => 1];
-		$name = (string) $node->name;
-		if (!defined($name) && !isset($magic[$name])) {
-			trigger_error("Unknown constant $name $node->position", E_USER_WARNING);
-		}
-	}
-
-
-	private function validateInstanceof(Expression\InstanceofNode $node): void
-	{
-		assert($node->class instanceof Php\NameNode);
-		$className = (string) $node->class;
-		if (!class_exists($className) && !interface_exists($className)) {
-			trigger_error("Unknown class $className in instanceof $node->position", E_USER_WARNING);
-		}
-	}
-
-
-	private function validateStaticProperty(Expression\StaticPropertyFetchNode $node): void
-	{
-		assert($node->class instanceof Php\NameNode);
-		assert($node->name instanceof Php\VarLikeIdentifierNode);
-		$className = (string) $node->class;
-		$propertyName = $node->name->name;
-		if (!property_exists($className, $propertyName)) {
-			trigger_error("Unknown static property $className::\$$propertyName $node->position", E_USER_WARNING);
-		}
-	}
-}
diff --git a/generated/php/vendor/symfony/deprecation-contracts/CHANGELOG.md b/generated/php/vendor/symfony/deprecation-contracts/CHANGELOG.md
deleted file mode 100644
index 7932e26..0000000
--- a/generated/php/vendor/symfony/deprecation-contracts/CHANGELOG.md
+++ /dev/null
@@ -1,5 +0,0 @@
-CHANGELOG
-=========
-
-The changelog is maintained for all Symfony contracts at the following URL:
-https://github.com/symfony/contracts/blob/main/CHANGELOG.md
diff --git a/generated/php/vendor/symfony/deprecation-contracts/LICENSE b/generated/php/vendor/symfony/deprecation-contracts/LICENSE
deleted file mode 100644
index 0ed3a24..0000000
--- a/generated/php/vendor/symfony/deprecation-contracts/LICENSE
+++ /dev/null
@@ -1,19 +0,0 @@
-Copyright (c) 2020-present Fabien Potencier
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is furnished
-to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/generated/php/vendor/symfony/deprecation-contracts/README.md b/generated/php/vendor/symfony/deprecation-contracts/README.md
deleted file mode 100644
index 9814864..0000000
--- a/generated/php/vendor/symfony/deprecation-contracts/README.md
+++ /dev/null
@@ -1,26 +0,0 @@
-Symfony Deprecation Contracts
-=============================
-
-A generic function and convention to trigger deprecation notices.
-
-This package provides a single global function named `trigger_deprecation()` that triggers silenced deprecation notices.
-
-By using a custom PHP error handler such as the one provided by the Symfony ErrorHandler component,
-the triggered deprecations can be caught and logged for later discovery, both on dev and prod environments.
-
-The function requires at least 3 arguments:
- - the name of the Composer package that is triggering the deprecation
- - the version of the package that introduced the deprecation
- - the message of the deprecation
- - more arguments can be provided: they will be inserted in the message using `printf()` formatting
-
-Example:
-```php
-trigger_deprecation('symfony/blockchain', '8.9', 'Using "%s" is deprecated, use "%s" instead.', 'bitcoin', 'fabcoin');
-```
-
-This will generate the following message:
-`Since symfony/blockchain 8.9: Using "bitcoin" is deprecated, use "fabcoin" instead.`
-
-While not recommended, the deprecation notices can be completely ignored by declaring an empty
-`function trigger_deprecation() {}` in your application.
diff --git a/generated/php/vendor/symfony/deprecation-contracts/composer.json b/generated/php/vendor/symfony/deprecation-contracts/composer.json
deleted file mode 100644
index 9279eb1..0000000
--- a/generated/php/vendor/symfony/deprecation-contracts/composer.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-    "name": "symfony/deprecation-contracts",
-    "type": "library",
-    "description": "A generic function and convention to trigger deprecation notices",
-    "homepage": "https://symfony.com",
-    "license": "MIT",
-    "authors": [
-        {
-            "name": "Nicolas Grekas",
-            "email": "p@tchwork.com"
-        },
-        {
-            "name": "Symfony Community",
-            "homepage": "https://symfony.com/contributors"
-        }
-    ],
-    "require": {
-        "php": ">=8.1"
-    },
-    "autoload": {
-        "files": [
-            "function.php"
-        ]
-    },
-    "minimum-stability": "dev",
-    "extra": {
-        "branch-alias": {
-            "dev-main": "3.7-dev"
-        },
-        "thanks": {
-            "name": "symfony/contracts",
-            "url": "https://github.com/symfony/contracts"
-        }
-    }
-}
diff --git a/generated/php/vendor/symfony/deprecation-contracts/function.php b/generated/php/vendor/symfony/deprecation-contracts/function.php
deleted file mode 100644
index 2d56512..0000000
--- a/generated/php/vendor/symfony/deprecation-contracts/function.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <fabien@symfony.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-if (!function_exists('trigger_deprecation')) {
-    /**
-     * Triggers a silenced deprecation notice.
-     *
-     * @param string $package The name of the Composer package that is triggering the deprecation
-     * @param string $version The version of the package that introduced the deprecation
-     * @param string $message The message of the deprecation
-     * @param mixed  ...$args Values to insert in the message using printf() formatting
-     *
-     * @author Nicolas Grekas <p@tchwork.com>
-     */
-    function trigger_deprecation(string $package, string $version, string $message, mixed ...$args): void
-    {
-        @trigger_error(($package || $version ? "Since $package $version: " : '').($args ? vsprintf($message, $args) : $message), \E_USER_DEPRECATED);
-    }
-}
diff --git a/generated/php/vendor/symfony/polyfill-ctype/Ctype.php b/generated/php/vendor/symfony/polyfill-ctype/Ctype.php
deleted file mode 100644
index e26cc02..0000000
--- a/generated/php/vendor/symfony/polyfill-ctype/Ctype.php
+++ /dev/null
@@ -1,232 +0,0 @@
-<?php
-
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <fabien@symfony.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Symfony\Polyfill\Ctype;
-
-/**
- * Ctype implementation through regex.
- *
- * @internal
- *
- * @author Gert de Pagter <BackEndTea@gmail.com>
- */
-final class Ctype
-{
-    /**
-     * Returns TRUE if every character in text is either a letter or a digit, FALSE otherwise.
-     *
-     * @see https://php.net/ctype-alnum
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_alnum($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^A-Za-z0-9]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in text is a letter, FALSE otherwise.
-     *
-     * @see https://php.net/ctype-alpha
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_alpha($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^A-Za-z]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in text is a control character from the current locale, FALSE otherwise.
-     *
-     * @see https://php.net/ctype-cntrl
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_cntrl($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^\x00-\x1f\x7f]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in the string text is a decimal digit, FALSE otherwise.
-     *
-     * @see https://php.net/ctype-digit
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_digit($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^0-9]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in text is printable and actually creates visible output (no white space), FALSE otherwise.
-     *
-     * @see https://php.net/ctype-graph
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_graph($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^!-~]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in text is a lowercase letter.
-     *
-     * @see https://php.net/ctype-lower
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_lower($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^a-z]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in text will actually create output (including blanks). Returns FALSE if text contains control characters or characters that do not have any output or control function at all.
-     *
-     * @see https://php.net/ctype-print
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_print($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^ -~]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in text is printable, but neither letter, digit or blank, FALSE otherwise.
-     *
-     * @see https://php.net/ctype-punct
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_punct($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^!-\/\:-@\[-`\{-~]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in text creates some sort of white space, FALSE otherwise. Besides the blank character this also includes tab, vertical tab, line feed, carriage return and form feed characters.
-     *
-     * @see https://php.net/ctype-space
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_space($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^\s]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in text is an uppercase letter.
-     *
-     * @see https://php.net/ctype-upper
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_upper($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^A-Z]/', $text);
-    }
-
-    /**
-     * Returns TRUE if every character in text is a hexadecimal 'digit', that is a decimal digit or a character from [A-Fa-f] , FALSE otherwise.
-     *
-     * @see https://php.net/ctype-xdigit
-     *
-     * @param mixed $text
-     *
-     * @return bool
-     */
-    public static function ctype_xdigit($text)
-    {
-        $text = self::convert_int_to_char_for_ctype($text, __FUNCTION__);
-
-        return \is_string($text) && '' !== $text && !preg_match('/[^A-Fa-f0-9]/', $text);
-    }
-
-    /**
-     * Converts integers to their char versions according to normal ctype behaviour, if needed.
-     *
-     * If an integer between -128 and 255 inclusive is provided,
-     * it is interpreted as the ASCII value of a single character
-     * (negative values have 256 added in order to allow characters in the Extended ASCII range).
-     * Any other integer is interpreted as a string containing the decimal digits of the integer.
-     *
-     * @param mixed  $int
-     * @param string $function
-     *
-     * @return mixed
-     */
-    private static function convert_int_to_char_for_ctype($int, $function)
-    {
-        if (\PHP_VERSION_ID >= 80100 && !\is_string($int)) {
-            @trigger_error($function.'(): Argument of type '.get_debug_type($int).' will be interpreted as string in the future', \E_USER_DEPRECATED);
-        }
-
-        if (!\is_int($int)) {
-            return $int;
-        }
-
-        if ($int < -128 || $int > 255) {
-            return (string) $int;
-        }
-
-        if ($int < 0) {
-            $int += 256;
-        }
-
-        return \chr($int);
-    }
-}
diff --git a/generated/php/vendor/symfony/polyfill-ctype/LICENSE b/generated/php/vendor/symfony/polyfill-ctype/LICENSE
deleted file mode 100644
index 7536cae..0000000
--- a/generated/php/vendor/symfony/polyfill-ctype/LICENSE
+++ /dev/null
@@ -1,19 +0,0 @@
-Copyright (c) 2018-present Fabien Potencier
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is furnished
-to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/generated/php/vendor/symfony/polyfill-ctype/README.md b/generated/php/vendor/symfony/polyfill-ctype/README.md
deleted file mode 100644
index b144d03..0000000
--- a/generated/php/vendor/symfony/polyfill-ctype/README.md
+++ /dev/null
@@ -1,12 +0,0 @@
-Symfony Polyfill / Ctype
-========================
-
-This component provides `ctype_*` functions to users who run php versions without the ctype extension.
-
-More information can be found in the
-[main Polyfill README](https://github.com/symfony/polyfill/blob/main/README.md).
-
-License
-=======
-
-This library is released under the [MIT license](LICENSE).
diff --git a/generated/php/vendor/symfony/polyfill-ctype/bootstrap.php b/generated/php/vendor/symfony/polyfill-ctype/bootstrap.php
deleted file mode 100644
index d54524b..0000000
--- a/generated/php/vendor/symfony/polyfill-ctype/bootstrap.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<?php
-
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <fabien@symfony.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-use Symfony\Polyfill\Ctype as p;
-
-if (\PHP_VERSION_ID >= 80000) {
-    return require __DIR__.'/bootstrap80.php';
-}
-
-if (!function_exists('ctype_alnum')) {
-    function ctype_alnum($text) { return p\Ctype::ctype_alnum($text); }
-}
-if (!function_exists('ctype_alpha')) {
-    function ctype_alpha($text) { return p\Ctype::ctype_alpha($text); }
-}
-if (!function_exists('ctype_cntrl')) {
-    function ctype_cntrl($text) { return p\Ctype::ctype_cntrl($text); }
-}
-if (!function_exists('ctype_digit')) {
-    function ctype_digit($text) { return p\Ctype::ctype_digit($text); }
-}
-if (!function_exists('ctype_graph')) {
-    function ctype_graph($text) { return p\Ctype::ctype_graph($text); }
-}
-if (!function_exists('ctype_lower')) {
-    function ctype_lower($text) { return p\Ctype::ctype_lower($text); }
-}
-if (!function_exists('ctype_print')) {
-    function ctype_print($text) { return p\Ctype::ctype_print($text); }
-}
-if (!function_exists('ctype_punct')) {
-    function ctype_punct($text) { return p\Ctype::ctype_punct($text); }
-}
-if (!function_exists('ctype_space')) {
-    function ctype_space($text) { return p\Ctype::ctype_space($text); }
-}
-if (!function_exists('ctype_upper')) {
-    function ctype_upper($text) { return p\Ctype::ctype_upper($text); }
-}
-if (!function_exists('ctype_xdigit')) {
-    function ctype_xdigit($text) { return p\Ctype::ctype_xdigit($text); }
-}
diff --git a/generated/php/vendor/symfony/polyfill-ctype/bootstrap80.php b/generated/php/vendor/symfony/polyfill-ctype/bootstrap80.php
deleted file mode 100644
index ab2f861..0000000
--- a/generated/php/vendor/symfony/polyfill-ctype/bootstrap80.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <fabien@symfony.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-use Symfony\Polyfill\Ctype as p;
-
-if (!function_exists('ctype_alnum')) {
-    function ctype_alnum(mixed $text): bool { return p\Ctype::ctype_alnum($text); }
-}
-if (!function_exists('ctype_alpha')) {
-    function ctype_alpha(mixed $text): bool { return p\Ctype::ctype_alpha($text); }
-}
-if (!function_exists('ctype_cntrl')) {
-    function ctype_cntrl(mixed $text): bool { return p\Ctype::ctype_cntrl($text); }
-}
-if (!function_exists('ctype_digit')) {
-    function ctype_digit(mixed $text): bool { return p\Ctype::ctype_digit($text); }
-}
-if (!function_exists('ctype_graph')) {
-    function ctype_graph(mixed $text): bool { return p\Ctype::ctype_graph($text); }
-}
-if (!function_exists('ctype_lower')) {
-    function ctype_lower(mixed $text): bool { return p\Ctype::ctype_lower($text); }
-}
-if (!function_exists('ctype_print')) {
-    function ctype_print(mixed $text): bool { return p\Ctype::ctype_print($text); }
-}
-if (!function_exists('ctype_punct')) {
-    function ctype_punct(mixed $text): bool { return p\Ctype::ctype_punct($text); }
-}
-if (!function_exists('ctype_space')) {
-    function ctype_space(mixed $text): bool { return p\Ctype::ctype_space($text); }
-}
-if (!function_exists('ctype_upper')) {
-    function ctype_upper(mixed $text): bool { return p\Ctype::ctype_upper($text); }
-}
-if (!function_exists('ctype_xdigit')) {
-    function ctype_xdigit(mixed $text): bool { return p\Ctype::ctype_xdigit($text); }
-}
diff --git a/generated/php/vendor/symfony/polyfill-ctype/composer.json b/generated/php/vendor/symfony/polyfill-ctype/composer.json
deleted file mode 100644
index 131ca7a..0000000
--- a/generated/php/vendor/symfony/polyfill-ctype/composer.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-    "name": "symfony/polyfill-ctype",
-    "type": "library",
-    "description": "Symfony polyfill for ctype functions",
-    "keywords": ["polyfill", "compatibility", "portable", "ctype"],
-    "homepage": "https://symfony.com",
-    "license": "MIT",
-    "authors": [
-        {
-            "name": "Gert de Pagter",
-            "email": "BackEndTea@gmail.com"
-        },
-        {
-            "name": "Symfony Community",
-            "homepage": "https://symfony.com/contributors"
-        }
-    ],
-    "require": {
-        "php": ">=7.2"
-    },
-    "provide": {
-        "ext-ctype": "*"
-    },
-    "autoload": {
-        "psr-4": { "Symfony\\Polyfill\\Ctype\\": "" },
-        "files": [ "bootstrap.php" ]
-    },
-    "suggest": {
-        "ext-ctype": "For best performance"
-    },
-    "minimum-stability": "dev",
-    "extra": {
-        "thanks": {
-            "name": "symfony/polyfill",
-            "url": "https://github.com/symfony/polyfill"
-        }
-    }
-}
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/LICENSE b/generated/php/vendor/symfony/polyfill-mbstring/LICENSE
deleted file mode 100644
index 6e3afce..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/LICENSE
+++ /dev/null
@@ -1,19 +0,0 @@
-Copyright (c) 2015-present Fabien Potencier
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is furnished
-to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/Mbstring.php b/generated/php/vendor/symfony/polyfill-mbstring/Mbstring.php
deleted file mode 100644
index e3d1f96..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/Mbstring.php
+++ /dev/null
@@ -1,1138 +0,0 @@
-<?php
-
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <fabien@symfony.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Symfony\Polyfill\Mbstring;
-
-/**
- * Partial mbstring implementation in PHP, iconv based, UTF-8 centric.
- *
- * Implemented:
- * - mb_chr                  - Returns a specific character from its Unicode code point
- * - mb_convert_encoding     - Convert character encoding
- * - mb_convert_variables    - Convert character code in variable(s)
- * - mb_decode_mimeheader    - Decode string in MIME header field
- * - mb_encode_mimeheader    - Encode string for MIME header XXX NATIVE IMPLEMENTATION IS REALLY BUGGED
- * - mb_decode_numericentity - Decode HTML numeric string reference to character
- * - mb_encode_numericentity - Encode character to HTML numeric string reference
- * - mb_convert_case         - Perform case folding on a string
- * - mb_detect_encoding      - Detect character encoding
- * - mb_get_info             - Get internal settings of mbstring
- * - mb_http_input           - Detect HTTP input character encoding
- * - mb_http_output          - Set/Get HTTP output character encoding
- * - mb_internal_encoding    - Set/Get internal character encoding
- * - mb_list_encodings       - Returns an array of all supported encodings
- * - mb_ord                  - Returns the Unicode code point of a character
- * - mb_output_handler       - Callback function converts character encoding in output buffer
- * - mb_scrub                - Replaces ill-formed byte sequences with substitute characters
- * - mb_strlen               - Get string length
- * - mb_strpos               - Find position of first occurrence of string in a string
- * - mb_strrpos              - Find position of last occurrence of a string in a string
- * - mb_str_split            - Convert a string to an array
- * - mb_strtolower           - Make a string lowercase
- * - mb_strtoupper           - Make a string uppercase
- * - mb_substitute_character - Set/Get substitution character
- * - mb_substr               - Get part of string
- * - mb_stripos              - Finds position of first occurrence of a string within another, case insensitive
- * - mb_stristr              - Finds first occurrence of a string within another, case insensitive
- * - mb_strrchr              - Finds the last occurrence of a character in a string within another
- * - mb_strrichr             - Finds the last occurrence of a character in a string within another, case insensitive
- * - mb_strripos             - Finds position of last occurrence of a string within another, case insensitive
- * - mb_strstr               - Finds first occurrence of a string within another
- * - mb_strwidth             - Return width of string
- * - mb_substr_count         - Count the number of substring occurrences
- * - mb_ucfirst              - Make a string's first character uppercase
- * - mb_lcfirst              - Make a string's first character lowercase
- * - mb_trim                 - Strip whitespace (or other characters) from the beginning and end of a string
- * - mb_ltrim                - Strip whitespace (or other characters) from the beginning of a string
- * - mb_rtrim                - Strip whitespace (or other characters) from the end of a string
- *
- * Not implemented:
- * - mb_convert_kana         - Convert "kana" one from another ("zen-kaku", "han-kaku" and more)
- * - mb_ereg_*               - Regular expression with multibyte support
- * - mb_parse_str            - Parse GET/POST/COOKIE data and set global variable
- * - mb_preferred_mime_name  - Get MIME charset string
- * - mb_regex_encoding       - Returns current encoding for multibyte regex as string
- * - mb_regex_set_options    - Set/Get the default options for mbregex functions
- * - mb_send_mail            - Send encoded mail
- * - mb_split                - Split multibyte string using regular expression
- * - mb_strcut               - Get part of string
- * - mb_strimwidth           - Get truncated string with specified width
- *
- * @author Nicolas Grekas <p@tchwork.com>
- *
- * @internal
- */
-final class Mbstring
-{
-    public const MB_CASE_FOLD = \PHP_INT_MAX;
-
-    private const SIMPLE_CASE_FOLD = [
-        ['µ', 'ſ', "\xCD\x85", 'ς', "\xCF\x90", "\xCF\x91", "\xCF\x95", "\xCF\x96", "\xCF\xB0", "\xCF\xB1", "\xCF\xB5", "\xE1\xBA\x9B", "\xE1\xBE\xBE"],
-        ['μ', 's', 'ι',        'σ', 'β',        'θ',        'φ',        'π',        'κ',        'ρ',        'ε',        "\xE1\xB9\xA1", 'ι'],
-    ];
-
-    private static $encodingList = ['ASCII', 'UTF-8'];
-    private static $language = 'neutral';
-    private static $internalEncoding = 'UTF-8';
-    private static $iconvSupportsIgnore;
-
-    public static function mb_convert_encoding($s, $toEncoding, $fromEncoding = null)
-    {
-        if (\is_array($s)) {
-            $r = [];
-            foreach ($s as $str) {
-                $r[] = self::mb_convert_encoding($str, $toEncoding, $fromEncoding);
-            }
-
-            return $r;
-        }
-
-        if (\is_array($fromEncoding) || (null !== $fromEncoding && false !== strpos($fromEncoding, ','))) {
-            $fromEncoding = self::mb_detect_encoding($s, $fromEncoding);
-        } else {
-            $fromEncoding = self::getEncoding($fromEncoding);
-        }
-
-        $toEncoding = self::getEncoding($toEncoding);
-
-        if ('BASE64' === $fromEncoding) {
-            $s = base64_decode($s);
-            $fromEncoding = $toEncoding;
-        }
-
-        if ('BASE64' === $toEncoding) {
-            return base64_encode($s);
-        }
-
-        if ('HTML-ENTITIES' === $toEncoding || 'HTML' === $toEncoding) {
-            if ('HTML-ENTITIES' === $fromEncoding || 'HTML' === $fromEncoding) {
-                $fromEncoding = 'Windows-1252';
-            }
-            if ('UTF-8' !== $fromEncoding) {
-                $s = self::iconv($fromEncoding, 'UTF-8', $s);
-            }
-
-            return preg_replace_callback('/[\x80-\xFF]+/', [__CLASS__, 'html_encoding_callback'], $s);
-        }
-
-        if ('HTML-ENTITIES' === $fromEncoding) {
-            $decodeControlChars = static function ($m) {
-                $code = '' !== ($m[2] ?? '') ? hexdec($m[2]) : (int) $m[1];
-
-                if ($code < 32 || 127 === $code) {
-                    return \chr($code);
-                }
-                if (128 <= $code && $code <= 159) {
-                    return "\xC2".\chr(0x80 | ($code & 0x3F));
-                }
-
-                return $m[0];
-            };
-
-            if (\PHP_VERSION_ID >= 70400) {
-                $s = html_entity_decode($s, \ENT_QUOTES, 'UTF-8');
-                // html_entity_decode() leaves numeric entities for C0/C1 control
-                // characters as-is (HTML spec), but mb_convert_encoding() decodes
-                // them. Catch what html_entity_decode() missed.
-                if (false !== strpos($s, '&#')) {
-                    $s = preg_replace_callback('/&#(?:0*([0-9]++)|[xX]0*([0-9a-fA-F]++));/', $decodeControlChars, $s);
-                }
-            } else {
-                // PHP < 7.4: html_entity_decode() truncates strings at NUL bytes,
-                // so decode the control character entities first then call
-                // html_entity_decode() on each NUL-delimited chunk independently.
-                $s = preg_replace_callback('/&#(?:0*([0-9]++)|[xX]0*([0-9a-fA-F]++));/', $decodeControlChars, $s);
-                $s = implode("\0", array_map(static function ($chunk) {
-                    return html_entity_decode($chunk, \ENT_QUOTES, 'UTF-8');
-                }, explode("\0", $s)));
-            }
-            $fromEncoding = 'UTF-8';
-        }
-
-        return self::iconv($fromEncoding, $toEncoding, $s);
-    }
-
-    public static function mb_convert_variables($toEncoding, $fromEncoding, &...$vars)
-    {
-        $ok = true;
-        array_walk_recursive($vars, static function (&$v) use (&$ok, $toEncoding, $fromEncoding) {
-            if (false === $v = self::mb_convert_encoding($v, $toEncoding, $fromEncoding)) {
-                $ok = false;
-            }
-        });
-
-        return $ok ? $fromEncoding : false;
-    }
-
-    public static function mb_decode_mimeheader($s)
-    {
-        return iconv_mime_decode($s, 2, self::$internalEncoding);
-    }
-
-    public static function mb_encode_mimeheader($s, $charset = null, $transferEncoding = null, $linefeed = null, $indent = null)
-    {
-        trigger_error('mb_encode_mimeheader() is bugged. Please use iconv_mime_encode() instead', \E_USER_WARNING);
-    }
-
-    public static function mb_decode_numericentity($s, $convmap, $encoding = null)
-    {
-        if (null !== $s && !\is_scalar($s) && !(\is_object($s) && method_exists($s, '__toString'))) {
-            trigger_error('mb_decode_numericentity() expects parameter 1 to be string, '.\gettype($s).' given', \E_USER_WARNING);
-
-            return null;
-        }
-
-        if (!\is_array($convmap) || (80000 > \PHP_VERSION_ID && !$convmap)) {
-            return false;
-        }
-
-        if (null !== $encoding && !\is_scalar($encoding)) {
-            trigger_error('mb_decode_numericentity() expects parameter 3 to be string, '.\gettype($s).' given', \E_USER_WARNING);
-
-            return '';  // Instead of null (cf. mb_encode_numericentity).
-        }
-
-        $s = (string) $s;
-        if ('' === $s) {
-            return '';
-        }
-
-        $encoding = self::getEncoding($encoding);
-
-        if ('UTF-8' === $encoding) {
-            $encoding = null;
-            if (!preg_match('//u', $s)) {
-                $s = @self::iconv('UTF-8', 'UTF-8', $s);
-            }
-        } else {
-            $s = self::iconv($encoding, 'UTF-8', $s);
-        }
-
-        $cnt = floor(\count($convmap) / 4) * 4;
-
-        for ($i = 0; $i < $cnt; $i += 4) {
-            // collector_decode_htmlnumericentity ignores $convmap[$i + 3]
-            $convmap[$i] += $convmap[$i + 2];
-            $convmap[$i + 1] += $convmap[$i + 2];
-        }
-
-        $s = preg_replace_callback('/&#(?:0*([0-9]+)|x0*([0-9a-fA-F]+))'.(\PHP_VERSION_ID >= 80200 ? '' : '(?!&)').';?/', static function (array $m) use ($cnt, $convmap) {
-            $c = isset($m[2]) ? (int) hexdec($m[2]) : $m[1];
-            for ($i = 0; $i < $cnt; $i += 4) {
-                if ($c >= $convmap[$i] && $c <= $convmap[$i + 1]) {
-                    return self::mb_chr($c - $convmap[$i + 2]);
-                }
-            }
-
-            return $m[0];
-        }, $s);
-
-        if (null === $encoding) {
-            return $s;
-        }
-
-        return self::iconv('UTF-8', $encoding, $s);
-    }
-
-    public static function mb_encode_numericentity($s, $convmap, $encoding = null, $is_hex = false)
-    {
-        if (null !== $s && !\is_scalar($s) && !(\is_object($s) && method_exists($s, '__toString'))) {
-            trigger_error('mb_encode_numericentity() expects parameter 1 to be string, '.\gettype($s).' given', \E_USER_WARNING);
-
-            return null;
-        }
-
-        if (!\is_array($convmap) || (80000 > \PHP_VERSION_ID && !$convmap)) {
-            return false;
-        }
-
-        if (null !== $encoding && !\is_scalar($encoding)) {
-            trigger_error('mb_encode_numericentity() expects parameter 3 to be string, '.\gettype($s).' given', \E_USER_WARNING);
-
-            return null;  // Instead of '' (cf. mb_decode_numericentity).
-        }
-
-        if (null !== $is_hex && !\is_scalar($is_hex)) {
-            trigger_error('mb_encode_numericentity() expects parameter 4 to be boolean, '.\gettype($s).' given', \E_USER_WARNING);
-
-            return null;
-        }
-
-        $s = (string) $s;
-        if ('' === $s) {
-            return '';
-        }
-
-        $encoding = self::getEncoding($encoding);
-
-        if ('UTF-8' === $encoding) {
-            $encoding = null;
-            if (!preg_match('//u', $s)) {
-                $s = @self::iconv('UTF-8', 'UTF-8', $s);
-            }
-        } else {
-            $s = self::iconv($encoding, 'UTF-8', $s);
-        }
-
-        static $ulenMask = ["\xC0" => 2, "\xD0" => 2, "\xE0" => 3, "\xF0" => 4];
-
-        $cnt = floor(\count($convmap) / 4) * 4;
-        $i = 0;
-        $len = \strlen($s);
-        $result = '';
-
-        while ($i < $len) {
-            $ulen = $s[$i] < "\x80" ? 1 : $ulenMask[$s[$i] & "\xF0"];
-            $uchr = substr($s, $i, $ulen);
-            $i += $ulen;
-            $c = self::mb_ord($uchr);
-
-            for ($j = 0; $j < $cnt; $j += 4) {
-                if ($c >= $convmap[$j] && $c <= $convmap[$j + 1]) {
-                    $cOffset = ($c + $convmap[$j + 2]) & $convmap[$j + 3];
-                    $result .= $is_hex ? \sprintf('&#x%X;', $cOffset) : '&#'.$cOffset.';';
-                    continue 2;
-                }
-            }
-            $result .= $uchr;
-        }
-
-        if (null === $encoding) {
-            return $result;
-        }
-
-        return self::iconv('UTF-8', $encoding, $result);
-    }
-
-    public static function mb_convert_case($s, $mode, $encoding = null)
-    {
-        $s = (string) $s;
-        if ('' === $s) {
-            return '';
-        }
-
-        $encoding = self::getEncoding($encoding);
-
-        if ('UTF-8' === $encoding) {
-            $encoding = null;
-            if (!preg_match('//u', $s)) {
-                $s = @self::iconv('UTF-8', 'UTF-8', $s);
-            }
-        } else {
-            $s = self::iconv($encoding, 'UTF-8', $s);
-        }
-
-        if (\MB_CASE_TITLE == $mode) {
-            static $titleRegexp = null;
-            if (null === $titleRegexp) {
-                $titleRegexp = self::getData('titleCaseRegexp');
-            }
-            $s = preg_replace_callback($titleRegexp, [__CLASS__, 'title_case'], $s);
-        } else {
-            if (\MB_CASE_UPPER == $mode) {
-                static $upper = null;
-                if (null === $upper) {
-                    $upper = self::getData('upperCase');
-                }
-                $map = $upper;
-            } else {
-                if (self::MB_CASE_FOLD === $mode) {
-                    static $caseFolding = null;
-                    if (null === $caseFolding) {
-                        $caseFolding = self::getData('caseFolding');
-                    }
-                    $s = strtr($s, $caseFolding);
-                }
-
-                static $lower = null;
-                if (null === $lower) {
-                    $lower = self::getData('lowerCase');
-                }
-                $map = $lower;
-            }
-
-            static $ulenMask = ["\xC0" => 2, "\xD0" => 2, "\xE0" => 3, "\xF0" => 4];
-
-            $i = 0;
-            $len = \strlen($s);
-
-            while ($i < $len) {
-                $ulen = $s[$i] < "\x80" ? 1 : $ulenMask[$s[$i] & "\xF0"];
-                $uchr = substr($s, $i, $ulen);
-                $i += $ulen;
-
-                if (isset($map[$uchr])) {
-                    $uchr = $map[$uchr];
-                    $nlen = \strlen($uchr);
-
-                    if ($nlen == $ulen) {
-                        $nlen = $i;
-                        do {
-                            $s[--$nlen] = $uchr[--$ulen];
-                        } while ($ulen);
-                    } else {
-                        $s = substr_replace($s, $uchr, $i - $ulen, $ulen);
-                        $len += $nlen - $ulen;
-                        $i += $nlen - $ulen;
-                    }
-                }
-            }
-        }
-
-        if (null === $encoding) {
-            return $s;
-        }
-
-        return self::iconv('UTF-8', $encoding, $s);
-    }
-
-    public static function mb_internal_encoding($encoding = null)
-    {
-        if (null === $encoding) {
-            return self::$internalEncoding;
-        }
-
-        $normalizedEncoding = self::getEncoding($encoding);
-
-        if ('UTF-8' === $normalizedEncoding || false !== @iconv($normalizedEncoding, $normalizedEncoding, ' ')) {
-            self::$internalEncoding = $normalizedEncoding;
-
-            return true;
-        }
-
-        if (80000 > \PHP_VERSION_ID) {
-            return false;
-        }
-
-        throw new \ValueError(\sprintf('Argument #1 ($encoding) must be a valid encoding, "%s" given', $encoding));
-    }
-
-    public static function mb_language($lang = null)
-    {
-        if (null === $lang) {
-            return self::$language;
-        }
-
-        switch ($normalizedLang = strtolower($lang)) {
-            case 'uni':
-            case 'neutral':
-                self::$language = $normalizedLang;
-
-                return true;
-        }
-
-        if (80000 > \PHP_VERSION_ID) {
-            return false;
-        }
-
-        throw new \ValueError(\sprintf('Argument #1 ($language) must be a valid language, "%s" given', $lang));
-    }
-
-    public static function mb_list_encodings()
-    {
-        return ['UTF-8'];
-    }
-
-    public static function mb_encoding_aliases($encoding)
-    {
-        switch (strtoupper($encoding)) {
-            case 'UTF8':
-            case 'UTF-8':
-                return ['utf8'];
-        }
-
-        return false;
-    }
-
-    public static function mb_check_encoding($var = null, $encoding = null)
-    {
-        if (null === $encoding) {
-            if (null === $var) {
-                return false;
-            }
-            $encoding = self::$internalEncoding;
-        }
-
-        if (!\is_array($var)) {
-            return self::mb_detect_encoding($var, [$encoding]) || false !== @iconv($encoding, $encoding, $var);
-        }
-
-        foreach ($var as $key => $value) {
-            if (!self::mb_check_encoding($key, $encoding)) {
-                return false;
-            }
-            if (!self::mb_check_encoding($value, $encoding)) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
-    public static function mb_detect_encoding($str, $encodingList = null, $strict = false)
-    {
-        if (null === $encodingList) {
-            $encodingList = self::$encodingList;
-        } else {
-            if (!\is_array($encodingList)) {
-                $encodingList = array_map('trim', explode(',', $encodingList));
-            }
-            $encodingList = array_map('strtoupper', $encodingList);
-        }
-
-        foreach ($encodingList as $enc) {
-            switch ($enc) {
-                case 'ASCII':
-                    if (!preg_match('/[\x80-\xFF]/', $str)) {
-                        return $enc;
-                    }
-                    break;
-
-                case 'UTF8':
-                case 'UTF-8':
-                    if (preg_match('//u', $str)) {
-                        return 'UTF-8';
-                    }
-                    break;
-
-                default:
-                    if (0 === strncmp($enc, 'ISO-8859-', 9)) {
-                        return $enc;
-                    }
-            }
-        }
-
-        return false;
-    }
-
-    public static function mb_detect_order($encodingList = null)
-    {
-        if (null === $encodingList) {
-            return self::$encodingList;
-        }
-
-        if (!\is_array($encodingList)) {
-            $encodingList = array_map('trim', explode(',', $encodingList));
-        }
-        $encodingList = array_map('strtoupper', $encodingList);
-
-        foreach ($encodingList as $enc) {
-            switch ($enc) {
-                default:
-                    if (strncmp($enc, 'ISO-8859-', 9)) {
-                        return false;
-                    }
-                    // no break
-                case 'ASCII':
-                case 'UTF8':
-                case 'UTF-8':
-            }
-        }
-
-        self::$encodingList = $encodingList;
-
-        return true;
-    }
-
-    public static function mb_strlen($s, $encoding = null)
-    {
-        $encoding = self::getEncoding($encoding);
-        if ('CP850' === $encoding || 'ASCII' === $encoding) {
-            return \strlen($s);
-        }
-
-        if (false !== $len = @iconv_strlen($s, $encoding)) {
-            return $len;
-        }
-
-        if ('UTF-8' !== $encoding) {
-            return $len;
-        }
-
-        return preg_match_all('/[\x00-\x7F]|[\xC0-\xDF][\x80-\xBF]?|[\xE0-\xEF][\x80-\xBF]{0,2}|[\xF0-\xF7][\x80-\xBF]{0,3}|[\xF8-\xFB][\x80-\xBF]{0,4}|[\xFC-\xFD][\x80-\xBF]{0,5}|[\x80-\xBF\xFE\xFF]/s', $s);
-    }
-
-    public static function mb_strpos($haystack, $needle, $offset = 0, $encoding = null)
-    {
-        $encoding = self::getEncoding($encoding);
-        if ('CP850' === $encoding || 'ASCII' === $encoding) {
-            return strpos($haystack, $needle, $offset);
-        }
-
-        $needle = (string) $needle;
-        if ('' === $needle) {
-            if (80000 > \PHP_VERSION_ID) {
-                trigger_error(__METHOD__.': Empty delimiter', \E_USER_WARNING);
-
-                return false;
-            }
-
-            return 0;
-        }
-
-        return iconv_strpos($haystack, $needle, $offset, $encoding);
-    }
-
-    public static function mb_strrpos($haystack, $needle, $offset = 0, $encoding = null)
-    {
-        $encoding = self::getEncoding($encoding);
-        if ('CP850' === $encoding || 'ASCII' === $encoding) {
-            return strrpos($haystack, $needle, $offset);
-        }
-
-        if ($offset != (int) $offset) {
-            $offset = 0;
-        } elseif ($offset = (int) $offset) {
-            if ($offset < 0) {
-                if (0 > $offset += self::mb_strlen($needle)) {
-                    $haystack = self::mb_substr($haystack, 0, $offset, $encoding);
-                }
-                $offset = 0;
-            } else {
-                $haystack = self::mb_substr($haystack, $offset, 2147483647, $encoding);
-            }
-        }
-
-        $pos = '' !== $needle || 80000 > \PHP_VERSION_ID
-            ? iconv_strrpos($haystack, $needle, $encoding)
-            : self::mb_strlen($haystack, $encoding);
-
-        return false !== $pos ? $offset + $pos : false;
-    }
-
-    public static function mb_str_split($string, $split_length = 1, $encoding = null)
-    {
-        if (null !== $string && !\is_scalar($string) && !(\is_object($string) && method_exists($string, '__toString'))) {
-            trigger_error('mb_str_split() expects parameter 1 to be string, '.\gettype($string).' given', \E_USER_WARNING);
-
-            return null;
-        }
-
-        if (1 > $split_length = (int) $split_length) {
-            if (80000 > \PHP_VERSION_ID) {
-                trigger_error('The length of each segment must be greater than zero', \E_USER_WARNING);
-
-                return false;
-            }
-
-            throw new \ValueError('Argument #2 ($length) must be greater than 0');
-        }
-
-        if (null === $encoding) {
-            $encoding = mb_internal_encoding();
-        }
-
-        if ('UTF-8' === $encoding = self::getEncoding($encoding)) {
-            $rx = '/(';
-            while (65535 < $split_length) {
-                $rx .= '.{65535}';
-                $split_length -= 65535;
-            }
-            $rx .= '.{'.$split_length.'})/us';
-
-            return preg_split($rx, $string, -1, \PREG_SPLIT_DELIM_CAPTURE | \PREG_SPLIT_NO_EMPTY);
-        }
-
-        $result = [];
-        $length = mb_strlen($string, $encoding);
-
-        for ($i = 0; $i < $length; $i += $split_length) {
-            $result[] = mb_substr($string, $i, $split_length, $encoding);
-        }
-
-        return $result;
-    }
-
-    public static function mb_strtolower($s, $encoding = null)
-    {
-        return self::mb_convert_case($s, \MB_CASE_LOWER, $encoding);
-    }
-
-    public static function mb_strtoupper($s, $encoding = null)
-    {
-        return self::mb_convert_case($s, \MB_CASE_UPPER, $encoding);
-    }
-
-    public static function mb_substitute_character($c = null)
-    {
-        if (null === $c) {
-            return 'none';
-        }
-        if (0 === strcasecmp($c, 'none')) {
-            return true;
-        }
-        if (80000 > \PHP_VERSION_ID) {
-            return false;
-        }
-        if (\is_int($c) || 'long' === $c || 'entity' === $c) {
-            return false;
-        }
-
-        throw new \ValueError('Argument #1 ($substitute_character) must be "none", "long", "entity" or a valid codepoint');
-    }
-
-    public static function mb_substr($s, $start, $length = null, $encoding = null)
-    {
-        $encoding = self::getEncoding($encoding);
-        if ('CP850' === $encoding || 'ASCII' === $encoding) {
-            return (string) substr($s, $start, null === $length ? 2147483647 : $length);
-        }
-
-        if ($start < 0) {
-            $start = iconv_strlen($s, $encoding) + $start;
-            if ($start < 0) {
-                $start = 0;
-            }
-        }
-
-        if (null === $length) {
-            $length = 2147483647;
-        } elseif ($length < 0) {
-            $length = iconv_strlen($s, $encoding) + $length - $start;
-            if ($length < 0) {
-                return '';
-            }
-        }
-
-        return (string) iconv_substr($s, $start, $length, $encoding);
-    }
-
-    public static function mb_stripos($haystack, $needle, $offset = 0, $encoding = null)
-    {
-        [$haystack, $needle] = str_replace(self::SIMPLE_CASE_FOLD[0], self::SIMPLE_CASE_FOLD[1], [
-            self::mb_convert_case($haystack, \MB_CASE_LOWER, $encoding),
-            self::mb_convert_case($needle, \MB_CASE_LOWER, $encoding),
-        ]);
-
-        return self::mb_strpos($haystack, $needle, $offset, $encoding);
-    }
-
-    public static function mb_stristr($haystack, $needle, $part = false, $encoding = null)
-    {
-        $pos = self::mb_stripos($haystack, $needle, 0, $encoding);
-
-        return self::getSubpart($pos, $part, $haystack, $encoding);
-    }
-
-    public static function mb_strrchr($haystack, $needle, $part = false, $encoding = null)
-    {
-        $encoding = self::getEncoding($encoding);
-        if ('CP850' === $encoding || 'ASCII' === $encoding) {
-            $pos = strrpos($haystack, $needle);
-        } else {
-            $needle = self::mb_substr($needle, 0, 1, $encoding);
-            $pos = iconv_strrpos($haystack, $needle, $encoding);
-        }
-
-        return self::getSubpart($pos, $part, $haystack, $encoding);
-    }
-
-    public static function mb_strrichr($haystack, $needle, $part = false, $encoding = null)
-    {
-        $needle = self::mb_substr($needle, 0, 1, $encoding);
-        $pos = self::mb_strripos($haystack, $needle, $encoding);
-
-        return self::getSubpart($pos, $part, $haystack, $encoding);
-    }
-
-    public static function mb_strripos($haystack, $needle, $offset = 0, $encoding = null)
-    {
-        $haystack = self::mb_convert_case($haystack, \MB_CASE_LOWER, $encoding);
-        $needle = self::mb_convert_case($needle, \MB_CASE_LOWER, $encoding);
-
-        $haystack = str_replace(self::SIMPLE_CASE_FOLD[0], self::SIMPLE_CASE_FOLD[1], $haystack);
-        $needle = str_replace(self::SIMPLE_CASE_FOLD[0], self::SIMPLE_CASE_FOLD[1], $needle);
-
-        return self::mb_strrpos($haystack, $needle, $offset, $encoding);
-    }
-
-    public static function mb_strstr($haystack, $needle, $part = false, $encoding = null)
-    {
-        $pos = strpos($haystack, $needle);
-        if (false === $pos) {
-            return false;
-        }
-        if ($part) {
-            return substr($haystack, 0, $pos);
-        }
-
-        return substr($haystack, $pos);
-    }
-
-    public static function mb_get_info($type = 'all')
-    {
-        $info = [
-            'internal_encoding' => self::$internalEncoding,
-            'http_output' => 'pass',
-            'http_output_conv_mimetypes' => '^(text/|application/xhtml\+xml)',
-            'func_overload' => 0,
-            'func_overload_list' => 'no overload',
-            'mail_charset' => 'UTF-8',
-            'mail_header_encoding' => 'BASE64',
-            'mail_body_encoding' => 'BASE64',
-            'illegal_chars' => 0,
-            'encoding_translation' => 'Off',
-            'language' => self::$language,
-            'detect_order' => self::$encodingList,
-            'substitute_character' => 'none',
-            'strict_detection' => 'Off',
-        ];
-
-        if ('all' === $type) {
-            return $info;
-        }
-        if (isset($info[$type])) {
-            return $info[$type];
-        }
-
-        return false;
-    }
-
-    public static function mb_http_input($type = '')
-    {
-        return false;
-    }
-
-    public static function mb_http_output($encoding = null)
-    {
-        return null !== $encoding ? 'pass' === $encoding : 'pass';
-    }
-
-    public static function mb_strwidth($s, $encoding = null)
-    {
-        $encoding = self::getEncoding($encoding);
-
-        if ('UTF-8' !== $encoding) {
-            $s = self::iconv($encoding, 'UTF-8', $s);
-        }
-
-        $s = preg_replace('/[\x{1100}-\x{115F}\x{2329}\x{232A}\x{2E80}-\x{303E}\x{3040}-\x{A4CF}\x{AC00}-\x{D7A3}\x{F900}-\x{FAFF}\x{FE10}-\x{FE19}\x{FE30}-\x{FE6F}\x{FF00}-\x{FF60}\x{FFE0}-\x{FFE6}\x{20000}-\x{2FFFD}\x{30000}-\x{3FFFD}]/u', '', $s, -1, $wide);
-
-        return ($wide << 1) + iconv_strlen($s, 'UTF-8');
-    }
-
-    public static function mb_substr_count($haystack, $needle, $encoding = null)
-    {
-        return substr_count($haystack, $needle);
-    }
-
-    public static function mb_output_handler($contents, $status)
-    {
-        return $contents;
-    }
-
-    public static function mb_chr($code, $encoding = null)
-    {
-        if (0x80 > $code %= 0x200000) {
-            $s = \chr($code);
-        } elseif (0x800 > $code) {
-            $s = \chr(0xC0 | $code >> 6).\chr(0x80 | $code & 0x3F);
-        } elseif (0x10000 > $code) {
-            $s = \chr(0xE0 | $code >> 12).\chr(0x80 | $code >> 6 & 0x3F).\chr(0x80 | $code & 0x3F);
-        } else {
-            $s = \chr(0xF0 | $code >> 18).\chr(0x80 | $code >> 12 & 0x3F).\chr(0x80 | $code >> 6 & 0x3F).\chr(0x80 | $code & 0x3F);
-        }
-
-        if ('UTF-8' !== $encoding = self::getEncoding($encoding)) {
-            $s = mb_convert_encoding($s, $encoding, 'UTF-8');
-        }
-
-        return $s;
-    }
-
-    public static function mb_ord($s, $encoding = null)
-    {
-        if ('UTF-8' !== $encoding = self::getEncoding($encoding)) {
-            $s = mb_convert_encoding($s, 'UTF-8', $encoding);
-        }
-
-        if (1 === \strlen($s)) {
-            return \ord($s);
-        }
-
-        $code = ($s = unpack('C*', substr($s, 0, 4))) ? $s[1] : 0;
-        if (0xF0 <= $code) {
-            return (($code - 0xF0) << 18) + (($s[2] - 0x80) << 12) + (($s[3] - 0x80) << 6) + $s[4] - 0x80;
-        }
-        if (0xE0 <= $code) {
-            return (($code - 0xE0) << 12) + (($s[2] - 0x80) << 6) + $s[3] - 0x80;
-        }
-        if (0xC0 <= $code) {
-            return (($code - 0xC0) << 6) + $s[2] - 0x80;
-        }
-
-        return $code;
-    }
-
-    /** @return string|false */
-    public static function mb_scrub(?string $string, ?string $encoding = null): string
-    {
-        if (null === $encoding) {
-            $encoding = self::mb_internal_encoding();
-        } elseif (!self::assertEncoding($encoding, 'mb_scrub(): Argument #2 ($encoding) must be a valid encoding, "%s" given')) {
-            return false;
-        }
-
-        return self::mb_convert_encoding((string) $string, $encoding, $encoding);
-    }
-
-    /** @return string|false */
-    public static function mb_str_pad(string $string, int $length, string $pad_string = ' ', int $pad_type = \STR_PAD_RIGHT, ?string $encoding = null)
-    {
-        if (null === $encoding) {
-            $encoding = self::mb_internal_encoding();
-        } elseif (!self::assertEncoding($encoding, 'mb_str_pad(): Argument #5 ($encoding) must be a valid encoding, "%s" given')) {
-            return false;
-        }
-
-        if (self::mb_strlen($pad_string, $encoding) <= 0) {
-            if (\PHP_VERSION_ID < 80000) {
-                trigger_error('mb_str_pad(): Argument #3 ($pad_string) must be a non-empty string', \E_USER_WARNING);
-
-                return false;
-            }
-
-            throw new \ValueError('mb_str_pad(): Argument #3 ($pad_string) must be a non-empty string');
-        }
-
-        if (!\in_array($pad_type, [\STR_PAD_RIGHT, \STR_PAD_LEFT, \STR_PAD_BOTH], true)) {
-            if (\PHP_VERSION_ID < 80000) {
-                trigger_error('mb_str_pad(): Argument #4 ($pad_type) must be STR_PAD_LEFT, STR_PAD_RIGHT, or STR_PAD_BOTH', \E_USER_WARNING);
-
-                return false;
-            }
-
-            throw new \ValueError('mb_str_pad(): Argument #4 ($pad_type) must be STR_PAD_LEFT, STR_PAD_RIGHT, or STR_PAD_BOTH');
-        }
-
-        $paddingRequired = $length - self::mb_strlen($string, $encoding);
-
-        if ($paddingRequired < 1) {
-            return $string;
-        }
-
-        switch ($pad_type) {
-            case \STR_PAD_LEFT:
-                return self::mb_substr(str_repeat($pad_string, $paddingRequired), 0, $paddingRequired, $encoding).$string;
-            case \STR_PAD_RIGHT:
-                return $string.self::mb_substr(str_repeat($pad_string, $paddingRequired), 0, $paddingRequired, $encoding);
-            default:
-                $leftPaddingLength = floor($paddingRequired / 2);
-                $rightPaddingLength = $paddingRequired - $leftPaddingLength;
-
-                return self::mb_substr(str_repeat($pad_string, $leftPaddingLength), 0, $leftPaddingLength, $encoding).$string.self::mb_substr(str_repeat($pad_string, $rightPaddingLength), 0, $rightPaddingLength, $encoding);
-        }
-    }
-
-    /** @return string|false */
-    public static function mb_ucfirst(string $string, ?string $encoding = null)
-    {
-        if (null === $encoding) {
-            $encoding = self::mb_internal_encoding();
-        } elseif (!self::assertEncoding($encoding, 'mb_ucfirst(): Argument #2 ($encoding) must be a valid encoding, "%s" given')) {
-            return false;
-        }
-
-        $firstChar = mb_substr($string, 0, 1, $encoding);
-        $firstChar = mb_convert_case($firstChar, \MB_CASE_TITLE, $encoding);
-
-        return $firstChar.mb_substr($string, 1, null, $encoding);
-    }
-
-    /** @return string|false */
-    public static function mb_lcfirst(string $string, ?string $encoding = null)
-    {
-        if (null === $encoding) {
-            $encoding = self::mb_internal_encoding();
-        } elseif (!self::assertEncoding($encoding, 'mb_lcfirst(): Argument #2 ($encoding) must be a valid encoding, "%s" given')) {
-            return false;
-        }
-
-        $firstChar = mb_substr($string, 0, 1, $encoding);
-        $firstChar = mb_convert_case($firstChar, \MB_CASE_LOWER, $encoding);
-
-        return $firstChar.mb_substr($string, 1, null, $encoding);
-    }
-
-    /** @return string|false */
-    public static function mb_trim(string $string, ?string $characters = null, ?string $encoding = null)
-    {
-        return self::mb_internal_trim('{^[%s]+|[%1$s]+$}Du', $string, $characters, $encoding, __FUNCTION__);
-    }
-
-    /** @return string|false */
-    public static function mb_ltrim(string $string, ?string $characters = null, ?string $encoding = null)
-    {
-        return self::mb_internal_trim('{^[%s]+}Du', $string, $characters, $encoding, __FUNCTION__);
-    }
-
-    /** @return string|false */
-    public static function mb_rtrim(string $string, ?string $characters = null, ?string $encoding = null)
-    {
-        return self::mb_internal_trim('{[%s]+$}Du', $string, $characters, $encoding, __FUNCTION__);
-    }
-
-    private static function getSubpart($pos, $part, $haystack, $encoding)
-    {
-        if (false === $pos) {
-            return false;
-        }
-        if ($part) {
-            return self::mb_substr($haystack, 0, $pos, $encoding);
-        }
-
-        return self::mb_substr($haystack, $pos, null, $encoding);
-    }
-
-    private static function html_encoding_callback(array $m)
-    {
-        $i = 1;
-        $entities = '';
-        $m = unpack('C*', htmlentities($m[0], \ENT_COMPAT, 'UTF-8'));
-
-        while (isset($m[$i])) {
-            if (0x80 > $m[$i]) {
-                $entities .= \chr($m[$i++]);
-                continue;
-            }
-            if (0xF0 <= $m[$i]) {
-                $c = (($m[$i++] - 0xF0) << 18) + (($m[$i++] - 0x80) << 12) + (($m[$i++] - 0x80) << 6) + $m[$i++] - 0x80;
-            } elseif (0xE0 <= $m[$i]) {
-                $c = (($m[$i++] - 0xE0) << 12) + (($m[$i++] - 0x80) << 6) + $m[$i++] - 0x80;
-            } else {
-                $c = (($m[$i++] - 0xC0) << 6) + $m[$i++] - 0x80;
-            }
-
-            $entities .= '&#'.$c.';';
-        }
-
-        return $entities;
-    }
-
-    private static function title_case(array $s)
-    {
-        return self::mb_convert_case($s[1], \MB_CASE_UPPER, 'UTF-8').self::mb_convert_case($s[2], \MB_CASE_LOWER, 'UTF-8');
-    }
-
-    private static function getData($file)
-    {
-        if (file_exists($file = __DIR__.'/Resources/unidata/'.$file.'.php')) {
-            return require $file;
-        }
-
-        return false;
-    }
-
-    private static function getEncoding($encoding)
-    {
-        if (null === $encoding) {
-            return self::$internalEncoding;
-        }
-
-        if ('UTF-8' === $encoding) {
-            return 'UTF-8';
-        }
-
-        $encoding = strtoupper($encoding);
-
-        if ('8BIT' === $encoding || 'BINARY' === $encoding) {
-            return 'CP850';
-        }
-
-        if ('UTF8' === $encoding) {
-            return 'UTF-8';
-        }
-
-        if ('UTF-32' === $encoding) {
-            return 'UTF-32BE';
-        }
-
-        if ('UTF-16' === $encoding) {
-            return 'UTF-16BE';
-        }
-
-        return $encoding;
-    }
-
-    private static function iconv($fromEncoding, $toEncoding, $s)
-    {
-        if (null === self::$iconvSupportsIgnore) {
-            self::$iconvSupportsIgnore = false !== @iconv('UTF-8', 'UTF-8//IGNORE', '');
-        }
-
-        return self::$iconvSupportsIgnore
-            ? iconv($fromEncoding, $toEncoding.'//IGNORE', $s)
-            : iconv($fromEncoding, $toEncoding, $s);
-    }
-
-    /** @return string|false */
-    private static function mb_internal_trim(string $regex, string $string, ?string $characters, ?string $encoding, string $function)
-    {
-        if (null === $encoding) {
-            $encoding = self::mb_internal_encoding();
-        } elseif (!self::assertEncoding($encoding, $function.'(): Argument #3 ($encoding) must be a valid encoding, "%s" given')) {
-            return false;
-        }
-
-        if ('' === $characters) {
-            return null === $encoding ? $string : self::mb_convert_encoding($string, $encoding);
-        }
-
-        if ('UTF-8' === $encoding) {
-            $encoding = null;
-            if (!preg_match('//u', $string)) {
-                $string = @self::iconv('UTF-8', 'UTF-8', $string);
-            }
-            if (null !== $characters && !preg_match('//u', $characters)) {
-                $characters = @self::iconv('UTF-8', 'UTF-8', $characters);
-            }
-        } else {
-            $string = self::iconv($encoding, 'UTF-8', $string);
-
-            if (null !== $characters) {
-                $characters = self::iconv($encoding, 'UTF-8', $characters);
-            }
-        }
-
-        if (null === $characters) {
-            $characters = "\\0 \f\n\r\t\v\u{00A0}\u{1680}\u{2000}\u{2001}\u{2002}\u{2003}\u{2004}\u{2005}\u{2006}\u{2007}\u{2008}\u{2009}\u{200A}\u{2028}\u{2029}\u{202F}\u{205F}\u{3000}\u{0085}\u{180E}";
-        } else {
-            $characters = preg_quote($characters);
-        }
-
-        $string = preg_replace(\sprintf($regex, $characters), '', $string);
-
-        if (null === $encoding) {
-            return $string;
-        }
-
-        return self::iconv('UTF-8', $encoding, $string);
-    }
-
-    private static function assertEncoding(string $encoding, string $errorFormat): bool
-    {
-        try {
-            $validEncoding = @self::mb_check_encoding('', $encoding);
-        } catch (\ValueError $e) {
-            throw new \ValueError(\sprintf($errorFormat, $encoding));
-        }
-
-        if (!$validEncoding) {
-            if (80000 > \PHP_VERSION_ID) {
-                trigger_error(\sprintf($errorFormat, $encoding), \E_USER_WARNING);
-            } else {
-                throw new \ValueError(\sprintf($errorFormat, $encoding));
-            }
-        }
-
-        return $validEncoding;
-    }
-}
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/README.md b/generated/php/vendor/symfony/polyfill-mbstring/README.md
deleted file mode 100644
index 478b40d..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/README.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Symfony Polyfill / Mbstring
-===========================
-
-This component provides a partial, native PHP implementation for the
-[Mbstring](https://php.net/mbstring) extension.
-
-More information can be found in the
-[main Polyfill README](https://github.com/symfony/polyfill/blob/main/README.md).
-
-License
-=======
-
-This library is released under the [MIT license](LICENSE).
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/caseFolding.php b/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/caseFolding.php
deleted file mode 100644
index 512bba0..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/caseFolding.php
+++ /dev/null
@@ -1,119 +0,0 @@
-<?php
-
-return [
-    'İ' => 'i̇',
-    'µ' => 'μ',
-    'ſ' => 's',
-    'ͅ' => 'ι',
-    'ς' => 'σ',
-    'ϐ' => 'β',
-    'ϑ' => 'θ',
-    'ϕ' => 'φ',
-    'ϖ' => 'π',
-    'ϰ' => 'κ',
-    'ϱ' => 'ρ',
-    'ϵ' => 'ε',
-    'ẛ' => 'ṡ',
-    'ι' => 'ι',
-    'ß' => 'ss',
-    'ʼn' => 'ʼn',
-    'ǰ' => 'ǰ',
-    'ΐ' => 'ΐ',
-    'ΰ' => 'ΰ',
-    'և' => 'եւ',
-    'ẖ' => 'ẖ',
-    'ẗ' => 'ẗ',
-    'ẘ' => 'ẘ',
-    'ẙ' => 'ẙ',
-    'ẚ' => 'aʾ',
-    'ẞ' => 'ss',
-    'ὐ' => 'ὐ',
-    'ὒ' => 'ὒ',
-    'ὔ' => 'ὔ',
-    'ὖ' => 'ὖ',
-    'ᾀ' => 'ἀι',
-    'ᾁ' => 'ἁι',
-    'ᾂ' => 'ἂι',
-    'ᾃ' => 'ἃι',
-    'ᾄ' => 'ἄι',
-    'ᾅ' => 'ἅι',
-    'ᾆ' => 'ἆι',
-    'ᾇ' => 'ἇι',
-    'ᾈ' => 'ἀι',
-    'ᾉ' => 'ἁι',
-    'ᾊ' => 'ἂι',
-    'ᾋ' => 'ἃι',
-    'ᾌ' => 'ἄι',
-    'ᾍ' => 'ἅι',
-    'ᾎ' => 'ἆι',
-    'ᾏ' => 'ἇι',
-    'ᾐ' => 'ἠι',
-    'ᾑ' => 'ἡι',
-    'ᾒ' => 'ἢι',
-    'ᾓ' => 'ἣι',
-    'ᾔ' => 'ἤι',
-    'ᾕ' => 'ἥι',
-    'ᾖ' => 'ἦι',
-    'ᾗ' => 'ἧι',
-    'ᾘ' => 'ἠι',
-    'ᾙ' => 'ἡι',
-    'ᾚ' => 'ἢι',
-    'ᾛ' => 'ἣι',
-    'ᾜ' => 'ἤι',
-    'ᾝ' => 'ἥι',
-    'ᾞ' => 'ἦι',
-    'ᾟ' => 'ἧι',
-    'ᾠ' => 'ὠι',
-    'ᾡ' => 'ὡι',
-    'ᾢ' => 'ὢι',
-    'ᾣ' => 'ὣι',
-    'ᾤ' => 'ὤι',
-    'ᾥ' => 'ὥι',
-    'ᾦ' => 'ὦι',
-    'ᾧ' => 'ὧι',
-    'ᾨ' => 'ὠι',
-    'ᾩ' => 'ὡι',
-    'ᾪ' => 'ὢι',
-    'ᾫ' => 'ὣι',
-    'ᾬ' => 'ὤι',
-    'ᾭ' => 'ὥι',
-    'ᾮ' => 'ὦι',
-    'ᾯ' => 'ὧι',
-    'ᾲ' => 'ὰι',
-    'ᾳ' => 'αι',
-    'ᾴ' => 'άι',
-    'ᾶ' => 'ᾶ',
-    'ᾷ' => 'ᾶι',
-    'ᾼ' => 'αι',
-    'ῂ' => 'ὴι',
-    'ῃ' => 'ηι',
-    'ῄ' => 'ήι',
-    'ῆ' => 'ῆ',
-    'ῇ' => 'ῆι',
-    'ῌ' => 'ηι',
-    'ῒ' => 'ῒ',
-    'ῖ' => 'ῖ',
-    'ῗ' => 'ῗ',
-    'ῢ' => 'ῢ',
-    'ῤ' => 'ῤ',
-    'ῦ' => 'ῦ',
-    'ῧ' => 'ῧ',
-    'ῲ' => 'ὼι',
-    'ῳ' => 'ωι',
-    'ῴ' => 'ώι',
-    'ῶ' => 'ῶ',
-    'ῷ' => 'ῶι',
-    'ῼ' => 'ωι',
-    'ff' => 'ff',
-    'fi' => 'fi',
-    'fl' => 'fl',
-    'ffi' => 'ffi',
-    'ffl' => 'ffl',
-    'ſt' => 'st',
-    'st' => 'st',
-    'ﬓ' => 'մն',
-    'ﬔ' => 'մե',
-    'ﬕ' => 'մի',
-    'ﬖ' => 'վն',
-    'ﬗ' => 'մխ',
-];
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/lowerCase.php b/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/lowerCase.php
deleted file mode 100644
index fac60b0..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/lowerCase.php
+++ /dev/null
@@ -1,1397 +0,0 @@
-<?php
-
-return array (
-  'A' => 'a',
-  'B' => 'b',
-  'C' => 'c',
-  'D' => 'd',
-  'E' => 'e',
-  'F' => 'f',
-  'G' => 'g',
-  'H' => 'h',
-  'I' => 'i',
-  'J' => 'j',
-  'K' => 'k',
-  'L' => 'l',
-  'M' => 'm',
-  'N' => 'n',
-  'O' => 'o',
-  'P' => 'p',
-  'Q' => 'q',
-  'R' => 'r',
-  'S' => 's',
-  'T' => 't',
-  'U' => 'u',
-  'V' => 'v',
-  'W' => 'w',
-  'X' => 'x',
-  'Y' => 'y',
-  'Z' => 'z',
-  'À' => 'à',
-  'Á' => 'á',
-  'Â' => 'â',
-  'Ã' => 'ã',
-  'Ä' => 'ä',
-  'Å' => 'å',
-  'Æ' => 'æ',
-  'Ç' => 'ç',
-  'È' => 'è',
-  'É' => 'é',
-  'Ê' => 'ê',
-  'Ë' => 'ë',
-  'Ì' => 'ì',
-  'Í' => 'í',
-  'Î' => 'î',
-  'Ï' => 'ï',
-  'Ð' => 'ð',
-  'Ñ' => 'ñ',
-  'Ò' => 'ò',
-  'Ó' => 'ó',
-  'Ô' => 'ô',
-  'Õ' => 'õ',
-  'Ö' => 'ö',
-  'Ø' => 'ø',
-  'Ù' => 'ù',
-  'Ú' => 'ú',
-  'Û' => 'û',
-  'Ü' => 'ü',
-  'Ý' => 'ý',
-  'Þ' => 'þ',
-  'Ā' => 'ā',
-  'Ă' => 'ă',
-  'Ą' => 'ą',
-  'Ć' => 'ć',
-  'Ĉ' => 'ĉ',
-  'Ċ' => 'ċ',
-  'Č' => 'č',
-  'Ď' => 'ď',
-  'Đ' => 'đ',
-  'Ē' => 'ē',
-  'Ĕ' => 'ĕ',
-  'Ė' => 'ė',
-  'Ę' => 'ę',
-  'Ě' => 'ě',
-  'Ĝ' => 'ĝ',
-  'Ğ' => 'ğ',
-  'Ġ' => 'ġ',
-  'Ģ' => 'ģ',
-  'Ĥ' => 'ĥ',
-  'Ħ' => 'ħ',
-  'Ĩ' => 'ĩ',
-  'Ī' => 'ī',
-  'Ĭ' => 'ĭ',
-  'Į' => 'į',
-  'İ' => 'i̇',
-  'IJ' => 'ij',
-  'Ĵ' => 'ĵ',
-  'Ķ' => 'ķ',
-  'Ĺ' => 'ĺ',
-  'Ļ' => 'ļ',
-  'Ľ' => 'ľ',
-  'Ŀ' => 'ŀ',
-  'Ł' => 'ł',
-  'Ń' => 'ń',
-  'Ņ' => 'ņ',
-  'Ň' => 'ň',
-  'Ŋ' => 'ŋ',
-  'Ō' => 'ō',
-  'Ŏ' => 'ŏ',
-  'Ő' => 'ő',
-  'Œ' => 'œ',
-  'Ŕ' => 'ŕ',
-  'Ŗ' => 'ŗ',
-  'Ř' => 'ř',
-  'Ś' => 'ś',
-  'Ŝ' => 'ŝ',
-  'Ş' => 'ş',
-  'Š' => 'š',
-  'Ţ' => 'ţ',
-  'Ť' => 'ť',
-  'Ŧ' => 'ŧ',
-  'Ũ' => 'ũ',
-  'Ū' => 'ū',
-  'Ŭ' => 'ŭ',
-  'Ů' => 'ů',
-  'Ű' => 'ű',
-  'Ų' => 'ų',
-  'Ŵ' => 'ŵ',
-  'Ŷ' => 'ŷ',
-  'Ÿ' => 'ÿ',
-  'Ź' => 'ź',
-  'Ż' => 'ż',
-  'Ž' => 'ž',
-  'Ɓ' => 'ɓ',
-  'Ƃ' => 'ƃ',
-  'Ƅ' => 'ƅ',
-  'Ɔ' => 'ɔ',
-  'Ƈ' => 'ƈ',
-  'Ɖ' => 'ɖ',
-  'Ɗ' => 'ɗ',
-  'Ƌ' => 'ƌ',
-  'Ǝ' => 'ǝ',
-  'Ə' => 'ə',
-  'Ɛ' => 'ɛ',
-  'Ƒ' => 'ƒ',
-  'Ɠ' => 'ɠ',
-  'Ɣ' => 'ɣ',
-  'Ɩ' => 'ɩ',
-  'Ɨ' => 'ɨ',
-  'Ƙ' => 'ƙ',
-  'Ɯ' => 'ɯ',
-  'Ɲ' => 'ɲ',
-  'Ɵ' => 'ɵ',
-  'Ơ' => 'ơ',
-  'Ƣ' => 'ƣ',
-  'Ƥ' => 'ƥ',
-  'Ʀ' => 'ʀ',
-  'Ƨ' => 'ƨ',
-  'Ʃ' => 'ʃ',
-  'Ƭ' => 'ƭ',
-  'Ʈ' => 'ʈ',
-  'Ư' => 'ư',
-  'Ʊ' => 'ʊ',
-  'Ʋ' => 'ʋ',
-  'Ƴ' => 'ƴ',
-  'Ƶ' => 'ƶ',
-  'Ʒ' => 'ʒ',
-  'Ƹ' => 'ƹ',
-  'Ƽ' => 'ƽ',
-  'DŽ' => 'dž',
-  'Dž' => 'dž',
-  'LJ' => 'lj',
-  'Lj' => 'lj',
-  'NJ' => 'nj',
-  'Nj' => 'nj',
-  'Ǎ' => 'ǎ',
-  'Ǐ' => 'ǐ',
-  'Ǒ' => 'ǒ',
-  'Ǔ' => 'ǔ',
-  'Ǖ' => 'ǖ',
-  'Ǘ' => 'ǘ',
-  'Ǚ' => 'ǚ',
-  'Ǜ' => 'ǜ',
-  'Ǟ' => 'ǟ',
-  'Ǡ' => 'ǡ',
-  'Ǣ' => 'ǣ',
-  'Ǥ' => 'ǥ',
-  'Ǧ' => 'ǧ',
-  'Ǩ' => 'ǩ',
-  'Ǫ' => 'ǫ',
-  'Ǭ' => 'ǭ',
-  'Ǯ' => 'ǯ',
-  'DZ' => 'dz',
-  'Dz' => 'dz',
-  'Ǵ' => 'ǵ',
-  'Ƕ' => 'ƕ',
-  'Ƿ' => 'ƿ',
-  'Ǹ' => 'ǹ',
-  'Ǻ' => 'ǻ',
-  'Ǽ' => 'ǽ',
-  'Ǿ' => 'ǿ',
-  'Ȁ' => 'ȁ',
-  'Ȃ' => 'ȃ',
-  'Ȅ' => 'ȅ',
-  'Ȇ' => 'ȇ',
-  'Ȉ' => 'ȉ',
-  'Ȋ' => 'ȋ',
-  'Ȍ' => 'ȍ',
-  'Ȏ' => 'ȏ',
-  'Ȑ' => 'ȑ',
-  'Ȓ' => 'ȓ',
-  'Ȕ' => 'ȕ',
-  'Ȗ' => 'ȗ',
-  'Ș' => 'ș',
-  'Ț' => 'ț',
-  'Ȝ' => 'ȝ',
-  'Ȟ' => 'ȟ',
-  'Ƞ' => 'ƞ',
-  'Ȣ' => 'ȣ',
-  'Ȥ' => 'ȥ',
-  'Ȧ' => 'ȧ',
-  'Ȩ' => 'ȩ',
-  'Ȫ' => 'ȫ',
-  'Ȭ' => 'ȭ',
-  'Ȯ' => 'ȯ',
-  'Ȱ' => 'ȱ',
-  'Ȳ' => 'ȳ',
-  'Ⱥ' => 'ⱥ',
-  'Ȼ' => 'ȼ',
-  'Ƚ' => 'ƚ',
-  'Ⱦ' => 'ⱦ',
-  'Ɂ' => 'ɂ',
-  'Ƀ' => 'ƀ',
-  'Ʉ' => 'ʉ',
-  'Ʌ' => 'ʌ',
-  'Ɇ' => 'ɇ',
-  'Ɉ' => 'ɉ',
-  'Ɋ' => 'ɋ',
-  'Ɍ' => 'ɍ',
-  'Ɏ' => 'ɏ',
-  'Ͱ' => 'ͱ',
-  'Ͳ' => 'ͳ',
-  'Ͷ' => 'ͷ',
-  'Ϳ' => 'ϳ',
-  'Ά' => 'ά',
-  'Έ' => 'έ',
-  'Ή' => 'ή',
-  'Ί' => 'ί',
-  'Ό' => 'ό',
-  'Ύ' => 'ύ',
-  'Ώ' => 'ώ',
-  'Α' => 'α',
-  'Β' => 'β',
-  'Γ' => 'γ',
-  'Δ' => 'δ',
-  'Ε' => 'ε',
-  'Ζ' => 'ζ',
-  'Η' => 'η',
-  'Θ' => 'θ',
-  'Ι' => 'ι',
-  'Κ' => 'κ',
-  'Λ' => 'λ',
-  'Μ' => 'μ',
-  'Ν' => 'ν',
-  'Ξ' => 'ξ',
-  'Ο' => 'ο',
-  'Π' => 'π',
-  'Ρ' => 'ρ',
-  'Σ' => 'σ',
-  'Τ' => 'τ',
-  'Υ' => 'υ',
-  'Φ' => 'φ',
-  'Χ' => 'χ',
-  'Ψ' => 'ψ',
-  'Ω' => 'ω',
-  'Ϊ' => 'ϊ',
-  'Ϋ' => 'ϋ',
-  'Ϗ' => 'ϗ',
-  'Ϙ' => 'ϙ',
-  'Ϛ' => 'ϛ',
-  'Ϝ' => 'ϝ',
-  'Ϟ' => 'ϟ',
-  'Ϡ' => 'ϡ',
-  'Ϣ' => 'ϣ',
-  'Ϥ' => 'ϥ',
-  'Ϧ' => 'ϧ',
-  'Ϩ' => 'ϩ',
-  'Ϫ' => 'ϫ',
-  'Ϭ' => 'ϭ',
-  'Ϯ' => 'ϯ',
-  'ϴ' => 'θ',
-  'Ϸ' => 'ϸ',
-  'Ϲ' => 'ϲ',
-  'Ϻ' => 'ϻ',
-  'Ͻ' => 'ͻ',
-  'Ͼ' => 'ͼ',
-  'Ͽ' => 'ͽ',
-  'Ѐ' => 'ѐ',
-  'Ё' => 'ё',
-  'Ђ' => 'ђ',
-  'Ѓ' => 'ѓ',
-  'Є' => 'є',
-  'Ѕ' => 'ѕ',
-  'І' => 'і',
-  'Ї' => 'ї',
-  'Ј' => 'ј',
-  'Љ' => 'љ',
-  'Њ' => 'њ',
-  'Ћ' => 'ћ',
-  'Ќ' => 'ќ',
-  'Ѝ' => 'ѝ',
-  'Ў' => 'ў',
-  'Џ' => 'џ',
-  'А' => 'а',
-  'Б' => 'б',
-  'В' => 'в',
-  'Г' => 'г',
-  'Д' => 'д',
-  'Е' => 'е',
-  'Ж' => 'ж',
-  'З' => 'з',
-  'И' => 'и',
-  'Й' => 'й',
-  'К' => 'к',
-  'Л' => 'л',
-  'М' => 'м',
-  'Н' => 'н',
-  'О' => 'о',
-  'П' => 'п',
-  'Р' => 'р',
-  'С' => 'с',
-  'Т' => 'т',
-  'У' => 'у',
-  'Ф' => 'ф',
-  'Х' => 'х',
-  'Ц' => 'ц',
-  'Ч' => 'ч',
-  'Ш' => 'ш',
-  'Щ' => 'щ',
-  'Ъ' => 'ъ',
-  'Ы' => 'ы',
-  'Ь' => 'ь',
-  'Э' => 'э',
-  'Ю' => 'ю',
-  'Я' => 'я',
-  'Ѡ' => 'ѡ',
-  'Ѣ' => 'ѣ',
-  'Ѥ' => 'ѥ',
-  'Ѧ' => 'ѧ',
-  'Ѩ' => 'ѩ',
-  'Ѫ' => 'ѫ',
-  'Ѭ' => 'ѭ',
-  'Ѯ' => 'ѯ',
-  'Ѱ' => 'ѱ',
-  'Ѳ' => 'ѳ',
-  'Ѵ' => 'ѵ',
-  'Ѷ' => 'ѷ',
-  'Ѹ' => 'ѹ',
-  'Ѻ' => 'ѻ',
-  'Ѽ' => 'ѽ',
-  'Ѿ' => 'ѿ',
-  'Ҁ' => 'ҁ',
-  'Ҋ' => 'ҋ',
-  'Ҍ' => 'ҍ',
-  'Ҏ' => 'ҏ',
-  'Ґ' => 'ґ',
-  'Ғ' => 'ғ',
-  'Ҕ' => 'ҕ',
-  'Җ' => 'җ',
-  'Ҙ' => 'ҙ',
-  'Қ' => 'қ',
-  'Ҝ' => 'ҝ',
-  'Ҟ' => 'ҟ',
-  'Ҡ' => 'ҡ',
-  'Ң' => 'ң',
-  'Ҥ' => 'ҥ',
-  'Ҧ' => 'ҧ',
-  'Ҩ' => 'ҩ',
-  'Ҫ' => 'ҫ',
-  'Ҭ' => 'ҭ',
-  'Ү' => 'ү',
-  'Ұ' => 'ұ',
-  'Ҳ' => 'ҳ',
-  'Ҵ' => 'ҵ',
-  'Ҷ' => 'ҷ',
-  'Ҹ' => 'ҹ',
-  'Һ' => 'һ',
-  'Ҽ' => 'ҽ',
-  'Ҿ' => 'ҿ',
-  'Ӏ' => 'ӏ',
-  'Ӂ' => 'ӂ',
-  'Ӄ' => 'ӄ',
-  'Ӆ' => 'ӆ',
-  'Ӈ' => 'ӈ',
-  'Ӊ' => 'ӊ',
-  'Ӌ' => 'ӌ',
-  'Ӎ' => 'ӎ',
-  'Ӑ' => 'ӑ',
-  'Ӓ' => 'ӓ',
-  'Ӕ' => 'ӕ',
-  'Ӗ' => 'ӗ',
-  'Ә' => 'ә',
-  'Ӛ' => 'ӛ',
-  'Ӝ' => 'ӝ',
-  'Ӟ' => 'ӟ',
-  'Ӡ' => 'ӡ',
-  'Ӣ' => 'ӣ',
-  'Ӥ' => 'ӥ',
-  'Ӧ' => 'ӧ',
-  'Ө' => 'ө',
-  'Ӫ' => 'ӫ',
-  'Ӭ' => 'ӭ',
-  'Ӯ' => 'ӯ',
-  'Ӱ' => 'ӱ',
-  'Ӳ' => 'ӳ',
-  'Ӵ' => 'ӵ',
-  'Ӷ' => 'ӷ',
-  'Ӹ' => 'ӹ',
-  'Ӻ' => 'ӻ',
-  'Ӽ' => 'ӽ',
-  'Ӿ' => 'ӿ',
-  'Ԁ' => 'ԁ',
-  'Ԃ' => 'ԃ',
-  'Ԅ' => 'ԅ',
-  'Ԇ' => 'ԇ',
-  'Ԉ' => 'ԉ',
-  'Ԋ' => 'ԋ',
-  'Ԍ' => 'ԍ',
-  'Ԏ' => 'ԏ',
-  'Ԑ' => 'ԑ',
-  'Ԓ' => 'ԓ',
-  'Ԕ' => 'ԕ',
-  'Ԗ' => 'ԗ',
-  'Ԙ' => 'ԙ',
-  'Ԛ' => 'ԛ',
-  'Ԝ' => 'ԝ',
-  'Ԟ' => 'ԟ',
-  'Ԡ' => 'ԡ',
-  'Ԣ' => 'ԣ',
-  'Ԥ' => 'ԥ',
-  'Ԧ' => 'ԧ',
-  'Ԩ' => 'ԩ',
-  'Ԫ' => 'ԫ',
-  'Ԭ' => 'ԭ',
-  'Ԯ' => 'ԯ',
-  'Ա' => 'ա',
-  'Բ' => 'բ',
-  'Գ' => 'գ',
-  'Դ' => 'դ',
-  'Ե' => 'ե',
-  'Զ' => 'զ',
-  'Է' => 'է',
-  'Ը' => 'ը',
-  'Թ' => 'թ',
-  'Ժ' => 'ժ',
-  'Ի' => 'ի',
-  'Լ' => 'լ',
-  'Խ' => 'խ',
-  'Ծ' => 'ծ',
-  'Կ' => 'կ',
-  'Հ' => 'հ',
-  'Ձ' => 'ձ',
-  'Ղ' => 'ղ',
-  'Ճ' => 'ճ',
-  'Մ' => 'մ',
-  'Յ' => 'յ',
-  'Ն' => 'ն',
-  'Շ' => 'շ',
-  'Ո' => 'ո',
-  'Չ' => 'չ',
-  'Պ' => 'պ',
-  'Ջ' => 'ջ',
-  'Ռ' => 'ռ',
-  'Ս' => 'ս',
-  'Վ' => 'վ',
-  'Տ' => 'տ',
-  'Ր' => 'ր',
-  'Ց' => 'ց',
-  'Ւ' => 'ւ',
-  'Փ' => 'փ',
-  'Ք' => 'ք',
-  'Օ' => 'օ',
-  'Ֆ' => 'ֆ',
-  'Ⴀ' => 'ⴀ',
-  'Ⴁ' => 'ⴁ',
-  'Ⴂ' => 'ⴂ',
-  'Ⴃ' => 'ⴃ',
-  'Ⴄ' => 'ⴄ',
-  'Ⴅ' => 'ⴅ',
-  'Ⴆ' => 'ⴆ',
-  'Ⴇ' => 'ⴇ',
-  'Ⴈ' => 'ⴈ',
-  'Ⴉ' => 'ⴉ',
-  'Ⴊ' => 'ⴊ',
-  'Ⴋ' => 'ⴋ',
-  'Ⴌ' => 'ⴌ',
-  'Ⴍ' => 'ⴍ',
-  'Ⴎ' => 'ⴎ',
-  'Ⴏ' => 'ⴏ',
-  'Ⴐ' => 'ⴐ',
-  'Ⴑ' => 'ⴑ',
-  'Ⴒ' => 'ⴒ',
-  'Ⴓ' => 'ⴓ',
-  'Ⴔ' => 'ⴔ',
-  'Ⴕ' => 'ⴕ',
-  'Ⴖ' => 'ⴖ',
-  'Ⴗ' => 'ⴗ',
-  'Ⴘ' => 'ⴘ',
-  'Ⴙ' => 'ⴙ',
-  'Ⴚ' => 'ⴚ',
-  'Ⴛ' => 'ⴛ',
-  'Ⴜ' => 'ⴜ',
-  'Ⴝ' => 'ⴝ',
-  'Ⴞ' => 'ⴞ',
-  'Ⴟ' => 'ⴟ',
-  'Ⴠ' => 'ⴠ',
-  'Ⴡ' => 'ⴡ',
-  'Ⴢ' => 'ⴢ',
-  'Ⴣ' => 'ⴣ',
-  'Ⴤ' => 'ⴤ',
-  'Ⴥ' => 'ⴥ',
-  'Ⴧ' => 'ⴧ',
-  'Ⴭ' => 'ⴭ',
-  'Ꭰ' => 'ꭰ',
-  'Ꭱ' => 'ꭱ',
-  'Ꭲ' => 'ꭲ',
-  'Ꭳ' => 'ꭳ',
-  'Ꭴ' => 'ꭴ',
-  'Ꭵ' => 'ꭵ',
-  'Ꭶ' => 'ꭶ',
-  'Ꭷ' => 'ꭷ',
-  'Ꭸ' => 'ꭸ',
-  'Ꭹ' => 'ꭹ',
-  'Ꭺ' => 'ꭺ',
-  'Ꭻ' => 'ꭻ',
-  'Ꭼ' => 'ꭼ',
-  'Ꭽ' => 'ꭽ',
-  'Ꭾ' => 'ꭾ',
-  'Ꭿ' => 'ꭿ',
-  'Ꮀ' => 'ꮀ',
-  'Ꮁ' => 'ꮁ',
-  'Ꮂ' => 'ꮂ',
-  'Ꮃ' => 'ꮃ',
-  'Ꮄ' => 'ꮄ',
-  'Ꮅ' => 'ꮅ',
-  'Ꮆ' => 'ꮆ',
-  'Ꮇ' => 'ꮇ',
-  'Ꮈ' => 'ꮈ',
-  'Ꮉ' => 'ꮉ',
-  'Ꮊ' => 'ꮊ',
-  'Ꮋ' => 'ꮋ',
-  'Ꮌ' => 'ꮌ',
-  'Ꮍ' => 'ꮍ',
-  'Ꮎ' => 'ꮎ',
-  'Ꮏ' => 'ꮏ',
-  'Ꮐ' => 'ꮐ',
-  'Ꮑ' => 'ꮑ',
-  'Ꮒ' => 'ꮒ',
-  'Ꮓ' => 'ꮓ',
-  'Ꮔ' => 'ꮔ',
-  'Ꮕ' => 'ꮕ',
-  'Ꮖ' => 'ꮖ',
-  'Ꮗ' => 'ꮗ',
-  'Ꮘ' => 'ꮘ',
-  'Ꮙ' => 'ꮙ',
-  'Ꮚ' => 'ꮚ',
-  'Ꮛ' => 'ꮛ',
-  'Ꮜ' => 'ꮜ',
-  'Ꮝ' => 'ꮝ',
-  'Ꮞ' => 'ꮞ',
-  'Ꮟ' => 'ꮟ',
-  'Ꮠ' => 'ꮠ',
-  'Ꮡ' => 'ꮡ',
-  'Ꮢ' => 'ꮢ',
-  'Ꮣ' => 'ꮣ',
-  'Ꮤ' => 'ꮤ',
-  'Ꮥ' => 'ꮥ',
-  'Ꮦ' => 'ꮦ',
-  'Ꮧ' => 'ꮧ',
-  'Ꮨ' => 'ꮨ',
-  'Ꮩ' => 'ꮩ',
-  'Ꮪ' => 'ꮪ',
-  'Ꮫ' => 'ꮫ',
-  'Ꮬ' => 'ꮬ',
-  'Ꮭ' => 'ꮭ',
-  'Ꮮ' => 'ꮮ',
-  'Ꮯ' => 'ꮯ',
-  'Ꮰ' => 'ꮰ',
-  'Ꮱ' => 'ꮱ',
-  'Ꮲ' => 'ꮲ',
-  'Ꮳ' => 'ꮳ',
-  'Ꮴ' => 'ꮴ',
-  'Ꮵ' => 'ꮵ',
-  'Ꮶ' => 'ꮶ',
-  'Ꮷ' => 'ꮷ',
-  'Ꮸ' => 'ꮸ',
-  'Ꮹ' => 'ꮹ',
-  'Ꮺ' => 'ꮺ',
-  'Ꮻ' => 'ꮻ',
-  'Ꮼ' => 'ꮼ',
-  'Ꮽ' => 'ꮽ',
-  'Ꮾ' => 'ꮾ',
-  'Ꮿ' => 'ꮿ',
-  'Ᏸ' => 'ᏸ',
-  'Ᏹ' => 'ᏹ',
-  'Ᏺ' => 'ᏺ',
-  'Ᏻ' => 'ᏻ',
-  'Ᏼ' => 'ᏼ',
-  'Ᏽ' => 'ᏽ',
-  'Ა' => 'ა',
-  'Ბ' => 'ბ',
-  'Გ' => 'გ',
-  'Დ' => 'დ',
-  'Ე' => 'ე',
-  'Ვ' => 'ვ',
-  'Ზ' => 'ზ',
-  'Თ' => 'თ',
-  'Ი' => 'ი',
-  'Კ' => 'კ',
-  'Ლ' => 'ლ',
-  'Მ' => 'მ',
-  'Ნ' => 'ნ',
-  'Ო' => 'ო',
-  'Პ' => 'პ',
-  'Ჟ' => 'ჟ',
-  'Რ' => 'რ',
-  'Ს' => 'ს',
-  'Ტ' => 'ტ',
-  'Უ' => 'უ',
-  'Ფ' => 'ფ',
-  'Ქ' => 'ქ',
-  'Ღ' => 'ღ',
-  'Ყ' => 'ყ',
-  'Შ' => 'შ',
-  'Ჩ' => 'ჩ',
-  'Ც' => 'ც',
-  'Ძ' => 'ძ',
-  'Წ' => 'წ',
-  'Ჭ' => 'ჭ',
-  'Ხ' => 'ხ',
-  'Ჯ' => 'ჯ',
-  'Ჰ' => 'ჰ',
-  'Ჱ' => 'ჱ',
-  'Ჲ' => 'ჲ',
-  'Ჳ' => 'ჳ',
-  'Ჴ' => 'ჴ',
-  'Ჵ' => 'ჵ',
-  'Ჶ' => 'ჶ',
-  'Ჷ' => 'ჷ',
-  'Ჸ' => 'ჸ',
-  'Ჹ' => 'ჹ',
-  'Ჺ' => 'ჺ',
-  'Ჽ' => 'ჽ',
-  'Ჾ' => 'ჾ',
-  'Ჿ' => 'ჿ',
-  'Ḁ' => 'ḁ',
-  'Ḃ' => 'ḃ',
-  'Ḅ' => 'ḅ',
-  'Ḇ' => 'ḇ',
-  'Ḉ' => 'ḉ',
-  'Ḋ' => 'ḋ',
-  'Ḍ' => 'ḍ',
-  'Ḏ' => 'ḏ',
-  'Ḑ' => 'ḑ',
-  'Ḓ' => 'ḓ',
-  'Ḕ' => 'ḕ',
-  'Ḗ' => 'ḗ',
-  'Ḙ' => 'ḙ',
-  'Ḛ' => 'ḛ',
-  'Ḝ' => 'ḝ',
-  'Ḟ' => 'ḟ',
-  'Ḡ' => 'ḡ',
-  'Ḣ' => 'ḣ',
-  'Ḥ' => 'ḥ',
-  'Ḧ' => 'ḧ',
-  'Ḩ' => 'ḩ',
-  'Ḫ' => 'ḫ',
-  'Ḭ' => 'ḭ',
-  'Ḯ' => 'ḯ',
-  'Ḱ' => 'ḱ',
-  'Ḳ' => 'ḳ',
-  'Ḵ' => 'ḵ',
-  'Ḷ' => 'ḷ',
-  'Ḹ' => 'ḹ',
-  'Ḻ' => 'ḻ',
-  'Ḽ' => 'ḽ',
-  'Ḿ' => 'ḿ',
-  'Ṁ' => 'ṁ',
-  'Ṃ' => 'ṃ',
-  'Ṅ' => 'ṅ',
-  'Ṇ' => 'ṇ',
-  'Ṉ' => 'ṉ',
-  'Ṋ' => 'ṋ',
-  'Ṍ' => 'ṍ',
-  'Ṏ' => 'ṏ',
-  'Ṑ' => 'ṑ',
-  'Ṓ' => 'ṓ',
-  'Ṕ' => 'ṕ',
-  'Ṗ' => 'ṗ',
-  'Ṙ' => 'ṙ',
-  'Ṛ' => 'ṛ',
-  'Ṝ' => 'ṝ',
-  'Ṟ' => 'ṟ',
-  'Ṡ' => 'ṡ',
-  'Ṣ' => 'ṣ',
-  'Ṥ' => 'ṥ',
-  'Ṧ' => 'ṧ',
-  'Ṩ' => 'ṩ',
-  'Ṫ' => 'ṫ',
-  'Ṭ' => 'ṭ',
-  'Ṯ' => 'ṯ',
-  'Ṱ' => 'ṱ',
-  'Ṳ' => 'ṳ',
-  'Ṵ' => 'ṵ',
-  'Ṷ' => 'ṷ',
-  'Ṹ' => 'ṹ',
-  'Ṻ' => 'ṻ',
-  'Ṽ' => 'ṽ',
-  'Ṿ' => 'ṿ',
-  'Ẁ' => 'ẁ',
-  'Ẃ' => 'ẃ',
-  'Ẅ' => 'ẅ',
-  'Ẇ' => 'ẇ',
-  'Ẉ' => 'ẉ',
-  'Ẋ' => 'ẋ',
-  'Ẍ' => 'ẍ',
-  'Ẏ' => 'ẏ',
-  'Ẑ' => 'ẑ',
-  'Ẓ' => 'ẓ',
-  'Ẕ' => 'ẕ',
-  'ẞ' => 'ß',
-  'Ạ' => 'ạ',
-  'Ả' => 'ả',
-  'Ấ' => 'ấ',
-  'Ầ' => 'ầ',
-  'Ẩ' => 'ẩ',
-  'Ẫ' => 'ẫ',
-  'Ậ' => 'ậ',
-  'Ắ' => 'ắ',
-  'Ằ' => 'ằ',
-  'Ẳ' => 'ẳ',
-  'Ẵ' => 'ẵ',
-  'Ặ' => 'ặ',
-  'Ẹ' => 'ẹ',
-  'Ẻ' => 'ẻ',
-  'Ẽ' => 'ẽ',
-  'Ế' => 'ế',
-  'Ề' => 'ề',
-  'Ể' => 'ể',
-  'Ễ' => 'ễ',
-  'Ệ' => 'ệ',
-  'Ỉ' => 'ỉ',
-  'Ị' => 'ị',
-  'Ọ' => 'ọ',
-  'Ỏ' => 'ỏ',
-  'Ố' => 'ố',
-  'Ồ' => 'ồ',
-  'Ổ' => 'ổ',
-  'Ỗ' => 'ỗ',
-  'Ộ' => 'ộ',
-  'Ớ' => 'ớ',
-  'Ờ' => 'ờ',
-  'Ở' => 'ở',
-  'Ỡ' => 'ỡ',
-  'Ợ' => 'ợ',
-  'Ụ' => 'ụ',
-  'Ủ' => 'ủ',
-  'Ứ' => 'ứ',
-  'Ừ' => 'ừ',
-  'Ử' => 'ử',
-  'Ữ' => 'ữ',
-  'Ự' => 'ự',
-  'Ỳ' => 'ỳ',
-  'Ỵ' => 'ỵ',
-  'Ỷ' => 'ỷ',
-  'Ỹ' => 'ỹ',
-  'Ỻ' => 'ỻ',
-  'Ỽ' => 'ỽ',
-  'Ỿ' => 'ỿ',
-  'Ἀ' => 'ἀ',
-  'Ἁ' => 'ἁ',
-  'Ἂ' => 'ἂ',
-  'Ἃ' => 'ἃ',
-  'Ἄ' => 'ἄ',
-  'Ἅ' => 'ἅ',
-  'Ἆ' => 'ἆ',
-  'Ἇ' => 'ἇ',
-  'Ἐ' => 'ἐ',
-  'Ἑ' => 'ἑ',
-  'Ἒ' => 'ἒ',
-  'Ἓ' => 'ἓ',
-  'Ἔ' => 'ἔ',
-  'Ἕ' => 'ἕ',
-  'Ἠ' => 'ἠ',
-  'Ἡ' => 'ἡ',
-  'Ἢ' => 'ἢ',
-  'Ἣ' => 'ἣ',
-  'Ἤ' => 'ἤ',
-  'Ἥ' => 'ἥ',
-  'Ἦ' => 'ἦ',
-  'Ἧ' => 'ἧ',
-  'Ἰ' => 'ἰ',
-  'Ἱ' => 'ἱ',
-  'Ἲ' => 'ἲ',
-  'Ἳ' => 'ἳ',
-  'Ἴ' => 'ἴ',
-  'Ἵ' => 'ἵ',
-  'Ἶ' => 'ἶ',
-  'Ἷ' => 'ἷ',
-  'Ὀ' => 'ὀ',
-  'Ὁ' => 'ὁ',
-  'Ὂ' => 'ὂ',
-  'Ὃ' => 'ὃ',
-  'Ὄ' => 'ὄ',
-  'Ὅ' => 'ὅ',
-  'Ὑ' => 'ὑ',
-  'Ὓ' => 'ὓ',
-  'Ὕ' => 'ὕ',
-  'Ὗ' => 'ὗ',
-  'Ὠ' => 'ὠ',
-  'Ὡ' => 'ὡ',
-  'Ὢ' => 'ὢ',
-  'Ὣ' => 'ὣ',
-  'Ὤ' => 'ὤ',
-  'Ὥ' => 'ὥ',
-  'Ὦ' => 'ὦ',
-  'Ὧ' => 'ὧ',
-  'ᾈ' => 'ᾀ',
-  'ᾉ' => 'ᾁ',
-  'ᾊ' => 'ᾂ',
-  'ᾋ' => 'ᾃ',
-  'ᾌ' => 'ᾄ',
-  'ᾍ' => 'ᾅ',
-  'ᾎ' => 'ᾆ',
-  'ᾏ' => 'ᾇ',
-  'ᾘ' => 'ᾐ',
-  'ᾙ' => 'ᾑ',
-  'ᾚ' => 'ᾒ',
-  'ᾛ' => 'ᾓ',
-  'ᾜ' => 'ᾔ',
-  'ᾝ' => 'ᾕ',
-  'ᾞ' => 'ᾖ',
-  'ᾟ' => 'ᾗ',
-  'ᾨ' => 'ᾠ',
-  'ᾩ' => 'ᾡ',
-  'ᾪ' => 'ᾢ',
-  'ᾫ' => 'ᾣ',
-  'ᾬ' => 'ᾤ',
-  'ᾭ' => 'ᾥ',
-  'ᾮ' => 'ᾦ',
-  'ᾯ' => 'ᾧ',
-  'Ᾰ' => 'ᾰ',
-  'Ᾱ' => 'ᾱ',
-  'Ὰ' => 'ὰ',
-  'Ά' => 'ά',
-  'ᾼ' => 'ᾳ',
-  'Ὲ' => 'ὲ',
-  'Έ' => 'έ',
-  'Ὴ' => 'ὴ',
-  'Ή' => 'ή',
-  'ῌ' => 'ῃ',
-  'Ῐ' => 'ῐ',
-  'Ῑ' => 'ῑ',
-  'Ὶ' => 'ὶ',
-  'Ί' => 'ί',
-  'Ῠ' => 'ῠ',
-  'Ῡ' => 'ῡ',
-  'Ὺ' => 'ὺ',
-  'Ύ' => 'ύ',
-  'Ῥ' => 'ῥ',
-  'Ὸ' => 'ὸ',
-  'Ό' => 'ό',
-  'Ὼ' => 'ὼ',
-  'Ώ' => 'ώ',
-  'ῼ' => 'ῳ',
-  'Ω' => 'ω',
-  'K' => 'k',
-  'Å' => 'å',
-  'Ⅎ' => 'ⅎ',
-  'Ⅰ' => 'ⅰ',
-  'Ⅱ' => 'ⅱ',
-  'Ⅲ' => 'ⅲ',
-  'Ⅳ' => 'ⅳ',
-  'Ⅴ' => 'ⅴ',
-  'Ⅵ' => 'ⅵ',
-  'Ⅶ' => 'ⅶ',
-  'Ⅷ' => 'ⅷ',
-  'Ⅸ' => 'ⅸ',
-  'Ⅹ' => 'ⅹ',
-  'Ⅺ' => 'ⅺ',
-  'Ⅻ' => 'ⅻ',
-  'Ⅼ' => 'ⅼ',
-  'Ⅽ' => 'ⅽ',
-  'Ⅾ' => 'ⅾ',
-  'Ⅿ' => 'ⅿ',
-  'Ↄ' => 'ↄ',
-  'Ⓐ' => 'ⓐ',
-  'Ⓑ' => 'ⓑ',
-  'Ⓒ' => 'ⓒ',
-  'Ⓓ' => 'ⓓ',
-  'Ⓔ' => 'ⓔ',
-  'Ⓕ' => 'ⓕ',
-  'Ⓖ' => 'ⓖ',
-  'Ⓗ' => 'ⓗ',
-  'Ⓘ' => 'ⓘ',
-  'Ⓙ' => 'ⓙ',
-  'Ⓚ' => 'ⓚ',
-  'Ⓛ' => 'ⓛ',
-  'Ⓜ' => 'ⓜ',
-  'Ⓝ' => 'ⓝ',
-  'Ⓞ' => 'ⓞ',
-  'Ⓟ' => 'ⓟ',
-  'Ⓠ' => 'ⓠ',
-  'Ⓡ' => 'ⓡ',
-  'Ⓢ' => 'ⓢ',
-  'Ⓣ' => 'ⓣ',
-  'Ⓤ' => 'ⓤ',
-  'Ⓥ' => 'ⓥ',
-  'Ⓦ' => 'ⓦ',
-  'Ⓧ' => 'ⓧ',
-  'Ⓨ' => 'ⓨ',
-  'Ⓩ' => 'ⓩ',
-  'Ⰰ' => 'ⰰ',
-  'Ⰱ' => 'ⰱ',
-  'Ⰲ' => 'ⰲ',
-  'Ⰳ' => 'ⰳ',
-  'Ⰴ' => 'ⰴ',
-  'Ⰵ' => 'ⰵ',
-  'Ⰶ' => 'ⰶ',
-  'Ⰷ' => 'ⰷ',
-  'Ⰸ' => 'ⰸ',
-  'Ⰹ' => 'ⰹ',
-  'Ⰺ' => 'ⰺ',
-  'Ⰻ' => 'ⰻ',
-  'Ⰼ' => 'ⰼ',
-  'Ⰽ' => 'ⰽ',
-  'Ⰾ' => 'ⰾ',
-  'Ⰿ' => 'ⰿ',
-  'Ⱀ' => 'ⱀ',
-  'Ⱁ' => 'ⱁ',
-  'Ⱂ' => 'ⱂ',
-  'Ⱃ' => 'ⱃ',
-  'Ⱄ' => 'ⱄ',
-  'Ⱅ' => 'ⱅ',
-  'Ⱆ' => 'ⱆ',
-  'Ⱇ' => 'ⱇ',
-  'Ⱈ' => 'ⱈ',
-  'Ⱉ' => 'ⱉ',
-  'Ⱊ' => 'ⱊ',
-  'Ⱋ' => 'ⱋ',
-  'Ⱌ' => 'ⱌ',
-  'Ⱍ' => 'ⱍ',
-  'Ⱎ' => 'ⱎ',
-  'Ⱏ' => 'ⱏ',
-  'Ⱐ' => 'ⱐ',
-  'Ⱑ' => 'ⱑ',
-  'Ⱒ' => 'ⱒ',
-  'Ⱓ' => 'ⱓ',
-  'Ⱔ' => 'ⱔ',
-  'Ⱕ' => 'ⱕ',
-  'Ⱖ' => 'ⱖ',
-  'Ⱗ' => 'ⱗ',
-  'Ⱘ' => 'ⱘ',
-  'Ⱙ' => 'ⱙ',
-  'Ⱚ' => 'ⱚ',
-  'Ⱛ' => 'ⱛ',
-  'Ⱜ' => 'ⱜ',
-  'Ⱝ' => 'ⱝ',
-  'Ⱞ' => 'ⱞ',
-  'Ⱡ' => 'ⱡ',
-  'Ɫ' => 'ɫ',
-  'Ᵽ' => 'ᵽ',
-  'Ɽ' => 'ɽ',
-  'Ⱨ' => 'ⱨ',
-  'Ⱪ' => 'ⱪ',
-  'Ⱬ' => 'ⱬ',
-  'Ɑ' => 'ɑ',
-  'Ɱ' => 'ɱ',
-  'Ɐ' => 'ɐ',
-  'Ɒ' => 'ɒ',
-  'Ⱳ' => 'ⱳ',
-  'Ⱶ' => 'ⱶ',
-  'Ȿ' => 'ȿ',
-  'Ɀ' => 'ɀ',
-  'Ⲁ' => 'ⲁ',
-  'Ⲃ' => 'ⲃ',
-  'Ⲅ' => 'ⲅ',
-  'Ⲇ' => 'ⲇ',
-  'Ⲉ' => 'ⲉ',
-  'Ⲋ' => 'ⲋ',
-  'Ⲍ' => 'ⲍ',
-  'Ⲏ' => 'ⲏ',
-  'Ⲑ' => 'ⲑ',
-  'Ⲓ' => 'ⲓ',
-  'Ⲕ' => 'ⲕ',
-  'Ⲗ' => 'ⲗ',
-  'Ⲙ' => 'ⲙ',
-  'Ⲛ' => 'ⲛ',
-  'Ⲝ' => 'ⲝ',
-  'Ⲟ' => 'ⲟ',
-  'Ⲡ' => 'ⲡ',
-  'Ⲣ' => 'ⲣ',
-  'Ⲥ' => 'ⲥ',
-  'Ⲧ' => 'ⲧ',
-  'Ⲩ' => 'ⲩ',
-  'Ⲫ' => 'ⲫ',
-  'Ⲭ' => 'ⲭ',
-  'Ⲯ' => 'ⲯ',
-  'Ⲱ' => 'ⲱ',
-  'Ⲳ' => 'ⲳ',
-  'Ⲵ' => 'ⲵ',
-  'Ⲷ' => 'ⲷ',
-  'Ⲹ' => 'ⲹ',
-  'Ⲻ' => 'ⲻ',
-  'Ⲽ' => 'ⲽ',
-  'Ⲿ' => 'ⲿ',
-  'Ⳁ' => 'ⳁ',
-  'Ⳃ' => 'ⳃ',
-  'Ⳅ' => 'ⳅ',
-  'Ⳇ' => 'ⳇ',
-  'Ⳉ' => 'ⳉ',
-  'Ⳋ' => 'ⳋ',
-  'Ⳍ' => 'ⳍ',
-  'Ⳏ' => 'ⳏ',
-  'Ⳑ' => 'ⳑ',
-  'Ⳓ' => 'ⳓ',
-  'Ⳕ' => 'ⳕ',
-  'Ⳗ' => 'ⳗ',
-  'Ⳙ' => 'ⳙ',
-  'Ⳛ' => 'ⳛ',
-  'Ⳝ' => 'ⳝ',
-  'Ⳟ' => 'ⳟ',
-  'Ⳡ' => 'ⳡ',
-  'Ⳣ' => 'ⳣ',
-  'Ⳬ' => 'ⳬ',
-  'Ⳮ' => 'ⳮ',
-  'Ⳳ' => 'ⳳ',
-  'Ꙁ' => 'ꙁ',
-  'Ꙃ' => 'ꙃ',
-  'Ꙅ' => 'ꙅ',
-  'Ꙇ' => 'ꙇ',
-  'Ꙉ' => 'ꙉ',
-  'Ꙋ' => 'ꙋ',
-  'Ꙍ' => 'ꙍ',
-  'Ꙏ' => 'ꙏ',
-  'Ꙑ' => 'ꙑ',
-  'Ꙓ' => 'ꙓ',
-  'Ꙕ' => 'ꙕ',
-  'Ꙗ' => 'ꙗ',
-  'Ꙙ' => 'ꙙ',
-  'Ꙛ' => 'ꙛ',
-  'Ꙝ' => 'ꙝ',
-  'Ꙟ' => 'ꙟ',
-  'Ꙡ' => 'ꙡ',
-  'Ꙣ' => 'ꙣ',
-  'Ꙥ' => 'ꙥ',
-  'Ꙧ' => 'ꙧ',
-  'Ꙩ' => 'ꙩ',
-  'Ꙫ' => 'ꙫ',
-  'Ꙭ' => 'ꙭ',
-  'Ꚁ' => 'ꚁ',
-  'Ꚃ' => 'ꚃ',
-  'Ꚅ' => 'ꚅ',
-  'Ꚇ' => 'ꚇ',
-  'Ꚉ' => 'ꚉ',
-  'Ꚋ' => 'ꚋ',
-  'Ꚍ' => 'ꚍ',
-  'Ꚏ' => 'ꚏ',
-  'Ꚑ' => 'ꚑ',
-  'Ꚓ' => 'ꚓ',
-  'Ꚕ' => 'ꚕ',
-  'Ꚗ' => 'ꚗ',
-  'Ꚙ' => 'ꚙ',
-  'Ꚛ' => 'ꚛ',
-  'Ꜣ' => 'ꜣ',
-  'Ꜥ' => 'ꜥ',
-  'Ꜧ' => 'ꜧ',
-  'Ꜩ' => 'ꜩ',
-  'Ꜫ' => 'ꜫ',
-  'Ꜭ' => 'ꜭ',
-  'Ꜯ' => 'ꜯ',
-  'Ꜳ' => 'ꜳ',
-  'Ꜵ' => 'ꜵ',
-  'Ꜷ' => 'ꜷ',
-  'Ꜹ' => 'ꜹ',
-  'Ꜻ' => 'ꜻ',
-  'Ꜽ' => 'ꜽ',
-  'Ꜿ' => 'ꜿ',
-  'Ꝁ' => 'ꝁ',
-  'Ꝃ' => 'ꝃ',
-  'Ꝅ' => 'ꝅ',
-  'Ꝇ' => 'ꝇ',
-  'Ꝉ' => 'ꝉ',
-  'Ꝋ' => 'ꝋ',
-  'Ꝍ' => 'ꝍ',
-  'Ꝏ' => 'ꝏ',
-  'Ꝑ' => 'ꝑ',
-  'Ꝓ' => 'ꝓ',
-  'Ꝕ' => 'ꝕ',
-  'Ꝗ' => 'ꝗ',
-  'Ꝙ' => 'ꝙ',
-  'Ꝛ' => 'ꝛ',
-  'Ꝝ' => 'ꝝ',
-  'Ꝟ' => 'ꝟ',
-  'Ꝡ' => 'ꝡ',
-  'Ꝣ' => 'ꝣ',
-  'Ꝥ' => 'ꝥ',
-  'Ꝧ' => 'ꝧ',
-  'Ꝩ' => 'ꝩ',
-  'Ꝫ' => 'ꝫ',
-  'Ꝭ' => 'ꝭ',
-  'Ꝯ' => 'ꝯ',
-  'Ꝺ' => 'ꝺ',
-  'Ꝼ' => 'ꝼ',
-  'Ᵹ' => 'ᵹ',
-  'Ꝿ' => 'ꝿ',
-  'Ꞁ' => 'ꞁ',
-  'Ꞃ' => 'ꞃ',
-  'Ꞅ' => 'ꞅ',
-  'Ꞇ' => 'ꞇ',
-  'Ꞌ' => 'ꞌ',
-  'Ɥ' => 'ɥ',
-  'Ꞑ' => 'ꞑ',
-  'Ꞓ' => 'ꞓ',
-  'Ꞗ' => 'ꞗ',
-  'Ꞙ' => 'ꞙ',
-  'Ꞛ' => 'ꞛ',
-  'Ꞝ' => 'ꞝ',
-  'Ꞟ' => 'ꞟ',
-  'Ꞡ' => 'ꞡ',
-  'Ꞣ' => 'ꞣ',
-  'Ꞥ' => 'ꞥ',
-  'Ꞧ' => 'ꞧ',
-  'Ꞩ' => 'ꞩ',
-  'Ɦ' => 'ɦ',
-  'Ɜ' => 'ɜ',
-  'Ɡ' => 'ɡ',
-  'Ɬ' => 'ɬ',
-  'Ɪ' => 'ɪ',
-  'Ʞ' => 'ʞ',
-  'Ʇ' => 'ʇ',
-  'Ʝ' => 'ʝ',
-  'Ꭓ' => 'ꭓ',
-  'Ꞵ' => 'ꞵ',
-  'Ꞷ' => 'ꞷ',
-  'Ꞹ' => 'ꞹ',
-  'Ꞻ' => 'ꞻ',
-  'Ꞽ' => 'ꞽ',
-  'Ꞿ' => 'ꞿ',
-  'Ꟃ' => 'ꟃ',
-  'Ꞔ' => 'ꞔ',
-  'Ʂ' => 'ʂ',
-  'Ᶎ' => 'ᶎ',
-  'Ꟈ' => 'ꟈ',
-  'Ꟊ' => 'ꟊ',
-  'Ꟶ' => 'ꟶ',
-  'Ａ' => 'ａ',
-  'Ｂ' => 'ｂ',
-  'Ｃ' => 'ｃ',
-  'Ｄ' => 'ｄ',
-  'Ｅ' => 'ｅ',
-  'Ｆ' => 'ｆ',
-  'Ｇ' => 'ｇ',
-  'Ｈ' => 'ｈ',
-  'Ｉ' => 'ｉ',
-  'Ｊ' => 'ｊ',
-  'Ｋ' => 'ｋ',
-  'Ｌ' => 'ｌ',
-  'Ｍ' => 'ｍ',
-  'Ｎ' => 'ｎ',
-  'Ｏ' => 'ｏ',
-  'Ｐ' => 'ｐ',
-  'Ｑ' => 'ｑ',
-  'Ｒ' => 'ｒ',
-  'Ｓ' => 'ｓ',
-  'Ｔ' => 'ｔ',
-  'Ｕ' => 'ｕ',
-  'Ｖ' => 'ｖ',
-  'Ｗ' => 'ｗ',
-  'Ｘ' => 'ｘ',
-  'Ｙ' => 'ｙ',
-  'Ｚ' => 'ｚ',
-  '𐐀' => '𐐨',
-  '𐐁' => '𐐩',
-  '𐐂' => '𐐪',
-  '𐐃' => '𐐫',
-  '𐐄' => '𐐬',
-  '𐐅' => '𐐭',
-  '𐐆' => '𐐮',
-  '𐐇' => '𐐯',
-  '𐐈' => '𐐰',
-  '𐐉' => '𐐱',
-  '𐐊' => '𐐲',
-  '𐐋' => '𐐳',
-  '𐐌' => '𐐴',
-  '𐐍' => '𐐵',
-  '𐐎' => '𐐶',
-  '𐐏' => '𐐷',
-  '𐐐' => '𐐸',
-  '𐐑' => '𐐹',
-  '𐐒' => '𐐺',
-  '𐐓' => '𐐻',
-  '𐐔' => '𐐼',
-  '𐐕' => '𐐽',
-  '𐐖' => '𐐾',
-  '𐐗' => '𐐿',
-  '𐐘' => '𐑀',
-  '𐐙' => '𐑁',
-  '𐐚' => '𐑂',
-  '𐐛' => '𐑃',
-  '𐐜' => '𐑄',
-  '𐐝' => '𐑅',
-  '𐐞' => '𐑆',
-  '𐐟' => '𐑇',
-  '𐐠' => '𐑈',
-  '𐐡' => '𐑉',
-  '𐐢' => '𐑊',
-  '𐐣' => '𐑋',
-  '𐐤' => '𐑌',
-  '𐐥' => '𐑍',
-  '𐐦' => '𐑎',
-  '𐐧' => '𐑏',
-  '𐒰' => '𐓘',
-  '𐒱' => '𐓙',
-  '𐒲' => '𐓚',
-  '𐒳' => '𐓛',
-  '𐒴' => '𐓜',
-  '𐒵' => '𐓝',
-  '𐒶' => '𐓞',
-  '𐒷' => '𐓟',
-  '𐒸' => '𐓠',
-  '𐒹' => '𐓡',
-  '𐒺' => '𐓢',
-  '𐒻' => '𐓣',
-  '𐒼' => '𐓤',
-  '𐒽' => '𐓥',
-  '𐒾' => '𐓦',
-  '𐒿' => '𐓧',
-  '𐓀' => '𐓨',
-  '𐓁' => '𐓩',
-  '𐓂' => '𐓪',
-  '𐓃' => '𐓫',
-  '𐓄' => '𐓬',
-  '𐓅' => '𐓭',
-  '𐓆' => '𐓮',
-  '𐓇' => '𐓯',
-  '𐓈' => '𐓰',
-  '𐓉' => '𐓱',
-  '𐓊' => '𐓲',
-  '𐓋' => '𐓳',
-  '𐓌' => '𐓴',
-  '𐓍' => '𐓵',
-  '𐓎' => '𐓶',
-  '𐓏' => '𐓷',
-  '𐓐' => '𐓸',
-  '𐓑' => '𐓹',
-  '𐓒' => '𐓺',
-  '𐓓' => '𐓻',
-  '𐲀' => '𐳀',
-  '𐲁' => '𐳁',
-  '𐲂' => '𐳂',
-  '𐲃' => '𐳃',
-  '𐲄' => '𐳄',
-  '𐲅' => '𐳅',
-  '𐲆' => '𐳆',
-  '𐲇' => '𐳇',
-  '𐲈' => '𐳈',
-  '𐲉' => '𐳉',
-  '𐲊' => '𐳊',
-  '𐲋' => '𐳋',
-  '𐲌' => '𐳌',
-  '𐲍' => '𐳍',
-  '𐲎' => '𐳎',
-  '𐲏' => '𐳏',
-  '𐲐' => '𐳐',
-  '𐲑' => '𐳑',
-  '𐲒' => '𐳒',
-  '𐲓' => '𐳓',
-  '𐲔' => '𐳔',
-  '𐲕' => '𐳕',
-  '𐲖' => '𐳖',
-  '𐲗' => '𐳗',
-  '𐲘' => '𐳘',
-  '𐲙' => '𐳙',
-  '𐲚' => '𐳚',
-  '𐲛' => '𐳛',
-  '𐲜' => '𐳜',
-  '𐲝' => '𐳝',
-  '𐲞' => '𐳞',
-  '𐲟' => '𐳟',
-  '𐲠' => '𐳠',
-  '𐲡' => '𐳡',
-  '𐲢' => '𐳢',
-  '𐲣' => '𐳣',
-  '𐲤' => '𐳤',
-  '𐲥' => '𐳥',
-  '𐲦' => '𐳦',
-  '𐲧' => '𐳧',
-  '𐲨' => '𐳨',
-  '𐲩' => '𐳩',
-  '𐲪' => '𐳪',
-  '𐲫' => '𐳫',
-  '𐲬' => '𐳬',
-  '𐲭' => '𐳭',
-  '𐲮' => '𐳮',
-  '𐲯' => '𐳯',
-  '𐲰' => '𐳰',
-  '𐲱' => '𐳱',
-  '𐲲' => '𐳲',
-  '𑢠' => '𑣀',
-  '𑢡' => '𑣁',
-  '𑢢' => '𑣂',
-  '𑢣' => '𑣃',
-  '𑢤' => '𑣄',
-  '𑢥' => '𑣅',
-  '𑢦' => '𑣆',
-  '𑢧' => '𑣇',
-  '𑢨' => '𑣈',
-  '𑢩' => '𑣉',
-  '𑢪' => '𑣊',
-  '𑢫' => '𑣋',
-  '𑢬' => '𑣌',
-  '𑢭' => '𑣍',
-  '𑢮' => '𑣎',
-  '𑢯' => '𑣏',
-  '𑢰' => '𑣐',
-  '𑢱' => '𑣑',
-  '𑢲' => '𑣒',
-  '𑢳' => '𑣓',
-  '𑢴' => '𑣔',
-  '𑢵' => '𑣕',
-  '𑢶' => '𑣖',
-  '𑢷' => '𑣗',
-  '𑢸' => '𑣘',
-  '𑢹' => '𑣙',
-  '𑢺' => '𑣚',
-  '𑢻' => '𑣛',
-  '𑢼' => '𑣜',
-  '𑢽' => '𑣝',
-  '𑢾' => '𑣞',
-  '𑢿' => '𑣟',
-  '𖹀' => '𖹠',
-  '𖹁' => '𖹡',
-  '𖹂' => '𖹢',
-  '𖹃' => '𖹣',
-  '𖹄' => '𖹤',
-  '𖹅' => '𖹥',
-  '𖹆' => '𖹦',
-  '𖹇' => '𖹧',
-  '𖹈' => '𖹨',
-  '𖹉' => '𖹩',
-  '𖹊' => '𖹪',
-  '𖹋' => '𖹫',
-  '𖹌' => '𖹬',
-  '𖹍' => '𖹭',
-  '𖹎' => '𖹮',
-  '𖹏' => '𖹯',
-  '𖹐' => '𖹰',
-  '𖹑' => '𖹱',
-  '𖹒' => '𖹲',
-  '𖹓' => '𖹳',
-  '𖹔' => '𖹴',
-  '𖹕' => '𖹵',
-  '𖹖' => '𖹶',
-  '𖹗' => '𖹷',
-  '𖹘' => '𖹸',
-  '𖹙' => '𖹹',
-  '𖹚' => '𖹺',
-  '𖹛' => '𖹻',
-  '𖹜' => '𖹼',
-  '𖹝' => '𖹽',
-  '𖹞' => '𖹾',
-  '𖹟' => '𖹿',
-  '𞤀' => '𞤢',
-  '𞤁' => '𞤣',
-  '𞤂' => '𞤤',
-  '𞤃' => '𞤥',
-  '𞤄' => '𞤦',
-  '𞤅' => '𞤧',
-  '𞤆' => '𞤨',
-  '𞤇' => '𞤩',
-  '𞤈' => '𞤪',
-  '𞤉' => '𞤫',
-  '𞤊' => '𞤬',
-  '𞤋' => '𞤭',
-  '𞤌' => '𞤮',
-  '𞤍' => '𞤯',
-  '𞤎' => '𞤰',
-  '𞤏' => '𞤱',
-  '𞤐' => '𞤲',
-  '𞤑' => '𞤳',
-  '𞤒' => '𞤴',
-  '𞤓' => '𞤵',
-  '𞤔' => '𞤶',
-  '𞤕' => '𞤷',
-  '𞤖' => '𞤸',
-  '𞤗' => '𞤹',
-  '𞤘' => '𞤺',
-  '𞤙' => '𞤻',
-  '𞤚' => '𞤼',
-  '𞤛' => '𞤽',
-  '𞤜' => '𞤾',
-  '𞤝' => '𞤿',
-  '𞤞' => '𞥀',
-  '𞤟' => '𞥁',
-  '𞤠' => '𞥂',
-  '𞤡' => '𞥃',
-);
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/titleCaseRegexp.php b/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/titleCaseRegexp.php
deleted file mode 100644
index 2a8f6e7..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/titleCaseRegexp.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<?php
-
-// from Case_Ignorable in https://unicode.org/Public/UNIDATA/DerivedCoreProperties.txt
-
-return '/(?<![\x{0027}\x{002E}\x{003A}\x{005E}\x{0060}\x{00A8}\x{00AD}\x{00AF}\x{00B4}\x{00B7}\x{00B8}\x{02B0}-\x{02C1}\x{02C2}-\x{02C5}\x{02C6}-\x{02D1}\x{02D2}-\x{02DF}\x{02E0}-\x{02E4}\x{02E5}-\x{02EB}\x{02EC}\x{02ED}\x{02EE}\x{02EF}-\x{02FF}\x{0300}-\x{036F}\x{0374}\x{0375}\x{037A}\x{0384}-\x{0385}\x{0387}\x{0483}-\x{0487}\x{0488}-\x{0489}\x{0559}\x{0591}-\x{05BD}\x{05BF}\x{05C1}-\x{05C2}\x{05C4}-\x{05C5}\x{05C7}\x{05F4}\x{0600}-\x{0605}\x{0610}-\x{061A}\x{061C}\x{0640}\x{064B}-\x{065F}\x{0670}\x{06D6}-\x{06DC}\x{06DD}\x{06DF}-\x{06E4}\x{06E5}-\x{06E6}\x{06E7}-\x{06E8}\x{06EA}-\x{06ED}\x{070F}\x{0711}\x{0730}-\x{074A}\x{07A6}-\x{07B0}\x{07EB}-\x{07F3}\x{07F4}-\x{07F5}\x{07FA}\x{07FD}\x{0816}-\x{0819}\x{081A}\x{081B}-\x{0823}\x{0824}\x{0825}-\x{0827}\x{0828}\x{0829}-\x{082D}\x{0859}-\x{085B}\x{08D3}-\x{08E1}\x{08E2}\x{08E3}-\x{0902}\x{093A}\x{093C}\x{0941}-\x{0948}\x{094D}\x{0951}-\x{0957}\x{0962}-\x{0963}\x{0971}\x{0981}\x{09BC}\x{09C1}-\x{09C4}\x{09CD}\x{09E2}-\x{09E3}\x{09FE}\x{0A01}-\x{0A02}\x{0A3C}\x{0A41}-\x{0A42}\x{0A47}-\x{0A48}\x{0A4B}-\x{0A4D}\x{0A51}\x{0A70}-\x{0A71}\x{0A75}\x{0A81}-\x{0A82}\x{0ABC}\x{0AC1}-\x{0AC5}\x{0AC7}-\x{0AC8}\x{0ACD}\x{0AE2}-\x{0AE3}\x{0AFA}-\x{0AFF}\x{0B01}\x{0B3C}\x{0B3F}\x{0B41}-\x{0B44}\x{0B4D}\x{0B56}\x{0B62}-\x{0B63}\x{0B82}\x{0BC0}\x{0BCD}\x{0C00}\x{0C04}\x{0C3E}-\x{0C40}\x{0C46}-\x{0C48}\x{0C4A}-\x{0C4D}\x{0C55}-\x{0C56}\x{0C62}-\x{0C63}\x{0C81}\x{0CBC}\x{0CBF}\x{0CC6}\x{0CCC}-\x{0CCD}\x{0CE2}-\x{0CE3}\x{0D00}-\x{0D01}\x{0D3B}-\x{0D3C}\x{0D41}-\x{0D44}\x{0D4D}\x{0D62}-\x{0D63}\x{0DCA}\x{0DD2}-\x{0DD4}\x{0DD6}\x{0E31}\x{0E34}-\x{0E3A}\x{0E46}\x{0E47}-\x{0E4E}\x{0EB1}\x{0EB4}-\x{0EB9}\x{0EBB}-\x{0EBC}\x{0EC6}\x{0EC8}-\x{0ECD}\x{0F18}-\x{0F19}\x{0F35}\x{0F37}\x{0F39}\x{0F71}-\x{0F7E}\x{0F80}-\x{0F84}\x{0F86}-\x{0F87}\x{0F8D}-\x{0F97}\x{0F99}-\x{0FBC}\x{0FC6}\x{102D}-\x{1030}\x{1032}-\x{1037}\x{1039}-\x{103A}\x{103D}-\x{103E}\x{1058}-\x{1059}\x{105E}-\x{1060}\x{1071}-\x{1074}\x{1082}\x{1085}-\x{1086}\x{108D}\x{109D}\x{10FC}\x{135D}-\x{135F}\x{1712}-\x{1714}\x{1732}-\x{1734}\x{1752}-\x{1753}\x{1772}-\x{1773}\x{17B4}-\x{17B5}\x{17B7}-\x{17BD}\x{17C6}\x{17C9}-\x{17D3}\x{17D7}\x{17DD}\x{180B}-\x{180D}\x{180E}\x{1843}\x{1885}-\x{1886}\x{18A9}\x{1920}-\x{1922}\x{1927}-\x{1928}\x{1932}\x{1939}-\x{193B}\x{1A17}-\x{1A18}\x{1A1B}\x{1A56}\x{1A58}-\x{1A5E}\x{1A60}\x{1A62}\x{1A65}-\x{1A6C}\x{1A73}-\x{1A7C}\x{1A7F}\x{1AA7}\x{1AB0}-\x{1ABD}\x{1ABE}\x{1B00}-\x{1B03}\x{1B34}\x{1B36}-\x{1B3A}\x{1B3C}\x{1B42}\x{1B6B}-\x{1B73}\x{1B80}-\x{1B81}\x{1BA2}-\x{1BA5}\x{1BA8}-\x{1BA9}\x{1BAB}-\x{1BAD}\x{1BE6}\x{1BE8}-\x{1BE9}\x{1BED}\x{1BEF}-\x{1BF1}\x{1C2C}-\x{1C33}\x{1C36}-\x{1C37}\x{1C78}-\x{1C7D}\x{1CD0}-\x{1CD2}\x{1CD4}-\x{1CE0}\x{1CE2}-\x{1CE8}\x{1CED}\x{1CF4}\x{1CF8}-\x{1CF9}\x{1D2C}-\x{1D6A}\x{1D78}\x{1D9B}-\x{1DBF}\x{1DC0}-\x{1DF9}\x{1DFB}-\x{1DFF}\x{1FBD}\x{1FBF}-\x{1FC1}\x{1FCD}-\x{1FCF}\x{1FDD}-\x{1FDF}\x{1FED}-\x{1FEF}\x{1FFD}-\x{1FFE}\x{200B}-\x{200F}\x{2018}\x{2019}\x{2024}\x{2027}\x{202A}-\x{202E}\x{2060}-\x{2064}\x{2066}-\x{206F}\x{2071}\x{207F}\x{2090}-\x{209C}\x{20D0}-\x{20DC}\x{20DD}-\x{20E0}\x{20E1}\x{20E2}-\x{20E4}\x{20E5}-\x{20F0}\x{2C7C}-\x{2C7D}\x{2CEF}-\x{2CF1}\x{2D6F}\x{2D7F}\x{2DE0}-\x{2DFF}\x{2E2F}\x{3005}\x{302A}-\x{302D}\x{3031}-\x{3035}\x{303B}\x{3099}-\x{309A}\x{309B}-\x{309C}\x{309D}-\x{309E}\x{30FC}-\x{30FE}\x{A015}\x{A4F8}-\x{A4FD}\x{A60C}\x{A66F}\x{A670}-\x{A672}\x{A674}-\x{A67D}\x{A67F}\x{A69C}-\x{A69D}\x{A69E}-\x{A69F}\x{A6F0}-\x{A6F1}\x{A700}-\x{A716}\x{A717}-\x{A71F}\x{A720}-\x{A721}\x{A770}\x{A788}\x{A789}-\x{A78A}\x{A7F8}-\x{A7F9}\x{A802}\x{A806}\x{A80B}\x{A825}-\x{A826}\x{A8C4}-\x{A8C5}\x{A8E0}-\x{A8F1}\x{A8FF}\x{A926}-\x{A92D}\x{A947}-\x{A951}\x{A980}-\x{A982}\x{A9B3}\x{A9B6}-\x{A9B9}\x{A9BC}\x{A9CF}\x{A9E5}\x{A9E6}\x{AA29}-\x{AA2E}\x{AA31}-\x{AA32}\x{AA35}-\x{AA36}\x{AA43}\x{AA4C}\x{AA70}\x{AA7C}\x{AAB0}\x{AAB2}-\x{AAB4}\x{AAB7}-\x{AAB8}\x{AABE}-\x{AABF}\x{AAC1}\x{AADD}\x{AAEC}-\x{AAED}\x{AAF3}-\x{AAF4}\x{AAF6}\x{AB5B}\x{AB5C}-\x{AB5F}\x{ABE5}\x{ABE8}\x{ABED}\x{FB1E}\x{FBB2}-\x{FBC1}\x{FE00}-\x{FE0F}\x{FE13}\x{FE20}-\x{FE2F}\x{FE52}\x{FE55}\x{FEFF}\x{FF07}\x{FF0E}\x{FF1A}\x{FF3E}\x{FF40}\x{FF70}\x{FF9E}-\x{FF9F}\x{FFE3}\x{FFF9}-\x{FFFB}\x{101FD}\x{102E0}\x{10376}-\x{1037A}\x{10A01}-\x{10A03}\x{10A05}-\x{10A06}\x{10A0C}-\x{10A0F}\x{10A38}-\x{10A3A}\x{10A3F}\x{10AE5}-\x{10AE6}\x{10D24}-\x{10D27}\x{10F46}-\x{10F50}\x{11001}\x{11038}-\x{11046}\x{1107F}-\x{11081}\x{110B3}-\x{110B6}\x{110B9}-\x{110BA}\x{110BD}\x{110CD}\x{11100}-\x{11102}\x{11127}-\x{1112B}\x{1112D}-\x{11134}\x{11173}\x{11180}-\x{11181}\x{111B6}-\x{111BE}\x{111C9}-\x{111CC}\x{1122F}-\x{11231}\x{11234}\x{11236}-\x{11237}\x{1123E}\x{112DF}\x{112E3}-\x{112EA}\x{11300}-\x{11301}\x{1133B}-\x{1133C}\x{11340}\x{11366}-\x{1136C}\x{11370}-\x{11374}\x{11438}-\x{1143F}\x{11442}-\x{11444}\x{11446}\x{1145E}\x{114B3}-\x{114B8}\x{114BA}\x{114BF}-\x{114C0}\x{114C2}-\x{114C3}\x{115B2}-\x{115B5}\x{115BC}-\x{115BD}\x{115BF}-\x{115C0}\x{115DC}-\x{115DD}\x{11633}-\x{1163A}\x{1163D}\x{1163F}-\x{11640}\x{116AB}\x{116AD}\x{116B0}-\x{116B5}\x{116B7}\x{1171D}-\x{1171F}\x{11722}-\x{11725}\x{11727}-\x{1172B}\x{1182F}-\x{11837}\x{11839}-\x{1183A}\x{11A01}-\x{11A0A}\x{11A33}-\x{11A38}\x{11A3B}-\x{11A3E}\x{11A47}\x{11A51}-\x{11A56}\x{11A59}-\x{11A5B}\x{11A8A}-\x{11A96}\x{11A98}-\x{11A99}\x{11C30}-\x{11C36}\x{11C38}-\x{11C3D}\x{11C3F}\x{11C92}-\x{11CA7}\x{11CAA}-\x{11CB0}\x{11CB2}-\x{11CB3}\x{11CB5}-\x{11CB6}\x{11D31}-\x{11D36}\x{11D3A}\x{11D3C}-\x{11D3D}\x{11D3F}-\x{11D45}\x{11D47}\x{11D90}-\x{11D91}\x{11D95}\x{11D97}\x{11EF3}-\x{11EF4}\x{16AF0}-\x{16AF4}\x{16B30}-\x{16B36}\x{16B40}-\x{16B43}\x{16F8F}-\x{16F92}\x{16F93}-\x{16F9F}\x{16FE0}-\x{16FE1}\x{1BC9D}-\x{1BC9E}\x{1BCA0}-\x{1BCA3}\x{1D167}-\x{1D169}\x{1D173}-\x{1D17A}\x{1D17B}-\x{1D182}\x{1D185}-\x{1D18B}\x{1D1AA}-\x{1D1AD}\x{1D242}-\x{1D244}\x{1DA00}-\x{1DA36}\x{1DA3B}-\x{1DA6C}\x{1DA75}\x{1DA84}\x{1DA9B}-\x{1DA9F}\x{1DAA1}-\x{1DAAF}\x{1E000}-\x{1E006}\x{1E008}-\x{1E018}\x{1E01B}-\x{1E021}\x{1E023}-\x{1E024}\x{1E026}-\x{1E02A}\x{1E8D0}-\x{1E8D6}\x{1E944}-\x{1E94A}\x{1F3FB}-\x{1F3FF}\x{E0001}\x{E0020}-\x{E007F}\x{E0100}-\x{E01EF}])(\pL)(\pL*+)/u';
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/upperCase.php b/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/upperCase.php
deleted file mode 100644
index 56b9cb8..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/Resources/unidata/upperCase.php
+++ /dev/null
@@ -1,1489 +0,0 @@
-<?php
-
-return array (
-  'a' => 'A',
-  'b' => 'B',
-  'c' => 'C',
-  'd' => 'D',
-  'e' => 'E',
-  'f' => 'F',
-  'g' => 'G',
-  'h' => 'H',
-  'i' => 'I',
-  'j' => 'J',
-  'k' => 'K',
-  'l' => 'L',
-  'm' => 'M',
-  'n' => 'N',
-  'o' => 'O',
-  'p' => 'P',
-  'q' => 'Q',
-  'r' => 'R',
-  's' => 'S',
-  't' => 'T',
-  'u' => 'U',
-  'v' => 'V',
-  'w' => 'W',
-  'x' => 'X',
-  'y' => 'Y',
-  'z' => 'Z',
-  'µ' => 'Μ',
-  'à' => 'À',
-  'á' => 'Á',
-  'â' => 'Â',
-  'ã' => 'Ã',
-  'ä' => 'Ä',
-  'å' => 'Å',
-  'æ' => 'Æ',
-  'ç' => 'Ç',
-  'è' => 'È',
-  'é' => 'É',
-  'ê' => 'Ê',
-  'ë' => 'Ë',
-  'ì' => 'Ì',
-  'í' => 'Í',
-  'î' => 'Î',
-  'ï' => 'Ï',
-  'ð' => 'Ð',
-  'ñ' => 'Ñ',
-  'ò' => 'Ò',
-  'ó' => 'Ó',
-  'ô' => 'Ô',
-  'õ' => 'Õ',
-  'ö' => 'Ö',
-  'ø' => 'Ø',
-  'ù' => 'Ù',
-  'ú' => 'Ú',
-  'û' => 'Û',
-  'ü' => 'Ü',
-  'ý' => 'Ý',
-  'þ' => 'Þ',
-  'ÿ' => 'Ÿ',
-  'ā' => 'Ā',
-  'ă' => 'Ă',
-  'ą' => 'Ą',
-  'ć' => 'Ć',
-  'ĉ' => 'Ĉ',
-  'ċ' => 'Ċ',
-  'č' => 'Č',
-  'ď' => 'Ď',
-  'đ' => 'Đ',
-  'ē' => 'Ē',
-  'ĕ' => 'Ĕ',
-  'ė' => 'Ė',
-  'ę' => 'Ę',
-  'ě' => 'Ě',
-  'ĝ' => 'Ĝ',
-  'ğ' => 'Ğ',
-  'ġ' => 'Ġ',
-  'ģ' => 'Ģ',
-  'ĥ' => 'Ĥ',
-  'ħ' => 'Ħ',
-  'ĩ' => 'Ĩ',
-  'ī' => 'Ī',
-  'ĭ' => 'Ĭ',
-  'į' => 'Į',
-  'ı' => 'I',
-  'ij' => 'IJ',
-  'ĵ' => 'Ĵ',
-  'ķ' => 'Ķ',
-  'ĺ' => 'Ĺ',
-  'ļ' => 'Ļ',
-  'ľ' => 'Ľ',
-  'ŀ' => 'Ŀ',
-  'ł' => 'Ł',
-  'ń' => 'Ń',
-  'ņ' => 'Ņ',
-  'ň' => 'Ň',
-  'ŋ' => 'Ŋ',
-  'ō' => 'Ō',
-  'ŏ' => 'Ŏ',
-  'ő' => 'Ő',
-  'œ' => 'Œ',
-  'ŕ' => 'Ŕ',
-  'ŗ' => 'Ŗ',
-  'ř' => 'Ř',
-  'ś' => 'Ś',
-  'ŝ' => 'Ŝ',
-  'ş' => 'Ş',
-  'š' => 'Š',
-  'ţ' => 'Ţ',
-  'ť' => 'Ť',
-  'ŧ' => 'Ŧ',
-  'ũ' => 'Ũ',
-  'ū' => 'Ū',
-  'ŭ' => 'Ŭ',
-  'ů' => 'Ů',
-  'ű' => 'Ű',
-  'ų' => 'Ų',
-  'ŵ' => 'Ŵ',
-  'ŷ' => 'Ŷ',
-  'ź' => 'Ź',
-  'ż' => 'Ż',
-  'ž' => 'Ž',
-  'ſ' => 'S',
-  'ƀ' => 'Ƀ',
-  'ƃ' => 'Ƃ',
-  'ƅ' => 'Ƅ',
-  'ƈ' => 'Ƈ',
-  'ƌ' => 'Ƌ',
-  'ƒ' => 'Ƒ',
-  'ƕ' => 'Ƕ',
-  'ƙ' => 'Ƙ',
-  'ƚ' => 'Ƚ',
-  'ƞ' => 'Ƞ',
-  'ơ' => 'Ơ',
-  'ƣ' => 'Ƣ',
-  'ƥ' => 'Ƥ',
-  'ƨ' => 'Ƨ',
-  'ƭ' => 'Ƭ',
-  'ư' => 'Ư',
-  'ƴ' => 'Ƴ',
-  'ƶ' => 'Ƶ',
-  'ƹ' => 'Ƹ',
-  'ƽ' => 'Ƽ',
-  'ƿ' => 'Ƿ',
-  'Dž' => 'DŽ',
-  'dž' => 'DŽ',
-  'Lj' => 'LJ',
-  'lj' => 'LJ',
-  'Nj' => 'NJ',
-  'nj' => 'NJ',
-  'ǎ' => 'Ǎ',
-  'ǐ' => 'Ǐ',
-  'ǒ' => 'Ǒ',
-  'ǔ' => 'Ǔ',
-  'ǖ' => 'Ǖ',
-  'ǘ' => 'Ǘ',
-  'ǚ' => 'Ǚ',
-  'ǜ' => 'Ǜ',
-  'ǝ' => 'Ǝ',
-  'ǟ' => 'Ǟ',
-  'ǡ' => 'Ǡ',
-  'ǣ' => 'Ǣ',
-  'ǥ' => 'Ǥ',
-  'ǧ' => 'Ǧ',
-  'ǩ' => 'Ǩ',
-  'ǫ' => 'Ǫ',
-  'ǭ' => 'Ǭ',
-  'ǯ' => 'Ǯ',
-  'Dz' => 'DZ',
-  'dz' => 'DZ',
-  'ǵ' => 'Ǵ',
-  'ǹ' => 'Ǹ',
-  'ǻ' => 'Ǻ',
-  'ǽ' => 'Ǽ',
-  'ǿ' => 'Ǿ',
-  'ȁ' => 'Ȁ',
-  'ȃ' => 'Ȃ',
-  'ȅ' => 'Ȅ',
-  'ȇ' => 'Ȇ',
-  'ȉ' => 'Ȉ',
-  'ȋ' => 'Ȋ',
-  'ȍ' => 'Ȍ',
-  'ȏ' => 'Ȏ',
-  'ȑ' => 'Ȑ',
-  'ȓ' => 'Ȓ',
-  'ȕ' => 'Ȕ',
-  'ȗ' => 'Ȗ',
-  'ș' => 'Ș',
-  'ț' => 'Ț',
-  'ȝ' => 'Ȝ',
-  'ȟ' => 'Ȟ',
-  'ȣ' => 'Ȣ',
-  'ȥ' => 'Ȥ',
-  'ȧ' => 'Ȧ',
-  'ȩ' => 'Ȩ',
-  'ȫ' => 'Ȫ',
-  'ȭ' => 'Ȭ',
-  'ȯ' => 'Ȯ',
-  'ȱ' => 'Ȱ',
-  'ȳ' => 'Ȳ',
-  'ȼ' => 'Ȼ',
-  'ȿ' => 'Ȿ',
-  'ɀ' => 'Ɀ',
-  'ɂ' => 'Ɂ',
-  'ɇ' => 'Ɇ',
-  'ɉ' => 'Ɉ',
-  'ɋ' => 'Ɋ',
-  'ɍ' => 'Ɍ',
-  'ɏ' => 'Ɏ',
-  'ɐ' => 'Ɐ',
-  'ɑ' => 'Ɑ',
-  'ɒ' => 'Ɒ',
-  'ɓ' => 'Ɓ',
-  'ɔ' => 'Ɔ',
-  'ɖ' => 'Ɖ',
-  'ɗ' => 'Ɗ',
-  'ə' => 'Ə',
-  'ɛ' => 'Ɛ',
-  'ɜ' => 'Ɜ',
-  'ɠ' => 'Ɠ',
-  'ɡ' => 'Ɡ',
-  'ɣ' => 'Ɣ',
-  'ɥ' => 'Ɥ',
-  'ɦ' => 'Ɦ',
-  'ɨ' => 'Ɨ',
-  'ɩ' => 'Ɩ',
-  'ɪ' => 'Ɪ',
-  'ɫ' => 'Ɫ',
-  'ɬ' => 'Ɬ',
-  'ɯ' => 'Ɯ',
-  'ɱ' => 'Ɱ',
-  'ɲ' => 'Ɲ',
-  'ɵ' => 'Ɵ',
-  'ɽ' => 'Ɽ',
-  'ʀ' => 'Ʀ',
-  'ʂ' => 'Ʂ',
-  'ʃ' => 'Ʃ',
-  'ʇ' => 'Ʇ',
-  'ʈ' => 'Ʈ',
-  'ʉ' => 'Ʉ',
-  'ʊ' => 'Ʊ',
-  'ʋ' => 'Ʋ',
-  'ʌ' => 'Ʌ',
-  'ʒ' => 'Ʒ',
-  'ʝ' => 'Ʝ',
-  'ʞ' => 'Ʞ',
-  'ͅ' => 'Ι',
-  'ͱ' => 'Ͱ',
-  'ͳ' => 'Ͳ',
-  'ͷ' => 'Ͷ',
-  'ͻ' => 'Ͻ',
-  'ͼ' => 'Ͼ',
-  'ͽ' => 'Ͽ',
-  'ά' => 'Ά',
-  'έ' => 'Έ',
-  'ή' => 'Ή',
-  'ί' => 'Ί',
-  'α' => 'Α',
-  'β' => 'Β',
-  'γ' => 'Γ',
-  'δ' => 'Δ',
-  'ε' => 'Ε',
-  'ζ' => 'Ζ',
-  'η' => 'Η',
-  'θ' => 'Θ',
-  'ι' => 'Ι',
-  'κ' => 'Κ',
-  'λ' => 'Λ',
-  'μ' => 'Μ',
-  'ν' => 'Ν',
-  'ξ' => 'Ξ',
-  'ο' => 'Ο',
-  'π' => 'Π',
-  'ρ' => 'Ρ',
-  'ς' => 'Σ',
-  'σ' => 'Σ',
-  'τ' => 'Τ',
-  'υ' => 'Υ',
-  'φ' => 'Φ',
-  'χ' => 'Χ',
-  'ψ' => 'Ψ',
-  'ω' => 'Ω',
-  'ϊ' => 'Ϊ',
-  'ϋ' => 'Ϋ',
-  'ό' => 'Ό',
-  'ύ' => 'Ύ',
-  'ώ' => 'Ώ',
-  'ϐ' => 'Β',
-  'ϑ' => 'Θ',
-  'ϕ' => 'Φ',
-  'ϖ' => 'Π',
-  'ϗ' => 'Ϗ',
-  'ϙ' => 'Ϙ',
-  'ϛ' => 'Ϛ',
-  'ϝ' => 'Ϝ',
-  'ϟ' => 'Ϟ',
-  'ϡ' => 'Ϡ',
-  'ϣ' => 'Ϣ',
-  'ϥ' => 'Ϥ',
-  'ϧ' => 'Ϧ',
-  'ϩ' => 'Ϩ',
-  'ϫ' => 'Ϫ',
-  'ϭ' => 'Ϭ',
-  'ϯ' => 'Ϯ',
-  'ϰ' => 'Κ',
-  'ϱ' => 'Ρ',
-  'ϲ' => 'Ϲ',
-  'ϳ' => 'Ϳ',
-  'ϵ' => 'Ε',
-  'ϸ' => 'Ϸ',
-  'ϻ' => 'Ϻ',
-  'а' => 'А',
-  'б' => 'Б',
-  'в' => 'В',
-  'г' => 'Г',
-  'д' => 'Д',
-  'е' => 'Е',
-  'ж' => 'Ж',
-  'з' => 'З',
-  'и' => 'И',
-  'й' => 'Й',
-  'к' => 'К',
-  'л' => 'Л',
-  'м' => 'М',
-  'н' => 'Н',
-  'о' => 'О',
-  'п' => 'П',
-  'р' => 'Р',
-  'с' => 'С',
-  'т' => 'Т',
-  'у' => 'У',
-  'ф' => 'Ф',
-  'х' => 'Х',
-  'ц' => 'Ц',
-  'ч' => 'Ч',
-  'ш' => 'Ш',
-  'щ' => 'Щ',
-  'ъ' => 'Ъ',
-  'ы' => 'Ы',
-  'ь' => 'Ь',
-  'э' => 'Э',
-  'ю' => 'Ю',
-  'я' => 'Я',
-  'ѐ' => 'Ѐ',
-  'ё' => 'Ё',
-  'ђ' => 'Ђ',
-  'ѓ' => 'Ѓ',
-  'є' => 'Є',
-  'ѕ' => 'Ѕ',
-  'і' => 'І',
-  'ї' => 'Ї',
-  'ј' => 'Ј',
-  'љ' => 'Љ',
-  'њ' => 'Њ',
-  'ћ' => 'Ћ',
-  'ќ' => 'Ќ',
-  'ѝ' => 'Ѝ',
-  'ў' => 'Ў',
-  'џ' => 'Џ',
-  'ѡ' => 'Ѡ',
-  'ѣ' => 'Ѣ',
-  'ѥ' => 'Ѥ',
-  'ѧ' => 'Ѧ',
-  'ѩ' => 'Ѩ',
-  'ѫ' => 'Ѫ',
-  'ѭ' => 'Ѭ',
-  'ѯ' => 'Ѯ',
-  'ѱ' => 'Ѱ',
-  'ѳ' => 'Ѳ',
-  'ѵ' => 'Ѵ',
-  'ѷ' => 'Ѷ',
-  'ѹ' => 'Ѹ',
-  'ѻ' => 'Ѻ',
-  'ѽ' => 'Ѽ',
-  'ѿ' => 'Ѿ',
-  'ҁ' => 'Ҁ',
-  'ҋ' => 'Ҋ',
-  'ҍ' => 'Ҍ',
-  'ҏ' => 'Ҏ',
-  'ґ' => 'Ґ',
-  'ғ' => 'Ғ',
-  'ҕ' => 'Ҕ',
-  'җ' => 'Җ',
-  'ҙ' => 'Ҙ',
-  'қ' => 'Қ',
-  'ҝ' => 'Ҝ',
-  'ҟ' => 'Ҟ',
-  'ҡ' => 'Ҡ',
-  'ң' => 'Ң',
-  'ҥ' => 'Ҥ',
-  'ҧ' => 'Ҧ',
-  'ҩ' => 'Ҩ',
-  'ҫ' => 'Ҫ',
-  'ҭ' => 'Ҭ',
-  'ү' => 'Ү',
-  'ұ' => 'Ұ',
-  'ҳ' => 'Ҳ',
-  'ҵ' => 'Ҵ',
-  'ҷ' => 'Ҷ',
-  'ҹ' => 'Ҹ',
-  'һ' => 'Һ',
-  'ҽ' => 'Ҽ',
-  'ҿ' => 'Ҿ',
-  'ӂ' => 'Ӂ',
-  'ӄ' => 'Ӄ',
-  'ӆ' => 'Ӆ',
-  'ӈ' => 'Ӈ',
-  'ӊ' => 'Ӊ',
-  'ӌ' => 'Ӌ',
-  'ӎ' => 'Ӎ',
-  'ӏ' => 'Ӏ',
-  'ӑ' => 'Ӑ',
-  'ӓ' => 'Ӓ',
-  'ӕ' => 'Ӕ',
-  'ӗ' => 'Ӗ',
-  'ә' => 'Ә',
-  'ӛ' => 'Ӛ',
-  'ӝ' => 'Ӝ',
-  'ӟ' => 'Ӟ',
-  'ӡ' => 'Ӡ',
-  'ӣ' => 'Ӣ',
-  'ӥ' => 'Ӥ',
-  'ӧ' => 'Ӧ',
-  'ө' => 'Ө',
-  'ӫ' => 'Ӫ',
-  'ӭ' => 'Ӭ',
-  'ӯ' => 'Ӯ',
-  'ӱ' => 'Ӱ',
-  'ӳ' => 'Ӳ',
-  'ӵ' => 'Ӵ',
-  'ӷ' => 'Ӷ',
-  'ӹ' => 'Ӹ',
-  'ӻ' => 'Ӻ',
-  'ӽ' => 'Ӽ',
-  'ӿ' => 'Ӿ',
-  'ԁ' => 'Ԁ',
-  'ԃ' => 'Ԃ',
-  'ԅ' => 'Ԅ',
-  'ԇ' => 'Ԇ',
-  'ԉ' => 'Ԉ',
-  'ԋ' => 'Ԋ',
-  'ԍ' => 'Ԍ',
-  'ԏ' => 'Ԏ',
-  'ԑ' => 'Ԑ',
-  'ԓ' => 'Ԓ',
-  'ԕ' => 'Ԕ',
-  'ԗ' => 'Ԗ',
-  'ԙ' => 'Ԙ',
-  'ԛ' => 'Ԛ',
-  'ԝ' => 'Ԝ',
-  'ԟ' => 'Ԟ',
-  'ԡ' => 'Ԡ',
-  'ԣ' => 'Ԣ',
-  'ԥ' => 'Ԥ',
-  'ԧ' => 'Ԧ',
-  'ԩ' => 'Ԩ',
-  'ԫ' => 'Ԫ',
-  'ԭ' => 'Ԭ',
-  'ԯ' => 'Ԯ',
-  'ա' => 'Ա',
-  'բ' => 'Բ',
-  'գ' => 'Գ',
-  'դ' => 'Դ',
-  'ե' => 'Ե',
-  'զ' => 'Զ',
-  'է' => 'Է',
-  'ը' => 'Ը',
-  'թ' => 'Թ',
-  'ժ' => 'Ժ',
-  'ի' => 'Ի',
-  'լ' => 'Լ',
-  'խ' => 'Խ',
-  'ծ' => 'Ծ',
-  'կ' => 'Կ',
-  'հ' => 'Հ',
-  'ձ' => 'Ձ',
-  'ղ' => 'Ղ',
-  'ճ' => 'Ճ',
-  'մ' => 'Մ',
-  'յ' => 'Յ',
-  'ն' => 'Ն',
-  'շ' => 'Շ',
-  'ո' => 'Ո',
-  'չ' => 'Չ',
-  'պ' => 'Պ',
-  'ջ' => 'Ջ',
-  'ռ' => 'Ռ',
-  'ս' => 'Ս',
-  'վ' => 'Վ',
-  'տ' => 'Տ',
-  'ր' => 'Ր',
-  'ց' => 'Ց',
-  'ւ' => 'Ւ',
-  'փ' => 'Փ',
-  'ք' => 'Ք',
-  'օ' => 'Օ',
-  'ֆ' => 'Ֆ',
-  'ა' => 'Ა',
-  'ბ' => 'Ბ',
-  'გ' => 'Გ',
-  'დ' => 'Დ',
-  'ე' => 'Ე',
-  'ვ' => 'Ვ',
-  'ზ' => 'Ზ',
-  'თ' => 'Თ',
-  'ი' => 'Ი',
-  'კ' => 'Კ',
-  'ლ' => 'Ლ',
-  'მ' => 'Მ',
-  'ნ' => 'Ნ',
-  'ო' => 'Ო',
-  'პ' => 'Პ',
-  'ჟ' => 'Ჟ',
-  'რ' => 'Რ',
-  'ს' => 'Ს',
-  'ტ' => 'Ტ',
-  'უ' => 'Უ',
-  'ფ' => 'Ფ',
-  'ქ' => 'Ქ',
-  'ღ' => 'Ღ',
-  'ყ' => 'Ყ',
-  'შ' => 'Შ',
-  'ჩ' => 'Ჩ',
-  'ც' => 'Ც',
-  'ძ' => 'Ძ',
-  'წ' => 'Წ',
-  'ჭ' => 'Ჭ',
-  'ხ' => 'Ხ',
-  'ჯ' => 'Ჯ',
-  'ჰ' => 'Ჰ',
-  'ჱ' => 'Ჱ',
-  'ჲ' => 'Ჲ',
-  'ჳ' => 'Ჳ',
-  'ჴ' => 'Ჴ',
-  'ჵ' => 'Ჵ',
-  'ჶ' => 'Ჶ',
-  'ჷ' => 'Ჷ',
-  'ჸ' => 'Ჸ',
-  'ჹ' => 'Ჹ',
-  'ჺ' => 'Ჺ',
-  'ჽ' => 'Ჽ',
-  'ჾ' => 'Ჾ',
-  'ჿ' => 'Ჿ',
-  'ᏸ' => 'Ᏸ',
-  'ᏹ' => 'Ᏹ',
-  'ᏺ' => 'Ᏺ',
-  'ᏻ' => 'Ᏻ',
-  'ᏼ' => 'Ᏼ',
-  'ᏽ' => 'Ᏽ',
-  'ᲀ' => 'В',
-  'ᲁ' => 'Д',
-  'ᲂ' => 'О',
-  'ᲃ' => 'С',
-  'ᲄ' => 'Т',
-  'ᲅ' => 'Т',
-  'ᲆ' => 'Ъ',
-  'ᲇ' => 'Ѣ',
-  'ᲈ' => 'Ꙋ',
-  'ᵹ' => 'Ᵹ',
-  'ᵽ' => 'Ᵽ',
-  'ᶎ' => 'Ᶎ',
-  'ḁ' => 'Ḁ',
-  'ḃ' => 'Ḃ',
-  'ḅ' => 'Ḅ',
-  'ḇ' => 'Ḇ',
-  'ḉ' => 'Ḉ',
-  'ḋ' => 'Ḋ',
-  'ḍ' => 'Ḍ',
-  'ḏ' => 'Ḏ',
-  'ḑ' => 'Ḑ',
-  'ḓ' => 'Ḓ',
-  'ḕ' => 'Ḕ',
-  'ḗ' => 'Ḗ',
-  'ḙ' => 'Ḙ',
-  'ḛ' => 'Ḛ',
-  'ḝ' => 'Ḝ',
-  'ḟ' => 'Ḟ',
-  'ḡ' => 'Ḡ',
-  'ḣ' => 'Ḣ',
-  'ḥ' => 'Ḥ',
-  'ḧ' => 'Ḧ',
-  'ḩ' => 'Ḩ',
-  'ḫ' => 'Ḫ',
-  'ḭ' => 'Ḭ',
-  'ḯ' => 'Ḯ',
-  'ḱ' => 'Ḱ',
-  'ḳ' => 'Ḳ',
-  'ḵ' => 'Ḵ',
-  'ḷ' => 'Ḷ',
-  'ḹ' => 'Ḹ',
-  'ḻ' => 'Ḻ',
-  'ḽ' => 'Ḽ',
-  'ḿ' => 'Ḿ',
-  'ṁ' => 'Ṁ',
-  'ṃ' => 'Ṃ',
-  'ṅ' => 'Ṅ',
-  'ṇ' => 'Ṇ',
-  'ṉ' => 'Ṉ',
-  'ṋ' => 'Ṋ',
-  'ṍ' => 'Ṍ',
-  'ṏ' => 'Ṏ',
-  'ṑ' => 'Ṑ',
-  'ṓ' => 'Ṓ',
-  'ṕ' => 'Ṕ',
-  'ṗ' => 'Ṗ',
-  'ṙ' => 'Ṙ',
-  'ṛ' => 'Ṛ',
-  'ṝ' => 'Ṝ',
-  'ṟ' => 'Ṟ',
-  'ṡ' => 'Ṡ',
-  'ṣ' => 'Ṣ',
-  'ṥ' => 'Ṥ',
-  'ṧ' => 'Ṧ',
-  'ṩ' => 'Ṩ',
-  'ṫ' => 'Ṫ',
-  'ṭ' => 'Ṭ',
-  'ṯ' => 'Ṯ',
-  'ṱ' => 'Ṱ',
-  'ṳ' => 'Ṳ',
-  'ṵ' => 'Ṵ',
-  'ṷ' => 'Ṷ',
-  'ṹ' => 'Ṹ',
-  'ṻ' => 'Ṻ',
-  'ṽ' => 'Ṽ',
-  'ṿ' => 'Ṿ',
-  'ẁ' => 'Ẁ',
-  'ẃ' => 'Ẃ',
-  'ẅ' => 'Ẅ',
-  'ẇ' => 'Ẇ',
-  'ẉ' => 'Ẉ',
-  'ẋ' => 'Ẋ',
-  'ẍ' => 'Ẍ',
-  'ẏ' => 'Ẏ',
-  'ẑ' => 'Ẑ',
-  'ẓ' => 'Ẓ',
-  'ẕ' => 'Ẕ',
-  'ẛ' => 'Ṡ',
-  'ạ' => 'Ạ',
-  'ả' => 'Ả',
-  'ấ' => 'Ấ',
-  'ầ' => 'Ầ',
-  'ẩ' => 'Ẩ',
-  'ẫ' => 'Ẫ',
-  'ậ' => 'Ậ',
-  'ắ' => 'Ắ',
-  'ằ' => 'Ằ',
-  'ẳ' => 'Ẳ',
-  'ẵ' => 'Ẵ',
-  'ặ' => 'Ặ',
-  'ẹ' => 'Ẹ',
-  'ẻ' => 'Ẻ',
-  'ẽ' => 'Ẽ',
-  'ế' => 'Ế',
-  'ề' => 'Ề',
-  'ể' => 'Ể',
-  'ễ' => 'Ễ',
-  'ệ' => 'Ệ',
-  'ỉ' => 'Ỉ',
-  'ị' => 'Ị',
-  'ọ' => 'Ọ',
-  'ỏ' => 'Ỏ',
-  'ố' => 'Ố',
-  'ồ' => 'Ồ',
-  'ổ' => 'Ổ',
-  'ỗ' => 'Ỗ',
-  'ộ' => 'Ộ',
-  'ớ' => 'Ớ',
-  'ờ' => 'Ờ',
-  'ở' => 'Ở',
-  'ỡ' => 'Ỡ',
-  'ợ' => 'Ợ',
-  'ụ' => 'Ụ',
-  'ủ' => 'Ủ',
-  'ứ' => 'Ứ',
-  'ừ' => 'Ừ',
-  'ử' => 'Ử',
-  'ữ' => 'Ữ',
-  'ự' => 'Ự',
-  'ỳ' => 'Ỳ',
-  'ỵ' => 'Ỵ',
-  'ỷ' => 'Ỷ',
-  'ỹ' => 'Ỹ',
-  'ỻ' => 'Ỻ',
-  'ỽ' => 'Ỽ',
-  'ỿ' => 'Ỿ',
-  'ἀ' => 'Ἀ',
-  'ἁ' => 'Ἁ',
-  'ἂ' => 'Ἂ',
-  'ἃ' => 'Ἃ',
-  'ἄ' => 'Ἄ',
-  'ἅ' => 'Ἅ',
-  'ἆ' => 'Ἆ',
-  'ἇ' => 'Ἇ',
-  'ἐ' => 'Ἐ',
-  'ἑ' => 'Ἑ',
-  'ἒ' => 'Ἒ',
-  'ἓ' => 'Ἓ',
-  'ἔ' => 'Ἔ',
-  'ἕ' => 'Ἕ',
-  'ἠ' => 'Ἠ',
-  'ἡ' => 'Ἡ',
-  'ἢ' => 'Ἢ',
-  'ἣ' => 'Ἣ',
-  'ἤ' => 'Ἤ',
-  'ἥ' => 'Ἥ',
-  'ἦ' => 'Ἦ',
-  'ἧ' => 'Ἧ',
-  'ἰ' => 'Ἰ',
-  'ἱ' => 'Ἱ',
-  'ἲ' => 'Ἲ',
-  'ἳ' => 'Ἳ',
-  'ἴ' => 'Ἴ',
-  'ἵ' => 'Ἵ',
-  'ἶ' => 'Ἶ',
-  'ἷ' => 'Ἷ',
-  'ὀ' => 'Ὀ',
-  'ὁ' => 'Ὁ',
-  'ὂ' => 'Ὂ',
-  'ὃ' => 'Ὃ',
-  'ὄ' => 'Ὄ',
-  'ὅ' => 'Ὅ',
-  'ὑ' => 'Ὑ',
-  'ὓ' => 'Ὓ',
-  'ὕ' => 'Ὕ',
-  'ὗ' => 'Ὗ',
-  'ὠ' => 'Ὠ',
-  'ὡ' => 'Ὡ',
-  'ὢ' => 'Ὢ',
-  'ὣ' => 'Ὣ',
-  'ὤ' => 'Ὤ',
-  'ὥ' => 'Ὥ',
-  'ὦ' => 'Ὦ',
-  'ὧ' => 'Ὧ',
-  'ὰ' => 'Ὰ',
-  'ά' => 'Ά',
-  'ὲ' => 'Ὲ',
-  'έ' => 'Έ',
-  'ὴ' => 'Ὴ',
-  'ή' => 'Ή',
-  'ὶ' => 'Ὶ',
-  'ί' => 'Ί',
-  'ὸ' => 'Ὸ',
-  'ό' => 'Ό',
-  'ὺ' => 'Ὺ',
-  'ύ' => 'Ύ',
-  'ὼ' => 'Ὼ',
-  'ώ' => 'Ώ',
-  'ᾀ' => 'ἈΙ',
-  'ᾁ' => 'ἉΙ',
-  'ᾂ' => 'ἊΙ',
-  'ᾃ' => 'ἋΙ',
-  'ᾄ' => 'ἌΙ',
-  'ᾅ' => 'ἍΙ',
-  'ᾆ' => 'ἎΙ',
-  'ᾇ' => 'ἏΙ',
-  'ᾐ' => 'ἨΙ',
-  'ᾑ' => 'ἩΙ',
-  'ᾒ' => 'ἪΙ',
-  'ᾓ' => 'ἫΙ',
-  'ᾔ' => 'ἬΙ',
-  'ᾕ' => 'ἭΙ',
-  'ᾖ' => 'ἮΙ',
-  'ᾗ' => 'ἯΙ',
-  'ᾠ' => 'ὨΙ',
-  'ᾡ' => 'ὩΙ',
-  'ᾢ' => 'ὪΙ',
-  'ᾣ' => 'ὫΙ',
-  'ᾤ' => 'ὬΙ',
-  'ᾥ' => 'ὭΙ',
-  'ᾦ' => 'ὮΙ',
-  'ᾧ' => 'ὯΙ',
-  'ᾰ' => 'Ᾰ',
-  'ᾱ' => 'Ᾱ',
-  'ᾳ' => 'ΑΙ',
-  'ι' => 'Ι',
-  'ῃ' => 'ΗΙ',
-  'ῐ' => 'Ῐ',
-  'ῑ' => 'Ῑ',
-  'ῠ' => 'Ῠ',
-  'ῡ' => 'Ῡ',
-  'ῥ' => 'Ῥ',
-  'ῳ' => 'ΩΙ',
-  'ⅎ' => 'Ⅎ',
-  'ⅰ' => 'Ⅰ',
-  'ⅱ' => 'Ⅱ',
-  'ⅲ' => 'Ⅲ',
-  'ⅳ' => 'Ⅳ',
-  'ⅴ' => 'Ⅴ',
-  'ⅵ' => 'Ⅵ',
-  'ⅶ' => 'Ⅶ',
-  'ⅷ' => 'Ⅷ',
-  'ⅸ' => 'Ⅸ',
-  'ⅹ' => 'Ⅹ',
-  'ⅺ' => 'Ⅺ',
-  'ⅻ' => 'Ⅻ',
-  'ⅼ' => 'Ⅼ',
-  'ⅽ' => 'Ⅽ',
-  'ⅾ' => 'Ⅾ',
-  'ⅿ' => 'Ⅿ',
-  'ↄ' => 'Ↄ',
-  'ⓐ' => 'Ⓐ',
-  'ⓑ' => 'Ⓑ',
-  'ⓒ' => 'Ⓒ',
-  'ⓓ' => 'Ⓓ',
-  'ⓔ' => 'Ⓔ',
-  'ⓕ' => 'Ⓕ',
-  'ⓖ' => 'Ⓖ',
-  'ⓗ' => 'Ⓗ',
-  'ⓘ' => 'Ⓘ',
-  'ⓙ' => 'Ⓙ',
-  'ⓚ' => 'Ⓚ',
-  'ⓛ' => 'Ⓛ',
-  'ⓜ' => 'Ⓜ',
-  'ⓝ' => 'Ⓝ',
-  'ⓞ' => 'Ⓞ',
-  'ⓟ' => 'Ⓟ',
-  'ⓠ' => 'Ⓠ',
-  'ⓡ' => 'Ⓡ',
-  'ⓢ' => 'Ⓢ',
-  'ⓣ' => 'Ⓣ',
-  'ⓤ' => 'Ⓤ',
-  'ⓥ' => 'Ⓥ',
-  'ⓦ' => 'Ⓦ',
-  'ⓧ' => 'Ⓧ',
-  'ⓨ' => 'Ⓨ',
-  'ⓩ' => 'Ⓩ',
-  'ⰰ' => 'Ⰰ',
-  'ⰱ' => 'Ⰱ',
-  'ⰲ' => 'Ⰲ',
-  'ⰳ' => 'Ⰳ',
-  'ⰴ' => 'Ⰴ',
-  'ⰵ' => 'Ⰵ',
-  'ⰶ' => 'Ⰶ',
-  'ⰷ' => 'Ⰷ',
-  'ⰸ' => 'Ⰸ',
-  'ⰹ' => 'Ⰹ',
-  'ⰺ' => 'Ⰺ',
-  'ⰻ' => 'Ⰻ',
-  'ⰼ' => 'Ⰼ',
-  'ⰽ' => 'Ⰽ',
-  'ⰾ' => 'Ⰾ',
-  'ⰿ' => 'Ⰿ',
-  'ⱀ' => 'Ⱀ',
-  'ⱁ' => 'Ⱁ',
-  'ⱂ' => 'Ⱂ',
-  'ⱃ' => 'Ⱃ',
-  'ⱄ' => 'Ⱄ',
-  'ⱅ' => 'Ⱅ',
-  'ⱆ' => 'Ⱆ',
-  'ⱇ' => 'Ⱇ',
-  'ⱈ' => 'Ⱈ',
-  'ⱉ' => 'Ⱉ',
-  'ⱊ' => 'Ⱊ',
-  'ⱋ' => 'Ⱋ',
-  'ⱌ' => 'Ⱌ',
-  'ⱍ' => 'Ⱍ',
-  'ⱎ' => 'Ⱎ',
-  'ⱏ' => 'Ⱏ',
-  'ⱐ' => 'Ⱐ',
-  'ⱑ' => 'Ⱑ',
-  'ⱒ' => 'Ⱒ',
-  'ⱓ' => 'Ⱓ',
-  'ⱔ' => 'Ⱔ',
-  'ⱕ' => 'Ⱕ',
-  'ⱖ' => 'Ⱖ',
-  'ⱗ' => 'Ⱗ',
-  'ⱘ' => 'Ⱘ',
-  'ⱙ' => 'Ⱙ',
-  'ⱚ' => 'Ⱚ',
-  'ⱛ' => 'Ⱛ',
-  'ⱜ' => 'Ⱜ',
-  'ⱝ' => 'Ⱝ',
-  'ⱞ' => 'Ⱞ',
-  'ⱡ' => 'Ⱡ',
-  'ⱥ' => 'Ⱥ',
-  'ⱦ' => 'Ⱦ',
-  'ⱨ' => 'Ⱨ',
-  'ⱪ' => 'Ⱪ',
-  'ⱬ' => 'Ⱬ',
-  'ⱳ' => 'Ⱳ',
-  'ⱶ' => 'Ⱶ',
-  'ⲁ' => 'Ⲁ',
-  'ⲃ' => 'Ⲃ',
-  'ⲅ' => 'Ⲅ',
-  'ⲇ' => 'Ⲇ',
-  'ⲉ' => 'Ⲉ',
-  'ⲋ' => 'Ⲋ',
-  'ⲍ' => 'Ⲍ',
-  'ⲏ' => 'Ⲏ',
-  'ⲑ' => 'Ⲑ',
-  'ⲓ' => 'Ⲓ',
-  'ⲕ' => 'Ⲕ',
-  'ⲗ' => 'Ⲗ',
-  'ⲙ' => 'Ⲙ',
-  'ⲛ' => 'Ⲛ',
-  'ⲝ' => 'Ⲝ',
-  'ⲟ' => 'Ⲟ',
-  'ⲡ' => 'Ⲡ',
-  'ⲣ' => 'Ⲣ',
-  'ⲥ' => 'Ⲥ',
-  'ⲧ' => 'Ⲧ',
-  'ⲩ' => 'Ⲩ',
-  'ⲫ' => 'Ⲫ',
-  'ⲭ' => 'Ⲭ',
-  'ⲯ' => 'Ⲯ',
-  'ⲱ' => 'Ⲱ',
-  'ⲳ' => 'Ⲳ',
-  'ⲵ' => 'Ⲵ',
-  'ⲷ' => 'Ⲷ',
-  'ⲹ' => 'Ⲹ',
-  'ⲻ' => 'Ⲻ',
-  'ⲽ' => 'Ⲽ',
-  'ⲿ' => 'Ⲿ',
-  'ⳁ' => 'Ⳁ',
-  'ⳃ' => 'Ⳃ',
-  'ⳅ' => 'Ⳅ',
-  'ⳇ' => 'Ⳇ',
-  'ⳉ' => 'Ⳉ',
-  'ⳋ' => 'Ⳋ',
-  'ⳍ' => 'Ⳍ',
-  'ⳏ' => 'Ⳏ',
-  'ⳑ' => 'Ⳑ',
-  'ⳓ' => 'Ⳓ',
-  'ⳕ' => 'Ⳕ',
-  'ⳗ' => 'Ⳗ',
-  'ⳙ' => 'Ⳙ',
-  'ⳛ' => 'Ⳛ',
-  'ⳝ' => 'Ⳝ',
-  'ⳟ' => 'Ⳟ',
-  'ⳡ' => 'Ⳡ',
-  'ⳣ' => 'Ⳣ',
-  'ⳬ' => 'Ⳬ',
-  'ⳮ' => 'Ⳮ',
-  'ⳳ' => 'Ⳳ',
-  'ⴀ' => 'Ⴀ',
-  'ⴁ' => 'Ⴁ',
-  'ⴂ' => 'Ⴂ',
-  'ⴃ' => 'Ⴃ',
-  'ⴄ' => 'Ⴄ',
-  'ⴅ' => 'Ⴅ',
-  'ⴆ' => 'Ⴆ',
-  'ⴇ' => 'Ⴇ',
-  'ⴈ' => 'Ⴈ',
-  'ⴉ' => 'Ⴉ',
-  'ⴊ' => 'Ⴊ',
-  'ⴋ' => 'Ⴋ',
-  'ⴌ' => 'Ⴌ',
-  'ⴍ' => 'Ⴍ',
-  'ⴎ' => 'Ⴎ',
-  'ⴏ' => 'Ⴏ',
-  'ⴐ' => 'Ⴐ',
-  'ⴑ' => 'Ⴑ',
-  'ⴒ' => 'Ⴒ',
-  'ⴓ' => 'Ⴓ',
-  'ⴔ' => 'Ⴔ',
-  'ⴕ' => 'Ⴕ',
-  'ⴖ' => 'Ⴖ',
-  'ⴗ' => 'Ⴗ',
-  'ⴘ' => 'Ⴘ',
-  'ⴙ' => 'Ⴙ',
-  'ⴚ' => 'Ⴚ',
-  'ⴛ' => 'Ⴛ',
-  'ⴜ' => 'Ⴜ',
-  'ⴝ' => 'Ⴝ',
-  'ⴞ' => 'Ⴞ',
-  'ⴟ' => 'Ⴟ',
-  'ⴠ' => 'Ⴠ',
-  'ⴡ' => 'Ⴡ',
-  'ⴢ' => 'Ⴢ',
-  'ⴣ' => 'Ⴣ',
-  'ⴤ' => 'Ⴤ',
-  'ⴥ' => 'Ⴥ',
-  'ⴧ' => 'Ⴧ',
-  'ⴭ' => 'Ⴭ',
-  'ꙁ' => 'Ꙁ',
-  'ꙃ' => 'Ꙃ',
-  'ꙅ' => 'Ꙅ',
-  'ꙇ' => 'Ꙇ',
-  'ꙉ' => 'Ꙉ',
-  'ꙋ' => 'Ꙋ',
-  'ꙍ' => 'Ꙍ',
-  'ꙏ' => 'Ꙏ',
-  'ꙑ' => 'Ꙑ',
-  'ꙓ' => 'Ꙓ',
-  'ꙕ' => 'Ꙕ',
-  'ꙗ' => 'Ꙗ',
-  'ꙙ' => 'Ꙙ',
-  'ꙛ' => 'Ꙛ',
-  'ꙝ' => 'Ꙝ',
-  'ꙟ' => 'Ꙟ',
-  'ꙡ' => 'Ꙡ',
-  'ꙣ' => 'Ꙣ',
-  'ꙥ' => 'Ꙥ',
-  'ꙧ' => 'Ꙧ',
-  'ꙩ' => 'Ꙩ',
-  'ꙫ' => 'Ꙫ',
-  'ꙭ' => 'Ꙭ',
-  'ꚁ' => 'Ꚁ',
-  'ꚃ' => 'Ꚃ',
-  'ꚅ' => 'Ꚅ',
-  'ꚇ' => 'Ꚇ',
-  'ꚉ' => 'Ꚉ',
-  'ꚋ' => 'Ꚋ',
-  'ꚍ' => 'Ꚍ',
-  'ꚏ' => 'Ꚏ',
-  'ꚑ' => 'Ꚑ',
-  'ꚓ' => 'Ꚓ',
-  'ꚕ' => 'Ꚕ',
-  'ꚗ' => 'Ꚗ',
-  'ꚙ' => 'Ꚙ',
-  'ꚛ' => 'Ꚛ',
-  'ꜣ' => 'Ꜣ',
-  'ꜥ' => 'Ꜥ',
-  'ꜧ' => 'Ꜧ',
-  'ꜩ' => 'Ꜩ',
-  'ꜫ' => 'Ꜫ',
-  'ꜭ' => 'Ꜭ',
-  'ꜯ' => 'Ꜯ',
-  'ꜳ' => 'Ꜳ',
-  'ꜵ' => 'Ꜵ',
-  'ꜷ' => 'Ꜷ',
-  'ꜹ' => 'Ꜹ',
-  'ꜻ' => 'Ꜻ',
-  'ꜽ' => 'Ꜽ',
-  'ꜿ' => 'Ꜿ',
-  'ꝁ' => 'Ꝁ',
-  'ꝃ' => 'Ꝃ',
-  'ꝅ' => 'Ꝅ',
-  'ꝇ' => 'Ꝇ',
-  'ꝉ' => 'Ꝉ',
-  'ꝋ' => 'Ꝋ',
-  'ꝍ' => 'Ꝍ',
-  'ꝏ' => 'Ꝏ',
-  'ꝑ' => 'Ꝑ',
-  'ꝓ' => 'Ꝓ',
-  'ꝕ' => 'Ꝕ',
-  'ꝗ' => 'Ꝗ',
-  'ꝙ' => 'Ꝙ',
-  'ꝛ' => 'Ꝛ',
-  'ꝝ' => 'Ꝝ',
-  'ꝟ' => 'Ꝟ',
-  'ꝡ' => 'Ꝡ',
-  'ꝣ' => 'Ꝣ',
-  'ꝥ' => 'Ꝥ',
-  'ꝧ' => 'Ꝧ',
-  'ꝩ' => 'Ꝩ',
-  'ꝫ' => 'Ꝫ',
-  'ꝭ' => 'Ꝭ',
-  'ꝯ' => 'Ꝯ',
-  'ꝺ' => 'Ꝺ',
-  'ꝼ' => 'Ꝼ',
-  'ꝿ' => 'Ꝿ',
-  'ꞁ' => 'Ꞁ',
-  'ꞃ' => 'Ꞃ',
-  'ꞅ' => 'Ꞅ',
-  'ꞇ' => 'Ꞇ',
-  'ꞌ' => 'Ꞌ',
-  'ꞑ' => 'Ꞑ',
-  'ꞓ' => 'Ꞓ',
-  'ꞔ' => 'Ꞔ',
-  'ꞗ' => 'Ꞗ',
-  'ꞙ' => 'Ꞙ',
-  'ꞛ' => 'Ꞛ',
-  'ꞝ' => 'Ꞝ',
-  'ꞟ' => 'Ꞟ',
-  'ꞡ' => 'Ꞡ',
-  'ꞣ' => 'Ꞣ',
-  'ꞥ' => 'Ꞥ',
-  'ꞧ' => 'Ꞧ',
-  'ꞩ' => 'Ꞩ',
-  'ꞵ' => 'Ꞵ',
-  'ꞷ' => 'Ꞷ',
-  'ꞹ' => 'Ꞹ',
-  'ꞻ' => 'Ꞻ',
-  'ꞽ' => 'Ꞽ',
-  'ꞿ' => 'Ꞿ',
-  'ꟃ' => 'Ꟃ',
-  'ꟈ' => 'Ꟈ',
-  'ꟊ' => 'Ꟊ',
-  'ꟶ' => 'Ꟶ',
-  'ꭓ' => 'Ꭓ',
-  'ꭰ' => 'Ꭰ',
-  'ꭱ' => 'Ꭱ',
-  'ꭲ' => 'Ꭲ',
-  'ꭳ' => 'Ꭳ',
-  'ꭴ' => 'Ꭴ',
-  'ꭵ' => 'Ꭵ',
-  'ꭶ' => 'Ꭶ',
-  'ꭷ' => 'Ꭷ',
-  'ꭸ' => 'Ꭸ',
-  'ꭹ' => 'Ꭹ',
-  'ꭺ' => 'Ꭺ',
-  'ꭻ' => 'Ꭻ',
-  'ꭼ' => 'Ꭼ',
-  'ꭽ' => 'Ꭽ',
-  'ꭾ' => 'Ꭾ',
-  'ꭿ' => 'Ꭿ',
-  'ꮀ' => 'Ꮀ',
-  'ꮁ' => 'Ꮁ',
-  'ꮂ' => 'Ꮂ',
-  'ꮃ' => 'Ꮃ',
-  'ꮄ' => 'Ꮄ',
-  'ꮅ' => 'Ꮅ',
-  'ꮆ' => 'Ꮆ',
-  'ꮇ' => 'Ꮇ',
-  'ꮈ' => 'Ꮈ',
-  'ꮉ' => 'Ꮉ',
-  'ꮊ' => 'Ꮊ',
-  'ꮋ' => 'Ꮋ',
-  'ꮌ' => 'Ꮌ',
-  'ꮍ' => 'Ꮍ',
-  'ꮎ' => 'Ꮎ',
-  'ꮏ' => 'Ꮏ',
-  'ꮐ' => 'Ꮐ',
-  'ꮑ' => 'Ꮑ',
-  'ꮒ' => 'Ꮒ',
-  'ꮓ' => 'Ꮓ',
-  'ꮔ' => 'Ꮔ',
-  'ꮕ' => 'Ꮕ',
-  'ꮖ' => 'Ꮖ',
-  'ꮗ' => 'Ꮗ',
-  'ꮘ' => 'Ꮘ',
-  'ꮙ' => 'Ꮙ',
-  'ꮚ' => 'Ꮚ',
-  'ꮛ' => 'Ꮛ',
-  'ꮜ' => 'Ꮜ',
-  'ꮝ' => 'Ꮝ',
-  'ꮞ' => 'Ꮞ',
-  'ꮟ' => 'Ꮟ',
-  'ꮠ' => 'Ꮠ',
-  'ꮡ' => 'Ꮡ',
-  'ꮢ' => 'Ꮢ',
-  'ꮣ' => 'Ꮣ',
-  'ꮤ' => 'Ꮤ',
-  'ꮥ' => 'Ꮥ',
-  'ꮦ' => 'Ꮦ',
-  'ꮧ' => 'Ꮧ',
-  'ꮨ' => 'Ꮨ',
-  'ꮩ' => 'Ꮩ',
-  'ꮪ' => 'Ꮪ',
-  'ꮫ' => 'Ꮫ',
-  'ꮬ' => 'Ꮬ',
-  'ꮭ' => 'Ꮭ',
-  'ꮮ' => 'Ꮮ',
-  'ꮯ' => 'Ꮯ',
-  'ꮰ' => 'Ꮰ',
-  'ꮱ' => 'Ꮱ',
-  'ꮲ' => 'Ꮲ',
-  'ꮳ' => 'Ꮳ',
-  'ꮴ' => 'Ꮴ',
-  'ꮵ' => 'Ꮵ',
-  'ꮶ' => 'Ꮶ',
-  'ꮷ' => 'Ꮷ',
-  'ꮸ' => 'Ꮸ',
-  'ꮹ' => 'Ꮹ',
-  'ꮺ' => 'Ꮺ',
-  'ꮻ' => 'Ꮻ',
-  'ꮼ' => 'Ꮼ',
-  'ꮽ' => 'Ꮽ',
-  'ꮾ' => 'Ꮾ',
-  'ꮿ' => 'Ꮿ',
-  'ａ' => 'Ａ',
-  'ｂ' => 'Ｂ',
-  'ｃ' => 'Ｃ',
-  'ｄ' => 'Ｄ',
-  'ｅ' => 'Ｅ',
-  'ｆ' => 'Ｆ',
-  'ｇ' => 'Ｇ',
-  'ｈ' => 'Ｈ',
-  'ｉ' => 'Ｉ',
-  'ｊ' => 'Ｊ',
-  'ｋ' => 'Ｋ',
-  'ｌ' => 'Ｌ',
-  'ｍ' => 'Ｍ',
-  'ｎ' => 'Ｎ',
-  'ｏ' => 'Ｏ',
-  'ｐ' => 'Ｐ',
-  'ｑ' => 'Ｑ',
-  'ｒ' => 'Ｒ',
-  'ｓ' => 'Ｓ',
-  'ｔ' => 'Ｔ',
-  'ｕ' => 'Ｕ',
-  'ｖ' => 'Ｖ',
-  'ｗ' => 'Ｗ',
-  'ｘ' => 'Ｘ',
-  'ｙ' => 'Ｙ',
-  'ｚ' => 'Ｚ',
-  '𐐨' => '𐐀',
-  '𐐩' => '𐐁',
-  '𐐪' => '𐐂',
-  '𐐫' => '𐐃',
-  '𐐬' => '𐐄',
-  '𐐭' => '𐐅',
-  '𐐮' => '𐐆',
-  '𐐯' => '𐐇',
-  '𐐰' => '𐐈',
-  '𐐱' => '𐐉',
-  '𐐲' => '𐐊',
-  '𐐳' => '𐐋',
-  '𐐴' => '𐐌',
-  '𐐵' => '𐐍',
-  '𐐶' => '𐐎',
-  '𐐷' => '𐐏',
-  '𐐸' => '𐐐',
-  '𐐹' => '𐐑',
-  '𐐺' => '𐐒',
-  '𐐻' => '𐐓',
-  '𐐼' => '𐐔',
-  '𐐽' => '𐐕',
-  '𐐾' => '𐐖',
-  '𐐿' => '𐐗',
-  '𐑀' => '𐐘',
-  '𐑁' => '𐐙',
-  '𐑂' => '𐐚',
-  '𐑃' => '𐐛',
-  '𐑄' => '𐐜',
-  '𐑅' => '𐐝',
-  '𐑆' => '𐐞',
-  '𐑇' => '𐐟',
-  '𐑈' => '𐐠',
-  '𐑉' => '𐐡',
-  '𐑊' => '𐐢',
-  '𐑋' => '𐐣',
-  '𐑌' => '𐐤',
-  '𐑍' => '𐐥',
-  '𐑎' => '𐐦',
-  '𐑏' => '𐐧',
-  '𐓘' => '𐒰',
-  '𐓙' => '𐒱',
-  '𐓚' => '𐒲',
-  '𐓛' => '𐒳',
-  '𐓜' => '𐒴',
-  '𐓝' => '𐒵',
-  '𐓞' => '𐒶',
-  '𐓟' => '𐒷',
-  '𐓠' => '𐒸',
-  '𐓡' => '𐒹',
-  '𐓢' => '𐒺',
-  '𐓣' => '𐒻',
-  '𐓤' => '𐒼',
-  '𐓥' => '𐒽',
-  '𐓦' => '𐒾',
-  '𐓧' => '𐒿',
-  '𐓨' => '𐓀',
-  '𐓩' => '𐓁',
-  '𐓪' => '𐓂',
-  '𐓫' => '𐓃',
-  '𐓬' => '𐓄',
-  '𐓭' => '𐓅',
-  '𐓮' => '𐓆',
-  '𐓯' => '𐓇',
-  '𐓰' => '𐓈',
-  '𐓱' => '𐓉',
-  '𐓲' => '𐓊',
-  '𐓳' => '𐓋',
-  '𐓴' => '𐓌',
-  '𐓵' => '𐓍',
-  '𐓶' => '𐓎',
-  '𐓷' => '𐓏',
-  '𐓸' => '𐓐',
-  '𐓹' => '𐓑',
-  '𐓺' => '𐓒',
-  '𐓻' => '𐓓',
-  '𐳀' => '𐲀',
-  '𐳁' => '𐲁',
-  '𐳂' => '𐲂',
-  '𐳃' => '𐲃',
-  '𐳄' => '𐲄',
-  '𐳅' => '𐲅',
-  '𐳆' => '𐲆',
-  '𐳇' => '𐲇',
-  '𐳈' => '𐲈',
-  '𐳉' => '𐲉',
-  '𐳊' => '𐲊',
-  '𐳋' => '𐲋',
-  '𐳌' => '𐲌',
-  '𐳍' => '𐲍',
-  '𐳎' => '𐲎',
-  '𐳏' => '𐲏',
-  '𐳐' => '𐲐',
-  '𐳑' => '𐲑',
-  '𐳒' => '𐲒',
-  '𐳓' => '𐲓',
-  '𐳔' => '𐲔',
-  '𐳕' => '𐲕',
-  '𐳖' => '𐲖',
-  '𐳗' => '𐲗',
-  '𐳘' => '𐲘',
-  '𐳙' => '𐲙',
-  '𐳚' => '𐲚',
-  '𐳛' => '𐲛',
-  '𐳜' => '𐲜',
-  '𐳝' => '𐲝',
-  '𐳞' => '𐲞',
-  '𐳟' => '𐲟',
-  '𐳠' => '𐲠',
-  '𐳡' => '𐲡',
-  '𐳢' => '𐲢',
-  '𐳣' => '𐲣',
-  '𐳤' => '𐲤',
-  '𐳥' => '𐲥',
-  '𐳦' => '𐲦',
-  '𐳧' => '𐲧',
-  '𐳨' => '𐲨',
-  '𐳩' => '𐲩',
-  '𐳪' => '𐲪',
-  '𐳫' => '𐲫',
-  '𐳬' => '𐲬',
-  '𐳭' => '𐲭',
-  '𐳮' => '𐲮',
-  '𐳯' => '𐲯',
-  '𐳰' => '𐲰',
-  '𐳱' => '𐲱',
-  '𐳲' => '𐲲',
-  '𑣀' => '𑢠',
-  '𑣁' => '𑢡',
-  '𑣂' => '𑢢',
-  '𑣃' => '𑢣',
-  '𑣄' => '𑢤',
-  '𑣅' => '𑢥',
-  '𑣆' => '𑢦',
-  '𑣇' => '𑢧',
-  '𑣈' => '𑢨',
-  '𑣉' => '𑢩',
-  '𑣊' => '𑢪',
-  '𑣋' => '𑢫',
-  '𑣌' => '𑢬',
-  '𑣍' => '𑢭',
-  '𑣎' => '𑢮',
-  '𑣏' => '𑢯',
-  '𑣐' => '𑢰',
-  '𑣑' => '𑢱',
-  '𑣒' => '𑢲',
-  '𑣓' => '𑢳',
-  '𑣔' => '𑢴',
-  '𑣕' => '𑢵',
-  '𑣖' => '𑢶',
-  '𑣗' => '𑢷',
-  '𑣘' => '𑢸',
-  '𑣙' => '𑢹',
-  '𑣚' => '𑢺',
-  '𑣛' => '𑢻',
-  '𑣜' => '𑢼',
-  '𑣝' => '𑢽',
-  '𑣞' => '𑢾',
-  '𑣟' => '𑢿',
-  '𖹠' => '𖹀',
-  '𖹡' => '𖹁',
-  '𖹢' => '𖹂',
-  '𖹣' => '𖹃',
-  '𖹤' => '𖹄',
-  '𖹥' => '𖹅',
-  '𖹦' => '𖹆',
-  '𖹧' => '𖹇',
-  '𖹨' => '𖹈',
-  '𖹩' => '𖹉',
-  '𖹪' => '𖹊',
-  '𖹫' => '𖹋',
-  '𖹬' => '𖹌',
-  '𖹭' => '𖹍',
-  '𖹮' => '𖹎',
-  '𖹯' => '𖹏',
-  '𖹰' => '𖹐',
-  '𖹱' => '𖹑',
-  '𖹲' => '𖹒',
-  '𖹳' => '𖹓',
-  '𖹴' => '𖹔',
-  '𖹵' => '𖹕',
-  '𖹶' => '𖹖',
-  '𖹷' => '𖹗',
-  '𖹸' => '𖹘',
-  '𖹹' => '𖹙',
-  '𖹺' => '𖹚',
-  '𖹻' => '𖹛',
-  '𖹼' => '𖹜',
-  '𖹽' => '𖹝',
-  '𖹾' => '𖹞',
-  '𖹿' => '𖹟',
-  '𞤢' => '𞤀',
-  '𞤣' => '𞤁',
-  '𞤤' => '𞤂',
-  '𞤥' => '𞤃',
-  '𞤦' => '𞤄',
-  '𞤧' => '𞤅',
-  '𞤨' => '𞤆',
-  '𞤩' => '𞤇',
-  '𞤪' => '𞤈',
-  '𞤫' => '𞤉',
-  '𞤬' => '𞤊',
-  '𞤭' => '𞤋',
-  '𞤮' => '𞤌',
-  '𞤯' => '𞤍',
-  '𞤰' => '𞤎',
-  '𞤱' => '𞤏',
-  '𞤲' => '𞤐',
-  '𞤳' => '𞤑',
-  '𞤴' => '𞤒',
-  '𞤵' => '𞤓',
-  '𞤶' => '𞤔',
-  '𞤷' => '𞤕',
-  '𞤸' => '𞤖',
-  '𞤹' => '𞤗',
-  '𞤺' => '𞤘',
-  '𞤻' => '𞤙',
-  '𞤼' => '𞤚',
-  '𞤽' => '𞤛',
-  '𞤾' => '𞤜',
-  '𞤿' => '𞤝',
-  '𞥀' => '𞤞',
-  '𞥁' => '𞤟',
-  '𞥂' => '𞤠',
-  '𞥃' => '𞤡',
-  'ß' => 'SS',
-  'ff' => 'FF',
-  'fi' => 'FI',
-  'fl' => 'FL',
-  'ffi' => 'FFI',
-  'ffl' => 'FFL',
-  'ſt' => 'ST',
-  'st' => 'ST',
-  'և' => 'ԵՒ',
-  'ﬓ' => 'ՄՆ',
-  'ﬔ' => 'ՄԵ',
-  'ﬕ' => 'ՄԻ',
-  'ﬖ' => 'ՎՆ',
-  'ﬗ' => 'ՄԽ',
-  'ʼn' => 'ʼN',
-  'ΐ' => 'Ϊ́',
-  'ΰ' => 'Ϋ́',
-  'ǰ' => 'J̌',
-  'ẖ' => 'H̱',
-  'ẗ' => 'T̈',
-  'ẘ' => 'W̊',
-  'ẙ' => 'Y̊',
-  'ẚ' => 'Aʾ',
-  'ὐ' => 'Υ̓',
-  'ὒ' => 'Υ̓̀',
-  'ὔ' => 'Υ̓́',
-  'ὖ' => 'Υ̓͂',
-  'ᾶ' => 'Α͂',
-  'ῆ' => 'Η͂',
-  'ῒ' => 'Ϊ̀',
-  'ΐ' => 'Ϊ́',
-  'ῖ' => 'Ι͂',
-  'ῗ' => 'Ϊ͂',
-  'ῢ' => 'Ϋ̀',
-  'ΰ' => 'Ϋ́',
-  'ῤ' => 'Ρ̓',
-  'ῦ' => 'Υ͂',
-  'ῧ' => 'Ϋ͂',
-  'ῶ' => 'Ω͂',
-  'ᾈ' => 'ἈΙ',
-  'ᾉ' => 'ἉΙ',
-  'ᾊ' => 'ἊΙ',
-  'ᾋ' => 'ἋΙ',
-  'ᾌ' => 'ἌΙ',
-  'ᾍ' => 'ἍΙ',
-  'ᾎ' => 'ἎΙ',
-  'ᾏ' => 'ἏΙ',
-  'ᾘ' => 'ἨΙ',
-  'ᾙ' => 'ἩΙ',
-  'ᾚ' => 'ἪΙ',
-  'ᾛ' => 'ἫΙ',
-  'ᾜ' => 'ἬΙ',
-  'ᾝ' => 'ἭΙ',
-  'ᾞ' => 'ἮΙ',
-  'ᾟ' => 'ἯΙ',
-  'ᾨ' => 'ὨΙ',
-  'ᾩ' => 'ὩΙ',
-  'ᾪ' => 'ὪΙ',
-  'ᾫ' => 'ὫΙ',
-  'ᾬ' => 'ὬΙ',
-  'ᾭ' => 'ὭΙ',
-  'ᾮ' => 'ὮΙ',
-  'ᾯ' => 'ὯΙ',
-  'ᾼ' => 'ΑΙ',
-  'ῌ' => 'ΗΙ',
-  'ῼ' => 'ΩΙ',
-  'ᾲ' => 'ᾺΙ',
-  'ᾴ' => 'ΆΙ',
-  'ῂ' => 'ῊΙ',
-  'ῄ' => 'ΉΙ',
-  'ῲ' => 'ῺΙ',
-  'ῴ' => 'ΏΙ',
-  'ᾷ' => 'Α͂Ι',
-  'ῇ' => 'Η͂Ι',
-  'ῷ' => 'Ω͂Ι',
-);
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/bootstrap.php b/generated/php/vendor/symfony/polyfill-mbstring/bootstrap.php
deleted file mode 100644
index 0e934d7..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/bootstrap.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<?php
-
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <fabien@symfony.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-if (\PHP_VERSION_ID >= 80000) {
-    return require __DIR__.'/bootstrap80.php';
-}
-
-return require __DIR__.'/bootstrap72.php';
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/bootstrap72.php b/generated/php/vendor/symfony/polyfill-mbstring/bootstrap72.php
deleted file mode 100644
index 2e3a06d..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/bootstrap72.php
+++ /dev/null
@@ -1,173 +0,0 @@
-<?php
-
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <fabien@symfony.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-use Symfony\Polyfill\Mbstring as p;
-
-if (!function_exists('mb_convert_encoding')) {
-    function mb_convert_encoding($string, $to_encoding, $from_encoding = null) { return p\Mbstring::mb_convert_encoding($string, $to_encoding, $from_encoding); }
-}
-if (!function_exists('mb_decode_mimeheader')) {
-    function mb_decode_mimeheader($string) { return p\Mbstring::mb_decode_mimeheader($string); }
-}
-if (!function_exists('mb_encode_mimeheader')) {
-    function mb_encode_mimeheader($string, $charset = null, $transfer_encoding = null, $newline = "\r\n", $indent = 0) { return p\Mbstring::mb_encode_mimeheader($string, $charset, $transfer_encoding, $newline, $indent); }
-}
-if (!function_exists('mb_decode_numericentity')) {
-    function mb_decode_numericentity($string, $map, $encoding = null) { return p\Mbstring::mb_decode_numericentity($string, $map, $encoding); }
-}
-if (!function_exists('mb_encode_numericentity')) {
-    function mb_encode_numericentity($string, $map, $encoding = null, $hex = false) { return p\Mbstring::mb_encode_numericentity($string, $map, $encoding, $hex); }
-}
-if (!function_exists('mb_convert_case')) {
-    function mb_convert_case($string, $mode, $encoding = null) { return p\Mbstring::mb_convert_case($string, $mode, $encoding); }
-}
-if (!function_exists('mb_internal_encoding')) {
-    function mb_internal_encoding($encoding = null) { return p\Mbstring::mb_internal_encoding($encoding); }
-}
-if (!function_exists('mb_language')) {
-    function mb_language($language = null) { return p\Mbstring::mb_language($language); }
-}
-if (!function_exists('mb_list_encodings')) {
-    function mb_list_encodings() { return p\Mbstring::mb_list_encodings(); }
-}
-if (!function_exists('mb_encoding_aliases')) {
-    function mb_encoding_aliases($encoding) { return p\Mbstring::mb_encoding_aliases($encoding); }
-}
-if (!function_exists('mb_check_encoding')) {
-    function mb_check_encoding($value = null, $encoding = null) { return p\Mbstring::mb_check_encoding($value, $encoding); }
-}
-if (!function_exists('mb_detect_encoding')) {
-    function mb_detect_encoding($string, $encodings = null, $strict = false) { return p\Mbstring::mb_detect_encoding($string, $encodings, $strict); }
-}
-if (!function_exists('mb_detect_order')) {
-    function mb_detect_order($encoding = null) { return p\Mbstring::mb_detect_order($encoding); }
-}
-if (!function_exists('mb_parse_str')) {
-    function mb_parse_str($string, &$result = []) { parse_str($string, $result); return (bool) $result; }
-}
-if (!function_exists('mb_strlen')) {
-    function mb_strlen($string, $encoding = null) { return p\Mbstring::mb_strlen($string, $encoding); }
-}
-if (!function_exists('mb_strpos')) {
-    function mb_strpos($haystack, $needle, $offset = 0, $encoding = null) { return p\Mbstring::mb_strpos($haystack, $needle, $offset, $encoding); }
-}
-if (!function_exists('mb_strtolower')) {
-    function mb_strtolower($string, $encoding = null) { return p\Mbstring::mb_strtolower($string, $encoding); }
-}
-if (!function_exists('mb_strtoupper')) {
-    function mb_strtoupper($string, $encoding = null) { return p\Mbstring::mb_strtoupper($string, $encoding); }
-}
-if (!function_exists('mb_substitute_character')) {
-    function mb_substitute_character($substitute_character = null) { return p\Mbstring::mb_substitute_character($substitute_character); }
-}
-if (!function_exists('mb_substr')) {
-    function mb_substr($string, $start, $length = 2147483647, $encoding = null) { return p\Mbstring::mb_substr($string, $start, $length, $encoding); }
-}
-if (!function_exists('mb_stripos')) {
-    function mb_stripos($haystack, $needle, $offset = 0, $encoding = null) { return p\Mbstring::mb_stripos($haystack, $needle, $offset, $encoding); }
-}
-if (!function_exists('mb_stristr')) {
-    function mb_stristr($haystack, $needle, $before_needle = false, $encoding = null) { return p\Mbstring::mb_stristr($haystack, $needle, $before_needle, $encoding); }
-}
-if (!function_exists('mb_strrchr')) {
-    function mb_strrchr($haystack, $needle, $before_needle = false, $encoding = null) { return p\Mbstring::mb_strrchr($haystack, $needle, $before_needle, $encoding); }
-}
-if (!function_exists('mb_strrichr')) {
-    function mb_strrichr($haystack, $needle, $before_needle = false, $encoding = null) { return p\Mbstring::mb_strrichr($haystack, $needle, $before_needle, $encoding); }
-}
-if (!function_exists('mb_strripos')) {
-    function mb_strripos($haystack, $needle, $offset = 0, $encoding = null) { return p\Mbstring::mb_strripos($haystack, $needle, $offset, $encoding); }
-}
-if (!function_exists('mb_strrpos')) {
-    function mb_strrpos($haystack, $needle, $offset = 0, $encoding = null) { return p\Mbstring::mb_strrpos($haystack, $needle, $offset, $encoding); }
-}
-if (!function_exists('mb_strstr')) {
-    function mb_strstr($haystack, $needle, $before_needle = false, $encoding = null) { return p\Mbstring::mb_strstr($haystack, $needle, $before_needle, $encoding); }
-}
-if (!function_exists('mb_get_info')) {
-    function mb_get_info($type = 'all') { return p\Mbstring::mb_get_info($type); }
-}
-if (!function_exists('mb_http_output')) {
-    function mb_http_output($encoding = null) { return p\Mbstring::mb_http_output($encoding); }
-}
-if (!function_exists('mb_strwidth')) {
-    function mb_strwidth($string, $encoding = null) { return p\Mbstring::mb_strwidth($string, $encoding); }
-}
-if (!function_exists('mb_substr_count')) {
-    function mb_substr_count($haystack, $needle, $encoding = null) { return p\Mbstring::mb_substr_count($haystack, $needle, $encoding); }
-}
-if (!function_exists('mb_output_handler')) {
-    function mb_output_handler($string, $status) { return p\Mbstring::mb_output_handler($string, $status); }
-}
-if (!function_exists('mb_http_input')) {
-    function mb_http_input($type = null) { return p\Mbstring::mb_http_input($type); }
-}
-
-if (!function_exists('mb_convert_variables')) {
-    function mb_convert_variables($to_encoding, $from_encoding, &...$vars) { return p\Mbstring::mb_convert_variables($to_encoding, $from_encoding, ...$vars); }
-}
-
-if (!function_exists('mb_ord')) {
-    function mb_ord($string, $encoding = null) { return p\Mbstring::mb_ord($string, $encoding); }
-}
-if (!function_exists('mb_chr')) {
-    function mb_chr($codepoint, $encoding = null) { return p\Mbstring::mb_chr($codepoint, $encoding); }
-}
-if (!function_exists('mb_scrub')) {
-    function mb_scrub($string, $encoding = null) { return p\Mbstring::mb_scrub($string, $encoding); }
-}
-if (!function_exists('mb_str_split')) {
-    function mb_str_split($string, $length = 1, $encoding = null) { return p\Mbstring::mb_str_split($string, $length, $encoding); }
-}
-
-if (!function_exists('mb_str_pad')) {
-    /** @return string|false */
-    function mb_str_pad(?string $string, ?int $length, ?string $pad_string = ' ', ?int $pad_type = STR_PAD_RIGHT, ?string $encoding = null) { return p\Mbstring::mb_str_pad((string) $string, (int) $length, (string) $pad_string, (int) $pad_type, $encoding); }
-}
-
-if (!function_exists('mb_ucfirst')) {
-    /** @return string|false */
-    function mb_ucfirst(?string $string, ?string $encoding = null) { return p\Mbstring::mb_ucfirst((string) $string, $encoding); }
-}
-
-if (!function_exists('mb_lcfirst')) {
-    /** @return string|false */
-    function mb_lcfirst(?string $string, ?string $encoding = null) { return p\Mbstring::mb_lcfirst((string) $string, $encoding); }
-}
-
-if (!function_exists('mb_trim')) {
-    /** @return string|false */
-    function mb_trim(?string $string, ?string $characters = null, ?string $encoding = null) { return p\Mbstring::mb_trim((string) $string, $characters, $encoding); }
-}
-
-if (!function_exists('mb_ltrim')) {
-    /** @return string|false */
-    function mb_ltrim(?string $string, ?string $characters = null, ?string $encoding = null) { return p\Mbstring::mb_ltrim((string) $string, $characters, $encoding); }
-}
-
-if (!function_exists('mb_rtrim')) {
-    /** @return string|false */
-    function mb_rtrim(?string $string, ?string $characters = null, ?string $encoding = null) { return p\Mbstring::mb_rtrim((string) $string, $characters, $encoding); }
-}
-
-if (extension_loaded('mbstring')) {
-    return;
-}
-
-if (!defined('MB_CASE_UPPER')) {
-    define('MB_CASE_UPPER', 0);
-}
-if (!defined('MB_CASE_LOWER')) {
-    define('MB_CASE_LOWER', 1);
-}
-if (!defined('MB_CASE_TITLE')) {
-    define('MB_CASE_TITLE', 2);
-}
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/bootstrap80.php b/generated/php/vendor/symfony/polyfill-mbstring/bootstrap80.php
deleted file mode 100644
index 5fde10e..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/bootstrap80.php
+++ /dev/null
@@ -1,167 +0,0 @@
-<?php
-
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <fabien@symfony.com>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-use Symfony\Polyfill\Mbstring as p;
-
-if (!function_exists('mb_convert_encoding')) {
-    function mb_convert_encoding(array|string|null $string, ?string $to_encoding, array|string|null $from_encoding = null): array|string|false { return p\Mbstring::mb_convert_encoding($string ?? '', (string) $to_encoding, $from_encoding); }
-}
-if (!function_exists('mb_decode_mimeheader')) {
-    function mb_decode_mimeheader(?string $string): string { return p\Mbstring::mb_decode_mimeheader((string) $string); }
-}
-if (!function_exists('mb_encode_mimeheader')) {
-    function mb_encode_mimeheader(?string $string, ?string $charset = null, ?string $transfer_encoding = null, ?string $newline = "\r\n", ?int $indent = 0): string { return p\Mbstring::mb_encode_mimeheader((string) $string, $charset, $transfer_encoding, (string) $newline, (int) $indent); }
-}
-if (!function_exists('mb_decode_numericentity')) {
-    function mb_decode_numericentity(?string $string, array $map, ?string $encoding = null): string { return p\Mbstring::mb_decode_numericentity((string) $string, $map, $encoding); }
-}
-if (!function_exists('mb_encode_numericentity')) {
-    function mb_encode_numericentity(?string $string, array $map, ?string $encoding = null, ?bool $hex = false): string { return p\Mbstring::mb_encode_numericentity((string) $string, $map, $encoding, (bool) $hex); }
-}
-if (!function_exists('mb_convert_case')) {
-    function mb_convert_case(?string $string, ?int $mode, ?string $encoding = null): string { return p\Mbstring::mb_convert_case((string) $string, (int) $mode, $encoding); }
-}
-if (!function_exists('mb_internal_encoding')) {
-    function mb_internal_encoding(?string $encoding = null): string|bool { return p\Mbstring::mb_internal_encoding($encoding); }
-}
-if (!function_exists('mb_language')) {
-    function mb_language(?string $language = null): string|bool { return p\Mbstring::mb_language($language); }
-}
-if (!function_exists('mb_list_encodings')) {
-    function mb_list_encodings(): array { return p\Mbstring::mb_list_encodings(); }
-}
-if (!function_exists('mb_encoding_aliases')) {
-    function mb_encoding_aliases(?string $encoding): array { return p\Mbstring::mb_encoding_aliases((string) $encoding); }
-}
-if (!function_exists('mb_check_encoding')) {
-    function mb_check_encoding(array|string|null $value = null, ?string $encoding = null): bool { return p\Mbstring::mb_check_encoding($value, $encoding); }
-}
-if (!function_exists('mb_detect_encoding')) {
-    function mb_detect_encoding(?string $string, array|string|null $encodings = null, ?bool $strict = false): string|false { return p\Mbstring::mb_detect_encoding((string) $string, $encodings, (bool) $strict); }
-}
-if (!function_exists('mb_detect_order')) {
-    function mb_detect_order(array|string|null $encoding = null): array|bool { return p\Mbstring::mb_detect_order($encoding); }
-}
-if (!function_exists('mb_parse_str')) {
-    function mb_parse_str(?string $string, &$result = []): bool { parse_str((string) $string, $result); return (bool) $result; }
-}
-if (!function_exists('mb_strlen')) {
-    function mb_strlen(?string $string, ?string $encoding = null): int { return p\Mbstring::mb_strlen((string) $string, $encoding); }
-}
-if (!function_exists('mb_strpos')) {
-    function mb_strpos(?string $haystack, ?string $needle, ?int $offset = 0, ?string $encoding = null): int|false { return p\Mbstring::mb_strpos((string) $haystack, (string) $needle, (int) $offset, $encoding); }
-}
-if (!function_exists('mb_strtolower')) {
-    function mb_strtolower(?string $string, ?string $encoding = null): string { return p\Mbstring::mb_strtolower((string) $string, $encoding); }
-}
-if (!function_exists('mb_strtoupper')) {
-    function mb_strtoupper(?string $string, ?string $encoding = null): string { return p\Mbstring::mb_strtoupper((string) $string, $encoding); }
-}
-if (!function_exists('mb_substitute_character')) {
-    function mb_substitute_character(string|int|null $substitute_character = null): string|int|bool { return p\Mbstring::mb_substitute_character($substitute_character); }
-}
-if (!function_exists('mb_substr')) {
-    function mb_substr(?string $string, ?int $start, ?int $length = null, ?string $encoding = null): string { return p\Mbstring::mb_substr((string) $string, (int) $start, $length, $encoding); }
-}
-if (!function_exists('mb_stripos')) {
-    function mb_stripos(?string $haystack, ?string $needle, ?int $offset = 0, ?string $encoding = null): int|false { return p\Mbstring::mb_stripos((string) $haystack, (string) $needle, (int) $offset, $encoding); }
-}
-if (!function_exists('mb_stristr')) {
-    function mb_stristr(?string $haystack, ?string $needle, ?bool $before_needle = false, ?string $encoding = null): string|false { return p\Mbstring::mb_stristr((string) $haystack, (string) $needle, (bool) $before_needle, $encoding); }
-}
-if (!function_exists('mb_strrchr')) {
-    function mb_strrchr(?string $haystack, ?string $needle, ?bool $before_needle = false, ?string $encoding = null): string|false { return p\Mbstring::mb_strrchr((string) $haystack, (string) $needle, (bool) $before_needle, $encoding); }
-}
-if (!function_exists('mb_strrichr')) {
-    function mb_strrichr(?string $haystack, ?string $needle, ?bool $before_needle = false, ?string $encoding = null): string|false { return p\Mbstring::mb_strrichr((string) $haystack, (string) $needle, (bool) $before_needle, $encoding); }
-}
-if (!function_exists('mb_strripos')) {
-    function mb_strripos(?string $haystack, ?string $needle, ?int $offset = 0, ?string $encoding = null): int|false { return p\Mbstring::mb_strripos((string) $haystack, (string) $needle, (int) $offset, $encoding); }
-}
-if (!function_exists('mb_strrpos')) {
-    function mb_strrpos(?string $haystack, ?string $needle, ?int $offset = 0, ?string $encoding = null): int|false { return p\Mbstring::mb_strrpos((string) $haystack, (string) $needle, (int) $offset, $encoding); }
-}
-if (!function_exists('mb_strstr')) {
-    function mb_strstr(?string $haystack, ?string $needle, ?bool $before_needle = false, ?string $encoding = null): string|false { return p\Mbstring::mb_strstr((string) $haystack, (string) $needle, (bool) $before_needle, $encoding); }
-}
-if (!function_exists('mb_get_info')) {
-    function mb_get_info(?string $type = 'all'): array|string|int|false|null { return p\Mbstring::mb_get_info((string) $type); }
-}
-if (!function_exists('mb_http_output')) {
-    function mb_http_output(?string $encoding = null): string|bool { return p\Mbstring::mb_http_output($encoding); }
-}
-if (!function_exists('mb_strwidth')) {
-    function mb_strwidth(?string $string, ?string $encoding = null): int { return p\Mbstring::mb_strwidth((string) $string, $encoding); }
-}
-if (!function_exists('mb_substr_count')) {
-    function mb_substr_count(?string $haystack, ?string $needle, ?string $encoding = null): int { return p\Mbstring::mb_substr_count((string) $haystack, (string) $needle, $encoding); }
-}
-if (!function_exists('mb_output_handler')) {
-    function mb_output_handler(?string $string, ?int $status): string { return p\Mbstring::mb_output_handler((string) $string, (int) $status); }
-}
-if (!function_exists('mb_http_input')) {
-    function mb_http_input(?string $type = null): array|string|false { return p\Mbstring::mb_http_input($type); }
-}
-
-if (!function_exists('mb_convert_variables')) {
-    function mb_convert_variables(?string $to_encoding, array|string|null $from_encoding, mixed &$var, mixed &...$vars): string|false { return p\Mbstring::mb_convert_variables((string) $to_encoding, $from_encoding ?? '', $var, ...$vars); }
-}
-
-if (!function_exists('mb_ord')) {
-    function mb_ord(?string $string, ?string $encoding = null): int|false { return p\Mbstring::mb_ord((string) $string, $encoding); }
-}
-if (!function_exists('mb_chr')) {
-    function mb_chr(?int $codepoint, ?string $encoding = null): string|false { return p\Mbstring::mb_chr((int) $codepoint, $encoding); }
-}
-if (!function_exists('mb_scrub')) {
-    function mb_scrub(?string $string, ?string $encoding = null): string { return p\Mbstring::mb_scrub($string, $encoding); }
-}
-if (!function_exists('mb_str_split')) {
-    function mb_str_split(?string $string, ?int $length = 1, ?string $encoding = null): array { return p\Mbstring::mb_str_split((string) $string, (int) $length, $encoding); }
-}
-
-if (!function_exists('mb_str_pad')) {
-    function mb_str_pad(?string $string, ?int $length, ?string $pad_string = ' ', ?int $pad_type = STR_PAD_RIGHT, ?string $encoding = null): string { return p\Mbstring::mb_str_pad((string) $string, (int) $length, (string) $pad_string, (int) $pad_type, $encoding); }
-}
-
-if (!function_exists('mb_ucfirst')) {
-    function mb_ucfirst(?string $string, ?string $encoding = null): string { return p\Mbstring::mb_ucfirst((string) $string, $encoding); }
-}
-
-if (!function_exists('mb_lcfirst')) {
-    function mb_lcfirst(?string $string, ?string $encoding = null): string { return p\Mbstring::mb_lcfirst((string) $string, $encoding); }
-}
-
-if (!function_exists('mb_trim')) {
-    function mb_trim(?string $string, ?string $characters = null, ?string $encoding = null): string { return p\Mbstring::mb_trim((string) $string, $characters, $encoding); }
-}
-
-if (!function_exists('mb_ltrim')) {
-    function mb_ltrim(?string $string, ?string $characters = null, ?string $encoding = null): string { return p\Mbstring::mb_ltrim((string) $string, $characters, $encoding); }
-}
-
-if (!function_exists('mb_rtrim')) {
-    function mb_rtrim(?string $string, ?string $characters = null, ?string $encoding = null): string { return p\Mbstring::mb_rtrim((string) $string, $characters, $encoding); }
-}
-
-if (extension_loaded('mbstring')) {
-    return;
-}
-
-if (!defined('MB_CASE_UPPER')) {
-    define('MB_CASE_UPPER', 0);
-}
-if (!defined('MB_CASE_LOWER')) {
-    define('MB_CASE_LOWER', 1);
-}
-if (!defined('MB_CASE_TITLE')) {
-    define('MB_CASE_TITLE', 2);
-}
diff --git a/generated/php/vendor/symfony/polyfill-mbstring/composer.json b/generated/php/vendor/symfony/polyfill-mbstring/composer.json
deleted file mode 100644
index daa07f8..0000000
--- a/generated/php/vendor/symfony/polyfill-mbstring/composer.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-    "name": "symfony/polyfill-mbstring",
-    "type": "library",
-    "description": "Symfony polyfill for the Mbstring extension",
-    "keywords": ["polyfill", "shim", "compatibility", "portable", "mbstring"],
-    "homepage": "https://symfony.com",
-    "license": "MIT",
-    "authors": [
-        {
-            "name": "Nicolas Grekas",
-            "email": "p@tchwork.com"
-        },
-        {
-            "name": "Symfony Community",
-            "homepage": "https://symfony.com/contributors"
-        }
-    ],
-    "require": {
-        "php": ">=7.2",
-        "ext-iconv": "*"
-    },
-    "provide": {
-        "ext-mbstring": "*"
-    },
-    "autoload": {
-        "psr-4": { "Symfony\\Polyfill\\Mbstring\\": "" },
-        "files": [ "bootstrap.php" ]
-    },
-    "suggest": {
-        "ext-mbstring": "For best performance"
-    },
-    "minimum-stability": "dev",
-    "extra": {
-        "thanks": {
-            "name": "symfony/polyfill",
-            "url": "https://github.com/symfony/polyfill"
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/CHANGELOG b/generated/php/vendor/twig/twig/CHANGELOG
deleted file mode 100644
index 74877d6..0000000
--- a/generated/php/vendor/twig/twig/CHANGELOG
+++ /dev/null
@@ -1,569 +0,0 @@
-# 3.28.0 (2026-07-03)
-
- * Render backed enums using their backing value in the `html_attr` function
- * Fix empty Markup values being treated as truthy in and, or, xor, not, ternary, and elvis expressions
- * Fix a PHP 8.5 `chr()` deprecation when decoding an octal string escape sequence larger than `\377` (such as `"\777"`)
- * Mark `Twig\Markup` as `@final`; it will be final in Twig 4.0
- * Reduce memory usage and speed up the context restoration compiled at the end of `for` loops
- * Allow calling a macro with a dynamic name via the dot operator (`macros.(name)(args)`)
- * Report the column number in syntax errors and expose it via `Error::getTemplateColumn()`
- * Track the source offset of each token and expose it via `Token::getOffset()`
- * Fix nested `block()` calls to resolve against the overriding template when a block rendered through `block(name, template)` calls `parent()`
- * Deprecate the possibility to use a `block` tag within a capture node (like `set`)
- * Deprecate the possibility to use a `block` tag within a capture node (like `set`) in child templates
- * Deprecate using a `macro`, `extends`, or `use` tag outside the root of a template
- * Stop reporting a skipped test in `IntegrationTestCase` when there is no legacy test to run
- * Fix `markdown_to_html` to strip the indentation shared by all lines instead of mangling content that starts with a blank line
- * Make the `IntegrationTestCase` and `NodeTestCase` test helpers compatible with PHPUnit 11
- * Cast printed expressions to string so values that cannot be converted to a string (arrays, non-`Stringable` objects, ...) report a usable stack trace at the print location
- * Make the `include()` function return a `Markup` object so an assigned result is not re-escaped when printed
- * Skip the sandbox `__toString` check on arguments whose PHP parameter type cannot implicitly coerce to string
- * Document the criteria for marking a callable or tag as always allowed in a sandbox, and the list of built-in tags, filters, and functions that will be always allowed in Twig 4.0
- * Add an `always_allowed_in_sandbox` option for filters, functions, and tests, and an `isAlwaysAllowedInSandbox()` method for token parsers, to let authors mark callables and tags that are always allowed in sandbox mode without explicit allow-listing
- * Add an allow-list for tests to `Twig\Sandbox\SecurityPolicy`, with the safe built-in tests flagged as always allowed so they keep working without allow-listing
-
-# 3.27.1 (2026-05-30)
-
- * Fix array access with a `Stringable` key to coerce the key to string consistently instead of throwing in the optimized path
- * Fix sandbox replacing `IteratorAggregate` arguments (e.g. Symfony's `FormView`) by a plain array
-
-# 3.27.0 (2026-05-27)
-
- * Add a strict mode to `Twig\Sandbox\SecurityPolicy` to opt-in to the 4.0 behavior for the `extends`/`use` tags and the `parent`/`block`/`attribute` functions, which are otherwise still implicitly allowed in a sandbox
- * Deprecate the fact that the `parent`, `block`, and `attribute` functions are always allowed in a sandboxed template
- * Fix sandbox filter/tag/function allow-list bypass when the sandbox state changed between renders of a cached `Template` instance
- * Fix PHP 8.1+ implicit float-to-int deprecation triggered by sandboxed `ArrayAccess` attribute access with a float key
- * Restrict allowed classes in `Twig\Profiler\Profile::unserialize()` to prevent arbitrary class instantiation
- * Escape root profile name in `HtmlDumper`
- * Fix sandbox bypass in deprecated internal wrappers `twig_array_some()`, `twig_array_every()`, and `twig_check_arrow_in_sandbox()` (`src/Resources/core.php`)
- * Deprecate the `Twig\Sandbox\SourcePolicyInterface` interface with no replacement
- * Fix sandbox bypass in the "column" filter when sandboxing is enabled via `SourcePolicyInterface`
- * Fix sandbox `__toString` bypass via `Traversable` arguments to the `join` and `replace` filters (also covers containers that implement both `Stringable` and `Traversable`)
- * Fix sandbox `__toString` bypass via the `in` and `not in` operators
- * Prevent a stack overflow in `SandboxExtension::ensureToStringAllowed()` when a self-referencing iterable is passed to a sandboxed template
- * Add support for any expression as a dynamic mapping key (attribute access, filters, ...)
- * Fix sandbox `__toString` policy bypass via dynamic mapping keys
-
-# 3.26.0 (2026-05-20)
-
- * Document that the sandbox doesn't protect against resource exhaustion
- * Document `template_from_string` caveats when used in a sandboxed environment
- * Add docs on `Markup` about the goal of this class in the context of a sandbox
- * Pre-escape HTML input on the `spaceless` filter
- * Pre-escape HTML input on `inline_css` and `inky_to_html` filters
- * Fix XSS by adjusting `is_safe` annotation on HTML-emitting filters
- * [Profiler] Escape template and profile names in `HtmlDumper`
- * Fix unbounded memoisation of `IntlDateFormatter` / `NumberFormatter`
- * Fix sandbox bypass in the "column" filter
- * Fix sandbox bypass in the `{% sandbox %}` tag when including a preloaded template
- * Fix sandbox bypass: PHP code injection via `{% use %}` template name
- * Fix sandbox bypass: PHP code injection via `_self` / import macro reference
- * Fix sandbox bypass in object destructuring assignment
- * Fix sandbox bypass: propagate `Source` to `checkArrow` for source-policy sandboxing
- * Encode single quotes as `\x27` in `Compiler::string()` as a defense-in-depth measure
- * Fix sandbox `__toString` bypasses
- * Add `Twig\Node\CoercesChildrenToStringInterface` to let nodes declare which of their child nodes will be string-coerced at runtime so the sandbox wraps them with a `__toString` check
-
-# 3.25.0 (2026-05-17)
-
- * Add a `needs_is_sandboxed` option for filters, functions, and tests
- * Use deterministic suffixes for generated embed classes
- * Lazy-load `EscaperRuntime` in `EscaperExtension`
-
-# 3.24.0 (2026-03-17)
-
- * Deprecate not implementing the `getOperatorTokens()` method in `ExpressionParserInterface` implementations
- * Deprecate passing a non-`AbstractExpression` node to `Twig\Node\Expression\Binary\MatchesBinary` constructor
- * Deprecate passing a non-`AbstractExpression` node to `Parser::setParent()`
- * Add support for renaming variables in object destructuring (`{name: userName} = user`)
- * Add `html_attr_relaxed` escaping strategy that preserves :, @, [, and ] for front-end framework attribute names
- * Add support for short-circuiting in null-safe operator chains
- * Add the `html_attr` function and `html_attr_merge` as well as `html_attr_type` filters
-
-# 3.23.0 (2026-01-23)
-
- * Add `=` assignment operator (allows to set variables in expression or to replace the short-form of the set tag)
- * Add sequence, mapping, and object destructuring
- * Add `?.` null-safe operator
- * Add `===` and `!==` operators (equivalent to the `same as` and `not same as` tests)
- * Fix opcache preload warning for unlinked anonymous class
- * Fix spread operator behavior
-
-# 3.22.2 (2025-12-14)
-
- * Fix "cycle" with non-countable ArrayAccess + Traversable objects
- * Use "getShareDir" as an indicator of Symfony version in Symfony bundle
- * Fix escaper compatibility with PHP 8.5
-
-# 3.22.1 (2025-11-16)
-
- * Add support for Symfony 8
-
-# 3.22.0 (2025-10-29)
-
- * Add support for two words test in guard tag
- * Add `Environment::registerUndefinedTestCallback()`
- * Fix compatibility with Symfony 8
- * Fix accessing arrays with stringable objects as key
- * Avoid errors when failing to guess the template info for an error
- * Fix expression parser compatibility layer
- * Fix compiling 'index' with repr (not string) in EmbedNode
- * Update configuration keys + allow extra keys for CommonMark extensions
- * Allow usage of other Markdown converters than CommonMark in LeagueMarkdown
-
-# 3.21.1 (2025-05-03)
-
- * Fix ExtensionSet usage of BinaryOperatorExpressionParser
-
-# 3.21.0 (2025-05-02)
-
- * Fix wrong array index
- * Deprecate `Template::loadTemplate()`
- * Fix testing and expression when it evaluates to an instance of `Markup`
- * Add `ReturnPrimitiveTypeInterface` (and sub-interfaces for number, boolean, string, and array)
- * Add `SupportDefinedTestInterface` for expression nodes supporting the `defined` test
- * Deprecate using the `|` operator in an expression with `+` or `-` without using parentheses to clarify precedence
- * Deprecate operator precedence outside of the [0, 512] range
- * Introduce expression parser classes to describe operators and operands provided by extensions
-   instead of arrays (it comes with many deprecations that are documented in
-   the ``deprecated`` documentation chapter)
- * Deprecate the `Twig\ExpressionParser`, and `Twig\OperatorPrecedenceChange` classes
- * Add attributes `AsTwigFilter`, `AsTwigFunction`, and `AsTwigTest` to ease extension development
-
-# 3.20.0 (2025-02-13)
-
- * Fix support for ignoring syntax errors in an undefined handler in guard
- * Add configuration for Commonmark
- * Fix wrong array index
- * Bump minimum PHP version to 8.1
- * Add support for registering callbacks for undefined functions, filters or token parsers in the IntegrationTestCase
- * Use correct line number for `ForElseNode`
- * Fix timezone conversion on strings
-
-# 3.19.0 (2025-01-28)
-
- * Fix a security issue where escaping was missing when using `??`
- * Deprecate `Token::getType()`, use `Token::test()` instead
- * Add `Token::toEnglish()`
- * Add `ForElseNode`
- * Deprecate `Twig\ExpressionParser::parseOnlyArguments()` and
-  `Twig\ExpressionParser::parseArguments()` (use
-  `Twig\ExpressionParser::parseNamedArguments()` instead)
- * Fix `constant()` behavior when used with `??`
- * Add the `invoke` filter
- * Make `{}` optional for the `types` tag
- * Add `LastModifiedExtensionInterface` and implementation in `AbstractExtension` to track modification of runtime classes
- * Ignore static properties when using the dot operator
-
-# 3.18.0 (2024-12-29)
-
- * Support for invoking closures
- * Fix unary operator precedence change
- * Ignore `SyntaxError` exceptions from undefined handlers when using the `guard` tag
- * Add a way to stream template rendering (`TemplateWrapper::stream()` and `TemplateWrapper::streamBlock()`)
-
-# 3.17.1 (2024-12-12)
-
- * Fix the null coalescing operator when the test returns null
- * Fix the Elvis operator when used as '? :' instead of '?:'
-
-# 3.17.0 (2024-12-10)
-
- * Fix ArrayAccess with objects as keys
- * Support underscores in number literals
- * Deprecate `ConditionalExpression` and `NullCoalesceExpression` (use `ConditionalTernary` and `NullCoalesceBinary` instead)
-
-# 3.16.0 (2024-11-29)
-
- * Deprecate `InlinePrint`
- * Fix having macro variables starting with an underscore
- * Deprecate not passing a `Source` instance to `TokenStream`
- * Deprecate returning `null` from `TwigFilter::getSafe()` and `TwigFunction::getSafe()`, return `[]` instead
-
-# 3.15.0 (2024-11-17)
-
- * [BC BREAK] Add support for accessing class constants with the dot operator;
-   this can be a BC break if you don't use UPPERCASE constant names
- * Add Spanish inflector support for the `plural` and `singular` filters in the String extension
- * Deprecate `TempNameExpression` in favor of `LocalVariable`
- * Deprecate `NameExpression` in favor of `ContextVariable`
- * Deprecate `AssignNameExpression` in favor of `AssignContextVariable`
- * Remove `MacroAutoImportNodeVisitor`
- * Deprecate `MethodCallExpression` in favor of `MacroReferenceExpression`
- * Fix support for the "is defined" test on `_self.xxx` (auto-imported) macros
- * Fix support for the "is defined" test on inherited macros
- * Add named arguments support for the dot operator arguments (`foo.bar(some: arg)`)
- * Add named arguments support for macros
- * Add a new `guard` tag that allows to test if some Twig callables are available at compilation time
- * Allow arrow functions everywhere
- * Deprecate passing a string or an array to Twig callable arguments accepting arrow functions (pass a `\Closure`)
- * Add support for triggering deprecations for future operator precedence changes
- * Deprecate using the `not` unary operator in an expression with ``*``, ``/``, ``//``, or ``%`` without using explicit parentheses to clarify precedence
- * Deprecate using the `??` binary operator without explicit parentheses
- * Deprecate using the `~` binary operator in an expression with `+` or `-` without using parentheses to clarify precedence
- * Deprecate not passing `AbstractExpression` args to most constructor arguments for classes extending `AbstractExpression`
- * Fix `power` expressions with a negative number in parenthesis (`(-1) ** 2`)
- * Deprecate instantiating `Node` directly. Use `EmptyNode` or `Nodes` instead.
- * Add support for inline comments
- * Add `Profile::getStartTime()` and `Profile::getEndTime()`
- * Fix "ignore missing" when used on an "embed" tag
- * Fix the possibility to override an aliased block (via use)
- * Add template cache hot reload
- * Allow Twig callable argument names to be free-form (snake-case or camelCase) independently of the PHP callable signature
-   They were automatically converted to snake-cased before
- * Deprecate the `attribute` function; use the `.` notation and wrap the name with parenthesis instead
- * Add support for argument unpackaging
- * Add JSON support for the file extension escaping strategy
- * Support Markup instances (and any other \Stringable) as dynamic mapping keys
- * Deprecate the `sandbox` tag
- * Improve the way one can deprecate a Twig callable (use `deprecation_info` instead of the other callable options)
- * Add the `enum` function
- * Add support for logical `xor` operator
-
-# 3.14.2 (2024-11-07)
-
- * Fix an infinite recursion in the sandbox code
-
-# 3.14.1 (2024-11-06)
-
- * [BC BREAK] Fix a security issue in the sandbox mode allowing an attacker to call attributes on Array-like objects
-   They are now checked via the property policy
- * Fix a security issue in the sandbox mode allowing an attacker to be able to call `toString()`
-   under some circumstances on an object even if the `__toString()` method is not allowed by the security policy
-
-# 3.14.0 (2024-09-09)
-
- * Fix a security issue when an included sandboxed template has been loaded before without the sandbox context
- * Add the possibility to reset globals via `Environment::resetGlobals()`
- * Deprecate `Environment::mergeGlobals()`
-
-# 3.13.0 (2024-09-07)
-
- * Add the `types` tag (experimental)
- * Deprecate the `Twig\Test\NodeTestCase::getTests()` data provider, override `provideTests()` instead.
- * Mark `Twig\Test\NodeTestCase::getEnvironment()` as final, override `createEnvironment()` instead.
- * Deprecate `Twig\Test\NodeTestCase::getVariableGetter()`, call `createVariableGetter()` instead.
- * Deprecate `Twig\Test\NodeTestCase::getAttributeGetter()`, call `createAttributeGetter()` instead.
- * Deprecate not overriding `Twig\Test\IntegrationTestCase::getFixturesDirectory()`, this method will be abstract in 4.0
- * Marked `Twig\Test\IntegrationTestCase::getTests()` and `getLegacyTests()` as final
-
-# 3.12.0 (2024-08-29)
-
- * Deprecate the fact that the `extends` and `use` tags are always allowed in a sandboxed template.
-   This behavior will change in 4.0 where these tags will need to be explicitly allowed like any other tag.
- * Deprecate the "tag" constructor argument of the "Twig\Node\Node" class as the tag is now automatically set by the Parser when needed
- * Fix precedence of two-word tests when the first word is a valid test
- * Deprecate the `spaceless` filter
- * Deprecate some internal methods from `Parser`: `getBlockStack()`, `hasBlock()`, `getBlock()`, `hasMacro()`, `hasTraits()`, `getParent()`
- * Deprecate passing `null` to `Twig\Parser::setParent()`
- * Update `Node::__toString()` to include the node tag if set
- * Add support for integers in methods of `Twig\Node\Node` that take a Node name
- * Deprecate not passing a `BodyNode` instance as the body of a `ModuleNode` or `MacroNode` constructor
- * Deprecate returning "null" from "TokenParserInterface::parse()".
- * Deprecate `OptimizerNodeVisitor::OPTIMIZE_TEXT_NODES`
- * Fix performance regression when `use_yield` is `false` (which is the default)
- * Improve compatibility when `use_yield` is `false` (as extensions still using `echo` will work as is)
- * Accept colons (`:`) in addition to equals (`=`) to separate argument names and values in named arguments
- * Add the `html_cva` function (in the HTML extra package)
- * Add support for named arguments to the `block` and `attribute` functions
- * Throw a SyntaxError exception at compile time when a Twig callable has not the minimum number of required arguments
- * Add a `CallableArgumentsExtractor` class
- * Deprecate passing a name to `FunctionExpression`, `FilterExpression`, and `TestExpression`;
-   pass a `TwigFunction`, `TwigFilter`, or `TestFilter` instead
- * Deprecate all Twig callable attributes on `FunctionExpression`, `FilterExpression`, and `TestExpression`
- * Deprecate the `filter` node of `FilterExpression`
- * Add the notion of Twig callables (functions, filters, and tests)
- * Bump minimum PHP version to 8.0
- * Fix integration tests when a test has more than one data/expect section and deprecations
- * Add the `enum_cases` function
-
-# 3.11.2 (2024-11-06)
-
- * [BC BREAK] Fix a security issue in the sandbox mode allowing an attacker to call attributes on Array-like objects
-   They are now checked via the property policy
- * Fix a security issue in the sandbox mode allowing an attacker to be able to call `toString()`
-   under some circumstances on an object even if the `__toString()` method is not allowed by the security policy
-
-# 3.11.1 (2024-09-10)
-
- * Fix a security issue when an included sandboxed template has been loaded before without the sandbox context
-
-# 3.11.0 (2024-08-08)
-
- * Deprecate `OptimizerNodeVisitor::OPTIMIZE_RAW_FILTER`
- * Add `Twig\Cache\ChainCache` and `Twig\Cache\ReadOnlyFilesystemCache`
- * Add the possibility to deprecate attributes and nodes on `Node`
- * Add the possibility to add a package and a version to the `deprecated` tag
- * Add the possibility to add a package for filter/function/test deprecations
- * Mark `ConstantExpression` as being `@final`
- * Add the `find` filter
- * Fix optimizer mode validation in `OptimizerNodeVisitor`
- * Add the possibility to yield from a generator in `PrintNode`
- * Add the `shuffle` filter
- * Add the `singular` and `plural` filters in `StringExtension`
- * Deprecate the second argument of `Twig\Node\Expression\CallExpression::compileArguments()`
- * Deprecate `Twig\ExpressionParser\parseHashExpression()` in favor of
-   `Twig\ExpressionParser::parseMappingExpression()`
- * Deprecate `Twig\ExpressionParser\parseArrayExpression()` in favor of
-   `Twig\ExpressionParser::parseSequenceExpression()`
- * Add `sequence` and `mapping` tests
- * Deprecate `Twig\Node\Expression\NameExpression::isSimple()` and
-    `Twig\Node\Expression\NameExpression::isSpecial()`
-
-# 3.10.3 (2024-05-16)
-
- * Fix missing ; in generated code
-
-# 3.10.2 (2024-05-14)
-
- * Fix support for the deprecated escaper signature
-
-# 3.10.1 (2024-05-12)
-
- * Fix BC break on escaper extension
- * Fix constant return type
-
-# 3.10.0 (2024-05-11)
-
- * Make `CoreExtension::formatDate`, `CoreExtension::convertDate`, and
-   `CoreExtension::formatNumber` part of the public API
- * Add `needs_charset` option for filters and functions
- * Extract the escaping logic from the `EscaperExtension` class to a new
-   `EscaperRuntime` class.
-
-   The following methods from ``Twig\\Extension\\EscaperExtension`` are
-   deprecated: ``setEscaper()``, ``getEscapers()``, ``setSafeClasses``,
-   ``addSafeClasses()``. Use the same methods on the
-   ``Twig\\Runtime\\EscaperRuntime`` class instead.
-  * Fix capturing output from extensions that still use echo
-  * Fix a PHP warning in the Lexer on malformed templates
-  * Fix blocks not available under some circumstances
-  * Synchronize source context in templates when setting a Node on a Node
-
-# 3.9.3 (2024-04-18)
-
- * Add missing `twig_escape_filter_is_safe` deprecated function
- * Fix yield usage with CaptureNode
- * Add missing unwrap call when using a TemplateWrapper instance internally
- * Ensure Lexer is initialized early on
-
-# 3.9.2 (2024-04-17)
-
- * Fix usage of display_end hook
-
-# 3.9.1 (2024-04-17)
-
- * Fix missing `$blocks` variable in `CaptureNode`
-
-# 3.9.0 (2024-04-16)
-
- * Add support for PHP 8.4
- * Deprecate AbstractNodeVisitor
- * Deprecate passing Template to Environment::resolveTemplate(), Environment::load(), and Template::loadTemplate()
- * Add a new "yield" mode for output generation;
-   Node implementations that use "echo" or "print" should use "yield" instead;
-   all Node implementations should be flagged with `#[YieldReady]` once they've been made ready for "yield";
-   the "use_yield" Environment option can be turned on when all nodes have been made `#[YieldReady]`;
-   "yield" will be the only strategy supported in the next major version
- * Add return type for Symfony 7 compatibility
- * Fix premature loop exit in Security Policy lookup of allowed methods/properties
- * Deprecate all internal extension functions in favor of methods on the extension classes
- * Mark all extension functions as @internal
- * Add SourcePolicyInterface to selectively enable the Sandbox based on a template's Source
- * Throw a proper Twig exception when using cycle on an empty array
-
-# 3.8.0 (2023-11-21)
-
- * Catch errors thrown during template rendering
- * Fix IntlExtension::formatDateTime use of date formatter prototype
- * Fix premature loop exit in Security Policy lookup of allowed methods/properties
- * Remove NumberFormatter::TYPE_CURRENCY (deprecated in PHP 8.3)
- * Restore return type annotations
- * Allow Symfony 7 packages to be installed
- * Deprecate `twig_test_iterable` function. Use the native `is_iterable` instead.
-
-# 3.7.1 (2023-08-28)
-
- * Fix some phpdocs
-
-# 3.7.0 (2023-07-26)
-
- * Add support for the ...spread operator on arrays and hashes
-
-# 3.6.1 (2023-06-08)
-
- * Suppress some native return type deprecation messages
-
-# 3.6.0 (2023-05-03)
-
- * Allow psr/container 2.0
- * Add the new PHP 8.0 IntlDateFormatter::RELATIVE_* constants for date formatting
- * Make the Lexer initialize itself lazily
-
-# 3.5.1 (2023-02-08)
-
- * Arrow functions passed to the "reduce" filter now accept the current key as a third argument
- * Restores the leniency of the matches twig comparison
- * Fix error messages in sandboxed mode for "has some" and "has every"
-
-# 3.5.0 (2022-12-27)
-
- * Make Twig\ExpressionParser non-internal
- * Add "has some" and "has every" operators
- * Add Compile::reset()
- * Throw a better runtime error when the "matches" regexp is not valid
- * Add "twig *_names" intl functions
- * Fix optimizing closures callbacks
- * Add a better exception when getting an undefined constant via `constant`
- * Fix `if` nodes when outside of a block and with an empty body
-
-# 3.4.3 (2022-09-28)
-
- * Fix a security issue on filesystem loader (possibility to load a template outside a configured directory)
-
-# 3.4.2 (2022-08-12)
-
- * Allow inherited magic method to still run with calling class
- * Fix CallExpression::reflectCallable() throwing TypeError
- * Fix typo in naming (currency_code)
-
-# 3.4.1 (2022-05-17)
-
-* Fix optimizing non-public named closures
-
-# 3.4.0 (2022-05-22)
-
- * Add support for named closures
-
-# 3.3.10 (2022-04-06)
-
- * Enable bytecode invalidation when auto_reload is enabled
-
-# 3.3.9 (2022-03-25)
-
- * Fix custom escapers when using multiple Twig environments
- * Add support for "constant('class', object)"
- * Do not reuse internally generated variable names during parsing
-
-# 3.3.8 (2022-02-04)
-
- * Fix a security issue when in a sandbox: the `sort` filter must require a Closure for the `arrow` parameter
- * Fix deprecation notice on `round`
- * Fix call to deprecated `convertToHtml` method
-
-# 3.3.7 (2022-01-03)
-
-* Allow more null support when Twig expects a string (for better 8.1 support)
-* Only use Commonmark extensions if markdown enabled
-
-# 3.3.6 (2022-01-03)
-
-* Only use Commonmark extensions if markdown enabled
-
-# 3.3.5 (2022-01-03)
-
-* Allow CommonMark extensions to easily be added
-* Allow null when Twig expects a string (for better 8.1 support)
-* Make some performance optimizations
-* Allow Symfony translation contract v3+
-
-# 3.3.4 (2021-11-25)
-
- * Bump minimum supported Symfony component versions
- * Fix a deprecated message
-
-# 3.3.3 (2021-09-17)
-
- * Allow Symfony 6
- * Improve compatibility with PHP 8.1
- * Explicitly specify the encoding for mb_ord in JS escaper
-
-# 3.3.2 (2021-05-16)
-
- * Revert "Throw a proper exception when a template name is an absolute path (as it has never been supported)"
-
-# 3.3.1 (2021-05-12)
-
- * Fix PHP 8.1 compatibility
- * Throw a proper exception when a template name is an absolute path (as it has never been supported)
-
-# 3.3.0 (2021-02-08)
-
- * Fix macro calls in a "cache" tag
- * Add the slug filter
- * Allow extra bundle to be compatible with Twig 2
-
-# 3.2.1 (2021-01-05)
-
- * Fix extra bundle compat with older versions of Symfony
-
-# 3.2.0 (2021-01-05)
-
- * Add the Cache extension in the "extra" repositories: "cache" tag
- * Add "registerUndefinedTokenParserCallback"
- * Mark built-in node visitors as @internal
- * Fix "odd" not working for negative numbers
-
-# 3.1.1 (2020-10-27)
-
- * Fix "include(template_from_string())"
-
-# 3.1.0 (2020-10-21)
-
- * Fix sandbox support when using "include(template_from_string())"
- * Make round brackets optional for one argument tests like "same as" or "divisible by"
- * Add support for ES2015 style object initialisation shortcut { a } is the same as { 'a': a }
-
-# 3.0.5 (2020-08-05)
-
- * Fix twig_compare w.r.t. whitespace trimming
- * Fix sandbox not disabled if syntax error occurs within {% sandbox %} tag
- * Fix a regression when not using a space before an operator
- * Restrict callables to closures in filters
- * Allow trailing commas in argument lists (in calls as well as definitions)
-
-# 3.0.4 (2020-07-05)
-
- * Fix comparison operators
- * Fix options not taken into account when using "Michelf\MarkdownExtra"
- * Fix "Twig\Extra\Intl\IntlExtension::getCountryName()" to accept "null" as a first argument
- * Throw exception in case non-Traversable data is passed to "filter"
- * Fix context optimization on PHP 7.4
- * Fix PHP 8 compatibility
- * Fix ambiguous syntax parsing
-
-# 3.0.3 (2020-02-11)
-
- * Add a check to ensure that iconv() is defined
-
-# 3.0.2 (2020-02-11)
-
- * Avoid exceptions when an intl resource is not found
- * Fix implementation of case-insensitivity for method names
-
-# 3.0.1 (2019-12-28)
-
- * fixed Symfony 5.0 support for the HTML extra extension
-
-# 3.0.0 (2019-11-15)
-
- * fixed number formatter in Intl extra extension when using a formatter prototype
-
-# 3.0.0-BETA1 (2019-11-11)
-
- * removed the "if" condition support on the "for" tag
- * made the in, <, >, <=, >=, ==, and != operators more strict when comparing strings and integers/floats
- * removed the "filter" tag
- * added type hints everywhere
- * changed Environment::resolveTemplate() to always return a TemplateWrapper instance
- * removed Template::__toString()
- * removed Parser::isReservedMacroName()
- * removed SanboxedPrintNode
- * removed Node::setTemplateName()
- * made classes marked as "@final" final
- * removed InitRuntimeInterface, ExistsLoaderInterface, and SourceContextLoaderInterface
- * removed the "spaceless" tag
- * removed Twig\Environment::getBaseTemplateClass() and Twig\Environment::setBaseTemplateClass()
- * removed the "base_template_class" option on Twig\Environment
- * bumped minimum PHP version to 7.2
- * removed PSR-0 classes
diff --git a/generated/php/vendor/twig/twig/LICENSE b/generated/php/vendor/twig/twig/LICENSE
deleted file mode 100644
index fd8234e..0000000
--- a/generated/php/vendor/twig/twig/LICENSE
+++ /dev/null
@@ -1,27 +0,0 @@
-Copyright (c) 2009-present by the Twig Team.
-
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
-
-    * Redistributions of source code must retain the above copyright notice,
-      this list of conditions and the following disclaimer.
-    * Redistributions in binary form must reproduce the above copyright notice,
-      this list of conditions and the following disclaimer in the documentation
-      and/or other materials provided with the distribution.
-    * Neither the name of Twig nor the names of its contributors
-      may be used to endorse or promote products derived from this software
-      without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
-CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
-EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
-PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
-PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
-LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
-NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/generated/php/vendor/twig/twig/README.rst b/generated/php/vendor/twig/twig/README.rst
deleted file mode 100644
index 7bf8c67..0000000
--- a/generated/php/vendor/twig/twig/README.rst
+++ /dev/null
@@ -1,23 +0,0 @@
-Twig, the flexible, fast, and secure template language for PHP
-==============================================================
-
-Twig is a template language for PHP.
-
-Twig uses a syntax similar to the Django and Jinja template languages which
-inspired the Twig runtime environment.
-
-Sponsors
---------
-
-.. raw:: html
-
-    <a href="https://docs.blackfire.io/introduction?utm_source=twig&utm_medium=github_readme&utm_campaign=logo">
-        <img src="https://static.blackfire.io/assets/intemporals/logo/png/blackfire-io_secondary_horizontal_transparent.png?1" width="255px" alt="Blackfire.io">
-    </a>
-
-More Information
-----------------
-
-Read the `documentation`_ for more information.
-
-.. _documentation: https://twig.symfony.com/documentation
diff --git a/generated/php/vendor/twig/twig/composer.json b/generated/php/vendor/twig/twig/composer.json
deleted file mode 100644
index 788ebe7..0000000
--- a/generated/php/vendor/twig/twig/composer.json
+++ /dev/null
@@ -1,54 +0,0 @@
-{
-    "name": "twig/twig",
-    "type": "library",
-    "description": "Twig, the flexible, fast, and secure template language for PHP",
-    "keywords": ["templating"],
-    "homepage": "https://twig.symfony.com",
-    "license": "BSD-3-Clause",
-    "minimum-stability": "dev",
-    "authors": [
-        {
-            "name": "Fabien Potencier",
-            "email": "fabien@symfony.com",
-            "homepage": "http://fabien.potencier.org",
-            "role": "Lead Developer"
-        },
-        {
-            "name": "Twig Team",
-            "role": "Contributors"
-        },
-        {
-            "name": "Armin Ronacher",
-            "email": "armin.ronacher@active-4.com",
-            "role": "Project Founder"
-        }
-    ],
-    "require": {
-        "php": ">=8.1.0",
-        "symfony/deprecation-contracts": "^2.5|^3",
-        "symfony/polyfill-mbstring": "^1.3",
-        "symfony/polyfill-ctype": "^1.8"
-    },
-    "require-dev": {
-        "symfony/phpunit-bridge": "^5.4.9|^6.4|^7.0",
-        "psr/container": "^1.0|^2.0",
-        "phpstan/phpstan": "^2.0@stable",
-        "php-cs-fixer/shim": "^3.0@stable"
-    },
-    "autoload": {
-        "files": [
-            "src/Resources/core.php",
-            "src/Resources/debug.php",
-            "src/Resources/escaper.php",
-            "src/Resources/string_loader.php"
-        ],
-        "psr-4" : {
-            "Twig\\" : "src/"
-        }
-    },
-    "autoload-dev": {
-        "psr-4" : {
-            "Twig\\Tests\\" : "tests/"
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/AbstractTwigCallable.php b/generated/php/vendor/twig/twig/src/AbstractTwigCallable.php
deleted file mode 100644
index 4ea9f66..0000000
--- a/generated/php/vendor/twig/twig/src/AbstractTwigCallable.php
+++ /dev/null
@@ -1,199 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-abstract class AbstractTwigCallable implements TwigCallableInterface
-{
-    protected $options;
-
-    private $name;
-    private $dynamicName;
-    private $callable;
-    private $arguments;
-
-    public function __construct(string $name, $callable = null, array $options = [])
-    {
-        $this->name = $this->dynamicName = $name;
-        $this->callable = $callable;
-        $this->arguments = [];
-        $this->options = array_merge([
-            'needs_environment' => false,
-            'needs_context' => false,
-            'needs_charset' => false,
-            'needs_is_sandboxed' => false,
-            'is_variadic' => false,
-            'always_allowed_in_sandbox' => false,
-            'deprecation_info' => null,
-            'deprecated' => false,
-            'deprecating_package' => '',
-            'alternative' => null,
-        ], $options);
-
-        if ($this->options['deprecation_info'] && !$this->options['deprecation_info'] instanceof DeprecatedCallableInfo) {
-            throw new \LogicException(\sprintf('The "deprecation_info" option must be an instance of "%s".', DeprecatedCallableInfo::class));
-        }
-
-        if ($this->options['deprecated']) {
-            if ($this->options['deprecation_info']) {
-                throw new \LogicException('When setting the "deprecation_info" option, you need to remove the obsolete deprecated options.');
-            }
-
-            trigger_deprecation('twig/twig', '3.15', 'Using the "deprecated", "deprecating_package", and "alternative" options is deprecated, pass a "deprecation_info" one instead.');
-
-            $this->options['deprecation_info'] = new DeprecatedCallableInfo(
-                $this->options['deprecating_package'],
-                $this->options['deprecated'],
-                null,
-                $this->options['alternative'],
-            );
-        }
-
-        if ($this->options['deprecation_info']) {
-            $this->options['deprecation_info']->setName($name);
-            $this->options['deprecation_info']->setType($this->getType());
-        }
-    }
-
-    public function __toString(): string
-    {
-        return \sprintf('%s(%s)', static::class, $this->name);
-    }
-
-    public function getName(): string
-    {
-        return $this->name;
-    }
-
-    public function getDynamicName(): string
-    {
-        return $this->dynamicName;
-    }
-
-    /**
-     * @return callable|array{class-string, string}|null
-     */
-    public function getCallable()
-    {
-        return $this->callable;
-    }
-
-    public function getNodeClass(): string
-    {
-        return $this->options['node_class'];
-    }
-
-    public function needsCharset(): bool
-    {
-        return $this->options['needs_charset'];
-    }
-
-    public function needsEnvironment(): bool
-    {
-        return $this->options['needs_environment'];
-    }
-
-    public function needsContext(): bool
-    {
-        return $this->options['needs_context'];
-    }
-
-    public function needsIsSandboxed(): bool
-    {
-        return $this->options['needs_is_sandboxed'];
-    }
-
-    public function isAlwaysAllowedInSandbox(): bool
-    {
-        return $this->options['always_allowed_in_sandbox'];
-    }
-
-    /**
-     * @return static
-     */
-    public function withDynamicArguments(string $name, string $dynamicName, array $arguments): self
-    {
-        $new = clone $this;
-        $new->name = $name;
-        $new->dynamicName = $dynamicName;
-        $new->arguments = $arguments;
-
-        return $new;
-    }
-
-    /**
-     * @deprecated since Twig 3.12, use withDynamicArguments() instead
-     */
-    public function setArguments(array $arguments): void
-    {
-        trigger_deprecation('twig/twig', '3.12', 'The "%s::setArguments()" method is deprecated, use "%s::withDynamicArguments()" instead.', static::class, static::class);
-
-        $this->arguments = $arguments;
-    }
-
-    public function getArguments(): array
-    {
-        return $this->arguments;
-    }
-
-    public function isVariadic(): bool
-    {
-        return $this->options['is_variadic'];
-    }
-
-    public function isDeprecated(): bool
-    {
-        return (bool) $this->options['deprecation_info'];
-    }
-
-    public function triggerDeprecation(?string $file = null, ?int $line = null): void
-    {
-        $this->options['deprecation_info']->triggerDeprecation($file, $line);
-    }
-
-    /**
-     * @deprecated since Twig 3.15
-     */
-    public function getDeprecatingPackage(): string
-    {
-        trigger_deprecation('twig/twig', '3.15', 'The "%s" method is deprecated, use "%s::triggerDeprecation()" instead.', __METHOD__, static::class);
-
-        return $this->options['deprecating_package'];
-    }
-
-    /**
-     * @deprecated since Twig 3.15
-     */
-    public function getDeprecatedVersion(): string
-    {
-        trigger_deprecation('twig/twig', '3.15', 'The "%s" method is deprecated, use "%s::triggerDeprecation()" instead.', __METHOD__, static::class);
-
-        return \is_bool($this->options['deprecated']) ? '' : $this->options['deprecated'];
-    }
-
-    /**
-     * @deprecated since Twig 3.15
-     */
-    public function getAlternative(): ?string
-    {
-        trigger_deprecation('twig/twig', '3.15', 'The "%s" method is deprecated, use "%s::triggerDeprecation()" instead.', __METHOD__, static::class);
-
-        return $this->options['alternative'];
-    }
-
-    public function getMinimalNumberOfRequiredArguments(): int
-    {
-        return ($this->options['needs_charset'] ? 1 : 0) + ($this->options['needs_environment'] ? 1 : 0) + ($this->options['needs_context'] ? 1 : 0) + ($this->options['needs_is_sandboxed'] ? 1 : 0) + \count($this->arguments);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Attribute/AsTwigFilter.php b/generated/php/vendor/twig/twig/src/Attribute/AsTwigFilter.php
deleted file mode 100644
index 5689c9d..0000000
--- a/generated/php/vendor/twig/twig/src/Attribute/AsTwigFilter.php
+++ /dev/null
@@ -1,60 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Attribute;
-
-use Twig\DeprecatedCallableInfo;
-use Twig\TwigFilter;
-
-/**
- * Registers a method as template filter.
- *
- * If the first argument of the method has Twig\Environment type-hint, the filter will receive the current environment.
- * Additional arguments of the method come from the filter call.
- *
- *     #[AsTwigFilter(name: 'foo')]
- *     function fooFilter(Environment $env, $string, $arg1 = null, ...) { ... }
- *
- *    {{ 'string'|foo(arg1) }}
- *
- * @see TwigFilter
- */
-#[\Attribute(\Attribute::TARGET_METHOD | \Attribute::IS_REPEATABLE)]
-final class AsTwigFilter
-{
-    /**
-     * @param non-empty-string            $name                   The name of the filter in Twig
-     * @param bool|null                   $needsCharset           Whether the filter needs the charset passed as the first argument
-     * @param bool|null                   $needsEnvironment       Whether the filter needs the environment passed as the first argument, or after the charset
-     * @param bool|null                   $needsContext           Whether the filter needs the context array passed as the first argument, or after the charset and the environment
-     * @param bool|null                   $needsIsSandboxed       Whether the filter needs the current sandbox state (a boolean) passed as the first argument, or after the charset, the environment, and the context
-     * @param string[]|null               $isSafe                 List of formats in which you want the raw output to be printed unescaped
-     * @param string|array|null           $isSafeCallback         Function called at compilation time to determine if the filter is safe
-     * @param string|null                 $preEscape              Some filters may need to work on input that is already escaped or safe
-     * @param string[]|null               $preservesSafety        Preserves the safety of the value that the filter is applied to
-     * @param DeprecatedCallableInfo|null $deprecationInfo        Information about the deprecation
-     * @param bool|null                   $alwaysAllowedInSandbox Whether the filter is always allowed in sandbox mode, even when not explicitly allow-listed
-     */
-    public function __construct(
-        public string $name,
-        public ?bool $needsCharset = null,
-        public ?bool $needsEnvironment = null,
-        public ?bool $needsContext = null,
-        public ?bool $needsIsSandboxed = null,
-        public ?array $isSafe = null,
-        public string|array|null $isSafeCallback = null,
-        public ?string $preEscape = null,
-        public ?array $preservesSafety = null,
-        public ?DeprecatedCallableInfo $deprecationInfo = null,
-        public ?bool $alwaysAllowedInSandbox = null,
-    ) {
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Attribute/AsTwigFunction.php b/generated/php/vendor/twig/twig/src/Attribute/AsTwigFunction.php
deleted file mode 100644
index a0118c3..0000000
--- a/generated/php/vendor/twig/twig/src/Attribute/AsTwigFunction.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Attribute;
-
-use Twig\DeprecatedCallableInfo;
-use Twig\TwigFunction;
-
-/**
- * Registers a method as template function.
- *
- * If the first argument of the method has Twig\Environment type-hint, the function will receive the current environment.
- * Additional arguments of the method come from the function call.
- *
- *     #[AsTwigFunction(name: 'foo')]
- *     function fooFunction(Environment $env, string $string, $arg1 = null, ...) { ... }
- *
- *     {{ foo('string', arg1) }}
- *
- * @see TwigFunction
- */
-#[\Attribute(\Attribute::TARGET_METHOD | \Attribute::IS_REPEATABLE)]
-final class AsTwigFunction
-{
-    /**
-     * @param non-empty-string            $name                   The name of the function in Twig
-     * @param bool|null                   $needsCharset           Whether the function needs the charset passed as the first argument
-     * @param bool|null                   $needsEnvironment       Whether the function needs the environment passed as the first argument, or after the charset
-     * @param bool|null                   $needsContext           Whether the function needs the context array passed as the first argument, or after the charset and the environment
-     * @param bool|null                   $needsIsSandboxed       Whether the function needs the current sandbox state (a boolean) passed as the first argument, or after the charset, the environment, and the context
-     * @param string[]|null               $isSafe                 List of formats in which you want the raw output to be printed unescaped
-     * @param string|array|null           $isSafeCallback         Function called at compilation time to determine if the function is safe
-     * @param DeprecatedCallableInfo|null $deprecationInfo        Information about the deprecation
-     * @param bool|null                   $alwaysAllowedInSandbox Whether the function is always allowed in sandbox mode, even when not explicitly allow-listed
-     */
-    public function __construct(
-        public string $name,
-        public ?bool $needsCharset = null,
-        public ?bool $needsEnvironment = null,
-        public ?bool $needsContext = null,
-        public ?bool $needsIsSandboxed = null,
-        public ?array $isSafe = null,
-        public string|array|null $isSafeCallback = null,
-        public ?DeprecatedCallableInfo $deprecationInfo = null,
-        public ?bool $alwaysAllowedInSandbox = null,
-    ) {
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Attribute/AsTwigTest.php b/generated/php/vendor/twig/twig/src/Attribute/AsTwigTest.php
deleted file mode 100644
index 707424d..0000000
--- a/generated/php/vendor/twig/twig/src/Attribute/AsTwigTest.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Attribute;
-
-use Twig\DeprecatedCallableInfo;
-use Twig\TwigTest;
-
-/**
- * Registers a method as template test.
- *
- * The first argument is the value to test and the other arguments are the
- * arguments passed to the test in the template.
- *
- *     #[AsTwigTest(name: 'foo')]
- *     public function fooTest($value, $arg1 = null) { ... }
- *
- *     {% if value is foo(arg1) %}
- *
- * @see TwigTest
- */
-#[\Attribute(\Attribute::TARGET_METHOD | \Attribute::IS_REPEATABLE)]
-final class AsTwigTest
-{
-    /**
-     * @param non-empty-string            $name                   The name of the test in Twig
-     * @param bool|null                   $needsCharset           Whether the test needs the charset passed as the first argument
-     * @param bool|null                   $needsEnvironment       Whether the test needs the environment passed as the first argument, or after the charset
-     * @param bool|null                   $needsContext           Whether the test needs the context array passed as the first argument, or after the charset and the environment
-     * @param bool|null                   $needsIsSandboxed       Whether the test needs the current sandbox state (a boolean) passed as the first argument, or after the charset, the environment, and the context
-     * @param DeprecatedCallableInfo|null $deprecationInfo        Information about the deprecation
-     * @param bool|null                   $alwaysAllowedInSandbox Whether the test is always allowed in sandbox mode, even when not explicitly allow-listed
-     */
-    public function __construct(
-        public string $name,
-        public ?bool $needsCharset = null,
-        public ?bool $needsEnvironment = null,
-        public ?bool $needsContext = null,
-        public ?bool $needsIsSandboxed = null,
-        public ?DeprecatedCallableInfo $deprecationInfo = null,
-        public ?bool $alwaysAllowedInSandbox = null,
-    ) {
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Attribute/FirstClassTwigCallableReady.php b/generated/php/vendor/twig/twig/src/Attribute/FirstClassTwigCallableReady.php
deleted file mode 100644
index ffd8cff..0000000
--- a/generated/php/vendor/twig/twig/src/Attribute/FirstClassTwigCallableReady.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Attribute;
-
-/**
- * Marks nodes that are ready to accept a TwigCallable instead of its name.
- */
-#[\Attribute(\Attribute::TARGET_METHOD)]
-final class FirstClassTwigCallableReady
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Attribute/YieldReady.php b/generated/php/vendor/twig/twig/src/Attribute/YieldReady.php
deleted file mode 100644
index 335c435..0000000
--- a/generated/php/vendor/twig/twig/src/Attribute/YieldReady.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Attribute;
-
-/**
- * Marks nodes that are ready for using "yield" instead of "echo" or "print()" for rendering.
- */
-#[\Attribute(\Attribute::TARGET_CLASS)]
-final class YieldReady
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Cache/CacheInterface.php b/generated/php/vendor/twig/twig/src/Cache/CacheInterface.php
deleted file mode 100644
index 6e8c409..0000000
--- a/generated/php/vendor/twig/twig/src/Cache/CacheInterface.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Cache;
-
-/**
- * Interface implemented by cache classes.
- *
- * It is highly recommended to always store templates on the filesystem to
- * benefit from the PHP opcode cache. This interface is mostly useful if you
- * need to implement a custom strategy for storing templates on the filesystem.
- *
- * @author Andrew Tch <andrew@noop.lv>
- */
-interface CacheInterface
-{
-    /**
-     * Generates a cache key for the given template class name.
-     */
-    public function generateKey(string $name, string $className): string;
-
-    /**
-     * Writes the compiled template to cache.
-     *
-     * @param string $content The template representation as a PHP class
-     */
-    public function write(string $key, string $content): void;
-
-    /**
-     * Loads a template from the cache.
-     */
-    public function load(string $key): void;
-
-    /**
-     * Returns the modification timestamp of a key.
-     */
-    public function getTimestamp(string $key): int;
-}
diff --git a/generated/php/vendor/twig/twig/src/Cache/ChainCache.php b/generated/php/vendor/twig/twig/src/Cache/ChainCache.php
deleted file mode 100644
index 1c2098f..0000000
--- a/generated/php/vendor/twig/twig/src/Cache/ChainCache.php
+++ /dev/null
@@ -1,88 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Cache;
-
-/**
- * Chains several caches together.
- *
- * Cached items are fetched from the first cache having them in its data store.
- * They are saved and deleted in all adapters at once.
- *
- * @author Quentin Devos <quentin@devos.pm>
- */
-final class ChainCache implements CacheInterface, RemovableCacheInterface
-{
-    /**
-     * @param iterable<CacheInterface> $caches The ordered list of caches used to store and fetch cached items
-     */
-    public function __construct(
-        private iterable $caches,
-    ) {
-    }
-
-    public function generateKey(string $name, string $className): string
-    {
-        return $className.'#'.$name;
-    }
-
-    public function write(string $key, string $content): void
-    {
-        $splitKey = $this->splitKey($key);
-
-        foreach ($this->caches as $cache) {
-            $cache->write($cache->generateKey(...$splitKey), $content);
-        }
-    }
-
-    public function load(string $key): void
-    {
-        [$name, $className] = $this->splitKey($key);
-
-        foreach ($this->caches as $cache) {
-            $cache->load($cache->generateKey($name, $className));
-
-            if (class_exists($className, false)) {
-                break;
-            }
-        }
-    }
-
-    public function getTimestamp(string $key): int
-    {
-        $splitKey = $this->splitKey($key);
-
-        foreach ($this->caches as $cache) {
-            if (0 < $timestamp = $cache->getTimestamp($cache->generateKey(...$splitKey))) {
-                return $timestamp;
-            }
-        }
-
-        return 0;
-    }
-
-    public function remove(string $name, string $cls): void
-    {
-        foreach ($this->caches as $cache) {
-            if ($cache instanceof RemovableCacheInterface) {
-                $cache->remove($name, $cls);
-            }
-        }
-    }
-
-    /**
-     * @return string[]
-     */
-    private function splitKey(string $key): array
-    {
-        return array_reverse(explode('#', $key, 2));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Cache/FilesystemCache.php b/generated/php/vendor/twig/twig/src/Cache/FilesystemCache.php
deleted file mode 100644
index 5840585..0000000
--- a/generated/php/vendor/twig/twig/src/Cache/FilesystemCache.php
+++ /dev/null
@@ -1,95 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Cache;
-
-/**
- * Implements a cache on the filesystem.
- *
- * @author Andrew Tch <andrew@noop.lv>
- */
-class FilesystemCache implements CacheInterface, RemovableCacheInterface
-{
-    public const FORCE_BYTECODE_INVALIDATION = 1;
-
-    private $directory;
-    private $options;
-
-    public function __construct(string $directory, int $options = 0)
-    {
-        $this->directory = rtrim($directory, '\/').'/';
-        $this->options = $options;
-    }
-
-    public function generateKey(string $name, string $className): string
-    {
-        $hash = hash(\PHP_VERSION_ID < 80100 ? 'sha256' : 'xxh128', $className);
-
-        return $this->directory.$hash[0].$hash[1].'/'.$hash.'.php';
-    }
-
-    public function load(string $key): void
-    {
-        if (is_file($key)) {
-            @include_once $key;
-        }
-    }
-
-    public function write(string $key, string $content): void
-    {
-        $dir = \dirname($key);
-        if (!is_dir($dir)) {
-            if (false === @mkdir($dir, 0777, true)) {
-                clearstatcache(true, $dir);
-                if (!is_dir($dir)) {
-                    throw new \RuntimeException(\sprintf('Unable to create the cache directory (%s).', $dir));
-                }
-            }
-        } elseif (!is_writable($dir)) {
-            throw new \RuntimeException(\sprintf('Unable to write in the cache directory (%s).', $dir));
-        }
-
-        $tmpFile = tempnam($dir, basename($key));
-        if (false !== @file_put_contents($tmpFile, $content) && @rename($tmpFile, $key)) {
-            @chmod($key, 0666 & ~umask());
-
-            if (self::FORCE_BYTECODE_INVALIDATION == ($this->options & self::FORCE_BYTECODE_INVALIDATION)) {
-                // Compile cached file into bytecode cache
-                if (\function_exists('opcache_invalidate') && filter_var(\ini_get('opcache.enable'), \FILTER_VALIDATE_BOOLEAN)) {
-                    @opcache_invalidate($key, true);
-                } elseif (\function_exists('apc_compile_file')) {
-                    apc_compile_file($key);
-                }
-            }
-
-            return;
-        }
-
-        throw new \RuntimeException(\sprintf('Failed to write cache file "%s".', $key));
-    }
-
-    public function remove(string $name, string $cls): void
-    {
-        $key = $this->generateKey($name, $cls);
-        if (!@unlink($key) && file_exists($key)) {
-            throw new \RuntimeException(\sprintf('Failed to delete cache file "%s".', $key));
-        }
-    }
-
-    public function getTimestamp(string $key): int
-    {
-        if (!is_file($key)) {
-            return 0;
-        }
-
-        return (int) @filemtime($key);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Cache/NullCache.php b/generated/php/vendor/twig/twig/src/Cache/NullCache.php
deleted file mode 100644
index 1ae2169..0000000
--- a/generated/php/vendor/twig/twig/src/Cache/NullCache.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Cache;
-
-/**
- * Implements a no-cache strategy.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class NullCache implements CacheInterface, RemovableCacheInterface
-{
-    public function generateKey(string $name, string $className): string
-    {
-        return '';
-    }
-
-    public function write(string $key, string $content): void
-    {
-    }
-
-    public function load(string $key): void
-    {
-    }
-
-    public function getTimestamp(string $key): int
-    {
-        return 0;
-    }
-
-    public function remove(string $name, string $cls): void
-    {
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Cache/ReadOnlyFilesystemCache.php b/generated/php/vendor/twig/twig/src/Cache/ReadOnlyFilesystemCache.php
deleted file mode 100644
index 3ba6514..0000000
--- a/generated/php/vendor/twig/twig/src/Cache/ReadOnlyFilesystemCache.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Cache;
-
-/**
- * Implements a cache on the filesystem that can only be read, not written to.
- *
- * @author Quentin Devos <quentin@devos.pm>
- */
-class ReadOnlyFilesystemCache extends FilesystemCache
-{
-    public function write(string $key, string $content): void
-    {
-        // Do nothing with the content, it's a read-only filesystem.
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Cache/RemovableCacheInterface.php b/generated/php/vendor/twig/twig/src/Cache/RemovableCacheInterface.php
deleted file mode 100644
index 05da569..0000000
--- a/generated/php/vendor/twig/twig/src/Cache/RemovableCacheInterface.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Cache;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface RemovableCacheInterface
-{
-    public function remove(string $name, string $cls): void;
-}
diff --git a/generated/php/vendor/twig/twig/src/Compiler.php b/generated/php/vendor/twig/twig/src/Compiler.php
deleted file mode 100644
index 976030f..0000000
--- a/generated/php/vendor/twig/twig/src/Compiler.php
+++ /dev/null
@@ -1,263 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Node\Node;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class Compiler
-{
-    private $lastLine;
-    private $source;
-    private $indentation;
-    private $debugInfo = [];
-    private $sourceOffset;
-    private $sourceLine;
-    private $varNameSalt = 0;
-    private $didUseEcho = false;
-    private $didUseEchoStack = [];
-
-    public function __construct(
-        private Environment $env,
-    ) {
-    }
-
-    public function getEnvironment(): Environment
-    {
-        return $this->env;
-    }
-
-    public function getSource(): string
-    {
-        return $this->source;
-    }
-
-    /**
-     * @return $this
-     */
-    public function reset(int $indentation = 0)
-    {
-        $this->lastLine = null;
-        $this->source = '';
-        $this->debugInfo = [];
-        $this->sourceOffset = 0;
-        // source code starts at 1 (as we then increment it when we encounter new lines)
-        $this->sourceLine = 1;
-        $this->indentation = $indentation;
-        $this->varNameSalt = 0;
-
-        return $this;
-    }
-
-    /**
-     * @return $this
-     */
-    public function compile(Node $node, int $indentation = 0)
-    {
-        $this->reset($indentation);
-        $this->didUseEchoStack[] = $this->didUseEcho;
-
-        try {
-            $this->didUseEcho = false;
-            $node->compile($this);
-
-            if ($this->didUseEcho) {
-                trigger_deprecation('twig/twig', '3.9', 'Using "%s" is deprecated, use "yield" instead in "%s", then flag the class with #[\Twig\Attribute\YieldReady].', $this->didUseEcho, $node::class);
-            }
-
-            return $this;
-        } finally {
-            $this->didUseEcho = array_pop($this->didUseEchoStack);
-        }
-    }
-
-    /**
-     * @return $this
-     */
-    public function subcompile(Node $node, bool $raw = true)
-    {
-        if (!$raw) {
-            $this->source .= str_repeat(' ', $this->indentation * 4);
-        }
-
-        $this->didUseEchoStack[] = $this->didUseEcho;
-
-        try {
-            $this->didUseEcho = false;
-            $node->compile($this);
-
-            if ($this->didUseEcho) {
-                trigger_deprecation('twig/twig', '3.9', 'Using "%s" is deprecated, use "yield" instead in "%s", then flag the class with #[\Twig\Attribute\YieldReady].', $this->didUseEcho, $node::class);
-            }
-
-            return $this;
-        } finally {
-            $this->didUseEcho = array_pop($this->didUseEchoStack);
-        }
-    }
-
-    /**
-     * Adds a raw string to the compiled code.
-     *
-     * @return $this
-     */
-    public function raw(string $string)
-    {
-        $this->checkForEcho($string);
-        $this->source .= $string;
-
-        return $this;
-    }
-
-    /**
-     * Writes a string to the compiled code by adding indentation.
-     *
-     * @return $this
-     */
-    public function write(...$strings)
-    {
-        foreach ($strings as $string) {
-            $this->checkForEcho($string);
-            $this->source .= str_repeat(' ', $this->indentation * 4).$string;
-        }
-
-        return $this;
-    }
-
-    /**
-     * Adds a quoted string to the compiled code.
-     *
-     * @return $this
-     */
-    public function string(string $value)
-    {
-        // Single quotes are encoded as \x27 (not \') as a defense-in-depth measure:
-        // it guarantees that the compiled output never contains a literal "'" derived
-        // from user input, which prevents breaking out of a surrounding single-quoted
-        // PHP context if a caller mistakenly concatenates the result into one.
-        // \' is not a recognized escape sequence in PHP double-quoted strings (the
-        // backslash would be kept literally), so \x27 is used instead.
-        $this->source .= \sprintf('"%s"', str_replace("'", '\\x27', addcslashes($value, "\0\t\"\$\\")));
-
-        return $this;
-    }
-
-    /**
-     * Returns a PHP representation of a given value.
-     *
-     * @return $this
-     */
-    public function repr($value)
-    {
-        if (\is_int($value) || \is_float($value)) {
-            if (false !== $locale = setlocale(\LC_NUMERIC, '0')) {
-                setlocale(\LC_NUMERIC, 'C');
-            }
-
-            $this->raw(var_export($value, true));
-
-            if (false !== $locale) {
-                setlocale(\LC_NUMERIC, $locale);
-            }
-        } elseif (null === $value) {
-            $this->raw('null');
-        } elseif (\is_bool($value)) {
-            $this->raw($value ? 'true' : 'false');
-        } elseif (\is_array($value)) {
-            $this->raw('[');
-            $first = true;
-            foreach ($value as $key => $v) {
-                if (!$first) {
-                    $this->raw(', ');
-                }
-                $first = false;
-                $this->repr($key);
-                $this->raw(' => ');
-                $this->repr($v);
-            }
-            $this->raw(']');
-        } else {
-            $this->string($value);
-        }
-
-        return $this;
-    }
-
-    /**
-     * @return $this
-     */
-    public function addDebugInfo(Node $node)
-    {
-        if ($node->getTemplateLine() != $this->lastLine) {
-            $this->write(\sprintf("// line %d\n", $node->getTemplateLine()));
-
-            $this->sourceLine += substr_count($this->source, "\n", $this->sourceOffset);
-            $this->sourceOffset = \strlen($this->source);
-            $this->debugInfo[$this->sourceLine] = $node->getTemplateLine();
-
-            $this->lastLine = $node->getTemplateLine();
-        }
-
-        return $this;
-    }
-
-    public function getDebugInfo(): array
-    {
-        ksort($this->debugInfo);
-
-        return $this->debugInfo;
-    }
-
-    /**
-     * @return $this
-     */
-    public function indent(int $step = 1)
-    {
-        $this->indentation += $step;
-
-        return $this;
-    }
-
-    /**
-     * @return $this
-     *
-     * @throws \LogicException When trying to outdent too much so the indentation would become negative
-     */
-    public function outdent(int $step = 1)
-    {
-        // can't outdent by more steps than the current indentation level
-        if ($this->indentation < $step) {
-            throw new \LogicException('Unable to call outdent() as the indentation would become negative.');
-        }
-
-        $this->indentation -= $step;
-
-        return $this;
-    }
-
-    public function getVarName(): string
-    {
-        return \sprintf('_v%d', $this->varNameSalt++);
-    }
-
-    private function checkForEcho(string $string): void
-    {
-        if ($this->didUseEcho) {
-            return;
-        }
-
-        $this->didUseEcho = preg_match('/^\s*+(echo|print)\b/', $string, $m) ? $m[1] : false;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/DeprecatedCallableInfo.php b/generated/php/vendor/twig/twig/src/DeprecatedCallableInfo.php
deleted file mode 100644
index 2db9f3d..0000000
--- a/generated/php/vendor/twig/twig/src/DeprecatedCallableInfo.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class DeprecatedCallableInfo
-{
-    private string $type;
-    private string $name;
-
-    public function __construct(
-        private string $package,
-        private string $version,
-        private ?string $altName = null,
-        private ?string $altPackage = null,
-        private ?string $altVersion = null,
-    ) {
-    }
-
-    public function setType(string $type): void
-    {
-        $this->type = $type;
-    }
-
-    public function setName(string $name): void
-    {
-        $this->name = $name;
-    }
-
-    public function triggerDeprecation(?string $file = null, ?int $line = null): void
-    {
-        $message = \sprintf('Twig %s "%s" is deprecated', ucfirst($this->type), $this->name);
-
-        if ($this->altName) {
-            $message .= \sprintf('; use "%s"', $this->altName);
-            if ($this->altPackage) {
-                $message .= \sprintf(' from the "%s" package', $this->altPackage);
-            }
-            if ($this->altVersion) {
-                $message .= \sprintf(' (available since version %s)', $this->altVersion);
-            }
-            $message .= ' instead';
-        }
-
-        if ($file) {
-            $message .= \sprintf(' in %s', $file);
-            if ($line) {
-                $message .= \sprintf(' at line %d', $line);
-            }
-        }
-
-        $message .= '.';
-
-        trigger_deprecation($this->package, $this->version, $message);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Environment.php b/generated/php/vendor/twig/twig/src/Environment.php
deleted file mode 100644
index 2727997..0000000
--- a/generated/php/vendor/twig/twig/src/Environment.php
+++ /dev/null
@@ -1,953 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Cache\CacheInterface;
-use Twig\Cache\FilesystemCache;
-use Twig\Cache\NullCache;
-use Twig\Cache\RemovableCacheInterface;
-use Twig\Error\Error;
-use Twig\Error\LoaderError;
-use Twig\Error\RuntimeError;
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\ExpressionParsers;
-use Twig\Extension\CoreExtension;
-use Twig\Extension\EscaperExtension;
-use Twig\Extension\ExtensionInterface;
-use Twig\Extension\OptimizerExtension;
-use Twig\Extension\YieldNotReadyExtension;
-use Twig\Loader\ArrayLoader;
-use Twig\Loader\ChainLoader;
-use Twig\Loader\LoaderInterface;
-use Twig\Node\ModuleNode;
-use Twig\Node\Node;
-use Twig\NodeVisitor\NodeVisitorInterface;
-use Twig\Runtime\EscaperRuntime;
-use Twig\RuntimeLoader\FactoryRuntimeLoader;
-use Twig\RuntimeLoader\RuntimeLoaderInterface;
-use Twig\TokenParser\TokenParserInterface;
-
-/**
- * Stores the Twig configuration and renders templates.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class Environment
-{
-    public const VERSION = '3.28.0';
-    public const VERSION_ID = 32800;
-    public const MAJOR_VERSION = 3;
-    public const MINOR_VERSION = 28;
-    public const RELEASE_VERSION = 0;
-    public const EXTRA_VERSION = '';
-
-    private $charset;
-    private $loader;
-    private $debug;
-    private $autoReload;
-    private $cache;
-    private $lexer;
-    private $parser;
-    private $compiler;
-    /** @var array<string, mixed> */
-    private $globals = [];
-    private $resolvedGlobals;
-    private $loadedTemplates;
-    private $strictVariables;
-    private $originalCache;
-    private $extensionSet;
-    private $runtimeLoaders = [];
-    private $runtimes = [];
-    private $optionsHash;
-    /** @var bool */
-    private $useYield;
-    private $defaultRuntimeLoader;
-    private array $hotCache = [];
-
-    /**
-     * Constructor.
-     *
-     * Available options:
-     *
-     *  * debug: When set to true, it automatically set "auto_reload" to true as
-     *           well (default to false).
-     *
-     *  * charset: The charset used by the templates (default to UTF-8).
-     *
-     *  * cache: An absolute path where to store the compiled templates,
-     *           a \Twig\Cache\CacheInterface implementation,
-     *           or false to disable compilation cache (default).
-     *
-     *  * auto_reload: Whether to reload the template if the original source changed.
-     *                 If you don't provide the auto_reload option, it will be
-     *                 determined automatically based on the debug value.
-     *
-     *  * strict_variables: Whether to ignore invalid variables in templates
-     *                      (default to false).
-     *
-     *  * autoescape: Whether to enable auto-escaping (default to html):
-     *                  * false: disable auto-escaping
-     *                  * html, js: set the autoescaping to one of the supported strategies
-     *                  * name: set the autoescaping strategy based on the template name extension
-     *                  * PHP callback: a PHP callback that returns an escaping strategy based on the template "name"
-     *
-     *  * optimizations: A flag that indicates which optimizations to apply
-     *                   (default to -1 which means that all optimizations are enabled;
-     *                   set it to 0 to disable).
-     *
-     *  * use_yield: true: forces templates to exclusively use "yield" instead of "echo" (all extensions must be yield ready)
-     *               false (default): allows templates to use a mix of "yield" and "echo" calls to allow for a progressive migration
-     *               Switch to "true" when possible as this will be the only supported mode in Twig 4.0
-     */
-    public function __construct(LoaderInterface $loader, array $options = [])
-    {
-        $this->setLoader($loader);
-
-        $options = array_merge([
-            'debug' => false,
-            'charset' => 'UTF-8',
-            'strict_variables' => false,
-            'autoescape' => 'html',
-            'cache' => false,
-            'auto_reload' => null,
-            'optimizations' => -1,
-            'use_yield' => false,
-        ], $options);
-
-        $this->useYield = (bool) $options['use_yield'];
-        $this->debug = (bool) $options['debug'];
-        $this->setCharset($options['charset'] ?? 'UTF-8');
-        $this->autoReload = null === $options['auto_reload'] ? $this->debug : (bool) $options['auto_reload'];
-        $this->strictVariables = (bool) $options['strict_variables'];
-        $this->setCache($options['cache']);
-        $this->extensionSet = new ExtensionSet();
-        $this->defaultRuntimeLoader = new FactoryRuntimeLoader([
-            EscaperRuntime::class => function () { return new EscaperRuntime($this->charset); },
-        ]);
-
-        $this->addExtension(new CoreExtension());
-        $escaperExt = new EscaperExtension($options['autoescape']);
-        $escaperExt->setEnvironment($this, false);
-        $this->addExtension($escaperExt);
-        if (\PHP_VERSION_ID >= 80000) {
-            $this->addExtension(new YieldNotReadyExtension($this->useYield));
-        }
-        $this->addExtension(new OptimizerExtension($options['optimizations']));
-    }
-
-    /**
-     * @internal
-     */
-    public function useYield(): bool
-    {
-        return $this->useYield;
-    }
-
-    /**
-     * Enables debugging mode.
-     *
-     * @return void
-     */
-    public function enableDebug()
-    {
-        $this->debug = true;
-        $this->updateOptionsHash();
-    }
-
-    /**
-     * Disables debugging mode.
-     *
-     * @return void
-     */
-    public function disableDebug()
-    {
-        $this->debug = false;
-        $this->updateOptionsHash();
-    }
-
-    /**
-     * Checks if debug mode is enabled.
-     *
-     * @return bool true if debug mode is enabled, false otherwise
-     */
-    public function isDebug()
-    {
-        return $this->debug;
-    }
-
-    /**
-     * Enables the auto_reload option.
-     *
-     * @return void
-     */
-    public function enableAutoReload()
-    {
-        $this->autoReload = true;
-    }
-
-    /**
-     * Disables the auto_reload option.
-     *
-     * @return void
-     */
-    public function disableAutoReload()
-    {
-        $this->autoReload = false;
-    }
-
-    /**
-     * Checks if the auto_reload option is enabled.
-     *
-     * @return bool true if auto_reload is enabled, false otherwise
-     */
-    public function isAutoReload()
-    {
-        return $this->autoReload;
-    }
-
-    /**
-     * Enables the strict_variables option.
-     *
-     * @return void
-     */
-    public function enableStrictVariables()
-    {
-        $this->strictVariables = true;
-        $this->updateOptionsHash();
-    }
-
-    /**
-     * Disables the strict_variables option.
-     *
-     * @return void
-     */
-    public function disableStrictVariables()
-    {
-        $this->strictVariables = false;
-        $this->updateOptionsHash();
-    }
-
-    /**
-     * Checks if the strict_variables option is enabled.
-     *
-     * @return bool true if strict_variables is enabled, false otherwise
-     */
-    public function isStrictVariables()
-    {
-        return $this->strictVariables;
-    }
-
-    public function removeCache(string $name): void
-    {
-        $cls = $this->getTemplateClass($name);
-        $this->hotCache[$name] = $cls.'_'.bin2hex(random_bytes(16));
-
-        if ($this->cache instanceof RemovableCacheInterface) {
-            $this->cache->remove($name, $cls);
-        } else {
-            throw new \LogicException(\sprintf('The "%s" cache class does not support removing template cache as it does not implement the "RemovableCacheInterface" interface.', \get_class($this->cache)));
-        }
-    }
-
-    /**
-     * Gets the current cache implementation.
-     *
-     * @param bool $original Whether to return the original cache option or the real cache instance
-     *
-     * @return CacheInterface|string|false A Twig\Cache\CacheInterface implementation,
-     *                                     an absolute path to the compiled templates,
-     *                                     or false to disable cache
-     */
-    public function getCache($original = true)
-    {
-        return $original ? $this->originalCache : $this->cache;
-    }
-
-    /**
-     * Sets the current cache implementation.
-     *
-     * @param CacheInterface|string|false $cache A Twig\Cache\CacheInterface implementation,
-     *                                           an absolute path to the compiled templates,
-     *                                           or false to disable cache
-     *
-     * @return void
-     */
-    public function setCache($cache)
-    {
-        if (\is_string($cache)) {
-            $this->originalCache = $cache;
-            $this->cache = new FilesystemCache($cache, $this->autoReload ? FilesystemCache::FORCE_BYTECODE_INVALIDATION : 0);
-        } elseif (false === $cache) {
-            $this->originalCache = $cache;
-            $this->cache = new NullCache();
-        } elseif ($cache instanceof CacheInterface) {
-            $this->originalCache = $this->cache = $cache;
-        } else {
-            throw new \LogicException('Cache can only be a string, false, or a \Twig\Cache\CacheInterface implementation.');
-        }
-    }
-
-    /**
-     * Gets the template class associated with the given string.
-     *
-     * The generated template class is based on the following parameters:
-     *
-     *  * The cache key for the given template;
-     *  * The currently enabled extensions;
-     *  * PHP version;
-     *  * Twig version;
-     *  * Options with what environment was created.
-     *
-     * @param string   $name  The name for which to calculate the template class name
-     * @param int|null $index The index if it is an embedded template
-     *
-     * @internal
-     */
-    public function getTemplateClass(string $name, ?int $index = null): string
-    {
-        $key = ($this->hotCache[$name] ?? $this->getLoader()->getCacheKey($name)).$this->optionsHash;
-
-        return '__TwigTemplate_'.hash(\PHP_VERSION_ID < 80100 ? 'sha256' : 'xxh128', $key).(null === $index ? '' : '___'.$index);
-    }
-
-    /**
-     * Renders a template.
-     *
-     * @param string|TemplateWrapper $name The template name
-     *
-     * @throws LoaderError  When the template cannot be found
-     * @throws SyntaxError  When an error occurred during compilation
-     * @throws RuntimeError When an error occurred during rendering
-     */
-    public function render($name, array $context = []): string
-    {
-        return $this->load($name)->render($context);
-    }
-
-    /**
-     * Displays a template.
-     *
-     * @param string|TemplateWrapper $name The template name
-     *
-     * @throws LoaderError  When the template cannot be found
-     * @throws SyntaxError  When an error occurred during compilation
-     * @throws RuntimeError When an error occurred during rendering
-     */
-    public function display($name, array $context = []): void
-    {
-        $this->load($name)->display($context);
-    }
-
-    /**
-     * Loads a template.
-     *
-     * @param string|TemplateWrapper $name The template name
-     *
-     * @throws LoaderError  When the template cannot be found
-     * @throws RuntimeError When a previously generated cache is corrupted
-     * @throws SyntaxError  When an error occurred during compilation
-     */
-    public function load($name): TemplateWrapper
-    {
-        if ($name instanceof TemplateWrapper) {
-            return $name;
-        }
-        if ($name instanceof Template) {
-            trigger_deprecation('twig/twig', '3.9', 'Passing a "%s" instance to "%s" is deprecated.', self::class, __METHOD__);
-
-            return $name;
-        }
-
-        return new TemplateWrapper($this, $this->loadTemplate($this->getTemplateClass($name), $name));
-    }
-
-    /**
-     * Loads a template internal representation.
-     *
-     * This method is for internal use only and should never be called
-     * directly.
-     *
-     * @param string   $name  The template name
-     * @param int|null $index The index if it is an embedded template
-     *
-     * @throws LoaderError  When the template cannot be found
-     * @throws RuntimeError When a previously generated cache is corrupted
-     * @throws SyntaxError  When an error occurred during compilation
-     *
-     * @internal
-     */
-    public function loadTemplate(string $cls, string $name, ?int $index = null): Template
-    {
-        $mainCls = $cls;
-        if (null !== $index) {
-            $cls .= '___'.$index;
-        }
-
-        if (isset($this->loadedTemplates[$cls])) {
-            return $this->loadedTemplates[$cls];
-        }
-
-        if (!class_exists($cls, false)) {
-            $key = $this->cache->generateKey($name, $mainCls);
-
-            if (!$this->isAutoReload() || $this->isTemplateFresh($name, $this->cache->getTimestamp($key))) {
-                $this->cache->load($key);
-            }
-
-            if (!class_exists($cls, false)) {
-                $source = $this->getLoader()->getSourceContext($name);
-                $content = $this->compileSource($source);
-                if (!isset($this->hotCache[$name])) {
-                    $this->cache->write($key, $content);
-                    $this->cache->load($key);
-                }
-
-                if (!class_exists($mainCls, false)) {
-                    /* Last line of defense if either $this->bcWriteCacheFile was used,
-                     * $this->cache is implemented as a no-op or we have a race condition
-                     * where the cache was cleared between the above calls to write to and load from
-                     * the cache.
-                     */
-                    eval('?>'.$content);
-                }
-
-                if (!class_exists($cls, false)) {
-                    throw new RuntimeError(\sprintf('Failed to load Twig template "%s", index "%s": cache might be corrupted.', $name, $index), -1, $source);
-                }
-            }
-        }
-
-        $this->extensionSet->initRuntime();
-
-        return $this->loadedTemplates[$cls] = new $cls($this);
-    }
-
-    /**
-     * Creates a template from source.
-     *
-     * This method should not be used as a generic way to load templates.
-     *
-     * @param string      $template The template source
-     * @param string|null $name     An optional name of the template to be used in error messages
-     *
-     * @throws LoaderError When the template cannot be found
-     * @throws SyntaxError When an error occurred during compilation
-     */
-    public function createTemplate(string $template, ?string $name = null): TemplateWrapper
-    {
-        $hash = hash(\PHP_VERSION_ID < 80100 ? 'sha256' : 'xxh128', $template, false);
-        if (null !== $name) {
-            $name = \sprintf('%s (string template %s)', $name, $hash);
-        } else {
-            $name = \sprintf('__string_template__%s', $hash);
-        }
-
-        $loader = new ChainLoader([
-            new ArrayLoader([$name => $template]),
-            $current = $this->getLoader(),
-        ]);
-
-        $this->setLoader($loader);
-        try {
-            return new TemplateWrapper($this, $this->loadTemplate($this->getTemplateClass($name), $name));
-        } finally {
-            $this->setLoader($current);
-        }
-    }
-
-    /**
-     * Returns true if the template is still fresh.
-     *
-     * Besides checking the loader for freshness information,
-     * this method also checks if the enabled extensions have
-     * not changed.
-     *
-     * @param int $time The last modification time of the cached template
-     */
-    public function isTemplateFresh(string $name, int $time): bool
-    {
-        return $this->extensionSet->getLastModified() <= $time && $this->getLoader()->isFresh($name, $time);
-    }
-
-    /**
-     * Tries to load a template consecutively from an array.
-     *
-     * Similar to load() but it also accepts instances of \Twig\TemplateWrapper
-     * and an array of templates where each is tried to be loaded.
-     *
-     * @param string|TemplateWrapper|array<string|TemplateWrapper> $names A template or an array of templates to try consecutively
-     *
-     * @throws LoaderError When none of the templates can be found
-     * @throws SyntaxError When an error occurred during compilation
-     */
-    public function resolveTemplate($names): TemplateWrapper
-    {
-        if (!\is_array($names)) {
-            return $this->load($names);
-        }
-
-        $count = \count($names);
-        foreach ($names as $name) {
-            if ($name instanceof Template) {
-                trigger_deprecation('twig/twig', '3.9', 'Passing a "%s" instance to "%s" is deprecated.', Template::class, __METHOD__);
-
-                return new TemplateWrapper($this, $name);
-            }
-            if ($name instanceof TemplateWrapper) {
-                return $name;
-            }
-
-            if (1 !== $count && !$this->getLoader()->exists($name)) {
-                continue;
-            }
-
-            return $this->load($name);
-        }
-
-        throw new LoaderError(\sprintf('Unable to find one of the following templates: "%s".', implode('", "', $names)));
-    }
-
-    /**
-     * @return void
-     */
-    public function setLexer(Lexer $lexer)
-    {
-        $this->lexer = $lexer;
-    }
-
-    /**
-     * @throws SyntaxError When the code is syntactically wrong
-     */
-    public function tokenize(Source $source): TokenStream
-    {
-        if (null === $this->lexer) {
-            $this->lexer = new Lexer($this);
-        }
-
-        return $this->lexer->tokenize($source);
-    }
-
-    /**
-     * @return void
-     */
-    public function setParser(Parser $parser)
-    {
-        $this->parser = $parser;
-    }
-
-    /**
-     * Converts a token stream to a node tree.
-     *
-     * @throws SyntaxError When the token stream is syntactically or semantically wrong
-     */
-    public function parse(TokenStream $stream): ModuleNode
-    {
-        if (null === $this->parser) {
-            $this->parser = new Parser($this);
-        }
-
-        return $this->parser->parse($stream);
-    }
-
-    /**
-     * @return void
-     */
-    public function setCompiler(Compiler $compiler)
-    {
-        $this->compiler = $compiler;
-    }
-
-    /**
-     * Compiles a node and returns the PHP code.
-     */
-    public function compile(Node $node): string
-    {
-        if (null === $this->compiler) {
-            $this->compiler = new Compiler($this);
-        }
-
-        return $this->compiler->compile($node)->getSource();
-    }
-
-    /**
-     * Compiles a template source code.
-     *
-     * @throws SyntaxError When there was an error during tokenizing, parsing or compiling
-     */
-    public function compileSource(Source $source): string
-    {
-        try {
-            return $this->compile($this->parse($this->tokenize($source)));
-        } catch (Error $e) {
-            $e->setSourceContext($source);
-            throw $e;
-        } catch (\Exception $e) {
-            throw new SyntaxError(\sprintf('An exception has been thrown during the compilation of a template ("%s").', $e->getMessage()), -1, $source, $e);
-        }
-    }
-
-    /**
-     * @return void
-     */
-    public function setLoader(LoaderInterface $loader)
-    {
-        $this->loader = $loader;
-    }
-
-    public function getLoader(): LoaderInterface
-    {
-        return $this->loader;
-    }
-
-    /**
-     * @return void
-     */
-    public function setCharset(string $charset)
-    {
-        if ('UTF8' === $charset = strtoupper($charset ?: '')) {
-            // iconv on Windows requires "UTF-8" instead of "UTF8"
-            $charset = 'UTF-8';
-        }
-
-        $this->charset = $charset;
-    }
-
-    public function getCharset(): string
-    {
-        return $this->charset;
-    }
-
-    public function hasExtension(string $class): bool
-    {
-        return $this->extensionSet->hasExtension($class);
-    }
-
-    /**
-     * @return void
-     */
-    public function addRuntimeLoader(RuntimeLoaderInterface $loader)
-    {
-        $this->runtimeLoaders[] = $loader;
-    }
-
-    /**
-     * @template TExtension of ExtensionInterface
-     *
-     * @param class-string<TExtension> $class
-     *
-     * @return TExtension
-     */
-    public function getExtension(string $class): ExtensionInterface
-    {
-        return $this->extensionSet->getExtension($class);
-    }
-
-    /**
-     * Returns the runtime implementation of a Twig element (filter/function/tag/test).
-     *
-     * @template TRuntime of object
-     *
-     * @param class-string<TRuntime> $class A runtime class name
-     *
-     * @return TRuntime The runtime implementation
-     *
-     * @throws RuntimeError When the template cannot be found
-     */
-    public function getRuntime(string $class)
-    {
-        if (isset($this->runtimes[$class])) {
-            return $this->runtimes[$class];
-        }
-
-        foreach ($this->runtimeLoaders as $loader) {
-            if (null !== $runtime = $loader->load($class)) {
-                return $this->runtimes[$class] = $runtime;
-            }
-        }
-
-        if (null !== $runtime = $this->defaultRuntimeLoader->load($class)) {
-            return $this->runtimes[$class] = $runtime;
-        }
-
-        throw new RuntimeError(\sprintf('Unable to load the "%s" runtime.', $class));
-    }
-
-    /**
-     * @return void
-     */
-    public function addExtension(ExtensionInterface $extension)
-    {
-        $this->extensionSet->addExtension($extension);
-        $this->updateOptionsHash();
-    }
-
-    /**
-     * @param ExtensionInterface[] $extensions An array of extensions
-     *
-     * @return void
-     */
-    public function setExtensions(array $extensions)
-    {
-        $this->extensionSet->setExtensions($extensions);
-        $this->updateOptionsHash();
-    }
-
-    /**
-     * @return ExtensionInterface[] An array of extensions (keys are for internal usage only and should not be relied on)
-     */
-    public function getExtensions(): array
-    {
-        return $this->extensionSet->getExtensions();
-    }
-
-    /**
-     * @return void
-     */
-    public function addTokenParser(TokenParserInterface $parser)
-    {
-        $this->extensionSet->addTokenParser($parser);
-    }
-
-    /**
-     * @return TokenParserInterface[]
-     *
-     * @internal
-     */
-    public function getTokenParsers(): array
-    {
-        return $this->extensionSet->getTokenParsers();
-    }
-
-    /**
-     * @internal
-     */
-    public function getTokenParser(string $name): ?TokenParserInterface
-    {
-        return $this->extensionSet->getTokenParser($name);
-    }
-
-    /**
-     * @param callable(string): (TokenParserInterface|false) $callable
-     */
-    public function registerUndefinedTokenParserCallback(callable $callable): void
-    {
-        $this->extensionSet->registerUndefinedTokenParserCallback($callable);
-    }
-
-    /**
-     * @return void
-     */
-    public function addNodeVisitor(NodeVisitorInterface $visitor)
-    {
-        $this->extensionSet->addNodeVisitor($visitor);
-    }
-
-    /**
-     * @return NodeVisitorInterface[]
-     *
-     * @internal
-     */
-    public function getNodeVisitors(): array
-    {
-        return $this->extensionSet->getNodeVisitors();
-    }
-
-    /**
-     * @return void
-     */
-    public function addFilter(TwigFilter $filter)
-    {
-        $this->extensionSet->addFilter($filter);
-    }
-
-    /**
-     * @internal
-     */
-    public function getFilter(string $name): ?TwigFilter
-    {
-        return $this->extensionSet->getFilter($name);
-    }
-
-    /**
-     * @param callable(string): (TwigFilter|false) $callable
-     */
-    public function registerUndefinedFilterCallback(callable $callable): void
-    {
-        $this->extensionSet->registerUndefinedFilterCallback($callable);
-    }
-
-    /**
-     * Gets the registered Filters.
-     *
-     * Be warned that this method cannot return filters defined with registerUndefinedFilterCallback.
-     *
-     * @return TwigFilter[]
-     *
-     * @see registerUndefinedFilterCallback
-     *
-     * @internal
-     */
-    public function getFilters(): array
-    {
-        return $this->extensionSet->getFilters();
-    }
-
-    /**
-     * @return void
-     */
-    public function addTest(TwigTest $test)
-    {
-        $this->extensionSet->addTest($test);
-    }
-
-    /**
-     * @return TwigTest[]
-     *
-     * @internal
-     */
-    public function getTests(): array
-    {
-        return $this->extensionSet->getTests();
-    }
-
-    /**
-     * @internal
-     */
-    public function getTest(string $name): ?TwigTest
-    {
-        return $this->extensionSet->getTest($name);
-    }
-
-    /**
-     * @param callable(string): (TwigTest|false) $callable
-     */
-    public function registerUndefinedTestCallback(callable $callable): void
-    {
-        $this->extensionSet->registerUndefinedTestCallback($callable);
-    }
-
-    /**
-     * @return void
-     */
-    public function addFunction(TwigFunction $function)
-    {
-        $this->extensionSet->addFunction($function);
-    }
-
-    /**
-     * @internal
-     */
-    public function getFunction(string $name): ?TwigFunction
-    {
-        return $this->extensionSet->getFunction($name);
-    }
-
-    /**
-     * @param callable(string): (TwigFunction|false) $callable
-     */
-    public function registerUndefinedFunctionCallback(callable $callable): void
-    {
-        $this->extensionSet->registerUndefinedFunctionCallback($callable);
-    }
-
-    /**
-     * Gets registered functions.
-     *
-     * Be warned that this method cannot return functions defined with registerUndefinedFunctionCallback.
-     *
-     * @return TwigFunction[]
-     *
-     * @see registerUndefinedFunctionCallback
-     *
-     * @internal
-     */
-    public function getFunctions(): array
-    {
-        return $this->extensionSet->getFunctions();
-    }
-
-    /**
-     * Registers a Global.
-     *
-     * New globals can be added before compiling or rendering a template;
-     * but after, you can only update existing globals.
-     *
-     * @param mixed $value The global value
-     *
-     * @return void
-     */
-    public function addGlobal(string $name, $value)
-    {
-        if ($this->extensionSet->isInitialized() && !\array_key_exists($name, $this->getGlobals())) {
-            throw new \LogicException(\sprintf('Unable to add global "%s" as the runtime or the extensions have already been initialized.', $name));
-        }
-
-        if (null !== $this->resolvedGlobals) {
-            $this->resolvedGlobals[$name] = $value;
-        } else {
-            $this->globals[$name] = $value;
-        }
-    }
-
-    /**
-     * @return array<string, mixed>
-     */
-    public function getGlobals(): array
-    {
-        if ($this->extensionSet->isInitialized()) {
-            if (null === $this->resolvedGlobals) {
-                $this->resolvedGlobals = array_merge($this->extensionSet->getGlobals(), $this->globals);
-            }
-
-            return $this->resolvedGlobals;
-        }
-
-        return array_merge($this->extensionSet->getGlobals(), $this->globals);
-    }
-
-    public function resetGlobals(): void
-    {
-        $this->resolvedGlobals = null;
-        $this->extensionSet->resetGlobals();
-    }
-
-    /**
-     * @deprecated since Twig 3.14
-     */
-    public function mergeGlobals(array $context): array
-    {
-        trigger_deprecation('twig/twig', '3.14', 'The "%s" method is deprecated.', __METHOD__);
-
-        return $context + $this->getGlobals();
-    }
-
-    /**
-     * @internal
-     */
-    public function getExpressionParsers(): ExpressionParsers
-    {
-        return $this->extensionSet->getExpressionParsers();
-    }
-
-    private function updateOptionsHash(): void
-    {
-        $this->optionsHash = implode(':', [
-            $this->extensionSet->getSignature(),
-            \PHP_MAJOR_VERSION,
-            \PHP_MINOR_VERSION,
-            self::VERSION,
-            (int) $this->debug,
-            (int) $this->strictVariables,
-            $this->useYield ? '1' : '0',
-        ]);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Error/Error.php b/generated/php/vendor/twig/twig/src/Error/Error.php
deleted file mode 100644
index 8494d24..0000000
--- a/generated/php/vendor/twig/twig/src/Error/Error.php
+++ /dev/null
@@ -1,208 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Error;
-
-use Twig\Source;
-use Twig\Template;
-
-/**
- * Twig base exception.
- *
- * This exception class and its children must only be used when
- * an error occurs during the loading of a template, when a syntax error
- * is detected in a template, or when rendering a template. Other
- * errors must use regular PHP exception classes (like when the template
- * cache directory is not writable for instance).
- *
- * To help debugging template issues, this class tracks the original template
- * name and line where the error occurred.
- *
- * Whenever possible, you must set these information (original template name
- * and line number) yourself by passing them to the constructor. If some or all
- * these information are not available from where you throw the exception, then
- * this class will guess them automatically.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class Error extends \Exception
-{
-    private $lineno;
-    /** @var positive-int|null */
-    private ?int $columnno;
-    private $rawMessage;
-    private ?Source $source;
-    private string $phpFile;
-    private int $phpLine;
-
-    /**
-     * Constructor.
-     *
-     * By default, automatic guessing is enabled.
-     *
-     * @param string            $message  The error message
-     * @param int               $lineno   The template line where the error occurred
-     * @param Source|null       $source   The source context where the error occurred
-     * @param positive-int|null $columnno The template column where the error occurred
-     */
-    public function __construct(string $message, int $lineno = -1, ?Source $source = null, ?\Throwable $previous = null, ?int $columnno = null)
-    {
-        parent::__construct('', 0, $previous);
-
-        $this->phpFile = $this->getFile();
-        $this->phpLine = $this->getLine();
-        $this->lineno = $lineno;
-        $this->columnno = $columnno;
-        $this->source = $source;
-        $this->rawMessage = $message;
-        $this->updateRepr();
-    }
-
-    public function getRawMessage(): string
-    {
-        return $this->rawMessage;
-    }
-
-    public function getTemplateLine(): int
-    {
-        return $this->lineno;
-    }
-
-    public function setTemplateLine(int $lineno): void
-    {
-        $this->lineno = $lineno;
-        $this->updateRepr();
-    }
-
-    /**
-     * Returns the 1-based column where the error occurred, or null if unknown.
-     *
-     * @return positive-int|null
-     */
-    public function getTemplateColumn(): ?int
-    {
-        return $this->columnno;
-    }
-
-    /**
-     * @param positive-int|null $columnno
-     */
-    public function setTemplateColumn(?int $columnno): void
-    {
-        $this->columnno = $columnno;
-        $this->updateRepr();
-    }
-
-    public function getSourceContext(): ?Source
-    {
-        return $this->source;
-    }
-
-    public function setSourceContext(?Source $source = null): void
-    {
-        $this->source = $source;
-        $this->updateRepr();
-    }
-
-    public function guess(): void
-    {
-        if ($this->lineno > -1) {
-            return;
-        }
-
-        $this->guessTemplateInfo();
-        $this->updateRepr();
-    }
-
-    public function appendMessage($rawMessage): void
-    {
-        $this->rawMessage .= $rawMessage;
-        $this->updateRepr();
-    }
-
-    private function updateRepr(): void
-    {
-        if ($this->source && $this->source->getPath()) {
-            // we only update the file and the line together
-            $this->file = $this->source->getPath();
-            if ($this->lineno > 0) {
-                $this->line = $this->lineno;
-            } else {
-                $this->line = -1;
-            }
-        }
-
-        $this->message = $this->rawMessage;
-        $last = substr($this->message, -1);
-        if ($punctuation = '.' === $last || '?' === $last ? $last : '') {
-            $this->message = substr($this->message, 0, -1);
-        }
-        if ($this->source && $this->source->getName()) {
-            $this->message .= \sprintf(' in "%s"', $this->source->getName());
-        }
-        if ($this->lineno > 0) {
-            $this->message .= \sprintf(' at line %d', $this->lineno);
-            if (null !== $this->columnno) {
-                $this->message .= \sprintf(' column %d', $this->columnno);
-            }
-        }
-        if ($punctuation) {
-            $this->message .= $punctuation;
-        }
-    }
-
-    private function guessTemplateInfo(): void
-    {
-        // $this->source is never null here (see guess() usage in Template)
-
-        $this->lineno = 0;
-        $template = null;
-        $backtrace = debug_backtrace(\DEBUG_BACKTRACE_IGNORE_ARGS | \DEBUG_BACKTRACE_PROVIDE_OBJECT);
-        foreach ($backtrace as $trace) {
-            if (isset($trace['object']) && $trace['object'] instanceof Template && $this->source->getName() === $trace['object']->getTemplateName()) {
-                $template = $trace['object'];
-
-                break;
-            }
-        }
-
-        if (null === $template) {
-            return; // Impossible to guess the info as the template was not found in the backtrace
-        }
-
-        $r = new \ReflectionObject($template);
-        $file = $r->getFileName();
-
-        $exceptions = [$e = $this];
-        while ($e = $e->getPrevious()) {
-            $exceptions[] = $e;
-        }
-
-        while ($e = array_pop($exceptions)) {
-            $traces = $e->getTrace();
-            array_unshift($traces, ['file' => $e instanceof self ? $e->phpFile : $e->getFile(), 'line' => $e instanceof self ? $e->phpLine : $e->getLine()]);
-            while ($trace = array_shift($traces)) {
-                if (!isset($trace['file']) || !isset($trace['line']) || $file != $trace['file']) {
-                    continue;
-                }
-
-                foreach ($template->getDebugInfo() as $codeLine => $templateLine) {
-                    if ($codeLine <= $trace['line']) {
-                        // update template line
-                        $this->lineno = $templateLine;
-
-                        return;
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Error/LoaderError.php b/generated/php/vendor/twig/twig/src/Error/LoaderError.php
deleted file mode 100644
index 7c8c23c..0000000
--- a/generated/php/vendor/twig/twig/src/Error/LoaderError.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Error;
-
-/**
- * Exception thrown when an error occurs during template loading.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class LoaderError extends Error
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Error/RuntimeError.php b/generated/php/vendor/twig/twig/src/Error/RuntimeError.php
deleted file mode 100644
index f6b8476..0000000
--- a/generated/php/vendor/twig/twig/src/Error/RuntimeError.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Error;
-
-/**
- * Exception thrown when an error occurs at runtime.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class RuntimeError extends Error
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Error/SyntaxError.php b/generated/php/vendor/twig/twig/src/Error/SyntaxError.php
deleted file mode 100644
index 841b653..0000000
--- a/generated/php/vendor/twig/twig/src/Error/SyntaxError.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Error;
-
-/**
- * \Exception thrown when a syntax error occurs during lexing or parsing of a template.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class SyntaxError extends Error
-{
-    /**
-     * Tweaks the error message to include suggestions.
-     *
-     * @param string $name  The original name of the item that does not exist
-     * @param array  $items An array of possible items
-     */
-    public function addSuggestions(string $name, array $items): void
-    {
-        $alternatives = [];
-        foreach ($items as $item) {
-            $lev = levenshtein($name, $item);
-            if ($lev <= \strlen($name) / 3 || str_contains($item, $name)) {
-                $alternatives[$item] = $lev;
-            }
-        }
-
-        if (!$alternatives) {
-            return;
-        }
-
-        asort($alternatives);
-
-        $this->appendMessage(\sprintf(' Did you mean "%s"?', implode('", "', array_keys($alternatives))));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser.php
deleted file mode 100644
index 3ba94d0..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser.php
+++ /dev/null
@@ -1,369 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\Infix\DotExpressionParser;
-use Twig\ExpressionParser\Infix\FilterExpressionParser;
-use Twig\ExpressionParser\Infix\SquareBracketExpressionParser;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\Unary\NegUnary;
-use Twig\Node\Expression\Unary\PosUnary;
-use Twig\Node\Expression\Unary\SpreadUnary;
-use Twig\Node\Expression\Variable\AssignContextVariable;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-
-/**
- * Parses expressions.
- *
- * This parser implements a "Precedence climbing" algorithm.
- *
- * @see https://www.engr.mun.ca/~theo/Misc/exp_parsing.htm
- * @see https://en.wikipedia.org/wiki/Operator-precedence_parser
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @deprecated since Twig 3.21
- */
-class ExpressionParser
-{
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public const OPERATOR_LEFT = 1;
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public const OPERATOR_RIGHT = 2;
-
-    public function __construct(
-        private Parser $parser,
-        private Environment $env,
-    ) {
-        trigger_deprecation('twig/twig', '3.21', 'Class "%s" is deprecated, use "Parser::parseExpression()" instead.', __CLASS__);
-    }
-
-    public function parseExpression($precedence = 0)
-    {
-        if (\func_num_args() > 1) {
-            trigger_deprecation('twig/twig', '3.15', 'Passing a second argument ($allowArrow) to "%s()" is deprecated.', __METHOD__);
-        }
-
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated, use "Parser::parseExpression()" instead.', __METHOD__);
-
-        return $this->parser->parseExpression((int) $precedence);
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function parsePrimaryExpression()
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated.', __METHOD__);
-
-        return $this->parseExpression();
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function parseStringExpression()
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated.', __METHOD__);
-
-        return $this->parseExpression();
-    }
-
-    /**
-     * @deprecated since Twig 3.11, use parseExpression() instead
-     */
-    public function parseArrayExpression()
-    {
-        trigger_deprecation('twig/twig', '3.11', 'Calling "%s()" is deprecated, use "parseExpression()" instead.', __METHOD__);
-
-        return $this->parseExpression();
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function parseSequenceExpression()
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated.', __METHOD__);
-
-        return $this->parseExpression();
-    }
-
-    /**
-     * @deprecated since Twig 3.11, use parseExpression() instead
-     */
-    public function parseHashExpression()
-    {
-        trigger_deprecation('twig/twig', '3.11', 'Calling "%s()" is deprecated, use "parseExpression()" instead.', __METHOD__);
-
-        return $this->parseExpression();
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function parseMappingExpression()
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated.', __METHOD__);
-
-        return $this->parseExpression();
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function parsePostfixExpression($node)
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated.', __METHOD__);
-
-        while (true) {
-            $token = $this->parser->getCurrentToken();
-            if ($token->test(Token::PUNCTUATION_TYPE)) {
-                if ('.' == $token->getValue() || '[' == $token->getValue()) {
-                    $node = $this->parseSubscriptExpression($node);
-                } elseif ('|' == $token->getValue()) {
-                    $node = $this->parseFilterExpression($node);
-                } else {
-                    break;
-                }
-            } else {
-                break;
-            }
-        }
-
-        return $node;
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function parseSubscriptExpression($node)
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated.', __METHOD__);
-
-        $parsers = new \ReflectionProperty($this->parser, 'parsers');
-
-        if ('.' === $this->parser->getStream()->next()->getValue()) {
-            return $parsers->getValue($this->parser)->getByClass(DotExpressionParser::class)->parse($this->parser, $node, $this->parser->getCurrentToken());
-        }
-
-        return $parsers->getValue($this->parser)->getByClass(SquareBracketExpressionParser::class)->parse($this->parser, $node, $this->parser->getCurrentToken());
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function parseFilterExpression($node)
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated.', __METHOD__);
-
-        $this->parser->getStream()->next();
-
-        return $this->parseFilterExpressionRaw($node);
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function parseFilterExpressionRaw($node)
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated.', __METHOD__);
-
-        $parsers = new \ReflectionProperty($this->parser, 'parsers');
-
-        $op = $parsers->getValue($this->parser)->getByClass(FilterExpressionParser::class);
-        while (true) {
-            $node = $op->parse($this->parser, $node, $this->parser->getCurrentToken());
-            if (!$this->parser->getStream()->test(Token::OPERATOR_TYPE, '|')) {
-                break;
-            }
-            $this->parser->getStream()->next();
-        }
-
-        return $node;
-    }
-
-    /**
-     * Parses arguments.
-     *
-     * @return Node
-     *
-     * @throws SyntaxError
-     *
-     * @deprecated since Twig 3.19 Use Twig\ExpressionParser\Infix\ArgumentsTrait::parseNamedArguments() instead
-     */
-    public function parseArguments()
-    {
-        trigger_deprecation('twig/twig', '3.19', \sprintf('The "%s()" method is deprecated, use "Twig\ExpressionParser\Infix\ArgumentsTrait::parseNamedArguments()" instead.', __METHOD__));
-
-        $parsePrimaryExpression = new \ReflectionMethod($this->parser, 'parsePrimaryExpression');
-
-        $namedArguments = false;
-        $definition = false;
-        if (\func_num_args() > 1) {
-            $definition = func_get_arg(1);
-        }
-        if (\func_num_args() > 0) {
-            trigger_deprecation('twig/twig', '3.15', 'Passing arguments to "%s()" is deprecated.', __METHOD__);
-            $namedArguments = func_get_arg(0);
-        }
-
-        $args = [];
-        $stream = $this->parser->getStream();
-
-        $stream->expect(Token::OPERATOR_TYPE, '(', 'A list of arguments must begin with an opening parenthesis');
-        $hasSpread = false;
-        while (!$stream->test(Token::PUNCTUATION_TYPE, ')')) {
-            if ($args) {
-                $stream->expect(Token::PUNCTUATION_TYPE, ',', 'Arguments must be separated by a comma');
-
-                // if the comma above was a trailing comma, early exit the argument parse loop
-                if ($stream->test(Token::PUNCTUATION_TYPE, ')')) {
-                    break;
-                }
-            }
-
-            if ($definition) {
-                $token = $stream->expect(Token::NAME_TYPE, null, 'An argument must be a name');
-                $value = new ContextVariable($token->getValue(), $this->parser->getCurrentToken()->getLine());
-            } else {
-                if ($stream->nextIf(Token::SPREAD_TYPE)) {
-                    $hasSpread = true;
-                    $value = new SpreadUnary($this->parseExpression(), $stream->getCurrent()->getLine());
-                } elseif ($hasSpread) {
-                    throw new SyntaxError('Normal arguments must be placed before argument unpacking.', $stream->getCurrent()->getLine(), $stream->getSourceContext());
-                } else {
-                    $value = $this->parseExpression();
-                }
-            }
-
-            $name = null;
-            if ($namedArguments && (($token = $stream->nextIf(Token::OPERATOR_TYPE, '=')) || (!$definition && $token = $stream->nextIf(Token::PUNCTUATION_TYPE, ':')))) {
-                if (!$value instanceof ContextVariable) {
-                    throw new SyntaxError(\sprintf('A parameter name must be a string, "%s" given.', $value::class), $token->getLine(), $stream->getSourceContext());
-                }
-                $name = $value->getAttribute('name');
-
-                if ($definition) {
-                    $value = $parsePrimaryExpression->invoke($this->parser);
-
-                    if (!$this->checkConstantExpression($value)) {
-                        throw new SyntaxError('A default value for an argument must be a constant (a boolean, a string, a number, a sequence, or a mapping).', $token->getLine(), $stream->getSourceContext());
-                    }
-                } else {
-                    $value = $this->parseExpression();
-                }
-            }
-
-            if ($definition) {
-                if (null === $name) {
-                    $name = $value->getAttribute('name');
-                    $value = new ConstantExpression(null, $this->parser->getCurrentToken()->getLine());
-                    $value->setAttribute('is_implicit', true);
-                }
-                $args[$name] = $value;
-            } else {
-                if (null === $name) {
-                    $args[] = $value;
-                } else {
-                    $args[$name] = $value;
-                }
-            }
-        }
-        $stream->expect(Token::PUNCTUATION_TYPE, ')', 'A list of arguments must be closed by a parenthesis');
-
-        return new Nodes($args);
-    }
-
-    /**
-     * @deprecated since Twig 3.21, use "AbstractTokenParser::parseAssignmentExpression()" instead
-     */
-    public function parseAssignmentExpression()
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated, use "AbstractTokenParser::parseAssignmentExpression()" instead.', __METHOD__);
-
-        $stream = $this->parser->getStream();
-        $targets = [];
-        while (true) {
-            $token = $this->parser->getCurrentToken();
-            if ($stream->test(Token::OPERATOR_TYPE) && preg_match(Lexer::REGEX_NAME, $token->getValue())) {
-                // in this context, string operators are variable names
-                $this->parser->getStream()->next();
-            } else {
-                $stream->expect(Token::NAME_TYPE, null, 'Only variables can be assigned to');
-            }
-            $targets[] = new AssignContextVariable($token->getValue(), $token->getLine());
-
-            if (!$stream->nextIf(Token::PUNCTUATION_TYPE, ',')) {
-                break;
-            }
-        }
-
-        return new Nodes($targets);
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function parseMultitargetExpression()
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s()" method is deprecated.', __METHOD__);
-
-        $targets = [];
-        while (true) {
-            $targets[] = $this->parseExpression();
-            if (!$this->parser->getStream()->nextIf(Token::PUNCTUATION_TYPE, ',')) {
-                break;
-            }
-        }
-
-        return new Nodes($targets);
-    }
-
-    // checks that the node only contains "constant" elements
-    // to be removed in 4.0
-    private function checkConstantExpression(Node $node): bool
-    {
-        if (!($node instanceof ConstantExpression || $node instanceof ArrayExpression
-            || $node instanceof NegUnary || $node instanceof PosUnary
-        )) {
-            return false;
-        }
-
-        foreach ($node as $n) {
-            if (!$this->checkConstantExpression($n)) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
-    /**
-     * @deprecated since Twig 3.19 Use Twig\ExpressionParser\Infix\ArgumentsTrait::parseNamedArguments() instead
-     */
-    public function parseOnlyArguments()
-    {
-        trigger_deprecation('twig/twig', '3.19', \sprintf('The "%s()" method is deprecated, use "Twig\ExpressionParser\Infix\ArgumentsTrait::parseNamedArguments()" instead.', __METHOD__));
-
-        return $this->parseArguments();
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/AbstractExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/AbstractExpressionParser.php
deleted file mode 100644
index b8b963a..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/AbstractExpressionParser.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser;
-
-abstract class AbstractExpressionParser implements ExpressionParserInterface
-{
-    public function __toString(): string
-    {
-        return \sprintf('%s(%s)', ExpressionParserType::getType($this)->value, $this->getName());
-    }
-
-    public function getPrecedenceChange(): ?PrecedenceChange
-    {
-        return null;
-    }
-
-    public function getAliases(): array
-    {
-        return [];
-    }
-
-    public function getOperatorTokens(): array
-    {
-        return [$this->getName(), ...$this->getAliases()];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParserDescriptionInterface.php b/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParserDescriptionInterface.php
deleted file mode 100644
index 686f8a5..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParserDescriptionInterface.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser;
-
-interface ExpressionParserDescriptionInterface
-{
-    public function getDescription(): string;
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParserInterface.php b/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParserInterface.php
deleted file mode 100644
index 2013a11..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParserInterface.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser;
-
-/**
- * @method list<string> getOperatorTokens() Returns the operator token strings that this expression parser handles.
- *                                          These are the strings that should be recognized as operator tokens by the Lexer,
- *                                          and used to look up the parser in the registry.
- *                                          For most parsers, this returns the name and aliases. Parsers that don't handle
- *                                          operator tokens (like LiteralExpressionParser) should return an empty array.
- *                                          This method will be added to the interface in Twig 4.0.
- */
-interface ExpressionParserInterface
-{
-    public function __toString(): string;
-
-    public function getName(): string;
-
-    public function getPrecedence(): int;
-
-    public function getPrecedenceChange(): ?PrecedenceChange;
-
-    /**
-     * @return array<string>
-     */
-    public function getAliases(): array;
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParserType.php b/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParserType.php
deleted file mode 100644
index 8c21a8d..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParserType.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser;
-
-/**
- * @internal
- */
-enum ExpressionParserType: string
-{
-    case Prefix = 'prefix';
-    case Infix = 'infix';
-
-    public static function getType(object $object): ExpressionParserType
-    {
-        if ($object instanceof PrefixExpressionParserInterface) {
-            return self::Prefix;
-        }
-        if ($object instanceof InfixExpressionParserInterface) {
-            return self::Infix;
-        }
-
-        throw new \InvalidArgumentException(\sprintf('Unsupported expression parser type: %s', $object::class));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParsers.php b/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParsers.php
deleted file mode 100644
index 7efaffc..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/ExpressionParsers.php
+++ /dev/null
@@ -1,155 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser;
-
-/**
- * @template-implements \IteratorAggregate<ExpressionParserInterface>
- *
- * @internal
- */
-final class ExpressionParsers implements \IteratorAggregate
-{
-    /**
-     * @var array<class-string<ExpressionParserInterface>, array<string, ExpressionParserInterface>>
-     */
-    private array $parsersByName = [];
-
-    /**
-     * @var array<class-string<ExpressionParserInterface>, ExpressionParserInterface>
-     */
-    private array $parsersByClass = [];
-
-    /**
-     * @var \WeakMap<ExpressionParserInterface, array<ExpressionParserInterface>>|null
-     */
-    private ?\WeakMap $precedenceChanges = null;
-
-    /**
-     * @param array<ExpressionParserInterface> $parsers
-     */
-    public function __construct(array $parsers = [])
-    {
-        $this->add($parsers);
-    }
-
-    /**
-     * @param array<ExpressionParserInterface> $parsers
-     *
-     * @return $this
-     */
-    public function add(array $parsers): static
-    {
-        foreach ($parsers as $parser) {
-            if ($parser->getPrecedence() > 512 || $parser->getPrecedence() < 0) {
-                trigger_deprecation('twig/twig', '3.21', 'Precedence for "%s" must be between 0 and 512, got %d.', $parser->getName(), $parser->getPrecedence());
-                // throw new \InvalidArgumentException(\sprintf('Precedence for "%s" must be between 0 and 512, got %d.', $parser->getName(), $parser->getPrecedence()));
-            }
-            $interface = $parser instanceof PrefixExpressionParserInterface ? PrefixExpressionParserInterface::class : InfixExpressionParserInterface::class;
-            $this->parsersByClass[$parser::class] = $parser;
-            foreach (self::getOperatorTokensFor($parser) as $token) {
-                $this->parsersByName[$interface][$token] = $parser;
-            }
-        }
-
-        return $this;
-    }
-
-    /**
-     * @template T of ExpressionParserInterface
-     *
-     * @param class-string<T> $class
-     *
-     * @return T|null
-     */
-    public function getByClass(string $class): ?ExpressionParserInterface
-    {
-        return $this->parsersByClass[$class] ?? null;
-    }
-
-    /**
-     * @template T of ExpressionParserInterface
-     *
-     * @param class-string<T> $interface
-     *
-     * @return T|null
-     */
-    public function getByName(string $interface, string $name): ?ExpressionParserInterface
-    {
-        return $this->parsersByName[$interface][$name] ?? null;
-    }
-
-    public function getIterator(): \Traversable
-    {
-        $seen = [];
-        foreach ($this->parsersByName as $parsers) {
-            foreach ($parsers as $parser) {
-                $id = spl_object_id($parser);
-                if (!isset($seen[$id])) {
-                    $seen[$id] = true;
-                    yield $parser;
-                }
-            }
-        }
-        foreach ($this->parsersByClass as $parser) {
-            $id = spl_object_id($parser);
-            if (!isset($seen[$id])) {
-                $seen[$id] = true;
-                yield $parser;
-            }
-        }
-    }
-
-    /**
-     * @internal
-     *
-     * @return \WeakMap<ExpressionParserInterface, array<ExpressionParserInterface>>
-     */
-    public function getPrecedenceChanges(): \WeakMap
-    {
-        if (null === $this->precedenceChanges) {
-            $this->precedenceChanges = new \WeakMap();
-            foreach ($this as $ep) {
-                if (!$ep->getPrecedenceChange()) {
-                    continue;
-                }
-                $min = min($ep->getPrecedenceChange()->getNewPrecedence(), $ep->getPrecedence());
-                $max = max($ep->getPrecedenceChange()->getNewPrecedence(), $ep->getPrecedence());
-                foreach ($this as $e) {
-                    if ($e->getPrecedence() > $min && $e->getPrecedence() < $max) {
-                        if (!isset($this->precedenceChanges[$e])) {
-                            $this->precedenceChanges[$e] = [];
-                        }
-                        $this->precedenceChanges[$e][] = $ep;
-                    }
-                }
-            }
-        }
-
-        return $this->precedenceChanges;
-    }
-
-    /**
-     * @internal
-     *
-     * @return array<string>
-     */
-    public static function getOperatorTokensFor(ExpressionParserInterface $parser): array
-    {
-        if (method_exists($parser, 'getOperatorTokens')) {
-            return $parser->getOperatorTokens();
-        }
-
-        trigger_deprecation('twig/twig', '3.24', 'Not implementing the "getOperatorTokens()" method in "%s" is deprecated. This method will be part of the "%s" interface in 4.0.', $parser::class, ExpressionParserInterface::class);
-
-        return [$parser->getName(), ...$parser->getAliases()];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/ArgumentsTrait.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/ArgumentsTrait.php
deleted file mode 100644
index 96bde55..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/ArgumentsTrait.php
+++ /dev/null
@@ -1,83 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\Binary\SetBinary;
-use Twig\Node\Expression\Unary\SpreadUnary;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Expression\Variable\LocalVariable;
-use Twig\Node\Nodes;
-use Twig\Parser;
-use Twig\Token;
-
-trait ArgumentsTrait
-{
-    private function parseCallableArguments(Parser $parser, int $line, bool $parseOpenParenthesis = true): ArrayExpression
-    {
-        $arguments = new ArrayExpression([], $line);
-        foreach ($this->parseNamedArguments($parser, $parseOpenParenthesis) as $k => $n) {
-            $arguments->addElement($n, new LocalVariable($k, $line));
-        }
-
-        return $arguments;
-    }
-
-    private function parseNamedArguments(Parser $parser, bool $parseOpenParenthesis = true): Nodes
-    {
-        $args = [];
-        $stream = $parser->getStream();
-        if ($parseOpenParenthesis) {
-            $stream->expect(Token::OPERATOR_TYPE, '(', 'A list of arguments must begin with an opening parenthesis');
-        }
-        $hasSpread = false;
-        while (!$stream->test(Token::PUNCTUATION_TYPE, ')')) {
-            if ($args) {
-                $stream->expect(Token::PUNCTUATION_TYPE, ',', 'Arguments must be separated by a comma');
-
-                // if the comma above was a trailing comma, early exit the argument parse loop
-                if ($stream->test(Token::PUNCTUATION_TYPE, ')')) {
-                    break;
-                }
-            }
-
-            $value = $parser->parseExpression();
-            if ($value instanceof SpreadUnary) {
-                $hasSpread = true;
-            } elseif ($hasSpread) {
-                throw new SyntaxError('Normal arguments must be placed before argument unpacking.', $stream->getCurrent()->getLine(), $stream->getSourceContext());
-            }
-
-            $name = null;
-            if ($value instanceof SetBinary) {
-                $name = $value->getNode('left')->getAttribute('name');
-                $value = $value->getNode('right');
-            } elseif (($token = $stream->nextIf(Token::OPERATOR_TYPE, '=')) || ($token = $stream->nextIf(Token::PUNCTUATION_TYPE, ':'))) {
-                if (!$value instanceof ContextVariable) {
-                    throw new SyntaxError(\sprintf('A parameter name must be a string, "%s" given.', $value::class), $token->getLine(), $stream->getSourceContext());
-                }
-                $name = $value->getAttribute('name');
-                $value = $parser->parseExpression();
-            }
-
-            if (null === $name) {
-                $args[] = $value;
-            } else {
-                $args[$name] = $value;
-            }
-        }
-        $stream->expect(Token::PUNCTUATION_TYPE, ')', 'A list of arguments must be closed by a parenthesis');
-
-        return new Nodes($args);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/ArrowExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/ArrowExpressionParser.php
deleted file mode 100644
index c8630da..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/ArrowExpressionParser.php
+++ /dev/null
@@ -1,53 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ArrowFunctionExpression;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class ArrowExpressionParser extends AbstractExpressionParser implements InfixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    public function parse(Parser $parser, AbstractExpression $expr, Token $token): AbstractExpression
-    {
-        // As the expression of the arrow function is independent from the current precedence, we want a precedence of 0
-        return new ArrowFunctionExpression($parser->parseExpression(), $expr, $token->getLine());
-    }
-
-    public function getName(): string
-    {
-        return '=>';
-    }
-
-    public function getDescription(): string
-    {
-        return 'Arrow function (x => expr)';
-    }
-
-    public function getPrecedence(): int
-    {
-        return 250;
-    }
-
-    public function getAssociativity(): InfixAssociativity
-    {
-        return InfixAssociativity::Left;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/AssignmentExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/AssignmentExpressionParser.php
deleted file mode 100644
index 1f04284..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/AssignmentExpressionParser.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\Binary\AbstractBinary;
-use Twig\Node\Expression\Binary\ObjectDestructuringSetBinary;
-use Twig\Node\Expression\Binary\SequenceDestructuringSetBinary;
-use Twig\Node\Expression\Binary\SetBinary;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-class AssignmentExpressionParser extends BinaryOperatorExpressionParser
-{
-    public function __construct(
-        string $name,
-    ) {
-        parent::__construct(SetBinary::class, $name, 0, InfixAssociativity::Right);
-    }
-
-    /**
-     * @return AbstractBinary
-     */
-    public function parse(Parser $parser, AbstractExpression $left, Token $token): AbstractExpression
-    {
-        if (!$left instanceof ContextVariable && !$left instanceof ArrayExpression) {
-            throw new SyntaxError(\sprintf('Cannot assign to "%s", only variables can be assigned.', $left::class), $token->getLine(), $parser->getStream()->getSourceContext());
-        }
-        $right = $parser->parseExpression(InfixAssociativity::Left === $this->getAssociativity() ? $this->getPrecedence() + 1 : $this->getPrecedence());
-        $right = match ($this->getName()) {
-            '=' => $right,
-            default => throw new \LogicException(\sprintf('Unknown operator: %s.', $this->getName())),
-        };
-
-        if ($left instanceof ArrayExpression) {
-            if ($left->isSequence()) {
-                return new SequenceDestructuringSetBinary($left, $right, $token->getLine());
-            }
-
-            return new ObjectDestructuringSetBinary($left, $right, $token->getLine());
-        }
-
-        return new SetBinary($left, $right, $token->getLine());
-    }
-
-    public function getDescription(): string
-    {
-        return 'Assignment operator';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/BinaryOperatorExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/BinaryOperatorExpressionParser.php
deleted file mode 100644
index 4c66da7..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/BinaryOperatorExpressionParser.php
+++ /dev/null
@@ -1,80 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\ExpressionParser\PrecedenceChange;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\Binary\AbstractBinary;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-class BinaryOperatorExpressionParser extends AbstractExpressionParser implements InfixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    public function __construct(
-        /** @var class-string<AbstractBinary> */
-        private string $nodeClass,
-        private string $name,
-        private int $precedence,
-        private InfixAssociativity $associativity = InfixAssociativity::Left,
-        private ?PrecedenceChange $precedenceChange = null,
-        private ?string $description = null,
-        private array $aliases = [],
-    ) {
-    }
-
-    /**
-     * @return AbstractBinary
-     */
-    public function parse(Parser $parser, AbstractExpression $left, Token $token): AbstractExpression
-    {
-        $right = $parser->parseExpression(InfixAssociativity::Left === $this->getAssociativity() ? $this->getPrecedence() + 1 : $this->getPrecedence());
-
-        return new ($this->nodeClass)($left, $right, $token->getLine());
-    }
-
-    public function getAssociativity(): InfixAssociativity
-    {
-        return $this->associativity;
-    }
-
-    public function getName(): string
-    {
-        return $this->name;
-    }
-
-    public function getDescription(): string
-    {
-        return $this->description ?? '';
-    }
-
-    public function getPrecedence(): int
-    {
-        return $this->precedence;
-    }
-
-    public function getPrecedenceChange(): ?PrecedenceChange
-    {
-        return $this->precedenceChange;
-    }
-
-    public function getAliases(): array
-    {
-        return $this->aliases;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/ConditionalTernaryExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/ConditionalTernaryExpressionParser.php
deleted file mode 100644
index 9707c0a..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/ConditionalTernaryExpressionParser.php
+++ /dev/null
@@ -1,62 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\Ternary\ConditionalTernary;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class ConditionalTernaryExpressionParser extends AbstractExpressionParser implements InfixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    public function parse(Parser $parser, AbstractExpression $left, Token $token): AbstractExpression
-    {
-        $then = $parser->parseExpression($this->getPrecedence());
-        if ($parser->getStream()->nextIf(Token::PUNCTUATION_TYPE, ':')) {
-            // Ternary operator (expr ? expr2 : expr3)
-            $else = $parser->parseExpression($this->getPrecedence());
-        } else {
-            // Ternary without else (expr ? expr2)
-            $else = new ConstantExpression('', $token->getLine());
-        }
-
-        return new ConditionalTernary($left, $then, $else, $token->getLine());
-    }
-
-    public function getName(): string
-    {
-        return '?';
-    }
-
-    public function getDescription(): string
-    {
-        return 'Conditional operator (a ? b : c)';
-    }
-
-    public function getPrecedence(): int
-    {
-        return 0;
-    }
-
-    public function getAssociativity(): InfixAssociativity
-    {
-        return InfixAssociativity::Left;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/DotExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/DotExpressionParser.php
deleted file mode 100644
index 287fbd1..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/DotExpressionParser.php
+++ /dev/null
@@ -1,114 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\Lexer;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\GetAttrExpression;
-use Twig\Node\Expression\MacroReferenceExpression;
-use Twig\Node\Expression\NameExpression;
-use Twig\Node\Expression\Variable\TemplateVariable;
-use Twig\Parser;
-use Twig\Template;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class DotExpressionParser extends AbstractExpressionParser implements InfixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    use ArgumentsTrait;
-
-    public function parse(Parser $parser, AbstractExpression $expr, Token $token): AbstractExpression
-    {
-        $nullSafe = '?.' === $token->getValue();
-        $stream = $parser->getStream();
-        $token = $stream->getCurrent();
-        $lineno = $token->getLine();
-        $arguments = new ArrayExpression([], $lineno);
-        $type = Template::ANY_CALL;
-
-        if ($stream->nextIf(Token::OPERATOR_TYPE, '(')) {
-            $attribute = $parser->parseExpression();
-            $stream->expect(Token::PUNCTUATION_TYPE, ')');
-        } else {
-            $token = $stream->next();
-            if (
-                $token->test(Token::NAME_TYPE)
-                || $token->test(Token::NUMBER_TYPE)
-                || ($token->test(Token::OPERATOR_TYPE) && preg_match(Lexer::REGEX_NAME, $token->getValue()))
-            ) {
-                $attribute = new ConstantExpression($token->getValue(), $token->getLine());
-            } else {
-                throw new SyntaxError(\sprintf('Expected name or number, got value "%s" of type "%s".', $token->getValue(), $token->toEnglish()), $token->getLine(), $stream->getSourceContext());
-            }
-        }
-
-        if ($stream->test(Token::OPERATOR_TYPE, '(')) {
-            $type = Template::METHOD_CALL;
-            $arguments = $this->parseCallableArguments($parser, $token->getLine());
-        }
-
-        $isMacroTarget = $expr instanceof NameExpression
-            && (
-                null !== $parser->getImportedSymbol('template', $expr->getAttribute('name'))
-                || '_self' === $expr->getAttribute('name')
-            );
-
-        if (
-            $isMacroTarget
-            && $attribute instanceof ConstantExpression
-            && \is_string($name = $attribute->getAttribute('value'))
-            && preg_match('#^[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*$#D', $name)
-        ) {
-            return new MacroReferenceExpression(new TemplateVariable($expr->getAttribute('name'), $expr->getTemplateLine()), 'macro_'.$name, $arguments, $expr->getTemplateLine());
-        }
-
-        if ($isMacroTarget && !$attribute instanceof ConstantExpression) {
-            return new MacroReferenceExpression(new TemplateVariable($expr->getAttribute('name'), $expr->getTemplateLine()), $attribute, $arguments, $expr->getTemplateLine());
-        }
-
-        return new GetAttrExpression($expr, $attribute, $arguments, $type, $lineno, $nullSafe);
-    }
-
-    public function getName(): string
-    {
-        return '.';
-    }
-
-    public function getAliases(): array
-    {
-        return ['?.'];
-    }
-
-    public function getDescription(): string
-    {
-        return 'Get an attribute on a variable';
-    }
-
-    public function getPrecedence(): int
-    {
-        return 512;
-    }
-
-    public function getAssociativity(): InfixAssociativity
-    {
-        return InfixAssociativity::Left;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/FilterExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/FilterExpressionParser.php
deleted file mode 100644
index 0bbe6b4..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/FilterExpressionParser.php
+++ /dev/null
@@ -1,85 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\Attribute\FirstClassTwigCallableReady;
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\ExpressionParser\PrecedenceChange;
-use Twig\Node\EmptyNode;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class FilterExpressionParser extends AbstractExpressionParser implements InfixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    use ArgumentsTrait;
-
-    private $readyNodes = [];
-
-    public function parse(Parser $parser, AbstractExpression $expr, Token $token): AbstractExpression
-    {
-        $stream = $parser->getStream();
-        $token = $stream->expect(Token::NAME_TYPE);
-        $line = $token->getLine();
-
-        if (!$stream->test(Token::OPERATOR_TYPE, '(')) {
-            $arguments = new EmptyNode();
-        } else {
-            $arguments = $this->parseNamedArguments($parser);
-        }
-
-        $filter = $parser->getFilter($token->getValue(), $line);
-
-        $ready = true;
-        if (!isset($this->readyNodes[$class = $filter->getNodeClass()])) {
-            $this->readyNodes[$class] = (bool) (new \ReflectionClass($class))->getConstructor()->getAttributes(FirstClassTwigCallableReady::class);
-        }
-
-        if (!$ready = $this->readyNodes[$class]) {
-            trigger_deprecation('twig/twig', '3.12', 'Twig node "%s" is not marked as ready for passing a "TwigFilter" in the constructor instead of its name; please update your code and then add #[FirstClassTwigCallableReady] attribute to the constructor.', $class);
-        }
-
-        return new $class($expr, $ready ? $filter : new ConstantExpression($filter->getName(), $line), $arguments, $line);
-    }
-
-    public function getName(): string
-    {
-        return '|';
-    }
-
-    public function getDescription(): string
-    {
-        return 'Twig filter call';
-    }
-
-    public function getPrecedence(): int
-    {
-        return 512;
-    }
-
-    public function getPrecedenceChange(): ?PrecedenceChange
-    {
-        return new PrecedenceChange('twig/twig', '3.21', 300);
-    }
-
-    public function getAssociativity(): InfixAssociativity
-    {
-        return InfixAssociativity::Left;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/FunctionExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/FunctionExpressionParser.php
deleted file mode 100644
index c885182..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/FunctionExpressionParser.php
+++ /dev/null
@@ -1,97 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\Attribute\FirstClassTwigCallableReady;
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\Node\EmptyNode;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\MacroReferenceExpression;
-use Twig\Node\Expression\NameExpression;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class FunctionExpressionParser extends AbstractExpressionParser implements InfixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    use ArgumentsTrait;
-
-    private $readyNodes = [];
-
-    public function parse(Parser $parser, AbstractExpression $expr, Token $token): AbstractExpression
-    {
-        $line = $token->getLine();
-        if (!$expr instanceof NameExpression) {
-            throw new SyntaxError('Function name must be an identifier.', $line, $parser->getStream()->getSourceContext());
-        }
-
-        $name = $expr->getAttribute('name');
-
-        if (null !== $alias = $parser->getImportedSymbol('function', $name)) {
-            return new MacroReferenceExpression($alias['node']->getNode('var'), $alias['name'], $this->parseCallableArguments($parser, $line, false), $line);
-        }
-
-        $args = $this->parseNamedArguments($parser, false);
-
-        $function = $parser->getFunction($name, $line);
-
-        if ($function->getParserCallable()) {
-            $fakeNode = new EmptyNode($line);
-            $fakeNode->setSourceContext($parser->getStream()->getSourceContext());
-
-            $node = ($function->getParserCallable())($parser, $fakeNode, $args, $line);
-            // remember the original function name so the sandbox can enforce
-            // the `allowedFunctions` allow-list even though the parser callable
-            // returned a specialized node (e.g. `parent`, `block`, `attribute`).
-            $node->setAttribute('sandboxed_function_name', $name);
-            $node->setAttribute('sandboxed_function', $function);
-
-            return $node;
-        }
-
-        if (!isset($this->readyNodes[$class = $function->getNodeClass()])) {
-            $this->readyNodes[$class] = (bool) (new \ReflectionClass($class))->getConstructor()->getAttributes(FirstClassTwigCallableReady::class);
-        }
-
-        if (!$ready = $this->readyNodes[$class]) {
-            trigger_deprecation('twig/twig', '3.12', 'Twig node "%s" is not marked as ready for passing a "TwigFunction" in the constructor instead of its name; please update your code and then add #[FirstClassTwigCallableReady] attribute to the constructor.', $class);
-        }
-
-        return new $class($ready ? $function : $function->getName(), $args, $line);
-    }
-
-    public function getName(): string
-    {
-        return '(';
-    }
-
-    public function getDescription(): string
-    {
-        return 'Twig function call';
-    }
-
-    public function getPrecedence(): int
-    {
-        return 512;
-    }
-
-    public function getAssociativity(): InfixAssociativity
-    {
-        return InfixAssociativity::Left;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/IsExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/IsExpressionParser.php
deleted file mode 100644
index 88d54f7..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/IsExpressionParser.php
+++ /dev/null
@@ -1,84 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\Attribute\FirstClassTwigCallableReady;
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\MacroReferenceExpression;
-use Twig\Node\Expression\NameExpression;
-use Twig\Node\Nodes;
-use Twig\Parser;
-use Twig\Token;
-use Twig\TwigTest;
-
-/**
- * @internal
- */
-class IsExpressionParser extends AbstractExpressionParser implements InfixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    use ArgumentsTrait;
-
-    private $readyNodes = [];
-
-    public function parse(Parser $parser, AbstractExpression $expr, Token $token): AbstractExpression
-    {
-        $stream = $parser->getStream();
-        $test = $parser->getTest($token->getLine());
-
-        $arguments = null;
-        if ($stream->test(Token::OPERATOR_TYPE, '(')) {
-            $arguments = $this->parseNamedArguments($parser);
-        } elseif ($test->hasOneMandatoryArgument()) {
-            $arguments = new Nodes([0 => $parser->parseExpression($this->getPrecedence())]);
-        }
-
-        if ('defined' === $test->getName() && $expr instanceof NameExpression && null !== $alias = $parser->getImportedSymbol('function', $expr->getAttribute('name'))) {
-            $expr = new MacroReferenceExpression($alias['node']->getNode('var'), $alias['name'], new ArrayExpression([], $expr->getTemplateLine()), $expr->getTemplateLine());
-        }
-
-        $ready = $test instanceof TwigTest;
-        if (!isset($this->readyNodes[$class = $test->getNodeClass()])) {
-            $this->readyNodes[$class] = (bool) (new \ReflectionClass($class))->getConstructor()->getAttributes(FirstClassTwigCallableReady::class);
-        }
-
-        if (!$ready = $this->readyNodes[$class]) {
-            trigger_deprecation('twig/twig', '3.12', 'Twig node "%s" is not marked as ready for passing a "TwigTest" in the constructor instead of its name; please update your code and then add #[FirstClassTwigCallableReady] attribute to the constructor.', $class);
-        }
-
-        return new $class($expr, $ready ? $test : $test->getName(), $arguments, $stream->getCurrent()->getLine());
-    }
-
-    public function getPrecedence(): int
-    {
-        return 100;
-    }
-
-    public function getName(): string
-    {
-        return 'is';
-    }
-
-    public function getDescription(): string
-    {
-        return 'Twig tests';
-    }
-
-    public function getAssociativity(): InfixAssociativity
-    {
-        return InfixAssociativity::Left;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/IsNotExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/IsNotExpressionParser.php
deleted file mode 100644
index 1e1085a..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/IsNotExpressionParser.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\Unary\NotUnary;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class IsNotExpressionParser extends IsExpressionParser
-{
-    public function parse(Parser $parser, AbstractExpression $expr, Token $token): AbstractExpression
-    {
-        return new NotUnary(parent::parse($parser, $expr, $token), $token->getLine());
-    }
-
-    public function getName(): string
-    {
-        return 'is not';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/SquareBracketExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/SquareBracketExpressionParser.php
deleted file mode 100644
index c47c91d..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Infix/SquareBracketExpressionParser.php
+++ /dev/null
@@ -1,91 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Infix;
-
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\GetAttrExpression;
-use Twig\Node\Nodes;
-use Twig\Parser;
-use Twig\Template;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class SquareBracketExpressionParser extends AbstractExpressionParser implements InfixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    public function parse(Parser $parser, AbstractExpression $expr, Token $token): AbstractExpression
-    {
-        $stream = $parser->getStream();
-        $lineno = $token->getLine();
-        $arguments = new ArrayExpression([], $lineno);
-
-        // slice?
-        $slice = false;
-        if ($stream->test(Token::PUNCTUATION_TYPE, ':')) {
-            $slice = true;
-            $attribute = new ConstantExpression(0, $token->getLine());
-        } else {
-            $attribute = $parser->parseExpression();
-        }
-
-        if ($stream->nextIf(Token::PUNCTUATION_TYPE, ':')) {
-            $slice = true;
-        }
-
-        if ($slice) {
-            if ($stream->test(Token::PUNCTUATION_TYPE, ']')) {
-                $length = new ConstantExpression(null, $token->getLine());
-            } else {
-                $length = $parser->parseExpression();
-            }
-
-            $filter = $parser->getFilter('slice', $token->getLine());
-            $arguments = new Nodes([$attribute, $length]);
-            $filter = new ($filter->getNodeClass())($expr, $filter, $arguments, $token->getLine());
-
-            $stream->expect(Token::PUNCTUATION_TYPE, ']');
-
-            return $filter;
-        }
-
-        $stream->expect(Token::PUNCTUATION_TYPE, ']');
-
-        return new GetAttrExpression($expr, $attribute, $arguments, Template::ARRAY_CALL, $lineno);
-    }
-
-    public function getName(): string
-    {
-        return '[';
-    }
-
-    public function getDescription(): string
-    {
-        return 'Array access';
-    }
-
-    public function getPrecedence(): int
-    {
-        return 512;
-    }
-
-    public function getAssociativity(): InfixAssociativity
-    {
-        return InfixAssociativity::Left;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/InfixAssociativity.php b/generated/php/vendor/twig/twig/src/ExpressionParser/InfixAssociativity.php
deleted file mode 100644
index 3aeccce..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/InfixAssociativity.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser;
-
-enum InfixAssociativity
-{
-    case Left;
-    case Right;
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/InfixExpressionParserInterface.php b/generated/php/vendor/twig/twig/src/ExpressionParser/InfixExpressionParserInterface.php
deleted file mode 100644
index 4641ef8..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/InfixExpressionParserInterface.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Parser;
-use Twig\Token;
-
-interface InfixExpressionParserInterface extends ExpressionParserInterface
-{
-    /**
-     * @throws SyntaxError
-     */
-    public function parse(Parser $parser, AbstractExpression $left, Token $token): AbstractExpression;
-
-    public function getAssociativity(): InfixAssociativity;
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/PrecedenceChange.php b/generated/php/vendor/twig/twig/src/ExpressionParser/PrecedenceChange.php
deleted file mode 100644
index 768d9fb..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/PrecedenceChange.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser;
-
-/**
- * Represents a precedence change.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class PrecedenceChange
-{
-    public function __construct(
-        private string $package,
-        private string $version,
-        private int $newPrecedence,
-    ) {
-    }
-
-    public function getPackage(): string
-    {
-        return $this->package;
-    }
-
-    public function getVersion(): string
-    {
-        return $this->version;
-    }
-
-    public function getNewPrecedence(): int
-    {
-        return $this->newPrecedence;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Prefix/GroupingExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Prefix/GroupingExpressionParser.php
deleted file mode 100644
index 95a1176..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Prefix/GroupingExpressionParser.php
+++ /dev/null
@@ -1,88 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Prefix;
-
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\PrefixExpressionParserInterface;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ListExpression;
-use Twig\Node\Expression\Variable\AssignContextVariable;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class GroupingExpressionParser extends AbstractExpressionParser implements PrefixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    public function parse(Parser $parser, Token $token): AbstractExpression
-    {
-        $stream = $parser->getStream();
-        $expr = $parser->parseExpression($this->getPrecedence());
-
-        if ($stream->nextIf(Token::PUNCTUATION_TYPE, ')')) {
-            if (!$stream->test(Token::OPERATOR_TYPE, '=>')) {
-                return $expr->setExplicitParentheses();
-            }
-
-            return new ListExpression([self::toAssignContextVariable($expr)], $token->getLine());
-        }
-
-        // determine if we are parsing an arrow function arguments
-        if (!$stream->test(Token::PUNCTUATION_TYPE, ',')) {
-            $stream->expect(Token::PUNCTUATION_TYPE, ')', 'An opened parenthesis is not properly closed');
-        }
-
-        $names = [$expr];
-        while (true) {
-            if ($stream->nextIf(Token::PUNCTUATION_TYPE, ')')) {
-                break;
-            }
-            $stream->expect(Token::PUNCTUATION_TYPE, ',');
-            $token = $stream->expect(Token::NAME_TYPE);
-            $names[] = new ContextVariable($token->getValue(), $token->getLine());
-        }
-
-        if (!$stream->test(Token::OPERATOR_TYPE, '=>')) {
-            throw new SyntaxError('A list of variables must be followed by an arrow.', $stream->getCurrent()->getLine(), $stream->getSourceContext());
-        }
-
-        return new ListExpression(array_map(self::toAssignContextVariable(...), $names), $token->getLine());
-    }
-
-    private static function toAssignContextVariable(AbstractExpression $expr): AssignContextVariable
-    {
-        if (!$expr instanceof ContextVariable) {
-            throw new SyntaxError('A list must only contain variables.', $expr->getTemplateLine(), $expr->getSourceContext());
-        }
-
-        return $expr instanceof AssignContextVariable ? $expr : new AssignContextVariable($expr->getAttribute('name'), $expr->getTemplateLine());
-    }
-
-    public function getName(): string
-    {
-        return '(';
-    }
-
-    public function getDescription(): string
-    {
-        return 'Explicit group expression (a)';
-    }
-
-    public function getPrecedence(): int
-    {
-        return 0;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Prefix/LiteralExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Prefix/LiteralExpressionParser.php
deleted file mode 100644
index b467d1a..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Prefix/LiteralExpressionParser.php
+++ /dev/null
@@ -1,233 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Prefix;
-
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\PrefixExpressionParserInterface;
-use Twig\Lexer;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\Binary\ConcatBinary;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\EmptyExpression;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class LiteralExpressionParser extends AbstractExpressionParser implements PrefixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    public function parse(Parser $parser, Token $token): AbstractExpression
-    {
-        $stream = $parser->getStream();
-        switch (true) {
-            case $token->test(Token::NAME_TYPE):
-                $stream->next();
-                switch ($token->getValue()) {
-                    case 'true':
-                    case 'TRUE':
-                        return new ConstantExpression(true, $token->getLine());
-
-                    case 'false':
-                    case 'FALSE':
-                        return new ConstantExpression(false, $token->getLine());
-
-                    case 'none':
-                    case 'NONE':
-                    case 'null':
-                    case 'NULL':
-                        return new ConstantExpression(null, $token->getLine());
-
-                    default:
-                        return new ContextVariable($token->getValue(), $token->getLine());
-                }
-
-                // no break
-            case $token->test(Token::NUMBER_TYPE):
-                $stream->next();
-
-                return new ConstantExpression($token->getValue(), $token->getLine());
-
-            case $token->test(Token::STRING_TYPE):
-            case $token->test(Token::INTERPOLATION_START_TYPE):
-                return $this->parseStringExpression($parser);
-
-            case $token->test(Token::PUNCTUATION_TYPE):
-                // In 4.0, we should always return the node or throw an error for default
-                if ($node = match ($token->getValue()) {
-                    '{' => $this->parseMappingExpression($parser),
-                    default => null,
-                }) {
-                    return $node;
-                }
-
-                // no break
-            case $token->test(Token::OPERATOR_TYPE):
-                if ('[' === $token->getValue()) {
-                    return $this->parseSequenceExpression($parser);
-                }
-
-                if (preg_match(Lexer::REGEX_NAME, $token->getValue(), $matches) && $matches[0] == $token->getValue()) {
-                    // in this context, string operators are variable names
-                    $stream->next();
-
-                    return new ContextVariable($token->getValue(), $token->getLine());
-                }
-
-                // no break
-            default:
-                throw new SyntaxError(\sprintf('Unexpected token "%s" of value "%s".', $token->toEnglish(), $token->getValue()), $token->getLine(), $stream->getSourceContext());
-        }
-    }
-
-    public function getName(): string
-    {
-        return 'literal';
-    }
-
-    public function getOperatorTokens(): array
-    {
-        return [];
-    }
-
-    public function getDescription(): string
-    {
-        return 'A literal value (boolean, string, number, sequence, mapping, ...)';
-    }
-
-    public function getPrecedence(): int
-    {
-        // not used
-        return 0;
-    }
-
-    private function parseStringExpression(Parser $parser)
-    {
-        $stream = $parser->getStream();
-
-        $nodes = [];
-        // a string cannot be followed by another string in a single expression
-        $nextCanBeString = true;
-        while (true) {
-            if ($nextCanBeString && $token = $stream->nextIf(Token::STRING_TYPE)) {
-                $nodes[] = new ConstantExpression($token->getValue(), $token->getLine());
-                $nextCanBeString = false;
-            } elseif ($stream->nextIf(Token::INTERPOLATION_START_TYPE)) {
-                $nodes[] = $parser->parseExpression();
-                $stream->expect(Token::INTERPOLATION_END_TYPE);
-                $nextCanBeString = true;
-            } else {
-                break;
-            }
-        }
-
-        $expr = array_shift($nodes);
-        foreach ($nodes as $node) {
-            $expr = new ConcatBinary($expr, $node, $node->getTemplateLine());
-        }
-
-        return $expr;
-    }
-
-    private function parseSequenceExpression(Parser $parser)
-    {
-        $stream = $parser->getStream();
-        $stream->expect(Token::OPERATOR_TYPE, '[', 'A sequence element was expected');
-
-        $node = new ArrayExpression([], $stream->getCurrent()->getLine());
-        $first = true;
-        while (!$stream->test(Token::PUNCTUATION_TYPE, ']')) {
-            if (!$first) {
-                $stream->expect(Token::PUNCTUATION_TYPE, ',', 'A sequence element must be followed by a comma');
-
-                // trailing ,?
-                if ($stream->test(Token::PUNCTUATION_TYPE, ']')) {
-                    break;
-                }
-            }
-            $first = false;
-
-            // Check for empty slots (comma with no expression)
-            if ($stream->test(Token::PUNCTUATION_TYPE, ',')) {
-                $node->addElement(new EmptyExpression($stream->getCurrent()->getLine()));
-            } else {
-                $node->addElement($parser->parseExpression());
-            }
-        }
-        $stream->expect(Token::PUNCTUATION_TYPE, ']', 'An opened sequence is not properly closed');
-
-        return $node;
-    }
-
-    private function parseMappingExpression(Parser $parser)
-    {
-        $stream = $parser->getStream();
-        $stream->expect(Token::PUNCTUATION_TYPE, '{', 'A mapping element was expected');
-
-        $node = new ArrayExpression([], $stream->getCurrent()->getLine());
-        $first = true;
-        while (!$stream->test(Token::PUNCTUATION_TYPE, '}')) {
-            if (!$first) {
-                $stream->expect(Token::PUNCTUATION_TYPE, ',', 'A mapping value must be followed by a comma');
-
-                // trailing ,?
-                if ($stream->test(Token::PUNCTUATION_TYPE, '}')) {
-                    break;
-                }
-            }
-            $first = false;
-
-            if ($stream->test(Token::OPERATOR_TYPE, '...')) {
-                $node->addElement($parser->parseExpression());
-
-                continue;
-            }
-
-            // a mapping key can be:
-            //
-            //  * a number -- 12
-            //  * a string -- 'a'
-            //  * a name, which is equivalent to a string -- a
-            //  * an expression, which must be enclosed in parentheses -- (1 + 2)
-            if ($token = $stream->nextIf(Token::NAME_TYPE)) {
-                $key = new ConstantExpression($token->getValue(), $token->getLine());
-
-                // {a} is a shortcut for {a:a}
-                if ($stream->test(Token::PUNCTUATION_TYPE, [',', '}'])) {
-                    $value = new ContextVariable($key->getAttribute('value'), $key->getTemplateLine());
-                    $node->addElement($value, $key);
-                    continue;
-                }
-            } elseif (($token = $stream->nextIf(Token::STRING_TYPE)) || $token = $stream->nextIf(Token::NUMBER_TYPE)) {
-                $key = new ConstantExpression($token->getValue(), $token->getLine());
-            } elseif ($stream->test(Token::OPERATOR_TYPE, '(')) {
-                $key = $parser->parseExpression();
-            } else {
-                $current = $stream->getCurrent();
-
-                throw new SyntaxError(\sprintf('A mapping key must be a quoted string, a number, a name, or an expression enclosed in parentheses (unexpected token "%s" of value "%s".', $current->toEnglish(), $current->getValue()), $current->getLine(), $stream->getSourceContext());
-            }
-
-            $stream->expect(Token::PUNCTUATION_TYPE, ':', 'A mapping key must be followed by a colon (:)');
-            $value = $parser->parseExpression();
-
-            $node->addElement($value, $key);
-        }
-        $stream->expect(Token::PUNCTUATION_TYPE, '}', 'An opened mapping is not properly closed');
-
-        return $node;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/Prefix/UnaryOperatorExpressionParser.php b/generated/php/vendor/twig/twig/src/ExpressionParser/Prefix/UnaryOperatorExpressionParser.php
deleted file mode 100644
index 8013900..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/Prefix/UnaryOperatorExpressionParser.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser\Prefix;
-
-use Twig\ExpressionParser\AbstractExpressionParser;
-use Twig\ExpressionParser\ExpressionParserDescriptionInterface;
-use Twig\ExpressionParser\PrecedenceChange;
-use Twig\ExpressionParser\PrefixExpressionParserInterface;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\Unary\AbstractUnary;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class UnaryOperatorExpressionParser extends AbstractExpressionParser implements PrefixExpressionParserInterface, ExpressionParserDescriptionInterface
-{
-    public function __construct(
-        /** @var class-string<AbstractUnary> */
-        private string $nodeClass,
-        private string $name,
-        private int $precedence,
-        private ?PrecedenceChange $precedenceChange = null,
-        private ?string $description = null,
-        private array $aliases = [],
-        private ?int $operandPrecedence = null,
-    ) {
-    }
-
-    /**
-     * @return AbstractUnary
-     */
-    public function parse(Parser $parser, Token $token): AbstractExpression
-    {
-        return new ($this->nodeClass)($parser->parseExpression($this->operandPrecedence ?? $this->precedence), $token->getLine());
-    }
-
-    public function getName(): string
-    {
-        return $this->name;
-    }
-
-    public function getDescription(): string
-    {
-        return $this->description ?? '';
-    }
-
-    public function getPrecedence(): int
-    {
-        return $this->precedence;
-    }
-
-    public function getPrecedenceChange(): ?PrecedenceChange
-    {
-        return $this->precedenceChange;
-    }
-
-    public function getAliases(): array
-    {
-        return $this->aliases;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExpressionParser/PrefixExpressionParserInterface.php b/generated/php/vendor/twig/twig/src/ExpressionParser/PrefixExpressionParserInterface.php
deleted file mode 100644
index 8e39dad..0000000
--- a/generated/php/vendor/twig/twig/src/ExpressionParser/PrefixExpressionParserInterface.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\ExpressionParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Parser;
-use Twig\Token;
-
-interface PrefixExpressionParserInterface extends ExpressionParserInterface
-{
-    /**
-     * @throws SyntaxError
-     */
-    public function parse(Parser $parser, Token $token): AbstractExpression;
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/AbstractExtension.php b/generated/php/vendor/twig/twig/src/Extension/AbstractExtension.php
deleted file mode 100644
index 351fb06..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/AbstractExtension.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-abstract class AbstractExtension implements LastModifiedExtensionInterface
-{
-    public function getTokenParsers()
-    {
-        return [];
-    }
-
-    public function getNodeVisitors()
-    {
-        return [];
-    }
-
-    public function getFilters()
-    {
-        return [];
-    }
-
-    public function getTests()
-    {
-        return [];
-    }
-
-    public function getFunctions()
-    {
-        return [];
-    }
-
-    public function getOperators()
-    {
-        return [[], []];
-    }
-
-    public function getExpressionParsers(): array
-    {
-        return [];
-    }
-
-    public function getLastModified(): int
-    {
-        $filename = (new \ReflectionClass($this))->getFileName();
-        if (!is_file($filename)) {
-            return 0;
-        }
-
-        $lastModified = filemtime($filename);
-
-        // Track modifications of the runtime class if it exists and follows the naming convention
-        if (str_ends_with($filename, 'Extension.php') && is_file($filename = substr($filename, 0, -13).'Runtime.php')) {
-            $lastModified = max($lastModified, filemtime($filename));
-        }
-
-        return $lastModified;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/AttributeExtension.php b/generated/php/vendor/twig/twig/src/Extension/AttributeExtension.php
deleted file mode 100644
index 623fd4f..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/AttributeExtension.php
+++ /dev/null
@@ -1,179 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\Attribute\AsTwigFilter;
-use Twig\Attribute\AsTwigFunction;
-use Twig\Attribute\AsTwigTest;
-use Twig\Environment;
-use Twig\TwigFilter;
-use Twig\TwigFunction;
-use Twig\TwigTest;
-
-/**
- * Define Twig filters, functions, and tests with PHP attributes.
- *
- * @author Jérôme Tamarelle <jerome@tamarelle.net>
- */
-final class AttributeExtension extends AbstractExtension
-{
-    private array $filters;
-    private array $functions;
-    private array $tests;
-
-    /**
-     * Use a runtime class using PHP attributes to define filters, functions, and tests.
-     *
-     * @param class-string $class
-     */
-    public function __construct(private string $class)
-    {
-    }
-
-    /**
-     * @return class-string
-     */
-    public function getClass(): string
-    {
-        return $this->class;
-    }
-
-    public function getFilters(): array
-    {
-        if (!isset($this->filters)) {
-            $this->initFromAttributes();
-        }
-
-        return $this->filters;
-    }
-
-    public function getFunctions(): array
-    {
-        if (!isset($this->functions)) {
-            $this->initFromAttributes();
-        }
-
-        return $this->functions;
-    }
-
-    public function getTests(): array
-    {
-        if (!isset($this->tests)) {
-            $this->initFromAttributes();
-        }
-
-        return $this->tests;
-    }
-
-    public function getLastModified(): int
-    {
-        return max(
-            filemtime(__FILE__),
-            is_file($filename = (new \ReflectionClass($this->getClass()))->getFileName()) ? filemtime($filename) : 0,
-        );
-    }
-
-    private function initFromAttributes(): void
-    {
-        $filters = $functions = $tests = [];
-        $reflectionClass = new \ReflectionClass($this->getClass());
-        foreach ($reflectionClass->getMethods() as $method) {
-            foreach ($method->getAttributes(AsTwigFilter::class) as $reflectionAttribute) {
-                /** @var AsTwigFilter $attribute */
-                $attribute = $reflectionAttribute->newInstance();
-
-                $callable = new TwigFilter($attribute->name, [$reflectionClass->name, $method->getName()], [
-                    'needs_context' => $attribute->needsContext ?? false,
-                    'needs_environment' => $attribute->needsEnvironment ?? $this->needsEnvironment($method),
-                    'needs_charset' => $attribute->needsCharset ?? false,
-                    'needs_is_sandboxed' => $attribute->needsIsSandboxed ?? false,
-                    'is_variadic' => $method->isVariadic(),
-                    'is_safe' => $attribute->isSafe,
-                    'is_safe_callback' => $attribute->isSafeCallback,
-                    'pre_escape' => $attribute->preEscape,
-                    'preserves_safety' => $attribute->preservesSafety,
-                    'always_allowed_in_sandbox' => $attribute->alwaysAllowedInSandbox ?? false,
-                    'deprecation_info' => $attribute->deprecationInfo,
-                ]);
-
-                if ($callable->getMinimalNumberOfRequiredArguments() > $method->getNumberOfParameters()) {
-                    throw new \LogicException(\sprintf('"%s::%s()" needs at least %d arguments to be used AsTwigFilter, but only %d defined.', $reflectionClass->getName(), $method->getName(), $callable->getMinimalNumberOfRequiredArguments(), $method->getNumberOfParameters()));
-                }
-
-                $filters[$attribute->name] = $callable;
-            }
-
-            foreach ($method->getAttributes(AsTwigFunction::class) as $reflectionAttribute) {
-                /** @var AsTwigFunction $attribute */
-                $attribute = $reflectionAttribute->newInstance();
-
-                $callable = new TwigFunction($attribute->name, [$reflectionClass->name, $method->getName()], [
-                    'needs_context' => $attribute->needsContext ?? false,
-                    'needs_environment' => $attribute->needsEnvironment ?? $this->needsEnvironment($method),
-                    'needs_charset' => $attribute->needsCharset ?? false,
-                    'needs_is_sandboxed' => $attribute->needsIsSandboxed ?? false,
-                    'is_variadic' => $method->isVariadic(),
-                    'is_safe' => $attribute->isSafe,
-                    'is_safe_callback' => $attribute->isSafeCallback,
-                    'always_allowed_in_sandbox' => $attribute->alwaysAllowedInSandbox ?? false,
-                    'deprecation_info' => $attribute->deprecationInfo,
-                ]);
-
-                if ($callable->getMinimalNumberOfRequiredArguments() > $method->getNumberOfParameters()) {
-                    throw new \LogicException(\sprintf('"%s::%s()" needs at least %d arguments to be used AsTwigFunction, but only %d defined.', $reflectionClass->getName(), $method->getName(), $callable->getMinimalNumberOfRequiredArguments(), $method->getNumberOfParameters()));
-                }
-
-                $functions[$attribute->name] = $callable;
-            }
-
-            foreach ($method->getAttributes(AsTwigTest::class) as $reflectionAttribute) {
-                /** @var AsTwigTest $attribute */
-                $attribute = $reflectionAttribute->newInstance();
-
-                $callable = new TwigTest($attribute->name, [$reflectionClass->name, $method->getName()], [
-                    'needs_context' => $attribute->needsContext ?? false,
-                    'needs_environment' => $attribute->needsEnvironment ?? $this->needsEnvironment($method),
-                    'needs_charset' => $attribute->needsCharset ?? false,
-                    'needs_is_sandboxed' => $attribute->needsIsSandboxed ?? false,
-                    'is_variadic' => $method->isVariadic(),
-                    'always_allowed_in_sandbox' => $attribute->alwaysAllowedInSandbox ?? false,
-                    'deprecation_info' => $attribute->deprecationInfo,
-                ]);
-
-                if ($callable->getMinimalNumberOfRequiredArguments() > $method->getNumberOfParameters()) {
-                    throw new \LogicException(\sprintf('"%s::%s()" needs at least %d arguments to be used AsTwigTest, but only %d defined.', $reflectionClass->getName(), $method->getName(), $callable->getMinimalNumberOfRequiredArguments(), $method->getNumberOfParameters()));
-                }
-
-                $tests[$attribute->name] = $callable;
-            }
-        }
-
-        // Assign all at the end to avoid inconsistent state in case of exception
-        $this->filters = array_values($filters);
-        $this->functions = array_values($functions);
-        $this->tests = array_values($tests);
-    }
-
-    /**
-     * Detect if the first argument of the method is the environment.
-     */
-    private function needsEnvironment(\ReflectionFunctionAbstract $function): bool
-    {
-        if (!$parameters = $function->getParameters()) {
-            return false;
-        }
-
-        return $parameters[0]->getType() instanceof \ReflectionNamedType
-            && Environment::class === $parameters[0]->getType()->getName()
-            && !$parameters[0]->isVariadic();
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/CoreExtension.php b/generated/php/vendor/twig/twig/src/Extension/CoreExtension.php
deleted file mode 100644
index 9ef620b..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/CoreExtension.php
+++ /dev/null
@@ -1,2223 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\DeprecatedCallableInfo;
-use Twig\Environment;
-use Twig\Error\LoaderError;
-use Twig\Error\RuntimeError;
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\Infix\ArrowExpressionParser;
-use Twig\ExpressionParser\Infix\AssignmentExpressionParser;
-use Twig\ExpressionParser\Infix\BinaryOperatorExpressionParser;
-use Twig\ExpressionParser\Infix\ConditionalTernaryExpressionParser;
-use Twig\ExpressionParser\Infix\DotExpressionParser;
-use Twig\ExpressionParser\Infix\FilterExpressionParser;
-use Twig\ExpressionParser\Infix\FunctionExpressionParser;
-use Twig\ExpressionParser\Infix\IsExpressionParser;
-use Twig\ExpressionParser\Infix\IsNotExpressionParser;
-use Twig\ExpressionParser\Infix\SquareBracketExpressionParser;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\PrecedenceChange;
-use Twig\ExpressionParser\Prefix\GroupingExpressionParser;
-use Twig\ExpressionParser\Prefix\LiteralExpressionParser;
-use Twig\ExpressionParser\Prefix\UnaryOperatorExpressionParser;
-use Twig\Markup;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\Binary\AddBinary;
-use Twig\Node\Expression\Binary\AndBinary;
-use Twig\Node\Expression\Binary\BitwiseAndBinary;
-use Twig\Node\Expression\Binary\BitwiseOrBinary;
-use Twig\Node\Expression\Binary\BitwiseXorBinary;
-use Twig\Node\Expression\Binary\ConcatBinary;
-use Twig\Node\Expression\Binary\DivBinary;
-use Twig\Node\Expression\Binary\ElvisBinary;
-use Twig\Node\Expression\Binary\EndsWithBinary;
-use Twig\Node\Expression\Binary\EqualBinary;
-use Twig\Node\Expression\Binary\FloorDivBinary;
-use Twig\Node\Expression\Binary\GreaterBinary;
-use Twig\Node\Expression\Binary\GreaterEqualBinary;
-use Twig\Node\Expression\Binary\HasEveryBinary;
-use Twig\Node\Expression\Binary\HasSomeBinary;
-use Twig\Node\Expression\Binary\InBinary;
-use Twig\Node\Expression\Binary\LessBinary;
-use Twig\Node\Expression\Binary\LessEqualBinary;
-use Twig\Node\Expression\Binary\MatchesBinary;
-use Twig\Node\Expression\Binary\ModBinary;
-use Twig\Node\Expression\Binary\MulBinary;
-use Twig\Node\Expression\Binary\NotEqualBinary;
-use Twig\Node\Expression\Binary\NotInBinary;
-use Twig\Node\Expression\Binary\NotSameAsBinary;
-use Twig\Node\Expression\Binary\NullCoalesceBinary;
-use Twig\Node\Expression\Binary\OrBinary;
-use Twig\Node\Expression\Binary\PowerBinary;
-use Twig\Node\Expression\Binary\RangeBinary;
-use Twig\Node\Expression\Binary\SameAsBinary;
-use Twig\Node\Expression\Binary\SpaceshipBinary;
-use Twig\Node\Expression\Binary\StartsWithBinary;
-use Twig\Node\Expression\Binary\SubBinary;
-use Twig\Node\Expression\Binary\XorBinary;
-use Twig\Node\Expression\BlockReferenceExpression;
-use Twig\Node\Expression\Filter\DefaultFilter;
-use Twig\Node\Expression\FunctionNode\EnumCasesFunction;
-use Twig\Node\Expression\FunctionNode\EnumFunction;
-use Twig\Node\Expression\GetAttrExpression;
-use Twig\Node\Expression\ParentExpression;
-use Twig\Node\Expression\Test\ConstantTest;
-use Twig\Node\Expression\Test\DefinedTest;
-use Twig\Node\Expression\Test\DivisiblebyTest;
-use Twig\Node\Expression\Test\EvenTest;
-use Twig\Node\Expression\Test\NullTest;
-use Twig\Node\Expression\Test\OddTest;
-use Twig\Node\Expression\Test\SameasTest;
-use Twig\Node\Expression\Test\TrueTest;
-use Twig\Node\Expression\Unary\NegUnary;
-use Twig\Node\Expression\Unary\NotUnary;
-use Twig\Node\Expression\Unary\PosUnary;
-use Twig\Node\Expression\Unary\SpreadUnary;
-use Twig\Node\Node;
-use Twig\NodeVisitor\CorrectnessNodeVisitor;
-use Twig\Parser;
-use Twig\Sandbox\SecurityNotAllowedMethodError;
-use Twig\Sandbox\SecurityNotAllowedPropertyError;
-use Twig\Source;
-use Twig\Template;
-use Twig\TemplateWrapper;
-use Twig\TokenParser\ApplyTokenParser;
-use Twig\TokenParser\BlockTokenParser;
-use Twig\TokenParser\DeprecatedTokenParser;
-use Twig\TokenParser\DoTokenParser;
-use Twig\TokenParser\EmbedTokenParser;
-use Twig\TokenParser\ExtendsTokenParser;
-use Twig\TokenParser\FlushTokenParser;
-use Twig\TokenParser\ForTokenParser;
-use Twig\TokenParser\FromTokenParser;
-use Twig\TokenParser\GuardTokenParser;
-use Twig\TokenParser\IfTokenParser;
-use Twig\TokenParser\ImportTokenParser;
-use Twig\TokenParser\IncludeTokenParser;
-use Twig\TokenParser\MacroTokenParser;
-use Twig\TokenParser\SetTokenParser;
-use Twig\TokenParser\TypesTokenParser;
-use Twig\TokenParser\UseTokenParser;
-use Twig\TokenParser\WithTokenParser;
-use Twig\TwigFilter;
-use Twig\TwigFunction;
-use Twig\TwigTest;
-use Twig\Util\CallableArgumentsExtractor;
-
-final class CoreExtension extends AbstractExtension
-{
-    public const ARRAY_LIKE_CLASSES = [
-        'ArrayIterator',
-        'ArrayObject',
-        'CachingIterator',
-        'RecursiveArrayIterator',
-        'RecursiveCachingIterator',
-        'SplDoublyLinkedList',
-        'SplFixedArray',
-        'SplObjectStorage',
-        'SplQueue',
-        'SplStack',
-        'WeakMap',
-    ];
-
-    private const DEFAULT_TRIM_CHARS = " \t\n\r\0\x0B";
-
-    private $dateFormats = ['F j, Y H:i', '%d days'];
-    private $numberFormat = [0, '.', ','];
-    private $timezone;
-
-    /**
-     * Sets the default format to be used by the date filter.
-     *
-     * @param string|null $format             The default date format string
-     * @param string|null $dateIntervalFormat The default date interval format string
-     */
-    public function setDateFormat($format = null, $dateIntervalFormat = null)
-    {
-        if (null !== $format) {
-            $this->dateFormats[0] = $format;
-        }
-
-        if (null !== $dateIntervalFormat) {
-            $this->dateFormats[1] = $dateIntervalFormat;
-        }
-    }
-
-    /**
-     * Gets the default format to be used by the date filter.
-     *
-     * @return array The default date format string and the default date interval format string
-     */
-    public function getDateFormat()
-    {
-        return $this->dateFormats;
-    }
-
-    /**
-     * Sets the default timezone to be used by the date filter.
-     *
-     * @param \DateTimeZone|string $timezone The default timezone string or a \DateTimeZone object
-     */
-    public function setTimezone($timezone)
-    {
-        $this->timezone = $timezone instanceof \DateTimeZone ? $timezone : new \DateTimeZone($timezone);
-    }
-
-    /**
-     * Gets the default timezone to be used by the date filter.
-     *
-     * @return \DateTimeZone The default timezone currently in use
-     */
-    public function getTimezone()
-    {
-        if (null === $this->timezone) {
-            $this->timezone = new \DateTimeZone(date_default_timezone_get());
-        }
-
-        return $this->timezone;
-    }
-
-    /**
-     * Sets the default format to be used by the number_format filter.
-     *
-     * @param int    $decimal      the number of decimal places to use
-     * @param string $decimalPoint the character(s) to use for the decimal point
-     * @param string $thousandSep  the character(s) to use for the thousands separator
-     */
-    public function setNumberFormat($decimal, $decimalPoint, $thousandSep)
-    {
-        $this->numberFormat = [$decimal, $decimalPoint, $thousandSep];
-    }
-
-    /**
-     * Get the default format used by the number_format filter.
-     *
-     * @return array The arguments for number_format()
-     */
-    public function getNumberFormat()
-    {
-        return $this->numberFormat;
-    }
-
-    public function getTokenParsers(): array
-    {
-        return [
-            new ApplyTokenParser(),
-            new ForTokenParser(),
-            new IfTokenParser(),
-            new ExtendsTokenParser(),
-            new IncludeTokenParser(),
-            new BlockTokenParser(),
-            new UseTokenParser(),
-            new MacroTokenParser(),
-            new ImportTokenParser(),
-            new FromTokenParser(),
-            new SetTokenParser(),
-            new TypesTokenParser(),
-            new FlushTokenParser(),
-            new DoTokenParser(),
-            new EmbedTokenParser(),
-            new WithTokenParser(),
-            new DeprecatedTokenParser(),
-            new GuardTokenParser(),
-        ];
-    }
-
-    public function getFilters(): array
-    {
-        return [
-            // formatting filters
-            new TwigFilter('date', [$this, 'formatDate']),
-            new TwigFilter('date_modify', [$this, 'modifyDate']),
-            new TwigFilter('format', [self::class, 'sprintf']),
-            new TwigFilter('replace', [self::class, 'replace']),
-            new TwigFilter('number_format', [$this, 'formatNumber']),
-            new TwigFilter('abs', 'abs'),
-            new TwigFilter('round', [self::class, 'round']),
-
-            // encoding
-            new TwigFilter('url_encode', [self::class, 'urlencode']),
-            new TwigFilter('json_encode', 'json_encode'),
-            new TwigFilter('convert_encoding', [self::class, 'convertEncoding']),
-
-            // string filters
-            new TwigFilter('title', [self::class, 'titleCase'], ['needs_charset' => true]),
-            new TwigFilter('capitalize', [self::class, 'capitalize'], ['needs_charset' => true]),
-            new TwigFilter('upper', [self::class, 'upper'], ['needs_charset' => true]),
-            new TwigFilter('lower', [self::class, 'lower'], ['needs_charset' => true]),
-            new TwigFilter('striptags', [self::class, 'striptags']),
-            new TwigFilter('trim', [self::class, 'trim']),
-            new TwigFilter('nl2br', [self::class, 'nl2br'], ['pre_escape' => 'html', 'is_safe' => ['html']]),
-            new TwigFilter('spaceless', [self::class, 'spaceless'], ['pre_escape' => 'html', 'is_safe' => ['html'], 'deprecation_info' => new DeprecatedCallableInfo('twig/twig', '3.12')]),
-
-            // array helpers
-            new TwigFilter('join', [self::class, 'join']),
-            new TwigFilter('split', [self::class, 'split'], ['needs_charset' => true]),
-            new TwigFilter('sort', [self::class, 'sort'], ['needs_environment' => true, 'needs_is_sandboxed' => true]),
-            new TwigFilter('merge', [self::class, 'merge']),
-            new TwigFilter('batch', [self::class, 'batch']),
-            new TwigFilter('column', [self::class, 'column'], ['needs_environment' => true, 'needs_is_sandboxed' => true]),
-            new TwigFilter('filter', [self::class, 'filter'], ['needs_environment' => true, 'needs_is_sandboxed' => true]),
-            new TwigFilter('map', [self::class, 'map'], ['needs_environment' => true, 'needs_is_sandboxed' => true]),
-            new TwigFilter('reduce', [self::class, 'reduce'], ['needs_environment' => true, 'needs_is_sandboxed' => true]),
-            new TwigFilter('find', [self::class, 'find'], ['needs_environment' => true, 'needs_is_sandboxed' => true]),
-
-            // string/array filters
-            new TwigFilter('reverse', [self::class, 'reverse'], ['needs_charset' => true]),
-            new TwigFilter('shuffle', [self::class, 'shuffle'], ['needs_charset' => true]),
-            new TwigFilter('length', [self::class, 'length'], ['needs_charset' => true]),
-            new TwigFilter('slice', [self::class, 'slice'], ['needs_charset' => true]),
-            new TwigFilter('first', [self::class, 'first'], ['needs_charset' => true]),
-            new TwigFilter('last', [self::class, 'last'], ['needs_charset' => true]),
-
-            // iteration and runtime
-            new TwigFilter('default', [self::class, 'default'], ['node_class' => DefaultFilter::class]),
-            new TwigFilter('keys', [self::class, 'keys']),
-            new TwigFilter('invoke', [self::class, 'invoke']),
-        ];
-    }
-
-    public function getFunctions(): array
-    {
-        return [
-            new TwigFunction('parent', null, ['parser_callable' => [self::class, 'parseParentFunction']]),
-            new TwigFunction('block', null, ['parser_callable' => [self::class, 'parseBlockFunction']]),
-            new TwigFunction('attribute', null, ['parser_callable' => [self::class, 'parseAttributeFunction']]),
-            new TwigFunction('max', 'max'),
-            new TwigFunction('min', 'min'),
-            new TwigFunction('range', 'range'),
-            new TwigFunction('constant', [self::class, 'constant']),
-            new TwigFunction('cycle', [self::class, 'cycle']),
-            new TwigFunction('random', [self::class, 'random'], ['needs_charset' => true]),
-            new TwigFunction('date', [$this, 'convertDate']),
-            new TwigFunction('include', [self::class, 'include'], ['needs_environment' => true, 'needs_context' => true, 'is_safe' => ['all']]),
-            new TwigFunction('source', [self::class, 'source'], ['needs_environment' => true, 'is_safe' => ['all']]),
-            new TwigFunction('enum_cases', [self::class, 'enumCases'], ['node_class' => EnumCasesFunction::class]),
-            new TwigFunction('enum', [self::class, 'enum'], ['node_class' => EnumFunction::class]),
-        ];
-    }
-
-    public function getTests(): array
-    {
-        return [
-            new TwigTest('even', null, ['node_class' => EvenTest::class, 'always_allowed_in_sandbox' => true]),
-            new TwigTest('odd', null, ['node_class' => OddTest::class, 'always_allowed_in_sandbox' => true]),
-            new TwigTest('defined', null, ['node_class' => DefinedTest::class, 'always_allowed_in_sandbox' => true]),
-            new TwigTest('same as', null, ['node_class' => SameasTest::class, 'one_mandatory_argument' => true, 'always_allowed_in_sandbox' => true]),
-            new TwigTest('none', null, ['node_class' => NullTest::class, 'always_allowed_in_sandbox' => true]),
-            new TwigTest('null', null, ['node_class' => NullTest::class, 'always_allowed_in_sandbox' => true]),
-            new TwigTest('divisible by', null, ['node_class' => DivisiblebyTest::class, 'one_mandatory_argument' => true, 'always_allowed_in_sandbox' => true]),
-            new TwigTest('constant', null, ['node_class' => ConstantTest::class]),
-            new TwigTest('empty', [self::class, 'testEmpty'], ['always_allowed_in_sandbox' => true]),
-            new TwigTest('iterable', 'is_iterable', ['always_allowed_in_sandbox' => true]),
-            new TwigTest('sequence', [self::class, 'testSequence'], ['always_allowed_in_sandbox' => true]),
-            new TwigTest('mapping', [self::class, 'testMapping'], ['always_allowed_in_sandbox' => true]),
-            new TwigTest('true', null, ['node_class' => TrueTest::class, 'always_allowed_in_sandbox' => true]),
-        ];
-    }
-
-    public function getNodeVisitors(): array
-    {
-        return [
-            new CorrectnessNodeVisitor(),
-        ];
-    }
-
-    public function getExpressionParsers(): array
-    {
-        return [
-            // unary operators
-            new UnaryOperatorExpressionParser(NotUnary::class, 'not', 50, new PrecedenceChange('twig/twig', '3.15', 70)),
-            new UnaryOperatorExpressionParser(SpreadUnary::class, '...', 512, description: 'Spread operator', operandPrecedence: 0),
-            new UnaryOperatorExpressionParser(NegUnary::class, '-', 500),
-            new UnaryOperatorExpressionParser(PosUnary::class, '+', 500),
-
-            // binary operators
-            new BinaryOperatorExpressionParser(ElvisBinary::class, '?:', 5, InfixAssociativity::Right, description: 'Elvis operator (a ?: b)', aliases: ['? :']),
-            new BinaryOperatorExpressionParser(NullCoalesceBinary::class, '??', 300, InfixAssociativity::Right, new PrecedenceChange('twig/twig', '3.15', 5), description: 'Null coalescing operator (a ?? b)'),
-            new BinaryOperatorExpressionParser(OrBinary::class, 'or', 10),
-            new BinaryOperatorExpressionParser(XorBinary::class, 'xor', 12),
-            new BinaryOperatorExpressionParser(AndBinary::class, 'and', 15),
-            new BinaryOperatorExpressionParser(BitwiseOrBinary::class, 'b-or', 16),
-            new BinaryOperatorExpressionParser(BitwiseXorBinary::class, 'b-xor', 17),
-            new BinaryOperatorExpressionParser(BitwiseAndBinary::class, 'b-and', 18),
-            new BinaryOperatorExpressionParser(EqualBinary::class, '==', 20),
-            new BinaryOperatorExpressionParser(NotEqualBinary::class, '!=', 20),
-            new BinaryOperatorExpressionParser(SpaceshipBinary::class, '<=>', 20),
-            new BinaryOperatorExpressionParser(LessBinary::class, '<', 20),
-            new BinaryOperatorExpressionParser(GreaterBinary::class, '>', 20),
-            new BinaryOperatorExpressionParser(GreaterEqualBinary::class, '>=', 20),
-            new BinaryOperatorExpressionParser(LessEqualBinary::class, '<=', 20),
-            new BinaryOperatorExpressionParser(NotInBinary::class, 'not in', 20),
-            new BinaryOperatorExpressionParser(InBinary::class, 'in', 20),
-            new BinaryOperatorExpressionParser(MatchesBinary::class, 'matches', 20),
-            new BinaryOperatorExpressionParser(StartsWithBinary::class, 'starts with', 20),
-            new BinaryOperatorExpressionParser(EndsWithBinary::class, 'ends with', 20),
-            new BinaryOperatorExpressionParser(HasSomeBinary::class, 'has some', 20),
-            new BinaryOperatorExpressionParser(HasEveryBinary::class, 'has every', 20),
-            new BinaryOperatorExpressionParser(SameAsBinary::class, '===', 20),
-            new BinaryOperatorExpressionParser(NotSameAsBinary::class, '!==', 20),
-            new BinaryOperatorExpressionParser(RangeBinary::class, '..', 25),
-            new BinaryOperatorExpressionParser(AddBinary::class, '+', 30),
-            new BinaryOperatorExpressionParser(SubBinary::class, '-', 30),
-            new BinaryOperatorExpressionParser(ConcatBinary::class, '~', 40, precedenceChange: new PrecedenceChange('twig/twig', '3.15', 27)),
-            new BinaryOperatorExpressionParser(MulBinary::class, '*', 60),
-            new BinaryOperatorExpressionParser(DivBinary::class, '/', 60),
-            new BinaryOperatorExpressionParser(FloorDivBinary::class, '//', 60, description: 'Floor division'),
-            new BinaryOperatorExpressionParser(ModBinary::class, '%', 60),
-            new BinaryOperatorExpressionParser(PowerBinary::class, '**', 200, InfixAssociativity::Right, description: 'Exponentiation operator'),
-
-            // ternary operator
-            new ConditionalTernaryExpressionParser(),
-
-            // assignment operator
-            new AssignmentExpressionParser('='),
-
-            // Twig callables
-            new IsExpressionParser(),
-            new IsNotExpressionParser(),
-            new FilterExpressionParser(),
-            new FunctionExpressionParser(),
-
-            // get attribute operators
-            new DotExpressionParser(),
-            new SquareBracketExpressionParser(),
-
-            // group expression
-            new GroupingExpressionParser(),
-
-            // arrow function
-            new ArrowExpressionParser(),
-
-            // all literals
-            new LiteralExpressionParser(),
-        ];
-    }
-
-    /**
-     * Cycles over a sequence.
-     *
-     * @param array|\ArrayAccess $values   A non-empty sequence of values
-     * @param int<0, max>        $position The position of the value to return in the cycle
-     *
-     * @return mixed The value at the given position in the sequence, wrapping around as needed
-     *
-     * @internal
-     */
-    public static function cycle($values, $position): mixed
-    {
-        if (!\is_array($values)) {
-            if (!$values instanceof \ArrayAccess) {
-                throw new RuntimeError('The "cycle" function expects an array or "ArrayAccess" as first argument.');
-            }
-
-            if (!is_countable($values)) {
-                // To be uncommented in 4.0
-                // throw new RuntimeError('The "cycle" function expects a countable sequence as first argument.');
-
-                trigger_deprecation('twig/twig', '3.12', 'Passing a non-countable sequence of values to "%s()" is deprecated.', __METHOD__);
-
-                $values = self::toArray($values, false);
-            }
-        }
-
-        if (!$count = \count($values)) {
-            throw new RuntimeError('The "cycle" function expects a non-empty sequence.');
-        }
-
-        return $values[$position % $count];
-    }
-
-    /**
-     * Returns a random value depending on the supplied parameter type:
-     * - a random item from a \Traversable or array
-     * - a random character from a string
-     * - a random integer between 0 and the integer parameter.
-     *
-     * @param \Traversable|array|int|float|string $values The values to pick a random item from
-     * @param int|null                            $max    Maximum value used when $values is an int
-     *
-     * @return mixed A random value from the given sequence
-     *
-     * @throws RuntimeError when $values is an empty array (does not apply to an empty string which is returned as is)
-     *
-     * @internal
-     */
-    public static function random(string $charset, $values = null, $max = null)
-    {
-        if (null === $values) {
-            return null === $max ? mt_rand() : mt_rand(0, (int) $max);
-        }
-
-        if (\is_int($values) || \is_float($values)) {
-            if (null === $max) {
-                if ($values < 0) {
-                    $max = 0;
-                    $min = $values;
-                } else {
-                    $max = $values;
-                    $min = 0;
-                }
-            } else {
-                $min = $values;
-            }
-
-            return mt_rand((int) $min, (int) $max);
-        }
-
-        if (\is_string($values)) {
-            if ('' === $values) {
-                return '';
-            }
-
-            if ('UTF-8' !== $charset) {
-                $values = self::convertEncoding($values, 'UTF-8', $charset);
-            }
-
-            // unicode version of str_split()
-            // split at all positions, but not after the start and not before the end
-            $values = preg_split('/(?<!^)(?!$)/u', $values);
-
-            if ('UTF-8' !== $charset) {
-                foreach ($values as $i => $value) {
-                    $values[$i] = self::convertEncoding($value, $charset, 'UTF-8');
-                }
-            }
-        }
-
-        if (!is_iterable($values)) {
-            return $values;
-        }
-
-        $values = self::toArray($values);
-
-        if (0 === \count($values)) {
-            throw new RuntimeError('The "random" function cannot pick from an empty sequence or mapping.');
-        }
-
-        return $values[array_rand($values, 1)];
-    }
-
-    /**
-     * Formats a date.
-     *
-     *   {{ post.published_at|date("m/d/Y") }}
-     *
-     * @param \DateTimeInterface|\DateInterval|string|int|null $date     A date, a timestamp or null to use the current time
-     * @param string|null                                      $format   The target format, null to use the default
-     * @param \DateTimeZone|string|false|null                  $timezone The target timezone, null to use the default, false to leave unchanged
-     */
-    public function formatDate($date, $format = null, $timezone = null): string
-    {
-        if (null === $format) {
-            $formats = $this->getDateFormat();
-            $format = $date instanceof \DateInterval ? $formats[1] : $formats[0];
-        }
-
-        if ($date instanceof \DateInterval) {
-            return $date->format($format);
-        }
-
-        return $this->convertDate($date, $timezone)->format($format);
-    }
-
-    /**
-     * Returns a new date object modified.
-     *
-     *   {{ post.published_at|date_modify("-1day")|date("m/d/Y") }}
-     *
-     * @param \DateTimeInterface|string|int|null $date     A date, a timestamp or null to use the current time
-     * @param string                             $modifier A modifier string
-     *
-     * @return \DateTime|\DateTimeImmutable
-     *
-     * @internal
-     */
-    public function modifyDate($date, $modifier)
-    {
-        return $this->convertDate($date, false)->modify($modifier);
-    }
-
-    /**
-     * Returns a formatted string.
-     *
-     * @param string|null $format
-     *
-     * @internal
-     */
-    public static function sprintf($format, ...$values): string
-    {
-        return \sprintf($format ?? '', ...$values);
-    }
-
-    /**
-     * @internal
-     */
-    public static function dateConverter(Environment $env, $date, $format = null, $timezone = null): string
-    {
-        return $env->getExtension(self::class)->formatDate($date, $format, $timezone);
-    }
-
-    /**
-     * Converts an input to a \DateTime instance.
-     *
-     *    {% if date(user.created_at) < date('+2days') %}
-     *      {# do something #}
-     *    {% endif %}
-     *
-     * @param \DateTimeInterface|string|int|null $date     A date, a timestamp or null to use the current time
-     * @param \DateTimeZone|string|false|null    $timezone The target timezone, null to use the default, false to leave unchanged
-     *
-     * @return \DateTime|\DateTimeImmutable
-     */
-    public function convertDate($date = null, $timezone = null)
-    {
-        // determine the timezone
-        if (false !== $timezone) {
-            if (null === $timezone) {
-                $timezone = $this->getTimezone();
-            } elseif (!$timezone instanceof \DateTimeZone) {
-                $timezone = new \DateTimeZone($timezone);
-            }
-        }
-
-        // immutable dates
-        if ($date instanceof \DateTimeImmutable) {
-            return false !== $timezone ? $date->setTimezone($timezone) : $date;
-        }
-
-        if ($date instanceof \DateTime) {
-            $date = clone $date;
-            if (false !== $timezone) {
-                $date->setTimezone($timezone);
-            }
-
-            return $date;
-        }
-
-        if (null === $date || 'now' === $date) {
-            if (null === $date) {
-                $date = 'now';
-            }
-
-            return new \DateTime($date, false !== $timezone ? $timezone : $this->getTimezone());
-        }
-
-        $asString = (string) $date;
-        if (ctype_digit($asString) || ('' !== $asString && '-' === $asString[0] && ctype_digit(substr($asString, 1)))) {
-            $date = new \DateTime('@'.$date);
-        } else {
-            $date = new \DateTime($date);
-        }
-
-        if (false !== $timezone) {
-            $date->setTimezone($timezone);
-        }
-
-        return $date;
-    }
-
-    /**
-     * Replaces strings within a string.
-     *
-     * @param string|null        $str  String to replace in
-     * @param array|\Traversable $from Replace values
-     *
-     * @internal
-     */
-    public static function replace($str, $from): string
-    {
-        if (!is_iterable($from)) {
-            throw new RuntimeError(\sprintf('The "replace" filter expects a sequence or a mapping, got "%s".', get_debug_type($from)));
-        }
-
-        return strtr($str ?? '', self::toArray($from));
-    }
-
-    /**
-     * Rounds a number.
-     *
-     * @param int|float|string|null   $value     The value to round
-     * @param int|float               $precision The rounding precision
-     * @param 'common'|'ceil'|'floor' $method    The method to use for rounding
-     *
-     * @return float The rounded number
-     *
-     * @internal
-     */
-    public static function round($value, $precision = 0, $method = 'common')
-    {
-        $value = (float) $value;
-
-        if ('common' === $method) {
-            return round($value, $precision);
-        }
-
-        if ('ceil' !== $method && 'floor' !== $method) {
-            throw new RuntimeError('The "round" filter only supports the "common", "ceil", and "floor" methods.');
-        }
-
-        return $method($value * 10 ** $precision) / 10 ** $precision;
-    }
-
-    /**
-     * Formats a number.
-     *
-     * All of the formatting options can be left null, in that case the defaults will
-     * be used. Supplying any of the parameters will override the defaults set in the
-     * environment object.
-     *
-     * @param mixed       $number       A float/int/string of the number to format
-     * @param int|null    $decimal      the number of decimal points to display
-     * @param string|null $decimalPoint the character(s) to use for the decimal point
-     * @param string|null $thousandSep  the character(s) to use for the thousands separator
-     */
-    public function formatNumber($number, $decimal = null, $decimalPoint = null, $thousandSep = null): string
-    {
-        $defaults = $this->getNumberFormat();
-        if (null === $decimal) {
-            $decimal = $defaults[0];
-        }
-
-        if (null === $decimalPoint) {
-            $decimalPoint = $defaults[1];
-        }
-
-        if (null === $thousandSep) {
-            $thousandSep = $defaults[2];
-        }
-
-        return number_format((float) $number, $decimal, $decimalPoint, $thousandSep);
-    }
-
-    /**
-     * URL encodes (RFC 3986) a string as a path segment or an array as a query string.
-     *
-     * @param string|array|null $url A URL or an array of query parameters
-     *
-     * @internal
-     */
-    public static function urlencode($url): string
-    {
-        if (\is_array($url)) {
-            return http_build_query($url, '', '&', \PHP_QUERY_RFC3986);
-        }
-
-        return rawurlencode($url ?? '');
-    }
-
-    /**
-     * Merges any number of arrays or Traversable objects.
-     *
-     *  {% set items = { 'apple': 'fruit', 'orange': 'fruit' } %}
-     *
-     *  {% set items = items|merge({ 'peugeot': 'car' }, { 'banana': 'fruit' }) %}
-     *
-     *  {# items now contains { 'apple': 'fruit', 'orange': 'fruit', 'peugeot': 'car', 'banana': 'fruit' } #}
-     *
-     * @param array|\Traversable ...$arrays Any number of arrays or Traversable objects to merge
-     *
-     * @internal
-     */
-    public static function merge(...$arrays): array
-    {
-        $result = [];
-
-        foreach ($arrays as $argNumber => $array) {
-            if (!is_iterable($array)) {
-                throw new RuntimeError(\sprintf('The "merge" filter expects a sequence or a mapping, got "%s" for argument %d.', get_debug_type($array), $argNumber + 1));
-            }
-
-            $result = array_merge($result, self::toArray($array));
-        }
-
-        return $result;
-    }
-
-    /**
-     * Slices a variable.
-     *
-     * @param mixed $item         A variable
-     * @param int   $start        Start of the slice
-     * @param int   $length       Size of the slice
-     * @param bool  $preserveKeys Whether to preserve key or not (when the input is an array)
-     *
-     * @return mixed The sliced variable
-     *
-     * @internal
-     */
-    public static function slice(string $charset, $item, $start, $length = null, $preserveKeys = false)
-    {
-        if ($item instanceof \Traversable) {
-            while ($item instanceof \IteratorAggregate) {
-                $item = $item->getIterator();
-            }
-
-            if ($start >= 0 && $length >= 0 && $item instanceof \Iterator) {
-                try {
-                    return iterator_to_array(new \LimitIterator($item, $start, $length ?? -1), $preserveKeys);
-                } catch (\OutOfBoundsException $e) {
-                    return [];
-                }
-            }
-
-            $item = iterator_to_array($item, $preserveKeys);
-        }
-
-        if (\is_array($item)) {
-            return \array_slice($item, $start, $length, $preserveKeys);
-        }
-
-        return mb_substr((string) $item, $start, $length, $charset);
-    }
-
-    /**
-     * Returns the first element of the item.
-     *
-     * @param mixed $item A variable
-     *
-     * @return mixed The first element of the item
-     *
-     * @internal
-     */
-    public static function first(string $charset, $item)
-    {
-        $elements = self::slice($charset, $item, 0, 1, false);
-
-        return \is_string($elements) ? $elements : current($elements);
-    }
-
-    /**
-     * Returns the last element of the item.
-     *
-     * @param mixed $item A variable
-     *
-     * @return mixed The last element of the item
-     *
-     * @internal
-     */
-    public static function last(string $charset, $item)
-    {
-        $elements = self::slice($charset, $item, -1, 1, false);
-
-        return \is_string($elements) ? $elements : current($elements);
-    }
-
-    /**
-     * Joins the values to a string.
-     *
-     * The separators between elements are empty strings per default, you can define them with the optional parameters.
-     *
-     *  {{ [1, 2, 3]|join(', ', ' and ') }}
-     *  {# returns 1, 2 and 3 #}
-     *
-     *  {{ [1, 2, 3]|join('|') }}
-     *  {# returns 1|2|3 #}
-     *
-     *  {{ [1, 2, 3]|join }}
-     *  {# returns 123 #}
-     *
-     * @param iterable|array|string|float|int|bool|null $value An array
-     * @param string                                    $glue  The separator
-     * @param string|null                               $and   The separator for the last pair
-     *
-     * @internal
-     */
-    public static function join($value, $glue = '', $and = null): string
-    {
-        if (!is_iterable($value)) {
-            $value = (array) $value;
-        }
-
-        $value = self::toArray($value, false);
-
-        if (0 === \count($value)) {
-            return '';
-        }
-
-        if (null === $and || $and === $glue) {
-            return implode($glue, $value);
-        }
-
-        if (1 === \count($value)) {
-            return $value[0];
-        }
-
-        return implode($glue, \array_slice($value, 0, -1)).$and.$value[\count($value) - 1];
-    }
-
-    /**
-     * Splits the string into an array.
-     *
-     *  {{ "one,two,three"|split(',') }}
-     *  {# returns [one, two, three] #}
-     *
-     *  {{ "one,two,three,four,five"|split(',', 3) }}
-     *  {# returns [one, two, "three,four,five"] #}
-     *
-     *  {{ "123"|split('') }}
-     *  {# returns [1, 2, 3] #}
-     *
-     *  {{ "aabbcc"|split('', 2) }}
-     *  {# returns [aa, bb, cc] #}
-     *
-     * @param string|null $value     A string
-     * @param string      $delimiter The delimiter
-     * @param int|null    $limit     The limit
-     *
-     * @internal
-     */
-    public static function split(string $charset, $value, $delimiter, $limit = null): array
-    {
-        $value = $value ?? '';
-
-        if ('' !== $delimiter) {
-            return null === $limit ? explode($delimiter, $value) : explode($delimiter, $value, $limit);
-        }
-
-        if ($limit <= 1) {
-            return preg_split('/(?<!^)(?!$)/u', $value);
-        }
-
-        $length = mb_strlen($value, $charset);
-        if ($length < $limit) {
-            return [$value];
-        }
-
-        $r = [];
-        for ($i = 0; $i < $length; $i += $limit) {
-            $r[] = mb_substr($value, $i, $limit, $charset);
-        }
-
-        return $r;
-    }
-
-    /**
-     * @internal
-     */
-    public static function default($value, $default = '')
-    {
-        if (self::testEmpty($value)) {
-            return $default;
-        }
-
-        return $value;
-    }
-
-    /**
-     * Returns the keys for the given array.
-     *
-     * It is useful when you want to iterate over the keys of an array:
-     *
-     *  {% for key in array|keys %}
-     *      {# ... #}
-     *  {% endfor %}
-     *
-     * @internal
-     */
-    public static function keys($array): array
-    {
-        if ($array instanceof \Traversable) {
-            while ($array instanceof \IteratorAggregate) {
-                $array = $array->getIterator();
-            }
-
-            $keys = [];
-            if ($array instanceof \Iterator) {
-                $array->rewind();
-                while ($array->valid()) {
-                    $keys[] = $array->key();
-                    $array->next();
-                }
-
-                return $keys;
-            }
-
-            foreach ($array as $key => $item) {
-                $keys[] = $key;
-            }
-
-            return $keys;
-        }
-
-        if (!\is_array($array)) {
-            return [];
-        }
-
-        return array_keys($array);
-    }
-
-    /**
-     * Invokes a callable.
-     *
-     * @internal
-     */
-    public static function invoke(\Closure $arrow, ...$arguments): mixed
-    {
-        return $arrow(...$arguments);
-    }
-
-    /**
-     * Reverses a variable.
-     *
-     * @param array|\Traversable|string|null $item         An array, a \Traversable instance, or a string
-     * @param bool                           $preserveKeys Whether to preserve key or not
-     *
-     * @return mixed The reversed input
-     *
-     * @internal
-     */
-    public static function reverse(string $charset, $item, $preserveKeys = false)
-    {
-        if ($item instanceof \Traversable) {
-            return array_reverse(iterator_to_array($item), $preserveKeys);
-        }
-
-        if (\is_array($item)) {
-            return array_reverse($item, $preserveKeys);
-        }
-
-        $string = (string) $item;
-
-        if ('UTF-8' !== $charset) {
-            $string = self::convertEncoding($string, 'UTF-8', $charset);
-        }
-
-        preg_match_all('/./us', $string, $matches);
-
-        $string = implode('', array_reverse($matches[0]));
-
-        if ('UTF-8' !== $charset) {
-            $string = self::convertEncoding($string, $charset, 'UTF-8');
-        }
-
-        return $string;
-    }
-
-    /**
-     * Shuffles an array, a \Traversable instance, or a string.
-     * The function does not preserve keys.
-     *
-     * @param array|\Traversable|string|null $item
-     *
-     * @internal
-     */
-    public static function shuffle(string $charset, $item)
-    {
-        if (\is_string($item)) {
-            if ('UTF-8' !== $charset) {
-                $item = self::convertEncoding($item, 'UTF-8', $charset);
-            }
-
-            $item = preg_split('/(?<!^)(?!$)/u', $item, -1);
-            shuffle($item);
-            $item = implode('', $item);
-
-            if ('UTF-8' !== $charset) {
-                $item = self::convertEncoding($item, $charset, 'UTF-8');
-            }
-
-            return $item;
-        }
-
-        if (is_iterable($item)) {
-            $item = self::toArray($item, false);
-            shuffle($item);
-        }
-
-        return $item;
-    }
-
-    /**
-     * Sorts an array.
-     *
-     * @param array|\Traversable $array
-     * @param ?\Closure          $arrow
-     *
-     * @internal
-     */
-    public static function sort(Environment $env, bool $isSandboxed, $array, $arrow = null): array
-    {
-        if ($array instanceof \Traversable) {
-            $array = iterator_to_array($array);
-        } elseif (!\is_array($array)) {
-            throw new RuntimeError(\sprintf('The "sort" filter expects a sequence or a mapping, got "%s".', get_debug_type($array)));
-        }
-
-        if (null !== $arrow) {
-            self::checkArrow($isSandboxed, $arrow, 'sort', 'filter');
-
-            uasort($array, $arrow);
-        } else {
-            asort($array);
-        }
-
-        return $array;
-    }
-
-    /**
-     * @internal
-     */
-    public static function inFilter($value, $compare)
-    {
-        if ($value instanceof Markup) {
-            $value = (string) $value;
-        }
-        if ($compare instanceof Markup) {
-            $compare = (string) $compare;
-        }
-
-        if (\is_string($compare)) {
-            if (\is_string($value) || \is_int($value) || \is_float($value)) {
-                return '' === $value || str_contains($compare, (string) $value);
-            }
-
-            return false;
-        }
-
-        if (!is_iterable($compare)) {
-            return false;
-        }
-
-        if (\is_object($value) || \is_resource($value)) {
-            if (!\is_array($compare)) {
-                foreach ($compare as $item) {
-                    if ($item === $value) {
-                        return true;
-                    }
-                }
-
-                return false;
-            }
-
-            return \in_array($value, $compare, true);
-        }
-
-        foreach ($compare as $item) {
-            if (0 === self::compare($value, $item)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    /**
-     * Compares two values using a more strict version of the PHP non-strict comparison operator.
-     *
-     * @see https://wiki.php.net/rfc/string_to_number_comparison
-     * @see https://wiki.php.net/rfc/trailing_whitespace_numerics
-     *
-     * @internal
-     */
-    public static function compare($a, $b)
-    {
-        // int <=> string
-        if (\is_int($a) && \is_string($b)) {
-            $bTrim = trim($b, " \t\n\r\v\f");
-            if (!is_numeric($bTrim)) {
-                return (string) $a <=> $b;
-            }
-            if ((int) $bTrim == $bTrim) {
-                return $a <=> (int) $bTrim;
-            }
-
-            return (float) $a <=> (float) $bTrim;
-        }
-        if (\is_string($a) && \is_int($b)) {
-            $aTrim = trim($a, " \t\n\r\v\f");
-            if (!is_numeric($aTrim)) {
-                return $a <=> (string) $b;
-            }
-            if ((int) $aTrim == $aTrim) {
-                return (int) $aTrim <=> $b;
-            }
-
-            return (float) $aTrim <=> (float) $b;
-        }
-
-        // float <=> string
-        if (\is_float($a) && \is_string($b)) {
-            if (is_nan($a)) {
-                return 1;
-            }
-            $bTrim = trim($b, " \t\n\r\v\f");
-            if (!is_numeric($bTrim)) {
-                return (string) $a <=> $b;
-            }
-
-            return $a <=> (float) $bTrim;
-        }
-        if (\is_string($a) && \is_float($b)) {
-            if (is_nan($b)) {
-                return 1;
-            }
-            $aTrim = trim($a, " \t\n\r\v\f");
-            if (!is_numeric($aTrim)) {
-                return $a <=> (string) $b;
-            }
-
-            return (float) $aTrim <=> $b;
-        }
-
-        // fallback to <=>
-        return $a <=> $b;
-    }
-
-    /**
-     * @throws RuntimeError When an invalid pattern is used
-     *
-     * @internal
-     */
-    public static function matches(string $regexp, ?string $str): int
-    {
-        set_error_handler(static function ($t, $m) use ($regexp) {
-            throw new RuntimeError(\sprintf('Regexp "%s" passed to "matches" is not valid', $regexp).substr($m, 12));
-        });
-        try {
-            return preg_match($regexp, $str ?? '');
-        } finally {
-            restore_error_handler();
-        }
-    }
-
-    /**
-     * Returns a trimmed string.
-     *
-     * @param string|\Stringable|null $string
-     * @param string|null             $characterMask
-     * @param string                  $side          left, right, or both
-     *
-     * @throws RuntimeError When an invalid trimming side is used
-     *
-     * @internal
-     */
-    public static function trim($string, $characterMask = null, $side = 'both'): string|\Stringable
-    {
-        if (null === $characterMask) {
-            $characterMask = self::DEFAULT_TRIM_CHARS;
-        }
-
-        $trimmed = match ($side) {
-            'both' => trim($string ?? '', $characterMask),
-            'left' => ltrim($string ?? '', $characterMask),
-            'right' => rtrim($string ?? '', $characterMask),
-            default => throw new RuntimeError('Trimming side must be "left", "right" or "both".'),
-        };
-
-        // trimming a safe string with the default character mask always returns a safe string (independently of the context)
-        return $string instanceof Markup && self::DEFAULT_TRIM_CHARS === $characterMask ? new Markup($trimmed, $string->getCharset()) : $trimmed;
-    }
-
-    /**
-     * Inserts HTML line breaks before all newlines in a string.
-     *
-     * @param string|null $string
-     *
-     * @internal
-     */
-    public static function nl2br($string): string
-    {
-        return nl2br($string ?? '');
-    }
-
-    /**
-     * Removes whitespaces between HTML tags.
-     *
-     * @param string|null $content
-     *
-     * @internal
-     */
-    public static function spaceless($content): string
-    {
-        return trim(preg_replace('/>\s+</', '><', $content ?? ''));
-    }
-
-    /**
-     * @param string|null $string
-     * @param string      $to
-     * @param string      $from
-     *
-     * @internal
-     */
-    public static function convertEncoding($string, $to, $from): string
-    {
-        if (!\function_exists('iconv')) {
-            throw new RuntimeError('Unable to convert encoding: required function iconv() does not exist. You should install ext-iconv or symfony/polyfill-iconv.');
-        }
-
-        return iconv($from, $to, $string ?? '');
-    }
-
-    /**
-     * Returns the length of a variable.
-     *
-     * @param mixed $thing A variable
-     *
-     * @internal
-     */
-    public static function length(string $charset, $thing): int
-    {
-        if (null === $thing) {
-            return 0;
-        }
-
-        if (\is_scalar($thing)) {
-            return mb_strlen($thing, $charset);
-        }
-
-        if ($thing instanceof \Countable || \is_array($thing) || $thing instanceof \SimpleXMLElement) {
-            return \count($thing);
-        }
-
-        if ($thing instanceof \Traversable) {
-            return iterator_count($thing);
-        }
-
-        if ($thing instanceof \Stringable) {
-            return mb_strlen((string) $thing, $charset);
-        }
-
-        return 1;
-    }
-
-    /**
-     * Converts a string to uppercase.
-     *
-     * @param string|null $string A string
-     *
-     * @internal
-     */
-    public static function upper(string $charset, $string): string
-    {
-        return mb_strtoupper($string ?? '', $charset);
-    }
-
-    /**
-     * Converts a string to lowercase.
-     *
-     * @param string|null $string A string
-     *
-     * @internal
-     */
-    public static function lower(string $charset, $string): string
-    {
-        return mb_strtolower($string ?? '', $charset);
-    }
-
-    /**
-     * Strips HTML and PHP tags from a string.
-     *
-     * @param string|null          $string
-     * @param string[]|string|null $allowable_tags
-     *
-     * @internal
-     */
-    public static function striptags($string, $allowable_tags = null): string
-    {
-        return strip_tags($string ?? '', $allowable_tags);
-    }
-
-    /**
-     * Returns a titlecased string.
-     *
-     * @param string|null $string A string
-     *
-     * @internal
-     */
-    public static function titleCase(string $charset, $string): string
-    {
-        return mb_convert_case($string ?? '', \MB_CASE_TITLE, $charset);
-    }
-
-    /**
-     * Returns a capitalized string.
-     *
-     * @param string|null $string A string
-     *
-     * @internal
-     */
-    public static function capitalize(string $charset, $string): string
-    {
-        return mb_strtoupper(mb_substr($string ?? '', 0, 1, $charset), $charset).mb_strtolower(mb_substr($string ?? '', 1, null, $charset), $charset);
-    }
-
-    /**
-     * @internal
-     *
-     * to be removed in 4.0
-     */
-    public static function callMacro(Template $template, string $method, array $args, int $lineno, array $context, Source $source)
-    {
-        if (!method_exists($template, $method)) {
-            $parent = $template;
-            while ($parent = $parent->getParent($context)) {
-                if (method_exists($parent, $method)) {
-                    return $parent->$method(...$args);
-                }
-            }
-
-            throw new RuntimeError(\sprintf('Macro "%s" is not defined in template "%s".', substr($method, \strlen('macro_')), $template->getTemplateName()), $lineno, $source);
-        }
-
-        return $template->$method(...$args);
-    }
-
-    /**
-     * @template TSequence
-     *
-     * @param TSequence $seq
-     *
-     * @return ($seq is iterable ? TSequence : array{})
-     *
-     * @internal
-     */
-    public static function ensureTraversable($seq)
-    {
-        if (is_iterable($seq)) {
-            return $seq;
-        }
-
-        return [];
-    }
-
-    /**
-     * @internal
-     */
-    public static function toArray($seq, $preserveKeys = true)
-    {
-        if ($seq instanceof \Traversable) {
-            return iterator_to_array($seq, $preserveKeys);
-        }
-
-        if (!\is_array($seq)) {
-            return $seq;
-        }
-
-        return $preserveKeys ? $seq : array_values($seq);
-    }
-
-    /**
-     * Checks if a variable is empty.
-     *
-     *    {# evaluates to true if the foo variable is null, false, or the empty string #}
-     *    {% if foo is empty %}
-     *        {# ... #}
-     *    {% endif %}
-     *
-     * @param mixed $value A variable
-     *
-     * @internal
-     */
-    public static function testEmpty($value): bool
-    {
-        if ($value instanceof \Countable) {
-            return 0 === \count($value);
-        }
-
-        if ($value instanceof \Traversable) {
-            return !iterator_count($value);
-        }
-
-        if ($value instanceof \Stringable) {
-            return '' === (string) $value;
-        }
-
-        return '' === $value || false === $value || null === $value || [] === $value;
-    }
-
-    /**
-     * Checks if a variable is a sequence.
-     *
-     *    {# evaluates to true if the foo variable is a sequence #}
-     *    {% if foo is sequence %}
-     *        {# ... #}
-     *    {% endif %}
-     *
-     * @internal
-     */
-    public static function testSequence($value): bool
-    {
-        if ($value instanceof \ArrayObject) {
-            $value = $value->getArrayCopy();
-        }
-
-        if ($value instanceof \Traversable) {
-            $value = iterator_to_array($value);
-        }
-
-        return \is_array($value) && array_is_list($value);
-    }
-
-    /**
-     * Checks if a variable is a mapping.
-     *
-     *    {# evaluates to true if the foo variable is a mapping #}
-     *    {% if foo is mapping %}
-     *        {# ... #}
-     *    {% endif %}
-     *
-     * @internal
-     */
-    public static function testMapping($value): bool
-    {
-        if ($value instanceof \ArrayObject) {
-            $value = $value->getArrayCopy();
-        }
-
-        if ($value instanceof \Traversable) {
-            $value = iterator_to_array($value);
-        }
-
-        return (\is_array($value) && !array_is_list($value)) || \is_object($value);
-    }
-
-    /**
-     * Renders a template.
-     *
-     * @param array                        $context
-     * @param string|array|TemplateWrapper $template      The template to render or an array of templates to try consecutively
-     * @param array                        $variables     The variables to pass to the template
-     * @param bool                         $withContext
-     * @param bool                         $ignoreMissing Whether to ignore missing templates or not
-     * @param bool                         $sandboxed     Whether to sandbox the template or not
-     *
-     * @return string|Markup
-     *
-     * @internal
-     */
-    public static function include(Environment $env, $context, $template, $variables = [], $withContext = true, $ignoreMissing = false, $sandboxed = false)
-    {
-        $alreadySandboxed = false;
-        $sandbox = null;
-        if ($withContext) {
-            $variables = array_merge($context, $variables);
-        }
-
-        if ($isSandboxed = $sandboxed && $env->hasExtension(SandboxExtension::class)) {
-            $sandbox = $env->getExtension(SandboxExtension::class);
-            if (!$alreadySandboxed = $sandbox->isSandboxed()) {
-                $sandbox->enableSandbox();
-            }
-        }
-
-        try {
-            $loaded = null;
-            try {
-                $loaded = $env->resolveTemplate($template);
-            } catch (LoaderError $e) {
-                if (!$ignoreMissing) {
-                    throw $e;
-                }
-
-                return '';
-            }
-
-            $rendered = $loaded->render($variables);
-
-            return '' === $rendered ? '' : new Markup($rendered, $env->getCharset());
-        } finally {
-            if ($isSandboxed && !$alreadySandboxed) {
-                $sandbox->disableSandbox();
-            }
-        }
-    }
-
-    /**
-     * Returns a template content without rendering it.
-     *
-     * @param string $name          The template name
-     * @param bool   $ignoreMissing Whether to ignore missing templates or not
-     *
-     * @internal
-     */
-    public static function source(Environment $env, $name, $ignoreMissing = false): string
-    {
-        $loader = $env->getLoader();
-        try {
-            return $loader->getSourceContext($name)->getCode();
-        } catch (LoaderError $e) {
-            if (!$ignoreMissing) {
-                throw $e;
-            }
-
-            return '';
-        }
-    }
-
-    /**
-     * Returns the list of cases of the enum.
-     *
-     * @template T of \UnitEnum
-     *
-     * @param class-string<T> $enum
-     *
-     * @return list<T>
-     *
-     * @internal
-     */
-    public static function enumCases(string $enum): array
-    {
-        if (!enum_exists($enum)) {
-            throw new RuntimeError(\sprintf('Enum "%s" does not exist.', $enum));
-        }
-
-        return $enum::cases();
-    }
-
-    /**
-     * Provides the ability to access enums by their class names.
-     *
-     * @template T of \UnitEnum
-     *
-     * @param class-string<T> $enum
-     *
-     * @return T
-     *
-     * @internal
-     */
-    public static function enum(string $enum): \UnitEnum
-    {
-        if (!enum_exists($enum)) {
-            throw new RuntimeError(\sprintf('"%s" is not an enum.', $enum));
-        }
-
-        if (!$cases = $enum::cases()) {
-            throw new RuntimeError(\sprintf('"%s" is an empty enum.', $enum));
-        }
-
-        return $cases[0];
-    }
-
-    /**
-     * Provides the ability to get constants from instances as well as class/global constants.
-     *
-     * @param string      $constant     The name of the constant
-     * @param object|null $object       The object to get the constant from
-     * @param bool        $checkDefined Whether to check if the constant is defined or not
-     *
-     * @return mixed Class constants can return many types like scalars, arrays, and
-     *               objects depending on the PHP version (\BackedEnum, \UnitEnum, etc.)
-     *               When $checkDefined is true, returns true when the constant is defined, false otherwise
-     *
-     * @internal
-     */
-    public static function constant($constant, $object = null, bool $checkDefined = false)
-    {
-        if (null !== $object) {
-            if ('class' === $constant) {
-                return $checkDefined ? true : $object::class;
-            }
-
-            $constant = $object::class.'::'.$constant;
-        }
-
-        if (!\defined($constant)) {
-            if ($checkDefined) {
-                return false;
-            }
-
-            if ('::class' === strtolower(substr($constant, -7))) {
-                throw new RuntimeError(\sprintf('You cannot use the Twig function "constant" to access "%s". You could provide an object and call constant("class", $object) or use the class name directly as a string.', $constant));
-            }
-
-            throw new RuntimeError(\sprintf('Constant "%s" is undefined.', $constant));
-        }
-
-        return $checkDefined ? true : \constant($constant);
-    }
-
-    /**
-     * Batches item.
-     *
-     * @param array $items An array of items
-     * @param int   $size  The size of the batch
-     * @param mixed $fill  A value used to fill missing items
-     *
-     * @internal
-     */
-    public static function batch($items, $size, $fill = null, $preserveKeys = true): array
-    {
-        if (!is_iterable($items)) {
-            throw new RuntimeError(\sprintf('The "batch" filter expects a sequence or a mapping, got "%s".', get_debug_type($items)));
-        }
-
-        $size = (int) ceil($size);
-
-        $result = array_chunk(self::toArray($items, $preserveKeys), $size, $preserveKeys);
-
-        if (null !== $fill && $result) {
-            $last = \count($result) - 1;
-            if ($fillCount = $size - \count($result[$last])) {
-                for ($i = 0; $i < $fillCount; ++$i) {
-                    $result[$last][] = $fill;
-                }
-            }
-        }
-
-        return $result;
-    }
-
-    /**
-     * Returns the attribute value for a given array/object.
-     *
-     * @param mixed  $object            The object or array from where to get the item
-     * @param mixed  $item              The item to get from the array or object
-     * @param array  $arguments         An array of arguments to pass if the item is an object method
-     * @param string $type              The type of attribute (@see \Twig\Template constants)
-     * @param bool   $isDefinedTest     Whether this is only a defined check
-     * @param bool   $ignoreStrictCheck Whether to ignore the strict attribute check or not
-     * @param int    $lineno            The template line where the attribute was called
-     *
-     * @return mixed The attribute value, or a Boolean when $isDefinedTest is true, or null when the attribute is not set and $ignoreStrictCheck is true
-     *
-     * @throws RuntimeError if the attribute does not exist and Twig is running in strict mode and $isDefinedTest is false
-     *
-     * @internal
-     */
-    public static function getAttribute(Environment $env, Source $source, $object, $item, array $arguments = [], $type = Template::ANY_CALL, $isDefinedTest = false, $ignoreStrictCheck = false, $sandboxed = false, int $lineno = -1)
-    {
-        $propertyNotAllowedError = null;
-        if ($sandboxed && $item instanceof \Stringable) {
-            $env->getExtension(SandboxExtension::class)->ensureToStringAllowed($item, $lineno, $source);
-        }
-
-        // array
-        if (Template::METHOD_CALL !== $type) {
-            $arrayItem = \is_bool($item) || \is_float($item) ? (int) $item : $item;
-
-            if ($sandboxed && $object instanceof \ArrayAccess && !\in_array($object::class, self::ARRAY_LIKE_CLASSES, true)) {
-                try {
-                    $env->getExtension(SandboxExtension::class)->checkPropertyAllowed($object, $arrayItem, $lineno, $source);
-                } catch (SecurityNotAllowedPropertyError $propertyNotAllowedError) {
-                    // The methodCheck path expects $item to be a string; stringify it here
-                    // to avoid PHP 8.1+ implicit float-to-int deprecations on downstream
-                    // array key lookups (e.g. isset($cache[$class][$item])).
-                    $item = (string) $item;
-                    goto methodCheck;
-                }
-            }
-
-            if (match (true) {
-                \is_array($object) => \array_key_exists($arrayItem = (string) $arrayItem, $object),
-                $object instanceof \ArrayAccess => $object->offsetExists($arrayItem),
-                default => false,
-            }) {
-                if ($isDefinedTest) {
-                    return true;
-                }
-
-                return $object[$arrayItem];
-            }
-
-            if (Template::ARRAY_CALL === $type || !\is_object($object)) {
-                if ($isDefinedTest) {
-                    return false;
-                }
-
-                if ($ignoreStrictCheck || !$env->isStrictVariables()) {
-                    return;
-                }
-
-                if ($object instanceof \ArrayAccess) {
-                    if (\is_object($arrayItem) || \is_array($arrayItem)) {
-                        $message = \sprintf('Key of type "%s" does not exist in ArrayAccess-able object of class "%s".', get_debug_type($arrayItem), get_debug_type($object));
-                    } else {
-                        $message = \sprintf('Key "%s" does not exist in ArrayAccess-able object of class "%s".', $arrayItem, get_debug_type($object));
-                    }
-                } elseif (\is_object($object)) {
-                    $message = \sprintf('Impossible to access a key "%s" on an object of class "%s" that does not implement ArrayAccess interface.', $item, get_debug_type($object));
-                } elseif (\is_array($object)) {
-                    if (!$object) {
-                        $message = \sprintf('Key "%s" does not exist as the sequence/mapping is empty.', $arrayItem);
-                    } else {
-                        $message = \sprintf('Key "%s" for sequence/mapping with keys "%s" does not exist.', $arrayItem, implode(', ', array_keys($object)));
-                    }
-                } elseif (Template::ARRAY_CALL === $type) {
-                    if (null === $object) {
-                        $message = \sprintf('Impossible to access a key ("%s") on a null variable.', $item);
-                    } else {
-                        $message = \sprintf('Impossible to access a key ("%s") on a %s variable ("%s").', $item, get_debug_type($object), $object);
-                    }
-                } elseif (null === $object) {
-                    $message = \sprintf('Impossible to access an attribute ("%s") on a null variable.', $item);
-                } else {
-                    $message = \sprintf('Impossible to access an attribute ("%s") on a %s variable ("%s").', $item, get_debug_type($object), $object);
-                }
-
-                throw new RuntimeError($message, $lineno, $source);
-            }
-        }
-
-        $item = (string) $item;
-
-        if (!\is_object($object)) {
-            if ($isDefinedTest) {
-                return false;
-            }
-
-            if ($ignoreStrictCheck || !$env->isStrictVariables()) {
-                return;
-            }
-
-            if (null === $object) {
-                $message = \sprintf('Impossible to invoke a method ("%s") on a null variable.', $item);
-            } elseif (\is_array($object)) {
-                $message = \sprintf('Impossible to invoke a method ("%s") on a sequence/mapping.', $item);
-            } else {
-                $message = \sprintf('Impossible to invoke a method ("%s") on a %s variable ("%s").', $item, get_debug_type($object), $object);
-            }
-
-            throw new RuntimeError($message, $lineno, $source);
-        }
-
-        if ($object instanceof Template) {
-            throw new RuntimeError('Accessing \Twig\Template attributes is forbidden.', $lineno, $source);
-        }
-
-        // object property
-        if (Template::METHOD_CALL !== $type) {
-            if ($sandboxed) {
-                try {
-                    $env->getExtension(SandboxExtension::class)->checkPropertyAllowed($object, $item, $lineno, $source);
-                } catch (SecurityNotAllowedPropertyError $propertyNotAllowedError) {
-                    goto methodCheck;
-                }
-            }
-
-            static $propertyCheckers = [];
-
-            if (isset($object->$item)
-                || ($propertyCheckers[$object::class][$item] ??= self::getPropertyChecker($object::class, $item))($object, $item)
-            ) {
-                if ($isDefinedTest) {
-                    return true;
-                }
-
-                return $object->$item;
-            }
-
-            if ($object instanceof \DateTimeInterface && \in_array($item, ['date', 'timezone', 'timezone_type'], true)) {
-                if ($isDefinedTest) {
-                    return true;
-                }
-
-                return ((array) $object)[$item];
-            }
-
-            if (\defined($object::class.'::'.$item)) {
-                if ($isDefinedTest) {
-                    return true;
-                }
-
-                return \constant($object::class.'::'.$item);
-            }
-        }
-
-        methodCheck:
-
-        static $cache = [];
-
-        $class = $object::class;
-
-        // object method
-        // precedence: getXxx() > isXxx() > hasXxx()
-        if (!isset($cache[$class])) {
-            $methods = get_class_methods($object);
-            if ($object instanceof \Closure) {
-                $methods[] = '__invoke';
-            }
-            sort($methods);
-            $lcMethods = array_map('strtolower', $methods);
-            $classCache = [];
-            foreach ($methods as $i => $method) {
-                $classCache[$method] = $method;
-                $classCache[$lcName = $lcMethods[$i]] = $method;
-
-                if ('g' === $lcName[0] && str_starts_with($lcName, 'get')) {
-                    $prefixLength = 3;
-                    $lcName = substr($lcName, $prefixLength);
-                } elseif ('i' === $lcName[0] && str_starts_with($lcName, 'is')) {
-                    $prefixLength = 2;
-                    $lcName = substr($lcName, $prefixLength);
-                } elseif ('h' === $lcName[0] && str_starts_with($lcName, 'has')) {
-                    $prefixLength = 3;
-                    $lcName = substr($lcName, $prefixLength);
-                    if (\in_array('is'.$lcName, $lcMethods, true)) {
-                        continue;
-                    }
-                } else {
-                    continue;
-                }
-
-                // skip get(), is() and has() methods (in which case, $lcName is empty)
-                if ($lcName) {
-                    // camelCase name (e.g. getFooBar() -> fooBar)
-                    $name = $lcName[0].substr($method, $prefixLength + 1);
-
-                    if (!isset($classCache[$name])) {
-                        $classCache[$name] = $method;
-                    }
-
-                    if (!isset($classCache[$lcName])) {
-                        $classCache[$lcName] = $method;
-                    }
-                }
-            }
-            $cache[$class] = $classCache;
-        }
-
-        $call = false;
-        if (isset($cache[$class][$item])) {
-            $method = $cache[$class][$item];
-        } elseif (isset($cache[$class][$lcItem = strtolower($item)])) {
-            $method = $cache[$class][$lcItem];
-        } elseif (isset($cache[$class]['__call'])) {
-            $method = $item;
-            $call = true;
-        } else {
-            if ($isDefinedTest) {
-                return false;
-            }
-
-            if ($propertyNotAllowedError) {
-                throw $propertyNotAllowedError;
-            }
-
-            if ($ignoreStrictCheck || !$env->isStrictVariables()) {
-                return;
-            }
-
-            throw new RuntimeError(\sprintf('Neither the property "%1$s" nor one of the methods "%1$s()", "get%1$s()", "is%1$s()", "has%1$s()" or "__call()" exist and have public access in class "%2$s".', $item, $class), $lineno, $source);
-        }
-
-        if ($sandboxed) {
-            try {
-                $env->getExtension(SandboxExtension::class)->checkMethodAllowed($object, $method, $lineno, $source);
-            } catch (SecurityNotAllowedMethodError $e) {
-                if ($isDefinedTest) {
-                    return false;
-                }
-
-                if ($propertyNotAllowedError) {
-                    throw $propertyNotAllowedError;
-                }
-
-                throw $e;
-            }
-        }
-
-        if ($isDefinedTest) {
-            return true;
-        }
-
-        // Some objects throw exceptions when they have __call, and the method we try
-        // to call is not supported. If ignoreStrictCheck is true, we should return null.
-        try {
-            $ret = $object->$method(...$arguments);
-        } catch (\BadMethodCallException $e) {
-            if ($call && ($ignoreStrictCheck || !$env->isStrictVariables())) {
-                return;
-            }
-            throw $e;
-        }
-
-        return $ret;
-    }
-
-    /**
-     * Returns the values from a single column in the input array.
-     *
-     * <pre>
-     *  {% set items = [{ 'fruit' : 'apple'}, {'fruit' : 'orange' }] %}
-     *
-     *  {% set fruits = items|column('fruit') %}
-     *
-     *  {# fruits now contains ['apple', 'orange'] #}
-     * </pre>
-     *
-     * @param array|\Traversable $array An array
-     * @param int|string         $name  The column name
-     * @param int|string|null    $index The column to use as the index/keys for the returned array
-     *
-     * @return array The array of values
-     *
-     * @internal
-     */
-    public static function column(Environment $env, bool $isSandboxed, $array, $name, $index = null): array
-    {
-        if (!is_iterable($array)) {
-            throw new RuntimeError(\sprintf('The "column" filter expects a sequence or a mapping, got "%s".', get_debug_type($array)));
-        }
-
-        if ($array instanceof \Traversable) {
-            $array = iterator_to_array($array);
-        }
-
-        if ($isSandboxed) {
-            // The sandbox might be enabled via a SourcePolicyInterface, in which case the SandboxExtension
-            // would not consider the sandbox active without the current Source: $isSandboxed is already
-            // computed against the call-site source, so check the policy directly to honor that decision.
-            $policy = $env->getExtension(SandboxExtension::class)->getSecurityPolicy();
-            foreach ($array as $item) {
-                if (\is_object($item)) {
-                    $policy->checkPropertyAllowed($item, (string) $name);
-                    if (null !== $index) {
-                        $policy->checkPropertyAllowed($item, (string) $index);
-                    }
-                }
-            }
-        }
-
-        return array_column($array, $name, $index);
-    }
-
-    /**
-     * @param \Closure $arrow
-     *
-     * @internal
-     */
-    public static function filter(Environment $env, bool $isSandboxed, $array, $arrow)
-    {
-        if (!is_iterable($array)) {
-            throw new RuntimeError(\sprintf('The "filter" filter expects a sequence/mapping or "Traversable", got "%s".', get_debug_type($array)));
-        }
-
-        self::checkArrow($isSandboxed, $arrow, 'filter', 'filter');
-
-        if (\is_array($array)) {
-            return array_filter($array, $arrow, \ARRAY_FILTER_USE_BOTH);
-        }
-
-        // the IteratorIterator wrapping is needed as some internal PHP classes are \Traversable but do not implement \Iterator
-        return new \CallbackFilterIterator(new \IteratorIterator($array), $arrow);
-    }
-
-    /**
-     * @param \Closure $arrow
-     *
-     * @internal
-     */
-    public static function find(Environment $env, bool $isSandboxed, $array, $arrow)
-    {
-        if (!is_iterable($array)) {
-            throw new RuntimeError(\sprintf('The "find" filter expects a sequence or a mapping, got "%s".', get_debug_type($array)));
-        }
-
-        self::checkArrow($isSandboxed, $arrow, 'find', 'filter');
-
-        foreach ($array as $k => $v) {
-            if ($arrow($v, $k)) {
-                return $v;
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * @param \Closure $arrow
-     *
-     * @internal
-     */
-    public static function map(Environment $env, bool $isSandboxed, $array, $arrow)
-    {
-        if (!is_iterable($array)) {
-            throw new RuntimeError(\sprintf('The "map" filter expects a sequence or a mapping, got "%s".', get_debug_type($array)));
-        }
-
-        self::checkArrow($isSandboxed, $arrow, 'map', 'filter');
-
-        $r = [];
-        foreach ($array as $k => $v) {
-            $r[$k] = $arrow($v, $k);
-        }
-
-        return $r;
-    }
-
-    /**
-     * @param \Closure $arrow
-     *
-     * @internal
-     */
-    public static function reduce(Environment $env, bool $isSandboxed, $array, $arrow, $initial = null)
-    {
-        if (!is_iterable($array)) {
-            throw new RuntimeError(\sprintf('The "reduce" filter expects a sequence or a mapping, got "%s".', get_debug_type($array)));
-        }
-
-        self::checkArrow($isSandboxed, $arrow, 'reduce', 'filter');
-
-        $accumulator = $initial;
-        foreach ($array as $key => $value) {
-            $accumulator = $arrow($accumulator, $value, $key);
-        }
-
-        return $accumulator;
-    }
-
-    /**
-     * @param \Closure $arrow
-     *
-     * @internal
-     */
-    public static function arraySome(Environment $env, $array, $arrow, bool $isSandboxed = false)
-    {
-        if (!is_iterable($array)) {
-            throw new RuntimeError(\sprintf('The "has some" test expects a sequence or a mapping, got "%s".', get_debug_type($array)));
-        }
-
-        self::checkArrow($isSandboxed, $arrow, 'has some', 'operator');
-
-        foreach ($array as $k => $v) {
-            if ($arrow($v, $k)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    /**
-     * @param \Closure $arrow
-     *
-     * @internal
-     */
-    public static function arrayEvery(Environment $env, $array, $arrow, bool $isSandboxed = false)
-    {
-        if (!is_iterable($array)) {
-            throw new RuntimeError(\sprintf('The "has every" test expects a sequence or a mapping, got "%s".', get_debug_type($array)));
-        }
-
-        self::checkArrow($isSandboxed, $arrow, 'has every', 'operator');
-
-        foreach ($array as $k => $v) {
-            if (!$arrow($v, $k)) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
-    /**
-     * @internal
-     */
-    public static function checkArrow(bool $isSandboxed, $arrow, $thing, $type)
-    {
-        if ($arrow instanceof \Closure) {
-            return;
-        }
-
-        if ($isSandboxed) {
-            throw new RuntimeError(\sprintf('The callable passed to the "%s" %s must be a Closure in sandbox mode.', $thing, $type));
-        }
-
-        trigger_deprecation('twig/twig', '3.15', 'Passing a callable that is not a PHP \Closure as an argument to the "%s" %s is deprecated.', $thing, $type);
-    }
-
-    /**
-     * @internal to be removed in Twig 4
-     */
-    public static function captureOutput(iterable $body): string
-    {
-        $level = ob_get_level();
-        ob_start();
-
-        try {
-            foreach ($body as $data) {
-                echo $data;
-            }
-        } catch (\Throwable $e) {
-            while (ob_get_level() > $level) {
-                ob_end_clean();
-            }
-
-            throw $e;
-        }
-
-        return ob_get_clean();
-    }
-
-    /**
-     * @internal
-     */
-    public static function parseParentFunction(Parser $parser, Node $fakeNode, $args, int $line): AbstractExpression
-    {
-        if (!$blockName = $parser->peekBlockStack()) {
-            throw new SyntaxError('Calling the "parent" function outside of a block is forbidden.', $line, $parser->getStream()->getSourceContext());
-        }
-
-        if (!$parser->hasInheritance()) {
-            throw new SyntaxError('Calling the "parent" function on a template that does not call "extends" or "use" is forbidden.', $line, $parser->getStream()->getSourceContext());
-        }
-
-        return new ParentExpression($blockName, $line);
-    }
-
-    /**
-     * @internal
-     */
-    public static function parseBlockFunction(Parser $parser, Node $fakeNode, $args, int $line): AbstractExpression
-    {
-        $fakeFunction = new TwigFunction('block', static fn ($name, $template = null) => null);
-        $args = (new CallableArgumentsExtractor($fakeNode, $fakeFunction))->extractArguments($args);
-
-        return new BlockReferenceExpression($args[0], $args[1] ?? null, $line);
-    }
-
-    /**
-     * @internal
-     */
-    public static function parseAttributeFunction(Parser $parser, Node $fakeNode, $args, int $line): AbstractExpression
-    {
-        $fakeFunction = new TwigFunction('attribute', static fn ($variable, $attribute, $arguments = null) => null);
-        $args = (new CallableArgumentsExtractor($fakeNode, $fakeFunction))->extractArguments($args);
-
-        /*
-        Deprecation to uncomment sometimes during the lifetime of the 4.x branch
-        $src = $parser->getStream()->getSourceContext();
-        $dep = new DeprecatedCallableInfo('twig/twig', '3.15', 'The "attribute" function is deprecated, use the "." notation instead.');
-        $dep->setName('attribute');
-        $dep->setType('function');
-        $dep->triggerDeprecation($src->getPath() ?: $src->getName(), $line);
-        */
-
-        return new GetAttrExpression($args[0], $args[1], $args[2] ?? null, Template::ANY_CALL, $line);
-    }
-
-    private static function getPropertyChecker(string $class, string $property): \Closure
-    {
-        static $classReflectors = [];
-
-        $class = $classReflectors[$class] ??= new \ReflectionClass($class);
-
-        if (!$class->hasProperty($property)) {
-            static $propertyExists;
-
-            return $propertyExists ??= \Closure::fromCallable('property_exists');
-        }
-
-        $property = $class->getProperty($property);
-
-        if (!$property->isPublic() || $property->isStatic()) {
-            static $false;
-
-            return $false ??= static fn () => false;
-        }
-
-        return static fn ($object) => $property->isInitialized($object);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/DebugExtension.php b/generated/php/vendor/twig/twig/src/Extension/DebugExtension.php
deleted file mode 100644
index dac21c3..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/DebugExtension.php
+++ /dev/null
@@ -1,62 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\Environment;
-use Twig\Template;
-use Twig\TemplateWrapper;
-use Twig\TwigFunction;
-
-final class DebugExtension extends AbstractExtension
-{
-    public function getFunctions(): array
-    {
-        // dump is safe if var_dump is overridden by xdebug
-        $isDumpOutputHtmlSafe = \extension_loaded('xdebug')
-            // Xdebug overloads var_dump in develop mode when html_errors is enabled
-            && str_contains(\ini_get('xdebug.mode'), 'develop')
-            && (false === \ini_get('html_errors') || \ini_get('html_errors'))
-            || 'cli' === \PHP_SAPI
-        ;
-
-        return [
-            new TwigFunction('dump', [self::class, 'dump'], ['is_safe' => $isDumpOutputHtmlSafe ? ['html'] : [], 'needs_context' => true, 'needs_environment' => true, 'is_variadic' => true]),
-        ];
-    }
-
-    /**
-     * @internal
-     */
-    public static function dump(Environment $env, $context, ...$vars)
-    {
-        if (!$env->isDebug()) {
-            return;
-        }
-
-        ob_start();
-
-        if (!$vars) {
-            $vars = [];
-            foreach ($context as $key => $value) {
-                if (!$value instanceof Template && !$value instanceof TemplateWrapper) {
-                    $vars[$key] = $value;
-                }
-            }
-
-            var_dump($vars);
-        } else {
-            var_dump(...$vars);
-        }
-
-        return ob_get_clean();
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/EscaperExtension.php b/generated/php/vendor/twig/twig/src/Extension/EscaperExtension.php
deleted file mode 100644
index 6d9d1ce..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/EscaperExtension.php
+++ /dev/null
@@ -1,221 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\Environment;
-use Twig\FileExtensionEscapingStrategy;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\Filter\RawFilter;
-use Twig\Node\Node;
-use Twig\NodeVisitor\EscaperNodeVisitor;
-use Twig\Runtime\EscaperRuntime;
-use Twig\TokenParser\AutoEscapeTokenParser;
-use Twig\TwigFilter;
-
-final class EscaperExtension extends AbstractExtension
-{
-    private $environment;
-    private $escapers = [];
-    private $escaper;
-    private $defaultStrategy;
-
-    /**
-     * @param string|false|callable $defaultStrategy An escaping strategy
-     *
-     * @see setDefaultStrategy()
-     */
-    public function __construct($defaultStrategy = 'html')
-    {
-        $this->setDefaultStrategy($defaultStrategy);
-    }
-
-    public function getTokenParsers(): array
-    {
-        return [new AutoEscapeTokenParser()];
-    }
-
-    public function getNodeVisitors(): array
-    {
-        return [new EscaperNodeVisitor()];
-    }
-
-    public function getFilters(): array
-    {
-        return [
-            new TwigFilter('escape', [EscaperRuntime::class, 'escape'], ['is_safe_callback' => [self::class, 'escapeFilterIsSafe']]),
-            new TwigFilter('e', [EscaperRuntime::class, 'escape'], ['is_safe_callback' => [self::class, 'escapeFilterIsSafe']]),
-            new TwigFilter('raw', null, ['is_safe' => ['all'], 'node_class' => RawFilter::class]),
-        ];
-    }
-
-    public function getLastModified(): int
-    {
-        return max(
-            parent::getLastModified(),
-            filemtime((new \ReflectionClass(EscaperRuntime::class))->getFileName()),
-        );
-    }
-
-    /**
-     * @deprecated since Twig 3.10
-     */
-    public function setEnvironment(Environment $environment): void
-    {
-        $triggerDeprecation = \func_num_args() > 1 ? func_get_arg(1) : true;
-        if ($triggerDeprecation) {
-            trigger_deprecation('twig/twig', '3.10', 'The "%s()" method is deprecated and not needed if you are using methods from "Twig\Runtime\EscaperRuntime".', __METHOD__);
-        }
-
-        $this->environment = $environment;
-        $this->escaper = null;
-    }
-
-    /**
-     * @return void
-     *
-     * @deprecated since Twig 3.10
-     */
-    public function setEscaperRuntime(EscaperRuntime $escaper)
-    {
-        trigger_deprecation('twig/twig', '3.10', 'The "%s()" method is deprecated and not needed if you are using methods from "Twig\Runtime\EscaperRuntime".', __METHOD__);
-
-        $this->escaper = $escaper;
-    }
-
-    /**
-     * Sets the default strategy to use when not defined by the user.
-     *
-     * The strategy can be a valid PHP callback that takes the template
-     * name as an argument and returns the strategy to use.
-     *
-     * @param string|false|callable(string $templateName): string $defaultStrategy An escaping strategy
-     */
-    public function setDefaultStrategy($defaultStrategy): void
-    {
-        if ('name' === $defaultStrategy) {
-            $defaultStrategy = [FileExtensionEscapingStrategy::class, 'guess'];
-        }
-
-        $this->defaultStrategy = $defaultStrategy;
-    }
-
-    /**
-     * Gets the default strategy to use when not defined by the user.
-     *
-     * @param string $name The template name
-     *
-     * @return string|false The default strategy to use for the template
-     */
-    public function getDefaultStrategy(string $name)
-    {
-        // disable string callables to avoid calling a function named html or js,
-        // or any other upcoming escaping strategy
-        if (!\is_string($this->defaultStrategy) && false !== $this->defaultStrategy) {
-            return \call_user_func($this->defaultStrategy, $name);
-        }
-
-        return $this->defaultStrategy;
-    }
-
-    /**
-     * Defines a new escaper to be used via the escape filter.
-     *
-     * @param string                                        $strategy The strategy name that should be used as a strategy in the escape call
-     * @param callable(Environment, string, string): string $callable A valid PHP callable
-     *
-     * @return void
-     *
-     * @deprecated since Twig 3.10
-     */
-    public function setEscaper($strategy, callable $callable)
-    {
-        trigger_deprecation('twig/twig', '3.10', 'The "%s()" method is deprecated, use the "Twig\Runtime\EscaperRuntime::setEscaper()" method instead (be warned that Environment is not passed anymore to the callable).', __METHOD__);
-
-        $escaper = $this->getEscaper(__METHOD__);
-
-        $this->escapers[$strategy] = $callable;
-        $callable = function ($string, $charset) use ($callable) {
-            return $callable($this->environment, $string, $charset);
-        };
-
-        $escaper->setEscaper($strategy, $callable);
-    }
-
-    /**
-     * Gets all defined escapers.
-     *
-     * @return array<string, callable(Environment, string, string): string> An array of escapers
-     *
-     * @deprecated since Twig 3.10
-     */
-    public function getEscapers()
-    {
-        trigger_deprecation('twig/twig', '3.10', 'The "%s()" method is deprecated, use the "Twig\Runtime\EscaperRuntime::getEscaper()" method instead.', __METHOD__);
-
-        return $this->escapers;
-    }
-
-    /**
-     * @return void
-     *
-     * @deprecated since Twig 3.10
-     */
-    public function setSafeClasses(array $safeClasses = [])
-    {
-        trigger_deprecation('twig/twig', '3.10', 'The "%s()" method is deprecated, use the "Twig\Runtime\EscaperRuntime::setSafeClasses()" method instead.', __METHOD__);
-
-        $this->getEscaper(__METHOD__)->setSafeClasses($safeClasses);
-    }
-
-    /**
-     * @return void
-     *
-     * @deprecated since Twig 3.10
-     */
-    public function addSafeClass(string $class, array $strategies)
-    {
-        trigger_deprecation('twig/twig', '3.10', 'The "%s()" method is deprecated, use the "Twig\Runtime\EscaperRuntime::addSafeClass()" method instead.', __METHOD__);
-
-        $this->getEscaper(__METHOD__)->addSafeClass($class, $strategies);
-    }
-
-    private function getEscaper(string $fromMethod): EscaperRuntime
-    {
-        if (isset($this->escaper)) {
-            return $this->escaper;
-        }
-
-        if (isset($this->environment)) {
-            return $this->escaper = $this->environment->getRuntime(EscaperRuntime::class);
-        }
-
-        throw new \LogicException(\sprintf('You must call "setEnvironment()" before calling "%s()".', $fromMethod));
-    }
-
-    /**
-     * @internal
-     *
-     * @return array<string>
-     */
-    public static function escapeFilterIsSafe(Node $filterArgs)
-    {
-        foreach ($filterArgs as $arg) {
-            if ($arg instanceof ConstantExpression) {
-                return [$arg->getAttribute('value')];
-            }
-
-            return [];
-        }
-
-        return ['html'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/ExtensionInterface.php b/generated/php/vendor/twig/twig/src/Extension/ExtensionInterface.php
deleted file mode 100644
index 60ca35b..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/ExtensionInterface.php
+++ /dev/null
@@ -1,80 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\ExpressionParser;
-use Twig\ExpressionParser\ExpressionParserInterface;
-use Twig\ExpressionParser\PrecedenceChange;
-use Twig\Node\Expression\Binary\AbstractBinary;
-use Twig\Node\Expression\Unary\AbstractUnary;
-use Twig\NodeVisitor\NodeVisitorInterface;
-use Twig\TokenParser\TokenParserInterface;
-use Twig\TwigFilter;
-use Twig\TwigFunction;
-use Twig\TwigTest;
-
-/**
- * Interface implemented by extension classes.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @method array<ExpressionParserInterface> getExpressionParsers()
- */
-interface ExtensionInterface
-{
-    /**
-     * Returns the token parser instances to add to the existing list.
-     *
-     * @return TokenParserInterface[]
-     */
-    public function getTokenParsers();
-
-    /**
-     * Returns the node visitor instances to add to the existing list.
-     *
-     * @return NodeVisitorInterface[]
-     */
-    public function getNodeVisitors();
-
-    /**
-     * Returns a list of filters to add to the existing list.
-     *
-     * @return TwigFilter[]
-     */
-    public function getFilters();
-
-    /**
-     * Returns a list of tests to add to the existing list.
-     *
-     * @return TwigTest[]
-     */
-    public function getTests();
-
-    /**
-     * Returns a list of functions to add to the existing list.
-     *
-     * @return TwigFunction[]
-     */
-    public function getFunctions();
-
-    /**
-     * Returns a list of operators to add to the existing list.
-     *
-     * @return array<array>
-     *
-     * @psalm-return array{
-     *     array<string, array{precedence: int, precedence_change?: PrecedenceChange, class: class-string<AbstractUnary>}>,
-     *     array<string, array{precedence: int, precedence_change?: PrecedenceChange, class?: class-string<AbstractBinary>, associativity: ExpressionParser::OPERATOR_*}>
-     * }
-     */
-    public function getOperators();
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/GlobalsInterface.php b/generated/php/vendor/twig/twig/src/Extension/GlobalsInterface.php
deleted file mode 100644
index d52cd10..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/GlobalsInterface.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-/**
- * Allows Twig extensions to add globals to the context.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface GlobalsInterface
-{
-    /**
-     * @return array<string, mixed>
-     */
-    public function getGlobals(): array;
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/LastModifiedExtensionInterface.php b/generated/php/vendor/twig/twig/src/Extension/LastModifiedExtensionInterface.php
deleted file mode 100644
index 4bab0c0..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/LastModifiedExtensionInterface.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-interface LastModifiedExtensionInterface extends ExtensionInterface
-{
-    /**
-     * Returns the last modification time of the extension for cache invalidation.
-     *
-     * This timestamp should be the last time the source code of the extension class
-     * and all its dependencies were modified (including the Runtime class).
-     */
-    public function getLastModified(): int;
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/OptimizerExtension.php b/generated/php/vendor/twig/twig/src/Extension/OptimizerExtension.php
deleted file mode 100644
index d3fe46a..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/OptimizerExtension.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\NodeVisitor\OptimizerNodeVisitor;
-
-final class OptimizerExtension extends AbstractExtension
-{
-    public function __construct(
-        private int $optimizers = -1,
-    ) {
-    }
-
-    public function getNodeVisitors(): array
-    {
-        return [new OptimizerNodeVisitor($this->optimizers)];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/ProfilerExtension.php b/generated/php/vendor/twig/twig/src/Extension/ProfilerExtension.php
deleted file mode 100644
index 43e4a44..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/ProfilerExtension.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\Profiler\NodeVisitor\ProfilerNodeVisitor;
-use Twig\Profiler\Profile;
-
-class ProfilerExtension extends AbstractExtension
-{
-    private $actives = [];
-
-    public function __construct(Profile $profile)
-    {
-        $this->actives[] = $profile;
-    }
-
-    /**
-     * @return void
-     */
-    public function enter(Profile $profile)
-    {
-        $this->actives[0]->addProfile($profile);
-        array_unshift($this->actives, $profile);
-    }
-
-    /**
-     * @return void
-     */
-    public function leave(Profile $profile)
-    {
-        $profile->leave();
-        array_shift($this->actives);
-
-        if (1 === \count($this->actives)) {
-            $this->actives[0]->leave();
-        }
-    }
-
-    public function getNodeVisitors(): array
-    {
-        return [new ProfilerNodeVisitor(static::class)];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/RuntimeExtensionInterface.php b/generated/php/vendor/twig/twig/src/Extension/RuntimeExtensionInterface.php
deleted file mode 100644
index 63bc3b1..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/RuntimeExtensionInterface.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-/**
- * @author Grégoire Pineau <lyrixx@lyrixx.info>
- */
-interface RuntimeExtensionInterface
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/SandboxExtension.php b/generated/php/vendor/twig/twig/src/Extension/SandboxExtension.php
deleted file mode 100644
index 181e58c..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/SandboxExtension.php
+++ /dev/null
@@ -1,247 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\NodeVisitor\SandboxNodeVisitor;
-use Twig\Sandbox\SecurityNotAllowedMethodError;
-use Twig\Sandbox\SecurityNotAllowedPropertyError;
-use Twig\Sandbox\SecurityPolicyInterface;
-use Twig\Sandbox\SourcePolicyInterface;
-use Twig\Source;
-use Twig\TokenParser\SandboxTokenParser;
-
-final class SandboxExtension extends AbstractExtension
-{
-    private $sandboxedGlobally;
-    private $sandboxed;
-    private $policy;
-    private $sourcePolicy;
-
-    public function __construct(SecurityPolicyInterface $policy, $sandboxed = false, ?SourcePolicyInterface $sourcePolicy = null)
-    {
-        if (null !== $sourcePolicy) {
-            trigger_deprecation('twig/twig', '3.27.0', 'The "%s" interface is deprecated with no replacement, do not pass an instance to "%s".', SourcePolicyInterface::class, self::class);
-        }
-
-        $this->policy = $policy;
-        $this->sandboxedGlobally = $sandboxed;
-        $this->sourcePolicy = $sourcePolicy;
-    }
-
-    public function getTokenParsers(): array
-    {
-        return [new SandboxTokenParser()];
-    }
-
-    public function getNodeVisitors(): array
-    {
-        return [new SandboxNodeVisitor()];
-    }
-
-    public function enableSandbox(): void
-    {
-        $this->sandboxed = true;
-    }
-
-    public function disableSandbox(): void
-    {
-        $this->sandboxed = false;
-    }
-
-    public function isSandboxed(?Source $source = null): bool
-    {
-        return $this->sandboxedGlobally || $this->sandboxed || $this->isSourceSandboxed($source);
-    }
-
-    public function isSandboxedGlobally(): bool
-    {
-        return $this->sandboxedGlobally;
-    }
-
-    private function isSourceSandboxed(?Source $source): bool
-    {
-        if (null === $source || null === $this->sourcePolicy) {
-            return false;
-        }
-
-        return $this->sourcePolicy->enableSandbox($source);
-    }
-
-    public function setSecurityPolicy(SecurityPolicyInterface $policy): void
-    {
-        $this->policy = $policy;
-    }
-
-    public function getSecurityPolicy(): SecurityPolicyInterface
-    {
-        return $this->policy;
-    }
-
-    public function checkSecurity($tags, $filters, $functions, $tests = [], $source = null): void
-    {
-        // BC: previous signature was checkSecurity($tags, $filters, $functions, ?Source $source = null);
-        // detect a legacy call where the 4th positional argument was the Source.
-        if ($tests instanceof Source || (null === $tests && \func_num_args() < 5)) {
-            trigger_deprecation('twig/twig', '3.28', 'Passing a "Twig\Source" as the 4th argument of "%s()" is deprecated; pass an array of tests instead.', __METHOD__);
-            $source = $tests;
-            $tests = [];
-        }
-
-        if (!$this->isSandboxed($source)) {
-            return;
-        }
-
-        if ((new \ReflectionMethod($this->policy, 'checkSecurity'))->getNumberOfParameters() >= 4) {
-            $this->policy->checkSecurity($tags, $filters, $functions, $tests);
-
-            return;
-        }
-
-        trigger_deprecation('twig/twig', '3.28', 'The "%s::checkSecurity()" method will take a 4th "array $tests" argument in 4.0; not declaring it is deprecated.', $this->policy::class);
-
-        $this->policy->checkSecurity($tags, $filters, $functions);
-    }
-
-    public function checkMethodAllowed($obj, $method, int $lineno = -1, ?Source $source = null): void
-    {
-        if ($this->isSandboxed($source)) {
-            try {
-                $this->policy->checkMethodAllowed($obj, $method);
-            } catch (SecurityNotAllowedMethodError $e) {
-                $e->setSourceContext($source);
-                $e->setTemplateLine($lineno);
-
-                throw $e;
-            }
-        }
-    }
-
-    public function checkPropertyAllowed($obj, $property, int $lineno = -1, ?Source $source = null): void
-    {
-        if ($this->isSandboxed($source)) {
-            try {
-                $this->policy->checkPropertyAllowed($obj, $property);
-            } catch (SecurityNotAllowedPropertyError $e) {
-                $e->setSourceContext($source);
-                $e->setTemplateLine($lineno);
-
-                throw $e;
-            }
-        }
-    }
-
-    /**
-     * @throws SecurityNotAllowedMethodError
-     */
-    public function ensureToStringAllowed($obj, int $lineno = -1, ?Source $source = null)
-    {
-        return $this->doEnsureToStringAllowed($obj, $lineno, $source, new \SplObjectStorage());
-    }
-
-    /**
-     * Materialises a spread operand and runs the policy on every element.
-     *
-     * @internal
-     *
-     * @throws SecurityNotAllowedMethodError
-     */
-    public function ensureSpreadAllowed(iterable $obj, int $lineno = -1, ?Source $source = null): array
-    {
-        $seen = new \SplObjectStorage();
-        if ($obj instanceof \Traversable) {
-            $seen[$obj] = true;
-            $obj = iterator_to_array($obj);
-        }
-
-        $this->ensureToStringAllowedForArray($obj, $lineno, $source, $seen);
-
-        return $obj;
-    }
-
-    private function doEnsureToStringAllowed($obj, int $lineno, ?Source $source, \SplObjectStorage $seen)
-    {
-        if (\is_array($obj)) {
-            $this->ensureToStringAllowedForArray($obj, $lineno, $source, $seen);
-
-            return $obj;
-        }
-
-        if (!$this->isSandboxed($source)) {
-            return $obj;
-        }
-
-        if ($obj instanceof \Stringable) {
-            try {
-                $this->policy->checkMethodAllowed($obj, '__toString');
-            } catch (SecurityNotAllowedMethodError $e) {
-                $e->setSourceContext($source);
-                $e->setTemplateLine($lineno);
-
-                throw $e;
-            }
-        }
-
-        // Elements yielded by a Traversable may be string-coerced downstream
-        // (e.g. by `join`/`replace`), bypassing the policy. Check them now.
-        if ($obj instanceof \Traversable) {
-            if (isset($seen[$obj])) {
-                return $obj;
-            }
-            $seen[$obj] = true;
-
-            // IteratorAggregate::getIterator() is idempotent, so we can walk
-            // the elements and return the original object: host code typed
-            // against a specific class (e.g. FormView) keeps working.
-            if ($obj instanceof \IteratorAggregate) {
-                foreach ($obj as $v) {
-                    $this->doEnsureToStringAllowed($v, $lineno, $source, $seen);
-                }
-
-                return $obj;
-            }
-
-            // Single-pass Iterator/Generator: materialise to validate.
-            $array = iterator_to_array($obj);
-            $this->ensureToStringAllowedForArray($array, $lineno, $source, $seen);
-
-            if (!$obj instanceof \Stringable) {
-                return $array;
-            }
-        }
-
-        return $obj;
-    }
-
-    private function ensureToStringAllowedForArray(array $obj, int $lineno, ?Source $source, \SplObjectStorage $seen, array &$stack = []): void
-    {
-        foreach ($obj as $k => $v) {
-            if (!$v) {
-                continue;
-            }
-
-            if (!\is_array($v)) {
-                $this->doEnsureToStringAllowed($v, $lineno, $source, $seen);
-                continue;
-            }
-
-            if ($r = \ReflectionReference::fromArrayElement($obj, $k)) {
-                if (isset($stack[$r->getId()])) {
-                    continue;
-                }
-
-                $stack[$r->getId()] = true;
-            }
-
-            $this->ensureToStringAllowedForArray($v, $lineno, $source, $seen, $stack);
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/StagingExtension.php b/generated/php/vendor/twig/twig/src/Extension/StagingExtension.php
deleted file mode 100644
index 59db2ca..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/StagingExtension.php
+++ /dev/null
@@ -1,100 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\NodeVisitor\NodeVisitorInterface;
-use Twig\TokenParser\TokenParserInterface;
-use Twig\TwigFilter;
-use Twig\TwigFunction;
-use Twig\TwigTest;
-
-/**
- * Used by \Twig\Environment as a staging area.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class StagingExtension extends AbstractExtension
-{
-    private $functions = [];
-    private $filters = [];
-    private $visitors = [];
-    private $tokenParsers = [];
-    private $tests = [];
-
-    public function addFunction(TwigFunction $function): void
-    {
-        if (isset($this->functions[$function->getName()])) {
-            throw new \LogicException(\sprintf('Function "%s" is already registered.', $function->getName()));
-        }
-
-        $this->functions[$function->getName()] = $function;
-    }
-
-    public function getFunctions(): array
-    {
-        return $this->functions;
-    }
-
-    public function addFilter(TwigFilter $filter): void
-    {
-        if (isset($this->filters[$filter->getName()])) {
-            throw new \LogicException(\sprintf('Filter "%s" is already registered.', $filter->getName()));
-        }
-
-        $this->filters[$filter->getName()] = $filter;
-    }
-
-    public function getFilters(): array
-    {
-        return $this->filters;
-    }
-
-    public function addNodeVisitor(NodeVisitorInterface $visitor): void
-    {
-        $this->visitors[] = $visitor;
-    }
-
-    public function getNodeVisitors(): array
-    {
-        return $this->visitors;
-    }
-
-    public function addTokenParser(TokenParserInterface $parser): void
-    {
-        if (isset($this->tokenParsers[$parser->getTag()])) {
-            throw new \LogicException(\sprintf('Tag "%s" is already registered.', $parser->getTag()));
-        }
-
-        $this->tokenParsers[$parser->getTag()] = $parser;
-    }
-
-    public function getTokenParsers(): array
-    {
-        return $this->tokenParsers;
-    }
-
-    public function addTest(TwigTest $test): void
-    {
-        if (isset($this->tests[$test->getName()])) {
-            throw new \LogicException(\sprintf('Test "%s" is already registered.', $test->getName()));
-        }
-
-        $this->tests[$test->getName()] = $test;
-    }
-
-    public function getTests(): array
-    {
-        return $this->tests;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/StringLoaderExtension.php b/generated/php/vendor/twig/twig/src/Extension/StringLoaderExtension.php
deleted file mode 100644
index da5b2da..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/StringLoaderExtension.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\Environment;
-use Twig\TemplateWrapper;
-use Twig\TwigFunction;
-
-final class StringLoaderExtension extends AbstractExtension
-{
-    public function getFunctions(): array
-    {
-        return [
-            new TwigFunction('template_from_string', [self::class, 'templateFromString'], ['needs_environment' => true]),
-        ];
-    }
-
-    /**
-     * Loads a template from a string.
-     *
-     *     {{ include(template_from_string("Hello {{ name }}")) }}
-     *
-     * Never expose `template_from_string` to untrusted template
-     * authors (like in a sandboxed environment). See the docs for more details.
-     *
-     * @param string|null $name An optional name of the template to be used in error messages
-     *
-     * @internal
-     */
-    public static function templateFromString(Environment $env, string|\Stringable $template, ?string $name = null): TemplateWrapper
-    {
-        return $env->createTemplate((string) $template, $name);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Extension/YieldNotReadyExtension.php b/generated/php/vendor/twig/twig/src/Extension/YieldNotReadyExtension.php
deleted file mode 100644
index 49dfb80..0000000
--- a/generated/php/vendor/twig/twig/src/Extension/YieldNotReadyExtension.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Extension;
-
-use Twig\NodeVisitor\YieldNotReadyNodeVisitor;
-
-/**
- * @internal to be removed in Twig 4
- */
-final class YieldNotReadyExtension extends AbstractExtension
-{
-    public function __construct(
-        private bool $useYield,
-    ) {
-    }
-
-    public function getNodeVisitors(): array
-    {
-        return [new YieldNotReadyNodeVisitor($this->useYield)];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/ExtensionSet.php b/generated/php/vendor/twig/twig/src/ExtensionSet.php
deleted file mode 100644
index 7bb62fa..0000000
--- a/generated/php/vendor/twig/twig/src/ExtensionSet.php
+++ /dev/null
@@ -1,567 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Error\RuntimeError;
-use Twig\ExpressionParser\ExpressionParsers;
-use Twig\ExpressionParser\Infix\BinaryOperatorExpressionParser;
-use Twig\ExpressionParser\InfixAssociativity;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\ExpressionParser\PrecedenceChange;
-use Twig\ExpressionParser\Prefix\UnaryOperatorExpressionParser;
-use Twig\Extension\AttributeExtension;
-use Twig\Extension\ExtensionInterface;
-use Twig\Extension\GlobalsInterface;
-use Twig\Extension\LastModifiedExtensionInterface;
-use Twig\Extension\StagingExtension;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\NodeVisitor\NodeVisitorInterface;
-use Twig\TokenParser\TokenParserInterface;
-
-// Help opcache.preload discover always-needed symbols
-// @see https://github.com/php/php-src/issues/10131
-class_exists(BinaryOperatorExpressionParser::class);
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class ExtensionSet
-{
-    private $extensions;
-    private $initialized = false;
-    private $runtimeInitialized = false;
-    private $staging;
-    private $parsers;
-    private $visitors;
-    /** @var array<string, TwigFilter> */
-    private $filters;
-    /** @var array<string, TwigFilter> */
-    private $dynamicFilters;
-    /** @var array<string, TwigTest> */
-    private $tests;
-    /** @var array<string, TwigTest> */
-    private $dynamicTests;
-    /** @var array<string, TwigFunction> */
-    private $functions;
-    /** @var array<string, TwigFunction> */
-    private $dynamicFunctions;
-    private ExpressionParsers $expressionParsers;
-    /** @var array<string, mixed>|null */
-    private $globals;
-    /** @var array<callable(string): (TwigFunction|false)> */
-    private $functionCallbacks = [];
-    /** @var array<callable(string): (TwigFilter|false)> */
-    private $filterCallbacks = [];
-    /** @var array<callable(string): (TwigTest|false)> */
-    private $testCallbacks = [];
-    /** @var array<callable(string): (TokenParserInterface|false)> */
-    private $parserCallbacks = [];
-    private $lastModified = 0;
-
-    public function __construct()
-    {
-        $this->staging = new StagingExtension();
-    }
-
-    /**
-     * @return void
-     */
-    public function initRuntime()
-    {
-        $this->runtimeInitialized = true;
-    }
-
-    public function hasExtension(string $class): bool
-    {
-        return isset($this->extensions[ltrim($class, '\\')]);
-    }
-
-    public function getExtension(string $class): ExtensionInterface
-    {
-        $class = ltrim($class, '\\');
-
-        if (!isset($this->extensions[$class])) {
-            throw new RuntimeError(\sprintf('The "%s" extension is not enabled.', $class));
-        }
-
-        return $this->extensions[$class];
-    }
-
-    /**
-     * @param ExtensionInterface[] $extensions
-     */
-    public function setExtensions(array $extensions): void
-    {
-        foreach ($extensions as $extension) {
-            $this->addExtension($extension);
-        }
-    }
-
-    /**
-     * @return ExtensionInterface[]
-     */
-    public function getExtensions(): array
-    {
-        return $this->extensions;
-    }
-
-    public function getSignature(): string
-    {
-        return json_encode(array_keys($this->extensions));
-    }
-
-    public function isInitialized(): bool
-    {
-        return $this->initialized || $this->runtimeInitialized;
-    }
-
-    public function getLastModified(): int
-    {
-        if (0 !== $this->lastModified) {
-            return $this->lastModified;
-        }
-
-        $lastModified = 0;
-        foreach ($this->extensions as $extension) {
-            if ($extension instanceof LastModifiedExtensionInterface) {
-                $lastModified = max($extension->getLastModified(), $lastModified);
-            } else {
-                $r = new \ReflectionObject($extension);
-                if (is_file($r->getFileName())) {
-                    $lastModified = max(filemtime($r->getFileName()), $lastModified);
-                }
-            }
-        }
-
-        return $this->lastModified = $lastModified;
-    }
-
-    public function addExtension(ExtensionInterface $extension): void
-    {
-        if ($extension instanceof AttributeExtension) {
-            $class = $extension->getClass();
-        } else {
-            $class = $extension::class;
-        }
-
-        if ($this->initialized) {
-            throw new \LogicException(\sprintf('Unable to register extension "%s" as extensions have already been initialized.', $class));
-        }
-
-        if (isset($this->extensions[$class])) {
-            throw new \LogicException(\sprintf('Unable to register extension "%s" as it is already registered.', $class));
-        }
-
-        $this->extensions[$class] = $extension;
-    }
-
-    public function addFunction(TwigFunction $function): void
-    {
-        if ($this->initialized) {
-            throw new \LogicException(\sprintf('Unable to add function "%s" as extensions have already been initialized.', $function->getName()));
-        }
-
-        $this->staging->addFunction($function);
-    }
-
-    /**
-     * @return TwigFunction[]
-     */
-    public function getFunctions(): array
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        return $this->functions;
-    }
-
-    public function getFunction(string $name): ?TwigFunction
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        if (isset($this->functions[$name])) {
-            return $this->functions[$name];
-        }
-
-        foreach ($this->dynamicFunctions as $pattern => $function) {
-            if (preg_match($pattern, $name, $matches)) {
-                array_shift($matches);
-
-                return $function->withDynamicArguments($name, $function->getName(), $matches);
-            }
-        }
-
-        foreach ($this->functionCallbacks as $callback) {
-            if (false !== $function = $callback($name)) {
-                return $function;
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * @param callable(string): (TwigFunction|false) $callable
-     */
-    public function registerUndefinedFunctionCallback(callable $callable): void
-    {
-        $this->functionCallbacks[] = $callable;
-    }
-
-    public function addFilter(TwigFilter $filter): void
-    {
-        if ($this->initialized) {
-            throw new \LogicException(\sprintf('Unable to add filter "%s" as extensions have already been initialized.', $filter->getName()));
-        }
-
-        $this->staging->addFilter($filter);
-    }
-
-    /**
-     * @return TwigFilter[]
-     */
-    public function getFilters(): array
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        return $this->filters;
-    }
-
-    public function getFilter(string $name): ?TwigFilter
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        if (isset($this->filters[$name])) {
-            return $this->filters[$name];
-        }
-
-        foreach ($this->dynamicFilters as $pattern => $filter) {
-            if (preg_match($pattern, $name, $matches)) {
-                array_shift($matches);
-
-                return $filter->withDynamicArguments($name, $filter->getName(), $matches);
-            }
-        }
-
-        foreach ($this->filterCallbacks as $callback) {
-            if (false !== $filter = $callback($name)) {
-                return $filter;
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * @param callable(string): (TwigFilter|false) $callable
-     */
-    public function registerUndefinedFilterCallback(callable $callable): void
-    {
-        $this->filterCallbacks[] = $callable;
-    }
-
-    public function addNodeVisitor(NodeVisitorInterface $visitor): void
-    {
-        if ($this->initialized) {
-            throw new \LogicException('Unable to add a node visitor as extensions have already been initialized.');
-        }
-
-        $this->staging->addNodeVisitor($visitor);
-    }
-
-    /**
-     * @return NodeVisitorInterface[]
-     */
-    public function getNodeVisitors(): array
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        return $this->visitors;
-    }
-
-    public function addTokenParser(TokenParserInterface $parser): void
-    {
-        if ($this->initialized) {
-            throw new \LogicException('Unable to add a token parser as extensions have already been initialized.');
-        }
-
-        $this->staging->addTokenParser($parser);
-    }
-
-    /**
-     * @return TokenParserInterface[]
-     */
-    public function getTokenParsers(): array
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        return $this->parsers;
-    }
-
-    public function getTokenParser(string $name): ?TokenParserInterface
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        if (isset($this->parsers[$name])) {
-            return $this->parsers[$name];
-        }
-
-        foreach ($this->parserCallbacks as $callback) {
-            if (false !== $parser = $callback($name)) {
-                return $parser;
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * @param callable(string): (TokenParserInterface|false) $callable
-     */
-    public function registerUndefinedTokenParserCallback(callable $callable): void
-    {
-        $this->parserCallbacks[] = $callable;
-    }
-
-    /**
-     * @return array<string, mixed>
-     */
-    public function getGlobals(): array
-    {
-        if (null !== $this->globals) {
-            return $this->globals;
-        }
-
-        $globals = [];
-        foreach ($this->extensions as $extension) {
-            if (!$extension instanceof GlobalsInterface) {
-                continue;
-            }
-
-            $globals = array_merge($globals, $extension->getGlobals());
-        }
-
-        if ($this->initialized) {
-            $this->globals = $globals;
-        }
-
-        return $globals;
-    }
-
-    public function resetGlobals(): void
-    {
-        $this->globals = null;
-    }
-
-    public function addTest(TwigTest $test): void
-    {
-        if ($this->initialized) {
-            throw new \LogicException(\sprintf('Unable to add test "%s" as extensions have already been initialized.', $test->getName()));
-        }
-
-        $this->staging->addTest($test);
-    }
-
-    /**
-     * @return TwigTest[]
-     */
-    public function getTests(): array
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        return $this->tests;
-    }
-
-    public function getTest(string $name): ?TwigTest
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        if (isset($this->tests[$name])) {
-            return $this->tests[$name];
-        }
-
-        foreach ($this->dynamicTests as $pattern => $test) {
-            if (preg_match($pattern, $name, $matches)) {
-                array_shift($matches);
-
-                return $test->withDynamicArguments($name, $test->getName(), $matches);
-            }
-        }
-
-        foreach ($this->testCallbacks as $callback) {
-            if (false !== $test = $callback($name)) {
-                return $test;
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * @param callable(string): (TwigTest|false) $callable
-     */
-    public function registerUndefinedTestCallback(callable $callable): void
-    {
-        $this->testCallbacks[] = $callable;
-    }
-
-    public function getExpressionParsers(): ExpressionParsers
-    {
-        if (!$this->initialized) {
-            $this->initExtensions();
-        }
-
-        return $this->expressionParsers;
-    }
-
-    private function initExtensions(): void
-    {
-        $this->parsers = [];
-        $this->filters = [];
-        $this->functions = [];
-        $this->tests = [];
-        $this->dynamicFilters = [];
-        $this->dynamicFunctions = [];
-        $this->dynamicTests = [];
-        $this->visitors = [];
-        $this->expressionParsers = new ExpressionParsers();
-
-        foreach ($this->extensions as $extension) {
-            $this->initExtension($extension);
-        }
-        $this->initExtension($this->staging);
-        // Done at the end only, so that an exception during initialization does not mark the environment as initialized when catching the exception
-        $this->initialized = true;
-    }
-
-    private function initExtension(ExtensionInterface $extension): void
-    {
-        // filters
-        foreach ($extension->getFilters() as $filter) {
-            $this->filters[$name = $filter->getName()] = $filter;
-            if (str_contains($name, '*')) {
-                $this->dynamicFilters['#^'.str_replace('\\*', '(.*?)', preg_quote($name, '#')).'$#'] = $filter;
-            }
-        }
-
-        // functions
-        foreach ($extension->getFunctions() as $function) {
-            $this->functions[$name = $function->getName()] = $function;
-            if (str_contains($name, '*')) {
-                $this->dynamicFunctions['#^'.str_replace('\\*', '(.*?)', preg_quote($name, '#')).'$#'] = $function;
-            }
-        }
-
-        // tests
-        foreach ($extension->getTests() as $test) {
-            $this->tests[$name = $test->getName()] = $test;
-            if (str_contains($name, '*')) {
-                $this->dynamicTests['#^'.str_replace('\\*', '(.*?)', preg_quote($name, '#')).'$#'] = $test;
-            }
-        }
-
-        // token parsers
-        foreach ($extension->getTokenParsers() as $parser) {
-            if (!$parser instanceof TokenParserInterface) {
-                throw new \LogicException('getTokenParsers() must return an array of \Twig\TokenParser\TokenParserInterface.');
-            }
-
-            $this->parsers[$parser->getTag()] = $parser;
-        }
-
-        // node visitors
-        foreach ($extension->getNodeVisitors() as $visitor) {
-            $this->visitors[] = $visitor;
-        }
-
-        // expression parsers
-        if (method_exists($extension, 'getExpressionParsers')) {
-            $this->expressionParsers->add($extension->getExpressionParsers());
-        }
-
-        $operators = $extension->getOperators();
-        if (!\is_array($operators)) {
-            throw new \InvalidArgumentException(\sprintf('"%s::getOperators()" must return an array with operators, got "%s".', $extension::class, get_debug_type($operators).(\is_resource($operators) ? '' : '#'.$operators)));
-        }
-
-        if (2 !== \count($operators)) {
-            throw new \InvalidArgumentException(\sprintf('"%s::getOperators()" must return an array of 2 elements, got %d.', $extension::class, \count($operators)));
-        }
-
-        $expressionParsers = [];
-        foreach ($operators[0] as $operator => $op) {
-            $expressionParsers[] = new UnaryOperatorExpressionParser($op['class'], $operator, $op['precedence'], $op['precedence_change'] ?? null, '', $op['aliases'] ?? []);
-        }
-        foreach ($operators[1] as $operator => $op) {
-            $op['associativity'] = match ($op['associativity']) {
-                1 => InfixAssociativity::Left,
-                2 => InfixAssociativity::Right,
-                default => throw new \InvalidArgumentException(\sprintf('Invalid associativity "%s" for operator "%s".', $op['associativity'], $operator)),
-            };
-
-            if (isset($op['callable'])) {
-                $expressionParsers[] = $this->convertInfixExpressionParser($op['class'], $operator, $op['precedence'], $op['associativity'], $op['precedence_change'] ?? null, $op['aliases'] ?? [], $op['callable']);
-            } else {
-                $expressionParsers[] = new BinaryOperatorExpressionParser($op['class'], $operator, $op['precedence'], $op['associativity'], $op['precedence_change'] ?? null, '', $op['aliases'] ?? []);
-            }
-        }
-
-        if (\count($expressionParsers)) {
-            trigger_deprecation('twig/twig', '3.21', \sprintf('Extension "%s" uses the old signature for "getOperators()", please implement "getExpressionParsers()" instead.', $extension::class));
-
-            $this->expressionParsers->add($expressionParsers);
-        }
-    }
-
-    private function convertInfixExpressionParser(string $nodeClass, string $operator, int $precedence, InfixAssociativity $associativity, ?PrecedenceChange $precedenceChange, array $aliases, callable $callable): InfixExpressionParserInterface
-    {
-        trigger_deprecation('twig/twig', '3.21', \sprintf('Using a non-ExpressionParserInterface object to define the "%s" binary operator is deprecated.', $operator));
-
-        return new class($nodeClass, $operator, $precedence, $associativity, $precedenceChange, $aliases, $callable) extends BinaryOperatorExpressionParser {
-            public function __construct(
-                string $nodeClass,
-                string $operator,
-                int $precedence,
-                InfixAssociativity $associativity = InfixAssociativity::Left,
-                ?PrecedenceChange $precedenceChange = null,
-                array $aliases = [],
-                private $callable = null,
-            ) {
-                parent::__construct($nodeClass, $operator, $precedence, $associativity, $precedenceChange, $aliases);
-            }
-
-            public function parse(Parser $parser, AbstractExpression $expr, Token $token): AbstractExpression
-            {
-                return ($this->callable)($parser, $expr);
-            }
-        };
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/FileExtensionEscapingStrategy.php b/generated/php/vendor/twig/twig/src/FileExtensionEscapingStrategy.php
deleted file mode 100644
index 2785ab7..0000000
--- a/generated/php/vendor/twig/twig/src/FileExtensionEscapingStrategy.php
+++ /dev/null
@@ -1,61 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-/**
- * Default autoescaping strategy based on file names.
- *
- * This strategy sets the HTML as the default autoescaping strategy,
- * but changes it based on the template name.
- *
- * Note that there is no runtime performance impact as the
- * default autoescaping strategy is set at compilation time.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class FileExtensionEscapingStrategy
-{
-    /**
-     * Guesses the best autoescaping strategy based on the file name.
-     *
-     * @param string $name The template name
-     *
-     * @return string|false The escaping strategy name to use or false to disable
-     */
-    public static function guess(string $name)
-    {
-        if (\in_array(substr($name, -1), ['/', '\\'], true)) {
-            return 'html'; // return html for directories
-        }
-
-        if (str_ends_with($name, '.twig')) {
-            $name = substr($name, 0, -5);
-        }
-
-        $extension = pathinfo($name, \PATHINFO_EXTENSION);
-
-        switch ($extension) {
-            case 'js':
-            case 'json':
-                return 'js';
-
-            case 'css':
-                return 'css';
-
-            case 'txt':
-                return false;
-
-            default:
-                return 'html';
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Lexer.php b/generated/php/vendor/twig/twig/src/Lexer.php
deleted file mode 100644
index f208723..0000000
--- a/generated/php/vendor/twig/twig/src/Lexer.php
+++ /dev/null
@@ -1,621 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\ExpressionParsers;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class Lexer
-{
-    private $isInitialized = false;
-
-    private $tokens;
-    private $code;
-    private $cursor;
-    private $lineno;
-    private $end;
-    private $state;
-    private $states;
-    private $brackets;
-    private $env;
-    private $source;
-    private $options;
-    private $regexes;
-    private $position;
-    private $positions;
-    private $currentVarBlockLine;
-    private array $openingBrackets = ['{', '(', '['];
-    private array $closingBrackets = ['}', ')', ']'];
-
-    public const STATE_DATA = 0;
-    public const STATE_BLOCK = 1;
-    public const STATE_VAR = 2;
-    public const STATE_STRING = 3;
-    public const STATE_INTERPOLATION = 4;
-
-    public const REGEX_NAME = '/[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/A';
-    public const REGEX_STRING = '/"([^#"\\\\]*(?:\\\\.[^#"\\\\]*)*)"|\'([^\'\\\\]*(?:\\\\.[^\'\\\\]*)*)\'/As';
-
-    public const REGEX_NUMBER = '/(?(DEFINE)
-        (?<LNUM>[0-9]+(_[0-9]+)*)               # Integers (with underscores)   123_456
-        (?<FRAC>\.(?&LNUM))                     # Fractional part               .456
-        (?<EXPONENT>[eE][+-]?(?&LNUM))          # Exponent part                 E+10
-        (?<DNUM>(?&LNUM)(?:(?&FRAC))?)          # Decimal number                123_456.456
-    )(?:(?&DNUM)(?:(?&EXPONENT))?)              #                               123_456.456E+10
-    /Ax';
-
-    public const REGEX_DQ_STRING_DELIM = '/"/A';
-    public const REGEX_DQ_STRING_PART = '/[^#"\\\\]*(?:(?:\\\\.|#(?!\{))[^#"\\\\]*)*/As';
-    public const REGEX_INLINE_COMMENT = '/#[^\n]*/A';
-    public const PUNCTUATION = '()[]{}?:.,|';
-
-    private const REGEX_RAW_INLINE_COMMENT = '/#[^\r\n]*/A';
-
-    private const SPECIAL_CHARS = [
-        'f' => "\f",
-        'n' => "\n",
-        'r' => "\r",
-        't' => "\t",
-        'v' => "\v",
-    ];
-
-    public function __construct(Environment $env, array $options = [])
-    {
-        $this->env = $env;
-
-        $this->options = array_merge([
-            'tag_comment' => ['{#', '#}'],
-            'tag_block' => ['{%', '%}'],
-            'tag_variable' => ['{{', '}}'],
-            'whitespace_trim' => '-',
-            'whitespace_line_trim' => '~',
-            'whitespace_line_chars' => ' \t\0\x0B',
-            'interpolation' => ['#{', '}'],
-        ], $options);
-    }
-
-    private function initialize(): void
-    {
-        if ($this->isInitialized) {
-            return;
-        }
-
-        // when PHP 7.3 is the min version, we will be able to remove the '#' part in preg_quote as it's part of the default
-        $this->regexes = [
-            // }}
-            'lex_var' => '{
-                \s*
-                (?:'.
-                    preg_quote($this->options['whitespace_trim'].$this->options['tag_variable'][1], '#').'\s*'. // -}}\s*
-                    '|'.
-                    preg_quote($this->options['whitespace_line_trim'].$this->options['tag_variable'][1], '#').'['.$this->options['whitespace_line_chars'].']*'. // ~}}[ \t\0\x0B]*
-                    '|'.
-                    preg_quote($this->options['tag_variable'][1], '#'). // }}
-                ')
-            }Ax',
-
-            // %}
-            'lex_block' => '{
-                \s*
-                (?:'.
-                    preg_quote($this->options['whitespace_trim'].$this->options['tag_block'][1], '#').'\s*\n?'. // -%}\s*\n?
-                    '|'.
-                    preg_quote($this->options['whitespace_line_trim'].$this->options['tag_block'][1], '#').'['.$this->options['whitespace_line_chars'].']*'. // ~%}[ \t\0\x0B]*
-                    '|'.
-                    preg_quote($this->options['tag_block'][1], '#').'(?:\r\n?|\n)?'. // %}(?:\r\n?|\n)?
-                ')
-            }Ax',
-
-            // {% endverbatim %}
-            'lex_raw_data' => '{'.
-                preg_quote($this->options['tag_block'][0], '#'). // {%
-                '('.
-                    $this->options['whitespace_trim']. // -
-                    '|'.
-                    $this->options['whitespace_line_trim']. // ~
-                ')?\s*endverbatim\s*'.
-                '(?:'.
-                    preg_quote($this->options['whitespace_trim'].$this->options['tag_block'][1], '#').'\s*'. // -%}
-                    '|'.
-                    preg_quote($this->options['whitespace_line_trim'].$this->options['tag_block'][1], '#').'['.$this->options['whitespace_line_chars'].']*'. // ~%}[ \t\0\x0B]*
-                    '|'.
-                    preg_quote($this->options['tag_block'][1], '#'). // %}
-                ')
-            }sx',
-
-            'operator' => $this->getOperatorRegex(),
-
-            // #}
-            'lex_comment' => '{
-                (?:'.
-                    preg_quote($this->options['whitespace_trim'].$this->options['tag_comment'][1], '#').'\s*\n?'. // -#}\s*\n?
-                    '|'.
-                    preg_quote($this->options['whitespace_line_trim'].$this->options['tag_comment'][1], '#').'['.$this->options['whitespace_line_chars'].']*'. // ~#}[ \t\0\x0B]*
-                    '|'.
-                    preg_quote($this->options['tag_comment'][1], '#').'(?:\r\n?|\n)?'. // #}(?:\r\n?|\n)?
-                ')
-            }sx',
-
-            // verbatim %}
-            'lex_block_raw' => '{
-                \s*verbatim\s*
-                (?:'.
-                    preg_quote($this->options['whitespace_trim'].$this->options['tag_block'][1], '#').'\s*'. // -%}\s*
-                    '|'.
-                    preg_quote($this->options['whitespace_line_trim'].$this->options['tag_block'][1], '#').'['.$this->options['whitespace_line_chars'].']*'. // ~%}[ \t\0\x0B]*
-                    '|'.
-                    preg_quote($this->options['tag_block'][1], '#'). // %}
-                ')
-            }Asx',
-
-            'lex_block_line' => '{\s*line\s+(\d+)\s*'.preg_quote($this->options['tag_block'][1], '#').'}As',
-
-            // {{ or {% or {#
-            'lex_tokens_start' => '{
-                ('.
-                    preg_quote($this->options['tag_variable'][0], '#'). // {{
-                    '|'.
-                    preg_quote($this->options['tag_block'][0], '#'). // {%
-                    '|'.
-                    preg_quote($this->options['tag_comment'][0], '#'). // {#
-                ')('.
-                    preg_quote($this->options['whitespace_trim'], '#'). // -
-                    '|'.
-                    preg_quote($this->options['whitespace_line_trim'], '#'). // ~
-                ')?
-            }sx',
-            'interpolation_start' => '{'.preg_quote($this->options['interpolation'][0], '#').'\s*}A',
-            'interpolation_end' => '{\s*'.preg_quote($this->options['interpolation'][1], '#').'}A',
-        ];
-
-        $this->isInitialized = true;
-    }
-
-    public function tokenize(Source $source): TokenStream
-    {
-        $this->initialize();
-
-        $this->source = $source;
-        $this->code = $source->getCode();
-        $this->cursor = 0;
-        $this->lineno = 1;
-        $this->end = \strlen($this->code);
-        $this->tokens = [];
-        $this->state = self::STATE_DATA;
-        $this->states = [];
-        $this->brackets = [];
-        $this->position = -1;
-
-        // find all token starts in one go
-        preg_match_all($this->regexes['lex_tokens_start'], $this->code, $matches, \PREG_OFFSET_CAPTURE);
-        $this->positions = $matches;
-
-        while ($this->cursor < $this->end) {
-            // dispatch to the lexing functions depending
-            // on the current state
-            switch ($this->state) {
-                case self::STATE_DATA:
-                    $this->lexData();
-                    break;
-
-                case self::STATE_BLOCK:
-                    $this->lexBlock();
-                    break;
-
-                case self::STATE_VAR:
-                    $this->lexVar();
-                    break;
-
-                case self::STATE_STRING:
-                    $this->lexString();
-                    break;
-
-                case self::STATE_INTERPOLATION:
-                    $this->lexInterpolation();
-                    break;
-            }
-        }
-
-        $this->pushToken(Token::EOF_TYPE);
-
-        if ($this->brackets) {
-            [$expect, $lineno] = array_pop($this->brackets);
-            throw new SyntaxError(\sprintf('Unclosed "%s".', $expect), $lineno, $this->source);
-        }
-
-        return new TokenStream($this->tokens, $this->source);
-    }
-
-    private function lexData(): void
-    {
-        // if no matches are left we return the rest of the template as simple text token
-        if ($this->position == \count($this->positions[0]) - 1) {
-            $text = substr($this->code, $this->cursor);
-            $this->pushToken(Token::TEXT_TYPE, $this->normalizeNewlines($text));
-            $this->moveCursor($text);
-
-            return;
-        }
-
-        // Find the first token after the current cursor
-        $position = $this->positions[0][++$this->position];
-        while ($position[1] < $this->cursor) {
-            if ($this->position == \count($this->positions[0]) - 1) {
-                return;
-            }
-            $position = $this->positions[0][++$this->position];
-        }
-
-        // push the template text first
-        $text = $textContent = substr($this->code, $this->cursor, $position[1] - $this->cursor);
-
-        // trim?
-        if (isset($this->positions[2][$this->position][0])) {
-            if ($this->options['whitespace_trim'] === $this->positions[2][$this->position][0]) {
-                // whitespace_trim detected ({%-, {{- or {#-)
-                $text = rtrim($text);
-            } elseif ($this->options['whitespace_line_trim'] === $this->positions[2][$this->position][0]) {
-                // whitespace_line_trim detected ({%~, {{~ or {#~)
-                // don't trim \r and \n
-                $text = rtrim($text, " \t\0\x0B");
-            }
-        }
-        $this->pushToken(Token::TEXT_TYPE, $this->normalizeNewlines($text));
-        $this->moveCursor($textContent);
-
-        switch ($this->positions[1][$this->position][0]) {
-            case $this->options['tag_comment'][0]:
-                $this->moveCursor($position[0]);
-                $this->lexComment();
-                break;
-
-            case $this->options['tag_block'][0]:
-                $lineno = $this->lineno;
-                $cursor = $this->cursor;
-                $this->moveCursor($position[0]);
-
-                // raw data?
-                if (preg_match($this->regexes['lex_block_raw'], $this->code, $match, 0, $this->cursor)) {
-                    $this->moveCursor($match[0]);
-                    $this->lexRawData();
-                // {% line \d+ %}
-                } elseif (preg_match($this->regexes['lex_block_line'], $this->code, $match, 0, $this->cursor)) {
-                    $this->moveCursor($match[0]);
-                    $this->lineno = (int) $match[1];
-                } else {
-                    $this->pushToken(Token::BLOCK_START_TYPE, '', $cursor, $lineno);
-                    $this->pushState(self::STATE_BLOCK);
-                    $this->currentVarBlockLine = $this->lineno;
-                }
-                break;
-
-            case $this->options['tag_variable'][0]:
-                $lineno = $this->lineno;
-                $cursor = $this->cursor;
-                $this->moveCursor($position[0]);
-                $this->pushToken(Token::VAR_START_TYPE, '', $cursor, $lineno);
-                $this->pushState(self::STATE_VAR);
-                $this->currentVarBlockLine = $this->lineno;
-                break;
-        }
-    }
-
-    private function lexBlock(): void
-    {
-        if (!$this->brackets && preg_match($this->regexes['lex_block'], $this->code, $match, 0, $this->cursor)) {
-            $this->pushClosingToken(Token::BLOCK_END_TYPE, $match[0]);
-            $this->popState();
-        } else {
-            $this->lexExpression();
-        }
-    }
-
-    private function lexVar(): void
-    {
-        if (!$this->brackets && preg_match($this->regexes['lex_var'], $this->code, $match, 0, $this->cursor)) {
-            $this->pushClosingToken(Token::VAR_END_TYPE, $match[0]);
-            $this->popState();
-        } else {
-            $this->lexExpression();
-        }
-    }
-
-    private function lexExpression(): void
-    {
-        // whitespace
-        if (preg_match('/\s+/A', $this->code, $match, 0, $this->cursor)) {
-            $this->moveCursor($match[0]);
-
-            if ($this->cursor >= $this->end) {
-                throw new SyntaxError(\sprintf('Unclosed "%s".', self::STATE_BLOCK === $this->state ? 'block' : 'variable'), $this->currentVarBlockLine, $this->source);
-            }
-        }
-
-        // operators
-        if (preg_match($this->regexes['operator'], $this->code, $match, 0, $this->cursor)) {
-            $operator = preg_replace('/\s+/', ' ', $match[0]);
-            if (\in_array($operator, $this->openingBrackets, true)) {
-                $this->checkBrackets($operator);
-            }
-            $this->pushToken(Token::OPERATOR_TYPE, $operator);
-            $this->moveCursor($match[0]);
-        }
-        // names
-        elseif (preg_match(self::REGEX_NAME, $this->code, $match, 0, $this->cursor)) {
-            $this->pushToken(Token::NAME_TYPE, $match[0]);
-            $this->moveCursor($match[0]);
-        }
-        // numbers
-        elseif (preg_match(self::REGEX_NUMBER, $this->code, $match, 0, $this->cursor)) {
-            $this->pushToken(Token::NUMBER_TYPE, 0 + str_replace('_', '', $match[0]));
-            $this->moveCursor($match[0]);
-        }
-        // punctuation
-        elseif (str_contains(self::PUNCTUATION, $this->code[$this->cursor])) {
-            $this->checkBrackets($this->code[$this->cursor]);
-            $this->pushToken(Token::PUNCTUATION_TYPE, $this->code[$this->cursor]);
-            $this->moveCursor($this->code[$this->cursor]);
-        }
-        // strings
-        elseif (preg_match(self::REGEX_STRING, $this->code, $match, 0, $this->cursor)) {
-            $this->pushToken(Token::STRING_TYPE, $this->stripcslashes($this->normalizeNewlines(substr($match[0], 1, -1)), substr($match[0], 0, 1)));
-            $this->moveCursor($match[0]);
-        }
-        // opening double quoted string
-        elseif (preg_match(self::REGEX_DQ_STRING_DELIM, $this->code, $match, 0, $this->cursor)) {
-            $this->brackets[] = ['"', $this->lineno];
-            $this->pushState(self::STATE_STRING);
-            $this->moveCursor($match[0]);
-        }
-        // inline comment
-        elseif (preg_match(self::REGEX_RAW_INLINE_COMMENT, $this->code, $match, 0, $this->cursor)) {
-            $this->moveCursor($match[0]);
-        }
-        // unlexable
-        else {
-            throw new SyntaxError(\sprintf('Unexpected character "%s".', $this->code[$this->cursor]), $this->lineno, $this->source, columnno: $this->source->getColumn($this->cursor));
-        }
-    }
-
-    private function stripcslashes(string $str, string $quoteType): string
-    {
-        $result = '';
-        $length = \strlen($str);
-
-        $i = 0;
-        while ($i < $length) {
-            if (false === $pos = strpos($str, '\\', $i)) {
-                $result .= substr($str, $i);
-                break;
-            }
-
-            $result .= substr($str, $i, $pos - $i);
-            $i = $pos + 1;
-
-            if ($i >= $length) {
-                $result .= '\\';
-                break;
-            }
-
-            $nextChar = $str[$i];
-
-            if (isset(self::SPECIAL_CHARS[$nextChar])) {
-                $result .= self::SPECIAL_CHARS[$nextChar];
-            } elseif ('\\' === $nextChar) {
-                $result .= $nextChar;
-            } elseif ("'" === $nextChar || '"' === $nextChar) {
-                if ($nextChar !== $quoteType) {
-                    trigger_deprecation('twig/twig', '3.12', 'Character "%s" should not be escaped; the "\" character is ignored in Twig 3 but will not be in Twig 4. Please remove the extra "\" character at position %d in "%s" at line %d.', $nextChar, $i + 1, $this->source->getName(), $this->lineno);
-                }
-                $result .= $nextChar;
-            } elseif ('#' === $nextChar && $i + 1 < $length && '{' === $str[$i + 1]) {
-                $result .= '#{';
-                ++$i;
-            } elseif ('x' === $nextChar && $i + 1 < $length && ctype_xdigit($str[$i + 1])) {
-                $hex = $str[++$i];
-                if ($i + 1 < $length && ctype_xdigit($str[$i + 1])) {
-                    $hex .= $str[++$i];
-                }
-                $result .= \chr(hexdec($hex));
-            } elseif (ctype_digit($nextChar) && $nextChar < '8') {
-                $octal = $nextChar;
-                while ($i + 1 < $length && ctype_digit($str[$i + 1]) && $str[$i + 1] < '8' && \strlen($octal) < 3) {
-                    $octal .= $str[++$i];
-                }
-                $result .= \chr(octdec($octal) % 256);
-            } else {
-                trigger_deprecation('twig/twig', '3.12', 'Character "%s" should not be escaped; the "\" character is ignored in Twig 3 but will not be in Twig 4. Please remove the extra "\" character at position %d in "%s" at line %d.', $nextChar, $i + 1, $this->source->getName(), $this->lineno);
-                $result .= $nextChar;
-            }
-
-            ++$i;
-        }
-
-        return $result;
-    }
-
-    private function lexRawData(): void
-    {
-        if (!preg_match($this->regexes['lex_raw_data'], $this->code, $match, \PREG_OFFSET_CAPTURE, $this->cursor)) {
-            throw new SyntaxError('Unexpected end of file: Unclosed "verbatim" block.', $this->lineno, $this->source);
-        }
-
-        $offset = $this->cursor;
-        $text = substr($this->code, $this->cursor, $match[0][1] - $this->cursor);
-        $this->moveCursor($text.$match[0][0]);
-
-        // trim?
-        if (isset($match[1][0])) {
-            if ($this->options['whitespace_trim'] === $match[1][0]) {
-                // whitespace_trim detected ({%-, {{- or {#-)
-                $text = rtrim($text);
-            } else {
-                // whitespace_line_trim detected ({%~, {{~ or {#~)
-                // don't trim \r and \n
-                $text = rtrim($text, " \t\0\x0B");
-            }
-        }
-
-        $this->pushToken(Token::TEXT_TYPE, $this->normalizeNewlines($text), $offset);
-    }
-
-    private function lexComment(): void
-    {
-        if (!preg_match($this->regexes['lex_comment'], $this->code, $match, \PREG_OFFSET_CAPTURE, $this->cursor)) {
-            throw new SyntaxError('Unclosed comment.', $this->lineno, $this->source);
-        }
-
-        $this->moveCursor(substr($this->code, $this->cursor, $match[0][1] - $this->cursor).$match[0][0]);
-    }
-
-    private function lexString(): void
-    {
-        if (preg_match($this->regexes['interpolation_start'], $this->code, $match, 0, $this->cursor)) {
-            $this->brackets[] = [$this->options['interpolation'][0], $this->lineno];
-            $this->pushToken(Token::INTERPOLATION_START_TYPE);
-            $this->moveCursor($match[0]);
-            $this->pushState(self::STATE_INTERPOLATION);
-        } elseif (preg_match(self::REGEX_DQ_STRING_PART, $this->code, $match, 0, $this->cursor) && '' !== $match[0]) {
-            $this->pushToken(Token::STRING_TYPE, $this->stripcslashes($this->normalizeNewlines($match[0]), '"'));
-            $this->moveCursor($match[0]);
-        } elseif (preg_match(self::REGEX_DQ_STRING_DELIM, $this->code, $match, 0, $this->cursor)) {
-            [$expect, $lineno] = array_pop($this->brackets);
-            if ('"' != $this->code[$this->cursor]) {
-                throw new SyntaxError(\sprintf('Unclosed "%s".', $expect), $lineno, $this->source);
-            }
-
-            $this->popState();
-            $this->moveCursor($match[0]);
-        } else {
-            // unlexable
-            throw new SyntaxError(\sprintf('Unexpected character "%s".', $this->code[$this->cursor]), $this->lineno, $this->source, columnno: $this->source->getColumn($this->cursor));
-        }
-    }
-
-    private function lexInterpolation(): void
-    {
-        $bracket = end($this->brackets);
-        if ($this->options['interpolation'][0] === $bracket[0] && preg_match($this->regexes['interpolation_end'], $this->code, $match, 0, $this->cursor)) {
-            array_pop($this->brackets);
-            $this->pushClosingToken(Token::INTERPOLATION_END_TYPE, $match[0]);
-            $this->popState();
-        } else {
-            $this->lexExpression();
-        }
-    }
-
-    private function pushToken($type, $value = '', ?int $offset = null, ?int $lineno = null): void
-    {
-        // do not push empty text tokens
-        if (Token::TEXT_TYPE === $type && '' === $value) {
-            return;
-        }
-
-        // by default the token starts at the current cursor; callers that
-        // emit a token after consuming it must pass an explicit offset
-        $this->tokens[] = new Token($type, $value, $lineno ?? $this->lineno, $offset ?? $this->cursor);
-    }
-
-    private function moveCursor($text): void
-    {
-        $this->cursor += \strlen($text);
-        // count "\r\n" and "\r" as a single newline without allocating a
-        // normalized copy when the chunk has no carriage return (common case)
-        $this->lineno += str_contains($text, "\r") ? substr_count($this->normalizeNewlines($text), "\n") : substr_count($text, "\n");
-    }
-
-    private function normalizeNewlines(string $text): string
-    {
-        return str_replace(["\r\n", "\r"], "\n", $text);
-    }
-
-    private function pushClosingToken(int $type, string $match): void
-    {
-        $leadingWhitespaceLength = \strlen($match) - \strlen(ltrim($match));
-        if ($leadingWhitespaceLength) {
-            $this->moveCursor(substr($match, 0, $leadingWhitespaceLength));
-        }
-
-        $this->pushToken($type);
-        $this->moveCursor(substr($match, $leadingWhitespaceLength));
-    }
-
-    private function getOperatorRegex(): string
-    {
-        $expressionParsers = [];
-        foreach ($this->env->getExpressionParsers() as $expressionParser) {
-            $expressionParsers = array_merge($expressionParsers, ExpressionParsers::getOperatorTokensFor($expressionParser));
-        }
-
-        $expressionParsers = array_combine($expressionParsers, array_map('strlen', $expressionParsers));
-        arsort($expressionParsers);
-
-        $regex = [];
-        foreach ($expressionParsers as $expressionParser => $length) {
-            // an operator that ends with a character must be followed by
-            // a whitespace, a parenthesis, an opening map [ or sequence {
-            $r = preg_quote($expressionParser, '/');
-            if (ctype_alpha($expressionParser[$length - 1])) {
-                $r .= '(?=[\s()\[{])';
-            }
-
-            // an operator that begins with a character must not have a dot or pipe before
-            if (ctype_alpha($expressionParser[0])) {
-                $r = '(?<![\.\|]\s|.[\.\|])'.$r;
-            }
-
-            // an operator with a space can be any amount of whitespaces
-            $r = preg_replace('/\s+/', '\s+', $r);
-
-            $regex[] = $r;
-        }
-
-        return '/'.implode('|', $regex).'/A';
-    }
-
-    private function pushState($state): void
-    {
-        $this->states[] = $this->state;
-        $this->state = $state;
-    }
-
-    private function popState(): void
-    {
-        if (0 === \count($this->states)) {
-            throw new \LogicException('Cannot pop state without a previous state.');
-        }
-
-        $this->state = array_pop($this->states);
-    }
-
-    private function checkBrackets(string $code): void
-    {
-        // opening bracket
-        if (\in_array($code, $this->openingBrackets, true)) {
-            $this->brackets[] = [$code, $this->lineno];
-        } elseif (\in_array($code, $this->closingBrackets, true)) {
-            // closing bracket
-            if (!$this->brackets) {
-                throw new SyntaxError(\sprintf('Unexpected "%s".', $code), $this->lineno, $this->source, columnno: $this->source->getColumn($this->cursor));
-            }
-
-            [$expect, $lineno] = array_pop($this->brackets);
-            if ($code !== str_replace($this->openingBrackets, $this->closingBrackets, $expect)) {
-                throw new SyntaxError(\sprintf('Unclosed "%s".', $expect), $lineno, $this->source);
-            }
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Loader/ArrayLoader.php b/generated/php/vendor/twig/twig/src/Loader/ArrayLoader.php
deleted file mode 100644
index 2bb54b7..0000000
--- a/generated/php/vendor/twig/twig/src/Loader/ArrayLoader.php
+++ /dev/null
@@ -1,75 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Loader;
-
-use Twig\Error\LoaderError;
-use Twig\Source;
-
-/**
- * Loads a template from an array.
- *
- * When using this loader with a cache mechanism, you should know that a new cache
- * key is generated each time a template content "changes" (the cache key being the
- * source code of the template). If you don't want to see your cache grows out of
- * control, you need to take care of clearing the old cache file by yourself.
- *
- * This loader should only be used for unit testing.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class ArrayLoader implements LoaderInterface
-{
-    /**
-     * @param array $templates An array of templates (keys are the names, and values are the source code)
-     */
-    public function __construct(
-        private array $templates = [],
-    ) {
-    }
-
-    public function setTemplate(string $name, string $template): void
-    {
-        $this->templates[$name] = $template;
-    }
-
-    public function getSourceContext(string $name): Source
-    {
-        if (!isset($this->templates[$name])) {
-            throw new LoaderError(\sprintf('Template "%s" is not defined.', $name));
-        }
-
-        return new Source($this->templates[$name], $name);
-    }
-
-    public function exists(string $name): bool
-    {
-        return isset($this->templates[$name]);
-    }
-
-    public function getCacheKey(string $name): string
-    {
-        if (!isset($this->templates[$name])) {
-            throw new LoaderError(\sprintf('Template "%s" is not defined.', $name));
-        }
-
-        return $name.':'.$this->templates[$name];
-    }
-
-    public function isFresh(string $name, int $time): bool
-    {
-        if (!isset($this->templates[$name])) {
-            throw new LoaderError(\sprintf('Template "%s" is not defined.', $name));
-        }
-
-        return true;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Loader/ChainLoader.php b/generated/php/vendor/twig/twig/src/Loader/ChainLoader.php
deleted file mode 100644
index 0859dcd..0000000
--- a/generated/php/vendor/twig/twig/src/Loader/ChainLoader.php
+++ /dev/null
@@ -1,132 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Loader;
-
-use Twig\Error\LoaderError;
-use Twig\Source;
-
-/**
- * Loads templates from other loaders.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class ChainLoader implements LoaderInterface
-{
-    /**
-     * @var array<string, bool>
-     */
-    private $hasSourceCache = [];
-
-    /**
-     * @param iterable<LoaderInterface> $loaders
-     */
-    public function __construct(
-        private iterable $loaders = [],
-    ) {
-    }
-
-    public function addLoader(LoaderInterface $loader): void
-    {
-        $current = $this->loaders;
-
-        $this->loaders = (static function () use ($current, $loader): \Generator {
-            yield from $current;
-            yield $loader;
-        })();
-
-        $this->hasSourceCache = [];
-    }
-
-    /**
-     * @return LoaderInterface[]
-     */
-    public function getLoaders(): array
-    {
-        if (!\is_array($this->loaders)) {
-            $this->loaders = iterator_to_array($this->loaders, false);
-        }
-
-        return $this->loaders;
-    }
-
-    public function getSourceContext(string $name): Source
-    {
-        $exceptions = [];
-
-        foreach ($this->getLoaders() as $loader) {
-            if (!$loader->exists($name)) {
-                continue;
-            }
-
-            try {
-                return $loader->getSourceContext($name);
-            } catch (LoaderError $e) {
-                $exceptions[] = $e->getMessage();
-            }
-        }
-
-        throw new LoaderError(\sprintf('Template "%s" is not defined%s.', $name, $exceptions ? ' ('.implode(', ', $exceptions).')' : ''));
-    }
-
-    public function exists(string $name): bool
-    {
-        if (isset($this->hasSourceCache[$name])) {
-            return $this->hasSourceCache[$name];
-        }
-
-        foreach ($this->getLoaders() as $loader) {
-            if ($loader->exists($name)) {
-                return $this->hasSourceCache[$name] = true;
-            }
-        }
-
-        return $this->hasSourceCache[$name] = false;
-    }
-
-    public function getCacheKey(string $name): string
-    {
-        $exceptions = [];
-
-        foreach ($this->getLoaders() as $loader) {
-            if (!$loader->exists($name)) {
-                continue;
-            }
-
-            try {
-                return $loader->getCacheKey($name);
-            } catch (LoaderError $e) {
-                $exceptions[] = $loader::class.': '.$e->getMessage();
-            }
-        }
-
-        throw new LoaderError(\sprintf('Template "%s" is not defined%s.', $name, $exceptions ? ' ('.implode(', ', $exceptions).')' : ''));
-    }
-
-    public function isFresh(string $name, int $time): bool
-    {
-        $exceptions = [];
-
-        foreach ($this->getLoaders() as $loader) {
-            if (!$loader->exists($name)) {
-                continue;
-            }
-
-            try {
-                return $loader->isFresh($name, $time);
-            } catch (LoaderError $e) {
-                $exceptions[] = $loader::class.': '.$e->getMessage();
-            }
-        }
-
-        throw new LoaderError(\sprintf('Template "%s" is not defined%s.', $name, $exceptions ? ' ('.implode(', ', $exceptions).')' : ''));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Loader/FilesystemLoader.php b/generated/php/vendor/twig/twig/src/Loader/FilesystemLoader.php
deleted file mode 100644
index 49f2b89..0000000
--- a/generated/php/vendor/twig/twig/src/Loader/FilesystemLoader.php
+++ /dev/null
@@ -1,290 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Loader;
-
-use Twig\Error\LoaderError;
-use Twig\Source;
-
-/**
- * Loads template from the filesystem.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class FilesystemLoader implements LoaderInterface
-{
-    /** Identifier of the main namespace. */
-    public const MAIN_NAMESPACE = '__main__';
-
-    /**
-     * @var array<string, list<string>>
-     */
-    protected $paths = [];
-    protected $cache = [];
-    protected $errorCache = [];
-
-    private $rootPath;
-
-    /**
-     * @param string|string[] $paths    A path or an array of paths where to look for templates
-     * @param string|null     $rootPath The root path common to all relative paths (null for getcwd())
-     */
-    public function __construct($paths = [], ?string $rootPath = null)
-    {
-        $this->rootPath = ($rootPath ?? getcwd()).\DIRECTORY_SEPARATOR;
-        if (null !== $rootPath && false !== ($realPath = realpath($rootPath))) {
-            $this->rootPath = $realPath.\DIRECTORY_SEPARATOR;
-        }
-
-        if ($paths) {
-            $this->setPaths($paths);
-        }
-    }
-
-    /**
-     * Returns the paths to the templates.
-     *
-     * @return list<string>
-     */
-    public function getPaths(string $namespace = self::MAIN_NAMESPACE): array
-    {
-        return $this->paths[$namespace] ?? [];
-    }
-
-    /**
-     * Returns the path namespaces.
-     *
-     * The main namespace is always defined.
-     *
-     * @return list<string>
-     */
-    public function getNamespaces(): array
-    {
-        return array_keys($this->paths);
-    }
-
-    /**
-     * @param string|string[] $paths A path or an array of paths where to look for templates
-     */
-    public function setPaths($paths, string $namespace = self::MAIN_NAMESPACE): void
-    {
-        if (!\is_array($paths)) {
-            $paths = [$paths];
-        }
-
-        $this->paths[$namespace] = [];
-        foreach ($paths as $path) {
-            $this->addPath($path, $namespace);
-        }
-    }
-
-    /**
-     * @throws LoaderError
-     */
-    public function addPath(string $path, string $namespace = self::MAIN_NAMESPACE): void
-    {
-        // invalidate the cache
-        $this->cache = $this->errorCache = [];
-
-        $checkPath = $this->isAbsolutePath($path) ? $path : $this->rootPath.$path;
-        if (!is_dir($checkPath)) {
-            throw new LoaderError(\sprintf('The "%s" directory does not exist ("%s").', $path, $checkPath));
-        }
-
-        $this->paths[$namespace][] = rtrim($path, '/\\');
-    }
-
-    /**
-     * @throws LoaderError
-     */
-    public function prependPath(string $path, string $namespace = self::MAIN_NAMESPACE): void
-    {
-        // invalidate the cache
-        $this->cache = $this->errorCache = [];
-
-        $checkPath = $this->isAbsolutePath($path) ? $path : $this->rootPath.$path;
-        if (!is_dir($checkPath)) {
-            throw new LoaderError(\sprintf('The "%s" directory does not exist ("%s").', $path, $checkPath));
-        }
-
-        $path = rtrim($path, '/\\');
-
-        if (!isset($this->paths[$namespace])) {
-            $this->paths[$namespace][] = $path;
-        } else {
-            array_unshift($this->paths[$namespace], $path);
-        }
-    }
-
-    public function getSourceContext(string $name): Source
-    {
-        if (null === $path = $this->findTemplate($name)) {
-            return new Source('', $name, '');
-        }
-
-        return new Source(file_get_contents($path), $name, $path);
-    }
-
-    public function getCacheKey(string $name): string
-    {
-        if (null === $path = $this->findTemplate($name)) {
-            return '';
-        }
-        $len = \strlen($this->rootPath);
-        if (0 === strncmp($this->rootPath, $path, $len)) {
-            return substr($path, $len);
-        }
-
-        return $path;
-    }
-
-    /**
-     * @return bool
-     */
-    public function exists(string $name)
-    {
-        $name = $this->normalizeName($name);
-
-        if (isset($this->cache[$name])) {
-            return true;
-        }
-
-        return null !== $this->findTemplate($name, false);
-    }
-
-    public function isFresh(string $name, int $time): bool
-    {
-        // false support to be removed in 3.0
-        if (null === $path = $this->findTemplate($name)) {
-            return false;
-        }
-
-        return filemtime($path) < $time;
-    }
-
-    /**
-     * @return string|null
-     */
-    protected function findTemplate(string $name, bool $throw = true)
-    {
-        $name = $this->normalizeName($name);
-
-        if (isset($this->cache[$name])) {
-            return $this->cache[$name];
-        }
-
-        if (isset($this->errorCache[$name])) {
-            if (!$throw) {
-                return null;
-            }
-
-            throw new LoaderError($this->errorCache[$name]);
-        }
-
-        try {
-            [$namespace, $shortname] = $this->parseName($name);
-
-            $this->validateName($shortname);
-        } catch (LoaderError $e) {
-            if (!$throw) {
-                return null;
-            }
-
-            throw $e;
-        }
-
-        if (!isset($this->paths[$namespace])) {
-            $this->errorCache[$name] = \sprintf('There are no registered paths for namespace "%s".', $namespace);
-
-            if (!$throw) {
-                return null;
-            }
-
-            throw new LoaderError($this->errorCache[$name]);
-        }
-
-        foreach ($this->paths[$namespace] as $path) {
-            if (!$this->isAbsolutePath($path)) {
-                $path = $this->rootPath.$path;
-            }
-
-            if (is_file($path.'/'.$shortname)) {
-                if (false !== $realpath = realpath($path.'/'.$shortname)) {
-                    return $this->cache[$name] = $realpath;
-                }
-
-                return $this->cache[$name] = $path.'/'.$shortname;
-            }
-        }
-
-        $this->errorCache[$name] = \sprintf('Unable to find template "%s" (looked into: %s).', $name, implode(', ', $this->paths[$namespace]));
-
-        if (!$throw) {
-            return null;
-        }
-
-        throw new LoaderError($this->errorCache[$name]);
-    }
-
-    private function normalizeName(string $name): string
-    {
-        return preg_replace('#/{2,}#', '/', str_replace('\\', '/', $name));
-    }
-
-    private function parseName(string $name, string $default = self::MAIN_NAMESPACE): array
-    {
-        if (isset($name[0]) && '@' == $name[0]) {
-            if (false === $pos = strpos($name, '/')) {
-                throw new LoaderError(\sprintf('Malformed namespaced template name "%s" (expecting "@namespace/template_name").', $name));
-            }
-
-            $namespace = substr($name, 1, $pos - 1);
-            $shortname = substr($name, $pos + 1);
-
-            return [$namespace, $shortname];
-        }
-
-        return [$default, $name];
-    }
-
-    private function validateName(string $name): void
-    {
-        if (str_contains($name, "\0")) {
-            throw new LoaderError('A template name cannot contain NUL bytes.');
-        }
-
-        $name = ltrim($name, '/');
-        $parts = explode('/', $name);
-        $level = 0;
-        foreach ($parts as $part) {
-            if ('..' === $part) {
-                --$level;
-            } elseif ('.' !== $part) {
-                ++$level;
-            }
-
-            if ($level < 0) {
-                throw new LoaderError(\sprintf('Looks like you try to load a template outside configured directories (%s).', $name));
-            }
-        }
-    }
-
-    private function isAbsolutePath(string $file): bool
-    {
-        return strspn($file, '/\\', 0, 1)
-            || (\strlen($file) > 3 && ctype_alpha($file[0])
-                && ':' === $file[1]
-                && strspn($file, '/\\', 2, 1)
-            )
-            || null !== parse_url($file, \PHP_URL_SCHEME)
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Loader/LoaderInterface.php b/generated/php/vendor/twig/twig/src/Loader/LoaderInterface.php
deleted file mode 100644
index fec7e85..0000000
--- a/generated/php/vendor/twig/twig/src/Loader/LoaderInterface.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Loader;
-
-use Twig\Error\LoaderError;
-use Twig\Source;
-
-/**
- * Interface all loaders must implement.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface LoaderInterface
-{
-    /**
-     * Returns the source context for a given template logical name.
-     *
-     * @throws LoaderError When $name is not found
-     */
-    public function getSourceContext(string $name): Source;
-
-    /**
-     * Gets the cache key to use for the cache for a given template name.
-     *
-     * @throws LoaderError When $name is not found
-     */
-    public function getCacheKey(string $name): string;
-
-    /**
-     * @param int $time Timestamp of the last modification time of the cached template
-     *
-     * @throws LoaderError When $name is not found
-     */
-    public function isFresh(string $name, int $time): bool;
-
-    /**
-     * @return bool
-     */
-    public function exists(string $name);
-}
diff --git a/generated/php/vendor/twig/twig/src/Markup.php b/generated/php/vendor/twig/twig/src/Markup.php
deleted file mode 100644
index 820f091..0000000
--- a/generated/php/vendor/twig/twig/src/Markup.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-/**
- * Marks a content as safe.
- *
- * Instances of this class (and existing subclasses) are trusted by the Twig
- * sandbox: method calls and property accesses on a Markup instance bypass the
- * SecurityPolicy method/property allowlists. This is by design: Markup
- * represents content that has already been deemed safe to output.
- *
- * This class is considered final as of Twig 3.28 and will be final in Twig
- * 4.0.
- *
- * @final since Twig 3.28
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class Markup implements \Countable, \JsonSerializable, \Stringable
-{
-    private $content;
-    private ?string $charset;
-
-    public function __construct($content, $charset)
-    {
-        $this->content = (string) $content;
-        $this->charset = $charset;
-    }
-
-    public function __toString(): string
-    {
-        return $this->content;
-    }
-
-    public function getCharset(): string
-    {
-        return $this->charset;
-    }
-
-    /**
-     * @return int
-     */
-    #[\ReturnTypeWillChange]
-    public function count()
-    {
-        return mb_strlen($this->content, $this->charset);
-    }
-
-    /**
-     * @return mixed
-     */
-    #[\ReturnTypeWillChange]
-    public function jsonSerialize()
-    {
-        return $this->content;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/AutoEscapeNode.php b/generated/php/vendor/twig/twig/src/Node/AutoEscapeNode.php
deleted file mode 100644
index ee80639..0000000
--- a/generated/php/vendor/twig/twig/src/Node/AutoEscapeNode.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents an autoescape node.
- *
- * The value is the escaping strategy (can be html, js, ...)
- *
- * The true value is equivalent to html.
- *
- * If autoescaping is disabled, then the value is false.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class AutoEscapeNode extends Node
-{
-    public function __construct($value, Node $body, int $lineno)
-    {
-        parent::__construct(['body' => $body], ['value' => $value], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->subcompile($this->getNode('body'));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/BlockNode.php b/generated/php/vendor/twig/twig/src/Node/BlockNode.php
deleted file mode 100644
index b4f939c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/BlockNode.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents a block node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class BlockNode extends Node
-{
-    public function __construct(string $name, Node $body, int $lineno)
-    {
-        parent::__construct(['body' => $body], ['name' => $name], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->addDebugInfo($this)
-            ->write("/**\n")
-            ->write(" * @return iterable<null|scalar|\Stringable>\n")
-            ->write(" */\n")
-            ->write(\sprintf("public function block_%s(array \$context, array \$blocks = []): iterable\n", $this->getAttribute('name')), "{\n")
-            ->indent()
-            ->write("\$macros = \$this->macros;\n")
-        ;
-
-        $compiler
-            ->subcompile($this->getNode('body'))
-            ->write("yield from [];\n")
-            ->outdent()
-            ->write("}\n\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/BlockReferenceNode.php b/generated/php/vendor/twig/twig/src/Node/BlockReferenceNode.php
deleted file mode 100644
index 7c313a0..0000000
--- a/generated/php/vendor/twig/twig/src/Node/BlockReferenceNode.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents a block call node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class BlockReferenceNode extends Node implements NodeOutputInterface
-{
-    public function __construct(string $name, int $lineno)
-    {
-        parent::__construct([], ['name' => $name], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->addDebugInfo($this)
-            ->write(\sprintf("yield from \$this->unwrap()->yieldBlock('%s', \$context, \$blocks);\n", $this->getAttribute('name')))
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/BodyNode.php b/generated/php/vendor/twig/twig/src/Node/BodyNode.php
deleted file mode 100644
index 08115b3..0000000
--- a/generated/php/vendor/twig/twig/src/Node/BodyNode.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-
-/**
- * Represents a body node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class BodyNode extends Node
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/CaptureNode.php b/generated/php/vendor/twig/twig/src/Node/CaptureNode.php
deleted file mode 100644
index 3b7f0b6..0000000
--- a/generated/php/vendor/twig/twig/src/Node/CaptureNode.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents a node for which we need to capture the output.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class CaptureNode extends Node
-{
-    public function __construct(Node $body, int $lineno)
-    {
-        parent::__construct(['body' => $body], ['raw' => false], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $useYield = $compiler->getEnvironment()->useYield();
-
-        if (!$this->getAttribute('raw')) {
-            $compiler->raw("('' === \$tmp = ");
-        }
-        $compiler
-            ->raw($useYield ? "implode('', iterator_to_array(" : '\\Twig\\Extension\\CoreExtension::captureOutput(')
-            ->raw("(function () use (&\$context, \$macros, \$blocks) {\n")
-            ->indent()
-            ->subcompile($this->getNode('body'))
-            ->write("yield from [];\n")
-            ->outdent()
-            ->write('})()')
-        ;
-        if ($useYield) {
-            $compiler->raw(', false))');
-        } else {
-            $compiler->raw(')');
-        }
-        if (!$this->getAttribute('raw')) {
-            $compiler->raw(") ? '' : new Markup(\$tmp, \$this->env->getCharset());");
-        } else {
-            $compiler->raw(';');
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/CheckSecurityCallNode.php b/generated/php/vendor/twig/twig/src/Node/CheckSecurityCallNode.php
deleted file mode 100644
index 0667bd0..0000000
--- a/generated/php/vendor/twig/twig/src/Node/CheckSecurityCallNode.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class CheckSecurityCallNode extends Node
-{
-    /**
-     * @return void
-     */
-    public function compile(Compiler $compiler)
-    {
-        $compiler
-            ->write("\$this->sandbox = \$this->extensions[SandboxExtension::class];\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/CheckSecurityNode.php b/generated/php/vendor/twig/twig/src/Node/CheckSecurityNode.php
deleted file mode 100644
index 92316ae..0000000
--- a/generated/php/vendor/twig/twig/src/Node/CheckSecurityNode.php
+++ /dev/null
@@ -1,109 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class CheckSecurityNode extends Node
-{
-    private $usedFilters;
-    private $usedTags;
-    private $usedFunctions;
-    private $usedTests;
-
-    /**
-     * @param array<string, int> $usedFilters
-     * @param array<string, int> $usedTags
-     * @param array<string, int> $usedFunctions
-     * @param array<string, int> $usedTests
-     */
-    public function __construct(array $usedFilters, array $usedTags, array $usedFunctions, array $usedTests = [])
-    {
-        if (\func_num_args() < 4) {
-            trigger_deprecation('twig/twig', '3.28', 'Not passing the "$usedTests" argument to "%s::__construct()" is deprecated; it will be required in 4.0.', static::class);
-        }
-
-        $this->usedFilters = $usedFilters;
-        $this->usedTags = $usedTags;
-        $this->usedFunctions = $usedFunctions;
-        $this->usedTests = $usedTests;
-
-        parent::__construct();
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->write("\n")
-            ->write("public function ensureSecurityChecked(): void\n")
-            ->write("{\n")
-            ->indent()
-            ->write("if (\$this->sandbox->isSandboxed(\$this->source)) {\n")
-            ->indent()
-            ->write("\$this->checkSecurity();\n")
-            ->outdent()
-            ->write("}\n")
-            ->outdent()
-            ->write("}\n")
-            ->write("\n")
-            ->write("public function checkSecurity()\n")
-            ->write("{\n")
-            ->indent()
-            ->write('static $tags = ')->repr(array_filter($this->usedTags))->raw(";\n")
-            ->write('static $filters = ')->repr(array_filter($this->usedFilters))->raw(";\n")
-            ->write('static $functions = ')->repr(array_filter($this->usedFunctions))->raw(";\n")
-            ->write('static $tests = ')->repr(array_filter($this->usedTests))->raw(";\n\n")
-            ->write("try {\n")
-            ->indent()
-            ->write("\$this->sandbox->checkSecurity(\n")
-            ->indent()
-            ->write('')->repr(array_keys($this->usedTags))->raw(",\n")
-            ->write('')->repr(array_keys($this->usedFilters))->raw(",\n")
-            ->write('')->repr(array_keys($this->usedFunctions))->raw(",\n")
-            ->write('')->repr(array_keys($this->usedTests))->raw(",\n")
-            ->write("\$this->source\n")
-            ->outdent()
-            ->write(");\n")
-            ->outdent()
-            ->write("} catch (SecurityError \$e) {\n")
-            ->indent()
-            ->write("\$e->setSourceContext(\$this->source);\n\n")
-            ->write("if (\$e instanceof SecurityNotAllowedTagError && isset(\$tags[\$e->getTagName()])) {\n")
-            ->indent()
-            ->write("\$e->setTemplateLine(\$tags[\$e->getTagName()]);\n")
-            ->outdent()
-            ->write("} elseif (\$e instanceof SecurityNotAllowedFilterError && isset(\$filters[\$e->getFilterName()])) {\n")
-            ->indent()
-            ->write("\$e->setTemplateLine(\$filters[\$e->getFilterName()]);\n")
-            ->outdent()
-            ->write("} elseif (\$e instanceof SecurityNotAllowedFunctionError && isset(\$functions[\$e->getFunctionName()])) {\n")
-            ->indent()
-            ->write("\$e->setTemplateLine(\$functions[\$e->getFunctionName()]);\n")
-            ->outdent()
-            ->write("} elseif (\$e instanceof SecurityNotAllowedTestError && isset(\$tests[\$e->getTestName()])) {\n")
-            ->indent()
-            ->write("\$e->setTemplateLine(\$tests[\$e->getTestName()]);\n")
-            ->outdent()
-            ->write("}\n\n")
-            ->write("throw \$e;\n")
-            ->outdent()
-            ->write("}\n\n")
-            ->outdent()
-            ->write("}\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/CheckToStringNode.php b/generated/php/vendor/twig/twig/src/Node/CheckToStringNode.php
deleted file mode 100644
index 11aec9c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/CheckToStringNode.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-
-/**
- * Checks if casting an expression to __toString() is allowed by the sandbox.
- *
- * For instance, when there is a simple Print statement, like {{ article }},
- * and if the sandbox is enabled, we need to check that the __toString()
- * method is allowed if 'article' is an object. The same goes for {{ article|upper }}
- * or {{ random(article) }}
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class CheckToStringNode extends AbstractExpression
-{
-    public function __construct(AbstractExpression $expr, bool $spread = false)
-    {
-        parent::__construct(['expr' => $expr], ['spread' => $spread], $expr->getTemplateLine());
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $expr = $this->getNode('expr');
-        $method = $this->getAttribute('spread') ? 'ensureSpreadAllowed' : 'ensureToStringAllowed';
-        $compiler
-            ->raw('$this->sandbox->'.$method.'(')
-            ->subcompile($expr)
-            ->raw(', ')
-            ->repr($expr->getTemplateLine())
-            ->raw(', $this->source)')
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/CoercesChildrenToStringInterface.php b/generated/php/vendor/twig/twig/src/Node/CoercesChildrenToStringInterface.php
deleted file mode 100644
index e213d1b..0000000
--- a/generated/php/vendor/twig/twig/src/Node/CoercesChildrenToStringInterface.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Node\Expression\OperatorEscapeInterface;
-
-/**
- * Implemented by nodes that implicitly coerce one or more of their child
- * nodes to string at runtime (PHP string casts, regex matching, comparisons,
- * range bounds, template-name resolution by the loader, etc.).
- *
- * The sandbox node visitor wraps the listed children with a CheckToStringNode
- * so that an implicit `__toString()` call goes through the sandbox policy
- * check, independently of where this node's result is used.
- *
- * This is distinct from {@see OperatorEscapeInterface}, which describes
- * operands whose value becomes this expression's value (passthrough operators
- * like ternaries) and is consumed by the escaper.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface CoercesChildrenToStringInterface
-{
-    /**
-     * Returns the names of the child nodes that will be coerced to
-     * string when this node is evaluated.
-     *
-     * @return string[]
-     */
-    public function getStringCoercedChildNames(): array;
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/ConfigNode.php b/generated/php/vendor/twig/twig/src/Node/ConfigNode.php
deleted file mode 100644
index 758e057..0000000
--- a/generated/php/vendor/twig/twig/src/Node/ConfigNode.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-
-/**
- * Represents a node that has global side effects but does not generate template code.
- *
- * Such nodes must be at the root level of the body of a template.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-final class ConfigNode extends Node
-{
-    public function __construct(int $lineno)
-    {
-        parent::__construct([], [], $lineno);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/DeprecatedNode.php b/generated/php/vendor/twig/twig/src/Node/DeprecatedNode.php
deleted file mode 100644
index fea8d35..0000000
--- a/generated/php/vendor/twig/twig/src/Node/DeprecatedNode.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-
-/**
- * Represents a deprecated node.
- *
- * @author Yonel Ceruto <yonelceruto@gmail.com>
- */
-#[YieldReady]
-class DeprecatedNode extends Node implements CoercesChildrenToStringInterface
-{
-    public function __construct(AbstractExpression $expr, int $lineno)
-    {
-        parent::__construct(['expr' => $expr], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->addDebugInfo($this);
-
-        $expr = $this->getNode('expr');
-
-        if (!$expr instanceof ConstantExpression) {
-            $varName = $compiler->getVarName();
-            $compiler
-                ->write(\sprintf('$%s = ', $varName))
-                ->subcompile($expr)
-                ->raw(";\n")
-            ;
-        }
-
-        $compiler->write('trigger_deprecation(');
-        if ($this->hasNode('package')) {
-            $compiler->subcompile($this->getNode('package'));
-        } else {
-            $compiler->raw("''");
-        }
-        $compiler->raw(', ');
-        if ($this->hasNode('version')) {
-            $compiler->subcompile($this->getNode('version'));
-        } else {
-            $compiler->raw("''");
-        }
-        $compiler->raw(', ');
-
-        if ($expr instanceof ConstantExpression) {
-            $compiler->subcompile($expr);
-        } else {
-            $compiler->write(\sprintf('$%s', $varName));
-        }
-
-        $compiler
-            ->raw('.')
-            ->string(\sprintf(' in "%s" at line %d.', $this->getTemplateName(), $this->getTemplateLine()))
-            ->raw(");\n")
-        ;
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // the message is concatenated with `.`, and `package` / `version` are typed `string` on trigger_deprecation()
-        $names = ['expr'];
-        if ($this->hasNode('package')) {
-            $names[] = 'package';
-        }
-        if ($this->hasNode('version')) {
-            $names[] = 'version';
-        }
-
-        return $names;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/DoNode.php b/generated/php/vendor/twig/twig/src/Node/DoNode.php
deleted file mode 100644
index 1593fd0..0000000
--- a/generated/php/vendor/twig/twig/src/Node/DoNode.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-
-/**
- * Represents a do node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class DoNode extends Node
-{
-    public function __construct(AbstractExpression $expr, int $lineno)
-    {
-        parent::__construct(['expr' => $expr], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->addDebugInfo($this)
-            ->write('')
-            ->subcompile($this->getNode('expr'))
-            ->raw(";\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/EmbedNode.php b/generated/php/vendor/twig/twig/src/Node/EmbedNode.php
deleted file mode 100644
index 2de39eb..0000000
--- a/generated/php/vendor/twig/twig/src/Node/EmbedNode.php
+++ /dev/null
@@ -1,54 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-
-/**
- * Represents an embed node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class EmbedNode extends IncludeNode
-{
-    // we don't inject the module to avoid node visitors to traverse it twice (as it will be already visited in the main module)
-    public function __construct(string $name, int $index, ?AbstractExpression $variables, bool $only, bool $ignoreMissing, int $lineno)
-    {
-        parent::__construct(new ConstantExpression('not_used', $lineno), $variables, $only, $ignoreMissing, $lineno);
-
-        $this->setAttribute('name', $name);
-        $this->setAttribute('index', $index);
-    }
-
-    protected function addGetTemplate(Compiler $compiler, string $template = ''): void
-    {
-        $compiler
-            ->raw('$this->load(')
-            ->string($this->getAttribute('name'))
-            ->raw(', ')
-            ->repr($this->getTemplateLine())
-            ->raw(', ')
-            ->repr($this->getAttribute('index'))
-            ->raw(')')
-        ;
-        if ($this->getAttribute('ignore_missing')) {
-            $compiler
-                ->raw(";\n")
-                ->write(\sprintf("\$%s->getParent(\$context);\n", $template))
-            ;
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/EmptyNode.php b/generated/php/vendor/twig/twig/src/Node/EmptyNode.php
deleted file mode 100644
index fd4717f..0000000
--- a/generated/php/vendor/twig/twig/src/Node/EmptyNode.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-
-/**
- * Represents an empty node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-final class EmptyNode extends Node
-{
-    public function __construct(int $lineno = 0)
-    {
-        parent::__construct([], [], $lineno);
-    }
-
-    public function setNode(string $name, Node $node): void
-    {
-        throw new \LogicException('EmptyNode cannot have children.');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/AbstractExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/AbstractExpression.php
deleted file mode 100644
index 22d8617..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/AbstractExpression.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Node\Node;
-
-/**
- * Abstract class for all nodes that represents an expression.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-abstract class AbstractExpression extends Node
-{
-    public function isGenerator(): bool
-    {
-        return $this->hasAttribute('is_generator') && $this->getAttribute('is_generator');
-    }
-
-    /**
-     * @return static
-     */
-    public function setExplicitParentheses(): self
-    {
-        $this->setAttribute('with_parentheses', true);
-
-        return $this;
-    }
-
-    public function hasExplicitParentheses(): bool
-    {
-        return $this->hasAttribute('with_parentheses') && $this->getAttribute('with_parentheses');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ArrayExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/ArrayExpression.php
deleted file mode 100644
index 189e02f..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ArrayExpression.php
+++ /dev/null
@@ -1,165 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\Unary\SpreadUnary;
-use Twig\Node\Expression\Unary\StringCastUnary;
-
-class ArrayExpression extends AbstractExpression implements SupportDefinedTestInterface, ReturnArrayInterface, CoercesChildrenToStringInterface
-{
-    use SupportDefinedTestTrait;
-
-    private $index;
-
-    public function __construct(array $elements, int $lineno)
-    {
-        parent::__construct($elements, [], $lineno);
-
-        $this->index = -1;
-        foreach ($this->getKeyValuePairs() as $pair) {
-            if ($pair['key'] instanceof ConstantExpression && ctype_digit((string) $pair['key']->getAttribute('value')) && $pair['key']->getAttribute('value') > $this->index) {
-                $this->index = $pair['key']->getAttribute('value');
-            }
-        }
-    }
-
-    public function getKeyValuePairs(): array
-    {
-        $pairs = [];
-        foreach (array_chunk($this->nodes, 2) as $pair) {
-            $pairs[] = [
-                'key' => $pair[0],
-                'value' => $pair[1],
-            ];
-        }
-
-        return $pairs;
-    }
-
-    public function hasElement(AbstractExpression $key): bool
-    {
-        foreach ($this->getKeyValuePairs() as $pair) {
-            // we compare the string representation of the keys
-            // to avoid comparing the line numbers which are not relevant here.
-            if ((string) $key === (string) $pair['key']) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    /**
-     * Checks if the array is a sequence (keys are sequential integers starting from 0).
-     *
-     * @internal
-     */
-    public function isSequence(): bool
-    {
-        foreach ($this->getKeyValuePairs() as $i => $pair) {
-            $key = $pair['key'];
-            if ($key instanceof TempNameExpression) {
-                $keyValue = $key->getAttribute('name');
-            } elseif ($key instanceof ConstantExpression) {
-                $keyValue = $key->getAttribute('value');
-            } else {
-                return false;
-            }
-
-            if ($keyValue !== $i) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
-    public function addElement(AbstractExpression $value, ?AbstractExpression $key = null): void
-    {
-        if (null === $key) {
-            $key = new ConstantExpression(++$this->index, $value->getTemplateLine());
-        }
-
-        array_push($this->nodes, $key, $value);
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // dynamic mapping keys (computed at runtime) are coerced to string;
-        // static keys (constants or sequence indexes) are emitted as PHP
-        // literals by compile() and never trigger a __toString() call
-        $names = [];
-        foreach (array_chunk($this->nodes, 2) as $i => $pair) {
-            $key = $pair[0];
-            if ($key instanceof ConstantExpression || $key instanceof TempNameExpression) {
-                continue;
-            }
-
-            $names[] = (string) ($i * 2);
-        }
-
-        return $names;
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        if ($this->definedTest) {
-            $compiler->repr(true);
-
-            return;
-        }
-
-        // Check for empty expressions which are only allowed in destructuring
-        foreach ($this->getKeyValuePairs() as $pair) {
-            if ($pair['value'] instanceof EmptyExpression) {
-                throw new SyntaxError('Empty array elements are only allowed in destructuring assignments.', $pair['value']->getTemplateLine(), $this->getSourceContext());
-            }
-        }
-
-        $compiler->raw('[');
-        $isSequence = true;
-        foreach ($this->getKeyValuePairs() as $i => $pair) {
-            if (0 !== $i) {
-                $compiler->raw(', ');
-            }
-
-            $key = null;
-            if ($pair['key'] instanceof TempNameExpression) {
-                $key = $pair['key']->getAttribute('name');
-                $pair['key'] = new ConstantExpression($key, $pair['key']->getTemplateLine());
-            } elseif ($pair['key'] instanceof ConstantExpression) {
-                $key = $pair['key']->getAttribute('value');
-            } else {
-                // dynamic key: cast to string so PHP accepts it as an array offset
-                // (the sandbox visitor has already wrapped it with a __toString policy check)
-                $pair['key'] = new StringCastUnary($pair['key'], $pair['key']->getTemplateLine());
-            }
-
-            if ($key !== $i) {
-                $isSequence = false;
-            }
-
-            if (!$isSequence && !$pair['value'] instanceof SpreadUnary) {
-                $compiler
-                    ->subcompile($pair['key'])
-                    ->raw(' => ')
-                ;
-            }
-
-            $compiler->subcompile($pair['value']);
-        }
-        $compiler->raw(']');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ArrowFunctionExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/ArrowFunctionExpression.php
deleted file mode 100644
index 9156f7c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ArrowFunctionExpression.php
+++ /dev/null
@@ -1,63 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\Variable\AssignContextVariable;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Node;
-
-/**
- * Represents an arrow function.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class ArrowFunctionExpression extends AbstractExpression
-{
-    public function __construct(AbstractExpression $expr, Node $names, $lineno)
-    {
-        if ($names instanceof ContextVariable) {
-            $names = new ListExpression([new AssignContextVariable($names->getAttribute('name'), $names->getTemplateLine())], $lineno);
-        }
-
-        if (!$names instanceof ListExpression) {
-            throw new SyntaxError('The arrow function argument must be a list of variables or a single variable.', $names->getTemplateLine(), $names->getSourceContext());
-        }
-
-        parent::__construct(['expr' => $expr, 'names' => $names], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->addDebugInfo($this)
-            ->raw('function (')
-            ->subcompile($this->getNode('names'))
-            ->raw(') use ($context, $macros) { ')
-        ;
-        foreach ($this->getNode('names') as $name) {
-            $compiler
-                ->raw('$context["')
-                ->raw($name->getAttribute('name'))
-                ->raw('"] = $__')
-                ->raw($name->getAttribute('name'))
-                ->raw('__; ')
-            ;
-        }
-        $compiler
-            ->raw('return ')
-            ->subcompile($this->getNode('expr'))
-            ->raw('; }')
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/AssignNameExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/AssignNameExpression.php
deleted file mode 100644
index 9a7f0f9..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/AssignNameExpression.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\Variable\AssignContextVariable;
-use Twig\Node\Expression\Variable\ContextVariable;
-
-class AssignNameExpression extends ContextVariable
-{
-    public function __construct(string $name, int $lineno)
-    {
-        if (self::class === static::class) {
-            trigger_deprecation('twig/twig', '3.15', 'The "%s" class is deprecated, use "%s" instead.', self::class, AssignContextVariable::class);
-        }
-
-        // All names supported by ExpressionParser::parsePrimaryExpression() should be excluded
-        if (\in_array(strtolower($name), ['true', 'false', 'none', 'null'], true)) {
-            throw new SyntaxError(\sprintf('You cannot assign a value to "%s".', $name), $lineno);
-        }
-
-        parent::__construct($name, $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('$context[')
-            ->string($this->getAttribute('name'))
-            ->raw(']')
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/AbstractBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/AbstractBinary.php
deleted file mode 100644
index b4bf666..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/AbstractBinary.php
+++ /dev/null
@@ -1,53 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Node;
-
-abstract class AbstractBinary extends AbstractExpression implements BinaryInterface
-{
-    /**
-     * @param AbstractExpression $left
-     * @param AbstractExpression $right
-     */
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        if (!$left instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "left" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $left::class);
-        }
-        if (!$right instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "right" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $right::class);
-        }
-
-        parent::__construct(['left' => $left, 'right' => $right], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('(')
-            ->subcompile($this->getNode('left'))
-            ->raw(' ')
-        ;
-        $this->operator($compiler);
-        $compiler
-            ->raw(' ')
-            ->subcompile($this->getNode('right'))
-            ->raw(')')
-        ;
-    }
-
-    abstract public function operator(Compiler $compiler): Compiler;
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/AddBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/AddBinary.php
deleted file mode 100644
index 42377ae..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/AddBinary.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class AddBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('+');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/AndBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/AndBinary.php
deleted file mode 100644
index 7ccef17..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/AndBinary.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-use Twig\Node\Expression\Test\TrueTest;
-use Twig\Node\Node;
-
-class AndBinary extends AbstractBinary implements ReturnBoolInterface
-{
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        parent::__construct(TrueTest::wrap($left), TrueTest::wrap($right), $lineno);
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('&&');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BinaryInterface.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BinaryInterface.php
deleted file mode 100644
index eeeb2eb..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BinaryInterface.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Node\Expression\AbstractExpression;
-
-/**
- * @internal
- */
-interface BinaryInterface
-{
-    public function __construct(AbstractExpression $left, AbstractExpression $right, int $lineno);
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BitwiseAndBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BitwiseAndBinary.php
deleted file mode 100644
index 1c26f98..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BitwiseAndBinary.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class BitwiseAndBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('&');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BitwiseOrBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BitwiseOrBinary.php
deleted file mode 100644
index ec17e22..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BitwiseOrBinary.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class BitwiseOrBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('|');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BitwiseXorBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BitwiseXorBinary.php
deleted file mode 100644
index e6432a7..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/BitwiseXorBinary.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class BitwiseXorBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('^');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ConcatBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ConcatBinary.php
deleted file mode 100644
index e4ec135..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ConcatBinary.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnStringInterface;
-
-class ConcatBinary extends AbstractBinary implements ReturnStringInterface, CoercesChildrenToStringInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('.');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/DivBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/DivBinary.php
deleted file mode 100644
index 11c061e..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/DivBinary.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class DivBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('/');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ElvisBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ElvisBinary.php
deleted file mode 100644
index 1340a4f..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ElvisBinary.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\OperatorEscapeInterface;
-use Twig\Node\Expression\Test\TrueTest;
-use Twig\Node\Node;
-
-final class ElvisBinary extends AbstractBinary implements OperatorEscapeInterface
-{
-    /**
-     * @param AbstractExpression $left
-     * @param AbstractExpression $right
-     */
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        parent::__construct($left, $right, $lineno);
-
-        $this->setNode('test', TrueTest::wrap(clone $left));
-        $left->setAttribute('always_defined', true);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('((')
-            ->subcompile($this->getNode('test'))
-            ->raw(') ? (')
-            ->subcompile($this->getNode('left'))
-            ->raw(') : (')
-            ->subcompile($this->getNode('right'))
-            ->raw('))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('?:');
-    }
-
-    public function getOperandNamesToEscape(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/EndsWithBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/EndsWithBinary.php
deleted file mode 100644
index e689d66..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/EndsWithBinary.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class EndsWithBinary extends AbstractBinary implements ReturnBoolInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        $left = $compiler->getVarName();
-        $right = $compiler->getVarName();
-        $compiler
-            ->raw(\sprintf('(is_string($%s = ', $left))
-            ->subcompile($this->getNode('left'))
-            ->raw(\sprintf(') && is_string($%s = ', $right))
-            ->subcompile($this->getNode('right'))
-            ->raw(\sprintf(') && str_ends_with($%1$s, $%2$s))', $left, $right))
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/EqualBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/EqualBinary.php
deleted file mode 100644
index d438e2b..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/EqualBinary.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class EqualBinary extends AbstractBinary implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        if (\PHP_VERSION_ID >= 80000) {
-            parent::compile($compiler);
-
-            return;
-        }
-
-        $compiler
-            ->raw('(0 === CoreExtension::compare(')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw('))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('==');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/FloorDivBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/FloorDivBinary.php
deleted file mode 100644
index a60ab3b..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/FloorDivBinary.php
+++ /dev/null
@@ -1,30 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class FloorDivBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->raw('(int) floor(');
-        parent::compile($compiler);
-        $compiler->raw(')');
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('/');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/GreaterBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/GreaterBinary.php
deleted file mode 100644
index 318c301..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/GreaterBinary.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class GreaterBinary extends AbstractBinary implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        if (\PHP_VERSION_ID >= 80000) {
-            parent::compile($compiler);
-
-            return;
-        }
-
-        $compiler
-            ->raw('(1 === CoreExtension::compare(')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw('))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('>');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/GreaterEqualBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/GreaterEqualBinary.php
deleted file mode 100644
index 2dacd9f..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/GreaterEqualBinary.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class GreaterEqualBinary extends AbstractBinary implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        if (\PHP_VERSION_ID >= 80000) {
-            parent::compile($compiler);
-
-            return;
-        }
-
-        $compiler
-            ->raw('(0 <= CoreExtension::compare(')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw('))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('>=');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/HasEveryBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/HasEveryBinary.php
deleted file mode 100644
index 9b10711..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/HasEveryBinary.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class HasEveryBinary extends AbstractBinary implements ReturnBoolInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('CoreExtension::arrayEvery($this->env, ')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw(', $this->env->hasExtension(\Twig\Extension\SandboxExtension::class) && $this->env->getExtension(\Twig\Extension\SandboxExtension::class)->isSandboxed($this->source))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/HasSomeBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/HasSomeBinary.php
deleted file mode 100644
index 86665a3..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/HasSomeBinary.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class HasSomeBinary extends AbstractBinary implements ReturnBoolInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('CoreExtension::arraySome($this->env, ')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw(', $this->env->hasExtension(\Twig\Extension\SandboxExtension::class) && $this->env->getExtension(\Twig\Extension\SandboxExtension::class)->isSandboxed($this->source))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/InBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/InBinary.php
deleted file mode 100644
index 2f11a54..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/InBinary.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class InBinary extends AbstractBinary implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('CoreExtension::inFilter(')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw(')')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('in');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/LessBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/LessBinary.php
deleted file mode 100644
index 3bb6291..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/LessBinary.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class LessBinary extends AbstractBinary implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        if (\PHP_VERSION_ID >= 80000) {
-            parent::compile($compiler);
-
-            return;
-        }
-
-        $compiler
-            ->raw('(-1 === CoreExtension::compare(')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw('))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('<');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/LessEqualBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/LessEqualBinary.php
deleted file mode 100644
index 3021745..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/LessEqualBinary.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class LessEqualBinary extends AbstractBinary implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        if (\PHP_VERSION_ID >= 80000) {
-            parent::compile($compiler);
-
-            return;
-        }
-
-        $compiler
-            ->raw('(0 >= CoreExtension::compare(')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw('))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('<=');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/MatchesBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/MatchesBinary.php
deleted file mode 100644
index 5dd3dbe..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/MatchesBinary.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\ReturnBoolInterface;
-use Twig\Node\Node;
-
-class MatchesBinary extends AbstractBinary implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        if (!$left instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.24', 'Passing a "%s" instance to "%s()" first argument is deprecated, pass an "AbstractExpression" instance instead.', $left::class, __METHOD__);
-        }
-        if (!$right instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.24', 'Passing a "%s" instance to "%s()" second argument is deprecated, pass an "AbstractExpression" instance instead.', $right::class, __METHOD__);
-        }
-
-        if ($right instanceof ConstantExpression) {
-            $regexp = $right->getAttribute('value');
-            set_error_handler(static fn ($t, $m) => throw new SyntaxError(\sprintf('Regexp "%s" passed to "matches" is not valid: %s.', $regexp, substr($m, 14)), $lineno));
-            try {
-                preg_match($regexp, '');
-            } finally {
-                restore_error_handler();
-            }
-        }
-
-        parent::__construct($left, $right, $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('CoreExtension::matches(')
-            ->subcompile($this->getNode('right'))
-            ->raw(', ')
-            ->subcompile($this->getNode('left'))
-            ->raw(')')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ModBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ModBinary.php
deleted file mode 100644
index aef48f3..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ModBinary.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class ModBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('%');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/MulBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/MulBinary.php
deleted file mode 100644
index beb881a..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/MulBinary.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class MulBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('*');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NotEqualBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NotEqualBinary.php
deleted file mode 100644
index c63e325..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NotEqualBinary.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class NotEqualBinary extends AbstractBinary implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        if (\PHP_VERSION_ID >= 80000) {
-            parent::compile($compiler);
-
-            return;
-        }
-
-        $compiler
-            ->raw('(0 !== CoreExtension::compare(')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw('))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('!=');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NotInBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NotInBinary.php
deleted file mode 100644
index f46c88f..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NotInBinary.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class NotInBinary extends AbstractBinary implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('!CoreExtension::inFilter(')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw(')')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('not in');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NotSameAsBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NotSameAsBinary.php
deleted file mode 100644
index ed28c19..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NotSameAsBinary.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class NotSameAsBinary extends AbstractBinary implements ReturnBoolInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('!==');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NullCoalesceBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NullCoalesceBinary.php
deleted file mode 100644
index ffba62d..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/NullCoalesceBinary.php
+++ /dev/null
@@ -1,71 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\EmptyNode;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\BlockReferenceExpression;
-use Twig\Node\Expression\OperatorEscapeInterface;
-use Twig\Node\Expression\Test\DefinedTest;
-use Twig\Node\Expression\Test\NullTest;
-use Twig\Node\Expression\Unary\NotUnary;
-use Twig\Node\Node;
-use Twig\TwigTest;
-
-final class NullCoalesceBinary extends AbstractBinary implements OperatorEscapeInterface
-{
-    /**
-     * @param AbstractExpression $left
-     * @param AbstractExpression $right
-     */
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        parent::__construct($left, $right, $lineno);
-
-        $test = new DefinedTest(clone $left, new TwigTest('defined', null, ['always_allowed_in_sandbox' => true]), new EmptyNode(), $left->getTemplateLine());
-        // for "block()", we don't need the null test as the return value is always a string
-        if (!$left instanceof BlockReferenceExpression) {
-            $test = new AndBinary(
-                $test,
-                new NotUnary(new NullTest($left, new TwigTest('null', null, ['always_allowed_in_sandbox' => true]), new EmptyNode(), $left->getTemplateLine()), $left->getTemplateLine()),
-                $left->getTemplateLine(),
-            );
-        }
-
-        $left->setAttribute('always_defined', true);
-        $this->setNode('test', $test);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('((')
-            ->subcompile($this->getNode('test'))
-            ->raw(') ? (')
-            ->subcompile($this->getNode('left'))
-            ->raw(') : (')
-            ->subcompile($this->getNode('right'))
-            ->raw('))')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('??');
-    }
-
-    public function getOperandNamesToEscape(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ObjectDestructuringSetBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ObjectDestructuringSetBinary.php
deleted file mode 100644
index 8c5df6a..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/ObjectDestructuringSetBinary.php
+++ /dev/null
@@ -1,77 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Extension\SandboxExtension;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Node;
-
-/**
- * @internal
- */
-class ObjectDestructuringSetBinary extends AbstractBinary
-{
-    /** @var list<array{property: string, variable: string}> */
-    private array $mappings = [];
-
-    /**
-     * @param ArrayExpression    $left  The array expression containing object/mapping destructuring properties
-     * @param AbstractExpression $right The expression providing values for assignment
-     */
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        if (!$left instanceof ArrayExpression) {
-            throw new \LogicException('Left side must be ArrayExpression for object/mapping destructuring.');
-        }
-        foreach ($left->getKeyValuePairs() as $pair) {
-            if (!$pair['value'] instanceof ContextVariable) {
-                throw new SyntaxError(\sprintf('Cannot assign to "%s", only variables can be assigned in object/mapping destructuring.', $pair['value']::class), $lineno);
-            }
-
-            $this->mappings[] = [
-                'property' => $pair['key']->getAttribute('value'),
-                'variable' => $pair['value']->getAttribute('name'),
-            ];
-        }
-
-        parent::__construct($left, $right, $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->addDebugInfo($this);
-        $compiler->raw('[');
-        foreach ($this->mappings as $i => $mapping) {
-            if ($i) {
-                $compiler->raw(', ');
-            }
-            $compiler->raw('$context[')->repr($mapping['variable'])->raw(']');
-        }
-        $compiler->raw('] = [');
-        foreach ($this->mappings as $i => $mapping) {
-            if ($i) {
-                $compiler->raw(', ');
-            }
-            $compiler->raw('CoreExtension::getAttribute($this->env, $this->source, ')->subcompile($this->getNode('right'))->raw(', ')->repr($mapping['property'])->raw(', [], \\Twig\\Template::ANY_CALL, false, false, ')->repr($compiler->getEnvironment()->hasExtension(SandboxExtension::class))->raw(', ')->repr($this->getNode('right')->getTemplateLine())->raw(')');
-        }
-        $compiler->raw(']');
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('=');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/OrBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/OrBinary.php
deleted file mode 100644
index cacffda..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/OrBinary.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-use Twig\Node\Expression\Test\TrueTest;
-use Twig\Node\Node;
-
-class OrBinary extends AbstractBinary implements ReturnBoolInterface
-{
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        parent::__construct(TrueTest::wrap($left), TrueTest::wrap($right), $lineno);
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('||');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/PowerBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/PowerBinary.php
deleted file mode 100644
index 5325e8e..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/PowerBinary.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class PowerBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('**');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/RangeBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/RangeBinary.php
deleted file mode 100644
index 2d0d2eb..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/RangeBinary.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnArrayInterface;
-
-class RangeBinary extends AbstractBinary implements ReturnArrayInterface, CoercesChildrenToStringInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('range(')
-            ->subcompile($this->getNode('left'))
-            ->raw(', ')
-            ->subcompile($this->getNode('right'))
-            ->raw(')')
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('..');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SameAsBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SameAsBinary.php
deleted file mode 100644
index b08a190..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SameAsBinary.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class SameAsBinary extends AbstractBinary implements ReturnBoolInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('===');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SequenceDestructuringSetBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SequenceDestructuringSetBinary.php
deleted file mode 100644
index a6a873c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SequenceDestructuringSetBinary.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\EmptyExpression;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Node;
-
-/**
- * @internal
- */
-class SequenceDestructuringSetBinary extends AbstractBinary
-{
-    private array $variables = [];
-
-    /**
-     * @param ArrayExpression    $left  The array expression containing variables to assign to
-     * @param AbstractExpression $right The expression providing values for assignment
-     */
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        foreach ($left->getKeyValuePairs() as $pair) {
-            if ($pair['value'] instanceof EmptyExpression) {
-                $this->variables[] = null;
-            } elseif ($pair['value'] instanceof ContextVariable) {
-                $this->variables[] = $pair['value']->getAttribute('name');
-            } else {
-                throw new SyntaxError(\sprintf('Cannot assign to "%s", only variables can be assigned in sequence destructuring.', $pair['value']::class), $lineno);
-            }
-        }
-
-        parent::__construct($left, $right, $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->addDebugInfo($this);
-        $compiler->raw('[');
-        foreach ($this->variables as $i => $name) {
-            if ($i) {
-                $compiler->raw(', ');
-            }
-            if (null !== $name) {
-                $compiler->raw('$context[')->repr($name)->raw(']');
-            }
-        }
-        $compiler->raw('] = array_pad(')->subcompile($this->getNode('right'))->raw(', ')->repr(\count($this->variables))->raw(', null)');
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('=');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SetBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SetBinary.php
deleted file mode 100644
index 7b34432..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SetBinary.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\Variable\AssignContextVariable;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Node;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class SetBinary extends AbstractBinary
-{
-    /**
-     * @param ContextVariable    $left
-     * @param AbstractExpression $right
-     */
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        $name = $left->getAttribute('name');
-        if (!\is_string($name)) {
-            throw new \LogicException('The "name" attribute must be a string.');
-        }
-        $left = new AssignContextVariable($name, $left->getTemplateLine());
-
-        parent::__construct($left, $right, $lineno);
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('=');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SpaceshipBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SpaceshipBinary.php
deleted file mode 100644
index 2fb5ddf..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SpaceshipBinary.php
+++ /dev/null
@@ -1,29 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class SpaceshipBinary extends AbstractBinary implements ReturnNumberInterface, CoercesChildrenToStringInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('<=>');
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/StartsWithBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/StartsWithBinary.php
deleted file mode 100644
index ef2fc95..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/StartsWithBinary.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-
-class StartsWithBinary extends AbstractBinary implements ReturnBoolInterface
-{
-    public function compile(Compiler $compiler): void
-    {
-        $left = $compiler->getVarName();
-        $right = $compiler->getVarName();
-        $compiler
-            ->raw(\sprintf('(is_string($%s = ', $left))
-            ->subcompile($this->getNode('left'))
-            ->raw(\sprintf(') && is_string($%s = ', $right))
-            ->subcompile($this->getNode('right'))
-            ->raw(\sprintf(') && str_starts_with($%1$s, $%2$s))', $left, $right))
-        ;
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SubBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SubBinary.php
deleted file mode 100644
index 10663f5..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/SubBinary.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnNumberInterface;
-
-class SubBinary extends AbstractBinary implements ReturnNumberInterface
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('-');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/XorBinary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Binary/XorBinary.php
deleted file mode 100644
index 0e9173a..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Binary/XorBinary.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Binary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-use Twig\Node\Expression\Test\TrueTest;
-use Twig\Node\Node;
-
-class XorBinary extends AbstractBinary implements ReturnBoolInterface
-{
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        parent::__construct(TrueTest::wrap($left), TrueTest::wrap($right), $lineno);
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('xor');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/BlockReferenceExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/BlockReferenceExpression.php
deleted file mode 100644
index 657a637..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/BlockReferenceExpression.php
+++ /dev/null
@@ -1,102 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Node;
-
-/**
- * Represents a block call node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class BlockReferenceExpression extends AbstractExpression implements SupportDefinedTestInterface, CoercesChildrenToStringInterface
-{
-    use SupportDefinedTestDeprecationTrait;
-    use SupportDefinedTestTrait;
-
-    /**
-     * @param AbstractExpression $name
-     */
-    public function __construct(Node $name, ?Node $template, int $lineno)
-    {
-        if (!$name instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "node" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $name::class);
-        }
-
-        $nodes = ['name' => $name];
-        if (null !== $template) {
-            $nodes['template'] = $template;
-        }
-
-        parent::__construct($nodes, ['output' => false], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        if ($this->definedTest) {
-            $this->compileTemplateCall($compiler, 'hasBlock');
-        } else {
-            if ($this->getAttribute('output')) {
-                $compiler->addDebugInfo($this);
-
-                $compiler->write('yield from ');
-                $this
-                    ->compileTemplateCall($compiler, 'yieldBlock')
-                    ->raw(";\n");
-            } else {
-                $this->compileTemplateCall($compiler, 'renderBlock');
-            }
-        }
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // the template expression is resolved through the loader, which coerces it to a string
-        return $this->hasNode('template') ? ['template'] : [];
-    }
-
-    private function compileTemplateCall(Compiler $compiler, string $method): Compiler
-    {
-        if (!$this->hasNode('template')) {
-            $compiler->write('$this');
-        } else {
-            $compiler
-                ->write('$this->load(')
-                ->subcompile($this->getNode('template'))
-                ->raw(', ')
-                ->repr($this->getTemplateLine())
-                ->raw(')')
-            ;
-        }
-
-        $compiler->raw(\sprintf('->unwrap()->%s', $method));
-
-        return $this->compileBlockArguments($compiler);
-    }
-
-    private function compileBlockArguments(Compiler $compiler): Compiler
-    {
-        $compiler
-            ->raw('(')
-            ->subcompile($this->getNode('name'))
-            ->raw(', $context');
-
-        if (!$this->hasNode('template')) {
-            $compiler->raw(', $blocks');
-        }
-
-        return $compiler->raw(')');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/CallExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/CallExpression.php
deleted file mode 100644
index ad6d388..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/CallExpression.php
+++ /dev/null
@@ -1,375 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Extension\ExtensionInterface;
-use Twig\Node\Node;
-use Twig\TwigCallableInterface;
-use Twig\TwigFilter;
-use Twig\TwigFunction;
-use Twig\TwigTest;
-use Twig\Util\CallableArgumentsExtractor;
-use Twig\Util\ReflectionCallable;
-
-abstract class CallExpression extends AbstractExpression
-{
-    private $reflector;
-
-    /**
-     * @return void
-     */
-    protected function compileCallable(Compiler $compiler)
-    {
-        $twigCallable = $this->getTwigCallable();
-        $callable = $twigCallable->getCallable();
-
-        if (\is_string($callable) && !str_contains($callable, '::')) {
-            $compiler->raw($callable);
-        } else {
-            $rc = $this->reflectCallable($twigCallable);
-            $r = $rc->getReflector();
-            $callable = $rc->getCallable();
-
-            if (\is_string($callable)) {
-                $compiler->raw($callable);
-            } elseif (\is_array($callable) && \is_string($callable[0])) {
-                if (!$r instanceof \ReflectionMethod || $r->isStatic()) {
-                    $compiler->raw(\sprintf('%s::%s', $callable[0], $callable[1]));
-                } else {
-                    $compiler->raw(\sprintf('$this->env->getRuntime(\'%s\')->%s', $callable[0], $callable[1]));
-                }
-            } elseif (\is_array($callable) && $callable[0] instanceof ExtensionInterface) {
-                $class = \get_class($callable[0]);
-                if (!$compiler->getEnvironment()->hasExtension($class)) {
-                    // Compile a non-optimized call to trigger a \Twig\Error\RuntimeError, which cannot be a compile-time error
-                    $compiler->raw(\sprintf('$this->env->getExtension(\'%s\')', $class));
-                } else {
-                    $compiler->raw(\sprintf('$this->extensions[\'%s\']', ltrim($class, '\\')));
-                }
-
-                $compiler->raw(\sprintf('->%s', $callable[1]));
-            } else {
-                $compiler->raw(\sprintf('$this->env->get%s(\'%s\')->getCallable()', ucfirst($this->getAttribute('type')), $twigCallable->getDynamicName()));
-            }
-        }
-
-        $this->compileArguments($compiler);
-    }
-
-    protected function compileArguments(Compiler $compiler, $isArray = false): void
-    {
-        if (\func_num_args() >= 2) {
-            trigger_deprecation('twig/twig', '3.11', 'Passing a second argument to "%s()" is deprecated.', __METHOD__);
-        }
-
-        $compiler->raw($isArray ? '[' : '(');
-
-        $first = true;
-
-        $twigCallable = $this->getAttribute('twig_callable');
-
-        if ($twigCallable->needsCharset()) {
-            $compiler->raw('$this->env->getCharset()');
-            $first = false;
-        }
-
-        if ($twigCallable->needsEnvironment()) {
-            if (!$first) {
-                $compiler->raw(', ');
-            }
-            $compiler->raw('$this->env');
-            $first = false;
-        }
-
-        if ($twigCallable->needsContext()) {
-            if (!$first) {
-                $compiler->raw(', ');
-            }
-            $compiler->raw('$context');
-            $first = false;
-        }
-
-        if (self::needsIsSandboxed($twigCallable)) {
-            if (!$first) {
-                $compiler->raw(', ');
-            }
-            $compiler->raw('$this->env->hasExtension(\Twig\Extension\SandboxExtension::class) && $this->env->getExtension(\Twig\Extension\SandboxExtension::class)->isSandboxed($this->source)');
-            $first = false;
-        }
-
-        foreach ($twigCallable->getArguments() as $argument) {
-            if (!$first) {
-                $compiler->raw(', ');
-            }
-            $compiler->string($argument);
-            $first = false;
-        }
-
-        if ($this->hasNode('node')) {
-            if (!$first) {
-                $compiler->raw(', ');
-            }
-            $compiler->subcompile($this->getNode('node'));
-            $first = false;
-        }
-
-        if ($this->hasNode('arguments')) {
-            $arguments = (new CallableArgumentsExtractor($this, $this->getTwigCallable()))->extractArguments($this->getNode('arguments'));
-            foreach ($arguments as $node) {
-                if (!$first) {
-                    $compiler->raw(', ');
-                }
-                $compiler->subcompile($node);
-                $first = false;
-            }
-        }
-
-        $compiler->raw($isArray ? ']' : ')');
-    }
-
-    /**
-     * @deprecated since Twig 3.12, use Twig\Util\CallableArgumentsExtractor::getArguments() instead
-     */
-    protected function getArguments($callable, $arguments)
-    {
-        trigger_deprecation('twig/twig', '3.12', 'The "%s()" method is deprecated, use Twig\Util\CallableArgumentsExtractor::getArguments() instead.', __METHOD__);
-
-        $callType = $this->getAttribute('type');
-        $callName = $this->getAttribute('name');
-
-        $parameters = [];
-        $named = false;
-        foreach ($arguments as $name => $node) {
-            if (!\is_int($name)) {
-                $named = true;
-                $name = $this->normalizeName($name);
-            } elseif ($named) {
-                throw new SyntaxError(\sprintf('Positional arguments cannot be used after named arguments for %s "%s".', $callType, $callName), $this->getTemplateLine(), $this->getSourceContext());
-            }
-
-            $parameters[$name] = $node;
-        }
-
-        $isVariadic = $this->getAttribute('twig_callable')->isVariadic();
-        if (!$named && !$isVariadic) {
-            return $parameters;
-        }
-
-        if (!$callable) {
-            if ($named) {
-                $message = \sprintf('Named arguments are not supported for %s "%s".', $callType, $callName);
-            } else {
-                $message = \sprintf('Arbitrary positional arguments are not supported for %s "%s".', $callType, $callName);
-            }
-
-            throw new \LogicException($message);
-        }
-
-        [$callableParameters, $isPhpVariadic] = $this->getCallableParameters($callable, $isVariadic);
-        $arguments = [];
-        $names = [];
-        $missingArguments = [];
-        $optionalArguments = [];
-        $pos = 0;
-        foreach ($callableParameters as $callableParameter) {
-            $name = $this->normalizeName($callableParameter->name);
-            if (\PHP_VERSION_ID >= 80000 && 'range' === $callable) {
-                if ('start' === $name) {
-                    $name = 'low';
-                } elseif ('end' === $name) {
-                    $name = 'high';
-                }
-            }
-
-            $names[] = $name;
-
-            if (\array_key_exists($name, $parameters)) {
-                if (\array_key_exists($pos, $parameters)) {
-                    throw new SyntaxError(\sprintf('Argument "%s" is defined twice for %s "%s".', $name, $callType, $callName), $this->getTemplateLine(), $this->getSourceContext());
-                }
-
-                if (\count($missingArguments)) {
-                    throw new SyntaxError(\sprintf(
-                        'Argument "%s" could not be assigned for %s "%s(%s)" because it is mapped to an internal PHP function which cannot determine default value for optional argument%s "%s".',
-                        $name, $callType, $callName, implode(', ', $names), \count($missingArguments) > 1 ? 's' : '', implode('", "', $missingArguments)
-                    ), $this->getTemplateLine(), $this->getSourceContext());
-                }
-
-                $arguments = array_merge($arguments, $optionalArguments);
-                $arguments[] = $parameters[$name];
-                unset($parameters[$name]);
-                $optionalArguments = [];
-            } elseif (\array_key_exists($pos, $parameters)) {
-                $arguments = array_merge($arguments, $optionalArguments);
-                $arguments[] = $parameters[$pos];
-                unset($parameters[$pos]);
-                $optionalArguments = [];
-                ++$pos;
-            } elseif ($callableParameter->isDefaultValueAvailable()) {
-                $optionalArguments[] = new ConstantExpression($callableParameter->getDefaultValue(), -1);
-            } elseif ($callableParameter->isOptional()) {
-                if (!$parameters) {
-                    break;
-                }
-                $missingArguments[] = $name;
-            } else {
-                throw new SyntaxError(\sprintf('Value for argument "%s" is required for %s "%s".', $name, $callType, $callName), $this->getTemplateLine(), $this->getSourceContext());
-            }
-        }
-
-        if ($isVariadic) {
-            $arbitraryArguments = $isPhpVariadic ? new VariadicExpression([], -1) : new ArrayExpression([], -1);
-            foreach ($parameters as $key => $value) {
-                if (\is_int($key)) {
-                    $arbitraryArguments->addElement($value);
-                } else {
-                    $arbitraryArguments->addElement($value, new ConstantExpression($key, -1));
-                }
-                unset($parameters[$key]);
-            }
-
-            if ($arbitraryArguments->count()) {
-                $arguments = array_merge($arguments, $optionalArguments);
-                $arguments[] = $arbitraryArguments;
-            }
-        }
-
-        if ($parameters) {
-            $unknownParameter = null;
-            foreach ($parameters as $parameter) {
-                if ($parameter instanceof Node) {
-                    $unknownParameter = $parameter;
-                    break;
-                }
-            }
-
-            throw new SyntaxError(
-                \sprintf(
-                    'Unknown argument%s "%s" for %s "%s(%s)".',
-                    \count($parameters) > 1 ? 's' : '', implode('", "', array_keys($parameters)), $callType, $callName, implode(', ', $names)
-                ),
-                $unknownParameter ? $unknownParameter->getTemplateLine() : $this->getTemplateLine(),
-                $unknownParameter ? $unknownParameter->getSourceContext() : $this->getSourceContext()
-            );
-        }
-
-        return $arguments;
-    }
-
-    /**
-     * @deprecated since Twig 3.12
-     */
-    protected function normalizeName(string $name): string
-    {
-        trigger_deprecation('twig/twig', '3.12', 'The "%s()" method is deprecated.', __METHOD__);
-
-        return strtolower(preg_replace(['/([A-Z]+)([A-Z][a-z])/', '/([a-z\d])([A-Z])/'], ['\\1_\\2', '\\1_\\2'], $name));
-    }
-
-    // To be removed in 4.0
-    private function getCallableParameters($callable, bool $isVariadic): array
-    {
-        $twigCallable = $this->getAttribute('twig_callable');
-        $rc = $this->reflectCallable($twigCallable);
-        $callableName = $rc->getName();
-
-        $parameters = $rc->getTwigParameters($this->hasNode('node'));
-
-        $isPhpVariadic = false;
-        if ($isVariadic) {
-            $argument = end($parameters);
-            $isArray = $argument && $argument->hasType() && $argument->getType() instanceof \ReflectionNamedType && 'array' === $argument->getType()->getName();
-            if ($isArray && $argument->isDefaultValueAvailable() && [] === $argument->getDefaultValue()) {
-                array_pop($parameters);
-            } elseif ($argument && $argument->isVariadic()) {
-                array_pop($parameters);
-                $isPhpVariadic = true;
-            } else {
-                throw new \LogicException(\sprintf('The last parameter of "%s" for %s "%s" must be an array with default value, eg. "array $arg = []".', $callableName, $this->getAttribute('type'), $twigCallable->getName()));
-            }
-        }
-
-        return [$parameters, $isPhpVariadic];
-    }
-
-    private function reflectCallable(TwigCallableInterface $callable): ReflectionCallable
-    {
-        if (!$this->reflector) {
-            $this->reflector = new ReflectionCallable($callable);
-        }
-
-        return $this->reflector;
-    }
-
-    /**
-     * @internal
-     *
-     * To be removed in 4.0 and replaced by $twigCallable->needsIsSandboxed().
-     */
-    public static function needsIsSandboxed(TwigCallableInterface $twigCallable): bool
-    {
-        if (method_exists($twigCallable, 'needsIsSandboxed')) {
-            return $twigCallable->needsIsSandboxed();
-        }
-
-        trigger_deprecation('twig/twig', '3.25', 'Not implementing the "needsIsSandboxed()" method in "%s" is deprecated. This method will be part of the "%s" interface in 4.0.', $twigCallable::class, TwigCallableInterface::class);
-
-        return false;
-    }
-
-    /**
-     * Overrides the Twig callable based on attributes (as potentially, attributes changed between the creation and the compilation of the node).
-     *
-     * To be removed in 4.0 and replace by $this->getAttribute('twig_callable').
-     */
-    private function getTwigCallable(): TwigCallableInterface
-    {
-        $current = $this->getAttribute('twig_callable');
-
-        $this->setAttribute('twig_callable', match ($this->getAttribute('type')) {
-            'test' => (new TwigTest(
-                $this->getAttribute('name'),
-                $this->hasAttribute('callable') ? $this->getAttribute('callable') : $current->getCallable(),
-                [
-                    'needs_is_sandboxed' => $this->hasAttribute('needs_is_sandboxed') ? $this->getAttribute('needs_is_sandboxed') : self::needsIsSandboxed($current),
-                    'is_variadic' => $this->hasAttribute('is_variadic') ? $this->getAttribute('is_variadic') : $current->isVariadic(),
-                ],
-            ))->withDynamicArguments($this->getAttribute('name'), $this->hasAttribute('dynamic_name') ? $this->getAttribute('dynamic_name') : $current->getDynamicName(), $this->hasAttribute('arguments') ? $this->getAttribute('arguments') : $current->getArguments()),
-            'function' => (new TwigFunction(
-                $this->hasAttribute('name') ? $this->getAttribute('name') : $current->getName(),
-                $this->hasAttribute('callable') ? $this->getAttribute('callable') : $current->getCallable(),
-                [
-                    'needs_environment' => $this->hasAttribute('needs_environment') ? $this->getAttribute('needs_environment') : $current->needsEnvironment(),
-                    'needs_context' => $this->hasAttribute('needs_context') ? $this->getAttribute('needs_context') : $current->needsContext(),
-                    'needs_charset' => $this->hasAttribute('needs_charset') ? $this->getAttribute('needs_charset') : $current->needsCharset(),
-                    'needs_is_sandboxed' => $this->hasAttribute('needs_is_sandboxed') ? $this->getAttribute('needs_is_sandboxed') : self::needsIsSandboxed($current),
-                    'is_variadic' => $this->hasAttribute('is_variadic') ? $this->getAttribute('is_variadic') : $current->isVariadic(),
-                ],
-            ))->withDynamicArguments($this->getAttribute('name'), $this->hasAttribute('dynamic_name') ? $this->getAttribute('dynamic_name') : $current->getDynamicName(), $this->hasAttribute('arguments') ? $this->getAttribute('arguments') : $current->getArguments()),
-            'filter' => (new TwigFilter(
-                $this->getAttribute('name'),
-                $this->hasAttribute('callable') ? $this->getAttribute('callable') : $current->getCallable(),
-                [
-                    'needs_environment' => $this->hasAttribute('needs_environment') ? $this->getAttribute('needs_environment') : $current->needsEnvironment(),
-                    'needs_context' => $this->hasAttribute('needs_context') ? $this->getAttribute('needs_context') : $current->needsContext(),
-                    'needs_charset' => $this->hasAttribute('needs_charset') ? $this->getAttribute('needs_charset') : $current->needsCharset(),
-                    'needs_is_sandboxed' => $this->hasAttribute('needs_is_sandboxed') ? $this->getAttribute('needs_is_sandboxed') : self::needsIsSandboxed($current),
-                    'is_variadic' => $this->hasAttribute('is_variadic') ? $this->getAttribute('is_variadic') : $current->isVariadic(),
-                ],
-            ))->withDynamicArguments($this->getAttribute('name'), $this->hasAttribute('dynamic_name') ? $this->getAttribute('dynamic_name') : $current->getDynamicName(), $this->hasAttribute('arguments') ? $this->getAttribute('arguments') : $current->getArguments()),
-        });
-
-        return $this->getAttribute('twig_callable');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ConditionalExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/ConditionalExpression.php
deleted file mode 100644
index 7fe309c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ConditionalExpression.php
+++ /dev/null
@@ -1,53 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Node\Expression\Ternary\ConditionalTernary;
-
-class ConditionalExpression extends AbstractExpression implements OperatorEscapeInterface
-{
-    public function __construct(AbstractExpression $expr1, AbstractExpression $expr2, AbstractExpression $expr3, int $lineno)
-    {
-        trigger_deprecation('twig/twig', '3.17', \sprintf('"%s" is deprecated; use "%s" instead.', __CLASS__, ConditionalTernary::class));
-
-        parent::__construct(['expr1' => $expr1, 'expr2' => $expr2, 'expr3' => $expr3], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        // Ternary with no then uses Elvis operator
-        if ($this->getNode('expr1') === $this->getNode('expr2')) {
-            $compiler
-                ->raw('((')
-                ->subcompile($this->getNode('expr1'))
-                ->raw(') ?: (')
-                ->subcompile($this->getNode('expr3'))
-                ->raw('))');
-        } else {
-            $compiler
-                ->raw('((')
-                ->subcompile($this->getNode('expr1'))
-                ->raw(') ? (')
-                ->subcompile($this->getNode('expr2'))
-                ->raw(') : (')
-                ->subcompile($this->getNode('expr3'))
-                ->raw('))');
-        }
-    }
-
-    public function getOperandNamesToEscape(): array
-    {
-        return ['expr2', 'expr3'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ConstantExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/ConstantExpression.php
deleted file mode 100644
index 12dc062..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ConstantExpression.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-
-/**
- * @final
- */
-class ConstantExpression extends AbstractExpression implements SupportDefinedTestInterface, ReturnPrimitiveTypeInterface
-{
-    use SupportDefinedTestTrait;
-
-    public function __construct($value, int $lineno)
-    {
-        parent::__construct([], ['value' => $value], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->repr($this->definedTest ? true : $this->getAttribute('value'));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/EmptyExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/EmptyExpression.php
deleted file mode 100644
index 768d1d6..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/EmptyExpression.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-
-/**
- * Represents an empty slot in an array.
- *
- * This is currently only used in destructuring contexts.
- *
- * @internal
- */
-final class EmptyExpression extends AbstractExpression
-{
-    public function __construct(int $lineno)
-    {
-        parent::__construct([], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Filter/DefaultFilter.php b/generated/php/vendor/twig/twig/src/Node/Expression/Filter/DefaultFilter.php
deleted file mode 100644
index fc64b88..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Filter/DefaultFilter.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Filter;
-
-use Twig\Attribute\FirstClassTwigCallableReady;
-use Twig\Compiler;
-use Twig\Extension\CoreExtension;
-use Twig\Node\EmptyNode;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\FilterExpression;
-use Twig\Node\Expression\GetAttrExpression;
-use Twig\Node\Expression\Ternary\ConditionalTernary;
-use Twig\Node\Expression\Test\DefinedTest;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Node;
-use Twig\TwigFilter;
-use Twig\TwigTest;
-
-/**
- * Returns the value or the default value when it is undefined or empty.
- *
- *  {{ var.foo|default('foo item on var is not defined') }}
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class DefaultFilter extends FilterExpression
-{
-    /**
-     * @param AbstractExpression $node
-     */
-    #[FirstClassTwigCallableReady]
-    public function __construct(Node $node, TwigFilter|ConstantExpression $filter, Node $arguments, int $lineno)
-    {
-        if (!$node instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "node" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $node::class);
-        }
-
-        if ($filter instanceof TwigFilter) {
-            $name = $filter->getName();
-            $default = new FilterExpression($node, $filter, $arguments, $node->getTemplateLine());
-        } else {
-            $name = $filter->getAttribute('value');
-            $default = new FilterExpression($node, new TwigFilter('default', [CoreExtension::class, 'default']), $arguments, $node->getTemplateLine());
-        }
-
-        if ('default' === $name && ($node instanceof ContextVariable || $node instanceof GetAttrExpression)) {
-            $test = new DefinedTest(clone $node, new TwigTest('defined', null, ['always_allowed_in_sandbox' => true]), new EmptyNode(), $node->getTemplateLine());
-            $false = \count($arguments) ? $arguments->getNode('0') : new ConstantExpression('', $node->getTemplateLine());
-
-            $node = new ConditionalTernary($test, $default, $false, $node->getTemplateLine());
-        } else {
-            $node = $default;
-        }
-
-        parent::__construct($node, $filter, $arguments, $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->subcompile($this->getNode('node'));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Filter/RawFilter.php b/generated/php/vendor/twig/twig/src/Node/Expression/Filter/RawFilter.php
deleted file mode 100644
index 707e8ec..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Filter/RawFilter.php
+++ /dev/null
@@ -1,45 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Filter;
-
-use Twig\Attribute\FirstClassTwigCallableReady;
-use Twig\Compiler;
-use Twig\Node\EmptyNode;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\FilterExpression;
-use Twig\Node\Node;
-use Twig\TwigFilter;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class RawFilter extends FilterExpression
-{
-    /**
-     * @param AbstractExpression $node
-     */
-    #[FirstClassTwigCallableReady]
-    public function __construct(Node $node, TwigFilter|ConstantExpression|null $filter = null, ?Node $arguments = null, int $lineno = 0)
-    {
-        if (!$node instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "node" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $node::class);
-        }
-
-        parent::__construct($node, $filter ?: new TwigFilter('raw', null, ['is_safe' => ['all']]), $arguments ?: new EmptyNode(), $lineno ?: $node->getTemplateLine());
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->subcompile($this->getNode('node'));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/FilterExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/FilterExpression.php
deleted file mode 100644
index eb94720..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/FilterExpression.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Attribute\FirstClassTwigCallableReady;
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\NameDeprecation;
-use Twig\Node\Node;
-use Twig\TwigFilter;
-
-class FilterExpression extends CallExpression implements CoercesChildrenToStringInterface
-{
-    /**
-     * @param AbstractExpression $node
-     */
-    #[FirstClassTwigCallableReady]
-    public function __construct(Node $node, TwigFilter|ConstantExpression $filter, Node $arguments, int $lineno)
-    {
-        if (!$node instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "node" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $node::class);
-        }
-
-        if ($filter instanceof TwigFilter) {
-            $name = $filter->getName();
-            $filterName = new ConstantExpression($name, $lineno);
-        } else {
-            $name = $filter->getAttribute('value');
-            $filterName = $filter;
-            trigger_deprecation('twig/twig', '3.12', 'Not passing an instance of "TwigFilter" when creating a "%s" filter of type "%s" is deprecated.', $name, static::class);
-        }
-
-        parent::__construct(['node' => $node, 'filter' => $filterName, 'arguments' => $arguments], ['name' => $name, 'type' => 'filter'], $lineno);
-
-        if ($filter instanceof TwigFilter) {
-            $this->setAttribute('twig_callable', $filter);
-        }
-
-        $this->deprecateNode('filter', new NameDeprecation('twig/twig', '3.12'));
-
-        $this->deprecateAttribute('needs_charset', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('needs_environment', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('needs_context', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('arguments', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('callable', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('is_variadic', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('dynamic_name', new NameDeprecation('twig/twig', '3.12'));
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $name = $this->getNode('filter', false)->getAttribute('value');
-        if ($name !== $this->getAttribute('name')) {
-            trigger_deprecation('twig/twig', '3.11', 'Changing the value of a "filter" node in a NodeVisitor class is not supported anymore.');
-            $this->removeAttribute('twig_callable');
-        }
-        if ('raw' === $name) {
-            trigger_deprecation('twig/twig', '3.11', 'Creating the "raw" filter via "FilterExpression" is deprecated; use "RawFilter" instead.');
-
-            $compiler->subcompile($this->getNode('node'));
-
-            return;
-        }
-
-        if (!$this->hasAttribute('twig_callable')) {
-            $this->setAttribute('twig_callable', $compiler->getEnvironment()->getFilter($name));
-        }
-
-        $this->compileCallable($compiler);
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // a filter may coerce its input and arguments to string (e.g. `upper`, `replace`)
-        return ['node', 'arguments'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/FunctionExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/FunctionExpression.php
deleted file mode 100644
index 5983962..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/FunctionExpression.php
+++ /dev/null
@@ -1,88 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Attribute\FirstClassTwigCallableReady;
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\NameDeprecation;
-use Twig\Node\Node;
-use Twig\TwigFunction;
-
-class FunctionExpression extends CallExpression implements SupportDefinedTestInterface, CoercesChildrenToStringInterface
-{
-    use SupportDefinedTestDeprecationTrait;
-    use SupportDefinedTestTrait;
-
-    #[FirstClassTwigCallableReady]
-    public function __construct(TwigFunction|string $function, Node $arguments, int $lineno)
-    {
-        if ($function instanceof TwigFunction) {
-            $name = $function->getName();
-        } else {
-            $name = $function;
-            trigger_deprecation('twig/twig', '3.12', 'Not passing an instance of "TwigFunction" when creating a "%s" function of type "%s" is deprecated.', $name, static::class);
-        }
-
-        parent::__construct(['arguments' => $arguments], ['name' => $name, 'type' => 'function'], $lineno);
-
-        if ($function instanceof TwigFunction) {
-            $this->setAttribute('twig_callable', $function);
-        }
-
-        $this->deprecateAttribute('needs_charset', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('needs_environment', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('needs_context', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('arguments', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('callable', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('is_variadic', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('dynamic_name', new NameDeprecation('twig/twig', '3.12'));
-    }
-
-    public function enableDefinedTest(): void
-    {
-        if ('constant' === $this->getAttribute('name')) {
-            $this->definedTest = true;
-        }
-    }
-
-    /**
-     * @return void
-     */
-    public function compile(Compiler $compiler)
-    {
-        $name = $this->getAttribute('name');
-        if ($this->hasAttribute('twig_callable')) {
-            $name = $this->getAttribute('twig_callable')->getName();
-            if ($name !== $this->getAttribute('name')) {
-                trigger_deprecation('twig/twig', '3.12', 'Changing the value of a "function" node in a NodeVisitor class is not supported anymore.');
-                $this->removeAttribute('twig_callable');
-            }
-        }
-
-        if (!$this->hasAttribute('twig_callable')) {
-            $this->setAttribute('twig_callable', $compiler->getEnvironment()->getFunction($name));
-        }
-
-        if ('constant' === $name && $this->isDefinedTestEnabled()) {
-            $this->getNode('arguments')->setNode('checkDefined', new ConstantExpression(true, $this->getTemplateLine()));
-        }
-
-        $this->compileCallable($compiler);
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // a function may coerce its arguments to string (the host PHP code is opaque to Twig)
-        return ['arguments'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/FunctionNode/EnumCasesFunction.php b/generated/php/vendor/twig/twig/src/Node/Expression/FunctionNode/EnumCasesFunction.php
deleted file mode 100644
index 170d0a1..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/FunctionNode/EnumCasesFunction.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\FunctionNode;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\FunctionExpression;
-
-class EnumCasesFunction extends FunctionExpression
-{
-    public function compile(Compiler $compiler): void
-    {
-        $arguments = $this->getNode('arguments');
-        if ($arguments->hasNode('enum')) {
-            $firstArgument = $arguments->getNode('enum');
-        } elseif ($arguments->hasNode('0')) {
-            $firstArgument = $arguments->getNode('0');
-        } else {
-            $firstArgument = null;
-        }
-
-        if (!$firstArgument instanceof ConstantExpression || 1 !== \count($arguments)) {
-            parent::compile($compiler);
-
-            return;
-        }
-
-        $value = $firstArgument->getAttribute('value');
-
-        if (!\is_string($value)) {
-            throw new SyntaxError('The first argument of the "enum_cases" function must be a string.', $this->getTemplateLine(), $this->getSourceContext());
-        }
-
-        if (!enum_exists($value)) {
-            throw new SyntaxError(\sprintf('The first argument of the "enum_cases" function must be the name of an enum, "%s" given.', $value), $this->getTemplateLine(), $this->getSourceContext());
-        }
-
-        $compiler->raw(\sprintf('%s::cases()', $value));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/FunctionNode/EnumFunction.php b/generated/php/vendor/twig/twig/src/Node/Expression/FunctionNode/EnumFunction.php
deleted file mode 100644
index af15b64..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/FunctionNode/EnumFunction.php
+++ /dev/null
@@ -1,54 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\FunctionNode;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\FunctionExpression;
-
-class EnumFunction extends FunctionExpression
-{
-    public function compile(Compiler $compiler): void
-    {
-        $arguments = $this->getNode('arguments');
-        if ($arguments->hasNode('enum')) {
-            $firstArgument = $arguments->getNode('enum');
-        } elseif ($arguments->hasNode('0')) {
-            $firstArgument = $arguments->getNode('0');
-        } else {
-            $firstArgument = null;
-        }
-
-        if (!$firstArgument instanceof ConstantExpression || 1 !== \count($arguments)) {
-            parent::compile($compiler);
-
-            return;
-        }
-
-        $value = $firstArgument->getAttribute('value');
-
-        if (!\is_string($value)) {
-            throw new SyntaxError('The first argument of the "enum" function must be a string.', $this->getTemplateLine(), $this->getSourceContext());
-        }
-
-        if (!enum_exists($value)) {
-            throw new SyntaxError(\sprintf('The first argument of the "enum" function must be the name of an enum, "%s" given.', $value), $this->getTemplateLine(), $this->getSourceContext());
-        }
-
-        if (!$cases = $value::cases()) {
-            throw new SyntaxError(\sprintf('The first argument of the "enum" function must be a non-empty enum, "%s" given.', $value), $this->getTemplateLine(), $this->getSourceContext());
-        }
-
-        $compiler->raw(\sprintf('%s::%s', $value, $cases[0]->name));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/GetAttrExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/GetAttrExpression.php
deleted file mode 100644
index 3dcd88a..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/GetAttrExpression.php
+++ /dev/null
@@ -1,228 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Extension\SandboxExtension;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Template;
-
-class GetAttrExpression extends AbstractExpression implements SupportDefinedTestInterface, CoercesChildrenToStringInterface
-{
-    use SupportDefinedTestDeprecationTrait;
-    use SupportDefinedTestTrait;
-
-    /**
-     * @param ArrayExpression|NameExpression|null $arguments
-     */
-    public function __construct(AbstractExpression $node, AbstractExpression $attribute, ?AbstractExpression $arguments, string $type, int $lineno, bool $nullSafe = false)
-    {
-        $nodes = ['node' => $node, 'attribute' => $attribute];
-        if (null !== $arguments) {
-            $nodes['arguments'] = $arguments;
-        }
-
-        if ($arguments && !$arguments instanceof ArrayExpression && !$arguments instanceof ContextVariable) {
-            trigger_deprecation('twig/twig', '3.15', \sprintf('Not passing a "%s" instance as the "arguments" argument of the "%s" constructor is deprecated ("%s" given).', ArrayExpression::class, static::class, $arguments::class));
-        }
-
-        parent::__construct($nodes, ['type' => $type, 'ignore_strict_check' => false, 'optimizable' => !$nullSafe, 'null_safe' => $nullSafe, 'is_short_circuited' => false, 'var_name' => null], $lineno);
-    }
-
-    public function enableDefinedTest(): void
-    {
-        $this->definedTest = true;
-        $this->changeIgnoreStrictCheck($this);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $env = $compiler->getEnvironment();
-        $arrayAccessSandbox = false;
-        $nullSafe = $this->getAttribute('null_safe');
-
-        // optimize array calls
-        if (
-            $this->getAttribute('optimizable')
-            && (!$env->isStrictVariables() || $this->getAttribute('ignore_strict_check'))
-            && !$this->definedTest
-            && Template::ARRAY_CALL === $this->getAttribute('type')
-        ) {
-            $var = '$'.$compiler->getVarName();
-            $compiler
-                ->raw('(('.$var.' = ')
-                ->subcompile($this->getNode('node'))
-                ->raw(') && is_array(')
-                ->raw($var);
-
-            if (!$env->hasExtension(SandboxExtension::class)) {
-                $compiler
-                    ->raw(') || ')
-                    ->raw($var)
-                    ->raw(' instanceof ArrayAccess ? (')
-                    ->raw($var)
-                    ->raw('[')
-                ;
-                $this->compileArrayKey($compiler);
-                $compiler->raw('] ?? null) : null)');
-
-                return;
-            }
-
-            $arrayAccessSandbox = true;
-
-            $compiler
-                ->raw(') || ')
-                ->raw($var)
-                ->raw(' instanceof ArrayAccess && in_array(')
-                ->raw($var.'::class')
-                ->raw(', CoreExtension::ARRAY_LIKE_CLASSES, true) ? (')
-                ->raw($var)
-                ->raw('[')
-            ;
-            $this->compileArrayKey($compiler);
-            $compiler->raw('] ?? null) : ');
-        }
-
-        if ($this->getAttribute('ignore_strict_check')) {
-            $this->getNode('node')->setAttribute('ignore_strict_check', true);
-        }
-
-        if (null === $nullSafeNode = $nullSafe ? $this : null) {
-            $node = $this->getNode('node');
-            while ($node instanceof self) {
-                if ($node->getAttribute('null_safe')) {
-                    $nullSafeNode = $node;
-                    break;
-                }
-                $node = $node->getNode('node');
-            }
-        }
-
-        $isShortCircuited = false;
-        if (null !== $nullSafeNode && !$nullSafeNode->isShortCircuited()) {
-            $compiler
-                ->raw('((null === ('.$nullSafeNode->getVarName($compiler).' = ')
-                ->subcompile($nullSafeNode->getNode('node'))
-                ->raw(')) ? null : ');
-
-            $nullSafeNode->markAsShortCircuited();
-            $isShortCircuited = true;
-        }
-
-        $compiler->raw('CoreExtension::getAttribute($this->env, $this->source, ');
-
-        if ($nullSafe) {
-            $compiler->raw($this->getVarName($compiler));
-        } else {
-            $compiler->subcompile($this->getNode('node'));
-        }
-
-        $compiler
-            ->raw(', ')
-            ->subcompile($this->getNode('attribute'))
-        ;
-
-        if ($this->hasNode('arguments')) {
-            $compiler->raw(', ')->subcompile($this->getNode('arguments'));
-        } else {
-            $compiler->raw(', []');
-        }
-
-        $compiler->raw(', ')
-            ->repr($this->getAttribute('type'))
-            ->raw(', ')->repr($this->definedTest)
-            ->raw(', ')->repr($this->getAttribute('ignore_strict_check'))
-            ->raw(', ')->repr($env->hasExtension(SandboxExtension::class))
-            ->raw(', ')->repr($this->getNode('node')->getTemplateLine())
-            ->raw(')')
-        ;
-
-        if ($arrayAccessSandbox) {
-            $compiler->raw(')');
-        }
-
-        if ($isShortCircuited) {
-            $compiler->raw(')');
-        }
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        $names = [];
-
-        // the host PHP method may coerce any argument to string
-        if ($this->hasNode('arguments')) {
-            $names[] = 'arguments';
-        }
-
-        // compileArrayKey() coerces a Stringable key; expose it so the sandbox checks __toString()
-        if (Template::ARRAY_CALL === $this->getAttribute('type')) {
-            $names[] = 'attribute';
-        }
-
-        return $names;
-    }
-
-    /**
-     * Coerces a Stringable array key to string so the optimized path matches
-     * CoreExtension::getAttribute(); scalars are left to PHP's native offset coercion.
-     */
-    private function compileArrayKey(Compiler $compiler): void
-    {
-        $attribute = $this->getNode('attribute');
-
-        if ($attribute instanceof ConstantExpression) {
-            $compiler->subcompile($attribute);
-
-            return;
-        }
-
-        $key = '$'.$compiler->getVarName();
-        $compiler
-            ->raw('(('.$key.' = ')
-            ->subcompile($attribute)
-            ->raw(') instanceof \Stringable ? (string) '.$key.' : '.$key.')')
-        ;
-    }
-
-    private function changeIgnoreStrictCheck(self $node): void
-    {
-        $node->setAttribute('optimizable', false);
-        $node->setAttribute('ignore_strict_check', true);
-
-        if ($node->getNode('node') instanceof self) {
-            $this->changeIgnoreStrictCheck($node->getNode('node'));
-        }
-    }
-
-    private function markAsShortCircuited(): void
-    {
-        $this->setAttribute('is_short_circuited', true);
-    }
-
-    private function isShortCircuited(): bool
-    {
-        return $this->getAttribute('is_short_circuited');
-    }
-
-    private function getVarName(Compiler $compiler): string
-    {
-        if (null === $this->getAttribute('var_name')) {
-            $this->setAttribute('var_name', $compiler->getVarName());
-        }
-
-        return '$'.$this->getAttribute('var_name');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/InlinePrint.php b/generated/php/vendor/twig/twig/src/Node/Expression/InlinePrint.php
deleted file mode 100644
index 5509f79..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/InlinePrint.php
+++ /dev/null
@@ -1,39 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Node\Node;
-
-/**
- * @internal
- */
-final class InlinePrint extends AbstractExpression
-{
-    /**
-     * @param AbstractExpression $node
-     */
-    public function __construct(Node $node, int $lineno)
-    {
-        trigger_deprecation('twig/twig', '3.16', \sprintf('The "%s" class is deprecated with no replacement.', static::class));
-
-        parent::__construct(['node' => $node], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('yield ')
-            ->subcompile($this->getNode('node'))
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ListExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/ListExpression.php
deleted file mode 100644
index 9b23857..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ListExpression.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Node\Expression\Variable\AssignContextVariable;
-
-class ListExpression extends AbstractExpression
-{
-    /**
-     * @param array<AssignContextVariable> $items
-     */
-    public function __construct(array $items, int $lineno)
-    {
-        parent::__construct($items, [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        foreach ($this as $i => $name) {
-            if ($i) {
-                $compiler->raw(', ');
-            }
-
-            $compiler
-                ->raw('$__')
-                ->raw($name->getAttribute('name'))
-                ->raw('__')
-            ;
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/MacroReferenceExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/MacroReferenceExpression.php
deleted file mode 100644
index fc7a7af..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/MacroReferenceExpression.php
+++ /dev/null
@@ -1,136 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\Variable\TemplateVariable;
-
-/**
- * Represents a macro call node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class MacroReferenceExpression extends AbstractExpression implements SupportDefinedTestInterface, CoercesChildrenToStringInterface
-{
-    use SupportDefinedTestDeprecationTrait;
-    use SupportDefinedTestTrait;
-
-    /**
-     * @param string|AbstractExpression $name A static macro method name (e.g. "macro_foo") or, for a dynamic
-     *                                        call, an expression resolving to the macro name (without the
-     *                                        "macro_" prefix, which is added at runtime)
-     */
-    public function __construct(TemplateVariable $template, string|AbstractExpression $name, AbstractExpression $arguments, int $lineno)
-    {
-        $nodes = ['template' => $template, 'arguments' => $arguments];
-        $attributes = ['name' => null];
-
-        if (\is_string($name)) {
-            // The name is emitted as raw PHP in compile() via "->{$name}(...)",
-            // so it must be a valid PHP method identifier. Reject anything else
-            // as a defense-in-depth against accidental PHP code injection from
-            // a caller that forgot to validate user-controlled input.
-            if (!preg_match('#^[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*$#D', $name)) {
-                throw new \LogicException(\sprintf('Macro name "%s" is not a valid PHP identifier.', $name));
-            }
-            $attributes['name'] = $name;
-        } else {
-            $nodes['name'] = $name;
-        }
-
-        parent::__construct($nodes, $attributes, $lineno);
-    }
-
-    public function __clone()
-    {
-        // The template node must not be deep-cloned because its name is
-        // lazily generated during compilation and must stay in sync with
-        // the AssignTemplateVariable that populates the $macros array.
-        $template = $this->nodes['template'];
-        parent::__clone();
-        $this->nodes['template'] = $template;
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        if ($this->hasNode('name')) {
-            $this->compileDynamic($compiler);
-
-            return;
-        }
-
-        if ($this->definedTest) {
-            $compiler
-                ->subcompile($this->getNode('template'))
-                ->raw('->hasMacro(')
-                ->repr($this->getAttribute('name'))
-                ->raw(', $context')
-                ->raw(')')
-            ;
-
-            return;
-        }
-
-        $compiler
-            ->subcompile($this->getNode('template'))
-            ->raw('->getTemplateForMacro(')
-            ->repr($this->getAttribute('name'))
-            ->raw(', $context, ')
-            ->repr($this->getTemplateLine())
-            ->raw(', $this->getSourceContext())')
-            ->raw(\sprintf('->%s', $this->getAttribute('name')))
-            ->raw('(...')
-            ->subcompile($this->getNode('arguments'))
-            ->raw(')')
-        ;
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // Dynamic macro names are prefixed via PHP string concatenation at runtime.
-        return $this->hasNode('name') ? ['name'] : [];
-    }
-
-    private function compileDynamic(Compiler $compiler): void
-    {
-        // The macro method name is resolved at runtime from a context value;
-        // prefixing it with "macro_" constrains the dynamic method call to the
-        // template's macro methods only, and getTemplateForMacro()/hasMacro()
-        // validate that the method actually exists.
-        $var = $compiler->getVarName();
-
-        if ($this->definedTest) {
-            $compiler
-                ->subcompile($this->getNode('template'))
-                ->raw('->hasMacro(\'macro_\'.')
-                ->subcompile($this->getNode('name'))
-                ->raw(', $context)')
-            ;
-
-            return;
-        }
-
-        $compiler
-            ->subcompile($this->getNode('template'))
-            ->raw(\sprintf('->getTemplateForMacro($%s = \'macro_\'.', $var))
-            ->subcompile($this->getNode('name'))
-            ->raw(', $context, ')
-            ->repr($this->getTemplateLine())
-            ->raw(', $this->getSourceContext())')
-            ->raw(\sprintf('->{$%s}', $var))
-            ->raw('(...')
-            ->subcompile($this->getNode('arguments'))
-            ->raw(')')
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/MethodCallExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/MethodCallExpression.php
deleted file mode 100644
index 4b18053..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/MethodCallExpression.php
+++ /dev/null
@@ -1,58 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Node\Expression\Variable\ContextVariable;
-
-class MethodCallExpression extends AbstractExpression implements SupportDefinedTestInterface
-{
-    use SupportDefinedTestDeprecationTrait;
-    use SupportDefinedTestTrait;
-
-    public function __construct(AbstractExpression $node, string $method, ArrayExpression $arguments, int $lineno)
-    {
-        trigger_deprecation('twig/twig', '3.15', 'The "%s" class is deprecated, use "%s" instead.', __CLASS__, MacroReferenceExpression::class);
-
-        parent::__construct(['node' => $node, 'arguments' => $arguments], ['method' => $method, 'safe' => false], $lineno);
-
-        if ($node instanceof ContextVariable) {
-            $node->setAttribute('always_defined', true);
-        }
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        if ($this->definedTest) {
-            $compiler
-                ->raw('method_exists($macros[')
-                ->repr($this->getNode('node')->getAttribute('name'))
-                ->raw('], ')
-                ->repr($this->getAttribute('method'))
-                ->raw(')')
-            ;
-
-            return;
-        }
-
-        $compiler
-            ->raw('CoreExtension::callMacro($macros[')
-            ->repr($this->getNode('node')->getAttribute('name'))
-            ->raw('], ')
-            ->repr($this->getAttribute('method'))
-            ->raw(', ')
-            ->subcompile($this->getNode('arguments'))
-            ->raw(', ')
-            ->repr($this->getTemplateLine())
-            ->raw(', $context, $this->getSourceContext())');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/NameExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/NameExpression.php
deleted file mode 100644
index 0e03674..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/NameExpression.php
+++ /dev/null
@@ -1,115 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Node\Expression\Variable\ContextVariable;
-
-class NameExpression extends AbstractExpression implements SupportDefinedTestInterface
-{
-    use SupportDefinedTestDeprecationTrait;
-    use SupportDefinedTestTrait;
-
-    private $specialVars = [
-        '_self' => '$this->getTemplateName()',
-        '_context' => '$context',
-        '_charset' => '$this->env->getCharset()',
-    ];
-
-    public function __construct(string $name, int $lineno)
-    {
-        if (self::class === static::class) {
-            trigger_deprecation('twig/twig', '3.15', 'The "%s" class is deprecated, use "%s" instead.', self::class, ContextVariable::class);
-        }
-
-        parent::__construct([], ['name' => $name, 'ignore_strict_check' => false, 'always_defined' => false], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $name = $this->getAttribute('name');
-
-        $compiler->addDebugInfo($this);
-
-        if ($this->definedTest) {
-            if (isset($this->specialVars[$name]) || $this->getAttribute('always_defined')) {
-                $compiler->repr(true);
-            } elseif (\PHP_VERSION_ID >= 70400) {
-                $compiler
-                    ->raw('array_key_exists(')
-                    ->string($name)
-                    ->raw(', $context)')
-                ;
-            } else {
-                $compiler
-                    ->raw('(isset($context[')
-                    ->string($name)
-                    ->raw(']) || array_key_exists(')
-                    ->string($name)
-                    ->raw(', $context))')
-                ;
-            }
-        } elseif (isset($this->specialVars[$name])) {
-            $compiler->raw($this->specialVars[$name]);
-        } elseif ($this->getAttribute('always_defined')) {
-            $compiler
-                ->raw('$context[')
-                ->string($name)
-                ->raw(']')
-            ;
-        } else {
-            if ($this->getAttribute('ignore_strict_check') || !$compiler->getEnvironment()->isStrictVariables()) {
-                $compiler
-                    ->raw('($context[')
-                    ->string($name)
-                    ->raw('] ?? null)')
-                ;
-            } else {
-                $compiler
-                    ->raw('(isset($context[')
-                    ->string($name)
-                    ->raw(']) || array_key_exists(')
-                    ->string($name)
-                    ->raw(', $context) ? $context[')
-                    ->string($name)
-                    ->raw('] : (function () { throw new RuntimeError(\'Variable ')
-                    ->string($name)
-                    ->raw(' does not exist.\', ')
-                    ->repr($this->lineno)
-                    ->raw(', $this->source); })()')
-                    ->raw(')')
-                ;
-            }
-        }
-    }
-
-    /**
-     * @deprecated since Twig 3.11 (to be removed in 4.0)
-     */
-    public function isSpecial()
-    {
-        trigger_deprecation('twig/twig', '3.11', 'The "%s()" method is deprecated and will be removed in Twig 4.0.', __METHOD__);
-
-        return isset($this->specialVars[$this->getAttribute('name')]);
-    }
-
-    /**
-     * @deprecated since Twig 3.11 (to be removed in 4.0)
-     */
-    public function isSimple()
-    {
-        trigger_deprecation('twig/twig', '3.11', 'The "%s()" method is deprecated and will be removed in Twig 4.0.', __METHOD__);
-
-        return !isset($this->specialVars[$this->getAttribute('name')]) && !$this->definedTest;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/NullCoalesceExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/NullCoalesceExpression.php
deleted file mode 100644
index 4548519..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/NullCoalesceExpression.php
+++ /dev/null
@@ -1,77 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Node\EmptyNode;
-use Twig\Node\Expression\Binary\AndBinary;
-use Twig\Node\Expression\Binary\NullCoalesceBinary;
-use Twig\Node\Expression\Test\DefinedTest;
-use Twig\Node\Expression\Test\NullTest;
-use Twig\Node\Expression\Unary\NotUnary;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Node;
-use Twig\TwigTest;
-
-class NullCoalesceExpression extends ConditionalExpression
-{
-    /**
-     * @param AbstractExpression $left
-     * @param AbstractExpression $right
-     */
-    public function __construct(Node $left, Node $right, int $lineno)
-    {
-        trigger_deprecation('twig/twig', '3.17', \sprintf('"%s" is deprecated; use "%s" instead.', __CLASS__, NullCoalesceBinary::class));
-
-        if (!$left instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "left" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $left::class);
-        }
-        if (!$right instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "right" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $right::class);
-        }
-
-        $test = new DefinedTest(clone $left, new TwigTest('defined', null, ['always_allowed_in_sandbox' => true]), new EmptyNode(), $left->getTemplateLine());
-        // for "block()", we don't need the null test as the return value is always a string
-        if (!$left instanceof BlockReferenceExpression) {
-            $test = new AndBinary(
-                $test,
-                new NotUnary(new NullTest($left, new TwigTest('null', null, ['always_allowed_in_sandbox' => true]), new EmptyNode(), $left->getTemplateLine()), $left->getTemplateLine()),
-                $left->getTemplateLine()
-            );
-        }
-
-        parent::__construct($test, $left, $right, $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        /*
-         * This optimizes only one case. PHP 7 also supports more complex expressions
-         * that can return null. So, for instance, if log is defined, log("foo") ?? "..." works,
-         * but log($a["foo"]) ?? "..." does not if $a["foo"] is not defined. More advanced
-         * cases might be implemented as an optimizer node visitor, but has not been done
-         * as benefits are probably not worth the added complexity.
-         */
-        if ($this->getNode('expr2') instanceof ContextVariable) {
-            $this->getNode('expr2')->setAttribute('always_defined', true);
-            $compiler
-                ->raw('((')
-                ->subcompile($this->getNode('expr2'))
-                ->raw(') ?? (')
-                ->subcompile($this->getNode('expr3'))
-                ->raw('))')
-            ;
-        } else {
-            parent::compile($compiler);
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/OperatorEscapeInterface.php b/generated/php/vendor/twig/twig/src/Node/Expression/OperatorEscapeInterface.php
deleted file mode 100644
index 06db6c6..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/OperatorEscapeInterface.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-/**
- * Interface implemented by n-ary operators for n > 1.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface OperatorEscapeInterface
-{
-    /**
-     * @return string[]
-     */
-    public function getOperandNamesToEscape(): array;
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ParentExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/ParentExpression.php
deleted file mode 100644
index 22fe38f..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ParentExpression.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-
-/**
- * Represents a parent node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class ParentExpression extends AbstractExpression
-{
-    public function __construct(string $name, int $lineno)
-    {
-        parent::__construct([], ['output' => false, 'name' => $name], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        if ($this->getAttribute('output')) {
-            $compiler
-                ->addDebugInfo($this)
-                ->write('yield from $this->yieldParentBlock(')
-                ->string($this->getAttribute('name'))
-                ->raw(", \$context, \$blocks);\n")
-            ;
-        } else {
-            $compiler
-                ->raw('$this->renderParentBlock(')
-                ->string($this->getAttribute('name'))
-                ->raw(', $context, $blocks)')
-            ;
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnArrayInterface.php b/generated/php/vendor/twig/twig/src/Node/Expression/ReturnArrayInterface.php
deleted file mode 100644
index a74864b..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnArrayInterface.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-interface ReturnArrayInterface extends ReturnPrimitiveTypeInterface
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnBoolInterface.php b/generated/php/vendor/twig/twig/src/Node/Expression/ReturnBoolInterface.php
deleted file mode 100644
index 7046946..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnBoolInterface.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-interface ReturnBoolInterface extends ReturnPrimitiveTypeInterface
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnNumberInterface.php b/generated/php/vendor/twig/twig/src/Node/Expression/ReturnNumberInterface.php
deleted file mode 100644
index 8ae3b3d..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnNumberInterface.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-interface ReturnNumberInterface extends ReturnPrimitiveTypeInterface
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnPrimitiveTypeInterface.php b/generated/php/vendor/twig/twig/src/Node/Expression/ReturnPrimitiveTypeInterface.php
deleted file mode 100644
index 6b87b8b..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnPrimitiveTypeInterface.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-interface ReturnPrimitiveTypeInterface
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnStringInterface.php b/generated/php/vendor/twig/twig/src/Node/Expression/ReturnStringInterface.php
deleted file mode 100644
index 53d29aa..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/ReturnStringInterface.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-interface ReturnStringInterface extends ReturnPrimitiveTypeInterface
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/SupportDefinedTestDeprecationTrait.php b/generated/php/vendor/twig/twig/src/Node/Expression/SupportDefinedTestDeprecationTrait.php
deleted file mode 100644
index 664464b..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/SupportDefinedTestDeprecationTrait.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-/**
- * @internal
- *
- * To be removed in 4.0
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-trait SupportDefinedTestDeprecationTrait
-{
-    public function getAttribute($name, $default = null)
-    {
-        if ('is_defined_test' === $name) {
-            trigger_deprecation('twig/twig', '3.21', 'The "is_defined_test" attribute is deprecated, call "isDefinedTestEnabled()" instead.');
-
-            return $this->isDefinedTestEnabled();
-        }
-
-        return parent::getAttribute($name, $default);
-    }
-
-    public function setAttribute(string $name, $value): void
-    {
-        if ('is_defined_test' === $name) {
-            trigger_deprecation('twig/twig', '3.21', 'The "is_defined_test" attribute is deprecated, call "enableDefinedTest()" instead.');
-
-            $this->definedTest = (bool) $value;
-        } else {
-            parent::setAttribute($name, $value);
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/SupportDefinedTestInterface.php b/generated/php/vendor/twig/twig/src/Node/Expression/SupportDefinedTestInterface.php
deleted file mode 100644
index 450c691..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/SupportDefinedTestInterface.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-/**
- * Interface implemented by expressions that support the defined test.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface SupportDefinedTestInterface
-{
-    public function enableDefinedTest(): void;
-
-    public function isDefinedTestEnabled(): bool;
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/SupportDefinedTestTrait.php b/generated/php/vendor/twig/twig/src/Node/Expression/SupportDefinedTestTrait.php
deleted file mode 100644
index 4cf1a58..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/SupportDefinedTestTrait.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-trait SupportDefinedTestTrait
-{
-    private bool $definedTest = false;
-
-    public function enableDefinedTest(): void
-    {
-        $this->definedTest = true;
-    }
-
-    public function isDefinedTestEnabled(): bool
-    {
-        return $this->definedTest;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/TempNameExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/TempNameExpression.php
deleted file mode 100644
index f996aab..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/TempNameExpression.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-
-class TempNameExpression extends AbstractExpression
-{
-    public const RESERVED_NAMES = ['varargs', 'context', 'macros', 'blocks', 'this'];
-
-    public function __construct(string|int|null $name, int $lineno)
-    {
-        // All names supported by ExpressionParser::parsePrimaryExpression() should be excluded
-        if ($name && \in_array(strtolower($name), ['true', 'false', 'none', 'null'], true)) {
-            throw new SyntaxError(\sprintf('You cannot assign a value to "%s".', $name), $lineno);
-        }
-
-        if (self::class === static::class) {
-            trigger_deprecation('twig/twig', '3.15', 'The "%s" class is deprecated.', self::class);
-        }
-
-        if (null !== $name && (\is_int($name) || ctype_digit($name))) {
-            $name = (int) $name;
-        } elseif (\in_array($name, self::RESERVED_NAMES, true)) {
-            $name = "\u{035C}".$name;
-        }
-
-        parent::__construct([], ['name' => $name], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        if (null === $this->getAttribute('name')) {
-            $this->setAttribute('name', $compiler->getVarName());
-        }
-
-        $compiler->raw('$'.$this->getAttribute('name'));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Ternary/ConditionalTernary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Ternary/ConditionalTernary.php
deleted file mode 100644
index 3972755..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Ternary/ConditionalTernary.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Ternary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\OperatorEscapeInterface;
-use Twig\Node\Expression\Test\TrueTest;
-
-final class ConditionalTernary extends AbstractExpression implements OperatorEscapeInterface
-{
-    public function __construct(AbstractExpression $test, AbstractExpression $left, AbstractExpression $right, int $lineno)
-    {
-        parent::__construct(['test' => TrueTest::wrap($test), 'left' => $left, 'right' => $right], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('((')
-            ->subcompile($this->getNode('test'))
-            ->raw(') ? (')
-            ->subcompile($this->getNode('left'))
-            ->raw(') : (')
-            ->subcompile($this->getNode('right'))
-            ->raw('))')
-        ;
-    }
-
-    public function getOperandNamesToEscape(): array
-    {
-        return ['left', 'right'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Test/ConstantTest.php b/generated/php/vendor/twig/twig/src/Node/Expression/Test/ConstantTest.php
deleted file mode 100644
index 867fd09..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Test/ConstantTest.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Test;
-
-use Twig\Compiler;
-use Twig\Node\Expression\TestExpression;
-
-/**
- * Checks if a variable is the exact same value as a constant.
- *
- *    {% if post.status is constant('Post::PUBLISHED') %}
- *      the status attribute is exactly the same as Post::PUBLISHED
- *    {% endif %}
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class ConstantTest extends TestExpression
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('(')
-            ->subcompile($this->getNode('node'))
-            ->raw(' === constant(')
-        ;
-
-        if ($this->getNode('arguments')->hasNode('1')) {
-            $compiler
-                ->raw('get_class(')
-                ->subcompile($this->getNode('arguments')->getNode('1'))
-                ->raw(')."::".')
-            ;
-        }
-
-        $compiler
-            ->subcompile($this->getNode('arguments')->getNode('0'))
-            ->raw('))')
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Test/DefinedTest.php b/generated/php/vendor/twig/twig/src/Node/Expression/Test/DefinedTest.php
deleted file mode 100644
index 73e4372..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Test/DefinedTest.php
+++ /dev/null
@@ -1,68 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Test;
-
-use Twig\Attribute\FirstClassTwigCallableReady;
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\SupportDefinedTestInterface;
-use Twig\Node\Expression\TestExpression;
-use Twig\Node\Node;
-use Twig\TwigTest;
-
-/**
- * Checks if a variable is defined in the current context.
- *
- *    {# defined works with variable names and variable attributes #}
- *    {% if foo is defined %}
- *        {# ... #}
- *    {% endif %}
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class DefinedTest extends TestExpression
-{
-    /**
-     * @param AbstractExpression $node
-     */
-    #[FirstClassTwigCallableReady]
-    public function __construct(Node $node, TwigTest|string $name, ?Node $arguments, int $lineno)
-    {
-        if (!$node instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "node" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $node::class);
-        }
-
-        if (!$node instanceof SupportDefinedTestInterface) {
-            throw new SyntaxError('The "defined" test only works with simple variables.', $lineno);
-        }
-
-        $node->enableDefinedTest();
-
-        if (\is_string($name) && 'defined' !== $name) {
-            trigger_deprecation('twig/twig', '3.12', 'Creating a "DefinedTest" instance with a test name that is not "defined" is deprecated.');
-        }
-
-        parent::__construct($node, $name, $arguments, $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->subcompile($this->getNode('node'));
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // the `defined` test does not coerce its node to string (it only inspects existence)
-        return [];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Test/DivisiblebyTest.php b/generated/php/vendor/twig/twig/src/Node/Expression/Test/DivisiblebyTest.php
deleted file mode 100644
index ab9dd41..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Test/DivisiblebyTest.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Test;
-
-use Twig\Compiler;
-use Twig\Node\Expression\TestExpression;
-
-/**
- * Checks if a variable is divisible by a number.
- *
- *  {% if loop.index is divisible by(3) %}
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class DivisiblebyTest extends TestExpression
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('(0 == ')
-            ->subcompile($this->getNode('node'))
-            ->raw(' % ')
-            ->subcompile($this->getNode('arguments')->getNode('0'))
-            ->raw(')')
-        ;
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // PHP `%` rejects Stringable with a TypeError, no coercion
-        return [];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Test/EvenTest.php b/generated/php/vendor/twig/twig/src/Node/Expression/Test/EvenTest.php
deleted file mode 100644
index 81a06aa..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Test/EvenTest.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Test;
-
-use Twig\Compiler;
-use Twig\Node\Expression\TestExpression;
-
-/**
- * Checks if a number is even.
- *
- *  {{ var is even }}
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class EvenTest extends TestExpression
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('(')
-            ->subcompile($this->getNode('node'))
-            ->raw(' % 2 == 0')
-            ->raw(')')
-        ;
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // PHP `%` rejects Stringable with a TypeError, no coercion
-        return [];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Test/NullTest.php b/generated/php/vendor/twig/twig/src/Node/Expression/Test/NullTest.php
deleted file mode 100644
index 904aef9..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Test/NullTest.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Test;
-
-use Twig\Compiler;
-use Twig\Node\Expression\TestExpression;
-
-/**
- * Checks that an expression is null.
- *
- *  {{ var is none }}
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class NullTest extends TestExpression
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('(null === ')
-            ->subcompile($this->getNode('node'))
-            ->raw(')')
-        ;
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // `=== null` is strict, no coercion
-        return [];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Test/OddTest.php b/generated/php/vendor/twig/twig/src/Node/Expression/Test/OddTest.php
deleted file mode 100644
index 967c353..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Test/OddTest.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Test;
-
-use Twig\Compiler;
-use Twig\Node\Expression\TestExpression;
-
-/**
- * Checks if a number is odd.
- *
- *  {{ var is odd }}
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class OddTest extends TestExpression
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('(')
-            ->subcompile($this->getNode('node'))
-            ->raw(' % 2 != 0')
-            ->raw(')')
-        ;
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // PHP `%` rejects Stringable with a TypeError, no coercion
-        return [];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Test/SameasTest.php b/generated/php/vendor/twig/twig/src/Node/Expression/Test/SameasTest.php
deleted file mode 100644
index cc4d723..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Test/SameasTest.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Test;
-
-use Twig\Compiler;
-use Twig\Node\Expression\TestExpression;
-
-/**
- * Checks if a variable is the same as another one (=== in PHP).
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class SameasTest extends TestExpression
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('(')
-            ->subcompile($this->getNode('node'))
-            ->raw(' === ')
-            ->subcompile($this->getNode('arguments')->getNode('0'))
-            ->raw(')')
-        ;
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // `===` is strict, no coercion
-        return [];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Test/TrueTest.php b/generated/php/vendor/twig/twig/src/Node/Expression/Test/TrueTest.php
deleted file mode 100644
index f0c49d4..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Test/TrueTest.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Test;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnPrimitiveTypeInterface;
-use Twig\Node\Expression\TestExpression;
-use Twig\Node\Node;
-use Twig\TwigTest;
-
-/**
- * Checks that an expression is true.
- *
- *  {{ var is true }}
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class TrueTest extends TestExpression
-{
-    public static function wrap(Node $node): Node
-    {
-        if ($node instanceof ReturnPrimitiveTypeInterface) {
-            return $node;
-        }
-
-        return new self($node, new TwigTest('true', null, ['always_allowed_in_sandbox' => true]), null, $node->getTemplateLine());
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->raw('(($tmp = ')
-            ->subcompile($this->getNode('node'))
-            ->raw(') && $tmp instanceof Markup ? (string) $tmp : $tmp)')
-        ;
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // the `(string)` cast only fires for Markup instances, whose __toString is always allowed
-        return [];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/TestExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/TestExpression.php
deleted file mode 100644
index 4d81239..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/TestExpression.php
+++ /dev/null
@@ -1,91 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Attribute\FirstClassTwigCallableReady;
-use Twig\Compiler;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\NameDeprecation;
-use Twig\Node\Node;
-use Twig\TwigTest;
-
-class TestExpression extends CallExpression implements ReturnBoolInterface, CoercesChildrenToStringInterface
-{
-    #[FirstClassTwigCallableReady]
-    /**
-     * @param AbstractExpression $node
-     */
-    public function __construct(Node $node, string|TwigTest $test, ?Node $arguments, int $lineno)
-    {
-        if (!$node instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance to the "node" argument of "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $node::class);
-        }
-
-        $nodes = ['node' => $node];
-        if (null !== $arguments) {
-            $nodes['arguments'] = $arguments;
-        }
-
-        if ($test instanceof TwigTest) {
-            $name = $test->getName();
-        } else {
-            $name = $test;
-            trigger_deprecation('twig/twig', '3.12', 'Not passing an instance of "TwigTest" when creating a "%s" test of type "%s" is deprecated.', $name, static::class);
-        }
-
-        parent::__construct($nodes, ['name' => $name, 'type' => 'test'], $lineno);
-
-        if ($test instanceof TwigTest) {
-            $this->setAttribute('twig_callable', $test);
-        }
-
-        $this->deprecateAttribute('arguments', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('callable', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('is_variadic', new NameDeprecation('twig/twig', '3.12'));
-        $this->deprecateAttribute('dynamic_name', new NameDeprecation('twig/twig', '3.12'));
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $name = $this->getAttribute('name');
-        if ($this->hasAttribute('twig_callable')) {
-            $name = $this->getAttribute('twig_callable')->getName();
-            if ($name !== $this->getAttribute('name')) {
-                trigger_deprecation('twig/twig', '3.12', 'Changing the value of a "test" node in a NodeVisitor class is not supported anymore.');
-                $this->removeAttribute('twig_callable');
-            }
-        }
-
-        if (!$this->hasAttribute('twig_callable')) {
-            $this->setAttribute('twig_callable', $compiler->getEnvironment()->getTest($this->getAttribute('name')));
-        }
-
-        $this->compileCallable($compiler);
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        $names = [];
-
-        // the `empty` test triggers an implicit string coercion through `CoreExtension::testEmpty()`
-        if ('empty' === $this->getAttribute('name')) {
-            $names[] = 'node';
-        }
-
-        // a test may coerce its arguments to string (the host PHP code is opaque to Twig)
-        if ($this->hasNode('arguments')) {
-            $names[] = 'arguments';
-        }
-
-        return $names;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/AbstractUnary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Unary/AbstractUnary.php
deleted file mode 100644
index 09f3d09..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/AbstractUnary.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Unary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Node;
-
-abstract class AbstractUnary extends AbstractExpression implements UnaryInterface
-{
-    /**
-     * @param AbstractExpression $node
-     */
-    public function __construct(Node $node, int $lineno)
-    {
-        if (!$node instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance argument to "%s" is deprecated ("%s" given).', AbstractExpression::class, static::class, $node::class);
-        }
-
-        parent::__construct(['node' => $node], ['with_parentheses' => false], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        if ($this->hasExplicitParentheses()) {
-            $compiler->raw('(');
-        } else {
-            $compiler->raw(' ');
-        }
-        $this->operator($compiler);
-        $compiler->subcompile($this->getNode('node'));
-        if ($this->hasExplicitParentheses()) {
-            $compiler->raw(')');
-        }
-    }
-
-    abstract public function operator(Compiler $compiler): Compiler;
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/NegUnary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Unary/NegUnary.php
deleted file mode 100644
index dc2f235..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/NegUnary.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Unary;
-
-use Twig\Compiler;
-
-class NegUnary extends AbstractUnary
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('-');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/NotUnary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Unary/NotUnary.php
deleted file mode 100644
index 6bdf880..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/NotUnary.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Unary;
-
-use Twig\Compiler;
-use Twig\Node\Expression\ReturnBoolInterface;
-use Twig\Node\Expression\Test\TrueTest;
-use Twig\Node\Node;
-
-class NotUnary extends AbstractUnary implements ReturnBoolInterface
-{
-    public function __construct(Node $node, int $lineno)
-    {
-        parent::__construct(TrueTest::wrap($node), $lineno);
-    }
-
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('!');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/PosUnary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Unary/PosUnary.php
deleted file mode 100644
index 4b0a062..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/PosUnary.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Unary;
-
-use Twig\Compiler;
-
-class PosUnary extends AbstractUnary
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('+');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/SpreadUnary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Unary/SpreadUnary.php
deleted file mode 100644
index f99072c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/SpreadUnary.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Unary;
-
-use Twig\Compiler;
-
-final class SpreadUnary extends AbstractUnary
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('...');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/StringCastUnary.php b/generated/php/vendor/twig/twig/src/Node/Expression/Unary/StringCastUnary.php
deleted file mode 100644
index 87ea17c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/StringCastUnary.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Unary;
-
-use Twig\Compiler;
-
-final class StringCastUnary extends AbstractUnary
-{
-    public function operator(Compiler $compiler): Compiler
-    {
-        return $compiler->raw('(string)');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/UnaryInterface.php b/generated/php/vendor/twig/twig/src/Node/Expression/Unary/UnaryInterface.php
deleted file mode 100644
index b094ef4..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Unary/UnaryInterface.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Unary;
-
-use Twig\Node\Expression\AbstractExpression;
-
-/**
- * @internal
- */
-interface UnaryInterface
-{
-    public function __construct(AbstractExpression $node, int $lineno);
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/AssignContextVariable.php b/generated/php/vendor/twig/twig/src/Node/Expression/Variable/AssignContextVariable.php
deleted file mode 100644
index 30d8106..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/AssignContextVariable.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Variable;
-
-use Twig\Node\Expression\AssignNameExpression;
-
-final class AssignContextVariable extends AssignNameExpression
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/AssignTemplateVariable.php b/generated/php/vendor/twig/twig/src/Node/Expression/Variable/AssignTemplateVariable.php
deleted file mode 100644
index 98bcdc1..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/AssignTemplateVariable.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Variable;
-
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-
-final class AssignTemplateVariable extends AbstractExpression
-{
-    public function __construct(TemplateVariable $var, bool $global = true)
-    {
-        parent::__construct(['var' => $var], ['global' => $global], $var->getTemplateLine());
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        /** @var TemplateVariable $var */
-        $var = $this->nodes['var'];
-
-        $compiler
-            ->addDebugInfo($this)
-            ->write('$macros[')
-            ->string($var->getName($compiler))
-            ->raw('] = ')
-        ;
-
-        if ($this->getAttribute('global')) {
-            $compiler
-                ->raw('$this->macros[')
-                ->string($var->getName($compiler))
-                ->raw('] = ')
-            ;
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/ContextVariable.php b/generated/php/vendor/twig/twig/src/Node/Expression/Variable/ContextVariable.php
deleted file mode 100644
index 01bbcb7..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/ContextVariable.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Variable;
-
-use Twig\Node\Expression\NameExpression;
-
-class ContextVariable extends NameExpression
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/LocalVariable.php b/generated/php/vendor/twig/twig/src/Node/Expression/Variable/LocalVariable.php
deleted file mode 100644
index a5ee175..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/LocalVariable.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Variable;
-
-use Twig\Node\Expression\TempNameExpression;
-
-final class LocalVariable extends TempNameExpression
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/TemplateVariable.php b/generated/php/vendor/twig/twig/src/Node/Expression/Variable/TemplateVariable.php
deleted file mode 100644
index 4dd0662..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/Variable/TemplateVariable.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression\Variable;
-
-use Twig\Compiler;
-use Twig\Node\Expression\TempNameExpression;
-
-class TemplateVariable extends TempNameExpression
-{
-    public function getName(Compiler $compiler): string
-    {
-        if (null === $this->getAttribute('name')) {
-            $this->setAttribute('name', $compiler->getVarName());
-        }
-
-        return $this->getAttribute('name');
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $name = $this->getName($compiler);
-
-        if ('_self' === $name) {
-            $compiler->raw('$this');
-        } else {
-            $compiler
-                ->raw('$macros[')
-                ->string($name)
-                ->raw(']')
-            ;
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Expression/VariadicExpression.php b/generated/php/vendor/twig/twig/src/Node/Expression/VariadicExpression.php
deleted file mode 100644
index a1bdb48..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Expression/VariadicExpression.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node\Expression;
-
-use Twig\Compiler;
-
-class VariadicExpression extends ArrayExpression
-{
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->raw('...');
-
-        parent::compile($compiler);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/FlushNode.php b/generated/php/vendor/twig/twig/src/Node/FlushNode.php
deleted file mode 100644
index ff3bd1c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/FlushNode.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents a flush node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class FlushNode extends Node
-{
-    public function __construct(int $lineno)
-    {
-        parent::__construct([], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->addDebugInfo($this);
-
-        if ($compiler->getEnvironment()->useYield()) {
-            $compiler->write("yield '';\n");
-        }
-
-        $compiler->write("flush();\n");
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/ForElseNode.php b/generated/php/vendor/twig/twig/src/Node/ForElseNode.php
deleted file mode 100644
index 56d6646..0000000
--- a/generated/php/vendor/twig/twig/src/Node/ForElseNode.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents an else node in a for loop.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class ForElseNode extends Node
-{
-    public function __construct(Node $body, int $lineno)
-    {
-        parent::__construct(['body' => $body], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->addDebugInfo($this)
-            ->write("if (!\$context['_iterated']) {\n")
-            ->indent()
-            ->subcompile($this->getNode('body'))
-            ->outdent()
-            ->write("}\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/ForLoopNode.php b/generated/php/vendor/twig/twig/src/Node/ForLoopNode.php
deleted file mode 100644
index 1f0a4f3..0000000
--- a/generated/php/vendor/twig/twig/src/Node/ForLoopNode.php
+++ /dev/null
@@ -1,51 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Internal node used by the for node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class ForLoopNode extends Node
-{
-    public function __construct(int $lineno)
-    {
-        parent::__construct([], ['with_loop' => false, 'ifexpr' => false, 'else' => false], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        if ($this->getAttribute('else')) {
-            $compiler->write("\$context['_iterated'] = true;\n");
-        }
-
-        if ($this->getAttribute('with_loop')) {
-            $compiler
-                ->write("++\$context['loop']['index0'];\n")
-                ->write("++\$context['loop']['index'];\n")
-                ->write("\$context['loop']['first'] = false;\n")
-                ->write("if (isset(\$context['loop']['revindex0'], \$context['loop']['revindex'])) {\n")
-                ->indent()
-                ->write("--\$context['loop']['revindex0'];\n")
-                ->write("--\$context['loop']['revindex'];\n")
-                ->write("\$context['loop']['last'] = 0 === \$context['loop']['revindex0'];\n")
-                ->outdent()
-                ->write("}\n")
-            ;
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/ForNode.php b/generated/php/vendor/twig/twig/src/Node/ForNode.php
deleted file mode 100644
index fda4071..0000000
--- a/generated/php/vendor/twig/twig/src/Node/ForNode.php
+++ /dev/null
@@ -1,123 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\Variable\AssignContextVariable;
-
-/**
- * Represents a for node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class ForNode extends Node
-{
-    private $loop;
-
-    public function __construct(AssignContextVariable $keyTarget, AssignContextVariable $valueTarget, AbstractExpression $seq, ?Node $ifexpr, Node $body, ?Node $else, int $lineno)
-    {
-        $body = new Nodes([$body, $this->loop = new ForLoopNode($lineno)]);
-
-        if (null !== $ifexpr) {
-            trigger_deprecation('twig/twig', '3.19', \sprintf('Passing not-null to the "ifexpr" argument of the "%s" constructor is deprecated.', static::class));
-        }
-
-        if (null !== $else && !$else instanceof ForElseNode) {
-            trigger_deprecation('twig/twig', '3.19', \sprintf('Not passing an instance of "%s" to the "else" argument of the "%s" constructor is deprecated.', ForElseNode::class, static::class));
-
-            $else = new ForElseNode($else, $else->getTemplateLine());
-        }
-
-        $nodes = ['key_target' => $keyTarget, 'value_target' => $valueTarget, 'seq' => $seq, 'body' => $body];
-        if (null !== $else) {
-            $nodes['else'] = $else;
-        }
-
-        parent::__construct($nodes, ['with_loop' => true], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->addDebugInfo($this)
-            ->write("\$context['_parent'] = \$context;\n")
-            ->write("\$context['_seq'] = CoreExtension::ensureTraversable(")
-            ->subcompile($this->getNode('seq'))
-            ->raw(");\n")
-        ;
-
-        if ($this->hasNode('else')) {
-            $compiler->write("\$context['_iterated'] = false;\n");
-        }
-
-        if ($this->getAttribute('with_loop')) {
-            $compiler
-                ->write("\$context['loop'] = [\n")
-                ->write("  'parent' => \$context['_parent'],\n")
-                ->write("  'index0' => 0,\n")
-                ->write("  'index'  => 1,\n")
-                ->write("  'first'  => true,\n")
-                ->write("];\n")
-                ->write("if (is_array(\$context['_seq']) || (is_object(\$context['_seq']) && \$context['_seq'] instanceof \Countable)) {\n")
-                ->indent()
-                ->write("\$length = count(\$context['_seq']);\n")
-                ->write("\$context['loop']['revindex0'] = \$length - 1;\n")
-                ->write("\$context['loop']['revindex'] = \$length;\n")
-                ->write("\$context['loop']['length'] = \$length;\n")
-                ->write("\$context['loop']['last'] = 1 === \$length;\n")
-                ->outdent()
-                ->write("}\n")
-            ;
-        }
-
-        $this->loop->setAttribute('else', $this->hasNode('else'));
-        $this->loop->setAttribute('with_loop', $this->getAttribute('with_loop'));
-
-        $compiler
-            ->write("foreach (\$context['_seq'] as ")
-            ->subcompile($this->getNode('key_target'))
-            ->raw(' => ')
-            ->subcompile($this->getNode('value_target'))
-            ->raw(") {\n")
-            ->indent()
-            ->subcompile($this->getNode('body'))
-            ->outdent()
-            ->write("}\n")
-        ;
-
-        if ($this->hasNode('else')) {
-            $compiler->subcompile($this->getNode('else'));
-        }
-
-        $compiler->write("\$_parent = \$context['_parent'];\n");
-
-        // remove some "private" loop variables (needed for nested loops)
-        $compiler->write('unset($context[\'_seq\'], $context[\''.$this->getNode('key_target')->getAttribute('name').'\'], $context[\''.$this->getNode('value_target')->getAttribute('name').'\'], $context[\'_parent\']');
-        if ($this->hasNode('else')) {
-            $compiler->raw(', $context[\'_iterated\']');
-        }
-        if ($this->getAttribute('with_loop')) {
-            $compiler->raw(', $context[\'loop\']');
-        }
-        $compiler->raw(");\n");
-
-        // keep the values set in the inner context for variables defined in the outer context
-        $compiler
-            ->write("\$context = array_intersect_key(\$context, \$_parent);\n")
-            ->write("\$context += \$_parent;\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/IfNode.php b/generated/php/vendor/twig/twig/src/Node/IfNode.php
deleted file mode 100644
index c7a7f4b..0000000
--- a/generated/php/vendor/twig/twig/src/Node/IfNode.php
+++ /dev/null
@@ -1,79 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\Test\TrueTest;
-
-/**
- * Represents an if node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class IfNode extends Node
-{
-    public function __construct(Node $tests, ?Node $else, int $lineno)
-    {
-        for ($i = 0, $count = \count($tests); $i < $count; $i += 2) {
-            $tests->setNode($i, TrueTest::wrap($tests->getNode((string) $i)));
-        }
-        $nodes = ['tests' => $tests];
-        if (null !== $else) {
-            $nodes['else'] = $else;
-        }
-
-        parent::__construct($nodes, [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->addDebugInfo($this);
-        for ($i = 0, $count = \count($this->getNode('tests')); $i < $count; $i += 2) {
-            if ($i > 0) {
-                $compiler
-                    ->outdent()
-                    ->write('} elseif (')
-                ;
-            } else {
-                $compiler
-                    ->write('if (')
-                ;
-            }
-
-            $compiler
-                ->subcompile($this->getNode('tests')->getNode((string) $i))
-                ->raw(") {\n")
-                ->indent()
-            ;
-            // The node might not exists if the content is empty
-            if ($this->getNode('tests')->hasNode((string) ($i + 1))) {
-                $compiler->subcompile($this->getNode('tests')->getNode((string) ($i + 1)));
-            }
-        }
-
-        if ($this->hasNode('else')) {
-            $compiler
-                ->outdent()
-                ->write("} else {\n")
-                ->indent()
-                ->subcompile($this->getNode('else'))
-            ;
-        }
-
-        $compiler
-            ->outdent()
-            ->write("}\n");
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/ImportNode.php b/generated/php/vendor/twig/twig/src/Node/ImportNode.php
deleted file mode 100644
index ab7fe0f..0000000
--- a/generated/php/vendor/twig/twig/src/Node/ImportNode.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\Variable\AssignTemplateVariable;
-use Twig\Node\Expression\Variable\ContextVariable;
-
-/**
- * Represents an import node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class ImportNode extends Node implements CoercesChildrenToStringInterface
-{
-    public function __construct(AbstractExpression $expr, AbstractExpression|AssignTemplateVariable $var, int $lineno)
-    {
-        if (\func_num_args() > 3) {
-            trigger_deprecation('twig/twig', '3.15', \sprintf('Passing more than 3 arguments to "%s()" is deprecated.', __METHOD__));
-        }
-
-        if (!$var instanceof AssignTemplateVariable) {
-            trigger_deprecation('twig/twig', '3.15', \sprintf('Passing a "%s" instance as the second argument of "%s" is deprecated, pass a "%s" instead.', $var::class, __CLASS__, AssignTemplateVariable::class));
-
-            $var = new AssignTemplateVariable($var->getAttribute('name'), $lineno);
-        }
-
-        parent::__construct(['expr' => $expr, 'var' => $var], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->subcompile($this->getNode('var'));
-
-        if ($this->getNode('expr') instanceof ContextVariable && '_self' === $this->getNode('expr')->getAttribute('name')) {
-            $compiler->raw('$this');
-        } else {
-            $compiler
-                ->raw('$this->load(')
-                ->subcompile($this->getNode('expr'))
-                ->raw(', ')
-                ->repr($this->getTemplateLine())
-                ->raw(')->unwrap()')
-            ;
-        }
-
-        $compiler->raw(";\n");
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // the loader resolves the template-name expression by coercing it to a string
-        return ['expr'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/IncludeNode.php b/generated/php/vendor/twig/twig/src/Node/IncludeNode.php
deleted file mode 100644
index 3adf415..0000000
--- a/generated/php/vendor/twig/twig/src/Node/IncludeNode.php
+++ /dev/null
@@ -1,121 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-
-/**
- * Represents an include node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class IncludeNode extends Node implements NodeOutputInterface, CoercesChildrenToStringInterface
-{
-    public function __construct(AbstractExpression $expr, ?AbstractExpression $variables, bool $only, bool $ignoreMissing, int $lineno)
-    {
-        $nodes = ['expr' => $expr];
-        if (null !== $variables) {
-            $nodes['variables'] = $variables;
-        }
-
-        parent::__construct($nodes, ['only' => $only, 'ignore_missing' => $ignoreMissing], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->addDebugInfo($this);
-
-        if ($this->getAttribute('ignore_missing')) {
-            $template = $compiler->getVarName();
-
-            $compiler
-                ->write("try {\n")
-                ->indent()
-                ->write(\sprintf('$%s = ', $template))
-            ;
-
-            $this->addGetTemplate($compiler, $template);
-
-            $compiler
-                ->raw(";\n")
-                ->outdent()
-                ->write("} catch (LoaderError \$e) {\n")
-                ->indent()
-                ->write("// ignore missing template\n")
-                ->write(\sprintf("\$$template = null;\n", $template))
-                ->outdent()
-                ->write("}\n")
-                ->write(\sprintf("if ($%s) {\n", $template))
-                ->indent()
-            ;
-
-            $compiler->write(\sprintf('yield from $%s->unwrap()->yield(', $template));
-
-            $this->addTemplateArguments($compiler);
-            $compiler
-                ->raw(");\n")
-                ->outdent()
-                ->write("}\n")
-            ;
-        } else {
-            $compiler->write('yield from ');
-            $this->addGetTemplate($compiler);
-            $compiler->raw('->unwrap()->yield(');
-            $this->addTemplateArguments($compiler);
-            $compiler->raw(");\n");
-        }
-    }
-
-    /**
-     * @return void
-     */
-    protected function addGetTemplate(Compiler $compiler/* , string $template = '' */)
-    {
-        $compiler
-            ->raw('$this->load(')
-            ->subcompile($this->getNode('expr'))
-            ->raw(', ')
-            ->repr($this->getTemplateLine())
-            ->raw(')')
-        ;
-    }
-
-    /**
-     * @return void
-     */
-    protected function addTemplateArguments(Compiler $compiler)
-    {
-        if (!$this->hasNode('variables')) {
-            $compiler->raw(false === $this->getAttribute('only') ? '$context' : '[]');
-        } elseif (false === $this->getAttribute('only')) {
-            $compiler
-                ->raw('CoreExtension::merge($context, ')
-                ->subcompile($this->getNode('variables'))
-                ->raw(')')
-            ;
-        } else {
-            $compiler->raw('CoreExtension::toArray(');
-            $compiler->subcompile($this->getNode('variables'));
-            $compiler->raw(')');
-        }
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // the loader resolves the template-name expression by coercing it to a string
-        return ['expr'];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/MacroNode.php b/generated/php/vendor/twig/twig/src/Node/MacroNode.php
deleted file mode 100644
index db3ca45..0000000
--- a/generated/php/vendor/twig/twig/src/Node/MacroNode.php
+++ /dev/null
@@ -1,121 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\Variable\LocalVariable;
-
-/**
- * Represents a macro node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class MacroNode extends Node
-{
-    public const VARARGS_NAME = 'varargs';
-
-    /**
-     * @param BodyNode        $body
-     * @param ArrayExpression $arguments
-     */
-    public function __construct(string $name, Node $body, Node $arguments, int $lineno)
-    {
-        if (!$body instanceof BodyNode) {
-            trigger_deprecation('twig/twig', '3.12', \sprintf('Not passing a "%s" instance as the "body" argument of the "%s" constructor is deprecated ("%s" given).', BodyNode::class, static::class, $body::class));
-        }
-
-        if (!$arguments instanceof ArrayExpression) {
-            trigger_deprecation('twig/twig', '3.15', \sprintf('Not passing a "%s" instance as the "arguments" argument of the "%s" constructor is deprecated ("%s" given).', ArrayExpression::class, static::class, $arguments::class));
-
-            $args = new ArrayExpression([], $arguments->getTemplateLine());
-            foreach ($arguments as $n => $default) {
-                $args->addElement($default, new LocalVariable($n, $default->getTemplateLine()));
-            }
-            $arguments = $args;
-        }
-
-        foreach ($arguments->getKeyValuePairs() as $pair) {
-            if ("\u{035C}".self::VARARGS_NAME === $pair['key']->getAttribute('name')) {
-                throw new SyntaxError(\sprintf('The argument "%s" in macro "%s" cannot be defined because the variable "%s" is reserved for arbitrary arguments.', self::VARARGS_NAME, $name, self::VARARGS_NAME), $pair['value']->getTemplateLine(), $pair['value']->getSourceContext());
-            }
-        }
-
-        parent::__construct(['body' => $body, 'arguments' => $arguments], ['name' => $name], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->addDebugInfo($this)
-            ->write(\sprintf('public function macro_%s(', $this->getAttribute('name')))
-        ;
-
-        /** @var ArrayExpression $arguments */
-        $arguments = $this->getNode('arguments');
-        foreach ($arguments->getKeyValuePairs() as $pair) {
-            $name = $pair['key'];
-            $default = $pair['value'];
-            $compiler
-                ->subcompile($name)
-                ->raw(' = ')
-                ->subcompile($default)
-                ->raw(', ')
-            ;
-        }
-
-        $compiler
-            ->raw('...$varargs')
-            ->raw("): string|Markup\n")
-            ->write("{\n")
-            ->indent()
-            ->write("\$macros = \$this->macros;\n")
-            ->write("\$context = [\n")
-            ->indent()
-        ;
-
-        foreach ($arguments->getKeyValuePairs() as $pair) {
-            $name = $pair['key'];
-            $var = $name->getAttribute('name');
-            if (str_starts_with($var, "\u{035C}")) {
-                $var = substr($var, \strlen("\u{035C}"));
-            }
-            $compiler
-                ->write('')
-                ->string($var)
-                ->raw(' => ')
-                ->subcompile($name)
-                ->raw(",\n")
-            ;
-        }
-
-        $node = new CaptureNode($this->getNode('body'), $this->getNode('body')->lineno);
-
-        $compiler
-            ->write('')
-            ->string(self::VARARGS_NAME)
-            ->raw(' => ')
-            ->raw("\$varargs,\n")
-            ->outdent()
-            ->write("] + \$this->env->getGlobals();\n\n")
-            ->write("\$blocks = [];\n\n")
-            ->write('return ')
-            ->subcompile($node)
-            ->raw("\n")
-            ->outdent()
-            ->write("}\n\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/ModuleNode.php b/generated/php/vendor/twig/twig/src/Node/ModuleNode.php
deleted file mode 100644
index fd43246..0000000
--- a/generated/php/vendor/twig/twig/src/Node/ModuleNode.php
+++ /dev/null
@@ -1,522 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Source;
-
-/**
- * Represents a module node.
- *
- * If you need to customize the behavior of the generated class, add nodes to
- * the following nodes: display_start, display_end, constructor_start,
- * constructor_end, and class_end.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-final class ModuleNode extends Node implements CoercesChildrenToStringInterface
-{
-    /**
-     * @param BodyNode $body
-     */
-    public function __construct(Node $body, ?AbstractExpression $parent, Node $blocks, Node $macros, Node $traits, $embeddedTemplates, Source $source)
-    {
-        if (!$body instanceof BodyNode) {
-            trigger_deprecation('twig/twig', '3.12', \sprintf('Not passing a "%s" instance as the "body" argument of the "%s" constructor is deprecated.', BodyNode::class, static::class));
-        }
-        if (!$embeddedTemplates instanceof Node) {
-            trigger_deprecation('twig/twig', '3.21', \sprintf('Not passing a "%s" instance as the "embedded_templates" argument of the "%s" constructor is deprecated.', Node::class, static::class));
-
-            if (null !== $embeddedTemplates) {
-                $embeddedTemplates = new Nodes($embeddedTemplates);
-            } else {
-                $embeddedTemplates = new EmptyNode();
-            }
-        }
-
-        $nodes = [
-            'body' => $body,
-            'blocks' => $blocks,
-            'macros' => $macros,
-            'traits' => $traits,
-            'display_start' => new Nodes(),
-            'display_end' => new Nodes(),
-            'constructor_start' => new Nodes(),
-            'constructor_end' => new Nodes(),
-            'class_end' => new Nodes(),
-        ];
-        if (null !== $parent) {
-            $nodes['parent'] = $parent;
-        }
-
-        // embedded templates are set as attributes so that they are only visited once by the visitors
-        parent::__construct($nodes, [
-            'index' => null,
-            'embedded_templates' => $embeddedTemplates,
-        ], 1);
-
-        // populate the template name of all node children
-        $this->setSourceContext($source);
-    }
-
-    /**
-     * @return void
-     */
-    public function setIndex($index)
-    {
-        $this->setAttribute('index', $index);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $this->compileTemplate($compiler);
-
-        foreach ($this->getAttribute('embedded_templates') as $template) {
-            $compiler->subcompile($template);
-        }
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        // the parent expression is resolved through the loader, which coerces it to a string
-        return $this->hasNode('parent') ? ['parent'] : [];
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileTemplate(Compiler $compiler)
-    {
-        if (!$this->getAttribute('index')) {
-            $compiler->write('<?php');
-        }
-
-        $this->compileClassHeader($compiler);
-
-        $this->compileConstructor($compiler);
-
-        $this->compileGetParent($compiler);
-
-        $this->compileDisplay($compiler);
-
-        $compiler->subcompile($this->getNode('blocks'));
-
-        $this->compileMacros($compiler);
-
-        $this->compileGetTemplateName($compiler);
-
-        $this->compileIsTraitable($compiler);
-
-        $this->compileDebugInfo($compiler);
-
-        $this->compileGetSourceContext($compiler);
-
-        $this->compileClassFooter($compiler);
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileGetParent(Compiler $compiler)
-    {
-        if (!$this->hasNode('parent')) {
-            return;
-        }
-        $parent = $this->getNode('parent');
-
-        $compiler
-            ->write("protected function doGetParent(array \$context): bool|string|Template|TemplateWrapper\n", "{\n")
-            ->indent()
-            ->addDebugInfo($parent)
-            ->write('return ')
-        ;
-
-        if ($parent instanceof ConstantExpression) {
-            $compiler->subcompile($parent);
-        } else {
-            $compiler
-                ->raw('$this->load(')
-                ->subcompile($parent)
-                ->raw(', ')
-                ->repr($parent->getTemplateLine())
-                ->raw(')')
-            ;
-        }
-
-        $compiler
-            ->raw(";\n")
-            ->outdent()
-            ->write("}\n\n")
-        ;
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileClassHeader(Compiler $compiler)
-    {
-        $compiler
-            ->write("\n\n")
-        ;
-        if (!$this->getAttribute('index')) {
-            $compiler
-                ->write("use Twig\Environment;\n")
-                ->write("use Twig\Error\LoaderError;\n")
-                ->write("use Twig\Error\RuntimeError;\n")
-                ->write("use Twig\Extension\CoreExtension;\n")
-                ->write("use Twig\Extension\SandboxExtension;\n")
-                ->write("use Twig\Markup;\n")
-                ->write("use Twig\Sandbox\SecurityError;\n")
-                ->write("use Twig\Sandbox\SecurityNotAllowedTagError;\n")
-                ->write("use Twig\Sandbox\SecurityNotAllowedFilterError;\n")
-                ->write("use Twig\Sandbox\SecurityNotAllowedFunctionError;\n")
-                ->write("use Twig\Sandbox\SecurityNotAllowedTestError;\n")
-                ->write("use Twig\Source;\n")
-                ->write("use Twig\Template;\n")
-                ->write("use Twig\TemplateWrapper;\n")
-                ->write("\n")
-            ;
-        }
-        $compiler
-            // if the template name contains */, add a blank to avoid a PHP parse error
-            ->write('/* '.str_replace('*/', '* /', $this->getSourceContext()->getName())." */\n")
-            ->write('class '.$compiler->getEnvironment()->getTemplateClass($this->getSourceContext()->getName(), $this->getAttribute('index')))
-            ->raw(" extends Template\n")
-            ->write("{\n")
-            ->indent()
-            ->write("private Source \$source;\n")
-            ->write("/**\n")
-            ->write(" * @var array<string, Template>\n")
-            ->write(" */\n")
-            ->write("private array \$macros = [];\n\n")
-        ;
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileConstructor(Compiler $compiler)
-    {
-        $compiler
-            ->write("public function __construct(Environment \$env)\n", "{\n")
-            ->indent()
-            ->subcompile($this->getNode('constructor_start'))
-            ->write("parent::__construct(\$env);\n\n")
-            ->write("\$this->source = \$this->getSourceContext();\n\n")
-        ;
-
-        // parent
-        if (!$this->hasNode('parent')) {
-            $compiler->write("\$this->parent = false;\n\n");
-        }
-
-        $countTraits = \count($this->getNode('traits'));
-        if ($countTraits) {
-            // traits
-            foreach ($this->getNode('traits') as $i => $trait) {
-                $node = $trait->getNode('template');
-
-                $compiler
-                    ->addDebugInfo($node)
-                    ->write(\sprintf('$_trait_%s = $this->load(', $i))
-                    ->subcompile($node)
-                    ->raw(', ')
-                    ->repr($node->getTemplateLine())
-                    ->raw(");\n")
-                    ->write(\sprintf("if (!\$_trait_%s->unwrap()->isTraitable()) {\n", $i))
-                    ->indent()
-                    ->write("throw new RuntimeError('Template \"'.")
-                    ->subcompile($trait->getNode('template'))
-                    ->raw(".'\" cannot be used as a trait.', ")
-                    ->repr($node->getTemplateLine())
-                    ->raw(", \$this->source);\n")
-                    ->outdent()
-                    ->write("}\n")
-                    ->write(\sprintf("\$_trait_%s_blocks = \$_trait_%s->unwrap()->getBlocks();\n\n", $i, $i))
-                ;
-
-                foreach ($trait->getNode('targets') as $key => $value) {
-                    $compiler
-                        ->write(\sprintf('if (!isset($_trait_%s_blocks[', $i))
-                        ->string($key)
-                        ->raw("])) {\n")
-                        ->indent()
-                        ->write("throw new RuntimeError(sprintf('Block \"%s\" is not defined in trait \"%s\".', ")
-                        ->string($key)
-                        ->raw(', ')
-                        ->subcompile($trait->getNode('template'))
-                        ->raw('), ')
-                        ->repr($node->getTemplateLine())
-                        ->raw(", \$this->source);\n")
-                        ->outdent()
-                        ->write("}\n\n")
-
-                        ->write(\sprintf('$_trait_%s_blocks[', $i))
-                        ->subcompile($value)
-                        ->raw(\sprintf('] = $_trait_%s_blocks[', $i))
-                        ->string($key)
-                        ->raw(\sprintf(']; unset($_trait_%s_blocks[', $i))
-                        ->string($key)
-                        ->raw(']); $this->traitAliases[')
-                        ->subcompile($value)
-                        ->raw('] = ')
-                        ->string($key)
-                        ->raw(";\n\n")
-                    ;
-                }
-            }
-
-            if ($countTraits > 1) {
-                $compiler
-                    ->write("\$this->traits = array_merge(\n")
-                    ->indent()
-                ;
-
-                for ($i = 0; $i < $countTraits; ++$i) {
-                    $compiler
-                        ->write(\sprintf('$_trait_%s_blocks'.($i == $countTraits - 1 ? '' : ',')."\n", $i))
-                    ;
-                }
-
-                $compiler
-                    ->outdent()
-                    ->write(");\n\n")
-                ;
-            } else {
-                $compiler
-                    ->write("\$this->traits = \$_trait_0_blocks;\n\n")
-                ;
-            }
-
-            $compiler
-                ->write("\$this->blocks = array_merge(\n")
-                ->indent()
-                ->write("\$this->traits,\n")
-                ->write("[\n")
-            ;
-        } else {
-            $compiler
-                ->write("\$this->blocks = [\n")
-            ;
-        }
-
-        // blocks
-        $compiler
-            ->indent()
-        ;
-
-        foreach ($this->getNode('blocks') as $name => $node) {
-            $compiler
-                ->write(\sprintf("'%s' => [\$this, 'block_%s'],\n", $name, $name))
-            ;
-        }
-
-        if ($countTraits) {
-            $compiler
-                ->outdent()
-                ->write("]\n")
-                ->outdent()
-                ->write(");\n")
-            ;
-        } else {
-            $compiler
-                ->outdent()
-                ->write("];\n")
-            ;
-        }
-
-        $compiler
-            ->subcompile($this->getNode('constructor_end'))
-            ->outdent()
-            ->write("}\n\n")
-        ;
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileDisplay(Compiler $compiler)
-    {
-        $compiler
-            ->write("protected function doDisplay(array \$context, array \$blocks = []): iterable\n", "{\n")
-            ->indent()
-            ->write("\$macros = \$this->macros;\n")
-            ->subcompile($this->getNode('display_start'))
-            ->subcompile($this->getNode('body'))
-        ;
-
-        if ($this->hasNode('parent')) {
-            $parent = $this->getNode('parent');
-
-            $compiler->addDebugInfo($parent);
-            if ($parent instanceof ConstantExpression) {
-                $compiler
-                    ->write('$this->parent = $this->load(')
-                    ->subcompile($parent)
-                    ->raw(', ')
-                    ->repr($parent->getTemplateLine())
-                    ->raw(");\n")
-                ;
-            }
-            $compiler->write('yield from ');
-
-            if ($parent instanceof ConstantExpression) {
-                $compiler->raw('$this->parent');
-            } else {
-                $compiler->raw('$this->getParent($context)');
-            }
-            $compiler->raw("->unwrap()->yield(\$context, array_merge(\$this->blocks, \$blocks));\n");
-        }
-
-        $compiler->subcompile($this->getNode('display_end'));
-
-        if (!$this->hasNode('parent')) {
-            $compiler->write("yield from [];\n");
-        }
-
-        $compiler
-            ->outdent()
-            ->write("}\n\n")
-        ;
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileClassFooter(Compiler $compiler)
-    {
-        $compiler
-            ->subcompile($this->getNode('class_end'))
-            ->outdent()
-            ->write("}\n")
-        ;
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileMacros(Compiler $compiler)
-    {
-        $compiler->subcompile($this->getNode('macros'));
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileGetTemplateName(Compiler $compiler)
-    {
-        $compiler
-            ->write("/**\n")
-            ->write(" * @codeCoverageIgnore\n")
-            ->write(" */\n")
-            ->write("public function getTemplateName(): string\n", "{\n")
-            ->indent()
-            ->write('return ')
-            ->repr($this->getSourceContext()->getName())
-            ->raw(";\n")
-            ->outdent()
-            ->write("}\n\n")
-        ;
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileIsTraitable(Compiler $compiler)
-    {
-        // A template can be used as a trait if:
-        //   * it has no parent
-        //   * it has no macros
-        //   * it has no body
-        //
-        // Put another way, a template can be used as a trait if it
-        // only contains blocks and use statements.
-        $traitable = !$this->hasNode('parent') && 0 === \count($this->getNode('macros'));
-        if ($traitable) {
-            if ($this->getNode('body') instanceof BodyNode) {
-                $nodes = $this->getNode('body')->getNode('0');
-            } else {
-                $nodes = $this->getNode('body');
-            }
-
-            if (!\count($nodes)) {
-                $nodes = new Nodes([$nodes]);
-            }
-
-            foreach ($nodes as $node) {
-                if (!\count($node)) {
-                    continue;
-                }
-
-                $traitable = false;
-                break;
-            }
-        }
-
-        if ($traitable) {
-            return;
-        }
-
-        $compiler
-            ->write("/**\n")
-            ->write(" * @codeCoverageIgnore\n")
-            ->write(" */\n")
-            ->write("public function isTraitable(): bool\n", "{\n")
-            ->indent()
-            ->write("return false;\n")
-            ->outdent()
-            ->write("}\n\n")
-        ;
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileDebugInfo(Compiler $compiler)
-    {
-        $compiler
-            ->write("/**\n")
-            ->write(" * @codeCoverageIgnore\n")
-            ->write(" */\n")
-            ->write("public function getDebugInfo(): array\n", "{\n")
-            ->indent()
-            ->write(\sprintf("return %s;\n", str_replace("\n", '', var_export(array_reverse($compiler->getDebugInfo(), true), true))))
-            ->outdent()
-            ->write("}\n\n")
-        ;
-    }
-
-    /**
-     * @return void
-     */
-    protected function compileGetSourceContext(Compiler $compiler)
-    {
-        $compiler
-            ->write("public function getSourceContext(): Source\n", "{\n")
-            ->indent()
-            ->write('return new Source(')
-            ->string($compiler->getEnvironment()->isDebug() ? $this->getSourceContext()->getCode() : '')
-            ->raw(', ')
-            ->string($this->getSourceContext()->getName())
-            ->raw(', ')
-            ->string($this->getSourceContext()->getPath())
-            ->raw(");\n")
-            ->outdent()
-            ->write("}\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/NameDeprecation.php b/generated/php/vendor/twig/twig/src/Node/NameDeprecation.php
deleted file mode 100644
index 63ab285..0000000
--- a/generated/php/vendor/twig/twig/src/Node/NameDeprecation.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-/**
- * Represents a deprecation for a named node or attribute on a Node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class NameDeprecation
-{
-    private $package;
-    private $version;
-    private $newName;
-
-    public function __construct(string $package = '', string $version = '', string $newName = '')
-    {
-        $this->package = $package;
-        $this->version = $version;
-        $this->newName = $newName;
-    }
-
-    public function getPackage(): string
-    {
-        return $this->package;
-    }
-
-    public function getVersion(): string
-    {
-        return $this->version;
-    }
-
-    public function getNewName(): string
-    {
-        return $this->newName;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Node.php b/generated/php/vendor/twig/twig/src/Node/Node.php
deleted file mode 100644
index dcf912c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Node.php
+++ /dev/null
@@ -1,294 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Source;
-
-/**
- * Represents a node in the AST.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @implements \IteratorAggregate<int|string, Node>
- */
-#[YieldReady]
-class Node implements \Countable, \IteratorAggregate
-{
-    /**
-     * @var array<string|int, Node>
-     */
-    protected $nodes;
-    protected $attributes;
-    protected $lineno;
-    protected $tag;
-
-    private $sourceContext;
-    /** @var array<string, NameDeprecation> */
-    private $nodeNameDeprecations = [];
-    /** @var array<string, NameDeprecation> */
-    private $attributeNameDeprecations = [];
-
-    /**
-     * @param array<string|int, Node> $nodes      An array of named nodes
-     * @param array                   $attributes An array of attributes (should not be nodes)
-     * @param int                     $lineno     The line number
-     */
-    public function __construct(array $nodes = [], array $attributes = [], int $lineno = 0)
-    {
-        if (self::class === static::class) {
-            trigger_deprecation('twig/twig', '3.15', \sprintf('Instantiating "%s" directly is deprecated; the class will become abstract in 4.0.', self::class));
-        }
-
-        foreach ($nodes as $name => $node) {
-            if (!$node instanceof self) {
-                throw new \InvalidArgumentException(\sprintf('Using "%s" for the value of node "%s" of "%s" is not supported. You must pass a \Twig\Node\Node instance.', get_debug_type($node), $name, static::class));
-            }
-        }
-        $this->nodes = $nodes;
-        $this->attributes = $attributes;
-        $this->lineno = $lineno;
-
-        if (\func_num_args() > 3) {
-            trigger_deprecation('twig/twig', '3.12', \sprintf('The "tag" constructor argument of the "%s" class is deprecated and ignored (check which TokenParser class set it to "%s"), the tag is now automatically set by the Parser when needed.', static::class, func_get_arg(3) ?: 'null'));
-        }
-    }
-
-    public function __toString(): string
-    {
-        $repr = static::class;
-
-        if ($this->tag) {
-            $repr .= \sprintf("\n  tag: %s", $this->tag);
-        }
-
-        $attributes = [];
-        foreach ($this->attributes as $name => $value) {
-            if (\is_callable($value)) {
-                $v = '\Closure';
-            } elseif ($value instanceof \Stringable) {
-                $v = (string) $value;
-            } else {
-                $v = str_replace("\n", '', var_export($value, true));
-            }
-            $attributes[] = \sprintf('%s: %s', $name, $v);
-        }
-
-        if ($attributes) {
-            $repr .= \sprintf("\n  attributes:\n    %s", implode("\n    ", $attributes));
-        }
-
-        if (\count($this->nodes)) {
-            $repr .= "\n  nodes:";
-            foreach ($this->nodes as $name => $node) {
-                $len = \strlen($name) + 6;
-                $noderepr = [];
-                foreach (explode("\n", (string) $node) as $line) {
-                    $noderepr[] = str_repeat(' ', $len).$line;
-                }
-
-                $repr .= \sprintf("\n    %s: %s", $name, ltrim(implode("\n", $noderepr)));
-            }
-        }
-
-        return $repr;
-    }
-
-    public function __clone()
-    {
-        foreach ($this->nodes as $name => $node) {
-            $this->nodes[$name] = clone $node;
-        }
-    }
-
-    /**
-     * @return void
-     */
-    public function compile(Compiler $compiler)
-    {
-        foreach ($this->nodes as $node) {
-            $compiler->subcompile($node);
-        }
-    }
-
-    public function getTemplateLine(): int
-    {
-        return $this->lineno;
-    }
-
-    public function getNodeTag(): ?string
-    {
-        return $this->tag;
-    }
-
-    /**
-     * @internal
-     */
-    public function setNodeTag(string $tag): void
-    {
-        if ($this->tag) {
-            throw new \LogicException('The tag of a node can only be set once.');
-        }
-
-        $this->tag = $tag;
-    }
-
-    public function hasAttribute(string $name): bool
-    {
-        return \array_key_exists($name, $this->attributes);
-    }
-
-    public function getAttribute(string $name)
-    {
-        if (!\array_key_exists($name, $this->attributes)) {
-            throw new \LogicException(\sprintf('Attribute "%s" does not exist for Node "%s".', $name, static::class));
-        }
-
-        $triggerDeprecation = \func_num_args() > 1 ? func_get_arg(1) : true;
-        if ($triggerDeprecation && isset($this->attributeNameDeprecations[$name])) {
-            $dep = $this->attributeNameDeprecations[$name];
-            if ($dep->getNewName()) {
-                trigger_deprecation($dep->getPackage(), $dep->getVersion(), 'Getting attribute "%s" on a "%s" class is deprecated, get the "%s" attribute instead.', $name, static::class, $dep->getNewName());
-            } else {
-                trigger_deprecation($dep->getPackage(), $dep->getVersion(), 'Getting attribute "%s" on a "%s" class is deprecated.', $name, static::class);
-            }
-        }
-
-        return $this->attributes[$name];
-    }
-
-    public function setAttribute(string $name, $value): void
-    {
-        $triggerDeprecation = \func_num_args() > 2 ? func_get_arg(2) : true;
-        if ($triggerDeprecation && isset($this->attributeNameDeprecations[$name])) {
-            $dep = $this->attributeNameDeprecations[$name];
-            if ($dep->getNewName()) {
-                trigger_deprecation($dep->getPackage(), $dep->getVersion(), 'Setting attribute "%s" on a "%s" class is deprecated, set the "%s" attribute instead.', $name, static::class, $dep->getNewName());
-            } else {
-                trigger_deprecation($dep->getPackage(), $dep->getVersion(), 'Setting attribute "%s" on a "%s" class is deprecated.', $name, static::class);
-            }
-        }
-
-        $this->attributes[$name] = $value;
-    }
-
-    public function deprecateAttribute(string $name, NameDeprecation $dep): void
-    {
-        $this->attributeNameDeprecations[$name] = $dep;
-    }
-
-    public function removeAttribute(string $name): void
-    {
-        unset($this->attributes[$name]);
-    }
-
-    /**
-     * @param string|int $name
-     */
-    public function hasNode(string $name): bool
-    {
-        return isset($this->nodes[$name]);
-    }
-
-    /**
-     * @param string|int $name
-     */
-    public function getNode(string $name): self
-    {
-        if (!isset($this->nodes[$name])) {
-            throw new \LogicException(\sprintf('Node "%s" does not exist for Node "%s".', $name, static::class));
-        }
-
-        $triggerDeprecation = \func_num_args() > 1 ? func_get_arg(1) : true;
-        if ($triggerDeprecation && isset($this->nodeNameDeprecations[$name])) {
-            $dep = $this->nodeNameDeprecations[$name];
-            if ($dep->getNewName()) {
-                trigger_deprecation($dep->getPackage(), $dep->getVersion(), 'Getting node "%s" on a "%s" class is deprecated, get the "%s" node instead.', $name, static::class, $dep->getNewName());
-            } else {
-                trigger_deprecation($dep->getPackage(), $dep->getVersion(), 'Getting node "%s" on a "%s" class is deprecated.', $name, static::class);
-            }
-        }
-
-        return $this->nodes[$name];
-    }
-
-    /**
-     * @param string|int $name
-     */
-    public function setNode(string $name, self $node): void
-    {
-        $triggerDeprecation = \func_num_args() > 2 ? func_get_arg(2) : true;
-        if ($triggerDeprecation && isset($this->nodeNameDeprecations[$name])) {
-            $dep = $this->nodeNameDeprecations[$name];
-            if ($dep->getNewName()) {
-                trigger_deprecation($dep->getPackage(), $dep->getVersion(), 'Setting node "%s" on a "%s" class is deprecated, set the "%s" node instead.', $name, static::class, $dep->getNewName());
-            } else {
-                trigger_deprecation($dep->getPackage(), $dep->getVersion(), 'Setting node "%s" on a "%s" class is deprecated.', $name, static::class);
-            }
-        }
-
-        if (null !== $this->sourceContext) {
-            $node->setSourceContext($this->sourceContext);
-        }
-        $this->nodes[$name] = $node;
-    }
-
-    /**
-     * @param string|int $name
-     */
-    public function removeNode(string $name): void
-    {
-        unset($this->nodes[$name]);
-    }
-
-    /**
-     * @param string|int $name
-     */
-    public function deprecateNode(string $name, NameDeprecation $dep): void
-    {
-        $this->nodeNameDeprecations[$name] = $dep;
-    }
-
-    /**
-     * @return int
-     */
-    #[\ReturnTypeWillChange]
-    public function count()
-    {
-        return \count($this->nodes);
-    }
-
-    public function getIterator(): \Traversable
-    {
-        return new \ArrayIterator($this->nodes);
-    }
-
-    public function getTemplateName(): ?string
-    {
-        return $this->sourceContext ? $this->sourceContext->getName() : null;
-    }
-
-    public function setSourceContext(Source $source): void
-    {
-        $this->sourceContext = $source;
-        foreach ($this->nodes as $node) {
-            $node->setSourceContext($source);
-        }
-    }
-
-    public function getSourceContext(): ?Source
-    {
-        return $this->sourceContext;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/NodeCaptureInterface.php b/generated/php/vendor/twig/twig/src/Node/NodeCaptureInterface.php
deleted file mode 100644
index 9fb6a0c..0000000
--- a/generated/php/vendor/twig/twig/src/Node/NodeCaptureInterface.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-/**
- * Represents a node that captures any nested displayable nodes.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface NodeCaptureInterface
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/NodeOutputInterface.php b/generated/php/vendor/twig/twig/src/Node/NodeOutputInterface.php
deleted file mode 100644
index 5e35b40..0000000
--- a/generated/php/vendor/twig/twig/src/Node/NodeOutputInterface.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-/**
- * Represents a displayable node in the AST.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface NodeOutputInterface
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/Nodes.php b/generated/php/vendor/twig/twig/src/Node/Nodes.php
deleted file mode 100644
index bd67053..0000000
--- a/generated/php/vendor/twig/twig/src/Node/Nodes.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-
-/**
- * Represents a list of nodes.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-final class Nodes extends Node
-{
-    public function __construct(array $nodes = [], int $lineno = 0)
-    {
-        parent::__construct($nodes, [], $lineno);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/PrintNode.php b/generated/php/vendor/twig/twig/src/Node/PrintNode.php
deleted file mode 100644
index 0eec95d..0000000
--- a/generated/php/vendor/twig/twig/src/Node/PrintNode.php
+++ /dev/null
@@ -1,69 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\ReturnStringInterface;
-
-/**
- * Represents a node that outputs an expression.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class PrintNode extends Node implements NodeOutputInterface, CoercesChildrenToStringInterface
-{
-    public function __construct(AbstractExpression $expr, int $lineno)
-    {
-        parent::__construct(['expr' => $expr], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        /** @var AbstractExpression */
-        $expr = $this->getNode('expr');
-
-        $compiler->addDebugInfo($this);
-
-        if ($expr->isGenerator()) {
-            $compiler->write('yield from ');
-        } else {
-            $compiler->write('yield ');
-            if (!$this->isString($expr)) {
-                $compiler->raw('(string) ');
-            }
-        }
-
-        $compiler
-            ->subcompile($expr)
-            ->raw(";\n")
-        ;
-    }
-
-    public function getStringCoercedChildNames(): array
-    {
-        return ['expr'];
-    }
-
-    private function isString(AbstractExpression $expr): bool
-    {
-        if ($expr instanceof ReturnStringInterface) {
-            return true;
-        }
-
-        return $expr instanceof ConstantExpression && !$expr->isDefinedTestEnabled() && \is_string($expr->getAttribute('value'));
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/SandboxNode.php b/generated/php/vendor/twig/twig/src/Node/SandboxNode.php
deleted file mode 100644
index d51cea4..0000000
--- a/generated/php/vendor/twig/twig/src/Node/SandboxNode.php
+++ /dev/null
@@ -1,54 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents a sandbox node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class SandboxNode extends Node
-{
-    public function __construct(Node $body, int $lineno)
-    {
-        parent::__construct(['body' => $body], [], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->addDebugInfo($this)
-            ->write("if (!\$alreadySandboxed = \$this->sandbox->isSandboxed()) {\n")
-            ->indent()
-            ->write("\$this->sandbox->enableSandbox();\n")
-            ->outdent()
-            ->write("}\n")
-            ->write("try {\n")
-            ->indent()
-            ->subcompile($this->getNode('body'))
-            ->outdent()
-            ->write("} finally {\n")
-            ->indent()
-            ->write("if (!\$alreadySandboxed) {\n")
-            ->indent()
-            ->write("\$this->sandbox->disableSandbox();\n")
-            ->outdent()
-            ->write("}\n")
-            ->outdent()
-            ->write("}\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/SetNode.php b/generated/php/vendor/twig/twig/src/Node/SetNode.php
deleted file mode 100644
index 7b063b0..0000000
--- a/generated/php/vendor/twig/twig/src/Node/SetNode.php
+++ /dev/null
@@ -1,115 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Expression\ConstantExpression;
-
-/**
- * Represents a set node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class SetNode extends Node implements NodeCaptureInterface
-{
-    public function __construct(bool $capture, Node $names, Node $values, int $lineno)
-    {
-        /*
-         * Optimizes the node when capture is used for a large block of text.
-         *
-         * {% set foo %}foo{% endset %} is compiled to $context['foo'] = new Twig\Markup("foo");
-         */
-        $safe = false;
-        if ($capture) {
-            $safe = true;
-            // Node::class === get_class($values) should be removed in Twig 4.0
-            if (($values instanceof Nodes || Node::class === $values::class) && !\count($values)) {
-                $values = new ConstantExpression('', $values->getTemplateLine());
-                $capture = false;
-            } elseif ($values instanceof TextNode) {
-                $values = new ConstantExpression($values->getAttribute('data'), $values->getTemplateLine());
-                $capture = false;
-            } elseif ($values instanceof PrintNode && $values->getNode('expr') instanceof ConstantExpression) {
-                $values = $values->getNode('expr');
-                $capture = false;
-            } else {
-                $values = new CaptureNode($values, $values->getTemplateLine());
-            }
-        }
-
-        parent::__construct(['names' => $names, 'values' => $values], ['capture' => $capture, 'safe' => $safe], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->addDebugInfo($this);
-
-        if (\count($this->getNode('names')) > 1) {
-            $compiler->write('[');
-            foreach ($this->getNode('names') as $idx => $node) {
-                if ($idx) {
-                    $compiler->raw(', ');
-                }
-
-                $compiler->subcompile($node);
-            }
-            $compiler->raw(']');
-        } else {
-            $compiler->subcompile($this->getNode('names'), false);
-        }
-        $compiler->raw(' = ');
-
-        if ($this->getAttribute('capture')) {
-            $compiler->subcompile($this->getNode('values'));
-        } else {
-            if (\count($this->getNode('names')) > 1) {
-                $compiler->write('[');
-                foreach ($this->getNode('values') as $idx => $value) {
-                    if ($idx) {
-                        $compiler->raw(', ');
-                    }
-
-                    $compiler->subcompile($value);
-                }
-                $compiler->raw(']');
-            } else {
-                if ($this->getAttribute('safe')) {
-                    if ($this->getNode('values') instanceof ConstantExpression) {
-                        if ('' === $this->getNode('values')->getAttribute('value')) {
-                            $compiler->raw('""');
-                        } else {
-                            $compiler
-                                ->raw('new Markup(')
-                                ->subcompile($this->getNode('values'))
-                                ->raw(', $this->env->getCharset())')
-                            ;
-                        }
-                    } else {
-                        $compiler
-                            ->raw("('' === \$tmp = ")
-                            ->subcompile($this->getNode('values'))
-                            ->raw(") ? '' : new Markup(\$tmp, \$this->env->getCharset())")
-                        ;
-                    }
-                } else {
-                    $compiler->subcompile($this->getNode('values'));
-                }
-            }
-
-            $compiler->raw(';');
-        }
-
-        $compiler->raw("\n");
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/TextNode.php b/generated/php/vendor/twig/twig/src/Node/TextNode.php
deleted file mode 100644
index 86071da..0000000
--- a/generated/php/vendor/twig/twig/src/Node/TextNode.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents a text node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class TextNode extends Node implements NodeOutputInterface
-{
-    public function __construct(string $data, int $lineno)
-    {
-        parent::__construct([], ['data' => $data], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->addDebugInfo($this);
-
-        $compiler
-            ->write('yield ')
-            ->string($this->getAttribute('data'))
-            ->raw(";\n")
-        ;
-    }
-
-    public function isBlank(): bool
-    {
-        if (ctype_space($this->getAttribute('data'))) {
-            return true;
-        }
-
-        if (str_contains((string) $this, \chr(0xEF).\chr(0xBB).\chr(0xBF))) {
-            $t = substr($this->getAttribute('data'), 3);
-            if ('' === $t || ctype_space($t)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/TypesNode.php b/generated/php/vendor/twig/twig/src/Node/TypesNode.php
deleted file mode 100644
index a182880..0000000
--- a/generated/php/vendor/twig/twig/src/Node/TypesNode.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents a types node.
- *
- * @author Jeroen Versteeg <jeroen@alisqi.com>
- */
-#[YieldReady]
-class TypesNode extends Node
-{
-    /**
-     * @param array<string, array{type: string, optional: bool}> $types
-     */
-    public function __construct(array $types, int $lineno)
-    {
-        parent::__construct([], ['mapping' => $types], $lineno);
-    }
-
-    /**
-     * @return void
-     */
-    public function compile(Compiler $compiler)
-    {
-        // Don't compile anything.
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Node/WithNode.php b/generated/php/vendor/twig/twig/src/Node/WithNode.php
deleted file mode 100644
index 487e280..0000000
--- a/generated/php/vendor/twig/twig/src/Node/WithNode.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-
-/**
- * Represents a nested "with" scope.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class WithNode extends Node
-{
-    public function __construct(Node $body, ?Node $variables, bool $only, int $lineno)
-    {
-        $nodes = ['body' => $body];
-        if (null !== $variables) {
-            $nodes['variables'] = $variables;
-        }
-
-        parent::__construct($nodes, ['only' => $only], $lineno);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler->addDebugInfo($this);
-
-        $parentContextName = $compiler->getVarName();
-
-        $compiler->write(\sprintf("\$%s = \$context;\n", $parentContextName));
-
-        if ($this->hasNode('variables')) {
-            $node = $this->getNode('variables');
-            $varsName = $compiler->getVarName();
-            $compiler
-                ->write(\sprintf('$%s = ', $varsName))
-                ->subcompile($node)
-                ->raw(";\n")
-                ->write(\sprintf("if (!is_iterable(\$%s)) {\n", $varsName))
-                ->indent()
-                ->write("throw new RuntimeError('Variables passed to the \"with\" tag must be a mapping.', ")
-                ->repr($node->getTemplateLine())
-                ->raw(", \$this->getSourceContext());\n")
-                ->outdent()
-                ->write("}\n")
-                ->write(\sprintf("\$%s = CoreExtension::toArray(\$%s);\n", $varsName, $varsName))
-            ;
-
-            if ($this->getAttribute('only')) {
-                $compiler->write("\$context = [];\n");
-            }
-
-            $compiler->write(\sprintf("\$context = \$%s + \$context + \$this->env->getGlobals();\n", $varsName));
-        }
-
-        $compiler
-            ->subcompile($this->getNode('body'))
-            ->write(\sprintf("\$context = \$%s;\n", $parentContextName))
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/NodeTraverser.php b/generated/php/vendor/twig/twig/src/NodeTraverser.php
deleted file mode 100644
index 47a2d5c..0000000
--- a/generated/php/vendor/twig/twig/src/NodeTraverser.php
+++ /dev/null
@@ -1,76 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Node\Node;
-use Twig\NodeVisitor\NodeVisitorInterface;
-
-/**
- * A node traverser.
- *
- * It visits all nodes and their children and calls the given visitor for each.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class NodeTraverser
-{
-    private $env;
-    private $visitors = [];
-
-    /**
-     * @param NodeVisitorInterface[] $visitors
-     */
-    public function __construct(Environment $env, array $visitors = [])
-    {
-        $this->env = $env;
-        foreach ($visitors as $visitor) {
-            $this->addVisitor($visitor);
-        }
-    }
-
-    public function addVisitor(NodeVisitorInterface $visitor): void
-    {
-        $this->visitors[$visitor->getPriority()][] = $visitor;
-    }
-
-    /**
-     * Traverses a node and calls the registered visitors.
-     */
-    public function traverse(Node $node): Node
-    {
-        ksort($this->visitors);
-        foreach ($this->visitors as $visitors) {
-            foreach ($visitors as $visitor) {
-                $node = $this->traverseForVisitor($visitor, $node);
-            }
-        }
-
-        return $node;
-    }
-
-    private function traverseForVisitor(NodeVisitorInterface $visitor, Node $node): ?Node
-    {
-        $node = $visitor->enterNode($node, $this->env);
-
-        foreach ($node as $k => $n) {
-            if (null !== $m = $this->traverseForVisitor($visitor, $n)) {
-                if ($m !== $n) {
-                    $node->setNode($k, $m);
-                }
-            } else {
-                $node->removeNode($k);
-            }
-        }
-
-        return $visitor->leaveNode($node, $this->env);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/NodeVisitor/AbstractNodeVisitor.php b/generated/php/vendor/twig/twig/src/NodeVisitor/AbstractNodeVisitor.php
deleted file mode 100644
index 38b1ec9..0000000
--- a/generated/php/vendor/twig/twig/src/NodeVisitor/AbstractNodeVisitor.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\NodeVisitor;
-
-use Twig\Environment;
-use Twig\Node\Node;
-
-/**
- * Used to make node visitors compatible with Twig 1.x and 2.x.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @deprecated since Twig 3.9 (to be removed in 4.0)
- */
-abstract class AbstractNodeVisitor implements NodeVisitorInterface
-{
-    final public function enterNode(Node $node, Environment $env): Node
-    {
-        return $this->doEnterNode($node, $env);
-    }
-
-    final public function leaveNode(Node $node, Environment $env): ?Node
-    {
-        return $this->doLeaveNode($node, $env);
-    }
-
-    /**
-     * Called before child nodes are visited.
-     *
-     * @return Node The modified node
-     */
-    abstract protected function doEnterNode(Node $node, Environment $env);
-
-    /**
-     * Called after child nodes are visited.
-     *
-     * @return Node|null The modified node or null if the node must be removed
-     */
-    abstract protected function doLeaveNode(Node $node, Environment $env);
-}
diff --git a/generated/php/vendor/twig/twig/src/NodeVisitor/CorrectnessNodeVisitor.php b/generated/php/vendor/twig/twig/src/NodeVisitor/CorrectnessNodeVisitor.php
deleted file mode 100644
index 6fd4e17..0000000
--- a/generated/php/vendor/twig/twig/src/NodeVisitor/CorrectnessNodeVisitor.php
+++ /dev/null
@@ -1,223 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\NodeVisitor;
-
-use Twig\Environment;
-use Twig\Error\SyntaxError;
-use Twig\Node\BlockNode;
-use Twig\Node\BlockReferenceNode;
-use Twig\Node\ConfigNode;
-use Twig\Node\MacroNode;
-use Twig\Node\ModuleNode;
-use Twig\Node\Node;
-use Twig\Node\NodeCaptureInterface;
-use Twig\Node\NodeOutputInterface;
-use Twig\Node\Nodes;
-use Twig\Node\TextNode;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class CorrectnessNodeVisitor implements NodeVisitorInterface
-{
-    private ?\WeakMap $rootNodes = null;
-    /**
-     * Stack of the output-wrapping tags ("if", "for", "set", ...) currently open;
-     * the top one is the nearest tag a "block" definition would be nested under.
-     *
-     * @var list<Node>
-     */
-    private array $tagStack = [];
-    private bool $hasParent = false;
-    private int $blockDepth = 0;
-    private int $macroDepth = 0;
-    private int $capturingNodeDepth = 0;
-    private bool $hasExtends = false;
-
-    public function enterNode(Node $node, Environment $env): Node
-    {
-        if ($node instanceof ModuleNode) {
-            $this->enterModule($node);
-
-            return $node;
-        }
-
-        $this->enterScope($node);
-
-        if ($node instanceof ConfigNode) {
-            $this->checkConfigTag($node);
-        }
-
-        if ($node instanceof BlockReferenceNode) {
-            $this->checkBlockDefinitionNesting($node);
-        }
-
-        return $node;
-    }
-
-    public function leaveNode(Node $node, Environment $env): Node
-    {
-        if ($node instanceof ModuleNode) {
-            $this->resetState();
-
-            return $node;
-        }
-
-        $this->leaveScope($node);
-
-        return $node;
-    }
-
-    public function getPriority(): int
-    {
-        return -255;
-    }
-
-    private function enterModule(ModuleNode $node): void
-    {
-        $this->resetState();
-        $this->rootNodes = new \WeakMap();
-        $this->hasParent = $node->hasNode('parent');
-
-        foreach ($this->getRootNodes($node) as $n) {
-            if ($this->hasParent && !$this->isEmptyOutputNode($n)) {
-                throw new SyntaxError('A template that extends another one cannot include content outside Twig blocks. Did you forget to put the content inside a {% block %} tag?', $n->getTemplateLine(), $n->getSourceContext());
-            }
-            $this->rootNodes[$n] = true;
-        }
-    }
-
-    private function resetState(): void
-    {
-        $this->rootNodes = null;
-        $this->tagStack = [];
-        $this->hasParent = false;
-        $this->blockDepth = 0;
-        $this->macroDepth = 0;
-        $this->capturingNodeDepth = 0;
-        $this->hasExtends = false;
-    }
-
-    /**
-     * @return iterable<Node>
-     */
-    private function getRootNodes(ModuleNode $node): iterable
-    {
-        $body = $node->getNode('body')->getNode('0');
-
-        // Parser::subparse() does not wrap the parsed nodes when there is only one,
-        // so $body can be a single "real" node instead of a Nodes container; in that
-        // case it is the only root node and must not be iterated over its children.
-        return $body instanceof Nodes || Node::class === $body::class ? $body : [$body];
-    }
-
-    private function enterScope(Node $node): void
-    {
-        if ($node instanceof NodeCaptureInterface) {
-            ++$this->capturingNodeDepth;
-        }
-
-        if ($node instanceof BlockNode) {
-            ++$this->blockDepth;
-        } elseif ($node instanceof MacroNode) {
-            ++$this->macroDepth;
-        } elseif ($node->getNodeTag() && !$node instanceof BlockReferenceNode) {
-            $this->tagStack[] = $node;
-        }
-    }
-
-    private function leaveScope(Node $node): void
-    {
-        if ($node instanceof NodeCaptureInterface) {
-            --$this->capturingNodeDepth;
-        }
-
-        if ($node instanceof BlockNode) {
-            --$this->blockDepth;
-        } elseif ($node instanceof MacroNode) {
-            --$this->macroDepth;
-        } elseif ($node->getNodeTag() && !$node instanceof BlockReferenceNode) {
-            array_pop($this->tagStack);
-        }
-    }
-
-    private function checkConfigTag(ConfigNode $node): void
-    {
-        if ('extends' === $node->getNodeTag()) {
-            $this->checkExtendsTag($node);
-        }
-
-        if (!isset($this->rootNodes[$node])) {
-            trigger_deprecation('twig/twig', '3.27', 'Using the "%s" tag outside the root of a template is deprecated in %s at line %d.', $node->getNodeTag(), $node->getSourceContext()->getName(), $node->getTemplateLine());
-        }
-    }
-
-    private function checkExtendsTag(ConfigNode $node): void
-    {
-        // "extends" inside a "block" or a "macro" has always been a hard error; keep it
-        if ($this->blockDepth) {
-            throw new SyntaxError('Cannot use "extend" in a block.', $node->getTemplateLine(), $node->getSourceContext());
-        }
-        if ($this->macroDepth) {
-            throw new SyntaxError('Cannot use "extend" in a macro.', $node->getTemplateLine(), $node->getSourceContext());
-        }
-        if ($this->hasExtends) {
-            throw new SyntaxError('Multiple extends tags are forbidden.', $node->getTemplateLine(), $node->getSourceContext());
-        }
-
-        $this->hasExtends = true;
-    }
-
-    private function checkBlockDefinitionNesting(BlockReferenceNode $node): void
-    {
-        // A "block" definition nested under an output-wrapping tag is registered globally
-        // regardless of that tag, so the nesting is misleading. This only matters at the root
-        // of a child template's body: once inside a block, a macro, an output capture, or in
-        // a standalone template, the block is rendered in place and behaves like any other.
-        if (!$this->hasParent || $this->blockDepth || $this->macroDepth || $this->capturingNodeDepth || !$this->tagStack) {
-            return;
-        }
-
-        $tag = $this->tagStack[array_key_last($this->tagStack)];
-        throw new SyntaxError(\sprintf('A "block" tag cannot be under a "%s" tag (line %d).', $tag->getNodeTag(), $tag->getTemplateLine()), $node->getTemplateLine(), $node->getSourceContext());
-    }
-
-    /**
-     * Returns true if the node never outputs anything or if the output is empty.
-     */
-    private function isEmptyOutputNode(Node $node): bool
-    {
-        if ($node instanceof NodeCaptureInterface) {
-            // a "block" tag in such a node will serve as a block definition AND be displayed in place as well
-            return true;
-        }
-
-        // Can the text be considered "empty" (only whitespace)?
-        if ($node instanceof TextNode) {
-            return $node->isBlank();
-        }
-
-        if (!$node instanceof BlockReferenceNode && $node instanceof NodeOutputInterface) {
-            return false;
-        }
-
-        foreach ($node as $n) {
-            if (!$this->isEmptyOutputNode($n)) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/NodeVisitor/EscaperNodeVisitor.php b/generated/php/vendor/twig/twig/src/NodeVisitor/EscaperNodeVisitor.php
deleted file mode 100644
index a9f8297..0000000
--- a/generated/php/vendor/twig/twig/src/NodeVisitor/EscaperNodeVisitor.php
+++ /dev/null
@@ -1,185 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\NodeVisitor;
-
-use Twig\Environment;
-use Twig\Extension\EscaperExtension;
-use Twig\Node\AutoEscapeNode;
-use Twig\Node\BlockNode;
-use Twig\Node\BlockReferenceNode;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\FilterExpression;
-use Twig\Node\Expression\OperatorEscapeInterface;
-use Twig\Node\ImportNode;
-use Twig\Node\ModuleNode;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\Node\PrintNode;
-use Twig\NodeTraverser;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class EscaperNodeVisitor implements NodeVisitorInterface
-{
-    private $statusStack = [];
-    private $blocks = [];
-    private $safeAnalysis;
-    private $traverser;
-    private $defaultStrategy = false;
-    private $safeVars = [];
-
-    public function __construct()
-    {
-        $this->safeAnalysis = new SafeAnalysisNodeVisitor();
-    }
-
-    public function enterNode(Node $node, Environment $env): Node
-    {
-        if ($node instanceof ModuleNode) {
-            if ($env->hasExtension(EscaperExtension::class) && $defaultStrategy = $env->getExtension(EscaperExtension::class)->getDefaultStrategy($node->getTemplateName())) {
-                $this->defaultStrategy = $defaultStrategy;
-            }
-            $this->safeVars = [];
-            $this->blocks = [];
-        } elseif ($node instanceof AutoEscapeNode) {
-            $this->statusStack[] = $node->getAttribute('value');
-        } elseif ($node instanceof BlockNode) {
-            $this->statusStack[] = $this->blocks[$node->getAttribute('name')] ?? $this->needEscaping();
-        } elseif ($node instanceof ImportNode) {
-            $this->safeVars[] = $node->getNode('var')->getNode('var')->getAttribute('name');
-        }
-
-        return $node;
-    }
-
-    public function leaveNode(Node $node, Environment $env): ?Node
-    {
-        if ($node instanceof ModuleNode) {
-            $this->defaultStrategy = false;
-            $this->safeVars = [];
-            $this->blocks = [];
-        } elseif ($node instanceof FilterExpression) {
-            return $this->preEscapeFilterNode($node, $env);
-        } elseif ($node instanceof PrintNode && false !== $type = $this->needEscaping()) {
-            $expression = $node->getNode('expr');
-            if ($expression instanceof OperatorEscapeInterface) {
-                $this->escapeConditional($expression, $env, $type);
-            } else {
-                $node->setNode('expr', $this->escapeExpression($expression, $env, $type));
-            }
-
-            return $node;
-        }
-
-        if ($node instanceof AutoEscapeNode || $node instanceof BlockNode) {
-            array_pop($this->statusStack);
-        } elseif ($node instanceof BlockReferenceNode) {
-            $this->blocks[$node->getAttribute('name')] = $this->needEscaping();
-        }
-
-        return $node;
-    }
-
-    /**
-     * @param AbstractExpression&OperatorEscapeInterface $expression
-     */
-    private function escapeConditional($expression, Environment $env, string $type): void
-    {
-        foreach ($expression->getOperandNamesToEscape() as $name) {
-            /** @var AbstractExpression $operand */
-            $operand = $expression->getNode($name);
-            if ($operand instanceof OperatorEscapeInterface) {
-                $this->escapeConditional($operand, $env, $type);
-            } else {
-                $expression->setNode($name, $this->escapeExpression($operand, $env, $type));
-            }
-        }
-    }
-
-    private function escapeExpression(AbstractExpression $expression, Environment $env, string $type): AbstractExpression
-    {
-        return $this->isSafeFor($type, $expression, $env) ? $expression : $this->getEscaperFilter($env, $type, $expression);
-    }
-
-    private function preEscapeFilterNode(FilterExpression $filter, Environment $env): FilterExpression
-    {
-        if ($filter->hasAttribute('twig_callable')) {
-            $type = $filter->getAttribute('twig_callable')->getPreEscape();
-        } else {
-            // legacy
-            $name = $filter->getNode('filter', false)->getAttribute('value');
-            $type = $env->getFilter($name)->getPreEscape();
-        }
-
-        if (null === $type) {
-            return $filter;
-        }
-
-        /** @var AbstractExpression $node */
-        $node = $filter->getNode('node');
-        if ($this->isSafeFor($type, $node, $env)) {
-            return $filter;
-        }
-
-        $filter->setNode('node', $this->getEscaperFilter($env, $type, $node));
-
-        return $filter;
-    }
-
-    private function isSafeFor(string $type, AbstractExpression $expression, Environment $env): bool
-    {
-        $safe = $this->safeAnalysis->getSafe($expression);
-
-        if (!$safe) {
-            if (null === $this->traverser) {
-                $this->traverser = new NodeTraverser($env, [$this->safeAnalysis]);
-            }
-
-            $this->safeAnalysis->setSafeVars($this->safeVars);
-
-            $this->traverser->traverse($expression);
-            $safe = $this->safeAnalysis->getSafe($expression);
-        }
-
-        return \in_array($type, $safe, true) || \in_array('all', $safe, true);
-    }
-
-    /**
-     * @return string|false
-     */
-    private function needEscaping(): string|bool
-    {
-        if (\count($this->statusStack)) {
-            return $this->statusStack[\count($this->statusStack) - 1];
-        }
-
-        return $this->defaultStrategy ?: false;
-    }
-
-    private function getEscaperFilter(Environment $env, string $type, AbstractExpression $node): FilterExpression
-    {
-        $line = $node->getTemplateLine();
-        $filter = $env->getFilter('escape');
-        $args = new Nodes([new ConstantExpression($type, $line), new ConstantExpression(null, $line), new ConstantExpression(true, $line)]);
-
-        return new FilterExpression($node, $filter, $args, $line);
-    }
-
-    public function getPriority(): int
-    {
-        return 0;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/NodeVisitor/NodeVisitorInterface.php b/generated/php/vendor/twig/twig/src/NodeVisitor/NodeVisitorInterface.php
deleted file mode 100644
index 59e836d..0000000
--- a/generated/php/vendor/twig/twig/src/NodeVisitor/NodeVisitorInterface.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\NodeVisitor;
-
-use Twig\Environment;
-use Twig\Node\Node;
-
-/**
- * Interface for node visitor classes.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface NodeVisitorInterface
-{
-    /**
-     * Called before child nodes are visited.
-     *
-     * @return Node The modified node
-     */
-    public function enterNode(Node $node, Environment $env): Node;
-
-    /**
-     * Called after child nodes are visited.
-     *
-     * @return Node|null The modified node or null if the node must be removed
-     */
-    public function leaveNode(Node $node, Environment $env): ?Node;
-
-    /**
-     * Returns the priority for this visitor.
-     *
-     * Priority should be between -10 and 10 (0 is the default).
-     *
-     * @return int The priority level
-     */
-    public function getPriority();
-}
diff --git a/generated/php/vendor/twig/twig/src/NodeVisitor/OptimizerNodeVisitor.php b/generated/php/vendor/twig/twig/src/NodeVisitor/OptimizerNodeVisitor.php
deleted file mode 100644
index b778ba4..0000000
--- a/generated/php/vendor/twig/twig/src/NodeVisitor/OptimizerNodeVisitor.php
+++ /dev/null
@@ -1,213 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\NodeVisitor;
-
-use Twig\Environment;
-use Twig\Node\BlockReferenceNode;
-use Twig\Node\Expression\BlockReferenceExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\FunctionExpression;
-use Twig\Node\Expression\GetAttrExpression;
-use Twig\Node\Expression\ParentExpression;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\ForNode;
-use Twig\Node\IncludeNode;
-use Twig\Node\Node;
-use Twig\Node\PrintNode;
-use Twig\Node\TextNode;
-
-/**
- * Tries to optimize the AST.
- *
- * This visitor is always the last registered one.
- *
- * You can configure which optimizations you want to activate via the
- * optimizer mode.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class OptimizerNodeVisitor implements NodeVisitorInterface
-{
-    public const OPTIMIZE_ALL = -1;
-    public const OPTIMIZE_NONE = 0;
-    public const OPTIMIZE_FOR = 2;
-    public const OPTIMIZE_RAW_FILTER = 4;
-    public const OPTIMIZE_TEXT_NODES = 8;
-
-    private $loops = [];
-    private $loopsTargets = [];
-
-    /**
-     * @param int $optimizers The optimizer mode
-     */
-    public function __construct(
-        private int $optimizers = -1,
-    ) {
-        if ($optimizers > (self::OPTIMIZE_FOR | self::OPTIMIZE_RAW_FILTER | self::OPTIMIZE_TEXT_NODES)) {
-            throw new \InvalidArgumentException(\sprintf('Optimizer mode "%s" is not valid.', $optimizers));
-        }
-
-        if (-1 !== $optimizers && self::OPTIMIZE_RAW_FILTER === (self::OPTIMIZE_RAW_FILTER & $optimizers)) {
-            trigger_deprecation('twig/twig', '3.11', 'The "Twig\NodeVisitor\OptimizerNodeVisitor::OPTIMIZE_RAW_FILTER" option is deprecated and does nothing.');
-        }
-
-        if (-1 !== $optimizers && self::OPTIMIZE_TEXT_NODES === (self::OPTIMIZE_TEXT_NODES & $optimizers)) {
-            trigger_deprecation('twig/twig', '3.12', 'The "Twig\NodeVisitor\OptimizerNodeVisitor::OPTIMIZE_TEXT_NODES" option is deprecated and does nothing.');
-        }
-    }
-
-    public function enterNode(Node $node, Environment $env): Node
-    {
-        if (self::OPTIMIZE_FOR === (self::OPTIMIZE_FOR & $this->optimizers)) {
-            $this->enterOptimizeFor($node);
-        }
-
-        return $node;
-    }
-
-    public function leaveNode(Node $node, Environment $env): ?Node
-    {
-        if (self::OPTIMIZE_FOR === (self::OPTIMIZE_FOR & $this->optimizers)) {
-            $this->leaveOptimizeFor($node);
-        }
-
-        $node = $this->optimizePrintNode($node);
-
-        return $node;
-    }
-
-    /**
-     * Optimizes print nodes.
-     *
-     * It replaces:
-     *
-     *   * "echo $this->render(Parent)Block()" with "$this->display(Parent)Block()"
-     */
-    private function optimizePrintNode(Node $node): Node
-    {
-        if (!$node instanceof PrintNode) {
-            return $node;
-        }
-
-        $exprNode = $node->getNode('expr');
-
-        if ($exprNode instanceof ConstantExpression && \is_string($exprNode->getAttribute('value'))) {
-            return new TextNode($exprNode->getAttribute('value'), $exprNode->getTemplateLine());
-        }
-
-        if (
-            $exprNode instanceof BlockReferenceExpression
-            || $exprNode instanceof ParentExpression
-        ) {
-            $exprNode->setAttribute('output', true);
-
-            return $exprNode;
-        }
-
-        return $node;
-    }
-
-    /**
-     * Optimizes "for" tag by removing the "loop" variable creation whenever possible.
-     */
-    private function enterOptimizeFor(Node $node): void
-    {
-        if ($node instanceof ForNode) {
-            // disable the loop variable by default
-            $node->setAttribute('with_loop', false);
-            array_unshift($this->loops, $node);
-            array_unshift($this->loopsTargets, $node->getNode('value_target')->getAttribute('name'));
-            array_unshift($this->loopsTargets, $node->getNode('key_target')->getAttribute('name'));
-        } elseif (!$this->loops) {
-            // we are outside a loop
-            return;
-        }
-
-        // when do we need to add the loop variable back?
-
-        // the loop variable is referenced for the current loop
-        elseif ($node instanceof ContextVariable && 'loop' === $node->getAttribute('name')) {
-            $node->setAttribute('always_defined', true);
-            $this->addLoopToCurrent();
-        }
-
-        // optimize access to loop targets
-        elseif ($node instanceof ContextVariable && \in_array($node->getAttribute('name'), $this->loopsTargets, true)) {
-            $node->setAttribute('always_defined', true);
-        }
-
-        // block reference
-        elseif ($node instanceof BlockReferenceNode || $node instanceof BlockReferenceExpression) {
-            $this->addLoopToCurrent();
-        }
-
-        // include without the only attribute
-        elseif ($node instanceof IncludeNode && !$node->getAttribute('only')) {
-            $this->addLoopToAll();
-        }
-
-        // include function without the with_context=false parameter
-        elseif ($node instanceof FunctionExpression
-            && 'include' === $node->getAttribute('name')
-            && (!$node->getNode('arguments')->hasNode('with_context')
-                 || false !== $node->getNode('arguments')->getNode('with_context')->getAttribute('value')
-            )
-        ) {
-            $this->addLoopToAll();
-        }
-
-        // the loop variable is referenced via an attribute
-        elseif ($node instanceof GetAttrExpression
-            && (!$node->getNode('attribute') instanceof ConstantExpression
-                || 'parent' === $node->getNode('attribute')->getAttribute('value')
-            )
-            && (true === $this->loops[0]->getAttribute('with_loop')
-             || ($node->getNode('node') instanceof ContextVariable
-                 && 'loop' === $node->getNode('node')->getAttribute('name')
-             )
-            )
-        ) {
-            $this->addLoopToAll();
-        }
-    }
-
-    /**
-     * Optimizes "for" tag by removing the "loop" variable creation whenever possible.
-     */
-    private function leaveOptimizeFor(Node $node): void
-    {
-        if ($node instanceof ForNode) {
-            array_shift($this->loops);
-            array_shift($this->loopsTargets);
-            array_shift($this->loopsTargets);
-        }
-    }
-
-    private function addLoopToCurrent(): void
-    {
-        $this->loops[0]->setAttribute('with_loop', true);
-    }
-
-    private function addLoopToAll(): void
-    {
-        foreach ($this->loops as $loop) {
-            $loop->setAttribute('with_loop', true);
-        }
-    }
-
-    public function getPriority(): int
-    {
-        return 255;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/NodeVisitor/SafeAnalysisNodeVisitor.php b/generated/php/vendor/twig/twig/src/NodeVisitor/SafeAnalysisNodeVisitor.php
deleted file mode 100644
index b1aea0f..0000000
--- a/generated/php/vendor/twig/twig/src/NodeVisitor/SafeAnalysisNodeVisitor.php
+++ /dev/null
@@ -1,185 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\NodeVisitor;
-
-use Twig\Environment;
-use Twig\Node\Expression\BlockReferenceExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\FilterExpression;
-use Twig\Node\Expression\FunctionExpression;
-use Twig\Node\Expression\GetAttrExpression;
-use Twig\Node\Expression\MacroReferenceExpression;
-use Twig\Node\Expression\MethodCallExpression;
-use Twig\Node\Expression\OperatorEscapeInterface;
-use Twig\Node\Expression\ParentExpression;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Node;
-
-/**
- * @internal
- */
-final class SafeAnalysisNodeVisitor implements NodeVisitorInterface
-{
-    private $data = [];
-    private $safeVars = [];
-
-    public function setSafeVars(array $safeVars): void
-    {
-        $this->safeVars = $safeVars;
-    }
-
-    /**
-     * @return array
-     */
-    public function getSafe(Node $node)
-    {
-        $hash = spl_object_id($node);
-        if (!isset($this->data[$hash])) {
-            return [];
-        }
-
-        foreach ($this->data[$hash] as $bucket) {
-            if ($bucket['key'] !== $node) {
-                continue;
-            }
-
-            if (\in_array('html_attr', $bucket['value'], true)) {
-                $bucket['value'][] = 'html';
-                $bucket['value'][] = 'html_attr_relaxed';
-            }
-
-            if (\in_array('html_attr_relaxed', $bucket['value'], true)) {
-                $bucket['value'][] = 'html';
-            }
-
-            return $bucket['value'];
-        }
-
-        return [];
-    }
-
-    private function setSafe(Node $node, array $safe): void
-    {
-        $hash = spl_object_id($node);
-        if (isset($this->data[$hash])) {
-            foreach ($this->data[$hash] as &$bucket) {
-                if ($bucket['key'] === $node) {
-                    $bucket['value'] = $safe;
-
-                    return;
-                }
-            }
-        }
-        $this->data[$hash][] = [
-            'key' => $node,
-            'value' => $safe,
-        ];
-    }
-
-    public function enterNode(Node $node, Environment $env): Node
-    {
-        return $node;
-    }
-
-    public function leaveNode(Node $node, Environment $env): ?Node
-    {
-        if ($node instanceof ConstantExpression) {
-            // constants are marked safe for all
-            $this->setSafe($node, ['all']);
-        } elseif ($node instanceof BlockReferenceExpression) {
-            // blocks are safe by definition
-            $this->setSafe($node, ['all']);
-        } elseif ($node instanceof ParentExpression) {
-            // parent block is safe by definition
-            $this->setSafe($node, ['all']);
-        } elseif ($node instanceof OperatorEscapeInterface) {
-            // intersect safeness of operands
-            $operands = $node->getOperandNamesToEscape();
-            if (2 < \count($operands)) {
-                throw new \LogicException(\sprintf('Operators with more than 2 operands are not supported yet, got %d.', \count($operands)));
-            } elseif (2 === \count($operands)) {
-                $safe = $this->intersectSafe($this->getSafe($node->getNode($operands[0])), $this->getSafe($node->getNode($operands[1])));
-                $this->setSafe($node, $safe);
-            }
-        } elseif ($node instanceof FilterExpression) {
-            // filter expression is safe when the filter is safe
-            if ($node->hasAttribute('twig_callable')) {
-                $filter = $node->getAttribute('twig_callable');
-            } else {
-                // legacy
-                $filter = $env->getFilter($node->getAttribute('name'));
-            }
-
-            if ($filter) {
-                $safe = $filter->getSafe($node->getNode('arguments'));
-                if (null === $safe) {
-                    trigger_deprecation('twig/twig', '3.16', 'The "%s::getSafe()" method should not return "null" anymore, return "[]" instead.', $filter::class);
-                    $safe = [];
-                }
-
-                if (!$safe) {
-                    $safe = $this->intersectSafe($this->getSafe($node->getNode('node')), $filter->getPreservesSafety());
-                }
-                $this->setSafe($node, $safe);
-            }
-        } elseif ($node instanceof FunctionExpression) {
-            // function expression is safe when the function is safe
-            if ($node->hasAttribute('twig_callable')) {
-                $function = $node->getAttribute('twig_callable');
-            } else {
-                // legacy
-                $function = $env->getFunction($node->getAttribute('name'));
-            }
-
-            if ($function) {
-                $safe = $function->getSafe($node->getNode('arguments'));
-                if (null === $safe) {
-                    trigger_deprecation('twig/twig', '3.16', 'The "%s::getSafe()" method should not return "null" anymore, return "[]" instead.', $function::class);
-                    $safe = [];
-                }
-                $this->setSafe($node, $safe);
-            }
-        } elseif ($node instanceof MethodCallExpression || $node instanceof MacroReferenceExpression) {
-            // all macro calls are safe
-            $this->setSafe($node, ['all']);
-        } elseif ($node instanceof GetAttrExpression && $node->getNode('node') instanceof ContextVariable) {
-            $name = $node->getNode('node')->getAttribute('name');
-            if (\in_array($name, $this->safeVars, true)) {
-                $this->setSafe($node, ['all']);
-            }
-        }
-
-        return $node;
-    }
-
-    private function intersectSafe(array $a, array $b): array
-    {
-        if (!$a || !$b) {
-            return [];
-        }
-
-        if (\in_array('all', $a, true)) {
-            return $b;
-        }
-
-        if (\in_array('all', $b, true)) {
-            return $a;
-        }
-
-        return array_intersect($a, $b);
-    }
-
-    public function getPriority(): int
-    {
-        return 0;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/NodeVisitor/SandboxNodeVisitor.php b/generated/php/vendor/twig/twig/src/NodeVisitor/SandboxNodeVisitor.php
deleted file mode 100644
index dba49c8..0000000
--- a/generated/php/vendor/twig/twig/src/NodeVisitor/SandboxNodeVisitor.php
+++ /dev/null
@@ -1,295 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\NodeVisitor;
-
-use Twig\Environment;
-use Twig\Node\CheckSecurityCallNode;
-use Twig\Node\CheckSecurityNode;
-use Twig\Node\CheckToStringNode;
-use Twig\Node\CoercesChildrenToStringInterface;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\Binary\RangeBinary;
-use Twig\Node\Expression\FilterExpression;
-use Twig\Node\Expression\FunctionExpression;
-use Twig\Node\Expression\GetAttrExpression;
-use Twig\Node\Expression\OperatorEscapeInterface;
-use Twig\Node\Expression\TestExpression;
-use Twig\Node\Expression\Unary\SpreadUnary;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\ModuleNode;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\TokenParser\TokenParserInterface;
-use Twig\TwigCallableInterface;
-use Twig\Util\CallableParameters;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class SandboxNodeVisitor implements NodeVisitorInterface
-{
-    private $inAModule = false;
-    /** @var array<string, int> */
-    private $tags;
-    /** @var array<string, int> */
-    private $filters;
-    /** @var array<string, int> */
-    private $functions;
-    /** @var array<string, int> */
-    private $tests;
-
-    public function enterNode(Node $node, Environment $env): Node
-    {
-        if ($node instanceof ModuleNode) {
-            $this->inAModule = true;
-            $this->tags = [];
-            $this->filters = [];
-            $this->functions = [];
-            $this->tests = [];
-        } elseif ($this->inAModule) {
-            // look for tags
-            if ($node->getNodeTag() && !isset($this->tags[$node->getNodeTag()]) && !$this->isTagAlwaysAllowedInSandbox($env, $node->getNodeTag())) {
-                $this->tags[$node->getNodeTag()] = $node->getTemplateLine();
-            }
-
-            // look for filters
-            if ($node instanceof FilterExpression && !isset($this->filters[$name = $node->getAttribute('name')]) && !$this->isFilterAlwaysAllowedInSandbox($env, $node)) {
-                $this->filters[$name] = $node->getTemplateLine();
-            }
-
-            // look for functions
-            if ($node instanceof FunctionExpression && !isset($this->functions[$name = $node->getAttribute('name')]) && !$this->isFunctionAlwaysAllowedInSandbox($env, $node)) {
-                $this->functions[$name] = $node->getTemplateLine();
-            }
-
-            // look for tests
-            if ($node instanceof TestExpression && !isset($this->tests[$name = $node->getAttribute('name')]) && !$this->isTestAlwaysAllowedInSandbox($env, $node)) {
-                $this->tests[$name] = $node->getTemplateLine();
-            }
-
-            // look for functions whose parser callable replaced the FunctionExpression
-            // with a specialized node (e.g. `parent`, `block`, `attribute`); the
-            // original function name was stashed by FunctionExpressionParser.
-            if ($node->hasAttribute('sandboxed_function_name')) {
-                $name = $node->getAttribute('sandboxed_function_name');
-                if (!isset($this->functions[$name]) && !$this->isSandboxedFunctionAlwaysAllowedInSandbox($env, $node, $name)) {
-                    $this->functions[$name] = $node->getTemplateLine();
-                }
-            }
-
-            // the .. operator is equivalent to the range() function
-            if ($node instanceof RangeBinary && !isset($this->functions['range']) && !$this->isFunctionNameAlwaysAllowedInSandbox($env, 'range')) {
-                $this->functions['range'] = $node->getTemplateLine();
-            }
-        }
-
-        // wrap children that the node itself will string-coerce at runtime;
-        // applies to ModuleNode (`parent` slot for {% extends %}) too
-        if ($this->inAModule && $node instanceof CoercesChildrenToStringInterface) {
-            $params = CallableParameters::fromNode($node, $env);
-            foreach ($node->getStringCoercedChildNames() as $childName) {
-                // For Filter/Function/Test calls, consult the PHP callable
-                // signature: skip wrapping arguments whose param type cannot
-                // implicitly string-coerce (e.g. `int`, a `final` value object).
-                if (null !== $params && 'arguments' === $childName) {
-                    $this->wrapArguments($node, $params);
-
-                    continue;
-                }
-                if (null !== $params && 'node' === $childName && $node instanceof FilterExpression) {
-                    // The filter's input value maps to the first PHP parameter.
-                    if (isset($params[0]) && CallableParameters::isStringCoercionSafe($params[0]->getType(), $params[0]->getDeclaringClass())) {
-                        continue;
-                    }
-                }
-                $this->wrapNode($node, $childName);
-            }
-        }
-
-        return $node;
-    }
-
-    public function leaveNode(Node $node, Environment $env): ?Node
-    {
-        if ($node instanceof ModuleNode) {
-            $this->inAModule = false;
-
-            $node->setNode('constructor_end', new Nodes([new CheckSecurityCallNode(), $node->getNode('constructor_end')]));
-            $node->setNode('class_end', new Nodes([new CheckSecurityNode($this->filters, $this->tags, $this->functions, $this->tests), $node->getNode('class_end')]));
-        }
-
-        return $node;
-    }
-
-    /**
-     * Wraps each entry in the `arguments` slot only when the corresponding
-     * PHP parameter type can implicitly string-coerce.
-     *
-     * @param list<\ReflectionParameter> $params parameters relative to the
-     *                                           first template argument (for
-     *                                           filters and tests: starting
-     *                                           after the `node`/input
-     *                                           parameter)
-     */
-    private function wrapArguments(Node $node, array $params): void
-    {
-        $arguments = $node->getNode('arguments');
-        if (!$arguments instanceof Nodes && !$arguments instanceof ArrayExpression) {
-            $this->wrapNode($node, 'arguments');
-
-            return;
-        }
-
-        // Filters and tests pass their input value (`node`) as the first PHP
-        // param, so their template arguments start at offset 1.
-        $positional = \array_slice($params, $node->hasNode('node') ? 1 : 0);
-        $variadic = null;
-        $byName = [];
-        foreach ($positional as $p) {
-            if ($p->isVariadic()) {
-                $variadic = $p;
-                break;
-            }
-            $byName[$this->normalizeName($p->getName())] ??= $p;
-        }
-
-        $positionalIdx = 0;
-        foreach ($arguments as $key => $_) {
-            if (\is_int($key)) {
-                $param = $positional[$positionalIdx] ?? $variadic;
-                if (null !== $param && !$param->isVariadic()) {
-                    ++$positionalIdx;
-                }
-            } else {
-                $param = $byName[$this->normalizeName($key)] ?? $variadic;
-            }
-
-            if (null !== $param && CallableParameters::isStringCoercionSafe($param->getType(), $param->getDeclaringClass())) {
-                continue;
-            }
-            $this->wrapNode($arguments, (string) $key);
-        }
-    }
-
-    private function normalizeName(string $name): string
-    {
-        return strtolower(str_replace('_', '', $name));
-    }
-
-    private function wrapNode(Node $node, string $name): void
-    {
-        $expr = $node->getNode($name);
-        // `_self` is internal: it compiles to `$this->getTemplateName()` and is always a string
-        if ($expr instanceof ContextVariable && '_self' === $expr->getAttribute('name')) {
-            return;
-        }
-        if (($expr instanceof ContextVariable || $expr instanceof GetAttrExpression) && !$expr->isGenerator()) {
-            $node->setNode($name, new CheckToStringNode($expr));
-        } elseif ($expr instanceof SpreadUnary) {
-            $expr->setNode('node', new CheckToStringNode($expr->getNode('node'), true));
-        } elseif ($expr instanceof ArrayExpression || $expr instanceof Nodes) {
-            foreach ($expr as $name => $_) {
-                $this->wrapNode($expr, $name);
-            }
-        } elseif ($expr instanceof OperatorEscapeInterface) {
-            foreach ($expr->getOperandNamesToEscape() as $operandName) {
-                $this->wrapNode($expr, $operandName);
-            }
-        } elseif ($expr instanceof FilterExpression || $expr instanceof FunctionExpression) {
-            $node->setNode($name, new CheckToStringNode($expr));
-        }
-    }
-
-    private function isTagAlwaysAllowedInSandbox(Environment $env, string $name): bool
-    {
-        if (null === $parser = $env->getTokenParser($name)) {
-            return false;
-        }
-
-        return self::isAlwaysAllowedInSandbox($parser);
-    }
-
-    private function isFilterAlwaysAllowedInSandbox(Environment $env, FilterExpression $node): bool
-    {
-        if ($node->hasAttribute('twig_callable')) {
-            $filter = $node->getAttribute('twig_callable');
-        } elseif (null === $filter = $env->getFilter($node->getAttribute('name'))) {
-            return false;
-        }
-
-        return self::isAlwaysAllowedInSandbox($filter);
-    }
-
-    private function isFunctionAlwaysAllowedInSandbox(Environment $env, FunctionExpression $node): bool
-    {
-        if ($node->hasAttribute('twig_callable')) {
-            $function = $node->getAttribute('twig_callable');
-        } elseif (null === $function = $env->getFunction($node->getAttribute('name'))) {
-            return false;
-        }
-
-        return self::isAlwaysAllowedInSandbox($function);
-    }
-
-    private function isTestAlwaysAllowedInSandbox(Environment $env, TestExpression $node): bool
-    {
-        if ($node->hasAttribute('twig_callable')) {
-            $test = $node->getAttribute('twig_callable');
-        } elseif (null === $test = $env->getTest($node->getAttribute('name'))) {
-            return false;
-        }
-
-        return self::isAlwaysAllowedInSandbox($test);
-    }
-
-    private function isSandboxedFunctionAlwaysAllowedInSandbox(Environment $env, Node $node, string $name): bool
-    {
-        if ($node->hasAttribute('sandboxed_function')) {
-            $function = $node->getAttribute('sandboxed_function');
-        } elseif (null === $function = $env->getFunction($name)) {
-            return false;
-        }
-
-        return self::isAlwaysAllowedInSandbox($function);
-    }
-
-    private function isFunctionNameAlwaysAllowedInSandbox(Environment $env, string $name): bool
-    {
-        if (null === $function = $env->getFunction($name)) {
-            return false;
-        }
-
-        return self::isAlwaysAllowedInSandbox($function);
-    }
-
-    /**
-     * @param TwigCallableInterface|TokenParserInterface $subject
-     */
-    private static function isAlwaysAllowedInSandbox($subject): bool
-    {
-        if (method_exists($subject, 'isAlwaysAllowedInSandbox')) {
-            return $subject->isAlwaysAllowedInSandbox();
-        }
-
-        $interface = $subject instanceof TokenParserInterface ? TokenParserInterface::class : TwigCallableInterface::class;
-        trigger_deprecation('twig/twig', '3.28', 'Not implementing the "isAlwaysAllowedInSandbox()" method in "%s" is deprecated. This method will be part of the "%s" interface in 4.0.', $subject::class, $interface);
-
-        return false;
-    }
-
-    public function getPriority(): int
-    {
-        return 0;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/NodeVisitor/YieldNotReadyNodeVisitor.php b/generated/php/vendor/twig/twig/src/NodeVisitor/YieldNotReadyNodeVisitor.php
deleted file mode 100644
index 4d6cf60..0000000
--- a/generated/php/vendor/twig/twig/src/NodeVisitor/YieldNotReadyNodeVisitor.php
+++ /dev/null
@@ -1,59 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\NodeVisitor;
-
-use Twig\Attribute\YieldReady;
-use Twig\Environment;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Node;
-
-/**
- * @internal to be removed in Twig 4
- */
-final class YieldNotReadyNodeVisitor implements NodeVisitorInterface
-{
-    private $yieldReadyNodes = [];
-
-    public function __construct(
-        private bool $useYield,
-    ) {
-    }
-
-    public function enterNode(Node $node, Environment $env): Node
-    {
-        $class = $node::class;
-
-        if ($node instanceof AbstractExpression || isset($this->yieldReadyNodes[$class])) {
-            return $node;
-        }
-
-        if (!$this->yieldReadyNodes[$class] = (bool) (new \ReflectionClass($class))->getAttributes(YieldReady::class)) {
-            if ($this->useYield) {
-                throw new \LogicException(\sprintf('You cannot enable the "use_yield" option of Twig as node "%s" is not marked as ready for it; please make it ready and then flag it with the #[\Twig\Attribute\YieldReady] attribute.', $class));
-            }
-
-            trigger_deprecation('twig/twig', '3.9', 'Twig node "%s" is not marked as ready for using "yield" instead of "echo"; please make it ready and then flag it with the #[\Twig\Attribute\YieldReady] attribute.', $class);
-        }
-
-        return $node;
-    }
-
-    public function leaveNode(Node $node, Environment $env): ?Node
-    {
-        return $node;
-    }
-
-    public function getPriority(): int
-    {
-        return 255;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/OperatorPrecedenceChange.php b/generated/php/vendor/twig/twig/src/OperatorPrecedenceChange.php
deleted file mode 100644
index 31ebaef..0000000
--- a/generated/php/vendor/twig/twig/src/OperatorPrecedenceChange.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\ExpressionParser\PrecedenceChange;
-
-/**
- * Represents a precedence change.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @deprecated since Twig 1.20 Use Twig\ExpressionParser\PrecedenceChange instead
- */
-class OperatorPrecedenceChange extends PrecedenceChange
-{
-    public function __construct(
-        private string $package,
-        private string $version,
-        private int $newPrecedence,
-    ) {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s" class is deprecated since Twig 3.21. Use "%s" instead.', self::class, PrecedenceChange::class);
-
-        parent::__construct($package, $version, $newPrecedence);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Parser.php b/generated/php/vendor/twig/twig/src/Parser.php
deleted file mode 100644
index 5ef1aea..0000000
--- a/generated/php/vendor/twig/twig/src/Parser.php
+++ /dev/null
@@ -1,612 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Error\SyntaxError;
-use Twig\ExpressionParser\ExpressionParserInterface;
-use Twig\ExpressionParser\ExpressionParsers;
-use Twig\ExpressionParser\ExpressionParserType;
-use Twig\ExpressionParser\InfixExpressionParserInterface;
-use Twig\ExpressionParser\Prefix\LiteralExpressionParser;
-use Twig\ExpressionParser\PrefixExpressionParserInterface;
-use Twig\Node\BlockNode;
-use Twig\Node\BlockReferenceNode;
-use Twig\Node\BodyNode;
-use Twig\Node\EmptyNode;
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\Expression\Variable\AssignTemplateVariable;
-use Twig\Node\Expression\Variable\TemplateVariable;
-use Twig\Node\MacroNode;
-use Twig\Node\ModuleNode;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\Node\PrintNode;
-use Twig\Node\TextNode;
-use Twig\TokenParser\TokenParserInterface;
-use Twig\Util\ReflectionCallable;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class Parser
-{
-    private $stack = [];
-    private ?\WeakMap $expressionRefs = null;
-    private $stream;
-    private $parent;
-    private $visitors;
-    private $expressionParser;
-    private $blocks;
-    private $blockStack;
-    private $macros;
-    private $importedSymbols;
-    private $traits;
-    private $embeddedTemplates = [];
-    private int $lastEmbedIndex = 0;
-    private $varNameSalt = 0;
-    private $ignoreUnknownTwigCallables = false;
-    private ExpressionParsers $parsers;
-
-    public function __construct(
-        private Environment $env,
-    ) {
-        $this->parsers = $env->getExpressionParsers();
-    }
-
-    public function getEnvironment(): Environment
-    {
-        return $this->env;
-    }
-
-    public function getVarName(): string
-    {
-        trigger_deprecation('twig/twig', '3.15', 'The "%s()" method is deprecated.', __METHOD__);
-
-        return \sprintf('__internal_parse_%d', $this->varNameSalt++);
-    }
-
-    /**
-     * @throws SyntaxError
-     */
-    public function parse(TokenStream $stream, $test = null, bool $dropNeedle = false): ModuleNode
-    {
-        // reset on root parse() calls only, so the counter spans nested/reentrant parses
-        if (!$this->stack) {
-            $this->lastEmbedIndex = 0;
-        }
-
-        $vars = get_object_vars($this);
-        unset($vars['stack'], $vars['env'], $vars['handlers'], $vars['visitors'], $vars['expressionParser'], $vars['reservedMacroNames'], $vars['lastEmbedIndex'], $vars['varNameSalt']);
-        $this->stack[] = $vars;
-
-        // node visitors
-        if (null === $this->visitors) {
-            $this->visitors = $this->env->getNodeVisitors();
-        }
-
-        $this->stream = $stream;
-        $this->parent = null;
-        $this->blocks = [];
-        $this->macros = [];
-        $this->traits = [];
-        $this->blockStack = [];
-        $this->importedSymbols = [[]];
-        $this->embeddedTemplates = [];
-        $this->expressionRefs = new \WeakMap();
-
-        try {
-            $body = $this->subparse($test, $dropNeedle);
-        } catch (SyntaxError $e) {
-            if (!$e->getSourceContext()) {
-                $e->setSourceContext($this->stream->getSourceContext());
-            }
-
-            if (!$e->getTemplateLine()) {
-                $e->setTemplateLine($this->getCurrentToken()->getLine());
-            }
-
-            throw $e;
-        } finally {
-            $this->expressionRefs = null;
-        }
-
-        if ($this->parent) {
-            $body = $this->cleanupBodyForChildTemplates($body);
-        }
-
-        $node = new ModuleNode(
-            new BodyNode([$body]),
-            $this->parent,
-            $this->blocks ? new Nodes($this->blocks) : new EmptyNode(),
-            $this->macros ? new Nodes($this->macros) : new EmptyNode(),
-            $this->traits ? new Nodes($this->traits) : new EmptyNode(),
-            $this->embeddedTemplates ? new Nodes($this->embeddedTemplates) : new EmptyNode(),
-            $stream->getSourceContext(),
-        );
-
-        $traverser = new NodeTraverser($this->env, $this->visitors);
-
-        /**
-         * @var ModuleNode $node
-         */
-        $node = $traverser->traverse($node);
-
-        // restore previous stack so previous parse() call can resume working
-        foreach (array_pop($this->stack) as $key => $val) {
-            $this->$key = $val;
-        }
-
-        return $node;
-    }
-
-    public function shouldIgnoreUnknownTwigCallables(): bool
-    {
-        return $this->ignoreUnknownTwigCallables;
-    }
-
-    public function subparseIgnoreUnknownTwigCallables($test, bool $dropNeedle = false): void
-    {
-        $previous = $this->ignoreUnknownTwigCallables;
-        $this->ignoreUnknownTwigCallables = true;
-        try {
-            $this->subparse($test, $dropNeedle);
-        } finally {
-            $this->ignoreUnknownTwigCallables = $previous;
-        }
-    }
-
-    /**
-     * @throws SyntaxError
-     */
-    public function subparse($test, bool $dropNeedle = false): Node
-    {
-        $lineno = $this->getCurrentToken()->getLine();
-        $rv = [];
-        while (!$this->stream->isEOF()) {
-            switch (true) {
-                case $this->stream->getCurrent()->test(Token::TEXT_TYPE):
-                    $token = $this->stream->next();
-                    $rv[] = new TextNode($token->getValue(), $token->getLine());
-                    break;
-
-                case $this->stream->getCurrent()->test(Token::VAR_START_TYPE):
-                    $token = $this->stream->next();
-                    $expr = $this->parseExpression();
-                    $this->stream->expect(Token::VAR_END_TYPE);
-                    $rv[] = new PrintNode($expr, $token->getLine());
-                    break;
-
-                case $this->stream->getCurrent()->test(Token::BLOCK_START_TYPE):
-                    $this->stream->next();
-                    $token = $this->getCurrentToken();
-
-                    if (!$token->test(Token::NAME_TYPE)) {
-                        throw new SyntaxError('A block must start with a tag name.', $token->getLine(), $this->stream->getSourceContext());
-                    }
-
-                    if (null !== $test && $test($token)) {
-                        if ($dropNeedle) {
-                            $this->stream->next();
-                        }
-
-                        if (1 === \count($rv)) {
-                            return $rv[0];
-                        }
-
-                        return new Nodes($rv, $lineno);
-                    }
-
-                    if (!$subparser = $this->env->getTokenParser($token->getValue())) {
-                        if (null !== $test) {
-                            $e = new SyntaxError(\sprintf('Unexpected "%s" tag', $token->getValue()), $token->getLine(), $this->stream->getSourceContext());
-
-                            $callable = (new ReflectionCallable(new TwigTest('decision', $test)))->getCallable();
-                            if (\is_array($callable) && $callable[0] instanceof TokenParserInterface) {
-                                $e->appendMessage(\sprintf(' (expecting closing tag for the "%s" tag defined near line %s).', $callable[0]->getTag(), $lineno));
-                            }
-                        } else {
-                            $e = new SyntaxError(\sprintf('Unknown "%s" tag.', $token->getValue()), $token->getLine(), $this->stream->getSourceContext());
-                            $e->addSuggestions($token->getValue(), array_keys($this->env->getTokenParsers()));
-                        }
-
-                        throw $e;
-                    }
-
-                    $this->stream->next();
-
-                    $subparser->setParser($this);
-                    $node = $subparser->parse($token);
-                    if (!$node) {
-                        trigger_deprecation('twig/twig', '3.12', 'Returning "null" from "%s" is deprecated and forbidden by "TokenParserInterface".', $subparser::class);
-                    } else {
-                        $node->setNodeTag($subparser->getTag());
-                        $rv[] = $node;
-                    }
-                    break;
-
-                default:
-                    throw new SyntaxError('The lexer or the parser ended up in an unsupported state.', $this->getCurrentToken()->getLine(), $this->stream->getSourceContext());
-            }
-        }
-
-        if (1 === \count($rv)) {
-            return $rv[0];
-        }
-
-        return new Nodes($rv, $lineno);
-    }
-
-    public function getBlockStack(): array
-    {
-        trigger_deprecation('twig/twig', '3.12', 'Method "%s()" is deprecated.', __METHOD__);
-
-        return $this->blockStack;
-    }
-
-    /**
-     * @return string|null
-     */
-    public function peekBlockStack()
-    {
-        return $this->blockStack[\count($this->blockStack) - 1] ?? null;
-    }
-
-    public function popBlockStack(): void
-    {
-        array_pop($this->blockStack);
-    }
-
-    public function pushBlockStack($name): void
-    {
-        $this->blockStack[] = $name;
-    }
-
-    public function hasBlock(string $name): bool
-    {
-        trigger_deprecation('twig/twig', '3.12', 'Method "%s()" is deprecated.', __METHOD__);
-
-        return isset($this->blocks[$name]);
-    }
-
-    public function getBlock(string $name): Node
-    {
-        trigger_deprecation('twig/twig', '3.12', 'Method "%s()" is deprecated.', __METHOD__);
-
-        return $this->blocks[$name];
-    }
-
-    public function setBlock(string $name, BlockNode $value): void
-    {
-        if (isset($this->blocks[$name])) {
-            throw new SyntaxError(\sprintf("The block '%s' has already been defined line %d.", $name, $this->blocks[$name]->getTemplateLine()), $this->getCurrentToken()->getLine(), $this->blocks[$name]->getSourceContext());
-        }
-
-        $this->blocks[$name] = new BodyNode([$value], [], $value->getTemplateLine());
-    }
-
-    public function hasMacro(string $name): bool
-    {
-        trigger_deprecation('twig/twig', '3.12', 'Method "%s()" is deprecated.', __METHOD__);
-
-        return isset($this->macros[$name]);
-    }
-
-    public function setMacro(string $name, MacroNode $node): void
-    {
-        $this->macros[$name] = $node;
-    }
-
-    public function addTrait($trait): void
-    {
-        $this->traits[] = $trait;
-    }
-
-    public function hasTraits(): bool
-    {
-        trigger_deprecation('twig/twig', '3.12', 'Method "%s()" is deprecated.', __METHOD__);
-
-        return \count($this->traits) > 0;
-    }
-
-    /**
-     * @return void
-     */
-    public function embedTemplate(ModuleNode $template)
-    {
-        $template->setIndex(++$this->lastEmbedIndex);
-
-        $this->embeddedTemplates[] = $template;
-    }
-
-    public function addImportedSymbol(string $type, string $alias, ?string $name = null, AbstractExpression|AssignTemplateVariable|null $internalRef = null): void
-    {
-        if ($internalRef && !$internalRef instanceof AssignTemplateVariable) {
-            trigger_deprecation('twig/twig', '3.15', 'Not passing a "%s" instance as an internal reference is deprecated ("%s" given).', __METHOD__, AssignTemplateVariable::class, $internalRef::class);
-
-            $internalRef = new AssignTemplateVariable(new TemplateVariable($internalRef->getAttribute('name'), $internalRef->getTemplateLine()), $internalRef->getAttribute('global'));
-        }
-
-        $this->importedSymbols[0][$type][$alias] = ['name' => $name, 'node' => $internalRef];
-    }
-
-    /**
-     * @return array{name: string, node: AssignTemplateVariable|null}|null
-     */
-    public function getImportedSymbol(string $type, string $alias)
-    {
-        // if the symbol does not exist in the current scope (0), try in the main/global scope (last index)
-        return $this->importedSymbols[0][$type][$alias] ?? ($this->importedSymbols[\count($this->importedSymbols) - 1][$type][$alias] ?? null);
-    }
-
-    public function isMainScope(): bool
-    {
-        return 1 === \count($this->importedSymbols);
-    }
-
-    public function pushLocalScope(): void
-    {
-        array_unshift($this->importedSymbols, []);
-    }
-
-    public function popLocalScope(): void
-    {
-        array_shift($this->importedSymbols);
-    }
-
-    /**
-     * @deprecated since Twig 3.21
-     */
-    public function getExpressionParser(): ExpressionParser
-    {
-        trigger_deprecation('twig/twig', '3.21', 'Method "%s()" is deprecated, use "parseExpression()" instead.', __METHOD__);
-
-        if (null === $this->expressionParser) {
-            $this->expressionParser = new ExpressionParser($this, $this->env);
-        }
-
-        return $this->expressionParser;
-    }
-
-    public function parseExpression(int $precedence = 0): AbstractExpression
-    {
-        $token = $this->getCurrentToken();
-        if ($token->test(Token::OPERATOR_TYPE) && $ep = $this->parsers->getByName(PrefixExpressionParserInterface::class, $token->getValue())) {
-            $this->getStream()->next();
-            $expr = $ep->parse($this, $token);
-            $this->checkPrecedenceDeprecations($ep, $expr);
-        } else {
-            $expr = $this->parsers->getByClass(LiteralExpressionParser::class)->parse($this, $token);
-        }
-
-        $token = $this->getCurrentToken();
-        while ($token->test(Token::OPERATOR_TYPE) && ($ep = $this->parsers->getByName(InfixExpressionParserInterface::class, $token->getValue())) && $ep->getPrecedence() >= $precedence) {
-            $this->getStream()->next();
-            $expr = $ep->parse($this, $expr, $token);
-            $this->checkPrecedenceDeprecations($ep, $expr);
-            $token = $this->getCurrentToken();
-        }
-
-        return $expr;
-    }
-
-    public function getParent(): ?Node
-    {
-        trigger_deprecation('twig/twig', '3.12', 'Method "%s()" is deprecated.', __METHOD__);
-
-        return $this->parent;
-    }
-
-    /**
-     * @return bool
-     */
-    public function hasInheritance()
-    {
-        return $this->parent || 0 < \count($this->traits);
-    }
-
-    public function setParent(?Node $parent, bool $throwOnMultiple = true): void
-    {
-        if (null === $parent) {
-            trigger_deprecation('twig/twig', '3.12', 'Passing "null" to "%s()" is deprecated.', __METHOD__);
-        }
-
-        if (null !== $parent && !$parent instanceof AbstractExpression) {
-            trigger_deprecation('twig/twig', '3.24', 'Passing a "%s" instance to "%s()" is deprecated, pass an "AbstractExpression" instance instead.', $parent::class, __METHOD__);
-        }
-
-        if (null !== $this->parent) {
-            if (!$throwOnMultiple) {
-                return;
-            }
-
-            throw new SyntaxError('Multiple extends tags are forbidden.', $parent->getTemplateLine(), $parent->getSourceContext());
-        }
-
-        $this->parent = $parent;
-    }
-
-    public function getStream(): TokenStream
-    {
-        return $this->stream;
-    }
-
-    public function getCurrentToken(): Token
-    {
-        return $this->stream->getCurrent();
-    }
-
-    public function getFunction(string $name, int $line): TwigFunction
-    {
-        try {
-            $function = $this->env->getFunction($name);
-        } catch (SyntaxError $e) {
-            if (!$this->shouldIgnoreUnknownTwigCallables()) {
-                throw $e;
-            }
-
-            $function = null;
-        }
-
-        if (!$function) {
-            if ($this->shouldIgnoreUnknownTwigCallables()) {
-                return new TwigFunction($name, static fn () => '');
-            }
-            $e = new SyntaxError(\sprintf('Unknown "%s" function.', $name), $line, $this->stream->getSourceContext());
-            $e->addSuggestions($name, array_keys($this->env->getFunctions()));
-
-            throw $e;
-        }
-
-        if ($function->isDeprecated()) {
-            $src = $this->stream->getSourceContext();
-            $function->triggerDeprecation($src->getPath() ?: $src->getName(), $line);
-        }
-
-        return $function;
-    }
-
-    public function getFilter(string $name, int $line): TwigFilter
-    {
-        try {
-            $filter = $this->env->getFilter($name);
-        } catch (SyntaxError $e) {
-            if (!$this->shouldIgnoreUnknownTwigCallables()) {
-                throw $e;
-            }
-
-            $filter = null;
-        }
-        if (!$filter) {
-            if ($this->shouldIgnoreUnknownTwigCallables()) {
-                return new TwigFilter($name, static fn () => '');
-            }
-            $e = new SyntaxError(\sprintf('Unknown "%s" filter.', $name), $line, $this->stream->getSourceContext());
-            $e->addSuggestions($name, array_keys($this->env->getFilters()));
-
-            throw $e;
-        }
-
-        if ($filter->isDeprecated()) {
-            $src = $this->stream->getSourceContext();
-            $filter->triggerDeprecation($src->getPath() ?: $src->getName(), $line);
-        }
-
-        return $filter;
-    }
-
-    public function getTest(int $line): TwigTest
-    {
-        $name = $this->stream->expect(Token::NAME_TYPE)->getValue();
-
-        if ($this->stream->test(Token::NAME_TYPE)) {
-            // try 2-words tests
-            $name = $name.' '.$this->getCurrentToken()->getValue();
-
-            try {
-                $test = $this->env->getTest($name);
-            } catch (SyntaxError $e) {
-                if (!$this->shouldIgnoreUnknownTwigCallables()) {
-                    throw $e;
-                }
-
-                $test = null;
-            }
-            $this->stream->next();
-        } else {
-            try {
-                $test = $this->env->getTest($name);
-            } catch (SyntaxError $e) {
-                if (!$this->shouldIgnoreUnknownTwigCallables()) {
-                    throw $e;
-                }
-
-                $test = null;
-            }
-        }
-
-        if (!$test) {
-            if ($this->shouldIgnoreUnknownTwigCallables()) {
-                return new TwigTest($name, static fn () => '');
-            }
-            $e = new SyntaxError(\sprintf('Unknown "%s" test.', $name), $line, $this->stream->getSourceContext());
-            $e->addSuggestions($name, array_keys($this->env->getTests()));
-
-            throw $e;
-        }
-
-        if ($test->isDeprecated()) {
-            $src = $this->stream->getSourceContext();
-            $test->triggerDeprecation($src->getPath() ?: $src->getName(), $this->stream->getCurrent()->getLine());
-        }
-
-        return $test;
-    }
-
-    private function cleanupBodyForChildTemplates(Node $body): Node
-    {
-        if ($body instanceof BlockReferenceNode || ($body instanceof TextNode && $body->isBlank())) {
-            return new EmptyNode();
-        }
-
-        foreach ($body as $k => $node) {
-            if ($node instanceof BlockReferenceNode) {
-                // as it has a parent, the block reference won't be used
-                $body->removeNode($k);
-            } elseif ($node instanceof TextNode && $node->isBlank()) {
-                // remove nodes considered as "empty"
-                $body->removeNode($k);
-            }
-        }
-
-        return $body;
-    }
-
-    private function checkPrecedenceDeprecations(ExpressionParserInterface $expressionParser, AbstractExpression $expr)
-    {
-        $this->expressionRefs[$expr] = $expressionParser;
-        $precedenceChanges = $this->parsers->getPrecedenceChanges();
-
-        // Check that the all nodes that are between the 2 precedences have explicit parentheses
-        if (!isset($precedenceChanges[$expressionParser])) {
-            return;
-        }
-
-        if ($expr->hasExplicitParentheses()) {
-            return;
-        }
-
-        if ($expressionParser instanceof PrefixExpressionParserInterface) {
-            /** @var AbstractExpression $node */
-            $node = $expr->getNode('node');
-            foreach ($precedenceChanges as $ep => $changes) {
-                if (!\in_array($expressionParser, $changes, true)) {
-                    continue;
-                }
-                if (isset($this->expressionRefs[$node]) && $ep === $this->expressionRefs[$node]) {
-                    $change = $expressionParser->getPrecedenceChange();
-                    trigger_deprecation($change->getPackage(), $change->getVersion(), \sprintf('As the "%s" %s operator will change its precedence in the next major version, add explicit parentheses to avoid behavior change in "%s" at line %d.', $expressionParser->getName(), ExpressionParserType::getType($expressionParser)->value, $this->getStream()->getSourceContext()->getName(), $node->getTemplateLine()));
-                }
-            }
-        }
-
-        foreach ($precedenceChanges[$expressionParser] as $ep) {
-            foreach ($expr as $node) {
-                /** @var AbstractExpression $node */
-                if (isset($this->expressionRefs[$node]) && $ep === $this->expressionRefs[$node] && !$node->hasExplicitParentheses()) {
-                    $change = $ep->getPrecedenceChange();
-                    trigger_deprecation($change->getPackage(), $change->getVersion(), \sprintf('As the "%s" %s operator will change its precedence in the next major version, add explicit parentheses to avoid behavior change in "%s" at line %d.', $ep->getName(), ExpressionParserType::getType($ep)->value, $this->getStream()->getSourceContext()->getName(), $node->getTemplateLine()));
-                }
-            }
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Profiler/Dumper/BaseDumper.php b/generated/php/vendor/twig/twig/src/Profiler/Dumper/BaseDumper.php
deleted file mode 100644
index 06bf4b8..0000000
--- a/generated/php/vendor/twig/twig/src/Profiler/Dumper/BaseDumper.php
+++ /dev/null
@@ -1,68 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Profiler\Dumper;
-
-use Twig\Profiler\Profile;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-abstract class BaseDumper
-{
-    private $root;
-
-    public function dump(Profile $profile): string
-    {
-        return $this->dumpProfile($profile);
-    }
-
-    abstract protected function formatTemplate(Profile $profile, $prefix): string;
-
-    abstract protected function formatNonTemplate(Profile $profile, $prefix): string;
-
-    abstract protected function formatTime(Profile $profile, $percent): string;
-
-    protected function formatRoot(Profile $profile): string
-    {
-        return $profile->getName();
-    }
-
-    private function dumpProfile(Profile $profile, $prefix = '', $sibling = false): string
-    {
-        if ($profile->isRoot()) {
-            $this->root = $profile->getDuration();
-            $start = $this->formatRoot($profile);
-        } else {
-            if ($profile->isTemplate()) {
-                $start = $this->formatTemplate($profile, $prefix);
-            } else {
-                $start = $this->formatNonTemplate($profile, $prefix);
-            }
-            $prefix .= $sibling ? '│ ' : '  ';
-        }
-
-        $percent = $this->root ? $profile->getDuration() / $this->root * 100 : 0;
-
-        if ($profile->getDuration() * 1000 < 1) {
-            $str = $start."\n";
-        } else {
-            $str = \sprintf("%s %s\n", $start, $this->formatTime($profile, $percent));
-        }
-
-        $nCount = \count($profile->getProfiles());
-        foreach ($profile as $i => $p) {
-            $str .= $this->dumpProfile($p, $prefix, $i + 1 !== $nCount);
-        }
-
-        return $str;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Profiler/Dumper/BlackfireDumper.php b/generated/php/vendor/twig/twig/src/Profiler/Dumper/BlackfireDumper.php
deleted file mode 100644
index 7cfae16..0000000
--- a/generated/php/vendor/twig/twig/src/Profiler/Dumper/BlackfireDumper.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Profiler\Dumper;
-
-use Twig\Profiler\Profile;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class BlackfireDumper
-{
-    public function dump(Profile $profile): string
-    {
-        $data = [];
-        $this->dumpProfile('main()', $profile, $data);
-        $this->dumpChildren('main()', $profile, $data);
-
-        $start = \sprintf('%f', microtime(true));
-        $str = <<<EOF
-file-format: BlackfireProbe
-cost-dimensions: wt mu pmu
-request-start: $start
-
-
-EOF;
-
-        foreach ($data as $name => $values) {
-            $str .= "$name//{$values['ct']} {$values['wt']} {$values['mu']} {$values['pmu']}\n";
-        }
-
-        return $str;
-    }
-
-    private function dumpChildren(string $parent, Profile $profile, &$data): void
-    {
-        foreach ($profile as $p) {
-            if ($p->isTemplate()) {
-                $name = $p->getTemplate();
-            } else {
-                $name = \sprintf('%s::%s(%s)', $p->getTemplate(), $p->getType(), $p->getName());
-            }
-            $this->dumpProfile(\sprintf('%s==>%s', $parent, $name), $p, $data);
-            $this->dumpChildren($name, $p, $data);
-        }
-    }
-
-    private function dumpProfile(string $edge, Profile $profile, &$data): void
-    {
-        if (isset($data[$edge])) {
-            ++$data[$edge]['ct'];
-            $data[$edge]['wt'] += floor($profile->getDuration() * 1000000);
-            $data[$edge]['mu'] += $profile->getMemoryUsage();
-            $data[$edge]['pmu'] += $profile->getPeakMemoryUsage();
-        } else {
-            $data[$edge] = [
-                'ct' => 1,
-                'wt' => floor($profile->getDuration() * 1000000),
-                'mu' => $profile->getMemoryUsage(),
-                'pmu' => $profile->getPeakMemoryUsage(),
-            ];
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Profiler/Dumper/HtmlDumper.php b/generated/php/vendor/twig/twig/src/Profiler/Dumper/HtmlDumper.php
deleted file mode 100644
index 1bfd81b..0000000
--- a/generated/php/vendor/twig/twig/src/Profiler/Dumper/HtmlDumper.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Profiler\Dumper;
-
-use Twig\Profiler\Profile;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class HtmlDumper extends BaseDumper
-{
-    private static $colors = [
-        'block' => '#dfd',
-        'macro' => '#ddf',
-        'template' => '#ffd',
-        'big' => '#d44',
-    ];
-
-    public function dump(Profile $profile): string
-    {
-        return '<pre>'.parent::dump($profile).'</pre>';
-    }
-
-    protected function formatRoot(Profile $profile): string
-    {
-        return self::escape($profile->getName());
-    }
-
-    protected function formatTemplate(Profile $profile, $prefix): string
-    {
-        return \sprintf('%s└ <span style="background-color: %s">%s</span>', $prefix, self::$colors['template'], self::escape($profile->getTemplate()));
-    }
-
-    protected function formatNonTemplate(Profile $profile, $prefix): string
-    {
-        return \sprintf('%s└ %s::%s(<span style="background-color: %s">%s</span>)', $prefix, self::escape($profile->getTemplate()), $profile->getType(), self::$colors[$profile->getType()] ?? 'auto', self::escape($profile->getName()));
-    }
-
-    protected function formatTime(Profile $profile, $percent): string
-    {
-        return \sprintf('<span style="color: %s">%.2fms/%.0f%%</span>', $percent > 20 ? self::$colors['big'] : 'auto', $profile->getDuration() * 1000, $percent);
-    }
-
-    private static function escape(string $value): string
-    {
-        return htmlspecialchars($value, \ENT_QUOTES | \ENT_SUBSTITUTE, 'UTF-8');
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Profiler/Dumper/TextDumper.php b/generated/php/vendor/twig/twig/src/Profiler/Dumper/TextDumper.php
deleted file mode 100644
index 1c1f77e..0000000
--- a/generated/php/vendor/twig/twig/src/Profiler/Dumper/TextDumper.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Profiler\Dumper;
-
-use Twig\Profiler\Profile;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class TextDumper extends BaseDumper
-{
-    protected function formatTemplate(Profile $profile, $prefix): string
-    {
-        return \sprintf('%s└ %s', $prefix, $profile->getTemplate());
-    }
-
-    protected function formatNonTemplate(Profile $profile, $prefix): string
-    {
-        return \sprintf('%s└ %s::%s(%s)', $prefix, $profile->getTemplate(), $profile->getType(), $profile->getName());
-    }
-
-    protected function formatTime(Profile $profile, $percent): string
-    {
-        return \sprintf('%.2fms/%.0f%%', $profile->getDuration() * 1000, $percent);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Profiler/Node/EnterProfileNode.php b/generated/php/vendor/twig/twig/src/Profiler/Node/EnterProfileNode.php
deleted file mode 100644
index 4d8e504..0000000
--- a/generated/php/vendor/twig/twig/src/Profiler/Node/EnterProfileNode.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Profiler\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Node;
-
-/**
- * Represents a profile enter node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class EnterProfileNode extends Node
-{
-    public function __construct(string $extensionName, string $type, string $name, string $varName)
-    {
-        parent::__construct([], ['extension_name' => $extensionName, 'name' => $name, 'type' => $type, 'var_name' => $varName]);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->write(\sprintf('$%s = $this->extensions[', $this->getAttribute('var_name')))
-            ->repr($this->getAttribute('extension_name'))
-            ->raw("];\n")
-            ->write(\sprintf('$%s->enter($%s = new \Twig\Profiler\Profile($this->getTemplateName(), ', $this->getAttribute('var_name'), $this->getAttribute('var_name').'_prof'))
-            ->repr($this->getAttribute('type'))
-            ->raw(', ')
-            ->repr($this->getAttribute('name'))
-            ->raw("));\n\n")
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Profiler/Node/LeaveProfileNode.php b/generated/php/vendor/twig/twig/src/Profiler/Node/LeaveProfileNode.php
deleted file mode 100644
index bd9227e..0000000
--- a/generated/php/vendor/twig/twig/src/Profiler/Node/LeaveProfileNode.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Profiler\Node;
-
-use Twig\Attribute\YieldReady;
-use Twig\Compiler;
-use Twig\Node\Node;
-
-/**
- * Represents a profile leave node.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-#[YieldReady]
-class LeaveProfileNode extends Node
-{
-    public function __construct(string $varName)
-    {
-        parent::__construct([], ['var_name' => $varName]);
-    }
-
-    public function compile(Compiler $compiler): void
-    {
-        $compiler
-            ->write("\n")
-            ->write(\sprintf("\$%s->leave(\$%s);\n\n", $this->getAttribute('var_name'), $this->getAttribute('var_name').'_prof'))
-        ;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Profiler/NodeVisitor/ProfilerNodeVisitor.php b/generated/php/vendor/twig/twig/src/Profiler/NodeVisitor/ProfilerNodeVisitor.php
deleted file mode 100644
index 4c5c200..0000000
--- a/generated/php/vendor/twig/twig/src/Profiler/NodeVisitor/ProfilerNodeVisitor.php
+++ /dev/null
@@ -1,70 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Profiler\NodeVisitor;
-
-use Twig\Environment;
-use Twig\Node\BlockNode;
-use Twig\Node\BodyNode;
-use Twig\Node\MacroNode;
-use Twig\Node\ModuleNode;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\NodeVisitor\NodeVisitorInterface;
-use Twig\Profiler\Node\EnterProfileNode;
-use Twig\Profiler\Node\LeaveProfileNode;
-use Twig\Profiler\Profile;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class ProfilerNodeVisitor implements NodeVisitorInterface
-{
-    private $varName;
-
-    public function __construct(
-        private string $extensionName,
-    ) {
-        $this->varName = \sprintf('__internal_%s', hash(\PHP_VERSION_ID < 80100 ? 'sha256' : 'xxh128', $extensionName));
-    }
-
-    public function enterNode(Node $node, Environment $env): Node
-    {
-        return $node;
-    }
-
-    public function leaveNode(Node $node, Environment $env): ?Node
-    {
-        if ($node instanceof ModuleNode) {
-            $node->setNode('display_start', new Nodes([new EnterProfileNode($this->extensionName, Profile::TEMPLATE, $node->getTemplateName(), $this->varName), $node->getNode('display_start')]));
-            $node->setNode('display_end', new Nodes([new LeaveProfileNode($this->varName), $node->getNode('display_end')]));
-        } elseif ($node instanceof BlockNode) {
-            $node->setNode('body', new BodyNode([
-                new EnterProfileNode($this->extensionName, Profile::BLOCK, $node->getAttribute('name'), $this->varName),
-                $node->getNode('body'),
-                new LeaveProfileNode($this->varName),
-            ]));
-        } elseif ($node instanceof MacroNode) {
-            $node->setNode('body', new BodyNode([
-                new EnterProfileNode($this->extensionName, Profile::MACRO, $node->getAttribute('name'), $this->varName),
-                $node->getNode('body'),
-                new LeaveProfileNode($this->varName),
-            ]));
-        }
-
-        return $node;
-    }
-
-    public function getPriority(): int
-    {
-        return 0;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Profiler/Profile.php b/generated/php/vendor/twig/twig/src/Profiler/Profile.php
deleted file mode 100644
index 63861d6..0000000
--- a/generated/php/vendor/twig/twig/src/Profiler/Profile.php
+++ /dev/null
@@ -1,194 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Profiler;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class Profile implements \IteratorAggregate, \Serializable
-{
-    public const ROOT = 'ROOT';
-    public const BLOCK = 'block';
-    public const TEMPLATE = 'template';
-    public const MACRO = 'macro';
-    private $starts = [];
-    private $ends = [];
-    private $profiles = [];
-
-    public function __construct(
-        private string $template = 'main',
-        private string $type = self::ROOT,
-        private string $name = 'main',
-    ) {
-        $this->name = str_starts_with($name, '__internal_') ? 'INTERNAL' : $name;
-        $this->enter();
-    }
-
-    public function getTemplate(): string
-    {
-        return $this->template;
-    }
-
-    public function getType(): string
-    {
-        return $this->type;
-    }
-
-    public function getName(): string
-    {
-        return $this->name;
-    }
-
-    public function isRoot(): bool
-    {
-        return self::ROOT === $this->type;
-    }
-
-    public function isTemplate(): bool
-    {
-        return self::TEMPLATE === $this->type;
-    }
-
-    public function isBlock(): bool
-    {
-        return self::BLOCK === $this->type;
-    }
-
-    public function isMacro(): bool
-    {
-        return self::MACRO === $this->type;
-    }
-
-    /**
-     * @return Profile[]
-     */
-    public function getProfiles(): array
-    {
-        return $this->profiles;
-    }
-
-    public function addProfile(self $profile): void
-    {
-        $this->profiles[] = $profile;
-    }
-
-    /**
-     * Returns the duration in microseconds.
-     */
-    public function getDuration(): float
-    {
-        if ($this->isRoot() && $this->profiles) {
-            // for the root node with children, duration is the sum of all child durations
-            $duration = 0;
-            foreach ($this->profiles as $profile) {
-                $duration += $profile->getDuration();
-            }
-
-            return $duration;
-        }
-
-        return isset($this->ends['wt']) && isset($this->starts['wt']) ? $this->ends['wt'] - $this->starts['wt'] : 0;
-    }
-
-    /**
-     * Returns the start time in microseconds.
-     */
-    public function getStartTime(): float
-    {
-        return $this->starts['wt'] ?? 0.0;
-    }
-
-    /**
-     * Returns the end time in microseconds.
-     */
-    public function getEndTime(): float
-    {
-        return $this->ends['wt'] ?? 0.0;
-    }
-
-    /**
-     * Returns the memory usage in bytes.
-     */
-    public function getMemoryUsage(): int
-    {
-        return isset($this->ends['mu']) && isset($this->starts['mu']) ? $this->ends['mu'] - $this->starts['mu'] : 0;
-    }
-
-    /**
-     * Returns the peak memory usage in bytes.
-     */
-    public function getPeakMemoryUsage(): int
-    {
-        return isset($this->ends['pmu']) && isset($this->starts['pmu']) ? $this->ends['pmu'] - $this->starts['pmu'] : 0;
-    }
-
-    /**
-     * Starts the profiling.
-     */
-    public function enter(): void
-    {
-        $this->starts = [
-            'wt' => microtime(true),
-            'mu' => memory_get_usage(),
-            'pmu' => memory_get_peak_usage(),
-        ];
-    }
-
-    /**
-     * Stops the profiling.
-     */
-    public function leave(): void
-    {
-        $this->ends = [
-            'wt' => microtime(true),
-            'mu' => memory_get_usage(),
-            'pmu' => memory_get_peak_usage(),
-        ];
-    }
-
-    public function reset(): void
-    {
-        $this->starts = $this->ends = $this->profiles = [];
-        $this->enter();
-    }
-
-    public function getIterator(): \Traversable
-    {
-        return new \ArrayIterator($this->profiles);
-    }
-
-    public function serialize(): string
-    {
-        return serialize($this->__serialize());
-    }
-
-    public function unserialize($data): void
-    {
-        $this->__unserialize(unserialize($data, ['allowed_classes' => [self::class]]));
-    }
-
-    /**
-     * @internal
-     */
-    public function __serialize(): array
-    {
-        return [$this->template, $this->name, $this->type, $this->starts, $this->ends, $this->profiles];
-    }
-
-    /**
-     * @internal
-     */
-    public function __unserialize(array $data): void
-    {
-        [$this->template, $this->name, $this->type, $this->starts, $this->ends, $this->profiles] = $data;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Resources/core.php b/generated/php/vendor/twig/twig/src/Resources/core.php
deleted file mode 100644
index 80f62cf..0000000
--- a/generated/php/vendor/twig/twig/src/Resources/core.php
+++ /dev/null
@@ -1,572 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-use Twig\Environment;
-use Twig\Extension\CoreExtension;
-use Twig\Extension\SandboxExtension;
-use Twig\Source;
-use Twig\Template;
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_cycle($values, $position)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::cycle($values, $position);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_random(Environment $env, $values = null, $max = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::random($env->getCharset(), $values, $max);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_date_format_filter(Environment $env, $date, $format = null, $timezone = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return $env->getExtension(CoreExtension::class)->formatDate($date, $format, $timezone);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_date_modify_filter(Environment $env, $date, $modifier)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return $env->getExtension(CoreExtension::class)->modifyDate($date, $modifier);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_sprintf($format, ...$values)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::sprintf($format, ...$values);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_date_converter(Environment $env, $date = null, $timezone = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return $env->getExtension(CoreExtension::class)->convertDate($date, $timezone);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_replace_filter($str, $from)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::replace($str, $from);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_round($value, $precision = 0, $method = 'common')
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::round($value, $precision, $method);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_number_format_filter(Environment $env, $number, $decimal = null, $decimalPoint = null, $thousandSep = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return $env->getExtension(CoreExtension::class)->formatNumber($number, $decimal, $decimalPoint, $thousandSep);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_urlencode_filter($url)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::urlencode($url);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_array_merge(...$arrays)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::merge(...$arrays);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_slice(Environment $env, $item, $start, $length = null, $preserveKeys = false)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::slice($env->getCharset(), $item, $start, $length, $preserveKeys);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_first(Environment $env, $item)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::first($env->getCharset(), $item);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_last(Environment $env, $item)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::last($env->getCharset(), $item);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_join_filter($value, $glue = '', $and = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::join($value, $glue, $and);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_split_filter(Environment $env, $value, $delimiter, $limit = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::split($env->getCharset(), $value, $delimiter, $limit);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_get_array_keys_filter($array)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::keys($array);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_reverse_filter(Environment $env, $item, $preserveKeys = false)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::reverse($env->getCharset(), $item, $preserveKeys);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_sort_filter(Environment $env, $array, $arrow = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::sort($env, twig_resolve_is_sandboxed($env), $array, $arrow);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_matches(string $regexp, ?string $str)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::matches($regexp, $str);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_trim_filter($string, $characterMask = null, $side = 'both')
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::trim($string, $characterMask, $side);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_nl2br($string)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::nl2br($string);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_spaceless($content)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::spaceless($content);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_convert_encoding($string, $to, $from)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::convertEncoding($string, $to, $from);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_length_filter(Environment $env, $thing)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::length($env->getCharset(), $thing);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_upper_filter(Environment $env, $string)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::upper($env->getCharset(), $string);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_lower_filter(Environment $env, $string)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::lower($env->getCharset(), $string);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_striptags($string, $allowable_tags = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::striptags($string, $allowable_tags);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_title_string_filter(Environment $env, $string)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::titleCase($env->getCharset(), $string);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_capitalize_string_filter(Environment $env, $string)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::capitalize($env->getCharset(), $string);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_test_empty($value)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::testEmpty($value);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_test_iterable($value)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return is_iterable($value);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_include(Environment $env, $context, $template, $variables = [], $withContext = true, $ignoreMissing = false, $sandboxed = false)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::include($env, $context, $template, $variables, $withContext, $ignoreMissing, $sandboxed);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_source(Environment $env, $name, $ignoreMissing = false)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::source($env, $name, $ignoreMissing);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_constant($constant, $object = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::constant($constant, $object);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_constant_is_defined($constant, $object = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::constant($constant, $object, true);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_array_batch($items, $size, $fill = null, $preserveKeys = true)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::batch($items, $size, $fill, $preserveKeys);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_array_column(Environment $env, $array, $name, $index = null): array
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::column($env, twig_resolve_is_sandboxed($env), $array, $name, $index);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_array_filter(Environment $env, $array, $arrow)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::filter($env, twig_resolve_is_sandboxed($env), $array, $arrow);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_array_map(Environment $env, $array, $arrow)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::map($env, twig_resolve_is_sandboxed($env), $array, $arrow);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_array_reduce(Environment $env, $array, $arrow, $initial = null)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::reduce($env, twig_resolve_is_sandboxed($env), $array, $arrow, $initial);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_array_some(Environment $env, $array, $arrow)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::arraySome($env, $array, $arrow, twig_resolve_is_sandboxed($env));
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_array_every(Environment $env, $array, $arrow)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return CoreExtension::arrayEvery($env, $array, $arrow, twig_resolve_is_sandboxed($env));
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_check_arrow_in_sandbox(Environment $env, $arrow, $thing, $type)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    CoreExtension::checkArrow(twig_resolve_is_sandboxed($env), $arrow, $thing, $type);
-}
-
-/**
- * Recovers the calling Template's Source by walking the PHP backtrace.
- *
- * @internal
- */
-function twig_resolve_caller_source(): ?Source
-{
-    foreach (debug_backtrace(\DEBUG_BACKTRACE_PROVIDE_OBJECT | \DEBUG_BACKTRACE_IGNORE_ARGS) as $trace) {
-        if (isset($trace['object']) && $trace['object'] instanceof Template) {
-            return $trace['object']->getSourceContext();
-        }
-    }
-
-    return null;
-}
-
-/**
- * @internal
- */
-function twig_resolve_is_sandboxed(Environment $env): bool
-{
-    if (!$env->hasExtension(SandboxExtension::class)) {
-        return false;
-    }
-
-    return $env->getExtension(SandboxExtension::class)->isSandboxed(twig_resolve_caller_source());
-}
diff --git a/generated/php/vendor/twig/twig/src/Resources/debug.php b/generated/php/vendor/twig/twig/src/Resources/debug.php
deleted file mode 100644
index a0392ff..0000000
--- a/generated/php/vendor/twig/twig/src/Resources/debug.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-use Twig\Environment;
-use Twig\Extension\DebugExtension;
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_var_dump(Environment $env, $context, ...$vars)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    DebugExtension::dump($env, $context, ...$vars);
-}
diff --git a/generated/php/vendor/twig/twig/src/Resources/escaper.php b/generated/php/vendor/twig/twig/src/Resources/escaper.php
deleted file mode 100644
index a2ee8e7..0000000
--- a/generated/php/vendor/twig/twig/src/Resources/escaper.php
+++ /dev/null
@@ -1,51 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-use Twig\Environment;
-use Twig\Extension\EscaperExtension;
-use Twig\Node\Node;
-use Twig\Runtime\EscaperRuntime;
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_raw_filter($string)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return $string;
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_escape_filter(Environment $env, $string, $strategy = 'html', $charset = null, $autoescape = false)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return $env->getRuntime(EscaperRuntime::class)->escape($string, $strategy, $charset, $autoescape);
-}
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_escape_filter_is_safe(Node $filterArgs)
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return EscaperExtension::escapeFilterIsSafe($filterArgs);
-}
diff --git a/generated/php/vendor/twig/twig/src/Resources/string_loader.php b/generated/php/vendor/twig/twig/src/Resources/string_loader.php
deleted file mode 100644
index c499e5e..0000000
--- a/generated/php/vendor/twig/twig/src/Resources/string_loader.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-use Twig\Environment;
-use Twig\Extension\StringLoaderExtension;
-use Twig\TemplateWrapper;
-
-/**
- * @internal
- *
- * @deprecated since Twig 3.9
- */
-function twig_template_from_string(Environment $env, $template, ?string $name = null): TemplateWrapper
-{
-    trigger_deprecation('twig/twig', '3.9', 'Using the internal "%s" function is deprecated.', __FUNCTION__);
-
-    return StringLoaderExtension::templateFromString($env, $template, $name);
-}
diff --git a/generated/php/vendor/twig/twig/src/Runtime/EscaperRuntime.php b/generated/php/vendor/twig/twig/src/Runtime/EscaperRuntime.php
deleted file mode 100644
index f4a7023..0000000
--- a/generated/php/vendor/twig/twig/src/Runtime/EscaperRuntime.php
+++ /dev/null
@@ -1,346 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Runtime;
-
-use Twig\Error\RuntimeError;
-use Twig\Extension\RuntimeExtensionInterface;
-use Twig\Markup;
-
-final class EscaperRuntime implements RuntimeExtensionInterface
-{
-    /** @var array<string, callable(string, string): string> */
-    private $escapers = [];
-
-    /** @internal */
-    public $safeClasses = [];
-
-    /** @internal */
-    public $safeLookup = [];
-
-    public function __construct(
-        private $charset = 'UTF-8',
-    ) {
-    }
-
-    /**
-     * Defines a new escaper to be used via the escape filter.
-     *
-     * @param string                                            $strategy The strategy name that should be used as a strategy in the escape call
-     * @param callable(string $string, string $charset): string $callable A valid PHP callable
-     *
-     * @return void
-     */
-    public function setEscaper($strategy, callable $callable)
-    {
-        $this->escapers[$strategy] = $callable;
-    }
-
-    /**
-     * Gets all defined escapers.
-     *
-     * @return array<string, callable(string $string, string $charset): string> An array of escapers
-     */
-    public function getEscapers()
-    {
-        return $this->escapers;
-    }
-
-    /**
-     * @param array<class-string<\Stringable>, string[]> $safeClasses
-     *
-     * @return void
-     */
-    public function setSafeClasses(array $safeClasses = [])
-    {
-        $this->safeClasses = [];
-        $this->safeLookup = [];
-        foreach ($safeClasses as $class => $strategies) {
-            $this->addSafeClass($class, $strategies);
-        }
-    }
-
-    /**
-     * @param class-string<\Stringable> $class
-     * @param string[]                  $strategies
-     *
-     * @return void
-     */
-    public function addSafeClass(string $class, array $strategies)
-    {
-        $class = ltrim($class, '\\');
-        if (!isset($this->safeClasses[$class])) {
-            $this->safeClasses[$class] = [];
-        }
-        $this->safeClasses[$class] = array_merge($this->safeClasses[$class], $strategies);
-
-        foreach ($strategies as $strategy) {
-            $this->safeLookup[$strategy][$class] = true;
-        }
-    }
-
-    /**
-     * Escapes a string.
-     *
-     * @param mixed       $string     The value to be escaped
-     * @param string      $strategy   The escaping strategy
-     * @param string|null $charset    The charset
-     * @param bool        $autoescape Whether the function is called by the auto-escaping feature (true) or by the developer (false)
-     *
-     * @throws RuntimeError
-     */
-    public function escape($string, string $strategy = 'html', ?string $charset = null, bool $autoescape = false)
-    {
-        if ($autoescape && $string instanceof Markup) {
-            return $string;
-        }
-
-        if (!\is_string($string)) {
-            if ($string instanceof \Stringable) {
-                if ($autoescape) {
-                    $c = $string::class;
-                    if (!isset($this->safeClasses[$c])) {
-                        $this->safeClasses[$c] = [];
-                        foreach (class_parents($string) + class_implements($string) as $class) {
-                            if (isset($this->safeClasses[$class])) {
-                                $this->safeClasses[$c] = array_unique(array_merge($this->safeClasses[$c], $this->safeClasses[$class]));
-                                foreach ($this->safeClasses[$class] as $s) {
-                                    $this->safeLookup[$s][$c] = true;
-                                }
-                            }
-                        }
-                    }
-                    if (isset($this->safeLookup[$strategy][$c]) || isset($this->safeLookup['all'][$c])) {
-                        return (string) $string;
-                    }
-                }
-
-                $string = (string) $string;
-            } elseif (\in_array($strategy, ['html', 'js', 'css', 'html_attr', 'html_attr_relaxed', 'url'], true)) {
-                // we return the input as is (which can be of any type)
-                return $string;
-            }
-        }
-
-        if ('' === $string) {
-            return '';
-        }
-
-        $charset = $charset ?: $this->charset;
-
-        switch ($strategy) {
-            case 'html':
-                // see https://www.php.net/htmlspecialchars
-
-                if ('UTF-8' === $charset) {
-                    return htmlspecialchars($string, \ENT_QUOTES | \ENT_SUBSTITUTE, 'UTF-8');
-                }
-
-                // Using a static variable to avoid initializing the array
-                // each time the function is called. Moving the declaration on the
-                // top of the function slow downs other escaping strategies.
-                static $htmlspecialcharsCharsets = [
-                    'ISO-8859-1' => true, 'ISO8859-1' => true,
-                    'ISO-8859-15' => true, 'ISO8859-15' => true,
-                    'utf-8' => true, 'UTF-8' => true,
-                    'CP866' => true, 'IBM866' => true, '866' => true,
-                    'CP1251' => true, 'WINDOWS-1251' => true, 'WIN-1251' => true,
-                    '1251' => true,
-                    'CP1252' => true, 'WINDOWS-1252' => true, '1252' => true,
-                    'KOI8-R' => true, 'KOI8-RU' => true, 'KOI8R' => true,
-                    'BIG5' => true, '950' => true,
-                    'GB2312' => true, '936' => true,
-                    'BIG5-HKSCS' => true,
-                    'SHIFT_JIS' => true, 'SJIS' => true, '932' => true,
-                    'EUC-JP' => true, 'EUCJP' => true,
-                    'ISO8859-5' => true, 'ISO-8859-5' => true, 'MACROMAN' => true,
-                ];
-
-                if (isset($htmlspecialcharsCharsets[$charset])) {
-                    return htmlspecialchars($string, \ENT_QUOTES | \ENT_SUBSTITUTE, $charset);
-                }
-
-                if (isset($htmlspecialcharsCharsets[strtoupper($charset)])) {
-                    // cache the lowercase variant for future iterations
-                    $htmlspecialcharsCharsets[$charset] = true;
-
-                    return htmlspecialchars($string, \ENT_QUOTES | \ENT_SUBSTITUTE, $charset);
-                }
-
-                $string = $this->convertEncoding($string, 'UTF-8', $charset);
-                $string = htmlspecialchars($string, \ENT_QUOTES | \ENT_SUBSTITUTE, 'UTF-8');
-
-                return iconv('UTF-8', $charset, $string);
-
-            case 'js':
-                // escape all non-alphanumeric characters
-                // into their \x or \uHHHH representations
-                if ('UTF-8' !== $charset) {
-                    $string = $this->convertEncoding($string, 'UTF-8', $charset);
-                }
-
-                if (!preg_match('//u', $string)) {
-                    throw new RuntimeError('The string to escape is not a valid UTF-8 string.');
-                }
-
-                $string = preg_replace_callback('#[^a-zA-Z0-9,\._]#Su', static function ($matches) {
-                    $char = $matches[0];
-
-                    /*
-                    * A few characters have short escape sequences in JSON and JavaScript.
-                    * Escape sequences supported only by JavaScript, not JSON, are omitted.
-                    * \" is also supported but omitted, because the resulting string is not HTML safe.
-                    */
-                    $short = match ($char) {
-                        '\\' => '\\\\',
-                        '/' => '\\/',
-                        "\x08" => '\b',
-                        "\x0C" => '\f',
-                        "\x0A" => '\n',
-                        "\x0D" => '\r',
-                        "\x09" => '\t',
-                        default => false,
-                    };
-
-                    if ($short) {
-                        return $short;
-                    }
-
-                    $codepoint = mb_ord($char, 'UTF-8');
-                    if (0x10000 > $codepoint) {
-                        return \sprintf('\u%04X', $codepoint);
-                    }
-
-                    // Split characters outside the BMP into surrogate pairs
-                    // https://tools.ietf.org/html/rfc2781.html#section-2.1
-                    $u = $codepoint - 0x10000;
-                    $high = 0xD800 | ($u >> 10);
-                    $low = 0xDC00 | ($u & 0x3FF);
-
-                    return \sprintf('\u%04X\u%04X', $high, $low);
-                }, $string);
-
-                if ('UTF-8' !== $charset) {
-                    $string = iconv('UTF-8', $charset, $string);
-                }
-
-                return $string;
-
-            case 'css':
-                if ('UTF-8' !== $charset) {
-                    $string = $this->convertEncoding($string, 'UTF-8', $charset);
-                }
-
-                if (!preg_match('//u', $string)) {
-                    throw new RuntimeError('The string to escape is not a valid UTF-8 string.');
-                }
-
-                $string = preg_replace_callback('#[^a-zA-Z0-9]#Su', static function ($matches) {
-                    $char = $matches[0];
-
-                    return \sprintf('\\%X ', 1 === \strlen($char) ? \ord($char) : mb_ord($char, 'UTF-8'));
-                }, $string);
-
-                if ('UTF-8' !== $charset) {
-                    $string = iconv('UTF-8', $charset, $string);
-                }
-
-                return $string;
-
-            case 'html_attr':
-            case 'html_attr_relaxed':
-                if ('UTF-8' !== $charset) {
-                    $string = $this->convertEncoding($string, 'UTF-8', $charset);
-                }
-
-                if (!preg_match('//u', $string)) {
-                    throw new RuntimeError('The string to escape is not a valid UTF-8 string.');
-                }
-
-                $regex = match ($strategy) {
-                    'html_attr' => '#[^a-zA-Z0-9,\.\-_]#Su',
-                    'html_attr_relaxed' => '#[^a-zA-Z0-9,\.\-_:@\[\]]#Su',
-                };
-
-                $string = preg_replace_callback($regex, static function ($matches) {
-                    /**
-                     * This function is adapted from code coming from Zend Framework.
-                     *
-                     * @copyright Copyright (c) 2005-2012 Zend Technologies USA Inc. (https://www.zend.com)
-                     * @license   https://framework.zend.com/license/new-bsd New BSD License
-                     */
-                    $chr = $matches[0];
-                    $ord = \ord($chr[0]);
-
-                    /*
-                    * The following replaces characters undefined in HTML with the
-                    * hex entity for the Unicode replacement character.
-                    */
-                    if (($ord <= 0x1F && "\t" != $chr && "\n" != $chr && "\r" != $chr) || ($ord >= 0x7F && $ord <= 0x9F)) {
-                        return '&#xFFFD;';
-                    }
-
-                    /*
-                    * Check if the current character to escape has a name entity we should
-                    * replace it with while grabbing the hex value of the character.
-                    */
-                    if (1 === \strlen($chr)) {
-                        /*
-                        * While HTML supports far more named entities, the lowest common denominator
-                        * has become HTML5's XML Serialisation which is restricted to the those named
-                        * entities that XML supports. Using HTML entities would result in this error:
-                        *     XML Parsing Error: undefined entity
-                        */
-                        return match ($ord) {
-                            34 => '&quot;', /* quotation mark */
-                            38 => '&amp;',  /* ampersand */
-                            60 => '&lt;',   /* less-than sign */
-                            62 => '&gt;',   /* greater-than sign */
-                            default => \sprintf('&#x%02X;', $ord),
-                        };
-                    }
-
-                    /*
-                    * Per OWASP recommendations, we'll use hex entities for any other
-                    * characters where a named entity does not exist.
-                    */
-                    return \sprintf('&#x%04X;', mb_ord($chr, 'UTF-8'));
-                }, $string);
-
-                if ('UTF-8' !== $charset) {
-                    $string = iconv('UTF-8', $charset, $string);
-                }
-
-                return $string;
-
-            case 'url':
-                return rawurlencode($string);
-
-            default:
-                if (\array_key_exists($strategy, $this->escapers)) {
-                    return $this->escapers[$strategy]($string, $charset);
-                }
-
-                $validStrategies = implode('", "', array_merge(['html', 'js', 'url', 'css', 'html_attr', 'html_attr_relaxed'], array_keys($this->escapers)));
-
-                throw new RuntimeError(\sprintf('Invalid escaping strategy "%s" (valid ones: "%s").', $strategy, $validStrategies));
-        }
-    }
-
-    private function convertEncoding(string $string, string $to, string $from)
-    {
-        if (!\function_exists('iconv')) {
-            throw new RuntimeError('Unable to convert encoding: required function iconv() does not exist. You should install ext-iconv or symfony/polyfill-iconv.');
-        }
-
-        return iconv($from, $to, $string);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/RuntimeLoader/ContainerRuntimeLoader.php b/generated/php/vendor/twig/twig/src/RuntimeLoader/ContainerRuntimeLoader.php
deleted file mode 100644
index 0510668..0000000
--- a/generated/php/vendor/twig/twig/src/RuntimeLoader/ContainerRuntimeLoader.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\RuntimeLoader;
-
-use Psr\Container\ContainerInterface;
-
-/**
- * Lazily loads Twig runtime implementations from a PSR-11 container.
- *
- * Note that the runtime services MUST use their class names as identifiers.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- * @author Robin Chalas <robin.chalas@gmail.com>
- */
-class ContainerRuntimeLoader implements RuntimeLoaderInterface
-{
-    public function __construct(
-        private ContainerInterface $container,
-    ) {
-    }
-
-    public function load(string $class)
-    {
-        return $this->container->has($class) ? $this->container->get($class) : null;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/RuntimeLoader/FactoryRuntimeLoader.php b/generated/php/vendor/twig/twig/src/RuntimeLoader/FactoryRuntimeLoader.php
deleted file mode 100644
index 5d4e70b..0000000
--- a/generated/php/vendor/twig/twig/src/RuntimeLoader/FactoryRuntimeLoader.php
+++ /dev/null
@@ -1,39 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\RuntimeLoader;
-
-/**
- * Lazy loads the runtime implementations for a Twig element.
- *
- * @author Robin Chalas <robin.chalas@gmail.com>
- */
-class FactoryRuntimeLoader implements RuntimeLoaderInterface
-{
-    /**
-     * @param array $map An array where keys are class names and values factory callables
-     */
-    public function __construct(
-        private array $map = [],
-    ) {
-    }
-
-    public function load(string $class)
-    {
-        if (!isset($this->map[$class])) {
-            return null;
-        }
-
-        $runtimeFactory = $this->map[$class];
-
-        return $runtimeFactory();
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/RuntimeLoader/RuntimeLoaderInterface.php b/generated/php/vendor/twig/twig/src/RuntimeLoader/RuntimeLoaderInterface.php
deleted file mode 100644
index 9e5b204..0000000
--- a/generated/php/vendor/twig/twig/src/RuntimeLoader/RuntimeLoaderInterface.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\RuntimeLoader;
-
-/**
- * Creates runtime implementations for Twig elements (filters/functions/tests).
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface RuntimeLoaderInterface
-{
-    /**
-     * Creates the runtime implementation of a Twig element (filter/function/test).
-     *
-     * @return object|null The runtime instance or null if the loader does not know how to create the runtime for this class
-     */
-    public function load(string $class);
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SecurityError.php b/generated/php/vendor/twig/twig/src/Sandbox/SecurityError.php
deleted file mode 100644
index 30a404f..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SecurityError.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-use Twig\Error\Error;
-
-/**
- * Exception thrown when a security error occurs at runtime.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class SecurityError extends Error
-{
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedFilterError.php b/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedFilterError.php
deleted file mode 100644
index 9293a3f..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedFilterError.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-/**
- * Exception thrown when a not allowed filter is used in a template.
- *
- * @author Martin Hasoň <martin.hason@gmail.com>
- */
-final class SecurityNotAllowedFilterError extends SecurityError
-{
-    private string $filterName;
-
-    public function __construct(string $message, string $functionName)
-    {
-        parent::__construct($message);
-        $this->filterName = $functionName;
-    }
-
-    public function getFilterName(): string
-    {
-        return $this->filterName;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedFunctionError.php b/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedFunctionError.php
deleted file mode 100644
index 71c9f02..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedFunctionError.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-/**
- * Exception thrown when a not allowed function is used in a template.
- *
- * @author Martin Hasoň <martin.hason@gmail.com>
- */
-final class SecurityNotAllowedFunctionError extends SecurityError
-{
-    private string $functionName;
-
-    public function __construct(string $message, string $functionName)
-    {
-        parent::__construct($message);
-        $this->functionName = $functionName;
-    }
-
-    public function getFunctionName(): string
-    {
-        return $this->functionName;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedMethodError.php b/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedMethodError.php
deleted file mode 100644
index 98e8e43..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedMethodError.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-/**
- * Exception thrown when a not allowed class method is used in a template.
- *
- * @author Kit Burton-Senior <mail@kitbs.com>
- */
-final class SecurityNotAllowedMethodError extends SecurityError
-{
-    private string $className;
-    private string $methodName;
-
-    public function __construct(string $message, string $className, string $methodName)
-    {
-        parent::__construct($message);
-        $this->className = $className;
-        $this->methodName = $methodName;
-    }
-
-    public function getClassName(): string
-    {
-        return $this->className;
-    }
-
-    public function getMethodName(): string
-    {
-        return $this->methodName;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedPropertyError.php b/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedPropertyError.php
deleted file mode 100644
index e74ffed..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedPropertyError.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-/**
- * Exception thrown when a not allowed class property is used in a template.
- *
- * @author Kit Burton-Senior <mail@kitbs.com>
- */
-final class SecurityNotAllowedPropertyError extends SecurityError
-{
-    private string $className;
-    private string $propertyName;
-
-    public function __construct(string $message, string $className, string $propertyName)
-    {
-        parent::__construct($message);
-        $this->className = $className;
-        $this->propertyName = $propertyName;
-    }
-
-    public function getClassName(): string
-    {
-        return $this->className;
-    }
-
-    public function getPropertyName(): string
-    {
-        return $this->propertyName;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedTagError.php b/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedTagError.php
deleted file mode 100644
index f9cd625..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedTagError.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-/**
- * Exception thrown when a not allowed tag is used in a template.
- *
- * @author Martin Hasoň <martin.hason@gmail.com>
- */
-final class SecurityNotAllowedTagError extends SecurityError
-{
-    private string $tagName;
-
-    public function __construct(string $message, string $tagName)
-    {
-        parent::__construct($message);
-        $this->tagName = $tagName;
-    }
-
-    public function getTagName(): string
-    {
-        return $this->tagName;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedTestError.php b/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedTestError.php
deleted file mode 100644
index af702ba..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SecurityNotAllowedTestError.php
+++ /dev/null
@@ -1,33 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-/**
- * Exception thrown when a not allowed test is used in a template.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class SecurityNotAllowedTestError extends SecurityError
-{
-    private string $testName;
-
-    public function __construct(string $message, string $testName)
-    {
-        parent::__construct($message);
-        $this->testName = $testName;
-    }
-
-    public function getTestName(): string
-    {
-        return $this->testName;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SecurityPolicy.php b/generated/php/vendor/twig/twig/src/Sandbox/SecurityPolicy.php
deleted file mode 100644
index 7d1172b..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SecurityPolicy.php
+++ /dev/null
@@ -1,175 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-use Twig\Markup;
-use Twig\Template;
-
-/**
- * Represents a security policy which need to be enforced when sandbox mode is enabled.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class SecurityPolicy implements SecurityPolicyInterface
-{
-    private $allowedTags;
-    private $allowedFilters;
-    private $allowedMethods;
-    private $allowedProperties;
-    private $allowedFunctions;
-    private array $allowedTests;
-    private bool $strict = false;
-
-    public function __construct(array $allowedTags = [], array $allowedFilters = [], array $allowedMethods = [], array $allowedProperties = [], array $allowedFunctions = [], array $allowedTests = [])
-    {
-        $this->allowedTags = $allowedTags;
-        $this->allowedFilters = $allowedFilters;
-        $this->setAllowedMethods($allowedMethods);
-        $this->allowedProperties = $allowedProperties;
-        $this->allowedFunctions = $allowedFunctions;
-        $this->allowedTests = $allowedTests;
-    }
-
-    public function setAllowedTags(array $tags): void
-    {
-        $this->allowedTags = $tags;
-    }
-
-    public function setAllowedFilters(array $filters): void
-    {
-        $this->allowedFilters = $filters;
-    }
-
-    public function setAllowedMethods(array $methods): void
-    {
-        $this->allowedMethods = [];
-        foreach ($methods as $class => $m) {
-            $this->allowedMethods[$class] = array_map('strtolower', \is_array($m) ? $m : [$m]);
-        }
-    }
-
-    public function setAllowedProperties(array $properties): void
-    {
-        $this->allowedProperties = $properties;
-    }
-
-    public function setAllowedFunctions(array $functions): void
-    {
-        $this->allowedFunctions = $functions;
-    }
-
-    public function setAllowedTests(array $tests): void
-    {
-        $this->allowedTests = $tests;
-    }
-
-    /**
-     * Toggles strict mode.
-     *
-     * In strict mode, the tags, functions, and tests that are historically always
-     * allowed in a sandbox (the ``extends`` and ``use`` tags, the ``parent``,
-     * ``block``, and ``attribute`` functions, and any test) are no longer implicitly
-     * allowed and must be added to the relevant allow-list to be usable. Use this
-     * flag in 3.x to opt-in to the forthcoming 4.0 behavior and silence the related
-     * deprecations.
-     */
-    public function setStrict(bool $strict): void
-    {
-        $this->strict = $strict;
-    }
-
-    public function checkSecurity($tags, $filters, $functions, array $tests = []): void
-    {
-        if (\func_num_args() < 4) {
-            trigger_deprecation('twig/twig', '3.28', 'Not passing the "$tests" argument to "%s::checkSecurity()" is deprecated; it will be required in 4.0.', static::class);
-        }
-
-        foreach ($tags as $tag) {
-            if (!\in_array($tag, $this->allowedTags, true)) {
-                if (!$this->strict && 'extends' === $tag) {
-                    trigger_deprecation('twig/twig', '3.12', 'The "extends" tag is always allowed in sandboxes, but won\'t be in 4.0, please enable it explicitly in your sandbox policy if needed (or enable strict mode on the security policy to opt-in to the 4.0 behavior now).');
-                } elseif (!$this->strict && 'use' === $tag) {
-                    trigger_deprecation('twig/twig', '3.12', 'The "use" tag is always allowed in sandboxes, but won\'t be in 4.0, please enable it explicitly in your sandbox policy if needed (or enable strict mode on the security policy to opt-in to the 4.0 behavior now).');
-                } else {
-                    throw new SecurityNotAllowedTagError(\sprintf('Tag "%s" is not allowed.', $tag), $tag);
-                }
-            }
-        }
-
-        foreach ($filters as $filter) {
-            if (!\in_array($filter, $this->allowedFilters, true)) {
-                throw new SecurityNotAllowedFilterError(\sprintf('Filter "%s" is not allowed.', $filter), $filter);
-            }
-        }
-
-        foreach ($functions as $function) {
-            if (!\in_array($function, $this->allowedFunctions, true)) {
-                if (!$this->strict && 'parent' === $function) {
-                    trigger_deprecation('twig/twig', '3.27', 'The "parent" function is always allowed in sandboxes, but won\'t be in 4.0, please enable it explicitly in your sandbox policy if needed (or enable strict mode on the security policy to opt-in to the 4.0 behavior now).');
-                } elseif (!$this->strict && 'block' === $function) {
-                    trigger_deprecation('twig/twig', '3.27', 'The "block" function is always allowed in sandboxes, but won\'t be in 4.0, please enable it explicitly in your sandbox policy if needed (or enable strict mode on the security policy to opt-in to the 4.0 behavior now).');
-                } elseif (!$this->strict && 'attribute' === $function) {
-                    trigger_deprecation('twig/twig', '3.27', 'The "attribute" function is always allowed in sandboxes, but won\'t be in 4.0, please enable it explicitly in your sandbox policy if needed (or enable strict mode on the security policy to opt-in to the 4.0 behavior now).');
-                } else {
-                    throw new SecurityNotAllowedFunctionError(\sprintf('Function "%s" is not allowed.', $function), $function);
-                }
-            }
-        }
-
-        foreach ($tests as $test) {
-            if (!\in_array($test, $this->allowedTests, true)) {
-                if (!$this->strict) {
-                    trigger_deprecation('twig/twig', '3.28', 'The "%s" test is always allowed in sandboxes, but won\'t be in 4.0, please enable it explicitly in your sandbox policy if needed (or enable strict mode on the security policy to opt-in to the 4.0 behavior now).', $test);
-                } else {
-                    throw new SecurityNotAllowedTestError(\sprintf('Test "%s" is not allowed.', $test), $test);
-                }
-            }
-        }
-    }
-
-    public function checkMethodAllowed($obj, $method): void
-    {
-        if ($obj instanceof Template || $obj instanceof Markup) {
-            return;
-        }
-
-        $allowed = false;
-        $method = strtolower($method);
-        foreach ($this->allowedMethods as $class => $methods) {
-            if ($obj instanceof $class && \in_array($method, $methods, true)) {
-                $allowed = true;
-                break;
-            }
-        }
-
-        if (!$allowed) {
-            $class = $obj::class;
-            throw new SecurityNotAllowedMethodError(\sprintf('Calling "%s" method on a "%s" object is not allowed.', $method, $class), $class, $method);
-        }
-    }
-
-    public function checkPropertyAllowed($obj, $property): void
-    {
-        $allowed = false;
-        foreach ($this->allowedProperties as $class => $properties) {
-            if ($obj instanceof $class && \in_array($property, \is_array($properties) ? $properties : [$properties], true)) {
-                $allowed = true;
-                break;
-            }
-        }
-
-        if (!$allowed) {
-            $class = $obj::class;
-            throw new SecurityNotAllowedPropertyError(\sprintf('Calling "%s" property on a "%s" object is not allowed.', $property, $class), $class, $property);
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SecurityPolicyInterface.php b/generated/php/vendor/twig/twig/src/Sandbox/SecurityPolicyInterface.php
deleted file mode 100644
index cb36ba5..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SecurityPolicyInterface.php
+++ /dev/null
@@ -1,46 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-/**
- * Interface that all security policy classes must implements.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-interface SecurityPolicyInterface
-{
-    /**
-     * @param string[] $tags
-     * @param string[] $filters
-     * @param string[] $functions
-     * @param string[] $tests
-     *
-     * @throws SecurityError
-     */
-    public function checkSecurity($tags, $filters, $functions/* , array $tests */): void;
-
-    /**
-     * @param object $obj
-     * @param string $method
-     *
-     * @throws SecurityNotAllowedMethodError
-     */
-    public function checkMethodAllowed($obj, $method): void;
-
-    /**
-     * @param object $obj
-     * @param string $property
-     *
-     * @throws SecurityNotAllowedPropertyError
-     */
-    public function checkPropertyAllowed($obj, $property): void;
-}
diff --git a/generated/php/vendor/twig/twig/src/Sandbox/SourcePolicyInterface.php b/generated/php/vendor/twig/twig/src/Sandbox/SourcePolicyInterface.php
deleted file mode 100644
index 1b29608..0000000
--- a/generated/php/vendor/twig/twig/src/Sandbox/SourcePolicyInterface.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Sandbox;
-
-use Twig\Source;
-
-/**
- * Interface for a class that can optionally enable the sandbox mode based on a template's Twig\Source.
- *
- * @author Yaakov Saxon
- *
- * @deprecated since Twig 3.27.0 with no replacement
- */
-interface SourcePolicyInterface
-{
-    public function enableSandbox(Source $source): bool;
-}
diff --git a/generated/php/vendor/twig/twig/src/Source.php b/generated/php/vendor/twig/twig/src/Source.php
deleted file mode 100644
index 0c97f25..0000000
--- a/generated/php/vendor/twig/twig/src/Source.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-/**
- * Holds information about a non-compiled Twig template.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class Source
-{
-    /**
-     * @param string $code The template source code
-     * @param string $name The template logical name
-     * @param string $path The filesystem path of the template if any
-     */
-    public function __construct(
-        private string $code,
-        private string $name,
-        private string $path = '',
-    ) {
-    }
-
-    public function getCode(): string
-    {
-        return $this->code;
-    }
-
-    public function getName(): string
-    {
-        return $this->name;
-    }
-
-    public function getPath(): string
-    {
-        return $this->path;
-    }
-
-    /**
-     * Returns the 1-based column for a 0-based byte offset in the source code.
-     *
-     * A negative offset means the position is unknown and yields null.
-     *
-     * @return positive-int|null
-     */
-    public function getColumn(int $offset): ?int
-    {
-        if ($offset < 0) {
-            return null;
-        }
-
-        $before = str_replace(["\r\n", "\r"], "\n", substr($this->code, 0, $offset));
-        $lineStart = strrpos($before, "\n");
-
-        return false === $lineStart ? \strlen($before) + 1 : \strlen($before) - $lineStart;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Template.php b/generated/php/vendor/twig/twig/src/Template.php
deleted file mode 100644
index 3d74460..0000000
--- a/generated/php/vendor/twig/twig/src/Template.php
+++ /dev/null
@@ -1,560 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Error\Error;
-use Twig\Error\RuntimeError;
-
-/**
- * Default base class for compiled templates.
- *
- * This class is an implementation detail of how template compilation currently
- * works, which might change. It should never be used directly. Use $twig->load()
- * instead, which returns an instance of \Twig\TemplateWrapper.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-abstract class Template
-{
-    public const ANY_CALL = 'any';
-    public const ARRAY_CALL = 'array';
-    public const METHOD_CALL = 'method';
-
-    protected $parent;
-    protected $parents = [];
-    protected $blocks = [];
-    protected $traits = [];
-    protected $traitAliases = [];
-    protected $extensions = [];
-    protected $sandbox;
-
-    private $useYield;
-
-    public function __construct(
-        protected Environment $env,
-    ) {
-        $this->useYield = $env->useYield();
-        $this->extensions = $env->getExtensions();
-    }
-
-    /**
-     * Returns the template name.
-     */
-    abstract public function getTemplateName(): string;
-
-    /**
-     * Returns debug information about the template.
-     *
-     * @return array<int, int> Debug information
-     */
-    abstract public function getDebugInfo(): array;
-
-    /**
-     * Returns information about the original template source code.
-     */
-    abstract public function getSourceContext(): Source;
-
-    /**
-     * Returns the parent template.
-     *
-     * This method is for internal use only and should never be called
-     * directly.
-     *
-     * @return self|TemplateWrapper|false The parent template or false if there is no parent
-     */
-    public function getParent(array $context): self|TemplateWrapper|false
-    {
-        if (null !== $this->parent) {
-            return $this->parent;
-        }
-
-        // The compiled doGetParent() may evaluate user expressions (filters,
-        // functions, method calls) when the parent name is dynamic. Make sure
-        // the sandbox security check runs first so those expressions cannot
-        // bypass the allow-list when getParent() is reached before the first
-        // ensureSecurityChecked() call on this template (e.g. via
-        // getTemplateForMacro() or yieldBlock() into a pre-warmed instance).
-        $this->ensureSecurityChecked();
-
-        if (!$parent = $this->doGetParent($context)) {
-            return false;
-        }
-
-        if ($parent instanceof self || $parent instanceof TemplateWrapper) {
-            return $this->parents[$parent->getSourceContext()->getName()] = $parent;
-        }
-
-        if (!isset($this->parents[$parent])) {
-            $this->parents[$parent] = $this->load($parent, -1);
-        }
-
-        return $this->parents[$parent];
-    }
-
-    protected function doGetParent(array $context): bool|string|self|TemplateWrapper
-    {
-        return false;
-    }
-
-    public function isTraitable(): bool
-    {
-        return true;
-    }
-
-    /**
-     * Displays a parent block.
-     *
-     * This method is for internal use only and should never be called
-     * directly.
-     *
-     * @param string $name    The block name to display from the parent
-     * @param array  $context The context
-     * @param array  $blocks  The current set of blocks
-     */
-    public function displayParentBlock($name, array $context, array $blocks = []): void
-    {
-        foreach ($this->yieldParentBlock($name, $context, $blocks) as $data) {
-            echo $data;
-        }
-    }
-
-    /**
-     * Displays a block.
-     *
-     * This method is for internal use only and should never be called
-     * directly.
-     *
-     * @param string $name      The block name to display
-     * @param array  $context   The context
-     * @param array  $blocks    The current set of blocks
-     * @param bool   $useBlocks Whether to use the current set of blocks
-     */
-    public function displayBlock($name, array $context, array $blocks = [], $useBlocks = true, ?self $templateContext = null): void
-    {
-        foreach ($this->yieldBlock($name, $context, $blocks, $useBlocks, $templateContext) as $data) {
-            echo $data;
-        }
-    }
-
-    /**
-     * Renders a parent block.
-     *
-     * This method is for internal use only and should never be called
-     * directly.
-     *
-     * @param string $name    The block name to render from the parent
-     * @param array  $context The context
-     * @param array  $blocks  The current set of blocks
-     *
-     * @return string The rendered block
-     */
-    public function renderParentBlock($name, array $context, array $blocks = []): string
-    {
-        if (!$this->useYield) {
-            if ($this->env->isDebug()) {
-                ob_start();
-            } else {
-                ob_start(static function () { return ''; });
-            }
-            $this->displayParentBlock($name, $context, $blocks);
-
-            return ob_get_clean();
-        }
-
-        $content = '';
-        foreach ($this->yieldParentBlock($name, $context, $blocks) as $data) {
-            $content .= $data;
-        }
-
-        return $content;
-    }
-
-    /**
-     * Renders a block.
-     *
-     * This method is for internal use only and should never be called
-     * directly.
-     *
-     * @param string $name      The block name to render
-     * @param array  $context   The context
-     * @param array  $blocks    The current set of blocks
-     * @param bool   $useBlocks Whether to use the current set of blocks
-     *
-     * @return string The rendered block
-     */
-    public function renderBlock($name, array $context, array $blocks = [], $useBlocks = true): string
-    {
-        if (!$this->useYield) {
-            $level = ob_get_level();
-            if ($this->env->isDebug()) {
-                ob_start();
-            } else {
-                ob_start(static function () { return ''; });
-            }
-            try {
-                $this->displayBlock($name, $context, $blocks, $useBlocks);
-            } catch (\Throwable $e) {
-                while (ob_get_level() > $level) {
-                    ob_end_clean();
-                }
-
-                throw $e;
-            }
-
-            return ob_get_clean();
-        }
-
-        $content = '';
-        foreach ($this->yieldBlock($name, $context, $blocks, $useBlocks) as $data) {
-            $content .= $data;
-        }
-
-        return $content;
-    }
-
-    /**
-     * Returns whether a block exists or not in the current context of the template.
-     *
-     * This method checks blocks defined in the current template
-     * or defined in "used" traits or defined in parent templates.
-     *
-     * @param string $name    The block name
-     * @param array  $context The context
-     * @param array  $blocks  The current set of blocks
-     *
-     * @return bool true if the block exists, false otherwise
-     */
-    public function hasBlock($name, array $context, array $blocks = []): bool
-    {
-        if (isset($blocks[$name])) {
-            return $blocks[$name][0] instanceof self;
-        }
-
-        if (isset($this->blocks[$name])) {
-            return true;
-        }
-
-        if ($parent = $this->getParent($context)) {
-            return $parent->hasBlock($name, $context);
-        }
-
-        return false;
-    }
-
-    /**
-     * Returns all block names in the current context of the template.
-     *
-     * This method checks blocks defined in the current template
-     * or defined in "used" traits or defined in parent templates.
-     *
-     * @param array $context The context
-     * @param array $blocks  The current set of blocks
-     *
-     * @return array<string> An array of block names
-     */
-    public function getBlockNames(array $context, array $blocks = []): array
-    {
-        $names = array_merge(array_keys($blocks), array_keys($this->blocks));
-
-        if ($parent = $this->getParent($context)) {
-            $names = array_merge($names, $parent->getBlockNames($context));
-        }
-
-        return array_unique($names);
-    }
-
-    /**
-     * @param string|TemplateWrapper|array<string|TemplateWrapper> $template
-     */
-    protected function load(string|TemplateWrapper|array $template, int $line, ?int $index = null): self
-    {
-        try {
-            if (\is_array($template)) {
-                return $this->env->resolveTemplate($template)->unwrap();
-            }
-
-            if ($template instanceof TemplateWrapper) {
-                return $template->unwrap();
-            }
-
-            if ($template === $this->getTemplateName()) {
-                $class = static::class;
-                if (false !== $pos = strrpos($class, '___', -1)) {
-                    $class = substr($class, 0, $pos);
-                }
-            } else {
-                $class = $this->env->getTemplateClass($template);
-            }
-
-            return $this->env->loadTemplate($class, $template, $index);
-        } catch (Error $e) {
-            if (!$e->getSourceContext()) {
-                $e->setSourceContext($this->getSourceContext());
-            }
-
-            if ($e->getTemplateLine() > 0) {
-                throw $e;
-            }
-
-            if (-1 === $line) {
-                $e->guess();
-            } else {
-                $e->setTemplateLine($line);
-            }
-
-            throw $e;
-        }
-    }
-
-    /**
-     * @param string|TemplateWrapper|array<string|TemplateWrapper> $template
-     *
-     * @deprecated since Twig 3.21 and will be removed in 4.0. Use Template::load() instead.
-     */
-    protected function loadTemplate($template, $templateName = null, ?int $line = null, ?int $index = null): self|TemplateWrapper
-    {
-        trigger_deprecation('twig/twig', '3.21', 'The "%s" method is deprecated.', __METHOD__);
-
-        if (null === $line) {
-            $line = -1;
-        }
-
-        if ($template instanceof self) {
-            return $template;
-        }
-
-        return $this->load($template, $line, $index);
-    }
-
-    /**
-     * @internal
-     *
-     * @return $this
-     */
-    public function unwrap(): self
-    {
-        return $this;
-    }
-
-    /**
-     * Returns all blocks.
-     *
-     * This method is for internal use only and should never be called
-     * directly.
-     *
-     * @return array An array of blocks
-     */
-    public function getBlocks(): array
-    {
-        return $this->blocks;
-    }
-
-    public function display(array $context, array $blocks = []): void
-    {
-        foreach ($this->yield($context, $blocks) as $data) {
-            echo $data;
-        }
-    }
-
-    public function render(array $context): string
-    {
-        if (!$this->useYield) {
-            $level = ob_get_level();
-            if ($this->env->isDebug()) {
-                ob_start();
-            } else {
-                ob_start(static function () { return ''; });
-            }
-            try {
-                $this->display($context);
-            } catch (\Throwable $e) {
-                while (ob_get_level() > $level) {
-                    ob_end_clean();
-                }
-
-                throw $e;
-            }
-
-            return ob_get_clean();
-        }
-
-        $content = '';
-        foreach ($this->yield($context) as $data) {
-            $content .= $data;
-        }
-
-        return $content;
-    }
-
-    /**
-     * @return iterable<scalar|\Stringable|null>
-     */
-    public function yield(array $context, array $blocks = []): iterable
-    {
-        $context += $this->env->getGlobals();
-        $blocks = array_merge($this->blocks, $blocks);
-
-        try {
-            $this->ensureSecurityChecked();
-            yield from $this->doDisplay($context, $blocks);
-        } catch (Error $e) {
-            if (!$e->getSourceContext()) {
-                $e->setSourceContext($this->getSourceContext());
-            }
-
-            // this is mostly useful for \Twig\Error\LoaderError exceptions
-            // see \Twig\Error\LoaderError
-            if (-1 === $e->getTemplateLine()) {
-                $e->guess();
-            }
-
-            throw $e;
-        } catch (\Throwable $e) {
-            $e = new RuntimeError(\sprintf('An exception has been thrown during the rendering of a template ("%s").', $e->getMessage()), -1, $this->getSourceContext(), $e);
-            $e->guess();
-
-            throw $e;
-        }
-    }
-
-    /**
-     * @return iterable<scalar|\Stringable|null>
-     */
-    public function yieldBlock($name, array $context, array $blocks = [], $useBlocks = true, ?self $templateContext = null): iterable
-    {
-        if ($useBlocks && isset($blocks[$name])) {
-            $template = $blocks[$name][0];
-            $block = $blocks[$name][1];
-        } elseif (isset($this->blocks[$name])) {
-            $template = $this->blocks[$name][0];
-            $block = $this->blocks[$name][1];
-            // expose this template's own blocks so nested block() calls resolve against them when the block is rendered directly (e.g. block(name, template))
-            $blocks = array_merge($this->blocks, $blocks);
-        } else {
-            $template = null;
-            $block = null;
-        }
-
-        // avoid RCEs when sandbox is enabled
-        if (null !== $template && !$template instanceof self) {
-            throw new \LogicException('A block must be a method on a \Twig\Template instance.');
-        }
-
-        if (null !== $template) {
-            try {
-                $template->ensureSecurityChecked();
-                yield from $template->$block($context, $blocks);
-            } catch (Error $e) {
-                if (!$e->getSourceContext()) {
-                    $e->setSourceContext($template->getSourceContext());
-                }
-
-                // this is mostly useful for \Twig\Error\LoaderError exceptions
-                // see \Twig\Error\LoaderError
-                if (-1 === $e->getTemplateLine()) {
-                    $e->guess();
-                }
-
-                throw $e;
-            } catch (\Throwable $e) {
-                $e = new RuntimeError(\sprintf('An exception has been thrown during the rendering of a template ("%s").', $e->getMessage()), -1, $template->getSourceContext(), $e);
-                $e->guess();
-
-                throw $e;
-            }
-        } elseif ($parent = $this->getParent($context)) {
-            yield from $parent->unwrap()->yieldBlock($name, $context, array_merge($this->blocks, $blocks), false, $templateContext ?? $this);
-        } elseif (isset($blocks[$name])) {
-            throw new RuntimeError(\sprintf('Block "%s" should not call parent() in "%s" as the block does not exist in the parent template "%s".', $name, $blocks[$name][0]->getTemplateName(), $this->getTemplateName()), -1, $blocks[$name][0]->getSourceContext());
-        } else {
-            throw new RuntimeError(\sprintf('Block "%s" on template "%s" does not exist.', $name, $this->getTemplateName()), -1, ($templateContext ?? $this)->getSourceContext());
-        }
-    }
-
-    /**
-     * Yields a parent block.
-     *
-     * This method is for internal use only and should never be called
-     * directly.
-     *
-     * @param string $name    The block name to display from the parent
-     * @param array  $context The context
-     * @param array  $blocks  The current set of blocks
-     *
-     * @return iterable<scalar|\Stringable|null>
-     */
-    public function yieldParentBlock($name, array $context, array $blocks = []): iterable
-    {
-        if (isset($this->traits[$name])) {
-            yield from $this->traits[$name][0]->yieldBlock($this->traitAliases[$name] ?? $name, $context, $blocks, false);
-        } elseif ($parent = $this->getParent($context)) {
-            yield from $parent->unwrap()->yieldBlock($name, $context, $blocks, false);
-        } else {
-            throw new RuntimeError(\sprintf('The template has no parent and no traits defining the "%s" block.', $name), -1, $this->getSourceContext());
-        }
-    }
-
-    protected function hasMacro(string $name, array $context): bool
-    {
-        if (method_exists($this, $name)) {
-            return true;
-        }
-
-        if (!$parent = $this->getParent($context)) {
-            return false;
-        }
-
-        return $parent->hasMacro($name, $context);
-    }
-
-    protected function getTemplateForMacro(string $name, array $context, int $line, Source $source): self
-    {
-        if (method_exists($this, $name)) {
-            $this->ensureSecurityChecked();
-
-            return $this;
-        }
-
-        $parent = $this;
-        while ($parent = $parent->getParent($context)) {
-            if (method_exists($parent, $name)) {
-                $parent->ensureSecurityChecked();
-
-                return $parent;
-            }
-        }
-
-        throw new RuntimeError(\sprintf('Macro "%s" is not defined in template "%s".', substr($name, \strlen('macro_')), $this->getTemplateName()), $line, $source);
-    }
-
-    /**
-     * Runs the sandbox security check against the current sandbox state.
-     *
-     * @internal
-     */
-    public function ensureSecurityChecked(): void
-    {
-    }
-
-    /**
-     * Auto-generated method to display the template with the given context.
-     *
-     * @param array $context An array of parameters to pass to the template
-     * @param array $blocks  An array of blocks to pass to the template
-     *
-     * @return iterable<scalar|\Stringable|null>
-     */
-    abstract protected function doDisplay(array $context, array $blocks = []): iterable;
-}
diff --git a/generated/php/vendor/twig/twig/src/TemplateWrapper.php b/generated/php/vendor/twig/twig/src/TemplateWrapper.php
deleted file mode 100644
index 265ce3e..0000000
--- a/generated/php/vendor/twig/twig/src/TemplateWrapper.php
+++ /dev/null
@@ -1,112 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-/**
- * Exposes a template to userland.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class TemplateWrapper
-{
-    /**
-     * This method is for internal use only and should never be called
-     * directly (use Twig\Environment::load() instead).
-     *
-     * @internal
-     */
-    public function __construct(
-        private Environment $env,
-        private Template $template,
-    ) {
-    }
-
-    /**
-     * @return iterable<scalar|\Stringable|null>
-     */
-    public function stream(array $context = []): iterable
-    {
-        yield from $this->template->yield($context);
-    }
-
-    /**
-     * @return iterable<scalar|\Stringable|null>
-     */
-    public function streamBlock(string $name, array $context = []): iterable
-    {
-        yield from $this->template->yieldBlock($name, $context);
-    }
-
-    public function render(array $context = []): string
-    {
-        return $this->template->render($context);
-    }
-
-    /**
-     * @return void
-     */
-    public function display(array $context = [])
-    {
-        // using func_get_args() allows to not expose the blocks argument
-        // as it should only be used by internal code
-        $this->template->display($context, \func_get_args()[1] ?? []);
-    }
-
-    public function hasBlock(string $name, array $context = []): bool
-    {
-        return $this->template->hasBlock($name, $context);
-    }
-
-    /**
-     * @return string[] An array of defined template block names
-     */
-    public function getBlockNames(array $context = []): array
-    {
-        return $this->template->getBlockNames($context);
-    }
-
-    public function renderBlock(string $name, array $context = []): string
-    {
-        return $this->template->renderBlock($name, $context + $this->env->getGlobals());
-    }
-
-    /**
-     * @return void
-     */
-    public function displayBlock(string $name, array $context = [])
-    {
-        $context += $this->env->getGlobals();
-        foreach ($this->template->yieldBlock($name, $context) as $data) {
-            echo $data;
-        }
-    }
-
-    public function getSourceContext(): Source
-    {
-        return $this->template->getSourceContext();
-    }
-
-    public function getTemplateName(): string
-    {
-        return $this->template->getTemplateName();
-    }
-
-    /**
-     * @internal
-     *
-     * @return Template
-     */
-    public function unwrap()
-    {
-        return $this->template;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Test/IntegrationTestCase.php b/generated/php/vendor/twig/twig/src/Test/IntegrationTestCase.php
deleted file mode 100644
index 749174b..0000000
--- a/generated/php/vendor/twig/twig/src/Test/IntegrationTestCase.php
+++ /dev/null
@@ -1,380 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Test;
-
-use PHPUnit\Framework\Attributes\DataProvider;
-use PHPUnit\Framework\Attributes\Group;
-use PHPUnit\Framework\TestCase;
-use Twig\Environment;
-use Twig\Error\Error;
-use Twig\Extension\ExtensionInterface;
-use Twig\Loader\ArrayLoader;
-use Twig\RuntimeLoader\RuntimeLoaderInterface;
-use Twig\TokenParser\TokenParserInterface;
-use Twig\TwigFilter;
-use Twig\TwigFunction;
-use Twig\TwigTest;
-
-/**
- * Integration test helper.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- * @author Karma Dordrak <drak@zikula.org>
- */
-abstract class IntegrationTestCase extends TestCase
-{
-    /**
-     * @deprecated since Twig 3.13, use getFixturesDirectory() instead.
-     *
-     * @return string
-     */
-    protected function getFixturesDir()
-    {
-        throw new \BadMethodCallException('Not implemented.');
-    }
-
-    protected static function getFixturesDirectory(): string
-    {
-        throw new \BadMethodCallException('Not implemented.');
-    }
-
-    /**
-     * @return RuntimeLoaderInterface[]
-     */
-    protected function getRuntimeLoaders()
-    {
-        return [];
-    }
-
-    /**
-     * @return ExtensionInterface[]
-     */
-    protected function getExtensions()
-    {
-        return [];
-    }
-
-    /**
-     * @return TwigFilter[]
-     */
-    protected function getTwigFilters()
-    {
-        return [];
-    }
-
-    /**
-     * @return TwigFunction[]
-     */
-    protected function getTwigFunctions()
-    {
-        return [];
-    }
-
-    /**
-     * @return TwigTest[]
-     */
-    protected function getTwigTests()
-    {
-        return [];
-    }
-
-    /**
-     * @return array<callable(string): (TwigFilter|false)>
-     */
-    protected function getUndefinedFilterCallbacks(): array
-    {
-        return [];
-    }
-
-    /**
-     * @return array<callable(string): (TwigFunction|false)>
-     */
-    protected function getUndefinedFunctionCallbacks(): array
-    {
-        return [];
-    }
-
-    /**
-     * @return array<callable(string): (TwigTest|false)>
-     */
-    protected function getUndefinedTestCallbacks(): array
-    {
-        return [];
-    }
-
-    /**
-     * @return array<callable(string): (TokenParserInterface|false)>
-     */
-    protected function getUndefinedTokenParserCallbacks(): array
-    {
-        return [];
-    }
-
-    /**
-     * The annotation feeds PHPUnit < 10; the attribute feeds PHPUnit >= 10 and must point to a static provider, as PHPUnit >= 11 rejects non-static ones.
-     *
-     * @dataProvider getTests
-     *
-     * @return void
-     */
-    #[DataProvider('provideTests')]
-    public function testIntegration($file, $message, $condition, $templates, $exception, $outputs, $deprecation = '')
-    {
-        $this->doIntegrationTest($file, $message, $condition, $templates, $exception, $outputs, $deprecation);
-    }
-
-    /**
-     * @dataProvider getLegacyTests
-     *
-     * @group legacy
-     *
-     * @return void
-     */
-    #[DataProvider('provideLegacyTests'), Group('legacy')]
-    public function testLegacyIntegration($file, $message, $condition, $templates, $exception, $outputs, $deprecation = '')
-    {
-        $this->doIntegrationTest($file, $message, $condition, $templates, $exception, $outputs, $deprecation);
-    }
-
-    final public static function provideTests(): iterable
-    {
-        return self::assembleTests(false, static::getFixturesDirectory());
-    }
-
-    final public static function provideLegacyTests(): iterable
-    {
-        return self::assembleTests(true, static::getFixturesDirectory());
-    }
-
-    /**
-     * @return iterable
-     *
-     * @final since Twig 3.13
-     */
-    public function getTests($name, $legacyTests = false)
-    {
-        try {
-            $fixturesDir = static::getFixturesDirectory();
-        } catch (\BadMethodCallException) {
-            trigger_deprecation('twig/twig', '3.13', 'Not overriding "%s::getFixturesDirectory()" in "%s" is deprecated. This method will be abstract in 4.0.', self::class, static::class);
-            $fixturesDir = $this->getFixturesDir();
-        }
-
-        return self::assembleTests($legacyTests, $fixturesDir);
-    }
-
-    private static function assembleTests(bool $legacyTests, string $fixturesDir): array
-    {
-        $fixturesDir = realpath($fixturesDir);
-        $tests = [];
-
-        foreach (new \RecursiveIteratorIterator(new \RecursiveDirectoryIterator($fixturesDir), \RecursiveIteratorIterator::LEAVES_ONLY) as $file) {
-            if (!preg_match('/\.test$/', $file)) {
-                continue;
-            }
-
-            if ($legacyTests xor str_contains($file->getRealpath(), '.legacy.test')) {
-                continue;
-            }
-
-            $test = file_get_contents($file->getRealpath());
-
-            if (preg_match('/--TEST--\s*(.*?)\s*(?:--CONDITION--\s*(.*))?\s*(?:--DEPRECATION--\s*(.*?))?\s*((?:--TEMPLATE(?:\(.*?\))?--(?:.*?))+)\s*(?:--DATA--\s*(.*))?\s*--EXCEPTION--\s*(.*)/sx', $test, $match)) {
-                $message = $match[1];
-                $condition = $match[2];
-                $deprecation = $match[3];
-                $templates = self::parseTemplates($match[4]);
-                $exception = $match[6];
-                $outputs = [[null, $match[5], null, '']];
-            } elseif (preg_match('/--TEST--\s*(.*?)\s*(?:--CONDITION--\s*(.*))?\s*(?:--DEPRECATION--\s*(.*?))?\s*((?:--TEMPLATE(?:\(.*?\))?--(?:.*?))+)--DATA--.*?--EXPECT--.*/s', $test, $match)) {
-                $message = $match[1];
-                $condition = $match[2];
-                $deprecation = $match[3];
-                $templates = self::parseTemplates($match[4]);
-                $exception = false;
-                preg_match_all('/--DATA--(.*?)(?:--CONFIG--(.*?))?--EXPECT--(.*?)(?=\-\-DATA\-\-|$)/s', $test, $outputs, \PREG_SET_ORDER);
-            } else {
-                throw new \InvalidArgumentException(\sprintf('Test "%s" is not valid.', str_replace($fixturesDir.'/', '', $file)));
-            }
-
-            $tests[str_replace($fixturesDir.'/', '', $file)] = [str_replace($fixturesDir.'/', '', $file), $message, $condition, $templates, $exception, $outputs, $deprecation];
-        }
-
-        if ($legacyTests && !$tests) {
-            // add a dummy test to avoid a PHPUnit message
-            return [['not', '-', '', [], '', []]];
-        }
-
-        return $tests;
-    }
-
-    /**
-     * @final since Twig 3.13
-     *
-     * @return iterable
-     */
-    public function getLegacyTests()
-    {
-        return $this->getTests('testLegacyIntegration', true);
-    }
-
-    /**
-     * @return void
-     */
-    protected function doIntegrationTest($file, $message, $condition, $templateSources, $exception, $outputs, $deprecation = '')
-    {
-        if (!$outputs) {
-            // dummy test added by assembleTests() when there is no (legacy) test to run
-            $this->expectNotToPerformAssertions();
-
-            return;
-        }
-
-        if ($condition) {
-            $ret = '';
-            eval('$ret = '.$condition.';');
-            if (!$ret) {
-                $this->markTestSkipped($condition);
-            }
-        }
-
-        foreach ($outputs as $i => $match) {
-            $config = array_merge([
-                'cache' => false,
-                'strict_variables' => true,
-            ], $match[2] ? eval($match[2].';') : []);
-            // make sure that template are always compiled even if they are the same (useful when testing with more than one data/expect sections)
-            foreach ($templateSources as $name => $template) {
-                $templateSources[$name] = $template.str_repeat(' ', $i);
-            }
-            $loader = new ArrayLoader($templateSources);
-            $twig = new Environment($loader, $config);
-            $twig->addGlobal('global', 'global');
-            foreach ($this->getRuntimeLoaders() as $runtimeLoader) {
-                $twig->addRuntimeLoader($runtimeLoader);
-            }
-
-            foreach ($this->getExtensions() as $extension) {
-                $twig->addExtension($extension);
-            }
-
-            foreach ($this->getTwigFilters() as $filter) {
-                $twig->addFilter($filter);
-            }
-
-            foreach ($this->getTwigTests() as $test) {
-                $twig->addTest($test);
-            }
-
-            foreach ($this->getTwigFunctions() as $function) {
-                $twig->addFunction($function);
-            }
-
-            foreach ($this->getUndefinedFilterCallbacks() as $callback) {
-                $twig->registerUndefinedFilterCallback($callback);
-            }
-
-            foreach ($this->getUndefinedFunctionCallbacks() as $callback) {
-                $twig->registerUndefinedFunctionCallback($callback);
-            }
-
-            foreach ($this->getUndefinedTestCallbacks() as $callback) {
-                $twig->registerUndefinedTestCallback($callback);
-            }
-
-            foreach ($this->getUndefinedTokenParserCallbacks() as $callback) {
-                $twig->registerUndefinedTokenParserCallback($callback);
-            }
-
-            $deprecations = [];
-            $templates = [];
-            try {
-                $prevHandler = set_error_handler(static function ($type, $msg, $file, $line, $context = []) use (&$deprecations, &$prevHandler) {
-                    if (\E_USER_DEPRECATED === $type) {
-                        $deprecations[] = $msg;
-
-                        return true;
-                    }
-
-                    return $prevHandler ? $prevHandler($type, $msg, $file, $line, $context) : false;
-                });
-
-                foreach (array_keys($templateSources) as $templateName) {
-                    $templates[$templateName] = $twig->load($templateName);
-                }
-            } catch (\Exception $e) {
-                if (false !== $exception) {
-                    $message = $e->getMessage();
-                    $this->assertSame(trim($exception), trim(\sprintf('%s: %s', $e::class, $message)));
-                    $last = substr($message, \strlen($message) - 1);
-                    $this->assertTrue('.' === $last || '?' === $last, 'Exception message must end with a dot or a question mark.');
-
-                    return;
-                }
-
-                throw new Error(\sprintf('%s: %s', $e::class, $e->getMessage()), -1, null, $e);
-            } finally {
-                restore_error_handler();
-            }
-
-            $template = $templates['index.twig'];
-
-            try {
-                $output = trim($template->render(eval($match[1].';')), "\n ");
-            } catch (\Exception $e) {
-                if (false !== $exception) {
-                    $this->assertStringMatchesFormat(trim($exception), trim(\sprintf('%s: %s', $e::class, $e->getMessage())));
-
-                    return;
-                }
-
-                $e = new Error(\sprintf('%s: %s', $e::class, $e->getMessage()), -1, null, $e);
-
-                $output = trim(\sprintf('%s: %s', $e::class, $e->getMessage()));
-            }
-
-            if (false !== $exception) {
-                [$class] = explode(':', $exception);
-                $constraintClass = class_exists('PHPUnit\Framework\Constraint\Exception') ? 'PHPUnit\Framework\Constraint\Exception' : 'PHPUnit_Framework_Constraint_Exception';
-                $this->assertThat(null, new $constraintClass($class));
-            }
-
-            $expected = trim($match[3], "\n ");
-
-            if ($expected !== $output) {
-                printf("Compiled templates that failed on case %d:\n", $i + 1);
-
-                foreach (array_keys($templateSources) as $name) {
-                    echo "Template: $name\n";
-                    echo $twig->compile($twig->parse($twig->tokenize($twig->getLoader()->getSourceContext($name))));
-                }
-            }
-            $this->assertEquals($expected, $output, $message.' (in '.$file.')');
-
-            $this->assertSame($deprecation, implode("\n", $deprecations));
-        }
-    }
-
-    /**
-     * @return array<string, string>
-     */
-    protected static function parseTemplates($test)
-    {
-        $templates = [];
-        preg_match_all('/--TEMPLATE(?:\((.*?)\))?--(.*?)(?=\-\-TEMPLATE|$)/s', $test, $matches, \PREG_SET_ORDER);
-        foreach ($matches as $match) {
-            $templates[$match[1] ?: 'index.twig'] = $match[2];
-        }
-
-        return $templates;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Test/NodeTestCase.php b/generated/php/vendor/twig/twig/src/Test/NodeTestCase.php
deleted file mode 100644
index 3ce58b3..0000000
--- a/generated/php/vendor/twig/twig/src/Test/NodeTestCase.php
+++ /dev/null
@@ -1,144 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Test;
-
-use PHPUnit\Framework\Attributes\BeforeClass;
-use PHPUnit\Framework\Attributes\DataProvider;
-use PHPUnit\Framework\TestCase;
-use Twig\Compiler;
-use Twig\Environment;
-use Twig\Loader\ArrayLoader;
-use Twig\Node\Node;
-
-abstract class NodeTestCase extends TestCase
-{
-    /**
-     * @var Environment
-     */
-    private $currentEnv;
-
-    /**
-     * @return iterable<array{0: Node, 1: string, 2?: Environment|null, 3?: bool}>
-     */
-    public function getTests()
-    {
-        return [];
-    }
-
-    /**
-     * @return iterable<array{0: Node, 1: string, 2?: Environment|null, 3?: bool}>
-     */
-    public static function provideTests(): iterable
-    {
-        trigger_deprecation('twig/twig', '3.13', 'Not implementing "%s()" in "%s" is deprecated. This method will be abstract in 4.0.', __METHOD__, static::class);
-
-        return [];
-    }
-
-    /**
-     * The non-static "getTests" is intentionally not mirrored as an attribute: PHPUnit >= 11 rejects non-static providers, so PHPUnit >= 10 relies on the static "provideTests" instead.
-     *
-     * @dataProvider getTests
-     * @dataProvider provideTests
-     *
-     * @return void
-     */
-    #[DataProvider('provideTests')]
-    public function testCompile($node, $source, $environment = null, $isPattern = false)
-    {
-        $this->assertNodeCompilation($source, $node, $environment, $isPattern);
-    }
-
-    /**
-     * @return void
-     */
-    public function assertNodeCompilation($source, Node $node, ?Environment $environment = null, $isPattern = false)
-    {
-        $compiler = $this->getCompiler($environment);
-        $compiler->compile($node);
-
-        if ($isPattern) {
-            $this->assertStringMatchesFormat($source, trim($compiler->getSource()));
-        } else {
-            $this->assertEquals($source, trim($compiler->getSource()));
-        }
-    }
-
-    /**
-     * @return Compiler
-     */
-    protected function getCompiler(?Environment $environment = null)
-    {
-        return new Compiler($environment ?? $this->getEnvironment());
-    }
-
-    /**
-     * @return Environment
-     *
-     * @final since Twig 3.13
-     */
-    protected function getEnvironment()
-    {
-        return $this->currentEnv ??= static::createEnvironment();
-    }
-
-    protected static function createEnvironment(): Environment
-    {
-        return new Environment(new ArrayLoader());
-    }
-
-    /**
-     * @return string
-     *
-     * @deprecated since Twig 3.13, use createVariableGetter() instead.
-     */
-    protected function getVariableGetter($name, $line = false)
-    {
-        trigger_deprecation('twig/twig', '3.13', 'Method "%s()" is deprecated, use "createVariableGetter()" instead.', __METHOD__);
-
-        return self::createVariableGetter($name, $line);
-    }
-
-    final protected static function createVariableGetter(string $name, bool $line = false): string
-    {
-        $line = $line > 0 ? "// line $line\n" : '';
-
-        return \sprintf('%s($context["%s"] ?? null)', $line, $name);
-    }
-
-    /**
-     * @return string
-     *
-     * @deprecated since Twig 3.13, use createAttributeGetter() instead.
-     */
-    protected function getAttributeGetter()
-    {
-        trigger_deprecation('twig/twig', '3.13', 'Method "%s()" is deprecated, use "createAttributeGetter()" instead.', __METHOD__);
-
-        return self::createAttributeGetter();
-    }
-
-    final protected static function createAttributeGetter(): string
-    {
-        return 'CoreExtension::getAttribute($this->env, $this->source, ';
-    }
-
-    /** @beforeClass */
-    #[BeforeClass]
-    final public static function checkDataProvider(): void
-    {
-        $r = new \ReflectionMethod(static::class, 'getTests');
-        if (self::class !== $r->getDeclaringClass()->getName()) {
-            trigger_deprecation('twig/twig', '3.13', 'Implementing "%s::getTests()" in "%s" is deprecated, implement "provideTests()" instead.', self::class, static::class);
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Token.php b/generated/php/vendor/twig/twig/src/Token.php
deleted file mode 100644
index 0c0e46a..0000000
--- a/generated/php/vendor/twig/twig/src/Token.php
+++ /dev/null
@@ -1,256 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class Token
-{
-    public const EOF_TYPE = -1;
-    public const TEXT_TYPE = 0;
-    public const BLOCK_START_TYPE = 1;
-    public const VAR_START_TYPE = 2;
-    public const BLOCK_END_TYPE = 3;
-    public const VAR_END_TYPE = 4;
-    public const NAME_TYPE = 5;
-    public const NUMBER_TYPE = 6;
-    public const STRING_TYPE = 7;
-    public const OPERATOR_TYPE = 8;
-    public const PUNCTUATION_TYPE = 9;
-    public const INTERPOLATION_START_TYPE = 10;
-    public const INTERPOLATION_END_TYPE = 11;
-    /**
-     * @deprecated since Twig 3.21, "arrow" is now an operator
-     */
-    public const ARROW_TYPE = 12;
-    /**
-     * @deprecated since Twig 3.21, "spread" is now an operator
-     */
-    public const SPREAD_TYPE = 13;
-
-    /**
-     * @param non-negative-int|null $offset
-     */
-    public function __construct(
-        private int $type,
-        private $value,
-        private int $lineno,
-        private ?int $offset = null,
-    ) {
-        if (self::ARROW_TYPE === $type) {
-            trigger_deprecation('twig/twig', '3.21', 'The "%s" token type is deprecated, "arrow" is now an operator.', self::ARROW_TYPE);
-        }
-        if (self::SPREAD_TYPE === $type) {
-            trigger_deprecation('twig/twig', '3.21', 'The "%s" token type is deprecated, "spread" is now an operator.', self::SPREAD_TYPE);
-        }
-    }
-
-    public function __toString(): string
-    {
-        return \sprintf('%s(%s)', self::typeToString($this->type, true), $this->value);
-    }
-
-    /**
-     * Tests the current token for a type and/or a value.
-     *
-     * Parameters may be:
-     *  * just type
-     *  * type and value (or array of possible values)
-     *  * just value (or array of possible values) (NAME_TYPE is used as type)
-     *
-     * @param array|string|int  $type   The type to test
-     * @param array|string|null $values The token value
-     */
-    public function test($type, $values = null): bool
-    {
-        if (null === $values && !\is_int($type)) {
-            $values = $type;
-            $type = self::NAME_TYPE;
-        }
-
-        if (self::ARROW_TYPE === $type) {
-            trigger_deprecation('twig/twig', '3.21', 'The "%s" token type is deprecated, "arrow" is now an operator.', self::typeToEnglish(self::ARROW_TYPE));
-
-            return self::OPERATOR_TYPE === $this->type && '=>' === $this->value;
-        }
-        if (self::SPREAD_TYPE === $type) {
-            trigger_deprecation('twig/twig', '3.21', 'The "%s" token type is deprecated, "spread" is now an operator.', self::typeToEnglish(self::SPREAD_TYPE));
-
-            return self::OPERATOR_TYPE === $this->type && '...' === $this->value;
-        }
-
-        $typeMatches = $this->type === $type;
-        if ($typeMatches && self::PUNCTUATION_TYPE === $type && \in_array($this->value, ['(', '[', '|', '.', '?', '?:'], true) && $values) {
-            foreach ((array) $values as $value) {
-                if (\in_array($value, ['(', '[', '|', '.', '?', '?:'], true)) {
-                    trigger_deprecation('twig/twig', '3.21', 'The "%s" token is now an "%s" token instead of a "%s" one.', $this->value, self::typeToEnglish(self::OPERATOR_TYPE), $this->toEnglish());
-
-                    break;
-                }
-            }
-        }
-        if (!$typeMatches) {
-            if (self::OPERATOR_TYPE === $type && self::PUNCTUATION_TYPE === $this->type) {
-                if ($values) {
-                    foreach ((array) $values as $value) {
-                        if (\in_array($value, ['(', '[', '|', '.', '?', '?:'], true)) {
-                            $typeMatches = true;
-
-                            break;
-                        }
-                    }
-                } else {
-                    $typeMatches = true;
-                }
-            }
-        }
-
-        return $typeMatches && (
-            null === $values
-            || (\is_array($values) && \in_array($this->value, $values, true))
-            || $this->value == $values
-        );
-    }
-
-    public function getLine(): int
-    {
-        return $this->lineno;
-    }
-
-    /**
-     * Returns the 0-based byte offset of the token in the source code.
-     *
-     * Returns null for tokens that are not tied to a source position (e.g.
-     * tokens synthesized by a token parser).
-     *
-     * @return non-negative-int|null
-     */
-    public function getOffset(): ?int
-    {
-        return $this->offset;
-    }
-
-    /**
-     * @deprecated since Twig 3.19
-     */
-    public function getType(): int
-    {
-        trigger_deprecation('twig/twig', '3.19', \sprintf('The "%s()" method is deprecated.', __METHOD__));
-
-        return $this->type;
-    }
-
-    public function getValue()
-    {
-        return $this->value;
-    }
-
-    public function toEnglish(): string
-    {
-        return self::typeToEnglish($this->type);
-    }
-
-    public static function typeToString(int $type, bool $short = false): string
-    {
-        switch ($type) {
-            case self::EOF_TYPE:
-                $name = 'EOF_TYPE';
-                break;
-            case self::TEXT_TYPE:
-                $name = 'TEXT_TYPE';
-                break;
-            case self::BLOCK_START_TYPE:
-                $name = 'BLOCK_START_TYPE';
-                break;
-            case self::VAR_START_TYPE:
-                $name = 'VAR_START_TYPE';
-                break;
-            case self::BLOCK_END_TYPE:
-                $name = 'BLOCK_END_TYPE';
-                break;
-            case self::VAR_END_TYPE:
-                $name = 'VAR_END_TYPE';
-                break;
-            case self::NAME_TYPE:
-                $name = 'NAME_TYPE';
-                break;
-            case self::NUMBER_TYPE:
-                $name = 'NUMBER_TYPE';
-                break;
-            case self::STRING_TYPE:
-                $name = 'STRING_TYPE';
-                break;
-            case self::OPERATOR_TYPE:
-                $name = 'OPERATOR_TYPE';
-                break;
-            case self::PUNCTUATION_TYPE:
-                $name = 'PUNCTUATION_TYPE';
-                break;
-            case self::INTERPOLATION_START_TYPE:
-                $name = 'INTERPOLATION_START_TYPE';
-                break;
-            case self::INTERPOLATION_END_TYPE:
-                $name = 'INTERPOLATION_END_TYPE';
-                break;
-            case self::ARROW_TYPE:
-                $name = 'ARROW_TYPE';
-                break;
-            case self::SPREAD_TYPE:
-                $name = 'SPREAD_TYPE';
-                break;
-            default:
-                throw new \LogicException(\sprintf('Token of type "%s" does not exist.', $type));
-        }
-
-        return $short ? $name : 'Twig\Token::'.$name;
-    }
-
-    public static function typeToEnglish(int $type): string
-    {
-        switch ($type) {
-            case self::EOF_TYPE:
-                return 'end of template';
-            case self::TEXT_TYPE:
-                return 'text';
-            case self::BLOCK_START_TYPE:
-                return 'begin of statement block';
-            case self::VAR_START_TYPE:
-                return 'begin of print statement';
-            case self::BLOCK_END_TYPE:
-                return 'end of statement block';
-            case self::VAR_END_TYPE:
-                return 'end of print statement';
-            case self::NAME_TYPE:
-                return 'name';
-            case self::NUMBER_TYPE:
-                return 'number';
-            case self::STRING_TYPE:
-                return 'string';
-            case self::OPERATOR_TYPE:
-                return 'operator';
-            case self::PUNCTUATION_TYPE:
-                return 'punctuation';
-            case self::INTERPOLATION_START_TYPE:
-                return 'begin of string interpolation';
-            case self::INTERPOLATION_END_TYPE:
-                return 'end of string interpolation';
-            case self::ARROW_TYPE:
-                return 'arrow function';
-            case self::SPREAD_TYPE:
-                return 'spread operator';
-            default:
-                throw new \LogicException(\sprintf('Token of type "%s" does not exist.', $type));
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/AbstractTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/AbstractTokenParser.php
deleted file mode 100644
index 8c07f60..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/AbstractTokenParser.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Lexer;
-use Twig\Node\Expression\Variable\AssignContextVariable;
-use Twig\Node\Nodes;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * Base class for all token parsers.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-abstract class AbstractTokenParser implements TokenParserInterface
-{
-    /**
-     * @var Parser
-     */
-    protected $parser;
-
-    public function setParser(Parser $parser): void
-    {
-        $this->parser = $parser;
-    }
-
-    public function isAlwaysAllowedInSandbox(): bool
-    {
-        return false;
-    }
-
-    /**
-     * Parses an assignment expression like "a, b".
-     */
-    protected function parseAssignmentExpression(): Nodes
-    {
-        $stream = $this->parser->getStream();
-        $targets = [];
-        while (true) {
-            $token = $stream->getCurrent();
-            if ($stream->test(Token::OPERATOR_TYPE) && preg_match(Lexer::REGEX_NAME, $token->getValue())) {
-                // in this context, string operators are variable names
-                $stream->next();
-            } else {
-                $stream->expect(Token::NAME_TYPE, null, 'Only variables can be assigned to');
-            }
-            $targets[] = new AssignContextVariable($token->getValue(), $token->getLine());
-
-            if (!$stream->nextIf(Token::PUNCTUATION_TYPE, ',')) {
-                break;
-            }
-        }
-
-        return new Nodes($targets);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/ApplyTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/ApplyTokenParser.php
deleted file mode 100644
index 5b560e7..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/ApplyTokenParser.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\ExpressionParser\Infix\FilterExpressionParser;
-use Twig\Node\Expression\Variable\LocalVariable;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\Node\PrintNode;
-use Twig\Node\SetNode;
-use Twig\Token;
-
-/**
- * Applies filters on a section of a template.
- *
- *   {% apply upper %}
- *      This text becomes uppercase
- *   {% endapply %}
- *
- * @internal
- */
-final class ApplyTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $lineno = $token->getLine();
-        $ref = new LocalVariable(null, $lineno);
-        $filter = $ref;
-        $op = $this->parser->getEnvironment()->getExpressionParsers()->getByClass(FilterExpressionParser::class);
-        while (true) {
-            $filter = $op->parse($this->parser, $filter, $this->parser->getCurrentToken());
-            if (!$this->parser->getStream()->test(Token::OPERATOR_TYPE, '|')) {
-                break;
-            }
-            $this->parser->getStream()->next();
-        }
-
-        $this->parser->getStream()->expect(Token::BLOCK_END_TYPE);
-        $body = $this->parser->subparse([$this, 'decideApplyEnd'], true);
-        $this->parser->getStream()->expect(Token::BLOCK_END_TYPE);
-
-        return new Nodes([
-            new SetNode(true, $ref, $body, $lineno),
-            new PrintNode($filter, $lineno),
-        ], $lineno);
-    }
-
-    public function decideApplyEnd(Token $token): bool
-    {
-        return $token->test('endapply');
-    }
-
-    public function getTag(): string
-    {
-        return 'apply';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/AutoEscapeTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/AutoEscapeTokenParser.php
deleted file mode 100644
index 86feb27..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/AutoEscapeTokenParser.php
+++ /dev/null
@@ -1,58 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\AutoEscapeNode;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Marks a section of a template to be escaped or not.
- *
- * @internal
- */
-final class AutoEscapeTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $lineno = $token->getLine();
-        $stream = $this->parser->getStream();
-
-        if ($stream->test(Token::BLOCK_END_TYPE)) {
-            $value = 'html';
-        } else {
-            $expr = $this->parser->parseExpression();
-            if (!$expr instanceof ConstantExpression) {
-                throw new SyntaxError('An escaping strategy must be a string or false.', $stream->getCurrent()->getLine(), $stream->getSourceContext());
-            }
-            $value = $expr->getAttribute('value');
-        }
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-        $body = $this->parser->subparse([$this, 'decideBlockEnd'], true);
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        return new AutoEscapeNode($value, $body, $lineno);
-    }
-
-    public function decideBlockEnd(Token $token): bool
-    {
-        return $token->test('endautoescape');
-    }
-
-    public function getTag(): string
-    {
-        return 'autoescape';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/BlockTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/BlockTokenParser.php
deleted file mode 100644
index 452b323..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/BlockTokenParser.php
+++ /dev/null
@@ -1,77 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\BlockNode;
-use Twig\Node\BlockReferenceNode;
-use Twig\Node\EmptyNode;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\Node\PrintNode;
-use Twig\Token;
-
-/**
- * Marks a section of a template as being reusable.
- *
- *  {% block head %}
- *    <link rel="stylesheet" href="style.css" />
- *    <title>{% block title %}{% endblock %} - My Webpage</title>
- *  {% endblock %}
- *
- * @internal
- */
-final class BlockTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $lineno = $token->getLine();
-        $stream = $this->parser->getStream();
-        $name = $stream->expect(Token::NAME_TYPE)->getValue();
-        $this->parser->setBlock($name, $block = new BlockNode($name, new EmptyNode(), $lineno));
-        $this->parser->pushLocalScope();
-        $this->parser->pushBlockStack($name);
-
-        if ($stream->nextIf(Token::BLOCK_END_TYPE)) {
-            $body = $this->parser->subparse([$this, 'decideBlockEnd'], true);
-            if ($token = $stream->nextIf(Token::NAME_TYPE)) {
-                $value = $token->getValue();
-
-                if ($value != $name) {
-                    throw new SyntaxError(\sprintf('Expected endblock for block "%s" (but "%s" given).', $name, $value), $stream->getCurrent()->getLine(), $stream->getSourceContext());
-                }
-            }
-        } else {
-            $body = new Nodes([
-                new PrintNode($this->parser->parseExpression(), $lineno),
-            ]);
-        }
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        $block->setNode('body', $body);
-        $this->parser->popBlockStack();
-        $this->parser->popLocalScope();
-
-        return new BlockReferenceNode($name, $lineno);
-    }
-
-    public function decideBlockEnd(Token $token): bool
-    {
-        return $token->test('endblock');
-    }
-
-    public function getTag(): string
-    {
-        return 'block';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/DeprecatedTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/DeprecatedTokenParser.php
deleted file mode 100644
index df1ba38..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/DeprecatedTokenParser.php
+++ /dev/null
@@ -1,65 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\DeprecatedNode;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Deprecates a section of a template.
- *
- *    {% deprecated 'The "base.twig" template is deprecated, use "layout.twig" instead.' %}
- *    {% extends 'layout.html.twig' %}
- *
- *    {% deprecated 'The "base.twig" template is deprecated, use "layout.twig" instead.' package="foo/bar" version="1.1" %}
- *
- * @author Yonel Ceruto <yonelceruto@gmail.com>
- *
- * @internal
- */
-final class DeprecatedTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $stream = $this->parser->getStream();
-        $expr = $this->parser->parseExpression();
-        $node = new DeprecatedNode($expr, $token->getLine());
-
-        while ($stream->test(Token::NAME_TYPE)) {
-            $k = $stream->getCurrent()->getValue();
-            $stream->next();
-            $stream->expect(Token::OPERATOR_TYPE, '=');
-
-            switch ($k) {
-                case 'package':
-                    $node->setNode('package', $this->parser->parseExpression());
-                    break;
-                case 'version':
-                    $node->setNode('version', $this->parser->parseExpression());
-                    break;
-                default:
-                    throw new SyntaxError(\sprintf('Unknown "%s" option.', $k), $stream->getCurrent()->getLine(), $stream->getSourceContext());
-            }
-        }
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        return $node;
-    }
-
-    public function getTag(): string
-    {
-        return 'deprecated';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/DoTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/DoTokenParser.php
deleted file mode 100644
index ca9d03d..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/DoTokenParser.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Node\DoNode;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Evaluates an expression, discarding the returned value.
- *
- * @internal
- */
-final class DoTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $expr = $this->parser->parseExpression();
-
-        $this->parser->getStream()->expect(Token::BLOCK_END_TYPE);
-
-        return new DoNode($expr, $token->getLine());
-    }
-
-    public function getTag(): string
-    {
-        return 'do';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/EmbedTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/EmbedTokenParser.php
deleted file mode 100644
index fa27910..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/EmbedTokenParser.php
+++ /dev/null
@@ -1,73 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Node\EmbedNode;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\Variable\ContextVariable;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Embeds a template.
- *
- * @internal
- */
-final class EmbedTokenParser extends IncludeTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $stream = $this->parser->getStream();
-
-        $parent = $this->parser->parseExpression();
-
-        [$variables, $only, $ignoreMissing] = $this->parseArguments();
-
-        $parentToken = $fakeParentToken = new Token(Token::STRING_TYPE, '__parent__', $token->getLine());
-        if ($parent instanceof ConstantExpression) {
-            $parentToken = new Token(Token::STRING_TYPE, $parent->getAttribute('value'), $token->getLine());
-        } elseif ($parent instanceof ContextVariable) {
-            $parentToken = new Token(Token::NAME_TYPE, $parent->getAttribute('name'), $token->getLine());
-        }
-
-        // inject a fake parent to make the parent() function work
-        $stream->injectTokens([
-            new Token(Token::BLOCK_START_TYPE, '', $token->getLine()),
-            new Token(Token::NAME_TYPE, 'extends', $token->getLine()),
-            $parentToken,
-            new Token(Token::BLOCK_END_TYPE, '', $token->getLine()),
-        ]);
-
-        $module = $this->parser->parse($stream, [$this, 'decideBlockEnd'], true);
-
-        // override the parent with the correct one
-        if ($fakeParentToken === $parentToken) {
-            $module->setNode('parent', $parent);
-        }
-
-        $this->parser->embedTemplate($module);
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        return new EmbedNode($module->getTemplateName(), $module->getAttribute('index'), $variables, $only, $ignoreMissing, $token->getLine());
-    }
-
-    public function decideBlockEnd(Token $token): bool
-    {
-        return $token->test('endembed');
-    }
-
-    public function getTag(): string
-    {
-        return 'embed';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/ExtendsTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/ExtendsTokenParser.php
deleted file mode 100644
index cba2927..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/ExtendsTokenParser.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Node\ConfigNode;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Extends a template by another one.
- *
- *  {% extends "base.html" %}
- *
- * @internal
- */
-final class ExtendsTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $stream = $this->parser->getStream();
-        $this->parser->setParent($this->parser->parseExpression(), false);
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        return new ConfigNode($token->getLine());
-    }
-
-    public function getTag(): string
-    {
-        return 'extends';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/FlushTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/FlushTokenParser.php
deleted file mode 100644
index 0d23887..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/FlushTokenParser.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Node\FlushNode;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Flushes the output to the client.
- *
- * @see flush()
- *
- * @internal
- */
-final class FlushTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $this->parser->getStream()->expect(Token::BLOCK_END_TYPE);
-
-        return new FlushNode($token->getLine());
-    }
-
-    public function getTag(): string
-    {
-        return 'flush';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/ForTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/ForTokenParser.php
deleted file mode 100644
index 21166fc..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/ForTokenParser.php
+++ /dev/null
@@ -1,80 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Node\Expression\Variable\AssignContextVariable;
-use Twig\Node\ForElseNode;
-use Twig\Node\ForNode;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Loops over each item of a sequence.
- *
- *   <ul>
- *    {% for user in users %}
- *      <li>{{ user.username|e }}</li>
- *    {% endfor %}
- *   </ul>
- *
- * @internal
- */
-final class ForTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $lineno = $token->getLine();
-        $stream = $this->parser->getStream();
-        $targets = $this->parseAssignmentExpression();
-        $stream->expect(Token::OPERATOR_TYPE, 'in');
-        $seq = $this->parser->parseExpression();
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-        $body = $this->parser->subparse([$this, 'decideForFork']);
-        if ('else' == $stream->next()->getValue()) {
-            $elseLineno = $stream->getCurrent()->getLine();
-            $stream->expect(Token::BLOCK_END_TYPE);
-            $else = new ForElseNode($this->parser->subparse([$this, 'decideForEnd'], true), $elseLineno);
-        } else {
-            $else = null;
-        }
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        if (\count($targets) > 1) {
-            $keyTarget = $targets->getNode('0');
-            $keyTarget = new AssignContextVariable($keyTarget->getAttribute('name'), $keyTarget->getTemplateLine());
-            $valueTarget = $targets->getNode('1');
-        } else {
-            $keyTarget = new AssignContextVariable('_key', $lineno);
-            $valueTarget = $targets->getNode('0');
-        }
-        $valueTarget = new AssignContextVariable($valueTarget->getAttribute('name'), $valueTarget->getTemplateLine());
-
-        return new ForNode($keyTarget, $valueTarget, $seq, null, $body, $else, $lineno);
-    }
-
-    public function decideForFork(Token $token): bool
-    {
-        return $token->test(['else', 'endfor']);
-    }
-
-    public function decideForEnd(Token $token): bool
-    {
-        return $token->test('endfor');
-    }
-
-    public function getTag(): string
-    {
-        return 'for';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/FromTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/FromTokenParser.php
deleted file mode 100644
index 1c80a17..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/FromTokenParser.php
+++ /dev/null
@@ -1,69 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Node\Expression\Variable\AssignContextVariable;
-use Twig\Node\Expression\Variable\AssignTemplateVariable;
-use Twig\Node\Expression\Variable\TemplateVariable;
-use Twig\Node\ImportNode;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Imports macros.
- *
- *   {% from 'forms.html.twig' import forms %}
- *
- * @internal
- */
-final class FromTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $macro = $this->parser->parseExpression();
-        $stream = $this->parser->getStream();
-        $stream->expect(Token::NAME_TYPE, 'import');
-
-        $targets = [];
-        while (true) {
-            $name = $stream->expect(Token::NAME_TYPE)->getValue();
-
-            if ($stream->nextIf('as')) {
-                $alias = new AssignContextVariable($stream->expect(Token::NAME_TYPE)->getValue(), $token->getLine());
-            } else {
-                $alias = new AssignContextVariable($name, $token->getLine());
-            }
-
-            $targets[$name] = $alias;
-
-            if (!$stream->nextIf(Token::PUNCTUATION_TYPE, ',')) {
-                break;
-            }
-        }
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        $internalRef = new AssignTemplateVariable(new TemplateVariable(null, $token->getLine()), $this->parser->isMainScope());
-        $node = new ImportNode($macro, $internalRef, $token->getLine());
-
-        foreach ($targets as $name => $alias) {
-            $this->parser->addImportedSymbol('function', $alias->getAttribute('name'), 'macro_'.$name, $internalRef);
-        }
-
-        return $node;
-    }
-
-    public function getTag(): string
-    {
-        return 'from';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/GuardTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/GuardTokenParser.php
deleted file mode 100644
index eb48865..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/GuardTokenParser.php
+++ /dev/null
@@ -1,79 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\EmptyNode;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\Token;
-
-/**
- * @internal
- */
-final class GuardTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $stream = $this->parser->getStream();
-        $typeToken = $stream->expect(Token::NAME_TYPE);
-        if (!\in_array($typeToken->getValue(), ['function', 'filter', 'test'], true)) {
-            throw new SyntaxError(\sprintf('Supported guard types are function, filter and test, "%s" given.', $typeToken->getValue()), $typeToken->getLine(), $stream->getSourceContext());
-        }
-        $method = 'get'.$typeToken->getValue();
-
-        $nameToken = $stream->expect(Token::NAME_TYPE);
-        $name = $nameToken->getValue();
-        if ('test' === $typeToken->getValue() && $stream->test(Token::NAME_TYPE)) {
-            // try 2-words tests
-            $name .= ' '.$stream->getCurrent()->getValue();
-            $stream->next();
-        }
-
-        try {
-            $exists = null !== $this->parser->getEnvironment()->$method($name);
-        } catch (SyntaxError) {
-            $exists = false;
-        }
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-        if ($exists) {
-            $body = $this->parser->subparse([$this, 'decideGuardFork']);
-        } else {
-            $body = new EmptyNode();
-            $this->parser->subparseIgnoreUnknownTwigCallables([$this, 'decideGuardFork']);
-        }
-        $else = new EmptyNode();
-        if ('else' === $stream->next()->getValue()) {
-            $stream->expect(Token::BLOCK_END_TYPE);
-            $else = $this->parser->subparse([$this, 'decideGuardEnd'], true);
-        }
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        return new Nodes([$exists ? $body : $else]);
-    }
-
-    public function decideGuardFork(Token $token): bool
-    {
-        return $token->test(['else', 'endguard']);
-    }
-
-    public function decideGuardEnd(Token $token): bool
-    {
-        return $token->test(['endguard']);
-    }
-
-    public function getTag(): string
-    {
-        return 'guard';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/IfTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/IfTokenParser.php
deleted file mode 100644
index 4e3588e..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/IfTokenParser.php
+++ /dev/null
@@ -1,90 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\IfNode;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\Token;
-
-/**
- * Tests a condition.
- *
- *   {% if users %}
- *    <ul>
- *      {% for user in users %}
- *        <li>{{ user.username|e }}</li>
- *      {% endfor %}
- *    </ul>
- *   {% endif %}
- *
- * @internal
- */
-final class IfTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $lineno = $token->getLine();
-        $expr = $this->parser->parseExpression();
-        $stream = $this->parser->getStream();
-        $stream->expect(Token::BLOCK_END_TYPE);
-        $body = $this->parser->subparse([$this, 'decideIfFork']);
-        $tests = [$expr, $body];
-        $else = null;
-
-        $end = false;
-        while (!$end) {
-            switch ($stream->next()->getValue()) {
-                case 'else':
-                    $stream->expect(Token::BLOCK_END_TYPE);
-                    $else = $this->parser->subparse([$this, 'decideIfEnd']);
-                    break;
-
-                case 'elseif':
-                    $expr = $this->parser->parseExpression();
-                    $stream->expect(Token::BLOCK_END_TYPE);
-                    $body = $this->parser->subparse([$this, 'decideIfFork']);
-                    $tests[] = $expr;
-                    $tests[] = $body;
-                    break;
-
-                case 'endif':
-                    $end = true;
-                    break;
-
-                default:
-                    throw new SyntaxError(\sprintf('Unexpected end of template. Twig was looking for the following tags "else", "elseif", or "endif" to close the "if" block started at line %d).', $lineno), $stream->getCurrent()->getLine(), $stream->getSourceContext());
-            }
-        }
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        return new IfNode(new Nodes($tests), $else, $lineno);
-    }
-
-    public function decideIfFork(Token $token): bool
-    {
-        return $token->test(['elseif', 'else', 'endif']);
-    }
-
-    public function decideIfEnd(Token $token): bool
-    {
-        return $token->test(['endif']);
-    }
-
-    public function getTag(): string
-    {
-        return 'if';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/ImportTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/ImportTokenParser.php
deleted file mode 100644
index 6dcb766..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/ImportTokenParser.php
+++ /dev/null
@@ -1,45 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Node\Expression\Variable\AssignTemplateVariable;
-use Twig\Node\Expression\Variable\TemplateVariable;
-use Twig\Node\ImportNode;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Imports macros.
- *
- *   {% import 'forms.html.twig' as forms %}
- *
- * @internal
- */
-final class ImportTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $macro = $this->parser->parseExpression();
-        $this->parser->getStream()->expect(Token::NAME_TYPE, 'as');
-        $name = $this->parser->getStream()->expect(Token::NAME_TYPE)->getValue();
-        $var = new AssignTemplateVariable(new TemplateVariable($name, $token->getLine()), $this->parser->isMainScope());
-        $this->parser->getStream()->expect(Token::BLOCK_END_TYPE);
-        $this->parser->addImportedSymbol('template', $name);
-
-        return new ImportNode($macro, $var, $token->getLine());
-    }
-
-    public function getTag(): string
-    {
-        return 'import';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/IncludeTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/IncludeTokenParser.php
deleted file mode 100644
index 55ac151..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/IncludeTokenParser.php
+++ /dev/null
@@ -1,73 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Node\Expression\AbstractExpression;
-use Twig\Node\IncludeNode;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Includes a template.
- *
- *   {% include 'header.html.twig' %}
- *     Body
- *   {% include 'footer.html.twig' %}
- *
- * @internal
- */
-class IncludeTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $expr = $this->parser->parseExpression();
-
-        [$variables, $only, $ignoreMissing] = $this->parseArguments();
-
-        return new IncludeNode($expr, $variables, $only, $ignoreMissing, $token->getLine());
-    }
-
-    /**
-     * @return array{0: ?AbstractExpression, 1: bool, 2: bool}
-     */
-    protected function parseArguments()
-    {
-        $stream = $this->parser->getStream();
-
-        $ignoreMissing = false;
-        if ($stream->nextIf(Token::NAME_TYPE, 'ignore')) {
-            $stream->expect(Token::NAME_TYPE, 'missing');
-
-            $ignoreMissing = true;
-        }
-
-        $variables = null;
-        if ($stream->nextIf(Token::NAME_TYPE, 'with')) {
-            $variables = $this->parser->parseExpression();
-        }
-
-        $only = false;
-        if ($stream->nextIf(Token::NAME_TYPE, 'only')) {
-            $only = true;
-        }
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        return [$variables, $only, $ignoreMissing];
-    }
-
-    public function getTag(): string
-    {
-        return 'include';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/MacroTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/MacroTokenParser.php
deleted file mode 100644
index 7531fe0..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/MacroTokenParser.php
+++ /dev/null
@@ -1,123 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\BodyNode;
-use Twig\Node\ConfigNode;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\Unary\NegUnary;
-use Twig\Node\Expression\Unary\PosUnary;
-use Twig\Node\Expression\Variable\LocalVariable;
-use Twig\Node\MacroNode;
-use Twig\Node\Node;
-use Twig\Token;
-
-/**
- * Defines a macro.
- *
- *   {% macro input(name, value, type, size) %}
- *      <input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />
- *   {% endmacro %}
- *
- * @internal
- */
-final class MacroTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $lineno = $token->getLine();
-        $stream = $this->parser->getStream();
-        $name = $stream->expect(Token::NAME_TYPE)->getValue();
-        $arguments = $this->parseDefinition();
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-        $this->parser->pushLocalScope();
-        $body = $this->parser->subparse([$this, 'decideBlockEnd'], true);
-        if ($token = $stream->nextIf(Token::NAME_TYPE)) {
-            $value = $token->getValue();
-
-            if ($value != $name) {
-                throw new SyntaxError(\sprintf('Expected endmacro for macro "%s" (but "%s" given).', $name, $value), $stream->getCurrent()->getLine(), $stream->getSourceContext());
-            }
-        }
-        $this->parser->popLocalScope();
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        $this->parser->setMacro($name, new MacroNode($name, new BodyNode([$body]), $arguments, $lineno));
-
-        return new ConfigNode($lineno);
-    }
-
-    public function decideBlockEnd(Token $token): bool
-    {
-        return $token->test('endmacro');
-    }
-
-    public function getTag(): string
-    {
-        return 'macro';
-    }
-
-    private function parseDefinition(): ArrayExpression
-    {
-        $arguments = new ArrayExpression([], $this->parser->getCurrentToken()->getLine());
-        $stream = $this->parser->getStream();
-        $stream->expect(Token::OPERATOR_TYPE, '(', 'A list of arguments must begin with an opening parenthesis');
-        while (!$stream->test(Token::PUNCTUATION_TYPE, ')')) {
-            if (\count($arguments)) {
-                $stream->expect(Token::PUNCTUATION_TYPE, ',', 'Arguments must be separated by a comma');
-
-                // if the comma above was a trailing comma, early exit the argument parse loop
-                if ($stream->test(Token::PUNCTUATION_TYPE, ')')) {
-                    break;
-                }
-            }
-
-            $token = $stream->expect(Token::NAME_TYPE, null, 'An argument must be a name');
-            $name = new LocalVariable($token->getValue(), $this->parser->getCurrentToken()->getLine());
-            if ($token = $stream->nextIf(Token::OPERATOR_TYPE, '=')) {
-                $default = $this->parser->parseExpression();
-            } else {
-                $default = new ConstantExpression(null, $this->parser->getCurrentToken()->getLine());
-                $default->setAttribute('is_implicit', true);
-            }
-
-            if (!$this->checkConstantExpression($default)) {
-                throw new SyntaxError('A default value for an argument must be a constant (a boolean, a string, a number, a sequence, or a mapping).', $token->getLine(), $stream->getSourceContext());
-            }
-            $arguments->addElement($default, $name);
-        }
-        $stream->expect(Token::PUNCTUATION_TYPE, ')', 'A list of arguments must be closed by a parenthesis');
-
-        return $arguments;
-    }
-
-    // checks that the node only contains "constant" elements
-    private function checkConstantExpression(Node $node): bool
-    {
-        if (!($node instanceof ConstantExpression || $node instanceof ArrayExpression
-            || $node instanceof NegUnary || $node instanceof PosUnary
-        )) {
-            return false;
-        }
-
-        foreach ($node as $n) {
-            if (!$this->checkConstantExpression($n)) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/SandboxTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/SandboxTokenParser.php
deleted file mode 100644
index e6f4a63..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/SandboxTokenParser.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\IncludeNode;
-use Twig\Node\Node;
-use Twig\Node\SandboxNode;
-use Twig\Node\TextNode;
-use Twig\Token;
-
-/**
- * Marks a section of a template as untrusted code that must be evaluated in the sandbox mode.
- *
- *    {% sandbox %}
- *        {% include 'user.html.twig' %}
- *    {% endsandbox %}
- *
- * @see https://twig.symfony.com/doc/api.html#sandbox-extension for details
- *
- * @internal
- */
-final class SandboxTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $stream = $this->parser->getStream();
-        trigger_deprecation('twig/twig', '3.15', \sprintf('The "sandbox" tag is deprecated in "%s" at line %d.', $stream->getSourceContext()->getName(), $token->getLine()));
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-        $body = $this->parser->subparse([$this, 'decideBlockEnd'], true);
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        // in a sandbox tag, only include tags are allowed
-        if ($body instanceof IncludeNode) {
-            $body->setAttribute('sandboxed', true);
-        } else {
-            foreach ($body as $node) {
-                if ($node instanceof TextNode && ctype_space($node->getAttribute('data'))) {
-                    continue;
-                }
-
-                if (!$node instanceof IncludeNode) {
-                    throw new SyntaxError('Only "include" tags are allowed within a "sandbox" section.', $node->getTemplateLine(), $stream->getSourceContext());
-                }
-
-                $node->setAttribute('sandboxed', true);
-            }
-        }
-
-        return new SandboxNode($body, $token->getLine());
-    }
-
-    public function decideBlockEnd(Token $token): bool
-    {
-        return $token->test('endsandbox');
-    }
-
-    public function getTag(): string
-    {
-        return 'sandbox';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/SetTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/SetTokenParser.php
deleted file mode 100644
index 1aabbf5..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/SetTokenParser.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\Node\SetNode;
-use Twig\Token;
-
-/**
- * Defines a variable.
- *
- *  {% set foo = 'foo' %}
- *  {% set foo = [1, 2] %}
- *  {% set foo = {'foo': 'bar'} %}
- *  {% set foo = 'foo' ~ 'bar' %}
- *  {% set foo, bar = 'foo', 'bar' %}
- *  {% set foo %}Some content{% endset %}
- *
- * @internal
- */
-final class SetTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $lineno = $token->getLine();
-        $stream = $this->parser->getStream();
-        $names = $this->parseAssignmentExpression();
-
-        $capture = false;
-        if ($stream->nextIf(Token::OPERATOR_TYPE, '=')) {
-            $values = $this->parseMultitargetExpression();
-
-            $stream->expect(Token::BLOCK_END_TYPE);
-
-            if (\count($names) !== \count($values)) {
-                throw new SyntaxError('When using set, you must have the same number of variables and assignments.', $stream->getCurrent()->getLine(), $stream->getSourceContext());
-            }
-        } else {
-            $capture = true;
-
-            if (\count($names) > 1) {
-                throw new SyntaxError('When using set with a block, you cannot have a multi-target.', $stream->getCurrent()->getLine(), $stream->getSourceContext());
-            }
-
-            $stream->expect(Token::BLOCK_END_TYPE);
-
-            $values = $this->parser->subparse([$this, 'decideBlockEnd'], true);
-            $stream->expect(Token::BLOCK_END_TYPE);
-        }
-
-        return new SetNode($capture, $names, $values, $lineno);
-    }
-
-    public function decideBlockEnd(Token $token): bool
-    {
-        return $token->test('endset');
-    }
-
-    public function getTag(): string
-    {
-        return 'set';
-    }
-
-    private function parseMultitargetExpression(): Nodes
-    {
-        $targets = [];
-        while (true) {
-            $targets[] = $this->parser->parseExpression();
-            if (!$this->parser->getStream()->nextIf(Token::PUNCTUATION_TYPE, ',')) {
-                break;
-            }
-        }
-
-        return new Nodes($targets);
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/TokenParserInterface.php b/generated/php/vendor/twig/twig/src/TokenParser/TokenParserInterface.php
deleted file mode 100644
index ae78714..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/TokenParserInterface.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\Node;
-use Twig\Parser;
-use Twig\Token;
-
-/**
- * Interface implemented by token parsers.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @method bool isAlwaysAllowedInSandbox() Whether the tag is always allowed in sandbox mode, even when not explicitly allow-listed. Not implementing this method is deprecated since Twig 3.28, it will be required in 4.0.
- */
-interface TokenParserInterface
-{
-    /**
-     * Sets the parser associated with this token parser.
-     */
-    public function setParser(Parser $parser): void;
-
-    /**
-     * Parses a token and returns a node.
-     *
-     * @return Node
-     *
-     * @throws SyntaxError
-     */
-    public function parse(Token $token);
-
-    /**
-     * Gets the tag name associated with this token parser.
-     *
-     * @return string
-     */
-    public function getTag();
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/TypesTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/TypesTokenParser.php
deleted file mode 100644
index 2c7b77c..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/TypesTokenParser.php
+++ /dev/null
@@ -1,89 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\Node;
-use Twig\Node\TypesNode;
-use Twig\Token;
-use Twig\TokenStream;
-
-/**
- * Declare variable types.
- *
- *  {% types {foo: 'number', bar?: 'string'} %}
- *
- * @author Jeroen Versteeg <jeroen@alisqi.com>
- *
- * @internal
- */
-final class TypesTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $stream = $this->parser->getStream();
-        $types = $this->parseSimpleMappingExpression($stream);
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        return new TypesNode($types, $token->getLine());
-    }
-
-    /**
-     * @return array<string, array{type: string, optional: bool}>
-     *
-     * @throws SyntaxError
-     */
-    private function parseSimpleMappingExpression(TokenStream $stream): array
-    {
-        $enclosed = null !== $stream->nextIf(Token::PUNCTUATION_TYPE, '{');
-        $types = [];
-        $first = true;
-        while (!($stream->test(Token::PUNCTUATION_TYPE, '}') || $stream->test(Token::BLOCK_END_TYPE))) {
-            if (!$first) {
-                $stream->expect(Token::PUNCTUATION_TYPE, ',', 'A type string must be followed by a comma');
-
-                // trailing ,?
-                if ($stream->test(Token::PUNCTUATION_TYPE, '}') || $stream->test(Token::BLOCK_END_TYPE)) {
-                    break;
-                }
-            }
-            $first = false;
-
-            $nameToken = $stream->expect(Token::NAME_TYPE);
-
-            if ($stream->nextIf(Token::OPERATOR_TYPE, '?:')) {
-                $isOptional = true;
-            } else {
-                $isOptional = null !== $stream->nextIf(Token::OPERATOR_TYPE, '?');
-                $stream->expect(Token::PUNCTUATION_TYPE, ':', 'A type name must be followed by a colon (:)');
-            }
-
-            $valueToken = $stream->expect(Token::STRING_TYPE);
-
-            $types[$nameToken->getValue()] = [
-                'type' => $valueToken->getValue(),
-                'optional' => $isOptional,
-            ];
-        }
-
-        if ($enclosed) {
-            $stream->expect(Token::PUNCTUATION_TYPE, '}', 'An opened mapping is not properly closed');
-        }
-
-        return $types;
-    }
-
-    public function getTag(): string
-    {
-        return 'types';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/UseTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/UseTokenParser.php
deleted file mode 100644
index a85b023..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/UseTokenParser.php
+++ /dev/null
@@ -1,75 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\ConfigNode;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Node;
-use Twig\Node\Nodes;
-use Twig\Token;
-
-/**
- * Imports blocks defined in another template into the current template.
- *
- *    {% extends "base.html" %}
- *
- *    {% use "blocks.html" %}
- *
- *    {% block title %}{% endblock %}
- *    {% block content %}{% endblock %}
- *
- * @see https://twig.symfony.com/doc/templates.html#horizontal-reuse for details.
- *
- * @internal
- */
-final class UseTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $template = $this->parser->parseExpression();
-        $stream = $this->parser->getStream();
-
-        if (!$template instanceof ConstantExpression) {
-            throw new SyntaxError('The template references in a "use" statement must be a string.', $stream->getCurrent()->getLine(), $stream->getSourceContext());
-        }
-
-        $targets = [];
-        if ($stream->nextIf('with')) {
-            while (true) {
-                $name = $stream->expect(Token::NAME_TYPE)->getValue();
-
-                $alias = $name;
-                if ($stream->nextIf('as')) {
-                    $alias = $stream->expect(Token::NAME_TYPE)->getValue();
-                }
-
-                $targets[$name] = new ConstantExpression($alias, -1);
-
-                if (!$stream->nextIf(Token::PUNCTUATION_TYPE, ',')) {
-                    break;
-                }
-            }
-        }
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        $this->parser->addTrait(new Nodes(['template' => $template, 'targets' => new Nodes($targets)]));
-
-        return new ConfigNode($token->getLine());
-    }
-
-    public function getTag(): string
-    {
-        return 'use';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenParser/WithTokenParser.php b/generated/php/vendor/twig/twig/src/TokenParser/WithTokenParser.php
deleted file mode 100644
index 83470d8..0000000
--- a/generated/php/vendor/twig/twig/src/TokenParser/WithTokenParser.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\TokenParser;
-
-use Twig\Node\Node;
-use Twig\Node\WithNode;
-use Twig\Token;
-
-/**
- * Creates a nested scope.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class WithTokenParser extends AbstractTokenParser
-{
-    public function parse(Token $token): Node
-    {
-        $stream = $this->parser->getStream();
-
-        $variables = null;
-        $only = false;
-        if (!$stream->test(Token::BLOCK_END_TYPE)) {
-            $variables = $this->parser->parseExpression();
-            $only = (bool) $stream->nextIf(Token::NAME_TYPE, 'only');
-        }
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        $body = $this->parser->subparse([$this, 'decideWithEnd'], true);
-
-        $stream->expect(Token::BLOCK_END_TYPE);
-
-        return new WithNode($body, $variables, $only, $token->getLine());
-    }
-
-    public function decideWithEnd(Token $token): bool
-    {
-        return $token->test('endwith');
-    }
-
-    public function getTag(): string
-    {
-        return 'with';
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TokenStream.php b/generated/php/vendor/twig/twig/src/TokenStream.php
deleted file mode 100644
index 2586750..0000000
--- a/generated/php/vendor/twig/twig/src/TokenStream.php
+++ /dev/null
@@ -1,132 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- * (c) Armin Ronacher
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Error\SyntaxError;
-
-/**
- * Represents a token stream.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class TokenStream
-{
-    private $current = 0;
-
-    public function __construct(
-        private array $tokens,
-        private ?Source $source = null,
-    ) {
-        if (null === $this->source) {
-            trigger_deprecation('twig/twig', '3.16', \sprintf('Not passing a "%s" object to "%s" constructor is deprecated.', Source::class, __CLASS__));
-
-            $this->source = new Source('', '');
-        }
-    }
-
-    public function __toString(): string
-    {
-        return implode("\n", $this->tokens);
-    }
-
-    /**
-     * @return void
-     */
-    public function injectTokens(array $tokens)
-    {
-        $this->tokens = array_merge(\array_slice($this->tokens, 0, $this->current), $tokens, \array_slice($this->tokens, $this->current));
-    }
-
-    /**
-     * Sets the pointer to the next token and returns the old one.
-     */
-    public function next(): Token
-    {
-        if (!isset($this->tokens[++$this->current])) {
-            throw new SyntaxError('Unexpected end of template.', $this->tokens[$this->current - 1]->getLine(), $this->source);
-        }
-
-        return $this->tokens[$this->current - 1];
-    }
-
-    /**
-     * Tests a token, sets the pointer to the next one and returns it or throws a syntax error.
-     *
-     * @return Token|null The next token if the condition is true, null otherwise
-     */
-    public function nextIf($primary, $secondary = null)
-    {
-        return $this->tokens[$this->current]->test($primary, $secondary) ? $this->next() : null;
-    }
-
-    /**
-     * Tests a token and returns it or throws a syntax error.
-     */
-    public function expect($type, $value = null, ?string $message = null): Token
-    {
-        $token = $this->tokens[$this->current];
-        if (!$token->test($type, $value)) {
-            $line = $token->getLine();
-            throw new SyntaxError(\sprintf('%sUnexpected token "%s"%s ("%s" expected%s).',
-                $message ? $message.'. ' : '',
-                $token->toEnglish(),
-                $token->getValue() ? \sprintf(' of value "%s"', $token->getValue()) : '',
-                Token::typeToEnglish($type), $value ? \sprintf(' with value "%s"', $value) : ''),
-                $line,
-                $this->source,
-                columnno: $this->source->getColumn($token->getOffset() ?? -1),
-            );
-        }
-        $this->next();
-
-        return $token;
-    }
-
-    /**
-     * Looks at the next token.
-     */
-    public function look(int $number = 1): Token
-    {
-        if (!isset($this->tokens[$this->current + $number])) {
-            throw new SyntaxError('Unexpected end of template.', $this->tokens[$this->current + $number - 1]->getLine(), $this->source);
-        }
-
-        return $this->tokens[$this->current + $number];
-    }
-
-    /**
-     * Tests the current token.
-     */
-    public function test($primary, $secondary = null): bool
-    {
-        return $this->tokens[$this->current]->test($primary, $secondary);
-    }
-
-    /**
-     * Checks if end of stream was reached.
-     */
-    public function isEOF(): bool
-    {
-        return $this->tokens[$this->current]->test(Token::EOF_TYPE);
-    }
-
-    public function getCurrent(): Token
-    {
-        return $this->tokens[$this->current];
-    }
-
-    public function getSourceContext(): Source
-    {
-        return $this->source;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TwigCallableInterface.php b/generated/php/vendor/twig/twig/src/TwigCallableInterface.php
deleted file mode 100644
index 06b0e2e..0000000
--- a/generated/php/vendor/twig/twig/src/TwigCallableInterface.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @method bool needsIsSandboxed()         Whether the callable needs the current sandbox state passed as an argument. Not implementing this method is deprecated since Twig 3.25, it will be required in 4.0.
- * @method bool isAlwaysAllowedInSandbox() Whether the callable is always allowed in sandbox mode, even when not explicitly allow-listed. Not implementing this method is deprecated since Twig 3.28, it will be required in 4.0.
- */
-interface TwigCallableInterface extends \Stringable
-{
-    public function getName(): string;
-
-    public function getType(): string;
-
-    public function getDynamicName(): string;
-
-    /**
-     * @return callable|array{class-string, string}|null
-     */
-    public function getCallable();
-
-    public function getNodeClass(): string;
-
-    public function needsCharset(): bool;
-
-    public function needsEnvironment(): bool;
-
-    public function needsContext(): bool;
-
-    public function withDynamicArguments(string $name, string $dynamicName, array $arguments): self;
-
-    public function getArguments(): array;
-
-    public function isVariadic(): bool;
-
-    public function isDeprecated(): bool;
-
-    public function getDeprecatingPackage(): string;
-
-    public function getDeprecatedVersion(): string;
-
-    public function getAlternative(): ?string;
-
-    public function getMinimalNumberOfRequiredArguments(): int;
-}
diff --git a/generated/php/vendor/twig/twig/src/TwigFilter.php b/generated/php/vendor/twig/twig/src/TwigFilter.php
deleted file mode 100644
index dece518..0000000
--- a/generated/php/vendor/twig/twig/src/TwigFilter.php
+++ /dev/null
@@ -1,74 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Node\Expression\FilterExpression;
-use Twig\Node\Node;
-
-/**
- * Represents a template filter.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @see https://twig.symfony.com/doc/templates.html#filters
- */
-final class TwigFilter extends AbstractTwigCallable
-{
-    /**
-     * @param callable|array{class-string, string}|null $callable A callable implementing the filter. If null, you need to overwrite the "node_class" option to customize compilation.
-     */
-    public function __construct(string $name, $callable = null, array $options = [])
-    {
-        parent::__construct($name, $callable, $options);
-
-        $this->options = array_merge([
-            'is_safe' => null,
-            'is_safe_callback' => null,
-            'pre_escape' => null,
-            'preserves_safety' => null,
-            'node_class' => FilterExpression::class,
-        ], $this->options);
-    }
-
-    public function getType(): string
-    {
-        return 'filter';
-    }
-
-    public function getSafe(Node $filterArgs): ?array
-    {
-        if (null !== $this->options['is_safe']) {
-            return $this->options['is_safe'];
-        }
-
-        if (null !== $this->options['is_safe_callback']) {
-            return $this->options['is_safe_callback']($filterArgs);
-        }
-
-        return [];
-    }
-
-    public function getPreservesSafety(): array
-    {
-        return $this->options['preserves_safety'] ?? [];
-    }
-
-    public function getPreEscape(): ?string
-    {
-        return $this->options['pre_escape'];
-    }
-
-    public function getMinimalNumberOfRequiredArguments(): int
-    {
-        return parent::getMinimalNumberOfRequiredArguments() + 1;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TwigFunction.php b/generated/php/vendor/twig/twig/src/TwigFunction.php
deleted file mode 100644
index 4a10df9..0000000
--- a/generated/php/vendor/twig/twig/src/TwigFunction.php
+++ /dev/null
@@ -1,63 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Node\Expression\FunctionExpression;
-use Twig\Node\Node;
-
-/**
- * Represents a template function.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @see https://twig.symfony.com/doc/templates.html#functions
- */
-final class TwigFunction extends AbstractTwigCallable
-{
-    /**
-     * @param callable|array{class-string, string}|null $callable A callable implementing the function. If null, you need to overwrite the "node_class" option to customize compilation.
-     */
-    public function __construct(string $name, $callable = null, array $options = [])
-    {
-        parent::__construct($name, $callable, $options);
-
-        $this->options = array_merge([
-            'is_safe' => null,
-            'is_safe_callback' => null,
-            'node_class' => FunctionExpression::class,
-            'parser_callable' => null,
-        ], $this->options);
-    }
-
-    public function getType(): string
-    {
-        return 'function';
-    }
-
-    public function getParserCallable(): ?callable
-    {
-        return $this->options['parser_callable'];
-    }
-
-    public function getSafe(Node $functionArgs): ?array
-    {
-        if (null !== $this->options['is_safe']) {
-            return $this->options['is_safe'];
-        }
-
-        if (null !== $this->options['is_safe_callback']) {
-            return $this->options['is_safe_callback']($functionArgs);
-        }
-
-        return [];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/TwigTest.php b/generated/php/vendor/twig/twig/src/TwigTest.php
deleted file mode 100644
index 5e58ad8..0000000
--- a/generated/php/vendor/twig/twig/src/TwigTest.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig;
-
-use Twig\Node\Expression\TestExpression;
-
-/**
- * Represents a template test.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @see https://twig.symfony.com/doc/templates.html#test-operator
- */
-final class TwigTest extends AbstractTwigCallable
-{
-    /**
-     * @param callable|array{class-string, string}|null $callable A callable implementing the test. If null, you need to overwrite the "node_class" option to customize compilation.
-     */
-    public function __construct(string $name, $callable = null, array $options = [])
-    {
-        parent::__construct($name, $callable, $options);
-
-        $this->options = array_merge([
-            'node_class' => TestExpression::class,
-            'one_mandatory_argument' => false,
-        ], $this->options);
-    }
-
-    public function getType(): string
-    {
-        return 'test';
-    }
-
-    public function needsCharset(): bool
-    {
-        return false;
-    }
-
-    public function needsEnvironment(): bool
-    {
-        return false;
-    }
-
-    public function needsContext(): bool
-    {
-        return false;
-    }
-
-    public function hasOneMandatoryArgument(): bool
-    {
-        return (bool) $this->options['one_mandatory_argument'];
-    }
-
-    public function getMinimalNumberOfRequiredArguments(): int
-    {
-        return parent::getMinimalNumberOfRequiredArguments() + 1;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Util/CallableArgumentsExtractor.php b/generated/php/vendor/twig/twig/src/Util/CallableArgumentsExtractor.php
deleted file mode 100644
index e3e1f82..0000000
--- a/generated/php/vendor/twig/twig/src/Util/CallableArgumentsExtractor.php
+++ /dev/null
@@ -1,204 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Util;
-
-use Twig\Error\SyntaxError;
-use Twig\Node\Expression\ArrayExpression;
-use Twig\Node\Expression\ConstantExpression;
-use Twig\Node\Expression\VariadicExpression;
-use Twig\Node\Node;
-use Twig\TwigCallableInterface;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class CallableArgumentsExtractor
-{
-    private ReflectionCallable $rc;
-
-    public function __construct(
-        private Node $node,
-        private TwigCallableInterface $twigCallable,
-    ) {
-        $this->rc = new ReflectionCallable($twigCallable);
-    }
-
-    /**
-     * @return array<Node>
-     */
-    public function extractArguments(Node $arguments): array
-    {
-        $extractedArguments = [];
-        $extractedArgumentNameMap = [];
-        $named = false;
-        foreach ($arguments as $name => $node) {
-            if (!\is_int($name)) {
-                $named = true;
-            } elseif ($named) {
-                throw new SyntaxError(\sprintf('Positional arguments cannot be used after named arguments for %s "%s".', $this->twigCallable->getType(), $this->twigCallable->getName()), $this->node->getTemplateLine(), $this->node->getSourceContext());
-            }
-
-            $extractedArguments[$normalizedName = $this->normalizeName($name)] = $node;
-            $extractedArgumentNameMap[$normalizedName] = $name;
-        }
-
-        if (!$named && !$this->twigCallable->isVariadic()) {
-            $min = $this->twigCallable->getMinimalNumberOfRequiredArguments();
-            if (\count($extractedArguments) < $this->rc->getReflector()->getNumberOfRequiredParameters() - $min) {
-                $argName = $this->toSnakeCase($this->rc->getReflector()->getParameters()[$min + \count($extractedArguments)]->getName());
-
-                throw new SyntaxError(\sprintf('Value for argument "%s" is required for %s "%s".', $argName, $this->twigCallable->getType(), $this->twigCallable->getName()), $this->node->getTemplateLine(), $this->node->getSourceContext());
-            }
-
-            return $extractedArguments;
-        }
-
-        if (!$callable = $this->twigCallable->getCallable()) {
-            if ($named) {
-                throw new SyntaxError(\sprintf('Named arguments are not supported for %s "%s".', $this->twigCallable->getType(), $this->twigCallable->getName()));
-            }
-
-            throw new SyntaxError(\sprintf('Arbitrary positional arguments are not supported for %s "%s".', $this->twigCallable->getType(), $this->twigCallable->getName()));
-        }
-
-        [$callableParameters, $isPhpVariadic] = $this->getCallableParameters();
-        $arguments = [];
-        $callableParameterNames = [];
-        $missingArguments = [];
-        $optionalArguments = [];
-        $pos = 0;
-        foreach ($callableParameters as $callableParameter) {
-            $callableParameterName = $callableParameter->name;
-            if (\PHP_VERSION_ID >= 80000 && 'range' === $callable) {
-                if ('start' === $callableParameterName) {
-                    $callableParameterName = 'low';
-                } elseif ('end' === $callableParameterName) {
-                    $callableParameterName = 'high';
-                }
-            }
-
-            $callableParameterNames[] = $callableParameterName;
-            $normalizedCallableParameterName = $this->normalizeName($callableParameterName);
-
-            if (\array_key_exists($normalizedCallableParameterName, $extractedArguments)) {
-                if (\array_key_exists($pos, $extractedArguments)) {
-                    throw new SyntaxError(\sprintf('Argument "%s" is defined twice for %s "%s".', $callableParameterName, $this->twigCallable->getType(), $this->twigCallable->getName()), $this->node->getTemplateLine(), $this->node->getSourceContext());
-                }
-
-                if (\count($missingArguments)) {
-                    throw new SyntaxError(\sprintf(
-                        'Argument "%s" could not be assigned for %s "%s(%s)" because it is mapped to an internal PHP function which cannot determine default value for optional argument%s "%s".',
-                        $callableParameterName, $this->twigCallable->getType(), $this->twigCallable->getName(), implode(', ', array_map([$this, 'toSnakeCase'], $callableParameterNames)), \count($missingArguments) > 1 ? 's' : '', implode('", "', $missingArguments)
-                    ), $this->node->getTemplateLine(), $this->node->getSourceContext());
-                }
-
-                $arguments = array_merge($arguments, $optionalArguments);
-                $arguments[] = $extractedArguments[$normalizedCallableParameterName];
-                unset($extractedArguments[$normalizedCallableParameterName]);
-                $optionalArguments = [];
-            } elseif (\array_key_exists($pos, $extractedArguments)) {
-                $arguments = array_merge($arguments, $optionalArguments);
-                $arguments[] = $extractedArguments[$pos];
-                unset($extractedArguments[$pos]);
-                $optionalArguments = [];
-                ++$pos;
-            } elseif ($callableParameter->isDefaultValueAvailable()) {
-                $optionalArguments[] = new ConstantExpression($callableParameter->getDefaultValue(), $this->node->getTemplateLine());
-            } elseif ($callableParameter->isOptional()) {
-                if (!$extractedArguments) {
-                    break;
-                }
-
-                $missingArguments[] = $callableParameterName;
-            } else {
-                throw new SyntaxError(\sprintf('Value for argument "%s" is required for %s "%s".', $this->toSnakeCase($callableParameterName), $this->twigCallable->getType(), $this->twigCallable->getName()), $this->node->getTemplateLine(), $this->node->getSourceContext());
-            }
-        }
-
-        if ($this->twigCallable->isVariadic()) {
-            $arbitraryArguments = $isPhpVariadic ? new VariadicExpression([], $this->node->getTemplateLine()) : new ArrayExpression([], $this->node->getTemplateLine());
-            foreach ($extractedArguments as $key => $value) {
-                if (\is_int($key)) {
-                    $arbitraryArguments->addElement($value);
-                } else {
-                    $originalKey = $extractedArgumentNameMap[$key];
-                    if ($originalKey !== $this->toSnakeCase($originalKey)) {
-                        trigger_deprecation('twig/twig', '3.15', \sprintf('Using "snake_case" for variadic arguments is required for a smooth upgrade with Twig 4.0; rename "%s" to "%s" in "%s" at line %d.', $originalKey, $this->toSnakeCase($originalKey), $this->node->getSourceContext()->getName(), $this->node->getTemplateLine()));
-                    }
-                    $arbitraryArguments->addElement($value, new ConstantExpression($this->toSnakeCase($originalKey), $this->node->getTemplateLine()));
-                    // I Twig 4.0, don't convert the key:
-                    // $arbitraryArguments->addElement($value, new ConstantExpression($originalKey, $this->node->getTemplateLine()));
-                }
-                unset($extractedArguments[$key]);
-            }
-
-            if ($arbitraryArguments->count()) {
-                $arguments = array_merge($arguments, $optionalArguments);
-                $arguments[] = $arbitraryArguments;
-            }
-        }
-
-        if ($extractedArguments) {
-            $unknownArgument = null;
-            foreach ($extractedArguments as $extractedArgument) {
-                if ($extractedArgument instanceof Node) {
-                    $unknownArgument = $extractedArgument;
-                    break;
-                }
-            }
-
-            throw new SyntaxError(
-                \sprintf(
-                    'Unknown argument%s "%s" for %s "%s(%s)".',
-                    \count($extractedArguments) > 1 ? 's' : '', implode('", "', array_keys($extractedArguments)), $this->twigCallable->getType(), $this->twigCallable->getName(), implode(', ', array_map([$this, 'toSnakeCase'], $callableParameterNames))
-                ),
-                $unknownArgument ? $unknownArgument->getTemplateLine() : $this->node->getTemplateLine(),
-                $unknownArgument ? $unknownArgument->getSourceContext() : $this->node->getSourceContext()
-            );
-        }
-
-        return $arguments;
-    }
-
-    private function normalizeName(string $name): string
-    {
-        return strtolower(str_replace('_', '', $name));
-    }
-
-    private function toSnakeCase(string $name): string
-    {
-        return strtolower(preg_replace(['/([A-Z]+)([A-Z][a-z])/', '/([a-z0-9])([A-Z])/'], '\1_\2', $name));
-    }
-
-    private function getCallableParameters(): array
-    {
-        $parameters = $this->rc->getTwigParameters($this->node->hasNode('node'));
-
-        $isPhpVariadic = false;
-        if ($this->twigCallable->isVariadic()) {
-            $argument = end($parameters);
-            $isArray = $argument && $argument->hasType() && $argument->getType() instanceof \ReflectionNamedType && 'array' === $argument->getType()->getName();
-            if ($isArray && $argument->isDefaultValueAvailable() && [] === $argument->getDefaultValue()) {
-                array_pop($parameters);
-            } elseif ($argument && $argument->isVariadic()) {
-                array_pop($parameters);
-                $isPhpVariadic = true;
-            } else {
-                throw new SyntaxError(\sprintf('The last parameter of "%s" for %s "%s" must be an array with default value, eg. "array $arg = []".', $this->rc->getName(), $this->twigCallable->getType(), $this->twigCallable->getName()));
-            }
-        }
-
-        return [$parameters, $isPhpVariadic];
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Util/CallableParameters.php b/generated/php/vendor/twig/twig/src/Util/CallableParameters.php
deleted file mode 100644
index 4321bb2..0000000
--- a/generated/php/vendor/twig/twig/src/Util/CallableParameters.php
+++ /dev/null
@@ -1,161 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Util;
-
-use Twig\Environment;
-use Twig\Node\Expression\FilterExpression;
-use Twig\Node\Expression\FunctionExpression;
-use Twig\Node\Expression\TestExpression;
-use Twig\Node\Node;
-use Twig\TwigCallableInterface;
-
-/**
- * Reflects the PHP parameters backing a Twig callable expression.
- *
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class CallableParameters
-{
-    /**
-     * Returns the PHP parameters of a Filter/Function/Test call mapped to its
-     * template-level arguments.
-     *
-     * The parameters Twig injects automatically
-     * (`needs_charset/environment/context/is_sandboxed`) and the bound
-     * `arguments` are stripped. For a filter, the first returned parameter is
-     * the filter's input value. Returns null when reflection fails or the node
-     * is not a callable expression.
-     *
-     * @return list<\ReflectionParameter>|null
-     */
-    public static function fromNode(Node $node, Environment $env): ?array
-    {
-        if (!$node instanceof FilterExpression && !$node instanceof FunctionExpression && !$node instanceof TestExpression) {
-            return null;
-        }
-
-        $callable = self::resolveTwigCallable($node, $env);
-        if (null === $callable || null === $callable->getCallable()) {
-            return null;
-        }
-
-        try {
-            return (new ReflectionCallable($callable))->getTwigParameters();
-        } catch (\LogicException) {
-            return null;
-        }
-    }
-
-    /**
-     * Returns true when a PHP parameter type proves the value reaching it
-     * cannot implicitly string-coerce (directly or by iterating it).
-     *
-     * Safe: `int`, `float`, `bool`, `null`, `false`, `true`, `void`, `never`,
-     * enums, and `final` class types that are neither `Stringable` nor
-     * `Traversable`.
-     *
-     * Unsafe: `string`, `array`, `iterable`, `mixed`, `object`,
-     * untyped, interfaces, non-final classes, and any type that is
-     * `Stringable` or `Traversable`. Interfaces and non-final classes are
-     * open: a subtype could add `Stringable`/`Traversable` and reach the host
-     * code, bypassing the `__toString` policy, so only a `final` class (enums
-     * included) is closed enough.
-     *
-     * @param \ReflectionClass|null $scope resolves the relative types `self`/`parent`/`static` (which
-     *                                     older PHP versions report verbatim instead of the declaring class)
-     */
-    public static function isStringCoercionSafe(?\ReflectionType $type, ?\ReflectionClass $scope = null): bool
-    {
-        if (null === $type) {
-            return false;
-        }
-
-        // A union value is one of its members, so every member must be safe.
-        if ($type instanceof \ReflectionUnionType) {
-            foreach ($type->getTypes() as $t) {
-                if (!self::isStringCoercionSafe($t, $scope)) {
-                    return false;
-                }
-            }
-
-            return true;
-        }
-
-        // An intersection value satisfies all its members at once. A safe
-        // member is necessarily a final class, which pins the concrete class,
-        // so the value is that non-coercible class whatever the other members.
-        if ($type instanceof \ReflectionIntersectionType) {
-            foreach ($type->getTypes() as $t) {
-                if (self::isStringCoercionSafe($t, $scope)) {
-                    return true;
-                }
-            }
-
-            return false;
-        }
-
-        if (!$type instanceof \ReflectionNamedType) {
-            return false;
-        }
-
-        $name = $type->getName();
-
-        if ($type->isBuiltin()) {
-            return match ($name) {
-                // `null` (e.g. as a union member) cannot have a __toString.
-                'null', 'int', 'float', 'bool', 'true', 'false', 'void', 'never' => true,
-                default => false, // string, array, iterable, object, mixed, callable
-            };
-        }
-
-        // Resolve `self`/`parent`/`static` to the concrete class
-        // `static` is treated like `self` since a `final` class cannot be subclassed anyway
-        $class = match ($name) {
-            'self', 'static' => $scope,
-            'parent' => $scope ? ($scope->getParentClass() ?: null) : null,
-            default => class_exists($name, false) ? new \ReflectionClass($name) : null,
-        };
-
-        // Interfaces and non-final classes are open: a subtype could add
-        // Stringable/Traversable, so only a final non-coercible class is safe
-        if (null === $class) {
-            return false;
-        }
-        if (is_a($class->getName(), \Stringable::class, true) || is_a($class->getName(), \Traversable::class, true)) {
-            return false;
-        }
-
-        return $class->isFinal();
-    }
-
-    private static function resolveTwigCallable(Node $node, Environment $env): ?TwigCallableInterface
-    {
-        if ($node->hasAttribute('twig_callable')) {
-            return $node->getAttribute('twig_callable');
-        }
-        if (!$node->hasAttribute('name')) {
-            return null;
-        }
-        $name = $node->getAttribute('name');
-        try {
-            return match (true) {
-                $node instanceof FilterExpression => $env->getFilter($name),
-                $node instanceof FunctionExpression => $env->getFunction($name),
-                $node instanceof TestExpression => $env->getTest($name),
-            };
-        } catch (\Throwable) {
-            return null;
-        }
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Util/DeprecationCollector.php b/generated/php/vendor/twig/twig/src/Util/DeprecationCollector.php
deleted file mode 100644
index 64cbba5..0000000
--- a/generated/php/vendor/twig/twig/src/Util/DeprecationCollector.php
+++ /dev/null
@@ -1,77 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Util;
-
-use Twig\Environment;
-use Twig\Error\SyntaxError;
-use Twig\Source;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-final class DeprecationCollector
-{
-    public function __construct(
-        private Environment $twig,
-    ) {
-    }
-
-    /**
-     * Returns deprecations for templates contained in a directory.
-     *
-     * @param string $dir A directory where templates are stored
-     * @param string $ext Limit the loaded templates by extension
-     *
-     * @return array An array of deprecations
-     */
-    public function collectDir(string $dir, string $ext = '.twig'): array
-    {
-        $iterator = new \RegexIterator(
-            new \RecursiveIteratorIterator(
-                new \RecursiveDirectoryIterator($dir), \RecursiveIteratorIterator::LEAVES_ONLY
-            ), '{'.preg_quote($ext).'$}'
-        );
-
-        return $this->collect(new TemplateDirIterator($iterator));
-    }
-
-    /**
-     * Returns deprecations for passed templates.
-     *
-     * @param \Traversable $iterator An iterator of templates (where keys are template names and values the contents of the template)
-     *
-     * @return array An array of deprecations
-     */
-    public function collect(\Traversable $iterator): array
-    {
-        $deprecations = [];
-        set_error_handler(static function ($type, $msg) use (&$deprecations) {
-            if (\E_USER_DEPRECATED === $type) {
-                $deprecations[] = $msg;
-            }
-
-            return false;
-        });
-
-        foreach ($iterator as $name => $contents) {
-            try {
-                $this->twig->parse($this->twig->tokenize(new Source($contents, $name)));
-            } catch (SyntaxError $e) {
-                // ignore templates containing syntax errors
-            }
-        }
-
-        restore_error_handler();
-
-        return $deprecations;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Util/ReflectionCallable.php b/generated/php/vendor/twig/twig/src/Util/ReflectionCallable.php
deleted file mode 100644
index 9616e3b..0000000
--- a/generated/php/vendor/twig/twig/src/Util/ReflectionCallable.php
+++ /dev/null
@@ -1,131 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Util;
-
-use Twig\Node\Expression\CallExpression;
-use Twig\TwigCallableInterface;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- *
- * @internal
- */
-final class ReflectionCallable
-{
-    private $reflector;
-    private $callable;
-    private $name;
-
-    public function __construct(
-        private TwigCallableInterface $twigCallable,
-    ) {
-        $callable = $twigCallable->getCallable();
-        if (\is_string($callable) && false !== $pos = strpos($callable, '::')) {
-            $callable = [substr($callable, 0, $pos), substr($callable, 2 + $pos)];
-        }
-
-        if (\is_array($callable) && method_exists($callable[0], $callable[1])) {
-            $this->reflector = $r = new \ReflectionMethod($callable[0], $callable[1]);
-            $this->callable = $callable;
-            $this->name = $r->class.'::'.$r->name;
-
-            return;
-        }
-
-        $checkVisibility = $callable instanceof \Closure;
-        try {
-            $closure = \Closure::fromCallable($callable);
-        } catch (\TypeError $e) {
-            throw new \LogicException(\sprintf('Callback for %s "%s" is not callable in the current scope.', $twigCallable->getType(), $twigCallable->getName()), 0, $e);
-        }
-        $this->reflector = $r = new \ReflectionFunction($closure);
-
-        if (str_contains($r->name, '{closure')) {
-            $this->callable = $callable;
-            $this->name = 'Closure';
-
-            return;
-        }
-
-        if ($object = $r->getClosureThis()) {
-            $callable = [$object, $r->name];
-            $this->name = get_debug_type($object).'::'.$r->name;
-        } elseif (\PHP_VERSION_ID >= 80111 && $class = $r->getClosureCalledClass()) {
-            $callable = [$class->name, $r->name];
-            $this->name = $class->name.'::'.$r->name;
-        } elseif (\PHP_VERSION_ID < 80111 && $class = $r->getClosureScopeClass()) {
-            $callable = [\is_array($callable) ? $callable[0] : $class->name, $r->name];
-            $this->name = (\is_array($callable) ? $callable[0] : $class->name).'::'.$r->name;
-        } else {
-            $callable = $this->name = $r->name;
-        }
-
-        if ($checkVisibility && \is_array($callable) && method_exists(...$callable) && !(new \ReflectionMethod(...$callable))->isPublic()) {
-            $callable = $r->getClosure();
-        }
-
-        $this->callable = $callable;
-    }
-
-    public function getReflector(): \ReflectionFunctionAbstract
-    {
-        return $this->reflector;
-    }
-
-    /**
-     * Returns the PHP parameters that map to the callable's template-level
-     * arguments.
-     *
-     * The parameters Twig injects automatically (the piped input value when
-     * $stripInput is true, then needs_charset/environment/context/is_sandboxed)
-     * and the bound arguments are stripped.
-     *
-     * @return list<\ReflectionParameter>
-     */
-    public function getTwigParameters(bool $stripInput = false): array
-    {
-        $parameters = $this->reflector->getParameters();
-        if ($stripInput) {
-            array_shift($parameters);
-        }
-        if ($this->twigCallable->needsCharset()) {
-            array_shift($parameters);
-        }
-        if ($this->twigCallable->needsEnvironment()) {
-            array_shift($parameters);
-        }
-        if ($this->twigCallable->needsContext()) {
-            array_shift($parameters);
-        }
-        if (CallExpression::needsIsSandboxed($this->twigCallable)) {
-            array_shift($parameters);
-        }
-        foreach ($this->twigCallable->getArguments() as $argument) {
-            array_shift($parameters);
-        }
-
-        return array_values($parameters);
-    }
-
-    /**
-     * @return callable
-     */
-    public function getCallable()
-    {
-        return $this->callable;
-    }
-
-    public function getName(): string
-    {
-        return $this->name;
-    }
-}
diff --git a/generated/php/vendor/twig/twig/src/Util/TemplateDirIterator.php b/generated/php/vendor/twig/twig/src/Util/TemplateDirIterator.php
deleted file mode 100644
index d739b28..0000000
--- a/generated/php/vendor/twig/twig/src/Util/TemplateDirIterator.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php
-
-/*
- * This file is part of Twig.
- *
- * (c) Fabien Potencier
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Twig\Util;
-
-/**
- * @author Fabien Potencier <fabien@symfony.com>
- */
-class TemplateDirIterator extends \IteratorIterator
-{
-    /**
-     * @return string
-     */
-    #[\ReturnTypeWillChange]
-    public function current()
-    {
-        return file_get_contents(parent::current());
-    }
-
-    /**
-     * @return string
-     */
-    #[\ReturnTypeWillChange]
-    public function key()
-    {
-        return (string) parent::key();
-    }
-}
diff --git a/generated/ui/alert/Alert.html.twig b/generated/ui/alert/Alert.html.twig
deleted file mode 100644
index 9c74e6a..0000000
--- a/generated/ui/alert/Alert.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.alert — Alert renders a div with alert or status semantics. #}
-<div{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('alertClasses', { 'variant': (variant|default('')), 'class': (class|default('')) })), 'role': ui8kit_one_of_or((role|default('')), 'status', ['status', 'alert']), 'aria-live': ui8kit_default_if_empty((ariaLive|default('')), 'polite') }, attrs|default({})) }}>{{ children|default('')|raw }}</div>
diff --git a/generated/ui/alert/Alert.latte b/generated/ui/alert/Alert.latte
deleted file mode 100644
index 23653c0..0000000
--- a/generated/ui/alert/Alert.latte
+++ /dev/null
@@ -1,16 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.alert — Alert renders a div with alert or status semantics. *}
-{parameters
-  string $class = '',
-  string $variant = '',
-  string $role = '',
-  string $ariaLive = '',
-  array $attrs = [],
-  string $children = '',
-}
-<div n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::alertClasses(['variant' => $variant, 'class' => $class])),
-  'role' => \UI8Kit\Rt::oneOfOr($role, 'status', 'status', 'alert'),
-  'aria-live' => \UI8Kit\Rt::defaultIfEmpty($ariaLive, 'polite'),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/alert/Alert.svelte b/generated/ui/alert/Alert.svelte
deleted file mode 100644
index 55b8492..0000000
--- a/generated/ui/alert/Alert.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Alert renders a div with alert or status semantics.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { AlertVariant } from "./alert.shared";
-
-  export type AlertProps = {
-    variant?: AlertVariant;
-    role?: "status" | "alert";
-    "aria-live"?: "off" | "polite" | "assertive";
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { alertClasses } from "./alert.shared";
-  import { defaultIfEmpty, oneOfOr } from "../../utils/expr";
-
-  let {
-    variant,
-    role,
-    "aria-live": ariaLive,
-    class: className,
-    children,
-    ...rest
-  }: AlertProps = $props();
-
-  const cls = $derived(alertClasses({ variant, className }));
-</script>
-
-<div {...(cls ? { class: cls } : {})} role={oneOfOr(role, "status", "status", "alert")} aria-live={defaultIfEmpty(ariaLive, "polite")} {...rest}>
-  {@render children?.()}
-</div>
diff --git a/generated/ui/alert/Alert.vue b/generated/ui/alert/Alert.vue
deleted file mode 100644
index d8d0681..0000000
--- a/generated/ui/alert/Alert.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Alert renders a div with alert or status semantics.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { alertClasses, type AlertVariant } from "./alert.shared";
-import { defaultIfEmpty, oneOfOr } from "../../utils/expr";
-
-defineOptions({ name: "Alert", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: AlertVariant;
-  role?: "status" | "alert";
-  ariaLive?: "off" | "polite" | "assertive";
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => alertClasses({ variant: props.variant, className: callerClass.value }));
-</script>
-
-<template>
-  <div :class="cls || undefined" :role="oneOfOr(props.role, 'status', 'status', 'alert')" :aria-live="defaultIfEmpty(props.ariaLive, 'polite')" v-bind="restAttrs">
-    <slot />
-  </div>
-</template>
diff --git a/generated/ui/alert/alert.shared.ts b/generated/ui/alert/alert.shared.ts
deleted file mode 100644
index 38af0d6..0000000
--- a/generated/ui/alert/alert.shared.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.alert — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import alertRecipeJson from "./alert.variants.json";
-
-export const alertRecipe = alertRecipeJson;
-
-export type AlertVariant = RecipeKey<typeof alertRecipe, "variant">;
-
-/** Alert renders a div with alert or status semantics. */
-export type AlertBaseProps = {
-  variant?: AlertVariant;
-  role?: "status" | "alert";
-  ariaLive?: "off" | "polite" | "assertive";
-};
-
-export type AlertClassesInput = {
-  variant?: AlertVariant;
-  className?: string;
-};
-
-/** Compose Alert classes without rendering — the cross-runtime `asChild` substitute. */
-export function alertClasses(input: AlertClassesInput = {}): string {
-  return cn(composeRecipe(alertRecipe, { variant: input.variant }), input.className);
-}
diff --git a/generated/ui/alert/alert.solid.tsx b/generated/ui/alert/alert.solid.tsx
deleted file mode 100644
index b843276..0000000
--- a/generated/ui/alert/alert.solid.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Alert displays a static status or informational message.
- * Renders a live region with role=status by default; children carry the message body.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { alertClasses, type AlertVariant } from "./alert.shared";
-import { defaultIfEmpty, oneOfOr } from "../../utils/expr";
-
-/**
- * Alert renders a div with alert or status semantics.
- */
-export type AlertProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "className" | "children" | "variant" | "role" | "aria-live"> & {
-  variant?: AlertVariant;
-  role?: "status" | "alert";
-  "aria-live"?: "off" | "polite" | "assertive";
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Alert: Component<AlertProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "role", "aria-live", "class", "className", "children"]);
-  const cls = () => alertClasses({ variant: local.variant, className: local.class ?? local.className });
-  return (
-    <div class={cls() || undefined} role={oneOfOr(local.role, "status", "status", "alert")} aria-live={defaultIfEmpty(local["aria-live"], "polite")} {...rest}>
-      {local.children}
-    </div>
-  );
-};
diff --git a/generated/ui/alert/alert.tsx b/generated/ui/alert/alert.tsx
deleted file mode 100644
index 40c8e19..0000000
--- a/generated/ui/alert/alert.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Alert displays a static status or informational message.
- * Renders a live region with role=status by default; children carry the message body.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
-import { alertClasses, type AlertVariant } from "./alert.shared";
-import { defaultIfEmpty, oneOfOr } from "../../utils/expr";
-import { Slot } from "../slot/slot";
-
-/**
- * Alert renders a div with alert or status semantics.
- */
-export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children" | "variant" | "role" | "aria-live"> & {
-  variant?: AlertVariant;
-  role?: "status" | "alert";
-  "aria-live"?: "off" | "polite" | "assertive";
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { variant, role, "aria-live": ariaLive, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = alertClasses({ variant, className });
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <div ref={ref} className={cls || undefined} role={oneOfOr(role, "status", "status", "alert")} aria-live={defaultIfEmpty(ariaLive, "polite")} {...rest}>
-      {children}
-    </div>
-  );
-});
-Alert.displayName = "Alert";
diff --git a/generated/ui/alert/alert.variants.json b/generated/ui/alert/alert.variants.json
deleted file mode 100644
index 5dc65a8..0000000
--- a/generated/ui/alert/alert.variants.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "id": "ui.alert",
-  "base": "rounded-lg border px-4 py-3 shadow-sm outline-none ring-offset-background gap-6",
-  "keys": [
-    "variant"
-  ],
-  "defaults": {
-    "variant": "default"
-  },
-  "byKey": {
-    "variant": {
-      "default": "bg-card text-card-foreground",
-      "destructive": "border-destructive bg-destructive/10 text-destructive",
-      "success": "border-primary bg-primary/10 text-primary",
-      "warning": "border-border bg-accent text-accent-foreground"
-    }
-  }
-}
diff --git a/generated/ui/alert/alert_gen.go b/generated/ui/alert/alert_gen.go
deleted file mode 100644
index 987c1ff..0000000
--- a/generated/ui/alert/alert_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package alert
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed alert.variants.json
-var alertVariantsJSON []byte
-
-// AlertVariants is the CVA recipe shared verbatim by all runtimes.
-var AlertVariants = uiutils.MustParseVariantRecipe(alertVariantsJSON).ToVariants()
diff --git a/generated/ui/alert/alert_templ.go b/generated/ui/alert/alert_templ.go
deleted file mode 100644
index 7e6e31e..0000000
--- a/generated/ui/alert/alert_templ.go
+++ /dev/null
@@ -1,139 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Alert displays a static status or informational message.
-
-
-Renders a live region with role=status by default; children carry the message body.
-
-
-*/
-
-package alert
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// AlertProps configures Alert.
-type AlertProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Variant — default, destructive, or wireframe preset
-	Variant string
-	// Role — status or alert (defaults to status)
-	Role string
-	// AriaLive — polite or assertive (defaults to polite)
-	AriaLive string
-	Attrs    templ.Attributes
-}
-
-// AlertClasses composes Alert classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func AlertClasses(p AlertProps) string {
-	return uiutils.Compose(AlertVariants, map[string]string{
-		"variant": p.Variant,
-	}, p.Class)
-}
-
-// Alert renders the Alert contract.
-func Alert(p AlertProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{AlertClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/alert/alert.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" role=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var4 string
-		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.OneOfOr(p.Role, "status", "status", "alert"))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/alert/alert.templ`, Line: 39, Col: 61}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" aria-live=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var5 string
-		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.DefaultIfEmpty(p.AriaLive, "polite"))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/alert/alert.templ`, Line: 40, Col: 58}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/badge/Badge.html.twig b/generated/ui/badge/Badge.html.twig
deleted file mode 100644
index 8c6f2b8..0000000
--- a/generated/ui/badge/Badge.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.badge — Badge renders label text in a div wrapper. #}
-<div{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('badgeClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</div>
diff --git a/generated/ui/badge/Badge.latte b/generated/ui/badge/Badge.latte
deleted file mode 100644
index 9c96ac8..0000000
--- a/generated/ui/badge/Badge.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.badge — Badge renders label text in a div wrapper. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<div n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::badgeClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/badge/Badge.svelte b/generated/ui/badge/Badge.svelte
deleted file mode 100644
index 753d26f..0000000
--- a/generated/ui/badge/Badge.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Badge renders label text in a div wrapper.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { BadgeSize, BadgeVariant } from "./badge.shared";
-
-  export type BadgeProps = {
-    variant?: BadgeVariant;
-    size?: BadgeSize;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { badgeClasses } from "./badge.shared";
-
-  let {
-    variant,
-    size,
-    class: className,
-    children,
-    ...rest
-  }: BadgeProps = $props();
-
-  const cls = $derived(badgeClasses({ variant, size, className }));
-</script>
-
-<div {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</div>
diff --git a/generated/ui/badge/Badge.vue b/generated/ui/badge/Badge.vue
deleted file mode 100644
index 7cce036..0000000
--- a/generated/ui/badge/Badge.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Badge renders label text in a div wrapper.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { badgeClasses, type BadgeSize, type BadgeVariant } from "./badge.shared";
-
-defineOptions({ name: "Badge", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => badgeClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <div :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </div>
-</template>
diff --git a/generated/ui/badge/badge.shared.ts b/generated/ui/badge/badge.shared.ts
deleted file mode 100644
index 53de78d..0000000
--- a/generated/ui/badge/badge.shared.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.badge — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import badgeRecipeJson from "./badge.variants.json";
-
-export const badgeRecipe = badgeRecipeJson;
-
-export type BadgeVariant = RecipeKey<typeof badgeRecipe, "variant">;
-export type BadgeSize = RecipeKey<typeof badgeRecipe, "size">;
-
-/** Badge renders label text in a div wrapper. */
-export type BadgeBaseProps = {
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-};
-
-export type BadgeClassesInput = {
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-  className?: string;
-};
-
-/** Compose Badge classes without rendering — the cross-runtime `asChild` substitute. */
-export function badgeClasses(input: BadgeClassesInput = {}): string {
-  return cn(composeRecipe(badgeRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/badge/badge.solid.tsx b/generated/ui/badge/badge.solid.tsx
deleted file mode 100644
index d06459a..0000000
--- a/generated/ui/badge/badge.solid.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Badge shows a short status label.
- * Badge uses variant and size presets.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { badgeClasses, type BadgeSize, type BadgeVariant } from "./badge.shared";
-
-/**
- * Badge renders label text in a div wrapper.
- */
-export type BadgeProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "className" | "children" | "variant" | "size"> & {
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Badge: Component<BadgeProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "class", "className", "children"]);
-  const cls = () => badgeClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <div class={cls() || undefined} {...rest}>
-      {local.children}
-    </div>
-  );
-};
diff --git a/generated/ui/badge/badge.tsx b/generated/ui/badge/badge.tsx
deleted file mode 100644
index d9ad56c..0000000
--- a/generated/ui/badge/badge.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Badge shows a short status label.
- * Badge uses variant and size presets.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
-import { badgeClasses, type BadgeSize, type BadgeVariant } from "./badge.shared";
-
-/**
- * Badge renders label text in a div wrapper.
- */
-export type BadgeProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children" | "variant" | "size"> & {
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
-  { variant, size, className, children, ...rest },
-  ref
-) {
-  const cls = badgeClasses({ variant, size, className });
-  return (
-    <div ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </div>
-  );
-});
-Badge.displayName = "Badge";
diff --git a/generated/ui/badge/badge.variants.json b/generated/ui/badge/badge.variants.json
deleted file mode 100644
index b1e4017..0000000
--- a/generated/ui/badge/badge.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "inline-flex items-center rounded-full border px-2 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  "byKey": {
-    "size": {
-      "default": "px-2 py-1 text-xs",
-      "lg": "px-3 py-1 text-sm",
-      "sm": "px-2 py-1 text-xs"
-    },
-    "variant": {
-      "default": "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-      "destructive": "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-      "outline": "text-foreground",
-      "secondary": "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.badge",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/badge/badge_gen.go b/generated/ui/badge/badge_gen.go
deleted file mode 100644
index 4b9ec63..0000000
--- a/generated/ui/badge/badge_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package badge
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed badge.variants.json
-var badgeVariantsJSON []byte
-
-// BadgeVariants is the CVA recipe shared verbatim by all runtimes.
-var BadgeVariants = uiutils.MustParseVariantRecipe(badgeVariantsJSON).ToVariants()
diff --git a/generated/ui/badge/badge_templ.go b/generated/ui/badge/badge_templ.go
deleted file mode 100644
index 81227ea..0000000
--- a/generated/ui/badge/badge_templ.go
+++ /dev/null
@@ -1,112 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Badge shows a short status label.
-
-
-Badge uses variant and size presets.
-
-
-*/
-
-package badge
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// BadgeProps configures Badge.
-type BadgeProps struct {
-	// Variant — color preset: default, secondary, destructive, outline
-	Variant string
-	// Size — density preset: default, sm, lg
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// BadgeClasses composes Badge classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func BadgeClasses(p BadgeProps) string {
-	return uiutils.Compose(BadgeVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Badge renders the Badge contract.
-func Badge(p BadgeProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{BadgeClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/badge/badge.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/block/Block.html.twig b/generated/ui/block/Block.html.twig
deleted file mode 100644
index a8394d1..0000000
--- a/generated/ui/block/Block.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.block — Block renders a resolved landmark element with children. #}
-{% set uiTag = ui8kit_resolve_tag((tag|default('')), 'div', 'Layout') %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('blockClasses', { 'class': (class|default('')) })), 'id': ui8kit_or_null((id|default(''))) }, attrs|default({})) }}>{{ children|default('')|raw }}</{{ uiTag }}>
diff --git a/generated/ui/block/Block.latte b/generated/ui/block/Block.latte
deleted file mode 100644
index 72a85dd..0000000
--- a/generated/ui/block/Block.latte
+++ /dev/null
@@ -1,15 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.block — Block renders a resolved landmark element with children. *}
-{parameters
-  string $id = '',
-  string $class = '',
-  string $tag = '',
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTag = \UI8Kit\Rt::resolveTag($tag, 'div', 'Layout')}
-<div n:tag="$uiTag" n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::blockClasses(['class' => $class])),
-  'id' => \UI8Kit\Rt::orNull($id),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/block/Block.svelte b/generated/ui/block/Block.svelte
deleted file mode 100644
index f2cd77a..0000000
--- a/generated/ui/block/Block.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Block renders a resolved landmark element with children.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type BlockProps = {
-    tag?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { blockClasses } from "./block.shared";
-  import { resolveTag, TagGroup } from "../../utils/tags";
-
-  let {
-    tag,
-    class: className,
-    children,
-    ...rest
-  }: BlockProps = $props();
-
-  const cls = $derived(blockClasses({ className }));
-  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.Layout));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</svelte:element>
diff --git a/generated/ui/block/Block.vue b/generated/ui/block/Block.vue
deleted file mode 100644
index 9096837..0000000
--- a/generated/ui/block/Block.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Block renders a resolved landmark element with children.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { blockClasses } from "./block.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-defineOptions({ name: "Block", inheritAttrs: false });
-
-const props = defineProps<{
-  tag?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => blockClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => resolveTag(props.tag, "div", TagGroup.Layout));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </component>
-</template>
diff --git a/generated/ui/block/block.shared.ts b/generated/ui/block/block.shared.ts
deleted file mode 100644
index 8b12705..0000000
--- a/generated/ui/block/block.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.block — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import blockRecipeJson from "./block.variants.json";
-
-export const blockRecipe = blockRecipeJson;
-
-/** Block renders a resolved landmark element with children. */
-export type BlockBaseProps = {
-  tag?: string;
-};
-
-export type BlockClassesInput = {
-  className?: string;
-};
-
-/** Compose Block classes without rendering — the cross-runtime `asChild` substitute. */
-export function blockClasses(input: BlockClassesInput = {}): string {
-  return cn(composeRecipe(blockRecipe, {  }), input.className);
-}
diff --git a/generated/ui/block/block.solid.tsx b/generated/ui/block/block.solid.tsx
deleted file mode 100644
index 0224f02..0000000
--- a/generated/ui/block/block.solid.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Block is a top-level page landmark (main, header, section, nav, …).
- * Use for document structure; do not nest Block inside Block.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { blockClasses } from "./block.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-/**
- * Block renders a resolved landmark element with children.
- */
-export type BlockProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "tag"> & {
-  tag?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Block: Component<BlockProps> = (props) => {
-  const [local, rest] = splitProps(props, ["tag", "class", "className", "children"]);
-  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.Layout);
-  const cls = () => blockClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...rest}>
-      {local.children}
-    </Dynamic>
-  );
-};
diff --git a/generated/ui/block/block.tsx b/generated/ui/block/block.tsx
deleted file mode 100644
index 649b6eb..0000000
--- a/generated/ui/block/block.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Block is a top-level page landmark (main, header, section, nav, …).
- * Use for document structure; do not nest Block inside Block.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
-import { blockClasses } from "./block.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-import { Slot } from "../slot/slot";
-
-/**
- * Block renders a resolved landmark element with children.
- */
-export type BlockProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
-  tag?: string;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Block = forwardRef<HTMLElement, BlockProps>(function Block(
-  { tag, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = blockClasses({ className });
-  const resolvedTagValue = resolveTag(tag, "div", TagGroup.Layout);
-  const Tag = resolvedTagValue as ElementType;
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
-      {children}
-    </Tag>
-  );
-});
-Block.displayName = "Block";
diff --git a/generated/ui/block/block.variants.json b/generated/ui/block/block.variants.json
deleted file mode 100644
index 406906a..0000000
--- a/generated/ui/block/block.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.block",
-  "keys": []
-}
diff --git a/generated/ui/block/block_gen.go b/generated/ui/block/block_gen.go
deleted file mode 100644
index 7df40a8..0000000
--- a/generated/ui/block/block_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package block
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed block.variants.json
-var blockVariantsJSON []byte
-
-// BlockVariants is the CVA recipe shared verbatim by all runtimes.
-var BlockVariants = uiutils.MustParseVariantRecipe(blockVariantsJSON).ToVariants()
diff --git a/generated/ui/block/block_templ.go b/generated/ui/block/block_templ.go
deleted file mode 100644
index d07eb9d..0000000
--- a/generated/ui/block/block_templ.go
+++ /dev/null
@@ -1,710 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Block is a top-level page landmark (main, header, section, nav, …).
-
-
-Use for document structure; do not nest Block inside Block.
-
-
-*/
-
-package block
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// BlockProps configures Block.
-type BlockProps struct {
-	ID string
-	// Class — adds Tailwind utilities
-	Class string
-	// Tag — semantic landmark: main, header, section, footer, nav, article, aside, figure
-	Tag   string
-	Attrs templ.Attributes
-}
-
-// BlockClasses composes Block classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func BlockClasses(p BlockProps) string {
-	return uiutils.Compose(BlockVariants, map[string]string{}, p.Class)
-}
-
-// Block renders the Block contract.
-func Block(p BlockProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupLayout) {
-		case "section":
-			var templ_7745c5c3_Var2 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<section class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var4 string
-				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 37, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</section>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "article":
-			var templ_7745c5c3_Var5 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<article class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var5).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var7 string
-				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 47, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</article>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "aside":
-			var templ_7745c5c3_Var8 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<aside class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var8).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var10 string
-				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 57, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</aside>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "header":
-			var templ_7745c5c3_Var11 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var11...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<header class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var12 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var11).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var13 string
-				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 67, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</header>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "footer":
-			var templ_7745c5c3_Var14 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var14...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<footer class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var15 string
-			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var14).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var16 string
-				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 77, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</footer>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "main":
-			var templ_7745c5c3_Var17 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var17...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<main class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var18 string
-			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var17).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var19 string
-				templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 87, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</main>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "nav":
-			var templ_7745c5c3_Var20 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var20...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<nav class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var21 string
-			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var20).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var22 string
-				templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 97, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</nav>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "figure":
-			var templ_7745c5c3_Var23 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var23...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "<figure class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var24 string
-			templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var23).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var25 string
-				templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 107, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "</figure>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "search":
-			var templ_7745c5c3_Var26 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var26...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "<search class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var27 string
-			templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var26).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var28 string
-				templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 117, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "</search>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "hgroup":
-			var templ_7745c5c3_Var29 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var29...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "<hgroup class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var30 string
-			templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var29).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var31 string
-				templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 127, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "</hgroup>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		default:
-			var templ_7745c5c3_Var32 = []any{BlockClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var32...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "<div class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var33 string
-			templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var32).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var34 string
-				templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/block/block.templ`, Line: 137, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, "</div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/box/Box.html.twig b/generated/ui/box/Box.html.twig
deleted file mode 100644
index 90a9fee..0000000
--- a/generated/ui/box/Box.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.box — Box renders a div layout wrapper. #}
-{% set uiTag = ui8kit_resolve_tag((tag|default('')), 'div', 'BoxAllowed') %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('boxClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</{{ uiTag }}>
diff --git a/generated/ui/box/Box.latte b/generated/ui/box/Box.latte
deleted file mode 100644
index a6ba9d7..0000000
--- a/generated/ui/box/Box.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.box — Box renders a div layout wrapper. *}
-{parameters
-  string $class = '',
-  string $tag = '',
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTag = \UI8Kit\Rt::resolveTag($tag, 'div', 'BoxAllowed')}
-<div n:tag="$uiTag" n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::boxClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/box/Box.svelte b/generated/ui/box/Box.svelte
deleted file mode 100644
index 8470653..0000000
--- a/generated/ui/box/Box.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Box renders a div layout wrapper.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type BoxProps = {
-    tag?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { boxClasses } from "./box.shared";
-  import { resolveTag, TagGroup } from "../../utils/tags";
-
-  let {
-    tag,
-    class: className,
-    children,
-    ...rest
-  }: BoxProps = $props();
-
-  const cls = $derived(boxClasses({ className }));
-  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.BoxAllowed));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</svelte:element>
diff --git a/generated/ui/box/Box.vue b/generated/ui/box/Box.vue
deleted file mode 100644
index efb38d8..0000000
--- a/generated/ui/box/Box.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Box renders a div layout wrapper.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { boxClasses } from "./box.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-defineOptions({ name: "Box", inheritAttrs: false });
-
-const props = defineProps<{
-  tag?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => boxClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => resolveTag(props.tag, "div", TagGroup.BoxAllowed));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </component>
-</template>
diff --git a/generated/ui/box/box.shared.ts b/generated/ui/box/box.shared.ts
deleted file mode 100644
index 4cdab94..0000000
--- a/generated/ui/box/box.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.box — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import boxRecipeJson from "./box.variants.json";
-
-export const boxRecipe = boxRecipeJson;
-
-/** Box renders a div layout wrapper. */
-export type BoxBaseProps = {
-  tag?: string;
-};
-
-export type BoxClassesInput = {
-  className?: string;
-};
-
-/** Compose Box classes without rendering — the cross-runtime `asChild` substitute. */
-export function boxClasses(input: BoxClassesInput = {}): string {
-  return cn(composeRecipe(boxRecipe, {  }), input.className);
-}
diff --git a/generated/ui/box/box.solid.tsx b/generated/ui/box/box.solid.tsx
deleted file mode 100644
index 371810e..0000000
--- a/generated/ui/box/box.solid.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Box is a generic layout wrapper for internal sections.
- * Not for top-level landmarks — use Block for page regions.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { boxClasses } from "./box.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-/**
- * Box renders a div layout wrapper.
- */
-export type BoxProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "tag"> & {
-  tag?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Box: Component<BoxProps> = (props) => {
-  const [local, rest] = splitProps(props, ["tag", "class", "className", "children"]);
-  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.BoxAllowed);
-  const cls = () => boxClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...rest}>
-      {local.children}
-    </Dynamic>
-  );
-};
diff --git a/generated/ui/box/box.tsx b/generated/ui/box/box.tsx
deleted file mode 100644
index 16fc2f9..0000000
--- a/generated/ui/box/box.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Box is a generic layout wrapper for internal sections.
- * Not for top-level landmarks — use Block for page regions.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
-import { boxClasses } from "./box.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-import { Slot } from "../slot/slot";
-
-/**
- * Box renders a div layout wrapper.
- */
-export type BoxProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
-  tag?: string;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Box = forwardRef<HTMLElement, BoxProps>(function Box(
-  { tag, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = boxClasses({ className });
-  const resolvedTagValue = resolveTag(tag, "div", TagGroup.BoxAllowed);
-  const Tag = resolvedTagValue as ElementType;
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
-      {children}
-    </Tag>
-  );
-});
-Box.displayName = "Box";
diff --git a/generated/ui/box/box.variants.json b/generated/ui/box/box.variants.json
deleted file mode 100644
index 6feadda..0000000
--- a/generated/ui/box/box.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.box",
-  "keys": []
-}
diff --git a/generated/ui/box/box_gen.go b/generated/ui/box/box_gen.go
deleted file mode 100644
index e6078b2..0000000
--- a/generated/ui/box/box_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package box
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed box.variants.json
-var boxVariantsJSON []byte
-
-// BoxVariants is the CVA recipe shared verbatim by all runtimes.
-var BoxVariants = uiutils.MustParseVariantRecipe(boxVariantsJSON).ToVariants()
diff --git a/generated/ui/box/box_templ.go b/generated/ui/box/box_templ.go
deleted file mode 100644
index 9a8099c..0000000
--- a/generated/ui/box/box_templ.go
+++ /dev/null
@@ -1,110 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Box is a generic layout wrapper for internal sections.
-
-
-Not for top-level landmarks — use Block for page regions.
-
-
-*/
-
-package box
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// BoxProps configures Box.
-type BoxProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Tag — div only. Use Block for landmarks (aside, section, header, nav).
-	Tag   string
-	Attrs templ.Attributes
-}
-
-// BoxClasses composes Box classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func BoxClasses(p BoxProps) string {
-	return uiutils.Compose(BoxVariants, map[string]string{}, p.Class)
-}
-
-// Box renders the Box contract.
-func Box(p BoxProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupBoxAllowed) {
-		default:
-			var templ_7745c5c3_Var2 = []any{BoxClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/box/box.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/breadcrumb/Breadcrumb.svelte b/generated/ui/breadcrumb/Breadcrumb.svelte
deleted file mode 100644
index eea8da7..0000000
--- a/generated/ui/breadcrumb/Breadcrumb.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Breadcrumb renders the full navigation trail.
--->
-<script lang="ts" module>
-  import type { BreadcrumbItem } from "./breadcrumb.shared";
-
-  export type BreadcrumbProps = {
-    items?: BreadcrumbItem[];
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { breadcrumbClasses } from "./breadcrumb.shared";
-  import { cn } from "../../utils";
-  import { isSetStr, orUndef } from "../../utils/expr";
-
-  let {
-    items,
-    class: className,
-    ...rest
-  }: BreadcrumbProps = $props();
-
-  const cls = $derived(breadcrumbClasses({ className }));
-</script>
-
-<nav {...(cls ? { class: cls } : {})} {...rest}>
-  <ol class="flex flex-wrap items-center gap-2">
-    {#each items ?? [] as item}
-      <li class="inline-flex items-center">
-        {#if (isSetStr(item.href) && !(item.disabled))}
-          <a href={orUndef(item.href)} {...((cn("text-sm", (item.current ? "font-medium" : (item.disabled ? "text-muted-foreground" : "text-primary underline-offset-4 hover:underline")))) ? { class: cn("text-sm", (item.current ? "font-medium" : (item.disabled ? "text-muted-foreground" : "text-primary underline-offset-4 hover:underline"))) } : {})} aria-current={item.current ? "page" : undefined}>{item.label}</a>
-        {:else}
-          <span {...((cn("text-sm", (item.current ? "font-medium" : (item.disabled ? "text-muted-foreground" : "text-primary underline-offset-4 hover:underline")))) ? { class: cn("text-sm", (item.current ? "font-medium" : (item.disabled ? "text-muted-foreground" : "text-primary underline-offset-4 hover:underline"))) } : {})} aria-current={item.current ? "page" : undefined}>{item.label}</span>
-        {/if}
-      </li>
-    {/each}
-  </ol>
-</nav>
diff --git a/generated/ui/breadcrumb/Breadcrumb.vue b/generated/ui/breadcrumb/Breadcrumb.vue
deleted file mode 100644
index 9d101a7..0000000
--- a/generated/ui/breadcrumb/Breadcrumb.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Breadcrumb renders the full navigation trail.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { breadcrumbClasses, type BreadcrumbItem } from "./breadcrumb.shared";
-import { cn } from "../../utils";
-import { isSetStr, orUndef } from "../../utils/expr";
-
-defineOptions({ name: "Breadcrumb", inheritAttrs: false });
-
-const props = defineProps<{
-  items?: BreadcrumbItem[];
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => breadcrumbClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <nav :class="cls || undefined" v-bind="restAttrs">
-    <ol class="flex flex-wrap items-center gap-2">
-      <li v-for="(item, index) in (props.items ?? [])" :key="index" class="inline-flex items-center">
-        <a v-if="(isSetStr(item.href) && !(item.disabled))" :href="orUndef(item.href)" :class="cn('text-sm', (item.current ? 'font-medium' : (item.disabled ? 'text-muted-foreground' : 'text-primary underline-offset-4 hover:underline'))) || undefined" :aria-current="item.current ? 'page' : undefined">
-          {{ item.label }}
-        </a>
-        <span v-else :class="cn('text-sm', (item.current ? 'font-medium' : (item.disabled ? 'text-muted-foreground' : 'text-primary underline-offset-4 hover:underline'))) || undefined" :aria-current="item.current ? 'page' : undefined">
-          {{ item.label }}
-        </span>
-      </li>
-    </ol>
-  </nav>
-</template>
diff --git a/generated/ui/breadcrumb/breadcrumb.shared.ts b/generated/ui/breadcrumb/breadcrumb.shared.ts
deleted file mode 100644
index a407ba6..0000000
--- a/generated/ui/breadcrumb/breadcrumb.shared.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.breadcrumb — shared TypeScript contract (types + classes helpers)
-
-import { cn } from "../../utils";
-
-export type BreadcrumbItem = {
-  label?: string;
-  href?: string;
-  current?: boolean;
-  disabled?: boolean;
-};
-
-/** Breadcrumb renders the full navigation trail. */
-export type BreadcrumbBaseProps = {
-  items?: BreadcrumbItem[];
-};
-
-export type BreadcrumbClassesInput = {
-  className?: string;
-};
-
-/** Compose Breadcrumb classes without rendering — the cross-runtime `asChild` substitute. */
-export function breadcrumbClasses(input: BreadcrumbClassesInput = {}): string {
-  return cn("text-sm", input.className);
-}
diff --git a/generated/ui/breadcrumb/breadcrumb.solid.tsx b/generated/ui/breadcrumb/breadcrumb.solid.tsx
deleted file mode 100644
index 6b54fb7..0000000
--- a/generated/ui/breadcrumb/breadcrumb.solid.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Breadcrumb shows the current page location within a hierarchy.
- * Renders nav with ordered links and aria-current on the active item.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { breadcrumbClasses, type BreadcrumbItem } from "./breadcrumb.shared";
-import { cn } from "../../utils";
-import { isSetStr, orUndef } from "../../utils/expr";
-
-/**
- * Breadcrumb renders the full navigation trail.
- */
-export type BreadcrumbProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "items"> & {
-  items?: BreadcrumbItem[];
-  class?: string;
-  className?: string;
-};
-
-export const Breadcrumb: Component<BreadcrumbProps> = (props) => {
-  const [local, rest] = splitProps(props, ["items", "class", "className"]);
-  const cls = () => breadcrumbClasses({ className: local.class ?? local.className });
-  return (
-    <nav class={cls() || undefined} {...rest}>
-      <ol class="flex flex-wrap items-center gap-2">
-        {(local.items ?? []).map((item, index) => (
-          <li class="inline-flex items-center">
-            {(isSetStr(item.href) && !(item.disabled)) ? (
-              <a href={orUndef(item.href)} class={cn("text-sm", (item.current ? "font-medium" : (item.disabled ? "text-muted-foreground" : "text-primary underline-offset-4 hover:underline"))) || undefined} aria-current={item.current ? "page" : undefined}>
-                {item.label}
-              </a>
-            ) : (
-              <span class={cn("text-sm", (item.current ? "font-medium" : (item.disabled ? "text-muted-foreground" : "text-primary underline-offset-4 hover:underline"))) || undefined} aria-current={item.current ? "page" : undefined}>
-                {item.label}
-              </span>
-            )}
-          </li>
-        ))}
-      </ol>
-    </nav>
-  );
-};
diff --git a/generated/ui/breadcrumb/breadcrumb.tsx b/generated/ui/breadcrumb/breadcrumb.tsx
deleted file mode 100644
index e1817af..0000000
--- a/generated/ui/breadcrumb/breadcrumb.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Breadcrumb shows the current page location within a hierarchy.
- * Renders nav with ordered links and aria-current on the active item.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
-import { breadcrumbClasses, type BreadcrumbItem } from "./breadcrumb.shared";
-import { cn } from "../../utils";
-import { isSetStr, orUndef } from "../../utils/expr";
-
-/**
- * Breadcrumb renders the full navigation trail.
- */
-export type BreadcrumbProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "items"> & {
-  items?: BreadcrumbItem[];
-  className?: string;
-};
-
-export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(
-  { items, className, ...rest },
-  ref
-) {
-  const cls = breadcrumbClasses({ className });
-  return (
-    <nav ref={ref} className={cls || undefined} {...rest}>
-      <ol className="flex flex-wrap items-center gap-2">
-        {(items ?? []).map((item, index) => (
-          <li key={index} className="inline-flex items-center">
-            {(isSetStr(item.href) && !(item.disabled)) ? (
-              <a href={orUndef(item.href)} className={cn("text-sm", (item.current ? "font-medium" : (item.disabled ? "text-muted-foreground" : "text-primary underline-offset-4 hover:underline"))) || undefined} aria-current={item.current ? "page" : undefined}>
-                {item.label}
-              </a>
-            ) : (
-              <span className={cn("text-sm", (item.current ? "font-medium" : (item.disabled ? "text-muted-foreground" : "text-primary underline-offset-4 hover:underline"))) || undefined} aria-current={item.current ? "page" : undefined}>
-                {item.label}
-              </span>
-            )}
-          </li>
-        ))}
-      </ol>
-    </nav>
-  );
-});
-Breadcrumb.displayName = "Breadcrumb";
diff --git a/generated/ui/breadcrumb/breadcrumb_templ.go b/generated/ui/breadcrumb/breadcrumb_templ.go
deleted file mode 100644
index 82f3cdf..0000000
--- a/generated/ui/breadcrumb/breadcrumb_templ.go
+++ /dev/null
@@ -1,304 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Breadcrumb shows the current page location within a hierarchy.
-
-
-Renders nav with ordered links and aria-current on the active item.
-
-
-*/
-
-package breadcrumb
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// BreadcrumbItem is one BreadcrumbItem entry.
-type BreadcrumbItem struct {
-	Label string
-	Href  string
-	// marks the active page (aria-current=page)
-	Current  bool
-	Disabled bool
-}
-
-// BreadcrumbProps configures Breadcrumb.
-type BreadcrumbProps struct {
-	// Class — adds Tailwind utilities
-	Class     string
-	Items     []BreadcrumbItem
-	AriaLabel string
-	// DataUI8Kit — opt-in behavior hook; empty emits nothing
-	DataUI8Kit string
-	Attrs      templ.Attributes
-}
-
-// BreadcrumbClasses composes Breadcrumb classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func BreadcrumbClasses(p BreadcrumbProps) string {
-	return uiutils.Cn("text-sm", p.Class)
-}
-
-// Breadcrumb renders the Breadcrumb contract.
-func Breadcrumb(p BreadcrumbProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{BreadcrumbClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<nav class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.AriaLabel) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " aria-label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 45, Col: 27}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.DataUI8Kit) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " data-ui8kit=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.DataUI8Kit)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 48, Col: 29}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "><ol class=\"flex flex-wrap items-center gap-2\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, item := range p.Items {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<li class=\"inline-flex items-center\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(item.Href) && !(item.Disabled) {
-				var templ_7745c5c3_Var6 = []any{uiutils.Cn("text-sm", uiutils.If(item.Current, "font-medium", uiutils.If(item.Disabled, "text-muted-foreground", "text-primary underline-offset-4 hover:underline")))}
-				templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<a")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				if uiutils.IsSetStr(item.Href) {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " href=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var7 templ.SafeURL
-					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinURLErrs(item.Href)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 62, Col: 24}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " class=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var8 string
-				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 1, Col: 0}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				if item.Current {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " aria-current=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var9 string
-					templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs("page")
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 66, Col: 29}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, ">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var10 string
-				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 69, Col: 19}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</a>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			} else {
-				var templ_7745c5c3_Var11 = []any{uiutils.Cn("text-sm", uiutils.If(item.Current, "font-medium", uiutils.If(item.Disabled, "text-muted-foreground", "text-primary underline-offset-4 hover:underline")))}
-				templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var11...)
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<span class=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var12 string
-				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var11).String())
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 1, Col: 0}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				if item.Current {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, " aria-current=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var13 string
-					templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs("page")
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 75, Col: 29}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, ">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var14 string
-				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/breadcrumb/breadcrumb.templ`, Line: 78, Col: 19}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</span>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</li>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</ol></nav>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/button/Button.html.twig b/generated/ui/button/Button.html.twig
deleted file mode 100644
index 3202b90..0000000
--- a/generated/ui/button/Button.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.button — Button renders a button element with variant classes. #}
-<button{{ ui8kit_attr_str({ 'type': ui8kit_one_of_or((type|default('')), 'button', ['submit', 'reset']), 'class': ui8kit_or_null(ui8kit_classes('buttonClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'disabled': (disabled|default(false)), 'class': (class|default('')) })), 'disabled': (disabled|default(false)), 'id': ui8kit_or_null((id|default(''))), 'form': ui8kit_or_null((form|default(''))), 'role': ui8kit_or_null((role|default(''))), 'tabindex': ui8kit_or_null((tabindex|default(''))), 'aria-label': ui8kit_or_null((ariaLabel|default(''))) }, attrs|default({})) }}>{{ children|default('')|raw }}</button>
diff --git a/generated/ui/button/Button.latte b/generated/ui/button/Button.latte
deleted file mode 100644
index 73fdbe7..0000000
--- a/generated/ui/button/Button.latte
+++ /dev/null
@@ -1,27 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.button — Button renders a button element with variant classes. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $type = '',
-  string $form = '',
-  bool $disabled = false,
-  string $id = '',
-  string $role = '',
-  string $tabindex = '',
-  string $ariaLabel = '',
-  array $attrs = [],
-  string $children = '',
-}
-<button n:attr="[
-  'type' => \UI8Kit\Rt::oneOfOr($type, 'button', 'submit', 'reset'),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::buttonClasses(['variant' => $variant, 'size' => $size, 'disabled' => $disabled, 'class' => $class])),
-  'disabled' => $disabled,
-  'id' => \UI8Kit\Rt::orNull($id),
-  'form' => \UI8Kit\Rt::orNull($form),
-  'role' => \UI8Kit\Rt::orNull($role),
-  'tabindex' => \UI8Kit\Rt::orNull($tabindex),
-  'aria-label' => \UI8Kit\Rt::orNull($ariaLabel),
-  ...$attrs,
-]">{$children|noescape}</button>
diff --git a/generated/ui/button/Button.svelte b/generated/ui/button/Button.svelte
deleted file mode 100644
index 83765a8..0000000
--- a/generated/ui/button/Button.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Button renders a button element, or an anchor when Href is set.
-  Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { ButtonSize, ButtonVariant } from "./button.shared";
-
-  export type ButtonProps = {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    type?: string;
-    href?: string;
-    target?: string;
-    rel?: string;
-    external?: boolean;
-    disabled?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { buttonClasses } from "./button.shared";
-  import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
-
-  let {
-    variant,
-    size,
-    type,
-    href,
-    target,
-    rel,
-    external,
-    disabled,
-    class: className,
-    children,
-    ...rest
-  }: ButtonProps = $props();
-
-  const cls = $derived(buttonClasses({ variant, size, disabled, className }));
-  const targetValue = $derived((isSetStr(target) ? target : (external ? "_blank" : "")));
-  const relValue = $derived((isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : "")));
-</script>
-
-{#if isSetStr(href)}
-  <a href={orUndef(href)} {...(cls ? { class: cls } : {})} target={orUndef(targetValue)} rel={orUndef(relValue)} aria-disabled={disabled ? "true" : undefined} tabindex={disabled ? -1 : undefined} {...rest}>
-    {@render children?.()}
-  </a>
-{:else}
-  <button type={oneOfOr(type, "button", "submit", "reset")} {...(cls ? { class: cls } : {})} disabled={disabled || undefined} {...rest}>
-    {@render children?.()}
-  </button>
-{/if}
diff --git a/generated/ui/button/Button.vue b/generated/ui/button/Button.vue
deleted file mode 100644
index 4b74fa9..0000000
--- a/generated/ui/button/Button.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Button renders a button element, or an anchor when Href is set.
-  Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { buttonClasses, type ButtonSize, type ButtonVariant } from "./button.shared";
-import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
-
-defineOptions({ name: "Button", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  type?: string;
-  href?: string;
-  target?: string;
-  rel?: string;
-  external?: boolean;
-  disabled?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => buttonClasses({ variant: props.variant, size: props.size, disabled: props.disabled, className: callerClass.value }));
-const targetValue = computed(() => (isSetStr(props.target) ? props.target : (props.external ? "_blank" : "")));
-const relValue = computed(() => (isSetStr(props.rel) ? props.rel : ((props.external || eqStr(targetValue.value, "_blank")) ? "noopener noreferrer" : "")));
-</script>
-
-<template>
-  <a v-if="isSetStr(props.href)" :href="orUndef(props.href)" :class="cls || undefined" :target="orUndef(targetValue)" :rel="orUndef(relValue)" :aria-disabled="props.disabled ? 'true' : undefined" :tabindex="props.disabled ? -1 : undefined" v-bind="restAttrs">
-    <slot />
-  </a>
-  <button v-else :type="oneOfOr(props.type, 'button', 'submit', 'reset')" :class="cls || undefined" :disabled="props.disabled || undefined" v-bind="restAttrs">
-    <slot />
-  </button>
-</template>
diff --git a/generated/ui/button/button.shared.ts b/generated/ui/button/button.shared.ts
deleted file mode 100644
index b575f0e..0000000
--- a/generated/ui/button/button.shared.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.button — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import buttonRecipeJson from "./button.variants.json";
-
-export const buttonRecipe = buttonRecipeJson;
-
-export type ButtonVariant = RecipeKey<typeof buttonRecipe, "variant">;
-export type ButtonSize = RecipeKey<typeof buttonRecipe, "size">;
-
-/** Button renders a button element, or an anchor when Href is set. */
-export type ButtonBaseProps = {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  type?: string;
-  href?: string;
-  target?: string;
-  rel?: string;
-  external?: boolean;
-  disabled?: boolean;
-};
-
-export type ButtonClassesInput = {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  disabled?: boolean;
-  className?: string;
-};
-
-/** Compose Button classes without rendering — the cross-runtime `asChild` substitute. */
-export function buttonClasses(input: ButtonClassesInput = {}): string {
-  return cn(composeRecipe(buttonRecipe, { variant: input.variant, size: input.size }), (input.disabled ? "pointer-events-none opacity-50" : ""), input.className);
-}
diff --git a/generated/ui/button/button.solid.tsx b/generated/ui/button/button.solid.tsx
deleted file mode 100644
index 9cffd63..0000000
--- a/generated/ui/button/button.solid.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Button triggers an action on click.
- * Optional Href renders an anchor with button appearance (CTA navigation).
- * For exotic roots, use ButtonClasses (Templ/Svelte/Vue/Solid) or asChild (React).
- * Prefer Link for prose/semantic navigation.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { buttonClasses, type ButtonSize, type ButtonVariant } from "./button.shared";
-import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
-
-/**
- * Button renders a button element, or an anchor when Href is set.
- * Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
- */
-export type ButtonProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "variant" | "size" | "type" | "href" | "target" | "rel" | "external" | "disabled"> & {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  type?: string;
-  href?: string;
-  target?: string;
-  rel?: string;
-  external?: boolean;
-  disabled?: boolean;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Button: Component<ButtonProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "type", "href", "target", "rel", "external", "disabled", "class", "className", "children"]);
-  const targetValue = () => (isSetStr(local.target) ? local.target : (local.external ? "_blank" : ""));
-  const relValue = () => (isSetStr(local.rel) ? local.rel : ((local.external || eqStr(targetValue(), "_blank")) ? "noopener noreferrer" : ""));
-  const cls = () => buttonClasses({ variant: local.variant, size: local.size, disabled: local.disabled, className: local.class ?? local.className });
-  return (
-    isSetStr(local.href) ? (
-      <a href={orUndef(local.href)} class={cls() || undefined} target={orUndef(targetValue())} rel={orUndef(relValue())} aria-disabled={local.disabled ? "true" : undefined} tabIndex={local.disabled ? -1 : undefined} {...rest}>
-        {local.children}
-      </a>
-    ) : (
-      <button type={oneOfOr(local.type, "button", "submit", "reset")} class={cls() || undefined} disabled={local.disabled || undefined} {...rest}>
-        {local.children}
-      </button>
-    )
-  );
-};
diff --git a/generated/ui/button/button.tsx b/generated/ui/button/button.tsx
deleted file mode 100644
index d771427..0000000
--- a/generated/ui/button/button.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Button triggers an action on click.
- * Optional Href renders an anchor with button appearance (CTA navigation).
- * For exotic roots, use ButtonClasses (Templ/Svelte/Vue/Solid) or asChild (React).
- * Prefer Link for prose/semantic navigation.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type Ref } from "react";
-import { buttonClasses, type ButtonSize, type ButtonVariant } from "./button.shared";
-import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
-import { Slot } from "../slot/slot";
-
-/**
- * Button renders a button element, or an anchor when Href is set.
- * Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
- */
-export type ButtonProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "variant" | "size" | "type" | "href" | "target" | "rel" | "external" | "disabled"> & {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  type?: string;
-  href?: string;
-  target?: string;
-  rel?: string;
-  external?: boolean;
-  disabled?: boolean;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(
-  { variant, size, type, href, target, rel, external, disabled, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = buttonClasses({ variant, size, disabled, className });
-  const targetValue = (isSetStr(target) ? target : (external ? "_blank" : ""));
-  const relValue = (isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : ""));
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    isSetStr(href) ? (
-      <a ref={ref as Ref<HTMLElement>} href={orUndef(href)} className={cls || undefined} target={orUndef(targetValue)} rel={orUndef(relValue)} aria-disabled={disabled ? "true" : undefined} tabIndex={disabled ? -1 : undefined} {...rest}>
-        {children}
-      </a>
-    ) : (
-      <button ref={ref as Ref<HTMLElement>} type={oneOfOr(type, "button", "submit", "reset")} className={cls || undefined} disabled={disabled || undefined} {...rest}>
-        {children}
-      </button>
-    )
-  );
-});
-Button.displayName = "Button";
diff --git a/generated/ui/button/button.variants.json b/generated/ui/button/button.variants.json
deleted file mode 100644
index b65cfe1..0000000
--- a/generated/ui/button/button.variants.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-9 px-4 py-2",
-      "icon": "h-9 w-9",
-      "lg": "h-10 rounded-md px-6",
-      "sm": "h-8 gap-1.5 rounded-md px-3"
-    },
-    "variant": {
-      "default": "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-      "destructive": "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
-      "ghost": "hover:bg-accent hover:text-accent-foreground",
-      "link": "text-primary underline-offset-4 hover:underline",
-      "outline": "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
-      "secondary": "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.button",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/button/button_gen.go b/generated/ui/button/button_gen.go
deleted file mode 100644
index 731c755..0000000
--- a/generated/ui/button/button_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package button
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed button.variants.json
-var buttonVariantsJSON []byte
-
-// ButtonVariants is the CVA recipe shared verbatim by all runtimes.
-var ButtonVariants = uiutils.MustParseVariantRecipe(buttonVariantsJSON).ToVariants()
diff --git a/generated/ui/button/button_templ.go b/generated/ui/button/button_templ.go
deleted file mode 100644
index 92abd86..0000000
--- a/generated/ui/button/button_templ.go
+++ /dev/null
@@ -1,461 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Button triggers an action on click.
-
-
-Optional Href renders an anchor with button appearance (CTA navigation).
-
-
-For exotic roots, use ButtonClasses (Templ/Svelte/Vue/Solid) or asChild (React).
-
-
-Prefer Link for prose/semantic navigation.
-
-
-*/
-
-package button
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"strconv"
-
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// ButtonProps configures Button.
-type ButtonProps struct {
-	// Variant — appearance preset: default, secondary, destructive, outline, ghost, link
-	Variant string
-	// Size — density preset: default, sm, lg, icon
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	// Type — button type: button, submit, reset (ignored when Href is set)
-	Type string
-	// Form — links button to a form id (ignored when Href is set)
-	Form string
-	// Href — when set, renders an anchor with button appearance
-	Href string
-	// Target — explicit target; External implies _blank (anchor mode)
-	Target string
-	// Rel — explicit rel; external links default to noopener noreferrer (anchor mode)
-	Rel string
-	// External — opens in a new tab with safe rel defaults (anchor mode)
-	External bool
-	// Disabled — blocks interaction
-	Disabled bool
-	// ID — element id
-	ID string
-	// Role — ARIA role override
-	Role string
-	// TabIndex — tab order override
-	TabIndex string
-	// AriaLabel — accessible name for unlabeled controls
-	AriaLabel string
-	Attrs     templ.Attributes
-}
-
-// ButtonClasses composes Button classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func ButtonClasses(p ButtonProps) string {
-	return uiutils.Compose(ButtonVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, uiutils.If(p.Disabled, "pointer-events-none opacity-50", ""), p.Class)
-}
-
-func buttonTarget(p ButtonProps) string {
-	return uiutils.If(uiutils.IsSetStr(p.Target), p.Target, uiutils.If(p.External, "_blank", ""))
-}
-
-func buttonRel(p ButtonProps) string {
-	return uiutils.If(uiutils.IsSetStr(p.Rel), p.Rel, uiutils.If((p.External || buttonTarget(p) == "_blank"), "noopener noreferrer", ""))
-}
-
-// Button renders the Button contract.
-func Button(p ButtonProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		if uiutils.IsSetStr(p.Href) {
-			var templ_7745c5c3_Var2 = []any{ButtonClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<a")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.Href) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " href=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var3 templ.SafeURL
-				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinURLErrs(p.Href)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 73, Col: 17}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var5 string
-				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 77, Col: 13}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(buttonTarget(p)) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " target=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var6 string
-				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(buttonTarget(p))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 80, Col: 28}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(buttonRel(p)) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " rel=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var7 string
-				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(buttonRel(p))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 83, Col: 22}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(p.Role) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " role=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var8 string
-				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.Role)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 86, Col: 17}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(p.AriaLabel) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " aria-label=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var9 string
-				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 89, Col: 28}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if p.Disabled {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " aria-disabled=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var10 string
-				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs("true")
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 92, Col: 26}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if p.Disabled {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, " tabindex=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var11 string
-				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(-1))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 95, Col: 31}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</a>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		} else {
-			var templ_7745c5c3_Var12 = []any{ButtonClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var12...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<button type=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.OneOfOr(p.Type, "button", "submit", "reset"))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 103, Col: 62}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\" class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var14 string
-			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var12).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if p.Disabled {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, " disabled")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(p.ID) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, " id=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var15 string
-				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 107, Col: 13}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(p.Form) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, " form=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var16 string
-				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(p.Form)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 110, Col: 17}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(p.Role) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, " role=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var17 string
-				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(p.Role)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 113, Col: 17}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(p.TabIndex) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, " tabindex=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var18 string
-				templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(p.TabIndex)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 116, Col: 25}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(p.AriaLabel) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, " aria-label=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var19 string
-				templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/button/button.templ`, Line: 119, Col: 28}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</button>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/card/Card.html.twig b/generated/ui/card/Card.html.twig
deleted file mode 100644
index 658d7a7..0000000
--- a/generated/ui/card/Card.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.card — Card renders the bordered surface wrapper. #}
-<div{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('cardClasses', { 'variant': (variant|default('')), 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</div>
diff --git a/generated/ui/card/Card.latte b/generated/ui/card/Card.latte
deleted file mode 100644
index 32c2e18..0000000
--- a/generated/ui/card/Card.latte
+++ /dev/null
@@ -1,12 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.card — Card renders the bordered surface wrapper. *}
-{parameters
-  string $class = '',
-  string $variant = '',
-  array $attrs = [],
-  string $children = '',
-}
-<div n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::cardClasses(['variant' => $variant, 'class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/card/Card.svelte b/generated/ui/card/Card.svelte
deleted file mode 100644
index c84fe3d..0000000
--- a/generated/ui/card/Card.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Card renders the bordered surface wrapper.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { CardVariant } from "./card.shared";
-
-  export type CardProps = {
-    variant?: CardVariant;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { cardClasses } from "./card.shared";
-
-  let {
-    variant,
-    class: className,
-    children,
-    ...rest
-  }: CardProps = $props();
-
-  const cls = $derived(cardClasses({ variant, className }));
-</script>
-
-<div {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</div>
diff --git a/generated/ui/card/Card.vue b/generated/ui/card/Card.vue
deleted file mode 100644
index 467f5f0..0000000
--- a/generated/ui/card/Card.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Card renders the bordered surface wrapper.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { cardClasses, type CardVariant } from "./card.shared";
-
-defineOptions({ name: "Card", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: CardVariant;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => cardClasses({ variant: props.variant, className: callerClass.value }));
-</script>
-
-<template>
-  <div :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </div>
-</template>
diff --git a/generated/ui/card/CardContent.html.twig b/generated/ui/card/CardContent.html.twig
deleted file mode 100644
index 7f5f7c0..0000000
--- a/generated/ui/card/CardContent.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.card — CardContent renders the padded main body slot. #}
-<div{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('cardContentClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</div>
diff --git a/generated/ui/card/CardContent.latte b/generated/ui/card/CardContent.latte
deleted file mode 100644
index c8fc2dc..0000000
--- a/generated/ui/card/CardContent.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.card — CardContent renders the padded main body slot. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<div n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::cardContentClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/card/CardContent.svelte b/generated/ui/card/CardContent.svelte
deleted file mode 100644
index 0a28f84..0000000
--- a/generated/ui/card/CardContent.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardContent renders the padded main body slot.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type CardContentProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { cardContentClasses } from "./card.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: CardContentProps = $props();
-
-  const cls = $derived(cardContentClasses({ className }));
-</script>
-
-<div {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</div>
diff --git a/generated/ui/card/CardContent.vue b/generated/ui/card/CardContent.vue
deleted file mode 100644
index 466ee72..0000000
--- a/generated/ui/card/CardContent.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardContent renders the padded main body slot.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { cardContentClasses } from "./card.shared";
-
-defineOptions({ name: "CardContent", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => cardContentClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <div :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </div>
-</template>
diff --git a/generated/ui/card/CardDescription.html.twig b/generated/ui/card/CardDescription.html.twig
deleted file mode 100644
index add38b0..0000000
--- a/generated/ui/card/CardDescription.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.card — CardDescription renders a muted subtitle in a p element. #}
-<p{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('cardDescriptionClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</p>
diff --git a/generated/ui/card/CardDescription.latte b/generated/ui/card/CardDescription.latte
deleted file mode 100644
index 1f5d9c0..0000000
--- a/generated/ui/card/CardDescription.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.card — CardDescription renders a muted subtitle in a p element. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<p n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::cardDescriptionClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</p>
diff --git a/generated/ui/card/CardDescription.svelte b/generated/ui/card/CardDescription.svelte
deleted file mode 100644
index f02de0d..0000000
--- a/generated/ui/card/CardDescription.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardDescription renders a muted subtitle in a p element.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type CardDescriptionProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { cardDescriptionClasses } from "./card.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: CardDescriptionProps = $props();
-
-  const cls = $derived(cardDescriptionClasses({ className }));
-</script>
-
-<p {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</p>
diff --git a/generated/ui/card/CardDescription.vue b/generated/ui/card/CardDescription.vue
deleted file mode 100644
index a9bab54..0000000
--- a/generated/ui/card/CardDescription.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardDescription renders a muted subtitle in a p element.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { cardDescriptionClasses } from "./card.shared";
-
-defineOptions({ name: "CardDescription", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => cardDescriptionClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <p :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </p>
-</template>
diff --git a/generated/ui/card/CardFooter.html.twig b/generated/ui/card/CardFooter.html.twig
deleted file mode 100644
index 96eda53..0000000
--- a/generated/ui/card/CardFooter.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.card — CardFooter renders the bottom action slot. #}
-<div{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('cardFooterClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</div>
diff --git a/generated/ui/card/CardFooter.latte b/generated/ui/card/CardFooter.latte
deleted file mode 100644
index d5557f3..0000000
--- a/generated/ui/card/CardFooter.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.card — CardFooter renders the bottom action slot. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<div n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::cardFooterClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/card/CardFooter.svelte b/generated/ui/card/CardFooter.svelte
deleted file mode 100644
index a9ada19..0000000
--- a/generated/ui/card/CardFooter.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardFooter renders the bottom action slot.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type CardFooterProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { cardFooterClasses } from "./card.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: CardFooterProps = $props();
-
-  const cls = $derived(cardFooterClasses({ className }));
-</script>
-
-<div {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</div>
diff --git a/generated/ui/card/CardFooter.vue b/generated/ui/card/CardFooter.vue
deleted file mode 100644
index 824562a..0000000
--- a/generated/ui/card/CardFooter.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardFooter renders the bottom action slot.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { cardFooterClasses } from "./card.shared";
-
-defineOptions({ name: "CardFooter", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => cardFooterClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <div :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </div>
-</template>
diff --git a/generated/ui/card/CardHeader.html.twig b/generated/ui/card/CardHeader.html.twig
deleted file mode 100644
index 5dc0e52..0000000
--- a/generated/ui/card/CardHeader.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.card — CardHeader renders the top slot. #}
-<div{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('cardHeaderClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</div>
diff --git a/generated/ui/card/CardHeader.latte b/generated/ui/card/CardHeader.latte
deleted file mode 100644
index e5e8840..0000000
--- a/generated/ui/card/CardHeader.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.card — CardHeader renders the top slot. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<div n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::cardHeaderClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/card/CardHeader.svelte b/generated/ui/card/CardHeader.svelte
deleted file mode 100644
index 27c9be0..0000000
--- a/generated/ui/card/CardHeader.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardHeader renders the top slot.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type CardHeaderProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { cardHeaderClasses } from "./card.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: CardHeaderProps = $props();
-
-  const cls = $derived(cardHeaderClasses({ className }));
-</script>
-
-<div {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</div>
diff --git a/generated/ui/card/CardHeader.vue b/generated/ui/card/CardHeader.vue
deleted file mode 100644
index dfb7a7f..0000000
--- a/generated/ui/card/CardHeader.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardHeader renders the top slot.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { cardHeaderClasses } from "./card.shared";
-
-defineOptions({ name: "CardHeader", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => cardHeaderClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <div :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </div>
-</template>
diff --git a/generated/ui/card/CardTitle.html.twig b/generated/ui/card/CardTitle.html.twig
deleted file mode 100644
index 56d527a..0000000
--- a/generated/ui/card/CardTitle.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.card — CardTitle renders heading text at the As level (default h2). #}
-{% set uiTag = ui8kit_title_tag((as|default(0))) %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('cardTitleClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</{{ uiTag }}>
diff --git a/generated/ui/card/CardTitle.latte b/generated/ui/card/CardTitle.latte
deleted file mode 100644
index 5bead98..0000000
--- a/generated/ui/card/CardTitle.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.card — CardTitle renders heading text at the As level (default h2). *}
-{parameters
-  string $class = '',
-  int $as = 0,
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTag = \UI8Kit\Rt::titleTag($as)}
-<h2 n:tag="$uiTag" n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::cardTitleClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</h2>
diff --git a/generated/ui/card/CardTitle.svelte b/generated/ui/card/CardTitle.svelte
deleted file mode 100644
index 729d315..0000000
--- a/generated/ui/card/CardTitle.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardTitle renders heading text at the As level (default h2).
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type CardTitleProps = {
-    as?: 1 | 2 | 3 | 4 | 5 | 6;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { cardTitleClasses } from "./card.shared";
-  import { titleTag } from "../../utils/expr";
-
-  let {
-    as,
-    class: className,
-    children,
-    ...rest
-  }: CardTitleProps = $props();
-
-  const cls = $derived(cardTitleClasses({ className }));
-  const resolvedTagValue = $derived(titleTag(as));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</svelte:element>
diff --git a/generated/ui/card/CardTitle.vue b/generated/ui/card/CardTitle.vue
deleted file mode 100644
index 2d9ec12..0000000
--- a/generated/ui/card/CardTitle.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  CardTitle renders heading text at the As level (default h2).
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { cardTitleClasses } from "./card.shared";
-import { titleTag } from "../../utils/expr";
-
-defineOptions({ name: "CardTitle", inheritAttrs: false });
-
-const props = defineProps<{
-  as?: 1 | 2 | 3 | 4 | 5 | 6;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => cardTitleClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => titleTag(props.as));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </component>
-</template>
diff --git a/generated/ui/card/card.shared.ts b/generated/ui/card/card.shared.ts
deleted file mode 100644
index 56a1b09..0000000
--- a/generated/ui/card/card.shared.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.card — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import cardRecipeJson from "./card.variants.json";
-
-export const cardRecipe = cardRecipeJson;
-
-export type CardVariant = RecipeKey<typeof cardRecipe, "variant">;
-
-/** Card renders the bordered surface wrapper. */
-export type CardBaseProps = {
-  variant?: CardVariant;
-};
-
-export type CardClassesInput = {
-  variant?: CardVariant;
-  className?: string;
-};
-
-/** Compose Card classes without rendering — the cross-runtime `asChild` substitute. */
-export function cardClasses(input: CardClassesInput = {}): string {
-  return cn(composeRecipe(cardRecipe, { variant: input.variant }), input.className);
-}
-
-/** CardHeader renders the top slot. */
-export type CardHeaderBaseProps = {
-
-};
-
-export type CardHeaderClassesInput = {
-  className?: string;
-};
-
-/** Compose CardHeader classes without rendering — the cross-runtime `asChild` substitute. */
-export function cardHeaderClasses(input: CardHeaderClassesInput = {}): string {
-  return cn("grid auto-rows-min items-start gap-1.5 px-6", input.className);
-}
-
-/** CardTitle renders heading text at the As level (default h2). */
-export type CardTitleBaseProps = {
-  as?: 1 | 2 | 3 | 4 | 5 | 6;
-};
-
-export type CardTitleClassesInput = {
-  className?: string;
-};
-
-/** Compose CardTitle classes without rendering — the cross-runtime `asChild` substitute. */
-export function cardTitleClasses(input: CardTitleClassesInput = {}): string {
-  return cn("font-semibold leading-none", input.className);
-}
-
-/** CardDescription renders a muted subtitle in a p element. */
-export type CardDescriptionBaseProps = {
-
-};
-
-export type CardDescriptionClassesInput = {
-  className?: string;
-};
-
-/** Compose CardDescription classes without rendering — the cross-runtime `asChild` substitute. */
-export function cardDescriptionClasses(input: CardDescriptionClassesInput = {}): string {
-  return cn("text-sm text-muted-foreground", input.className);
-}
-
-/** CardContent renders the padded main body slot. */
-export type CardContentBaseProps = {
-
-};
-
-export type CardContentClassesInput = {
-  className?: string;
-};
-
-/** Compose CardContent classes without rendering — the cross-runtime `asChild` substitute. */
-export function cardContentClasses(input: CardContentClassesInput = {}): string {
-  return cn("px-6", input.className);
-}
-
-/** CardFooter renders the bottom action slot. */
-export type CardFooterBaseProps = {
-
-};
-
-export type CardFooterClassesInput = {
-  className?: string;
-};
-
-/** Compose CardFooter classes without rendering — the cross-runtime `asChild` substitute. */
-export function cardFooterClasses(input: CardFooterClassesInput = {}): string {
-  return cn("flex items-center px-6", input.className);
-}
diff --git a/generated/ui/card/card.solid.tsx b/generated/ui/card/card.solid.tsx
deleted file mode 100644
index 4dc6134..0000000
--- a/generated/ui/card/card.solid.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Card groups related content in one bordered surface.
- * Card uses header, content, and footer slots.
- * For semantic root elements (section, article), use CardClasses on a manual wrapper.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { cardClasses, cardContentClasses, cardDescriptionClasses, cardFooterClasses, cardHeaderClasses, cardTitleClasses, type CardVariant } from "./card.shared";
-import { titleTag } from "../../utils/expr";
-
-/**
- * Card renders the bordered surface wrapper.
- */
-export type CardProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "className" | "children" | "variant"> & {
-  variant?: CardVariant;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Card: Component<CardProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "class", "className", "children"]);
-  const cls = () => cardClasses({ variant: local.variant, className: local.class ?? local.className });
-  return (
-    <div class={cls() || undefined} {...rest}>
-      {local.children}
-    </div>
-  );
-};
-
-/**
- * CardHeader renders the top slot.
- */
-export type CardHeaderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const CardHeader: Component<CardHeaderProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => cardHeaderClasses({ className: local.class ?? local.className });
-  return (
-    <div class={cls() || undefined} {...rest}>
-      {local.children}
-    </div>
-  );
-};
-
-/**
- * CardTitle renders heading text at the As level (default h2).
- */
-export type CardTitleProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "as"> & {
-  as?: 1 | 2 | 3 | 4 | 5 | 6;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const CardTitle: Component<CardTitleProps> = (props) => {
-  const [local, rest] = splitProps(props, ["as", "class", "className", "children"]);
-  const resolvedTagValue = () => titleTag(local.as);
-  const cls = () => cardTitleClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...rest}>
-      {local.children}
-    </Dynamic>
-  );
-};
-
-/**
- * CardDescription renders a muted subtitle in a p element.
- */
-export type CardDescriptionProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const CardDescription: Component<CardDescriptionProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => cardDescriptionClasses({ className: local.class ?? local.className });
-  return (
-    <p class={cls() || undefined} {...rest}>
-      {local.children}
-    </p>
-  );
-};
-
-/**
- * CardContent renders the padded main body slot.
- */
-export type CardContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const CardContent: Component<CardContentProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => cardContentClasses({ className: local.class ?? local.className });
-  return (
-    <div class={cls() || undefined} {...rest}>
-      {local.children}
-    </div>
-  );
-};
-
-/**
- * CardFooter renders the bottom action slot.
- */
-export type CardFooterProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const CardFooter: Component<CardFooterProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => cardFooterClasses({ className: local.class ?? local.className });
-  return (
-    <div class={cls() || undefined} {...rest}>
-      {local.children}
-    </div>
-  );
-};
diff --git a/generated/ui/card/card.tsx b/generated/ui/card/card.tsx
deleted file mode 100644
index 64fbe53..0000000
--- a/generated/ui/card/card.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Card groups related content in one bordered surface.
- * Card uses header, content, and footer slots.
- * For semantic root elements (section, article), use CardClasses on a manual wrapper.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
-import { cardClasses, cardContentClasses, cardDescriptionClasses, cardFooterClasses, cardHeaderClasses, cardTitleClasses, type CardVariant } from "./card.shared";
-import { titleTag } from "../../utils/expr";
-import { Slot } from "../slot/slot";
-
-/**
- * Card renders the bordered surface wrapper.
- */
-export type CardProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children" | "variant"> & {
-  variant?: CardVariant;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
-  { variant, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = cardClasses({ variant, className });
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <div ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </div>
-  );
-});
-Card.displayName = "Card";
-
-/**
- * CardHeader renders the top slot.
- */
-export type CardHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = cardHeaderClasses({ className });
-  return (
-    <div ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </div>
-  );
-});
-CardHeader.displayName = "CardHeader";
-
-/**
- * CardTitle renders heading text at the As level (default h2).
- */
-export type CardTitleProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "as"> & {
-  as?: 1 | 2 | 3 | 4 | 5 | 6;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const CardTitle = forwardRef<HTMLElement, CardTitleProps>(function CardTitle(
-  { as, className, children, ...rest },
-  ref
-) {
-  const cls = cardTitleClasses({ className });
-  const resolvedTagValue = titleTag(as);
-  const Tag = resolvedTagValue as ElementType;
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
-      {children}
-    </Tag>
-  );
-});
-CardTitle.displayName = "CardTitle";
-
-/**
- * CardDescription renders a muted subtitle in a p element.
- */
-export type CardDescriptionProps = Omit<HTMLAttributes<HTMLParagraphElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(function CardDescription(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = cardDescriptionClasses({ className });
-  return (
-    <p ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </p>
-  );
-});
-CardDescription.displayName = "CardDescription";
-
-/**
- * CardContent renders the padded main body slot.
- */
-export type CardContentProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function CardContent(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = cardContentClasses({ className });
-  return (
-    <div ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </div>
-  );
-});
-CardContent.displayName = "CardContent";
-
-/**
- * CardFooter renders the bottom action slot.
- */
-export type CardFooterProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = cardFooterClasses({ className });
-  return (
-    <div ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </div>
-  );
-});
-CardFooter.displayName = "CardFooter";
diff --git a/generated/ui/card/card.variants.json b/generated/ui/card/card.variants.json
deleted file mode 100644
index cdf3094..0000000
--- a/generated/ui/card/card.variants.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "id": "ui.card",
-  "base": "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
-  "keys": [
-    "variant"
-  ],
-  "defaults": {
-    "variant": "default"
-  },
-  "byKey": {
-    "variant": {
-      "default": "",
-      "raised": "",
-      "kpi": "bg-card/50",
-      "muted": "bg-muted/40",
-      "ghost": "border-dashed bg-background shadow-none",
-      "compact": "p-4",
-      "flat": "shadow-none",
-      "accent": "border-transparent bg-accent/30"
-    }
-  }
-}
diff --git a/generated/ui/card/card_gen.go b/generated/ui/card/card_gen.go
deleted file mode 100644
index a570149..0000000
--- a/generated/ui/card/card_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package card
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed card.variants.json
-var cardVariantsJSON []byte
-
-// CardVariants is the CVA recipe shared verbatim by all runtimes.
-var CardVariants = uiutils.MustParseVariantRecipe(cardVariantsJSON).ToVariants()
diff --git a/generated/ui/card/card_templ.go b/generated/ui/card/card_templ.go
deleted file mode 100644
index b8d0a6a..0000000
--- a/generated/ui/card/card_templ.go
+++ /dev/null
@@ -1,697 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Card groups related content in one bordered surface.
-
-
-Card uses header, content, and footer slots.
-
-
-For semantic root elements (section, article), use CardClasses on a manual wrapper.
-
-
-*/
-
-package card
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// CardProps configures Card.
-type CardProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Variant — surface preset: default, raised, kpi, muted, ghost, compact, flat, accent
-	Variant string
-	Attrs   templ.Attributes
-}
-
-// CardClasses composes Card classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func CardClasses(p CardProps) string {
-	return uiutils.Compose(CardVariants, map[string]string{
-		"variant": p.Variant,
-	}, p.Class)
-}
-
-// Card renders the Card contract.
-func Card(p CardProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{CardClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// CardHeaderProps configures CardHeader.
-type CardHeaderProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// CardHeaderClasses composes CardHeader classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func CardHeaderClasses(p CardHeaderProps) string {
-	return uiutils.Cn("border-b border-border px-4 py-2", p.Class)
-}
-
-// CardHeader renders the CardHeader contract.
-func CardHeader(p CardHeaderProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var4 == nil {
-			templ_7745c5c3_Var4 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var5 = []any{CardHeaderClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var5).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var4.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// CardTitleProps configures CardTitle.
-type CardTitleProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// As — maps to h1-h6 (default h2)
-	As    uiutils.HeadingLevel
-	Attrs templ.Attributes
-}
-
-// CardTitleClasses composes CardTitle classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func CardTitleClasses(p CardTitleProps) string {
-	return uiutils.Cn("text-sm font-semibold", p.Class)
-}
-
-// CardTitle renders the CardTitle contract.
-func CardTitle(p CardTitleProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var7 == nil {
-			templ_7745c5c3_Var7 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.TitleTag(p.As) {
-		case "h1":
-			var templ_7745c5c3_Var8 = []any{CardTitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<h1 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var8).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var7.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</h1>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "h3":
-			var templ_7745c5c3_Var10 = []any{CardTitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<h3 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var11 string
-			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var10).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var7.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</h3>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "h4":
-			var templ_7745c5c3_Var12 = []any{CardTitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var12...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<h4 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var12).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var7.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</h4>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "h5":
-			var templ_7745c5c3_Var14 = []any{CardTitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var14...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<h5 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var15 string
-			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var14).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var7.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</h5>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "h6":
-			var templ_7745c5c3_Var16 = []any{CardTitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var16...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<h6 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var17 string
-			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var16).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var7.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</h6>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		default:
-			var templ_7745c5c3_Var18 = []any{CardTitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var18...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<h2 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var19 string
-			templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var18).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var7.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</h2>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-// CardDescriptionProps configures CardDescription.
-type CardDescriptionProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// CardDescriptionClasses composes CardDescription classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func CardDescriptionClasses(p CardDescriptionProps) string {
-	return uiutils.Cn("text-sm text-muted-foreground", p.Class)
-}
-
-// CardDescription renders the CardDescription contract.
-func CardDescription(p CardDescriptionProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var20 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var20 == nil {
-			templ_7745c5c3_Var20 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var21 = []any{CardDescriptionClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var21...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<p class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var22 string
-		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var21).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var20.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</p>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// CardContentProps configures CardContent.
-type CardContentProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// CardContentClasses composes CardContent classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func CardContentClasses(p CardContentProps) string {
-	return uiutils.Cn("p-4", p.Class)
-}
-
-// CardContent renders the CardContent contract.
-func CardContent(p CardContentProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var23 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var23 == nil {
-			templ_7745c5c3_Var23 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var24 = []any{CardContentClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var24...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var25 string
-		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var24).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var23.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// CardFooterProps configures CardFooter.
-type CardFooterProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// CardFooterClasses composes CardFooter classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func CardFooterClasses(p CardFooterProps) string {
-	return uiutils.Cn("border-t border-border px-4 py-3", p.Class)
-}
-
-// CardFooter renders the CardFooter contract.
-func CardFooter(p CardFooterProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var26 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var26 == nil {
-			templ_7745c5c3_Var26 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var27 = []any{CardFooterClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var27...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var28 string
-		templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var27).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/card/card.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var26.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/checkbox/Checkbox.html.twig b/generated/ui/checkbox/Checkbox.html.twig
deleted file mode 100644
index 272d2f0..0000000
--- a/generated/ui/checkbox/Checkbox.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.checkbox — Checkbox renders a styled input[type=checkbox]. #}
-<input{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'type': 'checkbox', 'name': ui8kit_or_null((name|default(''))), 'value': ui8kit_or_null((value|default(''))), 'class': ui8kit_or_null(ui8kit_classes('checkboxClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'checked': (checked|default(false)), 'disabled': (disabled|default(false)), 'required': (required|default(false)), 'role': ui8kit_or_null((role|default(''))), 'tabindex': ui8kit_or_null((tabindex|default(''))), 'aria-label': ui8kit_or_null((ariaLabel|default(''))) }, attrs|default({})) }}>
diff --git a/generated/ui/checkbox/Checkbox.latte b/generated/ui/checkbox/Checkbox.latte
deleted file mode 100644
index 9c34518..0000000
--- a/generated/ui/checkbox/Checkbox.latte
+++ /dev/null
@@ -1,31 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.checkbox — Checkbox renders a styled input[type=checkbox]. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $name = '',
-  string $value = '',
-  bool $checked = false,
-  bool $disabled = false,
-  bool $required = false,
-  string $id = '',
-  string $role = '',
-  string $tabindex = '',
-  string $ariaLabel = '',
-  array $attrs = [],
-}
-<input n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'type' => 'checkbox',
-  'name' => \UI8Kit\Rt::orNull($name),
-  'value' => \UI8Kit\Rt::orNull($value),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::checkboxClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'checked' => $checked,
-  'disabled' => $disabled,
-  'required' => $required,
-  'role' => \UI8Kit\Rt::orNull($role),
-  'tabindex' => \UI8Kit\Rt::orNull($tabindex),
-  'aria-label' => \UI8Kit\Rt::orNull($ariaLabel),
-  ...$attrs,
-]">
diff --git a/generated/ui/checkbox/Checkbox.svelte b/generated/ui/checkbox/Checkbox.svelte
deleted file mode 100644
index a8004f1..0000000
--- a/generated/ui/checkbox/Checkbox.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Checkbox renders a styled input[type=checkbox].
--->
-<script lang="ts" module>
-  import type { CheckboxSize, CheckboxVariant } from "./checkbox.shared";
-
-  export type CheckboxProps = {
-    variant?: CheckboxVariant;
-    size?: CheckboxSize;
-    checked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { checkboxClasses } from "./checkbox.shared";
-
-  let {
-    variant,
-    size,
-    checked,
-    disabled,
-    required,
-    class: className,
-    ...rest
-  }: CheckboxProps = $props();
-
-  const cls = $derived(checkboxClasses({ variant, size, className }));
-</script>
-
-<input type="checkbox" {...(cls ? { class: cls } : {})} checked={checked || undefined} disabled={disabled || undefined} required={required || undefined} {...rest} />
diff --git a/generated/ui/checkbox/Checkbox.vue b/generated/ui/checkbox/Checkbox.vue
deleted file mode 100644
index 41baa42..0000000
--- a/generated/ui/checkbox/Checkbox.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Checkbox renders a styled input[type=checkbox].
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { checkboxClasses, type CheckboxSize, type CheckboxVariant } from "./checkbox.shared";
-
-defineOptions({ name: "Checkbox", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: CheckboxVariant;
-  size?: CheckboxSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => checkboxClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <input type="checkbox" :class="cls || undefined" :checked="props.checked || undefined" :disabled="props.disabled || undefined" :required="props.required || undefined" v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/checkbox/checkbox.shared.ts b/generated/ui/checkbox/checkbox.shared.ts
deleted file mode 100644
index 5cd454f..0000000
--- a/generated/ui/checkbox/checkbox.shared.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.checkbox — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import checkboxRecipeJson from "./checkbox.variants.json";
-
-export const checkboxRecipe = checkboxRecipeJson;
-
-export type CheckboxVariant = RecipeKey<typeof checkboxRecipe, "variant">;
-export type CheckboxSize = RecipeKey<typeof checkboxRecipe, "size">;
-
-/** Checkbox renders a styled input[type=checkbox]. */
-export type CheckboxBaseProps = {
-  variant?: CheckboxVariant;
-  size?: CheckboxSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-};
-
-export type CheckboxClassesInput = {
-  variant?: CheckboxVariant;
-  size?: CheckboxSize;
-  className?: string;
-};
-
-/** Compose Checkbox classes without rendering — the cross-runtime `asChild` substitute. */
-export function checkboxClasses(input: CheckboxClassesInput = {}): string {
-  return cn(composeRecipe(checkboxRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/checkbox/checkbox.solid.tsx b/generated/ui/checkbox/checkbox.solid.tsx
deleted file mode 100644
index fba96a0..0000000
--- a/generated/ui/checkbox/checkbox.solid.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Checkbox is a native boolean form control.
- * Wireframe styling via Variant and Size; supports standard ARIA attrs.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { checkboxClasses, type CheckboxSize, type CheckboxVariant } from "./checkbox.shared";
-
-/**
- * Checkbox renders a styled input[type=checkbox].
- */
-export type CheckboxProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "class" | "className" | "children" | "variant" | "size" | "checked" | "disabled" | "required"> & {
-  variant?: CheckboxVariant;
-  size?: CheckboxSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  class?: string;
-  className?: string;
-};
-
-export const Checkbox: Component<CheckboxProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "checked", "disabled", "required", "class", "className"]);
-  const cls = () => checkboxClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <input type="checkbox" class={cls() || undefined} checked={local.checked || undefined} disabled={local.disabled || undefined} required={local.required || undefined} {...rest} />
-  );
-};
diff --git a/generated/ui/checkbox/checkbox.tsx b/generated/ui/checkbox/checkbox.tsx
deleted file mode 100644
index a1ab7ab..0000000
--- a/generated/ui/checkbox/checkbox.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Checkbox is a native boolean form control.
- * Wireframe styling via Variant and Size; supports standard ARIA attrs.
- */
-
-import { forwardRef, type ReactNode, type InputHTMLAttributes } from "react";
-import { checkboxClasses, type CheckboxSize, type CheckboxVariant } from "./checkbox.shared";
-
-/**
- * Checkbox renders a styled input[type=checkbox].
- */
-export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "children" | "variant" | "size" | "checked" | "disabled" | "required"> & {
-  variant?: CheckboxVariant;
-  size?: CheckboxSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  className?: string;
-};
-
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
-  { variant, size, checked, disabled, required, className, ...rest },
-  ref
-) {
-  const cls = checkboxClasses({ variant, size, className });
-  return (
-    <input ref={ref} type="checkbox" className={cls || undefined} checked={checked || undefined} disabled={disabled || undefined} required={required || undefined} {...rest} />
-  );
-});
-Checkbox.displayName = "Checkbox";
diff --git a/generated/ui/checkbox/checkbox.variants.json b/generated/ui/checkbox/checkbox.variants.json
deleted file mode 100644
index e9cc01c..0000000
--- a/generated/ui/checkbox/checkbox.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-4 w-4",
-      "lg": "h-5 w-5",
-      "sm": "h-4 w-4",
-      "xs": "h-3 w-3"
-    },
-    "variant": {
-      "default": "border-primary",
-      "ghost": "border-primary bg-muted/30",
-      "outline": "border-primary"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.checkbox",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/checkbox/checkbox_gen.go b/generated/ui/checkbox/checkbox_gen.go
deleted file mode 100644
index a3e53b8..0000000
--- a/generated/ui/checkbox/checkbox_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package checkbox
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed checkbox.variants.json
-var checkboxVariantsJSON []byte
-
-// CheckboxVariants is the CVA recipe shared verbatim by all runtimes.
-var CheckboxVariants = uiutils.MustParseVariantRecipe(checkboxVariantsJSON).ToVariants()
diff --git a/generated/ui/checkbox/checkbox_templ.go b/generated/ui/checkbox/checkbox_templ.go
deleted file mode 100644
index 2f42c06..0000000
--- a/generated/ui/checkbox/checkbox_templ.go
+++ /dev/null
@@ -1,257 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Checkbox is a native boolean form control.
-
-
-Wireframe styling via Variant and Size; supports standard ARIA attrs.
-
-
-*/
-
-package checkbox
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// CheckboxProps configures Checkbox.
-type CheckboxProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class    string
-	Name     string
-	Value    string
-	Checked  bool
-	Disabled bool
-	Required bool
-	// ID — element id
-	ID string
-	// Role — ARIA role override
-	Role string
-	// TabIndex — tab order override
-	TabIndex string
-	// AriaLabel — accessible name for unlabeled controls
-	AriaLabel string
-	Attrs     templ.Attributes
-}
-
-// CheckboxClasses composes Checkbox classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func CheckboxClasses(p CheckboxProps) string {
-	return uiutils.Compose(CheckboxVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Checkbox renders the Checkbox contract.
-func Checkbox(p CheckboxProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{CheckboxClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<input")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/checkbox/checkbox.templ`, Line: 51, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " type=\"checkbox\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Name) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/checkbox/checkbox.templ`, Line: 55, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Value) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/checkbox/checkbox.templ`, Line: 58, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/checkbox/checkbox.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if p.Checked {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " checked")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Required {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " required")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Role) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " role=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.Role)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/checkbox/checkbox.templ`, Line: 65, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.TabIndex) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " tabindex=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.TabIndex)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/checkbox/checkbox.templ`, Line: 68, Col: 24}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaLabel) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, " aria-label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/checkbox/checkbox.templ`, Line: 71, Col: 27}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/container/Container.html.twig b/generated/ui/container/Container.html.twig
deleted file mode 100644
index 4454ec6..0000000
--- a/generated/ui/container/Container.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.container — Container renders the outer content shell. #}
-{% set uiTag = ui8kit_resolve_tag((tag|default('')), 'div', 'Container') %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('containerClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</{{ uiTag }}>
diff --git a/generated/ui/container/Container.latte b/generated/ui/container/Container.latte
deleted file mode 100644
index 50fb502..0000000
--- a/generated/ui/container/Container.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.container — Container renders the outer content shell. *}
-{parameters
-  string $class = '',
-  string $tag = '',
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTag = \UI8Kit\Rt::resolveTag($tag, 'div', 'Container')}
-<div n:tag="$uiTag" n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::containerClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/container/Container.svelte b/generated/ui/container/Container.svelte
deleted file mode 100644
index 2b3379b..0000000
--- a/generated/ui/container/Container.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Container renders the outer content shell.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type ContainerProps = {
-    tag?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { containerClasses } from "./container.shared";
-  import { resolveTag, TagGroup } from "../../utils/tags";
-
-  let {
-    tag,
-    class: className,
-    children,
-    ...rest
-  }: ContainerProps = $props();
-
-  const cls = $derived(containerClasses({ className }));
-  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.Container));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</svelte:element>
diff --git a/generated/ui/container/Container.vue b/generated/ui/container/Container.vue
deleted file mode 100644
index 1ceda38..0000000
--- a/generated/ui/container/Container.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Container renders the outer content shell.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { containerClasses } from "./container.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-defineOptions({ name: "Container", inheritAttrs: false });
-
-const props = defineProps<{
-  tag?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => containerClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => resolveTag(props.tag, "div", TagGroup.Container));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </component>
-</template>
diff --git a/generated/ui/container/container.shared.ts b/generated/ui/container/container.shared.ts
deleted file mode 100644
index 5182141..0000000
--- a/generated/ui/container/container.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.container — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import containerRecipeJson from "./container.variants.json";
-
-export const containerRecipe = containerRecipeJson;
-
-/** Container renders the outer content shell. */
-export type ContainerBaseProps = {
-  tag?: string;
-};
-
-export type ContainerClassesInput = {
-  className?: string;
-};
-
-/** Compose Container classes without rendering — the cross-runtime `asChild` substitute. */
-export function containerClasses(input: ContainerClassesInput = {}): string {
-  return cn(composeRecipe(containerRecipe, {  }), input.className);
-}
diff --git a/generated/ui/container/container.solid.tsx b/generated/ui/container/container.solid.tsx
deleted file mode 100644
index 51e3e9a..0000000
--- a/generated/ui/container/container.solid.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Container wraps page content with a constrained width shell.
- * Optional main or section tag for inner layout regions.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { containerClasses } from "./container.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-/**
- * Container renders the outer content shell.
- */
-export type ContainerProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "tag"> & {
-  tag?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Container: Component<ContainerProps> = (props) => {
-  const [local, rest] = splitProps(props, ["tag", "class", "className", "children"]);
-  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.Container);
-  const cls = () => containerClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...rest}>
-      {local.children}
-    </Dynamic>
-  );
-};
diff --git a/generated/ui/container/container.tsx b/generated/ui/container/container.tsx
deleted file mode 100644
index dd367c6..0000000
--- a/generated/ui/container/container.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Container wraps page content with a constrained width shell.
- * Optional main or section tag for inner layout regions.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
-import { containerClasses } from "./container.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-import { Slot } from "../slot/slot";
-
-/**
- * Container renders the outer content shell.
- */
-export type ContainerProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
-  tag?: string;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Container = forwardRef<HTMLElement, ContainerProps>(function Container(
-  { tag, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = containerClasses({ className });
-  const resolvedTagValue = resolveTag(tag, "div", TagGroup.Container);
-  const Tag = resolvedTagValue as ElementType;
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
-      {children}
-    </Tag>
-  );
-});
-Container.displayName = "Container";
diff --git a/generated/ui/container/container.variants.json b/generated/ui/container/container.variants.json
deleted file mode 100644
index 017083a..0000000
--- a/generated/ui/container/container.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.container",
-  "keys": []
-}
diff --git a/generated/ui/container/container_gen.go b/generated/ui/container/container_gen.go
deleted file mode 100644
index a17b2a9..0000000
--- a/generated/ui/container/container_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package container
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed container.variants.json
-var containerVariantsJSON []byte
-
-// ContainerVariants is the CVA recipe shared verbatim by all runtimes.
-var ContainerVariants = uiutils.MustParseVariantRecipe(containerVariantsJSON).ToVariants()
diff --git a/generated/ui/container/container_templ.go b/generated/ui/container/container_templ.go
deleted file mode 100644
index 4d4bc20..0000000
--- a/generated/ui/container/container_templ.go
+++ /dev/null
@@ -1,188 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Container wraps page content with a constrained width shell.
-
-
-Optional main or section tag for inner layout regions.
-
-
-*/
-
-package container
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// ContainerProps configures Container.
-type ContainerProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Tag — div, main, or section
-	Tag   string
-	Attrs templ.Attributes
-}
-
-// ContainerClasses composes Container classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func ContainerClasses(p ContainerProps) string {
-	return uiutils.Compose(ContainerVariants, map[string]string{}, p.Class)
-}
-
-// Container renders the Container contract.
-func Container(p ContainerProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupContainer) {
-		case "main":
-			var templ_7745c5c3_Var2 = []any{ContainerClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<main class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/container/container.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</main>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "section":
-			var templ_7745c5c3_Var4 = []any{ContainerClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<section class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var4).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/container/container.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</section>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		default:
-			var templ_7745c5c3_Var6 = []any{ContainerClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/container/container.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/dialog/Dialog.html.twig b/generated/ui/dialog/Dialog.html.twig
deleted file mode 100644
index 9b48ea6..0000000
--- a/generated/ui/dialog/Dialog.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.dialog — Dialog renders a native dialog element. #}
-<dialog{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('dialogClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'open': (open|default(false)), 'id': ui8kit_or_null((id|default(''))), 'data-ui8kit': ui8kit_or_null((dataUi8kit|default(''))), 'aria-label': ui8kit_or_null((ariaLabel|default(''))), 'aria-labelledby': ui8kit_or_null((ariaLabelledBy|default(''))), 'aria-describedby': ui8kit_or_null((ariaDescribedBy|default(''))) }, attrs|default({})) }}>{{ children|default('')|raw }}</dialog>
diff --git a/generated/ui/dialog/Dialog.latte b/generated/ui/dialog/Dialog.latte
deleted file mode 100644
index 25472e0..0000000
--- a/generated/ui/dialog/Dialog.latte
+++ /dev/null
@@ -1,25 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.dialog — Dialog renders a native dialog element. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $id = '',
-  bool $open = false,
-  string $dataUi8kit = '',
-  string $ariaLabel = '',
-  string $ariaLabelledBy = '',
-  string $ariaDescribedBy = '',
-  array $attrs = [],
-  string $children = '',
-}
-<dialog n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::dialogClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'open' => $open,
-  'id' => \UI8Kit\Rt::orNull($id),
-  'data-ui8kit' => \UI8Kit\Rt::orNull($dataUi8kit),
-  'aria-label' => \UI8Kit\Rt::orNull($ariaLabel),
-  'aria-labelledby' => \UI8Kit\Rt::orNull($ariaLabelledBy),
-  'aria-describedby' => \UI8Kit\Rt::orNull($ariaDescribedBy),
-  ...$attrs,
-]">{$children|noescape}</dialog>
diff --git a/generated/ui/dialog/Dialog.svelte b/generated/ui/dialog/Dialog.svelte
deleted file mode 100644
index f4be7ee..0000000
--- a/generated/ui/dialog/Dialog.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Dialog renders a native dialog element.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { DialogSize, DialogVariant } from "./dialog.shared";
-
-  export type DialogProps = {
-    variant?: DialogVariant;
-    size?: DialogSize;
-    open?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { dialogClasses } from "./dialog.shared";
-
-  let {
-    variant,
-    size,
-    open,
-    class: className,
-    children,
-    ...rest
-  }: DialogProps = $props();
-
-  const cls = $derived(dialogClasses({ variant, size, className }));
-</script>
-
-<dialog {...(cls ? { class: cls } : {})} open={open || undefined} {...rest}>
-  {@render children?.()}
-</dialog>
diff --git a/generated/ui/dialog/Dialog.vue b/generated/ui/dialog/Dialog.vue
deleted file mode 100644
index 54a4d93..0000000
--- a/generated/ui/dialog/Dialog.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Dialog renders a native dialog element.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { dialogClasses, type DialogSize, type DialogVariant } from "./dialog.shared";
-
-defineOptions({ name: "Dialog", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: DialogVariant;
-  size?: DialogSize;
-  open?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => dialogClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <dialog :class="cls || undefined" :open="props.open || undefined" v-bind="restAttrs">
-    <slot />
-  </dialog>
-</template>
diff --git a/generated/ui/dialog/dialog.shared.ts b/generated/ui/dialog/dialog.shared.ts
deleted file mode 100644
index c561247..0000000
--- a/generated/ui/dialog/dialog.shared.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.dialog — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import dialogRecipeJson from "./dialog.variants.json";
-
-export const dialogRecipe = dialogRecipeJson;
-
-export type DialogVariant = RecipeKey<typeof dialogRecipe, "variant">;
-export type DialogSize = RecipeKey<typeof dialogRecipe, "size">;
-
-/** Dialog renders a native dialog element. */
-export type DialogBaseProps = {
-  variant?: DialogVariant;
-  size?: DialogSize;
-  open?: boolean;
-};
-
-export type DialogClassesInput = {
-  variant?: DialogVariant;
-  size?: DialogSize;
-  className?: string;
-};
-
-/** Compose Dialog classes without rendering — the cross-runtime `asChild` substitute. */
-export function dialogClasses(input: DialogClassesInput = {}): string {
-  return cn(composeRecipe(dialogRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/dialog/dialog.solid.tsx b/generated/ui/dialog/dialog.solid.tsx
deleted file mode 100644
index 02be729..0000000
--- a/generated/ui/dialog/dialog.solid.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Dialog renders a native dialog root with an optional behavior hook.
- * The data-ui8kit hook defaults off; the registry ships no client JS.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { dialogClasses, type DialogSize, type DialogVariant } from "./dialog.shared";
-
-/**
- * Dialog renders a native dialog element.
- */
-export type DialogProps = Omit<JSX.DialogHtmlAttributes<HTMLDialogElement>, "class" | "className" | "children" | "variant" | "size" | "open"> & {
-  variant?: DialogVariant;
-  size?: DialogSize;
-  open?: boolean;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Dialog: Component<DialogProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "open", "class", "className", "children"]);
-  const cls = () => dialogClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <dialog class={cls() || undefined} open={local.open || undefined} {...rest}>
-      {local.children}
-    </dialog>
-  );
-};
diff --git a/generated/ui/dialog/dialog.tsx b/generated/ui/dialog/dialog.tsx
deleted file mode 100644
index 72bd1b7..0000000
--- a/generated/ui/dialog/dialog.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Dialog renders a native dialog root with an optional behavior hook.
- * The data-ui8kit hook defaults off; the registry ships no client JS.
- */
-
-import { forwardRef, type ReactNode, type DialogHTMLAttributes } from "react";
-import { dialogClasses, type DialogSize, type DialogVariant } from "./dialog.shared";
-
-/**
- * Dialog renders a native dialog element.
- */
-export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, "className" | "children" | "variant" | "size" | "open"> & {
-  variant?: DialogVariant;
-  size?: DialogSize;
-  open?: boolean;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(function Dialog(
-  { variant, size, open, className, children, ...rest },
-  ref
-) {
-  const cls = dialogClasses({ variant, size, className });
-  return (
-    <dialog ref={ref} className={cls || undefined} open={open || undefined} {...rest}>
-      {children}
-    </dialog>
-  );
-});
-Dialog.displayName = "Dialog";
diff --git a/generated/ui/dialog/dialog.variants.json b/generated/ui/dialog/dialog.variants.json
deleted file mode 100644
index e5eebbd..0000000
--- a/generated/ui/dialog/dialog.variants.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "m-auto rounded-lg border border-border bg-background text-foreground shadow-lg backdrop:bg-background/80",
-  "byKey": {
-    "size": {
-      "default": "w-full max-w-lg",
-      "full": "h-full w-full max-w-none",
-      "lg": "w-full max-w-2xl",
-      "sm": "w-full max-w-sm",
-      "xl": "w-full max-w-4xl"
-    },
-    "variant": {
-      "card": "bg-card text-card-foreground",
-      "default": "",
-      "sheet": "min-h-screen rounded-none"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.dialog",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/dialog/dialog_gen.go b/generated/ui/dialog/dialog_gen.go
deleted file mode 100644
index ce799c8..0000000
--- a/generated/ui/dialog/dialog_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package dialog
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed dialog.variants.json
-var dialogVariantsJSON []byte
-
-// DialogVariants is the CVA recipe shared verbatim by all runtimes.
-var DialogVariants = uiutils.MustParseVariantRecipe(dialogVariantsJSON).ToVariants()
diff --git a/generated/ui/dialog/dialog_templ.go b/generated/ui/dialog/dialog_templ.go
deleted file mode 100644
index 836d2f7..0000000
--- a/generated/ui/dialog/dialog_templ.go
+++ /dev/null
@@ -1,221 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Dialog renders a native dialog root with an optional behavior hook.
-
-
-The data-ui8kit hook defaults off; the registry ships no client JS.
-
-
-*/
-
-package dialog
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// DialogProps configures Dialog.
-type DialogProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	ID    string
-	// Open — initial open state (static attribute only)
-	Open bool
-	// DataUI8Kit — opt-in behavior hook; empty emits nothing
-	DataUI8Kit      string
-	AriaLabel       string
-	AriaLabelledBy  string
-	AriaDescribedBy string
-	Attrs           templ.Attributes
-}
-
-// DialogClasses composes Dialog classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func DialogClasses(p DialogProps) string {
-	return uiutils.Compose(DialogVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Dialog renders the Dialog contract.
-func Dialog(p DialogProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{DialogClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<dialog class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/dialog/dialog.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if p.Open {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " open")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/dialog/dialog.templ`, Line: 48, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.DataUI8Kit) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " data-ui8kit=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.DataUI8Kit)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/dialog/dialog.templ`, Line: 51, Col: 29}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaLabel) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " aria-label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/dialog/dialog.templ`, Line: 54, Col: 27}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaLabelledBy) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " aria-labelledby=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabelledBy)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/dialog/dialog.templ`, Line: 57, Col: 37}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaDescribedBy) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " aria-describedby=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaDescribedBy)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/dialog/dialog.templ`, Line: 60, Col: 39}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</dialog>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/disclosure/Disclosure.html.twig b/generated/ui/disclosure/Disclosure.html.twig
deleted file mode 100644
index 9489da0..0000000
--- a/generated/ui/disclosure/Disclosure.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.disclosure — Disclosure renders native details. #}
-<details{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('disclosureClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'open': (open|default(false)) }, attrs|default({})) }}>{{ children|default('')|raw }}</details>
diff --git a/generated/ui/disclosure/Disclosure.latte b/generated/ui/disclosure/Disclosure.latte
deleted file mode 100644
index afb54f2..0000000
--- a/generated/ui/disclosure/Disclosure.latte
+++ /dev/null
@@ -1,15 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.disclosure — Disclosure renders native details. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  bool $open = false,
-  array $attrs = [],
-  string $children = '',
-}
-<details n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::disclosureClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'open' => $open,
-  ...$attrs,
-]">{$children|noescape}</details>
diff --git a/generated/ui/disclosure/Disclosure.svelte b/generated/ui/disclosure/Disclosure.svelte
deleted file mode 100644
index 7fbf899..0000000
--- a/generated/ui/disclosure/Disclosure.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Disclosure renders native details.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { DisclosureSize, DisclosureVariant } from "./disclosure.shared";
-
-  export type DisclosureProps = {
-    variant?: DisclosureVariant;
-    size?: DisclosureSize;
-    open?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { disclosureClasses } from "./disclosure.shared";
-
-  let {
-    variant,
-    size,
-    open,
-    class: className,
-    children,
-    ...rest
-  }: DisclosureProps = $props();
-
-  const cls = $derived(disclosureClasses({ variant, size, className }));
-</script>
-
-<details {...(cls ? { class: cls } : {})} open={open || undefined} {...rest}>
-  {@render children?.()}
-</details>
diff --git a/generated/ui/disclosure/Disclosure.vue b/generated/ui/disclosure/Disclosure.vue
deleted file mode 100644
index 9b566ff..0000000
--- a/generated/ui/disclosure/Disclosure.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Disclosure renders native details.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { disclosureClasses, type DisclosureSize, type DisclosureVariant } from "./disclosure.shared";
-
-defineOptions({ name: "Disclosure", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: DisclosureVariant;
-  size?: DisclosureSize;
-  open?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => disclosureClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <details :class="cls || undefined" :open="props.open || undefined" v-bind="restAttrs">
-    <slot />
-  </details>
-</template>
diff --git a/generated/ui/disclosure/Summary.html.twig b/generated/ui/disclosure/Summary.html.twig
deleted file mode 100644
index a22de47..0000000
--- a/generated/ui/disclosure/Summary.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.disclosure — Summary renders native summary. #}
-<summary{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('summaryClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</summary>
diff --git a/generated/ui/disclosure/Summary.latte b/generated/ui/disclosure/Summary.latte
deleted file mode 100644
index 02d7622..0000000
--- a/generated/ui/disclosure/Summary.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.disclosure — Summary renders native summary. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<summary n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::summaryClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</summary>
diff --git a/generated/ui/disclosure/Summary.svelte b/generated/ui/disclosure/Summary.svelte
deleted file mode 100644
index 1bc7898..0000000
--- a/generated/ui/disclosure/Summary.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Summary renders native summary.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { SummarySize, SummaryVariant } from "./disclosure.shared";
-
-  export type SummaryProps = {
-    variant?: SummaryVariant;
-    size?: SummarySize;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { summaryClasses } from "./disclosure.shared";
-
-  let {
-    variant,
-    size,
-    class: className,
-    children,
-    ...rest
-  }: SummaryProps = $props();
-
-  const cls = $derived(summaryClasses({ variant, size, className }));
-</script>
-
-<summary {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</summary>
diff --git a/generated/ui/disclosure/Summary.vue b/generated/ui/disclosure/Summary.vue
deleted file mode 100644
index 28e48dd..0000000
--- a/generated/ui/disclosure/Summary.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Summary renders native summary.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { summaryClasses, type SummarySize, type SummaryVariant } from "./disclosure.shared";
-
-defineOptions({ name: "Summary", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: SummaryVariant;
-  size?: SummarySize;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => summaryClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <summary :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </summary>
-</template>
diff --git a/generated/ui/disclosure/disclosure.shared.ts b/generated/ui/disclosure/disclosure.shared.ts
deleted file mode 100644
index a43da01..0000000
--- a/generated/ui/disclosure/disclosure.shared.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.disclosure — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import disclosureRecipeJson from "./disclosure.variants.json";
-import summaryRecipeJson from "./summary.variants.json";
-
-export const disclosureRecipe = disclosureRecipeJson;
-export const summaryRecipe = summaryRecipeJson;
-
-export type DisclosureVariant = RecipeKey<typeof disclosureRecipe, "variant">;
-export type DisclosureSize = RecipeKey<typeof disclosureRecipe, "size">;
-
-/** Disclosure renders native details. */
-export type DisclosureBaseProps = {
-  variant?: DisclosureVariant;
-  size?: DisclosureSize;
-  open?: boolean;
-};
-
-export type DisclosureClassesInput = {
-  variant?: DisclosureVariant;
-  size?: DisclosureSize;
-  className?: string;
-};
-
-/** Compose Disclosure classes without rendering — the cross-runtime `asChild` substitute. */
-export function disclosureClasses(input: DisclosureClassesInput = {}): string {
-  return cn(composeRecipe(disclosureRecipe, { variant: input.variant, size: input.size }), input.className);
-}
-
-export type SummaryVariant = RecipeKey<typeof summaryRecipe, "variant">;
-export type SummarySize = RecipeKey<typeof summaryRecipe, "size">;
-
-/** Summary renders native summary. */
-export type SummaryBaseProps = {
-  variant?: SummaryVariant;
-  size?: SummarySize;
-};
-
-export type SummaryClassesInput = {
-  variant?: SummaryVariant;
-  size?: SummarySize;
-  className?: string;
-};
-
-/** Compose Summary classes without rendering — the cross-runtime `asChild` substitute. */
-export function summaryClasses(input: SummaryClassesInput = {}): string {
-  return cn(composeRecipe(summaryRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/disclosure/disclosure.solid.tsx b/generated/ui/disclosure/disclosure.solid.tsx
deleted file mode 100644
index 83dba80..0000000
--- a/generated/ui/disclosure/disclosure.solid.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Disclosure renders native details and summary elements.
- * Open is a static attribute only — no controlled-state contract.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { disclosureClasses, summaryClasses, type DisclosureSize, type DisclosureVariant, type SummarySize, type SummaryVariant } from "./disclosure.shared";
-
-/**
- * Disclosure renders native details.
- */
-export type DisclosureProps = Omit<JSX.DetailsHtmlAttributes<HTMLDetailsElement>, "class" | "className" | "children" | "variant" | "size" | "open"> & {
-  variant?: DisclosureVariant;
-  size?: DisclosureSize;
-  open?: boolean;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Disclosure: Component<DisclosureProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "open", "class", "className", "children"]);
-  const cls = () => disclosureClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <details class={cls() || undefined} open={local.open || undefined} {...rest}>
-      {local.children}
-    </details>
-  );
-};
-
-/**
- * Summary renders native summary.
- */
-export type SummaryProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "variant" | "size"> & {
-  variant?: SummaryVariant;
-  size?: SummarySize;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Summary: Component<SummaryProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "class", "className", "children"]);
-  const cls = () => summaryClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <summary class={cls() || undefined} {...rest}>
-      {local.children}
-    </summary>
-  );
-};
diff --git a/generated/ui/disclosure/disclosure.tsx b/generated/ui/disclosure/disclosure.tsx
deleted file mode 100644
index dd16659..0000000
--- a/generated/ui/disclosure/disclosure.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Disclosure renders native details and summary elements.
- * Open is a static attribute only — no controlled-state contract.
- */
-
-import { forwardRef, type ReactNode, type DetailsHTMLAttributes, type HTMLAttributes } from "react";
-import { disclosureClasses, summaryClasses, type DisclosureSize, type DisclosureVariant, type SummarySize, type SummaryVariant } from "./disclosure.shared";
-
-/**
- * Disclosure renders native details.
- */
-export type DisclosureProps = Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "className" | "children" | "variant" | "size" | "open"> & {
-  variant?: DisclosureVariant;
-  size?: DisclosureSize;
-  open?: boolean;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Disclosure = forwardRef<HTMLDetailsElement, DisclosureProps>(function Disclosure(
-  { variant, size, open, className, children, ...rest },
-  ref
-) {
-  const cls = disclosureClasses({ variant, size, className });
-  return (
-    <details ref={ref} className={cls || undefined} open={open || undefined} {...rest}>
-      {children}
-    </details>
-  );
-});
-Disclosure.displayName = "Disclosure";
-
-/**
- * Summary renders native summary.
- */
-export type SummaryProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "variant" | "size"> & {
-  variant?: SummaryVariant;
-  size?: SummarySize;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Summary = forwardRef<HTMLElement, SummaryProps>(function Summary(
-  { variant, size, className, children, ...rest },
-  ref
-) {
-  const cls = summaryClasses({ variant, size, className });
-  return (
-    <summary ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </summary>
-  );
-});
-Summary.displayName = "Summary";
diff --git a/generated/ui/disclosure/disclosure.variants.json b/generated/ui/disclosure/disclosure.variants.json
deleted file mode 100644
index bc0fd7a..0000000
--- a/generated/ui/disclosure/disclosure.variants.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "group",
-  "byKey": {
-    "size": {
-      "default": "text-sm",
-      "lg": "text-base",
-      "sm": "text-sm"
-    },
-    "variant": {
-      "card": "rounded-md border border-border bg-card text-card-foreground",
-      "default": "rounded-md border border-border",
-      "ghost": ""
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.disclosure",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/disclosure/disclosure_templ.go b/generated/ui/disclosure/disclosure_templ.go
deleted file mode 100644
index 44c2f4d..0000000
--- a/generated/ui/disclosure/disclosure_templ.go
+++ /dev/null
@@ -1,204 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Disclosure renders native details and summary elements.
-
-
-Open is a static attribute only — no controlled-state contract.
-
-
-*/
-
-package disclosure
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// DisclosureProps configures Disclosure.
-type DisclosureProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	// Open — initial open state (static attribute only)
-	Open  bool
-	Attrs templ.Attributes
-}
-
-// DisclosureClasses composes Disclosure classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func DisclosureClasses(p DisclosureProps) string {
-	return uiutils.Compose(DisclosureVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Disclosure renders the Disclosure contract.
-func Disclosure(p DisclosureProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{DisclosureClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<details class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/disclosure/disclosure.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if p.Open {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " open")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</details>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// SummaryProps configures Summary.
-type SummaryProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// SummaryClasses composes Summary classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func SummaryClasses(p SummaryProps) string {
-	return uiutils.Compose(SummaryVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Summary renders the Summary contract.
-func Summary(p SummaryProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var4 == nil {
-			templ_7745c5c3_Var4 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var5 = []any{SummaryClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<summary class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var5).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/disclosure/disclosure.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var4.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</summary>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/disclosure/summary.variants.json b/generated/ui/disclosure/summary.variants.json
deleted file mode 100644
index ad1148d..0000000
--- a/generated/ui/disclosure/summary.variants.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
-  "byKey": {
-    "size": {
-      "default": "text-sm",
-      "lg": "text-base",
-      "sm": "text-sm"
-    },
-    "variant": {
-      "card": "px-4 py-3 font-medium",
-      "default": "px-4 py-3 font-medium",
-      "ghost": "py-2 font-medium"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.disclosure.summary",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/form/DataList.html.twig b/generated/ui/form/DataList.html.twig
deleted file mode 100644
index 203ec87..0000000
--- a/generated/ui/form/DataList.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form.controls — DataList renders a native datalist. #}
-<datalist{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'class': ui8kit_or_null(ui8kit_classes('dataListClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</datalist>
diff --git a/generated/ui/form/DataList.latte b/generated/ui/form/DataList.latte
deleted file mode 100644
index 2c16986..0000000
--- a/generated/ui/form/DataList.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form.controls — DataList renders a native datalist. *}
-{parameters
-  string $id = '',
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<datalist n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::dataListClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</datalist>
diff --git a/generated/ui/form/DataList.svelte b/generated/ui/form/DataList.svelte
deleted file mode 100644
index c0d70e9..0000000
--- a/generated/ui/form/DataList.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  DataList renders a native datalist.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type DataListProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { dataListClasses } from "./controls.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: DataListProps = $props();
-
-  const cls = $derived(dataListClasses({ className }));
-</script>
-
-<datalist {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</datalist>
diff --git a/generated/ui/form/DataList.vue b/generated/ui/form/DataList.vue
deleted file mode 100644
index df92ba6..0000000
--- a/generated/ui/form/DataList.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  DataList renders a native datalist.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { dataListClasses } from "./controls.shared";
-
-defineOptions({ name: "DataList", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => dataListClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <datalist :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </datalist>
-</template>
diff --git a/generated/ui/form/DataOption.html.twig b/generated/ui/form/DataOption.html.twig
deleted file mode 100644
index d34dac6..0000000
--- a/generated/ui/form/DataOption.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form.controls — DataOption renders an option inside a datalist. #}
-<option{{ ui8kit_attr_str({ 'value': ui8kit_or_null((value|default(''))), 'label': ui8kit_or_null((label|default(''))) }, attrs|default({})) }}></option>
diff --git a/generated/ui/form/DataOption.latte b/generated/ui/form/DataOption.latte
deleted file mode 100644
index 5b7203d..0000000
--- a/generated/ui/form/DataOption.latte
+++ /dev/null
@@ -1,12 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form.controls — DataOption renders an option inside a datalist. *}
-{parameters
-  string $value = '',
-  string $label = '',
-  array $attrs = [],
-}
-<option n:attr="[
-  'value' => \UI8Kit\Rt::orNull($value),
-  'label' => \UI8Kit\Rt::orNull($label),
-  ...$attrs,
-]"></option>
diff --git a/generated/ui/form/DataOption.svelte b/generated/ui/form/DataOption.svelte
deleted file mode 100644
index bc52a3c..0000000
--- a/generated/ui/form/DataOption.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  DataOption renders an option inside a datalist.
--->
-<script lang="ts" module>
-
-  export type DataOptionProps = {
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  let {
-    class: className,
-    ...rest
-  }: DataOptionProps = $props();
-</script>
-
-<option {...rest}></option>
diff --git a/generated/ui/form/DataOption.vue b/generated/ui/form/DataOption.vue
deleted file mode 100644
index fb1556a..0000000
--- a/generated/ui/form/DataOption.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  DataOption renders an option inside a datalist.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-
-defineOptions({ name: "DataOption", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-</script>
-
-<template>
-  <option v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/form/Fieldset.html.twig b/generated/ui/form/Fieldset.html.twig
deleted file mode 100644
index 49fffa7..0000000
--- a/generated/ui/form/Fieldset.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form.controls — Fieldset renders a native fieldset. #}
-<fieldset{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('fieldsetClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'name': ui8kit_or_null((name|default(''))), 'form': ui8kit_or_null((form|default(''))), 'disabled': (disabled|default(false)) }, attrs|default({})) }}>{{ children|default('')|raw }}</fieldset>
diff --git a/generated/ui/form/Fieldset.latte b/generated/ui/form/Fieldset.latte
deleted file mode 100644
index 9e2027a..0000000
--- a/generated/ui/form/Fieldset.latte
+++ /dev/null
@@ -1,19 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form.controls — Fieldset renders a native fieldset. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $name = '',
-  string $form = '',
-  bool $disabled = false,
-  array $attrs = [],
-  string $children = '',
-}
-<fieldset n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::fieldsetClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'name' => \UI8Kit\Rt::orNull($name),
-  'form' => \UI8Kit\Rt::orNull($form),
-  'disabled' => $disabled,
-  ...$attrs,
-]">{$children|noescape}</fieldset>
diff --git a/generated/ui/form/Fieldset.svelte b/generated/ui/form/Fieldset.svelte
deleted file mode 100644
index 0e2725e..0000000
--- a/generated/ui/form/Fieldset.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Fieldset renders a native fieldset.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { FieldsetSize, FieldsetVariant } from "./controls.shared";
-
-  export type FieldsetProps = {
-    variant?: FieldsetVariant;
-    size?: FieldsetSize;
-    disabled?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { fieldsetClasses } from "./controls.shared";
-
-  let {
-    variant,
-    size,
-    disabled,
-    class: className,
-    children,
-    ...rest
-  }: FieldsetProps = $props();
-
-  const cls = $derived(fieldsetClasses({ variant, size, className }));
-</script>
-
-<fieldset {...(cls ? { class: cls } : {})} disabled={disabled || undefined} {...rest}>
-  {@render children?.()}
-</fieldset>
diff --git a/generated/ui/form/Fieldset.vue b/generated/ui/form/Fieldset.vue
deleted file mode 100644
index ae2fc08..0000000
--- a/generated/ui/form/Fieldset.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Fieldset renders a native fieldset.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { fieldsetClasses, type FieldsetSize, type FieldsetVariant } from "./controls.shared";
-
-defineOptions({ name: "Fieldset", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: FieldsetVariant;
-  size?: FieldsetSize;
-  disabled?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => fieldsetClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <fieldset :class="cls || undefined" :disabled="props.disabled || undefined" v-bind="restAttrs">
-    <slot />
-  </fieldset>
-</template>
diff --git a/generated/ui/form/Form.html.twig b/generated/ui/form/Form.html.twig
deleted file mode 100644
index 5972772..0000000
--- a/generated/ui/form/Form.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form — Form renders a vertical grid form container. #}
-<form{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'class': ui8kit_or_null(ui8kit_classes('formClasses', { 'class': (class|default('')) })), 'action': ui8kit_or_null((action|default(''))), 'method': ui8kit_or_null((method|default(''))), 'enctype': ui8kit_or_null((enctype|default(''))), 'autocomplete': ui8kit_or_null((autocomplete|default(''))), 'name': ui8kit_or_null((name|default(''))), 'target': ui8kit_or_null((target|default(''))), 'novalidate': (novalidate|default(false)) }, attrs|default({})) }}>{{ children|default('')|raw }}</form>
diff --git a/generated/ui/form/Form.latte b/generated/ui/form/Form.latte
deleted file mode 100644
index 08b0a06..0000000
--- a/generated/ui/form/Form.latte
+++ /dev/null
@@ -1,27 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form — Form renders a vertical grid form container. *}
-{parameters
-  string $id = '',
-  string $class = '',
-  string $action = '',
-  string $method = '',
-  string $enctype = '',
-  string $autocomplete = '',
-  string $name = '',
-  string $target = '',
-  bool $novalidate = false,
-  array $attrs = [],
-  string $children = '',
-}
-<form n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::formClasses(['class' => $class])),
-  'action' => \UI8Kit\Rt::orNull($action),
-  'method' => \UI8Kit\Rt::orNull($method),
-  'enctype' => \UI8Kit\Rt::orNull($enctype),
-  'autocomplete' => \UI8Kit\Rt::orNull($autocomplete),
-  'name' => \UI8Kit\Rt::orNull($name),
-  'target' => \UI8Kit\Rt::orNull($target),
-  'novalidate' => $novalidate,
-  ...$attrs,
-]">{$children|noescape}</form>
diff --git a/generated/ui/form/Form.svelte b/generated/ui/form/Form.svelte
deleted file mode 100644
index 387974d..0000000
--- a/generated/ui/form/Form.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Form renders a vertical grid form container.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type FormProps = {
-    novalidate?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { formClasses } from "./form.shared";
-
-  let {
-    novalidate: noValidate,
-    class: className,
-    children,
-    ...rest
-  }: FormProps = $props();
-
-  const cls = $derived(formClasses({ className }));
-</script>
-
-<form {...(cls ? { class: cls } : {})} novalidate={noValidate || undefined} {...rest}>
-  {@render children?.()}
-</form>
diff --git a/generated/ui/form/Form.vue b/generated/ui/form/Form.vue
deleted file mode 100644
index da8ca8d..0000000
--- a/generated/ui/form/Form.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Form renders a vertical grid form container.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { formClasses } from "./form.shared";
-
-defineOptions({ name: "Form", inheritAttrs: false });
-
-const props = defineProps<{
-  noValidate?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => formClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <form :class="cls || undefined" :novalidate="props.noValidate || undefined" v-bind="restAttrs">
-    <slot />
-  </form>
-</template>
diff --git a/generated/ui/form/FormDescription.html.twig b/generated/ui/form/FormDescription.html.twig
deleted file mode 100644
index e33a4ab..0000000
--- a/generated/ui/form/FormDescription.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form — FormDescription renders muted helper copy below a control. #}
-<p{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('formDescriptionClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</p>
diff --git a/generated/ui/form/FormDescription.latte b/generated/ui/form/FormDescription.latte
deleted file mode 100644
index a309edd..0000000
--- a/generated/ui/form/FormDescription.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form — FormDescription renders muted helper copy below a control. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<p n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::formDescriptionClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</p>
diff --git a/generated/ui/form/FormDescription.svelte b/generated/ui/form/FormDescription.svelte
deleted file mode 100644
index ec272be..0000000
--- a/generated/ui/form/FormDescription.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  FormDescription renders muted helper copy below a control.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type FormDescriptionProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { formDescriptionClasses } from "./form.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: FormDescriptionProps = $props();
-
-  const cls = $derived(formDescriptionClasses({ className }));
-</script>
-
-<p {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</p>
diff --git a/generated/ui/form/FormDescription.vue b/generated/ui/form/FormDescription.vue
deleted file mode 100644
index 18285f4..0000000
--- a/generated/ui/form/FormDescription.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  FormDescription renders muted helper copy below a control.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { formDescriptionClasses } from "./form.shared";
-
-defineOptions({ name: "FormDescription", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => formDescriptionClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <p :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </p>
-</template>
diff --git a/generated/ui/form/FormItem.html.twig b/generated/ui/form/FormItem.html.twig
deleted file mode 100644
index f203d9d..0000000
--- a/generated/ui/form/FormItem.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form — FormItem groups a single field with spacing for label and control. #}
-<div{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('formItemClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</div>
diff --git a/generated/ui/form/FormItem.latte b/generated/ui/form/FormItem.latte
deleted file mode 100644
index f688bb6..0000000
--- a/generated/ui/form/FormItem.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form — FormItem groups a single field with spacing for label and control. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<div n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::formItemClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/form/FormItem.svelte b/generated/ui/form/FormItem.svelte
deleted file mode 100644
index 3fa9e6a..0000000
--- a/generated/ui/form/FormItem.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  FormItem groups a single field with spacing for label and control.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type FormItemProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { formItemClasses } from "./form.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: FormItemProps = $props();
-
-  const cls = $derived(formItemClasses({ className }));
-</script>
-
-<div {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</div>
diff --git a/generated/ui/form/FormItem.vue b/generated/ui/form/FormItem.vue
deleted file mode 100644
index f5f4d32..0000000
--- a/generated/ui/form/FormItem.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  FormItem groups a single field with spacing for label and control.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { formItemClasses } from "./form.shared";
-
-defineOptions({ name: "FormItem", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => formItemClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <div :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </div>
-</template>
diff --git a/generated/ui/form/FormMessage.html.twig b/generated/ui/form/FormMessage.html.twig
deleted file mode 100644
index 4ba8b69..0000000
--- a/generated/ui/form/FormMessage.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form — FormMessage renders destructive validation feedback. #}
-<p{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('formMessageClasses', { 'class': (class|default('')) })), 'role': 'alert' }, attrs|default({})) }}>{{ children|default('')|raw }}</p>
diff --git a/generated/ui/form/FormMessage.latte b/generated/ui/form/FormMessage.latte
deleted file mode 100644
index 84569aa..0000000
--- a/generated/ui/form/FormMessage.latte
+++ /dev/null
@@ -1,12 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form — FormMessage renders destructive validation feedback. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<p n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::formMessageClasses(['class' => $class])),
-  'role' => 'alert',
-  ...$attrs,
-]">{$children|noescape}</p>
diff --git a/generated/ui/form/FormMessage.svelte b/generated/ui/form/FormMessage.svelte
deleted file mode 100644
index 5236894..0000000
--- a/generated/ui/form/FormMessage.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  FormMessage renders destructive validation feedback.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type FormMessageProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { formMessageClasses } from "./form.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: FormMessageProps = $props();
-
-  const cls = $derived(formMessageClasses({ className }));
-</script>
-
-<p {...(cls ? { class: cls } : {})} role="alert" {...rest}>
-  {@render children?.()}
-</p>
diff --git a/generated/ui/form/FormMessage.vue b/generated/ui/form/FormMessage.vue
deleted file mode 100644
index 284c581..0000000
--- a/generated/ui/form/FormMessage.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  FormMessage renders destructive validation feedback.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { formMessageClasses } from "./form.shared";
-
-defineOptions({ name: "FormMessage", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => formMessageClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <p :class="cls || undefined" role="alert" v-bind="restAttrs">
-    <slot />
-  </p>
-</template>
diff --git a/generated/ui/form/Legend.html.twig b/generated/ui/form/Legend.html.twig
deleted file mode 100644
index 4c123ef..0000000
--- a/generated/ui/form/Legend.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form.controls — Legend renders a native legend. #}
-<legend{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('legendClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</legend>
diff --git a/generated/ui/form/Legend.latte b/generated/ui/form/Legend.latte
deleted file mode 100644
index a9dbc50..0000000
--- a/generated/ui/form/Legend.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form.controls — Legend renders a native legend. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<legend n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::legendClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</legend>
diff --git a/generated/ui/form/Legend.svelte b/generated/ui/form/Legend.svelte
deleted file mode 100644
index 6f3f107..0000000
--- a/generated/ui/form/Legend.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Legend renders a native legend.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { LegendSize, LegendVariant } from "./controls.shared";
-
-  export type LegendProps = {
-    variant?: LegendVariant;
-    size?: LegendSize;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { legendClasses } from "./controls.shared";
-
-  let {
-    variant,
-    size,
-    class: className,
-    children,
-    ...rest
-  }: LegendProps = $props();
-
-  const cls = $derived(legendClasses({ variant, size, className }));
-</script>
-
-<legend {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</legend>
diff --git a/generated/ui/form/Legend.vue b/generated/ui/form/Legend.vue
deleted file mode 100644
index 00cc3ab..0000000
--- a/generated/ui/form/Legend.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Legend renders a native legend.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { legendClasses, type LegendSize, type LegendVariant } from "./controls.shared";
-
-defineOptions({ name: "Legend", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: LegendVariant;
-  size?: LegendSize;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => legendClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <legend :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </legend>
-</template>
diff --git a/generated/ui/form/Meter.html.twig b/generated/ui/form/Meter.html.twig
deleted file mode 100644
index f49ed51..0000000
--- a/generated/ui/form/Meter.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form.controls — Meter renders a native meter. #}
-<meter{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'class': ui8kit_or_null(ui8kit_classes('meterClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'value': ui8kit_or_null((value|default(''))), 'min': ui8kit_or_null((min|default(''))), 'max': ui8kit_or_null((max|default(''))), 'low': ui8kit_or_null((low|default(''))), 'high': ui8kit_or_null((high|default(''))), 'optimum': ui8kit_or_null((optimum|default(''))) }, attrs|default({})) }}>{{ children|default('')|raw }}</meter>
diff --git a/generated/ui/form/Meter.latte b/generated/ui/form/Meter.latte
deleted file mode 100644
index 3296629..0000000
--- a/generated/ui/form/Meter.latte
+++ /dev/null
@@ -1,27 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form.controls — Meter renders a native meter. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $id = '',
-  string $class = '',
-  string $value = '',
-  string $min = '',
-  string $max = '',
-  string $low = '',
-  string $high = '',
-  string $optimum = '',
-  array $attrs = [],
-  string $children = '',
-}
-<meter n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::meterClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'value' => \UI8Kit\Rt::orNull($value),
-  'min' => \UI8Kit\Rt::orNull($min),
-  'max' => \UI8Kit\Rt::orNull($max),
-  'low' => \UI8Kit\Rt::orNull($low),
-  'high' => \UI8Kit\Rt::orNull($high),
-  'optimum' => \UI8Kit\Rt::orNull($optimum),
-  ...$attrs,
-]">{$children|noescape}</meter>
diff --git a/generated/ui/form/Meter.svelte b/generated/ui/form/Meter.svelte
deleted file mode 100644
index f8ec39f..0000000
--- a/generated/ui/form/Meter.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Meter renders a native meter.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { MeterSize, MeterVariant } from "./controls.shared";
-
-  export type MeterProps = {
-    variant?: MeterVariant;
-    size?: MeterSize;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { meterClasses } from "./controls.shared";
-
-  let {
-    variant,
-    size,
-    class: className,
-    children,
-    ...rest
-  }: MeterProps = $props();
-
-  const cls = $derived(meterClasses({ variant, size, className }));
-</script>
-
-<meter {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</meter>
diff --git a/generated/ui/form/Meter.vue b/generated/ui/form/Meter.vue
deleted file mode 100644
index 20ffc85..0000000
--- a/generated/ui/form/Meter.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Meter renders a native meter.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { meterClasses, type MeterSize, type MeterVariant } from "./controls.shared";
-
-defineOptions({ name: "Meter", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: MeterVariant;
-  size?: MeterSize;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => meterClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <meter :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </meter>
-</template>
diff --git a/generated/ui/form/Output.html.twig b/generated/ui/form/Output.html.twig
deleted file mode 100644
index 3e78a8f..0000000
--- a/generated/ui/form/Output.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form.controls — Output renders a native output element. #}
-<output{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'class': ui8kit_or_null(ui8kit_classes('outputClasses', { 'class': (class|default('')) })), 'name': ui8kit_or_null((name|default(''))), 'for': ui8kit_or_null((for|default(''))) }, attrs|default({})) }}>{{ (value|default('')) }}{{ children|default('')|raw }}</output>
diff --git a/generated/ui/form/Output.latte b/generated/ui/form/Output.latte
deleted file mode 100644
index 839d431..0000000
--- a/generated/ui/form/Output.latte
+++ /dev/null
@@ -1,18 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form.controls — Output renders a native output element. *}
-{parameters
-  string $id = '',
-  string $class = '',
-  string $name = '',
-  string $for = '',
-  string $value = '',
-  array $attrs = [],
-  string $children = '',
-}
-<output n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::outputClasses(['class' => $class])),
-  'name' => \UI8Kit\Rt::orNull($name),
-  'for' => \UI8Kit\Rt::orNull($for),
-  ...$attrs,
-]">{$value}{$children|noescape}</output>
diff --git a/generated/ui/form/Output.svelte b/generated/ui/form/Output.svelte
deleted file mode 100644
index 727d5a8..0000000
--- a/generated/ui/form/Output.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Output renders a native output element.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type OutputProps = {
-    value?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { outputClasses } from "./controls.shared";
-
-  let {
-    value,
-    class: className,
-    children,
-    ...rest
-  }: OutputProps = $props();
-
-  const cls = $derived(outputClasses({ className }));
-</script>
-
-<output {...(cls ? { class: cls } : {})} {...rest}>{value}{@render children?.()}</output>
diff --git a/generated/ui/form/Output.vue b/generated/ui/form/Output.vue
deleted file mode 100644
index f1e3328..0000000
--- a/generated/ui/form/Output.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Output renders a native output element.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { outputClasses } from "./controls.shared";
-
-defineOptions({ name: "Output", inheritAttrs: false });
-
-const props = defineProps<{
-  value?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => outputClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <output :class="cls || undefined" v-bind="restAttrs">
-    {{ props.value }}
-    <slot />
-  </output>
-</template>
diff --git a/generated/ui/form/Progress.html.twig b/generated/ui/form/Progress.html.twig
deleted file mode 100644
index f24a828..0000000
--- a/generated/ui/form/Progress.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.form.controls — Progress renders a native progress element. #}
-<progress{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'class': ui8kit_or_null(ui8kit_classes('progressClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'value': ui8kit_or_null((value|default(''))), 'max': ui8kit_or_null((max|default(''))) }, attrs|default({})) }}>{{ children|default('')|raw }}</progress>
diff --git a/generated/ui/form/Progress.latte b/generated/ui/form/Progress.latte
deleted file mode 100644
index b79ecd2..0000000
--- a/generated/ui/form/Progress.latte
+++ /dev/null
@@ -1,19 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.form.controls — Progress renders a native progress element. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $id = '',
-  string $class = '',
-  string $value = '',
-  string $max = '',
-  array $attrs = [],
-  string $children = '',
-}
-<progress n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::progressClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'value' => \UI8Kit\Rt::orNull($value),
-  'max' => \UI8Kit\Rt::orNull($max),
-  ...$attrs,
-]">{$children|noescape}</progress>
diff --git a/generated/ui/form/Progress.svelte b/generated/ui/form/Progress.svelte
deleted file mode 100644
index 4b1dea0..0000000
--- a/generated/ui/form/Progress.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Progress renders a native progress element.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { ProgressSize, ProgressVariant } from "./controls.shared";
-
-  export type ProgressProps = {
-    variant?: ProgressVariant;
-    size?: ProgressSize;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { progressClasses } from "./controls.shared";
-
-  let {
-    variant,
-    size,
-    class: className,
-    children,
-    ...rest
-  }: ProgressProps = $props();
-
-  const cls = $derived(progressClasses({ variant, size, className }));
-</script>
-
-<progress {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</progress>
diff --git a/generated/ui/form/Progress.vue b/generated/ui/form/Progress.vue
deleted file mode 100644
index f366515..0000000
--- a/generated/ui/form/Progress.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Progress renders a native progress element.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { progressClasses, type ProgressSize, type ProgressVariant } from "./controls.shared";
-
-defineOptions({ name: "Progress", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: ProgressVariant;
-  size?: ProgressSize;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => progressClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <progress :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </progress>
-</template>
diff --git a/generated/ui/form/controls.shared.ts b/generated/ui/form/controls.shared.ts
deleted file mode 100644
index e6ff332..0000000
--- a/generated/ui/form/controls.shared.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.form.controls — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import fieldsetRecipeJson from "./fieldset.variants.json";
-import legendRecipeJson from "./legend.variants.json";
-import meterRecipeJson from "./meter.variants.json";
-import progressRecipeJson from "./progress.variants.json";
-
-export const fieldsetRecipe = fieldsetRecipeJson;
-export const legendRecipe = legendRecipeJson;
-export const meterRecipe = meterRecipeJson;
-export const progressRecipe = progressRecipeJson;
-
-export type FieldsetVariant = RecipeKey<typeof fieldsetRecipe, "variant">;
-export type FieldsetSize = RecipeKey<typeof fieldsetRecipe, "size">;
-
-/** Fieldset renders a native fieldset. */
-export type FieldsetBaseProps = {
-  variant?: FieldsetVariant;
-  size?: FieldsetSize;
-  disabled?: boolean;
-};
-
-export type FieldsetClassesInput = {
-  variant?: FieldsetVariant;
-  size?: FieldsetSize;
-  className?: string;
-};
-
-/** Compose Fieldset classes without rendering — the cross-runtime `asChild` substitute. */
-export function fieldsetClasses(input: FieldsetClassesInput = {}): string {
-  return cn(composeRecipe(fieldsetRecipe, { variant: input.variant, size: input.size }), input.className);
-}
-
-export type LegendVariant = RecipeKey<typeof legendRecipe, "variant">;
-export type LegendSize = RecipeKey<typeof legendRecipe, "size">;
-
-/** Legend renders a native legend. */
-export type LegendBaseProps = {
-  variant?: LegendVariant;
-  size?: LegendSize;
-};
-
-export type LegendClassesInput = {
-  variant?: LegendVariant;
-  size?: LegendSize;
-  className?: string;
-};
-
-/** Compose Legend classes without rendering — the cross-runtime `asChild` substitute. */
-export function legendClasses(input: LegendClassesInput = {}): string {
-  return cn(composeRecipe(legendRecipe, { variant: input.variant, size: input.size }), input.className);
-}
-
-/** DataList renders a native datalist. */
-export type DataListBaseProps = {
-
-};
-
-export type DataListClassesInput = {
-  className?: string;
-};
-
-/** Compose DataList classes without rendering — the cross-runtime `asChild` substitute. */
-export function dataListClasses(input: DataListClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** DataOption renders an option inside a datalist. */
-export type DataOptionBaseProps = {
-
-};
-
-/** Output renders a native output element. */
-export type OutputBaseProps = {
-  value?: string;
-};
-
-export type OutputClassesInput = {
-  className?: string;
-};
-
-/** Compose Output classes without rendering — the cross-runtime `asChild` substitute. */
-export function outputClasses(input: OutputClassesInput = {}): string {
-  return cn(input.className);
-}
-
-export type MeterVariant = RecipeKey<typeof meterRecipe, "variant">;
-export type MeterSize = RecipeKey<typeof meterRecipe, "size">;
-
-/** Meter renders a native meter. */
-export type MeterBaseProps = {
-  variant?: MeterVariant;
-  size?: MeterSize;
-};
-
-export type MeterClassesInput = {
-  variant?: MeterVariant;
-  size?: MeterSize;
-  className?: string;
-};
-
-/** Compose Meter classes without rendering — the cross-runtime `asChild` substitute. */
-export function meterClasses(input: MeterClassesInput = {}): string {
-  return cn(composeRecipe(meterRecipe, { variant: input.variant, size: input.size }), input.className);
-}
-
-export type ProgressVariant = RecipeKey<typeof progressRecipe, "variant">;
-export type ProgressSize = RecipeKey<typeof progressRecipe, "size">;
-
-/** Progress renders a native progress element. */
-export type ProgressBaseProps = {
-  variant?: ProgressVariant;
-  size?: ProgressSize;
-};
-
-export type ProgressClassesInput = {
-  variant?: ProgressVariant;
-  size?: ProgressSize;
-  className?: string;
-};
-
-/** Compose Progress classes without rendering — the cross-runtime `asChild` substitute. */
-export function progressClasses(input: ProgressClassesInput = {}): string {
-  return cn(composeRecipe(progressRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/form/controls.solid.tsx b/generated/ui/form/controls.solid.tsx
deleted file mode 100644
index dbf90bd..0000000
--- a/generated/ui/form/controls.solid.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Form controls covers fieldset, legend, datalist, output, meter, and progress.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { dataListClasses, fieldsetClasses, legendClasses, meterClasses, outputClasses, progressClasses, type FieldsetSize, type FieldsetVariant, type LegendSize, type LegendVariant, type MeterSize, type MeterVariant, type ProgressSize, type ProgressVariant } from "./controls.shared";
-
-/**
- * Fieldset renders a native fieldset.
- */
-export type FieldsetProps = Omit<JSX.FieldsetHTMLAttributes<HTMLFieldSetElement>, "class" | "className" | "children" | "variant" | "size" | "disabled"> & {
-  variant?: FieldsetVariant;
-  size?: FieldsetSize;
-  disabled?: boolean;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Fieldset: Component<FieldsetProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "disabled", "class", "className", "children"]);
-  const cls = () => fieldsetClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <fieldset class={cls() || undefined} disabled={local.disabled || undefined} {...rest}>
-      {local.children}
-    </fieldset>
-  );
-};
-
-/**
- * Legend renders a native legend.
- */
-export type LegendProps = Omit<JSX.HTMLAttributes<HTMLLegendElement>, "class" | "className" | "children" | "variant" | "size"> & {
-  variant?: LegendVariant;
-  size?: LegendSize;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Legend: Component<LegendProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "class", "className", "children"]);
-  const cls = () => legendClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <legend class={cls() || undefined} {...rest}>
-      {local.children}
-    </legend>
-  );
-};
-
-/**
- * DataList renders a native datalist.
- */
-export type DataListProps = Omit<JSX.HTMLAttributes<HTMLDataListElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const DataList: Component<DataListProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => dataListClasses({ className: local.class ?? local.className });
-  return (
-    <datalist class={cls() || undefined} {...rest}>
-      {local.children}
-    </datalist>
-  );
-};
-
-/**
- * DataOption renders an option inside a datalist.
- */
-export type DataOptionProps = Omit<JSX.OptionHTMLAttributes<HTMLOptionElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-};
-
-export const DataOption: Component<DataOptionProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className"]);
-  return (
-    <option {...rest} />
-  );
-};
-
-/**
- * Output renders a native output element.
- */
-export type OutputProps = Omit<JSX.OutputHTMLAttributes<HTMLOutputElement>, "class" | "className" | "children" | "value"> & {
-  value?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Output: Component<OutputProps> = (props) => {
-  const [local, rest] = splitProps(props, ["value", "class", "className", "children"]);
-  const cls = () => outputClasses({ className: local.class ?? local.className });
-  return (
-    <output class={cls() || undefined} {...rest}>
-      {local.value}
-      {local.children}
-    </output>
-  );
-};
-
-/**
- * Meter renders a native meter.
- */
-export type MeterProps = Omit<JSX.MeterHTMLAttributes<HTMLMeterElement>, "class" | "className" | "children" | "variant" | "size"> & {
-  variant?: MeterVariant;
-  size?: MeterSize;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Meter: Component<MeterProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "class", "className", "children"]);
-  const cls = () => meterClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <meter class={cls() || undefined} {...rest}>
-      {local.children}
-    </meter>
-  );
-};
-
-/**
- * Progress renders a native progress element.
- */
-export type ProgressProps = Omit<JSX.ProgressHTMLAttributes<HTMLProgressElement>, "class" | "className" | "children" | "variant" | "size"> & {
-  variant?: ProgressVariant;
-  size?: ProgressSize;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Progress: Component<ProgressProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "class", "className", "children"]);
-  const cls = () => progressClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <progress class={cls() || undefined} {...rest}>
-      {local.children}
-    </progress>
-  );
-};
diff --git a/generated/ui/form/controls.tsx b/generated/ui/form/controls.tsx
deleted file mode 100644
index 4d8899d..0000000
--- a/generated/ui/form/controls.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Form controls covers fieldset, legend, datalist, output, meter, and progress.
- */
-
-import { forwardRef, type ReactNode, type FieldsetHTMLAttributes, type HTMLAttributes, type MeterHTMLAttributes, type OptionHTMLAttributes, type OutputHTMLAttributes, type ProgressHTMLAttributes } from "react";
-import { dataListClasses, fieldsetClasses, legendClasses, meterClasses, outputClasses, progressClasses, type FieldsetSize, type FieldsetVariant, type LegendSize, type LegendVariant, type MeterSize, type MeterVariant, type ProgressSize, type ProgressVariant } from "./controls.shared";
-
-/**
- * Fieldset renders a native fieldset.
- */
-export type FieldsetProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "className" | "children" | "variant" | "size" | "disabled"> & {
-  variant?: FieldsetVariant;
-  size?: FieldsetSize;
-  disabled?: boolean;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(
-  { variant, size, disabled, className, children, ...rest },
-  ref
-) {
-  const cls = fieldsetClasses({ variant, size, className });
-  return (
-    <fieldset ref={ref} className={cls || undefined} disabled={disabled || undefined} {...rest}>
-      {children}
-    </fieldset>
-  );
-});
-Fieldset.displayName = "Fieldset";
-
-/**
- * Legend renders a native legend.
- */
-export type LegendProps = Omit<HTMLAttributes<HTMLLegendElement>, "className" | "children" | "variant" | "size"> & {
-  variant?: LegendVariant;
-  size?: LegendSize;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Legend = forwardRef<HTMLLegendElement, LegendProps>(function Legend(
-  { variant, size, className, children, ...rest },
-  ref
-) {
-  const cls = legendClasses({ variant, size, className });
-  return (
-    <legend ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </legend>
-  );
-});
-Legend.displayName = "Legend";
-
-/**
- * DataList renders a native datalist.
- */
-export type DataListProps = Omit<HTMLAttributes<HTMLDataListElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const DataList = forwardRef<HTMLDataListElement, DataListProps>(function DataList(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = dataListClasses({ className });
-  return (
-    <datalist ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </datalist>
-  );
-});
-DataList.displayName = "DataList";
-
-/**
- * DataOption renders an option inside a datalist.
- */
-export type DataOptionProps = Omit<OptionHTMLAttributes<HTMLOptionElement>, "className" | "children"> & {
-  className?: string;
-};
-
-export const DataOption = forwardRef<HTMLOptionElement, DataOptionProps>(function DataOption(
-  { className, ...rest },
-  ref
-) {
-  return (
-    <option ref={ref} {...rest} />
-  );
-});
-DataOption.displayName = "DataOption";
-
-/**
- * Output renders a native output element.
- */
-export type OutputProps = Omit<OutputHTMLAttributes<HTMLOutputElement>, "className" | "children" | "value"> & {
-  value?: string;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Output = forwardRef<HTMLOutputElement, OutputProps>(function Output(
-  { value, className, children, ...rest },
-  ref
-) {
-  const cls = outputClasses({ className });
-  return (
-    <output ref={ref} className={cls || undefined} {...rest}>
-      {value}
-      {children}
-    </output>
-  );
-});
-Output.displayName = "Output";
-
-/**
- * Meter renders a native meter.
- */
-export type MeterProps = Omit<MeterHTMLAttributes<HTMLMeterElement>, "className" | "children" | "variant" | "size"> & {
-  variant?: MeterVariant;
-  size?: MeterSize;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Meter = forwardRef<HTMLMeterElement, MeterProps>(function Meter(
-  { variant, size, className, children, ...rest },
-  ref
-) {
-  const cls = meterClasses({ variant, size, className });
-  return (
-    <meter ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </meter>
-  );
-});
-Meter.displayName = "Meter";
-
-/**
- * Progress renders a native progress element.
- */
-export type ProgressProps = Omit<ProgressHTMLAttributes<HTMLProgressElement>, "className" | "children" | "variant" | "size"> & {
-  variant?: ProgressVariant;
-  size?: ProgressSize;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Progress = forwardRef<HTMLProgressElement, ProgressProps>(function Progress(
-  { variant, size, className, children, ...rest },
-  ref
-) {
-  const cls = progressClasses({ variant, size, className });
-  return (
-    <progress ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </progress>
-  );
-});
-Progress.displayName = "Progress";
diff --git a/generated/ui/form/controls_templ.go b/generated/ui/form/controls_templ.go
deleted file mode 100644
index a55aadb..0000000
--- a/generated/ui/form/controls_templ.go
+++ /dev/null
@@ -1,952 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Form controls covers fieldset, legend, datalist, output, meter, and progress.
-
-
-*/
-
-package form
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// FieldsetProps configures Fieldset.
-type FieldsetProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class    string
-	Name     string
-	Form     string
-	Disabled bool
-	Attrs    templ.Attributes
-}
-
-// FieldsetClasses composes Fieldset classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func FieldsetClasses(p FieldsetProps) string {
-	return uiutils.Compose(FieldsetVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Fieldset renders the Fieldset contract.
-func Fieldset(p FieldsetProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{FieldsetClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<fieldset class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Name) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 41, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Form) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " form=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.Form)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 44, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</fieldset>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// LegendProps configures Legend.
-type LegendProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// LegendClasses composes Legend classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func LegendClasses(p LegendProps) string {
-	return uiutils.Compose(LegendVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Legend renders the Legend contract.
-func Legend(p LegendProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var6 == nil {
-			templ_7745c5c3_Var6 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var7 = []any{LegendClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var7...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<legend class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var8 string
-		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var7).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var6.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</legend>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// DataListProps configures DataList.
-type DataListProps struct {
-	ID string
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// DataListClasses composes DataList classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func DataListClasses(p DataListProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// DataList renders the DataList contract.
-func DataList(p DataListProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var9 == nil {
-			templ_7745c5c3_Var9 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var10 = []any{DataListClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<datalist")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var11 string
-			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 101, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var12 string
-		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var10).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var9.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</datalist>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// DataOptionProps configures DataOption.
-type DataOptionProps struct {
-	Value string
-	Label string
-	Attrs templ.Attributes
-}
-
-// DataOption renders the DataOption contract.
-func DataOption(p DataOptionProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var13 == nil {
-			templ_7745c5c3_Var13 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<option")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Value) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, " value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var14 string
-			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 121, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Label) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, " label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var15 string
-			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(p.Label)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 124, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "></option>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// OutputProps configures Output.
-type OutputProps struct {
-	ID string
-	// Class — adds Tailwind utilities
-	Class string
-	Name  string
-	For   string
-	// Value — initial output text
-	Value string
-	Attrs templ.Attributes
-}
-
-// OutputClasses composes Output classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func OutputClasses(p OutputProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// Output renders the Output contract.
-func Output(p OutputProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var16 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var16 == nil {
-			templ_7745c5c3_Var16 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var17 = []any{OutputClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var17...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<output")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var18 string
-			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 152, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var19 string
-		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var17).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Name) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, " name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var20 string
-			templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(p.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 156, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.For) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, " for=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var21 string
-			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(p.For)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 159, Col: 14}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var22 string
-		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 163, Col: 11}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var16.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</output>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// MeterProps configures Meter.
-type MeterProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	ID   string
-	// Class — adds Tailwind utilities
-	Class   string
-	Value   string
-	Min     string
-	Max     string
-	Low     string
-	High    string
-	Optimum string
-	Attrs   templ.Attributes
-}
-
-// MeterClasses composes Meter classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func MeterClasses(p MeterProps) string {
-	return uiutils.Compose(MeterVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Meter renders the Meter contract.
-func Meter(p MeterProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var23 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var23 == nil {
-			templ_7745c5c3_Var23 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var24 = []any{MeterClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var24...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "<meter")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var25 string
-			templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 199, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var26 string
-		templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var24).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Value) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, " value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var27 string
-			templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 203, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Min) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, " min=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var28 string
-			templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(p.Min)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 206, Col: 14}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Max) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, " max=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var29 string
-			templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(p.Max)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 209, Col: 14}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Low) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, " low=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var30 string
-			templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(p.Low)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 212, Col: 14}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.High) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, " high=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var31 string
-			templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(p.High)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 215, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Optimum) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, " optimum=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var32 string
-			templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(p.Optimum)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 218, Col: 22}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var23.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "</meter>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// ProgressProps configures Progress.
-type ProgressProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	ID   string
-	// Class — adds Tailwind utilities
-	Class string
-	Value string
-	Max   string
-	Attrs templ.Attributes
-}
-
-// ProgressClasses composes Progress classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func ProgressClasses(p ProgressProps) string {
-	return uiutils.Compose(ProgressVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Progress renders the Progress contract.
-func Progress(p ProgressProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var33 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var33 == nil {
-			templ_7745c5c3_Var33 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var34 = []any{ProgressClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var34...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "<progress")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var35 string
-			templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 253, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var36 string
-		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var34).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Value) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, " value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var37 string
-			templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 257, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Max) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, " max=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var38 string
-			templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs(p.Max)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/controls.templ`, Line: 260, Col: 14}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var33.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, "</progress>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/form/fieldset.variants.json b/generated/ui/form/fieldset.variants.json
deleted file mode 100644
index bd0e9a8..0000000
--- a/generated/ui/form/fieldset.variants.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "grid gap-4",
-  "byKey": {
-    "size": {
-      "default": "gap-4",
-      "lg": "gap-6",
-      "sm": "gap-2"
-    },
-    "variant": {
-      "card": "rounded-md border border-border p-4",
-      "default": "",
-      "inline": "flex flex-wrap items-start gap-4"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.form.fieldset",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/form/form-description.variants.json b/generated/ui/form/form-description.variants.json
deleted file mode 100644
index 616593c..0000000
--- a/generated/ui/form/form-description.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "text-xs text-muted-foreground",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.form.description",
-  "keys": []
-}
diff --git a/generated/ui/form/form-item.variants.json b/generated/ui/form/form-item.variants.json
deleted file mode 100644
index 3e34e1e..0000000
--- a/generated/ui/form/form-item.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "grid gap-2",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.form.item",
-  "keys": []
-}
diff --git a/generated/ui/form/form-message.variants.json b/generated/ui/form/form-message.variants.json
deleted file mode 100644
index e9764dd..0000000
--- a/generated/ui/form/form-message.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "text-sm font-medium text-destructive",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.form.message",
-  "keys": []
-}
diff --git a/generated/ui/form/form.shared.ts b/generated/ui/form/form.shared.ts
deleted file mode 100644
index 7a06b96..0000000
--- a/generated/ui/form/form.shared.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.form — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import formRecipeJson from "./form.variants.json";
-import formItemRecipeJson from "./form-item.variants.json";
-import formDescriptionRecipeJson from "./form-description.variants.json";
-import formMessageRecipeJson from "./form-message.variants.json";
-
-export const formRecipe = formRecipeJson;
-export const formItemRecipe = formItemRecipeJson;
-export const formDescriptionRecipe = formDescriptionRecipeJson;
-export const formMessageRecipe = formMessageRecipeJson;
-
-/** Form renders a vertical grid form container. */
-export type FormBaseProps = {
-  noValidate?: boolean;
-};
-
-export type FormClassesInput = {
-  className?: string;
-};
-
-/** Compose Form classes without rendering — the cross-runtime `asChild` substitute. */
-export function formClasses(input: FormClassesInput = {}): string {
-  return cn(composeRecipe(formRecipe, {  }), input.className);
-}
-
-/** FormItem groups a single field with spacing for label and control. */
-export type FormItemBaseProps = {
-
-};
-
-export type FormItemClassesInput = {
-  className?: string;
-};
-
-/** Compose FormItem classes without rendering — the cross-runtime `asChild` substitute. */
-export function formItemClasses(input: FormItemClassesInput = {}): string {
-  return cn(composeRecipe(formItemRecipe, {  }), input.className);
-}
-
-/** FormDescription renders muted helper copy below a control. */
-export type FormDescriptionBaseProps = {
-
-};
-
-export type FormDescriptionClassesInput = {
-  className?: string;
-};
-
-/** Compose FormDescription classes without rendering — the cross-runtime `asChild` substitute. */
-export function formDescriptionClasses(input: FormDescriptionClassesInput = {}): string {
-  return cn(composeRecipe(formDescriptionRecipe, {  }), input.className);
-}
-
-/** FormMessage renders destructive validation feedback. */
-export type FormMessageBaseProps = {
-
-};
-
-export type FormMessageClassesInput = {
-  className?: string;
-};
-
-/** Compose FormMessage classes without rendering — the cross-runtime `asChild` substitute. */
-export function formMessageClasses(input: FormMessageClassesInput = {}): string {
-  return cn(composeRecipe(formMessageRecipe, {  }), input.className);
-}
diff --git a/generated/ui/form/form.solid.tsx b/generated/ui/form/form.solid.tsx
deleted file mode 100644
index c7a5564..0000000
--- a/generated/ui/form/form.solid.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Form primitives: form wrapper, field item, description, and validation message.
- * Composes with Label, Input, and other controls.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { formClasses, formDescriptionClasses, formItemClasses, formMessageClasses } from "./form.shared";
-
-/**
- * Form renders a vertical grid form container.
- */
-export type FormProps = Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "class" | "className" | "children" | "noValidate"> & {
-  noValidate?: boolean;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Form: Component<FormProps> = (props) => {
-  const [local, rest] = splitProps(props, ["noValidate", "class", "className", "children"]);
-  const cls = () => formClasses({ className: local.class ?? local.className });
-  return (
-    <form class={cls() || undefined} noValidate={local.noValidate || undefined} {...rest}>
-      {local.children}
-    </form>
-  );
-};
-
-/**
- * FormItem groups a single field with spacing for label and control.
- */
-export type FormItemProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const FormItem: Component<FormItemProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => formItemClasses({ className: local.class ?? local.className });
-  return (
-    <div class={cls() || undefined} {...rest}>
-      {local.children}
-    </div>
-  );
-};
-
-/**
- * FormDescription renders muted helper copy below a control.
- */
-export type FormDescriptionProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const FormDescription: Component<FormDescriptionProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => formDescriptionClasses({ className: local.class ?? local.className });
-  return (
-    <p class={cls() || undefined} {...rest}>
-      {local.children}
-    </p>
-  );
-};
-
-/**
- * FormMessage renders destructive validation feedback.
- */
-export type FormMessageProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const FormMessage: Component<FormMessageProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => formMessageClasses({ className: local.class ?? local.className });
-  return (
-    <p class={cls() || undefined} role="alert" {...rest}>
-      {local.children}
-    </p>
-  );
-};
diff --git a/generated/ui/form/form.tsx b/generated/ui/form/form.tsx
deleted file mode 100644
index 5c746b7..0000000
--- a/generated/ui/form/form.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Form primitives: form wrapper, field item, description, and validation message.
- * Composes with Label, Input, and other controls.
- */
-
-import { forwardRef, type ReactNode, type FormHTMLAttributes, type HTMLAttributes } from "react";
-import { formClasses, formDescriptionClasses, formItemClasses, formMessageClasses } from "./form.shared";
-
-/**
- * Form renders a vertical grid form container.
- */
-export type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "className" | "children" | "noValidate"> & {
-  noValidate?: boolean;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Form = forwardRef<HTMLFormElement, FormProps>(function Form(
-  { noValidate, className, children, ...rest },
-  ref
-) {
-  const cls = formClasses({ className });
-  return (
-    <form ref={ref} className={cls || undefined} noValidate={noValidate || undefined} {...rest}>
-      {children}
-    </form>
-  );
-});
-Form.displayName = "Form";
-
-/**
- * FormItem groups a single field with spacing for label and control.
- */
-export type FormItemProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const FormItem = forwardRef<HTMLDivElement, FormItemProps>(function FormItem(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = formItemClasses({ className });
-  return (
-    <div ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </div>
-  );
-});
-FormItem.displayName = "FormItem";
-
-/**
- * FormDescription renders muted helper copy below a control.
- */
-export type FormDescriptionProps = Omit<HTMLAttributes<HTMLParagraphElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const FormDescription = forwardRef<HTMLParagraphElement, FormDescriptionProps>(function FormDescription(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = formDescriptionClasses({ className });
-  return (
-    <p ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </p>
-  );
-});
-FormDescription.displayName = "FormDescription";
-
-/**
- * FormMessage renders destructive validation feedback.
- */
-export type FormMessageProps = Omit<HTMLAttributes<HTMLParagraphElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const FormMessage = forwardRef<HTMLParagraphElement, FormMessageProps>(function FormMessage(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = formMessageClasses({ className });
-  return (
-    <p ref={ref} className={cls || undefined} role="alert" {...rest}>
-      {children}
-    </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
diff --git a/generated/ui/form/form.variants.json b/generated/ui/form/form.variants.json
deleted file mode 100644
index ff3ecd4..0000000
--- a/generated/ui/form/form.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.form",
-  "keys": []
-}
diff --git a/generated/ui/form/form_templ.go b/generated/ui/form/form_templ.go
deleted file mode 100644
index 1766e14..0000000
--- a/generated/ui/form/form_templ.go
+++ /dev/null
@@ -1,487 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Form primitives: form wrapper, field item, description, and validation message.
-
-
-Composes with Label, Input, and other controls.
-
-
-*/
-
-package form
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// FormProps configures Form.
-type FormProps struct {
-	ID string
-	// Class — adds Tailwind utilities
-	Class        string
-	Action       string
-	Method       string
-	Enctype      string
-	Autocomplete string
-	Name         string
-	Target       string
-	NoValidate   bool
-	Attrs        templ.Attributes
-}
-
-// FormClasses composes Form classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func FormClasses(p FormProps) string {
-	return uiutils.Compose(FormVariants, map[string]string{}, p.Class)
-}
-
-// Form renders the Form contract.
-func Form(p FormProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{FormClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<form")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 39, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var4 string
-		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Action) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " action=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 templ.SafeURL
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinURLErrs(p.Action)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 43, Col: 20}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Method) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " method=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(p.Method)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 46, Col: 20}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Enctype) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " enctype=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.Enctype)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 49, Col: 22}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Autocomplete) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " autocomplete=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.Autocomplete)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 52, Col: 32}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Name) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(p.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 55, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Target) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " target=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var10 string
-			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(p.Target)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 58, Col: 20}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.NoValidate {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, " novalidate")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</form>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// FormItemProps configures FormItem.
-type FormItemProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// FormItemClasses composes FormItem classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func FormItemClasses(p FormItemProps) string {
-	return uiutils.Compose(FormItemVariants, map[string]string{}, p.Class)
-}
-
-// FormItem renders the FormItem contract.
-func FormItem(p FormItemProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var11 == nil {
-			templ_7745c5c3_Var11 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var12 = []any{FormItemClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var12...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var13 string
-		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var12).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var11.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// FormDescriptionProps configures FormDescription.
-type FormDescriptionProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// FormDescriptionClasses composes FormDescription classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func FormDescriptionClasses(p FormDescriptionProps) string {
-	return uiutils.Compose(FormDescriptionVariants, map[string]string{}, p.Class)
-}
-
-// FormDescription renders the FormDescription contract.
-func FormDescription(p FormDescriptionProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var14 == nil {
-			templ_7745c5c3_Var14 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var15 = []any{FormDescriptionClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var15...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<p class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var16 string
-		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var15).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var14.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</p>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// FormMessageProps configures FormMessage.
-type FormMessageProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// FormMessageClasses composes FormMessage classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func FormMessageClasses(p FormMessageProps) string {
-	return uiutils.Compose(FormMessageVariants, map[string]string{}, p.Class)
-}
-
-// FormMessage renders the FormMessage contract.
-func FormMessage(p FormMessageProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var17 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var17 == nil {
-			templ_7745c5c3_Var17 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var18 = []any{FormMessageClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var18...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<p class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var19 string
-		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var18).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/form/form.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\" role=\"alert\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var17.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</p>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/form/legend.variants.json b/generated/ui/form/legend.variants.json
deleted file mode 100644
index e54b08f..0000000
--- a/generated/ui/form/legend.variants.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "text-sm font-medium",
-  "byKey": {
-    "size": {
-      "default": "text-sm",
-      "lg": "text-base",
-      "sm": "text-xs"
-    },
-    "variant": {
-      "default": "",
-      "muted": "text-muted-foreground"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.form.legend",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/form/meter.variants.json b/generated/ui/form/meter.variants.json
deleted file mode 100644
index c642aea..0000000
--- a/generated/ui/form/meter.variants.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "h-2 w-full",
-  "byKey": {
-    "size": {
-      "default": "h-2",
-      "lg": "h-3",
-      "sm": "h-1"
-    },
-    "variant": {
-      "default": "accent-primary",
-      "muted": "accent-muted-foreground"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.form.meter",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/form/progress.variants.json b/generated/ui/form/progress.variants.json
deleted file mode 100644
index 2a985d0..0000000
--- a/generated/ui/form/progress.variants.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "h-2 w-full",
-  "byKey": {
-    "size": {
-      "default": "h-2",
-      "lg": "h-3",
-      "sm": "h-1"
-    },
-    "variant": {
-      "default": "accent-primary",
-      "muted": "accent-muted-foreground"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.form.progress",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/grid/Grid.html.twig b/generated/ui/grid/Grid.html.twig
deleted file mode 100644
index 50411cc..0000000
--- a/generated/ui/grid/Grid.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.grid — Grid renders a display:grid container. #}
-<div{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('gridClasses', { 'cols': (cols|default('')), 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</div>
diff --git a/generated/ui/grid/Grid.latte b/generated/ui/grid/Grid.latte
deleted file mode 100644
index 43d279d..0000000
--- a/generated/ui/grid/Grid.latte
+++ /dev/null
@@ -1,12 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.grid — Grid renders a display:grid container. *}
-{parameters
-  string $class = '',
-  string $cols = '',
-  array $attrs = [],
-  string $children = '',
-}
-<div n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::gridClasses(['cols' => $cols, 'class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/grid/Grid.svelte b/generated/ui/grid/Grid.svelte
deleted file mode 100644
index 6dc65a9..0000000
--- a/generated/ui/grid/Grid.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Grid renders a display:grid container.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type GridProps = {
-    cols?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { gridClasses } from "./grid.shared";
-
-  let {
-    cols,
-    class: className,
-    children,
-    ...rest
-  }: GridProps = $props();
-
-  const cls = $derived(gridClasses({ cols, className }));
-</script>
-
-<div {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</div>
diff --git a/generated/ui/grid/Grid.vue b/generated/ui/grid/Grid.vue
deleted file mode 100644
index b04cf9a..0000000
--- a/generated/ui/grid/Grid.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Grid renders a display:grid container.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { gridClasses } from "./grid.shared";
-
-defineOptions({ name: "Grid", inheritAttrs: false });
-
-const props = defineProps<{
-  cols?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => gridClasses({ cols: props.cols, className: callerClass.value }));
-</script>
-
-<template>
-  <div :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </div>
-</template>
diff --git a/generated/ui/grid/GridCol.html.twig b/generated/ui/grid/GridCol.html.twig
deleted file mode 100644
index ffe2e79..0000000
--- a/generated/ui/grid/GridCol.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.grid — GridCol renders one grid column child. #}
-<div{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('gridColClasses', { 'span': (span|default(0)), 'start': (start|default(0)), 'end': (end|default(0)), 'order': (order|default(0)), 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</div>
diff --git a/generated/ui/grid/GridCol.latte b/generated/ui/grid/GridCol.latte
deleted file mode 100644
index eb898f6..0000000
--- a/generated/ui/grid/GridCol.latte
+++ /dev/null
@@ -1,15 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.grid — GridCol renders one grid column child. *}
-{parameters
-  string $class = '',
-  int $span = 0,
-  int $start = 0,
-  int $end = 0,
-  int $order = 0,
-  array $attrs = [],
-  string $children = '',
-}
-<div n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::gridColClasses(['span' => $span, 'start' => $start, 'end' => $end, 'order' => $order, 'class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/grid/GridCol.svelte b/generated/ui/grid/GridCol.svelte
deleted file mode 100644
index 8667101..0000000
--- a/generated/ui/grid/GridCol.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  GridCol renders one grid column child.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type GridColProps = {
-    span?: number;
-    start?: number;
-    end?: number;
-    order?: number;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { gridColClasses } from "./grid.shared";
-
-  let {
-    span,
-    start,
-    end,
-    order,
-    class: className,
-    children,
-    ...rest
-  }: GridColProps = $props();
-
-  const cls = $derived(gridColClasses({ span, start, end, order, className }));
-</script>
-
-<div {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</div>
diff --git a/generated/ui/grid/GridCol.vue b/generated/ui/grid/GridCol.vue
deleted file mode 100644
index 8b0198b..0000000
--- a/generated/ui/grid/GridCol.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  GridCol renders one grid column child.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { gridColClasses } from "./grid.shared";
-
-defineOptions({ name: "GridCol", inheritAttrs: false });
-
-const props = defineProps<{
-  span?: number;
-  start?: number;
-  end?: number;
-  order?: number;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => gridColClasses({ span: props.span, start: props.start, end: props.end, order: props.order, className: callerClass.value }));
-</script>
-
-<template>
-  <div :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </div>
-</template>
diff --git a/generated/ui/grid/grid.shared.ts b/generated/ui/grid/grid.shared.ts
deleted file mode 100644
index 7bb7dd6..0000000
--- a/generated/ui/grid/grid.shared.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.grid — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import { defaultIfEmpty, intMapOr, mapOr } from "../../utils/expr";
-import gridRecipeJson from "./grid.variants.json";
-
-export const gridRecipe = gridRecipeJson;
-
-/** Grid renders a display:grid container. */
-export type GridBaseProps = {
-  cols?: string;
-};
-
-export type GridClassesInput = {
-  cols?: string;
-  className?: string;
-};
-
-/** Compose Grid classes without rendering — the cross-runtime `asChild` substitute. */
-export function gridClasses(input: GridClassesInput = {}): string {
-  return cn(composeRecipe(gridRecipe, {  }), ((input.className ?? "").includes("grid-cols-") ? "" : mapOr(defaultIfEmpty(input.cols, "1"), { "1": "grid-cols-1", "2": "grid-cols-2", "3": "grid-cols-3", "4": "grid-cols-4", "5": "grid-cols-5", "6": "grid-cols-6", "7": "grid-cols-7", "8": "grid-cols-8", "9": "grid-cols-9", "10": "grid-cols-10", "11": "grid-cols-11", "12": "grid-cols-12", "1-2": "grid-cols-1 md:grid-cols-2", "1-3": "grid-cols-1 md:grid-cols-2 xl:grid-cols-3", "1-4": "grid-cols-1 md:grid-cols-2 xl:grid-cols-4" }, "")), input.className);
-}
-
-/** GridCol renders one grid column child. */
-export type GridColBaseProps = {
-  span?: number;
-  start?: number;
-  end?: number;
-  order?: number;
-};
-
-export type GridColClassesInput = {
-  span?: number;
-  start?: number;
-  end?: number;
-  order?: number;
-  className?: string;
-};
-
-/** Compose GridCol classes without rendering — the cross-runtime `asChild` substitute. */
-export function gridColClasses(input: GridColClassesInput = {}): string {
-  return cn(intMapOr(input.span, { 1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4", 5: "col-span-5", 6: "col-span-6", 7: "col-span-7", 8: "col-span-8", 9: "col-span-9", 10: "col-span-10", 11: "col-span-11", 12: "col-span-12" }, ""), intMapOr(input.start, { 1: "col-start-1", 2: "col-start-2", 3: "col-start-3", 4: "col-start-4", 5: "col-start-5", 6: "col-start-6", 7: "col-start-7", 8: "col-start-8", 9: "col-start-9", 10: "col-start-10", 11: "col-start-11", 12: "col-start-12" }, ""), intMapOr(input.end, { 1: "col-end-1", 2: "col-end-2", 3: "col-end-3", 4: "col-end-4", 5: "col-end-5", 6: "col-end-6", 7: "col-end-7", 8: "col-end-8", 9: "col-end-9", 10: "col-end-10", 11: "col-end-11", 12: "col-end-12" }, ""), intMapOr(input.order, { 1: "order-1", 2: "order-2", 3: "order-3", 4: "order-4", 5: "order-5", 6: "order-6", 7: "order-7", 8: "order-8", 9: "order-9", 10: "order-10", 11: "order-11", 12: "order-12" }, ""), input.className);
-}
diff --git a/generated/ui/grid/grid.solid.tsx b/generated/ui/grid/grid.solid.tsx
deleted file mode 100644
index a3f50b4..0000000
--- a/generated/ui/grid/grid.solid.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Grid lays out children in a CSS grid with optional column wrappers.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { gridClasses, gridColClasses } from "./grid.shared";
-
-/**
- * Grid renders a display:grid container.
- */
-export type GridProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "className" | "children" | "cols"> & {
-  cols?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Grid: Component<GridProps> = (props) => {
-  const [local, rest] = splitProps(props, ["cols", "class", "className", "children"]);
-  const cls = () => gridClasses({ cols: local.cols, className: local.class ?? local.className });
-  return (
-    <div class={cls() || undefined} {...rest}>
-      {local.children}
-    </div>
-  );
-};
-
-/**
- * GridCol renders one grid column child.
- */
-export type GridColProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "className" | "children" | "span" | "start" | "end" | "order"> & {
-  span?: number;
-  start?: number;
-  end?: number;
-  order?: number;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const GridCol: Component<GridColProps> = (props) => {
-  const [local, rest] = splitProps(props, ["span", "start", "end", "order", "class", "className", "children"]);
-  const cls = () => gridColClasses({ span: local.span, start: local.start, end: local.end, order: local.order, className: local.class ?? local.className });
-  return (
-    <div class={cls() || undefined} {...rest}>
-      {local.children}
-    </div>
-  );
-};
diff --git a/generated/ui/grid/grid.tsx b/generated/ui/grid/grid.tsx
deleted file mode 100644
index 9145f5e..0000000
--- a/generated/ui/grid/grid.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Grid lays out children in a CSS grid with optional column wrappers.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
-import { gridClasses, gridColClasses } from "./grid.shared";
-import { Slot } from "../slot/slot";
-
-/**
- * Grid renders a display:grid container.
- */
-export type GridProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children" | "cols"> & {
-  cols?: string;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
-  { cols, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = gridClasses({ cols, className });
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <div ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </div>
-  );
-});
-Grid.displayName = "Grid";
-
-/**
- * GridCol renders one grid column child.
- */
-export type GridColProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children" | "span" | "start" | "end" | "order"> & {
-  span?: number;
-  start?: number;
-  end?: number;
-  order?: number;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const GridCol = forwardRef<HTMLDivElement, GridColProps>(function GridCol(
-  { span, start, end, order, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = gridColClasses({ span, start, end, order, className });
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <div ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </div>
-  );
-});
-GridCol.displayName = "GridCol";
diff --git a/generated/ui/grid/grid.variants.json b/generated/ui/grid/grid.variants.json
deleted file mode 100644
index 03aef69..0000000
--- a/generated/ui/grid/grid.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "grid",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.grid",
-  "keys": []
-}
diff --git a/generated/ui/grid/grid_gen.go b/generated/ui/grid/grid_gen.go
deleted file mode 100644
index 36d65f0..0000000
--- a/generated/ui/grid/grid_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package grid
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed grid.variants.json
-var gridVariantsJSON []byte
-
-// GridVariants is the CVA recipe shared verbatim by all runtimes.
-var GridVariants = uiutils.MustParseVariantRecipe(gridVariantsJSON).ToVariants()
diff --git a/generated/ui/grid/grid_templ.go b/generated/ui/grid/grid_templ.go
deleted file mode 100644
index 20cff06..0000000
--- a/generated/ui/grid/grid_templ.go
+++ /dev/null
@@ -1,191 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Grid lays out children in a CSS grid with optional column wrappers.
-
-
-*/
-
-package grid
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"strings"
-
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// GridProps configures Grid.
-type GridProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Cols — column preset: 1–12 or responsive 1-2, 1-3, 1-4
-	Cols  string
-	Attrs templ.Attributes
-}
-
-// GridClasses composes Grid classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func GridClasses(p GridProps) string {
-	return uiutils.Compose(GridVariants, map[string]string{}, uiutils.If(strings.Contains(p.Class, "grid-cols-"), "", uiutils.MapOr(uiutils.DefaultIfEmpty(p.Cols, "1"), map[string]string{"1": "grid-cols-1", "2": "grid-cols-2", "3": "grid-cols-3", "4": "grid-cols-4", "5": "grid-cols-5", "6": "grid-cols-6", "7": "grid-cols-7", "8": "grid-cols-8", "9": "grid-cols-9", "10": "grid-cols-10", "11": "grid-cols-11", "12": "grid-cols-12", "1-2": "grid-cols-1 md:grid-cols-2", "1-3": "grid-cols-1 md:grid-cols-2 xl:grid-cols-3", "1-4": "grid-cols-1 md:grid-cols-2 xl:grid-cols-4"}, "")), p.Class)
-}
-
-// Grid renders the Grid contract.
-func Grid(p GridProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{GridClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/grid/grid.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// GridColProps configures GridCol.
-type GridColProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Span — col-span-1..12
-	Span int
-	// Start — col-start-1..12
-	Start int
-	// End — col-end-1..12
-	End int
-	// Order — order-1..12
-	Order int
-	Attrs templ.Attributes
-}
-
-// GridColClasses composes GridCol classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func GridColClasses(p GridColProps) string {
-	return uiutils.Cn(uiutils.IntMapOr(int(p.Span), map[int]string{1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4", 5: "col-span-5", 6: "col-span-6", 7: "col-span-7", 8: "col-span-8", 9: "col-span-9", 10: "col-span-10", 11: "col-span-11", 12: "col-span-12"}, ""), uiutils.IntMapOr(int(p.Start), map[int]string{1: "col-start-1", 2: "col-start-2", 3: "col-start-3", 4: "col-start-4", 5: "col-start-5", 6: "col-start-6", 7: "col-start-7", 8: "col-start-8", 9: "col-start-9", 10: "col-start-10", 11: "col-start-11", 12: "col-start-12"}, ""), uiutils.IntMapOr(int(p.End), map[int]string{1: "col-end-1", 2: "col-end-2", 3: "col-end-3", 4: "col-end-4", 5: "col-end-5", 6: "col-end-6", 7: "col-end-7", 8: "col-end-8", 9: "col-end-9", 10: "col-end-10", 11: "col-end-11", 12: "col-end-12"}, ""), uiutils.IntMapOr(int(p.Order), map[int]string{1: "order-1", 2: "order-2", 3: "order-3", 4: "order-4", 5: "order-5", 6: "order-6", 7: "order-7", 8: "order-8", 9: "order-9", 10: "order-10", 11: "order-11", 12: "order-12"}, ""), p.Class)
-}
-
-// GridCol renders the GridCol contract.
-func GridCol(p GridColProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var4 == nil {
-			templ_7745c5c3_Var4 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var5 = []any{GridColClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var5).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/grid/grid.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var4.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/group/Group.html.twig b/generated/ui/group/Group.html.twig
deleted file mode 100644
index 220711d..0000000
--- a/generated/ui/group/Group.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.group — Group renders a horizontal flex container. #}
-{% set uiTag = ui8kit_resolve_tag((tag|default('')), 'div', 'Group') %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('groupClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</{{ uiTag }}>
diff --git a/generated/ui/group/Group.latte b/generated/ui/group/Group.latte
deleted file mode 100644
index bf8b407..0000000
--- a/generated/ui/group/Group.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.group — Group renders a horizontal flex container. *}
-{parameters
-  string $class = '',
-  string $tag = '',
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTag = \UI8Kit\Rt::resolveTag($tag, 'div', 'Group')}
-<div n:tag="$uiTag" n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::groupClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/group/Group.svelte b/generated/ui/group/Group.svelte
deleted file mode 100644
index 13f76aa..0000000
--- a/generated/ui/group/Group.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Group renders a horizontal flex container.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type GroupProps = {
-    tag?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { groupClasses } from "./group.shared";
-  import { resolveTag, TagGroup } from "../../utils/tags";
-
-  let {
-    tag,
-    class: className,
-    children,
-    ...rest
-  }: GroupProps = $props();
-
-  const cls = $derived(groupClasses({ className }));
-  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.Group));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</svelte:element>
diff --git a/generated/ui/group/Group.vue b/generated/ui/group/Group.vue
deleted file mode 100644
index abedb44..0000000
--- a/generated/ui/group/Group.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Group renders a horizontal flex container.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { groupClasses } from "./group.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-defineOptions({ name: "Group", inheritAttrs: false });
-
-const props = defineProps<{
-  tag?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => groupClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => resolveTag(props.tag, "div", TagGroup.Group));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </component>
-</template>
diff --git a/generated/ui/group/group.shared.ts b/generated/ui/group/group.shared.ts
deleted file mode 100644
index ed46db9..0000000
--- a/generated/ui/group/group.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.group — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import groupRecipeJson from "./group.variants.json";
-
-export const groupRecipe = groupRecipeJson;
-
-/** Group renders a horizontal flex container. */
-export type GroupBaseProps = {
-  tag?: string;
-};
-
-export type GroupClassesInput = {
-  className?: string;
-};
-
-/** Compose Group classes without rendering — the cross-runtime `asChild` substitute. */
-export function groupClasses(input: GroupClassesInput = {}): string {
-  return cn(composeRecipe(groupRecipe, {  }), input.className);
-}
diff --git a/generated/ui/group/group.solid.tsx b/generated/ui/group/group.solid.tsx
deleted file mode 100644
index 2a9879e..0000000
--- a/generated/ui/group/group.solid.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Group arranges children in a horizontal flex row.
- * Supports fieldset for related form controls.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { groupClasses } from "./group.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-/**
- * Group renders a horizontal flex container.
- */
-export type GroupProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "tag"> & {
-  tag?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Group: Component<GroupProps> = (props) => {
-  const [local, rest] = splitProps(props, ["tag", "class", "className", "children"]);
-  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.Group);
-  const cls = () => groupClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...rest}>
-      {local.children}
-    </Dynamic>
-  );
-};
diff --git a/generated/ui/group/group.templ b/generated/ui/group/group.templ
deleted file mode 100644
index db95312..0000000
--- a/generated/ui/group/group.templ
+++ /dev/null
@@ -1,54 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-Group arranges children in a horizontal flex row.
-Supports fieldset for related form controls.
-*/
-
-package group
-
-import (
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-// GroupProps configures Group.
-type GroupProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Tag — div, fieldset, or dl. Use fieldset for related form controls.
-	Tag string
-	Attrs templ.Attributes
-}
-
-// GroupClasses composes Group classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func GroupClasses(p GroupProps) string {
-	return uiutils.Compose(GroupVariants, map[string]string{}, p.Class)
-}
-
-// Group renders the Group contract.
-templ Group(p GroupProps) {
-	switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupGroup) {
-		case "fieldset":
-			<fieldset
-				class={ GroupClasses(p) }
-				{ p.Attrs... }
-			>
-				{ children... }
-			</fieldset>
-		case "dl":
-			<dl
-				class={ GroupClasses(p) }
-				{ p.Attrs... }
-			>
-				{ children... }
-			</dl>
-		default:
-			<div
-				class={ GroupClasses(p) }
-				{ p.Attrs... }
-			>
-				{ children... }
-			</div>
-	}
-}
diff --git a/generated/ui/group/group.tsx b/generated/ui/group/group.tsx
deleted file mode 100644
index beadc8e..0000000
--- a/generated/ui/group/group.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Group arranges children in a horizontal flex row.
- * Supports fieldset for related form controls.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
-import { groupClasses } from "./group.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-import { Slot } from "../slot/slot";
-
-/**
- * Group renders a horizontal flex container.
- */
-export type GroupProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
-  tag?: string;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Group = forwardRef<HTMLElement, GroupProps>(function Group(
-  { tag, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = groupClasses({ className });
-  const resolvedTagValue = resolveTag(tag, "div", TagGroup.Group);
-  const Tag = resolvedTagValue as ElementType;
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
-      {children}
-    </Tag>
-  );
-});
-Group.displayName = "Group";
diff --git a/generated/ui/group/group.variants.json b/generated/ui/group/group.variants.json
deleted file mode 100644
index e804824..0000000
--- a/generated/ui/group/group.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "flex items-center",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.group",
-  "keys": []
-}
diff --git a/generated/ui/group/group_gen.go b/generated/ui/group/group_gen.go
deleted file mode 100644
index 92f88bc..0000000
--- a/generated/ui/group/group_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package group
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed group.variants.json
-var groupVariantsJSON []byte
-
-// GroupVariants is the CVA recipe shared verbatim by all runtimes.
-var GroupVariants = uiutils.MustParseVariantRecipe(groupVariantsJSON).ToVariants()
diff --git a/generated/ui/group/group_templ.go b/generated/ui/group/group_templ.go
deleted file mode 100644
index 6bf8061..0000000
--- a/generated/ui/group/group_templ.go
+++ /dev/null
@@ -1,188 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Group arranges children in a horizontal flex row.
-
-
-Supports fieldset for related form controls.
-
-
-*/
-
-package group
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// GroupProps configures Group.
-type GroupProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Tag — div, fieldset, or dl. Use fieldset for related form controls.
-	Tag   string
-	Attrs templ.Attributes
-}
-
-// GroupClasses composes Group classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func GroupClasses(p GroupProps) string {
-	return uiutils.Compose(GroupVariants, map[string]string{}, p.Class)
-}
-
-// Group renders the Group contract.
-func Group(p GroupProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupGroup) {
-		case "fieldset":
-			var templ_7745c5c3_Var2 = []any{GroupClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<fieldset class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/group/group.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</fieldset>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "dl":
-			var templ_7745c5c3_Var4 = []any{GroupClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<dl class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var4).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/group/group.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</dl>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		default:
-			var templ_7745c5c3_Var6 = []any{GroupClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/group/group.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/icon/Icon.svelte b/generated/ui/icon/Icon.svelte
deleted file mode 100644
index 01eac14..0000000
--- a/generated/ui/icon/Icon.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Icon renders a class-based span, svg use, or text fallback host.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { IconSize } from "./icon.shared";
-
-  export type IconProps = {
-    name?: string;
-    type?: string;
-    baseClass?: string;
-    prefix?: string;
-    size?: IconSize;
-    href?: string;
-    title?: string;
-    "aria-label"?: string;
-    decorative?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { iconClasses } from "./icon.shared";
-  import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
-
-  let {
-    name,
-    type,
-    baseClass,
-    prefix,
-    size,
-    href,
-    title,
-    "aria-label": ariaLabel,
-    decorative,
-    class: className,
-    children,
-    ...rest
-  }: IconProps = $props();
-
-  const cls = $derived(iconClasses({ type, size, baseClass, name, prefix, className }));
-  const iconKindValue = $derived(oneOfOr(type, "class", "svg", "text"));
-  const isDecorativeValue = $derived((decorative || (!(isSetStr(title)) && !(isSetStr(ariaLabel)))));
-</script>
-
-{#if eqStr(iconKindValue, "svg")}
-  <svg {...(cls ? { class: cls } : {})} aria-hidden={isDecorativeValue ? "true" : undefined} role={!(isDecorativeValue) ? "img" : undefined} aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined} {...rest}>
-    {#if isSetStr(title)}
-      <title>{title}</title>
-    {/if}
-    {#if isSetStr(href)}
-      <use href={orUndef(href)}></use>
-    {/if}
-    {@render children?.()}
-  </svg>
-{:else if eqStr(iconKindValue, "text")}
-  <span {...(cls ? { class: cls } : {})} aria-hidden={isDecorativeValue ? "true" : undefined} role={!(isDecorativeValue) ? "img" : undefined} aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined} {...rest}>
-    {@render children?.()}
-  </span>
-{:else}
-  <span {...(cls ? { class: cls } : {})} aria-hidden={isDecorativeValue ? "true" : undefined} role={!(isDecorativeValue) ? "img" : undefined} aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined} {...rest}></span>
-{/if}
diff --git a/generated/ui/icon/Icon.vue b/generated/ui/icon/Icon.vue
deleted file mode 100644
index 123a8cf..0000000
--- a/generated/ui/icon/Icon.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Icon renders a class-based span, svg use, or text fallback host.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { iconClasses, type IconSize } from "./icon.shared";
-import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
-
-defineOptions({ name: "Icon", inheritAttrs: false });
-
-const props = defineProps<{
-  name?: string;
-  type?: string;
-  baseClass?: string;
-  prefix?: string;
-  size?: IconSize;
-  href?: string;
-  title?: string;
-  ariaLabel?: string;
-  decorative?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => iconClasses({ type: props.type, size: props.size, baseClass: props.baseClass, name: props.name, prefix: props.prefix, className: callerClass.value }));
-const iconKindValue = computed(() => oneOfOr(props.type, "class", "svg", "text"));
-const isDecorativeValue = computed(() => (props.decorative || (!(isSetStr(props.title)) && !(isSetStr(props.ariaLabel)))));
-</script>
-
-<template>
-  <svg v-if="eqStr(iconKindValue, 'svg')" :class="cls || undefined" :aria-hidden="isDecorativeValue ? 'true' : undefined" :role="!(isDecorativeValue) ? 'img' : undefined" :aria-label="(!(isDecorativeValue) && isSetStr(props.ariaLabel)) ? props.ariaLabel : undefined" v-bind="restAttrs">
-    <title v-if="isSetStr(props.title)">
-      {{ props.title }}
-    </title>
-    <use v-if="isSetStr(props.href)" :href="orUndef(props.href)" />
-    <slot />
-  </svg>
-  <span v-else-if="eqStr(iconKindValue, 'text')" :class="cls || undefined" :aria-hidden="isDecorativeValue ? 'true' : undefined" :role="!(isDecorativeValue) ? 'img' : undefined" :aria-label="(!(isDecorativeValue) && isSetStr(props.ariaLabel)) ? props.ariaLabel : undefined" v-bind="restAttrs">
-    <slot />
-  </span>
-  <span v-else :class="cls || undefined" :aria-hidden="isDecorativeValue ? 'true' : undefined" :role="!(isDecorativeValue) ? 'img' : undefined" :aria-label="(!(isDecorativeValue) && isSetStr(props.ariaLabel)) ? props.ariaLabel : undefined" v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/icon/icon.shared.ts b/generated/ui/icon/icon.shared.ts
deleted file mode 100644
index e606fe9..0000000
--- a/generated/ui/icon/icon.shared.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.icon — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import { concatTrim, eqStr, isSetStr, oneOfOr } from "../../utils/expr";
-import iconRecipeJson from "./icon.variants.json";
-
-export const iconRecipe = iconRecipeJson;
-
-export type IconSize = RecipeKey<typeof iconRecipe, "size">;
-
-/** Icon renders a class-based span, svg use, or text fallback host. */
-export type IconBaseProps = {
-  name?: string;
-  type?: string;
-  baseClass?: string;
-  prefix?: string;
-  size?: IconSize;
-  href?: string;
-  title?: string;
-  ariaLabel?: string;
-  decorative?: boolean;
-};
-
-export type IconClassesInput = {
-  type?: string;
-  size?: IconSize;
-  baseClass?: string;
-  name?: string;
-  prefix?: string;
-  className?: string;
-};
-
-/** Compose Icon classes without rendering — the cross-runtime `asChild` substitute. */
-export function iconClasses(input: IconClassesInput = {}): string {
-  return cn(composeRecipe(iconRecipe, { type: oneOfOr(input.type, "class", "svg", "text") as RecipeKey<typeof iconRecipe, "type">, size: input.size }), (eqStr(oneOfOr(input.type, "class", "svg", "text"), "class") ? input.baseClass : ""), ((eqStr(oneOfOr(input.type, "class", "svg", "text"), "class") && isSetStr(input.name)) ? concatTrim(input.prefix, input.name) : ""), input.className);
-}
diff --git a/generated/ui/icon/icon.solid.tsx b/generated/ui/icon/icon.solid.tsx
deleted file mode 100644
index a369d4e..0000000
--- a/generated/ui/icon/icon.solid.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Icon renders a class-based span, svg use reference, or text fallback.
- * Decorative icons are hidden from assistive technology by default.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { iconClasses, type IconSize } from "./icon.shared";
-import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
-
-/**
- * Icon renders a class-based span, svg use, or text fallback host.
- */
-export type IconProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "name" | "type" | "baseClass" | "prefix" | "size" | "href" | "title" | "aria-label" | "decorative"> & {
-  name?: string;
-  type?: string;
-  baseClass?: string;
-  prefix?: string;
-  size?: IconSize;
-  href?: string;
-  title?: string;
-  "aria-label"?: string;
-  decorative?: boolean;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Icon: Component<IconProps> = (props) => {
-  const [local, rest] = splitProps(props, ["name", "type", "baseClass", "prefix", "size", "href", "title", "aria-label", "decorative", "class", "className", "children"]);
-  const iconKindValue = () => oneOfOr(local.type, "class", "svg", "text");
-  const isDecorativeValue = () => (local.decorative || (!(isSetStr(local.title)) && !(isSetStr(local["aria-label"]))));
-  const cls = () => iconClasses({ type: local.type, size: local.size, baseClass: local.baseClass, name: local.name, prefix: local.prefix, className: local.class ?? local.className });
-  return (
-    eqStr(iconKindValue(), "svg") ? (
-      <svg class={cls() || undefined} aria-hidden={isDecorativeValue() ? "true" : undefined} role={!(isDecorativeValue()) ? "img" : undefined} aria-label={(!(isDecorativeValue()) && isSetStr(local["aria-label"])) ? local["aria-label"] : undefined} {...rest}>
-        {isSetStr(local.title) ? (
-          <title>
-            {local.title}
-          </title>
-        ) : null}
-        {isSetStr(local.href) ? (
-          <use href={orUndef(local.href)} />
-        ) : null}
-        {local.children}
-      </svg>
-    ) : (
-      eqStr(iconKindValue(), "text") ? (
-        <span class={cls() || undefined} aria-hidden={isDecorativeValue() ? "true" : undefined} role={!(isDecorativeValue()) ? "img" : undefined} aria-label={(!(isDecorativeValue()) && isSetStr(local["aria-label"])) ? local["aria-label"] : undefined} {...rest}>
-          {local.children}
-        </span>
-      ) : (
-        <span class={cls() || undefined} aria-hidden={isDecorativeValue() ? "true" : undefined} role={!(isDecorativeValue()) ? "img" : undefined} aria-label={(!(isDecorativeValue()) && isSetStr(local["aria-label"])) ? local["aria-label"] : undefined} {...rest} />
-      )
-    )
-  );
-};
diff --git a/generated/ui/icon/icon.tsx b/generated/ui/icon/icon.tsx
deleted file mode 100644
index 8cf1b83..0000000
--- a/generated/ui/icon/icon.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Icon renders a class-based span, svg use reference, or text fallback.
- * Decorative icons are hidden from assistive technology by default.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type Ref, type SVGProps } from "react";
-import { iconClasses, type IconSize } from "./icon.shared";
-import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
-
-/**
- * Icon renders a class-based span, svg use, or text fallback host.
- */
-export type IconProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "name" | "type" | "baseClass" | "prefix" | "size" | "href" | "title" | "aria-label" | "decorative"> & {
-  name?: string;
-  type?: string;
-  baseClass?: string;
-  prefix?: string;
-  size?: IconSize;
-  href?: string;
-  title?: string;
-  "aria-label"?: string;
-  decorative?: boolean;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Icon = forwardRef<HTMLElement | SVGSVGElement, IconProps>(function Icon(
-  { name, type, baseClass, prefix, size, href, title, "aria-label": ariaLabel, decorative, className, children, ...rest },
-  ref
-) {
-  const cls = iconClasses({ type, size, baseClass, name, prefix, className });
-  const iconKindValue = oneOfOr(type, "class", "svg", "text");
-  const isDecorativeValue = (decorative || (!(isSetStr(title)) && !(isSetStr(ariaLabel))));
-  return (
-    eqStr(iconKindValue, "svg") ? (
-      <svg ref={ref as Ref<SVGSVGElement>} className={cls || undefined} aria-hidden={isDecorativeValue ? "true" : undefined} role={!(isDecorativeValue) ? "img" : undefined} aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined} {...(rest as SVGProps<SVGSVGElement>)}>
-        {isSetStr(title) ? (
-          <title>
-            {title}
-          </title>
-        ) : null}
-        {isSetStr(href) ? (
-          <use href={orUndef(href)} />
-        ) : null}
-        {children}
-      </svg>
-    ) : (
-      eqStr(iconKindValue, "text") ? (
-        <span ref={ref as Ref<HTMLElement>} className={cls || undefined} aria-hidden={isDecorativeValue ? "true" : undefined} role={!(isDecorativeValue) ? "img" : undefined} aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined} {...rest}>
-          {children}
-        </span>
-      ) : (
-        <span ref={ref as Ref<HTMLElement>} className={cls || undefined} aria-hidden={isDecorativeValue ? "true" : undefined} role={!(isDecorativeValue) ? "img" : undefined} aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined} {...rest} />
-      )
-    )
-  );
-});
-Icon.displayName = "Icon";
diff --git a/generated/ui/icon/icon.variants.json b/generated/ui/icon/icon.variants.json
deleted file mode 100644
index 89ff1bf..0000000
--- a/generated/ui/icon/icon.variants.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "inline-block shrink-0",
-  "byKey": {
-    "size": {
-      "default": "h-4 w-4",
-      "lg": "h-6 w-6",
-      "md": "h-5 w-5",
-      "sm": "h-4 w-4",
-      "xl": "h-8 w-8",
-      "xs": "h-3 w-3"
-    },
-    "type": {
-      "class": "",
-      "svg": "",
-      "text": ""
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "type": "class"
-  },
-  "id": "ui.icon",
-  "keys": [
-    "type",
-    "size"
-  ]
-}
diff --git a/generated/ui/icon/icon_gen.go b/generated/ui/icon/icon_gen.go
deleted file mode 100644
index 6dac08b..0000000
--- a/generated/ui/icon/icon_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package icon
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed icon.variants.json
-var iconVariantsJSON []byte
-
-// IconVariants is the CVA recipe shared verbatim by all runtimes.
-var IconVariants = uiutils.MustParseVariantRecipe(iconVariantsJSON).ToVariants()
diff --git a/generated/ui/icon/icon_templ.go b/generated/ui/icon/icon_templ.go
deleted file mode 100644
index c3e2c38..0000000
--- a/generated/ui/icon/icon_templ.go
+++ /dev/null
@@ -1,425 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Icon renders a class-based span, svg use reference, or text fallback.
-
-
-Decorative icons are hidden from assistive technology by default.
-
-
-*/
-
-package icon
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// IconProps configures Icon.
-type IconProps struct {
-	// Name — icon name appended to Prefix in class mode
-	Name string
-	// Type — svg, text, or class (default)
-	Type string
-	// BaseClass — base icon font class in class mode
-	BaseClass string
-	// Prefix — icon font prefix in class mode
-	Prefix string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	// Href — svg use href in svg mode
-	Href string
-	// Title — svg title / accessible name
-	Title string
-	// AriaLabel — accessible name for non-decorative icons
-	AriaLabel string
-	// Decorative — hides the icon from assistive technology
-	Decorative bool
-	Attrs      templ.Attributes
-}
-
-// IconClasses composes Icon classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func IconClasses(p IconProps) string {
-	return uiutils.Compose(IconVariants, map[string]string{
-		"type": uiutils.OneOfOr(p.Type, "class", "svg", "text"),
-		"size": p.Size,
-	}, uiutils.If(uiutils.OneOfOr(p.Type, "class", "svg", "text") == "class", p.BaseClass, ""), uiutils.If((uiutils.OneOfOr(p.Type, "class", "svg", "text") == "class" && uiutils.IsSetStr(p.Name)), uiutils.ConcatTrim(p.Prefix, p.Name), ""), p.Class)
-}
-
-func iconIconKind(p IconProps) string {
-	return uiutils.OneOfOr(p.Type, "class", "svg", "text")
-}
-
-func iconIsDecorative(p IconProps) bool {
-	return (p.Decorative || (!(uiutils.IsSetStr(p.Title)) && !(uiutils.IsSetStr(p.AriaLabel))))
-}
-
-// Icon renders the Icon contract.
-func Icon(p IconProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		if iconIconKind(p) == "svg" {
-			var templ_7745c5c3_Var2 = []any{IconClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<svg class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if iconIsDecorative(p) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " aria-hidden=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var4 string
-				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("true")
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 62, Col: 24}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if !(iconIsDecorative(p)) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " role=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var5 string
-				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("img")
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 65, Col: 16}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if !(iconIsDecorative(p)) && uiutils.IsSetStr(p.AriaLabel) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " aria-label=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var6 string
-				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 68, Col: 28}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if uiutils.IsSetStr(p.Title) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<title>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var7 string
-				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.Title)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 74, Col: 14}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</title>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if uiutils.IsSetStr(p.Href) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<use")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				if uiutils.IsSetStr(p.Href) {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " href=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var8 string
-					templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.Href)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 80, Col: 19}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "></use>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</svg>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		} else if iconIconKind(p) == "text" {
-			var templ_7745c5c3_Var9 = []any{IconClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var9...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<span class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var10 string
-			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var9).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if iconIsDecorative(p) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " aria-hidden=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var11 string
-				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs("true")
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 90, Col: 24}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if !(iconIsDecorative(p)) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, " role=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var12 string
-				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs("img")
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 93, Col: 16}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if !(iconIsDecorative(p)) && uiutils.IsSetStr(p.AriaLabel) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, " aria-label=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var13 string
-				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 96, Col: 28}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</span>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		} else {
-			var templ_7745c5c3_Var14 = []any{IconClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var14...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<span class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var15 string
-			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var14).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if iconIsDecorative(p) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, " aria-hidden=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var16 string
-				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("true")
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 106, Col: 24}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if !(iconIsDecorative(p)) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, " role=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var17 string
-				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs("img")
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 109, Col: 16}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if !(iconIsDecorative(p)) && uiutils.IsSetStr(p.AriaLabel) {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, " aria-label=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var18 string
-				templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/icon/icon.templ`, Line: 112, Col: 28}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "></span>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/iconbadge/IconBadge.html.twig b/generated/ui/iconbadge/IconBadge.html.twig
deleted file mode 100644
index 3eb2887..0000000
--- a/generated/ui/iconbadge/IconBadge.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.iconbadge — IconBadge renders children as the badge content. #}
-<span{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('iconBadgeClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</span>
diff --git a/generated/ui/iconbadge/IconBadge.latte b/generated/ui/iconbadge/IconBadge.latte
deleted file mode 100644
index 17ef065..0000000
--- a/generated/ui/iconbadge/IconBadge.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.iconbadge — IconBadge renders children as the badge content. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<span n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::iconBadgeClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</span>
diff --git a/generated/ui/iconbadge/IconBadge.svelte b/generated/ui/iconbadge/IconBadge.svelte
deleted file mode 100644
index cb786c8..0000000
--- a/generated/ui/iconbadge/IconBadge.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  IconBadge renders children as the badge content.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { IconBadgeSize, IconBadgeVariant } from "./iconbadge.shared";
-
-  export type IconBadgeProps = {
-    variant?: IconBadgeVariant;
-    size?: IconBadgeSize;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { iconBadgeClasses } from "./iconbadge.shared";
-
-  let {
-    variant,
-    size,
-    class: className,
-    children,
-    ...rest
-  }: IconBadgeProps = $props();
-
-  const cls = $derived(iconBadgeClasses({ variant, size, className }));
-</script>
-
-<span {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</span>
diff --git a/generated/ui/iconbadge/IconBadge.vue b/generated/ui/iconbadge/IconBadge.vue
deleted file mode 100644
index ea98abc..0000000
--- a/generated/ui/iconbadge/IconBadge.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  IconBadge renders children as the badge content.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { iconBadgeClasses, type IconBadgeSize, type IconBadgeVariant } from "./iconbadge.shared";
-
-defineOptions({ name: "IconBadge", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: IconBadgeVariant;
-  size?: IconBadgeSize;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => iconBadgeClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <span :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </span>
-</template>
diff --git a/generated/ui/iconbadge/iconbadge.shared.ts b/generated/ui/iconbadge/iconbadge.shared.ts
deleted file mode 100644
index db53710..0000000
--- a/generated/ui/iconbadge/iconbadge.shared.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.iconbadge — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import iconbadgeRecipeJson from "./iconbadge.variants.json";
-
-export const iconbadgeRecipe = iconbadgeRecipeJson;
-
-export type IconBadgeVariant = RecipeKey<typeof iconbadgeRecipe, "variant">;
-export type IconBadgeSize = RecipeKey<typeof iconbadgeRecipe, "size">;
-
-/** IconBadge renders children as the badge content. */
-export type IconBadgeBaseProps = {
-  variant?: IconBadgeVariant;
-  size?: IconBadgeSize;
-};
-
-export type IconBadgeClassesInput = {
-  variant?: IconBadgeVariant;
-  size?: IconBadgeSize;
-  className?: string;
-};
-
-/** Compose IconBadge classes without rendering — the cross-runtime `asChild` substitute. */
-export function iconBadgeClasses(input: IconBadgeClassesInput = {}): string {
-  return cn(composeRecipe(iconbadgeRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/iconbadge/iconbadge.solid.tsx b/generated/ui/iconbadge/iconbadge.solid.tsx
deleted file mode 100644
index e07a695..0000000
--- a/generated/ui/iconbadge/iconbadge.solid.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * IconBadge renders a small icon surface for nav rows, cards, and status blocks.
- * Pass the letter, glyph, or Icon node as children.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { iconBadgeClasses, type IconBadgeSize, type IconBadgeVariant } from "./iconbadge.shared";
-
-/**
- * IconBadge renders children as the badge content.
- */
-export type IconBadgeProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "class" | "className" | "children" | "variant" | "size"> & {
-  variant?: IconBadgeVariant;
-  size?: IconBadgeSize;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const IconBadge: Component<IconBadgeProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "class", "className", "children"]);
-  const cls = () => iconBadgeClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <span class={cls() || undefined} {...rest}>
-      {local.children}
-    </span>
-  );
-};
diff --git a/generated/ui/iconbadge/iconbadge.tsx b/generated/ui/iconbadge/iconbadge.tsx
deleted file mode 100644
index 720999d..0000000
--- a/generated/ui/iconbadge/iconbadge.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * IconBadge renders a small icon surface for nav rows, cards, and status blocks.
- * Pass the letter, glyph, or Icon node as children.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
-import { iconBadgeClasses, type IconBadgeSize, type IconBadgeVariant } from "./iconbadge.shared";
-
-/**
- * IconBadge renders children as the badge content.
- */
-export type IconBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "className" | "children" | "variant" | "size"> & {
-  variant?: IconBadgeVariant;
-  size?: IconBadgeSize;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const IconBadge = forwardRef<HTMLSpanElement, IconBadgeProps>(function IconBadge(
-  { variant, size, className, children, ...rest },
-  ref
-) {
-  const cls = iconBadgeClasses({ variant, size, className });
-  return (
-    <span ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </span>
-  );
-});
-IconBadge.displayName = "IconBadge";
diff --git a/generated/ui/iconbadge/iconbadge.variants.json b/generated/ui/iconbadge/iconbadge.variants.json
deleted file mode 100644
index 266a5dd..0000000
--- a/generated/ui/iconbadge/iconbadge.variants.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "id": "ui.iconbadge",
-  "base": "inline-flex shrink-0 items-center justify-center rounded-md font-semibold",
-  "keys": [
-    "variant",
-    "size"
-  ],
-  "defaults": {
-    "variant": "default",
-    "size": "default"
-  },
-  "byKey": {
-    "variant": {
-      "default": "bg-muted text-muted-foreground",
-      "accent": "bg-accent text-accent-foreground",
-      "secondary": "bg-secondary text-secondary-foreground",
-      "outline": "border border-border text-foreground",
-      "destructive": "bg-destructive text-destructive-foreground"
-    },
-    "size": {
-      "xs": "h-6 w-6 text-xs",
-      "sm": "h-8 w-8 text-xs",
-      "default": "h-10 w-10 text-sm",
-      "lg": "h-12 w-12 text-base"
-    }
-  }
-}
diff --git a/generated/ui/iconbadge/iconbadge_gen.go b/generated/ui/iconbadge/iconbadge_gen.go
deleted file mode 100644
index 25f5231..0000000
--- a/generated/ui/iconbadge/iconbadge_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package iconbadge
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed iconbadge.variants.json
-var iconbadgeVariantsJSON []byte
-
-// IconbadgeVariants is the CVA recipe shared verbatim by all runtimes.
-var IconbadgeVariants = uiutils.MustParseVariantRecipe(iconbadgeVariantsJSON).ToVariants()
diff --git a/generated/ui/iconbadge/iconbadge_templ.go b/generated/ui/iconbadge/iconbadge_templ.go
deleted file mode 100644
index 6eaf740..0000000
--- a/generated/ui/iconbadge/iconbadge_templ.go
+++ /dev/null
@@ -1,112 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-IconBadge renders a small icon surface for nav rows, cards, and status blocks.
-
-
-Pass the letter, glyph, or Icon node as children.
-
-
-*/
-
-package iconbadge
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// IconBadgeProps configures IconBadge.
-type IconBadgeProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// IconBadgeClasses composes IconBadge classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func IconBadgeClasses(p IconBadgeProps) string {
-	return uiutils.Compose(IconbadgeVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// IconBadge renders the IconBadge contract.
-func IconBadge(p IconBadgeProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{IconBadgeClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<span class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/iconbadge/iconbadge.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</span>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/image/Image.html.twig b/generated/ui/image/Image.html.twig
deleted file mode 100644
index 79cc01a..0000000
--- a/generated/ui/image/Image.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.image — Image renders an accessible img element. #}
-<img{{ ui8kit_attr_str({ 'src': ui8kit_or_null((src|default(''))), 'srcset': ui8kit_or_null((srcset|default(''))), 'sizes': ui8kit_or_null((sizes|default(''))), 'alt': (((decorative|default(false))) ? '' : (alt|default(''))), 'width': ui8kit_or_null((width|default(''))), 'height': ui8kit_or_null((height|default(''))), 'loading': ui8kit_one_of_or((loading|default('')), 'lazy', ['eager']), 'decoding': ui8kit_one_of_or((decoding|default('')), 'async', ['sync', 'auto']), 'fetchpriority': ui8kit_or_null((fetchpriority|default(''))), 'class': ui8kit_or_null(ui8kit_classes('imageClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'fit': (fit|default('')), 'position': (position|default('')), 'aspect': (aspect|default('')), 'class': (class|default('')) })), 'id': ui8kit_or_null((id|default(''))), 'aria-hidden': (((decorative|default(false))) ? 'true' : null) }, attrs|default({})) }}>
diff --git a/generated/ui/image/Image.latte b/generated/ui/image/Image.latte
deleted file mode 100644
index ad391d3..0000000
--- a/generated/ui/image/Image.latte
+++ /dev/null
@@ -1,37 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.image — Image renders an accessible img element. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $src = '',
-  string $srcset = '',
-  string $sizes = '',
-  string $alt = '',
-  string $width = '',
-  string $height = '',
-  string $fit = '',
-  string $position = '',
-  string $aspect = '',
-  string $loading = '',
-  string $decoding = '',
-  string $fetchpriority = '',
-  bool $decorative = false,
-  string $id = '',
-  array $attrs = [],
-}
-<img n:attr="[
-  'src' => \UI8Kit\Rt::orNull($src),
-  'srcset' => \UI8Kit\Rt::orNull($srcset),
-  'sizes' => \UI8Kit\Rt::orNull($sizes),
-  'alt' => (($decorative) ? '' : $alt),
-  'width' => \UI8Kit\Rt::orNull($width),
-  'height' => \UI8Kit\Rt::orNull($height),
-  'loading' => \UI8Kit\Rt::oneOfOr($loading, 'lazy', 'eager'),
-  'decoding' => \UI8Kit\Rt::oneOfOr($decoding, 'async', 'sync', 'auto'),
-  'fetchpriority' => \UI8Kit\Rt::orNull($fetchpriority),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::imageClasses(['variant' => $variant, 'size' => $size, 'fit' => $fit, 'position' => $position, 'aspect' => $aspect, 'class' => $class])),
-  'id' => \UI8Kit\Rt::orNull($id),
-  'aria-hidden' => (($decorative) ? 'true' : null),
-  ...$attrs,
-]">
diff --git a/generated/ui/image/Image.svelte b/generated/ui/image/Image.svelte
deleted file mode 100644
index 94b4b88..0000000
--- a/generated/ui/image/Image.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Image renders an accessible img element.
--->
-<script lang="ts" module>
-  import type { ImageAspect, ImageFit, ImagePosition, ImageSize, ImageVariant } from "./image.shared";
-
-  export type ImageProps = {
-    variant?: ImageVariant;
-    size?: ImageSize;
-    alt?: string;
-    fit?: ImageFit;
-    position?: ImagePosition;
-    aspect?: ImageAspect;
-    loading?: string;
-    decoding?: string;
-    decorative?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { imageClasses } from "./image.shared";
-  import { oneOfOr } from "../../utils/expr";
-
-  let {
-    variant,
-    size,
-    alt,
-    fit,
-    position,
-    aspect,
-    loading,
-    decoding,
-    decorative,
-    class: className,
-    ...rest
-  }: ImageProps = $props();
-
-  const cls = $derived(imageClasses({ variant, size, fit, position, aspect, className }));
-</script>
-
-<img alt={((decorative ? "" : alt)) ?? ""} loading={oneOfOr(loading, "lazy", "eager")} decoding={oneOfOr(decoding, "async", "sync", "auto")} {...(cls ? { class: cls } : {})} aria-hidden={decorative ? "true" : undefined} {...rest} />
diff --git a/generated/ui/image/Image.vue b/generated/ui/image/Image.vue
deleted file mode 100644
index 3e1c13e..0000000
--- a/generated/ui/image/Image.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Image renders an accessible img element.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { imageClasses, type ImageAspect, type ImageFit, type ImagePosition, type ImageSize, type ImageVariant } from "./image.shared";
-import { oneOfOr } from "../../utils/expr";
-
-defineOptions({ name: "Image", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: ImageVariant;
-  size?: ImageSize;
-  alt?: string;
-  fit?: ImageFit;
-  position?: ImagePosition;
-  aspect?: ImageAspect;
-  loading?: string;
-  decoding?: string;
-  decorative?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => imageClasses({ variant: props.variant, size: props.size, fit: props.fit, position: props.position, aspect: props.aspect, className: callerClass.value }));
-</script>
-
-<template>
-  <img :alt="((props.decorative ? '' : props.alt)) ?? ''" :loading="oneOfOr(props.loading, 'lazy', 'eager')" :decoding="oneOfOr(props.decoding, 'async', 'sync', 'auto')" :class="cls || undefined" :aria-hidden="props.decorative ? 'true' : undefined" v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/image/Picture.html.twig b/generated/ui/image/Picture.html.twig
deleted file mode 100644
index d2dcc95..0000000
--- a/generated/ui/image/Picture.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.image — Picture renders a responsive image wrapper. #}
-<picture{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('pictureClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</picture>
diff --git a/generated/ui/image/Picture.latte b/generated/ui/image/Picture.latte
deleted file mode 100644
index 2ed6cc6..0000000
--- a/generated/ui/image/Picture.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.image — Picture renders a responsive image wrapper. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<picture n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::pictureClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</picture>
diff --git a/generated/ui/image/Picture.svelte b/generated/ui/image/Picture.svelte
deleted file mode 100644
index 01bdafa..0000000
--- a/generated/ui/image/Picture.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Picture renders a responsive image wrapper.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type PictureProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { pictureClasses } from "./image.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: PictureProps = $props();
-
-  const cls = $derived(pictureClasses({ className }));
-</script>
-
-<picture {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</picture>
diff --git a/generated/ui/image/Picture.vue b/generated/ui/image/Picture.vue
deleted file mode 100644
index d23ab90..0000000
--- a/generated/ui/image/Picture.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Picture renders a responsive image wrapper.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { pictureClasses } from "./image.shared";
-
-defineOptions({ name: "Picture", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => pictureClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <picture :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </picture>
-</template>
diff --git a/generated/ui/image/Source.html.twig b/generated/ui/image/Source.html.twig
deleted file mode 100644
index b3868f2..0000000
--- a/generated/ui/image/Source.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.image — Source renders a source candidate for picture, video, or audio. #}
-<source{{ ui8kit_attr_str({ 'srcset': ui8kit_or_null((srcset|default(''))), 'src': ui8kit_or_null((src|default(''))), 'media': ui8kit_or_null((media|default(''))), 'type': ui8kit_or_null((type|default(''))), 'sizes': ui8kit_or_null((sizes|default(''))) }, attrs|default({})) }}>
diff --git a/generated/ui/image/Source.latte b/generated/ui/image/Source.latte
deleted file mode 100644
index c54e19a..0000000
--- a/generated/ui/image/Source.latte
+++ /dev/null
@@ -1,18 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.image — Source renders a source candidate for picture, video, or audio. *}
-{parameters
-  string $srcset = '',
-  string $src = '',
-  string $media = '',
-  string $type = '',
-  string $sizes = '',
-  array $attrs = [],
-}
-<source n:attr="[
-  'srcset' => \UI8Kit\Rt::orNull($srcset),
-  'src' => \UI8Kit\Rt::orNull($src),
-  'media' => \UI8Kit\Rt::orNull($media),
-  'type' => \UI8Kit\Rt::orNull($type),
-  'sizes' => \UI8Kit\Rt::orNull($sizes),
-  ...$attrs,
-]">
diff --git a/generated/ui/image/Source.svelte b/generated/ui/image/Source.svelte
deleted file mode 100644
index 50da91a..0000000
--- a/generated/ui/image/Source.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Source renders a source candidate for picture, video, or audio.
--->
-<script lang="ts" module>
-
-  export type SourceProps = {
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  let {
-    class: className,
-    ...rest
-  }: SourceProps = $props();
-</script>
-
-<source {...rest} />
diff --git a/generated/ui/image/Source.vue b/generated/ui/image/Source.vue
deleted file mode 100644
index 8f29fb2..0000000
--- a/generated/ui/image/Source.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Source renders a source candidate for picture, video, or audio.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-
-defineOptions({ name: "Source", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-</script>
-
-<template>
-  <source v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/image/image.shared.ts b/generated/ui/image/image.shared.ts
deleted file mode 100644
index 493b46d..0000000
--- a/generated/ui/image/image.shared.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.image — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import imageRecipeJson from "./image.variants.json";
-
-export const imageRecipe = imageRecipeJson;
-
-export type ImageVariant = RecipeKey<typeof imageRecipe, "variant">;
-export type ImageSize = RecipeKey<typeof imageRecipe, "size">;
-export type ImageFit = RecipeKey<typeof imageRecipe, "fit">;
-export type ImagePosition = RecipeKey<typeof imageRecipe, "position">;
-export type ImageAspect = RecipeKey<typeof imageRecipe, "aspect">;
-
-/** Image renders an accessible img element. */
-export type ImageBaseProps = {
-  variant?: ImageVariant;
-  size?: ImageSize;
-  alt?: string;
-  fit?: ImageFit;
-  position?: ImagePosition;
-  aspect?: ImageAspect;
-  loading?: string;
-  decoding?: string;
-  decorative?: boolean;
-};
-
-export type ImageClassesInput = {
-  variant?: ImageVariant;
-  size?: ImageSize;
-  fit?: ImageFit;
-  position?: ImagePosition;
-  aspect?: ImageAspect;
-  className?: string;
-};
-
-/** Compose Image classes without rendering — the cross-runtime `asChild` substitute. */
-export function imageClasses(input: ImageClassesInput = {}): string {
-  return cn(composeRecipe(imageRecipe, { variant: input.variant, size: input.size, fit: input.fit, position: input.position, aspect: input.aspect }), input.className);
-}
-
-/** Picture renders a responsive image wrapper. */
-export type PictureBaseProps = {
-
-};
-
-export type PictureClassesInput = {
-  className?: string;
-};
-
-/** Compose Picture classes without rendering — the cross-runtime `asChild` substitute. */
-export function pictureClasses(input: PictureClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** Source renders a source candidate for picture, video, or audio. */
-export type SourceBaseProps = {
-
-};
diff --git a/generated/ui/image/image.solid.tsx b/generated/ui/image/image.solid.tsx
deleted file mode 100644
index decd38b..0000000
--- a/generated/ui/image/image.solid.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Image renders accessible img, picture, and source primitives.
- * Use Decorative for purely visual images so alt stays empty.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { imageClasses, pictureClasses, type ImageAspect, type ImageFit, type ImagePosition, type ImageSize, type ImageVariant } from "./image.shared";
-import { oneOfOr } from "../../utils/expr";
-
-/**
- * Image renders an accessible img element.
- */
-export type ImageProps = Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "class" | "className" | "children" | "variant" | "size" | "alt" | "fit" | "position" | "aspect" | "loading" | "decoding" | "decorative"> & {
-  variant?: ImageVariant;
-  size?: ImageSize;
-  alt?: string;
-  fit?: ImageFit;
-  position?: ImagePosition;
-  aspect?: ImageAspect;
-  loading?: string;
-  decoding?: string;
-  decorative?: boolean;
-  class?: string;
-  className?: string;
-};
-
-export const Image: Component<ImageProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "alt", "fit", "position", "aspect", "loading", "decoding", "decorative", "class", "className"]);
-  const cls = () => imageClasses({ variant: local.variant, size: local.size, fit: local.fit, position: local.position, aspect: local.aspect, className: local.class ?? local.className });
-  return (
-    <img alt={((local.decorative ? "" : local.alt)) ?? ""} loading={oneOfOr(local.loading, "lazy", "eager")} decoding={oneOfOr(local.decoding, "async", "sync", "auto")} class={cls() || undefined} aria-hidden={local.decorative ? "true" : undefined} {...rest} />
-  );
-};
-
-/**
- * Picture renders a responsive image wrapper.
- */
-export type PictureProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Picture: Component<PictureProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => pictureClasses({ className: local.class ?? local.className });
-  return (
-    <picture class={cls() || undefined} {...rest}>
-      {local.children}
-    </picture>
-  );
-};
-
-/**
- * Source renders a source candidate for picture, video, or audio.
- */
-export type SourceProps = Omit<JSX.SourceHTMLAttributes<HTMLSourceElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-};
-
-export const Source: Component<SourceProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className"]);
-  return (
-    <source {...rest} />
-  );
-};
diff --git a/generated/ui/image/image.tsx b/generated/ui/image/image.tsx
deleted file mode 100644
index b8dd5f5..0000000
--- a/generated/ui/image/image.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Image renders accessible img, picture, and source primitives.
- * Use Decorative for purely visual images so alt stays empty.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ImgHTMLAttributes, type SourceHTMLAttributes } from "react";
-import { imageClasses, pictureClasses, type ImageAspect, type ImageFit, type ImagePosition, type ImageSize, type ImageVariant } from "./image.shared";
-import { oneOfOr } from "../../utils/expr";
-
-/**
- * Image renders an accessible img element.
- */
-export type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "className" | "children" | "variant" | "size" | "alt" | "fit" | "position" | "aspect" | "loading" | "decoding" | "decorative"> & {
-  variant?: ImageVariant;
-  size?: ImageSize;
-  alt?: string;
-  fit?: ImageFit;
-  position?: ImagePosition;
-  aspect?: ImageAspect;
-  loading?: string;
-  decoding?: string;
-  decorative?: boolean;
-  className?: string;
-};
-
-export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
-  { variant, size, alt, fit, position, aspect, loading, decoding, decorative, className, ...rest },
-  ref
-) {
-  const cls = imageClasses({ variant, size, fit, position, aspect, className });
-  return (
-    <img ref={ref} alt={((decorative ? "" : alt)) ?? ""} loading={oneOfOr(loading, "lazy", "eager")} decoding={oneOfOr(decoding, "async", "sync", "auto")} className={cls || undefined} aria-hidden={decorative ? "true" : undefined} {...rest} />
-  );
-});
-Image.displayName = "Image";
-
-/**
- * Picture renders a responsive image wrapper.
- */
-export type PictureProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Picture = forwardRef<HTMLElement, PictureProps>(function Picture(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = pictureClasses({ className });
-  return (
-    <picture ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </picture>
-  );
-});
-Picture.displayName = "Picture";
-
-/**
- * Source renders a source candidate for picture, video, or audio.
- */
-export type SourceProps = Omit<SourceHTMLAttributes<HTMLSourceElement>, "className" | "children"> & {
-  className?: string;
-};
-
-export const Source = forwardRef<HTMLSourceElement, SourceProps>(function Source(
-  { className, ...rest },
-  ref
-) {
-  return (
-    <source ref={ref} {...rest} />
-  );
-});
-Source.displayName = "Source";
diff --git a/generated/ui/image/image.variants.json b/generated/ui/image/image.variants.json
deleted file mode 100644
index 985bb30..0000000
--- a/generated/ui/image/image.variants.json
+++ /dev/null
@@ -1,61 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "block max-w-full",
-  "byKey": {
-    "aspect": {
-      "auto": "aspect-auto",
-      "square": "aspect-square",
-      "video": "aspect-video"
-    },
-    "fit": {
-      "contain": "object-contain",
-      "cover": "object-cover",
-      "fill": "object-fill",
-      "none": "object-none",
-      "scale-down": "object-scale-down"
-    },
-    "position": {
-      "bottom": "object-bottom",
-      "center": "object-center",
-      "left": "object-left",
-      "left-bottom": "object-left-bottom",
-      "left-top": "object-left-top",
-      "right": "object-right",
-      "right-bottom": "object-right-bottom",
-      "right-top": "object-right-top",
-      "top": "object-top"
-    },
-    "size": {
-      "auto": "",
-      "default": "",
-      "full": "h-full w-full",
-      "lg": "h-16 w-16",
-      "md": "h-12 w-12",
-      "sm": "h-8 w-8",
-      "xl": "h-24 w-24",
-      "xs": "h-6 w-6"
-    },
-    "variant": {
-      "avatar": "rounded-full",
-      "default": "",
-      "logo": "object-contain",
-      "rounded": "rounded-md",
-      "thumbnail": "rounded-md border border-border"
-    }
-  },
-  "defaults": {
-    "aspect": "auto",
-    "fit": "cover",
-    "position": "center",
-    "size": "auto",
-    "variant": "default"
-  },
-  "id": "ui.image",
-  "keys": [
-    "variant",
-    "size",
-    "fit",
-    "position",
-    "aspect"
-  ]
-}
diff --git a/generated/ui/image/image_gen.go b/generated/ui/image/image_gen.go
deleted file mode 100644
index 516da3d..0000000
--- a/generated/ui/image/image_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package image
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed image.variants.json
-var imageVariantsJSON []byte
-
-// ImageVariants is the CVA recipe shared verbatim by all runtimes.
-var ImageVariants = uiutils.MustParseVariantRecipe(imageVariantsJSON).ToVariants()
diff --git a/generated/ui/image/image_templ.go b/generated/ui/image/image_templ.go
deleted file mode 100644
index c8dd3f0..0000000
--- a/generated/ui/image/image_templ.go
+++ /dev/null
@@ -1,551 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Image renders accessible img, picture, and source primitives.
-
-
-Use Decorative for purely visual images so alt stays empty.
-
-
-*/
-
-package image
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// ImageProps configures Image.
-type ImageProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class  string
-	Src    string
-	SrcSet string
-	Sizes  string
-	// Alt — alternative text; ignored when Decorative
-	Alt    string
-	Width  string
-	Height string
-	// Fit — object-fit preset
-	Fit string
-	// Position — object-position preset
-	Position string
-	// Aspect — aspect-ratio preset
-	Aspect string
-	// Loading — eager or lazy (default lazy)
-	Loading string
-	// Decoding — sync, auto, or async (default async)
-	Decoding      string
-	FetchPriority string
-	// Decorative — marks the image as purely presentational
-	Decorative bool
-	ID         string
-	Attrs      templ.Attributes
-}
-
-// ImageClasses composes Image classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func ImageClasses(p ImageProps) string {
-	return uiutils.Compose(ImageVariants, map[string]string{
-		"variant":  p.Variant,
-		"size":     p.Size,
-		"fit":      p.Fit,
-		"position": p.Position,
-		"aspect":   p.Aspect,
-	}, p.Class)
-}
-
-// Image renders the Image contract.
-func Image(p ImageProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{ImageClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<img")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Src) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " src=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(p.Src)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 62, Col: 14}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.SrcSet) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " srcset=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.SrcSet)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 65, Col: 20}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Sizes) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " sizes=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.Sizes)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 68, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " alt=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.If(p.Decorative, "", p.Alt))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 70, Col: 43}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Width) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " width=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.Width)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 72, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Height) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " height=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.Height)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 75, Col: 20}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " loading=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var9 string
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.OneOfOr(p.Loading, "lazy", "eager"))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 77, Col: 55}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\" decoding=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var10 string
-		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.OneOfOr(p.Decoding, "async", "sync", "auto"))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 78, Col: 65}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.FetchPriority) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, " fetchpriority=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var11 string
-			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(p.FetchPriority)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 80, Col: 34}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var12 string
-		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 84, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Decorative {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, " aria-hidden=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var14 string
-			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs("true")
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 87, Col: 23}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// PictureProps configures Picture.
-type PictureProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// PictureClasses composes Picture classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func PictureClasses(p PictureProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// Picture renders the Picture contract.
-func Picture(p PictureProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var15 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var15 == nil {
-			templ_7745c5c3_Var15 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var16 = []any{PictureClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var16...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "<picture class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var17 string
-		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var16).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var15.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</picture>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// SourceProps configures Source.
-type SourceProps struct {
-	SrcSet string
-	Src    string
-	Media  string
-	Type   string
-	Sizes  string
-	Attrs  templ.Attributes
-}
-
-// Source renders the Source contract.
-func Source(p SourceProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var18 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var18 == nil {
-			templ_7745c5c3_Var18 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<source")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.SrcSet) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, " srcset=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var19 string
-			templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(p.SrcSet)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 130, Col: 20}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Src) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, " src=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var20 string
-			templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(p.Src)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 133, Col: 14}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Media) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, " media=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var21 string
-			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(p.Media)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 136, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Type) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, " type=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var22 string
-			templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(p.Type)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 139, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Sizes) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, " sizes=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var23 string
-			templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(p.Sizes)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/image/image.templ`, Line: 142, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/index.solid.ts b/generated/ui/index.solid.ts
deleted file mode 100644
index f20c640..0000000
--- a/generated/ui/index.solid.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// SolidJS barrel.
-
-export * from "./alert/alert.solid";
-export * from "./badge/badge.solid";
-export * from "./block/block.solid";
-export * from "./box/box.solid";
-export * from "./breadcrumb/breadcrumb.solid";
-export * from "./button/button.solid";
-export * from "./card/card.solid";
-export * from "./checkbox/checkbox.solid";
-export * from "./container/container.solid";
-export * from "./dialog/dialog.solid";
-export * from "./disclosure/disclosure.solid";
-export * from "./form/form.solid";
-export * from "./form/controls.solid";
-export * from "./grid/grid.solid";
-export * from "./group/group.solid";
-export * from "./icon/icon.solid";
-export * from "./iconbadge/iconbadge.solid";
-export * from "./image/image.solid";
-export * from "./inline/inline.solid";
-export * from "./input/input.solid";
-export * from "./label/label.solid";
-export * from "./linebreak/linebreak.solid";
-export * from "./link/link.solid";
-export * from "./list/list.solid";
-export * from "./radio/radio.solid";
-export * from "./select/select.solid";
-export * from "./separator/separator.solid";
-export * from "./stack/stack.solid";
-export * from "./switch/switch.solid";
-export * from "./table/table.solid";
-export * from "./text/text.solid";
-export * from "./textarea/textarea.solid";
-export * from "./title/title.solid";
-export * from "./shared";
diff --git a/generated/ui/index.svelte.ts b/generated/ui/index.svelte.ts
deleted file mode 100644
index 80a0b85..0000000
--- a/generated/ui/index.svelte.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// Svelte 5 barrel.
-
-export { default as Alert } from "./alert/Alert.svelte";
-export type { AlertProps } from "./alert/Alert.svelte";
-export { default as Badge } from "./badge/Badge.svelte";
-export type { BadgeProps } from "./badge/Badge.svelte";
-export { default as Block } from "./block/Block.svelte";
-export type { BlockProps } from "./block/Block.svelte";
-export { default as Box } from "./box/Box.svelte";
-export type { BoxProps } from "./box/Box.svelte";
-export { default as Breadcrumb } from "./breadcrumb/Breadcrumb.svelte";
-export type { BreadcrumbProps } from "./breadcrumb/Breadcrumb.svelte";
-export { default as Button } from "./button/Button.svelte";
-export type { ButtonProps } from "./button/Button.svelte";
-export { default as Card } from "./card/Card.svelte";
-export type { CardProps } from "./card/Card.svelte";
-export { default as CardHeader } from "./card/CardHeader.svelte";
-export type { CardHeaderProps } from "./card/CardHeader.svelte";
-export { default as CardTitle } from "./card/CardTitle.svelte";
-export type { CardTitleProps } from "./card/CardTitle.svelte";
-export { default as CardDescription } from "./card/CardDescription.svelte";
-export type { CardDescriptionProps } from "./card/CardDescription.svelte";
-export { default as CardContent } from "./card/CardContent.svelte";
-export type { CardContentProps } from "./card/CardContent.svelte";
-export { default as CardFooter } from "./card/CardFooter.svelte";
-export type { CardFooterProps } from "./card/CardFooter.svelte";
-export { default as Checkbox } from "./checkbox/Checkbox.svelte";
-export type { CheckboxProps } from "./checkbox/Checkbox.svelte";
-export { default as Container } from "./container/Container.svelte";
-export type { ContainerProps } from "./container/Container.svelte";
-export { default as Dialog } from "./dialog/Dialog.svelte";
-export type { DialogProps } from "./dialog/Dialog.svelte";
-export { default as Disclosure } from "./disclosure/Disclosure.svelte";
-export type { DisclosureProps } from "./disclosure/Disclosure.svelte";
-export { default as Summary } from "./disclosure/Summary.svelte";
-export type { SummaryProps } from "./disclosure/Summary.svelte";
-export { default as Form } from "./form/Form.svelte";
-export type { FormProps } from "./form/Form.svelte";
-export { default as FormItem } from "./form/FormItem.svelte";
-export type { FormItemProps } from "./form/FormItem.svelte";
-export { default as FormDescription } from "./form/FormDescription.svelte";
-export type { FormDescriptionProps } from "./form/FormDescription.svelte";
-export { default as FormMessage } from "./form/FormMessage.svelte";
-export type { FormMessageProps } from "./form/FormMessage.svelte";
-export { default as Fieldset } from "./form/Fieldset.svelte";
-export type { FieldsetProps } from "./form/Fieldset.svelte";
-export { default as Legend } from "./form/Legend.svelte";
-export type { LegendProps } from "./form/Legend.svelte";
-export { default as DataList } from "./form/DataList.svelte";
-export type { DataListProps } from "./form/DataList.svelte";
-export { default as DataOption } from "./form/DataOption.svelte";
-export type { DataOptionProps } from "./form/DataOption.svelte";
-export { default as Output } from "./form/Output.svelte";
-export type { OutputProps } from "./form/Output.svelte";
-export { default as Meter } from "./form/Meter.svelte";
-export type { MeterProps } from "./form/Meter.svelte";
-export { default as Progress } from "./form/Progress.svelte";
-export type { ProgressProps } from "./form/Progress.svelte";
-export { default as Grid } from "./grid/Grid.svelte";
-export type { GridProps } from "./grid/Grid.svelte";
-export { default as GridCol } from "./grid/GridCol.svelte";
-export type { GridColProps } from "./grid/GridCol.svelte";
-export { default as Group } from "./group/Group.svelte";
-export type { GroupProps } from "./group/Group.svelte";
-export { default as Icon } from "./icon/Icon.svelte";
-export type { IconProps } from "./icon/Icon.svelte";
-export { default as IconBadge } from "./iconbadge/IconBadge.svelte";
-export type { IconBadgeProps } from "./iconbadge/IconBadge.svelte";
-export { default as Image } from "./image/Image.svelte";
-export type { ImageProps } from "./image/Image.svelte";
-export { default as Picture } from "./image/Picture.svelte";
-export type { PictureProps } from "./image/Picture.svelte";
-export { default as Source } from "./image/Source.svelte";
-export type { SourceProps } from "./image/Source.svelte";
-export { default as Inline } from "./inline/Inline.svelte";
-export type { InlineProps } from "./inline/Inline.svelte";
-export { default as Input } from "./input/Input.svelte";
-export type { InputProps } from "./input/Input.svelte";
-export { default as Label } from "./label/Label.svelte";
-export type { LabelProps } from "./label/Label.svelte";
-export { default as Break } from "./linebreak/Break.svelte";
-export type { BreakProps } from "./linebreak/Break.svelte";
-export { default as Link } from "./link/Link.svelte";
-export type { LinkProps } from "./link/Link.svelte";
-export { default as List } from "./list/List.svelte";
-export type { ListProps } from "./list/List.svelte";
-export { default as ListItem } from "./list/ListItem.svelte";
-export type { ListItemProps } from "./list/ListItem.svelte";
-export { default as Radio } from "./radio/Radio.svelte";
-export type { RadioProps } from "./radio/Radio.svelte";
-export { default as Select } from "./select/Select.svelte";
-export type { SelectProps } from "./select/Select.svelte";
-export { default as SelectOption } from "./select/SelectOption.svelte";
-export type { SelectOptionProps } from "./select/SelectOption.svelte";
-export { default as OptGroup } from "./select/OptGroup.svelte";
-export type { OptGroupProps } from "./select/OptGroup.svelte";
-export { default as Separator } from "./separator/Separator.svelte";
-export type { SeparatorProps } from "./separator/Separator.svelte";
-export { default as Stack } from "./stack/Stack.svelte";
-export type { StackProps } from "./stack/Stack.svelte";
-export { default as Switch } from "./switch/Switch.svelte";
-export type { SwitchProps } from "./switch/Switch.svelte";
-export { default as Table } from "./table/Table.svelte";
-export type { TableProps } from "./table/Table.svelte";
-export { default as TableCaption } from "./table/TableCaption.svelte";
-export type { TableCaptionProps } from "./table/TableCaption.svelte";
-export { default as TableHead } from "./table/TableHead.svelte";
-export type { TableHeadProps } from "./table/TableHead.svelte";
-export { default as TableBody } from "./table/TableBody.svelte";
-export type { TableBodyProps } from "./table/TableBody.svelte";
-export { default as TableFoot } from "./table/TableFoot.svelte";
-export type { TableFootProps } from "./table/TableFoot.svelte";
-export { default as TableRow } from "./table/TableRow.svelte";
-export type { TableRowProps } from "./table/TableRow.svelte";
-export { default as TableHeadCell } from "./table/TableHeadCell.svelte";
-export type { TableHeadCellProps } from "./table/TableHeadCell.svelte";
-export { default as TableCell } from "./table/TableCell.svelte";
-export type { TableCellProps } from "./table/TableCell.svelte";
-export { default as TableColGroup } from "./table/TableColGroup.svelte";
-export type { TableColGroupProps } from "./table/TableColGroup.svelte";
-export { default as TableCol } from "./table/TableCol.svelte";
-export type { TableColProps } from "./table/TableCol.svelte";
-export { default as Text } from "./text/Text.svelte";
-export type { TextProps } from "./text/Text.svelte";
-export { default as Textarea } from "./textarea/Textarea.svelte";
-export type { TextareaProps } from "./textarea/Textarea.svelte";
-export { default as Title } from "./title/Title.svelte";
-export type { TitleProps } from "./title/Title.svelte";
-export * from "./shared";
diff --git a/generated/ui/index.ts b/generated/ui/index.ts
deleted file mode 100644
index 67e3b28..0000000
--- a/generated/ui/index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// React barrel.
-
-export * from "./alert/alert";
-export * from "./badge/badge";
-export * from "./block/block";
-export * from "./box/box";
-export * from "./breadcrumb/breadcrumb";
-export * from "./button/button";
-export * from "./card/card";
-export * from "./checkbox/checkbox";
-export * from "./container/container";
-export * from "./dialog/dialog";
-export * from "./disclosure/disclosure";
-export * from "./form/form";
-export * from "./form/controls";
-export * from "./grid/grid";
-export * from "./group/group";
-export * from "./icon/icon";
-export * from "./iconbadge/iconbadge";
-export * from "./image/image";
-export * from "./inline/inline";
-export * from "./input/input";
-export * from "./label/label";
-export * from "./linebreak/linebreak";
-export * from "./link/link";
-export * from "./list/list";
-export * from "./radio/radio";
-export * from "./select/select";
-export * from "./separator/separator";
-export * from "./stack/stack";
-export * from "./switch/switch";
-export * from "./table/table";
-export * from "./text/text";
-export * from "./textarea/textarea";
-export * from "./title/title";
-export * from "./slot/slot";
-export * from "./shared";
diff --git a/generated/ui/index.vue.ts b/generated/ui/index.vue.ts
deleted file mode 100644
index d61d853..0000000
--- a/generated/ui/index.vue.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// Vue 3 barrel.
-
-export { default as Alert } from "./alert/Alert.vue";
-export { default as Badge } from "./badge/Badge.vue";
-export { default as Block } from "./block/Block.vue";
-export { default as Box } from "./box/Box.vue";
-export { default as Breadcrumb } from "./breadcrumb/Breadcrumb.vue";
-export { default as Button } from "./button/Button.vue";
-export { default as Card } from "./card/Card.vue";
-export { default as CardHeader } from "./card/CardHeader.vue";
-export { default as CardTitle } from "./card/CardTitle.vue";
-export { default as CardDescription } from "./card/CardDescription.vue";
-export { default as CardContent } from "./card/CardContent.vue";
-export { default as CardFooter } from "./card/CardFooter.vue";
-export { default as Checkbox } from "./checkbox/Checkbox.vue";
-export { default as Container } from "./container/Container.vue";
-export { default as Dialog } from "./dialog/Dialog.vue";
-export { default as Disclosure } from "./disclosure/Disclosure.vue";
-export { default as Summary } from "./disclosure/Summary.vue";
-export { default as Form } from "./form/Form.vue";
-export { default as FormItem } from "./form/FormItem.vue";
-export { default as FormDescription } from "./form/FormDescription.vue";
-export { default as FormMessage } from "./form/FormMessage.vue";
-export { default as Fieldset } from "./form/Fieldset.vue";
-export { default as Legend } from "./form/Legend.vue";
-export { default as DataList } from "./form/DataList.vue";
-export { default as DataOption } from "./form/DataOption.vue";
-export { default as Output } from "./form/Output.vue";
-export { default as Meter } from "./form/Meter.vue";
-export { default as Progress } from "./form/Progress.vue";
-export { default as Grid } from "./grid/Grid.vue";
-export { default as GridCol } from "./grid/GridCol.vue";
-export { default as Group } from "./group/Group.vue";
-export { default as Icon } from "./icon/Icon.vue";
-export { default as IconBadge } from "./iconbadge/IconBadge.vue";
-export { default as Image } from "./image/Image.vue";
-export { default as Picture } from "./image/Picture.vue";
-export { default as Source } from "./image/Source.vue";
-export { default as Inline } from "./inline/Inline.vue";
-export { default as Input } from "./input/Input.vue";
-export { default as Label } from "./label/Label.vue";
-export { default as Break } from "./linebreak/Break.vue";
-export { default as Link } from "./link/Link.vue";
-export { default as List } from "./list/List.vue";
-export { default as ListItem } from "./list/ListItem.vue";
-export { default as Radio } from "./radio/Radio.vue";
-export { default as Select } from "./select/Select.vue";
-export { default as SelectOption } from "./select/SelectOption.vue";
-export { default as OptGroup } from "./select/OptGroup.vue";
-export { default as Separator } from "./separator/Separator.vue";
-export { default as Stack } from "./stack/Stack.vue";
-export { default as Switch } from "./switch/Switch.vue";
-export { default as Table } from "./table/Table.vue";
-export { default as TableCaption } from "./table/TableCaption.vue";
-export { default as TableHead } from "./table/TableHead.vue";
-export { default as TableBody } from "./table/TableBody.vue";
-export { default as TableFoot } from "./table/TableFoot.vue";
-export { default as TableRow } from "./table/TableRow.vue";
-export { default as TableHeadCell } from "./table/TableHeadCell.vue";
-export { default as TableCell } from "./table/TableCell.vue";
-export { default as TableColGroup } from "./table/TableColGroup.vue";
-export { default as TableCol } from "./table/TableCol.vue";
-export { default as Text } from "./text/Text.vue";
-export { default as Textarea } from "./textarea/Textarea.vue";
-export { default as Title } from "./title/Title.vue";
-export * from "./shared";
diff --git a/generated/ui/inline/Inline.html.twig b/generated/ui/inline/Inline.html.twig
deleted file mode 100644
index 45b7faa..0000000
--- a/generated/ui/inline/Inline.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.inline — Inline renders a span element with inline copy classes. #}
-<span{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('inlineClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</span>
diff --git a/generated/ui/inline/Inline.latte b/generated/ui/inline/Inline.latte
deleted file mode 100644
index 7b9a097..0000000
--- a/generated/ui/inline/Inline.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.inline — Inline renders a span element with inline copy classes. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<span n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::inlineClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</span>
diff --git a/generated/ui/inline/Inline.svelte b/generated/ui/inline/Inline.svelte
deleted file mode 100644
index 6867b8e..0000000
--- a/generated/ui/inline/Inline.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Inline renders a span element with inline copy classes.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type InlineProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { inlineClasses } from "./inline.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: InlineProps = $props();
-
-  const cls = $derived(inlineClasses({ className }));
-</script>
-
-<span {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</span>
diff --git a/generated/ui/inline/Inline.vue b/generated/ui/inline/Inline.vue
deleted file mode 100644
index f51539a..0000000
--- a/generated/ui/inline/Inline.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Inline renders a span element with inline copy classes.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { inlineClasses } from "./inline.shared";
-
-defineOptions({ name: "Inline", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => inlineClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <span :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </span>
-</template>
diff --git a/generated/ui/inline/inline.shared.ts b/generated/ui/inline/inline.shared.ts
deleted file mode 100644
index ce94731..0000000
--- a/generated/ui/inline/inline.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.inline — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import inlineRecipeJson from "./inline.variants.json";
-
-export const inlineRecipe = inlineRecipeJson;
-
-/** Inline renders a span element with inline copy classes. */
-export type InlineBaseProps = {
-
-};
-
-export type InlineClassesInput = {
-  className?: string;
-};
-
-/** Compose Inline classes without rendering — the cross-runtime `asChild` substitute. */
-export function inlineClasses(input: InlineClassesInput = {}): string {
-  return cn(composeRecipe(inlineRecipe, {  }), input.className);
-}
diff --git a/generated/ui/inline/inline.solid.tsx b/generated/ui/inline/inline.solid.tsx
deleted file mode 100644
index b585657..0000000
--- a/generated/ui/inline/inline.solid.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Inline renders inline copy as a span. Use Text for paragraph blocks and
- * Title (as 1–6) for headings.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { inlineClasses } from "./inline.shared";
-
-/**
- * Inline renders a span element with inline copy classes.
- */
-export type InlineProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Inline: Component<InlineProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => inlineClasses({ className: local.class ?? local.className });
-  return (
-    <span class={cls() || undefined} {...rest}>
-      {local.children}
-    </span>
-  );
-};
diff --git a/generated/ui/inline/inline.tsx b/generated/ui/inline/inline.tsx
deleted file mode 100644
index c18b70d..0000000
--- a/generated/ui/inline/inline.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Inline renders inline copy as a span. Use Text for paragraph blocks and
- * Title (as 1–6) for headings.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
-import { inlineClasses } from "./inline.shared";
-import { Slot } from "../slot/slot";
-
-/**
- * Inline renders a span element with inline copy classes.
- */
-export type InlineProps = Omit<HTMLAttributes<HTMLSpanElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Inline = forwardRef<HTMLSpanElement, InlineProps>(function Inline(
-  { className, children, asChild, ...rest },
-  ref
-) {
-  const cls = inlineClasses({ className });
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <span ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </span>
-  );
-});
-Inline.displayName = "Inline";
diff --git a/generated/ui/inline/inline.variants.json b/generated/ui/inline/inline.variants.json
deleted file mode 100644
index 841bf3a..0000000
--- a/generated/ui/inline/inline.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "id": "ui.inline",
-  "base": "",
-  "keys": [],
-  "defaults": {},
-  "byKey": {}
-}
diff --git a/generated/ui/inline/inline_gen.go b/generated/ui/inline/inline_gen.go
deleted file mode 100644
index 8157879..0000000
--- a/generated/ui/inline/inline_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package inline
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed inline.variants.json
-var inlineVariantsJSON []byte
-
-// InlineVariants is the CVA recipe shared verbatim by all runtimes.
-var InlineVariants = uiutils.MustParseVariantRecipe(inlineVariantsJSON).ToVariants()
diff --git a/generated/ui/inline/inline_templ.go b/generated/ui/inline/inline_templ.go
deleted file mode 100644
index 1fe606c..0000000
--- a/generated/ui/inline/inline_templ.go
+++ /dev/null
@@ -1,105 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Inline renders inline copy as a span. Use Text for paragraph blocks and
-
-
-Title (as 1–6) for headings.
-
-
-*/
-
-package inline
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// InlineProps configures Inline.
-type InlineProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// InlineClasses composes Inline classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func InlineClasses(p InlineProps) string {
-	return uiutils.Compose(InlineVariants, map[string]string{}, p.Class)
-}
-
-// Inline renders the Inline contract.
-func Inline(p InlineProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{InlineClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<span class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/inline/inline.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</span>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/input/Input.html.twig b/generated/ui/input/Input.html.twig
deleted file mode 100644
index 836c987..0000000
--- a/generated/ui/input/Input.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.input — Input renders a styled single-line form control. #}
-<input{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'type': ui8kit_default_if_empty((type|default('')), 'text'), 'name': ui8kit_or_null((name|default(''))), 'value': ui8kit_or_null((value|default(''))), 'placeholder': ui8kit_or_null((placeholder|default(''))), 'autocomplete': ui8kit_or_null((autocomplete|default(''))), 'min': ui8kit_or_null((min|default(''))), 'max': ui8kit_or_null((max|default(''))), 'class': ui8kit_or_null(ui8kit_classes('inputClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'disabled': (disabled|default(false)), 'required': (required|default(false)), 'role': ui8kit_or_null((role|default(''))), 'tabindex': ui8kit_or_null((tabindex|default(''))), 'aria-label': ui8kit_or_null((ariaLabel|default(''))) }, attrs|default({})) }}>
diff --git a/generated/ui/input/Input.latte b/generated/ui/input/Input.latte
deleted file mode 100644
index 624e49b..0000000
--- a/generated/ui/input/Input.latte
+++ /dev/null
@@ -1,38 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.input — Input renders a styled single-line form control. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $type = '',
-  string $name = '',
-  string $value = '',
-  string $placeholder = '',
-  bool $disabled = false,
-  bool $required = false,
-  string $autocomplete = '',
-  string $min = '',
-  string $max = '',
-  string $id = '',
-  string $role = '',
-  string $tabindex = '',
-  string $ariaLabel = '',
-  array $attrs = [],
-}
-<input n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'type' => \UI8Kit\Rt::defaultIfEmpty($type, 'text'),
-  'name' => \UI8Kit\Rt::orNull($name),
-  'value' => \UI8Kit\Rt::orNull($value),
-  'placeholder' => \UI8Kit\Rt::orNull($placeholder),
-  'autocomplete' => \UI8Kit\Rt::orNull($autocomplete),
-  'min' => \UI8Kit\Rt::orNull($min),
-  'max' => \UI8Kit\Rt::orNull($max),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::inputClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'disabled' => $disabled,
-  'required' => $required,
-  'role' => \UI8Kit\Rt::orNull($role),
-  'tabindex' => \UI8Kit\Rt::orNull($tabindex),
-  'aria-label' => \UI8Kit\Rt::orNull($ariaLabel),
-  ...$attrs,
-]">
diff --git a/generated/ui/input/Input.svelte b/generated/ui/input/Input.svelte
deleted file mode 100644
index e8d9d1b..0000000
--- a/generated/ui/input/Input.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Input renders a styled single-line form control.
--->
-<script lang="ts" module>
-  import type { InputSize, InputVariant } from "./input.shared";
-
-  export type InputProps = {
-    variant?: InputVariant;
-    size?: InputSize;
-    type?: string;
-    disabled?: boolean;
-    required?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { inputClasses } from "./input.shared";
-  import { defaultIfEmpty } from "../../utils/expr";
-
-  let {
-    variant,
-    size,
-    type,
-    disabled,
-    required,
-    class: className,
-    ...rest
-  }: InputProps = $props();
-
-  const cls = $derived(inputClasses({ variant, size, className }));
-</script>
-
-<input type={defaultIfEmpty(type, "text")} {...(cls ? { class: cls } : {})} disabled={disabled || undefined} required={required || undefined} {...rest} />
diff --git a/generated/ui/input/Input.vue b/generated/ui/input/Input.vue
deleted file mode 100644
index c14b0dd..0000000
--- a/generated/ui/input/Input.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Input renders a styled single-line form control.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { inputClasses, type InputSize, type InputVariant } from "./input.shared";
-import { defaultIfEmpty } from "../../utils/expr";
-
-defineOptions({ name: "Input", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: InputVariant;
-  size?: InputSize;
-  type?: string;
-  disabled?: boolean;
-  required?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => inputClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <input :type="defaultIfEmpty(props.type, 'text')" :class="cls || undefined" :disabled="props.disabled || undefined" :required="props.required || undefined" v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/input/input.shared.ts b/generated/ui/input/input.shared.ts
deleted file mode 100644
index 62d3b4b..0000000
--- a/generated/ui/input/input.shared.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.input — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import inputRecipeJson from "./input.variants.json";
-
-export const inputRecipe = inputRecipeJson;
-
-export type InputVariant = RecipeKey<typeof inputRecipe, "variant">;
-export type InputSize = RecipeKey<typeof inputRecipe, "size">;
-
-/** Input renders a styled single-line form control. */
-export type InputBaseProps = {
-  variant?: InputVariant;
-  size?: InputSize;
-  type?: string;
-  disabled?: boolean;
-  required?: boolean;
-};
-
-export type InputClassesInput = {
-  variant?: InputVariant;
-  size?: InputSize;
-  className?: string;
-};
-
-/** Compose Input classes without rendering — the cross-runtime `asChild` substitute. */
-export function inputClasses(input: InputClassesInput = {}): string {
-  return cn(composeRecipe(inputRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/input/input.solid.tsx b/generated/ui/input/input.solid.tsx
deleted file mode 100644
index a264d32..0000000
--- a/generated/ui/input/input.solid.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Input is a single-line native text field.
- * Supports types, validation attrs, and wireframe variant/size classes.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { inputClasses, type InputSize, type InputVariant } from "./input.shared";
-import { defaultIfEmpty } from "../../utils/expr";
-
-/**
- * Input renders a styled single-line form control.
- */
-export type InputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "class" | "className" | "children" | "variant" | "size" | "type" | "disabled" | "required"> & {
-  variant?: InputVariant;
-  size?: InputSize;
-  type?: string;
-  disabled?: boolean;
-  required?: boolean;
-  class?: string;
-  className?: string;
-};
-
-export const Input: Component<InputProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "type", "disabled", "required", "class", "className"]);
-  const cls = () => inputClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <input type={defaultIfEmpty(local.type, "text")} class={cls() || undefined} disabled={local.disabled || undefined} required={local.required || undefined} {...rest} />
-  );
-};
diff --git a/generated/ui/input/input.tsx b/generated/ui/input/input.tsx
deleted file mode 100644
index bc1f93f..0000000
--- a/generated/ui/input/input.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Input is a single-line native text field.
- * Supports types, validation attrs, and wireframe variant/size classes.
- */
-
-import { forwardRef, type ReactNode, type InputHTMLAttributes } from "react";
-import { inputClasses, type InputSize, type InputVariant } from "./input.shared";
-import { defaultIfEmpty } from "../../utils/expr";
-
-/**
- * Input renders a styled single-line form control.
- */
-export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "children" | "variant" | "size" | "type" | "disabled" | "required"> & {
-  variant?: InputVariant;
-  size?: InputSize;
-  type?: string;
-  disabled?: boolean;
-  required?: boolean;
-  className?: string;
-};
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { variant, size, type, disabled, required, className, ...rest },
-  ref
-) {
-  const cls = inputClasses({ variant, size, className });
-  return (
-    <input ref={ref} type={defaultIfEmpty(type, "text")} className={cls || undefined} disabled={disabled || undefined} required={required || undefined} {...rest} />
-  );
-});
-Input.displayName = "Input";
diff --git a/generated/ui/input/input.variants.json b/generated/ui/input/input.variants.json
deleted file mode 100644
index 3c042c1..0000000
--- a/generated/ui/input/input.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-10 px-3 py-2 text-sm",
-      "lg": "h-12 px-4 text-base",
-      "sm": "h-8 px-3 text-sm",
-      "xs": "h-8 px-2 text-xs"
-    },
-    "variant": {
-      "default": "border-border bg-background",
-      "ghost": "border-transparent bg-muted",
-      "outline": "border-border bg-background"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.input",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/input/input_gen.go b/generated/ui/input/input_gen.go
deleted file mode 100644
index e39f8a7..0000000
--- a/generated/ui/input/input_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package input
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed input.variants.json
-var inputVariantsJSON []byte
-
-// InputVariants is the CVA recipe shared verbatim by all runtimes.
-var InputVariants = uiutils.MustParseVariantRecipe(inputVariantsJSON).ToVariants()
diff --git a/generated/ui/input/input_templ.go b/generated/ui/input/input_templ.go
deleted file mode 100644
index edad826..0000000
--- a/generated/ui/input/input_templ.go
+++ /dev/null
@@ -1,345 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Input is a single-line native text field.
-
-
-Supports types, validation attrs, and wireframe variant/size classes.
-
-
-*/
-
-package input
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// InputProps configures Input.
-type InputProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	// Type — input type; defaults to text
-	Type         string
-	Name         string
-	Value        string
-	Placeholder  string
-	Disabled     bool
-	Required     bool
-	Autocomplete string
-	Min          string
-	Max          string
-	// ID — element id
-	ID string
-	// Role — ARIA role override
-	Role string
-	// TabIndex — tab order override
-	TabIndex string
-	// AriaLabel — accessible name for unlabeled controls
-	AriaLabel string
-	Attrs     templ.Attributes
-}
-
-// InputClasses composes Input classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func InputClasses(p InputProps) string {
-	return uiutils.Compose(InputVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Input renders the Input contract.
-func Input(p InputProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{InputClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<input")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 56, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " type=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var4 string
-		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.DefaultIfEmpty(p.Type, "text"))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 58, Col: 47}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Name) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 60, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Value) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 63, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Placeholder) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " placeholder=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.Placeholder)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 66, Col: 30}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Autocomplete) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " autocomplete=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.Autocomplete)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 69, Col: 32}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Min) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " min=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(p.Min)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 72, Col: 14}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Max) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " max=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var10 string
-			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(p.Max)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 75, Col: 14}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var11 string
-		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Required {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, " required")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Role) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, " role=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var12 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(p.Role)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 81, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.TabIndex) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, " tabindex=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(p.TabIndex)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 84, Col: 24}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaLabel) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, " aria-label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var14 string
-			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/input/input.templ`, Line: 87, Col: 27}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/label/Label.html.twig b/generated/ui/label/Label.html.twig
deleted file mode 100644
index 36c3de4..0000000
--- a/generated/ui/label/Label.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.label — Label renders accessible text linked to a control. #}
-<label{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('labelClasses', { 'class': (class|default('')) })), 'for': ui8kit_or_null((for|default(''))) }, attrs|default({})) }}>{{ children|default('')|raw }}</label>
diff --git a/generated/ui/label/Label.latte b/generated/ui/label/Label.latte
deleted file mode 100644
index a65e548..0000000
--- a/generated/ui/label/Label.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.label — Label renders accessible text linked to a control. *}
-{parameters
-  string $class = '',
-  string $for = '',
-  array $attrs = [],
-  string $children = '',
-}
-<label n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::labelClasses(['class' => $class])),
-  'for' => \UI8Kit\Rt::orNull($for),
-  ...$attrs,
-]">{$children|noescape}</label>
diff --git a/generated/ui/label/Label.svelte b/generated/ui/label/Label.svelte
deleted file mode 100644
index 77b3f8d..0000000
--- a/generated/ui/label/Label.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Label renders accessible text linked to a control.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type LabelProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { labelClasses } from "./label.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: LabelProps = $props();
-
-  const cls = $derived(labelClasses({ className }));
-</script>
-
-<label {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</label>
diff --git a/generated/ui/label/Label.vue b/generated/ui/label/Label.vue
deleted file mode 100644
index 3aca0d3..0000000
--- a/generated/ui/label/Label.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Label renders accessible text linked to a control.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { labelClasses } from "./label.shared";
-
-defineOptions({ name: "Label", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => labelClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <label :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </label>
-</template>
diff --git a/generated/ui/label/label.shared.ts b/generated/ui/label/label.shared.ts
deleted file mode 100644
index 7df69ed..0000000
--- a/generated/ui/label/label.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.label — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import labelRecipeJson from "./label.variants.json";
-
-export const labelRecipe = labelRecipeJson;
-
-/** Label renders accessible text linked to a control. */
-export type LabelBaseProps = {
-
-};
-
-export type LabelClassesInput = {
-  className?: string;
-};
-
-/** Compose Label classes without rendering — the cross-runtime `asChild` substitute. */
-export function labelClasses(input: LabelClassesInput = {}): string {
-  return cn(composeRecipe(labelRecipe, {  }), input.className);
-}
diff --git a/generated/ui/label/label.solid.tsx b/generated/ui/label/label.solid.tsx
deleted file mode 100644
index 37cb856..0000000
--- a/generated/ui/label/label.solid.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Label associates visible text with a form control via the for attribute.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { labelClasses } from "./label.shared";
-
-/**
- * Label renders accessible text linked to a control.
- */
-export type LabelProps = Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Label: Component<LabelProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => labelClasses({ className: local.class ?? local.className });
-  return (
-    <label class={cls() || undefined} {...rest}>
-      {local.children}
-    </label>
-  );
-};
diff --git a/generated/ui/label/label.tsx b/generated/ui/label/label.tsx
deleted file mode 100644
index d39a7a7..0000000
--- a/generated/ui/label/label.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Label associates visible text with a form control via the for attribute.
- */
-
-import { forwardRef, type ReactNode, type LabelHTMLAttributes } from "react";
-import { labelClasses } from "./label.shared";
-
-/**
- * Label renders accessible text linked to a control.
- */
-export type LabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = labelClasses({ className });
-  return (
-    <label ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </label>
-  );
-});
-Label.displayName = "Label";
diff --git a/generated/ui/label/label.variants.json b/generated/ui/label/label.variants.json
deleted file mode 100644
index 5fdf5a5..0000000
--- a/generated/ui/label/label.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "text-sm font-medium leading-none",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.label",
-  "keys": []
-}
diff --git a/generated/ui/label/label_gen.go b/generated/ui/label/label_gen.go
deleted file mode 100644
index 8ad014c..0000000
--- a/generated/ui/label/label_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package label
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed label.variants.json
-var labelVariantsJSON []byte
-
-// LabelVariants is the CVA recipe shared verbatim by all runtimes.
-var LabelVariants = uiutils.MustParseVariantRecipe(labelVariantsJSON).ToVariants()
diff --git a/generated/ui/label/label_templ.go b/generated/ui/label/label_templ.go
deleted file mode 100644
index 97d383d..0000000
--- a/generated/ui/label/label_templ.go
+++ /dev/null
@@ -1,123 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Label associates visible text with a form control via the for attribute.
-
-
-*/
-
-package label
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// LabelProps configures Label.
-type LabelProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// HTMLFor — id of the labeled control
-	HTMLFor string
-	Attrs   templ.Attributes
-}
-
-// LabelClasses composes Label classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func LabelClasses(p LabelProps) string {
-	return uiutils.Compose(LabelVariants, map[string]string{}, p.Class)
-}
-
-// Label renders the Label contract.
-func Label(p LabelProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{LabelClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<label class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/label/label.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.HTMLFor) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " for=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.HTMLFor)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/label/label.templ`, Line: 33, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</label>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/linebreak/Break.html.twig b/generated/ui/linebreak/Break.html.twig
deleted file mode 100644
index bada324..0000000
--- a/generated/ui/linebreak/Break.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.linebreak — Break renders br by default, or wbr when Type is wbr/word. #}
-{% set uiTag = ui8kit_map_or((type|default('')), {'wbr': 'wbr', 'word': 'wbr'}, 'br') %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('breakClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>
diff --git a/generated/ui/linebreak/Break.latte b/generated/ui/linebreak/Break.latte
deleted file mode 100644
index 40722ed..0000000
--- a/generated/ui/linebreak/Break.latte
+++ /dev/null
@@ -1,19 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.linebreak — Break renders br by default, or wbr when Type is wbr/word. *}
-{parameters
-  string $type = '',
-  string $class = '',
-  array $attrs = [],
-}
-{var $uiTag = \UI8Kit\Rt::mapOr($type, ['wbr' => 'wbr', 'word' => 'wbr'], 'br')}
-{if $uiTag === 'wbr'}
-<wbr n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::breakClasses(['class' => $class])),
-  ...$attrs,
-]">
-{else}
-<br n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::breakClasses(['class' => $class])),
-  ...$attrs,
-]">
-{/if}
diff --git a/generated/ui/linebreak/Break.svelte b/generated/ui/linebreak/Break.svelte
deleted file mode 100644
index 4f00a95..0000000
--- a/generated/ui/linebreak/Break.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Break renders br by default, or wbr when Type is wbr/word.
--->
-<script lang="ts" module>
-
-  export type BreakProps = {
-    type?: string;
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { breakClasses } from "./linebreak.shared";
-  import { mapOr } from "../../utils/expr";
-
-  let {
-    type,
-    class: className,
-    ...rest
-  }: BreakProps = $props();
-
-  const cls = $derived(breakClasses({ className }));
-  const resolvedTagValue = $derived(mapOr(type, { "wbr": "wbr", "word": "wbr" }, "br"));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest} />
diff --git a/generated/ui/linebreak/Break.vue b/generated/ui/linebreak/Break.vue
deleted file mode 100644
index a1b6b3d..0000000
--- a/generated/ui/linebreak/Break.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Break renders br by default, or wbr when Type is wbr/word.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { breakClasses } from "./linebreak.shared";
-import { mapOr } from "../../utils/expr";
-
-defineOptions({ name: "Break", inheritAttrs: false });
-
-const props = defineProps<{
-  type?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => breakClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => mapOr(props.type, { "wbr": "wbr", "word": "wbr" }, "br"));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/linebreak/linebreak.shared.ts b/generated/ui/linebreak/linebreak.shared.ts
deleted file mode 100644
index d34cc75..0000000
--- a/generated/ui/linebreak/linebreak.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.linebreak — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import linebreakRecipeJson from "./linebreak.variants.json";
-
-export const linebreakRecipe = linebreakRecipeJson;
-
-/** Break renders br by default, or wbr when Type is wbr/word. */
-export type BreakBaseProps = {
-  type?: string;
-};
-
-export type BreakClassesInput = {
-  className?: string;
-};
-
-/** Compose Break classes without rendering — the cross-runtime `asChild` substitute. */
-export function breakClasses(input: BreakClassesInput = {}): string {
-  return cn(composeRecipe(linebreakRecipe, {  }), input.className);
-}
diff --git a/generated/ui/linebreak/linebreak.solid.tsx b/generated/ui/linebreak/linebreak.solid.tsx
deleted file mode 100644
index eb869f6..0000000
--- a/generated/ui/linebreak/linebreak.solid.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Break renders br or wbr for controlled inline wrapping.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { breakClasses } from "./linebreak.shared";
-import { mapOr } from "../../utils/expr";
-
-/**
- * Break renders br by default, or wbr when Type is wbr/word.
- */
-export type BreakProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "type"> & {
-  type?: string;
-  class?: string;
-  className?: string;
-};
-
-export const Break: Component<BreakProps> = (props) => {
-  const [local, rest] = splitProps(props, ["type", "class", "className"]);
-  const resolvedTagValue = () => mapOr(local.type, { "wbr": "wbr", "word": "wbr" }, "br");
-  const cls = () => breakClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...rest} />
-  );
-};
diff --git a/generated/ui/linebreak/linebreak.tsx b/generated/ui/linebreak/linebreak.tsx
deleted file mode 100644
index f16d593..0000000
--- a/generated/ui/linebreak/linebreak.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Break renders br or wbr for controlled inline wrapping.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
-import { breakClasses } from "./linebreak.shared";
-import { mapOr } from "../../utils/expr";
-
-/**
- * Break renders br by default, or wbr when Type is wbr/word.
- */
-export type BreakProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "type"> & {
-  type?: string;
-  className?: string;
-};
-
-export const Break = forwardRef<HTMLElement, BreakProps>(function Break(
-  { type, className, ...rest },
-  ref
-) {
-  const cls = breakClasses({ className });
-  const resolvedTagValue = mapOr(type, { "wbr": "wbr", "word": "wbr" }, "br");
-  const Tag = resolvedTagValue as ElementType;
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest} />
-  );
-});
-Break.displayName = "Break";
diff --git a/generated/ui/linebreak/linebreak.variants.json b/generated/ui/linebreak/linebreak.variants.json
deleted file mode 100644
index 301f839..0000000
--- a/generated/ui/linebreak/linebreak.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.linebreak",
-  "keys": []
-}
diff --git a/generated/ui/linebreak/linebreak_gen.go b/generated/ui/linebreak/linebreak_gen.go
deleted file mode 100644
index 7bbac80..0000000
--- a/generated/ui/linebreak/linebreak_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package linebreak
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed linebreak.variants.json
-var linebreakVariantsJSON []byte
-
-// LinebreakVariants is the CVA recipe shared verbatim by all runtimes.
-var LinebreakVariants = uiutils.MustParseVariantRecipe(linebreakVariantsJSON).ToVariants()
diff --git a/generated/ui/linebreak/linebreak_templ.go b/generated/ui/linebreak/linebreak_templ.go
deleted file mode 100644
index f22679a..0000000
--- a/generated/ui/linebreak/linebreak_templ.go
+++ /dev/null
@@ -1,130 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Break renders br or wbr for controlled inline wrapping.
-
-
-*/
-
-package linebreak
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// BreakProps configures Break.
-type BreakProps struct {
-	// Type — br (default) or wbr/word
-	Type string
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// BreakClasses composes Break classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func BreakClasses(p BreakProps) string {
-	return uiutils.Compose(LinebreakVariants, map[string]string{}, p.Class)
-}
-
-// Break renders the Break contract.
-func Break(p BreakProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.MapOr(p.Type, map[string]string{"wbr": "wbr", "word": "wbr"}, "br") {
-		case "wbr":
-			var templ_7745c5c3_Var2 = []any{BreakClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<wbr class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/linebreak/linebreak.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		default:
-			var templ_7745c5c3_Var4 = []any{BreakClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<br class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var4).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/linebreak/linebreak.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/link/Link.html.twig b/generated/ui/link/Link.html.twig
deleted file mode 100644
index eef8bfc..0000000
--- a/generated/ui/link/Link.html.twig
+++ /dev/null
@@ -1,5 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.link — Link renders a semantic anchor element. #}
-{% set uiTarget = ((ui8kit_is_set_str((target|default('')))) ? (target|default('')) : (((external|default(false))) ? '_blank' : '')) %}
-{% set uiRel = ((ui8kit_is_set_str((rel|default('')))) ? (rel|default('')) : ((((external|default(false)) or (uiTarget == '_blank'))) ? 'noopener noreferrer' : '')) %}
-<a{{ ui8kit_attr_str({ 'href': ui8kit_or_null((href|default(''))), 'class': ui8kit_or_null(ui8kit_classes('linkClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'disabled': (disabled|default(false)), 'class': (class|default('')) })), 'id': ui8kit_or_null((id|default(''))), 'target': ui8kit_or_null(uiTarget), 'rel': ui8kit_or_null(uiRel), 'download': ui8kit_or_null((download|default(''))), 'role': ui8kit_or_null((role|default(''))), 'aria-label': ui8kit_or_null((ariaLabel|default(''))), 'aria-current': ui8kit_or_null((ariaCurrent|default(''))), 'aria-disabled': (((disabled|default(false))) ? 'true' : null), 'tabindex': (((disabled|default(false))) ? ((-1) ~ '') : null) }, attrs|default({})) }}>{{ children|default('')|raw }}</a>
diff --git a/generated/ui/link/Link.latte b/generated/ui/link/Link.latte
deleted file mode 100644
index 0fbc28c..0000000
--- a/generated/ui/link/Link.latte
+++ /dev/null
@@ -1,35 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.link — Link renders a semantic anchor element. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $href = '',
-  string $target = '',
-  string $rel = '',
-  string $download = '',
-  bool $external = false,
-  bool $disabled = false,
-  string $ariaCurrent = '',
-  string $ariaLabel = '',
-  string $id = '',
-  string $role = '',
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTarget = ((\UI8Kit\Rt::isSetStr($target)) ? $target : (($external) ? '_blank' : ''))}
-{var $uiRel = ((\UI8Kit\Rt::isSetStr($rel)) ? $rel : ((($external || ($uiTarget === '_blank'))) ? 'noopener noreferrer' : ''))}
-<a n:attr="[
-  'href' => \UI8Kit\Rt::orNull($href),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::linkClasses(['variant' => $variant, 'size' => $size, 'disabled' => $disabled, 'class' => $class])),
-  'id' => \UI8Kit\Rt::orNull($id),
-  'target' => \UI8Kit\Rt::orNull($uiTarget),
-  'rel' => \UI8Kit\Rt::orNull($uiRel),
-  'download' => \UI8Kit\Rt::orNull($download),
-  'role' => \UI8Kit\Rt::orNull($role),
-  'aria-label' => \UI8Kit\Rt::orNull($ariaLabel),
-  'aria-current' => \UI8Kit\Rt::orNull($ariaCurrent),
-  'aria-disabled' => (($disabled) ? 'true' : null),
-  'tabindex' => (($disabled) ? (string) (-1) : null),
-  ...$attrs,
-]">{$children|noescape}</a>
diff --git a/generated/ui/link/Link.svelte b/generated/ui/link/Link.svelte
deleted file mode 100644
index 1074f39..0000000
--- a/generated/ui/link/Link.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Link renders a semantic anchor element.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { LinkSize, LinkVariant } from "./link.shared";
-
-  export type LinkProps = {
-    variant?: LinkVariant;
-    size?: LinkSize;
-    target?: string;
-    rel?: string;
-    external?: boolean;
-    disabled?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { linkClasses } from "./link.shared";
-  import { eqStr, isSetStr, orUndef } from "../../utils/expr";
-
-  let {
-    variant,
-    size,
-    target,
-    rel,
-    external,
-    disabled,
-    class: className,
-    children,
-    ...rest
-  }: LinkProps = $props();
-
-  const cls = $derived(linkClasses({ variant, size, disabled, className }));
-  const targetValue = $derived((isSetStr(target) ? target : (external ? "_blank" : "")));
-  const relValue = $derived((isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : "")));
-</script>
-
-<a {...(cls ? { class: cls } : {})} target={orUndef(targetValue)} rel={orUndef(relValue)} aria-disabled={disabled ? "true" : undefined} tabindex={disabled ? -1 : undefined} {...rest}>
-  {@render children?.()}
-</a>
diff --git a/generated/ui/link/Link.vue b/generated/ui/link/Link.vue
deleted file mode 100644
index 863169b..0000000
--- a/generated/ui/link/Link.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Link renders a semantic anchor element.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { linkClasses, type LinkSize, type LinkVariant } from "./link.shared";
-import { eqStr, isSetStr, orUndef } from "../../utils/expr";
-
-defineOptions({ name: "Link", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: LinkVariant;
-  size?: LinkSize;
-  target?: string;
-  rel?: string;
-  external?: boolean;
-  disabled?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => linkClasses({ variant: props.variant, size: props.size, disabled: props.disabled, className: callerClass.value }));
-const targetValue = computed(() => (isSetStr(props.target) ? props.target : (props.external ? "_blank" : "")));
-const relValue = computed(() => (isSetStr(props.rel) ? props.rel : ((props.external || eqStr(targetValue.value, "_blank")) ? "noopener noreferrer" : "")));
-</script>
-
-<template>
-  <a :class="cls || undefined" :target="orUndef(targetValue)" :rel="orUndef(relValue)" :aria-disabled="props.disabled ? 'true' : undefined" :tabindex="props.disabled ? -1 : undefined" v-bind="restAttrs">
-    <slot />
-  </a>
-</template>
diff --git a/generated/ui/link/link.shared.ts b/generated/ui/link/link.shared.ts
deleted file mode 100644
index 31b4966..0000000
--- a/generated/ui/link/link.shared.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.link — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import linkRecipeJson from "./link.variants.json";
-
-export const linkRecipe = linkRecipeJson;
-
-export type LinkVariant = RecipeKey<typeof linkRecipe, "variant">;
-export type LinkSize = RecipeKey<typeof linkRecipe, "size">;
-
-/** Link renders a semantic anchor element. */
-export type LinkBaseProps = {
-  variant?: LinkVariant;
-  size?: LinkSize;
-  target?: string;
-  rel?: string;
-  external?: boolean;
-  disabled?: boolean;
-};
-
-export type LinkClassesInput = {
-  variant?: LinkVariant;
-  size?: LinkSize;
-  disabled?: boolean;
-  className?: string;
-};
-
-/** Compose Link classes without rendering — the cross-runtime `asChild` substitute. */
-export function linkClasses(input: LinkClassesInput = {}): string {
-  return cn(composeRecipe(linkRecipe, { variant: input.variant, size: input.size }), (input.disabled ? "pointer-events-none opacity-50" : ""), input.className);
-}
diff --git a/generated/ui/link/link.solid.tsx b/generated/ui/link/link.solid.tsx
deleted file mode 100644
index 7527deb..0000000
--- a/generated/ui/link/link.solid.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Link renders a semantic anchor for navigation and prose.
- * Use Button for actions; use Link for destinations.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { linkClasses, type LinkSize, type LinkVariant } from "./link.shared";
-import { eqStr, isSetStr, orUndef } from "../../utils/expr";
-
-/**
- * Link renders a semantic anchor element.
- */
-export type LinkProps = Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "class" | "className" | "children" | "variant" | "size" | "target" | "rel" | "external" | "disabled"> & {
-  variant?: LinkVariant;
-  size?: LinkSize;
-  target?: string;
-  rel?: string;
-  external?: boolean;
-  disabled?: boolean;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Link: Component<LinkProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "target", "rel", "external", "disabled", "class", "className", "children"]);
-  const targetValue = () => (isSetStr(local.target) ? local.target : (local.external ? "_blank" : ""));
-  const relValue = () => (isSetStr(local.rel) ? local.rel : ((local.external || eqStr(targetValue(), "_blank")) ? "noopener noreferrer" : ""));
-  const cls = () => linkClasses({ variant: local.variant, size: local.size, disabled: local.disabled, className: local.class ?? local.className });
-  return (
-    <a class={cls() || undefined} target={orUndef(targetValue())} rel={orUndef(relValue())} aria-disabled={local.disabled ? "true" : undefined} tabIndex={local.disabled ? -1 : undefined} {...rest}>
-      {local.children}
-    </a>
-  );
-};
diff --git a/generated/ui/link/link.tsx b/generated/ui/link/link.tsx
deleted file mode 100644
index b02fdba..0000000
--- a/generated/ui/link/link.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Link renders a semantic anchor for navigation and prose.
- * Use Button for actions; use Link for destinations.
- */
-
-import { forwardRef, type ReactNode, type AnchorHTMLAttributes } from "react";
-import { linkClasses, type LinkSize, type LinkVariant } from "./link.shared";
-import { eqStr, isSetStr, orUndef } from "../../utils/expr";
-
-/**
- * Link renders a semantic anchor element.
- */
-export type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "children" | "variant" | "size" | "target" | "rel" | "external" | "disabled"> & {
-  variant?: LinkVariant;
-  size?: LinkSize;
-  target?: string;
-  rel?: string;
-  external?: boolean;
-  disabled?: boolean;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
-  { variant, size, target, rel, external, disabled, className, children, ...rest },
-  ref
-) {
-  const cls = linkClasses({ variant, size, disabled, className });
-  const targetValue = (isSetStr(target) ? target : (external ? "_blank" : ""));
-  const relValue = (isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : ""));
-  return (
-    <a ref={ref} className={cls || undefined} target={orUndef(targetValue)} rel={orUndef(relValue)} aria-disabled={disabled ? "true" : undefined} tabIndex={disabled ? -1 : undefined} {...rest}>
-      {children}
-    </a>
-  );
-});
-Link.displayName = "Link";
diff --git a/generated/ui/link/link.variants.json b/generated/ui/link/link.variants.json
deleted file mode 100644
index da1ea32..0000000
--- a/generated/ui/link/link.variants.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-  "byKey": {
-    "size": {
-      "default": "text-sm",
-      "lg": "text-lg",
-      "md": "text-base",
-      "sm": "text-sm"
-    },
-    "variant": {
-      "block": "flex w-full text-foreground hover:text-primary",
-      "default": "text-primary hover:underline",
-      "external": "text-primary hover:underline",
-      "muted": "text-muted-foreground hover:text-foreground hover:underline",
-      "nav": "text-foreground hover:text-primary"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.link",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/link/link_gen.go b/generated/ui/link/link_gen.go
deleted file mode 100644
index d874aeb..0000000
--- a/generated/ui/link/link_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package link
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed link.variants.json
-var linkVariantsJSON []byte
-
-// LinkVariants is the CVA recipe shared verbatim by all runtimes.
-var LinkVariants = uiutils.MustParseVariantRecipe(linkVariantsJSON).ToVariants()
diff --git a/generated/ui/link/link_templ.go b/generated/ui/link/link_templ.go
deleted file mode 100644
index 69a92b6..0000000
--- a/generated/ui/link/link_templ.go
+++ /dev/null
@@ -1,330 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Link renders a semantic anchor for navigation and prose.
-
-
-Use Button for actions; use Link for destinations.
-
-
-*/
-
-package link
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"strconv"
-
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// LinkProps configures Link.
-type LinkProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	Href  string
-	// Target — explicit target; External implies _blank
-	Target string
-	// Rel — explicit rel; external links default to noopener noreferrer
-	Rel      string
-	Download string
-	// External — opens in a new tab with safe rel defaults
-	External bool
-	// Disabled — visually and semantically disables the link
-	Disabled    bool
-	AriaCurrent string
-	AriaLabel   string
-	ID          string
-	Role        string
-	Attrs       templ.Attributes
-}
-
-// LinkClasses composes Link classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func LinkClasses(p LinkProps) string {
-	return uiutils.Compose(LinkVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, uiutils.If(p.Disabled, "pointer-events-none opacity-50", ""), p.Class)
-}
-
-func linkTarget(p LinkProps) string {
-	return uiutils.If(uiutils.IsSetStr(p.Target), p.Target, uiutils.If(p.External, "_blank", ""))
-}
-
-func linkRel(p LinkProps) string {
-	return uiutils.If(uiutils.IsSetStr(p.Rel), p.Rel, uiutils.If((p.External || linkTarget(p) == "_blank"), "noopener noreferrer", ""))
-}
-
-// Link renders the Link contract.
-func Link(p LinkProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{LinkClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<a")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Href) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " href=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 templ.SafeURL
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinURLErrs(p.Href)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 62, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var4 string
-		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 66, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(linkTarget(p)) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " target=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(linkTarget(p))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 69, Col: 25}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(linkRel(p)) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " rel=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(linkRel(p))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 72, Col: 19}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Download) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " download=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.Download)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 75, Col: 24}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Role) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " role=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(p.Role)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 78, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaLabel) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " aria-label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var10 string
-			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 81, Col: 27}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaCurrent) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, " aria-current=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var11 string
-			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaCurrent)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 84, Col: 31}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, " aria-disabled=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var12 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs("true")
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 87, Col: 25}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, " tabindex=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(-1))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/link/link.templ`, Line: 90, Col: 30}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</a>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/list/List.html.twig b/generated/ui/list/List.html.twig
deleted file mode 100644
index e2b820d..0000000
--- a/generated/ui/list/List.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.list — List renders a list container (ul, ol, dl, or menu). #}
-{% set uiTag = ui8kit_resolve_tag((tag|default('')), 'ul', 'List') %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('listClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</{{ uiTag }}>
diff --git a/generated/ui/list/List.latte b/generated/ui/list/List.latte
deleted file mode 100644
index 6040332..0000000
--- a/generated/ui/list/List.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.list — List renders a list container (ul, ol, dl, or menu). *}
-{parameters
-  string $class = '',
-  string $tag = '',
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTag = \UI8Kit\Rt::resolveTag($tag, 'ul', 'List')}
-<ul n:tag="$uiTag" n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::listClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</ul>
diff --git a/generated/ui/list/List.svelte b/generated/ui/list/List.svelte
deleted file mode 100644
index 82ff4b7..0000000
--- a/generated/ui/list/List.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  List renders a list container (ul, ol, dl, or menu).
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type ListProps = {
-    tag?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { listClasses } from "./list.shared";
-  import { resolveTag, TagGroup } from "../../utils/tags";
-
-  let {
-    tag,
-    class: className,
-    children,
-    ...rest
-  }: ListProps = $props();
-
-  const cls = $derived(listClasses({ className }));
-  const resolvedTagValue = $derived(resolveTag(tag, "ul", TagGroup.List));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</svelte:element>
diff --git a/generated/ui/list/List.vue b/generated/ui/list/List.vue
deleted file mode 100644
index 3bf8182..0000000
--- a/generated/ui/list/List.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  List renders a list container (ul, ol, dl, or menu).
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { listClasses } from "./list.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-defineOptions({ name: "List", inheritAttrs: false });
-
-const props = defineProps<{
-  tag?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => listClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => resolveTag(props.tag, "ul", TagGroup.List));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </component>
-</template>
diff --git a/generated/ui/list/ListItem.html.twig b/generated/ui/list/ListItem.html.twig
deleted file mode 100644
index 31d33d9..0000000
--- a/generated/ui/list/ListItem.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.list — ListItem renders one li with optional value attribute. #}
-{% set uiTag = ui8kit_resolve_tag((tag|default('')), 'li', 'ListItem') %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('listItemClasses', { 'class': (class|default('')) })), 'value': (((((value|default(0)) > 0) and (uiTag == 'li'))) ? (((value|default(0))) ~ '') : null) }, attrs|default({})) }}>{{ children|default('')|raw }}</{{ uiTag }}>
diff --git a/generated/ui/list/ListItem.latte b/generated/ui/list/ListItem.latte
deleted file mode 100644
index 52c9b0e..0000000
--- a/generated/ui/list/ListItem.latte
+++ /dev/null
@@ -1,15 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.list — ListItem renders one li with optional value attribute. *}
-{parameters
-  string $class = '',
-  string $tag = '',
-  int $value = 0,
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTag = \UI8Kit\Rt::resolveTag($tag, 'li', 'ListItem')}
-<li n:tag="$uiTag" n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::listItemClasses(['class' => $class])),
-  'value' => (((($value > 0) && ($uiTag === 'li'))) ? (string) ($value) : null),
-  ...$attrs,
-]">{$children|noescape}</li>
diff --git a/generated/ui/list/ListItem.svelte b/generated/ui/list/ListItem.svelte
deleted file mode 100644
index 5acaa20..0000000
--- a/generated/ui/list/ListItem.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  ListItem renders one li with optional value attribute.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type ListItemProps = {
-    tag?: string;
-    value?: number;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { listItemClasses } from "./list.shared";
-  import { eqStr, isSetNum } from "../../utils/expr";
-  import { resolveTag, TagGroup } from "../../utils/tags";
-
-  let {
-    tag,
-    value,
-    class: className,
-    children,
-    ...rest
-  }: ListItemProps = $props();
-
-  const cls = $derived(listItemClasses({ className }));
-  const resolvedTagValue = $derived(resolveTag(tag, "li", TagGroup.ListItem));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} value={(isSetNum(value) && eqStr(resolvedTagValue, "li")) ? String(value ?? 0) : undefined} {...rest}>
-  {@render children?.()}
-</svelte:element>
diff --git a/generated/ui/list/ListItem.vue b/generated/ui/list/ListItem.vue
deleted file mode 100644
index 97fe1cd..0000000
--- a/generated/ui/list/ListItem.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  ListItem renders one li with optional value attribute.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { listItemClasses } from "./list.shared";
-import { eqStr, isSetNum } from "../../utils/expr";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-defineOptions({ name: "ListItem", inheritAttrs: false });
-
-const props = defineProps<{
-  tag?: string;
-  value?: number;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => listItemClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => resolveTag(props.tag, "li", TagGroup.ListItem));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" :value="(isSetNum(props.value) && eqStr(resolvedTagValue, 'li')) ? String(props.value ?? 0) : undefined" v-bind="restAttrs">
-    <slot />
-  </component>
-</template>
diff --git a/generated/ui/list/list.shared.ts b/generated/ui/list/list.shared.ts
deleted file mode 100644
index e9a94c4..0000000
--- a/generated/ui/list/list.shared.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.list — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import listRecipeJson from "./list.variants.json";
-
-export const listRecipe = listRecipeJson;
-
-/** List renders a list container (ul, ol, dl, or menu). */
-export type ListBaseProps = {
-  tag?: string;
-};
-
-export type ListClassesInput = {
-  className?: string;
-};
-
-/** Compose List classes without rendering — the cross-runtime `asChild` substitute. */
-export function listClasses(input: ListClassesInput = {}): string {
-  return cn(composeRecipe(listRecipe, {  }), input.className);
-}
-
-/** ListItem renders one li with optional value attribute. */
-export type ListItemBaseProps = {
-  tag?: string;
-  value?: number;
-};
-
-export type ListItemClassesInput = {
-  className?: string;
-};
-
-/** Compose ListItem classes without rendering — the cross-runtime `asChild` substitute. */
-export function listItemClasses(input: ListItemClassesInput = {}): string {
-  return cn(composeRecipe(listRecipe, {  }), input.className);
-}
diff --git a/generated/ui/list/list.solid.tsx b/generated/ui/list/list.solid.tsx
deleted file mode 100644
index cffe6e9..0000000
--- a/generated/ui/list/list.solid.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * List renders semantic ul, ol, dl, or menu lists with ListItem children.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { listClasses, listItemClasses } from "./list.shared";
-import { eqStr, isSetNum } from "../../utils/expr";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-/**
- * List renders a list container (ul, ol, dl, or menu).
- */
-export type ListProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "tag"> & {
-  tag?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const List: Component<ListProps> = (props) => {
-  const [local, rest] = splitProps(props, ["tag", "class", "className", "children"]);
-  const resolvedTagValue = () => resolveTag(local.tag, "ul", TagGroup.List);
-  const cls = () => listClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...rest}>
-      {local.children}
-    </Dynamic>
-  );
-};
-
-/**
- * ListItem renders one li with optional value attribute.
- */
-export type ListItemProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "tag" | "value"> & {
-  tag?: string;
-  value?: number;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const ListItem: Component<ListItemProps> = (props) => {
-  const [local, rest] = splitProps(props, ["tag", "value", "class", "className", "children"]);
-  const resolvedTagValue = () => resolveTag(local.tag, "li", TagGroup.ListItem);
-  const cls = () => listItemClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} value={(isSetNum(local.value) && eqStr(resolvedTagValue(), "li")) ? String(local.value ?? 0) : undefined} {...rest}>
-      {local.children}
-    </Dynamic>
-  );
-};
diff --git a/generated/ui/list/list.tsx b/generated/ui/list/list.tsx
deleted file mode 100644
index 04bb3c5..0000000
--- a/generated/ui/list/list.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * List renders semantic ul, ol, dl, or menu lists with ListItem children.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
-import { listClasses, listItemClasses } from "./list.shared";
-import { eqStr, isSetNum } from "../../utils/expr";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-/**
- * List renders a list container (ul, ol, dl, or menu).
- */
-export type ListProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
-  tag?: string;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const List = forwardRef<HTMLElement, ListProps>(function List(
-  { tag, className, children, ...rest },
-  ref
-) {
-  const cls = listClasses({ className });
-  const resolvedTagValue = resolveTag(tag, "ul", TagGroup.List);
-  const Tag = resolvedTagValue as ElementType;
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
-      {children}
-    </Tag>
-  );
-});
-List.displayName = "List";
-
-/**
- * ListItem renders one li with optional value attribute.
- */
-export type ListItemProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag" | "value"> & {
-  tag?: string;
-  value?: number;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(
-  { tag, value, className, children, ...rest },
-  ref
-) {
-  const cls = listItemClasses({ className });
-  const resolvedTagValue = resolveTag(tag, "li", TagGroup.ListItem);
-  const Tag = resolvedTagValue as ElementType;
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} value={(isSetNum(value) && eqStr(resolvedTagValue, "li")) ? String(value ?? 0) : undefined} {...rest}>
-      {children}
-    </Tag>
-  );
-});
-ListItem.displayName = "ListItem";
diff --git a/generated/ui/list/list.variants.json b/generated/ui/list/list.variants.json
deleted file mode 100644
index 3a851b3..0000000
--- a/generated/ui/list/list.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.list",
-  "keys": []
-}
diff --git a/generated/ui/list/list_gen.go b/generated/ui/list/list_gen.go
deleted file mode 100644
index 138375e..0000000
--- a/generated/ui/list/list_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package list
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed list.variants.json
-var listVariantsJSON []byte
-
-// ListVariants is the CVA recipe shared verbatim by all runtimes.
-var ListVariants = uiutils.MustParseVariantRecipe(listVariantsJSON).ToVariants()
diff --git a/generated/ui/list/list_templ.go b/generated/ui/list/list_templ.go
deleted file mode 100644
index 84768df..0000000
--- a/generated/ui/list/list_templ.go
+++ /dev/null
@@ -1,407 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-List renders semantic ul, ol, dl, or menu lists with ListItem children.
-
-
-*/
-
-package list
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"strconv"
-
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// ListProps configures List.
-type ListProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Tag — ul, ol, dl, or menu
-	Tag   string
-	Attrs templ.Attributes
-}
-
-// ListClasses composes List classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func ListClasses(p ListProps) string {
-	return uiutils.Compose(ListVariants, map[string]string{}, p.Class)
-}
-
-// List renders the List contract.
-func List(p ListProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.ResolveTag(p.Tag, "ul", uiutils.TagGroupList) {
-		case "ol":
-			var templ_7745c5c3_Var2 = []any{ListClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<ol class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/list/list.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</ol>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "dl":
-			var templ_7745c5c3_Var4 = []any{ListClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<dl class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var4).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/list/list.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</dl>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "menu":
-			var templ_7745c5c3_Var6 = []any{ListClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<menu class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/list/list.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</menu>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		default:
-			var templ_7745c5c3_Var8 = []any{ListClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<ul class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var8).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/list/list.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</ul>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-// ListItemProps configures ListItem.
-type ListItemProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Tag — li, dt, or dd; defaults to li
-	Tag string
-	// Value — optional li value for ordered contexts
-	Value int
-	Attrs templ.Attributes
-}
-
-// ListItemClasses composes ListItem classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func ListItemClasses(p ListItemProps) string {
-	return uiutils.Compose(ListVariants, map[string]string{}, p.Class)
-}
-
-// ListItem renders the ListItem contract.
-func ListItem(p ListItemProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var10 == nil {
-			templ_7745c5c3_Var10 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.ResolveTag(p.Tag, "li", uiutils.TagGroupListItem) {
-		case "dt":
-			var templ_7745c5c3_Var11 = []any{ListItemClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var11...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<dt class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var12 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var11).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/list/list.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var10.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</dt>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "dd":
-			var templ_7745c5c3_Var13 = []any{ListItemClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var13...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<dd class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var14 string
-			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var13).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/list/list.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var10.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</dd>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		default:
-			var templ_7745c5c3_Var15 = []any{ListItemClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var15...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<li class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var16 string
-			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var15).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/list/list.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if int(p.Value) > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, " value=\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var17 string
-				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(p.Value)))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/list/list.templ`, Line: 102, Col: 39}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "\"")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var10.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</li>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/radio/Radio.html.twig b/generated/ui/radio/Radio.html.twig
deleted file mode 100644
index 35082ea..0000000
--- a/generated/ui/radio/Radio.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.radio — Radio renders input[type=radio] with shared Name for grouping. #}
-<input{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'type': 'radio', 'name': ui8kit_or_null((name|default(''))), 'value': ui8kit_or_null((value|default(''))), 'class': ui8kit_or_null(ui8kit_classes('radioClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'checked': (checked|default(false)), 'disabled': (disabled|default(false)), 'required': (required|default(false)), 'role': ui8kit_or_null((role|default(''))), 'tabindex': ui8kit_or_null((tabindex|default(''))), 'aria-label': ui8kit_or_null((ariaLabel|default(''))) }, attrs|default({})) }}>
diff --git a/generated/ui/radio/Radio.latte b/generated/ui/radio/Radio.latte
deleted file mode 100644
index 80bfbb8..0000000
--- a/generated/ui/radio/Radio.latte
+++ /dev/null
@@ -1,31 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.radio — Radio renders input[type=radio] with shared Name for grouping. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $name = '',
-  string $value = '',
-  bool $checked = false,
-  bool $disabled = false,
-  bool $required = false,
-  string $id = '',
-  string $role = '',
-  string $tabindex = '',
-  string $ariaLabel = '',
-  array $attrs = [],
-}
-<input n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'type' => 'radio',
-  'name' => \UI8Kit\Rt::orNull($name),
-  'value' => \UI8Kit\Rt::orNull($value),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::radioClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'checked' => $checked,
-  'disabled' => $disabled,
-  'required' => $required,
-  'role' => \UI8Kit\Rt::orNull($role),
-  'tabindex' => \UI8Kit\Rt::orNull($tabindex),
-  'aria-label' => \UI8Kit\Rt::orNull($ariaLabel),
-  ...$attrs,
-]">
diff --git a/generated/ui/radio/Radio.svelte b/generated/ui/radio/Radio.svelte
deleted file mode 100644
index 41ea5d7..0000000
--- a/generated/ui/radio/Radio.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Radio renders input[type=radio] with shared Name for grouping.
--->
-<script lang="ts" module>
-  import type { RadioSize, RadioVariant } from "./radio.shared";
-
-  export type RadioProps = {
-    variant?: RadioVariant;
-    size?: RadioSize;
-    checked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { radioClasses } from "./radio.shared";
-
-  let {
-    variant,
-    size,
-    checked,
-    disabled,
-    required,
-    class: className,
-    ...rest
-  }: RadioProps = $props();
-
-  const cls = $derived(radioClasses({ variant, size, className }));
-</script>
-
-<input type="radio" {...(cls ? { class: cls } : {})} checked={checked || undefined} disabled={disabled || undefined} required={required || undefined} {...rest} />
diff --git a/generated/ui/radio/Radio.vue b/generated/ui/radio/Radio.vue
deleted file mode 100644
index ed9b064..0000000
--- a/generated/ui/radio/Radio.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Radio renders input[type=radio] with shared Name for grouping.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { radioClasses, type RadioSize, type RadioVariant } from "./radio.shared";
-
-defineOptions({ name: "Radio", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: RadioVariant;
-  size?: RadioSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => radioClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <input type="radio" :class="cls || undefined" :checked="props.checked || undefined" :disabled="props.disabled || undefined" :required="props.required || undefined" v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/radio/radio.shared.ts b/generated/ui/radio/radio.shared.ts
deleted file mode 100644
index bc9a307..0000000
--- a/generated/ui/radio/radio.shared.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.radio — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import radioRecipeJson from "./radio.variants.json";
-
-export const radioRecipe = radioRecipeJson;
-
-export type RadioVariant = RecipeKey<typeof radioRecipe, "variant">;
-export type RadioSize = RecipeKey<typeof radioRecipe, "size">;
-
-/** Radio renders input[type=radio] with shared Name for grouping. */
-export type RadioBaseProps = {
-  variant?: RadioVariant;
-  size?: RadioSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-};
-
-export type RadioClassesInput = {
-  variant?: RadioVariant;
-  size?: RadioSize;
-  className?: string;
-};
-
-/** Compose Radio classes without rendering — the cross-runtime `asChild` substitute. */
-export function radioClasses(input: RadioClassesInput = {}): string {
-  return cn(composeRecipe(radioRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/radio/radio.solid.tsx b/generated/ui/radio/radio.solid.tsx
deleted file mode 100644
index 9375cdc..0000000
--- a/generated/ui/radio/radio.solid.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Radio is a native single-choice control within a named group.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { radioClasses, type RadioSize, type RadioVariant } from "./radio.shared";
-
-/**
- * Radio renders input[type=radio] with shared Name for grouping.
- */
-export type RadioProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "class" | "className" | "children" | "variant" | "size" | "checked" | "disabled" | "required"> & {
-  variant?: RadioVariant;
-  size?: RadioSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  class?: string;
-  className?: string;
-};
-
-export const Radio: Component<RadioProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "checked", "disabled", "required", "class", "className"]);
-  const cls = () => radioClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <input type="radio" class={cls() || undefined} checked={local.checked || undefined} disabled={local.disabled || undefined} required={local.required || undefined} {...rest} />
-  );
-};
diff --git a/generated/ui/radio/radio.tsx b/generated/ui/radio/radio.tsx
deleted file mode 100644
index b3c4e54..0000000
--- a/generated/ui/radio/radio.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Radio is a native single-choice control within a named group.
- */
-
-import { forwardRef, type ReactNode, type InputHTMLAttributes } from "react";
-import { radioClasses, type RadioSize, type RadioVariant } from "./radio.shared";
-
-/**
- * Radio renders input[type=radio] with shared Name for grouping.
- */
-export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "children" | "variant" | "size" | "checked" | "disabled" | "required"> & {
-  variant?: RadioVariant;
-  size?: RadioSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  className?: string;
-};
-
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
-  { variant, size, checked, disabled, required, className, ...rest },
-  ref
-) {
-  const cls = radioClasses({ variant, size, className });
-  return (
-    <input ref={ref} type="radio" className={cls || undefined} checked={checked || undefined} disabled={disabled || undefined} required={required || undefined} {...rest} />
-  );
-});
-Radio.displayName = "Radio";
diff --git a/generated/ui/radio/radio.variants.json b/generated/ui/radio/radio.variants.json
deleted file mode 100644
index b147abf..0000000
--- a/generated/ui/radio/radio.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-4 w-4",
-      "lg": "h-5 w-5",
-      "sm": "h-4 w-4",
-      "xs": "h-3 w-3"
-    },
-    "variant": {
-      "default": "border-primary",
-      "ghost": "border-primary bg-muted/30",
-      "outline": "border-primary"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.radio",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/radio/radio_gen.go b/generated/ui/radio/radio_gen.go
deleted file mode 100644
index f9139e5..0000000
--- a/generated/ui/radio/radio_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package radio
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed radio.variants.json
-var radioVariantsJSON []byte
-
-// RadioVariants is the CVA recipe shared verbatim by all runtimes.
-var RadioVariants = uiutils.MustParseVariantRecipe(radioVariantsJSON).ToVariants()
diff --git a/generated/ui/radio/radio_templ.go b/generated/ui/radio/radio_templ.go
deleted file mode 100644
index f4c9a54..0000000
--- a/generated/ui/radio/radio_templ.go
+++ /dev/null
@@ -1,254 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Radio is a native single-choice control within a named group.
-
-
-*/
-
-package radio
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// RadioProps configures Radio.
-type RadioProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class    string
-	Name     string
-	Value    string
-	Checked  bool
-	Disabled bool
-	Required bool
-	// ID — element id
-	ID string
-	// Role — ARIA role override
-	Role string
-	// TabIndex — tab order override
-	TabIndex string
-	// AriaLabel — accessible name for unlabeled controls
-	AriaLabel string
-	Attrs     templ.Attributes
-}
-
-// RadioClasses composes Radio classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func RadioClasses(p RadioProps) string {
-	return uiutils.Compose(RadioVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Radio renders the Radio contract.
-func Radio(p RadioProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{RadioClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<input")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/radio/radio.templ`, Line: 50, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " type=\"radio\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Name) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/radio/radio.templ`, Line: 54, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Value) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/radio/radio.templ`, Line: 57, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/radio/radio.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if p.Checked {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " checked")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Required {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " required")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Role) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " role=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.Role)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/radio/radio.templ`, Line: 64, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.TabIndex) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " tabindex=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.TabIndex)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/radio/radio.templ`, Line: 67, Col: 24}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaLabel) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, " aria-label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/radio/radio.templ`, Line: 70, Col: 27}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/select/OptGroup.html.twig b/generated/ui/select/OptGroup.html.twig
deleted file mode 100644
index 47017d2..0000000
--- a/generated/ui/select/OptGroup.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.select — OptGroup renders a native optgroup around option children. #}
-<optgroup{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('optGroupClasses', { 'class': (class|default('')) })), 'label': ui8kit_or_null((label|default(''))), 'disabled': (disabled|default(false)) }, attrs|default({})) }}>{{ children|default('')|raw }}</optgroup>
diff --git a/generated/ui/select/OptGroup.latte b/generated/ui/select/OptGroup.latte
deleted file mode 100644
index 2fd9e62..0000000
--- a/generated/ui/select/OptGroup.latte
+++ /dev/null
@@ -1,15 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.select — OptGroup renders a native optgroup around option children. *}
-{parameters
-  string $class = '',
-  string $label = '',
-  bool $disabled = false,
-  array $attrs = [],
-  string $children = '',
-}
-<optgroup n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::optGroupClasses(['class' => $class])),
-  'label' => \UI8Kit\Rt::orNull($label),
-  'disabled' => $disabled,
-  ...$attrs,
-]">{$children|noescape}</optgroup>
diff --git a/generated/ui/select/OptGroup.svelte b/generated/ui/select/OptGroup.svelte
deleted file mode 100644
index 6e209e0..0000000
--- a/generated/ui/select/OptGroup.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  OptGroup renders a native optgroup around option children.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type OptGroupProps = {
-    disabled?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { optGroupClasses } from "./select.shared";
-
-  let {
-    disabled,
-    class: className,
-    children,
-    ...rest
-  }: OptGroupProps = $props();
-
-  const cls = $derived(optGroupClasses({ className }));
-</script>
-
-<optgroup {...(cls ? { class: cls } : {})} disabled={disabled || undefined} {...rest}>
-  {@render children?.()}
-</optgroup>
diff --git a/generated/ui/select/OptGroup.vue b/generated/ui/select/OptGroup.vue
deleted file mode 100644
index 9acedf8..0000000
--- a/generated/ui/select/OptGroup.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  OptGroup renders a native optgroup around option children.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { optGroupClasses } from "./select.shared";
-
-defineOptions({ name: "OptGroup", inheritAttrs: false });
-
-const props = defineProps<{
-  disabled?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => optGroupClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <optgroup :class="cls || undefined" :disabled="props.disabled || undefined" v-bind="restAttrs">
-    <slot />
-  </optgroup>
-</template>
diff --git a/generated/ui/select/Select.svelte b/generated/ui/select/Select.svelte
deleted file mode 100644
index 850f8ef..0000000
--- a/generated/ui/select/Select.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Select renders option children from the Options list plus manual children.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-  import type { SelectOptionItem, SelectSize, SelectVariant } from "./select.shared";
-
-  export type SelectProps = {
-    variant?: SelectVariant;
-    size?: SelectSize;
-    value?: string;
-    disabled?: boolean;
-    required?: boolean;
-    options?: SelectOptionItem[];
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { selectClasses } from "./select.shared";
-  import { eqStr } from "../../utils/expr";
-
-  let {
-    variant,
-    size,
-    value,
-    disabled,
-    required,
-    options,
-    class: className,
-    children,
-    ...rest
-  }: SelectProps = $props();
-
-  const cls = $derived(selectClasses({ variant, size, className }));
-</script>
-
-<select {...(cls ? { class: cls } : {})} disabled={disabled || undefined} required={required || undefined} {...rest}>
-  {#each options ?? [] as item}
-    <option value={(item.value) ?? ""} selected={eqStr(item.value, value) || undefined}>{item.label}</option>
-  {/each}
-  {@render children?.()}
-</select>
diff --git a/generated/ui/select/Select.vue b/generated/ui/select/Select.vue
deleted file mode 100644
index 05758a8..0000000
--- a/generated/ui/select/Select.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Select renders option children from the Options list plus manual children.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { selectClasses, type SelectOptionItem, type SelectSize, type SelectVariant } from "./select.shared";
-import { eqStr } from "../../utils/expr";
-
-defineOptions({ name: "Select", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: SelectVariant;
-  size?: SelectSize;
-  value?: string;
-  disabled?: boolean;
-  required?: boolean;
-  options?: SelectOptionItem[];
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => selectClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <select :class="cls || undefined" :disabled="props.disabled || undefined" :required="props.required || undefined" v-bind="restAttrs">
-    <option v-for="(item, index) in (props.options ?? [])" :key="index" :value="(item.value) ?? ''" :selected="eqStr(item.value, props.value) || undefined">
-      {{ item.label }}
-    </option>
-    <slot />
-  </select>
-</template>
diff --git a/generated/ui/select/SelectOption.html.twig b/generated/ui/select/SelectOption.html.twig
deleted file mode 100644
index 4db556b..0000000
--- a/generated/ui/select/SelectOption.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.select — SelectOption renders an option for custom Select children. #}
-<option{{ ui8kit_attr_str({ 'value': ui8kit_or_null((value|default(''))), 'label': ui8kit_or_null((label|default(''))), 'selected': (selected|default(false)), 'disabled': (disabled|default(false)) }, attrs|default({})) }}>{{ children|default('')|raw }}</option>
diff --git a/generated/ui/select/SelectOption.latte b/generated/ui/select/SelectOption.latte
deleted file mode 100644
index d1cbe76..0000000
--- a/generated/ui/select/SelectOption.latte
+++ /dev/null
@@ -1,17 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.select — SelectOption renders an option for custom Select children. *}
-{parameters
-  string $value = '',
-  string $label = '',
-  bool $selected = false,
-  bool $disabled = false,
-  array $attrs = [],
-  string $children = '',
-}
-<option n:attr="[
-  'value' => \UI8Kit\Rt::orNull($value),
-  'label' => \UI8Kit\Rt::orNull($label),
-  'selected' => $selected,
-  'disabled' => $disabled,
-  ...$attrs,
-]">{$children|noescape}</option>
diff --git a/generated/ui/select/SelectOption.svelte b/generated/ui/select/SelectOption.svelte
deleted file mode 100644
index bf011d4..0000000
--- a/generated/ui/select/SelectOption.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  SelectOption renders an option for custom Select children.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type SelectOptionProps = {
-    selected?: boolean;
-    disabled?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  let {
-    selected,
-    disabled,
-    class: className,
-    children,
-    ...rest
-  }: SelectOptionProps = $props();
-</script>
-
-<option selected={selected || undefined} disabled={disabled || undefined} {...rest}>
-  {@render children?.()}
-</option>
diff --git a/generated/ui/select/SelectOption.vue b/generated/ui/select/SelectOption.vue
deleted file mode 100644
index 4c908b0..0000000
--- a/generated/ui/select/SelectOption.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  SelectOption renders an option for custom Select children.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-
-defineOptions({ name: "SelectOption", inheritAttrs: false });
-
-const props = defineProps<{
-  selected?: boolean;
-  disabled?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-</script>
-
-<template>
-  <option :selected="props.selected || undefined" :disabled="props.disabled || undefined" v-bind="restAttrs">
-    <slot />
-  </option>
-</template>
diff --git a/generated/ui/select/select.shared.ts b/generated/ui/select/select.shared.ts
deleted file mode 100644
index f2f3bdf..0000000
--- a/generated/ui/select/select.shared.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.select — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import selectRecipeJson from "./select.variants.json";
-
-export const selectRecipe = selectRecipeJson;
-
-export type SelectOptionItem = {
-  value?: string;
-  label?: string;
-};
-
-export type SelectVariant = RecipeKey<typeof selectRecipe, "variant">;
-export type SelectSize = RecipeKey<typeof selectRecipe, "size">;
-
-/** Select renders option children from the Options list plus manual children. */
-export type SelectBaseProps = {
-  variant?: SelectVariant;
-  size?: SelectSize;
-  value?: string;
-  disabled?: boolean;
-  required?: boolean;
-  options?: SelectOptionItem[];
-};
-
-export type SelectClassesInput = {
-  variant?: SelectVariant;
-  size?: SelectSize;
-  className?: string;
-};
-
-/** Compose Select classes without rendering — the cross-runtime `asChild` substitute. */
-export function selectClasses(input: SelectClassesInput = {}): string {
-  return cn(composeRecipe(selectRecipe, { variant: input.variant, size: input.size }), input.className);
-}
-
-/** SelectOption renders an option for custom Select children. */
-export type SelectOptionBaseProps = {
-  selected?: boolean;
-  disabled?: boolean;
-};
-
-/** OptGroup renders a native optgroup around option children. */
-export type OptGroupBaseProps = {
-  disabled?: boolean;
-};
-
-export type OptGroupClassesInput = {
-  className?: string;
-};
-
-/** Compose OptGroup classes without rendering — the cross-runtime `asChild` substitute. */
-export function optGroupClasses(input: OptGroupClassesInput = {}): string {
-  return cn(input.className);
-}
diff --git a/generated/ui/select/select.solid.tsx b/generated/ui/select/select.solid.tsx
deleted file mode 100644
index 3ffa801..0000000
--- a/generated/ui/select/select.solid.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Select is a native dropdown built from Option items.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { optGroupClasses, selectClasses, type SelectOptionItem, type SelectSize, type SelectVariant } from "./select.shared";
-import { eqStr } from "../../utils/expr";
-
-/**
- * Select renders option children from the Options list plus manual children.
- */
-export type SelectProps = Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, "class" | "className" | "children" | "variant" | "size" | "value" | "disabled" | "required" | "options"> & {
-  variant?: SelectVariant;
-  size?: SelectSize;
-  value?: string;
-  disabled?: boolean;
-  required?: boolean;
-  options?: SelectOptionItem[];
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Select: Component<SelectProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "value", "disabled", "required", "options", "class", "className", "children"]);
-  const cls = () => selectClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <select class={cls() || undefined} disabled={local.disabled || undefined} required={local.required || undefined} {...rest}>
-      {(local.options ?? []).map((item, index) => (
-        <option value={(item.value) ?? ""} selected={eqStr(item.value, local.value) || undefined}>
-          {item.label}
-        </option>
-      ))}
-      {local.children}
-    </select>
-  );
-};
-
-/**
- * SelectOption renders an option for custom Select children.
- */
-export type SelectOptionProps = Omit<JSX.OptionHTMLAttributes<HTMLOptionElement>, "class" | "className" | "children" | "selected" | "disabled"> & {
-  selected?: boolean;
-  disabled?: boolean;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const SelectOption: Component<SelectOptionProps> = (props) => {
-  const [local, rest] = splitProps(props, ["selected", "disabled", "class", "className", "children"]);
-  return (
-    <option selected={local.selected || undefined} disabled={local.disabled || undefined} {...rest}>
-      {local.children}
-    </option>
-  );
-};
-
-/**
- * OptGroup renders a native optgroup around option children.
- */
-export type OptGroupProps = Omit<JSX.OptgroupHTMLAttributes<HTMLOptGroupElement>, "class" | "className" | "children" | "disabled"> & {
-  disabled?: boolean;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const OptGroup: Component<OptGroupProps> = (props) => {
-  const [local, rest] = splitProps(props, ["disabled", "class", "className", "children"]);
-  const cls = () => optGroupClasses({ className: local.class ?? local.className });
-  return (
-    <optgroup class={cls() || undefined} disabled={local.disabled || undefined} {...rest}>
-      {local.children}
-    </optgroup>
-  );
-};
diff --git a/generated/ui/select/select.tsx b/generated/ui/select/select.tsx
deleted file mode 100644
index 474d054..0000000
--- a/generated/ui/select/select.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Select is a native dropdown built from Option items.
- */
-
-import { forwardRef, type ReactNode, type OptgroupHTMLAttributes, type OptionHTMLAttributes, type SelectHTMLAttributes } from "react";
-import { optGroupClasses, selectClasses, type SelectOptionItem, type SelectSize, type SelectVariant } from "./select.shared";
-import { eqStr } from "../../utils/expr";
-
-/**
- * Select renders option children from the Options list plus manual children.
- */
-export type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "className" | "children" | "variant" | "size" | "value" | "disabled" | "required" | "options"> & {
-  variant?: SelectVariant;
-  size?: SelectSize;
-  value?: string;
-  disabled?: boolean;
-  required?: boolean;
-  options?: SelectOptionItem[];
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
-  { variant, size, value, disabled, required, options, className, children, ...rest },
-  ref
-) {
-  const cls = selectClasses({ variant, size, className });
-  return (
-    <select ref={ref} className={cls || undefined} disabled={disabled || undefined} required={required || undefined} {...rest}>
-      {(options ?? []).map((item, index) => (
-        <option key={index} value={(item.value) ?? ""} selected={eqStr(item.value, value) || undefined}>
-          {item.label}
-        </option>
-      ))}
-      {children}
-    </select>
-  );
-});
-Select.displayName = "Select";
-
-/**
- * SelectOption renders an option for custom Select children.
- */
-export type SelectOptionProps = Omit<OptionHTMLAttributes<HTMLOptionElement>, "className" | "children" | "selected" | "disabled"> & {
-  selected?: boolean;
-  disabled?: boolean;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const SelectOption = forwardRef<HTMLOptionElement, SelectOptionProps>(function SelectOption(
-  { selected, disabled, className, children, ...rest },
-  ref
-) {
-  return (
-    <option ref={ref} selected={selected || undefined} disabled={disabled || undefined} {...rest}>
-      {children}
-    </option>
-  );
-});
-SelectOption.displayName = "SelectOption";
-
-/**
- * OptGroup renders a native optgroup around option children.
- */
-export type OptGroupProps = Omit<OptgroupHTMLAttributes<HTMLOptGroupElement>, "className" | "children" | "disabled"> & {
-  disabled?: boolean;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const OptGroup = forwardRef<HTMLOptGroupElement, OptGroupProps>(function OptGroup(
-  { disabled, className, children, ...rest },
-  ref
-) {
-  const cls = optGroupClasses({ className });
-  return (
-    <optgroup ref={ref} className={cls || undefined} disabled={disabled || undefined} {...rest}>
-      {children}
-    </optgroup>
-  );
-});
-OptGroup.displayName = "OptGroup";
diff --git a/generated/ui/select/select.variants.json b/generated/ui/select/select.variants.json
deleted file mode 100644
index de12d1f..0000000
--- a/generated/ui/select/select.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-10 px-3 py-2 text-sm",
-      "lg": "h-12 px-4 text-base",
-      "sm": "h-8 px-3 text-sm",
-      "xs": "h-8 px-2 text-xs"
-    },
-    "variant": {
-      "default": "border-border bg-background",
-      "ghost": "border-transparent bg-muted",
-      "outline": "border-border bg-background"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.select",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/select/select_gen.go b/generated/ui/select/select_gen.go
deleted file mode 100644
index 9d1e325..0000000
--- a/generated/ui/select/select_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package selectfield
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed select.variants.json
-var selectVariantsJSON []byte
-
-// SelectVariants is the CVA recipe shared verbatim by all runtimes.
-var SelectVariants = uiutils.MustParseVariantRecipe(selectVariantsJSON).ToVariants()
diff --git a/generated/ui/select/select_templ.go b/generated/ui/select/select_templ.go
deleted file mode 100644
index 20e9dd3..0000000
--- a/generated/ui/select/select_templ.go
+++ /dev/null
@@ -1,491 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Select is a native dropdown built from Option items.
-
-
-*/
-
-package selectfield
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// SelectOptionItem is one SelectOptionItem entry.
-type SelectOptionItem struct {
-	Value string
-	Label string
-}
-
-// SelectProps configures Select.
-type SelectProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	Name  string
-	// Value — currently selected option value
-	Value    string
-	Disabled bool
-	Required bool
-	Options  []SelectOptionItem
-	// ID — element id
-	ID string
-	// Role — ARIA role override
-	Role string
-	// TabIndex — tab order override
-	TabIndex string
-	// AriaLabel — accessible name for unlabeled controls
-	AriaLabel string
-	Attrs     templ.Attributes
-}
-
-// SelectClasses composes Select classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func SelectClasses(p SelectProps) string {
-	return uiutils.Compose(SelectVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Select renders the Select contract.
-func Select(p SelectProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{SelectClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<select")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 57, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Name) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 60, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var5 string
-		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Required {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " required")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Role) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " role=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(p.Role)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 66, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.TabIndex) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " tabindex=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.TabIndex)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 69, Col: 24}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaLabel) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " aria-label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 72, Col: 27}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, item := range p.Options {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<option value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item.Value)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 78, Col: 22}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if item.Value == p.Value {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " selected")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var10 string
-			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 81, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</option>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</select>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// SelectOptionProps configures SelectOption.
-type SelectOptionProps struct {
-	Value    string
-	Label    string
-	Selected bool
-	Disabled bool
-	Attrs    templ.Attributes
-}
-
-// SelectOption renders the SelectOption contract.
-func SelectOption(p SelectOptionProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var11 == nil {
-			templ_7745c5c3_Var11 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<option")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Value) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, " value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var12 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 101, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Label) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, " label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(p.Label)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 104, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Selected {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, " selected")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var11.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</option>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// OptGroupProps configures OptGroup.
-type OptGroupProps struct {
-	// Class — adds Tailwind utilities
-	Class    string
-	Label    string
-	Disabled bool
-	Attrs    templ.Attributes
-}
-
-// OptGroupClasses composes OptGroup classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func OptGroupClasses(p OptGroupProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// OptGroup renders the OptGroup contract.
-func OptGroup(p OptGroupProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var14 == nil {
-			templ_7745c5c3_Var14 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var15 = []any{OptGroupClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var15...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<optgroup class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var16 string
-		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var15).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Label) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, " label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var17 string
-			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(p.Label)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/select/select.templ`, Line: 134, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var14.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</optgroup>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/separator/Separator.html.twig b/generated/ui/separator/Separator.html.twig
deleted file mode 100644
index d4c55b5..0000000
--- a/generated/ui/separator/Separator.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.separator — Separator renders hr with optional decorative semantics. #}
-<hr{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('separatorClasses', { 'variant': (variant|default('')), 'orientation': (orientation|default('')), 'class': (class|default('')) })), 'role': (((decorative|default(false))) ? 'presentation' : null), 'aria-hidden': (((decorative|default(false))) ? 'true' : null), 'aria-orientation': ((((orientation|default('')) == 'vertical')) ? 'vertical' : null) }, attrs|default({})) }}>
diff --git a/generated/ui/separator/Separator.latte b/generated/ui/separator/Separator.latte
deleted file mode 100644
index a865d0c..0000000
--- a/generated/ui/separator/Separator.latte
+++ /dev/null
@@ -1,16 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.separator — Separator renders hr with optional decorative semantics. *}
-{parameters
-  string $variant = '',
-  string $orientation = '',
-  string $class = '',
-  bool $decorative = false,
-  array $attrs = [],
-}
-<hr n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::separatorClasses(['variant' => $variant, 'orientation' => $orientation, 'class' => $class])),
-  'role' => (($decorative) ? 'presentation' : null),
-  'aria-hidden' => (($decorative) ? 'true' : null),
-  'aria-orientation' => ((($orientation === 'vertical')) ? 'vertical' : null),
-  ...$attrs,
-]">
diff --git a/generated/ui/separator/Separator.svelte b/generated/ui/separator/Separator.svelte
deleted file mode 100644
index 832bd92..0000000
--- a/generated/ui/separator/Separator.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Separator renders hr with optional decorative semantics.
--->
-<script lang="ts" module>
-  import type { SeparatorOrientation, SeparatorVariant } from "./separator.shared";
-
-  export type SeparatorProps = {
-    variant?: SeparatorVariant;
-    orientation?: SeparatorOrientation;
-    decorative?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { separatorClasses } from "./separator.shared";
-  import { eqStr } from "../../utils/expr";
-
-  let {
-    variant,
-    orientation,
-    decorative,
-    class: className,
-    ...rest
-  }: SeparatorProps = $props();
-
-  const cls = $derived(separatorClasses({ variant, orientation, className }));
-</script>
-
-<hr {...(cls ? { class: cls } : {})} role={decorative ? "presentation" : undefined} aria-hidden={decorative ? "true" : undefined} aria-orientation={eqStr(orientation, "vertical") ? "vertical" : undefined} {...rest} />
diff --git a/generated/ui/separator/Separator.vue b/generated/ui/separator/Separator.vue
deleted file mode 100644
index 9caed97..0000000
--- a/generated/ui/separator/Separator.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Separator renders hr with optional decorative semantics.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { separatorClasses, type SeparatorOrientation, type SeparatorVariant } from "./separator.shared";
-import { eqStr } from "../../utils/expr";
-
-defineOptions({ name: "Separator", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: SeparatorVariant;
-  orientation?: SeparatorOrientation;
-  decorative?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => separatorClasses({ variant: props.variant, orientation: props.orientation, className: callerClass.value }));
-</script>
-
-<template>
-  <hr :class="cls || undefined" :role="props.decorative ? 'presentation' : undefined" :aria-hidden="props.decorative ? 'true' : undefined" :aria-orientation="eqStr(props.orientation, 'vertical') ? 'vertical' : undefined" v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/separator/separator.shared.ts b/generated/ui/separator/separator.shared.ts
deleted file mode 100644
index 1a041ff..0000000
--- a/generated/ui/separator/separator.shared.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.separator — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import separatorRecipeJson from "./separator.variants.json";
-
-export const separatorRecipe = separatorRecipeJson;
-
-export type SeparatorVariant = RecipeKey<typeof separatorRecipe, "variant">;
-export type SeparatorOrientation = RecipeKey<typeof separatorRecipe, "orientation">;
-
-/** Separator renders hr with optional decorative semantics. */
-export type SeparatorBaseProps = {
-  variant?: SeparatorVariant;
-  orientation?: SeparatorOrientation;
-  decorative?: boolean;
-};
-
-export type SeparatorClassesInput = {
-  variant?: SeparatorVariant;
-  orientation?: SeparatorOrientation;
-  className?: string;
-};
-
-/** Compose Separator classes without rendering — the cross-runtime `asChild` substitute. */
-export function separatorClasses(input: SeparatorClassesInput = {}): string {
-  return cn(composeRecipe(separatorRecipe, { variant: input.variant, orientation: input.orientation }), input.className);
-}
diff --git a/generated/ui/separator/separator.solid.tsx b/generated/ui/separator/separator.solid.tsx
deleted file mode 100644
index a795dcc..0000000
--- a/generated/ui/separator/separator.solid.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Separator renders a semantic or decorative hr.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { separatorClasses, type SeparatorOrientation, type SeparatorVariant } from "./separator.shared";
-import { eqStr } from "../../utils/expr";
-
-/**
- * Separator renders hr with optional decorative semantics.
- */
-export type SeparatorProps = Omit<JSX.HTMLAttributes<HTMLHRElement>, "class" | "className" | "children" | "variant" | "orientation" | "decorative"> & {
-  variant?: SeparatorVariant;
-  orientation?: SeparatorOrientation;
-  decorative?: boolean;
-  class?: string;
-  className?: string;
-};
-
-export const Separator: Component<SeparatorProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "orientation", "decorative", "class", "className"]);
-  const cls = () => separatorClasses({ variant: local.variant, orientation: local.orientation, className: local.class ?? local.className });
-  return (
-    <hr class={cls() || undefined} role={local.decorative ? "presentation" : undefined} aria-hidden={local.decorative ? "true" : undefined} aria-orientation={eqStr(local.orientation, "vertical") ? "vertical" : undefined} {...rest} />
-  );
-};
diff --git a/generated/ui/separator/separator.tsx b/generated/ui/separator/separator.tsx
deleted file mode 100644
index a9d63b3..0000000
--- a/generated/ui/separator/separator.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Separator renders a semantic or decorative hr.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
-import { separatorClasses, type SeparatorOrientation, type SeparatorVariant } from "./separator.shared";
-import { eqStr } from "../../utils/expr";
-
-/**
- * Separator renders hr with optional decorative semantics.
- */
-export type SeparatorProps = Omit<HTMLAttributes<HTMLHRElement>, "className" | "children" | "variant" | "orientation" | "decorative"> & {
-  variant?: SeparatorVariant;
-  orientation?: SeparatorOrientation;
-  decorative?: boolean;
-  className?: string;
-};
-
-export const Separator = forwardRef<HTMLHRElement, SeparatorProps>(function Separator(
-  { variant, orientation, decorative, className, ...rest },
-  ref
-) {
-  const cls = separatorClasses({ variant, orientation, className });
-  return (
-    <hr ref={ref} className={cls || undefined} role={decorative ? "presentation" : undefined} aria-hidden={decorative ? "true" : undefined} aria-orientation={eqStr(orientation, "vertical") ? "vertical" : undefined} {...rest} />
-  );
-});
-Separator.displayName = "Separator";
diff --git a/generated/ui/separator/separator.variants.json b/generated/ui/separator/separator.variants.json
deleted file mode 100644
index b3716f6..0000000
--- a/generated/ui/separator/separator.variants.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "shrink-0 border-0 bg-border",
-  "byKey": {
-    "orientation": {
-      "horizontal": "h-px w-full",
-      "vertical": "h-full w-px"
-    },
-    "variant": {
-      "default": "",
-      "muted": "bg-muted",
-      "spaced": "my-4",
-      "strong": "bg-foreground"
-    }
-  },
-  "defaults": {
-    "orientation": "horizontal",
-    "variant": "default"
-  },
-  "id": "ui.separator",
-  "keys": [
-    "orientation",
-    "variant"
-  ]
-}
diff --git a/generated/ui/separator/separator_gen.go b/generated/ui/separator/separator_gen.go
deleted file mode 100644
index f91af72..0000000
--- a/generated/ui/separator/separator_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package separator
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed separator.variants.json
-var separatorVariantsJSON []byte
-
-// SeparatorVariants is the CVA recipe shared verbatim by all runtimes.
-var SeparatorVariants = uiutils.MustParseVariantRecipe(separatorVariantsJSON).ToVariants()
diff --git a/generated/ui/separator/separator_templ.go b/generated/ui/separator/separator_templ.go
deleted file mode 100644
index 921a226..0000000
--- a/generated/ui/separator/separator_templ.go
+++ /dev/null
@@ -1,160 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Separator renders a semantic or decorative hr.
-
-
-*/
-
-package separator
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// SeparatorProps configures Separator.
-type SeparatorProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Orientation — horizontal or vertical
-	Orientation string
-	// Class — adds Tailwind utilities
-	Class string
-	// Decorative — hides the rule from assistive technology
-	Decorative bool
-	Attrs      templ.Attributes
-}
-
-// SeparatorClasses composes Separator classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func SeparatorClasses(p SeparatorProps) string {
-	return uiutils.Compose(SeparatorVariants, map[string]string{
-		"variant":     p.Variant,
-		"orientation": p.Orientation,
-	}, p.Class)
-}
-
-// Separator renders the Separator contract.
-func Separator(p SeparatorProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{SeparatorClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<hr class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/separator/separator.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if p.Decorative {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " role=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("presentation")
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/separator/separator.templ`, Line: 40, Col: 24}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Decorative {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " aria-hidden=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("true")
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/separator/separator.templ`, Line: 43, Col: 23}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Orientation == "vertical" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " aria-orientation=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("vertical")
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/separator/separator.templ`, Line: 46, Col: 32}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/shared.ts b/generated/ui/shared.ts
deleted file mode 100644
index e6e228c..0000000
--- a/generated/ui/shared.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// Shared per-brick contracts (types + classes helpers).
-
-export * from "./alert/alert.shared";
-export * from "./badge/badge.shared";
-export * from "./block/block.shared";
-export * from "./box/box.shared";
-export * from "./breadcrumb/breadcrumb.shared";
-export * from "./button/button.shared";
-export * from "./card/card.shared";
-export * from "./checkbox/checkbox.shared";
-export * from "./container/container.shared";
-export * from "./dialog/dialog.shared";
-export * from "./disclosure/disclosure.shared";
-export * from "./form/form.shared";
-export * from "./form/controls.shared";
-export * from "./grid/grid.shared";
-export * from "./group/group.shared";
-export * from "./icon/icon.shared";
-export * from "./iconbadge/iconbadge.shared";
-export * from "./image/image.shared";
-export * from "./inline/inline.shared";
-export * from "./input/input.shared";
-export * from "./label/label.shared";
-export * from "./linebreak/linebreak.shared";
-export * from "./link/link.shared";
-export * from "./list/list.shared";
-export * from "./radio/radio.shared";
-export * from "./select/select.shared";
-export * from "./separator/separator.shared";
-export * from "./stack/stack.shared";
-export * from "./switch/switch.shared";
-export * from "./table/table.shared";
-export * from "./text/text.shared";
-export * from "./textarea/textarea.shared";
-export * from "./title/title.shared";
diff --git a/generated/ui/stack/Stack.html.twig b/generated/ui/stack/Stack.html.twig
deleted file mode 100644
index cf8f94e..0000000
--- a/generated/ui/stack/Stack.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.stack — Stack renders a vertical flex container. #}
-{% set uiTag = ui8kit_resolve_tag((tag|default('')), 'div', 'Stack') %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('stackClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</{{ uiTag }}>
diff --git a/generated/ui/stack/Stack.latte b/generated/ui/stack/Stack.latte
deleted file mode 100644
index 7e884b5..0000000
--- a/generated/ui/stack/Stack.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.stack — Stack renders a vertical flex container. *}
-{parameters
-  string $class = '',
-  string $tag = '',
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTag = \UI8Kit\Rt::resolveTag($tag, 'div', 'Stack')}
-<div n:tag="$uiTag" n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::stackClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</div>
diff --git a/generated/ui/stack/Stack.svelte b/generated/ui/stack/Stack.svelte
deleted file mode 100644
index fb142e6..0000000
--- a/generated/ui/stack/Stack.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Stack renders a vertical flex container.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type StackProps = {
-    tag?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { stackClasses } from "./stack.shared";
-  import { resolveTag, TagGroup } from "../../utils/tags";
-
-  let {
-    tag,
-    class: className,
-    children,
-    ...rest
-  }: StackProps = $props();
-
-  const cls = $derived(stackClasses({ className }));
-  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.Stack));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</svelte:element>
diff --git a/generated/ui/stack/Stack.vue b/generated/ui/stack/Stack.vue
deleted file mode 100644
index 7816acc..0000000
--- a/generated/ui/stack/Stack.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Stack renders a vertical flex container.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { stackClasses } from "./stack.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-defineOptions({ name: "Stack", inheritAttrs: false });
-
-const props = defineProps<{
-  tag?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => stackClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => resolveTag(props.tag, "div", TagGroup.Stack));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </component>
-</template>
diff --git a/generated/ui/stack/stack.shared.ts b/generated/ui/stack/stack.shared.ts
deleted file mode 100644
index 4a5f1a2..0000000
--- a/generated/ui/stack/stack.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.stack — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import stackRecipeJson from "./stack.variants.json";
-
-export const stackRecipe = stackRecipeJson;
-
-/** Stack renders a vertical flex container. */
-export type StackBaseProps = {
-  tag?: string;
-};
-
-export type StackClassesInput = {
-  className?: string;
-};
-
-/** Compose Stack classes without rendering — the cross-runtime `asChild` substitute. */
-export function stackClasses(input: StackClassesInput = {}): string {
-  return cn(composeRecipe(stackRecipe, {  }), input.className);
-}
diff --git a/generated/ui/stack/stack.solid.tsx b/generated/ui/stack/stack.solid.tsx
deleted file mode 100644
index f385088..0000000
--- a/generated/ui/stack/stack.solid.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Stack arranges children vertically in a flex column.
- * Default layout primitive for spacing sections and form fields.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { stackClasses } from "./stack.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-
-/**
- * Stack renders a vertical flex container.
- */
-export type StackProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "tag"> & {
-  tag?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Stack: Component<StackProps> = (props) => {
-  const [local, rest] = splitProps(props, ["tag", "class", "className", "children"]);
-  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.Stack);
-  const cls = () => stackClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...rest}>
-      {local.children}
-    </Dynamic>
-  );
-};
diff --git a/generated/ui/stack/stack.templ b/generated/ui/stack/stack.templ
deleted file mode 100644
index 99b9d2a..0000000
--- a/generated/ui/stack/stack.templ
+++ /dev/null
@@ -1,54 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-Stack arranges children vertically in a flex column.
-Default layout primitive for spacing sections and form fields.
-*/
-
-package stack
-
-import (
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-// StackProps configures Stack.
-type StackProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Tag — div, ul, or ol. Use Block for landmarks (aside, section, header, nav).
-	Tag string
-	Attrs templ.Attributes
-}
-
-// StackClasses composes Stack classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func StackClasses(p StackProps) string {
-	return uiutils.Compose(StackVariants, map[string]string{}, p.Class)
-}
-
-// Stack renders the Stack contract.
-templ Stack(p StackProps) {
-	switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupStack) {
-		case "ul":
-			<ul
-				class={ StackClasses(p) }
-				{ p.Attrs... }
-			>
-				{ children... }
-			</ul>
-		case "ol":
-			<ol
-				class={ StackClasses(p) }
-				{ p.Attrs... }
-			>
-				{ children... }
-			</ol>
-		default:
-			<div
-				class={ StackClasses(p) }
-				{ p.Attrs... }
-			>
-				{ children... }
-			</div>
-	}
-}
diff --git a/generated/ui/stack/stack.tsx b/generated/ui/stack/stack.tsx
deleted file mode 100644
index a9e0422..0000000
--- a/generated/ui/stack/stack.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Stack arranges children vertically in a flex column.
- * Default layout primitive for spacing sections and form fields.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
-import { stackClasses } from "./stack.shared";
-import { resolveTag, TagGroup } from "../../utils/tags";
-import { Slot } from "../slot/slot";
-
-/**
- * Stack renders a vertical flex container.
- */
-export type StackProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
-  tag?: string;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Stack = forwardRef<HTMLElement, StackProps>(function Stack(
-  { tag, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = stackClasses({ className });
-  const resolvedTagValue = resolveTag(tag, "div", TagGroup.Stack);
-  const Tag = resolvedTagValue as ElementType;
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
-      {children}
-    </Tag>
-  );
-});
-Stack.displayName = "Stack";
diff --git a/generated/ui/stack/stack.variants.json b/generated/ui/stack/stack.variants.json
deleted file mode 100644
index 37b9aa4..0000000
--- a/generated/ui/stack/stack.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "flex flex-col",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.stack",
-  "keys": []
-}
diff --git a/generated/ui/stack/stack_gen.go b/generated/ui/stack/stack_gen.go
deleted file mode 100644
index cc55f61..0000000
--- a/generated/ui/stack/stack_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package stack
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed stack.variants.json
-var stackVariantsJSON []byte
-
-// StackVariants is the CVA recipe shared verbatim by all runtimes.
-var StackVariants = uiutils.MustParseVariantRecipe(stackVariantsJSON).ToVariants()
diff --git a/generated/ui/stack/stack_templ.go b/generated/ui/stack/stack_templ.go
deleted file mode 100644
index db68b7a..0000000
--- a/generated/ui/stack/stack_templ.go
+++ /dev/null
@@ -1,188 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Stack arranges children vertically in a flex column.
-
-
-Default layout primitive for spacing sections and form fields.
-
-
-*/
-
-package stack
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// StackProps configures Stack.
-type StackProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Tag — div, ul, or ol. Use Block for landmarks (aside, section, header, nav).
-	Tag   string
-	Attrs templ.Attributes
-}
-
-// StackClasses composes Stack classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func StackClasses(p StackProps) string {
-	return uiutils.Compose(StackVariants, map[string]string{}, p.Class)
-}
-
-// Stack renders the Stack contract.
-func Stack(p StackProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupStack) {
-		case "ul":
-			var templ_7745c5c3_Var2 = []any{StackClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<ul class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/stack/stack.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</ul>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "ol":
-			var templ_7745c5c3_Var4 = []any{StackClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<ol class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var4).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/stack/stack.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</ol>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		default:
-			var templ_7745c5c3_Var6 = []any{StackClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/stack/stack.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/switch/Switch.html.twig b/generated/ui/switch/Switch.html.twig
deleted file mode 100644
index 5461df4..0000000
--- a/generated/ui/switch/Switch.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.switch — Switch renders input[type=checkbox] with switch role attrs. #}
-<input{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'type': 'checkbox', 'name': ui8kit_or_null((name|default(''))), 'value': ui8kit_or_null((value|default(''))), 'class': ui8kit_or_null(ui8kit_classes('switchClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'checked': (checked|default(false)), 'disabled': (disabled|default(false)), 'required': (required|default(false)), 'tabindex': ui8kit_or_null((tabindex|default(''))), 'aria-label': ui8kit_or_null((ariaLabel|default(''))), 'role': 'switch', 'aria-checked': (((checked|default(false))) ? 'true' : 'false') }, attrs|default({})) }}>
diff --git a/generated/ui/switch/Switch.latte b/generated/ui/switch/Switch.latte
deleted file mode 100644
index 7ed6cb6..0000000
--- a/generated/ui/switch/Switch.latte
+++ /dev/null
@@ -1,31 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.switch — Switch renders input[type=checkbox] with switch role attrs. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $name = '',
-  string $value = '',
-  bool $checked = false,
-  bool $disabled = false,
-  bool $required = false,
-  string $id = '',
-  string $tabindex = '',
-  string $ariaLabel = '',
-  array $attrs = [],
-}
-<input n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'type' => 'checkbox',
-  'name' => \UI8Kit\Rt::orNull($name),
-  'value' => \UI8Kit\Rt::orNull($value),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::switchClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'checked' => $checked,
-  'disabled' => $disabled,
-  'required' => $required,
-  'tabindex' => \UI8Kit\Rt::orNull($tabindex),
-  'aria-label' => \UI8Kit\Rt::orNull($ariaLabel),
-  'role' => 'switch',
-  'aria-checked' => ($checked ? 'true' : 'false'),
-  ...$attrs,
-]">
diff --git a/generated/ui/switch/Switch.svelte b/generated/ui/switch/Switch.svelte
deleted file mode 100644
index 0650d8a..0000000
--- a/generated/ui/switch/Switch.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Switch renders input[type=checkbox] with switch role attrs.
--->
-<script lang="ts" module>
-  import type { SwitchSize, SwitchVariant } from "./switch.shared";
-
-  export type SwitchProps = {
-    variant?: SwitchVariant;
-    size?: SwitchSize;
-    checked?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { switchClasses } from "./switch.shared";
-  import { boolStr } from "../../utils/expr";
-
-  let {
-    variant,
-    size,
-    checked,
-    disabled,
-    required,
-    class: className,
-    ...rest
-  }: SwitchProps = $props();
-
-  const cls = $derived(switchClasses({ variant, size, className }));
-</script>
-
-<input type="checkbox" {...(cls ? { class: cls } : {})} checked={checked || undefined} disabled={disabled || undefined} required={required || undefined} role="switch" aria-checked={boolStr(checked)} {...rest} />
diff --git a/generated/ui/switch/Switch.vue b/generated/ui/switch/Switch.vue
deleted file mode 100644
index edd6dea..0000000
--- a/generated/ui/switch/Switch.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Switch renders input[type=checkbox] with switch role attrs.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { switchClasses, type SwitchSize, type SwitchVariant } from "./switch.shared";
-import { boolStr } from "../../utils/expr";
-
-defineOptions({ name: "Switch", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: SwitchVariant;
-  size?: SwitchSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => switchClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <input type="checkbox" :class="cls || undefined" :checked="props.checked || undefined" :disabled="props.disabled || undefined" :required="props.required || undefined" role="switch" :aria-checked="boolStr(props.checked)" v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/switch/switch.shared.ts b/generated/ui/switch/switch.shared.ts
deleted file mode 100644
index f21554a..0000000
--- a/generated/ui/switch/switch.shared.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.switch — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import switchRecipeJson from "./switch.variants.json";
-
-export const switchRecipe = switchRecipeJson;
-
-export type SwitchVariant = RecipeKey<typeof switchRecipe, "variant">;
-export type SwitchSize = RecipeKey<typeof switchRecipe, "size">;
-
-/** Switch renders input[type=checkbox] with switch role attrs. */
-export type SwitchBaseProps = {
-  variant?: SwitchVariant;
-  size?: SwitchSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-};
-
-export type SwitchClassesInput = {
-  variant?: SwitchVariant;
-  size?: SwitchSize;
-  className?: string;
-};
-
-/** Compose Switch classes without rendering — the cross-runtime `asChild` substitute. */
-export function switchClasses(input: SwitchClassesInput = {}): string {
-  return cn(composeRecipe(switchRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/switch/switch.solid.tsx b/generated/ui/switch/switch.solid.tsx
deleted file mode 100644
index 48ffbad..0000000
--- a/generated/ui/switch/switch.solid.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Switch is a toggle control (checkbox with switch ARIA semantics).
- * Use for on/off settings; wireframe uses native checkbox styling.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { switchClasses, type SwitchSize, type SwitchVariant } from "./switch.shared";
-import { boolStr } from "../../utils/expr";
-
-/**
- * Switch renders input[type=checkbox] with switch role attrs.
- */
-export type SwitchProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "class" | "className" | "children" | "variant" | "size" | "checked" | "disabled" | "required"> & {
-  variant?: SwitchVariant;
-  size?: SwitchSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  class?: string;
-  className?: string;
-};
-
-export const Switch: Component<SwitchProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "checked", "disabled", "required", "class", "className"]);
-  const cls = () => switchClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <input type="checkbox" class={cls() || undefined} checked={local.checked || undefined} disabled={local.disabled || undefined} required={local.required || undefined} role="switch" aria-checked={boolStr(local.checked)} {...rest} />
-  );
-};
diff --git a/generated/ui/switch/switch.tsx b/generated/ui/switch/switch.tsx
deleted file mode 100644
index 8609bf4..0000000
--- a/generated/ui/switch/switch.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Switch is a toggle control (checkbox with switch ARIA semantics).
- * Use for on/off settings; wireframe uses native checkbox styling.
- */
-
-import { forwardRef, type ReactNode, type InputHTMLAttributes } from "react";
-import { switchClasses, type SwitchSize, type SwitchVariant } from "./switch.shared";
-import { boolStr } from "../../utils/expr";
-
-/**
- * Switch renders input[type=checkbox] with switch role attrs.
- */
-export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "children" | "variant" | "size" | "checked" | "disabled" | "required"> & {
-  variant?: SwitchVariant;
-  size?: SwitchSize;
-  checked?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  className?: string;
-};
-
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-  { variant, size, checked, disabled, required, className, ...rest },
-  ref
-) {
-  const cls = switchClasses({ variant, size, className });
-  return (
-    <input ref={ref} type="checkbox" className={cls || undefined} checked={checked || undefined} disabled={disabled || undefined} required={required || undefined} role="switch" aria-checked={boolStr(checked)} {...rest} />
-  );
-});
-Switch.displayName = "Switch";
diff --git a/generated/ui/switch/switch.variants.json b/generated/ui/switch/switch.variants.json
deleted file mode 100644
index c3f7447..0000000
--- a/generated/ui/switch/switch.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "rounded border border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-4 w-4",
-      "lg": "h-5 w-5",
-      "sm": "h-4 w-4",
-      "xs": "h-3 w-3"
-    },
-    "variant": {
-      "default": "border-primary",
-      "ghost": "border-primary bg-muted/30",
-      "outline": "border-primary"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.switch",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/switch/switch_gen.go b/generated/ui/switch/switch_gen.go
deleted file mode 100644
index c1ea08d..0000000
--- a/generated/ui/switch/switch_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package formswitch
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed switch.variants.json
-var switchVariantsJSON []byte
-
-// SwitchVariants is the CVA recipe shared verbatim by all runtimes.
-var SwitchVariants = uiutils.MustParseVariantRecipe(switchVariantsJSON).ToVariants()
diff --git a/generated/ui/switch/switch_templ.go b/generated/ui/switch/switch_templ.go
deleted file mode 100644
index 1891cd3..0000000
--- a/generated/ui/switch/switch_templ.go
+++ /dev/null
@@ -1,250 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Switch is a toggle control (checkbox with switch ARIA semantics).
-
-
-Use for on/off settings; wireframe uses native checkbox styling.
-
-
-*/
-
-package formswitch
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// SwitchProps configures Switch.
-type SwitchProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class     string
-	Name      string
-	Value     string
-	Checked   bool
-	Disabled  bool
-	Required  bool
-	ID        string
-	TabIndex  string
-	AriaLabel string
-	Attrs     templ.Attributes
-}
-
-// SwitchClasses composes Switch classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func SwitchClasses(p SwitchProps) string {
-	return uiutils.Compose(SwitchVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Switch renders the Switch contract.
-func Switch(p SwitchProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{SwitchClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<input")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/switch/switch.templ`, Line: 46, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " type=\"checkbox\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Name) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/switch/switch.templ`, Line: 50, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Value) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " value=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/switch/switch.templ`, Line: 53, Col: 18}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/switch/switch.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if p.Checked {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " checked")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Required {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " required")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.TabIndex) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " tabindex=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.TabIndex)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/switch/switch.templ`, Line: 60, Col: 24}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaLabel) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " aria-label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/switch/switch.templ`, Line: 63, Col: 27}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, " role=\"switch\" aria-checked=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var9 string
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.BoolStr(p.Checked))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/switch/switch.templ`, Line: 66, Col: 43}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/table/Table.html.twig b/generated/ui/table/Table.html.twig
deleted file mode 100644
index 80ce3b4..0000000
--- a/generated/ui/table/Table.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — Table renders the root table element. #}
-<table{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</table>
diff --git a/generated/ui/table/Table.latte b/generated/ui/table/Table.latte
deleted file mode 100644
index efe64f8..0000000
--- a/generated/ui/table/Table.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — Table renders the root table element. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<table n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</table>
diff --git a/generated/ui/table/Table.svelte b/generated/ui/table/Table.svelte
deleted file mode 100644
index 6aa0e69..0000000
--- a/generated/ui/table/Table.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Table renders the root table element.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TableProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableClasses } from "./table.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: TableProps = $props();
-
-  const cls = $derived(tableClasses({ className }));
-</script>
-
-<table {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</table>
diff --git a/generated/ui/table/Table.vue b/generated/ui/table/Table.vue
deleted file mode 100644
index add3aca..0000000
--- a/generated/ui/table/Table.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Table renders the root table element.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableClasses } from "./table.shared";
-
-defineOptions({ name: "Table", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <table :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </table>
-</template>
diff --git a/generated/ui/table/TableBody.html.twig b/generated/ui/table/TableBody.html.twig
deleted file mode 100644
index 07c1cf5..0000000
--- a/generated/ui/table/TableBody.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — TableBody renders the tbody section. #}
-<tbody{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableBodyClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</tbody>
diff --git a/generated/ui/table/TableBody.latte b/generated/ui/table/TableBody.latte
deleted file mode 100644
index 537701c..0000000
--- a/generated/ui/table/TableBody.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — TableBody renders the tbody section. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<tbody n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableBodyClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</tbody>
diff --git a/generated/ui/table/TableBody.svelte b/generated/ui/table/TableBody.svelte
deleted file mode 100644
index 7be9542..0000000
--- a/generated/ui/table/TableBody.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableBody renders the tbody section.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TableBodyProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableBodyClasses } from "./table.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: TableBodyProps = $props();
-
-  const cls = $derived(tableBodyClasses({ className }));
-</script>
-
-<tbody {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</tbody>
diff --git a/generated/ui/table/TableBody.vue b/generated/ui/table/TableBody.vue
deleted file mode 100644
index 0d4ac96..0000000
--- a/generated/ui/table/TableBody.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableBody renders the tbody section.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableBodyClasses } from "./table.shared";
-
-defineOptions({ name: "TableBody", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableBodyClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <tbody :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </tbody>
-</template>
diff --git a/generated/ui/table/TableCaption.html.twig b/generated/ui/table/TableCaption.html.twig
deleted file mode 100644
index e17571f..0000000
--- a/generated/ui/table/TableCaption.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — TableCaption renders the table caption. #}
-<caption{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableCaptionClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</caption>
diff --git a/generated/ui/table/TableCaption.latte b/generated/ui/table/TableCaption.latte
deleted file mode 100644
index 69a5e6d..0000000
--- a/generated/ui/table/TableCaption.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — TableCaption renders the table caption. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<caption n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableCaptionClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</caption>
diff --git a/generated/ui/table/TableCaption.svelte b/generated/ui/table/TableCaption.svelte
deleted file mode 100644
index a6d311d..0000000
--- a/generated/ui/table/TableCaption.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableCaption renders the table caption.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TableCaptionProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableCaptionClasses } from "./table.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: TableCaptionProps = $props();
-
-  const cls = $derived(tableCaptionClasses({ className }));
-</script>
-
-<caption {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</caption>
diff --git a/generated/ui/table/TableCaption.vue b/generated/ui/table/TableCaption.vue
deleted file mode 100644
index 185e7a9..0000000
--- a/generated/ui/table/TableCaption.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableCaption renders the table caption.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableCaptionClasses } from "./table.shared";
-
-defineOptions({ name: "TableCaption", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableCaptionClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <caption :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </caption>
-</template>
diff --git a/generated/ui/table/TableCell.html.twig b/generated/ui/table/TableCell.html.twig
deleted file mode 100644
index d7f3b8b..0000000
--- a/generated/ui/table/TableCell.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — TableCell renders td with colspan and rowspan. #}
-<td{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableCellClasses', { 'class': (class|default('')) })), 'colspan': ((((colspan|default(0)) > 0)) ? (((colspan|default(0))) ~ '') : null), 'rowspan': ((((rowspan|default(0)) > 0)) ? (((rowspan|default(0))) ~ '') : null), 'headers': ui8kit_or_null((headers|default(''))) }, attrs|default({})) }}>{{ children|default('')|raw }}</td>
diff --git a/generated/ui/table/TableCell.latte b/generated/ui/table/TableCell.latte
deleted file mode 100644
index 84c6c74..0000000
--- a/generated/ui/table/TableCell.latte
+++ /dev/null
@@ -1,19 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — TableCell renders td with colspan and rowspan. *}
-{parameters
-  string $class = '',
-  string $scope = '',
-  int $colspan = 0,
-  int $rowspan = 0,
-  string $headers = '',
-  string $abbr = '',
-  array $attrs = [],
-  string $children = '',
-}
-<td n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableCellClasses(['class' => $class])),
-  'colspan' => ((($colspan > 0)) ? (string) ($colspan) : null),
-  'rowspan' => ((($rowspan > 0)) ? (string) ($rowspan) : null),
-  'headers' => \UI8Kit\Rt::orNull($headers),
-  ...$attrs,
-]">{$children|noescape}</td>
diff --git a/generated/ui/table/TableCell.svelte b/generated/ui/table/TableCell.svelte
deleted file mode 100644
index 7f9dae4..0000000
--- a/generated/ui/table/TableCell.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableCell renders td with colspan and rowspan.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TableCellProps = {
-    scope?: string;
-    colspan?: number;
-    rowspan?: number;
-    abbr?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableCellClasses } from "./table.shared";
-  import { isSetNum } from "../../utils/expr";
-
-  let {
-    scope,
-    colspan: colSpan,
-    rowspan: rowSpan,
-    abbr,
-    class: className,
-    children,
-    ...rest
-  }: TableCellProps = $props();
-
-  const cls = $derived(tableCellClasses({ className }));
-</script>
-
-<td {...(cls ? { class: cls } : {})} colspan={isSetNum(colSpan) ? String(colSpan ?? 0) : undefined} rowspan={isSetNum(rowSpan) ? String(rowSpan ?? 0) : undefined} {...rest}>
-  {@render children?.()}
-</td>
diff --git a/generated/ui/table/TableCell.vue b/generated/ui/table/TableCell.vue
deleted file mode 100644
index 7df5fcd..0000000
--- a/generated/ui/table/TableCell.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableCell renders td with colspan and rowspan.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableCellClasses } from "./table.shared";
-import { isSetNum } from "../../utils/expr";
-
-defineOptions({ name: "TableCell", inheritAttrs: false });
-
-const props = defineProps<{
-  scope?: string;
-  colSpan?: number;
-  rowSpan?: number;
-  abbr?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableCellClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <td :class="cls || undefined" :colspan="isSetNum(props.colSpan) ? String(props.colSpan ?? 0) : undefined" :rowspan="isSetNum(props.rowSpan) ? String(props.rowSpan ?? 0) : undefined" v-bind="restAttrs">
-    <slot />
-  </td>
-</template>
diff --git a/generated/ui/table/TableCol.html.twig b/generated/ui/table/TableCol.html.twig
deleted file mode 100644
index 5bc6eff..0000000
--- a/generated/ui/table/TableCol.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — TableCol renders a single col definition. #}
-<col{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableColClasses', { 'class': (class|default('')) })), 'span': ((((span|default(0)) > 0)) ? (((span|default(0))) ~ '') : null) }, attrs|default({})) }}>
diff --git a/generated/ui/table/TableCol.latte b/generated/ui/table/TableCol.latte
deleted file mode 100644
index 1c643ab..0000000
--- a/generated/ui/table/TableCol.latte
+++ /dev/null
@@ -1,12 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — TableCol renders a single col definition. *}
-{parameters
-  string $class = '',
-  int $span = 0,
-  array $attrs = [],
-}
-<col n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableColClasses(['class' => $class])),
-  'span' => ((($span > 0)) ? (string) ($span) : null),
-  ...$attrs,
-]">
diff --git a/generated/ui/table/TableCol.svelte b/generated/ui/table/TableCol.svelte
deleted file mode 100644
index c6a6e2a..0000000
--- a/generated/ui/table/TableCol.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableCol renders a single col definition.
--->
-<script lang="ts" module>
-
-  export type TableColProps = {
-    span?: number;
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableColClasses } from "./table.shared";
-  import { isSetNum } from "../../utils/expr";
-
-  let {
-    span,
-    class: className,
-    ...rest
-  }: TableColProps = $props();
-
-  const cls = $derived(tableColClasses({ className }));
-</script>
-
-<col {...(cls ? { class: cls } : {})} span={isSetNum(span) ? String(span ?? 0) : undefined} {...rest} />
diff --git a/generated/ui/table/TableCol.vue b/generated/ui/table/TableCol.vue
deleted file mode 100644
index 5a9e96d..0000000
--- a/generated/ui/table/TableCol.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableCol renders a single col definition.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableColClasses } from "./table.shared";
-import { isSetNum } from "../../utils/expr";
-
-defineOptions({ name: "TableCol", inheritAttrs: false });
-
-const props = defineProps<{
-  span?: number;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableColClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <col :class="cls || undefined" :span="isSetNum(props.span) ? String(props.span ?? 0) : undefined" v-bind="restAttrs" />
-</template>
diff --git a/generated/ui/table/TableColGroup.html.twig b/generated/ui/table/TableColGroup.html.twig
deleted file mode 100644
index 8e28201..0000000
--- a/generated/ui/table/TableColGroup.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — TableColGroup renders colgroup with optional span. #}
-<colgroup{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableColGroupClasses', { 'class': (class|default('')) })), 'span': ((((span|default(0)) > 0)) ? (((span|default(0))) ~ '') : null) }, attrs|default({})) }}>{{ children|default('')|raw }}</colgroup>
diff --git a/generated/ui/table/TableColGroup.latte b/generated/ui/table/TableColGroup.latte
deleted file mode 100644
index 4dd0940..0000000
--- a/generated/ui/table/TableColGroup.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — TableColGroup renders colgroup with optional span. *}
-{parameters
-  string $class = '',
-  int $span = 0,
-  array $attrs = [],
-  string $children = '',
-}
-<colgroup n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableColGroupClasses(['class' => $class])),
-  'span' => ((($span > 0)) ? (string) ($span) : null),
-  ...$attrs,
-]">{$children|noescape}</colgroup>
diff --git a/generated/ui/table/TableColGroup.svelte b/generated/ui/table/TableColGroup.svelte
deleted file mode 100644
index 5ed177c..0000000
--- a/generated/ui/table/TableColGroup.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableColGroup renders colgroup with optional span.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TableColGroupProps = {
-    span?: number;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableColGroupClasses } from "./table.shared";
-  import { isSetNum } from "../../utils/expr";
-
-  let {
-    span,
-    class: className,
-    children,
-    ...rest
-  }: TableColGroupProps = $props();
-
-  const cls = $derived(tableColGroupClasses({ className }));
-</script>
-
-<colgroup {...(cls ? { class: cls } : {})} span={isSetNum(span) ? String(span ?? 0) : undefined} {...rest}>
-  {@render children?.()}
-</colgroup>
diff --git a/generated/ui/table/TableColGroup.vue b/generated/ui/table/TableColGroup.vue
deleted file mode 100644
index f8ee0f8..0000000
--- a/generated/ui/table/TableColGroup.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableColGroup renders colgroup with optional span.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableColGroupClasses } from "./table.shared";
-import { isSetNum } from "../../utils/expr";
-
-defineOptions({ name: "TableColGroup", inheritAttrs: false });
-
-const props = defineProps<{
-  span?: number;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableColGroupClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <colgroup :class="cls || undefined" :span="isSetNum(props.span) ? String(props.span ?? 0) : undefined" v-bind="restAttrs">
-    <slot />
-  </colgroup>
-</template>
diff --git a/generated/ui/table/TableFoot.html.twig b/generated/ui/table/TableFoot.html.twig
deleted file mode 100644
index 9d99699..0000000
--- a/generated/ui/table/TableFoot.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — TableFoot renders the tfoot section. #}
-<tfoot{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableFootClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</tfoot>
diff --git a/generated/ui/table/TableFoot.latte b/generated/ui/table/TableFoot.latte
deleted file mode 100644
index 7ba4c8b..0000000
--- a/generated/ui/table/TableFoot.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — TableFoot renders the tfoot section. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<tfoot n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableFootClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</tfoot>
diff --git a/generated/ui/table/TableFoot.svelte b/generated/ui/table/TableFoot.svelte
deleted file mode 100644
index 36bb889..0000000
--- a/generated/ui/table/TableFoot.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableFoot renders the tfoot section.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TableFootProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableFootClasses } from "./table.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: TableFootProps = $props();
-
-  const cls = $derived(tableFootClasses({ className }));
-</script>
-
-<tfoot {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</tfoot>
diff --git a/generated/ui/table/TableFoot.vue b/generated/ui/table/TableFoot.vue
deleted file mode 100644
index 1a0bbe1..0000000
--- a/generated/ui/table/TableFoot.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableFoot renders the tfoot section.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableFootClasses } from "./table.shared";
-
-defineOptions({ name: "TableFoot", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableFootClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <tfoot :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </tfoot>
-</template>
diff --git a/generated/ui/table/TableHead.html.twig b/generated/ui/table/TableHead.html.twig
deleted file mode 100644
index 6c07858..0000000
--- a/generated/ui/table/TableHead.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — TableHead renders the thead section. #}
-<thead{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableHeadClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</thead>
diff --git a/generated/ui/table/TableHead.latte b/generated/ui/table/TableHead.latte
deleted file mode 100644
index 4ee4426..0000000
--- a/generated/ui/table/TableHead.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — TableHead renders the thead section. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<thead n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableHeadClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</thead>
diff --git a/generated/ui/table/TableHead.svelte b/generated/ui/table/TableHead.svelte
deleted file mode 100644
index 64eb2da..0000000
--- a/generated/ui/table/TableHead.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableHead renders the thead section.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TableHeadProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableHeadClasses } from "./table.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: TableHeadProps = $props();
-
-  const cls = $derived(tableHeadClasses({ className }));
-</script>
-
-<thead {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</thead>
diff --git a/generated/ui/table/TableHead.vue b/generated/ui/table/TableHead.vue
deleted file mode 100644
index e28fa32..0000000
--- a/generated/ui/table/TableHead.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableHead renders the thead section.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableHeadClasses } from "./table.shared";
-
-defineOptions({ name: "TableHead", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableHeadClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <thead :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </thead>
-</template>
diff --git a/generated/ui/table/TableHeadCell.html.twig b/generated/ui/table/TableHeadCell.html.twig
deleted file mode 100644
index 7ccce45..0000000
--- a/generated/ui/table/TableHeadCell.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — TableHeadCell renders th with optional scope and abbr. #}
-<th{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableHeadCellClasses', { 'class': (class|default('')) })), 'scope': ui8kit_or_null(ui8kit_one_of_or((scope|default('')), '', ['col', 'colgroup', 'row', 'rowgroup'], true)), 'abbr': ui8kit_or_null((abbr|default(''))), 'colspan': ((((colspan|default(0)) > 0)) ? (((colspan|default(0))) ~ '') : null), 'rowspan': ((((rowspan|default(0)) > 0)) ? (((rowspan|default(0))) ~ '') : null), 'headers': ui8kit_or_null((headers|default(''))) }, attrs|default({})) }}>{{ children|default('')|raw }}</th>
diff --git a/generated/ui/table/TableHeadCell.latte b/generated/ui/table/TableHeadCell.latte
deleted file mode 100644
index 023937a..0000000
--- a/generated/ui/table/TableHeadCell.latte
+++ /dev/null
@@ -1,21 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — TableHeadCell renders th with optional scope and abbr. *}
-{parameters
-  string $class = '',
-  string $scope = '',
-  int $colspan = 0,
-  int $rowspan = 0,
-  string $headers = '',
-  string $abbr = '',
-  array $attrs = [],
-  string $children = '',
-}
-<th n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableHeadCellClasses(['class' => $class])),
-  'scope' => \UI8Kit\Rt::orNull(\UI8Kit\Rt::oneOfOrLower($scope, '', 'col', 'colgroup', 'row', 'rowgroup')),
-  'abbr' => \UI8Kit\Rt::orNull($abbr),
-  'colspan' => ((($colspan > 0)) ? (string) ($colspan) : null),
-  'rowspan' => ((($rowspan > 0)) ? (string) ($rowspan) : null),
-  'headers' => \UI8Kit\Rt::orNull($headers),
-  ...$attrs,
-]">{$children|noescape}</th>
diff --git a/generated/ui/table/TableHeadCell.svelte b/generated/ui/table/TableHeadCell.svelte
deleted file mode 100644
index adb26ca..0000000
--- a/generated/ui/table/TableHeadCell.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableHeadCell renders th with optional scope and abbr.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TableHeadCellProps = {
-    scope?: string;
-    colspan?: number;
-    rowspan?: number;
-    abbr?: string;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableHeadCellClasses } from "./table.shared";
-  import { isSetNum, oneOfOrLower, orUndef } from "../../utils/expr";
-
-  let {
-    scope,
-    colspan: colSpan,
-    rowspan: rowSpan,
-    abbr,
-    class: className,
-    children,
-    ...rest
-  }: TableHeadCellProps = $props();
-
-  const cls = $derived(tableHeadCellClasses({ className }));
-</script>
-
-<th {...(cls ? { class: cls } : {})} scope={orUndef(oneOfOrLower(scope, "", "col", "colgroup", "row", "rowgroup"))} abbr={orUndef(abbr)} colspan={isSetNum(colSpan) ? String(colSpan ?? 0) : undefined} rowspan={isSetNum(rowSpan) ? String(rowSpan ?? 0) : undefined} {...rest}>
-  {@render children?.()}
-</th>
diff --git a/generated/ui/table/TableHeadCell.vue b/generated/ui/table/TableHeadCell.vue
deleted file mode 100644
index d1eece5..0000000
--- a/generated/ui/table/TableHeadCell.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableHeadCell renders th with optional scope and abbr.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableHeadCellClasses } from "./table.shared";
-import { isSetNum, oneOfOrLower, orUndef } from "../../utils/expr";
-
-defineOptions({ name: "TableHeadCell", inheritAttrs: false });
-
-const props = defineProps<{
-  scope?: string;
-  colSpan?: number;
-  rowSpan?: number;
-  abbr?: string;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableHeadCellClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <th :class="cls || undefined" :scope="orUndef(oneOfOrLower(props.scope, '', 'col', 'colgroup', 'row', 'rowgroup'))" :abbr="orUndef(props.abbr)" :colspan="isSetNum(props.colSpan) ? String(props.colSpan ?? 0) : undefined" :rowspan="isSetNum(props.rowSpan) ? String(props.rowSpan ?? 0) : undefined" v-bind="restAttrs">
-    <slot />
-  </th>
-</template>
diff --git a/generated/ui/table/TableRow.html.twig b/generated/ui/table/TableRow.html.twig
deleted file mode 100644
index 7bb73ad..0000000
--- a/generated/ui/table/TableRow.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.table — TableRow renders one tr row. #}
-<tr{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('tableRowClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</tr>
diff --git a/generated/ui/table/TableRow.latte b/generated/ui/table/TableRow.latte
deleted file mode 100644
index 2a82534..0000000
--- a/generated/ui/table/TableRow.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.table — TableRow renders one tr row. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<tr n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::tableRowClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</tr>
diff --git a/generated/ui/table/TableRow.svelte b/generated/ui/table/TableRow.svelte
deleted file mode 100644
index affa21a..0000000
--- a/generated/ui/table/TableRow.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableRow renders one tr row.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TableRowProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { tableRowClasses } from "./table.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: TableRowProps = $props();
-
-  const cls = $derived(tableRowClasses({ className }));
-</script>
-
-<tr {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</tr>
diff --git a/generated/ui/table/TableRow.vue b/generated/ui/table/TableRow.vue
deleted file mode 100644
index e74a208..0000000
--- a/generated/ui/table/TableRow.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  TableRow renders one tr row.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { tableRowClasses } from "./table.shared";
-
-defineOptions({ name: "TableRow", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => tableRowClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <tr :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </tr>
-</template>
diff --git a/generated/ui/table/table.shared.ts b/generated/ui/table/table.shared.ts
deleted file mode 100644
index e6690af..0000000
--- a/generated/ui/table/table.shared.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.table — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import tableRecipeJson from "./table.variants.json";
-
-export const tableRecipe = tableRecipeJson;
-
-/** Table renders the root table element. */
-export type TableBaseProps = {
-
-};
-
-export type TableClassesInput = {
-  className?: string;
-};
-
-/** Compose Table classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableClasses(input: TableClassesInput = {}): string {
-  return cn(composeRecipe(tableRecipe, {  }), input.className);
-}
-
-/** TableCaption renders the table caption. */
-export type TableCaptionBaseProps = {
-
-};
-
-export type TableCaptionClassesInput = {
-  className?: string;
-};
-
-/** Compose TableCaption classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableCaptionClasses(input: TableCaptionClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** TableHead renders the thead section. */
-export type TableHeadBaseProps = {
-
-};
-
-export type TableHeadClassesInput = {
-  className?: string;
-};
-
-/** Compose TableHead classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableHeadClasses(input: TableHeadClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** TableBody renders the tbody section. */
-export type TableBodyBaseProps = {
-
-};
-
-export type TableBodyClassesInput = {
-  className?: string;
-};
-
-/** Compose TableBody classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableBodyClasses(input: TableBodyClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** TableFoot renders the tfoot section. */
-export type TableFootBaseProps = {
-
-};
-
-export type TableFootClassesInput = {
-  className?: string;
-};
-
-/** Compose TableFoot classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableFootClasses(input: TableFootClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** TableRow renders one tr row. */
-export type TableRowBaseProps = {
-
-};
-
-export type TableRowClassesInput = {
-  className?: string;
-};
-
-/** Compose TableRow classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableRowClasses(input: TableRowClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** TableHeadCell renders th with optional scope and abbr. */
-export type TableHeadCellBaseProps = {
-  scope?: string;
-  colSpan?: number;
-  rowSpan?: number;
-  abbr?: string;
-};
-
-export type TableHeadCellClassesInput = {
-  className?: string;
-};
-
-/** Compose TableHeadCell classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableHeadCellClasses(input: TableHeadCellClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** TableCell renders td with colspan and rowspan. */
-export type TableCellBaseProps = {
-  scope?: string;
-  colSpan?: number;
-  rowSpan?: number;
-  abbr?: string;
-};
-
-export type TableCellClassesInput = {
-  className?: string;
-};
-
-/** Compose TableCell classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableCellClasses(input: TableCellClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** TableColGroup renders colgroup with optional span. */
-export type TableColGroupBaseProps = {
-  span?: number;
-};
-
-export type TableColGroupClassesInput = {
-  className?: string;
-};
-
-/** Compose TableColGroup classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableColGroupClasses(input: TableColGroupClassesInput = {}): string {
-  return cn(input.className);
-}
-
-/** TableCol renders a single col definition. */
-export type TableColBaseProps = {
-  span?: number;
-};
-
-export type TableColClassesInput = {
-  className?: string;
-};
-
-/** Compose TableCol classes without rendering — the cross-runtime `asChild` substitute. */
-export function tableColClasses(input: TableColClassesInput = {}): string {
-  return cn(input.className);
-}
diff --git a/generated/ui/table/table.solid.tsx b/generated/ui/table/table.solid.tsx
deleted file mode 100644
index 7c8357d..0000000
--- a/generated/ui/table/table.solid.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Table composes semantic table, caption, sections, rows, and cells.
- * Supports scope, colspan, and headers attrs on head cells.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { tableBodyClasses, tableCaptionClasses, tableCellClasses, tableClasses, tableColClasses, tableColGroupClasses, tableFootClasses, tableHeadCellClasses, tableHeadClasses, tableRowClasses } from "./table.shared";
-import { isSetNum, oneOfOrLower, orUndef } from "../../utils/expr";
-
-/**
- * Table renders the root table element.
- */
-export type TableProps = Omit<JSX.HTMLAttributes<HTMLTableElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Table: Component<TableProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => tableClasses({ className: local.class ?? local.className });
-  return (
-    <table class={cls() || undefined} {...rest}>
-      {local.children}
-    </table>
-  );
-};
-
-/**
- * TableCaption renders the table caption.
- */
-export type TableCaptionProps = Omit<JSX.HTMLAttributes<HTMLTableCaptionElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const TableCaption: Component<TableCaptionProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => tableCaptionClasses({ className: local.class ?? local.className });
-  return (
-    <caption class={cls() || undefined} {...rest}>
-      {local.children}
-    </caption>
-  );
-};
-
-/**
- * TableHead renders the thead section.
- */
-export type TableHeadProps = Omit<JSX.HTMLAttributes<HTMLTableSectionElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const TableHead: Component<TableHeadProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => tableHeadClasses({ className: local.class ?? local.className });
-  return (
-    <thead class={cls() || undefined} {...rest}>
-      {local.children}
-    </thead>
-  );
-};
-
-/**
- * TableBody renders the tbody section.
- */
-export type TableBodyProps = Omit<JSX.HTMLAttributes<HTMLTableSectionElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const TableBody: Component<TableBodyProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => tableBodyClasses({ className: local.class ?? local.className });
-  return (
-    <tbody class={cls() || undefined} {...rest}>
-      {local.children}
-    </tbody>
-  );
-};
-
-/**
- * TableFoot renders the tfoot section.
- */
-export type TableFootProps = Omit<JSX.HTMLAttributes<HTMLTableSectionElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const TableFoot: Component<TableFootProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => tableFootClasses({ className: local.class ?? local.className });
-  return (
-    <tfoot class={cls() || undefined} {...rest}>
-      {local.children}
-    </tfoot>
-  );
-};
-
-/**
- * TableRow renders one tr row.
- */
-export type TableRowProps = Omit<JSX.HTMLAttributes<HTMLTableRowElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const TableRow: Component<TableRowProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => tableRowClasses({ className: local.class ?? local.className });
-  return (
-    <tr class={cls() || undefined} {...rest}>
-      {local.children}
-    </tr>
-  );
-};
-
-/**
- * TableHeadCell renders th with optional scope and abbr.
- */
-export type TableHeadCellProps = Omit<JSX.ThHTMLAttributes<HTMLTableCellElement>, "class" | "className" | "children" | "scope" | "colSpan" | "rowSpan" | "abbr"> & {
-  scope?: string;
-  colSpan?: number;
-  rowSpan?: number;
-  abbr?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const TableHeadCell: Component<TableHeadCellProps> = (props) => {
-  const [local, rest] = splitProps(props, ["scope", "colSpan", "rowSpan", "abbr", "class", "className", "children"]);
-  const cls = () => tableHeadCellClasses({ className: local.class ?? local.className });
-  return (
-    <th class={cls() || undefined} scope={orUndef(oneOfOrLower(local.scope, "", "col", "colgroup", "row", "rowgroup"))} abbr={orUndef(local.abbr)} colSpan={isSetNum(local.colSpan) ? local.colSpan : undefined} rowSpan={isSetNum(local.rowSpan) ? local.rowSpan : undefined} {...rest}>
-      {local.children}
-    </th>
-  );
-};
-
-/**
- * TableCell renders td with colspan and rowspan.
- */
-export type TableCellProps = Omit<JSX.TdHTMLAttributes<HTMLTableCellElement>, "class" | "className" | "children" | "scope" | "colSpan" | "rowSpan" | "abbr"> & {
-  scope?: string;
-  colSpan?: number;
-  rowSpan?: number;
-  abbr?: string;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const TableCell: Component<TableCellProps> = (props) => {
-  const [local, rest] = splitProps(props, ["scope", "colSpan", "rowSpan", "abbr", "class", "className", "children"]);
-  const cls = () => tableCellClasses({ className: local.class ?? local.className });
-  return (
-    <td class={cls() || undefined} colSpan={isSetNum(local.colSpan) ? local.colSpan : undefined} rowSpan={isSetNum(local.rowSpan) ? local.rowSpan : undefined} {...rest}>
-      {local.children}
-    </td>
-  );
-};
-
-/**
- * TableColGroup renders colgroup with optional span.
- */
-export type TableColGroupProps = Omit<JSX.ColgroupHTMLAttributes<HTMLTableColElement>, "class" | "className" | "children" | "span"> & {
-  span?: number;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const TableColGroup: Component<TableColGroupProps> = (props) => {
-  const [local, rest] = splitProps(props, ["span", "class", "className", "children"]);
-  const cls = () => tableColGroupClasses({ className: local.class ?? local.className });
-  return (
-    <colgroup class={cls() || undefined} span={isSetNum(local.span) ? local.span : undefined} {...rest}>
-      {local.children}
-    </colgroup>
-  );
-};
-
-/**
- * TableCol renders a single col definition.
- */
-export type TableColProps = Omit<JSX.ColHTMLAttributes<HTMLTableColElement>, "class" | "className" | "children" | "span"> & {
-  span?: number;
-  class?: string;
-  className?: string;
-};
-
-export const TableCol: Component<TableColProps> = (props) => {
-  const [local, rest] = splitProps(props, ["span", "class", "className"]);
-  const cls = () => tableColClasses({ className: local.class ?? local.className });
-  return (
-    <col class={cls() || undefined} span={isSetNum(local.span) ? local.span : undefined} {...rest} />
-  );
-};
diff --git a/generated/ui/table/table.tsx b/generated/ui/table/table.tsx
deleted file mode 100644
index 434f1ad..0000000
--- a/generated/ui/table/table.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Table composes semantic table, caption, sections, rows, and cells.
- * Supports scope, colspan, and headers attrs on head cells.
- */
-
-import { forwardRef, type ReactNode, type ColHTMLAttributes, type ColgroupHTMLAttributes, type HTMLAttributes, type TableHTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
-import { tableBodyClasses, tableCaptionClasses, tableCellClasses, tableClasses, tableColClasses, tableColGroupClasses, tableFootClasses, tableHeadCellClasses, tableHeadClasses, tableRowClasses } from "./table.shared";
-import { isSetNum, oneOfOrLower, orUndef } from "../../utils/expr";
-
-/**
- * Table renders the root table element.
- */
-export type TableProps = Omit<TableHTMLAttributes<HTMLTableElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = tableClasses({ className });
-  return (
-    <table ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </table>
-  );
-});
-Table.displayName = "Table";
-
-/**
- * TableCaption renders the table caption.
- */
-export type TableCaptionProps = Omit<HTMLAttributes<HTMLTableCaptionElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(function TableCaption(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = tableCaptionClasses({ className });
-  return (
-    <caption ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </caption>
-  );
-});
-TableCaption.displayName = "TableCaption";
-
-/**
- * TableHead renders the thead section.
- */
-export type TableHeadProps = Omit<HTMLAttributes<HTMLTableSectionElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(function TableHead(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = tableHeadClasses({ className });
-  return (
-    <thead ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </thead>
-  );
-});
-TableHead.displayName = "TableHead";
-
-/**
- * TableBody renders the tbody section.
- */
-export type TableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(function TableBody(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = tableBodyClasses({ className });
-  return (
-    <tbody ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </tbody>
-  );
-});
-TableBody.displayName = "TableBody";
-
-/**
- * TableFoot renders the tfoot section.
- */
-export type TableFootProps = Omit<HTMLAttributes<HTMLTableSectionElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(function TableFoot(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = tableFootClasses({ className });
-  return (
-    <tfoot ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </tfoot>
-  );
-});
-TableFoot.displayName = "TableFoot";
-
-/**
- * TableRow renders one tr row.
- */
-export type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-};
-
-export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
-  { className, children, ...rest },
-  ref
-) {
-  const cls = tableRowClasses({ className });
-  return (
-    <tr ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </tr>
-  );
-});
-TableRow.displayName = "TableRow";
-
-/**
- * TableHeadCell renders th with optional scope and abbr.
- */
-export type TableHeadCellProps = Omit<ThHTMLAttributes<HTMLTableCellElement>, "className" | "children" | "scope" | "colSpan" | "rowSpan" | "abbr"> & {
-  scope?: string;
-  colSpan?: number;
-  rowSpan?: number;
-  abbr?: string;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const TableHeadCell = forwardRef<HTMLTableCellElement, TableHeadCellProps>(function TableHeadCell(
-  { scope, colSpan, rowSpan, abbr, className, children, ...rest },
-  ref
-) {
-  const cls = tableHeadCellClasses({ className });
-  return (
-    <th ref={ref} className={cls || undefined} scope={orUndef(oneOfOrLower(scope, "", "col", "colgroup", "row", "rowgroup"))} abbr={orUndef(abbr)} colSpan={isSetNum(colSpan) ? colSpan : undefined} rowSpan={isSetNum(rowSpan) ? rowSpan : undefined} {...rest}>
-      {children}
-    </th>
-  );
-});
-TableHeadCell.displayName = "TableHeadCell";
-
-/**
- * TableCell renders td with colspan and rowspan.
- */
-export type TableCellProps = Omit<TdHTMLAttributes<HTMLTableCellElement>, "className" | "children" | "scope" | "colSpan" | "rowSpan" | "abbr"> & {
-  scope?: string;
-  colSpan?: number;
-  rowSpan?: number;
-  abbr?: string;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(
-  { scope, colSpan, rowSpan, abbr, className, children, ...rest },
-  ref
-) {
-  const cls = tableCellClasses({ className });
-  return (
-    <td ref={ref} className={cls || undefined} colSpan={isSetNum(colSpan) ? colSpan : undefined} rowSpan={isSetNum(rowSpan) ? rowSpan : undefined} {...rest}>
-      {children}
-    </td>
-  );
-});
-TableCell.displayName = "TableCell";
-
-/**
- * TableColGroup renders colgroup with optional span.
- */
-export type TableColGroupProps = Omit<ColgroupHTMLAttributes<HTMLTableColElement>, "className" | "children" | "span"> & {
-  span?: number;
-  className?: string;
-  children?: ReactNode;
-};
-
-export const TableColGroup = forwardRef<HTMLTableColElement, TableColGroupProps>(function TableColGroup(
-  { span, className, children, ...rest },
-  ref
-) {
-  const cls = tableColGroupClasses({ className });
-  return (
-    <colgroup ref={ref} className={cls || undefined} span={isSetNum(span) ? span : undefined} {...rest}>
-      {children}
-    </colgroup>
-  );
-});
-TableColGroup.displayName = "TableColGroup";
-
-/**
- * TableCol renders a single col definition.
- */
-export type TableColProps = Omit<ColHTMLAttributes<HTMLTableColElement>, "className" | "children" | "span"> & {
-  span?: number;
-  className?: string;
-};
-
-export const TableCol = forwardRef<HTMLTableColElement, TableColProps>(function TableCol(
-  { span, className, ...rest },
-  ref
-) {
-  const cls = tableColClasses({ className });
-  return (
-    <col ref={ref} className={cls || undefined} span={isSetNum(span) ? span : undefined} {...rest} />
-  );
-});
-TableCol.displayName = "TableCol";
diff --git a/generated/ui/table/table.variants.json b/generated/ui/table/table.variants.json
deleted file mode 100644
index 9b48058..0000000
--- a/generated/ui/table/table.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "w-full caption-bottom text-sm",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.table",
-  "keys": []
-}
diff --git a/generated/ui/table/table_gen.go b/generated/ui/table/table_gen.go
deleted file mode 100644
index 081cf4f..0000000
--- a/generated/ui/table/table_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package table
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed table.variants.json
-var tableVariantsJSON []byte
-
-// TableVariants is the CVA recipe shared verbatim by all runtimes.
-var TableVariants = uiutils.MustParseVariantRecipe(tableVariantsJSON).ToVariants()
diff --git a/generated/ui/table/table_templ.go b/generated/ui/table/table_templ.go
deleted file mode 100644
index 863b8f5..0000000
--- a/generated/ui/table/table_templ.go
+++ /dev/null
@@ -1,1000 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Table composes semantic table, caption, sections, rows, and cells.
-
-
-Supports scope, colspan, and headers attrs on head cells.
-
-
-*/
-
-package table
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"strconv"
-
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// TableProps configures Table.
-type TableProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// TableClasses composes Table classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableClasses(p TableProps) string {
-	return uiutils.Compose(TableVariants, map[string]string{}, p.Class)
-}
-
-// Table renders the Table contract.
-func Table(p TableProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{TableClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<table class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</table>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// TableCaptionProps configures TableCaption.
-type TableCaptionProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// TableCaptionClasses composes TableCaption classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableCaptionClasses(p TableCaptionProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// TableCaption renders the TableCaption contract.
-func TableCaption(p TableCaptionProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var4 == nil {
-			templ_7745c5c3_Var4 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var5 = []any{TableCaptionClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<caption class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var5).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var4.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</caption>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// TableHeadProps configures TableHead.
-type TableHeadProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// TableHeadClasses composes TableHead classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableHeadClasses(p TableHeadProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// TableHead renders the TableHead contract.
-func TableHead(p TableHeadProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var7 == nil {
-			templ_7745c5c3_Var7 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var8 = []any{TableHeadClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<thead class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var9 string
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var8).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var7.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</thead>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// TableBodyProps configures TableBody.
-type TableBodyProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// TableBodyClasses composes TableBody classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableBodyClasses(p TableBodyProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// TableBody renders the TableBody contract.
-func TableBody(p TableBodyProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var10 == nil {
-			templ_7745c5c3_Var10 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var11 = []any{TableBodyClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var11...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<tbody class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var12 string
-		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var11).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var10.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</tbody>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// TableFootProps configures TableFoot.
-type TableFootProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// TableFootClasses composes TableFoot classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableFootClasses(p TableFootProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// TableFoot renders the TableFoot contract.
-func TableFoot(p TableFootProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var13 == nil {
-			templ_7745c5c3_Var13 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var14 = []any{TableFootClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var14...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<tfoot class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var15 string
-		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var14).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var13.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</tfoot>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// TableRowProps configures TableRow.
-type TableRowProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// TableRowClasses composes TableRow classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableRowClasses(p TableRowProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// TableRow renders the TableRow contract.
-func TableRow(p TableRowProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var16 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var16 == nil {
-			templ_7745c5c3_Var16 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var17 = []any{TableRowClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var17...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<tr class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var18 string
-		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var17).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var16.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</tr>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// TableHeadCellProps configures TableHeadCell.
-type TableHeadCellProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Scope — th scope: col, row, colgroup, rowgroup
-	Scope   string
-	ColSpan int
-	RowSpan int
-	// Headers — ids of related header cells
-	Headers string
-	// Abbr — abbreviated header text for th
-	Abbr  string
-	Attrs templ.Attributes
-}
-
-// TableHeadCellClasses composes TableHeadCell classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableHeadCellClasses(p TableHeadCellProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// TableHeadCell renders the TableHeadCell contract.
-func TableHeadCell(p TableHeadCellProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var19 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var19 == nil {
-			templ_7745c5c3_Var19 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var20 = []any{TableHeadCellClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var20...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<th class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var21 string
-		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var20).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(uiutils.OneOfOrLower(p.Scope, "", "col", "colgroup", "row", "rowgroup")) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, " scope=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var22 string
-			templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.OneOfOrLower(p.Scope, "", "col", "colgroup", "row", "rowgroup"))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 180, Col: 82}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Abbr) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, " abbr=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var23 string
-			templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(p.Abbr)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 183, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if int(p.ColSpan) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, " colspan=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var24 string
-			templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(p.ColSpan)))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 186, Col: 41}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if int(p.RowSpan) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, " rowspan=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var25 string
-			templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(p.RowSpan)))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 189, Col: 41}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Headers) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, " headers=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var26 string
-			templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(p.Headers)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 192, Col: 22}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var19.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</th>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// TableCellProps configures TableCell.
-type TableCellProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// Scope — th scope: col, row, colgroup, rowgroup
-	Scope   string
-	ColSpan int
-	RowSpan int
-	// Headers — ids of related header cells
-	Headers string
-	// Abbr — abbreviated header text for th
-	Abbr  string
-	Attrs templ.Attributes
-}
-
-// TableCellClasses composes TableCell classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableCellClasses(p TableCellProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// TableCell renders the TableCell contract.
-func TableCell(p TableCellProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var27 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var27 == nil {
-			templ_7745c5c3_Var27 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var28 = []any{TableCellClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var28...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<td class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var29 string
-		templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var28).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if int(p.ColSpan) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, " colspan=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var30 string
-			templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(p.ColSpan)))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 226, Col: 41}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if int(p.RowSpan) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, " rowspan=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var31 string
-			templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(p.RowSpan)))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 229, Col: 41}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Headers) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, " headers=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var32 string
-			templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(p.Headers)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 232, Col: 22}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var27.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "</td>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// TableColGroupProps configures TableColGroup.
-type TableColGroupProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Span  int
-	Attrs templ.Attributes
-}
-
-// TableColGroupClasses composes TableColGroup classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableColGroupClasses(p TableColGroupProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// TableColGroup renders the TableColGroup contract.
-func TableColGroup(p TableColGroupProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var33 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var33 == nil {
-			templ_7745c5c3_Var33 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var34 = []any{TableColGroupClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var34...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "<colgroup class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var35 string
-		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var34).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if int(p.Span) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, " span=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var36 string
-			templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(p.Span)))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 259, Col: 35}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var33.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "</colgroup>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-// TableColProps configures TableCol.
-type TableColProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Span  int
-	Attrs templ.Attributes
-}
-
-// TableColClasses composes TableCol classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TableColClasses(p TableColProps) string {
-	return uiutils.Cn(p.Class)
-}
-
-// TableCol renders the TableCol contract.
-func TableCol(p TableColProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var37 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var37 == nil {
-			templ_7745c5c3_Var37 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var38 = []any{TableColClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var38...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "<col class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var39 string
-		templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var38).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if int(p.Span) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, " span=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var40 string
-			templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(int(p.Span)))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/table/table.templ`, Line: 286, Col: 35}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/text/Text.html.twig b/generated/ui/text/Text.html.twig
deleted file mode 100644
index 6989d34..0000000
--- a/generated/ui/text/Text.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.text — Text renders a p element with body copy classes. #}
-<p{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('textClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</p>
diff --git a/generated/ui/text/Text.latte b/generated/ui/text/Text.latte
deleted file mode 100644
index 08b4f33..0000000
--- a/generated/ui/text/Text.latte
+++ /dev/null
@@ -1,11 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.text — Text renders a p element with body copy classes. *}
-{parameters
-  string $class = '',
-  array $attrs = [],
-  string $children = '',
-}
-<p n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::textClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</p>
diff --git a/generated/ui/text/Text.svelte b/generated/ui/text/Text.svelte
deleted file mode 100644
index c98a25f..0000000
--- a/generated/ui/text/Text.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Text renders a p element with body copy classes.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TextProps = {
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { textClasses } from "./text.shared";
-
-  let {
-    class: className,
-    children,
-    ...rest
-  }: TextProps = $props();
-
-  const cls = $derived(textClasses({ className }));
-</script>
-
-<p {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</p>
diff --git a/generated/ui/text/Text.vue b/generated/ui/text/Text.vue
deleted file mode 100644
index 57efbb6..0000000
--- a/generated/ui/text/Text.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Text renders a p element with body copy classes.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { textClasses } from "./text.shared";
-
-defineOptions({ name: "Text", inheritAttrs: false });
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => textClasses({ className: callerClass.value }));
-</script>
-
-<template>
-  <p :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </p>
-</template>
diff --git a/generated/ui/text/text.shared.ts b/generated/ui/text/text.shared.ts
deleted file mode 100644
index f09d3e7..0000000
--- a/generated/ui/text/text.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.text — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import textRecipeJson from "./text.variants.json";
-
-export const textRecipe = textRecipeJson;
-
-/** Text renders a p element with body copy classes. */
-export type TextBaseProps = {
-
-};
-
-export type TextClassesInput = {
-  className?: string;
-};
-
-/** Compose Text classes without rendering — the cross-runtime `asChild` substitute. */
-export function textClasses(input: TextClassesInput = {}): string {
-  return cn(composeRecipe(textRecipe, {  }), input.className);
-}
diff --git a/generated/ui/text/text.solid.tsx b/generated/ui/text/text.solid.tsx
deleted file mode 100644
index 58d9efe..0000000
--- a/generated/ui/text/text.solid.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Text renders a paragraph of body copy. Use Inline for inline span copy
- * and Title (as 1–6) for headings.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { textClasses } from "./text.shared";
-
-/**
- * Text renders a p element with body copy classes.
- */
-export type TextProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "class" | "className" | "children"> & {
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Text: Component<TextProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "className", "children"]);
-  const cls = () => textClasses({ className: local.class ?? local.className });
-  return (
-    <p class={cls() || undefined} {...rest}>
-      {local.children}
-    </p>
-  );
-};
diff --git a/generated/ui/text/text.templ b/generated/ui/text/text.templ
deleted file mode 100644
index 904064e..0000000
--- a/generated/ui/text/text.templ
+++ /dev/null
@@ -1,35 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-Text renders a paragraph of body copy. Use Inline for inline span copy
-and Title (as 1–6) for headings.
-*/
-
-package text
-
-import (
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-// TextProps configures Text.
-type TextProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// TextClasses composes Text classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TextClasses(p TextProps) string {
-	return uiutils.Compose(TextVariants, map[string]string{}, p.Class)
-}
-
-// Text renders the Text contract.
-templ Text(p TextProps) {
-	<p
-		class={ TextClasses(p) }
-		{ p.Attrs... }
-	>
-		{ children... }
-	</p>
-}
diff --git a/generated/ui/text/text.tsx b/generated/ui/text/text.tsx
deleted file mode 100644
index 4a59beb..0000000
--- a/generated/ui/text/text.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Text renders a paragraph of body copy. Use Inline for inline span copy
- * and Title (as 1–6) for headings.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
-import { textClasses } from "./text.shared";
-import { Slot } from "../slot/slot";
-
-/**
- * Text renders a p element with body copy classes.
- */
-export type TextProps = Omit<HTMLAttributes<HTMLParagraphElement>, "className" | "children"> & {
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
-  { className, children, asChild, ...rest },
-  ref
-) {
-  const cls = textClasses({ className });
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <p ref={ref} className={cls || undefined} {...rest}>
-      {children}
-    </p>
-  );
-});
-Text.displayName = "Text";
diff --git a/generated/ui/text/text.variants.json b/generated/ui/text/text.variants.json
deleted file mode 100644
index 12af129..0000000
--- a/generated/ui/text/text.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.text",
-  "keys": []
-}
diff --git a/generated/ui/text/text_gen.go b/generated/ui/text/text_gen.go
deleted file mode 100644
index 122a57c..0000000
--- a/generated/ui/text/text_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package text
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed text.variants.json
-var textVariantsJSON []byte
-
-// TextVariants is the CVA recipe shared verbatim by all runtimes.
-var TextVariants = uiutils.MustParseVariantRecipe(textVariantsJSON).ToVariants()
diff --git a/generated/ui/text/text_templ.go b/generated/ui/text/text_templ.go
deleted file mode 100644
index 94b6eb6..0000000
--- a/generated/ui/text/text_templ.go
+++ /dev/null
@@ -1,105 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Text renders a paragraph of body copy. Use Inline for inline span copy
-
-
-and Title (as 1–6) for headings.
-
-
-*/
-
-package text
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// TextProps configures Text.
-type TextProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	Attrs templ.Attributes
-}
-
-// TextClasses composes Text classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TextClasses(p TextProps) string {
-	return uiutils.Compose(TextVariants, map[string]string{}, p.Class)
-}
-
-// Text renders the Text contract.
-func Text(p TextProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{TextClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<p class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/text/text.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</p>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/textarea/Textarea.html.twig b/generated/ui/textarea/Textarea.html.twig
deleted file mode 100644
index bf9cd67..0000000
--- a/generated/ui/textarea/Textarea.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.textarea — Textarea renders a styled multi-line form control. #}
-<textarea{{ ui8kit_attr_str({ 'id': ui8kit_or_null((id|default(''))), 'name': ui8kit_or_null((name|default(''))), 'class': ui8kit_or_null(ui8kit_classes('textareaClasses', { 'variant': (variant|default('')), 'size': (size|default('')), 'class': (class|default('')) })), 'rows': ((((rows|default(0)) > 0)) ? (((rows|default(0))) ~ '') : '4'), 'placeholder': ui8kit_or_null((placeholder|default(''))), 'disabled': (disabled|default(false)), 'required': (required|default(false)), 'role': ui8kit_or_null((role|default(''))), 'tabindex': ui8kit_or_null((tabindex|default(''))), 'aria-label': ui8kit_or_null((ariaLabel|default(''))) }, attrs|default({})) }}>{{ (value|default('')) }}</textarea>
diff --git a/generated/ui/textarea/Textarea.latte b/generated/ui/textarea/Textarea.latte
deleted file mode 100644
index 309bc78..0000000
--- a/generated/ui/textarea/Textarea.latte
+++ /dev/null
@@ -1,31 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.textarea — Textarea renders a styled multi-line form control. *}
-{parameters
-  string $variant = '',
-  string $size = '',
-  string $class = '',
-  string $name = '',
-  string $value = '',
-  string $placeholder = '',
-  int $rows = 0,
-  bool $disabled = false,
-  bool $required = false,
-  string $id = '',
-  string $role = '',
-  string $tabindex = '',
-  string $ariaLabel = '',
-  array $attrs = [],
-}
-<textarea n:attr="[
-  'id' => \UI8Kit\Rt::orNull($id),
-  'name' => \UI8Kit\Rt::orNull($name),
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::textareaClasses(['variant' => $variant, 'size' => $size, 'class' => $class])),
-  'rows' => ((($rows > 0)) ? (string) ($rows) : '4'),
-  'placeholder' => \UI8Kit\Rt::orNull($placeholder),
-  'disabled' => $disabled,
-  'required' => $required,
-  'role' => \UI8Kit\Rt::orNull($role),
-  'tabindex' => \UI8Kit\Rt::orNull($tabindex),
-  'aria-label' => \UI8Kit\Rt::orNull($ariaLabel),
-  ...$attrs,
-]">{$value}</textarea>
diff --git a/generated/ui/textarea/Textarea.svelte b/generated/ui/textarea/Textarea.svelte
deleted file mode 100644
index 8b132ac..0000000
--- a/generated/ui/textarea/Textarea.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Textarea renders a styled multi-line form control.
--->
-<script lang="ts" module>
-  import type { TextareaSize, TextareaVariant } from "./textarea.shared";
-
-  export type TextareaProps = {
-    variant?: TextareaVariant;
-    size?: TextareaSize;
-    value?: string;
-    rows?: number;
-    disabled?: boolean;
-    required?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { textareaClasses } from "./textarea.shared";
-  import { isSetNum } from "../../utils/expr";
-
-  let {
-    variant,
-    size,
-    value,
-    rows,
-    disabled,
-    required,
-    class: className,
-    ...rest
-  }: TextareaProps = $props();
-
-  const cls = $derived(textareaClasses({ variant, size, className }));
-</script>
-
-<textarea {...(cls ? { class: cls } : {})} rows={(isSetNum(rows) ? String(rows ?? 0) : "4")} disabled={disabled || undefined} required={required || undefined} {...rest}>{value}</textarea>
diff --git a/generated/ui/textarea/Textarea.vue b/generated/ui/textarea/Textarea.vue
deleted file mode 100644
index 3345b6d..0000000
--- a/generated/ui/textarea/Textarea.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Textarea renders a styled multi-line form control.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { textareaClasses, type TextareaSize, type TextareaVariant } from "./textarea.shared";
-import { isSetNum } from "../../utils/expr";
-
-defineOptions({ name: "Textarea", inheritAttrs: false });
-
-const props = defineProps<{
-  variant?: TextareaVariant;
-  size?: TextareaSize;
-  value?: string;
-  rows?: number;
-  disabled?: boolean;
-  required?: boolean;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => textareaClasses({ variant: props.variant, size: props.size, className: callerClass.value }));
-</script>
-
-<template>
-  <textarea :class="cls || undefined" :rows="(isSetNum(props.rows) ? String(props.rows ?? 0) : '4')" :disabled="props.disabled || undefined" :required="props.required || undefined" v-bind="restAttrs" :value="(props.value) ?? ''" />
-</template>
diff --git a/generated/ui/textarea/textarea.shared.ts b/generated/ui/textarea/textarea.shared.ts
deleted file mode 100644
index e848f2e..0000000
--- a/generated/ui/textarea/textarea.shared.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.textarea — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe, type RecipeKey } from "../../utils";
-import textareaRecipeJson from "./textarea.variants.json";
-
-export const textareaRecipe = textareaRecipeJson;
-
-export type TextareaVariant = RecipeKey<typeof textareaRecipe, "variant">;
-export type TextareaSize = RecipeKey<typeof textareaRecipe, "size">;
-
-/** Textarea renders a styled multi-line form control. */
-export type TextareaBaseProps = {
-  variant?: TextareaVariant;
-  size?: TextareaSize;
-  value?: string;
-  rows?: number;
-  disabled?: boolean;
-  required?: boolean;
-};
-
-export type TextareaClassesInput = {
-  variant?: TextareaVariant;
-  size?: TextareaSize;
-  className?: string;
-};
-
-/** Compose Textarea classes without rendering — the cross-runtime `asChild` substitute. */
-export function textareaClasses(input: TextareaClassesInput = {}): string {
-  return cn(composeRecipe(textareaRecipe, { variant: input.variant, size: input.size }), input.className);
-}
diff --git a/generated/ui/textarea/textarea.solid.tsx b/generated/ui/textarea/textarea.solid.tsx
deleted file mode 100644
index f867b5f..0000000
--- a/generated/ui/textarea/textarea.solid.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Textarea is a multi-line native text field with row sizing.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { textareaClasses, type TextareaSize, type TextareaVariant } from "./textarea.shared";
-import { isSetNum } from "../../utils/expr";
-
-/**
- * Textarea renders a styled multi-line form control.
- */
-export type TextareaProps = Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, "class" | "className" | "children" | "variant" | "size" | "value" | "rows" | "disabled" | "required"> & {
-  variant?: TextareaVariant;
-  size?: TextareaSize;
-  value?: string;
-  rows?: number;
-  disabled?: boolean;
-  required?: boolean;
-  class?: string;
-  className?: string;
-};
-
-export const Textarea: Component<TextareaProps> = (props) => {
-  const [local, rest] = splitProps(props, ["variant", "size", "value", "rows", "disabled", "required", "class", "className"]);
-  const cls = () => textareaClasses({ variant: local.variant, size: local.size, className: local.class ?? local.className });
-  return (
-    <textarea class={cls() || undefined} rows={(isSetNum(local.rows) ? local.rows : 4)} disabled={local.disabled || undefined} required={local.required || undefined} {...rest} value={(local.value) ?? ""} />
-  );
-};
diff --git a/generated/ui/textarea/textarea.tsx b/generated/ui/textarea/textarea.tsx
deleted file mode 100644
index 36dd05d..0000000
--- a/generated/ui/textarea/textarea.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Textarea is a multi-line native text field with row sizing.
- */
-
-import { forwardRef, type ReactNode, type TextareaHTMLAttributes } from "react";
-import { textareaClasses, type TextareaSize, type TextareaVariant } from "./textarea.shared";
-import { isSetNum } from "../../utils/expr";
-
-/**
- * Textarea renders a styled multi-line form control.
- */
-export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "children" | "variant" | "size" | "value" | "rows" | "disabled" | "required"> & {
-  variant?: TextareaVariant;
-  size?: TextareaSize;
-  value?: string;
-  rows?: number;
-  disabled?: boolean;
-  required?: boolean;
-  className?: string;
-};
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
-  { variant, size, value, rows, disabled, required, className, ...rest },
-  ref
-) {
-  const cls = textareaClasses({ variant, size, className });
-  return (
-    <textarea ref={ref} className={cls || undefined} rows={(isSetNum(rows) ? rows : 4)} disabled={disabled || undefined} required={required || undefined} {...rest} defaultValue={(value) ?? ""} />
-  );
-});
-Textarea.displayName = "Textarea";
diff --git a/generated/ui/textarea/textarea.variants.json b/generated/ui/textarea/textarea.variants.json
deleted file mode 100644
index bd2cbbc..0000000
--- a/generated/ui/textarea/textarea.variants.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "w-full rounded-md border px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-  "byKey": {
-    "size": {
-      "default": "h-10 px-3 py-2 text-sm",
-      "lg": "h-12 px-4 text-base",
-      "sm": "h-8 px-3 text-sm",
-      "xs": "h-8 px-2 text-xs"
-    },
-    "variant": {
-      "default": "border-border bg-background",
-      "ghost": "border-transparent bg-muted",
-      "outline": "border-border bg-background"
-    }
-  },
-  "defaults": {
-    "size": "default",
-    "variant": "default"
-  },
-  "id": "ui.textarea",
-  "keys": [
-    "variant",
-    "size"
-  ]
-}
diff --git a/generated/ui/textarea/textarea_gen.go b/generated/ui/textarea/textarea_gen.go
deleted file mode 100644
index afe2676..0000000
--- a/generated/ui/textarea/textarea_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package textarea
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed textarea.variants.json
-var textareaVariantsJSON []byte
-
-// TextareaVariants is the CVA recipe shared verbatim by all runtimes.
-var TextareaVariants = uiutils.MustParseVariantRecipe(textareaVariantsJSON).ToVariants()
diff --git a/generated/ui/textarea/textarea_templ.go b/generated/ui/textarea/textarea_templ.go
deleted file mode 100644
index 89703ef..0000000
--- a/generated/ui/textarea/textarea_templ.go
+++ /dev/null
@@ -1,275 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Textarea is a multi-line native text field with row sizing.
-
-
-*/
-
-package textarea
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	"strconv"
-
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// TextareaProps configures Textarea.
-type TextareaProps struct {
-	// Variant — sets appearance preset
-	Variant string
-	// Size — sets density preset
-	Size string
-	// Class — adds Tailwind utilities
-	Class string
-	Name  string
-	// Value — initial textarea content
-	Value       string
-	Placeholder string
-	// Rows — visible line count; defaults to 4 when zero
-	Rows     int
-	Disabled bool
-	Required bool
-	// ID — element id
-	ID string
-	// Role — ARIA role override
-	Role string
-	// TabIndex — tab order override
-	TabIndex string
-	// AriaLabel — accessible name for unlabeled controls
-	AriaLabel string
-	Attrs     templ.Attributes
-}
-
-// TextareaClasses composes Textarea classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TextareaClasses(p TextareaProps) string {
-	return uiutils.Compose(TextareaVariants, map[string]string{
-		"variant": p.Variant,
-		"size":    p.Size,
-	}, p.Class)
-}
-
-// Textarea renders the Textarea contract.
-func Textarea(p TextareaProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		var templ_7745c5c3_Var2 = []any{TextareaClasses(p)}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<textarea")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.ID) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " id=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(p.ID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/textarea/textarea.templ`, Line: 55, Col: 12}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Name) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " name=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(p.Name)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/textarea/textarea.templ`, Line: 58, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " class=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var5 string
-		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/textarea/textarea.templ`, Line: 1, Col: 0}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\" rows=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(uiutils.If((int(p.Rows) > 0), strconv.Itoa(int(p.Rows)), "4"))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/textarea/textarea.templ`, Line: 61, Col: 70}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if uiutils.IsSetStr(p.Placeholder) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " placeholder=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(p.Placeholder)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/textarea/textarea.templ`, Line: 63, Col: 30}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Disabled {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " disabled")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if p.Required {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " required")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.Role) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " role=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var8 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(p.Role)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/textarea/textarea.templ`, Line: 68, Col: 16}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.TabIndex) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, " tabindex=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(p.TabIndex)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/textarea/textarea.templ`, Line: 71, Col: 24}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		if uiutils.IsSetStr(p.AriaLabel) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, " aria-label=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var10 string
-			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(p.AriaLabel)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/textarea/textarea.templ`, Line: 74, Col: 27}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, ">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var11 string
-		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(p.Value)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/textarea/textarea.templ`, Line: 78, Col: 11}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</textarea>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/ui/title/Title.html.twig b/generated/ui/title/Title.html.twig
deleted file mode 100644
index 3befecd..0000000
--- a/generated/ui/title/Title.html.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{# Code generated by @ui8kit/codegen. DO NOT EDIT. #}
-{# ui.title — Title renders the resolved heading element. #}
-{% set uiTag = ui8kit_title_tag((as|default(0))) %}
-<{{ uiTag }}{{ ui8kit_attr_str({ 'class': ui8kit_or_null(ui8kit_classes('titleClasses', { 'class': (class|default('')) })) }, attrs|default({})) }}>{{ children|default('')|raw }}</{{ uiTag }}>
diff --git a/generated/ui/title/Title.latte b/generated/ui/title/Title.latte
deleted file mode 100644
index 294da81..0000000
--- a/generated/ui/title/Title.latte
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Code generated by @ui8kit/codegen. DO NOT EDIT. *}
-{* ui.title — Title renders the resolved heading element. *}
-{parameters
-  string $class = '',
-  int $as = 0,
-  array $attrs = [],
-  string $children = '',
-}
-{var $uiTag = \UI8Kit\Rt::titleTag($as)}
-<h2 n:tag="$uiTag" n:attr="[
-  'class' => \UI8Kit\Rt::orNull(\UI8Kit\Classes::titleClasses(['class' => $class])),
-  ...$attrs,
-]">{$children|noescape}</h2>
diff --git a/generated/ui/title/Title.svelte b/generated/ui/title/Title.svelte
deleted file mode 100644
index 7253615..0000000
--- a/generated/ui/title/Title.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Title renders the resolved heading element.
--->
-<script lang="ts" module>
-  import type { Snippet } from "svelte";
-
-  export type TitleProps = {
-    as?: 1 | 2 | 3 | 4 | 5 | 6;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  };
-</script>
-
-<script lang="ts">
-  import { titleClasses } from "./title.shared";
-  import { titleTag } from "../../utils/expr";
-
-  let {
-    as,
-    class: className,
-    children,
-    ...rest
-  }: TitleProps = $props();
-
-  const cls = $derived(titleClasses({ className }));
-  const resolvedTagValue = $derived(titleTag(as));
-</script>
-
-<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
-  {@render children?.()}
-</svelte:element>
diff --git a/generated/ui/title/Title.vue b/generated/ui/title/Title.vue
deleted file mode 100644
index cf5bc52..0000000
--- a/generated/ui/title/Title.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Code generated by @ui8kit/codegen. DO NOT EDIT. -->
-<!--
-  Title renders the resolved heading element.
--->
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-import { titleClasses } from "./title.shared";
-import { titleTag } from "../../utils/expr";
-
-defineOptions({ name: "Title", inheritAttrs: false });
-
-const props = defineProps<{
-  as?: 1 | 2 | 3 | 4 | 5 | 6;
-}>();
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => titleClasses({ className: callerClass.value }));
-const resolvedTagValue = computed(() => titleTag(props.as));
-</script>
-
-<template>
-  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="restAttrs">
-    <slot />
-  </component>
-</template>
diff --git a/generated/ui/title/title.shared.ts b/generated/ui/title/title.shared.ts
deleted file mode 100644
index 019567c..0000000
--- a/generated/ui/title/title.shared.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-// ui.title — shared TypeScript contract (types + classes helpers)
-
-import { cn, composeRecipe } from "../../utils";
-import titleRecipeJson from "./title.variants.json";
-
-export const titleRecipe = titleRecipeJson;
-
-/** Title renders the resolved heading element. */
-export type TitleBaseProps = {
-  as?: 1 | 2 | 3 | 4 | 5 | 6;
-};
-
-export type TitleClassesInput = {
-  className?: string;
-};
-
-/** Compose Title classes without rendering — the cross-runtime `asChild` substitute. */
-export function titleClasses(input: TitleClassesInput = {}): string {
-  return cn(composeRecipe(titleRecipe, {  }), input.className);
-}
diff --git a/generated/ui/title/title.solid.tsx b/generated/ui/title/title.solid.tsx
deleted file mode 100644
index 67b5803..0000000
--- a/generated/ui/title/title.solid.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Title renders a heading (h1–h6) from As (1–6). Defaults to h2 when As is 0
- * or out of range.
- */
-
-import { splitProps, type JSX, type Component } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { titleClasses } from "./title.shared";
-import { titleTag } from "../../utils/expr";
-
-/**
- * Title renders the resolved heading element.
- */
-export type TitleProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "className" | "children" | "as"> & {
-  as?: 1 | 2 | 3 | 4 | 5 | 6;
-  class?: string;
-  className?: string;
-  children?: JSX.Element;
-};
-
-export const Title: Component<TitleProps> = (props) => {
-  const [local, rest] = splitProps(props, ["as", "class", "className", "children"]);
-  const resolvedTagValue = () => titleTag(local.as);
-  const cls = () => titleClasses({ className: local.class ?? local.className });
-  return (
-    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...rest}>
-      {local.children}
-    </Dynamic>
-  );
-};
diff --git a/generated/ui/title/title.tsx b/generated/ui/title/title.tsx
deleted file mode 100644
index 1062161..0000000
--- a/generated/ui/title/title.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-/**
- * Title renders a heading (h1–h6) from As (1–6). Defaults to h2 when As is 0
- * or out of range.
- */
-
-import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
-import { titleClasses } from "./title.shared";
-import { titleTag } from "../../utils/expr";
-import { Slot } from "../slot/slot";
-
-/**
- * Title renders the resolved heading element.
- */
-export type TitleProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "as"> & {
-  as?: 1 | 2 | 3 | 4 | 5 | 6;
-  className?: string;
-  children?: ReactNode;
-  asChild?: boolean;
-};
-
-export const Title = forwardRef<HTMLElement, TitleProps>(function Title(
-  { as, className, children, asChild, ...rest },
-  ref
-) {
-  const cls = titleClasses({ className });
-  const resolvedTagValue = titleTag(as);
-  const Tag = resolvedTagValue as ElementType;
-  if (asChild) {
-    return (
-      <Slot ref={ref} className={cls} {...rest}>
-        {children}
-      </Slot>
-    );
-  }
-  return (
-    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
-      {children}
-    </Tag>
-  );
-});
-Title.displayName = "Title";
diff --git a/generated/ui/title/title.variants.json b/generated/ui/title/title.variants.json
deleted file mode 100644
index 22a3a83..0000000
--- a/generated/ui/title/title.variants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "$schema": "../../schemas/variants.schema.json",
-  "base": "",
-  "byKey": {},
-  "defaults": {},
-  "id": "ui.title",
-  "keys": []
-}
diff --git a/generated/ui/title/title_gen.go b/generated/ui/title/title_gen.go
deleted file mode 100644
index e533c44..0000000
--- a/generated/ui/title/title_gen.go
+++ /dev/null
@@ -1,15 +0,0 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-package title
-
-import (
-	_ "embed"
-
-	uiutils "github.com/ui8kit/ui/utils"
-)
-
-//go:embed title.variants.json
-var titleVariantsJSON []byte
-
-// TitleVariants is the CVA recipe shared verbatim by all runtimes.
-var TitleVariants = uiutils.MustParseVariantRecipe(titleVariantsJSON).ToVariants()
diff --git a/generated/ui/title/title_templ.go b/generated/ui/title/title_templ.go
deleted file mode 100644
index 453fb8f..0000000
--- a/generated/ui/title/title_templ.go
+++ /dev/null
@@ -1,305 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.3.1001
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
-
-/*
-
-
-Title renders a heading (h1–h6) from As (1–6). Defaults to h2 when As is 0
-
-
-or out of range.
-
-
-*/
-
-package title
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-import (
-	uiutils "github.com/fastygo/sezonmarket/internal/utils"
-)
-
-// TitleProps configures Title.
-type TitleProps struct {
-	// Class — adds Tailwind utilities
-	Class string
-	// As — maps to h1–h6; 0 and 2 default to h2
-	As    uiutils.HeadingLevel
-	Attrs templ.Attributes
-}
-
-// TitleClasses composes Title classes without rendering —
-// the server-composition escape hatch for custom root elements.
-func TitleClasses(p TitleProps) string {
-	return uiutils.Compose(TitleVariants, map[string]string{}, p.Class)
-}
-
-// Title renders the Title contract.
-func Title(p TitleProps) templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var1 == nil {
-			templ_7745c5c3_Var1 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch uiutils.TitleTag(p.As) {
-		case "h1":
-			var templ_7745c5c3_Var2 = []any{TitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<h1 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/title/title.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</h1>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "h3":
-			var templ_7745c5c3_Var4 = []any{TitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var4...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<h3 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var4).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/title/title.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</h3>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "h4":
-			var templ_7745c5c3_Var6 = []any{TitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<h4 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var7 string
-			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/title/title.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</h4>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "h5":
-			var templ_7745c5c3_Var8 = []any{TitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var8...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<h5 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var9 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var8).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/title/title.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</h5>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case "h6":
-			var templ_7745c5c3_Var10 = []any{TitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<h6 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var11 string
-			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var10).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/title/title.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</h6>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		default:
-			var templ_7745c5c3_Var12 = []any{TitleClasses(p)}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var12...)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<h2 class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var12).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/title/title.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, p.Attrs)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, ">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</h2>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return nil
-	})
-}
-
-var _ = templruntime.GeneratedTemplate
diff --git a/generated/utils/cn.ts b/generated/utils/cn.ts
deleted file mode 100644
index 02aa0e6..0000000
--- a/generated/utils/cn.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-/**
- * Merge class values with Tailwind conflict resolution.
- * Mirrors shadcn's `cn` = clsx + tailwind-merge.
- * Caller-supplied classes win over recipe classes.
- */
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}
diff --git a/generated/utils/cn_merge.go b/generated/utils/cn_merge.go
deleted file mode 100644
index 33d4cf2..0000000
--- a/generated/utils/cn_merge.go
+++ /dev/null
@@ -1,266 +0,0 @@
-package uiutils
-
-import (
-	"strings"
-	"unicode"
-)
-
-func mergeTailwind(classes ...string) string {
-	var tokens []string
-	for _, chunk := range classes {
-		for _, part := range strings.Fields(chunk) {
-			tokens = append(tokens, part)
-		}
-	}
-	if len(tokens) == 0 {
-		return ""
-	}
-
-	type item struct {
-		token string
-		keys  []string
-	}
-	kept := make([]item, 0, len(tokens))
-	indexByKey := map[string]int{}
-
-	for _, token := range tokens {
-		keys := conflictKeys(token)
-		if len(keys) > 0 {
-			seen := map[int]struct{}{}
-			for _, key := range keys {
-				if i, ok := indexByKey[key]; ok {
-					seen[i] = struct{}{}
-				}
-			}
-			if len(seen) > 0 {
-				next := kept[:0]
-				remap := map[int]int{}
-				for i, it := range kept {
-					if _, drop := seen[i]; drop {
-						continue
-					}
-					remap[i] = len(next)
-					next = append(next, it)
-				}
-				kept = next
-				for key, i := range indexByKey {
-					if ni, ok := remap[i]; ok {
-						indexByKey[key] = ni
-					} else {
-						delete(indexByKey, key)
-					}
-				}
-			}
-		}
-		pos := len(kept)
-		kept = append(kept, item{token: token, keys: keys})
-		for _, key := range keys {
-			indexByKey[key] = pos
-		}
-	}
-
-	out := make([]string, 0, len(kept))
-	for _, it := range kept {
-		out = append(out, it.token)
-	}
-	return strings.Join(out, " ")
-}
-
-func conflictKeys(token string) []string {
-	prefix, core := splitVariant(token)
-	if core == "" {
-		return nil
-	}
-	groups := utilityGroups(core)
-	if len(groups) == 0 {
-		return nil
-	}
-	keys := make([]string, 0, len(groups))
-	for _, group := range groups {
-		keys = append(keys, prefix+group)
-	}
-	return keys
-}
-
-func splitVariant(token string) (prefix, core string) {
-	depth := 0
-	cut := -1
-	for i, r := range token {
-		switch r {
-		case '[':
-			depth++
-		case ']':
-			if depth > 0 {
-				depth--
-			}
-		case ':':
-			if depth == 0 {
-				cut = i
-			}
-		}
-	}
-	if cut == -1 {
-		return "", strings.TrimPrefix(token, "!")
-	}
-	return token[:cut+1], strings.TrimPrefix(token[cut+1:], "!")
-}
-
-func utilityGroups(core string) []string {
-	switch core {
-	case "block", "inline", "inline-block", "inline-flex", "flex", "grid", "contents", "hidden":
-		return []string{"display"}
-	case "flex-row", "flex-col", "flex-row-reverse", "flex-col-reverse":
-		return []string{"flex-direction"}
-	case "static", "relative", "absolute", "fixed", "sticky":
-		return []string{"position"}
-	case "isolate", "isolation-auto":
-		return []string{"isolation"}
-	}
-
-	if group, ok := prefixGroup(core, [][2]string{
-		{"gap-x-", "gap-x"},
-		{"gap-y-", "gap-y"},
-		{"gap-", "gap"},
-		{"items-", "align-items"},
-		{"justify-", "justify-content"},
-		{"self-", "align-self"},
-		{"content-", "align-content"},
-		{"overflow-", "overflow"},
-		{"inset-x-", "inset-x"},
-		{"inset-y-", "inset-y"},
-		{"inset-", "inset"},
-		{"min-w-", "min-width"},
-		{"min-h-", "min-height"},
-		{"max-w-", "max-width"},
-		{"max-h-", "max-height"},
-		{"shadow-", "shadow"},
-		{"ring-", "ring"},
-		{"rounded-", "rounded"},
-		{"leading-", "leading"},
-		{"tracking-", "tracking"},
-		{"opacity-", "opacity"},
-		{"z-", "z"},
-		{"top-", "top"},
-		{"right-", "right"},
-		{"bottom-", "bottom"},
-		{"left-", "left"},
-	}); ok {
-		return []string{group}
-	}
-
-	switch {
-	case core == "border":
-		return []string{"border-width"}
-	case core == "rounded":
-		return []string{"rounded"}
-	case core == "shadow" || core == "shadow-none":
-		return []string{"shadow"}
-	case core == "grow" || strings.HasPrefix(core, "grow-") || core == "flex-1" || core == "flex-auto" || core == "flex-none" || core == "flex-initial":
-		return []string{"flex-size"}
-	case core == "shrink" || core == "shrink-0":
-		return []string{"flex-shrink"}
-	}
-
-	if strings.HasPrefix(core, "size-") {
-		return []string{"width", "height"}
-	}
-	if strings.HasPrefix(core, "w-") {
-		return []string{"width"}
-	}
-	if strings.HasPrefix(core, "h-") {
-		return []string{"height"}
-	}
-
-	if strings.HasPrefix(core, "p-") && !hasDirectionPrefix(core, "p") {
-		return []string{"padding", "padding-x", "padding-y", "padding-t", "padding-r", "padding-b", "padding-l"}
-	}
-	if g, ok := spaceAxis(core, "p"); ok {
-		return g
-	}
-	if strings.HasPrefix(core, "m-") && !hasDirectionPrefix(core, "m") {
-		return []string{"margin", "margin-x", "margin-y", "margin-t", "margin-r", "margin-b", "margin-l"}
-	}
-	if g, ok := spaceAxis(core, "m"); ok {
-		return g
-	}
-
-	if strings.HasPrefix(core, "bg-") {
-		return []string{"bg"}
-	}
-	if isTextSize(core) {
-		return []string{"text-size"}
-	}
-	if strings.HasPrefix(core, "text-") {
-		return []string{"text-color"}
-	}
-	if strings.HasPrefix(core, "font-") && isFontWeight(core) {
-		return []string{"font-weight"}
-	}
-	return nil
-}
-
-func prefixGroup(core string, prefixes [][2]string) (string, bool) {
-	for _, pair := range prefixes {
-		if strings.HasPrefix(core, pair[0]) {
-			return pair[1], true
-		}
-	}
-	return "", false
-}
-
-func hasDirectionPrefix(core, kind string) bool {
-	for _, dir := range []string{"x-", "y-", "t-", "r-", "b-", "l-", "s-", "e-"} {
-		if strings.HasPrefix(core, kind+dir) {
-			return true
-		}
-	}
-	return false
-}
-
-func spaceAxis(core, kind string) ([]string, bool) {
-	switch {
-	case strings.HasPrefix(core, kind+"x-"):
-		return []string{kindName(kind) + "-x"}, true
-	case strings.HasPrefix(core, kind+"y-"):
-		return []string{kindName(kind) + "-y"}, true
-	case strings.HasPrefix(core, kind+"t-"):
-		return []string{kindName(kind) + "-t"}, true
-	case strings.HasPrefix(core, kind+"r-"):
-		return []string{kindName(kind) + "-r"}, true
-	case strings.HasPrefix(core, kind+"b-"):
-		return []string{kindName(kind) + "-b"}, true
-	case strings.HasPrefix(core, kind+"l-"):
-		return []string{kindName(kind) + "-l"}, true
-	}
-	return nil, false
-}
-
-func kindName(kind string) string {
-	if kind == "p" {
-		return "padding"
-	}
-	return "margin"
-}
-
-func isTextSize(core string) bool {
-	switch core {
-	case "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "text-3xl", "text-4xl", "text-5xl", "text-6xl", "text-7xl", "text-8xl", "text-9xl":
-		return true
-	}
-	if strings.HasPrefix(core, "text-[") {
-		rest := strings.TrimPrefix(core, "text-[")
-		if rest == "" {
-			return false
-		}
-		return unicode.IsDigit(rune(rest[0])) || rest[0] == '.'
-	}
-	return false
-}
-
-func isFontWeight(core string) bool {
-	switch core {
-	case "font-thin", "font-extralight", "font-light", "font-normal", "font-medium", "font-semibold", "font-bold", "font-extrabold", "font-black":
-		return true
-	}
-	return false
-}
diff --git a/generated/utils/env.ts b/generated/utils/env.ts
deleted file mode 100644
index 3f0dd9a..0000000
--- a/generated/utils/env.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export function isDevEnv(): boolean {
-  try {
-    const env = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
-    if (env && typeof env.DEV === "boolean") return env.DEV;
-  } catch {
-    // import.meta may be unavailable in some contexts
-  }
-  return false;
-}
diff --git a/generated/utils/expr.ts b/generated/utils/expr.ts
deleted file mode 100644
index d4f4a05..0000000
--- a/generated/utils/expr.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Tiny attribute-logic helpers used by generated components. One
- * implementation per runtime family keeps every default-resolution decision
- * table byte-identical across React, Svelte, and Vue (mirrors `expr.go`).
- */
-
-export const trimStr = (v: string | number | null | undefined): string =>
-  v === null || v === undefined ? "" : String(v).trim();
-
-export const isSetStr = (v: string | null | undefined): boolean => trimStr(v) !== "";
-
-export const isSetNum = (v: number | null | undefined): boolean => (v ?? 0) > 0;
-
-/**
- * `trim(v) === "" ? fallback : trim(v)` — DefaultInputType-style defaults.
- * Generic so enum-typed props keep their literal union through the default.
- */
-export const defaultIfEmpty = <T extends string>(v: T | null | undefined, fallback: T): T => {
-  const t = trimStr(v) as T;
-  return t === "" ? fallback : t;
-};
-
-/** Whitelist: returns `trim(v)` when in `allowed`, otherwise `fallback`. */
-export const oneOfOr = <T extends string>(
-  v: string | null | undefined,
-  fallback: T,
-  ...allowed: T[]
-): T => {
-  const t = trimStr(v) as T;
-  return allowed.includes(t) ? t : fallback;
-};
-
-export const oneOfOrLower = <T extends string>(
-  v: string | null | undefined,
-  fallback: T,
-  ...allowed: T[]
-): T => {
-  const t = trimStr(v).toLowerCase() as T;
-  return allowed.includes(t) ? t : fallback;
-};
-
-/** Decision table: `mapping[trim(v)] ?? fallback`. */
-export const mapOr = <T extends string>(
-  v: string | null | undefined,
-  mapping: Record<string, T>,
-  fallback: T
-): T => mapping[trimStr(v)] ?? fallback;
-
-export const mapOrLower = <T extends string>(
-  v: string | null | undefined,
-  mapping: Record<string, T>,
-  fallback: T
-): T => mapping[trimStr(v).toLowerCase()] ?? fallback;
-
-/** Integer decision table: `mapping[v] ?? fallback`. */
-export const intMapOr = <T extends string>(
-  v: number | null | undefined,
-  mapping: Record<number, T>,
-  fallback: T
-): T => mapping[v ?? 0] ?? fallback;
-
-/** Null-safe string equality (both sides normalized to ""). */
-export const eqStr = (a: string | null | undefined, b: string | null | undefined): boolean =>
-  (a ?? "") === (b ?? "");
-
-/** ARIA state stringification: always "true"/"false", never omitted. */
-export const boolStr = (v: boolean | null | undefined): "true" | "false" =>
-  v ? "true" : "false";
-
-/** Concatenation of trimmed parts (icon `Prefix + Name`). */
-export const concatTrim = (...parts: (string | null | undefined)[]): string =>
-  parts.map(trimStr).join("");
-
-/** Omit-if-empty attribute value: `""` → `undefined` so the attr is dropped. */
-export const orUndef = (v: string | null | undefined): string | undefined => {
-  const t = trimStr(v);
-  return t === "" ? undefined : String(v);
-};
-
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-
-/** h1–h6 from a heading level; 0/undefined/out-of-range default to h2. */
-export const titleTag = (order: HeadingLevel | number | null | undefined): string => {
-  switch (order) {
-    case 1:
-      return "h1";
-    case 3:
-      return "h3";
-    case 4:
-      return "h4";
-    case 5:
-      return "h5";
-    case 6:
-      return "h6";
-    default:
-      return "h2";
-  }
-};
diff --git a/generated/utils/index.ts b/generated/utils/index.ts
deleted file mode 100644
index 7744b0e..0000000
--- a/generated/utils/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export { cn } from "./cn";
-export { isDevEnv } from "./env";
-export type { RecipeKey, VariantRecipe } from "./recipe-types";
-export {
-  compose,
-  composeRecipe,
-  recipeToVariants,
-  type RecipeSelection,
-  type Variants,
-} from "./variants";
-export { TagGroup, isAllowedTag, resolveTag } from "./tags";
-export * from "./expr";
diff --git a/generated/utils/recipe-types.ts b/generated/utils/recipe-types.ts
deleted file mode 100644
index 4c06863..0000000
--- a/generated/utils/recipe-types.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Type helpers to derive literal unions from `*.variants.json` recipes.
- * Usage:
- *   import buttonRecipe from "./button.variants.json";
- *   type ButtonVariant = RecipeKey<typeof buttonRecipe, "variant">;
- *   // ^? "default" | "destructive" | "ghost" | ...
- */
-
-export type VariantRecipe = {
-  id: string;
-  base: string;
-  keys: string[];
-  defaults: Record<string, string>;
-  byKey: Record<string, Record<string, string>>;
-};
-
-/**
- * Extract the literal union of variant keys for a given recipe dimension.
- * Empty string (used as a fallback in some JSON recipes) is excluded so
- * consumers get only meaningful values in autocomplete.
- */
-export type RecipeKey<
-  R extends VariantRecipe,
-  K extends keyof R["byKey"] & string,
-> = Exclude<keyof R["byKey"][K] & string, "">;
diff --git a/generated/utils/tags.ts b/generated/utils/tags.ts
deleted file mode 100644
index 174c0c4..0000000
--- a/generated/utils/tags.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-// Code generated by tagsgen. DO NOT EDIT.
-
-import { isDevEnv } from "./env";
-
-export const TagGroup = {
-  Layout: "Layout",
-  BoxAllowed: "BoxAllowed",
-  BlockText: "BlockText",
-  Inline: "Inline",
-  Heading: "Heading",
-  List: "List",
-  ListItem: "ListItem",
-  Form: "Form",
-  FormControl: "FormControl",
-  FormLabel: "FormLabel",
-  Table: "Table",
-  TableSection: "TableSection",
-  TableRow: "TableRow",
-  TableCell: "TableCell",
-  TableColumn: "TableColumn",
-  Media: "Media",
-  Disclosure: "Disclosure",
-  Container: "Container",
-  Stack: "Stack",
-  Group: "Group",
-  Text: "Text",
-} as const;
-
-export type TagGroup = (typeof TagGroup)[keyof typeof TagGroup];
-
-const layoutTags = new Set(["div", "section", "article", "aside", "header", "footer", "main", "nav", "figure", "search", "hgroup"]);
-const boxAllowedTags = new Set(["div"]);
-const blockTextTags = new Set(["p", "blockquote", "figcaption", "address", "pre"]);
-const inlineTags = new Set(["span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"]);
-const headingTags = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
-const listTags = new Set(["ul", "ol", "dl", "menu"]);
-const listItemTags = new Set(["li", "dt", "dd"]);
-const formTags = new Set(["form", "fieldset"]);
-const formControlTags = new Set(["input", "textarea", "select", "button", "option", "optgroup", "datalist", "output", "meter", "progress"]);
-const formLabelTags = new Set(["label", "legend"]);
-const tableTags = new Set(["table"]);
-const tableSectionTags = new Set(["thead", "tbody", "tfoot"]);
-const tableRowTags = new Set(["tr"]);
-const tableCellTags = new Set(["th", "td"]);
-const tableColumnTags = new Set(["colgroup", "col"]);
-const mediaTags = new Set(["img", "picture", "source"]);
-const disclosureTags = new Set(["details", "summary"]);
-const containerTags = new Set(["div", "main", "section"]);
-const stackTags = new Set(["div", "ul", "ol"]);
-const groupTags = new Set(["div", "fieldset", "dl"]);
-
-function oneOf(tag: string, options: Set<string>): boolean {
-  return options.has(tag);
-}
-
-const warnedTagFallbacks = new Set<string>();
-
-function warnTagFallback(tag: string, fallback: string, group: TagGroup): void {
-  if (!isDevEnv()) return;
-  const key = `${group}:${tag}:${fallback}`;
-  if (warnedTagFallbacks.has(key)) return;
-  warnedTagFallbacks.add(key);
-  console.warn(`[resolveTag] disallowed tag "${tag}" for group "${group}", fallback "${fallback}" used.`);
-}
-
-export function isAllowedTag(tag: string, group: TagGroup): boolean {
-  const t = tag.trim().toLowerCase();
-  switch (group) {
-    case TagGroup.Layout:
-      return oneOf(t, layoutTags);
-    case TagGroup.BoxAllowed:
-      return oneOf(t, boxAllowedTags);
-    case TagGroup.BlockText:
-      return oneOf(t, blockTextTags);
-    case TagGroup.Inline:
-      return oneOf(t, inlineTags);
-    case TagGroup.Heading:
-      return oneOf(t, headingTags);
-    case TagGroup.List:
-      return oneOf(t, listTags);
-    case TagGroup.ListItem:
-      return oneOf(t, listItemTags);
-    case TagGroup.Form:
-      return oneOf(t, formTags);
-    case TagGroup.FormControl:
-      return oneOf(t, formControlTags);
-    case TagGroup.FormLabel:
-      return oneOf(t, formLabelTags);
-    case TagGroup.Table:
-      return oneOf(t, tableTags);
-    case TagGroup.TableSection:
-      return oneOf(t, tableSectionTags);
-    case TagGroup.TableRow:
-      return oneOf(t, tableRowTags);
-    case TagGroup.TableCell:
-      return oneOf(t, tableCellTags);
-    case TagGroup.TableColumn:
-      return oneOf(t, tableColumnTags);
-    case TagGroup.Media:
-      return oneOf(t, mediaTags);
-    case TagGroup.Disclosure:
-      return oneOf(t, disclosureTags);
-    case TagGroup.Container:
-      return oneOf(t, containerTags);
-    case TagGroup.Stack:
-      return oneOf(t, stackTags);
-    case TagGroup.Group:
-      return oneOf(t, groupTags);
-    case TagGroup.Text:
-      return blockTextTags.has(t) || inlineTags.has(t);
-    default:
-      return false;
-  }
-}
-
-export function resolveTag(tag: string | undefined, fallback: string, group: TagGroup): string {
-  const t = tag?.trim().toLowerCase() ?? "";
-  if (!t) return fallback;
-  if (isAllowedTag(t, group)) return t;
-  warnTagFallback(t, fallback, group);
-  return fallback;
-}
diff --git a/generated/utils/utils.go b/generated/utils/utils.go
deleted file mode 100644
index 56a7844..0000000
--- a/generated/utils/utils.go
+++ /dev/null
@@ -1,67 +0,0 @@
-// Package uiutils holds shared Go helpers for generated UI8Kit bricks.
-package uiutils
-
-import (
-	"fmt"
-	"strings"
-
-	"github.com/a-h/templ"
-)
-
-// Variants groups a base utility chain and keyed variant maps (cva-style).
-type Variants struct {
-	Base     string
-	Keys     []string
-	ByKey    map[string]map[string]string
-	Defaults map[string]string
-}
-
-// Compose merges Base, variant selections, and optional tail classes.
-func Compose(v Variants, selection map[string]string, extra ...string) string {
-	var parts []string
-	if strings.TrimSpace(v.Base) != "" {
-		parts = append(parts, strings.TrimSpace(v.Base))
-	}
-	for _, key := range v.Keys {
-		choices, ok := v.ByKey[key]
-		if !ok {
-			continue
-		}
-		choice := strings.TrimSpace(selection[key])
-		if choice == "" {
-			choice = strings.TrimSpace(v.Defaults[key])
-		}
-		if choice == "" {
-			if len(choices) > 0 {
-				panic(fmt.Sprintf("[Compose] missing default for key %q", key))
-			}
-			continue
-		}
-		if cls, ok2 := choices[choice]; ok2 {
-			if strings.TrimSpace(cls) != "" {
-				parts = append(parts, cls)
-			}
-		}
-		// Unknown choices are silently dropped to avoid leaking typos into
-		// the DOM as literal class names.
-	}
-	parts = append(parts, extra...)
-	return Cn(parts...)
-}
-
-// Cn joins class fragments and resolves Tailwind conflicts (last class wins),
-// matching the JS `cn` = clsx + tailwind-merge used by HostingPanel kit.
-func Cn(classes ...string) string {
-	return mergeTailwind(classes...)
-}
-
-// MergeAttrs merges attribute maps left to right.
-func MergeAttrs(parts ...templ.Attributes) templ.Attributes {
-	out := templ.Attributes{}
-	for _, attrs := range parts {
-		for k, v := range attrs {
-			out[k] = v
-		}
-	}
-	return out
-}
diff --git a/generated/utils/variants.ts b/generated/utils/variants.ts
deleted file mode 100644
index 51921c0..0000000
--- a/generated/utils/variants.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { cn } from "./cn";
-import { isDevEnv } from "./env";
-import type { RecipeKey, VariantRecipe } from "./recipe-types";
-
-export type { RecipeKey, VariantRecipe };
-
-export type Variants = {
-  id?: string;
-  base: string;
-  keys: string[];
-  defaults: Record<string, string>;
-  byKey: Record<string, Record<string, string>>;
-};
-
-export function recipeToVariants<R extends VariantRecipe>(recipe: R): Variants {
-  return {
-    id: recipe.id,
-    base: recipe.base,
-    keys: recipe.keys,
-    defaults: recipe.defaults ?? {},
-    byKey: recipe.byKey,
-  };
-}
-
-/**
- * Merge base, variant selections, and optional tail classes.
- * Mirrors Go `uiutils.Compose`.
- */
-export function compose(
-  v: Variants,
-  selection: Record<string, string>,
-  ...extra: (string | undefined | null | false)[]
-): string {
-  const parts: string[] = [];
-  if (v.base.trim() !== "") {
-    parts.push(v.base.trim());
-  }
-  for (const key of v.keys) {
-    const choices = v.byKey[key];
-    if (!choices) continue;
-    const selected = (selection[key] ?? "").trim();
-    const fallback = (v.defaults[key] ?? "").trim();
-    const choice = selected || fallback;
-    if (!choice) {
-      if (isDevEnv() && Object.keys(choices).length > 0) {
-        throw new Error(
-          `[compose] missing default for key "${key}" (recipe id: ${String(v.id ?? "?")})`
-        );
-      }
-      continue;
-    }
-    const cls = choices[choice];
-    if (cls !== undefined) {
-      if (cls.trim() !== "") parts.push(cls.trim());
-    } else if (isDevEnv()) {
-      throw new Error(
-        `[compose] unknown variant "${choice}" for key "${key}" (recipe id: ${String(v.id ?? "?")})`
-      );
-    }
-    // Unknown choices are silently dropped in production to avoid leaking
-    // typos into the DOM as literal class names.
-  }
-  return cn(...parts, ...extra);
-}
-
-/** Selection type for `composeRecipe`. */
-export type RecipeSelection<R extends VariantRecipe> = {
-  [K in keyof R["byKey"] & string]?: RecipeKey<R, K> | undefined;
-};
-
-/** Compose classes from a typed recipe. */
-export function composeRecipe<R extends VariantRecipe>(
-  recipe: R,
-  selection: RecipeSelection<R>,
-  ...extra: (string | undefined | null | false)[]
-): string {
-  return compose(recipeToVariants(recipe), selection as Record<string, string>, ...extra);
-}
diff --git a/generated/utils/variants_json.go b/generated/utils/variants_json.go
deleted file mode 100644
index a027bc3..0000000
--- a/generated/utils/variants_json.go
+++ /dev/null
@@ -1,47 +0,0 @@
-package uiutils
-
-import (
-	"encoding/json"
-	"fmt"
-)
-
-// VariantRecipe is the JSON shape for *.variants.json (shared with React CVA recipes).
-type VariantRecipe struct {
-	ID       string                       `json:"id"`
-	Base     string                       `json:"base"`
-	Keys     []string                     `json:"keys"`
-	Defaults map[string]string            `json:"defaults"`
-	ByKey    map[string]map[string]string `json:"byKey"`
-	Meta     map[string]string            `json:"meta,omitempty"`
-}
-
-// ToVariants converts a recipe into the in-memory CVA map used by Compose.
-func (r VariantRecipe) ToVariants() Variants {
-	return Variants{
-		Base:     r.Base,
-		Keys:     r.Keys,
-		ByKey:    r.ByKey,
-		Defaults: r.Defaults,
-	}
-}
-
-// ParseVariantRecipe unmarshals *.variants.json bytes.
-func ParseVariantRecipe(data []byte) (VariantRecipe, error) {
-	var recipe VariantRecipe
-	if err := json.Unmarshal(data, &recipe); err != nil {
-		return VariantRecipe{}, fmt.Errorf("variants JSON: %w", err)
-	}
-	if recipe.ByKey == nil {
-		return VariantRecipe{}, fmt.Errorf("variants JSON: missing byKey")
-	}
-	return recipe, nil
-}
-
-// MustParseVariantRecipe parses recipe JSON or panics (for generated init blocks).
-func MustParseVariantRecipe(data []byte) VariantRecipe {
-	recipe, err := ParseVariantRecipe(data)
-	if err != nil {
-		panic(err)
-	}
-	return recipe
-}
diff --git a/package.json b/package.json
index 801cbe4..56fea48 100644
--- a/package.json
+++ b/package.json
@@ -1,55 +1,59 @@
 {
   "name": "@ui8kit/codegen",
-  "version": "0.1.0",
-  "description": "Spec-driven codegen engine for UI8Kit ui/ primitives: one typed render contract, seven runtimes (Templ, React, Svelte 5, Vue 3, SolidJS, Latte, Twig).",
-  "license": "MIT",
+  "private": true,
+  "version": "2.0.0",
   "type": "module",
-  "bin": {
-    "ui8kit-codegen": "./bin/ui8kit-codegen.js"
+  "description": "ui8kit codegen 2.0 (xgen): spec-driven generation of one typed UI contract into eight runtimes (Svelte 5, React 19, Vue 3, SolidJS, Go templ, Twig, Jinja2, Latte) with identical DOM and ARIA, plus a shared app package and one host app per TypeScript runtime. Bun workspaces.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ui8kit/codegen.git"
   },
+  "workspaces": [
+    "xgen/schema",
+    "xgen/spec",
+    "xgen/screens",
+    "xgen/generator",
+    "xgen/check",
+    "xgen/cli",
+    "xgen/runtimes/*",
+    "apps/*",
+    "packages/tooling",
+    "packages/shared/*",
+    "packages/svelte/*",
+    "packages/react/*",
+    "packages/vue/*",
+    "packages/solid/*",
+    "packages/templ/*",
+    "packages/twig/*",
+    "packages/jinja2/*",
+    "packages/latte/*"
+  ],
+  "packageManager": "bun@1.4.2",
   "scripts": {
-    "generate": "bun src/infrastructure/cli.ts generate --out generated",
-    "generate:latte-bundle": "bun src/application/generate-latte-bundle.ts",
-    "check": "bun src/infrastructure/cli.ts check",
-    "dev:templ": "cd examples && bun run dev:templ",
-    "dev:react": "cd examples && bun run dev:react",
-    "dev:svelte": "cd examples && bun run dev:svelte",
-    "dev:vue": "cd examples && bun run dev:vue",
-    "dev:solid": "cd examples && bun run dev:solid",
-    "dev:latte": "cd examples && bun run dev:latte",
-    "dev:twig": "cd examples && bun run dev:twig",
-    "build:html": "cd examples && bun run build:html",
-    "build:css": "cd examples && bun run build:css",
-    "test": "bun test",
-    "test:watch": "bun test --watch",
-    "typecheck": "tsc --noEmit",
-    "typecheck:generated": "bun run generate && bun x tsc -p tsconfig.generated.json",
-    "verify": "bun run check && bun x tsc --noEmit && bun run typecheck:generated && bun test"
-  },
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.6.0"
+    "build": "bun xgen/cli/src/cli.ts build",
+    "check": "bun xgen/cli/src/cli.ts check",
+    "codex:manifest": "bun xgen/schema/src/codex.ts",
+    "codex:validate": "bun xgen/schema/src/codex-validate.ts",
+    "codex:blocks": "bun xgen/schema/src/codex-blocks.ts",
+    "rules": "bun xgen/check/tools/rules.ts",
+    "rules:baseline": "bun xgen/check/tools/rules.ts --write",
+    "audit:push": "bash packages/tooling/bin/audit.sh",
+    "hooks:install": "git config core.hooksPath .githooks",
+    "build:hosts": "bun run --cwd apps/host-svelte build && bun run --cwd apps/host-react build && bun run --cwd apps/host-vue build && bun run --cwd apps/host-solid build",
+    "e2e": "bun xgen/cli/src/cli.ts e2e",
+    "shot": "bun xgen/cli/src/cli.ts shot",
+    "visual": "bun xgen/cli/src/cli.ts visual",
+    "typecheck": "bun run typecheck:xgen && bun run --filter \"@ui8kit/svelte-ui\" --filter \"@ui8kit/react-ui\" --filter \"@ui8kit/vue-ui\" --filter \"@ui8kit/solid-ui\" --filter \"@ui8kit/app-shared\" --filter \"host-*\" --parallel check",
+    "test": "bun test xgen",
+    "check:all": "bun run build && bun run check && bun run typecheck && bun run build:hosts && bun run test && bun run lint:px && bun run e2e",
+    "typecheck:xgen": "tsc -p xgen/tsconfig.json",
+    "lint:px": "node packages/tooling/bin/ui8px-gate.mjs",
+    "verify": "bun run check && bun run codex:validate && bun run typecheck && bun run test"
   },
   "devDependencies": {
-    "@babel/core": "7",
-    "@babel/preset-typescript": "7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@types/node": "^22.10.5",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/server-renderer": "^3.5.13",
-    "babel-preset-solid": "^1.9.12",
-    "bun-types": "^1.3.14",
-    "parse5": "^7.2.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "solid-js": "^1.9.5",
-    "svelte": "^5.19.0",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.3",
-    "vite-plugin-solid": "^2.11.6",
-    "vitest": "^3.0.4",
-    "vue": "^3.5.13"
+    "@types/bun": "^1.4.2",
+    "html-validate": "^11.16.2",
+    "ui8px": "0.2.4"
   }
 }
diff --git a/packages/jinja2/ui/.gitignore b/packages/jinja2/ui/.gitignore
new file mode 100644
index 0000000..9a9a71f
--- /dev/null
+++ b/packages/jinja2/ui/.gitignore
@@ -0,0 +1,4 @@
+# Code generated by xgen. DO NOT EDIT.
+# the virtual environment of bun run check, and Python caches
+.venv/
+__pycache__/
diff --git a/packages/jinja2/ui/.xgen-manifest.json b/packages/jinja2/ui/.xgen-manifest.json
new file mode 100644
index 0000000..72633cb
--- /dev/null
+++ b/packages/jinja2/ui/.xgen-manifest.json
@@ -0,0 +1,375 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "packages/jinja2/ui",
+  "files": {
+    ".gitignore": "4842e91b98866e59d816607324fea086e61e88131feccd6498c1d5da7e57e078",
+    "bin/parity.py": "3b16be6a7a54596df4fe07194153f91cc3ced9b5b0aa8f5e3538d1c8c8edc2ba",
+    "blocks/about-company.html.j2": "276e2ce8d0ae90fafc5bd4c2bcee5e1cf89874ad5897b128a044742281d85fbe",
+    "blocks/about-me.html.j2": "d41e7d43ab871b71e07a9b473e02fa38ad8632ce69503c7aaa8074d79e168506",
+    "blocks/action-group.html.j2": "948d677528e908258abdaf8ee4ec851b305ea2f3b0a3c87a817f6572967b0993",
+    "blocks/activity-feed.html.j2": "3424b6a55d8428f7ec83cb7c610b43abbd1711d7f7cae5d7077b7ae2f159377f",
+    "blocks/announcement-bar.html.j2": "8e495da0f2df2534e30101af74abadcf62693ab8d07ba3a85b3bc87fe5f07672",
+    "blocks/app-main.html.j2": "1fdda24e2c19178e0f459f963dbc5d055c35b47b06f550c3164cdb42511625c6",
+    "blocks/app-shell.html.j2": "833cfd9fd8fc17de8ae4d44ffb54b3aeadec5f1fb881260131cb3ba8d92dea79",
+    "blocks/article-block.html.j2": "a4821819d764d762bb353f613c0a01b582bedc427fa9647b71dbba6fe5e39142",
+    "blocks/article-body.html.j2": "eeb962fe9cff32b9b7805bc4df8d80a5e35a770afcc737b71bfa099963345b73",
+    "blocks/auth-card.html.j2": "9d4107702309965bfea156fe81b6124ffa57c04ec609d2155040010e31ac8ce0",
+    "blocks/auth-form.html.j2": "b4ebc043d8db7722c5051ac6197e3ee2e2547af810e5ea5cf265d24a103b714a",
+    "blocks/auth-layout.html.j2": "0162b68326d4e5961e663fc789325deeb55eedda71e343e75c7f29aefee4d010",
+    "blocks/avatar.html.j2": "93cd8bce524083519f0f7b943dd5798375aa45efc31379c36baa4516be714dcf",
+    "blocks/backdrop.html.j2": "926043094c0f3352934589eadd9e02b0c5708d02b527069074adc441dbfd980c",
+    "blocks/badge-square.html.j2": "fbd5c890b9688b52b0de7d44a5ca30658ff9dd725212a967d1249a655895e362",
+    "blocks/bar-chart.html.j2": "24d618763e578022ffb8b8424b63e63bc7f16cb57b3bbae7c46c279b19c1a6e9",
+    "blocks/before-after.html.j2": "e447e887a39d540b5734ff5cf40d1b9d25732c94757f30bd69eee047aef4252a",
+    "blocks/bento-grid.html.j2": "e6c4c7c6afae15857cf7fc8a0ffd0cad3ed5c369afe6c37c1a6d82c63442e791",
+    "blocks/bottom-nav.html.j2": "4ebc5ffa3151b9fb42c9ac1833091e27141a39d95b9535c7fd061f7d49dda047",
+    "blocks/bulk-bar.html.j2": "fc3a8514622c1e4592f4d23b0da852410a9be15c7644b1c989789dc45f078c61",
+    "blocks/cart-drawer.html.j2": "3fa860e5473debdc13a55d1f9bd64016bb0d802441b8def560ddda17bdd57dc2",
+    "blocks/cart-list.html.j2": "5d34934a02c955abea031cd4a17f2e3da3c942f06a65ea0dd6d5abb89f26333b",
+    "blocks/cart-summary-card.html.j2": "674311c5da2b1e11cd9a403aeddc3b8021dfbc0252e1b95dfb194686c88cf172",
+    "blocks/cart-table.html.j2": "d4daa1ad9627cd71c91f93a3550387c70c9a05db5cb5e3eece9ffe3d047d59be",
+    "blocks/category-nav.html.j2": "916c6f772f2edfce67a08471ef9593a6fbc5fa83b63e9de0df94545ffbec25b5",
+    "blocks/chart-panel.html.j2": "89116bcfdd48b65913773f0da9a48b33fe095df7e64035ac23df94ce9a9dde05",
+    "blocks/checklist.html.j2": "0b70ba3fc636ed17b4b61331715348367b151d3dffd6304df0284bb54e4dbf0c",
+    "blocks/checkout-form.html.j2": "8408df0d936202b5ce58f0a7bd5dd8b1a4826439e73e2a342f1cdd51f4c6fe4c",
+    "blocks/checkout-step.html.j2": "6771af31244a76e83104316c098e2055e42860cd79eb99fdcaf0084de5c8c61c",
+    "blocks/checkout-submit.html.j2": "922ccbf1541717f2a44d780939fb13751647fedff835d6910c2d9bf5e09c450a",
+    "blocks/code-window.html.j2": "abe4590a816d6384565b25b4b7cbb52b449507b08ba23215f394309e04355853",
+    "blocks/compare-mark.html.j2": "e9907b979984f4fd1be1f837cea4a93f1b8f56a31e582e681c2f8cf5120b9228",
+    "blocks/comparison-table.html.j2": "5d059c79f40379f5f62b56635aa21d09eb164078570255f005083489e726a0e4",
+    "blocks/contact-form.html.j2": "c051cc22c499a8c5fadf5b6047721a1f326d59acfefed758cfd68759f69dc7f3",
+    "blocks/cookie-banner.html.j2": "d89d977087bec900db98635a14644bc1d60b7a0e37725c239f0dc247d2b6e15e",
+    "blocks/credit-packs.html.j2": "605d3e3b2699f54144beeee4366a0e3258a6f5fc71a291c65a120959ffef86bc",
+    "blocks/cta-actions.html.j2": "e64f5fb052a26778998a17ee4dc4a282b0e1b0d7c6cf40f8f318d0c614dbbf0d",
+    "blocks/cta-band.html.j2": "0f7263e02183623089776c99db42a87beacd4579798022eb64ac8603b7baa586",
+    "blocks/cta-banner.html.j2": "8906450c28165a0e6aa68dd362ca37a82bb5758149f3949c3e7ffa32dfdac900",
+    "blocks/cta-proof-items.html.j2": "67b40d2847c788195f4af2b7ad511ed6fbdc0d4387740d091380a2ec22e4311f",
+    "blocks/cta-proof.html.j2": "28a80ee94ef3543ed121d86f48485d3ad39f43b8f1f4699707d50cf0db2e1dd2",
+    "blocks/dashboard-overview.html.j2": "2470d99e222382e7d365431b573a9933f66f24a63ea14e1fd32566d6617d3cec",
+    "blocks/dashboard-shell.html.j2": "8cb369dd09aaf604147b6ee4da3d5041a8d68aeb3736c063bd06162012a4b48d",
+    "blocks/delivery-info.html.j2": "5986fb3a01a42acb3a06644881c105189dcbdf16354dfd62182251709cb682ba",
+    "blocks/drawer-lines.html.j2": "2bc668b1cae10ca6691fdc5921c4578dfa7bd5b718dc83bda363c8daf2e55c7e",
+    "blocks/dropdown-item.html.j2": "48302a7ce5b8c38bb757ea57f622691cfdd29da72511efba639c5cd734bfa95d",
+    "blocks/editor-tab.html.j2": "8564496f53f0029efdb995b6e888c6a708646e8d45ca0e957dada6395b59d648",
+    "blocks/empty-panel.html.j2": "da0f1d804c8cfaf9d8c82cb0c959b1ca0fd307b08d5ef9cbbd625eb3b8cc8b72",
+    "blocks/empty-state.html.j2": "8016370ee7dfb5f44bcd085b4394032c03a8150d0390c245d9083924f0e3850c",
+    "blocks/error-page.html.j2": "a1ada677fd9c8269bc861508e87c63d77a2072dedaf12c1092f1db5e6ce2f92b",
+    "blocks/faq-cards.html.j2": "21045b23ed8a90a102cff594233ee0be79549fac260ac81da0a21893ef725600",
+    "blocks/faq-disclosures.html.j2": "d0e8d6217d62e17fee06e69feb9f67339a374e165b9794526efe3b3309cafbf8",
+    "blocks/faq-finder.html.j2": "d52c4c700543f133e6cca1071198816a968d959eebfbfdd80562d3bca253388d",
+    "blocks/faq-help.html.j2": "5b577aa76451671f1955f37336396d3dff5162d894f680b2836ba3127f3d1fb9",
+    "blocks/faq-list.html.j2": "a7ecd6700eb813acb3d3b7e4f605a18d57ed75f3c04adfa53b9b7969f04d33e8",
+    "blocks/faq-split.html.j2": "ebac9c72c976a5924353fc8a93ae128e0a559d721eb79db9b434946c503d171f",
+    "blocks/feature-accordion.html.j2": "dfe28b673de0b9573932b6c89bc25394cad80fda3d2ecb8fb31df154eebb316b",
+    "blocks/feature-cards.html.j2": "b177ebfd7eba378ea3e46492afc7ed37ade9386e2cf215561aa6e8eb2298a748",
+    "blocks/feature-grid.html.j2": "58b744ead0622852131dd8c71f3dcd2c83a25ed6ac5b71479c4656d240e65e4d",
+    "blocks/feature-metric-cards.html.j2": "249b7da78728f1f414fa7250d57588736a617078dad0d1288b1cd3a544b4bc3b",
+    "blocks/feature-pairs.html.j2": "5b9e5f1636cd034901909f8ace91a9f1235dbab72bea45f1b230c6978d140bf4",
+    "blocks/feature-rows.html.j2": "6da905b51749b1f4f8c7916e23878580d52c89182e79ddd548b35198c03caa28",
+    "blocks/feature-showcase.html.j2": "becdbac43829b4232dc431dd27fa9a789b046610b6fd70448d2f7512c41ced06",
+    "blocks/feature-split.html.j2": "f88ecaf542d4b337ea613e13e66fc8a9dbb0efff4ebe1d9ac1fab360c8ffd2b3",
+    "blocks/feature-stat-rows.html.j2": "c37a1e9ceab8741e64b8b020e7df26e72cfa13b200d6e42e7c73475ec85b5454",
+    "blocks/feature-sticky.html.j2": "fc03efa90a154970973867673f91e111db02bc4a505f5fe26f129ba200dcd4d7",
+    "blocks/feature-tabs.html.j2": "33a9a4c345f4607d06c4324cece6078e6616aaac13a91e29616b5d89cb306865",
+    "blocks/field.html.j2": "881035886ab3d5914b996601d3d768dd7095653dfe8bc8e3c661f73bc602317e",
+    "blocks/figure-block.html.j2": "1c02ad5e385b65fa36f7ae7983d20e03005a10850eca7644e68b452d06b6d7db",
+    "blocks/file-tree-item.html.j2": "ba13b203571f3b5453ad498f0168c014a86fd613993fa69a78b7f8b17eab15f9",
+    "blocks/file-tree.html.j2": "d7bf5f1484121d8a6b822def026e3ed897fcdf58894ce1bcc43f30798860ffd6",
+    "blocks/footer-brand.html.j2": "0a76e59fc07beeffa22c263aaa7c17ab8eddcccb4c712eaa164807d442cb73ad",
+    "blocks/footer-card.html.j2": "09e175711c423becfc3e7916e5edc76976c563cf02b195be86192ec71b350a98",
+    "blocks/footer-channels.html.j2": "80094856355790b2cdce9365d4572c557cb6b55e9a48e85b22bf4fcf316987ea",
+    "blocks/footer-columns.html.j2": "19fe9bf1caa8f482c4f6349d115c8e789ebf078d29b8e67d7566d0053fe81e79",
+    "blocks/footer-contacts.html.j2": "3f2b3d0d86a9b85af9f71865649c9569469de273e7fe7b54091a6cf6a55254e3",
+    "blocks/footer-figures.html.j2": "10415ac6627ba40277ed1a73896526e27e7ed4768845a60d796e44544f2187f8",
+    "blocks/footer-group-cards.html.j2": "9d2301ff6d7ba2b5c1ebe599f4f5e66a769e2962f1cd150144da61dbd21e5468",
+    "blocks/footer-link-columns.html.j2": "07ce4598facbb26f6370318150b80534d5d93e096e11155ca922d413454ee80b",
+    "blocks/footer-points.html.j2": "dc0c9740e231db6f8fb3b3524519c9f3e8f43e53a431f465925f4e36757a8dd0",
+    "blocks/footer-signup-card.html.j2": "d12a1f22887c438332dbaf1f967e26a1e5e74212afd9be11872861e0a84384f2",
+    "blocks/footer-sitemap.html.j2": "43886dc6601f2d03d94b6c4b251ca6a87169ba4a8e0d989639d8f5280579b960",
+    "blocks/footer-split.html.j2": "08ca6a11c315a0ff610b1fe10ccf400f72929dfc7b4125a44bf85858c836126a",
+    "blocks/hero-badge.html.j2": "c7d5ca31067495bed402475da76d4236782fe9b3c755081aacfaf7417bee0575",
+    "blocks/hero-classic.html.j2": "db230baf5e1dac1ec8586660c0122bc97bc46514d409588b217c771c69846a23",
+    "blocks/hero-head.html.j2": "d1c134dd3cdeeaa5e82c54ca9cd6b1e1ed2e7544774ba2aed7eb6074bcdc1d4a",
+    "blocks/hero-prompt.html.j2": "8dace22ed76a377f75eced209fbd5ce990aacb5bf50e0e825fcfa8c2e9d3261f",
+    "blocks/hero-split-extras.html.j2": "c7e96be723fc560c70423926ee484b056f6f2e6cccdab19be574eb3d446aef04",
+    "blocks/hero-split-media.html.j2": "5e3b45c76701b5d1caa3f545771c422606949db211126b0e08da484f2d82c597",
+    "blocks/hero-split.html.j2": "57e3a1bca73a5986ca84811c3105e8c148e3060d7275b27c28e34c3692e831b6",
+    "blocks/icon-tab.html.j2": "a7578f8cf10ccd5793304b7d8c68ff9be0088f0189a372e814979dc178eb6eb0",
+    "blocks/icon-tabs.html.j2": "16cc51c70c1ffcc3d60909d4eddeb3c89b4146da6ca92c5005500362b266a253",
+    "blocks/icon-wall.html.j2": "977d7ca7b0ba8a19e015c094658ba39b898284ca3695baf6c2f7f8bc093a1cba",
+    "blocks/job-board.html.j2": "363da193aafa74700f673c17e1a7bd25fb3a1f01f77a15e385dae4c3e18653e4",
+    "blocks/job-cards.html.j2": "0baac88bd0258f45dc55a65803408bfff694628b01850e5bbaa078d7323efbc5",
+    "blocks/kanban-board.html.j2": "ac5d360094659aa8ba0d32d4e4a3e791de44b87c6791f95806d19ccd646cc1ef",
+    "blocks/logo-cloud.html.j2": "1228a5d4d84fcef932d4e1297ca0073aa5b6b4e0287a5b72cf258f6bc7ef8069",
+    "blocks/logo-ribbon.html.j2": "0de222cf62f29318185ed8df400e1aaa1a0fdf21a3e95e53baa34a5e1d45f3b0",
+    "blocks/logo-sidebar.html.j2": "22e17582b36955609138ef615f6536ab5419c3c1b5ae64c0ad5ea1a681ff2d03",
+    "blocks/logo-slot.html.j2": "f3ed4e7396d1ee0bc274aad032a00998ae4800f5e762fcb833cc5edff8786cfd",
+    "blocks/media-contacts.html.j2": "9eb39f20b36fd10332b168dfc842bed519963aa4ab7f456d2131ffd5b9e088ff",
+    "blocks/media-figures.html.j2": "6bef8e21dbe1c77517a98c092f23e692c62ecb09881e8e424d30f8cadd86be29",
+    "blocks/media-frame.html.j2": "17f69f378e7703b2c7ab8110780cbdc70c79867fed014453e640e2980ebd9456",
+    "blocks/media-list.html.j2": "4a4433d93fd72cb0649b00483f409d615590b5b9960b66b53bbdd0b252c67ee9",
+    "blocks/media-posts.html.j2": "78622a761a4da1ef727ef00363232c13de2ae45dd31883f5134407604d19eadf",
+    "blocks/media-review.html.j2": "2e838d6c4b3ab789021d4cdc228df79274751a21e421609464ffeb218691dc9b",
+    "blocks/media-steps.html.j2": "e9aef0f52e762573c11221646d04e517a67faecc0b0f72437f9476f8ed4e9e41",
+    "blocks/media-topics.html.j2": "0a2bfe3cfbee5b0c3b14ce598e151f4563edf34778438333f9d6f589554c9b2b",
+    "blocks/mega-menu.html.j2": "1f24fae1f942fbc8c8258abc23e2409a5ce35a9dc2714827e291aae1d165059b",
+    "blocks/member-row.html.j2": "ebe742d274458878002d166737a86dcb6c0003486bcd8c37e0d73108323cb402",
+    "blocks/menu-entry.html.j2": "833d883e2e2635c4718fcb6b5f10884fdee5e6a2930da1845e8955e6859ea4a9",
+    "blocks/meter-row.html.j2": "394d5980affc3cdbd22859e7ca2b5c1812b11aa9495c6c0b4b04fa9e22804527",
+    "blocks/metric-row.html.j2": "56fcb2d7150c8f821073a54c921007dd2d61d7547c51a216b9b9a72e530a7979",
+    "blocks/milestone-timeline.html.j2": "4b9929de771081f7c4ccbc73f8f4cc677faae65adc461e51ab88fcdd3699a938",
+    "blocks/nav-actions.html.j2": "11d8a63b6aad5db743733d8e439d5d2091ea9ac5f7366dfa6db396d1f59d1477",
+    "blocks/nav-bar-menu.html.j2": "db80c18474a921701109b4732343e6c2fe2488ac094d2e396927e40a8a9e0fc7",
+    "blocks/nav-bar.html.j2": "c3f07ce9cad3f4b2d92e5e695c11b4a8f6ff2cff034f7354b5135f6a2d959495",
+    "blocks/nav-block.html.j2": "53ff9d3fa326a56367dc704ab7029a34107f3c16043148b551c3a293fadbbcf4",
+    "blocks/nav-item-row.html.j2": "943684cea00f969b33d477a4f1cfa1ed0f11fe7bd690a43dde40337c9ab1dbd1",
+    "blocks/nav-item.html.j2": "f43237ce1542502982a29e4373def04aa552d2a516c540fd053b217788a36eb8",
+    "blocks/nav-links.html.j2": "1f0d90370bf22ca443a7a38112b05a216a25f18caf468887a9e809d4ad3874c3",
+    "blocks/newsletter-form.html.j2": "884cbb9a33fb380c134b98bfe6256f5ed7939631ab536b804b134214868ade9e",
+    "blocks/notice.html.j2": "8d94980cda10d4362164162f13d539a478803a5890ea79bdfb1220d85602a032",
+    "blocks/number-field.html.j2": "aca02e2d72e6e3521909a6d2877f3d90a0e97750b9072e5475263276799ca67a",
+    "blocks/offer-media.html.j2": "d4390d99f15df5632f325191d2db2db3f0db1be1144cd1bd84ec500c4a96331d",
+    "blocks/order-rows.html.j2": "dd583cf2600891424ffeac44652f271f8ca79d7780a162957ec9e3aa3a371eb9",
+    "blocks/order-summary.html.j2": "4b4dcd8abf16a3cc1742fbb818d280881b478e726015dd5a7e326a38ec55a039",
+    "blocks/order-table.html.j2": "64cef030ee3f2385c5371e63038e424b5ee43762f23fb26474f9dd7e91869d46",
+    "blocks/over-media.html.j2": "99262632f6a3bbeda1a2564ae922e7b3d5a0de0cb7b19986a455eff57ef79378",
+    "blocks/page-aside.html.j2": "52f141c6e799157e41eaf5f091acaac6c11519c19949e44a2c2b0014f6569528",
+    "blocks/page-crumbs.html.j2": "c5bf804ed75949133526afcf56c6f7ae41f0b390dc5522e092e0ba5f393eee9d",
+    "blocks/page-header.html.j2": "0a40a78b279050b0ea789416cf92c382e6a0b894f4a9c5b00d0ea99b8ceaad20",
+    "blocks/page-intro.html.j2": "d262a358e63c6fbe2e23933800e5c0b16906ac0239a9127962e3fcc7ccf15bf6",
+    "blocks/page-trail.html.j2": "10cc1fa00c3c09124d618901a1c10124c006df06609d368654a2447e1d18e811",
+    "blocks/pager.html.j2": "aa5d8cd9c61f12e563f31522d5408b09eab62c5cfdb6220b1a05519d313bcefc",
+    "blocks/panel.html.j2": "ed9dc7e79dc08ff1541399db390738c039dc45ef7ee3023bbbea7a647861b59c",
+    "blocks/payment-options.html.j2": "48705eb7e539f41513aa6962311f4a71adc0a363c4328aef75a4beed6e2f4766",
+    "blocks/photo-gallery.html.j2": "059ab3318bfb2ba2810bfd8a574998d0134a342aa115fb83c5238de294a9f577",
+    "blocks/pill.html.j2": "4328ea5a1f8b535965b1e5af8b231a29e23e14b172dd8516eb0a61a143b078e0",
+    "blocks/post-actions.html.j2": "448f3c41b3be829a6b78b2393df982ef14931e13722e521363b81b6007cfca47",
+    "blocks/post-author.html.j2": "34de3fad3635f166bf4aa9bcabb68a9c5e28bd581724420083152eb223be0d9f",
+    "blocks/post-card.html.j2": "581ab637dbc669335f1be816a8dea33899340d8ac7ecdd78a1b8bd74fd1145d9",
+    "blocks/post-feature.html.j2": "1b1472e8a81bde5737ac4de1288942ddf51e2fa4e64e1041c1897be903178dd4",
+    "blocks/post-grid.html.j2": "b0d38d5f35496824c09b21e65c1755bac253cf997b1a1d2dfc818e18d2a5f551",
+    "blocks/post-header.html.j2": "13c5c71eb5797c2c0c477172a294119201135d786c2d6954bfb4aa86b3c2c65f",
+    "blocks/post-mini-card.html.j2": "297cfce81a5aeb0ecc1b0ddd5ae4fe70bc248b53a2de2a64f2919c356c38c39c",
+    "blocks/post-outline.html.j2": "e7c2427732a9ee578b7d6f34885201e08fa72d94379f030490cff8e9b238ea05",
+    "blocks/post-overlay-card.html.j2": "ff6e404763a89c6f7f0db6e2c6d34af5e6267d24d7db5b0e544ae80801243573",
+    "blocks/post-showcase.html.j2": "bd156d5aaed159403e5ee1a03f8f262395ee52d69b040f5365fd1917941cdb20",
+    "blocks/post-split.html.j2": "bb176179e08f0bf99e1ef483981476d62bb173bf2cd587ef58fb2304c0249b1d",
+    "blocks/post-stats.html.j2": "cef87d3a984e25076f5bba60bc5d083b11e5c82eb7f390994c69ae51ff91f4f6",
+    "blocks/post-tags.html.j2": "5ca03664ea6810a36c5c57febddec393bff6039ca809a6a959a364b0a0487717",
+    "blocks/presets/defaults.json": "b95b6b8c5025af8dfbe44aef409b13c0dadf5bf41d854abb21a112e595b29ae3",
+    "blocks/pricing-card.html.j2": "06e6a37885b32ea8a0a7903509babd74988ab9c5ccc50ffa18411a781d07f766",
+    "blocks/pricing-tiers.html.j2": "6cb93ccac0401de85cf27e7f87a5b4cb9d46bbc8e7f509f56866bc3c1be4fd80",
+    "blocks/product-card.html.j2": "cb3cfa9860903911abe7ccb1fadf311772415abbc4cd4991a4447ae3d5df540c",
+    "blocks/product-detail.html.j2": "56aac917990e790ec414c62e15b8526e0bbed910cbe06368882e4a85fbf39229",
+    "blocks/product-gallery.html.j2": "957ba21e7024164301e513a5d7f6cf021d1907dae55024cd407080699fa01c78",
+    "blocks/product-grid.html.j2": "562a2453a2033321186377c1ef30bce61f8d3be0c65a58a1870cb77f1ca6ad43",
+    "blocks/product-info.html.j2": "67d138ca504175bb6d2b7ed758cede4731e7bbbe0b37fbb531cbb5a1b47db9b2",
+    "blocks/product-price.html.j2": "4633f2822f31318e8d4fb6bf8ec576a3b4e4995467fc25261a3c0d4e4d13e55a",
+    "blocks/profile-form.html.j2": "350725db1df392ec4a0a210272b6b174b0515a4197de1c27b78668b153fa7fcc",
+    "blocks/project-grid.html.j2": "348cd5cc6518837ad98a531d52d3fdd703055661273fdee54876c0606387c53b",
+    "blocks/project-tiles.html.j2": "df09a91db34bac87b1aaeabd14b04ac34b0c876b041b7223ff0bee7e8fe6a69a",
+    "blocks/prompt-composer.html.j2": "311e92831c5aa85488008b370e301d293241087268f401656227375da3adbc2c",
+    "blocks/proof-band.html.j2": "fb223d3dea2066cef44973139092fd3ca6e9c3e2af7965e987ff8748d8eda3ba",
+    "blocks/quote-card.html.j2": "4cc9107d56060e1a335adece70bdd994aa330c9220a12cd829c44795a189513c",
+    "blocks/quote-figures.html.j2": "333d5a95b309a6982851672ead2660ff3be19ed56d6854ad58c3dab69bae7dd1",
+    "blocks/quote-logo-tiles.html.j2": "40b2a429469a1c1e652e0ae1a6d7293e987d4bcf837d3d44c0ee5d41dda483b7",
+    "blocks/quote-proof.html.j2": "6237ee3688094069ecb6db2195012a3825394bf0125db984612cba319f06f7d8",
+    "blocks/quote-rating-panel.html.j2": "9318334229e5917446b731057210e83f0189057307064b7aff4d290c8a886359",
+    "blocks/quote-slot.html.j2": "9095a9905bb13fa2378435c0bfa422d33ed683d51fbad6f3b7ed7ff5d17eb824",
+    "blocks/quote-split.html.j2": "2af8ddb218a7dc8c84fe881cb65601ee5d231b65d1ae0683b9ef11c6b9d5f2d4",
+    "blocks/range-field.html.j2": "71be2eac9c149197baaadd01bb4babdf307470bab4e42a62fdf71770fac93254",
+    "blocks/rating.html.j2": "34e1f0fdbf04da23c26ca694a6ae6d8518ace3c9867074368385b99bb481d365",
+    "blocks/recipes/avatar.variants.json": "46ea20a1e9e713020f165ad7cac44a8c3ece47acaf2754530ad23f23a6e0b172",
+    "blocks/recipes/badge-square.variants.json": "5e8e73320e350988fab7de311cd65d662a8ddcf63e97ce88872e66ee813587c1",
+    "blocks/recipes/file-tree-item.variants.json": "debc1471dbb13602b05a323fedda8503ec955c815f3d22d57804dba279d72d91",
+    "blocks/recipes/icon-tab.variants.json": "2e50f9390011c0e6ee576c63c5ed2e8ac6673610928282fb250a12fb5c7ad6e0",
+    "blocks/recipes/logo-sidebar.variants.json": "79db82787954766904c176eb1af84184e74a5ac7816ed924711fb556714fd76c",
+    "blocks/recipes/media-frame.variants.json": "acffd976f9f24993ca00e9806900c0328b77bdb3211fe9368bd93022bc62f89b",
+    "blocks/recipes/nav-item-content.variants.json": "243a020eb53ab7878c02f896f0283d7e04d197e2a7f419a6b32d11269b0528e4",
+    "blocks/recipes/nav-item.variants.json": "5617402602686362fc2dab73bad603fa51fa1d5971b6833a3d32e018bbc66297",
+    "blocks/recipes/section-column.variants.json": "f06d6cedaf76d8cea8a4fcbf62d62dfd51250570184c3b355b83d2e49cf84396",
+    "blocks/recipes/section-frame.variants.json": "ef2d97d45afd1107c441702b657e77c0c1661c1ba76b0215eecc9169529d4a05",
+    "blocks/recipes/section-head.variants.json": "f2624d5c33466e23046036a99c05831ea84011647632d3a901ca19914778d84e",
+    "blocks/recipes/sidebar-panel.variants.json": "319a47e1524ffbb564189f483b546ff7c22c143b133a4e406bd73a5f61b05321",
+    "blocks/recipes/switcher-item.variants.json": "0c2e75f5db33ecb6774d83709ac938adc20946f45748a3e7e9d1009ea0169bca",
+    "blocks/recipes/switcher.variants.json": "6e59af0edcfdf3d5754b7c7991ac9c6e84713db161dd21022bd308859cbb708a",
+    "blocks/region.html.j2": "203ea98f458f57d27e4b96b6c9578af4a8faa8ef65bfd839c750de62440a0d97",
+    "blocks/review-list.html.j2": "0c2f92f998832b4f12606720386f982853a0ff539b37a3e58a1c067635c57e76",
+    "blocks/search-field.html.j2": "63ae13c6a968bb0bb91017672a0f1effa31d908def66d8bc0a2d421575503bcd",
+    "blocks/search-palette.html.j2": "38c28a37003c94fc18db8aaa81f3061a42e83f21b5b02e451fbb84c40774abd4",
+    "blocks/section-box.html.j2": "227d473c94e4327938508068b666848cb560b2e18c66b247af1887e6943e7f76",
+    "blocks/section-column.html.j2": "1aeb751ccf1b7d154a27f13b3ecac00eb5fe5dbd0975bc26ae2ffeb2962b722a",
+    "blocks/section-frame.html.j2": "3a5935720a96ba43fd6195faa25609167adaa7e35f8c08d989b53d8a87982f55",
+    "blocks/section-head.html.j2": "b77bc69c4b4f0d2e4a0cd3744190c1758ca7111ad30ea7832f15ceca0118864f",
+    "blocks/section-header.html.j2": "201078b119fc07987ecdae7c79cba570b2d71aaf424042bfaff7775a5928720e",
+    "blocks/shell-content.html.j2": "fcdfe1ffc167d7b1851fdf6a6c34c6cb6a4aed12624ae40cc9ef1953f7fa79a8",
+    "blocks/shell-footer.html.j2": "c6f0af82f53a5bed3e610300bcb9b25c3a81481c394cf281bbc4fc78fce24ce7",
+    "blocks/shell-sidebar.html.j2": "812cd8b72d02a61d1aa101a5057f5a7208f19f6c94c11fd3ce953a98466fbaf4",
+    "blocks/shell-topbar.html.j2": "2e1e0a11c232dec42e7a10442b1a7ad3fec2ae76ad686f543d713d7ef8c12aff",
+    "blocks/shopping-cart.html.j2": "8735184be4ed7e314c66c8884a1e434f52d5b22dc88db3e8a4e415a41f745fec",
+    "blocks/sidebar-nav.html.j2": "c8acd222f2831fbc597a0541720a3385c2c274a266fdeef2aad6687ccb28a6da",
+    "blocks/sidebar-panel.html.j2": "0a69ab1cfed19efd479489a5c77286100b1bc339905b99647ce2d76d474c2f87",
+    "blocks/signup-wizard.html.j2": "936acc64d32826bbe188e048d90e7bf294191b1a046133420460674cf8e2ef9f",
+    "blocks/site-footer.html.j2": "ce91a75907bd906fee2a1ebd5aad8b99ffccecf1278d3c1f28465927b1b6dd55",
+    "blocks/site-header.html.j2": "eb7fd0d4c1627ca5538eee465e1aca5397d2beba6c5617d83f35c31e2ee7c4ed",
+    "blocks/sitemap-footer.html.j2": "60c16339565a40978f569412034b143c228e64771556b9754e242d3e98f8e4f7",
+    "blocks/skeleton-layout.html.j2": "affbe9befdd6501359f4cac7cc011cb149545217b845787e4745e1ec4232327a",
+    "blocks/slot-board.html.j2": "f59eae04a5ef606427e26b1906f760c1c7f52bd0543c5b350c7bb3433922c30e",
+    "blocks/slot-grid.html.j2": "1a92e281f5d1fe0017d328bddaf84bda77534a399f75aee043d4b7a6ae428172",
+    "blocks/stat-figure.html.j2": "6a34b3bfd60516d97f41a6b73ee895f4e9f36ad588458a7c5ea50dd941e395fc",
+    "blocks/stat-tile.html.j2": "987738d52bf0c74572670dcc3dd8ca01ef3c035a746d6d2a90131945b15351f2",
+    "blocks/stats-band.html.j2": "7661c621acd35ef4e6091c72c92d16714442f1c78624052ab940481c33a1cd94",
+    "blocks/stepper.html.j2": "cc7be39d3a5d248affe04c40418a7c5d2e14127b2869dd8ab57ee320dc4bc18f",
+    "blocks/steps-list.html.j2": "b37903bc0f2c26b971d983cb9eb4423cd60cf9d61c987c3311fa3a394735b77a",
+    "blocks/store-hero.html.j2": "fcfa15b387aa7950e89bd6a7919da6e2c509cf6b492df896e88bfa3d5e5f641b",
+    "blocks/store-locations.html.j2": "012b3feab700c7f16318f10d20c0fcf12d9730c385cf44cd053ccb4c679fedac",
+    "blocks/story-dots.html.j2": "ae58801611e6b5ae21386198e8d42bb2578e6fba4a678da2b684ee7fee9dde02",
+    "blocks/story-panel.html.j2": "c4e59bf878492df66eea6c0e7f30c36b9015bf1b22f9cb93bcba7c22ed3c5334",
+    "blocks/story-tabs.html.j2": "f68b7ccb8e5a09e7a6406d52e56e92e80534d979c961802245c61e9edd200947",
+    "blocks/support-channels.html.j2": "5fef127deea9da27b0a994c76602962338e269d576bb5fb8631bed1f5db5ae80",
+    "blocks/switcher-item.html.j2": "9b67b4a4ce5a85fc761f1b1a520b2ab58ab3cda02fd044d64ddf68767451013c",
+    "blocks/switcher.html.j2": "47c98031b73df97928cf96c0001227cd1f0e521ff886c139ea9d70ab73299c63",
+    "blocks/table-toolbar.html.j2": "e70c67a3d9110d8ccd8e2ba7424ee5fb341e626914af305a32d8d9b3db7be437",
+    "blocks/team-grid.html.j2": "d16f441dc3a984970e3917549e7274175ade55795e2efc6c13f00a340927f48e",
+    "blocks/template-grid.html.j2": "806fe6186afaac1a37fcba96c02c589088e1176e3df6999e04ca3a254014e70e",
+    "blocks/testimonial-grid.html.j2": "20280d8c8202ff6dea8fb433b8b173c637816ee0b6fa68ffcf8406af41923548",
+    "blocks/timeline.html.j2": "eeb18869569cc3bf0c30a5f926ffe71868f57905d1543aac9e0513bb550141a5",
+    "blocks/topic-chips.html.j2": "28e4850de5fd329b6efd902b6feb507c7a693fc21a81f44387f19e42b2178460",
+    "blocks/tour-callout.html.j2": "fa85af893e54d35ce582ba6b35fc70e7da224ce847148379b613512d838132b8",
+    "blocks/usage-calculator.html.j2": "7fcdd99cea18bf3789e493d9345ebb23a7e8f021a745af22e2f3b27441220f98",
+    "blocks/usp-strip.html.j2": "3eec28b1bb52861c4ef3bcc33debc1081a08d446df11569d6b0c7f950019a089",
+    "blocks/video-grid.html.j2": "2762591b7863b9de9471a5dfa44bb4557d25c54394b08e92ddb1b5ae023b2225",
+    "blocks/video-modal.html.j2": "5adbf6c76ee90c54d23ff5b3f6bc701895a096da8622041cebcf91143e10008e",
+    "blocks/weighted-title.html.j2": "ee84cc05468136ad95fce05a89e85eb514fe6a1843c80f77643e30e4204acebf",
+    "blocks/zone-rows.html.j2": "b1cdf726c2e34a308f72fa4b41238120d61b1f59c8e2645913a0031d0198d462",
+    "blocks/zone-table.html.j2": "ffe1376895c4d7725d6dee16b4a96a64caad3fa20c4464fa7499e4109eb98434",
+    "package.json": "039d877b90516bab5132ab908b9f4fe64e4f99b885af869158c412ebdbf2d8b7",
+    "py/ui8kit_jinja/__init__.py": "6a86a4e8d34684501d33611f950a9ec4d6a378db6b25b43fc423c0f9c8cb8349",
+    "py/ui8kit_jinja/cn_merge.py": "111393538bb67c177dc5a38cdcf2b3e5c6cc2786cb1d249ec5234ecb2343eae3",
+    "py/ui8kit_jinja/runtime.py": "d567aa4ec601ef1cd34d349648c142e448077231475f8e519ffea2cace944263",
+    "pyproject.toml": "19354331300743414d584b114c4d49218403f0f1b93748c23d0cdde0ee929e90",
+    "README.md": "a2c5d5830c43f09e06da2deef1cf0dd278d8a39c4c6ff1996a4fd954b3f57012",
+    "requirements.txt": "5a9f4ede946d7c960b7f190c65c2f75ae501f07661bb4fe010a9f13c982d07c2",
+    "ui/alert/alert.html.j2": "fd612f30ea73615e604d0e4f9e68c41025f4bb6d62f7d773fa740086e4eaafc7",
+    "ui/alert/alert.variants.json": "cefdda02dd06430011d612938ba847d6303e9996fdcab107817e0d8009ad426d",
+    "ui/badge/badge.html.j2": "ca306faf678ee15734c27163930ca63eb0a8443bc963dbab8942b692e98274ba",
+    "ui/badge/badge.variants.json": "8db00aefbdebfb21d2688390aefbb1c20a6c6e76a1312b9af0715b87d8376c43",
+    "ui/block/block.html.j2": "32d82e83bb4a6be64399c6da5934d764d9e3616fb59a13f15d685c958a94cb64",
+    "ui/block/block.variants.json": "f235a778278b81299c3275421643eeb796884e6e5f2af3ae52bd51eac2f81932",
+    "ui/box/box.html.j2": "3291a5dfc1575d4160ddb5cc3cd7451c3a57ba57397c28f7b36a03618d97e050",
+    "ui/box/box.variants.json": "0154ef69d6a3ad01aa95455dcf87bbd70c3f5e67a0f6a2b36379a1a7ced1601d",
+    "ui/breadcrumb/breadcrumb.html.j2": "0978cd7eb1a88839495d9b530f142ed85bc81310c50425e609c0bb020baacf46",
+    "ui/button-plain/button-plain.html.j2": "5fb66dd99b661495603bed55f528eb48add85dd776f03dd3eec193e4897455a9",
+    "ui/button-plain/button-plain.variants.json": "c4caf3f4e128276ed64e53559e8aaabb18effd2e4322a34f95df644cb467966b",
+    "ui/button/button.html.j2": "a0b200918db8d192484d872b6a5070d55d832c6a2f4dcf40c09830d66ba622bf",
+    "ui/button/button.variants.json": "2ba04bf702fb940c64e69576c49d974e8b746ee6d23561065e77ff45bc41de31",
+    "ui/card/card-content.html.j2": "33085ac8e337f91e37ab3834fe3a3a84d1245ff2e5a96078637b3a0064810720",
+    "ui/card/card-description.html.j2": "2dea8bcaf08b18556f0d8ad134025c6041adea479bd4d8aa4bb15fe1131f6b92",
+    "ui/card/card-footer.html.j2": "1d6a2db0d3308cc180325fb77b5ae95db5610d9c1adc46e17c06b57f23c55237",
+    "ui/card/card-header.html.j2": "6634f1165aff1135d1276ba18214b4db9191f954297ece46674606ecc756ebf5",
+    "ui/card/card-title.html.j2": "9c5416e019644dc4fbcff8251af189b283cf087e21bc728984fd63ae805f73a6",
+    "ui/card/card.html.j2": "24930cf47c0b8b08ee66dfd13ebd63da48198f58a3ef25cff9e3142e7ae3b216",
+    "ui/card/card.variants.json": "39bc2c0110b12ceb6ca91ff2d0ba71637a3af956f584025bbee250b454e717a2",
+    "ui/checkbox/checkbox.html.j2": "dd9d42513f317082484acc424bc4dcc257f90b66048a1fc22874f9da74aa0037",
+    "ui/checkbox/checkbox.variants.json": "1f1ef3389fa04636f53885b610f025e3809f039ce5672eb2eda60e0b4a326556",
+    "ui/container/container.html.j2": "10d30623d52b0740c8ecddca08c9a61f3c9234c72892f8e468478f879dc0d07d",
+    "ui/container/container.variants.json": "dca2ec275adcd27206521396de76f425a8a98a6642ae8a12ffa923eca31d86af",
+    "ui/dialog/dialog.html.j2": "eddc15c20b11f4c1217cf3b901a76260a94583db2288a67fb6fbed90ba4719dc",
+    "ui/dialog/dialog.variants.json": "e3790244e2ba83b1bec43848274cb935c3dd8bcd04ddbe9deba4f51171e49e06",
+    "ui/disclosure/disclosure.html.j2": "f78b35d5bc1135b0edd3f1b85aa333837bf8184cf7da5bdc1e4431a42184188b",
+    "ui/disclosure/disclosure.variants.json": "20163642d62b6953552a02416b434cdfbf277c3254d8934959723789d4b6ec10",
+    "ui/disclosure/summary.html.j2": "cd5357fa6d14b1cbcbb83d3e79e4c4bd9b5d2df8f7a725fd99fc4be91d5b66e8",
+    "ui/disclosure/summary.variants.json": "274973e927d3536baffe8302d7de780e7e78d890cc10823cd111ccc1c9633325",
+    "ui/form/data-list.html.j2": "9004afb1928fe67a817171ad8b9daf867c3a2e1758a3a3330bf7691dac1d789d",
+    "ui/form/data-option.html.j2": "ce98a760128598c2113aaae9792dc04d05292240d06bb6b5ca271cde2532125d",
+    "ui/form/fieldset.html.j2": "05086711c8f3e787adc7e1aa6691ed538750dea5aeb6386d03b384e066dfc65f",
+    "ui/form/fieldset.variants.json": "9f3c3ba117228f83577f10d329384a7706ea068fd7d8a98d4ebb556a018e3158",
+    "ui/form/form-description.html.j2": "5e568f1e3e8ffdfdb2edf6eda70c46fa288e1bd532421995f57a50453488eb80",
+    "ui/form/form-description.variants.json": "fd398ea382acaf37f8dd82a7c67219877d355e85b9f9a954222659adcbdbc85b",
+    "ui/form/form-item.html.j2": "e5a7c6511fa23bc0ea904c57922cd72118ed64a78e9c400ae7d164c9b8cba311",
+    "ui/form/form-item.variants.json": "27c49ce5f42af19b06c9d6f9f3b8683058af44e35c0df5082fa897008b771559",
+    "ui/form/form-message.html.j2": "6a9a6c60f594de23670de26a76986908cea2f954c7eea6b187d72d19ddcd24f7",
+    "ui/form/form-message.variants.json": "281c0272d251ffbd015fe1570879676b6d787b8149ac9129db846448d88b89b4",
+    "ui/form/form.html.j2": "b7a0dc0954467bd4ed675f2cf1364f8e7856c46c1f37ec92468dbd582d7557df",
+    "ui/form/form.variants.json": "2e2b94499ea19b932f158c9417602a070b843d368326be97780b686d565d2e6a",
+    "ui/form/legend.html.j2": "e5c14c18a995367a03f1890c87d0151e06370360e38d411a5d8b763f7ee3329b",
+    "ui/form/legend.variants.json": "58415ce5ebbd97ef3fe8a85adc19f805d5f32408648457284fe2fa1e45e6cb11",
+    "ui/form/meter.html.j2": "01f3b1e665b692636b5717a8fac08ff5a0d54b701ea44c493780deca706952d2",
+    "ui/form/meter.variants.json": "9ea910d4be6378ffccb5ec9d1a92fc8f026b79fcf26968280d8bdd16fc87cb16",
+    "ui/form/output.html.j2": "89fb9a2a168323193843ea72275cb2d4c8fd1363dea38536b739ecf82c5069c6",
+    "ui/form/progress.html.j2": "58318f9d72a87253b412f1facac3faef1f22eb41f866402f36304353a924171d",
+    "ui/form/progress.variants.json": "7d118704a6477aa91feb73e4dcde0980c9639350ec79d801384c4dad3bf2ab8a",
+    "ui/grid/grid-col.html.j2": "a18085061a1c56779921a424496f81d6e445460d36347d3322fa323395cfe128",
+    "ui/grid/grid.html.j2": "2314041484a1e3b0cd9261fa58535caa7a76775e40224a8aa0c71156e11d10a3",
+    "ui/grid/grid.variants.json": "c1819c6d4d725e6137d0b7a053511da50fb26eb6f5b5146de7a0b512da945a74",
+    "ui/group/group.html.j2": "40181b9ca5172f3cbf16d5b907aade38b17345180ed5503d82c29d9eacbaa913",
+    "ui/group/group.variants.json": "c571dd93f7a92a7c31792d7e30c248010934a70c089b65dee7a59afe96c2fb2d",
+    "ui/icon/icon.html.j2": "f8cc4fdef053eb1af38cb8d9f2a0234dc58c511ab3a33a793c0361044257dc06",
+    "ui/icon/icon.variants.json": "1e931f52ab6497706c0ff0f6a01894f209035a70206dc2ef40a89413d2995d28",
+    "ui/iconbadge/icon-badge.html.j2": "0e67cd6e8b9ed9c80869ee0df2c1e76c59f86866428ecdd1082f8378386b462d",
+    "ui/iconbadge/iconbadge.variants.json": "6b24fb827049944852a4bd3380418aa18b1f8acd156c00f551830fa28a006131",
+    "ui/image/image.html.j2": "eccc8b6285986969e97263844532f2bc7dc2fadbba3fc19c7f8dcc857dc408e7",
+    "ui/image/image.variants.json": "6b0a048a1a1a736361ca5bf755c4bc05f9418fd0d1cc8414e511a0861d4d6ce6",
+    "ui/image/picture.html.j2": "218ae6127b957344ed4e910541a9dc15d2638d2f9e4e8125675bd3b7fb601f68",
+    "ui/image/source.html.j2": "57b19940c9d110e88ea0936ee52d23c6a345fc6894cd866b349745694bb90b9b",
+    "ui/inline/inline.html.j2": "405e40711ff9bdc23e92a78e260e1a5158b3603d67d70a27995cb1fabc2574f4",
+    "ui/inline/inline.variants.json": "3b4c0082fea7d2fddef77e9a24cdc5ee0f2e0676626ca6a9827e373710b5d646",
+    "ui/input/input.html.j2": "0b2452121cfd475802b8c01fe6cb30478a6be46df4ef0dc3144860a6bcbca780",
+    "ui/input/input.variants.json": "df29f2ffc799d56eeda94ceaabe15e168179fdc7b6d1aafeab2c4eb330014d04",
+    "ui/label/label.html.j2": "eb5caf3797c4a4b67a23ddb248364f853a17517b3971867263cb3eb7d991153a",
+    "ui/label/label.variants.json": "a29b14935c0aacac086db0180d99159c2dd9105f9e05331a247b2e36234e5e54",
+    "ui/linebreak/break.html.j2": "03d9591cf184ebeec82d1d2cb2253e79f86184e060dde96ca80317eb65f030ae",
+    "ui/linebreak/linebreak.variants.json": "ee15b0b3f21340688ceaf1d0640dab60a091ba013c44470c7de1b4d524e89dad",
+    "ui/link-plain/link-plain.html.j2": "8364681494d80190a51587d1d2e436a7cc3e32ba0b131f7358a4cad3f2e16ac2",
+    "ui/link-plain/link-plain.variants.json": "f2f7a34d5f33118736c60148e426083dd89cf8699cf112fbb1a00da5658dde82",
+    "ui/link/link.html.j2": "252ead281e461962f48068504f9fa1a0092a95e85a0ca18259b4fd1b1a5bd6ed",
+    "ui/link/link.variants.json": "4ebce197e49566a1ed9bf537e8eb65b1c86167c36be1a8b075d24e4455c37bd4",
+    "ui/list/list-item.html.j2": "54b38bc6ae70e71549c353e4b4eb645a10c308b664c934b695043d60ead21b51",
+    "ui/list/list.html.j2": "ae37f86c15095793631cf2342f722a28f947e706cb7dce246dfeb0b87f94c39f",
+    "ui/list/list.variants.json": "286007571632d86eef167a1ca3f9ee3338085479ff1d6bbe3bc308436b8bfa57",
+    "ui/lucide-icon/lucide-icon.html.j2": "aa99c567b4cd206e97846b1536f700ca97f5ca87620dc7665f103b47c4933ab0",
+    "ui/lucide-icon/lucide-icons.json": "3fc859a5369f955aa9ec4af16960f8b6ca7c67416d7716f0fc78b50abedf5ba9",
+    "ui/radio/radio.html.j2": "97343c2bef7bac89431f2e9bd60eaadb3b78023b941c1ddbbac5804cc091a5da",
+    "ui/radio/radio.variants.json": "e260efee6e8cb1082a2cfa5fd54e1554e45c8c094850758476a692c978066fdb",
+    "ui/range/range.html.j2": "fb45eeb53bc0ebc5072ec61b78ba15c7a6f7dcc2060a5840b77bb0f9e08fe7c1",
+    "ui/range/range.variants.json": "9d90b66e2a73778049cc1850587cd6c24f01d75f64c2a981f20e54de3fea7e8a",
+    "ui/select/opt-group.html.j2": "f950be4f2221ff321a06f36b91c89f388aa95dce03a29858e52eb1a47e15959e",
+    "ui/select/select-option.html.j2": "e0b0612498d37e3be492233e89206438c8b0fa1d21f3e69ac53705837df36ae7",
+    "ui/select/select.html.j2": "74252c288fb4d6aabee5656c2ba04b1c3cfd5a3450b2c30fa8e5142bf42dd0bc",
+    "ui/select/select.variants.json": "6bb9388ceb4a2bbcd2b70292a081614920f6e118073436d93f924a3282217bed",
+    "ui/separator/separator.html.j2": "96b03c679b925de8c84e8a123ee237fc2c20beb97de89ce67d2f447691366da3",
+    "ui/separator/separator.variants.json": "f1f7562cb3b082ea0054378ef6754585e32fd1ebbdeeb37ca222860c03271f47",
+    "ui/sheet/sheet-close.html.j2": "53be5a987edfe42413d6ecd710038daa3ce35031b2af20aa27697d7a8f7801fa",
+    "ui/sheet/sheet-trigger.html.j2": "37e6c63874aed1f67d89b93e5d262abf3b0f192af8db3090953ee3984dca2a71",
+    "ui/sheet/sheet.html.j2": "bbf30c5e5031a91b28bdc7e53e63abe043c85a076821183ecf97a36db4d41f06",
+    "ui/sheet/sheet.variants.json": "cd1406a8461a53512853718fccd2cc669f7bf5e4cd16d89d9fbae890760e4bb4",
+    "ui/sheet/sheettrigger.variants.json": "79e43efa27faca8ebcb3c9c38cbd187d2a898df4fc22534a21cbe722189ef138",
+    "ui/skeleton/skeleton.html.j2": "a45a77a58e36c1b13e3b68955b05a0ddd6ddfc2e42678ce8cec7f6a554833683",
+    "ui/skeleton/skeleton.variants.json": "ca79242c112ff2b714b0c2ec16ab07ee402fa6b23df3f7cf0c3b6f153dc788e8",
+    "ui/stack/stack.html.j2": "0d901851befc5ab045fb61072fced8e0e0f5e273b52c15658f59d65be69fbe7e",
+    "ui/stack/stack.variants.json": "aa6a71c5a5d5bb664149c92107daa0cfd23ae0f8904265e02adfd284f82bd797",
+    "ui/switch/switch.html.j2": "388577bc4c5ac3156e1d60f74c617ba954ea711e0422786f3b694fef41b19d59",
+    "ui/switch/switch.variants.json": "7d3f004339b9af0abeb81a8b9acb32c8e8a87c2bb5be498867a57fd5b1347539",
+    "ui/table/table-body.html.j2": "f17bf820850f71e82341086ebba0f343048eace61fdd90b3800555c0c4033695",
+    "ui/table/table-caption.html.j2": "a6da718ebc1ab1d07d34ba488d97781899d4b6621993f4d8cf513a97bba53695",
+    "ui/table/table-cell.html.j2": "35c22d506d047ae1ee9b24ad35c86bb712dfd93e9b11080b823912b5bb5485ae",
+    "ui/table/table-cell.variants.json": "f0be9b8640964cfae0df8d4477eca8f53e21d67e9113baf3070ab86c7432aff5",
+    "ui/table/table-col-group.html.j2": "bf0ed3edf2ea3806a7e08509f624488a04590cc10933a6b9529794b37547d261",
+    "ui/table/table-col.html.j2": "9d7f31251cd1500cd90f67e142b2fcf7f96e0c7fc8ad49778839f78d4651ad82",
+    "ui/table/table-foot.html.j2": "0350c6f73ab24239f6fd64b9d625c790931f1aa12cf5cd93ddee1eee6be1e0e0",
+    "ui/table/table-head-cell.html.j2": "9bb4f36fbe698f140531a51349cfdf05e839888c9252b53017086bb428597890",
+    "ui/table/table-head-cell.variants.json": "fb3eed1db6b23d7e4ad52140ce79abf7372f751c0b3182090b840dd0eaee7f5a",
+    "ui/table/table-head.html.j2": "29672d82fd04f053d9bfb32db4899d828b6e6f86b2e08628ef64ba5b274b3f05",
+    "ui/table/table-row.html.j2": "77f97590c1109fb7c022ce84a80b7474d0c164b9fa650b77c710d261c2865c98",
+    "ui/table/table.html.j2": "815481e6d14768b992ab89a6f5d54882640213361acc7723cc459702086f63c3",
+    "ui/table/table.variants.json": "4ac5d1d28b8709903feadba166706419d070192af753721739efbba2ab5373dd",
+    "ui/text/text.html.j2": "163838c13b338f4ddc54681056ae47b4346aa5bf69e8b528a4e2ad1ff8ac61bc",
+    "ui/text/text.variants.json": "820b1e16356e614f3d08fd85cd57aac44afa4e53b2f4b020bbf94e5a80816abe",
+    "ui/textarea/textarea.html.j2": "01b3600fd1163dca58136561b1843b77543573c5373696091410629431027225",
+    "ui/textarea/textarea.variants.json": "a733e48a9ed18b409325ea585f3a58e5f356afd064c625072063be1526f7bf02",
+    "ui/themetoggle/theme-toggle.html.j2": "2d2a279930492e21b3664b4e8cf37f38568a37d180a61a1085faa3e5aa1a8d91",
+    "ui/themetoggle/themetoggle.variants.json": "9797fd2291d4997d3ed5e373439cb6340284553f2f398227d400fe14a40f1459",
+    "ui/title/title.html.j2": "655d400f69afe35789f6d73874450faf1bc1d5087546e0bc6d84ef2b55b5a37e",
+    "ui/title/title.variants.json": "ebaf2491ef8666cc5e0d20e8ba02935665ebf07f1adbcea9432cb8851f92c8a2"
+  }
+}
diff --git a/packages/jinja2/ui/README.md b/packages/jinja2/ui/README.md
new file mode 100644
index 0000000..3d74346
--- /dev/null
+++ b/packages/jinja2/ui/README.md
@@ -0,0 +1,18 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+# ui8kit-jinja2-ui
+
+[Jinja2](https://jinja.palletsprojects.com) templates **generated** by xgen from `xgen/specs`: 40 bricks, 72 parts, and the blocks.
+
+Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`.
+
+```python
+import sys; sys.path.insert(0, "/path/to/packages/jinja2/ui/py")
+from ui8kit_jinja import environment
+env = environment("/path/to/packages/jinja2/ui")
+print(env.get_template("ui/button/button.html.j2").render(p={"Variant": "outline"}, children="Save"))
+```
+
+In a template: `{{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline'}, 'children': label}) }}`. Brick props use the canonical
+names (`Variant`, `Class`, `Attrs`), block props the JSON names of the TypeScript props (`title`, `className`); `children` is markup.
+
+The classes are the same Tailwind v4 utilities as the Svelte, React, Vue and Solid packages: import their `styles/index.css` in the app CSS and add `@source` for this folder.
diff --git a/packages/jinja2/ui/bin/parity.py b/packages/jinja2/ui/bin/parity.py
new file mode 100644
index 0000000..b0c92ec
--- /dev/null
+++ b/packages/jinja2/ui/bin/parity.py
@@ -0,0 +1,22 @@
+# Code generated by xgen. DO NOT EDIT.
+# Source: xgen/runtimes/jinja2/assets/parity.py
+"""Renders generated templates from JSON: stdin [{"template": "ui/button/button.html.j2", "vars": {"p": {...}, "children": "x"}}],
+stdout the HTML of each (a failure is "ERROR: <message>"). Used by the parity check of xgen."""
+
+import json
+import os
+import sys
+
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+sys.path.insert(0, os.path.join(ROOT, "py"))
+
+from ui8kit_jinja import environment  # noqa: E402
+
+env = environment(ROOT)
+out = []
+for r in json.load(sys.stdin):
+    try:
+        out.append(env.get_template(r["template"]).render(r.get("vars") or {}))
+    except Exception as e:  # noqa: BLE001
+        out.append(f"ERROR: {type(e).__name__}: {e}")
+sys.stdout.write(json.dumps(out, ensure_ascii=False) + "\n")
diff --git a/packages/jinja2/ui/blocks/about-company.html.j2 b/packages/jinja2/ui/blocks/about-company.html.j2
new file mode 100644
index 0000000..d689eef
--- /dev/null
+++ b/packages/jinja2/ui/blocks/about-company.html.j2
@@ -0,0 +1,64 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/about-company.json
+    The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout (split: the pictures beside the text, stacked: the pictures under it), tone, density.
+    Props (p): id, title, lead, stats, values, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_stats = ui_def(p['stats'], none) -%}
+{%- set v_values = ui_def(p['values'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'split') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_10 -%}
+  {%- set c_11 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4'}}) }}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4', 'className': ui_cnv(['mt-8'])}}) }}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4'}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-3 gap-4', 'Attrs': ui_attrs(['data-testid', 'strip'])}, 'children': c_11}) }}
+{%- endset -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_gt(ui_len(v_stats), 0)) %}
+    {%- set c_4 -%}
+      {%- for v_s in ui_l(v_stats) %}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_1}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Attrs': ui_attrs(['data-testid', 'stat'])}, 'children': c_3}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '2-4', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'stats'])}, 'children': c_4}) }}
+  {%- endif %}
+  {%- if ui_t(ui_gt(ui_len(v_values), 0)) %}
+    {%- set c_9 -%}
+      {%- for v_v in ui_l(v_values) %}
+        {%- set c_8 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_v, ['icon'])), 'Size': 20}}) }}
+          {%- set c_7 -%}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_v, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}) }}
+            {%- set c_6 -%}
+              {{ ui_text(ui_get(v_v, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_7}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'border-t border-border pt-4', 'Attrs': ui_attrs(['data-testid', 'value'])}, 'children': c_8}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['grid grid-cols-1 gap-4', ('md:grid-cols-3' if ui_t(ui_eq(v_layout, 'stacked')) else '')])), 'Attrs': ui_attrs(['data-testid', 'values'])}, 'children': c_9}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'layout': ('split' if ui_t(ui_eq(v_layout, 'split')) else 'stack'), 'media': {'show': true, 'side': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_10}, 'children': c_12}) }}
diff --git a/packages/jinja2/ui/blocks/about-me.html.j2 b/packages/jinja2/ui/blocks/about-me.html.j2
new file mode 100644
index 0000000..2377057
--- /dev/null
+++ b/packages/jinja2/ui/blocks/about-me.html.j2
@@ -0,0 +1,65 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/about-me.json
+    A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, facts, skills, labels, actions, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_facts = ui_def(p['facts'], none) -%}
+{%- set v_skills = ui_def(p['skills'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'facts') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'start') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_10 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4'}}) }}
+{%- endset -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(v_layout, 'facts')) %}
+    {%- if ui_t(ui_gt(ui_len(v_facts), 0)) %}
+      {%- set c_4 -%}
+        {%- for v_f in ui_l(v_facts) %}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_f, ['label'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_f, ['value'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'rounded bg-card inset-ring inset-ring-border flex flex-col gap-0 p-4', 'Attrs': ui_attrs(['data-testid', 'fact'])}, 'children': c_3}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2', 'Attrs': ui_attrs(['data-testid', 'facts'])}, 'children': c_4}) }}
+    {%- endif %}
+  {%- elif ui_t(ui_gt(ui_len(v_skills), 0)) %}
+    {%- set c_9 -%}
+      {%- for v_s in ui_l(v_skills) %}
+        {%- set c_8 -%}
+          {%- set c_7 -%}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_s, ['label'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}) }}
+            {%- set c_6 -%}
+              {{ ui_text(ui_tpl(ui_get(v_labels, ['level']), [ui_get(v_s, ['level'])])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Justify': 'between'}, 'children': c_7}) }}
+          {{ ui_include('ui/form/progress.html.j2', {'p': {'Value': ui_s(ui_str(ui_get(v_s, ['level']))), 'Max': '100', 'Attrs': ui_attrs(['aria-label', ui_get(v_s, ['label'])])}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'skill'])}, 'children': c_8}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'skills'])}, 'children': c_9}) }}
+  {%- endif %}
+  {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel, 'aside': f_10}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/action-group.html.j2 b/packages/jinja2/ui/blocks/action-group.html.j2
new file mode 100644
index 0000000..d33f8a9
--- /dev/null
+++ b/packages/jinja2/ui/blocks/action-group.html.j2
@@ -0,0 +1,22 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/action-group.json
+    One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not handlers: the page decides what they open.
+    Props (p): primary, primaryHref, secondary, secondaryHref, align. -#}
+{%- set v_primary = ui_def(p['primary'], none) -%}
+{%- set v_primaryHref = ui_def(p['primaryHref'], none) -%}
+{%- set v_secondary = ui_def(p['secondary'], none) -%}
+{%- set v_secondaryHref = ui_def(p['secondaryHref'], none) -%}
+{%- set v_align = ui_def(p['align'], 'start') -%}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_primary) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Href': ui_s(v_primaryHref), 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_1}) }}
+  {%- if ui_t(v_secondary) %}
+    {%- set c_2 -%}
+      {{ ui_text(v_secondary) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Href': ui_s(v_secondaryHref), 'Attrs': ui_attrs(['data-testid', 'action-secondary'])}, 'children': c_2}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': ui_s(('center' if ui_t(ui_eq(v_align, 'center')) else 'start')), 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-slot', 'action-group'])}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/activity-feed.html.j2 b/packages/jinja2/ui/blocks/activity-feed.html.j2
new file mode 100644
index 0000000..29dcc83
--- /dev/null
+++ b/packages/jinja2/ui/blocks/activity-feed.html.j2
@@ -0,0 +1,53 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/activity-feed.json
+    A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout (timeline, list), density (default, compact), tone (default, muted).
+    Props (p): id, title, text, events, empty, layout, density, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_events = ui_def(p['events'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_layout = ui_def(p['layout'], 'timeline') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- set c_7 -%}
+      {%- if ui_t(ui_eq(ui_len(v_events), 0)) %}
+        {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'activity', 'title': v_empty}}) }}
+      {%- elif ui_t(ui_eq(v_layout, 'timeline')) %}
+        {{ ui_include('blocks/timeline.html.j2', {'p': {'items': v_events}}) }}
+      {%- else %}
+        {%- set c_6 -%}
+          {%- for v_e in ui_l(v_events) %}
+            {%- set c_5 -%}
+              {%- set c_3 -%}
+                {%- set c_1 -%}
+                  {{ ui_text(ui_get(v_e, ['title'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+                {%- if ui_t(ui_eq(v_density, 'default')) %}
+                  {%- set c_2 -%}
+                    {{ ui_text(ui_get(v_e, ['text'])) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+                {%- endif %}
+              {%- endset -%}
+              {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_3}) }}
+              {%- set c_4 -%}
+                {{ ui_text(ui_get(v_e, ['time'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'shrink-0 text-muted-foreground'}, 'children': c_4}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex items-start justify-between gap-4 border-b border-border last:border-0', ('py-2' if ui_t(ui_eq(v_density, 'compact')) else 'py-4')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_5}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('blocks/panel.html.j2', {'p': {'title': v_title, 'description': v_text, 'id': v_id, 'className': ui_cnv([('bg-muted' if ui_t(ui_eq(v_tone, 'muted')) else '')])}, 'children': c_7}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4 py-8', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_8}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else (ui_tpl('{0}-t', [v_id]) if ui_t(ui_and([v_title, v_id])) else none)), 'data-testid', 'panel-section', 'aria-label', v_landmarkLabel])}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/announcement-bar.html.j2 b/packages/jinja2/ui/blocks/announcement-bar.html.j2
new file mode 100644
index 0000000..02479ca
--- /dev/null
+++ b/packages/jinja2/ui/blocks/announcement-bar.html.j2
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/announcement-bar.json
+    A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default, muted), layout (center, split), dismiss (show, hide).
+    Props (p): label, text, cta, ctaHref, icon, dismissLabel, tone, layout, dismiss, badgeLabel, badge, position, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_cta = ui_def(p['cta'], none) -%}
+{%- set v_ctaHref = ui_def(p['ctaHref'], none) -%}
+{%- set v_icon = ui_def(p['icon'], 'megaphone') -%}
+{%- set v_dismissLabel = ui_def(p['dismissLabel'], none) -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_layout = ui_def(p['layout'], 'center') -%}
+{%- set v_dismiss = ui_def(p['dismiss'], 'hide') -%}
+{%- set v_badgeLabel = ui_def(p['badgeLabel'], none) -%}
+{%- set v_badge = ui_def(p['badge'], 'none') -%}
+{%- set v_position = ui_def(p['position'], 'top') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_7 -%}
+  {%- set c_6 -%}
+    {%- set c_4 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(v_icon), 'Size': 16}}) }}
+      {%- if ui_t(ui_eq(v_badge, 'show')) %}
+        {%- set c_1 -%}
+          {{ ui_text(v_badgeLabel) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current', 'Attrs': ui_attrs(['data-testid', 'announcement-badge'])}, 'children': c_1}) }}
+      {%- endif %}
+      {%- set c_2 -%}
+        {{ ui_text(v_text) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_2}) }}
+      {%- if ui_t(v_cta) %}
+        {%- set c_3 -%}
+          {{ ui_text(v_cta) }}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/link-plain/link-plain.html.j2', {'p': {'Href': ui_s(v_ctaHref), 'Class': 'inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4', 'Attrs': ui_attrs(['data-testid', 'announcement-cta'])}, 'children': c_3}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': ui_s(ui_cnv(['min-w-0 flex-wrap', ('ml-auto' if ui_t(ui_and([ui_eq(v_layout, 'center'), ui_eq(v_dismiss, 'show')])) else '')]))}, 'children': c_4}) }}
+    {%- if ui_t(ui_eq(v_dismiss, 'show')) %}
+      {%- set c_5 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'x', 'Size': 16}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Class': 'ml-auto shrink-0 text-current', 'Type': 'button', 'Attrs': ui_attrs(['aria-label', v_dismissLabel, 'data-testid', 'dismiss'])}, 'children': c_5}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex items-center gap-4 py-2', ('justify-between' if ui_t(ui_eq(v_layout, 'split')) else 'justify-center')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_6}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'aside', 'Class': ui_s(ui_cnv(['w-full', ('sticky bottom-0 z-40 border-t border-border' if ui_t(ui_eq(v_position, 'bottom')) else ''), ('bg-muted text-foreground' if ui_t(ui_eq(v_tone, 'muted')) else 'bg-primary text-primary-foreground')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', 'announcement', 'data-layout', v_layout])}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/app-main.html.j2 b/packages/jinja2/ui/blocks/app-main.html.j2
new file mode 100644
index 0000000..94769fb
--- /dev/null
+++ b/packages/jinja2/ui/blocks/app-main.html.j2
@@ -0,0 +1,51 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/app-main.json
+    The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel when `activity` is given).
+    Props (p): id, title, metrics, chart, activity, cols, density. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_metrics = ui_def(p['metrics'], none) -%}
+{%- set v_chart = ui_def(p['chart'], none) -%}
+{%- set v_activity = ui_def(p['activity'], none) -%}
+{%- set v_cols = ui_def(p['cols'], '1-2') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set c_8 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}) }}
+  {%- if ui_t(ui_gt(ui_len(v_metrics), 0)) %}
+    {%- set c_3 -%}
+      {%- for v_m in ui_l(v_metrics) %}
+        {%- set c_2 -%}
+          {{ ui_include('blocks/stat-tile.html.j2', {'p': {'label': ui_get(v_m, ['label']), 'value': ui_get(v_m, ['value']), 'icon': ui_get(v_m, ['icon']), 'hint': ui_get(v_m, ['hint'])}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_2}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(v_cols), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_3}) }}
+  {%- endif %}
+  {%- if ui_t(v_activity) %}
+    {%- set c_6 -%}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_chart, ['series'])), 0)) %}
+        {%- set c_4 -%}
+          {{ ui_include('blocks/bar-chart.html.j2', {'p': {'bars': ui_get(v_chart, ['series']), 'label': ui_get(v_chart, ['summary']), 'height': 144}}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/panel.html.j2', {'p': {'title': ui_get(v_chart, ['title']), 'description': ui_get(v_chart, ['text']), 'id': ui_tpl('{0}-chart', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_4}) }}
+      {%- endif %}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_activity, ['events'])), 0)) %}
+        {%- set c_5 -%}
+          {{ ui_include('blocks/timeline.html.j2', {'p': {'items': ui_get(v_activity, ['events'])}}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/panel.html.j2', {'p': {'title': ui_get(v_activity, ['title']), 'description': ui_get(v_activity, ['text']), 'id': ui_tpl('{0}-feed', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_5}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-2', 'Class': 'items-stretch gap-4'}, 'children': c_6}) }}
+  {%- elif ui_t(ui_gt(ui_len(ui_get(v_chart, ['series'])), 0)) %}
+    {%- set c_7 -%}
+      {{ ui_include('blocks/bar-chart.html.j2', {'p': {'bars': ui_get(v_chart, ['series']), 'label': ui_get(v_chart, ['summary']), 'height': 144}}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/panel.html.j2', {'p': {'title': ui_get(v_chart, ['title']), 'description': ui_get(v_chart, ['text']), 'id': ui_tpl('{0}-chart', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_7}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': ui_s(('4' if ui_t(ui_eq(v_density, 'compact')) else '6')), 'Align': 'stretch', 'Class': 'min-w-0', 'Attrs': ui_attrs(['data-testid', 'app-main'])}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/app-shell.html.j2 b/packages/jinja2/ui/blocks/app-shell.html.j2
new file mode 100644
index 0000000..dc7ae9f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/app-shell.html.j2
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/app-shell.json
+    The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar is a port contract.
+    Props (p): id, title, nav, user, search, metrics, chart, activity, layout, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_nav = ui_def(p['nav'], none) -%}
+{%- set v_user = ui_def(p['user'], none) -%}
+{%- set v_search = ui_def(p['search'], none) -%}
+{%- set v_metrics = ui_def(p['metrics'], none) -%}
+{%- set v_chart = ui_def(p['chart'], none) -%}
+{%- set v_activity = ui_def(p['activity'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'sidebar') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(v_layout, 'top')) %}
+    {%- set c_2 -%}
+      {{ ui_include('blocks/nav-bar.html.j2', {'p': {'label': ui_get(v_nav, ['label']), 'brand': ui_get(v_nav, ['brand']), 'links': ui_get(v_nav, ['links']), 'current': ui_get(v_nav, ['current']), 'search': v_search, 'actions': {'mode': 'none'}, 'layout': 'search', 'landmarkLabel': v_landmarkLabel}}) }}
+      {%- set c_1 -%}
+        {{ ui_include('blocks/app-main.html.j2', {'p': {'id': v_id, 'title': v_title, 'metrics': v_metrics, 'chart': v_chart, 'cols': '1-4', 'activity': v_activity, 'density': v_density}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'pb-8'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_1}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_2}) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- if ui_t(ui_eq(v_layout, 'sidebar')) %}
+        {%- set c_3 -%}
+          {{ ui_include('blocks/sidebar-nav.html.j2', {'p': {'label': ui_get(v_nav, ['label']), 'brand': ui_get(v_nav, ['brand']), 'links': ui_get(v_nav, ['links']), 'current': ui_get(v_nav, ['current']), 'userName': ui_get(v_user, ['name']), 'userEmail': ui_get(v_user, ['email']), 'density': v_density, 'landmarkLabel': v_landmarkLabel}}) }}
+          {{ ui_include('blocks/app-main.html.j2', {'p': {'id': v_id, 'title': v_title, 'metrics': v_metrics, 'chart': v_chart, 'activity': v_activity, 'density': v_density}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1', 'Class': 'items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]'}, 'children': c_3}) }}
+      {%- else %}
+        {%- set c_9 -%}
+          {{ ui_include('blocks/sidebar-nav.html.j2', {'p': {'label': ui_get(v_nav, ['label']), 'brand': ui_get(v_nav, ['brand']), 'links': ui_get(v_nav, ['links']), 'current': ui_get(v_nav, ['current']), 'userName': ui_get(v_user, ['name']), 'userEmail': ui_get(v_user, ['email']), 'width': 'compact', 'density': v_density, 'landmarkLabel': v_landmarkLabel}}) }}
+          {%- if ui_t(ui_gt(ui_len(ui_get(v_activity, ['events'])), 0)) %}
+            {%- set c_8 -%}
+              {%- set c_7 -%}
+                {%- for v_e in ui_l(ui_get(v_activity, ['events'])) %}
+                  {%- set c_6 -%}
+                    {%- set c_4 -%}
+                      {{ ui_text(ui_get(v_e, ['title'])) }}
+                    {%- endset -%}
+                    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}) }}
+                    {%- set c_5 -%}
+                      {{ ui_text(ui_get(v_e, ['time'])) }}
+                    {%- endset -%}
+                    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex flex-col gap-2', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}) }}
+                {%- endfor %}
+              {%- endset -%}
+              {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/panel.html.j2', {'p': {'title': ui_get(v_activity, ['title']), 'description': ui_get(v_activity, ['text']), 'id': ui_tpl('{0}-list', [v_id])}, 'children': c_8}) }}
+          {%- endif %}
+          {{ ui_include('blocks/app-main.html.j2', {'p': {'id': v_id, 'title': v_title, 'metrics': v_metrics, 'chart': v_chart, 'density': 'compact'}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-3', 'Class': 'items-start gap-4'}, 'children': c_9}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-8'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': 'bg-background', 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else ui_tpl('{0}-title', [v_id])), 'data-testid', 'app-shell', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/article-block.html.j2 b/packages/jinja2/ui/blocks/article-block.html.j2
new file mode 100644
index 0000000..463966c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/article-block.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/article-block.json
+    A self-contained item (a review, a card, a project) in its own file: Block tag article.
+    Props (p): testid, className; children: markup. -#}
+{%- set v_testid = ui_def(p['testid'], none) -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv([ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-testid', v_testid])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/article-body.html.j2 b/packages/jinja2/ui/blocks/article-body.html.j2
new file mode 100644
index 0000000..46af17d
--- /dev/null
+++ b/packages/jinja2/ui/blocks/article-body.html.j2
@@ -0,0 +1,71 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/article-body.json
+    A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting the section being read is a port contract.
+    Props (p): id, title, sections, empty, tocTitle, layout, quotes, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_sections = ui_def(p['sections'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_tocTitle = ui_def(p['tocTitle'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'column') -%}
+{%- set v_quotes = ui_def(p['quotes'], 'show') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_13 -%}
+  {%- if ui_t(ui_eq(ui_len(v_sections), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'file-text', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_12 -%}
+      {%- if ui_t(ui_eq(v_layout, 'toc')) %}
+        {%- set c_6 -%}
+          {%- set c_5 -%}
+            {%- set c_1 -%}
+              {{ ui_text(v_tocTitle) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+            {%- set c_4 -%}
+              {%- for v_s in ui_l(v_sections) %}
+                {%- set c_3 -%}
+                  {%- set c_2 -%}
+                    {{ ui_text(ui_get(v_s, ['title'])) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_tpl('#{0}-{1}', [v_id, ui_get(v_s, ['id'])])), 'Variant': 'default', 'Class': 'text-sm text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'toc-link'])}, 'children': c_2}) }}
+                {%- endset -%}
+                {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_3}) }}
+              {%- endfor %}
+            {%- endset -%}
+            {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [v_tocTitle, v_landmarkLabel])) if ui_t(v_landmarkLabel) else v_tocTitle), 'className': ui_cnv(['md:sticky md:top-4']), 'testid': 'toc'}, 'children': c_6}) }}
+      {%- endif %}
+      {%- set c_11 -%}
+        {%- for v_s in ui_l(v_sections) %}
+          {%- set c_10 -%}
+            {%- set c_7 -%}
+              {{ ui_text(ui_get(v_s, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_7}) }}
+            {%- set c_8 -%}
+              {{ ui_text(ui_get(v_s, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base'}, 'children': c_8}) }}
+            {%- if ui_t(ui_eq(v_quotes, 'show')) %}
+              {%- if ui_t(ui_get(v_s, ['quote'])) %}
+                {%- set c_9 -%}
+                  {{ ui_text(ui_get(v_s, ['quote'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Tag': 'blockquote', 'Class': 'm-0 border-l border-border pl-4 text-lg', 'Attrs': ui_attrs(['data-testid', 'quote'])}, 'children': c_9}) }}
+              {%- endif %}
+            {%- endif %}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex flex-col gap-4', 'Attrs': ui_attrs(['id', ui_tpl('{0}-{1}', [v_id, ui_get(v_s, ['id'])]), 'data-testid', 'item'])}, 'children': c_10}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '8', 'Align': 'stretch', 'Class': 'mx-auto w-full max-w-2xl min-w-0', 'Attrs': ui_attrs(['data-testid', 'article'])}, 'children': c_11}) }}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1', 'Class': ui_s(ui_cnv(['items-start gap-8', ('md:grid-cols-[14rem_minmax(0,1fr)]' if ui_t(ui_eq(v_layout, 'toc')) else '')]))}, 'children': c_12}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_13}) }}
diff --git a/packages/jinja2/ui/blocks/auth-card.html.j2 b/packages/jinja2/ui/blocks/auth-card.html.j2
new file mode 100644
index 0000000..3d32397
--- /dev/null
+++ b/packages/jinja2/ui/blocks/auth-card.html.j2
@@ -0,0 +1,89 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/auth-card.json
+    A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button, optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout (card, plain), social (none, show).
+    Props (p): id, title, text, submit, switchText, switchLink, switchHref, labels, mode, layout, social, level, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_submit = ui_def(p['submit'], none) -%}
+{%- set v_switchText = ui_def(p['switchText'], none) -%}
+{%- set v_switchLink = ui_def(p['switchLink'], none) -%}
+{%- set v_switchHref = ui_def(p['switchHref'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_mode = ui_def(p['mode'], 'signin') -%}
+{%- set v_layout = ui_def(p['layout'], 'card') -%}
+{%- set v_social = ui_def(p['social'], 'none') -%}
+{%- set v_level = ui_def(p['level'], 2) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_16 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(v_level), 'Size': '2xl', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_text(v_text) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_3}) }}
+  {%- if ui_t(ui_and([ui_eq(v_social, 'first'), not (ui_eq(v_social, 'none')), not (ui_eq(v_mode, 'reset')), not (ui_eq(v_mode, 'magic'))])) %}
+    {%- set c_8 -%}
+      {%- set c_5 -%}
+        {{ ui_include('ui/separator/separator.html.j2', {'p': {'Class': 'flex-1'}}) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['divider'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+        {{ ui_include('ui/separator/separator.html.j2', {'p': {'Class': 'flex-1'}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_5}) }}
+      {%- set c_6 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'key-round', 'Size': 16}}) }}
+        {{ ui_text(ui_get(v_labels, ['passkey'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'w-full'}, 'children': c_6}) }}
+      {%- set c_7 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'mail', 'Size': 16}}) }}
+        {{ ui_text(ui_get(v_labels, ['magic'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'w-full'}, 'children': c_7}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Attrs': ui_attrs(['data-testid', 'social'])}, 'children': c_8}) }}
+  {%- endif %}
+  {{ ui_include('blocks/auth-form.html.j2', {'p': {'id': v_id, 'mode': v_mode, 'labels': v_labels, 'submit': v_submit}}) }}
+  {%- if ui_t(ui_and([not (ui_eq(v_social, 'first')), not (ui_eq(v_social, 'none')), not (ui_eq(v_mode, 'reset')), not (ui_eq(v_mode, 'magic'))])) %}
+    {%- set c_13 -%}
+      {%- set c_10 -%}
+        {{ ui_include('ui/separator/separator.html.j2', {'p': {'Class': 'flex-1'}}) }}
+        {%- set c_9 -%}
+          {{ ui_text(ui_get(v_labels, ['divider'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_9}) }}
+        {{ ui_include('ui/separator/separator.html.j2', {'p': {'Class': 'flex-1'}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_10}) }}
+      {%- set c_11 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'key-round', 'Size': 16}}) }}
+        {{ ui_text(ui_get(v_labels, ['passkey'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'w-full'}, 'children': c_11}) }}
+      {%- set c_12 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'mail', 'Size': 16}}) }}
+        {{ ui_text(ui_get(v_labels, ['magic'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'w-full'}, 'children': c_12}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Attrs': ui_attrs(['data-testid', 'social'])}, 'children': c_13}) }}
+  {%- endif %}
+  {%- set c_15 -%}
+    {{ ui_text(v_switchText) }}
+    {{ ui_text(' ') }}
+    {%- set c_14 -%}
+      {{ ui_text(v_switchLink) }}
+    {%- endset -%}
+    {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(v_switchHref), 'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'switch'])}, 'children': c_14}) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-center text-muted-foreground'}, 'children': c_15}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv(['flex w-full flex-col gap-6', ('rounded bg-card p-6 inset-ring inset-ring-border' if ui_t(ui_eq(v_layout, 'card')) else '')])), 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else ui_tpl('{0}-title', [v_id])), 'data-testid', 'auth-card', 'data-mode', v_mode, 'aria-label', v_landmarkLabel])}, 'children': c_16}) }}
diff --git a/packages/jinja2/ui/blocks/auth-form.html.j2 b/packages/jinja2/ui/blocks/auth-form.html.j2
new file mode 100644
index 0000000..32f3d72
--- /dev/null
+++ b/packages/jinja2/ui/blocks/auth-form.html.j2
@@ -0,0 +1,58 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/auth-form.json
+    The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot link, the terms, the submit button.
+    Props (p): id, mode, labels, submit. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_mode = ui_def(p['mode'], 'signin') -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_submit = ui_def(p['submit'], none) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(v_mode, 'signup')) %}
+    {%- set c_1 -%}
+      {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'name', 'Autocomplete': 'name', 'Attrs': ui_attrs(['id', ui_tpl('{0}-name', [v_id]), 'data-testid', 'field'])}}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['name']), 'htmlFor': ui_tpl('{0}-name', [v_id])}, 'children': c_1}) }}
+  {%- endif %}
+  {%- set c_2 -%}
+    {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'email', 'Name': 'email', 'Autocomplete': 'email', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['email']), 'htmlFor': ui_tpl('{0}-email', [v_id])}, 'children': c_2}) }}
+  {%- if ui_t(ui_and([not (ui_eq(v_mode, 'reset')), not (ui_eq(v_mode, 'magic'))])) %}
+    {%- set c_3 -%}
+      {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'password', 'Name': 'password', 'Autocomplete': ui_s(('new-password' if ui_t(ui_eq(v_mode, 'signup')) else 'current-password')), 'Attrs': ui_attrs(['id', ui_tpl('{0}-password', [v_id]), 'data-testid', 'field'])}}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['password']), 'htmlFor': ui_tpl('{0}-password', [v_id])}, 'children': c_3}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_mode, 'signin')) %}
+    {%- set c_7 -%}
+      {%- set c_5 -%}
+        {{ ui_include('ui/checkbox/checkbox.html.j2', {'p': {'Name': 'remember', 'Attrs': ui_attrs(['id', ui_tpl('{0}-remember', [v_id])])}}) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['remember'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-remember', [v_id])), 'Class': 'text-sm'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-fit', '']))}, 'children': c_5}) }}
+      {%- set c_6 -%}
+        {{ ui_text(ui_get(v_labels, ['forgot'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'link', 'Size': 'sm', 'Class': 'px-0'}, 'children': c_6}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Justify': 'between', 'Align': 'center', 'Class': 'flex-wrap gap-2'}, 'children': c_7}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_mode, 'signup')) %}
+    {%- set c_9 -%}
+      {{ ui_include('ui/checkbox/checkbox.html.j2', {'p': {'Name': 'terms', 'Attrs': ui_attrs(['id', ui_tpl('{0}-terms', [v_id])])}}) }}
+      {%- set c_8 -%}
+        {{ ui_text(ui_get(v_labels, ['terms'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-terms', [v_id])), 'Class': 'text-sm'}, 'children': c_8}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-fit', '']))}, 'children': c_9}) }}
+  {%- endif %}
+  {%- set c_10 -%}
+    {{ ui_text(v_submit) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_10}) }}
+{%- endset -%}
+{{ ui_include('ui/form/form.html.j2', {'p': {'Method': 'dialog', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'auth-form'])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/auth-layout.html.j2 b/packages/jinja2/ui/blocks/auth-layout.html.j2
new file mode 100644
index 0000000..8c9480b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/auth-layout.html.j2
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/auth-layout.json
+    A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card, centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side of the picture), mode, social. The page's heading is the card's title.
+    Props (p): id, title, text, submit, switchTo, labels, visual, level, layout, side, mode, social, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_submit = ui_def(p['submit'], none) -%}
+{%- set v_switchTo = ui_def(p['switchTo'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_visual = ui_def(p['visual'], none) -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_layout = ui_def(p['layout'], 'split') -%}
+{%- set v_side = ui_def(p['side'], 'end') -%}
+{%- set v_mode = ui_def(p['mode'], 'signin') -%}
+{%- set v_social = ui_def(p['social'], 'none') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- if ui_t(ui_eq(v_layout, 'split')) %}
+      {%- set c_5 -%}
+        {%- set c_1 -%}
+          {{ ui_include('blocks/auth-card.html.j2', {'p': {'id': v_id, 'title': v_title, 'text': v_text, 'submit': v_submit, 'switchText': ui_get(v_switchTo, ['text']), 'switchLink': ui_get(v_switchTo, ['link']), 'switchHref': ui_get(v_switchTo, ['href']), 'labels': v_labels, 'mode': v_mode, 'layout': 'plain', 'social': v_social, 'level': v_level, 'landmarkLabel': v_landmarkLabel}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'mx-auto flex w-full max-w-sm items-center'}, 'children': c_1}) }}
+        {%- set c_4 -%}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_visual, ['title']), 'ratio': '4/3'}}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_visual, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_visual, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv(['justify-end rounded bg-muted p-8', ('md:order-first' if ui_t(ui_eq(v_side, 'start')) else 'md:order-last')])), 'Attrs': ui_attrs(['data-testid', 'visual'])}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-2', 'Class': 'items-stretch gap-8'}, 'children': c_5}) }}
+    {%- elif ui_t(ui_eq(v_layout, 'centered')) %}
+      {%- set c_6 -%}
+        {{ ui_include('blocks/auth-card.html.j2', {'p': {'id': v_id, 'title': v_title, 'text': v_text, 'submit': v_submit, 'switchText': ui_get(v_switchTo, ['text']), 'switchLink': ui_get(v_switchTo, ['link']), 'switchHref': ui_get(v_switchTo, ['href']), 'labels': v_labels, 'mode': v_mode, 'social': v_social, 'level': v_level, 'landmarkLabel': v_landmarkLabel}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'mx-auto w-full max-w-md rounded bg-muted p-6'}, 'children': c_6}) }}
+    {%- else %}
+      {%- set c_7 -%}
+        {{ ui_include('blocks/auth-card.html.j2', {'p': {'id': v_id, 'title': v_title, 'text': v_text, 'submit': v_submit, 'switchText': ui_get(v_switchTo, ['text']), 'switchLink': ui_get(v_switchTo, ['link']), 'switchHref': ui_get(v_switchTo, ['href']), 'labels': v_labels, 'mode': v_mode, 'layout': 'plain', 'social': v_social, 'level': v_level, 'landmarkLabel': v_landmarkLabel}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'mx-auto w-full max-w-sm'}, 'children': c_7}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-12'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_8}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'div', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'auth-layout', 'data-layout', v_layout])}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/avatar.html.j2 b/packages/jinja2/ui/blocks/avatar.html.j2
new file mode 100644
index 0000000..57ba283
--- /dev/null
+++ b/packages/jinja2/ui/blocks/avatar.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/avatar.json
+    An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round.
+    Props (p): src, alt, size, className. -#}
+{%- set v_src = ui_def(p['src'], none) -%}
+{%- set v_alt = ui_def(p['alt'], '') -%}
+{%- set v_size = ui_def(p['size'], 'default') -%}
+{%- set c_1 -%}
+  {{ ui_include('ui/image/image.html.j2', {'p': {'Src': ui_s(v_src), 'Alt': ui_s(v_alt), 'Class': 'size-full object-cover', 'Fit': 'cover', 'Size': 'auto', 'Loading': 'eager', 'Decoding': 'auto', 'Attrs': ui_attrs(['draggable', 'false'])}}) }}
+{%- endset -%}
+{{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/avatar.variants.json', {'size': v_size}), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'avatar'])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/backdrop.html.j2 b/packages/jinja2/ui/blocks/backdrop.html.j2
new file mode 100644
index 0000000..b30033c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/backdrop.html.j2
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/backdrop.json
+    A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of the block (rule 01).
+    Props (p): kind, alt. -#}
+{%- set v_kind = ui_def(p['kind'], 'none') -%}
+{%- set v_alt = ui_def(p['alt'], '') -%}
+{%- if ui_t(ui_eq(v_kind, 'image')) %}
+  {%- set c_1 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_alt, 'ratio': '21/9', 'className': ui_cnv(['size-full rounded-none opacity-30'])}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'pointer-events-none absolute inset-0 -z-10', 'Attrs': ui_attrs(['data-testid', 'backdrop'])}, 'children': c_1}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/badge-square.html.j2 b/packages/jinja2/ui/blocks/badge-square.html.j2
new file mode 100644
index 0000000..1d59e98
--- /dev/null
+++ b/packages/jinja2/ui/blocks/badge-square.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/badge-square.json
+    A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd).
+    Props (p): size, className; children: markup. -#}
+{%- set v_size = ui_def(p['size'], 'default') -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/badge-square.variants.json', {'size': v_size}), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'badge-square'])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/bar-chart.html.j2 b/packages/jinja2/ui/blocks/bar-chart.html.j2
new file mode 100644
index 0000000..c4965ab
--- /dev/null
+++ b/packages/jinja2/ui/blocks/bar-chart.html.j2
@@ -0,0 +1,33 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/bar-chart.json
+    A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image for assistive technology: `label` carries the summary, the bar values are in the captions and titles.
+    Props (p): bars, label, max, height, className. -#}
+{%- set v_bars = ui_def(p['bars'], none) -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_max = ui_def(p['max'], none) -%}
+{%- set v_height = ui_def(p['height'], 160) -%}
+{%- set v_top = ui_max([1, ui_coalesce([v_max, ui_max_by(v_bars, 'value')])]) -%}
+{%- set c_6 -%}
+  {%- set c_2 -%}
+    {%- for v_b in ui_l(v_bars) %}
+      {%- set c_1 -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['w-full rounded', ('bg-muted-foreground' if ui_t(ui_get(v_b, ['muted'])) else 'bg-primary')])), 'Attrs': ui_attrs(['style', ui_css(['height', ui_max([2, ui_round(ui_mul(ui_div(ui_get(v_b, ['value']), v_top), 100))]), '%']), 'data-bar', ui_get(v_b, ['id'])])}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex h-full min-w-0 flex-1 items-end', 'Attrs': ui_attrs(['title', ui_coalesce([ui_get(v_b, ['title']), ui_get(v_b, ['label'])])])}, 'children': c_1}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-w-0 items-end gap-2', 'Attrs': ui_attrs(['role', 'img', 'aria-label', v_label, 'style', ui_css(['height', v_height, 'px'])])}, 'children': c_2}) }}
+  {%- set c_5 -%}
+    {%- for v_b in ui_l(v_bars) %}
+      {%- set c_4 -%}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_b, ['label'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground'}, 'children': c_3}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'relative h-4 min-w-0 flex-1'}, 'children': c_4}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'mt-2 flex min-w-0 gap-2', 'Attrs': ui_attrs(['aria-hidden', 'true'])}, 'children': c_5}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['min-w-0', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'bar-chart'])}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/before-after.html.j2 b/packages/jinja2/ui/blocks/before-after.html.j2
new file mode 100644
index 0000000..b4b2d8a
--- /dev/null
+++ b/packages/jinja2/ui/blocks/before-after.html.j2
@@ -0,0 +1,107 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/before-after.json
+    Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two cards, rows: one row per point), icons (show, hide), tone, density.
+    Props (p): id, title, points, empty, labels, layout, icons, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_points = ui_def(p['points'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'cards') -%}
+{%- set v_icons = ui_def(p['icons'], 'show') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_21 -%}
+  {%- if ui_t(ui_eq(ui_len(v_points), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'git-compare', 'title': v_empty}}) }}
+  {%- elif ui_t(ui_eq(v_layout, 'cards')) %}
+    {%- set c_13 -%}
+      {%- set c_6 -%}
+        {%- set c_5 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_labels, ['before'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}) }}
+          {%- set c_4 -%}
+            {%- for v_p in ui_l(v_points) %}
+              {%- set c_3 -%}
+                {%- if ui_t(ui_eq(v_icons, 'show')) %}
+                  {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'x', 'Size': 16, 'Class': 'h-lh shrink-0 text-sm'}}) }}
+                {%- endif %}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_get(v_p, ['before'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_2}) }}
+              {%- endset -%}
+              {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_3}) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0'}, 'children': c_4}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': 'flex flex-col gap-4'}, 'children': c_5}) }}
+      {%- endset -%}
+      {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'muted', 'Class': ui_s(ui_cnv(['h-full', ('gap-4 p-4' if ui_t(ui_eq(v_density, 'compact')) else '')])), 'Attrs': ui_attrs(['data-testid', 'side', 'data-side', 'before'])}, 'children': c_6}) }}
+      {%- set c_12 -%}
+        {%- set c_11 -%}
+          {%- set c_7 -%}
+            {{ ui_text(ui_get(v_labels, ['after'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_7}) }}
+          {%- set c_10 -%}
+            {%- for v_p in ui_l(v_points) %}
+              {%- set c_9 -%}
+                {%- if ui_t(ui_eq(v_icons, 'show')) %}
+                  {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'check', 'Size': 16, 'Class': 'h-lh shrink-0 text-sm'}}) }}
+                {%- endif %}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_get(v_p, ['after'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_8}) }}
+              {%- endset -%}
+              {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_9}) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0'}, 'children': c_10}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': 'flex flex-col gap-4'}, 'children': c_11}) }}
+      {%- endset -%}
+      {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'default', 'Class': ui_s(ui_cnv(['h-full', ('gap-4 p-4' if ui_t(ui_eq(v_density, 'compact')) else '')])), 'Attrs': ui_attrs(['data-testid', 'side', 'data-side', 'after'])}, 'children': c_12}) }}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-2', 'Class': 'items-stretch gap-4', 'Attrs': ui_attrs(['data-testid', 'sides'])}, 'children': c_13}) }}
+  {%- else %}
+    {%- set c_20 -%}
+      {%- for v_p in ui_l(v_points) %}
+        {%- set c_19 -%}
+          {%- set c_14 -%}
+            {{ ui_text(ui_get(v_p, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_14}) }}
+          {%- set c_16 -%}
+            {%- if ui_t(ui_eq(v_icons, 'show')) %}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'x', 'Size': 16, 'Class': 'h-lh shrink-0 text-sm text-muted-foreground'}}) }}
+            {%- endif %}
+            {%- set c_15 -%}
+              {{ ui_text(ui_get(v_p, ['before'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_15}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'start'}, 'children': c_16}) }}
+          {%- set c_18 -%}
+            {%- if ui_t(ui_eq(v_icons, 'show')) %}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'check', 'Size': 16, 'Class': 'h-lh shrink-0 text-sm text-primary'}}) }}
+            {%- endif %}
+            {%- set c_17 -%}
+              {{ ui_text(ui_get(v_p, ['after'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_17}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'start'}, 'children': c_18}) }}
+        {%- endset -%}
+        {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-3', 'Class': ui_s(ui_cnv(['items-center gap-4', 'rounded bg-card inset-ring inset-ring-border p-4'])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_19}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'rows'])}, 'children': c_20}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_21}) }}
diff --git a/packages/jinja2/ui/blocks/bento-grid.html.j2 b/packages/jinja2/ui/blocks/bento-grid.html.j2
new file mode 100644
index 0000000..a7052dc
--- /dev/null
+++ b/packages/jinja2/ui/blocks/bento-grid.html.j2
@@ -0,0 +1,44 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/bento-grid.json
+    Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in the large tiles), tone, density.
+    Props (p): id, title, tiles, empty, layout, media, tone, density, landmarkLabel. -#}
+{%- set k_SPAN = {'large': 'md:col-span-2 md:row-span-2', 'wide': 'md:col-span-2', 'small': ''} -%}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_tiles = ui_def(p['tiles'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_layout = ui_def(p['layout'], 'bento') -%}
+{%- set v_media = ui_def(p['media'], 'none') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_6 -%}
+  {%- if ui_t(ui_eq(ui_len(v_tiles), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layout-dashboard', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_5 -%}
+      {%- for v_tile in ui_l(v_tiles) %}
+        {%- set c_4 -%}
+          {%- set c_3 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_tile, ['icon'])), 'Size': 24}}) }}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_tile, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_tile, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+            {%- if ui_t(ui_and([ui_eq(v_media, 'image'), ui_or([ui_eq(ui_get(v_tile, ['size']), 'large'), ui_eq(v_layout, 'even')])])) %}
+              {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_tile, ['title']), 'ratio': '4/3', 'className': ui_cnv(['mt-auto'])}}) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': 'flex h-full flex-col gap-4'}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'default', 'Class': ui_s(ui_cnv(['h-full overflow-hidden', ('gap-4 p-4' if ui_t(ui_eq(v_density, 'compact')) else ''), (ui_at(k_SPAN, ui_get(v_tile, ['size'])) if ui_t(ui_eq(v_layout, 'bento')) else '')])), 'Attrs': ui_attrs(['data-testid', 'item', 'data-size', (ui_get(v_tile, ['size']) if ui_t(ui_eq(v_layout, 'bento')) else 'even')])}, 'children': c_4}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-4', 'Class': 'auto-rows-fr gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_5}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/bottom-nav.html.j2 b/packages/jinja2/ui/blocks/bottom-nav.html.j2
new file mode 100644
index 0000000..e6cf5c6
--- /dev/null
+++ b/packages/jinja2/ui/blocks/bottom-nav.html.j2
@@ -0,0 +1,32 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/bottom-nav.json
+    An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show, hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.
+    Props (p): label, tabs, current, labels, position, tone, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_tabs = ui_def(p['tabs'], none) -%}
+{%- set v_current = ui_def(p['current'], '') -%}
+{%- set v_labels = ui_def(p['labels'], 'show') -%}
+{%- set v_position = ui_def(p['position'], 'static') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_gt(ui_len(v_tabs), 0)) %}
+  {%- set c_5 -%}
+    {%- set c_4 -%}
+      {%- for v_tab in ui_l(v_tabs) %}
+        {%- set c_3 -%}
+          {%- set c_2 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_tab, ['icon'])), 'Size': 20}}) }}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_tab, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(('sr-only' if ui_t(ui_eq(v_labels, 'hide')) else ''))}, 'children': c_1}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_tab, ['href']), 'className': ui_cnv([ui_cnv(['flex flex-col items-center gap-2 py-2 text-xs', ('font-semibold text-primary' if ui_t(ui_eq(ui_get(v_tab, ['id']), v_current)) else 'text-muted-foreground')])]), 'current': ui_eq(ui_get(v_tab, ['id']), v_current), 'testid': 'item'}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_3}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 grid list-none grid-flow-col auto-cols-fr p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_4}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'nav', 'Class': ui_s(ui_cnv(['mx-auto w-full max-w-md border-t border-border', ('bg-muted' if ui_t(ui_eq(v_tone, 'muted')) else 'bg-background'), ('sticky bottom-0 z-40' if ui_t(ui_eq(v_position, 'sticky')) else '')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', 'bottom-nav', 'data-position', v_position])}, 'children': c_5}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/bulk-bar.html.j2 b/packages/jinja2/ui/blocks/bulk-bar.html.j2
new file mode 100644
index 0000000..1f31318
--- /dev/null
+++ b/packages/jinja2/ui/blocks/bulk-bar.html.j2
@@ -0,0 +1,21 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/bulk-bar.json
+    The "N selected" bar of a list: a count, a clear button and the bulk actions (children). All text comes in through props.
+    Props (p): label, clearLabel, className; children: markup. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_clearLabel = ui_def(p['clearLabel'], none) -%}
+{%- set c_4 -%}
+  {%- set c_1 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'x', 'Size': 16}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(v_clearLabel), 'Class': 'text-background hover:bg-background/15 hover:text-background'}, 'children': c_1}) }}
+  {%- set c_2 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Attrs': ui_attrs(['data-testid', 'bulk-count'])}, 'children': c_2}) }}
+  {%- set c_3 -%}
+    {{ ui_def(children, '')|safe }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'ml-auto flex flex-wrap items-center gap-2'}, 'children': c_3}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'region', 'aria-label', v_label, 'aria-live', 'polite', 'data-slot', 'bulk-bar', 'data-testid', 'bulk-bar'])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/cart-drawer.html.j2 b/packages/jinja2/ui/blocks/cart-drawer.html.j2
new file mode 100644
index 0000000..8528ac1
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cart-drawer.html.j2
@@ -0,0 +1,55 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-drawer.json
+    The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).
+    Props (p): id, lines, rows, labels, drawer, state, media, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_lines = ui_def(p['lines'], none) -%}
+{%- set v_rows = ui_def(p['rows'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_drawer = ui_def(p['drawer'], none) -%}
+{%- set v_state = ui_def(p['state'], 'filled') -%}
+{%- set v_media = ui_def(p['media'], 'image') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_11 -%}
+  {%- set c_10 -%}
+    {%- set c_9 -%}
+      {%- set c_1 -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'h-8 w-48 rounded bg-background'}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'h-40 rounded bg-background'}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'h-40 rounded bg-background'}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'hidden flex-1 flex-col gap-4 p-8 sm:flex', 'Attrs': ui_attrs(['aria-hidden', 'true'])}, 'children': c_1}) }}
+      {%- set c_8 -%}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_drawer, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': 'lg', 'Weight': 'semibold'}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'x', 'Size': 16}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_drawer, ['close']))}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'border-b border-border p-4'}, 'children': c_4}) }}
+        {%- if ui_t(ui_or([ui_eq(v_state, 'empty'), ui_eq(ui_len(v_lines), 0)])) %}
+          {%- set c_7 -%}
+            {%- set f_5 -%}
+              {%- set c_6 -%}
+                {{ ui_text(ui_get(v_drawer, ['browse'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default'}, 'children': c_6}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'shopping-bag', 'title': ui_get(v_drawer, ['empty']), 'text': ui_get(v_drawer, ['emptyText']), 'action': f_5}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex flex-1 flex-col justify-center p-4', 'Attrs': ui_attrs(['data-testid', 'empty'])}, 'children': c_7}) }}
+        {%- else %}
+          {{ ui_include('blocks/drawer-lines.html.j2', {'p': {'field': ui_tpl('{0}-qty', [v_id]), 'lines': v_lines, 'rows': v_rows, 'labels': v_labels, 'drawer': v_drawer, 'media': v_media}}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex w-full flex-col bg-background shadow-lg sm:max-w-sm', 'Attrs': ui_attrs(['role', 'group', 'aria-label', ui_get(v_drawer, ['title']), 'data-testid', 'drawer'])}, 'children': c_8}) }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border'}, 'children': c_9}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': 'py-8', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, ui_get(v_drawer, ['title'])]), 'data-testid', 'section'])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/cart-list.html.j2 b/packages/jinja2/ui/blocks/cart-list.html.j2
new file mode 100644
index 0000000..a7e502a
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cart-list.html.j2
@@ -0,0 +1,61 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-list.json
+    The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button. Axes: layout (table, cards), media (image, none), density, tone.
+    Props (p): id, title, lines, empty, labels, layout, media, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lines = ui_def(p['lines'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'table') -%}
+{%- set v_media = ui_def(p['media'], 'image') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_10 -%}
+  {%- if ui_t(ui_eq(ui_len(v_lines), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'shopping-cart', 'title': v_empty}}) }}
+  {%- elif ui_t(ui_eq(v_layout, 'table')) %}
+    {{ ui_include('blocks/cart-table.html.j2', {'p': {'field': ui_tpl('{0}-qty', [v_id]), 'lines': v_lines, 'labels': v_labels, 'media': v_media, 'density': v_density}}) }}
+  {%- else %}
+    {%- set c_9 -%}
+      {%- for v_line in ui_l(v_lines) %}
+        {%- set c_8 -%}
+          {%- set c_7 -%}
+            {%- if ui_t(ui_eq(v_media, 'image')) %}
+              {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['size-16 shrink-0'])}}) }}
+            {%- endif %}
+            {%- set c_4 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_line, ['name'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_line, ['variant'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_money(ui_get(v_line, ['price']), ui_get(v_line, ['currency']))) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_3}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'min-w-40 flex-1'}, 'children': c_4}) }}
+            {{ ui_include('blocks/number-field.html.j2', {'p': {'value': ui_str(ui_get(v_line, ['qty'])), 'name': ui_tpl('{0}-qty-{1}', [v_id, ui_get(v_line, ['id'])]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'bold'}, 'children': c_5}) }}
+            {%- set c_6 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'x', 'Size': 16}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['remove'])), 'Attrs': ui_attrs(['data-testid', 'remove'])}, 'children': c_6}) }}
+          {%- endset -%}
+          {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': 'flex flex-wrap items-center gap-4'}, 'children': c_7}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'cart-cards'])}, 'children': c_9}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_10}) }}
diff --git a/packages/jinja2/ui/blocks/cart-summary-card.html.j2 b/packages/jinja2/ui/blocks/cart-summary-card.html.j2
new file mode 100644
index 0000000..c287d42
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cart-summary-card.html.j2
@@ -0,0 +1,117 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-summary-card.json
+    The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.
+    Props (p): lines, rows, promos, labels, items, promo, field, progress, value. -#}
+{%- set v_lines = ui_def(p['lines'], none) -%}
+{%- set v_rows = ui_def(p['rows'], none) -%}
+{%- set v_promos = ui_def(p['promos'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_items = ui_def(p['items'], 'hide') -%}
+{%- set v_promo = ui_def(p['promo'], 'show') -%}
+{%- set v_field = ui_def(p['field'], 'promo') -%}
+{%- set v_progress = ui_def(p['progress'], 'show') -%}
+{%- set v_value = ui_def(p['value'], 70) -%}
+{%- set c_24 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['title'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': 'lg', 'Weight': 'semibold'}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['items']), [ui_str(ui_len(v_lines))])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'baseline', 'Justify': 'between'}, 'children': c_3}) }}
+  {%- if ui_t(ui_and([ui_eq(v_items, 'show'), ui_gt(ui_len(v_lines), 0)])) %}
+    {%- set c_9 -%}
+      {%- for v_line in ui_l(v_lines) %}
+        {%- set c_8 -%}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['size-12 shrink-0'])}}) }}
+          {%- set c_6 -%}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_line, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_tpl('{0} x {1}', [ui_get(v_line, ['qty']), ui_money(ui_get(v_line, ['price']), ui_get(v_line, ['currency']))])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'flex-1'}, 'children': c_6}) }}
+          {%- set c_7 -%}
+            {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'font-medium'}, 'children': c_7}) }}
+        {%- endset -%}
+        {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center gap-4 text-sm'}, 'children': c_8}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-4', 'Attrs': ui_attrs(['data-testid', 'summary-lines'])}, 'children': c_9}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_promo, 'show')) %}
+    {%- set c_15 -%}
+      {%- set c_11 -%}
+        {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': ui_s(v_field), 'AriaLabel': ui_s(ui_get(v_labels, ['promo'])), 'Placeholder': ui_s(ui_get(v_labels, ['promo'])), 'Class': 'min-w-0 flex-1'}}) }}
+        {%- set c_10 -%}
+          {{ ui_text(ui_get(v_labels, ['apply'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button'}, 'children': c_10}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_11}) }}
+      {%- if ui_t(ui_gt(ui_len(v_promos), 0)) %}
+        {%- set c_14 -%}
+          {%- set c_12 -%}
+            {{ ui_text(ui_get(v_labels, ['codes'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_12}) }}
+          {%- for v_c in ui_l(v_promos) %}
+            {%- set c_13 -%}
+              {{ ui_text(ui_get(v_c, ['code'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'code'])}, 'children': c_13}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_14}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'promo'])}, 'children': c_15}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_progress, 'show')) %}
+    {%- set c_17 -%}
+      {%- set c_16 -%}
+        {{ ui_text(ui_get(v_labels, ['progress'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_16}) }}
+      {{ ui_include('ui/form/progress.html.j2', {'p': {'Value': ui_s(ui_str(v_value)), 'Max': '100', 'Attrs': ui_attrs(['aria-label', ui_get(v_labels, ['progress'])])}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'rounded bg-muted p-4', 'Attrs': ui_attrs(['data-testid', 'progress'])}, 'children': c_17}) }}
+  {%- endif %}
+  {%- if ui_t(ui_gt(ui_len(v_rows), 0)) %}
+    {%- set c_21 -%}
+      {%- for v_row in ui_l(v_rows) %}
+        {%- set c_20 -%}
+          {%- set c_18 -%}
+            {{ ui_text(ui_get(v_row, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_18}) }}
+          {%- set c_19 -%}
+            {{ ui_text(ui_money(ui_get(v_row, ['amount']), ui_get(v_row, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_19}) }}
+        {%- endset -%}
+        {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex items-center justify-between gap-4', ('border-t border-border pt-4 text-base font-bold' if ui_t(ui_get(v_row, ['strong'])) else 'text-sm text-muted-foreground')])), 'Attrs': ui_attrs(['data-testid', 'row'])}, 'children': c_20}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2'}, 'children': c_21}) }}
+  {%- endif %}
+  {%- set c_22 -%}
+    {{ ui_text(ui_get(v_labels, ['checkout'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'lg', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'checkout'])}, 'children': c_22}) }}
+  {%- set c_23 -%}
+    {{ ui_text(ui_get(v_labels, ['note'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_23}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'summary'])}, 'children': c_24}) }}
diff --git a/packages/jinja2/ui/blocks/cart-table.html.j2 b/packages/jinja2/ui/blocks/cart-table.html.j2
new file mode 100644
index 0000000..dc5286d
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cart-table.html.j2
@@ -0,0 +1,110 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-table.json
+    The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a remove button.
+    Props (p): lines, labels, media, density, field. -#}
+{%- set v_lines = ui_def(p['lines'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_media = ui_def(p['media'], 'image') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_field = ui_def(p['field'], 'qty') -%}
+{%- set c_23 -%}
+  {%- set c_22 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['caption'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/table/table-caption.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_1}) }}
+    {%- set c_9 -%}
+      {%- set c_8 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['product'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_2}) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['price'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'hidden py-2 sm:table-cell'}, 'children': c_3}) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['qty'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_4}) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_labels, ['total'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_5}) }}
+        {%- set c_7 -%}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_labels, ['remove'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_6}) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_7}) }}
+      {%- endset -%}
+      {{ ui_include('ui/table/table-row.html.j2', {'p': {}, 'children': c_8}) }}
+    {%- endset -%}
+    {{ ui_include('ui/table/table-head.html.j2', {'p': {}, 'children': c_9}) }}
+    {%- set c_21 -%}
+      {%- for v_line in ui_l(v_lines) %}
+        {%- set c_20 -%}
+          {%- set c_14 -%}
+            {%- set c_13 -%}
+              {%- if ui_t(ui_eq(v_media, 'image')) %}
+                {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['hidden size-14 shrink-0 sm:block'])}}) }}
+              {%- endif %}
+              {%- set c_12 -%}
+                {%- set c_10 -%}
+                  {{ ui_text(ui_get(v_line, ['name'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_10}) }}
+                {%- set c_11 -%}
+                  {{ ui_text(ui_get(v_line, ['variant'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_11}) }}
+              {%- endset -%}
+              {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_12}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_13}) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': ui_s(ui_cnv([('py-2' if ui_t(ui_eq(v_density, 'compact')) else 'py-4')]))}, 'children': c_14}) }}
+          {%- set c_15 -%}
+            {{ ui_text(ui_money(ui_get(v_line, ['price']), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'hidden sm:table-cell'}, 'children': c_15}) }}
+          {%- set c_16 -%}
+            {{ ui_include('blocks/number-field.html.j2', {'p': {'value': ui_str(ui_get(v_line, ['qty'])), 'name': ui_tpl('{0}-{1}', [v_field, ui_get(v_line, ['id'])]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {}, 'children': c_16}) }}
+          {%- set c_17 -%}
+            {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'font-semibold'}, 'children': c_17}) }}
+          {%- set c_19 -%}
+            {%- set c_18 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'x', 'Size': 16}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['remove'])), 'Attrs': ui_attrs(['data-testid', 'remove'])}, 'children': c_18}) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'text-right'}, 'children': c_19}) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-row.html.j2', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_20}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/table/table-body.html.j2', {'p': {}, 'children': c_21}) }}
+  {%- endset -%}
+  {{ ui_include('ui/table/table.html.j2', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'cart-table'])}, 'children': c_22}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'w-full overflow-x-auto'}, 'children': c_23}) }}
+{%- if ui_t(ui_gt(ui_len(v_lines), 0)) %}
+  {%- set c_26 -%}
+    {%- set c_24 -%}
+      {{ ui_text(ui_get(v_labels, ['subtotal'])) }}
+      {{ ui_text(' ') }}
+      {{ ui_text(ui_money(ui_sum_by(v_lines, 'price', 'qty'), ui_first_of(v_lines, 'currency'))) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'bold', 'Attrs': ui_attrs(['data-testid', 'subtotal'])}, 'children': c_24}) }}
+    {%- set c_25 -%}
+      {{ ui_text(ui_get(v_labels, ['checkout'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Attrs': ui_attrs(['data-testid', 'checkout'])}, 'children': c_25}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'mt-4 flex-wrap border-t border-border pt-4', 'Attrs': ui_attrs(['data-testid', 'cart-footer'])}, 'children': c_26}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/category-nav.html.j2 b/packages/jinja2/ui/blocks/category-nav.html.j2
new file mode 100644
index 0000000..ef11dc5
--- /dev/null
+++ b/packages/jinja2/ui/blocks/category-nav.html.j2
@@ -0,0 +1,72 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/category-nav.json
+    Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon, or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes: layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.
+    Props (p): label, categories, current, layout, count, icon, density, tools, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_categories = ui_def(p['categories'], none) -%}
+{%- set v_current = ui_def(p['current'], 'all') -%}
+{%- set v_layout = ui_def(p['layout'], 'chips') -%}
+{%- set v_count = ui_def(p['count'], 'show') -%}
+{%- set v_icon = ui_def(p['icon'], 'show') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_tools = ui_def(p['tools'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_chipLike = ui_or([ui_eq(v_layout, 'chips'), ui_eq(v_layout, 'toolbar')]) -%}
+{%- set v_tiles = ui_eq(v_layout, 'tiles') -%}
+{%- set v_linkShape = ('inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border' if ui_t(v_chipLike) else ('inline-flex items-center gap-2 -mb-px border-b px-1 py-2' if ui_t(ui_eq(v_layout, 'bar')) else ('flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border' if ui_t(v_tiles) else 'inline-flex w-full items-center gap-2 rounded px-3 py-2'))) -%}
+{%- set v_currentLook = ('bg-primary text-primary-foreground' if ui_t(v_chipLike) else ('border-foreground font-semibold' if ui_t(ui_eq(v_layout, 'bar')) else ('inset-ring-foreground font-semibold' if ui_t(v_tiles) else 'bg-muted font-semibold'))) -%}
+{%- set v_otherLook = ('border-transparent' if ui_t(ui_eq(v_layout, 'bar')) else '') -%}
+{%- set v_listShape = ('flex flex-col gap-2' if ui_t(ui_eq(v_layout, 'sidebar')) else ('flex flex-wrap gap-2 gap-x-4 border-b border-border' if ui_t(ui_eq(v_layout, 'bar')) else ('grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6' if ui_t(v_tiles) else 'flex flex-wrap gap-2'))) -%}
+{%- set c_11 -%}
+  {%- set c_10 -%}
+    {%- if ui_t(ui_eq(v_layout, 'toolbar')) %}
+      {%- set c_3 -%}
+        {{ ui_include('blocks/search-field.html.j2', {'p': {'value': ui_coalesce([ui_get(v_tools, ['query']), '']), 'label': ui_coalesce([ui_get(v_tools, ['search']), '']), 'placeholder': ui_get(v_tools, ['search'])}}) }}
+        {%- set c_1 -%}
+          {{ ui_include('ui/select/select-option.html.j2', {'p': {'Value': 'sort', 'Label': ui_s(ui_get(v_tools, ['sortValue'])), 'Selected': true}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/select/select.html.j2', {'p': {'Name': 'sort', 'Size': 'sm', 'AriaLabel': ui_s(ui_get(v_tools, ['sort'])), 'Class': 'w-48'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_tools, ['shown'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'mb-4 flex-wrap', 'Attrs': ui_attrs(['data-testid', 'toolbar'])}, 'children': c_3}) }}
+    {%- endif %}
+    {%- if ui_t(ui_gt(ui_len(v_categories), 0)) %}
+      {%- set c_9 -%}
+        {%- for v_c in ui_l(v_categories) %}
+          {%- set c_8 -%}
+            {%- set c_7 -%}
+              {%- if ui_t(ui_eq(v_icon, 'show')) %}
+                {%- if ui_t(v_tiles) %}
+                  {%- set c_4 -%}
+                    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 20}}) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-10 items-center justify-center rounded bg-muted'}, 'children': c_4}) }}
+                {%- else %}
+                  {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 16}}) }}
+                {%- endif %}
+              {%- endif %}
+              {%- set c_5 -%}
+                {{ ui_text(ui_get(v_c, ['name'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_5}) }}
+              {%- if ui_t(ui_eq(v_count, 'show')) %}
+                {%- set c_6 -%}
+                  {{ ui_text(ui_str(ui_get(v_c, ['count']))) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+              {%- endif %}
+            {%- endset -%}
+            {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_c, ['href']), 'className': ui_cnv([ui_cnv(['text-sm', v_linkShape, (v_currentLook if ui_t(ui_eq(ui_get(v_c, ['id']), v_current)) else v_otherLook)])]), 'current': ui_eq(ui_get(v_c, ['id']), v_current), 'testid': 'item', 'block': true}, 'children': c_7}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_8}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': ui_s(v_listShape), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_9}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', ('py-2' if ui_t(ui_eq(v_density, 'compact')) else 'py-4')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', 'category-nav', 'data-layout', v_layout])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/chart-panel.html.j2 b/packages/jinja2/ui/blocks/chart-panel.html.j2
new file mode 100644
index 0000000..51f888a
--- /dev/null
+++ b/packages/jinja2/ui/blocks/chart-panel.html.j2
@@ -0,0 +1,36 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/chart-panel.json
+    A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart (bars, meters), size (default, compact), tone (default, muted).
+    Props (p): id, title, text, series, empty, summary, percent, chart, size, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_series = ui_def(p['series'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_summary = ui_def(p['summary'], none) -%}
+{%- set v_percent = ui_def(p['percent'], none) -%}
+{%- set v_chart = ui_def(p['chart'], 'bars') -%}
+{%- set v_size = ui_def(p['size'], 'default') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {%- set c_2 -%}
+      {%- if ui_t(ui_eq(ui_len(v_series), 0)) %}
+        {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'chart-column', 'title': v_empty}}) }}
+      {%- elif ui_t(ui_eq(v_chart, 'bars')) %}
+        {{ ui_include('blocks/bar-chart.html.j2', {'p': {'bars': v_series, 'label': v_summary, 'height': (96 if ui_t(ui_eq(v_size, 'compact')) else 176)}}) }}
+      {%- else %}
+        {%- set c_1 -%}
+          {%- for v_s in ui_l(v_series) %}
+            {{ ui_include('blocks/meter-row.html.j2', {'p': {'label': ui_get(v_s, ['label']), 'value': ui_get(v_s, ['value']), 'caption': ui_tpl(v_percent, [ui_get(v_s, ['value'])])}}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': ui_s(('0' if ui_t(ui_eq(v_size, 'compact')) else '2')), 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_1}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('blocks/panel.html.j2', {'p': {'title': v_title, 'description': v_text, 'id': v_id, 'className': ui_cnv([('bg-muted' if ui_t(ui_eq(v_tone, 'muted')) else '')])}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4 py-8', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_3}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else (ui_tpl('{0}-t', [v_id]) if ui_t(ui_and([v_title, v_id])) else none)), 'data-testid', 'panel-section', 'aria-label', v_landmarkLabel])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/checklist.html.j2 b/packages/jinja2/ui/blocks/checklist.html.j2
new file mode 100644
index 0000000..5cbeffc
--- /dev/null
+++ b/packages/jinja2/ui/blocks/checklist.html.j2
@@ -0,0 +1,76 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checklist.json
+    An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain), progress (bar, text, none), marker (check, number), tone (default, muted).
+    Props (p): id, title, tasks, empty, progressLabel, layout, progress, marker, detail, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_tasks = ui_def(p['tasks'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_progressLabel = ui_def(p['progressLabel'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'card') -%}
+{%- set v_progress = ui_def(p['progress'], 'bar') -%}
+{%- set v_marker = ui_def(p['marker'], 'check') -%}
+{%- set v_detail = ui_def(p['detail'], 'always') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_len(v_tasks), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'list-checks', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_11 -%}
+      {%- if ui_t(ui_eq(v_progress, 'bar')) %}
+        {{ ui_include('ui/form/progress.html.j2', {'p': {'Value': ui_s(ui_str(ui_round(ui_div(ui_mul(ui_count(v_tasks, 'done'), 100), ui_len(v_tasks))))), 'Max': '100', 'Attrs': ui_attrs(['aria-label', ui_tpl(v_progressLabel, [ui_count(v_tasks, 'done'), ui_len(v_tasks)])])}}) }}
+      {%- endif %}
+      {%- if ui_t(ui_eq(v_progress, 'text')) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_tpl(v_progressLabel, [ui_count(v_tasks, 'done'), ui_len(v_tasks)])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'progress-text'])}, 'children': c_1}) }}
+      {%- endif %}
+      {%- set c_10 -%}
+        {%- for v_task in ui_l(v_tasks) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_9 -%}
+            {%- if ui_t(ui_eq(v_marker, 'number')) %}
+              {%- set c_2 -%}
+                {{ ui_text(ui_str(ui_add(v_i, 1))) }}
+              {%- endset -%}
+              {{ ui_include('ui/iconbadge/icon-badge.html.j2', {'p': {'Variant': ui_s(('primary' if ui_t(ui_get(v_task, ['done'])) else 'outline')), 'Size': 'xs'}, 'children': c_2}) }}
+            {%- else %}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(('circle-check' if ui_t(ui_get(v_task, ['done'])) else 'circle')), 'Size': 24, 'Class': ui_s(('shrink-0 text-primary' if ui_t(ui_get(v_task, ['done'])) else 'shrink-0 text-muted-foreground'))}}) }}
+            {%- endif %}
+            {%- if ui_t(ui_eq(v_detail, 'expand')) %}
+              {%- set c_5 -%}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_get(v_task, ['title'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/disclosure/summary.html.j2', {'p': {'Variant': 'ghost'}, 'children': c_3}) }}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_task, ['text'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'pb-2 text-muted-foreground'}, 'children': c_4}) }}
+              {%- endset -%}
+              {{ ui_include('ui/disclosure/disclosure.html.j2', {'p': {'Variant': 'ghost', 'Class': 'flex-1', 'Attrs': ui_attrs(['data-testid', 'task-detail'])}, 'children': c_5}) }}
+            {%- else %}
+              {%- set c_8 -%}
+                {%- set c_6 -%}
+                  {{ ui_text(ui_get(v_task, ['title'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_6}) }}
+                {%- set c_7 -%}
+                  {{ ui_text(ui_get(v_task, ['text'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+              {%- endset -%}
+              {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_8}) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'item', 'data-done', ui_str(ui_get(v_task, ['done']))])}, 'children': c_9}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_10}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(('rounded bg-card p-6 inset-ring inset-ring-border' if ui_t(ui_eq(v_layout, 'card')) else '')), 'Attrs': ui_attrs(['data-testid', 'checklist'])}, 'children': c_11}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'measure': '2xl', 'landmarkLabel': v_landmarkLabel}, 'children': c_12}) }}
diff --git a/packages/jinja2/ui/blocks/checkout-form.html.j2 b/packages/jinja2/ui/blocks/checkout-form.html.j2
new file mode 100644
index 0000000..9de2241
--- /dev/null
+++ b/packages/jinja2/ui/blocks/checkout-form.html.j2
@@ -0,0 +1,93 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checkout-form.json
+    A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps, beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards: each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.
+    Props (p): id, title, days, payments, lines, rows, promos, labels, totals, layout, summary, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], '') -%}
+{%- set v_days = ui_def(p['days'], none) -%}
+{%- set v_payments = ui_def(p['payments'], none) -%}
+{%- set v_lines = ui_def(p['lines'], none) -%}
+{%- set v_rows = ui_def(p['rows'], none) -%}
+{%- set v_promos = ui_def(p['promos'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_totals = ui_def(p['totals'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'cards') -%}
+{%- set v_summary = ui_def(p['summary'], 'aside') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_19 -%}
+  {%- set c_18 -%}
+    {%- set c_16 -%}
+      {%- set c_5 -%}
+        {%- set c_4 -%}
+          {%- set c_1 -%}
+            {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'name', 'Autocomplete': 'name', 'Attrs': ui_attrs(['id', ui_tpl('{0}-name', [v_id]), 'data-testid', 'field'])}}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['name']), 'htmlFor': ui_tpl('{0}-name', [v_id])}, 'children': c_1}) }}
+          {%- set c_2 -%}
+            {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'tel', 'Name': 'phone', 'Autocomplete': 'tel', 'Attrs': ui_attrs(['id', ui_tpl('{0}-phone', [v_id]), 'data-testid', 'field'])}}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['phone']), 'htmlFor': ui_tpl('{0}-phone', [v_id])}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'email', 'Name': 'email', 'Autocomplete': 'email', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['email']), 'htmlFor': ui_tpl('{0}-email', [v_id])}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-2', 'Class': 'gap-4'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('blocks/checkout-step.html.j2', {'p': {'number': '1', 'title': ui_get(v_labels, ['contacts']), 'text': ui_get(v_labels, ['contactsText']), 'layout': v_layout}, 'children': c_5}) }}
+      {%- set c_13 -%}
+        {%- set c_6 -%}
+          {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'street', 'Autocomplete': 'address-line1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-street', [v_id]), 'data-testid', 'field'])}}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['street']), 'htmlFor': ui_tpl('{0}-street', [v_id])}, 'children': c_6}) }}
+        {%- set c_11 -%}
+          {%- set c_7 -%}
+            {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'house', 'Attrs': ui_attrs(['id', ui_tpl('{0}-house', [v_id]), 'data-testid', 'field'])}}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['house']), 'htmlFor': ui_tpl('{0}-house', [v_id])}, 'children': c_7}) }}
+          {%- set c_8 -%}
+            {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'flat', 'Attrs': ui_attrs(['id', ui_tpl('{0}-flat', [v_id]), 'data-testid', 'field'])}}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['flat']), 'htmlFor': ui_tpl('{0}-flat', [v_id])}, 'children': c_8}) }}
+          {%- set c_9 -%}
+            {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'entrance', 'Attrs': ui_attrs(['id', ui_tpl('{0}-entrance', [v_id]), 'data-testid', 'field'])}}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['entrance']), 'htmlFor': ui_tpl('{0}-entrance', [v_id])}, 'children': c_9}) }}
+          {%- set c_10 -%}
+            {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'floor', 'Attrs': ui_attrs(['id', ui_tpl('{0}-floor', [v_id]), 'data-testid', 'field'])}}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['floor']), 'htmlFor': ui_tpl('{0}-floor', [v_id])}, 'children': c_10}) }}
+        {%- endset -%}
+        {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '2-4', 'Class': 'gap-4'}, 'children': c_11}) }}
+        {%- set c_12 -%}
+          {{ ui_include('ui/textarea/textarea.html.j2', {'p': {'Rows': 4, 'Name': 'comment', 'Attrs': ui_attrs(['id', ui_tpl('{0}-comment', [v_id]), 'data-testid', 'field'])}}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['comment']), 'htmlFor': ui_tpl('{0}-comment', [v_id])}, 'children': c_12}) }}
+      {%- endset -%}
+      {{ ui_include('blocks/checkout-step.html.j2', {'p': {'number': '2', 'title': ui_get(v_labels, ['address']), 'text': ui_get(v_labels, ['addressText']), 'layout': v_layout}, 'children': c_13}) }}
+      {%- set c_14 -%}
+        {%- if ui_t(ui_gt(ui_len(v_days), 0)) %}
+          {{ ui_include('blocks/slot-grid.html.j2', {'p': {'days': v_days, 'name': ui_tpl('{0}-slot', [v_id]), 'item': 'plain'}}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('blocks/checkout-step.html.j2', {'p': {'number': '3', 'title': ui_get(v_labels, ['slot']), 'text': ui_get(v_labels, ['slotText']), 'layout': v_layout}, 'children': c_14}) }}
+      {%- set c_15 -%}
+        {%- if ui_t(ui_gt(ui_len(v_payments), 0)) %}
+          {{ ui_include('blocks/payment-options.html.j2', {'p': {'payments': v_payments, 'name': ui_tpl('{0}-payment', [v_id]), 'checked': 'payment-card'}}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('blocks/checkout-step.html.j2', {'p': {'number': '4', 'title': ui_get(v_labels, ['payment']), 'text': ui_get(v_labels, ['paymentText']), 'layout': v_layout}, 'children': c_15}) }}
+      {{ ui_include('blocks/checkout-submit.html.j2', {'p': {'id': v_id, 'consent': ui_get(v_labels, ['consent']), 'submit': ui_get(v_labels, ['submit']), 'legal': ui_get(v_labels, ['legal'])}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/form/form.html.j2', {'p': {'Method': 'dialog', 'Class': ui_s(('flex flex-col gap-6 lg:col-span-2' if ui_t(ui_eq(v_summary, 'aside')) else 'flex flex-col gap-6 lg:col-span-3')), 'Attrs': ui_attrs(['data-testid', 'checkout-form'])}, 'children': c_16}) }}
+    {%- if ui_t(ui_eq(v_summary, 'aside')) %}
+      {%- set c_17 -%}
+        {{ ui_include('blocks/cart-summary-card.html.j2', {'p': {'field': ui_tpl('{0}-promo', [v_id]), 'lines': v_lines, 'rows': v_rows, 'promos': v_promos, 'labels': v_totals, 'items': 'show'}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'lg:sticky lg:top-8', 'Attrs': ui_attrs(['data-testid', 'aside'])}, 'children': c_17}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3'}, 'children': c_18}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_19}) }}
diff --git a/packages/jinja2/ui/blocks/checkout-step.html.j2 b/packages/jinja2/ui/blocks/checkout-step.html.j2
new file mode 100644
index 0000000..2a16fba
--- /dev/null
+++ b/packages/jinja2/ui/blocks/checkout-step.html.j2
@@ -0,0 +1,34 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checkout-step.json
+    One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`). Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).
+    Props (p): number, title, text, layout; children: markup. -#}
+{%- set v_number = ui_def(p['number'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], '') -%}
+{%- set v_layout = ui_def(p['layout'], 'cards') -%}
+{%- set c_6 -%}
+  {%- set c_5 -%}
+    {%- if ui_t(ui_eq(v_layout, 'numbered')) %}
+      {%- set c_1 -%}
+        {{ ui_text(v_number) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground'}, 'children': c_1}) }}
+    {%- endif %}
+    {%- set c_4 -%}
+      {%- set c_2 -%}
+        {{ ui_text(v_title) }}
+      {%- endset -%}
+      {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': 'lg', 'Weight': 'semibold'}, 'children': c_2}) }}
+      {%- if ui_t(v_text) %}
+        {%- set c_3 -%}
+          {{ ui_text(v_text) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_4}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start'}, 'children': c_5}) }}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch', 'Class': ui_s(('rounded bg-card inset-ring inset-ring-border p-6' if ui_t(ui_eq(v_layout, 'cards')) else 'border-t border-border pt-6')), 'Attrs': ui_attrs(['data-testid', 'step'])}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/checkout-submit.html.j2 b/packages/jinja2/ui/blocks/checkout-submit.html.j2
new file mode 100644
index 0000000..1896966
--- /dev/null
+++ b/packages/jinja2/ui/blocks/checkout-submit.html.j2
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checkout-submit.json
+    The end of the checkout form: the consent checkbox, the submit button and the legal line.
+    Props (p): id, consent, submit, legal. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_consent = ui_def(p['consent'], none) -%}
+{%- set v_submit = ui_def(p['submit'], none) -%}
+{%- set v_legal = ui_def(p['legal'], none) -%}
+{%- set c_5 -%}
+  {%- set c_2 -%}
+    {{ ui_include('ui/checkbox/checkbox.html.j2', {'p': {'Name': 'consent', 'Attrs': ui_attrs(['id', ui_tpl('{0}-consent', [v_id])])}}) }}
+    {%- set c_1 -%}
+      {{ ui_text(v_consent) }}
+    {%- endset -%}
+    {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-consent', [v_id])), 'Class': 'text-sm'}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-fit', '']))}, 'children': c_2}) }}
+  {%- set c_3 -%}
+    {{ ui_text(v_submit) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'lg', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_3}) }}
+  {%- set c_4 -%}
+    {{ ui_text(v_legal) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'start'}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/code-window.html.j2 b/packages/jinja2/ui/blocks/code-window.html.j2
new file mode 100644
index 0000000..1b9803b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/code-window.html.j2
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/code-window.json
+    A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).
+    Props (p): title, prompt, lines, className. -#}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_prompt = ui_def(p['prompt'], none) -%}
+{%- set v_lines = ui_def(p['lines'], none) -%}
+{%- set c_7 -%}
+  {%- set c_2 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex items-center border-b border-border px-4 py-2'}, 'children': c_2}) }}
+  {%- set c_6 -%}
+    {%- for v_line in ui_l(v_lines) %}
+      {%- set c_5 -%}
+        {%- if ui_t(ui_eq(ui_get(v_line, ['kind']), 'command')) %}
+          {%- set c_3 -%}
+            {{ ui_text(v_prompt) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'select-none text-muted-foreground'}, 'children': c_3}) }}
+        {%- endif %}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_line, ['text'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex gap-2', ('text-foreground' if ui_t(ui_eq(ui_get(v_line, ['kind']), 'command')) else 'text-muted-foreground')])), 'Attrs': ui_attrs(['data-kind', ui_get(v_line, ['kind'])])}, 'children': c_5}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-4 font-mono text-sm'}, 'children': c_6}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'group', 'aria-label', v_title, 'data-slot', 'code-window'])}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/compare-mark.html.j2 b/packages/jinja2/ui/blocks/compare-mark.html.j2
new file mode 100644
index 0000000..2783c0d
--- /dev/null
+++ b/packages/jinja2/ui/blocks/compare-mark.html.j2
@@ -0,0 +1,33 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/compare-mark.json
+    One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen readers), any other value is shown as text.
+    Props (p): value, yes, no. -#}
+{%- set v_value = ui_def(p['value'], none) -%}
+{%- set v_yes = ui_def(p['yes'], none) -%}
+{%- set v_no = ui_def(p['no'], none) -%}
+{%- if ui_t(ui_eq(v_value, 'yes')) %}
+  {%- set c_2 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'check', 'Size': 16, 'Class': 'text-foreground'}}) }}
+    {%- set c_1 -%}
+      {{ ui_text(v_yes) }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'inline-flex items-center gap-2', 'Attrs': ui_attrs(['data-mark', 'yes'])}, 'children': c_2}) }}
+{%- endif %}
+{%- if ui_t(ui_eq(v_value, 'no')) %}
+  {%- set c_4 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'minus', 'Size': 16}}) }}
+    {%- set c_3 -%}
+      {{ ui_text(v_no) }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_3}) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'inline-flex items-center gap-2 text-muted-foreground', 'Attrs': ui_attrs(['data-mark', 'no'])}, 'children': c_4}) }}
+{%- endif %}
+{%- if ui_t(ui_and([not (ui_eq(v_value, 'yes')), not (ui_eq(v_value, 'no'))])) %}
+  {%- set c_5 -%}
+    {{ ui_text(v_value) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_5}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/comparison-table.html.j2 b/packages/jinja2/ui/blocks/comparison-table.html.j2
new file mode 100644
index 0000000..e471380
--- /dev/null
+++ b/packages/jinja2/ui/blocks/comparison-table.html.j2
@@ -0,0 +1,76 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/comparison-table.json
+    Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle column), tone, density.
+    Props (p): id, title, rows, empty, labels, highlight, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_rows = ui_def(p['rows'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_highlight = ui_def(p['highlight'], 'none') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_16 -%}
+  {%- if ui_t(ui_eq(ui_len(v_rows), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'table', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_15 -%}
+      {%- set c_14 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_labels, ['caption'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-caption.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_1}) }}
+        {%- set c_7 -%}
+          {%- set c_6 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_labels, ['feature'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-4'}, 'children': c_2}) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_labels, ['a'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-4'}, 'children': c_3}) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_labels, ['b'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': ui_s(ui_cnv(['py-4', ('bg-muted' if ui_t(ui_eq(v_highlight, 'middle')) else '')])), 'Attrs': ui_attrs(['data-highlight', ('true' if ui_t(ui_eq(v_highlight, 'middle')) else 'false')])}, 'children': c_4}) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_labels, ['c'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-4'}, 'children': c_5}) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-row.html.j2', {'p': {}, 'children': c_6}) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head.html.j2', {'p': {}, 'children': c_7}) }}
+        {%- set c_13 -%}
+          {%- for v_row in ui_l(v_rows) %}
+            {%- set c_12 -%}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_row, ['label'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'row', 'Class': ui_s(ui_cnv(['font-medium', ('py-2' if ui_t(ui_eq(v_density, 'compact')) else 'py-4')]))}, 'children': c_8}) }}
+              {%- set c_9 -%}
+                {{ ui_include('blocks/compare-mark.html.j2', {'p': {'value': ui_get(v_row, ['a']), 'yes': ui_get(v_labels, ['yes']), 'no': ui_get(v_labels, ['no'])}}) }}
+              {%- endset -%}
+              {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': ui_s(ui_cnv([('py-2' if ui_t(ui_eq(v_density, 'compact')) else 'py-4')]))}, 'children': c_9}) }}
+              {%- set c_10 -%}
+                {{ ui_include('blocks/compare-mark.html.j2', {'p': {'value': ui_get(v_row, ['b']), 'yes': ui_get(v_labels, ['yes']), 'no': ui_get(v_labels, ['no'])}}) }}
+              {%- endset -%}
+              {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': ui_s(ui_cnv([('py-2' if ui_t(ui_eq(v_density, 'compact')) else 'py-4'), ('bg-muted font-semibold' if ui_t(ui_eq(v_highlight, 'middle')) else '')]))}, 'children': c_10}) }}
+              {%- set c_11 -%}
+                {{ ui_include('blocks/compare-mark.html.j2', {'p': {'value': ui_get(v_row, ['c']), 'yes': ui_get(v_labels, ['yes']), 'no': ui_get(v_labels, ['no'])}}) }}
+              {%- endset -%}
+              {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': ui_s(('py-2' if ui_t(ui_eq(v_density, 'compact')) else 'py-4'))}, 'children': c_11}) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-row.html.j2', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_12}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-body.html.j2', {'p': {}, 'children': c_13}) }}
+      {%- endset -%}
+      {{ ui_include('ui/table/table.html.j2', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'compare'])}, 'children': c_14}) }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'relative w-full overflow-x-auto'}, 'children': c_15}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_16}) }}
diff --git a/packages/jinja2/ui/blocks/contact-form.html.j2 b/packages/jinja2/ui/blocks/contact-form.html.j2
new file mode 100644
index 0000000..149a4b5
--- /dev/null
+++ b/packages/jinja2/ui/blocks/contact-form.html.j2
@@ -0,0 +1,81 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/contact-form.json
+    A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone (default, muted).
+    Props (p): id, title, text, labels, details, layout, fields, terms, level, page, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_details = ui_def(p['details'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'single') -%}
+{%- set v_fields = ui_def(p['fields'], 'full') -%}
+{%- set v_terms = ui_def(p['terms'], 'hide') -%}
+{%- set v_level = ui_def(p['level'], 2) -%}
+{%- set v_page = ui_def(p['page'], 'section') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_15 -%}
+  {%- set c_14 -%}
+    {%- set c_8 -%}
+      {%- if ui_t(ui_eq(v_fields, 'full')) %}
+        {%- set c_1 -%}
+          {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'name', 'Autocomplete': 'name', 'Attrs': ui_attrs(['id', ui_tpl('{0}-name', [v_id]), 'data-testid', 'field'])}}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['name']), 'htmlFor': ui_tpl('{0}-name', [v_id])}, 'children': c_1}) }}
+      {%- endif %}
+      {%- set c_2 -%}
+        {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'email', 'Name': 'email', 'Autocomplete': 'email', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}) }}
+      {%- endset -%}
+      {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['email']), 'htmlFor': ui_tpl('{0}-email', [v_id])}, 'children': c_2}) }}
+      {%- if ui_t(ui_eq(v_fields, 'full')) %}
+        {%- set c_3 -%}
+          {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'subject', 'Attrs': ui_attrs(['id', ui_tpl('{0}-subject', [v_id]), 'data-testid', 'field'])}}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['subject']), 'htmlFor': ui_tpl('{0}-subject', [v_id])}, 'children': c_3}) }}
+      {%- endif %}
+      {%- set c_4 -%}
+        {{ ui_include('ui/textarea/textarea.html.j2', {'p': {'Rows': 4, 'Name': 'message', 'Attrs': ui_attrs(['id', ui_tpl('{0}-message', [v_id]), 'data-testid', 'field'])}}) }}
+      {%- endset -%}
+      {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['message']), 'htmlFor': ui_tpl('{0}-message', [v_id])}, 'children': c_4}) }}
+      {%- if ui_t(ui_eq(v_terms, 'show')) %}
+        {%- set c_6 -%}
+          {{ ui_include('ui/checkbox/checkbox.html.j2', {'p': {'Name': 'consent', 'Attrs': ui_attrs(['id', ui_tpl('{0}-consent', [v_id])])}}) }}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_labels, ['consent'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-consent', [v_id])), 'Class': 'text-sm'}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-fit', '']))}, 'children': c_6}) }}
+      {%- endif %}
+      {%- set c_7 -%}
+        {{ ui_text(ui_get(v_labels, ['submit'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Class': 'w-fit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_7}) }}
+    {%- endset -%}
+    {{ ui_include('ui/form/form.html.j2', {'p': {'Method': 'dialog', 'Class': 'w-full gap-4', 'Attrs': ui_attrs(['data-testid', 'contact-form'])}, 'children': c_8}) }}
+    {%- if ui_t(ui_and([ui_eq(v_layout, 'split'), ui_gt(ui_len(v_details), 0)])) %}
+      {%- set c_13 -%}
+        {%- for v_d in ui_l(v_details) %}
+          {%- set c_12 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_d, ['icon'])), 'Size': 20}}) }}
+            {%- set c_11 -%}
+              {%- set c_9 -%}
+                {{ ui_text(ui_get(v_d, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_9}) }}
+              {%- set c_10 -%}
+                {{ ui_text(ui_get(v_d, ['text'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_10}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_11}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'detail'])}, 'children': c_12}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Attrs': ui_attrs(['data-testid', 'details'])}, 'children': c_13}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_layout, 'split')) else '1')), 'Class': 'items-start gap-8'}, 'children': c_14}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'heading': {'level': v_level}, 'tone': v_tone, 'density': ('roomy' if ui_t(ui_eq(v_page, 'full')) else 'default'), 'align': ('center' if ui_t(ui_eq(v_page, 'full')) else 'start'), 'measure': ('xl' if ui_t(ui_eq(v_layout, 'single')) else 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_15}) }}
diff --git a/packages/jinja2/ui/blocks/cookie-banner.html.j2 b/packages/jinja2/ui/blocks/cookie-banner.html.j2
new file mode 100644
index 0000000..0390461
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cookie-banner.html.j2
@@ -0,0 +1,55 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cookie-banner.json
+    A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings. Axes: layout (bar, card), actions (two, three), tone (default, muted).
+    Props (p): id, title, text, accept, decline, settings, layout, actions, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_accept = ui_def(p['accept'], none) -%}
+{%- set v_decline = ui_def(p['decline'], none) -%}
+{%- set v_settings = ui_def(p['settings'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'bar') -%}
+{%- set v_actions = ui_def(p['actions'], 'two') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_11 -%}
+  {%- set c_10 -%}
+    {%- set c_9 -%}
+      {%- set c_4 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'cookie', 'Size': 24}}) }}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(v_title) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': 'base', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}) }}
+          {%- set c_2 -%}
+            {{ ui_text(v_text) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_3}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'min-w-0'}, 'children': c_4}) }}
+      {%- set c_8 -%}
+        {%- if ui_t(ui_and([ui_eq(v_actions, 'three'), v_settings])) %}
+          {%- set c_5 -%}
+            {{ ui_text(v_settings) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'cookie-settings'])}, 'children': c_5}) }}
+        {%- endif %}
+        {%- set c_6 -%}
+          {{ ui_text(v_decline) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'cookie-decline'])}, 'children': c_6}) }}
+        {%- set c_7 -%}
+          {{ ui_text(v_accept) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'sm', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'cookie-accept'])}, 'children': c_7}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Class': 'shrink-0 flex-wrap'}, 'children': c_8}) }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border', ('bg-muted' if ui_t(ui_eq(v_tone, 'muted')) else 'bg-card'), ('md:flex-row md:items-center md:justify-between' if ui_t(ui_eq(v_layout, 'bar')) else 'mx-auto w-full max-w-md')]))}, 'children': c_9}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-4'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else ui_tpl('{0}-title', [v_id])), 'data-testid', 'cookie', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/credit-packs.html.j2 b/packages/jinja2/ui/blocks/credit-packs.html.j2
new file mode 100644
index 0000000..221983b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/credit-packs.html.j2
@@ -0,0 +1,62 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/credit-packs.json
+    Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile, row), tone, density.
+    Props (p): id, title, packs, empty, badges, buy, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_packs = ui_def(p['packs'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_badges = ui_def(p['badges'], none) -%}
+{%- set v_buy = ui_def(p['buy'], none) -%}
+{%- set v_cols = ui_def(p['cols'], '4') -%}
+{%- set v_item = ui_def(p['item'], 'tile') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(ui_len(v_packs), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'coins', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- for v_pack in ui_l(v_packs) %}
+        {%- set c_9 -%}
+          {%- set c_8 -%}
+            {%- set c_6 -%}
+              {%- if ui_t(ui_or([ui_get(v_pack, ['badge']), ui_and([not (ui_eq(v_item, 'row')), ui_gt(ui_count(v_packs, 'badge'), 0)])])) %}
+                {%- set c_2 -%}
+                  {%- if ui_t(ui_get(v_pack, ['badge'])) %}
+                    {%- set c_1 -%}
+                      {{ ui_text(ui_at(v_badges, ui_get(v_pack, ['badge']))) }}
+                    {%- endset -%}
+                    {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'w-fit shrink-0', 'Attrs': ui_attrs(['data-testid', 'badge'])}, 'children': c_1}) }}
+                  {%- endif %}
+                {%- endset -%}
+                {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-h-6 items-center', 'Attrs': ui_attrs(['data-slot', 'badge-slot'])}, 'children': c_2}) }}
+              {%- endif %}
+              {%- set c_5 -%}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_get(v_pack, ['name'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_3}) }}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_money(ui_get(v_pack, ['price']), ui_get(v_pack, ['currency']))) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '2xl', 'Weight': 'bold'}, 'children': c_4}) }}
+              {%- endset -%}
+              {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'min-w-0'}, 'children': c_5}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': ui_s(ui_cnv(['min-w-0', ('flex-1' if ui_t(ui_eq(v_item, 'row')) else '')]))}, 'children': c_6}) }}
+            {%- set c_7 -%}
+              {{ ui_text(v_buy) }}
+            {%- endset -%}
+            {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': ui_s(('default' if ui_t(ui_eq(ui_get(v_pack, ['badge']), 'popular')) else 'outline')), 'Size': 'sm', 'Type': 'button', 'Class': ui_s(ui_cnv(['w-fit shrink-0', ('' if ui_t(ui_eq(v_item, 'row')) else 'mt-auto')])), 'Attrs': ui_attrs(['data-testid', 'buy'])}, 'children': c_7}) }}
+          {%- endset -%}
+          {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex h-full gap-4', ('flex-row flex-wrap items-center justify-between' if ui_t(ui_eq(v_item, 'row')) else 'flex-col')]))}, 'children': c_8}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'default', 'Class': ui_s(ui_cnv(['h-full', ('gap-4 p-4' if ui_t(ui_eq(v_item, 'row')) else ('gap-4 p-4' if ui_t(ui_eq(v_density, 'compact')) else ''))])), 'Attrs': ui_attrs(['data-testid', 'item', 'data-badge', ui_get(v_pack, ['badge'])])}, 'children': c_9}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1' if ui_t(ui_eq(v_item, 'row')) else ui_fit_cols(('1-2' if ui_t(ui_eq(v_cols, '2')) else '1-4'), ui_len(v_packs)))), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_10}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': ('2xl' if ui_t(ui_eq(v_item, 'row')) else 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/cta-actions.html.j2 b/packages/jinja2/ui/blocks/cta-actions.html.j2
new file mode 100644
index 0000000..2415e6e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cta-actions.html.j2
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-actions.json
+    The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions form).
+    Props (p): id, actions, center. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_center = ui_def(p['center'], false) -%}
+{%- if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'form')) %}
+  {%- set c_4 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_actions, ['emailLabel'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_1}) }}
+    {%- set c_3 -%}
+      {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'email', 'Name': 'email', 'Class': 'min-w-0 flex-1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_actions, ['cta'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'w-full flex-wrap'}, 'children': c_3}) }}
+  {%- endset -%}
+  {{ ui_include('ui/form/form.html.j2', {'p': {'Method': 'dialog', 'Class': ui_s(ui_cnv(['w-full max-w-md', ('mx-auto' if ui_t(v_center) else '')])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_4}) }}
+{%- else %}
+  {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': ('center' if ui_t(v_center) else 'start')}}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/cta-band.html.j2 b/packages/jinja2/ui/blocks/cta-band.html.j2
new file mode 100644
index 0000000..6c85d91
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cta-band.html.j2
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-band.json
+    A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof (none, quote), density.
+    Props (p): id, title, text, actions, quote, layout, tone, proof, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_quote = ui_def(p['quote'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'card') -%}
+{%- set v_tone = ui_def(p['tone'], 'muted') -%}
+{%- set v_proof = ui_def(p['proof'], 'none') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_center = ui_or([ui_eq(v_layout, 'band'), ui_eq(v_layout, 'banner')]) -%}
+{%- if ui_t(ui_eq(v_layout, 'banner')) %}
+  {{ ui_include('blocks/cta-banner.html.j2', {'p': {'id': v_id, 'title': v_title, 'text': v_text, 'cta': ui_get(v_actions, ['cta']), 'href': ui_get(v_actions, ['href']), 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}}) }}
+{%- elif ui_t(ui_eq(v_layout, 'row')) %}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {%- set c_5 -%}
+        {%- set c_4 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(v_title) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(v_text) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'min-w-0'}, 'children': c_3}) }}
+          {%- if ui_t(ui_eq(v_proof, 'quote')) %}
+            {{ ui_include('blocks/quote-proof.html.j2', {'p': {'quote': ui_get(v_quote, ['text']), 'quoteBy': ui_get(v_quote, ['by']), 'center': v_center}}) }}
+          {%- endif %}
+          {{ ui_include('blocks/cta-actions.html.j2', {'p': {'id': v_id, 'actions': v_actions, 'center': v_center}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': 'flex flex-col gap-4 md:flex-row md:items-center md:justify-between'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'muted'}, 'children': c_5}) }}
+    {%- endset -%}
+    {{ ui_include('ui/container/container.html.j2', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_6}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': 'py-8', 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else ui_tpl('{0}-title', [v_id])), 'data-testid', 'section', 'data-tone', v_tone, 'data-density', v_density, 'aria-label', v_landmarkLabel])}, 'children': c_7}) }}
+{%- else %}
+  {%- set f_8 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+  {%- endset -%}
+  {%- set c_9 -%}
+    {%- if ui_t(ui_eq(v_proof, 'quote')) %}
+      {{ ui_include('blocks/quote-proof.html.j2', {'p': {'quote': ui_get(v_quote, ['text']), 'quoteBy': ui_get(v_quote, ['by']), 'center': v_center}}) }}
+    {%- endif %}
+    {{ ui_include('blocks/cta-actions.html.j2', {'p': {'id': v_id, 'actions': v_actions, 'center': v_center}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'layout': ('split' if ui_t(ui_eq(v_layout, 'split')) else 'stack'), 'align': ('center' if ui_t(v_center) else 'start'), 'boxed': ui_eq(v_layout, 'card'), 'media': {'show': ui_eq(v_layout, 'split')}, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel, 'aside': f_8}, 'children': c_9}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/cta-banner.html.j2 b/packages/jinja2/ui/blocks/cta-banner.html.j2
new file mode 100644
index 0000000..2631b50
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cta-banner.html.j2
@@ -0,0 +1,29 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-banner.json
+    A centered closing card: heading, one sentence and a pill button. Sizes from the default preset.
+    Props (p): id, title, text, cta, href, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_cta = ui_def(p['cta'], none) -%}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set v_tone = ui_def(p['tone'], 'muted') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_5 -%}
+  {%- set c_4 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': '3xl', 'Weight': 'semibold', 'Class': ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['cta', 'title']), 'leading-9'])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_text(v_text) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'semibold', 'Class': ui_s(ui_cnv(['leading-5 text-muted-foreground', ui_preset('blocks/presets/defaults.json', ['cta', 'text'])]))}, 'children': c_2}) }}
+    {%- set c_3 -%}
+      {{ ui_text(v_cta) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'lg', 'Href': ui_s(v_href), 'Class': ui_s(ui_preset('blocks/presets/defaults.json', ['cta', 'button'])), 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_3}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex w-full flex-col items-center gap-10 bg-muted px-6 text-center', ui_preset('blocks/presets/defaults.json', ['cta', 'panel'])])), 'Attrs': ui_attrs(['data-testid', 'cta-banner'])}, 'children': c_4}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': 'w-full py-0', 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else ui_tpl('{0}-title', [v_id])), 'data-testid', 'section', 'data-tone', v_tone, 'data-density', 'compact', 'aria-label', v_landmarkLabel])}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/cta-proof-items.html.j2 b/packages/jinja2/ui/blocks/cta-proof-items.html.j2
new file mode 100644
index 0000000..ef9d881
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cta-proof-items.html.j2
@@ -0,0 +1,125 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-proof-items.json
+    The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).
+    Props (p): content, proof, center. -#}
+{%- set v_content = ui_def(p['content'], none) -%}
+{%- set v_proof = ui_def(p['proof'], 'stats') -%}
+{%- set v_center = ui_def(p['center'], false) -%}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'logos'), ui_gt(ui_len(ui_get(v_content, ['logos'])), 0)])) %}
+  {%- set c_3 -%}
+    {%- for v_l in ui_l(ui_get(v_content, ['logos'])) %}
+      {%- set c_2 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 20}}) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_l, ['name'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'center', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_2}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_3}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'features'), ui_gt(ui_len(ui_get(v_content, ['features'])), 0)])) %}
+  {%- set c_9 -%}
+    {%- for v_f in ui_l(ui_get(v_content, ['features'])) %}
+      {%- set c_8 -%}
+        {%- set c_4 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_4}) }}
+        {%- set c_7 -%}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}) }}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_f, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_7}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_8}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 gap-4 text-left sm:grid-cols-2', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_9}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'stats'), ui_gt(ui_len(ui_get(v_content, ['stats'])), 0)])) %}
+  {%- set c_13 -%}
+    {%- for v_s in ui_l(ui_get(v_content, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_12 -%}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_10}) }}
+          {%- set c_11 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_11}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': ui_s(('items-center text-center' if ui_t(v_center) else '')), 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_12}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-3 gap-4', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_13}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'rows'), ui_gt(ui_len(ui_get(v_content, ['features'])), 0)])) %}
+  {%- set c_19 -%}
+    {%- for v_f in ui_l(ui_get(v_content, ['features'])) %}
+      {%- set c_18 -%}
+        {%- set c_14 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_14}) }}
+        {%- set c_17 -%}
+          {%- set c_15 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_15}) }}
+          {%- set c_16 -%}
+            {{ ui_text(ui_get(v_f, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_16}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_17}) }}
+      {%- endset -%}
+      {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_18}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_19}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'zones'), ui_gt(ui_len(ui_get(v_content, ['zones'])), 0)])) %}
+  {%- set c_27 -%}
+    {%- for v_z in ui_l(ui_get(v_content, ['zones'])) %}
+      {%- set c_26 -%}
+        {%- set c_22 -%}
+          {%- set c_20 -%}
+            {{ ui_text(ui_get(v_z, ['name'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_20}) }}
+          {%- set c_21 -%}
+            {{ ui_text(ui_get(v_z, ['area'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_21}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'min-w-0'}, 'children': c_22}) }}
+        {%- set c_25 -%}
+          {%- set c_23 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['price']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_23}) }}
+          {%- set c_24 -%}
+            {{ ui_text(ui_get(v_z, ['time'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_24}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'shrink-0 text-right'}, 'children': c_25}) }}
+      {%- endset -%}
+      {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-start justify-between gap-4 border-b border-border py-4', 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_26}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col p-0', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_27}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/cta-proof.html.j2 b/packages/jinja2/ui/blocks/cta-proof.html.j2
new file mode 100644
index 0000000..df12651
--- /dev/null
+++ b/packages/jinja2/ui/blocks/cta-proof.html.j2
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-proof.json
+    A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note. Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos, features, stats, rows, zones), mediaSide, tone.
+    Props (p): id, title, lead, badge, actions, content, note, layout, proof, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_content = ui_def(p['content'], none) -%}
+{%- set v_note = ui_def(p['note'], '') -%}
+{%- set v_layout = ui_def(p['layout'], 'center') -%}
+{%- set v_proof = ui_def(p['proof'], 'stats') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_2 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+{%- endset -%}
+{%- set c_3 -%}
+  {{ ui_include('blocks/cta-proof-items.html.j2', {'p': {'content': v_content, 'proof': v_proof, 'center': ui_eq(v_layout, 'center')}}) }}
+  {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': ('center' if ui_t(ui_eq(v_layout, 'center')) else 'start')}}) }}
+  {%- if ui_t(v_note) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_note) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'cta-note'])}, 'children': c_1}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'align': ('center' if ui_t(ui_eq(v_layout, 'center')) else 'start'), 'layout': ('stack' if ui_t(ui_eq(v_layout, 'center')) else 'split'), 'media': {'show': ui_eq(v_layout, 'split'), 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_2}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/dashboard-overview.html.j2 b/packages/jinja2/ui/blocks/dashboard-overview.html.j2
new file mode 100644
index 0000000..3f7e074
--- /dev/null
+++ b/packages/jinja2/ui/blocks/dashboard-overview.html.j2
@@ -0,0 +1,46 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/dashboard-overview.json
+    The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the activity side by side, stacked: one below the other), cols (2, 4), tone, density.
+    Props (p): id, title, metrics, chart, activity, layout, cols, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_metrics = ui_def(p['metrics'], none) -%}
+{%- set v_chart = ui_def(p['chart'], none) -%}
+{%- set v_activity = ui_def(p['activity'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'split') -%}
+{%- set v_cols = ui_def(p['cols'], '4') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_7 -%}
+  {%- set c_6 -%}
+    {%- if ui_t(ui_gt(ui_len(v_metrics), 0)) %}
+      {%- set c_2 -%}
+        {%- for v_m in ui_l(v_metrics) %}
+          {%- set c_1 -%}
+            {{ ui_include('blocks/stat-tile.html.j2', {'p': {'label': ui_get(v_m, ['label']), 'value': ui_get(v_m, ['value']), 'icon': ui_get(v_m, ['icon']), 'hint': ui_get(v_m, ['hint'])}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_1}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_cols, '2')) else '1-4')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}) }}
+    {%- endif %}
+    {%- set c_5 -%}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_chart, ['series'])), 0)) %}
+        {%- set c_3 -%}
+          {{ ui_include('blocks/bar-chart.html.j2', {'p': {'bars': ui_get(v_chart, ['series']), 'label': ui_get(v_chart, ['summary']), 'height': 144}}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/panel.html.j2', {'p': {'title': ui_get(v_chart, ['title']), 'description': ui_get(v_chart, ['text']), 'id': ui_tpl('{0}-chart', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_3}) }}
+      {%- endif %}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_activity, ['events'])), 0)) %}
+        {%- set c_4 -%}
+          {{ ui_include('blocks/timeline.html.j2', {'p': {'items': ui_get(v_activity, ['events'])}}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/panel.html.j2', {'p': {'title': ui_get(v_activity, ['title']), 'description': ui_get(v_activity, ['text']), 'id': ui_tpl('{0}-feed', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_4}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_layout, 'split')) else '1')), 'Class': 'items-stretch gap-4', 'Attrs': ui_attrs(['data-testid', 'panels'])}, 'children': c_5}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_6}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/dashboard-shell.html.j2 b/packages/jinja2/ui/blocks/dashboard-shell.html.j2
new file mode 100644
index 0000000..7d9eda8
--- /dev/null
+++ b/packages/jinja2/ui/blocks/dashboard-shell.html.j2
@@ -0,0 +1,48 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/dashboard-shell.json
+    The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset: over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide, rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.
+    Props (p): id, title, level, nav, topbar, search, sidebar, side, footer, content, frame, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_level = ui_def(p['level'], 2) -%}
+{%- set v_nav = ui_def(p['nav'], none) -%}
+{%- set v_topbar = ui_def(p['topbar'], 'full') -%}
+{%- set v_search = ui_def(p['search'], 'show') -%}
+{%- set v_sidebar = ui_def(p['sidebar'], 'wide') -%}
+{%- set v_side = ui_def(p['side'], 'start') -%}
+{%- set v_footer = ui_def(p['footer'], 'none') -%}
+{%- set v_content = ui_def(p['content'], 'grid') -%}
+{%- set v_frame = ui_def(p['frame'], 'window') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_titleId = ui_tpl('{0}-title', [v_id]) -%}
+{%- set c_5 -%}
+  {%- set c_4 -%}
+    {%- set c_3 -%}
+      {%- if ui_t(ui_eq(v_topbar, 'full')) %}
+        {{ ui_include('blocks/shell-topbar.html.j2', {'p': {'nav': v_nav, 'links': ('show' if ui_t(ui_eq(v_sidebar, 'none')) else 'hide'), 'search': v_search, 'landmarkLabel': v_landmarkLabel}}) }}
+      {%- endif %}
+      {%- set c_2 -%}
+        {%- if ui_t(not (ui_eq(v_sidebar, 'none'))) %}
+          {{ ui_include('blocks/shell-sidebar.html.j2', {'p': {'nav': v_nav, 'mode': v_sidebar, 'side': v_side, 'brand': ('hide' if ui_t(ui_eq(v_topbar, 'full')) else 'show'), 'landmarkLabel': v_landmarkLabel}}) }}
+        {%- endif %}
+        {%- set c_1 -%}
+          {%- if ui_t(ui_eq(v_topbar, 'inset')) %}
+            {{ ui_include('blocks/shell-topbar.html.j2', {'p': {'nav': v_nav, 'brand': ('show' if ui_t(ui_eq(v_sidebar, 'none')) else 'hide'), 'links': ('show' if ui_t(ui_eq(v_sidebar, 'none')) else 'hide'), 'search': v_search, 'landmarkLabel': v_landmarkLabel}}) }}
+          {%- endif %}
+          {{ ui_include('blocks/shell-content.html.j2', {'p': {'title': v_title, 'titleId': v_titleId, 'level': v_level, 'content': v_content}}) }}
+          {%- if ui_t(ui_eq(v_footer, 'inset')) %}
+            {{ ui_include('blocks/shell-footer.html.j2', {'p': {'nav': v_nav, 'place': 'inset', 'landmarkLabel': v_landmarkLabel}}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-w-0 flex-1 flex-col'}, 'children': c_1}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex min-h-0 flex-1', ('flex-row-reverse' if ui_t(ui_eq(v_side, 'end')) else '')]))}, 'children': c_2}) }}
+      {%- if ui_t(ui_eq(v_footer, 'full')) %}
+        {{ ui_include('blocks/shell-footer.html.j2', {'p': {'nav': v_nav, 'landmarkLabel': v_landmarkLabel}}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col overflow-hidden bg-background', ('min-h-160 rounded border border-border' if ui_t(ui_eq(v_frame, 'window')) else 'min-h-screen')])), 'Attrs': ui_attrs(['data-testid', 'window'])}, 'children': c_3}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('mx-auto w-full max-w-6xl px-4' if ui_t(ui_eq(v_frame, 'window')) else ''))}, 'children': c_4}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': ui_s(('bg-background py-12' if ui_t(ui_eq(v_frame, 'window')) else 'bg-background')), 'Attrs': ui_attrs(['id', v_id, 'aria-labelledby', (none if ui_t(v_landmarkLabel) else v_titleId), 'data-testid', 'dashboard-shell', 'data-topbar', v_topbar, 'data-sidebar', v_sidebar, 'data-footer', v_footer, 'aria-label', v_landmarkLabel])}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/delivery-info.html.j2 b/packages/jinja2/ui/blocks/delivery-info.html.j2
new file mode 100644
index 0000000..d0b1a55
--- /dev/null
+++ b/packages/jinja2/ui/blocks/delivery-info.html.j2
@@ -0,0 +1,81 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/delivery-info.json
+    How delivery works: the facts as icon cards, then the zones with their time and the order that ships free. Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones), tone, density.
+    Props (p): id, title, lead, facts, zones, labels, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_facts = ui_def(p['facts'], none) -%}
+{%- set v_zones = ui_def(p['zones'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'full') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_17 -%}
+  {%- set c_16 -%}
+    {%- if ui_t(ui_gt(ui_len(v_facts), 0)) %}
+      {%- set c_6 -%}
+        {%- for v_f in ui_l(v_facts) %}
+          {%- set c_5 -%}
+            {%- set c_1 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_1}) }}
+            {%- set c_4 -%}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_f, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_f, ['text'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'fact'])}, 'children': c_5}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_layout, 'split')) else '1-4')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'facts'])}, 'children': c_6}) }}
+    {%- endif %}
+    {%- if ui_t(ui_and([not (ui_eq(v_layout, 'facts')), ui_gt(ui_len(v_zones), 0)])) %}
+      {%- set c_15 -%}
+        {%- set c_7 -%}
+          {{ ui_text(ui_get(v_labels, ['zones'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_7}) }}
+        {%- set c_14 -%}
+          {%- for v_z in ui_l(v_zones) %}
+            {%- set c_13 -%}
+              {%- set c_10 -%}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_get(v_z, ['name'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_8}) }}
+                {%- set c_9 -%}
+                  {{ ui_text(ui_get(v_z, ['time'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'default'}, 'children': c_9}) }}
+              {%- endset -%}
+              {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'baseline', 'Justify': 'between'}, 'children': c_10}) }}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_z, ['area'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_11}) }}
+              {%- set c_12 -%}
+                {{ ui_text(ui_tpl(ui_get(v_labels, ['freeFrom']), [ui_money(ui_get(v_z, ['freeFrom']), ui_get(v_z, ['currency']))])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'medium'}, 'children': c_12}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': ui_s(('border-b border-border pb-4' if ui_t(ui_eq(v_layout, 'split')) else 'rounded bg-card inset-ring inset-ring-border p-6')), 'Attrs': ui_attrs(['data-testid', 'zone'])}, 'children': c_13}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('flex flex-col gap-4' if ui_t(ui_eq(v_layout, 'split')) else 'grid grid-cols-1 gap-4 md:grid-cols-3'))}, 'children': c_14}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_15}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['grid grid-cols-1 gap-8', ('items-start md:grid-cols-2' if ui_t(ui_eq(v_layout, 'split')) else '')]))}, 'children': c_16}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_17}) }}
diff --git a/packages/jinja2/ui/blocks/drawer-lines.html.j2 b/packages/jinja2/ui/blocks/drawer-lines.html.j2
new file mode 100644
index 0000000..036dbcc
--- /dev/null
+++ b/packages/jinja2/ui/blocks/drawer-lines.html.j2
@@ -0,0 +1,74 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/drawer-lines.json
+    The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal and total and the button.
+    Props (p): lines, rows, labels, drawer, media, field. -#}
+{%- set v_lines = ui_def(p['lines'], none) -%}
+{%- set v_rows = ui_def(p['rows'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_drawer = ui_def(p['drawer'], none) -%}
+{%- set v_media = ui_def(p['media'], 'image') -%}
+{%- set v_field = ui_def(p['field'], 'qty') -%}
+{%- set c_7 -%}
+  {%- for v_line in ui_l(v_lines) %}
+    {%- set c_6 -%}
+      {%- if ui_t(ui_eq(v_media, 'image')) %}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['size-16 shrink-0'])}}) }}
+      {%- endif %}
+      {%- set c_5 -%}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_line, ['name'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-sm font-medium'}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Justify': 'between', 'Align': 'start'}, 'children': c_3}) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_line, ['variant'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+        {{ ui_include('blocks/number-field.html.j2', {'p': {'value': ui_str(ui_get(v_line, ['qty'])), 'name': ui_tpl('{0}-{1}', [v_field, ui_get(v_line, ['id'])]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'flex-1'}, 'children': c_5}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'flex-1 p-4', 'Attrs': ui_attrs(['data-testid', 'lines'])}, 'children': c_7}) }}
+{%- set c_15 -%}
+  {%- set c_9 -%}
+    {%- set c_8 -%}
+      {{ ui_text(ui_get(v_drawer, ['progress'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_8}) }}
+    {{ ui_include('ui/form/progress.html.j2', {'p': {'Value': '96', 'Max': '100', 'Attrs': ui_attrs(['aria-label', ui_get(v_drawer, ['progress'])])}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'rounded bg-muted p-4', 'Attrs': ui_attrs(['data-testid', 'progress'])}, 'children': c_9}) }}
+  {%- set c_13 -%}
+    {%- for v_row in ui_l(v_rows) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t((true if ui_t(ui_get(v_row, ['strong'])) else ui_eq(v_i, 0))) %}
+        {%- set c_12 -%}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_row, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_10}) }}
+          {%- set c_11 -%}
+            {{ ui_text(ui_money(ui_get(v_row, ['amount']), ui_get(v_row, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_11}) }}
+        {%- endset -%}
+        {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': ui_s(('flex justify-between text-base font-bold' if ui_t(ui_get(v_row, ['strong'])) else 'flex justify-between text-sm text-muted-foreground'))}, 'children': c_12}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2'}, 'children': c_13}) }}
+  {%- set c_14 -%}
+    {{ ui_text(ui_get(v_labels, ['checkout'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'lg', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'checkout'])}, 'children': c_14}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'border-t border-border p-4'}, 'children': c_15}) }}
diff --git a/packages/jinja2/ui/blocks/dropdown-item.html.j2 b/packages/jinja2/ui/blocks/dropdown-item.html.j2
new file mode 100644
index 0000000..d1eb251
--- /dev/null
+++ b/packages/jinja2/ui/blocks/dropdown-item.html.j2
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/dropdown-item.json
+    A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex -1: the menu moves focus with the arrow keys.
+    Props (p): selected, className, icon (slot), right (slot); children: markup. -#}
+{%- set v_selected = ui_def(p['selected'], false) -%}
+{%- set c_5 -%}
+  {%- set c_4 -%}
+    {%- if ui_t((ui_def(p['icon'], none) is not none)) %}
+      {%- set c_1 -%}
+        {{ ui_def(p['icon'], '')|safe }}
+      {%- endset -%}
+      {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex w-7 shrink-0 items-center pr-2', 'Attrs': ui_attrs(['data-slot', 'dropdown-item-icon'])}, 'children': c_1}) }}
+    {%- endif %}
+    {%- set c_2 -%}
+      {{ ui_def(children, '')|safe }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(ui_cnv(['text-xs', 'min-w-0 flex-1 truncate px-1 font-bold'])), 'Attrs': ui_attrs(['data-slot', 'dropdown-item-label'])}, 'children': c_2}) }}
+    {%- if ui_t((ui_def(p['right'], none) is not none)) %}
+      {%- set c_3 -%}
+        {{ ui_def(p['right'], '')|safe }}
+      {%- endset -%}
+      {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex shrink-0 items-center pr-1', 'Attrs': ui_attrs(['data-slot', 'dropdown-item-right'])}, 'children': c_3}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted group-data-[state=selected]:bg-muted', 'Attrs': ui_attrs(['data-slot', 'dropdown-item-content'])}, 'children': c_4}) }}
+{%- endset -%}
+{{ ui_include('ui/button-plain/button-plain.html.j2', {'p': {'Type': 'button', 'Role': 'menuitem', 'Class': ui_s(ui_cnv(['group flex h-9 w-full items-center px-2 text-left text-foreground', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['tabindex', -1, 'data-slot', 'dropdown-item', 'data-state', ('selected' if ui_t(v_selected) else 'default')])}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/editor-tab.html.j2 b/packages/jinja2/ui/blocks/editor-tab.html.j2
new file mode 100644
index 0000000..5158606
--- /dev/null
+++ b/packages/jinja2/ui/blocks/editor-tab.html.j2
@@ -0,0 +1,23 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/editor-tab.json
+    An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close events.
+    Props (p): label, closeLabel, active, preview, className, icon (slot). -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_closeLabel = ui_def(p['closeLabel'], none) -%}
+{%- set v_active = ui_def(p['active'], false) -%}
+{%- set v_preview = ui_def(p['preview'], false) -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {{ ui_def(p['icon'], '')|safe }}
+    {%- set c_1 -%}
+      {{ ui_text(v_label) }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(ui_cnv(['text-xs text-foreground', ('font-semibold italic' if ui_t(v_preview) else 'font-bold')])), 'Attrs': ui_attrs(['data-slot', 'editor-tab-label'])}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'x', 'Size': 16}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Class': 'p-0 [&>svg]:size-4', 'AriaLabel': ui_s(v_closeLabel), 'Attrs': ui_attrs(['tabindex', -1, 'data-slot', 'editor-tab-close'])}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex h-10 items-center gap-2 px-3', 'Attrs': ui_attrs(['data-slot', 'editor-tab-content'])}, 'children': c_3}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card [&_svg]:text-muted-foreground', 'border-r border-border', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'tab', 'aria-selected', v_active, 'tabindex', (0 if ui_t(v_active) else -1), 'data-slot', 'editor-tab', 'data-state', ('active' if ui_t(v_active) else 'default')])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/empty-panel.html.j2 b/packages/jinja2/ui/blocks/empty-panel.html.j2
new file mode 100644
index 0000000..dc68f24
--- /dev/null
+++ b/packages/jinja2/ui/blocks/empty-panel.html.j2
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/empty-panel.json
+    An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain. Axes: layout (card, plain), actions (button, none), size (default, compact).
+    Props (p): id, title, text, icon, cta, ctaHref, layout, actions, visual, size, landmarkLabel. -#}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_icon = ui_def(p['icon'], 'inbox') -%}
+{%- set v_cta = ui_def(p['cta'], none) -%}
+{%- set v_ctaHref = ui_def(p['ctaHref'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'card') -%}
+{%- set v_actions = ui_def(p['actions'], 'button') -%}
+{%- set v_visual = ui_def(p['visual'], 'icon') -%}
+{%- set v_size = ui_def(p['size'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_8 -%}
+  {%- set c_7 -%}
+    {%- if ui_t(ui_eq(v_visual, 'image')) %}
+      {%- set c_4 -%}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3', 'className': ui_cnv(['w-full max-w-xs'])}}) }}
+        {%- set c_1 -%}
+          {{ ui_text(v_title) }}
+        {%- endset -%}
+        {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(v_text) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+        {%- if ui_t(ui_eq(v_actions, 'button')) %}
+          {%- set c_3 -%}
+            {{ ui_text(v_cta) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'sm', 'Href': ui_s(v_ctaHref), 'Attrs': ui_attrs(['data-testid', 'empty-action'])}, 'children': c_3}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'mx-auto max-w-md text-center', 'Attrs': ui_attrs(['data-testid', 'empty-visual'])}, 'children': c_4}) }}
+    {%- else %}
+      {%- set f_5 -%}
+        {%- if ui_t(ui_eq(v_actions, 'button')) %}
+          {%- set c_6 -%}
+            {{ ui_text(v_cta) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'sm', 'Href': ui_s(v_ctaHref), 'Attrs': ui_attrs(['data-testid', 'empty-action'])}, 'children': c_6}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': v_icon, 'title': v_title, 'text': v_text, 'className': ui_cnv([ui_cnv(['mx-auto max-w-xl', ('bg-transparent inset-ring-0' if ui_t(ui_eq(v_layout, 'plain')) else ''), ('py-6' if ui_t(ui_eq(v_size, 'compact')) else '')])]), 'action': f_5}}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', ('py-4' if ui_t(ui_eq(v_size, 'compact')) else 'py-8')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_7}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_title]), 'data-testid', 'empty'])}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/empty-state.html.j2 b/packages/jinja2/ui/blocks/empty-state.html.j2
new file mode 100644
index 0000000..f711d1b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/empty-state.html.j2
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/empty-state.json
+    Empty list or nothing found: a round icon, a title, a hint and an optional action.
+    Props (p): icon, title, text, className, action (slot). -#}
+{%- set v_icon = ui_def(p['icon'], 'inbox') -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set c_4 -%}
+  {%- set c_1 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(v_icon), 'Size': 20}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/iconbadge/icon-badge.html.j2', {'p': {'Size': 'lg'}, 'children': c_1}) }}
+  {%- set c_2 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-sm font-bold text-foreground'}, 'children': c_2}) }}
+  {%- if ui_t(v_text) %}
+    {%- set c_3 -%}
+      {{ ui_text(v_text) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 max-w-80 text-xs font-medium text-muted-foreground'}, 'children': c_3}) }}
+  {%- endif %}
+  {{ ui_def(p['action'], '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'status'])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/error-page.html.j2 b/packages/jinja2/ui/blocks/error-page.html.j2
new file mode 100644
index 0000000..0d43016
--- /dev/null
+++ b/packages/jinja2/ui/blocks/error-page.html.j2
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/error-page.json
+    A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two), tone.
+    Props (p): id, title, text, status, actions, level, layout, code, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_status = ui_def(p['status'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_layout = ui_def(p['layout'], 'centered') -%}
+{%- set v_code = ui_def(p['code'], 'show') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_2 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+{%- endset -%}
+{%- set c_3 -%}
+  {%- if ui_t(ui_eq(v_code, 'show')) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_status) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '4xl', 'Weight': 'bold', 'Class': ui_s(ui_cnv(['text-8xl text-muted-foreground', ('' if ui_t(ui_eq(v_layout, 'split')) else 'text-center')])), 'Attrs': ui_attrs(['data-testid', 'error-code'])}, 'children': c_1}) }}
+  {%- endif %}
+  {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': ('start' if ui_t(ui_eq(v_layout, 'split')) else 'center')}}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'heading': {'level': v_level}, 'layout': ('split' if ui_t(ui_eq(v_layout, 'split')) else 'stack'), 'media': {'show': ui_eq(v_layout, 'split')}, 'align': ('start' if ui_t(ui_eq(v_layout, 'split')) else 'center'), 'tone': v_tone, 'density': 'roomy', 'landmarkLabel': v_landmarkLabel, 'aside': f_2}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/faq-cards.html.j2 b/packages/jinja2/ui/blocks/faq-cards.html.j2
new file mode 100644
index 0000000..d8d7c0c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/faq-cards.html.j2
@@ -0,0 +1,44 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-cards.json
+    The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).
+    Props (p): items, labels, cards. -#}
+{%- set v_items = ui_def(p['items'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_cards = ui_def(p['cards'], 'grid3') -%}
+{%- set c_9 -%}
+  {%- for v_q in ui_l(v_items) %}
+    {%- set c_8 -%}
+      {%- if ui_t(ui_eq(v_cards, 'icons')) %}
+        {%- set c_1 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_q, ['icon'])), 'Size': 20}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_1}) }}
+      {%- endif %}
+      {%- set c_5 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_q, ['category'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm', 'Class': 'w-fit'}, 'children': c_2}) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_q, ['question'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'semibold'}, 'children': c_3}) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_q, ['answer'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_5}) }}
+      {%- set c_7 -%}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['more'])) }}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'link', 'Size': 'sm', 'Class': 'gap-2 px-0 font-medium'}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'mt-auto'}, 'children': c_7}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/article-block.html.j2', {'p': {'className': ui_cnv(['rounded bg-card inset-ring inset-ring-border flex flex-col gap-4 p-6']), 'testid': 'faq-card'}, 'children': c_8}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4' if ui_t(ui_eq(v_cards, 'grid4')) else 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3')), 'Attrs': ui_attrs(['data-testid', 'faq'])}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/faq-disclosures.html.j2 b/packages/jinja2/ui/blocks/faq-disclosures.html.j2
new file mode 100644
index 0000000..8371702
--- /dev/null
+++ b/packages/jinja2/ui/blocks/faq-disclosures.html.j2
@@ -0,0 +1,22 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-disclosures.json
+    The questions of FaqSplit as native disclosures, one open at a time.
+    Props (p): items, name. -#}
+{%- set v_items = ui_def(p['items'], none) -%}
+{%- set v_name = ui_def(p['name'], none) -%}
+{%- set c_4 -%}
+  {%- for v_q in ui_l(v_items) %}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_q, ['question'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/disclosure/summary.html.j2', {'p': {'Variant': 'item'}, 'children': c_1}) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_q, ['answer'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'pb-4 text-muted-foreground'}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/disclosure/disclosure.html.j2', {'p': {'Variant': 'item', 'Name': ui_s(v_name), 'Attrs': ui_attrs(['data-testid', 'faq-item'])}, 'children': c_3}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'faq'])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/faq-finder.html.j2 b/packages/jinja2/ui/blocks/faq-finder.html.j2
new file mode 100644
index 0000000..703bb59
--- /dev/null
+++ b/packages/jinja2/ui/blocks/faq-finder.html.j2
@@ -0,0 +1,42 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-finder.json
+    The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as popular links.
+    Props (p): items, labels, topics. -#}
+{%- set v_items = ui_def(p['items'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_topics = ui_def(p['topics'], none) -%}
+{%- set c_8 -%}
+  {{ ui_include('blocks/search-field.html.j2', {'p': {'label': ui_get(v_labels, ['search']), 'placeholder': ui_get(v_labels, ['search']), 'value': ui_coalesce([ui_get(v_labels, ['query']), ''])}}) }}
+  {%- set c_2 -%}
+    {%- for v_t in ui_l(v_topics) %}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_t, ['title'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'faq-topic', 'data-value', ui_get(v_t, ['value'])])}, 'children': c_1}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_2}) }}
+  {%- set c_7 -%}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_labels, ['popular'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_3}) }}
+    {%- set c_6 -%}
+      {%- for v_q in ui_l(v_items) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 3)) %}
+          {%- set c_5 -%}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_q, ['question'])) }}
+            {%- endset -%}
+            {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_q, ['href']), 'className': ui_cnv(['text-sm font-medium']), 'size': 'sm'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {'Attrs': ui_attrs(['data-testid', 'faq-popular'])}, 'children': c_5}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_6}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_7}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'faq-finder'])}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/faq-help.html.j2 b/packages/jinja2/ui/blocks/faq-help.html.j2
new file mode 100644
index 0000000..4d41f56
--- /dev/null
+++ b/packages/jinja2/ui/blocks/faq-help.html.j2
@@ -0,0 +1,49 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-help.json
+    The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon, name, one line) and a link.
+    Props (p): labels, channels, landmarkLabel. -#}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_channels = ui_def(p['channels'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_11 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['asideTitle'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'lg', 'Weight': 'semibold'}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_labels, ['asideText'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_3}) }}
+  {%- set c_9 -%}
+    {%- for v_c in ui_l(v_channels) %}
+      {%- set c_8 -%}
+        {%- set c_4 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 20}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_4}) }}
+        {%- set c_7 -%}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_c, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}) }}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_c, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_7}) }}
+      {%- endset -%}
+      {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'faq-channel'])}, 'children': c_8}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0'}, 'children': c_9}) }}
+  {%- set c_10 -%}
+    {{ ui_text(ui_get(v_labels, ['asideCta'])) }}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'link', 'Size': 'sm', 'Class': 'gap-2 px-0 font-medium'}, 'children': c_10}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'aside', 'Class': 'rounded bg-card inset-ring inset-ring-border flex flex-col gap-6 p-6', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, ui_get(v_labels, ['asideTitle'])]), 'data-testid', 'faq-help'])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/faq-list.html.j2 b/packages/jinja2/ui/blocks/faq-list.html.j2
new file mode 100644
index 0000000..9270629
--- /dev/null
+++ b/packages/jinja2/ui/blocks/faq-list.html.j2
@@ -0,0 +1,79 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-list.json
+    A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters by `filter.category`), density, tone.
+    Props (p): id, title, items, search, filter, layout, cols, empty, multiple, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_items = ui_def(p['items'], none) -%}
+{%- set v_search = ui_def(p['search'], none) -%}
+{%- set v_filter = ui_def(p['filter'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'accordion') -%}
+{%- set v_cols = ui_def(p['cols'], '1') -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_multiple = ui_def(p['multiple'], false) -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_inCategory = ui_where(v_items, 'category', ui_get(v_filter, ['category'])) -%}
+{%- set v_shown = ui_match(v_inCategory, 'question', ui_get(v_search, ['query'])) -%}
+{%- set c_13 -%}
+  {%- if ui_t(ui_eq(ui_get(v_search, ['mode']), 'field')) %}
+    {{ ui_include('blocks/search-field.html.j2', {'p': {'label': ui_coalesce([ui_get(v_search, ['label']), '']), 'placeholder': ui_get(v_search, ['label']), 'value': ui_coalesce([ui_get(v_search, ['query']), ''])}}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(ui_get(v_filter, ['mode']), 'categories')) %}
+    {%- set c_2 -%}
+      {%- for v_tab in ui_l(ui_get(v_filter, ['tabs'])) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_tab, ['title'])) }}
+        {%- endset -%}
+        {{ ui_include('blocks/switcher-item.html.j2', {'p': {'active': ui_eq(ui_get(v_tab, ['value']), ui_get(v_filter, ['category']))}, 'children': c_1}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('blocks/switcher.html.j2', {'p': {'label': ui_get(v_filter, ['label'])}, 'children': c_2}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(ui_len(v_shown), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'circle-question-mark', 'title': v_empty}}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'chat')) %}
+    {%- set c_8 -%}
+      {%- for v_item in ui_l(v_shown) %}
+        {%- set c_7 -%}
+          {%- set c_4 -%}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_item, ['question'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_3}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground'}, 'children': c_4}) }}
+          {%- set c_6 -%}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_item, ['answer'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_5}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4'}, 'children': c_6}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'faq-item'])}, 'children': c_7}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'faq'])}, 'children': c_8}) }}
+  {%- else %}
+    {%- set c_12 -%}
+      {%- for v_item in ui_l(v_shown) %}
+        {%- set c_11 -%}
+          {%- set c_9 -%}
+            {{ ui_text(ui_get(v_item, ['question'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/disclosure/summary.html.j2', {'p': {'Variant': 'item'}, 'children': c_9}) }}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_item, ['answer'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'pb-4 text-muted-foreground'}, 'children': c_10}) }}
+        {%- endset -%}
+        {{ ui_include('ui/disclosure/disclosure.html.j2', {'p': {'Variant': 'item', 'Name': ui_s((none if ui_t(v_multiple) else ui_tpl('{0}-faq', [ui_coalesce([v_id, 'faq'])]))), 'Attrs': ui_attrs(['data-testid', 'faq-item'])}, 'children': c_11}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_cols, '2')) else '1')), 'Class': 'items-start gap-x-8', 'Attrs': ui_attrs(['data-testid', 'faq'])}, 'children': c_12}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': ('2xl' if ui_t(ui_eq(v_layout, 'chat')) else 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_13}) }}
diff --git a/packages/jinja2/ui/blocks/faq-split.html.j2 b/packages/jinja2/ui/blocks/faq-split.html.j2
new file mode 100644
index 0000000..9c496d4
--- /dev/null
+++ b/packages/jinja2/ui/blocks/faq-split.html.j2
@@ -0,0 +1,74 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-split.json
+    Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside: the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.
+    Props (p): id, title, lead, badge, items, channels, topics, labels, layout, cards, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_items = ui_def(p['items'], none) -%}
+{%- set v_channels = ui_def(p['channels'], none) -%}
+{%- set v_topics = ui_def(p['topics'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'head') -%}
+{%- set v_cards = ui_def(p['cards'], 'grid3') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_gt(ui_len(v_items), 0)) %}
+  {%- if ui_t(ui_eq(v_layout, 'cards')) %}
+    {%- set c_1 -%}
+      {{ ui_include('blocks/faq-cards.html.j2', {'p': {'items': v_items, 'labels': v_labels, 'cards': v_cards}}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'head')) %}
+    {%- set f_4 -%}
+      {{ ui_include('blocks/faq-disclosures.html.j2', {'p': {'items': v_items, 'name': ui_tpl('{0}-faq', [v_id])}}) }}
+    {%- endset -%}
+    {%- set c_5 -%}
+      {%- set c_3 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['cta'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Attrs': ui_attrs(['data-testid', 'faq-cta'])}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {}, 'children': c_3}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': 'end', 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_4}, 'children': c_5}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'aside')) %}
+    {%- set f_6 -%}
+      {{ ui_include('blocks/faq-help.html.j2', {'p': {'labels': v_labels, 'channels': v_channels, 'landmarkLabel': v_landmarkLabel}}) }}
+    {%- endset -%}
+    {%- set c_7 -%}
+      {{ ui_include('blocks/faq-disclosures.html.j2', {'p': {'items': v_items, 'name': ui_tpl('{0}-faq', [v_id])}}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': 'end', 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_6}, 'children': c_7}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'media')) %}
+    {%- set f_10 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+    {%- endset -%}
+    {%- set c_11 -%}
+      {{ ui_include('blocks/faq-disclosures.html.j2', {'p': {'items': v_items, 'name': ui_tpl('{0}-faq', [v_id])}}) }}
+      {%- set c_9 -%}
+        {%- set c_8 -%}
+          {{ ui_text(ui_get(v_labels, ['cta'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Attrs': ui_attrs(['data-testid', 'faq-cta'])}, 'children': c_8}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {}, 'children': c_9}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide, 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_10}, 'children': c_11}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'search')) %}
+    {%- set f_12 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+    {%- endset -%}
+    {%- set c_13 -%}
+      {{ ui_include('blocks/faq-finder.html.j2', {'p': {'items': v_items, 'labels': v_labels, 'topics': v_topics}}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_12}, 'children': c_13}) }}
+  {%- endif %}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/feature-accordion.html.j2 b/packages/jinja2/ui/blocks/feature-accordion.html.j2
new file mode 100644
index 0000000..f6bf231
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-accordion.html.j2
@@ -0,0 +1,48 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-accordion.json
+    Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.
+    Props (p): id, title, features, empty, expand, media, multiple, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_expand = ui_def(p['expand'], 'first') -%}
+{%- set v_media = ui_def(p['media'], 'none') -%}
+{%- set v_multiple = ui_def(p['multiple'], false) -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_7 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+{%- endset -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layout-grid', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_6 -%}
+      {%- for v_f in ui_l(v_features) %}
+        {%- set v_i = loop.index0 -%}
+        {%- set c_5 -%}
+          {%- set c_3 -%}
+            {%- set c_2 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}) }}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_f, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-base font-semibold'}, 'children': c_1}) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex min-w-0 items-center justify-start gap-4'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/disclosure/summary.html.j2', {'p': {'Variant': 'item'}, 'children': c_3}) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_f, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'pb-4 text-muted-foreground'}, 'children': c_4}) }}
+        {%- endset -%}
+        {{ ui_include('ui/disclosure/disclosure.html.j2', {'p': {'Variant': 'item', 'Name': ui_s((none if ui_t(v_multiple) else ui_tpl('{0}-accordion', [ui_coalesce([v_id, 'accordion'])]))), 'Open': ui_t(ui_and([ui_eq(v_expand, 'first'), ui_eq(v_i, 0)])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_5}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'layout': ('split' if ui_t(ui_eq(v_media, 'image')) else 'stack'), 'media': {'show': ui_eq(v_media, 'image')}, 'landmarkLabel': v_landmarkLabel, 'aside': f_7}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/feature-cards.html.j2 b/packages/jinja2/ui/blocks/feature-cards.html.j2
new file mode 100644
index 0000000..fe30384
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-cards.html.j2
@@ -0,0 +1,67 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-cards.json
+    The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names.
+    Props (p): features, cols, item. -#}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_cols = ui_def(p['cols'], '1-3') -%}
+{%- set v_item = ui_def(p['item'], 'card') -%}
+{%- set c_15 -%}
+  {%- for v_feature in ui_l(v_features) %}
+    {%- if ui_t(ui_eq(v_item, 'tile')) %}
+      {%- set c_5 -%}
+        {%- set c_4 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_feature, ['icon'])), 'Size': 20}}) }}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_feature, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_feature, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'compact', 'Attrs': ui_attrs(['data-testid', 'feature-card'])}, 'children': c_5}) }}
+    {%- elif ui_t(ui_eq(v_item, 'cell')) %}
+      {%- set c_9 -%}
+        {%- set c_6 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_feature, ['icon'])), 'Size': 24}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/iconbadge/icon-badge.html.j2', {'p': {'Variant': 'primary', 'Size': 'xl', 'Attrs': ui_attrs(['data-testid', 'feature-icon'])}, 'children': c_6}) }}
+        {%- set c_7 -%}
+          {{ ui_text(ui_get(v_feature, ['title'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'semibold', 'Class': 'leading-6'}, 'children': c_7}) }}
+        {%- set c_8 -%}
+          {{ ui_text(ui_get(v_feature, ['text'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'leading-5 text-muted-foreground'}, 'children': c_8}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'h-full gap-8 bg-background px-6 py-12 text-center', 'Attrs': ui_attrs(['data-testid', 'feature-card'])}, 'children': c_9}) }}
+    {%- else %}
+      {%- set c_14 -%}
+        {%- set c_11 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_feature, ['icon'])), 'Size': 24}}) }}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_feature, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/card/card-title.html.j2', {'p': {'As': ui_i(3)}, 'children': c_10}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card-header.html.j2', {'p': {'Class': 'flex flex-col gap-4'}, 'children': c_11}) }}
+        {%- set c_13 -%}
+          {%- set c_12 -%}
+            {{ ui_text(ui_get(v_feature, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_12}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card-content.html.j2', {'p': {}, 'children': c_13}) }}
+      {%- endset -%}
+      {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'feature-card'])}, 'children': c_14}) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(v_cols), 'Class': ui_s((ui_cnv(['w-full gap-px overflow-hidden bg-border p-px', ui_preset('blocks/presets/defaults.json', ['features', 'cells'])]) if ui_t(ui_eq(v_item, 'cell')) else 'gap-6')), 'Attrs': ui_attrs(['data-testid', 'feature-grid'])}, 'children': c_15}) }}
diff --git a/packages/jinja2/ui/blocks/feature-grid.html.j2 b/packages/jinja2/ui/blocks/feature-grid.html.j2
new file mode 100644
index 0000000..cb73db0
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-grid.html.j2
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-grid.json
+    A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon), media side (rows), density, tone.
+    Props (p): id, title, features, empty, action, layout, cols, item, mediaSide, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_action = ui_def(p['action'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_cols = ui_def(p['cols'], '1-3') -%}
+{%- set v_item = ui_def(p['item'], 'card') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_eq(v_item, 'cell')) %}
+  {%- set c_4 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(v_title) }}
+      {%- endset -%}
+      {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': 'sm', 'Weight': 'semibold', 'Class': 'leading-7', 'Attrs': ui_attrs(['id', ui_add(v_id, '-title')])}, 'children': c_1}) }}
+      {%- if ui_t(ui_and([ui_get(v_action, ['label']), ui_get(v_action, ['href'])])) %}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_action, ['label'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_get(v_action, ['href'])), 'Variant': 'default', 'Class': ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'tiny']), 'shrink-0 font-medium leading-5'])), 'Attrs': ui_attrs(['data-testid', 'section-action'])}, 'children': c_2}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'w-full'}, 'children': c_3}) }}
+    {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+      {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layout-grid', 'title': v_empty}}) }}
+    {%- else %}
+      {{ ui_include('blocks/feature-cards.html.j2', {'p': {'features': v_features, 'cols': v_cols, 'item': v_item}}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'tone': v_tone, 'density': v_density, 'measure': 'fill', 'className': ui_cnv(['py-0']), 'landmarkLabel': v_landmarkLabel}, 'children': c_4}) }}
+{%- else %}
+  {%- set c_5 -%}
+    {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+      {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layout-grid', 'title': v_empty}}) }}
+    {%- elif ui_t(ui_eq(v_layout, 'rows')) %}
+      {{ ui_include('blocks/feature-rows.html.j2', {'p': {'features': v_features, 'mediaSide': v_mediaSide}}) }}
+    {%- else %}
+      {{ ui_include('blocks/feature-cards.html.j2', {'p': {'features': v_features, 'cols': v_cols, 'item': v_item}}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'action': v_action, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_5}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/feature-metric-cards.html.j2 b/packages/jinja2/ui/blocks/feature-metric-cards.html.j2
new file mode 100644
index 0000000..464e56c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-metric-cards.html.j2
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-metric-cards.json
+    Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the label.
+    Props (p): stats. -#}
+{%- set v_stats = ui_def(p['stats'], none) -%}
+{%- set c_7 -%}
+  {%- for v_s in ui_l(v_stats) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 4)) %}
+      {%- set c_6 -%}
+        {%- set c_1 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_s, ['icon'])), 'Size': 20}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'}, 'children': c_1}) }}
+        {%- set c_5 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'lg', 'Weight': 'bold'}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_s, ['hint'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'min-w-0'}, 'children': c_5}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'feature-stat'])}, 'children': c_6}) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2'}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/feature-pairs.html.j2 b/packages/jinja2/ui/blocks/feature-pairs.html.j2
new file mode 100644
index 0000000..953e1fd
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-pairs.html.j2
@@ -0,0 +1,31 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-pairs.json
+    Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards.
+    Props (p): features. -#}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set c_6 -%}
+  {%- for v_f in ui_l(v_features) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 4)) %}
+      {%- set c_5 -%}
+        {%- set c_1 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground'}, 'children': c_1}) }}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_f, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'min-w-0'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'feature-item'])}, 'children': c_5}) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 gap-6 sm:grid-cols-2'}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/feature-rows.html.j2 b/packages/jinja2/ui/blocks/feature-rows.html.j2
new file mode 100644
index 0000000..b111974
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-rows.html.j2
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-rows.json
+    The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names.
+    Props (p): features, mediaSide. -#}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set c_6 -%}
+  {%- for v_feature in ui_l(v_features) %}
+    {%- set c_5 -%}
+      {%- set c_3 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_feature, ['icon'])), 'Size': 24}}) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_feature, ['title'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_feature, ['text'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'min-w-0'}, 'children': c_3}) }}
+      {%- set c_4 -%}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_feature, ['title']), 'ratio': '4/3'}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['w-full min-w-0', ('md:order-first' if ui_t(ui_eq(v_mediaSide, 'start')) else ('md:group-even:order-first' if ui_t(ui_eq(v_mediaSide, 'alternate')) else ''))]))}, 'children': c_4}) }}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-2', 'Class': 'group items-center gap-8', 'Attrs': ui_attrs(['data-testid', 'feature-card'])}, 'children': c_5}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '8', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'feature-rows'])}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/feature-showcase.html.j2 b/packages/jinja2/ui/blocks/feature-showcase.html.j2
new file mode 100644
index 0000000..5de6dea
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-showcase.html.j2
@@ -0,0 +1,55 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-showcase.json
+    Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4), tone.
+    Props (p): id, title, lead, features, empty, more, item, cols, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_more = ui_def(p['more'], none) -%}
+{%- set v_item = ui_def(p['item'], 'picture') -%}
+{%- set v_cols = ui_def(p['cols'], '3') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layout-grid', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_f in ui_l(v_features) %}
+        {%- set c_6 -%}
+          {%- if ui_t(ui_eq(v_item, 'picture')) %}
+            {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_f, ['title'])}}) }}
+          {%- else %}
+            {%- set c_1 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 32}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex aspect-video items-center justify-center rounded bg-muted text-foreground', 'Attrs': ui_attrs(['data-testid', 'showcase-panel'])}, 'children': c_1}) }}
+          {%- endif %}
+          {%- set c_5 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'semibold'}, 'children': c_2}) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_f, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+            {%- if ui_t(ui_eq(v_item, 'picture')) %}
+              {%- set c_4 -%}
+                {{ ui_text(v_more) }}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+              {%- endset -%}
+              {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_f, ['href']), 'className': ui_cnv(['mt-auto gap-2 pt-2 text-sm font-medium']), 'size': 'sm', 'testid': 'read'}, 'children': c_4}) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': 'flex flex-1 flex-col gap-2'}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'default', 'Class': 'h-full gap-4 overflow-hidden', 'Attrs': ui_attrs(['data-testid', 'showcase-card'])}, 'children': c_6}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4' if ui_t(ui_eq(v_cols, '4')) else 'grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3'))}, 'children': c_7}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/feature-split.html.j2 b/packages/jinja2/ui/blocks/feature-split.html.j2
new file mode 100644
index 0000000..58062db
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-split.html.j2
@@ -0,0 +1,45 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-split.json
+    Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four metric cards and the actions), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, features, stats, actions, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_level = ui_def(p['level'], 2) -%}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_stats = ui_def(p['stats'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_1 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': ('1/1' if ui_t(ui_eq(v_layout, 'stats')) else '4/3')}}) }}
+{%- endset -%}
+{%- set c_2 -%}
+  {%- if ui_t(ui_eq(v_layout, 'grid')) %}
+    {%- if ui_t(ui_gt(ui_len(v_features), 0)) %}
+      {{ ui_include('blocks/feature-pairs.html.j2', {'p': {'features': v_features}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'cards')) %}
+    {%- if ui_t(ui_gt(ui_len(v_features), 0)) %}
+      {{ ui_include('blocks/feature-cards.html.j2', {'p': {'features': v_features, 'cols': '1-2', 'item': 'tile'}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'stats')) %}
+    {%- if ui_t(ui_gt(ui_len(v_features), 0)) %}
+      {{ ui_include('blocks/feature-stat-rows.html.j2', {'p': {'features': v_features, 'stats': v_stats}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'metrics')) %}
+    {%- if ui_t(ui_gt(ui_len(v_stats), 0)) %}
+      {{ ui_include('blocks/feature-metric-cards.html.j2', {'p': {'stats': v_stats}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_or([ui_eq(v_layout, 'cards'), ui_eq(v_layout, 'metrics')])) %}
+    {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_1}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/feature-stat-rows.html.j2 b/packages/jinja2/ui/blocks/feature-stat-rows.html.j2
new file mode 100644
index 0000000..6e2d171
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-stat-rows.html.j2
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-stat-rows.json
+    Two figures of FeatureSplit as cards, then three features as checked rows.
+    Props (p): features, stats. -#}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_stats = ui_def(p['stats'], none) -%}
+{%- set c_11 -%}
+  {%- set c_4 -%}
+    {%- for v_s in ui_l(v_stats) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 2)) %}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '2xl', 'Weight': 'bold'}, 'children': c_1}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'feature-stat'])}, 'children': c_3}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-4'}, 'children': c_4}) }}
+  {%- set c_10 -%}
+    {%- for v_f in ui_l(v_features) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_9 -%}
+          {%- set c_5 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'check', 'Size': 16}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground'}, 'children': c_5}) }}
+          {%- set c_8 -%}
+            {%- set c_6 -%}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'sm', 'Weight': 'semibold'}, 'children': c_6}) }}
+            {%- set c_7 -%}
+              {{ ui_text(ui_get(v_f, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'min-w-0'}, 'children': c_8}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'feature-item'])}, 'children': c_9}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_10}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/feature-sticky.html.j2 b/packages/jinja2/ui/blocks/feature-sticky.html.j2
new file mode 100644
index 0000000..ed3437c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-sticky.html.j2
@@ -0,0 +1,45 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-sticky.json
+    A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item (plain, card), tone, density.
+    Props (p): id, title, features, empty, active, mediaSide, item, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_active = ui_def(p['active'], '') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_item = ui_def(p['item'], 'plain') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_7 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layout-grid', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_6 -%}
+      {%- set c_1 -%}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['md:sticky md:top-8', ('md:order-first' if ui_t(ui_eq(v_mediaSide, 'start')) else 'md:order-last')])), 'Attrs': ui_attrs(['data-testid', 'sticky-media'])}, 'children': c_1}) }}
+      {%- set c_5 -%}
+        {%- for v_f in ui_l(v_features) %}
+          {%- set c_4 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 24}}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_2}) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_f, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': ui_s(ui_cnv([('rounded bg-card inset-ring inset-ring-border p-6' if ui_t(ui_eq(v_item, 'card')) else 'py-4'), ('inset-ring inset-ring-foreground' if ui_t(ui_eq(ui_get(v_f, ['id']), v_active)) else '')])), 'Attrs': ui_attrs(['data-testid', 'item', 'aria-current', ('true' if ui_t(ui_eq(ui_get(v_f, ['id']), v_active)) else none)])}, 'children': c_4}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': ui_s(('4' if ui_t(ui_eq(v_density, 'compact')) else '8')), 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_5}) }}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-2', 'Class': 'items-start gap-8', 'Attrs': ui_attrs(['data-testid', 'sticky'])}, 'children': c_6}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/feature-tabs.html.j2 b/packages/jinja2/ui/blocks/feature-tabs.html.j2
new file mode 100644
index 0000000..eb0e797
--- /dev/null
+++ b/packages/jinja2/ui/blocks/feature-tabs.html.j2
@@ -0,0 +1,55 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-tabs.json
+    Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the picture, stack: picture below), tone, density.
+    Props (p): id, title, features, empty, tabsLabel, active, panel, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_tabsLabel = ui_def(p['tabsLabel'], none) -%}
+{%- set v_active = ui_def(p['active'], '') -%}
+{%- set v_panel = ui_def(p['panel'], 'split') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layout-grid', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- set c_2 -%}
+        {%- for v_f in ui_l(v_features) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('blocks/switcher-item.html.j2', {'p': {'active': ui_or([ui_eq(ui_get(v_f, ['id']), v_active), ui_and([ui_eq(v_active, ''), ui_eq(v_i, 0)])])}, 'children': c_1}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('blocks/switcher.html.j2', {'p': {'label': v_tabsLabel, 'className': ui_cnv(['w-fit max-w-full flex-wrap'])}, 'children': c_2}) }}
+      {%- for v_f in ui_l(v_features) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_or([ui_eq(ui_get(v_f, ['id']), v_active), ui_and([ui_eq(v_active, ''), ui_eq(v_i, 0)])])) %}
+          {%- set c_6 -%}
+            {%- set c_5 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 24}}) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_f, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_3}) }}
+              {%- set c_4 -%}
+                {{ ui_text(ui_get(v_f, ['text'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4'}, 'children': c_5}) }}
+            {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_f, ['title']), 'ratio': '4/3'}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_panel, 'split')) else '1')), 'Class': 'items-center gap-8', 'Attrs': ui_attrs(['data-testid', 'tab-panel', 'role', 'tabpanel'])}, 'children': c_6}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_7}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/field.html.j2 b/packages/jinja2/ui/blocks/field.html.j2
new file mode 100644
index 0000000..1aa9d8e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/field.html.j2
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/field.json
+    A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the control.
+    Props (p): label, htmlFor, hint, error, className; children: markup. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_htmlFor = ui_def(p['htmlFor'], none) -%}
+{%- set v_hint = ui_def(p['hint'], none) -%}
+{%- set v_error = ui_def(p['error'], none) -%}
+{%- set c_4 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ ui_include('ui/label/label.html.j2', {'p': {'Class': 'text-xs font-bold text-foreground', 'HTMLFor': ui_s(v_htmlFor)}, 'children': c_1}) }}
+  {{ ui_def(children, '')|safe }}
+  {%- if ui_t(v_error) %}
+    {%- set c_2 -%}
+      {{ ui_text(v_error) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-semibold text-destructive', 'Attrs': ui_attrs(['role', 'alert'])}, 'children': c_2}) }}
+  {%- elif ui_t(v_hint) %}
+    {%- set c_3 -%}
+      {{ ui_text(v_hint) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_3}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex min-w-0 flex-col gap-2', ui_def(p['className'], '')]))}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/figure-block.html.j2 b/packages/jinja2/ui/blocks/figure-block.html.j2
new file mode 100644
index 0000000..52c99b7
--- /dev/null
+++ b/packages/jinja2/ui/blocks/figure-block.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/figure-block.json
+    Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag figure.
+    Props (p): testid, className; children: markup. -#}
+{%- set v_testid = ui_def(p['testid'], none) -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'figure', 'Class': ui_s(ui_cnv([ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-testid', v_testid])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/file-tree-item.html.j2 b/packages/jinja2/ui/blocks/file-tree-item.html.j2
new file mode 100644
index 0000000..40f2113
--- /dev/null
+++ b/packages/jinja2/ui/blocks/file-tree-item.html.j2
@@ -0,0 +1,21 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/file-tree-item.json
+    A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide.
+    Props (p): kind, label, selected, expanded, className. -#}
+{%- set v_kind = ui_def(p['kind'], 'file') -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_selected = ui_def(p['selected'], false) -%}
+{%- set v_expanded = ui_def(p['expanded'], false) -%}
+{%- set c_2 -%}
+  {%- if ui_t(ui_eq(v_kind, 'folder')) %}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(('chevron-down' if ui_t(v_expanded) else 'chevron-right')), 'Size': 16}}) }}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'folder-open', 'Size': 16}}) }}
+  {%- else %}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'file', 'Size': 16}}) }}
+  {%- endif %}
+  {%- set c_1 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'whitespace-nowrap', 'Attrs': ui_attrs(['data-slot', 'file-tree-label'])}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/button-plain/button-plain.html.j2', {'p': {'Type': 'button', 'Role': 'treeitem', 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/file-tree-item.variants.json', {'kind': v_kind}), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['aria-selected', v_selected, 'tabindex', (0 if ui_t(v_selected) else -1), 'aria-expanded', (v_expanded if ui_t(ui_eq(v_kind, 'folder')) else none), 'data-slot', 'file-tree-item', 'data-kind', v_kind, 'data-state', ('selected' if ui_t(v_selected) else 'default')])}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/file-tree.html.j2 b/packages/jinja2/ui/blocks/file-tree.html.j2
new file mode 100644
index 0000000..4da66ca
--- /dev/null
+++ b/packages/jinja2/ui/blocks/file-tree.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/file-tree.json
+    The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead` from the utils to the keydown (vertical, no loop).
+    Props (p): label, className; children: markup. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-2 p-2', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'tree', 'aria-label', v_label, 'data-slot', 'file-tree'])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/footer-brand.html.j2 b/packages/jinja2/ui/blocks/footer-brand.html.j2
new file mode 100644
index 0000000..db59ef6
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-brand.html.j2
@@ -0,0 +1,24 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-brand.json
+    The brand of FooterSplit: a mark and the brand word over the tagline.
+    Props (p): brand, tagline. -#}
+{%- set v_brand = ui_def(p['brand'], none) -%}
+{%- set v_tagline = ui_def(p['tagline'], none) -%}
+{%- set c_5 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'layers', 'Size': 16}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-8 items-center justify-center rounded bg-foreground text-background'}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_text(v_brand) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}) }}
+  {%- set c_4 -%}
+    {{ ui_text(v_tagline) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'footer-brand'])}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/footer-card.html.j2 b/packages/jinja2/ui/blocks/footer-card.html.j2
new file mode 100644
index 0000000..b0fb9c3
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-card.html.j2
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-card.json
+    The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card.
+    Props (p): label, brand, groups, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_brand = ui_def(p['brand'], none) -%}
+{%- set v_groups = ui_def(p['groups'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_13 -%}
+  {%- set c_12 -%}
+    {%- set c_11 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'hexagon', 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-8 items-center justify-center rounded bg-foreground text-background'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(v_brand) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'bold'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': ui_s(ui_cnv(['h-8 shrink-0', ui_preset('blocks/presets/defaults.json', ['footer', 'brand'])])), 'Attrs': ui_attrs(['data-testid', 'footer-brand'])}, 'children': c_3}) }}
+      {%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+        {%- set c_10 -%}
+          {%- set c_9 -%}
+            {%- for v_g in ui_l(v_groups) %}
+              {%- set c_8 -%}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_g, ['title'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'semibold', 'Class': 'leading-5'}, 'children': c_4}) }}
+                {%- set c_7 -%}
+                  {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+                    {%- set c_6 -%}
+                      {%- set c_5 -%}
+                        {{ ui_text(ui_get(v_item, ['name'])) }}
+                      {%- endset -%}
+                      {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-xs leading-5 text-muted-foreground'])}, 'children': c_5}) }}
+                    {%- endset -%}
+                    {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_6}) }}
+                  {%- endfor %}
+                {%- endset -%}
+                {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0'}, 'children': c_7}) }}
+              {%- endset -%}
+              {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_8}) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '0', 'Align': 'start', 'Class': ui_s(ui_cnv(['flex w-full flex-nowrap justify-between', ui_preset('blocks/presets/defaults.json', ['footer', 'groups'])])), 'Attrs': ui_attrs(['data-testid', 'footer-groups'])}, 'children': c_9}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) if ui_t(v_landmarkLabel) else v_label), 'className': ui_cnv(['min-w-0 flex-1'])}, 'children': c_10}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex w-full flex-row items-start overflow-hidden bg-muted p-10', ui_preset('blocks/presets/defaults.json', ['footer', 'card'])])), 'Attrs': ui_attrs(['data-testid', 'footer-card'])}, 'children': c_11}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv([ui_cnv(['mx-auto w-full px-4', ui_preset('blocks/presets/defaults.json', ['section', 'landing'])]), 'px-0'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_12}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'footer', 'Class': 'py-8', 'Attrs': ui_attrs(['data-testid', 'site-footer', 'data-layout', 'card', 'aria-label', v_landmarkLabel])}, 'children': c_13}) }}
diff --git a/packages/jinja2/ui/blocks/footer-channels.html.j2 b/packages/jinja2/ui/blocks/footer-channels.html.j2
new file mode 100644
index 0000000..a2ac4ed
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-channels.html.j2
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-channels.json
+    The channels of the community as three cards: a glyph over the name and one line.
+    Props (p): extras. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['channels'])), 0)) %}
+  {%- set c_5 -%}
+    {%- for v_c in ui_l(ui_get(v_extras, ['channels'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_4 -%}
+          {%- set c_1 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 20}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'}, 'children': c_1}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_c, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_c, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'footer-channel'])}, 'children': c_4}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-3'}, 'children': c_5}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/footer-columns.html.j2 b/packages/jinja2/ui/blocks/footer-columns.html.j2
new file mode 100644
index 0000000..6acb01c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-columns.html.j2
@@ -0,0 +1,36 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-columns.json
+    The link groups of SitemapFooter as columns: a group title over its links, up to five columns.
+    Props (p): label, groups, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_groups = ui_def(p['groups'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {%- for v_g in ui_l(v_groups) %}
+        {%- set c_5 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_g, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+          {%- set c_4 -%}
+            {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+              {%- set c_3 -%}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_get(v_item, ['name'])) }}
+                {%- endset -%}
+                {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-sm text-muted-foreground'])}, 'children': c_2}) }}
+              {%- endset -%}
+              {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_3}) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_4}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_5}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1', 'Class': 'grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5', 'Attrs': ui_attrs(['data-testid', 'footer-groups'])}, 'children': c_6}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label])])}, 'children': c_7}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/footer-contacts.html.j2 b/packages/jinja2/ui/blocks/footer-contacts.html.j2
new file mode 100644
index 0000000..bf5106e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-contacts.html.j2
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-contacts.json
+    The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value.
+    Props (p): extras. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['contacts'])), 0)) %}
+  {%- set c_6 -%}
+    {%- for v_c in ui_l(ui_get(v_extras, ['contacts'])) %}
+      {%- set c_5 -%}
+        {%- set c_1 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 20}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'}, 'children': c_1}) }}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_c, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_c, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'footer-contact'])}, 'children': c_5}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_6}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/footer-figures.html.j2 b/packages/jinja2/ui/blocks/footer-figures.html.j2
new file mode 100644
index 0000000..e8c266b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-figures.html.j2
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-figures.json
+    Three figures in a row under the brand of FooterSplit.
+    Props (p): extras. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['stats'])), 0)) %}
+  {%- set c_4 -%}
+    {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Attrs': ui_attrs(['data-testid', 'footer-stat'])}, 'children': c_3}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '8', 'Class': 'flex-wrap'}, 'children': c_4}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/footer-group-cards.html.j2 b/packages/jinja2/ui/blocks/footer-group-cards.html.j2
new file mode 100644
index 0000000..e130d86
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-group-cards.html.j2
@@ -0,0 +1,43 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-group-cards.json
+    The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide screens.
+    Props (p): label, groups, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_groups = ui_def(p['groups'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+  {%- set c_9 -%}
+    {%- set c_8 -%}
+      {%- for v_g in ui_l(v_groups) %}
+        {%- set c_7 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_g, ['icon'])), 'Size': 20}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_g, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}) }}
+          {%- set c_6 -%}
+            {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+              {%- set c_5 -%}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_item, ['name'])) }}
+                {%- endset -%}
+                {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-sm text-muted-foreground']), 'variant': 'muted', 'size': 'sm'}, 'children': c_4}) }}
+              {%- endset -%}
+              {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_5}) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_6}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_7}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'}, 'children': c_8}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label])])}, 'children': c_9}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/footer-link-columns.html.j2 b/packages/jinja2/ui/blocks/footer-link-columns.html.j2
new file mode 100644
index 0000000..7a528dd
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-link-columns.html.j2
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-link-columns.json
+    The first three link groups of FooterSplit as small columns beside each other.
+    Props (p): label, groups, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_groups = ui_def(p['groups'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {%- for v_g in ui_l(v_groups) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 3)) %}
+          {%- set c_5 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_g, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+            {%- set c_4 -%}
+              {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+                {%- set c_3 -%}
+                  {%- set c_2 -%}
+                    {{ ui_text(ui_get(v_item, ['name'])) }}
+                  {%- endset -%}
+                  {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-sm text-muted-foreground']), 'variant': 'muted', 'size': 'sm'}, 'children': c_2}) }}
+                {%- endset -%}
+                {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_3}) }}
+              {%- endfor %}
+            {%- endset -%}
+            {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_5}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-8 sm:grid-cols-3'}, 'children': c_6}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label])])}, 'children': c_7}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/footer-points.html.j2 b/packages/jinja2/ui/blocks/footer-points.html.j2
new file mode 100644
index 0000000..8b021b6
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-points.html.j2
@@ -0,0 +1,28 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-points.json
+    Four points with their glyphs in a column, under the tagline of FooterSplit.
+    Props (p): extras, title. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['points'])), 0)) %}
+  {%- set c_4 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+    {%- for v_p in ui_l(ui_get(v_extras, ['points'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 4)) %}
+        {%- set c_3 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 16}}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_p, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'footer-point'])}, 'children': c_3}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'start'}, 'children': c_4}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/footer-signup-card.html.j2 b/packages/jinja2/ui/blocks/footer-signup-card.html.j2
new file mode 100644
index 0000000..b0607ad
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-signup-card.html.j2
@@ -0,0 +1,36 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-signup-card.json
+    The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note.
+    Props (p): id, labels. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_8 -%}
+  {%- set c_2 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'mail', 'Size': 16}}) }}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['signup'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_2}) }}
+  {%- set c_6 -%}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_labels, ['email'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_3}) }}
+    {%- set c_5 -%}
+      {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'email', 'Name': 'email', 'Class': 'min-w-0 flex-1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}) }}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_labels, ['subscribe'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_4}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'w-full flex-wrap'}, 'children': c_5}) }}
+  {%- endset -%}
+  {{ ui_include('ui/form/form.html.j2', {'p': {'Method': 'dialog', 'Class': ui_s(ui_cnv(['w-full max-w-md', ('mx-auto' if ui_t(false) else '')])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_6}) }}
+  {%- set c_7 -%}
+    {{ ui_text(ui_get(v_labels, ['note'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'signup'])}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/footer-sitemap.html.j2 b/packages/jinja2/ui/blocks/footer-sitemap.html.j2
new file mode 100644
index 0000000..dfd7370
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-sitemap.html.j2
@@ -0,0 +1,13 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-sitemap.json
+    The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no link).
+    Props (p): href, label. -#}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- if ui_t(v_href) %}
+  {%- set c_1 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(v_href), 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'footer-sitemap'])}, 'children': c_1}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/footer-split.html.j2 b/packages/jinja2/ui/blocks/footer-split.html.j2
new file mode 100644
index 0000000..47f373c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/footer-split.html.j2
@@ -0,0 +1,96 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-split.json
+    A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two actions, or the community channels and figures), mediaSide, tone.
+    Props (p): id, label, brand, tagline, copyright, groups, extras, labels, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], 'footer') -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_brand = ui_def(p['brand'], none) -%}
+{%- set v_tagline = ui_def(p['tagline'], none) -%}
+{%- set v_copyright = ui_def(p['copyright'], none) -%}
+{%- set v_groups = ui_def(p['groups'], none) -%}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'stats') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_14 -%}
+  {%- set c_13 -%}
+    {%- if ui_t(ui_eq(v_layout, 'stats')) %}
+      {%- set c_5 -%}
+        {%- set c_2 -%}
+          {%- set c_1 -%}
+            {{ ui_include('blocks/footer-brand.html.j2', {'p': {'brand': v_brand, 'tagline': v_tagline}}) }}
+            {{ ui_include('blocks/footer-figures.html.j2', {'p': {'extras': v_extras}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'start'}, 'children': c_1}) }}
+          {{ ui_include('blocks/footer-sitemap.html.j2', {'p': {'href': ui_get(v_extras, ['sitemapHref']), 'label': ui_get(v_labels, ['sitemap'])}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '6', 'Align': 'start', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_2}) }}
+        {{ ui_include('blocks/footer-group-cards.html.j2', {'p': {'label': v_label, 'groups': v_groups, 'landmarkLabel': v_landmarkLabel}}) }}
+        {%- set c_4 -%}
+          {%- set c_3 -%}
+            {{ ui_text(v_copyright) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'border-t border-border pt-6'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '8', 'Align': 'stretch'}, 'children': c_5}) }}
+    {%- else %}
+      {%- set c_12 -%}
+        {%- if ui_t(ui_eq(v_mediaSide, 'start')) %}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_brand, 'ratio': '4/3'}}) }}
+        {%- endif %}
+        {%- set c_11 -%}
+          {%- if ui_t(ui_or([ui_eq(v_layout, 'points'), ui_eq(v_layout, 'links')])) %}
+            {{ ui_include('blocks/footer-brand.html.j2', {'p': {'brand': v_brand, 'tagline': v_tagline}}) }}
+          {%- else %}
+            {%- set c_8 -%}
+              {%- set c_6 -%}
+                {{ ui_text((ui_get(v_labels, ['loopTitle']) if ui_t(ui_eq(v_layout, 'newsletter')) else (ui_get(v_labels, ['joinTitle']) if ui_t(ui_eq(v_layout, 'channels')) else ui_get(v_labels, ['title'])))) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_6}) }}
+              {%- set c_7 -%}
+                {{ ui_text((ui_get(v_labels, ['loopText']) if ui_t(ui_eq(v_layout, 'newsletter')) else (ui_get(v_labels, ['joinText']) if ui_t(ui_eq(v_layout, 'channels')) else ui_get(v_labels, ['text'])))) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'start'}, 'children': c_8}) }}
+          {%- endif %}
+          {%- if ui_t(ui_eq(v_layout, 'points')) %}
+            {{ ui_include('blocks/footer-points.html.j2', {'p': {'extras': v_extras, 'title': ui_get(v_labels, ['points'])}}) }}
+          {%- endif %}
+          {%- if ui_t(ui_eq(v_layout, 'newsletter')) %}
+            {{ ui_include('blocks/footer-signup-card.html.j2', {'p': {'id': v_id, 'labels': v_labels}}) }}
+          {%- endif %}
+          {%- if ui_t(ui_or([ui_eq(v_layout, 'links'), ui_eq(v_layout, 'newsletter')])) %}
+            {{ ui_include('blocks/footer-link-columns.html.j2', {'p': {'label': v_label, 'groups': v_groups, 'landmarkLabel': v_landmarkLabel}}) }}
+          {%- endif %}
+          {%- if ui_t(ui_eq(v_layout, 'contacts')) %}
+            {{ ui_include('blocks/footer-contacts.html.j2', {'p': {'extras': v_extras}}) }}
+            {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_labels, ['cta']), 'primaryHref': ui_get(v_extras, ['ctaHref']), 'secondary': ui_get(v_labels, ['secondary']), 'secondaryHref': ui_get(v_extras, ['secondaryHref'])}}) }}
+          {%- endif %}
+          {%- if ui_t(ui_eq(v_layout, 'channels')) %}
+            {{ ui_include('blocks/footer-channels.html.j2', {'p': {'extras': v_extras}}) }}
+            {{ ui_include('blocks/footer-figures.html.j2', {'p': {'extras': v_extras}}) }}
+          {%- endif %}
+          {%- set c_10 -%}
+            {%- set c_9 -%}
+              {{ ui_text(v_copyright) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_9}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'border-t border-border pt-6'}, 'children': c_10}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '8', 'Align': 'stretch'}, 'children': c_11}) }}
+        {%- if ui_t(not (ui_eq(v_mediaSide, 'start'))) %}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_brand, 'ratio': '4/3'}}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 items-center gap-8 lg:grid-cols-2'}, 'children': c_12}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-12'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_13}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'footer', 'Class': ui_s(ui_cnv(['border-t border-border', ('bg-muted' if ui_t(ui_eq(v_tone, 'muted')) else '')])), 'Attrs': ui_attrs(['data-testid', 'footer-split', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_14}) }}
diff --git a/packages/jinja2/ui/blocks/hero-badge.html.j2 b/packages/jinja2/ui/blocks/hero-badge.html.j2
new file mode 100644
index 0000000..a72378c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/hero-badge.html.j2
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-badge.json
+    A composite badge on a dark band: an optional small mark beside a label.
+    Props (p): label, mark. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_mark = ui_def(p['mark'], none) -%}
+{%- set c_3 -%}
+  {%- if ui_t(v_mark) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_mark) }}
+    {%- endset -%}
+    {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'badge-mark'])}, 'children': c_1}) }}
+  {%- endif %}
+  {%- set c_2 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-5 text-background'}, 'children': c_2}) }}
+{%- endset -%}
+{{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30', ui_preset('blocks/presets/defaults.json', ['hero', 'badge'])])), 'Attrs': ui_attrs(['data-testid', 'section-badge'])}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/hero-classic.html.j2 b/packages/jinja2/ui/blocks/hero-classic.html.j2
new file mode 100644
index 0000000..3476414
--- /dev/null
+++ b/packages/jinja2/ui/blocks/hero-classic.html.j2
@@ -0,0 +1,72 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-classic.json
+    The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster). Axes: layout, media kind and side, scale, tone, density, actions mode.
+    Props (p): id, title, text, level, badge, topics, actions, media, layout, scale, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_badge = ui_def(p['badge'], none) -%}
+{%- set v_topics = ui_def(p['topics'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_media = ui_def(p['media'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'centered') -%}
+{%- set v_scale = ui_def(p['scale'], 'default') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'roomy') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_mediaKind = ui_coalesce([ui_get(v_media, ['kind']), 'none']) -%}
+{%- set v_mediaSide = ui_coalesce([ui_get(v_media, ['side']), 'end']) -%}
+{%- set f_5 -%}
+  {%- if ui_t(ui_and([ui_eq(v_mediaKind, 'code'), ui_get(v_media, ['lines']), ui_gt(ui_len(ui_get(v_media, ['lines'])), 0), ui_get(v_media, ['codeTitle']), ui_get(v_media, ['prompt'])])) %}
+    {{ ui_include('blocks/code-window.html.j2', {'p': {'title': ui_get(v_media, ['codeTitle']), 'prompt': ui_get(v_media, ['prompt']), 'lines': ui_get(v_media, ['lines'])}}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_mediaKind, 'cluster')) %}
+    {%- set c_9 -%}
+      {%- set c_6 -%}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4'}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['w-full', '']))}, 'children': c_6}) }}
+      {%- set c_7 -%}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['w-full', '-translate-y-4']))}, 'children': c_7}) }}
+      {%- set c_8 -%}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4'}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['w-full', '']))}, 'children': c_8}) }}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '3', 'Class': 'items-end gap-4', 'Attrs': ui_attrs(['data-testid', 'cluster'])}, 'children': c_9}) }}
+  {%- endif %}
+  {%- if ui_t(ui_or([ui_eq(v_mediaKind, 'image')])) %}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+  {%- endif %}
+{%- endset -%}
+{%- set c_10 -%}
+  {{ ui_include('blocks/backdrop.html.j2', {'p': {'kind': ('image' if ui_t(ui_eq(v_mediaKind, 'backdrop')) else 'none'), 'alt': v_title}}) }}
+  {%- if ui_t(ui_get(v_actions, ['cta'])) %}
+    {%- if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'form')) %}
+      {%- set c_4 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_actions, ['emailLabel'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_1}) }}
+        {%- set c_3 -%}
+          {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'prompt', 'Class': 'min-w-0 flex-1', 'Placeholder': ui_s(ui_get(v_actions, ['emailLabel'])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_actions, ['cta'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Href': ui_s(ui_get(v_actions, ['href'])), 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'w-full flex-wrap'}, 'children': c_3}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['w-full max-w-xl', ('mx-auto' if ui_t(ui_eq(v_layout, 'centered')) else '')])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_4}) }}
+    {%- else %}
+      {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': ('center' if ui_t(ui_eq(v_layout, 'centered')) else 'start')}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_and([v_topics, ui_gt(ui_len(v_topics), 0)])) %}
+    {{ ui_include('blocks/topic-chips.html.j2', {'p': {'topics': v_topics}}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'heading': {'level': v_level, 'scale': v_scale, 'badge': v_badge}, 'layout': ('split' if ui_t(ui_eq(v_layout, 'split')) else 'stack'), 'align': ('start' if ui_t(ui_eq(v_layout, 'split')) else 'center'), 'media': {'show': ui_or([ui_eq(v_mediaKind, 'image'), ui_eq(v_mediaKind, 'code'), ui_eq(v_mediaKind, 'cluster')]), 'side': v_mediaSide}, 'tone': v_tone, 'density': v_density, 'className': ui_cnv([('relative isolate overflow-hidden' if ui_t(ui_eq(('image' if ui_t(ui_eq(v_mediaKind, 'backdrop')) else 'none'), 'image')) else '')]), 'landmarkLabel': v_landmarkLabel, 'aside': f_5}, 'children': c_10}) }}
diff --git a/packages/jinja2/ui/blocks/hero-head.html.j2 b/packages/jinja2/ui/blocks/hero-head.html.j2
new file mode 100644
index 0000000..dee7ad9
--- /dev/null
+++ b/packages/jinja2/ui/blocks/hero-head.html.j2
@@ -0,0 +1,64 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-head.json
+    The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a call to action.
+    Props (p): brand, brandHref, links, current, login, loginHref, cta, href, skip, navLabel, landmarkLabel. -#}
+{%- set v_brand = ui_def(p['brand'], none) -%}
+{%- set v_brandHref = ui_def(p['brandHref'], none) -%}
+{%- set v_links = ui_def(p['links'], none) -%}
+{%- set v_current = ui_def(p['current'], '') -%}
+{%- set v_login = ui_def(p['login'], none) -%}
+{%- set v_loginHref = ui_def(p['loginHref'], none) -%}
+{%- set v_cta = ui_def(p['cta'], none) -%}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set v_skip = ui_def(p['skip'], none) -%}
+{%- set v_navLabel = ui_def(p['navLabel'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_10 -%}
+  {%- if ui_t(v_skip) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_skip) }}
+    {%- endset -%}
+    {{ ui_include('ui/link-plain/link-plain.html.j2', {'p': {'Href': '#main-content', 'Class': 'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'skip-link'])}, 'children': c_1}) }}
+  {%- endif %}
+  {%- set c_2 -%}
+    {{ ui_text(v_brand) }}
+  {%- endset -%}
+  {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': v_brandHref, 'className': ui_cnv([ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'small']), 'font-medium leading-6 text-background'])]), 'testid': 'brand'}, 'children': c_2}) }}
+  {%- if ui_t(ui_and([v_links, ui_gt(ui_len(v_links), 0)])) %}
+    {%- set c_6 -%}
+      {%- set c_5 -%}
+        {%- for v_l in ui_l(v_links) %}
+          {%- if ui_t(ui_get(v_l, ['href'])) %}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_l, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_get(v_l, ['href'])), 'Variant': 'default', 'AriaCurrent': ui_s(('page' if ui_t(ui_eq(ui_get(v_l, ['id']), v_current)) else none)), 'Class': 'text-xs font-medium leading-5 text-background', 'Attrs': ui_attrs(['data-testid', 'nav-link'])}, 'children': c_3}) }}
+          {%- else %}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_l, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-xs font-medium leading-5 text-background', 'Attrs': ui_attrs(['data-testid', 'nav-link'])}, 'children': c_4}) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '8', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_5}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [v_navLabel, v_landmarkLabel])) if ui_t(v_landmarkLabel) else v_navLabel), 'testid': 'site-nav'}, 'children': c_6}) }}
+  {%- endif %}
+  {%- set c_9 -%}
+    {%- if ui_t(v_login) %}
+      {%- set c_7 -%}
+        {{ ui_text(v_login) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Href': ui_s(v_loginHref), 'Variant': 'ghost', 'Size': 'sm', 'Class': 'text-background hover:bg-background/10', 'Attrs': ui_attrs(['data-testid', 'nav-login'])}, 'children': c_7}) }}
+    {%- endif %}
+    {%- if ui_t(v_cta) %}
+      {%- set c_8 -%}
+        {{ ui_text(v_cta) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Href': ui_s(v_href), 'Variant': 'secondary', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'header-cta'])}, 'children': c_8}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_9}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'header', 'Class': ui_s(ui_cnv(['flex w-full flex-wrap items-center justify-between pr-4', ui_preset('blocks/presets/defaults.json', ['hero', 'head'])])), 'Attrs': ui_attrs(['data-testid', 'hero-head', 'aria-label', v_landmarkLabel])}, 'children': c_10}) }}
diff --git a/packages/jinja2/ui/blocks/hero-prompt.html.j2 b/packages/jinja2/ui/blocks/hero-prompt.html.j2
new file mode 100644
index 0000000..15b8707
--- /dev/null
+++ b/packages/jinja2/ui/blocks/hero-prompt.html.j2
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-prompt.json
+    A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic pills.
+    Props (p): title, level, badge, badgeMark, actions, composer, nav, topics, density, landmarkLabel. -#}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_badge = ui_def(p['badge'], none) -%}
+{%- set v_badgeMark = ui_def(p['badgeMark'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_composer = ui_def(p['composer'], none) -%}
+{%- set v_nav = ui_def(p['nav'], none) -%}
+{%- set v_topics = ui_def(p['topics'], none) -%}
+{%- set v_density = ui_def(p['density'], 'roomy') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {%- set c_2 -%}
+      {{ ui_include('blocks/hero-head.html.j2', {'p': {'brand': ui_get(v_nav, ['brand']), 'links': ui_get(v_nav, ['links']), 'current': ui_get(v_nav, ['current']), 'login': ui_get(v_nav, ['login']), 'loginHref': ui_get(v_nav, ['loginHref']), 'skip': ui_get(v_nav, ['skip']), 'navLabel': ui_get(v_nav, ['label']), 'cta': ui_get(v_actions, ['cta']), 'href': ui_get(v_actions, ['href']), 'landmarkLabel': v_landmarkLabel}}) }}
+      {%- set c_1 -%}
+        {%- if ui_t(v_badge) %}
+          {{ ui_include('blocks/hero-badge.html.j2', {'p': {'label': v_badge, 'mark': v_badgeMark}}) }}
+        {%- endif %}
+        {{ ui_include('blocks/weighted-title.html.j2', {'p': {'id': 'home-hero-title', 'title': v_title, 'weights': ui_preset('blocks/presets/defaults.json', ['hero', 'titleWeights']), 'level': v_level}}) }}
+        {%- if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'form')) %}
+          {{ ui_include('blocks/prompt-composer.html.j2', {'p': {'label': ui_get(v_actions, ['emailLabel']), 'attachLabel': ui_get(v_composer, ['attachLabel']), 'modelLabel': ui_get(v_composer, ['modelLabel']), 'send': ui_get(v_actions, ['cta']), 'href': ui_get(v_actions, ['href'])}}) }}
+        {%- elif ui_t(ui_get(v_actions, ['cta'])) %}
+          {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': ('center' if ui_t(true) else 'start')}}) }}
+        {%- endif %}
+        {%- if ui_t(ui_and([v_topics, ui_gt(ui_len(v_topics), 0)])) %}
+          {{ ui_include('blocks/topic-chips.html.j2', {'p': {'topics': v_topics, 'tone': 'inverse'}}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': 'center', 'Class': ui_s(ui_cnv(['mx-auto w-full pt-24 pb-16', ui_preset('blocks/presets/defaults.json', ['hero', 'column'])])), 'Attrs': ui_attrs(['data-testid', 'hero-column'])}, 'children': c_1}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': 'stretch'}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full px-8', ui_preset('blocks/presets/defaults.json', ['hero', 'container'])])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_3}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv(['flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70', ui_preset('blocks/presets/defaults.json', ['hero', 'band'])])), 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else 'home-hero-title'), 'data-testid', 'section', 'data-tone', 'inverse', 'data-density', v_density, 'data-chrome', 'nav', 'aria-label', v_landmarkLabel])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/hero-split-extras.html.j2 b/packages/jinja2/ui/blocks/hero-split-extras.html.j2
new file mode 100644
index 0000000..3a48a7e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/hero-split-extras.html.j2
@@ -0,0 +1,124 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-split-extras.json
+    What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small feature cards, or a quote with its author over three figures.
+    Props (p): content, extra. -#}
+{%- set v_content = ui_def(p['content'], none) -%}
+{%- set v_extra = ui_def(p['extra'], 'none') -%}
+{%- if ui_t(ui_and([ui_eq(v_extra, 'stats'), ui_gt(ui_len(ui_get(v_content, ['stats'])), 0)])) %}
+  {%- set c_4 -%}
+    {%- for v_s in ui_l(ui_get(v_content, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '2xl', 'Weight': 'semibold'}, 'children': c_1}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'hero-stat'])}, 'children': c_3}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-3 gap-4', 'Attrs': ui_attrs(['data-testid', 'hero-stats'])}, 'children': c_4}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_extra, 'avatars'), ui_gt(ui_len(ui_get(v_content, ['people'])), 0)])) %}
+  {%- set c_7 -%}
+    {%- set c_5 -%}
+      {%- for v_p in ui_l(ui_get(v_content, ['people'])) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 4)) %}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_p, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_5}) }}
+    {%- set c_6 -%}
+      {{ ui_text(ui_get(v_content, ['proof'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-testid', 'hero-proof'])}, 'children': c_7}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_extra, 'minis'), ui_gt(ui_len(ui_get(v_content, ['features'])), 0)])) %}
+  {%- set c_13 -%}
+    {%- for v_f in ui_l(ui_get(v_content, ['features'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 2)) %}
+        {%- set c_12 -%}
+          {%- set c_8 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_8}) }}
+          {%- set c_11 -%}
+            {%- set c_9 -%}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_9}) }}
+            {%- set c_10 -%}
+              {{ ui_text(ui_get(v_f, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_10}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_11}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'hero-mini'])}, 'children': c_12}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2', 'Attrs': ui_attrs(['data-testid', 'hero-minis'])}, 'children': c_13}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_extra, 'quote'), ui_gt(ui_len(ui_get(v_content, ['people'])), 0)])) %}
+  {%- set c_24 -%}
+    {%- for v_p in ui_l(ui_get(v_content, ['people'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 1)) %}
+        {%- set c_19 -%}
+          {%- set c_14 -%}
+            {{ ui_text(ui_get(v_p, ['quote'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Tag': 'blockquote', 'Class': 'text-lg font-medium'}, 'children': c_14}) }}
+          {%- set c_18 -%}
+            {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_p, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}) }}
+            {%- set c_17 -%}
+              {%- set c_15 -%}
+                {{ ui_text(ui_get(v_p, ['author'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_15}) }}
+              {%- set c_16 -%}
+                {{ ui_text(ui_get(v_p, ['role'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_16}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_17}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_18}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/figure-block.html.j2', {'p': {'className': ui_cnv(['flex flex-col gap-4']), 'testid': 'hero-quote'}, 'children': c_19}) }}
+      {%- endif %}
+    {%- endfor %}
+    {%- set c_23 -%}
+      {%- for v_s in ui_l(ui_get(v_content, ['stats'])) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 3)) %}
+          {%- set c_22 -%}
+            {%- set c_20 -%}
+              {{ ui_text(ui_get(v_s, ['value'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '2xl', 'Weight': 'semibold'}, 'children': c_20}) }}
+            {%- set c_21 -%}
+              {{ ui_text(ui_get(v_s, ['label'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_21}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'hero-stat'])}, 'children': c_22}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-3 gap-4', 'Attrs': ui_attrs(['data-testid', 'hero-stats'])}, 'children': c_23}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_24}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/hero-split-media.html.j2 b/packages/jinja2/ui/blocks/hero-split-media.html.j2
new file mode 100644
index 0000000..5f505d2
--- /dev/null
+++ b/packages/jinja2/ui/blocks/hero-split-media.html.j2
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-split-media.json
+    What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with captions, or a picture with two plan cards floating over it.
+    Props (p): content, alt, media. -#}
+{%- set v_content = ui_def(p['content'], none) -%}
+{%- set v_alt = ui_def(p['alt'], none) -%}
+{%- set v_media = ui_def(p['media'], 'picture') -%}
+{%- if ui_t(ui_eq(v_media, 'picture')) %}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_alt, 'ratio': '4/3'}}) }}
+{%- endif %}
+{%- if ui_t(ui_eq(v_media, 'card')) %}
+  {{ ui_include('blocks/offer-media.html.j2', {'p': {'alt': v_alt, 'card': ui_get(v_content, ['card'])}}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_media, 'grid'), ui_gt(ui_len(ui_get(v_content, ['features'])), 0)])) %}
+  {%- set c_3 -%}
+    {%- for v_f in ui_l(ui_get(v_content, ['features'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 4)) %}
+        {%- set c_2 -%}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_f, ['title']), 'ratio': '1/1'}}) }}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_1}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/figure-block.html.j2', {'p': {'className': ui_cnv(['flex flex-col gap-2']), 'testid': 'hero-tile'}, 'children': c_2}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-4', 'Attrs': ui_attrs(['data-testid', 'hero-grid'])}, 'children': c_3}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_media, 'plans'), ui_gt(ui_len(ui_get(v_content, ['plans'])), 0)])) %}
+  {%- set c_8 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_alt, 'ratio': '4/3'}}) }}
+    {%- for v_p in ui_l(ui_get(v_content, ['plans'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 2)) %}
+        {%- set c_7 -%}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_p, ['name'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}) }}
+          {%- set c_6 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'check', 'Size': 16}}) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_p, ['tagline'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_6}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': ui_s(ui_cnv(['absolute w-48 rounded bg-card p-4 shadow-lg', ('top-8 left-4' if ui_t(ui_eq(v_i, 0)) else 'right-4 bottom-8')])), 'Attrs': ui_attrs(['data-testid', 'hero-plan'])}, 'children': c_7}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'relative', 'Attrs': ui_attrs(['data-testid', 'hero-media'])}, 'children': c_8}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/hero-split.html.j2 b/packages/jinja2/ui/blocks/hero-split.html.j2
new file mode 100644
index 0000000..8c7bdd7
--- /dev/null
+++ b/packages/jinja2/ui/blocks/hero-split.html.j2
@@ -0,0 +1,24 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-split.json
+    A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes: extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with captions, plans: two plan cards on the picture), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, actions, content, extra, media, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_content = ui_def(p['content'], none) -%}
+{%- set v_extra = ui_def(p['extra'], 'stats') -%}
+{%- set v_media = ui_def(p['media'], 'picture') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_1 -%}
+  {{ ui_include('blocks/hero-split-media.html.j2', {'p': {'content': v_content, 'alt': v_title, 'media': v_media}}) }}
+{%- endset -%}
+{%- set c_2 -%}
+  {{ ui_include('blocks/hero-split-extras.html.j2', {'p': {'content': v_content, 'extra': v_extra}}) }}
+  {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel, 'aside': f_1}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/icon-tab.html.j2 b/packages/jinja2/ui/blocks/icon-tab.html.j2
new file mode 100644
index 0000000..5b4f648
--- /dev/null
+++ b/packages/jinja2/ui/blocks/icon-tab.html.j2
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/icon-tab.json
+    One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key movement between tabs is the job of IconTabs (see roving).
+    Props (p): active, label, className; children: markup. -#}
+{%- set v_active = ui_def(p['active'], false) -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/button-plain/button-plain.html.j2', {'p': {'Type': 'button', 'Role': 'tab', 'AriaLabel': ui_s(v_label), 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/icon-tab.variants.json', {'state': ('active' if ui_t(v_active) else 'default')}), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['aria-selected', v_active, 'tabindex', (0 if ui_t(v_active) else -1), 'data-slot', 'icon-tab', 'data-state', ('active' if ui_t(v_active) else 'default')])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/icon-tabs.html.j2 b/packages/jinja2/ui/blocks/icon-tabs.html.j2
new file mode 100644
index 0000000..23f3065
--- /dev/null
+++ b/packages/jinja2/ui/blocks/icon-tabs.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/icon-tabs.json
+    A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).
+    Props (p): label, className; children: markup. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex items-center gap-2', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'tablist', 'aria-label', v_label, 'data-slot', 'icon-tabs'])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/icon-wall.html.j2 b/packages/jinja2/ui/blocks/icon-wall.html.j2
new file mode 100644
index 0000000..0635c75
--- /dev/null
+++ b/packages/jinja2/ui/blocks/icon-wall.html.j2
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/icon-wall.json
+    A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the label, chip: icon beside it), tone, density.
+    Props (p): id, title, features, empty, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_features = ui_def(p['features'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_cols = ui_def(p['cols'], '4') -%}
+{%- set v_item = ui_def(p['item'], 'tile') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_askedCols = ('2-6' if ui_t(ui_and([ui_eq(v_item, 'chip'), ui_eq(v_cols, '6')])) else ('2' if ui_t(ui_eq(v_cols, '2')) else ('2-3' if ui_t(ui_eq(v_cols, '3')) else ('2-4' if ui_t(ui_eq(v_cols, '4')) else '3-6')))) -%}
+{%- set v_wallCols = ui_fit_cols(v_askedCols, ui_len(v_features)) -%}
+{%- set c_4 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layout-grid', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_3 -%}
+      {%- for v_f in ui_l(v_features) %}
+        {%- set c_2 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': ui_i((24 if ui_t(ui_eq(v_item, 'tile')) else 16))}}) }}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex items-center gap-2', 'rounded bg-card inset-ring inset-ring-border', (ui_cnv(['flex-col justify-center text-center', ('p-4' if ui_t(ui_eq(v_density, 'compact')) else 'p-6')]) if ui_t(ui_eq(v_item, 'tile')) else 'px-4 py-2')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_2}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(v_wallCols), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_3}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/job-board.html.j2 b/packages/jinja2/ui/blocks/job-board.html.j2
new file mode 100644
index 0000000..8b3c17b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/job-board.html.j2
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/job-board.json
+    Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place, the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide), tone.
+    Props (p): id, title, lead, jobs, departments, labels, layout, salary, tone, empty, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_jobs = ui_def(p['jobs'], none) -%}
+{%- set v_departments = ui_def(p['departments'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_salary = ui_def(p['salary'], 'hide') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_len(v_jobs), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'briefcase', 'title': v_empty}}) }}
+  {%- elif ui_t(ui_eq(v_layout, 'grouped')) %}
+    {%- set c_11 -%}
+      {%- for v_d in ui_l(v_departments) %}
+        {%- set c_10 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_d, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_tpl(ui_get(v_labels, ['count']), [ui_len(ui_where(v_jobs, 'dept', ui_get(v_d, ['id'])))])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'baseline', 'Justify': 'between'}, 'children': c_3}) }}
+          {%- set c_9 -%}
+            {%- for v_j in ui_l(ui_where(v_jobs, 'dept', ui_get(v_d, ['id']))) %}
+              {%- set c_8 -%}
+                {%- set c_6 -%}
+                  {%- set c_4 -%}
+                    {{ ui_text(ui_get(v_j, ['title'])) }}
+                  {%- endset -%}
+                  {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_j, ['href']), 'className': ui_cnv(['font-medium'])}, 'children': c_4}) }}
+                  {%- set c_5 -%}
+                    {{ ui_text(ui_tpl('{0}, {1}', [ui_get(v_j, ['location']), ui_get(v_j, ['type'])])) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+                {%- endset -%}
+                {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_6}) }}
+                {%- set c_7 -%}
+                  {{ ui_text(ui_get(v_j, ['type'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'outline', 'Size': 'default'}, 'children': c_7}) }}
+              {%- endset -%}
+              {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex flex-wrap items-center justify-between gap-4 border-b border-border py-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col'}, 'children': c_9}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_10}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '8', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'groups'])}, 'children': c_11}) }}
+  {%- else %}
+    {{ ui_include('blocks/job-cards.html.j2', {'p': {'jobs': v_jobs, 'departments': v_departments, 'labels': v_labels, 'layout': v_layout, 'salary': v_salary}}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'measure': ('3xl' if ui_t(ui_eq(v_layout, 'grouped')) else 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_12}) }}
diff --git a/packages/jinja2/ui/blocks/job-cards.html.j2 b/packages/jinja2/ui/blocks/job-cards.html.j2
new file mode 100644
index 0000000..2646694
--- /dev/null
+++ b/packages/jinja2/ui/blocks/job-cards.html.j2
@@ -0,0 +1,154 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/job-cards.json
+    The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply) or as a table.
+    Props (p): jobs, departments, labels, layout, salary. -#}
+{%- set v_jobs = ui_def(p['jobs'], none) -%}
+{%- set v_departments = ui_def(p['departments'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_salary = ui_def(p['salary'], 'hide') -%}
+{%- if ui_t(ui_eq(v_layout, 'table')) %}
+  {%- set c_21 -%}
+    {%- set c_20 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_labels, ['caption'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/table/table-caption.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_1}) }}
+      {%- set c_10 -%}
+        {%- set c_9 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_labels, ['role'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'px-4 py-2'}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_labels, ['team'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'hidden py-2 md:table-cell'}, 'children': c_3}) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_labels, ['location'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'hidden py-2 sm:table-cell'}, 'children': c_4}) }}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_labels, ['type'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_5}) }}
+          {%- if ui_t(ui_eq(v_salary, 'show')) %}
+            {%- set c_6 -%}
+              {{ ui_text(ui_get(v_labels, ['salary'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'hidden py-2 md:table-cell'}, 'children': c_6}) }}
+          {%- endif %}
+          {%- set c_8 -%}
+            {%- set c_7 -%}
+              {{ ui_text(ui_get(v_labels, ['apply'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_7}) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2 pr-4'}, 'children': c_8}) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-row.html.j2', {'p': {}, 'children': c_9}) }}
+      {%- endset -%}
+      {{ ui_include('ui/table/table-head.html.j2', {'p': {'Class': 'bg-muted'}, 'children': c_10}) }}
+      {%- set c_19 -%}
+        {%- for v_j in ui_l(v_jobs) %}
+          {%- set c_18 -%}
+            {%- set c_11 -%}
+              {{ ui_text(ui_get(v_j, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'px-4 py-4 font-medium'}, 'children': c_11}) }}
+            {%- set c_12 -%}
+              {{ ui_text(ui_first_of(ui_where(v_departments, 'id', ui_get(v_j, ['dept'])), 'name')) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'hidden md:table-cell'}, 'children': c_12}) }}
+            {%- set c_13 -%}
+              {{ ui_text(ui_get(v_j, ['location'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'hidden sm:table-cell'}, 'children': c_13}) }}
+            {%- set c_14 -%}
+              {{ ui_text(ui_get(v_j, ['type'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-cell.html.j2', {'p': {}, 'children': c_14}) }}
+            {%- if ui_t(ui_eq(v_salary, 'show')) %}
+              {%- set c_15 -%}
+                {{ ui_text(ui_get(v_j, ['salary'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'hidden md:table-cell'}, 'children': c_15}) }}
+            {%- endif %}
+            {%- set c_17 -%}
+              {%- set c_16 -%}
+                {{ ui_text(ui_get(v_labels, ['apply'])) }}
+              {%- endset -%}
+              {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_j, ['href']), 'className': ui_cnv(['font-medium'])}, 'children': c_16}) }}
+            {%- endset -%}
+            {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'pr-4 text-right'}, 'children': c_17}) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-row.html.j2', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_18}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/table/table-body.html.j2', {'p': {}, 'children': c_19}) }}
+    {%- endset -%}
+    {{ ui_include('ui/table/table.html.j2', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'job-table'])}, 'children': c_20}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'w-full overflow-x-auto rounded inset-ring inset-ring-border'}, 'children': c_21}) }}
+{%- else %}
+  {%- set c_36 -%}
+    {%- for v_j in ui_l(v_jobs) %}
+      {%- set c_35 -%}
+        {%- set c_30 -%}
+          {%- set c_22 -%}
+            {{ ui_text(ui_get(v_j, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'lg', 'Weight': 'semibold'}, 'children': c_22}) }}
+          {%- set c_29 -%}
+            {%- set c_24 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'briefcase', 'Size': 16}}) }}
+              {%- set c_23 -%}
+                {{ ui_text(ui_get(v_j, ['type'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_23}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_24}) }}
+            {%- set c_26 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'map-pin', 'Size': 16}}) }}
+              {%- set c_25 -%}
+                {{ ui_text(ui_get(v_j, ['location'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_25}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_26}) }}
+            {%- set c_28 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'calendar', 'Size': 16}}) }}
+              {%- set c_27 -%}
+                {{ ui_text(ui_get(v_j, ['posted'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_27}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_28}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Class': 'flex-wrap text-sm text-muted-foreground'}, 'children': c_29}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_30}) }}
+        {%- if ui_t(ui_eq(v_salary, 'show')) %}
+          {%- set c_31 -%}
+            {{ ui_text(ui_get(v_j, ['salary'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'semibold', 'Attrs': ui_attrs(['data-testid', 'salary'])}, 'children': c_31}) }}
+        {%- endif %}
+        {%- set c_34 -%}
+          {%- set c_32 -%}
+            {{ ui_text(ui_first_of(ui_where(v_departments, 'id', ui_get(v_j, ['dept'])), 'name')) }}
+          {%- endset -%}
+          {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'default'}, 'children': c_32}) }}
+          {%- set c_33 -%}
+            {{ ui_text(ui_get(v_labels, ['apply'])) }}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_j, ['href']), 'className': ui_cnv(['inline-flex items-center gap-2 text-sm font-medium'])}, 'children': c_33}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'mt-auto'}, 'children': c_34}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_35}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-2', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_36}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/kanban-board.html.j2 b/packages/jinja2/ui/blocks/kanban-board.html.j2
new file mode 100644
index 0000000..d0430d9
--- /dev/null
+++ b/packages/jinja2/ui/blocks/kanban-board.html.j2
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/kanban-board.json
+    Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card between lanes is a port contract.
+    Props (p): id, title, lanes, empty, cards, countLabel, card, cols, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lanes = ui_def(p['lanes'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_cards = ui_def(p['cards'], none) -%}
+{%- set v_countLabel = ui_def(p['countLabel'], none) -%}
+{%- set v_card = ui_def(p['card'], 'detail') -%}
+{%- set v_cols = ui_def(p['cols'], '3') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_len(v_lanes), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'kanban', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_11 -%}
+      {%- for v_lane in ui_l(v_lanes) %}
+        {%- set c_10 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_lane, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_tpl(v_countLabel, [ui_len(ui_where(v_cards, 'lane', ui_get(v_lane, ['key'])))])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'between'}, 'children': c_3}) }}
+          {%- set c_9 -%}
+            {%- for v_c in ui_l(ui_where(v_cards, 'lane', ui_get(v_lane, ['key']))) %}
+              {%- set c_8 -%}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_c, ['title'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}) }}
+                {%- if ui_t(ui_eq(v_card, 'detail')) %}
+                  {%- set c_7 -%}
+                    {%- set c_5 -%}
+                      {{ ui_text(ui_get(v_c, ['tag'])) }}
+                    {%- endset -%}
+                    {{ ui_include('blocks/pill.html.j2', {'p': {'tone': 'blue', 'icon': 'tag'}, 'children': c_5}) }}
+                    {%- set c_6 -%}
+                      {{ ui_text(ui_get(v_c, ['who'])) }}
+                    {%- endset -%}
+                    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_7}) }}
+                {%- endif %}
+              {%- endset -%}
+              {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col rounded bg-card inset-ring inset-ring-border', ('gap-2 p-2' if ui_t(ui_eq(v_density, 'compact')) else 'gap-2 p-4')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_9}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-muted p-4', 'Attrs': ui_attrs(['data-testid', 'lane'])}, 'children': c_10}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_cols, '2')) else '1-3')), 'Class': 'items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'lanes'])}, 'children': c_11}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_12}) }}
diff --git a/packages/jinja2/ui/blocks/logo-cloud.html.j2 b/packages/jinja2/ui/blocks/logo-cloud.html.j2
new file mode 100644
index 0000000..0f3d8b8
--- /dev/null
+++ b/packages/jinja2/ui/blocks/logo-cloud.html.j2
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/logo-cloud.json
+    A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row), columns (2, 3, 4), item (name, icon only, tile), density, tone.
+    Props (p): id, title, logos, empty, layout, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_logos = ui_def(p['logos'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_cols = ui_def(p['cols'], '4') -%}
+{%- set v_item = ui_def(p['item'], 'name') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_eq(ui_len(v_logos), 0)) %}
+  {%- set c_1 -%}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'building-2', 'title': v_empty}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_1}) }}
+{%- elif ui_t(ui_eq(v_layout, 'row')) %}
+  {{ ui_include('blocks/logo-ribbon.html.j2', {'p': {'id': v_id, 'title': v_title, 'logos': v_logos, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}}) }}
+{%- else %}
+  {%- set c_5 -%}
+    {%- set c_4 -%}
+      {%- for v_logo in ui_l(v_logos) %}
+        {%- set c_3 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_logo, ['icon'])), 'Size': 24}}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_logo, ['name'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': ui_s(('sr-only' if ui_t(ui_eq(v_item, 'icon')) else ''))}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'center', 'Class': ui_s(ui_cnv(['text-muted-foreground', ('flex-col rounded p-4 inset-ring inset-ring-border' if ui_t(ui_eq(v_item, 'tile')) else '')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_3}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('2' if ui_t(ui_eq(v_cols, '2')) else ('2-3' if ui_t(ui_eq(v_cols, '3')) else ('2-4' if ui_t(ui_eq(v_cols, '4')) else '3-6')))), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_4}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_5}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/logo-ribbon.html.j2 b/packages/jinja2/ui/blocks/logo-ribbon.html.j2
new file mode 100644
index 0000000..edfac68
--- /dev/null
+++ b/packages/jinja2/ui/blocks/logo-ribbon.html.j2
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/logo-ribbon.json
+    A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset.
+    Props (p): id, title, logos, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_logos = ui_def(p['logos'], none) -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': 'xl', 'Weight': 'semibold', 'Class': 'leading-7', 'Attrs': ui_attrs(['id', ui_add(v_id, '-title')])}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {%- for v_logo in ui_l(v_logos) %}
+        {{ ui_include('blocks/logo-slot.html.j2', {'p': {'name': ui_get(v_logo, ['name']), 'icon': ui_get(v_logo, ['icon'])}}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '0', 'Justify': 'center', 'Align': 'start', 'Class': ui_s(ui_cnv(['flex w-full flex-wrap', ui_preset('blocks/presets/defaults.json', ['logos', 'row'])])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'logos-block'])}, 'children': c_3}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'tone': v_tone, 'density': v_density, 'measure': 'fill', 'align': 'center', 'className': ui_cnv(['py-0']), 'landmarkLabel': v_landmarkLabel}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/logo-sidebar.html.j2 b/packages/jinja2/ui/blocks/logo-sidebar.html.j2
new file mode 100644
index 0000000..59f4292
--- /dev/null
+++ b/packages/jinja2/ui/blocks/logo-sidebar.html.j2
@@ -0,0 +1,23 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/logo-sidebar.json
+    The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The variant picks the padding (recipe).
+    Props (p): variant, name, className, mark (slot), actions (slot). -#}
+{%- set v_variant = ui_def(p['variant'], 'chat') -%}
+{%- set v_name = ui_def(p['name'], none) -%}
+{%- set c_4 -%}
+  {%- set c_2 -%}
+    {{ ui_def(p['mark'], '')|safe }}
+    {%- set c_1 -%}
+      {{ ui_text(v_name) }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'logo-sidebar-name'])}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex items-center gap-4', 'Attrs': ui_attrs(['data-slot', 'logo-sidebar-brand'])}, 'children': c_2}) }}
+  {%- if ui_t((ui_def(p['actions'], none) is not none)) %}
+    {%- set c_3 -%}
+      {{ ui_def(p['actions'], '')|safe }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex items-center gap-2 in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'logo-sidebar-actions'])}, 'children': c_3}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/logo-sidebar.variants.json', {'variant': v_variant}), 'in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'logo-sidebar'])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/logo-slot.html.j2 b/packages/jinja2/ui/blocks/logo-slot.html.j2
new file mode 100644
index 0000000..765fc4e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/logo-slot.html.j2
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/logo-slot.json
+    One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only.
+    Props (p): name, icon. -#}
+{%- set v_name = ui_def(p['name'], none) -%}
+{%- set v_icon = ui_def(p['icon'], none) -%}
+{%- set c_2 -%}
+  {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(v_icon), 'Size': ui_i(ui_preset('blocks/presets/defaults.json', ['logos', 'glyph']))}}) }}
+  {%- set c_1 -%}
+    {{ ui_text(v_name) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'sr-only'}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex shrink-0 items-center justify-center text-muted-foreground', ui_preset('blocks/presets/defaults.json', ['logos', 'slot'])])), 'Attrs': ui_attrs(['data-testid', 'item', 'data-slot', 'logo-slot'])}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/media-contacts.html.j2 b/packages/jinja2/ui/blocks/media-contacts.html.j2
new file mode 100644
index 0000000..ba35f1f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/media-contacts.html.j2
@@ -0,0 +1,47 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-contacts.json
+    The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card.
+    Props (p): extras, labels. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_9 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['list'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+    {%- for v_c in ui_l(ui_get(v_extras, ['channels'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- set c_2 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 16}}) }}
+        {{ ui_text(ui_get(v_c, ['title'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Href': ui_s(ui_get(v_c, ['href'])), 'Class': 'w-full gap-2', 'Attrs': ui_attrs(['data-testid', 'media-channel'])}, 'children': c_2}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch'}, 'children': c_3}) }}
+  {%- set c_8 -%}
+    {%- set c_4 -%}
+      {{ ui_text(ui_get(v_labels, ['figures'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}) }}
+    {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_7 -%}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_6}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Attrs': ui_attrs(['data-testid', 'media-stat'])}, 'children': c_7}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4'}, 'children': c_8}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/media-figures.html.j2 b/packages/jinja2/ui/blocks/media-figures.html.j2
new file mode 100644
index 0000000..5011ca8
--- /dev/null
+++ b/packages/jinja2/ui/blocks/media-figures.html.j2
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-figures.json
+    The figures of MediaList: four in two columns, centered, or three in a row.
+    Props (p): extras, mode. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_mode = ui_def(p['mode'], 'grid') -%}
+{%- set c_4 -%}
+  {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, (4 if ui_t(ui_eq(v_mode, 'grid')) else 3))) %}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_s, ['value'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_s, ['label'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': ui_s(('center' if ui_t(ui_eq(v_mode, 'grid')) else 'start')), 'Attrs': ui_attrs(['data-testid', 'media-stat'])}, 'children': c_3}) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-2 gap-6 text-center' if ui_t(ui_eq(v_mode, 'grid')) else 'grid grid-cols-3 gap-6'))}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/media-frame.html.j2 b/packages/jinja2/ui/blocks/media-frame.html.j2
new file mode 100644
index 0000000..24aaaa0
--- /dev/null
+++ b/packages/jinja2/ui/blocks/media-frame.html.j2
@@ -0,0 +1,16 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/media-frame.json
+    A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the corners are the plain theme radius.
+    Props (p): alt, src, darkSrc, ratio, className. -#}
+{%- set k_PLACEHOLDER = {'light': 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNlMmU4ZjAiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjOTRhM2I4IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+', 'dark': 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxZTI5M2IiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjNDc1NTY5IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+'} -%}
+{%- set v_alt = ui_def(p['alt'], none) -%}
+{%- set v_src = ui_def(p['src'], none) -%}
+{%- set v_darkSrc = ui_def(p['darkSrc'], none) -%}
+{%- set v_ratio = ui_def(p['ratio'], '16/9') -%}
+{%- set v_lightSrc = ui_coalesce([v_src, ui_at(k_PLACEHOLDER, 'light')]) -%}
+{%- set v_nightSrc = ui_coalesce([v_darkSrc, v_src, ui_at(k_PLACEHOLDER, 'dark')]) -%}
+{%- set c_1 -%}
+  {{ ui_include('ui/image/image.html.j2', {'p': {'Src': ui_s(v_lightSrc), 'Alt': ui_s(v_alt), 'Class': 'absolute inset-0 size-full object-cover dark:hidden', 'Attrs': ui_attrs(['data-theme-src', 'light'])}}) }}
+  {{ ui_include('ui/image/image.html.j2', {'p': {'Src': ui_s(v_nightSrc), 'Alt': ui_s(v_alt), 'Class': 'absolute inset-0 hidden size-full object-cover dark:block', 'Attrs': ui_attrs(['data-theme-src', 'dark'])}}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/media-frame.variants.json', {'ratio': v_ratio}), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'media-frame', 'data-placeholder', ('false' if ui_t(v_src) else 'true')])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/media-list.html.j2 b/packages/jinja2/ui/blocks/media-list.html.j2
new file mode 100644
index 0000000..33e6053
--- /dev/null
+++ b/packages/jinja2/ui/blocks/media-list.html.j2
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-list.json
+    A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts, contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.
+    Props (p): id, title, lead, badge, extras, labels, actions, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'figures') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_1 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': ('1/1' if ui_t(ui_or([ui_eq(v_layout, 'steps'), ui_eq(v_layout, 'topics')])) else '4/3')}}) }}
+{%- endset -%}
+{%- set c_2 -%}
+  {%- if ui_t(ui_or([ui_eq(v_layout, 'figures'), ui_eq(v_layout, 'proof')])) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['stats'])), 0)) %}
+      {{ ui_include('blocks/media-figures.html.j2', {'p': {'extras': v_extras, 'mode': ('row' if ui_t(ui_eq(v_layout, 'proof')) else 'grid')}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'proof')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['reviews'])), 0)) %}
+      {{ ui_include('blocks/media-review.html.j2', {'p': {'extras': v_extras, 'labels': v_labels}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'steps')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['steps'])), 0)) %}
+      {{ ui_include('blocks/media-steps.html.j2', {'p': {'extras': v_extras, 'labels': v_labels}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'posts')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['posts'])), 0)) %}
+      {{ ui_include('blocks/media-posts.html.j2', {'p': {'extras': v_extras, 'labels': v_labels}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'topics')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['topics'])), 0)) %}
+      {{ ui_include('blocks/media-topics.html.j2', {'p': {'extras': v_extras, 'labels': v_labels}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'contact')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['channels'])), 0)) %}
+      {{ ui_include('blocks/media-contacts.html.j2', {'p': {'extras': v_extras, 'labels': v_labels}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(not (ui_eq(v_layout, 'contact'))) %}
+    {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_1}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/media-posts.html.j2 b/packages/jinja2/ui/blocks/media-posts.html.j2
new file mode 100644
index 0000000..b60e399
--- /dev/null
+++ b/packages/jinja2/ui/blocks/media-posts.html.j2
@@ -0,0 +1,33 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-posts.json
+    The latest posts of MediaList as rows: a dot, the title, the date and reading time.
+    Props (p): extras, labels. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_6 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_labels, ['list'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+  {%- for v_p in ui_l(ui_get(v_extras, ['posts'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 3)) %}
+      {%- set c_5 -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'mt-2 size-2 shrink-0 rounded-full bg-primary'}}) }}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_p, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_p, ['href']), 'className': ui_cnv(['text-sm font-medium']), 'size': 'sm'}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_tpl('{0} · {1}', [ui_get(v_p, ['date']), ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_p, ['minutes'])])])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'media-post'])}, 'children': c_5}) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/media-review.html.j2 b/packages/jinja2/ui/blocks/media-review.html.j2
new file mode 100644
index 0000000..ab5de5e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/media-review.html.j2
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-review.json
+    The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author.
+    Props (p): extras, labels. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- for v_r in ui_l(ui_get(v_extras, ['reviews'])) %}
+  {%- set v_i = loop.index0 -%}
+  {%- if ui_t(ui_lt(v_i, 1)) %}
+    {%- set c_5 -%}
+      {%- set c_2 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_labels, ['featured'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'medium'}, 'children': c_1}) }}
+        {{ ui_include('blocks/rating.html.j2', {'p': {'value': ui_get(v_r, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['rating']), [ui_get(v_r, ['rating'])])}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_2}) }}
+      {%- set c_3 -%}
+        {{ ui_text(ui_tpl('“{0}”', [ui_get(v_r, ['text'])])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base'}, 'children': c_3}) }}
+      {%- set c_4 -%}
+        {{ ui_text(ui_tpl('{0} · {1}', [ui_get(v_r, ['author']), ui_get(v_r, ['date'])])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-muted p-6', 'Attrs': ui_attrs(['data-testid', 'media-review'])}, 'children': c_5}) }}
+  {%- endif %}
+{%- endfor %}
diff --git a/packages/jinja2/ui/blocks/media-steps.html.j2 b/packages/jinja2/ui/blocks/media-steps.html.j2
new file mode 100644
index 0000000..92b2e23
--- /dev/null
+++ b/packages/jinja2/ui/blocks/media-steps.html.j2
@@ -0,0 +1,38 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-steps.json
+    The steps of MediaList as numbered rows: the number, a glyph, the title and the text.
+    Props (p): extras, labels. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_8 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_labels, ['list'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+  {%- for v_s in ui_l(ui_get(v_extras, ['steps'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- set c_7 -%}
+      {%- set c_2 -%}
+        {{ ui_text(ui_tpl('0{0}', [ui_str(ui_add(v_i, 1))])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'w-6 shrink-0 text-primary'}, 'children': c_2}) }}
+      {%- set c_3 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_s, ['icon'])), 'Size': 16}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-6 shrink-0 items-center justify-center text-primary'}, 'children': c_3}) }}
+      {%- set c_6 -%}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_s, ['title'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_s, ['text'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_6}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'media-step'])}, 'children': c_7}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/media-topics.html.j2 b/packages/jinja2/ui/blocks/media-topics.html.j2
new file mode 100644
index 0000000..7b900d2
--- /dev/null
+++ b/packages/jinja2/ui/blocks/media-topics.html.j2
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-topics.json
+    The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow.
+    Props (p): extras, labels. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_7 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_labels, ['list'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+  {%- for v_c in ui_l(ui_get(v_extras, ['topics'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 5)) %}
+      {%- set c_6 -%}
+        {%- set c_2 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground'}, 'children': c_2}) }}
+        {%- set c_5 -%}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_c, ['name'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_3}) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_tpl(ui_get(v_labels, ['count']), [ui_get(v_c, ['count'])])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'min-w-0 flex-1'}, 'children': c_5}) }}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+      {%- endset -%}
+      {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_c, ['href']), 'className': ui_cnv(['rounded bg-card inset-ring inset-ring-border flex w-full items-center gap-4 p-4']), 'variant': 'block', 'testid': 'media-topic', 'block': true}, 'children': c_6}) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/mega-menu.html.j2 b/packages/jinja2/ui/blocks/mega-menu.html.j2
new file mode 100644
index 0000000..14e585c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/mega-menu.html.j2
@@ -0,0 +1,95 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/mega-menu.json
+    A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed), cols (2, 3), promo (none, card).
+    Props (p): label, brand, brandHref, trigger, links, groups, promoTitle, promoText, panel, cols, promo, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_brand = ui_def(p['brand'], none) -%}
+{%- set v_brandHref = ui_def(p['brandHref'], none) -%}
+{%- set v_trigger = ui_def(p['trigger'], none) -%}
+{%- set v_links = ui_def(p['links'], none) -%}
+{%- set v_groups = ui_def(p['groups'], none) -%}
+{%- set v_promoTitle = ui_def(p['promoTitle'], none) -%}
+{%- set v_promoText = ui_def(p['promoText'], none) -%}
+{%- set v_panel = ui_def(p['panel'], 'open') -%}
+{%- set v_cols = ui_def(p['cols'], '3') -%}
+{%- set v_promo = ui_def(p['promo'], 'none') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_7 -%}
+  {%- set c_6 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_brand) }}
+    {%- endset -%}
+    {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': v_brandHref, 'className': ui_cnv(['text-lg font-medium']), 'testid': 'brand'}, 'children': c_1}) }}
+    {%- set c_5 -%}
+      {%- set c_4 -%}
+        {%- set c_2 -%}
+          {{ ui_text(v_trigger) }}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-down', 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/button-plain/button-plain.html.j2', {'p': {'Type': 'button', 'Class': 'inline-flex items-center gap-2 text-sm font-semibold', 'Attrs': ui_attrs(['aria-expanded', ('true' if ui_t(ui_eq(v_panel, 'open')) else 'false'), 'data-testid', 'mega-trigger'])}, 'children': c_2}) }}
+        {%- for v_l in ui_l(v_links) %}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_l, ['name'])) }}
+          {%- endset -%}
+          {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv(['text-sm']), 'current': ui_eq(ui_get(v_l, ['id']), ''), 'testid': 'nav-link'}, 'children': c_3}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_4}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) if ui_t(v_landmarkLabel) else v_label), 'className': ui_cnv(['flex-1'])}, 'children': c_5}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-wrap items-center gap-6 py-4'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_6}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'header', 'Class': 'relative border-b border-border bg-background', 'Attrs': ui_attrs(['data-testid', 'mega-menu', 'aria-label', v_landmarkLabel])}, 'children': c_7}) }}
+{%- if ui_t(ui_eq(v_panel, 'open')) %}
+  {%- set c_19 -%}
+    {%- set c_18 -%}
+      {%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+        {%- set c_14 -%}
+          {%- for v_g in ui_l(v_groups) %}
+            {%- set c_13 -%}
+              {%- set c_9 -%}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_g, ['icon'])), 'Size': 16}}) }}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_get(v_g, ['title'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_8}) }}
+              {%- endset -%}
+              {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_9}) }}
+              {%- set c_12 -%}
+                {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+                  {%- set c_11 -%}
+                    {%- set c_10 -%}
+                      {{ ui_text(ui_get(v_item, ['name'])) }}
+                    {%- endset -%}
+                    {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-sm text-muted-foreground'])}, 'children': c_10}) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_11}) }}
+                {%- endfor %}
+              {%- endset -%}
+              {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_12}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_13}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_cols, '2')) else '1-3')), 'Class': 'gap-6', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_14}) }}
+      {%- endif %}
+      {%- if ui_t(ui_eq(v_promo, 'card')) %}
+        {%- set c_17 -%}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_coalesce([v_promoTitle, '']), 'ratio': '4/3'}}) }}
+          {%- set c_15 -%}
+            {{ ui_text(v_promoTitle) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_15}) }}
+          {%- set c_16 -%}
+            {{ ui_text(v_promoText) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_16}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'promo'])}, 'children': c_17}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'grid gap-8 py-6', ('md:grid-cols-[1fr_16rem]' if ui_t(ui_eq(v_promo, 'card')) else '')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_18}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'border-t border-border bg-card', 'Attrs': ui_attrs(['data-testid', 'mega-panel'])}, 'children': c_19}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/member-row.html.j2 b/packages/jinja2/ui/blocks/member-row.html.j2
new file mode 100644
index 0000000..39f73c4
--- /dev/null
+++ b/packages/jinja2/ui/blocks/member-row.html.j2
@@ -0,0 +1,56 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/member-row.json
+    One member of TeamGrid beside a small portrait: the name, the role, then the department and the place (detailed, directory), the bio (detailed) and the skills (detailed, list).
+    Props (p): member, depts, layout. -#}
+{%- set v_member = ui_def(p['member'], none) -%}
+{%- set v_depts = ui_def(p['depts'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'list') -%}
+{%- set c_11 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_member, ['name']), 'ratio': '1/1', 'className': ui_cnv([ui_cnv([('size-16' if ui_t(ui_eq(v_layout, 'detailed')) else 'size-12'), 'shrink-0'])])}}) }}
+  {%- set c_10 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_member, ['name'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_1}) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_member, ['role'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_3}) }}
+    {%- if ui_t(not (ui_eq(v_layout, 'list'))) %}
+      {%- set c_6 -%}
+        {%- set c_4 -%}
+          {{ ui_text(ui_at(v_depts, ui_get(v_member, ['dept']))) }}
+        {%- endset -%}
+        {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm'}, 'children': c_4}) }}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'map-pin', 'Size': 16}}) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_member, ['location'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_5}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'flex-wrap text-xs text-muted-foreground'}, 'children': c_6}) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_layout, 'detailed')) %}
+      {%- set c_7 -%}
+        {{ ui_text(ui_get(v_member, ['bio'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+    {%- endif %}
+    {%- if ui_t(not (ui_eq(v_layout, 'directory'))) %}
+      {%- set c_9 -%}
+        {%- for v_k in ui_l(ui_get(v_member, ['skills'])) %}
+          {%- set c_8 -%}
+            {{ ui_text(v_k) }}
+          {%- endset -%}
+          {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_8}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_9}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'min-w-0 flex-1'}, 'children': c_10}) }}
+{%- endset -%}
+{{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Class': ui_s(('rounded bg-card inset-ring inset-ring-border flex-col p-6' if ui_t(ui_eq(v_layout, 'detailed')) else ('rounded bg-card inset-ring inset-ring-border p-4' if ui_t(ui_eq(v_layout, 'directory')) else 'border-b border-border pb-4'))), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/menu-entry.html.j2 b/packages/jinja2/ui/blocks/menu-entry.html.j2
new file mode 100644
index 0000000..e1b0852
--- /dev/null
+++ b/packages/jinja2/ui/blocks/menu-entry.html.j2
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/menu-entry.json
+    One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.
+    Props (p): href, current, variant, size, testid, block, className; children: markup. -#}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set v_current = ui_def(p['current'], false) -%}
+{%- set v_variant = ui_def(p['variant'], 'default') -%}
+{%- set v_size = ui_def(p['size'], 'default') -%}
+{%- set v_testid = ui_def(p['testid'], none) -%}
+{%- set v_block = ui_def(p['block'], false) -%}
+{%- if ui_t(v_href) %}
+  {%- set c_1 -%}
+    {{ ui_def(children, '')|safe }}
+  {%- endset -%}
+  {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(v_href), 'Variant': ui_s(v_variant), 'Size': ui_s(v_size), 'AriaCurrent': ui_s(('page' if ui_t(v_current) else none)), 'Class': ui_s(ui_def(p['className'], '')), 'Attrs': ui_attrs(['data-testid', v_testid])}, 'children': c_1}) }}
+{%- elif ui_t(v_block) %}
+  {%- set c_2 -%}
+    {{ ui_def(children, '')|safe }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_def(p['className'], '')), 'Attrs': ui_attrs(['aria-current', ('page' if ui_t(v_current) else none), 'data-testid', v_testid])}, 'children': c_2}) }}
+{%- else %}
+  {%- set c_3 -%}
+    {{ ui_def(children, '')|safe }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(ui_def(p['className'], '')), 'Attrs': ui_attrs(['aria-current', ('page' if ui_t(v_current) else none), 'data-testid', v_testid])}, 'children': c_3}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/meter-row.html.j2 b/packages/jinja2/ui/blocks/meter-row.html.j2
new file mode 100644
index 0000000..488da26
--- /dev/null
+++ b/packages/jinja2/ui/blocks/meter-row.html.j2
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/meter-row.json
+    A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With `href` the whole row is a link.
+    Props (p): label, value, caption, hint, href, className. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_value = ui_def(p['value'], none) -%}
+{%- set v_caption = ui_def(p['caption'], none) -%}
+{%- set v_hint = ui_def(p['hint'], none) -%}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set c_11 -%}
+  {%- if ui_t(v_href) %}
+    {%- set c_5 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(v_label) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 min-w-0 truncate text-sm font-bold text-foreground'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(v_caption) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex items-baseline justify-between gap-4'}, 'children': c_3}) }}
+      {{ ui_include('ui/form/progress.html.j2', {'p': {'Value': ui_s(ui_str(v_value)), 'Max': '100', 'Attrs': ui_attrs(['aria-label', v_label])}}) }}
+      {%- if ui_t(v_hint) %}
+        {%- set c_4 -%}
+          {{ ui_text(v_hint) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_4}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(v_href), 'Variant': 'block', 'Class': 'flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted'}, 'children': c_5}) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- set c_8 -%}
+        {%- set c_6 -%}
+          {{ ui_text(v_label) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 min-w-0 truncate text-sm font-bold text-foreground'}, 'children': c_6}) }}
+        {%- set c_7 -%}
+          {{ ui_text(v_caption) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground'}, 'children': c_7}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex items-baseline justify-between gap-4'}, 'children': c_8}) }}
+      {{ ui_include('ui/form/progress.html.j2', {'p': {'Value': ui_s(ui_str(v_value)), 'Max': '100', 'Attrs': ui_attrs(['aria-label', v_label])}}) }}
+      {%- if ui_t(v_hint) %}
+        {%- set c_9 -%}
+          {{ ui_text(v_hint) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_9}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-w-0 flex-col gap-2 p-2'}, 'children': c_10}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['min-w-0', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'meter-row'])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/metric-row.html.j2 b/packages/jinja2/ui/blocks/metric-row.html.j2
new file mode 100644
index 0000000..ff4e8f4
--- /dev/null
+++ b/packages/jinja2/ui/blocks/metric-row.html.j2
@@ -0,0 +1,51 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/metric-row.json
+    Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes: columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).
+    Props (p): id, title, metrics, empty, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_metrics = ui_def(p['metrics'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_cols = ui_def(p['cols'], '4') -%}
+{%- set v_item = ui_def(p['item'], 'tile') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_metrics), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'gauge', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_m in ui_l(v_metrics) %}
+        {%- if ui_t(ui_eq(v_item, 'tile')) %}
+          {%- set c_1 -%}
+            {{ ui_include('blocks/stat-tile.html.j2', {'p': {'label': ui_get(v_m, ['label']), 'value': ui_get(v_m, ['value']), 'icon': ui_get(v_m, ['icon']), 'hint': ui_get(v_m, ['hint'])}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_1}) }}
+        {%- else %}
+          {%- set c_6 -%}
+            {%- set c_3 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_m, ['icon'])), 'Size': 16}}) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_m, ['label'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs'}, 'children': c_2}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_m, ['value'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '2xl', 'Weight': 'bold'}, 'children': c_4}) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_m, ['hint'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'rounded bg-card p-4 inset-ring inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_cols, '2')) else '1-4')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/milestone-timeline.html.j2 b/packages/jinja2/ui/blocks/milestone-timeline.html.j2
new file mode 100644
index 0000000..295d760
--- /dev/null
+++ b/packages/jinja2/ui/blocks/milestone-timeline.html.j2
@@ -0,0 +1,51 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/milestone-timeline.json
+    Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone, density.
+    Props (p): id, title, lead, milestones, empty, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_milestones = ui_def(p['milestones'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_layout = ui_def(p['layout'], 'split') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_8 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4'}}) }}
+{%- endset -%}
+{%- set c_9 -%}
+  {%- if ui_t(ui_eq(ui_len(v_milestones), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'milestone', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_m in ui_l(v_milestones) %}
+        {%- set c_6 -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(('absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary' if ui_t(ui_eq(v_layout, 'row')) else 'absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary')), 'Attrs': ui_attrs(['aria-hidden', 'true'])}}) }}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_m, ['date'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_m, ['tag'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_m, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_4}) }}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_m, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': ui_s(('relative flex flex-col gap-2 pt-6' if ui_t(ui_eq(v_layout, 'row')) else 'relative flex flex-col gap-2 pl-6')), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ol', 'Class': ui_s(('grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4' if ui_t(ui_eq(v_layout, 'row')) else 'flex flex-col gap-8 border-l border-border')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'layout': ('split' if ui_t(ui_eq(v_layout, 'split')) else 'stack'), 'media': {'show': ui_eq(v_layout, 'split'), 'side': 'start', 'align': 'start'}, 'measure': ('2xl' if ui_t(ui_eq(v_layout, 'stacked')) else 'default'), 'landmarkLabel': v_landmarkLabel, 'aside': f_8}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/nav-actions.html.j2 b/packages/jinja2/ui/blocks/nav-actions.html.j2
new file mode 100644
index 0000000..398df54
--- /dev/null
+++ b/packages/jinja2/ui/blocks/nav-actions.html.j2
@@ -0,0 +1,29 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-actions.json
+    The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the press). No wrapper: they sit in the row of the bar.
+    Props (p): login, loginHref, cta, ctaHref, actions, tone, themeLabel. -#}
+{%- set v_login = ui_def(p['login'], none) -%}
+{%- set v_loginHref = ui_def(p['loginHref'], none) -%}
+{%- set v_cta = ui_def(p['cta'], none) -%}
+{%- set v_ctaHref = ui_def(p['ctaHref'], none) -%}
+{%- set v_actions = ui_def(p['actions'], 'cta') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_themeLabel = ui_def(p['themeLabel'], none) -%}
+{%- if ui_t(v_login) %}
+  {%- set c_1 -%}
+    {{ ui_text(v_login) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Href': ui_s(v_loginHref), 'Class': ui_s(('text-background hover:bg-background/10' if ui_t(ui_eq(v_tone, 'inverse')) else '')), 'Attrs': ui_attrs(['data-testid', 'nav-login'])}, 'children': c_1}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_actions, 'cta'), v_cta])) %}
+  {%- set c_2 -%}
+    {{ ui_text(v_cta) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': ui_s(('secondary' if ui_t(ui_eq(v_tone, 'inverse')) else 'default')), 'Size': 'sm', 'Href': ui_s(v_ctaHref), 'Attrs': ui_attrs(['data-testid', 'header-cta'])}, 'children': c_2}) }}
+{%- endif %}
+{%- if ui_t(v_themeLabel) %}
+  {%- set c_3 -%}
+    {{ ui_text(v_themeLabel) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'theme-toggle'])}, 'children': c_3}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/nav-bar-menu.html.j2 b/packages/jinja2/ui/blocks/nav-bar-menu.html.j2
new file mode 100644
index 0000000..abc062f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/nav-bar-menu.html.j2
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-bar-menu.json
+    The links of NavBar in a nav landmark; left out when there are no links.
+    Props (p): label, links, current, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_links = ui_def(p['links'], none) -%}
+{%- set v_current = ui_def(p['current'], '') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_gt(ui_len(v_links), 0)) %}
+  {%- set c_1 -%}
+    {{ ui_include('blocks/nav-links.html.j2', {'p': {'links': v_links, 'current': v_current}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': v_label, 'className': ui_cnv(['order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0']), 'testid': 'site-nav', 'landmarkLabel': v_landmarkLabel}, 'children': c_1}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/nav-bar.html.j2 b/packages/jinja2/ui/blocks/nav-bar.html.j2
new file mode 100644
index 0000000..8e3a79f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/nav-bar.html.j2
@@ -0,0 +1,69 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-bar.json
+    A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the middle with the links on both sides; search: a search field with its shortcut in the middle), over (none, media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark hero band). Turning solid on scroll is a port contract.
+    Props (p): label, brand, brandHref, links, current, actions, search, tone, layout, over, skip, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_brand = ui_def(p['brand'], none) -%}
+{%- set v_brandHref = ui_def(p['brandHref'], none) -%}
+{%- set v_links = ui_def(p['links'], none) -%}
+{%- set v_current = ui_def(p['current'], '') -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_search = ui_def(p['search'], none) -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_layout = ui_def(p['layout'], 'inline') -%}
+{%- set v_over = ui_def(p['over'], 'none') -%}
+{%- set v_skip = ui_def(p['skip'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_12 -%}
+  {{ ui_include('blocks/over-media.html.j2', {'p': {'on': ui_eq(v_over, 'media'), 'alt': v_brand}}) }}
+  {%- if ui_t(v_skip) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_skip) }}
+    {%- endset -%}
+    {{ ui_include('ui/link-plain/link-plain.html.j2', {'p': {'Href': '#main-content', 'Class': 'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'skip-link'])}, 'children': c_1}) }}
+  {%- endif %}
+  {%- set c_11 -%}
+    {%- set c_10 -%}
+      {%- if ui_t(ui_eq(v_layout, 'split')) %}
+        {%- set c_8 -%}
+          {%- set c_7 -%}
+            {%- set c_2 -%}
+              {{ ui_include('blocks/nav-links.html.j2', {'p': {'links': v_links, 'current': v_current, 'side': 'left'}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'md:justify-self-start'}, 'children': c_2}) }}
+            {%- set c_4 -%}
+              {%- set c_3 -%}
+                {{ ui_text(v_brand) }}
+              {%- endset -%}
+              {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': v_brandHref, 'className': ui_cnv(['text-lg font-medium']), 'testid': 'brand'}, 'children': c_3}) }}
+            {%- endset -%}
+            {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'text-center'}, 'children': c_4}) }}
+            {%- set c_6 -%}
+              {%- set c_5 -%}
+                {{ ui_include('blocks/nav-links.html.j2', {'p': {'links': v_links, 'current': v_current, 'side': 'right'}}) }}
+              {%- endset -%}
+              {{ ui_include('ui/box/box.html.j2', {'p': {}, 'children': c_5}) }}
+              {{ ui_include('blocks/nav-actions.html.j2', {'p': {'login': ui_get(v_actions, ['login']), 'loginHref': ui_get(v_actions, ['loginHref']), 'cta': ui_get(v_actions, ['cta']), 'ctaHref': ui_get(v_actions, ['href']), 'actions': ui_get(v_actions, ['mode']), 'tone': v_tone, 'themeLabel': ui_get(v_actions, ['themeLabel'])}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'end', 'Class': 'flex-wrap md:justify-self-end'}, 'children': c_6}) }}
+          {%- endset -%}
+          {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-3', 'Class': 'w-full items-center gap-4'}, 'children': c_7}) }}
+        {%- endset -%}
+        {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) if ui_t(v_landmarkLabel) else v_label), 'className': ui_cnv(['w-full']), 'testid': 'site-nav'}, 'children': c_8}) }}
+      {%- else %}
+        {%- set c_9 -%}
+          {{ ui_text(v_brand) }}
+        {%- endset -%}
+        {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': v_brandHref, 'className': ui_cnv(['text-lg font-medium']), 'testid': 'brand'}, 'children': c_9}) }}
+        {%- if ui_t(ui_eq(v_layout, 'search')) %}
+          {{ ui_include('blocks/search-palette.html.j2', {'p': {'label': ui_get(v_search, ['label']), 'shortcut': ui_get(v_search, ['shortcut'])}}) }}
+        {%- endif %}
+        {{ ui_include('blocks/nav-bar-menu.html.j2', {'p': {'label': v_label, 'links': v_links, 'current': v_current, 'landmarkLabel': v_landmarkLabel}}) }}
+        {{ ui_include('blocks/nav-actions.html.j2', {'p': {'login': ui_get(v_actions, ['login']), 'loginHref': ui_get(v_actions, ['loginHref']), 'cta': ui_get(v_actions, ['cta']), 'ctaHref': ui_get(v_actions, ['href']), 'actions': ui_get(v_actions, ['mode']), 'tone': v_tone, 'themeLabel': ui_get(v_actions, ['themeLabel'])}}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-wrap items-center justify-between gap-4', 'py-4']))}, 'children': c_10}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_11}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'header', 'Class': ui_s(ui_cnv(['relative', ('border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background' if ui_t(ui_eq(v_tone, 'inverse')) else 'border-b border-border bg-background'), ('isolate overflow-hidden border-0 bg-transparent' if ui_t(ui_eq(v_over, 'media')) else '')])), 'Attrs': ui_attrs(['data-testid', 'nav-bar', 'data-layout', v_layout, 'data-tone', v_tone, 'aria-label', v_landmarkLabel])}, 'children': c_12}) }}
diff --git a/packages/jinja2/ui/blocks/nav-block.html.j2 b/packages/jinja2/ui/blocks/nav-block.html.j2
new file mode 100644
index 0000000..4cf9af5
--- /dev/null
+++ b/packages/jinja2/ui/blocks/nav-block.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-block.json
+    A navigation region in its own file: Block tag nav named by `label`.
+    Props (p): label, testid, landmarkLabel, className; children: markup. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_testid = ui_def(p['testid'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'nav', 'Class': ui_s(ui_cnv([ui_def(p['className'], '')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', v_testid])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/nav-item-row.html.j2 b/packages/jinja2/ui/blocks/nav-item-row.html.j2
new file mode 100644
index 0000000..78cdb04
--- /dev/null
+++ b/packages/jinja2/ui/blocks/nav-item-row.html.j2
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/nav-item-row.json
+    The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the right.
+    Props (p): inner, reserveRight, icon (slot), right (slot); children: markup. -#}
+{%- set v_inner = ui_def(p['inner'], none) -%}
+{%- set v_reserveRight = ui_def(p['reserveRight'], false) -%}
+{%- set c_4 -%}
+  {%- set c_2 -%}
+    {{ ui_def(p['icon'], '')|safe }}
+    {%- set c_1 -%}
+      {{ ui_def(children, '')|safe }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'nav-item-label'])}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center', 'Attrs': ui_attrs(['data-slot', 'nav-item-left'])}, 'children': c_2}) }}
+  {%- if ui_t((ui_def(p['right'], none) is not none)) %}
+    {%- set c_3 -%}
+      {{ ui_def(p['right'], '')|safe }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex items-center gap-2 in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'nav-item-right'])}, 'children': c_3}) }}
+  {%- elif ui_t(v_reserveRight) %}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'size-5 shrink-0 in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'nav-item-right'])}}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(v_inner), 'Attrs': ui_attrs(['data-slot', 'nav-item-content'])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/nav-item.html.j2 b/packages/jinja2/ui/blocks/nav-item.html.j2
new file mode 100644
index 0000000..924836a
--- /dev/null
+++ b/packages/jinja2/ui/blocks/nav-item.html.j2
@@ -0,0 +1,38 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/nav-item.json
+    A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a button, otherwise a static box.
+    Props (p): selected, level, href, interactive, reserveRight, contentClass, className, icon (slot), right (slot); children: markup. -#}
+{%- set v_selected = ui_def(p['selected'], false) -%}
+{%- set v_level = ui_def(p['level'], none) -%}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set v_interactive = ui_def(p['interactive'], false) -%}
+{%- set v_reserveRight = ui_def(p['reserveRight'], false) -%}
+{%- set v_contentClass = ui_def(p['contentClass'], none) -%}
+{%- set v_state = ('selected' if ui_t(v_selected) else 'default') -%}
+{%- set v_outer = ui_cnv([ui_recipe('blocks/recipes/nav-item.variants.json', {'level': v_level, 'state': v_state}), 'group in-data-[nav=collapsed]:justify-center', ui_def(p['className'], '')]) -%}
+{%- set v_inner = ui_cnv([ui_recipe('blocks/recipes/nav-item-content.variants.json', {'level': v_level, 'state': v_state}), ui_and([not (ui_t(v_selected)), 'group-hover:bg-muted']), 'in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0', v_contentClass]) -%}
+{%- if ui_t(v_href) %}
+  {%- set c_2 -%}
+    {%- set c_1 -%}
+      {{ ui_def(children, '')|safe }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-item-row.html.j2', {'p': {'inner': v_inner, 'reserveRight': v_reserveRight, 'icon': ui_def(p['icon'], none), 'right': ui_def(p['right'], none)}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/link-plain/link-plain.html.j2', {'p': {'Href': ui_s(v_href), 'Class': ui_s(v_outer), 'AriaCurrent': ui_s(('page' if ui_t(v_selected) else none)), 'Attrs': ui_attrs(['data-slot', 'nav-item', 'data-state', v_state])}, 'children': c_2}) }}
+{%- elif ui_t(v_interactive) %}
+  {%- set c_4 -%}
+    {%- set c_3 -%}
+      {{ ui_def(children, '')|safe }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-item-row.html.j2', {'p': {'inner': v_inner, 'reserveRight': v_reserveRight, 'icon': ui_def(p['icon'], none), 'right': ui_def(p['right'], none)}, 'children': c_3}) }}
+  {%- endset -%}
+  {{ ui_include('ui/button-plain/button-plain.html.j2', {'p': {'Type': 'button', 'Class': ui_s(ui_cnv([v_outer, 'text-left'])), 'Attrs': ui_attrs(['aria-current', ('page' if ui_t(v_selected) else none), 'data-slot', 'nav-item', 'data-state', v_state])}, 'children': c_4}) }}
+{%- else %}
+  {%- set c_6 -%}
+    {%- set c_5 -%}
+      {{ ui_def(children, '')|safe }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-item-row.html.j2', {'p': {'inner': v_inner, 'reserveRight': v_reserveRight, 'icon': ui_def(p['icon'], none), 'right': ui_def(p['right'], none)}, 'children': c_5}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(v_outer), 'Attrs': ui_attrs(['aria-current', ('page' if ui_t(v_selected) else none), 'data-slot', 'nav-item', 'data-state', v_state])}, 'children': c_6}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/nav-links.html.j2 b/packages/jinja2/ui/blocks/nav-links.html.j2
new file mode 100644
index 0000000..b182c62
--- /dev/null
+++ b/packages/jinja2/ui/blocks/nav-links.html.j2
@@ -0,0 +1,22 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-links.json
+    The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half of the list.
+    Props (p): links, current, side. -#}
+{%- set v_links = ui_def(p['links'], none) -%}
+{%- set v_current = ui_def(p['current'], '') -%}
+{%- set v_side = ui_def(p['side'], 'all') -%}
+{%- set v_count = ui_len(v_links) -%}
+{%- if ui_t(ui_gt(ui_len(v_links), 0)) %}
+  {%- set c_2 -%}
+    {%- for v_l in ui_l(v_links) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_or([ui_eq(v_side, 'all'), ui_eq(ui_lt(ui_mul(v_i, 2), v_count), ui_eq(v_side, 'left'))])) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_l, ['name'])) }}
+        {%- endset -%}
+        {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv(['text-sm']), 'current': ui_eq(ui_get(v_l, ['id']), v_current), 'testid': 'nav-link'}, 'children': c_1}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_2}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/newsletter-form.html.j2 b/packages/jinja2/ui/blocks/newsletter-form.html.j2
new file mode 100644
index 0000000..05063af
--- /dev/null
+++ b/packages/jinja2/ui/blocks/newsletter-form.html.j2
@@ -0,0 +1,42 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/newsletter-form.json
+    An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start, center).
+    Props (p): id, title, text, label, submit, consent, layout, terms, tone, align, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_submit = ui_def(p['submit'], none) -%}
+{%- set v_consent = ui_def(p['consent'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'inline') -%}
+{%- set v_terms = ui_def(p['terms'], 'hide') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_align = ui_def(p['align'], 'center') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_6 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+{%- endset -%}
+{%- set c_7 -%}
+  {%- set c_5 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_label) }}
+    {%- endset -%}
+    {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_1}) }}
+    {%- set c_3 -%}
+      {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'email', 'Name': 'email', 'Class': 'min-w-0 flex-1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}) }}
+      {%- set c_2 -%}
+        {{ ui_text(v_submit) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': ui_s(ui_cnv(['w-full', ('flex-col items-stretch' if ui_t(ui_eq(v_layout, 'stacked')) else 'flex-wrap')]))}, 'children': c_3}) }}
+    {%- if ui_t(ui_and([ui_eq(v_terms, 'show'), v_consent])) %}
+      {%- set c_4 -%}
+        {{ ui_text(v_consent) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'consent'])}, 'children': c_4}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/form/form.html.j2', {'p': {'Method': 'dialog', 'Class': ui_s(ui_cnv(['w-full max-w-md', ('mx-auto' if ui_t(ui_eq(v_align, 'center')) else '')])), 'Attrs': ui_attrs(['data-testid', 'newsletter-form'])}, 'children': c_5}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'tone': v_tone, 'align': v_align, 'layout': ('split' if ui_t(ui_eq(v_layout, 'split')) else 'stack'), 'media': {'show': ui_eq(v_layout, 'split')}, 'landmarkLabel': v_landmarkLabel, 'aside': f_6}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/notice.html.j2 b/packages/jinja2/ui/blocks/notice.html.j2
new file mode 100644
index 0000000..de8194e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/notice.html.j2
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/notice.json
+    A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text renders nothing visible.
+    Props (p): text. -#}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set c_2 -%}
+  {%- if ui_t(v_text) %}
+    {%- set c_1 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'circle-check', 'Size': 16}}) }}
+      {{ ui_text(v_text) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold text-background shadow-lg'}, 'children': c_1}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'contents', 'Attrs': ui_attrs(['role', 'status', 'data-testid', 'notice'])}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/number-field.html.j2 b/packages/jinja2/ui/blocks/number-field.html.j2
new file mode 100644
index 0000000..a9667f8
--- /dev/null
+++ b/packages/jinja2/ui/blocks/number-field.html.j2
@@ -0,0 +1,22 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/number-field.json
+    A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its ring). Static markup: the buttons carry no logic; the page wires them.
+    Props (p): value, name, min, label, decrease, increase. -#}
+{%- set v_value = ui_def(p['value'], '') -%}
+{%- set v_name = ui_def(p['name'], '') -%}
+{%- set v_min = ui_def(p['min'], '') -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_decrease = ui_def(p['decrease'], none) -%}
+{%- set v_increase = ui_def(p['increase'], none) -%}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'minus', 'Size': 16}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(v_decrease), 'Attrs': ui_attrs(['data-testid', 'decrease'])}, 'children': c_1}) }}
+  {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'number', 'Name': ui_s(v_name), 'Value': ui_s(v_value), 'Min': ui_s(v_min), 'AriaLabel': ui_s(v_label), 'Size': 'sm', 'Class': 'number-bare w-8 bg-transparent px-0 text-center inset-ring-0'}}) }}
+  {%- set c_2 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'plus', 'Size': 16}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(v_increase), 'Attrs': ui_attrs(['data-testid', 'increase'])}, 'children': c_2}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input', 'Attrs': ui_attrs(['data-slot', 'number-field'])}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/offer-media.html.j2 b/packages/jinja2/ui/blocks/offer-media.html.j2
new file mode 100644
index 0000000..8604c13
--- /dev/null
+++ b/packages/jinja2/ui/blocks/offer-media.html.j2
@@ -0,0 +1,28 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/offer-media.json
+    The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats over the picture).
+    Props (p): alt, card. -#}
+{%- set v_alt = ui_def(p['alt'], none) -%}
+{%- set v_card = ui_def(p['card'], none) -%}
+{%- set c_6 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_alt, 'ratio': '4/3'}}) }}
+  {%- set c_5 -%}
+    {%- set c_1 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_card, ['icon'])), 'Size': 20}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_1}) }}
+    {%- set c_4 -%}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_card, ['title'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+      {%- set c_3 -%}
+        {{ ui_text(ui_get(v_card, ['text'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_4}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg', 'Attrs': ui_attrs(['data-testid', 'offer-card'])}, 'children': c_5}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'relative', 'Attrs': ui_attrs(['data-testid', 'hero-media'])}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/order-rows.html.j2 b/packages/jinja2/ui/blocks/order-rows.html.j2
new file mode 100644
index 0000000..74fe68b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/order-rows.html.j2
@@ -0,0 +1,75 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/order-rows.json
+    The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill.
+    Props (p): orders, statuses, labels, density. -#}
+{%- set v_orders = ui_def(p['orders'], none) -%}
+{%- set v_statuses = ui_def(p['statuses'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set c_18 -%}
+  {%- set c_17 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['caption'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/table/table-caption.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_1}) }}
+    {%- set c_8 -%}
+      {%- set c_7 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['number'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_2}) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['date'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_3}) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['items'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_4}) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_labels, ['total'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_5}) }}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['status'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('ui/table/table-row.html.j2', {'p': {}, 'children': c_7}) }}
+    {%- endset -%}
+    {{ ui_include('ui/table/table-head.html.j2', {'p': {}, 'children': c_8}) }}
+    {%- set c_16 -%}
+      {%- for v_o in ui_l(v_orders) %}
+        {%- set c_15 -%}
+          {%- set c_9 -%}
+            {{ ui_text(ui_get(v_o, ['number'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': ui_s(ui_cnv(['font-semibold', ('py-2' if ui_t(ui_eq(v_density, 'compact')) else 'py-4')]))}, 'children': c_9}) }}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_o, ['date'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {}, 'children': c_10}) }}
+          {%- set c_11 -%}
+            {{ ui_text(ui_tpl(ui_get(v_labels, ['itemsCount']), [ui_get(v_o, ['items'])])) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {}, 'children': c_11}) }}
+          {%- set c_12 -%}
+            {{ ui_text(ui_money(ui_get(v_o, ['total']), ui_get(v_o, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {}, 'children': c_12}) }}
+          {%- set c_14 -%}
+            {%- set c_13 -%}
+              {{ ui_text(ui_at(v_statuses, ui_get(v_o, ['status']))) }}
+            {%- endset -%}
+            {{ ui_include('blocks/pill.html.j2', {'p': {'tone': ('green' if ui_t(ui_eq(ui_get(v_o, ['status']), 'paid')) else ('blue' if ui_t(ui_eq(ui_get(v_o, ['status']), 'shipped')) else ('amber' if ui_t(ui_eq(ui_get(v_o, ['status']), 'pending')) else 'gray')))}, 'children': c_13}) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {}, 'children': c_14}) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-row.html.j2', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_15}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/table/table-body.html.j2', {'p': {}, 'children': c_16}) }}
+  {%- endset -%}
+  {{ ui_include('ui/table/table.html.j2', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'order-table'])}, 'children': c_17}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'w-full overflow-x-auto'}, 'children': c_18}) }}
diff --git a/packages/jinja2/ui/blocks/order-summary.html.j2 b/packages/jinja2/ui/blocks/order-summary.html.j2
new file mode 100644
index 0000000..4889a19
--- /dev/null
+++ b/packages/jinja2/ui/blocks/order-summary.html.j2
@@ -0,0 +1,56 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/order-summary.json
+    The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout (card, plain), cta (show, hide), note (show, hide), density, tone.
+    Props (p): id, title, rows, empty, labels, layout, cta, note, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_rows = ui_def(p['rows'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'card') -%}
+{%- set v_cta = ui_def(p['cta'], 'show') -%}
+{%- set v_note = ui_def(p['note'], 'show') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_9 -%}
+  {%- if ui_t(ui_eq(ui_len(v_rows), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'receipt', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_8 -%}
+      {%- set c_7 -%}
+        {%- set c_4 -%}
+          {%- for v_row in ui_l(v_rows) %}
+            {%- set c_3 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_row, ['label'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_1}) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_money(ui_get(v_row, ['amount']), ui_get(v_row, ['currency']))) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_2}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex items-center justify-between gap-4', ('border-t border-border pt-4 text-base font-bold' if ui_t(ui_get(v_row, ['strong'])) else 'text-sm text-muted-foreground')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_3}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-4'}, 'children': c_4}) }}
+        {%- if ui_t(ui_eq(v_cta, 'show')) %}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_labels, ['checkout'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'checkout'])}, 'children': c_5}) }}
+        {%- endif %}
+        {%- if ui_t(ui_eq(v_note, 'show')) %}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_labels, ['note'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_7}) }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv([('rounded bg-card p-6 inset-ring inset-ring-border' if ui_t(ui_eq(v_layout, 'card')) else '')])), 'Attrs': ui_attrs(['data-testid', 'summary'])}, 'children': c_8}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': 'md', 'landmarkLabel': v_landmarkLabel}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/order-table.html.j2 b/packages/jinja2/ui/blocks/order-table.html.j2
new file mode 100644
index 0000000..d99f71b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/order-table.html.j2
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/order-table.json
+    The order history as a table or as cards: number, date, items, total and a status pill, with an optional pager. Axes: layout (table, cards), pager (show, hide), tone, density.
+    Props (p): id, title, orders, empty, statuses, labels, layout, pager, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_orders = ui_def(p['orders'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_statuses = ui_def(p['statuses'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'table') -%}
+{%- set v_pager = ui_def(p['pager'], 'show') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(ui_len(v_orders), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'package', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- if ui_t(ui_eq(v_layout, 'table')) %}
+        {{ ui_include('blocks/order-rows.html.j2', {'p': {'orders': v_orders, 'statuses': v_statuses, 'labels': v_labels, 'density': v_density}}) }}
+      {%- else %}
+        {%- set c_9 -%}
+          {%- for v_o in ui_l(v_orders) %}
+            {%- set c_8 -%}
+              {%- set c_7 -%}
+                {%- set c_3 -%}
+                  {%- set c_1 -%}
+                    {{ ui_text(ui_get(v_o, ['number'])) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+                  {%- set c_2 -%}
+                    {{ ui_text(ui_get(v_o, ['date'])) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+                {%- endset -%}
+                {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_3}) }}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_tpl(ui_get(v_labels, ['itemsCount']), [ui_get(v_o, ['items'])])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_4}) }}
+                {%- set c_5 -%}
+                  {{ ui_text(ui_money(ui_get(v_o, ['total']), ui_get(v_o, ['currency']))) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'bold'}, 'children': c_5}) }}
+                {%- set c_6 -%}
+                  {{ ui_text(ui_at(v_statuses, ui_get(v_o, ['status']))) }}
+                {%- endset -%}
+                {{ ui_include('blocks/pill.html.j2', {'p': {'tone': ('green' if ui_t(ui_eq(ui_get(v_o, ['status']), 'paid')) else ('blue' if ui_t(ui_eq(ui_get(v_o, ['status']), 'shipped')) else ('amber' if ui_t(ui_eq(ui_get(v_o, ['status']), 'pending')) else 'gray')))}, 'children': c_6}) }}
+              {%- endset -%}
+              {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': 'flex flex-wrap items-center justify-between gap-4'}, 'children': c_7}) }}
+            {%- endset -%}
+            {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'order-cards'])}, 'children': c_9}) }}
+      {%- endif %}
+      {%- if ui_t(ui_eq(v_pager, 'show')) %}
+        {{ ui_include('blocks/pager.html.j2', {'p': {'page': 1, 'pages': 3, 'summary': ui_tpl(ui_get(v_labels, ['summary']), [1, 4, 12]), 'previousLabel': ui_get(v_labels, ['previous']), 'nextLabel': ui_get(v_labels, ['next'])}}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_10}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/over-media.html.j2 b/packages/jinja2/ui/blocks/over-media.html.j2
new file mode 100644
index 0000000..f11f747
--- /dev/null
+++ b/packages/jinja2/ui/blocks/over-media.html.j2
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/over-media.json
+    A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing. It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the header stays the root of the block (rule 01).
+    Props (p): on, alt. -#}
+{%- set v_on = ui_def(p['on'], false) -%}
+{%- set v_alt = ui_def(p['alt'], none) -%}
+{%- if ui_t(v_on) %}
+  {%- set c_1 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_alt, 'ratio': '21/9', 'className': ui_cnv(['size-full rounded-none opacity-40'])}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'pointer-events-none absolute inset-0 -z-10', 'Attrs': ui_attrs(['data-testid', 'over'])}, 'children': c_1}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/page-aside.html.j2 b/packages/jinja2/ui/blocks/page-aside.html.j2
new file mode 100644
index 0000000..2147981
--- /dev/null
+++ b/packages/jinja2/ui/blocks/page-aside.html.j2
@@ -0,0 +1,65 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-aside.json
+    The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key facts as cards in two columns.
+    Props (p): extras, mode. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_mode = ui_def(p['mode'], 'figure') -%}
+{%- if ui_t(ui_eq(v_mode, 'figure')) %}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_extras, ['value'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '4xl', 'Weight': 'bold'}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_extras, ['caption'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': 'end', 'Class': 'text-end', 'Attrs': ui_attrs(['data-testid', 'page-figure'])}, 'children': c_3}) }}
+{%- endif %}
+{%- if ui_t(ui_eq(v_mode, 'note')) %}
+  {%- set c_8 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_extras, ['icon'])), 'Size': 20}}) }}
+    {%- set c_7 -%}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_extras, ['value'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'lg', 'Weight': 'bold'}, 'children': c_4}) }}
+      {%- set c_5 -%}
+        {{ ui_text(ui_get(v_extras, ['caption'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'medium'}, 'children': c_5}) }}
+      {%- set c_6 -%}
+        {{ ui_text(ui_get(v_extras, ['note'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_7}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'rounded bg-card inset-ring inset-ring-border max-w-xs p-4', 'Attrs': ui_attrs(['data-testid', 'page-note'])}, 'children': c_8}) }}
+{%- endif %}
+{%- if ui_t(ui_eq(v_mode, 'facts')) %}
+  {%- set c_13 -%}
+    {%- for v_s in ui_l(ui_get(v_extras, ['facts'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 4)) %}
+        {%- set c_12 -%}
+          {%- set c_9 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'lg', 'Weight': 'bold'}, 'children': c_9}) }}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'medium'}, 'children': c_10}) }}
+          {%- set c_11 -%}
+            {{ ui_text(ui_get(v_s, ['hint'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_11}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'page-fact'])}, 'children': c_12}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-4'}, 'children': c_13}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/page-crumbs.html.j2 b/packages/jinja2/ui/blocks/page-crumbs.html.j2
new file mode 100644
index 0000000..2f9a7c0
--- /dev/null
+++ b/packages/jinja2/ui/blocks/page-crumbs.html.j2
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-crumbs.json
+    The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the last entry is the current page and is not a link.
+    Props (p): label, crumbs, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_crumbs = ui_def(p['crumbs'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_last = ui_sub(ui_len(v_crumbs), 1) -%}
+{%- set c_6 -%}
+  {%- set c_5 -%}
+    {%- for v_c in ui_l(v_crumbs) %}
+      {%- set v_i = loop.index0 -%}
+      {%- set c_4 -%}
+        {%- if ui_t(ui_lt(v_i, v_last)) %}
+          {%- if ui_t(ui_get(v_c, ['href'])) %}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_c, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_get(v_c, ['href'])), 'Variant': 'muted', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'crumb'])}, 'children': c_1}) }}
+          {%- else %}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_c, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {'Attrs': ui_attrs(['data-testid', 'crumb'])}, 'children': c_2}) }}
+          {%- endif %}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-right', 'Size': 16}}) }}
+        {%- else %}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_c, ['name'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'font-medium text-foreground', 'Attrs': ui_attrs(['aria-current', 'page'])}, 'children': c_3}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_4}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground'}, 'children': c_5}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', 'crumbs'])}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/page-header.html.j2 b/packages/jinja2/ui/blocks/page-header.html.j2
new file mode 100644
index 0000000..55150e3
--- /dev/null
+++ b/packages/jinja2/ui/blocks/page-header.html.j2
@@ -0,0 +1,29 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/page-header.json
+    The page heading: a title, a one-line summary and the action buttons on the right (below on phones).
+    Props (p): title, summary, id, actions (slot). -#}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_summary = ui_def(p['summary'], none) -%}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set c_5 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(1), 'Size': 'xl', 'Weight': 'bold', 'Class': 'm-0', 'Attrs': ui_attrs(['id', v_id])}, 'children': c_1}) }}
+    {%- if ui_t(v_summary) %}
+      {%- set c_2 -%}
+        {{ ui_text(v_summary) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_2}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-w-0 flex-col gap-2'}, 'children': c_3}) }}
+  {%- if ui_t((ui_def(p['actions'], none) is not none)) %}
+    {%- set c_4 -%}
+      {{ ui_def(p['actions'], '')|safe }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex flex-wrap items-center gap-2'}, 'children': c_4}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between'}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/page-intro.html.j2 b/packages/jinja2/ui/blocks/page-intro.html.j2
new file mode 100644
index 0000000..a07d25a
--- /dev/null
+++ b/packages/jinja2/ui/blocks/page-intro.html.j2
@@ -0,0 +1,20 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-intro.json
+    The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action. Axes: align (start, center), tone, density.
+    Props (p): id, title, text, cta, href, level, align, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_cta = ui_def(p['cta'], none) -%}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_align = ui_def(p['align'], 'start') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_1 -%}
+  {%- if ui_t(v_cta) %}
+    {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': v_cta, 'primaryHref': v_href, 'align': v_align}}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'heading': {'level': v_level}, 'align': v_align, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/page-trail.html.j2 b/packages/jinja2/ui/blocks/page-trail.html.j2
new file mode 100644
index 0000000..40fb1ca
--- /dev/null
+++ b/packages/jinja2/ui/blocks/page-trail.html.j2
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-trail.json
+    The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts in two columns), tone.
+    Props (p): id, title, lead, badge, label, crumbs, extras, aside, level, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_crumbs = ui_def(p['crumbs'], none) -%}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_aside = ui_def(p['aside'], 'none') -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_titleId = ui_add(v_id, '-title') -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {%- if ui_t(ui_gt(ui_len(v_crumbs), 0)) %}
+      {{ ui_include('blocks/page-crumbs.html.j2', {'p': {'label': v_label, 'crumbs': v_crumbs, 'landmarkLabel': v_landmarkLabel}}) }}
+    {%- endif %}
+    {%- set c_2 -%}
+      {%- set c_1 -%}
+        {{ ui_include('blocks/section-header.html.j2', {'p': {'titleId': v_titleId, 'title': v_title, 'heading': {'level': v_level, 'badge': v_badge}, 'lead': v_lead}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'min-w-0'}, 'children': c_1}) }}
+      {%- if ui_t(not (ui_eq(v_aside, 'none'))) %}
+        {{ ui_include('blocks/page-aside.html.j2', {'p': {'extras': v_extras, 'mode': v_aside}}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-1 items-center gap-8 lg:grid-cols-2' if ui_t(ui_eq(v_aside, 'facts')) else 'flex flex-col gap-6 md:flex-row md:items-end md:justify-between'))}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-col gap-6'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_3}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv(['py-8', ('bg-muted' if ui_t(ui_eq(v_tone, 'muted')) else '')])), 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else v_titleId), 'data-testid', 'section', 'data-tone', v_tone, 'data-aside', v_aside, 'aria-label', v_landmarkLabel])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/pager.html.j2 b/packages/jinja2/ui/blocks/pager.html.j2
new file mode 100644
index 0000000..99d33b8
--- /dev/null
+++ b/packages/jinja2/ui/blocks/pager.html.j2
@@ -0,0 +1,68 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/pager.json
+    The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4 5 6 … 21), with `moreLabel` a "Load more" button. The current page is a plain element marked aria-current="page"; the others are buttons. All text comes in through props.
+    Props (p): page, pages, summary, previousLabel, nextLabel, numbered, pageLabel, moreLabel. -#}
+{%- set v_page = ui_def(p['page'], none) -%}
+{%- set v_pages = ui_def(p['pages'], none) -%}
+{%- set v_summary = ui_def(p['summary'], none) -%}
+{%- set v_previousLabel = ui_def(p['previousLabel'], none) -%}
+{%- set v_nextLabel = ui_def(p['nextLabel'], none) -%}
+{%- set v_numbered = ui_def(p['numbered'], false) -%}
+{%- set v_pageLabel = ui_def(p['pageLabel'], none) -%}
+{%- set v_moreLabel = ui_def(p['moreLabel'], none) -%}
+{%- set v_numbers = ui_page_window(v_page, v_pages) -%}
+{%- set c_11 -%}
+  {%- set c_2 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_summary) }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex flex-wrap items-center gap-4'}, 'children': c_2}) }}
+  {%- set c_10 -%}
+    {%- if ui_t(ui_and([v_moreLabel, ui_lt(v_page, v_pages)])) %}
+      {%- set c_3 -%}
+        {{ ui_text(v_moreLabel) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'pager-more'])}, 'children': c_3}) }}
+    {%- endif %}
+    {%- set c_4 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-left', 'Size': 16}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(v_previousLabel), 'Disabled': ui_t(ui_le(v_page, 1))}, 'children': c_4}) }}
+    {%- if ui_t(v_numbered) %}
+      {%- for v_n in ui_l(v_numbers) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_eq(v_n, none)) %}
+          {%- set c_5 -%}
+            {{ ui_text('…') }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'w-8 text-center'}, 'children': c_5}) }}
+        {%- elif ui_t(ui_eq(v_n, v_page)) %}
+          {%- set c_6 -%}
+            {{ ui_text(v_n) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background', 'Attrs': ui_attrs(['aria-current', 'page', 'data-testid', 'pager-current'])}, 'children': c_6}) }}
+        {%- else %}
+          {%- set c_7 -%}
+            {{ ui_text(v_n) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(ui_tpl(v_pageLabel, [v_n]))}, 'children': c_7}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- else %}
+      {%- set c_8 -%}
+        {{ ui_text(v_page) }}
+        {{ ui_text(' / ') }}
+        {{ ui_text(v_pages) }}
+      {%- endset -%}
+      {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'min-w-12 text-center font-bold text-foreground'}, 'children': c_8}) }}
+    {%- endif %}
+    {%- set c_9 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-right', 'Size': 16}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(v_nextLabel), 'Disabled': ui_t(ui_ge(v_page, v_pages))}, 'children': c_9}) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex flex-wrap items-center gap-2'}, 'children': c_10}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'pager'])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/panel.html.j2 b/packages/jinja2/ui/blocks/panel.html.j2
new file mode 100644
index 0000000..25e0667
--- /dev/null
+++ b/packages/jinja2/ui/blocks/panel.html.j2
@@ -0,0 +1,32 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/panel.json
+    A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the Block of its block (rule 01).
+    Props (p): title, description, id, className, actions (slot); children: markup. -#}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_description = ui_def(p['description'], none) -%}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set c_5 -%}
+  {%- if ui_t(ui_or([v_title, (ui_def(p['actions'], none) is not none)])) %}
+    {%- set c_4 -%}
+      {%- set c_3 -%}
+        {%- if ui_t(v_title) %}
+          {%- set c_1 -%}
+            {{ ui_text(v_title) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': 'base', 'Class': 'm-0 text-foreground', 'Attrs': ui_attrs(['id', (ui_tpl('{0}-t', [v_id]) if ui_t(v_id) else none)])}, 'children': c_1}) }}
+        {%- endif %}
+        {%- if ui_t(v_description) %}
+          {%- set c_2 -%}
+            {{ ui_text(v_description) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_2}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-w-0 flex-col gap-2'}, 'children': c_3}) }}
+      {{ ui_def(p['actions'], '')|safe }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex items-start justify-between gap-4'}, 'children': c_4}) }}
+  {%- endif %}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'group', 'aria-labelledby', (ui_tpl('{0}-t', [v_id]) if ui_t(ui_and([v_title, v_id])) else none)])}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/payment-options.html.j2 b/packages/jinja2/ui/blocks/payment-options.html.j2
new file mode 100644
index 0000000..f403ca7
--- /dev/null
+++ b/packages/jinja2/ui/blocks/payment-options.html.j2
@@ -0,0 +1,28 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/payment-options.json
+    Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup.
+    Props (p): payments, name, checked. -#}
+{%- set v_payments = ui_def(p['payments'], none) -%}
+{%- set v_name = ui_def(p['name'], none) -%}
+{%- set v_checked = ui_def(p['checked'], '') -%}
+{%- set c_5 -%}
+  {%- for v_p in ui_l(v_payments) %}
+    {%- set c_4 -%}
+      {{ ui_include('ui/radio/radio.html.j2', {'p': {'Name': ui_s(v_name), 'Value': ui_s(ui_get(v_p, ['id'])), 'Checked': ui_t(ui_eq(ui_get(v_p, ['id']), v_checked))}}) }}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 20, 'Class': 'shrink-0'}}) }}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_p, ['title'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-sm font-semibold'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_p, ['text'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-xs text-muted-foreground'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex flex-col items-start justify-start gap-0'}, 'children': c_3}) }}
+    {%- endset -%}
+    {{ ui_include('ui/label/label.html.j2', {'p': {'Class': 'flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground', 'Attrs': ui_attrs(['data-testid', 'payment'])}, 'children': c_4}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-2', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'payments'])}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/photo-gallery.html.j2 b/packages/jinja2/ui/blocks/photo-gallery.html.j2
new file mode 100644
index 0000000..640552c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/photo-gallery.html.j2
@@ -0,0 +1,88 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/photo-gallery.json
+    Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes: layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.
+    Props (p): id, title, lead, photos, empty, labels, layout, captions, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_photos = ui_def(p['photos'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_captions = ui_def(p['captions'], 'show') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_16 -%}
+  {%- if ui_t(ui_eq(ui_len(v_photos), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'image', 'title': v_empty}}) }}
+  {%- elif ui_t(ui_eq(v_layout, 'featured')) %}
+    {%- set c_9 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title}}) }}
+      {%- set c_7 -%}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_first_of(v_photos, 'title')) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_1}) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_tpl(ui_get(v_labels, ['counter']), [1, ui_len(v_photos)])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_3}) }}
+        {%- set c_6 -%}
+          {%- set c_4 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-left', 'Size': 16}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['previous']))}, 'children': c_4}) }}
+          {%- set c_5 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-right', 'Size': 16}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['next']))}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2'}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_7}) }}
+      {%- set c_8 -%}
+        {%- for v_p in ui_l(v_photos) %}
+          {%- set v_i = loop.index0 -%}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': '1/1', 'className': ui_cnv([('ring-2 ring-foreground' if ui_t(ui_eq(v_i, 0)) else '')])}}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-3 gap-2 sm:grid-cols-9', 'Attrs': ui_attrs(['data-testid', 'thumbs'])}, 'children': c_8}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'featured'])}, 'children': c_9}) }}
+  {%- else %}
+    {%- set c_15 -%}
+      {%- for v_p in ui_l(v_photos) %}
+        {%- set v_i = loop.index0 -%}
+        {%- set c_14 -%}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': (('3/4' if ui_t(ui_eq(ui_get(v_p, ['size']), 'tall')) else ('16/9' if ui_t(ui_eq(ui_get(v_p, ['size']), 'wide')) else ('4/3' if ui_t(ui_eq(ui_get(v_p, ['size']), 'large')) else '1/1'))) if ui_t(ui_eq(v_layout, 'masonry')) else ('4/3' if ui_t(ui_eq(v_layout, 'grid')) else '1/1')), 'className': ui_cnv([('h-full' if ui_t(ui_eq(v_layout, 'mosaic')) else '')])}}) }}
+          {%- if ui_t(ui_and([ui_eq(v_captions, 'show'), ui_eq(v_layout, 'cards')])) %}
+            {%- set c_12 -%}
+              {%- set c_10 -%}
+                {{ ui_text(ui_get(v_p, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_10}) }}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_p, ['tag'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_11}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_12}) }}
+          {%- endif %}
+          {%- if ui_t(ui_and([ui_eq(v_captions, 'show'), ui_or([ui_eq(v_layout, 'grid'), ui_eq(v_layout, 'masonry')])])) %}
+            {%- set c_13 -%}
+              {{ ui_text(ui_get(v_p, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'text-sm text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'caption'])}, 'children': c_13}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('blocks/figure-block.html.j2', {'p': {'className': ui_cnv([ui_cnv(['flex flex-col gap-2', ('mb-4 break-inside-avoid' if ui_t(ui_eq(v_layout, 'masonry')) else ''), ('col-span-2 row-span-2' if ui_t(ui_and([ui_eq(v_layout, 'mosaic'), ui_eq(v_i, 0)])) else ''), ('rounded bg-card inset-ring inset-ring-border p-4' if ui_t(ui_eq(v_layout, 'cards')) else '')])]), 'testid': 'item'}, 'children': c_14}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('columns-1 gap-4 sm:columns-2 lg:columns-3' if ui_t(ui_eq(v_layout, 'masonry')) else ('grid grid-cols-2 gap-4 md:grid-cols-4' if ui_t(ui_eq(v_layout, 'mosaic')) else 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'))), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_15}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_16}) }}
diff --git a/packages/jinja2/ui/blocks/pill.html.j2 b/packages/jinja2/ui/blocks/pill.html.j2
new file mode 100644
index 0000000..18df25c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/pill.html.j2
@@ -0,0 +1,17 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/pill.json
+    A status pill: a tinted label with an icon (published, draft, role, comment state).
+    Props (p): tone, icon, className; children: markup. -#}
+{%- set k_PILL = {'gray': 'bg-muted text-muted-foreground inset-ring-border', 'blue': 'bg-blue-50 text-blue-700 inset-ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:inset-ring-blue-900', 'amber': 'bg-amber-50 text-amber-700 inset-ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:inset-ring-amber-900', 'green': 'bg-green-50 text-green-700 inset-ring-green-200 dark:bg-green-950 dark:text-green-300 dark:inset-ring-green-900', 'red': 'bg-red-50 text-red-700 inset-ring-red-200 dark:bg-red-950 dark:text-red-300 dark:inset-ring-red-900', 'violet': 'bg-violet-50 text-violet-700 inset-ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:inset-ring-violet-900', 'pink': 'bg-pink-50 text-pink-700 inset-ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:inset-ring-pink-900', 'orange': 'bg-orange-50 text-orange-700 inset-ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:inset-ring-orange-900', 'cyan': 'bg-cyan-50 text-cyan-700 inset-ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:inset-ring-cyan-900'} -%}
+{%- set v_tone = ui_def(p['tone'], 'gray') -%}
+{%- set v_icon = ui_def(p['icon'], none) -%}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {%- if ui_t(v_icon) %}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(v_icon), 'Size': 12}}) }}
+    {%- endif %}
+    {{ ui_def(children, '')|safe }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(ui_cnv(['inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring', ui_at(k_PILL, v_tone), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'pill'])}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'contents'}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/post-actions.html.j2 b/packages/jinja2/ui/blocks/post-actions.html.j2
new file mode 100644
index 0000000..5b01484
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-actions.html.j2
@@ -0,0 +1,40 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-actions.json
+    The calls to action of a post header: share and save side by side, one wide read button, or a wide read button with share and save as icons.
+    Props (p): labels, mode. -#}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_mode = ui_def(p['mode'], 'pair') -%}
+{%- if ui_t(ui_eq(v_mode, 'pair')) %}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'share-2', 'Size': 16}}) }}
+      {{ ui_text(ui_get(v_labels, ['share'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'bookmark', 'Size': 16}}) }}
+      {{ ui_text(ui_get(v_labels, ['save'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'post-save'])}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_3}) }}
+{%- else %}
+  {%- set c_7 -%}
+    {%- set c_4 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'book-open', 'Size': 16}}) }}
+      {{ ui_text(ui_get(v_labels, ['read'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'gap-2 flex-1', 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_4}) }}
+    {%- if ui_t(ui_eq(v_mode, 'icons')) %}
+      {%- set c_5 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'share-2', 'Size': 16}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['share'])), 'Attrs': ui_attrs(['data-testid', 'post-share'])}, 'children': c_5}) }}
+      {%- set c_6 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'bookmark', 'Size': 16}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['save'])), 'Attrs': ui_attrs(['data-testid', 'post-save'])}, 'children': c_6}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2'}, 'children': c_7}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/post-author.html.j2 b/packages/jinja2/ui/blocks/post-author.html.j2
new file mode 100644
index 0000000..db573e0
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-author.html.j2
@@ -0,0 +1,60 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-author.json
+    The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line, a card, or a card with the bio.
+    Props (p): post, extras, labels, mode, share, className. -#}
+{%- set v_post = ui_def(p['post'], none) -%}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_mode = ui_def(p['mode'], 'line') -%}
+{%- set v_share = ui_def(p['share'], false) -%}
+{%- set c_12 -%}
+  {%- set c_10 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_post, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}) }}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_post, ['author'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_extras, ['role'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': 'start', 'Class': 'min-w-0 flex-1 text-start'}, 'children': c_3}) }}
+    {%- if ui_t(v_share) %}
+      {%- set c_6 -%}
+        {%- set c_4 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'share-2', 'Size': 16}}) }}
+          {{ ui_text(ui_get(v_labels, ['share'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'default', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'post-share'])}, 'children': c_4}) }}
+        {%- set c_5 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'bookmark', 'Size': 16}}) }}
+          {{ ui_text(ui_get(v_labels, ['save'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'default', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'post-save'])}, 'children': c_5}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2'}, 'children': c_6}) }}
+    {%- else %}
+      {%- set c_9 -%}
+        {%- set c_8 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'calendar', 'Size': 16}}) }}
+          {%- set c_7 -%}
+            {{ ui_text(ui_get(v_post, ['date'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_7}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_8}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'text-muted-foreground'}, 'children': c_9}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_10}) }}
+  {%- if ui_t(ui_eq(v_mode, 'bio')) %}
+    {%- set c_11 -%}
+      {{ ui_text(ui_get(v_extras, ['bio'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_11}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv([('' if ui_t(ui_eq(v_mode, 'line')) else 'rounded bg-card inset-ring inset-ring-border p-4'), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-testid', 'post-author'])}, 'children': c_12}) }}
diff --git a/packages/jinja2/ui/blocks/post-card.html.j2 b/packages/jinja2/ui/blocks/post-card.html.j2
new file mode 100644
index 0000000..a89420f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-card.html.j2
@@ -0,0 +1,97 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-card.json
+    A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only), density.
+    Props (p): post, labels, layout, media, meta, density. -#}
+{%- set v_post = ui_def(p['post'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'vertical') -%}
+{%- set v_media = ui_def(p['media'], 'image') -%}
+{%- set v_meta = ui_def(p['meta'], 'full') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- if ui_t(ui_eq(v_meta, 'news')) %}
+  {%- set c_6 -%}
+    {%- set c_2 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_post, ['title']), 'src': ui_get(v_post, ['image']), 'className': ui_cnv([ui_cnv(['size-full', ui_preset('blocks/presets/defaults.json', ['media', 'rounded'])])])}}) }}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_post, ['title'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xs', 'Weight': 'semibold', 'Class': ui_s(ui_cnv(['pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground', ui_preset('blocks/presets/defaults.json', ['news', 'title'])])), 'Attrs': ui_attrs(['data-testid', 'news-title'])}, 'children': c_1}) }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['relative shrink-0 overflow-hidden', ui_preset('blocks/presets/defaults.json', ['news', 'cover'])])), 'Attrs': ui_attrs(['data-testid', 'news-cover'])}, 'children': c_2}) }}
+    {%- set c_5 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'calendar', 'Size': 16}}) }}
+      {%- set c_3 -%}
+        {{ ui_text(ui_get(v_post, ['date'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-4'}, 'children': c_3}) }}
+      {%- if ui_t(ui_get(v_post, ['category'])) %}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_post, ['category'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-4'}, 'children': c_4}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-full px-2 text-muted-foreground', ui_preset('blocks/presets/defaults.json', ['news', 'strip'])])), 'Attrs': ui_attrs(['data-testid', 'news-date'])}, 'children': c_5}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv(['flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border', ui_preset('blocks/presets/defaults.json', ['news', 'card'])])), 'Attrs': ui_attrs(['data-testid', 'item', 'data-layout', v_layout, 'data-meta', 'news'])}, 'children': c_6}) }}
+{%- else %}
+  {%- set c_18 -%}
+    {%- if ui_t(ui_eq(v_media, 'image')) %}
+      {%- set c_7 -%}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_post, ['title']), 'src': ui_get(v_post, ['image']), 'className': ui_cnv(['h-full'])}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['relative shrink-0', ('sm:w-64' if ui_t(ui_eq(v_layout, 'horizontal')) else '')]))}, 'children': c_7}) }}
+    {%- endif %}
+    {%- set c_17 -%}
+      {%- if ui_t(not (ui_eq(v_meta, 'news'))) %}
+        {%- set c_9 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_post, ['icon'])), 'Size': 16}}) }}
+          {%- set c_8 -%}
+            {{ ui_text(ui_get(v_post, ['category'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'uppercase tracking-wide text-muted-foreground'}, 'children': c_8}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_9}) }}
+      {%- endif %}
+      {%- set c_10 -%}
+        {{ ui_text(ui_get(v_post, ['title'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_10}) }}
+      {%- if ui_t(ui_and([ui_eq(v_density, 'default'), not (ui_eq(v_meta, 'news'))])) %}
+        {%- set c_11 -%}
+          {{ ui_text(ui_get(v_post, ['excerpt'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_11}) }}
+      {%- endif %}
+      {%- if ui_t(not (ui_eq(v_meta, 'news'))) %}
+        {%- set c_15 -%}
+          {%- if ui_t(ui_eq(v_meta, 'full')) %}
+            {%- set c_12 -%}
+              {{ ui_text(ui_tpl(ui_get(v_labels, ['by']), [ui_get(v_post, ['author'])])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs'}, 'children': c_12}) }}
+          {%- endif %}
+          {%- set c_13 -%}
+            {{ ui_text(ui_get(v_post, ['date'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs'}, 'children': c_13}) }}
+          {%- if ui_t(ui_eq(v_meta, 'full')) %}
+            {%- set c_14 -%}
+              {{ ui_text(ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_post, ['minutes'])])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs'}, 'children': c_14}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Class': 'mt-auto flex-wrap pt-2 text-muted-foreground'}, 'children': c_15}) }}
+      {%- endif %}
+      {%- if ui_t(ui_and([not (ui_eq(v_meta, 'news')), ui_get(v_post, ['href'])])) %}
+        {%- set c_16 -%}
+          {{ ui_text(ui_get(v_labels, ['read'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_get(v_post, ['href'])), 'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'read'])}, 'children': c_16}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': 'flex flex-1 flex-col gap-2'}, 'children': c_17}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv(['flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded', 'h-full gap-4 overflow-hidden', ('flex flex-col sm:flex-row' if ui_t(ui_eq(v_layout, 'horizontal')) else 'flex flex-col')])), 'Attrs': ui_attrs(['data-slot', 'card', 'data-testid', 'item', 'data-layout', v_layout, 'data-meta', v_meta])}, 'children': c_18}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/post-feature.html.j2 b/packages/jinja2/ui/blocks/post-feature.html.j2
new file mode 100644
index 0000000..5c4b652
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-feature.html.j2
@@ -0,0 +1,41 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-feature.json
+    The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading time, and a wide read button.
+    Props (p): p, labels. -#}
+{%- set v_p = ui_def(p['p'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_9 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_p, ['category'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm', 'Class': 'w-fit'}, 'children': c_1}) }}
+  {%- set c_2 -%}
+    {{ ui_text(ui_get(v_p, ['title'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'semibold'}, 'children': c_2}) }}
+  {%- set c_3 -%}
+    {{ ui_text(ui_get(v_p, ['excerpt'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+  {%- set c_7 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_p, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}) }}
+    {%- set c_6 -%}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_p, ['author'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}) }}
+      {%- set c_5 -%}
+        {{ ui_text(ui_tpl('{0} · {1}', [ui_get(v_p, ['date']), ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_p, ['minutes'])])])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_6}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_7}) }}
+  {%- set c_8 -%}
+    {{ ui_text(ui_get(v_labels, ['read'])) }}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Href': ui_s(ui_get(v_p, ['href'])), 'Class': 'w-full gap-2', 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_8}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'border-t border-border pt-6', 'Attrs': ui_attrs(['data-testid', 'post-feature'])}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/post-grid.html.j2 b/packages/jinja2/ui/blocks/post-grid.html.j2
new file mode 100644
index 0000000..28c0c1e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-grid.html.j2
@@ -0,0 +1,60 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-grid.json
+    A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news), filter mode (none, topics), tone, density.
+    Props (p): id, title, posts, labels, action, filter, layout, cols, media, meta, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_posts = ui_def(p['posts'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_action = ui_def(p['action'], none) -%}
+{%- set v_filter = ui_def(p['filter'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_cols = ui_def(p['cols'], '1-3') -%}
+{%- set v_media = ui_def(p['media'], 'image') -%}
+{%- set v_meta = ui_def(p['meta'], 'full') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_6 -%}
+  {%- if ui_t(ui_eq(ui_get(v_filter, ['mode']), 'topics')) %}
+    {%- set c_2 -%}
+      {%- for v_tab in ui_l(ui_get(v_filter, ['topics'])) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_tab, ['title'])) }}
+        {%- endset -%}
+        {{ ui_include('blocks/switcher-item.html.j2', {'p': {'active': ui_eq(ui_get(v_tab, ['value']), ui_get(v_filter, ['topic']))}, 'children': c_1}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('blocks/switcher.html.j2', {'p': {'label': ui_get(v_filter, ['label'])}, 'children': c_2}) }}
+  {%- endif %}
+  {%- if ui_t(ui_gt(ui_len(ui_where(v_posts, 'category', ui_get(v_filter, ['topic']))), 0)) %}
+    {%- if ui_t(ui_eq(v_layout, 'magazine')) %}
+      {%- set c_4 -%}
+        {%- for v_p in ui_l(ui_where(v_posts, 'category', ui_get(v_filter, ['topic']))) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_eq(v_i, 0)) %}
+            {{ ui_include('blocks/post-card.html.j2', {'p': {'post': v_p, 'labels': v_labels, 'layout': 'horizontal', 'media': v_media, 'meta': v_meta, 'density': v_density}}) }}
+          {%- endif %}
+        {%- endfor %}
+        {%- set c_3 -%}
+          {%- for v_p in ui_l(ui_where(v_posts, 'category', ui_get(v_filter, ['topic']))) %}
+            {%- set v_i = loop.index0 -%}
+            {%- if ui_t(ui_gt(v_i, 0)) %}
+              {{ ui_include('blocks/post-card.html.j2', {'p': {'post': v_p, 'labels': v_labels, 'media': v_media, 'meta': v_meta, 'density': v_density}}) }}
+            {%- endif %}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(v_cols), 'Class': 'gap-6'}, 'children': c_3}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_4}) }}
+    {%- else %}
+      {%- set c_5 -%}
+        {%- for v_p in ui_l(ui_where(v_posts, 'category', ui_get(v_filter, ['topic']))) %}
+          {{ ui_include('blocks/post-card.html.j2', {'p': {'post': v_p, 'labels': v_labels, 'layout': ('horizontal' if ui_t(ui_eq(v_layout, 'list')) else 'vertical'), 'media': v_media, 'meta': v_meta, 'density': v_density}}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1' if ui_t(ui_eq(v_layout, 'list')) else ui_fit_cols(v_cols, ui_len(ui_where(v_posts, 'category', ui_get(v_filter, ['topic'])))))), 'Class': 'w-full gap-6', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_5}) }}
+    {%- endif %}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'action': v_action, 'tone': v_tone, 'density': ('compact' if ui_t(ui_eq(v_density, 'compact')) else 'default'), 'measure': ('fill' if ui_t(ui_eq(v_meta, 'news')) else 'default'), 'className': ui_cnv([('py-0' if ui_t(ui_eq(v_meta, 'news')) else '')]), 'landmarkLabel': v_landmarkLabel}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/post-header.html.j2 b/packages/jinja2/ui/blocks/post-header.html.j2
new file mode 100644
index 0000000..0cabc40
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-header.html.j2
@@ -0,0 +1,48 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-header.json
+    The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout (start, center), cover (show, hide), meta (full, short), tone.
+    Props (p): id, post, labels, level, layout, cover, meta, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_post = ui_def(p['post'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_layout = ui_def(p['layout'], 'start') -%}
+{%- set v_cover = ui_def(p['cover'], 'show') -%}
+{%- set v_meta = ui_def(p['meta'], 'full') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(v_post) %}
+  {%- set f_6 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_post, ['title']), 'src': ui_get(v_post, ['image']), 'ratio': '21/9'}}) }}
+  {%- endset -%}
+  {%- set c_7 -%}
+    {%- set c_5 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_post, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}) }}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_post, ['author'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_post, ['date'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+      {%- if ui_t(ui_eq(v_meta, 'full')) %}
+        {%- set c_3 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_post, ['minutes'])])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+      {%- endif %}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_post, ['category'])) }}
+      {%- endset -%}
+      {{ ui_include('blocks/pill.html.j2', {'p': {'tone': 'blue'}, 'children': c_4}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': ui_s(('center' if ui_t(ui_eq(v_layout, 'center')) else 'start')), 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-testid', 'post-meta'])}, 'children': c_5}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': ui_get(v_post, ['title']), 'lead': ui_get(v_post, ['excerpt']), 'heading': {'level': v_level}, 'align': v_layout, 'tone': v_tone, 'media': {'show': ui_eq(v_cover, 'show')}, 'landmarkLabel': v_landmarkLabel, 'aside': f_6}, 'children': c_7}) }}
+{%- else %}
+  {%- set c_8 -%}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'file-text', 'title': ui_get(v_labels, ['empty'])}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'heading': {'level': v_level}, 'align': v_layout, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_8}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/post-mini-card.html.j2 b/packages/jinja2/ui/blocks/post-mini-card.html.j2
new file mode 100644
index 0000000..ffd7a25
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-mini-card.html.j2
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-mini-card.json
+    A small post card of PostShowcase: the picture, the category, the title and the author with the reading time.
+    Props (p): p, labels. -#}
+{%- set v_p = ui_def(p['p'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_5 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_p, ['title'])}}) }}
+  {%- set c_4 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_p, ['category'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_p, ['title'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+    {%- set c_3 -%}
+      {{ ui_text(ui_tpl('{0} · {1}', [ui_get(v_p, ['author']), ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_p, ['minutes'])])])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'p-2'}, 'children': c_4}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-2', 'Attrs': ui_attrs(['data-testid', 'post-mini'])}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/post-outline.html.j2 b/packages/jinja2/ui/blocks/post-outline.html.j2
new file mode 100644
index 0000000..238129f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-outline.html.j2
@@ -0,0 +1,59 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-outline.json
+    The facts of a post in a column (author, date, minutes, views), then the related reading as links.
+    Props (p): post, extras, labels. -#}
+{%- set v_post = ui_def(p['post'], none) -%}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_13 -%}
+  {%- set c_9 -%}
+    {%- set c_2 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'user', 'Size': 16}}) }}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_post, ['author'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_1}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_2}) }}
+    {%- set c_4 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'calendar', 'Size': 16}}) }}
+      {%- set c_3 -%}
+        {{ ui_text(ui_get(v_post, ['date'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_3}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_4}) }}
+    {%- set c_6 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'clock', 'Size': 16}}) }}
+      {%- set c_5 -%}
+        {{ ui_text(ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_post, ['minutes'])])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_5}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_6}) }}
+    {%- set c_8 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'eye', 'Size': 16}}) }}
+      {%- set c_7 -%}
+        {{ ui_text(ui_tpl(ui_get(v_labels, ['views']), [ui_get(v_extras, ['views'])])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_7}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_8}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'text-muted-foreground'}, 'children': c_9}) }}
+  {%- set c_12 -%}
+    {%- set c_10 -%}
+      {{ ui_text(ui_get(v_labels, ['related'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'medium', 'Class': 'uppercase tracking-wide text-muted-foreground'}, 'children': c_10}) }}
+    {%- for v_l in ui_l(ui_get(v_extras, ['outline'])) %}
+      {%- set c_11 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-right', 'Size': 16}}) }}
+        {{ ui_text(ui_get(v_l, ['name'])) }}
+      {%- endset -%}
+      {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv(['text-sm font-medium']), 'size': 'sm', 'testid': 'post-link'}, 'children': c_11}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'border-t border-border pt-4'}, 'children': c_12}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'post-outline'])}, 'children': c_13}) }}
diff --git a/packages/jinja2/ui/blocks/post-overlay-card.html.j2 b/packages/jinja2/ui/blocks/post-overlay-card.html.j2
new file mode 100644
index 0000000..a72c524
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-overlay-card.html.j2
@@ -0,0 +1,38 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-overlay-card.json
+    A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and date, the title, the excerpt and a read link.
+    Props (p): p, labels, ratio. -#}
+{%- set v_p = ui_def(p['p'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_ratio = ui_def(p['ratio'], '4/3') -%}
+{%- set c_8 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': v_ratio, 'className': ui_cnv([('min-h-80' if ui_t(ui_eq(v_ratio, '4/3')) else 'min-h-64')])}}) }}
+  {%- set c_7 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_p, ['category'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_1}) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_p, ['date'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}) }}
+    {%- set c_4 -%}
+      {{ ui_text(ui_get(v_p, ['title'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'semibold'}, 'children': c_4}) }}
+    {%- set c_5 -%}
+      {{ ui_text(ui_get(v_p, ['excerpt'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': ui_s(ui_cnv(['text-muted-foreground', 'line-clamp-2']))}, 'children': c_5}) }}
+    {%- set c_6 -%}
+      {{ ui_text(ui_get(v_labels, ['read'])) }}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_p, ['href']), 'className': ui_cnv(['gap-2 text-sm font-medium']), 'size': 'sm', 'testid': 'read'}, 'children': c_6}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'absolute bottom-4 left-4 right-4 rounded bg-background p-4'}, 'children': c_7}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'relative overflow-hidden rounded', 'Attrs': ui_attrs(['data-testid', 'post-overlay'])}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/post-showcase.html.j2 b/packages/jinja2/ui/blocks/post-showcase.html.j2
new file mode 100644
index 0000000..c2d51c2
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-showcase.html.j2
@@ -0,0 +1,69 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-showcase.json
+    Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured: the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3: overlay columns), mediaSide, tone.
+    Props (p): id, title, lead, badge, posts, labels, action, layout, cols, mediaSide, tone, empty, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_posts = ui_def(p['posts'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_action = ui_def(p['action'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'intro') -%}
+{%- set v_cols = ui_def(p['cols'], '3') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'start') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_eq(ui_len(v_posts), 0)) %}
+  {%- set c_1 -%}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'newspaper', 'title': v_empty}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}) }}
+{%- elif ui_t(ui_eq(v_layout, 'intro')) %}
+  {%- set f_3 -%}
+    {%- set c_4 -%}
+      {%- for v_p in ui_l(v_posts) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 4)) %}
+          {{ ui_include('blocks/post-mini-card.html.j2', {'p': {'p': v_p, 'labels': v_labels}}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2'}, 'children': c_4}) }}
+  {%- endset -%}
+  {%- set c_5 -%}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_action, ['label'])) }}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_get(v_action, ['href'])), 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'section-action'])}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_3}, 'children': c_5}) }}
+{%- elif ui_t(ui_eq(v_layout, 'featured')) %}
+  {%- set f_6 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+  {%- endset -%}
+  {%- set c_7 -%}
+    {%- for v_p in ui_l(v_posts) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 1)) %}
+        {{ ui_include('blocks/post-feature.html.j2', {'p': {'p': v_p, 'labels': v_labels}}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_6}, 'children': c_7}) }}
+{%- else %}
+  {%- set c_9 -%}
+    {%- set c_8 -%}
+      {%- for v_p in ui_l(v_posts) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, (2 if ui_t(ui_eq(v_cols, '2')) else 3))) %}
+          {{ ui_include('blocks/post-overlay-card.html.j2', {'p': {'p': v_p, 'labels': v_labels, 'ratio': ('16/9' if ui_t(ui_eq(v_cols, '2')) else '4/3')}}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-1 gap-6 md:grid-cols-2' if ui_t(ui_eq(v_cols, '2')) else 'grid grid-cols-1 gap-6 md:grid-cols-3'))}, 'children': c_8}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_9}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/post-split.html.j2 b/packages/jinja2/ui/blocks/post-split.html.j2
new file mode 100644
index 0000000..4773370
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-split.html.j2
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-split.json
+    A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags, figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair, wide, icons), tone.
+    Props (p): id, post, labels, extras, level, layout, mediaSide, author, cover, actions, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_post = ui_def(p['post'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_layout = ui_def(p['layout'], 'split') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_author = ui_def(p['author'], 'line') -%}
+{%- set v_cover = ui_def(p['cover'], 'wide') -%}
+{%- set v_actions = ui_def(p['actions'], 'pair') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_eq(v_layout, 'center')) %}
+  {%- set f_1 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_post, ['title']), 'ratio': ('21/9' if ui_t(ui_eq(v_layout, 'center')) else ('1/1' if ui_t(ui_eq(v_cover, 'square')) else '4/3'))}}) }}
+  {%- endset -%}
+  {%- set c_2 -%}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['tags'])), 0)) %}
+      {{ ui_include('blocks/post-tags.html.j2', {'p': {'tags': ui_get(v_extras, ['tags']), 'align': 'center'}}) }}
+    {%- endif %}
+    {{ ui_include('blocks/post-stats.html.j2', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels, 'align': 'center'}}) }}
+    {{ ui_include('blocks/post-author.html.j2', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels, 'mode': 'card', 'share': true, 'className': ui_cnv(['mx-auto w-full max-w-md'])}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': ui_get(v_post, ['title']), 'lead': ui_get(v_post, ['excerpt']), 'heading': {'badge': ui_get(v_post, ['category']), 'level': v_level}, 'tone': v_tone, 'media': {'show': true}, 'align': 'center', 'landmarkLabel': v_landmarkLabel, 'aside': f_1}, 'children': c_2}) }}
+{%- else %}
+  {%- set f_3 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_post, ['title']), 'ratio': ('21/9' if ui_t(ui_eq(v_layout, 'center')) else ('1/1' if ui_t(ui_eq(v_cover, 'square')) else '4/3'))}}) }}
+  {%- endset -%}
+  {%- set c_4 -%}
+    {%- if ui_t(ui_eq(v_layout, 'outline')) %}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['outline'])), 0)) %}
+        {{ ui_include('blocks/post-outline.html.j2', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels}}) }}
+      {%- endif %}
+    {%- else %}
+      {{ ui_include('blocks/post-author.html.j2', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels, 'mode': v_author}}) }}
+      {%- if ui_t(not (ui_eq(v_author, 'line'))) %}
+        {{ ui_include('blocks/post-stats.html.j2', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels}}) }}
+      {%- endif %}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['tags'])), 0)) %}
+        {{ ui_include('blocks/post-tags.html.j2', {'p': {'tags': ui_get(v_extras, ['tags'])}}) }}
+      {%- endif %}
+    {%- endif %}
+    {{ ui_include('blocks/post-actions.html.j2', {'p': {'labels': v_labels, 'mode': v_actions}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': ui_get(v_post, ['title']), 'lead': ui_get(v_post, ['excerpt']), 'heading': {'badge': ui_get(v_post, ['category']), 'level': v_level}, 'tone': v_tone, 'media': {'show': true, 'side': v_mediaSide}, 'layout': 'split', 'landmarkLabel': v_landmarkLabel, 'aside': f_3}, 'children': c_4}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/post-stats.html.j2 b/packages/jinja2/ui/blocks/post-stats.html.j2
new file mode 100644
index 0000000..8d5d32b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-stats.html.j2
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-stats.json
+    The reading figures of a post: minutes to read, views and likes, each with its glyph.
+    Props (p): post, extras, labels, align. -#}
+{%- set v_post = ui_def(p['post'], none) -%}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_align = ui_def(p['align'], 'start') -%}
+{%- set c_7 -%}
+  {%- set c_2 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'clock', 'Size': 16}}) }}
+    {%- set c_1 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_post, ['minutes'])])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_2}) }}
+  {%- set c_4 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'eye', 'Size': 16}}) }}
+    {%- set c_3 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['views']), [ui_get(v_extras, ['views'])])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_3}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_4}) }}
+  {%- set c_6 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'heart', 'Size': 16}}) }}
+    {%- set c_5 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['likes']), [ui_get(v_extras, ['likes'])])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_5}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_6}) }}
+{%- endset -%}
+{{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': ui_s(v_align), 'Class': 'flex-wrap text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'post-stats'])}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/post-tags.html.j2 b/packages/jinja2/ui/blocks/post-tags.html.j2
new file mode 100644
index 0000000..5ada20c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/post-tags.html.j2
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-tags.json
+    The tags of a post as small badges in a wrapping row.
+    Props (p): tags, align. -#}
+{%- set v_tags = ui_def(p['tags'], none) -%}
+{%- set v_align = ui_def(p['align'], 'start') -%}
+{%- set c_2 -%}
+  {%- for v_tag in ui_l(v_tags) %}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_tag, ['name'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'post-tag'])}, 'children': c_1}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Justify': ui_s(v_align), 'Class': 'flex-wrap'}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/presets/defaults.json b/packages/jinja2/ui/blocks/presets/defaults.json
new file mode 100644
index 0000000..b6af443
--- /dev/null
+++ b/packages/jinja2/ui/blocks/presets/defaults.json
@@ -0,0 +1,82 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "specVersion": 1,
+  "id": "preset.defaults",
+  "name": "defaults",
+  "docs": "Default layout preset: the sizes of the landing blocks as Tailwind classes.\nBlocks combine these with token classes; swap the preset to resize every block at once.",
+  "source": "ui8kit default sizes (Tailwind scale, no arbitrary values)",
+  "notes": {
+    "text": "small type steps for chips, badges and links",
+    "hero.band": "the inverse band: tall section, large bottom radius",
+    "hero.title": "display title",
+    "hero.titleWeights": "one font-weight class per title word",
+    "hero.composer": "the prompt box",
+    "logos.row": "one centered row of logo slots",
+    "logos.glyph": "the Lucide glyph inside a slot: half the slot"
+  },
+  "values": {
+    "text": {
+      "tiny": "text-xs",
+      "small": "text-sm"
+    },
+    "hero": {
+      "band": "min-h-160 rounded",
+      "container": "max-w-7xl",
+      "head": "gap-12",
+      "badge": "w-48",
+      "title": "text-5xl leading-tight",
+      "titleWeights": [
+        "font-normal",
+        "font-semibold",
+        "font-normal",
+        "font-semibold"
+      ],
+      "column": "max-w-xl gap-16",
+      "composer": "h-40 max-w-xl rounded",
+      "attach": "w-24",
+      "promptLine": "h-10",
+      "model": "w-24"
+    },
+    "section": {
+      "landing": "max-w-6xl"
+    },
+    "media": {
+      "rounded": "rounded"
+    },
+    "templates": {
+      "card": "h-60 w-64",
+      "image": "h-40 w-58 rounded",
+      "footer": "h-12 min-h-12"
+    },
+    "stats": {
+      "column": "min-h-28",
+      "figure": "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18",
+      "panel": "gap-24 rounded py-20"
+    },
+    "features": {
+      "cells": "rounded"
+    },
+    "news": {
+      "card": "h-56 w-64",
+      "cover": "h-40 w-64 rounded",
+      "title": "top-16",
+      "strip": "h-12 min-h-12"
+    },
+    "cta": {
+      "panel": "rounded py-20",
+      "title": "max-w-md",
+      "text": "max-w-2xl",
+      "button": "w-40"
+    },
+    "logos": {
+      "row": "h-28 max-w-4xl gap-12 pb-8",
+      "slot": "size-20",
+      "glyph": 40
+    },
+    "footer": {
+      "card": "h-72 gap-12 rounded",
+      "brand": "w-48",
+      "groups": "gap-x-16"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/blocks/pricing-card.html.j2 b/packages/jinja2/ui/blocks/pricing-card.html.j2
new file mode 100644
index 0000000..78e52f4
--- /dev/null
+++ b/packages/jinja2/ui/blocks/pricing-card.html.j2
@@ -0,0 +1,83 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/pricing-card.json
+    A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more actions. Text comes in through `labels`; the plan is data.
+    Props (p): plan, labels, current, emphasis, density, billing, footer (slot: plan). -#}
+{%- set v_plan = ui_def(p['plan'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_current = ui_def(p['current'], none) -%}
+{%- set v_emphasis = ui_def(p['emphasis'], 'auto') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_billing = ui_def(p['billing'], 'monthly') -%}
+{%- set v_stand = ui_and([ui_get(v_plan, ['highlighted']), ui_eq(v_emphasis, 'auto')]) -%}
+{%- set v_yearlyOn = ui_and([ui_eq(v_billing, 'annual'), ui_gt(ui_get(v_plan, ['yearly']), 0)]) -%}
+{%- set v_amount = (ui_get(v_plan, ['yearly']) if ui_t(v_yearlyOn) else ui_get(v_plan, ['price'])) -%}
+{%- set c_16 -%}
+  {%- set c_5 -%}
+    {%- set c_2 -%}
+      {%- if ui_t(v_stand) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_labels, ['popular'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'default', 'Size': 'default'}, 'children': c_1}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-h-6 items-center', 'Attrs': ui_attrs(['data-slot', 'badge-slot'])}, 'children': c_2}) }}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_plan, ['name'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/card/card-title.html.j2', {'p': {'As': ui_i(3)}, 'children': c_3}) }}
+    {%- set c_4 -%}
+      {{ ui_text(ui_get(v_plan, ['tagline'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/card/card-description.html.j2', {'p': {}, 'children': c_4}) }}
+  {%- endset -%}
+  {{ ui_include('ui/card/card-header.html.j2', {'p': {'Class': 'flex flex-col gap-2'}, 'children': c_5}) }}
+  {%- set c_13 -%}
+    {%- set c_8 -%}
+      {%- set c_6 -%}
+        {%- if ui_t(ui_eq(v_amount, 0)) %}
+          {{ ui_text(ui_get(v_labels, ['free'])) }}
+        {%- else %}
+          {{ ui_text(ui_money(v_amount, ui_get(v_plan, ['currency']))) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': '4xl', 'Weight': 'bold'}, 'children': c_6}) }}
+      {%- if ui_t(ui_gt(v_amount, 0)) %}
+        {%- set c_7 -%}
+          {{ ui_text((ui_get(v_labels, ['perYear']) if ui_t(v_yearlyOn) else ui_get(v_labels, ['perMonth']))) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'baseline'}, 'children': c_8}) }}
+    {%- set c_9 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['seats']), [ui_get(v_plan, ['seats'])])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'medium'}, 'children': c_9}) }}
+    {%- set c_10 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['storage']), [ui_get(v_plan, ['storage'])])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_10}) }}
+    {%- set c_12 -%}
+      {%- for v_feature in ui_l(ui_get(v_plan, ['features'])) %}
+        {%- set c_11 -%}
+          {{ ui_text(v_feature) }}
+        {%- endset -%}
+        {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex gap-2'}, 'children': c_11}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2 text-sm'}, 'children': c_12}) }}
+  {%- endset -%}
+  {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-1 flex-col', ('gap-2' if ui_t(ui_eq(v_density, 'compact')) else 'gap-4')]))}, 'children': c_13}) }}
+  {%- set c_15 -%}
+    {%- set c_14 -%}
+      {{ ui_text(ui_get(v_labels, ['cta'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': ui_s(('default' if ui_t(v_stand) else 'outline')), 'Size': 'default', 'Attrs': ui_attrs(['data-testid', 'plan-select'])}, 'children': c_14}) }}
+    {%- if ui_def(p['footer'], none) is not none %}
+      {{ ui_include(p['footer']['t'], ui_merge(p['footer']['v'], {'a0': v_plan})) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/card/card-footer.html.j2', {'p': {'Class': 'flex flex-wrap items-center gap-2'}, 'children': c_15}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv(['flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded', 'flex h-full flex-col'])), 'Attrs': ui_attrs(['data-slot', 'card', 'data-highlighted', ('true' if ui_t(v_stand) else 'false'), 'data-current', ('true' if ui_t(v_current) else 'false')])}, 'children': c_16}) }}
diff --git a/packages/jinja2/ui/blocks/pricing-tiers.html.j2 b/packages/jinja2/ui/blocks/pricing-tiers.html.j2
new file mode 100644
index 0000000..5448d0e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/pricing-tiers.html.j2
@@ -0,0 +1,49 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/pricing-tiers.json
+    A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid, stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and the prices of that period), density, tone.
+    Props (p): id, title, plans, labels, billingLabels, layout, cols, emphasis, billing, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_plans = ui_def(p['plans'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_billingLabels = ui_def(p['billingLabels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_cols = ui_def(p['cols'], '1-3') -%}
+{%- set v_emphasis = ui_def(p['emphasis'], 'auto') -%}
+{%- set v_billing = ui_def(p['billing'], 'off') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_7 -%}
+  {%- if ui_t(not (ui_eq(v_billing, 'off'))) %}
+    {%- set c_5 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_billingLabels, ['monthly'])) }}
+        {%- endset -%}
+        {{ ui_include('blocks/switcher-item.html.j2', {'p': {'active': ui_eq(v_billing, 'monthly')}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_billingLabels, ['annual'])) }}
+        {%- endset -%}
+        {{ ui_include('blocks/switcher-item.html.j2', {'p': {'active': ui_eq(v_billing, 'annual')}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('blocks/switcher.html.j2', {'p': {'label': ui_get(v_billingLabels, ['label'])}, 'children': c_3}) }}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_billingLabels, ['save'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'default', 'Size': 'default'}, 'children': c_4}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'center', 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-testid', 'billing'])}, 'children': c_5}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(ui_len(v_plans), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layers', 'title': ui_get(v_labels, ['empty'])}}) }}
+  {%- else %}
+    {%- set c_6 -%}
+      {%- for v_plan in ui_l(v_plans) %}
+        {{ ui_include('blocks/pricing-card.html.j2', {'p': {'plan': v_plan, 'labels': v_labels, 'emphasis': v_emphasis, 'billing': ('annual' if ui_t(ui_eq(v_billing, 'annual')) else 'monthly'), 'density': ('compact' if ui_t(ui_eq(v_density, 'compact')) else 'default')}}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1' if ui_t(ui_eq(v_layout, 'stack')) else ui_fit_cols(v_cols, ui_len(v_plans)))), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'tiers'])}, 'children': c_6}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': ('md' if ui_t(ui_eq(v_layout, 'stack')) else 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/product-card.html.j2 b/packages/jinja2/ui/blocks/product-card.html.j2
new file mode 100644
index 0000000..77380b8
--- /dev/null
+++ b/packages/jinja2/ui/blocks/product-card.html.j2
@@ -0,0 +1,88 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-card.json
+    A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image, none), ratio, rating (show, hide), action (button, none), density.
+    Props (p): product, labels, badges, layout, media, ratio, rating, action, density. -#}
+{%- set v_product = ui_def(p['product'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_badges = ui_def(p['badges'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'vertical') -%}
+{%- set v_media = ui_def(p['media'], 'image') -%}
+{%- set v_ratio = ui_def(p['ratio'], '4/3') -%}
+{%- set v_rating = ui_def(p['rating'], 'show') -%}
+{%- set v_action = ui_def(p['action'], 'button') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set c_16 -%}
+  {%- if ui_t(ui_eq(v_media, 'image')) %}
+    {%- set c_2 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_product, ['name']), 'src': ui_get(v_product, ['image']), 'ratio': v_ratio, 'className': ui_cnv(['h-full'])}}) }}
+      {%- if ui_t(ui_get(v_product, ['badge'])) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_at(v_badges, ui_get(v_product, ['badge']))) }}
+        {%- endset -%}
+        {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'absolute left-4 top-4', 'Attrs': ui_attrs(['data-testid', 'badge'])}, 'children': c_1}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['relative shrink-0', ('sm:w-48' if ui_t(ui_eq(v_layout, 'horizontal')) else '')]))}, 'children': c_2}) }}
+  {%- endif %}
+  {%- set c_15 -%}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_product, ['category'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'uppercase tracking-wide text-muted-foreground'}, 'children': c_3}) }}
+    {%- set c_5 -%}
+      {%- if ui_t(ui_get(v_product, ['href'])) %}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_product, ['name'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_get(v_product, ['href'])), 'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'open'])}, 'children': c_4}) }}
+      {%- else %}
+        {{ ui_text(ui_get(v_product, ['name'])) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_5}) }}
+    {%- if ui_t(ui_eq(v_rating, 'show')) %}
+      {%- set c_7 -%}
+        {{ ui_include('blocks/rating.html.j2', {'p': {'value': ui_get(v_product, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['ratingLabel']), [ui_get(v_product, ['rating'])])}}) }}
+        {%- set c_6 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['reviews']), [ui_get(v_product, ['reviews'])])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2'}, 'children': c_7}) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_density, 'default')) %}
+      {%- set c_8 -%}
+        {{ ui_text(ui_get(v_product, ['summary'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_8}) }}
+    {%- endif %}
+    {%- set c_14 -%}
+      {%- set c_12 -%}
+        {%- set c_9 -%}
+          {{ ui_text(ui_money(ui_get(v_product, ['price']), ui_get(v_product, ['currency']))) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_9}) }}
+        {%- if ui_t(ui_and([ui_get(v_product, ['compareAt']), ui_gt(ui_get(v_product, ['compareAt']), ui_get(v_product, ['price']))])) %}
+          {%- set c_11 -%}
+            {%- set c_10 -%}
+              {{ ui_text(ui_get(v_labels, ['was'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_10}) }}
+            {{ ui_text(ui_money(ui_get(v_product, ['compareAt']), ui_get(v_product, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Tag': 'del', 'Size': 'sm', 'Class': 'relative text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'compare-at'])}, 'children': c_11}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'baseline', 'Class': 'flex-wrap'}, 'children': c_12}) }}
+      {%- if ui_t(ui_eq(v_action, 'button')) %}
+        {%- set c_13 -%}
+          {{ ui_text((ui_get(v_labels, ['add']) if ui_t(ui_get(v_product, ['inStock'])) else ui_get(v_labels, ['soldOut']))) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': ui_s(('default' if ui_t(ui_get(v_product, ['inStock'])) else 'outline')), 'Size': 'sm', 'Disabled': ui_t(not (ui_t(ui_get(v_product, ['inStock'])))), 'Attrs': ui_attrs(['data-testid', 'add'])}, 'children': c_13}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Justify': 'between', 'Class': 'mt-auto pt-2'}, 'children': c_14}) }}
+  {%- endset -%}
+  {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': 'flex flex-1 flex-col gap-2'}, 'children': c_15}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv(['flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded', 'h-full gap-4 overflow-hidden', ('flex flex-col sm:flex-row' if ui_t(ui_eq(v_layout, 'horizontal')) else 'flex flex-col')])), 'Attrs': ui_attrs(['data-slot', 'card', 'data-testid', 'item', 'data-layout', v_layout])}, 'children': c_16}) }}
diff --git a/packages/jinja2/ui/blocks/product-detail.html.j2 b/packages/jinja2/ui/blocks/product-detail.html.j2
new file mode 100644
index 0000000..0631099
--- /dev/null
+++ b/packages/jinja2/ui/blocks/product-detail.html.j2
@@ -0,0 +1,82 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-detail.json
+    A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price, stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs (none, below), buy (full, compact), tone, density.
+    Props (p): id, product, labels, badges, level, layout, mediaSide, thumbs, buy, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_product = ui_def(p['product'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_badges = ui_def(p['badges'], none) -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_layout = ui_def(p['layout'], 'split') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'start') -%}
+{%- set v_thumbs = ui_def(p['thumbs'], 'below') -%}
+{%- set v_buy = ui_def(p['buy'], 'full') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(not (ui_t(v_product))) %}
+  {%- set c_1 -%}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'package', 'title': ui_get(v_labels, ['empty'])}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}) }}
+{%- else %}
+  {%- set f_14 -%}
+    {{ ui_include('blocks/product-gallery.html.j2', {'p': {'name': ui_get(v_product, ['name']), 'image': ui_get(v_product, ['image']), 'thumbs': v_thumbs}}) }}
+  {%- endset -%}
+  {%- set c_15 -%}
+    {%- set c_13 -%}
+      {%- if ui_t(ui_get(v_product, ['category'])) %}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_product, ['category'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'uppercase tracking-wide text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'category'])}, 'children': c_2}) }}
+      {%- endif %}
+      {{ ui_include('blocks/product-price.html.j2', {'p': {'price': ui_get(v_product, ['price']), 'compareAt': ui_get(v_product, ['compareAt']), 'currency': ui_get(v_product, ['currency']), 'badge': (ui_at(v_badges, ui_get(v_product, ['badge'])) if ui_t(ui_get(v_product, ['badge'])) else ''), 'was': ui_get(v_labels, ['was'])}}) }}
+      {%- set c_4 -%}
+        {{ ui_include('blocks/rating.html.j2', {'p': {'value': ui_get(v_product, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['ratingLabel']), [ui_get(v_product, ['rating'])])}}) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['reviews']), [ui_get(v_product, ['reviews'])])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2'}, 'children': c_4}) }}
+      {%- set c_5 -%}
+        {{ ui_text((ui_get(v_labels, ['inStock']) if ui_t(ui_get(v_product, ['inStock'])) else ui_get(v_labels, ['soldOut']))) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'medium', 'Class': ui_s(('text-foreground' if ui_t(ui_get(v_product, ['inStock'])) else 'text-destructive')), 'Attrs': ui_attrs(['data-testid', 'stock'])}, 'children': c_5}) }}
+      {%- set c_7 -%}
+        {%- if ui_t(ui_eq(v_buy, 'full')) %}
+          {{ ui_include('blocks/number-field.html.j2', {'p': {'value': '1', 'name': ui_tpl('{0}-qty', [v_id]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}) }}
+        {%- endif %}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['add'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Disabled': ui_t(not (ui_t(ui_get(v_product, ['inStock'])))), 'Attrs': ui_attrs(['data-testid', 'add'])}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Class': 'flex-wrap'}, 'children': c_7}) }}
+      {%- if ui_t(ui_eq(v_buy, 'full')) %}
+        {%- set c_12 -%}
+          {%- set c_9 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'truck', 'Size': 16}}) }}
+            {%- set c_8 -%}
+              {{ ui_text(ui_get(v_labels, ['shipping'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_8}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_9}) }}
+          {%- set c_11 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'shield-check', 'Size': 16}}) }}
+            {%- set c_10 -%}
+              {{ ui_text(ui_get(v_labels, ['returns'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_10}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_11}) }}
+        {%- endset -%}
+        {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2 text-sm text-muted-foreground'}, 'children': c_12}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'buy-box'])}, 'children': c_13}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': ui_get(v_product, ['name']), 'lead': ui_get(v_product, ['summary']), 'heading': {'level': v_level}, 'layout': ('split' if ui_t(ui_eq(v_layout, 'split')) else 'stack'), 'media': {'show': true, 'side': v_mediaSide, 'align': 'start'}, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel, 'aside': f_14}, 'children': c_15}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/product-gallery.html.j2 b/packages/jinja2/ui/blocks/product-gallery.html.j2
new file mode 100644
index 0000000..8246c73
--- /dev/null
+++ b/packages/jinja2/ui/blocks/product-gallery.html.j2
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-gallery.json
+    The gallery of a product page: the picture (the file of the product's featured media, a placeholder without one) and optional thumbnails below.
+    Props (p): name, image, thumbs. -#}
+{%- set v_name = ui_def(p['name'], none) -%}
+{%- set v_image = ui_def(p['image'], none) -%}
+{%- set v_thumbs = ui_def(p['thumbs'], 'below') -%}
+{%- set c_2 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_name, 'src': v_image, 'ratio': '1/1'}}) }}
+  {%- if ui_t(ui_eq(v_thumbs, 'below')) %}
+    {%- set c_1 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_name, 'src': v_image, 'ratio': '1/1', 'className': ui_cnv(['ring-2 ring-foreground'])}}) }}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_name, 'ratio': '1/1'}}) }}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_name, 'ratio': '1/1'}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '3', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'thumbs'])}, 'children': c_1}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'gallery'])}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/product-grid.html.j2 b/packages/jinja2/ui/blocks/product-grid.html.j2
new file mode 100644
index 0000000..0d6a81e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/product-grid.html.j2
@@ -0,0 +1,40 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-grid.json
+    A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating, action, tone, density.
+    Props (p): id, title, products, labels, badges, layout, cols, ratio, rating, action, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_products = ui_def(p['products'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_badges = ui_def(p['badges'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_cols = ui_def(p['cols'], '1-3') -%}
+{%- set v_ratio = ui_def(p['ratio'], '4/3') -%}
+{%- set v_rating = ui_def(p['rating'], 'show') -%}
+{%- set v_action = ui_def(p['action'], 'button') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_4 -%}
+  {%- if ui_t(ui_eq(ui_len(v_products), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'package', 'title': ui_get(v_labels, ['empty'])}}) }}
+  {%- elif ui_t(ui_eq(v_layout, 'rail')) %}
+    {%- set c_2 -%}
+      {%- for v_p in ui_l(v_products) %}
+        {%- set c_1 -%}
+          {{ ui_include('blocks/product-card.html.j2', {'p': {'product': v_p, 'labels': v_labels, 'badges': v_badges, 'layout': ('horizontal' if ui_t(ui_eq(v_layout, 'list')) else 'vertical'), 'ratio': v_ratio, 'rating': v_rating, 'action': v_action, 'density': ('compact' if ui_t(ui_eq(v_density, 'compact')) else 'default')}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'w-64 shrink-0 snap-start'}, 'children': c_1}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex snap-x gap-4 overflow-x-auto pb-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}) }}
+  {%- else %}
+    {%- set c_3 -%}
+      {%- for v_p in ui_l(v_products) %}
+        {{ ui_include('blocks/product-card.html.j2', {'p': {'product': v_p, 'labels': v_labels, 'badges': v_badges, 'layout': ('horizontal' if ui_t(ui_eq(v_layout, 'list')) else 'vertical'), 'ratio': v_ratio, 'rating': v_rating, 'action': v_action, 'density': ('compact' if ui_t(ui_eq(v_density, 'compact')) else 'default')}}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1' if ui_t(ui_eq(v_layout, 'list')) else v_cols)), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_3}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/product-info.html.j2 b/packages/jinja2/ui/blocks/product-info.html.j2
new file mode 100644
index 0000000..f9bbb14
--- /dev/null
+++ b/packages/jinja2/ui/blocks/product-info.html.j2
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-info.json
+    The details of a product under its buy box: texts in an accordion (native details) beside a card with the specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text open, none), tone.
+    Props (p): id, title, details, specs, labels, layout, expand, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_details = ui_def(p['details'], none) -%}
+{%- set v_specs = ui_def(p['specs'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'split') -%}
+{%- set v_expand = ui_def(p['expand'], 'first') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_13 -%}
+  {%- set c_12 -%}
+    {%- if ui_t(ui_gt(ui_len(v_details), 0)) %}
+      {%- set c_5 -%}
+        {%- for v_d in ui_l(v_details) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_4 -%}
+            {%- set c_2 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_d, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-base font-semibold'}, 'children': c_1}) }}
+            {%- endset -%}
+            {{ ui_include('ui/disclosure/summary.html.j2', {'p': {'Variant': 'item'}, 'children': c_2}) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_d, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'pb-4 text-muted-foreground'}, 'children': c_3}) }}
+          {%- endset -%}
+          {{ ui_include('ui/disclosure/disclosure.html.j2', {'p': {'Variant': 'item', 'Open': ui_t(ui_and([ui_eq(v_expand, 'first'), ui_eq(v_i, 0)])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_4}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': 'stretch', 'Class': ui_s(('lg:col-span-2' if ui_t(ui_eq(v_layout, 'split')) else '')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_5}) }}
+    {%- endif %}
+    {%- if ui_t(ui_gt(ui_len(v_specs), 0)) %}
+      {%- set c_11 -%}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['specs'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_6}) }}
+        {%- set c_10 -%}
+          {%- for v_s in ui_l(v_specs) %}
+            {%- set c_9 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_s, ['label'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_s, ['value'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'font-medium'}, 'children': c_8}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0', 'Attrs': ui_attrs(['data-testid', 'spec'])}, 'children': c_9}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col'}, 'children': c_10}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'specs'])}, 'children': c_11}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-1 items-start gap-8 lg:grid-cols-3' if ui_t(ui_eq(v_layout, 'split')) else 'grid grid-cols-1 gap-8'))}, 'children': c_12}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_13}) }}
diff --git a/packages/jinja2/ui/blocks/product-price.html.j2 b/packages/jinja2/ui/blocks/product-price.html.j2
new file mode 100644
index 0000000..33f56eb
--- /dev/null
+++ b/packages/jinja2/ui/blocks/product-price.html.j2
@@ -0,0 +1,32 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-price.json
+    The price line of a product page: the price (integer minor units in the currency), the old price (compare_at) struck through when higher, and the badge.
+    Props (p): price, compareAt, currency, badge, was. -#}
+{%- set v_price = ui_def(p['price'], none) -%}
+{%- set v_compareAt = ui_def(p['compareAt'], none) -%}
+{%- set v_currency = ui_def(p['currency'], none) -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_was = ui_def(p['was'], none) -%}
+{%- set c_5 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_money(v_price, v_currency)) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '4xl', 'Weight': 'bold'}, 'children': c_1}) }}
+  {%- if ui_t(ui_and([v_compareAt, ui_gt(v_compareAt, v_price)])) %}
+    {%- set c_3 -%}
+      {%- set c_2 -%}
+        {{ ui_text(v_was) }}
+      {%- endset -%}
+      {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_2}) }}
+      {{ ui_text(ui_money(v_compareAt, v_currency)) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Tag': 'del', 'Size': 'lg', 'Class': 'relative text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'compare-at'])}, 'children': c_3}) }}
+  {%- endif %}
+  {%- if ui_t(v_badge) %}
+    {%- set c_4 -%}
+      {{ ui_text(v_badge) }}
+    {%- endset -%}
+    {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'default', 'Size': 'default'}, 'children': c_4}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_5}) }}
diff --git a/packages/jinja2/ui/blocks/profile-form.html.j2 b/packages/jinja2/ui/blocks/profile-form.html.j2
new file mode 100644
index 0000000..c2c755f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/profile-form.html.j2
@@ -0,0 +1,89 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/profile-form.json
+    An account settings form: a picture with a change button, name, email, bio and two notification switches, with save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default, muted).
+    Props (p): id, title, text, labels, layout, avatar, prefs, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'stacked') -%}
+{%- set v_avatar = ui_def(p['avatar'], 'show') -%}
+{%- set v_prefs = ui_def(p['prefs'], 'show') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_20 -%}
+  {%- set c_19 -%}
+    {%- set c_18 -%}
+      {%- set c_17 -%}
+        {%- set c_13 -%}
+          {%- set c_6 -%}
+            {%- if ui_t(ui_eq(v_avatar, 'show')) %}
+              {%- set c_2 -%}
+                {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_labels, ['picture']), 'ratio': '1/1', 'className': ui_cnv(['size-16 shrink-0 rounded-full'])}}) }}
+                {%- set c_1 -%}
+                  {{ ui_text(ui_get(v_labels, ['change'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button'}, 'children': c_1}) }}
+              {%- endset -%}
+              {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'avatar'])}, 'children': c_2}) }}
+            {%- endif %}
+            {%- set c_3 -%}
+              {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': 'name', 'Autocomplete': 'name', 'Attrs': ui_attrs(['id', ui_tpl('{0}-name', [v_id]), 'data-testid', 'field'])}}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['name']), 'htmlFor': ui_tpl('{0}-name', [v_id])}, 'children': c_3}) }}
+            {%- set c_4 -%}
+              {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'email', 'Name': 'email', 'Autocomplete': 'email', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['email']), 'htmlFor': ui_tpl('{0}-email', [v_id])}, 'children': c_4}) }}
+            {%- set c_5 -%}
+              {{ ui_include('ui/textarea/textarea.html.j2', {'p': {'Rows': 4, 'Name': 'bio', 'Attrs': ui_attrs(['id', ui_tpl('{0}-bio', [v_id]), 'data-testid', 'field'])}}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['bio']), 'htmlFor': ui_tpl('{0}-bio', [v_id])}, 'children': c_5}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_6}) }}
+          {%- if ui_t(ui_eq(v_prefs, 'show')) %}
+            {%- set c_12 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_labels, ['prefs'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_7}) }}
+              {%- set c_9 -%}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_get(v_labels, ['updates'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-updates', [v_id])), 'Class': 'text-sm'}, 'children': c_8}) }}
+                {{ ui_include('ui/switch/switch.html.j2', {'p': {'Name': 'updates', 'Attrs': ui_attrs(['id', ui_tpl('{0}-updates', [v_id])])}}) }}
+              {%- endset -%}
+              {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_9}) }}
+              {%- set c_11 -%}
+                {%- set c_10 -%}
+                  {{ ui_text(ui_get(v_labels, ['alerts'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-alerts', [v_id])), 'Class': 'text-sm'}, 'children': c_10}) }}
+                {{ ui_include('ui/switch/switch.html.j2', {'p': {'Name': 'alerts', 'Attrs': ui_attrs(['id', ui_tpl('{0}-alerts', [v_id])])}}) }}
+              {%- endset -%}
+              {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_11}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'prefs'])}, 'children': c_12}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_layout, 'split')) else '1')), 'Class': 'items-start gap-8'}, 'children': c_13}) }}
+        {%- set c_16 -%}
+          {%- set c_14 -%}
+            {{ ui_text(ui_get(v_labels, ['save'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_14}) }}
+          {%- set c_15 -%}
+            {{ ui_text(ui_get(v_labels, ['cancel'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button'}, 'children': c_15}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_16}) }}
+      {%- endset -%}
+      {{ ui_include('ui/form/form.html.j2', {'p': {'Method': 'dialog', 'Class': 'gap-6', 'Attrs': ui_attrs(['data-testid', 'profile-form'])}, 'children': c_17}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/panel.html.j2', {'p': {'title': v_title, 'description': v_text, 'id': v_id, 'className': ui_cnv([ui_cnv([('bg-muted' if ui_t(ui_eq(v_tone, 'muted')) else '')])])}, 'children': c_18}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4 py-8', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_19}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else (ui_tpl('{0}-t', [v_id]) if ui_t(ui_and([v_title, v_id])) else none)), 'data-testid', 'panel-section', 'aria-label', v_landmarkLabel])}, 'children': c_20}) }}
diff --git a/packages/jinja2/ui/blocks/project-grid.html.j2 b/packages/jinja2/ui/blocks/project-grid.html.j2
new file mode 100644
index 0000000..0a085fc
--- /dev/null
+++ b/packages/jinja2/ui/blocks/project-grid.html.j2
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/project-grid.json
+    Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay, bento, list), tone, density.
+    Props (p): id, title, lead, projects, empty, labels, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_projects = ui_def(p['projects'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'cards') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_8 -%}
+  {%- set c_9 -%}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4'}}) }}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4', 'className': ui_cnv(['mt-8'])}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-4', 'Attrs': ui_attrs(['data-testid', 'collage'])}, 'children': c_9}) }}
+{%- endset -%}
+{%- set c_10 -%}
+  {%- if ui_t(ui_eq(ui_len(v_projects), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'folder-open', 'title': v_empty}}) }}
+  {%- elif ui_t(ui_eq(v_layout, 'list')) %}
+    {%- set c_7 -%}
+      {%- for v_p in ui_l(v_projects) %}
+        {%- set c_6 -%}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': '1/1', 'className': ui_cnv(['size-16 shrink-0'])}}) }}
+          {%- set c_5 -%}
+            {%- set c_3 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_p, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_p, ['year'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Justify': 'between'}, 'children': c_3}) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_p, ['summary'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'flex-1'}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'border-b border-border pb-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}) }}
+  {%- else %}
+    {{ ui_include('blocks/project-tiles.html.j2', {'p': {'projects': v_projects, 'labels': v_labels, 'layout': v_layout}}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'layout': ('split' if ui_t(ui_eq(v_layout, 'list')) else 'stack'), 'media': {'show': ui_eq(v_layout, 'list'), 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_8}, 'children': c_10}) }}
diff --git a/packages/jinja2/ui/blocks/project-tiles.html.j2 b/packages/jinja2/ui/blocks/project-tiles.html.j2
new file mode 100644
index 0000000..38636d8
--- /dev/null
+++ b/packages/jinja2/ui/blocks/project-tiles.html.j2
@@ -0,0 +1,68 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/project-tiles.json
+    The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags, two links), compact cards in four columns, captions over the pictures, or a bento where the first project takes a big tile.
+    Props (p): projects, labels, layout. -#}
+{%- set v_projects = ui_def(p['projects'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'cards') -%}
+{%- set v_over = (true if ui_t(ui_eq(v_layout, 'overlay')) else ui_eq(v_layout, 'bento')) -%}
+{%- set c_13 -%}
+  {%- for v_p in ui_l(v_projects) %}
+    {%- set v_i = loop.index0 -%}
+    {%- set c_12 -%}
+      {%- set c_2 -%}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': ('1/1' if ui_t(ui_eq(v_layout, 'compact')) else ('3/4' if ui_t(v_over) else '4/3')), 'className': ui_cnv([('h-full' if ui_t(v_over) else '')])}}) }}
+        {%- if ui_t(ui_and([ui_get(v_p, ['featured']), not (ui_eq(v_layout, 'compact'))])) %}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_labels, ['featured'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'absolute left-4 top-4', 'Attrs': ui_attrs(['data-testid', 'featured'])}, 'children': c_1}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('h-full' if ui_t(v_over) else 'relative'))}, 'children': c_2}) }}
+      {%- set c_11 -%}
+        {%- set c_3 -%}
+          {{ ui_text(ui_tpl('{0}, {1}', [ui_get(v_p, ['category']), ui_get(v_p, ['year'])])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_p, ['title'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': ui_s(('sm' if ui_t(ui_eq(v_layout, 'compact')) else 'lg')), 'Weight': 'semibold'}, 'children': c_4}) }}
+        {%- if ui_t(not (ui_eq(v_layout, 'compact'))) %}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_p, ['summary'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+        {%- endif %}
+        {%- if ui_t(ui_eq(v_layout, 'cards')) %}
+          {%- set c_7 -%}
+            {%- for v_k in ui_l(ui_get(v_p, ['tags'])) %}
+              {%- set c_6 -%}
+                {{ ui_text(v_k) }}
+              {%- endset -%}
+              {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_6}) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_7}) }}
+          {%- set c_10 -%}
+            {%- set c_8 -%}
+              {{ ui_text(ui_get(v_labels, ['case'])) }}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-right', 'Size': 16}}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_p, ['href']), 'className': ui_cnv(['inline-flex items-center gap-2 text-sm font-medium'])}, 'children': c_8}) }}
+            {%- set c_9 -%}
+              {{ ui_text(ui_get(v_labels, ['view'])) }}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'external-link', 'Size': 16}}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_p, ['href']), 'className': ui_cnv(['inline-flex items-center gap-2 text-sm font-medium'])}, 'children': c_9}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Class': 'pt-2'}, 'children': c_10}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': ui_s(('absolute right-4 bottom-4 left-4 rounded bg-background p-4' if ui_t(v_over) else ''))}, 'children': c_11}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/article-block.html.j2', {'p': {'className': ui_cnv([ui_cnv(['flex flex-col gap-4', ('relative' if ui_t(v_over) else 'rounded bg-card inset-ring inset-ring-border p-4'), ('sm:col-span-2 lg:row-span-2' if ui_t(ui_and([ui_eq(v_layout, 'bento'), ui_eq(v_i, 0)])) else '')])]), 'testid': 'item'}, 'children': c_12}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4' if ui_t(ui_eq(v_layout, 'compact')) else 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_13}) }}
diff --git a/packages/jinja2/ui/blocks/prompt-composer.html.j2 b/packages/jinja2/ui/blocks/prompt-composer.html.j2
new file mode 100644
index 0000000..5546d61
--- /dev/null
+++ b/packages/jinja2/ui/blocks/prompt-composer.html.j2
@@ -0,0 +1,53 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/prompt-composer.json
+    A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send button. Static links only; a host adds behavior.
+    Props (p): label, attachLabel, modelLabel, send, href. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_attachLabel = ui_def(p['attachLabel'], none) -%}
+{%- set v_modelLabel = ui_def(p['modelLabel'], none) -%}
+{%- set v_send = ui_def(p['send'], none) -%}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set c_10 -%}
+  {%- if ui_t(v_attachLabel) %}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'file-text', 'Size': 16}}) }}
+        {{ ui_text(v_attachLabel) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Class': ui_s(ui_cnv(['gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20', ui_preset('blocks/presets/defaults.json', ['hero', 'attach'])])), 'Attrs': ui_attrs(['data-testid', 'composer-attach'])}, 'children': c_1}) }}
+      {%- set c_2 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'paperclip', 'Size': 16}}) }}
+        {{ ui_text(v_attachLabel) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Class': ui_s(ui_cnv(['gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20', ui_preset('blocks/presets/defaults.json', ['hero', 'attach'])])), 'Attrs': ui_attrs(['data-testid', 'composer-attach'])}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'composer-attachments'])}, 'children': c_3}) }}
+  {%- endif %}
+  {%- set c_4 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'semibold', 'Class': ui_s(ui_cnv(['flex w-full items-center leading-5 text-background/80', ui_preset('blocks/presets/defaults.json', ['hero', 'promptLine'])])), 'Attrs': ui_attrs(['data-testid', 'field'])}, 'children': c_4}) }}
+  {%- set c_9 -%}
+    {%- set c_7 -%}
+      {%- set c_5 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'plus', 'Size': 16}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Class': 'bg-background/10 text-background hover:bg-background/20', 'Attrs': ui_attrs(['data-testid', 'composer-plus', 'aria-label', ui_coalesce([v_attachLabel, 'Attach'])])}, 'children': c_5}) }}
+      {%- if ui_t(v_modelLabel) %}
+        {%- set c_6 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'sparkles', 'Size': 16}}) }}
+          {{ ui_text(v_modelLabel) }}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-down', 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Class': ui_s(ui_cnv(['gap-2 bg-background/10 text-background hover:bg-background/20', ui_preset('blocks/presets/defaults.json', ['hero', 'model'])])), 'Attrs': ui_attrs(['data-testid', 'composer-model'])}, 'children': c_6}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_7}) }}
+    {%- set c_8 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-up', 'Size': 16}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Href': ui_s(v_href), 'Variant': 'secondary', 'Size': 'sm', 'Layout': 'icon', 'Attrs': ui_attrs(['data-testid', 'submit', 'aria-label', ui_coalesce([v_send, 'Send'])])}, 'children': c_8}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'between', 'Class': 'h-8 w-full', 'Attrs': ui_attrs(['data-testid', 'composer-tools'])}, 'children': c_9}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30', ui_preset('blocks/presets/defaults.json', ['hero', 'composer'])])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_10}) }}
diff --git a/packages/jinja2/ui/blocks/proof-band.html.j2 b/packages/jinja2/ui/blocks/proof-band.html.j2
new file mode 100644
index 0000000..f3a1061
--- /dev/null
+++ b/packages/jinja2/ui/blocks/proof-band.html.j2
@@ -0,0 +1,53 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/proof-band.json
+    Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above, beside), logos (name, icon), tone, density.
+    Props (p): id, title, logos, empty, stats, layout, logoStyle, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_logos = ui_def(p['logos'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_stats = ui_def(p['stats'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'above') -%}
+{%- set v_logoStyle = ui_def(p['logoStyle'], 'name') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_9 -%}
+  {%- if ui_t(ui_eq(ui_len(v_logos), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'building-2', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_8 -%}
+      {%- set c_3 -%}
+        {%- for v_logo in ui_l(v_logos) %}
+          {%- set c_2 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_logo, ['icon'])), 'Size': 24}}) }}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_logo, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': ui_s(('sr-only' if ui_t(ui_eq(v_logoStyle, 'icon')) else ''))}, 'children': c_1}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'logo'])}, 'children': c_2}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '6', 'Justify': 'center', 'Class': 'flex-wrap text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'logos'])}, 'children': c_3}) }}
+      {%- set c_7 -%}
+        {%- for v_stat in ui_l(v_stats) %}
+          {%- set c_6 -%}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_stat, ['value'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '4xl', 'Weight': 'bold'}, 'children': c_4}) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_stat, ['label'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'stat'])}, 'children': c_6}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('2' if ui_t(ui_eq(v_layout, 'beside')) else '1-4')), 'Class': 'gap-6 text-center', 'Attrs': ui_attrs(['data-testid', 'stats'])}, 'children': c_7}) }}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-2' if ui_t(ui_eq(v_layout, 'beside')) else '1')), 'Class': 'items-center gap-8'}, 'children': c_8}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/quote-card.html.j2 b/packages/jinja2/ui/blocks/quote-card.html.j2
new file mode 100644
index 0000000..f4c1395
--- /dev/null
+++ b/packages/jinja2/ui/blocks/quote-card.html.j2
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-card.json
+    One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the stars and a company glyph as `item` says.
+    Props (p): q, labels, item, layout. -#}
+{%- set v_q = ui_def(p['q'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_item = ui_def(p['item'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_get(v_item, ['kind']), 'social')) %}
+    {%- set c_4 -%}
+      {%- if ui_t(not (ui_eq(ui_get(v_item, ['avatar']), 'none'))) %}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_q, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-12 shrink-0 rounded-full'])}}) }}
+      {%- endif %}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_q, ['author'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['handleLine']), [ui_get(v_q, ['handle']), ui_get(v_q, ['time'])])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_3}) }}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'message-circle', 'Size': 16, 'Class': 'ml-auto text-muted-foreground'}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_4}) }}
+    {%- set c_5 -%}
+      {{ ui_text(ui_get(v_q, ['quote'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base'}, 'children': c_5}) }}
+  {%- else %}
+    {%- if ui_t(not (ui_eq(ui_get(v_item, ['rating']), 'hide'))) %}
+      {{ ui_include('blocks/rating.html.j2', {'p': {'value': ui_get(v_q, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['rating']), [ui_get(v_q, ['rating'])])}}) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(ui_get(v_item, ['mark']), 'icon')) %}
+      {%- set c_6 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_q, ['mark'])), 'Size': 24}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'mark'])}, 'children': c_6}) }}
+    {%- endif %}
+    {%- set c_7 -%}
+      {{ ui_text(ui_get(v_q, ['quote'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': ui_s(('xl' if ui_t(ui_eq(v_layout, 'single')) else 'base'))}, 'children': c_7}) }}
+    {%- set c_11 -%}
+      {%- if ui_t(not (ui_eq(ui_get(v_item, ['avatar']), 'none'))) %}
+        {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_q, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-12 shrink-0 rounded-full'])}}) }}
+      {%- endif %}
+      {%- set c_10 -%}
+        {%- set c_8 -%}
+          {{ ui_text(ui_get(v_q, ['author'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_8}) }}
+        {%- set c_9 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['byLine']), [ui_get(v_q, ['role']), ui_get(v_q, ['company'])])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_9}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_10}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_11}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/figure-block.html.j2', {'p': {'className': ui_cnv([ui_cnv(['m-0 flex flex-col gap-4', ('' if ui_t(ui_eq(ui_get(v_item, ['kind']), 'plain')) else 'rounded p-6 inset-ring inset-ring-border bg-card'), ('mb-4 break-inside-avoid' if ui_t(ui_eq(v_layout, 'masonry')) else ('w-80 shrink-0 snap-start' if ui_t(ui_eq(v_layout, 'strip')) else 'h-full'))])]), 'testid': 'item'}, 'children': c_12}) }}
diff --git a/packages/jinja2/ui/blocks/quote-figures.html.j2 b/packages/jinja2/ui/blocks/quote-figures.html.j2
new file mode 100644
index 0000000..02b8930
--- /dev/null
+++ b/packages/jinja2/ui/blocks/quote-figures.html.j2
@@ -0,0 +1,24 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-figures.json
+    Three figures in a row above the quotes of QuoteSplit.
+    Props (p): extras. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set c_4 -%}
+  {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 3)) %}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_s, ['value'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_s, ['label'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Attrs': ui_attrs(['data-testid', 'quote-stat'])}, 'children': c_3}) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-3 gap-4 border-b border-border pb-8', 'Attrs': ui_attrs(['data-testid', 'quote-figures'])}, 'children': c_4}) }}
diff --git a/packages/jinja2/ui/blocks/quote-logo-tiles.html.j2 b/packages/jinja2/ui/blocks/quote-logo-tiles.html.j2
new file mode 100644
index 0000000..9337005
--- /dev/null
+++ b/packages/jinja2/ui/blocks/quote-logo-tiles.html.j2
@@ -0,0 +1,21 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-logo-tiles.json
+    Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit.
+    Props (p): extras. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set c_3 -%}
+  {%- for v_l in ui_l(ui_get(v_extras, ['logos'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 4)) %}
+      {%- set c_2 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 20}}) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_l, ['name'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'center', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4 text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'quote-logo'])}, 'children': c_2}) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-4', 'Attrs': ui_attrs(['data-testid', 'quote-logos'])}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/quote-proof.html.j2 b/packages/jinja2/ui/blocks/quote-proof.html.j2
new file mode 100644
index 0000000..0913c4f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/quote-proof.html.j2
@@ -0,0 +1,18 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-proof.json
+    A customer quote and who said it, as a figure.
+    Props (p): quote, quoteBy, center. -#}
+{%- set v_quote = ui_def(p['quote'], none) -%}
+{%- set v_quoteBy = ui_def(p['quoteBy'], none) -%}
+{%- set v_center = ui_def(p['center'], false) -%}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_quote) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xl'}, 'children': c_1}) }}
+  {%- set c_2 -%}
+    {{ ui_text(v_quoteBy) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'figure', 'Class': ui_s(ui_cnv(['flex flex-col gap-2', ('items-center text-center' if ui_t(v_center) else '')])), 'Attrs': ui_attrs(['data-testid', 'proof'])}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/quote-rating-panel.html.j2 b/packages/jinja2/ui/blocks/quote-rating-panel.html.j2
new file mode 100644
index 0000000..cbdcfde
--- /dev/null
+++ b/packages/jinja2/ui/blocks/quote-rating-panel.html.j2
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-rating-panel.json
+    The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures.
+    Props (p): extras, labels. -#}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_7 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_extras, ['score'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '5xl', 'Weight': 'bold'}, 'children': c_1}) }}
+  {{ ui_include('blocks/rating.html.j2', {'p': {'value': ui_get(v_extras, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['rating']), [ui_get(v_extras, ['rating'])]), 'size': 20}}) }}
+  {%- set c_2 -%}
+    {{ ui_text(ui_get(v_extras, ['reviews'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+  {%- set c_6 -%}
+    {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 2)) %}
+        {%- set c_5 -%}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '2xl', 'Weight': 'semibold'}, 'children': c_3}) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'quote-stat'])}, 'children': c_5}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid w-full grid-cols-2 gap-4 border-t border-border pt-6'}, 'children': c_6}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'center', 'Class': 'rounded bg-card inset-ring inset-ring-border p-8 text-center', 'Attrs': ui_attrs(['data-testid', 'quote-rating'])}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/quote-slot.html.j2 b/packages/jinja2/ui/blocks/quote-slot.html.j2
new file mode 100644
index 0000000..1182c24
--- /dev/null
+++ b/packages/jinja2/ui/blocks/quote-slot.html.j2
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-slot.json
+    One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in a box that can span grid rows.
+    Props (p): q, labels, kind, layout, className. -#}
+{%- set v_q = ui_def(p['q'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_kind = ui_def(p['kind'], 'card') -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set c_1 -%}
+  {{ ui_include('blocks/quote-card.html.j2', {'p': {'q': v_q, 'labels': v_labels, 'item': {'kind': v_kind, 'avatar': 'image', 'rating': 'show', 'mark': 'none'}, 'layout': v_layout}}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_def(p['className'], '')), 'Attrs': ui_attrs(['data-testid', 'quote'])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/quote-split.html.j2 b/packages/jinja2/ui/blocks/quote-split.html.j2
new file mode 100644
index 0000000..10c3722
--- /dev/null
+++ b/packages/jinja2/ui/blocks/quote-split.html.j2
@@ -0,0 +1,73 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-split.json
+    Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture, logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured quote beside a stack), mediaSide, tone.
+    Props (p): id, title, lead, badge, quotes, labels, extras, actions, layout, mediaSide, tone, empty, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_quotes = ui_def(p['quotes'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_extras = ui_def(p['extras'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'media') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_eq(ui_len(v_quotes), 0)) %}
+  {%- set c_1 -%}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'quote', 'title': v_empty}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}) }}
+{%- elif ui_t(ui_or([ui_eq(v_layout, 'compact'), ui_eq(v_layout, 'bento')])) %}
+  {%- set c_3 -%}
+    {%- if ui_t(ui_eq(v_layout, 'bento')) %}
+      {{ ui_include('blocks/quote-figures.html.j2', {'p': {'extras': v_extras}}) }}
+    {%- endif %}
+    {%- set c_2 -%}
+      {%- for v_q in ui_l(v_quotes) %}
+        {%- set v_i = loop.index0 -%}
+        {{ ui_include('blocks/quote-slot.html.j2', {'p': {'q': v_q, 'labels': v_labels, 'layout': ('single' if ui_t(ui_and([ui_eq(v_layout, 'bento'), ui_eq(v_i, 0)])) else 'grid'), 'className': ui_cnv([('lg:row-span-3' if ui_t(ui_and([ui_eq(v_layout, 'bento'), ui_eq(v_i, 0)])) else '')])}}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-1 gap-4 lg:grid-cols-2' if ui_t(ui_eq(v_layout, 'bento')) else 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'))}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_3}) }}
+{%- else %}
+  {%- set f_5 -%}
+    {%- if ui_t(ui_eq(v_layout, 'rating')) %}
+      {{ ui_include('blocks/quote-rating-panel.html.j2', {'p': {'extras': v_extras, 'labels': v_labels}}) }}
+    {%- else %}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+    {%- endif %}
+  {%- endset -%}
+  {%- set c_6 -%}
+    {%- if ui_t(ui_or([ui_eq(v_layout, 'media'), ui_eq(v_layout, 'logos'), ui_eq(v_layout, 'rating')])) %}
+      {%- for v_q in ui_l(v_quotes) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 1)) %}
+          {{ ui_include('blocks/quote-slot.html.j2', {'p': {'q': v_q, 'labels': v_labels, 'kind': ('card' if ui_t(ui_eq(v_layout, 'media')) else 'plain'), 'layout': 'single', 'className': ui_cnv([''])}}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_layout, 'logos')) %}
+      {{ ui_include('blocks/quote-logo-tiles.html.j2', {'p': {'extras': v_extras}}) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_layout, 'stack')) %}
+      {%- set c_4 -%}
+        {%- for v_q in ui_l(v_quotes) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_lt(v_i, 3)) %}
+            {{ ui_include('blocks/quote-slot.html.j2', {'p': {'q': v_q, 'labels': v_labels, 'layout': 'stack', 'className': ui_cnv([''])}}) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_4}) }}
+    {%- endif %}
+    {%- if ui_t(ui_or([ui_eq(v_layout, 'media'), ui_eq(v_layout, 'logos'), ui_eq(v_layout, 'rating')])) %}
+      {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_5}, 'children': c_6}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/range-field.html.j2 b/packages/jinja2/ui/blocks/range-field.html.j2
new file mode 100644
index 0000000..b544a59
--- /dev/null
+++ b/packages/jinja2/ui/blocks/range-field.html.j2
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/range-field.json
+    A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.
+    Props (p): type, from, to, fromLabel, toLabel, min, max, className. -#}
+{%- set v_type = ui_def(p['type'], none) -%}
+{%- set v_from = ui_def(p['from'], none) -%}
+{%- set v_to = ui_def(p['to'], none) -%}
+{%- set v_fromLabel = ui_def(p['fromLabel'], none) -%}
+{%- set v_toLabel = ui_def(p['toLabel'], none) -%}
+{%- set v_min = ui_def(p['min'], none) -%}
+{%- set v_max = ui_def(p['max'], none) -%}
+{%- set c_3 -%}
+  {%- if ui_t(ui_and([ui_eq(v_type, 'number'), ui_has(v_min), ui_has(v_max), ui_lt(v_min, v_max)])) %}
+    {{ ui_include('ui/range/range.html.j2', {'p': {'Min': ui_i(v_min), 'Max': ui_i(v_max), 'AriaLabel': ui_s(v_fromLabel), 'Value': ui_s((ui_str(v_min) if ui_t(ui_eq(v_from, '')) else v_from)), 'Attrs': ui_attrs(['data-testid', 'range-from'])}}) }}
+    {{ ui_include('ui/range/range.html.j2', {'p': {'Min': ui_i(v_min), 'Max': ui_i(v_max), 'AriaLabel': ui_s(v_toLabel), 'Value': ui_s((ui_str(v_max) if ui_t(ui_eq(v_to, '')) else v_to)), 'Attrs': ui_attrs(['data-testid', 'range-to'])}}) }}
+  {%- endif %}
+  {%- set c_2 -%}
+    {{ ui_include('ui/input/input.html.j2', {'p': {'Type': ui_s(v_type), 'Size': 'sm', 'AriaLabel': ui_s(v_fromLabel), 'Value': ui_s(v_from), 'Min': ui_s(ui_str(v_min)), 'Max': ui_s(ui_str(v_max))}}) }}
+    {%- set c_1 -%}
+      {{ ui_text('–') }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-muted-foreground'}, 'children': c_1}) }}
+    {{ ui_include('ui/input/input.html.j2', {'p': {'Type': ui_s(v_type), 'Size': 'sm', 'AriaLabel': ui_s(v_toLabel), 'Value': ui_s(v_to), 'Min': ui_s(ui_str(v_min)), 'Max': ui_s(ui_str(v_max))}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_2}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-2', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'range-field'])}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/rating.html.j2 b/packages/jinja2/ui/blocks/rating.html.j2
new file mode 100644
index 0000000..ad819a2
--- /dev/null
+++ b/packages/jinja2/ui/blocks/rating.html.j2
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/rating.json
+    One to five stars (a review's grade, the average of a product). The value is read as the label; the stars themselves are decoration.
+    Props (p): value, label, max, size, className. -#}
+{%- set v_value = ui_def(p['value'], none) -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_max = ui_def(p['max'], 5) -%}
+{%- set v_size = ui_def(p['size'], 16) -%}
+{%- set v_full = ui_round(ui_min([v_max, ui_max([0, v_value])])) -%}
+{%- set c_1 -%}
+  {%- for v_i in ui_l(ui_range(v_max)) %}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'star', 'Size': ui_i(v_size), 'Class': ui_s(('fill-foreground text-foreground' if ui_t(ui_lt(v_i, v_full)) else 'text-border'))}}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['inline-flex items-center gap-0', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'img', 'aria-label', v_label, 'data-slot', 'rating', 'data-value', v_full])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/recipes/avatar.variants.json b/packages/jinja2/ui/blocks/recipes/avatar.variants.json
new file mode 100644
index 0000000..54d4895
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/avatar.variants.json
@@ -0,0 +1,22 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.avatar",
+  "base": "relative inline-flex shrink-0 overflow-hidden bg-muted rounded-full",
+  "byKey": {
+    "size": {
+      "xs": "size-6",
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12",
+      "xl": "size-16"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/packages/jinja2/ui/blocks/recipes/badge-square.variants.json b/packages/jinja2/ui/blocks/recipes/badge-square.variants.json
new file mode 100644
index 0000000..b8b52c5
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/badge-square.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.badge-square",
+  "base": "inline-flex shrink-0 items-center justify-center bg-card text-xs font-medium whitespace-nowrap text-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-4 min-w-4 px-1",
+      "default": "h-5 px-2"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/packages/jinja2/ui/blocks/recipes/file-tree-item.variants.json b/packages/jinja2/ui/blocks/recipes/file-tree-item.variants.json
new file mode 100644
index 0000000..489ce86
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/file-tree-item.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.file-tree-item",
+  "base": "flex h-6 w-full items-center gap-4 text-xs font-bold text-muted-foreground data-[state=selected]:bg-muted",
+  "byKey": {
+    "kind": {
+      "folder": "",
+      "file": "px-8"
+    }
+  },
+  "defaults": {
+    "kind": "file"
+  },
+  "keys": [
+    "kind"
+  ]
+}
diff --git a/packages/jinja2/ui/blocks/recipes/icon-tab.variants.json b/packages/jinja2/ui/blocks/recipes/icon-tab.variants.json
new file mode 100644
index 0000000..f4b0990
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/icon-tab.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.icon-tab",
+  "base": "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground inset-ring inset-ring-transparent [&>svg]:size-4 rounded",
+  "byKey": {
+    "state": {
+      "default": "",
+      "active": "bg-card text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "state": "default"
+  },
+  "keys": [
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/jinja2/ui/blocks/recipes/logo-sidebar.variants.json b/packages/jinja2/ui/blocks/recipes/logo-sidebar.variants.json
new file mode 100644
index 0000000..8759a84
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/logo-sidebar.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.logo-sidebar",
+  "base": "flex h-8 items-center justify-between",
+  "byKey": {
+    "variant": {
+      "chat": "px-2",
+      "creator": "pr-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/packages/jinja2/ui/blocks/recipes/media-frame.variants.json b/packages/jinja2/ui/blocks/recipes/media-frame.variants.json
new file mode 100644
index 0000000..2d0b526
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/media-frame.variants.json
@@ -0,0 +1,22 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.media-frame",
+  "base": "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "ratio": {
+      "16/9": "aspect-video",
+      "4/3": "aspect-4/3",
+      "1/1": "aspect-square",
+      "3/4": "aspect-3/4",
+      "21/9": "aspect-21/9"
+    }
+  },
+  "defaults": {
+    "ratio": "16/9"
+  },
+  "keys": [
+    "ratio"
+  ],
+  "compound": []
+}
diff --git a/packages/jinja2/ui/blocks/recipes/nav-item-content.variants.json b/packages/jinja2/ui/blocks/recipes/nav-item-content.variants.json
new file mode 100644
index 0000000..9d4e03a
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/nav-item-content.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item-content",
+  "base": "flex h-8 min-w-0 flex-1 items-center justify-between px-4 py-2 text-xs font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "px-2",
+      "4": "px-2"
+    },
+    "state": {
+      "default": "",
+      "selected": "bg-background text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/jinja2/ui/blocks/recipes/nav-item.variants.json b/packages/jinja2/ui/blocks/recipes/nav-item.variants.json
new file mode 100644
index 0000000..c8eba12
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/nav-item.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item",
+  "base": "flex w-full items-center p-2 rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "pr-2 pl-12",
+      "4": "pr-2 pl-20"
+    },
+    "state": {
+      "default": "",
+      "selected": ""
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/jinja2/ui/blocks/recipes/section-column.variants.json b/packages/jinja2/ui/blocks/recipes/section-column.variants.json
new file mode 100644
index 0000000..b5637fc
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/section-column.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-column",
+  "base": "",
+  "defaults": {
+    "measure": "default"
+  },
+  "keys": [
+    "measure"
+  ],
+  "compound": [],
+  "byKey": {
+    "measure": {
+      "default": "",
+      "landing": "",
+      "fill": "",
+      "xs": "mx-auto w-full max-w-xs",
+      "sm": "mx-auto w-full max-w-sm",
+      "md": "mx-auto w-full max-w-md",
+      "lg": "mx-auto w-full max-w-lg",
+      "xl": "mx-auto w-full max-w-xl",
+      "2xl": "mx-auto w-full max-w-2xl",
+      "3xl": "mx-auto w-full max-w-3xl"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/blocks/recipes/section-frame.variants.json b/packages/jinja2/ui/blocks/recipes/section-frame.variants.json
new file mode 100644
index 0000000..d141c90
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/section-frame.variants.json
@@ -0,0 +1,34 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-frame",
+  "base": "w-full",
+  "byKey": {
+    "tone": {
+      "default": "",
+      "muted": "bg-muted",
+      "inverse": "bg-foreground text-background [&_.text-muted-foreground]:text-background/70"
+    },
+    "density": {
+      "roomy": "py-16",
+      "default": "py-10",
+      "compact": "py-6",
+      "flush": "py-0"
+    },
+    "align": {
+      "start": "",
+      "center": "text-center"
+    }
+  },
+  "defaults": {
+    "tone": "default",
+    "density": "default",
+    "align": "start"
+  },
+  "keys": [
+    "tone",
+    "density",
+    "align"
+  ],
+  "compound": []
+}
diff --git a/packages/jinja2/ui/blocks/recipes/section-head.variants.json b/packages/jinja2/ui/blocks/recipes/section-head.variants.json
new file mode 100644
index 0000000..ff1cc80
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/section-head.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.section-head",
+  "base": "flex items-center justify-between pr-4 pl-4",
+  "byKey": {
+    "size": {
+      "default": "h-8 py-2 text-xs font-semibold",
+      "lg": "h-12 py-2 text-sm font-bold"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ]
+}
diff --git a/packages/jinja2/ui/blocks/recipes/sidebar-panel.variants.json b/packages/jinja2/ui/blocks/recipes/sidebar-panel.variants.json
new file mode 100644
index 0000000..5a7bb9c
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/sidebar-panel.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.sidebar-panel",
+  "base": "flex shrink-0 flex-col",
+  "byKey": {
+    "variant": {
+      "chat": "w-68 gap-2 pt-6 pr-4 pb-6 pl-4",
+      "creator": "w-62 justify-between gap-4 p-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/packages/jinja2/ui/blocks/recipes/switcher-item.variants.json b/packages/jinja2/ui/blocks/recipes/switcher-item.variants.json
new file mode 100644
index 0000000..58d88d5
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/switcher-item.variants.json
@@ -0,0 +1,48 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher-item",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-6 gap-1 px-3 text-xs",
+      "default": "h-8 gap-2 px-4 text-sm",
+      "lg": "h-10 gap-2 px-5 text-sm"
+    },
+    "state": {
+      "default": "",
+      "active": "bg-background text-foreground inset-ring-border"
+    },
+    "layout": {
+      "text": "",
+      "icon": "[&>svg]:size-4"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "state": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "state",
+    "layout"
+  ],
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "w-6 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "w-8 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "w-10 px-0"
+    }
+  ]
+}
diff --git a/packages/jinja2/ui/blocks/recipes/switcher.variants.json b/packages/jinja2/ui/blocks/recipes/switcher.variants.json
new file mode 100644
index 0000000..d0ef662
--- /dev/null
+++ b/packages/jinja2/ui/blocks/recipes/switcher.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher",
+  "base": "inline-flex max-w-full items-center gap-1 overflow-x-auto bg-muted inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-8 p-1",
+      "default": "h-10 p-1",
+      "lg": "h-12 p-1"
+    },
+    "layout": {
+      "text": "",
+      "icon": "gap-0"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "layout"
+  ],
+  "compound": []
+}
diff --git a/packages/jinja2/ui/blocks/region.html.j2 b/packages/jinja2/ui/blocks/region.html.j2
new file mode 100644
index 0000000..da59586
--- /dev/null
+++ b/packages/jinja2/ui/blocks/region.html.j2
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/region.json
+    A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never nested, so a nested landmark is its own component.
+    Props (p): tag, landmarkLabel, className; children: markup. -#}
+{%- set v_tag = ui_def(p['tag'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': ui_s(v_tag), 'Class': ui_s(ui_def(p['className'], '')), 'Attrs': ui_attrs(['aria-label', v_landmarkLabel])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/review-list.html.j2 b/packages/jinja2/ui/blocks/review-list.html.j2
new file mode 100644
index 0000000..caadc4f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/review-list.html.j2
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/review-list.json
+    Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid), columns, item (card, plain), avatar (none, image), tone, density.
+    Props (p): id, title, reviews, labels, layout, item, avatar, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_reviews = ui_def(p['reviews'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'list') -%}
+{%- set v_item = ui_def(p['item'], 'card') -%}
+{%- set v_avatar = ui_def(p['avatar'], 'none') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_9 -%}
+  {%- if ui_t(ui_eq(ui_len(v_reviews), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'message-square-quote', 'title': ui_get(v_labels, ['empty'])}}) }}
+  {%- endif %}
+  {%- set c_8 -%}
+    {%- for v_r in ui_l(v_reviews) %}
+      {%- set c_7 -%}
+        {{ ui_include('blocks/rating.html.j2', {'p': {'value': ui_get(v_r, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['ratingLabel']), [ui_get(v_r, ['rating'])])}}) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_r, ['title'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_r, ['text'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+        {%- set c_6 -%}
+          {%- if ui_t(ui_eq(v_avatar, 'image')) %}
+            {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_r, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}) }}
+          {%- endif %}
+          {%- set c_5 -%}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_r, ['author'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_3}) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_r, ['date'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'mt-auto'}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('blocks/article-block.html.j2', {'p': {'className': ui_cnv([ui_cnv(['flex h-full flex-col gap-4', ('rounded bg-card p-6 inset-ring inset-ring-border' if ui_t(ui_eq(v_item, 'card')) else 'border-b border-border pb-4')])]), 'testid': 'item'}, 'children': c_7}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1-3' if ui_t(ui_eq(v_layout, 'grid')) else '1')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_8}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': ('2xl' if ui_t(ui_eq(v_layout, 'list')) else 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/search-field.html.j2 b/packages/jinja2/ui/blocks/search-field.html.j2
new file mode 100644
index 0000000..0a466b1
--- /dev/null
+++ b/packages/jinja2/ui/blocks/search-field.html.j2
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/search-field.json
+    A search input with a magnifier. `value` fires on every keystroke with the new text.
+    Props (p): value, placeholder, label, className. -#}
+{%- set v_value = ui_def(p['value'], none) -%}
+{%- set v_placeholder = ui_def(p['placeholder'], none) -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set c_1 -%}
+  {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'search', 'Size': 16, 'Class': 'pointer-events-none absolute top-2 left-3 text-muted-foreground'}}) }}
+  {{ ui_include('ui/input/input.html.j2', {'p': {'Size': 'sm', 'Type': 'search', 'Placeholder': ui_s(v_placeholder), 'AriaLabel': ui_s(v_label), 'Class': 'pr-3 pl-10', 'Value': ui_s(v_value)}}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['relative min-w-44 flex-1', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'search'])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/search-palette.html.j2 b/packages/jinja2/ui/blocks/search-palette.html.j2
new file mode 100644
index 0000000..243eca5
--- /dev/null
+++ b/packages/jinja2/ui/blocks/search-palette.html.j2
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/search-palette.json
+    A search field with a search glyph and the keys that open it.
+    Props (p): label, shortcut. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_shortcut = ui_def(p['shortcut'], none) -%}
+{%- set c_2 -%}
+  {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'search', 'Size': 16, 'Class': 'pointer-events-none absolute top-2 left-3 text-muted-foreground'}}) }}
+  {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'search', 'Size': 'sm', 'Placeholder': ui_s(v_label), 'AriaLabel': ui_s(v_label), 'Class': 'pr-12 pl-10'}}) }}
+  {%- set c_1 -%}
+    {{ ui_text(v_shortcut) }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring inset-ring-border'}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'relative w-full max-w-sm', 'Attrs': ui_attrs(['data-testid', 'palette'])}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/section-box.html.j2 b/packages/jinja2/ui/blocks/section-box.html.j2
new file mode 100644
index 0000000..6b1ab15
--- /dev/null
+++ b/packages/jinja2/ui/blocks/section-box.html.j2
@@ -0,0 +1,13 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-box.json
+    The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper).
+    Props (p): boxed; children: markup. -#}
+{%- set v_boxed = ui_def(p['boxed'], false) -%}
+{%- if ui_t(v_boxed) %}
+  {%- set c_1 -%}
+    {{ ui_def(children, '')|safe }}
+  {%- endset -%}
+  {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'muted'}, 'children': c_1}) }}
+{%- else %}
+  {{ ui_def(children, '')|safe }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/section-column.html.j2 b/packages/jinja2/ui/blocks/section-column.html.j2
new file mode 100644
index 0000000..1d1db37
--- /dev/null
+++ b/packages/jinja2/ui/blocks/section-column.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-column.json
+    The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure (xs to 3xl) holds the column at that width, centred.
+    Props (p): measure; children: markup. -#}
+{%- set v_measure = ui_def(p['measure'], 'default') -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch', 'Class': ui_s(ui_recipe('blocks/recipes/section-column.variants.json', {'measure': v_measure}))}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/section-frame.html.j2 b/packages/jinja2/ui/blocks/section-frame.html.j2
new file mode 100644
index 0000000..e0c243a
--- /dev/null
+++ b/packages/jinja2/ui/blocks/section-frame.html.j2
@@ -0,0 +1,63 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-frame.json
+    A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts the body in a card. Axes: layout, media side, tone, density, align.
+    Props (p): id, title, lead, heading, action, layout, media, boxed, tone, density, align, measure, landmarkLabel, className, aside (slot); children: markup. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], '') -%}
+{%- set v_lead = ui_def(p['lead'], none) -%}
+{%- set v_heading = ui_def(p['heading'], none) -%}
+{%- set v_action = ui_def(p['action'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'stack') -%}
+{%- set v_media = ui_def(p['media'], none) -%}
+{%- set v_boxed = ui_def(p['boxed'], false) -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_align = ui_def(p['align'], 'start') -%}
+{%- set v_measure = ui_def(p['measure'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_titleId = ui_add(v_id, '-title') -%}
+{%- set v_sectionTone = ('default' if ui_t(v_boxed) else v_tone) -%}
+{%- set v_center = ui_eq(v_align, 'center') -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- set c_7 -%}
+      {%- if ui_t(ui_eq(v_layout, 'split')) %}
+        {%- set c_4 -%}
+          {%- if ui_t(ui_and([ui_get(v_media, ['show']), ui_eq(ui_get(v_media, ['side']), 'start')])) %}
+            {%- set c_1 -%}
+              {{ ui_def(p['aside'], '')|safe }}
+            {%- endset -%}
+            {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'w-full', 'Attrs': ui_attrs(['data-slot', 'media'])}, 'children': c_1}) }}
+          {%- endif %}
+          {%- set c_2 -%}
+            {{ ui_include('blocks/section-header.html.j2', {'p': {'titleId': v_titleId, 'title': v_title, 'heading': v_heading, 'action': v_action, 'lead': v_lead, 'center': v_center}}) }}
+            {{ ui_def(children, '')|safe }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_2}) }}
+          {%- if ui_t(ui_and([ui_get(v_media, ['show']), not (ui_eq(ui_get(v_media, ['side']), 'start'))])) %}
+            {%- set c_3 -%}
+              {{ ui_def(p['aside'], '')|safe }}
+            {%- endset -%}
+            {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'w-full', 'Attrs': ui_attrs(['data-slot', 'media'])}, 'children': c_3}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-2', 'Class': ui_s(ui_cnv(['gap-8', ('items-start' if ui_t(ui_eq(ui_get(v_media, ['align']), 'start')) else 'items-center')]))}, 'children': c_4}) }}
+      {%- else %}
+        {%- set c_6 -%}
+          {{ ui_include('blocks/section-header.html.j2', {'p': {'titleId': v_titleId, 'title': v_title, 'heading': v_heading, 'action': v_action, 'lead': v_lead, 'center': v_center}}) }}
+          {{ ui_def(children, '')|safe }}
+          {%- if ui_t(ui_get(v_media, ['show'])) %}
+            {%- set c_5 -%}
+              {{ ui_def(p['aside'], '')|safe }}
+            {%- endset -%}
+            {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'w-full', 'Attrs': ui_attrs(['data-slot', 'media'])}, 'children': c_5}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('blocks/section-column.html.j2', {'p': {'measure': v_measure}, 'children': c_6}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('blocks/section-box.html.j2', {'p': {'boxed': v_boxed}, 'children': c_7}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s((ui_cnv(['mx-auto w-full px-4', ui_preset('blocks/presets/defaults.json', ['section', 'landing'])]) if ui_t(ui_eq(v_measure, 'landing')) else ('w-full' if ui_t(ui_eq(v_measure, 'fill')) else 'mx-auto w-full max-w-6xl px-4'))), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_8}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/section-frame.variants.json', {'tone': v_sectionTone, 'density': v_density, 'align': v_align}), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else (v_titleId if ui_t(not (ui_eq(v_title, ''))) else none)), 'aria-label', ui_coalesce([v_landmarkLabel, (v_id if ui_t(ui_eq(v_title, '')) else none)]), 'data-testid', 'section', 'data-tone', v_tone, 'data-density', v_density])}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/section-head.html.j2 b/packages/jinja2/ui/blocks/section-head.html.j2
new file mode 100644
index 0000000..c4bc8f4
--- /dev/null
+++ b/packages/jinja2/ui/blocks/section-head.html.j2
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-head.json
+    A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button (aria-expanded, the toggle event).
+    Props (p): size, expanded, controls, className, right (slot); children: markup. -#}
+{%- set v_size = ui_def(p['size'], 'default') -%}
+{%- set v_expanded = ui_def(p['expanded'], none) -%}
+{%- set v_controls = ui_def(p['controls'], none) -%}
+{%- set v_cls = ui_cnv([ui_recipe('blocks/recipes/section-head.variants.json', {'size': v_size}), 'rounded text-foreground in-data-[nav=collapsed]:hidden', ui_def(p['className'], '')]) -%}
+{%- if ui_t(ui_has(v_expanded)) %}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_def(children, '')|safe }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Attrs': ui_attrs(['data-slot', 'section-head-title'])}, 'children': c_1}) }}
+    {%- if ui_t((ui_def(p['right'], none) is not none)) %}
+      {%- set c_2 -%}
+        {{ ui_def(p['right'], '')|safe }}
+      {%- endset -%}
+      {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex items-center gap-2', 'Attrs': ui_attrs(['data-slot', 'section-head-right'])}, 'children': c_2}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/button-plain/button-plain.html.j2', {'p': {'Type': 'button', 'Class': ui_s(ui_cnv([v_cls, 'w-full text-left'])), 'Attrs': ui_attrs(['aria-expanded', v_expanded, 'aria-controls', v_controls, 'data-slot', 'section-head', 'data-expanded', v_expanded])}, 'children': c_3}) }}
+{%- else %}
+  {%- set c_6 -%}
+    {%- set c_4 -%}
+      {{ ui_def(children, '')|safe }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Attrs': ui_attrs(['data-slot', 'section-head-title'])}, 'children': c_4}) }}
+    {%- if ui_t((ui_def(p['right'], none) is not none)) %}
+      {%- set c_5 -%}
+        {{ ui_def(p['right'], '')|safe }}
+      {%- endset -%}
+      {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex items-center gap-2', 'Attrs': ui_attrs(['data-slot', 'section-head-right'])}, 'children': c_5}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(v_cls), 'Attrs': ui_attrs(['data-slot', 'section-head'])}, 'children': c_6}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/section-header.html.j2 b/packages/jinja2/ui/blocks/section-header.html.j2
new file mode 100644
index 0000000..50a73a5
--- /dev/null
+++ b/packages/jinja2/ui/blocks/section-header.html.j2
@@ -0,0 +1,53 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-header.json
+    The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an optional lead. No wrapper: its parts are children of the section stack.
+    Props (p): titleId, title, heading, action, lead, center. -#}
+{%- set v_titleId = ui_def(p['titleId'], none) -%}
+{%- set v_title = ui_def(p['title'], '') -%}
+{%- set v_heading = ui_def(p['heading'], none) -%}
+{%- set v_action = ui_def(p['action'], none) -%}
+{%- set v_lead = ui_def(p['lead'], none) -%}
+{%- set v_center = ui_def(p['center'], false) -%}
+{%- set v_level = ui_coalesce([ui_get(v_heading, ['level']), 2]) -%}
+{%- set v_scale = ui_coalesce([ui_get(v_heading, ['scale']), 'default']) -%}
+{%- set v_hasAction = ui_and([ui_get(v_action, ['label']), ui_get(v_action, ['href'])]) -%}
+{%- if ui_t(ui_get(v_heading, ['badge'])) %}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_heading, ['badge'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'outline', 'Size': 'lg', 'Class': ui_s(('mx-auto w-fit' if ui_t(v_center) else 'w-fit')), 'Attrs': ui_attrs(['data-testid', 'section-badge'])}, 'children': c_1}) }}
+{%- endif %}
+{%- if ui_t(ui_and([not (ui_eq(v_title, '')), v_hasAction])) %}
+  {%- set c_4 -%}
+    {%- set c_2 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(v_level), 'Size': ui_s(('5xl' if ui_t(ui_eq(v_level, 1)) else 'xl')), 'Weight': 'semibold', 'Class': ui_s(('text-6xl tracking-tight md:text-8xl' if ui_t(ui_eq(v_scale, 'display')) else ('leading-tight' if ui_t(ui_eq(v_level, 1)) else 'leading-7'))), 'Attrs': ui_attrs(['id', v_titleId])}, 'children': c_2}) }}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_action, ['label'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_get(v_action, ['href'])), 'Variant': 'default', 'Class': ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'tiny']), 'shrink-0 font-medium leading-5'])), 'Attrs': ui_attrs(['data-testid', 'section-action'])}, 'children': c_3}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'w-full flex-wrap'}, 'children': c_4}) }}
+{%- endif %}
+{%- if ui_t(ui_and([not (ui_eq(v_title, '')), not (ui_t(v_hasAction))])) %}
+  {%- set c_5 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(v_level), 'Size': ui_s(('5xl' if ui_t(ui_eq(v_level, 1)) else 'xl')), 'Weight': 'semibold', 'Class': ui_s(('text-6xl tracking-tight md:text-8xl' if ui_t(ui_eq(v_scale, 'display')) else ('leading-tight' if ui_t(ui_eq(v_level, 1)) else 'leading-7'))), 'Attrs': ui_attrs(['id', v_titleId])}, 'children': c_5}) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_title, ''), v_hasAction])) %}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {{ ui_text(ui_get(v_action, ['label'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_get(v_action, ['href'])), 'Variant': 'default', 'Class': ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'tiny']), 'shrink-0 font-medium leading-5'])), 'Attrs': ui_attrs(['data-testid', 'section-action'])}, 'children': c_6}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'end', 'Class': 'w-full'}, 'children': c_7}) }}
+{%- endif %}
+{%- if ui_t(v_lead) %}
+  {%- set c_8 -%}
+    {{ ui_text(v_lead) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Class': ui_s(ui_cnv(['max-w-2xl text-muted-foreground', ('mx-auto' if ui_t(v_center) else '')]))}, 'children': c_8}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/shell-content.html.j2 b/packages/jinja2/ui/blocks/shell-content.html.j2
new file mode 100644
index 0000000..07c3db3
--- /dev/null
+++ b/packages/jinja2/ui/blocks/shell-content.html.j2
@@ -0,0 +1,89 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-content.json
+    The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one), list (a toolbar over a card of rows). The cards are hidden from assistive technology.
+    Props (p): title, titleId, level, content. -#}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_titleId = ui_def(p['titleId'], none) -%}
+{%- set v_level = ui_def(p['level'], 2) -%}
+{%- set v_content = ui_def(p['content'], 'grid') -%}
+{%- set c_16 -%}
+  {%- set c_2 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(v_level), 'Size': '2xl', 'Weight': 'semibold', 'Attrs': ui_attrs(['id', v_titleId])}, 'children': c_1}) }}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'h-10 w-32 rounded bg-muted', 'Attrs': ui_attrs(['aria-hidden', 'true'])}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_2}) }}
+  {%- set c_15 -%}
+    {%- if ui_t(ui_eq(v_content, 'grid')) %}
+      {%- set c_7 -%}
+        {%- set c_3 -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}) }}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_3}) }}
+        {%- set c_4 -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}) }}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_4}) }}
+        {%- set c_5 -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}) }}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_5}) }}
+        {%- set c_6 -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}) }}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-4 lg:grid-cols-4'}, 'children': c_7}) }}
+      {%- set c_8 -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'min-h-64 flex-1'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_8}) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_content, 'split')) %}
+      {%- set c_11 -%}
+        {%- set c_9 -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}) }}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-64 lg:col-span-2'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_9}) }}
+        {%- set c_10 -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}) }}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-64'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_10}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 gap-4 lg:grid-cols-3'}, 'children': c_11}) }}
+      {%- set c_12 -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'min-h-40 flex-1'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_12}) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_content, 'list')) %}
+      {%- set c_13 -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-10 w-64']))}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-10 w-24']))}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'ml-auto h-10 w-32']))}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_13}) }}
+      {%- set c_14 -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}) }}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'flex-1'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_14}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex flex-1 flex-col gap-4', 'Attrs': ui_attrs(['aria-hidden', 'true', 'data-testid', 'panels'])}, 'children': c_15}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch', 'Class': 'flex-1 p-6', 'Attrs': ui_attrs(['data-testid', 'content'])}, 'children': c_16}) }}
diff --git a/packages/jinja2/ui/blocks/shell-footer.html.j2 b/packages/jinja2/ui/blocks/shell-footer.html.j2
new file mode 100644
index 0000000..3e723ef
--- /dev/null
+++ b/packages/jinja2/ui/blocks/shell-footer.html.j2
@@ -0,0 +1,31 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-footer.json
+    The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the whole shell (full).
+    Props (p): nav, place, landmarkLabel. -#}
+{%- set v_nav = ui_def(p['nav'], none) -%}
+{%- set v_place = ui_def(p['place'], 'full') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_6 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_nav, ['copyright'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_1}) }}
+  {%- if ui_t(ui_gt(ui_len(ui_get(v_nav, ['footer'])), 0)) %}
+    {%- set c_5 -%}
+      {%- set c_4 -%}
+        {%- for v_f in ui_l(ui_get(v_nav, ['footer'])) %}
+          {%- set c_3 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_f, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_f, ['href']), 'className': ui_cnv(['text-xs text-muted-foreground']), 'variant': 'muted', 'size': 'sm'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_3}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none items-center gap-4 p-0'}, 'children': c_4}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_nav, ['footerLabel']), v_landmarkLabel])) if ui_t(v_landmarkLabel) else ui_get(v_nav, ['footerLabel']))}, 'children': c_5}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'footer', 'Class': ui_s(ui_cnv(['flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4', ('bg-card' if ui_t(ui_eq(v_place, 'full')) else '')])), 'Attrs': ui_attrs(['data-testid', 'footer', 'data-place', v_place, 'aria-label', v_landmarkLabel])}, 'children': c_6}) }}
diff --git a/packages/jinja2/ui/blocks/shell-sidebar.html.j2 b/packages/jinja2/ui/blocks/shell-sidebar.html.j2
new file mode 100644
index 0000000..d735e8b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/shell-sidebar.html.j2
@@ -0,0 +1,81 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-sidebar.json
+    The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read), collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a panel of the current section's links). side puts it at the start or the end.
+    Props (p): nav, mode, side, brand, landmarkLabel. -#}
+{%- set v_nav = ui_def(p['nav'], none) -%}
+{%- set v_mode = ui_def(p['mode'], 'wide') -%}
+{%- set v_side = ui_def(p['side'], 'start') -%}
+{%- set v_brand = ui_def(p['brand'], 'show') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set v_named = ui_eq(v_mode, 'wide') -%}
+{%- set c_17 -%}
+  {%- set c_9 -%}
+    {%- if ui_t(ui_eq(v_brand, 'show')) %}
+      {%- set c_2 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'layers', 'Size': 24}}) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_nav, ['brand'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'bold', 'Class': ui_s(('' if ui_t(v_named) else 'sr-only'))}, 'children': c_1}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'shrink-0', 'Attrs': ui_attrs(['data-testid', 'brand'])}, 'children': c_2}) }}
+    {%- endif %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_nav, ['links'])), 0)) %}
+      {%- set c_7 -%}
+        {%- set c_6 -%}
+          {%- for v_l in ui_l(ui_get(v_nav, ['links'])) %}
+            {%- set c_5 -%}
+              {%- set c_4 -%}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 16}}) }}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_get(v_l, ['name'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(('' if ui_t(v_named) else 'sr-only'))}, 'children': c_3}) }}
+              {%- endset -%}
+              {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv([ui_cnv(['flex items-center gap-4 rounded py-2 text-sm', ('px-4' if ui_t(v_named) else 'justify-center px-2'), ('bg-muted font-medium' if ui_t(ui_eq(ui_get(v_l, ['id']), ui_get(v_nav, ['current']))) else '')])]), 'current': ui_eq(ui_get(v_l, ['id']), ui_get(v_nav, ['current'])), 'size': 'sm', 'testid': 'item'}, 'children': c_4}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_5}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_nav, ['label']), v_landmarkLabel])) if ui_t(v_landmarkLabel) else ui_get(v_nav, ['label'])), 'className': ui_cnv(['flex-1'])}, 'children': c_7}) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_mode, 'collapsed')) %}
+      {%- set c_8 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'panel-left', 'Size': 20}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/button-plain/button-plain.html.j2', {'p': {'Type': 'button', 'Class': 'inline-flex size-10 items-center justify-center rounded text-muted-foreground', 'Attrs': ui_attrs(['aria-label', ui_get(v_nav, ['expand']), 'aria-expanded', ('true' if ui_t(ui_eq(v_mode, 'wide')) else 'false'), 'data-testid', 'toggle'])}, 'children': c_8}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-6 py-4', ('w-64 px-4' if ui_t(v_named) else 'w-16 items-center px-2')]))}, 'children': c_9}) }}
+  {%- if ui_t(ui_and([ui_eq(v_mode, 'twolevel'), ui_gt(ui_len(ui_get(v_nav, ['sub'])), 0)])) %}
+    {%- set c_16 -%}
+      {%- set c_10 -%}
+        {{ ui_text(ui_get(v_nav, ['subTitle'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'px-4'}, 'children': c_10}) }}
+      {%- set c_15 -%}
+        {%- set c_14 -%}
+          {%- for v_s in ui_l(ui_get(v_nav, ['sub'])) %}
+            {%- set c_13 -%}
+              {%- set c_12 -%}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_s, ['icon'])), 'Size': 16}}) }}
+                {%- set c_11 -%}
+                  {{ ui_text(ui_get(v_s, ['name'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(('' if ui_t(true) else 'sr-only'))}, 'children': c_11}) }}
+              {%- endset -%}
+              {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_s, ['href']), 'className': ui_cnv([ui_cnv(['flex items-center gap-4 rounded py-2 text-sm', ('px-4' if ui_t(true) else 'justify-center px-2'), ('bg-muted font-medium' if ui_t(ui_eq(ui_get(v_s, ['id']), ui_get(v_nav, ['subCurrent']))) else '')])]), 'current': ui_eq(ui_get(v_s, ['id']), ui_get(v_nav, ['subCurrent'])), 'size': 'sm', 'testid': 'item'}, 'children': c_12}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_13}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_14}) }}
+      {%- endset -%}
+      {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_nav, ['subTitle']), v_landmarkLabel])) if ui_t(v_landmarkLabel) else ui_get(v_nav, ['subTitle']))}, 'children': c_15}) }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex w-56 flex-col gap-4 px-4 py-6', ('border-r border-border' if ui_t(ui_eq(v_side, 'end')) else 'border-l border-border')])), 'Attrs': ui_attrs(['data-testid', 'subnav'])}, 'children': c_16}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'aside', 'Class': ui_s(ui_cnv(['flex shrink-0 bg-card', ('flex-row-reverse border-l border-border' if ui_t(ui_eq(v_side, 'end')) else 'border-r border-border')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, ui_get(v_nav, ['label'])]), 'data-testid', 'sidebar', 'data-mode', v_mode])}, 'children': c_17}) }}
diff --git a/packages/jinja2/ui/blocks/shell-topbar.html.j2 b/packages/jinja2/ui/blocks/shell-topbar.html.j2
new file mode 100644
index 0000000..2e9e088
--- /dev/null
+++ b/packages/jinja2/ui/blocks/shell-topbar.html.j2
@@ -0,0 +1,58 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-topbar.json
+    The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar), an optional search field, and the signed-in person.
+    Props (p): nav, brand, links, search, landmarkLabel. -#}
+{%- set v_nav = ui_def(p['nav'], none) -%}
+{%- set v_brand = ui_def(p['brand'], 'show') -%}
+{%- set v_links = ui_def(p['links'], 'hide') -%}
+{%- set v_search = ui_def(p['search'], 'show') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_10 -%}
+  {%- if ui_t(ui_eq(v_brand, 'show')) %}
+    {%- set c_2 -%}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'layers', 'Size': 24}}) }}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_nav, ['brand'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'bold', 'Class': ui_s(('' if ui_t(true) else 'sr-only'))}, 'children': c_1}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'shrink-0', 'Attrs': ui_attrs(['data-testid', 'brand'])}, 'children': c_2}) }}
+  {%- endif %}
+  {%- if ui_t(ui_and([ui_eq(v_links, 'show'), ui_gt(ui_len(ui_get(v_nav, ['links'])), 0)])) %}
+    {%- set c_7 -%}
+      {%- set c_6 -%}
+        {%- for v_l in ui_l(ui_get(v_nav, ['links'])) %}
+          {%- set c_5 -%}
+            {%- set c_4 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 16}}) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_l, ['name'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(('' if ui_t(true) else 'sr-only'))}, 'children': c_3}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv([ui_cnv(['flex items-center gap-4 rounded py-2 text-sm', ('px-4' if ui_t(true) else 'justify-center px-2'), ('bg-muted font-medium' if ui_t(ui_eq(ui_get(v_l, ['id']), ui_get(v_nav, ['current']))) else '')])]), 'current': ui_eq(ui_get(v_l, ['id']), ui_get(v_nav, ['current'])), 'size': 'sm', 'testid': 'item'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_5}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none items-center gap-2 p-0'}, 'children': c_6}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_nav, ['label']), v_landmarkLabel])) if ui_t(v_landmarkLabel) else ui_get(v_nav, ['label'])), 'className': ui_cnv(['hidden lg:block'])}, 'children': c_7}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_search, 'show')) %}
+    {%- if ui_t(ui_eq(v_links, 'show')) %}
+      {%- set c_8 -%}
+        {{ ui_include('blocks/search-palette.html.j2', {'p': {'label': ui_get(v_nav, ['search']), 'shortcut': ui_get(v_nav, ['shortcut'])}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'ml-auto hidden w-64 shrink-0 xl:block'}, 'children': c_8}) }}
+    {%- else %}
+      {{ ui_include('blocks/search-palette.html.j2', {'p': {'label': ui_get(v_nav, ['search']), 'shortcut': ui_get(v_nav, ['shortcut'])}}) }}
+    {%- endif %}
+  {%- endif %}
+  {%- set c_9 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'bell', 'Size': 20, 'Class': 'text-muted-foreground'}}) }}
+    {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_nav, ['userName']), 'ratio': '1/1', 'className': ui_cnv(['size-8 shrink-0 rounded-full'])}}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': ui_s(('shrink-0' if ui_t(ui_and([ui_eq(v_links, 'show'), ui_eq(v_search, 'show')])) else 'ml-auto shrink-0')), 'Attrs': ui_attrs(['data-testid', 'user'])}, 'children': c_9}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'header', 'Class': 'flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6', 'Attrs': ui_attrs(['data-testid', 'topbar', 'aria-label', v_landmarkLabel])}, 'children': c_10}) }}
diff --git a/packages/jinja2/ui/blocks/shopping-cart.html.j2 b/packages/jinja2/ui/blocks/shopping-cart.html.j2
new file mode 100644
index 0000000..54b698b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/shopping-cart.html.j2
@@ -0,0 +1,75 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shopping-cart.json
+    The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.
+    Props (p): id, title, lines, rows, promos, labels, totals, actions, layout, promo, progress, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lines = ui_def(p['lines'], none) -%}
+{%- set v_rows = ui_def(p['rows'], none) -%}
+{%- set v_promos = ui_def(p['promos'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_totals = ui_def(p['totals'], none) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'split') -%}
+{%- set v_promo = ui_def(p['promo'], 'show') -%}
+{%- set v_progress = ui_def(p['progress'], 'show') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_14 -%}
+  {%- set c_13 -%}
+    {%- set c_11 -%}
+      {%- if ui_t(ui_eq(ui_len(v_lines), 0)) %}
+        {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'shopping-cart', 'title': ui_get(v_actions, ['empty'])}}) }}
+      {%- endif %}
+      {%- for v_line in ui_l(v_lines) %}
+        {%- set c_7 -%}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['size-20 shrink-0'])}}) }}
+          {%- set c_4 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_line, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_line, ['variant'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_money(ui_get(v_line, ['price']), ui_get(v_line, ['currency']))) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm'}, 'children': c_3}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'min-w-40 flex-1'}, 'children': c_4}) }}
+          {{ ui_include('blocks/number-field.html.j2', {'p': {'value': ui_str(ui_get(v_line, ['qty'])), 'name': ui_tpl('{0}-qty-{1}', [v_id, ui_get(v_line, ['id'])]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}) }}
+          {%- set c_5 -%}
+            {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'bold', 'Class': 'w-24 text-right'}, 'children': c_5}) }}
+          {%- set c_6 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'trash', 'Size': 16}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['remove'])), 'Attrs': ui_attrs(['data-testid', 'remove'])}, 'children': c_6}) }}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'rounded bg-card inset-ring inset-ring-border flex-wrap p-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_7}) }}
+      {%- endfor %}
+      {%- set c_10 -%}
+        {%- set c_8 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'arrow-left', 'Size': 16}}) }}
+          {{ ui_text(ui_get(v_actions, ['back'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default'}, 'children': c_8}) }}
+        {%- set c_9 -%}
+          {{ ui_text(ui_get(v_actions, ['clear'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'default'}, 'children': c_9}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_10}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(('lg:col-span-2' if ui_t(ui_eq(v_layout, 'split')) else '')), 'Attrs': ui_attrs(['data-testid', 'lines'])}, 'children': c_11}) }}
+    {%- set c_12 -%}
+      {{ ui_include('blocks/cart-summary-card.html.j2', {'p': {'field': ui_tpl('{0}-promo', [v_id]), 'lines': v_lines, 'rows': v_rows, 'promos': v_promos, 'labels': v_totals, 'promo': v_promo, 'progress': v_progress}}) }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('lg:sticky lg:top-8' if ui_t(ui_eq(v_layout, 'split')) else '')), 'Attrs': ui_attrs(['data-testid', 'aside'])}, 'children': c_12}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-1 items-start gap-8 lg:grid-cols-3' if ui_t(ui_eq(v_layout, 'split')) else 'grid grid-cols-1 gap-8'))}, 'children': c_13}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_14}) }}
diff --git a/packages/jinja2/ui/blocks/sidebar-nav.html.j2 b/packages/jinja2/ui/blocks/sidebar-nav.html.j2
new file mode 100644
index 0000000..5699c61
--- /dev/null
+++ b/packages/jinja2/ui/blocks/sidebar-nav.html.j2
@@ -0,0 +1,63 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/sidebar-nav.json
+    A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full: icon and name, compact: icons only with the name hidden), user (show, hide), density.
+    Props (p): label, brand, links, current, userName, userEmail, width, user, density, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_brand = ui_def(p['brand'], none) -%}
+{%- set v_links = ui_def(p['links'], none) -%}
+{%- set v_current = ui_def(p['current'], '') -%}
+{%- set v_userName = ui_def(p['userName'], none) -%}
+{%- set v_userEmail = ui_def(p['userEmail'], none) -%}
+{%- set v_width = ui_def(p['width'], 'full') -%}
+{%- set v_user = ui_def(p['user'], 'show') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_12 -%}
+  {%- set c_2 -%}
+    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'layers', 'Size': 24}}) }}
+    {%- set c_1 -%}
+      {{ ui_text(v_brand) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'bold', 'Class': ui_s(('sr-only' if ui_t(ui_eq(v_width, 'compact')) else ''))}, 'children': c_1}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_2}) }}
+  {%- if ui_t(ui_gt(ui_len(v_links), 0)) %}
+    {%- set c_7 -%}
+      {%- set c_6 -%}
+        {%- for v_l in ui_l(v_links) %}
+          {%- set c_5 -%}
+            {%- set c_4 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 16}}) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_l, ['name'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(('sr-only' if ui_t(ui_eq(v_width, 'compact')) else ''))}, 'children': c_3}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv([ui_cnv(['flex items-center gap-4 rounded px-4 text-sm', 'py-2', ('bg-muted font-semibold' if ui_t(ui_eq(ui_get(v_l, ['id']), v_current)) else '')])]), 'current': ui_eq(ui_get(v_l, ['id']), v_current), 'testid': 'item'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {}, 'children': c_5}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/list/list.html.j2', {'p': {'Class': ui_s(ui_cnv(['m-0 flex list-none flex-col p-0', ('gap-0' if ui_t(ui_eq(v_density, 'compact')) else 'gap-2')])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) if ui_t(v_landmarkLabel) else v_label), 'className': ui_cnv(['flex-1'])}, 'children': c_7}) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_user, 'show')) %}
+    {%- set c_11 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_userName, 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}) }}
+      {%- set c_10 -%}
+        {%- set c_8 -%}
+          {{ ui_text(v_userName) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_8}) }}
+        {%- set c_9 -%}
+          {{ ui_text(v_userEmail) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_9}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': ui_s(('sr-only' if ui_t(ui_eq(v_width, 'compact')) else 'min-w-0'))}, 'children': c_10}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'border-t border-border pt-4', 'Attrs': ui_attrs(['data-testid', 'user'])}, 'children': c_11}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'aside', 'Class': ui_s(ui_cnv(['flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border', ('w-20 items-center' if ui_t(ui_eq(v_width, 'compact')) else 'w-64')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_brand]), 'data-testid', 'sidebar', 'data-width', v_width])}, 'children': c_12}) }}
diff --git a/packages/jinja2/ui/blocks/sidebar-panel.html.j2 b/packages/jinja2/ui/blocks/sidebar-panel.html.j2
new file mode 100644
index 0000000..3efee78
--- /dev/null
+++ b/packages/jinja2/ui/blocks/sidebar-panel.html.j2
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/sidebar-panel.json
+    The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer.
+    Props (p): variant, landmarkLabel, className; children: markup. -#}
+{%- set v_variant = ui_def(p['variant'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'aside', 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/sidebar-panel.variants.json', {'variant': v_variant}), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'sidebar-panel', 'data-variant', ui_coalesce([v_variant, 'chat']), 'aria-label', v_landmarkLabel])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/signup-wizard.html.j2 b/packages/jinja2/ui/blocks/signup-wizard.html.j2
new file mode 100644
index 0000000..a778be0
--- /dev/null
+++ b/packages/jinja2/ui/blocks/signup-wizard.html.j2
@@ -0,0 +1,80 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/signup-wizard.json
+    A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown, counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values between steps is the page's job.
+    Props (p): id, title, steps, labels, current, level, progress, layout, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_steps = ui_def(p['steps'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_current = ui_def(p['current'], 1) -%}
+{%- set v_level = ui_def(p['level'], 2) -%}
+{%- set v_progress = ui_def(p['progress'], 'bar') -%}
+{%- set v_layout = ui_def(p['layout'], 'card') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_gt(ui_len(v_steps), 0)) %}
+  {%- set c_14 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(v_level), 'Size': '2xl', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['stepOf']), [v_current, ui_len(v_steps)])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'step-of'])}, 'children': c_2}) }}
+    {%- if ui_t(ui_eq(v_progress, 'bar')) %}
+      {{ ui_include('ui/form/progress.html.j2', {'p': {'Value': ui_s(ui_str(v_current)), 'Max': ui_s(ui_str(ui_len(v_steps))), 'Attrs': ui_attrs(['aria-label', ui_get(v_labels, ['steps'])])}}) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_progress, 'list')) %}
+      {%- set c_4 -%}
+        {%- for v_s in ui_l(v_steps) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_3 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(('circle-check' if ui_t(ui_lt(ui_add(v_i, 1), v_current)) else ui_get(v_s, ['icon']))), 'Size': 16}}) }}
+            {{ ui_text(ui_get(v_s, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex items-center gap-4 text-sm', ('font-semibold' if ui_t(ui_eq(ui_add(v_i, 1), v_current)) else 'text-muted-foreground')])), 'Attrs': ui_attrs(['aria-current', ('step' if ui_t(ui_eq(ui_add(v_i, 1), v_current)) else none), 'data-testid', 'step-item'])}, 'children': c_3}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0', 'Attrs': ui_attrs(['aria-label', ui_get(v_labels, ['steps']), 'data-testid', 'step-list'])}, 'children': c_4}) }}
+    {%- endif %}
+    {%- for v_s in ui_l(v_steps) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_eq(ui_add(v_i, 1), v_current)) %}
+        {%- set c_10 -%}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_s, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_5}) }}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_s, ['text'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+          {%- set c_9 -%}
+            {%- set c_7 -%}
+              {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': ui_s(ui_tpl('{0}-a', [v_id])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-a', [v_id]), 'data-testid', 'field'])}}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_s, ['fieldA']), 'htmlFor': ui_tpl('{0}-a', [v_id])}, 'children': c_7}) }}
+            {%- set c_8 -%}
+              {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'text', 'Name': ui_s(ui_tpl('{0}-b', [v_id])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-b', [v_id]), 'data-testid', 'field'])}}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_s, ['fieldB']), 'htmlFor': ui_tpl('{0}-b', [v_id])}, 'children': c_8}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid gap-4'}, 'children': c_9}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'step'])}, 'children': c_10}) }}
+      {%- endif %}
+    {%- endfor %}
+    {%- set c_13 -%}
+      {%- set c_11 -%}
+        {{ ui_text(ui_get(v_labels, ['back'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Disabled': ui_t(ui_lt(v_current, 2)), 'Attrs': ui_attrs(['data-testid', 'wizard-back'])}, 'children': c_11}) }}
+      {%- set c_12 -%}
+        {{ ui_text((ui_get(v_labels, ['finish']) if ui_t(ui_ge(v_current, ui_len(v_steps))) else ui_get(v_labels, ['next']))) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'wizard-next'])}, 'children': c_12}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Justify': 'between'}, 'children': c_13}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv(['mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8', ('rounded bg-card p-6 inset-ring inset-ring-border' if ui_t(ui_eq(v_layout, 'card')) else '')])), 'Attrs': ui_attrs(['aria-labelledby', (none if ui_t(v_landmarkLabel) else ui_tpl('{0}-title', [v_id])), 'data-testid', 'wizard', 'data-current', ui_str(v_current), 'aria-label', v_landmarkLabel])}, 'children': c_14}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/site-footer.html.j2 b/packages/jinja2/ui/blocks/site-footer.html.j2
new file mode 100644
index 0000000..63c0778
--- /dev/null
+++ b/packages/jinja2/ui/blocks/site-footer.html.j2
@@ -0,0 +1,33 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/site-footer.json
+    The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density (default, compact).
+    Props (p): labels, routes, layout, density, landmarkLabel. -#}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_routes = ui_def(p['routes'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'minimal') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_7 -%}
+  {%- set c_6 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['copyright'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'copyright'])}, 'children': c_1}) }}
+    {%- set c_5 -%}
+      {%- set c_4 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['home'])) }}
+        {%- endset -%}
+        {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_routes, ['home']), 'className': ui_cnv(['font-semibold'])}, 'children': c_2}) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['pricing'])) }}
+        {%- endset -%}
+        {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_routes, ['pricing']), 'className': ui_cnv(['font-semibold'])}, 'children': c_3}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4'}, 'children': c_4}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_labels, ['nav']), v_landmarkLabel])) if ui_t(v_landmarkLabel) else ui_get(v_labels, ['nav']))}, 'children': c_5}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-wrap items-center gap-4', ('py-4' if ui_t(ui_eq(v_density, 'compact')) else 'py-6'), ('flex-col text-center' if ui_t(ui_eq(v_layout, 'centered')) else 'justify-between')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_6}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'footer', 'Class': 'mt-12 border-t border-border', 'Attrs': ui_attrs(['data-testid', 'site-footer', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_7}) }}
diff --git a/packages/jinja2/ui/blocks/site-header.html.j2 b/packages/jinja2/ui/blocks/site-header.html.j2
new file mode 100644
index 0000000..cb5e021
--- /dev/null
+++ b/packages/jinja2/ui/blocks/site-header.html.j2
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/site-header.json
+    The page header: a skip link to the main content, the brand, the two navigation links (the current one carries aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position (static, sticky), actions (none, cta).
+    Props (p): labels, routes, current, layout, position, actions, cta, ctaHref, landmarkLabel. -#}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_routes = ui_def(p['routes'], none) -%}
+{%- set v_current = ui_def(p['current'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'inline') -%}
+{%- set v_position = ui_def(p['position'], 'static') -%}
+{%- set v_actions = ui_def(p['actions'], 'none') -%}
+{%- set v_cta = ui_def(p['cta'], none) -%}
+{%- set v_ctaHref = ui_def(p['ctaHref'], none) -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_11 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_labels, ['skip'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/link-plain/link-plain.html.j2', {'p': {'Href': '#main-content', 'Class': 'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'skip-link'])}, 'children': c_1}) }}
+  {%- set c_10 -%}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_labels, ['brand'])) }}
+    {%- endset -%}
+    {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_routes, ['home']), 'className': ui_cnv(['text-lg font-medium']), 'testid': 'brand'}, 'children': c_2}) }}
+    {%- set c_6 -%}
+      {%- set c_5 -%}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['home'])) }}
+        {%- endset -%}
+        {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_routes, ['home']), 'className': ui_cnv(['font-semibold']), 'current': ui_eq(v_current, 'home'), 'testid': 'nav-link'}, 'children': c_3}) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['pricing'])) }}
+        {%- endset -%}
+        {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_routes, ['pricing']), 'className': ui_cnv(['font-semibold']), 'current': ui_eq(v_current, 'pricing'), 'testid': 'nav-link'}, 'children': c_4}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_5}) }}
+    {%- endset -%}
+    {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_labels, ['nav']), v_landmarkLabel])) if ui_t(v_landmarkLabel) else ui_get(v_labels, ['nav'])), 'testid': 'site-nav'}, 'children': c_6}) }}
+    {%- set c_9 -%}
+      {%- set c_7 -%}
+        {{ ui_text(ui_get(v_labels, ['theme'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'theme-toggle'])}, 'children': c_7}) }}
+      {%- if ui_t(ui_and([ui_eq(v_actions, 'cta'), v_cta])) %}
+        {%- set c_8 -%}
+          {{ ui_text(v_cta) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'sm', 'Href': ui_s(v_ctaHref), 'Attrs': ui_attrs(['data-testid', 'header-cta'])}, 'children': c_8}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_9}) }}
+  {%- endset -%}
+  {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-wrap gap-4 py-4', ('flex-col items-center' if ui_t(ui_eq(v_layout, 'stacked')) else 'items-center justify-between')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'header', 'Class': ui_s(ui_cnv(['border-b border-border bg-background', ('sticky top-0 z-40' if ui_t(ui_eq(v_position, 'sticky')) else '')])), 'Attrs': ui_attrs(['data-testid', 'site-header', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/sitemap-footer.html.j2 b/packages/jinja2/ui/blocks/sitemap-footer.html.j2
new file mode 100644
index 0000000..8d534a6
--- /dev/null
+++ b/packages/jinja2/ui/blocks/sitemap-footer.html.j2
@@ -0,0 +1,104 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/sitemap-footer.json
+    A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above, equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none, first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status itself is a port contract.
+    Props (p): label, brand, tagline, copyright, groups, signup, status, id, layout, density, landmarkLabel. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_brand = ui_def(p['brand'], none) -%}
+{%- set v_tagline = ui_def(p['tagline'], none) -%}
+{%- set v_copyright = ui_def(p['copyright'], none) -%}
+{%- set v_groups = ui_def(p['groups'], none) -%}
+{%- set v_signup = ui_def(p['signup'], none) -%}
+{%- set v_status = ui_def(p['status'], none) -%}
+{%- set v_id = ui_def(p['id'], 'footer') -%}
+{%- set v_layout = ui_def(p['layout'], 'columns') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_eq(v_layout, 'card')) %}
+  {{ ui_include('blocks/footer-card.html.j2', {'p': {'label': v_label, 'brand': v_brand, 'groups': v_groups, 'landmarkLabel': v_landmarkLabel}}) }}
+{%- else %}
+  {%- set c_21 -%}
+    {%- set c_20 -%}
+      {%- if ui_t(ui_eq(ui_get(v_signup, ['mode']), 'first')) %}
+        {%- set c_6 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_signup, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}) }}
+          {%- set c_5 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_signup, ['label'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/label/label.html.j2', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_2}) }}
+            {%- set c_4 -%}
+              {{ ui_include('ui/input/input.html.j2', {'p': {'Type': 'email', 'Name': 'email', 'Class': 'min-w-0 flex-1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_signup, ['submit'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_3}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'w-full flex-wrap'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/form/form.html.j2', {'p': {'Method': 'dialog', 'Class': ui_s(ui_cnv(['w-full max-w-md', ('mx-auto' if ui_t(false) else '')])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Class': 'max-w-md', 'Attrs': ui_attrs(['data-testid', 'signup'])}, 'children': c_6}) }}
+      {%- endif %}
+      {%- if ui_t(ui_eq(v_layout, 'columns')) %}
+        {%- set c_11 -%}
+          {%- set c_9 -%}
+            {%- set c_7 -%}
+              {{ ui_text(v_brand) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_7}) }}
+            {%- set c_8 -%}
+              {{ ui_text(v_tagline) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_8}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'md:w-64 md:shrink-0'}, 'children': c_9}) }}
+          {%- set c_10 -%}
+            {{ ui_include('blocks/footer-columns.html.j2', {'p': {'label': v_label, 'groups': v_groups, 'landmarkLabel': v_landmarkLabel}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'min-w-0 flex-1'}, 'children': c_10}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex flex-col gap-8 md:flex-row md:items-start md:gap-12', 'Attrs': ui_attrs(['data-slot', 'footer-top'])}, 'children': c_11}) }}
+      {%- else %}
+        {%- set c_16 -%}
+          {%- set c_12 -%}
+            {{ ui_text(v_brand) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'bold'}, 'children': c_12}) }}
+          {%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+            {%- set c_15 -%}
+              {%- set c_14 -%}
+                {%- for v_g in ui_l(v_groups) %}
+                  {%- set c_13 -%}
+                    {{ ui_text(ui_get(v_g, ['title'])) }}
+                  {%- endset -%}
+                  {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_g, ['href']), 'className': ui_cnv(['text-sm']), 'testid': 'group'}, 'children': c_13}) }}
+                {%- endfor %}
+              {%- endset -%}
+              {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Class': 'flex-wrap'}, 'children': c_14}) }}
+            {%- endset -%}
+            {{ ui_include('blocks/nav-block.html.j2', {'p': {'label': (ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) if ui_t(v_landmarkLabel) else v_label)}, 'children': c_15}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '6', 'Align': 'center', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_16}) }}
+      {%- endif %}
+      {%- set c_19 -%}
+        {%- set c_17 -%}
+          {{ ui_text(v_copyright) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_17}) }}
+        {%- if ui_t(ui_eq(ui_get(v_status, ['mode']), 'show')) %}
+          {%- set c_18 -%}
+            {{ ui_text(ui_get(v_status, ['label'])) }}
+          {%- endset -%}
+          {{ ui_include('blocks/pill.html.j2', {'p': {'tone': 'green', 'icon': 'circle-check'}, 'children': c_18}) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'flex-wrap border-t border-border pt-6'}, 'children': c_19}) }}
+    {%- endset -%}
+    {{ ui_include('ui/container/container.html.j2', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-col gap-8', ('py-6' if ui_t(ui_eq(v_density, 'compact')) else 'py-12')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_20}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'footer', 'Class': 'mt-12 border-t border-border', 'Attrs': ui_attrs(['data-testid', 'site-footer', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_21}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/skeleton-layout.html.j2 b/packages/jinja2/ui/blocks/skeleton-layout.html.j2
new file mode 100644
index 0000000..b3a9310
--- /dev/null
+++ b/packages/jinja2/ui/blocks/skeleton-layout.html.j2
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/skeleton-layout.json
+    The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content is loading. The shimmer itself belongs to the Skeleton part.
+    Props (p): id, title, label, lines, shape, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_lines = ui_def(p['lines'], none) -%}
+{%- set v_shape = ui_def(p['shape'], 'cards') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- if ui_t(ui_eq(v_shape, 'cards')) %}
+      {%- set c_2 -%}
+        {%- for v_l in ui_l(v_lines) %}
+          {%- set c_1 -%}
+            {{ ui_include('ui/skeleton/skeleton.html.j2', {'p': {'Class': 'aspect-video w-full'}}) }}
+            {{ ui_include('ui/skeleton/skeleton.html.j2', {'p': {'Class': 'h-4 w-2/3'}}) }}
+            {{ ui_include('ui/skeleton/skeleton.html.j2', {'p': {'Class': 'h-4 w-full'}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_1}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-3', 'Class': 'gap-4'}, 'children': c_2}) }}
+    {%- elif ui_t(ui_eq(v_shape, 'list')) %}
+      {%- set c_5 -%}
+        {%- for v_l in ui_l(v_lines) %}
+          {%- set c_4 -%}
+            {{ ui_include('ui/skeleton/skeleton.html.j2', {'p': {'Class': 'size-10 shrink-0 rounded-full'}}) }}
+            {%- set c_3 -%}
+              {{ ui_include('ui/skeleton/skeleton.html.j2', {'p': {'Class': 'h-4 w-1/3'}}) }}
+              {{ ui_include('ui/skeleton/skeleton.html.j2', {'p': {'Class': 'h-4 w-full'}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'flex-1'}, 'children': c_3}) }}
+          {%- endset -%}
+          {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_4}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_5}) }}
+    {%- else %}
+      {%- set c_7 -%}
+        {{ ui_include('ui/skeleton/skeleton.html.j2', {'p': {'Class': 'h-8 w-3/4'}}) }}
+        {%- for v_l in ui_l(v_lines) %}
+          {%- set c_6 -%}
+            {{ ui_include('ui/skeleton/skeleton.html.j2', {'p': {'Class': 'h-4 w-full'}}) }}
+            {{ ui_include('ui/skeleton/skeleton.html.j2', {'p': {'Class': 'h-4 w-5/6'}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'mx-auto max-w-2xl'}, 'children': c_7}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'div', 'Class': 'w-full', 'Attrs': ui_attrs(['role', 'status', 'aria-label', v_label, 'data-testid', 'skeleton', 'data-shape', v_shape])}, 'children': c_8}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/slot-board.html.j2 b/packages/jinja2/ui/blocks/slot-board.html.j2
new file mode 100644
index 0000000..487bb71
--- /dev/null
+++ b/packages/jinja2/ui/blocks/slot-board.html.j2
@@ -0,0 +1,89 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/slot-board.json
+    Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item (card, plain), tone.
+    Props (p): id, title, lead, days, empty, zone, labels, layout, item, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_days = ui_def(p['days'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_zone = ui_def(p['zone'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'split') -%}
+{%- set v_item = ui_def(p['item'], 'card') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_19 -%}
+  {%- if ui_t(ui_eq(ui_len(v_days), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'calendar', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_18 -%}
+      {%- set c_1 -%}
+        {{ ui_include('blocks/slot-grid.html.j2', {'p': {'days': v_days, 'name': ui_tpl('{0}-slot', [v_id]), 'item': v_item}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('lg:col-span-2' if ui_t(ui_eq(v_layout, 'split')) else 'lg:col-span-3'))}, 'children': c_1}) }}
+      {%- if ui_t(ui_eq(v_layout, 'split')) %}
+        {%- set c_17 -%}
+          {%- set c_3 -%}
+            {%- set c_2 -%}
+              {{ ui_include('ui/select/select-option.html.j2', {'p': {'Value': ui_s(ui_get(v_zone, ['id'])), 'Label': ui_s(ui_get(v_zone, ['name'])), 'Selected': true}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/select/select.html.j2', {'p': {'Name': ui_s(ui_tpl('{0}-zone', [v_id])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-zone', [v_id])])}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('blocks/field.html.j2', {'p': {'label': ui_get(v_labels, ['zone']), 'htmlFor': ui_tpl('{0}-zone', [v_id])}, 'children': c_3}) }}
+          {%- set c_13 -%}
+            {%- set c_6 -%}
+              {%- set c_4 -%}
+                {{ ui_text(ui_get(v_labels, ['price'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+              {%- set c_5 -%}
+                {{ ui_text(ui_money(ui_get(v_zone, ['price']), ui_get(v_zone, ['currency']))) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'font-medium'}, 'children': c_5}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_6}) }}
+            {%- set c_9 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_labels, ['freeFrom'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+              {%- set c_8 -%}
+                {{ ui_text(ui_money(ui_get(v_zone, ['freeFrom']), ui_get(v_zone, ['currency']))) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'font-medium'}, 'children': c_8}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_9}) }}
+            {%- set c_12 -%}
+              {%- set c_10 -%}
+                {{ ui_text(ui_get(v_labels, ['time'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-muted-foreground'}, 'children': c_10}) }}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_zone, ['time'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'font-medium'}, 'children': c_11}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_12}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2'}, 'children': c_13}) }}
+          {%- set c_14 -%}
+            {{ ui_text(ui_get(v_labels, ['primary'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'w-full'}, 'children': c_14}) }}
+          {%- set c_15 -%}
+            {{ ui_text(ui_get(v_labels, ['secondary'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Class': 'w-full'}, 'children': c_15}) }}
+          {%- set c_16 -%}
+            {{ ui_text(ui_get(v_labels, ['note'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_16}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'aside'])}, 'children': c_17}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3'}, 'children': c_18}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_19}) }}
diff --git a/packages/jinja2/ui/blocks/slot-grid.html.j2 b/packages/jinja2/ui/blocks/slot-grid.html.j2
new file mode 100644
index 0000000..24ba15e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/slot-grid.html.j2
@@ -0,0 +1,49 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/slot-grid.json
+    Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck through. One radio group (`name`) across all days. Static markup.
+    Props (p): days, name, item. -#}
+{%- set v_days = ui_def(p['days'], none) -%}
+{%- set v_name = ui_def(p['name'], none) -%}
+{%- set v_item = ui_def(p['item'], 'card') -%}
+{%- set c_10 -%}
+  {%- for v_d in ui_l(v_days) %}
+    {%- set c_9 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_d, ['title'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_d, ['note'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'baseline', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_3}) }}
+      {%- set c_8 -%}
+        {%- for v_s in ui_l(ui_get(v_d, ['slots'])) %}
+          {%- set c_5 -%}
+            {{ ui_include('ui/radio/radio.html.j2', {'p': {'Name': ui_s(v_name), 'Value': ui_s(ui_tpl('{0} {1}', [ui_get(v_d, ['id']), v_s]))}}) }}
+            {%- set c_4 -%}
+              {{ ui_text(v_s) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/label/label.html.j2', {'p': {'Class': 'flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground'}, 'children': c_5}) }}
+        {%- endfor %}
+        {%- for v_s in ui_l(ui_get(v_d, ['closed'])) %}
+          {%- set c_7 -%}
+            {{ ui_include('ui/radio/radio.html.j2', {'p': {'Name': ui_s(v_name), 'Value': ui_s(ui_tpl('{0} {1}', [ui_get(v_d, ['id']), v_s])), 'Disabled': true}}) }}
+            {%- set c_6 -%}
+              {{ ui_text(v_s) }}
+            {%- endset -%}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_6}) }}
+          {%- endset -%}
+          {{ ui_include('ui/label/label.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground', 'text-muted-foreground line-through']))}, 'children': c_7}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-2 sm:grid-cols-3'}, 'children': c_8}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Class': ui_s(('rounded bg-card inset-ring inset-ring-border p-4' if ui_t(ui_eq(v_item, 'card')) else 'border-b border-border pb-4')), 'Attrs': ui_attrs(['data-testid', 'day'])}, 'children': c_9}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'days'])}, 'children': c_10}) }}
diff --git a/packages/jinja2/ui/blocks/stat-figure.html.j2 b/packages/jinja2/ui/blocks/stat-figure.html.j2
new file mode 100644
index 0000000..71026b6
--- /dev/null
+++ b/packages/jinja2/ui/blocks/stat-figure.html.j2
@@ -0,0 +1,28 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/stat-figure.json
+    One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon.
+    Props (p): stat, item, align. -#}
+{%- set v_stat = ui_def(p['stat'], none) -%}
+{%- set v_item = ui_def(p['item'], 'plain') -%}
+{%- set v_align = ui_def(p['align'], 'center') -%}
+{%- if ui_t(ui_eq(v_item, 'card')) %}
+  {{ ui_include('blocks/stat-tile.html.j2', {'p': {'label': ui_get(v_stat, ['label']), 'value': ui_get(v_stat, ['value']), 'icon': ui_get(v_stat, ['icon']), 'hint': ui_get(v_stat, ['hint'])}}) }}
+{%- else %}
+  {%- set c_4 -%}
+    {%- if ui_t(ui_eq(v_item, 'icon')) %}
+      {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_stat, ['icon'])), 'Size': 24}}) }}
+    {%- endif %}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_stat, ['value'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '5xl', 'Weight': 'medium', 'Class': ui_s(ui_cnv(['flex items-center', ui_preset('blocks/presets/defaults.json', ['stats', 'figure'])]))}, 'children': c_1}) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_stat, ['label'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'leading-5 text-muted-foreground'}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': ui_s(('center' if ui_t(ui_eq(v_align, 'center')) else 'start'))}, 'children': c_3}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': ui_s(('center' if ui_t(ui_eq(v_align, 'center')) else 'start')), 'Class': ui_s(ui_cnv([('text-center' if ui_t(ui_eq(v_align, 'center')) else ''), ui_preset('blocks/presets/defaults.json', ['stats', 'column'])])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_4}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/stat-tile.html.j2 b/packages/jinja2/ui/blocks/stat-tile.html.j2
new file mode 100644
index 0000000..c60e788
--- /dev/null
+++ b/packages/jinja2/ui/blocks/stat-tile.html.j2
@@ -0,0 +1,63 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/stat-tile.json
+    A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the tile is a plain figure.
+    Props (p): label, value, icon, href, hint. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set v_value = ui_def(p['value'], none) -%}
+{%- set v_icon = ui_def(p['icon'], none) -%}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set v_hint = ui_def(p['hint'], none) -%}
+{%- set c_13 -%}
+  {%- if ui_t(v_href) %}
+    {%- set c_6 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(v_label) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-bold text-muted-foreground'}, 'children': c_1}) }}
+        {%- set c_2 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(v_icon), 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/iconbadge/icon-badge.html.j2', {'p': {'Size': 'sm'}, 'children': c_2}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex items-center justify-between gap-2'}, 'children': c_3}) }}
+      {%- set c_4 -%}
+        {{ ui_text(v_value) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '2xl', 'Weight': 'bold', 'Class': 'm-0 leading-8'}, 'children': c_4}) }}
+      {%- if ui_t(v_hint) %}
+        {%- set c_5 -%}
+          {{ ui_text(v_hint) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_5}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(v_href), 'Variant': 'block', 'Class': 'flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border hover:bg-muted'}, 'children': c_6}) }}
+  {%- else %}
+    {%- set c_12 -%}
+      {%- set c_9 -%}
+        {%- set c_7 -%}
+          {{ ui_text(v_label) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-bold text-muted-foreground'}, 'children': c_7}) }}
+        {%- set c_8 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(v_icon), 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/iconbadge/icon-badge.html.j2', {'p': {'Size': 'sm'}, 'children': c_8}) }}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex items-center justify-between gap-2'}, 'children': c_9}) }}
+      {%- set c_10 -%}
+        {{ ui_text(v_value) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '2xl', 'Weight': 'bold', 'Class': 'm-0 leading-8'}, 'children': c_10}) }}
+      {%- if ui_t(v_hint) %}
+        {%- set c_11 -%}
+          {{ ui_text(v_hint) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_11}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border'}, 'children': c_12}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'min-w-0'}, 'children': c_13}) }}
diff --git a/packages/jinja2/ui/blocks/stats-band.html.j2 b/packages/jinja2/ui/blocks/stats-band.html.j2
new file mode 100644
index 0000000..594e6a7
--- /dev/null
+++ b/packages/jinja2/ui/blocks/stats-band.html.j2
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/stats-band.json
+    Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3, 4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may be empty.
+    Props (p): id, title, stats, empty, cols, layout, surface, item, align, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], '') -%}
+{%- set v_stats = ui_def(p['stats'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_cols = ui_def(p['cols'], '4') -%}
+{%- set v_layout = ui_def(p['layout'], 'row') -%}
+{%- set v_surface = ui_def(p['surface'], 'none') -%}
+{%- set v_item = ui_def(p['item'], 'plain') -%}
+{%- set v_align = ui_def(p['align'], 'center') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_3 -%}
+  {{ ui_include('blocks/backdrop.html.j2', {'p': {'kind': ('image' if ui_t(ui_eq(v_surface, 'image')) else 'none'), 'alt': v_title}}) }}
+  {%- if ui_t(ui_eq(ui_len(v_stats), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'chart-column', 'title': v_empty}}) }}
+  {%- elif ui_t(ui_eq(v_surface, 'panel')) %}
+    {%- set c_1 -%}
+      {%- for v_stat in ui_l(v_stats) %}
+        {{ ui_include('blocks/stat-figure.html.j2', {'p': {'stat': v_stat, 'item': v_item, 'align': v_align}}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('2' if ui_t(ui_eq(v_cols, '2')) else ('2-3' if ui_t(ui_eq(v_cols, '3')) else ('2-4' if ui_t(ui_eq(v_cols, '4')) else '3-6')))), 'Class': ui_s(ui_cnv(['w-full items-center bg-muted px-6', ui_preset('blocks/presets/defaults.json', ['stats', 'panel'])])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_1}) }}
+  {%- else %}
+    {%- set c_2 -%}
+      {%- for v_stat in ui_l(v_stats) %}
+        {{ ui_include('blocks/stat-figure.html.j2', {'p': {'stat': v_stat, 'item': v_item, 'align': v_align}}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1' if ui_t(ui_eq(v_layout, 'stack')) else ('2' if ui_t(ui_eq(v_cols, '2')) else ('2-3' if ui_t(ui_eq(v_cols, '3')) else ('2-4' if ui_t(ui_eq(v_cols, '4')) else '3-6'))))), 'Class': 'gap-6', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': v_align, 'measure': ('fill' if ui_t(ui_eq(v_surface, 'panel')) else ('xs' if ui_t(ui_eq(v_layout, 'stack')) else 'default')), 'className': ui_cnv([ui_cnv([ui_cnv([('bg-transparent' if ui_t(ui_eq(v_surface, 'image')) else ''), ('py-0' if ui_t(ui_eq(v_surface, 'panel')) else '')]), ('relative isolate overflow-hidden' if ui_t(ui_eq(('image' if ui_t(ui_eq(v_surface, 'image')) else 'none'), 'image')) else '')])]), 'landmarkLabel': v_landmarkLabel}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/stepper.html.j2 b/packages/jinja2/ui/blocks/stepper.html.j2
new file mode 100644
index 0000000..c530754
--- /dev/null
+++ b/packages/jinja2/ui/blocks/stepper.html.j2
@@ -0,0 +1,80 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/stepper.json
+    A multi-step form header: the steps with the current one marked (aria-current step), and the current step's text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show, hide).
+    Props (p): id, title, steps, current, stepLabel, back, next, layout, marker, summary, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_steps = ui_def(p['steps'], none) -%}
+{%- set v_current = ui_def(p['current'], 2) -%}
+{%- set v_stepLabel = ui_def(p['stepLabel'], none) -%}
+{%- set v_back = ui_def(p['back'], none) -%}
+{%- set v_next = ui_def(p['next'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'horizontal') -%}
+{%- set v_marker = ui_def(p['marker'], 'number') -%}
+{%- set v_summary = ui_def(p['summary'], 'show') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_14 -%}
+  {%- if ui_t(ui_gt(ui_len(v_steps), 0)) %}
+    {%- set c_13 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_tpl(v_stepLabel, [v_current, ui_len(v_steps)])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_1}) }}
+      {%- set c_6 -%}
+        {%- for v_s in ui_l(v_steps) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_5 -%}
+            {%- set c_3 -%}
+              {%- if ui_t(ui_eq(v_marker, 'icon')) %}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_s, ['icon'])), 'Size': 16}}) }}
+              {%- else %}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_str(ui_add(v_i, 1))) }}
+                {%- endset -%}
+                {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-sm font-bold'}, 'children': c_2}) }}
+              {%- endif %}
+            {%- endset -%}
+            {{ ui_include('ui/iconbadge/icon-badge.html.j2', {'p': {'Variant': ui_s(('primary' if ui_t(ui_lt(ui_add(v_i, 1), ui_add(v_current, 1))) else 'outline')), 'Size': 'sm', 'Class': ui_s(('text-sm' if ui_t(ui_lt(ui_add(v_i, 1), ui_add(v_current, 1))) else 'text-sm text-muted-foreground'))}, 'children': c_3}) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_s, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': ui_s(('bold' if ui_t(ui_eq(ui_add(v_i, 1), v_current)) else 'semibold'))}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex flex-1 items-center gap-4', 'Attrs': ui_attrs(['data-testid', 'item', 'aria-current', ('step' if ui_t(ui_eq(ui_add(v_i, 1), v_current)) else none)])}, 'children': c_5}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ol', 'Class': ui_s(ui_cnv(['m-0 flex list-none gap-4 p-0', ('flex-col' if ui_t(ui_eq(v_layout, 'vertical')) else 'flex-col sm:flex-row')])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}) }}
+      {%- if ui_t(ui_eq(v_summary, 'show')) %}
+        {%- for v_s in ui_l(v_steps) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_eq(ui_add(v_i, 1), v_current)) %}
+            {%- set c_12 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_s, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_7}) }}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_s, ['text'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_8}) }}
+              {%- set c_11 -%}
+                {%- set c_9 -%}
+                  {{ ui_text(v_back) }}
+                {%- endset -%}
+                {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button'}, 'children': c_9}) }}
+                {%- set c_10 -%}
+                  {{ ui_text(v_next) }}
+                {%- endset -%}
+                {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'sm', 'Type': 'button'}, 'children': c_10}) }}
+              {%- endset -%}
+              {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Class': 'pt-2'}, 'children': c_11}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'rounded bg-card p-6 inset-ring inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'step-summary'])}, 'children': c_12}) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '6', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'stepper'])}, 'children': c_13}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'measure': '3xl', 'landmarkLabel': v_landmarkLabel}, 'children': c_14}) }}
diff --git a/packages/jinja2/ui/blocks/steps-list.html.j2 b/packages/jinja2/ui/blocks/steps-list.html.j2
new file mode 100644
index 0000000..80b3a87
--- /dev/null
+++ b/packages/jinja2/ui/blocks/steps-list.html.j2
@@ -0,0 +1,52 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/steps-list.json
+    How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon), align, density, tone.
+    Props (p): id, title, steps, empty, layout, marker, align, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_steps = ui_def(p['steps'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_layout = ui_def(p['layout'], 'row') -%}
+{%- set v_marker = ui_def(p['marker'], 'number') -%}
+{%- set v_align = ui_def(p['align'], 'start') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_steps), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'list-ordered', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_step in ui_l(v_steps) %}
+        {%- set v_i = loop.index0 -%}
+        {%- set c_6 -%}
+          {%- set c_2 -%}
+            {%- if ui_t(ui_eq(v_marker, 'icon')) %}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_step, ['icon'])), 'Size': 20}}) }}
+            {%- else %}
+              {%- set c_1 -%}
+                {{ ui_text(ui_str(ui_add(v_i, 1))) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-base font-bold'}, 'children': c_1}) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ ui_include('ui/iconbadge/icon-badge.html.j2', {'p': {'Variant': 'primary', 'Attrs': ui_attrs(['data-slot', 'marker'])}, 'children': c_2}) }}
+          {%- set c_5 -%}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_step, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_3}) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_step, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': ui_s(('center' if ui_t(ui_eq(v_align, 'center')) else 'start'))}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex gap-4', ('flex-col' if ui_t(ui_eq(v_layout, 'row')) else ''), ('items-center text-center' if ui_t(ui_eq(v_align, 'center')) else '')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ol', 'Class': ui_s(ui_cnv(['grid gap-6', ('sm:grid-cols-2 md:grid-cols-4' if ui_t(ui_eq(v_layout, 'row')) else '')])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': v_align, 'measure': ('default' if ui_t(ui_eq(v_layout, 'row')) else '2xl'), 'landmarkLabel': v_landmarkLabel}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/store-hero.html.j2 b/packages/jinja2/ui/blocks/store-hero.html.j2
new file mode 100644
index 0000000..571593b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/store-hero.html.j2
@@ -0,0 +1,87 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/store-hero.json
+    The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, actions, perks, card, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set v_actions = ui_def(p['actions'], none) -%}
+{%- set v_perks = ui_def(p['perks'], none) -%}
+{%- set v_card = ui_def(p['card'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'overlay') -%}
+{%- set v_mediaSide = ui_def(p['mediaSide'], 'end') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_eq(v_layout, 'backdrop')) %}
+  {%- set c_7 -%}
+    {{ ui_include('blocks/backdrop.html.j2', {'p': {'kind': 'image', 'alt': v_title}}) }}
+    {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}) }}
+    {%- if ui_t(ui_gt(ui_len(v_perks), 0)) %}
+      {%- set c_6 -%}
+        {%- for v_p in ui_l(v_perks) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_lt(v_i, 3)) %}
+            {%- set c_5 -%}
+              {%- set c_1 -%}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 20}}) }}
+              {%- endset -%}
+              {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_1}) }}
+              {%- set c_4 -%}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_get(v_p, ['title'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_get(v_p, ['text'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+              {%- endset -%}
+              {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_4}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'perk'])}, 'children': c_5}) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-3', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'perks'])}, 'children': c_6}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'tone': v_tone, 'density': 'roomy', 'measure': '3xl', 'className': ui_cnv([('relative isolate overflow-hidden' if ui_t(ui_eq('image', 'image')) else '')]), 'landmarkLabel': v_landmarkLabel}, 'children': c_7}) }}
+{%- else %}
+  {%- set f_14 -%}
+    {{ ui_include('blocks/offer-media.html.j2', {'p': {'alt': v_title, 'card': v_card}}) }}
+  {%- endset -%}
+  {%- set c_15 -%}
+    {{ ui_include('blocks/action-group.html.j2', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_get(v_actions, ['secondary']) if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) else none), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}) }}
+    {%- if ui_t(ui_gt(ui_len(v_perks), 0)) %}
+      {%- set c_13 -%}
+        {%- for v_p in ui_l(v_perks) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_lt(v_i, 3)) %}
+            {%- set c_12 -%}
+              {%- set c_8 -%}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 20}}) }}
+              {%- endset -%}
+              {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_8}) }}
+              {%- set c_11 -%}
+                {%- set c_9 -%}
+                  {{ ui_text(ui_get(v_p, ['title'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_9}) }}
+                {%- set c_10 -%}
+                  {{ ui_text(ui_get(v_p, ['text'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_10}) }}
+              {%- endset -%}
+              {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_11}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'perk'])}, 'children': c_12}) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-3', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'perks'])}, 'children': c_13}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel, 'aside': f_14}, 'children': c_15}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/store-locations.html.j2 b/packages/jinja2/ui/blocks/store-locations.html.j2
new file mode 100644
index 0000000..d1f23e4
--- /dev/null
+++ b/packages/jinja2/ui/blocks/store-locations.html.j2
@@ -0,0 +1,91 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/store-locations.json
+    The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.
+    Props (p): id, title, lead, stores, empty, kinds, labels, layout, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_stores = ui_def(p['stores'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_kinds = ui_def(p['kinds'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'cards') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_18 -%}
+  {%- if ui_t(ui_eq(ui_len(v_stores), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'store', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_17 -%}
+      {%- set c_15 -%}
+        {%- for v_s in ui_l(v_stores) %}
+          {%- set c_14 -%}
+            {%- set c_3 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_at(v_kinds, ui_get(v_s, ['kind']))) }}
+              {%- endset -%}
+              {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Class': 'w-fit'}, 'children': c_1}) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_s, ['name'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_2}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_3}) }}
+            {%- set c_10 -%}
+              {%- set c_5 -%}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'map-pin', 'Size': 16}}) }}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_s, ['address'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_4}) }}
+              {%- endset -%}
+              {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_5}) }}
+              {%- set c_7 -%}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'clock', 'Size': 16}}) }}
+                {%- set c_6 -%}
+                  {{ ui_text(ui_get(v_s, ['hours'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_6}) }}
+              {%- endset -%}
+              {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_7}) }}
+              {%- set c_9 -%}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'phone', 'Size': 16}}) }}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_nbsp(ui_get(v_s, ['phone']))) }}
+                {%- endset -%}
+                {{ ui_include('ui/link/link.html.j2', {'p': {'Href': ui_s(ui_tpl('tel:{0}', [ui_get(v_s, ['phone'])])), 'Variant': 'default'}, 'children': c_8}) }}
+              {%- endset -%}
+              {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_9}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': ui_s(('flex flex-wrap gap-x-8 gap-y-2 text-sm' if ui_t(ui_eq(v_layout, 'list')) else 'flex flex-col gap-2 text-sm'))}, 'children': c_10}) }}
+            {%- if ui_t(ui_eq(v_layout, 'cards')) %}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_s, ['note'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_11}) }}
+              {%- set c_13 -%}
+                {%- for v_v in ui_l(ui_get(v_s, ['services'])) %}
+                  {%- set c_12 -%}
+                    {{ ui_text(v_v) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'default'}, 'children': c_12}) }}
+                {%- endfor %}
+              {%- endset -%}
+              {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_13}) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Class': ui_s(('border-b border-border pb-4' if ui_t(ui_eq(v_layout, 'list')) else 'rounded bg-card inset-ring inset-ring-border p-6')), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_14}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-1 gap-4 md:grid-cols-2' if ui_t(ui_eq(v_layout, 'cards')) else 'flex flex-col gap-4')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_15}) }}
+      {%- if ui_t(ui_eq(v_layout, 'map')) %}
+        {%- set c_16 -%}
+          {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_labels, ['map']), 'ratio': '1/1'}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'md:sticky md:top-8'}, 'children': c_16}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['grid grid-cols-1 gap-8', ('items-start md:grid-cols-2' if ui_t(ui_eq(v_layout, 'map')) else '')]))}, 'children': c_17}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_18}) }}
diff --git a/packages/jinja2/ui/blocks/story-dots.html.j2 b/packages/jinja2/ui/blocks/story-dots.html.j2
new file mode 100644
index 0000000..8344f19
--- /dev/null
+++ b/packages/jinja2/ui/blocks/story-dots.html.j2
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/story-dots.json
+    One dot per step of StoryTabs; the dot of the active step is filled.
+    Props (p): steps, active. -#}
+{%- set v_steps = ui_def(p['steps'], none) -%}
+{%- set v_active = ui_def(p['active'], none) -%}
+{%- set c_1 -%}
+  {%- for v_s in ui_l(v_steps) %}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(ui_cnv(['size-2 rounded-full', ('bg-primary' if ui_t(ui_eq(ui_get(v_s, ['id']), v_active)) else 'bg-border')])), 'Attrs': ui_attrs(['data-testid', 'story-dot'])}}) }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/story-panel.html.j2 b/packages/jinja2/ui/blocks/story-panel.html.j2
new file mode 100644
index 0000000..b22a0ea
--- /dev/null
+++ b/packages/jinja2/ui/blocks/story-panel.html.j2
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/story-panel.json
+    The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag in a muted box.
+    Props (p): s, index, total, labels. -#}
+{%- set v_s = ui_def(p['s'], none) -%}
+{%- set v_index = ui_def(p['index'], none) -%}
+{%- set v_total = ui_def(p['total'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_8 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_s, ['date'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_1}) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['step']), [ui_str(ui_add(v_index, 1)), ui_str(v_total)])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}) }}
+  {%- set c_4 -%}
+    {{ ui_text(ui_get(v_s, ['title'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'semibold'}, 'children': c_4}) }}
+  {%- set c_5 -%}
+    {{ ui_text(ui_get(v_s, ['text'])) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {{ ui_text(ui_get(v_s, ['tag'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_6}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'rounded bg-muted p-4'}, 'children': c_7}) }}
+{%- endset -%}
+{{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'story-panel'])}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/story-tabs.html.j2 b/packages/jinja2/ui/blocks/story-tabs.html.j2
new file mode 100644
index 0000000..5cf8e76
--- /dev/null
+++ b/packages/jinja2/ui/blocks/story-tabs.html.j2
@@ -0,0 +1,67 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/story-tabs.json
+    A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next arrows and one dot per step), tone. Choosing a step emits `select`.
+    Props (p): id, title, lead, badge, steps, empty, active, labels, layout, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_badge = ui_def(p['badge'], '') -%}
+{%- set v_steps = ui_def(p['steps'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_active = ui_def(p['active'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'years') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- if ui_t(ui_eq(ui_len(v_steps), 0)) %}
+  {%- set c_1 -%}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'milestone', 'title': v_empty}}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}) }}
+{%- elif ui_t(ui_eq(v_layout, 'years')) %}
+  {%- set c_6 -%}
+    {%- set c_5 -%}
+      {%- for v_s in ui_l(v_steps) %}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['date'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-sm font-semibold'}, 'children': c_2}) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_s, ['tag'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-xs'}, 'children': c_3}) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': ui_s(('default' if ui_t(ui_eq(ui_get(v_s, ['id']), v_active)) else 'outline')), 'Size': 'lg', 'Type': 'button', 'Class': 'h-auto flex-col items-start gap-0 py-2 text-start', 'Attrs': ui_attrs(['data-testid', 'story-tab', 'data-active', ('true' if ui_t(ui_eq(ui_get(v_s, ['id']), v_active)) else 'false')])}, 'children': c_4}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'grid grid-cols-2 gap-2 sm:grid-cols-4', 'Attrs': ui_attrs(['data-testid', 'story-tabs'])}, 'children': c_5}) }}
+    {%- for v_s in ui_l(v_steps) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_eq(ui_get(v_s, ['id']), v_active)) %}
+        {{ ui_include('blocks/story-panel.html.j2', {'p': {'s': v_s, 'index': v_i, 'total': ui_len(v_steps), 'labels': v_labels}}) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_6}) }}
+{%- else %}
+  {%- set f_7 -%}
+    {%- set c_11 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '4/3'}}) }}
+      {%- set c_10 -%}
+        {%- set c_8 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-left', 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(ui_get(v_labels, ['previous'])), 'Attrs': ui_attrs(['data-testid', 'story-arrow'])}, 'children': c_8}) }}
+        {{ ui_include('blocks/story-dots.html.j2', {'p': {'steps': v_steps, 'active': v_active}}) }}
+        {%- set c_9 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'chevron-right', 'Size': 16}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(ui_get(v_labels, ['next'])), 'Attrs': ui_attrs(['data-testid', 'story-arrow'])}, 'children': c_9}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_10}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_11}) }}
+  {%- endset -%}
+  {{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true}, 'landmarkLabel': v_landmarkLabel, 'aside': f_7}}) }}
+{%- endif %}
diff --git a/packages/jinja2/ui/blocks/support-channels.html.j2 b/packages/jinja2/ui/blocks/support-channels.html.j2
new file mode 100644
index 0000000..90b0165
--- /dev/null
+++ b/packages/jinja2/ui/blocks/support-channels.html.j2
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/support-channels.json
+    Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout (grid, list), columns, action (link, none), tone (default, muted).
+    Props (p): id, title, channels, empty, open, layout, cols, action, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_channels = ui_def(p['channels'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_open = ui_def(p['open'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_cols = ui_def(p['cols'], '1-3') -%}
+{%- set v_action = ui_def(p['action'], 'link') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_channels), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'life-buoy', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_c in ui_l(v_channels) %}
+        {%- set c_6 -%}
+          {%- set c_5 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 24}}) }}
+            {%- set c_3 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_c, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_1}) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_c, ['text'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Class': 'flex-1'}, 'children': c_3}) }}
+            {%- if ui_t(ui_eq(v_action, 'link')) %}
+              {%- set c_4 -%}
+                {{ ui_text(v_open) }}
+              {%- endset -%}
+              {{ ui_include('blocks/menu-entry.html.j2', {'p': {'href': ui_get(v_c, ['href']), 'className': ui_cnv(['font-semibold']), 'testid': 'open'}, 'children': c_4}) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ ui_include('ui/card/card-content.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-1 gap-4', ('items-center' if ui_t(ui_eq(v_layout, 'list')) else 'flex-col')]))}, 'children': c_5}) }}
+        {%- endset -%}
+        {{ ui_include('ui/card/card.html.j2', {'p': {'Variant': 'default', 'Class': ui_s(ui_cnv(['h-full', ('flex-row items-center' if ui_t(ui_eq(v_layout, 'list')) else '')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(('1' if ui_t(ui_eq(v_layout, 'list')) else v_cols)), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_8}) }}
diff --git a/packages/jinja2/ui/blocks/switcher-item.html.j2 b/packages/jinja2/ui/blocks/switcher-item.html.j2
new file mode 100644
index 0000000..39efeb8
--- /dev/null
+++ b/packages/jinja2/ui/blocks/switcher-item.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/switcher-item.json
+    One item of a Switcher (default or active). Pass the same size and layout as the Switcher.
+    Props (p): active, size, layout, className; children: markup. -#}
+{%- set v_active = ui_def(p['active'], false) -%}
+{%- set v_size = ui_def(p['size'], 'default') -%}
+{%- set v_layout = ui_def(p['layout'], 'text') -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/button-plain/button-plain.html.j2', {'p': {'Type': 'button', 'Role': 'tab', 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/switcher-item.variants.json', {'size': v_size, 'layout': v_layout, 'state': ('active' if ui_t(v_active) else 'default')}), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['aria-selected', v_active, 'tabindex', (0 if ui_t(v_active) else -1), 'data-slot', 'switcher-item', 'data-state', ('active' if ui_t(v_active) else 'default')])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/switcher.html.j2 b/packages/jinja2/ui/blocks/switcher.html.j2
new file mode 100644
index 0000000..aeb31f5
--- /dev/null
+++ b/packages/jinja2/ui/blocks/switcher.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/switcher.json
+    A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown (horizontal, activate).
+    Props (p): size, layout, label, className; children: markup. -#}
+{%- set v_size = ui_def(p['size'], 'default') -%}
+{%- set v_layout = ui_def(p['layout'], 'text') -%}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set c_1 -%}
+  {{ ui_def(children, '')|safe }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/switcher.variants.json', {'size': v_size, 'layout': v_layout}), ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'tablist', 'aria-label', v_label, 'data-slot', 'switcher'])}, 'children': c_1}) }}
diff --git a/packages/jinja2/ui/blocks/table-toolbar.html.j2 b/packages/jinja2/ui/blocks/table-toolbar.html.j2
new file mode 100644
index 0000000..d310d9b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/table-toolbar.html.j2
@@ -0,0 +1,16 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/table-toolbar.json
+    The toolbar above a table: search and filter controls on the left (children), the actions on the right (`actions`). One tab stop group (role toolbar).
+    Props (p): label, className, actions (slot); children: markup. -#}
+{%- set v_label = ui_def(p['label'], none) -%}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {{ ui_def(children, '')|safe }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex min-w-0 flex-wrap items-center gap-2'}, 'children': c_1}) }}
+  {%- set c_2 -%}
+    {{ ui_def(p['actions'], '')|safe }}
+  {%- endset -%}
+  {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'flex flex-wrap items-center gap-2'}, 'children': c_2}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-wrap items-center justify-between gap-2', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['role', 'toolbar', 'aria-label', v_label, 'data-slot', 'table-toolbar'])}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/team-grid.html.j2 b/packages/jinja2/ui/blocks/team-grid.html.j2
new file mode 100644
index 0000000..3654615
--- /dev/null
+++ b/packages/jinja2/ui/blocks/team-grid.html.j2
@@ -0,0 +1,69 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/team-grid.json
+    The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory), cols, tone, density.
+    Props (p): id, title, lead, members, empty, depts, layout, cols, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_members = ui_def(p['members'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_depts = ui_def(p['depts'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'cards') -%}
+{%- set v_cols = ui_def(p['cols'], '1-4') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set f_11 -%}
+  {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title, 'ratio': '3/4'}}) }}
+{%- endset -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_len(v_members), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'users', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- for v_m in ui_l(v_members) %}
+        {%- if ui_t(ui_eq(v_layout, 'minimal')) %}
+          {%- set c_3 -%}
+            {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_m, ['name']), 'ratio': '1/1', 'className': ui_cnv([ui_cnv(['size-16', 'shrink-0'])])}}) }}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_m, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_m, ['role'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'text-center', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_3}) }}
+        {%- elif ui_t(ui_eq(v_layout, 'cards')) %}
+          {%- set c_9 -%}
+            {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_m, ['name']), 'ratio': '1/1'}}) }}
+            {%- set c_8 -%}
+              {%- set c_6 -%}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_m, ['name'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_4}) }}
+                {%- set c_5 -%}
+                  {{ ui_text(ui_get(v_m, ['role'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+              {%- endset -%}
+              {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_6}) }}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_m, ['bio'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_8}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_9}) }}
+        {%- else %}
+          {{ ui_include('blocks/member-row.html.j2', {'p': {'member': v_m, 'depts': v_depts, 'layout': v_layout}}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(('grid grid-cols-2 gap-8 md:grid-cols-4' if ui_t(ui_eq(v_layout, 'minimal')) else ('grid grid-cols-1 gap-4 md:grid-cols-2' if ui_t(ui_eq(v_layout, 'directory')) else ('flex flex-col gap-4' if ui_t(ui_eq(v_layout, 'list')) else ('grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3' if ui_t(ui_eq(v_cols, '1-3')) else 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4'))))), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_10}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'layout': ('split' if ui_t(ui_eq(v_layout, 'list')) else 'stack'), 'media': {'show': ui_eq(v_layout, 'list'), 'side': 'start', 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_11}, 'children': c_12}) }}
diff --git a/packages/jinja2/ui/blocks/template-grid.html.j2 b/packages/jinja2/ui/blocks/template-grid.html.j2
new file mode 100644
index 0000000..1ae0d84
--- /dev/null
+++ b/packages/jinja2/ui/blocks/template-grid.html.j2
@@ -0,0 +1,103 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/template-grid.json
+    Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all button.
+    Props (p): id, title, templates, filters, browseHref, labels, cols, tone, density, empty, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_templates = ui_def(p['templates'], none) -%}
+{%- set v_filters = ui_def(p['filters'], none) -%}
+{%- set v_browseHref = ui_def(p['browseHref'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_cols = ui_def(p['cols'], '1-4') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'compact') -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_21 -%}
+  {%- set c_20 -%}
+    {%- set c_4 -%}
+      {%- set c_1 -%}
+        {{ ui_text(v_title) }}
+      {%- endset -%}
+      {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'semibold', 'Class': 'leading-9', 'Attrs': ui_attrs(['id', ui_add(v_id, '-title')])}, 'children': c_1}) }}
+      {%- if ui_t(ui_gt(ui_len(v_filters), 0)) %}
+        {%- set c_3 -%}
+          {%- for v_f in ui_l(v_filters) %}
+            {%- set c_2 -%}
+              {%- if ui_t(ui_get(v_f, ['icon'])) %}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 16}}) }}
+              {%- endif %}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'template-filter'])}, 'children': c_2}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap', 'Attrs': ui_attrs(['role', 'group', 'aria-label', ui_get(v_labels, ['filters']), 'data-testid', 'template-filters'])}, 'children': c_3}) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'h-8 w-full flex-wrap'}, 'children': c_4}) }}
+    {%- if ui_t(ui_eq(ui_len(v_templates), 0)) %}
+      {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'layout-template', 'title': v_empty}}) }}
+    {%- else %}
+      {%- set c_18 -%}
+        {%- for v_t in ui_l(v_templates) %}
+          {%- set c_17 -%}
+            {%- set c_5 -%}
+              {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_t, ['title']), 'className': ui_cnv([ui_cnv(['size-full', ui_preset('blocks/presets/defaults.json', ['media', 'rounded'])])])}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['shrink-0 overflow-hidden', ui_preset('blocks/presets/defaults.json', ['templates', 'image'])]))}, 'children': c_5}) }}
+            {%- set c_16 -%}
+              {%- set c_6 -%}
+                {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'layout-template', 'Size': 16}}) }}
+              {%- endset -%}
+              {{ ui_include('ui/iconbadge/icon-badge.html.j2', {'p': {'Size': 'sm', 'Class': 'overflow-hidden', 'Attrs': ui_attrs(['data-testid', 'template-avatar'])}, 'children': c_6}) }}
+              {%- set c_15 -%}
+                {%- set c_7 -%}
+                  {{ ui_text(ui_get(v_t, ['title'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'semibold', 'Class': 'truncate leading-6'}, 'children': c_7}) }}
+                {%- set c_14 -%}
+                  {%- set c_10 -%}
+                    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'eye', 'Size': 16}}) }}
+                    {%- set c_8 -%}
+                      {{ ui_text(ui_get(v_labels, ['views'])) }}
+                    {%- endset -%}
+                    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_8}) }}
+                    {%- set c_9 -%}
+                      {{ ui_text(ui_get(v_t, ['views'])) }}
+                    {%- endset -%}
+                    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-4'}, 'children': c_9}) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_10}) }}
+                  {%- set c_13 -%}
+                    {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'heart', 'Size': 16}}) }}
+                    {%- set c_11 -%}
+                      {{ ui_text(ui_get(v_labels, ['likes'])) }}
+                    {%- endset -%}
+                    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_11}) }}
+                    {%- set c_12 -%}
+                      {{ ui_text(ui_get(v_t, ['likes'])) }}
+                    {%- endset -%}
+                    {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-4'}, 'children': c_12}) }}
+                  {%- endset -%}
+                  {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_13}) }}
+                {%- endset -%}
+                {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'h-4 text-muted-foreground'}, 'children': c_14}) }}
+              {%- endset -%}
+              {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0', 'Class': 'min-w-0 flex-1'}, 'children': c_15}) }}
+            {%- endset -%}
+            {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '4', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-full', ui_preset('blocks/presets/defaults.json', ['templates', 'footer'])])), 'Attrs': ui_attrs(['data-testid', 'template-footer'])}, 'children': c_16}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border', ui_preset('blocks/presets/defaults.json', ['templates', 'card'])])), 'Attrs': ui_attrs(['data-testid', 'template-card'])}, 'children': c_17}) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(v_cols), 'Class': 'w-full gap-6', 'Attrs': ui_attrs(['data-testid', 'template-grid'])}, 'children': c_18}) }}
+    {%- endif %}
+    {%- set c_19 -%}
+      {{ ui_text(ui_get(v_labels, ['browse'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'sm', 'Href': ui_s(v_browseHref), 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'template-browse'])}, 'children': c_19}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '8', 'Align': 'stretch'}, 'children': c_20}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'tone': v_tone, 'density': v_density, 'measure': 'fill', 'className': ui_cnv(['py-0']), 'landmarkLabel': v_landmarkLabel}, 'children': c_21}) }}
diff --git a/packages/jinja2/ui/blocks/testimonial-grid.html.j2 b/packages/jinja2/ui/blocks/testimonial-grid.html.j2
new file mode 100644
index 0000000..2b45873
--- /dev/null
+++ b/packages/jinja2/ui/blocks/testimonial-grid.html.j2
@@ -0,0 +1,38 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/testimonial-grid.json
+    Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card, plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the Carousel port contract around the single layout.
+    Props (p): id, title, quotes, empty, labels, layout, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_quotes = ui_def(p['quotes'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'grid') -%}
+{%- set v_cols = ui_def(p['cols'], '1-3') -%}
+{%- set v_item = ui_def(p['item'], none) -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_3 -%}
+  {%- if ui_t(ui_eq(ui_len(v_quotes), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'message-square-quote', 'title': v_empty}}) }}
+  {%- elif ui_t(ui_or([ui_eq(v_layout, 'masonry'), ui_eq(v_layout, 'strip')])) %}
+    {%- set c_1 -%}
+      {%- for v_q in ui_l(v_quotes) %}
+        {{ ui_include('blocks/quote-card.html.j2', {'p': {'q': v_q, 'labels': v_labels, 'item': v_item, 'layout': v_layout}}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'div', 'Class': ui_s(('columns-1 gap-4 md:columns-2 xl:columns-3' if ui_t(ui_eq(v_layout, 'masonry')) else 'flex snap-x gap-4 overflow-x-auto pb-2')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_1}) }}
+  {%- else %}
+    {%- set c_2 -%}
+      {%- for v_q in ui_l(v_quotes) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_or([not (ui_eq(v_layout, 'single')), ui_eq(v_i, 0)])) %}
+          {{ ui_include('blocks/quote-card.html.j2', {'p': {'q': v_q, 'labels': v_labels, 'item': v_item, 'layout': v_layout}}) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s((v_cols if ui_t(ui_eq(v_layout, 'grid')) else '1')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': ('center' if ui_t(ui_eq(v_layout, 'single')) else 'start'), 'measure': ('default' if ui_t(ui_eq(v_layout, 'grid')) else '2xl'), 'landmarkLabel': v_landmarkLabel}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/timeline.html.j2 b/packages/jinja2/ui/blocks/timeline.html.j2
new file mode 100644
index 0000000..744e4b3
--- /dev/null
+++ b/packages/jinja2/ui/blocks/timeline.html.j2
@@ -0,0 +1,45 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/timeline.json
+    A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time. Newest first or oldest first is the caller's order.
+    Props (p): items, className. -#}
+{%- set k_TONE_DOT = {'gray': 'bg-muted-foreground', 'green': 'bg-emerald-500', 'blue': 'bg-blue-500', 'amber': 'bg-amber-500', 'red': 'bg-red-500'} -%}
+{%- set v_items = ui_def(p['items'], none) -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- for v_item in ui_l(v_items) %}
+      {%- set v_i = loop.index0 -%}
+      {%- set c_7 -%}
+        {%- set c_1 -%}
+          {%- if ui_t(ui_lt(v_i, ui_sub(ui_len(v_items), 1))) %}
+            {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'absolute top-4 -bottom-0 w-px bg-border'}}) }}
+          {%- endif %}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(ui_cnv(['mt-2 size-2 rounded-full', ui_at(k_TONE_DOT, ui_coalesce([ui_get(v_item, ['tone']), 'gray']))]))}}) }}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'relative flex w-2 shrink-0 justify-center'}, 'children': c_1}) }}
+        {%- set c_6 -%}
+          {%- set c_4 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_item, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-sm font-bold text-foreground'}, 'children': c_2}) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_item, ['time'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 shrink-0 text-xs font-medium text-muted-foreground'}, 'children': c_3}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex flex-wrap items-baseline justify-between gap-x-4'}, 'children': c_4}) }}
+          {%- if ui_t(ui_get(v_item, ['text'])) %}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_item, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_5}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex min-w-0 flex-1 flex-col gap-0'}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'relative flex min-w-0 gap-4 pb-4 last:pb-0', 'Attrs': ui_attrs(['data-event', ui_get(v_item, ['id'])])}, 'children': c_7}) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col p-0'}, 'children': c_8}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': ui_s(ui_cnv(['min-w-0', ui_def(p['className'], '')])), 'Attrs': ui_attrs(['data-slot', 'timeline'])}, 'children': c_9}) }}
diff --git a/packages/jinja2/ui/blocks/topic-chips.html.j2 b/packages/jinja2/ui/blocks/topic-chips.html.j2
new file mode 100644
index 0000000..4a8a24d
--- /dev/null
+++ b/packages/jinja2/ui/blocks/topic-chips.html.j2
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/topic-chips.json
+    A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band with an icon per topic; default: outlined.
+    Props (p): topics, tone. -#}
+{%- set v_topics = ui_def(p['topics'], none) -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set c_3 -%}
+  {%- for v_topic in ui_l(v_topics) %}
+    {%- if ui_t(ui_eq(v_tone, 'inverse')) %}
+      {%- set c_1 -%}
+        {%- if ui_t(ui_get(v_topic, ['icon'])) %}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_topic, ['icon'])), 'Size': 16}}) }}
+        {%- endif %}
+        {{ ui_text(ui_get(v_topic, ['name'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Href': ui_s(ui_get(v_topic, ['href'])), 'Variant': 'ghost', 'Size': 'sm', 'Class': 'gap-2 text-background inset-ring-background/30 hover:bg-background/10', 'Attrs': ui_attrs(['data-testid', 'hero-topic'])}, 'children': c_1}) }}
+    {%- else %}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_topic, ['name'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Href': ui_s(ui_get(v_topic, ['href'])), 'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'hero-topic'])}, 'children': c_2}) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'center', 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-testid', 'hero-topics'])}, 'children': c_3}) }}
diff --git a/packages/jinja2/ui/blocks/tour-callout.html.j2 b/packages/jinja2/ui/blocks/tour-callout.html.j2
new file mode 100644
index 0000000..7c0bc4e
--- /dev/null
+++ b/packages/jinja2/ui/blocks/tour-callout.html.j2
@@ -0,0 +1,51 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/tour-callout.json
+    One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target), tone, density.
+    Props (p): id, title, text, target, position, skip, next, placement, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_target = ui_def(p['target'], none) -%}
+{%- set v_position = ui_def(p['position'], none) -%}
+{%- set v_skip = ui_def(p['skip'], none) -%}
+{%- set v_next = ui_def(p['next'], none) -%}
+{%- set v_placement = ui_def(p['placement'], 'below') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_10 -%}
+  {%- set c_9 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_target) }}
+    {%- endset -%}
+    {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'inset-ring-foreground', 'Attrs': ui_attrs(['data-testid', 'tour-target'])}, 'children': c_1}) }}
+    {%- set c_8 -%}
+      {%- set c_2 -%}
+        {{ ui_text(v_position) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+      {%- set c_3 -%}
+        {{ ui_text(v_title) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_3}) }}
+      {%- set c_4 -%}
+        {{ ui_text(v_text) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+      {%- set c_7 -%}
+        {%- set c_5 -%}
+          {{ ui_text(v_skip) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Type': 'button'}, 'children': c_5}) }}
+        {%- set c_6 -%}
+          {{ ui_text(v_next) }}
+        {%- endset -%}
+        {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'sm', 'Type': 'button'}, 'children': c_6}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Justify': 'end'}, 'children': c_7}) }}
+    {%- endset -%}
+    {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv(['w-full max-w-sm', 'rounded bg-card inset-ring inset-ring-border', 'p-4', 'shadow-md'])), 'Attrs': ui_attrs(['role', 'group', 'aria-label', v_title, 'data-testid', 'tour-callout'])}, 'children': c_8}) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'div', 'Class': ui_s(ui_cnv(['flex gap-4', ('flex-col items-start md:flex-row md:items-center' if ui_t(ui_eq(v_placement, 'end')) else ('flex-col-reverse items-start' if ui_t(ui_eq(v_placement, 'above')) else 'flex-col items-start'))])), 'Attrs': ui_attrs(['data-testid', 'tour', 'data-placement', v_placement])}, 'children': c_9}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_10}) }}
diff --git a/packages/jinja2/ui/blocks/usage-calculator.html.j2 b/packages/jinja2/ui/blocks/usage-calculator.html.j2
new file mode 100644
index 0000000..1d97eed
--- /dev/null
+++ b/packages/jinja2/ui/blocks/usage-calculator.html.j2
@@ -0,0 +1,65 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/usage-calculator.json
+    A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the largest amount under the slider, hide), tone.
+    Props (p): id, title, text, usage, slider, price, cta, href, layout, ends, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_usage = ui_def(p['usage'], none) -%}
+{%- set v_slider = ui_def(p['slider'], none) -%}
+{%- set v_price = ui_def(p['price'], none) -%}
+{%- set v_cta = ui_def(p['cta'], none) -%}
+{%- set v_href = ui_def(p['href'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'card') -%}
+{%- set v_ends = ui_def(p['ends'], 'show') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_13 -%}
+  {%- set c_12 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_tpl(ui_get(v_slider, ['unit']), [v_usage])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_slider, ['label'])) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Justify': 'between', 'Align': 'baseline'}, 'children': c_3}) }}
+    {{ ui_include('ui/range/range.html.j2', {'p': {'Min': ui_i(ui_get(v_slider, ['min'])), 'Max': ui_i(ui_get(v_slider, ['max'])), 'Value': ui_s(v_usage), 'AriaLabel': ui_s(ui_get(v_slider, ['label'])), 'Attrs': ui_attrs(['data-testid', 'slider'])}}) }}
+    {%- if ui_t(ui_eq(v_ends, 'show')) %}
+      {%- set c_6 -%}
+        {%- set c_4 -%}
+          {{ ui_text(ui_tpl(ui_get(v_slider, ['unit']), [ui_get(v_slider, ['min'])])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_tpl(ui_get(v_slider, ['unit']), [ui_get(v_slider, ['max'])])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+      {%- endset -%}
+      {{ ui_include('ui/group/group.html.j2', {'p': {'Justify': 'between', 'Attrs': ui_attrs(['data-testid', 'ends'])}, 'children': c_6}) }}
+    {%- endif %}
+    {%- set c_11 -%}
+      {%- set c_9 -%}
+        {%- set c_7 -%}
+          {{ ui_text(ui_get(v_price, ['label'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+        {%- set c_8 -%}
+          {{ ui_text(ui_money(ui_mul(v_usage, ui_get(v_price, ['rate'])), ui_get(v_price, ['currency']))) }}
+        {%- endset -%}
+        {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '4xl', 'Weight': 'bold', 'Attrs': ui_attrs(['data-testid', 'estimate'])}, 'children': c_8}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_9}) }}
+      {%- set c_10 -%}
+        {{ ui_text(v_cta) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Href': ui_s(v_href), 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_10}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Justify': 'between', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_11}) }}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv(['mx-auto w-full max-w-xl', ('rounded bg-card p-6 inset-ring inset-ring-border' if ui_t(ui_eq(v_layout, 'card')) else '')])), 'Attrs': ui_attrs(['data-testid', 'usage'])}, 'children': c_12}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'tone': v_tone, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_13}) }}
diff --git a/packages/jinja2/ui/blocks/usp-strip.html.j2 b/packages/jinja2/ui/blocks/usp-strip.html.j2
new file mode 100644
index 0000000..dd8641f
--- /dev/null
+++ b/packages/jinja2/ui/blocks/usp-strip.html.j2
@@ -0,0 +1,56 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/usp-strip.json
+    The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted panel, cards: a card each, bar: a thin line of icons and titles), tone, density.
+    Props (p): id, title, perks, empty, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], '') -%}
+{%- set v_perks = ui_def(p['perks'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_layout = ui_def(p['layout'], 'strip') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_10 -%}
+  {%- if ui_t(ui_eq(ui_len(v_perks), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'truck', 'title': v_empty}}) }}
+  {%- elif ui_t(ui_eq(v_layout, 'bar')) %}
+    {%- set c_3 -%}
+      {%- for v_p in ui_l(v_perks) %}
+        {%- set c_2 -%}
+          {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 16}}) }}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_p, ['title'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_1}) }}
+        {%- endset -%}
+        {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center gap-2 text-sm font-medium', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_2}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-wrap items-center justify-center gap-x-8 gap-y-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_3}) }}
+  {%- else %}
+    {%- set c_9 -%}
+      {%- for v_p in ui_l(v_perks) %}
+        {%- set c_8 -%}
+          {%- set c_4 -%}
+            {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 20}}) }}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_4}) }}
+          {%- set c_7 -%}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_p, ['title'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}) }}
+            {%- set c_6 -%}
+              {{ ui_text(ui_get(v_p, ['text'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_6}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_7}) }}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Class': ui_s(('rounded bg-card inset-ring inset-ring-border p-6' if ui_t(ui_eq(v_layout, 'cards')) else '')), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-4', 'Class': ui_s(ui_cnv(['gap-4', ('rounded bg-muted p-6' if ui_t(ui_eq(v_layout, 'strip')) else '')])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_9}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_10}) }}
diff --git a/packages/jinja2/ui/blocks/video-grid.html.j2 b/packages/jinja2/ui/blocks/video-grid.html.j2
new file mode 100644
index 0000000..c45c6cf
--- /dev/null
+++ b/packages/jinja2/ui/blocks/video-grid.html.j2
@@ -0,0 +1,64 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/video-grid.json
+    Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone, density.
+    Props (p): id, title, quotes, empty, playLabel, byLine, cols, caption, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_quotes = ui_def(p['quotes'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_playLabel = ui_def(p['playLabel'], none) -%}
+{%- set v_byLine = ui_def(p['byLine'], none) -%}
+{%- set v_cols = ui_def(p['cols'], '1-3') -%}
+{%- set v_caption = ui_def(p['caption'], 'below') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(ui_len(v_quotes), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'video', 'title': v_empty}}) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- for v_q in ui_l(v_quotes) %}
+        {%- set c_9 -%}
+          {%- set c_5 -%}
+            {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': ui_get(v_q, ['author'])}}) }}
+            {%- set c_1 -%}
+              {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'play', 'Size': 20}}) }}
+            {%- endset -%}
+            {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'button', 'Class': 'absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0', 'Attrs': ui_attrs(['aria-label', ui_tpl(v_playLabel, [ui_get(v_q, ['author'])]), 'data-testid', 'play'])}, 'children': c_1}) }}
+            {%- if ui_t(ui_eq(v_caption, 'overlay')) %}
+              {%- set c_4 -%}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_get(v_q, ['author'])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}) }}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_tpl(v_byLine, [ui_get(v_q, ['role']), ui_get(v_q, ['company'])])) }}
+                {%- endset -%}
+                {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}) }}
+              {%- endset -%}
+              {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'absolute inset-x-0 bottom-0 rounded bg-background p-4', 'Attrs': ui_attrs(['data-testid', 'caption'])}, 'children': c_4}) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'relative'}, 'children': c_5}) }}
+          {%- if ui_t(ui_eq(v_caption, 'below')) %}
+            {%- set c_8 -%}
+              {%- set c_6 -%}
+                {{ ui_text(ui_get(v_q, ['author'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_6}) }}
+              {%- set c_7 -%}
+                {{ ui_text(ui_tpl(v_byLine, [ui_get(v_q, ['role']), ui_get(v_q, ['company'])])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_7}) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Tag': 'figcaption', 'Attrs': ui_attrs(['data-testid', 'caption'])}, 'children': c_8}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('blocks/figure-block.html.j2', {'p': {'className': ui_cnv(['m-0 flex flex-col gap-4']), 'testid': 'item'}, 'children': c_9}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': ui_s(v_cols), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_10}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_11}) }}
diff --git a/packages/jinja2/ui/blocks/video-modal.html.j2 b/packages/jinja2/ui/blocks/video-modal.html.j2
new file mode 100644
index 0000000..052aa6a
--- /dev/null
+++ b/packages/jinja2/ui/blocks/video-modal.html.j2
@@ -0,0 +1,65 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/video-modal.json
+    A dialog with a walkthrough video: a title and a close button, the player area with a play button and, optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size (default, wide), outline (none, chapters: a list under the player), tone.
+    Props (p): id, title, text, close, play, chaptersTitle, chapters, size, outline, tone, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_text = ui_def(p['text'], none) -%}
+{%- set v_close = ui_def(p['close'], none) -%}
+{%- set v_play = ui_def(p['play'], none) -%}
+{%- set v_chaptersTitle = ui_def(p['chaptersTitle'], none) -%}
+{%- set v_chapters = ui_def(p['chapters'], none) -%}
+{%- set v_size = ui_def(p['size'], 'default') -%}
+{%- set v_outline = ui_def(p['outline'], 'none') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_13 -%}
+  {%- set c_12 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(v_text) }}
+      {%- endset -%}
+      {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_1}) }}
+      {%- set c_2 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'x', 'Size': 16}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Type': 'button', 'Class': 'shrink-0', 'Attrs': ui_attrs(['aria-label', v_close, 'data-testid', 'modal-close'])}, 'children': c_2}) }}
+    {%- endset -%}
+    {{ ui_include('ui/group/group.html.j2', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'between'}, 'children': c_3}) }}
+    {%- set c_5 -%}
+      {{ ui_include('blocks/media-frame.html.j2', {'p': {'alt': v_title}}) }}
+      {%- set c_4 -%}
+        {{ ui_include('ui/lucide-icon/lucide-icon.html.j2', {'p': {'Name': 'play', 'Size': 24}}) }}
+      {%- endset -%}
+      {{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'button', 'Class': 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded', 'Attrs': ui_attrs(['aria-label', v_play, 'data-testid', 'play'])}, 'children': c_4}) }}
+    {%- endset -%}
+    {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'relative', 'Attrs': ui_attrs(['data-testid', 'player'])}, 'children': c_5}) }}
+    {%- if ui_t(ui_and([ui_eq(v_outline, 'chapters'), ui_gt(ui_len(v_chapters), 0)])) %}
+      {%- set c_11 -%}
+        {%- set c_6 -%}
+          {{ ui_text(v_chaptersTitle) }}
+        {%- endset -%}
+        {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_6}) }}
+        {%- set c_10 -%}
+          {%- for v_c in ui_l(v_chapters) %}
+            {%- set c_9 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_c, ['title'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_7}) }}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_c, ['text'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_8}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-baseline gap-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_9}) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ ui_include('ui/list/list.html.j2', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_10}) }}
+      {%- endset -%}
+      {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'chapters'])}, 'children': c_11}) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv(['mx-auto w-full', ('max-w-4xl' if ui_t(ui_eq(v_size, 'wide')) else 'max-w-2xl'), 'rounded bg-card inset-ring inset-ring-border p-4 shadow-lg'])), 'Attrs': ui_attrs(['role', 'dialog', 'aria-label', v_title, 'data-testid', 'video-modal'])}, 'children': c_12}) }}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_13}) }}
diff --git a/packages/jinja2/ui/blocks/weighted-title.html.j2 b/packages/jinja2/ui/blocks/weighted-title.html.j2
new file mode 100644
index 0000000..f23ca39
--- /dev/null
+++ b/packages/jinja2/ui/blocks/weighted-title.html.j2
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/weighted-title.json
+    A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text.
+    Props (p): id, title, weights, level. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_weights = ui_def(p['weights'], none) -%}
+{%- set v_level = ui_def(p['level'], 1) -%}
+{%- set c_2 -%}
+  {%- for v_word in ui_l(ui_words(v_title)) %}
+    {%- set v_i = loop.index0 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_word) }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': ui_s(ui_nth(v_weights, v_i))}, 'children': c_1}) }}
+    {{ ui_text(' ') }}
+  {%- endfor %}
+{%- endset -%}
+{{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(v_level), 'Size': '5xl', 'Weight': 'semibold', 'Class': ui_s(ui_cnv(['text-center tracking-tight text-background', ui_preset('blocks/presets/defaults.json', ['hero', 'title'])])), 'Attrs': ui_attrs(['id', v_id])}, 'children': c_2}) }}
diff --git a/packages/jinja2/ui/blocks/zone-rows.html.j2 b/packages/jinja2/ui/blocks/zone-rows.html.j2
new file mode 100644
index 0000000..0bbaac7
--- /dev/null
+++ b/packages/jinja2/ui/blocks/zone-rows.html.j2
@@ -0,0 +1,93 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/zone-rows.json
+    The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the minimum order, the time and an express badge.
+    Props (p): zones, labels. -#}
+{%- set v_zones = ui_def(p['zones'], none) -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set c_23 -%}
+  {%- set c_22 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['caption'])) }}
+    {%- endset -%}
+    {{ ui_include('ui/table/table-caption.html.j2', {'p': {'Class': 'sr-only'}, 'children': c_1}) }}
+    {%- set c_9 -%}
+      {%- set c_8 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['zone'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'px-4 py-2'}, 'children': c_2}) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['price'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_3}) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['freeFrom'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_4}) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_labels, ['minOrder'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'hidden py-2 md:table-cell'}, 'children': c_5}) }}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['time'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_6}) }}
+        {%- set c_7 -%}
+          {{ ui_text(ui_get(v_labels, ['express'])) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-head-cell.html.j2', {'p': {'Scope': 'col', 'Class': 'hidden py-2 pr-4 sm:table-cell'}, 'children': c_7}) }}
+      {%- endset -%}
+      {{ ui_include('ui/table/table-row.html.j2', {'p': {}, 'children': c_8}) }}
+    {%- endset -%}
+    {{ ui_include('ui/table/table-head.html.j2', {'p': {'Class': 'bg-muted'}, 'children': c_9}) }}
+    {%- set c_21 -%}
+      {%- for v_z in ui_l(v_zones) %}
+        {%- set c_20 -%}
+          {%- set c_13 -%}
+            {%- set c_12 -%}
+              {%- set c_10 -%}
+                {{ ui_text(ui_get(v_z, ['name'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_10}) }}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_z, ['area'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_11}) }}
+            {%- endset -%}
+            {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '0'}, 'children': c_12}) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'px-4 py-4'}, 'children': c_13}) }}
+          {%- set c_14 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['price']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'font-medium'}, 'children': c_14}) }}
+          {%- set c_15 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['freeFrom']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {}, 'children': c_15}) }}
+          {%- set c_16 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['minOrder']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'hidden md:table-cell'}, 'children': c_16}) }}
+          {%- set c_17 -%}
+            {{ ui_text(ui_get(v_z, ['time'])) }}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {}, 'children': c_17}) }}
+          {%- set c_19 -%}
+            {%- if ui_t(ui_get(v_z, ['express'])) %}
+              {%- set c_18 -%}
+                {{ ui_text(ui_get(v_z, ['express'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'default'}, 'children': c_18}) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ ui_include('ui/table/table-cell.html.j2', {'p': {'Class': 'hidden pr-4 sm:table-cell'}, 'children': c_19}) }}
+        {%- endset -%}
+        {{ ui_include('ui/table/table-row.html.j2', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_20}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/table/table-body.html.j2', {'p': {}, 'children': c_21}) }}
+  {%- endset -%}
+  {{ ui_include('ui/table/table.html.j2', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'zone-table'])}, 'children': c_22}) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'w-full overflow-x-auto rounded inset-ring inset-ring-border'}, 'children': c_23}) }}
diff --git a/packages/jinja2/ui/blocks/zone-table.html.j2 b/packages/jinja2/ui/blocks/zone-table.html.j2
new file mode 100644
index 0000000..415549b
--- /dev/null
+++ b/packages/jinja2/ui/blocks/zone-table.html.j2
@@ -0,0 +1,88 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/zone-table.json
+    Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.
+    Props (p): id, title, lead, zones, empty, labels, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = ui_def(p['id'], none) -%}
+{%- set v_title = ui_def(p['title'], none) -%}
+{%- set v_lead = ui_def(p['lead'], '') -%}
+{%- set v_zones = ui_def(p['zones'], none) -%}
+{%- set v_empty = ui_def(p['empty'], '') -%}
+{%- set v_labels = ui_def(p['labels'], none) -%}
+{%- set v_layout = ui_def(p['layout'], 'table') -%}
+{%- set v_tone = ui_def(p['tone'], 'default') -%}
+{%- set v_density = ui_def(p['density'], 'default') -%}
+{%- set v_landmarkLabel = ui_def(p['landmarkLabel'], none) -%}
+{%- set c_18 -%}
+  {%- if ui_t(ui_eq(ui_len(v_zones), 0)) %}
+    {{ ui_include('blocks/empty-state.html.j2', {'p': {'icon': 'map', 'title': v_empty}}) }}
+  {%- elif ui_t(ui_eq(v_layout, 'table')) %}
+    {{ ui_include('blocks/zone-rows.html.j2', {'p': {'zones': v_zones, 'labels': v_labels}}) }}
+  {%- else %}
+    {%- set c_17 -%}
+      {%- for v_z in ui_l(v_zones) %}
+        {%- set c_16 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_z, ['name'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/title/title.html.j2', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_1}) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_z, ['area'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/text/text.html.j2', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}) }}
+          {%- endset -%}
+          {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '2'}, 'children': c_3}) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['price']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ ui_include('ui/text/text.html.j2', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_4}) }}
+          {%- set c_14 -%}
+            {%- set c_7 -%}
+              {%- set c_5 -%}
+                {{ ui_text(ui_get(v_labels, ['freeFrom'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-muted-foreground'}, 'children': c_5}) }}
+              {%- set c_6 -%}
+                {{ ui_text(ui_money(ui_get(v_z, ['freeFrom']), ui_get(v_z, ['currency']))) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'font-medium'}, 'children': c_6}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_7}) }}
+            {%- set c_10 -%}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_labels, ['minOrder'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-muted-foreground'}, 'children': c_8}) }}
+              {%- set c_9 -%}
+                {{ ui_text(ui_money(ui_get(v_z, ['minOrder']), ui_get(v_z, ['currency']))) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'font-medium'}, 'children': c_9}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_10}) }}
+            {%- set c_13 -%}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_labels, ['time'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'text-muted-foreground'}, 'children': c_11}) }}
+              {%- set c_12 -%}
+                {{ ui_text(ui_get(v_z, ['time'])) }}
+              {%- endset -%}
+              {{ ui_include('ui/inline/inline.html.j2', {'p': {'Class': 'font-medium'}, 'children': c_12}) }}
+            {%- endset -%}
+            {{ ui_include('ui/list/list-item.html.j2', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_13}) }}
+          {%- endset -%}
+          {{ ui_include('ui/list/list.html.j2', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2 border-t border-border pt-4'}, 'children': c_14}) }}
+          {%- if ui_t(ui_get(v_z, ['express'])) %}
+            {%- set c_15 -%}
+              {{ ui_text(ui_get(v_z, ['express'])) }}
+            {%- endset -%}
+            {{ ui_include('ui/badge/badge.html.j2', {'p': {'Variant': 'secondary', 'Size': 'default', 'Class': 'w-fit'}, 'children': c_15}) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ ui_include('ui/stack/stack.html.j2', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_16}) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ ui_include('ui/grid/grid.html.j2', {'p': {'Cols': '1-3', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_17}) }}
+  {%- endif %}
+{%- endset -%}
+{{ ui_include('blocks/section-frame.html.j2', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_18}) }}
diff --git a/packages/jinja2/ui/package.json b/packages/jinja2/ui/package.json
new file mode 100644
index 0000000..e3cddae
--- /dev/null
+++ b/packages/jinja2/ui/package.json
@@ -0,0 +1,126 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "@ui8kit/jinja2-ui",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Jinja2 templates (40 bricks, 72 parts) generated by xgen from xgen/specs; Python helpers in py/ui8kit_jinja.",
+  "ui8kit": {
+    "runtime": "jinja2",
+    "generated": true,
+    "kit": [
+      "ui",
+      "py"
+    ],
+    "composition": [
+      "blocks"
+    ],
+    "blockRoot": [
+      "blocks/about-company.html.j2",
+      "blocks/about-me.html.j2",
+      "blocks/activity-feed.html.j2",
+      "blocks/announcement-bar.html.j2",
+      "blocks/app-shell.html.j2",
+      "blocks/article-body.html.j2",
+      "blocks/auth-card.html.j2",
+      "blocks/auth-layout.html.j2",
+      "blocks/before-after.html.j2",
+      "blocks/bento-grid.html.j2",
+      "blocks/bottom-nav.html.j2",
+      "blocks/cart-drawer.html.j2",
+      "blocks/cart-list.html.j2",
+      "blocks/category-nav.html.j2",
+      "blocks/chart-panel.html.j2",
+      "blocks/checklist.html.j2",
+      "blocks/checkout-form.html.j2",
+      "blocks/comparison-table.html.j2",
+      "blocks/contact-form.html.j2",
+      "blocks/cookie-banner.html.j2",
+      "blocks/credit-packs.html.j2",
+      "blocks/cta-band.html.j2",
+      "blocks/cta-banner.html.j2",
+      "blocks/cta-proof.html.j2",
+      "blocks/dashboard-overview.html.j2",
+      "blocks/dashboard-shell.html.j2",
+      "blocks/delivery-info.html.j2",
+      "blocks/empty-panel.html.j2",
+      "blocks/error-page.html.j2",
+      "blocks/faq-help.html.j2",
+      "blocks/faq-list.html.j2",
+      "blocks/faq-split.html.j2",
+      "blocks/feature-accordion.html.j2",
+      "blocks/feature-grid.html.j2",
+      "blocks/feature-showcase.html.j2",
+      "blocks/feature-split.html.j2",
+      "blocks/feature-sticky.html.j2",
+      "blocks/feature-tabs.html.j2",
+      "blocks/footer-card.html.j2",
+      "blocks/footer-split.html.j2",
+      "blocks/hero-classic.html.j2",
+      "blocks/hero-head.html.j2",
+      "blocks/hero-prompt.html.j2",
+      "blocks/hero-split.html.j2",
+      "blocks/icon-wall.html.j2",
+      "blocks/job-board.html.j2",
+      "blocks/kanban-board.html.j2",
+      "blocks/logo-cloud.html.j2",
+      "blocks/logo-ribbon.html.j2",
+      "blocks/media-list.html.j2",
+      "blocks/mega-menu.html.j2",
+      "blocks/metric-row.html.j2",
+      "blocks/milestone-timeline.html.j2",
+      "blocks/nav-bar.html.j2",
+      "blocks/newsletter-form.html.j2",
+      "blocks/order-summary.html.j2",
+      "blocks/order-table.html.j2",
+      "blocks/page-intro.html.j2",
+      "blocks/page-trail.html.j2",
+      "blocks/photo-gallery.html.j2",
+      "blocks/post-card.html.j2",
+      "blocks/post-grid.html.j2",
+      "blocks/post-header.html.j2",
+      "blocks/post-showcase.html.j2",
+      "blocks/post-split.html.j2",
+      "blocks/pricing-card.html.j2",
+      "blocks/pricing-tiers.html.j2",
+      "blocks/product-card.html.j2",
+      "blocks/product-detail.html.j2",
+      "blocks/product-grid.html.j2",
+      "blocks/product-info.html.j2",
+      "blocks/profile-form.html.j2",
+      "blocks/project-grid.html.j2",
+      "blocks/proof-band.html.j2",
+      "blocks/quote-split.html.j2",
+      "blocks/region.html.j2",
+      "blocks/review-list.html.j2",
+      "blocks/section-frame.html.j2",
+      "blocks/shell-footer.html.j2",
+      "blocks/shell-sidebar.html.j2",
+      "blocks/shell-topbar.html.j2",
+      "blocks/shopping-cart.html.j2",
+      "blocks/sidebar-nav.html.j2",
+      "blocks/sidebar-panel.html.j2",
+      "blocks/signup-wizard.html.j2",
+      "blocks/site-footer.html.j2",
+      "blocks/site-header.html.j2",
+      "blocks/sitemap-footer.html.j2",
+      "blocks/skeleton-layout.html.j2",
+      "blocks/slot-board.html.j2",
+      "blocks/stats-band.html.j2",
+      "blocks/stepper.html.j2",
+      "blocks/steps-list.html.j2",
+      "blocks/store-hero.html.j2",
+      "blocks/store-locations.html.j2",
+      "blocks/story-tabs.html.j2",
+      "blocks/support-channels.html.j2",
+      "blocks/team-grid.html.j2",
+      "blocks/template-grid.html.j2",
+      "blocks/testimonial-grid.html.j2",
+      "blocks/tour-callout.html.j2",
+      "blocks/usage-calculator.html.j2",
+      "blocks/usp-strip.html.j2",
+      "blocks/video-grid.html.j2",
+      "blocks/video-modal.html.j2",
+      "blocks/zone-table.html.j2"
+    ]
+  }
+}
diff --git a/packages/jinja2/ui/py/ui8kit_jinja/__init__.py b/packages/jinja2/ui/py/ui8kit_jinja/__init__.py
new file mode 100644
index 0000000..2fe1421
--- /dev/null
+++ b/packages/jinja2/ui/py/ui8kit_jinja/__init__.py
@@ -0,0 +1,64 @@
+# Code generated by xgen. DO NOT EDIT.
+# Source: xgen/runtimes/jinja2/assets/py/ui8kit_jinja/__init__.py
+"""ui8kit templates for Jinja2: `environment(root)` gives an Environment over the package folder with the ui_* helpers.
+Templates are included as ui/<brick>/<part>.html.j2 and blocks/<organism>.html.j2, with `p` (props) and `children` (markup)."""
+
+from __future__ import annotations
+
+import functools
+from typing import Any
+
+from jinja2 import ChainableUndefined, Environment, FileSystemLoader, pass_environment
+from jinja2.runtime import Undefined
+from markupsafe import Markup
+
+from . import runtime as rt
+
+
+def _plain(v: Any) -> Any:
+    if isinstance(v, Undefined):
+        return None
+    if isinstance(v, list):
+        return [_plain(x) for x in v]
+    return v
+
+
+def _wrap(f: Any, safe: bool = False) -> Any:
+    @functools.wraps(f)
+    def call(*args: Any) -> Any:
+        out = f(*[_plain(a) for a in args])
+        return Markup(out) if safe else out
+    return call
+
+
+@pass_environment
+def _include(env: Environment, name: Any, vars: Any) -> Markup:
+    return Markup(env.get_template(str(name)).render(_plain(vars) or {}))
+
+
+def _merge(a: Any, b: Any) -> dict:
+    return {**(_plain(a) or {}), **(_plain(b) or {})}
+
+
+_NAMES = {
+    "and": "and_", "or": "or_", "def": "def_", "len": "len_", "str": "str_", "range": "range_", "max": "max_", "min": "min_", "round": "round_",
+}
+_PLAIN = [
+    "get", "field", "s", "text", "t", "n", "i", "eq", "lt", "gt", "le", "ge", "add", "sub", "mul", "div", "and", "or", "coalesce", "def", "l",
+    "len", "spread", "str", "has", "cnv", "tpl", "num", "money", "at", "page_window", "fit_cols", "uniq", "words", "nbsp", "nth", "range",
+    "max", "min", "round", "count", "where", "match", "pick", "sum_by", "first_of", "max_by", "css", "attrs", "is_set_str", "default_if_empty",
+    "map_or", "int_map_or", "bool_str", "concat_trim", "cn", "resolve_tag", "title_tag", "compose", "recipe", "preset",
+]
+
+
+def environment(root: str, **options: Any) -> Environment:
+    """an Environment over the package folder with the helpers registered (autoescape on, chainable undefined)"""
+    rt.set_root(root)
+    env = Environment(loader=FileSystemLoader(root), autoescape=True, undefined=ChainableUndefined, **options)
+    for name in _PLAIN:
+        env.globals["ui_" + name] = _wrap(getattr(rt, _NAMES.get(name, name)))
+    env.globals["ui_attr_html"] = _wrap(rt.attr_html, safe=True)
+    env.globals["ui_lucide"] = _wrap(rt.lucide, safe=True)
+    env.globals["ui_include"] = _include
+    env.globals["ui_merge"] = _merge
+    return env
diff --git a/packages/jinja2/ui/py/ui8kit_jinja/cn_merge.py b/packages/jinja2/ui/py/ui8kit_jinja/cn_merge.py
new file mode 100644
index 0000000..e0cb1db
--- /dev/null
+++ b/packages/jinja2/ui/py/ui8kit_jinja/cn_merge.py
@@ -0,0 +1,140 @@
+# Code generated by xgen. DO NOT EDIT.
+# Source: xgen/runtimes/jinja2/assets/py/ui8kit_jinja/cn_merge.py
+"""cn: class fragments joined with tailwind-merge conflict resolution (the last class of a group wins, and a class removes
+the earlier classes of the groups it overrides: p-2 removes px-4, not the reverse). Port of cn_merge.go."""
+
+from __future__ import annotations
+
+_DISPLAY = {"block", "inline", "inline-block", "inline-flex", "flex", "grid", "contents", "hidden"}
+_PREFIXES = [
+    ("gap-x-", "gap-x"), ("gap-y-", "gap-y"), ("items-", "align-items"), ("justify-", "justify-content"),
+    ("self-", "align-self"), ("content-", "align-content"), ("overflow-x-", "overflow-x"), ("overflow-y-", "overflow-y"),
+    ("inset-x-", "inset-x"), ("inset-y-", "inset-y"), ("min-w-", "min-width"), ("min-h-", "min-height"),
+    ("max-w-", "max-width"), ("max-h-", "max-height"), ("shadow-", "shadow"), ("ring-", "ring"), ("rounded-", "rounded"),
+    ("leading-", "leading"), ("tracking-", "tracking"), ("opacity-", "opacity"), ("z-", "z"), ("top-", "top"),
+    ("right-", "right"), ("bottom-", "bottom"), ("left-", "left"),
+]
+_TEXT_SIZES = {"text-xs", "text-sm", "text-base", "text-lg", "text-xl"} | {f"text-{n}xl" for n in range(2, 10)}
+_WEIGHTS = {f"font-{w}" for w in ("thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black")}
+
+
+def _is_number(s: str) -> bool:
+    if s.startswith("["):
+        return True
+    return s != "" and all(c in "0123456789." for c in s)
+
+
+def _split_variant(token: str) -> tuple[str, str]:
+    depth, cut = 0, -1
+    for i, c in enumerate(token):
+        if c == "[":
+            depth += 1
+        elif c == "]":
+            depth = max(0, depth - 1)
+        elif c == ":" and depth == 0:
+            cut = i
+    core = token if cut == -1 else token[cut + 1:]
+    core = core[1:] if core.startswith("!") else core
+    return ("" if cut == -1 else token[:cut + 1]), core
+
+
+def _has_direction(core: str, kind: str) -> bool:
+    return any(core.startswith(kind + d) for d in ("x-", "y-", "t-", "r-", "b-", "l-", "s-", "e-"))
+
+
+def _space_axis(core: str, kind: str, n: str) -> list[str]:
+    if core.startswith(kind + "x-"):
+        return [f"{n}-x", f"{n}-r", f"{n}-l", f"{n}-s", f"{n}-e"]
+    if core.startswith(kind + "y-"):
+        return [f"{n}-y", f"{n}-t", f"{n}-b"]
+    for s in "trbl":
+        if core.startswith(kind + s + "-"):
+            return [f"{n}-{s}"]
+    return []
+
+
+def _groups(core: str) -> list[str]:
+    if core in _DISPLAY:
+        return ["display"]
+    if core in ("flex-row", "flex-col", "flex-row-reverse", "flex-col-reverse"):
+        return ["flex-direction"]
+    if core in ("static", "relative", "absolute", "fixed", "sticky"):
+        return ["position"]
+    if core in ("isolate", "isolation-auto"):
+        return ["isolation"]
+    for kind in ("inset-ring", "ring"):
+        if core == kind:
+            return [kind + "-width"]
+        if core.startswith(kind + "-"):
+            return [kind + ("-width" if _is_number(core[len(kind) + 1:]) else "-color")]
+    for p, g in _PREFIXES:
+        if core.startswith(p):
+            return [g]
+    if core.startswith("gap-"):
+        return ["gap", "gap-x", "gap-y"]
+    if core.startswith("inset-"):
+        return ["inset", "inset-x", "inset-y", "top", "right", "bottom", "left"]
+    if core.startswith("overflow-"):
+        return ["overflow", "overflow-x", "overflow-y"]
+    if core == "border" or (core.startswith("border-") and _is_number(core[7:])):
+        return ["border-width"] + [f"border-w-{s}" for s in "xytrblse"]
+    if len(core) >= 8 and core.startswith("border-") and core[7] in "xytrblse" and (len(core) == 8 or (core[8] == "-" and _is_number(core[9:]))):
+        side = core[7]
+        if side == "x":
+            return ["border-w-x", "border-w-r", "border-w-l", "border-w-s", "border-w-e"]
+        if side == "y":
+            return ["border-w-y", "border-w-t", "border-w-b"]
+        return ["border-w-" + side]
+    if core in ("text-left", "text-center", "text-right", "text-justify", "text-start", "text-end"):
+        return ["text-align"]
+    if core == "rounded":
+        return ["rounded"]
+    if core in ("shadow", "shadow-none"):
+        return ["shadow"]
+    if core in ("flex-1", "flex-auto", "flex-none", "flex-initial"):
+        return ["flex-size", "flex-grow", "flex-shrink", "flex-basis"]
+    if core == "grow" or core.startswith("grow-"):
+        return ["flex-grow"]
+    if core in ("shrink", "shrink-0"):
+        return ["flex-shrink"]
+    if core.startswith("size-"):
+        return ["size", "width", "height"]
+    if core.startswith("w-"):
+        return ["width"]
+    if core.startswith("h-"):
+        return ["height"]
+    for kind, n in (("p", "padding"), ("m", "margin")):
+        if core.startswith(kind + "-") and not _has_direction(core, kind):
+            return [n] + [f"{n}-{s}" for s in "xytrblse"]
+        axis = _space_axis(core, kind, n)
+        if axis:
+            return axis
+    if core.startswith("bg-"):
+        return ["bg"]
+    if core in _TEXT_SIZES or (core.startswith("text-[") and len(core) > 6 and (core[6].isdigit() or core[6] == ".")):
+        return ["text-size", "leading"]
+    if core.startswith("text-"):
+        return ["text-color"]
+    if core in _WEIGHTS:
+        return ["font-weight"]
+    return []
+
+
+def merge(classes: list[str]) -> str:
+    kept: list[tuple[str, str]] = []
+    for chunk in classes:
+        for token in str(chunk).split():
+            prefix, core = _split_variant(token)
+            key = ""
+            removes: list[str] = []
+            if core:
+                g = _groups(core)
+                if g:
+                    key, removes = prefix + g[0], g[1:]
+                else:
+                    key = "=" + token
+            if key:
+                drop = {key} | {prefix + r for r in removes}
+                kept = [it for it in kept if it[1] not in drop]
+            kept.append((token, key))
+    return " ".join(t for t, _ in kept)
diff --git a/packages/jinja2/ui/py/ui8kit_jinja/runtime.py b/packages/jinja2/ui/py/ui8kit_jinja/runtime.py
new file mode 100644
index 0000000..0d81592
--- /dev/null
+++ b/packages/jinja2/ui/py/ui8kit_jinja/runtime.py
@@ -0,0 +1,495 @@
+# Code generated by xgen. DO NOT EDIT.
+# Source: xgen/runtimes/jinja2/assets/py/ui8kit_jinja/runtime.py
+"""The helpers of the generated templates. Values are the JSON shapes of the TypeScript props (str, int/float, bool,
+None, list, dict) read with the rules of the TypeScript output: JS truthiness, strict equality, String(), clsx +
+tailwind-merge. Every helper is None-safe, like `?.`. Port of the Go runtime (dyn.go, expr.go, utils.go) and of the PHP
+runtime of the Twig package, so every static runtime prints the same DOM."""
+
+from __future__ import annotations
+
+import html
+import json
+import math
+import os
+import re
+from typing import Any
+
+from .cn_merge import merge
+
+_ROOT = ""
+_JSON: dict[str, Any] = {}
+
+
+def set_root(root: str) -> None:
+    global _ROOT
+    _ROOT = root
+
+
+def load_json(path: str) -> Any:
+    if path not in _JSON:
+        with open(os.path.join(_ROOT, path), encoding="utf-8") as f:
+            _JSON[path] = json.load(f)
+    return _JSON[path]
+
+
+# ------------------------------------------------------------------ values
+
+def _num(v: Any) -> bool:
+    return isinstance(v, (int, float)) and not isinstance(v, bool)
+
+
+def get(v: Any, path: list) -> Any:
+    """a path of fields: get(plan, ['price', 'amount']); `length` of a list or a text is its size"""
+    for k in path:
+        k = str(k)
+        if isinstance(v, list):
+            if k == "length":
+                v = len(v)
+            elif k.isdigit() and int(k) < len(v):
+                v = v[int(k)]
+            else:
+                return None
+        elif isinstance(v, dict):
+            v = v.get(k)
+        elif isinstance(v, str) and k == "length":
+            v = len(v)
+        else:
+            return None
+    return v
+
+
+def field(item: Any, name: str, zero: Any) -> Any:
+    """a field of a brick record: the JSON key matched without regard to case, as Go json does"""
+    if not isinstance(item, dict):
+        return zero
+    if name in item:
+        return zero if item[name] is None else item[name]
+    for k, v in item.items():
+        if str(k).lower() == name.lower():
+            return zero if v is None else v
+    return zero
+
+
+def fmt_num(f: Any) -> str:
+    """String(n) of JavaScript for the numbers the views print"""
+    if isinstance(f, int):
+        return str(f)
+    if math.isnan(f):
+        return "NaN"
+    if math.isinf(f):
+        return "Infinity" if f > 0 else "-Infinity"
+    if f == math.floor(f) and abs(f) < 1e21:
+        return "%d" % int(f)
+    return repr(f)
+
+
+def s(v: Any) -> str:
+    if v is None:
+        return ""
+    if isinstance(v, str):
+        return v
+    if isinstance(v, bool):
+        return "true" if v else "false"
+    if _num(v):
+        return fmt_num(v)
+    return json.dumps(v, separators=(",", ":"), ensure_ascii=False)
+
+
+def text(v: Any) -> str:
+    """what a text node shows: nothing for None and booleans"""
+    return "" if isinstance(v, bool) else s(v)
+
+
+def t(v: Any) -> bool:
+    """JS truthiness: None, False, 0, NaN and '' are false"""
+    if v is None:
+        return False
+    if isinstance(v, bool):
+        return v
+    if isinstance(v, str):
+        return v != ""
+    if _num(v):
+        return v != 0 and not math.isnan(v)
+    return True
+
+
+def n(v: Any) -> float:
+    if _num(v):
+        return float(v)
+    if isinstance(v, bool):
+        return 1.0 if v else 0.0
+    if isinstance(v, str):
+        try:
+            return float(v.strip())
+        except ValueError:
+            return 0.0
+    return 0.0
+
+
+def _round_half_away(f: float) -> float:
+    return math.copysign(math.floor(abs(f) + 0.5), f)
+
+
+def i(v: Any) -> int:
+    return int(_round_half_away(n(v)))
+
+
+def eq(a: Any, b: Any) -> bool:
+    """strict equality (===)"""
+    if _num(a) or _num(b):
+        return _num(a) and _num(b) and float(a) == float(b)
+    if a is None:
+        return b is None
+    if isinstance(a, bool) or isinstance(b, bool):
+        return isinstance(a, bool) and isinstance(b, bool) and a == b
+    if isinstance(a, str):
+        return isinstance(b, str) and a == b
+    return False
+
+
+def _cmp(a: Any, b: Any) -> int | None:
+    if isinstance(a, str) and isinstance(b, str):
+        return (a > b) - (a < b)
+    if a is None or b is None:
+        return None
+    x, y = n(a), n(b)
+    return (x > y) - (x < y)
+
+
+def lt(a, b): c = _cmp(a, b); return c is not None and c < 0
+def gt(a, b): c = _cmp(a, b); return c is not None and c > 0
+def le(a, b): c = _cmp(a, b); return c is not None and c <= 0
+def ge(a, b): c = _cmp(a, b); return c is not None and c >= 0
+
+
+def add(a: Any, b: Any) -> Any:
+    if isinstance(a, str) or isinstance(b, str):
+        return s(a) + s(b)
+    return n(a) + n(b)
+
+
+def sub(a, b): return n(a) - n(b)
+def mul(a, b): return n(a) * n(b)
+
+
+def div(a: Any, b: Any) -> float:
+    x, y = n(a), n(b)
+    if y == 0:
+        return math.nan if x == 0 or math.isnan(x) else math.copysign(math.inf, x) * math.copysign(1, y)
+    return x / y
+
+
+def and_(vs: list) -> Any:
+    last = None
+    for v in vs:
+        if not t(v):
+            return v
+        last = v
+    return last
+
+
+def or_(vs: list) -> Any:
+    last = None
+    for v in vs:
+        if t(v):
+            return v
+        last = v
+    return last
+
+
+def coalesce(vs: list) -> Any:
+    return next((v for v in vs if v is not None), None)
+
+
+def def_(v: Any, d: Any) -> Any:
+    """a prop with its default: the default when the prop is None or missing"""
+    return d if v is None else v
+
+
+def l(v: Any) -> list:
+    return v if isinstance(v, list) else []
+
+
+def len_(v: Any) -> int:
+    return len(v) if isinstance(v, str) else len(l(v))
+
+
+def spread(base: Any, fields: dict) -> dict:
+    out = dict(base) if isinstance(base, dict) else {}
+    out.update(fields)
+    return out
+
+
+def str_(v: Any) -> Any:
+    return None if v is None else s(v)
+
+
+def has(v: Any) -> bool:
+    return v is not None
+
+
+def cnv(vs: list) -> str:
+    return merge([s(v) for v in vs if t(v)])
+
+
+def tpl(tmpl: Any, vals: list) -> str:
+    return re.sub(r"\{(\d+)\}", lambda m: s(vals[int(m.group(1))]) if int(m.group(1)) < len(vals) else "", s(tmpl))
+
+
+def _group(f: float, decimals: int) -> str:
+    whole, _, frac = f"{abs(f):.{decimals}f}".partition(".")
+    out = f"{int(whole):,}"
+    frac = frac.rstrip("0")
+    if frac:
+        out += "." + frac
+    if f < 0 and out != "0":
+        out = "-" + out
+    return out
+
+
+def num(v: Any) -> str:
+    return _group(n(v), 3)
+
+
+_CURRENCY = {"USD": "$", "EUR": "\u20ac", "GBP": "\u00a3", "JPY": "\u00a5", "INR": "\u20b9", "CAD": "CA$", "AUD": "A$"}
+
+
+def minor_digits(c: str) -> int:
+    return 0 if c in ("JPY", "KRW") else 2
+
+
+def money(amount: Any, currency: Any) -> str:
+    """integer minor units (Codex v0.4: 1250 = 12.50) -> "$12.50"; whole amounts without the fraction"""
+    c = s(currency)
+    sym = _CURRENCY.get(c, c + "\u00a0")
+    minor = int(_round_half_away(n(amount)))
+    sign = "-" if minor < 0 else ""
+    minor = abs(minor)
+    d = minor_digits(c)
+    whole, rest = divmod(minor, 10 ** d)
+    out = sign + sym + _group(float(whole), 0)
+    if d and rest:
+        out += "." + str(rest).zfill(d)
+    return out
+
+
+def at(d: Any, key: Any) -> str:
+    v = get(d, [s(key)])
+    return s(v) if v is not None else s(key)
+
+
+def page_window(page_v: Any, pages_v: Any) -> list:
+    page, pages = int(n(page_v)), int(n(pages_v))
+    keep = {x for x in (1, pages, page - 1, page, page + 1) if 1 <= x <= pages}
+    out: list = []
+    prev = 0
+    for x in range(1, pages + 1):
+        if x not in keep:
+            continue
+        if x - prev > 1:
+            out.append(None)
+        out.append(x)
+        prev = x
+    return out
+
+
+def fit_cols(cols_v: Any, n_v: Any) -> str:
+    cols, cnt = s(cols_v), int(n(n_v))
+    m = re.fullmatch(r"(-?\d+)-(-?\d+)", cols)
+    if not m:
+        return cols
+    lo, hi = int(m.group(1)), int(m.group(2))
+    if cnt >= hi:
+        return cols
+    known = {"1-2", "1-3", "1-4", "2-3", "2-4", "2-6", "3-6"}
+    for k in range(max(lo, cnt), lo, -1):
+        if f"{lo}-{k}" in known:
+            return f"{lo}-{k}"
+    return str(min(max(cnt, 1), lo))
+
+
+def uniq(v: Any) -> str:
+    parts = s(v).split(", ")
+    return ", ".join(p for idx, p in enumerate(parts) if idx == 0 or p.lower() != parts[idx - 1].lower())
+
+
+def words(v: Any) -> list: return s(v).split(" ")
+def nbsp(v: Any) -> str: return s(v).replace(" ", "\u00a0")
+
+
+def nth(lst: Any, idx: Any) -> Any:
+    xs, k = l(lst), int(n(idx))
+    return xs[k] if 0 <= k < len(xs) else None
+
+
+def range_(c: Any) -> list: return list(range(max(0, int(n(c)))))
+def max_(vs: list) -> float: return max([-math.inf] + [n(v) for v in vs])
+def min_(vs: list) -> float: return min([math.inf] + [n(v) for v in vs])
+def round_(v: Any) -> float: return float(math.floor(n(v) + 0.5))
+
+
+def count(items: Any, f: Any) -> int:
+    return sum(1 for it in l(items) if t(get(it, [s(f)])))
+
+
+def where(items: Any, f: Any, value: Any) -> list:
+    if not t(value):
+        return l(items)
+    return [it for it in l(items) if eq(get(it, [s(f)]), value)]
+
+
+def match(items: Any, f: Any, query: Any) -> list:
+    if not t(query):
+        return l(items)
+    q = s(query).lower()
+    return [it for it in l(items) if q in s(get(it, [s(f)])).lower()]
+
+
+def pick(items: Any, ident: Any) -> Any:
+    return next((it for it in l(items) if eq(get(it, ["id"]), ident)), None)
+
+
+def sum_by(items: Any, a: str, b: str) -> float:
+    return sum((n(get(it, [a])) * n(get(it, [b])) for it in l(items)), 0.0)
+
+
+def first_of(items: Any, f: str) -> Any:
+    xs = l(items)
+    if not xs:
+        return ""
+    v = get(xs[0], [f])
+    return "" if v is None else v
+
+
+def max_by(items: Any, f: str) -> float:
+    return max([0.0] + [n(get(it, [f])) for it in l(items)])
+
+
+def css(triples: list) -> str:
+    return ";".join(s(triples[k]) + ":" + s(triples[k + 1]) + s(triples[k + 2]) for k in range(0, len(triples) - 2, 3))
+
+
+def _compound_hits(c: dict, pick_: Any) -> bool:
+    return all(pick_(k) in str(w).split("|") for k, w in c.items() if k != "class")
+
+
+def recipe(path: str, sel: dict) -> str:
+    """the class string of a recipe table for a selection (organisms: base, each key, the matching compounds)"""
+    r = load_json(path)
+
+    def pick_(k: str) -> str:
+        v = s(sel.get(k)).strip()
+        return v or str((r.get("defaults") or {}).get(k, "")).strip()
+
+    parts = [str(r.get("base", ""))]
+    parts += [str((r.get("byKey") or {}).get(k, {}).get(pick_(k), "")) for k in r.get("keys", [])]
+    parts += [str(c.get("class", "")) for c in r.get("compound", []) or [] if _compound_hits(c, pick_)]
+    return merge([p.strip() for p in parts if p.strip()])
+
+
+def preset(path: str, keys: list) -> Any:
+    return get(get(load_json(path), ["values"]), keys)
+
+
+def attrs(kv: list) -> dict:
+    """free DOM attributes from (name, value) pairs, as React prints them"""
+    out: dict = {}
+    for k in range(0, len(kv) - 1, 2):
+        name, v = s(kv[k]), kv[k + 1]
+        if v is None:
+            continue
+        if isinstance(v, bool):
+            if name.startswith("data-") or name.startswith("aria-"):
+                out[name] = s(v)
+            elif v:
+                out[name] = True
+            continue
+        out[name] = s(v)
+    return out
+
+
+def attr_html(a: Any) -> str:
+    """an attribute map as markup: ` name="value"`, a bare name for True, nothing for None and False"""
+    if not isinstance(a, dict):
+        return ""
+    out = ""
+    for k, v in a.items():
+        if v is None or v is False:
+            continue
+        name = html.escape(str(k), quote=True)
+        out += f" {name}" if v is True else f' {name}="{html.escape(s(v), quote=True)}"'
+    return out
+
+
+# ------------------------------------------------------------------ bricks (expr.go, utils.go, tags.go)
+
+def is_set_str(v: Any) -> bool: return s(v).strip() != ""
+
+
+def default_if_empty(v: Any, fallback: str) -> str:
+    x = s(v).strip()
+    return x or fallback
+
+
+def map_or(v: Any, mapping: dict, fallback: str, lower: bool = False) -> str:
+    x = s(v).strip()
+    if lower:
+        x = x.lower()
+    return str(mapping[x]) if x in mapping else fallback
+
+
+def int_map_or(v: Any, mapping: dict, fallback: str) -> str:
+    k = i(v)
+    return str(mapping[k]) if k in mapping else fallback
+
+
+def bool_str(v: Any) -> str: return "true" if t(v) else "false"
+def concat_trim(parts: list) -> str: return "".join(s(p).strip() for p in parts)
+def cn(parts: list) -> str: return merge([s(p) for p in parts])
+
+
+def compose(path: str, selection: dict, extra: list) -> str:
+    """the brick class contract: recipe base, the selected variants (defaults for empty), compounds, then the tail"""
+    r = load_json(path)
+    defaults = r.get("defaults") or {}
+
+    def pick_(k: str) -> str:
+        c = s(selection.get(k)).strip()
+        return c or str(defaults.get(k, "")).strip()
+
+    parts = [str(r["base"]).strip()] if str(r.get("base", "")).strip() else []
+    for key in r.get("keys", []):
+        choices = (r.get("byKey") or {}).get(key)
+        if choices is None:
+            continue
+        choice = pick_(key)
+        if not choice:
+            if choices:
+                raise ValueError(f"[compose] missing default for key {key}")
+            continue
+        if str(choices.get(choice, "")).strip():
+            parts.append(str(choices[choice]))
+    for c in r.get("compound", []) or []:
+        if _compound_hits(c, pick_) and str(c.get("class", "")).strip():
+            parts.append(str(c["class"]))
+    return cn(parts + list(extra))
+
+
+def resolve_tag(tag: Any, fallback: str, allowed: list) -> str:
+    x = s(tag).strip().lower()
+    return x if x and x in allowed else fallback
+
+
+def title_tag(level: Any) -> str:
+    k = i(level)
+    return f"h{k}" if 1 <= k <= 6 else "h2"
+
+
+def lucide(name: Any) -> str:
+    """the inner markup of a Lucide glyph: its nodes with attributes in name order (circle for an unknown name)"""
+    icons = load_json("ui/lucide-icon/lucide-icons.json")["icons"]
+    nodes = icons.get(s(name)) or icons["circle"]
+    out = ""
+    for tag, a in nodes:
+        out += "<" + tag + "".join(f' {k}="{html.escape(str(a[k]), quote=True)}"' for k in sorted(a)) + "></" + tag + ">"
+    return out
diff --git a/packages/jinja2/ui/pyproject.toml b/packages/jinja2/ui/pyproject.toml
new file mode 100644
index 0000000..8c25bae
--- /dev/null
+++ b/packages/jinja2/ui/pyproject.toml
@@ -0,0 +1,15 @@
+# Code generated by xgen. DO NOT EDIT.
+# Source: xgen/generator/src/jinja2.ts
+[project]
+name = "ui8kit-jinja2-ui"
+version = "0.0.0"
+description = "Jinja2 templates of ui8kit (40 bricks, 72 parts) generated by xgen from xgen/specs"
+requires-python = ">=3.10"
+dependencies = ["Jinja2>=3.1,<4"]
+
+[build-system]
+requires = ["setuptools>=68"]
+build-backend = "setuptools.build_meta"
+
+[tool.setuptools.packages.find]
+where = ["py"]
diff --git a/packages/jinja2/ui/requirements.txt b/packages/jinja2/ui/requirements.txt
new file mode 100644
index 0000000..1cdd940
--- /dev/null
+++ b/packages/jinja2/ui/requirements.txt
@@ -0,0 +1,3 @@
+# Code generated by xgen. DO NOT EDIT.
+# Source: xgen/generator/src/jinja2.ts
+Jinja2>=3.1,<4
diff --git a/packages/jinja2/ui/ui/alert/alert.html.j2 b/packages/jinja2/ui/ui/alert/alert.html.j2
new file mode 100644
index 0000000..2762faa
--- /dev/null
+++ b/packages/jinja2/ui/ui/alert/alert.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/alert.json
+    Alert: Alert renders a div with alert or status semantics.
+    Props (p): Class (string), Variant (string), Role (string), AriaLive (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/alert/alert.variants.json', {'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  data-slot="alert"
+  role="{{ ui_map_or(ui_def(p['Role'], ''), {'status': 'status', 'alert': 'alert'}, 'status') }}"
+  aria-live="{{ ui_default_if_empty(ui_def(p['AriaLive'], ''), 'polite') }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</div>
diff --git a/packages/jinja2/ui/ui/alert/alert.variants.json b/packages/jinja2/ui/ui/alert/alert.variants.json
new file mode 100644
index 0000000..29370d6
--- /dev/null
+++ b/packages/jinja2/ui/ui/alert/alert.variants.json
@@ -0,0 +1,20 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.alert",
+  "base": "flex min-h-8 items-center gap-2 px-2 text-xs font-semibold inset-ring rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-card text-card-foreground inset-ring-border",
+      "destructive": "bg-muted text-destructive inset-ring-destructive",
+      "success": "bg-muted text-foreground inset-ring-border",
+      "warning": "bg-muted text-foreground inset-ring-border"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/badge/badge.html.j2 b/packages/jinja2/ui/ui/badge/badge.html.j2
new file mode 100644
index 0000000..1e38448
--- /dev/null
+++ b/packages/jinja2/ui/ui/badge/badge.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/badge.json
+    Badge: Badge renders label text in a div wrapper.
+    Props (p): Variant (string), Size (string), Class (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/badge/badge.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  data-slot="badge"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</div>
diff --git a/packages/jinja2/ui/ui/badge/badge.variants.json b/packages/jinja2/ui/ui/badge/badge.variants.json
new file mode 100644
index 0000000..adfac0c
--- /dev/null
+++ b/packages/jinja2/ui/ui/badge/badge.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.badge",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-5 px-2 text-xs",
+      "default": "h-6 px-3 text-xs",
+      "lg": "h-8 px-4 text-sm"
+    },
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "secondary": "bg-muted text-foreground inset-ring-transparent",
+      "outline": "bg-transparent text-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/block/block.html.j2 b/packages/jinja2/ui/ui/block/block.html.j2
new file mode 100644
index 0000000..f01c003
--- /dev/null
+++ b/packages/jinja2/ui/ui/block/block.html.j2
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/block.json
+    Block: Block renders a resolved landmark element with children.
+    Props (p): ID (string), Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag(ui_def(p['Tag'], ''), 'div', ['div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'figure', 'search', 'hgroup']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/block/block.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/block/block.variants.json b/packages/jinja2/ui/ui/block/block.variants.json
new file mode 100644
index 0000000..430ecf7
--- /dev/null
+++ b/packages/jinja2/ui/ui/block/block.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.block",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/box/box.html.j2 b/packages/jinja2/ui/ui/box/box.html.j2
new file mode 100644
index 0000000..96c4517
--- /dev/null
+++ b/packages/jinja2/ui/ui/box/box.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/box.json
+    Box: Box renders a div layout wrapper.
+    Props (p): Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag(ui_def(p['Tag'], ''), 'div', ['div']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/box/box.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/box/box.variants.json b/packages/jinja2/ui/ui/box/box.variants.json
new file mode 100644
index 0000000..2ae4cf2
--- /dev/null
+++ b/packages/jinja2/ui/ui/box/box.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.box",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/breadcrumb/breadcrumb.html.j2 b/packages/jinja2/ui/ui/breadcrumb/breadcrumb.html.j2
new file mode 100644
index 0000000..673f9a1
--- /dev/null
+++ b/packages/jinja2/ui/ui/breadcrumb/breadcrumb.html.j2
@@ -0,0 +1,29 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/breadcrumb.json
+    Breadcrumb: Breadcrumb renders the full navigation trail.
+    Props (p): Class (string), Items (BreadcrumbItem[]), AriaLabel (string), DataUI8Kit (string), Attrs (attrs). -#}
+<nav
+  class="{{ ui_cn(['text-sm', ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['DataUI8Kit'], '')) %} data-ui8kit="{{ ui_def(p['DataUI8Kit'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
+  <ol class="flex flex-wrap items-center gap-2">
+    {%- for item in ui_def(p['Items'], []) %}
+      <li class="inline-flex items-center">
+        {%- if (ui_is_set_str(ui_field(item, 'Href', '')) and not (ui_field(item, 'Disabled', false))) %}
+          <a
+            {%- if ui_is_set_str(ui_field(item, 'Href', '')) %} href="{{ ui_field(item, 'Href', '') }}"{%- endif %}
+            class="{{ ui_cn(['text-sm', ('font-medium' if ui_field(item, 'Current', false) else ('text-muted-foreground' if ui_field(item, 'Disabled', false) else 'text-primary underline-offset-4 hover:underline'))]) }}"
+            {%- if ui_field(item, 'Current', false) %} aria-current="page"{%- endif %}
+          >{{ ui_field(item, 'Label', '') }}</a>
+        {%- else %}
+          <span
+            class="{{ ui_cn(['text-sm', ('font-medium' if ui_field(item, 'Current', false) else ('text-muted-foreground' if ui_field(item, 'Disabled', false) else 'text-primary underline-offset-4 hover:underline'))]) }}"
+            {%- if ui_field(item, 'Current', false) %} aria-current="page"{%- endif %}
+          >{{ ui_field(item, 'Label', '') }}</span>
+        {%- endif %}
+      </li>
+    {%- endfor %}
+  </ol>
+</nav>
diff --git a/packages/jinja2/ui/ui/button-plain/button-plain.html.j2 b/packages/jinja2/ui/ui/button-plain/button-plain.html.j2
new file mode 100644
index 0000000..1aba059
--- /dev/null
+++ b/packages/jinja2/ui/ui/button-plain/button-plain.html.j2
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/button-plain.json
+    ButtonPlain: ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it themselves.
+    Props (p): Class (string), Type (string), Disabled (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs); children: markup. -#}
+<button
+  type="{{ ui_map_or(ui_def(p['Type'], ''), {'submit': 'submit', 'reset': 'reset'}, 'button') }}"
+  class="{{ ui_compose('ui/button-plain/button-plain.variants.json', {}, [('pointer-events-none opacity-50' if ui_def(p['Disabled'], false) else ''), ui_def(p['Class'], '')]) }}"
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['TabIndex'], '')) %} tabindex="{{ ui_def(p['TabIndex'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</button>
diff --git a/packages/jinja2/ui/ui/button-plain/button-plain.variants.json b/packages/jinja2/ui/ui/button-plain/button-plain.variants.json
new file mode 100644
index 0000000..0e844f8
--- /dev/null
+++ b/packages/jinja2/ui/ui/button-plain/button-plain.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.button-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/button/button.html.j2 b/packages/jinja2/ui/ui/button/button.html.j2
new file mode 100644
index 0000000..8cdb11d
--- /dev/null
+++ b/packages/jinja2/ui/ui/button/button.html.j2
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/button.json
+    Button: Button renders a button element, or an anchor when Href is set.
+    Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
+    Props (p): Variant (string), Size (string), Layout (string), Class (string), Type (string), Form (string), Href (string), Target (string), Rel (string), External (bool), Disabled (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs); children: markup. -#}
+{%- set d_target = (ui_def(p['Target'], '') if ui_is_set_str(ui_def(p['Target'], '')) else ('_blank' if ui_def(p['External'], false) else '')) -%}
+{%- set d_rel = (ui_def(p['Rel'], '') if ui_is_set_str(ui_def(p['Rel'], '')) else ('noopener noreferrer' if (ui_def(p['External'], false) or ui_eq(d_target, '_blank')) else '')) -%}
+{%- if ui_is_set_str(ui_def(p['Href'], '')) %}
+  <a
+    {%- if ui_is_set_str(ui_def(p['Href'], '')) %} href="{{ ui_def(p['Href'], '') }}"{%- endif %}
+    class="{{ ui_compose('ui/button/button.variants.json', {'variant': ui_def(p['Variant'], ''), 'size': ui_def(p['Size'], ''), 'layout': ui_def(p['Layout'], '')}, [('pointer-events-none opacity-50' if ui_def(p['Disabled'], false) else ''), ui_def(p['Class'], '')]) }}"
+    data-slot="button"
+    {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+    {%- if ui_is_set_str(d_target) %} target="{{ d_target }}"{%- endif %}
+    {%- if ui_is_set_str(d_rel) %} rel="{{ d_rel }}"{%- endif %}
+    {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+    {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+    {%- if ui_def(p['Disabled'], false) %} aria-disabled="true"{%- endif %}
+    {%- if ui_def(p['Disabled'], false) %} tabindex="-1"{%- endif %}
+    {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+  >{{ ui_def(children, '')|safe }}</a>
+{%- else %}
+  <button
+    type="{{ ui_map_or(ui_def(p['Type'], ''), {'submit': 'submit', 'reset': 'reset'}, 'button') }}"
+    class="{{ ui_compose('ui/button/button.variants.json', {'variant': ui_def(p['Variant'], ''), 'size': ui_def(p['Size'], ''), 'layout': ui_def(p['Layout'], '')}, [('pointer-events-none opacity-50' if ui_def(p['Disabled'], false) else ''), ui_def(p['Class'], '')]) }}"
+    data-slot="button"
+    {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+    {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+    {%- if ui_is_set_str(ui_def(p['Form'], '')) %} form="{{ ui_def(p['Form'], '') }}"{%- endif %}
+    {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+    {%- if ui_is_set_str(ui_def(p['TabIndex'], '')) %} tabindex="{{ ui_def(p['TabIndex'], '') }}"{%- endif %}
+    {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+    {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+  >{{ ui_def(children, '')|safe }}</button>
+{%- endif %}
diff --git a/packages/jinja2/ui/ui/button/button.variants.json b/packages/jinja2/ui/ui/button/button.variants.json
new file mode 100644
index 0000000..6f6eed9
--- /dev/null
+++ b/packages/jinja2/ui/ui/button/button.variants.json
@@ -0,0 +1,61 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.button",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring transition-colors disabled:pointer-events-none disabled:opacity-50 rounded",
+  "keys": [
+    "variant",
+    "size",
+    "layout"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default",
+    "layout": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "outline": "bg-card text-foreground inset-ring-border",
+      "ghost": "bg-transparent text-foreground inset-ring-transparent",
+      "secondary": "bg-secondary text-secondary-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white hover:bg-destructive/90 inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      "link": "text-foreground inset-ring-transparent underline-offset-4 hover:underline"
+    },
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-4 text-sm",
+      "lg": "h-12 px-6 text-base"
+    },
+    "layout": {
+      "default": "",
+      "icon": ""
+    }
+  },
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "size-8 p-0 [&>svg]:size-4"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "size-10 p-0 [&>svg]:size-5"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "size-12 p-0 [&>svg]:size-6"
+    },
+    {
+      "variant": "outline",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    },
+    {
+      "variant": "ghost",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    }
+  ]
+}
diff --git a/packages/jinja2/ui/ui/card/card-content.html.j2 b/packages/jinja2/ui/ui/card/card-content.html.j2
new file mode 100644
index 0000000..7cbc688
--- /dev/null
+++ b/packages/jinja2/ui/ui/card/card-content.html.j2
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardContent: CardContent renders the padded main body slot.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<div class="{{ ui_cn([ui_def(p['Class'], '')]) }}"{{ ui_attr_html(ui_def(p['Attrs'], {})) }}>{{ ui_def(children, '')|safe }}</div>
diff --git a/packages/jinja2/ui/ui/card/card-description.html.j2 b/packages/jinja2/ui/ui/card/card-description.html.j2
new file mode 100644
index 0000000..8fc1b1b
--- /dev/null
+++ b/packages/jinja2/ui/ui/card/card-description.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardDescription: CardDescription renders a muted subtitle in a p element.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<p
+  class="{{ ui_cn(['text-sm text-muted-foreground', ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</p>
diff --git a/packages/jinja2/ui/ui/card/card-footer.html.j2 b/packages/jinja2/ui/ui/card/card-footer.html.j2
new file mode 100644
index 0000000..84bf179
--- /dev/null
+++ b/packages/jinja2/ui/ui/card/card-footer.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardFooter: CardFooter renders the bottom action slot.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_cn(['flex items-center', ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</div>
diff --git a/packages/jinja2/ui/ui/card/card-header.html.j2 b/packages/jinja2/ui/ui/card/card-header.html.j2
new file mode 100644
index 0000000..dc7b215
--- /dev/null
+++ b/packages/jinja2/ui/ui/card/card-header.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardHeader: CardHeader renders the top slot.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_cn(['grid auto-rows-min items-start gap-2', ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</div>
diff --git a/packages/jinja2/ui/ui/card/card-title.html.j2 b/packages/jinja2/ui/ui/card/card-title.html.j2
new file mode 100644
index 0000000..66fcce9
--- /dev/null
+++ b/packages/jinja2/ui/ui/card/card-title.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardTitle: CardTitle renders heading text at the As level (default h2).
+    Props (p): Class (string), As (int), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_title_tag(ui_def(p['As'], 0)) -%}
+<{{ tag1 }}
+  class="{{ ui_cn(['font-semibold leading-none', ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/card/card.html.j2 b/packages/jinja2/ui/ui/card/card.html.j2
new file mode 100644
index 0000000..0568b15
--- /dev/null
+++ b/packages/jinja2/ui/ui/card/card.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    Card: Card renders the bordered surface wrapper.
+    Props (p): Class (string), Variant (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/card/card.variants.json', {'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  data-slot="card"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</div>
diff --git a/packages/jinja2/ui/ui/card/card.variants.json b/packages/jinja2/ui/ui/card/card.variants.json
new file mode 100644
index 0000000..6740b57
--- /dev/null
+++ b/packages/jinja2/ui/ui/card/card.variants.json
@@ -0,0 +1,20 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.card",
+  "base": "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "",
+      "muted": "bg-muted",
+      "ghost": "bg-transparent",
+      "compact": "gap-4 p-4"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/checkbox/checkbox.html.j2 b/packages/jinja2/ui/ui/checkbox/checkbox.html.j2
new file mode 100644
index 0000000..8eaaba3
--- /dev/null
+++ b/packages/jinja2/ui/ui/checkbox/checkbox.html.j2
@@ -0,0 +1,18 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/checkbox.json
+    Checkbox: Checkbox renders a styled input[type=checkbox].
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Checked (bool), Disabled (bool), Required (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<input
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  type="checkbox"
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Value'], '')) %} value="{{ ui_def(p['Value'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/checkbox/checkbox.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_def(p['Checked'], false) %} checked{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {%- if ui_def(p['Required'], false) %} required{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['TabIndex'], '')) %} tabindex="{{ ui_def(p['TabIndex'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/checkbox/checkbox.variants.json b/packages/jinja2/ui/ui/checkbox/checkbox.variants.json
new file mode 100644
index 0000000..6b1dccc
--- /dev/null
+++ b/packages/jinja2/ui/ui/checkbox/checkbox.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.checkbox",
+  "base": "peer shrink-0 appearance-none bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary checkbox-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5",
+      "sm": "size-4"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/container/container.html.j2 b/packages/jinja2/ui/ui/container/container.html.j2
new file mode 100644
index 0000000..69fb944
--- /dev/null
+++ b/packages/jinja2/ui/ui/container/container.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/container.json
+    Container: Container renders the outer content shell.
+    Props (p): Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag(ui_def(p['Tag'], ''), 'div', ['div', 'main', 'section']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/container/container.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/container/container.variants.json b/packages/jinja2/ui/ui/container/container.variants.json
new file mode 100644
index 0000000..e2842e5
--- /dev/null
+++ b/packages/jinja2/ui/ui/container/container.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.container",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/dialog/dialog.html.j2 b/packages/jinja2/ui/ui/dialog/dialog.html.j2
new file mode 100644
index 0000000..352a1c5
--- /dev/null
+++ b/packages/jinja2/ui/ui/dialog/dialog.html.j2
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/dialog.json
+    Dialog: Dialog renders a native dialog element.
+    Props (p): Variant (string), Size (string), Class (string), ID (string), Open (bool), DataUI8Kit (string), AriaLabel (string), AriaLabelledBy (string), AriaDescribedBy (string), Attrs (attrs); children: markup. -#}
+<dialog
+  class="{{ ui_compose('ui/dialog/dialog.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_def(p['Open'], false) %} open{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['DataUI8Kit'], '')) %} data-ui8kit="{{ ui_def(p['DataUI8Kit'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabelledBy'], '')) %} aria-labelledby="{{ ui_def(p['AriaLabelledBy'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaDescribedBy'], '')) %} aria-describedby="{{ ui_def(p['AriaDescribedBy'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</dialog>
diff --git a/packages/jinja2/ui/ui/dialog/dialog.variants.json b/packages/jinja2/ui/ui/dialog/dialog.variants.json
new file mode 100644
index 0000000..1bb166d
--- /dev/null
+++ b/packages/jinja2/ui/ui/dialog/dialog.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.dialog",
+  "base": "m-auto flex flex-col bg-background text-foreground inset-ring inset-ring-border shadow-lg backdrop:bg-foreground/20 rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "w-70",
+      "full": "h-full w-full",
+      "lg": "w-100",
+      "xl": "w-140"
+    },
+    "variant": {
+      "card": "bg-card text-card-foreground",
+      "default": "",
+      "sheet": "min-h-screen rounded-none"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/disclosure/disclosure.html.j2 b/packages/jinja2/ui/ui/disclosure/disclosure.html.j2
new file mode 100644
index 0000000..0ce624b
--- /dev/null
+++ b/packages/jinja2/ui/ui/disclosure/disclosure.html.j2
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/disclosure.json
+    Disclosure: Disclosure renders native details.
+    Props (p): Variant (string), Class (string), Open (bool), Name (string), Attrs (attrs); children: markup. -#}
+<details
+  class="{{ ui_compose('ui/disclosure/disclosure.variants.json', {'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_def(p['Open'], false) %} open{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</details>
diff --git a/packages/jinja2/ui/ui/disclosure/disclosure.variants.json b/packages/jinja2/ui/ui/disclosure/disclosure.variants.json
new file mode 100644
index 0000000..b3a254a
--- /dev/null
+++ b/packages/jinja2/ui/ui/disclosure/disclosure.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.disclosure",
+  "base": "group",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "card": "rounded bg-card inset-ring inset-ring-border",
+      "default": "rounded inset-ring inset-ring-border",
+      "ghost": "",
+      "item": "border-b border-border last:border-b-0"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/disclosure/summary.html.j2 b/packages/jinja2/ui/ui/disclosure/summary.html.j2
new file mode 100644
index 0000000..df42ad1
--- /dev/null
+++ b/packages/jinja2/ui/ui/disclosure/summary.html.j2
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/disclosure.json
+    Summary: Summary renders native summary, followed by a Lucide chevron-down indicator that turns over when the details open (CSS only: group-open:rotate-180 on the Disclosure group).
+    Props (p): Variant (string), Class (string), Attrs (attrs); children: markup. -#}
+<summary
+  class="{{ ui_compose('ui/disclosure/summary.variants.json', {'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
+  {{ ui_def(children, '')|safe }}
+  <span
+    class="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+    aria-hidden="true"
+    data-slot="summary-indicator"
+  ></span>
+</summary>
diff --git a/packages/jinja2/ui/ui/disclosure/summary.variants.json b/packages/jinja2/ui/ui/disclosure/summary.variants.json
new file mode 100644
index 0000000..6502ca6
--- /dev/null
+++ b/packages/jinja2/ui/ui/disclosure/summary.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.summary",
+  "base": "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs font-semibold",
+      "default": "text-sm font-semibold",
+      "lg": "text-base font-semibold"
+    },
+    "variant": {
+      "card": "py-2 pr-4 pl-4",
+      "default": "py-2 pr-4 pl-4",
+      "ghost": "py-2",
+      "item": "py-4 text-muted-foreground hover:text-foreground group-open:text-foreground"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/form/data-list.html.j2 b/packages/jinja2/ui/ui/form/data-list.html.j2
new file mode 100644
index 0000000..a59ab38
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/data-list.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    DataList: DataList renders a native datalist.
+    Props (p): ID (string), Class (string), Attrs (attrs); children: markup. -#}
+<datalist
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  class="{{ ui_cn([ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</datalist>
diff --git a/packages/jinja2/ui/ui/form/data-option.html.j2 b/packages/jinja2/ui/ui/form/data-option.html.j2
new file mode 100644
index 0000000..f8d0705
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/data-option.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    DataOption: DataOption renders an option inside a datalist.
+    Props (p): Value (string), Label (string), Attrs (attrs). -#}
+<option
+  {%- if ui_is_set_str(ui_def(p['Value'], '')) %} value="{{ ui_def(p['Value'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Label'], '')) %} label="{{ ui_def(p['Label'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+></option>
diff --git a/packages/jinja2/ui/ui/form/fieldset.html.j2 b/packages/jinja2/ui/ui/form/fieldset.html.j2
new file mode 100644
index 0000000..e7973eb
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/fieldset.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Fieldset: Fieldset renders a native fieldset.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Form (string), Disabled (bool), Attrs (attrs); children: markup. -#}
+<fieldset
+  class="{{ ui_compose('ui/form/fieldset.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Form'], '')) %} form="{{ ui_def(p['Form'], '') }}"{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</fieldset>
diff --git a/packages/jinja2/ui/ui/form/fieldset.variants.json b/packages/jinja2/ui/ui/form/fieldset.variants.json
new file mode 100644
index 0000000..963b29d
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/fieldset.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.fieldset",
+  "base": "grid",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "gap-2",
+      "lg": "gap-4",
+      "sm": "gap-2"
+    },
+    "variant": {
+      "card": "rounded p-4 inset-ring inset-ring-border",
+      "default": "",
+      "inline": "flex flex-wrap items-start gap-4"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/form/form-description.html.j2 b/packages/jinja2/ui/ui/form/form-description.html.j2
new file mode 100644
index 0000000..c3c1927
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/form-description.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    FormDescription: FormDescription renders muted helper copy below a control.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<p
+  class="{{ ui_compose('ui/form/form-description.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</p>
diff --git a/packages/jinja2/ui/ui/form/form-description.variants.json b/packages/jinja2/ui/ui/form/form-description.variants.json
new file mode 100644
index 0000000..82a749d
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/form-description.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-description",
+  "base": "text-xs font-semibold text-muted-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/form/form-item.html.j2 b/packages/jinja2/ui/ui/form/form-item.html.j2
new file mode 100644
index 0000000..82dafb8
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/form-item.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    FormItem: FormItem groups a single field with spacing for label and control.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/form/form-item.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</div>
diff --git a/packages/jinja2/ui/ui/form/form-item.variants.json b/packages/jinja2/ui/ui/form/form-item.variants.json
new file mode 100644
index 0000000..e7da2d4
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/form-item.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-item",
+  "base": "flex flex-col gap-2",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/form/form-message.html.j2 b/packages/jinja2/ui/ui/form/form-message.html.j2
new file mode 100644
index 0000000..c1dbf7e
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/form-message.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    FormMessage: FormMessage renders destructive validation feedback.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<p
+  class="{{ ui_compose('ui/form/form-message.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  role="alert"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</p>
diff --git a/packages/jinja2/ui/ui/form/form-message.variants.json b/packages/jinja2/ui/ui/form/form-message.variants.json
new file mode 100644
index 0000000..b58d5a8
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/form-message.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-message",
+  "base": "text-xs font-semibold text-destructive",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/form/form.html.j2 b/packages/jinja2/ui/ui/form/form.html.j2
new file mode 100644
index 0000000..3e6db15
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/form.html.j2
@@ -0,0 +1,16 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    Form: Form renders a vertical grid form container.
+    Props (p): ID (string), Class (string), Action (string), Method (string), Enctype (string), Autocomplete (string), Name (string), Target (string), NoValidate (bool), Attrs (attrs); children: markup. -#}
+<form
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/form/form.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['Action'], '')) %} action="{{ ui_def(p['Action'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Method'], '')) %} method="{{ ui_def(p['Method'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Enctype'], '')) %} enctype="{{ ui_def(p['Enctype'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Autocomplete'], '')) %} autocomplete="{{ ui_def(p['Autocomplete'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Target'], '')) %} target="{{ ui_def(p['Target'], '') }}"{%- endif %}
+  {%- if ui_def(p['NoValidate'], false) %} novalidate{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</form>
diff --git a/packages/jinja2/ui/ui/form/form.variants.json b/packages/jinja2/ui/ui/form/form.variants.json
new file mode 100644
index 0000000..7a19129
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/form.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form",
+  "base": "grid gap-4",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/form/legend.html.j2 b/packages/jinja2/ui/ui/form/legend.html.j2
new file mode 100644
index 0000000..431e2eb
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/legend.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Legend: Legend renders a native legend.
+    Props (p): Variant (string), Size (string), Class (string), Attrs (attrs); children: markup. -#}
+<legend
+  class="{{ ui_compose('ui/form/legend.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</legend>
diff --git a/packages/jinja2/ui/ui/form/legend.variants.json b/packages/jinja2/ui/ui/form/legend.variants.json
new file mode 100644
index 0000000..7a2f0ab
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/legend.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.legend",
+  "base": "font-bold",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs",
+      "default": "text-sm",
+      "lg": "text-base"
+    },
+    "variant": {
+      "default": "",
+      "muted": "text-muted-foreground"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/form/meter.html.j2 b/packages/jinja2/ui/ui/form/meter.html.j2
new file mode 100644
index 0000000..3c67071
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/meter.html.j2
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Meter: Meter renders a native meter.
+    Props (p): Variant (string), Size (string), ID (string), Class (string), Value (string), Min (string), Max (string), Low (string), High (string), Optimum (string), Attrs (attrs); children: markup. -#}
+<meter
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/form/meter.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['Value'], '')) %} value="{{ ui_def(p['Value'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Min'], '')) %} min="{{ ui_def(p['Min'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Max'], '')) %} max="{{ ui_def(p['Max'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Low'], '')) %} low="{{ ui_def(p['Low'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['High'], '')) %} high="{{ ui_def(p['High'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Optimum'], '')) %} optimum="{{ ui_def(p['Optimum'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</meter>
diff --git a/packages/jinja2/ui/ui/form/meter.variants.json b/packages/jinja2/ui/ui/form/meter.variants.json
new file mode 100644
index 0000000..b931112
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/meter.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.meter",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/form/output.html.j2 b/packages/jinja2/ui/ui/form/output.html.j2
new file mode 100644
index 0000000..fe9eb24
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/output.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Output: Output renders a native output element.
+    Props (p): ID (string), Class (string), Name (string), For (string), Value (string), Attrs (attrs); children: markup. -#}
+<output
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  class="{{ ui_cn([ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['For'], '')) %} for="{{ ui_def(p['For'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(p['Value'], '') }}{{ ui_def(children, '')|safe }}</output>
diff --git a/packages/jinja2/ui/ui/form/progress.html.j2 b/packages/jinja2/ui/ui/form/progress.html.j2
new file mode 100644
index 0000000..8a72cec
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/progress.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Progress: Progress renders a native progress element.
+    Props (p): Variant (string), Size (string), ID (string), Class (string), Value (string), Max (string), Attrs (attrs); children: markup. -#}
+<progress
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/form/progress.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['Value'], '')) %} value="{{ ui_def(p['Value'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Max'], '')) %} max="{{ ui_def(p['Max'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</progress>
diff --git a/packages/jinja2/ui/ui/form/progress.variants.json b/packages/jinja2/ui/ui/form/progress.variants.json
new file mode 100644
index 0000000..ac8c766
--- /dev/null
+++ b/packages/jinja2/ui/ui/form/progress.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.progress",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/grid/grid-col.html.j2 b/packages/jinja2/ui/ui/grid/grid-col.html.j2
new file mode 100644
index 0000000..0f6a8b2
--- /dev/null
+++ b/packages/jinja2/ui/ui/grid/grid-col.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/grid.json
+    GridCol: GridCol renders one grid column child.
+    Props (p): Class (string), Span (int), Start (int), End (int), Order (int), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_cn([ui_int_map_or(ui_def(p['Span'], 0), {1: 'col-span-1', 2: 'col-span-2', 3: 'col-span-3', 4: 'col-span-4', 5: 'col-span-5', 6: 'col-span-6', 7: 'col-span-7', 8: 'col-span-8', 9: 'col-span-9', 10: 'col-span-10', 11: 'col-span-11', 12: 'col-span-12'}, ''), ui_int_map_or(ui_def(p['Start'], 0), {1: 'col-start-1', 2: 'col-start-2', 3: 'col-start-3', 4: 'col-start-4', 5: 'col-start-5', 6: 'col-start-6', 7: 'col-start-7', 8: 'col-start-8', 9: 'col-start-9', 10: 'col-start-10', 11: 'col-start-11', 12: 'col-start-12'}, ''), ui_int_map_or(ui_def(p['End'], 0), {1: 'col-end-1', 2: 'col-end-2', 3: 'col-end-3', 4: 'col-end-4', 5: 'col-end-5', 6: 'col-end-6', 7: 'col-end-7', 8: 'col-end-8', 9: 'col-end-9', 10: 'col-end-10', 11: 'col-end-11', 12: 'col-end-12'}, ''), ui_int_map_or(ui_def(p['Order'], 0), {1: 'order-1', 2: 'order-2', 3: 'order-3', 4: 'order-4', 5: 'order-5', 6: 'order-6', 7: 'order-7', 8: 'order-8', 9: 'order-9', 10: 'order-10', 11: 'order-11', 12: 'order-12'}, ''), ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</div>
diff --git a/packages/jinja2/ui/ui/grid/grid.html.j2 b/packages/jinja2/ui/ui/grid/grid.html.j2
new file mode 100644
index 0000000..2408611
--- /dev/null
+++ b/packages/jinja2/ui/ui/grid/grid.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/grid.json
+    Grid: Grid renders a display:grid container.
+    Props (p): Class (string), Cols (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/grid/grid.variants.json', {}, [('' if ('grid-cols-' in ui_def(p['Class'], '')) else ui_map_or(ui_default_if_empty(ui_def(p['Cols'], ''), '1'), {'1': 'grid-cols-1', '2': 'grid-cols-2', '3': 'grid-cols-3', '4': 'grid-cols-4', '5': 'grid-cols-5', '6': 'grid-cols-6', '7': 'grid-cols-7', '8': 'grid-cols-8', '9': 'grid-cols-9', '10': 'grid-cols-10', '11': 'grid-cols-11', '12': 'grid-cols-12', '1-2': 'grid-cols-1 md:grid-cols-2', '1-3': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3', '1-4': 'grid-cols-1 sm:grid-cols-2 md:grid-cols-4', '2-3': 'grid-cols-2 md:grid-cols-3', '2-4': 'grid-cols-2 md:grid-cols-4', '2-6': 'grid-cols-2 md:grid-cols-6', '3-6': 'grid-cols-3 md:grid-cols-6'}, '')), ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</div>
diff --git a/packages/jinja2/ui/ui/grid/grid.variants.json b/packages/jinja2/ui/ui/grid/grid.variants.json
new file mode 100644
index 0000000..7fccc0f
--- /dev/null
+++ b/packages/jinja2/ui/ui/grid/grid.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.grid",
+  "base": "grid",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/group/group.html.j2 b/packages/jinja2/ui/ui/group/group.html.j2
new file mode 100644
index 0000000..ae16d1d
--- /dev/null
+++ b/packages/jinja2/ui/ui/group/group.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/group.json
+    Group: Group renders a horizontal flex container.
+    Props (p): Gap (string), Align (string), Justify (string), Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag(ui_def(p['Tag'], ''), 'div', ['div', 'fieldset', 'dl']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/group/group.variants.json', {'gap': ui_def(p['Gap'], ''), 'align': ui_def(p['Align'], ''), 'justify': ui_def(p['Justify'], '')}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/group/group.variants.json b/packages/jinja2/ui/ui/group/group.variants.json
new file mode 100644
index 0000000..a2ef4f4
--- /dev/null
+++ b/packages/jinja2/ui/ui/group/group.variants.json
@@ -0,0 +1,40 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.group",
+  "base": "flex min-w-0",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "center",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/icon/icon.html.j2 b/packages/jinja2/ui/ui/icon/icon.html.j2
new file mode 100644
index 0000000..66f8265
--- /dev/null
+++ b/packages/jinja2/ui/ui/icon/icon.html.j2
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/icon.json
+    Icon: Icon renders a class-based span, svg use, or text fallback host.
+    Props (p): Name (string), Type (string), BaseClass (string), Prefix (string), Size (string), Class (string), Href (string), Title (string), AriaLabel (string), Decorative (bool), Attrs (attrs); children: markup. -#}
+{%- set d_iconKind = ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class') -%}
+{%- set d_isDecorative = (ui_def(p['Decorative'], false) or (not (ui_is_set_str(ui_def(p['Title'], ''))) and not (ui_is_set_str(ui_def(p['AriaLabel'], ''))))) -%}
+{%- if ui_eq(d_iconKind, 'svg') %}
+  <svg
+    class="{{ ui_compose('ui/icon/icon.variants.json', {'size': ui_def(p['Size'], ''), 'type': ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class')}, [(ui_def(p['BaseClass'], '') if ui_eq(ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') else ''), (ui_concat_trim([ui_def(p['Prefix'], ''), ui_def(p['Name'], '')]) if (ui_eq(ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') and ui_is_set_str(ui_def(p['Name'], ''))) else ''), ui_def(p['Class'], '')]) }}"
+    {%- if d_isDecorative %} aria-hidden="true"{%- endif %}
+    {%- if not (d_isDecorative) %} role="img"{%- endif %}
+    {%- if (not (d_isDecorative) and ui_is_set_str(ui_def(p['AriaLabel'], ''))) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+    {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+  >
+    {%- if ui_is_set_str(ui_def(p['Title'], '')) %}
+      <title>{{ ui_def(p['Title'], '') }}</title>
+    {%- endif %}
+    {%- if ui_is_set_str(ui_def(p['Href'], '')) %}
+      <use{%- if ui_is_set_str(ui_def(p['Href'], '')) %} href="{{ ui_def(p['Href'], '') }}"{%- endif %}></use>
+    {%- endif %}
+    {{ ui_def(children, '')|safe }}
+  </svg>
+{%- elif ui_eq(d_iconKind, 'text') %}
+  <span
+    class="{{ ui_compose('ui/icon/icon.variants.json', {'size': ui_def(p['Size'], ''), 'type': ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class')}, [(ui_def(p['BaseClass'], '') if ui_eq(ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') else ''), (ui_concat_trim([ui_def(p['Prefix'], ''), ui_def(p['Name'], '')]) if (ui_eq(ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') and ui_is_set_str(ui_def(p['Name'], ''))) else ''), ui_def(p['Class'], '')]) }}"
+    {%- if d_isDecorative %} aria-hidden="true"{%- endif %}
+    {%- if not (d_isDecorative) %} role="img"{%- endif %}
+    {%- if (not (d_isDecorative) and ui_is_set_str(ui_def(p['AriaLabel'], ''))) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+    {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+  >{{ ui_def(children, '')|safe }}</span>
+{%- else %}
+  <span
+    class="{{ ui_compose('ui/icon/icon.variants.json', {'size': ui_def(p['Size'], ''), 'type': ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class')}, [(ui_def(p['BaseClass'], '') if ui_eq(ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') else ''), (ui_concat_trim([ui_def(p['Prefix'], ''), ui_def(p['Name'], '')]) if (ui_eq(ui_map_or(ui_def(p['Type'], ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') and ui_is_set_str(ui_def(p['Name'], ''))) else ''), ui_def(p['Class'], '')]) }}"
+    {%- if d_isDecorative %} aria-hidden="true"{%- endif %}
+    {%- if not (d_isDecorative) %} role="img"{%- endif %}
+    {%- if (not (d_isDecorative) and ui_is_set_str(ui_def(p['AriaLabel'], ''))) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+    {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+  ></span>
+{%- endif %}
diff --git a/packages/jinja2/ui/ui/icon/icon.variants.json b/packages/jinja2/ui/ui/icon/icon.variants.json
new file mode 100644
index 0000000..5f73b17
--- /dev/null
+++ b/packages/jinja2/ui/ui/icon/icon.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.icon",
+  "base": "inline-block shrink-0",
+  "keys": [
+    "size",
+    "type"
+  ],
+  "defaults": {
+    "size": "default",
+    "type": "class"
+  },
+  "byKey": {
+    "size": {
+      "xs": "size-3",
+      "default": "size-4",
+      "md": "size-5",
+      "lg": "size-6"
+    },
+    "type": {
+      "class": "",
+      "svg": "",
+      "text": ""
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/iconbadge/icon-badge.html.j2 b/packages/jinja2/ui/ui/iconbadge/icon-badge.html.j2
new file mode 100644
index 0000000..05b1730
--- /dev/null
+++ b/packages/jinja2/ui/ui/iconbadge/icon-badge.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/iconbadge.json
+    IconBadge: IconBadge renders children as the badge content.
+    Props (p): Variant (string), Size (string), Class (string), Attrs (attrs); children: markup. -#}
+<span
+  class="{{ ui_compose('ui/iconbadge/iconbadge.variants.json', {'variant': ui_def(p['Variant'], ''), 'size': ui_def(p['Size'], '')}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</span>
diff --git a/packages/jinja2/ui/ui/iconbadge/iconbadge.variants.json b/packages/jinja2/ui/ui/iconbadge/iconbadge.variants.json
new file mode 100644
index 0000000..1c2e331
--- /dev/null
+++ b/packages/jinja2/ui/ui/iconbadge/iconbadge.variants.json
@@ -0,0 +1,31 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.iconbadge",
+  "base": "inline-flex shrink-0 items-center justify-center font-bold rounded",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-muted-foreground",
+      "primary": "bg-primary text-primary-foreground",
+      "accent": "bg-accent text-accent-foreground",
+      "secondary": "bg-secondary text-secondary-foreground",
+      "outline": "text-foreground inset-ring inset-ring-border",
+      "destructive": "bg-destructive text-white dark:bg-destructive/60"
+    },
+    "size": {
+      "xs": "size-6 text-xs",
+      "sm": "size-8 text-xs",
+      "default": "size-10 text-xs",
+      "lg": "size-12 text-sm",
+      "xl": "size-20 text-base"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/image/image.html.j2 b/packages/jinja2/ui/ui/image/image.html.j2
new file mode 100644
index 0000000..ab2a135
--- /dev/null
+++ b/packages/jinja2/ui/ui/image/image.html.j2
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/image.json
+    Image: Image renders an accessible img element.
+    Props (p): Variant (string), Size (string), Class (string), Src (string), SrcSet (string), Sizes (string), Alt (string), Width (string), Height (string), Fit (string), Position (string), Aspect (string), Loading (string), Decoding (string), FetchPriority (string), Decorative (bool), ID (string), Attrs (attrs). -#}
+<img
+  {%- if ui_is_set_str(ui_def(p['Src'], '')) %} src="{{ ui_def(p['Src'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['SrcSet'], '')) %} srcset="{{ ui_def(p['SrcSet'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Sizes'], '')) %} sizes="{{ ui_def(p['Sizes'], '') }}"{%- endif %}
+  alt="{{ ('' if ui_def(p['Decorative'], false) else ui_def(p['Alt'], '')) }}"
+  {%- if ui_is_set_str(ui_def(p['Width'], '')) %} width="{{ ui_def(p['Width'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Height'], '')) %} height="{{ ui_def(p['Height'], '') }}"{%- endif %}
+  loading="{{ ui_map_or(ui_def(p['Loading'], ''), {'eager': 'eager'}, 'lazy') }}"
+  decoding="{{ ui_map_or(ui_def(p['Decoding'], ''), {'sync': 'sync', 'auto': 'auto'}, 'async') }}"
+  {%- if ui_is_set_str(ui_def(p['FetchPriority'], '')) %} fetchpriority="{{ ui_def(p['FetchPriority'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/image/image.variants.json', {'aspect': ui_def(p['Aspect'], ''), 'fit': ui_def(p['Fit'], ''), 'position': ui_def(p['Position'], ''), 'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  {%- if ui_def(p['Decorative'], false) %} aria-hidden="true"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/image/image.variants.json b/packages/jinja2/ui/ui/image/image.variants.json
new file mode 100644
index 0000000..573b15b
--- /dev/null
+++ b/packages/jinja2/ui/ui/image/image.variants.json
@@ -0,0 +1,59 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.image",
+  "base": "block max-w-full",
+  "keys": [
+    "aspect",
+    "fit",
+    "position",
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "aspect": "auto",
+    "fit": "cover",
+    "position": "center",
+    "size": "auto",
+    "variant": "default"
+  },
+  "byKey": {
+    "aspect": {
+      "auto": "aspect-auto",
+      "square": "aspect-square",
+      "video": "aspect-video"
+    },
+    "fit": {
+      "contain": "object-contain",
+      "cover": "object-cover",
+      "fill": "object-fill",
+      "none": "object-none",
+      "scale-down": "object-scale-down"
+    },
+    "position": {
+      "bottom": "object-bottom",
+      "center": "object-center",
+      "left": "object-left",
+      "left-bottom": "object-left-bottom",
+      "left-top": "object-left-top",
+      "right": "object-right",
+      "right-bottom": "object-right-bottom",
+      "right-top": "object-right-top",
+      "top": "object-top"
+    },
+    "size": {
+      "auto": "",
+      "default": "",
+      "full": "h-full w-full",
+      "xs": "size-6",
+      "sm": "size-8",
+      "md": "size-12",
+      "lg": "size-16",
+      "xl": "size-20"
+    },
+    "variant": {
+      "default": "",
+      "logo": "object-contain"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/image/picture.html.j2 b/packages/jinja2/ui/ui/image/picture.html.j2
new file mode 100644
index 0000000..b2da178
--- /dev/null
+++ b/packages/jinja2/ui/ui/image/picture.html.j2
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/image.json
+    Picture: Picture renders a responsive image wrapper.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<picture class="{{ ui_cn([ui_def(p['Class'], '')]) }}"{{ ui_attr_html(ui_def(p['Attrs'], {})) }}>{{ ui_def(children, '')|safe }}</picture>
diff --git a/packages/jinja2/ui/ui/image/source.html.j2 b/packages/jinja2/ui/ui/image/source.html.j2
new file mode 100644
index 0000000..69176b7
--- /dev/null
+++ b/packages/jinja2/ui/ui/image/source.html.j2
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/image.json
+    Source: Source renders a source candidate for picture, video, or audio.
+    Props (p): SrcSet (string), Src (string), Media (string), Type (string), Sizes (string), Attrs (attrs). -#}
+<source
+  {%- if ui_is_set_str(ui_def(p['SrcSet'], '')) %} srcset="{{ ui_def(p['SrcSet'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Src'], '')) %} src="{{ ui_def(p['Src'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Media'], '')) %} media="{{ ui_def(p['Media'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Type'], '')) %} type="{{ ui_def(p['Type'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Sizes'], '')) %} sizes="{{ ui_def(p['Sizes'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/inline/inline.html.j2 b/packages/jinja2/ui/ui/inline/inline.html.j2
new file mode 100644
index 0000000..2b55078
--- /dev/null
+++ b/packages/jinja2/ui/ui/inline/inline.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/inline.json
+    Inline: Inline renders a span element with inline copy classes.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<span
+  class="{{ ui_compose('ui/inline/inline.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</span>
diff --git a/packages/jinja2/ui/ui/inline/inline.variants.json b/packages/jinja2/ui/ui/inline/inline.variants.json
new file mode 100644
index 0000000..8c11e25
--- /dev/null
+++ b/packages/jinja2/ui/ui/inline/inline.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.inline",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/input/input.html.j2 b/packages/jinja2/ui/ui/input/input.html.j2
new file mode 100644
index 0000000..b91cbd9
--- /dev/null
+++ b/packages/jinja2/ui/ui/input/input.html.j2
@@ -0,0 +1,21 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/input.json
+    Input: Input renders a styled single-line form control.
+    Props (p): Variant (string), Size (string), Class (string), Type (string), Name (string), Value (string), Placeholder (string), Disabled (bool), Required (bool), Autocomplete (string), Min (string), Max (string), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<input
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  type="{{ ui_default_if_empty(ui_def(p['Type'], ''), 'text') }}"
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Value'], '')) %} value="{{ ui_def(p['Value'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Placeholder'], '')) %} placeholder="{{ ui_def(p['Placeholder'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Autocomplete'], '')) %} autocomplete="{{ ui_def(p['Autocomplete'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Min'], '')) %} min="{{ ui_def(p['Min'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Max'], '')) %} max="{{ ui_def(p['Max'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/input/input.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {%- if ui_def(p['Required'], false) %} required{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['TabIndex'], '')) %} tabindex="{{ ui_def(p['TabIndex'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/input/input.variants.json b/packages/jinja2/ui/ui/input/input.variants.json
new file mode 100644
index 0000000..43bf16e
--- /dev/null
+++ b/packages/jinja2/ui/ui/input/input.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.input",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-base md:text-sm",
+      "default": "h-10 px-3 text-base md:text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/label/label.html.j2 b/packages/jinja2/ui/ui/label/label.html.j2
new file mode 100644
index 0000000..2844ece
--- /dev/null
+++ b/packages/jinja2/ui/ui/label/label.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/label.json
+    Label: Label renders accessible text linked to a control.
+    Props (p): Class (string), HTMLFor (string), Attrs (attrs); children: markup. -#}
+<label
+  class="{{ ui_compose('ui/label/label.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['HTMLFor'], '')) %} for="{{ ui_def(p['HTMLFor'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</label>
diff --git a/packages/jinja2/ui/ui/label/label.variants.json b/packages/jinja2/ui/ui/label/label.variants.json
new file mode 100644
index 0000000..bdebe07
--- /dev/null
+++ b/packages/jinja2/ui/ui/label/label.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.label",
+  "base": "text-xs font-bold text-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/linebreak/break.html.j2 b/packages/jinja2/ui/ui/linebreak/break.html.j2
new file mode 100644
index 0000000..f8c2b1a
--- /dev/null
+++ b/packages/jinja2/ui/ui/linebreak/break.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/linebreak.json
+    Break: Break renders br by default, or wbr when Type is wbr/word.
+    Props (p): Type (string), Class (string), Attrs (attrs). -#}
+{%- set tag1 = ui_map_or(ui_map_or(ui_def(p['Type'], ''), {'wbr': 'wbr', 'word': 'wbr'}, 'br'), {'wbr': 'wbr', 'br': 'br'}, 'br') -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/linebreak/linebreak.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/linebreak/linebreak.variants.json b/packages/jinja2/ui/ui/linebreak/linebreak.variants.json
new file mode 100644
index 0000000..eafffc3
--- /dev/null
+++ b/packages/jinja2/ui/ui/linebreak/linebreak.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.linebreak",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/link-plain/link-plain.html.j2 b/packages/jinja2/ui/ui/link-plain/link-plain.html.j2
new file mode 100644
index 0000000..5d8cf06
--- /dev/null
+++ b/packages/jinja2/ui/ui/link-plain/link-plain.html.j2
@@ -0,0 +1,20 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/link-plain.json
+    LinkPlain: LinkPlain is a bare anchor: no styling beyond Class.
+    Props (p): Class (string), Href (string), Target (string), Rel (string), Download (string), External (bool), Disabled (bool), AriaCurrent (string), AriaLabel (string), ID (string), Role (string), Attrs (attrs); children: markup. -#}
+{%- set d_target = (ui_def(p['Target'], '') if ui_is_set_str(ui_def(p['Target'], '')) else ('_blank' if ui_def(p['External'], false) else '')) -%}
+{%- set d_rel = (ui_def(p['Rel'], '') if ui_is_set_str(ui_def(p['Rel'], '')) else ('noopener noreferrer' if (ui_def(p['External'], false) or ui_eq(d_target, '_blank')) else '')) -%}
+<a
+  {%- if ui_is_set_str(ui_def(p['Href'], '')) %} href="{{ ui_def(p['Href'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/link-plain/link-plain.variants.json', {}, [('pointer-events-none opacity-50' if ui_def(p['Disabled'], false) else ''), ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(d_target) %} target="{{ d_target }}"{%- endif %}
+  {%- if ui_is_set_str(d_rel) %} rel="{{ d_rel }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Download'], '')) %} download="{{ ui_def(p['Download'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaCurrent'], '')) %} aria-current="{{ ui_def(p['AriaCurrent'], '') }}"{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} aria-disabled="true"{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} tabindex="-1"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</a>
diff --git a/packages/jinja2/ui/ui/link-plain/link-plain.variants.json b/packages/jinja2/ui/ui/link-plain/link-plain.variants.json
new file mode 100644
index 0000000..9915f9b
--- /dev/null
+++ b/packages/jinja2/ui/ui/link-plain/link-plain.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.link-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/link/link.html.j2 b/packages/jinja2/ui/ui/link/link.html.j2
new file mode 100644
index 0000000..1c3b005
--- /dev/null
+++ b/packages/jinja2/ui/ui/link/link.html.j2
@@ -0,0 +1,20 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/link.json
+    Link: Link renders a semantic anchor element.
+    Props (p): Variant (string), Size (string), Class (string), Href (string), Target (string), Rel (string), Download (string), External (bool), Disabled (bool), AriaCurrent (string), AriaLabel (string), ID (string), Role (string), Attrs (attrs); children: markup. -#}
+{%- set d_target = (ui_def(p['Target'], '') if ui_is_set_str(ui_def(p['Target'], '')) else ('_blank' if ui_def(p['External'], false) else '')) -%}
+{%- set d_rel = (ui_def(p['Rel'], '') if ui_is_set_str(ui_def(p['Rel'], '')) else ('noopener noreferrer' if (ui_def(p['External'], false) or ui_eq(d_target, '_blank')) else '')) -%}
+<a
+  {%- if ui_is_set_str(ui_def(p['Href'], '')) %} href="{{ ui_def(p['Href'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/link/link.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [('pointer-events-none opacity-50' if ui_def(p['Disabled'], false) else ''), ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(d_target) %} target="{{ d_target }}"{%- endif %}
+  {%- if ui_is_set_str(d_rel) %} rel="{{ d_rel }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Download'], '')) %} download="{{ ui_def(p['Download'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaCurrent'], '')) %} aria-current="{{ ui_def(p['AriaCurrent'], '') }}"{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} aria-disabled="true"{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} tabindex="-1"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</a>
diff --git a/packages/jinja2/ui/ui/link/link.variants.json b/packages/jinja2/ui/ui/link/link.variants.json
new file mode 100644
index 0000000..6478252
--- /dev/null
+++ b/packages/jinja2/ui/ui/link/link.variants.json
@@ -0,0 +1,28 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.link",
+  "base": "inline-flex items-center underline-offset-4",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "gap-2 text-sm font-medium",
+      "default": "gap-2 text-base font-semibold",
+      "md": "gap-2 text-xl font-semibold",
+      "lg": "gap-2 text-2xl font-semibold"
+    },
+    "variant": {
+      "block": "flex w-full text-foreground",
+      "default": "text-foreground hover:underline",
+      "external": "text-foreground hover:underline",
+      "muted": "text-muted-foreground hover:text-foreground",
+      "nav": "text-foreground"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/list/list-item.html.j2 b/packages/jinja2/ui/ui/list/list-item.html.j2
new file mode 100644
index 0000000..73f3c4b
--- /dev/null
+++ b/packages/jinja2/ui/ui/list/list-item.html.j2
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/list.json
+    ListItem: ListItem renders one li with optional value attribute.
+    Props (p): Class (string), Tag (string), Value (int), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag(ui_def(p['Tag'], ''), 'li', ['li', 'dt', 'dd']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/list/list.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {%- if ((ui_def(p['Value'], 0) > 0) and ui_eq(tag1, 'li')) %} value="{{ ui_s(ui_def(p['Value'], 0)) }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/list/list.html.j2 b/packages/jinja2/ui/ui/list/list.html.j2
new file mode 100644
index 0000000..47c5c6d
--- /dev/null
+++ b/packages/jinja2/ui/ui/list/list.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/list.json
+    List: List renders a list container (ul, ol, dl, or menu).
+    Props (p): Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag(ui_def(p['Tag'], ''), 'ul', ['ul', 'ol', 'dl', 'menu']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/list/list.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/list/list.variants.json b/packages/jinja2/ui/ui/list/list.variants.json
new file mode 100644
index 0000000..59bcd92
--- /dev/null
+++ b/packages/jinja2/ui/ui/list/list.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.list",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/lucide-icon/lucide-icon.html.j2 b/packages/jinja2/ui/ui/lucide-icon/lucide-icon.html.j2
new file mode 100644
index 0000000..4b89a39
--- /dev/null
+++ b/packages/jinja2/ui/ui/lucide-icon/lucide-icon.html.j2
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/runtimes/jinja2/assets/lucide-icon.html.j2
+    LucideIcon (asset). -#}
+{#- LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from lucide-icons.json next to this file.
+    Decorative (aria-hidden) unless a Label is given. Size and StrokeWidth default to 16 and 2. -#}
+{%- set size = ui_def(p['Size'], 0) or 16 -%}
+{%- set label = ui_def(p['Label'], '') -%}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="{{ size }}" height="{{ size }}" fill="none" stroke="currentColor"
+  stroke-width="{{ ui_def(p['StrokeWidth'], 0) or 2 }}" stroke-linecap="round" stroke-linejoin="round"
+  class="{{ ui_cn(['inline-block shrink-0', ui_def(p['Class'], '')]) }}"
+  {%- if label == '' %} aria-hidden="true"{% else %} aria-label="{{ label }}" role="img"{% endif %} data-slot="icon"
+  {%- if ui_def(p['Name'], '') != '' %} data-lucide="{{ p['Name'] }}"{% endif %}{{ ui_attr_html(ui_def(p['Attrs'], {})) }}>
+  {{- ui_lucide(ui_def(p['Name'], '')) -}}
+</svg>
diff --git a/packages/jinja2/ui/ui/lucide-icon/lucide-icons.json b/packages/jinja2/ui/ui/lucide-icon/lucide-icons.json
new file mode 100644
index 0000000..7b47b1f
--- /dev/null
+++ b/packages/jinja2/ui/ui/lucide-icon/lucide-icons.json
@@ -0,0 +1,6625 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "source": "Lucide icons (ISC license, https://lucide.dev): the glyphs the canary registry names. Harvested by spec/tools/harvest-lucide.ts. Rendering: <svg viewBox=0 0 24 24> with these nodes.",
+  "icons": {
+    "accessibility": [
+      [
+        "circle",
+        {
+          "cx": "16",
+          "cy": "4",
+          "r": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m18 19 1-7-6 1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m5 8 3-3 5.5 3-2.36 3.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.24 14.5a5 5 0 0 0 6.88 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13.76 17.5a5 5 0 0 0-6.88-6"
+        }
+      ]
+    ],
+    "activity": [
+      [
+        "path",
+        {
+          "d": "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+        }
+      ]
+    ],
+    "anchor": [
+      [
+        "path",
+        {
+          "d": "M12 6v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 13 2-1a9 9 0 0 1-18 0l2 1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 11h6"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "4",
+          "r": "2"
+        }
+      ]
+    ],
+    "archive": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "5",
+          "x": "2",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 12h4"
+        }
+      ]
+    ],
+    "arrow-down": [
+      [
+        "path",
+        {
+          "d": "M12 5v14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 12-7 7-7-7"
+        }
+      ]
+    ],
+    "arrow-down-up": [
+      [
+        "path",
+        {
+          "d": "m3 16 4 4 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 20V4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 8-4-4-4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 4v16"
+        }
+      ]
+    ],
+    "arrow-left": [
+      [
+        "path",
+        {
+          "d": "m12 19-7-7 7-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 12H5"
+        }
+      ]
+    ],
+    "arrow-right": [
+      [
+        "path",
+        {
+          "d": "M5 12h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m12 5 7 7-7 7"
+        }
+      ]
+    ],
+    "arrow-up": [
+      [
+        "path",
+        {
+          "d": "m5 12 7-7 7 7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 19V5"
+        }
+      ]
+    ],
+    "arrow-up-right": [
+      [
+        "path",
+        {
+          "d": "M7 7h10v10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 17 17 7"
+        }
+      ]
+    ],
+    "at-sign": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"
+        }
+      ]
+    ],
+    "badge-check": [
+      [
+        "path",
+        {
+          "d": "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 9-5.5 5.5L8 12"
+        }
+      ]
+    ],
+    "badge-dollar-sign": [
+      [
+        "path",
+        {
+          "d": "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18V6"
+        }
+      ]
+    ],
+    "ban": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.929 4.929 19.07 19.071"
+        }
+      ]
+    ],
+    "banknote": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "12",
+          "x": "2",
+          "y": "6",
+          "rx": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 12h.01M18 12h.01"
+        }
+      ]
+    ],
+    "bell": [
+      [
+        "path",
+        {
+          "d": "M10.268 21a2 2 0 0 0 3.464 0"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+        }
+      ]
+    ],
+    "blocks": [
+      [
+        "path",
+        {
+          "d": "M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "14",
+          "y": "2",
+          "width": "8",
+          "height": "8",
+          "rx": "1"
+        }
+      ]
+    ],
+    "bold": [
+      [
+        "path",
+        {
+          "d": "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"
+        }
+      ]
+    ],
+    "bolt": [
+      [
+        "path",
+        {
+          "d": "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ]
+    ],
+    "book-open": [
+      [
+        "path",
+        {
+          "d": "M12 5v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"
+        }
+      ]
+    ],
+    "book-open-text": [
+      [
+        "path",
+        {
+          "d": "M12 5v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 9h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 9h2"
+        }
+      ]
+    ],
+    "book-x": [
+      [
+        "path",
+        {
+          "d": "m14.5 7.5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.5 7.5 5 5"
+        }
+      ]
+    ],
+    "bookmark": [
+      [
+        "path",
+        {
+          "d": "M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"
+        }
+      ]
+    ],
+    "bot": [
+      [
+        "path",
+        {
+          "d": "M12 8V4H8"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "16",
+          "height": "12",
+          "x": "4",
+          "y": "8",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 14h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 14h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 13v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 13v2"
+        }
+      ]
+    ],
+    "boxes": [
+      [
+        "path",
+        {
+          "d": "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 16.5-4.74-2.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 16.5 5-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 16.5v5.17"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 16.5-5-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 16.5 4.74-2.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 16.5v5.17"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8 7.26 5.15"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m12 8 4.74-2.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 13.5V8"
+        }
+      ]
+    ],
+    "brain": [
+      [
+        "path",
+        {
+          "d": "M12 18V5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.997 5.125a4 4 0 0 1 2.526 5.77"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 18a4 4 0 0 0 2-7.464"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 18a4 4 0 0 1-2-7.464"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6.003 5.125a4 4 0 0 0-2.526 5.77"
+        }
+      ]
+    ],
+    "briefcase": [
+      [
+        "path",
+        {
+          "d": "M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "6",
+          "rx": "2"
+        }
+      ]
+    ],
+    "brush": [
+      [
+        "path",
+        {
+          "d": "m11 10 3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"
+        }
+      ]
+    ],
+    "building": [
+      [
+        "path",
+        {
+          "d": "M12 10h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 6h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 10h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 6h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 10h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 6h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "4",
+          "y": "2",
+          "width": "16",
+          "height": "20",
+          "rx": "2"
+        }
+      ]
+    ],
+    "calendar": [
+      [
+        "path",
+        {
+          "d": "M8 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 2v3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "3",
+          "width": "18",
+          "height": "18",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ]
+    ],
+    "calendar-days": [
+      [
+        "path",
+        {
+          "d": "M8 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 2v3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "3",
+          "width": "18",
+          "height": "18",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 17h.01"
+        }
+      ]
+    ],
+    "calendar-range": [
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "3",
+          "width": "18",
+          "height": "18",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 13h-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 17H7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 17h.01"
+        }
+      ]
+    ],
+    "camera": [
+      [
+        "path",
+        {
+          "d": "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "13",
+          "r": "3"
+        }
+      ]
+    ],
+    "chart-area": [
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"
+        }
+      ]
+    ],
+    "chart-column": [
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 17V9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 17V5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 17v-3"
+        }
+      ]
+    ],
+    "chart-line": [
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 9-5 5-4-4-3 3"
+        }
+      ]
+    ],
+    "chart-pie": [
+      [
+        "path",
+        {
+          "d": "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.21 15.89A10 10 0 1 1 8 2.83"
+        }
+      ]
+    ],
+    "chart-scatter": [
+      [
+        "circle",
+        {
+          "cx": "7.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18.5",
+          "cy": "5.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11.5",
+          "cy": "11.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7.5",
+          "cy": "16.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17.5",
+          "cy": "14.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ]
+    ],
+    "check": [
+      [
+        "path",
+        {
+          "d": "M20 6 9 17l-5-5"
+        }
+      ]
+    ],
+    "chevron-down": [
+      [
+        "path",
+        {
+          "d": "m6 9 6 6 6-6"
+        }
+      ]
+    ],
+    "chevron-left": [
+      [
+        "path",
+        {
+          "d": "m15 18-6-6 6-6"
+        }
+      ]
+    ],
+    "chevron-right": [
+      [
+        "path",
+        {
+          "d": "m9 18 6-6-6-6"
+        }
+      ]
+    ],
+    "chevron-up": [
+      [
+        "path",
+        {
+          "d": "m18 15-6-6-6 6"
+        }
+      ]
+    ],
+    "chevrons-down": [
+      [
+        "path",
+        {
+          "d": "m7 6 5 5 5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 13 5 5 5-5"
+        }
+      ]
+    ],
+    "chevrons-up": [
+      [
+        "path",
+        {
+          "d": "m17 11-5-5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 18-5-5-5 5"
+        }
+      ]
+    ],
+    "chevrons-up-down": [
+      [
+        "path",
+        {
+          "d": "m7 15 5 5 5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 9 5-5 5 5"
+        }
+      ]
+    ],
+    "circle": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ]
+    ],
+    "circle-alert": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12",
+          "y1": "8",
+          "y2": "12"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12.01",
+          "y1": "16",
+          "y2": "16"
+        }
+      ]
+    ],
+    "circle-check": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 9-5.5 5.5L8 12"
+        }
+      ]
+    ],
+    "circle-dollar-sign": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18V6"
+        }
+      ]
+    ],
+    "circle-dot": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ]
+    ],
+    "circle-play": [
+      [
+        "path",
+        {
+          "d": "M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ]
+    ],
+    "circle-plus": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8v8"
+        }
+      ]
+    ],
+    "circle-question-mark": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ]
+    ],
+    "circle-slash": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "9",
+          "x2": "15",
+          "y1": "15",
+          "y2": "9"
+        }
+      ]
+    ],
+    "circle-user": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "10",
+          "r": "3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"
+        }
+      ]
+    ],
+    "circle-x": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 9-6 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 9 6 6"
+        }
+      ]
+    ],
+    "clipboard-check": [
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "4",
+          "x": "8",
+          "y": "2",
+          "rx": "1",
+          "ry": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 14 2 2 4-4"
+        }
+      ]
+    ],
+    "clipboard-list": [
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "4",
+          "x": "8",
+          "y": "2",
+          "rx": "1",
+          "ry": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 11h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 11h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 16h.01"
+        }
+      ]
+    ],
+    "clock": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 6v6l4 2"
+        }
+      ]
+    ],
+    "cloud": [
+      [
+        "path",
+        {
+          "d": "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
+        }
+      ]
+    ],
+    "cloud-off": [
+      [
+        "path",
+        {
+          "d": "M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m2 2 20 20"
+        }
+      ]
+    ],
+    "cloud-upload": [
+      [
+        "path",
+        {
+          "d": "M12 13v8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m8 17 4-4 4 4"
+        }
+      ]
+    ],
+    "code-xml": [
+      [
+        "path",
+        {
+          "d": "m18 16 4-4-4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 8-4 4 4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.5 4-5 16"
+        }
+      ]
+    ],
+    "columns-3": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 3v18"
+        }
+      ]
+    ],
+    "command": [
+      [
+        "path",
+        {
+          "d": "M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
+        }
+      ]
+    ],
+    "compass": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"
+        }
+      ]
+    ],
+    "cookie": [
+      [
+        "path",
+        {
+          "d": "M11 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 12h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 16h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 3h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 4h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 8h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 8h.01"
+        }
+      ]
+    ],
+    "copy": [
+      [
+        "rect",
+        {
+          "width": "14",
+          "height": "14",
+          "x": "8",
+          "y": "8",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+        }
+      ]
+    ],
+    "credit-card": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "5",
+          "rx": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "2",
+          "x2": "22",
+          "y1": "10",
+          "y2": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 14h2"
+        }
+      ]
+    ],
+    "database": [
+      [
+        "ellipse",
+        {
+          "cx": "12",
+          "cy": "5",
+          "rx": "9",
+          "ry": "3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5V19A9 3 0 0 0 21 19V5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12A9 3 0 0 0 21 12"
+        }
+      ]
+    ],
+    "dollar-sign": [
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12",
+          "y1": "2",
+          "y2": "22"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
+        }
+      ]
+    ],
+    "dot": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ]
+    ],
+    "download": [
+      [
+        "path",
+        {
+          "d": "M12 15V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 10 5 5 5-5"
+        }
+      ]
+    ],
+    "ellipsis": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "19",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "5",
+          "cy": "12",
+          "r": "1"
+        }
+      ]
+    ],
+    "ellipsis-vertical": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "5",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "19",
+          "r": "1"
+        }
+      ]
+    ],
+    "external-link": [
+      [
+        "path",
+        {
+          "d": "M15 3h6v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 14 21 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+        }
+      ]
+    ],
+    "eye": [
+      [
+        "path",
+        {
+          "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "3"
+        }
+      ]
+    ],
+    "eye-off": [
+      [
+        "path",
+        {
+          "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m2 2 20 20"
+        }
+      ]
+    ],
+    "file": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ]
+    ],
+    "file-code": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 12.5 8 15l2 2.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14 12.5 2 2.5-2 2.5"
+        }
+      ]
+    ],
+    "file-down": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18v-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 15 3 3 3-3"
+        }
+      ]
+    ],
+    "file-image": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "12",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"
+        }
+      ]
+    ],
+    "file-pen": [
+      [
+        "path",
+        {
+          "d": "M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"
+        }
+      ]
+    ],
+    "file-pen-line": [
+      [
+        "path",
+        {
+          "d": "M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14.487 7.858A1 1 0 0 1 14 7V2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 18h1"
+        }
+      ]
+    ],
+    "file-plus": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 15h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18v-6"
+        }
+      ]
+    ],
+    "file-question-mark": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"
+        }
+      ]
+    ],
+    "file-search": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11.5",
+          "cy": "14.5",
+          "r": "2.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13.3 16.3 15 18"
+        }
+      ]
+    ],
+    "file-spreadsheet": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 17h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 17h2"
+        }
+      ]
+    ],
+    "file-text": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 9H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 13H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 17H8"
+        }
+      ]
+    ],
+    "file-up": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 12v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 15-3-3-3 3"
+        }
+      ]
+    ],
+    "file-video-camera": [
+      [
+        "path",
+        {
+          "d": "M4 12V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m10 17.843 3.033-1.755a.64.64 0 0 1 .967.56v4.704a.65.65 0 0 1-.967.56L10 20.157"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "6",
+          "x": "3",
+          "y": "16",
+          "rx": "1"
+        }
+      ]
+    ],
+    "files": [
+      [
+        "path",
+        {
+          "d": "M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1"
+        }
+      ]
+    ],
+    "film": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 7.5h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 16.5h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 7.5h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 16.5h4"
+        }
+      ]
+    ],
+    "fingerprint-pattern": [
+      [
+        "path",
+        {
+          "d": "M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 13.12c0 2.38 0 6.38-1 8.88"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.29 21.02c.12-.6.43-2.3.5-3.02"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12a10 10 0 0 1 18-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 16h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.8 16c.2-2 .131-5.354 0-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8.65 22c.21-.66.45-1.32.57-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 6.8a6 6 0 0 1 9 5.2v2"
+        }
+      ]
+    ],
+    "flag": [
+      [
+        "path",
+        {
+          "d": "M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"
+        }
+      ]
+    ],
+    "folder": [
+      [
+        "path",
+        {
+          "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+        }
+      ]
+    ],
+    "folder-archive": [
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "19",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 11v-1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 17v-2"
+        }
+      ]
+    ],
+    "folder-kanban": [
+      [
+        "path",
+        {
+          "d": "M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 10v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 10v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 10v6"
+        }
+      ]
+    ],
+    "folder-open": [
+      [
+        "path",
+        {
+          "d": "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
+        }
+      ]
+    ],
+    "folder-plus": [
+      [
+        "path",
+        {
+          "d": "M12 10v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 13h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+        }
+      ]
+    ],
+    "folder-tree": [
+      [
+        "path",
+        {
+          "d": "M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5a2 2 0 0 0 2 2h3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3v13a2 2 0 0 0 2 2h3"
+        }
+      ]
+    ],
+    "funnel": [
+      [
+        "path",
+        {
+          "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
+        }
+      ]
+    ],
+    "gift": [
+      [
+        "path",
+        {
+          "d": "M12 7v14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "7",
+          "width": "18",
+          "height": "4",
+          "rx": "1"
+        }
+      ]
+    ],
+    "git-compare": [
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "18",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6",
+          "cy": "6",
+          "r": "3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 6h3a2 2 0 0 1 2 2v7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 18H8a2 2 0 0 1-2-2V9"
+        }
+      ]
+    ],
+    "globe": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h20"
+        }
+      ]
+    ],
+    "globe-lock": [
+      [
+        "path",
+        {
+          "d": "M15.686 15A14.5 14.5 0 0 1 12 22a14.5 14.5 0 0 1 0-20 10 10 0 1 0 9.542 13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h8.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 6V4a2 2 0 1 0-4 0v2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "5",
+          "x": "14",
+          "y": "6",
+          "rx": "1"
+        }
+      ]
+    ],
+    "graduation-cap": [
+      [
+        "path",
+        {
+          "d": "M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 10v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 12.5V16a6 3 0 0 0 12 0v-3.5"
+        }
+      ]
+    ],
+    "grid-3x3": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 15h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 3v18"
+        }
+      ]
+    ],
+    "grip-vertical": [
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "5",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "19",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "5",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "19",
+          "r": "1"
+        }
+      ]
+    ],
+    "group": [
+      [
+        "path",
+        {
+          "d": "M3 7V5c0-1.1.9-2 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 3h2c1.1 0 2 .9 2 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 17v2c0 1.1-.9 2-2 2h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 21H5c-1.1 0-2-.9-2-2v-2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "7",
+          "y": "7",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "10",
+          "y": "12",
+          "rx": "1"
+        }
+      ]
+    ],
+    "handshake": [
+      [
+        "path",
+        {
+          "d": "m11 17 2 2a1 1 0 1 0 3-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 3 1 11h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 4h8"
+        }
+      ]
+    ],
+    "hash": [
+      [
+        "line",
+        {
+          "x1": "4",
+          "x2": "20",
+          "y1": "9",
+          "y2": "9"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "4",
+          "x2": "20",
+          "y1": "15",
+          "y2": "15"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "10",
+          "x2": "8",
+          "y1": "3",
+          "y2": "21"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "16",
+          "x2": "14",
+          "y1": "3",
+          "y2": "21"
+        }
+      ]
+    ],
+    "heading": [
+      [
+        "path",
+        {
+          "d": "M6 12h12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 20V4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 20V4"
+        }
+      ]
+    ],
+    "headphones": [
+      [
+        "path",
+        {
+          "d": "M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"
+        }
+      ]
+    ],
+    "heart": [
+      [
+        "path",
+        {
+          "d": "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+        }
+      ]
+    ],
+    "heart-handshake": [
+      [
+        "path",
+        {
+          "d": "M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"
+        }
+      ]
+    ],
+    "hourglass": [
+      [
+        "path",
+        {
+          "d": "M5 22h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 2h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"
+        }
+      ]
+    ],
+    "house": [
+      [
+        "path",
+        {
+          "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+        }
+      ]
+    ],
+    "id-card": [
+      [
+        "path",
+        {
+          "d": "M13 19a4 4 0 00-8 0"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 10h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 14h2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "2",
+          "y": "5",
+          "width": "20",
+          "height": "14",
+          "rx": "2"
+        }
+      ]
+    ],
+    "image": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "9",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+        }
+      ]
+    ],
+    "image-off": [
+      [
+        "line",
+        {
+          "x1": "2",
+          "x2": "22",
+          "y1": "2",
+          "y2": "22"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10.41 10.41a2 2 0 1 1-2.83-2.83"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "13.5",
+          "x2": "6",
+          "y1": "13.5",
+          "y2": "21"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "18",
+          "x2": "21",
+          "y1": "12",
+          "y2": "15"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15V5a2 2 0 0 0-2-2H9"
+        }
+      ]
+    ],
+    "image-plus": [
+      [
+        "path",
+        {
+          "d": "M16 5h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 2v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "9",
+          "r": "2"
+        }
+      ]
+    ],
+    "images": [
+      [
+        "path",
+        {
+          "d": "m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "13",
+          "cy": "7",
+          "r": "1",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "8",
+          "y": "2",
+          "width": "14",
+          "height": "14",
+          "rx": "2"
+        }
+      ]
+    ],
+    "inbox": [
+      [
+        "polyline",
+        {
+          "points": "22 12 16 12 14 15 10 15 8 12 2 12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
+        }
+      ]
+    ],
+    "info": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16v-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8h.01"
+        }
+      ]
+    ],
+    "italic": [
+      [
+        "line",
+        {
+          "x1": "19",
+          "x2": "10",
+          "y1": "4",
+          "y2": "4"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "14",
+          "x2": "5",
+          "y1": "20",
+          "y2": "20"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "15",
+          "x2": "9",
+          "y1": "4",
+          "y2": "20"
+        }
+      ]
+    ],
+    "kanban": [
+      [
+        "path",
+        {
+          "d": "M5 3v14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 3v8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 3v18"
+        }
+      ]
+    ],
+    "key": [
+      [
+        "path",
+        {
+          "d": "m2 21 9.6-9.6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7.5 15.5 2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15.5",
+          "cy": "7.5",
+          "r": "5.5"
+        }
+      ]
+    ],
+    "key-round": [
+      [
+        "path",
+        {
+          "d": "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "16.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "lamp-desk": [
+      [
+        "path",
+        {
+          "d": "M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.207 4.793-3.414 3.414"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18"
+        }
+      ]
+    ],
+    "landmark": [
+      [
+        "path",
+        {
+          "d": "M10 18v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 18v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 18v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 22h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 18v-7"
+        }
+      ]
+    ],
+    "languages": [
+      [
+        "path",
+        {
+          "d": "m5 8 6 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4 14 6-6 2-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 5h12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 22-5-10-5 10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 18h6"
+        }
+      ]
+    ],
+    "laptop": [
+      [
+        "path",
+        {
+          "d": "M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.054 15.987H3.946"
+        }
+      ]
+    ],
+    "layers": [
+      [
+        "path",
+        {
+          "d": "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"
+        }
+      ]
+    ],
+    "layout-dashboard": [
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "9",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "14",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "9",
+          "x": "14",
+          "y": "12",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "3",
+          "y": "16",
+          "rx": "1"
+        }
+      ]
+    ],
+    "layout-grid": [
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "14",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "14",
+          "y": "14",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "14",
+          "rx": "1"
+        }
+      ]
+    ],
+    "layout-list": [
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "14",
+          "rx": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 4h7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 9h7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 15h7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 20h7"
+        }
+      ]
+    ],
+    "layout-template": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "7",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "9",
+          "height": "7",
+          "x": "3",
+          "y": "14",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "7",
+          "x": "16",
+          "y": "14",
+          "rx": "1"
+        }
+      ]
+    ],
+    "life-buoy": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.93 4.93 4.24 4.24"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.83 9.17 4.24-4.24"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.83 14.83 4.24 4.24"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.17 14.83-4.24 4.24"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ]
+    ],
+    "lightbulb": [
+      [
+        "path",
+        {
+          "d": "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 18h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 22h4"
+        }
+      ]
+    ],
+    "link": [
+      [
+        "path",
+        {
+          "d": "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+        }
+      ]
+    ],
+    "link-2": [
+      [
+        "path",
+        {
+          "d": "M9 17H7A5 5 0 0 1 7 7h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 7h2a5 5 0 1 1 0 10h-2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "8",
+          "x2": "16",
+          "y1": "12",
+          "y2": "12"
+        }
+      ]
+    ],
+    "list": [
+      [
+        "path",
+        {
+          "d": "M3 5h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 19h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 5h13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 12h13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 19h13"
+        }
+      ]
+    ],
+    "list-checks": [
+      [
+        "path",
+        {
+          "d": "M13 5h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m3 17 2 2 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m3 7 2 2 4-4"
+        }
+      ]
+    ],
+    "list-filter": [
+      [
+        "path",
+        {
+          "d": "M2 5h20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 12h12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 19h6"
+        }
+      ]
+    ],
+    "list-ordered": [
+      [
+        "path",
+        {
+          "d": "M11 5h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 12h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 19h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 4h1v5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 9h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"
+        }
+      ]
+    ],
+    "list-todo": [
+      [
+        "path",
+        {
+          "d": "M13 5h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m3 17 2 2 4-4"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "4",
+          "width": "6",
+          "height": "6",
+          "rx": "1"
+        }
+      ]
+    ],
+    "list-tree": [
+      [
+        "path",
+        {
+          "d": "M8 5h13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 10a2 2 0 0 0 2 2h3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5v12a2 2 0 0 0 2 2h3"
+        }
+      ]
+    ],
+    "loader": [
+      [
+        "path",
+        {
+          "d": "M12 2v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.2 7.8 2.9-2.9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 12h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.2 16.2 2.9 2.9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.9 19.1 2.9-2.9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.9 4.9 2.9 2.9"
+        }
+      ]
+    ],
+    "loader-circle": [
+      [
+        "path",
+        {
+          "d": "M21 12a9 9 0 1 1-6.219-8.56"
+        }
+      ]
+    ],
+    "lock": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "11",
+          "x": "3",
+          "y": "11",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 11V7a5 5 0 0 1 10 0v4"
+        }
+      ]
+    ],
+    "lock-keyhole": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "16",
+          "r": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "10",
+          "width": "18",
+          "height": "12",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 10V7a5 5 0 0 1 10 0v3"
+        }
+      ]
+    ],
+    "log-in": [
+      [
+        "path",
+        {
+          "d": "m10 17 5-5-5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 12H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"
+        }
+      ]
+    ],
+    "log-out": [
+      [
+        "path",
+        {
+          "d": "m16 17 5-5-5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12H9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+        }
+      ]
+    ],
+    "mail": [
+      [
+        "path",
+        {
+          "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "2",
+          "y": "4",
+          "width": "20",
+          "height": "16",
+          "rx": "2"
+        }
+      ]
+    ],
+    "mail-check": [
+      [
+        "path",
+        {
+          "d": "M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 19 2 2 4-4"
+        }
+      ]
+    ],
+    "mail-open": [
+      [
+        "path",
+        {
+          "d": "M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"
+        }
+      ]
+    ],
+    "map-pin": [
+      [
+        "path",
+        {
+          "d": "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "10",
+          "r": "3"
+        }
+      ]
+    ],
+    "megaphone": [
+      [
+        "path",
+        {
+          "d": "M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 6v8"
+        }
+      ]
+    ],
+    "menu": [
+      [
+        "path",
+        {
+          "d": "M4 5h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 12h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 19h16"
+        }
+      ]
+    ],
+    "message-circle": [
+      [
+        "path",
+        {
+          "d": "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+        }
+      ]
+    ],
+    "message-circle-question-mark": [
+      [
+        "path",
+        {
+          "d": "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ]
+    ],
+    "message-square": [
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ]
+    ],
+    "message-square-more": [
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 11h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 11h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 11h.01"
+        }
+      ]
+    ],
+    "message-square-quote": [
+      [
+        "path",
+        {
+          "d": "M14 14a2 2 0 0 0 2-2V8h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 14a2 2 0 0 0 2-2V8H8"
+        }
+      ]
+    ],
+    "message-square-text": [
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 11h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 15h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 7h8"
+        }
+      ]
+    ],
+    "messages-square": [
+      [
+        "path",
+        {
+          "d": "M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"
+        }
+      ]
+    ],
+    "minus": [
+      [
+        "path",
+        {
+          "d": "M5 12h14"
+        }
+      ]
+    ],
+    "monitor": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "8",
+          "x2": "16",
+          "y1": "21",
+          "y2": "21"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12",
+          "y1": "17",
+          "y2": "21"
+        }
+      ]
+    ],
+    "monitor-smartphone": [
+      [
+        "path",
+        {
+          "d": "M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 19v-3.96 3.15"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 19h5"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "6",
+          "height": "10",
+          "x": "16",
+          "y": "12",
+          "rx": "2"
+        }
+      ]
+    ],
+    "moon": [
+      [
+        "path",
+        {
+          "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+        }
+      ]
+    ],
+    "mountain": [
+      [
+        "path",
+        {
+          "d": "m8 3 4 8 5-5 5 15H2L8 3z"
+        }
+      ]
+    ],
+    "mouse-pointer-click": [
+      [
+        "path",
+        {
+          "d": "M14 4.1 12 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m5.1 8-2.9-.8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 12-1.9 2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.2 2.2 8 5.1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"
+        }
+      ]
+    ],
+    "move-right": [
+      [
+        "path",
+        {
+          "d": "M18 8L22 12L18 16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12H22"
+        }
+      ]
+    ],
+    "music": [
+      [
+        "path",
+        {
+          "d": "M9 18V5l12-2v13"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6",
+          "cy": "18",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "16",
+          "r": "3"
+        }
+      ]
+    ],
+    "newspaper": [
+      [
+        "path",
+        {
+          "d": "M15 18h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 14h-8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "4",
+          "x": "10",
+          "y": "6",
+          "rx": "1"
+        }
+      ]
+    ],
+    "orbit": [
+      [
+        "path",
+        {
+          "d": "M20.341 6.484A10 10 0 0 1 10.266 21.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.659 17.516A10 10 0 0 1 13.74 2.152"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "19",
+          "cy": "5",
+          "r": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "5",
+          "cy": "19",
+          "r": "2"
+        }
+      ]
+    ],
+    "package": [
+      [
+        "path",
+        {
+          "d": "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 22V12"
+        }
+      ],
+      [
+        "polyline",
+        {
+          "points": "3.29 7 12 12 20.71 7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7.5 4.27 9 5.15"
+        }
+      ]
+    ],
+    "package-check": [
+      [
+        "path",
+        {
+          "d": "M12 22V12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 17 2 2 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.29 7 12 12l8.71-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7.5 4.27 8.997 5.148"
+        }
+      ]
+    ],
+    "package-open": [
+      [
+        "path",
+        {
+          "d": "M12 22v-9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"
+        }
+      ]
+    ],
+    "palette": [
+      [
+        "path",
+        {
+          "d": "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "13.5",
+          "cy": "6.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17.5",
+          "cy": "10.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6.5",
+          "cy": "12.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "8.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "panel-bottom": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 15h18"
+        }
+      ]
+    ],
+    "panel-left": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ]
+    ],
+    "panel-left-close": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 15-3-3 3-3"
+        }
+      ]
+    ],
+    "panel-top": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ]
+    ],
+    "paperclip": [
+      [
+        "path",
+        {
+          "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"
+        }
+      ]
+    ],
+    "pause": [
+      [
+        "rect",
+        {
+          "x": "14",
+          "y": "3",
+          "width": "5",
+          "height": "18",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "5",
+          "y": "3",
+          "width": "5",
+          "height": "18",
+          "rx": "1"
+        }
+      ]
+    ],
+    "pencil": [
+      [
+        "path",
+        {
+          "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 5 4 4"
+        }
+      ]
+    ],
+    "pencil-line": [
+      [
+        "path",
+        {
+          "d": "M13 21h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 5 4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
+        }
+      ]
+    ],
+    "percent": [
+      [
+        "line",
+        {
+          "x1": "19",
+          "x2": "5",
+          "y1": "5",
+          "y2": "19"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6.5",
+          "cy": "6.5",
+          "r": "2.5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17.5",
+          "cy": "17.5",
+          "r": "2.5"
+        }
+      ]
+    ],
+    "phone": [
+      [
+        "path",
+        {
+          "d": "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"
+        }
+      ]
+    ],
+    "pilcrow": [
+      [
+        "path",
+        {
+          "d": "M13 4v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 4v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 4H9.5a4.5 4.5 0 0 0 0 9H13"
+        }
+      ]
+    ],
+    "pin": [
+      [
+        "path",
+        {
+          "d": "M12 17v5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"
+        }
+      ]
+    ],
+    "play": [
+      [
+        "path",
+        {
+          "d": "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+        }
+      ]
+    ],
+    "plug": [
+      [
+        "path",
+        {
+          "d": "M12 22v-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 8V2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 8V2"
+        }
+      ]
+    ],
+    "plug-zap": [
+      [
+        "path",
+        {
+          "d": "M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m2 22 3-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.5 13.5 10 11"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10.5 16.5 13 14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m18 3-4 4h6l-4 4"
+        }
+      ]
+    ],
+    "plus": [
+      [
+        "path",
+        {
+          "d": "M5 12h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 5v14"
+        }
+      ]
+    ],
+    "presentation": [
+      [
+        "path",
+        {
+          "d": "M2 3h20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 21 5-5 5 5"
+        }
+      ]
+    ],
+    "printer": [
+      [
+        "path",
+        {
+          "d": "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "6",
+          "y": "14",
+          "width": "12",
+          "height": "8",
+          "rx": "1"
+        }
+      ]
+    ],
+    "puzzle": [
+      [
+        "path",
+        {
+          "d": "M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"
+        }
+      ]
+    ],
+    "qr-code": [
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "5",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "5",
+          "x": "16",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "5",
+          "x": "3",
+          "y": "16",
+          "rx": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 16h-3a2 2 0 0 0-2 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 21v.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 7v3a2 2 0 0 1-2 2H7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 3h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16v.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 12h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12v.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 21v-1"
+        }
+      ]
+    ],
+    "quote": [
+      [
+        "path",
+        {
+          "d": "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
+        }
+      ]
+    ],
+    "receipt-text": [
+      [
+        "path",
+        {
+          "d": "M13 16H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 8H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 12H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"
+        }
+      ]
+    ],
+    "redo-2": [
+      [
+        "path",
+        {
+          "d": "m15 14 5-5-5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"
+        }
+      ]
+    ],
+    "refresh-cw": [
+      [
+        "path",
+        {
+          "d": "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 3v5h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 16H3v5"
+        }
+      ]
+    ],
+    "rocket": [
+      [
+        "path",
+        {
+          "d": "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"
+        }
+      ]
+    ],
+    "rotate-ccw": [
+      [
+        "path",
+        {
+          "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3v5h5"
+        }
+      ]
+    ],
+    "rotate-cw": [
+      [
+        "path",
+        {
+          "d": "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 3v5h-5"
+        }
+      ]
+    ],
+    "rows-3": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 9H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15H3"
+        }
+      ]
+    ],
+    "save": [
+      [
+        "path",
+        {
+          "d": "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 3v4a1 1 0 0 0 1 1h7"
+        }
+      ]
+    ],
+    "scale": [
+      [
+        "path",
+        {
+          "d": "M12 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 8 3 8a5 5 0 0 1-6 0zV7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m5 8 3 8a5 5 0 0 1-6 0zV7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 21h10"
+        }
+      ]
+    ],
+    "scan-face": [
+      [
+        "path",
+        {
+          "d": "M3 7V5a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 3h2a2 2 0 0 1 2 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 17v2a2 2 0 0 1-2 2h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 21H5a2 2 0 0 1-2-2v-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 14s1.5 2 4 2 4-2 4-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 9h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 9h.01"
+        }
+      ]
+    ],
+    "scroll-text": [
+      [
+        "path",
+        {
+          "d": "M15 12h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 8h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 17V5a2 2 0 0 0-2-2H4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"
+        }
+      ]
+    ],
+    "search": [
+      [
+        "path",
+        {
+          "d": "m21 21-4.34-4.34"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11",
+          "cy": "11",
+          "r": "8"
+        }
+      ]
+    ],
+    "search-x": [
+      [
+        "path",
+        {
+          "d": "m13.5 8.5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m8.5 8.5 5 5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11",
+          "cy": "11",
+          "r": "8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 21-4.3-4.3"
+        }
+      ]
+    ],
+    "send": [
+      [
+        "path",
+        {
+          "d": "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21.854 2.147-10.94 10.939"
+        }
+      ]
+    ],
+    "settings": [
+      [
+        "path",
+        {
+          "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "3"
+        }
+      ]
+    ],
+    "settings-2": [
+      [
+        "path",
+        {
+          "d": "M14 17H5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 7h-9"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17",
+          "cy": "17",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7",
+          "cy": "7",
+          "r": "3"
+        }
+      ]
+    ],
+    "share": [
+      [
+        "path",
+        {
+          "d": "M12 2v13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 6-4-4-4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
+        }
+      ]
+    ],
+    "share-2": [
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "5",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "19",
+          "r": "3"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "8.59",
+          "x2": "15.42",
+          "y1": "13.51",
+          "y2": "17.49"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "15.41",
+          "x2": "8.59",
+          "y1": "6.51",
+          "y2": "10.49"
+        }
+      ]
+    ],
+    "shield": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ]
+    ],
+    "shield-alert": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16h.01"
+        }
+      ]
+    ],
+    "shield-ban": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.243 5.21 14.39 12.472"
+        }
+      ]
+    ],
+    "shield-check": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 12 2 2 4-4"
+        }
+      ]
+    ],
+    "shield-x": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.5 9.5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.5 9.5 5 5"
+        }
+      ]
+    ],
+    "shopping-bag": [
+      [
+        "path",
+        {
+          "d": "M16 10a4 4 0 0 1-8 0"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.103 6.034h17.794"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"
+        }
+      ]
+    ],
+    "shopping-cart": [
+      [
+        "path",
+        {
+          "d": "m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "20",
+          "r": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "8",
+          "cy": "20",
+          "r": "2"
+        }
+      ]
+    ],
+    "sliders-horizontal": [
+      [
+        "path",
+        {
+          "d": "M10 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 19H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 3v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 17v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12h-9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 19h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 5h-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 10v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 12H3"
+        }
+      ]
+    ],
+    "sliders-vertical": [
+      [
+        "path",
+        {
+          "d": "M10 8h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 21v-9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 16h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 12V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 21v-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 14h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 10V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 21v-7"
+        }
+      ]
+    ],
+    "smartphone": [
+      [
+        "rect",
+        {
+          "width": "14",
+          "height": "20",
+          "x": "5",
+          "y": "2",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18h.01"
+        }
+      ]
+    ],
+    "sparkles": [
+      [
+        "path",
+        {
+          "d": "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 2v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 4h-4"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "4",
+          "cy": "20",
+          "r": "2"
+        }
+      ]
+    ],
+    "square": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ]
+    ],
+    "square-pen": [
+      [
+        "path",
+        {
+          "d": "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"
+        }
+      ]
+    ],
+    "star": [
+      [
+        "path",
+        {
+          "d": "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
+        }
+      ]
+    ],
+    "star-half": [
+      [
+        "path",
+        {
+          "d": "M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"
+        }
+      ]
+    ],
+    "store": [
+      [
+        "path",
+        {
+          "d": "M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"
+        }
+      ]
+    ],
+    "sun": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 20v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.93 4.93 1.41 1.41"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17.66 17.66 1.41 1.41"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 12h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6.34 17.66-1.41 1.41"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19.07 4.93-1.41 1.41"
+        }
+      ]
+    ],
+    "table": [
+      [
+        "path",
+        {
+          "d": "M12 3v18"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 15h18"
+        }
+      ]
+    ],
+    "table-properties": [
+      [
+        "path",
+        {
+          "d": "M15 3v18"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 9H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15H3"
+        }
+      ]
+    ],
+    "tablet": [
+      [
+        "rect",
+        {
+          "width": "16",
+          "height": "20",
+          "x": "4",
+          "y": "2",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12.01",
+          "y1": "18",
+          "y2": "18"
+        }
+      ]
+    ],
+    "tag": [
+      [
+        "path",
+        {
+          "d": "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "tags": [
+      [
+        "path",
+        {
+          "d": "M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10.5",
+          "cy": "6.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "terminal": [
+      [
+        "path",
+        {
+          "d": "M12 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4 17 6-6-6-6"
+        }
+      ]
+    ],
+    "text-align-center": [
+      [
+        "path",
+        {
+          "d": "M21 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 12H7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 19H5"
+        }
+      ]
+    ],
+    "text-align-end": [
+      [
+        "path",
+        {
+          "d": "M21 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12H9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 19H7"
+        }
+      ]
+    ],
+    "text-align-start": [
+      [
+        "path",
+        {
+          "d": "M21 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 12H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 19H3"
+        }
+      ]
+    ],
+    "text-cursor-input": [
+      [
+        "path",
+        {
+          "d": "M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 6v12"
+        }
+      ]
+    ],
+    "thumbs-down": [
+      [
+        "path",
+        {
+          "d": "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 14V2"
+        }
+      ]
+    ],
+    "thumbs-up": [
+      [
+        "path",
+        {
+          "d": "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 10v12"
+        }
+      ]
+    ],
+    "ticket-percent": [
+      [
+        "path",
+        {
+          "d": "M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 9h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 9-6 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 15h.01"
+        }
+      ]
+    ],
+    "timer": [
+      [
+        "line",
+        {
+          "x1": "10",
+          "x2": "14",
+          "y1": "2",
+          "y2": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "15",
+          "y1": "14",
+          "y2": "11"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "14",
+          "r": "8"
+        }
+      ]
+    ],
+    "toggle-left": [
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "5",
+          "rx": "7"
+        }
+      ]
+    ],
+    "trash": [
+      [
+        "path",
+        {
+          "d": "M10 11v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 11v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 6h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+        }
+      ]
+    ],
+    "trees": [
+      [
+        "path",
+        {
+          "d": "M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 16v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"
+        }
+      ]
+    ],
+    "trending-down": [
+      [
+        "path",
+        {
+          "d": "M16 17h6v-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 17-8.5-8.5-5 5L2 7"
+        }
+      ]
+    ],
+    "trending-up": [
+      [
+        "path",
+        {
+          "d": "M16 7h6v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 7-8.5 8.5-5-5L2 17"
+        }
+      ]
+    ],
+    "triangle-alert": [
+      [
+        "path",
+        {
+          "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 9v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ]
+    ],
+    "truck": [
+      [
+        "path",
+        {
+          "d": "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 18H9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17",
+          "cy": "18",
+          "r": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7",
+          "cy": "18",
+          "r": "2"
+        }
+      ]
+    ],
+    "type": [
+      [
+        "path",
+        {
+          "d": "M12 4v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 20h6"
+        }
+      ]
+    ],
+    "undo-2": [
+      [
+        "path",
+        {
+          "d": "M9 14 4 9l5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"
+        }
+      ]
+    ],
+    "upload": [
+      [
+        "path",
+        {
+          "d": "M12 3v12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 8-5-5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+        }
+      ]
+    ],
+    "user": [
+      [
+        "path",
+        {
+          "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-check": [
+      [
+        "path",
+        {
+          "d": "m16 11 2 2 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-cog": [
+      [
+        "path",
+        {
+          "d": "M10 15H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.305 16.53.923-.382"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15.228 13.852-.923-.383"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.852 12.228-.383-.923"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.852 17.772-.383.924"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19.148 12.228.383-.923"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19.53 18.696-.382-.924"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m20.772 13.852.924-.383"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m20.772 16.148.924.383"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "15",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-pen": [
+      [
+        "path",
+        {
+          "d": "M11.5 15H7a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-plus": [
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "19",
+          "x2": "19",
+          "y1": "8",
+          "y2": "14"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "22",
+          "x2": "16",
+          "y1": "11",
+          "y2": "11"
+        }
+      ]
+    ],
+    "user-round-check": [
+      [
+        "path",
+        {
+          "d": "M2 21a8 8 0 0 1 13.292-6"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "8",
+          "r": "5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 19 2 2 4-4"
+        }
+      ]
+    ],
+    "user-x": [
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "17",
+          "x2": "22",
+          "y1": "8",
+          "y2": "13"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "22",
+          "x2": "17",
+          "y1": "8",
+          "y2": "13"
+        }
+      ]
+    ],
+    "users": [
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 3.128a4 4 0 0 1 0 7.744"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 21v-2a4 4 0 0 0-3-3.87"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "users-round": [
+      [
+        "path",
+        {
+          "d": "M18 21a8 8 0 0 0-16 0"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "8",
+          "r": "5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"
+        }
+      ]
+    ],
+    "video": [
+      [
+        "path",
+        {
+          "d": "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "2",
+          "y": "6",
+          "width": "14",
+          "height": "12",
+          "rx": "2"
+        }
+      ]
+    ],
+    "wallet": [
+      [
+        "path",
+        {
+          "d": "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"
+        }
+      ]
+    ],
+    "wand-sparkles": [
+      [
+        "path",
+        {
+          "d": "m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14 7 3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 6v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 14v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 8H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 16h-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 3H9"
+        }
+      ]
+    ],
+    "webhook": [
+      [
+        "path",
+        {
+          "d": "M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"
+        }
+      ]
+    ],
+    "wrench": [
+      [
+        "path",
+        {
+          "d": "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"
+        }
+      ]
+    ],
+    "x": [
+      [
+        "path",
+        {
+          "d": "M18 6 6 18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 6 12 12"
+        }
+      ]
+    ],
+    "zap": [
+      [
+        "path",
+        {
+          "d": "M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"
+        }
+      ]
+    ]
+  }
+}
diff --git a/packages/jinja2/ui/ui/radio/radio.html.j2 b/packages/jinja2/ui/ui/radio/radio.html.j2
new file mode 100644
index 0000000..f4228a4
--- /dev/null
+++ b/packages/jinja2/ui/ui/radio/radio.html.j2
@@ -0,0 +1,18 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/radio.json
+    Radio: Radio renders input[type=radio] with shared Name for grouping.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Checked (bool), Disabled (bool), Required (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<input
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  type="radio"
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Value'], '')) %} value="{{ ui_def(p['Value'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/radio/radio.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_def(p['Checked'], false) %} checked{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {%- if ui_def(p['Required'], false) %} required{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['TabIndex'], '')) %} tabindex="{{ ui_def(p['TabIndex'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/radio/radio.variants.json b/packages/jinja2/ui/ui/radio/radio.variants.json
new file mode 100644
index 0000000..48c72cb
--- /dev/null
+++ b/packages/jinja2/ui/ui/radio/radio.variants.json
@@ -0,0 +1,23 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.radio",
+  "base": "shrink-0 appearance-none rounded-full bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary radio-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5 [--dot:10px]",
+      "sm": "size-4 [--dot:8px]"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/range/range.html.j2 b/packages/jinja2/ui/ui/range/range.html.j2
new file mode 100644
index 0000000..039b095
--- /dev/null
+++ b/packages/jinja2/ui/ui/range/range.html.j2
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/range.json
+    Range: Range renders input type=range.
+    Props (p): Value (string), Min (int), Max (int), Step (int), Disabled (bool), AriaLabel (string), Class (string), Attrs (attrs). -#}
+<input
+  type="range"
+  class="{{ ui_compose('ui/range/range.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  min="{{ (ui_s(ui_def(p['Min'], 0)) if (ui_def(p['Min'], 0) > 0) else '0') }}"
+  max="{{ (ui_s(ui_def(p['Max'], 0)) if (ui_def(p['Max'], 0) > 0) else '100') }}"
+  step="{{ (ui_s(ui_def(p['Step'], 0)) if (ui_def(p['Step'], 0) > 0) else '1') }}"
+  {%- if ui_is_set_str(ui_def(p['Value'], '')) %} value="{{ ui_def(p['Value'], '') }}"{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/range/range.variants.json b/packages/jinja2/ui/ui/range/range.variants.json
new file mode 100644
index 0000000..0f9b0de
--- /dev/null
+++ b/packages/jinja2/ui/ui/range/range.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.range",
+  "base": "h-5 w-full cursor-pointer appearance-none bg-transparent accent-primary disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded [&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/select/opt-group.html.j2 b/packages/jinja2/ui/ui/select/opt-group.html.j2
new file mode 100644
index 0000000..064a0f4
--- /dev/null
+++ b/packages/jinja2/ui/ui/select/opt-group.html.j2
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/select.json
+    OptGroup: OptGroup renders a native optgroup around option children.
+    Props (p): Class (string), Label (string), Disabled (bool), Attrs (attrs); children: markup. -#}
+<optgroup
+  class="{{ ui_cn([ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['Label'], '')) %} label="{{ ui_def(p['Label'], '') }}"{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</optgroup>
diff --git a/packages/jinja2/ui/ui/select/select-option.html.j2 b/packages/jinja2/ui/ui/select/select-option.html.j2
new file mode 100644
index 0000000..343bbda
--- /dev/null
+++ b/packages/jinja2/ui/ui/select/select-option.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/select.json
+    SelectOption: SelectOption renders an option for custom Select children.
+    Props (p): Value (string), Label (string), Selected (bool), Disabled (bool), Attrs (attrs); children: markup. -#}
+<option
+  {%- if ui_is_set_str(ui_def(p['Value'], '')) %} value="{{ ui_def(p['Value'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Label'], '')) %} label="{{ ui_def(p['Label'], '') }}"{%- endif %}
+  {%- if ui_def(p['Selected'], false) %} selected{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</option>
diff --git a/packages/jinja2/ui/ui/select/select.html.j2 b/packages/jinja2/ui/ui/select/select.html.j2
new file mode 100644
index 0000000..7e3791d
--- /dev/null
+++ b/packages/jinja2/ui/ui/select/select.html.j2
@@ -0,0 +1,23 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/select.json
+    Select: Select renders option children from the Options list plus manual children.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Disabled (bool), Required (bool), Options (SelectOptionItem[]), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs); children: markup. -#}
+<select
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/select/select.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {%- if ui_def(p['Required'], false) %} required{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['TabIndex'], '')) %} tabindex="{{ ui_def(p['TabIndex'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
+  {%- for item in ui_def(p['Options'], []) %}
+    <option
+      value="{{ ui_field(item, 'Value', '') }}"
+      {%- if ui_eq(ui_field(item, 'Value', ''), ui_def(p['Value'], '')) %} selected{%- endif %}
+    >{{ ui_field(item, 'Label', '') }}</option>
+  {%- endfor %}
+  {{ ui_def(children, '')|safe }}
+</select>
diff --git a/packages/jinja2/ui/ui/select/select.variants.json b/packages/jinja2/ui/ui/select/select.variants.json
new file mode 100644
index 0000000..132d2e8
--- /dev/null
+++ b/packages/jinja2/ui/ui/select/select.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.select",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-3 text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/separator/separator.html.j2 b/packages/jinja2/ui/ui/separator/separator.html.j2
new file mode 100644
index 0000000..4d7be8d
--- /dev/null
+++ b/packages/jinja2/ui/ui/separator/separator.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/separator.json
+    Separator: Separator renders hr with optional decorative semantics.
+    Props (p): Variant (string), Orientation (string), Class (string), Decorative (bool), Attrs (attrs). -#}
+<hr
+  class="{{ ui_compose('ui/separator/separator.variants.json', {'orientation': ui_def(p['Orientation'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_def(p['Decorative'], false) %} role="presentation"{%- endif %}
+  {%- if ui_def(p['Decorative'], false) %} aria-hidden="true"{%- endif %}
+  {%- if ui_eq(ui_def(p['Orientation'], ''), 'vertical') %} aria-orientation="vertical"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/separator/separator.variants.json b/packages/jinja2/ui/ui/separator/separator.variants.json
new file mode 100644
index 0000000..909771e
--- /dev/null
+++ b/packages/jinja2/ui/ui/separator/separator.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.separator",
+  "base": "shrink-0 border-0 bg-border",
+  "keys": [
+    "orientation",
+    "variant"
+  ],
+  "defaults": {
+    "orientation": "horizontal",
+    "variant": "default"
+  },
+  "byKey": {
+    "orientation": {
+      "horizontal": "h-px w-full",
+      "vertical": "h-full w-px"
+    },
+    "variant": {
+      "default": "",
+      "spaced": "my-6"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/sheet/sheet-close.html.j2 b/packages/jinja2/ui/ui/sheet/sheet-close.html.j2
new file mode 100644
index 0000000..4d35404
--- /dev/null
+++ b/packages/jinja2/ui/ui/sheet/sheet-close.html.j2
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/sheet.json
+    SheetClose: SheetClose renders the close button (Lucide x) inside the panel.
+    Props (p): Variant (string), Size (string), Class (string), AriaLabel (string), Attrs (attrs). -#}
+<button
+  type="button"
+  class="{{ ui_compose('ui/sheet/sheettrigger.variants.json', {'variant': ui_def(p['Variant'], ''), 'size': ui_def(p['Size'], '')}, [ui_def(p['Class'], '')]) }}"
+  data-ui8kit="sheet-close"
+  aria-label="{{ ui_default_if_empty(ui_def(p['AriaLabel'], ''), 'Close menu') }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
+  <svg
+    class="size-5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M18 6 6 18"></path>
+    <path d="m6 6 12 12"></path>
+  </svg>
+</button>
diff --git a/packages/jinja2/ui/ui/sheet/sheet-trigger.html.j2 b/packages/jinja2/ui/ui/sheet/sheet-trigger.html.j2
new file mode 100644
index 0000000..9961bf3
--- /dev/null
+++ b/packages/jinja2/ui/ui/sheet/sheet-trigger.html.j2
@@ -0,0 +1,59 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/sheet.json
+    SheetTrigger: SheetTrigger renders the menu button (aria-expanded, aria-controls, aria-haspopup=dialog) with Lucide menu/x icons.
+    Props (p): Variant (string), Size (string), Class (string), Controls (string), AriaLabel (string), Attrs (attrs). -#}
+<button
+  type="button"
+  class="{{ ui_compose('ui/sheet/sheettrigger.variants.json', {'variant': ui_def(p['Variant'], ''), 'size': ui_def(p['Size'], '')}, [ui_def(p['Class'], '')]) }}"
+  data-ui8kit="sheet-trigger"
+  {%- if ui_is_set_str(ui_def(p['Controls'], '')) %} aria-controls="{{ ui_def(p['Controls'], '') }}"{%- endif %}
+  aria-expanded="false"
+  aria-haspopup="dialog"
+  aria-label="{{ ui_default_if_empty(ui_def(p['AriaLabel'], ''), 'Open menu') }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
+  <svg
+    class="block size-5 in-aria-expanded:hidden"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <line
+      x1="4"
+      x2="20"
+      y1="12"
+      y2="12"
+    ></line>
+    <line
+      x1="4"
+      x2="20"
+      y1="6"
+      y2="6"
+    ></line>
+    <line
+      x1="4"
+      x2="20"
+      y1="18"
+      y2="18"
+    ></line>
+  </svg>
+  <svg
+    class="hidden size-5 in-aria-expanded:block"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M18 6 6 18"></path>
+    <path d="m6 6 12 12"></path>
+  </svg>
+</button>
diff --git a/packages/jinja2/ui/ui/sheet/sheet.html.j2 b/packages/jinja2/ui/ui/sheet/sheet.html.j2
new file mode 100644
index 0000000..3cb4611
--- /dev/null
+++ b/packages/jinja2/ui/ui/sheet/sheet.html.j2
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/sheet.json
+    Sheet: Sheet renders the hidden dialog root: overlay + panel (children). ID is required for the trigger's aria-controls.
+    Props (p): Side (string), Class (string), ID (string), AriaLabel (string), Open (bool), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/sheet/sheet.variants.json', {'side': ui_def(p['Side'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  role="dialog"
+  aria-modal="true"
+  aria-label="{{ ui_default_if_empty(ui_def(p['AriaLabel'], ''), 'Menu') }}"
+  data-ui8kit="sheet"
+  {%- if not (ui_def(p['Open'], false)) %} hidden{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
+  <div class="absolute inset-0 bg-foreground/40" data-ui8kit="sheet-overlay"></div>
+  <div
+    class="relative flex h-full w-80 max-w-full flex-col gap-6 overflow-auto bg-background p-6 text-foreground shadow-lg"
+  >{{ ui_def(children, '')|safe }}</div>
+</div>
diff --git a/packages/jinja2/ui/ui/sheet/sheet.variants.json b/packages/jinja2/ui/ui/sheet/sheet.variants.json
new file mode 100644
index 0000000..7f6e7ca
--- /dev/null
+++ b/packages/jinja2/ui/ui/sheet/sheet.variants.json
@@ -0,0 +1,17 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.sheet",
+  "base": "fixed inset-0 z-50 flex",
+  "keys": [
+    "side"
+  ],
+  "defaults": {
+    "side": "right"
+  },
+  "byKey": {
+    "side": {
+      "left": "flex-row justify-start",
+      "right": "flex-row justify-end"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/sheet/sheettrigger.variants.json b/packages/jinja2/ui/ui/sheet/sheettrigger.variants.json
new file mode 100644
index 0000000..e9d754b
--- /dev/null
+++ b/packages/jinja2/ui/ui/sheet/sheettrigger.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.sheettrigger",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/skeleton/skeleton.html.j2 b/packages/jinja2/ui/ui/skeleton/skeleton.html.j2
new file mode 100644
index 0000000..7fcb495
--- /dev/null
+++ b/packages/jinja2/ui/ui/skeleton/skeleton.html.j2
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/skeleton.json
+    Skeleton: Skeleton renders a decorative placeholder.
+    Props (p): Shape (string), Class (string), Attrs (attrs). -#}
+<div
+  class="{{ ui_compose('ui/skeleton/skeleton.variants.json', {'shape': ui_def(p['Shape'], '')}, [ui_def(p['Class'], '')]) }}"
+  aria-hidden="true"
+  data-slot="skeleton"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+></div>
diff --git a/packages/jinja2/ui/ui/skeleton/skeleton.variants.json b/packages/jinja2/ui/ui/skeleton/skeleton.variants.json
new file mode 100644
index 0000000..ad1e74f
--- /dev/null
+++ b/packages/jinja2/ui/ui/skeleton/skeleton.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.skeleton",
+  "base": "animate-pulse bg-muted motion-reduce:animate-none rounded",
+  "keys": [
+    "shape"
+  ],
+  "defaults": {
+    "shape": "line"
+  },
+  "byKey": {
+    "shape": {
+      "line": "h-4 w-full",
+      "block": "h-20 w-full"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/stack/stack.html.j2 b/packages/jinja2/ui/ui/stack/stack.html.j2
new file mode 100644
index 0000000..53d583f
--- /dev/null
+++ b/packages/jinja2/ui/ui/stack/stack.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/stack.json
+    Stack: Stack renders a vertical flex container.
+    Props (p): Gap (string), Align (string), Justify (string), Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag(ui_def(p['Tag'], ''), 'div', ['div', 'ul', 'ol']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/stack/stack.variants.json', {'gap': ui_def(p['Gap'], ''), 'align': ui_def(p['Align'], ''), 'justify': ui_def(p['Justify'], '')}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/stack/stack.variants.json b/packages/jinja2/ui/ui/stack/stack.variants.json
new file mode 100644
index 0000000..c720342
--- /dev/null
+++ b/packages/jinja2/ui/ui/stack/stack.variants.json
@@ -0,0 +1,40 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.stack",
+  "base": "flex flex-col",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "start",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/switch/switch.html.j2 b/packages/jinja2/ui/ui/switch/switch.html.j2
new file mode 100644
index 0000000..b3653d7
--- /dev/null
+++ b/packages/jinja2/ui/ui/switch/switch.html.j2
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/switch.json
+    Switch: Switch renders input[type=checkbox] with switch role attrs.
+    Props (p): Size (string), Class (string), Name (string), Value (string), Checked (bool), Disabled (bool), Required (bool), ID (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<input
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  type="checkbox"
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Value'], '')) %} value="{{ ui_def(p['Value'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/switch/switch.variants.json', {'size': ui_def(p['Size'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_def(p['Checked'], false) %} checked{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {%- if ui_def(p['Required'], false) %} required{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['TabIndex'], '')) %} tabindex="{{ ui_def(p['TabIndex'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  role="switch"
+  aria-checked="{{ ui_bool_str(ui_def(p['Checked'], false)) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/switch/switch.variants.json b/packages/jinja2/ui/ui/switch/switch.variants.json
new file mode 100644
index 0000000..243eed4
--- /dev/null
+++ b/packages/jinja2/ui/ui/switch/switch.variants.json
@@ -0,0 +1,17 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.switch",
+  "base": "relative shrink-0 appearance-none bg-muted inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary switch-knob disabled:cursor-not-allowed disabled:opacity-50 rounded-full",
+  "keys": [
+    "size"
+  ],
+  "defaults": {
+    "size": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "h-5 w-9 [--knob:12px] [--pad:4px]",
+      "sm": "h-4 w-8 [--knob:12px] [--pad:2px]"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/table/table-body.html.j2 b/packages/jinja2/ui/ui/table/table-body.html.j2
new file mode 100644
index 0000000..d002691
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-body.html.j2
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableBody: TableBody renders the tbody section.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<tbody class="{{ ui_cn([ui_def(p['Class'], '')]) }}"{{ ui_attr_html(ui_def(p['Attrs'], {})) }}>{{ ui_def(children, '')|safe }}</tbody>
diff --git a/packages/jinja2/ui/ui/table/table-caption.html.j2 b/packages/jinja2/ui/ui/table/table-caption.html.j2
new file mode 100644
index 0000000..e7baedd
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-caption.html.j2
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableCaption: TableCaption renders the table caption.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<caption class="{{ ui_cn([ui_def(p['Class'], '')]) }}"{{ ui_attr_html(ui_def(p['Attrs'], {})) }}>{{ ui_def(children, '')|safe }}</caption>
diff --git a/packages/jinja2/ui/ui/table/table-cell.html.j2 b/packages/jinja2/ui/ui/table/table-cell.html.j2
new file mode 100644
index 0000000..5c20425
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-cell.html.j2
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableCell: TableCell renders td with colspan and rowspan.
+    Props (p): Class (string), Scope (string), ColSpan (int), RowSpan (int), Headers (string), Abbr (string), Attrs (attrs); children: markup. -#}
+<td
+  class="{{ ui_compose('ui/table/table-cell.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {%- if (ui_def(p['ColSpan'], 0) > 0) %} colspan="{{ ui_s(ui_def(p['ColSpan'], 0)) }}"{%- endif %}
+  {%- if (ui_def(p['RowSpan'], 0) > 0) %} rowspan="{{ ui_s(ui_def(p['RowSpan'], 0)) }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Headers'], '')) %} headers="{{ ui_def(p['Headers'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</td>
diff --git a/packages/jinja2/ui/ui/table/table-cell.variants.json b/packages/jinja2/ui/ui/table/table-cell.variants.json
new file mode 100644
index 0000000..0725dbc
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-cell.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table-cell",
+  "base": "px-2 py-2 align-middle",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/table/table-col-group.html.j2 b/packages/jinja2/ui/ui/table/table-col-group.html.j2
new file mode 100644
index 0000000..d62d830
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-col-group.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableColGroup: TableColGroup renders colgroup with optional span.
+    Props (p): Class (string), Span (int), Attrs (attrs); children: markup. -#}
+<colgroup
+  class="{{ ui_cn([ui_def(p['Class'], '')]) }}"
+  {%- if (ui_def(p['Span'], 0) > 0) %} span="{{ ui_s(ui_def(p['Span'], 0)) }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</colgroup>
diff --git a/packages/jinja2/ui/ui/table/table-col.html.j2 b/packages/jinja2/ui/ui/table/table-col.html.j2
new file mode 100644
index 0000000..8895219
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-col.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableCol: TableCol renders a single col definition.
+    Props (p): Class (string), Span (int), Attrs (attrs). -#}
+<col
+  class="{{ ui_cn([ui_def(p['Class'], '')]) }}"
+  {%- if (ui_def(p['Span'], 0) > 0) %} span="{{ ui_s(ui_def(p['Span'], 0)) }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
diff --git a/packages/jinja2/ui/ui/table/table-foot.html.j2 b/packages/jinja2/ui/ui/table/table-foot.html.j2
new file mode 100644
index 0000000..87d1f1c
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-foot.html.j2
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableFoot: TableFoot renders the tfoot section.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<tfoot class="{{ ui_cn([ui_def(p['Class'], '')]) }}"{{ ui_attr_html(ui_def(p['Attrs'], {})) }}>{{ ui_def(children, '')|safe }}</tfoot>
diff --git a/packages/jinja2/ui/ui/table/table-head-cell.html.j2 b/packages/jinja2/ui/ui/table/table-head-cell.html.j2
new file mode 100644
index 0000000..78f2056
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-head-cell.html.j2
@@ -0,0 +1,13 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableHeadCell: TableHeadCell renders th with optional scope and abbr.
+    Props (p): Class (string), Scope (string), ColSpan (int), RowSpan (int), Headers (string), Abbr (string), Attrs (attrs); children: markup. -#}
+<th
+  class="{{ ui_compose('ui/table/table-head-cell.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_map_or(ui_def(p['Scope'], ''), {'col': 'col', 'colgroup': 'colgroup', 'row': 'row', 'rowgroup': 'rowgroup'}, '', true)) %} scope="{{ ui_map_or(ui_def(p['Scope'], ''), {'col': 'col', 'colgroup': 'colgroup', 'row': 'row', 'rowgroup': 'rowgroup'}, '', true) }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Abbr'], '')) %} abbr="{{ ui_def(p['Abbr'], '') }}"{%- endif %}
+  {%- if (ui_def(p['ColSpan'], 0) > 0) %} colspan="{{ ui_s(ui_def(p['ColSpan'], 0)) }}"{%- endif %}
+  {%- if (ui_def(p['RowSpan'], 0) > 0) %} rowspan="{{ ui_s(ui_def(p['RowSpan'], 0)) }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Headers'], '')) %} headers="{{ ui_def(p['Headers'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</th>
diff --git a/packages/jinja2/ui/ui/table/table-head-cell.variants.json b/packages/jinja2/ui/ui/table/table-head-cell.variants.json
new file mode 100644
index 0000000..d7d0d52
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-head-cell.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table-head-cell",
+  "base": "px-2 py-2 text-left align-middle font-semibold",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/table/table-head.html.j2 b/packages/jinja2/ui/ui/table/table-head.html.j2
new file mode 100644
index 0000000..1e5f040
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-head.html.j2
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableHead: TableHead renders the thead section.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<thead class="{{ ui_cn([ui_def(p['Class'], '')]) }}"{{ ui_attr_html(ui_def(p['Attrs'], {})) }}>{{ ui_def(children, '')|safe }}</thead>
diff --git a/packages/jinja2/ui/ui/table/table-row.html.j2 b/packages/jinja2/ui/ui/table/table-row.html.j2
new file mode 100644
index 0000000..a9e5c92
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table-row.html.j2
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableRow: TableRow renders one tr row.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<tr class="{{ ui_cn([ui_def(p['Class'], '')]) }}"{{ ui_attr_html(ui_def(p['Attrs'], {})) }}>{{ ui_def(children, '')|safe }}</tr>
diff --git a/packages/jinja2/ui/ui/table/table.html.j2 b/packages/jinja2/ui/ui/table/table.html.j2
new file mode 100644
index 0000000..51c8e8c
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table.html.j2
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    Table: Table renders the root table element.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<table
+  class="{{ ui_compose('ui/table/table.variants.json', {}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</table>
diff --git a/packages/jinja2/ui/ui/table/table.variants.json b/packages/jinja2/ui/ui/table/table.variants.json
new file mode 100644
index 0000000..7b2c2ad
--- /dev/null
+++ b/packages/jinja2/ui/ui/table/table.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/jinja2/ui/ui/text/text.html.j2 b/packages/jinja2/ui/ui/text/text.html.j2
new file mode 100644
index 0000000..78550c1
--- /dev/null
+++ b/packages/jinja2/ui/ui/text/text.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/text.json
+    Text: Text renders a p element with body copy classes, or the block or inline text element of `Tag`.
+    Props (p): Size (string), Weight (string), Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag(ui_def(p['Tag'], ''), 'p', ['p', 'blockquote', 'figcaption', 'address', 'pre', 'span', 'em', 'strong', 'small', 'abbr', 'cite', 'code', 'kbd', 'mark', 'time', 'data', 'var', 'samp', 'sub', 'sup', 'b', 'i', 'u', 's', 'q', 'dfn', 'bdo', 'bdi', 'ins', 'del']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/text/text.variants.json', {'size': ui_def(p['Size'], ''), 'weight': ui_def(p['Weight'], '')}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/text/text.variants.json b/packages/jinja2/ui/ui/text/text.variants.json
new file mode 100644
index 0000000..2869a4f
--- /dev/null
+++ b/packages/jinja2/ui/ui/text/text.variants.json
@@ -0,0 +1,34 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.text",
+  "base": "",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "inherit"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold",
+      "inherit": ""
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/textarea/textarea.html.j2 b/packages/jinja2/ui/ui/textarea/textarea.html.j2
new file mode 100644
index 0000000..33b8799
--- /dev/null
+++ b/packages/jinja2/ui/ui/textarea/textarea.html.j2
@@ -0,0 +1,17 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/textarea.json
+    Textarea: Textarea renders a styled multi-line form control.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Placeholder (string), Rows (int), Disabled (bool), Required (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<textarea
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Name'], '')) %} name="{{ ui_def(p['Name'], '') }}"{%- endif %}
+  class="{{ ui_compose('ui/textarea/textarea.variants.json', {'size': ui_def(p['Size'], ''), 'variant': ui_def(p['Variant'], '')}, [ui_def(p['Class'], '')]) }}"
+  rows="{{ (ui_s(ui_def(p['Rows'], 0)) if (ui_def(p['Rows'], 0) > 0) else '4') }}"
+  {%- if ui_is_set_str(ui_def(p['Placeholder'], '')) %} placeholder="{{ ui_def(p['Placeholder'], '') }}"{%- endif %}
+  {%- if ui_def(p['Disabled'], false) %} disabled{%- endif %}
+  {%- if ui_def(p['Required'], false) %} required{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['Role'], '')) %} role="{{ ui_def(p['Role'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['TabIndex'], '')) %} tabindex="{{ ui_def(p['TabIndex'], '') }}"{%- endif %}
+  {%- if ui_is_set_str(ui_def(p['AriaLabel'], '')) %} aria-label="{{ ui_def(p['AriaLabel'], '') }}"{%- endif %}
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(p['Value'], '') }}</textarea>
diff --git a/packages/jinja2/ui/ui/textarea/textarea.variants.json b/packages/jinja2/ui/ui/textarea/textarea.variants.json
new file mode 100644
index 0000000..6480057
--- /dev/null
+++ b/packages/jinja2/ui/ui/textarea/textarea.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.textarea",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "min-h-16 px-3 py-2 text-base md:text-sm",
+      "default": "min-h-20 px-3 py-2 text-base md:text-sm",
+      "lg": "min-h-24 px-4 py-3 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/jinja2/ui/ui/themetoggle/theme-toggle.html.j2 b/packages/jinja2/ui/ui/themetoggle/theme-toggle.html.j2
new file mode 100644
index 0000000..fb4ab9f
--- /dev/null
+++ b/packages/jinja2/ui/ui/themetoggle/theme-toggle.html.j2
@@ -0,0 +1,52 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/themetoggle.json
+    ThemeToggle: ThemeToggle renders a button with Lucide sun/moon icons; aria-pressed reflects dark mode.
+    Props (p): Variant (string), Size (string), Class (string), ID (string), AriaLabel (string), Attrs (attrs). -#}
+<button
+  type="button"
+  class="{{ ui_compose('ui/themetoggle/themetoggle.variants.json', {'variant': ui_def(p['Variant'], ''), 'size': ui_def(p['Size'], '')}, [ui_def(p['Class'], '')]) }}"
+  {%- if ui_is_set_str(ui_def(p['ID'], '')) %} id="{{ ui_def(p['ID'], '') }}"{%- endif %}
+  data-ui8kit="theme-toggle"
+  aria-label="{{ ui_default_if_empty(ui_def(p['AriaLabel'], ''), 'Dark mode') }}"
+  aria-pressed="false"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>
+  <svg
+    class="hidden size-5 dark:block"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="4"
+    ></circle>
+    <path d="M12 2v2"></path>
+    <path d="M12 20v2"></path>
+    <path d="m4.93 4.93 1.41 1.41"></path>
+    <path d="m17.66 17.66 1.41 1.41"></path>
+    <path d="M2 12h2"></path>
+    <path d="M20 12h2"></path>
+    <path d="m6.34 17.66-1.41 1.41"></path>
+    <path d="m19.07 4.93-1.41 1.41"></path>
+  </svg>
+  <svg
+    class="block size-5 dark:hidden"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+  </svg>
+</button>
diff --git a/packages/jinja2/ui/ui/themetoggle/themetoggle.variants.json b/packages/jinja2/ui/ui/themetoggle/themetoggle.variants.json
new file mode 100644
index 0000000..e373e79
--- /dev/null
+++ b/packages/jinja2/ui/ui/themetoggle/themetoggle.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.themetoggle",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/packages/jinja2/ui/ui/title/title.html.j2 b/packages/jinja2/ui/ui/title/title.html.j2
new file mode 100644
index 0000000..c4f9237
--- /dev/null
+++ b/packages/jinja2/ui/ui/title/title.html.j2
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/title.json
+    Title: Title renders the resolved heading element.
+    Props (p): Size (string), Weight (string), Class (string), As (int), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_title_tag(ui_def(p['As'], 0)) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/title/title.variants.json', {'size': ui_def(p['Size'], ''), 'weight': ui_def(p['Weight'], '')}, [ui_def(p['Class'], '')]) }}"
+  {{ ui_attr_html(ui_def(p['Attrs'], {})) }}
+>{{ ui_def(children, '')|safe }}</{{ tag1 }}>
diff --git a/packages/jinja2/ui/ui/title/title.variants.json b/packages/jinja2/ui/ui/title/title.variants.json
new file mode 100644
index 0000000..aeb5034
--- /dev/null
+++ b/packages/jinja2/ui/ui/title/title.variants.json
@@ -0,0 +1,33 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.title",
+  "base": "text-foreground",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "semibold"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold"
+    }
+  }
+}
diff --git a/packages/latte/ui/.gitignore b/packages/latte/ui/.gitignore
new file mode 100644
index 0000000..d6a2b91
--- /dev/null
+++ b/packages/latte/ui/.gitignore
@@ -0,0 +1,4 @@
+# Code generated by xgen. DO NOT EDIT.
+# composer install output: rebuilt by bun run check
+vendor/
+composer.lock
diff --git a/packages/latte/ui/.xgen-manifest.json b/packages/latte/ui/.xgen-manifest.json
new file mode 100644
index 0000000..ff1c7c6
--- /dev/null
+++ b/packages/latte/ui/.xgen-manifest.json
@@ -0,0 +1,374 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "packages/latte/ui",
+  "files": {
+    ".gitignore": "73f3140271ab2bba951044ead08ae4e9a53fb1f56eb8c3d8c342c9f5f56f13b9",
+    "bin/parity.php": "e823e59683afa07db7f2a55001794470a6affbdb05404c0b51c64a7f68215c7a",
+    "blocks/about-company.latte": "5796e6c115884749277004824a6c5e90f39e9a69717bea478848533f4e6ca46d",
+    "blocks/about-me.latte": "27107a5988f5b9109fd780ccbaa6bf737686275ebd465b4c451aa28a445c7f0a",
+    "blocks/action-group.latte": "e19ec2ebc0c379f402ed9e652218bf77bba99fbd64e1dd6e42670cc53728f6ea",
+    "blocks/activity-feed.latte": "04968bc250b24223e6cd074c3a8e80bf96bb92dc0e658f6cba35371b9601b1dc",
+    "blocks/announcement-bar.latte": "6cc77eb52127bf6dee8506d2f464646b7fcb70f774a865927bbe069066e440e9",
+    "blocks/app-main.latte": "cebc35dd1380ce29885f9768e13cd9a9cfd53888abd1091d9e87545847b5a031",
+    "blocks/app-shell.latte": "7d8d2f6c82ed501e35e748f3b149580f42b90d3bec3978733f44712f64e074da",
+    "blocks/article-block.latte": "c285e75840cb37d16c582163c4fb419d60376c7bf5d0160cba37982875155d9d",
+    "blocks/article-body.latte": "b216f4ddec67d4747f6dd32267782b5a44343af91354749a232026d6c0605655",
+    "blocks/auth-card.latte": "fd79c54cc08783819b166b814bee977890c3c3c46c3a9973eaa7df9a9968303d",
+    "blocks/auth-form.latte": "d435d97ae7f5527bca5bd2662d0b177c01ceeb9749bb7708f48471ed7d3e40ed",
+    "blocks/auth-layout.latte": "a297b28dfb1460f8d2784a06fecf604f3bb91146a565e77fe2f595e04bdc33ba",
+    "blocks/avatar.latte": "e09e2fa7f6fe6b5431b2a27a8baa9fa59a8c176a40958c4e4b8b494166ec473f",
+    "blocks/backdrop.latte": "86725cff553fe5cd3f94a31de1da79d266212c0f2bfe1f55539466767968cdb0",
+    "blocks/badge-square.latte": "4f63c9cce45aa4c0cd019eed1512fb0a346c2d0b9e7fd5be1d46b4d96c3028b8",
+    "blocks/bar-chart.latte": "1b2db467b7de18c50a29c49c939b17f8336f59cd8c725f256f4334158689c760",
+    "blocks/before-after.latte": "0da92ebeb2b8ca2bed354bfc46f5e17980e886f926639ea23352a61b63c82f4e",
+    "blocks/bento-grid.latte": "9662c4a4d71f5bdbe1d6ef6409ab72052aa6b8230d502beb38ff3a737d119732",
+    "blocks/bottom-nav.latte": "f81f64f4a0edd39caccd5e58a775653e49aef485fe3ffcec3d076c4ff6c04f2d",
+    "blocks/bulk-bar.latte": "8427e80b5c25dc60568b03101c34b6d29f63fe6cef13b6c2236ae1afabe4a70b",
+    "blocks/cart-drawer.latte": "7db067431b5874aad9da585f5618e592474a718db49e64c97e55c33ec1600093",
+    "blocks/cart-list.latte": "8c6da4d2aec6562a0bbf908d5930b5e3e74347ddc1d2d275a038b65f19d1a5c1",
+    "blocks/cart-summary-card.latte": "df643ac616ab3ec8865e6aeccdd25f3059718f0f1afbe6c60090d4cfed60fd7f",
+    "blocks/cart-table.latte": "e210d06b0bd19222e415ac50bd5aaf85d74a703b391971332e8e023f365d0f66",
+    "blocks/category-nav.latte": "f277e4d841dd01533f55acf7a3d3b4dbbdaadfcc22db2a9c295ff5b845106bd1",
+    "blocks/chart-panel.latte": "fc06ca4e93359967d21198d8c3622877236f73c6a2040f93975fc1a6ad738610",
+    "blocks/checklist.latte": "afada7cdfea702bca2e9021cd3f4317adfcfd4b60327d1bdcff027991b77fa40",
+    "blocks/checkout-form.latte": "7c8f0e39241ead9ff26ab846ffc82b58b924e8618aab2ecfed9771421ea5f7ad",
+    "blocks/checkout-step.latte": "3128be5876e108721c57453ecfe4a031d3ccf97a5b9f2b2f23bb7ae182d08952",
+    "blocks/checkout-submit.latte": "c78dd46389e7ed450be61c4bc975cddabad860495bfdc08f59c3a27c321b9976",
+    "blocks/code-window.latte": "9c1255a5f19eafd285834ee34eb6045409e62f253db0e6b062ed93d406eef571",
+    "blocks/compare-mark.latte": "68d26be51d5d283319175fe8725cb2930d05d660ad75a5da278b7abcf2650f3d",
+    "blocks/comparison-table.latte": "4f9cbc8a5905f0d32beed076c843d6811c97ed4c0a0a26508cdad8cf6e4cd668",
+    "blocks/contact-form.latte": "ab0d22335ca9cbf6b8ea5c8520500afe8f9305e1b0dede8a85c0b0a361e2cd6d",
+    "blocks/cookie-banner.latte": "6e75846df28252ff4080d689ad60ab722f0824eac6295837f20a4b9a84f93457",
+    "blocks/credit-packs.latte": "ef51f2a291dc3f2f2ec8c928b7c9a4f961147276cf4eb3282b50c307f660a4ee",
+    "blocks/cta-actions.latte": "b5b2639d4a4e9f92d0224c58c9b376b2537eb1b4ccd015397c24c1161314e0f8",
+    "blocks/cta-band.latte": "5931f8cee94dd8d60c54877a2a606d5ad64f2da80e77df7f440830921b3e43c7",
+    "blocks/cta-banner.latte": "871ebc99a169f0fa0eba3254c98bbb28b59f37e3f7092c1c59be3e65454efc78",
+    "blocks/cta-proof-items.latte": "29b2d0f02ccdf163dd110e80c2d809aac94bff705c650922a86cddca5cda4478",
+    "blocks/cta-proof.latte": "aaed0bdbd96b9b2b5049717ff9b8d468f47efd997f161efed80400dd213f402a",
+    "blocks/dashboard-overview.latte": "88230b9044467580fb98d71628347c480ea160eb600b4e245605173bc9b35a00",
+    "blocks/dashboard-shell.latte": "f408a5a13adf48b067f1fbe61d49e9f6c92c593eb3b71f2bf40226b9077c65c1",
+    "blocks/delivery-info.latte": "63017ce4777df71fc1f2a8552a1ada0d1c1712334c006373ebf167cbcae2b875",
+    "blocks/drawer-lines.latte": "3bd812e18166df51826fa2070d5275cd01396449b3527cea204c6191f2b88cd9",
+    "blocks/dropdown-item.latte": "b23629746564b1c544dfed0f797c2a5d1d98c70e5eef6ec34bf09c7253e9b8d7",
+    "blocks/editor-tab.latte": "0b48656d986824bf36ad069cb9d77a41eae95b768407301d32e0129b8a14b0f8",
+    "blocks/empty-panel.latte": "0b4a2e67ac97b4105b70993d4a1911d2f938937ad0242d04b621ffb6cb3b049f",
+    "blocks/empty-state.latte": "63eaa0439e115b9cb0becd1be361017a8e576d1f2c24e08e12f9d6844e4430d5",
+    "blocks/error-page.latte": "264a02ba2b97a78397c6cb14ae8a12c4bf9408ace5057229afe892ff78e7673d",
+    "blocks/faq-cards.latte": "fa0d8af99375d52d42c4a6a9af2db8fcf498ea937f330af8969ba4a1fccfc094",
+    "blocks/faq-disclosures.latte": "693fb9f53648624075e421dd2062b6993c0ff87e760c877b2421017771b457e2",
+    "blocks/faq-finder.latte": "b61c9a9896546c666a9cb012397e573d9b8b75f73b646786622e173d48f1445e",
+    "blocks/faq-help.latte": "adc3a72d688cbeb7096f7a9e72f0b529bbd1122f19f82472fa2fd9c4982690ee",
+    "blocks/faq-list.latte": "6f9b559b8c3592747cb864397375fc40d91ca2f0d5d3f6a44872d6f4528ab5c6",
+    "blocks/faq-split.latte": "f0dad628c74128a4e97ba9e89456b1d37a40430d403b85b636ac5ff3d6d9fe24",
+    "blocks/feature-accordion.latte": "f0b74f60a8ccb7040f8ae07426a757dad2fb921629497334d23a68ad27f68b1e",
+    "blocks/feature-cards.latte": "a9f0243b9acb314511bf99c4b82c1e317dcb69cc960c8faec6825c5be4b61c38",
+    "blocks/feature-grid.latte": "f10f754ffa155cbcb8974b06b5c4e29f8fb73f64da706078f9032360656977b6",
+    "blocks/feature-metric-cards.latte": "6f549e59060c4492e74cc5d3d47602b45a3291de52139098a4921a3125581cbd",
+    "blocks/feature-pairs.latte": "46f63dc088197088e201e76db8e76236d40b6a7f4597cae19bf9861285234e62",
+    "blocks/feature-rows.latte": "8479038c4d8d786d0bdcdf5a7a7bb9fa5149ad6a238474e386cfacc9d36b58d1",
+    "blocks/feature-showcase.latte": "4e1020a4003802bd8bf22c4a076591928558d68abd4474be6d3d6db06a3660e9",
+    "blocks/feature-split.latte": "c3b939358d382c655483cd256cae1afe223f83e35e70a5a28027deb1fece8c89",
+    "blocks/feature-stat-rows.latte": "e9265a5526c90c9af4ea346767cfafb58dfda4d012a37506a8aa39620e3d1929",
+    "blocks/feature-sticky.latte": "c90395fb5a84d1c47e1bcc4e94d8ad0fe8e70670142384a97a053dfe62fe9999",
+    "blocks/feature-tabs.latte": "cb4cad0459be5c96440e90ac788fc830459d3aa5a6c279ad09ecadab2fb3b6e8",
+    "blocks/field.latte": "236144bfb8bb1ae0f14f05f5695cffb444c0f4c1d1f51455f8e3be790ef63920",
+    "blocks/figure-block.latte": "69bc108f6b08418edfae4da0de476759d38f6e6db8b56525b7a803da89387749",
+    "blocks/file-tree-item.latte": "c2a4110f515fa0ccc06dc170daacfce83c2c17ad344791c7291b7dcaf6662880",
+    "blocks/file-tree.latte": "851cc7bf385efa214172f980d3415b4bc95adb0f29a50bdf7d834eb28619714b",
+    "blocks/footer-brand.latte": "dcd1dd94a10893bca4c0fdced15bd89dd7e41e7eee9002cada1a910c00464690",
+    "blocks/footer-card.latte": "2f420fed816a15200e97e58bfc207bd3e9ecd2c909f42c3af75ea48d8e766c79",
+    "blocks/footer-channels.latte": "b89b43c024d26f4a45c8741f6d820ada4ace1b2d65f20581d1749e32b785206e",
+    "blocks/footer-columns.latte": "6275f99b7c6a4a58dee08b11def1a4bf93d205cb8f81e25b51e86bd0f7e44f65",
+    "blocks/footer-contacts.latte": "65df7e25f943857dc7b4f30ed160c3018d9c9b575654c9457ec842b0b6122c98",
+    "blocks/footer-figures.latte": "8f40ee6df40291836e5ae57a8704a8012cf4dfd31949b93f5e8d850f943081bb",
+    "blocks/footer-group-cards.latte": "2e0f37a1ae6416bbb18081507a6fa42b3d4addd73f9bb9df431e7dbb161f2f78",
+    "blocks/footer-link-columns.latte": "0203ad0012184c3cd15377bc397a245461bd42ad92f7ebbd39aca8a093ba11f6",
+    "blocks/footer-points.latte": "5ff53ccb398441397e1a68b8991a933ffa5f1b3b8e10120b1ce639914e995011",
+    "blocks/footer-signup-card.latte": "d0b5e049973f6bc68a5d46b46e5dbefa76ae397b4021fa348fe65691b3ebc4cf",
+    "blocks/footer-sitemap.latte": "2397248490370e811cddbe0dcbb303c7ae5b647475c92138594951f4ee35e3dd",
+    "blocks/footer-split.latte": "aaa8761ea64665ef243fb8e8ab46f632894d4beee8479824d1acf9c88402b40d",
+    "blocks/hero-badge.latte": "531bdf39bf02d06b8dab907488a0743148345a8871beb877e41758605ac16023",
+    "blocks/hero-classic.latte": "ff64f494d079339ea4ccb4772d365b5ee0f44d03ecd7f0f7e2f2b20b02303812",
+    "blocks/hero-head.latte": "64ea74b6ee5806d54bf3c5583df6804203860e455f994a810aef285093483dfa",
+    "blocks/hero-prompt.latte": "f6899dae99224952f82bb68f56bec3e2a94195e6d39d210f39f4c542705738fa",
+    "blocks/hero-split-extras.latte": "074fd23b654bedc9031ef57e4156a244771b3cf114ce808d9ded4acf56f1bd5c",
+    "blocks/hero-split-media.latte": "109e35844c3c9f2eb8e97a67012ca22d2bd5f78f0fa0335d1731432279b19549",
+    "blocks/hero-split.latte": "2f4e910bd772fc6d804c126f52522f57e460f12d14e0edd5ef56f91afa0289b0",
+    "blocks/icon-tab.latte": "8384e0affdce6b0c55d30bd1d51c66aacff81995e9ce675006b296d24b570c16",
+    "blocks/icon-tabs.latte": "557b29dd3da9e849087c7ff376506a4cd3db748a8cb75bcff1a88e2acb224ac6",
+    "blocks/icon-wall.latte": "fa039ce5743d4b937d3d467c7f6eea87332e96c9a4bb691a7ab57ae6076d6519",
+    "blocks/job-board.latte": "ce61b071000d6ff9d7efff84da05e56b7b814ae4bb1a1323c586476df80ce7dc",
+    "blocks/job-cards.latte": "93a59c4acf1f37245b8ed15435251215829e7fb3bd1daa8608a96f08bbf3c56c",
+    "blocks/kanban-board.latte": "ad60a9d266028f15b302c171210674df71ae71b0e119f7f6a46f65ce9369622f",
+    "blocks/logo-cloud.latte": "ab579cf4de549bd7c539e7ce68c178c3c12c1971a10e46f61dc956b68ca1e400",
+    "blocks/logo-ribbon.latte": "5581c0e8fe4d27ebb382a929f8478bdf1dbba47b3fc37ff7ab7e04c3b0cbcb42",
+    "blocks/logo-sidebar.latte": "0e230703930ac337d9e6df877c9ea091086e45229d97fb502291fb77f26e6faf",
+    "blocks/logo-slot.latte": "a17c92b02595dec664bb8dd791873022f638b5cdb55f5473d6087c808ebaac57",
+    "blocks/media-contacts.latte": "8b3b06e9aa0578b632679726b9923766fb0f07a5412583c1d09cc59ec8abc105",
+    "blocks/media-figures.latte": "979dbe4ce146ed8b237ca160c82b5f92e882700aac4245c5977bcb9cecded7f9",
+    "blocks/media-frame.latte": "f5d14dab3f4d7e29effd6835219342903050a03ac49edcea9839eeda6261901f",
+    "blocks/media-list.latte": "e503c9c9f5f2c991e5b007a7f69f01c9a35ce69cbf54b4fea97faa82e59e4c52",
+    "blocks/media-posts.latte": "636229a718f4ae28ca4a432380ad90606971de92e42c84fa1495743ffa46e0a8",
+    "blocks/media-review.latte": "34e49a02a7983f13af3b5256f65b53b2bd7b1d52edd2e30c49987379d3d5a740",
+    "blocks/media-steps.latte": "0e8f2f400c41c98fcc396b051a122cef98670d9f731b7288b23bbf3482d5eac6",
+    "blocks/media-topics.latte": "b26515a75caf4e8d29c81dcc5adba0e952682b0ee17ebbeb3fb12c4be0fa5fbb",
+    "blocks/mega-menu.latte": "c9b63714a574b325de4d30cbd8c52fec8f4c3f3cbfd2f4c26e0610fbf3cea35d",
+    "blocks/member-row.latte": "67ed4752f8dd0ae2e00c73f06fbc6eccf12ae0f76d65dbb91646f68624374503",
+    "blocks/menu-entry.latte": "66a851781660b6ad5fa4a96ad102ec8963f39b044f52a55fe818fd15e5482501",
+    "blocks/meter-row.latte": "a690613bcf19bb49ee6331f0867154faf4b193f7b2494dbed27520fa227c60bf",
+    "blocks/metric-row.latte": "4d05704f389714c2fa216cab56cccf0b523136720a81f8544a455ec77a962b68",
+    "blocks/milestone-timeline.latte": "146e4c458f89afab15e95b5a6923812ffeab406f45611813192bdaa984bd873f",
+    "blocks/nav-actions.latte": "0ea13b8ea828e8bb18a6e6bad375c8f89431af3febddccccb19ad34604751f52",
+    "blocks/nav-bar-menu.latte": "671c8d1a6c1ae0db709b8c45e7c546c901e0e7d4853b2704491a4e64b7139b6b",
+    "blocks/nav-bar.latte": "3e936a21d76a214c18bc9878ac2ba948ca9094fc8dafcd9be310e33f6f4df8d6",
+    "blocks/nav-block.latte": "1d643eaccdba14dd4f017563ca6e30605d9005191e0c355ae3cf941ef266e2ea",
+    "blocks/nav-item-row.latte": "761e35ec756562d98d85e6c8ac77ccaee511aeb16daeb0853992a503082b44ce",
+    "blocks/nav-item.latte": "e2d1d8365f094fa2eeeb8cbc90b824ca40d052048881de1d3bc0ff9bba58a521",
+    "blocks/nav-links.latte": "d6cf022d939bce60aabc53d67331f6810e2bdbe6c19d90253fdaa10e9ae0ddc5",
+    "blocks/newsletter-form.latte": "e6c71531c078d65e21433f436161c7abb3925a60586701f8baa75041a30c99a9",
+    "blocks/notice.latte": "897ec2910585f70c8cdc8979c439b061e49172d74ee09e21f8d4b6b0e1d1e0d6",
+    "blocks/number-field.latte": "38f0d7bb562abcfe4a5643d409b865151a6040a6694201e5f2840150a4f50b71",
+    "blocks/offer-media.latte": "15f2e2d016d1eade908eb4509ca419579e050ad9a43e60e74101bb6dbe68d0f1",
+    "blocks/order-rows.latte": "ebaa758578c31082ba3378d2f8d001c0991cedabd84dc244dd50aeee6ab66354",
+    "blocks/order-summary.latte": "4cd7dd07dd9b3dd3ae063703ec73625e053c6bf185ab8e021027d1549b7ccaf3",
+    "blocks/order-table.latte": "7191152e44dfd0d0b4b40ca960e5b1facc91d2b7f0e780d53fe351085afb9292",
+    "blocks/over-media.latte": "742718250837848de2adb630ec03c27c909a98d75755838894c87c029f7fa99a",
+    "blocks/page-aside.latte": "8ad4b24aeaca8be87a846e29feb7e192c8eb9a67c8052d1bc19268099f1ccfa9",
+    "blocks/page-crumbs.latte": "3dea6e61ee62708e2995b0effa4bae143c5c18d2ced4ab0fcdc18f1d8cf0be4e",
+    "blocks/page-header.latte": "01d4e63f6512c27977f0e49bce04d6d0df69cc41576fdbdbe993afc962ee944a",
+    "blocks/page-intro.latte": "fe1d68a23e787198c086a39a86ff9ae65ea09b18e9702559ed988a82b6ce1139",
+    "blocks/page-trail.latte": "0d766a16dcc701ccb0579d35c1731fc3d3212a531a0438a02e56596ff4a168bf",
+    "blocks/pager.latte": "776ef3904d2bfcec41aebe2c9066f8d33cb641c247dad641e1682246bd9610cc",
+    "blocks/panel.latte": "49b4925c0040fab58b24fff2c89cef2e163ae7104e19b3a2ffc1017f3e3c03fb",
+    "blocks/payment-options.latte": "957286263ed68a73ab3c97979affa4d58e43735de7a0506c9a8afe465898c79f",
+    "blocks/photo-gallery.latte": "63e93ff4654595b9e218bae450757eab1edc047bbe0725e4ec24dfb0e0670bdc",
+    "blocks/pill.latte": "490136ef3cc2cada932e73737dbb44ed1a033d55c42b51009e5913e144f58e5e",
+    "blocks/post-actions.latte": "ee27a8cdd1eeb72e2aa9a0e1f46657a2af33665b77c75d46b6ea9fe9700b1ce1",
+    "blocks/post-author.latte": "41145a2b2bf2c1b17136574484baf51a61aaeb8f8965dedfc24728cdf43cc276",
+    "blocks/post-card.latte": "9dcc93e228dc150fe6685f9ffe04c42c08b7e945353c01952d3eddfd1241cee9",
+    "blocks/post-feature.latte": "948a5eb88f33bba59dfca27854707035b0b41e19e951aaf74a1ad94904c83aee",
+    "blocks/post-grid.latte": "6314897ea743db55e28823feb514c7601d29324aa60346cb91b103664265d834",
+    "blocks/post-header.latte": "afd760b158e6c9974a2412c43ec83b10dfe8e88a81802b1ff8294e0273fcf142",
+    "blocks/post-mini-card.latte": "54ef03ef003b2aac4fdc9b64c80ec9a84fd3f3fef4209612fb8d2fd1b27a7cc9",
+    "blocks/post-outline.latte": "e23bf6f29bb51128553222dc26542c2916c96f370a35c43c04cae6afbaa0b2f2",
+    "blocks/post-overlay-card.latte": "79c2bc4a59c125c44bdbcc4f333c79f797adb0221e21ca9fa57d6355adc45787",
+    "blocks/post-showcase.latte": "a29b3d8a0207ea3d0af30bc9e2b21648bf3d2c403ec984c33e649edebe106903",
+    "blocks/post-split.latte": "79c009572899c0116140d9496f15165dcfe933c445fd2181dee88515a0a14372",
+    "blocks/post-stats.latte": "67fdfb4accc2eb7a46c9395f2241d5dbb3d203ba74d42f363e5d5e4207413eba",
+    "blocks/post-tags.latte": "ea7f010e9bb437eff49b8464cfc2982b60bcfab92701ea223d6782c8ed27070e",
+    "blocks/presets/defaults.json": "b95b6b8c5025af8dfbe44aef409b13c0dadf5bf41d854abb21a112e595b29ae3",
+    "blocks/pricing-card.latte": "44b47070e2edd0c294b86a193a22e2107759a8b2979195c82f8cf7a35d7fbdb6",
+    "blocks/pricing-tiers.latte": "00e6548c011caa8042d1ad276bda7b056d7f88760a48209ee15a94fe61df9923",
+    "blocks/product-card.latte": "fb28af08f1cb089d29ab83093935f71d89f7ab2e270f662643ec786e12eedf71",
+    "blocks/product-detail.latte": "50d02bb5861df6cf6fa92132a9d58a6fbb0c6c706bf76c32740f356b1c0da060",
+    "blocks/product-gallery.latte": "55a9b4108bc553b4da090c3eea589802da228b264a630d2c83e5779a1d1e1c49",
+    "blocks/product-grid.latte": "6744eff66fd33cae7d0eeab23fbd5ea6763f6f73fc1471c67eb2c89e61b7af7a",
+    "blocks/product-info.latte": "7fad05bc98a50bc825f09970c3875c2a504ac1c907be095a71e7ff1db0189eee",
+    "blocks/product-price.latte": "b857762524dd8d02f13382058a21d694941e5d5edfc01911ce5d20d484245541",
+    "blocks/profile-form.latte": "c28bd5f0c57651f3f13d3d5b91bab9c8a6ba147ab0603b1ac621a8513b2b1d0f",
+    "blocks/project-grid.latte": "9239e8bf18babe9538699accbd71d79bc05edda69d074db3466e1e6494ff31f0",
+    "blocks/project-tiles.latte": "13ae4ffc89dc8fc5f52a0d7e0472217b2564b2d1b7d1d55c14a23e628515591b",
+    "blocks/prompt-composer.latte": "99e3d11f6f6a79767939cc5e30ec19da46c0b972b04706c23ef8558e3694d6f4",
+    "blocks/proof-band.latte": "d7bec2e8312fbad13e6c65b8c55a4c9280915e37faa9f3246b046f3f4438e227",
+    "blocks/quote-card.latte": "9943b249a6549110a516d1dfd4f58588633b37c061ef56e9e86991411d3ad92c",
+    "blocks/quote-figures.latte": "56f06b288ad4517919b4444d2ec211be449ab20236f14477281ff35738971454",
+    "blocks/quote-logo-tiles.latte": "9b7b9bedfc1b1edf71610a159d408ba19b4fd3b09847c3fded8c6cad8069963e",
+    "blocks/quote-proof.latte": "2e8df039cb3f520ee30c5d4392a1843ec36508cd0a5d655ebae638f8a8fae061",
+    "blocks/quote-rating-panel.latte": "cfc242becaf52be58954408296fd81fd357aa6d4ef33dc1ad6d3fbc8ccb00c71",
+    "blocks/quote-slot.latte": "ffb3ac771d2f7f6cf2cbcb76f78f5e1fe1c09f1a2429e793b6700bd0cb4ce108",
+    "blocks/quote-split.latte": "9cabffcef2b68b970f50eb16aaa8b5854073e9a894769ad2f0ac25d7872234ae",
+    "blocks/range-field.latte": "47216498aa313aa924a320db24b093fe86a1ce35d4ee277fdab3dde2b2492ed3",
+    "blocks/rating.latte": "6f488933b9b67691ce1952c4aa359800e096f1f8a62be5c8c59aeca3215fa250",
+    "blocks/recipes/avatar.variants.json": "46ea20a1e9e713020f165ad7cac44a8c3ece47acaf2754530ad23f23a6e0b172",
+    "blocks/recipes/badge-square.variants.json": "5e8e73320e350988fab7de311cd65d662a8ddcf63e97ce88872e66ee813587c1",
+    "blocks/recipes/file-tree-item.variants.json": "debc1471dbb13602b05a323fedda8503ec955c815f3d22d57804dba279d72d91",
+    "blocks/recipes/icon-tab.variants.json": "2e50f9390011c0e6ee576c63c5ed2e8ac6673610928282fb250a12fb5c7ad6e0",
+    "blocks/recipes/logo-sidebar.variants.json": "79db82787954766904c176eb1af84184e74a5ac7816ed924711fb556714fd76c",
+    "blocks/recipes/media-frame.variants.json": "acffd976f9f24993ca00e9806900c0328b77bdb3211fe9368bd93022bc62f89b",
+    "blocks/recipes/nav-item-content.variants.json": "243a020eb53ab7878c02f896f0283d7e04d197e2a7f419a6b32d11269b0528e4",
+    "blocks/recipes/nav-item.variants.json": "5617402602686362fc2dab73bad603fa51fa1d5971b6833a3d32e018bbc66297",
+    "blocks/recipes/section-column.variants.json": "f06d6cedaf76d8cea8a4fcbf62d62dfd51250570184c3b355b83d2e49cf84396",
+    "blocks/recipes/section-frame.variants.json": "ef2d97d45afd1107c441702b657e77c0c1661c1ba76b0215eecc9169529d4a05",
+    "blocks/recipes/section-head.variants.json": "f2624d5c33466e23046036a99c05831ea84011647632d3a901ca19914778d84e",
+    "blocks/recipes/sidebar-panel.variants.json": "319a47e1524ffbb564189f483b546ff7c22c143b133a4e406bd73a5f61b05321",
+    "blocks/recipes/switcher-item.variants.json": "0c2e75f5db33ecb6774d83709ac938adc20946f45748a3e7e9d1009ea0169bca",
+    "blocks/recipes/switcher.variants.json": "6e59af0edcfdf3d5754b7c7991ac9c6e84713db161dd21022bd308859cbb708a",
+    "blocks/region.latte": "669c1ff5d81476c61b969643d2aa886d717f8767e0745fea848b0d2f1962b228",
+    "blocks/review-list.latte": "c724698ecaf3dc5c410d8f8d6d3da1a982fa1bb8043edae34e793a01529304fc",
+    "blocks/search-field.latte": "c9947302d1b3220bc03d07e9cafa73e577d99d33fb25b1cb5d2b3392d3d8385d",
+    "blocks/search-palette.latte": "33cd69e3ecdea761a9de85afaec6e11f7274f45d1d65c7578816ad4f1dada18b",
+    "blocks/section-box.latte": "2c882fbd7a2f8d8ab98802f0e6d4eb0f78223baeb11940e90069d00df9384265",
+    "blocks/section-column.latte": "2e22e58f76a99520cd605b19a6af7db34b388fc1db22fcbd44851467b5105a1e",
+    "blocks/section-frame.latte": "f02a77220a92b432053e9c7c4858d50c3421c59fc78ff8efbb8519f4e1b6136e",
+    "blocks/section-head.latte": "0a15fa4cd0384173d8fadc0d966ecc3b98f7c37730f079ce9bf784bb69e106a1",
+    "blocks/section-header.latte": "6559c1560f48b957286b477718c6c3c81447a3fa5cc4a970d2abe28bec4a6412",
+    "blocks/shell-content.latte": "8c6a4069d0a87b6885b7fbef17f3b839c9c790c6ff6df37a290951fb447da91d",
+    "blocks/shell-footer.latte": "818827a52b6e1b5bb2454384af0f13ba584397a6bb81a8ca910a8e0313474b9e",
+    "blocks/shell-sidebar.latte": "b65512ac85b91ccb7be85677c50ad1ecb3670f91beb592bb98388357df77a30f",
+    "blocks/shell-topbar.latte": "43b838e5b43f1437a2656a1349e91b9c1287adfe43a864d9b4f7d1a3bf198d17",
+    "blocks/shopping-cart.latte": "9094437a683306d7702ae82208b4db4f0441bbec1f7bb571e53b72a9d0a489ab",
+    "blocks/sidebar-nav.latte": "1399ffc68b2c8341c170c6f331986c3444f615d218c951cc033b0c88ff04afa9",
+    "blocks/sidebar-panel.latte": "c993b10faada886f658ee6af9795a2cfd7bb410beb8097cea19473fa39914869",
+    "blocks/signup-wizard.latte": "df521027f44e9ba3b2d53bf49f1ded5a9294d100bd446875522fc4ec4a6a4af5",
+    "blocks/site-footer.latte": "d46d04dd1de3b5ea0cd20f3dc89961fe88de84c163fef9631b97658fb2514f2a",
+    "blocks/site-header.latte": "19db0259962bcbd75c9700295a23376a215c25c5283efc953b4b0e081beff9f8",
+    "blocks/sitemap-footer.latte": "b3a53087e7d77da4e885968846892729a81252edf1cebb3f81a2d08c12ae9dac",
+    "blocks/skeleton-layout.latte": "893c0b961482fd23313dd9ab760a61d769db3e29aea2d66e7b31acb14f62b75f",
+    "blocks/slot-board.latte": "fed91980afdb45ee422124bc7baf50f7f8216efc7daf72a45573e3ec90d147d0",
+    "blocks/slot-grid.latte": "776a6e80c4d38f752e0af2d1f3d29a71902f4a56bd301ad7bdd565aec2c42507",
+    "blocks/stat-figure.latte": "451cda1dd707b6ec65f01571a72fb3bad589b7e910641c21b11cd9a94e32667f",
+    "blocks/stat-tile.latte": "20fc845d4f04cf2788d80b2ff8f7abba9ca9559da8715a94b7c95042a7a9ec5a",
+    "blocks/stats-band.latte": "d7c6b9b01832402b44aca35942298bf0c9e4a8ea57133cb6b2f744ef27b87fa5",
+    "blocks/stepper.latte": "72bf67e0fddc8f5bc613097e9f04636f858216cda8e9c8a6ee77272006af42b9",
+    "blocks/steps-list.latte": "e36198a0da26b122787bc53f9c76bf2eb936663142cb5e3a3578ccb157283c0f",
+    "blocks/store-hero.latte": "1e4fb6b22b31fc00844f0203e4fee7416c57bcd773334cbfa1f206dae4e48e0f",
+    "blocks/store-locations.latte": "85602ee29b5b5ca0a3f7b6e151da1eaa59e45acbefcf2372adaa2dbbd01592a1",
+    "blocks/story-dots.latte": "5974c5756e13c9d846b8a79b150f34348a68dee8c73667fbaae3eb32b3e0930e",
+    "blocks/story-panel.latte": "9e8c77c173dfe701a46abd3ca03298265d9d397e48081c836f346c48af111256",
+    "blocks/story-tabs.latte": "6872fa53ce85c5beaf17cdc4a5ff13e8df900ee9dbb6782dcca37c5d500bcbde",
+    "blocks/support-channels.latte": "abb06f3d86ffc6c05e31286f343462990bcc68223b5a64264f90703b4af93db4",
+    "blocks/switcher-item.latte": "1129ff402d75d9c6df6054884e628b72eedf2470cff6366670f732ba8dafaf4b",
+    "blocks/switcher.latte": "9d96f4952a699b026fb2f0ad34a7708fa773980fdbe6c089f77ddb1c54206fee",
+    "blocks/table-toolbar.latte": "300ceb0b9e88529b0454dd2da68d21d37530fc6cc4e1cd250b4c1aa69ffaf563",
+    "blocks/team-grid.latte": "2fcd69cc8d9322788229c6a7d19c0fe86da532b214ae3685e25703cdd179584d",
+    "blocks/template-grid.latte": "8c72e825bc7165ffd260e7d24a8554e2b6adc23f51c74d2b0a26e8212161e94a",
+    "blocks/testimonial-grid.latte": "d9e9742e9ece99b200ae89630cd9ac0c952811d56d34b684e3abb7a3dc17250d",
+    "blocks/timeline.latte": "3dc841b3db54bab72caa1a33f047e22bf4682fd9e2025a054b5d8f2d1adafbb5",
+    "blocks/topic-chips.latte": "aedd8a20bbf52cf290066f5a86e81d367b61c47a173b5c3172db1c9942ed8134",
+    "blocks/tour-callout.latte": "240ed214443d161195aaea05673f04dd65a0e8df3bc153ff93a7b7dff3a3dead",
+    "blocks/usage-calculator.latte": "138f1d6719685e2ce17e0eafde06ff4eff4e9da7fe70834376504307da4c1113",
+    "blocks/usp-strip.latte": "139a7c68d321d87cadccbaf49fba68f49b17629540301f3177bdf9e43d1a04d3",
+    "blocks/video-grid.latte": "ec418b46177a8b8ac188721c0e3f3e62fd9db8fa89eac1db549bb3f76f62b35c",
+    "blocks/video-modal.latte": "580ac41fb5223fb4cc17b98afd36ee0168a50bbc1f1b5e77b132184ab638f097",
+    "blocks/weighted-title.latte": "9a63ecfb18c73f77f63cf80ec0e99130b283d4289f0190cb6ea2e29618e91f23",
+    "blocks/zone-rows.latte": "d32b6e5fccc09864ef4bfcf8d6feaadcb7ca702b48ea54c1f95dd70693815cfa",
+    "blocks/zone-table.latte": "32ef968fdd32252346d56b8f2d0c6c6dc3039cb1c0ccd0880032901f19097ea8",
+    "composer.json": "b25aab1cfe9f510e053d5244cbfb605bd06d1809d1377101c422e75ea2d8e65f",
+    "package.json": "eab542d44683d8fbbf45e66b9e0996a01935803fdfde63cb556c30f28ca0efe1",
+    "php/CnMerge.php": "eee2a5a95887ee97988db9ff502dbc75527345a015373a3af772660b8680e069",
+    "php/Extension.php": "b8255a600bfa7e7df4d880d199baa2c3563711300f593281ff59d36453ba68ba",
+    "php/Runtime.php": "b520951c9af1e1de190f672f0ef313f4172a277ad003dc1540fa04badbdcc7e0",
+    "README.md": "f8d0dfd33a68ea602ff247e78ea11e299de0dc1d7fad67d49b712c499159e6f5",
+    "ui/alert/alert.latte": "f913a3c20be76915a26c57169373f30a2889133f05d2187b8728a5ed6bc9830a",
+    "ui/alert/alert.variants.json": "cefdda02dd06430011d612938ba847d6303e9996fdcab107817e0d8009ad426d",
+    "ui/badge/badge.latte": "b8b8e3686cbaa0a3b0cf8ee3e481d17627de7bb0c56f5f626c44cf892e3cdc4b",
+    "ui/badge/badge.variants.json": "8db00aefbdebfb21d2688390aefbb1c20a6c6e76a1312b9af0715b87d8376c43",
+    "ui/block/block.latte": "c30467388f9c53ba2d8fa975df4752a3bb49498ac620bd697a4a05bc2b9e3710",
+    "ui/block/block.variants.json": "f235a778278b81299c3275421643eeb796884e6e5f2af3ae52bd51eac2f81932",
+    "ui/box/box.latte": "b38f11b1d5474208084dfe6d8bfb38e915cd93193c0b5086cbf6d5a76b6b4fa9",
+    "ui/box/box.variants.json": "0154ef69d6a3ad01aa95455dcf87bbd70c3f5e67a0f6a2b36379a1a7ced1601d",
+    "ui/breadcrumb/breadcrumb.latte": "0bf97e640bb568e78499ea4e9c9d6a8d369226abf4313cec03dda04201ac8c13",
+    "ui/button-plain/button-plain.latte": "e36002536ae6470296da5904343bcc0b1520acdfdaa7a3ca7ff87668f04f1794",
+    "ui/button-plain/button-plain.variants.json": "c4caf3f4e128276ed64e53559e8aaabb18effd2e4322a34f95df644cb467966b",
+    "ui/button/button.latte": "fb99fab618f2ad5e0cad7918608db900512ec0cef1d657609134b2ede0489ecc",
+    "ui/button/button.variants.json": "2ba04bf702fb940c64e69576c49d974e8b746ee6d23561065e77ff45bc41de31",
+    "ui/card/card-content.latte": "d3fd946b936c1c795e4ddf35a64a476a8e28a6a9c01981f31dcd59268b8da350",
+    "ui/card/card-description.latte": "59c560ae24119ecfc1dea43332e0af8f245dd4ada4b93098ab335ba421228941",
+    "ui/card/card-footer.latte": "7f969557ea88674c5f022b9be0f2c239028d7a760d0179a8a7eb297af122ae5f",
+    "ui/card/card-header.latte": "1abb90e2db70b27ef4de6272682f91a8feea720567729ae79096ceb2f0ae8c4f",
+    "ui/card/card-title.latte": "2deb876d52a80c2106c610e4d34d4c56e20f3caed5eddd632ee4469482cd3162",
+    "ui/card/card.latte": "0679a30e508901ab508ad32281f2b6205a452f573e7d33b87215c447ef598cf6",
+    "ui/card/card.variants.json": "39bc2c0110b12ceb6ca91ff2d0ba71637a3af956f584025bbee250b454e717a2",
+    "ui/checkbox/checkbox.latte": "c2d0e0469a7612bc503d2c5c9bc3711bb0b15db5e484b763578d7a7fac2ba9d7",
+    "ui/checkbox/checkbox.variants.json": "1f1ef3389fa04636f53885b610f025e3809f039ce5672eb2eda60e0b4a326556",
+    "ui/container/container.latte": "911cb6da3742eb9e8be8443ddfb70d79ad5ff2c07b582b93358c6529f96038a8",
+    "ui/container/container.variants.json": "dca2ec275adcd27206521396de76f425a8a98a6642ae8a12ffa923eca31d86af",
+    "ui/dialog/dialog.latte": "a0b8cb0028fb58f0db5465845300543363c030cfcccd524ede5ad572435aee20",
+    "ui/dialog/dialog.variants.json": "e3790244e2ba83b1bec43848274cb935c3dd8bcd04ddbe9deba4f51171e49e06",
+    "ui/disclosure/disclosure.latte": "d76cdc594a3c2feedede729b82887c2a8f97358e86f69b140b6b05a9083b433c",
+    "ui/disclosure/disclosure.variants.json": "20163642d62b6953552a02416b434cdfbf277c3254d8934959723789d4b6ec10",
+    "ui/disclosure/summary.latte": "debf1429d3a90e7472655a6b3fca4b8839d92f322dd727ff163fb49ce2684070",
+    "ui/disclosure/summary.variants.json": "274973e927d3536baffe8302d7de780e7e78d890cc10823cd111ccc1c9633325",
+    "ui/form/data-list.latte": "87ff17e98f8d460911273394a57e767212a781596c03e34c27854a3e3904c7c0",
+    "ui/form/data-option.latte": "e3a25e7e932762b06e3a7c131727a101df292465062ad0414b824ef81f1bdfed",
+    "ui/form/fieldset.latte": "58be129bf6212f20e75364484f532d469aa349e86ebcf858d7a1da0dedd93fdb",
+    "ui/form/fieldset.variants.json": "9f3c3ba117228f83577f10d329384a7706ea068fd7d8a98d4ebb556a018e3158",
+    "ui/form/form-description.latte": "8cc9225ba079459a682c7e2573ec946ab740ea657b5b5205cb2b002b47b43b97",
+    "ui/form/form-description.variants.json": "fd398ea382acaf37f8dd82a7c67219877d355e85b9f9a954222659adcbdbc85b",
+    "ui/form/form-item.latte": "c1d41dfd95ffa5ab7dd6cd70d3837ffc647e1dfc13bd92de6dcc2083d27f3716",
+    "ui/form/form-item.variants.json": "27c49ce5f42af19b06c9d6f9f3b8683058af44e35c0df5082fa897008b771559",
+    "ui/form/form-message.latte": "b3f1370dc481f5e1a361645b75fb8eaf9735adea5f098f32f411a6891e529e3f",
+    "ui/form/form-message.variants.json": "281c0272d251ffbd015fe1570879676b6d787b8149ac9129db846448d88b89b4",
+    "ui/form/form.latte": "5e0037fd4a7f7522babb60eeecab6fc442586f91e4c1a7bc7c04c519cf7c876a",
+    "ui/form/form.variants.json": "2e2b94499ea19b932f158c9417602a070b843d368326be97780b686d565d2e6a",
+    "ui/form/legend.latte": "59cf632bbafd01a50a962a3cd260fa30aff33630e4ee8044880767c785db7298",
+    "ui/form/legend.variants.json": "58415ce5ebbd97ef3fe8a85adc19f805d5f32408648457284fe2fa1e45e6cb11",
+    "ui/form/meter.latte": "f385aed95fc6e1ea3ca79f4fbdc6193582f27a4f1103a18cd98d531bfc7dd5af",
+    "ui/form/meter.variants.json": "9ea910d4be6378ffccb5ec9d1a92fc8f026b79fcf26968280d8bdd16fc87cb16",
+    "ui/form/output.latte": "5e812ea8462f59320eb47bb77679286a1540e602c3f4d46211dc033a21c2d6f2",
+    "ui/form/progress.latte": "ab745fbf9f8f2a029dc02a6d6941fe38387cfed14f589825f3405b009d9f567c",
+    "ui/form/progress.variants.json": "7d118704a6477aa91feb73e4dcde0980c9639350ec79d801384c4dad3bf2ab8a",
+    "ui/grid/grid-col.latte": "5bd971f72618f3adffbb870e9c72fa50d6fda710f3fe82a2322bfd22e317b90d",
+    "ui/grid/grid.latte": "18988ae58f7f7abfbfed8c6bdbff2f85a1c0e014aa195a37184a099d1bc00af3",
+    "ui/grid/grid.variants.json": "c1819c6d4d725e6137d0b7a053511da50fb26eb6f5b5146de7a0b512da945a74",
+    "ui/group/group.latte": "2c5ec8b7931df174b7daa3dcec0c4cc91f8513677de5ca73fdf8831fcc548835",
+    "ui/group/group.variants.json": "c571dd93f7a92a7c31792d7e30c248010934a70c089b65dee7a59afe96c2fb2d",
+    "ui/icon/icon.latte": "0fccd749c982427614e3a6209cd343743fc1115348cc3b0dafb8cfe07a5e458a",
+    "ui/icon/icon.variants.json": "1e931f52ab6497706c0ff0f6a01894f209035a70206dc2ef40a89413d2995d28",
+    "ui/iconbadge/icon-badge.latte": "56aa0d9b3e6dbac5912460089f86ce5f864662dd5291b42507b155be48731be5",
+    "ui/iconbadge/iconbadge.variants.json": "6b24fb827049944852a4bd3380418aa18b1f8acd156c00f551830fa28a006131",
+    "ui/image/image.latte": "9d15c2f252d7d797da71ebd417222e46bc1b44b18101fc1acb1a46b0bc530177",
+    "ui/image/image.variants.json": "6b0a048a1a1a736361ca5bf755c4bc05f9418fd0d1cc8414e511a0861d4d6ce6",
+    "ui/image/picture.latte": "8bf95595fff4d76fbb4ae0a6d3f364c34c904e7ed528e92624708d9cd62da9f3",
+    "ui/image/source.latte": "b477250a4e8544ff235629eb57cbf3e35d6466a70f6c86fd1b4ebcfb7418d651",
+    "ui/inline/inline.latte": "6862fa66e73373c3b019259cf859e79c3339c4493f9571b6431d1ab752be73d2",
+    "ui/inline/inline.variants.json": "3b4c0082fea7d2fddef77e9a24cdc5ee0f2e0676626ca6a9827e373710b5d646",
+    "ui/input/input.latte": "1f5328984410f8742a8f3c0fff8f0aeb7838b206af3f02d4d86e0aec5a8089ed",
+    "ui/input/input.variants.json": "df29f2ffc799d56eeda94ceaabe15e168179fdc7b6d1aafeab2c4eb330014d04",
+    "ui/label/label.latte": "1a82ad711cc6714193ed15087ea3d88ea311ceb14bb0ae31f1b528f8921e72d2",
+    "ui/label/label.variants.json": "a29b14935c0aacac086db0180d99159c2dd9105f9e05331a247b2e36234e5e54",
+    "ui/linebreak/break.latte": "4d33646fe7a55956dce21a908abfdd04c818ad5d002df38e6105792ca2e49b63",
+    "ui/linebreak/linebreak.variants.json": "ee15b0b3f21340688ceaf1d0640dab60a091ba013c44470c7de1b4d524e89dad",
+    "ui/link-plain/link-plain.latte": "662602cfb96bb52eafc4bf76db56a8fb452bd34ff7282251305b66d2671fca38",
+    "ui/link-plain/link-plain.variants.json": "f2f7a34d5f33118736c60148e426083dd89cf8699cf112fbb1a00da5658dde82",
+    "ui/link/link.latte": "14b6af3c1050ce1b9faca9aa8b89d54cc8b177a78d9a0f4ce961e069f6139e4e",
+    "ui/link/link.variants.json": "4ebce197e49566a1ed9bf537e8eb65b1c86167c36be1a8b075d24e4455c37bd4",
+    "ui/list/list-item.latte": "f722d93befee9017716a3b801e6fda45f4199fe24934541a13046161a58c0fa2",
+    "ui/list/list.latte": "ccd653de72079966f552ad0ae6608cdba61a52522a7b1ee7ac8ce167c9b68630",
+    "ui/list/list.variants.json": "286007571632d86eef167a1ca3f9ee3338085479ff1d6bbe3bc308436b8bfa57",
+    "ui/lucide-icon/lucide-icon.latte": "00d3de628c90aa23ec2384d9f50913798143aa4229f99be2806050b36e97ee72",
+    "ui/lucide-icon/lucide-icons.json": "3fc859a5369f955aa9ec4af16960f8b6ca7c67416d7716f0fc78b50abedf5ba9",
+    "ui/radio/radio.latte": "b6ae420d9b45d8a06d39ab3d597e8b4363f81129932bd464ec2a99701537a55f",
+    "ui/radio/radio.variants.json": "e260efee6e8cb1082a2cfa5fd54e1554e45c8c094850758476a692c978066fdb",
+    "ui/range/range.latte": "7d9fd5b60fcce2fc11ea04bca0ab7c9e4b44dc237622b26f8f36e8eacc137d62",
+    "ui/range/range.variants.json": "9d90b66e2a73778049cc1850587cd6c24f01d75f64c2a981f20e54de3fea7e8a",
+    "ui/select/opt-group.latte": "cce465d11e31ef664c4d3337c66ab6b42022b4baf84e7cfe9565779cef4009a4",
+    "ui/select/select-option.latte": "cc99dd09967bbb723752675a2864a88ec2f75b95d68be7f82818ffc3119484b5",
+    "ui/select/select.latte": "685d1a9cc066fc22afd2fa77934c19cbba7e8b273f756e4eedeb1d6c3f613b5b",
+    "ui/select/select.variants.json": "6bb9388ceb4a2bbcd2b70292a081614920f6e118073436d93f924a3282217bed",
+    "ui/separator/separator.latte": "73112e404268716e1103e4313ad330d4ae9e1e26d17c354c83765676a74d3a7e",
+    "ui/separator/separator.variants.json": "f1f7562cb3b082ea0054378ef6754585e32fd1ebbdeeb37ca222860c03271f47",
+    "ui/sheet/sheet-close.latte": "1c8751cca64ac07e66ad4bd525419152d66cac855622f7f945ecc66c2cbb9253",
+    "ui/sheet/sheet-trigger.latte": "2be8fd748475013dc07fb704f6eeb230ce4fe3aafef16b254e7e2a96079a6210",
+    "ui/sheet/sheet.latte": "d670393acc938eeabc7f10f2fc52df4c9b1caa220b8a0a4716448df5c83815c9",
+    "ui/sheet/sheet.variants.json": "cd1406a8461a53512853718fccd2cc669f7bf5e4cd16d89d9fbae890760e4bb4",
+    "ui/sheet/sheettrigger.variants.json": "79e43efa27faca8ebcb3c9c38cbd187d2a898df4fc22534a21cbe722189ef138",
+    "ui/skeleton/skeleton.latte": "412e677e92fae927510d551cab56a040374b0df4dd7ea56ba64ba221fe0a82b6",
+    "ui/skeleton/skeleton.variants.json": "ca79242c112ff2b714b0c2ec16ab07ee402fa6b23df3f7cf0c3b6f153dc788e8",
+    "ui/stack/stack.latte": "4a8fa60e02106a9474fe08ece3bb80fdc20893b98ee1e71ae02f5dec69eb19c1",
+    "ui/stack/stack.variants.json": "aa6a71c5a5d5bb664149c92107daa0cfd23ae0f8904265e02adfd284f82bd797",
+    "ui/switch/switch.latte": "f633ded9aefff6c7f4d34f2ee60959af505e1d95e4d9fe54711b67bed6d71c93",
+    "ui/switch/switch.variants.json": "7d3f004339b9af0abeb81a8b9acb32c8e8a87c2bb5be498867a57fd5b1347539",
+    "ui/table/table-body.latte": "3e4cbfbbc056bd2edec7b7692c244465b669f12fe805ca5a4cc12cd15153f43d",
+    "ui/table/table-caption.latte": "09dd7aaf4785a0b951ada23e1655e050d2d4960953122840d9f3e96edb8e6b88",
+    "ui/table/table-cell.latte": "b58dbfd11dfd7679afa2ba6142a0276ca326df9a6c87f74d65ab8582dbd9bf94",
+    "ui/table/table-cell.variants.json": "f0be9b8640964cfae0df8d4477eca8f53e21d67e9113baf3070ab86c7432aff5",
+    "ui/table/table-col-group.latte": "7e21dbf5044d027bf95133e09dc26309066fd212bcb8a5e616e7e6c41ad31394",
+    "ui/table/table-col.latte": "f23bcc0951201d7572d34ac28b7254180024e3f7604b0797642cd776d78c311a",
+    "ui/table/table-foot.latte": "0f957add8cc84ba5e3e09312544a3610bf5295afa1581a9721024de63a5cb847",
+    "ui/table/table-head-cell.latte": "0c1c60708f37050b5d6d8cca9654f873a8fb40dbb4847f47ea250b84e8926848",
+    "ui/table/table-head-cell.variants.json": "fb3eed1db6b23d7e4ad52140ce79abf7372f751c0b3182090b840dd0eaee7f5a",
+    "ui/table/table-head.latte": "5bb19f6ed402a672075f7b0b4ecceef6eea1bf651b40953b65d54fe3a381124b",
+    "ui/table/table-row.latte": "b9cdef84f66ed02dac3d55d2d7fc104e6409f0a8b0dfdb740a8f5e7a2adb4ef8",
+    "ui/table/table.latte": "af38232caf04e7b8fee832b838862441b92af97cf7e87f32854cd76ff5293ffb",
+    "ui/table/table.variants.json": "4ac5d1d28b8709903feadba166706419d070192af753721739efbba2ab5373dd",
+    "ui/text/text.latte": "a0932323989c68ce31fd17f62b39526a60ee3e15141eda5abc1019e443b1f93b",
+    "ui/text/text.variants.json": "820b1e16356e614f3d08fd85cd57aac44afa4e53b2f4b020bbf94e5a80816abe",
+    "ui/textarea/textarea.latte": "4188dd60983b75f892e75b707be1471c6ae6e1191a18181c5294fae96f1646d3",
+    "ui/textarea/textarea.variants.json": "a733e48a9ed18b409325ea585f3a58e5f356afd064c625072063be1526f7bf02",
+    "ui/themetoggle/theme-toggle.latte": "d27da4166121d84e289fb877ab9f7a96ee9a9e382a450f63d6ecb40c7d69f618",
+    "ui/themetoggle/themetoggle.variants.json": "9797fd2291d4997d3ed5e373439cb6340284553f2f398227d400fe14a40f1459",
+    "ui/title/title.latte": "57eb8d8346e11073747c7ef78293fd74698606c24bdbea45b96b22844c88ccdd",
+    "ui/title/title.variants.json": "ebaf2491ef8666cc5e0d20e8ba02935665ebf07f1adbcea9432cb8851f92c8a2"
+  }
+}
diff --git a/packages/latte/ui/README.md b/packages/latte/ui/README.md
new file mode 100644
index 0000000..fecc015
--- /dev/null
+++ b/packages/latte/ui/README.md
@@ -0,0 +1,16 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+# ui8kit/latte-ui
+
+[Latte](https://latte.nette.org) templates **generated** by xgen from `xgen/specs`: 40 bricks, 72 parts, and the blocks.
+
+Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`.
+
+```php
+$latte = \UI8Kit\Latte\Extension::engine('/path/to/packages/latte/ui');
+echo $latte->renderToString('ui/button/button.latte', ['p' => ['Variant' => 'outline'], 'children' => 'Save']);
+```
+
+In a template: `{=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline'], 'children' => $label])|noescape}`. Brick props use the canonical
+names (`Variant`, `Class`, `Attrs`), block props the JSON names of the TypeScript props (`title`, `className`); `children` is markup.
+
+The classes are the same Tailwind v4 utilities as the Svelte, React, Vue and Solid packages: import their `styles/index.css` in the app CSS and add `@source` for this folder.
diff --git a/packages/latte/ui/bin/parity.php b/packages/latte/ui/bin/parity.php
new file mode 100644
index 0000000..f828ba1
--- /dev/null
+++ b/packages/latte/ui/bin/parity.php
@@ -0,0 +1,25 @@
+<?php
+
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/latte/assets/parity.php
+
+// Renders generated templates from JSON: stdin [{"template":"ui/button/button.latte","vars":{"p":{...},"children":"x"}}],
+// stdout the HTML of each (a failure is "ERROR: <message>"). Used by the parity check of xgen.
+
+declare(strict_types=1);
+
+require __DIR__ . '/../vendor/autoload.php';
+
+use UI8Kit\Latte\Extension;
+
+$env = Extension::engine(dirname(__DIR__));
+$requests = json_decode(stream_get_contents(STDIN), true, 512, JSON_THROW_ON_ERROR);
+$out = [];
+foreach ($requests as $r) {
+    try {
+        $out[] = $env->renderToString($r['template'], $r['vars'] ?? []);
+    } catch (\Throwable $e) {
+        $out[] = 'ERROR: ' . $e->getMessage();
+    }
+}
+echo json_encode($out, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_INVALID_UTF8_SUBSTITUTE), "\n";
diff --git a/packages/latte/ui/blocks/about-company.latte b/packages/latte/ui/blocks/about-company.latte
new file mode 100644
index 0000000..ab0e56f
--- /dev/null
+++ b/packages/latte/ui/blocks/about-company.latte
@@ -0,0 +1,64 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/about-company.json
+    The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout (split: the pictures beside the text, stacked: the pictures under it), tone, density.
+    Props (p): id, title, lead, stats, values, layout, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_stats = ($p['stats'] ?? null)}
+{var $v_values = ($p['values'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'split')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_10}
+  {capture $c_11}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4']])|noescape}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4', 'className' => ui_cnv(['mt-8'])]])|noescape}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4']])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-3 gap-4', 'Attrs' => ui_attrs(['data-testid', 'strip'])], 'children' => $c_11])|noescape}
+{/capture}
+{capture $c_12}
+  {if ui_t(ui_gt(ui_len($v_stats), 0))}
+    {capture $c_4}
+      {foreach ui_l($v_stats) as $v_s}
+        {capture $c_3}
+          {capture $c_1}
+            {=ui_text(ui_get($v_s, ['value']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => '3xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_get($v_s, ['label']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Attrs' => ui_attrs(['data-testid', 'stat'])], 'children' => $c_3])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '2-4', 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'stats'])], 'children' => $c_4])|noescape}
+  {/if}
+  {if ui_t(ui_gt(ui_len($v_values), 0))}
+    {capture $c_9}
+      {foreach ui_l($v_values) as $v_v}
+        {capture $c_8}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_v, ['icon'])), 'Size' => 20]])|noescape}
+          {capture $c_7}
+            {capture $c_5}
+              {=ui_text(ui_get($v_v, ['title']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_5])|noescape}
+            {capture $c_6}
+              {=ui_text(ui_get($v_v, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_7])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Class' => 'border-t border-border pt-4', 'Attrs' => ui_attrs(['data-testid', 'value'])], 'children' => $c_8])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['grid grid-cols-1 gap-4', (ui_t(ui_eq($v_layout, 'stacked')) ? 'md:grid-cols-3' : '')])), 'Attrs' => ui_attrs(['data-testid', 'values'])], 'children' => $c_9])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'density' => $v_density, 'layout' => (ui_t(ui_eq($v_layout, 'split')) ? 'split' : 'stack'), 'media' => ['show' => true, 'side' => 'start'], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_10], 'children' => $c_12])|noescape}
diff --git a/packages/latte/ui/blocks/about-me.latte b/packages/latte/ui/blocks/about-me.latte
new file mode 100644
index 0000000..11287b2
--- /dev/null
+++ b/packages/latte/ui/blocks/about-me.latte
@@ -0,0 +1,65 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/about-me.json
+    A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, facts, skills, labels, actions, layout, mediaSide, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_facts = ($p['facts'] ?? null)}
+{var $v_skills = ($p['skills'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'facts')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'start')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_10}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4']])|noescape}
+{/capture}
+{capture $c_11}
+  {if ui_t(ui_eq($v_layout, 'facts'))}
+    {if ui_t(ui_gt(ui_len($v_facts), 0))}
+      {capture $c_4}
+        {foreach ui_l($v_facts) as $v_f}
+          {capture $c_3}
+            {capture $c_1}
+              {=ui_text(ui_get($v_f, ['label']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_get($v_f, ['value']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'rounded bg-card inset-ring inset-ring-border flex flex-col gap-0 p-4', 'Attrs' => ui_attrs(['data-testid', 'fact'])], 'children' => $c_3])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'grid grid-cols-1 gap-4 sm:grid-cols-2', 'Attrs' => ui_attrs(['data-testid', 'facts'])], 'children' => $c_4])|noescape}
+    {/if}
+  {elseif ui_t(ui_gt(ui_len($v_skills), 0))}
+    {capture $c_9}
+      {foreach ui_l($v_skills) as $v_s}
+        {capture $c_8}
+          {capture $c_7}
+            {capture $c_5}
+              {=ui_text(ui_get($v_s, ['label']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_5])|noescape}
+            {capture $c_6}
+              {=ui_text(ui_tpl(ui_get($v_labels, ['level']), [ui_get($v_s, ['level'])]))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Justify' => 'between'], 'children' => $c_7])|noescape}
+          {=ui_include('ui/form/progress.latte', ['p' => ['Value' => ui_s(ui_str(ui_get($v_s, ['level']))), 'Max' => '100', 'Attrs' => ui_attrs(['aria-label', ui_get($v_s, ['label'])])]])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'skill'])], 'children' => $c_8])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'skills'])], 'children' => $c_9])|noescape}
+  {/if}
+  {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref'])]])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge, 'level' => $v_level], 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_10], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/action-group.latte b/packages/latte/ui/blocks/action-group.latte
new file mode 100644
index 0000000..d97dfcb
--- /dev/null
+++ b/packages/latte/ui/blocks/action-group.latte
@@ -0,0 +1,22 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/action-group.json
+    One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not handlers: the page decides what they open.
+    Props (p): primary, primaryHref, secondary, secondaryHref, align. *}
+{var $v_primary = ($p['primary'] ?? null)}
+{var $v_primaryHref = ($p['primaryHref'] ?? null)}
+{var $v_secondary = ($p['secondary'] ?? null)}
+{var $v_secondaryHref = ($p['secondaryHref'] ?? null)}
+{var $v_align = ($p['align'] ?? 'start')}
+{capture $c_3}
+  {capture $c_1}
+    {=ui_text($v_primary)}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Href' => ui_s($v_primaryHref), 'Attrs' => ui_attrs(['data-testid', 'action-primary'])], 'children' => $c_1])|noescape}
+  {if ui_t($v_secondary)}
+    {capture $c_2}
+      {=ui_text($v_secondary)}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Href' => ui_s($v_secondaryHref), 'Attrs' => ui_attrs(['data-testid', 'action-secondary'])], 'children' => $c_2])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => ui_s((ui_t(ui_eq($v_align, 'center')) ? 'center' : 'start')), 'Class' => 'flex-wrap', 'Attrs' => ui_attrs(['data-slot', 'action-group'])], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/activity-feed.latte b/packages/latte/ui/blocks/activity-feed.latte
new file mode 100644
index 0000000..03d2bad
--- /dev/null
+++ b/packages/latte/ui/blocks/activity-feed.latte
@@ -0,0 +1,53 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/activity-feed.json
+    A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout (timeline, list), density (default, compact), tone (default, muted).
+    Props (p): id, title, text, events, empty, layout, density, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_events = ($p['events'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_layout = ($p['layout'] ?? 'timeline')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_9}
+  {capture $c_8}
+    {capture $c_7}
+      {if ui_t(ui_eq(ui_len($v_events), 0))}
+        {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'activity', 'title' => $v_empty]])|noescape}
+      {elseif ui_t(ui_eq($v_layout, 'timeline'))}
+        {=ui_include('blocks/timeline.latte', ['p' => ['items' => $v_events]])|noescape}
+      {else}
+        {capture $c_6}
+          {foreach ui_l($v_events) as $v_e}
+            {capture $c_5}
+              {capture $c_3}
+                {capture $c_1}
+                  {=ui_text(ui_get($v_e, ['title']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+                {if ui_t(ui_eq($v_density, 'default'))}
+                  {capture $c_2}
+                    {=ui_text(ui_get($v_e, ['text']))}
+                  {/capture}
+                  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+                {/if}
+              {/capture}
+              {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_3])|noescape}
+              {capture $c_4}
+                {=ui_text(ui_get($v_e, ['time']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'shrink-0 text-muted-foreground'], 'children' => $c_4])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex items-start justify-between gap-4 border-b border-border last:border-0', (ui_t(ui_eq($v_density, 'compact')) ? 'py-2' : 'py-4')])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_5])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col p-0', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_6])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('blocks/panel.latte', ['p' => ['title' => $v_title, 'description' => $v_text, 'id' => $v_id, 'className' => ui_cnv([(ui_t(ui_eq($v_tone, 'muted')) ? 'bg-muted' : '')])], 'children' => $c_7])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => 'mx-auto w-full max-w-6xl px-4 py-8', 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_8])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : (ui_t(ui_and([$v_title, $v_id])) ? ui_tpl('{0}-t', [$v_id]) : null)), 'data-testid', 'panel-section', 'aria-label', $v_landmarkLabel])], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/announcement-bar.latte b/packages/latte/ui/blocks/announcement-bar.latte
new file mode 100644
index 0000000..810a864
--- /dev/null
+++ b/packages/latte/ui/blocks/announcement-bar.latte
@@ -0,0 +1,50 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/announcement-bar.json
+    A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default, muted), layout (center, split), dismiss (show, hide).
+    Props (p): label, text, cta, ctaHref, icon, dismissLabel, tone, layout, dismiss, badgeLabel, badge, position, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_cta = ($p['cta'] ?? null)}
+{var $v_ctaHref = ($p['ctaHref'] ?? null)}
+{var $v_icon = ($p['icon'] ?? 'megaphone')}
+{var $v_dismissLabel = ($p['dismissLabel'] ?? null)}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_layout = ($p['layout'] ?? 'center')}
+{var $v_dismiss = ($p['dismiss'] ?? 'hide')}
+{var $v_badgeLabel = ($p['badgeLabel'] ?? null)}
+{var $v_badge = ($p['badge'] ?? 'none')}
+{var $v_position = ($p['position'] ?? 'top')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_7}
+  {capture $c_6}
+    {capture $c_4}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s($v_icon), 'Size' => 16]])|noescape}
+      {if ui_t(ui_eq($v_badge, 'show'))}
+        {capture $c_1}
+          {=ui_text($v_badgeLabel)}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current', 'Attrs' => ui_attrs(['data-testid', 'announcement-badge'])], 'children' => $c_1])|noescape}
+      {/if}
+      {capture $c_2}
+        {=ui_text($v_text)}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_2])|noescape}
+      {if ui_t($v_cta)}
+        {capture $c_3}
+          {=ui_text($v_cta)}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/link-plain/link-plain.latte', ['p' => ['Href' => ui_s($v_ctaHref), 'Class' => 'inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4', 'Attrs' => ui_attrs(['data-testid', 'announcement-cta'])], 'children' => $c_3])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['min-w-0 flex-wrap', (ui_t(ui_and([ui_eq($v_layout, 'center'), ui_eq($v_dismiss, 'show')])) ? 'ml-auto' : '')]))], 'children' => $c_4])|noescape}
+    {if ui_t(ui_eq($v_dismiss, 'show'))}
+      {capture $c_5}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'x', 'Size' => 16]])|noescape}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Class' => 'ml-auto shrink-0 text-current', 'Type' => 'button', 'Attrs' => ui_attrs(['aria-label', $v_dismissLabel, 'data-testid', 'dismiss'])], 'children' => $c_5])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex items-center gap-4 py-2', (ui_t(ui_eq($v_layout, 'split')) ? 'justify-between' : 'justify-center')])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_6])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'aside', 'Class' => ui_s(ui_cnv(['w-full', (ui_t(ui_eq($v_position, 'bottom')) ? 'sticky bottom-0 z-40 border-t border-border' : ''), (ui_t(ui_eq($v_tone, 'muted')) ? 'bg-muted text-foreground' : 'bg-primary text-primary-foreground')])), 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_label]), 'data-testid', 'announcement', 'data-layout', $v_layout])], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/app-main.latte b/packages/latte/ui/blocks/app-main.latte
new file mode 100644
index 0000000..ec4317c
--- /dev/null
+++ b/packages/latte/ui/blocks/app-main.latte
@@ -0,0 +1,51 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/app-main.json
+    The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel when `activity` is given).
+    Props (p): id, title, metrics, chart, activity, cols, density. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_metrics = ($p['metrics'] ?? null)}
+{var $v_chart = ($p['chart'] ?? null)}
+{var $v_activity = ($p['activity'] ?? null)}
+{var $v_cols = ($p['cols'] ?? '1-2')}
+{var $v_density = ($p['density'] ?? 'default')}
+{capture $c_8}
+  {capture $c_1}
+    {=ui_text($v_title)}
+  {/capture}
+  {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => '2xl', 'Weight' => 'bold', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-title', [$v_id])])], 'children' => $c_1])|noescape}
+  {if ui_t(ui_gt(ui_len($v_metrics), 0))}
+    {capture $c_3}
+      {foreach ui_l($v_metrics) as $v_m}
+        {capture $c_2}
+          {=ui_include('blocks/stat-tile.latte', ['p' => ['label' => ui_get($v_m, ['label']), 'value' => ui_get($v_m, ['value']), 'icon' => ui_get($v_m, ['icon']), 'hint' => ui_get($v_m, ['hint'])]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_2])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s($v_cols), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_3])|noescape}
+  {/if}
+  {if ui_t($v_activity)}
+    {capture $c_6}
+      {if ui_t(ui_gt(ui_len(ui_get($v_chart, ['series'])), 0))}
+        {capture $c_4}
+          {=ui_include('blocks/bar-chart.latte', ['p' => ['bars' => ui_get($v_chart, ['series']), 'label' => ui_get($v_chart, ['summary']), 'height' => 144]])|noescape}
+        {/capture}
+        {=ui_include('blocks/panel.latte', ['p' => ['title' => ui_get($v_chart, ['title']), 'description' => ui_get($v_chart, ['text']), 'id' => ui_tpl('{0}-chart', [$v_id]), 'className' => ui_cnv(['h-full'])], 'children' => $c_4])|noescape}
+      {/if}
+      {if ui_t(ui_gt(ui_len(ui_get($v_activity, ['events'])), 0))}
+        {capture $c_5}
+          {=ui_include('blocks/timeline.latte', ['p' => ['items' => ui_get($v_activity, ['events'])]])|noescape}
+        {/capture}
+        {=ui_include('blocks/panel.latte', ['p' => ['title' => ui_get($v_activity, ['title']), 'description' => ui_get($v_activity, ['text']), 'id' => ui_tpl('{0}-feed', [$v_id]), 'className' => ui_cnv(['h-full'])], 'children' => $c_5])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-2', 'Class' => 'items-stretch gap-4'], 'children' => $c_6])|noescape}
+  {elseif ui_t(ui_gt(ui_len(ui_get($v_chart, ['series'])), 0))}
+    {capture $c_7}
+      {=ui_include('blocks/bar-chart.latte', ['p' => ['bars' => ui_get($v_chart, ['series']), 'label' => ui_get($v_chart, ['summary']), 'height' => 144]])|noescape}
+    {/capture}
+    {=ui_include('blocks/panel.latte', ['p' => ['title' => ui_get($v_chart, ['title']), 'description' => ui_get($v_chart, ['text']), 'id' => ui_tpl('{0}-chart', [$v_id]), 'className' => ui_cnv(['h-full'])], 'children' => $c_7])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => ui_s((ui_t(ui_eq($v_density, 'compact')) ? '4' : '6')), 'Align' => 'stretch', 'Class' => 'min-w-0', 'Attrs' => ui_attrs(['data-testid', 'app-main'])], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/app-shell.latte b/packages/latte/ui/blocks/app-shell.latte
new file mode 100644
index 0000000..026e466
--- /dev/null
+++ b/packages/latte/ui/blocks/app-shell.latte
@@ -0,0 +1,66 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/app-shell.json
+    The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar is a port contract.
+    Props (p): id, title, nav, user, search, metrics, chart, activity, layout, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_nav = ($p['nav'] ?? null)}
+{var $v_user = ($p['user'] ?? null)}
+{var $v_search = ($p['search'] ?? null)}
+{var $v_metrics = ($p['metrics'] ?? null)}
+{var $v_chart = ($p['chart'] ?? null)}
+{var $v_activity = ($p['activity'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'sidebar')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_11}
+  {if ui_t(ui_eq($v_layout, 'top'))}
+    {capture $c_2}
+      {=ui_include('blocks/nav-bar.latte', ['p' => ['label' => ui_get($v_nav, ['label']), 'brand' => ui_get($v_nav, ['brand']), 'links' => ui_get($v_nav, ['links']), 'current' => ui_get($v_nav, ['current']), 'search' => $v_search, 'actions' => ['mode' => 'none'], 'layout' => 'search', 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+      {capture $c_1}
+        {=ui_include('blocks/app-main.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'metrics' => $v_metrics, 'chart' => $v_chart, 'cols' => '1-4', 'activity' => $v_activity, 'density' => $v_density]])|noescape}
+      {/capture}
+      {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'pb-8'])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_1])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch'], 'children' => $c_2])|noescape}
+  {else}
+    {capture $c_10}
+      {if ui_t(ui_eq($v_layout, 'sidebar'))}
+        {capture $c_3}
+          {=ui_include('blocks/sidebar-nav.latte', ['p' => ['label' => ui_get($v_nav, ['label']), 'brand' => ui_get($v_nav, ['brand']), 'links' => ui_get($v_nav, ['links']), 'current' => ui_get($v_nav, ['current']), 'userName' => ui_get($v_user, ['name']), 'userEmail' => ui_get($v_user, ['email']), 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+          {=ui_include('blocks/app-main.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'metrics' => $v_metrics, 'chart' => $v_chart, 'activity' => $v_activity, 'density' => $v_density]])|noescape}
+        {/capture}
+        {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1', 'Class' => 'items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]'], 'children' => $c_3])|noescape}
+      {else}
+        {capture $c_9}
+          {=ui_include('blocks/sidebar-nav.latte', ['p' => ['label' => ui_get($v_nav, ['label']), 'brand' => ui_get($v_nav, ['brand']), 'links' => ui_get($v_nav, ['links']), 'current' => ui_get($v_nav, ['current']), 'userName' => ui_get($v_user, ['name']), 'userEmail' => ui_get($v_user, ['email']), 'width' => 'compact', 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+          {if ui_t(ui_gt(ui_len(ui_get($v_activity, ['events'])), 0))}
+            {capture $c_8}
+              {capture $c_7}
+                {foreach ui_l(ui_get($v_activity, ['events'])) as $v_e}
+                  {capture $c_6}
+                    {capture $c_4}
+                      {=ui_text(ui_get($v_e, ['title']))}
+                    {/capture}
+                    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+                    {capture $c_5}
+                      {=ui_text(ui_get($v_e, ['time']))}
+                    {/capture}
+                    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+                  {/capture}
+                  {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex flex-col gap-2', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_6])|noescape}
+                {/foreach}
+              {/capture}
+              {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-4 p-0', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_7])|noescape}
+            {/capture}
+            {=ui_include('blocks/panel.latte', ['p' => ['title' => ui_get($v_activity, ['title']), 'description' => ui_get($v_activity, ['text']), 'id' => ui_tpl('{0}-list', [$v_id])], 'children' => $c_8])|noescape}
+          {/if}
+          {=ui_include('blocks/app-main.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'metrics' => $v_metrics, 'chart' => $v_chart, 'density' => 'compact']])|noescape}
+        {/capture}
+        {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-3', 'Class' => 'items-start gap-4'], 'children' => $c_9])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-8'])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_10])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => 'bg-background', 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : ui_tpl('{0}-title', [$v_id])), 'data-testid', 'app-shell', 'data-layout', $v_layout, 'aria-label', $v_landmarkLabel])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/article-block.latte b/packages/latte/ui/blocks/article-block.latte
new file mode 100644
index 0000000..59536d0
--- /dev/null
+++ b/packages/latte/ui/blocks/article-block.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/article-block.json
+    A self-contained item (a review, a card, a project) in its own file: Block tag article.
+    Props (p): testid, className; children: markup. *}
+{var $v_testid = ($p['testid'] ?? null)}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'article', 'Class' => ui_s(ui_cnv([($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-testid', $v_testid])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/article-body.latte b/packages/latte/ui/blocks/article-body.latte
new file mode 100644
index 0000000..fb8ce74
--- /dev/null
+++ b/packages/latte/ui/blocks/article-body.latte
@@ -0,0 +1,71 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/article-body.json
+    A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting the section being read is a port contract.
+    Props (p): id, title, sections, empty, tocTitle, layout, quotes, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_sections = ($p['sections'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_tocTitle = ($p['tocTitle'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'column')}
+{var $v_quotes = ($p['quotes'] ?? 'show')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_13}
+  {if ui_t(ui_eq(ui_len($v_sections), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'file-text', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_12}
+      {if ui_t(ui_eq($v_layout, 'toc'))}
+        {capture $c_6}
+          {capture $c_5}
+            {capture $c_1}
+              {=ui_text($v_tocTitle)}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+            {capture $c_4}
+              {foreach ui_l($v_sections) as $v_s}
+                {capture $c_3}
+                  {capture $c_2}
+                    {=ui_text(ui_get($v_s, ['title']))}
+                  {/capture}
+                  {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_tpl('#{0}-{1}', [$v_id, ui_get($v_s, ['id'])])), 'Variant' => 'default', 'Class' => 'text-sm text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'toc-link'])], 'children' => $c_2])|noescape}
+                {/capture}
+                {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_3])|noescape}
+              {/foreach}
+            {/capture}
+            {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [$v_tocTitle, $v_landmarkLabel])) : $v_tocTitle), 'className' => ui_cnv(['md:sticky md:top-4']), 'testid' => 'toc'], 'children' => $c_6])|noescape}
+      {/if}
+      {capture $c_11}
+        {foreach ui_l($v_sections) as $v_s}
+          {capture $c_10}
+            {capture $c_7}
+              {=ui_text(ui_get($v_s, ['title']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => '2xl', 'Weight' => 'bold'], 'children' => $c_7])|noescape}
+            {capture $c_8}
+              {=ui_text(ui_get($v_s, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base'], 'children' => $c_8])|noescape}
+            {if ui_t(ui_eq($v_quotes, 'show'))}
+              {if ui_t(ui_get($v_s, ['quote']))}
+                {capture $c_9}
+                  {=ui_text(ui_get($v_s, ['quote']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Tag' => 'blockquote', 'Class' => 'm-0 border-l border-border pl-4 text-lg', 'Attrs' => ui_attrs(['data-testid', 'quote'])], 'children' => $c_9])|noescape}
+              {/if}
+            {/if}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex flex-col gap-4', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-{1}', [$v_id, ui_get($v_s, ['id'])]), 'data-testid', 'item'])], 'children' => $c_10])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '8', 'Align' => 'stretch', 'Class' => 'mx-auto w-full max-w-2xl min-w-0', 'Attrs' => ui_attrs(['data-testid', 'article'])], 'children' => $c_11])|noescape}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1', 'Class' => ui_s(ui_cnv(['items-start gap-8', (ui_t(ui_eq($v_layout, 'toc')) ? 'md:grid-cols-[14rem_minmax(0,1fr)]' : '')]))], 'children' => $c_12])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_13])|noescape}
diff --git a/packages/latte/ui/blocks/auth-card.latte b/packages/latte/ui/blocks/auth-card.latte
new file mode 100644
index 0000000..9c09a7b
--- /dev/null
+++ b/packages/latte/ui/blocks/auth-card.latte
@@ -0,0 +1,89 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/auth-card.json
+    A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button, optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout (card, plain), social (none, show).
+    Props (p): id, title, text, submit, switchText, switchLink, switchHref, labels, mode, layout, social, level, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_submit = ($p['submit'] ?? null)}
+{var $v_switchText = ($p['switchText'] ?? null)}
+{var $v_switchLink = ($p['switchLink'] ?? null)}
+{var $v_switchHref = ($p['switchHref'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_mode = ($p['mode'] ?? 'signin')}
+{var $v_layout = ($p['layout'] ?? 'card')}
+{var $v_social = ($p['social'] ?? 'none')}
+{var $v_level = ($p['level'] ?? 2)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_16}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i($v_level), 'Size' => '2xl', 'Weight' => 'bold', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-title', [$v_id])])], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_text($v_text)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_3])|noescape}
+  {if ui_t(ui_and([ui_eq($v_social, 'first'), !(ui_eq($v_social, 'none')), !(ui_eq($v_mode, 'reset')), !(ui_eq($v_mode, 'magic'))]))}
+    {capture $c_8}
+      {capture $c_5}
+        {=ui_include('ui/separator/separator.latte', ['p' => ['Class' => 'flex-1']])|noescape}
+        {capture $c_4}
+          {=ui_text(ui_get($v_labels, ['divider']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+        {=ui_include('ui/separator/separator.latte', ['p' => ['Class' => 'flex-1']])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_5])|noescape}
+      {capture $c_6}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'key-round', 'Size' => 16]])|noescape}
+        {=ui_text(ui_get($v_labels, ['passkey']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Type' => 'button', 'Class' => 'w-full'], 'children' => $c_6])|noescape}
+      {capture $c_7}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'mail', 'Size' => 16]])|noescape}
+        {=ui_text(ui_get($v_labels, ['magic']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Type' => 'button', 'Class' => 'w-full'], 'children' => $c_7])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Attrs' => ui_attrs(['data-testid', 'social'])], 'children' => $c_8])|noescape}
+  {/if}
+  {=ui_include('blocks/auth-form.latte', ['p' => ['id' => $v_id, 'mode' => $v_mode, 'labels' => $v_labels, 'submit' => $v_submit]])|noescape}
+  {if ui_t(ui_and([!(ui_eq($v_social, 'first')), !(ui_eq($v_social, 'none')), !(ui_eq($v_mode, 'reset')), !(ui_eq($v_mode, 'magic'))]))}
+    {capture $c_13}
+      {capture $c_10}
+        {=ui_include('ui/separator/separator.latte', ['p' => ['Class' => 'flex-1']])|noescape}
+        {capture $c_9}
+          {=ui_text(ui_get($v_labels, ['divider']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_9])|noescape}
+        {=ui_include('ui/separator/separator.latte', ['p' => ['Class' => 'flex-1']])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_10])|noescape}
+      {capture $c_11}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'key-round', 'Size' => 16]])|noescape}
+        {=ui_text(ui_get($v_labels, ['passkey']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Type' => 'button', 'Class' => 'w-full'], 'children' => $c_11])|noescape}
+      {capture $c_12}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'mail', 'Size' => 16]])|noescape}
+        {=ui_text(ui_get($v_labels, ['magic']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Type' => 'button', 'Class' => 'w-full'], 'children' => $c_12])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Attrs' => ui_attrs(['data-testid', 'social'])], 'children' => $c_13])|noescape}
+  {/if}
+  {capture $c_15}
+    {=ui_text($v_switchText)}
+    {=ui_text(' ')}
+    {capture $c_14}
+      {=ui_text($v_switchLink)}
+    {/capture}
+    {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s($v_switchHref), 'Variant' => 'default', 'Attrs' => ui_attrs(['data-testid', 'switch'])], 'children' => $c_14])|noescape}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-center text-muted-foreground'], 'children' => $c_15])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => ui_s(ui_cnv(['flex w-full flex-col gap-6', (ui_t(ui_eq($v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')])), 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : ui_tpl('{0}-title', [$v_id])), 'data-testid', 'auth-card', 'data-mode', $v_mode, 'aria-label', $v_landmarkLabel])], 'children' => $c_16])|noescape}
diff --git a/packages/latte/ui/blocks/auth-form.latte b/packages/latte/ui/blocks/auth-form.latte
new file mode 100644
index 0000000..aacd23f
--- /dev/null
+++ b/packages/latte/ui/blocks/auth-form.latte
@@ -0,0 +1,58 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/auth-form.json
+    The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot link, the terms, the submit button.
+    Props (p): id, mode, labels, submit. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_mode = ($p['mode'] ?? 'signin')}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_submit = ($p['submit'] ?? null)}
+{capture $c_11}
+  {if ui_t(ui_eq($v_mode, 'signup'))}
+    {capture $c_1}
+      {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'name', 'Autocomplete' => 'name', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-name', [$v_id]), 'data-testid', 'field'])]])|noescape}
+    {/capture}
+    {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['name']), 'htmlFor' => ui_tpl('{0}-name', [$v_id])], 'children' => $c_1])|noescape}
+  {/if}
+  {capture $c_2}
+    {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'email', 'Name' => 'email', 'Autocomplete' => 'email', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-email', [$v_id]), 'data-testid', 'field'])]])|noescape}
+  {/capture}
+  {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['email']), 'htmlFor' => ui_tpl('{0}-email', [$v_id])], 'children' => $c_2])|noescape}
+  {if ui_t(ui_and([!(ui_eq($v_mode, 'reset')), !(ui_eq($v_mode, 'magic'))]))}
+    {capture $c_3}
+      {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'password', 'Name' => 'password', 'Autocomplete' => ui_s((ui_t(ui_eq($v_mode, 'signup')) ? 'new-password' : 'current-password')), 'Attrs' => ui_attrs(['id', ui_tpl('{0}-password', [$v_id]), 'data-testid', 'field'])]])|noescape}
+    {/capture}
+    {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['password']), 'htmlFor' => ui_tpl('{0}-password', [$v_id])], 'children' => $c_3])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_mode, 'signin'))}
+    {capture $c_7}
+      {capture $c_5}
+        {=ui_include('ui/checkbox/checkbox.latte', ['p' => ['Name' => 'remember', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-remember', [$v_id])])]])|noescape}
+        {capture $c_4}
+          {=ui_text(ui_get($v_labels, ['remember']))}
+        {/capture}
+        {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-remember', [$v_id])), 'Class' => 'text-sm'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['w-fit', '']))], 'children' => $c_5])|noescape}
+      {capture $c_6}
+        {=ui_text(ui_get($v_labels, ['forgot']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'link', 'Size' => 'sm', 'Class' => 'px-0'], 'children' => $c_6])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Justify' => 'between', 'Align' => 'center', 'Class' => 'flex-wrap gap-2'], 'children' => $c_7])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_mode, 'signup'))}
+    {capture $c_9}
+      {=ui_include('ui/checkbox/checkbox.latte', ['p' => ['Name' => 'terms', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-terms', [$v_id])])]])|noescape}
+      {capture $c_8}
+        {=ui_text(ui_get($v_labels, ['terms']))}
+      {/capture}
+      {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-terms', [$v_id])), 'Class' => 'text-sm'], 'children' => $c_8])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['w-fit', '']))], 'children' => $c_9])|noescape}
+  {/if}
+  {capture $c_10}
+    {=ui_text($v_submit)}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'submit', 'Class' => 'w-full', 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_10])|noescape}
+{/capture}
+{=ui_include('ui/form/form.latte', ['p' => ['Method' => 'dialog', 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'auth-form'])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/auth-layout.latte b/packages/latte/ui/blocks/auth-layout.latte
new file mode 100644
index 0000000..14a60fb
--- /dev/null
+++ b/packages/latte/ui/blocks/auth-layout.latte
@@ -0,0 +1,54 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/auth-layout.json
+    A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card, centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side of the picture), mode, social. The page's heading is the card's title.
+    Props (p): id, title, text, submit, switchTo, labels, visual, level, layout, side, mode, social, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_submit = ($p['submit'] ?? null)}
+{var $v_switchTo = ($p['switchTo'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_visual = ($p['visual'] ?? null)}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_layout = ($p['layout'] ?? 'split')}
+{var $v_side = ($p['side'] ?? 'end')}
+{var $v_mode = ($p['mode'] ?? 'signin')}
+{var $v_social = ($p['social'] ?? 'none')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_9}
+  {capture $c_8}
+    {if ui_t(ui_eq($v_layout, 'split'))}
+      {capture $c_5}
+        {capture $c_1}
+          {=ui_include('blocks/auth-card.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'text' => $v_text, 'submit' => $v_submit, 'switchText' => ui_get($v_switchTo, ['text']), 'switchLink' => ui_get($v_switchTo, ['link']), 'switchHref' => ui_get($v_switchTo, ['href']), 'labels' => $v_labels, 'mode' => $v_mode, 'layout' => 'plain', 'social' => $v_social, 'level' => $v_level, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'mx-auto flex w-full max-w-sm items-center'], 'children' => $c_1])|noescape}
+        {capture $c_4}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_visual, ['title']), 'ratio' => '4/3']])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_get($v_visual, ['title']))}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => '2xl', 'Weight' => 'bold'], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_text(ui_get($v_visual, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => ui_s(ui_cnv(['justify-end rounded bg-muted p-8', (ui_t(ui_eq($v_side, 'start')) ? 'md:order-first' : 'md:order-last')])), 'Attrs' => ui_attrs(['data-testid', 'visual'])], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-2', 'Class' => 'items-stretch gap-8'], 'children' => $c_5])|noescape}
+    {elseif ui_t(ui_eq($v_layout, 'centered'))}
+      {capture $c_6}
+        {=ui_include('blocks/auth-card.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'text' => $v_text, 'submit' => $v_submit, 'switchText' => ui_get($v_switchTo, ['text']), 'switchLink' => ui_get($v_switchTo, ['link']), 'switchHref' => ui_get($v_switchTo, ['href']), 'labels' => $v_labels, 'mode' => $v_mode, 'social' => $v_social, 'level' => $v_level, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'mx-auto w-full max-w-md rounded bg-muted p-6'], 'children' => $c_6])|noescape}
+    {else}
+      {capture $c_7}
+        {=ui_include('blocks/auth-card.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'text' => $v_text, 'submit' => $v_submit, 'switchText' => ui_get($v_switchTo, ['text']), 'switchLink' => ui_get($v_switchTo, ['link']), 'switchHref' => ui_get($v_switchTo, ['href']), 'labels' => $v_labels, 'mode' => $v_mode, 'layout' => 'plain', 'social' => $v_social, 'level' => $v_level, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'mx-auto w-full max-w-sm'], 'children' => $c_7])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-12'])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_8])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'div', 'Class' => 'w-full', 'Attrs' => ui_attrs(['data-testid', 'auth-layout', 'data-layout', $v_layout])], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/avatar.latte b/packages/latte/ui/blocks/avatar.latte
new file mode 100644
index 0000000..e412427
--- /dev/null
+++ b/packages/latte/ui/blocks/avatar.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/avatar.json
+    An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round.
+    Props (p): src, alt, size, className. *}
+{var $v_src = ($p['src'] ?? null)}
+{var $v_alt = ($p['alt'] ?? '')}
+{var $v_size = ($p['size'] ?? 'default')}
+{capture $c_1}
+  {=ui_include('ui/image/image.latte', ['p' => ['Src' => ui_s($v_src), 'Alt' => ui_s($v_alt), 'Class' => 'size-full object-cover', 'Fit' => 'cover', 'Size' => 'auto', 'Loading' => 'eager', 'Decoding' => 'auto', 'Attrs' => ui_attrs(['draggable', 'false'])]])|noescape}
+{/capture}
+{=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/avatar.variants.json', ['size' => $v_size]), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'avatar'])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/backdrop.latte b/packages/latte/ui/blocks/backdrop.latte
new file mode 100644
index 0000000..18a7ab8
--- /dev/null
+++ b/packages/latte/ui/blocks/backdrop.latte
@@ -0,0 +1,12 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/backdrop.json
+    A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of the block (rule 01).
+    Props (p): kind, alt. *}
+{var $v_kind = ($p['kind'] ?? 'none')}
+{var $v_alt = ($p['alt'] ?? '')}
+{if ui_t(ui_eq($v_kind, 'image'))}
+  {capture $c_1}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_alt, 'ratio' => '21/9', 'className' => ui_cnv(['size-full rounded-none opacity-30'])]])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'pointer-events-none absolute inset-0 -z-10', 'Attrs' => ui_attrs(['data-testid', 'backdrop'])], 'children' => $c_1])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/badge-square.latte b/packages/latte/ui/blocks/badge-square.latte
new file mode 100644
index 0000000..94eda56
--- /dev/null
+++ b/packages/latte/ui/blocks/badge-square.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/badge-square.json
+    A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd).
+    Props (p): size, className; children: markup. *}
+{var $v_size = ($p['size'] ?? 'default')}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/badge-square.variants.json', ['size' => $v_size]), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'badge-square'])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/bar-chart.latte b/packages/latte/ui/blocks/bar-chart.latte
new file mode 100644
index 0000000..d50fcef
--- /dev/null
+++ b/packages/latte/ui/blocks/bar-chart.latte
@@ -0,0 +1,33 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/bar-chart.json
+    A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image for assistive technology: `label` carries the summary, the bar values are in the captions and titles.
+    Props (p): bars, label, max, height, className. *}
+{var $v_bars = ($p['bars'] ?? null)}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_max = ($p['max'] ?? null)}
+{var $v_height = ($p['height'] ?? 160)}
+{var $v_top = ui_max([1, ui_coalesce([$v_max, ui_max_by($v_bars, 'value')])])}
+{capture $c_6}
+  {capture $c_2}
+    {foreach ui_l($v_bars) as $v_b}
+      {capture $c_1}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['w-full rounded', (ui_t(ui_get($v_b, ['muted'])) ? 'bg-muted-foreground' : 'bg-primary')])), 'Attrs' => ui_attrs(['style', ui_css(['height', ui_max([2, ui_round(ui_mul(ui_div(ui_get($v_b, ['value']), $v_top), 100))]), '%']), 'data-bar', ui_get($v_b, ['id'])])]])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex h-full min-w-0 flex-1 items-end', 'Attrs' => ui_attrs(['title', ui_coalesce([ui_get($v_b, ['title']), ui_get($v_b, ['label'])])])], 'children' => $c_1])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-w-0 items-end gap-2', 'Attrs' => ui_attrs(['role', 'img', 'aria-label', $v_label, 'style', ui_css(['height', $v_height, 'px'])])], 'children' => $c_2])|noescape}
+  {capture $c_5}
+    {foreach ui_l($v_bars) as $v_b}
+      {capture $c_4}
+        {capture $c_3}
+          {=ui_text(ui_get($v_b, ['label']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground'], 'children' => $c_3])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'relative h-4 min-w-0 flex-1'], 'children' => $c_4])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'mt-2 flex min-w-0 gap-2', 'Attrs' => ui_attrs(['aria-hidden', 'true'])], 'children' => $c_5])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['min-w-0', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'bar-chart'])], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/before-after.latte b/packages/latte/ui/blocks/before-after.latte
new file mode 100644
index 0000000..df6d8a7
--- /dev/null
+++ b/packages/latte/ui/blocks/before-after.latte
@@ -0,0 +1,107 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/before-after.json
+    Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two cards, rows: one row per point), icons (show, hide), tone, density.
+    Props (p): id, title, points, empty, labels, layout, icons, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_points = ($p['points'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'cards')}
+{var $v_icons = ($p['icons'] ?? 'show')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_21}
+  {if ui_t(ui_eq(ui_len($v_points), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'git-compare', 'title' => $v_empty]])|noescape}
+  {elseif ui_t(ui_eq($v_layout, 'cards'))}
+    {capture $c_13}
+      {capture $c_6}
+        {capture $c_5}
+          {capture $c_1}
+            {=ui_text(ui_get($v_labels, ['before']))}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+          {capture $c_4}
+            {foreach ui_l($v_points) as $v_p}
+              {capture $c_3}
+                {if ui_t(ui_eq($v_icons, 'show'))}
+                  {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'x', 'Size' => 16, 'Class' => 'h-lh shrink-0 text-sm']])|noescape}
+                {/if}
+                {capture $c_2}
+                  {=ui_text(ui_get($v_p, ['before']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_2])|noescape}
+              {/capture}
+              {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-start gap-4', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_3])|noescape}
+            {/foreach}
+          {/capture}
+          {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-4 p-0'], 'children' => $c_4])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => 'flex flex-col gap-4'], 'children' => $c_5])|noescape}
+      {/capture}
+      {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'muted', 'Class' => ui_s(ui_cnv(['h-full', (ui_t(ui_eq($v_density, 'compact')) ? 'gap-4 p-4' : '')])), 'Attrs' => ui_attrs(['data-testid', 'side', 'data-side', 'before'])], 'children' => $c_6])|noescape}
+      {capture $c_12}
+        {capture $c_11}
+          {capture $c_7}
+            {=ui_text(ui_get($v_labels, ['after']))}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_7])|noescape}
+          {capture $c_10}
+            {foreach ui_l($v_points) as $v_p}
+              {capture $c_9}
+                {if ui_t(ui_eq($v_icons, 'show'))}
+                  {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'check', 'Size' => 16, 'Class' => 'h-lh shrink-0 text-sm']])|noescape}
+                {/if}
+                {capture $c_8}
+                  {=ui_text(ui_get($v_p, ['after']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_8])|noescape}
+              {/capture}
+              {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-start gap-4', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_9])|noescape}
+            {/foreach}
+          {/capture}
+          {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-4 p-0'], 'children' => $c_10])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => 'flex flex-col gap-4'], 'children' => $c_11])|noescape}
+      {/capture}
+      {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'default', 'Class' => ui_s(ui_cnv(['h-full', (ui_t(ui_eq($v_density, 'compact')) ? 'gap-4 p-4' : '')])), 'Attrs' => ui_attrs(['data-testid', 'side', 'data-side', 'after'])], 'children' => $c_12])|noescape}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-2', 'Class' => 'items-stretch gap-4', 'Attrs' => ui_attrs(['data-testid', 'sides'])], 'children' => $c_13])|noescape}
+  {else}
+    {capture $c_20}
+      {foreach ui_l($v_points) as $v_p}
+        {capture $c_19}
+          {capture $c_14}
+            {=ui_text(ui_get($v_p, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_14])|noescape}
+          {capture $c_16}
+            {if ui_t(ui_eq($v_icons, 'show'))}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'x', 'Size' => 16, 'Class' => 'h-lh shrink-0 text-sm text-muted-foreground']])|noescape}
+            {/if}
+            {capture $c_15}
+              {=ui_text(ui_get($v_p, ['before']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_15])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'start'], 'children' => $c_16])|noescape}
+          {capture $c_18}
+            {if ui_t(ui_eq($v_icons, 'show'))}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'check', 'Size' => 16, 'Class' => 'h-lh shrink-0 text-sm text-primary']])|noescape}
+            {/if}
+            {capture $c_17}
+              {=ui_text(ui_get($v_p, ['after']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_17])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'start'], 'children' => $c_18])|noescape}
+        {/capture}
+        {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-3', 'Class' => ui_s(ui_cnv(['items-center gap-4', 'rounded bg-card inset-ring inset-ring-border p-4'])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_19])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'rows'])], 'children' => $c_20])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_21])|noescape}
diff --git a/packages/latte/ui/blocks/bento-grid.latte b/packages/latte/ui/blocks/bento-grid.latte
new file mode 100644
index 0000000..3baee0d
--- /dev/null
+++ b/packages/latte/ui/blocks/bento-grid.latte
@@ -0,0 +1,44 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/bento-grid.json
+    Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in the large tiles), tone, density.
+    Props (p): id, title, tiles, empty, layout, media, tone, density, landmarkLabel. *}
+{var $k_SPAN = ['large' => 'md:col-span-2 md:row-span-2', 'wide' => 'md:col-span-2', 'small' => '']}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_tiles = ($p['tiles'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_layout = ($p['layout'] ?? 'bento')}
+{var $v_media = ($p['media'] ?? 'none')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_6}
+  {if ui_t(ui_eq(ui_len($v_tiles), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layout-dashboard', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_5}
+      {foreach ui_l($v_tiles) as $v_tile}
+        {capture $c_4}
+          {capture $c_3}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_tile, ['icon'])), 'Size' => 24]])|noescape}
+            {capture $c_1}
+              {=ui_text(ui_get($v_tile, ['title']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_get($v_tile, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+            {if ui_t(ui_and([ui_eq($v_media, 'image'), ui_or([ui_eq(ui_get($v_tile, ['size']), 'large'), ui_eq($v_layout, 'even')])]))}
+              {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_tile, ['title']), 'ratio' => '4/3', 'className' => ui_cnv(['mt-auto'])]])|noescape}
+            {/if}
+          {/capture}
+          {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => 'flex h-full flex-col gap-4'], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'default', 'Class' => ui_s(ui_cnv(['h-full overflow-hidden', (ui_t(ui_eq($v_density, 'compact')) ? 'gap-4 p-4' : ''), (ui_t(ui_eq($v_layout, 'bento')) ? ui_at($k_SPAN, ui_get($v_tile, ['size'])) : '')])), 'Attrs' => ui_attrs(['data-testid', 'item', 'data-size', (ui_t(ui_eq($v_layout, 'bento')) ? ui_get($v_tile, ['size']) : 'even')])], 'children' => $c_4])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-4', 'Class' => 'auto-rows-fr gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_5])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/bottom-nav.latte b/packages/latte/ui/blocks/bottom-nav.latte
new file mode 100644
index 0000000..c504e2a
--- /dev/null
+++ b/packages/latte/ui/blocks/bottom-nav.latte
@@ -0,0 +1,32 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/bottom-nav.json
+    An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show, hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.
+    Props (p): label, tabs, current, labels, position, tone, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_tabs = ($p['tabs'] ?? null)}
+{var $v_current = ($p['current'] ?? '')}
+{var $v_labels = ($p['labels'] ?? 'show')}
+{var $v_position = ($p['position'] ?? 'static')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_gt(ui_len($v_tabs), 0))}
+  {capture $c_5}
+    {capture $c_4}
+      {foreach ui_l($v_tabs) as $v_tab}
+        {capture $c_3}
+          {capture $c_2}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_tab, ['icon'])), 'Size' => 20]])|noescape}
+            {capture $c_1}
+              {=ui_text(ui_get($v_tab, ['name']))}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_labels, 'hide')) ? 'sr-only' : ''))], 'children' => $c_1])|noescape}
+          {/capture}
+          {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_tab, ['href']), 'className' => ui_cnv([ui_cnv(['flex flex-col items-center gap-2 py-2 text-xs', (ui_t(ui_eq(ui_get($v_tab, ['id']), $v_current)) ? 'font-semibold text-primary' : 'text-muted-foreground')])]), 'current' => ui_eq(ui_get($v_tab, ['id']), $v_current), 'testid' => 'item'], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_3])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 grid list-none grid-flow-col auto-cols-fr p-0', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_4])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'nav', 'Class' => ui_s(ui_cnv(['mx-auto w-full max-w-md border-t border-border', (ui_t(ui_eq($v_tone, 'muted')) ? 'bg-muted' : 'bg-background'), (ui_t(ui_eq($v_position, 'sticky')) ? 'sticky bottom-0 z-40' : '')])), 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_label]), 'data-testid', 'bottom-nav', 'data-position', $v_position])], 'children' => $c_5])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/bulk-bar.latte b/packages/latte/ui/blocks/bulk-bar.latte
new file mode 100644
index 0000000..85c769f
--- /dev/null
+++ b/packages/latte/ui/blocks/bulk-bar.latte
@@ -0,0 +1,21 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/bulk-bar.json
+    The "N selected" bar of a list: a count, a clear button and the bulk actions (children). All text comes in through props.
+    Props (p): label, clearLabel, className; children: markup. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_clearLabel = ($p['clearLabel'] ?? null)}
+{capture $c_4}
+  {capture $c_1}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'x', 'Size' => 16]])|noescape}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'Type' => 'button', 'AriaLabel' => ui_s($v_clearLabel), 'Class' => 'text-background hover:bg-background/15 hover:text-background'], 'children' => $c_1])|noescape}
+  {capture $c_2}
+    {=ui_text($v_label)}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Attrs' => ui_attrs(['data-testid', 'bulk-count'])], 'children' => $c_2])|noescape}
+  {capture $c_3}
+    {=($children ?? '')|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'ml-auto flex flex-wrap items-center gap-2'], 'children' => $c_3])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'region', 'aria-label', $v_label, 'aria-live', 'polite', 'data-slot', 'bulk-bar', 'data-testid', 'bulk-bar'])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/cart-drawer.latte b/packages/latte/ui/blocks/cart-drawer.latte
new file mode 100644
index 0000000..d364431
--- /dev/null
+++ b/packages/latte/ui/blocks/cart-drawer.latte
@@ -0,0 +1,55 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-drawer.json
+    The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).
+    Props (p): id, lines, rows, labels, drawer, state, media, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_lines = ($p['lines'] ?? null)}
+{var $v_rows = ($p['rows'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_drawer = ($p['drawer'] ?? null)}
+{var $v_state = ($p['state'] ?? 'filled')}
+{var $v_media = ($p['media'] ?? 'image')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_11}
+  {capture $c_10}
+    {capture $c_9}
+      {capture $c_1}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'h-8 w-48 rounded bg-background']])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'h-40 rounded bg-background']])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'h-40 rounded bg-background']])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'hidden flex-1 flex-col gap-4 p-8 sm:flex', 'Attrs' => ui_attrs(['aria-hidden', 'true'])], 'children' => $c_1])|noescape}
+      {capture $c_8}
+        {capture $c_4}
+          {capture $c_2}
+            {=ui_text(ui_get($v_drawer, ['title']))}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => 'lg', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'x', 'Size' => 16]])|noescape}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'AriaLabel' => ui_s(ui_get($v_drawer, ['close']))], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'border-b border-border p-4'], 'children' => $c_4])|noescape}
+        {if ui_t(ui_or([ui_eq($v_state, 'empty'), ui_eq(ui_len($v_lines), 0)]))}
+          {capture $c_7}
+            {capture $f_5}
+              {capture $c_6}
+                {=ui_text(ui_get($v_drawer, ['browse']))}
+              {/capture}
+              {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default'], 'children' => $c_6])|noescape}
+            {/capture}
+            {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'shopping-bag', 'title' => ui_get($v_drawer, ['empty']), 'text' => ui_get($v_drawer, ['emptyText']), 'action' => $f_5]])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex flex-1 flex-col justify-center p-4', 'Attrs' => ui_attrs(['data-testid', 'empty'])], 'children' => $c_7])|noescape}
+        {else}
+          {=ui_include('blocks/drawer-lines.latte', ['p' => ['field' => ui_tpl('{0}-qty', [$v_id]), 'lines' => $v_lines, 'rows' => $v_rows, 'labels' => $v_labels, 'drawer' => $v_drawer, 'media' => $v_media]])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex w-full flex-col bg-background shadow-lg sm:max-w-sm', 'Attrs' => ui_attrs(['role', 'group', 'aria-label', ui_get($v_drawer, ['title']), 'data-testid', 'drawer'])], 'children' => $c_8])|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border'], 'children' => $c_9])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => 'mx-auto w-full max-w-6xl px-4', 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_10])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => 'py-8', 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, ui_get($v_drawer, ['title'])]), 'data-testid', 'section'])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/cart-list.latte b/packages/latte/ui/blocks/cart-list.latte
new file mode 100644
index 0000000..0051d3d
--- /dev/null
+++ b/packages/latte/ui/blocks/cart-list.latte
@@ -0,0 +1,61 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-list.json
+    The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button. Axes: layout (table, cards), media (image, none), density, tone.
+    Props (p): id, title, lines, empty, labels, layout, media, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lines = ($p['lines'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'table')}
+{var $v_media = ($p['media'] ?? 'image')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_10}
+  {if ui_t(ui_eq(ui_len($v_lines), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'shopping-cart', 'title' => $v_empty]])|noescape}
+  {elseif ui_t(ui_eq($v_layout, 'table'))}
+    {=ui_include('blocks/cart-table.latte', ['p' => ['field' => ui_tpl('{0}-qty', [$v_id]), 'lines' => $v_lines, 'labels' => $v_labels, 'media' => $v_media, 'density' => $v_density]])|noescape}
+  {else}
+    {capture $c_9}
+      {foreach ui_l($v_lines) as $v_line}
+        {capture $c_8}
+          {capture $c_7}
+            {if ui_t(ui_eq($v_media, 'image'))}
+              {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_line, ['name']), 'ratio' => '1/1', 'className' => ui_cnv(['size-16 shrink-0'])]])|noescape}
+            {/if}
+            {capture $c_4}
+              {capture $c_1}
+                {=ui_text(ui_get($v_line, ['name']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+              {capture $c_2}
+                {=ui_text(ui_get($v_line, ['variant']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+              {capture $c_3}
+                {=ui_text(ui_money(ui_get($v_line, ['price']), ui_get($v_line, ['currency'])))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_3])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'min-w-40 flex-1'], 'children' => $c_4])|noescape}
+            {=ui_include('blocks/number-field.latte', ['p' => ['value' => ui_str(ui_get($v_line, ['qty'])), 'name' => ui_tpl('{0}-qty-{1}', [$v_id, ui_get($v_line, ['id'])]), 'min' => '1', 'label' => ui_get($v_labels, ['qty']), 'decrease' => ui_get($v_labels, ['decrease']), 'increase' => ui_get($v_labels, ['increase'])]])|noescape}
+            {capture $c_5}
+              {=ui_text(ui_money(ui_mul(ui_get($v_line, ['price']), ui_get($v_line, ['qty'])), ui_get($v_line, ['currency'])))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'bold'], 'children' => $c_5])|noescape}
+            {capture $c_6}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'x', 'Size' => 16]])|noescape}
+            {/capture}
+            {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'AriaLabel' => ui_s(ui_get($v_labels, ['remove'])), 'Attrs' => ui_attrs(['data-testid', 'remove'])], 'children' => $c_6])|noescape}
+          {/capture}
+          {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => 'flex flex-wrap items-center gap-4'], 'children' => $c_7])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'default', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_8])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'cart-cards'])], 'children' => $c_9])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_10])|noescape}
diff --git a/packages/latte/ui/blocks/cart-summary-card.latte b/packages/latte/ui/blocks/cart-summary-card.latte
new file mode 100644
index 0000000..1656ae5
--- /dev/null
+++ b/packages/latte/ui/blocks/cart-summary-card.latte
@@ -0,0 +1,117 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-summary-card.json
+    The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.
+    Props (p): lines, rows, promos, labels, items, promo, field, progress, value. *}
+{var $v_lines = ($p['lines'] ?? null)}
+{var $v_rows = ($p['rows'] ?? null)}
+{var $v_promos = ($p['promos'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_items = ($p['items'] ?? 'hide')}
+{var $v_promo = ($p['promo'] ?? 'show')}
+{var $v_field = ($p['field'] ?? 'promo')}
+{var $v_progress = ($p['progress'] ?? 'show')}
+{var $v_value = ($p['value'] ?? 70)}
+{capture $c_24}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_text(ui_get($v_labels, ['title']))}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => 'lg', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_text(ui_tpl(ui_get($v_labels, ['items']), [ui_str(ui_len($v_lines))]))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'baseline', 'Justify' => 'between'], 'children' => $c_3])|noescape}
+  {if ui_t(ui_and([ui_eq($v_items, 'show'), ui_gt(ui_len($v_lines), 0)]))}
+    {capture $c_9}
+      {foreach ui_l($v_lines) as $v_line}
+        {capture $c_8}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_line, ['name']), 'ratio' => '1/1', 'className' => ui_cnv(['size-12 shrink-0'])]])|noescape}
+          {capture $c_6}
+            {capture $c_4}
+              {=ui_text(ui_get($v_line, ['name']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+            {capture $c_5}
+              {=ui_text(ui_tpl('{0} x {1}', [ui_get($v_line, ['qty']), ui_money(ui_get($v_line, ['price']), ui_get($v_line, ['currency']))]))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'flex-1'], 'children' => $c_6])|noescape}
+          {capture $c_7}
+            {=ui_text(ui_money(ui_mul(ui_get($v_line, ['price']), ui_get($v_line, ['qty'])), ui_get($v_line, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'font-medium'], 'children' => $c_7])|noescape}
+        {/capture}
+        {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center gap-4 text-sm'], 'children' => $c_8])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col gap-4', 'Attrs' => ui_attrs(['data-testid', 'summary-lines'])], 'children' => $c_9])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_promo, 'show'))}
+    {capture $c_15}
+      {capture $c_11}
+        {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => ui_s($v_field), 'AriaLabel' => ui_s(ui_get($v_labels, ['promo'])), 'Placeholder' => ui_s(ui_get($v_labels, ['promo'])), 'Class' => 'min-w-0 flex-1']])|noescape}
+        {capture $c_10}
+          {=ui_text(ui_get($v_labels, ['apply']))}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Type' => 'button'], 'children' => $c_10])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_11])|noescape}
+      {if ui_t(ui_gt(ui_len($v_promos), 0))}
+        {capture $c_14}
+          {capture $c_12}
+            {=ui_text(ui_get($v_labels, ['codes']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_12])|noescape}
+          {foreach ui_l($v_promos) as $v_c}
+            {capture $c_13}
+              {=ui_text(ui_get($v_c, ['code']))}
+            {/capture}
+            {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'code'])], 'children' => $c_13])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => 'flex-wrap'], 'children' => $c_14])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'promo'])], 'children' => $c_15])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_progress, 'show'))}
+    {capture $c_17}
+      {capture $c_16}
+        {=ui_text(ui_get($v_labels, ['progress']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_16])|noescape}
+      {=ui_include('ui/form/progress.latte', ['p' => ['Value' => ui_s(ui_str($v_value)), 'Max' => '100', 'Attrs' => ui_attrs(['aria-label', ui_get($v_labels, ['progress'])])]])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Class' => 'rounded bg-muted p-4', 'Attrs' => ui_attrs(['data-testid', 'progress'])], 'children' => $c_17])|noescape}
+  {/if}
+  {if ui_t(ui_gt(ui_len($v_rows), 0))}
+    {capture $c_21}
+      {foreach ui_l($v_rows) as $v_row}
+        {capture $c_20}
+          {capture $c_18}
+            {=ui_text(ui_get($v_row, ['label']))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_18])|noescape}
+          {capture $c_19}
+            {=ui_text(ui_money(ui_get($v_row, ['amount']), ui_get($v_row, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_19])|noescape}
+        {/capture}
+        {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex items-center justify-between gap-4', (ui_t(ui_get($v_row, ['strong'])) ? 'border-t border-border pt-4 text-base font-bold' : 'text-sm text-muted-foreground')])), 'Attrs' => ui_attrs(['data-testid', 'row'])], 'children' => $c_20])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col gap-2'], 'children' => $c_21])|noescape}
+  {/if}
+  {capture $c_22}
+    {=ui_text(ui_get($v_labels, ['checkout']))}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'lg', 'Class' => 'w-full', 'Attrs' => ui_attrs(['data-testid', 'checkout'])], 'children' => $c_22])|noescape}
+  {capture $c_23}
+    {=ui_text(ui_get($v_labels, ['note']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_23])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs' => ui_attrs(['data-testid', 'summary'])], 'children' => $c_24])|noescape}
diff --git a/packages/latte/ui/blocks/cart-table.latte b/packages/latte/ui/blocks/cart-table.latte
new file mode 100644
index 0000000..2583328
--- /dev/null
+++ b/packages/latte/ui/blocks/cart-table.latte
@@ -0,0 +1,110 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-table.json
+    The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a remove button.
+    Props (p): lines, labels, media, density, field. *}
+{var $v_lines = ($p['lines'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_media = ($p['media'] ?? 'image')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_field = ($p['field'] ?? 'qty')}
+{capture $c_23}
+  {capture $c_22}
+    {capture $c_1}
+      {=ui_text(ui_get($v_labels, ['caption']))}
+    {/capture}
+    {=ui_include('ui/table/table-caption.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_1])|noescape}
+    {capture $c_9}
+      {capture $c_8}
+        {capture $c_2}
+          {=ui_text(ui_get($v_labels, ['product']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_2])|noescape}
+        {capture $c_3}
+          {=ui_text(ui_get($v_labels, ['price']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'hidden py-2 sm:table-cell'], 'children' => $c_3])|noescape}
+        {capture $c_4}
+          {=ui_text(ui_get($v_labels, ['qty']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_4])|noescape}
+        {capture $c_5}
+          {=ui_text(ui_get($v_labels, ['total']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_5])|noescape}
+        {capture $c_7}
+          {capture $c_6}
+            {=ui_text(ui_get($v_labels, ['remove']))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_6])|noescape}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_7])|noescape}
+      {/capture}
+      {=ui_include('ui/table/table-row.latte', ['p' => [], 'children' => $c_8])|noescape}
+    {/capture}
+    {=ui_include('ui/table/table-head.latte', ['p' => [], 'children' => $c_9])|noescape}
+    {capture $c_21}
+      {foreach ui_l($v_lines) as $v_line}
+        {capture $c_20}
+          {capture $c_14}
+            {capture $c_13}
+              {if ui_t(ui_eq($v_media, 'image'))}
+                {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_line, ['name']), 'ratio' => '1/1', 'className' => ui_cnv(['hidden size-14 shrink-0 sm:block'])]])|noescape}
+              {/if}
+              {capture $c_12}
+                {capture $c_10}
+                  {=ui_text(ui_get($v_line, ['name']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_10])|noescape}
+                {capture $c_11}
+                  {=ui_text(ui_get($v_line, ['variant']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_11])|noescape}
+              {/capture}
+              {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_12])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_13])|noescape}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => ui_s(ui_cnv([(ui_t(ui_eq($v_density, 'compact')) ? 'py-2' : 'py-4')]))], 'children' => $c_14])|noescape}
+          {capture $c_15}
+            {=ui_text(ui_money(ui_get($v_line, ['price']), ui_get($v_line, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'hidden sm:table-cell'], 'children' => $c_15])|noescape}
+          {capture $c_16}
+            {=ui_include('blocks/number-field.latte', ['p' => ['value' => ui_str(ui_get($v_line, ['qty'])), 'name' => ui_tpl('{0}-{1}', [$v_field, ui_get($v_line, ['id'])]), 'min' => '1', 'label' => ui_get($v_labels, ['qty']), 'decrease' => ui_get($v_labels, ['decrease']), 'increase' => ui_get($v_labels, ['increase'])]])|noescape}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => [], 'children' => $c_16])|noescape}
+          {capture $c_17}
+            {=ui_text(ui_money(ui_mul(ui_get($v_line, ['price']), ui_get($v_line, ['qty'])), ui_get($v_line, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'font-semibold'], 'children' => $c_17])|noescape}
+          {capture $c_19}
+            {capture $c_18}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'x', 'Size' => 16]])|noescape}
+            {/capture}
+            {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'AriaLabel' => ui_s(ui_get($v_labels, ['remove'])), 'Attrs' => ui_attrs(['data-testid', 'remove'])], 'children' => $c_18])|noescape}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'text-right'], 'children' => $c_19])|noescape}
+        {/capture}
+        {=ui_include('ui/table/table-row.latte', ['p' => ['Class' => 'border-t border-border', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_20])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/table/table-body.latte', ['p' => [], 'children' => $c_21])|noescape}
+  {/capture}
+  {=ui_include('ui/table/table.latte', ['p' => ['Class' => 'w-full text-left text-sm', 'Attrs' => ui_attrs(['data-testid', 'cart-table'])], 'children' => $c_22])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'w-full overflow-x-auto'], 'children' => $c_23])|noescape}
+{if ui_t(ui_gt(ui_len($v_lines), 0))}
+  {capture $c_26}
+    {capture $c_24}
+      {=ui_text(ui_get($v_labels, ['subtotal']))}
+      {=ui_text(' ')}
+      {=ui_text(ui_money(ui_sum_by($v_lines, 'price', 'qty'), ui_first_of($v_lines, 'currency')))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'bold', 'Attrs' => ui_attrs(['data-testid', 'subtotal'])], 'children' => $c_24])|noescape}
+    {capture $c_25}
+      {=ui_text(ui_get($v_labels, ['checkout']))}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Attrs' => ui_attrs(['data-testid', 'checkout'])], 'children' => $c_25])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'mt-4 flex-wrap border-t border-border pt-4', 'Attrs' => ui_attrs(['data-testid', 'cart-footer'])], 'children' => $c_26])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/category-nav.latte b/packages/latte/ui/blocks/category-nav.latte
new file mode 100644
index 0000000..9dd2bfd
--- /dev/null
+++ b/packages/latte/ui/blocks/category-nav.latte
@@ -0,0 +1,72 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/category-nav.json
+    Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon, or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes: layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.
+    Props (p): label, categories, current, layout, count, icon, density, tools, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_categories = ($p['categories'] ?? null)}
+{var $v_current = ($p['current'] ?? 'all')}
+{var $v_layout = ($p['layout'] ?? 'chips')}
+{var $v_count = ($p['count'] ?? 'show')}
+{var $v_icon = ($p['icon'] ?? 'show')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_tools = ($p['tools'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_chipLike = ui_or([ui_eq($v_layout, 'chips'), ui_eq($v_layout, 'toolbar')])}
+{var $v_tiles = ui_eq($v_layout, 'tiles')}
+{var $v_linkShape = (ui_t($v_chipLike) ? 'inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border' : (ui_t(ui_eq($v_layout, 'bar')) ? 'inline-flex items-center gap-2 -mb-px border-b px-1 py-2' : (ui_t($v_tiles) ? 'flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border' : 'inline-flex w-full items-center gap-2 rounded px-3 py-2')))}
+{var $v_currentLook = (ui_t($v_chipLike) ? 'bg-primary text-primary-foreground' : (ui_t(ui_eq($v_layout, 'bar')) ? 'border-foreground font-semibold' : (ui_t($v_tiles) ? 'inset-ring-foreground font-semibold' : 'bg-muted font-semibold')))}
+{var $v_otherLook = (ui_t(ui_eq($v_layout, 'bar')) ? 'border-transparent' : '')}
+{var $v_listShape = (ui_t(ui_eq($v_layout, 'sidebar')) ? 'flex flex-col gap-2' : (ui_t(ui_eq($v_layout, 'bar')) ? 'flex flex-wrap gap-2 gap-x-4 border-b border-border' : (ui_t($v_tiles) ? 'grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6' : 'flex flex-wrap gap-2')))}
+{capture $c_11}
+  {capture $c_10}
+    {if ui_t(ui_eq($v_layout, 'toolbar'))}
+      {capture $c_3}
+        {=ui_include('blocks/search-field.latte', ['p' => ['value' => ui_coalesce([ui_get($v_tools, ['query']), '']), 'label' => ui_coalesce([ui_get($v_tools, ['search']), '']), 'placeholder' => ui_get($v_tools, ['search'])]])|noescape}
+        {capture $c_1}
+          {=ui_include('ui/select/select-option.latte', ['p' => ['Value' => 'sort', 'Label' => ui_s(ui_get($v_tools, ['sortValue'])), 'Selected' => true]])|noescape}
+        {/capture}
+        {=ui_include('ui/select/select.latte', ['p' => ['Name' => 'sort', 'Size' => 'sm', 'AriaLabel' => ui_s(ui_get($v_tools, ['sort'])), 'Class' => 'w-48'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text(ui_get($v_tools, ['shown']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'mb-4 flex-wrap', 'Attrs' => ui_attrs(['data-testid', 'toolbar'])], 'children' => $c_3])|noescape}
+    {/if}
+    {if ui_t(ui_gt(ui_len($v_categories), 0))}
+      {capture $c_9}
+        {foreach ui_l($v_categories) as $v_c}
+          {capture $c_8}
+            {capture $c_7}
+              {if ui_t(ui_eq($v_icon, 'show'))}
+                {if ui_t($v_tiles)}
+                  {capture $c_4}
+                    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_c, ['icon'])), 'Size' => 20]])|noescape}
+                  {/capture}
+                  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-10 items-center justify-center rounded bg-muted'], 'children' => $c_4])|noescape}
+                {else}
+                  {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_c, ['icon'])), 'Size' => 16]])|noescape}
+                {/if}
+              {/if}
+              {capture $c_5}
+                {=ui_text(ui_get($v_c, ['name']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_5])|noescape}
+              {if ui_t(ui_eq($v_count, 'show'))}
+                {capture $c_6}
+                  {=ui_text(ui_str(ui_get($v_c, ['count'])))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+              {/if}
+            {/capture}
+            {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_c, ['href']), 'className' => ui_cnv([ui_cnv(['text-sm', $v_linkShape, (ui_t(ui_eq(ui_get($v_c, ['id']), $v_current)) ? $v_currentLook : $v_otherLook)])]), 'current' => ui_eq(ui_get($v_c, ['id']), $v_current), 'testid' => 'item', 'block' => true], 'children' => $c_7])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_8])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => ui_s($v_listShape), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_9])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', (ui_t(ui_eq($v_density, 'compact')) ? 'py-2' : 'py-4')])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_10])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'nav', 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_label]), 'data-testid', 'category-nav', 'data-layout', $v_layout])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/chart-panel.latte b/packages/latte/ui/blocks/chart-panel.latte
new file mode 100644
index 0000000..6e744a3
--- /dev/null
+++ b/packages/latte/ui/blocks/chart-panel.latte
@@ -0,0 +1,36 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/chart-panel.json
+    A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart (bars, meters), size (default, compact), tone (default, muted).
+    Props (p): id, title, text, series, empty, summary, percent, chart, size, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_series = ($p['series'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_summary = ($p['summary'] ?? null)}
+{var $v_percent = ($p['percent'] ?? null)}
+{var $v_chart = ($p['chart'] ?? 'bars')}
+{var $v_size = ($p['size'] ?? 'default')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_4}
+  {capture $c_3}
+    {capture $c_2}
+      {if ui_t(ui_eq(ui_len($v_series), 0))}
+        {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'chart-column', 'title' => $v_empty]])|noescape}
+      {elseif ui_t(ui_eq($v_chart, 'bars'))}
+        {=ui_include('blocks/bar-chart.latte', ['p' => ['bars' => $v_series, 'label' => $v_summary, 'height' => (ui_t(ui_eq($v_size, 'compact')) ? 96 : 176)]])|noescape}
+      {else}
+        {capture $c_1}
+          {foreach ui_l($v_series) as $v_s}
+            {=ui_include('blocks/meter-row.latte', ['p' => ['label' => ui_get($v_s, ['label']), 'value' => ui_get($v_s, ['value']), 'caption' => ui_tpl($v_percent, [ui_get($v_s, ['value'])])]])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => ui_s((ui_t(ui_eq($v_size, 'compact')) ? '0' : '2')), 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_1])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('blocks/panel.latte', ['p' => ['title' => $v_title, 'description' => $v_text, 'id' => $v_id, 'className' => ui_cnv([(ui_t(ui_eq($v_tone, 'muted')) ? 'bg-muted' : '')])], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => 'mx-auto w-full max-w-6xl px-4 py-8', 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_3])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : (ui_t(ui_and([$v_title, $v_id])) ? ui_tpl('{0}-t', [$v_id]) : null)), 'data-testid', 'panel-section', 'aria-label', $v_landmarkLabel])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/checklist.latte b/packages/latte/ui/blocks/checklist.latte
new file mode 100644
index 0000000..22707f0
--- /dev/null
+++ b/packages/latte/ui/blocks/checklist.latte
@@ -0,0 +1,76 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checklist.json
+    An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain), progress (bar, text, none), marker (check, number), tone (default, muted).
+    Props (p): id, title, tasks, empty, progressLabel, layout, progress, marker, detail, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_tasks = ($p['tasks'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_progressLabel = ($p['progressLabel'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'card')}
+{var $v_progress = ($p['progress'] ?? 'bar')}
+{var $v_marker = ($p['marker'] ?? 'check')}
+{var $v_detail = ($p['detail'] ?? 'always')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_12}
+  {if ui_t(ui_eq(ui_len($v_tasks), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'list-checks', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_11}
+      {if ui_t(ui_eq($v_progress, 'bar'))}
+        {=ui_include('ui/form/progress.latte', ['p' => ['Value' => ui_s(ui_str(ui_round(ui_div(ui_mul(ui_count($v_tasks, 'done'), 100), ui_len($v_tasks))))), 'Max' => '100', 'Attrs' => ui_attrs(['aria-label', ui_tpl($v_progressLabel, [ui_count($v_tasks, 'done'), ui_len($v_tasks)])])]])|noescape}
+      {/if}
+      {if ui_t(ui_eq($v_progress, 'text'))}
+        {capture $c_1}
+          {=ui_text(ui_tpl($v_progressLabel, [ui_count($v_tasks, 'done'), ui_len($v_tasks)]))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'progress-text'])], 'children' => $c_1])|noescape}
+      {/if}
+      {capture $c_10}
+        {foreach ui_l($v_tasks) as $v_task}
+          {var $v_i = $iterator->counter0}
+          {capture $c_9}
+            {if ui_t(ui_eq($v_marker, 'number'))}
+              {capture $c_2}
+                {=ui_text(ui_str(ui_add($v_i, 1)))}
+              {/capture}
+              {=ui_include('ui/iconbadge/icon-badge.latte', ['p' => ['Variant' => ui_s((ui_t(ui_get($v_task, ['done'])) ? 'primary' : 'outline')), 'Size' => 'xs'], 'children' => $c_2])|noescape}
+            {else}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s((ui_t(ui_get($v_task, ['done'])) ? 'circle-check' : 'circle')), 'Size' => 24, 'Class' => ui_s((ui_t(ui_get($v_task, ['done'])) ? 'shrink-0 text-primary' : 'shrink-0 text-muted-foreground'))]])|noescape}
+            {/if}
+            {if ui_t(ui_eq($v_detail, 'expand'))}
+              {capture $c_5}
+                {capture $c_3}
+                  {=ui_text(ui_get($v_task, ['title']))}
+                {/capture}
+                {=ui_include('ui/disclosure/summary.latte', ['p' => ['Variant' => 'ghost'], 'children' => $c_3])|noescape}
+                {capture $c_4}
+                  {=ui_text(ui_get($v_task, ['text']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'pb-2 text-muted-foreground'], 'children' => $c_4])|noescape}
+              {/capture}
+              {=ui_include('ui/disclosure/disclosure.latte', ['p' => ['Variant' => 'ghost', 'Class' => 'flex-1', 'Attrs' => ui_attrs(['data-testid', 'task-detail'])], 'children' => $c_5])|noescape}
+            {else}
+              {capture $c_8}
+                {capture $c_6}
+                  {=ui_text(ui_get($v_task, ['title']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_6])|noescape}
+                {capture $c_7}
+                  {=ui_text(ui_get($v_task, ['text']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+              {/capture}
+              {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_8])|noescape}
+            {/if}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-start gap-4', 'Attrs' => ui_attrs(['data-testid', 'item', 'data-done', ui_str(ui_get($v_task, ['done']))])], 'children' => $c_9])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-4 p-0', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_10])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')), 'Attrs' => ui_attrs(['data-testid', 'checklist'])], 'children' => $c_11])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'measure' => '2xl', 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_12])|noescape}
diff --git a/packages/latte/ui/blocks/checkout-form.latte b/packages/latte/ui/blocks/checkout-form.latte
new file mode 100644
index 0000000..1a3471a
--- /dev/null
+++ b/packages/latte/ui/blocks/checkout-form.latte
@@ -0,0 +1,93 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checkout-form.json
+    A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps, beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards: each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.
+    Props (p): id, title, days, payments, lines, rows, promos, labels, totals, layout, summary, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? '')}
+{var $v_days = ($p['days'] ?? null)}
+{var $v_payments = ($p['payments'] ?? null)}
+{var $v_lines = ($p['lines'] ?? null)}
+{var $v_rows = ($p['rows'] ?? null)}
+{var $v_promos = ($p['promos'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_totals = ($p['totals'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'cards')}
+{var $v_summary = ($p['summary'] ?? 'aside')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_19}
+  {capture $c_18}
+    {capture $c_16}
+      {capture $c_5}
+        {capture $c_4}
+          {capture $c_1}
+            {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'name', 'Autocomplete' => 'name', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-name', [$v_id]), 'data-testid', 'field'])]])|noescape}
+          {/capture}
+          {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['name']), 'htmlFor' => ui_tpl('{0}-name', [$v_id])], 'children' => $c_1])|noescape}
+          {capture $c_2}
+            {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'tel', 'Name' => 'phone', 'Autocomplete' => 'tel', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-phone', [$v_id]), 'data-testid', 'field'])]])|noescape}
+          {/capture}
+          {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['phone']), 'htmlFor' => ui_tpl('{0}-phone', [$v_id])], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'email', 'Name' => 'email', 'Autocomplete' => 'email', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-email', [$v_id]), 'data-testid', 'field'])]])|noescape}
+          {/capture}
+          {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['email']), 'htmlFor' => ui_tpl('{0}-email', [$v_id])], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-2', 'Class' => 'gap-4'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('blocks/checkout-step.latte', ['p' => ['number' => '1', 'title' => ui_get($v_labels, ['contacts']), 'text' => ui_get($v_labels, ['contactsText']), 'layout' => $v_layout], 'children' => $c_5])|noescape}
+      {capture $c_13}
+        {capture $c_6}
+          {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'street', 'Autocomplete' => 'address-line1', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-street', [$v_id]), 'data-testid', 'field'])]])|noescape}
+        {/capture}
+        {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['street']), 'htmlFor' => ui_tpl('{0}-street', [$v_id])], 'children' => $c_6])|noescape}
+        {capture $c_11}
+          {capture $c_7}
+            {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'house', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-house', [$v_id]), 'data-testid', 'field'])]])|noescape}
+          {/capture}
+          {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['house']), 'htmlFor' => ui_tpl('{0}-house', [$v_id])], 'children' => $c_7])|noescape}
+          {capture $c_8}
+            {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'flat', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-flat', [$v_id]), 'data-testid', 'field'])]])|noescape}
+          {/capture}
+          {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['flat']), 'htmlFor' => ui_tpl('{0}-flat', [$v_id])], 'children' => $c_8])|noescape}
+          {capture $c_9}
+            {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'entrance', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-entrance', [$v_id]), 'data-testid', 'field'])]])|noescape}
+          {/capture}
+          {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['entrance']), 'htmlFor' => ui_tpl('{0}-entrance', [$v_id])], 'children' => $c_9])|noescape}
+          {capture $c_10}
+            {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'floor', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-floor', [$v_id]), 'data-testid', 'field'])]])|noescape}
+          {/capture}
+          {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['floor']), 'htmlFor' => ui_tpl('{0}-floor', [$v_id])], 'children' => $c_10])|noescape}
+        {/capture}
+        {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '2-4', 'Class' => 'gap-4'], 'children' => $c_11])|noescape}
+        {capture $c_12}
+          {=ui_include('ui/textarea/textarea.latte', ['p' => ['Rows' => 4, 'Name' => 'comment', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-comment', [$v_id]), 'data-testid', 'field'])]])|noescape}
+        {/capture}
+        {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['comment']), 'htmlFor' => ui_tpl('{0}-comment', [$v_id])], 'children' => $c_12])|noescape}
+      {/capture}
+      {=ui_include('blocks/checkout-step.latte', ['p' => ['number' => '2', 'title' => ui_get($v_labels, ['address']), 'text' => ui_get($v_labels, ['addressText']), 'layout' => $v_layout], 'children' => $c_13])|noescape}
+      {capture $c_14}
+        {if ui_t(ui_gt(ui_len($v_days), 0))}
+          {=ui_include('blocks/slot-grid.latte', ['p' => ['days' => $v_days, 'name' => ui_tpl('{0}-slot', [$v_id]), 'item' => 'plain']])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('blocks/checkout-step.latte', ['p' => ['number' => '3', 'title' => ui_get($v_labels, ['slot']), 'text' => ui_get($v_labels, ['slotText']), 'layout' => $v_layout], 'children' => $c_14])|noescape}
+      {capture $c_15}
+        {if ui_t(ui_gt(ui_len($v_payments), 0))}
+          {=ui_include('blocks/payment-options.latte', ['p' => ['payments' => $v_payments, 'name' => ui_tpl('{0}-payment', [$v_id]), 'checked' => 'payment-card']])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('blocks/checkout-step.latte', ['p' => ['number' => '4', 'title' => ui_get($v_labels, ['payment']), 'text' => ui_get($v_labels, ['paymentText']), 'layout' => $v_layout], 'children' => $c_15])|noescape}
+      {=ui_include('blocks/checkout-submit.latte', ['p' => ['id' => $v_id, 'consent' => ui_get($v_labels, ['consent']), 'submit' => ui_get($v_labels, ['submit']), 'legal' => ui_get($v_labels, ['legal'])]])|noescape}
+    {/capture}
+    {=ui_include('ui/form/form.latte', ['p' => ['Method' => 'dialog', 'Class' => ui_s((ui_t(ui_eq($v_summary, 'aside')) ? 'flex flex-col gap-6 lg:col-span-2' : 'flex flex-col gap-6 lg:col-span-3')), 'Attrs' => ui_attrs(['data-testid', 'checkout-form'])], 'children' => $c_16])|noescape}
+    {if ui_t(ui_eq($v_summary, 'aside'))}
+      {capture $c_17}
+        {=ui_include('blocks/cart-summary-card.latte', ['p' => ['field' => ui_tpl('{0}-promo', [$v_id]), 'lines' => $v_lines, 'rows' => $v_rows, 'promos' => $v_promos, 'labels' => $v_totals, 'items' => 'show']])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'lg:sticky lg:top-8', 'Attrs' => ui_attrs(['data-testid', 'aside'])], 'children' => $c_17])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3'], 'children' => $c_18])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_19])|noescape}
diff --git a/packages/latte/ui/blocks/checkout-step.latte b/packages/latte/ui/blocks/checkout-step.latte
new file mode 100644
index 0000000..fbce254
--- /dev/null
+++ b/packages/latte/ui/blocks/checkout-step.latte
@@ -0,0 +1,34 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checkout-step.json
+    One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`). Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).
+    Props (p): number, title, text, layout; children: markup. *}
+{var $v_number = ($p['number'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? '')}
+{var $v_layout = ($p['layout'] ?? 'cards')}
+{capture $c_6}
+  {capture $c_5}
+    {if ui_t(ui_eq($v_layout, 'numbered'))}
+      {capture $c_1}
+        {=ui_text($v_number)}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground'], 'children' => $c_1])|noescape}
+    {/if}
+    {capture $c_4}
+      {capture $c_2}
+        {=ui_text($v_title)}
+      {/capture}
+      {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => 'lg', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+      {if ui_t($v_text)}
+        {capture $c_3}
+          {=ui_text($v_text)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_4])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start'], 'children' => $c_5])|noescape}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'cards')) ? 'rounded bg-card inset-ring inset-ring-border p-6' : 'border-t border-border pt-6')), 'Attrs' => ui_attrs(['data-testid', 'step'])], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/checkout-submit.latte b/packages/latte/ui/blocks/checkout-submit.latte
new file mode 100644
index 0000000..14f9091
--- /dev/null
+++ b/packages/latte/ui/blocks/checkout-submit.latte
@@ -0,0 +1,27 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checkout-submit.json
+    The end of the checkout form: the consent checkbox, the submit button and the legal line.
+    Props (p): id, consent, submit, legal. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_consent = ($p['consent'] ?? null)}
+{var $v_submit = ($p['submit'] ?? null)}
+{var $v_legal = ($p['legal'] ?? null)}
+{capture $c_5}
+  {capture $c_2}
+    {=ui_include('ui/checkbox/checkbox.latte', ['p' => ['Name' => 'consent', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-consent', [$v_id])])]])|noescape}
+    {capture $c_1}
+      {=ui_text($v_consent)}
+    {/capture}
+    {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-consent', [$v_id])), 'Class' => 'text-sm'], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['w-fit', '']))], 'children' => $c_2])|noescape}
+  {capture $c_3}
+    {=ui_text($v_submit)}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'lg', 'Type' => 'submit', 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_3])|noescape}
+  {capture $c_4}
+    {=ui_text($v_legal)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'start'], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/code-window.latte b/packages/latte/ui/blocks/code-window.latte
new file mode 100644
index 0000000..24329ac
--- /dev/null
+++ b/packages/latte/ui/blocks/code-window.latte
@@ -0,0 +1,35 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/code-window.json
+    A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).
+    Props (p): title, prompt, lines, className. *}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_prompt = ($p['prompt'] ?? null)}
+{var $v_lines = ($p['lines'] ?? null)}
+{capture $c_7}
+  {capture $c_2}
+    {capture $c_1}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex items-center border-b border-border px-4 py-2'], 'children' => $c_2])|noescape}
+  {capture $c_6}
+    {foreach ui_l($v_lines) as $v_line}
+      {capture $c_5}
+        {if ui_t(ui_eq(ui_get($v_line, ['kind']), 'command'))}
+          {capture $c_3}
+            {=ui_text($v_prompt)}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'select-none text-muted-foreground'], 'children' => $c_3])|noescape}
+        {/if}
+        {capture $c_4}
+          {=ui_text(ui_get($v_line, ['text']))}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex gap-2', (ui_t(ui_eq(ui_get($v_line, ['kind']), 'command')) ? 'text-foreground' : 'text-muted-foreground')])), 'Attrs' => ui_attrs(['data-kind', ui_get($v_line, ['kind'])])], 'children' => $c_5])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-4 font-mono text-sm'], 'children' => $c_6])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'group', 'aria-label', $v_title, 'data-slot', 'code-window'])], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/compare-mark.latte b/packages/latte/ui/blocks/compare-mark.latte
new file mode 100644
index 0000000..fdb5a90
--- /dev/null
+++ b/packages/latte/ui/blocks/compare-mark.latte
@@ -0,0 +1,33 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/compare-mark.json
+    One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen readers), any other value is shown as text.
+    Props (p): value, yes, no. *}
+{var $v_value = ($p['value'] ?? null)}
+{var $v_yes = ($p['yes'] ?? null)}
+{var $v_no = ($p['no'] ?? null)}
+{if ui_t(ui_eq($v_value, 'yes'))}
+  {capture $c_2}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'check', 'Size' => 16, 'Class' => 'text-foreground']])|noescape}
+    {capture $c_1}
+      {=ui_text($v_yes)}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'inline-flex items-center gap-2', 'Attrs' => ui_attrs(['data-mark', 'yes'])], 'children' => $c_2])|noescape}
+{/if}
+{if ui_t(ui_eq($v_value, 'no'))}
+  {capture $c_4}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'minus', 'Size' => 16]])|noescape}
+    {capture $c_3}
+      {=ui_text($v_no)}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_3])|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'inline-flex items-center gap-2 text-muted-foreground', 'Attrs' => ui_attrs(['data-mark', 'no'])], 'children' => $c_4])|noescape}
+{/if}
+{if ui_t(ui_and([!(ui_eq($v_value, 'yes')), !(ui_eq($v_value, 'no'))]))}
+  {capture $c_5}
+    {=ui_text($v_value)}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_5])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/comparison-table.latte b/packages/latte/ui/blocks/comparison-table.latte
new file mode 100644
index 0000000..5c351c9
--- /dev/null
+++ b/packages/latte/ui/blocks/comparison-table.latte
@@ -0,0 +1,76 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/comparison-table.json
+    Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle column), tone, density.
+    Props (p): id, title, rows, empty, labels, highlight, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_rows = ($p['rows'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_highlight = ($p['highlight'] ?? 'none')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_16}
+  {if ui_t(ui_eq(ui_len($v_rows), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'table', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_15}
+      {capture $c_14}
+        {capture $c_1}
+          {=ui_text(ui_get($v_labels, ['caption']))}
+        {/capture}
+        {=ui_include('ui/table/table-caption.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_1])|noescape}
+        {capture $c_7}
+          {capture $c_6}
+            {capture $c_2}
+              {=ui_text(ui_get($v_labels, ['feature']))}
+            {/capture}
+            {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-4'], 'children' => $c_2])|noescape}
+            {capture $c_3}
+              {=ui_text(ui_get($v_labels, ['a']))}
+            {/capture}
+            {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-4'], 'children' => $c_3])|noescape}
+            {capture $c_4}
+              {=ui_text(ui_get($v_labels, ['b']))}
+            {/capture}
+            {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => ui_s(ui_cnv(['py-4', (ui_t(ui_eq($v_highlight, 'middle')) ? 'bg-muted' : '')])), 'Attrs' => ui_attrs(['data-highlight', (ui_t(ui_eq($v_highlight, 'middle')) ? 'true' : 'false')])], 'children' => $c_4])|noescape}
+            {capture $c_5}
+              {=ui_text(ui_get($v_labels, ['c']))}
+            {/capture}
+            {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-4'], 'children' => $c_5])|noescape}
+          {/capture}
+          {=ui_include('ui/table/table-row.latte', ['p' => [], 'children' => $c_6])|noescape}
+        {/capture}
+        {=ui_include('ui/table/table-head.latte', ['p' => [], 'children' => $c_7])|noescape}
+        {capture $c_13}
+          {foreach ui_l($v_rows) as $v_row}
+            {capture $c_12}
+              {capture $c_8}
+                {=ui_text(ui_get($v_row, ['label']))}
+              {/capture}
+              {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'row', 'Class' => ui_s(ui_cnv(['font-medium', (ui_t(ui_eq($v_density, 'compact')) ? 'py-2' : 'py-4')]))], 'children' => $c_8])|noescape}
+              {capture $c_9}
+                {=ui_include('blocks/compare-mark.latte', ['p' => ['value' => ui_get($v_row, ['a']), 'yes' => ui_get($v_labels, ['yes']), 'no' => ui_get($v_labels, ['no'])]])|noescape}
+              {/capture}
+              {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => ui_s(ui_cnv([(ui_t(ui_eq($v_density, 'compact')) ? 'py-2' : 'py-4')]))], 'children' => $c_9])|noescape}
+              {capture $c_10}
+                {=ui_include('blocks/compare-mark.latte', ['p' => ['value' => ui_get($v_row, ['b']), 'yes' => ui_get($v_labels, ['yes']), 'no' => ui_get($v_labels, ['no'])]])|noescape}
+              {/capture}
+              {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => ui_s(ui_cnv([(ui_t(ui_eq($v_density, 'compact')) ? 'py-2' : 'py-4'), (ui_t(ui_eq($v_highlight, 'middle')) ? 'bg-muted font-semibold' : '')]))], 'children' => $c_10])|noescape}
+              {capture $c_11}
+                {=ui_include('blocks/compare-mark.latte', ['p' => ['value' => ui_get($v_row, ['c']), 'yes' => ui_get($v_labels, ['yes']), 'no' => ui_get($v_labels, ['no'])]])|noescape}
+              {/capture}
+              {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_density, 'compact')) ? 'py-2' : 'py-4'))], 'children' => $c_11])|noescape}
+            {/capture}
+            {=ui_include('ui/table/table-row.latte', ['p' => ['Class' => 'border-t border-border', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_12])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/table/table-body.latte', ['p' => [], 'children' => $c_13])|noescape}
+      {/capture}
+      {=ui_include('ui/table/table.latte', ['p' => ['Class' => 'w-full text-left text-sm', 'Attrs' => ui_attrs(['data-testid', 'compare'])], 'children' => $c_14])|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'relative w-full overflow-x-auto'], 'children' => $c_15])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_16])|noescape}
diff --git a/packages/latte/ui/blocks/contact-form.latte b/packages/latte/ui/blocks/contact-form.latte
new file mode 100644
index 0000000..835ff79
--- /dev/null
+++ b/packages/latte/ui/blocks/contact-form.latte
@@ -0,0 +1,81 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/contact-form.json
+    A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone (default, muted).
+    Props (p): id, title, text, labels, details, layout, fields, terms, level, page, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_details = ($p['details'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'single')}
+{var $v_fields = ($p['fields'] ?? 'full')}
+{var $v_terms = ($p['terms'] ?? 'hide')}
+{var $v_level = ($p['level'] ?? 2)}
+{var $v_page = ($p['page'] ?? 'section')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_15}
+  {capture $c_14}
+    {capture $c_8}
+      {if ui_t(ui_eq($v_fields, 'full'))}
+        {capture $c_1}
+          {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'name', 'Autocomplete' => 'name', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-name', [$v_id]), 'data-testid', 'field'])]])|noescape}
+        {/capture}
+        {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['name']), 'htmlFor' => ui_tpl('{0}-name', [$v_id])], 'children' => $c_1])|noescape}
+      {/if}
+      {capture $c_2}
+        {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'email', 'Name' => 'email', 'Autocomplete' => 'email', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-email', [$v_id]), 'data-testid', 'field'])]])|noescape}
+      {/capture}
+      {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['email']), 'htmlFor' => ui_tpl('{0}-email', [$v_id])], 'children' => $c_2])|noescape}
+      {if ui_t(ui_eq($v_fields, 'full'))}
+        {capture $c_3}
+          {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'subject', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-subject', [$v_id]), 'data-testid', 'field'])]])|noescape}
+        {/capture}
+        {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['subject']), 'htmlFor' => ui_tpl('{0}-subject', [$v_id])], 'children' => $c_3])|noescape}
+      {/if}
+      {capture $c_4}
+        {=ui_include('ui/textarea/textarea.latte', ['p' => ['Rows' => 4, 'Name' => 'message', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-message', [$v_id]), 'data-testid', 'field'])]])|noescape}
+      {/capture}
+      {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['message']), 'htmlFor' => ui_tpl('{0}-message', [$v_id])], 'children' => $c_4])|noescape}
+      {if ui_t(ui_eq($v_terms, 'show'))}
+        {capture $c_6}
+          {=ui_include('ui/checkbox/checkbox.latte', ['p' => ['Name' => 'consent', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-consent', [$v_id])])]])|noescape}
+          {capture $c_5}
+            {=ui_text(ui_get($v_labels, ['consent']))}
+          {/capture}
+          {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-consent', [$v_id])), 'Class' => 'text-sm'], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['w-fit', '']))], 'children' => $c_6])|noescape}
+      {/if}
+      {capture $c_7}
+        {=ui_text(ui_get($v_labels, ['submit']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'submit', 'Class' => 'w-fit', 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_7])|noescape}
+    {/capture}
+    {=ui_include('ui/form/form.latte', ['p' => ['Method' => 'dialog', 'Class' => 'w-full gap-4', 'Attrs' => ui_attrs(['data-testid', 'contact-form'])], 'children' => $c_8])|noescape}
+    {if ui_t(ui_and([ui_eq($v_layout, 'split'), ui_gt(ui_len($v_details), 0)]))}
+      {capture $c_13}
+        {foreach ui_l($v_details) as $v_d}
+          {capture $c_12}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_d, ['icon'])), 'Size' => 20]])|noescape}
+            {capture $c_11}
+              {capture $c_9}
+                {=ui_text(ui_get($v_d, ['title']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_9])|noescape}
+              {capture $c_10}
+                {=ui_text(ui_get($v_d, ['text']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_10])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_11])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Attrs' => ui_attrs(['data-testid', 'detail'])], 'children' => $c_12])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Attrs' => ui_attrs(['data-testid', 'details'])], 'children' => $c_13])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? '1-2' : '1')), 'Class' => 'items-start gap-8'], 'children' => $c_14])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_text, 'heading' => ['level' => $v_level], 'tone' => $v_tone, 'density' => (ui_t(ui_eq($v_page, 'full')) ? 'roomy' : 'default'), 'align' => (ui_t(ui_eq($v_page, 'full')) ? 'center' : 'start'), 'measure' => (ui_t(ui_eq($v_layout, 'single')) ? 'xl' : 'default'), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_15])|noescape}
diff --git a/packages/latte/ui/blocks/cookie-banner.latte b/packages/latte/ui/blocks/cookie-banner.latte
new file mode 100644
index 0000000..3cd23de
--- /dev/null
+++ b/packages/latte/ui/blocks/cookie-banner.latte
@@ -0,0 +1,55 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cookie-banner.json
+    A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings. Axes: layout (bar, card), actions (two, three), tone (default, muted).
+    Props (p): id, title, text, accept, decline, settings, layout, actions, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_accept = ($p['accept'] ?? null)}
+{var $v_decline = ($p['decline'] ?? null)}
+{var $v_settings = ($p['settings'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'bar')}
+{var $v_actions = ($p['actions'] ?? 'two')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_11}
+  {capture $c_10}
+    {capture $c_9}
+      {capture $c_4}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'cookie', 'Size' => 24]])|noescape}
+        {capture $c_3}
+          {capture $c_1}
+            {=ui_text($v_title)}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => 'base', 'Weight' => 'bold', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-title', [$v_id])])], 'children' => $c_1])|noescape}
+          {capture $c_2}
+            {=ui_text($v_text)}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_3])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Class' => 'min-w-0'], 'children' => $c_4])|noescape}
+      {capture $c_8}
+        {if ui_t(ui_and([ui_eq($v_actions, 'three'), $v_settings]))}
+          {capture $c_5}
+            {=ui_text($v_settings)}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Type' => 'button', 'Attrs' => ui_attrs(['data-testid', 'cookie-settings'])], 'children' => $c_5])|noescape}
+        {/if}
+        {capture $c_6}
+          {=ui_text($v_decline)}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Type' => 'button', 'Attrs' => ui_attrs(['data-testid', 'cookie-decline'])], 'children' => $c_6])|noescape}
+        {capture $c_7}
+          {=ui_text($v_accept)}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'sm', 'Type' => 'button', 'Attrs' => ui_attrs(['data-testid', 'cookie-accept'])], 'children' => $c_7])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Class' => 'shrink-0 flex-wrap'], 'children' => $c_8])|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border', (ui_t(ui_eq($v_tone, 'muted')) ? 'bg-muted' : 'bg-card'), (ui_t(ui_eq($v_layout, 'bar')) ? 'md:flex-row md:items-center md:justify-between' : 'mx-auto w-full max-w-md')]))], 'children' => $c_9])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-4'])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_10])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : ui_tpl('{0}-title', [$v_id])), 'data-testid', 'cookie', 'data-layout', $v_layout, 'aria-label', $v_landmarkLabel])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/credit-packs.latte b/packages/latte/ui/blocks/credit-packs.latte
new file mode 100644
index 0000000..b818387
--- /dev/null
+++ b/packages/latte/ui/blocks/credit-packs.latte
@@ -0,0 +1,62 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/credit-packs.json
+    Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile, row), tone, density.
+    Props (p): id, title, packs, empty, badges, buy, cols, item, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_packs = ($p['packs'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_badges = ($p['badges'] ?? null)}
+{var $v_buy = ($p['buy'] ?? null)}
+{var $v_cols = ($p['cols'] ?? '4')}
+{var $v_item = ($p['item'] ?? 'tile')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_11}
+  {if ui_t(ui_eq(ui_len($v_packs), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'coins', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_10}
+      {foreach ui_l($v_packs) as $v_pack}
+        {capture $c_9}
+          {capture $c_8}
+            {capture $c_6}
+              {if ui_t(ui_or([ui_get($v_pack, ['badge']), ui_and([!(ui_eq($v_item, 'row')), ui_gt(ui_count($v_packs, 'badge'), 0)])]))}
+                {capture $c_2}
+                  {if ui_t(ui_get($v_pack, ['badge']))}
+                    {capture $c_1}
+                      {=ui_text(ui_at($v_badges, ui_get($v_pack, ['badge'])))}
+                    {/capture}
+                    {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Class' => 'w-fit shrink-0', 'Attrs' => ui_attrs(['data-testid', 'badge'])], 'children' => $c_1])|noescape}
+                  {/if}
+                {/capture}
+                {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-h-6 items-center', 'Attrs' => ui_attrs(['data-slot', 'badge-slot'])], 'children' => $c_2])|noescape}
+              {/if}
+              {capture $c_5}
+                {capture $c_3}
+                  {=ui_text(ui_get($v_pack, ['name']))}
+                {/capture}
+                {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_3])|noescape}
+                {capture $c_4}
+                  {=ui_text(ui_money(ui_get($v_pack, ['price']), ui_get($v_pack, ['currency'])))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => '2xl', 'Weight' => 'bold'], 'children' => $c_4])|noescape}
+              {/capture}
+              {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'min-w-0'], 'children' => $c_5])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => ui_s(ui_cnv(['min-w-0', (ui_t(ui_eq($v_item, 'row')) ? 'flex-1' : '')]))], 'children' => $c_6])|noescape}
+            {capture $c_7}
+              {=ui_text($v_buy)}
+            {/capture}
+            {=ui_include('ui/button/button.latte', ['p' => ['Variant' => ui_s((ui_t(ui_eq(ui_get($v_pack, ['badge']), 'popular')) ? 'default' : 'outline')), 'Size' => 'sm', 'Type' => 'button', 'Class' => ui_s(ui_cnv(['w-fit shrink-0', (ui_t(ui_eq($v_item, 'row')) ? '' : 'mt-auto')])), 'Attrs' => ui_attrs(['data-testid', 'buy'])], 'children' => $c_7])|noescape}
+          {/capture}
+          {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex h-full gap-4', (ui_t(ui_eq($v_item, 'row')) ? 'flex-row flex-wrap items-center justify-between' : 'flex-col')]))], 'children' => $c_8])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'default', 'Class' => ui_s(ui_cnv(['h-full', (ui_t(ui_eq($v_item, 'row')) ? 'gap-4 p-4' : (ui_t(ui_eq($v_density, 'compact')) ? 'gap-4 p-4' : ''))])), 'Attrs' => ui_attrs(['data-testid', 'item', 'data-badge', ui_get($v_pack, ['badge'])])], 'children' => $c_9])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_item, 'row')) ? '1' : ui_fit_cols((ui_t(ui_eq($v_cols, '2')) ? '1-2' : '1-4'), ui_len($v_packs)))), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_10])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'measure' => (ui_t(ui_eq($v_item, 'row')) ? '2xl' : 'default'), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/cta-actions.latte b/packages/latte/ui/blocks/cta-actions.latte
new file mode 100644
index 0000000..9e753fd
--- /dev/null
+++ b/packages/latte/ui/blocks/cta-actions.latte
@@ -0,0 +1,26 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-actions.json
+    The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions form).
+    Props (p): id, actions, center. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_center = ($p['center'] ?? false)}
+{if ui_t(ui_eq(ui_get($v_actions, ['mode']), 'form'))}
+  {capture $c_4}
+    {capture $c_1}
+      {=ui_text(ui_get($v_actions, ['emailLabel']))}
+    {/capture}
+    {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-email', [$v_id])), 'Class' => 'sr-only'], 'children' => $c_1])|noescape}
+    {capture $c_3}
+      {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'email', 'Name' => 'email', 'Class' => 'min-w-0 flex-1', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-email', [$v_id]), 'data-testid', 'field'])]])|noescape}
+      {capture $c_2}
+        {=ui_text(ui_get($v_actions, ['cta']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'submit', 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => 'w-full flex-wrap'], 'children' => $c_3])|noescape}
+  {/capture}
+  {=ui_include('ui/form/form.latte', ['p' => ['Method' => 'dialog', 'Class' => ui_s(ui_cnv(['w-full max-w-md', (ui_t($v_center) ? 'mx-auto' : '')])), 'Attrs' => ui_attrs(['data-testid', 'email-form'])], 'children' => $c_4])|noescape}
+{else}
+  {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref']), 'align' => (ui_t($v_center) ? 'center' : 'start')]])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/cta-band.latte b/packages/latte/ui/blocks/cta-band.latte
new file mode 100644
index 0000000..6316aa3
--- /dev/null
+++ b/packages/latte/ui/blocks/cta-band.latte
@@ -0,0 +1,57 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-band.json
+    A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof (none, quote), density.
+    Props (p): id, title, text, actions, quote, layout, tone, proof, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_quote = ($p['quote'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'card')}
+{var $v_tone = ($p['tone'] ?? 'muted')}
+{var $v_proof = ($p['proof'] ?? 'none')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_center = ui_or([ui_eq($v_layout, 'band'), ui_eq($v_layout, 'banner')])}
+{if ui_t(ui_eq($v_layout, 'banner'))}
+  {=ui_include('blocks/cta-banner.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'text' => $v_text, 'cta' => ui_get($v_actions, ['cta']), 'href' => ui_get($v_actions, ['href']), 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+{elseif ui_t(ui_eq($v_layout, 'row'))}
+  {capture $c_7}
+    {capture $c_6}
+      {capture $c_5}
+        {capture $c_4}
+          {capture $c_3}
+            {capture $c_1}
+              {=ui_text($v_title)}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => '2xl', 'Weight' => 'bold', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-title', [$v_id])])], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text($v_text)}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'min-w-0'], 'children' => $c_3])|noescape}
+          {if ui_t(ui_eq($v_proof, 'quote'))}
+            {=ui_include('blocks/quote-proof.latte', ['p' => ['quote' => ui_get($v_quote, ['text']), 'quoteBy' => ui_get($v_quote, ['by']), 'center' => $v_center]])|noescape}
+          {/if}
+          {=ui_include('blocks/cta-actions.latte', ['p' => ['id' => $v_id, 'actions' => $v_actions, 'center' => $v_center]])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => 'flex flex-col gap-4 md:flex-row md:items-center md:justify-between'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'muted'], 'children' => $c_5])|noescape}
+    {/capture}
+    {=ui_include('ui/container/container.latte', ['p' => ['Class' => 'mx-auto w-full max-w-6xl px-4', 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_6])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => 'py-8', 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : ui_tpl('{0}-title', [$v_id])), 'data-testid', 'section', 'data-tone', $v_tone, 'data-density', $v_density, 'aria-label', $v_landmarkLabel])], 'children' => $c_7])|noescape}
+{else}
+  {capture $f_8}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+  {/capture}
+  {capture $c_9}
+    {if ui_t(ui_eq($v_proof, 'quote'))}
+      {=ui_include('blocks/quote-proof.latte', ['p' => ['quote' => ui_get($v_quote, ['text']), 'quoteBy' => ui_get($v_quote, ['by']), 'center' => $v_center]])|noescape}
+    {/if}
+    {=ui_include('blocks/cta-actions.latte', ['p' => ['id' => $v_id, 'actions' => $v_actions, 'center' => $v_center]])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_text, 'layout' => (ui_t(ui_eq($v_layout, 'split')) ? 'split' : 'stack'), 'align' => (ui_t($v_center) ? 'center' : 'start'), 'boxed' => ui_eq($v_layout, 'card'), 'media' => ['show' => ui_eq($v_layout, 'split')], 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_8], 'children' => $c_9])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/cta-banner.latte b/packages/latte/ui/blocks/cta-banner.latte
new file mode 100644
index 0000000..bcced90
--- /dev/null
+++ b/packages/latte/ui/blocks/cta-banner.latte
@@ -0,0 +1,29 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-banner.json
+    A centered closing card: heading, one sentence and a pill button. Sizes from the default preset.
+    Props (p): id, title, text, cta, href, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_cta = ($p['cta'] ?? null)}
+{var $v_href = ($p['href'] ?? null)}
+{var $v_tone = ($p['tone'] ?? 'muted')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_5}
+  {capture $c_4}
+    {capture $c_1}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => '3xl', 'Weight' => 'semibold', 'Class' => ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['cta', 'title']), 'leading-9'])), 'Attrs' => ui_attrs(['id', ui_tpl('{0}-title', [$v_id])])], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_text($v_text)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'semibold', 'Class' => ui_s(ui_cnv(['leading-5 text-muted-foreground', ui_preset('blocks/presets/defaults.json', ['cta', 'text'])]))], 'children' => $c_2])|noescape}
+    {capture $c_3}
+      {=ui_text($v_cta)}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'lg', 'Href' => ui_s($v_href), 'Class' => ui_s(ui_preset('blocks/presets/defaults.json', ['cta', 'button'])), 'Attrs' => ui_attrs(['data-testid', 'action-primary'])], 'children' => $c_3])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex w-full flex-col items-center gap-10 bg-muted px-6 text-center', ui_preset('blocks/presets/defaults.json', ['cta', 'panel'])])), 'Attrs' => ui_attrs(['data-testid', 'cta-banner'])], 'children' => $c_4])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => 'w-full py-0', 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : ui_tpl('{0}-title', [$v_id])), 'data-testid', 'section', 'data-tone', $v_tone, 'data-density', 'compact', 'aria-label', $v_landmarkLabel])], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/cta-proof-items.latte b/packages/latte/ui/blocks/cta-proof-items.latte
new file mode 100644
index 0000000..6aa31d6
--- /dev/null
+++ b/packages/latte/ui/blocks/cta-proof-items.latte
@@ -0,0 +1,125 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-proof-items.json
+    The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).
+    Props (p): content, proof, center. *}
+{var $v_content = ($p['content'] ?? null)}
+{var $v_proof = ($p['proof'] ?? 'stats')}
+{var $v_center = ($p['center'] ?? false)}
+{if ui_t(ui_and([ui_eq($v_proof, 'logos'), ui_gt(ui_len(ui_get($v_content, ['logos'])), 0)]))}
+  {capture $c_3}
+    {foreach ui_l(ui_get($v_content, ['logos'])) as $v_l}
+      {capture $c_2}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_l, ['icon'])), 'Size' => 20]])|noescape}
+        {capture $c_1}
+          {=ui_text(ui_get($v_l, ['name']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Justify' => 'center', 'Class' => 'text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'cta-item'])], 'children' => $c_2])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6', 'Attrs' => ui_attrs(['data-testid', 'cta-proof'])], 'children' => $c_3])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_proof, 'features'), ui_gt(ui_len(ui_get($v_content, ['features'])), 0)]))}
+  {capture $c_9}
+    {foreach ui_l(ui_get($v_content, ['features'])) as $v_f}
+      {capture $c_8}
+        {capture $c_4}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 20]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_4])|noescape}
+        {capture $c_7}
+          {capture $c_5}
+            {=ui_text(ui_get($v_f, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_5])|noescape}
+          {capture $c_6}
+            {=ui_text(ui_get($v_f, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_7])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'cta-item'])], 'children' => $c_8])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 gap-4 text-left sm:grid-cols-2', 'Attrs' => ui_attrs(['data-testid', 'cta-proof'])], 'children' => $c_9])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_proof, 'stats'), ui_gt(ui_len(ui_get($v_content, ['stats'])), 0)]))}
+  {capture $c_13}
+    {foreach ui_l(ui_get($v_content, ['stats'])) as $v_s}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 3))}
+        {capture $c_12}
+          {capture $c_10}
+            {=ui_text(ui_get($v_s, ['value']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => '3xl', 'Weight' => 'bold'], 'children' => $c_10])|noescape}
+          {capture $c_11}
+            {=ui_text(ui_get($v_s, ['label']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_11])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => ui_s((ui_t($v_center) ? 'items-center text-center' : '')), 'Attrs' => ui_attrs(['data-testid', 'cta-item'])], 'children' => $c_12])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-3 gap-4', 'Attrs' => ui_attrs(['data-testid', 'cta-proof'])], 'children' => $c_13])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_proof, 'rows'), ui_gt(ui_len(ui_get($v_content, ['features'])), 0)]))}
+  {capture $c_19}
+    {foreach ui_l(ui_get($v_content, ['features'])) as $v_f}
+      {capture $c_18}
+        {capture $c_14}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 20]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_14])|noescape}
+        {capture $c_17}
+          {capture $c_15}
+            {=ui_text(ui_get($v_f, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_15])|noescape}
+          {capture $c_16}
+            {=ui_text(ui_get($v_f, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_16])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_17])|noescape}
+      {/capture}
+      {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-start gap-4', 'Attrs' => ui_attrs(['data-testid', 'cta-item'])], 'children' => $c_18])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-4 p-0', 'Attrs' => ui_attrs(['data-testid', 'cta-proof'])], 'children' => $c_19])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_proof, 'zones'), ui_gt(ui_len(ui_get($v_content, ['zones'])), 0)]))}
+  {capture $c_27}
+    {foreach ui_l(ui_get($v_content, ['zones'])) as $v_z}
+      {capture $c_26}
+        {capture $c_22}
+          {capture $c_20}
+            {=ui_text(ui_get($v_z, ['name']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_20])|noescape}
+          {capture $c_21}
+            {=ui_text(ui_get($v_z, ['area']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_21])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'min-w-0'], 'children' => $c_22])|noescape}
+        {capture $c_25}
+          {capture $c_23}
+            {=ui_text(ui_money(ui_get($v_z, ['price']), ui_get($v_z, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_23])|noescape}
+          {capture $c_24}
+            {=ui_text(ui_get($v_z, ['time']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_24])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'shrink-0 text-right'], 'children' => $c_25])|noescape}
+      {/capture}
+      {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-start justify-between gap-4 border-b border-border py-4', 'Attrs' => ui_attrs(['data-testid', 'cta-item'])], 'children' => $c_26])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col p-0', 'Attrs' => ui_attrs(['data-testid', 'cta-proof'])], 'children' => $c_27])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/cta-proof.latte b/packages/latte/ui/blocks/cta-proof.latte
new file mode 100644
index 0000000..1672764
--- /dev/null
+++ b/packages/latte/ui/blocks/cta-proof.latte
@@ -0,0 +1,30 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-proof.json
+    A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note. Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos, features, stats, rows, zones), mediaSide, tone.
+    Props (p): id, title, lead, badge, actions, content, note, layout, proof, mediaSide, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_content = ($p['content'] ?? null)}
+{var $v_note = ($p['note'] ?? '')}
+{var $v_layout = ($p['layout'] ?? 'center')}
+{var $v_proof = ($p['proof'] ?? 'stats')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_2}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+{/capture}
+{capture $c_3}
+  {=ui_include('blocks/cta-proof-items.latte', ['p' => ['content' => $v_content, 'proof' => $v_proof, 'center' => ui_eq($v_layout, 'center')]])|noescape}
+  {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref']), 'align' => (ui_t(ui_eq($v_layout, 'center')) ? 'center' : 'start')]])|noescape}
+  {if ui_t($v_note)}
+    {capture $c_1}
+      {=ui_text($v_note)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'cta-note'])], 'children' => $c_1])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'align' => (ui_t(ui_eq($v_layout, 'center')) ? 'center' : 'start'), 'layout' => (ui_t(ui_eq($v_layout, 'center')) ? 'stack' : 'split'), 'media' => ['show' => ui_eq($v_layout, 'split'), 'side' => $v_mediaSide], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_2], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/dashboard-overview.latte b/packages/latte/ui/blocks/dashboard-overview.latte
new file mode 100644
index 0000000..58aab7f
--- /dev/null
+++ b/packages/latte/ui/blocks/dashboard-overview.latte
@@ -0,0 +1,46 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/dashboard-overview.json
+    The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the activity side by side, stacked: one below the other), cols (2, 4), tone, density.
+    Props (p): id, title, metrics, chart, activity, layout, cols, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_metrics = ($p['metrics'] ?? null)}
+{var $v_chart = ($p['chart'] ?? null)}
+{var $v_activity = ($p['activity'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'split')}
+{var $v_cols = ($p['cols'] ?? '4')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_7}
+  {capture $c_6}
+    {if ui_t(ui_gt(ui_len($v_metrics), 0))}
+      {capture $c_2}
+        {foreach ui_l($v_metrics) as $v_m}
+          {capture $c_1}
+            {=ui_include('blocks/stat-tile.latte', ['p' => ['label' => ui_get($v_m, ['label']), 'value' => ui_get($v_m, ['value']), 'icon' => ui_get($v_m, ['icon']), 'hint' => ui_get($v_m, ['hint'])]])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_1])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_cols, '2')) ? '1-2' : '1-4')), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_2])|noescape}
+    {/if}
+    {capture $c_5}
+      {if ui_t(ui_gt(ui_len(ui_get($v_chart, ['series'])), 0))}
+        {capture $c_3}
+          {=ui_include('blocks/bar-chart.latte', ['p' => ['bars' => ui_get($v_chart, ['series']), 'label' => ui_get($v_chart, ['summary']), 'height' => 144]])|noescape}
+        {/capture}
+        {=ui_include('blocks/panel.latte', ['p' => ['title' => ui_get($v_chart, ['title']), 'description' => ui_get($v_chart, ['text']), 'id' => ui_tpl('{0}-chart', [$v_id]), 'className' => ui_cnv(['h-full'])], 'children' => $c_3])|noescape}
+      {/if}
+      {if ui_t(ui_gt(ui_len(ui_get($v_activity, ['events'])), 0))}
+        {capture $c_4}
+          {=ui_include('blocks/timeline.latte', ['p' => ['items' => ui_get($v_activity, ['events'])]])|noescape}
+        {/capture}
+        {=ui_include('blocks/panel.latte', ['p' => ['title' => ui_get($v_activity, ['title']), 'description' => ui_get($v_activity, ['text']), 'id' => ui_tpl('{0}-feed', [$v_id]), 'className' => ui_cnv(['h-full'])], 'children' => $c_4])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? '1-2' : '1')), 'Class' => 'items-stretch gap-4', 'Attrs' => ui_attrs(['data-testid', 'panels'])], 'children' => $c_5])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch'], 'children' => $c_6])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/dashboard-shell.latte b/packages/latte/ui/blocks/dashboard-shell.latte
new file mode 100644
index 0000000..e52e67b
--- /dev/null
+++ b/packages/latte/ui/blocks/dashboard-shell.latte
@@ -0,0 +1,48 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/dashboard-shell.json
+    The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset: over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide, rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.
+    Props (p): id, title, level, nav, topbar, search, sidebar, side, footer, content, frame, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_level = ($p['level'] ?? 2)}
+{var $v_nav = ($p['nav'] ?? null)}
+{var $v_topbar = ($p['topbar'] ?? 'full')}
+{var $v_search = ($p['search'] ?? 'show')}
+{var $v_sidebar = ($p['sidebar'] ?? 'wide')}
+{var $v_side = ($p['side'] ?? 'start')}
+{var $v_footer = ($p['footer'] ?? 'none')}
+{var $v_content = ($p['content'] ?? 'grid')}
+{var $v_frame = ($p['frame'] ?? 'window')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_titleId = ui_tpl('{0}-title', [$v_id])}
+{capture $c_5}
+  {capture $c_4}
+    {capture $c_3}
+      {if ui_t(ui_eq($v_topbar, 'full'))}
+        {=ui_include('blocks/shell-topbar.latte', ['p' => ['nav' => $v_nav, 'links' => (ui_t(ui_eq($v_sidebar, 'none')) ? 'show' : 'hide'), 'search' => $v_search, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+      {/if}
+      {capture $c_2}
+        {if ui_t(!(ui_eq($v_sidebar, 'none')))}
+          {=ui_include('blocks/shell-sidebar.latte', ['p' => ['nav' => $v_nav, 'mode' => $v_sidebar, 'side' => $v_side, 'brand' => (ui_t(ui_eq($v_topbar, 'full')) ? 'hide' : 'show'), 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+        {/if}
+        {capture $c_1}
+          {if ui_t(ui_eq($v_topbar, 'inset'))}
+            {=ui_include('blocks/shell-topbar.latte', ['p' => ['nav' => $v_nav, 'brand' => (ui_t(ui_eq($v_sidebar, 'none')) ? 'show' : 'hide'), 'links' => (ui_t(ui_eq($v_sidebar, 'none')) ? 'show' : 'hide'), 'search' => $v_search, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+          {/if}
+          {=ui_include('blocks/shell-content.latte', ['p' => ['title' => $v_title, 'titleId' => $v_titleId, 'level' => $v_level, 'content' => $v_content]])|noescape}
+          {if ui_t(ui_eq($v_footer, 'inset'))}
+            {=ui_include('blocks/shell-footer.latte', ['p' => ['nav' => $v_nav, 'place' => 'inset', 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-w-0 flex-1 flex-col'], 'children' => $c_1])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex min-h-0 flex-1', (ui_t(ui_eq($v_side, 'end')) ? 'flex-row-reverse' : '')]))], 'children' => $c_2])|noescape}
+      {if ui_t(ui_eq($v_footer, 'full'))}
+        {=ui_include('blocks/shell-footer.latte', ['p' => ['nav' => $v_nav, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col overflow-hidden bg-background', (ui_t(ui_eq($v_frame, 'window')) ? 'min-h-160 rounded border border-border' : 'min-h-screen')])), 'Attrs' => ui_attrs(['data-testid', 'window'])], 'children' => $c_3])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_frame, 'window')) ? 'mx-auto w-full max-w-6xl px-4' : ''))], 'children' => $c_4])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => ui_s((ui_t(ui_eq($v_frame, 'window')) ? 'bg-background py-12' : 'bg-background')), 'Attrs' => ui_attrs(['id', $v_id, 'aria-labelledby', (ui_t($v_landmarkLabel) ? null : $v_titleId), 'data-testid', 'dashboard-shell', 'data-topbar', $v_topbar, 'data-sidebar', $v_sidebar, 'data-footer', $v_footer, 'aria-label', $v_landmarkLabel])], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/delivery-info.latte b/packages/latte/ui/blocks/delivery-info.latte
new file mode 100644
index 0000000..8152c2b
--- /dev/null
+++ b/packages/latte/ui/blocks/delivery-info.latte
@@ -0,0 +1,81 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/delivery-info.json
+    How delivery works: the facts as icon cards, then the zones with their time and the order that ships free. Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones), tone, density.
+    Props (p): id, title, lead, facts, zones, labels, layout, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_facts = ($p['facts'] ?? null)}
+{var $v_zones = ($p['zones'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'full')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_17}
+  {capture $c_16}
+    {if ui_t(ui_gt(ui_len($v_facts), 0))}
+      {capture $c_6}
+        {foreach ui_l($v_facts) as $v_f}
+          {capture $c_5}
+            {capture $c_1}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 20]])|noescape}
+            {/capture}
+            {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_1])|noescape}
+            {capture $c_4}
+              {capture $c_2}
+                {=ui_text(ui_get($v_f, ['title']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+              {capture $c_3}
+                {=ui_text(ui_get($v_f, ['text']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs' => ui_attrs(['data-testid', 'fact'])], 'children' => $c_5])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? '1-2' : '1-4')), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'facts'])], 'children' => $c_6])|noescape}
+    {/if}
+    {if ui_t(ui_and([!(ui_eq($v_layout, 'facts')), ui_gt(ui_len($v_zones), 0)]))}
+      {capture $c_15}
+        {capture $c_7}
+          {=ui_text(ui_get($v_labels, ['zones']))}
+        {/capture}
+        {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'lg', 'Weight' => 'bold'], 'children' => $c_7])|noescape}
+        {capture $c_14}
+          {foreach ui_l($v_zones) as $v_z}
+            {capture $c_13}
+              {capture $c_10}
+                {capture $c_8}
+                  {=ui_text(ui_get($v_z, ['name']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_8])|noescape}
+                {capture $c_9}
+                  {=ui_text(ui_get($v_z, ['time']))}
+                {/capture}
+                {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'default'], 'children' => $c_9])|noescape}
+              {/capture}
+              {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'baseline', 'Justify' => 'between'], 'children' => $c_10])|noescape}
+              {capture $c_11}
+                {=ui_text(ui_get($v_z, ['area']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_11])|noescape}
+              {capture $c_12}
+                {=ui_text(ui_tpl(ui_get($v_labels, ['freeFrom']), [ui_money(ui_get($v_z, ['freeFrom']), ui_get($v_z, ['currency']))]))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'medium'], 'children' => $c_12])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? 'border-b border-border pb-4' : 'rounded bg-card inset-ring inset-ring-border p-6')), 'Attrs' => ui_attrs(['data-testid', 'zone'])], 'children' => $c_13])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? 'flex flex-col gap-4' : 'grid grid-cols-1 gap-4 md:grid-cols-3'))], 'children' => $c_14])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_15])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['grid grid-cols-1 gap-8', (ui_t(ui_eq($v_layout, 'split')) ? 'items-start md:grid-cols-2' : '')]))], 'children' => $c_16])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_17])|noescape}
diff --git a/packages/latte/ui/blocks/drawer-lines.latte b/packages/latte/ui/blocks/drawer-lines.latte
new file mode 100644
index 0000000..7fe59ab
--- /dev/null
+++ b/packages/latte/ui/blocks/drawer-lines.latte
@@ -0,0 +1,74 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/drawer-lines.json
+    The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal and total and the button.
+    Props (p): lines, rows, labels, drawer, media, field. *}
+{var $v_lines = ($p['lines'] ?? null)}
+{var $v_rows = ($p['rows'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_drawer = ($p['drawer'] ?? null)}
+{var $v_media = ($p['media'] ?? 'image')}
+{var $v_field = ($p['field'] ?? 'qty')}
+{capture $c_7}
+  {foreach ui_l($v_lines) as $v_line}
+    {capture $c_6}
+      {if ui_t(ui_eq($v_media, 'image'))}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_line, ['name']), 'ratio' => '1/1', 'className' => ui_cnv(['size-16 shrink-0'])]])|noescape}
+      {/if}
+      {capture $c_5}
+        {capture $c_3}
+          {capture $c_1}
+            {=ui_text(ui_get($v_line, ['name']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_money(ui_mul(ui_get($v_line, ['price']), ui_get($v_line, ['qty'])), ui_get($v_line, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-sm font-medium'], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Justify' => 'between', 'Align' => 'start'], 'children' => $c_3])|noescape}
+        {capture $c_4}
+          {=ui_text(ui_get($v_line, ['variant']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+        {=ui_include('blocks/number-field.latte', ['p' => ['value' => ui_str(ui_get($v_line, ['qty'])), 'name' => ui_tpl('{0}-{1}', [$v_field, ui_get($v_line, ['id'])]), 'min' => '1', 'label' => ui_get($v_labels, ['qty']), 'decrease' => ui_get($v_labels, ['decrease']), 'increase' => ui_get($v_labels, ['increase'])]])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Class' => 'flex-1'], 'children' => $c_5])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_6])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'flex-1 p-4', 'Attrs' => ui_attrs(['data-testid', 'lines'])], 'children' => $c_7])|noescape}
+{capture $c_15}
+  {capture $c_9}
+    {capture $c_8}
+      {=ui_text(ui_get($v_drawer, ['progress']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_8])|noescape}
+    {=ui_include('ui/form/progress.latte', ['p' => ['Value' => '96', 'Max' => '100', 'Attrs' => ui_attrs(['aria-label', ui_get($v_drawer, ['progress'])])]])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Class' => 'rounded bg-muted p-4', 'Attrs' => ui_attrs(['data-testid', 'progress'])], 'children' => $c_9])|noescape}
+  {capture $c_13}
+    {foreach ui_l($v_rows) as $v_row}
+      {var $v_i = $iterator->counter0}
+      {if ui_t((ui_t(ui_get($v_row, ['strong'])) ? true : ui_eq($v_i, 0)))}
+        {capture $c_12}
+          {capture $c_10}
+            {=ui_text(ui_get($v_row, ['label']))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_10])|noescape}
+          {capture $c_11}
+            {=ui_text(ui_money(ui_get($v_row, ['amount']), ui_get($v_row, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_11])|noescape}
+        {/capture}
+        {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => ui_s((ui_t(ui_get($v_row, ['strong'])) ? 'flex justify-between text-base font-bold' : 'flex justify-between text-sm text-muted-foreground'))], 'children' => $c_12])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col gap-2'], 'children' => $c_13])|noescape}
+  {capture $c_14}
+    {=ui_text(ui_get($v_labels, ['checkout']))}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'lg', 'Class' => 'w-full', 'Attrs' => ui_attrs(['data-testid', 'checkout'])], 'children' => $c_14])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'border-t border-border p-4'], 'children' => $c_15])|noescape}
diff --git a/packages/latte/ui/blocks/dropdown-item.latte b/packages/latte/ui/blocks/dropdown-item.latte
new file mode 100644
index 0000000..aeb4e11
--- /dev/null
+++ b/packages/latte/ui/blocks/dropdown-item.latte
@@ -0,0 +1,27 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/dropdown-item.json
+    A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex -1: the menu moves focus with the arrow keys.
+    Props (p): selected, className, icon (slot), right (slot); children: markup. *}
+{var $v_selected = ($p['selected'] ?? false)}
+{capture $c_5}
+  {capture $c_4}
+    {if ui_t(((($p['icon'] ?? null) !== null)))}
+      {capture $c_1}
+        {=($p['icon'] ?? '')|noescape}
+      {/capture}
+      {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex w-7 shrink-0 items-center pr-2', 'Attrs' => ui_attrs(['data-slot', 'dropdown-item-icon'])], 'children' => $c_1])|noescape}
+    {/if}
+    {capture $c_2}
+      {=($children ?? '')|noescape}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s(ui_cnv(['text-xs', 'min-w-0 flex-1 truncate px-1 font-bold'])), 'Attrs' => ui_attrs(['data-slot', 'dropdown-item-label'])], 'children' => $c_2])|noescape}
+    {if ui_t(((($p['right'] ?? null) !== null)))}
+      {capture $c_3}
+        {=($p['right'] ?? '')|noescape}
+      {/capture}
+      {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex shrink-0 items-center pr-1', 'Attrs' => ui_attrs(['data-slot', 'dropdown-item-right'])], 'children' => $c_3])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted group-data-[state=selected]:bg-muted', 'Attrs' => ui_attrs(['data-slot', 'dropdown-item-content'])], 'children' => $c_4])|noescape}
+{/capture}
+{=ui_include('ui/button-plain/button-plain.latte', ['p' => ['Type' => 'button', 'Role' => 'menuitem', 'Class' => ui_s(ui_cnv(['group flex h-9 w-full items-center px-2 text-left text-foreground', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['tabindex', -1, 'data-slot', 'dropdown-item', 'data-state', (ui_t($v_selected) ? 'selected' : 'default')])], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/editor-tab.latte b/packages/latte/ui/blocks/editor-tab.latte
new file mode 100644
index 0000000..097159d
--- /dev/null
+++ b/packages/latte/ui/blocks/editor-tab.latte
@@ -0,0 +1,23 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/editor-tab.json
+    An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close events.
+    Props (p): label, closeLabel, active, preview, className, icon (slot). *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_closeLabel = ($p['closeLabel'] ?? null)}
+{var $v_active = ($p['active'] ?? false)}
+{var $v_preview = ($p['preview'] ?? false)}
+{capture $c_4}
+  {capture $c_3}
+    {=($p['icon'] ?? '')|noescape}
+    {capture $c_1}
+      {=ui_text($v_label)}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s(ui_cnv(['text-xs text-foreground', (ui_t($v_preview) ? 'font-semibold italic' : 'font-bold')])), 'Attrs' => ui_attrs(['data-slot', 'editor-tab-label'])], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'x', 'Size' => 16]])|noescape}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'Class' => 'p-0 [&>svg]:size-4', 'AriaLabel' => ui_s($v_closeLabel), 'Attrs' => ui_attrs(['tabindex', -1, 'data-slot', 'editor-tab-close'])], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex h-10 items-center gap-2 px-3', 'Attrs' => ui_attrs(['data-slot', 'editor-tab-content'])], 'children' => $c_3])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card [&_svg]:text-muted-foreground', 'border-r border-border', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'tab', 'aria-selected', $v_active, 'tabindex', (ui_t($v_active) ? 0 : -1), 'data-slot', 'editor-tab', 'data-state', (ui_t($v_active) ? 'active' : 'default')])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/empty-panel.latte b/packages/latte/ui/blocks/empty-panel.latte
new file mode 100644
index 0000000..007666a
--- /dev/null
+++ b/packages/latte/ui/blocks/empty-panel.latte
@@ -0,0 +1,50 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/empty-panel.json
+    An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain. Axes: layout (card, plain), actions (button, none), size (default, compact).
+    Props (p): id, title, text, icon, cta, ctaHref, layout, actions, visual, size, landmarkLabel. *}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_icon = ($p['icon'] ?? 'inbox')}
+{var $v_cta = ($p['cta'] ?? null)}
+{var $v_ctaHref = ($p['ctaHref'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'card')}
+{var $v_actions = ($p['actions'] ?? 'button')}
+{var $v_visual = ($p['visual'] ?? 'icon')}
+{var $v_size = ($p['size'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_8}
+  {capture $c_7}
+    {if ui_t(ui_eq($v_visual, 'image'))}
+      {capture $c_4}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3', 'className' => ui_cnv(['w-full max-w-xs'])]])|noescape}
+        {capture $c_1}
+          {=ui_text($v_title)}
+        {/capture}
+        {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => '2xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text($v_text)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+        {if ui_t(ui_eq($v_actions, 'button'))}
+          {capture $c_3}
+            {=ui_text($v_cta)}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'sm', 'Href' => ui_s($v_ctaHref), 'Attrs' => ui_attrs(['data-testid', 'empty-action'])], 'children' => $c_3])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'mx-auto max-w-md text-center', 'Attrs' => ui_attrs(['data-testid', 'empty-visual'])], 'children' => $c_4])|noescape}
+    {else}
+      {capture $f_5}
+        {if ui_t(ui_eq($v_actions, 'button'))}
+          {capture $c_6}
+            {=ui_text($v_cta)}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'sm', 'Href' => ui_s($v_ctaHref), 'Attrs' => ui_attrs(['data-testid', 'empty-action'])], 'children' => $c_6])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => $v_icon, 'title' => $v_title, 'text' => $v_text, 'className' => ui_cnv([ui_cnv(['mx-auto max-w-xl', (ui_t(ui_eq($v_layout, 'plain')) ? 'bg-transparent inset-ring-0' : ''), (ui_t(ui_eq($v_size, 'compact')) ? 'py-6' : '')])]), 'action' => $f_5]])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', (ui_t(ui_eq($v_size, 'compact')) ? 'py-4' : 'py-8')])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_7])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_title]), 'data-testid', 'empty'])], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/empty-state.latte b/packages/latte/ui/blocks/empty-state.latte
new file mode 100644
index 0000000..e5752c4
--- /dev/null
+++ b/packages/latte/ui/blocks/empty-state.latte
@@ -0,0 +1,25 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/empty-state.json
+    Empty list or nothing found: a round icon, a title, a hint and an optional action.
+    Props (p): icon, title, text, className, action (slot). *}
+{var $v_icon = ($p['icon'] ?? 'inbox')}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{capture $c_4}
+  {capture $c_1}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s($v_icon), 'Size' => 20]])|noescape}
+  {/capture}
+  {=ui_include('ui/iconbadge/icon-badge.latte', ['p' => ['Size' => 'lg'], 'children' => $c_1])|noescape}
+  {capture $c_2}
+    {=ui_text($v_title)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-sm font-bold text-foreground'], 'children' => $c_2])|noescape}
+  {if ui_t($v_text)}
+    {capture $c_3}
+      {=ui_text($v_text)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 max-w-80 text-xs font-medium text-muted-foreground'], 'children' => $c_3])|noescape}
+  {/if}
+  {=($p['action'] ?? '')|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'status'])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/error-page.latte b/packages/latte/ui/blocks/error-page.latte
new file mode 100644
index 0000000..309031a
--- /dev/null
+++ b/packages/latte/ui/blocks/error-page.latte
@@ -0,0 +1,27 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/error-page.json
+    A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two), tone.
+    Props (p): id, title, text, status, actions, level, layout, code, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_status = ($p['status'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_layout = ($p['layout'] ?? 'centered')}
+{var $v_code = ($p['code'] ?? 'show')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_2}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+{/capture}
+{capture $c_3}
+  {if ui_t(ui_eq($v_code, 'show'))}
+    {capture $c_1}
+      {=ui_text($v_status)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => '4xl', 'Weight' => 'bold', 'Class' => ui_s(ui_cnv(['text-8xl text-muted-foreground', (ui_t(ui_eq($v_layout, 'split')) ? '' : 'text-center')])), 'Attrs' => ui_attrs(['data-testid', 'error-code'])], 'children' => $c_1])|noescape}
+  {/if}
+  {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref']), 'align' => (ui_t(ui_eq($v_layout, 'split')) ? 'start' : 'center')]])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_text, 'heading' => ['level' => $v_level], 'layout' => (ui_t(ui_eq($v_layout, 'split')) ? 'split' : 'stack'), 'media' => ['show' => ui_eq($v_layout, 'split')], 'align' => (ui_t(ui_eq($v_layout, 'split')) ? 'start' : 'center'), 'tone' => $v_tone, 'density' => 'roomy', 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_2], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/faq-cards.latte b/packages/latte/ui/blocks/faq-cards.latte
new file mode 100644
index 0000000..44e22a2
--- /dev/null
+++ b/packages/latte/ui/blocks/faq-cards.latte
@@ -0,0 +1,44 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-cards.json
+    The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).
+    Props (p): items, labels, cards. *}
+{var $v_items = ($p['items'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_cards = ($p['cards'] ?? 'grid3')}
+{capture $c_9}
+  {foreach ui_l($v_items) as $v_q}
+    {capture $c_8}
+      {if ui_t(ui_eq($v_cards, 'icons'))}
+        {capture $c_1}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_q, ['icon'])), 'Size' => 20]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_1])|noescape}
+      {/if}
+      {capture $c_5}
+        {capture $c_2}
+          {=ui_text(ui_get($v_q, ['category']))}
+        {/capture}
+        {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm', 'Class' => 'w-fit'], 'children' => $c_2])|noescape}
+        {capture $c_3}
+          {=ui_text(ui_get($v_q, ['question']))}
+        {/capture}
+        {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_3])|noescape}
+        {capture $c_4}
+          {=ui_text(ui_get($v_q, ['answer']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_5])|noescape}
+      {capture $c_7}
+        {capture $c_6}
+          {=ui_text(ui_get($v_labels, ['more']))}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'link', 'Size' => 'sm', 'Class' => 'gap-2 px-0 font-medium'], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'mt-auto'], 'children' => $c_7])|noescape}
+    {/capture}
+    {=ui_include('blocks/article-block.latte', ['p' => ['className' => ui_cnv(['rounded bg-card inset-ring inset-ring-border flex flex-col gap-4 p-6']), 'testid' => 'faq-card'], 'children' => $c_8])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_cards, 'grid4')) ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3')), 'Attrs' => ui_attrs(['data-testid', 'faq'])], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/faq-disclosures.latte b/packages/latte/ui/blocks/faq-disclosures.latte
new file mode 100644
index 0000000..cc27a8c
--- /dev/null
+++ b/packages/latte/ui/blocks/faq-disclosures.latte
@@ -0,0 +1,22 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-disclosures.json
+    The questions of FaqSplit as native disclosures, one open at a time.
+    Props (p): items, name. *}
+{var $v_items = ($p['items'] ?? null)}
+{var $v_name = ($p['name'] ?? null)}
+{capture $c_4}
+  {foreach ui_l($v_items) as $v_q}
+    {capture $c_3}
+      {capture $c_1}
+        {=ui_text(ui_get($v_q, ['question']))}
+      {/capture}
+      {=ui_include('ui/disclosure/summary.latte', ['p' => ['Variant' => 'item'], 'children' => $c_1])|noescape}
+      {capture $c_2}
+        {=ui_text(ui_get($v_q, ['answer']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'pb-4 text-muted-foreground'], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/disclosure/disclosure.latte', ['p' => ['Variant' => 'item', 'Name' => ui_s($v_name), 'Attrs' => ui_attrs(['data-testid', 'faq-item'])], 'children' => $c_3])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'faq'])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/faq-finder.latte b/packages/latte/ui/blocks/faq-finder.latte
new file mode 100644
index 0000000..dcf59c1
--- /dev/null
+++ b/packages/latte/ui/blocks/faq-finder.latte
@@ -0,0 +1,42 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-finder.json
+    The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as popular links.
+    Props (p): items, labels, topics. *}
+{var $v_items = ($p['items'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_topics = ($p['topics'] ?? null)}
+{capture $c_8}
+  {=ui_include('blocks/search-field.latte', ['p' => ['label' => ui_get($v_labels, ['search']), 'placeholder' => ui_get($v_labels, ['search']), 'value' => ui_coalesce([ui_get($v_labels, ['query']), ''])]])|noescape}
+  {capture $c_2}
+    {foreach ui_l($v_topics) as $v_t}
+      {capture $c_1}
+        {=ui_text(ui_get($v_t, ['title']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'faq-topic', 'data-value', ui_get($v_t, ['value'])])], 'children' => $c_1])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Class' => 'flex-wrap'], 'children' => $c_2])|noescape}
+  {capture $c_7}
+    {capture $c_3}
+      {=ui_text(ui_get($v_labels, ['popular']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_3])|noescape}
+    {capture $c_6}
+      {foreach ui_l($v_items) as $v_q}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_lt($v_i, 3))}
+          {capture $c_5}
+            {capture $c_4}
+              {=ui_text(ui_get($v_q, ['question']))}
+            {/capture}
+            {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_q, ['href']), 'className' => ui_cnv(['text-sm font-medium']), 'size' => 'sm'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => ['Attrs' => ui_attrs(['data-testid', 'faq-popular'])], 'children' => $c_5])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0'], 'children' => $c_6])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_7])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'faq-finder'])], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/faq-help.latte b/packages/latte/ui/blocks/faq-help.latte
new file mode 100644
index 0000000..194d007
--- /dev/null
+++ b/packages/latte/ui/blocks/faq-help.latte
@@ -0,0 +1,49 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-help.json
+    The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon, name, one line) and a link.
+    Props (p): labels, channels, landmarkLabel. *}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_channels = ($p['channels'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_11}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_text(ui_get($v_labels, ['asideTitle']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'lg', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_text(ui_get($v_labels, ['asideText']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_3])|noescape}
+  {capture $c_9}
+    {foreach ui_l($v_channels) as $v_c}
+      {capture $c_8}
+        {capture $c_4}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_c, ['icon'])), 'Size' => 20]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_4])|noescape}
+        {capture $c_7}
+          {capture $c_5}
+            {=ui_text(ui_get($v_c, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_5])|noescape}
+          {capture $c_6}
+            {=ui_text(ui_get($v_c, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_7])|noescape}
+      {/capture}
+      {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-start gap-4', 'Attrs' => ui_attrs(['data-testid', 'faq-channel'])], 'children' => $c_8])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-4 p-0'], 'children' => $c_9])|noescape}
+  {capture $c_10}
+    {=ui_text(ui_get($v_labels, ['asideCta']))}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'link', 'Size' => 'sm', 'Class' => 'gap-2 px-0 font-medium'], 'children' => $c_10])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'aside', 'Class' => 'rounded bg-card inset-ring inset-ring-border flex flex-col gap-6 p-6', 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, ui_get($v_labels, ['asideTitle'])]), 'data-testid', 'faq-help'])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/faq-list.latte b/packages/latte/ui/blocks/faq-list.latte
new file mode 100644
index 0000000..5962f65
--- /dev/null
+++ b/packages/latte/ui/blocks/faq-list.latte
@@ -0,0 +1,79 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-list.json
+    A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters by `filter.category`), density, tone.
+    Props (p): id, title, items, search, filter, layout, cols, empty, multiple, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_items = ($p['items'] ?? null)}
+{var $v_search = ($p['search'] ?? null)}
+{var $v_filter = ($p['filter'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'accordion')}
+{var $v_cols = ($p['cols'] ?? '1')}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_multiple = ($p['multiple'] ?? false)}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_inCategory = ui_where($v_items, 'category', ui_get($v_filter, ['category']))}
+{var $v_shown = ui_match($v_inCategory, 'question', ui_get($v_search, ['query']))}
+{capture $c_13}
+  {if ui_t(ui_eq(ui_get($v_search, ['mode']), 'field'))}
+    {=ui_include('blocks/search-field.latte', ['p' => ['label' => ui_coalesce([ui_get($v_search, ['label']), '']), 'placeholder' => ui_get($v_search, ['label']), 'value' => ui_coalesce([ui_get($v_search, ['query']), ''])]])|noescape}
+  {/if}
+  {if ui_t(ui_eq(ui_get($v_filter, ['mode']), 'categories'))}
+    {capture $c_2}
+      {foreach ui_l(ui_get($v_filter, ['tabs'])) as $v_tab}
+        {capture $c_1}
+          {=ui_text(ui_get($v_tab, ['title']))}
+        {/capture}
+        {=ui_include('blocks/switcher-item.latte', ['p' => ['active' => ui_eq(ui_get($v_tab, ['value']), ui_get($v_filter, ['category']))], 'children' => $c_1])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('blocks/switcher.latte', ['p' => ['label' => ui_get($v_filter, ['label'])], 'children' => $c_2])|noescape}
+  {/if}
+  {if ui_t(ui_eq(ui_len($v_shown), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'circle-question-mark', 'title' => $v_empty]])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'chat'))}
+    {capture $c_8}
+      {foreach ui_l($v_shown) as $v_item}
+        {capture $c_7}
+          {capture $c_4}
+            {capture $c_3}
+              {=ui_text(ui_get($v_item, ['question']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_3])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground'], 'children' => $c_4])|noescape}
+          {capture $c_6}
+            {capture $c_5}
+              {=ui_text(ui_get($v_item, ['answer']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_5])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4'], 'children' => $c_6])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'faq-item'])], 'children' => $c_7])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'faq'])], 'children' => $c_8])|noescape}
+  {else}
+    {capture $c_12}
+      {foreach ui_l($v_shown) as $v_item}
+        {capture $c_11}
+          {capture $c_9}
+            {=ui_text(ui_get($v_item, ['question']))}
+          {/capture}
+          {=ui_include('ui/disclosure/summary.latte', ['p' => ['Variant' => 'item'], 'children' => $c_9])|noescape}
+          {capture $c_10}
+            {=ui_text(ui_get($v_item, ['answer']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'pb-4 text-muted-foreground'], 'children' => $c_10])|noescape}
+        {/capture}
+        {=ui_include('ui/disclosure/disclosure.latte', ['p' => ['Variant' => 'item', 'Name' => ui_s((ui_t($v_multiple) ? null : ui_tpl('{0}-faq', [ui_coalesce([$v_id, 'faq'])]))), 'Attrs' => ui_attrs(['data-testid', 'faq-item'])], 'children' => $c_11])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_cols, '2')) ? '1-2' : '1')), 'Class' => 'items-start gap-x-8', 'Attrs' => ui_attrs(['data-testid', 'faq'])], 'children' => $c_12])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'measure' => (ui_t(ui_eq($v_layout, 'chat')) ? '2xl' : 'default'), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_13])|noescape}
diff --git a/packages/latte/ui/blocks/faq-split.latte b/packages/latte/ui/blocks/faq-split.latte
new file mode 100644
index 0000000..13f1567
--- /dev/null
+++ b/packages/latte/ui/blocks/faq-split.latte
@@ -0,0 +1,74 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-split.json
+    Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside: the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.
+    Props (p): id, title, lead, badge, items, channels, topics, labels, layout, cards, mediaSide, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_items = ($p['items'] ?? null)}
+{var $v_channels = ($p['channels'] ?? null)}
+{var $v_topics = ($p['topics'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'head')}
+{var $v_cards = ($p['cards'] ?? 'grid3')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_gt(ui_len($v_items), 0))}
+  {if ui_t(ui_eq($v_layout, 'cards'))}
+    {capture $c_1}
+      {=ui_include('blocks/faq-cards.latte', ['p' => ['items' => $v_items, 'labels' => $v_labels, 'cards' => $v_cards]])|noescape}
+    {/capture}
+    {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_1])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'head'))}
+    {capture $f_4}
+      {=ui_include('blocks/faq-disclosures.latte', ['p' => ['items' => $v_items, 'name' => ui_tpl('{0}-faq', [$v_id])]])|noescape}
+    {/capture}
+    {capture $c_5}
+      {capture $c_3}
+        {capture $c_2}
+          {=ui_text(ui_get($v_labels, ['cta']))}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Attrs' => ui_attrs(['data-testid', 'faq-cta'])], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => [], 'children' => $c_3])|noescape}
+    {/capture}
+    {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true, 'side' => 'end', 'align' => 'start'], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_4], 'children' => $c_5])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'aside'))}
+    {capture $f_6}
+      {=ui_include('blocks/faq-help.latte', ['p' => ['labels' => $v_labels, 'channels' => $v_channels, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+    {/capture}
+    {capture $c_7}
+      {=ui_include('blocks/faq-disclosures.latte', ['p' => ['items' => $v_items, 'name' => ui_tpl('{0}-faq', [$v_id])]])|noescape}
+    {/capture}
+    {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true, 'side' => 'end', 'align' => 'start'], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_6], 'children' => $c_7])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'media'))}
+    {capture $f_10}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+    {/capture}
+    {capture $c_11}
+      {=ui_include('blocks/faq-disclosures.latte', ['p' => ['items' => $v_items, 'name' => ui_tpl('{0}-faq', [$v_id])]])|noescape}
+      {capture $c_9}
+        {capture $c_8}
+          {=ui_text(ui_get($v_labels, ['cta']))}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Attrs' => ui_attrs(['data-testid', 'faq-cta'])], 'children' => $c_8])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => [], 'children' => $c_9])|noescape}
+    {/capture}
+    {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide, 'align' => 'start'], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_10], 'children' => $c_11])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'search'))}
+    {capture $f_12}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+    {/capture}
+    {capture $c_13}
+      {=ui_include('blocks/faq-finder.latte', ['p' => ['items' => $v_items, 'labels' => $v_labels, 'topics' => $v_topics]])|noescape}
+    {/capture}
+    {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_12], 'children' => $c_13])|noescape}
+  {/if}
+{/if}
diff --git a/packages/latte/ui/blocks/feature-accordion.latte b/packages/latte/ui/blocks/feature-accordion.latte
new file mode 100644
index 0000000..f2789f1
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-accordion.latte
@@ -0,0 +1,48 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-accordion.json
+    Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.
+    Props (p): id, title, features, empty, expand, media, multiple, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_expand = ($p['expand'] ?? 'first')}
+{var $v_media = ($p['media'] ?? 'none')}
+{var $v_multiple = ($p['multiple'] ?? false)}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_7}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+{/capture}
+{capture $c_8}
+  {if ui_t(ui_eq(ui_len($v_features), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layout-grid', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_6}
+      {foreach ui_l($v_features) as $v_f}
+        {var $v_i = $iterator->counter0}
+        {capture $c_5}
+          {capture $c_3}
+            {capture $c_2}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 20]])|noescape}
+              {capture $c_1}
+                {=ui_text(ui_get($v_f, ['title']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-base font-semibold'], 'children' => $c_1])|noescape}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex min-w-0 items-center justify-start gap-4'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/disclosure/summary.latte', ['p' => ['Variant' => 'item'], 'children' => $c_3])|noescape}
+          {capture $c_4}
+            {=ui_text(ui_get($v_f, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'pb-4 text-muted-foreground'], 'children' => $c_4])|noescape}
+        {/capture}
+        {=ui_include('ui/disclosure/disclosure.latte', ['p' => ['Variant' => 'item', 'Name' => ui_s((ui_t($v_multiple) ? null : ui_tpl('{0}-accordion', [ui_coalesce([$v_id, 'accordion'])]))), 'Open' => ui_t(ui_and([ui_eq($v_expand, 'first'), ui_eq($v_i, 0)])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_5])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_6])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'layout' => (ui_t(ui_eq($v_media, 'image')) ? 'split' : 'stack'), 'media' => ['show' => ui_eq($v_media, 'image')], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_7], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/feature-cards.latte b/packages/latte/ui/blocks/feature-cards.latte
new file mode 100644
index 0000000..cd61317
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-cards.latte
@@ -0,0 +1,67 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-cards.json
+    The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names.
+    Props (p): features, cols, item. *}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_cols = ($p['cols'] ?? '1-3')}
+{var $v_item = ($p['item'] ?? 'card')}
+{capture $c_15}
+  {foreach ui_l($v_features) as $v_feature}
+    {if ui_t(ui_eq($v_item, 'tile'))}
+      {capture $c_5}
+        {capture $c_4}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_feature, ['icon'])), 'Size' => 20]])|noescape}
+          {capture $c_3}
+            {capture $c_1}
+              {=ui_text(ui_get($v_feature, ['title']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_get($v_feature, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'compact', 'Attrs' => ui_attrs(['data-testid', 'feature-card'])], 'children' => $c_5])|noescape}
+    {elseif ui_t(ui_eq($v_item, 'cell'))}
+      {capture $c_9}
+        {capture $c_6}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_feature, ['icon'])), 'Size' => 24]])|noescape}
+        {/capture}
+        {=ui_include('ui/iconbadge/icon-badge.latte', ['p' => ['Variant' => 'primary', 'Size' => 'xl', 'Attrs' => ui_attrs(['data-testid', 'feature-icon'])], 'children' => $c_6])|noescape}
+        {capture $c_7}
+          {=ui_text(ui_get($v_feature, ['title']))}
+        {/capture}
+        {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'semibold', 'Class' => 'leading-6'], 'children' => $c_7])|noescape}
+        {capture $c_8}
+          {=ui_text(ui_get($v_feature, ['text']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold', 'Class' => 'leading-5 text-muted-foreground'], 'children' => $c_8])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => 'h-full gap-8 bg-background px-6 py-12 text-center', 'Attrs' => ui_attrs(['data-testid', 'feature-card'])], 'children' => $c_9])|noescape}
+    {else}
+      {capture $c_14}
+        {capture $c_11}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_feature, ['icon'])), 'Size' => 24]])|noescape}
+          {capture $c_10}
+            {=ui_text(ui_get($v_feature, ['title']))}
+          {/capture}
+          {=ui_include('ui/card/card-title.latte', ['p' => ['As' => ui_i(3)], 'children' => $c_10])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card-header.latte', ['p' => ['Class' => 'flex flex-col gap-4'], 'children' => $c_11])|noescape}
+        {capture $c_13}
+          {capture $c_12}
+            {=ui_text(ui_get($v_feature, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_12])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card-content.latte', ['p' => [], 'children' => $c_13])|noescape}
+      {/capture}
+      {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'default', 'Attrs' => ui_attrs(['data-testid', 'feature-card'])], 'children' => $c_14])|noescape}
+    {/if}
+  {/foreach}
+{/capture}
+{=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s($v_cols), 'Class' => ui_s((ui_t(ui_eq($v_item, 'cell')) ? ui_cnv(['w-full gap-px overflow-hidden bg-border p-px', ui_preset('blocks/presets/defaults.json', ['features', 'cells'])]) : 'gap-6')), 'Attrs' => ui_attrs(['data-testid', 'feature-grid'])], 'children' => $c_15])|noescape}
diff --git a/packages/latte/ui/blocks/feature-grid.latte b/packages/latte/ui/blocks/feature-grid.latte
new file mode 100644
index 0000000..9ba3600
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-grid.latte
@@ -0,0 +1,50 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-grid.json
+    A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon), media side (rows), density, tone.
+    Props (p): id, title, features, empty, action, layout, cols, item, mediaSide, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_action = ($p['action'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_cols = ($p['cols'] ?? '1-3')}
+{var $v_item = ($p['item'] ?? 'card')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_eq($v_item, 'cell'))}
+  {capture $c_4}
+    {capture $c_3}
+      {capture $c_1}
+        {=ui_text($v_title)}
+      {/capture}
+      {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => 'sm', 'Weight' => 'semibold', 'Class' => 'leading-7', 'Attrs' => ui_attrs(['id', ui_add($v_id, '-title')])], 'children' => $c_1])|noescape}
+      {if ui_t(ui_and([ui_get($v_action, ['label']), ui_get($v_action, ['href'])]))}
+        {capture $c_2}
+          {=ui_text(ui_get($v_action, ['label']))}
+        {/capture}
+        {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_get($v_action, ['href'])), 'Variant' => 'default', 'Class' => ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'tiny']), 'shrink-0 font-medium leading-5'])), 'Attrs' => ui_attrs(['data-testid', 'section-action'])], 'children' => $c_2])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'w-full'], 'children' => $c_3])|noescape}
+    {if ui_t(ui_eq(ui_len($v_features), 0))}
+      {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layout-grid', 'title' => $v_empty]])|noescape}
+    {else}
+      {=ui_include('blocks/feature-cards.latte', ['p' => ['features' => $v_features, 'cols' => $v_cols, 'item' => $v_item]])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'tone' => $v_tone, 'density' => $v_density, 'measure' => 'fill', 'className' => ui_cnv(['py-0']), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_4])|noescape}
+{else}
+  {capture $c_5}
+    {if ui_t(ui_eq(ui_len($v_features), 0))}
+      {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layout-grid', 'title' => $v_empty]])|noescape}
+    {elseif ui_t(ui_eq($v_layout, 'rows'))}
+      {=ui_include('blocks/feature-rows.latte', ['p' => ['features' => $v_features, 'mediaSide' => $v_mediaSide]])|noescape}
+    {else}
+      {=ui_include('blocks/feature-cards.latte', ['p' => ['features' => $v_features, 'cols' => $v_cols, 'item' => $v_item]])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'action' => $v_action, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_5])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/feature-metric-cards.latte b/packages/latte/ui/blocks/feature-metric-cards.latte
new file mode 100644
index 0000000..4b6023a
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-metric-cards.latte
@@ -0,0 +1,35 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-metric-cards.json
+    Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the label.
+    Props (p): stats. *}
+{var $v_stats = ($p['stats'] ?? null)}
+{capture $c_7}
+  {foreach ui_l($v_stats) as $v_s}
+    {var $v_i = $iterator->counter0}
+    {if ui_t(ui_lt($v_i, 4))}
+      {capture $c_6}
+        {capture $c_1}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_s, ['icon'])), 'Size' => 20]])|noescape}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'], 'children' => $c_1])|noescape}
+        {capture $c_5}
+          {capture $c_2}
+            {=ui_text(ui_get($v_s, ['value']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'lg', 'Weight' => 'bold'], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_text(ui_get($v_s, ['label']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+          {capture $c_4}
+            {=ui_text(ui_get($v_s, ['hint']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'min-w-0'], 'children' => $c_5])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'feature-stat'])], 'children' => $c_6])|noescape}
+    {/if}
+  {/foreach}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 gap-4 sm:grid-cols-2'], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/feature-pairs.latte b/packages/latte/ui/blocks/feature-pairs.latte
new file mode 100644
index 0000000..9f04a09
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-pairs.latte
@@ -0,0 +1,31 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-pairs.json
+    Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards.
+    Props (p): features. *}
+{var $v_features = ($p['features'] ?? null)}
+{capture $c_6}
+  {foreach ui_l($v_features) as $v_f}
+    {var $v_i = $iterator->counter0}
+    {if ui_t(ui_lt($v_i, 4))}
+      {capture $c_5}
+        {capture $c_1}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground'], 'children' => $c_1])|noescape}
+        {capture $c_4}
+          {capture $c_2}
+            {=ui_text(ui_get($v_f, ['title']))}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_text(ui_get($v_f, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'min-w-0'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Attrs' => ui_attrs(['data-testid', 'feature-item'])], 'children' => $c_5])|noescape}
+    {/if}
+  {/foreach}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 gap-6 sm:grid-cols-2'], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/feature-rows.latte b/packages/latte/ui/blocks/feature-rows.latte
new file mode 100644
index 0000000..fa1bbd7
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-rows.latte
@@ -0,0 +1,30 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-rows.json
+    The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names.
+    Props (p): features, mediaSide. *}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{capture $c_6}
+  {foreach ui_l($v_features) as $v_feature}
+    {capture $c_5}
+      {capture $c_3}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_feature, ['icon'])), 'Size' => 24]])|noescape}
+        {capture $c_1}
+          {=ui_text(ui_get($v_feature, ['title']))}
+        {/capture}
+        {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text(ui_get($v_feature, ['text']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'min-w-0'], 'children' => $c_3])|noescape}
+      {capture $c_4}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_feature, ['title']), 'ratio' => '4/3']])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['w-full min-w-0', (ui_t(ui_eq($v_mediaSide, 'start')) ? 'md:order-first' : (ui_t(ui_eq($v_mediaSide, 'alternate')) ? 'md:group-even:order-first' : ''))]))], 'children' => $c_4])|noescape}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-2', 'Class' => 'group items-center gap-8', 'Attrs' => ui_attrs(['data-testid', 'feature-card'])], 'children' => $c_5])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '8', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'feature-rows'])], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/feature-showcase.latte b/packages/latte/ui/blocks/feature-showcase.latte
new file mode 100644
index 0000000..2bdc355
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-showcase.latte
@@ -0,0 +1,55 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-showcase.json
+    Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4), tone.
+    Props (p): id, title, lead, features, empty, more, item, cols, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_more = ($p['more'] ?? null)}
+{var $v_item = ($p['item'] ?? 'picture')}
+{var $v_cols = ($p['cols'] ?? '3')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_8}
+  {if ui_t(ui_eq(ui_len($v_features), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layout-grid', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_7}
+      {foreach ui_l($v_features) as $v_f}
+        {capture $c_6}
+          {if ui_t(ui_eq($v_item, 'picture'))}
+            {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_f, ['title'])]])|noescape}
+          {else}
+            {capture $c_1}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 32]])|noescape}
+            {/capture}
+            {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex aspect-video items-center justify-center rounded bg-muted text-foreground', 'Attrs' => ui_attrs(['data-testid', 'showcase-panel'])], 'children' => $c_1])|noescape}
+          {/if}
+          {capture $c_5}
+            {capture $c_2}
+              {=ui_text(ui_get($v_f, ['title']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+            {capture $c_3}
+              {=ui_text(ui_get($v_f, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+            {if ui_t(ui_eq($v_item, 'picture'))}
+              {capture $c_4}
+                {=ui_text($v_more)}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+              {/capture}
+              {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_f, ['href']), 'className' => ui_cnv(['mt-auto gap-2 pt-2 text-sm font-medium']), 'size' => 'sm', 'testid' => 'read'], 'children' => $c_4])|noescape}
+            {/if}
+          {/capture}
+          {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => 'flex flex-1 flex-col gap-2'], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'default', 'Class' => 'h-full gap-4 overflow-hidden', 'Attrs' => ui_attrs(['data-testid', 'showcase-card'])], 'children' => $c_6])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_cols, '4')) ? 'grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4' : 'grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3'))], 'children' => $c_7])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'align' => 'center', 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/feature-split.latte b/packages/latte/ui/blocks/feature-split.latte
new file mode 100644
index 0000000..fad2d8c
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-split.latte
@@ -0,0 +1,45 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-split.json
+    Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four metric cards and the actions), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, features, stats, actions, layout, mediaSide, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_level = ($p['level'] ?? 2)}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_stats = ($p['stats'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_1}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => (ui_t(ui_eq($v_layout, 'stats')) ? '1/1' : '4/3')]])|noescape}
+{/capture}
+{capture $c_2}
+  {if ui_t(ui_eq($v_layout, 'grid'))}
+    {if ui_t(ui_gt(ui_len($v_features), 0))}
+      {=ui_include('blocks/feature-pairs.latte', ['p' => ['features' => $v_features]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'cards'))}
+    {if ui_t(ui_gt(ui_len($v_features), 0))}
+      {=ui_include('blocks/feature-cards.latte', ['p' => ['features' => $v_features, 'cols' => '1-2', 'item' => 'tile']])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'stats'))}
+    {if ui_t(ui_gt(ui_len($v_features), 0))}
+      {=ui_include('blocks/feature-stat-rows.latte', ['p' => ['features' => $v_features, 'stats' => $v_stats]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'metrics'))}
+    {if ui_t(ui_gt(ui_len($v_stats), 0))}
+      {=ui_include('blocks/feature-metric-cards.latte', ['p' => ['stats' => $v_stats]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_or([ui_eq($v_layout, 'cards'), ui_eq($v_layout, 'metrics')]))}
+    {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref'])]])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge, 'level' => $v_level], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_1], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/feature-stat-rows.latte b/packages/latte/ui/blocks/feature-stat-rows.latte
new file mode 100644
index 0000000..9a4d031
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-stat-rows.latte
@@ -0,0 +1,54 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-stat-rows.json
+    Two figures of FeatureSplit as cards, then three features as checked rows.
+    Props (p): features, stats. *}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_stats = ($p['stats'] ?? null)}
+{capture $c_11}
+  {capture $c_4}
+    {foreach ui_l($v_stats) as $v_s}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 2))}
+        {capture $c_3}
+          {capture $c_1}
+            {=ui_text(ui_get($v_s, ['value']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => '2xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_get($v_s, ['label']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'feature-stat'])], 'children' => $c_3])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-4'], 'children' => $c_4])|noescape}
+  {capture $c_10}
+    {foreach ui_l($v_features) as $v_f}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 3))}
+        {capture $c_9}
+          {capture $c_5}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'check', 'Size' => 16]])|noescape}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground'], 'children' => $c_5])|noescape}
+          {capture $c_8}
+            {capture $c_6}
+              {=ui_text(ui_get($v_f, ['title']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_6])|noescape}
+            {capture $c_7}
+              {=ui_text(ui_get($v_f, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'min-w-0'], 'children' => $c_8])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Attrs' => ui_attrs(['data-testid', 'feature-item'])], 'children' => $c_9])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_10])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch'], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/feature-sticky.latte b/packages/latte/ui/blocks/feature-sticky.latte
new file mode 100644
index 0000000..bfe2a29
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-sticky.latte
@@ -0,0 +1,45 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-sticky.json
+    A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item (plain, card), tone, density.
+    Props (p): id, title, features, empty, active, mediaSide, item, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_active = ($p['active'] ?? '')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_item = ($p['item'] ?? 'plain')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_7}
+  {if ui_t(ui_eq(ui_len($v_features), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layout-grid', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_6}
+      {capture $c_1}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['md:sticky md:top-8', (ui_t(ui_eq($v_mediaSide, 'start')) ? 'md:order-first' : 'md:order-last')])), 'Attrs' => ui_attrs(['data-testid', 'sticky-media'])], 'children' => $c_1])|noescape}
+      {capture $c_5}
+        {foreach ui_l($v_features) as $v_f}
+          {capture $c_4}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 24]])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_get($v_f, ['title']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => '2xl', 'Weight' => 'bold'], 'children' => $c_2])|noescape}
+            {capture $c_3}
+              {=ui_text(ui_get($v_f, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => ui_s(ui_cnv([(ui_t(ui_eq($v_item, 'card')) ? 'rounded bg-card inset-ring inset-ring-border p-6' : 'py-4'), (ui_t(ui_eq(ui_get($v_f, ['id']), $v_active)) ? 'inset-ring inset-ring-foreground' : '')])), 'Attrs' => ui_attrs(['data-testid', 'item', 'aria-current', (ui_t(ui_eq(ui_get($v_f, ['id']), $v_active)) ? 'true' : null)])], 'children' => $c_4])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => ui_s((ui_t(ui_eq($v_density, 'compact')) ? '4' : '8')), 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_5])|noescape}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-2', 'Class' => 'items-start gap-8', 'Attrs' => ui_attrs(['data-testid', 'sticky'])], 'children' => $c_6])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/feature-tabs.latte b/packages/latte/ui/blocks/feature-tabs.latte
new file mode 100644
index 0000000..960e20c
--- /dev/null
+++ b/packages/latte/ui/blocks/feature-tabs.latte
@@ -0,0 +1,55 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-tabs.json
+    Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the picture, stack: picture below), tone, density.
+    Props (p): id, title, features, empty, tabsLabel, active, panel, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_tabsLabel = ($p['tabsLabel'] ?? null)}
+{var $v_active = ($p['active'] ?? '')}
+{var $v_panel = ($p['panel'] ?? 'split')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_8}
+  {if ui_t(ui_eq(ui_len($v_features), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layout-grid', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_7}
+      {capture $c_2}
+        {foreach ui_l($v_features) as $v_f}
+          {var $v_i = $iterator->counter0}
+          {capture $c_1}
+            {=ui_text(ui_get($v_f, ['title']))}
+          {/capture}
+          {=ui_include('blocks/switcher-item.latte', ['p' => ['active' => ui_or([ui_eq(ui_get($v_f, ['id']), $v_active), ui_and([ui_eq($v_active, ''), ui_eq($v_i, 0)])])], 'children' => $c_1])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('blocks/switcher.latte', ['p' => ['label' => $v_tabsLabel, 'className' => ui_cnv(['w-fit max-w-full flex-wrap'])], 'children' => $c_2])|noescape}
+      {foreach ui_l($v_features) as $v_f}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_or([ui_eq(ui_get($v_f, ['id']), $v_active), ui_and([ui_eq($v_active, ''), ui_eq($v_i, 0)])]))}
+          {capture $c_6}
+            {capture $c_5}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 24]])|noescape}
+              {capture $c_3}
+                {=ui_text(ui_get($v_f, ['title']))}
+              {/capture}
+              {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => '2xl', 'Weight' => 'bold'], 'children' => $c_3])|noescape}
+              {capture $c_4}
+                {=ui_text(ui_get($v_f, ['text']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4'], 'children' => $c_5])|noescape}
+            {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_f, ['title']), 'ratio' => '4/3']])|noescape}
+          {/capture}
+          {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_panel, 'split')) ? '1-2' : '1')), 'Class' => 'items-center gap-8', 'Attrs' => ui_attrs(['data-testid', 'tab-panel', 'role', 'tabpanel'])], 'children' => $c_6])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch'], 'children' => $c_7])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/field.latte b/packages/latte/ui/blocks/field.latte
new file mode 100644
index 0000000..a122bbb
--- /dev/null
+++ b/packages/latte/ui/blocks/field.latte
@@ -0,0 +1,27 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/field.json
+    A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the control.
+    Props (p): label, htmlFor, hint, error, className; children: markup. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_htmlFor = ($p['htmlFor'] ?? null)}
+{var $v_hint = ($p['hint'] ?? null)}
+{var $v_error = ($p['error'] ?? null)}
+{capture $c_4}
+  {capture $c_1}
+    {=ui_text($v_label)}
+  {/capture}
+  {=ui_include('ui/label/label.latte', ['p' => ['Class' => 'text-xs font-bold text-foreground', 'HTMLFor' => ui_s($v_htmlFor)], 'children' => $c_1])|noescape}
+  {=($children ?? '')|noescape}
+  {if ui_t($v_error)}
+    {capture $c_2}
+      {=ui_text($v_error)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-semibold text-destructive', 'Attrs' => ui_attrs(['role', 'alert'])], 'children' => $c_2])|noescape}
+  {elseif ui_t($v_hint)}
+    {capture $c_3}
+      {=ui_text($v_hint)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-medium text-muted-foreground'], 'children' => $c_3])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex min-w-0 flex-col gap-2', ($p['className'] ?? '')]))], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/figure-block.latte b/packages/latte/ui/blocks/figure-block.latte
new file mode 100644
index 0000000..f581324
--- /dev/null
+++ b/packages/latte/ui/blocks/figure-block.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/figure-block.json
+    Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag figure.
+    Props (p): testid, className; children: markup. *}
+{var $v_testid = ($p['testid'] ?? null)}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'figure', 'Class' => ui_s(ui_cnv([($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-testid', $v_testid])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/file-tree-item.latte b/packages/latte/ui/blocks/file-tree-item.latte
new file mode 100644
index 0000000..f28638c
--- /dev/null
+++ b/packages/latte/ui/blocks/file-tree-item.latte
@@ -0,0 +1,21 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/file-tree-item.json
+    A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide.
+    Props (p): kind, label, selected, expanded, className. *}
+{var $v_kind = ($p['kind'] ?? 'file')}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_selected = ($p['selected'] ?? false)}
+{var $v_expanded = ($p['expanded'] ?? false)}
+{capture $c_2}
+  {if ui_t(ui_eq($v_kind, 'folder'))}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s((ui_t($v_expanded) ? 'chevron-down' : 'chevron-right')), 'Size' => 16]])|noescape}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'folder-open', 'Size' => 16]])|noescape}
+  {else}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'file', 'Size' => 16]])|noescape}
+  {/if}
+  {capture $c_1}
+    {=ui_text($v_label)}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'whitespace-nowrap', 'Attrs' => ui_attrs(['data-slot', 'file-tree-label'])], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/button-plain/button-plain.latte', ['p' => ['Type' => 'button', 'Role' => 'treeitem', 'Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/file-tree-item.variants.json', ['kind' => $v_kind]), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['aria-selected', $v_selected, 'tabindex', (ui_t($v_selected) ? 0 : -1), 'aria-expanded', (ui_t(ui_eq($v_kind, 'folder')) ? $v_expanded : null), 'data-slot', 'file-tree-item', 'data-kind', $v_kind, 'data-state', (ui_t($v_selected) ? 'selected' : 'default')])], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/file-tree.latte b/packages/latte/ui/blocks/file-tree.latte
new file mode 100644
index 0000000..61d5a93
--- /dev/null
+++ b/packages/latte/ui/blocks/file-tree.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/file-tree.json
+    The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead` from the utils to the keydown (vertical, no loop).
+    Props (p): label, className; children: markup. *}
+{var $v_label = ($p['label'] ?? null)}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-2 p-2', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'tree', 'aria-label', $v_label, 'data-slot', 'file-tree'])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/footer-brand.latte b/packages/latte/ui/blocks/footer-brand.latte
new file mode 100644
index 0000000..693f709
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-brand.latte
@@ -0,0 +1,24 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-brand.json
+    The brand of FooterSplit: a mark and the brand word over the tagline.
+    Props (p): brand, tagline. *}
+{var $v_brand = ($p['brand'] ?? null)}
+{var $v_tagline = ($p['tagline'] ?? null)}
+{capture $c_5}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'layers', 'Size' => 16]])|noescape}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-8 items-center justify-center rounded bg-foreground text-background'], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_text($v_brand)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_3])|noescape}
+  {capture $c_4}
+    {=ui_text($v_tagline)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Attrs' => ui_attrs(['data-testid', 'footer-brand'])], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/footer-card.latte b/packages/latte/ui/blocks/footer-card.latte
new file mode 100644
index 0000000..4c6d91f
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-card.latte
@@ -0,0 +1,57 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-card.json
+    The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card.
+    Props (p): label, brand, groups, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_brand = ($p['brand'] ?? null)}
+{var $v_groups = ($p['groups'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_13}
+  {capture $c_12}
+    {capture $c_11}
+      {capture $c_3}
+        {capture $c_1}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'hexagon', 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-8 items-center justify-center rounded bg-foreground text-background'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text($v_brand)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'bold'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['h-8 shrink-0', ui_preset('blocks/presets/defaults.json', ['footer', 'brand'])])), 'Attrs' => ui_attrs(['data-testid', 'footer-brand'])], 'children' => $c_3])|noescape}
+      {if ui_t(ui_gt(ui_len($v_groups), 0))}
+        {capture $c_10}
+          {capture $c_9}
+            {foreach ui_l($v_groups) as $v_g}
+              {capture $c_8}
+                {capture $c_4}
+                  {=ui_text(ui_get($v_g, ['title']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'semibold', 'Class' => 'leading-5'], 'children' => $c_4])|noescape}
+                {capture $c_7}
+                  {foreach ui_l(ui_get($v_g, ['links'])) as $v_item}
+                    {capture $c_6}
+                      {capture $c_5}
+                        {=ui_text(ui_get($v_item, ['name']))}
+                      {/capture}
+                      {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_item, ['href']), 'className' => ui_cnv(['text-xs leading-5 text-muted-foreground'])], 'children' => $c_5])|noescape}
+                    {/capture}
+                    {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_6])|noescape}
+                  {/foreach}
+                {/capture}
+                {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-4 p-0'], 'children' => $c_7])|noescape}
+              {/capture}
+              {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Attrs' => ui_attrs(['data-testid', 'group'])], 'children' => $c_8])|noescape}
+            {/foreach}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '0', 'Align' => 'start', 'Class' => ui_s(ui_cnv(['flex w-full flex-nowrap justify-between', ui_preset('blocks/presets/defaults.json', ['footer', 'groups'])])), 'Attrs' => ui_attrs(['data-testid', 'footer-groups'])], 'children' => $c_9])|noescape}
+        {/capture}
+        {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [$v_label, $v_landmarkLabel])) : $v_label), 'className' => ui_cnv(['min-w-0 flex-1'])], 'children' => $c_10])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex w-full flex-row items-start overflow-hidden bg-muted p-10', ui_preset('blocks/presets/defaults.json', ['footer', 'card'])])), 'Attrs' => ui_attrs(['data-testid', 'footer-card'])], 'children' => $c_11])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv([ui_cnv(['mx-auto w-full px-4', ui_preset('blocks/presets/defaults.json', ['section', 'landing'])]), 'px-0'])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_12])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'footer', 'Class' => 'py-8', 'Attrs' => ui_attrs(['data-testid', 'site-footer', 'data-layout', 'card', 'aria-label', $v_landmarkLabel])], 'children' => $c_13])|noescape}
diff --git a/packages/latte/ui/blocks/footer-channels.latte b/packages/latte/ui/blocks/footer-channels.latte
new file mode 100644
index 0000000..82cde94
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-channels.latte
@@ -0,0 +1,30 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-channels.json
+    The channels of the community as three cards: a glyph over the name and one line.
+    Props (p): extras. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{if ui_t(ui_gt(ui_len(ui_get($v_extras, ['channels'])), 0))}
+  {capture $c_5}
+    {foreach ui_l(ui_get($v_extras, ['channels'])) as $v_c}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 3))}
+        {capture $c_4}
+          {capture $c_1}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_c, ['icon'])), 'Size' => 20]])|noescape}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'], 'children' => $c_1])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_get($v_c, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_text(ui_get($v_c, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'footer-channel'])], 'children' => $c_4])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 gap-4 sm:grid-cols-3'], 'children' => $c_5])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/footer-columns.latte b/packages/latte/ui/blocks/footer-columns.latte
new file mode 100644
index 0000000..bb1f0eb
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-columns.latte
@@ -0,0 +1,36 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-columns.json
+    The link groups of SitemapFooter as columns: a group title over its links, up to five columns.
+    Props (p): label, groups, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_groups = ($p['groups'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_gt(ui_len($v_groups), 0))}
+  {capture $c_7}
+    {capture $c_6}
+      {foreach ui_l($v_groups) as $v_g}
+        {capture $c_5}
+          {capture $c_1}
+            {=ui_text(ui_get($v_g, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+          {capture $c_4}
+            {foreach ui_l(ui_get($v_g, ['links'])) as $v_item}
+              {capture $c_3}
+                {capture $c_2}
+                  {=ui_text(ui_get($v_item, ['name']))}
+                {/capture}
+                {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_item, ['href']), 'className' => ui_cnv(['text-sm text-muted-foreground'])], 'children' => $c_2])|noescape}
+              {/capture}
+              {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_3])|noescape}
+            {/foreach}
+          {/capture}
+          {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0'], 'children' => $c_4])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Attrs' => ui_attrs(['data-testid', 'group'])], 'children' => $c_5])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1', 'Class' => 'grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5', 'Attrs' => ui_attrs(['data-testid', 'footer-groups'])], 'children' => $c_6])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'nav', 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_label])])], 'children' => $c_7])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/footer-contacts.latte b/packages/latte/ui/blocks/footer-contacts.latte
new file mode 100644
index 0000000..59f67fb
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-contacts.latte
@@ -0,0 +1,30 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-contacts.json
+    The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value.
+    Props (p): extras. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{if ui_t(ui_gt(ui_len(ui_get($v_extras, ['contacts'])), 0))}
+  {capture $c_6}
+    {foreach ui_l(ui_get($v_extras, ['contacts'])) as $v_c}
+      {capture $c_5}
+        {capture $c_1}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_c, ['icon'])), 'Size' => 20]])|noescape}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'], 'children' => $c_1])|noescape}
+        {capture $c_4}
+          {capture $c_2}
+            {=ui_text(ui_get($v_c, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_text(ui_get($v_c, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Attrs' => ui_attrs(['data-testid', 'footer-contact'])], 'children' => $c_5])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_6])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/footer-figures.latte b/packages/latte/ui/blocks/footer-figures.latte
new file mode 100644
index 0000000..1b9166f
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-figures.latte
@@ -0,0 +1,26 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-figures.json
+    Three figures in a row under the brand of FooterSplit.
+    Props (p): extras. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{if ui_t(ui_gt(ui_len(ui_get($v_extras, ['stats'])), 0))}
+  {capture $c_4}
+    {foreach ui_l(ui_get($v_extras, ['stats'])) as $v_s}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 3))}
+        {capture $c_3}
+          {capture $c_1}
+            {=ui_text(ui_get($v_s, ['value']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_get($v_s, ['label']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Attrs' => ui_attrs(['data-testid', 'footer-stat'])], 'children' => $c_3])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '8', 'Class' => 'flex-wrap'], 'children' => $c_4])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/footer-group-cards.latte b/packages/latte/ui/blocks/footer-group-cards.latte
new file mode 100644
index 0000000..0d3b5c8
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-group-cards.latte
@@ -0,0 +1,43 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-group-cards.json
+    The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide screens.
+    Props (p): label, groups, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_groups = ($p['groups'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_gt(ui_len($v_groups), 0))}
+  {capture $c_9}
+    {capture $c_8}
+      {foreach ui_l($v_groups) as $v_g}
+        {capture $c_7}
+          {capture $c_3}
+            {capture $c_1}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_g, ['icon'])), 'Size' => 20]])|noescape}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_get($v_g, ['title']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_3])|noescape}
+          {capture $c_6}
+            {foreach ui_l(ui_get($v_g, ['links'])) as $v_item}
+              {capture $c_5}
+                {capture $c_4}
+                  {=ui_text(ui_get($v_item, ['name']))}
+                {/capture}
+                {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_item, ['href']), 'className' => ui_cnv(['text-sm text-muted-foreground']), 'variant' => 'muted', 'size' => 'sm'], 'children' => $c_4])|noescape}
+              {/capture}
+              {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_5])|noescape}
+            {/foreach}
+          {/capture}
+          {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0'], 'children' => $c_6])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs' => ui_attrs(['data-testid', 'group'])], 'children' => $c_7])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'], 'children' => $c_8])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'nav', 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_label])])], 'children' => $c_9])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/footer-link-columns.latte b/packages/latte/ui/blocks/footer-link-columns.latte
new file mode 100644
index 0000000..d58fcf7
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-link-columns.latte
@@ -0,0 +1,39 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-link-columns.json
+    The first three link groups of FooterSplit as small columns beside each other.
+    Props (p): label, groups, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_groups = ($p['groups'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_gt(ui_len($v_groups), 0))}
+  {capture $c_7}
+    {capture $c_6}
+      {foreach ui_l($v_groups) as $v_g}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_lt($v_i, 3))}
+          {capture $c_5}
+            {capture $c_1}
+              {=ui_text(ui_get($v_g, ['title']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+            {capture $c_4}
+              {foreach ui_l(ui_get($v_g, ['links'])) as $v_item}
+                {capture $c_3}
+                  {capture $c_2}
+                    {=ui_text(ui_get($v_item, ['name']))}
+                  {/capture}
+                  {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_item, ['href']), 'className' => ui_cnv(['text-sm text-muted-foreground']), 'variant' => 'muted', 'size' => 'sm'], 'children' => $c_2])|noescape}
+                {/capture}
+                {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_3])|noescape}
+              {/foreach}
+            {/capture}
+            {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Attrs' => ui_attrs(['data-testid', 'group'])], 'children' => $c_5])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-8 sm:grid-cols-3'], 'children' => $c_6])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'nav', 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_label])])], 'children' => $c_7])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/footer-points.latte b/packages/latte/ui/blocks/footer-points.latte
new file mode 100644
index 0000000..d8849ea
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-points.latte
@@ -0,0 +1,28 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-points.json
+    Four points with their glyphs in a column, under the tagline of FooterSplit.
+    Props (p): extras, title. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{if ui_t(ui_gt(ui_len(ui_get($v_extras, ['points'])), 0))}
+  {capture $c_4}
+    {capture $c_1}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+    {foreach ui_l(ui_get($v_extras, ['points'])) as $v_p}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 4))}
+        {capture $c_3}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_p, ['icon'])), 'Size' => 16]])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_get($v_p, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Attrs' => ui_attrs(['data-testid', 'footer-point'])], 'children' => $c_3])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'start'], 'children' => $c_4])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/footer-signup-card.latte b/packages/latte/ui/blocks/footer-signup-card.latte
new file mode 100644
index 0000000..d081e93
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-signup-card.latte
@@ -0,0 +1,36 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-signup-card.json
+    The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note.
+    Props (p): id, labels. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_8}
+  {capture $c_2}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'mail', 'Size' => 16]])|noescape}
+    {capture $c_1}
+      {=ui_text(ui_get($v_labels, ['signup']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_2])|noescape}
+  {capture $c_6}
+    {capture $c_3}
+      {=ui_text(ui_get($v_labels, ['email']))}
+    {/capture}
+    {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-email', [$v_id])), 'Class' => 'sr-only'], 'children' => $c_3])|noescape}
+    {capture $c_5}
+      {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'email', 'Name' => 'email', 'Class' => 'min-w-0 flex-1', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-email', [$v_id]), 'data-testid', 'field'])]])|noescape}
+      {capture $c_4}
+        {=ui_text(ui_get($v_labels, ['subscribe']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'submit', 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_4])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => 'w-full flex-wrap'], 'children' => $c_5])|noescape}
+  {/capture}
+  {=ui_include('ui/form/form.latte', ['p' => ['Method' => 'dialog', 'Class' => ui_s(ui_cnv(['w-full max-w-md', (ui_t(false) ? 'mx-auto' : '')])), 'Attrs' => ui_attrs(['data-testid', 'email-form'])], 'children' => $c_6])|noescape}
+  {capture $c_7}
+    {=ui_text(ui_get($v_labels, ['note']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs' => ui_attrs(['data-testid', 'signup'])], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/footer-sitemap.latte b/packages/latte/ui/blocks/footer-sitemap.latte
new file mode 100644
index 0000000..82a8714
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-sitemap.latte
@@ -0,0 +1,13 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-sitemap.json
+    The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no link).
+    Props (p): href, label. *}
+{var $v_href = ($p['href'] ?? null)}
+{var $v_label = ($p['label'] ?? null)}
+{if ui_t($v_href)}
+  {capture $c_1}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+    {=ui_text($v_label)}
+  {/capture}
+  {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s($v_href), 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'footer-sitemap'])], 'children' => $c_1])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/footer-split.latte b/packages/latte/ui/blocks/footer-split.latte
new file mode 100644
index 0000000..7fc2012
--- /dev/null
+++ b/packages/latte/ui/blocks/footer-split.latte
@@ -0,0 +1,96 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-split.json
+    A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two actions, or the community channels and figures), mediaSide, tone.
+    Props (p): id, label, brand, tagline, copyright, groups, extras, labels, layout, mediaSide, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? 'footer')}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_brand = ($p['brand'] ?? null)}
+{var $v_tagline = ($p['tagline'] ?? null)}
+{var $v_copyright = ($p['copyright'] ?? null)}
+{var $v_groups = ($p['groups'] ?? null)}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'stats')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_14}
+  {capture $c_13}
+    {if ui_t(ui_eq($v_layout, 'stats'))}
+      {capture $c_5}
+        {capture $c_2}
+          {capture $c_1}
+            {=ui_include('blocks/footer-brand.latte', ['p' => ['brand' => $v_brand, 'tagline' => $v_tagline]])|noescape}
+            {=ui_include('blocks/footer-figures.latte', ['p' => ['extras' => $v_extras]])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'start'], 'children' => $c_1])|noescape}
+          {=ui_include('blocks/footer-sitemap.latte', ['p' => ['href' => ui_get($v_extras, ['sitemapHref']), 'label' => ui_get($v_labels, ['sitemap'])]])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '6', 'Align' => 'start', 'Justify' => 'between', 'Class' => 'flex-wrap'], 'children' => $c_2])|noescape}
+        {=ui_include('blocks/footer-group-cards.latte', ['p' => ['label' => $v_label, 'groups' => $v_groups, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+        {capture $c_4}
+          {capture $c_3}
+            {=ui_text($v_copyright)}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'border-t border-border pt-6'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '8', 'Align' => 'stretch'], 'children' => $c_5])|noescape}
+    {else}
+      {capture $c_12}
+        {if ui_t(ui_eq($v_mediaSide, 'start'))}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_brand, 'ratio' => '4/3']])|noescape}
+        {/if}
+        {capture $c_11}
+          {if ui_t(ui_or([ui_eq($v_layout, 'points'), ui_eq($v_layout, 'links')]))}
+            {=ui_include('blocks/footer-brand.latte', ['p' => ['brand' => $v_brand, 'tagline' => $v_tagline]])|noescape}
+          {else}
+            {capture $c_8}
+              {capture $c_6}
+                {=ui_text((ui_t(ui_eq($v_layout, 'newsletter')) ? ui_get($v_labels, ['loopTitle']) : (ui_t(ui_eq($v_layout, 'channels')) ? ui_get($v_labels, ['joinTitle']) : ui_get($v_labels, ['title']))))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_6])|noescape}
+              {capture $c_7}
+                {=ui_text((ui_t(ui_eq($v_layout, 'newsletter')) ? ui_get($v_labels, ['loopText']) : (ui_t(ui_eq($v_layout, 'channels')) ? ui_get($v_labels, ['joinText']) : ui_get($v_labels, ['text']))))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'start'], 'children' => $c_8])|noescape}
+          {/if}
+          {if ui_t(ui_eq($v_layout, 'points'))}
+            {=ui_include('blocks/footer-points.latte', ['p' => ['extras' => $v_extras, 'title' => ui_get($v_labels, ['points'])]])|noescape}
+          {/if}
+          {if ui_t(ui_eq($v_layout, 'newsletter'))}
+            {=ui_include('blocks/footer-signup-card.latte', ['p' => ['id' => $v_id, 'labels' => $v_labels]])|noescape}
+          {/if}
+          {if ui_t(ui_or([ui_eq($v_layout, 'links'), ui_eq($v_layout, 'newsletter')]))}
+            {=ui_include('blocks/footer-link-columns.latte', ['p' => ['label' => $v_label, 'groups' => $v_groups, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+          {/if}
+          {if ui_t(ui_eq($v_layout, 'contacts'))}
+            {=ui_include('blocks/footer-contacts.latte', ['p' => ['extras' => $v_extras]])|noescape}
+            {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_labels, ['cta']), 'primaryHref' => ui_get($v_extras, ['ctaHref']), 'secondary' => ui_get($v_labels, ['secondary']), 'secondaryHref' => ui_get($v_extras, ['secondaryHref'])]])|noescape}
+          {/if}
+          {if ui_t(ui_eq($v_layout, 'channels'))}
+            {=ui_include('blocks/footer-channels.latte', ['p' => ['extras' => $v_extras]])|noescape}
+            {=ui_include('blocks/footer-figures.latte', ['p' => ['extras' => $v_extras]])|noescape}
+          {/if}
+          {capture $c_10}
+            {capture $c_9}
+              {=ui_text($v_copyright)}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_9])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'border-t border-border pt-6'], 'children' => $c_10])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '8', 'Align' => 'stretch'], 'children' => $c_11])|noescape}
+        {if ui_t(!(ui_eq($v_mediaSide, 'start')))}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_brand, 'ratio' => '4/3']])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 items-center gap-8 lg:grid-cols-2'], 'children' => $c_12])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-12'])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_13])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'footer', 'Class' => ui_s(ui_cnv(['border-t border-border', (ui_t(ui_eq($v_tone, 'muted')) ? 'bg-muted' : '')])), 'Attrs' => ui_attrs(['data-testid', 'footer-split', 'data-layout', $v_layout, 'aria-label', $v_landmarkLabel])], 'children' => $c_14])|noescape}
diff --git a/packages/latte/ui/blocks/hero-badge.latte b/packages/latte/ui/blocks/hero-badge.latte
new file mode 100644
index 0000000..cff2b4e
--- /dev/null
+++ b/packages/latte/ui/blocks/hero-badge.latte
@@ -0,0 +1,19 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-badge.json
+    A composite badge on a dark band: an optional small mark beside a label.
+    Props (p): label, mark. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_mark = ($p['mark'] ?? null)}
+{capture $c_3}
+  {if ui_t($v_mark)}
+    {capture $c_1}
+      {=ui_text($v_mark)}
+    {/capture}
+    {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'badge-mark'])], 'children' => $c_1])|noescape}
+  {/if}
+  {capture $c_2}
+    {=ui_text($v_label)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'bold', 'Class' => 'leading-5 text-background'], 'children' => $c_2])|noescape}
+{/capture}
+{=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30', ui_preset('blocks/presets/defaults.json', ['hero', 'badge'])])), 'Attrs' => ui_attrs(['data-testid', 'section-badge'])], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/hero-classic.latte b/packages/latte/ui/blocks/hero-classic.latte
new file mode 100644
index 0000000..8697513
--- /dev/null
+++ b/packages/latte/ui/blocks/hero-classic.latte
@@ -0,0 +1,72 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-classic.json
+    The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster). Axes: layout, media kind and side, scale, tone, density, actions mode.
+    Props (p): id, title, text, level, badge, topics, actions, media, layout, scale, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_badge = ($p['badge'] ?? null)}
+{var $v_topics = ($p['topics'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_media = ($p['media'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'centered')}
+{var $v_scale = ($p['scale'] ?? 'default')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'roomy')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_mediaKind = ui_coalesce([ui_get($v_media, ['kind']), 'none'])}
+{var $v_mediaSide = ui_coalesce([ui_get($v_media, ['side']), 'end'])}
+{capture $f_5}
+  {if ui_t(ui_and([ui_eq($v_mediaKind, 'code'), ui_get($v_media, ['lines']), ui_gt(ui_len(ui_get($v_media, ['lines'])), 0), ui_get($v_media, ['codeTitle']), ui_get($v_media, ['prompt'])]))}
+    {=ui_include('blocks/code-window.latte', ['p' => ['title' => ui_get($v_media, ['codeTitle']), 'prompt' => ui_get($v_media, ['prompt']), 'lines' => ui_get($v_media, ['lines'])]])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_mediaKind, 'cluster'))}
+    {capture $c_9}
+      {capture $c_6}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4']])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['w-full', '']))], 'children' => $c_6])|noescape}
+      {capture $c_7}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['w-full', '-translate-y-4']))], 'children' => $c_7])|noescape}
+      {capture $c_8}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4']])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['w-full', '']))], 'children' => $c_8])|noescape}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '3', 'Class' => 'items-end gap-4', 'Attrs' => ui_attrs(['data-testid', 'cluster'])], 'children' => $c_9])|noescape}
+  {/if}
+  {if ui_t(ui_or([ui_eq($v_mediaKind, 'image')]))}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+  {/if}
+{/capture}
+{capture $c_10}
+  {=ui_include('blocks/backdrop.latte', ['p' => ['kind' => (ui_t(ui_eq($v_mediaKind, 'backdrop')) ? 'image' : 'none'), 'alt' => $v_title]])|noescape}
+  {if ui_t(ui_get($v_actions, ['cta']))}
+    {if ui_t(ui_eq(ui_get($v_actions, ['mode']), 'form'))}
+      {capture $c_4}
+        {capture $c_1}
+          {=ui_text(ui_get($v_actions, ['emailLabel']))}
+        {/capture}
+        {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-email', [$v_id])), 'Class' => 'sr-only'], 'children' => $c_1])|noescape}
+        {capture $c_3}
+          {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'prompt', 'Class' => 'min-w-0 flex-1', 'Placeholder' => ui_s(ui_get($v_actions, ['emailLabel'])), 'Attrs' => ui_attrs(['id', ui_tpl('{0}-email', [$v_id]), 'data-testid', 'field'])]])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_get($v_actions, ['cta']))}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Href' => ui_s(ui_get($v_actions, ['href'])), 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => 'w-full flex-wrap'], 'children' => $c_3])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['w-full max-w-xl', (ui_t(ui_eq($v_layout, 'centered')) ? 'mx-auto' : '')])), 'Attrs' => ui_attrs(['data-testid', 'email-form'])], 'children' => $c_4])|noescape}
+    {else}
+      {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref']), 'align' => (ui_t(ui_eq($v_layout, 'centered')) ? 'center' : 'start')]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_and([$v_topics, ui_gt(ui_len($v_topics), 0)]))}
+    {=ui_include('blocks/topic-chips.latte', ['p' => ['topics' => $v_topics]])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_text, 'heading' => ['level' => $v_level, 'scale' => $v_scale, 'badge' => $v_badge], 'layout' => (ui_t(ui_eq($v_layout, 'split')) ? 'split' : 'stack'), 'align' => (ui_t(ui_eq($v_layout, 'split')) ? 'start' : 'center'), 'media' => ['show' => ui_or([ui_eq($v_mediaKind, 'image'), ui_eq($v_mediaKind, 'code'), ui_eq($v_mediaKind, 'cluster')]), 'side' => $v_mediaSide], 'tone' => $v_tone, 'density' => $v_density, 'className' => ui_cnv([(ui_t(ui_eq((ui_t(ui_eq($v_mediaKind, 'backdrop')) ? 'image' : 'none'), 'image')) ? 'relative isolate overflow-hidden' : '')]), 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_5], 'children' => $c_10])|noescape}
diff --git a/packages/latte/ui/blocks/hero-head.latte b/packages/latte/ui/blocks/hero-head.latte
new file mode 100644
index 0000000..5d356db
--- /dev/null
+++ b/packages/latte/ui/blocks/hero-head.latte
@@ -0,0 +1,64 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-head.json
+    The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a call to action.
+    Props (p): brand, brandHref, links, current, login, loginHref, cta, href, skip, navLabel, landmarkLabel. *}
+{var $v_brand = ($p['brand'] ?? null)}
+{var $v_brandHref = ($p['brandHref'] ?? null)}
+{var $v_links = ($p['links'] ?? null)}
+{var $v_current = ($p['current'] ?? '')}
+{var $v_login = ($p['login'] ?? null)}
+{var $v_loginHref = ($p['loginHref'] ?? null)}
+{var $v_cta = ($p['cta'] ?? null)}
+{var $v_href = ($p['href'] ?? null)}
+{var $v_skip = ($p['skip'] ?? null)}
+{var $v_navLabel = ($p['navLabel'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_10}
+  {if ui_t($v_skip)}
+    {capture $c_1}
+      {=ui_text($v_skip)}
+    {/capture}
+    {=ui_include('ui/link-plain/link-plain.latte', ['p' => ['Href' => '#main-content', 'Class' => 'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border', 'Attrs' => ui_attrs(['data-testid', 'skip-link'])], 'children' => $c_1])|noescape}
+  {/if}
+  {capture $c_2}
+    {=ui_text($v_brand)}
+  {/capture}
+  {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => $v_brandHref, 'className' => ui_cnv([ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'small']), 'font-medium leading-6 text-background'])]), 'testid' => 'brand'], 'children' => $c_2])|noescape}
+  {if ui_t(ui_and([$v_links, ui_gt(ui_len($v_links), 0)]))}
+    {capture $c_6}
+      {capture $c_5}
+        {foreach ui_l($v_links) as $v_l}
+          {if ui_t(ui_get($v_l, ['href']))}
+            {capture $c_3}
+              {=ui_text(ui_get($v_l, ['name']))}
+            {/capture}
+            {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_get($v_l, ['href'])), 'Variant' => 'default', 'AriaCurrent' => ui_s((ui_t(ui_eq(ui_get($v_l, ['id']), $v_current)) ? 'page' : null)), 'Class' => 'text-xs font-medium leading-5 text-background', 'Attrs' => ui_attrs(['data-testid', 'nav-link'])], 'children' => $c_3])|noescape}
+          {else}
+            {capture $c_4}
+              {=ui_text(ui_get($v_l, ['name']))}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-xs font-medium leading-5 text-background', 'Attrs' => ui_attrs(['data-testid', 'nav-link'])], 'children' => $c_4])|noescape}
+          {/if}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '8', 'Align' => 'center', 'Class' => 'flex-wrap'], 'children' => $c_5])|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [$v_navLabel, $v_landmarkLabel])) : $v_navLabel), 'testid' => 'site-nav'], 'children' => $c_6])|noescape}
+  {/if}
+  {capture $c_9}
+    {if ui_t($v_login)}
+      {capture $c_7}
+        {=ui_text($v_login)}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Href' => ui_s($v_loginHref), 'Variant' => 'ghost', 'Size' => 'sm', 'Class' => 'text-background hover:bg-background/10', 'Attrs' => ui_attrs(['data-testid', 'nav-login'])], 'children' => $c_7])|noescape}
+    {/if}
+    {if ui_t($v_cta)}
+      {capture $c_8}
+        {=ui_text($v_cta)}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Href' => ui_s($v_href), 'Variant' => 'secondary', 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'header-cta'])], 'children' => $c_8])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_9])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'header', 'Class' => ui_s(ui_cnv(['flex w-full flex-wrap items-center justify-between pr-4', ui_preset('blocks/presets/defaults.json', ['hero', 'head'])])), 'Attrs' => ui_attrs(['data-testid', 'hero-head', 'aria-label', $v_landmarkLabel])], 'children' => $c_10])|noescape}
diff --git a/packages/latte/ui/blocks/hero-prompt.latte b/packages/latte/ui/blocks/hero-prompt.latte
new file mode 100644
index 0000000..4c9a008
--- /dev/null
+++ b/packages/latte/ui/blocks/hero-prompt.latte
@@ -0,0 +1,39 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-prompt.json
+    A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic pills.
+    Props (p): title, level, badge, badgeMark, actions, composer, nav, topics, density, landmarkLabel. *}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_badge = ($p['badge'] ?? null)}
+{var $v_badgeMark = ($p['badgeMark'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_composer = ($p['composer'] ?? null)}
+{var $v_nav = ($p['nav'] ?? null)}
+{var $v_topics = ($p['topics'] ?? null)}
+{var $v_density = ($p['density'] ?? 'roomy')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_4}
+  {capture $c_3}
+    {capture $c_2}
+      {=ui_include('blocks/hero-head.latte', ['p' => ['brand' => ui_get($v_nav, ['brand']), 'links' => ui_get($v_nav, ['links']), 'current' => ui_get($v_nav, ['current']), 'login' => ui_get($v_nav, ['login']), 'loginHref' => ui_get($v_nav, ['loginHref']), 'skip' => ui_get($v_nav, ['skip']), 'navLabel' => ui_get($v_nav, ['label']), 'cta' => ui_get($v_actions, ['cta']), 'href' => ui_get($v_actions, ['href']), 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+      {capture $c_1}
+        {if ui_t($v_badge)}
+          {=ui_include('blocks/hero-badge.latte', ['p' => ['label' => $v_badge, 'mark' => $v_badgeMark]])|noescape}
+        {/if}
+        {=ui_include('blocks/weighted-title.latte', ['p' => ['id' => 'home-hero-title', 'title' => $v_title, 'weights' => ui_preset('blocks/presets/defaults.json', ['hero', 'titleWeights']), 'level' => $v_level]])|noescape}
+        {if ui_t(ui_eq(ui_get($v_actions, ['mode']), 'form'))}
+          {=ui_include('blocks/prompt-composer.latte', ['p' => ['label' => ui_get($v_actions, ['emailLabel']), 'attachLabel' => ui_get($v_composer, ['attachLabel']), 'modelLabel' => ui_get($v_composer, ['modelLabel']), 'send' => ui_get($v_actions, ['cta']), 'href' => ui_get($v_actions, ['href'])]])|noescape}
+        {elseif ui_t(ui_get($v_actions, ['cta']))}
+          {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref']), 'align' => (ui_t(true) ? 'center' : 'start')]])|noescape}
+        {/if}
+        {if ui_t(ui_and([$v_topics, ui_gt(ui_len($v_topics), 0)]))}
+          {=ui_include('blocks/topic-chips.latte', ['p' => ['topics' => $v_topics, 'tone' => 'inverse']])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['mx-auto w-full pt-24 pb-16', ui_preset('blocks/presets/defaults.json', ['hero', 'column'])])), 'Attrs' => ui_attrs(['data-testid', 'hero-column'])], 'children' => $c_1])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => 'stretch'], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full px-8', ui_preset('blocks/presets/defaults.json', ['hero', 'container'])])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_3])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => ui_s(ui_cnv(['flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70', ui_preset('blocks/presets/defaults.json', ['hero', 'band'])])), 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : 'home-hero-title'), 'data-testid', 'section', 'data-tone', 'inverse', 'data-density', $v_density, 'data-chrome', 'nav', 'aria-label', $v_landmarkLabel])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/hero-split-extras.latte b/packages/latte/ui/blocks/hero-split-extras.latte
new file mode 100644
index 0000000..6f6f329
--- /dev/null
+++ b/packages/latte/ui/blocks/hero-split-extras.latte
@@ -0,0 +1,124 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-split-extras.json
+    What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small feature cards, or a quote with its author over three figures.
+    Props (p): content, extra. *}
+{var $v_content = ($p['content'] ?? null)}
+{var $v_extra = ($p['extra'] ?? 'none')}
+{if ui_t(ui_and([ui_eq($v_extra, 'stats'), ui_gt(ui_len(ui_get($v_content, ['stats'])), 0)]))}
+  {capture $c_4}
+    {foreach ui_l(ui_get($v_content, ['stats'])) as $v_s}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 3))}
+        {capture $c_3}
+          {capture $c_1}
+            {=ui_text(ui_get($v_s, ['value']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => '2xl', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_get($v_s, ['label']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'hero-stat'])], 'children' => $c_3])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-3 gap-4', 'Attrs' => ui_attrs(['data-testid', 'hero-stats'])], 'children' => $c_4])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_extra, 'avatars'), ui_gt(ui_len(ui_get($v_content, ['people'])), 0)]))}
+  {capture $c_7}
+    {capture $c_5}
+      {foreach ui_l(ui_get($v_content, ['people'])) as $v_p}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_lt($v_i, 4))}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_p, ['author']), 'ratio' => '1/1', 'className' => ui_cnv(['size-10 shrink-0 rounded-full'])]])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_5])|noescape}
+    {capture $c_6}
+      {=ui_text(ui_get($v_content, ['proof']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'flex-wrap', 'Attrs' => ui_attrs(['data-testid', 'hero-proof'])], 'children' => $c_7])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_extra, 'minis'), ui_gt(ui_len(ui_get($v_content, ['features'])), 0)]))}
+  {capture $c_13}
+    {foreach ui_l(ui_get($v_content, ['features'])) as $v_f}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 2))}
+        {capture $c_12}
+          {capture $c_8}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 20]])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_8])|noescape}
+          {capture $c_11}
+            {capture $c_9}
+              {=ui_text(ui_get($v_f, ['title']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_9])|noescape}
+            {capture $c_10}
+              {=ui_text(ui_get($v_f, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_10])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_11])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'hero-mini'])], 'children' => $c_12])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 gap-4 sm:grid-cols-2', 'Attrs' => ui_attrs(['data-testid', 'hero-minis'])], 'children' => $c_13])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_extra, 'quote'), ui_gt(ui_len(ui_get($v_content, ['people'])), 0)]))}
+  {capture $c_24}
+    {foreach ui_l(ui_get($v_content, ['people'])) as $v_p}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 1))}
+        {capture $c_19}
+          {capture $c_14}
+            {=ui_text(ui_get($v_p, ['quote']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Tag' => 'blockquote', 'Class' => 'text-lg font-medium'], 'children' => $c_14])|noescape}
+          {capture $c_18}
+            {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_p, ['author']), 'ratio' => '1/1', 'className' => ui_cnv(['size-10 shrink-0 rounded-full'])]])|noescape}
+            {capture $c_17}
+              {capture $c_15}
+                {=ui_text(ui_get($v_p, ['author']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_15])|noescape}
+              {capture $c_16}
+                {=ui_text(ui_get($v_p, ['role']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_16])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_17])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_18])|noescape}
+        {/capture}
+        {=ui_include('blocks/figure-block.latte', ['p' => ['className' => ui_cnv(['flex flex-col gap-4']), 'testid' => 'hero-quote'], 'children' => $c_19])|noescape}
+      {/if}
+    {/foreach}
+    {capture $c_23}
+      {foreach ui_l(ui_get($v_content, ['stats'])) as $v_s}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_lt($v_i, 3))}
+          {capture $c_22}
+            {capture $c_20}
+              {=ui_text(ui_get($v_s, ['value']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => '2xl', 'Weight' => 'semibold'], 'children' => $c_20])|noescape}
+            {capture $c_21}
+              {=ui_text(ui_get($v_s, ['label']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_21])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'hero-stat'])], 'children' => $c_22])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-3 gap-4', 'Attrs' => ui_attrs(['data-testid', 'hero-stats'])], 'children' => $c_23])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch'], 'children' => $c_24])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/hero-split-media.latte b/packages/latte/ui/blocks/hero-split-media.latte
new file mode 100644
index 0000000..2be093c
--- /dev/null
+++ b/packages/latte/ui/blocks/hero-split-media.latte
@@ -0,0 +1,57 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-split-media.json
+    What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with captions, or a picture with two plan cards floating over it.
+    Props (p): content, alt, media. *}
+{var $v_content = ($p['content'] ?? null)}
+{var $v_alt = ($p['alt'] ?? null)}
+{var $v_media = ($p['media'] ?? 'picture')}
+{if ui_t(ui_eq($v_media, 'picture'))}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_alt, 'ratio' => '4/3']])|noescape}
+{/if}
+{if ui_t(ui_eq($v_media, 'card'))}
+  {=ui_include('blocks/offer-media.latte', ['p' => ['alt' => $v_alt, 'card' => ui_get($v_content, ['card'])]])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_media, 'grid'), ui_gt(ui_len(ui_get($v_content, ['features'])), 0)]))}
+  {capture $c_3}
+    {foreach ui_l(ui_get($v_content, ['features'])) as $v_f}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 4))}
+        {capture $c_2}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_f, ['title']), 'ratio' => '1/1']])|noescape}
+          {capture $c_1}
+            {=ui_text(ui_get($v_f, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_1])|noescape}
+        {/capture}
+        {=ui_include('blocks/figure-block.latte', ['p' => ['className' => ui_cnv(['flex flex-col gap-2']), 'testid' => 'hero-tile'], 'children' => $c_2])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-4', 'Attrs' => ui_attrs(['data-testid', 'hero-grid'])], 'children' => $c_3])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_media, 'plans'), ui_gt(ui_len(ui_get($v_content, ['plans'])), 0)]))}
+  {capture $c_8}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_alt, 'ratio' => '4/3']])|noescape}
+    {foreach ui_l(ui_get($v_content, ['plans'])) as $v_p}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 2))}
+        {capture $c_7}
+          {capture $c_4}
+            {=ui_text(ui_get($v_p, ['name']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+          {capture $c_6}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'check', 'Size' => 16]])|noescape}
+            {capture $c_5}
+              {=ui_text(ui_get($v_p, ['tagline']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_6])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => ui_s(ui_cnv(['absolute w-48 rounded bg-card p-4 shadow-lg', (ui_t(ui_eq($v_i, 0)) ? 'top-8 left-4' : 'right-4 bottom-8')])), 'Attrs' => ui_attrs(['data-testid', 'hero-plan'])], 'children' => $c_7])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'relative', 'Attrs' => ui_attrs(['data-testid', 'hero-media'])], 'children' => $c_8])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/hero-split.latte b/packages/latte/ui/blocks/hero-split.latte
new file mode 100644
index 0000000..990e147
--- /dev/null
+++ b/packages/latte/ui/blocks/hero-split.latte
@@ -0,0 +1,24 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-split.json
+    A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes: extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with captions, plans: two plan cards on the picture), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, actions, content, extra, media, mediaSide, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_content = ($p['content'] ?? null)}
+{var $v_extra = ($p['extra'] ?? 'stats')}
+{var $v_media = ($p['media'] ?? 'picture')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_1}
+  {=ui_include('blocks/hero-split-media.latte', ['p' => ['content' => $v_content, 'alt' => $v_title, 'media' => $v_media]])|noescape}
+{/capture}
+{capture $c_2}
+  {=ui_include('blocks/hero-split-extras.latte', ['p' => ['content' => $v_content, 'extra' => $v_extra]])|noescape}
+  {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref'])]])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge, 'level' => $v_level], 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_1], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/icon-tab.latte b/packages/latte/ui/blocks/icon-tab.latte
new file mode 100644
index 0000000..1d20b04
--- /dev/null
+++ b/packages/latte/ui/blocks/icon-tab.latte
@@ -0,0 +1,10 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/icon-tab.json
+    One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key movement between tabs is the job of IconTabs (see roving).
+    Props (p): active, label, className; children: markup. *}
+{var $v_active = ($p['active'] ?? false)}
+{var $v_label = ($p['label'] ?? null)}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/button-plain/button-plain.latte', ['p' => ['Type' => 'button', 'Role' => 'tab', 'AriaLabel' => ui_s($v_label), 'Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/icon-tab.variants.json', ['state' => (ui_t($v_active) ? 'active' : 'default')]), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['aria-selected', $v_active, 'tabindex', (ui_t($v_active) ? 0 : -1), 'data-slot', 'icon-tab', 'data-state', (ui_t($v_active) ? 'active' : 'default')])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/icon-tabs.latte b/packages/latte/ui/blocks/icon-tabs.latte
new file mode 100644
index 0000000..8b93c76
--- /dev/null
+++ b/packages/latte/ui/blocks/icon-tabs.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/icon-tabs.json
+    A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).
+    Props (p): label, className; children: markup. *}
+{var $v_label = ($p['label'] ?? null)}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex items-center gap-2', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'tablist', 'aria-label', $v_label, 'data-slot', 'icon-tabs'])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/icon-wall.latte b/packages/latte/ui/blocks/icon-wall.latte
new file mode 100644
index 0000000..ea105d0
--- /dev/null
+++ b/packages/latte/ui/blocks/icon-wall.latte
@@ -0,0 +1,35 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/icon-wall.json
+    A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the label, chip: icon beside it), tone, density.
+    Props (p): id, title, features, empty, cols, item, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_features = ($p['features'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_cols = ($p['cols'] ?? '4')}
+{var $v_item = ($p['item'] ?? 'tile')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_askedCols = (ui_t(ui_and([ui_eq($v_item, 'chip'), ui_eq($v_cols, '6')])) ? '2-6' : (ui_t(ui_eq($v_cols, '2')) ? '2' : (ui_t(ui_eq($v_cols, '3')) ? '2-3' : (ui_t(ui_eq($v_cols, '4')) ? '2-4' : '3-6'))))}
+{var $v_wallCols = ui_fit_cols($v_askedCols, ui_len($v_features))}
+{capture $c_4}
+  {if ui_t(ui_eq(ui_len($v_features), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layout-grid', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_3}
+      {foreach ui_l($v_features) as $v_f}
+        {capture $c_2}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => ui_i((ui_t(ui_eq($v_item, 'tile')) ? 24 : 16))]])|noescape}
+          {capture $c_1}
+            {=ui_text(ui_get($v_f, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex items-center gap-2', 'rounded bg-card inset-ring inset-ring-border', (ui_t(ui_eq($v_item, 'tile')) ? ui_cnv(['flex-col justify-center text-center', (ui_t(ui_eq($v_density, 'compact')) ? 'p-4' : 'p-6')]) : 'px-4 py-2')])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_2])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s($v_wallCols), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_3])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/job-board.latte b/packages/latte/ui/blocks/job-board.latte
new file mode 100644
index 0000000..77eed1f
--- /dev/null
+++ b/packages/latte/ui/blocks/job-board.latte
@@ -0,0 +1,66 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/job-board.json
+    Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place, the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide), tone.
+    Props (p): id, title, lead, jobs, departments, labels, layout, salary, tone, empty, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_jobs = ($p['jobs'] ?? null)}
+{var $v_departments = ($p['departments'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_salary = ($p['salary'] ?? 'hide')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_12}
+  {if ui_t(ui_eq(ui_len($v_jobs), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'briefcase', 'title' => $v_empty]])|noescape}
+  {elseif ui_t(ui_eq($v_layout, 'grouped'))}
+    {capture $c_11}
+      {foreach ui_l($v_departments) as $v_d}
+        {capture $c_10}
+          {capture $c_3}
+            {capture $c_1}
+              {=ui_text(ui_get($v_d, ['name']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'lg', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_tpl(ui_get($v_labels, ['count']), [ui_len(ui_where($v_jobs, 'dept', ui_get($v_d, ['id'])))]))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'baseline', 'Justify' => 'between'], 'children' => $c_3])|noescape}
+          {capture $c_9}
+            {foreach ui_l(ui_where($v_jobs, 'dept', ui_get($v_d, ['id']))) as $v_j}
+              {capture $c_8}
+                {capture $c_6}
+                  {capture $c_4}
+                    {=ui_text(ui_get($v_j, ['title']))}
+                  {/capture}
+                  {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_j, ['href']), 'className' => ui_cnv(['font-medium'])], 'children' => $c_4])|noescape}
+                  {capture $c_5}
+                    {=ui_text(ui_tpl('{0}, {1}', [ui_get($v_j, ['location']), ui_get($v_j, ['type'])]))}
+                  {/capture}
+                  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+                {/capture}
+                {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_6])|noescape}
+                {capture $c_7}
+                  {=ui_text(ui_get($v_j, ['type']))}
+                {/capture}
+                {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default'], 'children' => $c_7])|noescape}
+              {/capture}
+              {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex flex-wrap items-center justify-between gap-4 border-b border-border py-4', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_8])|noescape}
+            {/foreach}
+          {/capture}
+          {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col'], 'children' => $c_9])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'group'])], 'children' => $c_10])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '8', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'groups'])], 'children' => $c_11])|noescape}
+  {else}
+    {=ui_include('blocks/job-cards.latte', ['p' => ['jobs' => $v_jobs, 'departments' => $v_departments, 'labels' => $v_labels, 'layout' => $v_layout, 'salary' => $v_salary]])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'measure' => (ui_t(ui_eq($v_layout, 'grouped')) ? '3xl' : 'default'), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_12])|noescape}
diff --git a/packages/latte/ui/blocks/job-cards.latte b/packages/latte/ui/blocks/job-cards.latte
new file mode 100644
index 0000000..5c4d02b
--- /dev/null
+++ b/packages/latte/ui/blocks/job-cards.latte
@@ -0,0 +1,154 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/job-cards.json
+    The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply) or as a table.
+    Props (p): jobs, departments, labels, layout, salary. *}
+{var $v_jobs = ($p['jobs'] ?? null)}
+{var $v_departments = ($p['departments'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_salary = ($p['salary'] ?? 'hide')}
+{if ui_t(ui_eq($v_layout, 'table'))}
+  {capture $c_21}
+    {capture $c_20}
+      {capture $c_1}
+        {=ui_text(ui_get($v_labels, ['caption']))}
+      {/capture}
+      {=ui_include('ui/table/table-caption.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_1])|noescape}
+      {capture $c_10}
+        {capture $c_9}
+          {capture $c_2}
+            {=ui_text(ui_get($v_labels, ['role']))}
+          {/capture}
+          {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'px-4 py-2'], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_text(ui_get($v_labels, ['team']))}
+          {/capture}
+          {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'hidden py-2 md:table-cell'], 'children' => $c_3])|noescape}
+          {capture $c_4}
+            {=ui_text(ui_get($v_labels, ['location']))}
+          {/capture}
+          {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'hidden py-2 sm:table-cell'], 'children' => $c_4])|noescape}
+          {capture $c_5}
+            {=ui_text(ui_get($v_labels, ['type']))}
+          {/capture}
+          {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_5])|noescape}
+          {if ui_t(ui_eq($v_salary, 'show'))}
+            {capture $c_6}
+              {=ui_text(ui_get($v_labels, ['salary']))}
+            {/capture}
+            {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'hidden py-2 md:table-cell'], 'children' => $c_6])|noescape}
+          {/if}
+          {capture $c_8}
+            {capture $c_7}
+              {=ui_text(ui_get($v_labels, ['apply']))}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_7])|noescape}
+          {/capture}
+          {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2 pr-4'], 'children' => $c_8])|noescape}
+        {/capture}
+        {=ui_include('ui/table/table-row.latte', ['p' => [], 'children' => $c_9])|noescape}
+      {/capture}
+      {=ui_include('ui/table/table-head.latte', ['p' => ['Class' => 'bg-muted'], 'children' => $c_10])|noescape}
+      {capture $c_19}
+        {foreach ui_l($v_jobs) as $v_j}
+          {capture $c_18}
+            {capture $c_11}
+              {=ui_text(ui_get($v_j, ['title']))}
+            {/capture}
+            {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'px-4 py-4 font-medium'], 'children' => $c_11])|noescape}
+            {capture $c_12}
+              {=ui_text(ui_first_of(ui_where($v_departments, 'id', ui_get($v_j, ['dept'])), 'name'))}
+            {/capture}
+            {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'hidden md:table-cell'], 'children' => $c_12])|noescape}
+            {capture $c_13}
+              {=ui_text(ui_get($v_j, ['location']))}
+            {/capture}
+            {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'hidden sm:table-cell'], 'children' => $c_13])|noescape}
+            {capture $c_14}
+              {=ui_text(ui_get($v_j, ['type']))}
+            {/capture}
+            {=ui_include('ui/table/table-cell.latte', ['p' => [], 'children' => $c_14])|noescape}
+            {if ui_t(ui_eq($v_salary, 'show'))}
+              {capture $c_15}
+                {=ui_text(ui_get($v_j, ['salary']))}
+              {/capture}
+              {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'hidden md:table-cell'], 'children' => $c_15])|noescape}
+            {/if}
+            {capture $c_17}
+              {capture $c_16}
+                {=ui_text(ui_get($v_labels, ['apply']))}
+              {/capture}
+              {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_j, ['href']), 'className' => ui_cnv(['font-medium'])], 'children' => $c_16])|noescape}
+            {/capture}
+            {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'pr-4 text-right'], 'children' => $c_17])|noescape}
+          {/capture}
+          {=ui_include('ui/table/table-row.latte', ['p' => ['Class' => 'border-t border-border', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_18])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/table/table-body.latte', ['p' => [], 'children' => $c_19])|noescape}
+    {/capture}
+    {=ui_include('ui/table/table.latte', ['p' => ['Class' => 'w-full text-left text-sm', 'Attrs' => ui_attrs(['data-testid', 'job-table'])], 'children' => $c_20])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'w-full overflow-x-auto rounded inset-ring inset-ring-border'], 'children' => $c_21])|noescape}
+{else}
+  {capture $c_36}
+    {foreach ui_l($v_jobs) as $v_j}
+      {capture $c_35}
+        {capture $c_30}
+          {capture $c_22}
+            {=ui_text(ui_get($v_j, ['title']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'lg', 'Weight' => 'semibold'], 'children' => $c_22])|noescape}
+          {capture $c_29}
+            {capture $c_24}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'briefcase', 'Size' => 16]])|noescape}
+              {capture $c_23}
+                {=ui_text(ui_get($v_j, ['type']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_23])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_24])|noescape}
+            {capture $c_26}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'map-pin', 'Size' => 16]])|noescape}
+              {capture $c_25}
+                {=ui_text(ui_get($v_j, ['location']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_25])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_26])|noescape}
+            {capture $c_28}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'calendar', 'Size' => 16]])|noescape}
+              {capture $c_27}
+                {=ui_text(ui_get($v_j, ['posted']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_27])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_28])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Class' => 'flex-wrap text-sm text-muted-foreground'], 'children' => $c_29])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_30])|noescape}
+        {if ui_t(ui_eq($v_salary, 'show'))}
+          {capture $c_31}
+            {=ui_text(ui_get($v_j, ['salary']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'semibold', 'Attrs' => ui_attrs(['data-testid', 'salary'])], 'children' => $c_31])|noescape}
+        {/if}
+        {capture $c_34}
+          {capture $c_32}
+            {=ui_text(ui_first_of(ui_where($v_departments, 'id', ui_get($v_j, ['dept'])), 'name'))}
+          {/capture}
+          {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'default'], 'children' => $c_32])|noescape}
+          {capture $c_33}
+            {=ui_text(ui_get($v_labels, ['apply']))}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+          {/capture}
+          {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_j, ['href']), 'className' => ui_cnv(['inline-flex items-center gap-2 text-sm font-medium'])], 'children' => $c_33])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'mt-auto'], 'children' => $c_34])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_35])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-2', 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_36])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/kanban-board.latte b/packages/latte/ui/blocks/kanban-board.latte
new file mode 100644
index 0000000..93597e5
--- /dev/null
+++ b/packages/latte/ui/blocks/kanban-board.latte
@@ -0,0 +1,66 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/kanban-board.json
+    Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card between lanes is a port contract.
+    Props (p): id, title, lanes, empty, cards, countLabel, card, cols, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lanes = ($p['lanes'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_cards = ($p['cards'] ?? null)}
+{var $v_countLabel = ($p['countLabel'] ?? null)}
+{var $v_card = ($p['card'] ?? 'detail')}
+{var $v_cols = ($p['cols'] ?? '3')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_12}
+  {if ui_t(ui_eq(ui_len($v_lanes), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'kanban', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_11}
+      {foreach ui_l($v_lanes) as $v_lane}
+        {capture $c_10}
+          {capture $c_3}
+            {capture $c_1}
+              {=ui_text(ui_get($v_lane, ['title']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_tpl($v_countLabel, [ui_len(ui_where($v_cards, 'lane', ui_get($v_lane, ['key'])))]))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Justify' => 'between'], 'children' => $c_3])|noescape}
+          {capture $c_9}
+            {foreach ui_l(ui_where($v_cards, 'lane', ui_get($v_lane, ['key']))) as $v_c}
+              {capture $c_8}
+                {capture $c_4}
+                  {=ui_text(ui_get($v_c, ['title']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+                {if ui_t(ui_eq($v_card, 'detail'))}
+                  {capture $c_7}
+                    {capture $c_5}
+                      {=ui_text(ui_get($v_c, ['tag']))}
+                    {/capture}
+                    {=ui_include('blocks/pill.latte', ['p' => ['tone' => 'blue', 'icon' => 'tag'], 'children' => $c_5])|noescape}
+                    {capture $c_6}
+                      {=ui_text(ui_get($v_c, ['who']))}
+                    {/capture}
+                    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+                  {/capture}
+                  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'flex-wrap'], 'children' => $c_7])|noescape}
+                {/if}
+              {/capture}
+              {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col rounded bg-card inset-ring inset-ring-border', (ui_t(ui_eq($v_density, 'compact')) ? 'gap-2 p-2' : 'gap-2 p-4')])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_8])|noescape}
+            {/foreach}
+          {/capture}
+          {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0'], 'children' => $c_9])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'rounded bg-muted p-4', 'Attrs' => ui_attrs(['data-testid', 'lane'])], 'children' => $c_10])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_cols, '2')) ? '1-2' : '1-3')), 'Class' => 'items-start gap-4', 'Attrs' => ui_attrs(['data-testid', 'lanes'])], 'children' => $c_11])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_12])|noescape}
diff --git a/packages/latte/ui/blocks/logo-cloud.latte b/packages/latte/ui/blocks/logo-cloud.latte
new file mode 100644
index 0000000..01ac725
--- /dev/null
+++ b/packages/latte/ui/blocks/logo-cloud.latte
@@ -0,0 +1,39 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/logo-cloud.json
+    A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row), columns (2, 3, 4), item (name, icon only, tile), density, tone.
+    Props (p): id, title, logos, empty, layout, cols, item, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_logos = ($p['logos'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_cols = ($p['cols'] ?? '4')}
+{var $v_item = ($p['item'] ?? 'name')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_eq(ui_len($v_logos), 0))}
+  {capture $c_1}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'building-2', 'title' => $v_empty]])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'align' => 'center', 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_1])|noescape}
+{elseif ui_t(ui_eq($v_layout, 'row'))}
+  {=ui_include('blocks/logo-ribbon.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'logos' => $v_logos, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+{else}
+  {capture $c_5}
+    {capture $c_4}
+      {foreach ui_l($v_logos) as $v_logo}
+        {capture $c_3}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_logo, ['icon'])), 'Size' => 24]])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_get($v_logo, ['name']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold', 'Class' => ui_s((ui_t(ui_eq($v_item, 'icon')) ? 'sr-only' : ''))], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Justify' => 'center', 'Class' => ui_s(ui_cnv(['text-muted-foreground', (ui_t(ui_eq($v_item, 'tile')) ? 'flex-col rounded p-4 inset-ring inset-ring-border' : '')])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_3])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_cols, '2')) ? '2' : (ui_t(ui_eq($v_cols, '3')) ? '2-3' : (ui_t(ui_eq($v_cols, '4')) ? '2-4' : '3-6')))), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_4])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'align' => 'center', 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_5])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/logo-ribbon.latte b/packages/latte/ui/blocks/logo-ribbon.latte
new file mode 100644
index 0000000..2dbe2b4
--- /dev/null
+++ b/packages/latte/ui/blocks/logo-ribbon.latte
@@ -0,0 +1,26 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/logo-ribbon.json
+    A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset.
+    Props (p): id, title, logos, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_logos = ($p['logos'] ?? null)}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_4}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => 'xl', 'Weight' => 'semibold', 'Class' => 'leading-7', 'Attrs' => ui_attrs(['id', ui_add($v_id, '-title')])], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {foreach ui_l($v_logos) as $v_logo}
+        {=ui_include('blocks/logo-slot.latte', ['p' => ['name' => ui_get($v_logo, ['name']), 'icon' => ui_get($v_logo, ['icon'])]])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '0', 'Justify' => 'center', 'Align' => 'start', 'Class' => ui_s(ui_cnv(['flex w-full flex-wrap', ui_preset('blocks/presets/defaults.json', ['logos', 'row'])])), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'center', 'Attrs' => ui_attrs(['data-testid', 'logos-block'])], 'children' => $c_3])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'tone' => $v_tone, 'density' => $v_density, 'measure' => 'fill', 'align' => 'center', 'className' => ui_cnv(['py-0']), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/logo-sidebar.latte b/packages/latte/ui/blocks/logo-sidebar.latte
new file mode 100644
index 0000000..4ca3224
--- /dev/null
+++ b/packages/latte/ui/blocks/logo-sidebar.latte
@@ -0,0 +1,23 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/logo-sidebar.json
+    The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The variant picks the padding (recipe).
+    Props (p): variant, name, className, mark (slot), actions (slot). *}
+{var $v_variant = ($p['variant'] ?? 'chat')}
+{var $v_name = ($p['name'] ?? null)}
+{capture $c_4}
+  {capture $c_2}
+    {=($p['mark'] ?? '')|noescape}
+    {capture $c_1}
+      {=ui_text($v_name)}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden', 'Attrs' => ui_attrs(['data-slot', 'logo-sidebar-name'])], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex items-center gap-4', 'Attrs' => ui_attrs(['data-slot', 'logo-sidebar-brand'])], 'children' => $c_2])|noescape}
+  {if ui_t(((($p['actions'] ?? null) !== null)))}
+    {capture $c_3}
+      {=($p['actions'] ?? '')|noescape}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex items-center gap-2 in-data-[nav=collapsed]:hidden', 'Attrs' => ui_attrs(['data-slot', 'logo-sidebar-actions'])], 'children' => $c_3])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/logo-sidebar.variants.json', ['variant' => $v_variant]), 'in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'logo-sidebar'])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/logo-slot.latte b/packages/latte/ui/blocks/logo-slot.latte
new file mode 100644
index 0000000..5375184
--- /dev/null
+++ b/packages/latte/ui/blocks/logo-slot.latte
@@ -0,0 +1,14 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/logo-slot.json
+    One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only.
+    Props (p): name, icon. *}
+{var $v_name = ($p['name'] ?? null)}
+{var $v_icon = ($p['icon'] ?? null)}
+{capture $c_2}
+  {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s($v_icon), 'Size' => ui_i(ui_preset('blocks/presets/defaults.json', ['logos', 'glyph']))]])|noescape}
+  {capture $c_1}
+    {=ui_text($v_name)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold', 'Class' => 'sr-only'], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex shrink-0 items-center justify-center text-muted-foreground', ui_preset('blocks/presets/defaults.json', ['logos', 'slot'])])), 'Attrs' => ui_attrs(['data-testid', 'item', 'data-slot', 'logo-slot'])], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/media-contacts.latte b/packages/latte/ui/blocks/media-contacts.latte
new file mode 100644
index 0000000..62b0955
--- /dev/null
+++ b/packages/latte/ui/blocks/media-contacts.latte
@@ -0,0 +1,47 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-contacts.json
+    The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card.
+    Props (p): extras, labels. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_9}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_text(ui_get($v_labels, ['list']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+    {foreach ui_l(ui_get($v_extras, ['channels'])) as $v_c}
+      {var $v_i = $iterator->counter0}
+      {capture $c_2}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_c, ['icon'])), 'Size' => 16]])|noescape}
+        {=ui_text(ui_get($v_c, ['title']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Href' => ui_s(ui_get($v_c, ['href'])), 'Class' => 'w-full gap-2', 'Attrs' => ui_attrs(['data-testid', 'media-channel'])], 'children' => $c_2])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch'], 'children' => $c_3])|noescape}
+  {capture $c_8}
+    {capture $c_4}
+      {=ui_text(ui_get($v_labels, ['figures']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+    {foreach ui_l(ui_get($v_extras, ['stats'])) as $v_s}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 3))}
+        {capture $c_7}
+          {capture $c_5}
+            {=ui_text(ui_get($v_s, ['label']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+          {capture $c_6}
+            {=ui_text(ui_get($v_s, ['value']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_6])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between', 'Attrs' => ui_attrs(['data-testid', 'media-stat'])], 'children' => $c_7])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4'], 'children' => $c_8])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch'], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/media-figures.latte b/packages/latte/ui/blocks/media-figures.latte
new file mode 100644
index 0000000..0d8b71d
--- /dev/null
+++ b/packages/latte/ui/blocks/media-figures.latte
@@ -0,0 +1,25 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-figures.json
+    The figures of MediaList: four in two columns, centered, or three in a row.
+    Props (p): extras, mode. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_mode = ($p['mode'] ?? 'grid')}
+{capture $c_4}
+  {foreach ui_l(ui_get($v_extras, ['stats'])) as $v_s}
+    {var $v_i = $iterator->counter0}
+    {if ui_t(ui_lt($v_i, (ui_t(ui_eq($v_mode, 'grid')) ? 4 : 3)))}
+      {capture $c_3}
+        {capture $c_1}
+          {=ui_text(ui_get($v_s, ['value']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => '3xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text(ui_get($v_s, ['label']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => ui_s((ui_t(ui_eq($v_mode, 'grid')) ? 'center' : 'start')), 'Attrs' => ui_attrs(['data-testid', 'media-stat'])], 'children' => $c_3])|noescape}
+    {/if}
+  {/foreach}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_mode, 'grid')) ? 'grid grid-cols-2 gap-6 text-center' : 'grid grid-cols-3 gap-6'))], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/media-frame.latte b/packages/latte/ui/blocks/media-frame.latte
new file mode 100644
index 0000000..08cd487
--- /dev/null
+++ b/packages/latte/ui/blocks/media-frame.latte
@@ -0,0 +1,16 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/media-frame.json
+    A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the corners are the plain theme radius.
+    Props (p): alt, src, darkSrc, ratio, className. *}
+{var $k_PLACEHOLDER = ['light' => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNlMmU4ZjAiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjOTRhM2I4IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+', 'dark' => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxZTI5M2IiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjNDc1NTY5IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+']}
+{var $v_alt = ($p['alt'] ?? null)}
+{var $v_src = ($p['src'] ?? null)}
+{var $v_darkSrc = ($p['darkSrc'] ?? null)}
+{var $v_ratio = ($p['ratio'] ?? '16/9')}
+{var $v_lightSrc = ui_coalesce([$v_src, ui_at($k_PLACEHOLDER, 'light')])}
+{var $v_nightSrc = ui_coalesce([$v_darkSrc, $v_src, ui_at($k_PLACEHOLDER, 'dark')])}
+{capture $c_1}
+  {=ui_include('ui/image/image.latte', ['p' => ['Src' => ui_s($v_lightSrc), 'Alt' => ui_s($v_alt), 'Class' => 'absolute inset-0 size-full object-cover dark:hidden', 'Attrs' => ui_attrs(['data-theme-src', 'light'])]])|noescape}
+  {=ui_include('ui/image/image.latte', ['p' => ['Src' => ui_s($v_nightSrc), 'Alt' => ui_s($v_alt), 'Class' => 'absolute inset-0 hidden size-full object-cover dark:block', 'Attrs' => ui_attrs(['data-theme-src', 'dark'])]])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/media-frame.variants.json', ['ratio' => $v_ratio]), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'media-frame', 'data-placeholder', (ui_t($v_src) ? 'false' : 'true')])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/media-list.latte b/packages/latte/ui/blocks/media-list.latte
new file mode 100644
index 0000000..bb46e44
--- /dev/null
+++ b/packages/latte/ui/blocks/media-list.latte
@@ -0,0 +1,54 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-list.json
+    A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts, contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.
+    Props (p): id, title, lead, badge, extras, labels, actions, layout, mediaSide, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'figures')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_1}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => (ui_t(ui_or([ui_eq($v_layout, 'steps'), ui_eq($v_layout, 'topics')])) ? '1/1' : '4/3')]])|noescape}
+{/capture}
+{capture $c_2}
+  {if ui_t(ui_or([ui_eq($v_layout, 'figures'), ui_eq($v_layout, 'proof')]))}
+    {if ui_t(ui_gt(ui_len(ui_get($v_extras, ['stats'])), 0))}
+      {=ui_include('blocks/media-figures.latte', ['p' => ['extras' => $v_extras, 'mode' => (ui_t(ui_eq($v_layout, 'proof')) ? 'row' : 'grid')]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'proof'))}
+    {if ui_t(ui_gt(ui_len(ui_get($v_extras, ['reviews'])), 0))}
+      {=ui_include('blocks/media-review.latte', ['p' => ['extras' => $v_extras, 'labels' => $v_labels]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'steps'))}
+    {if ui_t(ui_gt(ui_len(ui_get($v_extras, ['steps'])), 0))}
+      {=ui_include('blocks/media-steps.latte', ['p' => ['extras' => $v_extras, 'labels' => $v_labels]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'posts'))}
+    {if ui_t(ui_gt(ui_len(ui_get($v_extras, ['posts'])), 0))}
+      {=ui_include('blocks/media-posts.latte', ['p' => ['extras' => $v_extras, 'labels' => $v_labels]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'topics'))}
+    {if ui_t(ui_gt(ui_len(ui_get($v_extras, ['topics'])), 0))}
+      {=ui_include('blocks/media-topics.latte', ['p' => ['extras' => $v_extras, 'labels' => $v_labels]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(ui_eq($v_layout, 'contact'))}
+    {if ui_t(ui_gt(ui_len(ui_get($v_extras, ['channels'])), 0))}
+      {=ui_include('blocks/media-contacts.latte', ['p' => ['extras' => $v_extras, 'labels' => $v_labels]])|noescape}
+    {/if}
+  {/if}
+  {if ui_t(!(ui_eq($v_layout, 'contact')))}
+    {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref'])]])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_1], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/media-posts.latte b/packages/latte/ui/blocks/media-posts.latte
new file mode 100644
index 0000000..fc8a51b
--- /dev/null
+++ b/packages/latte/ui/blocks/media-posts.latte
@@ -0,0 +1,33 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-posts.json
+    The latest posts of MediaList as rows: a dot, the title, the date and reading time.
+    Props (p): extras, labels. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_6}
+  {capture $c_1}
+    {=ui_text(ui_get($v_labels, ['list']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+  {foreach ui_l(ui_get($v_extras, ['posts'])) as $v_p}
+    {var $v_i = $iterator->counter0}
+    {if ui_t(ui_lt($v_i, 3))}
+      {capture $c_5}
+        {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'mt-2 size-2 shrink-0 rounded-full bg-primary']])|noescape}
+        {capture $c_4}
+          {capture $c_2}
+            {=ui_text(ui_get($v_p, ['title']))}
+          {/capture}
+          {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_p, ['href']), 'className' => ui_cnv(['text-sm font-medium']), 'size' => 'sm'], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_text(ui_tpl('{0} · {1}', [ui_get($v_p, ['date']), ui_tpl(ui_get($v_labels, ['minutes']), [ui_get($v_p, ['minutes'])])]))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Attrs' => ui_attrs(['data-testid', 'media-post'])], 'children' => $c_5])|noescape}
+    {/if}
+  {/foreach}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/media-review.latte b/packages/latte/ui/blocks/media-review.latte
new file mode 100644
index 0000000..196c4fd
--- /dev/null
+++ b/packages/latte/ui/blocks/media-review.latte
@@ -0,0 +1,30 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-review.json
+    The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author.
+    Props (p): extras, labels. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{foreach ui_l(ui_get($v_extras, ['reviews'])) as $v_r}
+  {var $v_i = $iterator->counter0}
+  {if ui_t(ui_lt($v_i, 1))}
+    {capture $c_5}
+      {capture $c_2}
+        {capture $c_1}
+          {=ui_text(ui_get($v_labels, ['featured']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'medium'], 'children' => $c_1])|noescape}
+        {=ui_include('blocks/rating.latte', ['p' => ['value' => ui_get($v_r, ['rating']), 'label' => ui_tpl(ui_get($v_labels, ['rating']), [ui_get($v_r, ['rating'])])]])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'flex-wrap'], 'children' => $c_2])|noescape}
+      {capture $c_3}
+        {=ui_text(ui_tpl('“{0}”', [ui_get($v_r, ['text'])]))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base'], 'children' => $c_3])|noescape}
+      {capture $c_4}
+        {=ui_text(ui_tpl('{0} · {1}', [ui_get($v_r, ['author']), ui_get($v_r, ['date'])]))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'rounded bg-muted p-6', 'Attrs' => ui_attrs(['data-testid', 'media-review'])], 'children' => $c_5])|noescape}
+  {/if}
+{/foreach}
diff --git a/packages/latte/ui/blocks/media-steps.latte b/packages/latte/ui/blocks/media-steps.latte
new file mode 100644
index 0000000..91cfa5e
--- /dev/null
+++ b/packages/latte/ui/blocks/media-steps.latte
@@ -0,0 +1,38 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-steps.json
+    The steps of MediaList as numbered rows: the number, a glyph, the title and the text.
+    Props (p): extras, labels. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_8}
+  {capture $c_1}
+    {=ui_text(ui_get($v_labels, ['list']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+  {foreach ui_l(ui_get($v_extras, ['steps'])) as $v_s}
+    {var $v_i = $iterator->counter0}
+    {capture $c_7}
+      {capture $c_2}
+        {=ui_text(ui_tpl('0{0}', [ui_str(ui_add($v_i, 1))]))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold', 'Class' => 'w-6 shrink-0 text-primary'], 'children' => $c_2])|noescape}
+      {capture $c_3}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_s, ['icon'])), 'Size' => 16]])|noescape}
+      {/capture}
+      {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-6 shrink-0 items-center justify-center text-primary'], 'children' => $c_3])|noescape}
+      {capture $c_6}
+        {capture $c_4}
+          {=ui_text(ui_get($v_s, ['title']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+        {capture $c_5}
+          {=ui_text(ui_get($v_s, ['text']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_6])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Attrs' => ui_attrs(['data-testid', 'media-step'])], 'children' => $c_7])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/media-topics.latte b/packages/latte/ui/blocks/media-topics.latte
new file mode 100644
index 0000000..355ed88
--- /dev/null
+++ b/packages/latte/ui/blocks/media-topics.latte
@@ -0,0 +1,37 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-topics.json
+    The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow.
+    Props (p): extras, labels. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_7}
+  {capture $c_1}
+    {=ui_text(ui_get($v_labels, ['list']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+  {foreach ui_l(ui_get($v_extras, ['topics'])) as $v_c}
+    {var $v_i = $iterator->counter0}
+    {if ui_t(ui_lt($v_i, 5))}
+      {capture $c_6}
+        {capture $c_2}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_c, ['icon'])), 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground'], 'children' => $c_2])|noescape}
+        {capture $c_5}
+          {capture $c_3}
+            {=ui_text(ui_get($v_c, ['name']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_3])|noescape}
+          {capture $c_4}
+            {=ui_text(ui_tpl(ui_get($v_labels, ['count']), [ui_get($v_c, ['count'])]))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'min-w-0 flex-1'], 'children' => $c_5])|noescape}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+      {/capture}
+      {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_c, ['href']), 'className' => ui_cnv(['rounded bg-card inset-ring inset-ring-border flex w-full items-center gap-4 p-4']), 'variant' => 'block', 'testid' => 'media-topic', 'block' => true], 'children' => $c_6])|noescape}
+    {/if}
+  {/foreach}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/mega-menu.latte b/packages/latte/ui/blocks/mega-menu.latte
new file mode 100644
index 0000000..6cae68b
--- /dev/null
+++ b/packages/latte/ui/blocks/mega-menu.latte
@@ -0,0 +1,95 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/mega-menu.json
+    A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed), cols (2, 3), promo (none, card).
+    Props (p): label, brand, brandHref, trigger, links, groups, promoTitle, promoText, panel, cols, promo, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_brand = ($p['brand'] ?? null)}
+{var $v_brandHref = ($p['brandHref'] ?? null)}
+{var $v_trigger = ($p['trigger'] ?? null)}
+{var $v_links = ($p['links'] ?? null)}
+{var $v_groups = ($p['groups'] ?? null)}
+{var $v_promoTitle = ($p['promoTitle'] ?? null)}
+{var $v_promoText = ($p['promoText'] ?? null)}
+{var $v_panel = ($p['panel'] ?? 'open')}
+{var $v_cols = ($p['cols'] ?? '3')}
+{var $v_promo = ($p['promo'] ?? 'none')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_7}
+  {capture $c_6}
+    {capture $c_1}
+      {=ui_text($v_brand)}
+    {/capture}
+    {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => $v_brandHref, 'className' => ui_cnv(['text-lg font-medium']), 'testid' => 'brand'], 'children' => $c_1])|noescape}
+    {capture $c_5}
+      {capture $c_4}
+        {capture $c_2}
+          {=ui_text($v_trigger)}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-down', 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/button-plain/button-plain.latte', ['p' => ['Type' => 'button', 'Class' => 'inline-flex items-center gap-2 text-sm font-semibold', 'Attrs' => ui_attrs(['aria-expanded', (ui_t(ui_eq($v_panel, 'open')) ? 'true' : 'false'), 'data-testid', 'mega-trigger'])], 'children' => $c_2])|noescape}
+        {foreach ui_l($v_links) as $v_l}
+          {capture $c_3}
+            {=ui_text(ui_get($v_l, ['name']))}
+          {/capture}
+          {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_l, ['href']), 'className' => ui_cnv(['text-sm']), 'current' => ui_eq(ui_get($v_l, ['id']), ''), 'testid' => 'nav-link'], 'children' => $c_3])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'flex-wrap'], 'children' => $c_4])|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [$v_label, $v_landmarkLabel])) : $v_label), 'className' => ui_cnv(['flex-1'])], 'children' => $c_5])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-wrap items-center gap-6 py-4'])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_6])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'header', 'Class' => 'relative border-b border-border bg-background', 'Attrs' => ui_attrs(['data-testid', 'mega-menu', 'aria-label', $v_landmarkLabel])], 'children' => $c_7])|noescape}
+{if ui_t(ui_eq($v_panel, 'open'))}
+  {capture $c_19}
+    {capture $c_18}
+      {if ui_t(ui_gt(ui_len($v_groups), 0))}
+        {capture $c_14}
+          {foreach ui_l($v_groups) as $v_g}
+            {capture $c_13}
+              {capture $c_9}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_g, ['icon'])), 'Size' => 16]])|noescape}
+                {capture $c_8}
+                  {=ui_text(ui_get($v_g, ['title']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_8])|noescape}
+              {/capture}
+              {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_9])|noescape}
+              {capture $c_12}
+                {foreach ui_l(ui_get($v_g, ['links'])) as $v_item}
+                  {capture $c_11}
+                    {capture $c_10}
+                      {=ui_text(ui_get($v_item, ['name']))}
+                    {/capture}
+                    {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_item, ['href']), 'className' => ui_cnv(['text-sm text-muted-foreground'])], 'children' => $c_10])|noescape}
+                  {/capture}
+                  {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_11])|noescape}
+                {/foreach}
+              {/capture}
+              {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0'], 'children' => $c_12])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_13])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_cols, '2')) ? '1-2' : '1-3')), 'Class' => 'gap-6', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_14])|noescape}
+      {/if}
+      {if ui_t(ui_eq($v_promo, 'card'))}
+        {capture $c_17}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_coalesce([$v_promoTitle, '']), 'ratio' => '4/3']])|noescape}
+          {capture $c_15}
+            {=ui_text($v_promoTitle)}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_15])|noescape}
+          {capture $c_16}
+            {=ui_text($v_promoText)}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_16])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'promo'])], 'children' => $c_17])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'grid gap-8 py-6', (ui_t(ui_eq($v_promo, 'card')) ? 'md:grid-cols-[1fr_16rem]' : '')])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_18])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'border-t border-border bg-card', 'Attrs' => ui_attrs(['data-testid', 'mega-panel'])], 'children' => $c_19])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/member-row.latte b/packages/latte/ui/blocks/member-row.latte
new file mode 100644
index 0000000..076f800
--- /dev/null
+++ b/packages/latte/ui/blocks/member-row.latte
@@ -0,0 +1,56 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/member-row.json
+    One member of TeamGrid beside a small portrait: the name, the role, then the department and the place (detailed, directory), the bio (detailed) and the skills (detailed, list).
+    Props (p): member, depts, layout. *}
+{var $v_member = ($p['member'] ?? null)}
+{var $v_depts = ($p['depts'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'list')}
+{capture $c_11}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_member, ['name']), 'ratio' => '1/1', 'className' => ui_cnv([ui_cnv([(ui_t(ui_eq($v_layout, 'detailed')) ? 'size-16' : 'size-12'), 'shrink-0'])])]])|noescape}
+  {capture $c_10}
+    {capture $c_3}
+      {capture $c_1}
+        {=ui_text(ui_get($v_member, ['name']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+      {capture $c_2}
+        {=ui_text(ui_get($v_member, ['role']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_3])|noescape}
+    {if ui_t(!(ui_eq($v_layout, 'list')))}
+      {capture $c_6}
+        {capture $c_4}
+          {=ui_text(ui_at($v_depts, ui_get($v_member, ['dept'])))}
+        {/capture}
+        {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm'], 'children' => $c_4])|noescape}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'map-pin', 'Size' => 16]])|noescape}
+        {capture $c_5}
+          {=ui_text(ui_get($v_member, ['location']))}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_5])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => 'flex-wrap text-xs text-muted-foreground'], 'children' => $c_6])|noescape}
+    {/if}
+    {if ui_t(ui_eq($v_layout, 'detailed'))}
+      {capture $c_7}
+        {=ui_text(ui_get($v_member, ['bio']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+    {/if}
+    {if ui_t(!(ui_eq($v_layout, 'directory')))}
+      {capture $c_9}
+        {foreach ui_l(ui_get($v_member, ['skills'])) as $v_k}
+          {capture $c_8}
+            {=ui_text($v_k)}
+          {/capture}
+          {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm'], 'children' => $c_8])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Class' => 'flex-wrap'], 'children' => $c_9])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'min-w-0 flex-1'], 'children' => $c_10])|noescape}
+{/capture}
+{=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'detailed')) ? 'rounded bg-card inset-ring inset-ring-border flex-col p-6' : (ui_t(ui_eq($v_layout, 'directory')) ? 'rounded bg-card inset-ring inset-ring-border p-4' : 'border-b border-border pb-4'))), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/menu-entry.latte b/packages/latte/ui/blocks/menu-entry.latte
new file mode 100644
index 0000000..d9e4b85
--- /dev/null
+++ b/packages/latte/ui/blocks/menu-entry.latte
@@ -0,0 +1,26 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/menu-entry.json
+    One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.
+    Props (p): href, current, variant, size, testid, block, className; children: markup. *}
+{var $v_href = ($p['href'] ?? null)}
+{var $v_current = ($p['current'] ?? false)}
+{var $v_variant = ($p['variant'] ?? 'default')}
+{var $v_size = ($p['size'] ?? 'default')}
+{var $v_testid = ($p['testid'] ?? null)}
+{var $v_block = ($p['block'] ?? false)}
+{if ui_t($v_href)}
+  {capture $c_1}
+    {=($children ?? '')|noescape}
+  {/capture}
+  {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s($v_href), 'Variant' => ui_s($v_variant), 'Size' => ui_s($v_size), 'AriaCurrent' => ui_s((ui_t($v_current) ? 'page' : null)), 'Class' => ui_s(($p['className'] ?? '')), 'Attrs' => ui_attrs(['data-testid', $v_testid])], 'children' => $c_1])|noescape}
+{elseif ui_t($v_block)}
+  {capture $c_2}
+    {=($children ?? '')|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(($p['className'] ?? '')), 'Attrs' => ui_attrs(['aria-current', (ui_t($v_current) ? 'page' : null), 'data-testid', $v_testid])], 'children' => $c_2])|noescape}
+{else}
+  {capture $c_3}
+    {=($children ?? '')|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s(($p['className'] ?? '')), 'Attrs' => ui_attrs(['aria-current', (ui_t($v_current) ? 'page' : null), 'data-testid', $v_testid])], 'children' => $c_3])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/meter-row.latte b/packages/latte/ui/blocks/meter-row.latte
new file mode 100644
index 0000000..2d64b65
--- /dev/null
+++ b/packages/latte/ui/blocks/meter-row.latte
@@ -0,0 +1,57 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/meter-row.json
+    A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With `href` the whole row is a link.
+    Props (p): label, value, caption, hint, href, className. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_value = ($p['value'] ?? null)}
+{var $v_caption = ($p['caption'] ?? null)}
+{var $v_hint = ($p['hint'] ?? null)}
+{var $v_href = ($p['href'] ?? null)}
+{capture $c_11}
+  {if ui_t($v_href)}
+    {capture $c_5}
+      {capture $c_3}
+        {capture $c_1}
+          {=ui_text($v_label)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 min-w-0 truncate text-sm font-bold text-foreground'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text($v_caption)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex items-baseline justify-between gap-4'], 'children' => $c_3])|noescape}
+      {=ui_include('ui/form/progress.latte', ['p' => ['Value' => ui_s(ui_str($v_value)), 'Max' => '100', 'Attrs' => ui_attrs(['aria-label', $v_label])]])|noescape}
+      {if ui_t($v_hint)}
+        {capture $c_4}
+          {=ui_text($v_hint)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-medium text-muted-foreground'], 'children' => $c_4])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s($v_href), 'Variant' => 'block', 'Class' => 'flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted'], 'children' => $c_5])|noescape}
+  {else}
+    {capture $c_10}
+      {capture $c_8}
+        {capture $c_6}
+          {=ui_text($v_label)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 min-w-0 truncate text-sm font-bold text-foreground'], 'children' => $c_6])|noescape}
+        {capture $c_7}
+          {=ui_text($v_caption)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground'], 'children' => $c_7])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex items-baseline justify-between gap-4'], 'children' => $c_8])|noescape}
+      {=ui_include('ui/form/progress.latte', ['p' => ['Value' => ui_s(ui_str($v_value)), 'Max' => '100', 'Attrs' => ui_attrs(['aria-label', $v_label])]])|noescape}
+      {if ui_t($v_hint)}
+        {capture $c_9}
+          {=ui_text($v_hint)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-medium text-muted-foreground'], 'children' => $c_9])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-w-0 flex-col gap-2 p-2'], 'children' => $c_10])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['min-w-0', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'meter-row'])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/metric-row.latte b/packages/latte/ui/blocks/metric-row.latte
new file mode 100644
index 0000000..4e8bf25
--- /dev/null
+++ b/packages/latte/ui/blocks/metric-row.latte
@@ -0,0 +1,51 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/metric-row.json
+    Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes: columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).
+    Props (p): id, title, metrics, empty, cols, item, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_metrics = ($p['metrics'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_cols = ($p['cols'] ?? '4')}
+{var $v_item = ($p['item'] ?? 'tile')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_8}
+  {if ui_t(ui_eq(ui_len($v_metrics), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'gauge', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_7}
+      {foreach ui_l($v_metrics) as $v_m}
+        {if ui_t(ui_eq($v_item, 'tile'))}
+          {capture $c_1}
+            {=ui_include('blocks/stat-tile.latte', ['p' => ['label' => ui_get($v_m, ['label']), 'value' => ui_get($v_m, ['value']), 'icon' => ui_get($v_m, ['icon']), 'hint' => ui_get($v_m, ['hint'])]])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_1])|noescape}
+        {else}
+          {capture $c_6}
+            {capture $c_3}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_m, ['icon'])), 'Size' => 16]])|noescape}
+              {capture $c_2}
+                {=ui_text(ui_get($v_m, ['label']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs'], 'children' => $c_2])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+            {capture $c_4}
+              {=ui_text(ui_get($v_m, ['value']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => '2xl', 'Weight' => 'bold'], 'children' => $c_4])|noescape}
+            {capture $c_5}
+              {=ui_text(ui_get($v_m, ['hint']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'rounded bg-card p-4 inset-ring inset-ring-border', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_6])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_cols, '2')) ? '1-2' : '1-4')), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_7])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/milestone-timeline.latte b/packages/latte/ui/blocks/milestone-timeline.latte
new file mode 100644
index 0000000..cddb240
--- /dev/null
+++ b/packages/latte/ui/blocks/milestone-timeline.latte
@@ -0,0 +1,51 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/milestone-timeline.json
+    Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone, density.
+    Props (p): id, title, lead, milestones, empty, layout, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_milestones = ($p['milestones'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_layout = ($p['layout'] ?? 'split')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_8}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4']])|noescape}
+{/capture}
+{capture $c_9}
+  {if ui_t(ui_eq(ui_len($v_milestones), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'milestone', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_7}
+      {foreach ui_l($v_milestones) as $v_m}
+        {capture $c_6}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'row')) ? 'absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary' : 'absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary')), 'Attrs' => ui_attrs(['aria-hidden', 'true'])]])|noescape}
+          {capture $c_3}
+            {capture $c_1}
+              {=ui_text(ui_get($v_m, ['date']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_get($v_m, ['tag']))}
+            {/capture}
+            {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_3])|noescape}
+          {capture $c_4}
+            {=ui_text(ui_get($v_m, ['title']))}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'lg', 'Weight' => 'bold'], 'children' => $c_4])|noescape}
+          {capture $c_5}
+            {=ui_text(ui_get($v_m, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'row')) ? 'relative flex flex-col gap-2 pt-6' : 'relative flex flex-col gap-2 pl-6')), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_6])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ol', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'row')) ? 'grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4' : 'flex flex-col gap-8 border-l border-border')), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_7])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'density' => $v_density, 'layout' => (ui_t(ui_eq($v_layout, 'split')) ? 'split' : 'stack'), 'media' => ['show' => ui_eq($v_layout, 'split'), 'side' => 'start', 'align' => 'start'], 'measure' => (ui_t(ui_eq($v_layout, 'stacked')) ? '2xl' : 'default'), 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_8], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/nav-actions.latte b/packages/latte/ui/blocks/nav-actions.latte
new file mode 100644
index 0000000..983b91f
--- /dev/null
+++ b/packages/latte/ui/blocks/nav-actions.latte
@@ -0,0 +1,29 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-actions.json
+    The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the press). No wrapper: they sit in the row of the bar.
+    Props (p): login, loginHref, cta, ctaHref, actions, tone, themeLabel. *}
+{var $v_login = ($p['login'] ?? null)}
+{var $v_loginHref = ($p['loginHref'] ?? null)}
+{var $v_cta = ($p['cta'] ?? null)}
+{var $v_ctaHref = ($p['ctaHref'] ?? null)}
+{var $v_actions = ($p['actions'] ?? 'cta')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_themeLabel = ($p['themeLabel'] ?? null)}
+{if ui_t($v_login)}
+  {capture $c_1}
+    {=ui_text($v_login)}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Href' => ui_s($v_loginHref), 'Class' => ui_s((ui_t(ui_eq($v_tone, 'inverse')) ? 'text-background hover:bg-background/10' : '')), 'Attrs' => ui_attrs(['data-testid', 'nav-login'])], 'children' => $c_1])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_actions, 'cta'), $v_cta]))}
+  {capture $c_2}
+    {=ui_text($v_cta)}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => ui_s((ui_t(ui_eq($v_tone, 'inverse')) ? 'secondary' : 'default')), 'Size' => 'sm', 'Href' => ui_s($v_ctaHref), 'Attrs' => ui_attrs(['data-testid', 'header-cta'])], 'children' => $c_2])|noescape}
+{/if}
+{if ui_t($v_themeLabel)}
+  {capture $c_3}
+    {=ui_text($v_themeLabel)}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'theme-toggle'])], 'children' => $c_3])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/nav-bar-menu.latte b/packages/latte/ui/blocks/nav-bar-menu.latte
new file mode 100644
index 0000000..cc5f501
--- /dev/null
+++ b/packages/latte/ui/blocks/nav-bar-menu.latte
@@ -0,0 +1,14 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-bar-menu.json
+    The links of NavBar in a nav landmark; left out when there are no links.
+    Props (p): label, links, current, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_links = ($p['links'] ?? null)}
+{var $v_current = ($p['current'] ?? '')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_gt(ui_len($v_links), 0))}
+  {capture $c_1}
+    {=ui_include('blocks/nav-links.latte', ['p' => ['links' => $v_links, 'current' => $v_current]])|noescape}
+  {/capture}
+  {=ui_include('blocks/nav-block.latte', ['p' => ['label' => $v_label, 'className' => ui_cnv(['order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0']), 'testid' => 'site-nav', 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_1])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/nav-bar.latte b/packages/latte/ui/blocks/nav-bar.latte
new file mode 100644
index 0000000..4f642ed
--- /dev/null
+++ b/packages/latte/ui/blocks/nav-bar.latte
@@ -0,0 +1,69 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-bar.json
+    A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the middle with the links on both sides; search: a search field with its shortcut in the middle), over (none, media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark hero band). Turning solid on scroll is a port contract.
+    Props (p): label, brand, brandHref, links, current, actions, search, tone, layout, over, skip, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_brand = ($p['brand'] ?? null)}
+{var $v_brandHref = ($p['brandHref'] ?? null)}
+{var $v_links = ($p['links'] ?? null)}
+{var $v_current = ($p['current'] ?? '')}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_search = ($p['search'] ?? null)}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_layout = ($p['layout'] ?? 'inline')}
+{var $v_over = ($p['over'] ?? 'none')}
+{var $v_skip = ($p['skip'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_12}
+  {=ui_include('blocks/over-media.latte', ['p' => ['on' => ui_eq($v_over, 'media'), 'alt' => $v_brand]])|noescape}
+  {if ui_t($v_skip)}
+    {capture $c_1}
+      {=ui_text($v_skip)}
+    {/capture}
+    {=ui_include('ui/link-plain/link-plain.latte', ['p' => ['Href' => '#main-content', 'Class' => 'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border', 'Attrs' => ui_attrs(['data-testid', 'skip-link'])], 'children' => $c_1])|noescape}
+  {/if}
+  {capture $c_11}
+    {capture $c_10}
+      {if ui_t(ui_eq($v_layout, 'split'))}
+        {capture $c_8}
+          {capture $c_7}
+            {capture $c_2}
+              {=ui_include('blocks/nav-links.latte', ['p' => ['links' => $v_links, 'current' => $v_current, 'side' => 'left']])|noescape}
+            {/capture}
+            {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'md:justify-self-start'], 'children' => $c_2])|noescape}
+            {capture $c_4}
+              {capture $c_3}
+                {=ui_text($v_brand)}
+              {/capture}
+              {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => $v_brandHref, 'className' => ui_cnv(['text-lg font-medium']), 'testid' => 'brand'], 'children' => $c_3])|noescape}
+            {/capture}
+            {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'text-center'], 'children' => $c_4])|noescape}
+            {capture $c_6}
+              {capture $c_5}
+                {=ui_include('blocks/nav-links.latte', ['p' => ['links' => $v_links, 'current' => $v_current, 'side' => 'right']])|noescape}
+              {/capture}
+              {=ui_include('ui/box/box.latte', ['p' => [], 'children' => $c_5])|noescape}
+              {=ui_include('blocks/nav-actions.latte', ['p' => ['login' => ui_get($v_actions, ['login']), 'loginHref' => ui_get($v_actions, ['loginHref']), 'cta' => ui_get($v_actions, ['cta']), 'ctaHref' => ui_get($v_actions, ['href']), 'actions' => ui_get($v_actions, ['mode']), 'tone' => $v_tone, 'themeLabel' => ui_get($v_actions, ['themeLabel'])]])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'end', 'Class' => 'flex-wrap md:justify-self-end'], 'children' => $c_6])|noescape}
+          {/capture}
+          {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-3', 'Class' => 'w-full items-center gap-4'], 'children' => $c_7])|noescape}
+        {/capture}
+        {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [$v_label, $v_landmarkLabel])) : $v_label), 'className' => ui_cnv(['w-full']), 'testid' => 'site-nav'], 'children' => $c_8])|noescape}
+      {else}
+        {capture $c_9}
+          {=ui_text($v_brand)}
+        {/capture}
+        {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => $v_brandHref, 'className' => ui_cnv(['text-lg font-medium']), 'testid' => 'brand'], 'children' => $c_9])|noescape}
+        {if ui_t(ui_eq($v_layout, 'search'))}
+          {=ui_include('blocks/search-palette.latte', ['p' => ['label' => ui_get($v_search, ['label']), 'shortcut' => ui_get($v_search, ['shortcut'])]])|noescape}
+        {/if}
+        {=ui_include('blocks/nav-bar-menu.latte', ['p' => ['label' => $v_label, 'links' => $v_links, 'current' => $v_current, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+        {=ui_include('blocks/nav-actions.latte', ['p' => ['login' => ui_get($v_actions, ['login']), 'loginHref' => ui_get($v_actions, ['loginHref']), 'cta' => ui_get($v_actions, ['cta']), 'ctaHref' => ui_get($v_actions, ['href']), 'actions' => ui_get($v_actions, ['mode']), 'tone' => $v_tone, 'themeLabel' => ui_get($v_actions, ['themeLabel'])]])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-wrap items-center justify-between gap-4', 'py-4']))], 'children' => $c_10])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => 'mx-auto w-full max-w-6xl px-4', 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_11])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'header', 'Class' => ui_s(ui_cnv(['relative', (ui_t(ui_eq($v_tone, 'inverse')) ? 'border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background' : 'border-b border-border bg-background'), (ui_t(ui_eq($v_over, 'media')) ? 'isolate overflow-hidden border-0 bg-transparent' : '')])), 'Attrs' => ui_attrs(['data-testid', 'nav-bar', 'data-layout', $v_layout, 'data-tone', $v_tone, 'aria-label', $v_landmarkLabel])], 'children' => $c_12])|noescape}
diff --git a/packages/latte/ui/blocks/nav-block.latte b/packages/latte/ui/blocks/nav-block.latte
new file mode 100644
index 0000000..67a2198
--- /dev/null
+++ b/packages/latte/ui/blocks/nav-block.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-block.json
+    A navigation region in its own file: Block tag nav named by `label`.
+    Props (p): label, testid, landmarkLabel, className; children: markup. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_testid = ($p['testid'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'nav', 'Class' => ui_s(ui_cnv([($p['className'] ?? '')])), 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_label]), 'data-testid', $v_testid])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/nav-item-row.latte b/packages/latte/ui/blocks/nav-item-row.latte
new file mode 100644
index 0000000..3cd755a
--- /dev/null
+++ b/packages/latte/ui/blocks/nav-item-row.latte
@@ -0,0 +1,25 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/nav-item-row.json
+    The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the right.
+    Props (p): inner, reserveRight, icon (slot), right (slot); children: markup. *}
+{var $v_inner = ($p['inner'] ?? null)}
+{var $v_reserveRight = ($p['reserveRight'] ?? false)}
+{capture $c_4}
+  {capture $c_2}
+    {=($p['icon'] ?? '')|noescape}
+    {capture $c_1}
+      {=($children ?? '')|noescape}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden', 'Attrs' => ui_attrs(['data-slot', 'nav-item-label'])], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center', 'Attrs' => ui_attrs(['data-slot', 'nav-item-left'])], 'children' => $c_2])|noescape}
+  {if ui_t(((($p['right'] ?? null) !== null)))}
+    {capture $c_3}
+      {=($p['right'] ?? '')|noescape}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex items-center gap-2 in-data-[nav=collapsed]:hidden', 'Attrs' => ui_attrs(['data-slot', 'nav-item-right'])], 'children' => $c_3])|noescape}
+  {elseif ui_t($v_reserveRight)}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'size-5 shrink-0 in-data-[nav=collapsed]:hidden', 'Attrs' => ui_attrs(['data-slot', 'nav-item-right'])]])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s($v_inner), 'Attrs' => ui_attrs(['data-slot', 'nav-item-content'])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/nav-item.latte b/packages/latte/ui/blocks/nav-item.latte
new file mode 100644
index 0000000..f0c3db3
--- /dev/null
+++ b/packages/latte/ui/blocks/nav-item.latte
@@ -0,0 +1,38 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/nav-item.json
+    A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a button, otherwise a static box.
+    Props (p): selected, level, href, interactive, reserveRight, contentClass, className, icon (slot), right (slot); children: markup. *}
+{var $v_selected = ($p['selected'] ?? false)}
+{var $v_level = ($p['level'] ?? null)}
+{var $v_href = ($p['href'] ?? null)}
+{var $v_interactive = ($p['interactive'] ?? false)}
+{var $v_reserveRight = ($p['reserveRight'] ?? false)}
+{var $v_contentClass = ($p['contentClass'] ?? null)}
+{var $v_state = (ui_t($v_selected) ? 'selected' : 'default')}
+{var $v_outer = ui_cnv([ui_recipe('blocks/recipes/nav-item.variants.json', ['level' => $v_level, 'state' => $v_state]), 'group in-data-[nav=collapsed]:justify-center', ($p['className'] ?? '')])}
+{var $v_inner = ui_cnv([ui_recipe('blocks/recipes/nav-item-content.variants.json', ['level' => $v_level, 'state' => $v_state]), ui_and([!(ui_t($v_selected)), 'group-hover:bg-muted']), 'in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0', $v_contentClass])}
+{if ui_t($v_href)}
+  {capture $c_2}
+    {capture $c_1}
+      {=($children ?? '')|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-item-row.latte', ['p' => ['inner' => $v_inner, 'reserveRight' => $v_reserveRight, 'icon' => ($p['icon'] ?? null), 'right' => ($p['right'] ?? null)], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/link-plain/link-plain.latte', ['p' => ['Href' => ui_s($v_href), 'Class' => ui_s($v_outer), 'AriaCurrent' => ui_s((ui_t($v_selected) ? 'page' : null)), 'Attrs' => ui_attrs(['data-slot', 'nav-item', 'data-state', $v_state])], 'children' => $c_2])|noescape}
+{elseif ui_t($v_interactive)}
+  {capture $c_4}
+    {capture $c_3}
+      {=($children ?? '')|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-item-row.latte', ['p' => ['inner' => $v_inner, 'reserveRight' => $v_reserveRight, 'icon' => ($p['icon'] ?? null), 'right' => ($p['right'] ?? null)], 'children' => $c_3])|noescape}
+  {/capture}
+  {=ui_include('ui/button-plain/button-plain.latte', ['p' => ['Type' => 'button', 'Class' => ui_s(ui_cnv([$v_outer, 'text-left'])), 'Attrs' => ui_attrs(['aria-current', (ui_t($v_selected) ? 'page' : null), 'data-slot', 'nav-item', 'data-state', $v_state])], 'children' => $c_4])|noescape}
+{else}
+  {capture $c_6}
+    {capture $c_5}
+      {=($children ?? '')|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-item-row.latte', ['p' => ['inner' => $v_inner, 'reserveRight' => $v_reserveRight, 'icon' => ($p['icon'] ?? null), 'right' => ($p['right'] ?? null)], 'children' => $c_5])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s($v_outer), 'Attrs' => ui_attrs(['aria-current', (ui_t($v_selected) ? 'page' : null), 'data-slot', 'nav-item', 'data-state', $v_state])], 'children' => $c_6])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/nav-links.latte b/packages/latte/ui/blocks/nav-links.latte
new file mode 100644
index 0000000..bcd63a2
--- /dev/null
+++ b/packages/latte/ui/blocks/nav-links.latte
@@ -0,0 +1,22 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-links.json
+    The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half of the list.
+    Props (p): links, current, side. *}
+{var $v_links = ($p['links'] ?? null)}
+{var $v_current = ($p['current'] ?? '')}
+{var $v_side = ($p['side'] ?? 'all')}
+{var $v_count = ui_len($v_links)}
+{if ui_t(ui_gt(ui_len($v_links), 0))}
+  {capture $c_2}
+    {foreach ui_l($v_links) as $v_l}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_or([ui_eq($v_side, 'all'), ui_eq(ui_lt(ui_mul($v_i, 2), $v_count), ui_eq($v_side, 'left'))]))}
+        {capture $c_1}
+          {=ui_text(ui_get($v_l, ['name']))}
+        {/capture}
+        {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_l, ['href']), 'className' => ui_cnv(['text-sm']), 'current' => ui_eq(ui_get($v_l, ['id']), $v_current), 'testid' => 'nav-link'], 'children' => $c_1])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'flex-wrap'], 'children' => $c_2])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/newsletter-form.latte b/packages/latte/ui/blocks/newsletter-form.latte
new file mode 100644
index 0000000..62195d8
--- /dev/null
+++ b/packages/latte/ui/blocks/newsletter-form.latte
@@ -0,0 +1,42 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/newsletter-form.json
+    An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start, center).
+    Props (p): id, title, text, label, submit, consent, layout, terms, tone, align, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_submit = ($p['submit'] ?? null)}
+{var $v_consent = ($p['consent'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'inline')}
+{var $v_terms = ($p['terms'] ?? 'hide')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_align = ($p['align'] ?? 'center')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_6}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+{/capture}
+{capture $c_7}
+  {capture $c_5}
+    {capture $c_1}
+      {=ui_text($v_label)}
+    {/capture}
+    {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-email', [$v_id])), 'Class' => 'sr-only'], 'children' => $c_1])|noescape}
+    {capture $c_3}
+      {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'email', 'Name' => 'email', 'Class' => 'min-w-0 flex-1', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-email', [$v_id]), 'data-testid', 'field'])]])|noescape}
+      {capture $c_2}
+        {=ui_text($v_submit)}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'submit', 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => ui_s(ui_cnv(['w-full', (ui_t(ui_eq($v_layout, 'stacked')) ? 'flex-col items-stretch' : 'flex-wrap')]))], 'children' => $c_3])|noescape}
+    {if ui_t(ui_and([ui_eq($v_terms, 'show'), $v_consent]))}
+      {capture $c_4}
+        {=ui_text($v_consent)}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'consent'])], 'children' => $c_4])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/form/form.latte', ['p' => ['Method' => 'dialog', 'Class' => ui_s(ui_cnv(['w-full max-w-md', (ui_t(ui_eq($v_align, 'center')) ? 'mx-auto' : '')])), 'Attrs' => ui_attrs(['data-testid', 'newsletter-form'])], 'children' => $c_5])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_text, 'tone' => $v_tone, 'align' => $v_align, 'layout' => (ui_t(ui_eq($v_layout, 'split')) ? 'split' : 'stack'), 'media' => ['show' => ui_eq($v_layout, 'split')], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_6], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/notice.latte b/packages/latte/ui/blocks/notice.latte
new file mode 100644
index 0000000..f5b021f
--- /dev/null
+++ b/packages/latte/ui/blocks/notice.latte
@@ -0,0 +1,15 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/notice.json
+    A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text renders nothing visible.
+    Props (p): text. *}
+{var $v_text = ($p['text'] ?? null)}
+{capture $c_2}
+  {if ui_t($v_text)}
+    {capture $c_1}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'circle-check', 'Size' => 16]])|noescape}
+      {=ui_text($v_text)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold text-background shadow-lg'], 'children' => $c_1])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'contents', 'Attrs' => ui_attrs(['role', 'status', 'data-testid', 'notice'])], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/number-field.latte b/packages/latte/ui/blocks/number-field.latte
new file mode 100644
index 0000000..9ab5a8c
--- /dev/null
+++ b/packages/latte/ui/blocks/number-field.latte
@@ -0,0 +1,22 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/number-field.json
+    A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its ring). Static markup: the buttons carry no logic; the page wires them.
+    Props (p): value, name, min, label, decrease, increase. *}
+{var $v_value = ($p['value'] ?? '')}
+{var $v_name = ($p['name'] ?? '')}
+{var $v_min = ($p['min'] ?? '')}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_decrease = ($p['decrease'] ?? null)}
+{var $v_increase = ($p['increase'] ?? null)}
+{capture $c_3}
+  {capture $c_1}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'minus', 'Size' => 16]])|noescape}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'Type' => 'button', 'AriaLabel' => ui_s($v_decrease), 'Attrs' => ui_attrs(['data-testid', 'decrease'])], 'children' => $c_1])|noescape}
+  {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'number', 'Name' => ui_s($v_name), 'Value' => ui_s($v_value), 'Min' => ui_s($v_min), 'AriaLabel' => ui_s($v_label), 'Size' => 'sm', 'Class' => 'number-bare w-8 bg-transparent px-0 text-center inset-ring-0']])|noescape}
+  {capture $c_2}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'plus', 'Size' => 16]])|noescape}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'Type' => 'button', 'AriaLabel' => ui_s($v_increase), 'Attrs' => ui_attrs(['data-testid', 'increase'])], 'children' => $c_2])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input', 'Attrs' => ui_attrs(['data-slot', 'number-field'])], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/offer-media.latte b/packages/latte/ui/blocks/offer-media.latte
new file mode 100644
index 0000000..cf45e44
--- /dev/null
+++ b/packages/latte/ui/blocks/offer-media.latte
@@ -0,0 +1,28 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/offer-media.json
+    The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats over the picture).
+    Props (p): alt, card. *}
+{var $v_alt = ($p['alt'] ?? null)}
+{var $v_card = ($p['card'] ?? null)}
+{capture $c_6}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_alt, 'ratio' => '4/3']])|noescape}
+  {capture $c_5}
+    {capture $c_1}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_card, ['icon'])), 'Size' => 20]])|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_1])|noescape}
+    {capture $c_4}
+      {capture $c_2}
+        {=ui_text(ui_get($v_card, ['title']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+      {capture $c_3}
+        {=ui_text(ui_get($v_card, ['text']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_4])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Class' => 'absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg', 'Attrs' => ui_attrs(['data-testid', 'offer-card'])], 'children' => $c_5])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'relative', 'Attrs' => ui_attrs(['data-testid', 'hero-media'])], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/order-rows.latte b/packages/latte/ui/blocks/order-rows.latte
new file mode 100644
index 0000000..f5bc5ce
--- /dev/null
+++ b/packages/latte/ui/blocks/order-rows.latte
@@ -0,0 +1,75 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/order-rows.json
+    The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill.
+    Props (p): orders, statuses, labels, density. *}
+{var $v_orders = ($p['orders'] ?? null)}
+{var $v_statuses = ($p['statuses'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_density = ($p['density'] ?? 'default')}
+{capture $c_18}
+  {capture $c_17}
+    {capture $c_1}
+      {=ui_text(ui_get($v_labels, ['caption']))}
+    {/capture}
+    {=ui_include('ui/table/table-caption.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_1])|noescape}
+    {capture $c_8}
+      {capture $c_7}
+        {capture $c_2}
+          {=ui_text(ui_get($v_labels, ['number']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_2])|noescape}
+        {capture $c_3}
+          {=ui_text(ui_get($v_labels, ['date']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_3])|noescape}
+        {capture $c_4}
+          {=ui_text(ui_get($v_labels, ['items']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_4])|noescape}
+        {capture $c_5}
+          {=ui_text(ui_get($v_labels, ['total']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_5])|noescape}
+        {capture $c_6}
+          {=ui_text(ui_get($v_labels, ['status']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('ui/table/table-row.latte', ['p' => [], 'children' => $c_7])|noescape}
+    {/capture}
+    {=ui_include('ui/table/table-head.latte', ['p' => [], 'children' => $c_8])|noescape}
+    {capture $c_16}
+      {foreach ui_l($v_orders) as $v_o}
+        {capture $c_15}
+          {capture $c_9}
+            {=ui_text(ui_get($v_o, ['number']))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => ui_s(ui_cnv(['font-semibold', (ui_t(ui_eq($v_density, 'compact')) ? 'py-2' : 'py-4')]))], 'children' => $c_9])|noescape}
+          {capture $c_10}
+            {=ui_text(ui_get($v_o, ['date']))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => [], 'children' => $c_10])|noescape}
+          {capture $c_11}
+            {=ui_text(ui_tpl(ui_get($v_labels, ['itemsCount']), [ui_get($v_o, ['items'])]))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => [], 'children' => $c_11])|noescape}
+          {capture $c_12}
+            {=ui_text(ui_money(ui_get($v_o, ['total']), ui_get($v_o, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => [], 'children' => $c_12])|noescape}
+          {capture $c_14}
+            {capture $c_13}
+              {=ui_text(ui_at($v_statuses, ui_get($v_o, ['status'])))}
+            {/capture}
+            {=ui_include('blocks/pill.latte', ['p' => ['tone' => (ui_t(ui_eq(ui_get($v_o, ['status']), 'paid')) ? 'green' : (ui_t(ui_eq(ui_get($v_o, ['status']), 'shipped')) ? 'blue' : (ui_t(ui_eq(ui_get($v_o, ['status']), 'pending')) ? 'amber' : 'gray')))], 'children' => $c_13])|noescape}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => [], 'children' => $c_14])|noescape}
+        {/capture}
+        {=ui_include('ui/table/table-row.latte', ['p' => ['Class' => 'border-t border-border', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_15])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/table/table-body.latte', ['p' => [], 'children' => $c_16])|noescape}
+  {/capture}
+  {=ui_include('ui/table/table.latte', ['p' => ['Class' => 'w-full text-left text-sm', 'Attrs' => ui_attrs(['data-testid', 'order-table'])], 'children' => $c_17])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'w-full overflow-x-auto'], 'children' => $c_18])|noescape}
diff --git a/packages/latte/ui/blocks/order-summary.latte b/packages/latte/ui/blocks/order-summary.latte
new file mode 100644
index 0000000..f740aeb
--- /dev/null
+++ b/packages/latte/ui/blocks/order-summary.latte
@@ -0,0 +1,56 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/order-summary.json
+    The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout (card, plain), cta (show, hide), note (show, hide), density, tone.
+    Props (p): id, title, rows, empty, labels, layout, cta, note, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_rows = ($p['rows'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'card')}
+{var $v_cta = ($p['cta'] ?? 'show')}
+{var $v_note = ($p['note'] ?? 'show')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_9}
+  {if ui_t(ui_eq(ui_len($v_rows), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'receipt', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_8}
+      {capture $c_7}
+        {capture $c_4}
+          {foreach ui_l($v_rows) as $v_row}
+            {capture $c_3}
+              {capture $c_1}
+                {=ui_text(ui_get($v_row, ['label']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_1])|noescape}
+              {capture $c_2}
+                {=ui_text(ui_money(ui_get($v_row, ['amount']), ui_get($v_row, ['currency'])))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_2])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex items-center justify-between gap-4', (ui_t(ui_get($v_row, ['strong'])) ? 'border-t border-border pt-4 text-base font-bold' : 'text-sm text-muted-foreground')])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_3])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col gap-4'], 'children' => $c_4])|noescape}
+        {if ui_t(ui_eq($v_cta, 'show'))}
+          {capture $c_5}
+            {=ui_text(ui_get($v_labels, ['checkout']))}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Class' => 'w-full', 'Attrs' => ui_attrs(['data-testid', 'checkout'])], 'children' => $c_5])|noescape}
+        {/if}
+        {if ui_t(ui_eq($v_note, 'show'))}
+          {capture $c_6}
+            {=ui_text(ui_get($v_labels, ['note']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_7])|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv([(ui_t(ui_eq($v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')])), 'Attrs' => ui_attrs(['data-testid', 'summary'])], 'children' => $c_8])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'measure' => 'md', 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/order-table.latte b/packages/latte/ui/blocks/order-table.latte
new file mode 100644
index 0000000..2e016f5
--- /dev/null
+++ b/packages/latte/ui/blocks/order-table.latte
@@ -0,0 +1,66 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/order-table.json
+    The order history as a table or as cards: number, date, items, total and a status pill, with an optional pager. Axes: layout (table, cards), pager (show, hide), tone, density.
+    Props (p): id, title, orders, empty, statuses, labels, layout, pager, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_orders = ($p['orders'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_statuses = ($p['statuses'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'table')}
+{var $v_pager = ($p['pager'] ?? 'show')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_11}
+  {if ui_t(ui_eq(ui_len($v_orders), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'package', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_10}
+      {if ui_t(ui_eq($v_layout, 'table'))}
+        {=ui_include('blocks/order-rows.latte', ['p' => ['orders' => $v_orders, 'statuses' => $v_statuses, 'labels' => $v_labels, 'density' => $v_density]])|noescape}
+      {else}
+        {capture $c_9}
+          {foreach ui_l($v_orders) as $v_o}
+            {capture $c_8}
+              {capture $c_7}
+                {capture $c_3}
+                  {capture $c_1}
+                    {=ui_text(ui_get($v_o, ['number']))}
+                  {/capture}
+                  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+                  {capture $c_2}
+                    {=ui_text(ui_get($v_o, ['date']))}
+                  {/capture}
+                  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+                {/capture}
+                {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_3])|noescape}
+                {capture $c_4}
+                  {=ui_text(ui_tpl(ui_get($v_labels, ['itemsCount']), [ui_get($v_o, ['items'])]))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_4])|noescape}
+                {capture $c_5}
+                  {=ui_text(ui_money(ui_get($v_o, ['total']), ui_get($v_o, ['currency'])))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'bold'], 'children' => $c_5])|noescape}
+                {capture $c_6}
+                  {=ui_text(ui_at($v_statuses, ui_get($v_o, ['status'])))}
+                {/capture}
+                {=ui_include('blocks/pill.latte', ['p' => ['tone' => (ui_t(ui_eq(ui_get($v_o, ['status']), 'paid')) ? 'green' : (ui_t(ui_eq(ui_get($v_o, ['status']), 'shipped')) ? 'blue' : (ui_t(ui_eq(ui_get($v_o, ['status']), 'pending')) ? 'amber' : 'gray')))], 'children' => $c_6])|noescape}
+              {/capture}
+              {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => 'flex flex-wrap items-center justify-between gap-4'], 'children' => $c_7])|noescape}
+            {/capture}
+            {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'default', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_8])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'order-cards'])], 'children' => $c_9])|noescape}
+      {/if}
+      {if ui_t(ui_eq($v_pager, 'show'))}
+        {=ui_include('blocks/pager.latte', ['p' => ['page' => 1, 'pages' => 3, 'summary' => ui_tpl(ui_get($v_labels, ['summary']), [1, 4, 12]), 'previousLabel' => ui_get($v_labels, ['previous']), 'nextLabel' => ui_get($v_labels, ['next'])]])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_10])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/over-media.latte b/packages/latte/ui/blocks/over-media.latte
new file mode 100644
index 0000000..4f830a1
--- /dev/null
+++ b/packages/latte/ui/blocks/over-media.latte
@@ -0,0 +1,12 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/over-media.json
+    A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing. It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the header stays the root of the block (rule 01).
+    Props (p): on, alt. *}
+{var $v_on = ($p['on'] ?? false)}
+{var $v_alt = ($p['alt'] ?? null)}
+{if ui_t($v_on)}
+  {capture $c_1}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_alt, 'ratio' => '21/9', 'className' => ui_cnv(['size-full rounded-none opacity-40'])]])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'pointer-events-none absolute inset-0 -z-10', 'Attrs' => ui_attrs(['data-testid', 'over'])], 'children' => $c_1])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/page-aside.latte b/packages/latte/ui/blocks/page-aside.latte
new file mode 100644
index 0000000..e1afb69
--- /dev/null
+++ b/packages/latte/ui/blocks/page-aside.latte
@@ -0,0 +1,65 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-aside.json
+    The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key facts as cards in two columns.
+    Props (p): extras, mode. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_mode = ($p['mode'] ?? 'figure')}
+{if ui_t(ui_eq($v_mode, 'figure'))}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_text(ui_get($v_extras, ['value']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => '4xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_text(ui_get($v_extras, ['caption']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => 'end', 'Class' => 'text-end', 'Attrs' => ui_attrs(['data-testid', 'page-figure'])], 'children' => $c_3])|noescape}
+{/if}
+{if ui_t(ui_eq($v_mode, 'note'))}
+  {capture $c_8}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_extras, ['icon'])), 'Size' => 20]])|noescape}
+    {capture $c_7}
+      {capture $c_4}
+        {=ui_text(ui_get($v_extras, ['value']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'lg', 'Weight' => 'bold'], 'children' => $c_4])|noescape}
+      {capture $c_5}
+        {=ui_text(ui_get($v_extras, ['caption']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'medium'], 'children' => $c_5])|noescape}
+      {capture $c_6}
+        {=ui_text(ui_get($v_extras, ['note']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_7])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Class' => 'rounded bg-card inset-ring inset-ring-border max-w-xs p-4', 'Attrs' => ui_attrs(['data-testid', 'page-note'])], 'children' => $c_8])|noescape}
+{/if}
+{if ui_t(ui_eq($v_mode, 'facts'))}
+  {capture $c_13}
+    {foreach ui_l(ui_get($v_extras, ['facts'])) as $v_s}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 4))}
+        {capture $c_12}
+          {capture $c_9}
+            {=ui_text(ui_get($v_s, ['value']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'lg', 'Weight' => 'bold'], 'children' => $c_9])|noescape}
+          {capture $c_10}
+            {=ui_text(ui_get($v_s, ['label']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'medium'], 'children' => $c_10])|noescape}
+          {capture $c_11}
+            {=ui_text(ui_get($v_s, ['hint']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_11])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'page-fact'])], 'children' => $c_12])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-4'], 'children' => $c_13])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/page-crumbs.latte b/packages/latte/ui/blocks/page-crumbs.latte
new file mode 100644
index 0000000..65918ea
--- /dev/null
+++ b/packages/latte/ui/blocks/page-crumbs.latte
@@ -0,0 +1,39 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-crumbs.json
+    The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the last entry is the current page and is not a link.
+    Props (p): label, crumbs, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_crumbs = ($p['crumbs'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_last = ui_sub(ui_len($v_crumbs), 1)}
+{capture $c_6}
+  {capture $c_5}
+    {foreach ui_l($v_crumbs) as $v_c}
+      {var $v_i = $iterator->counter0}
+      {capture $c_4}
+        {if ui_t(ui_lt($v_i, $v_last))}
+          {if ui_t(ui_get($v_c, ['href']))}
+            {capture $c_1}
+              {=ui_text(ui_get($v_c, ['name']))}
+            {/capture}
+            {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_get($v_c, ['href'])), 'Variant' => 'muted', 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'crumb'])], 'children' => $c_1])|noescape}
+          {else}
+            {capture $c_2}
+              {=ui_text(ui_get($v_c, ['name']))}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => ['Attrs' => ui_attrs(['data-testid', 'crumb'])], 'children' => $c_2])|noescape}
+          {/if}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-right', 'Size' => 16]])|noescape}
+        {else}
+          {capture $c_3}
+            {=ui_text(ui_get($v_c, ['name']))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'font-medium text-foreground', 'Attrs' => ui_attrs(['aria-current', 'page'])], 'children' => $c_3])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center gap-2'], 'children' => $c_4])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground'], 'children' => $c_5])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'nav', 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_label]), 'data-testid', 'crumbs'])], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/page-header.latte b/packages/latte/ui/blocks/page-header.latte
new file mode 100644
index 0000000..91f23b7
--- /dev/null
+++ b/packages/latte/ui/blocks/page-header.latte
@@ -0,0 +1,29 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/page-header.json
+    The page heading: a title, a one-line summary and the action buttons on the right (below on phones).
+    Props (p): title, summary, id, actions (slot). *}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_summary = ($p['summary'] ?? null)}
+{var $v_id = ($p['id'] ?? null)}
+{capture $c_5}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(1), 'Size' => 'xl', 'Weight' => 'bold', 'Class' => 'm-0', 'Attrs' => ui_attrs(['id', $v_id])], 'children' => $c_1])|noescape}
+    {if ui_t($v_summary)}
+      {capture $c_2}
+        {=ui_text($v_summary)}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-medium text-muted-foreground'], 'children' => $c_2])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-w-0 flex-col gap-2'], 'children' => $c_3])|noescape}
+  {if ui_t(((($p['actions'] ?? null) !== null)))}
+    {capture $c_4}
+      {=($p['actions'] ?? '')|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex flex-wrap items-center gap-2'], 'children' => $c_4])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between'], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/page-intro.latte b/packages/latte/ui/blocks/page-intro.latte
new file mode 100644
index 0000000..9194aed
--- /dev/null
+++ b/packages/latte/ui/blocks/page-intro.latte
@@ -0,0 +1,20 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-intro.json
+    The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action. Axes: align (start, center), tone, density.
+    Props (p): id, title, text, cta, href, level, align, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_cta = ($p['cta'] ?? null)}
+{var $v_href = ($p['href'] ?? null)}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_align = ($p['align'] ?? 'start')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_1}
+  {if ui_t($v_cta)}
+    {=ui_include('blocks/action-group.latte', ['p' => ['primary' => $v_cta, 'primaryHref' => $v_href, 'align' => $v_align]])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_text, 'heading' => ['level' => $v_level], 'align' => $v_align, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/page-trail.latte b/packages/latte/ui/blocks/page-trail.latte
new file mode 100644
index 0000000..ddd3d20
--- /dev/null
+++ b/packages/latte/ui/blocks/page-trail.latte
@@ -0,0 +1,35 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-trail.json
+    The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts in two columns), tone.
+    Props (p): id, title, lead, badge, label, crumbs, extras, aside, level, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_crumbs = ($p['crumbs'] ?? null)}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_aside = ($p['aside'] ?? 'none')}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_titleId = ui_add($v_id, '-title')}
+{capture $c_4}
+  {capture $c_3}
+    {if ui_t(ui_gt(ui_len($v_crumbs), 0))}
+      {=ui_include('blocks/page-crumbs.latte', ['p' => ['label' => $v_label, 'crumbs' => $v_crumbs, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+    {/if}
+    {capture $c_2}
+      {capture $c_1}
+        {=ui_include('blocks/section-header.latte', ['p' => ['titleId' => $v_titleId, 'title' => $v_title, 'heading' => ['level' => $v_level, 'badge' => $v_badge], 'lead' => $v_lead]])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Class' => 'min-w-0'], 'children' => $c_1])|noescape}
+      {if ui_t(!(ui_eq($v_aside, 'none')))}
+        {=ui_include('blocks/page-aside.latte', ['p' => ['extras' => $v_extras, 'mode' => $v_aside]])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_aside, 'facts')) ? 'grid grid-cols-1 items-center gap-8 lg:grid-cols-2' : 'flex flex-col gap-6 md:flex-row md:items-end md:justify-between'))], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-col gap-6'])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_3])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => ui_s(ui_cnv(['py-8', (ui_t(ui_eq($v_tone, 'muted')) ? 'bg-muted' : '')])), 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : $v_titleId), 'data-testid', 'section', 'data-tone', $v_tone, 'data-aside', $v_aside, 'aria-label', $v_landmarkLabel])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/pager.latte b/packages/latte/ui/blocks/pager.latte
new file mode 100644
index 0000000..44b2a6d
--- /dev/null
+++ b/packages/latte/ui/blocks/pager.latte
@@ -0,0 +1,68 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/pager.json
+    The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4 5 6 … 21), with `moreLabel` a "Load more" button. The current page is a plain element marked aria-current="page"; the others are buttons. All text comes in through props.
+    Props (p): page, pages, summary, previousLabel, nextLabel, numbered, pageLabel, moreLabel. *}
+{var $v_page = ($p['page'] ?? null)}
+{var $v_pages = ($p['pages'] ?? null)}
+{var $v_summary = ($p['summary'] ?? null)}
+{var $v_previousLabel = ($p['previousLabel'] ?? null)}
+{var $v_nextLabel = ($p['nextLabel'] ?? null)}
+{var $v_numbered = ($p['numbered'] ?? false)}
+{var $v_pageLabel = ($p['pageLabel'] ?? null)}
+{var $v_moreLabel = ($p['moreLabel'] ?? null)}
+{var $v_numbers = ui_page_window($v_page, $v_pages)}
+{capture $c_11}
+  {capture $c_2}
+    {capture $c_1}
+      {=ui_text($v_summary)}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex flex-wrap items-center gap-4'], 'children' => $c_2])|noescape}
+  {capture $c_10}
+    {if ui_t(ui_and([$v_moreLabel, ui_lt($v_page, $v_pages)]))}
+      {capture $c_3}
+        {=ui_text($v_moreLabel)}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Type' => 'button', 'Attrs' => ui_attrs(['data-testid', 'pager-more'])], 'children' => $c_3])|noescape}
+    {/if}
+    {capture $c_4}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-left', 'Size' => 16]])|noescape}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Layout' => 'icon', 'AriaLabel' => ui_s($v_previousLabel), 'Disabled' => ui_t(ui_le($v_page, 1))], 'children' => $c_4])|noescape}
+    {if ui_t($v_numbered)}
+      {foreach ui_l($v_numbers) as $v_n}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_eq($v_n, null))}
+          {capture $c_5}
+            {=ui_text('…')}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'w-8 text-center'], 'children' => $c_5])|noescape}
+        {elseif ui_t(ui_eq($v_n, $v_page))}
+          {capture $c_6}
+            {=ui_text($v_n)}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background', 'Attrs' => ui_attrs(['aria-current', 'page', 'data-testid', 'pager-current'])], 'children' => $c_6])|noescape}
+        {else}
+          {capture $c_7}
+            {=ui_text($v_n)}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'Type' => 'button', 'AriaLabel' => ui_s(ui_tpl($v_pageLabel, [$v_n]))], 'children' => $c_7])|noescape}
+        {/if}
+      {/foreach}
+    {else}
+      {capture $c_8}
+        {=ui_text($v_page)}
+        {=ui_text(' / ')}
+        {=ui_text($v_pages)}
+      {/capture}
+      {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'min-w-12 text-center font-bold text-foreground'], 'children' => $c_8])|noescape}
+    {/if}
+    {capture $c_9}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-right', 'Size' => 16]])|noescape}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Layout' => 'icon', 'AriaLabel' => ui_s($v_nextLabel), 'Disabled' => ui_t(ui_ge($v_page, $v_pages))], 'children' => $c_9])|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex flex-wrap items-center gap-2'], 'children' => $c_10])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'pager'])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/panel.latte b/packages/latte/ui/blocks/panel.latte
new file mode 100644
index 0000000..8558f88
--- /dev/null
+++ b/packages/latte/ui/blocks/panel.latte
@@ -0,0 +1,32 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/panel.json
+    A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the Block of its block (rule 01).
+    Props (p): title, description, id, className, actions (slot); children: markup. *}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_description = ($p['description'] ?? null)}
+{var $v_id = ($p['id'] ?? null)}
+{capture $c_5}
+  {if ui_t(ui_or([$v_title, ((($p['actions'] ?? null) !== null))]))}
+    {capture $c_4}
+      {capture $c_3}
+        {if ui_t($v_title)}
+          {capture $c_1}
+            {=ui_text($v_title)}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => 'base', 'Class' => 'm-0 text-foreground', 'Attrs' => ui_attrs(['id', (ui_t($v_id) ? ui_tpl('{0}-t', [$v_id]) : null)])], 'children' => $c_1])|noescape}
+        {/if}
+        {if ui_t($v_description)}
+          {capture $c_2}
+            {=ui_text($v_description)}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-medium text-muted-foreground'], 'children' => $c_2])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-w-0 flex-col gap-2'], 'children' => $c_3])|noescape}
+      {=($p['actions'] ?? '')|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex items-start justify-between gap-4'], 'children' => $c_4])|noescape}
+  {/if}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'group', 'aria-labelledby', (ui_t(ui_and([$v_title, $v_id])) ? ui_tpl('{0}-t', [$v_id]) : null)])], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/payment-options.latte b/packages/latte/ui/blocks/payment-options.latte
new file mode 100644
index 0000000..2169d6a
--- /dev/null
+++ b/packages/latte/ui/blocks/payment-options.latte
@@ -0,0 +1,28 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/payment-options.json
+    Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup.
+    Props (p): payments, name, checked. *}
+{var $v_payments = ($p['payments'] ?? null)}
+{var $v_name = ($p['name'] ?? null)}
+{var $v_checked = ($p['checked'] ?? '')}
+{capture $c_5}
+  {foreach ui_l($v_payments) as $v_p}
+    {capture $c_4}
+      {=ui_include('ui/radio/radio.latte', ['p' => ['Name' => ui_s($v_name), 'Value' => ui_s(ui_get($v_p, ['id'])), 'Checked' => ui_t(ui_eq(ui_get($v_p, ['id']), $v_checked))]])|noescape}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_p, ['icon'])), 'Size' => 20, 'Class' => 'shrink-0']])|noescape}
+      {capture $c_3}
+        {capture $c_1}
+          {=ui_text(ui_get($v_p, ['title']))}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-sm font-semibold'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text(ui_get($v_p, ['text']))}
+        {/capture}
+        {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-xs text-muted-foreground'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex flex-col items-start justify-start gap-0'], 'children' => $c_3])|noescape}
+    {/capture}
+    {=ui_include('ui/label/label.latte', ['p' => ['Class' => 'flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground', 'Attrs' => ui_attrs(['data-testid', 'payment'])], 'children' => $c_4])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-2', 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'payments'])], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/photo-gallery.latte b/packages/latte/ui/blocks/photo-gallery.latte
new file mode 100644
index 0000000..5773c42
--- /dev/null
+++ b/packages/latte/ui/blocks/photo-gallery.latte
@@ -0,0 +1,88 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/photo-gallery.json
+    Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes: layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.
+    Props (p): id, title, lead, photos, empty, labels, layout, captions, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_photos = ($p['photos'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_captions = ($p['captions'] ?? 'show')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_16}
+  {if ui_t(ui_eq(ui_len($v_photos), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'image', 'title' => $v_empty]])|noescape}
+  {elseif ui_t(ui_eq($v_layout, 'featured'))}
+    {capture $c_9}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title]])|noescape}
+      {capture $c_7}
+        {capture $c_3}
+          {capture $c_1}
+            {=ui_text(ui_first_of($v_photos, 'title'))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+          {capture $c_2}
+            {=ui_text(ui_tpl(ui_get($v_labels, ['counter']), [1, ui_len($v_photos)]))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_3])|noescape}
+        {capture $c_6}
+          {capture $c_4}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-left', 'Size' => 16]])|noescape}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Layout' => 'icon', 'AriaLabel' => ui_s(ui_get($v_labels, ['previous']))], 'children' => $c_4])|noescape}
+          {capture $c_5}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-right', 'Size' => 16]])|noescape}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Layout' => 'icon', 'AriaLabel' => ui_s(ui_get($v_labels, ['next']))], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2'], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between'], 'children' => $c_7])|noescape}
+      {capture $c_8}
+        {foreach ui_l($v_photos) as $v_p}
+          {var $v_i = $iterator->counter0}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_p, ['title']), 'ratio' => '1/1', 'className' => ui_cnv([(ui_t(ui_eq($v_i, 0)) ? 'ring-2 ring-foreground' : '')])]])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-3 gap-2 sm:grid-cols-9', 'Attrs' => ui_attrs(['data-testid', 'thumbs'])], 'children' => $c_8])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'featured'])], 'children' => $c_9])|noescape}
+  {else}
+    {capture $c_15}
+      {foreach ui_l($v_photos) as $v_p}
+        {var $v_i = $iterator->counter0}
+        {capture $c_14}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_p, ['title']), 'ratio' => (ui_t(ui_eq($v_layout, 'masonry')) ? (ui_t(ui_eq(ui_get($v_p, ['size']), 'tall')) ? '3/4' : (ui_t(ui_eq(ui_get($v_p, ['size']), 'wide')) ? '16/9' : (ui_t(ui_eq(ui_get($v_p, ['size']), 'large')) ? '4/3' : '1/1'))) : (ui_t(ui_eq($v_layout, 'grid')) ? '4/3' : '1/1')), 'className' => ui_cnv([(ui_t(ui_eq($v_layout, 'mosaic')) ? 'h-full' : '')])]])|noescape}
+          {if ui_t(ui_and([ui_eq($v_captions, 'show'), ui_eq($v_layout, 'cards')]))}
+            {capture $c_12}
+              {capture $c_10}
+                {=ui_text(ui_get($v_p, ['title']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_10])|noescape}
+              {capture $c_11}
+                {=ui_text(ui_get($v_p, ['tag']))}
+              {/capture}
+              {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm'], 'children' => $c_11])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between'], 'children' => $c_12])|noescape}
+          {/if}
+          {if ui_t(ui_and([ui_eq($v_captions, 'show'), ui_or([ui_eq($v_layout, 'grid'), ui_eq($v_layout, 'masonry')])]))}
+            {capture $c_13}
+              {=ui_text(ui_get($v_p, ['title']))}
+            {/capture}
+            {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'text-sm text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'caption'])], 'children' => $c_13])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('blocks/figure-block.latte', ['p' => ['className' => ui_cnv([ui_cnv(['flex flex-col gap-2', (ui_t(ui_eq($v_layout, 'masonry')) ? 'mb-4 break-inside-avoid' : ''), (ui_t(ui_and([ui_eq($v_layout, 'mosaic'), ui_eq($v_i, 0)])) ? 'col-span-2 row-span-2' : ''), (ui_t(ui_eq($v_layout, 'cards')) ? 'rounded bg-card inset-ring inset-ring-border p-4' : '')])]), 'testid' => 'item'], 'children' => $c_14])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'masonry')) ? 'columns-1 gap-4 sm:columns-2 lg:columns-3' : (ui_t(ui_eq($v_layout, 'mosaic')) ? 'grid grid-cols-2 gap-4 md:grid-cols-4' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'))), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_15])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_16])|noescape}
diff --git a/packages/latte/ui/blocks/pill.latte b/packages/latte/ui/blocks/pill.latte
new file mode 100644
index 0000000..5c93c71
--- /dev/null
+++ b/packages/latte/ui/blocks/pill.latte
@@ -0,0 +1,17 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/pill.json
+    A status pill: a tinted label with an icon (published, draft, role, comment state).
+    Props (p): tone, icon, className; children: markup. *}
+{var $k_PILL = ['gray' => 'bg-muted text-muted-foreground inset-ring-border', 'blue' => 'bg-blue-50 text-blue-700 inset-ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:inset-ring-blue-900', 'amber' => 'bg-amber-50 text-amber-700 inset-ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:inset-ring-amber-900', 'green' => 'bg-green-50 text-green-700 inset-ring-green-200 dark:bg-green-950 dark:text-green-300 dark:inset-ring-green-900', 'red' => 'bg-red-50 text-red-700 inset-ring-red-200 dark:bg-red-950 dark:text-red-300 dark:inset-ring-red-900', 'violet' => 'bg-violet-50 text-violet-700 inset-ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:inset-ring-violet-900', 'pink' => 'bg-pink-50 text-pink-700 inset-ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:inset-ring-pink-900', 'orange' => 'bg-orange-50 text-orange-700 inset-ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:inset-ring-orange-900', 'cyan' => 'bg-cyan-50 text-cyan-700 inset-ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:inset-ring-cyan-900']}
+{var $v_tone = ($p['tone'] ?? 'gray')}
+{var $v_icon = ($p['icon'] ?? null)}
+{capture $c_2}
+  {capture $c_1}
+    {if ui_t($v_icon)}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s($v_icon), 'Size' => 12]])|noescape}
+    {/if}
+    {=($children ?? '')|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s(ui_cnv(['inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring', ui_at($k_PILL, $v_tone), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'pill'])], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'contents'], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/post-actions.latte b/packages/latte/ui/blocks/post-actions.latte
new file mode 100644
index 0000000..36e9ab8
--- /dev/null
+++ b/packages/latte/ui/blocks/post-actions.latte
@@ -0,0 +1,40 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-actions.json
+    The calls to action of a post header: share and save side by side, one wide read button, or a wide read button with share and save as icons.
+    Props (p): labels, mode. *}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_mode = ($p['mode'] ?? 'pair')}
+{if ui_t(ui_eq($v_mode, 'pair'))}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'share-2', 'Size' => 16]])|noescape}
+      {=ui_text(ui_get($v_labels, ['share']))}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Class' => 'gap-2', 'Attrs' => ui_attrs(['data-testid', 'action-primary'])], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'bookmark', 'Size' => 16]])|noescape}
+      {=ui_text(ui_get($v_labels, ['save']))}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Class' => 'gap-2', 'Attrs' => ui_attrs(['data-testid', 'post-save'])], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Class' => 'flex-wrap'], 'children' => $c_3])|noescape}
+{else}
+  {capture $c_7}
+    {capture $c_4}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'book-open', 'Size' => 16]])|noescape}
+      {=ui_text(ui_get($v_labels, ['read']))}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Class' => 'gap-2 flex-1', 'Attrs' => ui_attrs(['data-testid', 'action-primary'])], 'children' => $c_4])|noescape}
+    {if ui_t(ui_eq($v_mode, 'icons'))}
+      {capture $c_5}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'share-2', 'Size' => 16]])|noescape}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Layout' => 'icon', 'AriaLabel' => ui_s(ui_get($v_labels, ['share'])), 'Attrs' => ui_attrs(['data-testid', 'post-share'])], 'children' => $c_5])|noescape}
+      {capture $c_6}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'bookmark', 'Size' => 16]])|noescape}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Layout' => 'icon', 'AriaLabel' => ui_s(ui_get($v_labels, ['save'])), 'Attrs' => ui_attrs(['data-testid', 'post-save'])], 'children' => $c_6])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2'], 'children' => $c_7])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/post-author.latte b/packages/latte/ui/blocks/post-author.latte
new file mode 100644
index 0000000..26f1f31
--- /dev/null
+++ b/packages/latte/ui/blocks/post-author.latte
@@ -0,0 +1,60 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-author.json
+    The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line, a card, or a card with the bio.
+    Props (p): post, extras, labels, mode, share, className. *}
+{var $v_post = ($p['post'] ?? null)}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_mode = ($p['mode'] ?? 'line')}
+{var $v_share = ($p['share'] ?? false)}
+{capture $c_12}
+  {capture $c_10}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_post, ['author']), 'ratio' => '1/1', 'className' => ui_cnv(['size-10 shrink-0 rounded-full'])]])|noescape}
+    {capture $c_3}
+      {capture $c_1}
+        {=ui_text(ui_get($v_post, ['author']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+      {capture $c_2}
+        {=ui_text(ui_get($v_extras, ['role']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => 'start', 'Class' => 'min-w-0 flex-1 text-start'], 'children' => $c_3])|noescape}
+    {if ui_t($v_share)}
+      {capture $c_6}
+        {capture $c_4}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'share-2', 'Size' => 16]])|noescape}
+          {=ui_text(ui_get($v_labels, ['share']))}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'default', 'Class' => 'gap-2', 'Attrs' => ui_attrs(['data-testid', 'post-share'])], 'children' => $c_4])|noescape}
+        {capture $c_5}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'bookmark', 'Size' => 16]])|noescape}
+          {=ui_text(ui_get($v_labels, ['save']))}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'default', 'Class' => 'gap-2', 'Attrs' => ui_attrs(['data-testid', 'post-save'])], 'children' => $c_5])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2'], 'children' => $c_6])|noescape}
+    {else}
+      {capture $c_9}
+        {capture $c_8}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'calendar', 'Size' => 16]])|noescape}
+          {capture $c_7}
+            {=ui_text(ui_get($v_post, ['date']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_7])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_8])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'text-muted-foreground'], 'children' => $c_9])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_10])|noescape}
+  {if ui_t(ui_eq($v_mode, 'bio'))}
+    {capture $c_11}
+      {=ui_text(ui_get($v_extras, ['bio']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_11])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => ui_s(ui_cnv([(ui_t(ui_eq($v_mode, 'line')) ? '' : 'rounded bg-card inset-ring inset-ring-border p-4'), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-testid', 'post-author'])], 'children' => $c_12])|noescape}
diff --git a/packages/latte/ui/blocks/post-card.latte b/packages/latte/ui/blocks/post-card.latte
new file mode 100644
index 0000000..0759cff
--- /dev/null
+++ b/packages/latte/ui/blocks/post-card.latte
@@ -0,0 +1,97 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-card.json
+    A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only), density.
+    Props (p): post, labels, layout, media, meta, density. *}
+{var $v_post = ($p['post'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'vertical')}
+{var $v_media = ($p['media'] ?? 'image')}
+{var $v_meta = ($p['meta'] ?? 'full')}
+{var $v_density = ($p['density'] ?? 'default')}
+{if ui_t(ui_eq($v_meta, 'news'))}
+  {capture $c_6}
+    {capture $c_2}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_post, ['title']), 'src' => ui_get($v_post, ['image']), 'className' => ui_cnv([ui_cnv(['size-full', ui_preset('blocks/presets/defaults.json', ['media', 'rounded'])])])]])|noescape}
+      {capture $c_1}
+        {=ui_text(ui_get($v_post, ['title']))}
+      {/capture}
+      {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xs', 'Weight' => 'semibold', 'Class' => ui_s(ui_cnv(['pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground', ui_preset('blocks/presets/defaults.json', ['news', 'title'])])), 'Attrs' => ui_attrs(['data-testid', 'news-title'])], 'children' => $c_1])|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['relative shrink-0 overflow-hidden', ui_preset('blocks/presets/defaults.json', ['news', 'cover'])])), 'Attrs' => ui_attrs(['data-testid', 'news-cover'])], 'children' => $c_2])|noescape}
+    {capture $c_5}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'calendar', 'Size' => 16]])|noescape}
+      {capture $c_3}
+        {=ui_text(ui_get($v_post, ['date']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'bold', 'Class' => 'leading-4'], 'children' => $c_3])|noescape}
+      {if ui_t(ui_get($v_post, ['category']))}
+        {capture $c_4}
+          {=ui_text(ui_get($v_post, ['category']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'bold', 'Class' => 'leading-4'], 'children' => $c_4])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['w-full px-2 text-muted-foreground', ui_preset('blocks/presets/defaults.json', ['news', 'strip'])])), 'Attrs' => ui_attrs(['data-testid', 'news-date'])], 'children' => $c_5])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'article', 'Class' => ui_s(ui_cnv(['flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border', ui_preset('blocks/presets/defaults.json', ['news', 'card'])])), 'Attrs' => ui_attrs(['data-testid', 'item', 'data-layout', $v_layout, 'data-meta', 'news'])], 'children' => $c_6])|noescape}
+{else}
+  {capture $c_18}
+    {if ui_t(ui_eq($v_media, 'image'))}
+      {capture $c_7}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_post, ['title']), 'src' => ui_get($v_post, ['image']), 'className' => ui_cnv(['h-full'])]])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['relative shrink-0', (ui_t(ui_eq($v_layout, 'horizontal')) ? 'sm:w-64' : '')]))], 'children' => $c_7])|noescape}
+    {/if}
+    {capture $c_17}
+      {if ui_t(!(ui_eq($v_meta, 'news')))}
+        {capture $c_9}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_post, ['icon'])), 'Size' => 16]])|noescape}
+          {capture $c_8}
+            {=ui_text(ui_get($v_post, ['category']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'uppercase tracking-wide text-muted-foreground'], 'children' => $c_8])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_9])|noescape}
+      {/if}
+      {capture $c_10}
+        {=ui_text(ui_get($v_post, ['title']))}
+      {/capture}
+      {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_10])|noescape}
+      {if ui_t(ui_and([ui_eq($v_density, 'default'), !(ui_eq($v_meta, 'news'))]))}
+        {capture $c_11}
+          {=ui_text(ui_get($v_post, ['excerpt']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_11])|noescape}
+      {/if}
+      {if ui_t(!(ui_eq($v_meta, 'news')))}
+        {capture $c_15}
+          {if ui_t(ui_eq($v_meta, 'full'))}
+            {capture $c_12}
+              {=ui_text(ui_tpl(ui_get($v_labels, ['by']), [ui_get($v_post, ['author'])]))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs'], 'children' => $c_12])|noescape}
+          {/if}
+          {capture $c_13}
+            {=ui_text(ui_get($v_post, ['date']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs'], 'children' => $c_13])|noescape}
+          {if ui_t(ui_eq($v_meta, 'full'))}
+            {capture $c_14}
+              {=ui_text(ui_tpl(ui_get($v_labels, ['minutes']), [ui_get($v_post, ['minutes'])]))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs'], 'children' => $c_14])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Class' => 'mt-auto flex-wrap pt-2 text-muted-foreground'], 'children' => $c_15])|noescape}
+      {/if}
+      {if ui_t(ui_and([!(ui_eq($v_meta, 'news')), ui_get($v_post, ['href'])]))}
+        {capture $c_16}
+          {=ui_text(ui_get($v_labels, ['read']))}
+        {/capture}
+        {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_get($v_post, ['href'])), 'Variant' => 'default', 'Attrs' => ui_attrs(['data-testid', 'read'])], 'children' => $c_16])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => 'flex flex-1 flex-col gap-2'], 'children' => $c_17])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'article', 'Class' => ui_s(ui_cnv(['flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded', 'h-full gap-4 overflow-hidden', (ui_t(ui_eq($v_layout, 'horizontal')) ? 'flex flex-col sm:flex-row' : 'flex flex-col')])), 'Attrs' => ui_attrs(['data-slot', 'card', 'data-testid', 'item', 'data-layout', $v_layout, 'data-meta', $v_meta])], 'children' => $c_18])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/post-feature.latte b/packages/latte/ui/blocks/post-feature.latte
new file mode 100644
index 0000000..d00f00e
--- /dev/null
+++ b/packages/latte/ui/blocks/post-feature.latte
@@ -0,0 +1,41 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-feature.json
+    The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading time, and a wide read button.
+    Props (p): p, labels. *}
+{var $v_p = ($p['p'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_9}
+  {capture $c_1}
+    {=ui_text(ui_get($v_p, ['category']))}
+  {/capture}
+  {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm', 'Class' => 'w-fit'], 'children' => $c_1])|noescape}
+  {capture $c_2}
+    {=ui_text(ui_get($v_p, ['title']))}
+  {/capture}
+  {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+  {capture $c_3}
+    {=ui_text(ui_get($v_p, ['excerpt']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+  {capture $c_7}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_p, ['author']), 'ratio' => '1/1', 'className' => ui_cnv(['size-10 shrink-0 rounded-full'])]])|noescape}
+    {capture $c_6}
+      {capture $c_4}
+        {=ui_text(ui_get($v_p, ['author']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+      {capture $c_5}
+        {=ui_text(ui_tpl('{0} · {1}', [ui_get($v_p, ['date']), ui_tpl(ui_get($v_labels, ['minutes']), [ui_get($v_p, ['minutes'])])]))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_6])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_7])|noescape}
+  {capture $c_8}
+    {=ui_text(ui_get($v_labels, ['read']))}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Href' => ui_s(ui_get($v_p, ['href'])), 'Class' => 'w-full gap-2', 'Attrs' => ui_attrs(['data-testid', 'action-primary'])], 'children' => $c_8])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'border-t border-border pt-6', 'Attrs' => ui_attrs(['data-testid', 'post-feature'])], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/post-grid.latte b/packages/latte/ui/blocks/post-grid.latte
new file mode 100644
index 0000000..192b369
--- /dev/null
+++ b/packages/latte/ui/blocks/post-grid.latte
@@ -0,0 +1,60 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-grid.json
+    A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news), filter mode (none, topics), tone, density.
+    Props (p): id, title, posts, labels, action, filter, layout, cols, media, meta, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_posts = ($p['posts'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_action = ($p['action'] ?? null)}
+{var $v_filter = ($p['filter'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_cols = ($p['cols'] ?? '1-3')}
+{var $v_media = ($p['media'] ?? 'image')}
+{var $v_meta = ($p['meta'] ?? 'full')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_6}
+  {if ui_t(ui_eq(ui_get($v_filter, ['mode']), 'topics'))}
+    {capture $c_2}
+      {foreach ui_l(ui_get($v_filter, ['topics'])) as $v_tab}
+        {capture $c_1}
+          {=ui_text(ui_get($v_tab, ['title']))}
+        {/capture}
+        {=ui_include('blocks/switcher-item.latte', ['p' => ['active' => ui_eq(ui_get($v_tab, ['value']), ui_get($v_filter, ['topic']))], 'children' => $c_1])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('blocks/switcher.latte', ['p' => ['label' => ui_get($v_filter, ['label'])], 'children' => $c_2])|noescape}
+  {/if}
+  {if ui_t(ui_gt(ui_len(ui_where($v_posts, 'category', ui_get($v_filter, ['topic']))), 0))}
+    {if ui_t(ui_eq($v_layout, 'magazine'))}
+      {capture $c_4}
+        {foreach ui_l(ui_where($v_posts, 'category', ui_get($v_filter, ['topic']))) as $v_p}
+          {var $v_i = $iterator->counter0}
+          {if ui_t(ui_eq($v_i, 0))}
+            {=ui_include('blocks/post-card.latte', ['p' => ['post' => $v_p, 'labels' => $v_labels, 'layout' => 'horizontal', 'media' => $v_media, 'meta' => $v_meta, 'density' => $v_density]])|noescape}
+          {/if}
+        {/foreach}
+        {capture $c_3}
+          {foreach ui_l(ui_where($v_posts, 'category', ui_get($v_filter, ['topic']))) as $v_p}
+            {var $v_i = $iterator->counter0}
+            {if ui_t(ui_gt($v_i, 0))}
+              {=ui_include('blocks/post-card.latte', ['p' => ['post' => $v_p, 'labels' => $v_labels, 'media' => $v_media, 'meta' => $v_meta, 'density' => $v_density]])|noescape}
+            {/if}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s($v_cols), 'Class' => 'gap-6'], 'children' => $c_3])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_4])|noescape}
+    {else}
+      {capture $c_5}
+        {foreach ui_l(ui_where($v_posts, 'category', ui_get($v_filter, ['topic']))) as $v_p}
+          {=ui_include('blocks/post-card.latte', ['p' => ['post' => $v_p, 'labels' => $v_labels, 'layout' => (ui_t(ui_eq($v_layout, 'list')) ? 'horizontal' : 'vertical'), 'media' => $v_media, 'meta' => $v_meta, 'density' => $v_density]])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'list')) ? '1' : ui_fit_cols($v_cols, ui_len(ui_where($v_posts, 'category', ui_get($v_filter, ['topic'])))))), 'Class' => 'w-full gap-6', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_5])|noescape}
+    {/if}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'action' => $v_action, 'tone' => $v_tone, 'density' => (ui_t(ui_eq($v_density, 'compact')) ? 'compact' : 'default'), 'measure' => (ui_t(ui_eq($v_meta, 'news')) ? 'fill' : 'default'), 'className' => ui_cnv([(ui_t(ui_eq($v_meta, 'news')) ? 'py-0' : '')]), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/post-header.latte b/packages/latte/ui/blocks/post-header.latte
new file mode 100644
index 0000000..a871493
--- /dev/null
+++ b/packages/latte/ui/blocks/post-header.latte
@@ -0,0 +1,48 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-header.json
+    The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout (start, center), cover (show, hide), meta (full, short), tone.
+    Props (p): id, post, labels, level, layout, cover, meta, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_post = ($p['post'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_layout = ($p['layout'] ?? 'start')}
+{var $v_cover = ($p['cover'] ?? 'show')}
+{var $v_meta = ($p['meta'] ?? 'full')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t($v_post)}
+  {capture $f_6}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_post, ['title']), 'src' => ui_get($v_post, ['image']), 'ratio' => '21/9']])|noescape}
+  {/capture}
+  {capture $c_7}
+    {capture $c_5}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_post, ['author']), 'ratio' => '1/1', 'className' => ui_cnv(['size-10 shrink-0 rounded-full'])]])|noescape}
+      {capture $c_1}
+        {=ui_text(ui_get($v_post, ['author']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+      {capture $c_2}
+        {=ui_text(ui_get($v_post, ['date']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+      {if ui_t(ui_eq($v_meta, 'full'))}
+        {capture $c_3}
+          {=ui_text(ui_tpl(ui_get($v_labels, ['minutes']), [ui_get($v_post, ['minutes'])]))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+      {/if}
+      {capture $c_4}
+        {=ui_text(ui_get($v_post, ['category']))}
+      {/capture}
+      {=ui_include('blocks/pill.latte', ['p' => ['tone' => 'blue'], 'children' => $c_4])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => ui_s((ui_t(ui_eq($v_layout, 'center')) ? 'center' : 'start')), 'Class' => 'flex-wrap', 'Attrs' => ui_attrs(['data-testid', 'post-meta'])], 'children' => $c_5])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => ui_get($v_post, ['title']), 'lead' => ui_get($v_post, ['excerpt']), 'heading' => ['level' => $v_level], 'align' => $v_layout, 'tone' => $v_tone, 'media' => ['show' => ui_eq($v_cover, 'show')], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_6], 'children' => $c_7])|noescape}
+{else}
+  {capture $c_8}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'file-text', 'title' => ui_get($v_labels, ['empty'])]])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'heading' => ['level' => $v_level], 'align' => $v_layout, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_8])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/post-mini-card.latte b/packages/latte/ui/blocks/post-mini-card.latte
new file mode 100644
index 0000000..48c0160
--- /dev/null
+++ b/packages/latte/ui/blocks/post-mini-card.latte
@@ -0,0 +1,25 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-mini-card.json
+    A small post card of PostShowcase: the picture, the category, the title and the author with the reading time.
+    Props (p): p, labels. *}
+{var $v_p = ($p['p'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_5}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_p, ['title'])]])|noescape}
+  {capture $c_4}
+    {capture $c_1}
+      {=ui_text(ui_get($v_p, ['category']))}
+    {/capture}
+    {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm'], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_text(ui_get($v_p, ['title']))}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+    {capture $c_3}
+      {=ui_text(ui_tpl('{0} · {1}', [ui_get($v_p, ['author']), ui_tpl(ui_get($v_labels, ['minutes']), [ui_get($v_p, ['minutes'])])]))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => 'p-2'], 'children' => $c_4])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-2', 'Attrs' => ui_attrs(['data-testid', 'post-mini'])], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/post-outline.latte b/packages/latte/ui/blocks/post-outline.latte
new file mode 100644
index 0000000..a783e22
--- /dev/null
+++ b/packages/latte/ui/blocks/post-outline.latte
@@ -0,0 +1,59 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-outline.json
+    The facts of a post in a column (author, date, minutes, views), then the related reading as links.
+    Props (p): post, extras, labels. *}
+{var $v_post = ($p['post'] ?? null)}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_13}
+  {capture $c_9}
+    {capture $c_2}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'user', 'Size' => 16]])|noescape}
+      {capture $c_1}
+        {=ui_text(ui_get($v_post, ['author']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_1])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_2])|noescape}
+    {capture $c_4}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'calendar', 'Size' => 16]])|noescape}
+      {capture $c_3}
+        {=ui_text(ui_get($v_post, ['date']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_3])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_4])|noescape}
+    {capture $c_6}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'clock', 'Size' => 16]])|noescape}
+      {capture $c_5}
+        {=ui_text(ui_tpl(ui_get($v_labels, ['minutes']), [ui_get($v_post, ['minutes'])]))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_5])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_6])|noescape}
+    {capture $c_8}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'eye', 'Size' => 16]])|noescape}
+      {capture $c_7}
+        {=ui_text(ui_tpl(ui_get($v_labels, ['views']), [ui_get($v_extras, ['views'])]))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_7])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_8])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => 'text-muted-foreground'], 'children' => $c_9])|noescape}
+  {capture $c_12}
+    {capture $c_10}
+      {=ui_text(ui_get($v_labels, ['related']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'medium', 'Class' => 'uppercase tracking-wide text-muted-foreground'], 'children' => $c_10])|noescape}
+    {foreach ui_l(ui_get($v_extras, ['outline'])) as $v_l}
+      {capture $c_11}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-right', 'Size' => 16]])|noescape}
+        {=ui_text(ui_get($v_l, ['name']))}
+      {/capture}
+      {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_l, ['href']), 'className' => ui_cnv(['text-sm font-medium']), 'size' => 'sm', 'testid' => 'post-link'], 'children' => $c_11])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Class' => 'border-t border-border pt-4'], 'children' => $c_12])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'post-outline'])], 'children' => $c_13])|noescape}
diff --git a/packages/latte/ui/blocks/post-overlay-card.latte b/packages/latte/ui/blocks/post-overlay-card.latte
new file mode 100644
index 0000000..419988a
--- /dev/null
+++ b/packages/latte/ui/blocks/post-overlay-card.latte
@@ -0,0 +1,38 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-overlay-card.json
+    A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and date, the title, the excerpt and a read link.
+    Props (p): p, labels, ratio. *}
+{var $v_p = ($p['p'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_ratio = ($p['ratio'] ?? '4/3')}
+{capture $c_8}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_p, ['title']), 'ratio' => $v_ratio, 'className' => ui_cnv([(ui_t(ui_eq($v_ratio, '4/3')) ? 'min-h-80' : 'min-h-64')])]])|noescape}
+  {capture $c_7}
+    {capture $c_3}
+      {capture $c_1}
+        {=ui_text(ui_get($v_p, ['category']))}
+      {/capture}
+      {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm'], 'children' => $c_1])|noescape}
+      {capture $c_2}
+        {=ui_text(ui_get($v_p, ['date']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_3])|noescape}
+    {capture $c_4}
+      {=ui_text(ui_get($v_p, ['title']))}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+    {capture $c_5}
+      {=ui_text(ui_get($v_p, ['excerpt']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => ui_s(ui_cnv(['text-muted-foreground', 'line-clamp-2']))], 'children' => $c_5])|noescape}
+    {capture $c_6}
+      {=ui_text(ui_get($v_labels, ['read']))}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+    {/capture}
+    {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_p, ['href']), 'className' => ui_cnv(['gap-2 text-sm font-medium']), 'size' => 'sm', 'testid' => 'read'], 'children' => $c_6])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => 'absolute bottom-4 left-4 right-4 rounded bg-background p-4'], 'children' => $c_7])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'relative overflow-hidden rounded', 'Attrs' => ui_attrs(['data-testid', 'post-overlay'])], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/post-showcase.latte b/packages/latte/ui/blocks/post-showcase.latte
new file mode 100644
index 0000000..c3b4d68
--- /dev/null
+++ b/packages/latte/ui/blocks/post-showcase.latte
@@ -0,0 +1,69 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-showcase.json
+    Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured: the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3: overlay columns), mediaSide, tone.
+    Props (p): id, title, lead, badge, posts, labels, action, layout, cols, mediaSide, tone, empty, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_posts = ($p['posts'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_action = ($p['action'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'intro')}
+{var $v_cols = ($p['cols'] ?? '3')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'start')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_eq(ui_len($v_posts), 0))}
+  {capture $c_1}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'newspaper', 'title' => $v_empty]])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_1])|noescape}
+{elseif ui_t(ui_eq($v_layout, 'intro'))}
+  {capture $f_3}
+    {capture $c_4}
+      {foreach ui_l($v_posts) as $v_p}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_lt($v_i, 4))}
+          {=ui_include('blocks/post-mini-card.latte', ['p' => ['p' => $v_p, 'labels' => $v_labels]])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 gap-4 sm:grid-cols-2'], 'children' => $c_4])|noescape}
+  {/capture}
+  {capture $c_5}
+    {capture $c_2}
+      {=ui_text(ui_get($v_action, ['label']))}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+    {/capture}
+    {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_get($v_action, ['href'])), 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'section-action'])], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_3], 'children' => $c_5])|noescape}
+{elseif ui_t(ui_eq($v_layout, 'featured'))}
+  {capture $f_6}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+  {/capture}
+  {capture $c_7}
+    {foreach ui_l($v_posts) as $v_p}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 1))}
+        {=ui_include('blocks/post-feature.latte', ['p' => ['p' => $v_p, 'labels' => $v_labels]])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_6], 'children' => $c_7])|noescape}
+{else}
+  {capture $c_9}
+    {capture $c_8}
+      {foreach ui_l($v_posts) as $v_p}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_lt($v_i, (ui_t(ui_eq($v_cols, '2')) ? 2 : 3)))}
+          {=ui_include('blocks/post-overlay-card.latte', ['p' => ['p' => $v_p, 'labels' => $v_labels, 'ratio' => (ui_t(ui_eq($v_cols, '2')) ? '16/9' : '4/3')]])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_cols, '2')) ? 'grid grid-cols-1 gap-6 md:grid-cols-2' : 'grid grid-cols-1 gap-6 md:grid-cols-3'))], 'children' => $c_8])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_9])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/post-split.latte b/packages/latte/ui/blocks/post-split.latte
new file mode 100644
index 0000000..494c115
--- /dev/null
+++ b/packages/latte/ui/blocks/post-split.latte
@@ -0,0 +1,50 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-split.json
+    A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags, figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair, wide, icons), tone.
+    Props (p): id, post, labels, extras, level, layout, mediaSide, author, cover, actions, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_post = ($p['post'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_layout = ($p['layout'] ?? 'split')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_author = ($p['author'] ?? 'line')}
+{var $v_cover = ($p['cover'] ?? 'wide')}
+{var $v_actions = ($p['actions'] ?? 'pair')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_eq($v_layout, 'center'))}
+  {capture $f_1}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_post, ['title']), 'ratio' => (ui_t(ui_eq($v_layout, 'center')) ? '21/9' : (ui_t(ui_eq($v_cover, 'square')) ? '1/1' : '4/3'))]])|noescape}
+  {/capture}
+  {capture $c_2}
+    {if ui_t(ui_gt(ui_len(ui_get($v_extras, ['tags'])), 0))}
+      {=ui_include('blocks/post-tags.latte', ['p' => ['tags' => ui_get($v_extras, ['tags']), 'align' => 'center']])|noescape}
+    {/if}
+    {=ui_include('blocks/post-stats.latte', ['p' => ['post' => $v_post, 'extras' => $v_extras, 'labels' => $v_labels, 'align' => 'center']])|noescape}
+    {=ui_include('blocks/post-author.latte', ['p' => ['post' => $v_post, 'extras' => $v_extras, 'labels' => $v_labels, 'mode' => 'card', 'share' => true, 'className' => ui_cnv(['mx-auto w-full max-w-md'])]])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => ui_get($v_post, ['title']), 'lead' => ui_get($v_post, ['excerpt']), 'heading' => ['badge' => ui_get($v_post, ['category']), 'level' => $v_level], 'tone' => $v_tone, 'media' => ['show' => true], 'align' => 'center', 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_1], 'children' => $c_2])|noescape}
+{else}
+  {capture $f_3}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_post, ['title']), 'ratio' => (ui_t(ui_eq($v_layout, 'center')) ? '21/9' : (ui_t(ui_eq($v_cover, 'square')) ? '1/1' : '4/3'))]])|noescape}
+  {/capture}
+  {capture $c_4}
+    {if ui_t(ui_eq($v_layout, 'outline'))}
+      {if ui_t(ui_gt(ui_len(ui_get($v_extras, ['outline'])), 0))}
+        {=ui_include('blocks/post-outline.latte', ['p' => ['post' => $v_post, 'extras' => $v_extras, 'labels' => $v_labels]])|noescape}
+      {/if}
+    {else}
+      {=ui_include('blocks/post-author.latte', ['p' => ['post' => $v_post, 'extras' => $v_extras, 'labels' => $v_labels, 'mode' => $v_author]])|noescape}
+      {if ui_t(!(ui_eq($v_author, 'line')))}
+        {=ui_include('blocks/post-stats.latte', ['p' => ['post' => $v_post, 'extras' => $v_extras, 'labels' => $v_labels]])|noescape}
+      {/if}
+      {if ui_t(ui_gt(ui_len(ui_get($v_extras, ['tags'])), 0))}
+        {=ui_include('blocks/post-tags.latte', ['p' => ['tags' => ui_get($v_extras, ['tags'])]])|noescape}
+      {/if}
+    {/if}
+    {=ui_include('blocks/post-actions.latte', ['p' => ['labels' => $v_labels, 'mode' => $v_actions]])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => ui_get($v_post, ['title']), 'lead' => ui_get($v_post, ['excerpt']), 'heading' => ['badge' => ui_get($v_post, ['category']), 'level' => $v_level], 'tone' => $v_tone, 'media' => ['show' => true, 'side' => $v_mediaSide], 'layout' => 'split', 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_3], 'children' => $c_4])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/post-stats.latte b/packages/latte/ui/blocks/post-stats.latte
new file mode 100644
index 0000000..1fbc826
--- /dev/null
+++ b/packages/latte/ui/blocks/post-stats.latte
@@ -0,0 +1,35 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-stats.json
+    The reading figures of a post: minutes to read, views and likes, each with its glyph.
+    Props (p): post, extras, labels, align. *}
+{var $v_post = ($p['post'] ?? null)}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_align = ($p['align'] ?? 'start')}
+{capture $c_7}
+  {capture $c_2}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'clock', 'Size' => 16]])|noescape}
+    {capture $c_1}
+      {=ui_text(ui_tpl(ui_get($v_labels, ['minutes']), [ui_get($v_post, ['minutes'])]))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_2])|noescape}
+  {capture $c_4}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'eye', 'Size' => 16]])|noescape}
+    {capture $c_3}
+      {=ui_text(ui_tpl(ui_get($v_labels, ['views']), [ui_get($v_extras, ['views'])]))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_3])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_4])|noescape}
+  {capture $c_6}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'heart', 'Size' => 16]])|noescape}
+    {capture $c_5}
+      {=ui_text(ui_tpl(ui_get($v_labels, ['likes']), [ui_get($v_extras, ['likes'])]))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_5])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_6])|noescape}
+{/capture}
+{=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => ui_s($v_align), 'Class' => 'flex-wrap text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'post-stats'])], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/post-tags.latte b/packages/latte/ui/blocks/post-tags.latte
new file mode 100644
index 0000000..622c5e4
--- /dev/null
+++ b/packages/latte/ui/blocks/post-tags.latte
@@ -0,0 +1,15 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-tags.json
+    The tags of a post as small badges in a wrapping row.
+    Props (p): tags, align. *}
+{var $v_tags = ($p['tags'] ?? null)}
+{var $v_align = ($p['align'] ?? 'start')}
+{capture $c_2}
+  {foreach ui_l($v_tags) as $v_tag}
+    {capture $c_1}
+      {=ui_text(ui_get($v_tag, ['name']))}
+    {/capture}
+    {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'post-tag'])], 'children' => $c_1])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Justify' => ui_s($v_align), 'Class' => 'flex-wrap'], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/presets/defaults.json b/packages/latte/ui/blocks/presets/defaults.json
new file mode 100644
index 0000000..b6af443
--- /dev/null
+++ b/packages/latte/ui/blocks/presets/defaults.json
@@ -0,0 +1,82 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "specVersion": 1,
+  "id": "preset.defaults",
+  "name": "defaults",
+  "docs": "Default layout preset: the sizes of the landing blocks as Tailwind classes.\nBlocks combine these with token classes; swap the preset to resize every block at once.",
+  "source": "ui8kit default sizes (Tailwind scale, no arbitrary values)",
+  "notes": {
+    "text": "small type steps for chips, badges and links",
+    "hero.band": "the inverse band: tall section, large bottom radius",
+    "hero.title": "display title",
+    "hero.titleWeights": "one font-weight class per title word",
+    "hero.composer": "the prompt box",
+    "logos.row": "one centered row of logo slots",
+    "logos.glyph": "the Lucide glyph inside a slot: half the slot"
+  },
+  "values": {
+    "text": {
+      "tiny": "text-xs",
+      "small": "text-sm"
+    },
+    "hero": {
+      "band": "min-h-160 rounded",
+      "container": "max-w-7xl",
+      "head": "gap-12",
+      "badge": "w-48",
+      "title": "text-5xl leading-tight",
+      "titleWeights": [
+        "font-normal",
+        "font-semibold",
+        "font-normal",
+        "font-semibold"
+      ],
+      "column": "max-w-xl gap-16",
+      "composer": "h-40 max-w-xl rounded",
+      "attach": "w-24",
+      "promptLine": "h-10",
+      "model": "w-24"
+    },
+    "section": {
+      "landing": "max-w-6xl"
+    },
+    "media": {
+      "rounded": "rounded"
+    },
+    "templates": {
+      "card": "h-60 w-64",
+      "image": "h-40 w-58 rounded",
+      "footer": "h-12 min-h-12"
+    },
+    "stats": {
+      "column": "min-h-28",
+      "figure": "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18",
+      "panel": "gap-24 rounded py-20"
+    },
+    "features": {
+      "cells": "rounded"
+    },
+    "news": {
+      "card": "h-56 w-64",
+      "cover": "h-40 w-64 rounded",
+      "title": "top-16",
+      "strip": "h-12 min-h-12"
+    },
+    "cta": {
+      "panel": "rounded py-20",
+      "title": "max-w-md",
+      "text": "max-w-2xl",
+      "button": "w-40"
+    },
+    "logos": {
+      "row": "h-28 max-w-4xl gap-12 pb-8",
+      "slot": "size-20",
+      "glyph": 40
+    },
+    "footer": {
+      "card": "h-72 gap-12 rounded",
+      "brand": "w-48",
+      "groups": "gap-x-16"
+    }
+  }
+}
diff --git a/packages/latte/ui/blocks/pricing-card.latte b/packages/latte/ui/blocks/pricing-card.latte
new file mode 100644
index 0000000..7592345
--- /dev/null
+++ b/packages/latte/ui/blocks/pricing-card.latte
@@ -0,0 +1,83 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/pricing-card.json
+    A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more actions. Text comes in through `labels`; the plan is data.
+    Props (p): plan, labels, current, emphasis, density, billing, footer (slot: plan). *}
+{var $v_plan = ($p['plan'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_current = ($p['current'] ?? null)}
+{var $v_emphasis = ($p['emphasis'] ?? 'auto')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_billing = ($p['billing'] ?? 'monthly')}
+{var $v_stand = ui_and([ui_get($v_plan, ['highlighted']), ui_eq($v_emphasis, 'auto')])}
+{var $v_yearlyOn = ui_and([ui_eq($v_billing, 'annual'), ui_gt(ui_get($v_plan, ['yearly']), 0)])}
+{var $v_amount = (ui_t($v_yearlyOn) ? ui_get($v_plan, ['yearly']) : ui_get($v_plan, ['price']))}
+{capture $c_16}
+  {capture $c_5}
+    {capture $c_2}
+      {if ui_t($v_stand)}
+        {capture $c_1}
+          {=ui_text(ui_get($v_labels, ['popular']))}
+        {/capture}
+        {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'default', 'Size' => 'default'], 'children' => $c_1])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-h-6 items-center', 'Attrs' => ui_attrs(['data-slot', 'badge-slot'])], 'children' => $c_2])|noescape}
+    {capture $c_3}
+      {=ui_text(ui_get($v_plan, ['name']))}
+    {/capture}
+    {=ui_include('ui/card/card-title.latte', ['p' => ['As' => ui_i(3)], 'children' => $c_3])|noescape}
+    {capture $c_4}
+      {=ui_text(ui_get($v_plan, ['tagline']))}
+    {/capture}
+    {=ui_include('ui/card/card-description.latte', ['p' => [], 'children' => $c_4])|noescape}
+  {/capture}
+  {=ui_include('ui/card/card-header.latte', ['p' => ['Class' => 'flex flex-col gap-2'], 'children' => $c_5])|noescape}
+  {capture $c_13}
+    {capture $c_8}
+      {capture $c_6}
+        {if ui_t(ui_eq($v_amount, 0))}
+          {=ui_text(ui_get($v_labels, ['free']))}
+        {else}
+          {=ui_text(ui_money($v_amount, ui_get($v_plan, ['currency'])))}
+        {/if}
+      {/capture}
+      {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => '4xl', 'Weight' => 'bold'], 'children' => $c_6])|noescape}
+      {if ui_t(ui_gt($v_amount, 0))}
+        {capture $c_7}
+          {=ui_text((ui_t($v_yearlyOn) ? ui_get($v_labels, ['perYear']) : ui_get($v_labels, ['perMonth'])))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'baseline'], 'children' => $c_8])|noescape}
+    {capture $c_9}
+      {=ui_text(ui_tpl(ui_get($v_labels, ['seats']), [ui_get($v_plan, ['seats'])]))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'medium'], 'children' => $c_9])|noescape}
+    {capture $c_10}
+      {=ui_text(ui_tpl(ui_get($v_labels, ['storage']), [ui_get($v_plan, ['storage'])]))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_10])|noescape}
+    {capture $c_12}
+      {foreach ui_l(ui_get($v_plan, ['features'])) as $v_feature}
+        {capture $c_11}
+          {=ui_text($v_feature)}
+        {/capture}
+        {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex gap-2'], 'children' => $c_11])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col gap-2 text-sm'], 'children' => $c_12])|noescape}
+  {/capture}
+  {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-1 flex-col', (ui_t(ui_eq($v_density, 'compact')) ? 'gap-2' : 'gap-4')]))], 'children' => $c_13])|noescape}
+  {capture $c_15}
+    {capture $c_14}
+      {=ui_text(ui_get($v_labels, ['cta']))}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => ui_s((ui_t($v_stand) ? 'default' : 'outline')), 'Size' => 'default', 'Attrs' => ui_attrs(['data-testid', 'plan-select'])], 'children' => $c_14])|noescape}
+    {if (($p['footer'] ?? null) !== null)}
+      {=ui_include($p['footer']['t'], array_merge($p['footer']['v'], ['a0' => $v_plan]))|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/card/card-footer.latte', ['p' => ['Class' => 'flex flex-wrap items-center gap-2'], 'children' => $c_15])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'article', 'Class' => ui_s(ui_cnv(['flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded', 'flex h-full flex-col'])), 'Attrs' => ui_attrs(['data-slot', 'card', 'data-highlighted', (ui_t($v_stand) ? 'true' : 'false'), 'data-current', (ui_t($v_current) ? 'true' : 'false')])], 'children' => $c_16])|noescape}
diff --git a/packages/latte/ui/blocks/pricing-tiers.latte b/packages/latte/ui/blocks/pricing-tiers.latte
new file mode 100644
index 0000000..add8eba
--- /dev/null
+++ b/packages/latte/ui/blocks/pricing-tiers.latte
@@ -0,0 +1,49 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/pricing-tiers.json
+    A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid, stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and the prices of that period), density, tone.
+    Props (p): id, title, plans, labels, billingLabels, layout, cols, emphasis, billing, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_plans = ($p['plans'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_billingLabels = ($p['billingLabels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_cols = ($p['cols'] ?? '1-3')}
+{var $v_emphasis = ($p['emphasis'] ?? 'auto')}
+{var $v_billing = ($p['billing'] ?? 'off')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_7}
+  {if ui_t(!(ui_eq($v_billing, 'off')))}
+    {capture $c_5}
+      {capture $c_3}
+        {capture $c_1}
+          {=ui_text(ui_get($v_billingLabels, ['monthly']))}
+        {/capture}
+        {=ui_include('blocks/switcher-item.latte', ['p' => ['active' => ui_eq($v_billing, 'monthly')], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text(ui_get($v_billingLabels, ['annual']))}
+        {/capture}
+        {=ui_include('blocks/switcher-item.latte', ['p' => ['active' => ui_eq($v_billing, 'annual')], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('blocks/switcher.latte', ['p' => ['label' => ui_get($v_billingLabels, ['label'])], 'children' => $c_3])|noescape}
+      {capture $c_4}
+        {=ui_text(ui_get($v_billingLabels, ['save']))}
+      {/capture}
+      {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'default', 'Size' => 'default'], 'children' => $c_4])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'center', 'Class' => 'flex-wrap', 'Attrs' => ui_attrs(['data-testid', 'billing'])], 'children' => $c_5])|noescape}
+  {/if}
+  {if ui_t(ui_eq(ui_len($v_plans), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layers', 'title' => ui_get($v_labels, ['empty'])]])|noescape}
+  {else}
+    {capture $c_6}
+      {foreach ui_l($v_plans) as $v_plan}
+        {=ui_include('blocks/pricing-card.latte', ['p' => ['plan' => $v_plan, 'labels' => $v_labels, 'emphasis' => $v_emphasis, 'billing' => (ui_t(ui_eq($v_billing, 'annual')) ? 'annual' : 'monthly'), 'density' => (ui_t(ui_eq($v_density, 'compact')) ? 'compact' : 'default')]])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'stack')) ? '1' : ui_fit_cols($v_cols, ui_len($v_plans)))), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'tiers'])], 'children' => $c_6])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'measure' => (ui_t(ui_eq($v_layout, 'stack')) ? 'md' : 'default'), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/product-card.latte b/packages/latte/ui/blocks/product-card.latte
new file mode 100644
index 0000000..f4e9f57
--- /dev/null
+++ b/packages/latte/ui/blocks/product-card.latte
@@ -0,0 +1,88 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-card.json
+    A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image, none), ratio, rating (show, hide), action (button, none), density.
+    Props (p): product, labels, badges, layout, media, ratio, rating, action, density. *}
+{var $v_product = ($p['product'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_badges = ($p['badges'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'vertical')}
+{var $v_media = ($p['media'] ?? 'image')}
+{var $v_ratio = ($p['ratio'] ?? '4/3')}
+{var $v_rating = ($p['rating'] ?? 'show')}
+{var $v_action = ($p['action'] ?? 'button')}
+{var $v_density = ($p['density'] ?? 'default')}
+{capture $c_16}
+  {if ui_t(ui_eq($v_media, 'image'))}
+    {capture $c_2}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_product, ['name']), 'src' => ui_get($v_product, ['image']), 'ratio' => $v_ratio, 'className' => ui_cnv(['h-full'])]])|noescape}
+      {if ui_t(ui_get($v_product, ['badge']))}
+        {capture $c_1}
+          {=ui_text(ui_at($v_badges, ui_get($v_product, ['badge'])))}
+        {/capture}
+        {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Class' => 'absolute left-4 top-4', 'Attrs' => ui_attrs(['data-testid', 'badge'])], 'children' => $c_1])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['relative shrink-0', (ui_t(ui_eq($v_layout, 'horizontal')) ? 'sm:w-48' : '')]))], 'children' => $c_2])|noescape}
+  {/if}
+  {capture $c_15}
+    {capture $c_3}
+      {=ui_text(ui_get($v_product, ['category']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'uppercase tracking-wide text-muted-foreground'], 'children' => $c_3])|noescape}
+    {capture $c_5}
+      {if ui_t(ui_get($v_product, ['href']))}
+        {capture $c_4}
+          {=ui_text(ui_get($v_product, ['name']))}
+        {/capture}
+        {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_get($v_product, ['href'])), 'Variant' => 'default', 'Attrs' => ui_attrs(['data-testid', 'open'])], 'children' => $c_4])|noescape}
+      {else}
+        {=ui_text(ui_get($v_product, ['name']))}
+      {/if}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'bold'], 'children' => $c_5])|noescape}
+    {if ui_t(ui_eq($v_rating, 'show'))}
+      {capture $c_7}
+        {=ui_include('blocks/rating.latte', ['p' => ['value' => ui_get($v_product, ['rating']), 'label' => ui_tpl(ui_get($v_labels, ['ratingLabel']), [ui_get($v_product, ['rating'])])]])|noescape}
+        {capture $c_6}
+          {=ui_text(ui_tpl(ui_get($v_labels, ['reviews']), [ui_get($v_product, ['reviews'])]))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2'], 'children' => $c_7])|noescape}
+    {/if}
+    {if ui_t(ui_eq($v_density, 'default'))}
+      {capture $c_8}
+        {=ui_text(ui_get($v_product, ['summary']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_8])|noescape}
+    {/if}
+    {capture $c_14}
+      {capture $c_12}
+        {capture $c_9}
+          {=ui_text(ui_money(ui_get($v_product, ['price']), ui_get($v_product, ['currency'])))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_9])|noescape}
+        {if ui_t(ui_and([ui_get($v_product, ['compareAt']), ui_gt(ui_get($v_product, ['compareAt']), ui_get($v_product, ['price']))]))}
+          {capture $c_11}
+            {capture $c_10}
+              {=ui_text(ui_get($v_labels, ['was']))}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_10])|noescape}
+            {=ui_text(ui_money(ui_get($v_product, ['compareAt']), ui_get($v_product, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Tag' => 'del', 'Size' => 'sm', 'Class' => 'relative text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'compare-at'])], 'children' => $c_11])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'baseline', 'Class' => 'flex-wrap'], 'children' => $c_12])|noescape}
+      {if ui_t(ui_eq($v_action, 'button'))}
+        {capture $c_13}
+          {=ui_text((ui_t(ui_get($v_product, ['inStock'])) ? ui_get($v_labels, ['add']) : ui_get($v_labels, ['soldOut'])))}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => ui_s((ui_t(ui_get($v_product, ['inStock'])) ? 'default' : 'outline')), 'Size' => 'sm', 'Disabled' => ui_t(!(ui_t(ui_get($v_product, ['inStock'])))), 'Attrs' => ui_attrs(['data-testid', 'add'])], 'children' => $c_13])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Justify' => 'between', 'Class' => 'mt-auto pt-2'], 'children' => $c_14])|noescape}
+  {/capture}
+  {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => 'flex flex-1 flex-col gap-2'], 'children' => $c_15])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'article', 'Class' => ui_s(ui_cnv(['flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded', 'h-full gap-4 overflow-hidden', (ui_t(ui_eq($v_layout, 'horizontal')) ? 'flex flex-col sm:flex-row' : 'flex flex-col')])), 'Attrs' => ui_attrs(['data-slot', 'card', 'data-testid', 'item', 'data-layout', $v_layout])], 'children' => $c_16])|noescape}
diff --git a/packages/latte/ui/blocks/product-detail.latte b/packages/latte/ui/blocks/product-detail.latte
new file mode 100644
index 0000000..3256f78
--- /dev/null
+++ b/packages/latte/ui/blocks/product-detail.latte
@@ -0,0 +1,82 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-detail.json
+    A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price, stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs (none, below), buy (full, compact), tone, density.
+    Props (p): id, product, labels, badges, level, layout, mediaSide, thumbs, buy, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_product = ($p['product'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_badges = ($p['badges'] ?? null)}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_layout = ($p['layout'] ?? 'split')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'start')}
+{var $v_thumbs = ($p['thumbs'] ?? 'below')}
+{var $v_buy = ($p['buy'] ?? 'full')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(!(ui_t($v_product)))}
+  {capture $c_1}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'package', 'title' => ui_get($v_labels, ['empty'])]])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_1])|noescape}
+{else}
+  {capture $f_14}
+    {=ui_include('blocks/product-gallery.latte', ['p' => ['name' => ui_get($v_product, ['name']), 'image' => ui_get($v_product, ['image']), 'thumbs' => $v_thumbs]])|noescape}
+  {/capture}
+  {capture $c_15}
+    {capture $c_13}
+      {if ui_t(ui_get($v_product, ['category']))}
+        {capture $c_2}
+          {=ui_text(ui_get($v_product, ['category']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'uppercase tracking-wide text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'category'])], 'children' => $c_2])|noescape}
+      {/if}
+      {=ui_include('blocks/product-price.latte', ['p' => ['price' => ui_get($v_product, ['price']), 'compareAt' => ui_get($v_product, ['compareAt']), 'currency' => ui_get($v_product, ['currency']), 'badge' => (ui_t(ui_get($v_product, ['badge'])) ? ui_at($v_badges, ui_get($v_product, ['badge'])) : ''), 'was' => ui_get($v_labels, ['was'])]])|noescape}
+      {capture $c_4}
+        {=ui_include('blocks/rating.latte', ['p' => ['value' => ui_get($v_product, ['rating']), 'label' => ui_tpl(ui_get($v_labels, ['ratingLabel']), [ui_get($v_product, ['rating'])])]])|noescape}
+        {capture $c_3}
+          {=ui_text(ui_tpl(ui_get($v_labels, ['reviews']), [ui_get($v_product, ['reviews'])]))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2'], 'children' => $c_4])|noescape}
+      {capture $c_5}
+        {=ui_text((ui_t(ui_get($v_product, ['inStock'])) ? ui_get($v_labels, ['inStock']) : ui_get($v_labels, ['soldOut'])))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'medium', 'Class' => ui_s((ui_t(ui_get($v_product, ['inStock'])) ? 'text-foreground' : 'text-destructive')), 'Attrs' => ui_attrs(['data-testid', 'stock'])], 'children' => $c_5])|noescape}
+      {capture $c_7}
+        {if ui_t(ui_eq($v_buy, 'full'))}
+          {=ui_include('blocks/number-field.latte', ['p' => ['value' => '1', 'name' => ui_tpl('{0}-qty', [$v_id]), 'min' => '1', 'label' => ui_get($v_labels, ['qty']), 'decrease' => ui_get($v_labels, ['decrease']), 'increase' => ui_get($v_labels, ['increase'])]])|noescape}
+        {/if}
+        {capture $c_6}
+          {=ui_text(ui_get($v_labels, ['add']))}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Disabled' => ui_t(!(ui_t(ui_get($v_product, ['inStock'])))), 'Attrs' => ui_attrs(['data-testid', 'add'])], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Class' => 'flex-wrap'], 'children' => $c_7])|noescape}
+      {if ui_t(ui_eq($v_buy, 'full'))}
+        {capture $c_12}
+          {capture $c_9}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'truck', 'Size' => 16]])|noescape}
+            {capture $c_8}
+              {=ui_text(ui_get($v_labels, ['shipping']))}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_8])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center gap-2'], 'children' => $c_9])|noescape}
+          {capture $c_11}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'shield-check', 'Size' => 16]])|noescape}
+            {capture $c_10}
+              {=ui_text(ui_get($v_labels, ['returns']))}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_10])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center gap-2'], 'children' => $c_11])|noescape}
+        {/capture}
+        {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col gap-2 text-sm text-muted-foreground'], 'children' => $c_12])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'buy-box'])], 'children' => $c_13])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => ui_get($v_product, ['name']), 'lead' => ui_get($v_product, ['summary']), 'heading' => ['level' => $v_level], 'layout' => (ui_t(ui_eq($v_layout, 'split')) ? 'split' : 'stack'), 'media' => ['show' => true, 'side' => $v_mediaSide, 'align' => 'start'], 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_14], 'children' => $c_15])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/product-gallery.latte b/packages/latte/ui/blocks/product-gallery.latte
new file mode 100644
index 0000000..a5ccf48
--- /dev/null
+++ b/packages/latte/ui/blocks/product-gallery.latte
@@ -0,0 +1,19 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-gallery.json
+    The gallery of a product page: the picture (the file of the product's featured media, a placeholder without one) and optional thumbnails below.
+    Props (p): name, image, thumbs. *}
+{var $v_name = ($p['name'] ?? null)}
+{var $v_image = ($p['image'] ?? null)}
+{var $v_thumbs = ($p['thumbs'] ?? 'below')}
+{capture $c_2}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_name, 'src' => $v_image, 'ratio' => '1/1']])|noescape}
+  {if ui_t(ui_eq($v_thumbs, 'below'))}
+    {capture $c_1}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_name, 'src' => $v_image, 'ratio' => '1/1', 'className' => ui_cnv(['ring-2 ring-foreground'])]])|noescape}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_name, 'ratio' => '1/1']])|noescape}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_name, 'ratio' => '1/1']])|noescape}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '3', 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'thumbs'])], 'children' => $c_1])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'gallery'])], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/product-grid.latte b/packages/latte/ui/blocks/product-grid.latte
new file mode 100644
index 0000000..8ea096e
--- /dev/null
+++ b/packages/latte/ui/blocks/product-grid.latte
@@ -0,0 +1,40 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-grid.json
+    A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating, action, tone, density.
+    Props (p): id, title, products, labels, badges, layout, cols, ratio, rating, action, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_products = ($p['products'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_badges = ($p['badges'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_cols = ($p['cols'] ?? '1-3')}
+{var $v_ratio = ($p['ratio'] ?? '4/3')}
+{var $v_rating = ($p['rating'] ?? 'show')}
+{var $v_action = ($p['action'] ?? 'button')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_4}
+  {if ui_t(ui_eq(ui_len($v_products), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'package', 'title' => ui_get($v_labels, ['empty'])]])|noescape}
+  {elseif ui_t(ui_eq($v_layout, 'rail'))}
+    {capture $c_2}
+      {foreach ui_l($v_products) as $v_p}
+        {capture $c_1}
+          {=ui_include('blocks/product-card.latte', ['p' => ['product' => $v_p, 'labels' => $v_labels, 'badges' => $v_badges, 'layout' => (ui_t(ui_eq($v_layout, 'list')) ? 'horizontal' : 'vertical'), 'ratio' => $v_ratio, 'rating' => $v_rating, 'action' => $v_action, 'density' => (ui_t(ui_eq($v_density, 'compact')) ? 'compact' : 'default')]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'w-64 shrink-0 snap-start'], 'children' => $c_1])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex snap-x gap-4 overflow-x-auto pb-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_2])|noescape}
+  {else}
+    {capture $c_3}
+      {foreach ui_l($v_products) as $v_p}
+        {=ui_include('blocks/product-card.latte', ['p' => ['product' => $v_p, 'labels' => $v_labels, 'badges' => $v_badges, 'layout' => (ui_t(ui_eq($v_layout, 'list')) ? 'horizontal' : 'vertical'), 'ratio' => $v_ratio, 'rating' => $v_rating, 'action' => $v_action, 'density' => (ui_t(ui_eq($v_density, 'compact')) ? 'compact' : 'default')]])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'list')) ? '1' : $v_cols)), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_3])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/product-info.latte b/packages/latte/ui/blocks/product-info.latte
new file mode 100644
index 0000000..aafa4f5
--- /dev/null
+++ b/packages/latte/ui/blocks/product-info.latte
@@ -0,0 +1,66 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-info.json
+    The details of a product under its buy box: texts in an accordion (native details) beside a card with the specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text open, none), tone.
+    Props (p): id, title, details, specs, labels, layout, expand, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_details = ($p['details'] ?? null)}
+{var $v_specs = ($p['specs'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'split')}
+{var $v_expand = ($p['expand'] ?? 'first')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_13}
+  {capture $c_12}
+    {if ui_t(ui_gt(ui_len($v_details), 0))}
+      {capture $c_5}
+        {foreach ui_l($v_details) as $v_d}
+          {var $v_i = $iterator->counter0}
+          {capture $c_4}
+            {capture $c_2}
+              {capture $c_1}
+                {=ui_text(ui_get($v_d, ['title']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-base font-semibold'], 'children' => $c_1])|noescape}
+            {/capture}
+            {=ui_include('ui/disclosure/summary.latte', ['p' => ['Variant' => 'item'], 'children' => $c_2])|noescape}
+            {capture $c_3}
+              {=ui_text(ui_get($v_d, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'pb-4 text-muted-foreground'], 'children' => $c_3])|noescape}
+          {/capture}
+          {=ui_include('ui/disclosure/disclosure.latte', ['p' => ['Variant' => 'item', 'Open' => ui_t(ui_and([ui_eq($v_expand, 'first'), ui_eq($v_i, 0)])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_4])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => 'stretch', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? 'lg:col-span-2' : '')), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_5])|noescape}
+    {/if}
+    {if ui_t(ui_gt(ui_len($v_specs), 0))}
+      {capture $c_11}
+        {capture $c_6}
+          {=ui_text(ui_get($v_labels, ['specs']))}
+        {/capture}
+        {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'lg', 'Weight' => 'bold'], 'children' => $c_6])|noescape}
+        {capture $c_10}
+          {foreach ui_l($v_specs) as $v_s}
+            {capture $c_9}
+              {capture $c_7}
+                {=ui_text(ui_get($v_s, ['label']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+              {capture $c_8}
+                {=ui_text(ui_get($v_s, ['value']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'font-medium'], 'children' => $c_8])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0', 'Attrs' => ui_attrs(['data-testid', 'spec'])], 'children' => $c_9])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col'], 'children' => $c_10])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs' => ui_attrs(['data-testid', 'specs'])], 'children' => $c_11])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3' : 'grid grid-cols-1 gap-8'))], 'children' => $c_12])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_13])|noescape}
diff --git a/packages/latte/ui/blocks/product-price.latte b/packages/latte/ui/blocks/product-price.latte
new file mode 100644
index 0000000..ea747fd
--- /dev/null
+++ b/packages/latte/ui/blocks/product-price.latte
@@ -0,0 +1,32 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-price.json
+    The price line of a product page: the price (integer minor units in the currency), the old price (compare_at) struck through when higher, and the badge.
+    Props (p): price, compareAt, currency, badge, was. *}
+{var $v_price = ($p['price'] ?? null)}
+{var $v_compareAt = ($p['compareAt'] ?? null)}
+{var $v_currency = ($p['currency'] ?? null)}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_was = ($p['was'] ?? null)}
+{capture $c_5}
+  {capture $c_1}
+    {=ui_text(ui_money($v_price, $v_currency))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => '4xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+  {if ui_t(ui_and([$v_compareAt, ui_gt($v_compareAt, $v_price)]))}
+    {capture $c_3}
+      {capture $c_2}
+        {=ui_text($v_was)}
+      {/capture}
+      {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_2])|noescape}
+      {=ui_text(ui_money($v_compareAt, $v_currency))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Tag' => 'del', 'Size' => 'lg', 'Class' => 'relative text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'compare-at'])], 'children' => $c_3])|noescape}
+  {/if}
+  {if ui_t($v_badge)}
+    {capture $c_4}
+      {=ui_text($v_badge)}
+    {/capture}
+    {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'default', 'Size' => 'default'], 'children' => $c_4])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'flex-wrap'], 'children' => $c_5])|noescape}
diff --git a/packages/latte/ui/blocks/profile-form.latte b/packages/latte/ui/blocks/profile-form.latte
new file mode 100644
index 0000000..44dfd6d
--- /dev/null
+++ b/packages/latte/ui/blocks/profile-form.latte
@@ -0,0 +1,89 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/profile-form.json
+    An account settings form: a picture with a change button, name, email, bio and two notification switches, with save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default, muted).
+    Props (p): id, title, text, labels, layout, avatar, prefs, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'stacked')}
+{var $v_avatar = ($p['avatar'] ?? 'show')}
+{var $v_prefs = ($p['prefs'] ?? 'show')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_20}
+  {capture $c_19}
+    {capture $c_18}
+      {capture $c_17}
+        {capture $c_13}
+          {capture $c_6}
+            {if ui_t(ui_eq($v_avatar, 'show'))}
+              {capture $c_2}
+                {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_labels, ['picture']), 'ratio' => '1/1', 'className' => ui_cnv(['size-16 shrink-0 rounded-full'])]])|noescape}
+                {capture $c_1}
+                  {=ui_text(ui_get($v_labels, ['change']))}
+                {/capture}
+                {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Type' => 'button'], 'children' => $c_1])|noescape}
+              {/capture}
+              {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Attrs' => ui_attrs(['data-testid', 'avatar'])], 'children' => $c_2])|noescape}
+            {/if}
+            {capture $c_3}
+              {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => 'name', 'Autocomplete' => 'name', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-name', [$v_id]), 'data-testid', 'field'])]])|noescape}
+            {/capture}
+            {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['name']), 'htmlFor' => ui_tpl('{0}-name', [$v_id])], 'children' => $c_3])|noescape}
+            {capture $c_4}
+              {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'email', 'Name' => 'email', 'Autocomplete' => 'email', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-email', [$v_id]), 'data-testid', 'field'])]])|noescape}
+            {/capture}
+            {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['email']), 'htmlFor' => ui_tpl('{0}-email', [$v_id])], 'children' => $c_4])|noescape}
+            {capture $c_5}
+              {=ui_include('ui/textarea/textarea.latte', ['p' => ['Rows' => 4, 'Name' => 'bio', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-bio', [$v_id]), 'data-testid', 'field'])]])|noescape}
+            {/capture}
+            {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['bio']), 'htmlFor' => ui_tpl('{0}-bio', [$v_id])], 'children' => $c_5])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_6])|noescape}
+          {if ui_t(ui_eq($v_prefs, 'show'))}
+            {capture $c_12}
+              {capture $c_7}
+                {=ui_text(ui_get($v_labels, ['prefs']))}
+              {/capture}
+              {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'bold'], 'children' => $c_7])|noescape}
+              {capture $c_9}
+                {capture $c_8}
+                  {=ui_text(ui_get($v_labels, ['updates']))}
+                {/capture}
+                {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-updates', [$v_id])), 'Class' => 'text-sm'], 'children' => $c_8])|noescape}
+                {=ui_include('ui/switch/switch.latte', ['p' => ['Name' => 'updates', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-updates', [$v_id])])]])|noescape}
+              {/capture}
+              {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between'], 'children' => $c_9])|noescape}
+              {capture $c_11}
+                {capture $c_10}
+                  {=ui_text(ui_get($v_labels, ['alerts']))}
+                {/capture}
+                {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-alerts', [$v_id])), 'Class' => 'text-sm'], 'children' => $c_10])|noescape}
+                {=ui_include('ui/switch/switch.latte', ['p' => ['Name' => 'alerts', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-alerts', [$v_id])])]])|noescape}
+              {/capture}
+              {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between'], 'children' => $c_11])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'prefs'])], 'children' => $c_12])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? '1-2' : '1')), 'Class' => 'items-start gap-8'], 'children' => $c_13])|noescape}
+        {capture $c_16}
+          {capture $c_14}
+            {=ui_text(ui_get($v_labels, ['save']))}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'submit', 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_14])|noescape}
+          {capture $c_15}
+            {=ui_text(ui_get($v_labels, ['cancel']))}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Type' => 'button'], 'children' => $c_15])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Class' => 'flex-wrap'], 'children' => $c_16])|noescape}
+      {/capture}
+      {=ui_include('ui/form/form.latte', ['p' => ['Method' => 'dialog', 'Class' => 'gap-6', 'Attrs' => ui_attrs(['data-testid', 'profile-form'])], 'children' => $c_17])|noescape}
+    {/capture}
+    {=ui_include('blocks/panel.latte', ['p' => ['title' => $v_title, 'description' => $v_text, 'id' => $v_id, 'className' => ui_cnv([ui_cnv([(ui_t(ui_eq($v_tone, 'muted')) ? 'bg-muted' : '')])])], 'children' => $c_18])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => 'mx-auto w-full max-w-6xl px-4 py-8', 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_19])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : (ui_t(ui_and([$v_title, $v_id])) ? ui_tpl('{0}-t', [$v_id]) : null)), 'data-testid', 'panel-section', 'aria-label', $v_landmarkLabel])], 'children' => $c_20])|noescape}
diff --git a/packages/latte/ui/blocks/project-grid.latte b/packages/latte/ui/blocks/project-grid.latte
new file mode 100644
index 0000000..fed1161
--- /dev/null
+++ b/packages/latte/ui/blocks/project-grid.latte
@@ -0,0 +1,57 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/project-grid.json
+    Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay, bento, list), tone, density.
+    Props (p): id, title, lead, projects, empty, labels, layout, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_projects = ($p['projects'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'cards')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_8}
+  {capture $c_9}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4']])|noescape}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4', 'className' => ui_cnv(['mt-8'])]])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-4', 'Attrs' => ui_attrs(['data-testid', 'collage'])], 'children' => $c_9])|noescape}
+{/capture}
+{capture $c_10}
+  {if ui_t(ui_eq(ui_len($v_projects), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'folder-open', 'title' => $v_empty]])|noescape}
+  {elseif ui_t(ui_eq($v_layout, 'list'))}
+    {capture $c_7}
+      {foreach ui_l($v_projects) as $v_p}
+        {capture $c_6}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_p, ['title']), 'ratio' => '1/1', 'className' => ui_cnv(['size-16 shrink-0'])]])|noescape}
+          {capture $c_5}
+            {capture $c_3}
+              {capture $c_1}
+                {=ui_text(ui_get($v_p, ['title']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+              {capture $c_2}
+                {=ui_text(ui_get($v_p, ['year']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Justify' => 'between'], 'children' => $c_3])|noescape}
+            {capture $c_4}
+              {=ui_text(ui_get($v_p, ['summary']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Class' => 'flex-1'], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Class' => 'border-b border-border pb-4', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_6])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_7])|noescape}
+  {else}
+    {=ui_include('blocks/project-tiles.latte', ['p' => ['projects' => $v_projects, 'labels' => $v_labels, 'layout' => $v_layout]])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'density' => $v_density, 'layout' => (ui_t(ui_eq($v_layout, 'list')) ? 'split' : 'stack'), 'media' => ['show' => ui_eq($v_layout, 'list'), 'align' => 'start'], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_8], 'children' => $c_10])|noescape}
diff --git a/packages/latte/ui/blocks/project-tiles.latte b/packages/latte/ui/blocks/project-tiles.latte
new file mode 100644
index 0000000..abe7e26
--- /dev/null
+++ b/packages/latte/ui/blocks/project-tiles.latte
@@ -0,0 +1,68 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/project-tiles.json
+    The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags, two links), compact cards in four columns, captions over the pictures, or a bento where the first project takes a big tile.
+    Props (p): projects, labels, layout. *}
+{var $v_projects = ($p['projects'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'cards')}
+{var $v_over = (ui_t(ui_eq($v_layout, 'overlay')) ? true : ui_eq($v_layout, 'bento'))}
+{capture $c_13}
+  {foreach ui_l($v_projects) as $v_p}
+    {var $v_i = $iterator->counter0}
+    {capture $c_12}
+      {capture $c_2}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_p, ['title']), 'ratio' => (ui_t(ui_eq($v_layout, 'compact')) ? '1/1' : (ui_t($v_over) ? '3/4' : '4/3')), 'className' => ui_cnv([(ui_t($v_over) ? 'h-full' : '')])]])|noescape}
+        {if ui_t(ui_and([ui_get($v_p, ['featured']), !(ui_eq($v_layout, 'compact'))]))}
+          {capture $c_1}
+            {=ui_text(ui_get($v_labels, ['featured']))}
+          {/capture}
+          {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Class' => 'absolute left-4 top-4', 'Attrs' => ui_attrs(['data-testid', 'featured'])], 'children' => $c_1])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t($v_over) ? 'h-full' : 'relative'))], 'children' => $c_2])|noescape}
+      {capture $c_11}
+        {capture $c_3}
+          {=ui_text(ui_tpl('{0}, {1}', [ui_get($v_p, ['category']), ui_get($v_p, ['year'])]))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+        {capture $c_4}
+          {=ui_text(ui_get($v_p, ['title']))}
+        {/capture}
+        {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => ui_s((ui_t(ui_eq($v_layout, 'compact')) ? 'sm' : 'lg')), 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+        {if ui_t(!(ui_eq($v_layout, 'compact')))}
+          {capture $c_5}
+            {=ui_text(ui_get($v_p, ['summary']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+        {/if}
+        {if ui_t(ui_eq($v_layout, 'cards'))}
+          {capture $c_7}
+            {foreach ui_l(ui_get($v_p, ['tags'])) as $v_k}
+              {capture $c_6}
+                {=ui_text($v_k)}
+              {/capture}
+              {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm'], 'children' => $c_6])|noescape}
+            {/foreach}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Class' => 'flex-wrap'], 'children' => $c_7])|noescape}
+          {capture $c_10}
+            {capture $c_8}
+              {=ui_text(ui_get($v_labels, ['case']))}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-right', 'Size' => 16]])|noescape}
+            {/capture}
+            {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_p, ['href']), 'className' => ui_cnv(['inline-flex items-center gap-2 text-sm font-medium'])], 'children' => $c_8])|noescape}
+            {capture $c_9}
+              {=ui_text(ui_get($v_labels, ['view']))}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'external-link', 'Size' => 16]])|noescape}
+            {/capture}
+            {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_p, ['href']), 'className' => ui_cnv(['inline-flex items-center gap-2 text-sm font-medium'])], 'children' => $c_9])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Class' => 'pt-2'], 'children' => $c_10])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'stretch', 'Class' => ui_s((ui_t($v_over) ? 'absolute right-4 bottom-4 left-4 rounded bg-background p-4' : ''))], 'children' => $c_11])|noescape}
+    {/capture}
+    {=ui_include('blocks/article-block.latte', ['p' => ['className' => ui_cnv([ui_cnv(['flex flex-col gap-4', (ui_t($v_over) ? 'relative' : 'rounded bg-card inset-ring inset-ring-border p-4'), (ui_t(ui_and([ui_eq($v_layout, 'bento'), ui_eq($v_i, 0)])) ? 'sm:col-span-2 lg:row-span-2' : '')])]), 'testid' => 'item'], 'children' => $c_12])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'compact')) ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3')), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_13])|noescape}
diff --git a/packages/latte/ui/blocks/prompt-composer.latte b/packages/latte/ui/blocks/prompt-composer.latte
new file mode 100644
index 0000000..00d5dd1
--- /dev/null
+++ b/packages/latte/ui/blocks/prompt-composer.latte
@@ -0,0 +1,53 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/prompt-composer.json
+    A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send button. Static links only; a host adds behavior.
+    Props (p): label, attachLabel, modelLabel, send, href. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_attachLabel = ($p['attachLabel'] ?? null)}
+{var $v_modelLabel = ($p['modelLabel'] ?? null)}
+{var $v_send = ($p['send'] ?? null)}
+{var $v_href = ($p['href'] ?? null)}
+{capture $c_10}
+  {if ui_t($v_attachLabel)}
+    {capture $c_3}
+      {capture $c_1}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'file-text', 'Size' => 16]])|noescape}
+        {=ui_text($v_attachLabel)}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Class' => ui_s(ui_cnv(['gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20', ui_preset('blocks/presets/defaults.json', ['hero', 'attach'])])), 'Attrs' => ui_attrs(['data-testid', 'composer-attach'])], 'children' => $c_1])|noescape}
+      {capture $c_2}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'paperclip', 'Size' => 16]])|noescape}
+        {=ui_text($v_attachLabel)}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Class' => ui_s(ui_cnv(['gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20', ui_preset('blocks/presets/defaults.json', ['hero', 'attach'])])), 'Attrs' => ui_attrs(['data-testid', 'composer-attach'])], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Attrs' => ui_attrs(['data-testid', 'composer-attachments'])], 'children' => $c_3])|noescape}
+  {/if}
+  {capture $c_4}
+    {=ui_text($v_label)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'semibold', 'Class' => ui_s(ui_cnv(['flex w-full items-center leading-5 text-background/80', ui_preset('blocks/presets/defaults.json', ['hero', 'promptLine'])])), 'Attrs' => ui_attrs(['data-testid', 'field'])], 'children' => $c_4])|noescape}
+  {capture $c_9}
+    {capture $c_7}
+      {capture $c_5}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'plus', 'Size' => 16]])|noescape}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'Class' => 'bg-background/10 text-background hover:bg-background/20', 'Attrs' => ui_attrs(['data-testid', 'composer-plus', 'aria-label', ui_coalesce([$v_attachLabel, 'Attach'])])], 'children' => $c_5])|noescape}
+      {if ui_t($v_modelLabel)}
+        {capture $c_6}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'sparkles', 'Size' => 16]])|noescape}
+          {=ui_text($v_modelLabel)}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-down', 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Class' => ui_s(ui_cnv(['gap-2 bg-background/10 text-background hover:bg-background/20', ui_preset('blocks/presets/defaults.json', ['hero', 'model'])])), 'Attrs' => ui_attrs(['data-testid', 'composer-model'])], 'children' => $c_6])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_7])|noescape}
+    {capture $c_8}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-up', 'Size' => 16]])|noescape}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Href' => ui_s($v_href), 'Variant' => 'secondary', 'Size' => 'sm', 'Layout' => 'icon', 'Attrs' => ui_attrs(['data-testid', 'submit', 'aria-label', ui_coalesce([$v_send, 'Send'])])], 'children' => $c_8])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'h-8 w-full', 'Attrs' => ui_attrs(['data-testid', 'composer-tools'])], 'children' => $c_9])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30', ui_preset('blocks/presets/defaults.json', ['hero', 'composer'])])), 'Attrs' => ui_attrs(['data-testid', 'email-form'])], 'children' => $c_10])|noescape}
diff --git a/packages/latte/ui/blocks/proof-band.latte b/packages/latte/ui/blocks/proof-band.latte
new file mode 100644
index 0000000..cfec3b5
--- /dev/null
+++ b/packages/latte/ui/blocks/proof-band.latte
@@ -0,0 +1,53 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/proof-band.json
+    Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above, beside), logos (name, icon), tone, density.
+    Props (p): id, title, logos, empty, stats, layout, logoStyle, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_logos = ($p['logos'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_stats = ($p['stats'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'above')}
+{var $v_logoStyle = ($p['logoStyle'] ?? 'name')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_9}
+  {if ui_t(ui_eq(ui_len($v_logos), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'building-2', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_8}
+      {capture $c_3}
+        {foreach ui_l($v_logos) as $v_logo}
+          {capture $c_2}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_logo, ['icon'])), 'Size' => 24]])|noescape}
+            {capture $c_1}
+              {=ui_text(ui_get($v_logo, ['name']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold', 'Class' => ui_s((ui_t(ui_eq($v_logoStyle, 'icon')) ? 'sr-only' : ''))], 'children' => $c_1])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Attrs' => ui_attrs(['data-testid', 'logo'])], 'children' => $c_2])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '6', 'Justify' => 'center', 'Class' => 'flex-wrap text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'logos'])], 'children' => $c_3])|noescape}
+      {capture $c_7}
+        {foreach ui_l($v_stats) as $v_stat}
+          {capture $c_6}
+            {capture $c_4}
+              {=ui_text(ui_get($v_stat, ['value']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => '4xl', 'Weight' => 'bold'], 'children' => $c_4])|noescape}
+            {capture $c_5}
+              {=ui_text(ui_get($v_stat, ['label']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => 'center', 'Attrs' => ui_attrs(['data-testid', 'stat'])], 'children' => $c_6])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'beside')) ? '2' : '1-4')), 'Class' => 'gap-6 text-center', 'Attrs' => ui_attrs(['data-testid', 'stats'])], 'children' => $c_7])|noescape}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'beside')) ? '1-2' : '1')), 'Class' => 'items-center gap-8'], 'children' => $c_8])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'align' => 'center', 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/quote-card.latte b/packages/latte/ui/blocks/quote-card.latte
new file mode 100644
index 0000000..938ccd5
--- /dev/null
+++ b/packages/latte/ui/blocks/quote-card.latte
@@ -0,0 +1,66 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-card.json
+    One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the stars and a company glyph as `item` says.
+    Props (p): q, labels, item, layout. *}
+{var $v_q = ($p['q'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_item = ($p['item'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{capture $c_12}
+  {if ui_t(ui_eq(ui_get($v_item, ['kind']), 'social'))}
+    {capture $c_4}
+      {if ui_t(!(ui_eq(ui_get($v_item, ['avatar']), 'none')))}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_q, ['author']), 'ratio' => '1/1', 'className' => ui_cnv(['size-12 shrink-0 rounded-full'])]])|noescape}
+      {/if}
+      {capture $c_3}
+        {capture $c_1}
+          {=ui_text(ui_get($v_q, ['author']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text(ui_tpl(ui_get($v_labels, ['handleLine']), [ui_get($v_q, ['handle']), ui_get($v_q, ['time'])]))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_3])|noescape}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'message-circle', 'Size' => 16, 'Class' => 'ml-auto text-muted-foreground']])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_4])|noescape}
+    {capture $c_5}
+      {=ui_text(ui_get($v_q, ['quote']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base'], 'children' => $c_5])|noescape}
+  {else}
+    {if ui_t(!(ui_eq(ui_get($v_item, ['rating']), 'hide')))}
+      {=ui_include('blocks/rating.latte', ['p' => ['value' => ui_get($v_q, ['rating']), 'label' => ui_tpl(ui_get($v_labels, ['rating']), [ui_get($v_q, ['rating'])])]])|noescape}
+    {/if}
+    {if ui_t(ui_eq(ui_get($v_item, ['mark']), 'icon'))}
+      {capture $c_6}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_q, ['mark'])), 'Size' => 24]])|noescape}
+      {/capture}
+      {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'mark'])], 'children' => $c_6])|noescape}
+    {/if}
+    {capture $c_7}
+      {=ui_text(ui_get($v_q, ['quote']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => ui_s((ui_t(ui_eq($v_layout, 'single')) ? 'xl' : 'base'))], 'children' => $c_7])|noescape}
+    {capture $c_11}
+      {if ui_t(!(ui_eq(ui_get($v_item, ['avatar']), 'none')))}
+        {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_q, ['author']), 'ratio' => '1/1', 'className' => ui_cnv(['size-12 shrink-0 rounded-full'])]])|noescape}
+      {/if}
+      {capture $c_10}
+        {capture $c_8}
+          {=ui_text(ui_get($v_q, ['author']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_8])|noescape}
+        {capture $c_9}
+          {=ui_text(ui_tpl(ui_get($v_labels, ['byLine']), [ui_get($v_q, ['role']), ui_get($v_q, ['company'])]))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_9])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_10])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_11])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/figure-block.latte', ['p' => ['className' => ui_cnv([ui_cnv(['m-0 flex flex-col gap-4', (ui_t(ui_eq(ui_get($v_item, ['kind']), 'plain')) ? '' : 'rounded p-6 inset-ring inset-ring-border bg-card'), (ui_t(ui_eq($v_layout, 'masonry')) ? 'mb-4 break-inside-avoid' : (ui_t(ui_eq($v_layout, 'strip')) ? 'w-80 shrink-0 snap-start' : 'h-full'))])]), 'testid' => 'item'], 'children' => $c_12])|noescape}
diff --git a/packages/latte/ui/blocks/quote-figures.latte b/packages/latte/ui/blocks/quote-figures.latte
new file mode 100644
index 0000000..55267fd
--- /dev/null
+++ b/packages/latte/ui/blocks/quote-figures.latte
@@ -0,0 +1,24 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-figures.json
+    Three figures in a row above the quotes of QuoteSplit.
+    Props (p): extras. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{capture $c_4}
+  {foreach ui_l(ui_get($v_extras, ['stats'])) as $v_s}
+    {var $v_i = $iterator->counter0}
+    {if ui_t(ui_lt($v_i, 3))}
+      {capture $c_3}
+        {capture $c_1}
+          {=ui_text(ui_get($v_s, ['value']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => '3xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text(ui_get($v_s, ['label']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Attrs' => ui_attrs(['data-testid', 'quote-stat'])], 'children' => $c_3])|noescape}
+    {/if}
+  {/foreach}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-3 gap-4 border-b border-border pb-8', 'Attrs' => ui_attrs(['data-testid', 'quote-figures'])], 'children' => $c_4])|noescape}
diff --git a/packages/latte/ui/blocks/quote-logo-tiles.latte b/packages/latte/ui/blocks/quote-logo-tiles.latte
new file mode 100644
index 0000000..11587a4
--- /dev/null
+++ b/packages/latte/ui/blocks/quote-logo-tiles.latte
@@ -0,0 +1,21 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-logo-tiles.json
+    Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit.
+    Props (p): extras. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{capture $c_3}
+  {foreach ui_l(ui_get($v_extras, ['logos'])) as $v_l}
+    {var $v_i = $iterator->counter0}
+    {if ui_t(ui_lt($v_i, 4))}
+      {capture $c_2}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_l, ['icon'])), 'Size' => 20]])|noescape}
+        {capture $c_1}
+          {=ui_text(ui_get($v_l, ['name']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Justify' => 'center', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4 text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'quote-logo'])], 'children' => $c_2])|noescape}
+    {/if}
+  {/foreach}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-4', 'Attrs' => ui_attrs(['data-testid', 'quote-logos'])], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/quote-proof.latte b/packages/latte/ui/blocks/quote-proof.latte
new file mode 100644
index 0000000..fd45eef
--- /dev/null
+++ b/packages/latte/ui/blocks/quote-proof.latte
@@ -0,0 +1,18 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-proof.json
+    A customer quote and who said it, as a figure.
+    Props (p): quote, quoteBy, center. *}
+{var $v_quote = ($p['quote'] ?? null)}
+{var $v_quoteBy = ($p['quoteBy'] ?? null)}
+{var $v_center = ($p['center'] ?? false)}
+{capture $c_3}
+  {capture $c_1}
+    {=ui_text($v_quote)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xl'], 'children' => $c_1])|noescape}
+  {capture $c_2}
+    {=ui_text($v_quoteBy)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'figure', 'Class' => ui_s(ui_cnv(['flex flex-col gap-2', (ui_t($v_center) ? 'items-center text-center' : '')])), 'Attrs' => ui_attrs(['data-testid', 'proof'])], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/quote-rating-panel.latte b/packages/latte/ui/blocks/quote-rating-panel.latte
new file mode 100644
index 0000000..f9a2dfd
--- /dev/null
+++ b/packages/latte/ui/blocks/quote-rating-panel.latte
@@ -0,0 +1,37 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-rating-panel.json
+    The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures.
+    Props (p): extras, labels. *}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_7}
+  {capture $c_1}
+    {=ui_text(ui_get($v_extras, ['score']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => '5xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+  {=ui_include('blocks/rating.latte', ['p' => ['value' => ui_get($v_extras, ['rating']), 'label' => ui_tpl(ui_get($v_labels, ['rating']), [ui_get($v_extras, ['rating'])]), 'size' => 20]])|noescape}
+  {capture $c_2}
+    {=ui_text(ui_get($v_extras, ['reviews']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+  {capture $c_6}
+    {foreach ui_l(ui_get($v_extras, ['stats'])) as $v_s}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_lt($v_i, 2))}
+        {capture $c_5}
+          {capture $c_3}
+            {=ui_text(ui_get($v_s, ['value']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => '2xl', 'Weight' => 'semibold'], 'children' => $c_3])|noescape}
+          {capture $c_4}
+            {=ui_text(ui_get($v_s, ['label']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Align' => 'center', 'Attrs' => ui_attrs(['data-testid', 'quote-stat'])], 'children' => $c_5])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid w-full grid-cols-2 gap-4 border-t border-border pt-6'], 'children' => $c_6])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'center', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-8 text-center', 'Attrs' => ui_attrs(['data-testid', 'quote-rating'])], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/quote-slot.latte b/packages/latte/ui/blocks/quote-slot.latte
new file mode 100644
index 0000000..e6934eb
--- /dev/null
+++ b/packages/latte/ui/blocks/quote-slot.latte
@@ -0,0 +1,12 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-slot.json
+    One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in a box that can span grid rows.
+    Props (p): q, labels, kind, layout, className. *}
+{var $v_q = ($p['q'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_kind = ($p['kind'] ?? 'card')}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{capture $c_1}
+  {=ui_include('blocks/quote-card.latte', ['p' => ['q' => $v_q, 'labels' => $v_labels, 'item' => ['kind' => $v_kind, 'avatar' => 'image', 'rating' => 'show', 'mark' => 'none'], 'layout' => $v_layout]])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(($p['className'] ?? '')), 'Attrs' => ui_attrs(['data-testid', 'quote'])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/quote-split.latte b/packages/latte/ui/blocks/quote-split.latte
new file mode 100644
index 0000000..64b63f1
--- /dev/null
+++ b/packages/latte/ui/blocks/quote-split.latte
@@ -0,0 +1,73 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-split.json
+    Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture, logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured quote beside a stack), mediaSide, tone.
+    Props (p): id, title, lead, badge, quotes, labels, extras, actions, layout, mediaSide, tone, empty, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_quotes = ($p['quotes'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_extras = ($p['extras'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'media')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_eq(ui_len($v_quotes), 0))}
+  {capture $c_1}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'quote', 'title' => $v_empty]])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_1])|noescape}
+{elseif ui_t(ui_or([ui_eq($v_layout, 'compact'), ui_eq($v_layout, 'bento')]))}
+  {capture $c_3}
+    {if ui_t(ui_eq($v_layout, 'bento'))}
+      {=ui_include('blocks/quote-figures.latte', ['p' => ['extras' => $v_extras]])|noescape}
+    {/if}
+    {capture $c_2}
+      {foreach ui_l($v_quotes) as $v_q}
+        {var $v_i = $iterator->counter0}
+        {=ui_include('blocks/quote-slot.latte', ['p' => ['q' => $v_q, 'labels' => $v_labels, 'layout' => (ui_t(ui_and([ui_eq($v_layout, 'bento'), ui_eq($v_i, 0)])) ? 'single' : 'grid'), 'className' => ui_cnv([(ui_t(ui_and([ui_eq($v_layout, 'bento'), ui_eq($v_i, 0)])) ? 'lg:row-span-3' : '')])]])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'bento')) ? 'grid grid-cols-1 gap-4 lg:grid-cols-2' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'))], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_3])|noescape}
+{else}
+  {capture $f_5}
+    {if ui_t(ui_eq($v_layout, 'rating'))}
+      {=ui_include('blocks/quote-rating-panel.latte', ['p' => ['extras' => $v_extras, 'labels' => $v_labels]])|noescape}
+    {else}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+    {/if}
+  {/capture}
+  {capture $c_6}
+    {if ui_t(ui_or([ui_eq($v_layout, 'media'), ui_eq($v_layout, 'logos'), ui_eq($v_layout, 'rating')]))}
+      {foreach ui_l($v_quotes) as $v_q}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_lt($v_i, 1))}
+          {=ui_include('blocks/quote-slot.latte', ['p' => ['q' => $v_q, 'labels' => $v_labels, 'kind' => (ui_t(ui_eq($v_layout, 'media')) ? 'card' : 'plain'), 'layout' => 'single', 'className' => ui_cnv([''])]])|noescape}
+        {/if}
+      {/foreach}
+    {/if}
+    {if ui_t(ui_eq($v_layout, 'logos'))}
+      {=ui_include('blocks/quote-logo-tiles.latte', ['p' => ['extras' => $v_extras]])|noescape}
+    {/if}
+    {if ui_t(ui_eq($v_layout, 'stack'))}
+      {capture $c_4}
+        {foreach ui_l($v_quotes) as $v_q}
+          {var $v_i = $iterator->counter0}
+          {if ui_t(ui_lt($v_i, 3))}
+            {=ui_include('blocks/quote-slot.latte', ['p' => ['q' => $v_q, 'labels' => $v_labels, 'layout' => 'stack', 'className' => ui_cnv([''])]])|noescape}
+          {/if}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_4])|noescape}
+    {/if}
+    {if ui_t(ui_or([ui_eq($v_layout, 'media'), ui_eq($v_layout, 'logos'), ui_eq($v_layout, 'rating')]))}
+      {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref'])]])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_5], 'children' => $c_6])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/range-field.latte b/packages/latte/ui/blocks/range-field.latte
new file mode 100644
index 0000000..927ee03
--- /dev/null
+++ b/packages/latte/ui/blocks/range-field.latte
@@ -0,0 +1,27 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/range-field.json
+    A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.
+    Props (p): type, from, to, fromLabel, toLabel, min, max, className. *}
+{var $v_type = ($p['type'] ?? null)}
+{var $v_from = ($p['from'] ?? null)}
+{var $v_to = ($p['to'] ?? null)}
+{var $v_fromLabel = ($p['fromLabel'] ?? null)}
+{var $v_toLabel = ($p['toLabel'] ?? null)}
+{var $v_min = ($p['min'] ?? null)}
+{var $v_max = ($p['max'] ?? null)}
+{capture $c_3}
+  {if ui_t(ui_and([ui_eq($v_type, 'number'), ui_has($v_min), ui_has($v_max), ui_lt($v_min, $v_max)]))}
+    {=ui_include('ui/range/range.latte', ['p' => ['Min' => ui_i($v_min), 'Max' => ui_i($v_max), 'AriaLabel' => ui_s($v_fromLabel), 'Value' => ui_s((ui_t(ui_eq($v_from, '')) ? ui_str($v_min) : $v_from)), 'Attrs' => ui_attrs(['data-testid', 'range-from'])]])|noescape}
+    {=ui_include('ui/range/range.latte', ['p' => ['Min' => ui_i($v_min), 'Max' => ui_i($v_max), 'AriaLabel' => ui_s($v_toLabel), 'Value' => ui_s((ui_t(ui_eq($v_to, '')) ? ui_str($v_max) : $v_to)), 'Attrs' => ui_attrs(['data-testid', 'range-to'])]])|noescape}
+  {/if}
+  {capture $c_2}
+    {=ui_include('ui/input/input.latte', ['p' => ['Type' => ui_s($v_type), 'Size' => 'sm', 'AriaLabel' => ui_s($v_fromLabel), 'Value' => ui_s($v_from), 'Min' => ui_s(ui_str($v_min)), 'Max' => ui_s(ui_str($v_max))]])|noescape}
+    {capture $c_1}
+      {=ui_text('–')}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-muted-foreground'], 'children' => $c_1])|noescape}
+    {=ui_include('ui/input/input.latte', ['p' => ['Type' => ui_s($v_type), 'Size' => 'sm', 'AriaLabel' => ui_s($v_toLabel), 'Value' => ui_s($v_to), 'Min' => ui_s(ui_str($v_min)), 'Max' => ui_s(ui_str($v_max))]])|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex items-center gap-2'], 'children' => $c_2])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-2', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'range-field'])], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/rating.latte b/packages/latte/ui/blocks/rating.latte
new file mode 100644
index 0000000..f7a4045
--- /dev/null
+++ b/packages/latte/ui/blocks/rating.latte
@@ -0,0 +1,15 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/rating.json
+    One to five stars (a review's grade, the average of a product). The value is read as the label; the stars themselves are decoration.
+    Props (p): value, label, max, size, className. *}
+{var $v_value = ($p['value'] ?? null)}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_max = ($p['max'] ?? 5)}
+{var $v_size = ($p['size'] ?? 16)}
+{var $v_full = ui_round(ui_min([$v_max, ui_max([0, $v_value])]))}
+{capture $c_1}
+  {foreach ui_l(ui_range($v_max)) as $v_i}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'star', 'Size' => ui_i($v_size), 'Class' => ui_s((ui_t(ui_lt($v_i, $v_full)) ? 'fill-foreground text-foreground' : 'text-border'))]])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['inline-flex items-center gap-0', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'img', 'aria-label', $v_label, 'data-slot', 'rating', 'data-value', $v_full])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/recipes/avatar.variants.json b/packages/latte/ui/blocks/recipes/avatar.variants.json
new file mode 100644
index 0000000..54d4895
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/avatar.variants.json
@@ -0,0 +1,22 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.avatar",
+  "base": "relative inline-flex shrink-0 overflow-hidden bg-muted rounded-full",
+  "byKey": {
+    "size": {
+      "xs": "size-6",
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12",
+      "xl": "size-16"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/packages/latte/ui/blocks/recipes/badge-square.variants.json b/packages/latte/ui/blocks/recipes/badge-square.variants.json
new file mode 100644
index 0000000..b8b52c5
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/badge-square.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.badge-square",
+  "base": "inline-flex shrink-0 items-center justify-center bg-card text-xs font-medium whitespace-nowrap text-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-4 min-w-4 px-1",
+      "default": "h-5 px-2"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/packages/latte/ui/blocks/recipes/file-tree-item.variants.json b/packages/latte/ui/blocks/recipes/file-tree-item.variants.json
new file mode 100644
index 0000000..489ce86
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/file-tree-item.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.file-tree-item",
+  "base": "flex h-6 w-full items-center gap-4 text-xs font-bold text-muted-foreground data-[state=selected]:bg-muted",
+  "byKey": {
+    "kind": {
+      "folder": "",
+      "file": "px-8"
+    }
+  },
+  "defaults": {
+    "kind": "file"
+  },
+  "keys": [
+    "kind"
+  ]
+}
diff --git a/packages/latte/ui/blocks/recipes/icon-tab.variants.json b/packages/latte/ui/blocks/recipes/icon-tab.variants.json
new file mode 100644
index 0000000..f4b0990
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/icon-tab.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.icon-tab",
+  "base": "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground inset-ring inset-ring-transparent [&>svg]:size-4 rounded",
+  "byKey": {
+    "state": {
+      "default": "",
+      "active": "bg-card text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "state": "default"
+  },
+  "keys": [
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/latte/ui/blocks/recipes/logo-sidebar.variants.json b/packages/latte/ui/blocks/recipes/logo-sidebar.variants.json
new file mode 100644
index 0000000..8759a84
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/logo-sidebar.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.logo-sidebar",
+  "base": "flex h-8 items-center justify-between",
+  "byKey": {
+    "variant": {
+      "chat": "px-2",
+      "creator": "pr-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/packages/latte/ui/blocks/recipes/media-frame.variants.json b/packages/latte/ui/blocks/recipes/media-frame.variants.json
new file mode 100644
index 0000000..2d0b526
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/media-frame.variants.json
@@ -0,0 +1,22 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.media-frame",
+  "base": "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "ratio": {
+      "16/9": "aspect-video",
+      "4/3": "aspect-4/3",
+      "1/1": "aspect-square",
+      "3/4": "aspect-3/4",
+      "21/9": "aspect-21/9"
+    }
+  },
+  "defaults": {
+    "ratio": "16/9"
+  },
+  "keys": [
+    "ratio"
+  ],
+  "compound": []
+}
diff --git a/packages/latte/ui/blocks/recipes/nav-item-content.variants.json b/packages/latte/ui/blocks/recipes/nav-item-content.variants.json
new file mode 100644
index 0000000..9d4e03a
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/nav-item-content.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item-content",
+  "base": "flex h-8 min-w-0 flex-1 items-center justify-between px-4 py-2 text-xs font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "px-2",
+      "4": "px-2"
+    },
+    "state": {
+      "default": "",
+      "selected": "bg-background text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/latte/ui/blocks/recipes/nav-item.variants.json b/packages/latte/ui/blocks/recipes/nav-item.variants.json
new file mode 100644
index 0000000..c8eba12
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/nav-item.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item",
+  "base": "flex w-full items-center p-2 rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "pr-2 pl-12",
+      "4": "pr-2 pl-20"
+    },
+    "state": {
+      "default": "",
+      "selected": ""
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/latte/ui/blocks/recipes/section-column.variants.json b/packages/latte/ui/blocks/recipes/section-column.variants.json
new file mode 100644
index 0000000..b5637fc
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/section-column.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-column",
+  "base": "",
+  "defaults": {
+    "measure": "default"
+  },
+  "keys": [
+    "measure"
+  ],
+  "compound": [],
+  "byKey": {
+    "measure": {
+      "default": "",
+      "landing": "",
+      "fill": "",
+      "xs": "mx-auto w-full max-w-xs",
+      "sm": "mx-auto w-full max-w-sm",
+      "md": "mx-auto w-full max-w-md",
+      "lg": "mx-auto w-full max-w-lg",
+      "xl": "mx-auto w-full max-w-xl",
+      "2xl": "mx-auto w-full max-w-2xl",
+      "3xl": "mx-auto w-full max-w-3xl"
+    }
+  }
+}
diff --git a/packages/latte/ui/blocks/recipes/section-frame.variants.json b/packages/latte/ui/blocks/recipes/section-frame.variants.json
new file mode 100644
index 0000000..d141c90
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/section-frame.variants.json
@@ -0,0 +1,34 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-frame",
+  "base": "w-full",
+  "byKey": {
+    "tone": {
+      "default": "",
+      "muted": "bg-muted",
+      "inverse": "bg-foreground text-background [&_.text-muted-foreground]:text-background/70"
+    },
+    "density": {
+      "roomy": "py-16",
+      "default": "py-10",
+      "compact": "py-6",
+      "flush": "py-0"
+    },
+    "align": {
+      "start": "",
+      "center": "text-center"
+    }
+  },
+  "defaults": {
+    "tone": "default",
+    "density": "default",
+    "align": "start"
+  },
+  "keys": [
+    "tone",
+    "density",
+    "align"
+  ],
+  "compound": []
+}
diff --git a/packages/latte/ui/blocks/recipes/section-head.variants.json b/packages/latte/ui/blocks/recipes/section-head.variants.json
new file mode 100644
index 0000000..ff1cc80
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/section-head.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.section-head",
+  "base": "flex items-center justify-between pr-4 pl-4",
+  "byKey": {
+    "size": {
+      "default": "h-8 py-2 text-xs font-semibold",
+      "lg": "h-12 py-2 text-sm font-bold"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ]
+}
diff --git a/packages/latte/ui/blocks/recipes/sidebar-panel.variants.json b/packages/latte/ui/blocks/recipes/sidebar-panel.variants.json
new file mode 100644
index 0000000..5a7bb9c
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/sidebar-panel.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.sidebar-panel",
+  "base": "flex shrink-0 flex-col",
+  "byKey": {
+    "variant": {
+      "chat": "w-68 gap-2 pt-6 pr-4 pb-6 pl-4",
+      "creator": "w-62 justify-between gap-4 p-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/packages/latte/ui/blocks/recipes/switcher-item.variants.json b/packages/latte/ui/blocks/recipes/switcher-item.variants.json
new file mode 100644
index 0000000..58d88d5
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/switcher-item.variants.json
@@ -0,0 +1,48 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher-item",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-6 gap-1 px-3 text-xs",
+      "default": "h-8 gap-2 px-4 text-sm",
+      "lg": "h-10 gap-2 px-5 text-sm"
+    },
+    "state": {
+      "default": "",
+      "active": "bg-background text-foreground inset-ring-border"
+    },
+    "layout": {
+      "text": "",
+      "icon": "[&>svg]:size-4"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "state": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "state",
+    "layout"
+  ],
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "w-6 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "w-8 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "w-10 px-0"
+    }
+  ]
+}
diff --git a/packages/latte/ui/blocks/recipes/switcher.variants.json b/packages/latte/ui/blocks/recipes/switcher.variants.json
new file mode 100644
index 0000000..d0ef662
--- /dev/null
+++ b/packages/latte/ui/blocks/recipes/switcher.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher",
+  "base": "inline-flex max-w-full items-center gap-1 overflow-x-auto bg-muted inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-8 p-1",
+      "default": "h-10 p-1",
+      "lg": "h-12 p-1"
+    },
+    "layout": {
+      "text": "",
+      "icon": "gap-0"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "layout"
+  ],
+  "compound": []
+}
diff --git a/packages/latte/ui/blocks/region.latte b/packages/latte/ui/blocks/region.latte
new file mode 100644
index 0000000..aaddc89
--- /dev/null
+++ b/packages/latte/ui/blocks/region.latte
@@ -0,0 +1,10 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/region.json
+    A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never nested, so a nested landmark is its own component.
+    Props (p): tag, landmarkLabel, className; children: markup. *}
+{var $v_tag = ($p['tag'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => ui_s($v_tag), 'Class' => ui_s(($p['className'] ?? '')), 'Attrs' => ui_attrs(['aria-label', $v_landmarkLabel])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/review-list.latte b/packages/latte/ui/blocks/review-list.latte
new file mode 100644
index 0000000..3380bff
--- /dev/null
+++ b/packages/latte/ui/blocks/review-list.latte
@@ -0,0 +1,54 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/review-list.json
+    Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid), columns, item (card, plain), avatar (none, image), tone, density.
+    Props (p): id, title, reviews, labels, layout, item, avatar, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_reviews = ($p['reviews'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'list')}
+{var $v_item = ($p['item'] ?? 'card')}
+{var $v_avatar = ($p['avatar'] ?? 'none')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_9}
+  {if ui_t(ui_eq(ui_len($v_reviews), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'message-square-quote', 'title' => ui_get($v_labels, ['empty'])]])|noescape}
+  {/if}
+  {capture $c_8}
+    {foreach ui_l($v_reviews) as $v_r}
+      {capture $c_7}
+        {=ui_include('blocks/rating.latte', ['p' => ['value' => ui_get($v_r, ['rating']), 'label' => ui_tpl(ui_get($v_labels, ['ratingLabel']), [ui_get($v_r, ['rating'])])]])|noescape}
+        {capture $c_1}
+          {=ui_text(ui_get($v_r, ['title']))}
+        {/capture}
+        {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text(ui_get($v_r, ['text']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+        {capture $c_6}
+          {if ui_t(ui_eq($v_avatar, 'image'))}
+            {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_r, ['author']), 'ratio' => '1/1', 'className' => ui_cnv(['size-10 shrink-0 rounded-full'])]])|noescape}
+          {/if}
+          {capture $c_5}
+            {capture $c_3}
+              {=ui_text(ui_get($v_r, ['author']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_3])|noescape}
+            {capture $c_4}
+              {=ui_text(ui_get($v_r, ['date']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'mt-auto'], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('blocks/article-block.latte', ['p' => ['className' => ui_cnv([ui_cnv(['flex h-full flex-col gap-4', (ui_t(ui_eq($v_item, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : 'border-b border-border pb-4')])]), 'testid' => 'item'], 'children' => $c_7])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'grid')) ? '1-3' : '1')), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_8])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'measure' => (ui_t(ui_eq($v_layout, 'list')) ? '2xl' : 'default'), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/search-field.latte b/packages/latte/ui/blocks/search-field.latte
new file mode 100644
index 0000000..5a567fc
--- /dev/null
+++ b/packages/latte/ui/blocks/search-field.latte
@@ -0,0 +1,12 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/search-field.json
+    A search input with a magnifier. `value` fires on every keystroke with the new text.
+    Props (p): value, placeholder, label, className. *}
+{var $v_value = ($p['value'] ?? null)}
+{var $v_placeholder = ($p['placeholder'] ?? null)}
+{var $v_label = ($p['label'] ?? null)}
+{capture $c_1}
+  {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'search', 'Size' => 16, 'Class' => 'pointer-events-none absolute top-2 left-3 text-muted-foreground']])|noescape}
+  {=ui_include('ui/input/input.latte', ['p' => ['Size' => 'sm', 'Type' => 'search', 'Placeholder' => ui_s($v_placeholder), 'AriaLabel' => ui_s($v_label), 'Class' => 'pr-3 pl-10', 'Value' => ui_s($v_value)]])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['relative min-w-44 flex-1', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'search'])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/search-palette.latte b/packages/latte/ui/blocks/search-palette.latte
new file mode 100644
index 0000000..0b9d9ed
--- /dev/null
+++ b/packages/latte/ui/blocks/search-palette.latte
@@ -0,0 +1,15 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/search-palette.json
+    A search field with a search glyph and the keys that open it.
+    Props (p): label, shortcut. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_shortcut = ($p['shortcut'] ?? null)}
+{capture $c_2}
+  {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'search', 'Size' => 16, 'Class' => 'pointer-events-none absolute top-2 left-3 text-muted-foreground']])|noescape}
+  {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'search', 'Size' => 'sm', 'Placeholder' => ui_s($v_label), 'AriaLabel' => ui_s($v_label), 'Class' => 'pr-12 pl-10']])|noescape}
+  {capture $c_1}
+    {=ui_text($v_shortcut)}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring inset-ring-border'], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'relative w-full max-w-sm', 'Attrs' => ui_attrs(['data-testid', 'palette'])], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/section-box.latte b/packages/latte/ui/blocks/section-box.latte
new file mode 100644
index 0000000..65a9a2e
--- /dev/null
+++ b/packages/latte/ui/blocks/section-box.latte
@@ -0,0 +1,13 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-box.json
+    The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper).
+    Props (p): boxed; children: markup. *}
+{var $v_boxed = ($p['boxed'] ?? false)}
+{if ui_t($v_boxed)}
+  {capture $c_1}
+    {=($children ?? '')|noescape}
+  {/capture}
+  {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'muted'], 'children' => $c_1])|noescape}
+{else}
+  {=($children ?? '')|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/section-column.latte b/packages/latte/ui/blocks/section-column.latte
new file mode 100644
index 0000000..ed48c88
--- /dev/null
+++ b/packages/latte/ui/blocks/section-column.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-column.json
+    The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure (xs to 3xl) holds the column at that width, centred.
+    Props (p): measure; children: markup. *}
+{var $v_measure = ($p['measure'] ?? 'default')}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch', 'Class' => ui_s(ui_recipe('blocks/recipes/section-column.variants.json', ['measure' => $v_measure]))], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/section-frame.latte b/packages/latte/ui/blocks/section-frame.latte
new file mode 100644
index 0000000..984662b
--- /dev/null
+++ b/packages/latte/ui/blocks/section-frame.latte
@@ -0,0 +1,63 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-frame.json
+    A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts the body in a card. Axes: layout, media side, tone, density, align.
+    Props (p): id, title, lead, heading, action, layout, media, boxed, tone, density, align, measure, landmarkLabel, className, aside (slot); children: markup. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? '')}
+{var $v_lead = ($p['lead'] ?? null)}
+{var $v_heading = ($p['heading'] ?? null)}
+{var $v_action = ($p['action'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'stack')}
+{var $v_media = ($p['media'] ?? null)}
+{var $v_boxed = ($p['boxed'] ?? false)}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_align = ($p['align'] ?? 'start')}
+{var $v_measure = ($p['measure'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_titleId = ui_add($v_id, '-title')}
+{var $v_sectionTone = (ui_t($v_boxed) ? 'default' : $v_tone)}
+{var $v_center = ui_eq($v_align, 'center')}
+{capture $c_9}
+  {capture $c_8}
+    {capture $c_7}
+      {if ui_t(ui_eq($v_layout, 'split'))}
+        {capture $c_4}
+          {if ui_t(ui_and([ui_get($v_media, ['show']), ui_eq(ui_get($v_media, ['side']), 'start')]))}
+            {capture $c_1}
+              {=($p['aside'] ?? '')|noescape}
+            {/capture}
+            {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'w-full', 'Attrs' => ui_attrs(['data-slot', 'media'])], 'children' => $c_1])|noescape}
+          {/if}
+          {capture $c_2}
+            {=ui_include('blocks/section-header.latte', ['p' => ['titleId' => $v_titleId, 'title' => $v_title, 'heading' => $v_heading, 'action' => $v_action, 'lead' => $v_lead, 'center' => $v_center]])|noescape}
+            {=($children ?? '')|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch'], 'children' => $c_2])|noescape}
+          {if ui_t(ui_and([ui_get($v_media, ['show']), !(ui_eq(ui_get($v_media, ['side']), 'start'))]))}
+            {capture $c_3}
+              {=($p['aside'] ?? '')|noescape}
+            {/capture}
+            {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'w-full', 'Attrs' => ui_attrs(['data-slot', 'media'])], 'children' => $c_3])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-2', 'Class' => ui_s(ui_cnv(['gap-8', (ui_t(ui_eq(ui_get($v_media, ['align']), 'start')) ? 'items-start' : 'items-center')]))], 'children' => $c_4])|noescape}
+      {else}
+        {capture $c_6}
+          {=ui_include('blocks/section-header.latte', ['p' => ['titleId' => $v_titleId, 'title' => $v_title, 'heading' => $v_heading, 'action' => $v_action, 'lead' => $v_lead, 'center' => $v_center]])|noescape}
+          {=($children ?? '')|noescape}
+          {if ui_t(ui_get($v_media, ['show']))}
+            {capture $c_5}
+              {=($p['aside'] ?? '')|noescape}
+            {/capture}
+            {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'w-full', 'Attrs' => ui_attrs(['data-slot', 'media'])], 'children' => $c_5])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('blocks/section-column.latte', ['p' => ['measure' => $v_measure], 'children' => $c_6])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('blocks/section-box.latte', ['p' => ['boxed' => $v_boxed], 'children' => $c_7])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_measure, 'landing')) ? ui_cnv(['mx-auto w-full px-4', ui_preset('blocks/presets/defaults.json', ['section', 'landing'])]) : (ui_t(ui_eq($v_measure, 'fill')) ? 'w-full' : 'mx-auto w-full max-w-6xl px-4'))), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_8])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/section-frame.variants.json', ['tone' => $v_sectionTone, 'density' => $v_density, 'align' => $v_align]), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : (ui_t(!(ui_eq($v_title, ''))) ? $v_titleId : null)), 'aria-label', ui_coalesce([$v_landmarkLabel, (ui_t(ui_eq($v_title, '')) ? $v_id : null)]), 'data-testid', 'section', 'data-tone', $v_tone, 'data-density', $v_density])], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/section-head.latte b/packages/latte/ui/blocks/section-head.latte
new file mode 100644
index 0000000..65048ce
--- /dev/null
+++ b/packages/latte/ui/blocks/section-head.latte
@@ -0,0 +1,37 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-head.json
+    A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button (aria-expanded, the toggle event).
+    Props (p): size, expanded, controls, className, right (slot); children: markup. *}
+{var $v_size = ($p['size'] ?? 'default')}
+{var $v_expanded = ($p['expanded'] ?? null)}
+{var $v_controls = ($p['controls'] ?? null)}
+{var $v_cls = ui_cnv([ui_recipe('blocks/recipes/section-head.variants.json', ['size' => $v_size]), 'rounded text-foreground in-data-[nav=collapsed]:hidden', ($p['className'] ?? '')])}
+{if ui_t(ui_has($v_expanded))}
+  {capture $c_3}
+    {capture $c_1}
+      {=($children ?? '')|noescape}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Attrs' => ui_attrs(['data-slot', 'section-head-title'])], 'children' => $c_1])|noescape}
+    {if ui_t(((($p['right'] ?? null) !== null)))}
+      {capture $c_2}
+        {=($p['right'] ?? '')|noescape}
+      {/capture}
+      {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex items-center gap-2', 'Attrs' => ui_attrs(['data-slot', 'section-head-right'])], 'children' => $c_2])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/button-plain/button-plain.latte', ['p' => ['Type' => 'button', 'Class' => ui_s(ui_cnv([$v_cls, 'w-full text-left'])), 'Attrs' => ui_attrs(['aria-expanded', $v_expanded, 'aria-controls', $v_controls, 'data-slot', 'section-head', 'data-expanded', $v_expanded])], 'children' => $c_3])|noescape}
+{else}
+  {capture $c_6}
+    {capture $c_4}
+      {=($children ?? '')|noescape}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Attrs' => ui_attrs(['data-slot', 'section-head-title'])], 'children' => $c_4])|noescape}
+    {if ui_t(((($p['right'] ?? null) !== null)))}
+      {capture $c_5}
+        {=($p['right'] ?? '')|noescape}
+      {/capture}
+      {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex items-center gap-2', 'Attrs' => ui_attrs(['data-slot', 'section-head-right'])], 'children' => $c_5])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s($v_cls), 'Attrs' => ui_attrs(['data-slot', 'section-head'])], 'children' => $c_6])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/section-header.latte b/packages/latte/ui/blocks/section-header.latte
new file mode 100644
index 0000000..494e1de
--- /dev/null
+++ b/packages/latte/ui/blocks/section-header.latte
@@ -0,0 +1,53 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-header.json
+    The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an optional lead. No wrapper: its parts are children of the section stack.
+    Props (p): titleId, title, heading, action, lead, center. *}
+{var $v_titleId = ($p['titleId'] ?? null)}
+{var $v_title = ($p['title'] ?? '')}
+{var $v_heading = ($p['heading'] ?? null)}
+{var $v_action = ($p['action'] ?? null)}
+{var $v_lead = ($p['lead'] ?? null)}
+{var $v_center = ($p['center'] ?? false)}
+{var $v_level = ui_coalesce([ui_get($v_heading, ['level']), 2])}
+{var $v_scale = ui_coalesce([ui_get($v_heading, ['scale']), 'default'])}
+{var $v_hasAction = ui_and([ui_get($v_action, ['label']), ui_get($v_action, ['href'])])}
+{if ui_t(ui_get($v_heading, ['badge']))}
+  {capture $c_1}
+    {=ui_text(ui_get($v_heading, ['badge']))}
+  {/capture}
+  {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'outline', 'Size' => 'lg', 'Class' => ui_s((ui_t($v_center) ? 'mx-auto w-fit' : 'w-fit')), 'Attrs' => ui_attrs(['data-testid', 'section-badge'])], 'children' => $c_1])|noescape}
+{/if}
+{if ui_t(ui_and([!(ui_eq($v_title, '')), $v_hasAction]))}
+  {capture $c_4}
+    {capture $c_2}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i($v_level), 'Size' => ui_s((ui_t(ui_eq($v_level, 1)) ? '5xl' : 'xl')), 'Weight' => 'semibold', 'Class' => ui_s((ui_t(ui_eq($v_scale, 'display')) ? 'text-6xl tracking-tight md:text-8xl' : (ui_t(ui_eq($v_level, 1)) ? 'leading-tight' : 'leading-7'))), 'Attrs' => ui_attrs(['id', $v_titleId])], 'children' => $c_2])|noescape}
+    {capture $c_3}
+      {=ui_text(ui_get($v_action, ['label']))}
+    {/capture}
+    {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_get($v_action, ['href'])), 'Variant' => 'default', 'Class' => ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'tiny']), 'shrink-0 font-medium leading-5'])), 'Attrs' => ui_attrs(['data-testid', 'section-action'])], 'children' => $c_3])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'w-full flex-wrap'], 'children' => $c_4])|noescape}
+{/if}
+{if ui_t(ui_and([!(ui_eq($v_title, '')), !(ui_t($v_hasAction))]))}
+  {capture $c_5}
+    {=ui_text($v_title)}
+  {/capture}
+  {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i($v_level), 'Size' => ui_s((ui_t(ui_eq($v_level, 1)) ? '5xl' : 'xl')), 'Weight' => 'semibold', 'Class' => ui_s((ui_t(ui_eq($v_scale, 'display')) ? 'text-6xl tracking-tight md:text-8xl' : (ui_t(ui_eq($v_level, 1)) ? 'leading-tight' : 'leading-7'))), 'Attrs' => ui_attrs(['id', $v_titleId])], 'children' => $c_5])|noescape}
+{/if}
+{if ui_t(ui_and([ui_eq($v_title, ''), $v_hasAction]))}
+  {capture $c_7}
+    {capture $c_6}
+      {=ui_text(ui_get($v_action, ['label']))}
+    {/capture}
+    {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_get($v_action, ['href'])), 'Variant' => 'default', 'Class' => ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'tiny']), 'shrink-0 font-medium leading-5'])), 'Attrs' => ui_attrs(['data-testid', 'section-action'])], 'children' => $c_6])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'end', 'Class' => 'w-full'], 'children' => $c_7])|noescape}
+{/if}
+{if ui_t($v_lead)}
+  {capture $c_8}
+    {=ui_text($v_lead)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Class' => ui_s(ui_cnv(['max-w-2xl text-muted-foreground', (ui_t($v_center) ? 'mx-auto' : '')]))], 'children' => $c_8])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/shell-content.latte b/packages/latte/ui/blocks/shell-content.latte
new file mode 100644
index 0000000..da80efd
--- /dev/null
+++ b/packages/latte/ui/blocks/shell-content.latte
@@ -0,0 +1,89 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-content.json
+    The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one), list (a toolbar over a card of rows). The cards are hidden from assistive technology.
+    Props (p): title, titleId, level, content. *}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_titleId = ($p['titleId'] ?? null)}
+{var $v_level = ($p['level'] ?? 2)}
+{var $v_content = ($p['content'] ?? 'grid')}
+{capture $c_16}
+  {capture $c_2}
+    {capture $c_1}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i($v_level), 'Size' => '2xl', 'Weight' => 'semibold', 'Attrs' => ui_attrs(['id', $v_titleId])], 'children' => $c_1])|noescape}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'h-10 w-32 rounded bg-muted', 'Attrs' => ui_attrs(['aria-hidden', 'true'])]])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between'], 'children' => $c_2])|noescape}
+  {capture $c_15}
+    {if ui_t(ui_eq($v_content, 'grid'))}
+      {capture $c_7}
+        {capture $c_3}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))]])|noescape}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs' => ui_attrs(['data-testid', 'panel'])], 'children' => $c_3])|noescape}
+        {capture $c_4}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))]])|noescape}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs' => ui_attrs(['data-testid', 'panel'])], 'children' => $c_4])|noescape}
+        {capture $c_5}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))]])|noescape}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs' => ui_attrs(['data-testid', 'panel'])], 'children' => $c_5])|noescape}
+        {capture $c_6}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))]])|noescape}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs' => ui_attrs(['data-testid', 'panel'])], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-4 lg:grid-cols-4'], 'children' => $c_7])|noescape}
+      {capture $c_8}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))]])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))]])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'min-h-64 flex-1'])), 'Attrs' => ui_attrs(['data-testid', 'panel'])], 'children' => $c_8])|noescape}
+    {/if}
+    {if ui_t(ui_eq($v_content, 'split'))}
+      {capture $c_11}
+        {capture $c_9}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))]])|noescape}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-64 lg:col-span-2'])), 'Attrs' => ui_attrs(['data-testid', 'panel'])], 'children' => $c_9])|noescape}
+        {capture $c_10}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))]])|noescape}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-64'])), 'Attrs' => ui_attrs(['data-testid', 'panel'])], 'children' => $c_10])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 gap-4 lg:grid-cols-3'], 'children' => $c_11])|noescape}
+      {capture $c_12}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))]])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))]])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'min-h-40 flex-1'])), 'Attrs' => ui_attrs(['data-testid', 'panel'])], 'children' => $c_12])|noescape}
+    {/if}
+    {if ui_t(ui_eq($v_content, 'list'))}
+      {capture $c_13}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-10 w-64']))]])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-10 w-24']))]])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'ml-auto h-10 w-32']))]])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_13])|noescape}
+      {capture $c_14}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-8']))]])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-8']))]])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-8']))]])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-8']))]])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-8']))]])|noescape}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['rounded bg-muted', 'h-8']))]])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'flex-1'])), 'Attrs' => ui_attrs(['data-testid', 'panel'])], 'children' => $c_14])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex flex-1 flex-col gap-4', 'Attrs' => ui_attrs(['aria-hidden', 'true', 'data-testid', 'panels'])], 'children' => $c_15])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch', 'Class' => 'flex-1 p-6', 'Attrs' => ui_attrs(['data-testid', 'content'])], 'children' => $c_16])|noescape}
diff --git a/packages/latte/ui/blocks/shell-footer.latte b/packages/latte/ui/blocks/shell-footer.latte
new file mode 100644
index 0000000..7f3959f
--- /dev/null
+++ b/packages/latte/ui/blocks/shell-footer.latte
@@ -0,0 +1,31 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-footer.json
+    The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the whole shell (full).
+    Props (p): nav, place, landmarkLabel. *}
+{var $v_nav = ($p['nav'] ?? null)}
+{var $v_place = ($p['place'] ?? 'full')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_6}
+  {capture $c_1}
+    {=ui_text(ui_get($v_nav, ['copyright']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_1])|noescape}
+  {if ui_t(ui_gt(ui_len(ui_get($v_nav, ['footer'])), 0))}
+    {capture $c_5}
+      {capture $c_4}
+        {foreach ui_l(ui_get($v_nav, ['footer'])) as $v_f}
+          {capture $c_3}
+            {capture $c_2}
+              {=ui_text(ui_get($v_f, ['name']))}
+            {/capture}
+            {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_f, ['href']), 'className' => ui_cnv(['text-xs text-muted-foreground']), 'variant' => 'muted', 'size' => 'sm'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_3])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none items-center gap-4 p-0'], 'children' => $c_4])|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get($v_nav, ['footerLabel']), $v_landmarkLabel])) : ui_get($v_nav, ['footerLabel']))], 'children' => $c_5])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'footer', 'Class' => ui_s(ui_cnv(['flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4', (ui_t(ui_eq($v_place, 'full')) ? 'bg-card' : '')])), 'Attrs' => ui_attrs(['data-testid', 'footer', 'data-place', $v_place, 'aria-label', $v_landmarkLabel])], 'children' => $c_6])|noescape}
diff --git a/packages/latte/ui/blocks/shell-sidebar.latte b/packages/latte/ui/blocks/shell-sidebar.latte
new file mode 100644
index 0000000..3638ae4
--- /dev/null
+++ b/packages/latte/ui/blocks/shell-sidebar.latte
@@ -0,0 +1,81 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-sidebar.json
+    The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read), collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a panel of the current section's links). side puts it at the start or the end.
+    Props (p): nav, mode, side, brand, landmarkLabel. *}
+{var $v_nav = ($p['nav'] ?? null)}
+{var $v_mode = ($p['mode'] ?? 'wide')}
+{var $v_side = ($p['side'] ?? 'start')}
+{var $v_brand = ($p['brand'] ?? 'show')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{var $v_named = ui_eq($v_mode, 'wide')}
+{capture $c_17}
+  {capture $c_9}
+    {if ui_t(ui_eq($v_brand, 'show'))}
+      {capture $c_2}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'layers', 'Size' => 24]])|noescape}
+        {capture $c_1}
+          {=ui_text(ui_get($v_nav, ['brand']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'bold', 'Class' => ui_s((ui_t($v_named) ? '' : 'sr-only'))], 'children' => $c_1])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => 'shrink-0', 'Attrs' => ui_attrs(['data-testid', 'brand'])], 'children' => $c_2])|noescape}
+    {/if}
+    {if ui_t(ui_gt(ui_len(ui_get($v_nav, ['links'])), 0))}
+      {capture $c_7}
+        {capture $c_6}
+          {foreach ui_l(ui_get($v_nav, ['links'])) as $v_l}
+            {capture $c_5}
+              {capture $c_4}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_l, ['icon'])), 'Size' => 16]])|noescape}
+                {capture $c_3}
+                  {=ui_text(ui_get($v_l, ['name']))}
+                {/capture}
+                {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s((ui_t($v_named) ? '' : 'sr-only'))], 'children' => $c_3])|noescape}
+              {/capture}
+              {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_l, ['href']), 'className' => ui_cnv([ui_cnv(['flex items-center gap-4 rounded py-2 text-sm', (ui_t($v_named) ? 'px-4' : 'justify-center px-2'), (ui_t(ui_eq(ui_get($v_l, ['id']), ui_get($v_nav, ['current']))) ? 'bg-muted font-medium' : '')])]), 'current' => ui_eq(ui_get($v_l, ['id']), ui_get($v_nav, ['current'])), 'size' => 'sm', 'testid' => 'item'], 'children' => $c_4])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_5])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get($v_nav, ['label']), $v_landmarkLabel])) : ui_get($v_nav, ['label'])), 'className' => ui_cnv(['flex-1'])], 'children' => $c_7])|noescape}
+    {/if}
+    {if ui_t(ui_eq($v_mode, 'collapsed'))}
+      {capture $c_8}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'panel-left', 'Size' => 20]])|noescape}
+      {/capture}
+      {=ui_include('ui/button-plain/button-plain.latte', ['p' => ['Type' => 'button', 'Class' => 'inline-flex size-10 items-center justify-center rounded text-muted-foreground', 'Attrs' => ui_attrs(['aria-label', ui_get($v_nav, ['expand']), 'aria-expanded', (ui_t(ui_eq($v_mode, 'wide')) ? 'true' : 'false'), 'data-testid', 'toggle'])], 'children' => $c_8])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-6 py-4', (ui_t($v_named) ? 'w-64 px-4' : 'w-16 items-center px-2')]))], 'children' => $c_9])|noescape}
+  {if ui_t(ui_and([ui_eq($v_mode, 'twolevel'), ui_gt(ui_len(ui_get($v_nav, ['sub'])), 0)]))}
+    {capture $c_16}
+      {capture $c_10}
+        {=ui_text(ui_get($v_nav, ['subTitle']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold', 'Class' => 'px-4'], 'children' => $c_10])|noescape}
+      {capture $c_15}
+        {capture $c_14}
+          {foreach ui_l(ui_get($v_nav, ['sub'])) as $v_s}
+            {capture $c_13}
+              {capture $c_12}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_s, ['icon'])), 'Size' => 16]])|noescape}
+                {capture $c_11}
+                  {=ui_text(ui_get($v_s, ['name']))}
+                {/capture}
+                {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s((ui_t(true) ? '' : 'sr-only'))], 'children' => $c_11])|noescape}
+              {/capture}
+              {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_s, ['href']), 'className' => ui_cnv([ui_cnv(['flex items-center gap-4 rounded py-2 text-sm', (ui_t(true) ? 'px-4' : 'justify-center px-2'), (ui_t(ui_eq(ui_get($v_s, ['id']), ui_get($v_nav, ['subCurrent']))) ? 'bg-muted font-medium' : '')])]), 'current' => ui_eq(ui_get($v_s, ['id']), ui_get($v_nav, ['subCurrent'])), 'size' => 'sm', 'testid' => 'item'], 'children' => $c_12])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_13])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0'], 'children' => $c_14])|noescape}
+      {/capture}
+      {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get($v_nav, ['subTitle']), $v_landmarkLabel])) : ui_get($v_nav, ['subTitle']))], 'children' => $c_15])|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex w-56 flex-col gap-4 px-4 py-6', (ui_t(ui_eq($v_side, 'end')) ? 'border-r border-border' : 'border-l border-border')])), 'Attrs' => ui_attrs(['data-testid', 'subnav'])], 'children' => $c_16])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'aside', 'Class' => ui_s(ui_cnv(['flex shrink-0 bg-card', (ui_t(ui_eq($v_side, 'end')) ? 'flex-row-reverse border-l border-border' : 'border-r border-border')])), 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, ui_get($v_nav, ['label'])]), 'data-testid', 'sidebar', 'data-mode', $v_mode])], 'children' => $c_17])|noescape}
diff --git a/packages/latte/ui/blocks/shell-topbar.latte b/packages/latte/ui/blocks/shell-topbar.latte
new file mode 100644
index 0000000..41fc197
--- /dev/null
+++ b/packages/latte/ui/blocks/shell-topbar.latte
@@ -0,0 +1,58 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-topbar.json
+    The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar), an optional search field, and the signed-in person.
+    Props (p): nav, brand, links, search, landmarkLabel. *}
+{var $v_nav = ($p['nav'] ?? null)}
+{var $v_brand = ($p['brand'] ?? 'show')}
+{var $v_links = ($p['links'] ?? 'hide')}
+{var $v_search = ($p['search'] ?? 'show')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_10}
+  {if ui_t(ui_eq($v_brand, 'show'))}
+    {capture $c_2}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'layers', 'Size' => 24]])|noescape}
+      {capture $c_1}
+        {=ui_text(ui_get($v_nav, ['brand']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'bold', 'Class' => ui_s((ui_t(true) ? '' : 'sr-only'))], 'children' => $c_1])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => 'shrink-0', 'Attrs' => ui_attrs(['data-testid', 'brand'])], 'children' => $c_2])|noescape}
+  {/if}
+  {if ui_t(ui_and([ui_eq($v_links, 'show'), ui_gt(ui_len(ui_get($v_nav, ['links'])), 0)]))}
+    {capture $c_7}
+      {capture $c_6}
+        {foreach ui_l(ui_get($v_nav, ['links'])) as $v_l}
+          {capture $c_5}
+            {capture $c_4}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_l, ['icon'])), 'Size' => 16]])|noescape}
+              {capture $c_3}
+                {=ui_text(ui_get($v_l, ['name']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s((ui_t(true) ? '' : 'sr-only'))], 'children' => $c_3])|noescape}
+            {/capture}
+            {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_l, ['href']), 'className' => ui_cnv([ui_cnv(['flex items-center gap-4 rounded py-2 text-sm', (ui_t(true) ? 'px-4' : 'justify-center px-2'), (ui_t(ui_eq(ui_get($v_l, ['id']), ui_get($v_nav, ['current']))) ? 'bg-muted font-medium' : '')])]), 'current' => ui_eq(ui_get($v_l, ['id']), ui_get($v_nav, ['current'])), 'size' => 'sm', 'testid' => 'item'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_5])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none items-center gap-2 p-0'], 'children' => $c_6])|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get($v_nav, ['label']), $v_landmarkLabel])) : ui_get($v_nav, ['label'])), 'className' => ui_cnv(['hidden lg:block'])], 'children' => $c_7])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_search, 'show'))}
+    {if ui_t(ui_eq($v_links, 'show'))}
+      {capture $c_8}
+        {=ui_include('blocks/search-palette.latte', ['p' => ['label' => ui_get($v_nav, ['search']), 'shortcut' => ui_get($v_nav, ['shortcut'])]])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'ml-auto hidden w-64 shrink-0 xl:block'], 'children' => $c_8])|noescape}
+    {else}
+      {=ui_include('blocks/search-palette.latte', ['p' => ['label' => ui_get($v_nav, ['search']), 'shortcut' => ui_get($v_nav, ['shortcut'])]])|noescape}
+    {/if}
+  {/if}
+  {capture $c_9}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'bell', 'Size' => 20, 'Class' => 'text-muted-foreground']])|noescape}
+    {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_nav, ['userName']), 'ratio' => '1/1', 'className' => ui_cnv(['size-8 shrink-0 rounded-full'])]])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => ui_s((ui_t(ui_and([ui_eq($v_links, 'show'), ui_eq($v_search, 'show')])) ? 'shrink-0' : 'ml-auto shrink-0')), 'Attrs' => ui_attrs(['data-testid', 'user'])], 'children' => $c_9])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'header', 'Class' => 'flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6', 'Attrs' => ui_attrs(['data-testid', 'topbar', 'aria-label', $v_landmarkLabel])], 'children' => $c_10])|noescape}
diff --git a/packages/latte/ui/blocks/shopping-cart.latte b/packages/latte/ui/blocks/shopping-cart.latte
new file mode 100644
index 0000000..0c05ed1
--- /dev/null
+++ b/packages/latte/ui/blocks/shopping-cart.latte
@@ -0,0 +1,75 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shopping-cart.json
+    The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.
+    Props (p): id, title, lines, rows, promos, labels, totals, actions, layout, promo, progress, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lines = ($p['lines'] ?? null)}
+{var $v_rows = ($p['rows'] ?? null)}
+{var $v_promos = ($p['promos'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_totals = ($p['totals'] ?? null)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'split')}
+{var $v_promo = ($p['promo'] ?? 'show')}
+{var $v_progress = ($p['progress'] ?? 'show')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_14}
+  {capture $c_13}
+    {capture $c_11}
+      {if ui_t(ui_eq(ui_len($v_lines), 0))}
+        {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'shopping-cart', 'title' => ui_get($v_actions, ['empty'])]])|noescape}
+      {/if}
+      {foreach ui_l($v_lines) as $v_line}
+        {capture $c_7}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_line, ['name']), 'ratio' => '1/1', 'className' => ui_cnv(['size-20 shrink-0'])]])|noescape}
+          {capture $c_4}
+            {capture $c_1}
+              {=ui_text(ui_get($v_line, ['name']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_get($v_line, ['variant']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+            {capture $c_3}
+              {=ui_text(ui_money(ui_get($v_line, ['price']), ui_get($v_line, ['currency'])))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm'], 'children' => $c_3])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'min-w-40 flex-1'], 'children' => $c_4])|noescape}
+          {=ui_include('blocks/number-field.latte', ['p' => ['value' => ui_str(ui_get($v_line, ['qty'])), 'name' => ui_tpl('{0}-qty-{1}', [$v_id, ui_get($v_line, ['id'])]), 'min' => '1', 'label' => ui_get($v_labels, ['qty']), 'decrease' => ui_get($v_labels, ['decrease']), 'increase' => ui_get($v_labels, ['increase'])]])|noescape}
+          {capture $c_5}
+            {=ui_text(ui_money(ui_mul(ui_get($v_line, ['price']), ui_get($v_line, ['qty'])), ui_get($v_line, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'bold', 'Class' => 'w-24 text-right'], 'children' => $c_5])|noescape}
+          {capture $c_6}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'trash', 'Size' => 16]])|noescape}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Layout' => 'icon', 'AriaLabel' => ui_s(ui_get($v_labels, ['remove'])), 'Attrs' => ui_attrs(['data-testid', 'remove'])], 'children' => $c_6])|noescape}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'rounded bg-card inset-ring inset-ring-border flex-wrap p-4', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_7])|noescape}
+      {/foreach}
+      {capture $c_10}
+        {capture $c_8}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'arrow-left', 'Size' => 16]])|noescape}
+          {=ui_text(ui_get($v_actions, ['back']))}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default'], 'children' => $c_8])|noescape}
+        {capture $c_9}
+          {=ui_text(ui_get($v_actions, ['clear']))}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'default'], 'children' => $c_9])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Justify' => 'between', 'Class' => 'flex-wrap'], 'children' => $c_10])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? 'lg:col-span-2' : '')), 'Attrs' => ui_attrs(['data-testid', 'lines'])], 'children' => $c_11])|noescape}
+    {capture $c_12}
+      {=ui_include('blocks/cart-summary-card.latte', ['p' => ['field' => ui_tpl('{0}-promo', [$v_id]), 'lines' => $v_lines, 'rows' => $v_rows, 'promos' => $v_promos, 'labels' => $v_totals, 'promo' => $v_promo, 'progress' => $v_progress]])|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? 'lg:sticky lg:top-8' : '')), 'Attrs' => ui_attrs(['data-testid', 'aside'])], 'children' => $c_12])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3' : 'grid grid-cols-1 gap-8'))], 'children' => $c_13])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_14])|noescape}
diff --git a/packages/latte/ui/blocks/sidebar-nav.latte b/packages/latte/ui/blocks/sidebar-nav.latte
new file mode 100644
index 0000000..aa30a48
--- /dev/null
+++ b/packages/latte/ui/blocks/sidebar-nav.latte
@@ -0,0 +1,63 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/sidebar-nav.json
+    A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full: icon and name, compact: icons only with the name hidden), user (show, hide), density.
+    Props (p): label, brand, links, current, userName, userEmail, width, user, density, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_brand = ($p['brand'] ?? null)}
+{var $v_links = ($p['links'] ?? null)}
+{var $v_current = ($p['current'] ?? '')}
+{var $v_userName = ($p['userName'] ?? null)}
+{var $v_userEmail = ($p['userEmail'] ?? null)}
+{var $v_width = ($p['width'] ?? 'full')}
+{var $v_user = ($p['user'] ?? 'show')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_12}
+  {capture $c_2}
+    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'layers', 'Size' => 24]])|noescape}
+    {capture $c_1}
+      {=ui_text($v_brand)}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'bold', 'Class' => ui_s((ui_t(ui_eq($v_width, 'compact')) ? 'sr-only' : ''))], 'children' => $c_1])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_2])|noescape}
+  {if ui_t(ui_gt(ui_len($v_links), 0))}
+    {capture $c_7}
+      {capture $c_6}
+        {foreach ui_l($v_links) as $v_l}
+          {capture $c_5}
+            {capture $c_4}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_l, ['icon'])), 'Size' => 16]])|noescape}
+              {capture $c_3}
+                {=ui_text(ui_get($v_l, ['name']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_width, 'compact')) ? 'sr-only' : ''))], 'children' => $c_3])|noescape}
+            {/capture}
+            {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_l, ['href']), 'className' => ui_cnv([ui_cnv(['flex items-center gap-4 rounded px-4 text-sm', 'py-2', (ui_t(ui_eq(ui_get($v_l, ['id']), $v_current)) ? 'bg-muted font-semibold' : '')])]), 'current' => ui_eq(ui_get($v_l, ['id']), $v_current), 'testid' => 'item'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => [], 'children' => $c_5])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/list/list.latte', ['p' => ['Class' => ui_s(ui_cnv(['m-0 flex list-none flex-col p-0', (ui_t(ui_eq($v_density, 'compact')) ? 'gap-0' : 'gap-2')])), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_6])|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [$v_label, $v_landmarkLabel])) : $v_label), 'className' => ui_cnv(['flex-1'])], 'children' => $c_7])|noescape}
+  {/if}
+  {if ui_t(ui_eq($v_user, 'show'))}
+    {capture $c_11}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_userName, 'ratio' => '1/1', 'className' => ui_cnv(['size-10 shrink-0 rounded-full'])]])|noescape}
+      {capture $c_10}
+        {capture $c_8}
+          {=ui_text($v_userName)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_8])|noescape}
+        {capture $c_9}
+          {=ui_text($v_userEmail)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_9])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => ui_s((ui_t(ui_eq($v_width, 'compact')) ? 'sr-only' : 'min-w-0'))], 'children' => $c_10])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'border-t border-border pt-4', 'Attrs' => ui_attrs(['data-testid', 'user'])], 'children' => $c_11])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'aside', 'Class' => ui_s(ui_cnv(['flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border', (ui_t(ui_eq($v_width, 'compact')) ? 'w-20 items-center' : 'w-64')])), 'Attrs' => ui_attrs(['aria-label', ui_coalesce([$v_landmarkLabel, $v_brand]), 'data-testid', 'sidebar', 'data-width', $v_width])], 'children' => $c_12])|noescape}
diff --git a/packages/latte/ui/blocks/sidebar-panel.latte b/packages/latte/ui/blocks/sidebar-panel.latte
new file mode 100644
index 0000000..791e0fb
--- /dev/null
+++ b/packages/latte/ui/blocks/sidebar-panel.latte
@@ -0,0 +1,10 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/sidebar-panel.json
+    The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer.
+    Props (p): variant, landmarkLabel, className; children: markup. *}
+{var $v_variant = ($p['variant'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'aside', 'Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/sidebar-panel.variants.json', ['variant' => $v_variant]), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'sidebar-panel', 'data-variant', ui_coalesce([$v_variant, 'chat']), 'aria-label', $v_landmarkLabel])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/signup-wizard.latte b/packages/latte/ui/blocks/signup-wizard.latte
new file mode 100644
index 0000000..2754a6d
--- /dev/null
+++ b/packages/latte/ui/blocks/signup-wizard.latte
@@ -0,0 +1,80 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/signup-wizard.json
+    A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown, counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values between steps is the page's job.
+    Props (p): id, title, steps, labels, current, level, progress, layout, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_steps = ($p['steps'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_current = ($p['current'] ?? 1)}
+{var $v_level = ($p['level'] ?? 2)}
+{var $v_progress = ($p['progress'] ?? 'bar')}
+{var $v_layout = ($p['layout'] ?? 'card')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_gt(ui_len($v_steps), 0))}
+  {capture $c_14}
+    {capture $c_1}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i($v_level), 'Size' => '2xl', 'Weight' => 'bold', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-title', [$v_id])])], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_text(ui_tpl(ui_get($v_labels, ['stepOf']), [$v_current, ui_len($v_steps)]))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'step-of'])], 'children' => $c_2])|noescape}
+    {if ui_t(ui_eq($v_progress, 'bar'))}
+      {=ui_include('ui/form/progress.latte', ['p' => ['Value' => ui_s(ui_str($v_current)), 'Max' => ui_s(ui_str(ui_len($v_steps))), 'Attrs' => ui_attrs(['aria-label', ui_get($v_labels, ['steps'])])]])|noescape}
+    {/if}
+    {if ui_t(ui_eq($v_progress, 'list'))}
+      {capture $c_4}
+        {foreach ui_l($v_steps) as $v_s}
+          {var $v_i = $iterator->counter0}
+          {capture $c_3}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s((ui_t(ui_lt(ui_add($v_i, 1), $v_current)) ? 'circle-check' : ui_get($v_s, ['icon']))), 'Size' => 16]])|noescape}
+            {=ui_text(ui_get($v_s, ['title']))}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex items-center gap-4 text-sm', (ui_t(ui_eq(ui_add($v_i, 1), $v_current)) ? 'font-semibold' : 'text-muted-foreground')])), 'Attrs' => ui_attrs(['aria-current', (ui_t(ui_eq(ui_add($v_i, 1), $v_current)) ? 'step' : null), 'data-testid', 'step-item'])], 'children' => $c_3])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0', 'Attrs' => ui_attrs(['aria-label', ui_get($v_labels, ['steps']), 'data-testid', 'step-list'])], 'children' => $c_4])|noescape}
+    {/if}
+    {foreach ui_l($v_steps) as $v_s}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_eq(ui_add($v_i, 1), $v_current))}
+        {capture $c_10}
+          {capture $c_5}
+            {=ui_text(ui_get($v_s, ['title']))}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_5])|noescape}
+          {capture $c_6}
+            {=ui_text(ui_get($v_s, ['text']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+          {capture $c_9}
+            {capture $c_7}
+              {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => ui_s(ui_tpl('{0}-a', [$v_id])), 'Attrs' => ui_attrs(['id', ui_tpl('{0}-a', [$v_id]), 'data-testid', 'field'])]])|noescape}
+            {/capture}
+            {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_s, ['fieldA']), 'htmlFor' => ui_tpl('{0}-a', [$v_id])], 'children' => $c_7])|noescape}
+            {capture $c_8}
+              {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'text', 'Name' => ui_s(ui_tpl('{0}-b', [$v_id])), 'Attrs' => ui_attrs(['id', ui_tpl('{0}-b', [$v_id]), 'data-testid', 'field'])]])|noescape}
+            {/capture}
+            {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_s, ['fieldB']), 'htmlFor' => ui_tpl('{0}-b', [$v_id])], 'children' => $c_8])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid gap-4'], 'children' => $c_9])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'step'])], 'children' => $c_10])|noescape}
+      {/if}
+    {/foreach}
+    {capture $c_13}
+      {capture $c_11}
+        {=ui_text(ui_get($v_labels, ['back']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Type' => 'button', 'Disabled' => ui_t(ui_lt($v_current, 2)), 'Attrs' => ui_attrs(['data-testid', 'wizard-back'])], 'children' => $c_11])|noescape}
+      {capture $c_12}
+        {=ui_text((ui_t(ui_ge($v_current, ui_len($v_steps))) ? ui_get($v_labels, ['finish']) : ui_get($v_labels, ['next'])))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'button', 'Attrs' => ui_attrs(['data-testid', 'wizard-next'])], 'children' => $c_12])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Justify' => 'between'], 'children' => $c_13])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section', 'Class' => ui_s(ui_cnv(['mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8', (ui_t(ui_eq($v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')])), 'Attrs' => ui_attrs(['aria-labelledby', (ui_t($v_landmarkLabel) ? null : ui_tpl('{0}-title', [$v_id])), 'data-testid', 'wizard', 'data-current', ui_str($v_current), 'aria-label', $v_landmarkLabel])], 'children' => $c_14])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/site-footer.latte b/packages/latte/ui/blocks/site-footer.latte
new file mode 100644
index 0000000..81a3989
--- /dev/null
+++ b/packages/latte/ui/blocks/site-footer.latte
@@ -0,0 +1,33 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/site-footer.json
+    The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density (default, compact).
+    Props (p): labels, routes, layout, density, landmarkLabel. *}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_routes = ($p['routes'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'minimal')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_7}
+  {capture $c_6}
+    {capture $c_1}
+      {=ui_text(ui_get($v_labels, ['copyright']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground', 'Attrs' => ui_attrs(['data-testid', 'copyright'])], 'children' => $c_1])|noescape}
+    {capture $c_5}
+      {capture $c_4}
+        {capture $c_2}
+          {=ui_text(ui_get($v_labels, ['home']))}
+        {/capture}
+        {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_routes, ['home']), 'className' => ui_cnv(['font-semibold'])], 'children' => $c_2])|noescape}
+        {capture $c_3}
+          {=ui_text(ui_get($v_labels, ['pricing']))}
+        {/capture}
+        {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_routes, ['pricing']), 'className' => ui_cnv(['font-semibold'])], 'children' => $c_3])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4'], 'children' => $c_4])|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get($v_labels, ['nav']), $v_landmarkLabel])) : ui_get($v_labels, ['nav']))], 'children' => $c_5])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-wrap items-center gap-4', (ui_t(ui_eq($v_density, 'compact')) ? 'py-4' : 'py-6'), (ui_t(ui_eq($v_layout, 'centered')) ? 'flex-col text-center' : 'justify-between')])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_6])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'footer', 'Class' => 'mt-12 border-t border-border', 'Attrs' => ui_attrs(['data-testid', 'site-footer', 'data-layout', $v_layout, 'aria-label', $v_landmarkLabel])], 'children' => $c_7])|noescape}
diff --git a/packages/latte/ui/blocks/site-header.latte b/packages/latte/ui/blocks/site-header.latte
new file mode 100644
index 0000000..9be6a4b
--- /dev/null
+++ b/packages/latte/ui/blocks/site-header.latte
@@ -0,0 +1,54 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/site-header.json
+    The page header: a skip link to the main content, the brand, the two navigation links (the current one carries aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position (static, sticky), actions (none, cta).
+    Props (p): labels, routes, current, layout, position, actions, cta, ctaHref, landmarkLabel. *}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_routes = ($p['routes'] ?? null)}
+{var $v_current = ($p['current'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'inline')}
+{var $v_position = ($p['position'] ?? 'static')}
+{var $v_actions = ($p['actions'] ?? 'none')}
+{var $v_cta = ($p['cta'] ?? null)}
+{var $v_ctaHref = ($p['ctaHref'] ?? null)}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_11}
+  {capture $c_1}
+    {=ui_text(ui_get($v_labels, ['skip']))}
+  {/capture}
+  {=ui_include('ui/link-plain/link-plain.latte', ['p' => ['Href' => '#main-content', 'Class' => 'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border', 'Attrs' => ui_attrs(['data-testid', 'skip-link'])], 'children' => $c_1])|noescape}
+  {capture $c_10}
+    {capture $c_2}
+      {=ui_text(ui_get($v_labels, ['brand']))}
+    {/capture}
+    {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_routes, ['home']), 'className' => ui_cnv(['text-lg font-medium']), 'testid' => 'brand'], 'children' => $c_2])|noescape}
+    {capture $c_6}
+      {capture $c_5}
+        {capture $c_3}
+          {=ui_text(ui_get($v_labels, ['home']))}
+        {/capture}
+        {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_routes, ['home']), 'className' => ui_cnv(['font-semibold']), 'current' => ui_eq($v_current, 'home'), 'testid' => 'nav-link'], 'children' => $c_3])|noescape}
+        {capture $c_4}
+          {=ui_text(ui_get($v_labels, ['pricing']))}
+        {/capture}
+        {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_routes, ['pricing']), 'className' => ui_cnv(['font-semibold']), 'current' => ui_eq($v_current, 'pricing'), 'testid' => 'nav-link'], 'children' => $c_4])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_5])|noescape}
+    {/capture}
+    {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get($v_labels, ['nav']), $v_landmarkLabel])) : ui_get($v_labels, ['nav'])), 'testid' => 'site-nav'], 'children' => $c_6])|noescape}
+    {capture $c_9}
+      {capture $c_7}
+        {=ui_text(ui_get($v_labels, ['theme']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'theme-toggle'])], 'children' => $c_7])|noescape}
+      {if ui_t(ui_and([ui_eq($v_actions, 'cta'), $v_cta]))}
+        {capture $c_8}
+          {=ui_text($v_cta)}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'sm', 'Href' => ui_s($v_ctaHref), 'Attrs' => ui_attrs(['data-testid', 'header-cta'])], 'children' => $c_8])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center'], 'children' => $c_9])|noescape}
+  {/capture}
+  {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-wrap gap-4 py-4', (ui_t(ui_eq($v_layout, 'stacked')) ? 'flex-col items-center' : 'items-center justify-between')])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_10])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'header', 'Class' => ui_s(ui_cnv(['border-b border-border bg-background', (ui_t(ui_eq($v_position, 'sticky')) ? 'sticky top-0 z-40' : '')])), 'Attrs' => ui_attrs(['data-testid', 'site-header', 'data-layout', $v_layout, 'aria-label', $v_landmarkLabel])], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/sitemap-footer.latte b/packages/latte/ui/blocks/sitemap-footer.latte
new file mode 100644
index 0000000..45ee585
--- /dev/null
+++ b/packages/latte/ui/blocks/sitemap-footer.latte
@@ -0,0 +1,104 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/sitemap-footer.json
+    A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above, equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none, first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status itself is a port contract.
+    Props (p): label, brand, tagline, copyright, groups, signup, status, id, layout, density, landmarkLabel. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_brand = ($p['brand'] ?? null)}
+{var $v_tagline = ($p['tagline'] ?? null)}
+{var $v_copyright = ($p['copyright'] ?? null)}
+{var $v_groups = ($p['groups'] ?? null)}
+{var $v_signup = ($p['signup'] ?? null)}
+{var $v_status = ($p['status'] ?? null)}
+{var $v_id = ($p['id'] ?? 'footer')}
+{var $v_layout = ($p['layout'] ?? 'columns')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_eq($v_layout, 'card'))}
+  {=ui_include('blocks/footer-card.latte', ['p' => ['label' => $v_label, 'brand' => $v_brand, 'groups' => $v_groups, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+{else}
+  {capture $c_21}
+    {capture $c_20}
+      {if ui_t(ui_eq(ui_get($v_signup, ['mode']), 'first'))}
+        {capture $c_6}
+          {capture $c_1}
+            {=ui_text(ui_get($v_signup, ['title']))}
+          {/capture}
+          {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+          {capture $c_5}
+            {capture $c_2}
+              {=ui_text(ui_get($v_signup, ['label']))}
+            {/capture}
+            {=ui_include('ui/label/label.latte', ['p' => ['HTMLFor' => ui_s(ui_tpl('{0}-email', [$v_id])), 'Class' => 'sr-only'], 'children' => $c_2])|noescape}
+            {capture $c_4}
+              {=ui_include('ui/input/input.latte', ['p' => ['Type' => 'email', 'Name' => 'email', 'Class' => 'min-w-0 flex-1', 'Attrs' => ui_attrs(['id', ui_tpl('{0}-email', [$v_id]), 'data-testid', 'field'])]])|noescape}
+              {capture $c_3}
+                {=ui_text(ui_get($v_signup, ['submit']))}
+              {/capture}
+              {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'submit', 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_3])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'start', 'Class' => 'w-full flex-wrap'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/form/form.latte', ['p' => ['Method' => 'dialog', 'Class' => ui_s(ui_cnv(['w-full max-w-md', (ui_t(false) ? 'mx-auto' : '')])), 'Attrs' => ui_attrs(['data-testid', 'email-form'])], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Class' => 'max-w-md', 'Attrs' => ui_attrs(['data-testid', 'signup'])], 'children' => $c_6])|noescape}
+      {/if}
+      {if ui_t(ui_eq($v_layout, 'columns'))}
+        {capture $c_11}
+          {capture $c_9}
+            {capture $c_7}
+              {=ui_text($v_brand)}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_7])|noescape}
+            {capture $c_8}
+              {=ui_text($v_tagline)}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_8])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'md:w-64 md:shrink-0'], 'children' => $c_9])|noescape}
+          {capture $c_10}
+            {=ui_include('blocks/footer-columns.latte', ['p' => ['label' => $v_label, 'groups' => $v_groups, 'landmarkLabel' => $v_landmarkLabel]])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'min-w-0 flex-1'], 'children' => $c_10])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex flex-col gap-8 md:flex-row md:items-start md:gap-12', 'Attrs' => ui_attrs(['data-slot', 'footer-top'])], 'children' => $c_11])|noescape}
+      {else}
+        {capture $c_16}
+          {capture $c_12}
+            {=ui_text($v_brand)}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'bold'], 'children' => $c_12])|noescape}
+          {if ui_t(ui_gt(ui_len($v_groups), 0))}
+            {capture $c_15}
+              {capture $c_14}
+                {foreach ui_l($v_groups) as $v_g}
+                  {capture $c_13}
+                    {=ui_text(ui_get($v_g, ['title']))}
+                  {/capture}
+                  {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_g, ['href']), 'className' => ui_cnv(['text-sm']), 'testid' => 'group'], 'children' => $c_13])|noescape}
+                {/foreach}
+              {/capture}
+              {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Class' => 'flex-wrap'], 'children' => $c_14])|noescape}
+            {/capture}
+            {=ui_include('blocks/nav-block.latte', ['p' => ['label' => (ui_t($v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [$v_label, $v_landmarkLabel])) : $v_label)], 'children' => $c_15])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '6', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'flex-wrap'], 'children' => $c_16])|noescape}
+      {/if}
+      {capture $c_19}
+        {capture $c_17}
+          {=ui_text($v_copyright)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_17])|noescape}
+        {if ui_t(ui_eq(ui_get($v_status, ['mode']), 'show'))}
+          {capture $c_18}
+            {=ui_text(ui_get($v_status, ['label']))}
+          {/capture}
+          {=ui_include('blocks/pill.latte', ['p' => ['tone' => 'green', 'icon' => 'circle-check'], 'children' => $c_18])|noescape}
+        {/if}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'flex-wrap border-t border-border pt-6'], 'children' => $c_19])|noescape}
+    {/capture}
+    {=ui_include('ui/container/container.latte', ['p' => ['Class' => ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-col gap-8', (ui_t(ui_eq($v_density, 'compact')) ? 'py-6' : 'py-12')])), 'Attrs' => ui_attrs(['data-slot', 'container'])], 'children' => $c_20])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'footer', 'Class' => 'mt-12 border-t border-border', 'Attrs' => ui_attrs(['data-testid', 'site-footer', 'data-layout', $v_layout, 'aria-label', $v_landmarkLabel])], 'children' => $c_21])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/skeleton-layout.latte b/packages/latte/ui/blocks/skeleton-layout.latte
new file mode 100644
index 0000000..9c0da37
--- /dev/null
+++ b/packages/latte/ui/blocks/skeleton-layout.latte
@@ -0,0 +1,57 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/skeleton-layout.json
+    The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content is loading. The shimmer itself belongs to the Skeleton part.
+    Props (p): id, title, label, lines, shape, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_lines = ($p['lines'] ?? null)}
+{var $v_shape = ($p['shape'] ?? 'cards')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_9}
+  {capture $c_8}
+    {if ui_t(ui_eq($v_shape, 'cards'))}
+      {capture $c_2}
+        {foreach ui_l($v_lines) as $v_l}
+          {capture $c_1}
+            {=ui_include('ui/skeleton/skeleton.latte', ['p' => ['Class' => 'aspect-video w-full']])|noescape}
+            {=ui_include('ui/skeleton/skeleton.latte', ['p' => ['Class' => 'h-4 w-2/3']])|noescape}
+            {=ui_include('ui/skeleton/skeleton.latte', ['p' => ['Class' => 'h-4 w-full']])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_1])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-3', 'Class' => 'gap-4'], 'children' => $c_2])|noescape}
+    {elseif ui_t(ui_eq($v_shape, 'list'))}
+      {capture $c_5}
+        {foreach ui_l($v_lines) as $v_l}
+          {capture $c_4}
+            {=ui_include('ui/skeleton/skeleton.latte', ['p' => ['Class' => 'size-10 shrink-0 rounded-full']])|noescape}
+            {capture $c_3}
+              {=ui_include('ui/skeleton/skeleton.latte', ['p' => ['Class' => 'h-4 w-1/3']])|noescape}
+              {=ui_include('ui/skeleton/skeleton.latte', ['p' => ['Class' => 'h-4 w-full']])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'flex-1'], 'children' => $c_3])|noescape}
+          {/capture}
+          {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_4])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_5])|noescape}
+    {else}
+      {capture $c_7}
+        {=ui_include('ui/skeleton/skeleton.latte', ['p' => ['Class' => 'h-8 w-3/4']])|noescape}
+        {foreach ui_l($v_lines) as $v_l}
+          {capture $c_6}
+            {=ui_include('ui/skeleton/skeleton.latte', ['p' => ['Class' => 'h-4 w-full']])|noescape}
+            {=ui_include('ui/skeleton/skeleton.latte', ['p' => ['Class' => 'h-4 w-5/6']])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_6])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'mx-auto max-w-2xl'], 'children' => $c_7])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'div', 'Class' => 'w-full', 'Attrs' => ui_attrs(['role', 'status', 'aria-label', $v_label, 'data-testid', 'skeleton', 'data-shape', $v_shape])], 'children' => $c_8])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/slot-board.latte b/packages/latte/ui/blocks/slot-board.latte
new file mode 100644
index 0000000..36e6fe1
--- /dev/null
+++ b/packages/latte/ui/blocks/slot-board.latte
@@ -0,0 +1,89 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/slot-board.json
+    Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item (card, plain), tone.
+    Props (p): id, title, lead, days, empty, zone, labels, layout, item, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_days = ($p['days'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_zone = ($p['zone'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'split')}
+{var $v_item = ($p['item'] ?? 'card')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_19}
+  {if ui_t(ui_eq(ui_len($v_days), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'calendar', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_18}
+      {capture $c_1}
+        {=ui_include('blocks/slot-grid.latte', ['p' => ['days' => $v_days, 'name' => ui_tpl('{0}-slot', [$v_id]), 'item' => $v_item]])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'split')) ? 'lg:col-span-2' : 'lg:col-span-3'))], 'children' => $c_1])|noescape}
+      {if ui_t(ui_eq($v_layout, 'split'))}
+        {capture $c_17}
+          {capture $c_3}
+            {capture $c_2}
+              {=ui_include('ui/select/select-option.latte', ['p' => ['Value' => ui_s(ui_get($v_zone, ['id'])), 'Label' => ui_s(ui_get($v_zone, ['name'])), 'Selected' => true]])|noescape}
+            {/capture}
+            {=ui_include('ui/select/select.latte', ['p' => ['Name' => ui_s(ui_tpl('{0}-zone', [$v_id])), 'Attrs' => ui_attrs(['id', ui_tpl('{0}-zone', [$v_id])])], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('blocks/field.latte', ['p' => ['label' => ui_get($v_labels, ['zone']), 'htmlFor' => ui_tpl('{0}-zone', [$v_id])], 'children' => $c_3])|noescape}
+          {capture $c_13}
+            {capture $c_6}
+              {capture $c_4}
+                {=ui_text(ui_get($v_labels, ['price']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+              {capture $c_5}
+                {=ui_text(ui_money(ui_get($v_zone, ['price']), ui_get($v_zone, ['currency'])))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'font-medium'], 'children' => $c_5])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center justify-between gap-4 text-sm'], 'children' => $c_6])|noescape}
+            {capture $c_9}
+              {capture $c_7}
+                {=ui_text(ui_get($v_labels, ['freeFrom']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+              {capture $c_8}
+                {=ui_text(ui_money(ui_get($v_zone, ['freeFrom']), ui_get($v_zone, ['currency'])))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'font-medium'], 'children' => $c_8])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center justify-between gap-4 text-sm'], 'children' => $c_9])|noescape}
+            {capture $c_12}
+              {capture $c_10}
+                {=ui_text(ui_get($v_labels, ['time']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-muted-foreground'], 'children' => $c_10])|noescape}
+              {capture $c_11}
+                {=ui_text(ui_get($v_zone, ['time']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'font-medium'], 'children' => $c_11])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center justify-between gap-4 text-sm'], 'children' => $c_12])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col gap-2'], 'children' => $c_13])|noescape}
+          {capture $c_14}
+            {=ui_text(ui_get($v_labels, ['primary']))}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Class' => 'w-full'], 'children' => $c_14])|noescape}
+          {capture $c_15}
+            {=ui_text(ui_get($v_labels, ['secondary']))}
+          {/capture}
+          {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Class' => 'w-full'], 'children' => $c_15])|noescape}
+          {capture $c_16}
+            {=ui_text(ui_get($v_labels, ['note']))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_16])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs' => ui_attrs(['data-testid', 'aside'])], 'children' => $c_17])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3'], 'children' => $c_18])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_19])|noescape}
diff --git a/packages/latte/ui/blocks/slot-grid.latte b/packages/latte/ui/blocks/slot-grid.latte
new file mode 100644
index 0000000..65ce039
--- /dev/null
+++ b/packages/latte/ui/blocks/slot-grid.latte
@@ -0,0 +1,49 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/slot-grid.json
+    Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck through. One radio group (`name`) across all days. Static markup.
+    Props (p): days, name, item. *}
+{var $v_days = ($p['days'] ?? null)}
+{var $v_name = ($p['name'] ?? null)}
+{var $v_item = ($p['item'] ?? 'card')}
+{capture $c_10}
+  {foreach ui_l($v_days) as $v_d}
+    {capture $c_9}
+      {capture $c_3}
+        {capture $c_1}
+          {=ui_text(ui_get($v_d, ['title']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_text(ui_get($v_d, ['note']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'baseline', 'Justify' => 'between', 'Class' => 'flex-wrap'], 'children' => $c_3])|noescape}
+      {capture $c_8}
+        {foreach ui_l(ui_get($v_d, ['slots'])) as $v_s}
+          {capture $c_5}
+            {=ui_include('ui/radio/radio.latte', ['p' => ['Name' => ui_s($v_name), 'Value' => ui_s(ui_tpl('{0} {1}', [ui_get($v_d, ['id']), $v_s]))]])|noescape}
+            {capture $c_4}
+              {=ui_text($v_s)}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/label/label.latte', ['p' => ['Class' => 'flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground'], 'children' => $c_5])|noescape}
+        {/foreach}
+        {foreach ui_l(ui_get($v_d, ['closed'])) as $v_s}
+          {capture $c_7}
+            {=ui_include('ui/radio/radio.latte', ['p' => ['Name' => ui_s($v_name), 'Value' => ui_s(ui_tpl('{0} {1}', [ui_get($v_d, ['id']), $v_s])), 'Disabled' => true]])|noescape}
+            {capture $c_6}
+              {=ui_text($v_s)}
+            {/capture}
+            {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_6])|noescape}
+          {/capture}
+          {=ui_include('ui/label/label.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground', 'text-muted-foreground line-through']))], 'children' => $c_7])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-2 sm:grid-cols-3'], 'children' => $c_8])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Class' => ui_s((ui_t(ui_eq($v_item, 'card')) ? 'rounded bg-card inset-ring inset-ring-border p-4' : 'border-b border-border pb-4')), 'Attrs' => ui_attrs(['data-testid', 'day'])], 'children' => $c_9])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'days'])], 'children' => $c_10])|noescape}
diff --git a/packages/latte/ui/blocks/stat-figure.latte b/packages/latte/ui/blocks/stat-figure.latte
new file mode 100644
index 0000000..5135cdc
--- /dev/null
+++ b/packages/latte/ui/blocks/stat-figure.latte
@@ -0,0 +1,28 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/stat-figure.json
+    One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon.
+    Props (p): stat, item, align. *}
+{var $v_stat = ($p['stat'] ?? null)}
+{var $v_item = ($p['item'] ?? 'plain')}
+{var $v_align = ($p['align'] ?? 'center')}
+{if ui_t(ui_eq($v_item, 'card'))}
+  {=ui_include('blocks/stat-tile.latte', ['p' => ['label' => ui_get($v_stat, ['label']), 'value' => ui_get($v_stat, ['value']), 'icon' => ui_get($v_stat, ['icon']), 'hint' => ui_get($v_stat, ['hint'])]])|noescape}
+{else}
+  {capture $c_4}
+    {if ui_t(ui_eq($v_item, 'icon'))}
+      {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_stat, ['icon'])), 'Size' => 24]])|noescape}
+    {/if}
+    {capture $c_3}
+      {capture $c_1}
+        {=ui_text(ui_get($v_stat, ['value']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => '5xl', 'Weight' => 'medium', 'Class' => ui_s(ui_cnv(['flex items-center', ui_preset('blocks/presets/defaults.json', ['stats', 'figure'])]))], 'children' => $c_1])|noescape}
+      {capture $c_2}
+        {=ui_text(ui_get($v_stat, ['label']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold', 'Class' => 'leading-5 text-muted-foreground'], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => ui_s((ui_t(ui_eq($v_align, 'center')) ? 'center' : 'start'))], 'children' => $c_3])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => ui_s((ui_t(ui_eq($v_align, 'center')) ? 'center' : 'start')), 'Class' => ui_s(ui_cnv([(ui_t(ui_eq($v_align, 'center')) ? 'text-center' : ''), ui_preset('blocks/presets/defaults.json', ['stats', 'column'])])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_4])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/stat-tile.latte b/packages/latte/ui/blocks/stat-tile.latte
new file mode 100644
index 0000000..672c42a
--- /dev/null
+++ b/packages/latte/ui/blocks/stat-tile.latte
@@ -0,0 +1,63 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/stat-tile.json
+    A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the tile is a plain figure.
+    Props (p): label, value, icon, href, hint. *}
+{var $v_label = ($p['label'] ?? null)}
+{var $v_value = ($p['value'] ?? null)}
+{var $v_icon = ($p['icon'] ?? null)}
+{var $v_href = ($p['href'] ?? null)}
+{var $v_hint = ($p['hint'] ?? null)}
+{capture $c_13}
+  {if ui_t($v_href)}
+    {capture $c_6}
+      {capture $c_3}
+        {capture $c_1}
+          {=ui_text($v_label)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-bold text-muted-foreground'], 'children' => $c_1])|noescape}
+        {capture $c_2}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s($v_icon), 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/iconbadge/icon-badge.latte', ['p' => ['Size' => 'sm'], 'children' => $c_2])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex items-center justify-between gap-2'], 'children' => $c_3])|noescape}
+      {capture $c_4}
+        {=ui_text($v_value)}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => '2xl', 'Weight' => 'bold', 'Class' => 'm-0 leading-8'], 'children' => $c_4])|noescape}
+      {if ui_t($v_hint)}
+        {capture $c_5}
+          {=ui_text($v_hint)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-medium text-muted-foreground'], 'children' => $c_5])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s($v_href), 'Variant' => 'block', 'Class' => 'flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border hover:bg-muted'], 'children' => $c_6])|noescape}
+  {else}
+    {capture $c_12}
+      {capture $c_9}
+        {capture $c_7}
+          {=ui_text($v_label)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-bold text-muted-foreground'], 'children' => $c_7])|noescape}
+        {capture $c_8}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s($v_icon), 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/iconbadge/icon-badge.latte', ['p' => ['Size' => 'sm'], 'children' => $c_8])|noescape}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex items-center justify-between gap-2'], 'children' => $c_9])|noescape}
+      {capture $c_10}
+        {=ui_text($v_value)}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => '2xl', 'Weight' => 'bold', 'Class' => 'm-0 leading-8'], 'children' => $c_10])|noescape}
+      {if ui_t($v_hint)}
+        {capture $c_11}
+          {=ui_text($v_hint)}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-medium text-muted-foreground'], 'children' => $c_11])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border'], 'children' => $c_12])|noescape}
+  {/if}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'min-w-0'], 'children' => $c_13])|noescape}
diff --git a/packages/latte/ui/blocks/stats-band.latte b/packages/latte/ui/blocks/stats-band.latte
new file mode 100644
index 0000000..4887a6b
--- /dev/null
+++ b/packages/latte/ui/blocks/stats-band.latte
@@ -0,0 +1,37 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/stats-band.json
+    Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3, 4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may be empty.
+    Props (p): id, title, stats, empty, cols, layout, surface, item, align, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? '')}
+{var $v_stats = ($p['stats'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_cols = ($p['cols'] ?? '4')}
+{var $v_layout = ($p['layout'] ?? 'row')}
+{var $v_surface = ($p['surface'] ?? 'none')}
+{var $v_item = ($p['item'] ?? 'plain')}
+{var $v_align = ($p['align'] ?? 'center')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_3}
+  {=ui_include('blocks/backdrop.latte', ['p' => ['kind' => (ui_t(ui_eq($v_surface, 'image')) ? 'image' : 'none'), 'alt' => $v_title]])|noescape}
+  {if ui_t(ui_eq(ui_len($v_stats), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'chart-column', 'title' => $v_empty]])|noescape}
+  {elseif ui_t(ui_eq($v_surface, 'panel'))}
+    {capture $c_1}
+      {foreach ui_l($v_stats) as $v_stat}
+        {=ui_include('blocks/stat-figure.latte', ['p' => ['stat' => $v_stat, 'item' => $v_item, 'align' => $v_align]])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_cols, '2')) ? '2' : (ui_t(ui_eq($v_cols, '3')) ? '2-3' : (ui_t(ui_eq($v_cols, '4')) ? '2-4' : '3-6')))), 'Class' => ui_s(ui_cnv(['w-full items-center bg-muted px-6', ui_preset('blocks/presets/defaults.json', ['stats', 'panel'])])), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_1])|noescape}
+  {else}
+    {capture $c_2}
+      {foreach ui_l($v_stats) as $v_stat}
+        {=ui_include('blocks/stat-figure.latte', ['p' => ['stat' => $v_stat, 'item' => $v_item, 'align' => $v_align]])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'stack')) ? '1' : (ui_t(ui_eq($v_cols, '2')) ? '2' : (ui_t(ui_eq($v_cols, '3')) ? '2-3' : (ui_t(ui_eq($v_cols, '4')) ? '2-4' : '3-6'))))), 'Class' => 'gap-6', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_2])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'align' => $v_align, 'measure' => (ui_t(ui_eq($v_surface, 'panel')) ? 'fill' : (ui_t(ui_eq($v_layout, 'stack')) ? 'xs' : 'default')), 'className' => ui_cnv([ui_cnv([ui_cnv([(ui_t(ui_eq($v_surface, 'image')) ? 'bg-transparent' : ''), (ui_t(ui_eq($v_surface, 'panel')) ? 'py-0' : '')]), (ui_t(ui_eq((ui_t(ui_eq($v_surface, 'image')) ? 'image' : 'none'), 'image')) ? 'relative isolate overflow-hidden' : '')])]), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/stepper.latte b/packages/latte/ui/blocks/stepper.latte
new file mode 100644
index 0000000..f95e6ea
--- /dev/null
+++ b/packages/latte/ui/blocks/stepper.latte
@@ -0,0 +1,80 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/stepper.json
+    A multi-step form header: the steps with the current one marked (aria-current step), and the current step's text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show, hide).
+    Props (p): id, title, steps, current, stepLabel, back, next, layout, marker, summary, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_steps = ($p['steps'] ?? null)}
+{var $v_current = ($p['current'] ?? 2)}
+{var $v_stepLabel = ($p['stepLabel'] ?? null)}
+{var $v_back = ($p['back'] ?? null)}
+{var $v_next = ($p['next'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'horizontal')}
+{var $v_marker = ($p['marker'] ?? 'number')}
+{var $v_summary = ($p['summary'] ?? 'show')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_14}
+  {if ui_t(ui_gt(ui_len($v_steps), 0))}
+    {capture $c_13}
+      {capture $c_1}
+        {=ui_text(ui_tpl($v_stepLabel, [$v_current, ui_len($v_steps)]))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_1])|noescape}
+      {capture $c_6}
+        {foreach ui_l($v_steps) as $v_s}
+          {var $v_i = $iterator->counter0}
+          {capture $c_5}
+            {capture $c_3}
+              {if ui_t(ui_eq($v_marker, 'icon'))}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_s, ['icon'])), 'Size' => 16]])|noescape}
+              {else}
+                {capture $c_2}
+                  {=ui_text(ui_str(ui_add($v_i, 1)))}
+                {/capture}
+                {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-sm font-bold'], 'children' => $c_2])|noescape}
+              {/if}
+            {/capture}
+            {=ui_include('ui/iconbadge/icon-badge.latte', ['p' => ['Variant' => ui_s((ui_t(ui_lt(ui_add($v_i, 1), ui_add($v_current, 1))) ? 'primary' : 'outline')), 'Size' => 'sm', 'Class' => ui_s((ui_t(ui_lt(ui_add($v_i, 1), ui_add($v_current, 1))) ? 'text-sm' : 'text-sm text-muted-foreground'))], 'children' => $c_3])|noescape}
+            {capture $c_4}
+              {=ui_text(ui_get($v_s, ['title']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => ui_s((ui_t(ui_eq(ui_add($v_i, 1), $v_current)) ? 'bold' : 'semibold'))], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex flex-1 items-center gap-4', 'Attrs' => ui_attrs(['data-testid', 'item', 'aria-current', (ui_t(ui_eq(ui_add($v_i, 1), $v_current)) ? 'step' : null)])], 'children' => $c_5])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ol', 'Class' => ui_s(ui_cnv(['m-0 flex list-none gap-4 p-0', (ui_t(ui_eq($v_layout, 'vertical')) ? 'flex-col' : 'flex-col sm:flex-row')])), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_6])|noescape}
+      {if ui_t(ui_eq($v_summary, 'show'))}
+        {foreach ui_l($v_steps) as $v_s}
+          {var $v_i = $iterator->counter0}
+          {if ui_t(ui_eq(ui_add($v_i, 1), $v_current))}
+            {capture $c_12}
+              {capture $c_7}
+                {=ui_text(ui_get($v_s, ['title']))}
+              {/capture}
+              {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_7])|noescape}
+              {capture $c_8}
+                {=ui_text(ui_get($v_s, ['text']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_8])|noescape}
+              {capture $c_11}
+                {capture $c_9}
+                  {=ui_text($v_back)}
+                {/capture}
+                {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Type' => 'button'], 'children' => $c_9])|noescape}
+                {capture $c_10}
+                  {=ui_text($v_next)}
+                {/capture}
+                {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'sm', 'Type' => 'button'], 'children' => $c_10])|noescape}
+              {/capture}
+              {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Class' => 'pt-2'], 'children' => $c_11])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'rounded bg-card p-6 inset-ring inset-ring-border', 'Attrs' => ui_attrs(['data-testid', 'step-summary'])], 'children' => $c_12])|noescape}
+          {/if}
+        {/foreach}
+      {/if}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '6', 'Align' => 'stretch', 'Attrs' => ui_attrs(['data-testid', 'stepper'])], 'children' => $c_13])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'measure' => '3xl', 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_14])|noescape}
diff --git a/packages/latte/ui/blocks/steps-list.latte b/packages/latte/ui/blocks/steps-list.latte
new file mode 100644
index 0000000..131076b
--- /dev/null
+++ b/packages/latte/ui/blocks/steps-list.latte
@@ -0,0 +1,52 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/steps-list.json
+    How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon), align, density, tone.
+    Props (p): id, title, steps, empty, layout, marker, align, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_steps = ($p['steps'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_layout = ($p['layout'] ?? 'row')}
+{var $v_marker = ($p['marker'] ?? 'number')}
+{var $v_align = ($p['align'] ?? 'start')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_8}
+  {if ui_t(ui_eq(ui_len($v_steps), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'list-ordered', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_7}
+      {foreach ui_l($v_steps) as $v_step}
+        {var $v_i = $iterator->counter0}
+        {capture $c_6}
+          {capture $c_2}
+            {if ui_t(ui_eq($v_marker, 'icon'))}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_step, ['icon'])), 'Size' => 20]])|noescape}
+            {else}
+              {capture $c_1}
+                {=ui_text(ui_str(ui_add($v_i, 1)))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-base font-bold'], 'children' => $c_1])|noescape}
+            {/if}
+          {/capture}
+          {=ui_include('ui/iconbadge/icon-badge.latte', ['p' => ['Variant' => 'primary', 'Attrs' => ui_attrs(['data-slot', 'marker'])], 'children' => $c_2])|noescape}
+          {capture $c_5}
+            {capture $c_3}
+              {=ui_text(ui_get($v_step, ['title']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_3])|noescape}
+            {capture $c_4}
+              {=ui_text(ui_get($v_step, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => ui_s((ui_t(ui_eq($v_align, 'center')) ? 'center' : 'start'))], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex gap-4', (ui_t(ui_eq($v_layout, 'row')) ? 'flex-col' : ''), (ui_t(ui_eq($v_align, 'center')) ? 'items-center text-center' : '')])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_6])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ol', 'Class' => ui_s(ui_cnv(['grid gap-6', (ui_t(ui_eq($v_layout, 'row')) ? 'sm:grid-cols-2 md:grid-cols-4' : '')])), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_7])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'align' => $v_align, 'measure' => (ui_t(ui_eq($v_layout, 'row')) ? 'default' : '2xl'), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/store-hero.latte b/packages/latte/ui/blocks/store-hero.latte
new file mode 100644
index 0000000..fef9351
--- /dev/null
+++ b/packages/latte/ui/blocks/store-hero.latte
@@ -0,0 +1,87 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/store-hero.json
+    The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, actions, perks, card, layout, mediaSide, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_level = ($p['level'] ?? 1)}
+{var $v_actions = ($p['actions'] ?? null)}
+{var $v_perks = ($p['perks'] ?? null)}
+{var $v_card = ($p['card'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'overlay')}
+{var $v_mediaSide = ($p['mediaSide'] ?? 'end')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_eq($v_layout, 'backdrop'))}
+  {capture $c_7}
+    {=ui_include('blocks/backdrop.latte', ['p' => ['kind' => 'image', 'alt' => $v_title]])|noescape}
+    {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref'])]])|noescape}
+    {if ui_t(ui_gt(ui_len($v_perks), 0))}
+      {capture $c_6}
+        {foreach ui_l($v_perks) as $v_p}
+          {var $v_i = $iterator->counter0}
+          {if ui_t(ui_lt($v_i, 3))}
+            {capture $c_5}
+              {capture $c_1}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_p, ['icon'])), 'Size' => 20]])|noescape}
+              {/capture}
+              {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_1])|noescape}
+              {capture $c_4}
+                {capture $c_2}
+                  {=ui_text(ui_get($v_p, ['title']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+                {capture $c_3}
+                  {=ui_text(ui_get($v_p, ['text']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+              {/capture}
+              {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_4])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Attrs' => ui_attrs(['data-testid', 'perk'])], 'children' => $c_5])|noescape}
+          {/if}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-3', 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'perks'])], 'children' => $c_6])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge, 'level' => $v_level], 'tone' => $v_tone, 'density' => 'roomy', 'measure' => '3xl', 'className' => ui_cnv([(ui_t(ui_eq('image', 'image')) ? 'relative isolate overflow-hidden' : '')]), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_7])|noescape}
+{else}
+  {capture $f_14}
+    {=ui_include('blocks/offer-media.latte', ['p' => ['alt' => $v_title, 'card' => $v_card]])|noescape}
+  {/capture}
+  {capture $c_15}
+    {=ui_include('blocks/action-group.latte', ['p' => ['primary' => ui_get($v_actions, ['cta']), 'primaryHref' => ui_get($v_actions, ['href']), 'secondary' => (ui_t(ui_eq(ui_get($v_actions, ['mode']), 'two')) ? ui_get($v_actions, ['secondary']) : null), 'secondaryHref' => ui_get($v_actions, ['secondaryHref'])]])|noescape}
+    {if ui_t(ui_gt(ui_len($v_perks), 0))}
+      {capture $c_13}
+        {foreach ui_l($v_perks) as $v_p}
+          {var $v_i = $iterator->counter0}
+          {if ui_t(ui_lt($v_i, 3))}
+            {capture $c_12}
+              {capture $c_8}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_p, ['icon'])), 'Size' => 20]])|noescape}
+              {/capture}
+              {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_8])|noescape}
+              {capture $c_11}
+                {capture $c_9}
+                  {=ui_text(ui_get($v_p, ['title']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_9])|noescape}
+                {capture $c_10}
+                  {=ui_text(ui_get($v_p, ['text']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_10])|noescape}
+              {/capture}
+              {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_11])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'start', 'Attrs' => ui_attrs(['data-testid', 'perk'])], 'children' => $c_12])|noescape}
+          {/if}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-3', 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'perks'])], 'children' => $c_13])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge, 'level' => $v_level], 'layout' => 'split', 'media' => ['show' => true, 'side' => $v_mediaSide], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_14], 'children' => $c_15])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/store-locations.latte b/packages/latte/ui/blocks/store-locations.latte
new file mode 100644
index 0000000..ac9a83a
--- /dev/null
+++ b/packages/latte/ui/blocks/store-locations.latte
@@ -0,0 +1,91 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/store-locations.json
+    The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.
+    Props (p): id, title, lead, stores, empty, kinds, labels, layout, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_stores = ($p['stores'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_kinds = ($p['kinds'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'cards')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_18}
+  {if ui_t(ui_eq(ui_len($v_stores), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'store', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_17}
+      {capture $c_15}
+        {foreach ui_l($v_stores) as $v_s}
+          {capture $c_14}
+            {capture $c_3}
+              {capture $c_1}
+                {=ui_text(ui_at($v_kinds, ui_get($v_s, ['kind'])))}
+              {/capture}
+              {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Class' => 'w-fit'], 'children' => $c_1])|noescape}
+              {capture $c_2}
+                {=ui_text(ui_get($v_s, ['name']))}
+              {/capture}
+              {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'lg', 'Weight' => 'bold'], 'children' => $c_2])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_3])|noescape}
+            {capture $c_10}
+              {capture $c_5}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'map-pin', 'Size' => 16]])|noescape}
+                {capture $c_4}
+                  {=ui_text(ui_get($v_s, ['address']))}
+                {/capture}
+                {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_4])|noescape}
+              {/capture}
+              {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center gap-2'], 'children' => $c_5])|noescape}
+              {capture $c_7}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'clock', 'Size' => 16]])|noescape}
+                {capture $c_6}
+                  {=ui_text(ui_get($v_s, ['hours']))}
+                {/capture}
+                {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_6])|noescape}
+              {/capture}
+              {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center gap-2'], 'children' => $c_7])|noescape}
+              {capture $c_9}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'phone', 'Size' => 16]])|noescape}
+                {capture $c_8}
+                  {=ui_text(ui_nbsp(ui_get($v_s, ['phone'])))}
+                {/capture}
+                {=ui_include('ui/link/link.latte', ['p' => ['Href' => ui_s(ui_tpl('tel:{0}', [ui_get($v_s, ['phone'])])), 'Variant' => 'default'], 'children' => $c_8])|noescape}
+              {/capture}
+              {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center gap-2'], 'children' => $c_9])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'list')) ? 'flex flex-wrap gap-x-8 gap-y-2 text-sm' : 'flex flex-col gap-2 text-sm'))], 'children' => $c_10])|noescape}
+            {if ui_t(ui_eq($v_layout, 'cards'))}
+              {capture $c_11}
+                {=ui_text(ui_get($v_s, ['note']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_11])|noescape}
+              {capture $c_13}
+                {foreach ui_l(ui_get($v_s, ['services'])) as $v_v}
+                  {capture $c_12}
+                    {=ui_text($v_v)}
+                  {/capture}
+                  {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'default'], 'children' => $c_12])|noescape}
+                {/foreach}
+              {/capture}
+              {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Class' => 'flex-wrap'], 'children' => $c_13])|noescape}
+            {/if}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'list')) ? 'border-b border-border pb-4' : 'rounded bg-card inset-ring inset-ring-border p-6')), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_14])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'cards')) ? 'grid grid-cols-1 gap-4 md:grid-cols-2' : 'flex flex-col gap-4')), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_15])|noescape}
+      {if ui_t(ui_eq($v_layout, 'map'))}
+        {capture $c_16}
+          {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_labels, ['map']), 'ratio' => '1/1']])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'md:sticky md:top-8'], 'children' => $c_16])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['grid grid-cols-1 gap-8', (ui_t(ui_eq($v_layout, 'map')) ? 'items-start md:grid-cols-2' : '')]))], 'children' => $c_17])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_18])|noescape}
diff --git a/packages/latte/ui/blocks/story-dots.latte b/packages/latte/ui/blocks/story-dots.latte
new file mode 100644
index 0000000..b840a88
--- /dev/null
+++ b/packages/latte/ui/blocks/story-dots.latte
@@ -0,0 +1,12 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/story-dots.json
+    One dot per step of StoryTabs; the dot of the active step is filled.
+    Props (p): steps, active. *}
+{var $v_steps = ($p['steps'] ?? null)}
+{var $v_active = ($p['active'] ?? null)}
+{capture $c_1}
+  {foreach ui_l($v_steps) as $v_s}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s(ui_cnv(['size-2 rounded-full', (ui_t(ui_eq(ui_get($v_s, ['id']), $v_active)) ? 'bg-primary' : 'bg-border')])), 'Attrs' => ui_attrs(['data-testid', 'story-dot'])]])|noescape}
+  {/foreach}
+{/capture}
+{=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/story-panel.latte b/packages/latte/ui/blocks/story-panel.latte
new file mode 100644
index 0000000..d5b25d9
--- /dev/null
+++ b/packages/latte/ui/blocks/story-panel.latte
@@ -0,0 +1,37 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/story-panel.json
+    The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag in a muted box.
+    Props (p): s, index, total, labels. *}
+{var $v_s = ($p['s'] ?? null)}
+{var $v_index = ($p['index'] ?? null)}
+{var $v_total = ($p['total'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_8}
+  {capture $c_3}
+    {capture $c_1}
+      {=ui_text(ui_get($v_s, ['date']))}
+    {/capture}
+    {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'sm'], 'children' => $c_1])|noescape}
+    {capture $c_2}
+      {=ui_text(ui_tpl(ui_get($v_labels, ['step']), [ui_str(ui_add($v_index, 1)), ui_str($v_total)]))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_3])|noescape}
+  {capture $c_4}
+    {=ui_text(ui_get($v_s, ['title']))}
+  {/capture}
+  {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'xl', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+  {capture $c_5}
+    {=ui_text(ui_get($v_s, ['text']))}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+  {capture $c_7}
+    {capture $c_6}
+      {=ui_text(ui_get($v_s, ['tag']))}
+    {/capture}
+    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_6])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'rounded bg-muted p-4'], 'children' => $c_7])|noescape}
+{/capture}
+{=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs' => ui_attrs(['data-testid', 'story-panel'])], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/story-tabs.latte b/packages/latte/ui/blocks/story-tabs.latte
new file mode 100644
index 0000000..82fb336
--- /dev/null
+++ b/packages/latte/ui/blocks/story-tabs.latte
@@ -0,0 +1,67 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/story-tabs.json
+    A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next arrows and one dot per step), tone. Choosing a step emits `select`.
+    Props (p): id, title, lead, badge, steps, empty, active, labels, layout, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_badge = ($p['badge'] ?? '')}
+{var $v_steps = ($p['steps'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_active = ($p['active'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'years')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{if ui_t(ui_eq(ui_len($v_steps), 0))}
+  {capture $c_1}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'milestone', 'title' => $v_empty]])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_1])|noescape}
+{elseif ui_t(ui_eq($v_layout, 'years'))}
+  {capture $c_6}
+    {capture $c_5}
+      {foreach ui_l($v_steps) as $v_s}
+        {capture $c_4}
+          {capture $c_2}
+            {=ui_text(ui_get($v_s, ['date']))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-sm font-semibold'], 'children' => $c_2])|noescape}
+          {capture $c_3}
+            {=ui_text(ui_get($v_s, ['tag']))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-xs'], 'children' => $c_3])|noescape}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => ui_s((ui_t(ui_eq(ui_get($v_s, ['id']), $v_active)) ? 'default' : 'outline')), 'Size' => 'lg', 'Type' => 'button', 'Class' => 'h-auto flex-col items-start gap-0 py-2 text-start', 'Attrs' => ui_attrs(['data-testid', 'story-tab', 'data-active', (ui_t(ui_eq(ui_get($v_s, ['id']), $v_active)) ? 'true' : 'false')])], 'children' => $c_4])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'grid grid-cols-2 gap-2 sm:grid-cols-4', 'Attrs' => ui_attrs(['data-testid', 'story-tabs'])], 'children' => $c_5])|noescape}
+    {foreach ui_l($v_steps) as $v_s}
+      {var $v_i = $iterator->counter0}
+      {if ui_t(ui_eq(ui_get($v_s, ['id']), $v_active))}
+        {=ui_include('blocks/story-panel.latte', ['p' => ['s' => $v_s, 'index' => $v_i, 'total' => ui_len($v_steps), 'labels' => $v_labels]])|noescape}
+      {/if}
+    {/foreach}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_6])|noescape}
+{else}
+  {capture $f_7}
+    {capture $c_11}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '4/3']])|noescape}
+      {capture $c_10}
+        {capture $c_8}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-left', 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Layout' => 'icon', 'Type' => 'button', 'AriaLabel' => ui_s(ui_get($v_labels, ['previous'])), 'Attrs' => ui_attrs(['data-testid', 'story-arrow'])], 'children' => $c_8])|noescape}
+        {=ui_include('blocks/story-dots.latte', ['p' => ['steps' => $v_steps, 'active' => $v_active]])|noescape}
+        {capture $c_9}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'chevron-right', 'Size' => 16]])|noescape}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Layout' => 'icon', 'Type' => 'button', 'AriaLabel' => ui_s(ui_get($v_labels, ['next'])), 'Attrs' => ui_attrs(['data-testid', 'story-arrow'])], 'children' => $c_9])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between'], 'children' => $c_10])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch'], 'children' => $c_11])|noescape}
+  {/capture}
+  {=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'heading' => ['badge' => $v_badge], 'tone' => $v_tone, 'layout' => 'split', 'media' => ['show' => true], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_7]])|noescape}
+{/if}
diff --git a/packages/latte/ui/blocks/support-channels.latte b/packages/latte/ui/blocks/support-channels.latte
new file mode 100644
index 0000000..fb787e2
--- /dev/null
+++ b/packages/latte/ui/blocks/support-channels.latte
@@ -0,0 +1,50 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/support-channels.json
+    Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout (grid, list), columns, action (link, none), tone (default, muted).
+    Props (p): id, title, channels, empty, open, layout, cols, action, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_channels = ($p['channels'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_open = ($p['open'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_cols = ($p['cols'] ?? '1-3')}
+{var $v_action = ($p['action'] ?? 'link')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_8}
+  {if ui_t(ui_eq(ui_len($v_channels), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'life-buoy', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_7}
+      {foreach ui_l($v_channels) as $v_c}
+        {capture $c_6}
+          {capture $c_5}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_c, ['icon'])), 'Size' => 24]])|noescape}
+            {capture $c_3}
+              {capture $c_1}
+                {=ui_text(ui_get($v_c, ['title']))}
+              {/capture}
+              {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+              {capture $c_2}
+                {=ui_text(ui_get($v_c, ['text']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Class' => 'flex-1'], 'children' => $c_3])|noescape}
+            {if ui_t(ui_eq($v_action, 'link'))}
+              {capture $c_4}
+                {=ui_text($v_open)}
+              {/capture}
+              {=ui_include('blocks/menu-entry.latte', ['p' => ['href' => ui_get($v_c, ['href']), 'className' => ui_cnv(['font-semibold']), 'testid' => 'open'], 'children' => $c_4])|noescape}
+            {/if}
+          {/capture}
+          {=ui_include('ui/card/card-content.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-1 gap-4', (ui_t(ui_eq($v_layout, 'list')) ? 'items-center' : 'flex-col')]))], 'children' => $c_5])|noescape}
+        {/capture}
+        {=ui_include('ui/card/card.latte', ['p' => ['Variant' => 'default', 'Class' => ui_s(ui_cnv(['h-full', (ui_t(ui_eq($v_layout, 'list')) ? 'flex-row items-center' : '')])), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_6])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'list')) ? '1' : $v_cols)), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_7])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_8])|noescape}
diff --git a/packages/latte/ui/blocks/switcher-item.latte b/packages/latte/ui/blocks/switcher-item.latte
new file mode 100644
index 0000000..97ee2ab
--- /dev/null
+++ b/packages/latte/ui/blocks/switcher-item.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/switcher-item.json
+    One item of a Switcher (default or active). Pass the same size and layout as the Switcher.
+    Props (p): active, size, layout, className; children: markup. *}
+{var $v_active = ($p['active'] ?? false)}
+{var $v_size = ($p['size'] ?? 'default')}
+{var $v_layout = ($p['layout'] ?? 'text')}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/button-plain/button-plain.latte', ['p' => ['Type' => 'button', 'Role' => 'tab', 'Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/switcher-item.variants.json', ['size' => $v_size, 'layout' => $v_layout, 'state' => (ui_t($v_active) ? 'active' : 'default')]), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['aria-selected', $v_active, 'tabindex', (ui_t($v_active) ? 0 : -1), 'data-slot', 'switcher-item', 'data-state', (ui_t($v_active) ? 'active' : 'default')])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/switcher.latte b/packages/latte/ui/blocks/switcher.latte
new file mode 100644
index 0000000..e57591f
--- /dev/null
+++ b/packages/latte/ui/blocks/switcher.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/switcher.json
+    A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown (horizontal, activate).
+    Props (p): size, layout, label, className; children: markup. *}
+{var $v_size = ($p['size'] ?? 'default')}
+{var $v_layout = ($p['layout'] ?? 'text')}
+{var $v_label = ($p['label'] ?? null)}
+{capture $c_1}
+  {=($children ?? '')|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv([ui_recipe('blocks/recipes/switcher.variants.json', ['size' => $v_size, 'layout' => $v_layout]), ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'tablist', 'aria-label', $v_label, 'data-slot', 'switcher'])], 'children' => $c_1])|noescape}
diff --git a/packages/latte/ui/blocks/table-toolbar.latte b/packages/latte/ui/blocks/table-toolbar.latte
new file mode 100644
index 0000000..3a6e181
--- /dev/null
+++ b/packages/latte/ui/blocks/table-toolbar.latte
@@ -0,0 +1,16 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/table-toolbar.json
+    The toolbar above a table: search and filter controls on the left (children), the actions on the right (`actions`). One tab stop group (role toolbar).
+    Props (p): label, className, actions (slot); children: markup. *}
+{var $v_label = ($p['label'] ?? null)}
+{capture $c_3}
+  {capture $c_1}
+    {=($children ?? '')|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex min-w-0 flex-wrap items-center gap-2'], 'children' => $c_1])|noescape}
+  {capture $c_2}
+    {=($p['actions'] ?? '')|noescape}
+  {/capture}
+  {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'flex flex-wrap items-center gap-2'], 'children' => $c_2])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-wrap items-center justify-between gap-2', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['role', 'toolbar', 'aria-label', $v_label, 'data-slot', 'table-toolbar'])], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/team-grid.latte b/packages/latte/ui/blocks/team-grid.latte
new file mode 100644
index 0000000..322b294
--- /dev/null
+++ b/packages/latte/ui/blocks/team-grid.latte
@@ -0,0 +1,69 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/team-grid.json
+    The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory), cols, tone, density.
+    Props (p): id, title, lead, members, empty, depts, layout, cols, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_members = ($p['members'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_depts = ($p['depts'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'cards')}
+{var $v_cols = ($p['cols'] ?? '1-4')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $f_11}
+  {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title, 'ratio' => '3/4']])|noescape}
+{/capture}
+{capture $c_12}
+  {if ui_t(ui_eq(ui_len($v_members), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'users', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_10}
+      {foreach ui_l($v_members) as $v_m}
+        {if ui_t(ui_eq($v_layout, 'minimal'))}
+          {capture $c_3}
+            {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_m, ['name']), 'ratio' => '1/1', 'className' => ui_cnv([ui_cnv(['size-16', 'shrink-0'])])]])|noescape}
+            {capture $c_1}
+              {=ui_text(ui_get($v_m, ['name']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_get($v_m, ['role']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Class' => 'text-center', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_3])|noescape}
+        {elseif ui_t(ui_eq($v_layout, 'cards'))}
+          {capture $c_9}
+            {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_m, ['name']), 'ratio' => '1/1']])|noescape}
+            {capture $c_8}
+              {capture $c_6}
+                {capture $c_4}
+                  {=ui_text(ui_get($v_m, ['name']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_4])|noescape}
+                {capture $c_5}
+                  {=ui_text(ui_get($v_m, ['role']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+              {/capture}
+              {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_6])|noescape}
+              {capture $c_7}
+                {=ui_text(ui_get($v_m, ['bio']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_8])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_9])|noescape}
+        {else}
+          {=ui_include('blocks/member-row.latte', ['p' => ['member' => $v_m, 'depts' => $v_depts, 'layout' => $v_layout]])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s((ui_t(ui_eq($v_layout, 'minimal')) ? 'grid grid-cols-2 gap-8 md:grid-cols-4' : (ui_t(ui_eq($v_layout, 'directory')) ? 'grid grid-cols-1 gap-4 md:grid-cols-2' : (ui_t(ui_eq($v_layout, 'list')) ? 'flex flex-col gap-4' : (ui_t(ui_eq($v_cols, '1-3')) ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4'))))), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_10])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'density' => $v_density, 'layout' => (ui_t(ui_eq($v_layout, 'list')) ? 'split' : 'stack'), 'media' => ['show' => ui_eq($v_layout, 'list'), 'side' => 'start', 'align' => 'start'], 'landmarkLabel' => $v_landmarkLabel, 'aside' => $f_11], 'children' => $c_12])|noescape}
diff --git a/packages/latte/ui/blocks/template-grid.latte b/packages/latte/ui/blocks/template-grid.latte
new file mode 100644
index 0000000..4803597
--- /dev/null
+++ b/packages/latte/ui/blocks/template-grid.latte
@@ -0,0 +1,103 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/template-grid.json
+    Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all button.
+    Props (p): id, title, templates, filters, browseHref, labels, cols, tone, density, empty, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_templates = ($p['templates'] ?? null)}
+{var $v_filters = ($p['filters'] ?? null)}
+{var $v_browseHref = ($p['browseHref'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_cols = ($p['cols'] ?? '1-4')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'compact')}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_21}
+  {capture $c_20}
+    {capture $c_4}
+      {capture $c_1}
+        {=ui_text($v_title)}
+      {/capture}
+      {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(2), 'Size' => '2xl', 'Weight' => 'semibold', 'Class' => 'leading-9', 'Attrs' => ui_attrs(['id', ui_add($v_id, '-title')])], 'children' => $c_1])|noescape}
+      {if ui_t(ui_gt(ui_len($v_filters), 0))}
+        {capture $c_3}
+          {foreach ui_l($v_filters) as $v_f}
+            {capture $c_2}
+              {if ui_t(ui_get($v_f, ['icon']))}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_f, ['icon'])), 'Size' => 16]])|noescape}
+              {/if}
+              {=ui_text(ui_get($v_f, ['title']))}
+            {/capture}
+            {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Type' => 'button', 'Class' => 'gap-2', 'Attrs' => ui_attrs(['data-testid', 'template-filter'])], 'children' => $c_2])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'flex-wrap', 'Attrs' => ui_attrs(['role', 'group', 'aria-label', ui_get($v_labels, ['filters']), 'data-testid', 'template-filters'])], 'children' => $c_3])|noescape}
+      {/if}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Justify' => 'between', 'Class' => 'h-8 w-full flex-wrap'], 'children' => $c_4])|noescape}
+    {if ui_t(ui_eq(ui_len($v_templates), 0))}
+      {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'layout-template', 'title' => $v_empty]])|noescape}
+    {else}
+      {capture $c_18}
+        {foreach ui_l($v_templates) as $v_t}
+          {capture $c_17}
+            {capture $c_5}
+              {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_t, ['title']), 'className' => ui_cnv([ui_cnv(['size-full', ui_preset('blocks/presets/defaults.json', ['media', 'rounded'])])])]])|noescape}
+            {/capture}
+            {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['shrink-0 overflow-hidden', ui_preset('blocks/presets/defaults.json', ['templates', 'image'])]))], 'children' => $c_5])|noescape}
+            {capture $c_16}
+              {capture $c_6}
+                {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'layout-template', 'Size' => 16]])|noescape}
+              {/capture}
+              {=ui_include('ui/iconbadge/icon-badge.latte', ['p' => ['Size' => 'sm', 'Class' => 'overflow-hidden', 'Attrs' => ui_attrs(['data-testid', 'template-avatar'])], 'children' => $c_6])|noescape}
+              {capture $c_15}
+                {capture $c_7}
+                  {=ui_text(ui_get($v_t, ['title']))}
+                {/capture}
+                {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'semibold', 'Class' => 'truncate leading-6'], 'children' => $c_7])|noescape}
+                {capture $c_14}
+                  {capture $c_10}
+                    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'eye', 'Size' => 16]])|noescape}
+                    {capture $c_8}
+                      {=ui_text(ui_get($v_labels, ['views']))}
+                    {/capture}
+                    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_8])|noescape}
+                    {capture $c_9}
+                      {=ui_text(ui_get($v_t, ['views']))}
+                    {/capture}
+                    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'bold', 'Class' => 'leading-4'], 'children' => $c_9])|noescape}
+                  {/capture}
+                  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_10])|noescape}
+                  {capture $c_13}
+                    {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'heart', 'Size' => 16]])|noescape}
+                    {capture $c_11}
+                      {=ui_text(ui_get($v_labels, ['likes']))}
+                    {/capture}
+                    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_11])|noescape}
+                    {capture $c_12}
+                      {=ui_text(ui_get($v_t, ['likes']))}
+                    {/capture}
+                    {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Weight' => 'bold', 'Class' => 'leading-4'], 'children' => $c_12])|noescape}
+                  {/capture}
+                  {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center'], 'children' => $c_13])|noescape}
+                {/capture}
+                {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => 'h-4 text-muted-foreground'], 'children' => $c_14])|noescape}
+              {/capture}
+              {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0', 'Class' => 'min-w-0 flex-1'], 'children' => $c_15])|noescape}
+            {/capture}
+            {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '4', 'Align' => 'center', 'Class' => ui_s(ui_cnv(['w-full', ui_preset('blocks/presets/defaults.json', ['templates', 'footer'])])), 'Attrs' => ui_attrs(['data-testid', 'template-footer'])], 'children' => $c_16])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border', ui_preset('blocks/presets/defaults.json', ['templates', 'card'])])), 'Attrs' => ui_attrs(['data-testid', 'template-card'])], 'children' => $c_17])|noescape}
+        {/foreach}
+      {/capture}
+      {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s($v_cols), 'Class' => 'w-full gap-6', 'Attrs' => ui_attrs(['data-testid', 'template-grid'])], 'children' => $c_18])|noescape}
+    {/if}
+    {capture $c_19}
+      {=ui_text(ui_get($v_labels, ['browse']))}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'sm', 'Href' => ui_s($v_browseHref), 'Class' => 'w-full', 'Attrs' => ui_attrs(['data-testid', 'template-browse'])], 'children' => $c_19])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '8', 'Align' => 'stretch'], 'children' => $c_20])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'tone' => $v_tone, 'density' => $v_density, 'measure' => 'fill', 'className' => ui_cnv(['py-0']), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_21])|noescape}
diff --git a/packages/latte/ui/blocks/testimonial-grid.latte b/packages/latte/ui/blocks/testimonial-grid.latte
new file mode 100644
index 0000000..320ef9d
--- /dev/null
+++ b/packages/latte/ui/blocks/testimonial-grid.latte
@@ -0,0 +1,38 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/testimonial-grid.json
+    Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card, plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the Carousel port contract around the single layout.
+    Props (p): id, title, quotes, empty, labels, layout, cols, item, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_quotes = ($p['quotes'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'grid')}
+{var $v_cols = ($p['cols'] ?? '1-3')}
+{var $v_item = ($p['item'] ?? null)}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_3}
+  {if ui_t(ui_eq(ui_len($v_quotes), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'message-square-quote', 'title' => $v_empty]])|noescape}
+  {elseif ui_t(ui_or([ui_eq($v_layout, 'masonry'), ui_eq($v_layout, 'strip')]))}
+    {capture $c_1}
+      {foreach ui_l($v_quotes) as $v_q}
+        {=ui_include('blocks/quote-card.latte', ['p' => ['q' => $v_q, 'labels' => $v_labels, 'item' => $v_item, 'layout' => $v_layout]])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'div', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'masonry')) ? 'columns-1 gap-4 md:columns-2 xl:columns-3' : 'flex snap-x gap-4 overflow-x-auto pb-2')), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_1])|noescape}
+  {else}
+    {capture $c_2}
+      {foreach ui_l($v_quotes) as $v_q}
+        {var $v_i = $iterator->counter0}
+        {if ui_t(ui_or([!(ui_eq($v_layout, 'single')), ui_eq($v_i, 0)]))}
+          {=ui_include('blocks/quote-card.latte', ['p' => ['q' => $v_q, 'labels' => $v_labels, 'item' => $v_item, 'layout' => $v_layout]])|noescape}
+        {/if}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s((ui_t(ui_eq($v_layout, 'grid')) ? $v_cols : '1')), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_2])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'align' => (ui_t(ui_eq($v_layout, 'single')) ? 'center' : 'start'), 'measure' => (ui_t(ui_eq($v_layout, 'grid')) ? 'default' : '2xl'), 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/timeline.latte b/packages/latte/ui/blocks/timeline.latte
new file mode 100644
index 0000000..2ae1fcc
--- /dev/null
+++ b/packages/latte/ui/blocks/timeline.latte
@@ -0,0 +1,45 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/timeline.json
+    A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time. Newest first or oldest first is the caller's order.
+    Props (p): items, className. *}
+{var $k_TONE_DOT = ['gray' => 'bg-muted-foreground', 'green' => 'bg-emerald-500', 'blue' => 'bg-blue-500', 'amber' => 'bg-amber-500', 'red' => 'bg-red-500']}
+{var $v_items = ($p['items'] ?? null)}
+{capture $c_9}
+  {capture $c_8}
+    {foreach ui_l($v_items) as $v_item}
+      {var $v_i = $iterator->counter0}
+      {capture $c_7}
+        {capture $c_1}
+          {if ui_t(ui_lt($v_i, ui_sub(ui_len($v_items), 1)))}
+            {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'absolute top-4 -bottom-0 w-px bg-border']])|noescape}
+          {/if}
+          {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s(ui_cnv(['mt-2 size-2 rounded-full', ui_at($k_TONE_DOT, ui_coalesce([ui_get($v_item, ['tone']), 'gray']))]))]])|noescape}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'relative flex w-2 shrink-0 justify-center'], 'children' => $c_1])|noescape}
+        {capture $c_6}
+          {capture $c_4}
+            {capture $c_2}
+              {=ui_text(ui_get($v_item, ['title']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-sm font-bold text-foreground'], 'children' => $c_2])|noescape}
+            {capture $c_3}
+              {=ui_text(ui_get($v_item, ['time']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 shrink-0 text-xs font-medium text-muted-foreground'], 'children' => $c_3])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex flex-wrap items-baseline justify-between gap-x-4'], 'children' => $c_4])|noescape}
+          {if ui_t(ui_get($v_item, ['text']))}
+            {capture $c_5}
+              {=ui_text(ui_get($v_item, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Class' => 'm-0 text-xs font-medium text-muted-foreground'], 'children' => $c_5])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex min-w-0 flex-1 flex-col gap-0'], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'relative flex min-w-0 gap-4 pb-4 last:pb-0', 'Attrs' => ui_attrs(['data-event', ui_get($v_item, ['id'])])], 'children' => $c_7])|noescape}
+    {/foreach}
+  {/capture}
+  {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col p-0'], 'children' => $c_8])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => ui_s(ui_cnv(['min-w-0', ($p['className'] ?? '')])), 'Attrs' => ui_attrs(['data-slot', 'timeline'])], 'children' => $c_9])|noescape}
diff --git a/packages/latte/ui/blocks/topic-chips.latte b/packages/latte/ui/blocks/topic-chips.latte
new file mode 100644
index 0000000..d02f462
--- /dev/null
+++ b/packages/latte/ui/blocks/topic-chips.latte
@@ -0,0 +1,25 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/topic-chips.json
+    A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band with an icon per topic; default: outlined.
+    Props (p): topics, tone. *}
+{var $v_topics = ($p['topics'] ?? null)}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{capture $c_3}
+  {foreach ui_l($v_topics) as $v_topic}
+    {if ui_t(ui_eq($v_tone, 'inverse'))}
+      {capture $c_1}
+        {if ui_t(ui_get($v_topic, ['icon']))}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_topic, ['icon'])), 'Size' => 16]])|noescape}
+        {/if}
+        {=ui_text(ui_get($v_topic, ['name']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Href' => ui_s(ui_get($v_topic, ['href'])), 'Variant' => 'ghost', 'Size' => 'sm', 'Class' => 'gap-2 text-background inset-ring-background/30 hover:bg-background/10', 'Attrs' => ui_attrs(['data-testid', 'hero-topic'])], 'children' => $c_1])|noescape}
+    {else}
+      {capture $c_2}
+        {=ui_text(ui_get($v_topic, ['name']))}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Href' => ui_s(ui_get($v_topic, ['href'])), 'Variant' => 'outline', 'Size' => 'sm', 'Attrs' => ui_attrs(['data-testid', 'hero-topic'])], 'children' => $c_2])|noescape}
+    {/if}
+  {/foreach}
+{/capture}
+{=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Justify' => 'center', 'Class' => 'flex-wrap', 'Attrs' => ui_attrs(['data-testid', 'hero-topics'])], 'children' => $c_3])|noescape}
diff --git a/packages/latte/ui/blocks/tour-callout.latte b/packages/latte/ui/blocks/tour-callout.latte
new file mode 100644
index 0000000..4c03232
--- /dev/null
+++ b/packages/latte/ui/blocks/tour-callout.latte
@@ -0,0 +1,51 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/tour-callout.json
+    One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target), tone, density.
+    Props (p): id, title, text, target, position, skip, next, placement, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_target = ($p['target'] ?? null)}
+{var $v_position = ($p['position'] ?? null)}
+{var $v_skip = ($p['skip'] ?? null)}
+{var $v_next = ($p['next'] ?? null)}
+{var $v_placement = ($p['placement'] ?? 'below')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_10}
+  {capture $c_9}
+    {capture $c_1}
+      {=ui_text($v_target)}
+    {/capture}
+    {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline', 'Size' => 'default', 'Type' => 'button', 'Class' => 'inset-ring-foreground', 'Attrs' => ui_attrs(['data-testid', 'tour-target'])], 'children' => $c_1])|noescape}
+    {capture $c_8}
+      {capture $c_2}
+        {=ui_text($v_position)}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+      {capture $c_3}
+        {=ui_text($v_title)}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'base', 'Weight' => 'semibold'], 'children' => $c_3])|noescape}
+      {capture $c_4}
+        {=ui_text($v_text)}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+      {capture $c_7}
+        {capture $c_5}
+          {=ui_text($v_skip)}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Type' => 'button'], 'children' => $c_5])|noescape}
+        {capture $c_6}
+          {=ui_text($v_next)}
+        {/capture}
+        {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'sm', 'Type' => 'button'], 'children' => $c_6])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Justify' => 'end'], 'children' => $c_7])|noescape}
+    {/capture}
+    {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => ui_s(ui_cnv(['w-full max-w-sm', 'rounded bg-card inset-ring inset-ring-border', 'p-4', 'shadow-md'])), 'Attrs' => ui_attrs(['role', 'group', 'aria-label', $v_title, 'data-testid', 'tour-callout'])], 'children' => $c_8])|noescape}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'div', 'Class' => ui_s(ui_cnv(['flex gap-4', (ui_t(ui_eq($v_placement, 'end')) ? 'flex-col items-start md:flex-row md:items-center' : (ui_t(ui_eq($v_placement, 'above')) ? 'flex-col-reverse items-start' : 'flex-col items-start'))])), 'Attrs' => ui_attrs(['data-testid', 'tour', 'data-placement', $v_placement])], 'children' => $c_9])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_10])|noescape}
diff --git a/packages/latte/ui/blocks/usage-calculator.latte b/packages/latte/ui/blocks/usage-calculator.latte
new file mode 100644
index 0000000..d5af306
--- /dev/null
+++ b/packages/latte/ui/blocks/usage-calculator.latte
@@ -0,0 +1,65 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/usage-calculator.json
+    A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the largest amount under the slider, hide), tone.
+    Props (p): id, title, text, usage, slider, price, cta, href, layout, ends, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_usage = ($p['usage'] ?? null)}
+{var $v_slider = ($p['slider'] ?? null)}
+{var $v_price = ($p['price'] ?? null)}
+{var $v_cta = ($p['cta'] ?? null)}
+{var $v_href = ($p['href'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'card')}
+{var $v_ends = ($p['ends'] ?? 'show')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_13}
+  {capture $c_12}
+    {capture $c_3}
+      {capture $c_1}
+        {=ui_text(ui_tpl(ui_get($v_slider, ['unit']), [$v_usage]))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xl', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+      {capture $c_2}
+        {=ui_text(ui_get($v_slider, ['label']))}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Justify' => 'between', 'Align' => 'baseline'], 'children' => $c_3])|noescape}
+    {=ui_include('ui/range/range.latte', ['p' => ['Min' => ui_i(ui_get($v_slider, ['min'])), 'Max' => ui_i(ui_get($v_slider, ['max'])), 'Value' => ui_s($v_usage), 'AriaLabel' => ui_s(ui_get($v_slider, ['label'])), 'Attrs' => ui_attrs(['data-testid', 'slider'])]])|noescape}
+    {if ui_t(ui_eq($v_ends, 'show'))}
+      {capture $c_6}
+        {capture $c_4}
+          {=ui_text(ui_tpl(ui_get($v_slider, ['unit']), [ui_get($v_slider, ['min'])]))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_4])|noescape}
+        {capture $c_5}
+          {=ui_text(ui_tpl(ui_get($v_slider, ['unit']), [ui_get($v_slider, ['max'])]))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+      {/capture}
+      {=ui_include('ui/group/group.latte', ['p' => ['Justify' => 'between', 'Attrs' => ui_attrs(['data-testid', 'ends'])], 'children' => $c_6])|noescape}
+    {/if}
+    {capture $c_11}
+      {capture $c_9}
+        {capture $c_7}
+          {=ui_text(ui_get($v_price, ['label']))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+        {capture $c_8}
+          {=ui_text(ui_money(ui_mul($v_usage, ui_get($v_price, ['rate'])), ui_get($v_price, ['currency'])))}
+        {/capture}
+        {=ui_include('ui/text/text.latte', ['p' => ['Size' => '4xl', 'Weight' => 'bold', 'Attrs' => ui_attrs(['data-testid', 'estimate'])], 'children' => $c_8])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_9])|noescape}
+      {capture $c_10}
+        {=ui_text($v_cta)}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Href' => ui_s($v_href), 'Attrs' => ui_attrs(['data-testid', 'submit'])], 'children' => $c_10])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Justify' => 'between', 'Align' => 'center', 'Class' => 'flex-wrap'], 'children' => $c_11])|noescape}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => ui_s(ui_cnv(['mx-auto w-full max-w-xl', (ui_t(ui_eq($v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')])), 'Attrs' => ui_attrs(['data-testid', 'usage'])], 'children' => $c_12])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_text, 'tone' => $v_tone, 'align' => 'center', 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_13])|noescape}
diff --git a/packages/latte/ui/blocks/usp-strip.latte b/packages/latte/ui/blocks/usp-strip.latte
new file mode 100644
index 0000000..ae1774d
--- /dev/null
+++ b/packages/latte/ui/blocks/usp-strip.latte
@@ -0,0 +1,56 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/usp-strip.json
+    The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted panel, cards: a card each, bar: a thin line of icons and titles), tone, density.
+    Props (p): id, title, perks, empty, layout, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? '')}
+{var $v_perks = ($p['perks'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_layout = ($p['layout'] ?? 'strip')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_10}
+  {if ui_t(ui_eq(ui_len($v_perks), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'truck', 'title' => $v_empty]])|noescape}
+  {elseif ui_t(ui_eq($v_layout, 'bar'))}
+    {capture $c_3}
+      {foreach ui_l($v_perks) as $v_p}
+        {capture $c_2}
+          {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_p, ['icon'])), 'Size' => 16]])|noescape}
+          {capture $c_1}
+            {=ui_text(ui_get($v_p, ['title']))}
+          {/capture}
+          {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_1])|noescape}
+        {/capture}
+        {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center gap-2 text-sm font-medium', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_2])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-wrap items-center justify-center gap-x-8 gap-y-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_3])|noescape}
+  {else}
+    {capture $c_9}
+      {foreach ui_l($v_perks) as $v_p}
+        {capture $c_8}
+          {capture $c_4}
+            {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => ui_s(ui_get($v_p, ['icon'])), 'Size' => 20]])|noescape}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'], 'children' => $c_4])|noescape}
+          {capture $c_7}
+            {capture $c_5}
+              {=ui_text(ui_get($v_p, ['title']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_5])|noescape}
+            {capture $c_6}
+              {=ui_text(ui_get($v_p, ['text']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_6])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_7])|noescape}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Class' => ui_s((ui_t(ui_eq($v_layout, 'cards')) ? 'rounded bg-card inset-ring inset-ring-border p-6' : '')), 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_8])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-4', 'Class' => ui_s(ui_cnv(['gap-4', (ui_t(ui_eq($v_layout, 'strip')) ? 'rounded bg-muted p-6' : '')])), 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_9])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_10])|noescape}
diff --git a/packages/latte/ui/blocks/video-grid.latte b/packages/latte/ui/blocks/video-grid.latte
new file mode 100644
index 0000000..83c0427
--- /dev/null
+++ b/packages/latte/ui/blocks/video-grid.latte
@@ -0,0 +1,64 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/video-grid.json
+    Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone, density.
+    Props (p): id, title, quotes, empty, playLabel, byLine, cols, caption, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_quotes = ($p['quotes'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_playLabel = ($p['playLabel'] ?? null)}
+{var $v_byLine = ($p['byLine'] ?? null)}
+{var $v_cols = ($p['cols'] ?? '1-3')}
+{var $v_caption = ($p['caption'] ?? 'below')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_11}
+  {if ui_t(ui_eq(ui_len($v_quotes), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'video', 'title' => $v_empty]])|noescape}
+  {else}
+    {capture $c_10}
+      {foreach ui_l($v_quotes) as $v_q}
+        {capture $c_9}
+          {capture $c_5}
+            {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => ui_get($v_q, ['author'])]])|noescape}
+            {capture $c_1}
+              {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'play', 'Size' => 20]])|noescape}
+            {/capture}
+            {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'button', 'Class' => 'absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0', 'Attrs' => ui_attrs(['aria-label', ui_tpl($v_playLabel, [ui_get($v_q, ['author'])]), 'data-testid', 'play'])], 'children' => $c_1])|noescape}
+            {if ui_t(ui_eq($v_caption, 'overlay'))}
+              {capture $c_4}
+                {capture $c_2}
+                  {=ui_text(ui_get($v_q, ['author']))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_2])|noescape}
+                {capture $c_3}
+                  {=ui_text(ui_tpl($v_byLine, [ui_get($v_q, ['role']), ui_get($v_q, ['company'])]))}
+                {/capture}
+                {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_3])|noescape}
+              {/capture}
+              {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'absolute inset-x-0 bottom-0 rounded bg-background p-4', 'Attrs' => ui_attrs(['data-testid', 'caption'])], 'children' => $c_4])|noescape}
+            {/if}
+          {/capture}
+          {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'relative'], 'children' => $c_5])|noescape}
+          {if ui_t(ui_eq($v_caption, 'below'))}
+            {capture $c_8}
+              {capture $c_6}
+                {=ui_text(ui_get($v_q, ['author']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_6])|noescape}
+              {capture $c_7}
+                {=ui_text(ui_tpl($v_byLine, [ui_get($v_q, ['role']), ui_get($v_q, ['company'])]))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_7])|noescape}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Tag' => 'figcaption', 'Attrs' => ui_attrs(['data-testid', 'caption'])], 'children' => $c_8])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('blocks/figure-block.latte', ['p' => ['className' => ui_cnv(['m-0 flex flex-col gap-4']), 'testid' => 'item'], 'children' => $c_9])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => ui_s($v_cols), 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_10])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_11])|noescape}
diff --git a/packages/latte/ui/blocks/video-modal.latte b/packages/latte/ui/blocks/video-modal.latte
new file mode 100644
index 0000000..fe7b7cc
--- /dev/null
+++ b/packages/latte/ui/blocks/video-modal.latte
@@ -0,0 +1,65 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/video-modal.json
+    A dialog with a walkthrough video: a title and a close button, the player area with a play button and, optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size (default, wide), outline (none, chapters: a list under the player), tone.
+    Props (p): id, title, text, close, play, chaptersTitle, chapters, size, outline, tone, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_text = ($p['text'] ?? null)}
+{var $v_close = ($p['close'] ?? null)}
+{var $v_play = ($p['play'] ?? null)}
+{var $v_chaptersTitle = ($p['chaptersTitle'] ?? null)}
+{var $v_chapters = ($p['chapters'] ?? null)}
+{var $v_size = ($p['size'] ?? 'default')}
+{var $v_outline = ($p['outline'] ?? 'none')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_13}
+  {capture $c_12}
+    {capture $c_3}
+      {capture $c_1}
+        {=ui_text($v_text)}
+      {/capture}
+      {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_1])|noescape}
+      {capture $c_2}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'x', 'Size' => 16]])|noescape}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'ghost', 'Size' => 'sm', 'Type' => 'button', 'Class' => 'shrink-0', 'Attrs' => ui_attrs(['aria-label', $v_close, 'data-testid', 'modal-close'])], 'children' => $c_2])|noescape}
+    {/capture}
+    {=ui_include('ui/group/group.latte', ['p' => ['Gap' => '2', 'Align' => 'center', 'Justify' => 'between'], 'children' => $c_3])|noescape}
+    {capture $c_5}
+      {=ui_include('blocks/media-frame.latte', ['p' => ['alt' => $v_title]])|noescape}
+      {capture $c_4}
+        {=ui_include('ui/lucide-icon/lucide-icon.latte', ['p' => ['Name' => 'play', 'Size' => 24]])|noescape}
+      {/capture}
+      {=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'default', 'Size' => 'default', 'Type' => 'button', 'Class' => 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded', 'Attrs' => ui_attrs(['aria-label', $v_play, 'data-testid', 'play'])], 'children' => $c_4])|noescape}
+    {/capture}
+    {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'relative', 'Attrs' => ui_attrs(['data-testid', 'player'])], 'children' => $c_5])|noescape}
+    {if ui_t(ui_and([ui_eq($v_outline, 'chapters'), ui_gt(ui_len($v_chapters), 0)]))}
+      {capture $c_11}
+        {capture $c_6}
+          {=ui_text($v_chaptersTitle)}
+        {/capture}
+        {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'base', 'Weight' => 'bold'], 'children' => $c_6])|noescape}
+        {capture $c_10}
+          {foreach ui_l($v_chapters) as $v_c}
+            {capture $c_9}
+              {capture $c_7}
+                {=ui_text(ui_get($v_c, ['title']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_7])|noescape}
+              {capture $c_8}
+                {=ui_text(ui_get($v_c, ['text']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_8])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-baseline gap-4', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_9])|noescape}
+          {/foreach}
+        {/capture}
+        {=ui_include('ui/list/list.latte', ['p' => ['Class' => 'm-0 flex list-none flex-col gap-2 p-0'], 'children' => $c_10])|noescape}
+      {/capture}
+      {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2', 'Attrs' => ui_attrs(['data-testid', 'chapters'])], 'children' => $c_11])|noescape}
+    {/if}
+  {/capture}
+  {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Align' => 'stretch', 'Class' => ui_s(ui_cnv(['mx-auto w-full', (ui_t(ui_eq($v_size, 'wide')) ? 'max-w-4xl' : 'max-w-2xl'), 'rounded bg-card inset-ring inset-ring-border p-4 shadow-lg'])), 'Attrs' => ui_attrs(['role', 'dialog', 'aria-label', $v_title, 'data-testid', 'video-modal'])], 'children' => $c_12])|noescape}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'tone' => $v_tone, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_13])|noescape}
diff --git a/packages/latte/ui/blocks/weighted-title.latte b/packages/latte/ui/blocks/weighted-title.latte
new file mode 100644
index 0000000..2fe6d9d
--- /dev/null
+++ b/packages/latte/ui/blocks/weighted-title.latte
@@ -0,0 +1,19 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/weighted-title.json
+    A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text.
+    Props (p): id, title, weights, level. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_weights = ($p['weights'] ?? null)}
+{var $v_level = ($p['level'] ?? 1)}
+{capture $c_2}
+  {foreach ui_l(ui_words($v_title)) as $v_word}
+    {var $v_i = $iterator->counter0}
+    {capture $c_1}
+      {=ui_text($v_word)}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => ui_s(ui_nth($v_weights, $v_i))], 'children' => $c_1])|noescape}
+    {=ui_text(' ')}
+  {/foreach}
+{/capture}
+{=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i($v_level), 'Size' => '5xl', 'Weight' => 'semibold', 'Class' => ui_s(ui_cnv(['text-center tracking-tight text-background', ui_preset('blocks/presets/defaults.json', ['hero', 'title'])])), 'Attrs' => ui_attrs(['id', $v_id])], 'children' => $c_2])|noescape}
diff --git a/packages/latte/ui/blocks/zone-rows.latte b/packages/latte/ui/blocks/zone-rows.latte
new file mode 100644
index 0000000..b1ba04d
--- /dev/null
+++ b/packages/latte/ui/blocks/zone-rows.latte
@@ -0,0 +1,93 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/zone-rows.json
+    The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the minimum order, the time and an express badge.
+    Props (p): zones, labels. *}
+{var $v_zones = ($p['zones'] ?? null)}
+{var $v_labels = ($p['labels'] ?? null)}
+{capture $c_23}
+  {capture $c_22}
+    {capture $c_1}
+      {=ui_text(ui_get($v_labels, ['caption']))}
+    {/capture}
+    {=ui_include('ui/table/table-caption.latte', ['p' => ['Class' => 'sr-only'], 'children' => $c_1])|noescape}
+    {capture $c_9}
+      {capture $c_8}
+        {capture $c_2}
+          {=ui_text(ui_get($v_labels, ['zone']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'px-4 py-2'], 'children' => $c_2])|noescape}
+        {capture $c_3}
+          {=ui_text(ui_get($v_labels, ['price']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_3])|noescape}
+        {capture $c_4}
+          {=ui_text(ui_get($v_labels, ['freeFrom']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_4])|noescape}
+        {capture $c_5}
+          {=ui_text(ui_get($v_labels, ['minOrder']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'hidden py-2 md:table-cell'], 'children' => $c_5])|noescape}
+        {capture $c_6}
+          {=ui_text(ui_get($v_labels, ['time']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'py-2'], 'children' => $c_6])|noescape}
+        {capture $c_7}
+          {=ui_text(ui_get($v_labels, ['express']))}
+        {/capture}
+        {=ui_include('ui/table/table-head-cell.latte', ['p' => ['Scope' => 'col', 'Class' => 'hidden py-2 pr-4 sm:table-cell'], 'children' => $c_7])|noescape}
+      {/capture}
+      {=ui_include('ui/table/table-row.latte', ['p' => [], 'children' => $c_8])|noescape}
+    {/capture}
+    {=ui_include('ui/table/table-head.latte', ['p' => ['Class' => 'bg-muted'], 'children' => $c_9])|noescape}
+    {capture $c_21}
+      {foreach ui_l($v_zones) as $v_z}
+        {capture $c_20}
+          {capture $c_13}
+            {capture $c_12}
+              {capture $c_10}
+                {=ui_text(ui_get($v_z, ['name']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Weight' => 'semibold'], 'children' => $c_10])|noescape}
+              {capture $c_11}
+                {=ui_text(ui_get($v_z, ['area']))}
+              {/capture}
+              {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'xs', 'Class' => 'text-muted-foreground'], 'children' => $c_11])|noescape}
+            {/capture}
+            {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '0'], 'children' => $c_12])|noescape}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'px-4 py-4'], 'children' => $c_13])|noescape}
+          {capture $c_14}
+            {=ui_text(ui_money(ui_get($v_z, ['price']), ui_get($v_z, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'font-medium'], 'children' => $c_14])|noescape}
+          {capture $c_15}
+            {=ui_text(ui_money(ui_get($v_z, ['freeFrom']), ui_get($v_z, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => [], 'children' => $c_15])|noescape}
+          {capture $c_16}
+            {=ui_text(ui_money(ui_get($v_z, ['minOrder']), ui_get($v_z, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'hidden md:table-cell'], 'children' => $c_16])|noescape}
+          {capture $c_17}
+            {=ui_text(ui_get($v_z, ['time']))}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => [], 'children' => $c_17])|noescape}
+          {capture $c_19}
+            {if ui_t(ui_get($v_z, ['express']))}
+              {capture $c_18}
+                {=ui_text(ui_get($v_z, ['express']))}
+              {/capture}
+              {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'default'], 'children' => $c_18])|noescape}
+            {/if}
+          {/capture}
+          {=ui_include('ui/table/table-cell.latte', ['p' => ['Class' => 'hidden pr-4 sm:table-cell'], 'children' => $c_19])|noescape}
+        {/capture}
+        {=ui_include('ui/table/table-row.latte', ['p' => ['Class' => 'border-t border-border', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_20])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/table/table-body.latte', ['p' => [], 'children' => $c_21])|noescape}
+  {/capture}
+  {=ui_include('ui/table/table.latte', ['p' => ['Class' => 'w-full text-left text-sm', 'Attrs' => ui_attrs(['data-testid', 'zone-table'])], 'children' => $c_22])|noescape}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'w-full overflow-x-auto rounded inset-ring inset-ring-border'], 'children' => $c_23])|noescape}
diff --git a/packages/latte/ui/blocks/zone-table.latte b/packages/latte/ui/blocks/zone-table.latte
new file mode 100644
index 0000000..232a38b
--- /dev/null
+++ b/packages/latte/ui/blocks/zone-table.latte
@@ -0,0 +1,88 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/zone-table.json
+    Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.
+    Props (p): id, title, lead, zones, empty, labels, layout, tone, density, landmarkLabel. *}
+{var $v_id = ($p['id'] ?? null)}
+{var $v_title = ($p['title'] ?? null)}
+{var $v_lead = ($p['lead'] ?? '')}
+{var $v_zones = ($p['zones'] ?? null)}
+{var $v_empty = ($p['empty'] ?? '')}
+{var $v_labels = ($p['labels'] ?? null)}
+{var $v_layout = ($p['layout'] ?? 'table')}
+{var $v_tone = ($p['tone'] ?? 'default')}
+{var $v_density = ($p['density'] ?? 'default')}
+{var $v_landmarkLabel = ($p['landmarkLabel'] ?? null)}
+{capture $c_18}
+  {if ui_t(ui_eq(ui_len($v_zones), 0))}
+    {=ui_include('blocks/empty-state.latte', ['p' => ['icon' => 'map', 'title' => $v_empty]])|noescape}
+  {elseif ui_t(ui_eq($v_layout, 'table'))}
+    {=ui_include('blocks/zone-rows.latte', ['p' => ['zones' => $v_zones, 'labels' => $v_labels]])|noescape}
+  {else}
+    {capture $c_17}
+      {foreach ui_l($v_zones) as $v_z}
+        {capture $c_16}
+          {capture $c_3}
+            {capture $c_1}
+              {=ui_text(ui_get($v_z, ['name']))}
+            {/capture}
+            {=ui_include('ui/title/title.latte', ['p' => ['As' => ui_i(3), 'Size' => 'lg', 'Weight' => 'bold'], 'children' => $c_1])|noescape}
+            {capture $c_2}
+              {=ui_text(ui_get($v_z, ['area']))}
+            {/capture}
+            {=ui_include('ui/text/text.latte', ['p' => ['Size' => 'sm', 'Class' => 'text-muted-foreground'], 'children' => $c_2])|noescape}
+          {/capture}
+          {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '2'], 'children' => $c_3])|noescape}
+          {capture $c_4}
+            {=ui_text(ui_money(ui_get($v_z, ['price']), ui_get($v_z, ['currency'])))}
+          {/capture}
+          {=ui_include('ui/text/text.latte', ['p' => ['Size' => '3xl', 'Weight' => 'bold'], 'children' => $c_4])|noescape}
+          {capture $c_14}
+            {capture $c_7}
+              {capture $c_5}
+                {=ui_text(ui_get($v_labels, ['freeFrom']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-muted-foreground'], 'children' => $c_5])|noescape}
+              {capture $c_6}
+                {=ui_text(ui_money(ui_get($v_z, ['freeFrom']), ui_get($v_z, ['currency'])))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'font-medium'], 'children' => $c_6])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center justify-between gap-4 text-sm'], 'children' => $c_7])|noescape}
+            {capture $c_10}
+              {capture $c_8}
+                {=ui_text(ui_get($v_labels, ['minOrder']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-muted-foreground'], 'children' => $c_8])|noescape}
+              {capture $c_9}
+                {=ui_text(ui_money(ui_get($v_z, ['minOrder']), ui_get($v_z, ['currency'])))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'font-medium'], 'children' => $c_9])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center justify-between gap-4 text-sm'], 'children' => $c_10])|noescape}
+            {capture $c_13}
+              {capture $c_11}
+                {=ui_text(ui_get($v_labels, ['time']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'text-muted-foreground'], 'children' => $c_11])|noescape}
+              {capture $c_12}
+                {=ui_text(ui_get($v_z, ['time']))}
+              {/capture}
+              {=ui_include('ui/inline/inline.latte', ['p' => ['Class' => 'font-medium'], 'children' => $c_12])|noescape}
+            {/capture}
+            {=ui_include('ui/list/list-item.latte', ['p' => ['Class' => 'flex items-center justify-between gap-4 text-sm'], 'children' => $c_13])|noescape}
+          {/capture}
+          {=ui_include('ui/list/list.latte', ['p' => ['Tag' => 'ul', 'Class' => 'flex flex-col gap-2 border-t border-border pt-4'], 'children' => $c_14])|noescape}
+          {if ui_t(ui_get($v_z, ['express']))}
+            {capture $c_15}
+              {=ui_text(ui_get($v_z, ['express']))}
+            {/capture}
+            {=ui_include('ui/badge/badge.latte', ['p' => ['Variant' => 'secondary', 'Size' => 'default', 'Class' => 'w-fit'], 'children' => $c_15])|noescape}
+          {/if}
+        {/capture}
+        {=ui_include('ui/stack/stack.latte', ['p' => ['Gap' => '4', 'Class' => 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs' => ui_attrs(['data-testid', 'item'])], 'children' => $c_16])|noescape}
+      {/foreach}
+    {/capture}
+    {=ui_include('ui/grid/grid.latte', ['p' => ['Cols' => '1-3', 'Class' => 'gap-4', 'Attrs' => ui_attrs(['data-testid', 'items'])], 'children' => $c_17])|noescape}
+  {/if}
+{/capture}
+{=ui_include('blocks/section-frame.latte', ['p' => ['id' => $v_id, 'title' => $v_title, 'lead' => $v_lead, 'tone' => $v_tone, 'density' => $v_density, 'landmarkLabel' => $v_landmarkLabel], 'children' => $c_18])|noescape}
diff --git a/packages/latte/ui/composer.json b/packages/latte/ui/composer.json
new file mode 100644
index 0000000..6b51683
--- /dev/null
+++ b/packages/latte/ui/composer.json
@@ -0,0 +1,15 @@
+{
+  "name": "ui8kit/latte-ui",
+  "description": "Latte templates of ui8kit (40 bricks, 72 parts) generated by xgen from xgen/specs. Code generated by xgen. DO NOT EDIT.",
+  "type": "library",
+  "license": "MIT",
+  "require": {
+    "php": ">=8.2",
+    "latte/latte": "^3.0"
+  },
+  "autoload": {
+    "psr-4": {
+      "UI8Kit\\Latte\\": "php/"
+    }
+  }
+}
diff --git a/packages/latte/ui/package.json b/packages/latte/ui/package.json
new file mode 100644
index 0000000..e677f93
--- /dev/null
+++ b/packages/latte/ui/package.json
@@ -0,0 +1,126 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "@ui8kit/latte-ui",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Latte templates (40 bricks, 72 parts) generated by xgen from xgen/specs; PHP runtime in php/ (composer package ui8kit/latte-ui).",
+  "ui8kit": {
+    "runtime": "latte",
+    "generated": true,
+    "kit": [
+      "ui",
+      "php"
+    ],
+    "composition": [
+      "blocks"
+    ],
+    "blockRoot": [
+      "blocks/about-company.latte",
+      "blocks/about-me.latte",
+      "blocks/activity-feed.latte",
+      "blocks/announcement-bar.latte",
+      "blocks/app-shell.latte",
+      "blocks/article-body.latte",
+      "blocks/auth-card.latte",
+      "blocks/auth-layout.latte",
+      "blocks/before-after.latte",
+      "blocks/bento-grid.latte",
+      "blocks/bottom-nav.latte",
+      "blocks/cart-drawer.latte",
+      "blocks/cart-list.latte",
+      "blocks/category-nav.latte",
+      "blocks/chart-panel.latte",
+      "blocks/checklist.latte",
+      "blocks/checkout-form.latte",
+      "blocks/comparison-table.latte",
+      "blocks/contact-form.latte",
+      "blocks/cookie-banner.latte",
+      "blocks/credit-packs.latte",
+      "blocks/cta-band.latte",
+      "blocks/cta-banner.latte",
+      "blocks/cta-proof.latte",
+      "blocks/dashboard-overview.latte",
+      "blocks/dashboard-shell.latte",
+      "blocks/delivery-info.latte",
+      "blocks/empty-panel.latte",
+      "blocks/error-page.latte",
+      "blocks/faq-help.latte",
+      "blocks/faq-list.latte",
+      "blocks/faq-split.latte",
+      "blocks/feature-accordion.latte",
+      "blocks/feature-grid.latte",
+      "blocks/feature-showcase.latte",
+      "blocks/feature-split.latte",
+      "blocks/feature-sticky.latte",
+      "blocks/feature-tabs.latte",
+      "blocks/footer-card.latte",
+      "blocks/footer-split.latte",
+      "blocks/hero-classic.latte",
+      "blocks/hero-head.latte",
+      "blocks/hero-prompt.latte",
+      "blocks/hero-split.latte",
+      "blocks/icon-wall.latte",
+      "blocks/job-board.latte",
+      "blocks/kanban-board.latte",
+      "blocks/logo-cloud.latte",
+      "blocks/logo-ribbon.latte",
+      "blocks/media-list.latte",
+      "blocks/mega-menu.latte",
+      "blocks/metric-row.latte",
+      "blocks/milestone-timeline.latte",
+      "blocks/nav-bar.latte",
+      "blocks/newsletter-form.latte",
+      "blocks/order-summary.latte",
+      "blocks/order-table.latte",
+      "blocks/page-intro.latte",
+      "blocks/page-trail.latte",
+      "blocks/photo-gallery.latte",
+      "blocks/post-card.latte",
+      "blocks/post-grid.latte",
+      "blocks/post-header.latte",
+      "blocks/post-showcase.latte",
+      "blocks/post-split.latte",
+      "blocks/pricing-card.latte",
+      "blocks/pricing-tiers.latte",
+      "blocks/product-card.latte",
+      "blocks/product-detail.latte",
+      "blocks/product-grid.latte",
+      "blocks/product-info.latte",
+      "blocks/profile-form.latte",
+      "blocks/project-grid.latte",
+      "blocks/proof-band.latte",
+      "blocks/quote-split.latte",
+      "blocks/region.latte",
+      "blocks/review-list.latte",
+      "blocks/section-frame.latte",
+      "blocks/shell-footer.latte",
+      "blocks/shell-sidebar.latte",
+      "blocks/shell-topbar.latte",
+      "blocks/shopping-cart.latte",
+      "blocks/sidebar-nav.latte",
+      "blocks/sidebar-panel.latte",
+      "blocks/signup-wizard.latte",
+      "blocks/site-footer.latte",
+      "blocks/site-header.latte",
+      "blocks/sitemap-footer.latte",
+      "blocks/skeleton-layout.latte",
+      "blocks/slot-board.latte",
+      "blocks/stats-band.latte",
+      "blocks/stepper.latte",
+      "blocks/steps-list.latte",
+      "blocks/store-hero.latte",
+      "blocks/store-locations.latte",
+      "blocks/story-tabs.latte",
+      "blocks/support-channels.latte",
+      "blocks/team-grid.latte",
+      "blocks/template-grid.latte",
+      "blocks/testimonial-grid.latte",
+      "blocks/tour-callout.latte",
+      "blocks/usage-calculator.latte",
+      "blocks/usp-strip.latte",
+      "blocks/video-grid.latte",
+      "blocks/video-modal.latte",
+      "blocks/zone-table.latte"
+    ]
+  }
+}
diff --git a/packages/latte/ui/php/CnMerge.php b/packages/latte/ui/php/CnMerge.php
new file mode 100644
index 0000000..b756928
--- /dev/null
+++ b/packages/latte/ui/php/CnMerge.php
@@ -0,0 +1,235 @@
+<?php
+
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/twig/assets/php-shared/CnMerge.php
+
+declare(strict_types=1);
+
+namespace UI8Kit\Latte;
+
+/**
+ * cn: clsx-joined class fragments with tailwind-merge conflict resolution (the last class of a group wins, and a
+ * class removes the earlier classes of the groups it overrides: p-2 removes px-4, not the reverse). Port of cn_merge.go.
+ */
+final class CnMerge
+{
+    public static function merge(array $classes): string
+    {
+        $tokens = [];
+        foreach ($classes as $chunk) {
+            foreach (preg_split('/\s+/', trim((string) $chunk)) ?: [] as $t) {
+                if ($t !== '') {
+                    $tokens[] = $t;
+                }
+            }
+        }
+        $kept = [];
+        foreach ($tokens as $token) {
+            [$prefix, $key, $removes] = self::classKey($token);
+            if ($key !== '') {
+                $drop = [$key => true];
+                foreach ($removes as $g) {
+                    $drop[$prefix . $g] = true;
+                }
+                $kept = array_values(array_filter($kept, fn ($it) => !isset($drop[$it[1]])));
+            }
+            $kept[] = [$token, $key];
+        }
+        return implode(' ', array_map(fn ($it) => $it[0], $kept));
+    }
+
+    private static function classKey(string $token): array
+    {
+        [$prefix, $core] = self::splitVariant($token);
+        if ($core === '') {
+            return ['', '', []];
+        }
+        $groups = self::utilityGroups($core);
+        if (!$groups) {
+            return [$prefix, '=' . $token, []];
+        }
+        return [$prefix, $prefix . $groups[0], array_slice($groups, 1)];
+    }
+
+    private static function splitVariant(string $token): array
+    {
+        $depth = 0;
+        $cut = -1;
+        $n = strlen($token);
+        for ($i = 0; $i < $n; $i++) {
+            $c = $token[$i];
+            if ($c === '[') {
+                $depth++;
+            } elseif ($c === ']') {
+                if ($depth > 0) {
+                    $depth--;
+                }
+            } elseif ($c === ':' && $depth === 0) {
+                $cut = $i;
+            }
+        }
+        if ($cut === -1) {
+            return ['', self::noBang($token)];
+        }
+        return [substr($token, 0, $cut + 1), self::noBang(substr($token, $cut + 1))];
+    }
+
+    private static function noBang(string $s): string
+    {
+        return str_starts_with($s, '!') ? substr($s, 1) : $s;
+    }
+
+    private static function utilityGroups(string $core): array
+    {
+        switch ($core) {
+            case 'block': case 'inline': case 'inline-block': case 'inline-flex': case 'flex': case 'grid': case 'contents': case 'hidden':
+                return ['display'];
+            case 'flex-row': case 'flex-col': case 'flex-row-reverse': case 'flex-col-reverse':
+                return ['flex-direction'];
+            case 'static': case 'relative': case 'absolute': case 'fixed': case 'sticky':
+                return ['position'];
+            case 'isolate': case 'isolation-auto':
+                return ['isolation'];
+        }
+        foreach (['inset-ring', 'ring'] as $kind) {
+            if ($core === $kind) {
+                return [$kind . '-width'];
+            }
+            if (str_starts_with($core, $kind . '-')) {
+                $rest = substr($core, strlen($kind) + 1);
+                return [self::isNumber($rest) ? $kind . '-width' : $kind . '-color'];
+            }
+        }
+        $prefixes = [
+            ['gap-x-', 'gap-x'], ['gap-y-', 'gap-y'], ['items-', 'align-items'], ['justify-', 'justify-content'],
+            ['self-', 'align-self'], ['content-', 'align-content'], ['overflow-x-', 'overflow-x'], ['overflow-y-', 'overflow-y'],
+            ['inset-x-', 'inset-x'], ['inset-y-', 'inset-y'], ['min-w-', 'min-width'], ['min-h-', 'min-height'],
+            ['max-w-', 'max-width'], ['max-h-', 'max-height'], ['shadow-', 'shadow'], ['ring-', 'ring'], ['rounded-', 'rounded'],
+            ['leading-', 'leading'], ['tracking-', 'tracking'], ['opacity-', 'opacity'], ['z-', 'z'], ['top-', 'top'],
+            ['right-', 'right'], ['bottom-', 'bottom'], ['left-', 'left'],
+        ];
+        foreach ($prefixes as [$p, $g]) {
+            if (str_starts_with($core, $p)) {
+                return [$g];
+            }
+        }
+        if (str_starts_with($core, 'gap-')) {
+            return ['gap', 'gap-x', 'gap-y'];
+        }
+        if (str_starts_with($core, 'inset-')) {
+            return ['inset', 'inset-x', 'inset-y', 'top', 'right', 'bottom', 'left'];
+        }
+        if (str_starts_with($core, 'overflow-')) {
+            return ['overflow', 'overflow-x', 'overflow-y'];
+        }
+        if ($core === 'border' || (str_starts_with($core, 'border-') && self::isNumber(substr($core, 7)))) {
+            return ['border-width', 'border-w-x', 'border-w-y', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l', 'border-w-s', 'border-w-e'];
+        }
+        if (strlen($core) >= 8 && str_starts_with($core, 'border-') && str_contains('xytrblse', $core[7])
+            && (strlen($core) === 8 || ($core[8] === '-' && self::isNumber(substr($core, 9))))) {
+            $side = $core[7];
+            if ($side === 'x') {
+                return ['border-w-x', 'border-w-r', 'border-w-l', 'border-w-s', 'border-w-e'];
+            }
+            if ($side === 'y') {
+                return ['border-w-y', 'border-w-t', 'border-w-b'];
+            }
+            return ['border-w-' . $side];
+        }
+        if (in_array($core, ['text-left', 'text-center', 'text-right', 'text-justify', 'text-start', 'text-end'], true)) {
+            return ['text-align'];
+        }
+        if ($core === 'rounded') {
+            return ['rounded'];
+        }
+        if ($core === 'shadow' || $core === 'shadow-none') {
+            return ['shadow'];
+        }
+        if (in_array($core, ['flex-1', 'flex-auto', 'flex-none', 'flex-initial'], true)) {
+            return ['flex-size', 'flex-grow', 'flex-shrink', 'flex-basis'];
+        }
+        if ($core === 'grow' || str_starts_with($core, 'grow-')) {
+            return ['flex-grow'];
+        }
+        if ($core === 'shrink' || $core === 'shrink-0') {
+            return ['flex-shrink'];
+        }
+        if (str_starts_with($core, 'size-')) {
+            return ['size', 'width', 'height'];
+        }
+        if (str_starts_with($core, 'w-')) {
+            return ['width'];
+        }
+        if (str_starts_with($core, 'h-')) {
+            return ['height'];
+        }
+        foreach (['p' => 'padding', 'm' => 'margin'] as $kind => $name) {
+            if (str_starts_with($core, $kind . '-') && !self::hasDirectionPrefix($core, $kind)) {
+                return [$name, "$name-x", "$name-y", "$name-t", "$name-r", "$name-b", "$name-l", "$name-s", "$name-e"];
+            }
+            $axis = self::spaceAxis($core, $kind, $name);
+            if ($axis) {
+                return $axis;
+            }
+        }
+        if (str_starts_with($core, 'bg-')) {
+            return ['bg'];
+        }
+        if (self::isTextSize($core)) {
+            return ['text-size', 'leading'];
+        }
+        if (str_starts_with($core, 'text-')) {
+            return ['text-color'];
+        }
+        if (in_array($core, ['font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black'], true)) {
+            return ['font-weight'];
+        }
+        return [];
+    }
+
+    private static function hasDirectionPrefix(string $core, string $kind): bool
+    {
+        foreach (['x-', 'y-', 't-', 'r-', 'b-', 'l-', 's-', 'e-'] as $d) {
+            if (str_starts_with($core, $kind . $d)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private static function spaceAxis(string $core, string $kind, string $n): array
+    {
+        if (str_starts_with($core, $kind . 'x-')) {
+            return ["$n-x", "$n-r", "$n-l", "$n-s", "$n-e"];
+        }
+        if (str_starts_with($core, $kind . 'y-')) {
+            return ["$n-y", "$n-t", "$n-b"];
+        }
+        foreach (['t', 'r', 'b', 'l'] as $s) {
+            if (str_starts_with($core, $kind . $s . '-')) {
+                return ["$n-$s"];
+            }
+        }
+        return [];
+    }
+
+    private static function isTextSize(string $core): bool
+    {
+        if (in_array($core, ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl', 'text-6xl', 'text-7xl', 'text-8xl', 'text-9xl'], true)) {
+            return true;
+        }
+        if (str_starts_with($core, 'text-[')) {
+            $rest = substr($core, 6);
+            return $rest !== '' && (ctype_digit($rest[0]) || $rest[0] === '.');
+        }
+        return false;
+    }
+
+    private static function isNumber(string $s): bool
+    {
+        if (str_starts_with($s, '[')) {
+            return true;
+        }
+        return $s !== '' && strspn($s, '0123456789.') === strlen($s);
+    }
+}
diff --git a/packages/latte/ui/php/Extension.php b/packages/latte/ui/php/Extension.php
new file mode 100644
index 0000000..7009932
--- /dev/null
+++ b/packages/latte/ui/php/Extension.php
@@ -0,0 +1,59 @@
+<?php
+
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/latte/assets/php/Extension.php
+
+declare(strict_types=1);
+
+namespace UI8Kit\Latte;
+
+use Latte\Engine;
+use Latte\Loaders\FileLoader;
+use Latte\Runtime\Html;
+
+/**
+ * The ui_* functions of the generated templates. engine() makes a Latte Engine over the package folder (templates are
+ * rendered as ui/<brick>/<part>.latte and blocks/<organism>.latte) with the functions registered. ui_include renders
+ * another template with only the given variables and returns its markup.
+ */
+final class Extension extends \Latte\Extension
+{
+    private Runtime $rt;
+
+    public function __construct(string $root, private readonly Engine $engine)
+    {
+        $this->rt = new Runtime($root);
+    }
+
+    /** an Engine over the package folder with the extension added; templates compile to $tempDir when given, else in memory */
+    public static function engine(string $root, ?string $tempDir = null): Engine
+    {
+        $latte = new Engine();
+        $latte->setLoader(new FileLoader($root));
+        $latte->setTempDirectory($tempDir);
+        $latte->addExtension(new self($root, $latte));
+        return $latte;
+    }
+
+    public function getFunctions(): array
+    {
+        $static = [
+            'get', 'field', 's', 'text', 't', 'n', 'i', 'eq', 'lt', 'gt', 'le', 'ge', 'add', 'sub', 'mul', 'div', 'and', 'or',
+            'coalesce', 'def', 'l', 'len', 'spread', 'str', 'has', 'cnv', 'tpl', 'num', 'money', 'at', 'page_window',
+            'fit_cols', 'uniq', 'words', 'nbsp', 'nth', 'range', 'max', 'min', 'round', 'count', 'where', 'match', 'pick',
+            'sum_by', 'first_of', 'max_by', 'css', 'attrs', 'is_set_str', 'default_if_empty', 'map_or', 'int_map_or',
+            'bool_str', 'concat_trim', 'cn', 'resolve_tag', 'title_tag',
+        ];
+        $fns = [];
+        foreach ($static as $name) {
+            $fns['ui_' . $name] = [Runtime::class, lcfirst(str_replace('_', '', ucwords($name, '_')))];
+        }
+        $fns['ui_attr_html'] = fn (mixed $a): Html => new Html(Runtime::attrHtml($a));
+        $fns['ui_compose'] = [$this->rt, 'compose'];
+        $fns['ui_recipe'] = [$this->rt, 'recipe'];
+        $fns['ui_preset'] = [$this->rt, 'preset'];
+        $fns['ui_lucide'] = fn (mixed $name): Html => new Html($this->rt->lucide($name));
+        $fns['ui_include'] = fn (string $template, array $vars = []): Html => new Html($this->engine->renderToString($template, $vars));
+        return $fns;
+    }
+}
diff --git a/packages/latte/ui/php/Runtime.php b/packages/latte/ui/php/Runtime.php
new file mode 100644
index 0000000..2cf2fc0
--- /dev/null
+++ b/packages/latte/ui/php/Runtime.php
@@ -0,0 +1,737 @@
+<?php
+
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/twig/assets/php-shared/Runtime.php
+
+declare(strict_types=1);
+
+namespace UI8Kit\Latte;
+
+/**
+ * The helpers of the generated templates. Values are the JSON shapes of the TypeScript props (string, int/float,
+ * bool, null, list, map) and are read with the rules of the TypeScript output: JS truthiness, strict equality,
+ * String(), clsx + tailwind-merge. Every helper is null-safe, like `?.`. Port of the Go runtime (dyn.go, expr.go,
+ * utils.go) so all static runtimes print the same DOM.
+ */
+final class Runtime
+{
+    /** @var array<string, mixed> parsed JSON files (recipes, presets, the Lucide registry) */
+    private array $json = [];
+
+    public function __construct(private readonly string $root)
+    {
+    }
+
+    public function json(string $path): mixed
+    {
+        if (!array_key_exists($path, $this->json)) {
+            $text = file_get_contents($this->root . '/' . $path);
+            if ($text === false) {
+                throw new \RuntimeException("ui8kit: cannot read $path");
+            }
+            $this->json[$path] = json_decode($text, true, 512, JSON_THROW_ON_ERROR);
+        }
+        return $this->json[$path];
+    }
+
+    // ---------------------------------------------------------------- values
+
+    private static function isNum(mixed $v): bool
+    {
+        return is_int($v) || is_float($v);
+    }
+
+    /** a path of fields: get(plan, ['price', 'amount']); `length` of a list or a text is its size */
+    public static function get(mixed $v, array $path): mixed
+    {
+        foreach ($path as $k) {
+            $k = (string) $k;
+            if (is_array($v)) {
+                if (array_is_list($v) && ($k === 'length' || ctype_digit($k))) {
+                    if ($k === 'length') {
+                        $v = count($v);
+                    } else {
+                        $v = $v[(int) $k] ?? null;
+                    }
+                } else {
+                    $v = $v[$k] ?? null;
+                }
+            } elseif (is_string($v) && $k === 'length') {
+                $v = mb_strlen($v);
+            } else {
+                return null;
+            }
+        }
+        return $v;
+    }
+
+    /** a field of a brick record (BreadcrumbItem): the JSON key matched without regard to case, as Go json does */
+    public static function field(mixed $item, string $name, mixed $zero): mixed
+    {
+        if (!is_array($item)) {
+            return $zero;
+        }
+        if (array_key_exists($name, $item)) {
+            return $item[$name] ?? $zero;
+        }
+        foreach ($item as $k => $v) {
+            if (strcasecmp((string) $k, $name) === 0) {
+                return $v ?? $zero;
+            }
+        }
+        return $zero;
+    }
+
+    /** String(n) of JavaScript for the numbers the views print: 3, 2.5, -1 */
+    public static function fmtNum(int|float $f): string
+    {
+        if (is_int($f)) {
+            return (string) $f;
+        }
+        if (is_nan($f)) {
+            return 'NaN';
+        }
+        if (is_infinite($f)) {
+            return $f > 0 ? 'Infinity' : '-Infinity';
+        }
+        if ($f == floor($f) && abs($f) < 1e21) {
+            return sprintf('%.0f', $f);
+        }
+        return json_encode($f);
+    }
+
+    public static function s(mixed $v): string
+    {
+        if ($v === null) {
+            return '';
+        }
+        if (is_string($v)) {
+            return $v;
+        }
+        if (is_bool($v)) {
+            return $v ? 'true' : 'false';
+        }
+        if (self::isNum($v)) {
+            return self::fmtNum($v);
+        }
+        if ($v instanceof \Stringable) {
+            return (string) $v;
+        }
+        return json_encode($v, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
+    }
+
+    /** what a text node shows: nothing for null and booleans */
+    public static function text(mixed $v): string
+    {
+        return is_bool($v) ? '' : self::s($v);
+    }
+
+    /** JS truthiness: null, false, 0, NaN and '' are false */
+    public static function t(mixed $v): bool
+    {
+        if ($v === null) {
+            return false;
+        }
+        if (is_bool($v)) {
+            return $v;
+        }
+        if (is_string($v)) {
+            return $v !== '';
+        }
+        if (self::isNum($v)) {
+            return $v != 0 && !is_nan((float) $v);
+        }
+        if ($v instanceof \Stringable) {
+            return (string) $v !== '';
+        }
+        return true;
+    }
+
+    /** Number(v) */
+    public static function n(mixed $v): float
+    {
+        if (self::isNum($v)) {
+            return (float) $v;
+        }
+        if (is_string($v) && is_numeric(trim($v))) {
+            return (float) trim($v);
+        }
+        if (is_bool($v)) {
+            return $v ? 1.0 : 0.0;
+        }
+        return 0.0;
+    }
+
+    /** an int for an int prop of a brick */
+    public static function i(mixed $v): int
+    {
+        return (int) round(self::n($v));
+    }
+
+    /** strict equality (===) */
+    public static function eq(mixed $a, mixed $b): bool
+    {
+        $na = self::isNum($a);
+        $nb = self::isNum($b);
+        if ($na || $nb) {
+            return $na && $nb && (float) $a == (float) $b;
+        }
+        if ($a === null || is_string($a) || is_bool($a)) {
+            return $a === $b;
+        }
+        return false;
+    }
+
+    private static function cmp(mixed $a, mixed $b): ?int
+    {
+        if (is_string($a) && is_string($b)) {
+            return strcmp($a, $b) <=> 0;
+        }
+        if ($a === null || $b === null) {
+            return null;
+        }
+        return self::n($a) <=> self::n($b);
+    }
+
+    public static function lt(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c < 0; }
+    public static function gt(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c > 0; }
+    public static function le(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c <= 0; }
+    public static function ge(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c >= 0; }
+
+    /** `a + b`: text when either side is text, else a sum */
+    public static function add(mixed $a, mixed $b): string|float
+    {
+        if (is_string($a) || is_string($b)) {
+            return self::s($a) . self::s($b);
+        }
+        return self::n($a) + self::n($b);
+    }
+    public static function sub(mixed $a, mixed $b): float { return self::n($a) - self::n($b); }
+    public static function mul(mixed $a, mixed $b): float { return self::n($a) * self::n($b); }
+    public static function div(mixed $a, mixed $b): float { return fdiv(self::n($a), self::n($b)); }
+
+    /** the first falsy operand, else the last (JS &&) */
+    public static function and(array $vs): mixed
+    {
+        $last = null;
+        foreach ($vs as $v) {
+            if (!self::t($v)) {
+                return $v;
+            }
+            $last = $v;
+        }
+        return $last;
+    }
+
+    /** the first truthy operand, else the last (JS ||) */
+    public static function or(array $vs): mixed
+    {
+        $last = null;
+        foreach ($vs as $v) {
+            if (self::t($v)) {
+                return $v;
+            }
+            $last = $v;
+        }
+        return $last;
+    }
+
+    public static function coalesce(array $vs): mixed
+    {
+        foreach ($vs as $v) {
+            if ($v !== null) {
+                return $v;
+            }
+        }
+        return null;
+    }
+
+    /** a prop with its default: the default when the prop is null */
+    public static function def(mixed $v, mixed $d): mixed
+    {
+        return $v ?? $d;
+    }
+
+    /** a list to loop over; null and other values are empty */
+    public static function l(mixed $v): array
+    {
+        return is_array($v) && array_is_list($v) ? $v : [];
+    }
+
+    public static function len(mixed $v): int
+    {
+        if (is_string($v)) {
+            return mb_strlen($v);
+        }
+        return count(self::l($v));
+    }
+
+    /** a literal group with the fields of a named group first (`{ ...BASE, mode: "two" }`) */
+    public static function spread(mixed $base, array $fields): array
+    {
+        $out = is_array($base) && !array_is_list($base) ? $base : [];
+        foreach ($fields as $k => $v) {
+            $out[$k] = $v;
+        }
+        return $out;
+    }
+
+    /** String(x) with undefined kept undefined */
+    public static function str(mixed $v): ?string
+    {
+        return $v === null ? null : self::s($v);
+    }
+
+    public static function has(mixed $v): bool
+    {
+        return $v !== null;
+    }
+
+    /** cn over values: clsx skips the falsy ones, tailwind-merge resolves conflicts */
+    public static function cnv(array $vs): string
+    {
+        $parts = [];
+        foreach ($vs as $v) {
+            if (self::t($v)) {
+                $parts[] = self::s($v);
+            }
+        }
+        return CnMerge::merge($parts);
+    }
+
+    /** {0}, {1}... of a content template */
+    public static function tpl(mixed $t, array $vals): string
+    {
+        return preg_replace_callback('/\{(\d+)\}/', fn ($m) => (int) $m[1] < count($vals) ? self::s($vals[(int) $m[1]]) : '', self::s($t));
+    }
+
+    private static function group(float $f, int $decimals): string
+    {
+        $s = number_format(abs($f), $decimals, '.', '');
+        [$int, $frac] = array_pad(explode('.', $s, 2), 2, '');
+        $out = '';
+        $n = strlen($int);
+        for ($i = 0; $i < $n; $i++) {
+            if ($i > 0 && ($n - $i) % 3 === 0) {
+                $out .= ',';
+            }
+            $out .= $int[$i];
+        }
+        $frac = rtrim($frac, '0');
+        if ($frac !== '') {
+            $out .= '.' . $frac;
+        }
+        if ($f < 0 && $out !== '0') {
+            $out = '-' . $out;
+        }
+        return $out;
+    }
+
+    /** Intl.NumberFormat("en-US"): grouped, up to 3 decimals */
+    public static function num(mixed $v): string
+    {
+        return self::group(self::n($v), 3);
+    }
+
+    private const CURRENCY = ['USD' => '$', 'EUR' => "\u{20AC}", 'GBP' => "\u{00A3}", 'JPY' => "\u{00A5}", 'INR' => "\u{20B9}", 'CAD' => 'CA$', 'AUD' => 'A$'];
+
+    /** digits of the minor unit (ISO 4217): 2, or 0 for JPY and KRW */
+    public static function minorDigits(string $c): int
+    {
+        return in_array($c, ['JPY', 'KRW'], true) ? 0 : 2;
+    }
+
+    /** integer minor units (Codex v0.4: 1250 = 12.50) -> "$12.50"; whole amounts without the fraction: 149900 -> "$1,499" */
+    public static function money(mixed $amount, mixed $currency): string
+    {
+        $c = self::s($currency);
+        $sym = self::CURRENCY[$c] ?? $c . "\u{00A0}";
+        $minor = (int) round(self::n($amount));
+        $sign = $minor < 0 ? '-' : '';
+        $minor = abs($minor);
+        $d = self::minorDigits($c);
+        $unit = 10 ** $d;
+        $whole = intdiv($minor, $unit);
+        $rest = $minor % $unit;
+        $out = $sign . $sym . self::group((float) $whole, 0);
+        return $d > 0 && $rest !== 0 ? $out . '.' . str_pad((string) $rest, $d, '0', STR_PAD_LEFT) : $out;
+    }
+
+    /** a content word by key, the key itself when the dictionary has no entry */
+    public static function at(mixed $dict, mixed $key): string
+    {
+        $v = self::get($dict, [self::s($key)]);
+        return $v !== null ? self::s($v) : self::s($key);
+    }
+
+    /** the pages a pager shows: the first, the last and the neighbours of the current one; null is a gap */
+    public static function pageWindow(mixed $pageV, mixed $pagesV): array
+    {
+        $page = (int) self::n($pageV);
+        $pages = (int) self::n($pagesV);
+        $keep = [];
+        foreach ([1, $pages, $page - 1, $page, $page + 1] as $n) {
+            if ($n >= 1 && $n <= $pages) {
+                $keep[$n] = true;
+            }
+        }
+        $out = [];
+        $prev = 0;
+        for ($n = 1; $n <= $pages; $n++) {
+            if (!isset($keep[$n])) {
+                continue;
+            }
+            if ($n - $prev > 1) {
+                $out[] = null;
+            }
+            $out[] = $n;
+            $prev = $n;
+        }
+        return $out;
+    }
+
+    /** a responsive column variant capped by the number of items: ("1-4", 3) -> "1-3" */
+    public static function fitCols(mixed $colsV, mixed $nV): string
+    {
+        $cols = self::s($colsV);
+        $n = (int) self::n($nV);
+        if (!preg_match('/^(-?\d+)-(-?\d+)$/', $cols, $m)) {
+            return $cols;
+        }
+        [$l, $h] = [(int) $m[1], (int) $m[2]];
+        if ($n >= $h) {
+            return $cols;
+        }
+        $top = max($l, $n);
+        $known = ['1-2', '1-3', '1-4', '2-3', '2-4', '2-6', '3-6'];
+        for ($k = $top; $k > $l; $k--) {
+            if (in_array("$l-$k", $known, true)) {
+                return "$l-$k";
+            }
+        }
+        return (string) min(max($n, 1), $l);
+    }
+
+    /** drops a segment of a ", " label equal (case-insensitive) to the one before it */
+    public static function uniq(mixed $v): string
+    {
+        $parts = explode(', ', self::s($v));
+        $out = [];
+        foreach ($parts as $i => $s) {
+            if ($i === 0 || strcasecmp($s, $parts[$i - 1]) !== 0) {
+                $out[] = $s;
+            }
+        }
+        return implode(', ', $out);
+    }
+
+    public static function words(mixed $v): array
+    {
+        return explode(' ', self::s($v));
+    }
+
+    public static function nbsp(mixed $v): string
+    {
+        return str_replace(' ', "\u{00A0}", self::s($v));
+    }
+
+    public static function nth(mixed $list, mixed $i): mixed
+    {
+        $l = self::l($list);
+        $n = (int) self::n($i);
+        return $n >= 0 && $n < count($l) ? $l[$n] : null;
+    }
+
+    public static function range(mixed $n): array
+    {
+        $c = (int) self::n($n);
+        return $c > 0 ? range(0, $c - 1) : [];
+    }
+
+    public static function max(array $vs): float
+    {
+        $m = -INF;
+        foreach ($vs as $v) {
+            $m = max($m, self::n($v));
+        }
+        return $m;
+    }
+
+    public static function min(array $vs): float
+    {
+        $m = INF;
+        foreach ($vs as $v) {
+            $m = min($m, self::n($v));
+        }
+        return $m;
+    }
+
+    /** Math.round (halves up) */
+    public static function round(mixed $v): float
+    {
+        return floor(self::n($v) + 0.5);
+    }
+
+    public static function count(mixed $items, mixed $field): int
+    {
+        $n = 0;
+        foreach (self::l($items) as $it) {
+            if (self::t(self::get($it, [self::s($field)]))) {
+                $n++;
+            }
+        }
+        return $n;
+    }
+
+    public static function where(mixed $items, mixed $field, mixed $value): array
+    {
+        if (!self::t($value)) {
+            return self::l($items);
+        }
+        return array_values(array_filter(self::l($items), fn ($it) => self::eq(self::get($it, [self::s($field)]), $value)));
+    }
+
+    public static function match(mixed $items, mixed $field, mixed $query): array
+    {
+        if (!self::t($query)) {
+            return self::l($items);
+        }
+        $q = mb_strtolower(self::s($query));
+        return array_values(array_filter(self::l($items), fn ($it) => str_contains(mb_strtolower(self::s(self::get($it, [self::s($field)]))), $q)));
+    }
+
+    public static function pick(mixed $items, mixed $id): mixed
+    {
+        foreach (self::l($items) as $it) {
+            if (self::eq(self::get($it, ['id']), $id)) {
+                return $it;
+            }
+        }
+        return null;
+    }
+
+    public static function sumBy(mixed $items, string $a, string $b): float
+    {
+        $s = 0.0;
+        foreach (self::l($items) as $it) {
+            $s += self::n(self::get($it, [$a])) * self::n(self::get($it, [$b]));
+        }
+        return $s;
+    }
+
+    public static function firstOf(mixed $items, string $field): mixed
+    {
+        $l = self::l($items);
+        return $l ? (self::get($l[0], [$field]) ?? '') : '';
+    }
+
+    public static function maxBy(mixed $items, string $field): float
+    {
+        $m = 0.0;
+        foreach (self::l($items) as $it) {
+            $m = max($m, self::n(self::get($it, [$field])));
+        }
+        return $m;
+    }
+
+    /** an inline style from (property, value, unit) triples */
+    public static function css(array $triples): string
+    {
+        $parts = [];
+        for ($i = 0; $i + 2 < count($triples); $i += 3) {
+            $parts[] = self::s($triples[$i]) . ':' . self::s($triples[$i + 1]) . self::s($triples[$i + 2]);
+        }
+        return implode(';', $parts);
+    }
+
+    /** the class string of a recipe table for a selection (organisms: base, each key, the matching compounds) */
+    public function recipe(string $path, array $sel): string
+    {
+        $r = $this->json($path);
+        $pick = function (string $k) use ($r, $sel): string {
+            $v = trim(self::s($sel[$k] ?? null));
+            return $v !== '' ? $v : trim((string) ($r['defaults'][$k] ?? ''));
+        };
+        $parts = [(string) ($r['base'] ?? '')];
+        foreach ($r['keys'] ?? [] as $k) {
+            $parts[] = (string) ($r['byKey'][$k][$pick($k)] ?? '');
+        }
+        foreach ($r['compound'] ?? [] as $c) {
+            if (self::compoundHits($c, $pick)) {
+                $parts[] = (string) ($c['class'] ?? '');
+            }
+        }
+        return CnMerge::merge(array_filter(array_map('trim', $parts), fn ($p) => $p !== ''));
+    }
+
+    private static function compoundHits(array $c, callable $pick): bool
+    {
+        foreach ($c as $k => $want) {
+            if ($k === 'class') {
+                continue;
+            }
+            if (!in_array($pick((string) $k), explode('|', (string) $want), true)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    /** a preset value of the kit */
+    public function preset(string $path, array $keys): mixed
+    {
+        return self::get(self::get($this->json($path), ['values']), $keys);
+    }
+
+    /** free DOM attributes from (name, value) pairs, as React prints them */
+    public static function attrs(array $kv): array
+    {
+        $out = [];
+        for ($i = 0; $i + 1 < count($kv); $i += 2) {
+            $k = self::s($kv[$i]);
+            $v = $kv[$i + 1];
+            if ($v === null) {
+                continue;
+            }
+            if (is_bool($v)) {
+                if (str_starts_with($k, 'data-') || str_starts_with($k, 'aria-')) {
+                    $out[$k] = self::s($v);
+                } elseif ($v) {
+                    $out[$k] = true;
+                }
+                continue;
+            }
+            $out[$k] = self::s($v);
+        }
+        return $out;
+    }
+
+    /** an attribute map as markup (` name="value"`, a bare name for true, nothing for null and false) */
+    public static function attrHtml(mixed $attrs): string
+    {
+        if (!is_array($attrs)) {
+            return '';
+        }
+        $out = '';
+        foreach ($attrs as $k => $v) {
+            if ($v === null || $v === false) {
+                continue;
+            }
+            $name = htmlspecialchars((string) $k, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
+            $out .= $v === true ? " $name" : " $name=\"" . htmlspecialchars(self::s($v), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') . '"';
+        }
+        return $out;
+    }
+
+    // ---------------------------------------------------------------- bricks (expr.go, utils.go, tags.go)
+
+    public static function isSetStr(mixed $v): bool
+    {
+        return trim(self::s($v)) !== '';
+    }
+
+    public static function defaultIfEmpty(mixed $v, string $fallback): string
+    {
+        $t = trim(self::s($v));
+        return $t === '' ? $fallback : $t;
+    }
+
+    /** a decision table over a trimmed text: mapping[trim(v)] or the fallback */
+    public static function mapOr(mixed $v, array $mapping, string $fallback, bool $lower = false): string
+    {
+        $t = trim(self::s($v));
+        if ($lower) {
+            $t = strtolower($t);
+        }
+        return array_key_exists($t, $mapping) ? (string) $mapping[$t] : $fallback;
+    }
+
+    public static function intMapOr(mixed $v, array $mapping, string $fallback): string
+    {
+        $n = self::i($v);
+        return array_key_exists($n, $mapping) ? (string) $mapping[$n] : $fallback;
+    }
+
+    public static function boolStr(mixed $v): string
+    {
+        return self::t($v) ? 'true' : 'false';
+    }
+
+    public static function concatTrim(array $parts): string
+    {
+        return implode('', array_map(fn ($p) => trim(self::s($p)), $parts));
+    }
+
+    /** class fragments merged with tailwind-merge (strings only, empty ones skipped) */
+    public static function cn(array $parts): string
+    {
+        return CnMerge::merge(array_map(fn ($p) => self::s($p), $parts));
+    }
+
+    /** the brick class contract: recipe base, the selected variants (defaults for empty), compounds, then the tail */
+    public function compose(string $path, array $selection, array $extra): string
+    {
+        $r = $this->json($path);
+        $parts = [];
+        if (trim((string) ($r['base'] ?? '')) !== '') {
+            $parts[] = trim((string) $r['base']);
+        }
+        $pick = function (string $k) use ($r, $selection): string {
+            $c = trim(self::s($selection[$k] ?? null));
+            return $c !== '' ? $c : trim((string) ($r['defaults'][$k] ?? ''));
+        };
+        foreach ($r['keys'] ?? [] as $key) {
+            $choices = $r['byKey'][$key] ?? null;
+            if ($choices === null) {
+                continue;
+            }
+            $choice = $pick($key);
+            if ($choice === '') {
+                if ($choices) {
+                    throw new \RuntimeException("[compose] missing default for key $key");
+                }
+                continue;
+            }
+            if (isset($choices[$choice]) && trim((string) $choices[$choice]) !== '') {
+                $parts[] = (string) $choices[$choice];
+            }
+        }
+        foreach ($r['compound'] ?? [] as $c) {
+            if (self::compoundHits($c, $pick) && trim((string) ($c['class'] ?? '')) !== '') {
+                $parts[] = (string) $c['class'];
+            }
+        }
+        return self::cn([...$parts, ...$extra]);
+    }
+
+    /** the tag of a primitive: the requested one when the allow-list has it, else the fallback */
+    public static function resolveTag(mixed $tag, string $fallback, array $allowed): string
+    {
+        $t = strtolower(trim(self::s($tag)));
+        return $t !== '' && in_array($t, $allowed, true) ? $t : $fallback;
+    }
+
+    /** h1-h6 from a level, h2 by default */
+    public static function titleTag(mixed $level): string
+    {
+        $n = self::i($level);
+        return $n >= 1 && $n <= 6 ? "h$n" : 'h2';
+    }
+
+    /** the inner markup of a Lucide glyph: its nodes with attributes in name order (circle for an unknown name) */
+    public function lucide(mixed $name): string
+    {
+        $icons = $this->json('ui/lucide-icon/lucide-icons.json')['icons'];
+        $nodes = $icons[self::s($name)] ?? $icons['circle'];
+        $out = '';
+        foreach ($nodes as [$tag, $attrs]) {
+            ksort($attrs, SORT_STRING);
+            $out .= '<' . $tag;
+            foreach ($attrs as $k => $v) {
+                $out .= ' ' . $k . '="' . htmlspecialchars((string) $v, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') . '"';
+            }
+            $out .= '></' . $tag . '>';
+        }
+        return $out;
+    }
+}
diff --git a/packages/latte/ui/ui/alert/alert.latte b/packages/latte/ui/ui/alert/alert.latte
new file mode 100644
index 0000000..552484e
--- /dev/null
+++ b/packages/latte/ui/ui/alert/alert.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/alert.json
+    Alert: Alert renders a div with alert or status semantics.
+    Props (p): Class (string), Variant (string), Role (string), AriaLive (string), Attrs (attrs); children: markup. *}
+<div
+  class="{=ui_compose('ui/alert/alert.variants.json', ['variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  data-slot="alert"
+  role="{=ui_map_or(($p['Role'] ?? ''), ['status' => 'status', 'alert' => 'alert'], 'status')}"
+  aria-live="{=ui_default_if_empty(($p['AriaLive'] ?? ''), 'polite')}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/alert/alert.variants.json b/packages/latte/ui/ui/alert/alert.variants.json
new file mode 100644
index 0000000..29370d6
--- /dev/null
+++ b/packages/latte/ui/ui/alert/alert.variants.json
@@ -0,0 +1,20 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.alert",
+  "base": "flex min-h-8 items-center gap-2 px-2 text-xs font-semibold inset-ring rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-card text-card-foreground inset-ring-border",
+      "destructive": "bg-muted text-destructive inset-ring-destructive",
+      "success": "bg-muted text-foreground inset-ring-border",
+      "warning": "bg-muted text-foreground inset-ring-border"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/badge/badge.latte b/packages/latte/ui/ui/badge/badge.latte
new file mode 100644
index 0000000..ea5ec18
--- /dev/null
+++ b/packages/latte/ui/ui/badge/badge.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/badge.json
+    Badge: Badge renders label text in a div wrapper.
+    Props (p): Variant (string), Size (string), Class (string), Attrs (attrs); children: markup. *}
+<div
+  class="{=ui_compose('ui/badge/badge.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  data-slot="badge"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/badge/badge.variants.json b/packages/latte/ui/ui/badge/badge.variants.json
new file mode 100644
index 0000000..adfac0c
--- /dev/null
+++ b/packages/latte/ui/ui/badge/badge.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.badge",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-5 px-2 text-xs",
+      "default": "h-6 px-3 text-xs",
+      "lg": "h-8 px-4 text-sm"
+    },
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "secondary": "bg-muted text-foreground inset-ring-transparent",
+      "outline": "bg-transparent text-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/block/block.latte b/packages/latte/ui/ui/block/block.latte
new file mode 100644
index 0000000..98e6e7a
--- /dev/null
+++ b/packages/latte/ui/ui/block/block.latte
@@ -0,0 +1,10 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/block.json
+    Block: Block renders a resolved landmark element with children.
+    Props (p): ID (string), Class (string), Tag (string), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_resolve_tag(($p['Tag'] ?? ''), 'div', ['div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'figure', 'search', 'hgroup'])}
+<div n:tag="$tag1"
+  class="{=ui_compose('ui/block/block.variants.json', [], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/block/block.variants.json b/packages/latte/ui/ui/block/block.variants.json
new file mode 100644
index 0000000..430ecf7
--- /dev/null
+++ b/packages/latte/ui/ui/block/block.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.block",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/box/box.latte b/packages/latte/ui/ui/box/box.latte
new file mode 100644
index 0000000..04b74aa
--- /dev/null
+++ b/packages/latte/ui/ui/box/box.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/box.json
+    Box: Box renders a div layout wrapper.
+    Props (p): Class (string), Tag (string), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_resolve_tag(($p['Tag'] ?? ''), 'div', ['div'])}
+<div n:tag="$tag1"
+  class="{=ui_compose('ui/box/box.variants.json', [], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/box/box.variants.json b/packages/latte/ui/ui/box/box.variants.json
new file mode 100644
index 0000000..2ae4cf2
--- /dev/null
+++ b/packages/latte/ui/ui/box/box.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.box",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/breadcrumb/breadcrumb.latte b/packages/latte/ui/ui/breadcrumb/breadcrumb.latte
new file mode 100644
index 0000000..135b97a
--- /dev/null
+++ b/packages/latte/ui/ui/breadcrumb/breadcrumb.latte
@@ -0,0 +1,29 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/breadcrumb.json
+    Breadcrumb: Breadcrumb renders the full navigation trail.
+    Props (p): Class (string), Items (BreadcrumbItem[]), AriaLabel (string), DataUI8Kit (string), Attrs (attrs). *}
+<nav
+  class="{=ui_cn(['text-sm', ($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['DataUI8Kit'] ?? ''))} data-ui8kit="{=($p['DataUI8Kit'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
+  <ol class="flex flex-wrap items-center gap-2">
+    {foreach ($p['Items'] ?? []) as $item}
+      <li class="inline-flex items-center">
+        {if (ui_is_set_str(ui_field($item, 'Href', '')) && !(ui_field($item, 'Disabled', false)))}
+          <a
+            {if ui_is_set_str(ui_field($item, 'Href', ''))} href="{=ui_field($item, 'Href', '')|nocheck}"{/if}
+            class="{=ui_cn(['text-sm', (ui_field($item, 'Current', false) ? 'font-medium' : (ui_field($item, 'Disabled', false) ? 'text-muted-foreground' : 'text-primary underline-offset-4 hover:underline'))])}"
+            {if ui_field($item, 'Current', false)} aria-current="page"{/if}
+          >{=ui_field($item, 'Label', '')}</a>
+        {else}
+          <span
+            class="{=ui_cn(['text-sm', (ui_field($item, 'Current', false) ? 'font-medium' : (ui_field($item, 'Disabled', false) ? 'text-muted-foreground' : 'text-primary underline-offset-4 hover:underline'))])}"
+            {if ui_field($item, 'Current', false)} aria-current="page"{/if}
+          >{=ui_field($item, 'Label', '')}</span>
+        {/if}
+      </li>
+    {/foreach}
+  </ol>
+</nav>
diff --git a/packages/latte/ui/ui/button-plain/button-plain.latte b/packages/latte/ui/ui/button-plain/button-plain.latte
new file mode 100644
index 0000000..66a3508
--- /dev/null
+++ b/packages/latte/ui/ui/button-plain/button-plain.latte
@@ -0,0 +1,14 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/button-plain.json
+    ButtonPlain: ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it themselves.
+    Props (p): Class (string), Type (string), Disabled (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs); children: markup. *}
+<button
+  type="{=ui_map_or(($p['Type'] ?? ''), ['submit' => 'submit', 'reset' => 'reset'], 'button')}"
+  class="{=ui_compose('ui/button-plain/button-plain.variants.json', [], [(($p['Disabled'] ?? false) ? 'pointer-events-none opacity-50' : ''), ($p['Class'] ?? '')])}"
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['TabIndex'] ?? ''))} tabindex="{=($p['TabIndex'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</button>
diff --git a/packages/latte/ui/ui/button-plain/button-plain.variants.json b/packages/latte/ui/ui/button-plain/button-plain.variants.json
new file mode 100644
index 0000000..0e844f8
--- /dev/null
+++ b/packages/latte/ui/ui/button-plain/button-plain.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.button-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/button/button.latte b/packages/latte/ui/ui/button/button.latte
new file mode 100644
index 0000000..10621a7
--- /dev/null
+++ b/packages/latte/ui/ui/button/button.latte
@@ -0,0 +1,35 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/button.json
+    Button: Button renders a button element, or an anchor when Href is set.
+    Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
+    Props (p): Variant (string), Size (string), Layout (string), Class (string), Type (string), Form (string), Href (string), Target (string), Rel (string), External (bool), Disabled (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs); children: markup. *}
+{var $d_target = (ui_is_set_str(($p['Target'] ?? '')) ? ($p['Target'] ?? '') : (($p['External'] ?? false) ? '_blank' : ''))}
+{var $d_rel = (ui_is_set_str(($p['Rel'] ?? '')) ? ($p['Rel'] ?? '') : ((($p['External'] ?? false) || ui_eq($d_target, '_blank')) ? 'noopener noreferrer' : ''))}
+{if ui_is_set_str(($p['Href'] ?? ''))}
+  <a
+    {if ui_is_set_str(($p['Href'] ?? ''))} href="{=($p['Href'] ?? '')|nocheck}"{/if}
+    class="{=ui_compose('ui/button/button.variants.json', ['variant' => ($p['Variant'] ?? ''), 'size' => ($p['Size'] ?? ''), 'layout' => ($p['Layout'] ?? '')], [(($p['Disabled'] ?? false) ? 'pointer-events-none opacity-50' : ''), ($p['Class'] ?? '')])}"
+    data-slot="button"
+    {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+    {if ui_is_set_str($d_target)} target="{=$d_target}"{/if}
+    {if ui_is_set_str($d_rel)} rel="{=$d_rel}"{/if}
+    {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+    {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+    {if ($p['Disabled'] ?? false)} aria-disabled="true"{/if}
+    {if ($p['Disabled'] ?? false)} tabindex="-1"{/if}
+    {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+  >{=($children ?? '')|noescape}</a>
+{else}
+  <button
+    type="{=ui_map_or(($p['Type'] ?? ''), ['submit' => 'submit', 'reset' => 'reset'], 'button')}"
+    class="{=ui_compose('ui/button/button.variants.json', ['variant' => ($p['Variant'] ?? ''), 'size' => ($p['Size'] ?? ''), 'layout' => ($p['Layout'] ?? '')], [(($p['Disabled'] ?? false) ? 'pointer-events-none opacity-50' : ''), ($p['Class'] ?? '')])}"
+    data-slot="button"
+    {if ($p['Disabled'] ?? false)} disabled{/if}
+    {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+    {if ui_is_set_str(($p['Form'] ?? ''))} form="{=($p['Form'] ?? '')}"{/if}
+    {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+    {if ui_is_set_str(($p['TabIndex'] ?? ''))} tabindex="{=($p['TabIndex'] ?? '')}"{/if}
+    {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+    {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+  >{=($children ?? '')|noescape}</button>
+{/if}
diff --git a/packages/latte/ui/ui/button/button.variants.json b/packages/latte/ui/ui/button/button.variants.json
new file mode 100644
index 0000000..6f6eed9
--- /dev/null
+++ b/packages/latte/ui/ui/button/button.variants.json
@@ -0,0 +1,61 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.button",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring transition-colors disabled:pointer-events-none disabled:opacity-50 rounded",
+  "keys": [
+    "variant",
+    "size",
+    "layout"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default",
+    "layout": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "outline": "bg-card text-foreground inset-ring-border",
+      "ghost": "bg-transparent text-foreground inset-ring-transparent",
+      "secondary": "bg-secondary text-secondary-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white hover:bg-destructive/90 inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      "link": "text-foreground inset-ring-transparent underline-offset-4 hover:underline"
+    },
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-4 text-sm",
+      "lg": "h-12 px-6 text-base"
+    },
+    "layout": {
+      "default": "",
+      "icon": ""
+    }
+  },
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "size-8 p-0 [&>svg]:size-4"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "size-10 p-0 [&>svg]:size-5"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "size-12 p-0 [&>svg]:size-6"
+    },
+    {
+      "variant": "outline",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    },
+    {
+      "variant": "ghost",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    }
+  ]
+}
diff --git a/packages/latte/ui/ui/card/card-content.latte b/packages/latte/ui/ui/card/card-content.latte
new file mode 100644
index 0000000..6d8e04c
--- /dev/null
+++ b/packages/latte/ui/ui/card/card-content.latte
@@ -0,0 +1,5 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardContent: CardContent renders the padded main body slot.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<div class="{=ui_cn([($p['Class'] ?? '')])}"{=ui_attr_html(($p['Attrs'] ?? []))|noescape}>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/card/card-description.latte b/packages/latte/ui/ui/card/card-description.latte
new file mode 100644
index 0000000..0c4ef25
--- /dev/null
+++ b/packages/latte/ui/ui/card/card-description.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardDescription: CardDescription renders a muted subtitle in a p element.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<p
+  class="{=ui_cn(['text-sm text-muted-foreground', ($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</p>
diff --git a/packages/latte/ui/ui/card/card-footer.latte b/packages/latte/ui/ui/card/card-footer.latte
new file mode 100644
index 0000000..360c685
--- /dev/null
+++ b/packages/latte/ui/ui/card/card-footer.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardFooter: CardFooter renders the bottom action slot.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<div
+  class="{=ui_cn(['flex items-center', ($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/card/card-header.latte b/packages/latte/ui/ui/card/card-header.latte
new file mode 100644
index 0000000..55a9ab5
--- /dev/null
+++ b/packages/latte/ui/ui/card/card-header.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardHeader: CardHeader renders the top slot.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<div
+  class="{=ui_cn(['grid auto-rows-min items-start gap-2', ($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/card/card-title.latte b/packages/latte/ui/ui/card/card-title.latte
new file mode 100644
index 0000000..a59a02d
--- /dev/null
+++ b/packages/latte/ui/ui/card/card-title.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardTitle: CardTitle renders heading text at the As level (default h2).
+    Props (p): Class (string), As (int), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_title_tag(($p['As'] ?? 0))}
+<h2 n:tag="$tag1"
+  class="{=ui_cn(['font-semibold leading-none', ($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</h2>
diff --git a/packages/latte/ui/ui/card/card.latte b/packages/latte/ui/ui/card/card.latte
new file mode 100644
index 0000000..2a405c6
--- /dev/null
+++ b/packages/latte/ui/ui/card/card.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    Card: Card renders the bordered surface wrapper.
+    Props (p): Class (string), Variant (string), Attrs (attrs); children: markup. *}
+<div
+  class="{=ui_compose('ui/card/card.variants.json', ['variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  data-slot="card"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/card/card.variants.json b/packages/latte/ui/ui/card/card.variants.json
new file mode 100644
index 0000000..6740b57
--- /dev/null
+++ b/packages/latte/ui/ui/card/card.variants.json
@@ -0,0 +1,20 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.card",
+  "base": "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "",
+      "muted": "bg-muted",
+      "ghost": "bg-transparent",
+      "compact": "gap-4 p-4"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/checkbox/checkbox.latte b/packages/latte/ui/ui/checkbox/checkbox.latte
new file mode 100644
index 0000000..89cdc67
--- /dev/null
+++ b/packages/latte/ui/ui/checkbox/checkbox.latte
@@ -0,0 +1,18 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/checkbox.json
+    Checkbox: Checkbox renders a styled input[type=checkbox].
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Checked (bool), Disabled (bool), Required (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). *}
+<input
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  type="checkbox"
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Value'] ?? ''))} value="{=($p['Value'] ?? '')}"{/if}
+  class="{=ui_compose('ui/checkbox/checkbox.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ($p['Checked'] ?? false)} checked{/if}
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {if ($p['Required'] ?? false)} required{/if}
+  {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['TabIndex'] ?? ''))} tabindex="{=($p['TabIndex'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/checkbox/checkbox.variants.json b/packages/latte/ui/ui/checkbox/checkbox.variants.json
new file mode 100644
index 0000000..6b1dccc
--- /dev/null
+++ b/packages/latte/ui/ui/checkbox/checkbox.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.checkbox",
+  "base": "peer shrink-0 appearance-none bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary checkbox-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5",
+      "sm": "size-4"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/container/container.latte b/packages/latte/ui/ui/container/container.latte
new file mode 100644
index 0000000..0156a87
--- /dev/null
+++ b/packages/latte/ui/ui/container/container.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/container.json
+    Container: Container renders the outer content shell.
+    Props (p): Class (string), Tag (string), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_resolve_tag(($p['Tag'] ?? ''), 'div', ['div', 'main', 'section'])}
+<div n:tag="$tag1"
+  class="{=ui_compose('ui/container/container.variants.json', [], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/container/container.variants.json b/packages/latte/ui/ui/container/container.variants.json
new file mode 100644
index 0000000..e2842e5
--- /dev/null
+++ b/packages/latte/ui/ui/container/container.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.container",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/dialog/dialog.latte b/packages/latte/ui/ui/dialog/dialog.latte
new file mode 100644
index 0000000..475620d
--- /dev/null
+++ b/packages/latte/ui/ui/dialog/dialog.latte
@@ -0,0 +1,14 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/dialog.json
+    Dialog: Dialog renders a native dialog element.
+    Props (p): Variant (string), Size (string), Class (string), ID (string), Open (bool), DataUI8Kit (string), AriaLabel (string), AriaLabelledBy (string), AriaDescribedBy (string), Attrs (attrs); children: markup. *}
+<dialog
+  class="{=ui_compose('ui/dialog/dialog.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ($p['Open'] ?? false)} open{/if}
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['DataUI8Kit'] ?? ''))} data-ui8kit="{=($p['DataUI8Kit'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabelledBy'] ?? ''))} aria-labelledby="{=($p['AriaLabelledBy'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaDescribedBy'] ?? ''))} aria-describedby="{=($p['AriaDescribedBy'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</dialog>
diff --git a/packages/latte/ui/ui/dialog/dialog.variants.json b/packages/latte/ui/ui/dialog/dialog.variants.json
new file mode 100644
index 0000000..1bb166d
--- /dev/null
+++ b/packages/latte/ui/ui/dialog/dialog.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.dialog",
+  "base": "m-auto flex flex-col bg-background text-foreground inset-ring inset-ring-border shadow-lg backdrop:bg-foreground/20 rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "w-70",
+      "full": "h-full w-full",
+      "lg": "w-100",
+      "xl": "w-140"
+    },
+    "variant": {
+      "card": "bg-card text-card-foreground",
+      "default": "",
+      "sheet": "min-h-screen rounded-none"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/disclosure/disclosure.latte b/packages/latte/ui/ui/disclosure/disclosure.latte
new file mode 100644
index 0000000..2a85387
--- /dev/null
+++ b/packages/latte/ui/ui/disclosure/disclosure.latte
@@ -0,0 +1,10 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/disclosure.json
+    Disclosure: Disclosure renders native details.
+    Props (p): Variant (string), Class (string), Open (bool), Name (string), Attrs (attrs); children: markup. *}
+<details
+  class="{=ui_compose('ui/disclosure/disclosure.variants.json', ['variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ($p['Open'] ?? false)} open{/if}
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</details>
diff --git a/packages/latte/ui/ui/disclosure/disclosure.variants.json b/packages/latte/ui/ui/disclosure/disclosure.variants.json
new file mode 100644
index 0000000..b3a254a
--- /dev/null
+++ b/packages/latte/ui/ui/disclosure/disclosure.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.disclosure",
+  "base": "group",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "card": "rounded bg-card inset-ring inset-ring-border",
+      "default": "rounded inset-ring inset-ring-border",
+      "ghost": "",
+      "item": "border-b border-border last:border-b-0"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/disclosure/summary.latte b/packages/latte/ui/ui/disclosure/summary.latte
new file mode 100644
index 0000000..fa938ef
--- /dev/null
+++ b/packages/latte/ui/ui/disclosure/summary.latte
@@ -0,0 +1,15 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/disclosure.json
+    Summary: Summary renders native summary, followed by a Lucide chevron-down indicator that turns over when the details open (CSS only: group-open:rotate-180 on the Disclosure group).
+    Props (p): Variant (string), Class (string), Attrs (attrs); children: markup. *}
+<summary
+  class="{=ui_compose('ui/disclosure/summary.variants.json', ['variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
+  {=($children ?? '')|noescape}
+  <span
+    class="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+    aria-hidden="true"
+    data-slot="summary-indicator"
+  ></span>
+</summary>
diff --git a/packages/latte/ui/ui/disclosure/summary.variants.json b/packages/latte/ui/ui/disclosure/summary.variants.json
new file mode 100644
index 0000000..6502ca6
--- /dev/null
+++ b/packages/latte/ui/ui/disclosure/summary.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.summary",
+  "base": "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs font-semibold",
+      "default": "text-sm font-semibold",
+      "lg": "text-base font-semibold"
+    },
+    "variant": {
+      "card": "py-2 pr-4 pl-4",
+      "default": "py-2 pr-4 pl-4",
+      "ghost": "py-2",
+      "item": "py-4 text-muted-foreground hover:text-foreground group-open:text-foreground"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/form/data-list.latte b/packages/latte/ui/ui/form/data-list.latte
new file mode 100644
index 0000000..a3d6662
--- /dev/null
+++ b/packages/latte/ui/ui/form/data-list.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    DataList: DataList renders a native datalist.
+    Props (p): ID (string), Class (string), Attrs (attrs); children: markup. *}
+<datalist
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  class="{=ui_cn([($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</datalist>
diff --git a/packages/latte/ui/ui/form/data-option.latte b/packages/latte/ui/ui/form/data-option.latte
new file mode 100644
index 0000000..8a17dbe
--- /dev/null
+++ b/packages/latte/ui/ui/form/data-option.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    DataOption: DataOption renders an option inside a datalist.
+    Props (p): Value (string), Label (string), Attrs (attrs). *}
+<option
+  {if ui_is_set_str(($p['Value'] ?? ''))} value="{=($p['Value'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Label'] ?? ''))} label="{=($p['Label'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+></option>
diff --git a/packages/latte/ui/ui/form/fieldset.latte b/packages/latte/ui/ui/form/fieldset.latte
new file mode 100644
index 0000000..55aed3c
--- /dev/null
+++ b/packages/latte/ui/ui/form/fieldset.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Fieldset: Fieldset renders a native fieldset.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Form (string), Disabled (bool), Attrs (attrs); children: markup. *}
+<fieldset
+  class="{=ui_compose('ui/form/fieldset.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Form'] ?? ''))} form="{=($p['Form'] ?? '')}"{/if}
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</fieldset>
diff --git a/packages/latte/ui/ui/form/fieldset.variants.json b/packages/latte/ui/ui/form/fieldset.variants.json
new file mode 100644
index 0000000..963b29d
--- /dev/null
+++ b/packages/latte/ui/ui/form/fieldset.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.fieldset",
+  "base": "grid",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "gap-2",
+      "lg": "gap-4",
+      "sm": "gap-2"
+    },
+    "variant": {
+      "card": "rounded p-4 inset-ring inset-ring-border",
+      "default": "",
+      "inline": "flex flex-wrap items-start gap-4"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/form/form-description.latte b/packages/latte/ui/ui/form/form-description.latte
new file mode 100644
index 0000000..b98a2e6
--- /dev/null
+++ b/packages/latte/ui/ui/form/form-description.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    FormDescription: FormDescription renders muted helper copy below a control.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<p
+  class="{=ui_compose('ui/form/form-description.variants.json', [], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</p>
diff --git a/packages/latte/ui/ui/form/form-description.variants.json b/packages/latte/ui/ui/form/form-description.variants.json
new file mode 100644
index 0000000..82a749d
--- /dev/null
+++ b/packages/latte/ui/ui/form/form-description.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-description",
+  "base": "text-xs font-semibold text-muted-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/form/form-item.latte b/packages/latte/ui/ui/form/form-item.latte
new file mode 100644
index 0000000..70acacc
--- /dev/null
+++ b/packages/latte/ui/ui/form/form-item.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    FormItem: FormItem groups a single field with spacing for label and control.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<div
+  class="{=ui_compose('ui/form/form-item.variants.json', [], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/form/form-item.variants.json b/packages/latte/ui/ui/form/form-item.variants.json
new file mode 100644
index 0000000..e7da2d4
--- /dev/null
+++ b/packages/latte/ui/ui/form/form-item.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-item",
+  "base": "flex flex-col gap-2",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/form/form-message.latte b/packages/latte/ui/ui/form/form-message.latte
new file mode 100644
index 0000000..52104d5
--- /dev/null
+++ b/packages/latte/ui/ui/form/form-message.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    FormMessage: FormMessage renders destructive validation feedback.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<p
+  class="{=ui_compose('ui/form/form-message.variants.json', [], [($p['Class'] ?? '')])}"
+  role="alert"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</p>
diff --git a/packages/latte/ui/ui/form/form-message.variants.json b/packages/latte/ui/ui/form/form-message.variants.json
new file mode 100644
index 0000000..b58d5a8
--- /dev/null
+++ b/packages/latte/ui/ui/form/form-message.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-message",
+  "base": "text-xs font-semibold text-destructive",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/form/form.latte b/packages/latte/ui/ui/form/form.latte
new file mode 100644
index 0000000..36a6398
--- /dev/null
+++ b/packages/latte/ui/ui/form/form.latte
@@ -0,0 +1,16 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    Form: Form renders a vertical grid form container.
+    Props (p): ID (string), Class (string), Action (string), Method (string), Enctype (string), Autocomplete (string), Name (string), Target (string), NoValidate (bool), Attrs (attrs); children: markup. *}
+<form
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  class="{=ui_compose('ui/form/form.variants.json', [], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['Action'] ?? ''))} action="{=($p['Action'] ?? '')|nocheck}"{/if}
+  {if ui_is_set_str(($p['Method'] ?? ''))} method="{=($p['Method'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Enctype'] ?? ''))} enctype="{=($p['Enctype'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Autocomplete'] ?? ''))} autocomplete="{=($p['Autocomplete'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Target'] ?? ''))} target="{=($p['Target'] ?? '')}"{/if}
+  {if ($p['NoValidate'] ?? false)} novalidate{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</form>
diff --git a/packages/latte/ui/ui/form/form.variants.json b/packages/latte/ui/ui/form/form.variants.json
new file mode 100644
index 0000000..7a19129
--- /dev/null
+++ b/packages/latte/ui/ui/form/form.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form",
+  "base": "grid gap-4",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/form/legend.latte b/packages/latte/ui/ui/form/legend.latte
new file mode 100644
index 0000000..9bb5cab
--- /dev/null
+++ b/packages/latte/ui/ui/form/legend.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Legend: Legend renders a native legend.
+    Props (p): Variant (string), Size (string), Class (string), Attrs (attrs); children: markup. *}
+<legend
+  class="{=ui_compose('ui/form/legend.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</legend>
diff --git a/packages/latte/ui/ui/form/legend.variants.json b/packages/latte/ui/ui/form/legend.variants.json
new file mode 100644
index 0000000..7a2f0ab
--- /dev/null
+++ b/packages/latte/ui/ui/form/legend.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.legend",
+  "base": "font-bold",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs",
+      "default": "text-sm",
+      "lg": "text-base"
+    },
+    "variant": {
+      "default": "",
+      "muted": "text-muted-foreground"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/form/meter.latte b/packages/latte/ui/ui/form/meter.latte
new file mode 100644
index 0000000..589ef6d
--- /dev/null
+++ b/packages/latte/ui/ui/form/meter.latte
@@ -0,0 +1,15 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Meter: Meter renders a native meter.
+    Props (p): Variant (string), Size (string), ID (string), Class (string), Value (string), Min (string), Max (string), Low (string), High (string), Optimum (string), Attrs (attrs); children: markup. *}
+<meter
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  class="{=ui_compose('ui/form/meter.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['Value'] ?? ''))} value="{=($p['Value'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Min'] ?? ''))} min="{=($p['Min'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Max'] ?? ''))} max="{=($p['Max'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Low'] ?? ''))} low="{=($p['Low'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['High'] ?? ''))} high="{=($p['High'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Optimum'] ?? ''))} optimum="{=($p['Optimum'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</meter>
diff --git a/packages/latte/ui/ui/form/meter.variants.json b/packages/latte/ui/ui/form/meter.variants.json
new file mode 100644
index 0000000..b931112
--- /dev/null
+++ b/packages/latte/ui/ui/form/meter.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.meter",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/form/output.latte b/packages/latte/ui/ui/form/output.latte
new file mode 100644
index 0000000..94d9759
--- /dev/null
+++ b/packages/latte/ui/ui/form/output.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Output: Output renders a native output element.
+    Props (p): ID (string), Class (string), Name (string), For (string), Value (string), Attrs (attrs); children: markup. *}
+<output
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  class="{=ui_cn([($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['For'] ?? ''))} for="{=($p['For'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($p['Value'] ?? '')}{=($children ?? '')|noescape}</output>
diff --git a/packages/latte/ui/ui/form/progress.latte b/packages/latte/ui/ui/form/progress.latte
new file mode 100644
index 0000000..da3a00a
--- /dev/null
+++ b/packages/latte/ui/ui/form/progress.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Progress: Progress renders a native progress element.
+    Props (p): Variant (string), Size (string), ID (string), Class (string), Value (string), Max (string), Attrs (attrs); children: markup. *}
+<progress
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  class="{=ui_compose('ui/form/progress.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['Value'] ?? ''))} value="{=($p['Value'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Max'] ?? ''))} max="{=($p['Max'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</progress>
diff --git a/packages/latte/ui/ui/form/progress.variants.json b/packages/latte/ui/ui/form/progress.variants.json
new file mode 100644
index 0000000..ac8c766
--- /dev/null
+++ b/packages/latte/ui/ui/form/progress.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.progress",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/grid/grid-col.latte b/packages/latte/ui/ui/grid/grid-col.latte
new file mode 100644
index 0000000..a14f1d9
--- /dev/null
+++ b/packages/latte/ui/ui/grid/grid-col.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/grid.json
+    GridCol: GridCol renders one grid column child.
+    Props (p): Class (string), Span (int), Start (int), End (int), Order (int), Attrs (attrs); children: markup. *}
+<div
+  class="{=ui_cn([ui_int_map_or(($p['Span'] ?? 0), [1 => 'col-span-1', 2 => 'col-span-2', 3 => 'col-span-3', 4 => 'col-span-4', 5 => 'col-span-5', 6 => 'col-span-6', 7 => 'col-span-7', 8 => 'col-span-8', 9 => 'col-span-9', 10 => 'col-span-10', 11 => 'col-span-11', 12 => 'col-span-12'], ''), ui_int_map_or(($p['Start'] ?? 0), [1 => 'col-start-1', 2 => 'col-start-2', 3 => 'col-start-3', 4 => 'col-start-4', 5 => 'col-start-5', 6 => 'col-start-6', 7 => 'col-start-7', 8 => 'col-start-8', 9 => 'col-start-9', 10 => 'col-start-10', 11 => 'col-start-11', 12 => 'col-start-12'], ''), ui_int_map_or(($p['End'] ?? 0), [1 => 'col-end-1', 2 => 'col-end-2', 3 => 'col-end-3', 4 => 'col-end-4', 5 => 'col-end-5', 6 => 'col-end-6', 7 => 'col-end-7', 8 => 'col-end-8', 9 => 'col-end-9', 10 => 'col-end-10', 11 => 'col-end-11', 12 => 'col-end-12'], ''), ui_int_map_or(($p['Order'] ?? 0), [1 => 'order-1', 2 => 'order-2', 3 => 'order-3', 4 => 'order-4', 5 => 'order-5', 6 => 'order-6', 7 => 'order-7', 8 => 'order-8', 9 => 'order-9', 10 => 'order-10', 11 => 'order-11', 12 => 'order-12'], ''), ($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/grid/grid.latte b/packages/latte/ui/ui/grid/grid.latte
new file mode 100644
index 0000000..2babf2a
--- /dev/null
+++ b/packages/latte/ui/ui/grid/grid.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/grid.json
+    Grid: Grid renders a display:grid container.
+    Props (p): Class (string), Cols (string), Attrs (attrs); children: markup. *}
+<div
+  class="{=ui_compose('ui/grid/grid.variants.json', [], [(str_contains(($p['Class'] ?? ''), 'grid-cols-') ? '' : ui_map_or(ui_default_if_empty(($p['Cols'] ?? ''), '1'), ['1' => 'grid-cols-1', '2' => 'grid-cols-2', '3' => 'grid-cols-3', '4' => 'grid-cols-4', '5' => 'grid-cols-5', '6' => 'grid-cols-6', '7' => 'grid-cols-7', '8' => 'grid-cols-8', '9' => 'grid-cols-9', '10' => 'grid-cols-10', '11' => 'grid-cols-11', '12' => 'grid-cols-12', '1-2' => 'grid-cols-1 md:grid-cols-2', '1-3' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3', '1-4' => 'grid-cols-1 sm:grid-cols-2 md:grid-cols-4', '2-3' => 'grid-cols-2 md:grid-cols-3', '2-4' => 'grid-cols-2 md:grid-cols-4', '2-6' => 'grid-cols-2 md:grid-cols-6', '3-6' => 'grid-cols-3 md:grid-cols-6'], '')), ($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/grid/grid.variants.json b/packages/latte/ui/ui/grid/grid.variants.json
new file mode 100644
index 0000000..7fccc0f
--- /dev/null
+++ b/packages/latte/ui/ui/grid/grid.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.grid",
+  "base": "grid",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/group/group.latte b/packages/latte/ui/ui/group/group.latte
new file mode 100644
index 0000000..ccccda7
--- /dev/null
+++ b/packages/latte/ui/ui/group/group.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/group.json
+    Group: Group renders a horizontal flex container.
+    Props (p): Gap (string), Align (string), Justify (string), Class (string), Tag (string), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_resolve_tag(($p['Tag'] ?? ''), 'div', ['div', 'fieldset', 'dl'])}
+<div n:tag="$tag1"
+  class="{=ui_compose('ui/group/group.variants.json', ['gap' => ($p['Gap'] ?? ''), 'align' => ($p['Align'] ?? ''), 'justify' => ($p['Justify'] ?? '')], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/group/group.variants.json b/packages/latte/ui/ui/group/group.variants.json
new file mode 100644
index 0000000..a2ef4f4
--- /dev/null
+++ b/packages/latte/ui/ui/group/group.variants.json
@@ -0,0 +1,40 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.group",
+  "base": "flex min-w-0",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "center",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/icon/icon.latte b/packages/latte/ui/ui/icon/icon.latte
new file mode 100644
index 0000000..b8aa94e
--- /dev/null
+++ b/packages/latte/ui/ui/icon/icon.latte
@@ -0,0 +1,39 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/icon.json
+    Icon: Icon renders a class-based span, svg use, or text fallback host.
+    Props (p): Name (string), Type (string), BaseClass (string), Prefix (string), Size (string), Class (string), Href (string), Title (string), AriaLabel (string), Decorative (bool), Attrs (attrs); children: markup. *}
+{var $d_iconKind = ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class')}
+{var $d_isDecorative = (($p['Decorative'] ?? false) || (!(ui_is_set_str(($p['Title'] ?? ''))) && !(ui_is_set_str(($p['AriaLabel'] ?? '')))))}
+{if ui_eq($d_iconKind, 'svg')}
+  <svg
+    class="{=ui_compose('ui/icon/icon.variants.json', ['size' => ($p['Size'] ?? ''), 'type' => ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class')], [(ui_eq(ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class'), 'class') ? ($p['BaseClass'] ?? '') : ''), ((ui_eq(ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class'), 'class') && ui_is_set_str(($p['Name'] ?? ''))) ? ui_concat_trim([($p['Prefix'] ?? ''), ($p['Name'] ?? '')]) : ''), ($p['Class'] ?? '')])}"
+    {if $d_isDecorative} aria-hidden="true"{/if}
+    {if !($d_isDecorative)} role="img"{/if}
+    {if (!($d_isDecorative) && ui_is_set_str(($p['AriaLabel'] ?? '')))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+    {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+  >
+    {if ui_is_set_str(($p['Title'] ?? ''))}
+      <title>{=($p['Title'] ?? '')}</title>
+    {/if}
+    {if ui_is_set_str(($p['Href'] ?? ''))}
+      <use{if ui_is_set_str(($p['Href'] ?? ''))} href="{=($p['Href'] ?? '')|nocheck}"{/if}></use>
+    {/if}
+    {=($children ?? '')|noescape}
+  </svg>
+{elseif ui_eq($d_iconKind, 'text')}
+  <span
+    class="{=ui_compose('ui/icon/icon.variants.json', ['size' => ($p['Size'] ?? ''), 'type' => ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class')], [(ui_eq(ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class'), 'class') ? ($p['BaseClass'] ?? '') : ''), ((ui_eq(ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class'), 'class') && ui_is_set_str(($p['Name'] ?? ''))) ? ui_concat_trim([($p['Prefix'] ?? ''), ($p['Name'] ?? '')]) : ''), ($p['Class'] ?? '')])}"
+    {if $d_isDecorative} aria-hidden="true"{/if}
+    {if !($d_isDecorative)} role="img"{/if}
+    {if (!($d_isDecorative) && ui_is_set_str(($p['AriaLabel'] ?? '')))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+    {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+  >{=($children ?? '')|noescape}</span>
+{else}
+  <span
+    class="{=ui_compose('ui/icon/icon.variants.json', ['size' => ($p['Size'] ?? ''), 'type' => ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class')], [(ui_eq(ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class'), 'class') ? ($p['BaseClass'] ?? '') : ''), ((ui_eq(ui_map_or(($p['Type'] ?? ''), ['svg' => 'svg', 'text' => 'text'], 'class'), 'class') && ui_is_set_str(($p['Name'] ?? ''))) ? ui_concat_trim([($p['Prefix'] ?? ''), ($p['Name'] ?? '')]) : ''), ($p['Class'] ?? '')])}"
+    {if $d_isDecorative} aria-hidden="true"{/if}
+    {if !($d_isDecorative)} role="img"{/if}
+    {if (!($d_isDecorative) && ui_is_set_str(($p['AriaLabel'] ?? '')))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+    {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+  ></span>
+{/if}
diff --git a/packages/latte/ui/ui/icon/icon.variants.json b/packages/latte/ui/ui/icon/icon.variants.json
new file mode 100644
index 0000000..5f73b17
--- /dev/null
+++ b/packages/latte/ui/ui/icon/icon.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.icon",
+  "base": "inline-block shrink-0",
+  "keys": [
+    "size",
+    "type"
+  ],
+  "defaults": {
+    "size": "default",
+    "type": "class"
+  },
+  "byKey": {
+    "size": {
+      "xs": "size-3",
+      "default": "size-4",
+      "md": "size-5",
+      "lg": "size-6"
+    },
+    "type": {
+      "class": "",
+      "svg": "",
+      "text": ""
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/iconbadge/icon-badge.latte b/packages/latte/ui/ui/iconbadge/icon-badge.latte
new file mode 100644
index 0000000..405d1ff
--- /dev/null
+++ b/packages/latte/ui/ui/iconbadge/icon-badge.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/iconbadge.json
+    IconBadge: IconBadge renders children as the badge content.
+    Props (p): Variant (string), Size (string), Class (string), Attrs (attrs); children: markup. *}
+<span
+  class="{=ui_compose('ui/iconbadge/iconbadge.variants.json', ['variant' => ($p['Variant'] ?? ''), 'size' => ($p['Size'] ?? '')], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</span>
diff --git a/packages/latte/ui/ui/iconbadge/iconbadge.variants.json b/packages/latte/ui/ui/iconbadge/iconbadge.variants.json
new file mode 100644
index 0000000..1c2e331
--- /dev/null
+++ b/packages/latte/ui/ui/iconbadge/iconbadge.variants.json
@@ -0,0 +1,31 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.iconbadge",
+  "base": "inline-flex shrink-0 items-center justify-center font-bold rounded",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-muted-foreground",
+      "primary": "bg-primary text-primary-foreground",
+      "accent": "bg-accent text-accent-foreground",
+      "secondary": "bg-secondary text-secondary-foreground",
+      "outline": "text-foreground inset-ring inset-ring-border",
+      "destructive": "bg-destructive text-white dark:bg-destructive/60"
+    },
+    "size": {
+      "xs": "size-6 text-xs",
+      "sm": "size-8 text-xs",
+      "default": "size-10 text-xs",
+      "lg": "size-12 text-sm",
+      "xl": "size-20 text-base"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/image/image.latte b/packages/latte/ui/ui/image/image.latte
new file mode 100644
index 0000000..f687495
--- /dev/null
+++ b/packages/latte/ui/ui/image/image.latte
@@ -0,0 +1,19 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/image.json
+    Image: Image renders an accessible img element.
+    Props (p): Variant (string), Size (string), Class (string), Src (string), SrcSet (string), Sizes (string), Alt (string), Width (string), Height (string), Fit (string), Position (string), Aspect (string), Loading (string), Decoding (string), FetchPriority (string), Decorative (bool), ID (string), Attrs (attrs). *}
+<img
+  {if ui_is_set_str(($p['Src'] ?? ''))} src="{=($p['Src'] ?? '')|nocheck}"{/if}
+  {if ui_is_set_str(($p['SrcSet'] ?? ''))} srcset="{=($p['SrcSet'] ?? '')|nocheck}"{/if}
+  {if ui_is_set_str(($p['Sizes'] ?? ''))} sizes="{=($p['Sizes'] ?? '')}"{/if}
+  alt="{=(($p['Decorative'] ?? false) ? '' : ($p['Alt'] ?? ''))}"
+  {if ui_is_set_str(($p['Width'] ?? ''))} width="{=($p['Width'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Height'] ?? ''))} height="{=($p['Height'] ?? '')}"{/if}
+  loading="{=ui_map_or(($p['Loading'] ?? ''), ['eager' => 'eager'], 'lazy')}"
+  decoding="{=ui_map_or(($p['Decoding'] ?? ''), ['sync' => 'sync', 'auto' => 'auto'], 'async')}"
+  {if ui_is_set_str(($p['FetchPriority'] ?? ''))} fetchpriority="{=($p['FetchPriority'] ?? '')}"{/if}
+  class="{=ui_compose('ui/image/image.variants.json', ['aspect' => ($p['Aspect'] ?? ''), 'fit' => ($p['Fit'] ?? ''), 'position' => ($p['Position'] ?? ''), 'size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  {if ($p['Decorative'] ?? false)} aria-hidden="true"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/image/image.variants.json b/packages/latte/ui/ui/image/image.variants.json
new file mode 100644
index 0000000..573b15b
--- /dev/null
+++ b/packages/latte/ui/ui/image/image.variants.json
@@ -0,0 +1,59 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.image",
+  "base": "block max-w-full",
+  "keys": [
+    "aspect",
+    "fit",
+    "position",
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "aspect": "auto",
+    "fit": "cover",
+    "position": "center",
+    "size": "auto",
+    "variant": "default"
+  },
+  "byKey": {
+    "aspect": {
+      "auto": "aspect-auto",
+      "square": "aspect-square",
+      "video": "aspect-video"
+    },
+    "fit": {
+      "contain": "object-contain",
+      "cover": "object-cover",
+      "fill": "object-fill",
+      "none": "object-none",
+      "scale-down": "object-scale-down"
+    },
+    "position": {
+      "bottom": "object-bottom",
+      "center": "object-center",
+      "left": "object-left",
+      "left-bottom": "object-left-bottom",
+      "left-top": "object-left-top",
+      "right": "object-right",
+      "right-bottom": "object-right-bottom",
+      "right-top": "object-right-top",
+      "top": "object-top"
+    },
+    "size": {
+      "auto": "",
+      "default": "",
+      "full": "h-full w-full",
+      "xs": "size-6",
+      "sm": "size-8",
+      "md": "size-12",
+      "lg": "size-16",
+      "xl": "size-20"
+    },
+    "variant": {
+      "default": "",
+      "logo": "object-contain"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/image/picture.latte b/packages/latte/ui/ui/image/picture.latte
new file mode 100644
index 0000000..d88b279
--- /dev/null
+++ b/packages/latte/ui/ui/image/picture.latte
@@ -0,0 +1,5 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/image.json
+    Picture: Picture renders a responsive image wrapper.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<picture class="{=ui_cn([($p['Class'] ?? '')])}"{=ui_attr_html(($p['Attrs'] ?? []))|noescape}>{=($children ?? '')|noescape}</picture>
diff --git a/packages/latte/ui/ui/image/source.latte b/packages/latte/ui/ui/image/source.latte
new file mode 100644
index 0000000..eae89cb
--- /dev/null
+++ b/packages/latte/ui/ui/image/source.latte
@@ -0,0 +1,12 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/image.json
+    Source: Source renders a source candidate for picture, video, or audio.
+    Props (p): SrcSet (string), Src (string), Media (string), Type (string), Sizes (string), Attrs (attrs). *}
+<source
+  {if ui_is_set_str(($p['SrcSet'] ?? ''))} srcset="{=($p['SrcSet'] ?? '')|nocheck}"{/if}
+  {if ui_is_set_str(($p['Src'] ?? ''))} src="{=($p['Src'] ?? '')|nocheck}"{/if}
+  {if ui_is_set_str(($p['Media'] ?? ''))} media="{=($p['Media'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Type'] ?? ''))} type="{=($p['Type'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Sizes'] ?? ''))} sizes="{=($p['Sizes'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/inline/inline.latte b/packages/latte/ui/ui/inline/inline.latte
new file mode 100644
index 0000000..592a427
--- /dev/null
+++ b/packages/latte/ui/ui/inline/inline.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/inline.json
+    Inline: Inline renders a span element with inline copy classes.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<span
+  class="{=ui_compose('ui/inline/inline.variants.json', [], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</span>
diff --git a/packages/latte/ui/ui/inline/inline.variants.json b/packages/latte/ui/ui/inline/inline.variants.json
new file mode 100644
index 0000000..8c11e25
--- /dev/null
+++ b/packages/latte/ui/ui/inline/inline.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.inline",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/input/input.latte b/packages/latte/ui/ui/input/input.latte
new file mode 100644
index 0000000..cd19c9c
--- /dev/null
+++ b/packages/latte/ui/ui/input/input.latte
@@ -0,0 +1,21 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/input.json
+    Input: Input renders a styled single-line form control.
+    Props (p): Variant (string), Size (string), Class (string), Type (string), Name (string), Value (string), Placeholder (string), Disabled (bool), Required (bool), Autocomplete (string), Min (string), Max (string), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). *}
+<input
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  type="{=ui_default_if_empty(($p['Type'] ?? ''), 'text')}"
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Value'] ?? ''))} value="{=($p['Value'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Placeholder'] ?? ''))} placeholder="{=($p['Placeholder'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Autocomplete'] ?? ''))} autocomplete="{=($p['Autocomplete'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Min'] ?? ''))} min="{=($p['Min'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Max'] ?? ''))} max="{=($p['Max'] ?? '')}"{/if}
+  class="{=ui_compose('ui/input/input.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {if ($p['Required'] ?? false)} required{/if}
+  {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['TabIndex'] ?? ''))} tabindex="{=($p['TabIndex'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/input/input.variants.json b/packages/latte/ui/ui/input/input.variants.json
new file mode 100644
index 0000000..43bf16e
--- /dev/null
+++ b/packages/latte/ui/ui/input/input.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.input",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-base md:text-sm",
+      "default": "h-10 px-3 text-base md:text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/label/label.latte b/packages/latte/ui/ui/label/label.latte
new file mode 100644
index 0000000..84bb2cb
--- /dev/null
+++ b/packages/latte/ui/ui/label/label.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/label.json
+    Label: Label renders accessible text linked to a control.
+    Props (p): Class (string), HTMLFor (string), Attrs (attrs); children: markup. *}
+<label
+  class="{=ui_compose('ui/label/label.variants.json', [], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['HTMLFor'] ?? ''))} for="{=($p['HTMLFor'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</label>
diff --git a/packages/latte/ui/ui/label/label.variants.json b/packages/latte/ui/ui/label/label.variants.json
new file mode 100644
index 0000000..bdebe07
--- /dev/null
+++ b/packages/latte/ui/ui/label/label.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.label",
+  "base": "text-xs font-bold text-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/linebreak/break.latte b/packages/latte/ui/ui/linebreak/break.latte
new file mode 100644
index 0000000..5dd3e01
--- /dev/null
+++ b/packages/latte/ui/ui/linebreak/break.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/linebreak.json
+    Break: Break renders br by default, or wbr when Type is wbr/word.
+    Props (p): Type (string), Class (string), Attrs (attrs). *}
+{var $tag1 = ui_map_or(ui_map_or(($p['Type'] ?? ''), ['wbr' => 'wbr', 'word' => 'wbr'], 'br'), ['wbr' => 'wbr', 'br' => 'br'], 'br')}
+<br n:tag="$tag1"
+  class="{=ui_compose('ui/linebreak/linebreak.variants.json', [], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/linebreak/linebreak.variants.json b/packages/latte/ui/ui/linebreak/linebreak.variants.json
new file mode 100644
index 0000000..eafffc3
--- /dev/null
+++ b/packages/latte/ui/ui/linebreak/linebreak.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.linebreak",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/link-plain/link-plain.latte b/packages/latte/ui/ui/link-plain/link-plain.latte
new file mode 100644
index 0000000..2893114
--- /dev/null
+++ b/packages/latte/ui/ui/link-plain/link-plain.latte
@@ -0,0 +1,20 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/link-plain.json
+    LinkPlain: LinkPlain is a bare anchor: no styling beyond Class.
+    Props (p): Class (string), Href (string), Target (string), Rel (string), Download (string), External (bool), Disabled (bool), AriaCurrent (string), AriaLabel (string), ID (string), Role (string), Attrs (attrs); children: markup. *}
+{var $d_target = (ui_is_set_str(($p['Target'] ?? '')) ? ($p['Target'] ?? '') : (($p['External'] ?? false) ? '_blank' : ''))}
+{var $d_rel = (ui_is_set_str(($p['Rel'] ?? '')) ? ($p['Rel'] ?? '') : ((($p['External'] ?? false) || ui_eq($d_target, '_blank')) ? 'noopener noreferrer' : ''))}
+<a
+  {if ui_is_set_str(($p['Href'] ?? ''))} href="{=($p['Href'] ?? '')|nocheck}"{/if}
+  class="{=ui_compose('ui/link-plain/link-plain.variants.json', [], [(($p['Disabled'] ?? false) ? 'pointer-events-none opacity-50' : ''), ($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  {if ui_is_set_str($d_target)} target="{=$d_target}"{/if}
+  {if ui_is_set_str($d_rel)} rel="{=$d_rel}"{/if}
+  {if ui_is_set_str(($p['Download'] ?? ''))} download="{=($p['Download'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaCurrent'] ?? ''))} aria-current="{=($p['AriaCurrent'] ?? '')}"{/if}
+  {if ($p['Disabled'] ?? false)} aria-disabled="true"{/if}
+  {if ($p['Disabled'] ?? false)} tabindex="-1"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</a>
diff --git a/packages/latte/ui/ui/link-plain/link-plain.variants.json b/packages/latte/ui/ui/link-plain/link-plain.variants.json
new file mode 100644
index 0000000..9915f9b
--- /dev/null
+++ b/packages/latte/ui/ui/link-plain/link-plain.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.link-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/link/link.latte b/packages/latte/ui/ui/link/link.latte
new file mode 100644
index 0000000..54c0bcd
--- /dev/null
+++ b/packages/latte/ui/ui/link/link.latte
@@ -0,0 +1,20 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/link.json
+    Link: Link renders a semantic anchor element.
+    Props (p): Variant (string), Size (string), Class (string), Href (string), Target (string), Rel (string), Download (string), External (bool), Disabled (bool), AriaCurrent (string), AriaLabel (string), ID (string), Role (string), Attrs (attrs); children: markup. *}
+{var $d_target = (ui_is_set_str(($p['Target'] ?? '')) ? ($p['Target'] ?? '') : (($p['External'] ?? false) ? '_blank' : ''))}
+{var $d_rel = (ui_is_set_str(($p['Rel'] ?? '')) ? ($p['Rel'] ?? '') : ((($p['External'] ?? false) || ui_eq($d_target, '_blank')) ? 'noopener noreferrer' : ''))}
+<a
+  {if ui_is_set_str(($p['Href'] ?? ''))} href="{=($p['Href'] ?? '')|nocheck}"{/if}
+  class="{=ui_compose('ui/link/link.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [(($p['Disabled'] ?? false) ? 'pointer-events-none opacity-50' : ''), ($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  {if ui_is_set_str($d_target)} target="{=$d_target}"{/if}
+  {if ui_is_set_str($d_rel)} rel="{=$d_rel}"{/if}
+  {if ui_is_set_str(($p['Download'] ?? ''))} download="{=($p['Download'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaCurrent'] ?? ''))} aria-current="{=($p['AriaCurrent'] ?? '')}"{/if}
+  {if ($p['Disabled'] ?? false)} aria-disabled="true"{/if}
+  {if ($p['Disabled'] ?? false)} tabindex="-1"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</a>
diff --git a/packages/latte/ui/ui/link/link.variants.json b/packages/latte/ui/ui/link/link.variants.json
new file mode 100644
index 0000000..6478252
--- /dev/null
+++ b/packages/latte/ui/ui/link/link.variants.json
@@ -0,0 +1,28 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.link",
+  "base": "inline-flex items-center underline-offset-4",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "gap-2 text-sm font-medium",
+      "default": "gap-2 text-base font-semibold",
+      "md": "gap-2 text-xl font-semibold",
+      "lg": "gap-2 text-2xl font-semibold"
+    },
+    "variant": {
+      "block": "flex w-full text-foreground",
+      "default": "text-foreground hover:underline",
+      "external": "text-foreground hover:underline",
+      "muted": "text-muted-foreground hover:text-foreground",
+      "nav": "text-foreground"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/list/list-item.latte b/packages/latte/ui/ui/list/list-item.latte
new file mode 100644
index 0000000..de64316
--- /dev/null
+++ b/packages/latte/ui/ui/list/list-item.latte
@@ -0,0 +1,10 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/list.json
+    ListItem: ListItem renders one li with optional value attribute.
+    Props (p): Class (string), Tag (string), Value (int), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_resolve_tag(($p['Tag'] ?? ''), 'li', ['li', 'dt', 'dd'])}
+<li n:tag="$tag1"
+  class="{=ui_compose('ui/list/list.variants.json', [], [($p['Class'] ?? '')])}"
+  {if ((($p['Value'] ?? 0) > 0) && ui_eq($tag1, 'li'))} value="{=ui_s(($p['Value'] ?? 0))}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</li>
diff --git a/packages/latte/ui/ui/list/list.latte b/packages/latte/ui/ui/list/list.latte
new file mode 100644
index 0000000..4576593
--- /dev/null
+++ b/packages/latte/ui/ui/list/list.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/list.json
+    List: List renders a list container (ul, ol, dl, or menu).
+    Props (p): Class (string), Tag (string), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_resolve_tag(($p['Tag'] ?? ''), 'ul', ['ul', 'ol', 'dl', 'menu'])}
+<ul n:tag="$tag1"
+  class="{=ui_compose('ui/list/list.variants.json', [], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</ul>
diff --git a/packages/latte/ui/ui/list/list.variants.json b/packages/latte/ui/ui/list/list.variants.json
new file mode 100644
index 0000000..59bcd92
--- /dev/null
+++ b/packages/latte/ui/ui/list/list.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.list",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/lucide-icon/lucide-icon.latte b/packages/latte/ui/ui/lucide-icon/lucide-icon.latte
new file mode 100644
index 0000000..cf7242a
--- /dev/null
+++ b/packages/latte/ui/ui/lucide-icon/lucide-icon.latte
@@ -0,0 +1,12 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/runtimes/latte/assets/lucide-icon.latte
+    LucideIcon (asset). *}
+{* LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from lucide-icons.json next to this file.
+   Decorative (aria-hidden) unless a Label is given. Size and StrokeWidth default to 16 and 2. *}
+{var $size = ($p['Size'] ?? 0) ?: 16}
+{var $label = $p['Label'] ?? ''}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="{=$size}" height="{=$size}" fill="none" stroke="currentColor"
+  stroke-width="{=($p['StrokeWidth'] ?? 0) ?: 2}" stroke-linecap="round" stroke-linejoin="round"
+  class="{=ui_cn(['inline-block shrink-0', $p['Class'] ?? ''])}"
+  {if $label === ''} aria-hidden="true"{else} aria-label="{=$label}" role="img"{/if} data-slot="icon"
+  {if ($p['Name'] ?? '') !== ''} data-lucide="{=$p['Name']}"{/if}{=ui_attr_html($p['Attrs'] ?? [])|noescape}>{=ui_lucide($p['Name'] ?? '')|noescape}</svg>
diff --git a/packages/latte/ui/ui/lucide-icon/lucide-icons.json b/packages/latte/ui/ui/lucide-icon/lucide-icons.json
new file mode 100644
index 0000000..7b47b1f
--- /dev/null
+++ b/packages/latte/ui/ui/lucide-icon/lucide-icons.json
@@ -0,0 +1,6625 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "source": "Lucide icons (ISC license, https://lucide.dev): the glyphs the canary registry names. Harvested by spec/tools/harvest-lucide.ts. Rendering: <svg viewBox=0 0 24 24> with these nodes.",
+  "icons": {
+    "accessibility": [
+      [
+        "circle",
+        {
+          "cx": "16",
+          "cy": "4",
+          "r": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m18 19 1-7-6 1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m5 8 3-3 5.5 3-2.36 3.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.24 14.5a5 5 0 0 0 6.88 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13.76 17.5a5 5 0 0 0-6.88-6"
+        }
+      ]
+    ],
+    "activity": [
+      [
+        "path",
+        {
+          "d": "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+        }
+      ]
+    ],
+    "anchor": [
+      [
+        "path",
+        {
+          "d": "M12 6v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 13 2-1a9 9 0 0 1-18 0l2 1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 11h6"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "4",
+          "r": "2"
+        }
+      ]
+    ],
+    "archive": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "5",
+          "x": "2",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 12h4"
+        }
+      ]
+    ],
+    "arrow-down": [
+      [
+        "path",
+        {
+          "d": "M12 5v14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 12-7 7-7-7"
+        }
+      ]
+    ],
+    "arrow-down-up": [
+      [
+        "path",
+        {
+          "d": "m3 16 4 4 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 20V4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 8-4-4-4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 4v16"
+        }
+      ]
+    ],
+    "arrow-left": [
+      [
+        "path",
+        {
+          "d": "m12 19-7-7 7-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 12H5"
+        }
+      ]
+    ],
+    "arrow-right": [
+      [
+        "path",
+        {
+          "d": "M5 12h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m12 5 7 7-7 7"
+        }
+      ]
+    ],
+    "arrow-up": [
+      [
+        "path",
+        {
+          "d": "m5 12 7-7 7 7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 19V5"
+        }
+      ]
+    ],
+    "arrow-up-right": [
+      [
+        "path",
+        {
+          "d": "M7 7h10v10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 17 17 7"
+        }
+      ]
+    ],
+    "at-sign": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"
+        }
+      ]
+    ],
+    "badge-check": [
+      [
+        "path",
+        {
+          "d": "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 9-5.5 5.5L8 12"
+        }
+      ]
+    ],
+    "badge-dollar-sign": [
+      [
+        "path",
+        {
+          "d": "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18V6"
+        }
+      ]
+    ],
+    "ban": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.929 4.929 19.07 19.071"
+        }
+      ]
+    ],
+    "banknote": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "12",
+          "x": "2",
+          "y": "6",
+          "rx": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 12h.01M18 12h.01"
+        }
+      ]
+    ],
+    "bell": [
+      [
+        "path",
+        {
+          "d": "M10.268 21a2 2 0 0 0 3.464 0"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+        }
+      ]
+    ],
+    "blocks": [
+      [
+        "path",
+        {
+          "d": "M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "14",
+          "y": "2",
+          "width": "8",
+          "height": "8",
+          "rx": "1"
+        }
+      ]
+    ],
+    "bold": [
+      [
+        "path",
+        {
+          "d": "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"
+        }
+      ]
+    ],
+    "bolt": [
+      [
+        "path",
+        {
+          "d": "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ]
+    ],
+    "book-open": [
+      [
+        "path",
+        {
+          "d": "M12 5v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"
+        }
+      ]
+    ],
+    "book-open-text": [
+      [
+        "path",
+        {
+          "d": "M12 5v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 9h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 9h2"
+        }
+      ]
+    ],
+    "book-x": [
+      [
+        "path",
+        {
+          "d": "m14.5 7.5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.5 7.5 5 5"
+        }
+      ]
+    ],
+    "bookmark": [
+      [
+        "path",
+        {
+          "d": "M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"
+        }
+      ]
+    ],
+    "bot": [
+      [
+        "path",
+        {
+          "d": "M12 8V4H8"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "16",
+          "height": "12",
+          "x": "4",
+          "y": "8",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 14h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 14h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 13v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 13v2"
+        }
+      ]
+    ],
+    "boxes": [
+      [
+        "path",
+        {
+          "d": "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 16.5-4.74-2.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 16.5 5-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 16.5v5.17"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 16.5-5-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 16.5 4.74-2.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 16.5v5.17"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8 7.26 5.15"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m12 8 4.74-2.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 13.5V8"
+        }
+      ]
+    ],
+    "brain": [
+      [
+        "path",
+        {
+          "d": "M12 18V5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.997 5.125a4 4 0 0 1 2.526 5.77"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 18a4 4 0 0 0 2-7.464"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 18a4 4 0 0 1-2-7.464"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6.003 5.125a4 4 0 0 0-2.526 5.77"
+        }
+      ]
+    ],
+    "briefcase": [
+      [
+        "path",
+        {
+          "d": "M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "6",
+          "rx": "2"
+        }
+      ]
+    ],
+    "brush": [
+      [
+        "path",
+        {
+          "d": "m11 10 3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"
+        }
+      ]
+    ],
+    "building": [
+      [
+        "path",
+        {
+          "d": "M12 10h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 6h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 10h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 6h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 10h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 6h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "4",
+          "y": "2",
+          "width": "16",
+          "height": "20",
+          "rx": "2"
+        }
+      ]
+    ],
+    "calendar": [
+      [
+        "path",
+        {
+          "d": "M8 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 2v3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "3",
+          "width": "18",
+          "height": "18",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ]
+    ],
+    "calendar-days": [
+      [
+        "path",
+        {
+          "d": "M8 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 2v3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "3",
+          "width": "18",
+          "height": "18",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 17h.01"
+        }
+      ]
+    ],
+    "calendar-range": [
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "3",
+          "width": "18",
+          "height": "18",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 13h-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 17H7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 17h.01"
+        }
+      ]
+    ],
+    "camera": [
+      [
+        "path",
+        {
+          "d": "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "13",
+          "r": "3"
+        }
+      ]
+    ],
+    "chart-area": [
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"
+        }
+      ]
+    ],
+    "chart-column": [
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 17V9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 17V5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 17v-3"
+        }
+      ]
+    ],
+    "chart-line": [
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 9-5 5-4-4-3 3"
+        }
+      ]
+    ],
+    "chart-pie": [
+      [
+        "path",
+        {
+          "d": "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.21 15.89A10 10 0 1 1 8 2.83"
+        }
+      ]
+    ],
+    "chart-scatter": [
+      [
+        "circle",
+        {
+          "cx": "7.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18.5",
+          "cy": "5.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11.5",
+          "cy": "11.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7.5",
+          "cy": "16.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17.5",
+          "cy": "14.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ]
+    ],
+    "check": [
+      [
+        "path",
+        {
+          "d": "M20 6 9 17l-5-5"
+        }
+      ]
+    ],
+    "chevron-down": [
+      [
+        "path",
+        {
+          "d": "m6 9 6 6 6-6"
+        }
+      ]
+    ],
+    "chevron-left": [
+      [
+        "path",
+        {
+          "d": "m15 18-6-6 6-6"
+        }
+      ]
+    ],
+    "chevron-right": [
+      [
+        "path",
+        {
+          "d": "m9 18 6-6-6-6"
+        }
+      ]
+    ],
+    "chevron-up": [
+      [
+        "path",
+        {
+          "d": "m18 15-6-6-6 6"
+        }
+      ]
+    ],
+    "chevrons-down": [
+      [
+        "path",
+        {
+          "d": "m7 6 5 5 5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 13 5 5 5-5"
+        }
+      ]
+    ],
+    "chevrons-up": [
+      [
+        "path",
+        {
+          "d": "m17 11-5-5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 18-5-5-5 5"
+        }
+      ]
+    ],
+    "chevrons-up-down": [
+      [
+        "path",
+        {
+          "d": "m7 15 5 5 5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 9 5-5 5 5"
+        }
+      ]
+    ],
+    "circle": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ]
+    ],
+    "circle-alert": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12",
+          "y1": "8",
+          "y2": "12"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12.01",
+          "y1": "16",
+          "y2": "16"
+        }
+      ]
+    ],
+    "circle-check": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 9-5.5 5.5L8 12"
+        }
+      ]
+    ],
+    "circle-dollar-sign": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18V6"
+        }
+      ]
+    ],
+    "circle-dot": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ]
+    ],
+    "circle-play": [
+      [
+        "path",
+        {
+          "d": "M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ]
+    ],
+    "circle-plus": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8v8"
+        }
+      ]
+    ],
+    "circle-question-mark": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ]
+    ],
+    "circle-slash": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "9",
+          "x2": "15",
+          "y1": "15",
+          "y2": "9"
+        }
+      ]
+    ],
+    "circle-user": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "10",
+          "r": "3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"
+        }
+      ]
+    ],
+    "circle-x": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 9-6 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 9 6 6"
+        }
+      ]
+    ],
+    "clipboard-check": [
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "4",
+          "x": "8",
+          "y": "2",
+          "rx": "1",
+          "ry": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 14 2 2 4-4"
+        }
+      ]
+    ],
+    "clipboard-list": [
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "4",
+          "x": "8",
+          "y": "2",
+          "rx": "1",
+          "ry": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 11h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 11h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 16h.01"
+        }
+      ]
+    ],
+    "clock": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 6v6l4 2"
+        }
+      ]
+    ],
+    "cloud": [
+      [
+        "path",
+        {
+          "d": "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
+        }
+      ]
+    ],
+    "cloud-off": [
+      [
+        "path",
+        {
+          "d": "M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m2 2 20 20"
+        }
+      ]
+    ],
+    "cloud-upload": [
+      [
+        "path",
+        {
+          "d": "M12 13v8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m8 17 4-4 4 4"
+        }
+      ]
+    ],
+    "code-xml": [
+      [
+        "path",
+        {
+          "d": "m18 16 4-4-4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 8-4 4 4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.5 4-5 16"
+        }
+      ]
+    ],
+    "columns-3": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 3v18"
+        }
+      ]
+    ],
+    "command": [
+      [
+        "path",
+        {
+          "d": "M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
+        }
+      ]
+    ],
+    "compass": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"
+        }
+      ]
+    ],
+    "cookie": [
+      [
+        "path",
+        {
+          "d": "M11 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 12h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 16h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 3h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 4h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 8h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 8h.01"
+        }
+      ]
+    ],
+    "copy": [
+      [
+        "rect",
+        {
+          "width": "14",
+          "height": "14",
+          "x": "8",
+          "y": "8",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+        }
+      ]
+    ],
+    "credit-card": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "5",
+          "rx": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "2",
+          "x2": "22",
+          "y1": "10",
+          "y2": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 14h2"
+        }
+      ]
+    ],
+    "database": [
+      [
+        "ellipse",
+        {
+          "cx": "12",
+          "cy": "5",
+          "rx": "9",
+          "ry": "3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5V19A9 3 0 0 0 21 19V5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12A9 3 0 0 0 21 12"
+        }
+      ]
+    ],
+    "dollar-sign": [
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12",
+          "y1": "2",
+          "y2": "22"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
+        }
+      ]
+    ],
+    "dot": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ]
+    ],
+    "download": [
+      [
+        "path",
+        {
+          "d": "M12 15V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 10 5 5 5-5"
+        }
+      ]
+    ],
+    "ellipsis": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "19",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "5",
+          "cy": "12",
+          "r": "1"
+        }
+      ]
+    ],
+    "ellipsis-vertical": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "5",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "19",
+          "r": "1"
+        }
+      ]
+    ],
+    "external-link": [
+      [
+        "path",
+        {
+          "d": "M15 3h6v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 14 21 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+        }
+      ]
+    ],
+    "eye": [
+      [
+        "path",
+        {
+          "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "3"
+        }
+      ]
+    ],
+    "eye-off": [
+      [
+        "path",
+        {
+          "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m2 2 20 20"
+        }
+      ]
+    ],
+    "file": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ]
+    ],
+    "file-code": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 12.5 8 15l2 2.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14 12.5 2 2.5-2 2.5"
+        }
+      ]
+    ],
+    "file-down": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18v-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 15 3 3 3-3"
+        }
+      ]
+    ],
+    "file-image": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "12",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"
+        }
+      ]
+    ],
+    "file-pen": [
+      [
+        "path",
+        {
+          "d": "M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"
+        }
+      ]
+    ],
+    "file-pen-line": [
+      [
+        "path",
+        {
+          "d": "M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14.487 7.858A1 1 0 0 1 14 7V2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 18h1"
+        }
+      ]
+    ],
+    "file-plus": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 15h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18v-6"
+        }
+      ]
+    ],
+    "file-question-mark": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"
+        }
+      ]
+    ],
+    "file-search": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11.5",
+          "cy": "14.5",
+          "r": "2.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13.3 16.3 15 18"
+        }
+      ]
+    ],
+    "file-spreadsheet": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 17h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 17h2"
+        }
+      ]
+    ],
+    "file-text": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 9H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 13H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 17H8"
+        }
+      ]
+    ],
+    "file-up": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 12v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 15-3-3-3 3"
+        }
+      ]
+    ],
+    "file-video-camera": [
+      [
+        "path",
+        {
+          "d": "M4 12V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m10 17.843 3.033-1.755a.64.64 0 0 1 .967.56v4.704a.65.65 0 0 1-.967.56L10 20.157"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "6",
+          "x": "3",
+          "y": "16",
+          "rx": "1"
+        }
+      ]
+    ],
+    "files": [
+      [
+        "path",
+        {
+          "d": "M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1"
+        }
+      ]
+    ],
+    "film": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 7.5h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 16.5h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 7.5h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 16.5h4"
+        }
+      ]
+    ],
+    "fingerprint-pattern": [
+      [
+        "path",
+        {
+          "d": "M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 13.12c0 2.38 0 6.38-1 8.88"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.29 21.02c.12-.6.43-2.3.5-3.02"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12a10 10 0 0 1 18-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 16h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.8 16c.2-2 .131-5.354 0-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8.65 22c.21-.66.45-1.32.57-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 6.8a6 6 0 0 1 9 5.2v2"
+        }
+      ]
+    ],
+    "flag": [
+      [
+        "path",
+        {
+          "d": "M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"
+        }
+      ]
+    ],
+    "folder": [
+      [
+        "path",
+        {
+          "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+        }
+      ]
+    ],
+    "folder-archive": [
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "19",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 11v-1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 17v-2"
+        }
+      ]
+    ],
+    "folder-kanban": [
+      [
+        "path",
+        {
+          "d": "M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 10v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 10v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 10v6"
+        }
+      ]
+    ],
+    "folder-open": [
+      [
+        "path",
+        {
+          "d": "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
+        }
+      ]
+    ],
+    "folder-plus": [
+      [
+        "path",
+        {
+          "d": "M12 10v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 13h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+        }
+      ]
+    ],
+    "folder-tree": [
+      [
+        "path",
+        {
+          "d": "M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5a2 2 0 0 0 2 2h3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3v13a2 2 0 0 0 2 2h3"
+        }
+      ]
+    ],
+    "funnel": [
+      [
+        "path",
+        {
+          "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
+        }
+      ]
+    ],
+    "gift": [
+      [
+        "path",
+        {
+          "d": "M12 7v14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "7",
+          "width": "18",
+          "height": "4",
+          "rx": "1"
+        }
+      ]
+    ],
+    "git-compare": [
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "18",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6",
+          "cy": "6",
+          "r": "3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 6h3a2 2 0 0 1 2 2v7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 18H8a2 2 0 0 1-2-2V9"
+        }
+      ]
+    ],
+    "globe": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h20"
+        }
+      ]
+    ],
+    "globe-lock": [
+      [
+        "path",
+        {
+          "d": "M15.686 15A14.5 14.5 0 0 1 12 22a14.5 14.5 0 0 1 0-20 10 10 0 1 0 9.542 13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h8.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 6V4a2 2 0 1 0-4 0v2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "5",
+          "x": "14",
+          "y": "6",
+          "rx": "1"
+        }
+      ]
+    ],
+    "graduation-cap": [
+      [
+        "path",
+        {
+          "d": "M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 10v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 12.5V16a6 3 0 0 0 12 0v-3.5"
+        }
+      ]
+    ],
+    "grid-3x3": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 15h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 3v18"
+        }
+      ]
+    ],
+    "grip-vertical": [
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "5",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "19",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "5",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "19",
+          "r": "1"
+        }
+      ]
+    ],
+    "group": [
+      [
+        "path",
+        {
+          "d": "M3 7V5c0-1.1.9-2 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 3h2c1.1 0 2 .9 2 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 17v2c0 1.1-.9 2-2 2h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 21H5c-1.1 0-2-.9-2-2v-2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "7",
+          "y": "7",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "10",
+          "y": "12",
+          "rx": "1"
+        }
+      ]
+    ],
+    "handshake": [
+      [
+        "path",
+        {
+          "d": "m11 17 2 2a1 1 0 1 0 3-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 3 1 11h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 4h8"
+        }
+      ]
+    ],
+    "hash": [
+      [
+        "line",
+        {
+          "x1": "4",
+          "x2": "20",
+          "y1": "9",
+          "y2": "9"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "4",
+          "x2": "20",
+          "y1": "15",
+          "y2": "15"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "10",
+          "x2": "8",
+          "y1": "3",
+          "y2": "21"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "16",
+          "x2": "14",
+          "y1": "3",
+          "y2": "21"
+        }
+      ]
+    ],
+    "heading": [
+      [
+        "path",
+        {
+          "d": "M6 12h12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 20V4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 20V4"
+        }
+      ]
+    ],
+    "headphones": [
+      [
+        "path",
+        {
+          "d": "M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"
+        }
+      ]
+    ],
+    "heart": [
+      [
+        "path",
+        {
+          "d": "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+        }
+      ]
+    ],
+    "heart-handshake": [
+      [
+        "path",
+        {
+          "d": "M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"
+        }
+      ]
+    ],
+    "hourglass": [
+      [
+        "path",
+        {
+          "d": "M5 22h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 2h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"
+        }
+      ]
+    ],
+    "house": [
+      [
+        "path",
+        {
+          "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+        }
+      ]
+    ],
+    "id-card": [
+      [
+        "path",
+        {
+          "d": "M13 19a4 4 0 00-8 0"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 10h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 14h2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "2",
+          "y": "5",
+          "width": "20",
+          "height": "14",
+          "rx": "2"
+        }
+      ]
+    ],
+    "image": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "9",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+        }
+      ]
+    ],
+    "image-off": [
+      [
+        "line",
+        {
+          "x1": "2",
+          "x2": "22",
+          "y1": "2",
+          "y2": "22"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10.41 10.41a2 2 0 1 1-2.83-2.83"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "13.5",
+          "x2": "6",
+          "y1": "13.5",
+          "y2": "21"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "18",
+          "x2": "21",
+          "y1": "12",
+          "y2": "15"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15V5a2 2 0 0 0-2-2H9"
+        }
+      ]
+    ],
+    "image-plus": [
+      [
+        "path",
+        {
+          "d": "M16 5h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 2v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "9",
+          "r": "2"
+        }
+      ]
+    ],
+    "images": [
+      [
+        "path",
+        {
+          "d": "m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "13",
+          "cy": "7",
+          "r": "1",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "8",
+          "y": "2",
+          "width": "14",
+          "height": "14",
+          "rx": "2"
+        }
+      ]
+    ],
+    "inbox": [
+      [
+        "polyline",
+        {
+          "points": "22 12 16 12 14 15 10 15 8 12 2 12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
+        }
+      ]
+    ],
+    "info": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16v-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8h.01"
+        }
+      ]
+    ],
+    "italic": [
+      [
+        "line",
+        {
+          "x1": "19",
+          "x2": "10",
+          "y1": "4",
+          "y2": "4"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "14",
+          "x2": "5",
+          "y1": "20",
+          "y2": "20"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "15",
+          "x2": "9",
+          "y1": "4",
+          "y2": "20"
+        }
+      ]
+    ],
+    "kanban": [
+      [
+        "path",
+        {
+          "d": "M5 3v14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 3v8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 3v18"
+        }
+      ]
+    ],
+    "key": [
+      [
+        "path",
+        {
+          "d": "m2 21 9.6-9.6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7.5 15.5 2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15.5",
+          "cy": "7.5",
+          "r": "5.5"
+        }
+      ]
+    ],
+    "key-round": [
+      [
+        "path",
+        {
+          "d": "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "16.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "lamp-desk": [
+      [
+        "path",
+        {
+          "d": "M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.207 4.793-3.414 3.414"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18"
+        }
+      ]
+    ],
+    "landmark": [
+      [
+        "path",
+        {
+          "d": "M10 18v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 18v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 18v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 22h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 18v-7"
+        }
+      ]
+    ],
+    "languages": [
+      [
+        "path",
+        {
+          "d": "m5 8 6 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4 14 6-6 2-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 5h12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 22-5-10-5 10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 18h6"
+        }
+      ]
+    ],
+    "laptop": [
+      [
+        "path",
+        {
+          "d": "M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.054 15.987H3.946"
+        }
+      ]
+    ],
+    "layers": [
+      [
+        "path",
+        {
+          "d": "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"
+        }
+      ]
+    ],
+    "layout-dashboard": [
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "9",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "14",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "9",
+          "x": "14",
+          "y": "12",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "3",
+          "y": "16",
+          "rx": "1"
+        }
+      ]
+    ],
+    "layout-grid": [
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "14",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "14",
+          "y": "14",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "14",
+          "rx": "1"
+        }
+      ]
+    ],
+    "layout-list": [
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "14",
+          "rx": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 4h7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 9h7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 15h7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 20h7"
+        }
+      ]
+    ],
+    "layout-template": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "7",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "9",
+          "height": "7",
+          "x": "3",
+          "y": "14",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "7",
+          "x": "16",
+          "y": "14",
+          "rx": "1"
+        }
+      ]
+    ],
+    "life-buoy": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.93 4.93 4.24 4.24"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.83 9.17 4.24-4.24"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.83 14.83 4.24 4.24"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.17 14.83-4.24 4.24"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ]
+    ],
+    "lightbulb": [
+      [
+        "path",
+        {
+          "d": "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 18h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 22h4"
+        }
+      ]
+    ],
+    "link": [
+      [
+        "path",
+        {
+          "d": "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+        }
+      ]
+    ],
+    "link-2": [
+      [
+        "path",
+        {
+          "d": "M9 17H7A5 5 0 0 1 7 7h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 7h2a5 5 0 1 1 0 10h-2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "8",
+          "x2": "16",
+          "y1": "12",
+          "y2": "12"
+        }
+      ]
+    ],
+    "list": [
+      [
+        "path",
+        {
+          "d": "M3 5h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 19h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 5h13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 12h13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 19h13"
+        }
+      ]
+    ],
+    "list-checks": [
+      [
+        "path",
+        {
+          "d": "M13 5h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m3 17 2 2 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m3 7 2 2 4-4"
+        }
+      ]
+    ],
+    "list-filter": [
+      [
+        "path",
+        {
+          "d": "M2 5h20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 12h12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 19h6"
+        }
+      ]
+    ],
+    "list-ordered": [
+      [
+        "path",
+        {
+          "d": "M11 5h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 12h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 19h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 4h1v5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 9h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"
+        }
+      ]
+    ],
+    "list-todo": [
+      [
+        "path",
+        {
+          "d": "M13 5h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m3 17 2 2 4-4"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "4",
+          "width": "6",
+          "height": "6",
+          "rx": "1"
+        }
+      ]
+    ],
+    "list-tree": [
+      [
+        "path",
+        {
+          "d": "M8 5h13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 10a2 2 0 0 0 2 2h3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5v12a2 2 0 0 0 2 2h3"
+        }
+      ]
+    ],
+    "loader": [
+      [
+        "path",
+        {
+          "d": "M12 2v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.2 7.8 2.9-2.9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 12h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.2 16.2 2.9 2.9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.9 19.1 2.9-2.9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.9 4.9 2.9 2.9"
+        }
+      ]
+    ],
+    "loader-circle": [
+      [
+        "path",
+        {
+          "d": "M21 12a9 9 0 1 1-6.219-8.56"
+        }
+      ]
+    ],
+    "lock": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "11",
+          "x": "3",
+          "y": "11",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 11V7a5 5 0 0 1 10 0v4"
+        }
+      ]
+    ],
+    "lock-keyhole": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "16",
+          "r": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "10",
+          "width": "18",
+          "height": "12",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 10V7a5 5 0 0 1 10 0v3"
+        }
+      ]
+    ],
+    "log-in": [
+      [
+        "path",
+        {
+          "d": "m10 17 5-5-5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 12H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"
+        }
+      ]
+    ],
+    "log-out": [
+      [
+        "path",
+        {
+          "d": "m16 17 5-5-5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12H9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+        }
+      ]
+    ],
+    "mail": [
+      [
+        "path",
+        {
+          "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "2",
+          "y": "4",
+          "width": "20",
+          "height": "16",
+          "rx": "2"
+        }
+      ]
+    ],
+    "mail-check": [
+      [
+        "path",
+        {
+          "d": "M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 19 2 2 4-4"
+        }
+      ]
+    ],
+    "mail-open": [
+      [
+        "path",
+        {
+          "d": "M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"
+        }
+      ]
+    ],
+    "map-pin": [
+      [
+        "path",
+        {
+          "d": "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "10",
+          "r": "3"
+        }
+      ]
+    ],
+    "megaphone": [
+      [
+        "path",
+        {
+          "d": "M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 6v8"
+        }
+      ]
+    ],
+    "menu": [
+      [
+        "path",
+        {
+          "d": "M4 5h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 12h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 19h16"
+        }
+      ]
+    ],
+    "message-circle": [
+      [
+        "path",
+        {
+          "d": "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+        }
+      ]
+    ],
+    "message-circle-question-mark": [
+      [
+        "path",
+        {
+          "d": "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ]
+    ],
+    "message-square": [
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ]
+    ],
+    "message-square-more": [
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 11h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 11h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 11h.01"
+        }
+      ]
+    ],
+    "message-square-quote": [
+      [
+        "path",
+        {
+          "d": "M14 14a2 2 0 0 0 2-2V8h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 14a2 2 0 0 0 2-2V8H8"
+        }
+      ]
+    ],
+    "message-square-text": [
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 11h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 15h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 7h8"
+        }
+      ]
+    ],
+    "messages-square": [
+      [
+        "path",
+        {
+          "d": "M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"
+        }
+      ]
+    ],
+    "minus": [
+      [
+        "path",
+        {
+          "d": "M5 12h14"
+        }
+      ]
+    ],
+    "monitor": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "8",
+          "x2": "16",
+          "y1": "21",
+          "y2": "21"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12",
+          "y1": "17",
+          "y2": "21"
+        }
+      ]
+    ],
+    "monitor-smartphone": [
+      [
+        "path",
+        {
+          "d": "M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 19v-3.96 3.15"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 19h5"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "6",
+          "height": "10",
+          "x": "16",
+          "y": "12",
+          "rx": "2"
+        }
+      ]
+    ],
+    "moon": [
+      [
+        "path",
+        {
+          "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+        }
+      ]
+    ],
+    "mountain": [
+      [
+        "path",
+        {
+          "d": "m8 3 4 8 5-5 5 15H2L8 3z"
+        }
+      ]
+    ],
+    "mouse-pointer-click": [
+      [
+        "path",
+        {
+          "d": "M14 4.1 12 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m5.1 8-2.9-.8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 12-1.9 2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.2 2.2 8 5.1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"
+        }
+      ]
+    ],
+    "move-right": [
+      [
+        "path",
+        {
+          "d": "M18 8L22 12L18 16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12H22"
+        }
+      ]
+    ],
+    "music": [
+      [
+        "path",
+        {
+          "d": "M9 18V5l12-2v13"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6",
+          "cy": "18",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "16",
+          "r": "3"
+        }
+      ]
+    ],
+    "newspaper": [
+      [
+        "path",
+        {
+          "d": "M15 18h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 14h-8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "4",
+          "x": "10",
+          "y": "6",
+          "rx": "1"
+        }
+      ]
+    ],
+    "orbit": [
+      [
+        "path",
+        {
+          "d": "M20.341 6.484A10 10 0 0 1 10.266 21.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.659 17.516A10 10 0 0 1 13.74 2.152"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "19",
+          "cy": "5",
+          "r": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "5",
+          "cy": "19",
+          "r": "2"
+        }
+      ]
+    ],
+    "package": [
+      [
+        "path",
+        {
+          "d": "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 22V12"
+        }
+      ],
+      [
+        "polyline",
+        {
+          "points": "3.29 7 12 12 20.71 7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7.5 4.27 9 5.15"
+        }
+      ]
+    ],
+    "package-check": [
+      [
+        "path",
+        {
+          "d": "M12 22V12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 17 2 2 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.29 7 12 12l8.71-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7.5 4.27 8.997 5.148"
+        }
+      ]
+    ],
+    "package-open": [
+      [
+        "path",
+        {
+          "d": "M12 22v-9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"
+        }
+      ]
+    ],
+    "palette": [
+      [
+        "path",
+        {
+          "d": "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "13.5",
+          "cy": "6.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17.5",
+          "cy": "10.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6.5",
+          "cy": "12.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "8.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "panel-bottom": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 15h18"
+        }
+      ]
+    ],
+    "panel-left": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ]
+    ],
+    "panel-left-close": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 15-3-3 3-3"
+        }
+      ]
+    ],
+    "panel-top": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ]
+    ],
+    "paperclip": [
+      [
+        "path",
+        {
+          "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"
+        }
+      ]
+    ],
+    "pause": [
+      [
+        "rect",
+        {
+          "x": "14",
+          "y": "3",
+          "width": "5",
+          "height": "18",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "5",
+          "y": "3",
+          "width": "5",
+          "height": "18",
+          "rx": "1"
+        }
+      ]
+    ],
+    "pencil": [
+      [
+        "path",
+        {
+          "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 5 4 4"
+        }
+      ]
+    ],
+    "pencil-line": [
+      [
+        "path",
+        {
+          "d": "M13 21h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 5 4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
+        }
+      ]
+    ],
+    "percent": [
+      [
+        "line",
+        {
+          "x1": "19",
+          "x2": "5",
+          "y1": "5",
+          "y2": "19"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6.5",
+          "cy": "6.5",
+          "r": "2.5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17.5",
+          "cy": "17.5",
+          "r": "2.5"
+        }
+      ]
+    ],
+    "phone": [
+      [
+        "path",
+        {
+          "d": "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"
+        }
+      ]
+    ],
+    "pilcrow": [
+      [
+        "path",
+        {
+          "d": "M13 4v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 4v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 4H9.5a4.5 4.5 0 0 0 0 9H13"
+        }
+      ]
+    ],
+    "pin": [
+      [
+        "path",
+        {
+          "d": "M12 17v5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"
+        }
+      ]
+    ],
+    "play": [
+      [
+        "path",
+        {
+          "d": "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+        }
+      ]
+    ],
+    "plug": [
+      [
+        "path",
+        {
+          "d": "M12 22v-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 8V2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 8V2"
+        }
+      ]
+    ],
+    "plug-zap": [
+      [
+        "path",
+        {
+          "d": "M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m2 22 3-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.5 13.5 10 11"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10.5 16.5 13 14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m18 3-4 4h6l-4 4"
+        }
+      ]
+    ],
+    "plus": [
+      [
+        "path",
+        {
+          "d": "M5 12h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 5v14"
+        }
+      ]
+    ],
+    "presentation": [
+      [
+        "path",
+        {
+          "d": "M2 3h20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 21 5-5 5 5"
+        }
+      ]
+    ],
+    "printer": [
+      [
+        "path",
+        {
+          "d": "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "6",
+          "y": "14",
+          "width": "12",
+          "height": "8",
+          "rx": "1"
+        }
+      ]
+    ],
+    "puzzle": [
+      [
+        "path",
+        {
+          "d": "M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"
+        }
+      ]
+    ],
+    "qr-code": [
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "5",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "5",
+          "x": "16",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "5",
+          "x": "3",
+          "y": "16",
+          "rx": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 16h-3a2 2 0 0 0-2 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 21v.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 7v3a2 2 0 0 1-2 2H7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 3h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16v.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 12h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12v.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 21v-1"
+        }
+      ]
+    ],
+    "quote": [
+      [
+        "path",
+        {
+          "d": "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
+        }
+      ]
+    ],
+    "receipt-text": [
+      [
+        "path",
+        {
+          "d": "M13 16H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 8H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 12H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"
+        }
+      ]
+    ],
+    "redo-2": [
+      [
+        "path",
+        {
+          "d": "m15 14 5-5-5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"
+        }
+      ]
+    ],
+    "refresh-cw": [
+      [
+        "path",
+        {
+          "d": "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 3v5h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 16H3v5"
+        }
+      ]
+    ],
+    "rocket": [
+      [
+        "path",
+        {
+          "d": "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"
+        }
+      ]
+    ],
+    "rotate-ccw": [
+      [
+        "path",
+        {
+          "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3v5h5"
+        }
+      ]
+    ],
+    "rotate-cw": [
+      [
+        "path",
+        {
+          "d": "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 3v5h-5"
+        }
+      ]
+    ],
+    "rows-3": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 9H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15H3"
+        }
+      ]
+    ],
+    "save": [
+      [
+        "path",
+        {
+          "d": "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 3v4a1 1 0 0 0 1 1h7"
+        }
+      ]
+    ],
+    "scale": [
+      [
+        "path",
+        {
+          "d": "M12 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 8 3 8a5 5 0 0 1-6 0zV7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m5 8 3 8a5 5 0 0 1-6 0zV7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 21h10"
+        }
+      ]
+    ],
+    "scan-face": [
+      [
+        "path",
+        {
+          "d": "M3 7V5a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 3h2a2 2 0 0 1 2 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 17v2a2 2 0 0 1-2 2h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 21H5a2 2 0 0 1-2-2v-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 14s1.5 2 4 2 4-2 4-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 9h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 9h.01"
+        }
+      ]
+    ],
+    "scroll-text": [
+      [
+        "path",
+        {
+          "d": "M15 12h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 8h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 17V5a2 2 0 0 0-2-2H4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"
+        }
+      ]
+    ],
+    "search": [
+      [
+        "path",
+        {
+          "d": "m21 21-4.34-4.34"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11",
+          "cy": "11",
+          "r": "8"
+        }
+      ]
+    ],
+    "search-x": [
+      [
+        "path",
+        {
+          "d": "m13.5 8.5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m8.5 8.5 5 5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11",
+          "cy": "11",
+          "r": "8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 21-4.3-4.3"
+        }
+      ]
+    ],
+    "send": [
+      [
+        "path",
+        {
+          "d": "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21.854 2.147-10.94 10.939"
+        }
+      ]
+    ],
+    "settings": [
+      [
+        "path",
+        {
+          "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "3"
+        }
+      ]
+    ],
+    "settings-2": [
+      [
+        "path",
+        {
+          "d": "M14 17H5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 7h-9"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17",
+          "cy": "17",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7",
+          "cy": "7",
+          "r": "3"
+        }
+      ]
+    ],
+    "share": [
+      [
+        "path",
+        {
+          "d": "M12 2v13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 6-4-4-4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
+        }
+      ]
+    ],
+    "share-2": [
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "5",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "19",
+          "r": "3"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "8.59",
+          "x2": "15.42",
+          "y1": "13.51",
+          "y2": "17.49"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "15.41",
+          "x2": "8.59",
+          "y1": "6.51",
+          "y2": "10.49"
+        }
+      ]
+    ],
+    "shield": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ]
+    ],
+    "shield-alert": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16h.01"
+        }
+      ]
+    ],
+    "shield-ban": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.243 5.21 14.39 12.472"
+        }
+      ]
+    ],
+    "shield-check": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 12 2 2 4-4"
+        }
+      ]
+    ],
+    "shield-x": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.5 9.5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.5 9.5 5 5"
+        }
+      ]
+    ],
+    "shopping-bag": [
+      [
+        "path",
+        {
+          "d": "M16 10a4 4 0 0 1-8 0"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.103 6.034h17.794"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"
+        }
+      ]
+    ],
+    "shopping-cart": [
+      [
+        "path",
+        {
+          "d": "m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "20",
+          "r": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "8",
+          "cy": "20",
+          "r": "2"
+        }
+      ]
+    ],
+    "sliders-horizontal": [
+      [
+        "path",
+        {
+          "d": "M10 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 19H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 3v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 17v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12h-9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 19h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 5h-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 10v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 12H3"
+        }
+      ]
+    ],
+    "sliders-vertical": [
+      [
+        "path",
+        {
+          "d": "M10 8h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 21v-9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 16h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 12V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 21v-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 14h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 10V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 21v-7"
+        }
+      ]
+    ],
+    "smartphone": [
+      [
+        "rect",
+        {
+          "width": "14",
+          "height": "20",
+          "x": "5",
+          "y": "2",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18h.01"
+        }
+      ]
+    ],
+    "sparkles": [
+      [
+        "path",
+        {
+          "d": "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 2v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 4h-4"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "4",
+          "cy": "20",
+          "r": "2"
+        }
+      ]
+    ],
+    "square": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ]
+    ],
+    "square-pen": [
+      [
+        "path",
+        {
+          "d": "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"
+        }
+      ]
+    ],
+    "star": [
+      [
+        "path",
+        {
+          "d": "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
+        }
+      ]
+    ],
+    "star-half": [
+      [
+        "path",
+        {
+          "d": "M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"
+        }
+      ]
+    ],
+    "store": [
+      [
+        "path",
+        {
+          "d": "M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"
+        }
+      ]
+    ],
+    "sun": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 20v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.93 4.93 1.41 1.41"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17.66 17.66 1.41 1.41"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 12h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6.34 17.66-1.41 1.41"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19.07 4.93-1.41 1.41"
+        }
+      ]
+    ],
+    "table": [
+      [
+        "path",
+        {
+          "d": "M12 3v18"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 15h18"
+        }
+      ]
+    ],
+    "table-properties": [
+      [
+        "path",
+        {
+          "d": "M15 3v18"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 9H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15H3"
+        }
+      ]
+    ],
+    "tablet": [
+      [
+        "rect",
+        {
+          "width": "16",
+          "height": "20",
+          "x": "4",
+          "y": "2",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12.01",
+          "y1": "18",
+          "y2": "18"
+        }
+      ]
+    ],
+    "tag": [
+      [
+        "path",
+        {
+          "d": "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "tags": [
+      [
+        "path",
+        {
+          "d": "M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10.5",
+          "cy": "6.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "terminal": [
+      [
+        "path",
+        {
+          "d": "M12 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4 17 6-6-6-6"
+        }
+      ]
+    ],
+    "text-align-center": [
+      [
+        "path",
+        {
+          "d": "M21 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 12H7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 19H5"
+        }
+      ]
+    ],
+    "text-align-end": [
+      [
+        "path",
+        {
+          "d": "M21 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12H9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 19H7"
+        }
+      ]
+    ],
+    "text-align-start": [
+      [
+        "path",
+        {
+          "d": "M21 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 12H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 19H3"
+        }
+      ]
+    ],
+    "text-cursor-input": [
+      [
+        "path",
+        {
+          "d": "M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 6v12"
+        }
+      ]
+    ],
+    "thumbs-down": [
+      [
+        "path",
+        {
+          "d": "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 14V2"
+        }
+      ]
+    ],
+    "thumbs-up": [
+      [
+        "path",
+        {
+          "d": "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 10v12"
+        }
+      ]
+    ],
+    "ticket-percent": [
+      [
+        "path",
+        {
+          "d": "M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 9h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 9-6 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 15h.01"
+        }
+      ]
+    ],
+    "timer": [
+      [
+        "line",
+        {
+          "x1": "10",
+          "x2": "14",
+          "y1": "2",
+          "y2": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "15",
+          "y1": "14",
+          "y2": "11"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "14",
+          "r": "8"
+        }
+      ]
+    ],
+    "toggle-left": [
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "5",
+          "rx": "7"
+        }
+      ]
+    ],
+    "trash": [
+      [
+        "path",
+        {
+          "d": "M10 11v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 11v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 6h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+        }
+      ]
+    ],
+    "trees": [
+      [
+        "path",
+        {
+          "d": "M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 16v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"
+        }
+      ]
+    ],
+    "trending-down": [
+      [
+        "path",
+        {
+          "d": "M16 17h6v-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 17-8.5-8.5-5 5L2 7"
+        }
+      ]
+    ],
+    "trending-up": [
+      [
+        "path",
+        {
+          "d": "M16 7h6v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 7-8.5 8.5-5-5L2 17"
+        }
+      ]
+    ],
+    "triangle-alert": [
+      [
+        "path",
+        {
+          "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 9v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ]
+    ],
+    "truck": [
+      [
+        "path",
+        {
+          "d": "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 18H9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17",
+          "cy": "18",
+          "r": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7",
+          "cy": "18",
+          "r": "2"
+        }
+      ]
+    ],
+    "type": [
+      [
+        "path",
+        {
+          "d": "M12 4v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 20h6"
+        }
+      ]
+    ],
+    "undo-2": [
+      [
+        "path",
+        {
+          "d": "M9 14 4 9l5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"
+        }
+      ]
+    ],
+    "upload": [
+      [
+        "path",
+        {
+          "d": "M12 3v12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 8-5-5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+        }
+      ]
+    ],
+    "user": [
+      [
+        "path",
+        {
+          "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-check": [
+      [
+        "path",
+        {
+          "d": "m16 11 2 2 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-cog": [
+      [
+        "path",
+        {
+          "d": "M10 15H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.305 16.53.923-.382"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15.228 13.852-.923-.383"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.852 12.228-.383-.923"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.852 17.772-.383.924"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19.148 12.228.383-.923"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19.53 18.696-.382-.924"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m20.772 13.852.924-.383"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m20.772 16.148.924.383"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "15",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-pen": [
+      [
+        "path",
+        {
+          "d": "M11.5 15H7a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-plus": [
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "19",
+          "x2": "19",
+          "y1": "8",
+          "y2": "14"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "22",
+          "x2": "16",
+          "y1": "11",
+          "y2": "11"
+        }
+      ]
+    ],
+    "user-round-check": [
+      [
+        "path",
+        {
+          "d": "M2 21a8 8 0 0 1 13.292-6"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "8",
+          "r": "5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 19 2 2 4-4"
+        }
+      ]
+    ],
+    "user-x": [
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "17",
+          "x2": "22",
+          "y1": "8",
+          "y2": "13"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "22",
+          "x2": "17",
+          "y1": "8",
+          "y2": "13"
+        }
+      ]
+    ],
+    "users": [
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 3.128a4 4 0 0 1 0 7.744"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 21v-2a4 4 0 0 0-3-3.87"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "users-round": [
+      [
+        "path",
+        {
+          "d": "M18 21a8 8 0 0 0-16 0"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "8",
+          "r": "5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"
+        }
+      ]
+    ],
+    "video": [
+      [
+        "path",
+        {
+          "d": "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "2",
+          "y": "6",
+          "width": "14",
+          "height": "12",
+          "rx": "2"
+        }
+      ]
+    ],
+    "wallet": [
+      [
+        "path",
+        {
+          "d": "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"
+        }
+      ]
+    ],
+    "wand-sparkles": [
+      [
+        "path",
+        {
+          "d": "m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14 7 3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 6v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 14v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 8H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 16h-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 3H9"
+        }
+      ]
+    ],
+    "webhook": [
+      [
+        "path",
+        {
+          "d": "M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"
+        }
+      ]
+    ],
+    "wrench": [
+      [
+        "path",
+        {
+          "d": "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"
+        }
+      ]
+    ],
+    "x": [
+      [
+        "path",
+        {
+          "d": "M18 6 6 18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 6 12 12"
+        }
+      ]
+    ],
+    "zap": [
+      [
+        "path",
+        {
+          "d": "M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"
+        }
+      ]
+    ]
+  }
+}
diff --git a/packages/latte/ui/ui/radio/radio.latte b/packages/latte/ui/ui/radio/radio.latte
new file mode 100644
index 0000000..43fbcdc0
--- /dev/null
+++ b/packages/latte/ui/ui/radio/radio.latte
@@ -0,0 +1,18 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/radio.json
+    Radio: Radio renders input[type=radio] with shared Name for grouping.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Checked (bool), Disabled (bool), Required (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). *}
+<input
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  type="radio"
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Value'] ?? ''))} value="{=($p['Value'] ?? '')}"{/if}
+  class="{=ui_compose('ui/radio/radio.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ($p['Checked'] ?? false)} checked{/if}
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {if ($p['Required'] ?? false)} required{/if}
+  {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['TabIndex'] ?? ''))} tabindex="{=($p['TabIndex'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/radio/radio.variants.json b/packages/latte/ui/ui/radio/radio.variants.json
new file mode 100644
index 0000000..48c72cb
--- /dev/null
+++ b/packages/latte/ui/ui/radio/radio.variants.json
@@ -0,0 +1,23 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.radio",
+  "base": "shrink-0 appearance-none rounded-full bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary radio-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5 [--dot:10px]",
+      "sm": "size-4 [--dot:8px]"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/range/range.latte b/packages/latte/ui/ui/range/range.latte
new file mode 100644
index 0000000..ec928b4
--- /dev/null
+++ b/packages/latte/ui/ui/range/range.latte
@@ -0,0 +1,15 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/range.json
+    Range: Range renders input type=range.
+    Props (p): Value (string), Min (int), Max (int), Step (int), Disabled (bool), AriaLabel (string), Class (string), Attrs (attrs). *}
+<input
+  type="range"
+  class="{=ui_compose('ui/range/range.variants.json', [], [($p['Class'] ?? '')])}"
+  min="{=((($p['Min'] ?? 0) > 0) ? ui_s(($p['Min'] ?? 0)) : '0')}"
+  max="{=((($p['Max'] ?? 0) > 0) ? ui_s(($p['Max'] ?? 0)) : '100')}"
+  step="{=((($p['Step'] ?? 0) > 0) ? ui_s(($p['Step'] ?? 0)) : '1')}"
+  {if ui_is_set_str(($p['Value'] ?? ''))} value="{=($p['Value'] ?? '')}"{/if}
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/range/range.variants.json b/packages/latte/ui/ui/range/range.variants.json
new file mode 100644
index 0000000..0f9b0de
--- /dev/null
+++ b/packages/latte/ui/ui/range/range.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.range",
+  "base": "h-5 w-full cursor-pointer appearance-none bg-transparent accent-primary disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded [&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/select/opt-group.latte b/packages/latte/ui/ui/select/opt-group.latte
new file mode 100644
index 0000000..b54ee48
--- /dev/null
+++ b/packages/latte/ui/ui/select/opt-group.latte
@@ -0,0 +1,10 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/select.json
+    OptGroup: OptGroup renders a native optgroup around option children.
+    Props (p): Class (string), Label (string), Disabled (bool), Attrs (attrs); children: markup. *}
+<optgroup
+  class="{=ui_cn([($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['Label'] ?? ''))} label="{=($p['Label'] ?? '')}"{/if}
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</optgroup>
diff --git a/packages/latte/ui/ui/select/select-option.latte b/packages/latte/ui/ui/select/select-option.latte
new file mode 100644
index 0000000..bdd0044
--- /dev/null
+++ b/packages/latte/ui/ui/select/select-option.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/select.json
+    SelectOption: SelectOption renders an option for custom Select children.
+    Props (p): Value (string), Label (string), Selected (bool), Disabled (bool), Attrs (attrs); children: markup. *}
+<option
+  {if ui_is_set_str(($p['Value'] ?? ''))} value="{=($p['Value'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Label'] ?? ''))} label="{=($p['Label'] ?? '')}"{/if}
+  {if ($p['Selected'] ?? false)} selected{/if}
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</option>
diff --git a/packages/latte/ui/ui/select/select.latte b/packages/latte/ui/ui/select/select.latte
new file mode 100644
index 0000000..01382e3
--- /dev/null
+++ b/packages/latte/ui/ui/select/select.latte
@@ -0,0 +1,23 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/select.json
+    Select: Select renders option children from the Options list plus manual children.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Disabled (bool), Required (bool), Options (SelectOptionItem[]), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs); children: markup. *}
+<select
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  class="{=ui_compose('ui/select/select.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {if ($p['Required'] ?? false)} required{/if}
+  {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['TabIndex'] ?? ''))} tabindex="{=($p['TabIndex'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
+  {foreach ($p['Options'] ?? []) as $item}
+    <option
+      value="{=ui_field($item, 'Value', '')}"
+      {if ui_eq(ui_field($item, 'Value', ''), ($p['Value'] ?? ''))} selected{/if}
+    >{=ui_field($item, 'Label', '')}</option>
+  {/foreach}
+  {=($children ?? '')|noescape}
+</select>
diff --git a/packages/latte/ui/ui/select/select.variants.json b/packages/latte/ui/ui/select/select.variants.json
new file mode 100644
index 0000000..132d2e8
--- /dev/null
+++ b/packages/latte/ui/ui/select/select.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.select",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-3 text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/separator/separator.latte b/packages/latte/ui/ui/separator/separator.latte
new file mode 100644
index 0000000..70a9e77
--- /dev/null
+++ b/packages/latte/ui/ui/separator/separator.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/separator.json
+    Separator: Separator renders hr with optional decorative semantics.
+    Props (p): Variant (string), Orientation (string), Class (string), Decorative (bool), Attrs (attrs). *}
+<hr
+  class="{=ui_compose('ui/separator/separator.variants.json', ['orientation' => ($p['Orientation'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ($p['Decorative'] ?? false)} role="presentation"{/if}
+  {if ($p['Decorative'] ?? false)} aria-hidden="true"{/if}
+  {if ui_eq(($p['Orientation'] ?? ''), 'vertical')} aria-orientation="vertical"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/separator/separator.variants.json b/packages/latte/ui/ui/separator/separator.variants.json
new file mode 100644
index 0000000..909771e
--- /dev/null
+++ b/packages/latte/ui/ui/separator/separator.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.separator",
+  "base": "shrink-0 border-0 bg-border",
+  "keys": [
+    "orientation",
+    "variant"
+  ],
+  "defaults": {
+    "orientation": "horizontal",
+    "variant": "default"
+  },
+  "byKey": {
+    "orientation": {
+      "horizontal": "h-px w-full",
+      "vertical": "h-full w-px"
+    },
+    "variant": {
+      "default": "",
+      "spaced": "my-6"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/sheet/sheet-close.latte b/packages/latte/ui/ui/sheet/sheet-close.latte
new file mode 100644
index 0000000..efb9416
--- /dev/null
+++ b/packages/latte/ui/ui/sheet/sheet-close.latte
@@ -0,0 +1,26 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/sheet.json
+    SheetClose: SheetClose renders the close button (Lucide x) inside the panel.
+    Props (p): Variant (string), Size (string), Class (string), AriaLabel (string), Attrs (attrs). *}
+<button
+  type="button"
+  class="{=ui_compose('ui/sheet/sheettrigger.variants.json', ['variant' => ($p['Variant'] ?? ''), 'size' => ($p['Size'] ?? '')], [($p['Class'] ?? '')])}"
+  data-ui8kit="sheet-close"
+  aria-label="{=ui_default_if_empty(($p['AriaLabel'] ?? ''), 'Close menu')}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
+  <svg
+    class="size-5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M18 6 6 18"></path>
+    <path d="m6 6 12 12"></path>
+  </svg>
+</button>
diff --git a/packages/latte/ui/ui/sheet/sheet-trigger.latte b/packages/latte/ui/ui/sheet/sheet-trigger.latte
new file mode 100644
index 0000000..1e733f2
--- /dev/null
+++ b/packages/latte/ui/ui/sheet/sheet-trigger.latte
@@ -0,0 +1,59 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/sheet.json
+    SheetTrigger: SheetTrigger renders the menu button (aria-expanded, aria-controls, aria-haspopup=dialog) with Lucide menu/x icons.
+    Props (p): Variant (string), Size (string), Class (string), Controls (string), AriaLabel (string), Attrs (attrs). *}
+<button
+  type="button"
+  class="{=ui_compose('ui/sheet/sheettrigger.variants.json', ['variant' => ($p['Variant'] ?? ''), 'size' => ($p['Size'] ?? '')], [($p['Class'] ?? '')])}"
+  data-ui8kit="sheet-trigger"
+  {if ui_is_set_str(($p['Controls'] ?? ''))} aria-controls="{=($p['Controls'] ?? '')}"{/if}
+  aria-expanded="false"
+  aria-haspopup="dialog"
+  aria-label="{=ui_default_if_empty(($p['AriaLabel'] ?? ''), 'Open menu')}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
+  <svg
+    class="block size-5 in-aria-expanded:hidden"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <line
+      x1="4"
+      x2="20"
+      y1="12"
+      y2="12"
+    ></line>
+    <line
+      x1="4"
+      x2="20"
+      y1="6"
+      y2="6"
+    ></line>
+    <line
+      x1="4"
+      x2="20"
+      y1="18"
+      y2="18"
+    ></line>
+  </svg>
+  <svg
+    class="hidden size-5 in-aria-expanded:block"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M18 6 6 18"></path>
+    <path d="m6 6 12 12"></path>
+  </svg>
+</button>
diff --git a/packages/latte/ui/ui/sheet/sheet.latte b/packages/latte/ui/ui/sheet/sheet.latte
new file mode 100644
index 0000000..c085b0c
--- /dev/null
+++ b/packages/latte/ui/ui/sheet/sheet.latte
@@ -0,0 +1,19 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/sheet.json
+    Sheet: Sheet renders the hidden dialog root: overlay + panel (children). ID is required for the trigger's aria-controls.
+    Props (p): Side (string), Class (string), ID (string), AriaLabel (string), Open (bool), Attrs (attrs); children: markup. *}
+<div
+  class="{=ui_compose('ui/sheet/sheet.variants.json', ['side' => ($p['Side'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  role="dialog"
+  aria-modal="true"
+  aria-label="{=ui_default_if_empty(($p['AriaLabel'] ?? ''), 'Menu')}"
+  data-ui8kit="sheet"
+  {if !(($p['Open'] ?? false))} hidden{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
+  <div class="absolute inset-0 bg-foreground/40" data-ui8kit="sheet-overlay"></div>
+  <div
+    class="relative flex h-full w-80 max-w-full flex-col gap-6 overflow-auto bg-background p-6 text-foreground shadow-lg"
+  >{=($children ?? '')|noescape}</div>
+</div>
diff --git a/packages/latte/ui/ui/sheet/sheet.variants.json b/packages/latte/ui/ui/sheet/sheet.variants.json
new file mode 100644
index 0000000..7f6e7ca
--- /dev/null
+++ b/packages/latte/ui/ui/sheet/sheet.variants.json
@@ -0,0 +1,17 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.sheet",
+  "base": "fixed inset-0 z-50 flex",
+  "keys": [
+    "side"
+  ],
+  "defaults": {
+    "side": "right"
+  },
+  "byKey": {
+    "side": {
+      "left": "flex-row justify-start",
+      "right": "flex-row justify-end"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/sheet/sheettrigger.variants.json b/packages/latte/ui/ui/sheet/sheettrigger.variants.json
new file mode 100644
index 0000000..e9d754b
--- /dev/null
+++ b/packages/latte/ui/ui/sheet/sheettrigger.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.sheettrigger",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/skeleton/skeleton.latte b/packages/latte/ui/ui/skeleton/skeleton.latte
new file mode 100644
index 0000000..980dbd9
--- /dev/null
+++ b/packages/latte/ui/ui/skeleton/skeleton.latte
@@ -0,0 +1,10 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/skeleton.json
+    Skeleton: Skeleton renders a decorative placeholder.
+    Props (p): Shape (string), Class (string), Attrs (attrs). *}
+<div
+  class="{=ui_compose('ui/skeleton/skeleton.variants.json', ['shape' => ($p['Shape'] ?? '')], [($p['Class'] ?? '')])}"
+  aria-hidden="true"
+  data-slot="skeleton"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+></div>
diff --git a/packages/latte/ui/ui/skeleton/skeleton.variants.json b/packages/latte/ui/ui/skeleton/skeleton.variants.json
new file mode 100644
index 0000000..ad1e74f
--- /dev/null
+++ b/packages/latte/ui/ui/skeleton/skeleton.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.skeleton",
+  "base": "animate-pulse bg-muted motion-reduce:animate-none rounded",
+  "keys": [
+    "shape"
+  ],
+  "defaults": {
+    "shape": "line"
+  },
+  "byKey": {
+    "shape": {
+      "line": "h-4 w-full",
+      "block": "h-20 w-full"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/stack/stack.latte b/packages/latte/ui/ui/stack/stack.latte
new file mode 100644
index 0000000..147d3df
--- /dev/null
+++ b/packages/latte/ui/ui/stack/stack.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/stack.json
+    Stack: Stack renders a vertical flex container.
+    Props (p): Gap (string), Align (string), Justify (string), Class (string), Tag (string), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_resolve_tag(($p['Tag'] ?? ''), 'div', ['div', 'ul', 'ol'])}
+<div n:tag="$tag1"
+  class="{=ui_compose('ui/stack/stack.variants.json', ['gap' => ($p['Gap'] ?? ''), 'align' => ($p['Align'] ?? ''), 'justify' => ($p['Justify'] ?? '')], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</div>
diff --git a/packages/latte/ui/ui/stack/stack.variants.json b/packages/latte/ui/ui/stack/stack.variants.json
new file mode 100644
index 0000000..c720342
--- /dev/null
+++ b/packages/latte/ui/ui/stack/stack.variants.json
@@ -0,0 +1,40 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.stack",
+  "base": "flex flex-col",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "start",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/switch/switch.latte b/packages/latte/ui/ui/switch/switch.latte
new file mode 100644
index 0000000..b2f7393
--- /dev/null
+++ b/packages/latte/ui/ui/switch/switch.latte
@@ -0,0 +1,19 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/switch.json
+    Switch: Switch renders input[type=checkbox] with switch role attrs.
+    Props (p): Size (string), Class (string), Name (string), Value (string), Checked (bool), Disabled (bool), Required (bool), ID (string), TabIndex (string), AriaLabel (string), Attrs (attrs). *}
+<input
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  type="checkbox"
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Value'] ?? ''))} value="{=($p['Value'] ?? '')}"{/if}
+  class="{=ui_compose('ui/switch/switch.variants.json', ['size' => ($p['Size'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ($p['Checked'] ?? false)} checked{/if}
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {if ($p['Required'] ?? false)} required{/if}
+  {if ui_is_set_str(($p['TabIndex'] ?? ''))} tabindex="{=($p['TabIndex'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  role="switch"
+  aria-checked="{=ui_bool_str(($p['Checked'] ?? false))}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/switch/switch.variants.json b/packages/latte/ui/ui/switch/switch.variants.json
new file mode 100644
index 0000000..243eed4
--- /dev/null
+++ b/packages/latte/ui/ui/switch/switch.variants.json
@@ -0,0 +1,17 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.switch",
+  "base": "relative shrink-0 appearance-none bg-muted inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary switch-knob disabled:cursor-not-allowed disabled:opacity-50 rounded-full",
+  "keys": [
+    "size"
+  ],
+  "defaults": {
+    "size": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "h-5 w-9 [--knob:12px] [--pad:4px]",
+      "sm": "h-4 w-8 [--knob:12px] [--pad:2px]"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/table/table-body.latte b/packages/latte/ui/ui/table/table-body.latte
new file mode 100644
index 0000000..d00d6f2
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-body.latte
@@ -0,0 +1,5 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableBody: TableBody renders the tbody section.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<tbody class="{=ui_cn([($p['Class'] ?? '')])}"{=ui_attr_html(($p['Attrs'] ?? []))|noescape}>{=($children ?? '')|noescape}</tbody>
diff --git a/packages/latte/ui/ui/table/table-caption.latte b/packages/latte/ui/ui/table/table-caption.latte
new file mode 100644
index 0000000..4fb93cf
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-caption.latte
@@ -0,0 +1,5 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableCaption: TableCaption renders the table caption.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<caption class="{=ui_cn([($p['Class'] ?? '')])}"{=ui_attr_html(($p['Attrs'] ?? []))|noescape}>{=($children ?? '')|noescape}</caption>
diff --git a/packages/latte/ui/ui/table/table-cell.latte b/packages/latte/ui/ui/table/table-cell.latte
new file mode 100644
index 0000000..8a570ad
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-cell.latte
@@ -0,0 +1,11 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableCell: TableCell renders td with colspan and rowspan.
+    Props (p): Class (string), Scope (string), ColSpan (int), RowSpan (int), Headers (string), Abbr (string), Attrs (attrs); children: markup. *}
+<td
+  class="{=ui_compose('ui/table/table-cell.variants.json', [], [($p['Class'] ?? '')])}"
+  {if (($p['ColSpan'] ?? 0) > 0)} colspan="{=ui_s(($p['ColSpan'] ?? 0))}"{/if}
+  {if (($p['RowSpan'] ?? 0) > 0)} rowspan="{=ui_s(($p['RowSpan'] ?? 0))}"{/if}
+  {if ui_is_set_str(($p['Headers'] ?? ''))} headers="{=($p['Headers'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</td>
diff --git a/packages/latte/ui/ui/table/table-cell.variants.json b/packages/latte/ui/ui/table/table-cell.variants.json
new file mode 100644
index 0000000..0725dbc
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-cell.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table-cell",
+  "base": "px-2 py-2 align-middle",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/table/table-col-group.latte b/packages/latte/ui/ui/table/table-col-group.latte
new file mode 100644
index 0000000..929fd76
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-col-group.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableColGroup: TableColGroup renders colgroup with optional span.
+    Props (p): Class (string), Span (int), Attrs (attrs); children: markup. *}
+<colgroup
+  class="{=ui_cn([($p['Class'] ?? '')])}"
+  {if (($p['Span'] ?? 0) > 0)} span="{=ui_s(($p['Span'] ?? 0))}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</colgroup>
diff --git a/packages/latte/ui/ui/table/table-col.latte b/packages/latte/ui/ui/table/table-col.latte
new file mode 100644
index 0000000..006e466
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-col.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableCol: TableCol renders a single col definition.
+    Props (p): Class (string), Span (int), Attrs (attrs). *}
+<col
+  class="{=ui_cn([($p['Class'] ?? '')])}"
+  {if (($p['Span'] ?? 0) > 0)} span="{=ui_s(($p['Span'] ?? 0))}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
diff --git a/packages/latte/ui/ui/table/table-foot.latte b/packages/latte/ui/ui/table/table-foot.latte
new file mode 100644
index 0000000..c817247
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-foot.latte
@@ -0,0 +1,5 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableFoot: TableFoot renders the tfoot section.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<tfoot class="{=ui_cn([($p['Class'] ?? '')])}"{=ui_attr_html(($p['Attrs'] ?? []))|noescape}>{=($children ?? '')|noescape}</tfoot>
diff --git a/packages/latte/ui/ui/table/table-head-cell.latte b/packages/latte/ui/ui/table/table-head-cell.latte
new file mode 100644
index 0000000..99d09f9
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-head-cell.latte
@@ -0,0 +1,13 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableHeadCell: TableHeadCell renders th with optional scope and abbr.
+    Props (p): Class (string), Scope (string), ColSpan (int), RowSpan (int), Headers (string), Abbr (string), Attrs (attrs); children: markup. *}
+<th
+  class="{=ui_compose('ui/table/table-head-cell.variants.json', [], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(ui_map_or(($p['Scope'] ?? ''), ['col' => 'col', 'colgroup' => 'colgroup', 'row' => 'row', 'rowgroup' => 'rowgroup'], '', true))} scope="{=ui_map_or(($p['Scope'] ?? ''), ['col' => 'col', 'colgroup' => 'colgroup', 'row' => 'row', 'rowgroup' => 'rowgroup'], '', true)}"{/if}
+  {if ui_is_set_str(($p['Abbr'] ?? ''))} abbr="{=($p['Abbr'] ?? '')}"{/if}
+  {if (($p['ColSpan'] ?? 0) > 0)} colspan="{=ui_s(($p['ColSpan'] ?? 0))}"{/if}
+  {if (($p['RowSpan'] ?? 0) > 0)} rowspan="{=ui_s(($p['RowSpan'] ?? 0))}"{/if}
+  {if ui_is_set_str(($p['Headers'] ?? ''))} headers="{=($p['Headers'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</th>
diff --git a/packages/latte/ui/ui/table/table-head-cell.variants.json b/packages/latte/ui/ui/table/table-head-cell.variants.json
new file mode 100644
index 0000000..d7d0d52
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-head-cell.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table-head-cell",
+  "base": "px-2 py-2 text-left align-middle font-semibold",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/table/table-head.latte b/packages/latte/ui/ui/table/table-head.latte
new file mode 100644
index 0000000..e98dc63
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-head.latte
@@ -0,0 +1,5 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableHead: TableHead renders the thead section.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<thead class="{=ui_cn([($p['Class'] ?? '')])}"{=ui_attr_html(($p['Attrs'] ?? []))|noescape}>{=($children ?? '')|noescape}</thead>
diff --git a/packages/latte/ui/ui/table/table-row.latte b/packages/latte/ui/ui/table/table-row.latte
new file mode 100644
index 0000000..5992242
--- /dev/null
+++ b/packages/latte/ui/ui/table/table-row.latte
@@ -0,0 +1,5 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableRow: TableRow renders one tr row.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<tr class="{=ui_cn([($p['Class'] ?? '')])}"{=ui_attr_html(($p['Attrs'] ?? []))|noescape}>{=($children ?? '')|noescape}</tr>
diff --git a/packages/latte/ui/ui/table/table.latte b/packages/latte/ui/ui/table/table.latte
new file mode 100644
index 0000000..42c0175
--- /dev/null
+++ b/packages/latte/ui/ui/table/table.latte
@@ -0,0 +1,8 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    Table: Table renders the root table element.
+    Props (p): Class (string), Attrs (attrs); children: markup. *}
+<table
+  class="{=ui_compose('ui/table/table.variants.json', [], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</table>
diff --git a/packages/latte/ui/ui/table/table.variants.json b/packages/latte/ui/ui/table/table.variants.json
new file mode 100644
index 0000000..7b2c2ad
--- /dev/null
+++ b/packages/latte/ui/ui/table/table.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/latte/ui/ui/text/text.latte b/packages/latte/ui/ui/text/text.latte
new file mode 100644
index 0000000..5b60eb5
--- /dev/null
+++ b/packages/latte/ui/ui/text/text.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/text.json
+    Text: Text renders a p element with body copy classes, or the block or inline text element of `Tag`.
+    Props (p): Size (string), Weight (string), Class (string), Tag (string), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_resolve_tag(($p['Tag'] ?? ''), 'p', ['p', 'blockquote', 'figcaption', 'address', 'pre', 'span', 'em', 'strong', 'small', 'abbr', 'cite', 'code', 'kbd', 'mark', 'time', 'data', 'var', 'samp', 'sub', 'sup', 'b', 'i', 'u', 's', 'q', 'dfn', 'bdo', 'bdi', 'ins', 'del'])}
+<p n:tag="$tag1"
+  class="{=ui_compose('ui/text/text.variants.json', ['size' => ($p['Size'] ?? ''), 'weight' => ($p['Weight'] ?? '')], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</p>
diff --git a/packages/latte/ui/ui/text/text.variants.json b/packages/latte/ui/ui/text/text.variants.json
new file mode 100644
index 0000000..2869a4f
--- /dev/null
+++ b/packages/latte/ui/ui/text/text.variants.json
@@ -0,0 +1,34 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.text",
+  "base": "",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "inherit"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold",
+      "inherit": ""
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/textarea/textarea.latte b/packages/latte/ui/ui/textarea/textarea.latte
new file mode 100644
index 0000000..b20cbad
--- /dev/null
+++ b/packages/latte/ui/ui/textarea/textarea.latte
@@ -0,0 +1,17 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/textarea.json
+    Textarea: Textarea renders a styled multi-line form control.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Placeholder (string), Rows (int), Disabled (bool), Required (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). *}
+<textarea
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['Name'] ?? ''))} name="{=($p['Name'] ?? '')}"{/if}
+  class="{=ui_compose('ui/textarea/textarea.variants.json', ['size' => ($p['Size'] ?? ''), 'variant' => ($p['Variant'] ?? '')], [($p['Class'] ?? '')])}"
+  rows="{=((($p['Rows'] ?? 0) > 0) ? ui_s(($p['Rows'] ?? 0)) : '4')}"
+  {if ui_is_set_str(($p['Placeholder'] ?? ''))} placeholder="{=($p['Placeholder'] ?? '')}"{/if}
+  {if ($p['Disabled'] ?? false)} disabled{/if}
+  {if ($p['Required'] ?? false)} required{/if}
+  {if ui_is_set_str(($p['Role'] ?? ''))} role="{=($p['Role'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['TabIndex'] ?? ''))} tabindex="{=($p['TabIndex'] ?? '')}"{/if}
+  {if ui_is_set_str(($p['AriaLabel'] ?? ''))} aria-label="{=($p['AriaLabel'] ?? '')}"{/if}
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($p['Value'] ?? '')}</textarea>
diff --git a/packages/latte/ui/ui/textarea/textarea.variants.json b/packages/latte/ui/ui/textarea/textarea.variants.json
new file mode 100644
index 0000000..6480057
--- /dev/null
+++ b/packages/latte/ui/ui/textarea/textarea.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.textarea",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "min-h-16 px-3 py-2 text-base md:text-sm",
+      "default": "min-h-20 px-3 py-2 text-base md:text-sm",
+      "lg": "min-h-24 px-4 py-3 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/latte/ui/ui/themetoggle/theme-toggle.latte b/packages/latte/ui/ui/themetoggle/theme-toggle.latte
new file mode 100644
index 0000000..50b63e0
--- /dev/null
+++ b/packages/latte/ui/ui/themetoggle/theme-toggle.latte
@@ -0,0 +1,52 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/themetoggle.json
+    ThemeToggle: ThemeToggle renders a button with Lucide sun/moon icons; aria-pressed reflects dark mode.
+    Props (p): Variant (string), Size (string), Class (string), ID (string), AriaLabel (string), Attrs (attrs). *}
+<button
+  type="button"
+  class="{=ui_compose('ui/themetoggle/themetoggle.variants.json', ['variant' => ($p['Variant'] ?? ''), 'size' => ($p['Size'] ?? '')], [($p['Class'] ?? '')])}"
+  {if ui_is_set_str(($p['ID'] ?? ''))} id="{=($p['ID'] ?? '')}"{/if}
+  data-ui8kit="theme-toggle"
+  aria-label="{=ui_default_if_empty(($p['AriaLabel'] ?? ''), 'Dark mode')}"
+  aria-pressed="false"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>
+  <svg
+    class="hidden size-5 dark:block"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="4"
+    ></circle>
+    <path d="M12 2v2"></path>
+    <path d="M12 20v2"></path>
+    <path d="m4.93 4.93 1.41 1.41"></path>
+    <path d="m17.66 17.66 1.41 1.41"></path>
+    <path d="M2 12h2"></path>
+    <path d="M20 12h2"></path>
+    <path d="m6.34 17.66-1.41 1.41"></path>
+    <path d="m19.07 4.93-1.41 1.41"></path>
+  </svg>
+  <svg
+    class="block size-5 dark:hidden"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+  </svg>
+</button>
diff --git a/packages/latte/ui/ui/themetoggle/themetoggle.variants.json b/packages/latte/ui/ui/themetoggle/themetoggle.variants.json
new file mode 100644
index 0000000..e373e79
--- /dev/null
+++ b/packages/latte/ui/ui/themetoggle/themetoggle.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.themetoggle",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/packages/latte/ui/ui/title/title.latte b/packages/latte/ui/ui/title/title.latte
new file mode 100644
index 0000000..ef6a6c7
--- /dev/null
+++ b/packages/latte/ui/ui/title/title.latte
@@ -0,0 +1,9 @@
+{* Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/title.json
+    Title: Title renders the resolved heading element.
+    Props (p): Size (string), Weight (string), Class (string), As (int), Attrs (attrs); children: markup. *}
+{var $tag1 = ui_title_tag(($p['As'] ?? 0))}
+<h2 n:tag="$tag1"
+  class="{=ui_compose('ui/title/title.variants.json', ['size' => ($p['Size'] ?? ''), 'weight' => ($p['Weight'] ?? '')], [($p['Class'] ?? '')])}"
+  {=ui_attr_html(($p['Attrs'] ?? []))|noescape}
+>{=($children ?? '')|noescape}</h2>
diff --git a/packages/latte/ui/ui/title/title.variants.json b/packages/latte/ui/ui/title/title.variants.json
new file mode 100644
index 0000000..aeb5034
--- /dev/null
+++ b/packages/latte/ui/ui/title/title.variants.json
@@ -0,0 +1,33 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.title",
+  "base": "text-foreground",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "semibold"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold"
+    }
+  }
+}
diff --git a/packages/react/ui/.xgen-manifest.json b/packages/react/ui/.xgen-manifest.json
new file mode 100644
index 0000000..8c7a6d9
--- /dev/null
+++ b/packages/react/ui/.xgen-manifest.json
@@ -0,0 +1,407 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "packages/react/ui",
+  "files": {
+    "package.json": "4ece42058fcd54e584ada699d115c97b96222b8ea1a7c9b47071355b82e083cc",
+    "README.md": "d38c18f88aa080315f034336e70ddcd46bb51a851b244a688918ce0fe81df26c",
+    "src/blocks/about-company.tsx": "69d7caf9f10ec877f0788bef33ea9861db9b7ca342ec2fc52aef504f9e7da10b",
+    "src/blocks/about-me.tsx": "a39f6b539b9ff6d268aea985a8eafd00e6e6f35b9c79f7cdc0ec1455d732ee9c",
+    "src/blocks/about-me.types.ts": "043615269f4a7e5beca54e53db472db980a007cce859659d7a868d8c0bba40ef",
+    "src/blocks/activity-feed.tsx": "4bc5ecc788b89bd0d60bdd23b0f35ae0cac9b4d11322b3d91eb718f7160c2ac6",
+    "src/blocks/activity-feed.types.ts": "5f56124080084a1ff49293c65c40780d7f79a44f435b64afd0abcfa50b411026",
+    "src/blocks/announcement-bar.tsx": "74fb3ba2af10c81de9808c92177a722c735d81ddc457ea1f867b1356dff2d720",
+    "src/blocks/app-shell.tsx": "56794c04932774ca47c577115e62daed7a8bbd27461e818cfa9e46ce4a13f463",
+    "src/blocks/app-shell.types.ts": "57d12077a5f31a4d3291fca1d52771735d53fd95cd0f3c19ca244a35ba8bd3bb",
+    "src/blocks/article-body.tsx": "4bb5b4b53bb24d42421d8032e34c63ebd267e1df4cd1a2c9bd713f9cf523c74f",
+    "src/blocks/article-body.types.ts": "082f005df03ec6d0774dfe0813bf984bc6fcadc924611c417b6dcef6e46c8c29",
+    "src/blocks/auth-card.tsx": "1a727b3e2ff4663bdd4109770e33b476be4b67dab0b579471419a20e6605f258",
+    "src/blocks/auth-card.types.ts": "8da7cf95a4994c41826f8958a760f4de110f0ae1592573fc3847f43e5a8051ac",
+    "src/blocks/auth-layout.tsx": "6fcabd1180cf5b157868a0b0271d34598ee511269b3753f0003930df932f3f4b",
+    "src/blocks/auth-layout.types.ts": "decc4806964fc2e585e1cc914bf334bb0e809a7d2a6c1a93065052fdce47c811",
+    "src/blocks/before-after.tsx": "946c5fd20124c636539dec3d1fd5925d1a1ae57fddbbe329feaf741db7008e27",
+    "src/blocks/before-after.types.ts": "ed999d646c9c383b1a327e47cf63fa3eb78acb381271b917122b4139fdc57841",
+    "src/blocks/bento-grid.tsx": "177ef9dd16211b7b15a106b1054f7953075284585f307ef8bba1de2e5ba64cd5",
+    "src/blocks/bento-grid.types.ts": "6f6a81ac27f1735f3c2d59358bc808c65b04adde3b932860be3b56f70624f5d9",
+    "src/blocks/bottom-nav.tsx": "ab96ebe75cfb6198f09fd8f60f9d4a19b377c70180c90f749d3dbfffe628f621",
+    "src/blocks/cart-drawer.tsx": "73116cfaf0f97df4682c2accf140cfa6b0765800c4a9b21b74f8a4a386ee1161",
+    "src/blocks/cart-drawer.types.ts": "2b0a648c59d430f994286e02fa55f2ad5a7fb0eb7e26ef7a4a72c88849968826",
+    "src/blocks/cart-list.tsx": "073feed2aa33c92d32cfcde2beac10cc754c78aaa908178ad2db317bd22db93a",
+    "src/blocks/cart-list.types.ts": "67dac0812500df9da16211d8d2527c3a8a0838910d1ef7d1db2f8bdd72349bb2",
+    "src/blocks/category-nav.tsx": "193ddf7f5f4df7c123957bf23b5dc5d231b6dca9559a20fd2b96d144822b39ed",
+    "src/blocks/category-nav.types.ts": "88c758911dc968d2e05c42c2db256e8d44b6898f581b9d8b3ac5f3142e1b944a",
+    "src/blocks/chart-panel.tsx": "373dde89f391675e574e65c39de36e8a6f1754a90fb2a9a1c54008384a29ee0b",
+    "src/blocks/chart-panel.types.ts": "3815109d2ab650e70c4faa038f64c3b31e4b6816266a97db707640acc1ab11dc",
+    "src/blocks/checklist.tsx": "ec7027d11b00a0e7389a28eefa8f973f9276c4e98c6036282453bf6c488aca54",
+    "src/blocks/checklist.types.ts": "cde2540d07d103bac3160f58689186f37775d8594c410b8a75838a4f34c08a72",
+    "src/blocks/checkout-form.tsx": "42792743c322a6078343a69f1c2654f572fde030deb78c1e46d58dcc310d8628",
+    "src/blocks/checkout-form.types.ts": "b72088e90cdf5a6c42de163de2d4b8f2499d490ebac738d89694752b02f97aba",
+    "src/blocks/comparison-table.tsx": "5b2dff5025558bbbb0a11a3eeaf66149e2ccebb1e1f937c4e3740fc2835b93f8",
+    "src/blocks/comparison-table.types.ts": "edbee7a4289e384f16af68a9e0b700caf6d993408343338bbfd566791edc1b91",
+    "src/blocks/contact-form.tsx": "afcb0e3028ab929bee25e7c3f441ef31baee923fa0694ad1faf3179100573547",
+    "src/blocks/contact-form.types.ts": "63b05d16b74cb8a30a43887f0f2fadcb3346230c81d0e81fd5a8f39446435e3e",
+    "src/blocks/cookie-banner.tsx": "39ecd659c81eea177167ccb0a1817f2eafa5546ea722e55f1e14f089091536d6",
+    "src/blocks/credit-packs.tsx": "5aa8446b3afc56c5fa5be742975360ac0d7540398f76b9ba727fcda92e9ffe2b",
+    "src/blocks/credit-packs.types.ts": "be28fa1beccf2fba0789f5f572aee73c115cc24ae4cfa0736c8ae41e7cd1024e",
+    "src/blocks/cta-band.tsx": "661ed3380c580d4b5811108425898ff604187c67e1afa71addc6c739ce1182c1",
+    "src/blocks/cta-band.types.ts": "6140ffcebd34b3d98d06bad1122416626b8f5801f09540185e5b591cb8ff6f1f",
+    "src/blocks/cta-banner.tsx": "714c0dff9d5ca2b29b9b746dcdb9417b7d2b605a449b62e4ed50e6565e5bee58",
+    "src/blocks/cta-proof.tsx": "a5dc40578beec4f5c06fe2a8e7853095226d5fd0548c95c45a5d53419adaad49",
+    "src/blocks/cta-proof.types.ts": "1673af2abdc4ea6382a876efb270e6984f2fd7140a67130bd108291369f1a10d",
+    "src/blocks/dashboard-overview.tsx": "46319015a071bf010e7fd3cd1afb32edc3ff98ddd059dac6295e2b86c025f45f",
+    "src/blocks/dashboard-overview.types.ts": "05bd17982aa5d7b5cb940ff22700a0ef1c154f8a68ac1060a24ec2e67925a4b7",
+    "src/blocks/dashboard-shell.tsx": "f9c1f3babfaa996fd9780234e0c34f56d1eba9ab69e2f4181258e907b6ddc37e",
+    "src/blocks/dashboard-shell.types.ts": "37c3bba34d5681030b0ca37cb2cfdf65097a7bdbfae51c30931c33f816633895",
+    "src/blocks/delivery-info.tsx": "3a619769d51460b7d8a12a6bf599f6d015087626fdd97a53f677126e13455a57",
+    "src/blocks/delivery-info.types.ts": "d68c3ac24bacfc04622e3dc8d49b8c40a913a66a0d5d7d456efbd370bebc396c",
+    "src/blocks/empty-panel.tsx": "5a26a5715633d902396cb67ef97cb87589fd66c2715da4d8e2325ae33218e129",
+    "src/blocks/error-page.tsx": "6d31accaa4944f07fb79b9cf44a95ef5961ce8231b2a7ec54dfcaf273f24a09f",
+    "src/blocks/error-page.types.ts": "dd8411dca18b74cd060609106f107ea8069af204aa926190bcffc9fb027f6d0c",
+    "src/blocks/faq-list.tsx": "9f3ba505613b88373f6d5028f64f8f9599d67e42ef48cc110f0ebbd5eb5ef80d",
+    "src/blocks/faq-list.types.ts": "eb74ae6e1c1e51c2b4721d348b87cd9d7b46716cd2ed549bf11aa43f25366c6d",
+    "src/blocks/faq-split.tsx": "745dc3a486e63091cca0d338721d55c5f136113d358487edb3313c02d98e476f",
+    "src/blocks/faq-split.types.ts": "fbe3f37c43647961ea2055834f0128fa228d9f7b1ad3e3963d628f383835edbf",
+    "src/blocks/feature-accordion.tsx": "5be3359bf938465265eff83a8cff6f5db540564e7aefd48b1866b51127eed42e",
+    "src/blocks/feature-grid.tsx": "b39ea90f8e1b9522ff239e743f0d508f7adfdba54a4aece958399536519c9575",
+    "src/blocks/feature-grid.types.ts": "50ab48aa51787e269ffc1f096e082c5b0fbe4abfc31902497dd33fce5d93fb27",
+    "src/blocks/feature-showcase.tsx": "75d4eef18fc40bce783aa7a175c9a59f3ac99c707d24028cbf105db7a7aa85e2",
+    "src/blocks/feature-split.tsx": "cfcb9fb135aabc48fe9625b15339642eaae737ace4d3694c0a50077742ae9829",
+    "src/blocks/feature-sticky.tsx": "7167a88db603d1d1ea709f9ffbfb1f1c1bf192afe272cde2413ee2f056e09258",
+    "src/blocks/feature-tabs.tsx": "5385ab8babeb515ec629c8706e54242d0c89fc3070a4987d634ccd21ae707cca",
+    "src/blocks/footer-split.tsx": "f76532fbc573ebf53f9ee590c477dd8baafd614fa67aa273a4a80243ae779bc3",
+    "src/blocks/footer-split.types.ts": "bde2bb954a3eb6ad5383df4bedca2da1ac7c99724000c4c2d081c6cd864fc920",
+    "src/blocks/hero-classic.tsx": "e73dfc94051afc61d66481aef8db24b0fe5d831fb824e2618fd7175f0d7d6b3a",
+    "src/blocks/hero-classic.types.ts": "4724563cef568d2f316f37c3d9386f6fd54ba27d49b6d0f5ec228750bfd44ac3",
+    "src/blocks/hero-prompt.tsx": "665aeb486dc36a71a546eed980b177858cad84ba601ec326654e1ab0ea7c9b76",
+    "src/blocks/hero-prompt.types.ts": "455da691d4fcc6dd8df6bced640f72b88a3fdc598efdd59ffb9c8b4fbc0142fe",
+    "src/blocks/hero-split.tsx": "2235ccd21c41df4998de57f391326243233b2c76853a170a57bc249e1e1453e1",
+    "src/blocks/hero-split.types.ts": "d5459ec93bd4a4096825a7c28e8cf4fdd8b3d151e67c60f738234951312e1456",
+    "src/blocks/icon-wall.tsx": "f9a83bcab333e4dfdeefc4980b9c849acb2672146da4b5e08687be502e6d40a3",
+    "src/blocks/job-board.tsx": "7c048de28a3b3dc874de3810daed8ae968d7574cdd3ee0b57ac89fd67134e965",
+    "src/blocks/job-board.types.ts": "88ff24e5faf35fddc5a5edd2ca7f5c100fd27f45d6d003e4728c0ba34d268356",
+    "src/blocks/kanban-board.tsx": "98d18a4ed5a612db1041dca6444ab0f3a0198e513ca3750e1321c6dbf82c92e6",
+    "src/blocks/kanban-board.types.ts": "b3fcee6b6bf2b2dfca143b5b2f84f76ed0280b24181f20607cc8515d89d286e4",
+    "src/blocks/logo-cloud.tsx": "0a0d6e697782a8b363da100511c85ab659932fc3d573d772a1b63d9d51c9c81a",
+    "src/blocks/logo-cloud.types.ts": "64e9e8cdc13d3b1dbf78894339377f8c654a704a16a6d09c6913b941321bf834",
+    "src/blocks/logo-ribbon.tsx": "c4f043b4845c9aae68a870c96a5a34e75eecb41cc3a6bd64a7abb4b92582d277",
+    "src/blocks/media-list.tsx": "278bf99dc1b6386748b0597be926a9e683cafeeab2fa2b57c1a78d3ed0d78b6e",
+    "src/blocks/media-list.types.ts": "30fdd46e926fecc640cd71aa55ca9a34155ecf77c67dc7a6aaf2cc6d4660a2c2",
+    "src/blocks/mega-menu.tsx": "8617baceabccfa1ca55ce582d3826b2aa1a400689e801f8a1c98ba7e6ab5ea91",
+    "src/blocks/mega-menu.types.ts": "056c81e1507dd1f5d81367831240d65ab35145bbed4c27783942ea38ae2b4930",
+    "src/blocks/metric-row.tsx": "89d69edd7d99943c805fc8a7ed3627812deb3c9e67e6a313aabf61c693a2449f",
+    "src/blocks/metric-row.types.ts": "c8a47f76f9f1b94b436b68895e586a30f34201967c91159ef4e145169c291453",
+    "src/blocks/milestone-timeline.tsx": "170d4bff595ba9b1402f75d748029b94bde0d431c33364fbb589d0b8a2f73df5",
+    "src/blocks/milestone-timeline.types.ts": "e7da0209b4575401be48da09eefcbd48108936ddbc7e9ec4a939668b5387cc5e",
+    "src/blocks/nav-bar.tsx": "666121fa0235914b327ac2e0f8e05f66cc1a3d57f796a2cf465843c11dcb8bea",
+    "src/blocks/nav-bar.types.ts": "c54bfbd53c3506a21507761b00fb5ba26e5a27339a8809c2a8a72277685392db",
+    "src/blocks/newsletter-form.tsx": "3dcdad4ae210e583df23fc118f8f7604055251e7b223cf60a784447e1b4cb643",
+    "src/blocks/order-summary.tsx": "b949412e0a01f60e22df2a7cf7563c68671c0b2fc1c5e88d05bf536dd1ad7ece",
+    "src/blocks/order-summary.types.ts": "74280d6614841969b7bf18cf17b4f2795a35204a2c46f9da5c9a6789fa3694f9",
+    "src/blocks/order-table.tsx": "0e956527c6f13a7567840f19a1749c4d2e856dc6c51a657d254bbc9ceab5d0a7",
+    "src/blocks/order-table.types.ts": "efcdf8babc0e087fc5d1061a8e9a2cfb4d5eee5aa3105f1ad8050c49cd344a8a",
+    "src/blocks/page-intro.tsx": "3dd9114e245cd3b049691a7c2f38db71ee82202bd102aec7c6d450fc0057b553",
+    "src/blocks/page-trail.tsx": "d251919a17a65262e79bdd85a4f938777d36a9d5afc0c9f58df2595719b18e7a",
+    "src/blocks/page-trail.types.ts": "4e2a680642da4de46d56aa5ce55df4a8540d4338f24f400705239389051bd668",
+    "src/blocks/photo-gallery.tsx": "904597d0153d2f0a98a2849d447ab1d5b01e385945882d16bbbebd056bb984f2",
+    "src/blocks/photo-gallery.types.ts": "06a2f0c9e2a4d77d0c3c6a4bc7c3c797dcbe9cbe8e0017fdcac1a8f74aa35691",
+    "src/blocks/post-card.tsx": "dc278c625ddf6518fce0960f12bb05ba5a8fd5bfb69d17f6aaa80e73bc2aba1c",
+    "src/blocks/post-card.types.ts": "17585f000ffbfcb2ebb30cd4030899fc7dcd6a85f1d9a33f4c9646a9e8f369e8",
+    "src/blocks/post-grid.tsx": "8126da8be1b88c202a4810ad314beda5d57a4531ba8340ba9a88a5793d3d529c",
+    "src/blocks/post-grid.types.ts": "7dad1d7843814dfe72ad2a4f80f16614bdc787da85b942a351b8f15aad0aeac9",
+    "src/blocks/post-header.tsx": "78bff1080ecca7cca64308ae43c6c793a10ca39362fbc89b1cbb18d170366633",
+    "src/blocks/post-showcase.tsx": "115aae6d3b49e044267e5feacb73071c3c85aaea3e6db74041eb418ed03ff3a7",
+    "src/blocks/post-split.tsx": "46a97af0bce5fee884d3a7c3312d09226f673adcf1952bf6375e3a86781e8d11",
+    "src/blocks/post-split.types.ts": "1ef646f6acfd44b81113d9c95799b72886428adcdfdece02a67ded6cf0ec062e",
+    "src/blocks/pricing-card.tsx": "7e6ee2a9e63980d307c8adbf064221dc5c7efc6e4141d833890b272f78bb1528",
+    "src/blocks/pricing-card.types.ts": "6e0720cdd9a01ca9af210bd354adac7a32ee6ba76b36cb66f1c606562a97b724",
+    "src/blocks/pricing-tiers.tsx": "f7ccf8c30def150f639bae0e65456e6f85bfec7152ef6b67102de57bc091d69f",
+    "src/blocks/pricing-tiers.types.ts": "2324239330289603a8f69517dbe4ed428aad4d2c0e977e2baa6735fc8aa67fc6",
+    "src/blocks/product-card.tsx": "e5390211f6e80ee4188cb29ec5b48c0b4c6f98d67b3a61a70b5743b903ce87cb",
+    "src/blocks/product-card.types.ts": "8ed73709c2c62c3ccbaf3cee633a95cff31e435a6a375ccab83e9ecdfe9a1288",
+    "src/blocks/product-detail.tsx": "70d8e36c2ff1a5dd28ee23ea1b5452257908551101f17e9da12ae6a1be0b107c",
+    "src/blocks/product-detail.types.ts": "21523dab2a3ee82e5bf0dc3a5df1b68dd1b61bd0440dbc6da8b5b5ee530fea47",
+    "src/blocks/product-grid.tsx": "cb6a51448cfc4d2c89538c8615d29fca1e1b70d72e9672aff94178635b2fe4dd",
+    "src/blocks/product-info.tsx": "ff088f0087ec030d3221679074e52bcbf59b602ccb6014140c48157d866711ee",
+    "src/blocks/product-info.types.ts": "4da7062abf71c18b01e41b430464c5a22660b97d14106dce7ddb4b217ca9a55e",
+    "src/blocks/profile-form.tsx": "10dcbd195013860286125e03ae2f14c08f6c0eb8d78bab6f661a37155ef58f07",
+    "src/blocks/profile-form.types.ts": "b7d90d69db86b26ce9fecaf7f0c9f3df70ef45a59399afbeffca26a03d72adc2",
+    "src/blocks/project-grid.tsx": "aad52ff96215c798ff60fff00fc52710bbebeedbf01d8368d755f94871c93585",
+    "src/blocks/project-grid.types.ts": "6c8d59fe2a056fab97bcfb6ba3aeebc3b2c13a315e83c6e8b8dd05df25ec71d4",
+    "src/blocks/proof-band.tsx": "c7aec75a96dfbe9d36aa918e7d2c8e220d7e2a0c7d28a15eeb33ef731959c7c9",
+    "src/blocks/quote-split.tsx": "27bbfe7669fc13e8aba9549fc546c3f4efe87094df28f602b31e1d91377b4c49",
+    "src/blocks/quote-split.types.ts": "e611ebc9a576b69ae085e5d6203027dfefbbef21fa6f0e832e57247248285c17",
+    "src/blocks/review-list.tsx": "f1fc748e05a67f2bb47dacf93ec8143c813393a73b8533d42f8bdfe28d4a26cf",
+    "src/blocks/review-list.types.ts": "a28ccf74c9890c239c529dfc565865ac5ea34169d62de056d9bfc7e23b444fe4",
+    "src/blocks/shopping-cart.tsx": "ab2d6b3f6fa8790284bd1faddbafb22b150c28b77199dde28b8c313ea6f8ea73",
+    "src/blocks/shopping-cart.types.ts": "718d0b0ce29007dd7644fe2f2a9c6bba962829b308707c349712f2d9eb0457f6",
+    "src/blocks/sidebar-nav.tsx": "e4cbe6dbca87ecd7397bd097a261b8e3d9a46947fa996566391b6b230af75287",
+    "src/blocks/signup-wizard.tsx": "f24c4f35974c4f7cbfca965280c83a07a16a792fb4d70a8076a71486de81378e",
+    "src/blocks/signup-wizard.types.ts": "71456087f84eac60a95b460ed4e2b1ccf4572f5654a9dad8162ec2163aca635a",
+    "src/blocks/site-footer.tsx": "0caf4f131e7e4aaac2e2403d39d32379c7f45de584be30b7d14c39e655cee3f6",
+    "src/blocks/site-footer.types.ts": "3e1c4727ab0cbd891dd743e0278d5980cc2259145569cbd52a0389fcc5f36118",
+    "src/blocks/site-header.tsx": "e58873a7b7785d6c48cdcfd403571c94ff87e0813de0bf92542f145addbb611c",
+    "src/blocks/site-header.types.ts": "a8a9c8f7fd15951ab74c5ca467bc07f77adc3eadd0422c80ec53ef1139376dfb",
+    "src/blocks/sitemap-footer.tsx": "e6e5980d19513d52331b7627ce2d4d12d8098bb47c769af187be786c36d807dc",
+    "src/blocks/sitemap-footer.types.ts": "810cac7677786b3379073275c2823a147aba8f8a95531e4bf201ad4a1507d5be",
+    "src/blocks/skeleton-layout.tsx": "22e7e73c3532ece509cd7d207337ef88679db7da275f53b15c4e84c53a10ed42",
+    "src/blocks/skeleton-layout.types.ts": "5d96e19b1711d3c8e1163ddc2a5ef2ff4f980d494da87e9809e89428394bd50c",
+    "src/blocks/slot-board.tsx": "915c2f54a98cc6ab28f6df0a2710c4f735fa2bf83f2d5eca0bcf075bc0c7f1f0",
+    "src/blocks/slot-board.types.ts": "3542f55416cc63bcd15544d50021bc1a9401c02fd384479c6a38e2556499be20",
+    "src/blocks/stats-band.tsx": "8bd7379ba3d30c99c17786c01f229fd20f277d2bd2fb29ba2012ff2a559a3894",
+    "src/blocks/stats-band.types.ts": "47a7a6fb525314d9e1ba9d01d2f2bf59293f3902f79c07cb3773369e93a35f22",
+    "src/blocks/stepper.tsx": "32f5a1328e1dfa251db9dfb98444c82904c681deadfad38dc1640615c957eaba",
+    "src/blocks/steps-list.tsx": "23db333c7c452095d7d32206e8f0ab3b4b9dc01c8d707473d4c5a917e1a3a7b1",
+    "src/blocks/steps-list.types.ts": "911950b03bc28b244429c33f3628506c8270e97810c3a81f3305efeaf2221de2",
+    "src/blocks/store-hero.tsx": "e68c51c84f330572b0eaf9b9b392754aee8e646b236034da5961b9dd23f250fa",
+    "src/blocks/store-hero.types.ts": "cd6a768d92420bcb4caf45611520829aefd27a254ac182a7c22c3e5902016bde",
+    "src/blocks/store-locations.tsx": "8cad957c30c2dbe848ab835615eaa5945f4be2f5a98aa4215af2a419b5b7dbb5",
+    "src/blocks/store-locations.types.ts": "3fe37417236992ca8bb8197431573805d1f625437b9568aedda65421fdb5fdbc",
+    "src/blocks/story-tabs.tsx": "86b7cdbae3475d0084655a80a67ec9f3b15c47d14ae926fc6081113346793de7",
+    "src/blocks/story-tabs.types.ts": "4db25e3132fdf612777817e64e85821ae502041f19dc29ae0bcd8f36901d1fde",
+    "src/blocks/support-channels.tsx": "da2514f6b0f28157b34c0851d9badca58b9a2daf093251cf4eb111eb37dd8266",
+    "src/blocks/team-grid.tsx": "ad9a9a730194be8fedea839e7805c7cd48404010a9fd8aac00cd97c2c23f0d84",
+    "src/blocks/team-grid.types.ts": "fe4f0431e5c1408e1cc0a0efd2b7e23dd19f673870c03b2296b0a9cf07b0b402",
+    "src/blocks/template-grid.tsx": "80b058358d3d53d57462a9b98fc03900b4af00144cd35a05157940b13181ce84",
+    "src/blocks/template-grid.types.ts": "74ba85f8930eeea9a528590f89c9b865ef761d38c4f59dcbd909ef2df44bfd36",
+    "src/blocks/testimonial-grid.tsx": "da6f35d216c0e5a3e7ab37afc35ef7f9749185e63a8c69693db8744aad46137c",
+    "src/blocks/testimonial-grid.types.ts": "1cbc644c6de4f3887c0be522a2a2aab67bdbf3bd276647739342b02adf150ec5",
+    "src/blocks/tour-callout.tsx": "ae48e338718970638d108cb03ec89d052acfce073741a2f4f13bea5a82da883c",
+    "src/blocks/usage-calculator.tsx": "86d0174fd11023595ace565cb6ec25ba9c5b1be4a292c71579398e90fd4f2ae9",
+    "src/blocks/usage-calculator.types.ts": "d91f83ab20faba37f20698f41c85b0dce74b79ec0781fb405694969992b17959",
+    "src/blocks/usp-strip.tsx": "6d22c1b960bdfc2bae03a565ed8c8641e403e930c1e232a83b8a906e9a3cf17e",
+    "src/blocks/video-grid.tsx": "0c716608edbbac0c672384ad5db89a63ef0601171283788584956dda2f155db5",
+    "src/blocks/video-modal.tsx": "632de3caa4ddf229fd8ab81f5fc285a580cd68cd6bf753d457c32a5d37a1b532",
+    "src/blocks/video-modal.types.ts": "41b6aad69f119ffc067056ecfe57c599c039e10ea7c1e527a59dd7702ebfa1d8",
+    "src/blocks/zone-table.tsx": "7dcc2e0f8311bb4a2de3e007ae7920ff07992bfd918054cf548786a1a2a87857",
+    "src/blocks/zone-table.types.ts": "125c440eebe964662ad3468ef8101d7a186e650a003f72ee8318890e73da0433",
+    "src/components/action-group.tsx": "b4bd3ba4d58be2d58a460a3a0b36d903bcc96117a2532ed01bae43589bd8c996",
+    "src/components/app-main.tsx": "8396049902520e603cca1cb432c9fcfcb75c172747158a3f00c23682b7447a7e",
+    "src/components/article-block.tsx": "29326efde6c4157fb8ae1010df814a3a291a0bbabd8181c90e2595c3fb6ee22a",
+    "src/components/auth-form.tsx": "f2872681eff57925d87db3f47605b7c26d0e12b1c16e7216f9f62f043234aab4",
+    "src/components/avatar.tsx": "56e8132a1b950412afccda50c72fdb72f6f6ea0676d17eb95c961edf6f33e2ff",
+    "src/components/backdrop.tsx": "b87e89d2220acc5b25bd0ef3c8dcdb35ec9de2fb4a1223a5ef43d1ee05e117ec",
+    "src/components/badge-square.tsx": "f142ba4055b3bdb4be48799a5aec8d6514f72fdea2b8b447931782149c08c53f",
+    "src/components/bar-chart.tsx": "79ae6af9528878e67346c8642af2017c3d7a658663fc3c390df0d2d084f64ef5",
+    "src/components/bar-chart.types.ts": "968416cb2b20a1101e3285ac5f534150482d02787c24680cbdf1d6bd31f20c84",
+    "src/components/bulk-bar.tsx": "a93e873b1cc1b570529709ffa9764053ce53cd7d81c678fd8d43a37506159305",
+    "src/components/cart-summary-card.tsx": "0e3d65afc3cd17db531a0d63d9f5ad35c8d6e317b8b6e3b18b10e77fb183bfbd",
+    "src/components/cart-summary-card.types.ts": "5601fea020f5b34cdbd26b937dea1200da0a74817e5fb964789f19e2a5d3c0bf",
+    "src/components/cart-table.tsx": "14db27429b94b7b2debc7a776a1e34fbbbf4ec24f6879a0bc74e09287583b5bd",
+    "src/components/checkout-step.tsx": "162fa0a5c0fa511a8835cf7e158723bfcef7a99ab1646f5f9890603f4263928b",
+    "src/components/checkout-submit.tsx": "b1fa3661e771f910524c868caf2605505ff0dfa011fbedb619441e2067538100",
+    "src/components/code-window.tsx": "3abf7120872c9d0f622aae6526508b588c3a7908d17e129dc8e9649031c4ddfe",
+    "src/components/code-window.types.ts": "7ccd99c880b4b6335243f2a94d69984a0f70dff47a8c21750714ff09675187e3",
+    "src/components/compare-mark.tsx": "1a695a1f98b96a55f877670c5ec9332e768648fb8d3b09c7988547857698282c",
+    "src/components/cta-actions.tsx": "9cef217f986116107ac652a010779559423c355173081972667a5586533eeccb",
+    "src/components/cta-actions.types.ts": "46940268f998167e911b3f9e625d8cfa289aa47863e1ae5f45b64fa0292c1f5a",
+    "src/components/cta-proof-items.tsx": "c643566be402231548d15bdd90b425a2683c102959ed653d04877e5fae0a40f2",
+    "src/components/drawer-lines.tsx": "76ed707d366d8805ef95c705f2b89966b28c83ae0d385da89799581a12588939",
+    "src/components/dropdown-item.tsx": "00c0e30db5155e6ea775094816b1568f40d478469183ed435fe97ccc4b808541",
+    "src/components/editor-tab.tsx": "350fc8df5cb16cdc165e927dcff52e85e690fd462249f6d6ccedc2a4a0de9217",
+    "src/components/empty-state.tsx": "c57bb4aec36a93487ba44322a57a266b2645da617ae56b625865433a331fbc70",
+    "src/components/faq-cards.tsx": "38275226320ec632c610dcf92d51b1f771f9a2b2813c4094ec66bd8cdc7c80df",
+    "src/components/faq-disclosures.tsx": "5abbefeb9fce665dff9cd61273ee7299f8e0ac9db7dbac4d768886c9391fd291",
+    "src/components/faq-finder.tsx": "7f996b83bbeb990eca4cc30dbd2cddefff3213584729a786433eb83cd64463a0",
+    "src/components/faq-help.tsx": "a4b1099ed30fd783bb3a2936c229da062cb13928126867b4d1c2e296a4c20cde",
+    "src/components/feature-cards.tsx": "268a7da249b4480814a01f385d1332a148305629a0bc54e6c30097d415d80aba",
+    "src/components/feature-metric-cards.tsx": "c5038376daa708090658b4c77f623ff950e6d9eee5f119ec727e04a5591522ef",
+    "src/components/feature-pairs.tsx": "da10bc537cfbfb689fc304f5545797be6ed89ca55394e94abf49cda908600d56",
+    "src/components/feature-rows.tsx": "e84d9b1107c08483163cc61cbc824f5f5865ee74909472990bcf087a5021027c",
+    "src/components/feature-stat-rows.tsx": "0dee6b66ef84052ba48061ebdd9bab9eb95c281c4f393d0f6186194587fe282a",
+    "src/components/field.tsx": "364e9ad4b56f19352dde9d9d9836950af97b2b6f854588bdf06ccc96f4045c38",
+    "src/components/figure-block.tsx": "b48358a46e4b34a94ab3aa871616eb26d0b9970fc6cf29a5cac88b70c2a79dac",
+    "src/components/file-tree-item.tsx": "966d58e212b99501ca583d3cc846a42795be56294676f664afb8409305bb2d79",
+    "src/components/file-tree.tsx": "ddfaa9b8b8bc69609981a4e3a696c6f274d27d78c4b3642a4a89a5c649e8d11f",
+    "src/components/footer-brand.tsx": "055acd7157c05c286e74fbe38618de852b38e91fb87139a571372c75b276be71",
+    "src/components/footer-card.tsx": "670a54bf787785fe698c12e0c839504c4e3c0d3c4ac9d182c8067ab0d9beaa67",
+    "src/components/footer-channels.tsx": "88d36330baf74707f453ffae9b7f7f227c3efffb43c540342a47b7c2d590466b",
+    "src/components/footer-columns.tsx": "9affa0cd9c1ad6e3c79c15b74352adb4d917393da609e90b0271a7745b38133e",
+    "src/components/footer-contacts.tsx": "043cdec7f5620396e5d87a37dc3f46e2e3e8bb3b9841adafe52d82d3765848ed",
+    "src/components/footer-figures.tsx": "c5c874b816cc8747e1f6bbc557098eee3d0a05e190392209926dc6c1383e3785",
+    "src/components/footer-group-cards.tsx": "cb3c435a0ee766567f37af8c308054a0c5c6f1a1e874377f2bd70f873ad063db",
+    "src/components/footer-link-columns.tsx": "61adde9f7983078e69f010811a128bf22ca5069cda0c55ae0a7e1c342e223c7a",
+    "src/components/footer-points.tsx": "4e2247a4217866f5fa55ff2091431d5617090efe4db254f16be0c08f3a0942a7",
+    "src/components/footer-signup-card.tsx": "acd753ba3ef54a18cd7c02fb3d100b19cdf2e071171af7ffe9e8d4c4d75dc78f",
+    "src/components/footer-sitemap.tsx": "4a986fc1121fbc34ffbaabd9512d8e6cf9cb7ff840c3d3ce2e1331c15dee8a30",
+    "src/components/hero-badge.tsx": "fef8f91241653b7cfe4cc8481ecc1c340e917437f011d5d0827542e8f2d8e144",
+    "src/components/hero-head.tsx": "be9ebff407fff75199e372db2e6487f6729f62f808bb88ac2bdde37d48223eb9",
+    "src/components/hero-split-extras.tsx": "aa68f6446c6b6db275b0fc0bda93c89b31b593330ae779446747fe2e4869582d",
+    "src/components/hero-split-media.tsx": "7014980e8e589c16d23cfaa792319284cd9b0d9245cd1a2693564ec24a819b83",
+    "src/components/icon-tab.tsx": "60c3c32d41fd39b84011fdd0e5d7d065553240388f25ceaab6937f2672e01d78",
+    "src/components/icon-tabs.tsx": "193712a1634b9d2c87cf9faedac4bfc010d3901bd1a22aae6770e094eddef773",
+    "src/components/job-cards.tsx": "052267cddaa6a1a88e500d8a4dbbab4af4ca231e8b860813adc3af457777ceec",
+    "src/components/logo-sidebar.tsx": "e9a198e04419e6e2ff3f52d8d7ec379ffd111eaf98c48bfba919f05001544d8f",
+    "src/components/logo-slot.tsx": "52d78bd6aa216e87e2c0ff51f2307e2a4b193500874d0f363db422625b1496b9",
+    "src/components/media-contacts.tsx": "1f466c15efd1637d850025348e220cd672880a541f9c7ed6e6c0f8a29d8b59f3",
+    "src/components/media-figures.tsx": "3f3b5c386ea84017c68a7f2b4badb6434b65f3ea79c94124dde80ff2ed09d19b",
+    "src/components/media-frame.assets.ts": "fe55210352e1184f2ef9109e52fae0e862a04d337c4abaa521c73b966d2cf7a1",
+    "src/components/media-frame.tsx": "c1c7d57f27e71a4f76243ac7f64e6c4cdf9f9fec51cfd5a8c52a1bd924117647",
+    "src/components/media-posts.tsx": "63130894cf10cc994c25ac1b174d30426fd8a91df62fdb77621aae9b37ca17c9",
+    "src/components/media-review.tsx": "1ea99b9a2977810dd463803ca32c45df549648765fa3363cb8b30040e09d97b3",
+    "src/components/media-steps.tsx": "6e5e5f8478b4c2e3301d6c18098e4980fa8ef79cddb53c70567855c71be4be86",
+    "src/components/media-topics.tsx": "1d25dabcf5b108ffc6da45d8142527e6b79ba20c15ed7f04c6cfbf42f32205c8",
+    "src/components/member-row.tsx": "0e43e550ad3c32f50ac65d234514241bb10d6f057135da7d34236b0185f4574b",
+    "src/components/menu-entry.tsx": "97894d2f6cc59f4b0d8eb937bc403c167627bb9e72cfbe8c5c382c6f7ad0b651",
+    "src/components/meter-row.tsx": "9be130fd9189778d67fbbdec4562dc5842ec833c632bc27ac4e0b3abd91a351b",
+    "src/components/nav-actions.tsx": "516ec9ea5ad4cd2dd17b07ae141a63a42719ab90597e3189e85fac773eaaf992",
+    "src/components/nav-bar-menu.tsx": "6b89e76bbe6ab637fdb10e250d100b448bae17d705ec654a48e7f0b728000842",
+    "src/components/nav-block.tsx": "0e0363f745d2720c22d5a031847f2316ae712bb1a45dcfdefd05f617ad80c386",
+    "src/components/nav-item-row.tsx": "beaddb42ee2a9cbe7248b8676c0bed4ef973436430aea2891eab9a3a2fc79cd6",
+    "src/components/nav-item.tsx": "f86800b50d9366be21d166cf9e5733c000366723a4b2362021252881d823b2f1",
+    "src/components/nav-links.tsx": "542356f89f024b6078f02a3b029b361c6f87a86e62729c1b88b4ceecc39702f8",
+    "src/components/notice.tsx": "327b98d21f6fecba917837bcc346b1c29a71eedf46b93e7d003267e909649695",
+    "src/components/number-field.tsx": "6952889963c5594352e7c1e1a2eb8c3ca132f0b3b316efde24de600b83ec1a44",
+    "src/components/offer-media.tsx": "6a4d37f9fdc2a0e1eea7df9a02602951485c6151453febd3b6be6c7ebf4bbec8",
+    "src/components/order-rows.tsx": "d0258b6e7472167da50097a96fc5f4fbe6485b41e2376a77b16f6f9dfc234001",
+    "src/components/over-media.tsx": "89054f0c10b84beece048f9ba5d03c037ded5cf93aa3011b29b7605f47e4d417",
+    "src/components/page-aside.tsx": "14d2b7476835b4be9775a4b27777990820a6f7e1a933fa35518c21645ca85b6a",
+    "src/components/page-crumbs.tsx": "cc0768762fc4d6513211497cd8a66c4f3b270b7f6e3dc999921fbb9687a3e596",
+    "src/components/page-header.tsx": "f478b682a4e04d2256dd6157fdd74410ec914e908489d77be58e6b9a968d0de0",
+    "src/components/pager.tsx": "4d88ddbd94ad902e323bcd02aa0063cb3415a65797c0472fab06b1ae1727eaf9",
+    "src/components/panel.tsx": "f2aa8f1a3e9fed6c7f30dbf0a8d87fc4ab8dd235644a4e4b1043a9ad7cbe5a92",
+    "src/components/payment-options.tsx": "a1a31c473e907486b4ef6ef6be112253edbc5eb9f25b48eee34cba613e13d48f",
+    "src/components/payment-options.types.ts": "d73a1783fd536ff758a76642351532b0783a8e69e372d42e8be7200c5099d08a",
+    "src/components/pill.tsx": "0fc01906e1dea3071870ca4d5e5f1f700ffe81a77fb0d7b5d5d63976220cc68b",
+    "src/components/post-actions.tsx": "e2f86b82824fd9c4b89603a7f578b3334bbda96e3ea3244cb721ec9b139eb69d",
+    "src/components/post-author.tsx": "273698dae62cbc111aafb921d65cd26cbd65556f37d31341d7ca112feb617999",
+    "src/components/post-feature.tsx": "5f9a594cb4217916bb35094d5bcee434b3154d42e12ceb34d7e5aee9a93c94c5",
+    "src/components/post-mini-card.tsx": "68176a48d0599be3534544c4e1905f27acd68450e581c52de1a2b94bfe676f57",
+    "src/components/post-outline.tsx": "5540a4f5b6dcaefe1c1c5b664025ca3fb7830e1666012bb1122d2bd52f0f879b",
+    "src/components/post-overlay-card.tsx": "62ca0723a0f957214421da564300453a3a416a9be66e5c1a4c488190b8b1603c",
+    "src/components/post-stats.tsx": "141d0972fbce3da9b4860aa1e9c6bb8b02f56c52c4f506e61bdf1208866e7d74",
+    "src/components/post-tags.tsx": "4bd0e556f249fe24a41d01d931ef8f98ed3b2fa4d66f3cf2941d7a367985ef3c",
+    "src/components/product-gallery.tsx": "43a7edf617eaf1bf3ca6775a1cb43ab7e1c8d15aca99ffdda787fcf556474883",
+    "src/components/product-price.tsx": "3fca82b91abc92db15fb0e3e86a6c26e05dd6595572f378ffdc714f4510b6908",
+    "src/components/project-tiles.tsx": "d7abc38353de18a5a0bcab132e20e3442d864b368754e7a685e14b459d11db2c",
+    "src/components/prompt-composer.tsx": "98c699d2b8dc5efd3e62b204645d92e8e475ca23972a9ec837bf29d0eb7c14c0",
+    "src/components/quote-card.tsx": "d2a41199efe8deb53dd24304ee5447129c6024cda50ff2a5e2bda94135d52a13",
+    "src/components/quote-figures.tsx": "616ca086c730e9f68daecce4e69c6aa4766fb00de1f3850257aae8afca09511d",
+    "src/components/quote-logo-tiles.tsx": "d27b9fea86447e50e526487bccabf3b0a3be61a8af52709a32a85f528b165e4d",
+    "src/components/quote-proof.tsx": "df8a837f08a28a745325c0d09f355a8714651c66b75d6ffba948ffdc3a1c4158",
+    "src/components/quote-rating-panel.tsx": "8dc92010aceb3e8755ccfa72d18b93b45429127c40ff1a4b5498da1a51d9694a",
+    "src/components/quote-slot.tsx": "caf0005e4f14094c483afca38d50d42dda577041e42af5554aebe8b4daba6bac",
+    "src/components/range-field.tsx": "f4432f8162e61bc3833bd6d600f7a9ba2df2ca092c060eda7c12a2d7a632df2a",
+    "src/components/rating.tsx": "a36bfaf83aee95e9173bf2d18f9a2f3d188f273b7d7d9d3c1faa46dfd0e21321",
+    "src/components/region.tsx": "b097f755c8a025434a57e1159187a8ba9ef570693459a1184c9a77bbc3eb78bd",
+    "src/components/search-field.tsx": "707b1e550f2d85f81616a69506fdfc2b25045db8482ab914ea6f202a7351290f",
+    "src/components/search-palette.tsx": "7016ee25504a617077953a1db74256215eb7abf2a8b860560e7f177b9e119881",
+    "src/components/section-box.tsx": "3d954fcff93bd398d4dcc51df2112fcfc2c152d30cb0f6a46b2b406f6e96d791",
+    "src/components/section-column.tsx": "9402b1a1f97913758965ecc4a3059e2b4899ec1eba9a3d750c27c9f972cacf58",
+    "src/components/section-frame.tsx": "c4687c2438461eaf06dea62312ada4846478948d8355d851dac0db9656b0752f",
+    "src/components/section-frame.types.ts": "d65a75d32577bc988045d002342eb28412a47fe880cb85c0f9fca3806354f11c",
+    "src/components/section-head.tsx": "75cf82c3b58b094a69bb8d54ab2e6bb44e4d35742948deb69bdaef774b3f6443",
+    "src/components/section-header.tsx": "72a7ef157d72a22842017ea7b583bdb9ac864a09cd2b226df24ee0c94cbe74ba",
+    "src/components/shell-content.tsx": "57960ff3a4479a600f8d7760e65e07cfa5f9cd851fd2d6c41e73227fcf7d57f2",
+    "src/components/shell-footer.tsx": "fc250720c50825e5d301f1381999d90eae78fb9d5b7e63a36c52de30c76a257d",
+    "src/components/shell-sidebar.tsx": "719556a27bec55bcf7b492c4e280f15be90b04650a20d2ddd9a5f4e75bfb352d",
+    "src/components/shell-topbar.tsx": "436d812670ed5dd92ba2dfafee4e1b6d0c56b60a5018e6057d962e9294115b8e",
+    "src/components/sidebar-panel.tsx": "20545f75848e3cdf036963b18bbc2bf8a4bd16761a77eed32057e4597d1ceaaa",
+    "src/components/slot-grid.tsx": "25a3ef39fda248b0c42b832c9bae453ab8bf8cadd5efe6cf50546628deb5c8eb",
+    "src/components/slot-grid.types.ts": "dbfbdc87d0bb8b62513e901d0aefd48d554b0532fd683b34605b5b47e100d1a0",
+    "src/components/stat-figure.tsx": "e76db66f9177cb5ad02be23d8e5748fdfc2ebf7038008b6aeaae407d064d083a",
+    "src/components/stat-tile.tsx": "d922f3fb9c4108e1514534abfba361bf59df88ce7b8c9736a75811ff471b01f1",
+    "src/components/story-dots.tsx": "0d66faf1266aee3757ba97bb9c08a177521d5db90b72d1e19c75adadce3ff873",
+    "src/components/story-panel.tsx": "465d1894eb1a614cb071f2c0a3eead8f31d4125d72da489162c5bd41a2aab701",
+    "src/components/switcher-item.tsx": "c59ff818b4d83a0467fb3ac68b3aba178f223777ad7e0313de388db8f925b367",
+    "src/components/switcher.tsx": "c5e97e6dfd159336b06fd3b5ea4e83c058eaf68f0e8619d0871c7741a29b8f08",
+    "src/components/table-toolbar.tsx": "2bdf4aa4b85e86ef8e85424d4c4ad6e73f39fcf7ad44e36ecb7bef8411688736",
+    "src/components/timeline.tsx": "e2f765ed1df01d366abc20bf2f642264a6c6ae7c676e55e814f8d0ce32346808",
+    "src/components/timeline.types.ts": "2f1b0a9d5471f486efc6a86921b52143867da2a4d36963d84c9cbf77332316b1",
+    "src/components/topic-chips.tsx": "f53b498f48ce6fa69451084bc784c403ea138f5558258bca340f185d128af500",
+    "src/components/topic-chips.types.ts": "04d234613b49a81b216e8913c294ba6d11aec58f17bc49580793347d39149ec3",
+    "src/components/weighted-title.tsx": "e58b22d78a7dc3601f2672f4423759e197efc568d11191553ffa8b6ce13aa71b",
+    "src/components/zone-rows.tsx": "a84574cdad62cd86868d00a5627abe521e4becb884912111a9769dfe00b1a4e4",
+    "src/index.ts": "c18524ab068a82cb00aa2aee2930400e72f36d5d4586da52f48b43e1d66b9db3",
+    "src/presets/defaults.ts": "0f8d491e02d5cbad4b3e324239b780ed1b8dd6acdfe1c3fdeb87295167a94f51",
+    "src/primitives/alert/alert.tsx": "0644cf0f4f919a73057e76f5e28cd163c1693b3a182d2b7235bb609b2e7f39e3",
+    "src/primitives/badge/badge.tsx": "e545a57f480ae70880987e16b47aaf40dfdf63e4967d062a8b1cbca47f2a6603",
+    "src/primitives/block/block.tsx": "4ae72e15f764f3caae1a6c5f714fa27f4fea566ba176dc5fc557d66eea4ba185",
+    "src/primitives/box/box.tsx": "4b47543d915d45f39e7ad4b239a6ef07a2f583eb5561195a05838f6fbede1784",
+    "src/primitives/breadcrumb/breadcrumb.tsx": "4a6d6fbe6c9889ff52a7dcb0411ae705edecd240e7e4480a81c19ae2136c31d1",
+    "src/primitives/button-plain/button-plain.tsx": "918ba6ea06bdaaf13073768681e6865d5ccca868aba254cfc4cf3ef2d624d96c",
+    "src/primitives/button/button.tsx": "c1a1034d02b533dd4652ee45bfae5e38fc38d1e4a2c7df9b0f1236aade63508f",
+    "src/primitives/card/card-content.tsx": "67dcdaf53ec91cfa58258bcf64e62117ba7b924fa83be654dcb226e6298d0c12",
+    "src/primitives/card/card-description.tsx": "84db3bf048b3e16f397a4b7bbf770b689933d191f8248a12e6ad66d996b67f43",
+    "src/primitives/card/card-footer.tsx": "fd9d4b9faabd33b4e774f28564d371fd6d353d92f554793c076a16b6b1c8e1b6",
+    "src/primitives/card/card-header.tsx": "bbd57a2b9bd7cbb4ca6b1d8b9ba15348ec0b5aedd52ea79f6ac45b71b93efbff",
+    "src/primitives/card/card-title.tsx": "2aac8a575efdb0a1e6294fbdde87f39dc0cda3354cb843e666f0e09b669d20fa",
+    "src/primitives/card/card.tsx": "89dd9f7ed6d985a05f418b873b7860f73f215dc6ec7fae80f38b750bd7062cb7",
+    "src/primitives/checkbox/checkbox.tsx": "aaef9bf5cdd553bbf36f6aabf98db5b304a05997a857ec58e299c1731966b81f",
+    "src/primitives/container/container.tsx": "7df10e76d20e929461ffd8ddbb0dcfc0bf19afd4b2c9988fe67f90a52c6261fa",
+    "src/primitives/dialog/dialog.tsx": "234c09c6a835dc2d1f2ef4e46db24409f905e1407c7dacc500208af3ab455925",
+    "src/primitives/disclosure/disclosure.tsx": "454148571dc37a0bfc7408d7f9f52947319d8ed9bdb490c4471b679d8ce0682b",
+    "src/primitives/disclosure/summary.tsx": "0323623bd29abaf637d6c00cf4380eede4d90affa6775a79b23e6395009fdbe6",
+    "src/primitives/form/data-list.tsx": "3b635560c021a7a24e053af2ba8d2e61497f8ebaa82a155ef76259b02d209a36",
+    "src/primitives/form/data-option.tsx": "9fb047bf0841ce7a71077b6c0b1705bc889c7dc4aa5a745f1c08e60634967ebb",
+    "src/primitives/form/fieldset.tsx": "b8d6795a51fdf647b180bc9f2a1a9e41fd72cfbf027ae2f3f6d6e4b748f39dff",
+    "src/primitives/form/form-description.tsx": "d96b095b897653d62b65709b9f6edca6f147b8cc1b84474009487a504b0c592b",
+    "src/primitives/form/form-item.tsx": "3af195be10f4b9b3f8e23a0a4b60528378528b17b2da7acb07a3e1ca56d7db96",
+    "src/primitives/form/form-message.tsx": "e9ea66372fe32216e12914825fa1b0589b435357759bef471c6e8a748fee4d7a",
+    "src/primitives/form/form.tsx": "f7e9924c2f652ab079e0fc0322ef8683a444383edc86dcb70d115bfb692212d5",
+    "src/primitives/form/legend.tsx": "de0b7d2c12ab764094f2f472528a8f06c4d8c52d7971175c93752f6cd6171afd",
+    "src/primitives/form/meter.tsx": "8ce6038fdfa80440674b3ad870bf593e9277e629bd2c47cb64ec2fc68218db18",
+    "src/primitives/form/output.tsx": "ade8195aea8cc405cc3c46029038dd2a692986c45f0b7142915bcf8ac4f7c90a",
+    "src/primitives/form/progress.tsx": "6e0e41393e92273e0ea117939cab58cb7084fad0940522082cc42031407fbdfc",
+    "src/primitives/grid/grid-col.tsx": "05cc699a59edf1db75b75e7007c25a2ba2abe8ea544e9a7383222cbee01f49e7",
+    "src/primitives/grid/grid.tsx": "4f3f025a2fd2dc18d0c2a5e899f358ba4e256ab8a719e2e0cf59f3744944fc6a",
+    "src/primitives/group/group.tsx": "e06fba4a87362173d6b3314b2d8f6912f6a6539c5c18ce7ea460f1d602d8bf4d",
+    "src/primitives/icon/icon.tsx": "02e1c3351c7a66b6eac2d1330dfdcb846b45ef1a8d1772aedcb29f6603f6c24a",
+    "src/primitives/iconbadge/iconbadge.tsx": "6d7b766ef6fafc26796a45d20fb962b00e33dfe533be16cca3cf9f135d2d1a4e",
+    "src/primitives/image/image.tsx": "1173958c7a0f7adaa4643732b017a114527fd44d141a45861705c59d674e881d",
+    "src/primitives/image/picture.tsx": "0406019b3d50e5b9798b4c6bbc68c98b47bf8f953f5f8e99612ddc4fd3ce04aa",
+    "src/primitives/image/source.tsx": "8b130e3fecb2bb86c4f7d998d0dd459bd95d8d8a0286625ce895d8a67fed58a7",
+    "src/primitives/inline/inline.tsx": "4629225b0d9b916214ad56d3f650a9c0986f310bd7b7ab6f9fa9a13573fa9dc3",
+    "src/primitives/input/input.tsx": "9684975fe82fa8a817cd50fe655af5a6a437a4d560407be3c59977ecd561acda",
+    "src/primitives/label/label.tsx": "e38b75b58d58f9364999fe636038ec9091c3130392777e37747095055ca86058",
+    "src/primitives/linebreak/linebreak.tsx": "9840d9a42f6c6a928c542037e0c9f89ab88dad326b1ef86d4439cdce1a55fb62",
+    "src/primitives/link-plain/link-plain.tsx": "c4b649e14072123d431f27789f777ed260d22733f91f8b6f2b6aecd076e1535f",
+    "src/primitives/link/link.tsx": "a9763c43c02a884cc90dc79012195eeb2e37d883ff0bce0855d335f651ae6d4e",
+    "src/primitives/list/list-item.tsx": "1e9ca3204a35b77226166aa8bd7d831134137b6bb0c7389396707204625cb1d9",
+    "src/primitives/list/list.tsx": "1371c20c0522460cb46ae52cd785ec6a61838e272b11b0942d843085ffde82bb",
+    "src/primitives/lucide-icon/lucide-icon.tsx": "f1108d1678d6155943f21203a5e5efc8934a29c112dff4d9ca4f490a1f6c104f",
+    "src/primitives/lucide-icon/lucide-icons.ts": "a05bb5050ccb7c015088a0c5061116aaa400a15b70f3c8a9f9ca2e4bdd2ddd84",
+    "src/primitives/radio/radio.tsx": "070f74af118d1467808604a7b1cac0591ad610980abdbc51e822444000f243b5",
+    "src/primitives/range/range.tsx": "b359c25998cd660833af3e459c47b47f5a30454d441ff40ca6fba540a7b3062d",
+    "src/primitives/select/opt-group.tsx": "18462b4bff11c2126433a8b59cbc34e7e33a2a47f27657a802bc609873ed66b8",
+    "src/primitives/select/select-option.tsx": "4da3af00a734a86de44fc753fef59506f97d0e45b50f2f8fed997017b7688a6e",
+    "src/primitives/select/select.tsx": "5e5f4c11a6aa8674a9d8f5316d8c96c2c8aa32d542c3f5e1ae13e8aa6e2f1409",
+    "src/primitives/separator/separator.tsx": "3ecf8f01983448968ddc4c5e5064f1bfae97e0ac14f9387c01ee322e964db547",
+    "src/primitives/sheet/sheet-close.tsx": "c5a26bb8e3ef4ea61d44f0b855a53ce55916a44e87be1e3b5ad3f7fee19ec92d",
+    "src/primitives/sheet/sheet-trigger.tsx": "919a8f21d9fc6e7d7ebe88d74dcde88ee1ec1119b8809f1266fa01366c6bb963",
+    "src/primitives/sheet/sheet.tsx": "9d227b58f06ee6991be4869058c07c47d34f4d9ef606f2277936e45ca03478e8",
+    "src/primitives/skeleton/skeleton.tsx": "c6530d096d445398a9b1068b396664e798336447a846f7233a9eb839d7d892ce",
+    "src/primitives/slot/slot.tsx": "9379059725549ce86824bf4c560eb97b8714ce234d7a6a90a0d0829c0cde0c10",
+    "src/primitives/stack/stack.tsx": "e8359dc2bbff9cf0acc4fa1a8f264e0fc8fde4709d2cea72a2c311241e4da9e7",
+    "src/primitives/switch/switch.tsx": "789075f1d7b7ef91dfa0aa0dc34383dad43a243b0b0954e4eee36dd90c6da0bf",
+    "src/primitives/table/table-body.tsx": "d4dccf64a1ec337e91e72bebc693da3942ef8c92736396f3e117fb7a85bc54e8",
+    "src/primitives/table/table-caption.tsx": "573eb9dc649d0294d0a090381e1be1a425d1c452773d97db6bf4758cddfbc400",
+    "src/primitives/table/table-cell.tsx": "c5ec8c8a8fa8f7c97b5d60dc5ba42bc0ae05250ba0c9823c9935fce120456fba",
+    "src/primitives/table/table-col-group.tsx": "bdc455890dd54e7363dd9e9ba47bd981c51de9315614efce1bd7ab057a57ed1f",
+    "src/primitives/table/table-col.tsx": "4759dde0caebbce5216750b7469efb27ebe71138d85a815426529de14cdea6d8",
+    "src/primitives/table/table-foot.tsx": "0dbfe8cd790f4cfc1981ad7ac80adf1ce69260597521152fca28d233e0c3e480",
+    "src/primitives/table/table-head-cell.tsx": "69141f2872665da9b3bc40fa994001cfa771ddb78661d1fcc798474a9edea933",
+    "src/primitives/table/table-head.tsx": "b6ab13d10d725b53152c3b2f7d37637d4f30effae984f1c6c8d42cf1cc70bcec",
+    "src/primitives/table/table-row.tsx": "572830507442fe3cbfcea70474366b81b59cd3f5dd0d376ec138f4340fc2d6fb",
+    "src/primitives/table/table.tsx": "1df3bd3ecb463b43bcf6a8fdd1c2a04729515fa89df90bbade895fa55f13abe3",
+    "src/primitives/text/text.tsx": "2379f15aec834032231f2dbe748dcd5e852af78f81ec6f77793bb49791d2edac",
+    "src/primitives/textarea/textarea.tsx": "072bad002ca1396d4916886de71173483c1918f717db62b0b05c4aca836c3976",
+    "src/primitives/themetoggle/themetoggle.tsx": "391dc5345d4d02d80c963647a4614cabd250aa01d981624ae091c4acb1c2ad15",
+    "src/primitives/title/title.tsx": "f6d5340314d94157c21d58a0baa10600552ae0dd62319661cf091c0e5738ea21",
+    "src/styles/index.css": "faab415882b268aae6efcee8a1db1660f9c0db83fdd1fdf23b0a9fd07eb18e93",
+    "src/styles/kit.css": "61a0fcb6630cf5e9811af1d16acc75066c440998b362d5dd6e576d6033d8aa91",
+    "src/styles/theme.css": "7c7c42d778a4ecc5ad87aeddf6fefa651f7164c4a24a4c78de2583a9fdfc2897",
+    "src/utils/a11y/dismiss.ts": "4857c8d86154e03cce8666a4bee9f169b1912eb37ea617a50e0313af198eb4cd",
+    "src/utils/a11y/focus-trap.ts": "48192cd0da3f0e36da6f6270565e86474e09d86dc4939512c5f70197312495b6",
+    "src/utils/a11y/focusable.ts": "1c198ba33a0a28cd3fc60b3d0cde564724a0c8a763010cf5d5b1c5749aeea039",
+    "src/utils/a11y/index.ts": "3f75625517661a016eca02d8be226e9422df2278c61f9c22bbc97e6047e82f9c",
+    "src/utils/a11y/roving.ts": "c01c19f7ea3be4aabfcbd64b0ea7c2657f5845cbdb5ad88fb1f8079937c6b60b",
+    "src/utils/a11y/scroll-lock.ts": "857cf3ffb53ce2fec202fa74f43d8d0c8e088a06a42daa60fa9e076f5f9dd3aa",
+    "src/utils/cn.ts": "9a07c604362da93936b2e5efae3bcef078d4f3c158e8aabe65856706768dec3f",
+    "src/utils/env.ts": "9e846ba9d690cb22d4fffeb4976200727854c2657845baababf5e1864ec916b1",
+    "src/utils/expr.ts": "d69a9fae5a2ebc126e0aabcf5d5c09697cc91c4df3ed453edeb14fba2376a28e",
+    "src/utils/format.ts": "e1bafdc1408e2a68b58d1b520878ddb87f7cb626c45b5ca65869729bd7dfdb51",
+    "src/utils/index.ts": "11aa42b5489421a050b39364edba13c4490f8a660d150c97ad8b95bef39050c9",
+    "src/utils/tags.ts": "e1406704ec4c738b4c395a2603de2f4313681504b84232f0fffa1d3d48cb2a4d",
+    "src/utils/variants.ts": "f027b4237cb7058efda6bd627d9db07b1e22b59f30bf3d8590f13702e1dd6415",
+    "tsconfig.json": "d75b35b13d2e8decc111a6558bd59fd601c326b2b93019b8100d31712f1f69bd"
+  }
+}
diff --git a/packages/react/ui/README.md b/packages/react/ui/README.md
new file mode 100644
index 0000000..4349749
--- /dev/null
+++ b/packages/react/ui/README.md
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/generator/src/readme.ts -->
+# @ui8kit/react-ui
+
+React 19 package **generated** by xgen from `xgen/specs`: 40 bricks, 72 parts, 243 organism(s).
+
+Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`; `bun run check` fails when a file differs from what the specs produce.
+
+```ts
+import { Button, Card, PricingCard } from "@ui8kit/react-ui";
+```
+
+Styles: `@import "@ui8kit/react-ui/styles/index.css";` in the app CSS (Tailwind v4).
+
+The package has no build step. Text comes only through props; the organisms take their texts as `labels`.
+
+## Layout (shadcn style: three tiers, kebab-case files, PascalCase exports)
+
+```
+src/primitives/<name>/   one primitive per folder, the variant table at the top of the file (`buttonVariants = variants({...})`)
+src/components/          small compositions of primitives (media-frame.tsx, nav-item.tsx, ...)
+src/blocks/              page sections made of components (hero-section.tsx, logo-cloud.tsx, ...)
+src/presets/<kit>.ts     the only place for kit sizes (arbitrary Tailwind values)
+src/utils/               cn, variants (a cva clone), formatters
+src/index.ts             named re-exports, grouped by tier
+```
diff --git a/packages/react/ui/package.json b/packages/react/ui/package.json
new file mode 100644
index 0000000..db4f3d7
--- /dev/null
+++ b/packages/react/ui/package.json
@@ -0,0 +1,62 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "@ui8kit/react-ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "React 19 primitives (40 bricks, 72 parts) and organisms, generated by xgen from xgen/specs. Source only, no build step: the consumer's Vite compiles it.",
+  "sideEffects": [
+    "*.css"
+  ],
+  "ui8kit": {
+    "runtime": "react",
+    "generated": true,
+    "kit": [
+      "src/primitives",
+      "src/utils",
+      "src/styles"
+    ],
+    "composition": [
+      "src/blocks",
+      "src/components"
+    ],
+    "blockRoot": [
+      "src/blocks",
+      "src/components/faq-help.tsx",
+      "src/components/footer-card.tsx",
+      "src/components/hero-head.tsx",
+      "src/components/region.tsx",
+      "src/components/section-frame.tsx",
+      "src/components/shell-footer.tsx",
+      "src/components/shell-sidebar.tsx",
+      "src/components/shell-topbar.tsx",
+      "src/components/sidebar-panel.tsx"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles/*": "./src/styles/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "check": "tsc --noEmit -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "tailwindcss": "^4.3.3"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "~6.0.2"
+  }
+}
diff --git a/packages/react/ui/src/blocks/about-company.tsx b/packages/react/ui/src/blocks/about-company.tsx
new file mode 100644
index 0000000..d0b96c5
--- /dev/null
+++ b/packages/react/ui/src/blocks/about-company.tsx
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+/**
+ * The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout
+ * (split: the pictures beside the text, stacked: the pictures under it), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type AboutCompanyProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  stats: Stat[];
+  values: Feature[];
+  layout?: "split" | "stacked";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function AboutCompany({
+  id,
+  title,
+  lead = "",
+  stats,
+  values,
+  layout = "split",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: AboutCompanyProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      density={density}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      media={{ show: true, side: "start" }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <Box className="grid grid-cols-3 gap-4" data-testid="strip">
+          <MediaFrame alt={title} ratio="3/4" />
+          <MediaFrame alt={title} ratio="3/4" className="mt-8" />
+          <MediaFrame alt={title} ratio="3/4" />
+        </Box>
+      )}
+    >
+      {((stats?.length ?? 0) > 0) ? (
+        <Grid cols="2-4" className="gap-4" data-testid="stats">
+          {(stats ?? []).map((s) => (
+            <Stack key={s.id} gap="0" data-testid="stat">
+              <Text size="3xl" weight="bold">
+                {s.value}
+              </Text>
+              <Text size="xs" className="text-muted-foreground">
+                {s.label}
+              </Text>
+            </Stack>
+          ))}
+        </Grid>
+      ) : null}
+      {((values?.length ?? 0) > 0) ? (
+        <Box
+          className={cn(
+            "grid grid-cols-1 gap-4",
+            (((layout as string) === "stacked") ? "md:grid-cols-3" : "")
+          )}
+          data-testid="values"
+        >
+          {(values ?? []).map((v) => (
+            <Group key={v.id} gap="4" align="start" className="border-t border-border pt-4" data-testid="value">
+              <LucideIcon name={v.icon} size={20} />
+              <Stack gap="2">
+                <Text size="sm" weight="semibold">
+                  {v.title}
+                </Text>
+                <Text size="sm" className="text-muted-foreground">
+                  {v.text}
+                </Text>
+              </Stack>
+            </Group>
+          ))}
+        </Box>
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/about-me.tsx b/packages/react/ui/src/blocks/about-me.tsx
new file mode 100644
index 0000000..dad1cd8
--- /dev/null
+++ b/packages/react/ui/src/blocks/about-me.tsx
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+/**
+ * A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of
+ * specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills),
+ * mediaSide, tone.
+ */
+import { type ReactNode } from "react";
+import { Progress } from "../primitives/form/progress";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Skill, AboutMeLabels } from "./about-me.types";
+import type { Spec } from "./product-info.types";
+import type { LinkActions } from "./error-page.types";
+
+export type AboutMeProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  facts: Spec[];
+  skills: Skill[];
+  labels: AboutMeLabels;
+  actions: LinkActions;
+  layout?: "facts" | "skills";
+  mediaSide?: "start" | "end";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function AboutMe({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 1,
+  facts,
+  skills,
+  labels,
+  actions,
+  layout = "facts",
+  mediaSide = "start",
+  tone = "default",
+  landmarkLabel,
+}: AboutMeProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge, level }}
+      layout="split"
+      media={{ show: true, side: mediaSide }}
+      tone={tone}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="3/4" />
+      )}
+    >
+      {((layout as string) === "facts") ? (
+        <>
+          {((facts?.length ?? 0) > 0) ? (
+            <List tag="ul" className="grid grid-cols-1 gap-4 sm:grid-cols-2" data-testid="facts">
+              {(facts ?? []).map((f) => (
+                <ListItem key={f.id} className="rounded bg-card inset-ring inset-ring-border flex flex-col gap-0 p-4" data-testid="fact">
+                  <Text size="xs" className="text-muted-foreground">
+                    {f.label}
+                  </Text>
+                  <Text size="sm" weight="semibold">
+                    {f.value}
+                  </Text>
+                </ListItem>
+              ))}
+            </List>
+          ) : null}
+        </>
+      ) : ((skills?.length ?? 0) > 0) ? (
+        <Stack gap="4" align="stretch" data-testid="skills">
+          {(skills ?? []).map((s) => (
+            <Stack key={s.id} gap="2" align="stretch" data-testid="skill">
+              <Group gap="4" justify="between">
+                <Text size="sm" weight="semibold">
+                  {s.label}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {tpl(labels.level, s.level)}
+                </Text>
+              </Group>
+              <Progress value={(s.level == null ? undefined : String(s.level))} max="100" aria-label={s.label} />
+            </Stack>
+          ))}
+        </Stack>
+      ) : null}
+      <ActionGroup
+        primary={actions.cta}
+        primaryHref={actions.href}
+        secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+        secondaryHref={actions.secondaryHref}
+      />
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/about-me.types.ts b/packages/react/ui/src/blocks/about-me.types.ts
new file mode 100644
index 0000000..255f048
--- /dev/null
+++ b/packages/react/ui/src/blocks/about-me.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Skill = {
+  id: string;
+  label: string;
+  level: number;
+};
+
+export type AboutMeLabels = {
+  level: string;
+};
diff --git a/packages/react/ui/src/blocks/activity-feed.tsx b/packages/react/ui/src/blocks/activity-feed.tsx
new file mode 100644
index 0000000..b88da3b
--- /dev/null
+++ b/packages/react/ui/src/blocks/activity-feed.tsx
@@ -0,0 +1,87 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout
+ * (timeline, list), density (default, compact), tone (default, muted).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { Panel } from "../components/panel";
+import { Timeline } from "../components/timeline";
+import { cn, tpl } from "../utils";
+import type { Event } from "./activity-feed.types";
+
+export type ActivityFeedProps = {
+  id: string;
+  title: string;
+  text: string;
+  events: Event[];
+  empty?: string;
+  layout?: "timeline" | "list";
+  density?: "default" | "compact";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ActivityFeed({
+  id,
+  title,
+  text,
+  events,
+  empty = "",
+  layout = "timeline",
+  density = "default",
+  tone = "default",
+  landmarkLabel,
+}: ActivityFeedProps) {
+  return (
+    <Block
+      tag="section"
+      aria-labelledby={(landmarkLabel ? undefined : ((title && id) ? tpl("{0}-t", id) : undefined))}
+      data-testid="panel-section"
+      aria-label={landmarkLabel}
+    >
+      <Container className="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+        <Panel title={title} description={text} id={id} className={(((tone as string) === "muted") ? "bg-muted" : "")}>
+          {((events?.length ?? 0) === 0) ? (
+            <EmptyState icon="activity" title={empty} />
+          ) : ((layout as string) === "timeline") ? (
+            <Timeline items={events} />
+          ) : (
+            <List className="m-0 flex list-none flex-col p-0" data-testid="items">
+              {(events ?? []).map((e) => (
+                <ListItem key={e.id}
+                  className={cn(
+                    "flex items-start justify-between gap-4 border-b border-border last:border-0",
+                    (((density as string) === "compact") ? "py-2" : "py-4")
+                  )}
+                  data-testid="item"
+                >
+                  <Stack gap="0">
+                    <Text size="sm" weight="semibold">
+                      {e.title}
+                    </Text>
+                    {((density as string) === "default") ? (
+                      <Text size="sm" className="text-muted-foreground">
+                        {e.text}
+                      </Text>
+                    ) : null}
+                  </Stack>
+                  <Text size="xs" className="shrink-0 text-muted-foreground">
+                    {e.time}
+                  </Text>
+                </ListItem>
+              ))}
+            </List>
+          )}
+        </Panel>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/activity-feed.types.ts b/packages/react/ui/src/blocks/activity-feed.types.ts
new file mode 100644
index 0000000..8da30ee
--- /dev/null
+++ b/packages/react/ui/src/blocks/activity-feed.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Event = {
+  id: string;
+  title: string;
+  text: string;
+  time: string;
+  tone: string;
+};
diff --git a/packages/react/ui/src/blocks/announcement-bar.tsx b/packages/react/ui/src/blocks/announcement-bar.tsx
new file mode 100644
index 0000000..a0fd387
--- /dev/null
+++ b/packages/react/ui/src/blocks/announcement-bar.tsx
@@ -0,0 +1,118 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default,
+ * muted), layout (center, split), dismiss (show, hide).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type AnnouncementBarProps = {
+  label: string;
+  text: string;
+  cta?: string;
+  ctaHref?: string;
+  icon?: string;
+  dismissLabel: string;
+  tone?: "default" | "muted";
+  layout?: "center" | "split";
+  dismiss?: "show" | "hide";
+  badgeLabel?: string;
+  badge?: "none" | "show";
+  position?: "top" | "bottom";
+  landmarkLabel?: string;
+};
+
+export function AnnouncementBar({
+  label,
+  text,
+  cta,
+  ctaHref,
+  icon = "megaphone",
+  dismissLabel,
+  tone = "default",
+  layout = "center",
+  dismiss = "hide",
+  badgeLabel,
+  badge = "none",
+  position = "top",
+  landmarkLabel,
+}: AnnouncementBarProps) {
+  return (
+    <Block
+      tag="aside"
+      className={cn(
+        "w-full",
+        (((position as string) === "bottom") ? "sticky bottom-0 z-40 border-t border-border" : ""),
+        (
+          (tone as string) === "muted" ? "bg-muted text-foreground"
+          : "bg-primary text-primary-foreground"
+        )
+      )}
+      aria-label={(landmarkLabel ?? label)}
+      data-testid="announcement"
+      data-layout={layout}
+    >
+      <Container
+        className={cn(
+          "mx-auto w-full max-w-6xl px-4",
+          "flex items-center gap-4 py-2",
+          (((layout as string) === "split") ? "justify-between" : "justify-center")
+        )}
+        data-slot="container"
+      >
+        <Group
+          gap="4"
+          align="center"
+          className={cn(
+            "min-w-0 flex-wrap",
+            ((((layout as string) === "center") && ((dismiss as string) === "show")) ? "ml-auto" : "")
+          )}
+        >
+          <LucideIcon name={icon} size={16} />
+          {((badge as string) === "show") ? (
+            <Inline
+              className="rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current"
+              data-testid="announcement-badge"
+            >
+              {badgeLabel}
+            </Inline>
+          ) : null}
+          <Text size="sm">
+            {text}
+          </Text>
+          {cta ? (
+            <LinkPlain
+              href={ctaHref}
+              className="inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4"
+              data-testid="announcement-cta"
+            >
+              {cta}
+              <LucideIcon name="arrow-right" size={16} />
+            </LinkPlain>
+          ) : null}
+        </Group>
+        {((dismiss as string) === "show") ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="ml-auto shrink-0 text-current"
+            type="button"
+            aria-label={dismissLabel}
+            data-testid="dismiss"
+          >
+            <LucideIcon name="x" size={16} />
+          </Button>
+        ) : null}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/app-shell.tsx b/packages/react/ui/src/blocks/app-shell.tsx
new file mode 100644
index 0000000..e50d9d0
--- /dev/null
+++ b/packages/react/ui/src/blocks/app-shell.tsx
@@ -0,0 +1,132 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+/**
+ * The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a
+ * bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar
+ * is a port contract.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { AppMain } from "../components/app-main";
+import { NavBar } from "../blocks/nav-bar";
+import { Panel } from "../components/panel";
+import { SidebarNav } from "../blocks/sidebar-nav";
+import { cn, tpl } from "../utils";
+import type { AppNav, AppUser } from "./app-shell.types";
+import type { NavLink, NavSearch } from "./nav-bar.types";
+import type { Metric } from "./metric-row.types";
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+import type { OverviewChart, OverviewActivity } from "./dashboard-overview.types";
+
+export type AppShellProps = {
+  id: string;
+  title: string;
+  nav: AppNav;
+  user: AppUser;
+  search: NavSearch;
+  metrics: Metric[];
+  chart: OverviewChart;
+  activity: OverviewActivity;
+  layout?: "sidebar" | "top" | "panes";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function AppShell({
+  id,
+  title,
+  nav,
+  user,
+  search,
+  metrics,
+  chart,
+  activity,
+  layout = "sidebar",
+  density = "default",
+  landmarkLabel,
+}: AppShellProps) {
+  return (
+    <Block
+      tag="section"
+      className="bg-background"
+      aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+      data-testid="app-shell"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      {((layout as string) === "top") ? (
+        <Stack gap="6" align="stretch">
+          <NavBar
+            label={nav.label}
+            brand={nav.brand}
+            links={nav.links}
+            current={nav.current}
+            search={search}
+            actions={{ mode: "none" }}
+            layout="search"
+            landmarkLabel={landmarkLabel}
+          />
+          <Container className={cn("mx-auto w-full max-w-6xl px-4", "pb-8")} data-slot="container">
+            <AppMain id={id} title={title} metrics={metrics} chart={chart} cols="1-4" activity={activity} density={density} />
+          </Container>
+        </Stack>
+      ) : (
+        <Container className={cn("mx-auto w-full max-w-6xl px-4", "py-8")} data-slot="container">
+          {((layout as string) === "sidebar") ? (
+            <Grid cols="1" className="items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]">
+              <SidebarNav
+                label={nav.label}
+                brand={nav.brand}
+                links={nav.links}
+                current={nav.current}
+                userName={user.name}
+                userEmail={user.email}
+                density={density}
+                landmarkLabel={landmarkLabel}
+              />
+              <AppMain id={id} title={title} metrics={metrics} chart={chart} activity={activity} density={density} />
+            </Grid>
+          ) : (
+            <Grid cols="1-3" className="items-start gap-4">
+              <SidebarNav
+                label={nav.label}
+                brand={nav.brand}
+                links={nav.links}
+                current={nav.current}
+                userName={user.name}
+                userEmail={user.email}
+                width="compact"
+                density={density}
+                landmarkLabel={landmarkLabel}
+              />
+              {((activity.events?.length ?? 0) > 0) ? (
+                <Panel title={activity.title} description={activity.text} id={tpl("{0}-list", id)}>
+                  <List className="m-0 flex list-none flex-col gap-4 p-0" data-testid="items">
+                    {(activity.events ?? []).map((e) => (
+                      <ListItem key={e.id} className="flex flex-col gap-2" data-testid="item">
+                        <Text size="sm" weight="semibold">
+                          {e.title}
+                        </Text>
+                        <Text size="xs" className="text-muted-foreground">
+                          {e.time}
+                        </Text>
+                      </ListItem>
+                    ))}
+                  </List>
+                </Panel>
+              ) : null}
+              <AppMain id={id} title={title} metrics={metrics} chart={chart} density="compact" />
+            </Grid>
+          )}
+        </Container>
+      )}
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/app-shell.types.ts b/packages/react/ui/src/blocks/app-shell.types.ts
new file mode 100644
index 0000000..51a8838
--- /dev/null
+++ b/packages/react/ui/src/blocks/app-shell.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type AppNav = {
+  /** accessible name of the navigation */
+  label: string;
+  brand: string;
+  links: NavLink[];
+  /** id of the current link */
+  current?: string;
+};
+
+export type AppUser = {
+  name: string;
+  email: string;
+};
diff --git a/packages/react/ui/src/blocks/article-body.tsx b/packages/react/ui/src/blocks/article-body.tsx
new file mode 100644
index 0000000..1278f40
--- /dev/null
+++ b/packages/react/ui/src/blocks/article-body.tsx
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table
+ * of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting
+ * the section being read is a port contract.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Link } from "../primitives/link/link";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { NavBlock } from "../components/nav-block";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { Section } from "./article-body.types";
+
+export type ArticleBodyProps = {
+  id: string;
+  title: string;
+  sections: Section[];
+  empty?: string;
+  tocTitle: string;
+  layout?: "column" | "toc";
+  quotes?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ArticleBody({
+  id,
+  title,
+  sections,
+  empty = "",
+  tocTitle,
+  layout = "column",
+  quotes = "show",
+  tone = "default",
+  landmarkLabel,
+}: ArticleBodyProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      {((sections?.length ?? 0) === 0) ? (
+        <EmptyState icon="file-text" title={empty} />
+      ) : (
+        <Grid
+          cols="1"
+          className={cn(
+            "items-start gap-8",
+            (((layout as string) === "toc") ? "md:grid-cols-[14rem_minmax(0,1fr)]" : "")
+          )}
+        >
+          {((layout as string) === "toc") ? (
+            <NavBlock
+              label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", tocTitle, landmarkLabel)) : tocTitle)}
+              className="md:sticky md:top-4"
+              testid="toc"
+            >
+              <Stack gap="2">
+                <Text size="sm" weight="semibold">
+                  {tocTitle}
+                </Text>
+                <List className="m-0 flex list-none flex-col gap-2 p-0">
+                  {(sections ?? []).map((s) => (
+                    <ListItem key={s.id}>
+                      <Link
+                        href={tpl("#{0}-{1}", id, s.id)}
+                        variant="default"
+                        className="text-sm text-muted-foreground"
+                        data-testid="toc-link"
+                      >
+                        {s.title}
+                      </Link>
+                    </ListItem>
+                  ))}
+                </List>
+              </Stack>
+            </NavBlock>
+          ) : null}
+          <Stack gap="8" align="stretch" className="mx-auto w-full max-w-2xl min-w-0" data-testid="article">
+            {(sections ?? []).map((s) => (
+              <Box key={s.id} className="flex flex-col gap-4" id={tpl("{0}-{1}", id, s.id)} data-testid="item">
+                <Title as={3} size="2xl" weight="bold">
+                  {s.title}
+                </Title>
+                <Text size="base">
+                  {s.text}
+                </Text>
+                {((quotes as string) === "show") ? (
+                  <>
+                    {s.quote ? (
+                      <Text tag="blockquote" className="m-0 border-l border-border pl-4 text-lg" data-testid="quote">
+                        {s.quote}
+                      </Text>
+                    ) : null}
+                  </>
+                ) : null}
+              </Box>
+            ))}
+          </Stack>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/article-body.types.ts b/packages/react/ui/src/blocks/article-body.types.ts
new file mode 100644
index 0000000..63a2648
--- /dev/null
+++ b/packages/react/ui/src/blocks/article-body.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Section = {
+  id: string;
+  title: string;
+  text: string;
+  quote: string;
+};
diff --git a/packages/react/ui/src/blocks/auth-card.tsx b/packages/react/ui/src/blocks/auth-card.tsx
new file mode 100644
index 0000000..f6c2813
--- /dev/null
+++ b/packages/react/ui/src/blocks/auth-card.tsx
@@ -0,0 +1,121 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+/**
+ * A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button,
+ * optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout
+ * (card, plain), social (none, show).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Separator } from "../primitives/separator/separator";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { AuthForm } from "../components/auth-form";
+import { cn, tpl } from "../utils";
+import type { AuthLabels } from "./auth-card.types";
+
+export type AuthCardProps = {
+  id: string;
+  title: string;
+  text: string;
+  submit: string;
+  switchText: string;
+  switchLink: string;
+  switchHref?: string;
+  labels: AuthLabels;
+  mode?: "signin" | "signup" | "reset" | "magic";
+  layout?: "card" | "plain";
+  social?: "none" | "show" | "first";
+  level?: 1 | 2;
+  landmarkLabel?: string;
+};
+
+export function AuthCard({
+  id,
+  title,
+  text,
+  submit,
+  switchText,
+  switchLink,
+  switchHref,
+  labels,
+  mode = "signin",
+  layout = "card",
+  social = "none",
+  level = 2,
+  landmarkLabel,
+}: AuthCardProps) {
+  return (
+    <Block
+      tag="section"
+      className={cn(
+        "flex w-full flex-col gap-6",
+        (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+      )}
+      aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+      data-testid="auth-card"
+      data-mode={mode}
+      aria-label={landmarkLabel}
+    >
+      <Stack gap="2">
+        <Title as={level} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+          {title}
+        </Title>
+        <Text size="sm" className="text-muted-foreground">
+          {text}
+        </Text>
+      </Stack>
+      {(((social as string) === "first") && ((social as string) !== "none") && ((mode as string) !== "reset") && ((mode as string) !== "magic")) ? (
+        <Stack gap="4" data-testid="social">
+          <Group gap="4" align="center">
+            <Separator className="flex-1" />
+            <Text size="xs" className="text-muted-foreground">
+              {labels.divider}
+            </Text>
+            <Separator className="flex-1" />
+          </Group>
+          <Button variant="outline" size="default" type="button" className="w-full">
+            <LucideIcon name="key-round" size={16} />
+            {labels.passkey}
+          </Button>
+          <Button variant="outline" size="default" type="button" className="w-full">
+            <LucideIcon name="mail" size={16} />
+            {labels.magic}
+          </Button>
+        </Stack>
+      ) : null}
+      <AuthForm id={id} mode={mode} labels={labels} submit={submit} />
+      {(((social as string) !== "first") && ((social as string) !== "none") && ((mode as string) !== "reset") && ((mode as string) !== "magic")) ? (
+        <Stack gap="4" data-testid="social">
+          <Group gap="4" align="center">
+            <Separator className="flex-1" />
+            <Text size="xs" className="text-muted-foreground">
+              {labels.divider}
+            </Text>
+            <Separator className="flex-1" />
+          </Group>
+          <Button variant="outline" size="default" type="button" className="w-full">
+            <LucideIcon name="key-round" size={16} />
+            {labels.passkey}
+          </Button>
+          <Button variant="outline" size="default" type="button" className="w-full">
+            <LucideIcon name="mail" size={16} />
+            {labels.magic}
+          </Button>
+        </Stack>
+      ) : null}
+      <Text size="sm" className="text-center text-muted-foreground">
+        {switchText}
+        {" "}
+        <Link href={switchHref} variant="default" data-testid="switch">
+          {switchLink}
+        </Link>
+      </Text>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/auth-card.types.ts b/packages/react/ui/src/blocks/auth-card.types.ts
new file mode 100644
index 0000000..dcd767e
--- /dev/null
+++ b/packages/react/ui/src/blocks/auth-card.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+
+export type AuthLabels = {
+  name: string;
+  email: string;
+  password: string;
+  remember: string;
+  forgot: string;
+  terms: string;
+  divider: string;
+  passkey: string;
+  magic: string;
+};
diff --git a/packages/react/ui/src/blocks/auth-layout.tsx b/packages/react/ui/src/blocks/auth-layout.tsx
new file mode 100644
index 0000000..01c1c78
--- /dev/null
+++ b/packages/react/ui/src/blocks/auth-layout.tsx
@@ -0,0 +1,132 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+/**
+ * A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card,
+ * centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side
+ * of the picture), mode, social. The page's heading is the card's title.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { AuthCard } from "../blocks/auth-card";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+import type { AuthSwitch, AuthVisual } from "./auth-layout.types";
+import type { AuthLabels } from "./auth-card.types";
+
+export type AuthLayoutProps = {
+  id: string;
+  title: string;
+  text: string;
+  submit: string;
+  switchTo: AuthSwitch;
+  labels: AuthLabels;
+  visual: AuthVisual;
+  level?: 1 | 2;
+  layout?: "split" | "centered" | "minimal";
+  side?: "end" | "start";
+  mode?: "signin" | "signup" | "reset" | "magic";
+  social?: "none" | "show" | "first";
+  landmarkLabel?: string;
+};
+
+export function AuthLayout({
+  id,
+  title,
+  text,
+  submit,
+  switchTo,
+  labels,
+  visual,
+  level = 1,
+  layout = "split",
+  side = "end",
+  mode = "signin",
+  social = "none",
+  landmarkLabel,
+}: AuthLayoutProps) {
+  return (
+    <Block tag="div" className="w-full" data-testid="auth-layout" data-layout={layout}>
+      <Container className={cn("mx-auto w-full max-w-6xl px-4", "py-12")} data-slot="container">
+        {((layout as string) === "split") ? (
+          <Grid cols="1-2" className="items-stretch gap-8">
+            <Box className="mx-auto flex w-full max-w-sm items-center">
+              <AuthCard
+                id={id}
+                title={title}
+                text={text}
+                submit={submit}
+                switchText={switchTo.text}
+                switchLink={switchTo.link}
+                switchHref={switchTo.href}
+                labels={labels}
+                mode={mode}
+                layout="plain"
+                social={social}
+                level={level}
+                landmarkLabel={landmarkLabel}
+              />
+            </Box>
+            <Stack
+              gap="4"
+              align="stretch"
+              className={cn(
+                "justify-end rounded bg-muted p-8",
+                (((side as string) === "start") ? "md:order-first" : "md:order-last")
+              )}
+              data-testid="visual"
+            >
+              <MediaFrame alt={visual.title} ratio="4/3" />
+              <Title as={2} size="2xl" weight="bold">
+                {visual.title}
+              </Title>
+              <Text size="sm" className="text-muted-foreground">
+                {visual.text}
+              </Text>
+            </Stack>
+          </Grid>
+        ) : ((layout as string) === "centered") ? (
+          <Box className="mx-auto w-full max-w-md rounded bg-muted p-6">
+            <AuthCard
+              id={id}
+              title={title}
+              text={text}
+              submit={submit}
+              switchText={switchTo.text}
+              switchLink={switchTo.link}
+              switchHref={switchTo.href}
+              labels={labels}
+              mode={mode}
+              social={social}
+              level={level}
+              landmarkLabel={landmarkLabel}
+            />
+          </Box>
+        ) : (
+          <Box className="mx-auto w-full max-w-sm">
+            <AuthCard
+              id={id}
+              title={title}
+              text={text}
+              submit={submit}
+              switchText={switchTo.text}
+              switchLink={switchTo.link}
+              switchHref={switchTo.href}
+              labels={labels}
+              mode={mode}
+              layout="plain"
+              social={social}
+              level={level}
+              landmarkLabel={landmarkLabel}
+            />
+          </Box>
+        )}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/auth-layout.types.ts b/packages/react/ui/src/blocks/auth-layout.types.ts
new file mode 100644
index 0000000..59bd44b
--- /dev/null
+++ b/packages/react/ui/src/blocks/auth-layout.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+
+export type AuthSwitch = {
+  /** the sentence before the link */
+  text: string;
+  /** text of the link */
+  link: string;
+  href?: string;
+};
+
+export type AuthVisual = {
+  /** the line on the picture panel */
+  title: string;
+  text: string;
+};
diff --git a/packages/react/ui/src/blocks/before-after.tsx b/packages/react/ui/src/blocks/before-after.tsx
new file mode 100644
index 0000000..c178da3
--- /dev/null
+++ b/packages/react/ui/src/blocks/before-after.tsx
@@ -0,0 +1,136 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two
+ * cards, rows: one row per point), icons (show, hide), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Contrast, BeforeAfterLabels } from "./before-after.types";
+
+export type BeforeAfterProps = {
+  id: string;
+  title: string;
+  points: Contrast[];
+  empty?: string;
+  labels: BeforeAfterLabels;
+  layout?: "cards" | "rows";
+  icons?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function BeforeAfter({
+  id,
+  title,
+  points,
+  empty = "",
+  labels,
+  layout = "cards",
+  icons = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: BeforeAfterProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((points?.length ?? 0) === 0) ? (
+        <EmptyState icon="git-compare" title={empty} />
+      ) : ((layout as string) === "cards") ? (
+        <Grid cols="1-2" className="items-stretch gap-4" data-testid="sides">
+          <Card
+            variant="muted"
+            className={cn("h-full", (((density as string) === "compact") ? "gap-4 p-4" : ""))}
+            data-testid="side"
+            data-side="before"
+          >
+            <CardContent className="flex flex-col gap-4">
+              <Title as={3} size="xl" weight="bold">
+                {labels.before}
+              </Title>
+              <List className="m-0 flex list-none flex-col gap-4 p-0">
+                {(points ?? []).map((p) => (
+                  <ListItem key={p.id} className="flex items-start gap-4" data-testid="item">
+                    {((icons as string) === "show") ? (
+                      <LucideIcon name="x" size={16} className="h-lh shrink-0 text-sm" />
+                    ) : null}
+                    <Text size="sm">
+                      {p.before}
+                    </Text>
+                  </ListItem>
+                ))}
+              </List>
+            </CardContent>
+          </Card>
+          <Card
+            variant="default"
+            className={cn("h-full", (((density as string) === "compact") ? "gap-4 p-4" : ""))}
+            data-testid="side"
+            data-side="after"
+          >
+            <CardContent className="flex flex-col gap-4">
+              <Title as={3} size="xl" weight="bold">
+                {labels.after}
+              </Title>
+              <List className="m-0 flex list-none flex-col gap-4 p-0">
+                {(points ?? []).map((p) => (
+                  <ListItem key={p.id} className="flex items-start gap-4" data-testid="item">
+                    {((icons as string) === "show") ? (
+                      <LucideIcon name="check" size={16} className="h-lh shrink-0 text-sm" />
+                    ) : null}
+                    <Text size="sm">
+                      {p.after}
+                    </Text>
+                  </ListItem>
+                ))}
+              </List>
+            </CardContent>
+          </Card>
+        </Grid>
+      ) : (
+        <Stack gap="2" align="stretch" data-testid="rows">
+          {(points ?? []).map((p) => (
+            <Grid key={p.id}
+              cols="1-3"
+              className={cn("items-center gap-4", "rounded bg-card inset-ring inset-ring-border p-4")}
+              data-testid="item"
+            >
+              <Text size="base" weight="semibold">
+                {p.title}
+              </Text>
+              <Group gap="2" align="start">
+                {((icons as string) === "show") ? (
+                  <LucideIcon name="x" size={16} className="h-lh shrink-0 text-sm text-muted-foreground" />
+                ) : null}
+                <Text size="sm" className="text-muted-foreground">
+                  {p.before}
+                </Text>
+              </Group>
+              <Group gap="2" align="start">
+                {((icons as string) === "show") ? (
+                  <LucideIcon name="check" size={16} className="h-lh shrink-0 text-sm text-primary" />
+                ) : null}
+                <Text size="sm" weight="semibold">
+                  {p.after}
+                </Text>
+              </Group>
+            </Grid>
+          ))}
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/before-after.types.ts b/packages/react/ui/src/blocks/before-after.types.ts
new file mode 100644
index 0000000..5783791
--- /dev/null
+++ b/packages/react/ui/src/blocks/before-after.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+
+export type Contrast = {
+  id: string;
+  title: string;
+  before: string;
+  after: string;
+};
+
+export type BeforeAfterLabels = {
+  before: string;
+  after: string;
+};
diff --git a/packages/react/ui/src/blocks/bento-grid.tsx b/packages/react/ui/src/blocks/bento-grid.tsx
new file mode 100644
index 0000000..9cf209b
--- /dev/null
+++ b/packages/react/ui/src/blocks/bento-grid.tsx
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from
+ * the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in
+ * the large tiles), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { at, cn } from "../utils";
+import type { Tile } from "./bento-grid.types";
+
+const SPAN: Record<string, string> = {
+  "large": "md:col-span-2 md:row-span-2",
+  "wide": "md:col-span-2",
+  "small": "",
+};
+
+export type BentoGridProps = {
+  id: string;
+  title: string;
+  tiles: Tile[];
+  empty?: string;
+  layout?: "bento" | "even";
+  media?: "none" | "image";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function BentoGrid({
+  id,
+  title,
+  tiles,
+  empty = "",
+  layout = "bento",
+  media = "none",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: BentoGridProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((tiles?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-dashboard" title={empty} />
+      ) : (
+        <Grid cols="1-4" className="auto-rows-fr gap-4" data-testid="items">
+          {(tiles ?? []).map((tile) => (
+            <Card key={tile.id}
+              variant="default"
+              className={cn(
+                "h-full overflow-hidden",
+                (((density as string) === "compact") ? "gap-4 p-4" : ""),
+                (((layout as string) === "bento") ? at(SPAN, tile.size) : "")
+              )}
+              data-testid="item"
+              data-size={(((layout as string) === "bento") ? tile.size : "even")}
+            >
+              <CardContent className="flex h-full flex-col gap-4">
+                <LucideIcon name={tile.icon} size={24} />
+                <Title as={3} size="xl" weight="bold">
+                  {tile.title}
+                </Title>
+                <Text size="sm" className="text-muted-foreground">
+                  {tile.text}
+                </Text>
+                {(((media as string) === "image") && ((tile.size === "large") || ((layout as string) === "even"))) ? (
+                  <MediaFrame alt={tile.title} ratio="4/3" className="mt-auto" />
+                ) : null}
+              </CardContent>
+            </Card>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/bento-grid.types.ts b/packages/react/ui/src/blocks/bento-grid.types.ts
new file mode 100644
index 0000000..c1a438e
--- /dev/null
+++ b/packages/react/ui/src/blocks/bento-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+
+export type Tile = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  size: string;
+};
diff --git a/packages/react/ui/src/blocks/bottom-nav.tsx b/packages/react/ui/src/blocks/bottom-nav.tsx
new file mode 100644
index 0000000..9e8eef5
--- /dev/null
+++ b/packages/react/ui/src/blocks/bottom-nav.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show,
+ * hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { MenuEntry } from "../components/menu-entry";
+import { cn } from "../utils";
+import type { NavLink } from "./nav-bar.types";
+
+export type BottomNavProps = {
+  label: string;
+  tabs: NavLink[];
+  current?: string;
+  labels?: "show" | "hide";
+  position?: "static" | "sticky";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function BottomNav({
+  label,
+  tabs,
+  current = "",
+  labels = "show",
+  position = "static",
+  tone = "default",
+  landmarkLabel,
+}: BottomNavProps) {
+  return (
+    <>
+      {((tabs?.length ?? 0) > 0) ? (
+        <Block
+          tag="nav"
+          className={cn(
+            "mx-auto w-full max-w-md border-t border-border",
+            (((tone as string) === "muted") ? "bg-muted" : "bg-background"),
+            (((position as string) === "sticky") ? "sticky bottom-0 z-40" : "")
+          )}
+          aria-label={(landmarkLabel ?? label)}
+          data-testid="bottom-nav"
+          data-position={position}
+        >
+          <List className="m-0 grid list-none grid-flow-col auto-cols-fr p-0" data-testid="items">
+            {(tabs ?? []).map((tab) => (
+              <ListItem key={tab.id}>
+                <MenuEntry
+                  href={tab.href}
+                  className={cn(
+                    "flex flex-col items-center gap-2 py-2 text-xs",
+                    ((tab.id === current) ? "font-semibold text-primary" : "text-muted-foreground")
+                  )}
+                  current={(tab.id === current)}
+                  testid="item"
+                >
+                  <LucideIcon name={tab.icon} size={20} />
+                  <Inline className={(((labels as string) === "hide") ? "sr-only" : "")}>
+                    {tab.name}
+                  </Inline>
+                </MenuEntry>
+              </ListItem>
+            ))}
+          </List>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/cart-drawer.tsx b/packages/react/ui/src/blocks/cart-drawer.tsx
new file mode 100644
index 0000000..0441d6d
--- /dev/null
+++ b/packages/react/ui/src/blocks/cart-drawer.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+/**
+ * The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity
+ * field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way
+ * back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Title } from "../primitives/title/title";
+import { DrawerLines } from "../components/drawer-lines";
+import { EmptyState } from "../components/empty-state";
+import { tpl } from "../utils";
+import type { DrawerLabels } from "./cart-drawer.types";
+import type { CartLine, CartLabels } from "./cart-list.types";
+import type { SummaryRow } from "./order-summary.types";
+
+export type CartDrawerProps = {
+  id: string;
+  lines: CartLine[];
+  rows: SummaryRow[];
+  labels: CartLabels;
+  drawer: DrawerLabels;
+  state?: "filled" | "empty";
+  media?: "image" | "none";
+  landmarkLabel?: string;
+};
+
+export function CartDrawer({
+  id,
+  lines,
+  rows,
+  labels,
+  drawer,
+  state = "filled",
+  media = "image",
+  landmarkLabel,
+}: CartDrawerProps) {
+  return (
+    <Block tag="section" className="py-8" aria-label={(landmarkLabel ?? drawer.title)} data-testid="section">
+      <Container className="mx-auto w-full max-w-6xl px-4" data-slot="container">
+        <Box className="flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border">
+          <Box className="hidden flex-1 flex-col gap-4 p-8 sm:flex" aria-hidden="true">
+            <Box className="h-8 w-48 rounded bg-background" />
+            <Box className="h-40 rounded bg-background" />
+            <Box className="h-40 rounded bg-background" />
+          </Box>
+          <Box
+            className="flex w-full flex-col bg-background shadow-lg sm:max-w-sm"
+            role="group"
+            aria-label={drawer.title}
+            data-testid="drawer"
+          >
+            <Group gap="4" align="center" justify="between" className="border-b border-border p-4">
+              <Title as={2} size="lg" weight="semibold">
+                {drawer.title}
+              </Title>
+              <Button variant="ghost" size="sm" layout="icon" aria-label={drawer.close}>
+                <LucideIcon name="x" size={16} />
+              </Button>
+            </Group>
+            {(((state as string) === "empty") || ((lines?.length ?? 0) === 0)) ? (
+              <Box className="flex flex-1 flex-col justify-center p-4" data-testid="empty">
+                <EmptyState
+                  icon="shopping-bag"
+                  title={drawer.empty}
+                  text={drawer.emptyText}
+                  action={(
+                    <Button variant="outline" size="default">
+                      {drawer.browse}
+                    </Button>
+                  )}
+                />
+              </Box>
+            ) : (
+              <DrawerLines field={tpl("{0}-qty", id)} lines={lines} rows={rows} labels={labels} drawer={drawer} media={media} />
+            )}
+          </Box>
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/cart-drawer.types.ts b/packages/react/ui/src/blocks/cart-drawer.types.ts
new file mode 100644
index 0000000..8d66b9d
--- /dev/null
+++ b/packages/react/ui/src/blocks/cart-drawer.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type DrawerLabels = {
+  title: string;
+  close: string;
+  progress: string;
+  empty: string;
+  emptyText: string;
+  browse: string;
+};
diff --git a/packages/react/ui/src/blocks/cart-list.tsx b/packages/react/ui/src/blocks/cart-list.tsx
new file mode 100644
index 0000000..d8fb621
--- /dev/null
+++ b/packages/react/ui/src/blocks/cart-list.tsx
@@ -0,0 +1,109 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button.
+ * Axes: layout (table, cards), media (image, none), density, tone.
+ */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { CartTable } from "../components/cart-table";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { NumberField } from "../components/number-field";
+import { SectionFrame } from "../components/section-frame";
+import { fmtMoney, tpl } from "../utils";
+import type { CartLine, CartLabels } from "./cart-list.types";
+
+export type CartListProps = {
+  id: string;
+  title: string;
+  lines: CartLine[];
+  empty?: string;
+  labels: CartLabels;
+  layout?: "table" | "cards";
+  media?: "image" | "none";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+  onRemove?: (id: string) => void;
+};
+
+export function CartList({
+  id,
+  title,
+  lines,
+  empty = "",
+  labels,
+  layout = "table",
+  media = "image",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onRemove,
+}: CartListProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((lines?.length ?? 0) === 0) ? (
+        <EmptyState icon="shopping-cart" title={empty} />
+      ) : ((layout as string) === "table") ? (
+        <CartTable
+          field={tpl("{0}-qty", id)}
+          lines={lines}
+          labels={labels}
+          media={media}
+          density={density}
+          onRemove={(arg: string) => onRemove?.(arg)}
+        />
+      ) : (
+        <Stack gap="4" align="stretch" data-testid="cart-cards">
+          {(lines ?? []).map((line) => (
+            <Card key={line.id} variant="default" data-testid="item">
+              <CardContent className="flex flex-wrap items-center gap-4">
+                {((media as string) === "image") ? (
+                  <MediaFrame alt={line.name} ratio="1/1" className="size-16 shrink-0" />
+                ) : null}
+                <Stack gap="0" className="min-w-40 flex-1">
+                  <Text size="sm" weight="semibold">
+                    {line.name}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {line.variant}
+                  </Text>
+                  <Text size="sm">
+                    {fmtMoney(line.price, line.currency)}
+                  </Text>
+                </Stack>
+                <NumberField
+                  value={(line.qty == null ? undefined : String(line.qty))}
+                  name={tpl("{0}-qty-{1}", id, line.id)}
+                  min="1"
+                  label={labels.qty}
+                  decrease={labels.decrease}
+                  increase={labels.increase}
+                />
+                <Text size="base" weight="bold">
+                  {fmtMoney((line.price * line.qty), line.currency)}
+                </Text>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  layout="icon"
+                  aria-label={labels.remove}
+                  data-testid="remove"
+                  onClick={() => onRemove?.(line.id)}
+                >
+                  <LucideIcon name="x" size={16} />
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/cart-list.types.ts b/packages/react/ui/src/blocks/cart-list.types.ts
new file mode 100644
index 0000000..f5d7b14
--- /dev/null
+++ b/packages/react/ui/src/blocks/cart-list.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type CartLine = {
+  id: string;
+  name: string;
+  variant: string;
+  price: number;
+  currency: string;
+  qty: number;
+};
+
+export type CartLabels = {
+  caption: string;
+  product: string;
+  price: string;
+  qty: string;
+  total: string;
+  remove: string;
+  subtotal: string;
+  checkout: string;
+  decrease: string;
+  increase: string;
+};
diff --git a/packages/react/ui/src/blocks/category-nav.tsx b/packages/react/ui/src/blocks/category-nav.tsx
new file mode 100644
index 0000000..a53a11a
--- /dev/null
+++ b/packages/react/ui/src/blocks/category-nav.tsx
@@ -0,0 +1,123 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon,
+ * or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes:
+ * layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Select } from "../primitives/select/select";
+import { SelectOption } from "../primitives/select/select-option";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { SearchField } from "../components/search-field";
+import { cn } from "../utils";
+import type { Category, CategoryTools } from "./category-nav.types";
+
+export type CategoryNavProps = {
+  label: string;
+  categories: Category[];
+  current?: string;
+  layout?: "chips" | "bar" | "sidebar" | "tiles" | "toolbar";
+  count?: "show" | "hide";
+  icon?: "show" | "hide";
+  density?: "default" | "compact";
+  tools?: CategoryTools;
+  landmarkLabel?: string;
+};
+
+export function CategoryNav({
+  label,
+  categories,
+  current = "all",
+  layout = "chips",
+  count = "show",
+  icon = "show",
+  density = "default",
+  tools,
+  landmarkLabel,
+}: CategoryNavProps) {
+  const chipLike = ((layout as string) === "chips") || ((layout as string) === "toolbar");
+  const tiles = (layout as string) === "tiles";
+  const linkShape =
+    chipLike ? "inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border"
+    : (layout as string) === "bar" ? "inline-flex items-center gap-2 -mb-px border-b px-1 py-2"
+    : tiles ? "flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border"
+    : "inline-flex w-full items-center gap-2 rounded px-3 py-2";
+  const currentLook =
+    chipLike ? "bg-primary text-primary-foreground"
+    : (layout as string) === "bar" ? "border-foreground font-semibold"
+    : tiles ? "inset-ring-foreground font-semibold"
+    : "bg-muted font-semibold";
+  const otherLook = ((layout as string) === "bar") ? "border-transparent" : "";
+  const listShape =
+    (layout as string) === "sidebar" ? "flex flex-col gap-2"
+    : (layout as string) === "bar" ? "flex flex-wrap gap-2 gap-x-4 border-b border-border"
+    : tiles ? "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6"
+    : "flex flex-wrap gap-2";
+  return (
+    <Block tag="nav" aria-label={(landmarkLabel ?? label)} data-testid="category-nav" data-layout={layout}>
+      <Container
+        className={cn(
+          "mx-auto w-full max-w-6xl px-4",
+          (((density as string) === "compact") ? "py-2" : "py-4")
+        )}
+        data-slot="container"
+      >
+        {((layout as string) === "toolbar") ? (
+          <Group gap="4" align="center" className="mb-4 flex-wrap" data-testid="toolbar">
+            <SearchField value={(tools?.query ?? "")} label={(tools?.search ?? "")} placeholder={tools?.search} />
+            <Select name="sort" size="sm" aria-label={tools?.sort} className="w-48">
+              <SelectOption value="sort" label={tools?.sortValue} selected={true} />
+            </Select>
+            <Text size="sm" className="text-muted-foreground">
+              {tools?.shown}
+            </Text>
+          </Group>
+        ) : null}
+        {((categories?.length ?? 0) > 0) ? (
+          <List tag="ul" className={listShape} data-testid="items">
+            {(categories ?? []).map((c) => (
+              <ListItem key={c.id}>
+                <MenuEntry
+                  href={c.href}
+                  className={cn("text-sm", linkShape, ((c.id === current) ? currentLook : otherLook))}
+                  current={(c.id === current)}
+                  testid="item"
+                  block={true}
+                >
+                  {((icon as string) === "show") ? (
+                    <>
+                      {tiles ? (
+                        <Inline className="flex size-10 items-center justify-center rounded bg-muted">
+                          <LucideIcon name={c.icon} size={20} />
+                        </Inline>
+                      ) : (
+                        <LucideIcon name={c.icon} size={16} />
+                      )}
+                    </>
+                  ) : null}
+                  <Inline>
+                    {c.name}
+                  </Inline>
+                  {((count as string) === "show") ? (
+                    <Text size="xs" className="text-muted-foreground">
+                      {(c.count == null ? undefined : String(c.count))}
+                    </Text>
+                  ) : null}
+                </MenuEntry>
+              </ListItem>
+            ))}
+          </List>
+        ) : null}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/category-nav.types.ts b/packages/react/ui/src/blocks/category-nav.types.ts
new file mode 100644
index 0000000..4a88a78
--- /dev/null
+++ b/packages/react/ui/src/blocks/category-nav.types.ts
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Category = {
+  id: string;
+  name: string;
+  icon: string;
+  count: number;
+  href?: string;
+};
+
+export type CategoryTools = {
+  /** label of the search field */
+  search?: string;
+  /** label of the sort select */
+  sort?: string;
+  /** the chosen sort */
+  sortValue?: string;
+  /** how many products are shown */
+  shown?: string;
+  /** the text in the search field */
+  query?: string;
+};
diff --git a/packages/react/ui/src/blocks/chart-panel.tsx b/packages/react/ui/src/blocks/chart-panel.tsx
new file mode 100644
index 0000000..ec883ce
--- /dev/null
+++ b/packages/react/ui/src/blocks/chart-panel.tsx
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart
+ * (bars, meters), size (default, compact), tone (default, muted).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { BarChart } from "../components/bar-chart";
+import { EmptyState } from "../components/empty-state";
+import { MeterRow } from "../components/meter-row";
+import { Panel } from "../components/panel";
+import { tpl } from "../utils";
+import type { Point } from "./chart-panel.types";
+
+export type ChartPanelProps = {
+  id: string;
+  title: string;
+  text: string;
+  series: Point[];
+  empty?: string;
+  summary: string;
+  percent: string;
+  chart?: "bars" | "meters";
+  size?: "default" | "compact";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ChartPanel({
+  id,
+  title,
+  text,
+  series,
+  empty = "",
+  summary,
+  percent,
+  chart = "bars",
+  size = "default",
+  tone = "default",
+  landmarkLabel,
+}: ChartPanelProps) {
+  return (
+    <Block
+      tag="section"
+      aria-labelledby={(landmarkLabel ? undefined : ((title && id) ? tpl("{0}-t", id) : undefined))}
+      data-testid="panel-section"
+      aria-label={landmarkLabel}
+    >
+      <Container className="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+        <Panel title={title} description={text} id={id} className={(((tone as string) === "muted") ? "bg-muted" : "")}>
+          {((series?.length ?? 0) === 0) ? (
+            <EmptyState icon="chart-column" title={empty} />
+          ) : ((chart as string) === "bars") ? (
+            <BarChart bars={series} label={summary} height={(((size as string) === "compact") ? 96 : 176)} />
+          ) : (
+            <Stack gap={(((size as string) === "compact") ? "0" : "2")} align="stretch" data-testid="items">
+              {(series ?? []).map((s) => (
+                <MeterRow key={s.id} label={s.label} value={s.value} caption={tpl(percent, s.value)} />
+              ))}
+            </Stack>
+          )}
+        </Panel>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/chart-panel.types.ts b/packages/react/ui/src/blocks/chart-panel.types.ts
new file mode 100644
index 0000000..9f64516
--- /dev/null
+++ b/packages/react/ui/src/blocks/chart-panel.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Point = {
+  id: string;
+  label: string;
+  value: number;
+};
diff --git a/packages/react/ui/src/blocks/checklist.tsx b/packages/react/ui/src/blocks/checklist.tsx
new file mode 100644
index 0000000..938ff77
--- /dev/null
+++ b/packages/react/ui/src/blocks/checklist.tsx
@@ -0,0 +1,122 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain),
+ * progress (bar, text, none), marker (check, number), tone (default, muted).
+ */
+import { type ReactNode } from "react";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Progress } from "../primitives/form/progress";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Task } from "./checklist.types";
+
+export type ChecklistProps = {
+  id: string;
+  title: string;
+  tasks: Task[];
+  empty?: string;
+  progressLabel: string;
+  layout?: "card" | "plain";
+  progress?: "bar" | "text" | "none";
+  marker?: "check" | "number";
+  detail?: "always" | "expand";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function Checklist({
+  id,
+  title,
+  tasks,
+  empty = "",
+  progressLabel,
+  layout = "card",
+  progress = "bar",
+  marker = "check",
+  detail = "always",
+  tone = "default",
+  landmarkLabel,
+}: ChecklistProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} measure="2xl" landmarkLabel={landmarkLabel}>
+      {((tasks?.length ?? 0) === 0) ? (
+        <EmptyState icon="list-checks" title={empty} />
+      ) : (
+        <Stack
+          gap="4"
+          align="stretch"
+          className={
+            (layout as string) === "card" ? "rounded bg-card p-6 inset-ring inset-ring-border"
+            : ""
+          }
+          data-testid="checklist"
+        >
+          {((progress as string) === "bar") ? (
+            <Progress
+              value={
+                Math.round(((tasks.filter((i) => i["done"]).length * 100) / (tasks?.length ?? 0))) == null ? undefined
+                : String(Math.round(((tasks.filter((i) => i["done"]).length * 100) / (tasks?.length ?? 0))))
+              }
+              max="100"
+              aria-label={tpl(progressLabel, tasks.filter((i) => i["done"]).length, (tasks?.length ?? 0))}
+            />
+          ) : null}
+          {((progress as string) === "text") ? (
+            <Text size="sm" className="text-muted-foreground" data-testid="progress-text">
+              {tpl(progressLabel, tasks.filter((i) => i["done"]).length, (tasks?.length ?? 0))}
+            </Text>
+          ) : null}
+          <List className="m-0 flex list-none flex-col gap-4 p-0" data-testid="items">
+            {(tasks ?? []).map((task, i) => (
+              <ListItem key={task.id}
+                className="flex items-start gap-4"
+                data-testid="item"
+                data-done={(task.done == null ? undefined : String(task.done))}
+              >
+                {((marker as string) === "number") ? (
+                  <IconBadge variant={(task.done ? "primary" : "outline")} size="xs">
+                    {((i + 1) == null ? undefined : String((i + 1)))}
+                  </IconBadge>
+                ) : (
+                  <LucideIcon
+                    name={(task.done ? "circle-check" : "circle")}
+                    size={24}
+                    className={(task.done ? "shrink-0 text-primary" : "shrink-0 text-muted-foreground")}
+                  />
+                )}
+                {((detail as string) === "expand") ? (
+                  <Disclosure variant="ghost" className="flex-1" data-testid="task-detail">
+                    <Summary variant="ghost">
+                      {task.title}
+                    </Summary>
+                    <Text size="sm" className="pb-2 text-muted-foreground">
+                      {task.text}
+                    </Text>
+                  </Disclosure>
+                ) : (
+                  <Stack gap="0">
+                    <Text size="base" weight="semibold">
+                      {task.title}
+                    </Text>
+                    <Text size="sm" className="text-muted-foreground">
+                      {task.text}
+                    </Text>
+                  </Stack>
+                )}
+              </ListItem>
+            ))}
+          </List>
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/checklist.types.ts b/packages/react/ui/src/blocks/checklist.types.ts
new file mode 100644
index 0000000..54d9f32
--- /dev/null
+++ b/packages/react/ui/src/blocks/checklist.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Task = {
+  id: string;
+  title: string;
+  text: string;
+  done: boolean;
+};
diff --git a/packages/react/ui/src/blocks/checkout-form.tsx b/packages/react/ui/src/blocks/checkout-form.tsx
new file mode 100644
index 0000000..76e5ab8
--- /dev/null
+++ b/packages/react/ui/src/blocks/checkout-form.tsx
@@ -0,0 +1,133 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+/**
+ * A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps,
+ * beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards:
+ * each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Form } from "../primitives/form/form";
+import { Grid } from "../primitives/grid/grid";
+import { Input } from "../primitives/input/input";
+import { Textarea } from "../primitives/textarea/textarea";
+import { CartSummaryCard } from "../components/cart-summary-card";
+import { CheckoutStep } from "../components/checkout-step";
+import { CheckoutSubmit } from "../components/checkout-submit";
+import { Field } from "../components/field";
+import { PaymentOptions } from "../components/payment-options";
+import { SectionFrame } from "../components/section-frame";
+import { SlotGrid } from "../components/slot-grid";
+import { tpl } from "../utils";
+import type { CheckoutLabels } from "./checkout-form.types";
+import type { Day } from "../components/slot-grid.types";
+import type { Payment } from "../components/payment-options.types";
+import type { CartLine } from "./cart-list.types";
+import type { SummaryRow } from "./order-summary.types";
+import type { Promo, CartSummaryLabels } from "../components/cart-summary-card.types";
+
+export type CheckoutFormProps = {
+  id: string;
+  title?: string;
+  days: Day[];
+  payments: Payment[];
+  lines: CartLine[];
+  rows: SummaryRow[];
+  promos: Promo[];
+  labels: CheckoutLabels;
+  totals: CartSummaryLabels;
+  layout?: "cards" | "numbered";
+  summary?: "aside" | "none";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function CheckoutForm({
+  id,
+  title = "",
+  days,
+  payments,
+  lines,
+  rows,
+  promos,
+  labels,
+  totals,
+  layout = "cards",
+  summary = "aside",
+  tone = "default",
+  landmarkLabel,
+}: CheckoutFormProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Box className="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+        <Form
+          method="dialog"
+          className={
+            (summary as string) === "aside" ? "flex flex-col gap-6 lg:col-span-2"
+            : "flex flex-col gap-6 lg:col-span-3"
+          }
+          data-testid="checkout-form"
+        >
+          <CheckoutStep number="1" title={labels.contacts} text={labels.contactsText} layout={layout}>
+            <Grid cols="1-2" className="gap-4">
+              <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+                <Input type="text" name="name" autoComplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.phone} htmlFor={tpl("{0}-phone", id)}>
+                <Input type="tel" name="phone" autoComplete="tel" id={tpl("{0}-phone", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+                <Input type="email" name="email" autoComplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+              </Field>
+            </Grid>
+          </CheckoutStep>
+          <CheckoutStep number="2" title={labels.address} text={labels.addressText} layout={layout}>
+            <Field label={labels.street} htmlFor={tpl("{0}-street", id)}>
+              <Input type="text" name="street" autoComplete="address-line1" id={tpl("{0}-street", id)} data-testid="field" />
+            </Field>
+            <Grid cols="2-4" className="gap-4">
+              <Field label={labels.house} htmlFor={tpl("{0}-house", id)}>
+                <Input type="text" name="house" id={tpl("{0}-house", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.flat} htmlFor={tpl("{0}-flat", id)}>
+                <Input type="text" name="flat" id={tpl("{0}-flat", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.entrance} htmlFor={tpl("{0}-entrance", id)}>
+                <Input type="text" name="entrance" id={tpl("{0}-entrance", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.floor} htmlFor={tpl("{0}-floor", id)}>
+                <Input type="text" name="floor" id={tpl("{0}-floor", id)} data-testid="field" />
+              </Field>
+            </Grid>
+            <Field label={labels.comment} htmlFor={tpl("{0}-comment", id)}>
+              <Textarea rows={4} name="comment" id={tpl("{0}-comment", id)} data-testid="field" />
+            </Field>
+          </CheckoutStep>
+          <CheckoutStep number="3" title={labels.slot} text={labels.slotText} layout={layout}>
+            {((days?.length ?? 0) > 0) ? (
+              <SlotGrid days={days} name={tpl("{0}-slot", id)} item="plain" />
+            ) : null}
+          </CheckoutStep>
+          <CheckoutStep number="4" title={labels.payment} text={labels.paymentText} layout={layout}>
+            {((payments?.length ?? 0) > 0) ? (
+              <PaymentOptions payments={payments} name={tpl("{0}-payment", id)} checked="payment-card" />
+            ) : null}
+          </CheckoutStep>
+          <CheckoutSubmit id={id} consent={labels.consent} submit={labels.submit} legal={labels.legal} />
+        </Form>
+        {((summary as string) === "aside") ? (
+          <Box className="lg:sticky lg:top-8" data-testid="aside">
+            <CartSummaryCard
+              field={tpl("{0}-promo", id)}
+              lines={lines}
+              rows={rows}
+              promos={promos}
+              labels={totals}
+              items="show"
+            />
+          </Box>
+        ) : null}
+      </Box>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/checkout-form.types.ts b/packages/react/ui/src/blocks/checkout-form.types.ts
new file mode 100644
index 0000000..204a76d
--- /dev/null
+++ b/packages/react/ui/src/blocks/checkout-form.types.ts
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type CheckoutLabels = {
+  contacts: string;
+  contactsText: string;
+  name: string;
+  phone: string;
+  email: string;
+  address: string;
+  addressText: string;
+  street: string;
+  house: string;
+  flat: string;
+  entrance: string;
+  floor: string;
+  comment: string;
+  slot: string;
+  slotText: string;
+  payment: string;
+  paymentText: string;
+  consent: string;
+  submit: string;
+  legal: string;
+};
diff --git a/packages/react/ui/src/blocks/comparison-table.tsx b/packages/react/ui/src/blocks/comparison-table.tsx
new file mode 100644
index 0000000..f726edc
--- /dev/null
+++ b/packages/react/ui/src/blocks/comparison-table.tsx
@@ -0,0 +1,107 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+/**
+ * Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a
+ * check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle
+ * column), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { CompareMark } from "../components/compare-mark";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { CompareRow, CompareLabels } from "./comparison-table.types";
+
+export type ComparisonTableProps = {
+  id: string;
+  title: string;
+  rows: CompareRow[];
+  empty?: string;
+  labels: CompareLabels;
+  highlight?: "none" | "middle";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function ComparisonTable({
+  id,
+  title,
+  rows,
+  empty = "",
+  labels,
+  highlight = "none",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ComparisonTableProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((rows?.length ?? 0) === 0) ? (
+        <EmptyState icon="table" title={empty} />
+      ) : (
+        <Box className="relative w-full overflow-x-auto">
+          <Table className="w-full text-left text-sm" data-testid="compare">
+            <TableCaption className="sr-only">
+              {labels.caption}
+            </TableCaption>
+            <TableHead>
+              <TableRow>
+                <TableHeadCell scope="col" className="py-4">
+                  {labels.feature}
+                </TableHeadCell>
+                <TableHeadCell scope="col" className="py-4">
+                  {labels.a}
+                </TableHeadCell>
+                <TableHeadCell
+                  scope="col"
+                  className={cn("py-4", (((highlight as string) === "middle") ? "bg-muted" : ""))}
+                  data-highlight={(((highlight as string) === "middle") ? "true" : "false")}
+                >
+                  {labels.b}
+                </TableHeadCell>
+                <TableHeadCell scope="col" className="py-4">
+                  {labels.c}
+                </TableHeadCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {(rows ?? []).map((row) => (
+                <TableRow key={row.id} className="border-t border-border" data-testid="item">
+                  <TableHeadCell
+                    scope="row"
+                    className={cn("font-medium", (((density as string) === "compact") ? "py-2" : "py-4"))}
+                  >
+                    {row.label}
+                  </TableHeadCell>
+                  <TableCell className={cn((((density as string) === "compact") ? "py-2" : "py-4"))}>
+                    <CompareMark value={row.a} yes={labels.yes} no={labels.no} />
+                  </TableCell>
+                  <TableCell
+                    className={cn(
+                      (((density as string) === "compact") ? "py-2" : "py-4"),
+                      (((highlight as string) === "middle") ? "bg-muted font-semibold" : "")
+                    )}
+                  >
+                    <CompareMark value={row.b} yes={labels.yes} no={labels.no} />
+                  </TableCell>
+                  <TableCell className={(((density as string) === "compact") ? "py-2" : "py-4")}>
+                    <CompareMark value={row.c} yes={labels.yes} no={labels.no} />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/comparison-table.types.ts b/packages/react/ui/src/blocks/comparison-table.types.ts
new file mode 100644
index 0000000..bb0984c
--- /dev/null
+++ b/packages/react/ui/src/blocks/comparison-table.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type CompareRow = {
+  id: string;
+  label: string;
+  a: string;
+  b: string;
+  c: string;
+};
+
+export type CompareLabels = {
+  caption: string;
+  feature: string;
+  a: string;
+  b: string;
+  c: string;
+  yes: string;
+  no: string;
+};
diff --git a/packages/react/ui/src/blocks/contact-form.tsx b/packages/react/ui/src/blocks/contact-form.tsx
new file mode 100644
index 0000000..b1ed786
--- /dev/null
+++ b/packages/react/ui/src/blocks/contact-form.tsx
@@ -0,0 +1,117 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach
+ * us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone
+ * (default, muted).
+ */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Checkbox } from "../primitives/checkbox/checkbox";
+import { Form } from "../primitives/form/form";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Textarea } from "../primitives/textarea/textarea";
+import { Field } from "../components/field";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { ContactLabels } from "./contact-form.types";
+import type { Feature } from "./feature-grid.types";
+
+export type ContactFormProps = {
+  id: string;
+  title: string;
+  text: string;
+  labels: ContactLabels;
+  details: Feature[];
+  layout?: "single" | "split";
+  fields?: "short" | "full";
+  terms?: "show" | "hide";
+  level?: 1 | 2;
+  page?: "section" | "full";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ContactForm({
+  id,
+  title,
+  text,
+  labels,
+  details,
+  layout = "single",
+  fields = "full",
+  terms = "hide",
+  level = 2,
+  page = "section",
+  tone = "default",
+  landmarkLabel,
+}: ContactFormProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      heading={{ level }}
+      tone={tone}
+      density={(((page as string) === "full") ? "roomy" : "default")}
+      align={(((page as string) === "full") ? "center" : "start")}
+      measure={(((layout as string) === "single") ? "xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      <Grid cols={(((layout as string) === "split") ? "1-2" : "1")} className="items-start gap-8">
+        <Form method="dialog" className="w-full gap-4" data-testid="contact-form">
+          {((fields as string) === "full") ? (
+            <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+              <Input type="text" name="name" autoComplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+            </Field>
+          ) : null}
+          <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+            <Input type="email" name="email" autoComplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+          </Field>
+          {((fields as string) === "full") ? (
+            <Field label={labels.subject} htmlFor={tpl("{0}-subject", id)}>
+              <Input type="text" name="subject" id={tpl("{0}-subject", id)} data-testid="field" />
+            </Field>
+          ) : null}
+          <Field label={labels.message} htmlFor={tpl("{0}-message", id)}>
+            <Textarea rows={4} name="message" id={tpl("{0}-message", id)} data-testid="field" />
+          </Field>
+          {((terms as string) === "show") ? (
+            <Group gap="2" align="center" className={cn("w-fit", "")}>
+              <Checkbox name="consent" id={tpl("{0}-consent", id)} />
+              <Label htmlFor={tpl("{0}-consent", id)} className="text-sm">
+                {labels.consent}
+              </Label>
+            </Group>
+          ) : null}
+          <Button variant="default" size="default" type="submit" className="w-fit" data-testid="submit">
+            {labels.submit}
+          </Button>
+        </Form>
+        {(((layout as string) === "split") && ((details?.length ?? 0) > 0)) ? (
+          <Stack gap="4" data-testid="details">
+            {(details ?? []).map((d) => (
+              <Group key={d.id} gap="4" align="start" data-testid="detail">
+                <LucideIcon name={d.icon} size={20} />
+                <Stack gap="0">
+                  <Text size="base" weight="semibold">
+                    {d.title}
+                  </Text>
+                  <Text size="sm" className="text-muted-foreground">
+                    {d.text}
+                  </Text>
+                </Stack>
+              </Group>
+            ))}
+          </Stack>
+        ) : null}
+      </Grid>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/contact-form.types.ts b/packages/react/ui/src/blocks/contact-form.types.ts
new file mode 100644
index 0000000..d8ed802
--- /dev/null
+++ b/packages/react/ui/src/blocks/contact-form.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+
+export type ContactLabels = {
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+  consent: string;
+  submit: string;
+};
diff --git a/packages/react/ui/src/blocks/cookie-banner.tsx b/packages/react/ui/src/blocks/cookie-banner.tsx
new file mode 100644
index 0000000..9129f05
--- /dev/null
+++ b/packages/react/ui/src/blocks/cookie-banner.tsx
@@ -0,0 +1,91 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings.
+ * Axes: layout (bar, card), actions (two, three), tone (default, muted).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { cn, tpl } from "../utils";
+
+export type CookieBannerProps = {
+  id: string;
+  title: string;
+  text: string;
+  accept: string;
+  decline: string;
+  settings?: string;
+  layout?: "bar" | "card";
+  actions?: "two" | "three";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function CookieBanner({
+  id,
+  title,
+  text,
+  accept,
+  decline,
+  settings,
+  layout = "bar",
+  actions = "two",
+  tone = "default",
+  landmarkLabel,
+}: CookieBannerProps) {
+  return (
+    <Block
+      tag="section"
+      aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+      data-testid="cookie"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      <Container className={cn("mx-auto w-full max-w-6xl px-4", "py-4")} data-slot="container">
+        <Box
+          className={cn(
+            "flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border",
+            (((tone as string) === "muted") ? "bg-muted" : "bg-card"),
+            (
+              (layout as string) === "bar" ? "md:flex-row md:items-center md:justify-between"
+              : "mx-auto w-full max-w-md"
+            )
+          )}
+        >
+          <Group gap="4" align="start" className="min-w-0">
+            <LucideIcon name="cookie" size={24} />
+            <Stack gap="2">
+              <Title as={2} size="base" weight="bold" id={tpl("{0}-title", id)}>
+                {title}
+              </Title>
+              <Text size="sm" className="text-muted-foreground">
+                {text}
+              </Text>
+            </Stack>
+          </Group>
+          <Group gap="2" className="shrink-0 flex-wrap">
+            {(((actions as string) === "three") && settings) ? (
+              <Button variant="ghost" size="sm" type="button" data-testid="cookie-settings">
+                {settings}
+              </Button>
+            ) : null}
+            <Button variant="outline" size="sm" type="button" data-testid="cookie-decline">
+              {decline}
+            </Button>
+            <Button variant="default" size="sm" type="button" data-testid="cookie-accept">
+              {accept}
+            </Button>
+          </Group>
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/credit-packs.tsx b/packages/react/ui/src/blocks/credit-packs.tsx
new file mode 100644
index 0000000..c378274
--- /dev/null
+++ b/packages/react/ui/src/blocks/credit-packs.tsx
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+/**
+ * Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile,
+ * row), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { at, cn, fitCols, fmtMoney } from "../utils";
+import type { Pack } from "./credit-packs.types";
+
+export type CreditPacksProps = {
+  id: string;
+  title: string;
+  packs: Pack[];
+  empty?: string;
+  badges: Record<string, string>;
+  buy: string;
+  cols?: "2" | "4";
+  item?: "tile" | "row";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function CreditPacks({
+  id,
+  title,
+  packs,
+  empty = "",
+  badges,
+  buy,
+  cols = "4",
+  item = "tile",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: CreditPacksProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      measure={(((item as string) === "row") ? "2xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((packs?.length ?? 0) === 0) ? (
+        <EmptyState icon="coins" title={empty} />
+      ) : (
+        <Grid
+          cols={
+            (item as string) === "row" ? "1"
+            : fitCols((((cols as string) === "2") ? "1-2" : "1-4"), (packs?.length ?? 0))
+          }
+          className="gap-4"
+          data-testid="items"
+        >
+          {(packs ?? []).map((pack) => (
+            <Card key={pack.id}
+              variant="default"
+              className={cn(
+                "h-full",
+                (
+                  (item as string) === "row" ? "gap-4 p-4"
+                  : (density as string) === "compact" ? "gap-4 p-4"
+                  : ""
+                )
+              )}
+              data-testid="item"
+              data-badge={pack.badge}
+            >
+              <CardContent
+                className={cn(
+                  "flex h-full gap-4",
+                  (((item as string) === "row") ? "flex-row flex-wrap items-center justify-between" : "flex-col")
+                )}
+              >
+                <Stack gap="2" align="start" className={cn("min-w-0", (((item as string) === "row") ? "flex-1" : ""))}>
+                  {(pack.badge || (((item as string) !== "row") && (packs.filter((i) => i["badge"]).length > 0))) ? (
+                    <Box className="flex min-h-6 items-center" data-slot="badge-slot">
+                      {pack.badge ? (
+                        <Badge variant="default" size="default" className="w-fit shrink-0" data-testid="badge">
+                          {at(badges, pack.badge)}
+                        </Badge>
+                      ) : null}
+                    </Box>
+                  ) : null}
+                  <Stack gap="0" className="min-w-0">
+                    <Title as={3} size="xl" weight="bold">
+                      {pack.name}
+                    </Title>
+                    <Text size="2xl" weight="bold">
+                      {fmtMoney(pack.price, pack.currency)}
+                    </Text>
+                  </Stack>
+                </Stack>
+                <Button
+                  variant={((pack.badge === "popular") ? "default" : "outline")}
+                  size="sm"
+                  type="button"
+                  className={cn("w-fit shrink-0", (((item as string) === "row") ? "" : "mt-auto"))}
+                  data-testid="buy"
+                >
+                  {buy}
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/credit-packs.types.ts b/packages/react/ui/src/blocks/credit-packs.types.ts
new file mode 100644
index 0000000..d320871
--- /dev/null
+++ b/packages/react/ui/src/blocks/credit-packs.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type Pack = {
+  id: string;
+  name: string;
+  credits: number;
+  price: number;
+  currency: string;
+  badge: string;
+};
diff --git a/packages/react/ui/src/blocks/cta-band.tsx b/packages/react/ui/src/blocks/cta-band.tsx
new file mode 100644
index 0000000..2849559
--- /dev/null
+++ b/packages/react/ui/src/blocks/cta-band.tsx
@@ -0,0 +1,116 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+/**
+ * A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split
+ * picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof
+ * (none, quote), density.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { CtaActions } from "../components/cta-actions";
+import { CtaBanner } from "../blocks/cta-banner";
+import { MediaFrame } from "../components/media-frame";
+import { QuoteProof } from "../components/quote-proof";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { CtaQuote } from "./cta-band.types";
+import type { ActionSet } from "../components/cta-actions.types";
+
+export type CtaBandProps = {
+  id: string;
+  title: string;
+  text: string;
+  actions: ActionSet;
+  quote?: CtaQuote;
+  layout?: "card" | "band" | "split" | "row" | "banner";
+  tone?: "default" | "muted";
+  proof?: "none" | "quote";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function CtaBand({
+  id,
+  title,
+  text,
+  actions,
+  quote,
+  layout = "card",
+  tone = "muted",
+  proof = "none",
+  density = "default",
+  landmarkLabel,
+}: CtaBandProps) {
+  const center = ((layout as string) === "band") || ((layout as string) === "banner");
+  return (
+    <>
+      {((layout as string) === "banner") ? (
+        <CtaBanner
+          id={id}
+          title={title}
+          text={text}
+          cta={actions.cta}
+          href={actions.href}
+          tone={tone}
+          landmarkLabel={landmarkLabel}
+        />
+      ) : ((layout as string) === "row") ? (
+        <Block
+          tag="section"
+          className="py-8"
+          aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+          data-testid="section"
+          data-tone={tone}
+          data-density={density}
+          aria-label={landmarkLabel}
+        >
+          <Container className="mx-auto w-full max-w-6xl px-4" data-slot="container">
+            <Card variant="muted">
+              <CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                <Stack gap="2" className="min-w-0">
+                  <Title as={2} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+                    {title}
+                  </Title>
+                  <Text size="base" className="text-muted-foreground">
+                    {text}
+                  </Text>
+                </Stack>
+                {((proof as string) === "quote") ? (
+                  <QuoteProof quote={quote?.text} quoteBy={quote?.by} center={center} />
+                ) : null}
+                <CtaActions id={id} actions={actions} center={center} />
+              </CardContent>
+            </Card>
+          </Container>
+        </Block>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={text}
+          layout={(((layout as string) === "split") ? "split" : "stack")}
+          align={(center ? "center" : "start")}
+          boxed={((layout as string) === "card")}
+          media={{ show: ((layout as string) === "split") }}
+          tone={tone}
+          density={density}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame alt={title} ratio="4/3" />
+          )}
+        >
+          {((proof as string) === "quote") ? (
+            <QuoteProof quote={quote?.text} quoteBy={quote?.by} center={center} />
+          ) : null}
+          <CtaActions id={id} actions={actions} center={center} />
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/cta-band.types.ts b/packages/react/ui/src/blocks/cta-band.types.ts
new file mode 100644
index 0000000..e12f8ec
--- /dev/null
+++ b/packages/react/ui/src/blocks/cta-band.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type CtaQuote = {
+  /** a customer quote, shown when `proof` is quote */
+  text?: string;
+  /** who said it */
+  by?: string;
+};
diff --git a/packages/react/ui/src/blocks/cta-banner.tsx b/packages/react/ui/src/blocks/cta-banner.tsx
new file mode 100644
index 0000000..f17da94
--- /dev/null
+++ b/packages/react/ui/src/blocks/cta-banner.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+/** A centered closing card: heading, one sentence and a pill button. Sizes from the default preset. */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { defaults } from "../presets/defaults";
+import { cn, tpl } from "../utils";
+
+export type CtaBannerProps = {
+  id: string;
+  title: string;
+  text: string;
+  cta: string;
+  href?: string;
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function CtaBanner({ id, title, text, cta, href, tone = "muted", landmarkLabel }: CtaBannerProps) {
+  return (
+    <Block
+      tag="section"
+      className="w-full py-0"
+      aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+      data-testid="section"
+      data-tone={tone}
+      data-density="compact"
+      aria-label={landmarkLabel}
+    >
+      <Box
+        className={cn(
+          "flex w-full flex-col items-center gap-10 bg-muted px-6 text-center",
+          defaults.cta.panel
+        )}
+        data-testid="cta-banner"
+      >
+        <Title
+          as={2}
+          size="3xl"
+          weight="semibold"
+          className={cn(defaults.cta.title, "leading-9")}
+          id={tpl("{0}-title", id)}
+        >
+          {title}
+        </Title>
+        <Text size="xs" weight="semibold" className={cn("leading-5 text-muted-foreground", defaults.cta.text)}>
+          {text}
+        </Text>
+        <Button variant="default" size="lg" href={href} className={defaults.cta.button} data-testid="action-primary">
+          {cta}
+        </Button>
+      </Box>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/cta-proof.tsx b/packages/react/ui/src/blocks/cta-proof.tsx
new file mode 100644
index 0000000..915dd34
--- /dev/null
+++ b/packages/react/ui/src/blocks/cta-proof.tsx
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/cta-proof.ts
+/**
+ * A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note.
+ * Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos,
+ * features, stats, rows, zones), mediaSide, tone.
+ */
+import { type ReactNode } from "react";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { CtaProofItems } from "../components/cta-proof-items";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import type { CtaContent } from "./cta-proof.types";
+import type { Logo } from "./logo-cloud.types";
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Zone } from "./zone-table.types";
+import type { LinkActions } from "./error-page.types";
+
+export type CtaProofProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  actions: LinkActions;
+  content: CtaContent;
+  note?: string;
+  layout?: "center" | "split";
+  proof?: "logos" | "features" | "stats" | "rows" | "zones";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function CtaProof({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  actions,
+  content,
+  note = "",
+  layout = "center",
+  proof = "stats",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: CtaProofProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge }}
+      tone={tone}
+      align={(((layout as string) === "center") ? "center" : "start")}
+      layout={(((layout as string) === "center") ? "stack" : "split")}
+      media={{ show: ((layout as string) === "split"), side: mediaSide }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="4/3" />
+      )}
+    >
+      <CtaProofItems content={content} proof={proof} center={((layout as string) === "center")} />
+      <ActionGroup
+        primary={actions.cta}
+        primaryHref={actions.href}
+        secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+        secondaryHref={actions.secondaryHref}
+        align={(((layout as string) === "center") ? "center" : "start")}
+      />
+      {note ? (
+        <Text size="xs" className="text-muted-foreground" data-testid="cta-note">
+          {note}
+        </Text>
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/cta-proof.types.ts b/packages/react/ui/src/blocks/cta-proof.types.ts
new file mode 100644
index 0000000..4169967
--- /dev/null
+++ b/packages/react/ui/src/blocks/cta-proof.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/cta-proof.ts
+
+import type { Logo } from "./logo-cloud.types";
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Zone } from "./zone-table.types";
+
+export type CtaContent = {
+  logos: Logo[];
+  features: Feature[];
+  stats: Stat[];
+  zones: Zone[];
+};
diff --git a/packages/react/ui/src/blocks/dashboard-overview.tsx b/packages/react/ui/src/blocks/dashboard-overview.tsx
new file mode 100644
index 0000000..11ebf11
--- /dev/null
+++ b/packages/react/ui/src/blocks/dashboard-overview.tsx
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+/**
+ * The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the
+ * activity side by side, stacked: one below the other), cols (2, 4), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { BarChart } from "../components/bar-chart";
+import { Panel } from "../components/panel";
+import { SectionFrame } from "../components/section-frame";
+import { StatTile } from "../components/stat-tile";
+import { Timeline } from "../components/timeline";
+import { tpl } from "../utils";
+import type { OverviewChart, OverviewActivity } from "./dashboard-overview.types";
+import type { Metric } from "./metric-row.types";
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+
+export type DashboardOverviewProps = {
+  id: string;
+  title: string;
+  metrics: Metric[];
+  chart: OverviewChart;
+  activity: OverviewActivity;
+  layout?: "split" | "stacked";
+  cols?: "2" | "4";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function DashboardOverview({
+  id,
+  title,
+  metrics,
+  chart,
+  activity,
+  layout = "split",
+  cols = "4",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: DashboardOverviewProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      <Stack gap="6" align="stretch">
+        {((metrics?.length ?? 0) > 0) ? (
+          <Grid cols={(((cols as string) === "2") ? "1-2" : "1-4")} className="gap-4" data-testid="items">
+            {(metrics ?? []).map((m) => (
+              <Box key={m.id} data-testid="item">
+                <StatTile label={m.label} value={m.value} icon={m.icon} hint={m.hint} />
+              </Box>
+            ))}
+          </Grid>
+        ) : null}
+        <Grid
+          cols={(((layout as string) === "split") ? "1-2" : "1")}
+          className="items-stretch gap-4"
+          data-testid="panels"
+        >
+          {((chart.series?.length ?? 0) > 0) ? (
+            <Panel title={chart.title} description={chart.text} id={tpl("{0}-chart", id)} className="h-full">
+              <BarChart bars={chart.series} label={chart.summary} height={144} />
+            </Panel>
+          ) : null}
+          {((activity.events?.length ?? 0) > 0) ? (
+            <Panel title={activity.title} description={activity.text} id={tpl("{0}-feed", id)} className="h-full">
+              <Timeline items={activity.events} />
+            </Panel>
+          ) : null}
+        </Grid>
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/dashboard-overview.types.ts b/packages/react/ui/src/blocks/dashboard-overview.types.ts
new file mode 100644
index 0000000..f10bd5b
--- /dev/null
+++ b/packages/react/ui/src/blocks/dashboard-overview.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+
+export type OverviewChart = {
+  title: string;
+  text: string;
+  /** the chart's accessible summary */
+  summary: string;
+  /** the bars */
+  series: Point[];
+};
+
+export type OverviewActivity = {
+  title: string;
+  text: string;
+  events: Event[];
+};
diff --git a/packages/react/ui/src/blocks/dashboard-shell.tsx b/packages/react/ui/src/blocks/dashboard-shell.tsx
new file mode 100644
index 0000000..88d641b
--- /dev/null
+++ b/packages/react/ui/src/blocks/dashboard-shell.tsx
@@ -0,0 +1,112 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/shells.ts
+/**
+ * The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset:
+ * over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide,
+ * rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries
+ * the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a
+ * framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { ShellContent } from "../components/shell-content";
+import { ShellFooter } from "../components/shell-footer";
+import { ShellSidebar } from "../components/shell-sidebar";
+import { ShellTopbar } from "../components/shell-topbar";
+import { cn, tpl } from "../utils";
+import type { ShellNav } from "./dashboard-shell.types";
+import type { NavLink } from "./nav-bar.types";
+
+export type DashboardShellProps = {
+  id: string;
+  title: string;
+  level?: 1 | 2;
+  nav: ShellNav;
+  topbar?: "full" | "inset" | "none";
+  search?: "show" | "hide";
+  sidebar?: "wide" | "rail" | "collapsed" | "twolevel" | "none";
+  side?: "start" | "end";
+  footer?: "full" | "inset" | "none";
+  content?: "grid" | "split" | "list";
+  frame?: "window" | "page";
+  landmarkLabel?: string;
+};
+
+export function DashboardShell({
+  id,
+  title,
+  level = 2,
+  nav,
+  topbar = "full",
+  search = "show",
+  sidebar = "wide",
+  side = "start",
+  footer = "none",
+  content = "grid",
+  frame = "window",
+  landmarkLabel,
+}: DashboardShellProps) {
+  const titleId = tpl("{0}-title", id);
+  return (
+    <Block
+      tag="section"
+      className={(((frame as string) === "window") ? "bg-background py-12" : "bg-background")}
+      id={id}
+      aria-labelledby={(landmarkLabel ? undefined : titleId)}
+      data-testid="dashboard-shell"
+      data-topbar={topbar}
+      data-sidebar={sidebar}
+      data-footer={footer}
+      aria-label={landmarkLabel}
+    >
+      <Box className={(((frame as string) === "window") ? "mx-auto w-full max-w-6xl px-4" : "")}>
+        <Box
+          className={cn(
+            "flex flex-col overflow-hidden bg-background",
+            (((frame as string) === "window") ? "min-h-160 rounded border border-border" : "min-h-screen")
+          )}
+          data-testid="window"
+        >
+          {((topbar as string) === "full") ? (
+            <ShellTopbar
+              nav={nav}
+              links={(((sidebar as string) === "none") ? "show" : "hide")}
+              search={search}
+              landmarkLabel={landmarkLabel}
+            />
+          ) : null}
+          <Box className={cn("flex min-h-0 flex-1", (((side as string) === "end") ? "flex-row-reverse" : ""))}>
+            {((sidebar as string) !== "none") ? (
+              <ShellSidebar
+                nav={nav}
+                mode={sidebar}
+                side={side}
+                brand={(((topbar as string) === "full") ? "hide" : "show")}
+                landmarkLabel={landmarkLabel}
+              />
+            ) : null}
+            <Box className="flex min-w-0 flex-1 flex-col">
+              {((topbar as string) === "inset") ? (
+                <ShellTopbar
+                  nav={nav}
+                  brand={(((sidebar as string) === "none") ? "show" : "hide")}
+                  links={(((sidebar as string) === "none") ? "show" : "hide")}
+                  search={search}
+                  landmarkLabel={landmarkLabel}
+                />
+              ) : null}
+              <ShellContent title={title} titleId={titleId} level={level} content={content} />
+              {((footer as string) === "inset") ? (
+                <ShellFooter nav={nav} place="inset" landmarkLabel={landmarkLabel} />
+              ) : null}
+            </Box>
+          </Box>
+          {((footer as string) === "full") ? (
+            <ShellFooter nav={nav} landmarkLabel={landmarkLabel} />
+          ) : null}
+        </Box>
+      </Box>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/dashboard-shell.types.ts b/packages/react/ui/src/blocks/dashboard-shell.types.ts
new file mode 100644
index 0000000..1fbb633
--- /dev/null
+++ b/packages/react/ui/src/blocks/dashboard-shell.types.ts
@@ -0,0 +1,21 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/shells.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type ShellNav = {
+  label: string;
+  brand: string;
+  links: NavLink[];
+  current: string;
+  subTitle: string;
+  sub: NavLink[];
+  subCurrent: string;
+  search: string;
+  shortcut: string;
+  expand: string;
+  userName: string;
+  copyright: string;
+  footerLabel: string;
+  footer: NavLink[];
+};
diff --git a/packages/react/ui/src/blocks/delivery-info.tsx b/packages/react/ui/src/blocks/delivery-info.tsx
new file mode 100644
index 0000000..70e4d5c
--- /dev/null
+++ b/packages/react/ui/src/blocks/delivery-info.tsx
@@ -0,0 +1,117 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+/**
+ * How delivery works: the facts as icon cards, then the zones with their time and the order that ships free.
+ * Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones),
+ * tone, density.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { SectionFrame } from "../components/section-frame";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { DeliveryLabels } from "./delivery-info.types";
+import type { Feature } from "./feature-grid.types";
+import type { Zone } from "./zone-table.types";
+
+export type DeliveryInfoProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  facts: Feature[];
+  zones: Zone[];
+  labels: DeliveryLabels;
+  layout?: "full" | "facts" | "split";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function DeliveryInfo({
+  id,
+  title,
+  lead = "",
+  facts,
+  zones,
+  labels,
+  layout = "full",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: DeliveryInfoProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      <Box
+        className={cn(
+          "grid grid-cols-1 gap-8",
+          (((layout as string) === "split") ? "items-start md:grid-cols-2" : "")
+        )}
+      >
+        {((facts?.length ?? 0) > 0) ? (
+          <Grid cols={(((layout as string) === "split") ? "1-2" : "1-4")} className="gap-4" data-testid="facts">
+            {(facts ?? []).map((f) => (
+              <Stack key={f.id} gap="4" className="rounded bg-card inset-ring inset-ring-border p-6" data-testid="fact">
+                <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                  <LucideIcon name={f.icon} size={20} />
+                </Box>
+                <Stack gap="2">
+                  <Text size="sm" weight="semibold">
+                    {f.title}
+                  </Text>
+                  <Text size="sm" className="text-muted-foreground">
+                    {f.text}
+                  </Text>
+                </Stack>
+              </Stack>
+            ))}
+          </Grid>
+        ) : null}
+        {(((layout as string) !== "facts") && ((zones?.length ?? 0) > 0)) ? (
+          <Stack gap="4" align="stretch">
+            <Title as={3} size="lg" weight="bold">
+              {labels.zones}
+            </Title>
+            <Box
+              className={
+                (layout as string) === "split" ? "flex flex-col gap-4"
+                : "grid grid-cols-1 gap-4 md:grid-cols-3"
+              }
+            >
+              {(zones ?? []).map((z) => (
+                <Stack key={z.id}
+                  gap="2"
+                  className={
+                    (layout as string) === "split" ? "border-b border-border pb-4"
+                    : "rounded bg-card inset-ring inset-ring-border p-6"
+                  }
+                  data-testid="zone"
+                >
+                  <Group gap="4" align="baseline" justify="between">
+                    <Text size="sm" weight="semibold">
+                      {z.name}
+                    </Text>
+                    <Badge variant="secondary" size="default">
+                      {z.time}
+                    </Badge>
+                  </Group>
+                  <Text size="sm" className="text-muted-foreground">
+                    {z.area}
+                  </Text>
+                  <Text size="sm" weight="medium">
+                    {tpl(labels.freeFrom, fmtMoney(z.freeFrom, z.currency))}
+                  </Text>
+                </Stack>
+              ))}
+            </Box>
+          </Stack>
+        ) : null}
+      </Box>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/delivery-info.types.ts b/packages/react/ui/src/blocks/delivery-info.types.ts
new file mode 100644
index 0000000..ab50895
--- /dev/null
+++ b/packages/react/ui/src/blocks/delivery-info.types.ts
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type DeliveryLabels = {
+  zones: string;
+  freeFrom: string;
+};
diff --git a/packages/react/ui/src/blocks/empty-panel.tsx b/packages/react/ui/src/blocks/empty-panel.tsx
new file mode 100644
index 0000000..a9db8c5
--- /dev/null
+++ b/packages/react/ui/src/blocks/empty-panel.tsx
@@ -0,0 +1,93 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain.
+ * Axes: layout (card, plain), actions (button, none), size (default, compact).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+
+export type EmptyPanelProps = {
+  id: string;
+  title: string;
+  text: string;
+  icon?: string;
+  cta?: string;
+  ctaHref?: string;
+  layout?: "card" | "plain";
+  actions?: "button" | "none";
+  visual?: "icon" | "image";
+  size?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function EmptyPanel({
+  id,
+  title,
+  text,
+  icon = "inbox",
+  cta,
+  ctaHref,
+  layout = "card",
+  actions = "button",
+  visual = "icon",
+  size = "default",
+  landmarkLabel,
+}: EmptyPanelProps) {
+  return (
+    <Block tag="section" aria-label={(landmarkLabel ?? title)} data-testid="empty">
+      <Container
+        className={cn(
+          "mx-auto w-full max-w-6xl px-4",
+          (((size as string) === "compact") ? "py-4" : "py-8")
+        )}
+        data-slot="container"
+      >
+        {((visual as string) === "image") ? (
+          <Stack gap="4" align="center" className="mx-auto max-w-md text-center" data-testid="empty-visual">
+            <MediaFrame alt={title} ratio="4/3" className="w-full max-w-xs" />
+            <Title as={2} size="2xl" weight="bold">
+              {title}
+            </Title>
+            <Text size="sm" className="text-muted-foreground">
+              {text}
+            </Text>
+            {((actions as string) === "button") ? (
+              <Button variant="default" size="sm" href={ctaHref} data-testid="empty-action">
+                {cta}
+              </Button>
+            ) : null}
+          </Stack>
+        ) : (
+          <EmptyState
+            icon={icon}
+            title={title}
+            text={text}
+            className={cn(
+              "mx-auto max-w-xl",
+              (((layout as string) === "plain") ? "bg-transparent inset-ring-0" : ""),
+              (((size as string) === "compact") ? "py-6" : "")
+            )}
+            action={(
+              <>
+                {((actions as string) === "button") ? (
+                  <Button variant="default" size="sm" href={ctaHref} data-testid="empty-action">
+                    {cta}
+                  </Button>
+                ) : null}
+              </>
+            )}
+          />
+        )}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/error-page.tsx b/packages/react/ui/src/blocks/error-page.tsx
new file mode 100644
index 0000000..7831f7c
--- /dev/null
+++ b/packages/react/ui/src/blocks/error-page.tsx
@@ -0,0 +1,79 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way
+ * back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two),
+ * tone.
+ */
+import { type ReactNode } from "react";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { LinkActions } from "./error-page.types";
+
+export type ErrorPageProps = {
+  id: string;
+  title: string;
+  text: string;
+  status: string;
+  actions: LinkActions;
+  level?: 1 | 2;
+  layout?: "centered" | "split";
+  code?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ErrorPage({
+  id,
+  title,
+  text,
+  status,
+  actions,
+  level = 1,
+  layout = "centered",
+  code = "show",
+  tone = "default",
+  landmarkLabel,
+}: ErrorPageProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      heading={{ level }}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "split") }}
+      align={(((layout as string) === "split") ? "start" : "center")}
+      tone={tone}
+      density="roomy"
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="4/3" />
+      )}
+    >
+      {((code as string) === "show") ? (
+        <Text
+          size="4xl"
+          weight="bold"
+          className={cn(
+            "text-8xl text-muted-foreground",
+            (((layout as string) === "split") ? "" : "text-center")
+          )}
+          data-testid="error-code"
+        >
+          {status}
+        </Text>
+      ) : null}
+      <ActionGroup
+        primary={actions.cta}
+        primaryHref={actions.href}
+        secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+        secondaryHref={actions.secondaryHref}
+        align={(((layout as string) === "split") ? "start" : "center")}
+      />
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/error-page.types.ts b/packages/react/ui/src/blocks/error-page.types.ts
new file mode 100644
index 0000000..e117bb4
--- /dev/null
+++ b/packages/react/ui/src/blocks/error-page.types.ts
@@ -0,0 +1,13 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type LinkActions = {
+  /** one or two links */
+  mode?: "one" | "two";
+  /** primary action label */
+  cta: string;
+  /** the address of the primary action; none: a button, not a link */
+  href?: string;
+  secondary?: string;
+  secondaryHref?: string;
+};
diff --git a/packages/react/ui/src/blocks/faq-list.tsx b/packages/react/ui/src/blocks/faq-list.tsx
new file mode 100644
index 0000000..44341c0
--- /dev/null
+++ b/packages/react/ui/src/blocks/faq-list.tsx
@@ -0,0 +1,121 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+/**
+ * A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without
+ * script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search
+ * field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters
+ * by `filter.category`), density, tone.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SearchField } from "../components/search-field";
+import { SectionFrame } from "../components/section-frame";
+import { Switcher } from "../components/switcher";
+import { SwitcherItem } from "../components/switcher-item";
+import { tpl } from "../utils";
+import type { Faq, FaqTab, FaqSearch, FaqFilter } from "./faq-list.types";
+
+export type FaqListProps = {
+  id: string;
+  title: string;
+  items: Faq[];
+  search?: FaqSearch;
+  filter?: FaqFilter;
+  layout?: "accordion" | "chat";
+  cols?: "1" | "2";
+  empty?: string;
+  multiple?: boolean;
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+  onQuery?: (text: string) => void;
+  onCategory?: (value: string) => void;
+};
+
+export function FaqList({
+  id,
+  title,
+  items,
+  search,
+  filter,
+  layout = "accordion",
+  cols = "1",
+  empty = "",
+  multiple = false,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onQuery,
+  onCategory,
+}: FaqListProps) {
+  const inCategory = items.filter((i) => !filter?.category || i["category"] === filter?.category);
+  const shown = inCategory.filter((i) => !search?.query || String(i["question"]).toLowerCase().includes(String(search?.query).toLowerCase()));
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      measure={(((layout as string) === "chat") ? "2xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {(search?.mode === "field") ? (
+        <SearchField
+          label={(search?.label ?? "")}
+          placeholder={search?.label}
+          value={(search?.query ?? "")}
+          onValue={(arg: string) => onQuery?.(arg)}
+        />
+      ) : null}
+      {(filter?.mode === "categories") ? (
+        <Switcher label={filter?.label}>
+          {(filter?.tabs ?? []).map((tab) => (
+            <SwitcherItem key={tab.id} active={(tab.value === filter?.category)} onClick={() => onCategory?.(tab.value)}>
+              {tab.title}
+            </SwitcherItem>
+          ))}
+        </Switcher>
+      ) : null}
+      {((shown?.length ?? 0) === 0) ? (
+        <EmptyState icon="circle-question-mark" title={empty} />
+      ) : null}
+      {((layout as string) === "chat") ? (
+        <Stack gap="4" align="stretch" data-testid="faq">
+          {(shown ?? []).map((item) => (
+            <Stack key={item.id} gap="2" align="stretch" data-testid="faq-item">
+              <Box className="ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground">
+                <Text size="sm" weight="semibold">
+                  {item.question}
+                </Text>
+              </Box>
+              <Box className="mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4">
+                <Text size="sm">
+                  {item.answer}
+                </Text>
+              </Box>
+            </Stack>
+          ))}
+        </Stack>
+      ) : (
+        <Grid cols={(((cols as string) === "2") ? "1-2" : "1")} className="items-start gap-x-8" data-testid="faq">
+          {(shown ?? []).map((item) => (
+            <Disclosure key={item.id} variant="item" name={(multiple ? undefined : tpl("{0}-faq", (id ?? "faq")))} data-testid="faq-item">
+              <Summary variant="item">
+                {item.question}
+              </Summary>
+              <Text size="sm" className="pb-4 text-muted-foreground">
+                {item.answer}
+              </Text>
+            </Disclosure>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/faq-list.types.ts b/packages/react/ui/src/blocks/faq-list.types.ts
new file mode 100644
index 0000000..27fd513
--- /dev/null
+++ b/packages/react/ui/src/blocks/faq-list.types.ts
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type Faq = {
+  id: string;
+  question: string;
+  answer: string;
+  category?: string;
+};
+
+export type FaqTab = {
+  id: string;
+  title: string;
+  value: string;
+};
+
+export type FaqSearch = {
+  /** field: a search field above the questions */
+  mode?: "none" | "field";
+  /** accessible name and placeholder of the search field */
+  label?: string;
+  /** the text the questions are filtered by */
+  query?: string;
+};
+
+export type FaqFilter = {
+  /** categories: tabs above the questions */
+  mode?: "none" | "categories";
+  /** the category tabs */
+  tabs?: FaqTab[];
+  /** accessible name of the tabs */
+  label?: string;
+  /** the value of the chosen tab */
+  category?: string;
+};
diff --git a/packages/react/ui/src/blocks/faq-split.tsx b/packages/react/ui/src/blocks/faq-split.tsx
new file mode 100644
index 0000000..62a5b4c
--- /dev/null
+++ b/packages/react/ui/src/blocks/faq-split.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/faq-split.ts
+/**
+ * Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside:
+ * the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder
+ * beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { FaqCards } from "../components/faq-cards";
+import { FaqDisclosures } from "../components/faq-disclosures";
+import { FaqFinder } from "../components/faq-finder";
+import { FaqHelp } from "../components/faq-help";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Question, FaqSplitLabels } from "./faq-split.types";
+import type { Feature } from "./feature-grid.types";
+import type { FaqTab } from "./faq-list.types";
+
+export type FaqSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  items: Question[];
+  channels: Feature[];
+  topics: FaqTab[];
+  labels: FaqSplitLabels;
+  layout?: "head" | "aside" | "media" | "search" | "cards";
+  cards?: "grid3" | "grid4" | "icons";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function FaqSplit({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  items,
+  channels,
+  topics,
+  labels,
+  layout = "head",
+  cards = "grid3",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: FaqSplitProps) {
+  return (
+    <>
+      {((items?.length ?? 0) > 0) ? (
+        <>
+          {((layout as string) === "cards") ? (
+            <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+              <FaqCards items={items} labels={labels} cards={cards} />
+            </SectionFrame>
+          ) : null}
+          {((layout as string) === "head") ? (
+            <SectionFrame
+              id={id}
+              title={title}
+              lead={lead}
+              heading={{ badge }}
+              tone={tone}
+              layout="split"
+              media={{ show: true, side: "end", align: "start" }}
+              landmarkLabel={landmarkLabel}
+              aside={(
+                <FaqDisclosures items={items} name={tpl("{0}-faq", id)} />
+              )}
+            >
+              <Box>
+                <Button variant="default" size="default" data-testid="faq-cta">
+                  {labels.cta}
+                </Button>
+              </Box>
+            </SectionFrame>
+          ) : null}
+          {((layout as string) === "aside") ? (
+            <SectionFrame
+              id={id}
+              title={title}
+              lead={lead}
+              heading={{ badge }}
+              tone={tone}
+              layout="split"
+              media={{ show: true, side: "end", align: "start" }}
+              landmarkLabel={landmarkLabel}
+              aside={(
+                <FaqHelp labels={labels} channels={channels} landmarkLabel={landmarkLabel} />
+              )}
+            >
+              <FaqDisclosures items={items} name={tpl("{0}-faq", id)} />
+            </SectionFrame>
+          ) : null}
+          {((layout as string) === "media") ? (
+            <SectionFrame
+              id={id}
+              title={title}
+              lead={lead}
+              heading={{ badge }}
+              tone={tone}
+              layout="split"
+              media={{ show: true, side: mediaSide, align: "start" }}
+              landmarkLabel={landmarkLabel}
+              aside={(
+                <MediaFrame alt={title} ratio="4/3" />
+              )}
+            >
+              <FaqDisclosures items={items} name={tpl("{0}-faq", id)} />
+              <Box>
+                <Button variant="default" size="default" data-testid="faq-cta">
+                  {labels.cta}
+                </Button>
+              </Box>
+            </SectionFrame>
+          ) : null}
+          {((layout as string) === "search") ? (
+            <SectionFrame
+              id={id}
+              title={title}
+              lead={lead}
+              heading={{ badge }}
+              tone={tone}
+              layout="split"
+              media={{ show: true, side: mediaSide }}
+              landmarkLabel={landmarkLabel}
+              aside={(
+                <MediaFrame alt={title} ratio="4/3" />
+              )}
+            >
+              <FaqFinder items={items} labels={labels} topics={topics} />
+            </SectionFrame>
+          ) : null}
+        </>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/faq-split.types.ts b/packages/react/ui/src/blocks/faq-split.types.ts
new file mode 100644
index 0000000..626adfc
--- /dev/null
+++ b/packages/react/ui/src/blocks/faq-split.types.ts
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/faq-split.ts
+
+export type Question = {
+  id: string;
+  question: string;
+  answer: string;
+  category: string;
+  icon: string;
+  href?: string;
+};
+
+export type FaqSplitLabels = {
+  cta: string;
+  more: string;
+  asideTitle: string;
+  asideText: string;
+  asideCta: string;
+  search: string;
+  popular: string;
+  query?: string;
+};
diff --git a/packages/react/ui/src/blocks/feature-accordion.tsx b/packages/react/ui/src/blocks/feature-accordion.tsx
new file mode 100644
index 0000000..69921af
--- /dev/null
+++ b/packages/react/ui/src/blocks/feature-accordion.tsx
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the
+ * first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureAccordionProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  expand?: "first" | "none";
+  media?: "none" | "image";
+  multiple?: boolean;
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function FeatureAccordion({
+  id,
+  title,
+  features,
+  empty = "",
+  expand = "first",
+  media = "none",
+  multiple = false,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: FeatureAccordionProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      layout={(((media as string) === "image") ? "split" : "stack")}
+      media={{ show: ((media as string) === "image") }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="4/3" />
+      )}
+    >
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Stack gap="0" align="stretch" data-testid="items">
+          {(features ?? []).map((f, i) => (
+            <Disclosure key={f.id}
+              variant="item"
+              name={(multiple ? undefined : tpl("{0}-accordion", (id ?? "accordion")))}
+              open={(((expand as string) === "first") && (i === 0))}
+              data-testid="item"
+            >
+              <Summary variant="item">
+                <Inline className="flex min-w-0 items-center justify-start gap-4">
+                  <LucideIcon name={f.icon} size={20} />
+                  <Inline className="text-base font-semibold">
+                    {f.title}
+                  </Inline>
+                </Inline>
+              </Summary>
+              <Text size="sm" className="pb-4 text-muted-foreground">
+                {f.text}
+              </Text>
+            </Disclosure>
+          ))}
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/feature-grid.tsx b/packages/react/ui/src/blocks/feature-grid.tsx
new file mode 100644
index 0000000..177488f
--- /dev/null
+++ b/packages/react/ui/src/blocks/feature-grid.tsx
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+/**
+ * A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are
+ * Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon),
+ * media side (rows), density, tone.
+ */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Link } from "../primitives/link/link";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { FeatureCards } from "../components/feature-cards";
+import { FeatureRows } from "../components/feature-rows";
+import { SectionFrame } from "../components/section-frame";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Feature } from "./feature-grid.types";
+import type { HeadLink } from "../components/section-frame.types";
+
+export type FeatureGridProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  action?: HeadLink;
+  layout?: "grid" | "rows";
+  cols?: "1-2" | "1-3" | "1-4";
+  item?: "card" | "tile" | "cell";
+  mediaSide?: "end" | "start" | "alternate";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function FeatureGrid({
+  id,
+  title,
+  features,
+  empty = "",
+  action,
+  layout = "grid",
+  cols = "1-3",
+  item = "card",
+  mediaSide = "end",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: FeatureGridProps) {
+  return (
+    <>
+      {((item as string) === "cell") ? (
+        <SectionFrame
+          id={id}
+          tone={tone}
+          density={density}
+          measure="fill"
+          className="py-0"
+          landmarkLabel={landmarkLabel}
+        >
+          <Group gap="4" align="center" justify="between" className="w-full">
+            <Title as={2} size="sm" weight="semibold" className="leading-7" id={(id + "-title")}>
+              {title}
+            </Title>
+            {(action?.label && action?.href) ? (
+              <Link
+                href={action?.href}
+                variant="default"
+                className={cn(defaults.text.tiny, "shrink-0 font-medium leading-5")}
+                data-testid="section-action"
+              >
+                {action?.label}
+              </Link>
+            ) : null}
+          </Group>
+          {((features?.length ?? 0) === 0) ? (
+            <EmptyState icon="layout-grid" title={empty} />
+          ) : (
+            <FeatureCards features={features} cols={cols} item={item} />
+          )}
+        </SectionFrame>
+      ) : (
+        <SectionFrame id={id} title={title} action={action} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+          {((features?.length ?? 0) === 0) ? (
+            <EmptyState icon="layout-grid" title={empty} />
+          ) : ((layout as string) === "rows") ? (
+            <FeatureRows features={features} mediaSide={mediaSide} />
+          ) : (
+            <FeatureCards features={features} cols={cols} item={item} />
+          )}
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/feature-grid.types.ts b/packages/react/ui/src/blocks/feature-grid.types.ts
new file mode 100644
index 0000000..e60c78e
--- /dev/null
+++ b/packages/react/ui/src/blocks/feature-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type Feature = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  href?: string;
+};
diff --git a/packages/react/ui/src/blocks/feature-showcase.tsx b/packages/react/ui/src/blocks/feature-showcase.tsx
new file mode 100644
index 0000000..b7861ba
--- /dev/null
+++ b/packages/react/ui/src/blocks/feature-showcase.tsx
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/feature-showcase.ts
+/**
+ * Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text
+ * and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4),
+ * tone.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { SectionFrame } from "../components/section-frame";
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureShowcaseProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  features: Feature[];
+  empty?: string;
+  more: string;
+  item?: "picture" | "panel";
+  cols?: "3" | "4";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function FeatureShowcase({
+  id,
+  title,
+  lead = "",
+  features,
+  empty = "",
+  more,
+  item = "picture",
+  cols = "3",
+  tone = "default",
+  landmarkLabel,
+}: FeatureShowcaseProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} align="center" landmarkLabel={landmarkLabel}>
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Box
+          className={
+            (cols as string) === "4" ? "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4"
+            : "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3"
+          }
+        >
+          {(features ?? []).map((f) => (
+            <Card key={f.id} variant="default" className="h-full gap-4 overflow-hidden" data-testid="showcase-card">
+              {((item as string) === "picture") ? (
+                <MediaFrame alt={f.title} />
+              ) : (
+                <Box
+                  className="flex aspect-video items-center justify-center rounded bg-muted text-foreground"
+                  data-testid="showcase-panel"
+                >
+                  <LucideIcon name={f.icon} size={32} />
+                </Box>
+              )}
+              <CardContent className="flex flex-1 flex-col gap-2">
+                <Title as={3} size="base" weight="semibold">
+                  {f.title}
+                </Title>
+                <Text size="sm" className="text-muted-foreground">
+                  {f.text}
+                </Text>
+                {((item as string) === "picture") ? (
+                  <MenuEntry href={f.href} className="mt-auto gap-2 pt-2 text-sm font-medium" size="sm" testid="read">
+                    {more}
+                    <LucideIcon name="arrow-right" size={16} />
+                  </MenuEntry>
+                ) : null}
+              </CardContent>
+            </Card>
+          ))}
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/feature-split.tsx b/packages/react/ui/src/blocks/feature-split.tsx
new file mode 100644
index 0000000..7bd6f76
--- /dev/null
+++ b/packages/react/ui/src/blocks/feature-split.tsx
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/feature-split.ts
+/**
+ * Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as
+ * cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four
+ * metric cards and the actions), mediaSide, tone.
+ */
+import { type ReactNode } from "react";
+import { ActionGroup } from "../components/action-group";
+import { FeatureCards } from "../components/feature-cards";
+import { FeatureMetricCards } from "../components/feature-metric-cards";
+import { FeaturePairs } from "../components/feature-pairs";
+import { FeatureStatRows } from "../components/feature-stat-rows";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { LinkActions } from "./error-page.types";
+
+export type FeatureSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  features: Feature[];
+  stats: Stat[];
+  actions: LinkActions;
+  layout?: "grid" | "cards" | "stats" | "metrics";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function FeatureSplit({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 2,
+  features,
+  stats,
+  actions,
+  layout = "grid",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: FeatureSplitProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge, level }}
+      tone={tone}
+      layout="split"
+      media={{ show: true, side: mediaSide }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio={(((layout as string) === "stats") ? "1/1" : "4/3")} />
+      )}
+    >
+      {((layout as string) === "grid") ? (
+        <>
+          {((features?.length ?? 0) > 0) ? (
+            <FeaturePairs features={features} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "cards") ? (
+        <>
+          {((features?.length ?? 0) > 0) ? (
+            <FeatureCards features={features} cols="1-2" item="tile" />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "stats") ? (
+        <>
+          {((features?.length ?? 0) > 0) ? (
+            <FeatureStatRows features={features} stats={stats} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "metrics") ? (
+        <>
+          {((stats?.length ?? 0) > 0) ? (
+            <FeatureMetricCards stats={stats} />
+          ) : null}
+        </>
+      ) : null}
+      {(((layout as string) === "cards") || ((layout as string) === "metrics")) ? (
+        <ActionGroup
+          primary={actions.cta}
+          primaryHref={actions.href}
+          secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+          secondaryHref={actions.secondaryHref}
+        />
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/feature-sticky.tsx b/packages/react/ui/src/blocks/feature-sticky.tsx
new file mode 100644
index 0000000..c8bca17
--- /dev/null
+++ b/packages/react/ui/src/blocks/feature-sticky.tsx
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description
+ * that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item
+ * (plain, card), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureStickyProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  active?: string;
+  mediaSide?: "end" | "start";
+  item?: "plain" | "card";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function FeatureSticky({
+  id,
+  title,
+  features,
+  empty = "",
+  active = "",
+  mediaSide = "end",
+  item = "plain",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: FeatureStickyProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Grid cols="1-2" className="items-start gap-8" data-testid="sticky">
+          <Box
+            className={cn(
+              "md:sticky md:top-8",
+              (((mediaSide as string) === "start") ? "md:order-first" : "md:order-last")
+            )}
+            data-testid="sticky-media"
+          >
+            <MediaFrame alt={title} ratio="4/3" />
+          </Box>
+          <Stack gap={(((density as string) === "compact") ? "4" : "8")} align="stretch" data-testid="items">
+            {(features ?? []).map((f) => (
+              <Stack key={f.id}
+                gap="2"
+                className={cn(
+                  (((item as string) === "card") ? "rounded bg-card inset-ring inset-ring-border p-6" : "py-4"),
+                  ((f.id === active) ? "inset-ring inset-ring-foreground" : "")
+                )}
+                data-testid="item"
+                aria-current={((f.id === active) ? "true" : undefined)}
+              >
+                <LucideIcon name={f.icon} size={24} />
+                <Title as={3} size="2xl" weight="bold">
+                  {f.title}
+                </Title>
+                <Text size="base" className="text-muted-foreground">
+                  {f.text}
+                </Text>
+              </Stack>
+            ))}
+          </Stack>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/feature-tabs.tsx b/packages/react/ui/src/blocks/feature-tabs.tsx
new file mode 100644
index 0000000..f322cf3
--- /dev/null
+++ b/packages/react/ui/src/blocks/feature-tabs.tsx
@@ -0,0 +1,91 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab
+ * (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the
+ * picture, stack: picture below), tone, density.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { Switcher } from "../components/switcher";
+import { SwitcherItem } from "../components/switcher-item";
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureTabsProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  tabsLabel: string;
+  active?: string;
+  panel?: "split" | "stack";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+  onSelect?: (id: string) => void;
+};
+
+export function FeatureTabs({
+  id,
+  title,
+  features,
+  empty = "",
+  tabsLabel,
+  active = "",
+  panel = "split",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onSelect,
+}: FeatureTabsProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Stack gap="6" align="stretch">
+          <Switcher label={tabsLabel} className="w-fit max-w-full flex-wrap">
+            {(features ?? []).map((f, i) => (
+              <SwitcherItem key={f.id}
+                active={((f.id === active) || (((active as string) === "") && (i === 0)))}
+                onClick={() => onSelect?.(f.id)}
+              >
+                {f.title}
+              </SwitcherItem>
+            ))}
+          </Switcher>
+          {(features ?? []).map((f, i) => (
+            <Fragment key={f.id}>
+              {((f.id === active) || (((active as string) === "") && (i === 0))) ? (
+                <Grid
+                  cols={(((panel as string) === "split") ? "1-2" : "1")}
+                  className="items-center gap-8"
+                  data-testid="tab-panel"
+                  role="tabpanel"
+                >
+                  <Stack gap="4">
+                    <LucideIcon name={f.icon} size={24} />
+                    <Title as={3} size="2xl" weight="bold">
+                      {f.title}
+                    </Title>
+                    <Text size="base" className="text-muted-foreground">
+                      {f.text}
+                    </Text>
+                  </Stack>
+                  <MediaFrame alt={f.title} ratio="4/3" />
+                </Grid>
+              ) : null}
+            </Fragment>
+          ))}
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/footer-split.tsx b/packages/react/ui/src/blocks/footer-split.tsx
new file mode 100644
index 0000000..e756dd9
--- /dev/null
+++ b/packages/react/ui/src/blocks/footer-split.tsx
@@ -0,0 +1,145 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/footer-split.ts
+/**
+ * A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the
+ * link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand
+ * and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two
+ * actions, or the community channels and figures), mediaSide, tone.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { FooterBrand } from "../components/footer-brand";
+import { FooterChannels } from "../components/footer-channels";
+import { FooterContacts } from "../components/footer-contacts";
+import { FooterFigures } from "../components/footer-figures";
+import { FooterGroupCards } from "../components/footer-group-cards";
+import { FooterLinkColumns } from "../components/footer-link-columns";
+import { FooterPoints } from "../components/footer-points";
+import { FooterSignupCard } from "../components/footer-signup-card";
+import { FooterSitemap } from "../components/footer-sitemap";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+import type { FooterExtras, FooterSplitLabels } from "./footer-split.types";
+import type { MegaGroup } from "./mega-menu.types";
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type FooterSplitProps = {
+  id?: string;
+  label: string;
+  brand: string;
+  tagline: string;
+  copyright: string;
+  groups: MegaGroup[];
+  extras: FooterExtras;
+  labels: FooterSplitLabels;
+  layout?: "stats" | "points" | "links" | "newsletter" | "contacts" | "channels";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function FooterSplit({
+  id = "footer",
+  label,
+  brand,
+  tagline,
+  copyright,
+  groups,
+  extras,
+  labels,
+  layout = "stats",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: FooterSplitProps) {
+  return (
+    <Block
+      tag="footer"
+      className={cn("border-t border-border", (((tone as string) === "muted") ? "bg-muted" : ""))}
+      data-testid="footer-split"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      <Container className={cn("mx-auto w-full max-w-6xl px-4", "py-12")} data-slot="container">
+        {((layout as string) === "stats") ? (
+          <Stack gap="8" align="stretch">
+            <Group gap="6" align="start" justify="between" className="flex-wrap">
+              <Stack gap="6" align="start">
+                <FooterBrand brand={brand} tagline={tagline} />
+                <FooterFigures extras={extras} />
+              </Stack>
+              <FooterSitemap href={extras.sitemapHref} label={labels.sitemap} />
+            </Group>
+            <FooterGroupCards label={label} groups={groups} landmarkLabel={landmarkLabel} />
+            <Box className="border-t border-border pt-6">
+              <Text size="sm" className="text-muted-foreground">
+                {copyright}
+              </Text>
+            </Box>
+          </Stack>
+        ) : (
+          <Box className="grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
+            {((mediaSide as string) === "start") ? (
+              <MediaFrame alt={brand} ratio="4/3" />
+            ) : null}
+            <Stack gap="8" align="stretch">
+              {(((layout as string) === "points") || ((layout as string) === "links")) ? (
+                <FooterBrand brand={brand} tagline={tagline} />
+              ) : (
+                <Stack gap="2" align="start">
+                  <Text size="xl" weight="bold">
+                    {(((layout as string) === "newsletter") ? labels.loopTitle : (((layout as string) === "channels") ? labels.joinTitle : labels.title))}
+                  </Text>
+                  <Text size="sm" className="text-muted-foreground">
+                    {(((layout as string) === "newsletter") ? labels.loopText : (((layout as string) === "channels") ? labels.joinText : labels.text))}
+                  </Text>
+                </Stack>
+              )}
+              {((layout as string) === "points") ? (
+                <FooterPoints extras={extras} title={labels.points} />
+              ) : null}
+              {((layout as string) === "newsletter") ? (
+                <FooterSignupCard id={id} labels={labels} />
+              ) : null}
+              {(((layout as string) === "links") || ((layout as string) === "newsletter")) ? (
+                <FooterLinkColumns label={label} groups={groups} landmarkLabel={landmarkLabel} />
+              ) : null}
+              {((layout as string) === "contacts") ? (
+                <>
+                  <FooterContacts extras={extras} />
+                  <ActionGroup
+                    primary={labels.cta}
+                    primaryHref={extras.ctaHref}
+                    secondary={labels.secondary}
+                    secondaryHref={extras.secondaryHref}
+                  />
+                </>
+              ) : null}
+              {((layout as string) === "channels") ? (
+                <>
+                  <FooterChannels extras={extras} />
+                  <FooterFigures extras={extras} />
+                </>
+              ) : null}
+              <Box className="border-t border-border pt-6">
+                <Text size="sm" className="text-muted-foreground">
+                  {copyright}
+                </Text>
+              </Box>
+            </Stack>
+            {((mediaSide as string) !== "start") ? (
+              <MediaFrame alt={brand} ratio="4/3" />
+            ) : null}
+          </Box>
+        )}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/footer-split.types.ts b/packages/react/ui/src/blocks/footer-split.types.ts
new file mode 100644
index 0000000..031f2fc
--- /dev/null
+++ b/packages/react/ui/src/blocks/footer-split.types.ts
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/footer-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type FooterExtras = {
+  stats: Stat[];
+  points: Feature[];
+  contacts: Feature[];
+  channels: Feature[];
+  sitemapHref?: string;
+  ctaHref?: string;
+  secondaryHref?: string;
+};
+
+export type FooterSplitLabels = {
+  title: string;
+  text: string;
+  loopTitle: string;
+  loopText: string;
+  joinTitle: string;
+  joinText: string;
+  sitemap: string;
+  points: string;
+  signup: string;
+  email: string;
+  subscribe: string;
+  note: string;
+  cta: string;
+  secondary: string;
+};
diff --git a/packages/react/ui/src/blocks/hero-classic.tsx b/packages/react/ui/src/blocks/hero-classic.tsx
new file mode 100644
index 0000000..8833fc3
--- /dev/null
+++ b/packages/react/ui/src/blocks/hero-classic.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+/**
+ * The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster).
+ * Axes: layout, media kind and side, scale, tone, density, actions mode.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { ActionGroup } from "../components/action-group";
+import { Backdrop } from "../components/backdrop";
+import { CodeWindow } from "../components/code-window";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { TopicChips } from "../components/topic-chips";
+import { cn, tpl } from "../utils";
+import type { HeroMedia } from "./hero-classic.types";
+import type { ActionSet } from "../components/cta-actions.types";
+import type { CodeLine } from "../components/code-window.types";
+import type { Topic } from "../components/topic-chips.types";
+
+export type HeroClassicProps = {
+  id: string;
+  title: string;
+  text: string;
+  level?: 1 | 2;
+  badge?: string;
+  topics?: Topic[];
+  actions?: ActionSet;
+  media?: HeroMedia;
+  layout?: "centered" | "split";
+  scale?: "default" | "display";
+  tone?: "default" | "muted" | "inverse";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function HeroClassic({
+  id,
+  title,
+  text,
+  level = 1,
+  badge,
+  topics,
+  actions,
+  media,
+  layout = "centered",
+  scale = "default",
+  tone = "default",
+  density = "roomy",
+  landmarkLabel,
+}: HeroClassicProps) {
+  const mediaKind = media?.kind ?? "none";
+  const mediaSide = media?.side ?? "end";
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      heading={{ level, scale, badge }}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      align={(((layout as string) === "split") ? "start" : "center")}
+      media={{
+        show: (((mediaKind as string) === "image") || ((mediaKind as string) === "code") || ((mediaKind as string) === "cluster")),
+        side: mediaSide,
+      }}
+      tone={tone}
+      density={density}
+      className={
+        (((mediaKind as string) === "backdrop") ? "image" : "none") === "image" ? "relative isolate overflow-hidden"
+        : ""
+      }
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <>
+          {(((mediaKind as string) === "code") && media?.lines && ((media?.lines?.length ?? 0) > 0) && media?.codeTitle && media?.prompt) ? (
+            <CodeWindow title={media?.codeTitle} prompt={media?.prompt} lines={media?.lines} />
+          ) : null}
+          {((mediaKind as string) === "cluster") ? (
+            <Grid cols="3" className="items-end gap-4" data-testid="cluster">
+              <Box className={cn("w-full", "")}>
+                <MediaFrame alt={title} ratio="3/4" />
+              </Box>
+              <Box className={cn("w-full", "-translate-y-4")}>
+                <MediaFrame alt={title} ratio="4/3" />
+              </Box>
+              <Box className={cn("w-full", "")}>
+                <MediaFrame alt={title} ratio="3/4" />
+              </Box>
+            </Grid>
+          ) : null}
+          {(((mediaKind as string) === "image")) ? (
+            <MediaFrame alt={title} ratio="4/3" />
+          ) : null}
+        </>
+      )}
+    >
+      <Backdrop kind={(((mediaKind as string) === "backdrop") ? "image" : "none")} alt={title} />
+      {actions?.cta ? (
+        <>
+          {(actions?.mode === "form") ? (
+            <Box
+              className={cn("w-full max-w-xl", (((layout as string) === "centered") ? "mx-auto" : ""))}
+              data-testid="email-form"
+            >
+              <Label htmlFor={tpl("{0}-email", id)} className="sr-only">
+                {actions?.emailLabel}
+              </Label>
+              <Group gap="2" align="start" className="w-full flex-wrap">
+                <Input
+                  type="text"
+                  name="prompt"
+                  className="min-w-0 flex-1"
+                  placeholder={actions?.emailLabel}
+                  id={tpl("{0}-email", id)}
+                  data-testid="field"
+                />
+                <Button variant="default" size="default" href={actions?.href} data-testid="submit">
+                  {actions?.cta}
+                </Button>
+              </Group>
+            </Box>
+          ) : (
+            <ActionGroup
+              primary={actions?.cta}
+              primaryHref={actions?.href}
+              secondary={((actions?.mode === "two") ? actions?.secondary : undefined)}
+              secondaryHref={actions?.secondaryHref}
+              align={(((layout as string) === "centered") ? "center" : "start")}
+            />
+          )}
+        </>
+      ) : null}
+      {(topics && ((topics?.length ?? 0) > 0)) ? (
+        <TopicChips topics={topics} />
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/hero-classic.types.ts b/packages/react/ui/src/blocks/hero-classic.types.ts
new file mode 100644
index 0000000..dd95f46
--- /dev/null
+++ b/packages/react/ui/src/blocks/hero-classic.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+
+import type { CodeLine } from "../components/code-window.types";
+
+export type HeroMedia = {
+  /** what the hero shows besides the text */
+  kind?: "none" | "image" | "backdrop" | "code" | "cluster";
+  /** side of the media in the split layout */
+  side?: "end" | "start";
+  /** title of the code window */
+  codeTitle?: string;
+  /** prompt line of the code window */
+  prompt?: string;
+  /** lines of the code window */
+  lines?: CodeLine[];
+};
diff --git a/packages/react/ui/src/blocks/hero-prompt.tsx b/packages/react/ui/src/blocks/hero-prompt.tsx
new file mode 100644
index 0000000..0872eb7
--- /dev/null
+++ b/packages/react/ui/src/blocks/hero-prompt.tsx
@@ -0,0 +1,112 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+/**
+ * A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic
+ * pills.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { ActionGroup } from "../components/action-group";
+import { HeroBadge } from "../components/hero-badge";
+import { HeroHead } from "../components/hero-head";
+import { PromptComposer } from "../components/prompt-composer";
+import { TopicChips } from "../components/topic-chips";
+import { WeightedTitle } from "../components/weighted-title";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { HeroComposer, HeroNav } from "./hero-prompt.types";
+import type { ActionSet } from "../components/cta-actions.types";
+import type { NavLink } from "./nav-bar.types";
+import type { Topic } from "../components/topic-chips.types";
+
+export type HeroPromptProps = {
+  title: string;
+  level?: 1 | 2;
+  badge?: string;
+  badgeMark?: string;
+  actions?: ActionSet;
+  composer?: HeroComposer;
+  nav?: HeroNav;
+  topics?: Topic[];
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function HeroPrompt({
+  title,
+  level = 1,
+  badge,
+  badgeMark,
+  actions,
+  composer,
+  nav,
+  topics,
+  density = "roomy",
+  landmarkLabel,
+}: HeroPromptProps) {
+  return (
+    <Block
+      tag="section"
+      className={cn(
+        "flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70",
+        defaults.hero.band
+      )}
+      aria-labelledby={(landmarkLabel ? undefined : "home-hero-title")}
+      data-testid="section"
+      data-tone="inverse"
+      data-density={density}
+      data-chrome="nav"
+      aria-label={landmarkLabel}
+    >
+      <Container className={cn("mx-auto w-full px-8", defaults.hero.container)} data-slot="container">
+        <Stack gap="0" align="stretch">
+          <HeroHead
+            brand={nav?.brand}
+            links={nav?.links}
+            current={nav?.current}
+            login={nav?.login}
+            loginHref={nav?.loginHref}
+            skip={nav?.skip}
+            navLabel={nav?.label}
+            cta={actions?.cta}
+            href={actions?.href}
+            landmarkLabel={landmarkLabel}
+          />
+          <Stack
+            gap="0"
+            align="center"
+            className={cn("mx-auto w-full pt-24 pb-16", defaults.hero.column)}
+            data-testid="hero-column"
+          >
+            {badge ? (
+              <HeroBadge label={badge} mark={badgeMark} />
+            ) : null}
+            <WeightedTitle id="home-hero-title" title={title} weights={defaults.hero.titleWeights} level={level} />
+            {(actions?.mode === "form") ? (
+              <PromptComposer
+                label={actions?.emailLabel}
+                attachLabel={composer?.attachLabel}
+                modelLabel={composer?.modelLabel}
+                send={actions?.cta}
+                href={actions?.href}
+              />
+            ) : actions?.cta ? (
+              <ActionGroup
+                primary={actions?.cta}
+                primaryHref={actions?.href}
+                secondary={((actions?.mode === "two") ? actions?.secondary : undefined)}
+                secondaryHref={actions?.secondaryHref}
+                align={(true ? "center" : "start")}
+              />
+            ) : null}
+            {(topics && ((topics?.length ?? 0) > 0)) ? (
+              <TopicChips topics={topics} tone="inverse" />
+            ) : null}
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/hero-prompt.types.ts b/packages/react/ui/src/blocks/hero-prompt.types.ts
new file mode 100644
index 0000000..816d54f
--- /dev/null
+++ b/packages/react/ui/src/blocks/hero-prompt.types.ts
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type HeroComposer = {
+  /** attachment chip label */
+  attachLabel?: string;
+  /** model pill label */
+  modelLabel?: string;
+};
+
+export type HeroNav = {
+  /** brand word of the head row */
+  brand?: string;
+  /** menu links of the head row */
+  links?: NavLink[];
+  /** id of the current link */
+  current?: string;
+  login?: string;
+  loginHref?: string;
+  /** skip link text */
+  skip?: string;
+  /** accessible name of the menu */
+  label?: string;
+};
diff --git a/packages/react/ui/src/blocks/hero-split.tsx b/packages/react/ui/src/blocks/hero-split.tsx
new file mode 100644
index 0000000..b777ece
--- /dev/null
+++ b/packages/react/ui/src/blocks/hero-split.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/hero-split.ts
+/**
+ * A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes:
+ * extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote
+ * over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with
+ * captions, plans: two plan cards on the picture), mediaSide, tone.
+ */
+import { type ReactNode } from "react";
+import { ActionGroup } from "../components/action-group";
+import { HeroSplitExtras } from "../components/hero-split-extras";
+import { HeroSplitMedia } from "../components/hero-split-media";
+import { SectionFrame } from "../components/section-frame";
+import type { HeroContent } from "./hero-split.types";
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+import type { Quote } from "./testimonial-grid.types";
+import type { OfferCard } from "./store-hero.types";
+import type { Plan } from "./pricing-card.types";
+import type { LinkActions } from "./error-page.types";
+
+export type HeroSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  actions: LinkActions;
+  content: HeroContent;
+  extra?: "stats" | "avatars" | "minis" | "quote" | "none";
+  media?: "picture" | "card" | "grid" | "plans";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function HeroSplit({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 1,
+  actions,
+  content,
+  extra = "stats",
+  media = "picture",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: HeroSplitProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge, level }}
+      layout="split"
+      media={{ show: true, side: mediaSide }}
+      tone={tone}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <HeroSplitMedia content={content} alt={title} media={media} />
+      )}
+    >
+      <HeroSplitExtras content={content} extra={extra} />
+      <ActionGroup
+        primary={actions.cta}
+        primaryHref={actions.href}
+        secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+        secondaryHref={actions.secondaryHref}
+      />
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/hero-split.types.ts b/packages/react/ui/src/blocks/hero-split.types.ts
new file mode 100644
index 0000000..6216eb8
--- /dev/null
+++ b/packages/react/ui/src/blocks/hero-split.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/hero-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+import type { Quote } from "./testimonial-grid.types";
+import type { OfferCard } from "./store-hero.types";
+import type { Plan } from "./pricing-card.types";
+
+export type HeroContent = {
+  stats: Stat[];
+  features: Feature[];
+  people: Quote[];
+  plans: Plan[];
+  proof: string;
+  card: OfferCard;
+};
diff --git a/packages/react/ui/src/blocks/icon-wall.tsx b/packages/react/ui/src/blocks/icon-wall.tsx
new file mode 100644
index 0000000..553b122
--- /dev/null
+++ b/packages/react/ui/src/blocks/icon-wall.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the
+ * label, chip: icon beside it), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn, fitCols } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type IconWallProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  cols?: "3" | "4" | "6";
+  item?: "tile" | "chip";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function IconWall({
+  id,
+  title,
+  features,
+  empty = "",
+  cols = "4",
+  item = "tile",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: IconWallProps) {
+  const askedCols =
+    ((item as string) === "chip") && ((cols as string) === "6") ? "2-6"
+    : (cols as string) === "2" ? "2"
+    : (cols as string) === "3" ? "2-3"
+    : (cols as string) === "4" ? "2-4"
+    : "3-6";
+  const wallCols = fitCols(askedCols, (features?.length ?? 0));
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Grid cols={wallCols} className="gap-4" data-testid="items">
+          {(features ?? []).map((f) => (
+            <Box key={f.id}
+              className={cn(
+                "flex items-center gap-2",
+                "rounded bg-card inset-ring inset-ring-border",
+                (
+                  (item as string) === "tile" ? cn("flex-col justify-center text-center", (((density as string) === "compact") ? "p-4" : "p-6"))
+                  : "px-4 py-2"
+                )
+              )}
+              data-testid="item"
+            >
+              <LucideIcon name={f.icon} size={(((item as string) === "tile") ? 24 : 16)} />
+              <Text size="sm" weight="semibold">
+                {f.title}
+              </Text>
+            </Box>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/job-board.tsx b/packages/react/ui/src/blocks/job-board.tsx
new file mode 100644
index 0000000..730bba2
--- /dev/null
+++ b/packages/react/ui/src/blocks/job-board.tsx
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+/**
+ * Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place,
+ * the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide),
+ * tone.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { JobCards } from "../components/job-cards";
+import { MenuEntry } from "../components/menu-entry";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Job, Department, JobLabels } from "./job-board.types";
+
+export type JobBoardProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  jobs: Job[];
+  departments: Department[];
+  labels: JobLabels;
+  layout?: "grid" | "grouped" | "table";
+  salary?: "show" | "hide";
+  tone?: "default" | "muted";
+  empty?: string;
+  landmarkLabel?: string;
+};
+
+export function JobBoard({
+  id,
+  title,
+  lead = "",
+  jobs,
+  departments,
+  labels,
+  layout = "grid",
+  salary = "hide",
+  tone = "default",
+  empty = "",
+  landmarkLabel,
+}: JobBoardProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      measure={(((layout as string) === "grouped") ? "3xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((jobs?.length ?? 0) === 0) ? (
+        <EmptyState icon="briefcase" title={empty} />
+      ) : ((layout as string) === "grouped") ? (
+        <Stack gap="8" align="stretch" data-testid="groups">
+          {(departments ?? []).map((d) => (
+            <Stack key={d.id} gap="2" align="stretch" data-testid="group">
+              <Group gap="4" align="baseline" justify="between">
+                <Title as={3} size="lg" weight="bold">
+                  {d.name}
+                </Title>
+                <Text size="xs" className="text-muted-foreground">
+                  {tpl(labels.count, (jobs.filter((i) => !d.id || i["dept"] === d.id)?.length ?? 0))}
+                </Text>
+              </Group>
+              <List tag="ul" className="flex flex-col">
+                {(jobs.filter((i) => !d.id || i["dept"] === d.id) ?? []).map((j) => (
+                  <ListItem key={j.id}
+                    className="flex flex-wrap items-center justify-between gap-4 border-b border-border py-4"
+                    data-testid="item"
+                  >
+                    <Stack gap="0">
+                      <MenuEntry href={j.href} className="font-medium">
+                        {j.title}
+                      </MenuEntry>
+                      <Text size="xs" className="text-muted-foreground">
+                        {tpl("{0}, {1}", j.location, j.type)}
+                      </Text>
+                    </Stack>
+                    <Badge variant="outline" size="default">
+                      {j.type}
+                    </Badge>
+                  </ListItem>
+                ))}
+              </List>
+            </Stack>
+          ))}
+        </Stack>
+      ) : (
+        <JobCards jobs={jobs} departments={departments} labels={labels} layout={layout} salary={salary} />
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/job-board.types.ts b/packages/react/ui/src/blocks/job-board.types.ts
new file mode 100644
index 0000000..94f02f7
--- /dev/null
+++ b/packages/react/ui/src/blocks/job-board.types.ts
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Job = {
+  id: string;
+  title: string;
+  dept: string;
+  location: string;
+  type: string;
+  salary: string;
+  posted: string;
+  href?: string;
+};
+
+export type Department = {
+  id: string;
+  name: string;
+};
+
+export type JobLabels = {
+  apply: string;
+  caption: string;
+  role: string;
+  team: string;
+  location: string;
+  type: string;
+  salary: string;
+  count: string;
+};
diff --git a/packages/react/ui/src/blocks/kanban-board.tsx b/packages/react/ui/src/blocks/kanban-board.tsx
new file mode 100644
index 0000000..c383590
--- /dev/null
+++ b/packages/react/ui/src/blocks/kanban-board.tsx
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+/**
+ * Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the
+ * person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card
+ * between lanes is a port contract.
+ */
+import { type ReactNode } from "react";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { Pill } from "../components/pill";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { Lane, BoardCard } from "./kanban-board.types";
+
+export type KanbanBoardProps = {
+  id: string;
+  title: string;
+  lanes: Lane[];
+  empty?: string;
+  cards: BoardCard[];
+  countLabel: string;
+  card?: "simple" | "detail";
+  cols?: "2" | "3";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function KanbanBoard({
+  id,
+  title,
+  lanes,
+  empty = "",
+  cards,
+  countLabel,
+  card = "detail",
+  cols = "3",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: KanbanBoardProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((lanes?.length ?? 0) === 0) ? (
+        <EmptyState icon="kanban" title={empty} />
+      ) : (
+        <Grid cols={(((cols as string) === "2") ? "1-2" : "1-3")} className="items-start gap-4" data-testid="lanes">
+          {(lanes ?? []).map((lane) => (
+            <Stack key={lane.id} gap="4" align="stretch" className="rounded bg-muted p-4" data-testid="lane">
+              <Group gap="2" align="center" justify="between">
+                <Title as={3} size="base" weight="bold">
+                  {lane.title}
+                </Title>
+                <Text size="xs" className="text-muted-foreground">
+                  {tpl(countLabel, (cards.filter((i) => !lane.key || i["lane"] === lane.key)?.length ?? 0))}
+                </Text>
+              </Group>
+              <List className="m-0 flex list-none flex-col gap-2 p-0">
+                {(cards.filter((i) => !lane.key || i["lane"] === lane.key) ?? []).map((c) => (
+                  <ListItem key={c.id}
+                    className={cn(
+                      "flex flex-col rounded bg-card inset-ring inset-ring-border",
+                      (((density as string) === "compact") ? "gap-2 p-2" : "gap-2 p-4")
+                    )}
+                    data-testid="item"
+                  >
+                    <Text size="sm" weight="semibold">
+                      {c.title}
+                    </Text>
+                    {((card as string) === "detail") ? (
+                      <Group gap="2" align="center" justify="between" className="flex-wrap">
+                        <Pill tone="blue" icon="tag">
+                          {c.tag}
+                        </Pill>
+                        <Text size="xs" className="text-muted-foreground">
+                          {c.who}
+                        </Text>
+                      </Group>
+                    ) : null}
+                  </ListItem>
+                ))}
+              </List>
+            </Stack>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/kanban-board.types.ts b/packages/react/ui/src/blocks/kanban-board.types.ts
new file mode 100644
index 0000000..ec9ee64
--- /dev/null
+++ b/packages/react/ui/src/blocks/kanban-board.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+export type Lane = {
+  id: string;
+  key: string;
+  title: string;
+};
+
+export type BoardCard = {
+  id: string;
+  lane: string;
+  title: string;
+  tag: string;
+  who: string;
+};
diff --git a/packages/react/ui/src/blocks/logo-cloud.tsx b/packages/react/ui/src/blocks/logo-cloud.tsx
new file mode 100644
index 0000000..5d76b28
--- /dev/null
+++ b/packages/react/ui/src/blocks/logo-cloud.tsx
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/**
+ * A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row),
+ * columns (2, 3, 4), item (name, icon only, tile), density, tone.
+ */
+import { type ReactNode } from "react";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { LogoRibbon } from "../blocks/logo-ribbon";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Logo } from "./logo-cloud.types";
+
+export type LogoCloudProps = {
+  id: string;
+  title: string;
+  logos: Logo[];
+  empty?: string;
+  layout?: "grid" | "row";
+  cols?: "2" | "3" | "4";
+  item?: "name" | "icon" | "tile";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function LogoCloud({
+  id,
+  title,
+  logos,
+  empty = "",
+  layout = "grid",
+  cols = "4",
+  item = "name",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: LogoCloudProps) {
+  return (
+    <>
+      {((logos?.length ?? 0) === 0) ? (
+        <SectionFrame id={id} title={title} tone={tone} density={density} align="center" landmarkLabel={landmarkLabel}>
+          <EmptyState icon="building-2" title={empty} />
+        </SectionFrame>
+      ) : ((layout as string) === "row") ? (
+        <LogoRibbon id={id} title={title} logos={logos} tone={tone} density={density} landmarkLabel={landmarkLabel} />
+      ) : (
+        <SectionFrame id={id} title={title} tone={tone} density={density} align="center" landmarkLabel={landmarkLabel}>
+          <Grid
+            cols={
+              (cols as string) === "2" ? "2"
+              : (cols as string) === "3" ? "2-3"
+              : (cols as string) === "4" ? "2-4"
+              : "3-6"
+            }
+            className="gap-4"
+            data-testid="items"
+          >
+            {(logos ?? []).map((logo) => (
+              <Group key={logo.id}
+                gap="2"
+                align="center"
+                justify="center"
+                className={cn(
+                  "text-muted-foreground",
+                  (((item as string) === "tile") ? "flex-col rounded p-4 inset-ring inset-ring-border" : "")
+                )}
+                data-testid="item"
+              >
+                <LucideIcon name={logo.icon} size={24} />
+                <Text size="sm" weight="semibold" className={(((item as string) === "icon") ? "sr-only" : "")}>
+                  {logo.name}
+                </Text>
+              </Group>
+            ))}
+          </Grid>
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/logo-cloud.types.ts b/packages/react/ui/src/blocks/logo-cloud.types.ts
new file mode 100644
index 0000000..e2e2d33
--- /dev/null
+++ b/packages/react/ui/src/blocks/logo-cloud.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Logo = {
+  id: string;
+  name: string;
+  icon: string;
+};
diff --git a/packages/react/ui/src/blocks/logo-ribbon.tsx b/packages/react/ui/src/blocks/logo-ribbon.tsx
new file mode 100644
index 0000000..39f3eef
--- /dev/null
+++ b/packages/react/ui/src/blocks/logo-ribbon.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/** A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset. */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Title } from "../primitives/title/title";
+import { LogoSlot } from "../components/logo-slot";
+import { SectionFrame } from "../components/section-frame";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Logo } from "./logo-cloud.types";
+
+export type LogoRibbonProps = {
+  id: string;
+  title: string;
+  logos: Logo[];
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function LogoRibbon({
+  id,
+  title,
+  logos,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: LogoRibbonProps) {
+  return (
+    <SectionFrame
+      id={id}
+      tone={tone}
+      density={density}
+      measure="fill"
+      align="center"
+      className="py-0"
+      landmarkLabel={landmarkLabel}
+    >
+      <Stack gap="6" align="center" data-testid="logos-block">
+        <Title as={2} size="xl" weight="semibold" className="leading-7" id={(id + "-title")}>
+          {title}
+        </Title>
+        <Group
+          gap="0"
+          justify="center"
+          align="start"
+          className={cn("flex w-full flex-wrap", defaults.logos.row)}
+          data-testid="items"
+        >
+          {(logos ?? []).map((logo) => (
+            <LogoSlot key={logo.id} name={logo.name} icon={logo.icon} />
+          ))}
+        </Group>
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/media-list.tsx b/packages/react/ui/src/blocks/media-list.tsx
new file mode 100644
index 0000000..fe4f412
--- /dev/null
+++ b/packages/react/ui/src/blocks/media-list.tsx
@@ -0,0 +1,123 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/media-list.ts
+/**
+ * A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures
+ * and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts,
+ * contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.
+ */
+import { type ReactNode } from "react";
+import { ActionGroup } from "../components/action-group";
+import { MediaContacts } from "../components/media-contacts";
+import { MediaFigures } from "../components/media-figures";
+import { MediaFrame } from "../components/media-frame";
+import { MediaPosts } from "../components/media-posts";
+import { MediaReview } from "../components/media-review";
+import { MediaSteps } from "../components/media-steps";
+import { MediaTopics } from "../components/media-topics";
+import { SectionFrame } from "../components/section-frame";
+import type { MediaExtras, MediaListLabels } from "./media-list.types";
+import type { Stat } from "./stats-band.types";
+import type { Step } from "./steps-list.types";
+import type { Post } from "./post-card.types";
+import type { Category } from "./category-nav.types";
+import type { Feature } from "./feature-grid.types";
+import type { Review } from "./review-list.types";
+import type { LinkActions } from "./error-page.types";
+
+export type MediaListProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  extras: MediaExtras;
+  labels: MediaListLabels;
+  actions: LinkActions;
+  layout?: "figures" | "proof" | "steps" | "posts" | "topics" | "contact";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function MediaList({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  extras,
+  labels,
+  actions,
+  layout = "figures",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: MediaListProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge }}
+      tone={tone}
+      layout="split"
+      media={{ show: true, side: mediaSide }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame
+          alt={title}
+          ratio={((((layout as string) === "steps") || ((layout as string) === "topics")) ? "1/1" : "4/3")}
+        />
+      )}
+    >
+      {(((layout as string) === "figures") || ((layout as string) === "proof")) ? (
+        <>
+          {((extras.stats?.length ?? 0) > 0) ? (
+            <MediaFigures extras={extras} mode={(((layout as string) === "proof") ? "row" : "grid")} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "proof") ? (
+        <>
+          {((extras.reviews?.length ?? 0) > 0) ? (
+            <MediaReview extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "steps") ? (
+        <>
+          {((extras.steps?.length ?? 0) > 0) ? (
+            <MediaSteps extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "posts") ? (
+        <>
+          {((extras.posts?.length ?? 0) > 0) ? (
+            <MediaPosts extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "topics") ? (
+        <>
+          {((extras.topics?.length ?? 0) > 0) ? (
+            <MediaTopics extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "contact") ? (
+        <>
+          {((extras.channels?.length ?? 0) > 0) ? (
+            <MediaContacts extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) !== "contact") ? (
+        <ActionGroup
+          primary={actions.cta}
+          primaryHref={actions.href}
+          secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+          secondaryHref={actions.secondaryHref}
+        />
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/media-list.types.ts b/packages/react/ui/src/blocks/media-list.types.ts
new file mode 100644
index 0000000..54863b7
--- /dev/null
+++ b/packages/react/ui/src/blocks/media-list.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/media-list.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Step } from "./steps-list.types";
+import type { Post } from "./post-card.types";
+import type { Category } from "./category-nav.types";
+import type { Feature } from "./feature-grid.types";
+import type { Review } from "./review-list.types";
+
+export type MediaExtras = {
+  stats: Stat[];
+  steps: Step[];
+  posts: Post[];
+  topics: Category[];
+  channels: Feature[];
+  reviews: Review[];
+};
+
+export type MediaListLabels = {
+  list: string;
+  count: string;
+  minutes: string;
+  featured: string;
+  rating: string;
+  figures: string;
+};
diff --git a/packages/react/ui/src/blocks/mega-menu.tsx b/packages/react/ui/src/blocks/mega-menu.tsx
new file mode 100644
index 0000000..2807734
--- /dev/null
+++ b/packages/react/ui/src/blocks/mega-menu.tsx
@@ -0,0 +1,140 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional
+ * promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed),
+ * cols (2, 3), promo (none, card).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { MegaGroup } from "./mega-menu.types";
+import type { NavLink } from "./nav-bar.types";
+
+export type MegaMenuProps = {
+  label: string;
+  brand: string;
+  brandHref?: string;
+  trigger: string;
+  links: NavLink[];
+  groups: MegaGroup[];
+  promoTitle?: string;
+  promoText?: string;
+  panel?: "open" | "closed";
+  cols?: "2" | "3";
+  promo?: "none" | "card";
+  landmarkLabel?: string;
+};
+
+export function MegaMenu({
+  label,
+  brand,
+  brandHref,
+  trigger,
+  links,
+  groups,
+  promoTitle,
+  promoText,
+  panel = "open",
+  cols = "3",
+  promo = "none",
+  landmarkLabel,
+}: MegaMenuProps) {
+  return (
+    <>
+      <Block
+        tag="header"
+        className="relative border-b border-border bg-background"
+        data-testid="mega-menu"
+        aria-label={landmarkLabel}
+      >
+        <Container
+          className={cn("mx-auto w-full max-w-6xl px-4", "flex flex-wrap items-center gap-6 py-4")}
+          data-slot="container"
+        >
+          <MenuEntry href={brandHref} className="text-lg font-medium" testid="brand">
+            {brand}
+          </MenuEntry>
+          <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)} className="flex-1">
+            <Group gap="4" align="center" className="flex-wrap">
+              <ButtonPlain
+                type="button"
+                className="inline-flex items-center gap-2 text-sm font-semibold"
+                aria-expanded={(((panel as string) === "open") ? "true" : "false")}
+                data-testid="mega-trigger"
+              >
+                {trigger}
+                <LucideIcon name="chevron-down" size={16} />
+              </ButtonPlain>
+              {(links ?? []).map((l) => (
+                <MenuEntry key={l.id} href={l.href} className="text-sm" current={(l.id === "")} testid="nav-link">
+                  {l.name}
+                </MenuEntry>
+              ))}
+            </Group>
+          </NavBlock>
+        </Container>
+      </Block>
+      {((panel as string) === "open") ? (
+        <Box className="border-t border-border bg-card" data-testid="mega-panel">
+          <Container
+            className={cn(
+              "mx-auto w-full max-w-6xl px-4",
+              "grid gap-8 py-6",
+              (((promo as string) === "card") ? "md:grid-cols-[1fr_16rem]" : "")
+            )}
+            data-slot="container"
+          >
+            {((groups?.length ?? 0) > 0) ? (
+              <Grid cols={(((cols as string) === "2") ? "1-2" : "1-3")} className="gap-6" data-testid="items">
+                {(groups ?? []).map((g) => (
+                  <Stack key={g.id} gap="2" data-testid="item">
+                    <Group gap="2" align="center">
+                      <LucideIcon name={g.icon} size={16} />
+                      <Text size="sm" weight="semibold">
+                        {g.title}
+                      </Text>
+                    </Group>
+                    <List className="m-0 flex list-none flex-col gap-2 p-0">
+                      {(g.links ?? []).map((item) => (
+                        <ListItem key={item.id}>
+                          <MenuEntry href={item.href} className="text-sm text-muted-foreground">
+                            {item.name}
+                          </MenuEntry>
+                        </ListItem>
+                      ))}
+                    </List>
+                  </Stack>
+                ))}
+              </Grid>
+            ) : null}
+            {((promo as string) === "card") ? (
+              <Stack gap="2" className="rounded bg-card inset-ring inset-ring-border p-4" data-testid="promo">
+                <MediaFrame alt={(promoTitle ?? "")} ratio="4/3" />
+                <Text size="base" weight="semibold">
+                  {promoTitle}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {promoText}
+                </Text>
+              </Stack>
+            ) : null}
+          </Container>
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/mega-menu.types.ts b/packages/react/ui/src/blocks/mega-menu.types.ts
new file mode 100644
index 0000000..8177392
--- /dev/null
+++ b/packages/react/ui/src/blocks/mega-menu.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type MegaGroup = {
+  id: string;
+  title: string;
+  icon: string;
+  links: NavLink[];
+  href?: string;
+};
diff --git a/packages/react/ui/src/blocks/metric-row.tsx b/packages/react/ui/src/blocks/metric-row.tsx
new file mode 100644
index 0000000..56c4c59
--- /dev/null
+++ b/packages/react/ui/src/blocks/metric-row.tsx
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes:
+ * columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { StatTile } from "../components/stat-tile";
+import type { Metric } from "./metric-row.types";
+
+export type MetricRowProps = {
+  id: string;
+  title: string;
+  metrics: Metric[];
+  empty?: string;
+  cols?: "2" | "4";
+  item?: "tile" | "compact";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function MetricRow({
+  id,
+  title,
+  metrics,
+  empty = "",
+  cols = "4",
+  item = "tile",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: MetricRowProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((metrics?.length ?? 0) === 0) ? (
+        <EmptyState icon="gauge" title={empty} />
+      ) : (
+        <Grid cols={(((cols as string) === "2") ? "1-2" : "1-4")} className="gap-4" data-testid="items">
+          {(metrics ?? []).map((m) => (
+            <Fragment key={m.id}>
+              {((item as string) === "tile") ? (
+                <Box data-testid="item">
+                  <StatTile label={m.label} value={m.value} icon={m.icon} hint={m.hint} />
+                </Box>
+              ) : (
+                <Stack gap="0" className="rounded bg-card p-4 inset-ring inset-ring-border" data-testid="item">
+                  <Group gap="2" align="center" className="text-muted-foreground">
+                    <LucideIcon name={m.icon} size={16} />
+                    <Text size="xs">
+                      {m.label}
+                    </Text>
+                  </Group>
+                  <Text size="2xl" weight="bold">
+                    {m.value}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {m.hint}
+                  </Text>
+                </Stack>
+              )}
+            </Fragment>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/metric-row.types.ts b/packages/react/ui/src/blocks/metric-row.types.ts
new file mode 100644
index 0000000..3537e9f
--- /dev/null
+++ b/packages/react/ui/src/blocks/metric-row.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Metric = {
+  id: string;
+  label: string;
+  value: string;
+  icon: string;
+  hint: string;
+};
diff --git a/packages/react/ui/src/blocks/milestone-timeline.tsx b/packages/react/ui/src/blocks/milestone-timeline.tsx
new file mode 100644
index 0000000..ea05796
--- /dev/null
+++ b/packages/react/ui/src/blocks/milestone-timeline.tsx
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+/**
+ * Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line
+ * beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone,
+ * density.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import type { Milestone } from "./milestone-timeline.types";
+
+export type MilestoneTimelineProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  milestones: Milestone[];
+  empty?: string;
+  layout?: "split" | "stacked" | "row";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function MilestoneTimeline({
+  id,
+  title,
+  lead = "",
+  milestones,
+  empty = "",
+  layout = "split",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: MilestoneTimelineProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      density={density}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "split"), side: "start", align: "start" }}
+      measure={(((layout as string) === "stacked") ? "2xl" : "default")}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="3/4" />
+      )}
+    >
+      {((milestones?.length ?? 0) === 0) ? (
+        <EmptyState icon="milestone" title={empty} />
+      ) : (
+        <List
+          tag="ol"
+          className={
+            (layout as string) === "row" ? "grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4"
+            : "flex flex-col gap-8 border-l border-border"
+          }
+          data-testid="items"
+        >
+          {(milestones ?? []).map((m) => (
+            <ListItem key={m.id}
+              className={
+                (layout as string) === "row" ? "relative flex flex-col gap-2 pt-6"
+                : "relative flex flex-col gap-2 pl-6"
+              }
+              data-testid="item"
+            >
+              <Inline
+                className={
+                  (layout as string) === "row" ? "absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary"
+                  : "absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary"
+                }
+                aria-hidden="true"
+              />
+              <Group gap="2" align="center">
+                <Text size="sm" weight="semibold">
+                  {m.date}
+                </Text>
+                <Badge variant="outline" size="sm">
+                  {m.tag}
+                </Badge>
+              </Group>
+              <Title as={3} size="lg" weight="bold">
+                {m.title}
+              </Title>
+              <Text size="sm" className="text-muted-foreground">
+                {m.text}
+              </Text>
+            </ListItem>
+          ))}
+        </List>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/milestone-timeline.types.ts b/packages/react/ui/src/blocks/milestone-timeline.types.ts
new file mode 100644
index 0000000..76e6bea
--- /dev/null
+++ b/packages/react/ui/src/blocks/milestone-timeline.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Milestone = {
+  id: string;
+  date: string;
+  title: string;
+  text: string;
+  tag: string;
+};
diff --git a/packages/react/ui/src/blocks/nav-bar.tsx b/packages/react/ui/src/blocks/nav-bar.tsx
new file mode 100644
index 0000000..2fa49f2
--- /dev/null
+++ b/packages/react/ui/src/blocks/nav-bar.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the
+ * middle with the links on both sides; search: a search field with its shortcut in the middle), over (none,
+ * media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark
+ * hero band). Turning solid on scroll is a port contract.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { MenuEntry } from "../components/menu-entry";
+import { NavActions } from "../components/nav-actions";
+import { NavBarMenu } from "../components/nav-bar-menu";
+import { NavBlock } from "../components/nav-block";
+import { NavLinks } from "../components/nav-links";
+import { OverMedia } from "../components/over-media";
+import { SearchPalette } from "../components/search-palette";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { NavLink, NavBarActions, NavSearch } from "./nav-bar.types";
+
+export type NavBarProps = {
+  label: string;
+  brand: string;
+  brandHref?: string;
+  links: NavLink[];
+  current?: string;
+  actions?: NavBarActions;
+  search: NavSearch;
+  tone?: "default" | "inverse";
+  layout?: "inline" | "split" | "search";
+  over?: "none" | "media";
+  skip?: string;
+  landmarkLabel?: string;
+  onTheme?: () => void;
+};
+
+export function NavBar({
+  label,
+  brand,
+  brandHref,
+  links,
+  current = "",
+  actions,
+  search,
+  tone = "default",
+  layout = "inline",
+  over = "none",
+  skip,
+  landmarkLabel,
+  onTheme,
+}: NavBarProps) {
+  return (
+    <Block
+      tag="header"
+      className={cn(
+        "relative",
+        (
+          (tone as string) === "inverse" ? "border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background"
+          : "border-b border-border bg-background"
+        ),
+        (((over as string) === "media") ? "isolate overflow-hidden border-0 bg-transparent" : "")
+      )}
+      data-testid="nav-bar"
+      data-layout={layout}
+      data-tone={tone}
+      aria-label={landmarkLabel}
+    >
+      <OverMedia on={((over as string) === "media")} alt={brand} />
+      {skip ? (
+        <LinkPlain
+          href="#main-content"
+          className={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+            "focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border"}
+          data-testid="skip-link"
+        >
+          {skip}
+        </LinkPlain>
+      ) : null}
+      <Container className="mx-auto w-full max-w-6xl px-4" data-slot="container">
+        <Box className={cn("flex flex-wrap items-center justify-between gap-4", "py-4")}>
+          {((layout as string) === "split") ? (
+            <NavBlock
+              label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)}
+              className="w-full"
+              testid="site-nav"
+            >
+              <Grid cols="1-3" className="w-full items-center gap-4">
+                <Box className="md:justify-self-start">
+                  <NavLinks links={links} current={current} side="left" />
+                </Box>
+                <Box className="text-center">
+                  <MenuEntry href={brandHref} className="text-lg font-medium" testid="brand">
+                    {brand}
+                  </MenuEntry>
+                </Box>
+                <Group gap="4" align="center" justify="end" className="flex-wrap md:justify-self-end">
+                  <Box>
+                    <NavLinks links={links} current={current} side="right" />
+                  </Box>
+                  <NavActions
+                    login={actions?.login}
+                    loginHref={actions?.loginHref}
+                    cta={actions?.cta}
+                    ctaHref={actions?.href}
+                    actions={actions?.mode}
+                    tone={tone}
+                    themeLabel={actions?.themeLabel}
+                    onTheme={() => onTheme?.()}
+                  />
+                </Group>
+              </Grid>
+            </NavBlock>
+          ) : (
+            <>
+              <MenuEntry href={brandHref} className="text-lg font-medium" testid="brand">
+                {brand}
+              </MenuEntry>
+              {((layout as string) === "search") ? (
+                <SearchPalette label={search.label} shortcut={search.shortcut} />
+              ) : null}
+              <NavBarMenu label={label} links={links} current={current} landmarkLabel={landmarkLabel} />
+              <NavActions
+                login={actions?.login}
+                loginHref={actions?.loginHref}
+                cta={actions?.cta}
+                ctaHref={actions?.href}
+                actions={actions?.mode}
+                tone={tone}
+                themeLabel={actions?.themeLabel}
+                onTheme={() => onTheme?.()}
+              />
+            </>
+          )}
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/nav-bar.types.ts b/packages/react/ui/src/blocks/nav-bar.types.ts
new file mode 100644
index 0000000..459db5a
--- /dev/null
+++ b/packages/react/ui/src/blocks/nav-bar.types.ts
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+export type NavLink = {
+  id: string;
+  name: string;
+  icon: string;
+  href?: string;
+};
+
+export type NavBarActions = {
+  /** cta: show the call to action */
+  mode?: "none" | "cta";
+  /** text of the call to action */
+  cta?: string;
+  /** href of the call to action */
+  href?: string;
+  /** text of the login link; none: no login */
+  login?: string;
+  /** href of the login link; none: a button with no address */
+  loginHref?: string;
+  /** text of the theme button; none: no button */
+  themeLabel?: string;
+};
+
+export type NavSearch = {
+  /** name and placeholder of the search field (layout search) */
+  label: string;
+  /** the keys that open the search, shown in the field */
+  shortcut: string;
+};
diff --git a/packages/react/ui/src/blocks/newsletter-form.tsx b/packages/react/ui/src/blocks/newsletter-form.tsx
new file mode 100644
index 0000000..cebf69d
--- /dev/null
+++ b/packages/react/ui/src/blocks/newsletter-form.tsx
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and
+ * picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start,
+ * center).
+ */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+
+export type NewsletterFormProps = {
+  id: string;
+  title: string;
+  text: string;
+  label: string;
+  submit: string;
+  consent?: string;
+  layout?: "inline" | "stacked" | "split";
+  terms?: "show" | "hide";
+  tone?: "default" | "muted";
+  align?: "start" | "center";
+  landmarkLabel?: string;
+};
+
+export function NewsletterForm({
+  id,
+  title,
+  text,
+  label,
+  submit,
+  consent,
+  layout = "inline",
+  terms = "hide",
+  tone = "default",
+  align = "center",
+  landmarkLabel,
+}: NewsletterFormProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      tone={tone}
+      align={align}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "split") }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="4/3" />
+      )}
+    >
+      <Form
+        method="dialog"
+        className={cn("w-full max-w-md", (((align as string) === "center") ? "mx-auto" : ""))}
+        data-testid="newsletter-form"
+      >
+        <Label htmlFor={tpl("{0}-email", id)} className="sr-only">
+          {label}
+        </Label>
+        <Group
+          gap="2"
+          align="start"
+          className={cn(
+            "w-full",
+            (((layout as string) === "stacked") ? "flex-col items-stretch" : "flex-wrap")
+          )}
+        >
+          <Input type="email" name="email" className="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+          <Button variant="default" size="default" type="submit" data-testid="submit">
+            {submit}
+          </Button>
+        </Group>
+        {(((terms as string) === "show") && consent) ? (
+          <Text size="xs" className="text-muted-foreground" data-testid="consent">
+            {consent}
+          </Text>
+        ) : null}
+      </Form>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/order-summary.tsx b/packages/react/ui/src/blocks/order-summary.tsx
new file mode 100644
index 0000000..4ed1e26
--- /dev/null
+++ b/packages/react/ui/src/blocks/order-summary.tsx
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout
+ * (card, plain), cta (show, hide), note (show, hide), density, tone.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn, fmtMoney } from "../utils";
+import type { SummaryRow, SummaryLabels } from "./order-summary.types";
+
+export type OrderSummaryProps = {
+  id: string;
+  title: string;
+  rows: SummaryRow[];
+  empty?: string;
+  labels: SummaryLabels;
+  layout?: "card" | "plain";
+  cta?: "show" | "hide";
+  note?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function OrderSummary({
+  id,
+  title,
+  rows,
+  empty = "",
+  labels,
+  layout = "card",
+  cta = "show",
+  note = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: OrderSummaryProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} measure="md" landmarkLabel={landmarkLabel}>
+      {((rows?.length ?? 0) === 0) ? (
+        <EmptyState icon="receipt" title={empty} />
+      ) : (
+        <Box
+          className={cn(
+            (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+          )}
+          data-testid="summary"
+        >
+          <Stack gap="4" align="stretch">
+            <List tag="ul" className="flex flex-col gap-4">
+              {(rows ?? []).map((row) => (
+                <ListItem key={row.id}
+                  className={cn(
+                    "flex items-center justify-between gap-4",
+                    (
+                      row.strong ? "border-t border-border pt-4 text-base font-bold"
+                      : "text-sm text-muted-foreground"
+                    )
+                  )}
+                  data-testid="item"
+                >
+                  <Inline>
+                    {row.label}
+                  </Inline>
+                  <Inline>
+                    {fmtMoney(row.amount, row.currency)}
+                  </Inline>
+                </ListItem>
+              ))}
+            </List>
+            {((cta as string) === "show") ? (
+              <Button variant="default" size="default" className="w-full" data-testid="checkout">
+                {labels.checkout}
+              </Button>
+            ) : null}
+            {((note as string) === "show") ? (
+              <Text size="xs" className="text-muted-foreground">
+                {labels.note}
+              </Text>
+            ) : null}
+          </Stack>
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/order-summary.types.ts b/packages/react/ui/src/blocks/order-summary.types.ts
new file mode 100644
index 0000000..5fdaf66
--- /dev/null
+++ b/packages/react/ui/src/blocks/order-summary.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type SummaryRow = {
+  id: string;
+  label: string;
+  amount: number;
+  currency: string;
+  strong: boolean;
+};
+
+export type SummaryLabels = {
+  checkout: string;
+  note: string;
+};
diff --git a/packages/react/ui/src/blocks/order-table.tsx b/packages/react/ui/src/blocks/order-table.tsx
new file mode 100644
index 0000000..0e2d0f1
--- /dev/null
+++ b/packages/react/ui/src/blocks/order-table.tsx
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * The order history as a table or as cards: number, date, items, total and a status pill, with an optional
+ * pager. Axes: layout (table, cards), pager (show, hide), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { OrderRows } from "../components/order-rows";
+import { Pager } from "../components/pager";
+import { Pill } from "../components/pill";
+import { SectionFrame } from "../components/section-frame";
+import { at, fmtMoney, tpl } from "../utils";
+import type { Order, OrderLabels } from "./order-table.types";
+
+export type OrderTableProps = {
+  id: string;
+  title: string;
+  orders: Order[];
+  empty?: string;
+  statuses: Record<string, string>;
+  labels: OrderLabels;
+  layout?: "table" | "cards";
+  pager?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function OrderTable({
+  id,
+  title,
+  orders,
+  empty = "",
+  statuses,
+  labels,
+  layout = "table",
+  pager = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: OrderTableProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((orders?.length ?? 0) === 0) ? (
+        <EmptyState icon="package" title={empty} />
+      ) : (
+        <Stack gap="4" align="stretch">
+          {((layout as string) === "table") ? (
+            <OrderRows orders={orders} statuses={statuses} labels={labels} density={density} />
+          ) : (
+            <Stack gap="4" align="stretch" data-testid="order-cards">
+              {(orders ?? []).map((o) => (
+                <Card key={o.id} variant="default" data-testid="item">
+                  <CardContent className="flex flex-wrap items-center justify-between gap-4">
+                    <Stack gap="0">
+                      <Text size="sm" weight="semibold">
+                        {o.number}
+                      </Text>
+                      <Text size="xs" className="text-muted-foreground">
+                        {o.date}
+                      </Text>
+                    </Stack>
+                    <Text size="sm">
+                      {tpl(labels.itemsCount, o.items)}
+                    </Text>
+                    <Text size="sm" weight="bold">
+                      {fmtMoney(o.total, o.currency)}
+                    </Text>
+                    <Pill
+                      tone={
+                        o.status === "paid" ? "green"
+                        : o.status === "shipped" ? "blue"
+                        : o.status === "pending" ? "amber"
+                        : "gray"
+                      }
+                    >
+                      {at(statuses, o.status)}
+                    </Pill>
+                  </CardContent>
+                </Card>
+              ))}
+            </Stack>
+          )}
+          {((pager as string) === "show") ? (
+            <Pager
+              page={1}
+              pages={3}
+              summary={tpl(labels.summary, 1, 4, 12)}
+              previousLabel={labels.previous}
+              nextLabel={labels.next}
+            />
+          ) : null}
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/order-table.types.ts b/packages/react/ui/src/blocks/order-table.types.ts
new file mode 100644
index 0000000..19b90e6
--- /dev/null
+++ b/packages/react/ui/src/blocks/order-table.types.ts
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Order = {
+  id: string;
+  number: string;
+  date: string;
+  total: number;
+  currency: string;
+  status: string;
+  items: number;
+};
+
+export type OrderLabels = {
+  caption: string;
+  number: string;
+  date: string;
+  items: string;
+  total: string;
+  status: string;
+  itemsCount: string;
+  summary: string;
+  previous: string;
+  next: string;
+};
diff --git a/packages/react/ui/src/blocks/page-intro.tsx b/packages/react/ui/src/blocks/page-intro.tsx
new file mode 100644
index 0000000..6782dad
--- /dev/null
+++ b/packages/react/ui/src/blocks/page-intro.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action.
+ * Axes: align (start, center), tone, density.
+ */
+import { type ReactNode } from "react";
+import { ActionGroup } from "../components/action-group";
+import { SectionFrame } from "../components/section-frame";
+
+export type PageIntroProps = {
+  id: string;
+  title: string;
+  text: string;
+  cta?: string;
+  href?: string;
+  level?: 1 | 2;
+  align?: "start" | "center";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function PageIntro({
+  id,
+  title,
+  text,
+  cta,
+  href,
+  level = 1,
+  align = "start",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: PageIntroProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      heading={{ level }}
+      align={align}
+      tone={tone}
+      density={density}
+      landmarkLabel={landmarkLabel}
+    >
+      {cta ? (
+        <ActionGroup primary={cta} primaryHref={href} align={align} />
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/page-trail.tsx b/packages/react/ui/src/blocks/page-trail.tsx
new file mode 100644
index 0000000..bb85627
--- /dev/null
+++ b/packages/react/ui/src/blocks/page-trail.tsx
@@ -0,0 +1,79 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/page-trail.ts
+/**
+ * The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a
+ * total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts
+ * in two columns), tone.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { PageAside } from "../components/page-aside";
+import { PageCrumbs } from "../components/page-crumbs";
+import { SectionHeader } from "../components/section-header";
+import { cn } from "../utils";
+import type { PageExtras } from "./page-trail.types";
+import type { NavLink } from "./nav-bar.types";
+import type { Stat } from "./stats-band.types";
+
+export type PageTrailProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  label: string;
+  crumbs: NavLink[];
+  extras: PageExtras;
+  aside?: "none" | "figure" | "note" | "facts";
+  level?: 1 | 2;
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function PageTrail({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  label,
+  crumbs,
+  extras,
+  aside = "none",
+  level = 1,
+  tone = "default",
+  landmarkLabel,
+}: PageTrailProps) {
+  const titleId = id + "-title";
+  return (
+    <Block
+      tag="section"
+      className={cn("py-8", (((tone as string) === "muted") ? "bg-muted" : ""))}
+      aria-labelledby={(landmarkLabel ? undefined : titleId)}
+      data-testid="section"
+      data-tone={tone}
+      data-aside={aside}
+      aria-label={landmarkLabel}
+    >
+      <Container className={cn("mx-auto w-full max-w-6xl px-4", "flex flex-col gap-6")} data-slot="container">
+        {((crumbs?.length ?? 0) > 0) ? (
+          <PageCrumbs label={label} crumbs={crumbs} landmarkLabel={landmarkLabel} />
+        ) : null}
+        <Box
+          className={
+            (aside as string) === "facts" ? "grid grid-cols-1 items-center gap-8 lg:grid-cols-2"
+            : "flex flex-col gap-6 md:flex-row md:items-end md:justify-between"
+          }
+        >
+          <Stack gap="4" align="start" className="min-w-0">
+            <SectionHeader titleId={titleId} title={title} heading={{ level, badge }} lead={lead} />
+          </Stack>
+          {((aside as string) !== "none") ? (
+            <PageAside extras={extras} mode={aside} />
+          ) : null}
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/page-trail.types.ts b/packages/react/ui/src/blocks/page-trail.types.ts
new file mode 100644
index 0000000..bb966d6
--- /dev/null
+++ b/packages/react/ui/src/blocks/page-trail.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/page-trail.ts
+
+import type { Stat } from "./stats-band.types";
+
+export type PageExtras = {
+  value: string;
+  caption: string;
+  note: string;
+  icon: string;
+  facts: Stat[];
+};
diff --git a/packages/react/ui/src/blocks/photo-gallery.tsx b/packages/react/ui/src/blocks/photo-gallery.tsx
new file mode 100644
index 0000000..672e226
--- /dev/null
+++ b/packages/react/ui/src/blocks/photo-gallery.tsx
@@ -0,0 +1,130 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+/**
+ * Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of
+ * thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes:
+ * layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { Photo, PhotoLabels } from "./photo-gallery.types";
+
+export type PhotoGalleryProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  photos: Photo[];
+  empty?: string;
+  labels: PhotoLabels;
+  layout?: "grid" | "masonry" | "mosaic" | "featured" | "cards";
+  captions?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function PhotoGallery({
+  id,
+  title,
+  lead = "",
+  photos,
+  empty = "",
+  labels,
+  layout = "grid",
+  captions = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: PhotoGalleryProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((photos?.length ?? 0) === 0) ? (
+        <EmptyState icon="image" title={empty} />
+      ) : ((layout as string) === "featured") ? (
+        <Stack gap="4" align="stretch" data-testid="featured">
+          <MediaFrame alt={title} />
+          <Group gap="4" align="center" justify="between">
+            <Stack gap="0">
+              <Text size="base" weight="semibold">
+                {photos[0]?.title ?? ""}
+              </Text>
+              <Text size="xs" className="text-muted-foreground">
+                {tpl(labels.counter, 1, (photos?.length ?? 0))}
+              </Text>
+            </Stack>
+            <Group gap="2">
+              <Button variant="outline" size="sm" layout="icon" aria-label={labels.previous}>
+                <LucideIcon name="chevron-left" size={16} />
+              </Button>
+              <Button variant="outline" size="sm" layout="icon" aria-label={labels.next}>
+                <LucideIcon name="chevron-right" size={16} />
+              </Button>
+            </Group>
+          </Group>
+          <Box className="grid grid-cols-3 gap-2 sm:grid-cols-9" data-testid="thumbs">
+            {(photos ?? []).map((p, i) => (
+              <MediaFrame key={p.id} alt={p.title} ratio="1/1" className={((i === 0) ? "ring-2 ring-foreground" : "")} />
+            ))}
+          </Box>
+        </Stack>
+      ) : (
+        <Box
+          className={
+            (layout as string) === "masonry" ? "columns-1 gap-4 sm:columns-2 lg:columns-3"
+            : (layout as string) === "mosaic" ? "grid grid-cols-2 gap-4 md:grid-cols-4"
+            : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          }
+          data-testid="items"
+        >
+          {(photos ?? []).map((p, i) => (
+            <FigureBlock key={p.id}
+              className={cn(
+                "flex flex-col gap-2",
+                (((layout as string) === "masonry") ? "mb-4 break-inside-avoid" : ""),
+                ((((layout as string) === "mosaic") && (i === 0)) ? "col-span-2 row-span-2" : ""),
+                (((layout as string) === "cards") ? "rounded bg-card inset-ring inset-ring-border p-4" : "")
+              )}
+              testid="item"
+            >
+              <MediaFrame
+                alt={p.title}
+                ratio={
+                  (layout as string) === "masonry" ? ((p.size === "tall") ? "3/4" : ((p.size === "wide") ? "16/9" : ((p.size === "large") ? "4/3" : "1/1")))
+                  : (layout as string) === "grid" ? "4/3"
+                  : "1/1"
+                }
+                className={(((layout as string) === "mosaic") ? "h-full" : "")}
+              />
+              {(((captions as string) === "show") && ((layout as string) === "cards")) ? (
+                <Group gap="4" align="center" justify="between">
+                  <Text size="sm" weight="semibold">
+                    {p.title}
+                  </Text>
+                  <Badge variant="secondary" size="sm">
+                    {p.tag}
+                  </Badge>
+                </Group>
+              ) : null}
+              {(((captions as string) === "show") && (((layout as string) === "grid") || ((layout as string) === "masonry"))) ? (
+                <Box className="text-sm text-muted-foreground" data-testid="caption">
+                  {p.title}
+                </Box>
+              ) : null}
+            </FigureBlock>
+          ))}
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/photo-gallery.types.ts b/packages/react/ui/src/blocks/photo-gallery.types.ts
new file mode 100644
index 0000000..d0b8e7c
--- /dev/null
+++ b/packages/react/ui/src/blocks/photo-gallery.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Photo = {
+  id: string;
+  title: string;
+  tag: string;
+  size: string;
+};
+
+export type PhotoLabels = {
+  previous: string;
+  next: string;
+  counter: string;
+};
diff --git a/packages/react/ui/src/blocks/post-card.tsx b/packages/react/ui/src/blocks/post-card.tsx
new file mode 100644
index 0000000..f0199ef
--- /dev/null
+++ b/packages/react/ui/src/blocks/post-card.tsx
@@ -0,0 +1,146 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+/**
+ * A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout
+ * (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only),
+ * density.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { CardContent } from "../primitives/card/card-content";
+import { Group } from "../primitives/group/group";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { defaults } from "../presets/defaults";
+import { cn, tpl } from "../utils";
+import type { Post, PostLabels } from "./post-card.types";
+
+export type PostCardProps = {
+  post: Post;
+  labels: PostLabels;
+  layout?: "vertical" | "horizontal";
+  media?: "image" | "none";
+  meta?: "full" | "short" | "news";
+  density?: "default" | "compact";
+};
+
+export function PostCard({
+  post,
+  labels,
+  layout = "vertical",
+  media = "image",
+  meta = "full",
+  density = "default",
+}: PostCardProps) {
+  return (
+    <>
+      {((meta as string) === "news") ? (
+        <Block
+          tag="article"
+          className={cn(
+            "flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border",
+            defaults.news.card
+          )}
+          data-testid="item"
+          data-layout={layout}
+          data-meta="news"
+        >
+          <Box className={cn("relative shrink-0 overflow-hidden", defaults.news.cover)} data-testid="news-cover">
+            <MediaFrame alt={post.title} src={post.image} className={cn("size-full", defaults.media.rounded)} />
+            <Title
+              as={3}
+              size="xs"
+              weight="semibold"
+              className={cn(
+                "pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground",
+                defaults.news.title
+              )}
+              data-testid="news-title"
+            >
+              {post.title}
+            </Title>
+          </Box>
+          <Group
+            gap="2"
+            align="center"
+            className={cn("w-full px-2 text-muted-foreground", defaults.news.strip)}
+            data-testid="news-date"
+          >
+            <LucideIcon name="calendar" size={16} />
+            <Text size="xs" weight="bold" className="leading-4">
+              {post.date}
+            </Text>
+            {post.category ? (
+              <Text size="xs" weight="bold" className="leading-4">
+                {post.category}
+              </Text>
+            ) : null}
+          </Group>
+        </Block>
+      ) : (
+        <Block
+          tag="article"
+          className={cn(
+            "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+            "h-full gap-4 overflow-hidden",
+            (((layout as string) === "horizontal") ? "flex flex-col sm:flex-row" : "flex flex-col")
+          )}
+          data-slot="card"
+          data-testid="item"
+          data-layout={layout}
+          data-meta={meta}
+        >
+          {((media as string) === "image") ? (
+            <Box className={cn("relative shrink-0", (((layout as string) === "horizontal") ? "sm:w-64" : ""))}>
+              <MediaFrame alt={post.title} src={post.image} className="h-full" />
+            </Box>
+          ) : null}
+          <CardContent className="flex flex-1 flex-col gap-2">
+            {((meta as string) !== "news") ? (
+              <Group gap="2" align="center">
+                <LucideIcon name={post.icon} size={16} />
+                <Text size="xs" className="uppercase tracking-wide text-muted-foreground">
+                  {post.category}
+                </Text>
+              </Group>
+            ) : null}
+            <Title as={3} size="xl" weight="bold">
+              {post.title}
+            </Title>
+            {(((density as string) === "default") && ((meta as string) !== "news")) ? (
+              <Text size="sm" className="text-muted-foreground">
+                {post.excerpt}
+              </Text>
+            ) : null}
+            {((meta as string) !== "news") ? (
+              <Group gap="2" className="mt-auto flex-wrap pt-2 text-muted-foreground">
+                {((meta as string) === "full") ? (
+                  <Text size="xs">
+                    {tpl(labels.by, post.author)}
+                  </Text>
+                ) : null}
+                <Text size="xs">
+                  {post.date}
+                </Text>
+                {((meta as string) === "full") ? (
+                  <Text size="xs">
+                    {tpl(labels.minutes, post.minutes)}
+                  </Text>
+                ) : null}
+              </Group>
+            ) : null}
+            {(((meta as string) !== "news") && post.href) ? (
+              <Link href={post.href} variant="default" data-testid="read">
+                {labels.read}
+              </Link>
+            ) : null}
+          </CardContent>
+        </Block>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/post-card.types.ts b/packages/react/ui/src/blocks/post-card.types.ts
new file mode 100644
index 0000000..ae8d4ce
--- /dev/null
+++ b/packages/react/ui/src/blocks/post-card.types.ts
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+
+export type Post = {
+  id: string;
+  title: string;
+  excerpt: string;
+  category: string;
+  author: string;
+  date: string;
+  minutes: number;
+  icon: string;
+  href?: string;
+  image?: string;
+};
+
+export type PostLabels = {
+  minutes: string;
+  by: string;
+  read: string;
+  empty: string;
+};
diff --git a/packages/react/ui/src/blocks/post-grid.tsx b/packages/react/ui/src/blocks/post-grid.tsx
new file mode 100644
index 0000000..9289fe1
--- /dev/null
+++ b/packages/react/ui/src/blocks/post-grid.tsx
@@ -0,0 +1,119 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+/**
+ * A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first
+ * post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news),
+ * filter mode (none, topics), tone, density.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { PostCard } from "../blocks/post-card";
+import { SectionFrame } from "../components/section-frame";
+import { Switcher } from "../components/switcher";
+import { SwitcherItem } from "../components/switcher-item";
+import { fitCols } from "../utils";
+import type { PostTopic, PostFilter } from "./post-grid.types";
+import type { Post, PostLabels } from "./post-card.types";
+import type { HeadLink } from "../components/section-frame.types";
+
+export type PostGridProps = {
+  id: string;
+  title: string;
+  posts: Post[];
+  labels: PostLabels;
+  action?: HeadLink;
+  filter?: PostFilter;
+  layout?: "grid" | "list" | "magazine";
+  cols?: "1-2" | "1-3" | "1-4";
+  media?: "image" | "none";
+  meta?: "full" | "short" | "news";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+  onTopic?: (value: string) => void;
+};
+
+export function PostGrid({
+  id,
+  title,
+  posts,
+  labels,
+  action,
+  filter,
+  layout = "grid",
+  cols = "1-3",
+  media = "image",
+  meta = "full",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onTopic,
+}: PostGridProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      action={action}
+      tone={tone}
+      density={(((density as string) === "compact") ? "compact" : "default")}
+      measure={(((meta as string) === "news") ? "fill" : "default")}
+      className={(((meta as string) === "news") ? "py-0" : "")}
+      landmarkLabel={landmarkLabel}
+    >
+      {(filter?.mode === "topics") ? (
+        <Switcher label={filter?.label}>
+          {(filter?.topics ?? []).map((tab) => (
+            <SwitcherItem key={tab.id} active={(tab.value === filter?.topic)} onClick={() => onTopic?.(tab.value)}>
+              {tab.title}
+            </SwitcherItem>
+          ))}
+        </Switcher>
+      ) : null}
+      {((posts.filter((i) => !filter?.topic || i["category"] === filter?.topic)?.length ?? 0) > 0) ? (
+        <>
+          {((layout as string) === "magazine") ? (
+            <Stack gap="6" align="stretch" data-testid="items">
+              {(posts.filter((i) => !filter?.topic || i["category"] === filter?.topic) ?? []).map((p, i) => (
+                <Fragment key={p.id}>
+                  {(i === 0) ? (
+                    <PostCard post={p} labels={labels} layout="horizontal" media={media} meta={meta} density={density} />
+                  ) : null}
+                </Fragment>
+              ))}
+              <Grid cols={cols} className="gap-6">
+                {(posts.filter((i) => !filter?.topic || i["category"] === filter?.topic) ?? []).map((p, i) => (
+                  <Fragment key={p.id}>
+                    {(i > 0) ? (
+                      <PostCard post={p} labels={labels} media={media} meta={meta} density={density} />
+                    ) : null}
+                  </Fragment>
+                ))}
+              </Grid>
+            </Stack>
+          ) : (
+            <Grid
+              cols={
+                (layout as string) === "list" ? "1"
+                : fitCols(cols, (posts.filter((i) => !filter?.topic || i["category"] === filter?.topic)?.length ?? 0))
+              }
+              className="w-full gap-6"
+              data-testid="items"
+            >
+              {(posts.filter((i) => !filter?.topic || i["category"] === filter?.topic) ?? []).map((p) => (
+                <PostCard key={p.id}
+                  post={p}
+                  labels={labels}
+                  layout={(((layout as string) === "list") ? "horizontal" : "vertical")}
+                  media={media}
+                  meta={meta}
+                  density={density}
+                />
+              ))}
+            </Grid>
+          )}
+        </>
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/post-grid.types.ts b/packages/react/ui/src/blocks/post-grid.types.ts
new file mode 100644
index 0000000..73de7d6
--- /dev/null
+++ b/packages/react/ui/src/blocks/post-grid.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+
+export type PostTopic = {
+  id: string;
+  title: string;
+  value: string;
+};
+
+export type PostFilter = {
+  /** topics: tabs above the posts; the page filters by `topic` */
+  mode?: "none" | "topics";
+  /** the topic tabs */
+  topics?: PostTopic[];
+  /** accessible name of the topic tabs */
+  label?: string;
+  /** the value of the chosen topic; empty: all posts */
+  topic?: string;
+};
diff --git a/packages/react/ui/src/blocks/post-header.tsx b/packages/react/ui/src/blocks/post-header.tsx
new file mode 100644
index 0000000..2a0d70d
--- /dev/null
+++ b/packages/react/ui/src/blocks/post-header.tsx
@@ -0,0 +1,87 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+/**
+ * The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout
+ * (start, center), cover (show, hide), meta (full, short), tone.
+ */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { Pill } from "../components/pill";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Post, PostLabels } from "./post-card.types";
+
+export type PostHeaderProps = {
+  id: string;
+  post?: Post;
+  labels: PostLabels;
+  level?: 1 | 2;
+  layout?: "start" | "center";
+  cover?: "show" | "hide";
+  meta?: "full" | "short";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function PostHeader({
+  id,
+  post,
+  labels,
+  level = 1,
+  layout = "start",
+  cover = "show",
+  meta = "full",
+  tone = "default",
+  landmarkLabel,
+}: PostHeaderProps) {
+  return (
+    <>
+      {post ? (
+        <SectionFrame
+          id={id}
+          title={post?.title}
+          lead={post?.excerpt}
+          heading={{ level }}
+          align={layout}
+          tone={tone}
+          media={{ show: ((cover as string) === "show") }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame alt={post?.title} src={post?.image} ratio="21/9" />
+          )}
+        >
+          <Group
+            gap="4"
+            align="center"
+            justify={(((layout as string) === "center") ? "center" : "start")}
+            className="flex-wrap"
+            data-testid="post-meta"
+          >
+            <MediaFrame alt={post?.author} ratio="1/1" className="size-10 shrink-0 rounded-full" />
+            <Text size="sm" weight="semibold">
+              {post?.author}
+            </Text>
+            <Text size="sm" className="text-muted-foreground">
+              {post?.date}
+            </Text>
+            {((meta as string) === "full") ? (
+              <Text size="sm" className="text-muted-foreground">
+                {tpl(labels.minutes, post?.minutes)}
+              </Text>
+            ) : null}
+            <Pill tone="blue">
+              {post?.category}
+            </Pill>
+          </Group>
+        </SectionFrame>
+      ) : (
+        <SectionFrame id={id} heading={{ level }} align={layout} tone={tone} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="file-text" title={labels.empty} />
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/post-showcase.tsx b/packages/react/ui/src/blocks/post-showcase.tsx
new file mode 100644
index 0000000..7b6203b
--- /dev/null
+++ b/packages/react/ui/src/blocks/post-showcase.tsx
@@ -0,0 +1,127 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/post-showcase.ts
+/**
+ * Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured:
+ * the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3:
+ * overlay columns), mediaSide, tone.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { PostFeature } from "../components/post-feature";
+import { PostMiniCard } from "../components/post-mini-card";
+import { PostOverlayCard } from "../components/post-overlay-card";
+import { SectionFrame } from "../components/section-frame";
+import type { Post, PostLabels } from "./post-card.types";
+import type { HeadLink } from "../components/section-frame.types";
+
+export type PostShowcaseProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  posts: Post[];
+  labels: PostLabels;
+  action: HeadLink;
+  layout?: "intro" | "featured" | "overlay";
+  cols?: "2" | "3";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  empty?: string;
+  landmarkLabel?: string;
+};
+
+export function PostShowcase({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  posts,
+  labels,
+  action,
+  layout = "intro",
+  cols = "3",
+  mediaSide = "start",
+  tone = "default",
+  empty = "",
+  landmarkLabel,
+}: PostShowcaseProps) {
+  return (
+    <>
+      {((posts?.length ?? 0) === 0) ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="newspaper" title={empty} />
+        </SectionFrame>
+      ) : ((layout as string) === "intro") ? (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge }}
+          tone={tone}
+          layout="split"
+          media={{ show: true, side: mediaSide }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              {(posts ?? []).map((p, i) => (
+                <Fragment key={p.id}>
+                  {(i < 4) ? (
+                    <PostMiniCard p={p} labels={labels} />
+                  ) : null}
+                </Fragment>
+              ))}
+            </Box>
+          )}
+        >
+          <Link href={action.href} size="sm" data-testid="section-action">
+            {action.label}
+            <LucideIcon name="arrow-right" size={16} />
+          </Link>
+        </SectionFrame>
+      ) : ((layout as string) === "featured") ? (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge }}
+          tone={tone}
+          layout="split"
+          media={{ show: true, side: mediaSide }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame alt={title} ratio="4/3" />
+          )}
+        >
+          {(posts ?? []).map((p, i) => (
+            <Fragment key={p.id}>
+              {(i < 1) ? (
+                <PostFeature p={p} labels={labels} />
+              ) : null}
+            </Fragment>
+          ))}
+        </SectionFrame>
+      ) : (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <Box
+            className={
+              (cols as string) === "2" ? "grid grid-cols-1 gap-6 md:grid-cols-2"
+              : "grid grid-cols-1 gap-6 md:grid-cols-3"
+            }
+          >
+            {(posts ?? []).map((p, i) => (
+              <Fragment key={p.id}>
+                {(i < (((cols as string) === "2") ? 2 : 3)) ? (
+                  <PostOverlayCard p={p} labels={labels} ratio={(((cols as string) === "2") ? "16/9" : "4/3")} />
+                ) : null}
+              </Fragment>
+            ))}
+          </Box>
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/post-split.tsx b/packages/react/ui/src/blocks/post-split.tsx
new file mode 100644
index 0000000..4664fc6
--- /dev/null
+++ b/packages/react/ui/src/blocks/post-split.tsx
@@ -0,0 +1,129 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/post-split.ts
+/**
+ * A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags,
+ * figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and
+ * related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair,
+ * wide, icons), tone.
+ */
+import { type ReactNode } from "react";
+import { MediaFrame } from "../components/media-frame";
+import { PostActions } from "../components/post-actions";
+import { PostAuthor } from "../components/post-author";
+import { PostOutline } from "../components/post-outline";
+import { PostStats } from "../components/post-stats";
+import { PostTags } from "../components/post-tags";
+import { SectionFrame } from "../components/section-frame";
+import type { PostExtras, PostSplitLabels } from "./post-split.types";
+import type { Post } from "./post-card.types";
+import type { NavLink } from "./nav-bar.types";
+
+export type PostSplitProps = {
+  id: string;
+  post: Post;
+  labels: PostSplitLabels;
+  extras: PostExtras;
+  level?: 1 | 2;
+  layout?: "center" | "split" | "outline";
+  mediaSide?: "end" | "start";
+  author?: "line" | "card" | "bio";
+  cover?: "wide" | "square";
+  actions?: "pair" | "wide" | "icons";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function PostSplit({
+  id,
+  post,
+  labels,
+  extras,
+  level = 1,
+  layout = "split",
+  mediaSide = "end",
+  author = "line",
+  cover = "wide",
+  actions = "pair",
+  tone = "default",
+  landmarkLabel,
+}: PostSplitProps) {
+  return (
+    <>
+      {((layout as string) === "center") ? (
+        <SectionFrame
+          id={id}
+          title={post.title}
+          lead={post.excerpt}
+          heading={{ badge: post.category, level }}
+          tone={tone}
+          media={{ show: true }}
+          align="center"
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame
+              alt={post.title}
+              ratio={
+                (layout as string) === "center" ? "21/9"
+                : (cover as string) === "square" ? "1/1"
+                : "4/3"
+              }
+            />
+          )}
+        >
+          {((extras.tags?.length ?? 0) > 0) ? (
+            <PostTags tags={extras.tags} align="center" />
+          ) : null}
+          <PostStats post={post} extras={extras} labels={labels} align="center" />
+          <PostAuthor
+            post={post}
+            extras={extras}
+            labels={labels}
+            mode="card"
+            share={true}
+            className="mx-auto w-full max-w-md"
+          />
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={post.title}
+          lead={post.excerpt}
+          heading={{ badge: post.category, level }}
+          tone={tone}
+          media={{ show: true, side: mediaSide }}
+          layout="split"
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame
+              alt={post.title}
+              ratio={
+                (layout as string) === "center" ? "21/9"
+                : (cover as string) === "square" ? "1/1"
+                : "4/3"
+              }
+            />
+          )}
+        >
+          {((layout as string) === "outline") ? (
+            <>
+              {((extras.outline?.length ?? 0) > 0) ? (
+                <PostOutline post={post} extras={extras} labels={labels} />
+              ) : null}
+            </>
+          ) : (
+            <>
+              <PostAuthor post={post} extras={extras} labels={labels} mode={author} />
+              {((author as string) !== "line") ? (
+                <PostStats post={post} extras={extras} labels={labels} />
+              ) : null}
+              {((extras.tags?.length ?? 0) > 0) ? (
+                <PostTags tags={extras.tags} />
+              ) : null}
+            </>
+          )}
+          <PostActions labels={labels} mode={actions} />
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/post-split.types.ts b/packages/react/ui/src/blocks/post-split.types.ts
new file mode 100644
index 0000000..8878db0
--- /dev/null
+++ b/packages/react/ui/src/blocks/post-split.types.ts
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/post-split.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type PostExtras = {
+  role: string;
+  bio: string;
+  views: string;
+  likes: string;
+  tags: NavLink[];
+  outline: NavLink[];
+};
+
+export type PostSplitLabels = {
+  minutes: string;
+  views: string;
+  likes: string;
+  share: string;
+  save: string;
+  read: string;
+  related: string;
+};
diff --git a/packages/react/ui/src/blocks/pricing-card.tsx b/packages/react/ui/src/blocks/pricing-card.tsx
new file mode 100644
index 0000000..425cfdd
--- /dev/null
+++ b/packages/react/ui/src/blocks/pricing-card.tsx
@@ -0,0 +1,121 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-card.ts
+/**
+ * A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more
+ * actions. Text comes in through `labels`; the plan is data.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { CardContent } from "../primitives/card/card-content";
+import { CardDescription } from "../primitives/card/card-description";
+import { CardFooter } from "../primitives/card/card-footer";
+import { CardHeader } from "../primitives/card/card-header";
+import { CardTitle } from "../primitives/card/card-title";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { Plan, PricingCardLabels } from "./pricing-card.types";
+
+export type PricingCardProps = {
+  plan: Plan;
+  labels: PricingCardLabels;
+  current?: boolean;
+  emphasis?: "auto" | "off";
+  density?: "default" | "compact";
+  billing?: "monthly" | "annual";
+  footer?: (plan: Plan) => ReactNode;
+  onSelect?: (id: string) => void;
+};
+
+export function PricingCard({
+  plan,
+  labels,
+  current,
+  emphasis = "auto",
+  density = "default",
+  billing = "monthly",
+  footer,
+  onSelect,
+}: PricingCardProps) {
+  const stand = plan.highlighted && ((emphasis as string) === "auto");
+  const yearlyOn = ((billing as string) === "annual") && (plan.yearly > 0);
+  const amount = yearlyOn ? plan.yearly : plan.price;
+  return (
+    <Block
+      tag="article"
+      className={cn(
+        "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+        "flex h-full flex-col"
+      )}
+      data-slot="card"
+      data-highlighted={(stand ? "true" : "false")}
+      data-current={(current ? "true" : "false")}
+    >
+      <CardHeader className="flex flex-col gap-2">
+        <Box className="flex min-h-6 items-center" data-slot="badge-slot">
+          {stand ? (
+            <Badge variant="default" size="default">
+              {labels.popular}
+            </Badge>
+          ) : null}
+        </Box>
+        <CardTitle as={3}>
+          {plan.name}
+        </CardTitle>
+        <CardDescription>
+          {plan.tagline}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className={cn("flex flex-1 flex-col", (((density as string) === "compact") ? "gap-2" : "gap-4"))}>
+        <Group gap="2" align="baseline">
+          <Title as={2} size="4xl" weight="bold">
+            {(amount === 0) ? (
+              <>
+                {labels.free}
+              </>
+            ) : (
+              <>
+                {fmtMoney(amount, plan.currency)}
+              </>
+            )}
+          </Title>
+          {(amount > 0) ? (
+            <Text size="sm" className="text-muted-foreground">
+              {(yearlyOn ? labels.perYear : labels.perMonth)}
+            </Text>
+          ) : null}
+        </Group>
+        <Text size="sm" weight="medium">
+          {tpl(labels.seats, plan.seats)}
+        </Text>
+        <Text size="sm" className="text-muted-foreground">
+          {tpl(labels.storage, plan.storage)}
+        </Text>
+        <List tag="ul" className="flex flex-col gap-2 text-sm">
+          {(plan.features ?? []).map((feature) => (
+            <ListItem key={feature} className="flex gap-2">
+              {feature}
+            </ListItem>
+          ))}
+        </List>
+      </CardContent>
+      <CardFooter className="flex flex-wrap items-center gap-2">
+        <Button
+          variant={(stand ? "default" : "outline")}
+          size="default"
+          data-testid="plan-select"
+          onClick={() => onSelect?.(plan.id)}
+        >
+          {labels.cta}
+        </Button>
+        {footer?.(plan)}
+      </CardFooter>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/pricing-card.types.ts b/packages/react/ui/src/blocks/pricing-card.types.ts
new file mode 100644
index 0000000..4394b1c
--- /dev/null
+++ b/packages/react/ui/src/blocks/pricing-card.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-card.ts
+
+export type Plan = {
+  id: string;
+  name: string;
+  tagline: string;
+  price: number;
+  currency: string;
+  seats: number;
+  storage: number;
+  highlighted: boolean;
+  status?: string;
+  features: string[];
+  yearly: number;
+};
+
+export type PricingCardLabels = {
+  popular: string;
+  perMonth: string;
+  seats: string;
+  storage: string;
+  cta: string;
+  free: string;
+  perYear: string;
+  empty: string;
+};
diff --git a/packages/react/ui/src/blocks/pricing-tiers.tsx b/packages/react/ui/src/blocks/pricing-tiers.tsx
new file mode 100644
index 0000000..d18eff1
--- /dev/null
+++ b/packages/react/ui/src/blocks/pricing-tiers.tsx
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+/**
+ * A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid,
+ * stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and
+ * the prices of that period), density, tone.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { EmptyState } from "../components/empty-state";
+import { PricingCard } from "../blocks/pricing-card";
+import { SectionFrame } from "../components/section-frame";
+import { Switcher } from "../components/switcher";
+import { SwitcherItem } from "../components/switcher-item";
+import { fitCols } from "../utils";
+import type { BillingLabels } from "./pricing-tiers.types";
+import type { Plan, PricingCardLabels } from "./pricing-card.types";
+
+export type PricingTiersProps = {
+  id: string;
+  title: string;
+  plans: Plan[];
+  labels: PricingCardLabels;
+  billingLabels: BillingLabels;
+  layout?: "grid" | "stack";
+  cols?: "1-2" | "1-3" | "1-4";
+  emphasis?: "auto" | "off";
+  billing?: "off" | "monthly" | "annual";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+  onSelect?: (id: string) => void;
+  onBilling?: (period: string) => void;
+};
+
+export function PricingTiers({
+  id,
+  title,
+  plans,
+  labels,
+  billingLabels,
+  layout = "grid",
+  cols = "1-3",
+  emphasis = "auto",
+  billing = "off",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onSelect,
+  onBilling,
+}: PricingTiersProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      measure={(((layout as string) === "stack") ? "md" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((billing as string) !== "off") ? (
+        <Group gap="4" align="center" justify="center" className="flex-wrap" data-testid="billing">
+          <Switcher label={billingLabels.label}>
+            <SwitcherItem active={((billing as string) === "monthly")} onClick={() => onBilling?.("monthly")}>
+              {billingLabels.monthly}
+            </SwitcherItem>
+            <SwitcherItem active={((billing as string) === "annual")} onClick={() => onBilling?.("annual")}>
+              {billingLabels.annual}
+            </SwitcherItem>
+          </Switcher>
+          <Badge variant="default" size="default">
+            {billingLabels.save}
+          </Badge>
+        </Group>
+      ) : null}
+      {((plans?.length ?? 0) === 0) ? (
+        <EmptyState icon="layers" title={labels.empty} />
+      ) : (
+        <Grid
+          cols={(((layout as string) === "stack") ? "1" : fitCols(cols, (plans?.length ?? 0)))}
+          className="gap-4"
+          data-testid="tiers"
+        >
+          {(plans ?? []).map((plan) => (
+            <PricingCard key={plan.id}
+              plan={plan}
+              labels={labels}
+              emphasis={emphasis}
+              billing={(((billing as string) === "annual") ? "annual" : "monthly")}
+              density={(((density as string) === "compact") ? "compact" : "default")}
+              onSelect={() => onSelect?.(plan.id)}
+            />
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/pricing-tiers.types.ts b/packages/react/ui/src/blocks/pricing-tiers.types.ts
new file mode 100644
index 0000000..9e260af
--- /dev/null
+++ b/packages/react/ui/src/blocks/pricing-tiers.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type BillingLabels = {
+  label: string;
+  monthly: string;
+  annual: string;
+  save: string;
+};
diff --git a/packages/react/ui/src/blocks/product-card.tsx b/packages/react/ui/src/blocks/product-card.tsx
new file mode 100644
index 0000000..9f68669
--- /dev/null
+++ b/packages/react/ui/src/blocks/product-card.tsx
@@ -0,0 +1,128 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck
+ * through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image,
+ * none), ratio, rating (show, hide), action (button, none), density.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { CardContent } from "../primitives/card/card-content";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Link } from "../primitives/link/link";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { Rating } from "../components/rating";
+import { at, cn, fmtMoney, tpl } from "../utils";
+import type { Product, ProductLabels } from "./product-card.types";
+
+export type ProductCardProps = {
+  product: Product;
+  labels: ProductLabels;
+  badges: Record<string, string>;
+  layout?: "vertical" | "horizontal";
+  media?: "image" | "none";
+  ratio?: "4/3" | "1/1" | "3/4";
+  rating?: "show" | "hide";
+  action?: "button" | "none";
+  density?: "default" | "compact";
+  onAdd?: (id: string) => void;
+};
+
+export function ProductCard({
+  product,
+  labels,
+  badges,
+  layout = "vertical",
+  media = "image",
+  ratio = "4/3",
+  rating = "show",
+  action = "button",
+  density = "default",
+  onAdd,
+}: ProductCardProps) {
+  return (
+    <Block
+      tag="article"
+      className={cn(
+        "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+        "h-full gap-4 overflow-hidden",
+        (((layout as string) === "horizontal") ? "flex flex-col sm:flex-row" : "flex flex-col")
+      )}
+      data-slot="card"
+      data-testid="item"
+      data-layout={layout}
+    >
+      {((media as string) === "image") ? (
+        <Box className={cn("relative shrink-0", (((layout as string) === "horizontal") ? "sm:w-48" : ""))}>
+          <MediaFrame alt={product.name} src={product.image} ratio={ratio} className="h-full" />
+          {product.badge ? (
+            <Badge variant="default" size="default" className="absolute left-4 top-4" data-testid="badge">
+              {at(badges, product.badge)}
+            </Badge>
+          ) : null}
+        </Box>
+      ) : null}
+      <CardContent className="flex flex-1 flex-col gap-2">
+        <Text size="xs" className="uppercase tracking-wide text-muted-foreground">
+          {product.category}
+        </Text>
+        <Title as={3} size="base" weight="bold">
+          {product.href ? (
+            <Link href={product.href} variant="default" data-testid="open">
+              {product.name}
+            </Link>
+          ) : (
+            <>
+              {product.name}
+            </>
+          )}
+        </Title>
+        {((rating as string) === "show") ? (
+          <Group gap="2">
+            <Rating value={product.rating} label={tpl(labels.ratingLabel, product.rating)} />
+            <Text size="xs" className="text-muted-foreground">
+              {tpl(labels.reviews, product.reviews)}
+            </Text>
+          </Group>
+        ) : null}
+        {((density as string) === "default") ? (
+          <Text size="sm" className="text-muted-foreground">
+            {product.summary}
+          </Text>
+        ) : null}
+        <Group gap="4" justify="between" className="mt-auto pt-2">
+          <Group gap="2" align="baseline" className="flex-wrap">
+            <Text size="xl" weight="bold">
+              {fmtMoney(product.price, product.currency)}
+            </Text>
+            {(product.compareAt && (product.compareAt > product.price)) ? (
+              <Text tag="del" size="sm" className="relative text-muted-foreground" data-testid="compare-at">
+                <Inline className="sr-only">
+                  {labels.was}
+                </Inline>
+                {fmtMoney(product.compareAt, product.currency)}
+              </Text>
+            ) : null}
+          </Group>
+          {((action as string) === "button") ? (
+            <Button
+              variant={(product.inStock ? "default" : "outline")}
+              size="sm"
+              disabled={!product.inStock}
+              data-testid="add"
+              onClick={() => onAdd?.(product.id)}
+            >
+              {(product.inStock ? labels.add : labels.soldOut)}
+            </Button>
+          ) : null}
+        </Group>
+      </CardContent>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/product-card.types.ts b/packages/react/ui/src/blocks/product-card.types.ts
new file mode 100644
index 0000000..6faac52
--- /dev/null
+++ b/packages/react/ui/src/blocks/product-card.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Product = {
+  id: string;
+  name: string;
+  summary: string;
+  price: number;
+  currency: string;
+  rating: number;
+  reviews: number;
+  badge?: string;
+  category: string;
+  inStock: boolean;
+  compareAt?: number;
+  href?: string;
+  image?: string;
+};
+
+export type ProductLabels = {
+  add: string;
+  soldOut: string;
+  reviews: string;
+  ratingLabel: string;
+  was: string;
+  empty: string;
+};
diff --git a/packages/react/ui/src/blocks/product-detail.tsx b/packages/react/ui/src/blocks/product-detail.tsx
new file mode 100644
index 0000000..c835db3
--- /dev/null
+++ b/packages/react/ui/src/blocks/product-detail.tsx
@@ -0,0 +1,142 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price,
+ * stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs
+ * (none, below), buy (full, compact), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { NumberField } from "../components/number-field";
+import { ProductGallery } from "../components/product-gallery";
+import { ProductPrice } from "../components/product-price";
+import { Rating } from "../components/rating";
+import { SectionFrame } from "../components/section-frame";
+import { at, tpl } from "../utils";
+import type { ProductDetailLabels } from "./product-detail.types";
+import type { Product } from "./product-card.types";
+
+export type ProductDetailProps = {
+  id: string;
+  product?: Product;
+  labels: ProductDetailLabels;
+  badges: Record<string, string>;
+  level?: 1 | 2;
+  layout?: "split" | "stacked";
+  mediaSide?: "start" | "end";
+  thumbs?: "none" | "below";
+  buy?: "full" | "compact";
+  tone?: "default" | "muted";
+  density?: "default" | "roomy";
+  landmarkLabel?: string;
+  onAdd?: (id: string) => void;
+};
+
+export function ProductDetail({
+  id,
+  product,
+  labels,
+  badges,
+  level = 1,
+  layout = "split",
+  mediaSide = "start",
+  thumbs = "below",
+  buy = "full",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onAdd,
+}: ProductDetailProps) {
+  return (
+    <>
+      {!product ? (
+        <SectionFrame id={id} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="package" title={labels.empty} />
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={product?.name}
+          lead={product?.summary}
+          heading={{ level }}
+          layout={(((layout as string) === "split") ? "split" : "stack")}
+          media={{ show: true, side: mediaSide, align: "start" }}
+          tone={tone}
+          density={density}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <ProductGallery name={product?.name} image={product?.image} thumbs={thumbs} />
+          )}
+        >
+          <Stack gap="4" align="stretch" data-testid="buy-box">
+            {product?.category ? (
+              <Text size="xs" className="uppercase tracking-wide text-muted-foreground" data-testid="category">
+                {product?.category}
+              </Text>
+            ) : null}
+            <ProductPrice
+              price={product?.price}
+              compareAt={product?.compareAt}
+              currency={product?.currency}
+              badge={(product?.badge ? at(badges, product?.badge) : "")}
+              was={labels.was}
+            />
+            <Group gap="2">
+              <Rating value={product?.rating} label={tpl(labels.ratingLabel, product?.rating)} />
+              <Text size="sm" className="text-muted-foreground">
+                {tpl(labels.reviews, product?.reviews)}
+              </Text>
+            </Group>
+            <Text
+              size="sm"
+              weight="medium"
+              className={(product?.inStock ? "text-foreground" : "text-destructive")}
+              data-testid="stock"
+            >
+              {(product?.inStock ? labels.inStock : labels.soldOut)}
+            </Text>
+            <Group gap="4" className="flex-wrap">
+              {((buy as string) === "full") ? (
+                <NumberField
+                  value="1"
+                  name={tpl("{0}-qty", id)}
+                  min="1"
+                  label={labels.qty}
+                  decrease={labels.decrease}
+                  increase={labels.increase}
+                />
+              ) : null}
+              <Button disabled={!product?.inStock} data-testid="add" onClick={() => onAdd?.(product?.id)}>
+                {labels.add}
+              </Button>
+            </Group>
+            {((buy as string) === "full") ? (
+              <List tag="ul" className="flex flex-col gap-2 text-sm text-muted-foreground">
+                <ListItem className="flex items-center gap-2">
+                  <LucideIcon name="truck" size={16} />
+                  <Inline>
+                    {labels.shipping}
+                  </Inline>
+                </ListItem>
+                <ListItem className="flex items-center gap-2">
+                  <LucideIcon name="shield-check" size={16} />
+                  <Inline>
+                    {labels.returns}
+                  </Inline>
+                </ListItem>
+              </List>
+            ) : null}
+          </Stack>
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/product-detail.types.ts b/packages/react/ui/src/blocks/product-detail.types.ts
new file mode 100644
index 0000000..ccba2ea
--- /dev/null
+++ b/packages/react/ui/src/blocks/product-detail.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type ProductDetailLabels = {
+  add: string;
+  soldOut: string;
+  inStock: string;
+  qty: string;
+  decrease: string;
+  increase: string;
+  reviews: string;
+  ratingLabel: string;
+  shipping: string;
+  returns: string;
+  was: string;
+  empty: string;
+};
diff --git a/packages/react/ui/src/blocks/product-grid.tsx b/packages/react/ui/src/blocks/product-grid.tsx
new file mode 100644
index 0000000..95f8f48
--- /dev/null
+++ b/packages/react/ui/src/blocks/product-grid.tsx
@@ -0,0 +1,90 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that
+ * scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating,
+ * action, tone, density.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { EmptyState } from "../components/empty-state";
+import { ProductCard } from "../blocks/product-card";
+import { SectionFrame } from "../components/section-frame";
+import type { Product, ProductLabels } from "./product-card.types";
+
+export type ProductGridProps = {
+  id: string;
+  title: string;
+  products: Product[];
+  labels: ProductLabels;
+  badges: Record<string, string>;
+  layout?: "grid" | "list" | "rail";
+  cols?: "1-2" | "1-3" | "1-4";
+  ratio?: "4/3" | "1/1" | "3/4";
+  rating?: "show" | "hide";
+  action?: "button" | "none";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+  onAdd?: (id: string) => void;
+};
+
+export function ProductGrid({
+  id,
+  title,
+  products,
+  labels,
+  badges,
+  layout = "grid",
+  cols = "1-3",
+  ratio = "4/3",
+  rating = "show",
+  action = "button",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onAdd,
+}: ProductGridProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((products?.length ?? 0) === 0) ? (
+        <EmptyState icon="package" title={labels.empty} />
+      ) : ((layout as string) === "rail") ? (
+        <Box className="flex snap-x gap-4 overflow-x-auto pb-4" data-testid="items">
+          {(products ?? []).map((p) => (
+            <Box key={p.id} className="w-64 shrink-0 snap-start">
+              <ProductCard
+                product={p}
+                labels={labels}
+                badges={badges}
+                layout={(((layout as string) === "list") ? "horizontal" : "vertical")}
+                ratio={ratio}
+                rating={rating}
+                action={action}
+                density={(((density as string) === "compact") ? "compact" : "default")}
+                onAdd={() => onAdd?.(p.id)}
+              />
+            </Box>
+          ))}
+        </Box>
+      ) : (
+        <Grid cols={(((layout as string) === "list") ? "1" : cols)} className="gap-4" data-testid="items">
+          {(products ?? []).map((p) => (
+            <ProductCard key={p.id}
+              product={p}
+              labels={labels}
+              badges={badges}
+              layout={(((layout as string) === "list") ? "horizontal" : "vertical")}
+              ratio={ratio}
+              rating={rating}
+              action={action}
+              density={(((density as string) === "compact") ? "compact" : "default")}
+              onAdd={() => onAdd?.(p.id)}
+            />
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/product-info.tsx b/packages/react/ui/src/blocks/product-info.tsx
new file mode 100644
index 0000000..b6742fa
--- /dev/null
+++ b/packages/react/ui/src/blocks/product-info.tsx
@@ -0,0 +1,98 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+/**
+ * The details of a product under its buy box: texts in an accordion (native details) beside a card with the
+ * specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text
+ * open, none), tone.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { SectionFrame } from "../components/section-frame";
+import type { Detail, Spec, ProductInfoLabels } from "./product-info.types";
+
+export type ProductInfoProps = {
+  id: string;
+  title: string;
+  details: Detail[];
+  specs: Spec[];
+  labels: ProductInfoLabels;
+  layout?: "split" | "stacked";
+  expand?: "first" | "none";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ProductInfo({
+  id,
+  title,
+  details,
+  specs,
+  labels,
+  layout = "split",
+  expand = "first",
+  tone = "default",
+  landmarkLabel,
+}: ProductInfoProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Box
+        className={
+          (layout as string) === "split" ? "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"
+          : "grid grid-cols-1 gap-8"
+        }
+      >
+        {((details?.length ?? 0) > 0) ? (
+          <Stack
+            gap="0"
+            align="stretch"
+            className={(((layout as string) === "split") ? "lg:col-span-2" : "")}
+            data-testid="items"
+          >
+            {(details ?? []).map((d, i) => (
+              <Disclosure key={d.id} variant="item" open={(((expand as string) === "first") && (i === 0))} data-testid="item">
+                <Summary variant="item">
+                  <Inline className="text-base font-semibold">
+                    {d.title}
+                  </Inline>
+                </Summary>
+                <Text size="sm" className="pb-4 text-muted-foreground">
+                  {d.text}
+                </Text>
+              </Disclosure>
+            ))}
+          </Stack>
+        ) : null}
+        {((specs?.length ?? 0) > 0) ? (
+          <Stack gap="4" align="stretch" className="rounded bg-card inset-ring inset-ring-border p-6" data-testid="specs">
+            <Title as={3} size="lg" weight="bold">
+              {labels.specs}
+            </Title>
+            <List tag="ul" className="flex flex-col">
+              {(specs ?? []).map((s) => (
+                <ListItem key={s.id}
+                  className={"flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0"}
+                  data-testid="spec"
+                >
+                  <Inline className="text-muted-foreground">
+                    {s.label}
+                  </Inline>
+                  <Inline className="font-medium">
+                    {s.value}
+                  </Inline>
+                </ListItem>
+              ))}
+            </List>
+          </Stack>
+        ) : null}
+      </Box>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/product-info.types.ts b/packages/react/ui/src/blocks/product-info.types.ts
new file mode 100644
index 0000000..f315d66
--- /dev/null
+++ b/packages/react/ui/src/blocks/product-info.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type Detail = {
+  id: string;
+  title: string;
+  text: string;
+};
+
+export type Spec = {
+  id: string;
+  label: string;
+  value: string;
+};
+
+export type ProductInfoLabels = {
+  specs: string;
+};
diff --git a/packages/react/ui/src/blocks/profile-form.tsx b/packages/react/ui/src/blocks/profile-form.tsx
new file mode 100644
index 0000000..9661abd
--- /dev/null
+++ b/packages/react/ui/src/blocks/profile-form.tsx
@@ -0,0 +1,118 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+/**
+ * An account settings form: a picture with a change button, name, email, bio and two notification switches, with
+ * save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default,
+ * muted).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Form } from "../primitives/form/form";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { Stack } from "../primitives/stack/stack";
+import { Switch } from "../primitives/switch/switch";
+import { Textarea } from "../primitives/textarea/textarea";
+import { Title } from "../primitives/title/title";
+import { Field } from "../components/field";
+import { MediaFrame } from "../components/media-frame";
+import { Panel } from "../components/panel";
+import { cn, tpl } from "../utils";
+import type { ProfileLabels } from "./profile-form.types";
+
+export type ProfileFormProps = {
+  id: string;
+  title: string;
+  text: string;
+  labels: ProfileLabels;
+  layout?: "stacked" | "split";
+  avatar?: "show" | "hide";
+  prefs?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ProfileForm({
+  id,
+  title,
+  text,
+  labels,
+  layout = "stacked",
+  avatar = "show",
+  prefs = "show",
+  tone = "default",
+  landmarkLabel,
+}: ProfileFormProps) {
+  return (
+    <Block
+      tag="section"
+      aria-labelledby={(landmarkLabel ? undefined : ((title && id) ? tpl("{0}-t", id) : undefined))}
+      data-testid="panel-section"
+      aria-label={landmarkLabel}
+    >
+      <Container className="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+        <Panel
+          title={title}
+          description={text}
+          id={id}
+          className={cn((((tone as string) === "muted") ? "bg-muted" : ""))}
+        >
+          <Form method="dialog" className="gap-6" data-testid="profile-form">
+            <Grid cols={(((layout as string) === "split") ? "1-2" : "1")} className="items-start gap-8">
+              <Stack gap="4" align="stretch">
+                {((avatar as string) === "show") ? (
+                  <Group gap="4" align="center" data-testid="avatar">
+                    <MediaFrame alt={labels.picture} ratio="1/1" className="size-16 shrink-0 rounded-full" />
+                    <Button variant="outline" size="sm" type="button">
+                      {labels.change}
+                    </Button>
+                  </Group>
+                ) : null}
+                <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+                  <Input type="text" name="name" autoComplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+                </Field>
+                <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+                  <Input type="email" name="email" autoComplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+                </Field>
+                <Field label={labels.bio} htmlFor={tpl("{0}-bio", id)}>
+                  <Textarea rows={4} name="bio" id={tpl("{0}-bio", id)} data-testid="field" />
+                </Field>
+              </Stack>
+              {((prefs as string) === "show") ? (
+                <Stack gap="4" align="stretch" data-testid="prefs">
+                  <Title as={3} size="base" weight="bold">
+                    {labels.prefs}
+                  </Title>
+                  <Group gap="4" align="center" justify="between">
+                    <Label htmlFor={tpl("{0}-updates", id)} className="text-sm">
+                      {labels.updates}
+                    </Label>
+                    <Switch name="updates" id={tpl("{0}-updates", id)} />
+                  </Group>
+                  <Group gap="4" align="center" justify="between">
+                    <Label htmlFor={tpl("{0}-alerts", id)} className="text-sm">
+                      {labels.alerts}
+                    </Label>
+                    <Switch name="alerts" id={tpl("{0}-alerts", id)} />
+                  </Group>
+                </Stack>
+              ) : null}
+            </Grid>
+            <Group gap="2" className="flex-wrap">
+              <Button variant="default" size="default" type="submit" data-testid="submit">
+                {labels.save}
+              </Button>
+              <Button variant="outline" size="default" type="button">
+                {labels.cancel}
+              </Button>
+            </Group>
+          </Form>
+        </Panel>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/profile-form.types.ts b/packages/react/ui/src/blocks/profile-form.types.ts
new file mode 100644
index 0000000..3ac275b
--- /dev/null
+++ b/packages/react/ui/src/blocks/profile-form.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+
+export type ProfileLabels = {
+  picture: string;
+  change: string;
+  name: string;
+  email: string;
+  bio: string;
+  prefs: string;
+  updates: string;
+  alerts: string;
+  save: string;
+  cancel: string;
+};
diff --git a/packages/react/ui/src/blocks/project-grid.tsx b/packages/react/ui/src/blocks/project-grid.tsx
new file mode 100644
index 0000000..628465f
--- /dev/null
+++ b/packages/react/ui/src/blocks/project-grid.tsx
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+/**
+ * Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the
+ * picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay,
+ * bento, list), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { ProjectTiles } from "../components/project-tiles";
+import { SectionFrame } from "../components/section-frame";
+import type { Project, ProjectLabels } from "./project-grid.types";
+
+export type ProjectGridProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  projects: Project[];
+  empty?: string;
+  labels: ProjectLabels;
+  layout?: "cards" | "compact" | "overlay" | "bento" | "list";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function ProjectGrid({
+  id,
+  title,
+  lead = "",
+  projects,
+  empty = "",
+  labels,
+  layout = "cards",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ProjectGridProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      density={density}
+      layout={(((layout as string) === "list") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "list"), align: "start" }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <Box className="grid grid-cols-2 gap-4" data-testid="collage">
+          <MediaFrame alt={title} ratio="3/4" />
+          <MediaFrame alt={title} ratio="3/4" className="mt-8" />
+        </Box>
+      )}
+    >
+      {((projects?.length ?? 0) === 0) ? (
+        <EmptyState icon="folder-open" title={empty} />
+      ) : ((layout as string) === "list") ? (
+        <Stack gap="4" align="stretch" data-testid="items">
+          {(projects ?? []).map((p) => (
+            <Group key={p.id} gap="4" align="start" className="border-b border-border pb-4" data-testid="item">
+              <MediaFrame alt={p.title} ratio="1/1" className="size-16 shrink-0" />
+              <Stack gap="2" align="stretch" className="flex-1">
+                <Group gap="4" justify="between">
+                  <Text size="sm" weight="semibold">
+                    {p.title}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {p.year}
+                  </Text>
+                </Group>
+                <Text size="sm" className="text-muted-foreground">
+                  {p.summary}
+                </Text>
+              </Stack>
+            </Group>
+          ))}
+        </Stack>
+      ) : (
+        <ProjectTiles projects={projects} labels={labels} layout={layout} />
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/project-grid.types.ts b/packages/react/ui/src/blocks/project-grid.types.ts
new file mode 100644
index 0000000..1075407
--- /dev/null
+++ b/packages/react/ui/src/blocks/project-grid.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Project = {
+  id: string;
+  title: string;
+  category: string;
+  year: number;
+  summary: string;
+  tags: string[];
+  featured: boolean;
+  client: string;
+  href?: string;
+};
+
+export type ProjectLabels = {
+  featured: string;
+  view: string;
+  case: string;
+};
diff --git a/packages/react/ui/src/blocks/proof-band.tsx b/packages/react/ui/src/blocks/proof-band.tsx
new file mode 100644
index 0000000..b866a94
--- /dev/null
+++ b/packages/react/ui/src/blocks/proof-band.tsx
@@ -0,0 +1,79 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above,
+ * beside), logos (name, icon), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import type { Logo } from "./logo-cloud.types";
+import type { Stat } from "./stats-band.types";
+
+export type ProofBandProps = {
+  id: string;
+  title: string;
+  logos: Logo[];
+  empty?: string;
+  stats: Stat[];
+  layout?: "above" | "beside";
+  logoStyle?: "name" | "icon";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function ProofBand({
+  id,
+  title,
+  logos,
+  empty = "",
+  stats,
+  layout = "above",
+  logoStyle = "name",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ProofBandProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} align="center" landmarkLabel={landmarkLabel}>
+      {((logos?.length ?? 0) === 0) ? (
+        <EmptyState icon="building-2" title={empty} />
+      ) : (
+        <Grid cols={(((layout as string) === "beside") ? "1-2" : "1")} className="items-center gap-8">
+          <Group gap="6" justify="center" className="flex-wrap text-muted-foreground" data-testid="logos">
+            {(logos ?? []).map((logo) => (
+              <Group key={logo.id} gap="2" align="center" data-testid="logo">
+                <LucideIcon name={logo.icon} size={24} />
+                <Text size="sm" weight="semibold" className={(((logoStyle as string) === "icon") ? "sr-only" : "")}>
+                  {logo.name}
+                </Text>
+              </Group>
+            ))}
+          </Group>
+          <Grid
+            cols={(((layout as string) === "beside") ? "2" : "1-4")}
+            className="gap-6 text-center"
+            data-testid="stats"
+          >
+            {(stats ?? []).map((stat) => (
+              <Stack key={stat.id} gap="0" align="center" data-testid="stat">
+                <Text size="4xl" weight="bold">
+                  {stat.value}
+                </Text>
+                <Text size="sm" className="text-muted-foreground">
+                  {stat.label}
+                </Text>
+              </Stack>
+            ))}
+          </Grid>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/quote-split.tsx b/packages/react/ui/src/blocks/quote-split.tsx
new file mode 100644
index 0000000..7c4dbe1
--- /dev/null
+++ b/packages/react/ui/src/blocks/quote-split.tsx
@@ -0,0 +1,147 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/quote-split.ts
+/**
+ * Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture,
+ * logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three
+ * stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured
+ * quote beside a stack), mediaSide, tone.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { ActionGroup } from "../components/action-group";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { QuoteFigures } from "../components/quote-figures";
+import { QuoteLogoTiles } from "../components/quote-logo-tiles";
+import { QuoteRatingPanel } from "../components/quote-rating-panel";
+import { QuoteSlot } from "../components/quote-slot";
+import { SectionFrame } from "../components/section-frame";
+import type { QuoteExtras } from "./quote-split.types";
+import type { Quote, QuoteLabels } from "./testimonial-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Logo } from "./logo-cloud.types";
+import type { LinkActions } from "./error-page.types";
+
+export type QuoteSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  quotes: Quote[];
+  labels: QuoteLabels;
+  extras: QuoteExtras;
+  actions: LinkActions;
+  layout?: "media" | "logos" | "rating" | "stack" | "compact" | "bento";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  empty?: string;
+  landmarkLabel?: string;
+};
+
+export function QuoteSplit({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  quotes,
+  labels,
+  extras,
+  actions,
+  layout = "media",
+  mediaSide = "end",
+  tone = "default",
+  empty = "",
+  landmarkLabel,
+}: QuoteSplitProps) {
+  return (
+    <>
+      {((quotes?.length ?? 0) === 0) ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="quote" title={empty} />
+        </SectionFrame>
+      ) : (((layout as string) === "compact") || ((layout as string) === "bento")) ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          {((layout as string) === "bento") ? (
+            <QuoteFigures extras={extras} />
+          ) : null}
+          <Box
+            className={
+              (layout as string) === "bento" ? "grid grid-cols-1 gap-4 lg:grid-cols-2"
+              : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+            }
+          >
+            {(quotes ?? []).map((q, i) => (
+              <QuoteSlot key={q.id}
+                q={q}
+                labels={labels}
+                layout={((((layout as string) === "bento") && (i === 0)) ? "single" : "grid")}
+                className={((((layout as string) === "bento") && (i === 0)) ? "lg:row-span-3" : "")}
+              />
+            ))}
+          </Box>
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge }}
+          tone={tone}
+          layout="split"
+          media={{ show: true, side: mediaSide }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <>
+              {((layout as string) === "rating") ? (
+                <QuoteRatingPanel extras={extras} labels={labels} />
+              ) : (
+                <MediaFrame alt={title} ratio="4/3" />
+              )}
+            </>
+          )}
+        >
+          {(((layout as string) === "media") || ((layout as string) === "logos") || ((layout as string) === "rating")) ? (
+            <>
+              {(quotes ?? []).map((q, i) => (
+                <Fragment key={q.id}>
+                  {(i < 1) ? (
+                    <QuoteSlot
+                      q={q}
+                      labels={labels}
+                      kind={(((layout as string) === "media") ? "card" : "plain")}
+                      layout="single"
+                      className=""
+                    />
+                  ) : null}
+                </Fragment>
+              ))}
+            </>
+          ) : null}
+          {((layout as string) === "logos") ? (
+            <QuoteLogoTiles extras={extras} />
+          ) : null}
+          {((layout as string) === "stack") ? (
+            <Stack gap="4" align="stretch">
+              {(quotes ?? []).map((q, i) => (
+                <Fragment key={q.id}>
+                  {(i < 3) ? (
+                    <QuoteSlot q={q} labels={labels} layout="stack" className="" />
+                  ) : null}
+                </Fragment>
+              ))}
+            </Stack>
+          ) : null}
+          {(((layout as string) === "media") || ((layout as string) === "logos") || ((layout as string) === "rating")) ? (
+            <ActionGroup
+              primary={actions.cta}
+              primaryHref={actions.href}
+              secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+              secondaryHref={actions.secondaryHref}
+            />
+          ) : null}
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/quote-split.types.ts b/packages/react/ui/src/blocks/quote-split.types.ts
new file mode 100644
index 0000000..2f2e305
--- /dev/null
+++ b/packages/react/ui/src/blocks/quote-split.types.ts
@@ -0,0 +1,13 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/quote-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Logo } from "./logo-cloud.types";
+
+export type QuoteExtras = {
+  stats: Stat[];
+  logos: Logo[];
+  rating: number;
+  score: string;
+  reviews: string;
+};
diff --git a/packages/react/ui/src/blocks/review-list.tsx b/packages/react/ui/src/blocks/review-list.tsx
new file mode 100644
index 0000000..03eb034
--- /dev/null
+++ b/packages/react/ui/src/blocks/review-list.tsx
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid),
+ * columns, item (card, plain), avatar (none, image), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { ArticleBlock } from "../components/article-block";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { Rating } from "../components/rating";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { Review, ReviewLabels } from "./review-list.types";
+
+export type ReviewListProps = {
+  id: string;
+  title: string;
+  reviews: Review[];
+  labels: ReviewLabels;
+  layout?: "list" | "grid";
+  item?: "card" | "plain";
+  avatar?: "none" | "image";
+  tone?: "default" | "muted";
+  density?: "default" | "roomy";
+  landmarkLabel?: string;
+};
+
+export function ReviewList({
+  id,
+  title,
+  reviews,
+  labels,
+  layout = "list",
+  item = "card",
+  avatar = "none",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ReviewListProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      measure={(((layout as string) === "list") ? "2xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((reviews?.length ?? 0) === 0) ? (
+        <EmptyState icon="message-square-quote" title={labels.empty} />
+      ) : null}
+      <Grid cols={(((layout as string) === "grid") ? "1-3" : "1")} className="gap-4" data-testid="items">
+        {(reviews ?? []).map((r) => (
+          <ArticleBlock key={r.id}
+            className={cn(
+              "flex h-full flex-col gap-4",
+              (
+                (item as string) === "card" ? "rounded bg-card p-6 inset-ring inset-ring-border"
+                : "border-b border-border pb-4"
+              )
+            )}
+            testid="item"
+          >
+            <Rating value={r.rating} label={tpl(labels.ratingLabel, r.rating)} />
+            <Title as={3} size="base" weight="bold">
+              {r.title}
+            </Title>
+            <Text size="sm" className="text-muted-foreground">
+              {r.text}
+            </Text>
+            <Group gap="4" align="center" className="mt-auto">
+              {((avatar as string) === "image") ? (
+                <MediaFrame alt={r.author} ratio="1/1" className="size-10 shrink-0 rounded-full" />
+              ) : null}
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {r.author}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {r.date}
+                </Text>
+              </Stack>
+            </Group>
+          </ArticleBlock>
+        ))}
+      </Grid>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/review-list.types.ts b/packages/react/ui/src/blocks/review-list.types.ts
new file mode 100644
index 0000000..f4aac17
--- /dev/null
+++ b/packages/react/ui/src/blocks/review-list.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Review = {
+  id: string;
+  title: string;
+  author: string;
+  rating: number;
+  text: string;
+  date: string;
+};
+
+export type ReviewLabels = {
+  ratingLabel: string;
+  empty: string;
+};
diff --git a/packages/react/ui/src/blocks/shopping-cart.tsx b/packages/react/ui/src/blocks/shopping-cart.tsx
new file mode 100644
index 0000000..3d92c88
--- /dev/null
+++ b/packages/react/ui/src/blocks/shopping-cart.tsx
@@ -0,0 +1,133 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+/**
+ * The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the
+ * way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout
+ * (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { CartSummaryCard } from "../components/cart-summary-card";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { NumberField } from "../components/number-field";
+import { SectionFrame } from "../components/section-frame";
+import { fmtMoney, tpl } from "../utils";
+import type { ShoppingCartLabels } from "./shopping-cart.types";
+import type { CartLine, CartLabels } from "./cart-list.types";
+import type { SummaryRow } from "./order-summary.types";
+import type { Promo, CartSummaryLabels } from "../components/cart-summary-card.types";
+
+export type ShoppingCartProps = {
+  id: string;
+  title: string;
+  lines: CartLine[];
+  rows: SummaryRow[];
+  promos: Promo[];
+  labels: CartLabels;
+  totals: CartSummaryLabels;
+  actions: ShoppingCartLabels;
+  layout?: "split" | "stacked";
+  promo?: "show" | "hide";
+  progress?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ShoppingCart({
+  id,
+  title,
+  lines,
+  rows,
+  promos,
+  labels,
+  totals,
+  actions,
+  layout = "split",
+  promo = "show",
+  progress = "show",
+  tone = "default",
+  landmarkLabel,
+}: ShoppingCartProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Box
+        className={
+          (layout as string) === "split" ? "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"
+          : "grid grid-cols-1 gap-8"
+        }
+      >
+        <Stack
+          gap="4"
+          align="stretch"
+          className={(((layout as string) === "split") ? "lg:col-span-2" : "")}
+          data-testid="lines"
+        >
+          {((lines?.length ?? 0) === 0) ? (
+            <EmptyState icon="shopping-cart" title={actions.empty} />
+          ) : null}
+          {(lines ?? []).map((line) => (
+            <Group key={line.id}
+              gap="4"
+              align="center"
+              className="rounded bg-card inset-ring inset-ring-border flex-wrap p-4"
+              data-testid="item"
+            >
+              <MediaFrame alt={line.name} ratio="1/1" className="size-20 shrink-0" />
+              <Stack gap="0" className="min-w-40 flex-1">
+                <Text size="sm" weight="semibold">
+                  {line.name}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {line.variant}
+                </Text>
+                <Text size="sm">
+                  {fmtMoney(line.price, line.currency)}
+                </Text>
+              </Stack>
+              <NumberField
+                value={(line.qty == null ? undefined : String(line.qty))}
+                name={tpl("{0}-qty-{1}", id, line.id)}
+                min="1"
+                label={labels.qty}
+                decrease={labels.decrease}
+                increase={labels.increase}
+              />
+              <Text size="base" weight="bold" className="w-24 text-right">
+                {fmtMoney((line.price * line.qty), line.currency)}
+              </Text>
+              <Button variant="ghost" size="sm" layout="icon" aria-label={labels.remove} data-testid="remove">
+                <LucideIcon name="trash" size={16} />
+              </Button>
+            </Group>
+          ))}
+          <Group gap="4" justify="between" className="flex-wrap">
+            <Button variant="outline" size="default">
+              <LucideIcon name="arrow-left" size={16} />
+              {actions.back}
+            </Button>
+            <Button variant="ghost" size="default">
+              {actions.clear}
+            </Button>
+          </Group>
+        </Stack>
+        <Box className={(((layout as string) === "split") ? "lg:sticky lg:top-8" : "")} data-testid="aside">
+          <CartSummaryCard
+            field={tpl("{0}-promo", id)}
+            lines={lines}
+            rows={rows}
+            promos={promos}
+            labels={totals}
+            promo={promo}
+            progress={progress}
+          />
+        </Box>
+      </Box>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/shopping-cart.types.ts b/packages/react/ui/src/blocks/shopping-cart.types.ts
new file mode 100644
index 0000000..9e785e9
--- /dev/null
+++ b/packages/react/ui/src/blocks/shopping-cart.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type ShoppingCartLabels = {
+  back: string;
+  clear: string;
+  empty: string;
+};
diff --git a/packages/react/ui/src/blocks/sidebar-nav.tsx b/packages/react/ui/src/blocks/sidebar-nav.tsx
new file mode 100644
index 0000000..aa5c852
--- /dev/null
+++ b/packages/react/ui/src/blocks/sidebar-nav.tsx
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full:
+ * icon and name, compact: icons only with the name hidden), user (show, hide), density.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { NavLink } from "./nav-bar.types";
+
+export type SidebarNavProps = {
+  label: string;
+  brand: string;
+  links: NavLink[];
+  current?: string;
+  userName: string;
+  userEmail: string;
+  width?: "full" | "compact";
+  user?: "show" | "hide";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function SidebarNav({
+  label,
+  brand,
+  links,
+  current = "",
+  userName,
+  userEmail,
+  width = "full",
+  user = "show",
+  density = "default",
+  landmarkLabel,
+}: SidebarNavProps) {
+  return (
+    <Block
+      tag="aside"
+      className={cn(
+        "flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border",
+        (((width as string) === "compact") ? "w-20 items-center" : "w-64")
+      )}
+      aria-label={(landmarkLabel ?? brand)}
+      data-testid="sidebar"
+      data-width={width}
+    >
+      <Group gap="2" align="center">
+        <LucideIcon name="layers" size={24} />
+        <Text size="base" weight="bold" className={(((width as string) === "compact") ? "sr-only" : "")}>
+          {brand}
+        </Text>
+      </Group>
+      {((links?.length ?? 0) > 0) ? (
+        <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)} className="flex-1">
+          <List
+            className={cn(
+              "m-0 flex list-none flex-col p-0",
+              (((density as string) === "compact") ? "gap-0" : "gap-2")
+            )}
+            data-testid="items"
+          >
+            {(links ?? []).map((l) => (
+              <ListItem key={l.id}>
+                <MenuEntry
+                  href={l.href}
+                  className={cn(
+                    "flex items-center gap-4 rounded px-4 text-sm",
+                    "py-2",
+                    ((l.id === current) ? "bg-muted font-semibold" : "")
+                  )}
+                  current={(l.id === current)}
+                  testid="item"
+                >
+                  <LucideIcon name={l.icon} size={16} />
+                  <Inline className={(((width as string) === "compact") ? "sr-only" : "")}>
+                    {l.name}
+                  </Inline>
+                </MenuEntry>
+              </ListItem>
+            ))}
+          </List>
+        </NavBlock>
+      ) : null}
+      {((user as string) === "show") ? (
+        <Group gap="4" align="center" className="border-t border-border pt-4" data-testid="user">
+          <MediaFrame alt={userName} ratio="1/1" className="size-10 shrink-0 rounded-full" />
+          <Stack gap="0" className={(((width as string) === "compact") ? "sr-only" : "min-w-0")}>
+            <Text size="sm" weight="semibold">
+              {userName}
+            </Text>
+            <Text size="xs" className="text-muted-foreground">
+              {userEmail}
+            </Text>
+          </Stack>
+        </Group>
+      ) : null}
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/signup-wizard.tsx b/packages/react/ui/src/blocks/signup-wizard.tsx
new file mode 100644
index 0000000..8b53471
--- /dev/null
+++ b/packages/react/ui/src/blocks/signup-wizard.tsx
@@ -0,0 +1,141 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+/**
+ * A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown,
+ * counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values
+ * between steps is the page's job.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Progress } from "../primitives/form/progress";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { Field } from "../components/field";
+import { cn, tpl } from "../utils";
+import type { WizardStep, WizardLabels } from "./signup-wizard.types";
+
+export type SignupWizardProps = {
+  id: string;
+  title: string;
+  steps: WizardStep[];
+  labels: WizardLabels;
+  current?: number;
+  level?: 1 | 2;
+  progress?: "bar" | "list";
+  layout?: "card" | "plain";
+  landmarkLabel?: string;
+  onGo?: (step: number) => void;
+};
+
+export function SignupWizard({
+  id,
+  title,
+  steps,
+  labels,
+  current = 1,
+  level = 2,
+  progress = "bar",
+  layout = "card",
+  landmarkLabel,
+  onGo,
+}: SignupWizardProps) {
+  return (
+    <>
+      {((steps?.length ?? 0) > 0) ? (
+        <Block
+          tag="section"
+          className={cn(
+            "mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8",
+            (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+          )}
+          aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+          data-testid="wizard"
+          data-current={(current == null ? undefined : String(current))}
+          aria-label={landmarkLabel}
+        >
+          <Title as={level} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+            {title}
+          </Title>
+          <Text size="sm" className="text-muted-foreground" data-testid="step-of">
+            {tpl(labels.stepOf, current, (steps?.length ?? 0))}
+          </Text>
+          {((progress as string) === "bar") ? (
+            <Progress
+              value={(current == null ? undefined : String(current))}
+              max={((steps?.length ?? 0) == null ? undefined : String((steps?.length ?? 0)))}
+              aria-label={labels.steps}
+            />
+          ) : null}
+          {((progress as string) === "list") ? (
+            <List className="m-0 flex list-none flex-col gap-2 p-0" aria-label={labels.steps} data-testid="step-list">
+              {(steps ?? []).map((s, i) => (
+                <ListItem key={s.id}
+                  className={cn(
+                    "flex items-center gap-4 text-sm",
+                    (((i + 1) === current) ? "font-semibold" : "text-muted-foreground")
+                  )}
+                  aria-current={(((i + 1) === current) ? "step" : undefined)}
+                  data-testid="step-item"
+                >
+                  <LucideIcon name={(((i + 1) < current) ? "circle-check" : s.icon)} size={16} />
+                  {s.title}
+                </ListItem>
+              ))}
+            </List>
+          ) : null}
+          {(steps ?? []).map((s, i) => (
+            <Fragment key={s.id}>
+              {((i + 1) === current) ? (
+                <Stack gap="4" align="stretch" data-testid="step">
+                  <Title as={3} size="xl" weight="bold">
+                    {s.title}
+                  </Title>
+                  <Text size="sm" className="text-muted-foreground">
+                    {s.text}
+                  </Text>
+                  <Box className="grid gap-4">
+                    <Field label={s.fieldA} htmlFor={tpl("{0}-a", id)}>
+                      <Input type="text" name={tpl("{0}-a", id)} id={tpl("{0}-a", id)} data-testid="field" />
+                    </Field>
+                    <Field label={s.fieldB} htmlFor={tpl("{0}-b", id)}>
+                      <Input type="text" name={tpl("{0}-b", id)} id={tpl("{0}-b", id)} data-testid="field" />
+                    </Field>
+                  </Box>
+                </Stack>
+              ) : null}
+            </Fragment>
+          ))}
+          <Group gap="2" justify="between">
+            <Button
+              variant="outline"
+              size="default"
+              type="button"
+              disabled={(current < 2)}
+              data-testid="wizard-back"
+              onClick={() => onGo?.((current - 1))}
+            >
+              {labels.back}
+            </Button>
+            <Button
+              variant="default"
+              size="default"
+              type="button"
+              data-testid="wizard-next"
+              onClick={() => onGo?.((current + 1))}
+            >
+              {((current >= (steps?.length ?? 0)) ? labels.finish : labels.next)}
+            </Button>
+          </Group>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/signup-wizard.types.ts b/packages/react/ui/src/blocks/signup-wizard.types.ts
new file mode 100644
index 0000000..bfaf060
--- /dev/null
+++ b/packages/react/ui/src/blocks/signup-wizard.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+
+export type WizardStep = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  fieldA: string;
+  fieldB: string;
+};
+
+export type WizardLabels = {
+  stepOf: string;
+  steps: string;
+  back: string;
+  next: string;
+  finish: string;
+};
diff --git a/packages/react/ui/src/blocks/site-footer.tsx b/packages/react/ui/src/blocks/site-footer.tsx
new file mode 100644
index 0000000..cd57df8
--- /dev/null
+++ b/packages/react/ui/src/blocks/site-footer.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+/**
+ * The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density
+ * (default, compact).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { SiteFooterLabels } from "./site-footer.types";
+import type { SiteRoutes } from "./site-header.types";
+
+export type SiteFooterProps = {
+  labels: SiteFooterLabels;
+  routes?: SiteRoutes;
+  layout?: "minimal" | "centered";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function SiteFooter({
+  labels,
+  routes,
+  layout = "minimal",
+  density = "default",
+  landmarkLabel,
+}: SiteFooterProps) {
+  return (
+    <Block
+      tag="footer"
+      className="mt-12 border-t border-border"
+      data-testid="site-footer"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      <Container
+        className={cn(
+          "mx-auto w-full max-w-6xl px-4",
+          "flex flex-wrap items-center gap-4",
+          (((density as string) === "compact") ? "py-4" : "py-6"),
+          (((layout as string) === "centered") ? "flex-col text-center" : "justify-between")
+        )}
+        data-slot="container"
+      >
+        <Text size="sm" className="text-muted-foreground" data-testid="copyright">
+          {labels.copyright}
+        </Text>
+        <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", labels.nav, landmarkLabel)) : labels.nav)}>
+          <Group gap="4">
+            <MenuEntry href={routes?.home} className="font-semibold">
+              {labels.home}
+            </MenuEntry>
+            <MenuEntry href={routes?.pricing} className="font-semibold">
+              {labels.pricing}
+            </MenuEntry>
+          </Group>
+        </NavBlock>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/site-footer.types.ts b/packages/react/ui/src/blocks/site-footer.types.ts
new file mode 100644
index 0000000..be44645
--- /dev/null
+++ b/packages/react/ui/src/blocks/site-footer.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type SiteFooterLabels = {
+  copyright: string;
+  nav: string;
+  home: string;
+  pricing: string;
+};
diff --git a/packages/react/ui/src/blocks/site-header.tsx b/packages/react/ui/src/blocks/site-header.tsx
new file mode 100644
index 0000000..0bfda57
--- /dev/null
+++ b/packages/react/ui/src/blocks/site-header.tsx
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+/**
+ * The page header: a skip link to the main content, the brand, the two navigation links (the current one carries
+ * aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position
+ * (static, sticky), actions (none, cta).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { SiteHeaderLabels, SiteRoutes } from "./site-header.types";
+
+export type SiteHeaderProps = {
+  labels: SiteHeaderLabels;
+  routes?: SiteRoutes;
+  current: string;
+  layout?: "inline" | "stacked";
+  position?: "static" | "sticky";
+  actions?: "none" | "cta";
+  cta?: string;
+  ctaHref?: string;
+  landmarkLabel?: string;
+  onTheme?: () => void;
+};
+
+export function SiteHeader({
+  labels,
+  routes,
+  current,
+  layout = "inline",
+  position = "static",
+  actions = "none",
+  cta,
+  ctaHref,
+  landmarkLabel,
+  onTheme,
+}: SiteHeaderProps) {
+  return (
+    <Block
+      tag="header"
+      className={cn(
+        "border-b border-border bg-background",
+        (((position as string) === "sticky") ? "sticky top-0 z-40" : "")
+      )}
+      data-testid="site-header"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      <LinkPlain
+        href="#main-content"
+        className={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+          "focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border"}
+        data-testid="skip-link"
+      >
+        {labels.skip}
+      </LinkPlain>
+      <Container
+        className={cn(
+          "mx-auto w-full max-w-6xl px-4",
+          "flex flex-wrap gap-4 py-4",
+          (((layout as string) === "stacked") ? "flex-col items-center" : "items-center justify-between")
+        )}
+        data-slot="container"
+      >
+        <MenuEntry href={routes?.home} className="text-lg font-medium" testid="brand">
+          {labels.brand}
+        </MenuEntry>
+        <NavBlock
+          label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", labels.nav, landmarkLabel)) : labels.nav)}
+          testid="site-nav"
+        >
+          <Group gap="4" align="center">
+            <MenuEntry
+              href={routes?.home}
+              className="font-semibold"
+              current={((current as string) === "home")}
+              testid="nav-link"
+            >
+              {labels.home}
+            </MenuEntry>
+            <MenuEntry
+              href={routes?.pricing}
+              className="font-semibold"
+              current={((current as string) === "pricing")}
+              testid="nav-link"
+            >
+              {labels.pricing}
+            </MenuEntry>
+          </Group>
+        </NavBlock>
+        <Group gap="4" align="center">
+          <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => onTheme?.()}>
+            {labels.theme}
+          </Button>
+          {(((actions as string) === "cta") && cta) ? (
+            <Button variant="default" size="sm" href={ctaHref} data-testid="header-cta">
+              {cta}
+            </Button>
+          ) : null}
+        </Group>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/blocks/site-header.types.ts b/packages/react/ui/src/blocks/site-header.types.ts
new file mode 100644
index 0000000..0ef0ca2
--- /dev/null
+++ b/packages/react/ui/src/blocks/site-header.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type SiteHeaderLabels = {
+  skip: string;
+  brand: string;
+  nav: string;
+  home: string;
+  pricing: string;
+  theme: string;
+};
+
+export type SiteRoutes = {
+  home?: string;
+  pricing?: string;
+};
diff --git a/packages/react/ui/src/blocks/sitemap-footer.tsx b/packages/react/ui/src/blocks/sitemap-footer.tsx
new file mode 100644
index 0000000..82920f3
--- /dev/null
+++ b/packages/react/ui/src/blocks/sitemap-footer.tsx
@@ -0,0 +1,142 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above,
+ * equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none,
+ * first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status
+ * itself is a port contract.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { FooterCard } from "../components/footer-card";
+import { FooterColumns } from "../components/footer-columns";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { Pill } from "../components/pill";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { FooterSignup, FooterStatus } from "./sitemap-footer.types";
+import type { MegaGroup } from "./mega-menu.types";
+
+export type SitemapFooterProps = {
+  label: string;
+  brand: string;
+  tagline: string;
+  copyright: string;
+  groups: MegaGroup[];
+  signup?: FooterSignup;
+  status?: FooterStatus;
+  id?: string;
+  layout?: "columns" | "row" | "card";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function SitemapFooter({
+  label,
+  brand,
+  tagline,
+  copyright,
+  groups,
+  signup,
+  status,
+  id = "footer",
+  layout = "columns",
+  density = "default",
+  landmarkLabel,
+}: SitemapFooterProps) {
+  return (
+    <>
+      {((layout as string) === "card") ? (
+        <FooterCard label={label} brand={brand} groups={groups} landmarkLabel={landmarkLabel} />
+      ) : (
+        <Block
+          tag="footer"
+          className="mt-12 border-t border-border"
+          data-testid="site-footer"
+          data-layout={layout}
+          aria-label={landmarkLabel}
+        >
+          <Container
+            className={cn(
+              "mx-auto w-full max-w-6xl px-4",
+              "flex flex-col gap-8",
+              (((density as string) === "compact") ? "py-6" : "py-12")
+            )}
+            data-slot="container"
+          >
+            {(signup?.mode === "first") ? (
+              <Stack gap="4" className="max-w-md" data-testid="signup">
+                <Title as={3} size="xl" weight="bold">
+                  {signup?.title}
+                </Title>
+                <Form method="dialog" className={cn("w-full max-w-md", (false ? "mx-auto" : ""))} data-testid="email-form">
+                  <Label htmlFor={tpl("{0}-email", id)} className="sr-only">
+                    {signup?.label}
+                  </Label>
+                  <Group gap="2" align="start" className="w-full flex-wrap">
+                    <Input type="email" name="email" className="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+                    <Button variant="default" size="default" type="submit" data-testid="submit">
+                      {signup?.submit}
+                    </Button>
+                  </Group>
+                </Form>
+              </Stack>
+            ) : null}
+            {((layout as string) === "columns") ? (
+              <Box className="flex flex-col gap-8 md:flex-row md:items-start md:gap-12" data-slot="footer-top">
+                <Stack gap="2" className="md:w-64 md:shrink-0">
+                  <Text size="xl" weight="bold">
+                    {brand}
+                  </Text>
+                  <Text size="sm" className="text-muted-foreground">
+                    {tagline}
+                  </Text>
+                </Stack>
+                <Box className="min-w-0 flex-1">
+                  <FooterColumns label={label} groups={groups} landmarkLabel={landmarkLabel} />
+                </Box>
+              </Box>
+            ) : (
+              <Group gap="6" align="center" justify="between" className="flex-wrap">
+                <Text size="base" weight="bold">
+                  {brand}
+                </Text>
+                {((groups?.length ?? 0) > 0) ? (
+                  <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)}>
+                    <Group gap="4" className="flex-wrap">
+                      {(groups ?? []).map((g) => (
+                        <MenuEntry key={g.id} href={g.href} className="text-sm" testid="group">
+                          {g.title}
+                        </MenuEntry>
+                      ))}
+                    </Group>
+                  </NavBlock>
+                ) : null}
+              </Group>
+            )}
+            <Group gap="4" align="center" justify="between" className="flex-wrap border-t border-border pt-6">
+              <Text size="sm" className="text-muted-foreground">
+                {copyright}
+              </Text>
+              {(status?.mode === "show") ? (
+                <Pill tone="green" icon="circle-check">
+                  {status?.label}
+                </Pill>
+              ) : null}
+            </Group>
+          </Container>
+        </Block>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/sitemap-footer.types.ts b/packages/react/ui/src/blocks/sitemap-footer.types.ts
new file mode 100644
index 0000000..ca75815
--- /dev/null
+++ b/packages/react/ui/src/blocks/sitemap-footer.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+export type FooterSignup = {
+  /** first: the sign-up comes before the links */
+  mode?: "none" | "first";
+  title?: string;
+  /** accessible name of the email field */
+  label?: string;
+  submit?: string;
+};
+
+export type FooterStatus = {
+  /** show: the status pill is drawn */
+  mode?: "none" | "show";
+  /** text of the pill */
+  label?: string;
+};
diff --git a/packages/react/ui/src/blocks/skeleton-layout.tsx b/packages/react/ui/src/blocks/skeleton-layout.tsx
new file mode 100644
index 0000000..2a5ee43
--- /dev/null
+++ b/packages/react/ui/src/blocks/skeleton-layout.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or
+ * an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content
+ * is loading. The shimmer itself belongs to the Skeleton part.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Skeleton } from "../primitives/skeleton/skeleton";
+import { Stack } from "../primitives/stack/stack";
+import { SectionFrame } from "../components/section-frame";
+import type { Line } from "./skeleton-layout.types";
+
+export type SkeletonLayoutProps = {
+  id: string;
+  title: string;
+  label: string;
+  lines: Line[];
+  shape?: "cards" | "list" | "article";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function SkeletonLayout({
+  id,
+  title,
+  label,
+  lines,
+  shape = "cards",
+  tone = "default",
+  landmarkLabel,
+}: SkeletonLayoutProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Block tag="div" className="w-full" role="status" aria-label={label} data-testid="skeleton" data-shape={shape}>
+        {((shape as string) === "cards") ? (
+          <Grid cols="1-3" className="gap-4">
+            {(lines ?? []).map((l) => (
+              <Stack key={l.id} gap="4" className="rounded bg-card inset-ring inset-ring-border p-4" data-testid="item">
+                <Skeleton className="aspect-video w-full" />
+                <Skeleton className="h-4 w-2/3" />
+                <Skeleton className="h-4 w-full" />
+              </Stack>
+            ))}
+          </Grid>
+        ) : ((shape as string) === "list") ? (
+          <Stack gap="4" align="stretch">
+            {(lines ?? []).map((l) => (
+              <Group key={l.id} gap="4" align="center" data-testid="item">
+                <Skeleton className="size-10 shrink-0 rounded-full" />
+                <Stack gap="2" className="flex-1">
+                  <Skeleton className="h-4 w-1/3" />
+                  <Skeleton className="h-4 w-full" />
+                </Stack>
+              </Group>
+            ))}
+          </Stack>
+        ) : (
+          <Stack gap="4" align="stretch" className="mx-auto max-w-2xl">
+            <Skeleton className="h-8 w-3/4" />
+            {(lines ?? []).map((l) => (
+              <Stack key={l.id} gap="2" data-testid="item">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-5/6" />
+              </Stack>
+            ))}
+          </Stack>
+        )}
+      </Block>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/skeleton-layout.types.ts b/packages/react/ui/src/blocks/skeleton-layout.types.ts
new file mode 100644
index 0000000..b2c05ba
--- /dev/null
+++ b/packages/react/ui/src/blocks/skeleton-layout.types.ts
@@ -0,0 +1,6 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Line = {
+  id: string;
+};
diff --git a/packages/react/ui/src/blocks/slot-board.tsx b/packages/react/ui/src/blocks/slot-board.tsx
new file mode 100644
index 0000000..63adc65
--- /dev/null
+++ b/packages/react/ui/src/blocks/slot-board.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+/**
+ * Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and
+ * the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item
+ * (card, plain), tone.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Select } from "../primitives/select/select";
+import { SelectOption } from "../primitives/select/select-option";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { Field } from "../components/field";
+import { SectionFrame } from "../components/section-frame";
+import { SlotGrid } from "../components/slot-grid";
+import { fmtMoney, tpl } from "../utils";
+import type { SlotLabels } from "./slot-board.types";
+import type { Day } from "../components/slot-grid.types";
+import type { Zone } from "./zone-table.types";
+
+export type SlotBoardProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  days: Day[];
+  empty?: string;
+  zone: Zone;
+  labels: SlotLabels;
+  layout?: "split" | "stacked";
+  item?: "card" | "plain";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function SlotBoard({
+  id,
+  title,
+  lead = "",
+  days,
+  empty = "",
+  zone,
+  labels,
+  layout = "split",
+  item = "card",
+  tone = "default",
+  landmarkLabel,
+}: SlotBoardProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} landmarkLabel={landmarkLabel}>
+      {((days?.length ?? 0) === 0) ? (
+        <EmptyState icon="calendar" title={empty} />
+      ) : (
+        <Box className="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+          <Box className={(((layout as string) === "split") ? "lg:col-span-2" : "lg:col-span-3")}>
+            <SlotGrid days={days} name={tpl("{0}-slot", id)} item={item} />
+          </Box>
+          {((layout as string) === "split") ? (
+            <Stack gap="4" align="stretch" className="rounded bg-card inset-ring inset-ring-border p-6" data-testid="aside">
+              <Field label={labels.zone} htmlFor={tpl("{0}-zone", id)}>
+                <Select name={tpl("{0}-zone", id)} id={tpl("{0}-zone", id)}>
+                  <SelectOption value={zone.id} label={zone.name} selected={true} />
+                </Select>
+              </Field>
+              <List tag="ul" className="flex flex-col gap-2">
+                <ListItem className="flex items-center justify-between gap-4 text-sm">
+                  <Inline className="text-muted-foreground">
+                    {labels.price}
+                  </Inline>
+                  <Inline className="font-medium">
+                    {fmtMoney(zone.price, zone.currency)}
+                  </Inline>
+                </ListItem>
+                <ListItem className="flex items-center justify-between gap-4 text-sm">
+                  <Inline className="text-muted-foreground">
+                    {labels.freeFrom}
+                  </Inline>
+                  <Inline className="font-medium">
+                    {fmtMoney(zone.freeFrom, zone.currency)}
+                  </Inline>
+                </ListItem>
+                <ListItem className="flex items-center justify-between gap-4 text-sm">
+                  <Inline className="text-muted-foreground">
+                    {labels.time}
+                  </Inline>
+                  <Inline className="font-medium">
+                    {zone.time}
+                  </Inline>
+                </ListItem>
+              </List>
+              <Button variant="default" size="default" className="w-full">
+                {labels.primary}
+              </Button>
+              <Button variant="outline" size="default" className="w-full">
+                {labels.secondary}
+              </Button>
+              <Text size="xs" className="text-muted-foreground">
+                {labels.note}
+              </Text>
+            </Stack>
+          ) : null}
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/slot-board.types.ts b/packages/react/ui/src/blocks/slot-board.types.ts
new file mode 100644
index 0000000..a128b0b
--- /dev/null
+++ b/packages/react/ui/src/blocks/slot-board.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type SlotLabels = {
+  zone: string;
+  price: string;
+  freeFrom: string;
+  time: string;
+  primary: string;
+  secondary: string;
+  note: string;
+};
diff --git a/packages/react/ui/src/blocks/stats-band.tsx b/packages/react/ui/src/blocks/stats-band.tsx
new file mode 100644
index 0000000..cfafc6c
--- /dev/null
+++ b/packages/react/ui/src/blocks/stats-band.tsx
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/**
+ * Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3,
+ * 4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may
+ * be empty.
+ */
+import { type ReactNode } from "react";
+import { Grid } from "../primitives/grid/grid";
+import { Backdrop } from "../components/backdrop";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { StatFigure } from "../components/stat-figure";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Stat } from "./stats-band.types";
+
+export type StatsBandProps = {
+  id: string;
+  title?: string;
+  stats: Stat[];
+  empty?: string;
+  cols?: "2" | "3" | "4";
+  layout?: "row" | "stack";
+  surface?: "none" | "image" | "panel";
+  item?: "plain" | "card" | "icon";
+  align?: "start" | "center";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function StatsBand({
+  id,
+  title = "",
+  stats,
+  empty = "",
+  cols = "4",
+  layout = "row",
+  surface = "none",
+  item = "plain",
+  align = "center",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: StatsBandProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      align={align}
+      measure={
+        (surface as string) === "panel" ? "fill"
+        : (layout as string) === "stack" ? "xs"
+        : "default"
+      }
+      className={cn(
+        cn((((surface as string) === "image") ? "bg-transparent" : ""), (((surface as string) === "panel") ? "py-0" : "")),
+        (
+          (((surface as string) === "image") ? "image" : "none") === "image" ? "relative isolate overflow-hidden"
+          : ""
+        )
+      )}
+      landmarkLabel={landmarkLabel}
+    >
+      <Backdrop kind={(((surface as string) === "image") ? "image" : "none")} alt={title} />
+      {((stats?.length ?? 0) === 0) ? (
+        <EmptyState icon="chart-column" title={empty} />
+      ) : ((surface as string) === "panel") ? (
+        <Grid
+          cols={
+            (cols as string) === "2" ? "2"
+            : (cols as string) === "3" ? "2-3"
+            : (cols as string) === "4" ? "2-4"
+            : "3-6"
+          }
+          className={cn("w-full items-center bg-muted px-6", defaults.stats.panel)}
+          data-testid="items"
+        >
+          {(stats ?? []).map((stat) => (
+            <StatFigure key={stat.id} stat={stat} item={item} align={align} />
+          ))}
+        </Grid>
+      ) : (
+        <Grid
+          cols={
+            (layout as string) === "stack" ? "1"
+            : (cols as string) === "2" ? "2"
+            : (cols as string) === "3" ? "2-3"
+            : (cols as string) === "4" ? "2-4"
+            : "3-6"
+          }
+          className="gap-6"
+          data-testid="items"
+        >
+          {(stats ?? []).map((stat) => (
+            <StatFigure key={stat.id} stat={stat} item={item} align={align} />
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/stats-band.types.ts b/packages/react/ui/src/blocks/stats-band.types.ts
new file mode 100644
index 0000000..5e5e229
--- /dev/null
+++ b/packages/react/ui/src/blocks/stats-band.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Stat = {
+  id: string;
+  label: string;
+  value: string;
+  icon: string;
+  hint: string;
+};
diff --git a/packages/react/ui/src/blocks/stepper.tsx b/packages/react/ui/src/blocks/stepper.tsx
new file mode 100644
index 0000000..17d0bef
--- /dev/null
+++ b/packages/react/ui/src/blocks/stepper.tsx
@@ -0,0 +1,120 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * A multi-step form header: the steps with the current one marked (aria-current step), and the current step's
+ * text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show,
+ * hide).
+ */
+import { Fragment, type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { Step } from "./steps-list.types";
+
+export type StepperProps = {
+  id: string;
+  title: string;
+  steps: Step[];
+  current?: number;
+  stepLabel: string;
+  back: string;
+  next: string;
+  layout?: "horizontal" | "vertical";
+  marker?: "number" | "icon";
+  summary?: "show" | "hide";
+  landmarkLabel?: string;
+};
+
+export function Stepper({
+  id,
+  title,
+  steps,
+  current = 2,
+  stepLabel,
+  back,
+  next,
+  layout = "horizontal",
+  marker = "number",
+  summary = "show",
+  landmarkLabel,
+}: StepperProps) {
+  return (
+    <SectionFrame id={id} title={title} measure="3xl" landmarkLabel={landmarkLabel}>
+      {((steps?.length ?? 0) > 0) ? (
+        <Stack gap="6" align="stretch" data-testid="stepper">
+          <Text size="sm" className="text-muted-foreground">
+            {tpl(stepLabel, current, (steps?.length ?? 0))}
+          </Text>
+          <List
+            tag="ol"
+            className={cn(
+              "m-0 flex list-none gap-4 p-0",
+              (((layout as string) === "vertical") ? "flex-col" : "flex-col sm:flex-row")
+            )}
+            data-testid="items"
+          >
+            {(steps ?? []).map((s, i) => (
+              <ListItem key={s.id}
+                className="flex flex-1 items-center gap-4"
+                data-testid="item"
+                aria-current={(((i + 1) === current) ? "step" : undefined)}
+              >
+                <IconBadge
+                  variant={(((i + 1) < (current + 1)) ? "primary" : "outline")}
+                  size="sm"
+                  className={(((i + 1) < (current + 1)) ? "text-sm" : "text-sm text-muted-foreground")}
+                >
+                  {((marker as string) === "icon") ? (
+                    <LucideIcon name={s.icon} size={16} />
+                  ) : (
+                    <Inline className="text-sm font-bold">
+                      {((i + 1) == null ? undefined : String((i + 1)))}
+                    </Inline>
+                  )}
+                </IconBadge>
+                <Text size="sm" weight={(((i + 1) === current) ? "bold" : "semibold")}>
+                  {s.title}
+                </Text>
+              </ListItem>
+            ))}
+          </List>
+          {((summary as string) === "show") ? (
+            <>
+              {(steps ?? []).map((s, i) => (
+                <Fragment key={s.id}>
+                  {((i + 1) === current) ? (
+                    <Stack gap="2" className="rounded bg-card p-6 inset-ring inset-ring-border" data-testid="step-summary">
+                      <Title as={3} size="xl" weight="bold">
+                        {s.title}
+                      </Title>
+                      <Text size="sm" className="text-muted-foreground">
+                        {s.text}
+                      </Text>
+                      <Group gap="2" className="pt-2">
+                        <Button variant="outline" size="sm" type="button">
+                          {back}
+                        </Button>
+                        <Button variant="default" size="sm" type="button">
+                          {next}
+                        </Button>
+                      </Group>
+                    </Stack>
+                  ) : null}
+                </Fragment>
+              ))}
+            </>
+          ) : null}
+        </Stack>
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/steps-list.tsx b/packages/react/ui/src/blocks/steps-list.tsx
new file mode 100644
index 0000000..8d6322a
--- /dev/null
+++ b/packages/react/ui/src/blocks/steps-list.tsx
@@ -0,0 +1,99 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/**
+ * How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon),
+ * align, density, tone.
+ */
+import { type ReactNode } from "react";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Step } from "./steps-list.types";
+
+export type StepsListProps = {
+  id: string;
+  title: string;
+  steps: Step[];
+  empty?: string;
+  layout?: "row" | "column";
+  marker?: "number" | "icon";
+  align?: "start" | "center";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function StepsList({
+  id,
+  title,
+  steps,
+  empty = "",
+  layout = "row",
+  marker = "number",
+  align = "start",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: StepsListProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      align={align}
+      measure={(((layout as string) === "row") ? "default" : "2xl")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((steps?.length ?? 0) === 0) ? (
+        <EmptyState icon="list-ordered" title={empty} />
+      ) : (
+        <List
+          tag="ol"
+          className={cn(
+            "grid gap-6",
+            (((layout as string) === "row") ? "sm:grid-cols-2 md:grid-cols-4" : "")
+          )}
+          data-testid="items"
+        >
+          {(steps ?? []).map((step, i) => (
+            <ListItem key={step.id}
+              className={cn(
+                "flex gap-4",
+                (((layout as string) === "row") ? "flex-col" : ""),
+                (((align as string) === "center") ? "items-center text-center" : "")
+              )}
+              data-testid="item"
+            >
+              <IconBadge variant="primary" data-slot="marker">
+                {((marker as string) === "icon") ? (
+                  <LucideIcon name={step.icon} size={20} />
+                ) : (
+                  <Inline className="text-base font-bold">
+                    {((i + 1) == null ? undefined : String((i + 1)))}
+                  </Inline>
+                )}
+              </IconBadge>
+              <Stack gap="2" align={(((align as string) === "center") ? "center" : "start")}>
+                <Title as={3} size="xl" weight="bold">
+                  {step.title}
+                </Title>
+                <Text size="sm" className="text-muted-foreground">
+                  {step.text}
+                </Text>
+              </Stack>
+            </ListItem>
+          ))}
+        </List>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/steps-list.types.ts b/packages/react/ui/src/blocks/steps-list.types.ts
new file mode 100644
index 0000000..f2bb96f
--- /dev/null
+++ b/packages/react/ui/src/blocks/steps-list.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Step = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/react/ui/src/blocks/store-hero.tsx b/packages/react/ui/src/blocks/store-hero.tsx
new file mode 100644
index 0000000..edf9450
--- /dev/null
+++ b/packages/react/ui/src/blocks/store-hero.tsx
@@ -0,0 +1,144 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/storefront.ts
+/**
+ * The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay
+ * layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text
+ * over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { Backdrop } from "../components/backdrop";
+import { OfferMedia } from "../components/offer-media";
+import { SectionFrame } from "../components/section-frame";
+import type { OfferCard } from "./store-hero.types";
+import type { Feature } from "./feature-grid.types";
+import type { LinkActions } from "./error-page.types";
+
+export type StoreHeroProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  actions: LinkActions;
+  perks: Feature[];
+  card: OfferCard;
+  layout?: "overlay" | "backdrop";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function StoreHero({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 1,
+  actions,
+  perks,
+  card,
+  layout = "overlay",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: StoreHeroProps) {
+  return (
+    <>
+      {((layout as string) === "backdrop") ? (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge, level }}
+          tone={tone}
+          density="roomy"
+          measure="3xl"
+          className={(("image" === "image") ? "relative isolate overflow-hidden" : "")}
+          landmarkLabel={landmarkLabel}
+        >
+          <Backdrop kind="image" alt={title} />
+          <ActionGroup
+            primary={actions.cta}
+            primaryHref={actions.href}
+            secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+            secondaryHref={actions.secondaryHref}
+          />
+          {((perks?.length ?? 0) > 0) ? (
+            <Grid cols="1-3" className="gap-4" data-testid="perks">
+              {(perks ?? []).map((p, i) => (
+                <Fragment key={p.id}>
+                  {(i < 3) ? (
+                    <Group gap="4" align="start" data-testid="perk">
+                      <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                        <LucideIcon name={p.icon} size={20} />
+                      </Box>
+                      <Stack gap="0">
+                        <Text size="sm" weight="semibold">
+                          {p.title}
+                        </Text>
+                        <Text size="xs" className="text-muted-foreground">
+                          {p.text}
+                        </Text>
+                      </Stack>
+                    </Group>
+                  ) : null}
+                </Fragment>
+              ))}
+            </Grid>
+          ) : null}
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge, level }}
+          layout="split"
+          media={{ show: true, side: mediaSide }}
+          tone={tone}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <OfferMedia alt={title} card={card} />
+          )}
+        >
+          <ActionGroup
+            primary={actions.cta}
+            primaryHref={actions.href}
+            secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+            secondaryHref={actions.secondaryHref}
+          />
+          {((perks?.length ?? 0) > 0) ? (
+            <Grid cols="1-3" className="gap-4" data-testid="perks">
+              {(perks ?? []).map((p, i) => (
+                <Fragment key={p.id}>
+                  {(i < 3) ? (
+                    <Group gap="4" align="start" data-testid="perk">
+                      <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                        <LucideIcon name={p.icon} size={20} />
+                      </Box>
+                      <Stack gap="0">
+                        <Text size="sm" weight="semibold">
+                          {p.title}
+                        </Text>
+                        <Text size="xs" className="text-muted-foreground">
+                          {p.text}
+                        </Text>
+                      </Stack>
+                    </Group>
+                  ) : null}
+                </Fragment>
+              ))}
+            </Grid>
+          ) : null}
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/store-hero.types.ts b/packages/react/ui/src/blocks/store-hero.types.ts
new file mode 100644
index 0000000..3ded713
--- /dev/null
+++ b/packages/react/ui/src/blocks/store-hero.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/storefront.ts
+
+export type OfferCard = {
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/react/ui/src/blocks/store-locations.tsx b/packages/react/ui/src/blocks/store-locations.tsx
new file mode 100644
index 0000000..d3e7a37
--- /dev/null
+++ b/packages/react/ui/src/blocks/store-locations.tsx
@@ -0,0 +1,137 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+/**
+ * The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the
+ * services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Link } from "../primitives/link/link";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { at, cn, tpl } from "../utils";
+import type { Store, StoreLabels } from "./store-locations.types";
+
+export type StoreLocationsProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  stores: Store[];
+  empty?: string;
+  kinds: Record<string, string>;
+  labels: StoreLabels;
+  layout?: "cards" | "list" | "map";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function StoreLocations({
+  id,
+  title,
+  lead = "",
+  stores,
+  empty = "",
+  kinds,
+  labels,
+  layout = "cards",
+  tone = "default",
+  landmarkLabel,
+}: StoreLocationsProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} landmarkLabel={landmarkLabel}>
+      {((stores?.length ?? 0) === 0) ? (
+        <EmptyState icon="store" title={empty} />
+      ) : (
+        <Box
+          className={cn(
+            "grid grid-cols-1 gap-8",
+            (((layout as string) === "map") ? "items-start md:grid-cols-2" : "")
+          )}
+        >
+          <Box
+            className={
+              (layout as string) === "cards" ? "grid grid-cols-1 gap-4 md:grid-cols-2"
+              : "flex flex-col gap-4"
+            }
+            data-testid="items"
+          >
+            {(stores ?? []).map((s) => (
+              <Stack key={s.id}
+                gap="4"
+                className={
+                  (layout as string) === "list" ? "border-b border-border pb-4"
+                  : "rounded bg-card inset-ring inset-ring-border p-6"
+                }
+                data-testid="item"
+              >
+                <Stack gap="2">
+                  <Badge variant="outline" size="default" className="w-fit">
+                    {at(kinds, s.kind)}
+                  </Badge>
+                  <Title as={3} size="lg" weight="bold">
+                    {s.name}
+                  </Title>
+                </Stack>
+                <List
+                  tag="ul"
+                  className={
+                    (layout as string) === "list" ? "flex flex-wrap gap-x-8 gap-y-2 text-sm"
+                    : "flex flex-col gap-2 text-sm"
+                  }
+                >
+                  <ListItem className="flex items-center gap-2">
+                    <LucideIcon name="map-pin" size={16} />
+                    <Inline>
+                      {s.address}
+                    </Inline>
+                  </ListItem>
+                  <ListItem className="flex items-center gap-2">
+                    <LucideIcon name="clock" size={16} />
+                    <Inline>
+                      {s.hours}
+                    </Inline>
+                  </ListItem>
+                  <ListItem className="flex items-center gap-2">
+                    <LucideIcon name="phone" size={16} />
+                    <Link href={tpl("tel:{0}", s.phone)} variant="default">
+                      {(s.phone ?? "").replaceAll(" ", "\u00a0")}
+                    </Link>
+                  </ListItem>
+                </List>
+                {((layout as string) === "cards") ? (
+                  <>
+                    <Text size="sm" className="text-muted-foreground">
+                      {s.note}
+                    </Text>
+                    <Group gap="2" className="flex-wrap">
+                      {(s.services ?? []).map((v) => (
+                        <Badge key={v} variant="secondary" size="default">
+                          {v}
+                        </Badge>
+                      ))}
+                    </Group>
+                  </>
+                ) : null}
+              </Stack>
+            ))}
+          </Box>
+          {((layout as string) === "map") ? (
+            <Box className="md:sticky md:top-8">
+              <MediaFrame alt={labels.map} ratio="1/1" />
+            </Box>
+          ) : null}
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/store-locations.types.ts b/packages/react/ui/src/blocks/store-locations.types.ts
new file mode 100644
index 0000000..8d88fff
--- /dev/null
+++ b/packages/react/ui/src/blocks/store-locations.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type Store = {
+  id: string;
+  name: string;
+  kind: string;
+  address: string;
+  hours: string;
+  phone: string;
+  note: string;
+  services: string[];
+};
+
+export type StoreLabels = {
+  map: string;
+};
diff --git a/packages/react/ui/src/blocks/story-tabs.tsx b/packages/react/ui/src/blocks/story-tabs.tsx
new file mode 100644
index 0000000..bffb77e
--- /dev/null
+++ b/packages/react/ui/src/blocks/story-tabs.tsx
@@ -0,0 +1,130 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/story-tabs.ts
+/**
+ * A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year
+ * with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next
+ * arrows and one dot per step), tone. Choosing a step emits `select`.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { StoryDots } from "../components/story-dots";
+import { StoryPanel } from "../components/story-panel";
+import type { StoryLabels } from "./story-tabs.types";
+import type { Milestone } from "./milestone-timeline.types";
+
+export type StoryTabsProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  steps: Milestone[];
+  empty?: string;
+  active: string;
+  labels: StoryLabels;
+  layout?: "years" | "carousel";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+  onSelect?: (id: string) => void;
+};
+
+export function StoryTabs({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  steps,
+  empty = "",
+  active,
+  labels,
+  layout = "years",
+  tone = "default",
+  landmarkLabel,
+  onSelect,
+}: StoryTabsProps) {
+  return (
+    <>
+      {((steps?.length ?? 0) === 0) ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="milestone" title={empty} />
+        </SectionFrame>
+      ) : ((layout as string) === "years") ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <Box className="grid grid-cols-2 gap-2 sm:grid-cols-4" data-testid="story-tabs">
+            {(steps ?? []).map((s) => (
+              <Button key={s.id}
+                variant={((s.id === active) ? "default" : "outline")}
+                size="lg"
+                type="button"
+                className="h-auto flex-col items-start gap-0 py-2 text-start"
+                data-testid="story-tab"
+                data-active={((s.id === active) ? "true" : "false")}
+                onClick={() => onSelect?.(s.id)}
+              >
+                <Inline className="text-sm font-semibold">
+                  {s.date}
+                </Inline>
+                <Inline className="text-xs">
+                  {s.tag}
+                </Inline>
+              </Button>
+            ))}
+          </Box>
+          {(steps ?? []).map((s, i) => (
+            <Fragment key={s.id}>
+              {(s.id === active) ? (
+                <StoryPanel s={s} index={i} total={(steps?.length ?? 0)} labels={labels} />
+              ) : null}
+            </Fragment>
+          ))}
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge }}
+          tone={tone}
+          layout="split"
+          media={{ show: true }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <Stack gap="4" align="stretch">
+              <MediaFrame alt={title} ratio="4/3" />
+              <Group gap="4" align="center" justify="between">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  layout="icon"
+                  type="button"
+                  aria-label={labels.previous}
+                  data-testid="story-arrow"
+                >
+                  <LucideIcon name="chevron-left" size={16} />
+                </Button>
+                <StoryDots steps={steps} active={active} />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  layout="icon"
+                  type="button"
+                  aria-label={labels.next}
+                  data-testid="story-arrow"
+                >
+                  <LucideIcon name="chevron-right" size={16} />
+                </Button>
+              </Group>
+            </Stack>
+          )}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/blocks/story-tabs.types.ts b/packages/react/ui/src/blocks/story-tabs.types.ts
new file mode 100644
index 0000000..04d1dc0
--- /dev/null
+++ b/packages/react/ui/src/blocks/story-tabs.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/story-tabs.ts
+
+export type StoryLabels = {
+  step: string;
+  previous: string;
+  next: string;
+};
diff --git a/packages/react/ui/src/blocks/support-channels.tsx b/packages/react/ui/src/blocks/support-channels.tsx
new file mode 100644
index 0000000..ddb0d64
--- /dev/null
+++ b/packages/react/ui/src/blocks/support-channels.tsx
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout
+ * (grid, list), columns, action (link, none), tone (default, muted).
+ */
+import { type ReactNode } from "react";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MenuEntry } from "../components/menu-entry";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type SupportChannelsProps = {
+  id: string;
+  title: string;
+  channels: Feature[];
+  empty?: string;
+  open: string;
+  layout?: "grid" | "list";
+  cols?: "1-2" | "1-3";
+  action?: "link" | "none";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function SupportChannels({
+  id,
+  title,
+  channels,
+  empty = "",
+  open,
+  layout = "grid",
+  cols = "1-3",
+  action = "link",
+  tone = "default",
+  landmarkLabel,
+}: SupportChannelsProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      {((channels?.length ?? 0) === 0) ? (
+        <EmptyState icon="life-buoy" title={empty} />
+      ) : (
+        <Grid cols={(((layout as string) === "list") ? "1" : cols)} className="gap-4" data-testid="items">
+          {(channels ?? []).map((c) => (
+            <Card key={c.id}
+              variant="default"
+              className={cn("h-full", (((layout as string) === "list") ? "flex-row items-center" : ""))}
+              data-testid="item"
+            >
+              <CardContent className={cn("flex flex-1 gap-4", (((layout as string) === "list") ? "items-center" : "flex-col"))}>
+                <LucideIcon name={c.icon} size={24} />
+                <Stack gap="2" className="flex-1">
+                  <Title as={3} size="base" weight="bold">
+                    {c.title}
+                  </Title>
+                  <Text size="sm" className="text-muted-foreground">
+                    {c.text}
+                  </Text>
+                </Stack>
+                {((action as string) === "link") ? (
+                  <MenuEntry href={c.href} className="font-semibold" testid="open">
+                    {open}
+                  </MenuEntry>
+                ) : null}
+              </CardContent>
+            </Card>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/team-grid.tsx b/packages/react/ui/src/blocks/team-grid.tsx
new file mode 100644
index 0000000..4e2e06d
--- /dev/null
+++ b/packages/react/ui/src/blocks/team-grid.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+/**
+ * The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows
+ * beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory),
+ * cols, tone, density.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { MemberRow } from "../components/member-row";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Member } from "./team-grid.types";
+
+export type TeamGridProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  members: Member[];
+  empty?: string;
+  depts: Record<string, string>;
+  layout?: "cards" | "minimal" | "detailed" | "list" | "directory";
+  cols?: "1-3" | "1-4";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function TeamGrid({
+  id,
+  title,
+  lead = "",
+  members,
+  empty = "",
+  depts,
+  layout = "cards",
+  cols = "1-4",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: TeamGridProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      density={density}
+      layout={(((layout as string) === "list") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "list"), side: "start", align: "start" }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="3/4" />
+      )}
+    >
+      {((members?.length ?? 0) === 0) ? (
+        <EmptyState icon="users" title={empty} />
+      ) : (
+        <Box
+          className={
+            (layout as string) === "minimal" ? "grid grid-cols-2 gap-8 md:grid-cols-4"
+            : (layout as string) === "directory" ? "grid grid-cols-1 gap-4 md:grid-cols-2"
+            : (layout as string) === "list" ? "flex flex-col gap-4"
+            : (cols as string) === "1-3" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+            : "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4"
+          }
+          data-testid="items"
+        >
+          {(members ?? []).map((m) => (
+            <Fragment key={m.id}>
+              {((layout as string) === "minimal") ? (
+                <Stack gap="2" align="center" className="text-center" data-testid="item">
+                  <MediaFrame alt={m.name} ratio="1/1" className={cn("size-16", "shrink-0")} />
+                  <Text size="sm" weight="semibold">
+                    {m.name}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {m.role}
+                  </Text>
+                </Stack>
+              ) : ((layout as string) === "cards") ? (
+                <Stack gap="4" className="rounded bg-card inset-ring inset-ring-border p-4" data-testid="item">
+                  <MediaFrame alt={m.name} ratio="1/1" />
+                  <Stack gap="2">
+                    <Stack gap="0">
+                      <Text size="base" weight="semibold">
+                        {m.name}
+                      </Text>
+                      <Text size="sm" className="text-muted-foreground">
+                        {m.role}
+                      </Text>
+                    </Stack>
+                    <Text size="sm" className="text-muted-foreground">
+                      {m.bio}
+                    </Text>
+                  </Stack>
+                </Stack>
+              ) : (
+                <MemberRow member={m} depts={depts} layout={layout} />
+              )}
+            </Fragment>
+          ))}
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/team-grid.types.ts b/packages/react/ui/src/blocks/team-grid.types.ts
new file mode 100644
index 0000000..fefd4c8
--- /dev/null
+++ b/packages/react/ui/src/blocks/team-grid.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Member = {
+  id: string;
+  name: string;
+  role: string;
+  dept: string;
+  location: string;
+  bio: string;
+  skills: string[];
+};
diff --git a/packages/react/ui/src/blocks/template-grid.tsx b/packages/react/ui/src/blocks/template-grid.tsx
new file mode 100644
index 0000000..5d021de
--- /dev/null
+++ b/packages/react/ui/src/blocks/template-grid.tsx
@@ -0,0 +1,141 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/templates.ts
+/**
+ * Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all
+ * button.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Template, Filter, TemplateLabels } from "./template-grid.types";
+
+export type TemplateGridProps = {
+  id: string;
+  title: string;
+  templates: Template[];
+  filters: Filter[];
+  browseHref?: string;
+  labels: TemplateLabels;
+  cols?: "1-3" | "1-4";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  empty?: string;
+  landmarkLabel?: string;
+};
+
+export function TemplateGrid({
+  id,
+  title,
+  templates,
+  filters,
+  browseHref,
+  labels,
+  cols = "1-4",
+  tone = "default",
+  density = "compact",
+  empty = "",
+  landmarkLabel,
+}: TemplateGridProps) {
+  return (
+    <SectionFrame
+      id={id}
+      tone={tone}
+      density={density}
+      measure="fill"
+      className="py-0"
+      landmarkLabel={landmarkLabel}
+    >
+      <Stack gap="8" align="stretch">
+        <Group gap="4" align="center" justify="between" className="h-8 w-full flex-wrap">
+          <Title as={2} size="2xl" weight="semibold" className="leading-9" id={(id + "-title")}>
+            {title}
+          </Title>
+          {((filters?.length ?? 0) > 0) ? (
+            <Group
+              gap="4"
+              align="center"
+              className="flex-wrap"
+              role="group"
+              aria-label={labels.filters}
+              data-testid="template-filters"
+            >
+              {(filters ?? []).map((f) => (
+                <Button key={f.id} variant="outline" size="sm" type="button" className="gap-2" data-testid="template-filter">
+                  {f.icon ? (
+                    <LucideIcon name={f.icon} size={16} />
+                  ) : null}
+                  {f.title}
+                </Button>
+              ))}
+            </Group>
+          ) : null}
+        </Group>
+        {((templates?.length ?? 0) === 0) ? (
+          <EmptyState icon="layout-template" title={empty} />
+        ) : (
+          <Grid cols={cols} className="w-full gap-6" data-testid="template-grid">
+            {(templates ?? []).map((t) => (
+              <Box key={t.id}
+                className={cn(
+                  "flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border",
+                  defaults.templates.card
+                )}
+                data-testid="template-card"
+              >
+                <Box className={cn("shrink-0 overflow-hidden", defaults.templates.image)}>
+                  <MediaFrame alt={t.title} className={cn("size-full", defaults.media.rounded)} />
+                </Box>
+                <Group gap="4" align="center" className={cn("w-full", defaults.templates.footer)} data-testid="template-footer">
+                  <IconBadge size="sm" className="overflow-hidden" data-testid="template-avatar">
+                    <LucideIcon name="layout-template" size={16} />
+                  </IconBadge>
+                  <Stack gap="0" className="min-w-0 flex-1">
+                    <Title as={3} size="base" weight="semibold" className="truncate leading-6">
+                      {t.title}
+                    </Title>
+                    <Group gap="4" align="center" className="h-4 text-muted-foreground">
+                      <Group gap="2" align="center">
+                        <LucideIcon name="eye" size={16} />
+                        <Inline className="sr-only">
+                          {labels.views}
+                        </Inline>
+                        <Text size="xs" weight="bold" className="leading-4">
+                          {t.views}
+                        </Text>
+                      </Group>
+                      <Group gap="2" align="center">
+                        <LucideIcon name="heart" size={16} />
+                        <Inline className="sr-only">
+                          {labels.likes}
+                        </Inline>
+                        <Text size="xs" weight="bold" className="leading-4">
+                          {t.likes}
+                        </Text>
+                      </Group>
+                    </Group>
+                  </Stack>
+                </Group>
+              </Box>
+            ))}
+          </Grid>
+        )}
+        <Button variant="outline" size="sm" href={browseHref} className="w-full" data-testid="template-browse">
+          {labels.browse}
+        </Button>
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/template-grid.types.ts b/packages/react/ui/src/blocks/template-grid.types.ts
new file mode 100644
index 0000000..3a51f9a
--- /dev/null
+++ b/packages/react/ui/src/blocks/template-grid.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/templates.ts
+
+export type Template = {
+  id: string;
+  title: string;
+  views: string;
+  likes: string;
+  topic: string;
+};
+
+export type Filter = {
+  id: string;
+  title: string;
+  value: string;
+  icon?: string;
+};
+
+export type TemplateLabels = {
+  filters: string;
+  browse: string;
+  views: string;
+  likes: string;
+};
diff --git a/packages/react/ui/src/blocks/testimonial-grid.tsx b/packages/react/ui/src/blocks/testimonial-grid.tsx
new file mode 100644
index 0000000..56fcaf0
--- /dev/null
+++ b/packages/react/ui/src/blocks/testimonial-grid.tsx
@@ -0,0 +1,82 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/**
+ * Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured
+ * quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card,
+ * plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the
+ * Carousel port contract around the single layout.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Grid } from "../primitives/grid/grid";
+import { EmptyState } from "../components/empty-state";
+import { QuoteCard } from "../components/quote-card";
+import { SectionFrame } from "../components/section-frame";
+import type { Quote, QuoteLabels, QuoteItem } from "./testimonial-grid.types";
+
+export type TestimonialGridProps = {
+  id: string;
+  title: string;
+  quotes: Quote[];
+  empty?: string;
+  labels: QuoteLabels;
+  layout?: "grid" | "single" | "stack" | "masonry" | "strip";
+  cols?: "1-2" | "1-3";
+  item?: QuoteItem;
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function TestimonialGrid({
+  id,
+  title,
+  quotes,
+  empty = "",
+  labels,
+  layout = "grid",
+  cols = "1-3",
+  item,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: TestimonialGridProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      align={(((layout as string) === "single") ? "center" : "start")}
+      measure={(((layout as string) === "grid") ? "default" : "2xl")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((quotes?.length ?? 0) === 0) ? (
+        <EmptyState icon="message-square-quote" title={empty} />
+      ) : (((layout as string) === "masonry") || ((layout as string) === "strip")) ? (
+        <Block
+          tag="div"
+          className={
+            (layout as string) === "masonry" ? "columns-1 gap-4 md:columns-2 xl:columns-3"
+            : "flex snap-x gap-4 overflow-x-auto pb-2"
+          }
+          data-testid="items"
+        >
+          {(quotes ?? []).map((q) => (
+            <QuoteCard key={q.id} q={q} labels={labels} item={item} layout={layout} />
+          ))}
+        </Block>
+      ) : (
+        <Grid cols={(((layout as string) === "grid") ? cols : "1")} className="gap-4" data-testid="items">
+          {(quotes ?? []).map((q, i) => (
+            <Fragment key={q.id}>
+              {(((layout as string) !== "single") || (i === 0)) ? (
+                <QuoteCard q={q} labels={labels} item={item} layout={layout} />
+              ) : null}
+            </Fragment>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/testimonial-grid.types.ts b/packages/react/ui/src/blocks/testimonial-grid.types.ts
new file mode 100644
index 0000000..cff2f47
--- /dev/null
+++ b/packages/react/ui/src/blocks/testimonial-grid.types.ts
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Quote = {
+  id: string;
+  author: string;
+  role: string;
+  company: string;
+  quote: string;
+  rating: number;
+  handle: string;
+  time: string;
+  mark: string;
+};
+
+export type QuoteLabels = {
+  /** template of the rating's accessible name, e.g. `{0} out of 5` */
+  rating: string;
+  /** template of the line under the author, e.g. `{0}, {1}` (role, company) */
+  byLine: string;
+  /** template of the line under a social author, e.g. `{0} / {1}` (handle, time) */
+  handleLine: string;
+};
+
+export type QuoteItem = {
+  /** card: boxed; plain: a bare figure; social: a post of a social wall */
+  kind?: "card" | "plain" | "social";
+  /** a round picture of the author */
+  avatar?: "none" | "image";
+  /** the stars (not on social posts) */
+  rating?: "show" | "hide";
+  /** a company glyph above the quote */
+  mark?: "none" | "icon";
+};
diff --git a/packages/react/ui/src/blocks/tour-callout.tsx b/packages/react/ui/src/blocks/tour-callout.tsx
new file mode 100644
index 0000000..d4d9763
--- /dev/null
+++ b/packages/react/ui/src/blocks/tour-callout.tsx
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the
+ * position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target),
+ * tone, density.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+
+export type TourCalloutProps = {
+  id: string;
+  title: string;
+  text: string;
+  target: string;
+  position: string;
+  skip: string;
+  next: string;
+  placement?: "below" | "above" | "end";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function TourCallout({
+  id,
+  title,
+  text,
+  target,
+  position,
+  skip,
+  next,
+  placement = "below",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: TourCalloutProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      <Block
+        tag="div"
+        className={cn(
+          "flex gap-4",
+          (
+            (placement as string) === "end" ? "flex-col items-start md:flex-row md:items-center"
+            : (placement as string) === "above" ? "flex-col-reverse items-start"
+            : "flex-col items-start"
+          )
+        )}
+        data-testid="tour"
+        data-placement={placement}
+      >
+        <Button
+          variant="outline"
+          size="default"
+          type="button"
+          className="inset-ring-foreground"
+          data-testid="tour-target"
+        >
+          {target}
+        </Button>
+        <Stack
+          gap="4"
+          align="stretch"
+          className={cn(
+            "w-full max-w-sm",
+            "rounded bg-card inset-ring inset-ring-border",
+            "p-4",
+            "shadow-md"
+          )}
+          role="group"
+          aria-label={title}
+          data-testid="tour-callout"
+        >
+          <Text size="xs" className="text-muted-foreground">
+            {position}
+          </Text>
+          <Text size="base" weight="semibold">
+            {title}
+          </Text>
+          <Text size="sm" className="text-muted-foreground">
+            {text}
+          </Text>
+          <Group gap="2" justify="end">
+            <Button variant="ghost" size="sm" type="button">
+              {skip}
+            </Button>
+            <Button variant="default" size="sm" type="button">
+              {next}
+            </Button>
+          </Group>
+        </Stack>
+      </Block>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/usage-calculator.tsx b/packages/react/ui/src/blocks/usage-calculator.tsx
new file mode 100644
index 0000000..d1060af
--- /dev/null
+++ b/packages/react/ui/src/blocks/usage-calculator.tsx
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+/**
+ * A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps
+ * the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the
+ * largest amount under the slider, hide), tone.
+ */
+import { type ChangeEvent, type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Range } from "../primitives/range/range";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { SectionFrame } from "../components/section-frame";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { UsageSlider, UsagePrice } from "./usage-calculator.types";
+
+export type UsageCalculatorProps = {
+  id: string;
+  title: string;
+  text: string;
+  usage: number;
+  slider: UsageSlider;
+  price: UsagePrice;
+  cta: string;
+  href?: string;
+  layout?: "card" | "plain";
+  ends?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+  onUsage?: (value: string) => void;
+};
+
+export function UsageCalculator({
+  id,
+  title,
+  text,
+  usage,
+  slider,
+  price,
+  cta,
+  href,
+  layout = "card",
+  ends = "show",
+  tone = "default",
+  landmarkLabel,
+  onUsage,
+}: UsageCalculatorProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={text} tone={tone} align="center" landmarkLabel={landmarkLabel}>
+      <Stack
+        gap="4"
+        align="stretch"
+        className={cn(
+          "mx-auto w-full max-w-xl",
+          (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+        )}
+        data-testid="usage"
+      >
+        <Group justify="between" align="baseline">
+          <Text size="xl" weight="bold">
+            {tpl(slider.unit, usage)}
+          </Text>
+          <Text size="sm" className="text-muted-foreground">
+            {slider.label}
+          </Text>
+        </Group>
+        <Range
+          min={slider.min}
+          max={slider.max}
+          value={usage}
+          aria-label={slider.label}
+          data-testid="slider"
+          onChange={(event: ChangeEvent<HTMLInputElement>) => onUsage?.(event.currentTarget.value)}
+        />
+        {((ends as string) === "show") ? (
+          <Group justify="between" data-testid="ends">
+            <Text size="xs" className="text-muted-foreground">
+              {tpl(slider.unit, slider.min)}
+            </Text>
+            <Text size="xs" className="text-muted-foreground">
+              {tpl(slider.unit, slider.max)}
+            </Text>
+          </Group>
+        ) : null}
+        <Group justify="between" align="center" className="flex-wrap">
+          <Stack gap="0">
+            <Text size="xs" className="text-muted-foreground">
+              {price.label}
+            </Text>
+            <Text size="4xl" weight="bold" data-testid="estimate">
+              {fmtMoney((usage * price.rate), price.currency)}
+            </Text>
+          </Stack>
+          <Button variant="default" size="default" href={href} data-testid="submit">
+            {cta}
+          </Button>
+        </Group>
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/usage-calculator.types.ts b/packages/react/ui/src/blocks/usage-calculator.types.ts
new file mode 100644
index 0000000..6577d8d
--- /dev/null
+++ b/packages/react/ui/src/blocks/usage-calculator.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type UsageSlider = {
+  min: number;
+  max: number;
+  /** accessible name of the slider */
+  label: string;
+  /** template of an amount, e.g. `{0} credits` */
+  unit: string;
+};
+
+export type UsagePrice = {
+  /** price of one unit in minor units (cents) */
+  rate: number;
+  currency: string;
+  /** name of the estimate */
+  label: string;
+};
diff --git a/packages/react/ui/src/blocks/usp-strip.tsx b/packages/react/ui/src/blocks/usp-strip.tsx
new file mode 100644
index 0000000..facd548
--- /dev/null
+++ b/packages/react/ui/src/blocks/usp-strip.tsx
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/storefront.ts
+/**
+ * The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted
+ * panel, cards: a card each, bar: a thin line of icons and titles), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type UspStripProps = {
+  id: string;
+  title?: string;
+  perks: Feature[];
+  empty?: string;
+  layout?: "strip" | "cards" | "bar";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function UspStrip({
+  id,
+  title = "",
+  perks,
+  empty = "",
+  layout = "strip",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: UspStripProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((perks?.length ?? 0) === 0) ? (
+        <EmptyState icon="truck" title={empty} />
+      ) : ((layout as string) === "bar") ? (
+        <List tag="ul" className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4" data-testid="items">
+          {(perks ?? []).map((p) => (
+            <ListItem key={p.id} className="flex items-center gap-2 text-sm font-medium" data-testid="item">
+              <LucideIcon name={p.icon} size={16} />
+              <Inline>
+                {p.title}
+              </Inline>
+            </ListItem>
+          ))}
+        </List>
+      ) : (
+        <Grid
+          cols="1-4"
+          className={cn("gap-4", (((layout as string) === "strip") ? "rounded bg-muted p-6" : ""))}
+          data-testid="items"
+        >
+          {(perks ?? []).map((p) => (
+            <Stack key={p.id}
+              gap="4"
+              className={
+                (layout as string) === "cards" ? "rounded bg-card inset-ring inset-ring-border p-6"
+                : ""
+              }
+              data-testid="item"
+            >
+              <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                <LucideIcon name={p.icon} size={20} />
+              </Box>
+              <Stack gap="2">
+                <Text size="sm" weight="semibold">
+                  {p.title}
+                </Text>
+                <Text size="sm" className="text-muted-foreground">
+                  {p.text}
+                </Text>
+              </Stack>
+            </Stack>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/video-grid.tsx b/packages/react/ui/src/blocks/video-grid.tsx
new file mode 100644
index 0000000..1b05321
--- /dev/null
+++ b/packages/react/ui/src/blocks/video-grid.tsx
@@ -0,0 +1,98 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port
+ * contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone,
+ * density.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Quote } from "./testimonial-grid.types";
+
+export type VideoGridProps = {
+  id: string;
+  title: string;
+  quotes: Quote[];
+  empty?: string;
+  playLabel: string;
+  byLine: string;
+  cols?: "1-2" | "1-3";
+  caption?: "below" | "overlay";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+  onPlay?: (id: string) => void;
+};
+
+export function VideoGrid({
+  id,
+  title,
+  quotes,
+  empty = "",
+  playLabel,
+  byLine,
+  cols = "1-3",
+  caption = "below",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onPlay,
+}: VideoGridProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((quotes?.length ?? 0) === 0) ? (
+        <EmptyState icon="video" title={empty} />
+      ) : (
+        <Grid cols={cols} className="gap-4" data-testid="items">
+          {(quotes ?? []).map((q) => (
+            <FigureBlock key={q.id} className="m-0 flex flex-col gap-4" testid="item">
+              <Box className="relative">
+                <MediaFrame alt={q.author} />
+                <Button
+                  variant="default"
+                  size="default"
+                  type="button"
+                  className="absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0"
+                  aria-label={tpl(playLabel, q.author)}
+                  data-testid="play"
+                  onClick={() => onPlay?.(q.id)}
+                >
+                  <LucideIcon name="play" size={20} />
+                </Button>
+                {((caption as string) === "overlay") ? (
+                  <Box className="absolute inset-x-0 bottom-0 rounded bg-background p-4" data-testid="caption">
+                    <Text size="sm" weight="semibold">
+                      {q.author}
+                    </Text>
+                    <Text size="xs" className="text-muted-foreground">
+                      {tpl(byLine, q.role, q.company)}
+                    </Text>
+                  </Box>
+                ) : null}
+              </Box>
+              {((caption as string) === "below") ? (
+                <Text tag="figcaption" data-testid="caption">
+                  <Text size="sm" weight="semibold">
+                    {q.author}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {tpl(byLine, q.role, q.company)}
+                  </Text>
+                </Text>
+              ) : null}
+            </FigureBlock>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/video-modal.tsx b/packages/react/ui/src/blocks/video-modal.tsx
new file mode 100644
index 0000000..f361952
--- /dev/null
+++ b/packages/react/ui/src/blocks/video-modal.tsx
@@ -0,0 +1,114 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * A dialog with a walkthrough video: a title and a close button, the player area with a play button and,
+ * optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size
+ * (default, wide), outline (none, chapters: a list under the player), tone.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Chapter } from "./video-modal.types";
+
+export type VideoModalProps = {
+  id: string;
+  title: string;
+  text: string;
+  close: string;
+  play: string;
+  chaptersTitle: string;
+  chapters: Chapter[];
+  size?: "default" | "wide";
+  outline?: "none" | "chapters";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function VideoModal({
+  id,
+  title,
+  text,
+  close,
+  play,
+  chaptersTitle,
+  chapters,
+  size = "default",
+  outline = "none",
+  tone = "default",
+  landmarkLabel,
+}: VideoModalProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Stack
+        gap="4"
+        align="stretch"
+        className={cn(
+          "mx-auto w-full",
+          (((size as string) === "wide") ? "max-w-4xl" : "max-w-2xl"),
+          "rounded bg-card inset-ring inset-ring-border p-4 shadow-lg"
+        )}
+        role="dialog"
+        aria-label={title}
+        data-testid="video-modal"
+      >
+        <Group gap="2" align="center" justify="between">
+          <Text size="sm" className="text-muted-foreground">
+            {text}
+          </Text>
+          <Button
+            variant="ghost"
+            size="sm"
+            type="button"
+            className="shrink-0"
+            aria-label={close}
+            data-testid="modal-close"
+          >
+            <LucideIcon name="x" size={16} />
+          </Button>
+        </Group>
+        <Box className="relative" data-testid="player">
+          <MediaFrame alt={title} />
+          <Button
+            variant="default"
+            size="default"
+            type="button"
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded"
+            aria-label={play}
+            data-testid="play"
+          >
+            <LucideIcon name="play" size={24} />
+          </Button>
+        </Box>
+        {(((outline as string) === "chapters") && ((chapters?.length ?? 0) > 0)) ? (
+          <Stack gap="2" data-testid="chapters">
+            <Title as={3} size="base" weight="bold">
+              {chaptersTitle}
+            </Title>
+            <List className="m-0 flex list-none flex-col gap-2 p-0">
+              {(chapters ?? []).map((c) => (
+                <ListItem key={c.id} className="flex items-baseline gap-4" data-testid="item">
+                  <Text size="sm" weight="semibold">
+                    {c.title}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {c.text}
+                  </Text>
+                </ListItem>
+              ))}
+            </List>
+          </Stack>
+        ) : null}
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/video-modal.types.ts b/packages/react/ui/src/blocks/video-modal.types.ts
new file mode 100644
index 0000000..42259ea
--- /dev/null
+++ b/packages/react/ui/src/blocks/video-modal.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Chapter = {
+  id: string;
+  title: string;
+  text: string;
+};
diff --git a/packages/react/ui/src/blocks/zone-table.tsx b/packages/react/ui/src/blocks/zone-table.tsx
new file mode 100644
index 0000000..7ea0725
--- /dev/null
+++ b/packages/react/ui/src/blocks/zone-table.tsx
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+/**
+ * Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that
+ * ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Grid } from "../primitives/grid/grid";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { ZoneRows } from "../components/zone-rows";
+import { fmtMoney } from "../utils";
+import type { Zone, ZoneLabels } from "./zone-table.types";
+
+export type ZoneTableProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  zones: Zone[];
+  empty?: string;
+  labels: ZoneLabels;
+  layout?: "table" | "cards";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function ZoneTable({
+  id,
+  title,
+  lead = "",
+  zones,
+  empty = "",
+  labels,
+  layout = "table",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ZoneTableProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((zones?.length ?? 0) === 0) ? (
+        <EmptyState icon="map" title={empty} />
+      ) : ((layout as string) === "table") ? (
+        <ZoneRows zones={zones} labels={labels} />
+      ) : (
+        <Grid cols="1-3" className="gap-4" data-testid="items">
+          {(zones ?? []).map((z) => (
+            <Stack key={z.id} gap="4" className="rounded bg-card inset-ring inset-ring-border p-6" data-testid="item">
+              <Stack gap="2">
+                <Title as={3} size="lg" weight="bold">
+                  {z.name}
+                </Title>
+                <Text size="sm" className="text-muted-foreground">
+                  {z.area}
+                </Text>
+              </Stack>
+              <Text size="3xl" weight="bold">
+                {fmtMoney(z.price, z.currency)}
+              </Text>
+              <List tag="ul" className="flex flex-col gap-2 border-t border-border pt-4">
+                <ListItem className="flex items-center justify-between gap-4 text-sm">
+                  <Inline className="text-muted-foreground">
+                    {labels.freeFrom}
+                  </Inline>
+                  <Inline className="font-medium">
+                    {fmtMoney(z.freeFrom, z.currency)}
+                  </Inline>
+                </ListItem>
+                <ListItem className="flex items-center justify-between gap-4 text-sm">
+                  <Inline className="text-muted-foreground">
+                    {labels.minOrder}
+                  </Inline>
+                  <Inline className="font-medium">
+                    {fmtMoney(z.minOrder, z.currency)}
+                  </Inline>
+                </ListItem>
+                <ListItem className="flex items-center justify-between gap-4 text-sm">
+                  <Inline className="text-muted-foreground">
+                    {labels.time}
+                  </Inline>
+                  <Inline className="font-medium">
+                    {z.time}
+                  </Inline>
+                </ListItem>
+              </List>
+              {z.express ? (
+                <Badge variant="secondary" size="default" className="w-fit">
+                  {z.express}
+                </Badge>
+              ) : null}
+            </Stack>
+          ))}
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/react/ui/src/blocks/zone-table.types.ts b/packages/react/ui/src/blocks/zone-table.types.ts
new file mode 100644
index 0000000..6b8a1b2
--- /dev/null
+++ b/packages/react/ui/src/blocks/zone-table.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type Zone = {
+  id: string;
+  name: string;
+  area: string;
+  price: number;
+  freeFrom: number;
+  minOrder: number;
+  time: string;
+  express: string;
+  currency: string;
+};
+
+export type ZoneLabels = {
+  caption: string;
+  zone: string;
+  price: string;
+  freeFrom: string;
+  minOrder: string;
+  time: string;
+  express: string;
+};
diff --git a/packages/react/ui/src/components/action-group.tsx b/packages/react/ui/src/components/action-group.tsx
new file mode 100644
index 0000000..7708f66
--- /dev/null
+++ b/packages/react/ui/src/components/action-group.tsx
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not
+ * handlers: the page decides what they open.
+ */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+
+export type ActionGroupProps = {
+  primary: string;
+  primaryHref?: string;
+  secondary?: string;
+  secondaryHref?: string;
+  align?: "start" | "center";
+};
+
+export function ActionGroup({
+  primary,
+  primaryHref,
+  secondary,
+  secondaryHref,
+  align = "start",
+}: ActionGroupProps) {
+  return (
+    <Group
+      gap="4"
+      align="center"
+      justify={(((align as string) === "center") ? "center" : "start")}
+      className="flex-wrap"
+      data-slot="action-group"
+    >
+      <Button variant="default" size="default" href={primaryHref} data-testid="action-primary">
+        {primary}
+      </Button>
+      {secondary ? (
+        <Button variant="outline" size="default" href={secondaryHref} data-testid="action-secondary">
+          {secondary}
+        </Button>
+      ) : null}
+    </Group>
+  );
+}
diff --git a/packages/react/ui/src/components/app-main.tsx b/packages/react/ui/src/components/app-main.tsx
new file mode 100644
index 0000000..2be18d8
--- /dev/null
+++ b/packages/react/ui/src/components/app-main.tsx
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/app-main.ts
+/**
+ * The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel
+ * when `activity` is given).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { Title } from "../primitives/title/title";
+import { BarChart } from "../components/bar-chart";
+import { Panel } from "../components/panel";
+import { StatTile } from "../components/stat-tile";
+import { Timeline } from "../components/timeline";
+import { tpl } from "../utils";
+import type { Metric } from "../blocks/metric-row.types";
+import type { Point } from "../blocks/chart-panel.types";
+import type { Event } from "../blocks/activity-feed.types";
+import type { OverviewChart, OverviewActivity } from "../blocks/dashboard-overview.types";
+
+export type AppMainProps = {
+  id: string;
+  title: string;
+  metrics: Metric[];
+  chart: OverviewChart;
+  activity?: OverviewActivity;
+  cols?: "1-2" | "1-4";
+  density?: "default" | "compact";
+};
+
+export function AppMain({
+  id,
+  title,
+  metrics,
+  chart,
+  activity,
+  cols = "1-2",
+  density = "default",
+}: AppMainProps) {
+  return (
+    <Stack
+      gap={(((density as string) === "compact") ? "4" : "6")}
+      align="stretch"
+      className="min-w-0"
+      data-testid="app-main"
+    >
+      <Title as={2} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+        {title}
+      </Title>
+      {((metrics?.length ?? 0) > 0) ? (
+        <Grid cols={cols} className="gap-4" data-testid="items">
+          {(metrics ?? []).map((m) => (
+            <Box key={m.id} data-testid="item">
+              <StatTile label={m.label} value={m.value} icon={m.icon} hint={m.hint} />
+            </Box>
+          ))}
+        </Grid>
+      ) : null}
+      {activity ? (
+        <Grid cols="1-2" className="items-stretch gap-4">
+          {((chart.series?.length ?? 0) > 0) ? (
+            <Panel title={chart.title} description={chart.text} id={tpl("{0}-chart", id)} className="h-full">
+              <BarChart bars={chart.series} label={chart.summary} height={144} />
+            </Panel>
+          ) : null}
+          {((activity?.events?.length ?? 0) > 0) ? (
+            <Panel title={activity?.title} description={activity?.text} id={tpl("{0}-feed", id)} className="h-full">
+              <Timeline items={activity?.events} />
+            </Panel>
+          ) : null}
+        </Grid>
+      ) : ((chart.series?.length ?? 0) > 0) ? (
+        <Panel title={chart.title} description={chart.text} id={tpl("{0}-chart", id)} className="h-full">
+          <BarChart bars={chart.series} label={chart.summary} height={144} />
+        </Panel>
+      ) : null}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/article-block.tsx b/packages/react/ui/src/components/article-block.tsx
new file mode 100644
index 0000000..a71f1d1
--- /dev/null
+++ b/packages/react/ui/src/components/article-block.tsx
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/landmarks.ts
+/** A self-contained item (a review, a card, a project) in its own file: Block tag article. */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { cn } from "../utils";
+
+export type ArticleBlockProps = {
+  testid?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function ArticleBlock({ testid, className, children }: ArticleBlockProps) {
+  return (
+    <Block tag="article" className={cn(className)} data-testid={testid}>
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/auth-form.tsx b/packages/react/ui/src/components/auth-form.tsx
new file mode 100644
index 0000000..f5d409c
--- /dev/null
+++ b/packages/react/ui/src/components/auth-form.tsx
@@ -0,0 +1,73 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/auth.ts
+/**
+ * The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot
+ * link, the terms, the submit button.
+ */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Checkbox } from "../primitives/checkbox/checkbox";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { Field } from "../components/field";
+import { cn, tpl } from "../utils";
+import type { AuthLabels } from "../blocks/auth-card.types";
+
+export type AuthFormProps = {
+  id: string;
+  mode?: "signin" | "signup" | "reset" | "magic";
+  labels: AuthLabels;
+  submit: string;
+};
+
+export function AuthForm({ id, mode = "signin", labels, submit }: AuthFormProps) {
+  return (
+    <Form method="dialog" className="gap-4" data-testid="auth-form">
+      {((mode as string) === "signup") ? (
+        <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+          <Input type="text" name="name" autoComplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+        </Field>
+      ) : null}
+      <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+        <Input type="email" name="email" autoComplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+      </Field>
+      {(((mode as string) !== "reset") && ((mode as string) !== "magic")) ? (
+        <Field label={labels.password} htmlFor={tpl("{0}-password", id)}>
+          <Input
+            type="password"
+            name="password"
+            autoComplete={(((mode as string) === "signup") ? "new-password" : "current-password")}
+            id={tpl("{0}-password", id)}
+            data-testid="field"
+          />
+        </Field>
+      ) : null}
+      {((mode as string) === "signin") ? (
+        <Group justify="between" align="center" className="flex-wrap gap-2">
+          <Group gap="2" align="center" className={cn("w-fit", "")}>
+            <Checkbox name="remember" id={tpl("{0}-remember", id)} />
+            <Label htmlFor={tpl("{0}-remember", id)} className="text-sm">
+              {labels.remember}
+            </Label>
+          </Group>
+          <Button variant="link" size="sm" className="px-0">
+            {labels.forgot}
+          </Button>
+        </Group>
+      ) : null}
+      {((mode as string) === "signup") ? (
+        <Group gap="2" align="center" className={cn("w-fit", "")}>
+          <Checkbox name="terms" id={tpl("{0}-terms", id)} />
+          <Label htmlFor={tpl("{0}-terms", id)} className="text-sm">
+            {labels.terms}
+          </Label>
+        </Group>
+      ) : null}
+      <Button variant="default" size="default" type="submit" className="w-full" data-testid="submit">
+        {submit}
+      </Button>
+    </Form>
+  );
+}
diff --git a/packages/react/ui/src/components/avatar.tsx b/packages/react/ui/src/components/avatar.tsx
new file mode 100644
index 0000000..c5a1dcf
--- /dev/null
+++ b/packages/react/ui/src/components/avatar.tsx
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round. */
+import { type ReactNode } from "react";
+import { Image } from "../primitives/image/image";
+import { Inline } from "../primitives/inline/inline";
+import { cn, variants } from "../utils";
+
+/** Avatar: the classes of each value (shadcn/cva style). */
+export const avatarVariants = variants({
+  base: "relative inline-flex shrink-0 overflow-hidden bg-muted rounded-full",
+  variants: {
+    size: {
+      xs: "size-6",
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12",
+      xl: "size-16",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type AvatarProps = {
+  src: string;
+  alt?: string;
+  size?: "xs" | "sm" | "default" | "lg" | "xl";
+  className?: string;
+};
+
+export function Avatar({ src, alt = "", size = "default", className }: AvatarProps) {
+  return (
+    <Inline className={cn(avatarVariants({ size: size }), className)} data-slot="avatar">
+      <Image
+        src={src}
+        alt={alt}
+        className="size-full object-cover"
+        fit="cover"
+        size="auto"
+        loading="eager"
+        decoding="auto"
+        draggable="false"
+      />
+    </Inline>
+  );
+}
diff --git a/packages/react/ui/src/components/backdrop.tsx b/packages/react/ui/src/components/backdrop.tsx
new file mode 100644
index 0000000..93c056b
--- /dev/null
+++ b/packages/react/ui/src/components/backdrop.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the
+ * Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of
+ * the block (rule 01).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { MediaFrame } from "../components/media-frame";
+
+export type BackdropProps = {
+  kind?: "none" | "image";
+  alt?: string;
+};
+
+export function Backdrop({ kind = "none", alt = "" }: BackdropProps) {
+  return (
+    <>
+      {((kind as string) === "image") ? (
+        <Box className="pointer-events-none absolute inset-0 -z-10" data-testid="backdrop">
+          <MediaFrame alt={alt} ratio="21/9" className="size-full rounded-none opacity-30" />
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/badge-square.tsx b/packages/react/ui/src/components/badge-square.tsx
new file mode 100644
index 0000000..3b3108d
--- /dev/null
+++ b/packages/react/ui/src/components/badge-square.tsx
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd). */
+import { type ReactNode } from "react";
+import { Inline } from "../primitives/inline/inline";
+import { cn, variants } from "../utils";
+
+/** BadgeSquare: the classes of each value (shadcn/cva style). */
+export const badgeSquareVariants = variants({
+  base:
+    "inline-flex shrink-0 items-center justify-center bg-card text-xs font-medium whitespace-nowrap text-foreground " +
+    "inset-ring inset-ring-border rounded",
+  variants: {
+    size: {
+      sm: "h-4 min-w-4 px-1",
+      default: "h-5 px-2",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type BadgeSquareProps = {
+  size?: "sm" | "default";
+  className?: string;
+  children?: ReactNode;
+};
+
+export function BadgeSquare({ size = "default", className, children }: BadgeSquareProps) {
+  return (
+    <Inline className={cn(badgeSquareVariants({ size: size }), className)} data-slot="badge-square">
+      {children}
+    </Inline>
+  );
+}
diff --git a/packages/react/ui/src/components/bar-chart.tsx b/packages/react/ui/src/components/bar-chart.tsx
new file mode 100644
index 0000000..ac34914
--- /dev/null
+++ b/packages/react/ui/src/components/bar-chart.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image
+ * for assistive technology: `label` carries the summary, the bar values are in the captions and titles.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+import type { Bar } from "./bar-chart.types";
+
+export type BarChartProps = {
+  bars: Bar[];
+  label: string;
+  max?: number;
+  height?: number;
+  className?: string;
+};
+
+export function BarChart({ bars, label, max, height = 160, className }: BarChartProps) {
+  const top = Math.max(1, (max ?? bars.reduce((m, i) => Math.max(m, i.value), 0)));
+  return (
+    <Box className={cn("min-w-0", className)} data-slot="bar-chart">
+      <Box className="flex min-w-0 items-end gap-2" role="img" aria-label={label} style={{ height: `${height}px` }}>
+        {(bars ?? []).map((b) => (
+          <Box key={b.id} className="flex h-full min-w-0 flex-1 items-end" title={(b.title ?? b.label)}>
+            <Box
+              className={cn("w-full rounded", (b.muted ? "bg-muted-foreground" : "bg-primary"))}
+              style={{ height: `${Math.max(2, Math.round(((b.value / top) * 100)))}%` }}
+              data-bar={b.id}
+            />
+          </Box>
+        ))}
+      </Box>
+      <Box className="mt-2 flex min-w-0 gap-2" aria-hidden="true">
+        {(bars ?? []).map((b) => (
+          <Box key={b.id} className="relative h-4 min-w-0 flex-1">
+            <Text className={"absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground"}>
+              {b.label}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/bar-chart.types.ts b/packages/react/ui/src/components/bar-chart.types.ts
new file mode 100644
index 0000000..7125a60
--- /dev/null
+++ b/packages/react/ui/src/components/bar-chart.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+
+export type Bar = {
+  id: string;
+  label: string;
+  value: number;
+  title?: string;
+  muted?: boolean;
+};
diff --git a/packages/react/ui/src/components/bulk-bar.tsx b/packages/react/ui/src/components/bulk-bar.tsx
new file mode 100644
index 0000000..cbfa52e
--- /dev/null
+++ b/packages/react/ui/src/components/bulk-bar.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * The "N selected" bar of a list: a count, a clear button and the bulk actions (children). All text comes in
+ * through props.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn } from "../utils";
+
+export type BulkBarProps = {
+  label: string;
+  clearLabel: string;
+  className?: string;
+  children?: ReactNode;
+  onClear?: () => void;
+};
+
+export function BulkBar({ label, clearLabel, className, children, onClear }: BulkBarProps) {
+  return (
+    <Box
+      className={cn(
+        "flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background",
+        className
+      )}
+      role="region"
+      aria-label={label}
+      aria-live="polite"
+      data-slot="bulk-bar"
+      data-testid="bulk-bar"
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        layout="icon"
+        type="button"
+        aria-label={clearLabel}
+        className="text-background hover:bg-background/15 hover:text-background"
+        onClick={() => onClear?.()}
+      >
+        <LucideIcon name="x" size={16} />
+      </Button>
+      <Inline data-testid="bulk-count">
+        {label}
+      </Inline>
+      <Inline className="ml-auto flex flex-wrap items-center gap-2">
+        {children}
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/cart-summary-card.tsx b/packages/react/ui/src/components/cart-summary-card.tsx
new file mode 100644
index 0000000..3508ca4
--- /dev/null
+++ b/packages/react/ui/src/components/cart-summary-card.tsx
@@ -0,0 +1,144 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/**
+ * The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field
+ * with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Button } from "../primitives/button/button";
+import { Progress } from "../primitives/form/progress";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Input } from "../primitives/input/input";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { Promo, CartSummaryLabels } from "./cart-summary-card.types";
+import type { CartLine } from "../blocks/cart-list.types";
+import type { SummaryRow } from "../blocks/order-summary.types";
+
+export type CartSummaryCardProps = {
+  lines: CartLine[];
+  rows: SummaryRow[];
+  promos: Promo[];
+  labels: CartSummaryLabels;
+  items?: "show" | "hide";
+  promo?: "show" | "hide";
+  field?: string;
+  progress?: "show" | "hide";
+  value?: number;
+};
+
+export function CartSummaryCard({
+  lines,
+  rows,
+  promos,
+  labels,
+  items = "hide",
+  promo = "show",
+  field = "promo",
+  progress = "show",
+  value = 70,
+}: CartSummaryCardProps) {
+  return (
+    <Stack
+      gap="6"
+      align="stretch"
+      className="rounded bg-card inset-ring inset-ring-border p-6"
+      data-testid="summary"
+    >
+      <Group gap="4" align="baseline" justify="between">
+        <Title as={2} size="lg" weight="semibold">
+          {labels.title}
+        </Title>
+        <Text size="xs" className="text-muted-foreground">
+          {tpl(labels.items, ((lines?.length ?? 0) == null ? undefined : String((lines?.length ?? 0))))}
+        </Text>
+      </Group>
+      {(((items as string) === "show") && ((lines?.length ?? 0) > 0)) ? (
+        <List tag="ul" className="flex flex-col gap-4" data-testid="summary-lines">
+          {(lines ?? []).map((line) => (
+            <ListItem key={line.id} className="flex items-center gap-4 text-sm">
+              <MediaFrame alt={line.name} ratio="1/1" className="size-12 shrink-0" />
+              <Stack gap="0" className="flex-1">
+                <Text size="sm" weight="semibold">
+                  {line.name}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {tpl("{0} x {1}", line.qty, fmtMoney(line.price, line.currency))}
+                </Text>
+              </Stack>
+              <Inline className="font-medium">
+                {fmtMoney((line.price * line.qty), line.currency)}
+              </Inline>
+            </ListItem>
+          ))}
+        </List>
+      ) : null}
+      {((promo as string) === "show") ? (
+        <Stack gap="2" align="stretch" data-testid="promo">
+          <Group gap="2" align="center">
+            <Input type="text" name={field} aria-label={labels.promo} placeholder={labels.promo} className="min-w-0 flex-1" />
+            <Button variant="outline" size="default" type="button">
+              {labels.apply}
+            </Button>
+          </Group>
+          {((promos?.length ?? 0) > 0) ? (
+            <Group gap="2" align="center" className="flex-wrap">
+              <Text size="xs" className="text-muted-foreground">
+                {labels.codes}
+              </Text>
+              {(promos ?? []).map((c) => (
+                <Badge key={c.id} variant="outline" size="sm" data-testid="code">
+                  {c.code}
+                </Badge>
+              ))}
+            </Group>
+          ) : null}
+        </Stack>
+      ) : null}
+      {((progress as string) === "show") ? (
+        <Stack gap="2" align="stretch" className="rounded bg-muted p-4" data-testid="progress">
+          <Text size="sm">
+            {labels.progress}
+          </Text>
+          <Progress value={(value == null ? undefined : String(value))} max="100" aria-label={labels.progress} />
+        </Stack>
+      ) : null}
+      {((rows?.length ?? 0) > 0) ? (
+        <List tag="ul" className="flex flex-col gap-2">
+          {(rows ?? []).map((row) => (
+            <ListItem key={row.id}
+              className={cn(
+                "flex items-center justify-between gap-4",
+                (
+                  row.strong ? "border-t border-border pt-4 text-base font-bold"
+                  : "text-sm text-muted-foreground"
+                )
+              )}
+              data-testid="row"
+            >
+              <Inline>
+                {row.label}
+              </Inline>
+              <Inline>
+                {fmtMoney(row.amount, row.currency)}
+              </Inline>
+            </ListItem>
+          ))}
+        </List>
+      ) : null}
+      <Button variant="default" size="lg" className="w-full" data-testid="checkout">
+        {labels.checkout}
+      </Button>
+      <Text size="xs" className="text-muted-foreground">
+        {labels.note}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/cart-summary-card.types.ts b/packages/react/ui/src/components/cart-summary-card.types.ts
new file mode 100644
index 0000000..9e5a5f5
--- /dev/null
+++ b/packages/react/ui/src/components/cart-summary-card.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Promo = {
+  id: string;
+  code: string;
+};
+
+export type CartSummaryLabels = {
+  title: string;
+  items: string;
+  promo: string;
+  apply: string;
+  codes: string;
+  progress: string;
+  checkout: string;
+  note: string;
+};
diff --git a/packages/react/ui/src/components/cart-table.tsx b/packages/react/ui/src/components/cart-table.tsx
new file mode 100644
index 0000000..e6c2bff
--- /dev/null
+++ b/packages/react/ui/src/components/cart-table.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cart-table.ts
+/**
+ * The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a
+ * remove button.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { NumberField } from "../components/number-field";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { CartLine, CartLabels } from "../blocks/cart-list.types";
+
+export type CartTableProps = {
+  lines: CartLine[];
+  labels: CartLabels;
+  media?: "image" | "none";
+  density?: "default" | "compact";
+  field?: string;
+  onRemove?: (id: string) => void;
+};
+
+export function CartTable({
+  lines,
+  labels,
+  media = "image",
+  density = "default",
+  field = "qty",
+  onRemove,
+}: CartTableProps) {
+  return (
+    <>
+      <Box className="w-full overflow-x-auto">
+        <Table className="w-full text-left text-sm" data-testid="cart-table">
+          <TableCaption className="sr-only">
+            {labels.caption}
+          </TableCaption>
+          <TableHead>
+            <TableRow>
+              <TableHeadCell scope="col" className="py-2">
+                {labels.product}
+              </TableHeadCell>
+              <TableHeadCell scope="col" className="hidden py-2 sm:table-cell">
+                {labels.price}
+              </TableHeadCell>
+              <TableHeadCell scope="col" className="py-2">
+                {labels.qty}
+              </TableHeadCell>
+              <TableHeadCell scope="col" className="py-2">
+                {labels.total}
+              </TableHeadCell>
+              <TableHeadCell scope="col" className="py-2">
+                <Inline className="sr-only">
+                  {labels.remove}
+                </Inline>
+              </TableHeadCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {(lines ?? []).map((line) => (
+              <TableRow key={line.id} className="border-t border-border" data-testid="item">
+                <TableCell className={cn((((density as string) === "compact") ? "py-2" : "py-4"))}>
+                  <Group gap="4" align="center">
+                    {((media as string) === "image") ? (
+                      <MediaFrame alt={line.name} ratio="1/1" className="hidden size-14 shrink-0 sm:block" />
+                    ) : null}
+                    <Stack gap="0">
+                      <Text size="sm" weight="semibold">
+                        {line.name}
+                      </Text>
+                      <Text size="xs" className="text-muted-foreground">
+                        {line.variant}
+                      </Text>
+                    </Stack>
+                  </Group>
+                </TableCell>
+                <TableCell className="hidden sm:table-cell">
+                  {fmtMoney(line.price, line.currency)}
+                </TableCell>
+                <TableCell>
+                  <NumberField
+                    value={(line.qty == null ? undefined : String(line.qty))}
+                    name={tpl("{0}-{1}", field, line.id)}
+                    min="1"
+                    label={labels.qty}
+                    decrease={labels.decrease}
+                    increase={labels.increase}
+                  />
+                </TableCell>
+                <TableCell className="font-semibold">
+                  {fmtMoney((line.price * line.qty), line.currency)}
+                </TableCell>
+                <TableCell className="text-right">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    layout="icon"
+                    aria-label={labels.remove}
+                    data-testid="remove"
+                    onClick={() => onRemove?.(line.id)}
+                  >
+                    <LucideIcon name="x" size={16} />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Box>
+      {((lines?.length ?? 0) > 0) ? (
+        <Group
+          gap="4"
+          align="center"
+          justify="between"
+          className="mt-4 flex-wrap border-t border-border pt-4"
+          data-testid="cart-footer"
+        >
+          <Text size="base" weight="bold" data-testid="subtotal">
+            {labels.subtotal}
+            {" "}
+            {fmtMoney(lines.reduce((s, i) => s + i.price * i.qty, 0), lines[0]?.currency ?? "")}
+          </Text>
+          <Button variant="default" size="default" data-testid="checkout">
+            {labels.checkout}
+          </Button>
+        </Group>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/checkout-step.tsx b/packages/react/ui/src/components/checkout-step.tsx
new file mode 100644
index 0000000..12d210c
--- /dev/null
+++ b/packages/react/ui/src/components/checkout-step.tsx
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/**
+ * One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`).
+ * Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+
+export type CheckoutStepProps = {
+  number: string;
+  title: string;
+  text?: string;
+  layout?: "cards" | "numbered";
+  children?: ReactNode;
+};
+
+export function CheckoutStep({ number, title, text = "", layout = "cards", children }: CheckoutStepProps) {
+  return (
+    <Stack
+      gap="6"
+      align="stretch"
+      className={
+        (layout as string) === "cards" ? "rounded bg-card inset-ring inset-ring-border p-6"
+        : "border-t border-border pt-6"
+      }
+      data-testid="step"
+    >
+      <Group gap="4" align="start">
+        {((layout as string) === "numbered") ? (
+          <Box className={"flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground"}>
+            {number}
+          </Box>
+        ) : null}
+        <Stack gap="0">
+          <Title as={2} size="lg" weight="semibold">
+            {title}
+          </Title>
+          {text ? (
+            <Text size="sm" className="text-muted-foreground">
+              {text}
+            </Text>
+          ) : null}
+        </Stack>
+      </Group>
+      {children}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/checkout-submit.tsx b/packages/react/ui/src/components/checkout-submit.tsx
new file mode 100644
index 0000000..39fe3a0
--- /dev/null
+++ b/packages/react/ui/src/components/checkout-submit.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/** The end of the checkout form: the consent checkbox, the submit button and the legal line. */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Checkbox } from "../primitives/checkbox/checkbox";
+import { Group } from "../primitives/group/group";
+import { Label } from "../primitives/label/label";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { cn, tpl } from "../utils";
+
+export type CheckoutSubmitProps = {
+  id: string;
+  consent: string;
+  submit: string;
+  legal: string;
+};
+
+export function CheckoutSubmit({ id, consent, submit, legal }: CheckoutSubmitProps) {
+  return (
+    <Stack gap="4" align="start">
+      <Group gap="2" align="center" className={cn("w-fit", "")}>
+        <Checkbox name="consent" id={tpl("{0}-consent", id)} />
+        <Label htmlFor={tpl("{0}-consent", id)} className="text-sm">
+          {consent}
+        </Label>
+      </Group>
+      <Button variant="default" size="lg" type="submit" data-testid="submit">
+        {submit}
+      </Button>
+      <Text size="xs" className="text-muted-foreground">
+        {legal}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/code-window.tsx b/packages/react/ui/src/components/code-window.tsx
new file mode 100644
index 0000000..5e1d92e
--- /dev/null
+++ b/packages/react/ui/src/components/code-window.tsx
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/visuals.ts
+/**
+ * A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with
+ * the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+import type { CodeLine } from "./code-window.types";
+
+export type CodeWindowProps = {
+  title: string;
+  prompt: string;
+  lines: CodeLine[];
+  className?: string;
+};
+
+export function CodeWindow({ title, prompt, lines, className }: CodeWindowProps) {
+  return (
+    <Box
+      className={cn(
+        "w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border",
+        className
+      )}
+      role="group"
+      aria-label={title}
+      data-slot="code-window"
+    >
+      <Box className="flex items-center border-b border-border px-4 py-2">
+        <Text size="xs" className="text-muted-foreground">
+          {title}
+        </Text>
+      </Box>
+      <List className="m-0 flex list-none flex-col gap-2 p-4 font-mono text-sm">
+        {(lines ?? []).map((line) => (
+          <ListItem key={line.id}
+            className={cn(
+              "flex gap-2",
+              ((line.kind === "command") ? "text-foreground" : "text-muted-foreground")
+            )}
+            data-kind={line.kind}
+          >
+            {(line.kind === "command") ? (
+              <Inline className="select-none text-muted-foreground">
+                {prompt}
+              </Inline>
+            ) : null}
+            <Inline>
+              {line.text}
+            </Inline>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/code-window.types.ts b/packages/react/ui/src/components/code-window.types.ts
new file mode 100644
index 0000000..351eaab
--- /dev/null
+++ b/packages/react/ui/src/components/code-window.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/visuals.ts
+
+export type CodeLine = {
+  id: string;
+  text: string;
+  kind: string;
+};
diff --git a/packages/react/ui/src/components/compare-mark.tsx b/packages/react/ui/src/components/compare-mark.tsx
new file mode 100644
index 0000000..c9d5053
--- /dev/null
+++ b/packages/react/ui/src/components/compare-mark.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/compare.ts
+/**
+ * One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen
+ * readers), any other value is shown as text.
+ */
+import { type ReactNode } from "react";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+
+export type CompareMarkProps = {
+  value: string;
+  yes: string;
+  no: string;
+};
+
+export function CompareMark({ value, yes, no }: CompareMarkProps) {
+  return (
+    <>
+      {((value as string) === "yes") ? (
+        <Inline className="inline-flex items-center gap-2" data-mark="yes">
+          <LucideIcon name="check" size={16} className="text-foreground" />
+          <Inline className="sr-only">
+            {yes}
+          </Inline>
+        </Inline>
+      ) : null}
+      {((value as string) === "no") ? (
+        <Inline className="inline-flex items-center gap-2 text-muted-foreground" data-mark="no">
+          <LucideIcon name="minus" size={16} />
+          <Inline className="sr-only">
+            {no}
+          </Inline>
+        </Inline>
+      ) : null}
+      {(((value as string) !== "yes") && ((value as string) !== "no")) ? (
+        <Inline>
+          {value}
+        </Inline>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/cta-actions.tsx b/packages/react/ui/src/components/cta-actions.tsx
new file mode 100644
index 0000000..b3b5437
--- /dev/null
+++ b/packages/react/ui/src/components/cta-actions.tsx
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta.ts
+/**
+ * The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions
+ * form).
+ */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { ActionGroup } from "../components/action-group";
+import { cn, tpl } from "../utils";
+import type { ActionSet } from "./cta-actions.types";
+
+export type CtaActionsProps = {
+  id: string;
+  actions: ActionSet;
+  center?: boolean;
+};
+
+export function CtaActions({ id, actions, center = false }: CtaActionsProps) {
+  return (
+    <>
+      {(actions.mode === "form") ? (
+        <Form method="dialog" className={cn("w-full max-w-md", (center ? "mx-auto" : ""))} data-testid="email-form">
+          <Label htmlFor={tpl("{0}-email", id)} className="sr-only">
+            {actions.emailLabel}
+          </Label>
+          <Group gap="2" align="start" className="w-full flex-wrap">
+            <Input type="email" name="email" className="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+            <Button variant="default" size="default" type="submit" data-testid="submit">
+              {actions.cta}
+            </Button>
+          </Group>
+        </Form>
+      ) : (
+        <ActionGroup
+          primary={actions.cta}
+          primaryHref={actions.href}
+          secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+          secondaryHref={actions.secondaryHref}
+          align={(center ? "center" : "start")}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/cta-actions.types.ts b/packages/react/ui/src/components/cta-actions.types.ts
new file mode 100644
index 0000000..a82d453
--- /dev/null
+++ b/packages/react/ui/src/components/cta-actions.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta.ts
+
+export type ActionSet = {
+  /** one or two links, or a form */
+  mode?: "one" | "two" | "form";
+  /** primary action label */
+  cta: string;
+  /** the address of the primary action; none: a button, not a link */
+  href?: string;
+  secondary?: string;
+  secondaryHref?: string;
+  /** label of the form field (the email field, or the prompt line of HeroPrompt) */
+  emailLabel?: string;
+};
diff --git a/packages/react/ui/src/components/cta-proof-items.tsx b/packages/react/ui/src/components/cta-proof-items.tsx
new file mode 100644
index 0000000..300d6a1
--- /dev/null
+++ b/packages/react/ui/src/components/cta-proof-items.tsx
@@ -0,0 +1,126 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta-proof-parts.ts
+/**
+ * The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats
+ * (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { fmtMoney } from "../utils";
+import type { CtaContent } from "../blocks/cta-proof.types";
+
+export type CtaProofItemsProps = {
+  content: CtaContent;
+  proof?: "logos" | "features" | "stats" | "rows" | "zones";
+  center?: boolean;
+};
+
+export function CtaProofItems({ content, proof = "stats", center = false }: CtaProofItemsProps) {
+  return (
+    <>
+      {(((proof as string) === "logos") && ((content.logos?.length ?? 0) > 0)) ? (
+        <Box className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6" data-testid="cta-proof">
+          {(content.logos ?? []).map((l) => (
+            <Group key={l.id} gap="2" align="center" justify="center" className="text-muted-foreground" data-testid="cta-item">
+              <LucideIcon name={l.icon} size={20} />
+              <Text size="sm" weight="semibold">
+                {l.name}
+              </Text>
+            </Group>
+          ))}
+        </Box>
+      ) : null}
+      {(((proof as string) === "features") && ((content.features?.length ?? 0) > 0)) ? (
+        <Box className="grid grid-cols-1 gap-4 text-left sm:grid-cols-2" data-testid="cta-proof">
+          {(content.features ?? []).map((f) => (
+            <Group key={f.id}
+              gap="4"
+              align="start"
+              className="rounded bg-card inset-ring inset-ring-border p-4"
+              data-testid="cta-item"
+            >
+              <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                <LucideIcon name={f.icon} size={20} />
+              </Box>
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {f.title}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {f.text}
+                </Text>
+              </Stack>
+            </Group>
+          ))}
+        </Box>
+      ) : null}
+      {(((proof as string) === "stats") && ((content.stats?.length ?? 0) > 0)) ? (
+        <Box className="grid grid-cols-3 gap-4" data-testid="cta-proof">
+          {(content.stats ?? []).map((s, i) => (
+            <Fragment key={s.id}>
+              {(i < 3) ? (
+                <Stack gap="0" className={(center ? "items-center text-center" : "")} data-testid="cta-item">
+                  <Text size="3xl" weight="bold">
+                    {s.value}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {s.label}
+                  </Text>
+                </Stack>
+              ) : null}
+            </Fragment>
+          ))}
+        </Box>
+      ) : null}
+      {(((proof as string) === "rows") && ((content.features?.length ?? 0) > 0)) ? (
+        <List className="m-0 flex list-none flex-col gap-4 p-0" data-testid="cta-proof">
+          {(content.features ?? []).map((f) => (
+            <ListItem key={f.id} className="flex items-start gap-4" data-testid="cta-item">
+              <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                <LucideIcon name={f.icon} size={20} />
+              </Box>
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {f.title}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {f.text}
+                </Text>
+              </Stack>
+            </ListItem>
+          ))}
+        </List>
+      ) : null}
+      {(((proof as string) === "zones") && ((content.zones?.length ?? 0) > 0)) ? (
+        <List className="m-0 flex list-none flex-col p-0" data-testid="cta-proof">
+          {(content.zones ?? []).map((z) => (
+            <ListItem key={z.id} className="flex items-start justify-between gap-4 border-b border-border py-4" data-testid="cta-item">
+              <Stack gap="0" className="min-w-0">
+                <Text size="sm" weight="semibold">
+                  {z.name}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {z.area}
+                </Text>
+              </Stack>
+              <Stack gap="0" className="shrink-0 text-right">
+                <Text size="sm" weight="semibold">
+                  {fmtMoney(z.price, z.currency)}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {z.time}
+                </Text>
+              </Stack>
+            </ListItem>
+          ))}
+        </List>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/drawer-lines.tsx b/packages/react/ui/src/components/drawer-lines.tsx
new file mode 100644
index 0000000..e92d44c
--- /dev/null
+++ b/packages/react/ui/src/components/drawer-lines.tsx
@@ -0,0 +1,106 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shop-parts.ts
+/**
+ * The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal
+ * and total and the button.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Progress } from "../primitives/form/progress";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { NumberField } from "../components/number-field";
+import { fmtMoney, tpl } from "../utils";
+import type { CartLine, CartLabels } from "../blocks/cart-list.types";
+import type { SummaryRow } from "../blocks/order-summary.types";
+import type { DrawerLabels } from "../blocks/cart-drawer.types";
+
+export type DrawerLinesProps = {
+  lines: CartLine[];
+  rows: SummaryRow[];
+  labels: CartLabels;
+  drawer: DrawerLabels;
+  media?: "image" | "none";
+  field?: string;
+};
+
+export function DrawerLines({
+  lines,
+  rows,
+  labels,
+  drawer,
+  media = "image",
+  field = "qty",
+}: DrawerLinesProps) {
+  return (
+    <>
+      <Stack gap="4" align="stretch" className="flex-1 p-4" data-testid="lines">
+        {(lines ?? []).map((line) => (
+          <Group key={line.id} gap="4" align="start" data-testid="item">
+            {((media as string) === "image") ? (
+              <MediaFrame alt={line.name} ratio="1/1" className="size-16 shrink-0" />
+            ) : null}
+            <Stack gap="2" align="stretch" className="flex-1">
+              <Group gap="2" justify="between" align="start">
+                <Text size="sm" weight="semibold">
+                  {line.name}
+                </Text>
+                <Inline className="text-sm font-medium">
+                  {fmtMoney((line.price * line.qty), line.currency)}
+                </Inline>
+              </Group>
+              <Text size="xs" className="text-muted-foreground">
+                {line.variant}
+              </Text>
+              <NumberField
+                value={(line.qty == null ? undefined : String(line.qty))}
+                name={tpl("{0}-{1}", field, line.id)}
+                min="1"
+                label={labels.qty}
+                decrease={labels.decrease}
+                increase={labels.increase}
+              />
+            </Stack>
+          </Group>
+        ))}
+      </Stack>
+      <Stack gap="4" align="stretch" className="border-t border-border p-4">
+        <Stack gap="2" align="stretch" className="rounded bg-muted p-4" data-testid="progress">
+          <Text size="sm">
+            {drawer.progress}
+          </Text>
+          <Progress value="96" max="100" aria-label={drawer.progress} />
+        </Stack>
+        <List tag="ul" className="flex flex-col gap-2">
+          {(rows ?? []).map((row, i) => (
+            <Fragment key={row.id}>
+              {(row.strong ? true : (i === 0)) ? (
+                <ListItem
+                  className={
+                    row.strong ? "flex justify-between text-base font-bold"
+                    : "flex justify-between text-sm text-muted-foreground"
+                  }
+                >
+                  <Inline>
+                    {row.label}
+                  </Inline>
+                  <Inline>
+                    {fmtMoney(row.amount, row.currency)}
+                  </Inline>
+                </ListItem>
+              ) : null}
+            </Fragment>
+          ))}
+        </List>
+        <Button variant="default" size="lg" className="w-full" data-testid="checkout">
+          {labels.checkout}
+        </Button>
+      </Stack>
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/dropdown-item.tsx b/packages/react/ui/src/components/dropdown-item.tsx
new file mode 100644
index 0000000..157ecfe
--- /dev/null
+++ b/packages/react/ui/src/components/dropdown-item.tsx
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex
+ * -1: the menu moves focus with the arrow keys.
+ */
+import { type ReactNode } from "react";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Inline } from "../primitives/inline/inline";
+import { cn } from "../utils";
+
+export type DropdownItemProps = {
+  selected?: boolean;
+  className?: string;
+  children?: ReactNode;
+  icon?: ReactNode;
+  right?: ReactNode;
+  onClick?: () => void;
+};
+
+export function DropdownItem({
+  selected = false,
+  className,
+  children,
+  icon,
+  right,
+  onClick,
+}: DropdownItemProps) {
+  return (
+    <ButtonPlain
+      type="button"
+      role="menuitem"
+      className={cn("group flex h-9 w-full items-center px-2 text-left text-foreground", className)}
+      tabIndex={-1}
+      data-slot="dropdown-item"
+      data-state={(selected ? "selected" : "default")}
+      onClick={() => onClick?.()}
+    >
+      <Inline
+        className={"flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted " +
+          "group-data-[state=selected]:bg-muted"}
+        data-slot="dropdown-item-content"
+      >
+        {icon ? (
+          <Inline className="flex w-7 shrink-0 items-center pr-2" data-slot="dropdown-item-icon">
+            {icon}
+          </Inline>
+        ) : null}
+        <Inline className={cn("text-xs", "min-w-0 flex-1 truncate px-1 font-bold")} data-slot="dropdown-item-label">
+          {children}
+        </Inline>
+        {right ? (
+          <Inline className="flex shrink-0 items-center pr-1" data-slot="dropdown-item-right">
+            {right}
+          </Inline>
+        ) : null}
+      </Inline>
+    </ButtonPlain>
+  );
+}
diff --git a/packages/react/ui/src/components/editor-tab.tsx b/packages/react/ui/src/components/editor-tab.tsx
new file mode 100644
index 0000000..b4fa3f9
--- /dev/null
+++ b/packages/react/ui/src/components/editor-tab.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not
+ * pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close
+ * events.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn } from "../utils";
+
+export type EditorTabProps = {
+  label: string;
+  closeLabel: string;
+  active?: boolean;
+  preview?: boolean;
+  className?: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+  onClose?: () => void;
+};
+
+export function EditorTab({
+  label,
+  closeLabel,
+  active = false,
+  preview = false,
+  className,
+  icon,
+  onClick,
+  onClose,
+}: EditorTabProps) {
+  return (
+    <Box
+      className={cn(
+        "flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card " +
+          "[&_svg]:text-muted-foreground",
+        "border-r border-border",
+        className
+      )}
+      role="tab"
+      aria-selected={active}
+      tabIndex={(active ? 0 : -1)}
+      data-slot="editor-tab"
+      data-state={(active ? "active" : "default")}
+      onClick={() => onClick?.()}
+    >
+      <Inline className="flex h-10 items-center gap-2 px-3" data-slot="editor-tab-content">
+        {icon}
+        <Inline
+          className={cn("text-xs text-foreground", (preview ? "font-semibold italic" : "font-bold"))}
+          data-slot="editor-tab-label"
+        >
+          {label}
+        </Inline>
+        <Button
+          variant="ghost"
+          size="sm"
+          layout="icon"
+          className={"p-0 [&>svg]:size-4"}
+          aria-label={closeLabel}
+          tabIndex={-1}
+          data-slot="editor-tab-close"
+          onClick={() => onClose?.()}
+        >
+          <LucideIcon name="x" size={16} />
+        </Button>
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/empty-state.tsx b/packages/react/ui/src/components/empty-state.tsx
new file mode 100644
index 0000000..def16d3
--- /dev/null
+++ b/packages/react/ui/src/components/empty-state.tsx
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** Empty list or nothing found: a round icon, a title, a hint and an optional action. */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type EmptyStateProps = {
+  icon?: string;
+  title: string;
+  text?: string;
+  className?: string;
+  action?: ReactNode;
+};
+
+export function EmptyState({ icon = "inbox", title, text, className, action }: EmptyStateProps) {
+  return (
+    <Box
+      className={cn(
+        "flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border",
+        className
+      )}
+      role="status"
+    >
+      <IconBadge size="lg">
+        <LucideIcon name={icon} size={20} />
+      </IconBadge>
+      <Text className="m-0 text-sm font-bold text-foreground">
+        {title}
+      </Text>
+      {text ? (
+        <Text className="m-0 max-w-80 text-xs font-medium text-muted-foreground">
+          {text}
+        </Text>
+      ) : null}
+      {action}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/faq-cards.tsx b/packages/react/ui/src/components/faq-cards.tsx
new file mode 100644
index 0000000..82ff116
--- /dev/null
+++ b/packages/react/ui/src/components/faq-cards.tsx
@@ -0,0 +1,64 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/faq-parts.ts
+/**
+ * The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon
+ * square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { ArticleBlock } from "../components/article-block";
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+
+export type FaqCardsProps = {
+  items: Question[];
+  labels: FaqSplitLabels;
+  cards?: "grid3" | "grid4" | "icons";
+};
+
+export function FaqCards({ items, labels, cards = "grid3" }: FaqCardsProps) {
+  return (
+    <Box
+      className={
+        (cards as string) === "grid4" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+        : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+      }
+      data-testid="faq"
+    >
+      {(items ?? []).map((q) => (
+        <ArticleBlock key={q.id}
+          className="rounded bg-card inset-ring inset-ring-border flex flex-col gap-4 p-6"
+          testid="faq-card"
+        >
+          {((cards as string) === "icons") ? (
+            <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+              <LucideIcon name={q.icon} size={20} />
+            </Box>
+          ) : null}
+          <Stack gap="2">
+            <Badge variant="secondary" size="sm" className="w-fit">
+              {q.category}
+            </Badge>
+            <Title as={3} size="base" weight="semibold">
+              {q.question}
+            </Title>
+            <Text size="sm" className="text-muted-foreground">
+              {q.answer}
+            </Text>
+          </Stack>
+          <Box className="mt-auto">
+            <Button variant="link" size="sm" className="gap-2 px-0 font-medium">
+              {labels.more}
+              <LucideIcon name="arrow-right" size={16} />
+            </Button>
+          </Box>
+        </ArticleBlock>
+      ))}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/faq-disclosures.tsx b/packages/react/ui/src/components/faq-disclosures.tsx
new file mode 100644
index 0000000..6dd11e7
--- /dev/null
+++ b/packages/react/ui/src/components/faq-disclosures.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/faq-parts.ts
+/** The questions of FaqSplit as native disclosures, one open at a time. */
+import { type ReactNode } from "react";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+
+export type FaqDisclosuresProps = {
+  items: Question[];
+  name: string;
+};
+
+export function FaqDisclosures({ items, name }: FaqDisclosuresProps) {
+  return (
+    <Stack gap="0" align="stretch" data-testid="faq">
+      {(items ?? []).map((q) => (
+        <Disclosure key={q.id} variant="item" name={name} data-testid="faq-item">
+          <Summary variant="item">
+            {q.question}
+          </Summary>
+          <Text size="sm" className="pb-4 text-muted-foreground">
+            {q.answer}
+          </Text>
+        </Disclosure>
+      ))}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/faq-finder.tsx b/packages/react/ui/src/components/faq-finder.tsx
new file mode 100644
index 0000000..dc81c8c
--- /dev/null
+++ b/packages/react/ui/src/components/faq-finder.tsx
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/faq-parts.ts
+/**
+ * The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as
+ * popular links.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { SearchField } from "../components/search-field";
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+import type { FaqTab } from "../blocks/faq-list.types";
+
+export type FaqFinderProps = {
+  items: Question[];
+  labels: FaqSplitLabels;
+  topics: FaqTab[];
+};
+
+export function FaqFinder({ items, labels, topics }: FaqFinderProps) {
+  return (
+    <Stack gap="6" align="stretch" data-testid="faq-finder">
+      <SearchField label={labels.search} placeholder={labels.search} value={(labels.query ?? "")} />
+      <Group gap="2" className="flex-wrap">
+        {(topics ?? []).map((t) => (
+          <Button key={t.id} variant="outline" size="sm" data-testid="faq-topic" data-value={t.value}>
+            {t.title}
+          </Button>
+        ))}
+      </Group>
+      <Stack gap="2">
+        <Text size="sm" weight="semibold">
+          {labels.popular}
+        </Text>
+        <List className="m-0 flex list-none flex-col gap-2 p-0">
+          {(items ?? []).map((q, i) => (
+            <Fragment key={q.id}>
+              {(i < 3) ? (
+                <ListItem data-testid="faq-popular">
+                  <MenuEntry href={q.href} className="text-sm font-medium" size="sm">
+                    {q.question}
+                  </MenuEntry>
+                </ListItem>
+              ) : null}
+            </Fragment>
+          ))}
+        </List>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/faq-help.tsx b/packages/react/ui/src/components/faq-help.tsx
new file mode 100644
index 0000000..bbae215
--- /dev/null
+++ b/packages/react/ui/src/components/faq-help.tsx
@@ -0,0 +1,64 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/faq-parts.ts
+/**
+ * The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon,
+ * name, one line) and a link.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FaqHelpProps = {
+  labels: FaqSplitLabels;
+  channels: Feature[];
+  landmarkLabel?: string;
+};
+
+export function FaqHelp({ labels, channels, landmarkLabel }: FaqHelpProps) {
+  return (
+    <Block
+      tag="aside"
+      className="rounded bg-card inset-ring inset-ring-border flex flex-col gap-6 p-6"
+      aria-label={(landmarkLabel ?? labels.asideTitle)}
+      data-testid="faq-help"
+    >
+      <Stack gap="2">
+        <Text size="lg" weight="semibold">
+          {labels.asideTitle}
+        </Text>
+        <Text size="sm" className="text-muted-foreground">
+          {labels.asideText}
+        </Text>
+      </Stack>
+      <List className="m-0 flex list-none flex-col gap-4 p-0">
+        {(channels ?? []).map((c) => (
+          <ListItem key={c.id} className="flex items-start gap-4" data-testid="faq-channel">
+            <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+              <LucideIcon name={c.icon} size={20} />
+            </Box>
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {c.title}
+              </Text>
+              <Text size="xs" className="text-muted-foreground">
+                {c.text}
+              </Text>
+            </Stack>
+          </ListItem>
+        ))}
+      </List>
+      <Button variant="link" size="sm" className="gap-2 px-0 font-medium">
+        {labels.asideCta}
+        <LucideIcon name="arrow-right" size={16} />
+      </Button>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/feature-cards.tsx b/packages/react/ui/src/components/feature-cards.tsx
new file mode 100644
index 0000000..b2b360d
--- /dev/null
+++ b/packages/react/ui/src/components/feature-cards.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/features.ts
+/** The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names. */
+import { Fragment, type ReactNode } from "react";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { CardHeader } from "../primitives/card/card-header";
+import { CardTitle } from "../primitives/card/card-title";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FeatureCardsProps = {
+  features: Feature[];
+  cols?: "1-2" | "1-3" | "1-4";
+  item?: "card" | "tile" | "cell";
+};
+
+export function FeatureCards({ features, cols = "1-3", item = "card" }: FeatureCardsProps) {
+  return (
+    <Grid
+      cols={cols}
+      className={
+        (item as string) === "cell" ? cn("w-full gap-px overflow-hidden bg-border p-px", defaults.features.cells)
+        : "gap-6"
+      }
+      data-testid="feature-grid"
+    >
+      {(features ?? []).map((feature) => (
+        <Fragment key={feature.id}>
+          {((item as string) === "tile") ? (
+            <Card variant="compact" data-testid="feature-card">
+              <Group gap="4" align="start">
+                <LucideIcon name={feature.icon} size={20} />
+                <Stack gap="2">
+                  <Title as={3} size="base" weight="bold">
+                    {feature.title}
+                  </Title>
+                  <Text size="sm" className="text-muted-foreground">
+                    {feature.text}
+                  </Text>
+                </Stack>
+              </Group>
+            </Card>
+          ) : ((item as string) === "cell") ? (
+            <Stack
+              gap="2"
+              align="center"
+              className="h-full gap-8 bg-background px-6 py-12 text-center"
+              data-testid="feature-card"
+            >
+              <IconBadge variant="primary" size="xl" data-testid="feature-icon">
+                <LucideIcon name={feature.icon} size={24} />
+              </IconBadge>
+              <Title as={3} size="xl" weight="semibold" className="leading-6">
+                {feature.title}
+              </Title>
+              <Text size="sm" weight="semibold" className="leading-5 text-muted-foreground">
+                {feature.text}
+              </Text>
+            </Stack>
+          ) : (
+            <Card variant="default" data-testid="feature-card">
+              <CardHeader className="flex flex-col gap-4">
+                <LucideIcon name={feature.icon} size={24} />
+                <CardTitle as={3}>
+                  {feature.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Text size="sm" className="text-muted-foreground">
+                  {feature.text}
+                </Text>
+              </CardContent>
+            </Card>
+          )}
+        </Fragment>
+      ))}
+    </Grid>
+  );
+}
diff --git a/packages/react/ui/src/components/feature-metric-cards.tsx b/packages/react/ui/src/components/feature-metric-cards.tsx
new file mode 100644
index 0000000..56711d7
--- /dev/null
+++ b/packages/react/ui/src/components/feature-metric-cards.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/feature-split-parts.ts
+/**
+ * Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the
+ * label.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { Stat } from "../blocks/stats-band.types";
+
+export type FeatureMetricCardsProps = {
+  stats: Stat[];
+};
+
+export function FeatureMetricCards({ stats }: FeatureMetricCardsProps) {
+  return (
+    <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      {(stats ?? []).map((s, i) => (
+        <Fragment key={s.id}>
+          {(i < 4) ? (
+            <Group
+              gap="4"
+              align="center"
+              className="rounded bg-card inset-ring inset-ring-border p-4"
+              data-testid="feature-stat"
+            >
+              <Inline className="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+                <LucideIcon name={s.icon} size={20} />
+              </Inline>
+              <Stack gap="0" className="min-w-0">
+                <Text size="lg" weight="bold">
+                  {s.value}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {s.label}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {s.hint}
+                </Text>
+              </Stack>
+            </Group>
+          ) : null}
+        </Fragment>
+      ))}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/feature-pairs.tsx b/packages/react/ui/src/components/feature-pairs.tsx
new file mode 100644
index 0000000..df9cae5
--- /dev/null
+++ b/packages/react/ui/src/components/feature-pairs.tsx
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/feature-split-parts.ts
+/** Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards. */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FeaturePairsProps = {
+  features: Feature[];
+};
+
+export function FeaturePairs({ features }: FeaturePairsProps) {
+  return (
+    <Box className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+      {(features ?? []).map((f, i) => (
+        <Fragment key={f.id}>
+          {(i < 4) ? (
+            <Group gap="4" align="start" data-testid="feature-item">
+              <Inline className={"flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground"}>
+                <LucideIcon name={f.icon} size={16} />
+              </Inline>
+              <Stack gap="2" className="min-w-0">
+                <Title as={3} size="sm" weight="semibold">
+                  {f.title}
+                </Title>
+                <Text size="sm" className="text-muted-foreground">
+                  {f.text}
+                </Text>
+              </Stack>
+            </Group>
+          ) : null}
+        </Fragment>
+      ))}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/feature-rows.tsx b/packages/react/ui/src/components/feature-rows.tsx
new file mode 100644
index 0000000..819cbb8
--- /dev/null
+++ b/packages/react/ui/src/components/feature-rows.tsx
@@ -0,0 +1,50 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/features.ts
+/** The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names. */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FeatureRowsProps = {
+  features: Feature[];
+  mediaSide?: "end" | "start" | "alternate";
+};
+
+export function FeatureRows({ features, mediaSide = "end" }: FeatureRowsProps) {
+  return (
+    <Stack gap="8" align="stretch" data-testid="feature-rows">
+      {(features ?? []).map((feature) => (
+        <Grid key={feature.id} cols="1-2" className="group items-center gap-8" data-testid="feature-card">
+          <Stack gap="2" className="min-w-0">
+            <LucideIcon name={feature.icon} size={24} />
+            <Title as={3} size="xl" weight="bold">
+              {feature.title}
+            </Title>
+            <Text size="base" className="text-muted-foreground">
+              {feature.text}
+            </Text>
+          </Stack>
+          <Box
+            className={cn(
+              "w-full min-w-0",
+              (
+                (mediaSide as string) === "start" ? "md:order-first"
+                : (mediaSide as string) === "alternate" ? "md:group-even:order-first"
+                : ""
+              )
+            )}
+          >
+            <MediaFrame alt={feature.title} ratio="4/3" />
+          </Box>
+        </Grid>
+      ))}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/feature-stat-rows.tsx b/packages/react/ui/src/components/feature-stat-rows.tsx
new file mode 100644
index 0000000..7b56cc0
--- /dev/null
+++ b/packages/react/ui/src/components/feature-stat-rows.tsx
@@ -0,0 +1,62 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/feature-split-parts.ts
+/** Two figures of FeatureSplit as cards, then three features as checked rows. */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import type { Feature } from "../blocks/feature-grid.types";
+import type { Stat } from "../blocks/stats-band.types";
+
+export type FeatureStatRowsProps = {
+  features: Feature[];
+  stats: Stat[];
+};
+
+export function FeatureStatRows({ features, stats }: FeatureStatRowsProps) {
+  return (
+    <Stack gap="6" align="stretch">
+      <Box className="grid grid-cols-2 gap-4">
+        {(stats ?? []).map((s, i) => (
+          <Fragment key={s.id}>
+            {(i < 2) ? (
+              <Stack gap="0" className="rounded bg-card inset-ring inset-ring-border p-4" data-testid="feature-stat">
+                <Text size="2xl" weight="bold">
+                  {s.value}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {s.label}
+                </Text>
+              </Stack>
+            ) : null}
+          </Fragment>
+        ))}
+      </Box>
+      <Stack gap="4" align="stretch">
+        {(features ?? []).map((f, i) => (
+          <Fragment key={f.id}>
+            {(i < 3) ? (
+              <Group gap="4" align="start" data-testid="feature-item">
+                <Inline className={"flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground"}>
+                  <LucideIcon name="check" size={16} />
+                </Inline>
+                <Stack gap="2" className="min-w-0">
+                  <Title as={3} size="sm" weight="semibold">
+                    {f.title}
+                  </Title>
+                  <Text size="sm" className="text-muted-foreground">
+                    {f.text}
+                  </Text>
+                </Stack>
+              </Group>
+            ) : null}
+          </Fragment>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/field.tsx b/packages/react/ui/src/components/field.tsx
new file mode 100644
index 0000000..ee19e84
--- /dev/null
+++ b/packages/react/ui/src/components/field.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the
+ * control.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Label } from "../primitives/label/label";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type FieldProps = {
+  label: string;
+  htmlFor: string;
+  hint?: string;
+  error?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function Field({ label, htmlFor, hint, error, className, children }: FieldProps) {
+  return (
+    <Box className={cn("flex min-w-0 flex-col gap-2", className)}>
+      <Label className="text-xs font-bold text-foreground" htmlFor={htmlFor}>
+        {label}
+      </Label>
+      {children}
+      {error ? (
+        <Text className="m-0 text-xs font-semibold text-destructive" role="alert">
+          {error}
+        </Text>
+      ) : hint ? (
+        <Text className="m-0 text-xs font-medium text-muted-foreground">
+          {hint}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/figure-block.tsx b/packages/react/ui/src/components/figure-block.tsx
new file mode 100644
index 0000000..14f867d
--- /dev/null
+++ b/packages/react/ui/src/components/figure-block.tsx
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/landmarks.ts
+/**
+ * Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag
+ * figure.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { cn } from "../utils";
+
+export type FigureBlockProps = {
+  testid?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function FigureBlock({ testid, className, children }: FigureBlockProps) {
+  return (
+    <Block tag="figure" className={cn(className)} data-testid={testid}>
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/file-tree-item.tsx b/packages/react/ui/src/components/file-tree-item.tsx
new file mode 100644
index 0000000..062ebb4
--- /dev/null
+++ b/packages/react/ui/src/components/file-tree-item.tsx
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/** A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide. */
+import { type ReactNode } from "react";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn, variants } from "../utils";
+
+/** FileTreeItem: the classes of each value (shadcn/cva style). */
+export const fileTreeItemVariants = variants({
+  base: "flex h-6 w-full items-center gap-4 text-xs font-bold text-muted-foreground data-[state=selected]:bg-muted",
+  variants: {
+    kind: {
+      folder: "",
+      file: "px-8",
+    },
+  },
+  defaultVariants: { kind: "file" },
+});
+
+export type FileTreeItemProps = {
+  kind?: "folder" | "file";
+  label: string;
+  selected?: boolean;
+  expanded?: boolean;
+  className?: string;
+  onClick?: () => void;
+};
+
+export function FileTreeItem({
+  kind = "file",
+  label,
+  selected = false,
+  expanded = false,
+  className,
+  onClick,
+}: FileTreeItemProps) {
+  return (
+    <ButtonPlain
+      type="button"
+      role="treeitem"
+      className={cn(fileTreeItemVariants({ kind: kind }), className)}
+      aria-selected={selected}
+      tabIndex={(selected ? 0 : -1)}
+      aria-expanded={(((kind as string) === "folder") ? expanded : undefined)}
+      data-slot="file-tree-item"
+      data-kind={kind}
+      data-state={(selected ? "selected" : "default")}
+      onClick={() => onClick?.()}
+    >
+      {((kind as string) === "folder") ? (
+        <>
+          <LucideIcon name={(expanded ? "chevron-down" : "chevron-right")} size={16} />
+          <LucideIcon name="folder-open" size={16} />
+        </>
+      ) : (
+        <LucideIcon name="file" size={16} />
+      )}
+      <Inline className="whitespace-nowrap" data-slot="file-tree-label">
+        {label}
+      </Inline>
+    </ButtonPlain>
+  );
+}
diff --git a/packages/react/ui/src/components/file-tree.tsx b/packages/react/ui/src/components/file-tree.tsx
new file mode 100644
index 0000000..951c22b
--- /dev/null
+++ b/packages/react/ui/src/components/file-tree.tsx
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead`
+ * from the utils to the keydown (vertical, no loop).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { cn } from "../utils";
+
+export type FileTreeProps = {
+  label?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function FileTree({ label, className, children }: FileTreeProps) {
+  return (
+    <Box className={cn("flex flex-col gap-2 p-2", className)} role="tree" aria-label={label} data-slot="file-tree">
+      {children}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-brand.tsx b/packages/react/ui/src/components/footer-brand.tsx
new file mode 100644
index 0000000..be72b6d
--- /dev/null
+++ b/packages/react/ui/src/components/footer-brand.tsx
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The brand of FooterSplit: a mark and the brand word over the tagline. */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+
+export type FooterBrandProps = {
+  brand: string;
+  tagline: string;
+};
+
+export function FooterBrand({ brand, tagline }: FooterBrandProps) {
+  return (
+    <Stack gap="2" align="start" data-testid="footer-brand">
+      <Group gap="2" align="center">
+        <Inline className="flex size-8 items-center justify-center rounded bg-foreground text-background">
+          <LucideIcon name="layers" size={16} />
+        </Inline>
+        <Text size="xl" weight="bold">
+          {brand}
+        </Text>
+      </Group>
+      <Text size="sm" className="text-muted-foreground">
+        {tagline}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-card.tsx b/packages/react/ui/src/components/footer-card.tsx
new file mode 100644
index 0000000..b992ef4
--- /dev/null
+++ b/packages/react/ui/src/components/footer-card.tsx
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer.ts
+/** The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card. */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { defaults } from "../presets/defaults";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterCardProps = {
+  label: string;
+  brand: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+
+export function FooterCard({ label, brand, groups, landmarkLabel }: FooterCardProps) {
+  return (
+    <Block tag="footer" className="py-8" data-testid="site-footer" data-layout="card" aria-label={landmarkLabel}>
+      <Container className={cn(cn("mx-auto w-full px-4", defaults.section.landing), "px-0")} data-slot="container">
+        <Box
+          className={cn(
+            "flex w-full flex-row items-start overflow-hidden bg-muted p-10",
+            defaults.footer.card
+          )}
+          data-testid="footer-card"
+        >
+          <Group gap="4" align="center" className={cn("h-8 shrink-0", defaults.footer.brand)} data-testid="footer-brand">
+            <Inline className="flex size-8 items-center justify-center rounded bg-foreground text-background">
+              <LucideIcon name="hexagon" size={16} />
+            </Inline>
+            <Text size="base" weight="bold">
+              {brand}
+            </Text>
+          </Group>
+          {((groups?.length ?? 0) > 0) ? (
+            <NavBlock
+              label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)}
+              className="min-w-0 flex-1"
+            >
+              <Group
+                gap="0"
+                align="start"
+                className={cn("flex w-full flex-nowrap justify-between", defaults.footer.groups)}
+                data-testid="footer-groups"
+              >
+                {(groups ?? []).map((g) => (
+                  <Stack key={g.id} gap="4" data-testid="group">
+                    <Text size="xs" weight="semibold" className="leading-5">
+                      {g.title}
+                    </Text>
+                    <List className="m-0 flex list-none flex-col gap-4 p-0">
+                      {(g.links ?? []).map((item) => (
+                        <ListItem key={item.id}>
+                          <MenuEntry href={item.href} className="text-xs leading-5 text-muted-foreground">
+                            {item.name}
+                          </MenuEntry>
+                        </ListItem>
+                      ))}
+                    </List>
+                  </Stack>
+                ))}
+              </Group>
+            </NavBlock>
+          ) : null}
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-channels.tsx b/packages/react/ui/src/components/footer-channels.tsx
new file mode 100644
index 0000000..8d0abe2
--- /dev/null
+++ b/packages/react/ui/src/components/footer-channels.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The channels of the community as three cards: a glyph over the name and one line. */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterChannelsProps = {
+  extras: FooterExtras;
+};
+
+export function FooterChannels({ extras }: FooterChannelsProps) {
+  return (
+    <>
+      {((extras.channels?.length ?? 0) > 0) ? (
+        <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          {(extras.channels ?? []).map((c, i) => (
+            <Fragment key={c.id}>
+              {(i < 3) ? (
+                <Stack
+                  gap="2"
+                  align="start"
+                  className="rounded bg-card inset-ring inset-ring-border p-4"
+                  data-testid="footer-channel"
+                >
+                  <Inline className="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+                    <LucideIcon name={c.icon} size={20} />
+                  </Inline>
+                  <Text size="sm" weight="semibold">
+                    {c.title}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {c.text}
+                  </Text>
+                </Stack>
+              ) : null}
+            </Fragment>
+          ))}
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-columns.tsx b/packages/react/ui/src/components/footer-columns.tsx
new file mode 100644
index 0000000..b1ef505
--- /dev/null
+++ b/packages/react/ui/src/components/footer-columns.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer.ts
+/** The link groups of SitemapFooter as columns: a group title over its links, up to five columns. */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Grid } from "../primitives/grid/grid";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterColumnsProps = {
+  label: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+
+export function FooterColumns({ label, groups, landmarkLabel }: FooterColumnsProps) {
+  return (
+    <>
+      {((groups?.length ?? 0) > 0) ? (
+        <Block tag="nav" aria-label={(landmarkLabel ?? label)}>
+          <Grid cols="1" className="grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5" data-testid="footer-groups">
+            {(groups ?? []).map((g) => (
+              <Stack key={g.id} gap="2" data-testid="group">
+                <Text size="sm" weight="semibold">
+                  {g.title}
+                </Text>
+                <List className="m-0 flex list-none flex-col gap-2 p-0">
+                  {(g.links ?? []).map((item) => (
+                    <ListItem key={item.id}>
+                      <MenuEntry href={item.href} className="text-sm text-muted-foreground">
+                        {item.name}
+                      </MenuEntry>
+                    </ListItem>
+                  ))}
+                </List>
+              </Stack>
+            ))}
+          </Grid>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-contacts.tsx b/packages/react/ui/src/components/footer-contacts.tsx
new file mode 100644
index 0000000..ed2becf
--- /dev/null
+++ b/packages/react/ui/src/components/footer-contacts.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value. */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterContactsProps = {
+  extras: FooterExtras;
+};
+
+export function FooterContacts({ extras }: FooterContactsProps) {
+  return (
+    <>
+      {((extras.contacts?.length ?? 0) > 0) ? (
+        <Stack gap="4" align="stretch">
+          {(extras.contacts ?? []).map((c) => (
+            <Group key={c.id} gap="4" align="center" data-testid="footer-contact">
+              <Inline className="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+                <LucideIcon name={c.icon} size={20} />
+              </Inline>
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {c.title}
+                </Text>
+                <Text size="sm" className="text-muted-foreground">
+                  {c.text}
+                </Text>
+              </Stack>
+            </Group>
+          ))}
+        </Stack>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-figures.tsx b/packages/react/ui/src/components/footer-figures.tsx
new file mode 100644
index 0000000..f830562
--- /dev/null
+++ b/packages/react/ui/src/components/footer-figures.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** Three figures in a row under the brand of FooterSplit. */
+import { Fragment, type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterFiguresProps = {
+  extras: FooterExtras;
+};
+
+export function FooterFigures({ extras }: FooterFiguresProps) {
+  return (
+    <>
+      {((extras.stats?.length ?? 0) > 0) ? (
+        <Group gap="8" className="flex-wrap">
+          {(extras.stats ?? []).map((s, i) => (
+            <Fragment key={s.id}>
+              {(i < 3) ? (
+                <Stack gap="0" data-testid="footer-stat">
+                  <Text size="xl" weight="bold">
+                    {s.value}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {s.label}
+                  </Text>
+                </Stack>
+              ) : null}
+            </Fragment>
+          ))}
+        </Group>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-group-cards.tsx b/packages/react/ui/src/components/footer-group-cards.tsx
new file mode 100644
index 0000000..506483a
--- /dev/null
+++ b/packages/react/ui/src/components/footer-group-cards.tsx
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/**
+ * The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide
+ * screens.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterGroupCardsProps = {
+  label: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+
+export function FooterGroupCards({ label, groups, landmarkLabel }: FooterGroupCardsProps) {
+  return (
+    <>
+      {((groups?.length ?? 0) > 0) ? (
+        <Block tag="nav" aria-label={(landmarkLabel ?? label)}>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {(groups ?? []).map((g) => (
+              <Stack key={g.id} gap="4" align="stretch" className="rounded bg-card inset-ring inset-ring-border p-6" data-testid="group">
+                <Group gap="2" align="center">
+                  <Inline className="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+                    <LucideIcon name={g.icon} size={20} />
+                  </Inline>
+                  <Text size="sm" weight="semibold">
+                    {g.title}
+                  </Text>
+                </Group>
+                <List className="m-0 flex list-none flex-col gap-2 p-0">
+                  {(g.links ?? []).map((item) => (
+                    <ListItem key={item.id}>
+                      <MenuEntry href={item.href} className="text-sm text-muted-foreground" variant="muted" size="sm">
+                        {item.name}
+                      </MenuEntry>
+                    </ListItem>
+                  ))}
+                </List>
+              </Stack>
+            ))}
+          </Box>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-link-columns.tsx b/packages/react/ui/src/components/footer-link-columns.tsx
new file mode 100644
index 0000000..dced2a7
--- /dev/null
+++ b/packages/react/ui/src/components/footer-link-columns.tsx
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The first three link groups of FooterSplit as small columns beside each other. */
+import { Fragment, type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterLinkColumnsProps = {
+  label: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+
+export function FooterLinkColumns({ label, groups, landmarkLabel }: FooterLinkColumnsProps) {
+  return (
+    <>
+      {((groups?.length ?? 0) > 0) ? (
+        <Block tag="nav" aria-label={(landmarkLabel ?? label)}>
+          <Box className="grid grid-cols-2 gap-8 sm:grid-cols-3">
+            {(groups ?? []).map((g, i) => (
+              <Fragment key={g.id}>
+                {(i < 3) ? (
+                  <Stack gap="2" data-testid="group">
+                    <Text size="sm" weight="semibold">
+                      {g.title}
+                    </Text>
+                    <List className="m-0 flex list-none flex-col gap-2 p-0">
+                      {(g.links ?? []).map((item) => (
+                        <ListItem key={item.id}>
+                          <MenuEntry href={item.href} className="text-sm text-muted-foreground" variant="muted" size="sm">
+                            {item.name}
+                          </MenuEntry>
+                        </ListItem>
+                      ))}
+                    </List>
+                  </Stack>
+                ) : null}
+              </Fragment>
+            ))}
+          </Box>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-points.tsx b/packages/react/ui/src/components/footer-points.tsx
new file mode 100644
index 0000000..bb37250
--- /dev/null
+++ b/packages/react/ui/src/components/footer-points.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** Four points with their glyphs in a column, under the tagline of FooterSplit. */
+import { Fragment, type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterPointsProps = {
+  extras: FooterExtras;
+  title: string;
+};
+
+export function FooterPoints({ extras, title }: FooterPointsProps) {
+  return (
+    <>
+      {((extras.points?.length ?? 0) > 0) ? (
+        <Stack gap="4" align="start">
+          <Text size="sm" weight="semibold">
+            {title}
+          </Text>
+          {(extras.points ?? []).map((p, i) => (
+            <Fragment key={p.id}>
+              {(i < 4) ? (
+                <Group gap="2" align="center" data-testid="footer-point">
+                  <LucideIcon name={p.icon} size={16} />
+                  <Text size="sm">
+                    {p.title}
+                  </Text>
+                </Group>
+              ) : null}
+            </Fragment>
+          ))}
+        </Stack>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-signup-card.tsx b/packages/react/ui/src/components/footer-signup-card.tsx
new file mode 100644
index 0000000..6a82370
--- /dev/null
+++ b/packages/react/ui/src/components/footer-signup-card.tsx
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note. */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { cn, tpl } from "../utils";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterSignupCardProps = {
+  id: string;
+  labels: FooterSplitLabels;
+};
+
+export function FooterSignupCard({ id, labels }: FooterSignupCardProps) {
+  return (
+    <Stack
+      gap="4"
+      align="stretch"
+      className="rounded bg-card inset-ring inset-ring-border p-6"
+      data-testid="signup"
+    >
+      <Group gap="2" align="center">
+        <LucideIcon name="mail" size={16} />
+        <Text size="sm" weight="semibold">
+          {labels.signup}
+        </Text>
+      </Group>
+      <Form method="dialog" className={cn("w-full max-w-md", (false ? "mx-auto" : ""))} data-testid="email-form">
+        <Label htmlFor={tpl("{0}-email", id)} className="sr-only">
+          {labels.email}
+        </Label>
+        <Group gap="2" align="start" className="w-full flex-wrap">
+          <Input type="email" name="email" className="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+          <Button variant="default" size="default" type="submit" data-testid="submit">
+            {labels.subscribe}
+          </Button>
+        </Group>
+      </Form>
+      <Text size="xs" className="text-muted-foreground">
+        {labels.note}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/footer-sitemap.tsx b/packages/react/ui/src/components/footer-sitemap.tsx
new file mode 100644
index 0000000..acacdd0
--- /dev/null
+++ b/packages/react/ui/src/components/footer-sitemap.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/**
+ * The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no
+ * link).
+ */
+import { type ReactNode } from "react";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+
+export type FooterSitemapProps = {
+  href?: string;
+  label: string;
+};
+
+export function FooterSitemap({ href, label }: FooterSitemapProps) {
+  return (
+    <>
+      {href ? (
+        <Link href={href} size="sm" data-testid="footer-sitemap">
+          <LucideIcon name="arrow-right" size={16} />
+          {label}
+        </Link>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/hero-badge.tsx b/packages/react/ui/src/components/hero-badge.tsx
new file mode 100644
index 0000000..09beaf7
--- /dev/null
+++ b/packages/react/ui/src/components/hero-badge.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/** A composite badge on a dark band: an optional small mark beside a label. */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Text } from "../primitives/text/text";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+export type HeroBadgeProps = {
+  label: string;
+  mark?: string;
+};
+
+export function HeroBadge({ label, mark }: HeroBadgeProps) {
+  return (
+    <Group
+      gap="2"
+      align="center"
+      className={cn(
+        "h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30",
+        defaults.hero.badge
+      )}
+      data-testid="section-badge"
+    >
+      {mark ? (
+        <Badge variant="secondary" size="sm" data-testid="badge-mark">
+          {mark}
+        </Badge>
+      ) : null}
+      <Text size="xs" weight="bold" className="leading-5 text-background">
+        {label}
+      </Text>
+    </Group>
+  );
+}
diff --git a/packages/react/ui/src/components/hero-head.tsx b/packages/react/ui/src/components/hero-head.tsx
new file mode 100644
index 0000000..93a17a4
--- /dev/null
+++ b/packages/react/ui/src/components/hero-head.tsx
@@ -0,0 +1,119 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/**
+ * The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a
+ * call to action.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { Link } from "../primitives/link/link";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { defaults } from "../presets/defaults";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type HeroHeadProps = {
+  brand?: string;
+  brandHref?: string;
+  links?: NavLink[];
+  current?: string;
+  login?: string;
+  loginHref?: string;
+  cta?: string;
+  href?: string;
+  skip?: string;
+  navLabel?: string;
+  landmarkLabel?: string;
+};
+
+export function HeroHead({
+  brand,
+  brandHref,
+  links,
+  current = "",
+  login,
+  loginHref,
+  cta,
+  href,
+  skip,
+  navLabel,
+  landmarkLabel,
+}: HeroHeadProps) {
+  return (
+    <Block
+      tag="header"
+      className={cn("flex w-full flex-wrap items-center justify-between pr-4", defaults.hero.head)}
+      data-testid="hero-head"
+      aria-label={landmarkLabel}
+    >
+      {skip ? (
+        <LinkPlain
+          href="#main-content"
+          className={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+            "focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border"}
+          data-testid="skip-link"
+        >
+          {skip}
+        </LinkPlain>
+      ) : null}
+      <MenuEntry
+        href={brandHref}
+        className={cn(defaults.text.small, "font-medium leading-6 text-background")}
+        testid="brand"
+      >
+        {brand}
+      </MenuEntry>
+      {(links && ((links?.length ?? 0) > 0)) ? (
+        <NavBlock
+          label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", navLabel, landmarkLabel)) : navLabel)}
+          testid="site-nav"
+        >
+          <Group gap="8" align="center" className="flex-wrap">
+            {(links ?? []).map((l) => (
+              <Fragment key={l.id}>
+                {l.href ? (
+                  <Link
+                    href={l.href}
+                    variant="default"
+                    aria-current={((l.id === current) ? "page" : undefined)}
+                    className="text-xs font-medium leading-5 text-background"
+                    data-testid="nav-link"
+                  >
+                    {l.name}
+                  </Link>
+                ) : (
+                  <Inline className="text-xs font-medium leading-5 text-background" data-testid="nav-link">
+                    {l.name}
+                  </Inline>
+                )}
+              </Fragment>
+            ))}
+          </Group>
+        </NavBlock>
+      ) : null}
+      <Group gap="2" align="center">
+        {login ? (
+          <Button
+            href={loginHref}
+            variant="ghost"
+            size="sm"
+            className="text-background hover:bg-background/10"
+            data-testid="nav-login"
+          >
+            {login}
+          </Button>
+        ) : null}
+        {cta ? (
+          <Button href={href} variant="secondary" size="sm" data-testid="header-cta">
+            {cta}
+          </Button>
+        ) : null}
+      </Group>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/hero-split-extras.tsx b/packages/react/ui/src/components/hero-split-extras.tsx
new file mode 100644
index 0000000..223540a
--- /dev/null
+++ b/packages/react/ui/src/components/hero-split-extras.tsx
@@ -0,0 +1,131 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-split-parts.ts
+/**
+ * What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small
+ * feature cards, or a quote with its author over three figures.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import type { HeroContent } from "../blocks/hero-split.types";
+
+export type HeroSplitExtrasProps = {
+  content: HeroContent;
+  extra?: "stats" | "avatars" | "minis" | "quote" | "none";
+};
+
+export function HeroSplitExtras({ content, extra = "none" }: HeroSplitExtrasProps) {
+  return (
+    <>
+      {(((extra as string) === "stats") && ((content.stats?.length ?? 0) > 0)) ? (
+        <Box className="grid grid-cols-3 gap-4" data-testid="hero-stats">
+          {(content.stats ?? []).map((s, i) => (
+            <Fragment key={s.id}>
+              {(i < 3) ? (
+                <Stack gap="0" className="rounded bg-card inset-ring inset-ring-border p-4" data-testid="hero-stat">
+                  <Text size="2xl" weight="semibold">
+                    {s.value}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {s.label}
+                  </Text>
+                </Stack>
+              ) : null}
+            </Fragment>
+          ))}
+        </Box>
+      ) : null}
+      {(((extra as string) === "avatars") && ((content.people?.length ?? 0) > 0)) ? (
+        <Group gap="4" align="center" className="flex-wrap" data-testid="hero-proof">
+          <Group gap="2" align="center">
+            {(content.people ?? []).map((p, i) => (
+              <Fragment key={p.id}>
+                {(i < 4) ? (
+                  <MediaFrame alt={p.author} ratio="1/1" className="size-10 shrink-0 rounded-full" />
+                ) : null}
+              </Fragment>
+            ))}
+          </Group>
+          <Text size="sm" className="text-muted-foreground">
+            {content.proof}
+          </Text>
+        </Group>
+      ) : null}
+      {(((extra as string) === "minis") && ((content.features?.length ?? 0) > 0)) ? (
+        <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2" data-testid="hero-minis">
+          {(content.features ?? []).map((f, i) => (
+            <Fragment key={f.id}>
+              {(i < 2) ? (
+                <Group
+                  gap="4"
+                  align="start"
+                  className="rounded bg-card inset-ring inset-ring-border p-4"
+                  data-testid="hero-mini"
+                >
+                  <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                    <LucideIcon name={f.icon} size={20} />
+                  </Box>
+                  <Stack gap="0">
+                    <Text size="sm" weight="semibold">
+                      {f.title}
+                    </Text>
+                    <Text size="xs" className="text-muted-foreground">
+                      {f.text}
+                    </Text>
+                  </Stack>
+                </Group>
+              ) : null}
+            </Fragment>
+          ))}
+        </Box>
+      ) : null}
+      {(((extra as string) === "quote") && ((content.people?.length ?? 0) > 0)) ? (
+        <Stack gap="6" align="stretch">
+          {(content.people ?? []).map((p, i) => (
+            <Fragment key={p.id}>
+              {(i < 1) ? (
+                <FigureBlock className="flex flex-col gap-4" testid="hero-quote">
+                  <Text tag="blockquote" className="text-lg font-medium">
+                    {p.quote}
+                  </Text>
+                  <Group gap="4" align="center">
+                    <MediaFrame alt={p.author} ratio="1/1" className="size-10 shrink-0 rounded-full" />
+                    <Stack gap="0">
+                      <Text size="sm" weight="semibold">
+                        {p.author}
+                      </Text>
+                      <Text size="xs" className="text-muted-foreground">
+                        {p.role}
+                      </Text>
+                    </Stack>
+                  </Group>
+                </FigureBlock>
+              ) : null}
+            </Fragment>
+          ))}
+          <Box className="grid grid-cols-3 gap-4" data-testid="hero-stats">
+            {(content.stats ?? []).map((s, i) => (
+              <Fragment key={s.id}>
+                {(i < 3) ? (
+                  <Stack gap="0" className="rounded bg-card inset-ring inset-ring-border p-4" data-testid="hero-stat">
+                    <Text size="2xl" weight="semibold">
+                      {s.value}
+                    </Text>
+                    <Text size="xs" className="text-muted-foreground">
+                      {s.label}
+                    </Text>
+                  </Stack>
+                ) : null}
+              </Fragment>
+            ))}
+          </Box>
+        </Stack>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/hero-split-media.tsx b/packages/react/ui/src/components/hero-split-media.tsx
new file mode 100644
index 0000000..2f4bf05
--- /dev/null
+++ b/packages/react/ui/src/components/hero-split-media.tsx
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-split-parts.ts
+/**
+ * What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with
+ * captions, or a picture with two plan cards floating over it.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import { OfferMedia } from "../components/offer-media";
+import { cn } from "../utils";
+import type { HeroContent } from "../blocks/hero-split.types";
+
+export type HeroSplitMediaProps = {
+  content: HeroContent;
+  alt: string;
+  media?: "picture" | "card" | "grid" | "plans";
+};
+
+export function HeroSplitMedia({ content, alt, media = "picture" }: HeroSplitMediaProps) {
+  return (
+    <>
+      {((media as string) === "picture") ? (
+        <MediaFrame alt={alt} ratio="4/3" />
+      ) : null}
+      {((media as string) === "card") ? (
+        <OfferMedia alt={alt} card={content.card} />
+      ) : null}
+      {(((media as string) === "grid") && ((content.features?.length ?? 0) > 0)) ? (
+        <Box className="grid grid-cols-2 gap-4" data-testid="hero-grid">
+          {(content.features ?? []).map((f, i) => (
+            <Fragment key={f.id}>
+              {(i < 4) ? (
+                <FigureBlock className="flex flex-col gap-2" testid="hero-tile">
+                  <MediaFrame alt={f.title} ratio="1/1" />
+                  <Text size="xs" className="text-muted-foreground">
+                    {f.title}
+                  </Text>
+                </FigureBlock>
+              ) : null}
+            </Fragment>
+          ))}
+        </Box>
+      ) : null}
+      {(((media as string) === "plans") && ((content.plans?.length ?? 0) > 0)) ? (
+        <Box className="relative" data-testid="hero-media">
+          <MediaFrame alt={alt} ratio="4/3" />
+          {(content.plans ?? []).map((p, i) => (
+            <Fragment key={p.id}>
+              {(i < 2) ? (
+                <Stack
+                  gap="2"
+                  className={cn(
+                    "absolute w-48 rounded bg-card p-4 shadow-lg",
+                    ((i === 0) ? "top-8 left-4" : "right-4 bottom-8")
+                  )}
+                  data-testid="hero-plan"
+                >
+                  <Text size="sm" weight="semibold">
+                    {p.name}
+                  </Text>
+                  <Group gap="2" align="center">
+                    <LucideIcon name="check" size={16} />
+                    <Text size="xs" className="text-muted-foreground">
+                      {p.tagline}
+                    </Text>
+                  </Group>
+                </Stack>
+              ) : null}
+            </Fragment>
+          ))}
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/icon-tab.tsx b/packages/react/ui/src/components/icon-tab.tsx
new file mode 100644
index 0000000..5b6f952
--- /dev/null
+++ b/packages/react/ui/src/components/icon-tab.tsx
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key
+ * movement between tabs is the job of IconTabs (see roving).
+ */
+import { type ReactNode } from "react";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { cn, variants } from "../utils";
+
+/** IconTab: the classes of each value (shadcn/cva style). */
+export const iconTabVariants = variants({
+  base:
+    "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground inset-ring " +
+    "inset-ring-transparent [&>svg]:size-4 rounded",
+  variants: {
+    state: {
+      default: "",
+      active: "bg-card text-foreground inset-ring-border",
+    },
+  },
+  defaultVariants: { state: "default" },
+});
+
+export type IconTabProps = {
+  active?: boolean;
+  label: string;
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+};
+
+export function IconTab({ active = false, label, className, children, onClick }: IconTabProps) {
+  return (
+    <ButtonPlain
+      type="button"
+      role="tab"
+      aria-label={label}
+      className={cn(iconTabVariants({ state: (active ? "active" : "default") }), className)}
+      aria-selected={active}
+      tabIndex={(active ? 0 : -1)}
+      data-slot="icon-tab"
+      data-state={(active ? "active" : "default")}
+      onClick={() => onClick?.()}
+    >
+      {children}
+    </ButtonPlain>
+  );
+}
diff --git a/packages/react/ui/src/components/icon-tabs.tsx b/packages/react/ui/src/components/icon-tabs.tsx
new file mode 100644
index 0000000..9dfe433
--- /dev/null
+++ b/packages/react/ui/src/components/icon-tabs.tsx
@@ -0,0 +1,28 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach
+ * `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { cn } from "../utils";
+
+export type IconTabsProps = {
+  label?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function IconTabs({ label, className, children }: IconTabsProps) {
+  return (
+    <Box
+      className={cn("flex items-center gap-2", className)}
+      role="tablist"
+      aria-label={label}
+      data-slot="icon-tabs"
+    >
+      {children}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/job-cards.tsx b/packages/react/ui/src/components/job-cards.tsx
new file mode 100644
index 0000000..adb7b5c
--- /dev/null
+++ b/packages/react/ui/src/components/job-cards.tsx
@@ -0,0 +1,148 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/people-parts.ts
+/**
+ * The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply)
+ * or as a table.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import type { Job, Department, JobLabels } from "../blocks/job-board.types";
+
+export type JobCardsProps = {
+  jobs: Job[];
+  departments: Department[];
+  labels: JobLabels;
+  layout?: "grid" | "grouped" | "table";
+  salary?: "show" | "hide";
+};
+
+export function JobCards({ jobs, departments, labels, layout = "grid", salary = "hide" }: JobCardsProps) {
+  return (
+    <>
+      {((layout as string) === "table") ? (
+        <Box className="w-full overflow-x-auto rounded inset-ring inset-ring-border">
+          <Table className="w-full text-left text-sm" data-testid="job-table">
+            <TableCaption className="sr-only">
+              {labels.caption}
+            </TableCaption>
+            <TableHead className="bg-muted">
+              <TableRow>
+                <TableHeadCell scope="col" className="px-4 py-2">
+                  {labels.role}
+                </TableHeadCell>
+                <TableHeadCell scope="col" className="hidden py-2 md:table-cell">
+                  {labels.team}
+                </TableHeadCell>
+                <TableHeadCell scope="col" className="hidden py-2 sm:table-cell">
+                  {labels.location}
+                </TableHeadCell>
+                <TableHeadCell scope="col" className="py-2">
+                  {labels.type}
+                </TableHeadCell>
+                {((salary as string) === "show") ? (
+                  <TableHeadCell scope="col" className="hidden py-2 md:table-cell">
+                    {labels.salary}
+                  </TableHeadCell>
+                ) : null}
+                <TableHeadCell scope="col" className="py-2 pr-4">
+                  <Inline className="sr-only">
+                    {labels.apply}
+                  </Inline>
+                </TableHeadCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {(jobs ?? []).map((j) => (
+                <TableRow key={j.id} className="border-t border-border" data-testid="item">
+                  <TableCell className="px-4 py-4 font-medium">
+                    {j.title}
+                  </TableCell>
+                  <TableCell className="hidden md:table-cell">
+                    {departments.filter((i) => !j.dept || i["id"] === j.dept)[0]?.name ?? ""}
+                  </TableCell>
+                  <TableCell className="hidden sm:table-cell">
+                    {j.location}
+                  </TableCell>
+                  <TableCell>
+                    {j.type}
+                  </TableCell>
+                  {((salary as string) === "show") ? (
+                    <TableCell className="hidden md:table-cell">
+                      {j.salary}
+                    </TableCell>
+                  ) : null}
+                  <TableCell className="pr-4 text-right">
+                    <MenuEntry href={j.href} className="font-medium">
+                      {labels.apply}
+                    </MenuEntry>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Box>
+      ) : (
+        <Grid cols="1-2" className="gap-4" data-testid="items">
+          {(jobs ?? []).map((j) => (
+            <Stack key={j.id} gap="4" className="rounded bg-card inset-ring inset-ring-border p-6" data-testid="item">
+              <Stack gap="2">
+                <Text size="lg" weight="semibold">
+                  {j.title}
+                </Text>
+                <Group gap="4" className="flex-wrap text-sm text-muted-foreground">
+                  <Group gap="2" align="center">
+                    <LucideIcon name="briefcase" size={16} />
+                    <Inline>
+                      {j.type}
+                    </Inline>
+                  </Group>
+                  <Group gap="2" align="center">
+                    <LucideIcon name="map-pin" size={16} />
+                    <Inline>
+                      {j.location}
+                    </Inline>
+                  </Group>
+                  <Group gap="2" align="center">
+                    <LucideIcon name="calendar" size={16} />
+                    <Inline>
+                      {j.posted}
+                    </Inline>
+                  </Group>
+                </Group>
+              </Stack>
+              {((salary as string) === "show") ? (
+                <Text size="base" weight="semibold" data-testid="salary">
+                  {j.salary}
+                </Text>
+              ) : null}
+              <Group gap="4" align="center" justify="between" className="mt-auto">
+                <Badge variant="secondary" size="default">
+                  {departments.filter((i) => !j.dept || i["id"] === j.dept)[0]?.name ?? ""}
+                </Badge>
+                <MenuEntry href={j.href} className="inline-flex items-center gap-2 text-sm font-medium">
+                  {labels.apply}
+                  <LucideIcon name="arrow-right" size={16} />
+                </MenuEntry>
+              </Group>
+            </Stack>
+          ))}
+        </Grid>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/logo-sidebar.tsx b/packages/react/ui/src/components/logo-sidebar.tsx
new file mode 100644
index 0000000..e960b3e
--- /dev/null
+++ b/packages/react/ui/src/components/logo-sidebar.tsx
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The
+ * variant picks the padding (recipe).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { cn, variants } from "../utils";
+
+/** LogoSidebar: the classes of each value (shadcn/cva style). */
+export const logoSidebarVariants = variants({
+  base: "flex h-8 items-center justify-between",
+  variants: {
+    variant: {
+      chat: "px-2",
+      creator: "pr-4",
+    },
+  },
+  defaultVariants: { variant: "chat" },
+});
+
+export type LogoSidebarProps = {
+  variant?: "chat" | "creator";
+  name: string;
+  className?: string;
+  mark?: ReactNode;
+  actions?: ReactNode;
+};
+
+export function LogoSidebar({ variant = "chat", name, className, mark, actions }: LogoSidebarProps) {
+  return (
+    <Box
+      className={cn(
+        logoSidebarVariants({ variant: variant }),
+        "in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0",
+        className
+      )}
+      data-slot="logo-sidebar"
+    >
+      <Inline className="flex items-center gap-4" data-slot="logo-sidebar-brand">
+        {mark}
+        <Inline
+          className="text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden"
+          data-slot="logo-sidebar-name"
+        >
+          {name}
+        </Inline>
+      </Inline>
+      {actions ? (
+        <Inline className="flex items-center gap-2 in-data-[nav=collapsed]:hidden" data-slot="logo-sidebar-actions">
+          {actions}
+        </Inline>
+      ) : null}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/logo-slot.tsx b/packages/react/ui/src/components/logo-slot.tsx
new file mode 100644
index 0000000..9957e8c
--- /dev/null
+++ b/packages/react/ui/src/components/logo-slot.tsx
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/marketing.ts
+/** One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only. */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+export type LogoSlotProps = {
+  name: string;
+  icon: string;
+};
+
+export function LogoSlot({ name, icon }: LogoSlotProps) {
+  return (
+    <Box
+      className={cn(
+        "flex shrink-0 items-center justify-center text-muted-foreground",
+        defaults.logos.slot
+      )}
+      data-testid="item"
+      data-slot="logo-slot"
+    >
+      <LucideIcon name={icon} size={defaults.logos.glyph} />
+      <Text size="sm" weight="semibold" className="sr-only">
+        {name}
+      </Text>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/media-contacts.tsx b/packages/react/ui/src/components/media-contacts.tsx
new file mode 100644
index 0000000..5227ccd
--- /dev/null
+++ b/packages/react/ui/src/components/media-contacts.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card. */
+import { Fragment, type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaContactsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaContacts({ extras, labels }: MediaContactsProps) {
+  return (
+    <Stack gap="6" align="stretch">
+      <Stack gap="2" align="stretch">
+        <Text size="sm" weight="semibold">
+          {labels.list}
+        </Text>
+        {(extras.channels ?? []).map((c, i) => (
+          <Button key={c.id} variant="outline" size="default" href={c.href} className="w-full gap-2" data-testid="media-channel">
+            <LucideIcon name={c.icon} size={16} />
+            {c.title}
+          </Button>
+        ))}
+      </Stack>
+      <Stack gap="2" align="stretch" className="rounded bg-card inset-ring inset-ring-border p-4">
+        <Text size="sm" weight="semibold">
+          {labels.figures}
+        </Text>
+        {(extras.stats ?? []).map((s, i) => (
+          <Fragment key={s.id}>
+            {(i < 3) ? (
+              <Group gap="4" align="center" justify="between" data-testid="media-stat">
+                <Text size="sm" className="text-muted-foreground">
+                  {s.label}
+                </Text>
+                <Text size="sm" weight="semibold">
+                  {s.value}
+                </Text>
+              </Group>
+            ) : null}
+          </Fragment>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/media-figures.tsx b/packages/react/ui/src/components/media-figures.tsx
new file mode 100644
index 0000000..734b5fd
--- /dev/null
+++ b/packages/react/ui/src/components/media-figures.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The figures of MediaList: four in two columns, centered, or three in a row. */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaFiguresProps = {
+  extras: MediaExtras;
+  mode?: "grid" | "row";
+};
+
+export function MediaFigures({ extras, mode = "grid" }: MediaFiguresProps) {
+  return (
+    <Box
+      className={
+        (mode as string) === "grid" ? "grid grid-cols-2 gap-6 text-center"
+        : "grid grid-cols-3 gap-6"
+      }
+    >
+      {(extras.stats ?? []).map((s, i) => (
+        <Fragment key={s.id}>
+          {(i < (((mode as string) === "grid") ? 4 : 3)) ? (
+            <Stack gap="0" align={(((mode as string) === "grid") ? "center" : "start")} data-testid="media-stat">
+              <Text size="3xl" weight="bold">
+                {s.value}
+              </Text>
+              <Text size="sm" className="text-muted-foreground">
+                {s.label}
+              </Text>
+            </Stack>
+          ) : null}
+        </Fragment>
+      ))}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/media-frame.assets.ts b/packages/react/ui/src/components/media-frame.assets.ts
new file mode 100644
index 0000000..fe14339
--- /dev/null
+++ b/packages/react/ui/src/components/media-frame.assets.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+// Data of MediaFrame: long values (pictures as data URIs) kept out of the component file.
+
+export const PLACEHOLDER: Record<string, string> = {
+  "light": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNlMmU4ZjAiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjOTRhM2I4IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+  "dark": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxZTI5M2IiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjNDc1NTY5IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+};
diff --git a/packages/react/ui/src/components/media-frame.tsx b/packages/react/ui/src/components/media-frame.tsx
new file mode 100644
index 0000000..14faf89
--- /dev/null
+++ b/packages/react/ui/src/components/media-frame.tsx
@@ -0,0 +1,62 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one
+ * of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral
+ * placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the
+ * placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the
+ * corners are the plain theme radius.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Image } from "../primitives/image/image";
+import { at, cn, variants } from "../utils";
+import { PLACEHOLDER } from "./media-frame.assets";
+
+/** MediaFrame: the classes of each value (shadcn/cva style). */
+export const mediaFrameVariants = variants({
+  base: "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border rounded",
+  variants: {
+    ratio: {
+      "16/9": "aspect-video",
+      "4/3": "aspect-4/3",
+      "1/1": "aspect-square",
+      "3/4": "aspect-3/4",
+      "21/9": "aspect-21/9",
+    },
+  },
+  defaultVariants: { ratio: "16/9" },
+});
+
+export type MediaFrameProps = {
+  alt: string;
+  src?: string;
+  darkSrc?: string;
+  ratio?: "16/9" | "4/3" | "1/1" | "3/4" | "21/9";
+  className?: string;
+};
+
+export function MediaFrame({ alt, src, darkSrc, ratio = "16/9", className }: MediaFrameProps) {
+  const lightSrc = src ?? at(PLACEHOLDER, "light");
+  const nightSrc = darkSrc ?? src ?? at(PLACEHOLDER, "dark");
+  return (
+    <Box
+      className={cn(mediaFrameVariants({ ratio: ratio }), className)}
+      data-slot="media-frame"
+      data-placeholder={(src ? "false" : "true")}
+    >
+      <Image
+        src={lightSrc}
+        alt={alt}
+        className="absolute inset-0 size-full object-cover dark:hidden"
+        data-theme-src="light"
+      />
+      <Image
+        src={nightSrc}
+        alt={alt}
+        className="absolute inset-0 hidden size-full object-cover dark:block"
+        data-theme-src="dark"
+      />
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/media-posts.tsx b/packages/react/ui/src/components/media-posts.tsx
new file mode 100644
index 0000000..490a95c
--- /dev/null
+++ b/packages/react/ui/src/components/media-posts.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The latest posts of MediaList as rows: a dot, the title, the date and reading time. */
+import { Fragment, type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { tpl } from "../utils";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaPostsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaPosts({ extras, labels }: MediaPostsProps) {
+  return (
+    <Stack gap="4" align="stretch">
+      <Text size="sm" weight="semibold">
+        {labels.list}
+      </Text>
+      {(extras.posts ?? []).map((p, i) => (
+        <Fragment key={p.id}>
+          {(i < 3) ? (
+            <Group gap="4" align="start" data-testid="media-post">
+              <Inline className="mt-2 size-2 shrink-0 rounded-full bg-primary" />
+              <Stack gap="0">
+                <MenuEntry href={p.href} className="text-sm font-medium" size="sm">
+                  {p.title}
+                </MenuEntry>
+                <Text size="xs" className="text-muted-foreground">
+                  {tpl("{0} · {1}", p.date, tpl(labels.minutes, p.minutes))}
+                </Text>
+              </Stack>
+            </Group>
+          ) : null}
+        </Fragment>
+      ))}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/media-review.tsx b/packages/react/ui/src/components/media-review.tsx
new file mode 100644
index 0000000..503d377
--- /dev/null
+++ b/packages/react/ui/src/components/media-review.tsx
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author. */
+import { Fragment, type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Rating } from "../components/rating";
+import { tpl } from "../utils";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaReviewProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaReview({ extras, labels }: MediaReviewProps) {
+  return (
+    <>
+      {(extras.reviews ?? []).map((r, i) => (
+        <Fragment key={r.id}>
+          {(i < 1) ? (
+            <Stack gap="4" align="stretch" className="rounded bg-muted p-6" data-testid="media-review">
+              <Group gap="4" align="center" justify="between" className="flex-wrap">
+                <Text size="sm" weight="medium">
+                  {labels.featured}
+                </Text>
+                <Rating value={r.rating} label={tpl(labels.rating, r.rating)} />
+              </Group>
+              <Text size="base">
+                {tpl("“{0}”", r.text)}
+              </Text>
+              <Text size="sm" className="text-muted-foreground">
+                {tpl("{0} · {1}", r.author, r.date)}
+              </Text>
+            </Stack>
+          ) : null}
+        </Fragment>
+      ))}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/media-steps.tsx b/packages/react/ui/src/components/media-steps.tsx
new file mode 100644
index 0000000..07cf986
--- /dev/null
+++ b/packages/react/ui/src/components/media-steps.tsx
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The steps of MediaList as numbered rows: the number, a glyph, the title and the text. */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { tpl } from "../utils";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaStepsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaSteps({ extras, labels }: MediaStepsProps) {
+  return (
+    <Stack gap="4" align="stretch">
+      <Text size="sm" weight="semibold">
+        {labels.list}
+      </Text>
+      {(extras.steps ?? []).map((s, i) => (
+        <Group key={s.id} gap="4" align="start" data-testid="media-step">
+          <Text size="sm" weight="semibold" className="w-6 shrink-0 text-primary">
+            {tpl("0{0}", ((i + 1) == null ? undefined : String((i + 1))))}
+          </Text>
+          <Inline className="flex size-6 shrink-0 items-center justify-center text-primary">
+            <LucideIcon name={s.icon} size={16} />
+          </Inline>
+          <Stack gap="0">
+            <Text size="sm" weight="semibold">
+              {s.title}
+            </Text>
+            <Text size="sm" className="text-muted-foreground">
+              {s.text}
+            </Text>
+          </Stack>
+        </Group>
+      ))}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/media-topics.tsx b/packages/react/ui/src/components/media-topics.tsx
new file mode 100644
index 0000000..1dba555
--- /dev/null
+++ b/packages/react/ui/src/components/media-topics.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow. */
+import { Fragment, type ReactNode } from "react";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { tpl } from "../utils";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaTopicsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaTopics({ extras, labels }: MediaTopicsProps) {
+  return (
+    <Stack gap="4" align="stretch">
+      <Text size="sm" weight="semibold">
+        {labels.list}
+      </Text>
+      {(extras.topics ?? []).map((c, i) => (
+        <Fragment key={c.id}>
+          {(i < 5) ? (
+            <MenuEntry
+              href={c.href}
+              className="rounded bg-card inset-ring inset-ring-border flex w-full items-center gap-4 p-4"
+              variant="block"
+              testid="media-topic"
+              block={true}
+            >
+              <Inline className={"flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground"}>
+                <LucideIcon name={c.icon} size={16} />
+              </Inline>
+              <Stack gap="0" className="min-w-0 flex-1">
+                <Text size="sm" weight="semibold">
+                  {c.name}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {tpl(labels.count, c.count)}
+                </Text>
+              </Stack>
+              <LucideIcon name="arrow-right" size={16} />
+            </MenuEntry>
+          ) : null}
+        </Fragment>
+      ))}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/member-row.tsx b/packages/react/ui/src/components/member-row.tsx
new file mode 100644
index 0000000..71a87ab
--- /dev/null
+++ b/packages/react/ui/src/components/member-row.tsx
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/people-parts.ts
+/**
+ * One member of TeamGrid beside a small portrait: the name, the role, then the department and the place
+ * (detailed, directory), the bio (detailed) and the skills (detailed, list).
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { at, cn } from "../utils";
+import type { Member } from "../blocks/team-grid.types";
+
+export type MemberRowProps = {
+  member: Member;
+  depts: Record<string, string>;
+  layout?: "cards" | "minimal" | "detailed" | "list" | "directory";
+};
+
+export function MemberRow({ member, depts, layout = "list" }: MemberRowProps) {
+  return (
+    <Group
+      gap="4"
+      align="start"
+      className={
+        (layout as string) === "detailed" ? "rounded bg-card inset-ring inset-ring-border flex-col p-6"
+        : (layout as string) === "directory" ? "rounded bg-card inset-ring inset-ring-border p-4"
+        : "border-b border-border pb-4"
+      }
+      data-testid="item"
+    >
+      <MediaFrame
+        alt={member.name}
+        ratio="1/1"
+        className={cn((((layout as string) === "detailed") ? "size-16" : "size-12"), "shrink-0")}
+      />
+      <Stack gap="2" className="min-w-0 flex-1">
+        <Stack gap="0">
+          <Text size="base" weight="semibold">
+            {member.name}
+          </Text>
+          <Text size="sm" className="text-muted-foreground">
+            {member.role}
+          </Text>
+        </Stack>
+        {((layout as string) !== "list") ? (
+          <Group gap="2" align="center" className="flex-wrap text-xs text-muted-foreground">
+            <Badge variant="outline" size="sm">
+              {at(depts, member.dept)}
+            </Badge>
+            <LucideIcon name="map-pin" size={16} />
+            <Inline>
+              {member.location}
+            </Inline>
+          </Group>
+        ) : null}
+        {((layout as string) === "detailed") ? (
+          <Text size="sm" className="text-muted-foreground">
+            {member.bio}
+          </Text>
+        ) : null}
+        {((layout as string) !== "directory") ? (
+          <Group gap="2" className="flex-wrap">
+            {(member.skills ?? []).map((k) => (
+              <Badge key={k} variant="secondary" size="sm">
+                {k}
+              </Badge>
+            ))}
+          </Group>
+        ) : null}
+      </Stack>
+    </Group>
+  );
+}
diff --git a/packages/react/ui/src/components/menu-entry.tsx b/packages/react/ui/src/components/menu-entry.tsx
new file mode 100644
index 0000000..7e5153b
--- /dev/null
+++ b/packages/react/ui/src/components/menu-entry.tsx
@@ -0,0 +1,57 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/**
+ * One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine
+ * routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { Link } from "../primitives/link/link";
+
+export type MenuEntryProps = {
+  href?: string;
+  current?: boolean;
+  variant?: "default" | "muted" | "block";
+  size?: "default" | "sm";
+  testid?: string;
+  block?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function MenuEntry({
+  href,
+  current = false,
+  variant = "default",
+  size = "default",
+  testid,
+  block = false,
+  className,
+  children,
+}: MenuEntryProps) {
+  return (
+    <>
+      {href ? (
+        <Link
+          href={href}
+          variant={variant}
+          size={size}
+          aria-current={(current ? "page" : undefined)}
+          className={className}
+          data-testid={testid}
+        >
+          {children}
+        </Link>
+      ) : block ? (
+        <Box className={className} aria-current={(current ? "page" : undefined)} data-testid={testid}>
+          {children}
+        </Box>
+      ) : (
+        <Inline className={className} aria-current={(current ? "page" : undefined)} data-testid={testid}>
+          {children}
+        </Inline>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/meter-row.tsx b/packages/react/ui/src/components/meter-row.tsx
new file mode 100644
index 0000000..069392f
--- /dev/null
+++ b/packages/react/ui/src/components/meter-row.tsx
@@ -0,0 +1,67 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With
+ * `href` the whole row is a link.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Progress } from "../primitives/form/progress";
+import { Link } from "../primitives/link/link";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type MeterRowProps = {
+  label: string;
+  value: number;
+  caption: string;
+  hint?: string;
+  href?: string;
+  className?: string;
+};
+
+export function MeterRow({ label, value, caption, hint, href, className }: MeterRowProps) {
+  return (
+    <Box className={cn("min-w-0", className)} data-slot="meter-row">
+      {href ? (
+        <Link
+          href={href}
+          variant="block"
+          className="flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted"
+        >
+          <Box className="flex items-baseline justify-between gap-4">
+            <Text className="m-0 min-w-0 truncate text-sm font-bold text-foreground">
+              {label}
+            </Text>
+            <Text className="m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground">
+              {caption}
+            </Text>
+          </Box>
+          <Progress value={(value == null ? undefined : String(value))} max="100" aria-label={label} />
+          {hint ? (
+            <Text className="m-0 text-xs font-medium text-muted-foreground">
+              {hint}
+            </Text>
+          ) : null}
+        </Link>
+      ) : (
+        <Box className="flex min-w-0 flex-col gap-2 p-2">
+          <Box className="flex items-baseline justify-between gap-4">
+            <Text className="m-0 min-w-0 truncate text-sm font-bold text-foreground">
+              {label}
+            </Text>
+            <Text className="m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground">
+              {caption}
+            </Text>
+          </Box>
+          <Progress value={(value == null ? undefined : String(value))} max="100" aria-label={label} />
+          {hint ? (
+            <Text className="m-0 text-xs font-medium text-muted-foreground">
+              {hint}
+            </Text>
+          ) : null}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/nav-actions.tsx b/packages/react/ui/src/components/nav-actions.tsx
new file mode 100644
index 0000000..d0994d3
--- /dev/null
+++ b/packages/react/ui/src/components/nav-actions.tsx
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/**
+ * The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the
+ * press). No wrapper: they sit in the row of the bar.
+ */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+
+export type NavActionsProps = {
+  login?: string;
+  loginHref?: string;
+  cta?: string;
+  ctaHref?: string;
+  actions?: "none" | "cta";
+  tone?: "default" | "inverse";
+  themeLabel?: string;
+  onTheme?: () => void;
+};
+
+export function NavActions({
+  login,
+  loginHref,
+  cta,
+  ctaHref,
+  actions = "cta",
+  tone = "default",
+  themeLabel,
+  onTheme,
+}: NavActionsProps) {
+  return (
+    <>
+      {login ? (
+        <Button
+          variant="ghost"
+          size="sm"
+          href={loginHref}
+          className={(((tone as string) === "inverse") ? "text-background hover:bg-background/10" : "")}
+          data-testid="nav-login"
+        >
+          {login}
+        </Button>
+      ) : null}
+      {(((actions as string) === "cta") && cta) ? (
+        <Button
+          variant={(((tone as string) === "inverse") ? "secondary" : "default")}
+          size="sm"
+          href={ctaHref}
+          data-testid="header-cta"
+        >
+          {cta}
+        </Button>
+      ) : null}
+      {themeLabel ? (
+        <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => onTheme?.()}>
+          {themeLabel}
+        </Button>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/nav-bar-menu.tsx b/packages/react/ui/src/components/nav-bar-menu.tsx
new file mode 100644
index 0000000..69160b9
--- /dev/null
+++ b/packages/react/ui/src/components/nav-bar-menu.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/** The links of NavBar in a nav landmark; left out when there are no links. */
+import { type ReactNode } from "react";
+import { NavBlock } from "../components/nav-block";
+import { NavLinks } from "../components/nav-links";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type NavBarMenuProps = {
+  label: string;
+  links: NavLink[];
+  current?: string;
+  landmarkLabel?: string;
+};
+
+export function NavBarMenu({ label, links, current = "", landmarkLabel }: NavBarMenuProps) {
+  return (
+    <>
+      {((links?.length ?? 0) > 0) ? (
+        <NavBlock
+          label={label}
+          className={"order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0"}
+          testid="site-nav"
+          landmarkLabel={landmarkLabel}
+        >
+          <NavLinks links={links} current={current} />
+        </NavBlock>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/nav-block.tsx b/packages/react/ui/src/components/nav-block.tsx
new file mode 100644
index 0000000..187947c
--- /dev/null
+++ b/packages/react/ui/src/components/nav-block.tsx
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/landmarks.ts
+/** A navigation region in its own file: Block tag nav named by `label`. */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { cn } from "../utils";
+
+export type NavBlockProps = {
+  label?: string;
+  testid?: string;
+  landmarkLabel?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function NavBlock({ label, testid, landmarkLabel, className, children }: NavBlockProps) {
+  return (
+    <Block tag="nav" className={cn(className)} aria-label={(landmarkLabel ?? label)} data-testid={testid}>
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/nav-item-row.tsx b/packages/react/ui/src/components/nav-item-row.tsx
new file mode 100644
index 0000000..5ba9a77
--- /dev/null
+++ b/packages/react/ui/src/components/nav-item-row.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the
+ * right.
+ */
+import { type ReactNode } from "react";
+import { Inline } from "../primitives/inline/inline";
+
+export type NavItemRowProps = {
+  inner?: string;
+  reserveRight?: boolean;
+  children?: ReactNode;
+  icon?: ReactNode;
+  right?: ReactNode;
+};
+
+export function NavItemRow({ inner, reserveRight = false, children, icon, right }: NavItemRowProps) {
+  return (
+    <Inline className={inner} data-slot="nav-item-content">
+      <Inline
+        className={"flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center"}
+        data-slot="nav-item-left"
+      >
+        {icon}
+        <Inline className="min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden" data-slot="nav-item-label">
+          {children}
+        </Inline>
+      </Inline>
+      {right ? (
+        <Inline className="flex items-center gap-2 in-data-[nav=collapsed]:hidden" data-slot="nav-item-right">
+          {right}
+        </Inline>
+      ) : reserveRight ? (
+        <Inline className="size-5 shrink-0 in-data-[nav=collapsed]:hidden" data-slot="nav-item-right" />
+      ) : null}
+    </Inline>
+  );
+}
diff --git a/packages/react/ui/src/components/nav-item.tsx b/packages/react/ui/src/components/nav-item.tsx
new file mode 100644
index 0000000..a249ca0
--- /dev/null
+++ b/packages/react/ui/src/components/nav-item.tsx
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a
+ * button, otherwise a static box.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { NavItemRow } from "../components/nav-item-row";
+import { cn, variants } from "../utils";
+
+/** NavItem: the classes of each value (shadcn/cva style). */
+export const navItemVariants = variants({
+  base: "flex w-full items-center p-2 rounded",
+  variants: {
+    level: {
+      "1": "",
+      "2": "",
+      "3": "pr-2 pl-12",
+      "4": "pr-2 pl-20",
+    },
+    state: {
+      default: "",
+      selected: "",
+    },
+  },
+  defaultVariants: { level: "1", state: "default" },
+});
+
+/** NavItem: the classes of each value (shadcn/cva style). */
+export const navItemContentVariants = variants({
+  base:
+    "flex h-8 min-w-0 flex-1 items-center justify-between px-4 py-2 text-xs font-bold text-muted-foreground " +
+    "inset-ring inset-ring-transparent rounded",
+  variants: {
+    level: {
+      "1": "",
+      "2": "",
+      "3": "px-2",
+      "4": "px-2",
+    },
+    state: {
+      default: "",
+      selected: "bg-background text-foreground inset-ring-border",
+    },
+  },
+  defaultVariants: { level: "1", state: "default" },
+});
+
+export type NavItemProps = {
+  selected?: boolean;
+  level?: "1" | "2" | "3" | "4";
+  href?: string;
+  interactive?: boolean;
+  reserveRight?: boolean;
+  contentClass?: string;
+  className?: string;
+  children?: ReactNode;
+  icon?: ReactNode;
+  right?: ReactNode;
+  onClick?: () => void;
+};
+
+export function NavItem({
+  selected = false,
+  level,
+  href,
+  interactive = false,
+  reserveRight = false,
+  contentClass,
+  className,
+  children,
+  icon,
+  right,
+  onClick,
+}: NavItemProps) {
+  const state = selected ? "selected" : "default";
+  const outer =
+    cn(
+      navItemVariants({ level: level, state: state }),
+      "group in-data-[nav=collapsed]:justify-center",
+      className,
+    );
+  const inner =
+    cn(
+      navItemContentVariants({ level: level, state: state }),
+      (!selected && "group-hover:bg-muted"),
+      "in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0",
+      contentClass,
+    );
+  return (
+    <>
+      {href ? (
+        <LinkPlain
+          href={href}
+          className={outer}
+          aria-current={(selected ? "page" : undefined)}
+          data-slot="nav-item"
+          data-state={state}
+          onClick={() => onClick?.()}
+        >
+          <NavItemRow inner={inner} reserveRight={reserveRight} icon={icon} right={right} children={children} />
+        </LinkPlain>
+      ) : interactive ? (
+        <ButtonPlain
+          type="button"
+          className={cn(outer, "text-left")}
+          aria-current={(selected ? "page" : undefined)}
+          data-slot="nav-item"
+          data-state={state}
+          onClick={() => onClick?.()}
+        >
+          <NavItemRow inner={inner} reserveRight={reserveRight} icon={icon} right={right} children={children} />
+        </ButtonPlain>
+      ) : (
+        <Box className={outer} aria-current={(selected ? "page" : undefined)} data-slot="nav-item" data-state={state}>
+          <NavItemRow inner={inner} reserveRight={reserveRight} icon={icon} right={right} children={children} />
+        </Box>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/nav-links.tsx b/packages/react/ui/src/components/nav-links.tsx
new file mode 100644
index 0000000..2f5cc37
--- /dev/null
+++ b/packages/react/ui/src/components/nav-links.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/**
+ * The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half
+ * of the list.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { MenuEntry } from "../components/menu-entry";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type NavLinksProps = {
+  links: NavLink[];
+  current?: string;
+  side?: "all" | "left" | "right";
+};
+
+export function NavLinks({ links, current = "", side = "all" }: NavLinksProps) {
+  const count = links?.length ?? 0;
+  return (
+    <>
+      {((links?.length ?? 0) > 0) ? (
+        <Group gap="4" align="center" className="flex-wrap">
+          {(links ?? []).map((l, i) => (
+            <Fragment key={l.id}>
+              {(((side as string) === "all") || (((i * 2) < count) === ((side as string) === "left"))) ? (
+                <MenuEntry href={l.href} className="text-sm" current={(l.id === current)} testid="nav-link">
+                  {l.name}
+                </MenuEntry>
+              ) : null}
+            </Fragment>
+          ))}
+        </Group>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/notice.tsx b/packages/react/ui/src/components/notice.tsx
new file mode 100644
index 0000000..099d543
--- /dev/null
+++ b/packages/react/ui/src/components/notice.tsx
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text
+ * renders nothing visible.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+
+export type NoticeProps = {
+  text: string;
+};
+
+export function Notice({ text }: NoticeProps) {
+  return (
+    <Box className="contents" role="status" data-testid="notice">
+      {text ? (
+        <Text
+          className={"fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold " +
+            "text-background shadow-lg"}
+        >
+          <LucideIcon name="circle-check" size={16} />
+          {text}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/number-field.tsx b/packages/react/ui/src/components/number-field.tsx
new file mode 100644
index 0000000..abf9a64
--- /dev/null
+++ b/packages/react/ui/src/components/number-field.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/number-field.ts
+/**
+ * A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its
+ * ring). Static markup: the buttons carry no logic; the page wires them.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Input } from "../primitives/input/input";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+
+export type NumberFieldProps = {
+  value?: string;
+  name?: string;
+  min?: string;
+  label: string;
+  decrease: string;
+  increase: string;
+};
+
+export function NumberField({
+  value = "",
+  name = "",
+  min = "",
+  label,
+  decrease,
+  increase,
+}: NumberFieldProps) {
+  return (
+    <Box
+      className={"inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input"}
+      data-slot="number-field"
+    >
+      <Button variant="ghost" size="sm" layout="icon" type="button" aria-label={decrease} data-testid="decrease">
+        <LucideIcon name="minus" size={16} />
+      </Button>
+      <Input
+        type="number"
+        name={name}
+        value={value}
+        min={min}
+        aria-label={label}
+        size="sm"
+        className="number-bare w-8 bg-transparent px-0 text-center inset-ring-0"
+      />
+      <Button variant="ghost" size="sm" layout="icon" type="button" aria-label={increase} data-testid="increase">
+        <LucideIcon name="plus" size={16} />
+      </Button>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/offer-media.tsx b/packages/react/ui/src/components/offer-media.tsx
new file mode 100644
index 0000000..6d3df44
--- /dev/null
+++ b/packages/react/ui/src/components/offer-media.tsx
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shop-parts.ts
+/**
+ * The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats
+ * over the picture).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import type { OfferCard } from "../blocks/store-hero.types";
+
+export type OfferMediaProps = {
+  alt: string;
+  card: OfferCard;
+};
+
+export function OfferMedia({ alt, card }: OfferMediaProps) {
+  return (
+    <Box className="relative" data-testid="hero-media">
+      <MediaFrame alt={alt} ratio="4/3" />
+      <Group
+        gap="4"
+        align="start"
+        className="absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg"
+        data-testid="offer-card"
+      >
+        <Box className="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+          <LucideIcon name={card.icon} size={20} />
+        </Box>
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {card.title}
+          </Text>
+          <Text size="xs" className="text-muted-foreground">
+            {card.text}
+          </Text>
+        </Stack>
+      </Group>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/order-rows.tsx b/packages/react/ui/src/components/order-rows.tsx
new file mode 100644
index 0000000..5ff392b
--- /dev/null
+++ b/packages/react/ui/src/components/order-rows.tsx
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/orders.ts
+/** The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill. */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { Pill } from "../components/pill";
+import { at, cn, fmtMoney, tpl } from "../utils";
+import type { Order, OrderLabels } from "../blocks/order-table.types";
+
+export type OrderRowsProps = {
+  orders: Order[];
+  statuses: Record<string, string>;
+  labels: OrderLabels;
+  density?: "default" | "compact";
+};
+
+export function OrderRows({ orders, statuses, labels, density = "default" }: OrderRowsProps) {
+  return (
+    <Box className="w-full overflow-x-auto">
+      <Table className="w-full text-left text-sm" data-testid="order-table">
+        <TableCaption className="sr-only">
+          {labels.caption}
+        </TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell scope="col" className="py-2">
+              {labels.number}
+            </TableHeadCell>
+            <TableHeadCell scope="col" className="py-2">
+              {labels.date}
+            </TableHeadCell>
+            <TableHeadCell scope="col" className="py-2">
+              {labels.items}
+            </TableHeadCell>
+            <TableHeadCell scope="col" className="py-2">
+              {labels.total}
+            </TableHeadCell>
+            <TableHeadCell scope="col" className="py-2">
+              {labels.status}
+            </TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {(orders ?? []).map((o) => (
+            <TableRow key={o.id} className="border-t border-border" data-testid="item">
+              <TableCell className={cn("font-semibold", (((density as string) === "compact") ? "py-2" : "py-4"))}>
+                {o.number}
+              </TableCell>
+              <TableCell>
+                {o.date}
+              </TableCell>
+              <TableCell>
+                {tpl(labels.itemsCount, o.items)}
+              </TableCell>
+              <TableCell>
+                {fmtMoney(o.total, o.currency)}
+              </TableCell>
+              <TableCell>
+                <Pill
+                  tone={
+                    o.status === "paid" ? "green"
+                    : o.status === "shipped" ? "blue"
+                    : o.status === "pending" ? "amber"
+                    : "gray"
+                  }
+                >
+                  {at(statuses, o.status)}
+                </Pill>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/over-media.tsx b/packages/react/ui/src/components/over-media.tsx
new file mode 100644
index 0000000..d3492fa
--- /dev/null
+++ b/packages/react/ui/src/components/over-media.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/**
+ * A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing.
+ * It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the
+ * header stays the root of the block (rule 01).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { MediaFrame } from "../components/media-frame";
+
+export type OverMediaProps = {
+  on?: boolean;
+  alt: string;
+};
+
+export function OverMedia({ on = false, alt }: OverMediaProps) {
+  return (
+    <>
+      {on ? (
+        <Box className="pointer-events-none absolute inset-0 -z-10" data-testid="over">
+          <MediaFrame alt={alt} ratio="21/9" className="size-full rounded-none opacity-40" />
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/page-aside.tsx b/packages/react/ui/src/components/page-aside.tsx
new file mode 100644
index 0000000..1b1654d
--- /dev/null
+++ b/packages/react/ui/src/components/page-aside.tsx
@@ -0,0 +1,77 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/page-trail-parts.ts
+/**
+ * The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key
+ * facts as cards in two columns.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { PageExtras } from "../blocks/page-trail.types";
+
+export type PageAsideProps = {
+  extras: PageExtras;
+  mode?: "none" | "figure" | "note" | "facts";
+};
+
+export function PageAside({ extras, mode = "figure" }: PageAsideProps) {
+  return (
+    <>
+      {((mode as string) === "figure") ? (
+        <Stack gap="0" align="end" className="text-end" data-testid="page-figure">
+          <Text size="4xl" weight="bold">
+            {extras.value}
+          </Text>
+          <Text size="xs" className="text-muted-foreground">
+            {extras.caption}
+          </Text>
+        </Stack>
+      ) : null}
+      {((mode as string) === "note") ? (
+        <Group
+          gap="4"
+          align="start"
+          className="rounded bg-card inset-ring inset-ring-border max-w-xs p-4"
+          data-testid="page-note"
+        >
+          <LucideIcon name={extras.icon} size={20} />
+          <Stack gap="0">
+            <Text size="lg" weight="bold">
+              {extras.value}
+            </Text>
+            <Text size="sm" weight="medium">
+              {extras.caption}
+            </Text>
+            <Text size="xs" className="text-muted-foreground">
+              {extras.note}
+            </Text>
+          </Stack>
+        </Group>
+      ) : null}
+      {((mode as string) === "facts") ? (
+        <Box className="grid grid-cols-2 gap-4">
+          {(extras.facts ?? []).map((s, i) => (
+            <Fragment key={s.id}>
+              {(i < 4) ? (
+                <Stack gap="0" className="rounded bg-card inset-ring inset-ring-border p-4" data-testid="page-fact">
+                  <Text size="lg" weight="bold">
+                    {s.value}
+                  </Text>
+                  <Text size="xs" weight="medium">
+                    {s.label}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {s.hint}
+                  </Text>
+                </Stack>
+              ) : null}
+            </Fragment>
+          ))}
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/page-crumbs.tsx b/packages/react/ui/src/components/page-crumbs.tsx
new file mode 100644
index 0000000..730b3e6
--- /dev/null
+++ b/packages/react/ui/src/components/page-crumbs.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/page-trail-parts.ts
+/**
+ * The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the
+ * last entry is the current page and is not a link.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Inline } from "../primitives/inline/inline";
+import { Link } from "../primitives/link/link";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type PageCrumbsProps = {
+  label: string;
+  crumbs: NavLink[];
+  landmarkLabel?: string;
+};
+
+export function PageCrumbs({ label, crumbs, landmarkLabel }: PageCrumbsProps) {
+  const last = (crumbs?.length ?? 0) - 1;
+  return (
+    <Block tag="nav" aria-label={(landmarkLabel ?? label)} data-testid="crumbs">
+      <List className="m-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground">
+        {(crumbs ?? []).map((c, i) => (
+          <ListItem key={c.id} className="flex items-center gap-2">
+            {(i < last) ? (
+              <>
+                {c.href ? (
+                  <Link href={c.href} variant="muted" size="sm" data-testid="crumb">
+                    {c.name}
+                  </Link>
+                ) : (
+                  <Inline data-testid="crumb">
+                    {c.name}
+                  </Inline>
+                )}
+                <LucideIcon name="chevron-right" size={16} />
+              </>
+            ) : (
+              <Inline className="font-medium text-foreground" aria-current="page">
+                {c.name}
+              </Inline>
+            )}
+          </ListItem>
+        ))}
+      </List>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/page-header.tsx b/packages/react/ui/src/components/page-header.tsx
new file mode 100644
index 0000000..b2329a9
--- /dev/null
+++ b/packages/react/ui/src/components/page-header.tsx
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** The page heading: a title, a one-line summary and the action buttons on the right (below on phones). */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+
+export type PageHeaderProps = {
+  title: string;
+  summary?: string;
+  id?: string;
+  actions?: ReactNode;
+};
+
+export function PageHeader({ title, summary, id, actions }: PageHeaderProps) {
+  return (
+    <Box className="flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between">
+      <Box className="flex min-w-0 flex-col gap-2">
+        <Title as={1} size="xl" weight="bold" className="m-0" id={id}>
+          {title}
+        </Title>
+        {summary ? (
+          <Text className="m-0 text-xs font-medium text-muted-foreground">
+            {summary}
+          </Text>
+        ) : null}
+      </Box>
+      {actions ? (
+        <Box className="flex flex-wrap items-center gap-2">
+          {actions}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/pager.tsx b/packages/react/ui/src/components/pager.tsx
new file mode 100644
index 0000000..637be3f
--- /dev/null
+++ b/packages/react/ui/src/components/pager.tsx
@@ -0,0 +1,118 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4
+ * 5 6 … 21), with `moreLabel` a "Load more" button. The current page is a plain element marked
+ * aria-current="page"; the others are buttons. All text comes in through props.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { pageWindow, tpl } from "../utils";
+
+export type PagerProps = {
+  page: number;
+  pages: number;
+  summary: string;
+  previousLabel: string;
+  nextLabel: string;
+  numbered?: boolean;
+  pageLabel?: string;
+  moreLabel?: string;
+  onPage?: (page: number) => void;
+  onMore?: () => void;
+};
+
+export function Pager({
+  page,
+  pages,
+  summary,
+  previousLabel,
+  nextLabel,
+  numbered = false,
+  pageLabel,
+  moreLabel,
+  onPage,
+  onMore,
+}: PagerProps) {
+  const numbers = pageWindow(page, pages);
+  return (
+    <Box
+      className={"flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground"}
+      data-testid="pager"
+    >
+      <Inline className="flex flex-wrap items-center gap-4">
+        <Inline>
+          {summary}
+        </Inline>
+      </Inline>
+      <Inline className="flex flex-wrap items-center gap-2">
+        {(moreLabel && (page < pages)) ? (
+          <Button variant="outline" size="sm" type="button" data-testid="pager-more" onClick={() => onMore?.()}>
+            {moreLabel}
+          </Button>
+        ) : null}
+        <Button
+          variant="outline"
+          size="sm"
+          layout="icon"
+          aria-label={previousLabel}
+          disabled={(page <= 1)}
+          onClick={() => onPage?.((page - 1))}
+        >
+          <LucideIcon name="chevron-left" size={16} />
+        </Button>
+        {numbered ? (
+          <>
+            {(numbers ?? []).map((n, i) => (
+              <Fragment key={(n || tpl("gap{0}", i))}>
+                {(n === null) ? (
+                  <Inline className="w-8 text-center">
+                    {"…"}
+                  </Inline>
+                ) : (n === page) ? (
+                  <Inline
+                    className={"flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background"}
+                    aria-current="page"
+                    data-testid="pager-current"
+                  >
+                    {n}
+                  </Inline>
+                ) : (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    layout="icon"
+                    type="button"
+                    aria-label={tpl(pageLabel, n)}
+                    onClick={() => onPage?.(n)}
+                  >
+                    {n}
+                  </Button>
+                )}
+              </Fragment>
+            ))}
+          </>
+        ) : (
+          <Inline className="min-w-12 text-center font-bold text-foreground">
+            {page}
+            {" / "}
+            {pages}
+          </Inline>
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          layout="icon"
+          aria-label={nextLabel}
+          disabled={(page >= pages)}
+          onClick={() => onPage?.((page + 1))}
+        >
+          <LucideIcon name="chevron-right" size={16} />
+        </Button>
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/panel.tsx b/packages/react/ui/src/components/panel.tsx
new file mode 100644
index 0000000..731662d
--- /dev/null
+++ b/packages/react/ui/src/components/panel.tsx
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description
+ * and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the
+ * Block of its block (rule 01).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { cn, tpl } from "../utils";
+
+export type PanelProps = {
+  title?: string;
+  description?: string;
+  id?: string;
+  className?: string;
+  children?: ReactNode;
+  actions?: ReactNode;
+};
+
+export function Panel({ title, description, id, className, children, actions }: PanelProps) {
+  return (
+    <Box
+      className={cn(
+        "flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border",
+        className
+      )}
+      role="group"
+      aria-labelledby={((title && id) ? tpl("{0}-t", id) : undefined)}
+    >
+      {(title || actions) ? (
+        <Box className="flex items-start justify-between gap-4">
+          <Box className="flex min-w-0 flex-col gap-2">
+            {title ? (
+              <Title as={2} size="base" className="m-0 text-foreground" id={(id ? tpl("{0}-t", id) : undefined)}>
+                {title}
+              </Title>
+            ) : null}
+            {description ? (
+              <Text className="m-0 text-xs font-medium text-muted-foreground">
+                {description}
+              </Text>
+            ) : null}
+          </Box>
+          {actions}
+        </Box>
+      ) : null}
+      {children}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/payment-options.tsx b/packages/react/ui/src/components/payment-options.tsx
new file mode 100644
index 0000000..ca97ca5
--- /dev/null
+++ b/packages/react/ui/src/components/payment-options.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/** Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup. */
+import { type ReactNode } from "react";
+import { Grid } from "../primitives/grid/grid";
+import { Inline } from "../primitives/inline/inline";
+import { Label } from "../primitives/label/label";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Radio } from "../primitives/radio/radio";
+import type { Payment } from "./payment-options.types";
+
+export type PaymentOptionsProps = {
+  payments: Payment[];
+  name: string;
+  checked?: string;
+};
+
+export function PaymentOptions({ payments, name, checked = "" }: PaymentOptionsProps) {
+  return (
+    <Grid cols="1-2" className="gap-4" data-testid="payments">
+      {(payments ?? []).map((p) => (
+        <Label key={p.id}
+          className={"flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground"}
+          data-testid="payment"
+        >
+          <Radio name={name} value={p.id} checked={(p.id === checked)} />
+          <LucideIcon name={p.icon} size={20} className="shrink-0" />
+          <Inline className="flex flex-col items-start justify-start gap-0">
+            <Inline className="text-sm font-semibold">
+              {p.title}
+            </Inline>
+            <Inline className="text-xs text-muted-foreground">
+              {p.text}
+            </Inline>
+          </Inline>
+        </Label>
+      ))}
+    </Grid>
+  );
+}
diff --git a/packages/react/ui/src/components/payment-options.types.ts b/packages/react/ui/src/components/payment-options.types.ts
new file mode 100644
index 0000000..a38ead1
--- /dev/null
+++ b/packages/react/ui/src/components/payment-options.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Payment = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/react/ui/src/components/pill.tsx b/packages/react/ui/src/components/pill.tsx
new file mode 100644
index 0000000..46062a6
--- /dev/null
+++ b/packages/react/ui/src/components/pill.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** A status pill: a tinted label with an icon (published, draft, role, comment state). */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { at, cn } from "../utils";
+
+const PILL: Record<string, string> = {
+  "gray": "bg-muted text-muted-foreground inset-ring-border",
+  "blue": "bg-blue-50 text-blue-700 inset-ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:inset-ring-blue-900",
+  "amber": "bg-amber-50 text-amber-700 inset-ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:inset-ring-amber-900",
+  "green": "bg-green-50 text-green-700 inset-ring-green-200 dark:bg-green-950 dark:text-green-300 dark:inset-ring-green-900",
+  "red": "bg-red-50 text-red-700 inset-ring-red-200 dark:bg-red-950 dark:text-red-300 dark:inset-ring-red-900",
+  "violet": "bg-violet-50 text-violet-700 inset-ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:inset-ring-violet-900",
+  "pink": "bg-pink-50 text-pink-700 inset-ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:inset-ring-pink-900",
+  "orange": "bg-orange-50 text-orange-700 inset-ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:inset-ring-orange-900",
+  "cyan": "bg-cyan-50 text-cyan-700 inset-ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:inset-ring-cyan-900",
+};
+
+export type PillProps = {
+  tone?: "gray" | "blue" | "amber" | "green" | "red" | "violet" | "pink" | "orange" | "cyan";
+  icon?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function Pill({ tone = "gray", icon, className, children }: PillProps) {
+  return (
+    <Box className="contents">
+      <Inline
+        className={cn(
+          "inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring",
+          at(PILL, tone),
+          className
+        )}
+        data-slot="pill"
+      >
+        {icon ? (
+          <LucideIcon name={icon} size={12} />
+        ) : null}
+        {children}
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/post-actions.tsx b/packages/react/ui/src/components/post-actions.tsx
new file mode 100644
index 0000000..45609b0
--- /dev/null
+++ b/packages/react/ui/src/components/post-actions.tsx
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/**
+ * The calls to action of a post header: share and save side by side, one wide read button, or a wide read button
+ * with share and save as icons.
+ */
+import { type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostActionsProps = {
+  labels: PostSplitLabels;
+  mode?: "pair" | "wide" | "icons";
+};
+
+export function PostActions({ labels, mode = "pair" }: PostActionsProps) {
+  return (
+    <>
+      {((mode as string) === "pair") ? (
+        <Group gap="2" className="flex-wrap">
+          <Button variant="default" size="default" className="gap-2" data-testid="action-primary">
+            <LucideIcon name="share-2" size={16} />
+            {labels.share}
+          </Button>
+          <Button variant="outline" size="default" className="gap-2" data-testid="post-save">
+            <LucideIcon name="bookmark" size={16} />
+            {labels.save}
+          </Button>
+        </Group>
+      ) : (
+        <Group gap="2">
+          <Button variant="default" size="default" className="gap-2 flex-1" data-testid="action-primary">
+            <LucideIcon name="book-open" size={16} />
+            {labels.read}
+          </Button>
+          {((mode as string) === "icons") ? (
+            <>
+              <Button variant="outline" size="default" layout="icon" aria-label={labels.share} data-testid="post-share">
+                <LucideIcon name="share-2" size={16} />
+              </Button>
+              <Button variant="outline" size="default" layout="icon" aria-label={labels.save} data-testid="post-save">
+                <LucideIcon name="bookmark" size={16} />
+              </Button>
+            </>
+          ) : null}
+        </Group>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/post-author.tsx b/packages/react/ui/src/components/post-author.tsx
new file mode 100644
index 0000000..9d4abdc
--- /dev/null
+++ b/packages/react/ui/src/components/post-author.tsx
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/**
+ * The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line,
+ * a card, or a card with the bio.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostAuthorProps = {
+  post: Post;
+  extras: PostExtras;
+  labels: PostSplitLabels;
+  mode?: "line" | "card" | "bio";
+  share?: boolean;
+  className?: string;
+};
+
+export function PostAuthor({
+  post,
+  extras,
+  labels,
+  mode = "line",
+  share = false,
+  className,
+}: PostAuthorProps) {
+  return (
+    <Stack
+      gap="4"
+      align="stretch"
+      className={cn(
+        (((mode as string) === "line") ? "" : "rounded bg-card inset-ring inset-ring-border p-4"),
+        className
+      )}
+      data-testid="post-author"
+    >
+      <Group gap="4" align="center">
+        <MediaFrame alt={post.author} ratio="1/1" className="size-10 shrink-0 rounded-full" />
+        <Stack gap="0" align="start" className="min-w-0 flex-1 text-start">
+          <Text size="sm" weight="semibold">
+            {post.author}
+          </Text>
+          <Text size="xs" className="text-muted-foreground">
+            {extras.role}
+          </Text>
+        </Stack>
+        {share ? (
+          <Group gap="2">
+            <Button variant="ghost" size="default" className="gap-2" data-testid="post-share">
+              <LucideIcon name="share-2" size={16} />
+              {labels.share}
+            </Button>
+            <Button variant="ghost" size="default" className="gap-2" data-testid="post-save">
+              <LucideIcon name="bookmark" size={16} />
+              {labels.save}
+            </Button>
+          </Group>
+        ) : (
+          <Box className="text-muted-foreground">
+            <Group gap="2" align="center">
+              <LucideIcon name="calendar" size={16} />
+              <Text size="sm">
+                {post.date}
+              </Text>
+            </Group>
+          </Box>
+        )}
+      </Group>
+      {((mode as string) === "bio") ? (
+        <Text size="sm" className="text-muted-foreground">
+          {extras.bio}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/post-feature.tsx b/packages/react/ui/src/components/post-feature.tsx
new file mode 100644
index 0000000..db5f5e8
--- /dev/null
+++ b/packages/react/ui/src/components/post-feature.tsx
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-showcase-parts.ts
+/**
+ * The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading
+ * time, and a wide read button.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { tpl } from "../utils";
+import type { Post, PostLabels } from "../blocks/post-card.types";
+
+export type PostFeatureProps = {
+  p: Post;
+  labels: PostLabels;
+};
+
+export function PostFeature({ p, labels }: PostFeatureProps) {
+  return (
+    <Stack gap="4" align="stretch" className="border-t border-border pt-6" data-testid="post-feature">
+      <Badge variant="secondary" size="sm" className="w-fit">
+        {p.category}
+      </Badge>
+      <Title as={3} size="xl" weight="semibold">
+        {p.title}
+      </Title>
+      <Text size="sm" className="text-muted-foreground">
+        {p.excerpt}
+      </Text>
+      <Group gap="4" align="center">
+        <MediaFrame alt={p.author} ratio="1/1" className="size-10 shrink-0 rounded-full" />
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {p.author}
+          </Text>
+          <Text size="xs" className="text-muted-foreground">
+            {tpl("{0} · {1}", p.date, tpl(labels.minutes, p.minutes))}
+          </Text>
+        </Stack>
+      </Group>
+      <Button variant="default" size="default" href={p.href} className="w-full gap-2" data-testid="action-primary">
+        {labels.read}
+        <LucideIcon name="arrow-right" size={16} />
+      </Button>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/post-mini-card.tsx b/packages/react/ui/src/components/post-mini-card.tsx
new file mode 100644
index 0000000..b2d2649
--- /dev/null
+++ b/packages/react/ui/src/components/post-mini-card.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-showcase-parts.ts
+/** A small post card of PostShowcase: the picture, the category, the title and the author with the reading time. */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { tpl } from "../utils";
+import type { Post, PostLabels } from "../blocks/post-card.types";
+
+export type PostMiniCardProps = {
+  p: Post;
+  labels: PostLabels;
+};
+
+export function PostMiniCard({ p, labels }: PostMiniCardProps) {
+  return (
+    <Stack
+      gap="2"
+      align="stretch"
+      className="rounded bg-card inset-ring inset-ring-border p-2"
+      data-testid="post-mini"
+    >
+      <MediaFrame alt={p.title} />
+      <Stack gap="2" align="start" className="p-2">
+        <Badge variant="secondary" size="sm">
+          {p.category}
+        </Badge>
+        <Title as={3} size="sm" weight="semibold">
+          {p.title}
+        </Title>
+        <Text size="xs" className="text-muted-foreground">
+          {tpl("{0} · {1}", p.author, tpl(labels.minutes, p.minutes))}
+        </Text>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/post-outline.tsx b/packages/react/ui/src/components/post-outline.tsx
new file mode 100644
index 0000000..ad49971
--- /dev/null
+++ b/packages/react/ui/src/components/post-outline.tsx
@@ -0,0 +1,62 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/** The facts of a post in a column (author, date, minutes, views), then the related reading as links. */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { tpl } from "../utils";
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostOutlineProps = {
+  post: Post;
+  extras: PostExtras;
+  labels: PostSplitLabels;
+};
+
+export function PostOutline({ post, extras, labels }: PostOutlineProps) {
+  return (
+    <Stack gap="6" align="stretch" data-testid="post-outline">
+      <Stack gap="2" align="start" className="text-muted-foreground">
+        <Group gap="2" align="center">
+          <LucideIcon name="user" size={16} />
+          <Text size="sm">
+            {post.author}
+          </Text>
+        </Group>
+        <Group gap="2" align="center">
+          <LucideIcon name="calendar" size={16} />
+          <Text size="sm">
+            {post.date}
+          </Text>
+        </Group>
+        <Group gap="2" align="center">
+          <LucideIcon name="clock" size={16} />
+          <Text size="sm">
+            {tpl(labels.minutes, post.minutes)}
+          </Text>
+        </Group>
+        <Group gap="2" align="center">
+          <LucideIcon name="eye" size={16} />
+          <Text size="sm">
+            {tpl(labels.views, extras.views)}
+          </Text>
+        </Group>
+      </Stack>
+      <Stack gap="2" align="stretch" className="border-t border-border pt-4">
+        <Text size="xs" weight="medium" className="uppercase tracking-wide text-muted-foreground">
+          {labels.related}
+        </Text>
+        {(extras.outline ?? []).map((l) => (
+          <MenuEntry key={l.id} href={l.href} className="text-sm font-medium" size="sm" testid="post-link">
+            <LucideIcon name="chevron-right" size={16} />
+            {l.name}
+          </MenuEntry>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/post-overlay-card.tsx b/packages/react/ui/src/components/post-overlay-card.tsx
new file mode 100644
index 0000000..084301e
--- /dev/null
+++ b/packages/react/ui/src/components/post-overlay-card.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-showcase-parts.ts
+/**
+ * A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and
+ * date, the title, the excerpt and a read link.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { cn } from "../utils";
+import type { Post, PostLabels } from "../blocks/post-card.types";
+
+export type PostOverlayCardProps = {
+  p: Post;
+  labels: PostLabels;
+  ratio?: "4/3" | "16/9";
+};
+
+export function PostOverlayCard({ p, labels, ratio = "4/3" }: PostOverlayCardProps) {
+  return (
+    <Box className="relative overflow-hidden rounded" data-testid="post-overlay">
+      <MediaFrame alt={p.title} ratio={ratio} className={(((ratio as string) === "4/3") ? "min-h-80" : "min-h-64")} />
+      <Stack gap="2" align="start" className="absolute bottom-4 left-4 right-4 rounded bg-background p-4">
+        <Group gap="2" align="center">
+          <Badge variant="secondary" size="sm">
+            {p.category}
+          </Badge>
+          <Text size="xs" className="text-muted-foreground">
+            {p.date}
+          </Text>
+        </Group>
+        <Title as={3} size="base" weight="semibold">
+          {p.title}
+        </Title>
+        <Text size="sm" className={cn("text-muted-foreground", "line-clamp-2")}>
+          {p.excerpt}
+        </Text>
+        <MenuEntry href={p.href} className="gap-2 text-sm font-medium" size="sm" testid="read">
+          {labels.read}
+          <LucideIcon name="arrow-right" size={16} />
+        </MenuEntry>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/post-stats.tsx b/packages/react/ui/src/components/post-stats.tsx
new file mode 100644
index 0000000..7007811
--- /dev/null
+++ b/packages/react/ui/src/components/post-stats.tsx
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/** The reading figures of a post: minutes to read, views and likes, each with its glyph. */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { tpl } from "../utils";
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostStatsProps = {
+  post: Post;
+  extras: PostExtras;
+  labels: PostSplitLabels;
+  align?: "start" | "center";
+};
+
+export function PostStats({ post, extras, labels, align = "start" }: PostStatsProps) {
+  return (
+    <Group
+      gap="4"
+      align="center"
+      justify={align}
+      className="flex-wrap text-muted-foreground"
+      data-testid="post-stats"
+    >
+      <Group gap="2" align="center">
+        <LucideIcon name="clock" size={16} />
+        <Text size="sm">
+          {tpl(labels.minutes, post.minutes)}
+        </Text>
+      </Group>
+      <Group gap="2" align="center">
+        <LucideIcon name="eye" size={16} />
+        <Text size="sm">
+          {tpl(labels.views, extras.views)}
+        </Text>
+      </Group>
+      <Group gap="2" align="center">
+        <LucideIcon name="heart" size={16} />
+        <Text size="sm">
+          {tpl(labels.likes, extras.likes)}
+        </Text>
+      </Group>
+    </Group>
+  );
+}
diff --git a/packages/react/ui/src/components/post-tags.tsx b/packages/react/ui/src/components/post-tags.tsx
new file mode 100644
index 0000000..a1e3ac3
--- /dev/null
+++ b/packages/react/ui/src/components/post-tags.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/** The tags of a post as small badges in a wrapping row. */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type PostTagsProps = {
+  tags: NavLink[];
+  align?: "start" | "center";
+};
+
+export function PostTags({ tags, align = "start" }: PostTagsProps) {
+  return (
+    <Group gap="2" justify={align} className="flex-wrap">
+      {(tags ?? []).map((tag) => (
+        <Badge key={tag.id} variant="secondary" size="sm" data-testid="post-tag">
+          {tag.name}
+        </Badge>
+      ))}
+    </Group>
+  );
+}
diff --git a/packages/react/ui/src/components/product-gallery.tsx b/packages/react/ui/src/components/product-gallery.tsx
new file mode 100644
index 0000000..f582f58
--- /dev/null
+++ b/packages/react/ui/src/components/product-gallery.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/product-parts.ts
+/**
+ * The gallery of a product page: the picture (the file of the product's featured media, a placeholder without
+ * one) and optional thumbnails below.
+ */
+import { type ReactNode } from "react";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { MediaFrame } from "../components/media-frame";
+
+export type ProductGalleryProps = {
+  name: string;
+  image?: string;
+  thumbs?: "none" | "below";
+};
+
+export function ProductGallery({ name, image, thumbs = "below" }: ProductGalleryProps) {
+  return (
+    <Stack gap="4" align="stretch" data-testid="gallery">
+      <MediaFrame alt={name} src={image} ratio="1/1" />
+      {((thumbs as string) === "below") ? (
+        <Grid cols="3" className="gap-4" data-testid="thumbs">
+          <MediaFrame alt={name} src={image} ratio="1/1" className="ring-2 ring-foreground" />
+          <MediaFrame alt={name} ratio="1/1" />
+          <MediaFrame alt={name} ratio="1/1" />
+        </Grid>
+      ) : null}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/product-price.tsx b/packages/react/ui/src/components/product-price.tsx
new file mode 100644
index 0000000..b45feb3
--- /dev/null
+++ b/packages/react/ui/src/components/product-price.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/product-parts.ts
+/**
+ * The price line of a product page: the price (integer minor units in the currency), the old price (compare_at)
+ * struck through when higher, and the badge.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Text } from "../primitives/text/text";
+import { fmtMoney } from "../utils";
+
+export type ProductPriceProps = {
+  price: number;
+  compareAt?: number;
+  currency: string;
+  badge?: string;
+  was: string;
+};
+
+export function ProductPrice({ price, compareAt, currency, badge = "", was }: ProductPriceProps) {
+  return (
+    <Group gap="4" align="center" className="flex-wrap">
+      <Text size="4xl" weight="bold">
+        {fmtMoney(price, currency)}
+      </Text>
+      {(compareAt && (compareAt > price)) ? (
+        <Text tag="del" size="lg" className="relative text-muted-foreground" data-testid="compare-at">
+          <Inline className="sr-only">
+            {was}
+          </Inline>
+          {fmtMoney(compareAt, currency)}
+        </Text>
+      ) : null}
+      {badge ? (
+        <Badge variant="default" size="default">
+          {badge}
+        </Badge>
+      ) : null}
+    </Group>
+  );
+}
diff --git a/packages/react/ui/src/components/project-tiles.tsx b/packages/react/ui/src/components/project-tiles.tsx
new file mode 100644
index 0000000..4f19a6b
--- /dev/null
+++ b/packages/react/ui/src/components/project-tiles.tsx
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/work-parts.ts
+/**
+ * The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags,
+ * two links), compact cards in four columns, captions over the pictures, or a bento where the first project
+ * takes a big tile.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { ArticleBlock } from "../components/article-block";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { cn, tpl } from "../utils";
+import type { Project, ProjectLabels } from "../blocks/project-grid.types";
+
+export type ProjectTilesProps = {
+  projects: Project[];
+  labels: ProjectLabels;
+  layout?: "cards" | "compact" | "overlay" | "bento" | "list";
+};
+
+export function ProjectTiles({ projects, labels, layout = "cards" }: ProjectTilesProps) {
+  const over = ((layout as string) === "overlay") ? true : ((layout as string) === "bento");
+  return (
+    <Box
+      className={
+        (layout as string) === "compact" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+        : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+      }
+      data-testid="items"
+    >
+      {(projects ?? []).map((p, i) => (
+        <ArticleBlock key={p.id}
+          className={cn(
+            "flex flex-col gap-4",
+            (over ? "relative" : "rounded bg-card inset-ring inset-ring-border p-4"),
+            ((((layout as string) === "bento") && (i === 0)) ? "sm:col-span-2 lg:row-span-2" : "")
+          )}
+          testid="item"
+        >
+          <Box className={(over ? "h-full" : "relative")}>
+            <MediaFrame
+              alt={p.title}
+              ratio={(((layout as string) === "compact") ? "1/1" : (over ? "3/4" : "4/3"))}
+              className={(over ? "h-full" : "")}
+            />
+            {(p.featured && ((layout as string) !== "compact")) ? (
+              <Badge variant="default" size="default" className="absolute left-4 top-4" data-testid="featured">
+                {labels.featured}
+              </Badge>
+            ) : null}
+          </Box>
+          <Stack
+            gap="2"
+            align="stretch"
+            className={(over ? "absolute right-4 bottom-4 left-4 rounded bg-background p-4" : "")}
+          >
+            <Text size="xs" className="text-muted-foreground">
+              {tpl("{0}, {1}", p.category, p.year)}
+            </Text>
+            <Title as={3} size={(((layout as string) === "compact") ? "sm" : "lg")} weight="semibold">
+              {p.title}
+            </Title>
+            {((layout as string) !== "compact") ? (
+              <Text size="sm" className="text-muted-foreground">
+                {p.summary}
+              </Text>
+            ) : null}
+            {((layout as string) === "cards") ? (
+              <>
+                <Group gap="2" className="flex-wrap">
+                  {(p.tags ?? []).map((k) => (
+                    <Badge key={k} variant="secondary" size="sm">
+                      {k}
+                    </Badge>
+                  ))}
+                </Group>
+                <Group gap="4" className="pt-2">
+                  <MenuEntry href={p.href} className="inline-flex items-center gap-2 text-sm font-medium">
+                    {labels.case}
+                    <LucideIcon name="arrow-right" size={16} />
+                  </MenuEntry>
+                  <MenuEntry href={p.href} className="inline-flex items-center gap-2 text-sm font-medium">
+                    {labels.view}
+                    <LucideIcon name="external-link" size={16} />
+                  </MenuEntry>
+                </Group>
+              </>
+            ) : null}
+          </Stack>
+        </ArticleBlock>
+      ))}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/prompt-composer.tsx b/packages/react/ui/src/components/prompt-composer.tsx
new file mode 100644
index 0000000..e6003d4
--- /dev/null
+++ b/packages/react/ui/src/components/prompt-composer.tsx
@@ -0,0 +1,107 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/**
+ * A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send
+ * button. Static links only; a host adds behavior.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+export type PromptComposerProps = {
+  label?: string;
+  attachLabel?: string;
+  modelLabel?: string;
+  send?: string;
+  href?: string;
+};
+
+export function PromptComposer({ label, attachLabel, modelLabel, send, href }: PromptComposerProps) {
+  return (
+    <Box
+      className={cn(
+        "mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30",
+        defaults.hero.composer
+      )}
+      data-testid="email-form"
+    >
+      {attachLabel ? (
+        <Group gap="2" align="center" data-testid="composer-attachments">
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              "gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20",
+              defaults.hero.attach
+            )}
+            data-testid="composer-attach"
+          >
+            <LucideIcon name="file-text" size={16} />
+            {attachLabel}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              "gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20",
+              defaults.hero.attach
+            )}
+            data-testid="composer-attach"
+          >
+            <LucideIcon name="paperclip" size={16} />
+            {attachLabel}
+          </Button>
+        </Group>
+      ) : null}
+      <Text
+        size="xs"
+        weight="semibold"
+        className={cn("flex w-full items-center leading-5 text-background/80", defaults.hero.promptLine)}
+        data-testid="field"
+      >
+        {label}
+      </Text>
+      <Group gap="2" align="center" justify="between" className="h-8 w-full" data-testid="composer-tools">
+        <Group gap="2" align="center">
+          <Button
+            variant="ghost"
+            size="sm"
+            layout="icon"
+            className="bg-background/10 text-background hover:bg-background/20"
+            data-testid="composer-plus"
+            aria-label={(attachLabel ?? "Attach")}
+          >
+            <LucideIcon name="plus" size={16} />
+          </Button>
+          {modelLabel ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn("gap-2 bg-background/10 text-background hover:bg-background/20", defaults.hero.model)}
+              data-testid="composer-model"
+            >
+              <LucideIcon name="sparkles" size={16} />
+              {modelLabel}
+              <LucideIcon name="chevron-down" size={16} />
+            </Button>
+          ) : null}
+        </Group>
+        <Button
+          href={href}
+          variant="secondary"
+          size="sm"
+          layout="icon"
+          data-testid="submit"
+          aria-label={(send ?? "Send")}
+        >
+          <LucideIcon name="arrow-up" size={16} />
+        </Button>
+      </Group>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/quote-card.tsx b/packages/react/ui/src/components/quote-card.tsx
new file mode 100644
index 0000000..fcab2fa
--- /dev/null
+++ b/packages/react/ui/src/components/quote-card.tsx
@@ -0,0 +1,90 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/marketing.ts
+/**
+ * One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the
+ * stars and a company glyph as `item` says.
+ */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import { Rating } from "../components/rating";
+import { cn, tpl } from "../utils";
+import type { Quote, QuoteLabels, QuoteItem } from "../blocks/testimonial-grid.types";
+
+export type QuoteCardProps = {
+  q: Quote;
+  labels: QuoteLabels;
+  item?: QuoteItem;
+  layout?: "grid" | "single" | "stack" | "masonry" | "strip";
+};
+
+export function QuoteCard({ q, labels, item, layout = "grid" }: QuoteCardProps) {
+  return (
+    <FigureBlock
+      className={cn(
+        "m-0 flex flex-col gap-4",
+        ((item?.kind === "plain") ? "" : "rounded p-6 inset-ring inset-ring-border bg-card"),
+        (
+          (layout as string) === "masonry" ? "mb-4 break-inside-avoid"
+          : (layout as string) === "strip" ? "w-80 shrink-0 snap-start"
+          : "h-full"
+        )
+      )}
+      testid="item"
+    >
+      {(item?.kind === "social") ? (
+        <>
+          <Group gap="4" align="center">
+            {(item?.avatar !== "none") ? (
+              <MediaFrame alt={q.author} ratio="1/1" className="size-12 shrink-0 rounded-full" />
+            ) : null}
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {q.author}
+              </Text>
+              <Text size="xs" className="text-muted-foreground">
+                {tpl(labels.handleLine, q.handle, q.time)}
+              </Text>
+            </Stack>
+            <LucideIcon name="message-circle" size={16} className="ml-auto text-muted-foreground" />
+          </Group>
+          <Text size="base">
+            {q.quote}
+          </Text>
+        </>
+      ) : (
+        <>
+          {(item?.rating !== "hide") ? (
+            <Rating value={q.rating} label={tpl(labels.rating, q.rating)} />
+          ) : null}
+          {(item?.mark === "icon") ? (
+            <Inline className="text-muted-foreground" data-testid="mark">
+              <LucideIcon name={q.mark} size={24} />
+            </Inline>
+          ) : null}
+          <Text size={(((layout as string) === "single") ? "xl" : "base")}>
+            {q.quote}
+          </Text>
+          <Group gap="4" align="center">
+            {(item?.avatar !== "none") ? (
+              <MediaFrame alt={q.author} ratio="1/1" className="size-12 shrink-0 rounded-full" />
+            ) : null}
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {q.author}
+              </Text>
+              <Text size="sm" className="text-muted-foreground">
+                {tpl(labels.byLine, q.role, q.company)}
+              </Text>
+            </Stack>
+          </Group>
+        </>
+      )}
+    </FigureBlock>
+  );
+}
diff --git a/packages/react/ui/src/components/quote-figures.tsx b/packages/react/ui/src/components/quote-figures.tsx
new file mode 100644
index 0000000..49d27c5
--- /dev/null
+++ b/packages/react/ui/src/components/quote-figures.tsx
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/quote-split-parts.ts
+/** Three figures in a row above the quotes of QuoteSplit. */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { QuoteExtras } from "../blocks/quote-split.types";
+import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteFiguresProps = {
+  extras: QuoteExtras;
+};
+
+export function QuoteFigures({ extras }: QuoteFiguresProps) {
+  return (
+    <Box className="grid grid-cols-3 gap-4 border-b border-border pb-8" data-testid="quote-figures">
+      {(extras.stats ?? []).map((s, i) => (
+        <Fragment key={s.id}>
+          {(i < 3) ? (
+            <Stack gap="0" data-testid="quote-stat">
+              <Text size="3xl" weight="bold">
+                {s.value}
+              </Text>
+              <Text size="xs" className="text-muted-foreground">
+                {s.label}
+              </Text>
+            </Stack>
+          ) : null}
+        </Fragment>
+      ))}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/quote-logo-tiles.tsx b/packages/react/ui/src/components/quote-logo-tiles.tsx
new file mode 100644
index 0000000..6611941
--- /dev/null
+++ b/packages/react/ui/src/components/quote-logo-tiles.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/quote-split-parts.ts
+/** Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit. */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import type { QuoteExtras } from "../blocks/quote-split.types";
+import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteLogoTilesProps = {
+  extras: QuoteExtras;
+};
+
+export function QuoteLogoTiles({ extras }: QuoteLogoTilesProps) {
+  return (
+    <Box className="grid grid-cols-2 gap-4" data-testid="quote-logos">
+      {(extras.logos ?? []).map((l, i) => (
+        <Fragment key={l.id}>
+          {(i < 4) ? (
+            <Group
+              gap="2"
+              align="center"
+              justify="center"
+              className="rounded bg-card inset-ring inset-ring-border p-4 text-muted-foreground"
+              data-testid="quote-logo"
+            >
+              <LucideIcon name={l.icon} size={20} />
+              <Text size="sm" weight="semibold">
+                {l.name}
+              </Text>
+            </Group>
+          ) : null}
+        </Fragment>
+      ))}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/quote-proof.tsx b/packages/react/ui/src/components/quote-proof.tsx
new file mode 100644
index 0000000..69cf14d
--- /dev/null
+++ b/packages/react/ui/src/components/quote-proof.tsx
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta.ts
+/** A customer quote and who said it, as a figure. */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type QuoteProofProps = {
+  quote?: string;
+  quoteBy?: string;
+  center?: boolean;
+};
+
+export function QuoteProof({ quote, quoteBy, center = false }: QuoteProofProps) {
+  return (
+    <Block
+      tag="figure"
+      className={cn("flex flex-col gap-2", (center ? "items-center text-center" : ""))}
+      data-testid="proof"
+    >
+      <Text size="xl">
+        {quote}
+      </Text>
+      <Text size="sm" className="text-muted-foreground">
+        {quoteBy}
+      </Text>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/quote-rating-panel.tsx b/packages/react/ui/src/components/quote-rating-panel.tsx
new file mode 100644
index 0000000..aaed8a3
--- /dev/null
+++ b/packages/react/ui/src/components/quote-rating-panel.tsx
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/quote-split-parts.ts
+/** The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures. */
+import { Fragment, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Rating } from "../components/rating";
+import { tpl } from "../utils";
+import type { QuoteExtras } from "../blocks/quote-split.types";
+import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteRatingPanelProps = {
+  extras: QuoteExtras;
+  labels: QuoteLabels;
+};
+
+export function QuoteRatingPanel({ extras, labels }: QuoteRatingPanelProps) {
+  return (
+    <Stack
+      gap="6"
+      align="center"
+      className="rounded bg-card inset-ring inset-ring-border p-8 text-center"
+      data-testid="quote-rating"
+    >
+      <Text size="5xl" weight="bold">
+        {extras.score}
+      </Text>
+      <Rating value={extras.rating} label={tpl(labels.rating, extras.rating)} size={20} />
+      <Text size="sm" className="text-muted-foreground">
+        {extras.reviews}
+      </Text>
+      <Box className="grid w-full grid-cols-2 gap-4 border-t border-border pt-6">
+        {(extras.stats ?? []).map((s, i) => (
+          <Fragment key={s.id}>
+            {(i < 2) ? (
+              <Stack gap="0" align="center" data-testid="quote-stat">
+                <Text size="2xl" weight="semibold">
+                  {s.value}
+                </Text>
+                <Text size="xs" className="text-muted-foreground">
+                  {s.label}
+                </Text>
+              </Stack>
+            ) : null}
+          </Fragment>
+        ))}
+      </Box>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/quote-slot.tsx b/packages/react/ui/src/components/quote-slot.tsx
new file mode 100644
index 0000000..8446016
--- /dev/null
+++ b/packages/react/ui/src/components/quote-slot.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/quote-split-parts.ts
+/**
+ * One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in
+ * a box that can span grid rows.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { QuoteCard } from "../components/quote-card";
+import type { Quote, QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteSlotProps = {
+  q: Quote;
+  labels: QuoteLabels;
+  kind?: "card" | "plain";
+  layout?: "grid" | "single" | "stack";
+  className?: string;
+};
+
+export function QuoteSlot({ q, labels, kind = "card", layout = "grid", className }: QuoteSlotProps) {
+  return (
+    <Box className={className} data-testid="quote">
+      <QuoteCard q={q} labels={labels} item={{ kind, avatar: "image", rating: "show", mark: "none" }} layout={layout} />
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/range-field.tsx b/packages/react/ui/src/components/range-field.tsx
new file mode 100644
index 0000000..8e8aed9
--- /dev/null
+++ b/packages/react/ui/src/components/range-field.tsx
@@ -0,0 +1,84 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two
+ * sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.
+ */
+import { type ChangeEvent, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { Input } from "../primitives/input/input";
+import { Range } from "../primitives/range/range";
+import { cn } from "../utils";
+
+export type RangeFieldProps = {
+  type: "number" | "date";
+  from: string;
+  to: string;
+  fromLabel: string;
+  toLabel: string;
+  min?: number;
+  max?: number;
+  className?: string;
+  onChange?: (from: string, to: string) => void;
+};
+
+export function RangeField({
+  type,
+  from,
+  to,
+  fromLabel,
+  toLabel,
+  min,
+  max,
+  className,
+  onChange,
+}: RangeFieldProps) {
+  return (
+    <Box className={cn("flex flex-col gap-2", className)} data-slot="range-field">
+      {(((type as string) === "number") && (min != null) && (max != null) && (min < max)) ? (
+        <>
+          <Range
+            min={min}
+            max={max}
+            aria-label={fromLabel}
+            value={(((from as string) === "") ? (min == null ? undefined : String(min)) : from)}
+            data-testid="range-from"
+            onChange={(event: ChangeEvent<HTMLInputElement>) => onChange?.(event.currentTarget.value, to)}
+          />
+          <Range
+            min={min}
+            max={max}
+            aria-label={toLabel}
+            value={(((to as string) === "") ? (max == null ? undefined : String(max)) : to)}
+            data-testid="range-to"
+            onChange={(event: ChangeEvent<HTMLInputElement>) => onChange?.(from, event.currentTarget.value)}
+          />
+        </>
+      ) : null}
+      <Inline className="flex items-center gap-2">
+        <Input
+          type={type}
+          size="sm"
+          aria-label={fromLabel}
+          value={from}
+          min={(min == null ? undefined : String(min))}
+          max={(max == null ? undefined : String(max))}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => onChange?.(event.currentTarget.value, to)}
+        />
+        <Inline className="text-muted-foreground">
+          {"–"}
+        </Inline>
+        <Input
+          type={type}
+          size="sm"
+          aria-label={toLabel}
+          value={to}
+          min={(min == null ? undefined : String(min))}
+          max={(max == null ? undefined : String(max))}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => onChange?.(from, event.currentTarget.value)}
+        />
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/rating.tsx b/packages/react/ui/src/components/rating.tsx
new file mode 100644
index 0000000..2855159
--- /dev/null
+++ b/packages/react/ui/src/components/rating.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * One to five stars (a review's grade, the average of a product). The value is read as the label; the stars
+ * themselves are decoration.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn } from "../utils";
+
+export type RatingProps = {
+  value: number;
+  label: string;
+  max?: number;
+  size?: number;
+  className?: string;
+};
+
+export function Rating({ value, label, max = 5, size = 16, className }: RatingProps) {
+  const full = Math.round(Math.min(max, Math.max(0, value)));
+  return (
+    <Box
+      className={cn("inline-flex items-center gap-0", className)}
+      role="img"
+      aria-label={label}
+      data-slot="rating"
+      data-value={full}
+    >
+      {(Array.from({ length: max }, (_, i) => i) ?? []).map((i) => (
+        <LucideIcon key={i}
+          name="star"
+          size={size}
+          className={((i < full) ? "fill-foreground text-foreground" : "text-border")}
+        />
+      ))}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/region.tsx b/packages/react/ui/src/components/region.tsx
new file mode 100644
index 0000000..399c1aa
--- /dev/null
+++ b/packages/react/ui/src/components/region.tsx
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never
+ * nested, so a nested landmark is its own component.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+
+export type RegionProps = {
+  tag: "header" | "nav" | "section" | "aside" | "footer" | "article" | "figure" | "main" | "search" | "div";
+  landmarkLabel?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function Region({ tag, landmarkLabel, className, children }: RegionProps) {
+  return (
+    <Block tag={tag} className={className} aria-label={landmarkLabel}>
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/search-field.tsx b/packages/react/ui/src/components/search-field.tsx
new file mode 100644
index 0000000..2cb4529
--- /dev/null
+++ b/packages/react/ui/src/components/search-field.tsx
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** A search input with a magnifier. `value` fires on every keystroke with the new text. */
+import { type ChangeEvent, type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Input } from "../primitives/input/input";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn } from "../utils";
+
+export type SearchFieldProps = {
+  value: string;
+  placeholder?: string;
+  label: string;
+  className?: string;
+  onValue?: (value: string) => void;
+};
+
+export function SearchField({ value, placeholder, label, className, onValue }: SearchFieldProps) {
+  return (
+    <Box className={cn("relative min-w-44 flex-1", className)} role="search">
+      <LucideIcon name="search" size={16} className="pointer-events-none absolute top-2 left-3 text-muted-foreground" />
+      <Input
+        size="sm"
+        type="search"
+        placeholder={placeholder}
+        aria-label={label}
+        className="pr-3 pl-10"
+        value={value}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => onValue?.(event.currentTarget.value)}
+      />
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/search-palette.tsx b/packages/react/ui/src/components/search-palette.tsx
new file mode 100644
index 0000000..7a32f31
--- /dev/null
+++ b/packages/react/ui/src/components/search-palette.tsx
@@ -0,0 +1,28 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/** A search field with a search glyph and the keys that open it. */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { Input } from "../primitives/input/input";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+
+export type SearchPaletteProps = {
+  label: string;
+  shortcut: string;
+};
+
+export function SearchPalette({ label, shortcut }: SearchPaletteProps) {
+  return (
+    <Box className="relative w-full max-w-sm" data-testid="palette">
+      <LucideIcon name="search" size={16} className="pointer-events-none absolute top-2 left-3 text-muted-foreground" />
+      <Input type="search" size="sm" placeholder={label} aria-label={label} className="pr-12 pl-10" />
+      <Inline
+        className={"pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring " +
+          "inset-ring-border"}
+      >
+        {shortcut}
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/section-box.tsx b/packages/react/ui/src/components/section-box.tsx
new file mode 100644
index 0000000..573d614
--- /dev/null
+++ b/packages/react/ui/src/components/section-box.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/** The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper). */
+import { type ReactNode } from "react";
+import { Card } from "../primitives/card/card";
+
+export type SectionBoxProps = {
+  boxed?: boolean;
+  children?: ReactNode;
+};
+
+export function SectionBox({ boxed = false, children }: SectionBoxProps) {
+  return (
+    <>
+      {boxed ? (
+        <Card variant="muted">
+          {children}
+        </Card>
+      ) : (
+        <>
+          {children}
+        </>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/section-column.tsx b/packages/react/ui/src/components/section-column.tsx
new file mode 100644
index 0000000..9523367
--- /dev/null
+++ b/packages/react/ui/src/components/section-column.tsx
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure
+ * (xs to 3xl) holds the column at that width, centred.
+ */
+import { type ReactNode } from "react";
+import { Stack } from "../primitives/stack/stack";
+import { variants } from "../utils";
+
+/** SectionColumn: the classes of each value (shadcn/cva style). */
+export const sectionColumnVariants = variants({
+  variants: {
+    measure: {
+      default: "",
+      landing: "",
+      fill: "",
+      xs: "mx-auto w-full max-w-xs",
+      sm: "mx-auto w-full max-w-sm",
+      md: "mx-auto w-full max-w-md",
+      lg: "mx-auto w-full max-w-lg",
+      xl: "mx-auto w-full max-w-xl",
+      "2xl": "mx-auto w-full max-w-2xl",
+      "3xl": "mx-auto w-full max-w-3xl",
+    },
+  },
+  defaultVariants: { measure: "default" },
+});
+
+export type SectionColumnProps = {
+  measure?: "default" | "landing" | "fill" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  children?: ReactNode;
+};
+
+export function SectionColumn({ measure = "default", children }: SectionColumnProps) {
+  return (
+    <Stack gap="6" align="stretch" className={sectionColumnVariants({ measure: measure })}>
+      {children}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/section-frame.tsx b/packages/react/ui/src/components/section-frame.tsx
new file mode 100644
index 0000000..6ad0370
--- /dev/null
+++ b/packages/react/ui/src/components/section-frame.tsx
@@ -0,0 +1,138 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body
+ * (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts
+ * the body in a card. Axes: layout, media side, tone, density, align.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { SectionBox } from "../components/section-box";
+import { SectionColumn } from "../components/section-column";
+import { SectionHeader } from "../components/section-header";
+import { defaults } from "../presets/defaults";
+import { cn, variants } from "../utils";
+import type { SectionHeading, HeadLink, SectionMedia } from "./section-frame.types";
+
+/** SectionFrame: the classes of each value (shadcn/cva style). */
+export const sectionFrameVariants = variants({
+  base: "w-full",
+  variants: {
+    tone: {
+      default: "",
+      muted: "bg-muted",
+      inverse: "bg-foreground text-background [&_.text-muted-foreground]:text-background/70",
+    },
+    density: {
+      roomy: "py-16",
+      default: "py-10",
+      compact: "py-6",
+      flush: "py-0",
+    },
+    align: {
+      start: "",
+      center: "text-center",
+    },
+  },
+  defaultVariants: { tone: "default", density: "default", align: "start" },
+});
+
+export type SectionFrameProps = {
+  id: string;
+  title?: string;
+  lead?: string;
+  heading?: SectionHeading;
+  action?: HeadLink;
+  layout?: "stack" | "split";
+  media?: SectionMedia;
+  boxed?: boolean;
+  tone?: "default" | "muted" | "inverse";
+  density?: "roomy" | "default" | "compact" | "flush";
+  align?: "start" | "center";
+  measure?: "default" | "landing" | "fill" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  landmarkLabel?: string;
+  className?: string;
+  children?: ReactNode;
+  aside?: ReactNode;
+};
+
+export function SectionFrame({
+  id,
+  title = "",
+  lead,
+  heading,
+  action,
+  layout = "stack",
+  media,
+  boxed = false,
+  tone = "default",
+  density = "default",
+  align = "start",
+  measure = "default",
+  landmarkLabel,
+  className,
+  children,
+  aside,
+}: SectionFrameProps) {
+  const titleId = id + "-title";
+  const sectionTone = boxed ? "default" : tone;
+  const center = (align as string) === "center";
+  return (
+    <Block
+      tag="section"
+      className={cn(
+        sectionFrameVariants({ tone: sectionTone, density: density, align: align }),
+        className
+      )}
+      aria-labelledby={(landmarkLabel ? undefined : (((title as string) !== "") ? titleId : undefined))}
+      aria-label={(landmarkLabel ?? (((title as string) === "") ? id : undefined))}
+      data-testid="section"
+      data-tone={tone}
+      data-density={density}
+    >
+      <Container
+        className={
+          (measure as string) === "landing" ? cn("mx-auto w-full px-4", defaults.section.landing)
+          : (measure as string) === "fill" ? "w-full"
+          : "mx-auto w-full max-w-6xl px-4"
+        }
+        data-slot="container"
+      >
+        <SectionBox boxed={boxed}>
+          {((layout as string) === "split") ? (
+            <Grid cols="1-2" className={cn("gap-8", ((media?.align === "start") ? "items-start" : "items-center"))}>
+              {(media?.show && (media?.side === "start")) ? (
+                <Box className="w-full" data-slot="media">
+                  {aside}
+                </Box>
+              ) : null}
+              <Stack gap="6" align="stretch">
+                <SectionHeader titleId={titleId} title={title} heading={heading} action={action} lead={lead} center={center} />
+                {children}
+              </Stack>
+              {(media?.show && (media?.side !== "start")) ? (
+                <Box className="w-full" data-slot="media">
+                  {aside}
+                </Box>
+              ) : null}
+            </Grid>
+          ) : (
+            <SectionColumn measure={measure}>
+              <SectionHeader titleId={titleId} title={title} heading={heading} action={action} lead={lead} center={center} />
+              {children}
+              {media?.show ? (
+                <Box className="w-full" data-slot="media">
+                  {aside}
+                </Box>
+              ) : null}
+            </SectionColumn>
+          )}
+        </SectionBox>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/section-frame.types.ts b/packages/react/ui/src/components/section-frame.types.ts
new file mode 100644
index 0000000..3502204
--- /dev/null
+++ b/packages/react/ui/src/components/section-frame.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+
+export type SectionHeading = {
+  /** heading level */
+  level?: 1 | 2;
+  /** display: an oversized heading */
+  scale?: "default" | "display";
+  /** a short pill above the heading (e.g. New) */
+  badge?: string;
+};
+
+export type HeadLink = {
+  /** text of the link (View all, Browse all); none: no link */
+  label?: string;
+  /** href of the link; none: no link */
+  href?: string;
+};
+
+export type SectionMedia = {
+  /** the `aside` slot is shown */
+  show?: boolean;
+  /** side of the media in the split layout */
+  side?: "end" | "start";
+  /** split layout: the body and the media centred on each other, or both from the top */
+  align?: "center" | "start";
+};
diff --git a/packages/react/ui/src/components/section-head.tsx b/packages/react/ui/src/components/section-head.tsx
new file mode 100644
index 0000000..964c077
--- /dev/null
+++ b/packages/react/ui/src/components/section-head.tsx
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button
+ * (aria-expanded, the toggle event).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Inline } from "../primitives/inline/inline";
+import { cn, variants } from "../utils";
+
+/** SectionHead: the classes of each value (shadcn/cva style). */
+export const sectionHeadVariants = variants({
+  base: "flex items-center justify-between pr-4 pl-4",
+  variants: {
+    size: {
+      default: "h-8 py-2 text-xs font-semibold",
+      lg: "h-12 py-2 text-sm font-bold",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type SectionHeadProps = {
+  size?: "default" | "lg";
+  expanded?: boolean;
+  controls?: string;
+  className?: string;
+  children?: ReactNode;
+  right?: ReactNode;
+  onToggle?: () => void;
+};
+
+export function SectionHead({
+  size = "default",
+  expanded,
+  controls,
+  className,
+  children,
+  right,
+  onToggle,
+}: SectionHeadProps) {
+  const cls =
+    cn(
+      sectionHeadVariants({ size: size }),
+      "rounded text-foreground in-data-[nav=collapsed]:hidden",
+      className,
+    );
+  return (
+    <>
+      {(expanded != null) ? (
+        <ButtonPlain
+          type="button"
+          className={cn(cls, "w-full text-left")}
+          aria-expanded={expanded}
+          aria-controls={controls}
+          data-slot="section-head"
+          data-expanded={expanded}
+          onClick={() => onToggle?.()}
+        >
+          <Inline data-slot="section-head-title">
+            {children}
+          </Inline>
+          {right ? (
+            <Inline className="flex items-center gap-2" data-slot="section-head-right">
+              {right}
+            </Inline>
+          ) : null}
+        </ButtonPlain>
+      ) : (
+        <Box className={cls} data-slot="section-head">
+          <Inline data-slot="section-head-title">
+            {children}
+          </Inline>
+          {right ? (
+            <Inline className="flex items-center gap-2" data-slot="section-head-right">
+              {right}
+            </Inline>
+          ) : null}
+        </Box>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/section-header.tsx b/packages/react/ui/src/components/section-header.tsx
new file mode 100644
index 0000000..9183d44
--- /dev/null
+++ b/packages/react/ui/src/components/section-header.tsx
@@ -0,0 +1,103 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an
+ * optional lead. No wrapper: its parts are children of the section stack.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Link } from "../primitives/link/link";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { SectionHeading, HeadLink } from "./section-frame.types";
+
+export type SectionHeaderProps = {
+  titleId: string;
+  title?: string;
+  heading?: SectionHeading;
+  action?: HeadLink;
+  lead?: string;
+  center?: boolean;
+};
+
+export function SectionHeader({
+  titleId,
+  title = "",
+  heading,
+  action,
+  lead,
+  center = false,
+}: SectionHeaderProps) {
+  const level = heading?.level ?? 2;
+  const scale = heading?.scale ?? "default";
+  const hasAction = action?.label && action?.href;
+  return (
+    <>
+      {heading?.badge ? (
+        <Badge variant="outline" size="lg" className={(center ? "mx-auto w-fit" : "w-fit")} data-testid="section-badge">
+          {heading?.badge}
+        </Badge>
+      ) : null}
+      {(((title as string) !== "") && hasAction) ? (
+        <Group gap="4" align="center" justify="between" className="w-full flex-wrap">
+          <Title
+            as={level}
+            size={((level === 1) ? "5xl" : "xl")}
+            weight="semibold"
+            className={
+              (scale as string) === "display" ? "text-6xl tracking-tight md:text-8xl"
+              : level === 1 ? "leading-tight"
+              : "leading-7"
+            }
+            id={titleId}
+          >
+            {title}
+          </Title>
+          <Link
+            href={action?.href}
+            variant="default"
+            className={cn(defaults.text.tiny, "shrink-0 font-medium leading-5")}
+            data-testid="section-action"
+          >
+            {action?.label}
+          </Link>
+        </Group>
+      ) : null}
+      {(((title as string) !== "") && !hasAction) ? (
+        <Title
+          as={level}
+          size={((level === 1) ? "5xl" : "xl")}
+          weight="semibold"
+          className={
+            (scale as string) === "display" ? "text-6xl tracking-tight md:text-8xl"
+            : level === 1 ? "leading-tight"
+            : "leading-7"
+          }
+          id={titleId}
+        >
+          {title}
+        </Title>
+      ) : null}
+      {(((title as string) === "") && hasAction) ? (
+        <Group gap="4" align="center" justify="end" className="w-full">
+          <Link
+            href={action?.href}
+            variant="default"
+            className={cn(defaults.text.tiny, "shrink-0 font-medium leading-5")}
+            data-testid="section-action"
+          >
+            {action?.label}
+          </Link>
+        </Group>
+      ) : null}
+      {lead ? (
+        <Text size="base" className={cn("max-w-2xl text-muted-foreground", (center ? "mx-auto" : ""))}>
+          {lead}
+        </Text>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/shell-content.tsx b/packages/react/ui/src/components/shell-content.tsx
new file mode 100644
index 0000000..3299da2
--- /dev/null
+++ b/packages/react/ui/src/components/shell-content.tsx
@@ -0,0 +1,132 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shell-parts.ts
+/**
+ * The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px
+ * grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one),
+ * list (a toolbar over a card of rows). The cards are hidden from assistive technology.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Title } from "../primitives/title/title";
+import { cn } from "../utils";
+
+export type ShellContentProps = {
+  title: string;
+  titleId: string;
+  level?: 1 | 2;
+  content?: "grid" | "split" | "list";
+};
+
+export function ShellContent({ title, titleId, level = 2, content = "grid" }: ShellContentProps) {
+  return (
+    <Stack gap="6" align="stretch" className="flex-1 p-6" data-testid="content">
+      <Group gap="4" align="center" justify="between">
+        <Title as={level} size="2xl" weight="semibold" id={titleId}>
+          {title}
+        </Title>
+        <Box className="h-10 w-32 rounded bg-muted" aria-hidden="true" />
+      </Group>
+      <Box className="flex flex-1 flex-col gap-4" aria-hidden="true" data-testid="panels">
+        {((content as string) === "grid") ? (
+          <>
+            <Box className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+              <Box
+                className={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+                data-testid="panel"
+              >
+                <Box className={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box className={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+              <Box
+                className={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+                data-testid="panel"
+              >
+                <Box className={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box className={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+              <Box
+                className={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+                data-testid="panel"
+              >
+                <Box className={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box className={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+              <Box
+                className={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+                data-testid="panel"
+              >
+                <Box className={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box className={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+            </Box>
+            <Box
+              className={cn(
+                "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                "min-h-64 flex-1"
+              )}
+              data-testid="panel"
+            >
+              <Box className={cn("rounded bg-muted", "h-4 w-1/3")} />
+              <Box className={cn("rounded bg-muted", "flex-1")} />
+            </Box>
+          </>
+        ) : null}
+        {((content as string) === "split") ? (
+          <>
+            <Box className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+              <Box
+                className={cn(
+                  "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                  "h-64 lg:col-span-2"
+                )}
+                data-testid="panel"
+              >
+                <Box className={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box className={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+              <Box
+                className={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-64")}
+                data-testid="panel"
+              >
+                <Box className={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box className={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+            </Box>
+            <Box
+              className={cn(
+                "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                "min-h-40 flex-1"
+              )}
+              data-testid="panel"
+            >
+              <Box className={cn("rounded bg-muted", "h-4 w-1/3")} />
+              <Box className={cn("rounded bg-muted", "flex-1")} />
+            </Box>
+          </>
+        ) : null}
+        {((content as string) === "list") ? (
+          <>
+            <Group gap="4" align="center">
+              <Box className={cn("rounded bg-muted", "h-10 w-64")} />
+              <Box className={cn("rounded bg-muted", "h-10 w-24")} />
+              <Box className={cn("rounded bg-muted", "ml-auto h-10 w-32")} />
+            </Group>
+            <Box
+              className={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "flex-1")}
+              data-testid="panel"
+            >
+              <Box className={cn("rounded bg-muted", "h-8")} />
+              <Box className={cn("rounded bg-muted", "h-8")} />
+              <Box className={cn("rounded bg-muted", "h-8")} />
+              <Box className={cn("rounded bg-muted", "h-8")} />
+              <Box className={cn("rounded bg-muted", "h-8")} />
+              <Box className={cn("rounded bg-muted", "h-8")} />
+            </Box>
+          </>
+        ) : null}
+      </Box>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/shell-footer.tsx b/packages/react/ui/src/components/shell-footer.tsx
new file mode 100644
index 0000000..27f2bf6
--- /dev/null
+++ b/packages/react/ui/src/components/shell-footer.tsx
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shell-parts.ts
+/**
+ * The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the
+ * whole shell (full).
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+export type ShellFooterProps = {
+  nav: ShellNav;
+  place?: "full" | "inset";
+  landmarkLabel?: string;
+};
+
+export function ShellFooter({ nav, place = "full", landmarkLabel }: ShellFooterProps) {
+  return (
+    <Block
+      tag="footer"
+      className={cn(
+        "flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4",
+        (((place as string) === "full") ? "bg-card" : "")
+      )}
+      data-testid="footer"
+      data-place={place}
+      aria-label={landmarkLabel}
+    >
+      <Text size="xs" className="text-muted-foreground">
+        {nav.copyright}
+      </Text>
+      {((nav.footer?.length ?? 0) > 0) ? (
+        <NavBlock
+          label={
+            landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.footerLabel, landmarkLabel))
+            : nav.footerLabel
+          }
+        >
+          <List className="m-0 flex list-none items-center gap-4 p-0">
+            {(nav.footer ?? []).map((f) => (
+              <ListItem key={f.id}>
+                <MenuEntry href={f.href} className="text-xs text-muted-foreground" variant="muted" size="sm">
+                  {f.name}
+                </MenuEntry>
+              </ListItem>
+            ))}
+          </List>
+        </NavBlock>
+      ) : null}
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/shell-sidebar.tsx b/packages/react/ui/src/components/shell-sidebar.tsx
new file mode 100644
index 0000000..3e3907e
--- /dev/null
+++ b/packages/react/ui/src/components/shell-sidebar.tsx
@@ -0,0 +1,145 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shell-parts.ts
+/**
+ * The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read),
+ * collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a
+ * panel of the current section's links). side puts it at the start or the end.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+export type ShellSidebarProps = {
+  nav: ShellNav;
+  mode?: "wide" | "rail" | "collapsed" | "twolevel" | "none";
+  side?: "start" | "end";
+  brand?: "show" | "hide";
+  landmarkLabel?: string;
+  onToggle?: () => void;
+};
+
+export function ShellSidebar({
+  nav,
+  mode = "wide",
+  side = "start",
+  brand = "show",
+  landmarkLabel,
+  onToggle,
+}: ShellSidebarProps) {
+  const named = (mode as string) === "wide";
+  return (
+    <Block
+      tag="aside"
+      className={cn(
+        "flex shrink-0 bg-card",
+        (
+          (side as string) === "end" ? "flex-row-reverse border-l border-border"
+          : "border-r border-border"
+        )
+      )}
+      aria-label={(landmarkLabel ?? nav.label)}
+      data-testid="sidebar"
+      data-mode={mode}
+    >
+      <Box className={cn("flex flex-col gap-6 py-4", (named ? "w-64 px-4" : "w-16 items-center px-2"))}>
+        {((brand as string) === "show") ? (
+          <Group gap="2" align="center" className="shrink-0" data-testid="brand">
+            <LucideIcon name="layers" size={24} />
+            <Text size="base" weight="bold" className={(named ? "" : "sr-only")}>
+              {nav.brand}
+            </Text>
+          </Group>
+        ) : null}
+        {((nav.links?.length ?? 0) > 0) ? (
+          <NavBlock
+            label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.label, landmarkLabel)) : nav.label)}
+            className="flex-1"
+          >
+            <List className="m-0 flex list-none flex-col gap-2 p-0" data-testid="items">
+              {(nav.links ?? []).map((l) => (
+                <ListItem key={l.id}>
+                  <MenuEntry
+                    href={l.href}
+                    className={cn(
+                      "flex items-center gap-4 rounded py-2 text-sm",
+                      (named ? "px-4" : "justify-center px-2"),
+                      ((l.id === nav.current) ? "bg-muted font-medium" : "")
+                    )}
+                    current={(l.id === nav.current)}
+                    size="sm"
+                    testid="item"
+                  >
+                    <LucideIcon name={l.icon} size={16} />
+                    <Inline className={(named ? "" : "sr-only")}>
+                      {l.name}
+                    </Inline>
+                  </MenuEntry>
+                </ListItem>
+              ))}
+            </List>
+          </NavBlock>
+        ) : null}
+        {((mode as string) === "collapsed") ? (
+          <ButtonPlain
+            type="button"
+            className="inline-flex size-10 items-center justify-center rounded text-muted-foreground"
+            aria-label={nav.expand}
+            aria-expanded={(((mode as string) === "wide") ? "true" : "false")}
+            data-testid="toggle"
+            onClick={() => onToggle?.()}
+          >
+            <LucideIcon name="panel-left" size={20} />
+          </ButtonPlain>
+        ) : null}
+      </Box>
+      {(((mode as string) === "twolevel") && ((nav.sub?.length ?? 0) > 0)) ? (
+        <Box
+          className={cn(
+            "flex w-56 flex-col gap-4 px-4 py-6",
+            (((side as string) === "end") ? "border-r border-border" : "border-l border-border")
+          )}
+          data-testid="subnav"
+        >
+          <Text size="sm" weight="semibold" className="px-4">
+            {nav.subTitle}
+          </Text>
+          <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.subTitle, landmarkLabel)) : nav.subTitle)}>
+            <List className="m-0 flex list-none flex-col gap-2 p-0">
+              {(nav.sub ?? []).map((s) => (
+                <ListItem key={s.id}>
+                  <MenuEntry
+                    href={s.href}
+                    className={cn(
+                      "flex items-center gap-4 rounded py-2 text-sm",
+                      (true ? "px-4" : "justify-center px-2"),
+                      ((s.id === nav.subCurrent) ? "bg-muted font-medium" : "")
+                    )}
+                    current={(s.id === nav.subCurrent)}
+                    size="sm"
+                    testid="item"
+                  >
+                    <LucideIcon name={s.icon} size={16} />
+                    <Inline className={(true ? "" : "sr-only")}>
+                      {s.name}
+                    </Inline>
+                  </MenuEntry>
+                </ListItem>
+              ))}
+            </List>
+          </NavBlock>
+        </Box>
+      ) : null}
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/shell-topbar.tsx b/packages/react/ui/src/components/shell-topbar.tsx
new file mode 100644
index 0000000..ec217fa
--- /dev/null
+++ b/packages/react/ui/src/components/shell-topbar.tsx
@@ -0,0 +1,107 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shell-parts.ts
+/**
+ * The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar),
+ * an optional search field, and the signed-in person.
+ */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { SearchPalette } from "../components/search-palette";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+export type ShellTopbarProps = {
+  nav: ShellNav;
+  brand?: "show" | "hide";
+  links?: "show" | "hide";
+  search?: "show" | "hide";
+  landmarkLabel?: string;
+};
+
+export function ShellTopbar({
+  nav,
+  brand = "show",
+  links = "hide",
+  search = "show",
+  landmarkLabel,
+}: ShellTopbarProps) {
+  return (
+    <Block
+      tag="header"
+      className="flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6"
+      data-testid="topbar"
+      aria-label={landmarkLabel}
+    >
+      {((brand as string) === "show") ? (
+        <Group gap="2" align="center" className="shrink-0" data-testid="brand">
+          <LucideIcon name="layers" size={24} />
+          <Text size="base" weight="bold" className={(true ? "" : "sr-only")}>
+            {nav.brand}
+          </Text>
+        </Group>
+      ) : null}
+      {(((links as string) === "show") && ((nav.links?.length ?? 0) > 0)) ? (
+        <NavBlock
+          label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.label, landmarkLabel)) : nav.label)}
+          className="hidden lg:block"
+        >
+          <List className="m-0 flex list-none items-center gap-2 p-0">
+            {(nav.links ?? []).map((l) => (
+              <ListItem key={l.id}>
+                <MenuEntry
+                  href={l.href}
+                  className={cn(
+                    "flex items-center gap-4 rounded py-2 text-sm",
+                    (true ? "px-4" : "justify-center px-2"),
+                    ((l.id === nav.current) ? "bg-muted font-medium" : "")
+                  )}
+                  current={(l.id === nav.current)}
+                  size="sm"
+                  testid="item"
+                >
+                  <LucideIcon name={l.icon} size={16} />
+                  <Inline className={(true ? "" : "sr-only")}>
+                    {l.name}
+                  </Inline>
+                </MenuEntry>
+              </ListItem>
+            ))}
+          </List>
+        </NavBlock>
+      ) : null}
+      {((search as string) === "show") ? (
+        <>
+          {((links as string) === "show") ? (
+            <Box className="ml-auto hidden w-64 shrink-0 xl:block">
+              <SearchPalette label={nav.search} shortcut={nav.shortcut} />
+            </Box>
+          ) : (
+            <SearchPalette label={nav.search} shortcut={nav.shortcut} />
+          )}
+        </>
+      ) : null}
+      <Group
+        gap="4"
+        align="center"
+        className={
+          ((links as string) === "show") && ((search as string) === "show") ? "shrink-0"
+          : "ml-auto shrink-0"
+        }
+        data-testid="user"
+      >
+        <LucideIcon name="bell" size={20} className="text-muted-foreground" />
+        <MediaFrame alt={nav.userName} ratio="1/1" className="size-8 shrink-0 rounded-full" />
+      </Group>
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/sidebar-panel.tsx b/packages/react/ui/src/components/sidebar-panel.tsx
new file mode 100644
index 0000000..91e5833
--- /dev/null
+++ b/packages/react/ui/src/components/sidebar-panel.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/** The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer. */
+import { type ReactNode } from "react";
+import { Block } from "../primitives/block/block";
+import { cn, variants } from "../utils";
+
+/** SidebarPanel: the classes of each value (shadcn/cva style). */
+export const sidebarPanelVariants = variants({
+  base: "flex shrink-0 flex-col",
+  variants: {
+    variant: {
+      chat: "w-68 gap-2 pt-6 pr-4 pb-6 pl-4",
+      creator: "w-62 justify-between gap-4 p-4",
+    },
+  },
+  defaultVariants: { variant: "chat" },
+});
+
+export type SidebarPanelProps = {
+  variant?: "chat" | "creator";
+  landmarkLabel?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function SidebarPanel({ variant, landmarkLabel, className, children }: SidebarPanelProps) {
+  return (
+    <Block
+      tag="aside"
+      className={cn(sidebarPanelVariants({ variant: variant }), className)}
+      data-slot="sidebar-panel"
+      data-variant={(variant ?? "chat")}
+      aria-label={landmarkLabel}
+    >
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/react/ui/src/components/slot-grid.tsx b/packages/react/ui/src/components/slot-grid.tsx
new file mode 100644
index 0000000..6454207
--- /dev/null
+++ b/packages/react/ui/src/components/slot-grid.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/**
+ * Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck
+ * through. One radio group (`name`) across all days. Static markup.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Label } from "../primitives/label/label";
+import { Radio } from "../primitives/radio/radio";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { cn, tpl } from "../utils";
+import type { Day } from "./slot-grid.types";
+
+export type SlotGridProps = {
+  days: Day[];
+  name: string;
+  item?: "card" | "plain";
+};
+
+export function SlotGrid({ days, name, item = "card" }: SlotGridProps) {
+  return (
+    <Stack gap="4" align="stretch" data-testid="days">
+      {(days ?? []).map((d) => (
+        <Stack key={d.id}
+          gap="4"
+          className={
+            (item as string) === "card" ? "rounded bg-card inset-ring inset-ring-border p-4"
+            : "border-b border-border pb-4"
+          }
+          data-testid="day"
+        >
+          <Group gap="4" align="baseline" justify="between" className="flex-wrap">
+            <Text size="sm" weight="semibold">
+              {d.title}
+            </Text>
+            <Text size="xs" className="text-muted-foreground">
+              {d.note}
+            </Text>
+          </Group>
+          <Box className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+            {(d.slots ?? []).map((s) => (
+              <Label key={s}
+                className={"flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted " +
+                  "has-checked:inset-ring-foreground"}
+              >
+                <Radio name={name} value={tpl("{0} {1}", d.id, s)} />
+                <Inline>
+                  {s}
+                </Inline>
+              </Label>
+            ))}
+            {(d.closed ?? []).map((s) => (
+              <Label key={s}
+                className={cn(
+                  "flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted " +
+                    "has-checked:inset-ring-foreground",
+                  "text-muted-foreground line-through"
+                )}
+              >
+                <Radio name={name} value={tpl("{0} {1}", d.id, s)} disabled={true} />
+                <Inline>
+                  {s}
+                </Inline>
+              </Label>
+            ))}
+          </Box>
+        </Stack>
+      ))}
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/slot-grid.types.ts b/packages/react/ui/src/components/slot-grid.types.ts
new file mode 100644
index 0000000..b369480
--- /dev/null
+++ b/packages/react/ui/src/components/slot-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Day = {
+  id: string;
+  title: string;
+  note: string;
+  slots: string[];
+  closed: string[];
+};
diff --git a/packages/react/ui/src/components/stat-figure.tsx b/packages/react/ui/src/components/stat-figure.tsx
new file mode 100644
index 0000000..f3c01a4
--- /dev/null
+++ b/packages/react/ui/src/components/stat-figure.tsx
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/marketing.ts
+/** One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon. */
+import { type ReactNode } from "react";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { StatTile } from "../components/stat-tile";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Stat } from "../blocks/stats-band.types";
+
+export type StatFigureProps = {
+  stat: Stat;
+  item?: "plain" | "card" | "icon";
+  align?: "start" | "center";
+};
+
+export function StatFigure({ stat, item = "plain", align = "center" }: StatFigureProps) {
+  return (
+    <>
+      {((item as string) === "card") ? (
+        <StatTile label={stat.label} value={stat.value} icon={stat.icon} hint={stat.hint} />
+      ) : (
+        <Stack
+          gap="6"
+          align={(((align as string) === "center") ? "center" : "start")}
+          className={cn((((align as string) === "center") ? "text-center" : ""), defaults.stats.column)}
+          data-testid="item"
+        >
+          {((item as string) === "icon") ? (
+            <LucideIcon name={stat.icon} size={24} />
+          ) : null}
+          <Stack gap="2" align={(((align as string) === "center") ? "center" : "start")}>
+            <Text size="5xl" weight="medium" className={cn("flex items-center", defaults.stats.figure)}>
+              {stat.value}
+            </Text>
+            <Text size="sm" weight="semibold" className="leading-5 text-muted-foreground">
+              {stat.label}
+            </Text>
+          </Stack>
+        </Stack>
+      )}
+    </>
+  );
+}
diff --git a/packages/react/ui/src/components/stat-tile.tsx b/packages/react/ui/src/components/stat-tile.tsx
new file mode 100644
index 0000000..42a9205
--- /dev/null
+++ b/packages/react/ui/src/components/stat-tile.tsx
@@ -0,0 +1,71 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the
+ * tile is a plain figure.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+
+export type StatTileProps = {
+  label: string;
+  value: string | number;
+  icon: string;
+  href?: string;
+  hint?: string;
+};
+
+export function StatTile({ label, value, icon, href, hint }: StatTileProps) {
+  return (
+    <Box className="min-w-0">
+      {href ? (
+        <Link
+          href={href}
+          variant="block"
+          className={"flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border " +
+            "hover:bg-muted"}
+        >
+          <Box className="flex items-center justify-between gap-2">
+            <Text className="m-0 text-xs font-bold text-muted-foreground">
+              {label}
+            </Text>
+            <IconBadge size="sm">
+              <LucideIcon name={icon} size={16} />
+            </IconBadge>
+          </Box>
+          <Text size="2xl" weight="bold" className="m-0 leading-8">
+            {value}
+          </Text>
+          {hint ? (
+            <Text className="m-0 text-xs font-medium text-muted-foreground">
+              {hint}
+            </Text>
+          ) : null}
+        </Link>
+      ) : (
+        <Box className={"flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border"}>
+          <Box className="flex items-center justify-between gap-2">
+            <Text className="m-0 text-xs font-bold text-muted-foreground">
+              {label}
+            </Text>
+            <IconBadge size="sm">
+              <LucideIcon name={icon} size={16} />
+            </IconBadge>
+          </Box>
+          <Text size="2xl" weight="bold" className="m-0 leading-8">
+            {value}
+          </Text>
+          {hint ? (
+            <Text className="m-0 text-xs font-medium text-muted-foreground">
+              {hint}
+            </Text>
+          ) : null}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/story-dots.tsx b/packages/react/ui/src/components/story-dots.tsx
new file mode 100644
index 0000000..eb09c43
--- /dev/null
+++ b/packages/react/ui/src/components/story-dots.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/story-tabs-parts.ts
+/** One dot per step of StoryTabs; the dot of the active step is filled. */
+import { type ReactNode } from "react";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { cn } from "../utils";
+import type { Milestone } from "../blocks/milestone-timeline.types";
+import type { StoryLabels } from "../blocks/story-tabs.types";
+
+export type StoryDotsProps = {
+  steps: Milestone[];
+  active: string;
+};
+
+export function StoryDots({ steps, active }: StoryDotsProps) {
+  return (
+    <Group gap="2" align="center">
+      {(steps ?? []).map((s) => (
+        <Inline key={s.id}
+          className={cn("size-2 rounded-full", ((s.id === active) ? "bg-primary" : "bg-border"))}
+          data-testid="story-dot"
+        />
+      ))}
+    </Group>
+  );
+}
diff --git a/packages/react/ui/src/components/story-panel.tsx b/packages/react/ui/src/components/story-panel.tsx
new file mode 100644
index 0000000..fd9593f
--- /dev/null
+++ b/packages/react/ui/src/components/story-panel.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/story-tabs-parts.ts
+/**
+ * The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag
+ * in a muted box.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { tpl } from "../utils";
+import type { Milestone } from "../blocks/milestone-timeline.types";
+import type { StoryLabels } from "../blocks/story-tabs.types";
+
+export type StoryPanelProps = {
+  s: Milestone;
+  index: number;
+  total: number;
+  labels: StoryLabels;
+};
+
+export function StoryPanel({ s, index, total, labels }: StoryPanelProps) {
+  return (
+    <Stack
+      gap="4"
+      align="stretch"
+      className="rounded bg-card inset-ring inset-ring-border p-6"
+      data-testid="story-panel"
+    >
+      <Group gap="2" align="center">
+        <Badge variant="secondary" size="sm">
+          {s.date}
+        </Badge>
+        <Text size="xs" className="text-muted-foreground">
+          {tpl(labels.step, ((index + 1) == null ? undefined : String((index + 1))), (total == null ? undefined : String(total)))}
+        </Text>
+      </Group>
+      <Title as={3} size="xl" weight="semibold">
+        {s.title}
+      </Title>
+      <Text size="sm" className="text-muted-foreground">
+        {s.text}
+      </Text>
+      <Box className="rounded bg-muted p-4">
+        <Text size="sm" weight="semibold">
+          {s.tag}
+        </Text>
+      </Box>
+    </Stack>
+  );
+}
diff --git a/packages/react/ui/src/components/switcher-item.tsx b/packages/react/ui/src/components/switcher-item.tsx
new file mode 100644
index 0000000..6657f45
--- /dev/null
+++ b/packages/react/ui/src/components/switcher-item.tsx
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/** One item of a Switcher (default or active). Pass the same size and layout as the Switcher. */
+import { type ReactNode } from "react";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { cn, variants } from "../utils";
+
+/** SwitcherItem: the classes of each value (shadcn/cva style). */
+export const switcherItemVariants = variants({
+  base:
+    "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-bold text-muted-foreground inset-ring " +
+    "inset-ring-transparent rounded",
+  variants: {
+    size: {
+      sm: "h-6 gap-1 px-3 text-xs",
+      default: "h-8 gap-2 px-4 text-sm",
+      lg: "h-10 gap-2 px-5 text-sm",
+    },
+    state: {
+      default: "",
+      active: "bg-background text-foreground inset-ring-border",
+    },
+    layout: {
+      text: "",
+      icon: "[&>svg]:size-4",
+    },
+  },
+  defaultVariants: { size: "default", state: "default", layout: "text" },
+  compoundVariants: [
+    { layout: "icon", size: "sm", class: "w-6 px-0" },
+    { layout: "icon", size: "default", class: "w-8 px-0" },
+    { layout: "icon", size: "lg", class: "w-10 px-0" },
+  ],
+});
+
+export type SwitcherItemProps = {
+  active?: boolean;
+  size?: "sm" | "default" | "lg";
+  layout?: "text" | "icon";
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+};
+
+export function SwitcherItem({
+  active = false,
+  size = "default",
+  layout = "text",
+  className,
+  children,
+  onClick,
+}: SwitcherItemProps) {
+  return (
+    <ButtonPlain
+      type="button"
+      role="tab"
+      className={cn(
+        switcherItemVariants({ size: size, layout: layout, state: (active ? "active" : "default") }),
+        className
+      )}
+      aria-selected={active}
+      tabIndex={(active ? 0 : -1)}
+      data-slot="switcher-item"
+      data-state={(active ? "active" : "default")}
+      onClick={() => onClick?.()}
+    >
+      {children}
+    </ButtonPlain>
+  );
+}
diff --git a/packages/react/ui/src/components/switcher.tsx b/packages/react/ui/src/components/switcher.tsx
new file mode 100644
index 0000000..fdb4e1c
--- /dev/null
+++ b/packages/react/ui/src/components/switcher.tsx
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down
+ * through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown
+ * (horizontal, activate).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { cn, variants } from "../utils";
+
+/** Switcher: the classes of each value (shadcn/cva style). */
+export const switcherVariants = variants({
+  base: "inline-flex max-w-full items-center gap-1 overflow-x-auto bg-muted inset-ring inset-ring-border rounded",
+  variants: {
+    size: {
+      sm: "h-8 p-1",
+      default: "h-10 p-1",
+      lg: "h-12 p-1",
+    },
+    layout: {
+      text: "",
+      icon: "gap-0",
+    },
+  },
+  defaultVariants: { size: "default", layout: "text" },
+});
+
+export type SwitcherProps = {
+  size?: "sm" | "default" | "lg";
+  layout?: "text" | "icon";
+  label?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function Switcher({ size = "default", layout = "text", label, className, children }: SwitcherProps) {
+  return (
+    <Box
+      className={cn(switcherVariants({ size: size, layout: layout }), className)}
+      role="tablist"
+      aria-label={label}
+      data-slot="switcher"
+    >
+      {children}
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/table-toolbar.tsx b/packages/react/ui/src/components/table-toolbar.tsx
new file mode 100644
index 0000000..5a0bd23
--- /dev/null
+++ b/packages/react/ui/src/components/table-toolbar.tsx
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * The toolbar above a table: search and filter controls on the left (children), the actions on the right
+ * (`actions`). One tab stop group (role toolbar).
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { cn } from "../utils";
+
+export type TableToolbarProps = {
+  label: string;
+  className?: string;
+  children?: ReactNode;
+  actions?: ReactNode;
+};
+
+export function TableToolbar({ label, className, children, actions }: TableToolbarProps) {
+  return (
+    <Box
+      className={cn("flex flex-wrap items-center justify-between gap-2", className)}
+      role="toolbar"
+      aria-label={label}
+      data-slot="table-toolbar"
+    >
+      <Inline className="flex min-w-0 flex-wrap items-center gap-2">
+        {children}
+      </Inline>
+      <Inline className="flex flex-wrap items-center gap-2">
+        {actions}
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/timeline.tsx b/packages/react/ui/src/components/timeline.tsx
new file mode 100644
index 0000000..b55dcea
--- /dev/null
+++ b/packages/react/ui/src/components/timeline.tsx
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time.
+ * Newest first or oldest first is the caller's order.
+ */
+import { type ReactNode } from "react";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { at, cn } from "../utils";
+import type { TimelineItem } from "./timeline.types";
+
+const TONE_DOT: Record<string, string> = {
+  "gray": "bg-muted-foreground",
+  "green": "bg-emerald-500",
+  "blue": "bg-blue-500",
+  "amber": "bg-amber-500",
+  "red": "bg-red-500",
+};
+
+export type TimelineProps = {
+  items: TimelineItem[];
+  className?: string;
+};
+
+export function Timeline({ items, className }: TimelineProps) {
+  return (
+    <Box className={cn("min-w-0", className)} data-slot="timeline">
+      <List className="m-0 flex list-none flex-col p-0">
+        {(items ?? []).map((item, i) => (
+          <ListItem key={item.id} className="relative flex min-w-0 gap-4 pb-4 last:pb-0" data-event={item.id}>
+            <Box className="relative flex w-2 shrink-0 justify-center">
+              {(i < ((items?.length ?? 0) - 1)) ? (
+                <Inline className="absolute top-4 -bottom-0 w-px bg-border" />
+              ) : null}
+              <Inline className={cn("mt-2 size-2 rounded-full", at(TONE_DOT, (item.tone ?? "gray")))} />
+            </Box>
+            <Box className="flex min-w-0 flex-1 flex-col gap-0">
+              <Box className="flex flex-wrap items-baseline justify-between gap-x-4">
+                <Text className="m-0 text-sm font-bold text-foreground">
+                  {item.title}
+                </Text>
+                <Text className="m-0 shrink-0 text-xs font-medium text-muted-foreground">
+                  {item.time}
+                </Text>
+              </Box>
+              {item.text ? (
+                <Text className="m-0 text-xs font-medium text-muted-foreground">
+                  {item.text}
+                </Text>
+              ) : null}
+            </Box>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/components/timeline.types.ts b/packages/react/ui/src/components/timeline.types.ts
new file mode 100644
index 0000000..9474daa
--- /dev/null
+++ b/packages/react/ui/src/components/timeline.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+
+export type TimelineItem = {
+  id: string;
+  title: string;
+  text?: string;
+  time: string;
+  tone?: string;
+};
diff --git a/packages/react/ui/src/components/topic-chips.tsx b/packages/react/ui/src/components/topic-chips.tsx
new file mode 100644
index 0000000..07e2b4c
--- /dev/null
+++ b/packages/react/ui/src/components/topic-chips.tsx
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/**
+ * A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band
+ * with an icon per topic; default: outlined.
+ */
+import { Fragment, type ReactNode } from "react";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import type { Topic } from "./topic-chips.types";
+
+export type TopicChipsProps = {
+  topics: Topic[];
+  tone?: "default" | "inverse";
+};
+
+export function TopicChips({ topics, tone = "default" }: TopicChipsProps) {
+  return (
+    <Group gap="2" align="center" justify="center" className="flex-wrap" data-testid="hero-topics">
+      {(topics ?? []).map((topic) => (
+        <Fragment key={topic.id}>
+          {((tone as string) === "inverse") ? (
+            <Button
+              href={topic.href}
+              variant="ghost"
+              size="sm"
+              className="gap-2 text-background inset-ring-background/30 hover:bg-background/10"
+              data-testid="hero-topic"
+            >
+              {topic.icon ? (
+                <LucideIcon name={topic.icon} size={16} />
+              ) : null}
+              {topic.name}
+            </Button>
+          ) : (
+            <Button href={topic.href} variant="outline" size="sm" data-testid="hero-topic">
+              {topic.name}
+            </Button>
+          )}
+        </Fragment>
+      ))}
+    </Group>
+  );
+}
diff --git a/packages/react/ui/src/components/topic-chips.types.ts b/packages/react/ui/src/components/topic-chips.types.ts
new file mode 100644
index 0000000..9275c96
--- /dev/null
+++ b/packages/react/ui/src/components/topic-chips.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+
+export type Topic = {
+  id: string;
+  name: string;
+  icon: string;
+  href?: string;
+};
diff --git a/packages/react/ui/src/components/weighted-title.tsx b/packages/react/ui/src/components/weighted-title.tsx
new file mode 100644
index 0000000..dfe3be0
--- /dev/null
+++ b/packages/react/ui/src/components/weighted-title.tsx
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/** A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text. */
+import { Fragment, type ReactNode } from "react";
+import { Inline } from "../primitives/inline/inline";
+import { Title } from "../primitives/title/title";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+export type WeightedTitleProps = {
+  id: string;
+  title: string;
+  weights?: readonly string[];
+  level?: 1 | 2;
+};
+
+export function WeightedTitle({ id, title, weights, level = 1 }: WeightedTitleProps) {
+  return (
+    <Title
+      as={level}
+      size="5xl"
+      weight="semibold"
+      className={cn("text-center tracking-tight text-background", defaults.hero.title)}
+      id={id}
+    >
+      {((title ?? "").split(" ") ?? []).map((word, i) => (
+        <Fragment key={i}>
+          <Inline className={weights?.[i]}>
+            {word}
+          </Inline>
+          {" "}
+        </Fragment>
+      ))}
+    </Title>
+  );
+}
diff --git a/packages/react/ui/src/components/zone-rows.tsx b/packages/react/ui/src/components/zone-rows.tsx
new file mode 100644
index 0000000..740dd48
--- /dev/null
+++ b/packages/react/ui/src/components/zone-rows.tsx
@@ -0,0 +1,94 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shop-parts.ts
+/**
+ * The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the
+ * minimum order, the time and an express badge.
+ */
+import { type ReactNode } from "react";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { Text } from "../primitives/text/text";
+import { fmtMoney } from "../utils";
+import type { Zone, ZoneLabels } from "../blocks/zone-table.types";
+
+export type ZoneRowsProps = {
+  zones: Zone[];
+  labels: ZoneLabels;
+};
+
+export function ZoneRows({ zones, labels }: ZoneRowsProps) {
+  return (
+    <Box className="w-full overflow-x-auto rounded inset-ring inset-ring-border">
+      <Table className="w-full text-left text-sm" data-testid="zone-table">
+        <TableCaption className="sr-only">
+          {labels.caption}
+        </TableCaption>
+        <TableHead className="bg-muted">
+          <TableRow>
+            <TableHeadCell scope="col" className="px-4 py-2">
+              {labels.zone}
+            </TableHeadCell>
+            <TableHeadCell scope="col" className="py-2">
+              {labels.price}
+            </TableHeadCell>
+            <TableHeadCell scope="col" className="py-2">
+              {labels.freeFrom}
+            </TableHeadCell>
+            <TableHeadCell scope="col" className="hidden py-2 md:table-cell">
+              {labels.minOrder}
+            </TableHeadCell>
+            <TableHeadCell scope="col" className="py-2">
+              {labels.time}
+            </TableHeadCell>
+            <TableHeadCell scope="col" className="hidden py-2 pr-4 sm:table-cell">
+              {labels.express}
+            </TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {(zones ?? []).map((z) => (
+            <TableRow key={z.id} className="border-t border-border" data-testid="item">
+              <TableCell className="px-4 py-4">
+                <Stack gap="0">
+                  <Text size="sm" weight="semibold">
+                    {z.name}
+                  </Text>
+                  <Text size="xs" className="text-muted-foreground">
+                    {z.area}
+                  </Text>
+                </Stack>
+              </TableCell>
+              <TableCell className="font-medium">
+                {fmtMoney(z.price, z.currency)}
+              </TableCell>
+              <TableCell>
+                {fmtMoney(z.freeFrom, z.currency)}
+              </TableCell>
+              <TableCell className="hidden md:table-cell">
+                {fmtMoney(z.minOrder, z.currency)}
+              </TableCell>
+              <TableCell>
+                {z.time}
+              </TableCell>
+              <TableCell className="hidden pr-4 sm:table-cell">
+                {z.express ? (
+                  <Badge variant="secondary" size="default">
+                    {z.express}
+                  </Badge>
+                ) : null}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}
diff --git a/packages/react/ui/src/index.ts b/packages/react/ui/src/index.ts
new file mode 100644
index 0000000..7b02a9a
--- /dev/null
+++ b/packages/react/ui/src/index.ts
@@ -0,0 +1,391 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/plan.ts (the barrel lists every spec)
+
+// primitives
+export * from "./primitives/alert/alert";
+export * from "./primitives/badge/badge";
+export * from "./primitives/block/block";
+export * from "./primitives/box/box";
+export * from "./primitives/breadcrumb/breadcrumb";
+export * from "./primitives/button-plain/button-plain";
+export * from "./primitives/button/button";
+export * from "./primitives/card/card";
+export * from "./primitives/card/card-header";
+export * from "./primitives/card/card-title";
+export * from "./primitives/card/card-description";
+export * from "./primitives/card/card-content";
+export * from "./primitives/card/card-footer";
+export * from "./primitives/checkbox/checkbox";
+export * from "./primitives/container/container";
+export * from "./primitives/form/fieldset";
+export * from "./primitives/form/legend";
+export * from "./primitives/form/data-list";
+export * from "./primitives/form/data-option";
+export * from "./primitives/form/output";
+export * from "./primitives/form/meter";
+export * from "./primitives/form/progress";
+export * from "./primitives/dialog/dialog";
+export * from "./primitives/disclosure/disclosure";
+export * from "./primitives/disclosure/summary";
+export * from "./primitives/form/form";
+export * from "./primitives/form/form-item";
+export * from "./primitives/form/form-description";
+export * from "./primitives/form/form-message";
+export * from "./primitives/grid/grid";
+export * from "./primitives/grid/grid-col";
+export * from "./primitives/group/group";
+export * from "./primitives/icon/icon";
+export * from "./primitives/iconbadge/iconbadge";
+export * from "./primitives/image/image";
+export * from "./primitives/image/picture";
+export * from "./primitives/image/source";
+export * from "./primitives/inline/inline";
+export * from "./primitives/input/input";
+export * from "./primitives/label/label";
+export * from "./primitives/linebreak/linebreak";
+export * from "./primitives/link-plain/link-plain";
+export * from "./primitives/link/link";
+export * from "./primitives/list/list";
+export * from "./primitives/list/list-item";
+export * from "./primitives/lucide-icon/lucide-icon";
+export * from "./primitives/radio/radio";
+export * from "./primitives/range/range";
+export * from "./primitives/select/select";
+export * from "./primitives/select/select-option";
+export * from "./primitives/select/opt-group";
+export * from "./primitives/separator/separator";
+export * from "./primitives/sheet/sheet";
+export * from "./primitives/sheet/sheet-trigger";
+export * from "./primitives/sheet/sheet-close";
+export * from "./primitives/skeleton/skeleton";
+export * from "./primitives/stack/stack";
+export * from "./primitives/switch/switch";
+export * from "./primitives/table/table";
+export * from "./primitives/table/table-caption";
+export * from "./primitives/table/table-head";
+export * from "./primitives/table/table-body";
+export * from "./primitives/table/table-foot";
+export * from "./primitives/table/table-row";
+export * from "./primitives/table/table-head-cell";
+export * from "./primitives/table/table-cell";
+export * from "./primitives/table/table-col-group";
+export * from "./primitives/table/table-col";
+export * from "./primitives/text/text";
+export * from "./primitives/textarea/textarea";
+export * from "./primitives/themetoggle/themetoggle";
+export * from "./primitives/title/title";
+
+// components
+export * from "./components/app-main";
+export * from "./components/article-block";
+export * from "./components/auth-form";
+export * from "./components/cart-summary-card";
+export type * from "./components/cart-summary-card.types";
+export * from "./components/cart-table";
+export * from "./components/checkout-step";
+export * from "./components/checkout-submit";
+export * from "./components/compare-mark";
+export * from "./components/cta-actions";
+export type * from "./components/cta-actions.types";
+export * from "./components/cta-proof-items";
+export * from "./components/drawer-lines";
+export * from "./components/faq-cards";
+export * from "./components/faq-disclosures";
+export * from "./components/faq-finder";
+export * from "./components/faq-help";
+export * from "./components/feature-cards";
+export * from "./components/feature-metric-cards";
+export * from "./components/feature-pairs";
+export * from "./components/feature-rows";
+export * from "./components/feature-stat-rows";
+export * from "./components/figure-block";
+export * from "./components/footer-brand";
+export * from "./components/footer-card";
+export * from "./components/footer-channels";
+export * from "./components/footer-columns";
+export * from "./components/footer-contacts";
+export * from "./components/footer-figures";
+export * from "./components/footer-group-cards";
+export * from "./components/footer-link-columns";
+export * from "./components/footer-points";
+export * from "./components/footer-signup-card";
+export * from "./components/footer-sitemap";
+export * from "./components/hero-badge";
+export * from "./components/hero-head";
+export * from "./components/hero-split-extras";
+export * from "./components/hero-split-media";
+export * from "./components/job-cards";
+export * from "./components/logo-slot";
+export * from "./components/media-contacts";
+export * from "./components/media-figures";
+export * from "./components/media-posts";
+export * from "./components/media-review";
+export * from "./components/media-steps";
+export * from "./components/media-topics";
+export * from "./components/member-row";
+export * from "./components/menu-entry";
+export * from "./components/nav-actions";
+export * from "./components/nav-bar-menu";
+export * from "./components/nav-block";
+export * from "./components/nav-links";
+export * from "./components/number-field";
+export * from "./components/offer-media";
+export * from "./components/order-rows";
+export * from "./components/over-media";
+export * from "./components/page-aside";
+export * from "./components/page-crumbs";
+export * from "./components/payment-options";
+export type * from "./components/payment-options.types";
+export * from "./components/post-actions";
+export * from "./components/post-author";
+export * from "./components/post-feature";
+export * from "./components/post-mini-card";
+export * from "./components/post-outline";
+export * from "./components/post-overlay-card";
+export * from "./components/post-stats";
+export * from "./components/post-tags";
+export * from "./components/product-gallery";
+export * from "./components/product-price";
+export * from "./components/project-tiles";
+export * from "./components/prompt-composer";
+export * from "./components/quote-card";
+export * from "./components/quote-figures";
+export * from "./components/quote-logo-tiles";
+export * from "./components/quote-proof";
+export * from "./components/quote-rating-panel";
+export * from "./components/quote-slot";
+export * from "./components/search-palette";
+export * from "./components/shell-content";
+export * from "./components/shell-footer";
+export * from "./components/shell-sidebar";
+export * from "./components/shell-topbar";
+export * from "./components/slot-grid";
+export type * from "./components/slot-grid.types";
+export * from "./components/stat-figure";
+export * from "./components/story-dots";
+export * from "./components/story-panel";
+export * from "./components/topic-chips";
+export type * from "./components/topic-chips.types";
+export * from "./components/weighted-title";
+export * from "./components/zone-rows";
+export * from "./components/avatar";
+export * from "./components/badge-square";
+export * from "./components/bar-chart";
+export type * from "./components/bar-chart.types";
+export * from "./components/bulk-bar";
+export * from "./components/empty-state";
+export * from "./components/field";
+export * from "./components/logo-sidebar";
+export * from "./components/meter-row";
+export * from "./components/notice";
+export * from "./components/page-header";
+export * from "./components/pager";
+export * from "./components/panel";
+export * from "./components/pill";
+export * from "./components/range-field";
+export * from "./components/rating";
+export * from "./components/region";
+export * from "./components/search-field";
+export * from "./components/stat-tile";
+export * from "./components/table-toolbar";
+export * from "./components/timeline";
+export type * from "./components/timeline.types";
+export * from "./components/action-group";
+export * from "./components/backdrop";
+export * from "./components/code-window";
+export type * from "./components/code-window.types";
+export * from "./components/dropdown-item";
+export * from "./components/editor-tab";
+export * from "./components/file-tree-item";
+export * from "./components/file-tree";
+export * from "./components/icon-tab";
+export * from "./components/icon-tabs";
+export * from "./components/media-frame";
+export * from "./components/nav-item-row";
+export * from "./components/nav-item";
+export * from "./components/section-box";
+export * from "./components/section-column";
+export * from "./components/section-frame";
+export type * from "./components/section-frame.types";
+export * from "./components/section-head";
+export * from "./components/section-header";
+export * from "./components/sidebar-panel";
+export * from "./components/switcher-item";
+export * from "./components/switcher";
+
+// blocks
+export * from "./blocks/about-company";
+export * from "./blocks/about-me";
+export type * from "./blocks/about-me.types";
+export * from "./blocks/activity-feed";
+export type * from "./blocks/activity-feed.types";
+export * from "./blocks/announcement-bar";
+export * from "./blocks/app-shell";
+export type * from "./blocks/app-shell.types";
+export * from "./blocks/article-body";
+export type * from "./blocks/article-body.types";
+export * from "./blocks/auth-card";
+export type * from "./blocks/auth-card.types";
+export * from "./blocks/auth-layout";
+export type * from "./blocks/auth-layout.types";
+export * from "./blocks/before-after";
+export type * from "./blocks/before-after.types";
+export * from "./blocks/bento-grid";
+export type * from "./blocks/bento-grid.types";
+export * from "./blocks/bottom-nav";
+export * from "./blocks/cart-drawer";
+export type * from "./blocks/cart-drawer.types";
+export * from "./blocks/cart-list";
+export type * from "./blocks/cart-list.types";
+export * from "./blocks/category-nav";
+export type * from "./blocks/category-nav.types";
+export * from "./blocks/chart-panel";
+export type * from "./blocks/chart-panel.types";
+export * from "./blocks/checklist";
+export type * from "./blocks/checklist.types";
+export * from "./blocks/checkout-form";
+export type * from "./blocks/checkout-form.types";
+export * from "./blocks/comparison-table";
+export type * from "./blocks/comparison-table.types";
+export * from "./blocks/contact-form";
+export type * from "./blocks/contact-form.types";
+export * from "./blocks/cookie-banner";
+export * from "./blocks/credit-packs";
+export type * from "./blocks/credit-packs.types";
+export * from "./blocks/cta-band";
+export type * from "./blocks/cta-band.types";
+export * from "./blocks/cta-banner";
+export * from "./blocks/cta-proof";
+export type * from "./blocks/cta-proof.types";
+export * from "./blocks/dashboard-overview";
+export type * from "./blocks/dashboard-overview.types";
+export * from "./blocks/dashboard-shell";
+export type * from "./blocks/dashboard-shell.types";
+export * from "./blocks/delivery-info";
+export type * from "./blocks/delivery-info.types";
+export * from "./blocks/empty-panel";
+export * from "./blocks/error-page";
+export type * from "./blocks/error-page.types";
+export * from "./blocks/faq-list";
+export type * from "./blocks/faq-list.types";
+export * from "./blocks/faq-split";
+export type * from "./blocks/faq-split.types";
+export * from "./blocks/feature-accordion";
+export * from "./blocks/feature-grid";
+export type * from "./blocks/feature-grid.types";
+export * from "./blocks/feature-showcase";
+export * from "./blocks/feature-split";
+export * from "./blocks/feature-sticky";
+export * from "./blocks/feature-tabs";
+export * from "./blocks/footer-split";
+export type * from "./blocks/footer-split.types";
+export * from "./blocks/hero-classic";
+export type * from "./blocks/hero-classic.types";
+export * from "./blocks/hero-prompt";
+export type * from "./blocks/hero-prompt.types";
+export * from "./blocks/hero-split";
+export type * from "./blocks/hero-split.types";
+export * from "./blocks/icon-wall";
+export * from "./blocks/job-board";
+export type * from "./blocks/job-board.types";
+export * from "./blocks/kanban-board";
+export type * from "./blocks/kanban-board.types";
+export * from "./blocks/logo-cloud";
+export type * from "./blocks/logo-cloud.types";
+export * from "./blocks/logo-ribbon";
+export * from "./blocks/media-list";
+export type * from "./blocks/media-list.types";
+export * from "./blocks/mega-menu";
+export type * from "./blocks/mega-menu.types";
+export * from "./blocks/metric-row";
+export type * from "./blocks/metric-row.types";
+export * from "./blocks/milestone-timeline";
+export type * from "./blocks/milestone-timeline.types";
+export * from "./blocks/nav-bar";
+export type * from "./blocks/nav-bar.types";
+export * from "./blocks/newsletter-form";
+export * from "./blocks/order-summary";
+export type * from "./blocks/order-summary.types";
+export * from "./blocks/order-table";
+export type * from "./blocks/order-table.types";
+export * from "./blocks/page-intro";
+export * from "./blocks/page-trail";
+export type * from "./blocks/page-trail.types";
+export * from "./blocks/photo-gallery";
+export type * from "./blocks/photo-gallery.types";
+export * from "./blocks/post-card";
+export type * from "./blocks/post-card.types";
+export * from "./blocks/post-grid";
+export type * from "./blocks/post-grid.types";
+export * from "./blocks/post-header";
+export * from "./blocks/post-showcase";
+export * from "./blocks/post-split";
+export type * from "./blocks/post-split.types";
+export * from "./blocks/pricing-card";
+export type * from "./blocks/pricing-card.types";
+export * from "./blocks/pricing-tiers";
+export type * from "./blocks/pricing-tiers.types";
+export * from "./blocks/product-card";
+export type * from "./blocks/product-card.types";
+export * from "./blocks/product-detail";
+export type * from "./blocks/product-detail.types";
+export * from "./blocks/product-grid";
+export * from "./blocks/product-info";
+export type * from "./blocks/product-info.types";
+export * from "./blocks/profile-form";
+export type * from "./blocks/profile-form.types";
+export * from "./blocks/project-grid";
+export type * from "./blocks/project-grid.types";
+export * from "./blocks/proof-band";
+export * from "./blocks/quote-split";
+export type * from "./blocks/quote-split.types";
+export * from "./blocks/review-list";
+export type * from "./blocks/review-list.types";
+export * from "./blocks/shopping-cart";
+export type * from "./blocks/shopping-cart.types";
+export * from "./blocks/sidebar-nav";
+export * from "./blocks/signup-wizard";
+export type * from "./blocks/signup-wizard.types";
+export * from "./blocks/site-footer";
+export type * from "./blocks/site-footer.types";
+export * from "./blocks/site-header";
+export type * from "./blocks/site-header.types";
+export * from "./blocks/sitemap-footer";
+export type * from "./blocks/sitemap-footer.types";
+export * from "./blocks/skeleton-layout";
+export type * from "./blocks/skeleton-layout.types";
+export * from "./blocks/slot-board";
+export type * from "./blocks/slot-board.types";
+export * from "./blocks/stats-band";
+export type * from "./blocks/stats-band.types";
+export * from "./blocks/stepper";
+export * from "./blocks/steps-list";
+export type * from "./blocks/steps-list.types";
+export * from "./blocks/store-hero";
+export type * from "./blocks/store-hero.types";
+export * from "./blocks/store-locations";
+export type * from "./blocks/store-locations.types";
+export * from "./blocks/story-tabs";
+export type * from "./blocks/story-tabs.types";
+export * from "./blocks/support-channels";
+export * from "./blocks/team-grid";
+export type * from "./blocks/team-grid.types";
+export * from "./blocks/template-grid";
+export type * from "./blocks/template-grid.types";
+export * from "./blocks/testimonial-grid";
+export type * from "./blocks/testimonial-grid.types";
+export * from "./blocks/tour-callout";
+export * from "./blocks/usage-calculator";
+export type * from "./blocks/usage-calculator.types";
+export * from "./blocks/usp-strip";
+export * from "./blocks/video-grid";
+export * from "./blocks/video-modal";
+export type * from "./blocks/video-modal.types";
+export * from "./blocks/zone-table";
+export type * from "./blocks/zone-table.types";
+
+// presets
+export { defaults } from "./presets/defaults";
+
+// utils
+export { cn, variants, tpl, fmtNumber, fmtMoney, at, pageWindow, fitCols, uniqLabel } from "./utils";
diff --git a/packages/react/ui/src/presets/defaults.ts b/packages/react/ui/src/presets/defaults.ts
new file mode 100644
index 0000000..995f05b
--- /dev/null
+++ b/packages/react/ui/src/presets/defaults.ts
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/presets/defaults.ts
+
+/**
+ * Default layout preset: the sizes of the landing blocks as Tailwind classes.
+ * Blocks combine these with token classes; swap the preset to resize every block at once.
+ *
+ * Numbers: ui8kit default sizes (Tailwind scale, no arbitrary values)
+ */
+export const defaults = {
+  /** small type steps for chips, badges and links */
+  text: {
+    tiny: "text-xs",
+    small: "text-sm",
+  },
+  hero: {
+    /** the inverse band: tall section, large bottom radius */
+    band: "min-h-160 rounded",
+    container: "max-w-7xl",
+    head: "gap-12",
+    badge: "w-48",
+    /** display title */
+    title: "text-5xl leading-tight",
+    /** one font-weight class per title word */
+    titleWeights: ["font-normal", "font-semibold", "font-normal", "font-semibold"],
+    column: "max-w-xl gap-16",
+    /** the prompt box */
+    composer: "h-40 max-w-xl rounded",
+    attach: "w-24",
+    promptLine: "h-10",
+    model: "w-24",
+  },
+  section: {
+    landing: "max-w-6xl",
+  },
+  media: {
+    rounded: "rounded",
+  },
+  templates: {
+    card: "h-60 w-64",
+    image: "h-40 w-58 rounded",
+    footer: "h-12 min-h-12",
+  },
+  stats: {
+    column: "min-h-28",
+    figure: "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18",
+    panel: "gap-24 rounded py-20",
+  },
+  features: {
+    cells: "rounded",
+  },
+  news: {
+    card: "h-56 w-64",
+    cover: "h-40 w-64 rounded",
+    title: "top-16",
+    strip: "h-12 min-h-12",
+  },
+  cta: {
+    panel: "rounded py-20",
+    title: "max-w-md",
+    text: "max-w-2xl",
+    button: "w-40",
+  },
+  logos: {
+    /** one centered row of logo slots */
+    row: "h-28 max-w-4xl gap-12 pb-8",
+    slot: "size-20",
+    /** the Lucide glyph inside a slot: half the slot */
+    glyph: 40,
+  },
+  footer: {
+    card: "h-72 gap-12 rounded",
+    brand: "w-48",
+    groups: "gap-x-16",
+  },
+} as const;
diff --git a/packages/react/ui/src/primitives/alert/alert.tsx b/packages/react/ui/src/primitives/alert/alert.tsx
new file mode 100644
index 0000000..3df2964
--- /dev/null
+++ b/packages/react/ui/src/primitives/alert/alert.tsx
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/alert.json
+/**
+ * Alert displays a static status or informational message.
+ * Renders a live region with role=status by default; children carry the message body.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty, oneOfOr } from "../../utils/expr";
+import { Slot } from "../slot/slot";
+
+/** Alert: the classes of each value of each prop (shadcn/cva style). */
+export const alertVariants = variants({
+  base: "flex min-h-8 items-center gap-2 px-2 text-xs font-semibold inset-ring rounded",
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground inset-ring-border",
+      destructive: "bg-muted text-destructive inset-ring-destructive",
+      success: "bg-muted text-foreground inset-ring-border",
+      warning: "bg-muted text-foreground inset-ring-border",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export type AlertVariant = VariantKey<typeof alertVariants, "variant">;
+
+/**
+ * Alert renders a div with alert or status semantics.
+ */
+export type AlertProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  | "className" | "children" | "variant" | "role" | "aria-live"
+> & {
+  variant?: AlertVariant;
+  role?: "status" | "alert";
+  "aria-live"?: "off" | "polite" | "assertive";
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  { variant, role, "aria-live": ariaLive, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(alertVariants({ variant }), className);
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <div
+      ref={ref}
+      className={cls || undefined}
+      data-slot="alert"
+      role={oneOfOr(role, "status", "status", "alert")}
+      aria-live={defaultIfEmpty(ariaLive, "polite")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+Alert.displayName = "Alert";
diff --git a/packages/react/ui/src/primitives/badge/badge.tsx b/packages/react/ui/src/primitives/badge/badge.tsx
new file mode 100644
index 0000000..dfe94b1
--- /dev/null
+++ b/packages/react/ui/src/primitives/badge/badge.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/badge.json
+/**
+ * Badge shows a short status label.
+ * Badge uses variant and size presets.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Badge: the classes of each value of each prop (shadcn/cva style). */
+export const badgeVariants = variants({
+  base: "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+  variants: {
+    size: {
+      sm: "h-5 px-2 text-xs",
+      default: "h-6 px-3 text-xs",
+      lg: "h-8 px-4 text-sm",
+    },
+    variant: {
+      default: "bg-primary text-primary-foreground inset-ring-primary",
+      secondary: "bg-muted text-foreground inset-ring-transparent",
+      outline: "bg-transparent text-foreground inset-ring-border",
+      destructive:
+        "bg-destructive text-white inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 " +
+        "dark:focus-visible:ring-destructive/40",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type BadgeVariant = VariantKey<typeof badgeVariants, "variant">;
+export type BadgeSize = VariantKey<typeof badgeVariants, "size">;
+
+/**
+ * Badge renders label text in a div wrapper.
+ */
+export type BadgeProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  | "className" | "children" | "variant" | "size"
+> & {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  { variant, size, className, children, ...rest },
+  ref
+) {
+  const cls = cn(badgeVariants({ size, variant }), className);
+  return (
+    <div ref={ref} className={cls || undefined} data-slot="badge" {...rest}>
+      {children}
+    </div>
+  );
+});
+Badge.displayName = "Badge";
diff --git a/packages/react/ui/src/primitives/block/block.tsx b/packages/react/ui/src/primitives/block/block.tsx
new file mode 100644
index 0000000..7583e01
--- /dev/null
+++ b/packages/react/ui/src/primitives/block/block.tsx
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/block.json
+/**
+ * Block is the one semantic root of a file (div, section, article, aside, header, footer, main, nav, figure,
+ * search, hgroup).
+ * Any file (block, composite, screen) may open on one Block; never nest Block inside Block in one file, never
+ * repeat it in a loop.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+import { Slot } from "../slot/slot";
+
+/**
+ * Block renders a resolved landmark element with children.
+ */
+export type BlockProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
+  tag?: string;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Block = forwardRef<HTMLElement, BlockProps>(function Block(
+  { tag, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  const resolvedTagValue = resolveTag(tag, "div", TagGroup.Layout);
+  const Tag = resolvedTagValue as ElementType;
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+Block.displayName = "Block";
diff --git a/packages/react/ui/src/primitives/box/box.tsx b/packages/react/ui/src/primitives/box/box.tsx
new file mode 100644
index 0000000..10a854d
--- /dev/null
+++ b/packages/react/ui/src/primitives/box/box.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/box.json
+/**
+ * Box is a generic layout wrapper for internal sections.
+ * Not for top-level landmarks — use Block for page regions.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+import { Slot } from "../slot/slot";
+
+/**
+ * Box renders a div layout wrapper.
+ */
+export type BoxProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
+  tag?: string;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Box = forwardRef<HTMLElement, BoxProps>(function Box(
+  { tag, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  const resolvedTagValue = resolveTag(tag, "div", TagGroup.BoxAllowed);
+  const Tag = resolvedTagValue as ElementType;
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+Box.displayName = "Box";
diff --git a/packages/react/ui/src/primitives/breadcrumb/breadcrumb.tsx b/packages/react/ui/src/primitives/breadcrumb/breadcrumb.tsx
new file mode 100644
index 0000000..52792f0
--- /dev/null
+++ b/packages/react/ui/src/primitives/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/breadcrumb.json
+/**
+ * Breadcrumb shows the current page location within a hierarchy.
+ * Renders nav with ordered links and aria-current on the active item.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+import { isSetStr, orUndef } from "../../utils/expr";
+
+export type BreadcrumbItem = {
+  label?: string;
+  href?: string;
+  current?: boolean;
+  disabled?: boolean;
+};
+
+/**
+ * Breadcrumb renders the full navigation trail.
+ */
+export type BreadcrumbProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  | "className" | "children" | "items"
+> & {
+  items?: BreadcrumbItem[];
+  className?: string;
+};
+
+export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(
+  { items, className, ...rest },
+  ref
+) {
+  const cls = cn("text-sm", className);
+  return (
+    <nav ref={ref} className={cls || undefined} {...rest}>
+      <ol className="flex flex-wrap items-center gap-2">
+        {(items ?? []).map((item, index) => (
+          <li key={index} className="inline-flex items-center">
+            {(isSetStr(item.href) && !(item.disabled)) ? (
+              <a
+                href={orUndef(item.href)}
+                className={cn(
+                  "text-sm",
+                  (
+                    item.current ? "font-medium"
+                    : item.disabled ? "text-muted-foreground"
+                    : "text-primary underline-offset-4 hover:underline"
+                  )
+                )}
+                aria-current={item.current ? "page" : undefined}
+              >
+                {item.label}
+              </a>
+            ) : (
+              <span
+                className={cn(
+                  "text-sm",
+                  (
+                    item.current ? "font-medium"
+                    : item.disabled ? "text-muted-foreground"
+                    : "text-primary underline-offset-4 hover:underline"
+                  )
+                )}
+                aria-current={item.current ? "page" : undefined}
+              >
+                {item.label}
+              </span>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+});
+Breadcrumb.displayName = "Breadcrumb";
diff --git a/packages/react/ui/src/primitives/button-plain/button-plain.tsx b/packages/react/ui/src/primitives/button-plain/button-plain.tsx
new file mode 100644
index 0000000..a9bbac3
--- /dev/null
+++ b/packages/react/ui/src/primitives/button-plain/button-plain.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/button-plain.json
+/**
+ * ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it
+ * themselves.
+ */
+
+import { forwardRef, type ReactNode, type ButtonHTMLAttributes } from "react";
+import { cn } from "../../utils";
+import { oneOfOr } from "../../utils/expr";
+
+/**
+ * ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it
+ * themselves.
+ */
+export type ButtonPlainProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  | "className" | "children" | "type" | "disabled"
+> & {
+  type?: string;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const ButtonPlain = forwardRef<HTMLButtonElement, ButtonPlainProps>(function ButtonPlain(
+  { type, disabled, className, children, ...rest },
+  ref
+) {
+  const cls = cn((disabled ? "pointer-events-none opacity-50" : ""), className);
+  return (
+    <button
+      ref={ref}
+      type={oneOfOr(type, "button", "submit", "reset")}
+      className={cls || undefined}
+      disabled={disabled || undefined}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});
+ButtonPlain.displayName = "ButtonPlain";
diff --git a/packages/react/ui/src/primitives/button/button.tsx b/packages/react/ui/src/primitives/button/button.tsx
new file mode 100644
index 0000000..ea5b9b7
--- /dev/null
+++ b/packages/react/ui/src/primitives/button/button.tsx
@@ -0,0 +1,125 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/button.json
+/**
+ * Button triggers an action on click.
+ * Optional Href renders an anchor with button appearance (CTA navigation).
+ * For exotic roots, use ButtonClasses (Templ/Svelte/Vue/Solid) or asChild (React).
+ * Prefer Link for prose/semantic navigation.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type Ref } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
+import { Slot } from "../slot/slot";
+
+/** Button: the classes of each value of each prop (shadcn/cva style). */
+export const buttonVariants = variants({
+  base:
+    "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring transition-colors " +
+    "disabled:pointer-events-none disabled:opacity-50 rounded",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground inset-ring-primary",
+      outline: "bg-card text-foreground inset-ring-border",
+      ghost: "bg-transparent text-foreground inset-ring-transparent",
+      secondary: "bg-secondary text-secondary-foreground inset-ring-border",
+      destructive:
+        "bg-destructive text-white hover:bg-destructive/90 inset-ring-transparent focus-visible:ring-destructive/20 " +
+        "dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      link: "text-foreground inset-ring-transparent underline-offset-4 hover:underline",
+    },
+    size: {
+      sm: "h-8 px-3 text-sm",
+      default: "h-10 px-4 text-sm",
+      lg: "h-12 px-6 text-base",
+    },
+    layout: {
+      default: "",
+      icon: "",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default", layout: "default" },
+  compoundVariants: [
+    { layout: "icon", size: "sm", class: "size-8 p-0 [&>svg]:size-4" },
+    { layout: "icon", size: "default", class: "size-10 p-0 [&>svg]:size-5" },
+    { layout: "icon", size: "lg", class: "size-12 p-0 [&>svg]:size-6" },
+    { variant: "outline", layout: "icon", class: "text-muted-foreground" },
+    { variant: "ghost", layout: "icon", class: "text-muted-foreground" },
+  ],
+});
+
+export type ButtonVariant = VariantKey<typeof buttonVariants, "variant">;
+export type ButtonSize = VariantKey<typeof buttonVariants, "size">;
+export type ButtonLayout = VariantKey<typeof buttonVariants, "layout">;
+
+/**
+ * Button renders a button element, or an anchor when Href is set.
+ * Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
+ */
+export type ButtonProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  | "className" | "children" | "variant" | "size" | "layout" | "type" | "href" | "target" | "rel"
+  | "external" | "disabled"
+> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  layout?: ButtonLayout;
+  type?: string;
+  href?: string;
+  target?: string;
+  rel?: string;
+  external?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(
+  { variant, size, layout, type, href, target, rel, external, disabled, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(
+    buttonVariants({ variant, size, layout }),
+    (disabled ? "pointer-events-none opacity-50" : ""),
+    className
+  );
+  const targetValue = (isSetStr(target) ? target : (external ? "_blank" : ""));
+  const relValue = (isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : ""));
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    isSetStr(href) ? (
+      <a
+        ref={ref as Ref<HTMLElementTagNameMap["a"]>}
+        href={orUndef(href)}
+        className={cls || undefined}
+        data-slot="button"
+        target={orUndef(targetValue)}
+        rel={orUndef(relValue)}
+        aria-disabled={disabled ? "true" : undefined}
+        tabIndex={disabled ? -1 : undefined}
+        {...rest}
+      >
+        {children}
+      </a>
+    ) : (
+      <button
+        ref={ref as Ref<HTMLElementTagNameMap["button"]>}
+        type={oneOfOr(type, "button", "submit", "reset")}
+        className={cls || undefined}
+        data-slot="button"
+        disabled={disabled || undefined}
+        {...rest}
+      >
+        {children}
+      </button>
+    )
+  );
+});
+Button.displayName = "Button";
diff --git a/packages/react/ui/src/primitives/card/card-content.tsx b/packages/react/ui/src/primitives/card/card-content.tsx
new file mode 100644
index 0000000..480c71e
--- /dev/null
+++ b/packages/react/ui/src/primitives/card/card-content.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardContent: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * CardContent renders the padded main body slot.
+ */
+export type CardContentProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function CardContent(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <div ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </div>
+  );
+});
+CardContent.displayName = "CardContent";
diff --git a/packages/react/ui/src/primitives/card/card-description.tsx b/packages/react/ui/src/primitives/card/card-description.tsx
new file mode 100644
index 0000000..c056244
--- /dev/null
+++ b/packages/react/ui/src/primitives/card/card-description.tsx
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardDescription: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * CardDescription renders a muted subtitle in a p element.
+ */
+export type CardDescriptionProps = Omit<
+  HTMLAttributes<HTMLParagraphElement>,
+  | "className" | "children"
+> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(function CardDescription(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn("text-sm text-muted-foreground", className);
+  return (
+    <p ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </p>
+  );
+});
+CardDescription.displayName = "CardDescription";
diff --git a/packages/react/ui/src/primitives/card/card-footer.tsx b/packages/react/ui/src/primitives/card/card-footer.tsx
new file mode 100644
index 0000000..1acf03f
--- /dev/null
+++ b/packages/react/ui/src/primitives/card/card-footer.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardFooter: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * CardFooter renders the bottom action slot.
+ */
+export type CardFooterProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn("flex items-center", className);
+  return (
+    <div ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </div>
+  );
+});
+CardFooter.displayName = "CardFooter";
diff --git a/packages/react/ui/src/primitives/card/card-header.tsx b/packages/react/ui/src/primitives/card/card-header.tsx
new file mode 100644
index 0000000..a100e27
--- /dev/null
+++ b/packages/react/ui/src/primitives/card/card-header.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardHeader: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * CardHeader renders the top slot.
+ */
+export type CardHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn("grid auto-rows-min items-start gap-2", className);
+  return (
+    <div ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </div>
+  );
+});
+CardHeader.displayName = "CardHeader";
diff --git a/packages/react/ui/src/primitives/card/card-title.tsx b/packages/react/ui/src/primitives/card/card-title.tsx
new file mode 100644
index 0000000..4ab98cd
--- /dev/null
+++ b/packages/react/ui/src/primitives/card/card-title.tsx
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardTitle: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn } from "../../utils";
+import { titleTag } from "../../utils/expr";
+
+/**
+ * CardTitle renders heading text at the As level (default h2).
+ */
+export type CardTitleProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "as"> & {
+  as?: 1 | 2 | 3 | 4 | 5 | 6;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const CardTitle = forwardRef<HTMLElement, CardTitleProps>(function CardTitle(
+  { as, className, children, ...rest },
+  ref
+) {
+  const cls = cn("font-semibold leading-none", className);
+  const resolvedTagValue = titleTag(as);
+  const Tag = resolvedTagValue as ElementType;
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+CardTitle.displayName = "CardTitle";
diff --git a/packages/react/ui/src/primitives/card/card.tsx b/packages/react/ui/src/primitives/card/card.tsx
new file mode 100644
index 0000000..99c3e9d
--- /dev/null
+++ b/packages/react/ui/src/primitives/card/card.tsx
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * Card groups related content in one bordered surface.
+ * Card uses header, content, and footer slots.
+ * For semantic root elements (section, article), use CardClasses on a manual wrapper.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { Slot } from "../slot/slot";
+
+/** Card: the classes of each value of each prop (shadcn/cva style). */
+export const cardVariants = variants({
+  base: "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+  variants: {
+    variant: {
+      default: "",
+      muted: "bg-muted",
+      ghost: "bg-transparent",
+      compact: "gap-4 p-4",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export type CardVariant = VariantKey<typeof cardVariants, "variant">;
+
+/**
+ * Card renders the bordered surface wrapper.
+ */
+export type CardProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  | "className" | "children" | "variant"
+> & {
+  variant?: CardVariant;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { variant, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(cardVariants({ variant }), className);
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <div ref={ref} className={cls || undefined} data-slot="card" {...rest}>
+      {children}
+    </div>
+  );
+});
+Card.displayName = "Card";
diff --git a/packages/react/ui/src/primitives/checkbox/checkbox.tsx b/packages/react/ui/src/primitives/checkbox/checkbox.tsx
new file mode 100644
index 0000000..549dd08
--- /dev/null
+++ b/packages/react/ui/src/primitives/checkbox/checkbox.tsx
@@ -0,0 +1,64 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/checkbox.json
+/**
+ * Checkbox is a native boolean form control.
+ * Wireframe styling via Variant and Size; supports standard ARIA attrs.
+ */
+
+import { forwardRef, type ReactNode, type InputHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Checkbox: the classes of each value of each prop (shadcn/cva style). */
+export const checkboxVariants = variants({
+  base:
+    "peer shrink-0 appearance-none bg-background inset-ring inset-ring-input checked:bg-primary " +
+    "checked:inset-ring-primary checkbox-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      default: "size-5",
+      sm: "size-4",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type CheckboxVariant = VariantKey<typeof checkboxVariants, "variant">;
+export type CheckboxSize = VariantKey<typeof checkboxVariants, "size">;
+
+/**
+ * Checkbox renders a styled input[type=checkbox].
+ */
+export type CheckboxProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  | "className" | "children" | "variant" | "size" | "checked" | "disabled" | "required"
+> & {
+  variant?: CheckboxVariant;
+  size?: CheckboxSize;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+};
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  { variant, size, checked, disabled, required, className, ...rest },
+  ref
+) {
+  const cls = cn(checkboxVariants({ size, variant }), className);
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      className={cls || undefined}
+      checked={checked || undefined}
+      disabled={disabled || undefined}
+      required={required || undefined}
+      {...rest}
+    />
+  );
+});
+Checkbox.displayName = "Checkbox";
diff --git a/packages/react/ui/src/primitives/container/container.tsx b/packages/react/ui/src/primitives/container/container.tsx
new file mode 100644
index 0000000..ed64b84
--- /dev/null
+++ b/packages/react/ui/src/primitives/container/container.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/container.json
+/**
+ * Container wraps page content with a constrained width shell.
+ * Optional main or section tag for inner layout regions.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+import { Slot } from "../slot/slot";
+
+/**
+ * Container renders the outer content shell.
+ */
+export type ContainerProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
+  tag?: string;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Container = forwardRef<HTMLElement, ContainerProps>(function Container(
+  { tag, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  const resolvedTagValue = resolveTag(tag, "div", TagGroup.Container);
+  const Tag = resolvedTagValue as ElementType;
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+Container.displayName = "Container";
diff --git a/packages/react/ui/src/primitives/dialog/dialog.tsx b/packages/react/ui/src/primitives/dialog/dialog.tsx
new file mode 100644
index 0000000..7d0c71e
--- /dev/null
+++ b/packages/react/ui/src/primitives/dialog/dialog.tsx
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/dialog.json
+/**
+ * Dialog renders a native dialog root with an optional behavior hook.
+ * The data-ui8kit hook defaults off; the registry ships no client JS.
+ */
+
+import { forwardRef, type ReactNode, type DialogHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Dialog: the classes of each value of each prop (shadcn/cva style). */
+export const dialogVariants = variants({
+  base:
+    "m-auto flex flex-col bg-background text-foreground inset-ring inset-ring-border shadow-lg " +
+    "backdrop:bg-foreground/20 rounded",
+  variants: {
+    size: {
+      default: "w-70",
+      full: "h-full w-full",
+      lg: "w-100",
+      xl: "w-140",
+    },
+    variant: {
+      card: "bg-card text-card-foreground",
+      default: "",
+      sheet: "min-h-screen rounded-none",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type DialogVariant = VariantKey<typeof dialogVariants, "variant">;
+export type DialogSize = VariantKey<typeof dialogVariants, "size">;
+
+/**
+ * Dialog renders a native dialog element.
+ */
+export type DialogProps = Omit<
+  DialogHTMLAttributes<HTMLDialogElement>,
+  | "className" | "children" | "variant" | "size" | "open"
+> & {
+  variant?: DialogVariant;
+  size?: DialogSize;
+  open?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(function Dialog(
+  { variant, size, open, className, children, ...rest },
+  ref
+) {
+  const cls = cn(dialogVariants({ size, variant }), className);
+  return (
+    <dialog ref={ref} className={cls || undefined} open={open || undefined} {...rest}>
+      {children}
+    </dialog>
+  );
+});
+Dialog.displayName = "Dialog";
diff --git a/packages/react/ui/src/primitives/disclosure/disclosure.tsx b/packages/react/ui/src/primitives/disclosure/disclosure.tsx
new file mode 100644
index 0000000..7512c93
--- /dev/null
+++ b/packages/react/ui/src/primitives/disclosure/disclosure.tsx
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/disclosure.json
+/**
+ * Disclosure renders native details and summary elements.
+ * Open is a static attribute only — no controlled-state contract.
+ */
+
+import { forwardRef, type ReactNode, type DetailsHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Disclosure: the classes of each value of each prop (shadcn/cva style). */
+export const disclosureVariants = variants({
+  base: "group",
+  variants: {
+    variant: {
+      card: "rounded bg-card inset-ring inset-ring-border",
+      default: "rounded inset-ring inset-ring-border",
+      ghost: "",
+      item: "border-b border-border last:border-b-0",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export type DisclosureVariant = VariantKey<typeof disclosureVariants, "variant">;
+
+/**
+ * Disclosure renders native details.
+ */
+export type DisclosureProps = Omit<
+  DetailsHTMLAttributes<HTMLDetailsElement>,
+  | "className" | "children" | "variant" | "open"
+> & {
+  variant?: DisclosureVariant;
+  open?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Disclosure = forwardRef<HTMLDetailsElement, DisclosureProps>(function Disclosure(
+  { variant, open, className, children, ...rest },
+  ref
+) {
+  const cls = cn(disclosureVariants({ variant }), className);
+  return (
+    <details ref={ref} className={cls || undefined} open={open || undefined} {...rest}>
+      {children}
+    </details>
+  );
+});
+Disclosure.displayName = "Disclosure";
diff --git a/packages/react/ui/src/primitives/disclosure/summary.tsx b/packages/react/ui/src/primitives/disclosure/summary.tsx
new file mode 100644
index 0000000..244996d
--- /dev/null
+++ b/packages/react/ui/src/primitives/disclosure/summary.tsx
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/disclosure.json
+/**
+ * Summary: one part of Disclosure (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Summary: the classes of each value of each prop (shadcn/cva style). */
+export const summaryVariants = variants({
+  base: "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
+  variants: {
+    size: {
+      sm: "text-xs font-semibold",
+      default: "text-sm font-semibold",
+      lg: "text-base font-semibold",
+    },
+    variant: {
+      card: "py-2 pr-4 pl-4",
+      default: "py-2 pr-4 pl-4",
+      ghost: "py-2",
+      item: "py-4 text-muted-foreground hover:text-foreground group-open:text-foreground",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type SummaryVariant = VariantKey<typeof summaryVariants, "variant">;
+
+/**
+ * Summary renders native summary, followed by a Lucide chevron-down indicator that turns over when the details
+ * open (CSS only: group-open:rotate-180 on the Disclosure group).
+ */
+export type SummaryProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  | "className" | "children" | "variant"
+> & {
+  variant?: SummaryVariant;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Summary = forwardRef<HTMLElement, SummaryProps>(function Summary(
+  { variant, className, children, ...rest },
+  ref
+) {
+  const cls = cn(summaryVariants({ variant }), className);
+  return (
+    <summary ref={ref} className={cls || undefined} {...rest}>
+      {children}
+      <span
+        className="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+        aria-hidden="true"
+        data-slot="summary-indicator"
+      />
+    </summary>
+  );
+});
+Summary.displayName = "Summary";
diff --git a/packages/react/ui/src/primitives/form/data-list.tsx b/packages/react/ui/src/primitives/form/data-list.tsx
new file mode 100644
index 0000000..59874c5
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/data-list.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * DataList: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * DataList renders a native datalist.
+ */
+export type DataListProps = Omit<HTMLAttributes<HTMLDataListElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const DataList = forwardRef<HTMLDataListElement, DataListProps>(function DataList(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <datalist ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </datalist>
+  );
+});
+DataList.displayName = "DataList";
diff --git a/packages/react/ui/src/primitives/form/data-option.tsx b/packages/react/ui/src/primitives/form/data-option.tsx
new file mode 100644
index 0000000..f70182a
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/data-option.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * DataOption: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type OptionHTMLAttributes } from "react";
+
+/**
+ * DataOption renders an option inside a datalist.
+ */
+export type DataOptionProps = Omit<
+  OptionHTMLAttributes<HTMLOptionElement>,
+  | "className" | "children"
+> & {
+  className?: string;
+};
+
+export const DataOption = forwardRef<HTMLOptionElement, DataOptionProps>(function DataOption(
+  { className, ...rest },
+  ref
+) {
+  return (
+    <option ref={ref} {...rest} />
+  );
+});
+DataOption.displayName = "DataOption";
diff --git a/packages/react/ui/src/primitives/form/fieldset.tsx b/packages/react/ui/src/primitives/form/fieldset.tsx
new file mode 100644
index 0000000..8cb1401
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/fieldset.tsx
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Form controls covers fieldset, legend, datalist, output, meter, and progress.
+ */
+
+import { forwardRef, type ReactNode, type FieldsetHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Fieldset: the classes of each value of each prop (shadcn/cva style). */
+export const fieldsetVariants = variants({
+  base: "grid",
+  variants: {
+    size: {
+      default: "gap-2",
+      lg: "gap-4",
+      sm: "gap-2",
+    },
+    variant: {
+      card: "rounded p-4 inset-ring inset-ring-border",
+      default: "",
+      inline: "flex flex-wrap items-start gap-4",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type FieldsetVariant = VariantKey<typeof fieldsetVariants, "variant">;
+export type FieldsetSize = VariantKey<typeof fieldsetVariants, "size">;
+
+/**
+ * Fieldset renders a native fieldset.
+ */
+export type FieldsetProps = Omit<
+  FieldsetHTMLAttributes<HTMLFieldSetElement>,
+  | "className" | "children" | "variant" | "size" | "disabled"
+> & {
+  variant?: FieldsetVariant;
+  size?: FieldsetSize;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(
+  { variant, size, disabled, className, children, ...rest },
+  ref
+) {
+  const cls = cn(fieldsetVariants({ size, variant }), className);
+  return (
+    <fieldset ref={ref} className={cls || undefined} disabled={disabled || undefined} {...rest}>
+      {children}
+    </fieldset>
+  );
+});
+Fieldset.displayName = "Fieldset";
diff --git a/packages/react/ui/src/primitives/form/form-description.tsx b/packages/react/ui/src/primitives/form/form-description.tsx
new file mode 100644
index 0000000..f92ffbe
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/form-description.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * FormDescription: one part of Form (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants } from "../../utils";
+
+/** FormDescription: the classes of each value of each prop (shadcn/cva style). */
+export const formDescriptionVariants = variants({
+  base: "text-xs font-semibold text-muted-foreground",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * FormDescription renders muted helper copy below a control.
+ */
+export type FormDescriptionProps = Omit<
+  HTMLAttributes<HTMLParagraphElement>,
+  | "className" | "children"
+> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const FormDescription = forwardRef<HTMLParagraphElement, FormDescriptionProps>(function FormDescription(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(formDescriptionVariants(), className);
+  return (
+    <p ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </p>
+  );
+});
+FormDescription.displayName = "FormDescription";
diff --git a/packages/react/ui/src/primitives/form/form-item.tsx b/packages/react/ui/src/primitives/form/form-item.tsx
new file mode 100644
index 0000000..1d8df1c
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/form-item.tsx
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * FormItem: one part of Form (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants } from "../../utils";
+
+/** FormItem: the classes of each value of each prop (shadcn/cva style). */
+export const formItemVariants = variants({
+  base: "flex flex-col gap-2",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * FormItem groups a single field with spacing for label and control.
+ */
+export type FormItemProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const FormItem = forwardRef<HTMLDivElement, FormItemProps>(function FormItem(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(formItemVariants(), className);
+  return (
+    <div ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </div>
+  );
+});
+FormItem.displayName = "FormItem";
diff --git a/packages/react/ui/src/primitives/form/form-message.tsx b/packages/react/ui/src/primitives/form/form-message.tsx
new file mode 100644
index 0000000..bb85cd0
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/form-message.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * FormMessage: one part of Form (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants } from "../../utils";
+
+/** FormMessage: the classes of each value of each prop (shadcn/cva style). */
+export const formMessageVariants = variants({
+  base: "text-xs font-semibold text-destructive",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * FormMessage renders destructive validation feedback.
+ */
+export type FormMessageProps = Omit<
+  HTMLAttributes<HTMLParagraphElement>,
+  | "className" | "children"
+> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const FormMessage = forwardRef<HTMLParagraphElement, FormMessageProps>(function FormMessage(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(formMessageVariants(), className);
+  return (
+    <p ref={ref} className={cls || undefined} role="alert" {...rest}>
+      {children}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
diff --git a/packages/react/ui/src/primitives/form/form.tsx b/packages/react/ui/src/primitives/form/form.tsx
new file mode 100644
index 0000000..e0c6b1d
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/form.tsx
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Form primitives: form wrapper, field item, description, and validation message.
+ * Composes with Label, Input, and other controls.
+ */
+
+import { forwardRef, type ReactNode, type FormHTMLAttributes } from "react";
+import { cn, variants } from "../../utils";
+
+/** Form: the classes of each value of each prop (shadcn/cva style). */
+export const formVariants = variants({
+  base: "grid gap-4",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * Form renders a vertical grid form container.
+ */
+export type FormProps = Omit<
+  FormHTMLAttributes<HTMLFormElement>,
+  | "className" | "children" | "noValidate"
+> & {
+  noValidate?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Form = forwardRef<HTMLFormElement, FormProps>(function Form(
+  { noValidate, className, children, ...rest },
+  ref
+) {
+  const cls = cn(formVariants(), className);
+  return (
+    <form ref={ref} className={cls || undefined} noValidate={noValidate || undefined} {...rest}>
+      {children}
+    </form>
+  );
+});
+Form.displayName = "Form";
diff --git a/packages/react/ui/src/primitives/form/legend.tsx b/packages/react/ui/src/primitives/form/legend.tsx
new file mode 100644
index 0000000..476335b
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/legend.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Legend: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Legend: the classes of each value of each prop (shadcn/cva style). */
+export const legendVariants = variants({
+  base: "font-bold",
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base",
+    },
+    variant: {
+      default: "",
+      muted: "text-muted-foreground",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type LegendVariant = VariantKey<typeof legendVariants, "variant">;
+export type LegendSize = VariantKey<typeof legendVariants, "size">;
+
+/**
+ * Legend renders a native legend.
+ */
+export type LegendProps = Omit<
+  HTMLAttributes<HTMLLegendElement>,
+  | "className" | "children" | "variant" | "size"
+> & {
+  variant?: LegendVariant;
+  size?: LegendSize;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Legend = forwardRef<HTMLLegendElement, LegendProps>(function Legend(
+  { variant, size, className, children, ...rest },
+  ref
+) {
+  const cls = cn(legendVariants({ size, variant }), className);
+  return (
+    <legend ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </legend>
+  );
+});
+Legend.displayName = "Legend";
diff --git a/packages/react/ui/src/primitives/form/meter.tsx b/packages/react/ui/src/primitives/form/meter.tsx
new file mode 100644
index 0000000..61c5ac5
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/meter.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Meter: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type MeterHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Meter: the classes of each value of each prop (shadcn/cva style). */
+export const meterVariants = variants({
+  base: "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  variants: {
+    size: {
+      sm: "h-1",
+      default: "h-2",
+      lg: "h-3",
+    },
+    variant: {
+      default: "[--bar:var(--color-primary)]",
+      muted: "[--bar:var(--color-muted-foreground)]",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type MeterVariant = VariantKey<typeof meterVariants, "variant">;
+export type MeterSize = VariantKey<typeof meterVariants, "size">;
+
+/**
+ * Meter renders a native meter.
+ */
+export type MeterProps = Omit<
+  MeterHTMLAttributes<HTMLMeterElement>,
+  | "className" | "children" | "variant" | "size"
+> & {
+  variant?: MeterVariant;
+  size?: MeterSize;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Meter = forwardRef<HTMLMeterElement, MeterProps>(function Meter(
+  { variant, size, className, children, ...rest },
+  ref
+) {
+  const cls = cn(meterVariants({ size, variant }), className);
+  return (
+    <meter ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </meter>
+  );
+});
+Meter.displayName = "Meter";
diff --git a/packages/react/ui/src/primitives/form/output.tsx b/packages/react/ui/src/primitives/form/output.tsx
new file mode 100644
index 0000000..5db9ab8
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/output.tsx
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Output: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type OutputHTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * Output renders a native output element.
+ */
+export type OutputProps = Omit<
+  OutputHTMLAttributes<HTMLOutputElement>,
+  | "className" | "children" | "value"
+> & {
+  value?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Output = forwardRef<HTMLOutputElement, OutputProps>(function Output(
+  { value, className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <output ref={ref} className={cls || undefined} {...rest}>
+      {value}
+      {children}
+    </output>
+  );
+});
+Output.displayName = "Output";
diff --git a/packages/react/ui/src/primitives/form/progress.tsx b/packages/react/ui/src/primitives/form/progress.tsx
new file mode 100644
index 0000000..226a192
--- /dev/null
+++ b/packages/react/ui/src/primitives/form/progress.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Progress: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type ProgressHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Progress: the classes of each value of each prop (shadcn/cva style). */
+export const progressVariants = variants({
+  base: "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  variants: {
+    size: {
+      sm: "h-1",
+      default: "h-2",
+      lg: "h-3",
+    },
+    variant: {
+      default: "[--bar:var(--color-primary)]",
+      muted: "[--bar:var(--color-muted-foreground)]",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type ProgressVariant = VariantKey<typeof progressVariants, "variant">;
+export type ProgressSize = VariantKey<typeof progressVariants, "size">;
+
+/**
+ * Progress renders a native progress element.
+ */
+export type ProgressProps = Omit<
+  ProgressHTMLAttributes<HTMLProgressElement>,
+  | "className" | "children" | "variant" | "size"
+> & {
+  variant?: ProgressVariant;
+  size?: ProgressSize;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Progress = forwardRef<HTMLProgressElement, ProgressProps>(function Progress(
+  { variant, size, className, children, ...rest },
+  ref
+) {
+  const cls = cn(progressVariants({ size, variant }), className);
+  return (
+    <progress ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </progress>
+  );
+});
+Progress.displayName = "Progress";
diff --git a/packages/react/ui/src/primitives/grid/grid-col.tsx b/packages/react/ui/src/primitives/grid/grid-col.tsx
new file mode 100644
index 0000000..04dcf98
--- /dev/null
+++ b/packages/react/ui/src/primitives/grid/grid-col.tsx
@@ -0,0 +1,67 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/grid.json
+/**
+ * GridCol: one part of Grid (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+import { intMapOr } from "../../utils/expr";
+import { Slot } from "../slot/slot";
+
+/**
+ * GridCol renders one grid column child.
+ */
+export type GridColProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  | "className" | "children" | "span" | "start" | "end" | "order"
+> & {
+  span?: number;
+  start?: number;
+  end?: number;
+  order?: number;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const GridCol = forwardRef<HTMLDivElement, GridColProps>(function GridCol(
+  { span, start, end, order, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(
+    intMapOr(span, {
+      1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4", 5: "col-span-5",
+      6: "col-span-6", 7: "col-span-7", 8: "col-span-8", 9: "col-span-9", 10: "col-span-10",
+      11: "col-span-11", 12: "col-span-12",
+    }, ""),
+    intMapOr(start, {
+      1: "col-start-1", 2: "col-start-2", 3: "col-start-3", 4: "col-start-4", 5: "col-start-5",
+      6: "col-start-6", 7: "col-start-7", 8: "col-start-8", 9: "col-start-9", 10: "col-start-10",
+      11: "col-start-11", 12: "col-start-12",
+    }, ""),
+    intMapOr(end, {
+      1: "col-end-1", 2: "col-end-2", 3: "col-end-3", 4: "col-end-4", 5: "col-end-5", 6: "col-end-6",
+      7: "col-end-7", 8: "col-end-8", 9: "col-end-9", 10: "col-end-10", 11: "col-end-11",
+      12: "col-end-12",
+    }, ""),
+    intMapOr(order, {
+      1: "order-1", 2: "order-2", 3: "order-3", 4: "order-4", 5: "order-5", 6: "order-6", 7: "order-7",
+      8: "order-8", 9: "order-9", 10: "order-10", 11: "order-11", 12: "order-12",
+    }, ""),
+    className
+  );
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <div ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </div>
+  );
+});
+GridCol.displayName = "GridCol";
diff --git a/packages/react/ui/src/primitives/grid/grid.tsx b/packages/react/ui/src/primitives/grid/grid.tsx
new file mode 100644
index 0000000..272995a
--- /dev/null
+++ b/packages/react/ui/src/primitives/grid/grid.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/grid.json
+/**
+ * Grid lays out children in a CSS grid with optional column wrappers.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants } from "../../utils";
+import { defaultIfEmpty, mapOr } from "../../utils/expr";
+import { Slot } from "../slot/slot";
+
+/** Grid: the classes of each value of each prop (shadcn/cva style). */
+export const gridVariants = variants({
+  base: "grid",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * Grid renders a display:grid container.
+ */
+export type GridProps = Omit<HTMLAttributes<HTMLDivElement>, "className" | "children" | "cols"> & {
+  cols?: string;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(
+  { cols, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(
+    gridVariants(),
+    ((className ?? "").includes("grid-cols-") ? "" : mapOr(defaultIfEmpty(cols, "1"), {
+      "1": "grid-cols-1", "2": "grid-cols-2", "3": "grid-cols-3", "4": "grid-cols-4", "5": "grid-cols-5",
+      "6": "grid-cols-6", "7": "grid-cols-7", "8": "grid-cols-8", "9": "grid-cols-9",
+      "10": "grid-cols-10", "11": "grid-cols-11", "12": "grid-cols-12",
+      "1-2": "grid-cols-1 md:grid-cols-2", "1-3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+      "1-4": "grid-cols-1 sm:grid-cols-2 md:grid-cols-4", "2-3": "grid-cols-2 md:grid-cols-3",
+      "2-4": "grid-cols-2 md:grid-cols-4", "2-6": "grid-cols-2 md:grid-cols-6",
+      "3-6": "grid-cols-3 md:grid-cols-6",
+    }, "")),
+    className
+  );
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <div ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </div>
+  );
+});
+Grid.displayName = "Grid";
diff --git a/packages/react/ui/src/primitives/group/group.tsx b/packages/react/ui/src/primitives/group/group.tsx
new file mode 100644
index 0000000..1625e1a
--- /dev/null
+++ b/packages/react/ui/src/primitives/group/group.tsx
@@ -0,0 +1,84 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/group.json
+/**
+ * Group arranges children in a horizontal flex row.
+ * Supports fieldset for related form controls.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+import { Slot } from "../slot/slot";
+
+/** Group: the classes of each value of each prop (shadcn/cva style). */
+export const groupVariants = variants({
+  base: "flex min-w-0",
+  variants: {
+    gap: {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      auto: "",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline",
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+    },
+  },
+  defaultVariants: { gap: "auto", align: "center", justify: "start" },
+});
+
+export type GroupGap = VariantKey<typeof groupVariants, "gap">;
+export type GroupAlign = VariantKey<typeof groupVariants, "align">;
+export type GroupJustify = VariantKey<typeof groupVariants, "justify">;
+
+/**
+ * Group renders a horizontal flex container.
+ */
+export type GroupProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  | "className" | "children" | "gap" | "align" | "justify" | "tag"
+> & {
+  gap?: GroupGap;
+  align?: GroupAlign;
+  justify?: GroupJustify;
+  tag?: string;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Group = forwardRef<HTMLElement, GroupProps>(function Group(
+  { gap, align, justify, tag, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(groupVariants({ gap, align, justify }), className);
+  const resolvedTagValue = resolveTag(tag, "div", TagGroup.Group);
+  const Tag = resolvedTagValue as ElementType;
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+Group.displayName = "Group";
diff --git a/packages/react/ui/src/primitives/icon/icon.tsx b/packages/react/ui/src/primitives/icon/icon.tsx
new file mode 100644
index 0000000..e177bab
--- /dev/null
+++ b/packages/react/ui/src/primitives/icon/icon.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/icon.json
+/**
+ * Icon renders a class-based span, svg use reference, or text fallback.
+ * Decorative icons are hidden from assistive technology by default.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type Ref, type SVGProps } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { concatTrim, eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
+
+/** Icon: the classes of each value of each prop (shadcn/cva style). */
+export const iconVariants = variants({
+  base: "inline-block shrink-0",
+  variants: {
+    size: {
+      xs: "size-3",
+      default: "size-4",
+      md: "size-5",
+      lg: "size-6",
+    },
+    type: {
+      class: "",
+      svg: "",
+      text: "",
+    },
+  },
+  defaultVariants: { size: "default", type: "class" },
+});
+
+export type IconSize = VariantKey<typeof iconVariants, "size">;
+
+/**
+ * Icon renders a class-based span, svg use, or text fallback host.
+ */
+export type IconProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  | "className" | "children" | "name" | "type" | "baseClass" | "prefix" | "size" | "href" | "title"
+  | "aria-label" | "decorative"
+> & {
+  name?: string;
+  type?: string;
+  baseClass?: string;
+  prefix?: string;
+  size?: IconSize;
+  href?: string;
+  title?: string;
+  "aria-label"?: string;
+  decorative?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Icon = forwardRef<HTMLElement | SVGSVGElement, IconProps>(function Icon(
+  { name, type, baseClass, prefix, size, href, title, "aria-label": ariaLabel, decorative, className, children, ...rest },
+  ref
+) {
+  const cls = cn(
+    iconVariants({ size, type: oneOfOr(type, "class", "svg", "text") as VariantKey<typeof iconVariants, "type"> }),
+    (eqStr(oneOfOr(type, "class", "svg", "text"), "class") ? baseClass : ""),
+    ((eqStr(oneOfOr(type, "class", "svg", "text"), "class") && isSetStr(name)) ? concatTrim(prefix, name) : ""),
+    className
+  );
+  const iconKindValue = oneOfOr(type, "class", "svg", "text");
+  const isDecorativeValue = (decorative || (!(isSetStr(title)) && !(isSetStr(ariaLabel))));
+  return (
+    eqStr(iconKindValue, "svg") ? (
+      <svg
+        ref={ref as Ref<SVGSVGElement>}
+        className={cls || undefined}
+        aria-hidden={isDecorativeValue ? "true" : undefined}
+        role={!(isDecorativeValue) ? "img" : undefined}
+        aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined}
+        {...(rest as SVGProps<SVGSVGElement>)}
+      >
+        {isSetStr(title) ? (
+          <title>
+            {title}
+          </title>
+        ) : null}
+        {isSetStr(href) ? (
+          <use href={orUndef(href)} />
+        ) : null}
+        {children}
+      </svg>
+    ) : (
+      eqStr(iconKindValue, "text") ? (
+        <span
+          ref={ref as Ref<HTMLElementTagNameMap["span"]>}
+          className={cls || undefined}
+          aria-hidden={isDecorativeValue ? "true" : undefined}
+          role={!(isDecorativeValue) ? "img" : undefined}
+          aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined}
+          {...rest}
+        >
+          {children}
+        </span>
+      ) : (
+        <span
+          ref={ref as Ref<HTMLElementTagNameMap["span"]>}
+          className={cls || undefined}
+          aria-hidden={isDecorativeValue ? "true" : undefined}
+          role={!(isDecorativeValue) ? "img" : undefined}
+          aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined}
+          {...rest}
+        />
+      )
+    )
+  );
+});
+Icon.displayName = "Icon";
diff --git a/packages/react/ui/src/primitives/iconbadge/iconbadge.tsx b/packages/react/ui/src/primitives/iconbadge/iconbadge.tsx
new file mode 100644
index 0000000..2184000
--- /dev/null
+++ b/packages/react/ui/src/primitives/iconbadge/iconbadge.tsx
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/iconbadge.json
+/**
+ * IconBadge renders a small icon surface for nav rows, cards, and status blocks.
+ * Pass the letter, glyph, or Icon node as children.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** IconBadge: the classes of each value of each prop (shadcn/cva style). */
+export const iconbadgeVariants = variants({
+  base: "inline-flex shrink-0 items-center justify-center font-bold rounded",
+  variants: {
+    variant: {
+      default: "bg-muted text-muted-foreground",
+      primary: "bg-primary text-primary-foreground",
+      accent: "bg-accent text-accent-foreground",
+      secondary: "bg-secondary text-secondary-foreground",
+      outline: "text-foreground inset-ring inset-ring-border",
+      destructive: "bg-destructive text-white dark:bg-destructive/60",
+    },
+    size: {
+      xs: "size-6 text-xs",
+      sm: "size-8 text-xs",
+      default: "size-10 text-xs",
+      lg: "size-12 text-sm",
+      xl: "size-20 text-base",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type IconBadgeVariant = VariantKey<typeof iconbadgeVariants, "variant">;
+export type IconBadgeSize = VariantKey<typeof iconbadgeVariants, "size">;
+
+/**
+ * IconBadge renders children as the badge content.
+ */
+export type IconBadgeProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  | "className" | "children" | "variant" | "size"
+> & {
+  variant?: IconBadgeVariant;
+  size?: IconBadgeSize;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const IconBadge = forwardRef<HTMLSpanElement, IconBadgeProps>(function IconBadge(
+  { variant, size, className, children, ...rest },
+  ref
+) {
+  const cls = cn(iconbadgeVariants({ variant, size }), className);
+  return (
+    <span ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </span>
+  );
+});
+IconBadge.displayName = "IconBadge";
diff --git a/packages/react/ui/src/primitives/image/image.tsx b/packages/react/ui/src/primitives/image/image.tsx
new file mode 100644
index 0000000..587162b
--- /dev/null
+++ b/packages/react/ui/src/primitives/image/image.tsx
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/image.json
+/**
+ * Image renders accessible img, picture, and source primitives.
+ * Use Decorative for purely visual images so alt stays empty.
+ */
+
+import { forwardRef, type ReactNode, type ImgHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { oneOfOr } from "../../utils/expr";
+
+/** Image: the classes of each value of each prop (shadcn/cva style). */
+export const imageVariants = variants({
+  base: "block max-w-full",
+  variants: {
+    aspect: {
+      auto: "aspect-auto",
+      square: "aspect-square",
+      video: "aspect-video",
+    },
+    fit: {
+      contain: "object-contain",
+      cover: "object-cover",
+      fill: "object-fill",
+      none: "object-none",
+      "scale-down": "object-scale-down",
+    },
+    position: {
+      bottom: "object-bottom",
+      center: "object-center",
+      left: "object-left",
+      "left-bottom": "object-left-bottom",
+      "left-top": "object-left-top",
+      right: "object-right",
+      "right-bottom": "object-right-bottom",
+      "right-top": "object-right-top",
+      top: "object-top",
+    },
+    size: {
+      auto: "",
+      default: "",
+      full: "h-full w-full",
+      xs: "size-6",
+      sm: "size-8",
+      md: "size-12",
+      lg: "size-16",
+      xl: "size-20",
+    },
+    variant: {
+      default: "",
+      logo: "object-contain",
+    },
+  },
+  defaultVariants: { aspect: "auto", fit: "cover", position: "center", size: "auto", variant: "default" },
+});
+
+export type ImageVariant = VariantKey<typeof imageVariants, "variant">;
+export type ImageSize = VariantKey<typeof imageVariants, "size">;
+export type ImageFit = VariantKey<typeof imageVariants, "fit">;
+export type ImagePosition = VariantKey<typeof imageVariants, "position">;
+export type ImageAspect = VariantKey<typeof imageVariants, "aspect">;
+
+/**
+ * Image renders an accessible img element.
+ */
+export type ImageProps = Omit<
+  ImgHTMLAttributes<HTMLImageElement>,
+  | "className" | "children" | "variant" | "size" | "alt" | "fit" | "position" | "aspect" | "loading"
+  | "decoding" | "decorative"
+> & {
+  variant?: ImageVariant;
+  size?: ImageSize;
+  alt?: string;
+  fit?: ImageFit;
+  position?: ImagePosition;
+  aspect?: ImageAspect;
+  loading?: string;
+  decoding?: string;
+  decorative?: boolean;
+  className?: string;
+};
+
+export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
+  { variant, size, alt, fit, position, aspect, loading, decoding, decorative, className, ...rest },
+  ref
+) {
+  const cls = cn(imageVariants({ aspect, fit, position, size, variant }), className);
+  return (
+    <img
+      ref={ref}
+      alt={((decorative ? "" : alt)) ?? ""}
+      loading={oneOfOr(loading, "lazy", "eager")}
+      decoding={oneOfOr(decoding, "async", "sync", "auto")}
+      className={cls || undefined}
+      aria-hidden={decorative ? "true" : undefined}
+      {...rest}
+    />
+  );
+});
+Image.displayName = "Image";
diff --git a/packages/react/ui/src/primitives/image/picture.tsx b/packages/react/ui/src/primitives/image/picture.tsx
new file mode 100644
index 0000000..aebd647
--- /dev/null
+++ b/packages/react/ui/src/primitives/image/picture.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/image.json
+/**
+ * Picture: one part of Image (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * Picture renders a responsive image wrapper.
+ */
+export type PictureProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Picture = forwardRef<HTMLElement, PictureProps>(function Picture(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <picture ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </picture>
+  );
+});
+Picture.displayName = "Picture";
diff --git a/packages/react/ui/src/primitives/image/source.tsx b/packages/react/ui/src/primitives/image/source.tsx
new file mode 100644
index 0000000..572d6da
--- /dev/null
+++ b/packages/react/ui/src/primitives/image/source.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/image.json
+/**
+ * Source: one part of Image (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type SourceHTMLAttributes } from "react";
+
+/**
+ * Source renders a source candidate for picture, video, or audio.
+ */
+export type SourceProps = Omit<
+  SourceHTMLAttributes<HTMLSourceElement>,
+  | "className" | "children"
+> & {
+  className?: string;
+};
+
+export const Source = forwardRef<HTMLSourceElement, SourceProps>(function Source(
+  { className, ...rest },
+  ref
+) {
+  return (
+    <source ref={ref} {...rest} />
+  );
+});
+Source.displayName = "Source";
diff --git a/packages/react/ui/src/primitives/inline/inline.tsx b/packages/react/ui/src/primitives/inline/inline.tsx
new file mode 100644
index 0000000..64e7e9f
--- /dev/null
+++ b/packages/react/ui/src/primitives/inline/inline.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/inline.json
+/**
+ * Inline renders inline copy as a span. Use Text for paragraph blocks and
+ * Title (as 1–6) for headings.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+import { Slot } from "../slot/slot";
+
+/**
+ * Inline renders a span element with inline copy classes.
+ */
+export type InlineProps = Omit<HTMLAttributes<HTMLSpanElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Inline = forwardRef<HTMLSpanElement, InlineProps>(function Inline(
+  { className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <span ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </span>
+  );
+});
+Inline.displayName = "Inline";
diff --git a/packages/react/ui/src/primitives/input/input.tsx b/packages/react/ui/src/primitives/input/input.tsx
new file mode 100644
index 0000000..0441c8a
--- /dev/null
+++ b/packages/react/ui/src/primitives/input/input.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/input.json
+/**
+ * Input is a single-line native text field.
+ * Supports types, validation attrs, and wireframe variant/size classes.
+ */
+
+import { forwardRef, type ReactNode, type InputHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty } from "../../utils/expr";
+
+/** Input: the classes of each value of each prop (shadcn/cva style). */
+export const inputVariants = variants({
+  base:
+    "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+    "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+    "focus-visible:inset-ring-ring rounded",
+  variants: {
+    size: {
+      sm: "h-8 px-3 text-base md:text-sm",
+      default: "h-10 px-3 text-base md:text-sm",
+      lg: "h-12 px-4 text-base",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted inset-ring-transparent",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type InputVariant = VariantKey<typeof inputVariants, "variant">;
+export type InputSize = VariantKey<typeof inputVariants, "size">;
+
+/**
+ * Input renders a styled single-line form control.
+ */
+export type InputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  | "className" | "children" | "variant" | "size" | "type" | "disabled" | "required"
+> & {
+  variant?: InputVariant;
+  size?: InputSize;
+  type?: string;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+};
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { variant, size, type, disabled, required, className, ...rest },
+  ref
+) {
+  const cls = cn(inputVariants({ size, variant }), className);
+  return (
+    <input
+      ref={ref}
+      type={defaultIfEmpty(type, "text")}
+      className={cls || undefined}
+      disabled={disabled || undefined}
+      required={required || undefined}
+      {...rest}
+    />
+  );
+});
+Input.displayName = "Input";
diff --git a/packages/react/ui/src/primitives/label/label.tsx b/packages/react/ui/src/primitives/label/label.tsx
new file mode 100644
index 0000000..a6aac56
--- /dev/null
+++ b/packages/react/ui/src/primitives/label/label.tsx
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/label.json
+/**
+ * Label associates visible text with a form control via the for attribute.
+ */
+
+import { forwardRef, type ReactNode, type LabelHTMLAttributes } from "react";
+import { cn, variants } from "../../utils";
+
+/** Label: the classes of each value of each prop (shadcn/cva style). */
+export const labelVariants = variants({
+  base: "text-xs font-bold text-foreground",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * Label renders accessible text linked to a control.
+ */
+export type LabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(labelVariants(), className);
+  return (
+    <label ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </label>
+  );
+});
+Label.displayName = "Label";
diff --git a/packages/react/ui/src/primitives/linebreak/linebreak.tsx b/packages/react/ui/src/primitives/linebreak/linebreak.tsx
new file mode 100644
index 0000000..70965bd
--- /dev/null
+++ b/packages/react/ui/src/primitives/linebreak/linebreak.tsx
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/linebreak.json
+/**
+ * Break renders br or wbr for controlled inline wrapping.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn } from "../../utils";
+import { mapOr } from "../../utils/expr";
+
+/**
+ * Break renders br by default, or wbr when Type is wbr/word.
+ */
+export type BreakProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "type"> & {
+  type?: string;
+  className?: string;
+};
+
+export const Break = forwardRef<HTMLElement, BreakProps>(function Break(
+  { type, className, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  const resolvedTagValue = mapOr(type, { "wbr": "wbr", "word": "wbr" }, "br");
+  const Tag = resolvedTagValue as ElementType;
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest} />
+  );
+});
+Break.displayName = "Break";
diff --git a/packages/react/ui/src/primitives/link-plain/link-plain.tsx b/packages/react/ui/src/primitives/link-plain/link-plain.tsx
new file mode 100644
index 0000000..eedd715
--- /dev/null
+++ b/packages/react/ui/src/primitives/link-plain/link-plain.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/link-plain.json
+/**
+ * LinkPlain is a bare anchor: no styling beyond Class.
+ */
+
+import { forwardRef, type ReactNode, type AnchorHTMLAttributes } from "react";
+import { cn } from "../../utils";
+import { eqStr, isSetStr, orUndef } from "../../utils/expr";
+
+/**
+ * LinkPlain is a bare anchor: no styling beyond Class.
+ */
+export type LinkPlainProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  | "className" | "children" | "target" | "rel" | "external" | "disabled"
+> & {
+  target?: string;
+  rel?: string;
+  external?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const LinkPlain = forwardRef<HTMLAnchorElement, LinkPlainProps>(function LinkPlain(
+  { target, rel, external, disabled, className, children, ...rest },
+  ref
+) {
+  const cls = cn((disabled ? "pointer-events-none opacity-50" : ""), className);
+  const targetValue = (isSetStr(target) ? target : (external ? "_blank" : ""));
+  const relValue = (isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : ""));
+  return (
+    <a
+      ref={ref}
+      className={cls || undefined}
+      target={orUndef(targetValue)}
+      rel={orUndef(relValue)}
+      aria-disabled={disabled ? "true" : undefined}
+      tabIndex={disabled ? -1 : undefined}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+});
+LinkPlain.displayName = "LinkPlain";
diff --git a/packages/react/ui/src/primitives/link/link.tsx b/packages/react/ui/src/primitives/link/link.tsx
new file mode 100644
index 0000000..daa8e71
--- /dev/null
+++ b/packages/react/ui/src/primitives/link/link.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/link.json
+/**
+ * Link renders a semantic anchor for navigation and prose.
+ * Use Button for actions; use Link for destinations.
+ */
+
+import { forwardRef, type ReactNode, type AnchorHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { eqStr, isSetStr, orUndef } from "../../utils/expr";
+
+/** Link: the classes of each value of each prop (shadcn/cva style). */
+export const linkVariants = variants({
+  base: "inline-flex items-center underline-offset-4",
+  variants: {
+    size: {
+      sm: "gap-2 text-sm font-medium",
+      default: "gap-2 text-base font-semibold",
+      md: "gap-2 text-xl font-semibold",
+      lg: "gap-2 text-2xl font-semibold",
+    },
+    variant: {
+      block: "flex w-full text-foreground",
+      default: "text-foreground hover:underline",
+      external: "text-foreground hover:underline",
+      muted: "text-muted-foreground hover:text-foreground",
+      nav: "text-foreground",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type LinkVariant = VariantKey<typeof linkVariants, "variant">;
+export type LinkSize = VariantKey<typeof linkVariants, "size">;
+
+/**
+ * Link renders a semantic anchor element.
+ */
+export type LinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  | "className" | "children" | "variant" | "size" | "target" | "rel" | "external" | "disabled"
+> & {
+  variant?: LinkVariant;
+  size?: LinkSize;
+  target?: string;
+  rel?: string;
+  external?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+  { variant, size, target, rel, external, disabled, className, children, ...rest },
+  ref
+) {
+  const cls = cn(linkVariants({ size, variant }), (disabled ? "pointer-events-none opacity-50" : ""), className);
+  const targetValue = (isSetStr(target) ? target : (external ? "_blank" : ""));
+  const relValue = (isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : ""));
+  return (
+    <a
+      ref={ref}
+      className={cls || undefined}
+      target={orUndef(targetValue)}
+      rel={orUndef(relValue)}
+      aria-disabled={disabled ? "true" : undefined}
+      tabIndex={disabled ? -1 : undefined}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+});
+Link.displayName = "Link";
diff --git a/packages/react/ui/src/primitives/list/list-item.tsx b/packages/react/ui/src/primitives/list/list-item.tsx
new file mode 100644
index 0000000..1503f1b
--- /dev/null
+++ b/packages/react/ui/src/primitives/list/list-item.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/list.json
+/**
+ * ListItem: one part of List (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn } from "../../utils";
+import { eqStr, isSetNum } from "../../utils/expr";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/**
+ * ListItem renders one li with optional value attribute.
+ */
+export type ListItemProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  | "className" | "children" | "tag" | "value"
+> & {
+  tag?: string;
+  value?: number;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(
+  { tag, value, className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  const resolvedTagValue = resolveTag(tag, "li", TagGroup.ListItem);
+  const Tag = resolvedTagValue as ElementType;
+  return (
+    <Tag
+      ref={ref as Ref<HTMLElement>}
+      className={cls || undefined}
+      value={(isSetNum(value) && eqStr(resolvedTagValue, "li")) ? String(value ?? 0) : undefined}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+});
+ListItem.displayName = "ListItem";
diff --git a/packages/react/ui/src/primitives/list/list.tsx b/packages/react/ui/src/primitives/list/list.tsx
new file mode 100644
index 0000000..fd7ae57
--- /dev/null
+++ b/packages/react/ui/src/primitives/list/list.tsx
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/list.json
+/**
+ * List renders semantic ul, ol, dl, or menu lists with ListItem children.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/**
+ * List renders a list container (ul, ol, dl, or menu).
+ */
+export type ListProps = Omit<HTMLAttributes<HTMLElement>, "className" | "children" | "tag"> & {
+  tag?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const List = forwardRef<HTMLElement, ListProps>(function List(
+  { tag, className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  const resolvedTagValue = resolveTag(tag, "ul", TagGroup.List);
+  const Tag = resolvedTagValue as ElementType;
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+List.displayName = "List";
diff --git a/packages/react/ui/src/primitives/lucide-icon/lucide-icon.tsx b/packages/react/ui/src/primitives/lucide-icon/lucide-icon.tsx
new file mode 100644
index 0000000..784871b
--- /dev/null
+++ b/packages/react/ui/src/primitives/lucide-icon/lucide-icon.tsx
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/lucide-icon.json
+/**
+ * LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file.
+ * Decorative (aria-hidden) unless a `label` is given.
+ */
+import { createElement } from "react";
+import { cn } from "../../utils";
+import { LUCIDE } from "./lucide-icons";
+
+export type LucideIconProps = { name: string; size?: number; strokeWidth?: number; label?: string; className?: string };
+
+export function LucideIcon({ name, size = 16, strokeWidth = 2, label, className }: LucideIconProps) {
+  const nodes = LUCIDE[name] ?? LUCIDE["circle"] ?? [];
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("inline-block shrink-0", className)}
+      aria-hidden={label ? undefined : true}
+      aria-label={label}
+      role={label ? "img" : undefined}
+      data-slot="icon"
+      data-lucide={name}
+    >
+      {nodes.map(([tag, attrs], i) => createElement(tag, { key: i, ...attrs }))}
+    </svg>
+  );
+}
diff --git a/packages/react/ui/src/primitives/lucide-icon/lucide-icons.ts b/packages/react/ui/src/primitives/lucide-icon/lucide-icons.ts
new file mode 100644
index 0000000..46edfe4
--- /dev/null
+++ b/packages/react/ui/src/primitives/lucide-icon/lucide-icons.ts
@@ -0,0 +1,283 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/assets/lucide-icons.json
+// Lucide icons (ISC license, https://lucide.dev), harvested into xgen/specs/assets/lucide-icons.json.
+export const LUCIDE: Record<string, Array<[string, Record<string, string>]>> = {
+  "accessibility": [["circle",{"cx":"16","cy":"4","r":"1"}],["path",{"d":"m18 19 1-7-6 1"}],["path",{"d":"m5 8 3-3 5.5 3-2.36 3.5"}],["path",{"d":"M4.24 14.5a5 5 0 0 0 6.88 6"}],["path",{"d":"M13.76 17.5a5 5 0 0 0-6.88-6"}]],
+  "activity": [["path",{"d":"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"}]],
+  "anchor": [["path",{"d":"M12 6v16"}],["path",{"d":"m19 13 2-1a9 9 0 0 1-18 0l2 1"}],["path",{"d":"M9 11h6"}],["circle",{"cx":"12","cy":"4","r":"2"}]],
+  "archive": [["rect",{"width":"20","height":"5","x":"2","y":"3","rx":"1"}],["path",{"d":"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"}],["path",{"d":"M10 12h4"}]],
+  "arrow-down": [["path",{"d":"M12 5v14"}],["path",{"d":"m19 12-7 7-7-7"}]],
+  "arrow-down-up": [["path",{"d":"m3 16 4 4 4-4"}],["path",{"d":"M7 20V4"}],["path",{"d":"m21 8-4-4-4 4"}],["path",{"d":"M17 4v16"}]],
+  "arrow-left": [["path",{"d":"m12 19-7-7 7-7"}],["path",{"d":"M19 12H5"}]],
+  "arrow-right": [["path",{"d":"M5 12h14"}],["path",{"d":"m12 5 7 7-7 7"}]],
+  "arrow-up": [["path",{"d":"m5 12 7-7 7 7"}],["path",{"d":"M12 19V5"}]],
+  "arrow-up-right": [["path",{"d":"M7 7h10v10"}],["path",{"d":"M7 17 17 7"}]],
+  "at-sign": [["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"}]],
+  "badge-check": [["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],
+  "badge-dollar-sign": [["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],
+  "ban": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M4.929 4.929 19.07 19.071"}]],
+  "banknote": [["rect",{"width":"20","height":"12","x":"2","y":"6","rx":"2"}],["circle",{"cx":"12","cy":"12","r":"2"}],["path",{"d":"M6 12h.01M18 12h.01"}]],
+  "bell": [["path",{"d":"M10.268 21a2 2 0 0 0 3.464 0"}],["path",{"d":"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"}]],
+  "blocks": [["path",{"d":"M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"}],["rect",{"x":"14","y":"2","width":"8","height":"8","rx":"1"}]],
+  "bold": [["path",{"d":"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"}]],
+  "bolt": [["path",{"d":"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"}],["circle",{"cx":"12","cy":"12","r":"4"}]],
+  "book-open": [["path",{"d":"M12 5v16"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}]],
+  "book-open-text": [["path",{"d":"M12 5v16"}],["path",{"d":"M16 13h2"}],["path",{"d":"M16 9h2"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}],["path",{"d":"M6 13h2"}],["path",{"d":"M6 9h2"}]],
+  "book-x": [["path",{"d":"m14.5 7.5-5 5"}],["path",{"d":"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"}],["path",{"d":"m9.5 7.5 5 5"}]],
+  "bookmark": [["path",{"d":"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"}]],
+  "bot": [["path",{"d":"M12 8V4H8"}],["rect",{"width":"16","height":"12","x":"4","y":"8","rx":"2"}],["path",{"d":"M2 14h2"}],["path",{"d":"M20 14h2"}],["path",{"d":"M15 13v2"}],["path",{"d":"M9 13v2"}]],
+  "boxes": [["path",{"d":"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"}],["path",{"d":"m7 16.5-4.74-2.85"}],["path",{"d":"m7 16.5 5-3"}],["path",{"d":"M7 16.5v5.17"}],["path",{"d":"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"}],["path",{"d":"m17 16.5-5-3"}],["path",{"d":"m17 16.5 4.74-2.85"}],["path",{"d":"M17 16.5v5.17"}],["path",{"d":"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"}],["path",{"d":"M12 8 7.26 5.15"}],["path",{"d":"m12 8 4.74-2.85"}],["path",{"d":"M12 13.5V8"}]],
+  "brain": [["path",{"d":"M12 18V5"}],["path",{"d":"M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"}],["path",{"d":"M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"}],["path",{"d":"M17.997 5.125a4 4 0 0 1 2.526 5.77"}],["path",{"d":"M18 18a4 4 0 0 0 2-7.464"}],["path",{"d":"M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"}],["path",{"d":"M6 18a4 4 0 0 1-2-7.464"}],["path",{"d":"M6.003 5.125a4 4 0 0 0-2.526 5.77"}]],
+  "briefcase": [["path",{"d":"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"}],["rect",{"width":"20","height":"14","x":"2","y":"6","rx":"2"}]],
+  "brush": [["path",{"d":"m11 10 3 3"}],["path",{"d":"M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"}],["path",{"d":"M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"}]],
+  "building": [["path",{"d":"M12 10h.01"}],["path",{"d":"M12 14h.01"}],["path",{"d":"M12 6h.01"}],["path",{"d":"M16 10h.01"}],["path",{"d":"M16 14h.01"}],["path",{"d":"M16 6h.01"}],["path",{"d":"M8 10h.01"}],["path",{"d":"M8 14h.01"}],["path",{"d":"M8 6h.01"}],["path",{"d":"M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"}],["rect",{"x":"4","y":"2","width":"16","height":"20","rx":"2"}]],
+  "calendar": [["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "calendar-days": [["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 13h.01"}],["path",{"d":"M12 13h.01"}],["path",{"d":"M16 13h.01"}],["path",{"d":"M8 17h.01"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M16 17h.01"}]],
+  "calendar-range": [["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M16 2v3"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 2v3"}],["path",{"d":"M17 13h-6"}],["path",{"d":"M13 17H7"}],["path",{"d":"M7 13h.01"}],["path",{"d":"M17 17h.01"}]],
+  "camera": [["path",{"d":"M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"}],["circle",{"cx":"12","cy":"13","r":"3"}]],
+  "chart-area": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"}]],
+  "chart-column": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M18 17V9"}],["path",{"d":"M13 17V5"}],["path",{"d":"M8 17v-3"}]],
+  "chart-line": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"m19 9-5 5-4-4-3 3"}]],
+  "chart-pie": [["path",{"d":"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"}],["path",{"d":"M21.21 15.89A10 10 0 1 1 8 2.83"}]],
+  "chart-scatter": [["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],["circle",{"cx":"18.5","cy":"5.5","r":".5","fill":"currentColor"}],["circle",{"cx":"11.5","cy":"11.5","r":".5","fill":"currentColor"}],["circle",{"cx":"7.5","cy":"16.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"14.5","r":".5","fill":"currentColor"}],["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}]],
+  "check": [["path",{"d":"M20 6 9 17l-5-5"}]],
+  "chevron-down": [["path",{"d":"m6 9 6 6 6-6"}]],
+  "chevron-left": [["path",{"d":"m15 18-6-6 6-6"}]],
+  "chevron-right": [["path",{"d":"m9 18 6-6-6-6"}]],
+  "chevron-up": [["path",{"d":"m18 15-6-6-6 6"}]],
+  "chevrons-down": [["path",{"d":"m7 6 5 5 5-5"}],["path",{"d":"m7 13 5 5 5-5"}]],
+  "chevrons-up": [["path",{"d":"m17 11-5-5-5 5"}],["path",{"d":"m17 18-5-5-5 5"}]],
+  "chevrons-up-down": [["path",{"d":"m7 15 5 5 5-5"}],["path",{"d":"m7 9 5-5 5 5"}]],
+  "circle": [["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-alert": [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"12","x2":"12","y1":"8","y2":"12"}],["line",{"x1":"12","x2":"12.01","y1":"16","y2":"16"}]],
+  "circle-check": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],
+  "circle-dollar-sign": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],
+  "circle-dot": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-play": [["path",{"d":"M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"}],["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-plus": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M8 12h8"}],["path",{"d":"M12 8v8"}]],
+  "circle-question-mark": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
+  "circle-slash": [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"9","x2":"15","y1":"15","y2":"9"}]],
+  "circle-user": [["circle",{"cx":"12","cy":"12","r":"10"}],["circle",{"cx":"12","cy":"10","r":"3"}],["path",{"d":"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"}]],
+  "circle-x": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"m9 9 6 6"}]],
+  "clipboard-check": [["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"m9 14 2 2 4-4"}]],
+  "clipboard-list": [["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"M12 11h4"}],["path",{"d":"M12 16h4"}],["path",{"d":"M8 11h.01"}],["path",{"d":"M8 16h.01"}]],
+  "clock": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 6v6l4 2"}]],
+  "cloud": [["path",{"d":"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"}]],
+  "cloud-off": [["path",{"d":"M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057"}],["path",{"d":"M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78"}],["path",{"d":"m2 2 20 20"}]],
+  "cloud-upload": [["path",{"d":"M12 13v8"}],["path",{"d":"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"}],["path",{"d":"m8 17 4-4 4 4"}]],
+  "code-xml": [["path",{"d":"m18 16 4-4-4-4"}],["path",{"d":"m6 8-4 4 4 4"}],["path",{"d":"m14.5 4-5 16"}]],
+  "columns-3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "command": [["path",{"d":"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"}]],
+  "compass": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"}]],
+  "cookie": [["path",{"d":"M11 17h.01"}],["path",{"d":"M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2"}],["path",{"d":"M12 12h.01"}],["path",{"d":"M16 16h.01"}],["path",{"d":"M16 3h.01"}],["path",{"d":"M21 4h.01"}],["path",{"d":"M21 8h.01"}],["path",{"d":"M7 14h.01"}],["path",{"d":"M9 8h.01"}]],
+  "copy": [["rect",{"width":"14","height":"14","x":"8","y":"8","rx":"2","ry":"2"}],["path",{"d":"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]],
+  "credit-card": [["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"2"}],["line",{"x1":"2","x2":"22","y1":"10","y2":"10"}],["path",{"d":"M6 14h2"}]],
+  "database": [["ellipse",{"cx":"12","cy":"5","rx":"9","ry":"3"}],["path",{"d":"M3 5V19A9 3 0 0 0 21 19V5"}],["path",{"d":"M3 12A9 3 0 0 0 21 12"}]],
+  "dollar-sign": [["line",{"x1":"12","x2":"12","y1":"2","y2":"22"}],["path",{"d":"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"}]],
+  "dot": [["circle",{"cx":"12","cy":"12","r":"1"}]],
+  "download": [["path",{"d":"M12 15V3"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["path",{"d":"m7 10 5 5 5-5"}]],
+  "ellipsis": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"19","cy":"12","r":"1"}],["circle",{"cx":"5","cy":"12","r":"1"}]],
+  "ellipsis-vertical": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"5","r":"1"}],["circle",{"cx":"12","cy":"19","r":"1"}]],
+  "external-link": [["path",{"d":"M15 3h6v6"}],["path",{"d":"M10 14 21 3"}],["path",{"d":"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]],
+  "eye": [["path",{"d":"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
+  "eye-off": [["path",{"d":"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"}],["path",{"d":"M14.084 14.158a3 3 0 0 1-4.242-4.242"}],["path",{"d":"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"}],["path",{"d":"m2 2 20 20"}]],
+  "file": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}]],
+  "file-code": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 12.5 8 15l2 2.5"}],["path",{"d":"m14 12.5 2 2.5-2 2.5"}]],
+  "file-down": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 18v-6"}],["path",{"d":"m9 15 3 3 3-3"}]],
+  "file-image": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"10","cy":"12","r":"2"}],["path",{"d":"m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"}]],
+  "file-pen": [["path",{"d":"M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"}]],
+  "file-pen-line": [["path",{"d":"M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"}],["path",{"d":"M14.487 7.858A1 1 0 0 1 14 7V2"}],["path",{"d":"M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"}],["path",{"d":"M8 18h1"}]],
+  "file-plus": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M9 15h6"}],["path",{"d":"M12 18v-6"}]],
+  "file-question-mark": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"}]],
+  "file-search": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"11.5","cy":"14.5","r":"2.5"}],["path",{"d":"M13.3 16.3 15 18"}]],
+  "file-spreadsheet": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M8 13h2"}],["path",{"d":"M14 13h2"}],["path",{"d":"M8 17h2"}],["path",{"d":"M14 17h2"}]],
+  "file-text": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 9H8"}],["path",{"d":"M16 13H8"}],["path",{"d":"M16 17H8"}]],
+  "file-up": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 12v6"}],["path",{"d":"m15 15-3-3-3 3"}]],
+  "file-video-camera": [["path",{"d":"M4 12V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"m10 17.843 3.033-1.755a.64.64 0 0 1 .967.56v4.704a.65.65 0 0 1-.967.56L10 20.157"}],["rect",{"width":"7","height":"6","x":"3","y":"16","rx":"1"}]],
+  "files": [["path",{"d":"M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"}],["path",{"d":"M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z"}],["path",{"d":"M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1"}]],
+  "film": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M7 3v18"}],["path",{"d":"M3 7.5h4"}],["path",{"d":"M3 12h18"}],["path",{"d":"M3 16.5h4"}],["path",{"d":"M17 3v18"}],["path",{"d":"M17 7.5h4"}],["path",{"d":"M17 16.5h4"}]],
+  "fingerprint-pattern": [["path",{"d":"M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"}],["path",{"d":"M14 13.12c0 2.38 0 6.38-1 8.88"}],["path",{"d":"M17.29 21.02c.12-.6.43-2.3.5-3.02"}],["path",{"d":"M2 12a10 10 0 0 1 18-6"}],["path",{"d":"M2 16h.01"}],["path",{"d":"M21.8 16c.2-2 .131-5.354 0-6"}],["path",{"d":"M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"}],["path",{"d":"M8.65 22c.21-.66.45-1.32.57-2"}],["path",{"d":"M9 6.8a6 6 0 0 1 9 5.2v2"}]],
+  "flag": [["path",{"d":"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"}]],
+  "folder": [["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
+  "folder-archive": [["circle",{"cx":"15","cy":"19","r":"2"}],["path",{"d":"M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"}],["path",{"d":"M15 11v-1"}],["path",{"d":"M15 17v-2"}]],
+  "folder-kanban": [["path",{"d":"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"}],["path",{"d":"M8 10v4"}],["path",{"d":"M12 10v2"}],["path",{"d":"M16 10v6"}]],
+  "folder-open": [["path",{"d":"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}]],
+  "folder-plus": [["path",{"d":"M12 10v6"}],["path",{"d":"M9 13h6"}],["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
+  "folder-tree": [["path",{"d":"M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M3 5a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 3v13a2 2 0 0 0 2 2h3"}]],
+  "funnel": [["path",{"d":"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"}]],
+  "gift": [["path",{"d":"M12 7v14"}],["path",{"d":"M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"}],["path",{"d":"M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"}],["rect",{"x":"3","y":"7","width":"18","height":"4","rx":"1"}]],
+  "git-compare": [["circle",{"cx":"18","cy":"18","r":"3"}],["circle",{"cx":"6","cy":"6","r":"3"}],["path",{"d":"M13 6h3a2 2 0 0 1 2 2v7"}],["path",{"d":"M11 18H8a2 2 0 0 1-2-2V9"}]],
+  "globe": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}],["path",{"d":"M2 12h20"}]],
+  "globe-lock": [["path",{"d":"M15.686 15A14.5 14.5 0 0 1 12 22a14.5 14.5 0 0 1 0-20 10 10 0 1 0 9.542 13"}],["path",{"d":"M2 12h8.5"}],["path",{"d":"M20 6V4a2 2 0 1 0-4 0v2"}],["rect",{"width":"8","height":"5","x":"14","y":"6","rx":"1"}]],
+  "graduation-cap": [["path",{"d":"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"}],["path",{"d":"M22 10v6"}],["path",{"d":"M6 12.5V16a6 3 0 0 0 12 0v-3.5"}]],
+  "grid-3x3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "grip-vertical": [["circle",{"cx":"9","cy":"12","r":"1"}],["circle",{"cx":"9","cy":"5","r":"1"}],["circle",{"cx":"9","cy":"19","r":"1"}],["circle",{"cx":"15","cy":"12","r":"1"}],["circle",{"cx":"15","cy":"5","r":"1"}],["circle",{"cx":"15","cy":"19","r":"1"}]],
+  "group": [["path",{"d":"M3 7V5c0-1.1.9-2 2-2h2"}],["path",{"d":"M17 3h2c1.1 0 2 .9 2 2v2"}],["path",{"d":"M21 17v2c0 1.1-.9 2-2 2h-2"}],["path",{"d":"M7 21H5c-1.1 0-2-.9-2-2v-2"}],["rect",{"width":"7","height":"5","x":"7","y":"7","rx":"1"}],["rect",{"width":"7","height":"5","x":"10","y":"12","rx":"1"}]],
+  "handshake": [["path",{"d":"m11 17 2 2a1 1 0 1 0 3-3"}],["path",{"d":"m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"}],["path",{"d":"m21 3 1 11h-2"}],["path",{"d":"M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"}],["path",{"d":"M3 4h8"}]],
+  "hash": [["line",{"x1":"4","x2":"20","y1":"9","y2":"9"}],["line",{"x1":"4","x2":"20","y1":"15","y2":"15"}],["line",{"x1":"10","x2":"8","y1":"3","y2":"21"}],["line",{"x1":"16","x2":"14","y1":"3","y2":"21"}]],
+  "heading": [["path",{"d":"M6 12h12"}],["path",{"d":"M6 20V4"}],["path",{"d":"M18 20V4"}]],
+  "headphones": [["path",{"d":"M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"}]],
+  "heart": [["path",{"d":"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"}]],
+  "heart-handshake": [["path",{"d":"M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"}]],
+  "hourglass": [["path",{"d":"M5 22h14"}],["path",{"d":"M5 2h14"}],["path",{"d":"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"}],["path",{"d":"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"}]],
+  "house": [["path",{"d":"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["path",{"d":"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}]],
+  "id-card": [["path",{"d":"M13 19a4 4 0 00-8 0"}],["path",{"d":"M16 10h2"}],["path",{"d":"M16 14h2"}],["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"x":"2","y":"5","width":"20","height":"14","rx":"2"}]],
+  "image": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2","ry":"2"}],["circle",{"cx":"9","cy":"9","r":"2"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]],
+  "image-off": [["line",{"x1":"2","x2":"22","y1":"2","y2":"22"}],["path",{"d":"M10.41 10.41a2 2 0 1 1-2.83-2.83"}],["line",{"x1":"13.5","x2":"6","y1":"13.5","y2":"21"}],["line",{"x1":"18","x2":"21","y1":"12","y2":"15"}],["path",{"d":"M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"}],["path",{"d":"M21 15V5a2 2 0 0 0-2-2H9"}]],
+  "image-plus": [["path",{"d":"M16 5h6"}],["path",{"d":"M19 2v6"}],["path",{"d":"M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}],["circle",{"cx":"9","cy":"9","r":"2"}]],
+  "images": [["path",{"d":"m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"}],["path",{"d":"M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"}],["circle",{"cx":"13","cy":"7","r":"1","fill":"currentColor"}],["rect",{"x":"8","y":"2","width":"14","height":"14","rx":"2"}]],
+  "inbox": [["polyline",{"points":"22 12 16 12 14 15 10 15 8 12 2 12"}],["path",{"d":"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"}]],
+  "info": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 16v-4"}],["path",{"d":"M12 8h.01"}]],
+  "italic": [["line",{"x1":"19","x2":"10","y1":"4","y2":"4"}],["line",{"x1":"14","x2":"5","y1":"20","y2":"20"}],["line",{"x1":"15","x2":"9","y1":"4","y2":"20"}]],
+  "kanban": [["path",{"d":"M5 3v14"}],["path",{"d":"M12 3v8"}],["path",{"d":"M19 3v18"}]],
+  "key": [["path",{"d":"m2 21 9.6-9.6"}],["path",{"d":"m7.5 15.5 2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19"}],["circle",{"cx":"15.5","cy":"7.5","r":"5.5"}]],
+  "key-round": [["path",{"d":"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"}],["circle",{"cx":"16.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "lamp-desk": [["path",{"d":"M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z"}],["path",{"d":"m14.207 4.793-3.414 3.414"}],["path",{"d":"M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"}],["path",{"d":"m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18"}]],
+  "landmark": [["path",{"d":"M10 18v-7"}],["path",{"d":"M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"}],["path",{"d":"M14 18v-7"}],["path",{"d":"M18 18v-7"}],["path",{"d":"M3 22h18"}],["path",{"d":"M6 18v-7"}]],
+  "languages": [["path",{"d":"m5 8 6 6"}],["path",{"d":"m4 14 6-6 2-3"}],["path",{"d":"M2 5h12"}],["path",{"d":"M7 2h1"}],["path",{"d":"m22 22-5-10-5 10"}],["path",{"d":"M14 18h6"}]],
+  "laptop": [["path",{"d":"M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z"}],["path",{"d":"M20.054 15.987H3.946"}]],
+  "layers": [["path",{"d":"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{"d":"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{"d":"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]],
+  "layout-dashboard": [["rect",{"width":"7","height":"9","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"5","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"9","x":"14","y":"12","rx":"1"}],["rect",{"width":"7","height":"5","x":"3","y":"16","rx":"1"}]],
+  "layout-grid": [["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"14","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}]],
+  "layout-list": [["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}],["path",{"d":"M14 4h7"}],["path",{"d":"M14 9h7"}],["path",{"d":"M14 15h7"}],["path",{"d":"M14 20h7"}]],
+  "layout-template": [["rect",{"width":"18","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"9","height":"7","x":"3","y":"14","rx":"1"}],["rect",{"width":"5","height":"7","x":"16","y":"14","rx":"1"}]],
+  "life-buoy": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m4.93 4.93 4.24 4.24"}],["path",{"d":"m14.83 9.17 4.24-4.24"}],["path",{"d":"m14.83 14.83 4.24 4.24"}],["path",{"d":"m9.17 14.83-4.24 4.24"}],["circle",{"cx":"12","cy":"12","r":"4"}]],
+  "lightbulb": [["path",{"d":"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"}],["path",{"d":"M9 18h6"}],["path",{"d":"M10 22h4"}]],
+  "link": [["path",{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["path",{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]],
+  "link-2": [["path",{"d":"M9 17H7A5 5 0 0 1 7 7h2"}],["path",{"d":"M15 7h2a5 5 0 1 1 0 10h-2"}],["line",{"x1":"8","x2":"16","y1":"12","y2":"12"}]],
+  "list": [["path",{"d":"M3 5h.01"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M3 19h.01"}],["path",{"d":"M8 5h13"}],["path",{"d":"M8 12h13"}],["path",{"d":"M8 19h13"}]],
+  "list-checks": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["path",{"d":"m3 7 2 2 4-4"}]],
+  "list-filter": [["path",{"d":"M2 5h20"}],["path",{"d":"M6 12h12"}],["path",{"d":"M9 19h6"}]],
+  "list-ordered": [["path",{"d":"M11 5h10"}],["path",{"d":"M11 12h10"}],["path",{"d":"M11 19h10"}],["path",{"d":"M4 4h1v5"}],["path",{"d":"M4 9h2"}],["path",{"d":"M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"}]],
+  "list-todo": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["rect",{"x":"3","y":"4","width":"6","height":"6","rx":"1"}]],
+  "list-tree": [["path",{"d":"M8 5h13"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"M3 10a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 5v12a2 2 0 0 0 2 2h3"}]],
+  "loader": [["path",{"d":"M12 2v4"}],["path",{"d":"m16.2 7.8 2.9-2.9"}],["path",{"d":"M18 12h4"}],["path",{"d":"m16.2 16.2 2.9 2.9"}],["path",{"d":"M12 18v4"}],["path",{"d":"m4.9 19.1 2.9-2.9"}],["path",{"d":"M2 12h4"}],["path",{"d":"m4.9 4.9 2.9 2.9"}]],
+  "loader-circle": [["path",{"d":"M21 12a9 9 0 1 1-6.219-8.56"}]],
+  "lock": [["rect",{"width":"18","height":"11","x":"3","y":"11","rx":"2","ry":"2"}],["path",{"d":"M7 11V7a5 5 0 0 1 10 0v4"}]],
+  "lock-keyhole": [["circle",{"cx":"12","cy":"16","r":"1"}],["rect",{"x":"3","y":"10","width":"18","height":"12","rx":"2"}],["path",{"d":"M7 10V7a5 5 0 0 1 10 0v3"}]],
+  "log-in": [["path",{"d":"m10 17 5-5-5-5"}],["path",{"d":"M15 12H3"}],["path",{"d":"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"}]],
+  "log-out": [["path",{"d":"m16 17 5-5-5-5"}],["path",{"d":"M21 12H9"}],["path",{"d":"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"}]],
+  "mail": [["path",{"d":"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"}],["rect",{"x":"2","y":"4","width":"20","height":"16","rx":"2"}]],
+  "mail-check": [["path",{"d":"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"}],["path",{"d":"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"}],["path",{"d":"m16 19 2 2 4-4"}]],
+  "mail-open": [["path",{"d":"M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"}],["path",{"d":"m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"}]],
+  "map-pin": [["path",{"d":"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}],["circle",{"cx":"12","cy":"10","r":"3"}]],
+  "megaphone": [["path",{"d":"M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"}],["path",{"d":"M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"}],["path",{"d":"M8 6v8"}]],
+  "menu": [["path",{"d":"M4 5h16"}],["path",{"d":"M4 12h16"}],["path",{"d":"M4 19h16"}]],
+  "message-circle": [["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}]],
+  "message-circle-question-mark": [["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
+  "message-square": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}]],
+  "message-square-more": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M12 11h.01"}],["path",{"d":"M16 11h.01"}],["path",{"d":"M8 11h.01"}]],
+  "message-square-quote": [["path",{"d":"M14 14a2 2 0 0 0 2-2V8h-2"}],["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M8 14a2 2 0 0 0 2-2V8H8"}]],
+  "message-square-text": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M7 11h10"}],["path",{"d":"M7 15h6"}],["path",{"d":"M7 7h8"}]],
+  "messages-square": [["path",{"d":"M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"}],["path",{"d":"M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"}]],
+  "minus": [["path",{"d":"M5 12h14"}]],
+  "monitor": [["rect",{"width":"20","height":"14","x":"2","y":"3","rx":"2"}],["line",{"x1":"8","x2":"16","y1":"21","y2":"21"}],["line",{"x1":"12","x2":"12","y1":"17","y2":"21"}]],
+  "monitor-smartphone": [["path",{"d":"M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"}],["path",{"d":"M10 19v-3.96 3.15"}],["path",{"d":"M7 19h5"}],["rect",{"width":"6","height":"10","x":"16","y":"12","rx":"2"}]],
+  "moon": [["path",{"d":"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"}]],
+  "mountain": [["path",{"d":"m8 3 4 8 5-5 5 15H2L8 3z"}]],
+  "mouse-pointer-click": [["path",{"d":"M14 4.1 12 6"}],["path",{"d":"m5.1 8-2.9-.8"}],["path",{"d":"m6 12-1.9 2"}],["path",{"d":"M7.2 2.2 8 5.1"}],["path",{"d":"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"}]],
+  "move-right": [["path",{"d":"M18 8L22 12L18 16"}],["path",{"d":"M2 12H22"}]],
+  "music": [["path",{"d":"M9 18V5l12-2v13"}],["circle",{"cx":"6","cy":"18","r":"3"}],["circle",{"cx":"18","cy":"16","r":"3"}]],
+  "newspaper": [["path",{"d":"M15 18h-5"}],["path",{"d":"M18 14h-8"}],["path",{"d":"M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"}],["rect",{"width":"8","height":"4","x":"10","y":"6","rx":"1"}]],
+  "orbit": [["path",{"d":"M20.341 6.484A10 10 0 0 1 10.266 21.85"}],["path",{"d":"M3.659 17.516A10 10 0 0 1 13.74 2.152"}],["circle",{"cx":"12","cy":"12","r":"3"}],["circle",{"cx":"19","cy":"5","r":"2"}],["circle",{"cx":"5","cy":"19","r":"2"}]],
+  "package": [["path",{"d":"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}],["path",{"d":"M12 22V12"}],["polyline",{"points":"3.29 7 12 12 20.71 7"}],["path",{"d":"m7.5 4.27 9 5.15"}]],
+  "package-check": [["path",{"d":"M12 22V12"}],["path",{"d":"m16 17 2 2 4-4"}],["path",{"d":"M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"}],["path",{"d":"M3.29 7 12 12l8.71-5"}],["path",{"d":"m7.5 4.27 8.997 5.148"}]],
+  "package-open": [["path",{"d":"M12 22v-9"}],["path",{"d":"M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"}],["path",{"d":"M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"}],["path",{"d":"M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"}]],
+  "palette": [["path",{"d":"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"}],["circle",{"cx":"13.5","cy":"6.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"10.5","r":".5","fill":"currentColor"}],["circle",{"cx":"6.5","cy":"12.5","r":".5","fill":"currentColor"}],["circle",{"cx":"8.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "panel-bottom": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 15h18"}]],
+  "panel-left": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}]],
+  "panel-left-close": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"m16 15-3-3 3-3"}]],
+  "panel-top": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "paperclip": [["path",{"d":"m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"}]],
+  "pause": [["rect",{"x":"14","y":"3","width":"5","height":"18","rx":"1"}],["rect",{"x":"5","y":"3","width":"5","height":"18","rx":"1"}]],
+  "pencil": [["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}],["path",{"d":"m15 5 4 4"}]],
+  "pencil-line": [["path",{"d":"M13 21h8"}],["path",{"d":"m15 5 4 4"}],["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}]],
+  "percent": [["line",{"x1":"19","x2":"5","y1":"5","y2":"19"}],["circle",{"cx":"6.5","cy":"6.5","r":"2.5"}],["circle",{"cx":"17.5","cy":"17.5","r":"2.5"}]],
+  "phone": [["path",{"d":"M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"}]],
+  "pilcrow": [["path",{"d":"M13 4v16"}],["path",{"d":"M17 4v16"}],["path",{"d":"M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}]],
+  "pin": [["path",{"d":"M12 17v5"}],["path",{"d":"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"}]],
+  "play": [["path",{"d":"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"}]],
+  "plug": [["path",{"d":"M12 22v-5"}],["path",{"d":"M15 8V2"}],["path",{"d":"M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"}],["path",{"d":"M9 8V2"}]],
+  "plug-zap": [["path",{"d":"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"}],["path",{"d":"m2 22 3-3"}],["path",{"d":"M7.5 13.5 10 11"}],["path",{"d":"M10.5 16.5 13 14"}],["path",{"d":"m18 3-4 4h6l-4 4"}]],
+  "plus": [["path",{"d":"M5 12h14"}],["path",{"d":"M12 5v14"}]],
+  "presentation": [["path",{"d":"M2 3h20"}],["path",{"d":"M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"}],["path",{"d":"m7 21 5-5 5 5"}]],
+  "printer": [["path",{"d":"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"}],["path",{"d":"M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"}],["rect",{"x":"6","y":"14","width":"12","height":"8","rx":"1"}]],
+  "puzzle": [["path",{"d":"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}]],
+  "qr-code": [["rect",{"width":"5","height":"5","x":"3","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"16","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"3","y":"16","rx":"1"}],["path",{"d":"M21 16h-3a2 2 0 0 0-2 2v3"}],["path",{"d":"M21 21v.01"}],["path",{"d":"M12 7v3a2 2 0 0 1-2 2H7"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M12 3h.01"}],["path",{"d":"M12 16v.01"}],["path",{"d":"M16 12h1"}],["path",{"d":"M21 12v.01"}],["path",{"d":"M12 21v-1"}]],
+  "quote": [["path",{"d":"M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}],["path",{"d":"M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}]],
+  "receipt-text": [["path",{"d":"M13 16H8"}],["path",{"d":"M14 8H8"}],["path",{"d":"M16 12H8"}],["path",{"d":"M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"}]],
+  "redo-2": [["path",{"d":"m15 14 5-5-5-5"}],["path",{"d":"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]],
+  "refresh-cw": [["path",{"d":"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}],["path",{"d":"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{"d":"M8 16H3v5"}]],
+  "rocket": [["path",{"d":"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"}],["path",{"d":"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"}],["path",{"d":"M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"}],["path",{"d":"M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"}]],
+  "rotate-ccw": [["path",{"d":"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}],["path",{"d":"M3 3v5h5"}]],
+  "rotate-cw": [["path",{"d":"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}]],
+  "rows-3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "save": [["path",{"d":"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}],["path",{"d":"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}],["path",{"d":"M7 3v4a1 1 0 0 0 1 1h7"}]],
+  "scale": [["path",{"d":"M12 3v18"}],["path",{"d":"m19 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"}],["path",{"d":"m5 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M7 21h10"}]],
+  "scan-face": [["path",{"d":"M3 7V5a2 2 0 0 1 2-2h2"}],["path",{"d":"M17 3h2a2 2 0 0 1 2 2v2"}],["path",{"d":"M21 17v2a2 2 0 0 1-2 2h-2"}],["path",{"d":"M7 21H5a2 2 0 0 1-2-2v-2"}],["path",{"d":"M8 14s1.5 2 4 2 4-2 4-2"}],["path",{"d":"M9 9h.01"}],["path",{"d":"M15 9h.01"}]],
+  "scroll-text": [["path",{"d":"M15 12h-5"}],["path",{"d":"M15 8h-5"}],["path",{"d":"M19 17V5a2 2 0 0 0-2-2H4"}],["path",{"d":"M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"}]],
+  "search": [["path",{"d":"m21 21-4.34-4.34"}],["circle",{"cx":"11","cy":"11","r":"8"}]],
+  "search-x": [["path",{"d":"m13.5 8.5-5 5"}],["path",{"d":"m8.5 8.5 5 5"}],["circle",{"cx":"11","cy":"11","r":"8"}],["path",{"d":"m21 21-4.3-4.3"}]],
+  "send": [["path",{"d":"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"}],["path",{"d":"m21.854 2.147-10.94 10.939"}]],
+  "settings": [["path",{"d":"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
+  "settings-2": [["path",{"d":"M14 17H5"}],["path",{"d":"M19 7h-9"}],["circle",{"cx":"17","cy":"17","r":"3"}],["circle",{"cx":"7","cy":"7","r":"3"}]],
+  "share": [["path",{"d":"M12 2v13"}],["path",{"d":"m16 6-4-4-4 4"}],["path",{"d":"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"}]],
+  "share-2": [["circle",{"cx":"18","cy":"5","r":"3"}],["circle",{"cx":"6","cy":"12","r":"3"}],["circle",{"cx":"18","cy":"19","r":"3"}],["line",{"x1":"8.59","x2":"15.42","y1":"13.51","y2":"17.49"}],["line",{"x1":"15.41","x2":"8.59","y1":"6.51","y2":"10.49"}]],
+  "shield": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}]],
+  "shield-alert": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"M12 8v4"}],["path",{"d":"M12 16h.01"}]],
+  "shield-ban": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m4.243 5.21 14.39 12.472"}]],
+  "shield-check": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m9 12 2 2 4-4"}]],
+  "shield-x": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m14.5 9.5-5 5"}],["path",{"d":"m9.5 9.5 5 5"}]],
+  "shopping-bag": [["path",{"d":"M16 10a4 4 0 0 1-8 0"}],["path",{"d":"M3.103 6.034h17.794"}],["path",{"d":"M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"}]],
+  "shopping-cart": [["path",{"d":"m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"}],["path",{"d":"M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"}],["circle",{"cx":"18","cy":"20","r":"2"}],["circle",{"cx":"8","cy":"20","r":"2"}]],
+  "sliders-horizontal": [["path",{"d":"M10 5H3"}],["path",{"d":"M12 19H3"}],["path",{"d":"M14 3v4"}],["path",{"d":"M16 17v4"}],["path",{"d":"M21 12h-9"}],["path",{"d":"M21 19h-5"}],["path",{"d":"M21 5h-7"}],["path",{"d":"M8 10v4"}],["path",{"d":"M8 12H3"}]],
+  "sliders-vertical": [["path",{"d":"M10 8h4"}],["path",{"d":"M12 21v-9"}],["path",{"d":"M12 8V3"}],["path",{"d":"M17 16h4"}],["path",{"d":"M19 12V3"}],["path",{"d":"M19 21v-5"}],["path",{"d":"M3 14h4"}],["path",{"d":"M5 10V3"}],["path",{"d":"M5 21v-7"}]],
+  "smartphone": [["rect",{"width":"14","height":"20","x":"5","y":"2","rx":"2","ry":"2"}],["path",{"d":"M12 18h.01"}]],
+  "sparkles": [["path",{"d":"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"}],["path",{"d":"M20 2v4"}],["path",{"d":"M22 4h-4"}],["circle",{"cx":"4","cy":"20","r":"2"}]],
+  "square": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}]],
+  "square-pen": [["path",{"d":"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}],["path",{"d":"M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"}]],
+  "star": [["path",{"d":"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"}]],
+  "star-half": [["path",{"d":"M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"}]],
+  "store": [["path",{"d":"M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"}],["path",{"d":"M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"}],["path",{"d":"M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"}]],
+  "sun": [["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M12 2v2"}],["path",{"d":"M12 20v2"}],["path",{"d":"m4.93 4.93 1.41 1.41"}],["path",{"d":"m17.66 17.66 1.41 1.41"}],["path",{"d":"M2 12h2"}],["path",{"d":"M20 12h2"}],["path",{"d":"m6.34 17.66-1.41 1.41"}],["path",{"d":"m19.07 4.93-1.41 1.41"}]],
+  "table": [["path",{"d":"M12 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}]],
+  "table-properties": [["path",{"d":"M15 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "tablet": [["rect",{"width":"16","height":"20","x":"4","y":"2","rx":"2","ry":"2"}],["line",{"x1":"12","x2":"12.01","y1":"18","y2":"18"}]],
+  "tag": [["path",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "tags": [["path",{"d":"M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"}],["path",{"d":"M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"}],["circle",{"cx":"10.5","cy":"6.5","r":".5","fill":"currentColor"}]],
+  "terminal": [["path",{"d":"M12 19h8"}],["path",{"d":"m4 17 6-6-6-6"}]],
+  "text-align-center": [["path",{"d":"M21 5H3"}],["path",{"d":"M17 12H7"}],["path",{"d":"M19 19H5"}]],
+  "text-align-end": [["path",{"d":"M21 5H3"}],["path",{"d":"M21 12H9"}],["path",{"d":"M21 19H7"}]],
+  "text-align-start": [["path",{"d":"M21 5H3"}],["path",{"d":"M15 12H3"}],["path",{"d":"M17 19H3"}]],
+  "text-cursor-input": [["path",{"d":"M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"}],["path",{"d":"M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"}],["path",{"d":"M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"}],["path",{"d":"M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"}],["path",{"d":"M9 6v12"}]],
+  "thumbs-down": [["path",{"d":"M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"}],["path",{"d":"M17 14V2"}]],
+  "thumbs-up": [["path",{"d":"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"}],["path",{"d":"M7 10v12"}]],
+  "ticket-percent": [["path",{"d":"M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"}],["path",{"d":"M9 9h.01"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"M15 15h.01"}]],
+  "timer": [["line",{"x1":"10","x2":"14","y1":"2","y2":"2"}],["line",{"x1":"12","x2":"15","y1":"14","y2":"11"}],["circle",{"cx":"12","cy":"14","r":"8"}]],
+  "toggle-left": [["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"7"}]],
+  "trash": [["path",{"d":"M10 11v6"}],["path",{"d":"M14 11v6"}],["path",{"d":"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{"d":"M3 6h18"}],["path",{"d":"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]],
+  "trees": [["path",{"d":"M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"}],["path",{"d":"M7 16v6"}],["path",{"d":"M13 19v3"}],["path",{"d":"M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"}]],
+  "trending-down": [["path",{"d":"M16 17h6v-6"}],["path",{"d":"m22 17-8.5-8.5-5 5L2 7"}]],
+  "trending-up": [["path",{"d":"M16 7h6v6"}],["path",{"d":"m22 7-8.5 8.5-5-5L2 17"}]],
+  "triangle-alert": [["path",{"d":"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}],["path",{"d":"M12 9v4"}],["path",{"d":"M12 17h.01"}]],
+  "truck": [["path",{"d":"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}],["path",{"d":"M15 18H9"}],["path",{"d":"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"}],["circle",{"cx":"17","cy":"18","r":"2"}],["circle",{"cx":"7","cy":"18","r":"2"}]],
+  "type": [["path",{"d":"M12 4v16"}],["path",{"d":"M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"}],["path",{"d":"M9 20h6"}]],
+  "undo-2": [["path",{"d":"M9 14 4 9l5-5"}],["path",{"d":"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]],
+  "upload": [["path",{"d":"M12 3v12"}],["path",{"d":"m17 8-5-5-5 5"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}]],
+  "user": [["path",{"d":"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}],["circle",{"cx":"12","cy":"7","r":"4"}]],
+  "user-check": [["path",{"d":"m16 11 2 2 4-4"}],["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "user-cog": [["path",{"d":"M10 15H6a4 4 0 0 0-4 4v2"}],["path",{"d":"m14.305 16.53.923-.382"}],["path",{"d":"m15.228 13.852-.923-.383"}],["path",{"d":"m16.852 12.228-.383-.923"}],["path",{"d":"m16.852 17.772-.383.924"}],["path",{"d":"m19.148 12.228.383-.923"}],["path",{"d":"m19.53 18.696-.382-.924"}],["path",{"d":"m20.772 13.852.924-.383"}],["path",{"d":"m20.772 16.148.924.383"}],["circle",{"cx":"18","cy":"15","r":"3"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "user-pen": [["path",{"d":"M11.5 15H7a4 4 0 0 0-4 4v2"}],["path",{"d":"M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"}],["circle",{"cx":"10","cy":"7","r":"4"}]],
+  "user-plus": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"19","x2":"19","y1":"8","y2":"14"}],["line",{"x1":"22","x2":"16","y1":"11","y2":"11"}]],
+  "user-round-check": [["path",{"d":"M2 21a8 8 0 0 1 13.292-6"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"m16 19 2 2 4-4"}]],
+  "user-x": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"17","x2":"22","y1":"8","y2":"13"}],["line",{"x1":"22","x2":"17","y1":"8","y2":"13"}]],
+  "users": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["path",{"d":"M16 3.128a4 4 0 0 1 0 7.744"}],["path",{"d":"M22 21v-2a4 4 0 0 0-3-3.87"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "users-round": [["path",{"d":"M18 21a8 8 0 0 0-16 0"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"}]],
+  "video": [["path",{"d":"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"}],["rect",{"x":"2","y":"6","width":"14","height":"12","rx":"2"}]],
+  "wallet": [["path",{"d":"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"}],["path",{"d":"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"}]],
+  "wand-sparkles": [["path",{"d":"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"}],["path",{"d":"m14 7 3 3"}],["path",{"d":"M5 6v4"}],["path",{"d":"M19 14v4"}],["path",{"d":"M10 2v2"}],["path",{"d":"M7 8H3"}],["path",{"d":"M21 16h-4"}],["path",{"d":"M11 3H9"}]],
+  "webhook": [["path",{"d":"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"}],["path",{"d":"m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"}],["path",{"d":"m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"}]],
+  "wrench": [["path",{"d":"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"}]],
+  "x": [["path",{"d":"M18 6 6 18"}],["path",{"d":"m6 6 12 12"}]],
+  "zap": [["path",{"d":"M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"}]],
+};
diff --git a/packages/react/ui/src/primitives/radio/radio.tsx b/packages/react/ui/src/primitives/radio/radio.tsx
new file mode 100644
index 0000000..eeb5b47
--- /dev/null
+++ b/packages/react/ui/src/primitives/radio/radio.tsx
@@ -0,0 +1,63 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/radio.json
+/**
+ * Radio is a native single-choice control within a named group.
+ */
+
+import { forwardRef, type ReactNode, type InputHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Radio: the classes of each value of each prop (shadcn/cva style). */
+export const radioVariants = variants({
+  base:
+    "shrink-0 appearance-none rounded-full bg-background inset-ring inset-ring-input checked:bg-primary " +
+    "checked:inset-ring-primary radio-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      default: "size-5 [--dot:10px]",
+      sm: "size-4 [--dot:8px]",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type RadioVariant = VariantKey<typeof radioVariants, "variant">;
+export type RadioSize = VariantKey<typeof radioVariants, "size">;
+
+/**
+ * Radio renders input[type=radio] with shared Name for grouping.
+ */
+export type RadioProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  | "className" | "children" | "variant" | "size" | "checked" | "disabled" | "required"
+> & {
+  variant?: RadioVariant;
+  size?: RadioSize;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+};
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
+  { variant, size, checked, disabled, required, className, ...rest },
+  ref
+) {
+  const cls = cn(radioVariants({ size, variant }), className);
+  return (
+    <input
+      ref={ref}
+      type="radio"
+      className={cls || undefined}
+      checked={checked || undefined}
+      disabled={disabled || undefined}
+      required={required || undefined}
+      {...rest}
+    />
+  );
+});
+Radio.displayName = "Radio";
diff --git a/packages/react/ui/src/primitives/range/range.tsx b/packages/react/ui/src/primitives/range/range.tsx
new file mode 100644
index 0000000..da7ff5f
--- /dev/null
+++ b/packages/react/ui/src/primitives/range/range.tsx
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/range.json
+/**
+ * Range renders a styled input[type=range] (single thumb slider). The value is controlled from outside: Value
+ * in, an input event out (canary used a bindable prop).
+ */
+
+import { forwardRef, type ReactNode, type InputHTMLAttributes } from "react";
+import { cn, variants } from "../../utils";
+import { isSetNum, orUndef } from "../../utils/expr";
+
+/** Range: the classes of each value of each prop (shadcn/cva style). */
+export const rangeVariants = variants({
+  base:
+    "h-5 w-full cursor-pointer appearance-none bg-transparent accent-primary disabled:cursor-not-allowed " +
+    "disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded " +
+    "[&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 " +
+    "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded " +
+    "[&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded " +
+    "[&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded " +
+    "[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * Range renders input type=range.
+ */
+export type RangeProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  | "className" | "children" | "min" | "max" | "step" | "disabled" | "aria-label"
+> & {
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  "aria-label"?: string;
+  className?: string;
+};
+
+export const Range = forwardRef<HTMLInputElement, RangeProps>(function Range(
+  { min, max, step, disabled, "aria-label": ariaLabel, className, ...rest },
+  ref
+) {
+  const cls = cn(rangeVariants(), className);
+  return (
+    <input
+      ref={ref}
+      type="range"
+      className={cls || undefined}
+      min={(isSetNum(min) ? String(min ?? 0) : "0")}
+      max={(isSetNum(max) ? String(max ?? 0) : "100")}
+      step={(isSetNum(step) ? String(step ?? 0) : "1")}
+      disabled={disabled || undefined}
+      aria-label={orUndef(ariaLabel)}
+      {...rest}
+    />
+  );
+});
+Range.displayName = "Range";
diff --git a/packages/react/ui/src/primitives/select/opt-group.tsx b/packages/react/ui/src/primitives/select/opt-group.tsx
new file mode 100644
index 0000000..36a522a
--- /dev/null
+++ b/packages/react/ui/src/primitives/select/opt-group.tsx
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/select.json
+/**
+ * OptGroup: one part of Select (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type OptgroupHTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * OptGroup renders a native optgroup around option children.
+ */
+export type OptGroupProps = Omit<
+  OptgroupHTMLAttributes<HTMLOptGroupElement>,
+  | "className" | "children" | "disabled"
+> & {
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const OptGroup = forwardRef<HTMLOptGroupElement, OptGroupProps>(function OptGroup(
+  { disabled, className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <optgroup ref={ref} className={cls || undefined} disabled={disabled || undefined} {...rest}>
+      {children}
+    </optgroup>
+  );
+});
+OptGroup.displayName = "OptGroup";
diff --git a/packages/react/ui/src/primitives/select/select-option.tsx b/packages/react/ui/src/primitives/select/select-option.tsx
new file mode 100644
index 0000000..f2eb8af
--- /dev/null
+++ b/packages/react/ui/src/primitives/select/select-option.tsx
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/select.json
+/**
+ * SelectOption: one part of Select (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type OptionHTMLAttributes } from "react";
+
+/**
+ * SelectOption renders an option for custom Select children.
+ */
+export type SelectOptionProps = Omit<
+  OptionHTMLAttributes<HTMLOptionElement>,
+  | "className" | "children" | "selected" | "disabled"
+> & {
+  selected?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const SelectOption = forwardRef<HTMLOptionElement, SelectOptionProps>(function SelectOption(
+  { selected, disabled, className, children, ...rest },
+  ref
+) {
+  return (
+    <option ref={ref} selected={selected || undefined} disabled={disabled || undefined} {...rest}>
+      {children}
+    </option>
+  );
+});
+SelectOption.displayName = "SelectOption";
diff --git a/packages/react/ui/src/primitives/select/select.tsx b/packages/react/ui/src/primitives/select/select.tsx
new file mode 100644
index 0000000..7a88ae1
--- /dev/null
+++ b/packages/react/ui/src/primitives/select/select.tsx
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/select.json
+/**
+ * Select is a native dropdown built from Option items.
+ */
+
+import { forwardRef, type ReactNode, type SelectHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { eqStr } from "../../utils/expr";
+
+/** Select: the classes of each value of each prop (shadcn/cva style). */
+export const selectVariants = variants({
+  base:
+    "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+    "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+    "focus-visible:inset-ring-ring rounded",
+  variants: {
+    size: {
+      sm: "h-8 px-3 text-sm",
+      default: "h-10 px-3 text-sm",
+      lg: "h-12 px-4 text-base",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted inset-ring-transparent",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type SelectOptionItem = {
+  value?: string;
+  label?: string;
+};
+
+export type SelectVariant = VariantKey<typeof selectVariants, "variant">;
+export type SelectSize = VariantKey<typeof selectVariants, "size">;
+
+/**
+ * Select renders option children from the Options list plus manual children.
+ */
+export type SelectProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  | "className" | "children" | "variant" | "size" | "value" | "disabled" | "required" | "options"
+> & {
+  variant?: SelectVariant;
+  size?: SelectSize;
+  value?: string;
+  disabled?: boolean;
+  required?: boolean;
+  options?: SelectOptionItem[];
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { variant, size, value, disabled, required, options, className, children, ...rest },
+  ref
+) {
+  const cls = cn(selectVariants({ size, variant }), className);
+  return (
+    <select
+      ref={ref}
+      className={cls || undefined}
+      disabled={disabled || undefined}
+      required={required || undefined}
+      {...rest}
+    >
+      {(options ?? []).map((item, index) => (
+        <option key={index} value={(item.value) ?? ""} selected={eqStr(item.value, value) || undefined}>
+          {item.label}
+        </option>
+      ))}
+      {children}
+    </select>
+  );
+});
+Select.displayName = "Select";
diff --git a/packages/react/ui/src/primitives/separator/separator.tsx b/packages/react/ui/src/primitives/separator/separator.tsx
new file mode 100644
index 0000000..0c5eca4
--- /dev/null
+++ b/packages/react/ui/src/primitives/separator/separator.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/separator.json
+/**
+ * Separator renders a semantic or decorative hr.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { eqStr } from "../../utils/expr";
+
+/** Separator: the classes of each value of each prop (shadcn/cva style). */
+export const separatorVariants = variants({
+  base: "shrink-0 border-0 bg-border",
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "h-full w-px",
+    },
+    variant: {
+      default: "",
+      spaced: "my-6",
+    },
+  },
+  defaultVariants: { orientation: "horizontal", variant: "default" },
+});
+
+export type SeparatorVariant = VariantKey<typeof separatorVariants, "variant">;
+export type SeparatorOrientation = VariantKey<typeof separatorVariants, "orientation">;
+
+/**
+ * Separator renders hr with optional decorative semantics.
+ */
+export type SeparatorProps = Omit<
+  HTMLAttributes<HTMLHRElement>,
+  | "className" | "children" | "variant" | "orientation" | "decorative"
+> & {
+  variant?: SeparatorVariant;
+  orientation?: SeparatorOrientation;
+  decorative?: boolean;
+  className?: string;
+};
+
+export const Separator = forwardRef<HTMLHRElement, SeparatorProps>(function Separator(
+  { variant, orientation, decorative, className, ...rest },
+  ref
+) {
+  const cls = cn(separatorVariants({ orientation, variant }), className);
+  return (
+    <hr
+      ref={ref}
+      className={cls || undefined}
+      role={decorative ? "presentation" : undefined}
+      aria-hidden={decorative ? "true" : undefined}
+      aria-orientation={eqStr(orientation, "vertical") ? "vertical" : undefined}
+      {...rest}
+    />
+  );
+});
+Separator.displayName = "Separator";
diff --git a/packages/react/ui/src/primitives/sheet/sheet-close.tsx b/packages/react/ui/src/primitives/sheet/sheet-close.tsx
new file mode 100644
index 0000000..fab337f
--- /dev/null
+++ b/packages/react/ui/src/primitives/sheet/sheet-close.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/sheet.json
+/**
+ * SheetClose: one part of Sheet (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type ButtonHTMLAttributes } from "react";
+import { cn, type VariantKey } from "../../utils";
+import { defaultIfEmpty } from "../../utils/expr";
+import { sheettriggerVariants } from "./sheet-trigger";
+
+export type SheetCloseVariant = VariantKey<typeof sheettriggerVariants, "variant">;
+export type SheetCloseSize = VariantKey<typeof sheettriggerVariants, "size">;
+
+/**
+ * SheetClose renders the close button (Lucide x) inside the panel.
+ */
+export type SheetCloseProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  | "className" | "children" | "variant" | "size" | "aria-label"
+> & {
+  variant?: SheetCloseVariant;
+  size?: SheetCloseSize;
+  "aria-label"?: string;
+  className?: string;
+};
+
+export const SheetClose = forwardRef<HTMLButtonElement, SheetCloseProps>(function SheetClose(
+  { variant, size, "aria-label": ariaLabel, className, ...rest },
+  ref
+) {
+  const cls = cn(sheettriggerVariants({ variant, size }), className);
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cls || undefined}
+      data-ui8kit="sheet-close"
+      aria-label={defaultIfEmpty(ariaLabel, "Close menu")}
+      {...rest}
+    >
+      <svg
+        className="size-5"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+  );
+});
+SheetClose.displayName = "SheetClose";
diff --git a/packages/react/ui/src/primitives/sheet/sheet-trigger.tsx b/packages/react/ui/src/primitives/sheet/sheet-trigger.tsx
new file mode 100644
index 0000000..2dbbeb9
--- /dev/null
+++ b/packages/react/ui/src/primitives/sheet/sheet-trigger.tsx
@@ -0,0 +1,99 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/sheet.json
+/**
+ * SheetTrigger: one part of Sheet (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type ButtonHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty, orUndef } from "../../utils/expr";
+
+/** SheetTrigger: the classes of each value of each prop (shadcn/cva style). */
+export const sheettriggerVariants = variants({
+  base:
+    "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  variants: {
+    variant: {
+      default: "bg-muted text-foreground hover:bg-accent",
+      ghost: "bg-transparent text-foreground hover:bg-muted",
+      contrast: "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      current: "bg-transparent text-current hover:bg-current/10",
+    },
+    size: {
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type SheetTriggerVariant = VariantKey<typeof sheettriggerVariants, "variant">;
+export type SheetTriggerSize = VariantKey<typeof sheettriggerVariants, "size">;
+
+/**
+ * SheetTrigger renders the menu button (aria-expanded, aria-controls, aria-haspopup=dialog) with Lucide menu/x
+ * icons.
+ */
+export type SheetTriggerProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  | "className" | "children" | "variant" | "size" | "controls" | "aria-label"
+> & {
+  variant?: SheetTriggerVariant;
+  size?: SheetTriggerSize;
+  controls?: string;
+  "aria-label"?: string;
+  className?: string;
+};
+
+export const SheetTrigger = forwardRef<HTMLButtonElement, SheetTriggerProps>(function SheetTrigger(
+  { variant, size, controls, "aria-label": ariaLabel, className, ...rest },
+  ref
+) {
+  const cls = cn(sheettriggerVariants({ variant, size }), className);
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cls || undefined}
+      data-ui8kit="sheet-trigger"
+      aria-controls={orUndef(controls)}
+      aria-expanded="false"
+      aria-haspopup="dialog"
+      aria-label={defaultIfEmpty(ariaLabel, "Open menu")}
+      {...rest}
+    >
+      <svg
+        className="block size-5 in-aria-expanded:hidden"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <line x1="4" x2="20" y1="12" y2="12" />
+        <line x1="4" x2="20" y1="6" y2="6" />
+        <line x1="4" x2="20" y1="18" y2="18" />
+      </svg>
+      <svg
+        className="hidden size-5 in-aria-expanded:block"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+  );
+});
+SheetTrigger.displayName = "SheetTrigger";
diff --git a/packages/react/ui/src/primitives/sheet/sheet.tsx b/packages/react/ui/src/primitives/sheet/sheet.tsx
new file mode 100644
index 0000000..550b302
--- /dev/null
+++ b/packages/react/ui/src/primitives/sheet/sheet.tsx
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/sheet.json
+/**
+ * Sheet is a side drawer dialog with a trigger (Lucide menu/x) and a close button. Behavior:
+ * behaviors/ui8kit.js.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty, orUndef } from "../../utils/expr";
+
+/** Sheet: the classes of each value of each prop (shadcn/cva style). */
+export const sheetVariants = variants({
+  base: "fixed inset-0 z-50 flex",
+  variants: {
+    side: {
+      left: "flex-row justify-start",
+      right: "flex-row justify-end",
+    },
+  },
+  defaultVariants: { side: "right" },
+});
+
+export type SheetSide = VariantKey<typeof sheetVariants, "side">;
+
+/**
+ * Sheet renders the hidden dialog root: overlay + panel (children). ID is required for the trigger's
+ * aria-controls.
+ */
+export type SheetProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  | "className" | "children" | "side" | "id" | "aria-label" | "open"
+> & {
+  side?: SheetSide;
+  id?: string;
+  "aria-label"?: string;
+  open?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Sheet = forwardRef<HTMLDivElement, SheetProps>(function Sheet(
+  { side, id: iD, "aria-label": ariaLabel, open, className, children, ...rest },
+  ref
+) {
+  const cls = cn(sheetVariants({ side }), className);
+  return (
+    <div
+      ref={ref}
+      className={cls || undefined}
+      id={orUndef(iD)}
+      role="dialog"
+      aria-modal="true"
+      aria-label={defaultIfEmpty(ariaLabel, "Menu")}
+      data-ui8kit="sheet"
+      hidden={!(open) || undefined}
+      {...rest}
+    >
+      <div className="absolute inset-0 bg-foreground/40" data-ui8kit="sheet-overlay" />
+      <div
+        className="relative flex h-full w-80 max-w-full flex-col gap-6 overflow-auto bg-background p-6 text-foreground shadow-lg"
+      >
+        {children}
+      </div>
+    </div>
+  );
+});
+Sheet.displayName = "Sheet";
diff --git a/packages/react/ui/src/primitives/skeleton/skeleton.tsx b/packages/react/ui/src/primitives/skeleton/skeleton.tsx
new file mode 100644
index 0000000..010f19f
--- /dev/null
+++ b/packages/react/ui/src/primitives/skeleton/skeleton.tsx
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/skeleton.json
+/**
+ * Skeleton renders a pulsing placeholder box (loading state). It is decorative: aria-hidden; the loading state
+ * is announced by the container (aria-busy).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Skeleton: the classes of each value of each prop (shadcn/cva style). */
+export const skeletonVariants = variants({
+  base: "animate-pulse bg-muted motion-reduce:animate-none rounded",
+  variants: {
+    shape: {
+      line: "h-4 w-full",
+      block: "h-20 w-full",
+    },
+  },
+  defaultVariants: { shape: "line" },
+});
+
+export type SkeletonShape = VariantKey<typeof skeletonVariants, "shape">;
+
+/**
+ * Skeleton renders a decorative placeholder.
+ */
+export type SkeletonProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  | "className" | "children" | "shape"
+> & {
+  shape?: SkeletonShape;
+  className?: string;
+};
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
+  { shape, className, ...rest },
+  ref
+) {
+  const cls = cn(skeletonVariants({ shape }), className);
+  return (
+    <div ref={ref} className={cls || undefined} aria-hidden="true" data-slot="skeleton" {...rest} />
+  );
+});
+Skeleton.displayName = "Skeleton";
diff --git a/runtime/react/slot.tsx b/packages/react/ui/src/primitives/slot/slot.tsx
similarity index 97%
rename from runtime/react/slot.tsx
rename to packages/react/ui/src/primitives/slot/slot.tsx
index 821f2df..cd6129c 100644
--- a/runtime/react/slot.tsx
+++ b/packages/react/ui/src/primitives/slot/slot.tsx
@@ -1,3 +1,5 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/react/assets/slot.tsx
 import {
   Children,
   cloneElement,
diff --git a/packages/react/ui/src/primitives/stack/stack.tsx b/packages/react/ui/src/primitives/stack/stack.tsx
new file mode 100644
index 0000000..74d04d8
--- /dev/null
+++ b/packages/react/ui/src/primitives/stack/stack.tsx
@@ -0,0 +1,84 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/stack.json
+/**
+ * Stack arranges children vertically in a flex column.
+ * Default layout primitive for spacing sections and form fields.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+import { Slot } from "../slot/slot";
+
+/** Stack: the classes of each value of each prop (shadcn/cva style). */
+export const stackVariants = variants({
+  base: "flex flex-col",
+  variants: {
+    gap: {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      auto: "",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline",
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+    },
+  },
+  defaultVariants: { gap: "auto", align: "start", justify: "start" },
+});
+
+export type StackGap = VariantKey<typeof stackVariants, "gap">;
+export type StackAlign = VariantKey<typeof stackVariants, "align">;
+export type StackJustify = VariantKey<typeof stackVariants, "justify">;
+
+/**
+ * Stack renders a vertical flex container.
+ */
+export type StackProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  | "className" | "children" | "gap" | "align" | "justify" | "tag"
+> & {
+  gap?: StackGap;
+  align?: StackAlign;
+  justify?: StackJustify;
+  tag?: string;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Stack = forwardRef<HTMLElement, StackProps>(function Stack(
+  { gap, align, justify, tag, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(stackVariants({ gap, align, justify }), className);
+  const resolvedTagValue = resolveTag(tag, "div", TagGroup.Stack);
+  const Tag = resolvedTagValue as ElementType;
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+Stack.displayName = "Stack";
diff --git a/packages/react/ui/src/primitives/switch/switch.tsx b/packages/react/ui/src/primitives/switch/switch.tsx
new file mode 100644
index 0000000..859d563
--- /dev/null
+++ b/packages/react/ui/src/primitives/switch/switch.tsx
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/switch.json
+/**
+ * Switch is a toggle control (checkbox with switch ARIA semantics).
+ * Use for on/off settings; wireframe uses native checkbox styling.
+ */
+
+import { forwardRef, type ReactNode, type InputHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { boolStr } from "../../utils/expr";
+
+/** Switch: the classes of each value of each prop (shadcn/cva style). */
+export const switchVariants = variants({
+  base:
+    "relative shrink-0 appearance-none bg-muted inset-ring inset-ring-input checked:bg-primary " +
+    "checked:inset-ring-primary switch-knob disabled:cursor-not-allowed disabled:opacity-50 rounded-full",
+  variants: {
+    size: {
+      default: "h-5 w-9 [--knob:12px] [--pad:4px]",
+      sm: "h-4 w-8 [--knob:12px] [--pad:2px]",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type SwitchSize = VariantKey<typeof switchVariants, "size">;
+
+/**
+ * Switch renders input[type=checkbox] with switch role attrs.
+ */
+export type SwitchProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  | "className" | "children" | "size" | "checked" | "disabled" | "required"
+> & {
+  size?: SwitchSize;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+};
+
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
+  { size, checked, disabled, required, className, ...rest },
+  ref
+) {
+  const cls = cn(switchVariants({ size }), className);
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      className={cls || undefined}
+      checked={checked || undefined}
+      disabled={disabled || undefined}
+      required={required || undefined}
+      role="switch"
+      aria-checked={boolStr(checked)}
+      {...rest}
+    />
+  );
+});
+Switch.displayName = "Switch";
diff --git a/packages/react/ui/src/primitives/table/table-body.tsx b/packages/react/ui/src/primitives/table/table-body.tsx
new file mode 100644
index 0000000..859f070
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table-body.tsx
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableBody: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * TableBody renders the tbody section.
+ */
+export type TableBodyProps = Omit<
+  HTMLAttributes<HTMLTableSectionElement>,
+  | "className" | "children"
+> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(function TableBody(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <tbody ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </tbody>
+  );
+});
+TableBody.displayName = "TableBody";
diff --git a/packages/react/ui/src/primitives/table/table-caption.tsx b/packages/react/ui/src/primitives/table/table-caption.tsx
new file mode 100644
index 0000000..37c1539
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table-caption.tsx
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableCaption: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * TableCaption renders the table caption.
+ */
+export type TableCaptionProps = Omit<
+  HTMLAttributes<HTMLTableCaptionElement>,
+  | "className" | "children"
+> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(function TableCaption(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <caption ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </caption>
+  );
+});
+TableCaption.displayName = "TableCaption";
diff --git a/packages/react/ui/src/primitives/table/table-cell.tsx b/packages/react/ui/src/primitives/table/table-cell.tsx
new file mode 100644
index 0000000..85acb55
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table-cell.tsx
@@ -0,0 +1,50 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableCell: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type TdHTMLAttributes } from "react";
+import { cn, variants } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+/** TableCell: the classes of each value of each prop (shadcn/cva style). */
+export const tableCellVariants = variants({
+  base: "px-2 py-2 align-middle",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * TableCell renders td with colspan and rowspan.
+ */
+export type TableCellProps = Omit<
+  TdHTMLAttributes<HTMLTableCellElement>,
+  | "className" | "children" | "scope" | "colSpan" | "rowSpan" | "abbr"
+> & {
+  scope?: string;
+  colSpan?: number;
+  rowSpan?: number;
+  abbr?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(function TableCell(
+  { scope, colSpan, rowSpan, abbr, className, children, ...rest },
+  ref
+) {
+  const cls = cn(tableCellVariants(), className);
+  return (
+    <td
+      ref={ref}
+      className={cls || undefined}
+      colSpan={isSetNum(colSpan) ? colSpan : undefined}
+      rowSpan={isSetNum(rowSpan) ? rowSpan : undefined}
+      {...rest}
+    >
+      {children}
+    </td>
+  );
+});
+TableCell.displayName = "TableCell";
diff --git a/packages/react/ui/src/primitives/table/table-col-group.tsx b/packages/react/ui/src/primitives/table/table-col-group.tsx
new file mode 100644
index 0000000..f0635d0
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table-col-group.tsx
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableColGroup: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type ColgroupHTMLAttributes } from "react";
+import { cn } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+/**
+ * TableColGroup renders colgroup with optional span.
+ */
+export type TableColGroupProps = Omit<
+  ColgroupHTMLAttributes<HTMLTableColElement>,
+  | "className" | "children" | "span"
+> & {
+  span?: number;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const TableColGroup = forwardRef<HTMLTableColElement, TableColGroupProps>(function TableColGroup(
+  { span, className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <colgroup ref={ref} className={cls || undefined} span={isSetNum(span) ? span : undefined} {...rest}>
+      {children}
+    </colgroup>
+  );
+});
+TableColGroup.displayName = "TableColGroup";
diff --git a/packages/react/ui/src/primitives/table/table-col.tsx b/packages/react/ui/src/primitives/table/table-col.tsx
new file mode 100644
index 0000000..72457df
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table-col.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableCol: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type ColHTMLAttributes } from "react";
+import { cn } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+/**
+ * TableCol renders a single col definition.
+ */
+export type TableColProps = Omit<
+  ColHTMLAttributes<HTMLTableColElement>,
+  | "className" | "children" | "span"
+> & {
+  span?: number;
+  className?: string;
+};
+
+export const TableCol = forwardRef<HTMLTableColElement, TableColProps>(function TableCol(
+  { span, className, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <col ref={ref} className={cls || undefined} span={isSetNum(span) ? span : undefined} {...rest} />
+  );
+});
+TableCol.displayName = "TableCol";
diff --git a/packages/react/ui/src/primitives/table/table-foot.tsx b/packages/react/ui/src/primitives/table/table-foot.tsx
new file mode 100644
index 0000000..10a0678
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table-foot.tsx
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableFoot: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * TableFoot renders the tfoot section.
+ */
+export type TableFootProps = Omit<
+  HTMLAttributes<HTMLTableSectionElement>,
+  | "className" | "children"
+> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(function TableFoot(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <tfoot ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </tfoot>
+  );
+});
+TableFoot.displayName = "TableFoot";
diff --git a/packages/react/ui/src/primitives/table/table-head-cell.tsx b/packages/react/ui/src/primitives/table/table-head-cell.tsx
new file mode 100644
index 0000000..29b255d
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table-head-cell.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableHeadCell: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type ThHTMLAttributes } from "react";
+import { cn, variants } from "../../utils";
+import { isSetNum, oneOfOrLower, orUndef } from "../../utils/expr";
+
+/** TableHeadCell: the classes of each value of each prop (shadcn/cva style). */
+export const tableHeadCellVariants = variants({
+  base: "px-2 py-2 text-left align-middle font-semibold",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * TableHeadCell renders th with optional scope and abbr.
+ */
+export type TableHeadCellProps = Omit<
+  ThHTMLAttributes<HTMLTableCellElement>,
+  | "className" | "children" | "scope" | "colSpan" | "rowSpan" | "abbr"
+> & {
+  scope?: string;
+  colSpan?: number;
+  rowSpan?: number;
+  abbr?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const TableHeadCell = forwardRef<HTMLTableCellElement, TableHeadCellProps>(function TableHeadCell(
+  { scope, colSpan, rowSpan, abbr, className, children, ...rest },
+  ref
+) {
+  const cls = cn(tableHeadCellVariants(), className);
+  return (
+    <th
+      ref={ref}
+      className={cls || undefined}
+      scope={orUndef(oneOfOrLower(scope, "", "col", "colgroup", "row", "rowgroup"))}
+      abbr={orUndef(abbr)}
+      colSpan={isSetNum(colSpan) ? colSpan : undefined}
+      rowSpan={isSetNum(rowSpan) ? rowSpan : undefined}
+      {...rest}
+    >
+      {children}
+    </th>
+  );
+});
+TableHeadCell.displayName = "TableHeadCell";
diff --git a/packages/react/ui/src/primitives/table/table-head.tsx b/packages/react/ui/src/primitives/table/table-head.tsx
new file mode 100644
index 0000000..43d3b14
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table-head.tsx
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableHead: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * TableHead renders the thead section.
+ */
+export type TableHeadProps = Omit<
+  HTMLAttributes<HTMLTableSectionElement>,
+  | "className" | "children"
+> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(function TableHead(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <thead ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </thead>
+  );
+});
+TableHead.displayName = "TableHead";
diff --git a/packages/react/ui/src/primitives/table/table-row.tsx b/packages/react/ui/src/primitives/table/table-row.tsx
new file mode 100644
index 0000000..9a02359
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table-row.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableRow: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * TableRow renders one tr row.
+ */
+export type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <tr ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </tr>
+  );
+});
+TableRow.displayName = "TableRow";
diff --git a/packages/react/ui/src/primitives/table/table.tsx b/packages/react/ui/src/primitives/table/table.tsx
new file mode 100644
index 0000000..2e95623
--- /dev/null
+++ b/packages/react/ui/src/primitives/table/table.tsx
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * Table composes semantic table, caption, sections, rows, and cells.
+ * Supports scope, colspan, and headers attrs on head cells.
+ */
+
+import { forwardRef, type ReactNode, type TableHTMLAttributes } from "react";
+import { cn } from "../../utils";
+
+/**
+ * Table renders the root table element.
+ */
+export type TableProps = Omit<TableHTMLAttributes<HTMLTableElement>, "className" | "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
+  { className, children, ...rest },
+  ref
+) {
+  const cls = cn(className);
+  return (
+    <table ref={ref} className={cls || undefined} {...rest}>
+      {children}
+    </table>
+  );
+});
+Table.displayName = "Table";
diff --git a/packages/react/ui/src/primitives/text/text.tsx b/packages/react/ui/src/primitives/text/text.tsx
new file mode 100644
index 0000000..55ab441
--- /dev/null
+++ b/packages/react/ui/src/primitives/text/text.tsx
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/text.json
+/**
+ * Text renders body copy: a paragraph by default; Tag picks another text element (blockquote, figcaption,
+ * address, pre, or an
+ * inline element). Title (as 1–6) is for headings.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+import { Slot } from "../slot/slot";
+
+/** Text: the classes of each value of each prop (shadcn/cva style). */
+export const textVariants = variants({
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      inherit: "",
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      inherit: "",
+    },
+  },
+  defaultVariants: { size: "inherit", weight: "inherit" },
+});
+
+export type TextSize = VariantKey<typeof textVariants, "size">;
+export type TextWeight = VariantKey<typeof textVariants, "weight">;
+
+/**
+ * Text renders a p element with body copy classes, or the block or inline text element of `Tag`.
+ */
+export type TextProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  | "className" | "children" | "size" | "weight" | "tag"
+> & {
+  size?: TextSize;
+  weight?: TextWeight;
+  tag?: string;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Text = forwardRef<HTMLElement, TextProps>(function Text(
+  { size, weight, tag, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(textVariants({ size, weight }), className);
+  const resolvedTagValue = resolveTag(tag, "p", TagGroup.Text);
+  const Tag = resolvedTagValue as ElementType;
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+Text.displayName = "Text";
diff --git a/packages/react/ui/src/primitives/textarea/textarea.tsx b/packages/react/ui/src/primitives/textarea/textarea.tsx
new file mode 100644
index 0000000..f65bcff
--- /dev/null
+++ b/packages/react/ui/src/primitives/textarea/textarea.tsx
@@ -0,0 +1,67 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/textarea.json
+/**
+ * Textarea is a multi-line native text field with row sizing.
+ */
+
+import { forwardRef, type ReactNode, type TextareaHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+/** Textarea: the classes of each value of each prop (shadcn/cva style). */
+export const textareaVariants = variants({
+  base:
+    "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+    "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+    "focus-visible:inset-ring-ring rounded",
+  variants: {
+    size: {
+      sm: "min-h-16 px-3 py-2 text-base md:text-sm",
+      default: "min-h-20 px-3 py-2 text-base md:text-sm",
+      lg: "min-h-24 px-4 py-3 text-base",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted inset-ring-transparent",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type TextareaVariant = VariantKey<typeof textareaVariants, "variant">;
+export type TextareaSize = VariantKey<typeof textareaVariants, "size">;
+
+/**
+ * Textarea renders a styled multi-line form control.
+ */
+export type TextareaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  | "className" | "children" | "variant" | "size" | "value" | "rows" | "disabled" | "required"
+> & {
+  variant?: TextareaVariant;
+  size?: TextareaSize;
+  value?: string;
+  rows?: number;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+};
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { variant, size, value, rows, disabled, required, className, ...rest },
+  ref
+) {
+  const cls = cn(textareaVariants({ size, variant }), className);
+  return (
+    <textarea
+      ref={ref}
+      className={cls || undefined}
+      rows={(isSetNum(rows) ? rows : 4)}
+      disabled={disabled || undefined}
+      required={required || undefined}
+      {...rest}
+      defaultValue={(value) ?? ""}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
diff --git a/packages/react/ui/src/primitives/themetoggle/themetoggle.tsx b/packages/react/ui/src/primitives/themetoggle/themetoggle.tsx
new file mode 100644
index 0000000..4926f95
--- /dev/null
+++ b/packages/react/ui/src/primitives/themetoggle/themetoggle.tsx
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/themetoggle.json
+/**
+ * ThemeToggle switches between light and dark color schemes (button with aria-pressed). Behavior:
+ * data-ui8kit="theme-toggle" in behaviors/ui8kit.js.
+ */
+
+import { forwardRef, type ReactNode, type ButtonHTMLAttributes } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty } from "../../utils/expr";
+
+/** ThemeToggle: the classes of each value of each prop (shadcn/cva style). */
+export const themetoggleVariants = variants({
+  base:
+    "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  variants: {
+    variant: {
+      default: "bg-muted text-foreground hover:bg-accent",
+      ghost: "bg-transparent text-foreground hover:bg-muted",
+      contrast: "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      current: "bg-transparent text-current hover:bg-current/10",
+    },
+    size: {
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type ThemeToggleVariant = VariantKey<typeof themetoggleVariants, "variant">;
+export type ThemeToggleSize = VariantKey<typeof themetoggleVariants, "size">;
+
+/**
+ * ThemeToggle renders a button with Lucide sun/moon icons; aria-pressed reflects dark mode.
+ */
+export type ThemeToggleProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  | "className" | "children" | "variant" | "size" | "aria-label"
+> & {
+  variant?: ThemeToggleVariant;
+  size?: ThemeToggleSize;
+  "aria-label"?: string;
+  className?: string;
+};
+
+export const ThemeToggle = forwardRef<HTMLButtonElement, ThemeToggleProps>(function ThemeToggle(
+  { variant, size, "aria-label": ariaLabel, className, ...rest },
+  ref
+) {
+  const cls = cn(themetoggleVariants({ variant, size }), className);
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cls || undefined}
+      data-ui8kit="theme-toggle"
+      aria-label={defaultIfEmpty(ariaLabel, "Dark mode")}
+      aria-pressed="false"
+      {...rest}
+    >
+      <svg
+        className="hidden size-5 dark:block"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2v2" />
+        <path d="M12 20v2" />
+        <path d="m4.93 4.93 1.41 1.41" />
+        <path d="m17.66 17.66 1.41 1.41" />
+        <path d="M2 12h2" />
+        <path d="M20 12h2" />
+        <path d="m6.34 17.66-1.41 1.41" />
+        <path d="m19.07 4.93-1.41 1.41" />
+      </svg>
+      <svg
+        className="block size-5 dark:hidden"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+      </svg>
+    </button>
+  );
+});
+ThemeToggle.displayName = "ThemeToggle";
diff --git a/packages/react/ui/src/primitives/title/title.tsx b/packages/react/ui/src/primitives/title/title.tsx
new file mode 100644
index 0000000..ba11347
--- /dev/null
+++ b/packages/react/ui/src/primitives/title/title.tsx
@@ -0,0 +1,77 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/title.json
+/**
+ * Title renders a heading (h1–h6) from As (1–6). Defaults to h2 when As is 0
+ * or out of range.
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes, type ElementType, type Ref } from "react";
+import { cn, variants, type VariantKey } from "../../utils";
+import { titleTag } from "../../utils/expr";
+import { Slot } from "../slot/slot";
+
+/** Title: the classes of each value of each prop (shadcn/cva style). */
+export const titleVariants = variants({
+  base: "text-foreground",
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      inherit: "",
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+    },
+  },
+  defaultVariants: { size: "inherit", weight: "semibold" },
+});
+
+export type TitleSize = VariantKey<typeof titleVariants, "size">;
+export type TitleWeight = VariantKey<typeof titleVariants, "weight">;
+
+/**
+ * Title renders the resolved heading element.
+ */
+export type TitleProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  | "className" | "children" | "size" | "weight" | "as"
+> & {
+  size?: TitleSize;
+  weight?: TitleWeight;
+  as?: 1 | 2 | 3 | 4 | 5 | 6;
+  className?: string;
+  children?: ReactNode;
+  asChild?: boolean;
+};
+
+export const Title = forwardRef<HTMLElement, TitleProps>(function Title(
+  { size, weight, as, className, children, asChild, ...rest },
+  ref
+) {
+  const cls = cn(titleVariants({ size, weight }), className);
+  const resolvedTagValue = titleTag(as);
+  const Tag = resolvedTagValue as ElementType;
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={cls} {...rest}>
+        {children}
+      </Slot>
+    );
+  }
+  return (
+    <Tag ref={ref as Ref<HTMLElement>} className={cls || undefined} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+Title.displayName = "Title";
diff --git a/packages/react/ui/src/styles/index.css b/packages/react/ui/src/styles/index.css
new file mode 100644
index 0000000..cb56ae7
--- /dev/null
+++ b/packages/react/ui/src/styles/index.css
@@ -0,0 +1,7 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/generator/src/plan.ts (uiPackage) */
+/* Entry of the styles: theme tokens and the kit. @source makes Tailwind v4 scan this package for class names. */
+@import "./theme.css";
+@import "./kit.css";
+
+@source "../";
diff --git a/packages/react/ui/src/styles/kit.css b/packages/react/ui/src/styles/kit.css
new file mode 100644
index 0000000..f18dcc2
--- /dev/null
+++ b/packages/react/ui/src/styles/kit.css
@@ -0,0 +1,95 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/core/assets/styles/kit.css */
+/* Kit-wide CSS: base layer, input glyph utilities, focus ring. Colors and the one corner token (--radius) come from theme.css (shadcn neutral);
+   shadows: only floating layers have one (shadow-md, shadow-lg), set in their specs; nothing here draws one. */
+@layer base {
+  html, body { margin: 0; background: var(--color-background); color: var(--color-foreground); }
+  body { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; overflow-x: hidden; }
+  button { cursor: pointer; }
+  html { -webkit-text-size-adjust: 100%; color-scheme: light; }
+}
+
+/* the box of a checkbox: its corner is the theme radius scaled to the 16-20px box (0.4 x 10px = 4px), so it never reads as a radio */
+@utility checkbox-glyph {
+  display: inline-grid; place-content: center; border-radius: calc(var(--radius) * 0.4);
+  &::before { content: ""; width: 8px; height: 6px; opacity: 0; background: currentColor;
+    clip-path: polygon(0 55%, 14% 40%, 38% 64%, 86% 0, 100% 15%, 38% 95%); }
+  &:checked { color: var(--color-primary-foreground); }
+  &:checked::before { opacity: 1; }
+}
+/* a number field without the browser spin buttons (NumberField draws its own minus and plus) */
+@utility number-bare {
+  appearance: textfield; -moz-appearance: textfield;
+  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+}
+@utility radio-glyph {
+  display: inline-grid; place-content: center;
+  &::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 9999px; background: var(--color-primary-foreground); opacity: 0; }
+  &:checked::before { opacity: 1; }
+}
+@utility switch-knob {
+  &::before { content: ""; position: absolute; top: 50%; left: var(--pad); width: var(--knob); height: var(--knob); border-radius: 9999px;
+    background: var(--color-background); translate: 0 -50%; transition: left .15s; }
+  &:checked::before { left: calc(100% - var(--pad) - var(--knob)); }
+}
+@utility progress-bar {
+  &::-webkit-progress-bar { background: transparent; }
+  &::-webkit-progress-value { background: var(--bar); border-radius: var(--radius); }
+  &::-moz-progress-bar { background: var(--bar); border-radius: var(--radius); }
+  &::-webkit-meter-bar { background: transparent; border: 0; }
+  &::-webkit-meter-optimum-value { background: var(--bar); }
+}
+
+/* Focus ring sits above utility shadows. Keyboard only. The 4px halo is gray unless the element sets a ring colour
+   (shadcn style, e.g. focus-visible:ring-destructive/20 on the destructive variants); --tw-ring-color does not inherit. */
+:where(a, button, input, select, textarea, summary, [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="option"], [role="treeitem"], [role="radio"], [role="switch"], [tabindex]):focus-visible {
+  outline: none;
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), 0 0 0 4px var(--tw-ring-color, rgb(128 128 128 / 0.15)), var(--tw-shadow, 0 0 #0000);
+}
+[data-slot="prompt-input"]:focus-within, [data-slot="smartbox"]:focus-within { box-shadow: 0 0 0 4px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-border); }
+[data-slot="prompt-input"] textarea:focus-visible, [data-slot="smartbox"] input:focus-visible { box-shadow: none; }
+[data-slot="file-tree-item"]:focus-visible, [data-slot="editor-tab"]:focus-visible, [data-slot="icon-tab"]:focus-visible, [data-slot="dropdown-item"]:focus-visible {
+  box-shadow: inset 0 0 0 2px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-muted-foreground);
+}
+:where([data-screen]) :focus:not(:focus-visible) { outline: none; }
+::selection { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
+
+/* The disclosure indicator: the Lucide chevron-down drawn in the text colour; the Summary brick turns it over when its
+   details open (group-open:rotate-180), so an accordion needs no script. */
+[data-slot="summary-indicator"] {
+  display: inline-block;
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+/* Per-element tokens (UI8KIT-2.0 §11): badge, button, card, alert, media. An unset token falls back to the value of the utility class the
+   rule matches (p-6, px-4 h-10, ...), stated explicitly: a revert-layer fallback inside var() is not supported by every
+   browser (there the property became unset: buttons and badges lost their padding and height).
+   A skin or a scope (a wrapper, the magazine specimen) sets only the ones it wants.
+   Radius:  --radius-badge|button|card|alert|media   (unset: var(--radius); the badge unset: the pill). Only elements that carry plain `rounded` follow it.
+   Shadow:  --shadow-card|alert|media                (unset: the spec's own: none). A full box-shadow layer, e.g. var(--shadow-sm) or 0 0 #0000.
+   Density: data-density-badge|button|card|alert = compact | default | comfortable, on the element or any ancestor, sets --pad-*:
+            card 16/24/32 (padding of a default card), alert inline 8/8/16 with --min-alert 24/32/40,
+            button inline 12/16/20 and height 32/40/48 (default size), badge inline 8/12/16 and height 20/24/28 (default size).
+            4px steps only inside controls (button, badge); card and alert stay on the 8px step. */
+[data-slot="button"].rounded { border-radius: var(--radius-button, var(--radius)); }
+[data-slot="card"].rounded { border-radius: var(--radius-card, var(--radius)); }
+[data-slot="alert"].rounded { border-radius: var(--radius-alert, var(--radius)); }
+[data-slot="media-frame"].rounded { border-radius: var(--radius-media, var(--radius)); }
+[data-slot="badge"].rounded-full { border-radius: var(--radius-badge, calc(infinity * 1px)); }
+[data-slot="card"] { --tw-shadow: var(--shadow-card, 0 0 #0000); }
+[data-slot="alert"] { --tw-shadow: var(--shadow-alert, 0 0 #0000); }
+[data-slot="media-frame"] { --tw-shadow: var(--shadow-media, 0 0 #0000); }
+[data-slot="card"].p-6 { padding: var(--pad-card, calc(var(--spacing) * 6)); }
+[data-slot="alert"].px-2 { padding-inline: var(--pad-alert, calc(var(--spacing) * 2)); }
+[data-slot="alert"].min-h-8 { min-height: var(--min-alert, calc(var(--spacing) * 8)); }
+[data-slot="button"].px-4.h-10 { padding-inline: var(--pad-button, calc(var(--spacing) * 4)); height: var(--h-button, calc(var(--spacing) * 10)); }
+[data-slot="badge"].px-3.h-6 { padding-inline: var(--pad-badge, calc(var(--spacing) * 3)); height: var(--h-badge, calc(var(--spacing) * 6)); }
+[data-density-card="compact"] { --pad-card: 16px; }
+[data-density-card="comfortable"] { --pad-card: 32px; }
+[data-density-alert="compact"] { --pad-alert: 8px; --min-alert: 24px; }
+[data-density-alert="comfortable"] { --pad-alert: 16px; --min-alert: 40px; }
+[data-density-button="compact"] { --pad-button: 12px; --h-button: 32px; }
+[data-density-button="comfortable"] { --pad-button: 20px; --h-button: 48px; }
+[data-density-badge="compact"] { --pad-badge: 8px; --h-badge: 20px; }
+[data-density-badge="comfortable"] { --pad-badge: 16px; --h-badge: 28px; }
diff --git a/packages/react/ui/src/styles/theme.css b/packages/react/ui/src/styles/theme.css
new file mode 100644
index 0000000..4b05103
--- /dev/null
+++ b/packages/react/ui/src/styles/theme.css
@@ -0,0 +1,131 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/core/assets/styles/theme.css */
+@import "tailwindcss";
+
+/* shadcn/ui neutral theme (Tailwind v4, written as hsl() for old browsers; same colours as the oklch values published at https://ui.shadcn.com/docs/theming
+   ("Default Theme CSS", base color neutral). Dark mode: the .dark class or data-theme="dark" on an ancestor. */
+@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
+
+/* The one corner token. Plain `rounded` reads the bare --radius theme key, so every corner of the kit follows it
+   (shadcn keeps --radius in :root; here it sits in @theme so that `rounded` resolves to it; same value, 0.625rem). */
+@theme {
+  --radius: 0.625rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 4%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 4%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 4%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 43.5%);
+  --accent: hsl(0 0% 96%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0.6 88.4% 52.5%);
+  --border: hsl(0 0% 90%);
+  --input: hsl(0 0% 90%);
+  --ring: hsl(0 0% 63%);
+  --chart-1: hsl(18 100% 48%);
+  --chart-2: hsl(174.7 100% 29.5%);
+  --chart-3: hsl(196 72% 23%);
+  --chart-4: hsl(43.6 100% 50%);
+  --chart-5: hsl(36.3 100% 49.7%);
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(0 0% 4%);
+  --sidebar-primary: hsl(0 0% 9%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 96%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(0 0% 90%);
+  --sidebar-ring: hsl(0 0% 63%);
+}
+
+:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 4%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 90%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 15%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(0 0% 15%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(356.1 62.4% 52%);
+  --border: hsl(0 0% 100% / 10%);
+  --input: hsl(0 0% 100% / 15%);
+  --ring: hsl(0 0% 45%);
+  --chart-1: hsl(225.3 84.1% 49%);
+  --chart-2: hsl(160 100% 37%);
+  --chart-3: hsl(36.3 100% 49.7%);
+  --chart-4: hsl(273.3 100% 63.8%);
+  --chart-5: hsl(345 100% 56%);
+  --sidebar: hsl(0 0% 9%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(225.3 84.1% 49%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 15%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 100% / 10%);
+  --sidebar-ring: hsl(0 0% 45%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/packages/react/ui/src/utils/a11y/dismiss.ts b/packages/react/ui/src/utils/a11y/dismiss.ts
new file mode 100644
index 0000000..0f672de
--- /dev/null
+++ b/packages/react/ui/src/utils/a11y/dismiss.ts
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/dismiss.ts
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+export type DismissReason = "escape" | "outside";
+const stack: object[] = [];   // topmost dismissable layer handles Escape first (menu inside off-canvas sidebar, …)
+
+/** Escape and pointer-down outside the node call onDismiss. Returns the cleanup. */
+export function dismissable(node: HTMLElement, opts: () => { onDismiss: (reason: DismissReason) => void; ignore?: () => (Element | null | undefined)[]; outside?: boolean }): () => void {
+  {
+    const layer = {};
+    stack.push(layer);
+    const { onDismiss, ignore = () => [], outside = true } = opts();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || e.defaultPrevented || stack[stack.length - 1] !== layer) return;
+      e.preventDefault(); e.stopPropagation();
+      onDismiss("escape");
+    };
+    const onDown = (e: PointerEvent) => {
+      if (!outside || stack[stack.length - 1] !== layer) return;
+      const t = e.target as Node | null;
+      if (!t || node.contains(t) || ignore().some((el) => el?.contains(t))) return;
+      onDismiss("outside");
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onDown, true);
+      const i = stack.indexOf(layer); if (i >= 0) stack.splice(i, 1);
+    };
+  }
+}
diff --git a/packages/react/ui/src/utils/a11y/focus-trap.ts b/packages/react/ui/src/utils/a11y/focus-trap.ts
new file mode 100644
index 0000000..33606fa
--- /dev/null
+++ b/packages/react/ui/src/utils/a11y/focus-trap.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/focus-trap.ts
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+import { focusables } from "./focusable";
+
+/** Tab/Shift+Tab cycle inside `node`; on cleanup focus returns to the element focused before. */
+export function trapFocus(node: HTMLElement): () => void {
+  const previous = document.activeElement as HTMLElement | null;
+  if (!node.contains(previous)) queueMicrotask(() => focusables(node)[0]?.focus());
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key !== "Tab") return;
+    const items = focusables(node);
+    if (!items.length) { e.preventDefault(); return; }
+    const first = items[0], last = items[items.length - 1], cur = document.activeElement;
+    if (e.shiftKey && (cur === first || !node.contains(cur))) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && (cur === last || !node.contains(cur))) { e.preventDefault(); first.focus(); }
+  };
+  node.addEventListener("keydown", onKey);
+  return () => { node.removeEventListener("keydown", onKey); /* after the page is no longer inert */ requestAnimationFrame(() => { if (previous?.isConnected) previous.focus(); }); };
+}
diff --git a/packages/react/ui/src/utils/a11y/focusable.ts b/packages/react/ui/src/utils/a11y/focusable.ts
new file mode 100644
index 0000000..6b2897a
--- /dev/null
+++ b/packages/react/ui/src/utils/a11y/focusable.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/focusable.ts
+// Small headless helpers shared by the interactive primitives (menus, dialogs, tabs, off-canvas sidebar).
+export const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+/** visible, tabbable descendants of `root` in DOM order */
+export function focusables(root: HTMLElement): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((el) => !el.closest("[inert]") && el.getClientRects().length > 0 && getComputedStyle(el).visibility !== "hidden");
+}
diff --git a/packages/react/ui/src/utils/a11y/index.ts b/packages/react/ui/src/utils/a11y/index.ts
new file mode 100644
index 0000000..3487525
--- /dev/null
+++ b/packages/react/ui/src/utils/a11y/index.ts
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/index.ts
+export { FOCUSABLE, focusables } from "./focusable";
+export { moveFocus, typeahead, type RovingOptions } from "./roving";
+export { lockScroll } from "./scroll-lock";
+export { dismissable, type DismissReason } from "./dismiss";
+export { trapFocus } from "./focus-trap";
diff --git a/packages/react/ui/src/utils/a11y/roving.ts b/packages/react/ui/src/utils/a11y/roving.ts
new file mode 100644
index 0000000..b9f5246
--- /dev/null
+++ b/packages/react/ui/src/utils/a11y/roving.ts
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/roving.ts
+// Arrow-key navigation over a list of focusable items (menus, listboxes, tab lists, trees).
+export type RovingOptions = { orientation?: "vertical" | "horizontal" | "both"; loop?: boolean; activate?: boolean };
+
+/** Handles ArrowUp/Down/Left/Right, Home, End. Returns true when the key was consumed. */
+export function moveFocus(e: KeyboardEvent, items: HTMLElement[], { orientation = "vertical", loop = true, activate = false }: RovingOptions = {}): boolean {
+  if (!items.length || e.altKey || e.ctrlKey || e.metaKey) return false;
+  const prev = orientation !== "horizontal" ? ["ArrowUp"] : [];
+  const next = orientation !== "horizontal" ? ["ArrowDown"] : [];
+  if (orientation !== "vertical") { prev.push("ArrowLeft"); next.push("ArrowRight"); }
+  const cur = items.indexOf(document.activeElement as HTMLElement);
+  let idx = -1;
+  if (next.includes(e.key)) idx = cur < 0 ? 0 : cur + 1;
+  else if (prev.includes(e.key)) idx = cur < 0 ? items.length - 1 : cur - 1;
+  else if (e.key === "Home") idx = 0;
+  else if (e.key === "End") idx = items.length - 1;
+  else return false;
+  if (idx >= items.length) idx = loop ? 0 : items.length - 1;
+  if (idx < 0) idx = loop ? items.length - 1 : 0;
+  e.preventDefault();
+  const el = items[idx];
+  el.focus();
+  if (activate) el.click();
+  return true;
+}
+
+/** type-ahead: focus the next item whose text starts with the typed characters (reset after 600 ms) */
+export function typeahead() {
+  let buf = "", t: ReturnType<typeof setTimeout> | undefined;
+  return (e: KeyboardEvent, items: HTMLElement[]): boolean => {
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey || e.key === " ") return false;
+    buf += e.key.toLowerCase();
+    clearTimeout(t); t = setTimeout(() => (buf = ""), 600);
+    const start = Math.max(0, items.indexOf(document.activeElement as HTMLElement) + (buf.length === 1 ? 1 : 0));
+    const ordered = [...items.slice(start), ...items.slice(0, start)];
+    const hit = ordered.find((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(buf));
+    if (hit) { hit.focus(); e.preventDefault(); return true; }
+    return false;
+  };
+}
diff --git a/packages/react/ui/src/utils/a11y/scroll-lock.ts b/packages/react/ui/src/utils/a11y/scroll-lock.ts
new file mode 100644
index 0000000..f0bbd14
--- /dev/null
+++ b/packages/react/ui/src/utils/a11y/scroll-lock.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/scroll-lock.ts
+// Reference-counted page scroll lock (off-canvas sidebar, modal dialog). Compensates the scrollbar width on desktop.
+let count = 0;
+let saved = { overflow: "", paddingRight: "" };
+
+export function lockScroll(): () => void {
+  const root = document.documentElement;
+  if (count++ === 0) {
+    const sw = window.innerWidth - root.clientWidth;
+    saved = { overflow: root.style.overflow, paddingRight: root.style.paddingRight };
+    root.style.overflow = "hidden";
+    if (sw > 0) root.style.paddingRight = `${sw}px`;
+    root.setAttribute("data-scroll-locked", "");
+  }
+  let released = false;
+  return () => {
+    if (released) return; released = true;
+    if (--count === 0) {
+      root.style.overflow = saved.overflow; root.style.paddingRight = saved.paddingRight;
+      root.removeAttribute("data-scroll-locked");
+    }
+  };
+}
diff --git a/packages/react/ui/src/utils/cn.ts b/packages/react/ui/src/utils/cn.ts
new file mode 100644
index 0000000..0d98839
--- /dev/null
+++ b/packages/react/ui/src/utils/cn.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/cn.ts
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge class values. Caller-supplied classes win over recipe classes. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/react/ui/src/utils/env.ts b/packages/react/ui/src/utils/env.ts
new file mode 100644
index 0000000..762068d
--- /dev/null
+++ b/packages/react/ui/src/utils/env.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/env.ts
+export function isDevEnv(): boolean {
+  try {
+    const env = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
+    if (env && typeof env.DEV === "boolean") return env.DEV;
+  } catch {
+    // import.meta may be unavailable in some contexts
+  }
+  return false;
+}
diff --git a/packages/react/ui/src/utils/expr.ts b/packages/react/ui/src/utils/expr.ts
new file mode 100644
index 0000000..10e671e
--- /dev/null
+++ b/packages/react/ui/src/utils/expr.ts
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/expr.ts
+/**
+ * Tiny attribute-logic helpers used by generated components. One
+ * implementation per runtime family keeps every default-resolution decision
+ * table byte-identical across React, Svelte, and Vue (mirrors `expr.go`).
+ */
+
+export const trimStr = (v: string | number | null | undefined): string =>
+  v === null || v === undefined ? "" : String(v).trim();
+
+export const isSetStr = (v: string | null | undefined): boolean => trimStr(v) !== "";
+
+export const isSetNum = (v: number | null | undefined): boolean => (v ?? 0) > 0;
+
+/**
+ * `trim(v) === "" ? fallback : trim(v)` — DefaultInputType-style defaults.
+ * Generic so enum-typed props keep their literal union through the default.
+ */
+export const defaultIfEmpty = <T extends string>(v: T | null | undefined, fallback: T): T => {
+  const t = trimStr(v) as T;
+  return t === "" ? fallback : t;
+};
+
+/** Whitelist: returns `trim(v)` when in `allowed`, otherwise `fallback`. */
+export const oneOfOr = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v) as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+export const oneOfOrLower = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v).toLowerCase() as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+/** Decision table: `mapping[trim(v)] ?? fallback`. */
+export const mapOr = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v)] ?? fallback;
+
+export const mapOrLower = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v).toLowerCase()] ?? fallback;
+
+/** Integer decision table: `mapping[v] ?? fallback`. */
+export const intMapOr = <T extends string>(
+  v: number | null | undefined,
+  mapping: Record<number, T>,
+  fallback: T
+): T => mapping[v ?? 0] ?? fallback;
+
+/** Null-safe string equality (both sides normalized to ""). */
+export const eqStr = (a: string | null | undefined, b: string | null | undefined): boolean =>
+  (a ?? "") === (b ?? "");
+
+/** ARIA state stringification: always "true"/"false", never omitted. */
+export const boolStr = (v: boolean | null | undefined): "true" | "false" =>
+  v ? "true" : "false";
+
+/** Concatenation of trimmed parts (icon `Prefix + Name`). */
+export const concatTrim = (...parts: (string | null | undefined)[]): string =>
+  parts.map(trimStr).join("");
+
+/** Omit-if-empty attribute value: `""` → `undefined` so the attr is dropped. */
+export const orUndef = (v: string | null | undefined): string | undefined => {
+  const t = trimStr(v);
+  return t === "" ? undefined : String(v);
+};
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** h1–h6 from a heading level; 0/undefined/out-of-range default to h2. */
+export const titleTag = (order: HeadingLevel | number | null | undefined): string => {
+  switch (order) {
+    case 1:
+      return "h1";
+    case 3:
+      return "h3";
+    case 4:
+      return "h4";
+    case 5:
+      return "h5";
+    case 6:
+      return "h6";
+    default:
+      return "h2";
+  }
+};
diff --git a/packages/react/ui/src/utils/format.ts b/packages/react/ui/src/utils/format.ts
new file mode 100644
index 0000000..05a0355
--- /dev/null
+++ b/packages/react/ui/src/utils/format.ts
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/format.ts
+// Text and number formatting shared by every generated organism and screen. Pure functions, no runtime dependency.
+
+/** fills {0}, {1}... of a content template */
+export function tpl(template: string | undefined, ...values: Array<string | number | undefined>): string {
+  return (template ?? "").replace(/\{(\d+)\}/g, (_m, i: string) => String(values[Number(i)] ?? ""));
+}
+
+const nf = new Intl.NumberFormat("en-US");
+export function fmtNumber(n: number): string {
+  return nf.format(n);
+}
+
+/** digits of the minor unit (ISO 4217): cents for most currencies, none for JPY and KRW */
+export function minorDigits(currency: string): number {
+  return currency === "JPY" || currency === "KRW" ? 0 : 2;
+}
+
+const moneyCache = new Map<string, Intl.NumberFormat>();
+/** money in integer minor units (Codex v0.4: 1250 = 12.50 USD) -> "$12.50"; whole amounts drop the fraction: 1499_00 -> "$1,499" */
+export function fmtMoney(minor: number, currency: string): string {
+  const d = minorDigits(currency);
+  const cents = Math.round(minor);
+  const frac = d > 0 && cents % 10 ** d !== 0 ? d : 0;
+  const key = `${currency}:${frac}`;
+  let f = moneyCache.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: frac, maximumFractionDigits: frac });
+    moneyCache.set(key, f);
+  }
+  return f.format(cents / 10 ** d);
+}
+
+/** a content word by key (the status of a record -> its label); the key itself when the dictionary has no entry */
+export function at(dict: Record<string, string> | undefined, key: string): string {
+  return dict?.[key] ?? key;
+}
+
+/** the page numbers a pager shows: the first, the last and the neighbours of the current page; null is a gap */
+export function pageWindow(page: number, pages: number): (number | null)[] {
+  const keep = new Set([1, pages, page - 1, page, page + 1].filter((n) => n >= 1 && n <= pages));
+  const out: (number | null)[] = [];
+  let prev = 0;
+  for (const n of [...keep].sort((a, b) => a - b)) {
+    if (n - prev > 1) out.push(null);
+    out.push(n);
+    prev = n;
+  }
+  return out;
+}
+
+/** a responsive column variant of Grid capped by the number of items, so no column stays empty: ("1-4", 3) -> "1-3", ("2-6", 4) -> "2-4" */
+export function fitCols(cols: string, n: number): string {
+  const m = /^(\d+)-(\d+)$/.exec(cols);
+  if (!m) return cols;
+  const lo = Number(m[1]), hi = Number(m[2]);
+  if (n >= hi) return cols;
+  const top = Math.max(lo, n);
+  const known = ["1-2", "1-3", "1-4", "2-3", "2-4", "2-6", "3-6"];
+  for (let h = top; h > lo; h--) if (known.includes(`${lo}-${h}`)) return `${lo}-${h}`;
+  return String(Math.min(lo, Math.max(n, 1)));
+}
+
+/** a label of segments joined by ", " without a segment equal (case-insensitive) to the one before it:
+ *  "Footer, Footer, Centered" -> "Footer, Centered" */
+export function uniqLabel(label: string | undefined): string {
+  const parts = (label ?? "").split(", ");
+  return parts.filter((s, i) => i === 0 || s.toLowerCase() !== (parts[i - 1] ?? "").toLowerCase()).join(", ");
+}
diff --git a/packages/react/ui/src/utils/index.ts b/packages/react/ui/src/utils/index.ts
new file mode 100644
index 0000000..725a2fa
--- /dev/null
+++ b/packages/react/ui/src/utils/index.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/index.ts
+export { cn } from "./cn";
+export { isDevEnv } from "./env";
+export { variants, type VariantFn, type VariantKey, type VariantSelection, type VariantTable } from "./variants";
+export { TagGroup, isAllowedTag, resolveTag } from "./tags";
+export * from "./expr";
+export { tpl, fmtNumber, fmtMoney, minorDigits, at, pageWindow, fitCols, uniqLabel } from "./format";
+export * from "./a11y";
diff --git a/packages/react/ui/src/utils/tags.ts b/packages/react/ui/src/utils/tags.ts
new file mode 100644
index 0000000..115a7d0
--- /dev/null
+++ b/packages/react/ui/src/utils/tags.ts
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/tags.ts
+// Code generated by tagsgen. DO NOT EDIT.
+
+import { isDevEnv } from "./env";
+
+export const TagGroup = {
+  Layout: "Layout",
+  BoxAllowed: "BoxAllowed",
+  BlockText: "BlockText",
+  Inline: "Inline",
+  Heading: "Heading",
+  List: "List",
+  ListItem: "ListItem",
+  Form: "Form",
+  FormControl: "FormControl",
+  FormLabel: "FormLabel",
+  Table: "Table",
+  TableSection: "TableSection",
+  TableRow: "TableRow",
+  TableCell: "TableCell",
+  TableColumn: "TableColumn",
+  Media: "Media",
+  Disclosure: "Disclosure",
+  Container: "Container",
+  Stack: "Stack",
+  Group: "Group",
+  Text: "Text",
+} as const;
+
+export type TagGroup = (typeof TagGroup)[keyof typeof TagGroup];
+
+const layoutTags = new Set(["div", "section", "article", "aside", "header", "footer", "main", "nav", "figure", "search", "hgroup"]);
+const boxAllowedTags = new Set(["div"]);
+const blockTextTags = new Set(["p", "blockquote", "figcaption", "address", "pre"]);
+const inlineTags = new Set(["span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"]);
+const headingTags = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+const listTags = new Set(["ul", "ol", "dl", "menu"]);
+const listItemTags = new Set(["li", "dt", "dd"]);
+const formTags = new Set(["form", "fieldset"]);
+const formControlTags = new Set(["input", "textarea", "select", "button", "option", "optgroup", "datalist", "output", "meter", "progress"]);
+const formLabelTags = new Set(["label", "legend"]);
+const tableTags = new Set(["table"]);
+const tableSectionTags = new Set(["thead", "tbody", "tfoot"]);
+const tableRowTags = new Set(["tr"]);
+const tableCellTags = new Set(["th", "td"]);
+const tableColumnTags = new Set(["colgroup", "col"]);
+const mediaTags = new Set(["img", "picture", "source"]);
+const disclosureTags = new Set(["details", "summary"]);
+const containerTags = new Set(["div", "main", "section"]);
+const stackTags = new Set(["div", "ul", "ol"]);
+const groupTags = new Set(["div", "fieldset", "dl"]);
+
+function oneOf(tag: string, options: Set<string>): boolean {
+  return options.has(tag);
+}
+
+const warnedTagFallbacks = new Set<string>();
+
+function warnTagFallback(tag: string, fallback: string, group: TagGroup): void {
+  if (!isDevEnv()) return;
+  const key = `${group}:${tag}:${fallback}`;
+  if (warnedTagFallbacks.has(key)) return;
+  warnedTagFallbacks.add(key);
+  console.warn(`[resolveTag] disallowed tag "${tag}" for group "${group}", fallback "${fallback}" used.`);
+}
+
+export function isAllowedTag(tag: string, group: TagGroup): boolean {
+  const t = tag.trim().toLowerCase();
+  switch (group) {
+    case TagGroup.Layout:
+      return oneOf(t, layoutTags);
+    case TagGroup.BoxAllowed:
+      return oneOf(t, boxAllowedTags);
+    case TagGroup.BlockText:
+      return oneOf(t, blockTextTags);
+    case TagGroup.Inline:
+      return oneOf(t, inlineTags);
+    case TagGroup.Heading:
+      return oneOf(t, headingTags);
+    case TagGroup.List:
+      return oneOf(t, listTags);
+    case TagGroup.ListItem:
+      return oneOf(t, listItemTags);
+    case TagGroup.Form:
+      return oneOf(t, formTags);
+    case TagGroup.FormControl:
+      return oneOf(t, formControlTags);
+    case TagGroup.FormLabel:
+      return oneOf(t, formLabelTags);
+    case TagGroup.Table:
+      return oneOf(t, tableTags);
+    case TagGroup.TableSection:
+      return oneOf(t, tableSectionTags);
+    case TagGroup.TableRow:
+      return oneOf(t, tableRowTags);
+    case TagGroup.TableCell:
+      return oneOf(t, tableCellTags);
+    case TagGroup.TableColumn:
+      return oneOf(t, tableColumnTags);
+    case TagGroup.Media:
+      return oneOf(t, mediaTags);
+    case TagGroup.Disclosure:
+      return oneOf(t, disclosureTags);
+    case TagGroup.Container:
+      return oneOf(t, containerTags);
+    case TagGroup.Stack:
+      return oneOf(t, stackTags);
+    case TagGroup.Group:
+      return oneOf(t, groupTags);
+    case TagGroup.Text:
+      return blockTextTags.has(t) || inlineTags.has(t);
+    default:
+      return false;
+  }
+}
+
+export function resolveTag(tag: string | undefined, fallback: string, group: TagGroup): string {
+  const t = tag?.trim().toLowerCase() ?? "";
+  if (!t) return fallback;
+  if (isAllowedTag(t, group)) return t;
+  warnTagFallback(t, fallback, group);
+  return fallback;
+}
diff --git a/packages/react/ui/src/utils/variants.ts b/packages/react/ui/src/utils/variants.ts
new file mode 100644
index 0000000..1c00c17
--- /dev/null
+++ b/packages/react/ui/src/utils/variants.ts
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/variants.ts
+import { cn } from "./cn";
+import { isDevEnv } from "./env";
+
+/**
+ * A shadcn/cva-style variant table, without the dependency (same idea as `cva` from class-variance-authority).
+ *
+ *   const badgeVariants = variants({
+ *     base: "inline-flex items-center",
+ *     variants: { size: { sm: "h-5 px-2", lg: "h-8 px-3" } },
+ *     defaultVariants: { size: "sm" },
+ *     compoundVariants: [{ size: "lg", shape: "rounded", class: "rounded-lg" }],
+ *   });
+ *   badgeVariants({ size: "lg" }); // "inline-flex items-center h-8 px-3"
+ *
+ * Classes come in this order: base, each variant in table order, then the matching compound variants.
+ * tailwind-merge (`cn`) resolves conflicts, the later class wins. A compound value may list alternatives: "32|lg".
+ */
+export type VariantTable = {
+  base?: string;
+  variants: Record<string, Record<string, string>>;
+  defaultVariants: Record<string, string>;
+  compoundVariants?: Array<{ class: string } & Record<string, string>>;
+};
+
+/** the props a table accepts: one optional value per variant */
+export type VariantSelection<T extends VariantTable> = {
+  [K in keyof T["variants"]]?: (keyof T["variants"][K] & string) | undefined;
+};
+
+/** a variant function: call it with the selected values, read `.table` for the types */
+export type VariantFn<T extends VariantTable> = ((selection?: VariantSelection<T>) => string) & { table: T };
+
+/** the values of one variant of a table: `VariantKey<typeof badgeVariants, "size">` is `"sm" | "lg"` */
+export type VariantKey<F extends { table: VariantTable }, K extends keyof F["table"]["variants"]> = Exclude<
+  keyof F["table"]["variants"][K] & string,
+  ""
+>;
+
+export function variants<T extends VariantTable>(table: T): VariantFn<T> {
+  const pick = (selection: Record<string, string | undefined>, key: string): string =>
+    (selection[key] ?? "").trim() || (table.defaultVariants[key] ?? "").trim();
+  const fn = (selection: VariantSelection<T> = {}): string => {
+    const sel = selection as Record<string, string | undefined>;
+    const parts: string[] = [table.base ?? ""];
+    for (const [key, choices] of Object.entries(table.variants)) {
+      const choice = pick(sel, key);
+      const cls = choices[choice];
+      // a typo in development is an error; in production the unknown value is dropped
+      if (cls === undefined && isDevEnv()) throw new Error(`[variants] unknown value "${choice}" for "${key}"`);
+      parts.push(cls ?? "");
+    }
+    for (const compound of table.compoundVariants ?? []) {
+      const matches = Object.entries(compound).every(([k, want]) => k === "class" || want.split("|").includes(pick(sel, k)));
+      if (matches) parts.push(compound.class);
+    }
+    return cn(...parts.map((p) => p.trim()).filter(Boolean));
+  };
+  return Object.assign(fn, { table });
+}
diff --git a/packages/react/ui/tsconfig.json b/packages/react/ui/tsconfig.json
new file mode 100644
index 0000000..f49af10
--- /dev/null
+++ b/packages/react/ui/tsconfig.json
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/plan.ts (uiPackage)
+{
+  "compilerOptions": {
+    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "react-jsx",
+    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/shared/app/.xgen-manifest.json b/packages/shared/app/.xgen-manifest.json
new file mode 100644
index 0000000..b6fa70d
--- /dev/null
+++ b/packages/shared/app/.xgen-manifest.json
@@ -0,0 +1,120 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "packages/shared/app",
+  "files": {
+    "package.json": "0a355e880ed1e3cf878f342eb972d288a7c3c20684844db37a183b6a0a40a3cb",
+    "README.md": "7df2c8cd948bc838ec0ca3ca080f8ebca8e982f5c17ae988e40e57cda8255e73",
+    "src/content.ts": "e6a7d1fcfd10341ea21c676ae1c0f16dfb0f3f8270a456a81f42ab6f1e664e46",
+    "src/data/activity.ts": "e21d94980cc8dcdc8f9438f4524e175bca4666af639c7cf8494c8fb4964af20a",
+    "src/data/article.ts": "2bb2aa1ad5ad729da8de505e0f64372fb2e5ba2d6d37d7387a4ffdccce8a108d",
+    "src/data/beforeafter.ts": "b07c0d972e4aec12b2db747682bc978c7b7de35b9ed1306597d4d667d98a9139",
+    "src/data/bento.ts": "8356861aae2d96082962f38f68661d64bd454d8758559859cf40133f4947787e",
+    "src/data/cards.ts": "d764d60757022e8c06500da5e495f2089f50c38f87306e7a2183f4bffb3b880c",
+    "src/data/cart.ts": "ab65bfa5d3c49d6ab527b2720dca4644d341fa6d6fc9c20d896cc3a966e92279",
+    "src/data/categories.ts": "3d6e6bcad29988cd4fa4d3b8d55b6aad0317cacf7d983c6c686e1cba1acfd33c",
+    "src/data/channels.ts": "c5a945b441bca0696c8a399edb39f978d5f6d58d920123d097221bcb95599aa1",
+    "src/data/chapters.ts": "30c117493523e73d1db7e23c34427ce88293dcc1d3400277cbd67a63ad793968",
+    "src/data/checklist.ts": "3c8fa466825445994f3ecd5abe30c5f697129f91e2d0830ed8b0383f80bba901",
+    "src/data/community.ts": "ea446e5369fcfa056f9fc17ab169e337b05771d5a32cd6e46caa64fe895c8d7a",
+    "src/data/compare.ts": "6286a960a60fb3d8a3c68426a99286f4dc7d405036a064858a25eb025e6d015b",
+    "src/data/contacts.ts": "86d6fa109960c91004dc773d1ab6180fd02d4161aeca9e9b6a8f8618ea2359b2",
+    "src/data/credits.ts": "762d03a1cff7a3028120f8107aee377c5ffa078bf80f81153b0a1b55f4b4bf45",
+    "src/data/crumbs.ts": "8aa48327779050298674b2d95d79212d8a23ec171efb4a833fdf2e7e92604c2f",
+    "src/data/days.ts": "66f1d76cd8a462fe6c6623ad065d28b1e8c5813a95d6a092f54de554dc893448",
+    "src/data/deliveryfacts.ts": "f86227f116d5e327f576bc2c9b1f32ceb5adb541e08a7c6d69bcd2380cede6e7",
+    "src/data/departments.ts": "d42340b013f473c4be03577b870f77274751b620361d6187ad585052fa62475a",
+    "src/data/details.ts": "df83740c4bd17f523f0963903a16d6dcdc29745ffac1aa6cf7d008e2db2dba79",
+    "src/data/duo.ts": "7b9d298081bc197bc6969e90a2dd0cf448114a4c09006990e36a8c808c413257",
+    "src/data/faq.ts": "b3601dfbbf78f638548abbe7cc174e9e9fada4d6976bacae1ae85f034324fee3",
+    "src/data/faqtabs.ts": "a1c78dc02d601e7ca6276603b86502a574c314c0a14a57a3d4decffb428f6832",
+    "src/data/features.ts": "782256317bd2bb1aea2feec545c3c23ae5edb18e499c4068e37f8db3f736b8f6",
+    "src/data/helplinks.ts": "ae6710c94131ec882f87c69adbaf47f86bc66589bd639cf2f31b47342a1f516a",
+    "src/data/jobs.ts": "598668b834a87ab2bddd48a7205390445c024ef46973ff9aec480b227288cca2",
+    "src/data/lanes.ts": "bc15688f5c15a8a3b7d116e6f80ef4f938a5cf20d8329e0f1e732a1c007254f3",
+    "src/data/logos.ts": "a8ef10097ab983abfc82be84543a2285eb457dbbd2655cd90a7253ce45acacbe",
+    "src/data/media.ts": "693372a36b5528d7a8143f2aca3d1110c91c858ba65cf60ff66fb7294abc7dfb",
+    "src/data/megagroups.ts": "8f94a6c11e11246de36e8469797d5e17cdcb40e08ee6bc68eb508b5a056624d0",
+    "src/data/members.ts": "b2b21b460d560085b8fc6d6c107bc2f12361664f20637ce319334a619dbaaa73",
+    "src/data/menulinks.ts": "e4d2a09968cbb7818095e4ca65312aac9907f627ff24f1d940ae7301782ce050",
+    "src/data/metrics.ts": "bbe55253a3e66e298e5f8c1987335e4ea436b1be31ff2da60066986bb2fb50ad",
+    "src/data/milestones.ts": "614fc1b3c9cb054b67d6141060fd3e80ac0c6ddefbde0932195cf885009b6e60",
+    "src/data/navlinks.ts": "cf9b4b27abc240a458adc6195aefd2340b7c6312f584812b74bd9f60f9d685c0",
+    "src/data/orders.ts": "98cc36d0553bb4e8914932bfcf9aa901545ccbb7465124dc646951a51b2159a3",
+    "src/data/outline.ts": "b56abe622685c88a7df7d4b34cbe6b090e034405d31fdaf18830ba3a472e15fd",
+    "src/data/payments.ts": "56d6dc268ebd45c59d7790720dfec3a274e6d4501dbd2fa2c40319656aa37528",
+    "src/data/perks.ts": "43b2e0757063b31be3f8e133d6e621a4bb97792c3e9b4deffb81f32cf8c33c4f",
+    "src/data/photos.ts": "47e64d436ae3c71364725831864bdf854230f14826d81d4757201656173df760",
+    "src/data/placeholders.ts": "d48640fb0c1b7e86c3bafe6216840def16a4d9442d29b869c57bbd79bfcafff7",
+    "src/data/plans.ts": "6bed9480487a8a727acce471fdbdb1f01a0d7b6650e7c5c5369ac091cdf41c35",
+    "src/data/posts.ts": "3be4808104a7f06a7cc47b4e76bb38600b14b03a85b6ff2202a7aceb26e5de60",
+    "src/data/posttags.ts": "c874b021ce8d347477ad919019d0b90cdce361807e851c06a4cc3195a2629512",
+    "src/data/products.ts": "7b6c2fa4b3fa7e4b9b4ccb0350a17a2d735e90a24a251dbc1bef3d1b131e6c31",
+    "src/data/profilefacts.ts": "9db44aeb977748025da36137c4a121d716ff9a9ebefbe8b7dac999290ffab5a1",
+    "src/data/projects.ts": "729ba08e2a83cb503eb2f386724043e51c50891158be350b3d1c1234dd27c3e6",
+    "src/data/promos.ts": "2266e2287576600af6edb6ab4aa1aaee823cf648fcbcce99ea3c13844b8fb652",
+    "src/data/prompts.ts": "1e06586413a73ae35cd7d735a0b6ec9968f210f76181999bf03280563a3496e0",
+    "src/data/questions.ts": "56b656be5540d2f89fc6386fd781044064f6686af560114f80404583bdb930d6",
+    "src/data/reviews.ts": "50703834fba1003f617665a3ede8bcb22fc612df5508293e052ce20a85986b08",
+    "src/data/rivals.ts": "d0b892bc57c7c752d191d8ce4d8c0dd0696a42aa1446c262d987045377fc6fcc",
+    "src/data/series.ts": "1d04a6a1c770ede6ed01212dfe6d3821b73e1e144a8cf64017091d98a824b643",
+    "src/data/sidenav.ts": "fac6b587197f1756a09aee67a7fc75879835858acf9d2097a0b668460a3eb644",
+    "src/data/sitemap.ts": "975401b78bf5870ab8b2dd28075f083a0fc20d48351dafc193de255aab33b6cd",
+    "src/data/skills.ts": "481397df61bfee5c0d7296cab3b2d057568f44899b2cd321f791865aef15fb48",
+    "src/data/specs.ts": "0aedd036189c9ef1f959ddbf32a663657058bdc6aaaab36b224bcba027fa2d9b",
+    "src/data/stats.ts": "b3f1fbc73f9a2e5934750efb61e18664b990b80305f743732dff449f0bf522d4",
+    "src/data/steps.ts": "bcaa4dfadefb1dc2e0539e15c1982c96f4264681fa89d912998ad23c0f336121",
+    "src/data/stores.ts": "03295dfef483437d34dc666a17f3dbb914ffdf6378f75ee9f28e793b7f155a10",
+    "src/data/subnav.ts": "3439697a887de27ac6aca748dc50f44c97894f2709555876a45e78c09afa8c9c",
+    "src/data/summary.ts": "2a1265f73fc93273f4a19535b4c3abeb491c60b967878f40593c1cc1dd0c025e",
+    "src/data/tabs.ts": "0691c949abf20614dba5ea766767dd44ee2b4fd3142aaa683b6b66a24639c4d3",
+    "src/data/taxonomies.ts": "232f671b4f3b1f539f21bd9898fa5b32894bc4814bb277b6d532d67324825af4",
+    "src/data/templates.ts": "6d9556d89d4a4b7482fe8cbf745a630e14d4161aa4c6b9dd82f7d8912c78d59a",
+    "src/data/terminal.ts": "e7b4647a5453b3f9a7569092f18c1c32a3fd5b05cfb1a58fbaba9614d369a8f1",
+    "src/data/testimonials.ts": "6f64b90bf71a8d2411ca60e75d4415a25a2f6ff9ec5bc20b165e6ad10d4d8c03",
+    "src/data/tiers.ts": "eb4e33334cc248a0f85dce26d0637d3473d214eef9ef5e276d93ce0e69002c8f",
+    "src/data/topics.ts": "9972e4acdc248a3e64c5d4ddc88986b11e5f44fabcdcc7ebd6bad4a826d467e6",
+    "src/data/users.ts": "b7387c43b866e350ba0d16bb5b3dfeb2a7b5402e9d38eb2fb116103f7ad1eec7",
+    "src/data/values.ts": "d30eebbd8ea160f8dfa982c6ecece021913ddfa97c6a082568288857f51ba733",
+    "src/data/wizard.ts": "c0887f6f391a1842f9fd57de9117bb9e41db263ce883b1b77aa45e73ab8d50ca",
+    "src/data/zones.ts": "f2b4e60222cedc65568aaca169ffedb9b2acb47ae941a1b9a6e204293246f07b",
+    "src/nav/ThemeAccountPortalScreen.ts": "f782601fde1168e430ad07f9892b97eae4d459519514f36c9e78cd1bf773c714",
+    "src/nav/ThemeCommerceShopScreen.ts": "c24cce65afff1f736089edad95f8ee22d1365fca8335a41e4781f75dcbc1c4e8",
+    "src/nav/ThemeContentBlogScreen.ts": "e833daad1e26f1c5f5524595c0e68b6abba19cee1d03fd9d575092a29a0f9503",
+    "src/nav/ThemeDashboardConsoleScreen.ts": "723ab3a3a20a16d78749ba40fb5d8e470a7cb10f982b29d2f857c7752c50c222",
+    "src/nav/ThemeMarketingLandingScreen.ts": "9849c4e8323019556bba4ab0c2df2a48b3c103d097a03d344624474ad65dc6b3",
+    "src/nav/ThemeMarketingPricingScreen.ts": "bc3c45505f1a3b9a71fcfa40ef023547a85b1b4e07401be2c8163cb66aeba5dc",
+    "src/nav/ThemeMarketingProductScreen.ts": "250f919c3699c17ba51030a2316eb00aff1240c49cdf3f21cee3e97d8f7a646b",
+    "src/nav/ThemeOnboardingFlowScreen.ts": "94dbedb55855f013d4793bccfd1e453a2d4385b06836bd36ff863d7616bb0a43",
+    "src/nav/ThemePromoCampaignScreen.ts": "70d5a7fb1670e3aa2559fd130562994431436cd7fc763aec6065b8935cd2fbc5",
+    "src/nav/ThemeSupportCenterScreen.ts": "01310ebbcfcadf71f46906d627ba6dc67b9762f55aa01190d380b49b27a236df",
+    "src/runtime/codex.ts": "500af036cb6de095a646f28f821cd34cb28486cd180a0bcd7c3d1fa4cf4aa445",
+    "src/runtime/core.ts": "524819a5fe984349dfd48a773be127bcd9d883a6d3556296aa1cc4fdc50c5a34",
+    "src/runtime/fields.ts": "1d284ed09ee03f8fb5a842e1abe9d3b3e9cfd56f77043f2bc60e3db3614dc20e",
+    "src/runtime/inspect.ts": "81f3b5ee49bca61492565cc4bd0ec3fad464703b52d001d2530ed6d0a42ef9f9",
+    "src/runtime/skin-fonts.ts": "5b7e3c8fa9c98740265c91f0c143800dcff74ec4893bb3ca0e867894867015e2",
+    "src/runtime/skins.ts": "c4a3bb9190a0c9efa755719514c9405de1277baa4385943738256bb5db8fffaf",
+    "src/runtime/theme.ts": "78b3ef347aad055ffbb57884643168c5261378553d6f93e612cd6135f28cea61",
+    "src/runtime/visited.ts": "0ab571d41a8d53d6f2a956b7f76f1dcd7c4a7bbede9316c84fb6a9fc3e0b7380",
+    "src/screens.ts": "38613badc3763d4c5516d5e154b5d91f4282adc75eead48a759ea59b3721b984",
+    "src/styles/skins.css": "834b1b00b09b28d0be58b3d86ca6fc2374238fb35099784134282f3a95e6af8a",
+    "src/styles/skins/amber-minimal.css": "6ed04d39787a9c09c037ec39b1265b0e010b987d1e5dd866254e50770831bc4c",
+    "src/styles/skins/base.css": "a810b004538a2ce08307a89c9263806230508017ffed9ade6badb3e28caab365",
+    "src/styles/skins/bubblegum.css": "6e8eb18fc601db5434bc48eb7ab56c84413c5cb42cc27f3384d3dac5e8a212ba",
+    "src/styles/skins/claude.css": "511cf5b54180b4e27855cf91db93df946d956451b5d3a47632b991950ec2a835",
+    "src/styles/skins/cosmic-night.css": "ac63891818b61a7f5bedaa4f3b6ad580e0346b1956fb794d699b29cdac399add",
+    "src/styles/skins/default.css": "6d0f1e6b96e64c1357301f14e305fd9869aa1732cee948600c841e9380f8470e",
+    "src/styles/skins/doom-64.css": "a22ef23a4da89113fa6ca6f3b17d463640ab754f3a73ed44029ed860903eabcd",
+    "src/styles/skins/kodama-grove.css": "9f30d2fd7e01ab24758876c655216d2b32a4069b08eeb5d658245bc12cd13bf3",
+    "src/styles/skins/mocha-mousse.css": "dbf28db5cb450bc6b308fc6ed5571d443daff6c2f4a496e39fd3435f760296e0",
+    "src/styles/skins/modern-minimal.css": "faf3a885388dffc56a3e944d7f410875a65c4941d3f7311c83479c43b7180cc2",
+    "src/styles/skins/neo-brutalism.css": "9bd0fcd5b4d4b40af72fb4e9a18c5e491c214f24fb8769038aa465369d04a926",
+    "src/styles/skins/notebook.css": "1e89f93305af0e9b6ee2984c8c47195dea744f0bb6d638ceb8e1badc84bb8ada",
+    "src/styles/skins/NOTICE.md": "8c7d775743ce017f2288223d3aad493782f67f1e428c85cd097eb60a89c18ff2",
+    "src/styles/skins/perpetuity.css": "59722ce824b54a8fafbea644ddd74f5448dc1fb0437f3a4a7cd41f7f6182ba7c",
+    "src/styles/skins/sky.css": "bd1796d9b66dc74e47f684417d94ff60629dbb700880c897fd90949b88c29064",
+    "src/styles/skins/supabase.css": "b3457f822ee5fdc6f8ef1085753a4689a8042f60121a715708c676c1c47cb8a3",
+    "src/styles/skins/t3-chat.css": "a689f1a266aa328b77db3eda39c0660e782d280eaf02933f8edf594b48addf38",
+    "src/styles/skins/violet-bloom.css": "ea0538e325db9f304e9ed864c4959ab99b9012474d654ab908bcfbab8c59d1a2",
+    "tsconfig.json": "b671c5ec4c7c2242f8d248bc47e8229ed31ffd064e5581940ba563b7c60ca23d"
+  }
+}
diff --git a/packages/shared/app/README.md b/packages/shared/app/README.md
new file mode 100644
index 0000000..5c0f8dd
--- /dev/null
+++ b/packages/shared/app/README.md
@@ -0,0 +1,14 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/runtimes/core/src/app-common.ts (sharedPackage) -->
+# @ui8kit/app-shared
+
+Generated by xgen (`bun run build`). One copy of what the host apps (`apps/host-svelte`, `apps/host-react`) read for every screen:
+
+- `content`: the dictionary (`xgen/content/ui/en.json`)
+- `data/<collection>`: the fixtures the screens read
+- `nav/<Screen>`: the menu of a screen (`menu` of its spec)
+- `screens`: the registry of screens (key, id, skin) and the boot of a visit
+- `runtime/core`, `runtime/theme`: url state and light/dark, runtime neutral; `runtime/fields`: the Codex field maps by kind; `runtime/codex`: the lookups (media, users, terms) of fromCodex
+- `styles/skins.css`: skins switched by `data-skin` on `<html>`
+
+15 screens. A dictionary edit changes `src/content.ts` here and nothing in the hosts.
diff --git a/packages/shared/app/package.json b/packages/shared/app/package.json
new file mode 100644
index 0000000..1b2870e
--- /dev/null
+++ b/packages/shared/app/package.json
@@ -0,0 +1,29 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "@ui8kit/app-shared",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "What the host apps share, generated by xgen once for every screen: the dictionary, the fixtures, the menus, the screen registry, the url core, the theme and the skins. Runtime neutral TypeScript; no build step.",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    "./content": "./src/content.ts",
+    "./screens": "./src/screens.ts",
+    "./runtime/*": "./src/runtime/*.ts",
+    "./data/*": "./src/data/*.ts",
+    "./nav/*": "./src/nav/*.ts",
+    "./styles/*": "./src/styles/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "check": "tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "modern-screenshot": "^4.6.0"
+  },
+  "devDependencies": {
+    "typescript": "~6.0.2"
+  }
+}
diff --git a/packages/shared/app/src/content.ts b/packages/shared/app/src/content.ts
new file mode 100644
index 0000000..1e54c7a
--- /dev/null
+++ b/packages/shared/app/src/content.ts
@@ -0,0 +1,2483 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/content/ui/en.json
+// The content dictionary (xgen/content/ui/en.json): every text of every screen
+export const ui = {
+  "app": {
+    "title": "Plans"
+  },
+  "theme": {
+    "toggle": "Light or dark"
+  },
+  "plans": {
+    "search": "Search plans",
+    "caption": "Plans: sort by a column header",
+    "count": "{0} plans",
+    "empty": "No plans match the search.",
+    "col": {
+      "name": "Plan",
+      "price": "Price",
+      "seats": "Seats",
+      "storage": "Storage, GB",
+      "status": "Status"
+    }
+  },
+  "pager": {
+    "showing": "Showing {0}-{1} of {2}",
+    "previous": "Previous",
+    "next": "Next"
+  },
+  "record": {
+    "back": "All plans",
+    "missing": "This plan does not exist.",
+    "id": "Plan id: {0}"
+  },
+  "status": {
+    "active": "Active",
+    "legacy": "Legacy",
+    "paid": "Paid",
+    "shipped": "Shipped",
+    "pending": "Pending",
+    "refunded": "Refunded"
+  },
+  "pricing": {
+    "popular": "Popular",
+    "perMonth": "/ month",
+    "seats": "{0} seats",
+    "storage": "{0} GB storage",
+    "cta": "Choose plan",
+    "free": "Free",
+    "perYear": "/ year",
+    "empty": "No plans to show yet"
+  },
+  "site": {
+    "header": {
+      "skip": "Skip to main content",
+      "brand": "Northwind",
+      "nav": "Main",
+      "home": "Home",
+      "pricing": "Pricing",
+      "theme": "Light or dark",
+      "cta": "Get Started",
+      "login": "Log In"
+    },
+    "footer": {
+      "copyright": "© 2026 Northwind. All rights reserved.",
+      "nav": "Footer",
+      "home": "Home",
+      "pricing": "Pricing"
+    },
+    "home": {
+      "title": "Websites that stay simple",
+      "text": "A small toolkit for pages that load fast, read well and work for everyone.",
+      "cta": "See pricing",
+      "featuresTitle": "Features of our service",
+      "ctaTitle": "AI-powered website builder with ready-to-use templates",
+      "ctaText": "Generate complete HTML, CSS, and JavaScript projects in minutes — just pick a template and share your idea.",
+      "ctaButton": "Get Started",
+      "secondary": "How it works",
+      "ctaSecondary": "Talk to us",
+      "featuresAction": "View All"
+    },
+    "pricing": {
+      "title": "Pricing",
+      "text": "Three plans, one price per month, no hidden fees.",
+      "tiersTitle": "Plans",
+      "faqTitle": "Questions"
+    },
+    "notFound": {
+      "title": "Page not found",
+      "text": "The address does not lead anywhere on this site.",
+      "back": "Back to the home page"
+    }
+  },
+  "blocks": {
+    "title": "Block gallery",
+    "intro": "Every block of the catalog by topic, with all its variants, drawn from the same data. Pick a block to see the variants side by side.",
+    "back": "Back to all blocks",
+    "names": {
+      "header": "Header",
+      "hero": "Hero",
+      "logos": "Logo cloud",
+      "features": "Features",
+      "stats": "Stats",
+      "testimonials": "Testimonials",
+      "steps": "How it works",
+      "pricing": "Pricing",
+      "plan": "Plan",
+      "faq": "FAQ",
+      "cta": "Call to action",
+      "footer": "Footer",
+      "categories": "Category navigation",
+      "products": "Product grid",
+      "product": "Product page",
+      "reviews": "Reviews",
+      "cart": "Cart",
+      "summary": "Order summary",
+      "orders": "Order history",
+      "storehero": "Store hero",
+      "usp": "Store promises",
+      "zones": "Delivery zones",
+      "slots": "Delivery window",
+      "delivery": "Delivery info",
+      "locations": "Store locations",
+      "productinfo": "Product details",
+      "cartpage": "Cart page",
+      "cartdrawer": "Cart drawer",
+      "checkout": "Checkout",
+      "announcement": "Announcement bar",
+      "cookie": "Cookie notice",
+      "newsletter": "Newsletter sign-up",
+      "posts": "Blog posts",
+      "postheader": "Post header",
+      "auth": "Auth card",
+      "profile": "Profile form",
+      "metrics": "Metric tiles",
+      "chart": "Chart panel",
+      "activity": "Activity feed",
+      "empty": "Empty state",
+      "checklist": "Setup checklist",
+      "stepper": "Stepper",
+      "contact": "Contact form",
+      "channels": "Support channels",
+      "templates": "Template gallery",
+      "navbar": "Navigation bar",
+      "megamenu": "Mega menu",
+      "sitemap": "Sitemap footer",
+      "bento": "Bento grid",
+      "featuretabs": "Feature tabs",
+      "accordion": "Feature accordion",
+      "sticky": "Sticky feature list",
+      "iconwall": "Icon wall",
+      "beforeafter": "Before and after",
+      "proof": "Logos and stats",
+      "videos": "Video testimonials",
+      "compare": "Comparison table",
+      "usage": "Usage calculator",
+      "credits": "Credit packs",
+      "pagehead": "Page heading",
+      "authpage": "Sign-in page",
+      "wizard": "Sign-up wizard",
+      "shell": "App shell",
+      "overview": "Dashboard overview",
+      "kanban": "Kanban board",
+      "sidenav": "Sidebar navigation",
+      "bottomnav": "Bottom tab bar",
+      "skeleton": "Loading state",
+      "tour": "Tour callout",
+      "videomodal": "Video walkthrough",
+      "errorpage": "Error page",
+      "article": "Article",
+      "team": "Team",
+      "photos": "Photo gallery",
+      "projects": "Projects",
+      "jobs": "Careers",
+      "aboutme": "About me",
+      "about": "About the company",
+      "timeline": "Timeline",
+      "dashshell": "Dashboard shell",
+      "herosplit": "Hero, split",
+      "faqsplit": "FAQ, split",
+      "ctaproof": "Call to action, with proof",
+      "quotesplit": "Testimonials, split",
+      "postsplit": "Post header, split",
+      "footersplit": "Footer, split",
+      "featuresplit": "Features, split",
+      "pagetrail": "Page heading with breadcrumbs",
+      "postshowcase": "Post showcase",
+      "medialist": "List beside a picture",
+      "featureshowcase": "Feature cards with a picture",
+      "storytabs": "Story in steps"
+    },
+    "docs": {
+      "header": "Skip link, brand, navigation, theme button and an optional call to action.",
+      "hero": "Heading, lead, one or two actions and optional media.",
+      "logos": "Customers and partners as glyphs with names.",
+      "features": "Features as cards, tiles or rows with a picture.",
+      "stats": "Key numbers as figures, cards or figures with icons.",
+      "testimonials": "Customer quotes as cards or plain figures.",
+      "steps": "Numbered or icon steps in a row or a column.",
+      "pricing": "Plans as a grid or a stack of cards.",
+      "plan": "One plan as a card.",
+      "faq": "Questions as native disclosures.",
+      "cta": "A closing call to action.",
+      "footer": "Copyright and links.",
+      "categories": "Categories as chips, a bar, a side list, tiles, or chips under a toolbar.",
+      "products": "Products as cards in a grid, a list or a rail that scrolls sideways.",
+      "product": "The gallery and the buy box of one product.",
+      "reviews": "Customer reviews with ratings.",
+      "cart": "The lines of a cart as a table or as cards.",
+      "summary": "Subtotal, shipping, tax and the total.",
+      "orders": "Past orders with status.",
+      "storehero": "The hero of a store with promises under the actions, beside a picture with an offer card or over a faint picture.",
+      "usp": "Free delivery, returns, warranty and help in one band.",
+      "zones": "Delivery zones and their prices as a table or as cards.",
+      "slots": "Days with their delivery windows as radio chips, beside the zone card.",
+      "delivery": "How delivery works: the facts, then the zones.",
+      "locations": "The stores with address, hours, phone and services.",
+      "productinfo": "Texts in an accordion beside a card of specs.",
+      "cartpage": "The cart lines beside a summary with a promo code and a free-delivery bar.",
+      "cartdrawer": "The cart drawer in its open state, filled or empty.",
+      "checkout": "Contacts, address, a window and the payment beside a sticky order summary.",
+      "announcement": "A thin strip above the page with one sentence and a link.",
+      "cookie": "A consent notice with accept and decline buttons.",
+      "newsletter": "An email field and a button, inline, stacked or beside a picture.",
+      "posts": "Posts as a grid, a list or a magazine.",
+      "postheader": "Category, title, excerpt, author line and a wide cover.",
+      "auth": "Sign in, sign up and reset password.",
+      "profile": "Account settings: picture, name, email, bio and notifications.",
+      "metrics": "Key counters of a dashboard.",
+      "chart": "Orders per day as bars or meters.",
+      "activity": "Recent events as a timeline or a list.",
+      "empty": "A list with nothing in it, with an optional action.",
+      "checklist": "Tasks to finish after sign-up, with progress.",
+      "stepper": "A multi-step form header with the current step.",
+      "contact": "A message form, alone or beside the ways to reach us.",
+      "channels": "Ways to get help: email, chat, docs.",
+      "templates": "Template gallery: filters, a browse-all button and an 8-card MediaFrame grid.",
+      "navbar": "A top bar in four shapes: inline, split around the brand, with a search field, and transparent over a picture.",
+      "megamenu": "A top bar whose first item opens a wide panel of link groups, with an optional promo card.",
+      "sitemap": "A footer with the brand, groups of links and the copyright; a single row, a sign-up first or a status pill.",
+      "bento": "Tiles of different sizes in one grid; the large tiles hold the main features.",
+      "featuretabs": "Features as tabs; the chosen one fills the panel beside or below the tab list.",
+      "accordion": "Features as a list of disclosures, the first one open, with an optional picture.",
+      "sticky": "A picture that stays in view beside a list of features. Following the section being read is a port contract (ScrollSpy).",
+      "iconwall": "Many small features as icons with a name: tiles or chips in three to six columns.",
+      "beforeafter": "Two sides of the same points: how it was and how it is, as two cards or as rows.",
+      "proof": "A bar of customer logos and a row of key figures together.",
+      "videos": "Customer videos as thumbnails with a play button. Playing is a port contract (VideoEmbed).",
+      "compare": "Plans, or a product and its rivals, in columns, and the features in rows; yes and no as marks.",
+      "usage": "A slider for how much is used and the price it gives. The estimate follows the slider; the page keeps the value.",
+      "credits": "One-off packs of credits with a price: tiles in two or four columns, or rows.",
+      "pagehead": "The head of an inner page: the heading, one sentence and an optional action.",
+      "authpage": "A whole sign-in page: the card beside a picture panel, on a tinted page, or alone; with any mode of the card.",
+      "wizard": "A sign-up in steps with a progress bar or a list of steps; back and next move between them.",
+      "shell": "The frame of a signed-in app with a first screen: a sidebar, a top bar, or three panes.",
+      "overview": "Counters, a chart and recent activity in one section.",
+      "kanban": "Work items in lanes with a count; cards with a tag and a person. Moving cards is a port contract (SortableList).",
+      "sidenav": "A vertical navigation with the brand on top and the user at the bottom: full, or icons only.",
+      "bottomnav": "An app-style tab bar for a phone: an icon over a name, the current tab marked.",
+      "skeleton": "Grey blocks in the shape of what is coming: cards, a list or an article.",
+      "tour": "One stop of a product tour: the explained element and a callout with the step, a sentence and buttons. Placing it on the real element is a port contract.",
+      "videomodal": "A dialog with a walkthrough video and an optional list of chapters. Opening and playing are port contracts.",
+      "errorpage": "A page for something that went wrong, such as a missing page: a code, a heading, a sentence and the way back.",
+      "article": "A long read in one reading column, or beside a table of contents that links to the sections.",
+      "team": "The people of a team as cards, a minimal grid, detailed cards, rows beside a picture or a directory.",
+      "photos": "Photos in a grid, a masonry, a mosaic, a featured picture with thumbnails, or cards.",
+      "projects": "Projects as cards, a compact grid, captions over pictures, a bento or a list beside a collage.",
+      "jobs": "Open jobs as cards, grouped by department, or as a table.",
+      "aboutme": "A personal about section beside a portrait: key facts or skills.",
+      "about": "The culture: a strip of pictures, figures and values.",
+      "timeline": "Milestones on a vertical line beside a picture, in a narrow column, or in a row.",
+      "dashshell": "Twelve frames of a signed-in app around empty cards: a top bar across the shell or over the content, with or without search; a wide, rail, collapsed, two-level or no sidebar, at the start or the end; a footer across the shell, under the content or none.",
+      "herosplit": "A split hero with figures, faces, small cards or a quote under the lead, beside a picture, a floating card, a picture grid or plan cards.",
+      "faqsplit": "Questions beside the heading, a help card, a picture or a finder, or as cards in three or four columns.",
+      "ctaproof": "A call to action with logos, features, figures, icon rows or delivery zones; centered or beside a picture.",
+      "quotesplit": "One quote beside a picture, a rating panel or over logo tiles; stacked quotes beside a picture; four compact quotes; figures over a featured quote and a stack.",
+      "postsplit": "Tags, reading figures and an author card with share and save over a wide cover; the author, figures, tags and actions beside the cover; or the facts and related reading beside it.",
+      "footersplit": "The brand with figures and a sitemap link over link-group cards; or a split beside a picture with points, link columns, a newsletter card, the contacts or the community channels.",
+      "featuresplit": "Features beside a picture: plain in two columns, as cards with actions, two figures over checked rows, or four metric cards with actions.",
+      "pagetrail": "Breadcrumbs over the badge, the heading and the lead; with one large figure, a note card or four key facts at the end.",
+      "postshowcase": "Four small post cards beside an intro with a view-all link; the first post in detail beside its picture; or cards with the text on a panel over the picture, in two or three columns.",
+      "medialist": "Four figures, figures with a featured review, numbered steps, the latest posts, topic rows, or contact buttons with support figures, beside a picture.",
+      "featureshowcase": "Cards with a picture on top and a read link, or with a muted glyph panel on top like an index of categories, in three or four columns.",
+      "storytabs": "Year tabs over the panel of the chosen year, or the heading beside a picture with arrows and one dot per step. Choosing a step is an event."
+    },
+    "variants": {
+      "header": {
+        "inline": "Inline",
+        "stacked": "Stacked",
+        "sticky": "Sticky",
+        "withCta": "Inline with a call to action"
+      },
+      "hero": {
+        "centered": "Centered",
+        "screenshot": "Centered with a screenshot below",
+        "backdrop": "Centered over a picture",
+        "code": "Split with a terminal window",
+        "cluster": "Split with a cluster of cards",
+        "display": "Oversized heading",
+        "form": "Centered with an email field",
+        "prompt": "Nav inside the hero, badge, display title, composer and topic pills",
+        "twoActions": "Centered, two actions",
+        "split": "Split, media at the end",
+        "splitStart": "Split, media at the start",
+        "muted": "Muted tone",
+        "saas": "SaaS product: split with a picture",
+        "shop": "Shop: picture first, muted",
+        "blog": "Blog: centered, compact"
+      },
+      "logos": {
+        "grid4": "Grid, four columns",
+        "grid3": "Grid, three columns, tiles",
+        "row": "Logo ribbon: one row of large marks",
+        "icons": "Icons only, muted",
+        "grid2": "Grid, two columns, roomy",
+        "tiles4": "Tiles, four columns"
+      },
+      "features": {
+        "grid": "Grid, three columns",
+        "grid2": "Grid, two columns, roomy",
+        "tiles4": "Tiles, four columns",
+        "cells4": "Hairline 4x2 cells with icon tiles",
+        "rows": "Rows",
+        "rowsStart": "Rows, media at the start, compact",
+        "rowsAlternate": "Rows, alternating media, muted",
+        "tilesMuted": "Tiles, three columns, muted"
+      },
+      "stats": {
+        "plain4": "Plain figures, four columns",
+        "panel": "One panel card, four figures, no heading",
+        "stack": "Figures stacked in one column",
+        "image": "Figures over a picture",
+        "cards": "Cards, three columns, three figures",
+        "icons": "Figures with icons, left aligned",
+        "muted2": "Plain, two columns, muted",
+        "cardsCompact": "Cards, four columns, compact"
+      },
+      "testimonials": {
+        "grid3": "Cards, three columns",
+        "masonry": "Masonry of cards",
+        "strip": "Strip that scrolls sideways",
+        "social": "Posts of a social wall",
+        "featured": "One featured quote with a mark",
+        "grid2": "Cards, two columns",
+        "single": "Single quote, wide",
+        "stack": "Narrow stack",
+        "plain": "Plain quotes, no avatars",
+        "noRating": "Cards, no rating, roomy"
+      },
+      "steps": {
+        "row": "Row with numbers",
+        "rowIcons": "Row with icons",
+        "column": "Column",
+        "centered": "Row, centered, muted",
+        "columnIcons": "Column with icons, roomy",
+        "compact": "Row, compact"
+      },
+      "pricing": {
+        "grid": "Grid, three columns",
+        "monthly": "With a billing toggle, monthly",
+        "annual": "With a billing toggle, annual",
+        "duo": "Free and Pro side by side",
+        "grid2": "Grid, two columns",
+        "grid4": "Grid, four columns",
+        "stack": "Stack",
+        "flat": "No emphasis",
+        "compactMuted": "Muted, compact",
+        "roomy": "Roomy"
+      },
+      "plan": {
+        "standard": "Standard",
+        "flat": "No emphasis",
+        "compact": "Compact"
+      },
+      "faq": {
+        "list": "List",
+        "chat": "Chat bubbles",
+        "search": "With a search field",
+        "tabs": "Category tabs",
+        "twoColumns": "Two columns",
+        "muted": "Muted, compact",
+        "roomy": "Roomy"
+      },
+      "cta": {
+        "card": "Card",
+        "banner": "Centered muted card",
+        "row": "Heading and button in one row",
+        "form": "With an email field",
+        "quote": "With a customer quote",
+        "band": "Band, roomy",
+        "split": "Split, two actions",
+        "compact": "Compact card",
+        "saas": "SaaS: band, two actions",
+        "shop": "Shop: split with a picture",
+        "agency": "Agency: card, two actions"
+      },
+      "footer": {
+        "minimal": "Minimal",
+        "centered": "Centered",
+        "compact": "Compact"
+      },
+      "categories": {
+        "chips": "Chips",
+        "bar": "Bar with an underline",
+        "sidebar": "Side list",
+        "chipsPlain": "Chips, names only",
+        "barCompact": "Bar, compact, no icons",
+        "tiles": "Tiles with a big icon",
+        "toolbar": "Chips under a toolbar"
+      },
+      "products": {
+        "grid3": "Grid, three columns",
+        "grid4": "Grid, four columns, square pictures",
+        "grid2": "Grid, two columns, tall pictures",
+        "list": "List of horizontal cards",
+        "catalog": "Compact catalog, no rating",
+        "browse": "Browse only, muted",
+        "showcase": "Showcase, tall pictures, roomy",
+        "rail": "Rail that scrolls sideways",
+        "railCompact": "Rail, square pictures, compact"
+      },
+      "product": {
+        "split": "Gallery at the start, thumbnails",
+        "splitEnd": "Gallery at the end",
+        "stacked": "Stacked, no thumbnails",
+        "compact": "Compact buy box",
+        "muted": "Muted, roomy"
+      },
+      "reviews": {
+        "list": "List of cards",
+        "grid": "Grid of cards",
+        "plain": "Plain entries",
+        "avatars": "With avatars",
+        "mutedGrid": "Muted grid with avatars"
+      },
+      "cart": {
+        "table": "Table",
+        "cards": "Cards",
+        "tableCompact": "Compact table, no pictures",
+        "cardsPlain": "Cards, no pictures, muted"
+      },
+      "summary": {
+        "card": "Card with a checkout button",
+        "plain": "Plain, without a note",
+        "noCta": "Card without a button",
+        "muted": "Muted"
+      },
+      "orders": {
+        "table": "Table with a pager",
+        "cards": "Cards",
+        "noPager": "Table without a pager",
+        "compactMuted": "Compact, muted"
+      },
+      "storehero": {
+        "overlay": "Picture with an offer card",
+        "overlayStart": "Picture at the start",
+        "backdrop": "Text over a faint picture",
+        "muted": "Muted, one action"
+      },
+      "usp": {
+        "strip": "Muted strip",
+        "cards": "Cards under a heading",
+        "stripCompact": "Muted strip, compact",
+        "bar": "Thin bar of icons",
+        "barMuted": "Thin bar, muted"
+      },
+      "zones": {
+        "table": "Table",
+        "cards": "Cards",
+        "tableMuted": "Table, muted, compact"
+      },
+      "slots": {
+        "split": "Days beside the zone card",
+        "plain": "Plain days",
+        "stacked": "Days only, muted"
+      },
+      "delivery": {
+        "full": "Facts over zone cards",
+        "split": "Facts beside a list of zones",
+        "facts": "Facts only, muted, compact"
+      },
+      "locations": {
+        "cards": "Cards",
+        "list": "One row per store, muted",
+        "map": "Beside a map"
+      },
+      "productinfo": {
+        "split": "Specs beside the texts",
+        "stacked": "Specs below",
+        "closed": "All closed, muted"
+      },
+      "cartpage": {
+        "split": "Summary beside the lines",
+        "stacked": "Summary below",
+        "plain": "No promo code, no bar, muted"
+      },
+      "cartdrawer": {
+        "filled": "Open, with lines",
+        "compact": "No pictures",
+        "empty": "Empty"
+      },
+      "checkout": {
+        "cards": "Steps in cards",
+        "numbered": "Numbered steps",
+        "noSummary": "Without the summary, muted"
+      },
+      "announcement": {
+        "bar": "Primary strip",
+        "badge": "With a tag: New",
+        "bottom": "Stays at the bottom edge",
+        "muted": "Muted strip",
+        "split": "Split, text left and link right",
+        "dismissible": "With a close button",
+        "shop": "Shop: free shipping, muted",
+        "agency": "Agency: open slots, split"
+      },
+      "cookie": {
+        "bar": "Bar",
+        "card": "Card",
+        "settings": "Bar with a settings button",
+        "muted": "Muted card with settings"
+      },
+      "newsletter": {
+        "inline": "Inline, centered",
+        "stacked": "Stacked",
+        "split": "Split with a picture",
+        "consent": "With a consent line",
+        "muted": "Muted, consent"
+      },
+      "posts": {
+        "grid": "Grid, three columns",
+        "filters": "Grid with topic filters",
+        "twoUp": "Grid, two columns",
+        "row4": "Grid, four columns in one row",
+        "news4": "Four news cards, title on image, date strip",
+        "list": "List of horizontal cards",
+        "magazine": "Magazine: first post wide",
+        "textOnly": "Text only",
+        "digest": "Digest: short meta, compact, muted"
+      },
+      "postheader": {
+        "start": "Left aligned with a cover",
+        "center": "Centered",
+        "noCover": "Without a cover",
+        "minimal": "Minimal: short meta, muted"
+      },
+      "auth": {
+        "signin": "Sign in",
+        "magic": "Magic link only",
+        "socialFirst": "Other sign-in options first",
+        "signup": "Sign up",
+        "reset": "Reset password",
+        "plain": "Sign in without a card",
+        "social": "Sign in with other options",
+        "signupSocial": "Sign up with other options, plain"
+      },
+      "profile": {
+        "stacked": "Stacked",
+        "split": "Fields beside notifications",
+        "minimal": "Fields only",
+        "muted": "Muted split"
+      },
+      "metrics": {
+        "tiles": "Four tiles",
+        "twoUp": "Two by two",
+        "compact": "Compact figures",
+        "muted": "Muted, compact"
+      },
+      "chart": {
+        "bars": "Bars",
+        "short": "Short bars",
+        "meters": "Meters",
+        "muted": "Muted compact meters"
+      },
+      "activity": {
+        "timeline": "Timeline",
+        "list": "List",
+        "compact": "Compact list",
+        "muted": "Muted timeline"
+      },
+      "empty": {
+        "illustrated": "With a picture and an action",
+        "orders": "No orders yet",
+        "results": "Nothing found, plain",
+        "inbox": "Inbox is empty, no action",
+        "compact": "Compact",
+        "plainNoAction": "Plain, compact, no action"
+      },
+      "checklist": {
+        "card": "Card with a progress bar",
+        "expand": "Tasks that open",
+        "plain": "Plain",
+        "text": "Count as text",
+        "none": "No progress",
+        "numbered": "Numbered",
+        "muted": "Muted, numbered, count"
+      },
+      "stepper": {
+        "horizontal": "Horizontal",
+        "vertical": "Vertical",
+        "icons": "Icon markers",
+        "bare": "Without the step text"
+      },
+      "contact": {
+        "single": "Single column, all fields",
+        "page": "A page of its own: a short form",
+        "short": "Email and message only",
+        "split": "Beside the ways to reach us",
+        "consent": "With a consent line",
+        "muted": "Muted split, short"
+      },
+      "channels": {
+        "grid": "Cards in a row",
+        "twoUp": "Two columns",
+        "list": "List",
+        "plain": "Muted, without links"
+      },
+      "templates": {
+        "grid4": "Four columns, eight cards",
+        "grid3": "Three columns",
+        "muted": "Muted, compact",
+        "roomy": "Roomy"
+      },
+      "navbar": {
+        "inline": "Brand, links and a button",
+        "split": "Brand in the middle",
+        "search": "With a search field",
+        "media": "Transparent over a picture",
+        "plain": "Without a button",
+        "inverse": "On a dark hero band with Log In"
+      },
+      "megamenu": {
+        "open": "Panel open, three columns",
+        "closed": "Panel closed",
+        "twoCols": "Two columns",
+        "promo": "With a promo card"
+      },
+      "sitemap": {
+        "columns": "One column per group",
+        "card": "Groups in one rounded card",
+        "row": "Single row",
+        "newsletter": "Sign-up first",
+        "status": "With a status pill",
+        "compact": "Compact"
+      },
+      "bento": {
+        "bento": "Mixed sizes",
+        "even": "Even tiles",
+        "images": "With pictures",
+        "muted": "Muted, compact"
+      },
+      "featuretabs": {
+        "split": "Panel beside the tabs",
+        "stack": "Panel below the tabs",
+        "muted": "Muted, compact"
+      },
+      "accordion": {
+        "first": "First open",
+        "closed": "All closed",
+        "media": "With a picture",
+        "muted": "Muted, compact"
+      },
+      "sticky": {
+        "end": "Picture at the end",
+        "start": "Picture at the start",
+        "card": "Features as cards",
+        "muted": "Muted, compact"
+      },
+      "iconwall": {
+        "tiles4": "Tiles, four columns",
+        "tiles3": "Tiles, three columns",
+        "chips6": "Chips, six columns",
+        "chips4": "Chips, four columns",
+        "muted": "Muted, compact"
+      },
+      "beforeafter": {
+        "cards": "Two cards",
+        "rows": "One row per point",
+        "plain": "Without icons",
+        "muted": "Muted, compact"
+      },
+      "proof": {
+        "above": "Logos above the figures",
+        "beside": "Logos beside the figures",
+        "icons": "Icons only",
+        "muted": "Muted, compact"
+      },
+      "videos": {
+        "grid3": "Three columns",
+        "grid2": "Two columns",
+        "overlay": "Caption over the picture",
+        "muted": "Muted, compact"
+      },
+      "compare": {
+        "plans": "Plans",
+        "highlight": "Middle column stands out",
+        "rivals": "Us and the rivals",
+        "muted": "Muted, compact"
+      },
+      "usage": {
+        "card": "Card",
+        "plain": "Plain",
+        "noEnds": "Without the end labels",
+        "muted": "Muted"
+      },
+      "credits": {
+        "tiles4": "Tiles, four columns",
+        "tiles2": "Tiles, two columns",
+        "rows": "Rows",
+        "muted": "Muted, compact"
+      },
+      "pagehead": {
+        "start": "Left aligned",
+        "center": "Centered",
+        "muted": "Muted, compact"
+      },
+      "authpage": {
+        "split": "Card beside a picture",
+        "splitStart": "Picture at the start",
+        "centered": "Card on a tinted page",
+        "minimal": "Card alone",
+        "signup": "Sign up",
+        "reset": "Reset password",
+        "magic": "Magic link only",
+        "social": "With other sign-in options",
+        "socialFirst": "Other options first"
+      },
+      "wizard": {
+        "bar": "Progress bar",
+        "list": "List of steps",
+        "plain": "Without a card",
+        "second": "Second step, list of steps, no card"
+      },
+      "shell": {
+        "sidebar": "Sidebar and content",
+        "top": "Top bar and content",
+        "panes": "Three panes",
+        "dense": "Sidebar, compact"
+      },
+      "overview": {
+        "split": "Chart beside the activity",
+        "stacked": "Chart above the activity",
+        "twoCols": "Two counters per row",
+        "muted": "Muted, compact"
+      },
+      "kanban": {
+        "detail": "Cards with a tag and a person",
+        "simple": "Titles only",
+        "twoCols": "Two lanes per row",
+        "muted": "Muted, compact"
+      },
+      "sidenav": {
+        "full": "Icons and names",
+        "compact": "Icons only",
+        "noUser": "Without the user",
+        "dense": "Dense rows"
+      },
+      "bottomnav": {
+        "labels": "Icons with names",
+        "icons": "Icons only",
+        "sticky": "Stays at the bottom",
+        "muted": "Muted"
+      },
+      "skeleton": {
+        "cards": "Cards",
+        "list": "List",
+        "article": "Article",
+        "muted": "Muted cards"
+      },
+      "tour": {
+        "below": "Callout below",
+        "above": "Callout above",
+        "end": "Callout beside",
+        "muted": "Muted, compact"
+      },
+      "videomodal": {
+        "default": "Standard size",
+        "wide": "Wide",
+        "chapters": "With chapters",
+        "muted": "Muted"
+      },
+      "errorpage": {
+        "centered": "Centered",
+        "split": "Split with a picture",
+        "noCode": "Without the code",
+        "two": "Two actions",
+        "muted": "Muted"
+      },
+      "article": {
+        "column": "Reading column",
+        "toc": "With a table of contents",
+        "plain": "Without pull quotes",
+        "muted": "Muted"
+      },
+      "team": {
+        "cards4": "Portrait cards, four columns",
+        "cards3": "Portrait cards, three columns, muted",
+        "minimal": "Small portraits, names only",
+        "detailed": "Detailed cards with skills",
+        "list": "Rows beside a picture",
+        "directory": "Directory, two columns, compact"
+      },
+      "photos": {
+        "grid": "Grid with captions",
+        "gridPlain": "Grid without captions, muted",
+        "masonry": "Masonry of mixed heights",
+        "mosaic": "Mosaic with one big tile",
+        "featured": "Featured picture over thumbnails",
+        "cards": "Cards with a tag, compact"
+      },
+      "projects": {
+        "cards": "Cards with tags and links",
+        "compact": "Compact, four columns",
+        "overlay": "Captions over the pictures",
+        "bento": "Bento with one big project",
+        "list": "List beside a collage",
+        "cardsMuted": "Cards, muted, compact"
+      },
+      "jobs": {
+        "grid": "Cards in two columns",
+        "salary": "Cards with the salary",
+        "grouped": "Grouped by department",
+        "table": "Table with the salary, muted"
+      },
+      "aboutme": {
+        "facts": "Portrait first, key facts",
+        "factsEnd": "Portrait at the end",
+        "skills": "Skills with bars",
+        "skillsMuted": "Skills, portrait at the end, muted"
+      },
+      "about": {
+        "split": "Pictures beside the text",
+        "stacked": "Pictures below, values in a row",
+        "muted": "Muted, compact"
+      },
+      "timeline": {
+        "split": "Beside a picture",
+        "stacked": "Narrow column",
+        "row": "A row of columns",
+        "rowMuted": "Row, muted, compact"
+      },
+      "dashshell": {
+        "classic": "Top bar across, wide sidebar",
+        "inset": "Top bar over the content, footer under it",
+        "rail": "Top bar across, icon rail, no search",
+        "railFooter": "Icon rail, top bar over the content, footer across",
+        "collapsed": "Collapsed sidebar, top bar over the content",
+        "twoLevel": "Two-level sidebar, footer under the content",
+        "twoLevelFull": "Two-level sidebar under a top bar, footer across",
+        "end": "Wide sidebar at the end, footer across",
+        "railEnd": "Icon rail at the end, top bar over the content",
+        "topOnly": "Top bar with the links, no sidebar",
+        "sideOnly": "Wide sidebar, no top bar",
+        "collapsedEnd": "Collapsed sidebar at the end, no top bar"
+      },
+      "herosplit": {
+        "statsCards": "Figures in cards beside a picture",
+        "avatars": "Faces and a proof line",
+        "miniCards": "Two small cards, floating card, muted",
+        "quoteStats": "Quote and figures beside a floating card",
+        "planCards": "Plan cards on the picture, picture first",
+        "pictureGrid": "Figures beside a grid of four pictures",
+        "pictureGridStart": "Grid of four pictures first, faces"
+      },
+      "faqsplit": {
+        "headSplit": "Heading and action beside the questions",
+        "helpCard": "Questions beside a help card",
+        "picture": "Questions and action beside a picture",
+        "finder": "Picture first, search, topics and popular questions",
+        "cards3": "Cards in three columns",
+        "cards4": "Cards in four columns",
+        "cardsIcons": "Cards with icons, muted"
+      },
+      "ctaproof": {
+        "centerLogos": "Centered over a row of logos",
+        "centerFeatures": "Centered with small features",
+        "centerStats": "Centered with three figures, muted",
+        "splitStats": "Figures beside a picture",
+        "splitStatsStart": "Picture first, figures and a note",
+        "splitRows": "Icon rows beside a picture",
+        "splitZones": "Delivery zones beside a picture, muted"
+      },
+      "quotesplit": {
+        "quoteCard": "One quote card beside a picture",
+        "logoTiles": "Picture first, a quote over logo tiles",
+        "ratingPanel": "A quote beside a rating panel, muted",
+        "stackedCards": "Picture first, three stacked quotes",
+        "compact4": "Four compact quotes in a row",
+        "bentoFigures": "Figures over a featured quote and a stack"
+      },
+      "postsplit": {
+        "centerShare": "Centered: tags, figures and a share card over a wide cover",
+        "splitTags": "Author line, tags, share and save beside the cover",
+        "splitBioStart": "Cover first, an author card with the bio and one wide action",
+        "splitSquare": "A square cover, a wide action with share and save as icons",
+        "outlineStart": "Cover first, the facts and related reading",
+        "splitStats": "An author card and figures beside the cover, muted"
+      },
+      "footersplit": {
+        "statsCards": "The brand with figures over link-group cards",
+        "splitPoints": "The brand and four points beside a picture",
+        "splitLinks": "The brand and small link columns beside a picture, muted",
+        "newsletterStart": "Picture first, a newsletter card and link columns",
+        "splitContacts": "The contacts and two actions beside a picture",
+        "channelsStart": "Picture first, the community channels and figures"
+      },
+      "featuresplit": {
+        "gridStart": "Picture first, four plain features in two columns",
+        "statsStart": "A square picture first, two figures over checked rows",
+        "gridMuted": "Four plain features beside a picture, muted",
+        "metricCards": "Four metric cards and actions beside a picture",
+        "featureCards": "Four feature cards and actions beside a picture"
+      },
+      "pagetrail": {
+        "crumbs": "Breadcrumbs, badge, heading and lead",
+        "crumbsFigure": "With one large figure at the end",
+        "crumbsNote": "With a note card at the end",
+        "keyFacts": "With four key facts beside it, muted"
+      },
+      "postshowcase": {
+        "introCards": "Four small post cards first, the intro and a view-all link",
+        "featuredEnd": "The featured post beside its picture, muted",
+        "overlay3": "Three cards with the text over the picture",
+        "overlay2": "Two wide cards with the text over the picture"
+      },
+      "medialist": {
+        "figuresStart": "Picture first, four figures and an action",
+        "proofReview": "Three figures and a featured review",
+        "stepsRows": "Numbered steps beside a square picture",
+        "latestPosts": "The latest posts and a subscribe action, muted",
+        "topicRows": "Topic rows with counts beside a square picture",
+        "contactStart": "Picture first, contact buttons and support figures"
+      },
+      "featureshowcase": {
+        "pictureCards3": "Three cards with a picture on top",
+        "panelCards4": "Four cards with a glyph panel on top",
+        "pictureCards4": "Four cards with a picture on top, muted",
+        "panelCards3": "Three cards with a glyph panel on top"
+      },
+      "storytabs": {
+        "yearTabs": "Year tabs over the panel of the chosen year",
+        "carouselSplit": "The heading beside a picture with arrows and dots",
+        "yearTabsMuted": "Year tabs, muted"
+      }
+    },
+    "landmark": "{0}, {1}",
+    "themes": {
+      "marketing": {
+        "title": "Marketing",
+        "text": "Landing page sections: header, hero, proof, features, pricing, FAQ, call to action, footer."
+      },
+      "commerce": {
+        "title": "Commerce",
+        "text": "A storefront: categories, products, product page, reviews, cart, summary and orders."
+      },
+      "promo": {
+        "title": "Promo",
+        "text": "Announcements, cookie notice and newsletter sign-up."
+      },
+      "content": {
+        "title": "Content",
+        "text": "A blog: posts, the article header and the author."
+      },
+      "account": {
+        "title": "Account",
+        "text": "Sign in, sign up and profile."
+      },
+      "dashboard": {
+        "title": "Dashboard",
+        "text": "Metric cards, charts, activity and empty states."
+      },
+      "onboarding": {
+        "title": "Onboarding",
+        "text": "A checklist and a stepper for first-time users."
+      },
+      "support": {
+        "title": "Support",
+        "text": "A contact form and the ways to reach us."
+      }
+    }
+  },
+  "testimonials": {
+    "rating": "{0} out of 5",
+    "byLine": "{0}, {1}",
+    "handleLine": "{0} / {1}"
+  },
+  "marketing": {
+    "logos": {
+      "title": "Best Companies Use Our Service"
+    },
+    "stats": {
+      "title": "",
+      "empty": "No figures to show yet"
+    },
+    "testimonials": {
+      "title": "What customers say"
+    },
+    "steps": {
+      "title": "How it works"
+    },
+    "heroSplit": {
+      "title": "Ship pages your team can trust",
+      "lead": "Plain blocks, one dictionary of texts and eight runtimes from the same specs.",
+      "badge": "New in 2.0",
+      "cta": "Start free",
+      "secondary": "See the features",
+      "proof": "Loved by 3,200 teams",
+      "cardTitle": "Built in a day",
+      "cardText": "Most teams publish their first page before lunch."
+    },
+    "faqSplit": {
+      "title": "Questions, answered",
+      "lead": "The short version of what people ask us most.",
+      "badge": "Help",
+      "cta": "Ask a question",
+      "more": "Read more",
+      "asideTitle": "Still stuck?",
+      "asideText": "A person answers every message.",
+      "asideCta": "Contact the team",
+      "search": "Search the answers",
+      "popular": "Popular questions"
+    },
+    "ctaProof": {
+      "title": "Start building today",
+      "lead": "Join the teams that publish faster with fewer moving parts.",
+      "badge": "Free for 14 days",
+      "cta": "Start free",
+      "secondary": "Talk to sales",
+      "note": "No card needed. Cancel at any time.",
+      "zonesTitle": "Free delivery from your zone",
+      "zonesLead": "Order before 20:00 and pick a two-hour window."
+    },
+    "quoteSplit": {
+      "title": "Teams that switched",
+      "lead": "What people say after their first month.",
+      "badge": "Customers",
+      "score": "4.9 out of 5",
+      "reviews": "From 2,400 reviews",
+      "cta": "Read the stories",
+      "secondary": "Talk to us"
+    },
+    "footerSplit": {
+      "tagline": "Sites from one set of blocks, in every runtime.",
+      "copyright": "© 2026 Northwind. All rights reserved.",
+      "labels": {
+        "title": "Get in touch",
+        "text": "Ready to start a project? Write to us and we answer within a day.",
+        "loopTitle": "Stay in the loop",
+        "loopText": "News, guides and new blocks, once a month in your inbox.",
+        "joinTitle": "Join the community",
+        "joinText": "Learn from other builders and share what you make.",
+        "sitemap": "View the sitemap",
+        "points": "Why teams pick us",
+        "signup": "Newsletter",
+        "email": "Email address",
+        "subscribe": "Subscribe",
+        "note": "No spam. Leave at any time.",
+        "cta": "Start a project",
+        "secondary": "See our work"
+      }
+    },
+    "featureSplit": {
+      "title": "Built for teams that ship",
+      "lead": "Everything you need to plan, build and publish, in one place.",
+      "badge": "Features",
+      "cta": "Start free",
+      "secondary": "See it in action"
+    },
+    "pageTrail": {
+      "title": "The catalog",
+      "lead": "Everything in stock, filtered and sorted in one place. Search works as you type.",
+      "badge": "Shop",
+      "label": "Breadcrumbs",
+      "value": "48",
+      "caption": "products in stock",
+      "note": "Order before 18:00 for delivery tomorrow."
+    },
+    "mediaList": {
+      "count": "{0} items",
+      "featured": "Featured review",
+      "supportFigures": "Support in numbers",
+      "figures": {
+        "title": "Results you can measure",
+        "lead": "Teams of every size publish faster and keep their pages fast.",
+        "badge": "Results",
+        "list": "Our numbers",
+        "cta": "See the results"
+      },
+      "proof": {
+        "title": "Proven by the people who use it",
+        "lead": "Customers rate us highly and see the change within weeks.",
+        "badge": "Reviews",
+        "list": "What customers say",
+        "cta": "Start free",
+        "secondary": "Read all reviews"
+      },
+      "steps": {
+        "title": "How a project runs",
+        "lead": "Four steps from the first call to a live site, with no surprises.",
+        "badge": "Process",
+        "list": "The process",
+        "cta": "Start a project"
+      },
+      "posts": {
+        "title": "Get the newsletter",
+        "lead": "The best guides and news, once a week in your inbox.",
+        "badge": "Weekly digest",
+        "list": "Latest posts",
+        "cta": "Subscribe"
+      },
+      "topics": {
+        "title": "Browse by category",
+        "lead": "Every category with its count, so you know where to look.",
+        "badge": "Categories",
+        "list": "All categories",
+        "cta": "View all categories"
+      },
+      "contact": {
+        "title": "Help when you need it",
+        "lead": "Chat, email or the docs: pick the way that suits you.",
+        "badge": "Support",
+        "list": "Get help",
+        "cta": "Contact us"
+      }
+    },
+    "featureShowcase": {
+      "title": "Everything in one place",
+      "lead": "Each part does one job well, and they all work together.",
+      "more": "Learn more"
+    }
+  },
+  "cases": {
+    "saas": {
+      "hero": {
+        "title": "Ship your product site in a day",
+        "text": "Connect your data, pick the blocks and publish to every runtime.",
+        "cta": "Start free",
+        "secondary": "Book a demo"
+      },
+      "cta": {
+        "title": "Build your next release on solid ground",
+        "text": "Free for small teams, simple pricing when you grow.",
+        "cta": "Start free",
+        "secondary": "See pricing"
+      }
+    },
+    "shop": {
+      "hero": {
+        "title": "Desk gear that lasts",
+        "text": "Lamps, bags and audio picked by people who work at a desk all day.",
+        "cta": "Shop the collection",
+        "secondary": "See what is new"
+      },
+      "cta": {
+        "title": "Free shipping on orders over 75 dollars",
+        "text": "Thirty-day returns, no questions asked.",
+        "cta": "Start shopping",
+        "secondary": "Delivery details"
+      },
+      "announcement": {
+        "text": "Free shipping on orders over 75 dollars.",
+        "cta": "Shop now"
+      }
+    },
+    "agency": {
+      "cta": {
+        "title": "Have a project in mind?",
+        "text": "Tell us about it and we will reply within two days.",
+        "cta": "Start a project",
+        "secondary": "See case studies"
+      },
+      "announcement": {
+        "text": "Two slots are open for spring projects.",
+        "cta": "Book a call"
+      }
+    },
+    "blog": {
+      "hero": {
+        "title": "Notes from the team",
+        "text": "Short, practical writing about building for the web.",
+        "cta": "Read the latest",
+        "secondary": "Subscribe"
+      }
+    }
+  },
+  "commerce": {
+    "nav": {
+      "label": "Product categories"
+    },
+    "products": {
+      "title": "Popular right now"
+    },
+    "productLabels": {
+      "add": "Add to cart",
+      "soldOut": "Sold out",
+      "reviews": "{0} reviews",
+      "ratingLabel": "{0} out of 5",
+      "was": "Was",
+      "empty": "No products to show yet"
+    },
+    "badges": {
+      "new": "New",
+      "sale": "Sale"
+    },
+    "detail": {
+      "add": "Add to cart",
+      "soldOut": "Sold out",
+      "inStock": "In stock",
+      "qty": "Quantity",
+      "reviews": "{0} reviews",
+      "ratingLabel": "{0} out of 5",
+      "shipping": "Free shipping over 75 dollars",
+      "returns": "Thirty-day returns",
+      "decrease": "Decrease quantity",
+      "increase": "Increase quantity",
+      "was": "Was",
+      "empty": "No product to show"
+    },
+    "reviews": {
+      "title": "What buyers say"
+    },
+    "reviewLabels": {
+      "ratingLabel": "{0} out of 5",
+      "empty": "No reviews yet"
+    },
+    "cart": {
+      "title": "Your cart",
+      "caption": "Items in your cart",
+      "product": "Product",
+      "price": "Price",
+      "qty": "Quantity",
+      "total": "Total",
+      "remove": "Remove",
+      "subtotal": "Subtotal",
+      "checkout": "Go to checkout",
+      "decrease": "Decrease quantity",
+      "increase": "Increase quantity"
+    },
+    "summary": {
+      "title": "Order summary",
+      "checkout": "Go to checkout",
+      "note": "Taxes are calculated at checkout."
+    },
+    "orders": {
+      "title": "Your orders",
+      "caption": "Past orders",
+      "number": "Order",
+      "date": "Date",
+      "items": "Items",
+      "total": "Total",
+      "status": "Status",
+      "itemsCount": "{0} items",
+      "summary": "Showing {0}-{1} of {2}",
+      "previous": "Previous",
+      "next": "Next"
+    },
+    "storeHero": {
+      "title": "Everything for a calm desk, delivered in two hours",
+      "lead": "Lamps, bags and desk goods from small workshops. Order before 20:00 and pick a window that suits you.",
+      "badge": "New season",
+      "cta": "Shop the catalog",
+      "secondary": "Delivery and pickup",
+      "card": {
+        "title": "Minus 15% on lighting",
+        "text": "With the code DESK15 until Sunday.",
+        "icon": "percent"
+      }
+    },
+    "usp": {
+      "title": "Why order here"
+    },
+    "tools": {
+      "search": "Search the catalog",
+      "sort": "Sort",
+      "sortValue": "Popular first",
+      "shown": "Showing 6 of 48",
+      "query": ""
+    },
+    "rail": {
+      "title": "Deals of the week"
+    },
+    "zones": {
+      "title": "Delivery zones and prices",
+      "lead": "The price depends on the zone of your address. Large orders ship free.",
+      "caption": "Delivery price by zone",
+      "zone": "Zone",
+      "price": "Delivery",
+      "freeFrom": "Free from",
+      "minOrder": "Minimum order",
+      "time": "Time",
+      "express": "Express"
+    },
+    "slots": {
+      "title": "Pick a delivery window",
+      "lead": "Windows close two hours before they start.",
+      "zone": "Delivery zone",
+      "price": "Delivery",
+      "freeFrom": "Free from",
+      "time": "Time",
+      "primary": "Go to checkout",
+      "secondary": "Back to the cart",
+      "note": "The courier calls ten minutes before arriving."
+    },
+    "delivery": {
+      "title": "Delivery",
+      "lead": "How we pack, when we come and what it costs.",
+      "zones": "Zones",
+      "freeFrom": "Free from {0}"
+    },
+    "stores": {
+      "title": "Stores and pickup",
+      "lead": "Pick up an order in thirty minutes or visit a showroom.",
+      "map": "Map of the stores",
+      "kinds": {
+        "pickup": "Pickup",
+        "store": "Store only"
+      }
+    },
+    "info": {
+      "title": "Product details",
+      "specs": "Specifications"
+    },
+    "totals": {
+      "title": "Order summary",
+      "items": "{0} products",
+      "promo": "Promo code",
+      "apply": "Apply",
+      "codes": "Try:",
+      "progress": "Add $12 more for free express delivery",
+      "checkout": "Go to checkout",
+      "note": "Taxes are calculated at checkout."
+    },
+    "cartPage": {
+      "title": "Your cart",
+      "back": "Continue shopping",
+      "clear": "Clear the cart",
+      "empty": "Your cart is empty"
+    },
+    "drawer": {
+      "title": "Cart",
+      "close": "Close the cart",
+      "progress": "Add $12 more for free express delivery",
+      "empty": "Your cart is empty",
+      "emptyText": "Add something from the catalog and it will show up here.",
+      "browse": "Browse the catalog"
+    },
+    "checkout": {
+      "title": "Checkout",
+      "submit": "Place the order",
+      "contacts": "Contacts",
+      "contactsText": "We send the order status to this phone and email.",
+      "name": "Full name",
+      "phone": "Phone",
+      "email": "Email",
+      "address": "Address",
+      "addressText": "Where the courier brings the order.",
+      "street": "Street",
+      "house": "House",
+      "flat": "Flat",
+      "entrance": "Entrance",
+      "floor": "Floor",
+      "comment": "Comment for the courier",
+      "slot": "Delivery window",
+      "slotText": "Pick a two-hour window.",
+      "payment": "Payment",
+      "paymentText": "You pay after we confirm the order.",
+      "consent": "I agree to the terms of sale and the privacy policy",
+      "legal": "By placing the order you confirm the address and the window."
+    },
+    "pages": {
+      "catalogTitle": "Catalog",
+      "catalogLead": "Lamps, bags and desk goods, sorted by what people buy most.",
+      "cartLead": "Check the lines, add a promo code and go to checkout.",
+      "checkoutLead": "Four short steps and the order is on its way.",
+      "related": "You may also like",
+      "bestsellers": "Bestsellers"
+    }
+  },
+  "promo": {
+    "announcement": {
+      "label": "Announcement",
+      "text": "New: dark mode for every block.",
+      "cta": "See what is new",
+      "dismiss": "Dismiss the announcement",
+      "badge": "New"
+    },
+    "cookie": {
+      "title": "We use cookies",
+      "text": "Cookies keep the site working and show us what to improve. You can change your choice at any time.",
+      "accept": "Accept all",
+      "decline": "Decline",
+      "settings": "Settings"
+    },
+    "newsletter": {
+      "title": "Get the monthly digest",
+      "text": "One short email a month with new blocks, guides and releases.",
+      "label": "Email address",
+      "submit": "Subscribe",
+      "consent": "One email a month. You can unsubscribe at any time."
+    }
+  },
+  "content": {
+    "posts": {
+      "title": "Latest News",
+      "action": "All Posts"
+    },
+    "labels": {
+      "minutes": "{0} min read",
+      "by": "By {0}",
+      "read": "Read the post",
+      "empty": "This post is not available"
+    },
+    "postSplit": {
+      "role": "Head of Growth",
+      "bio": "Mara writes about fast pages and the habits that keep them fast. She has shipped sites for teams of every size.",
+      "views": "12.8K",
+      "likes": "892",
+      "labels": {
+        "minutes": "{0} min read",
+        "views": "{0} views",
+        "likes": "{0} likes",
+        "share": "Share",
+        "save": "Save",
+        "read": "Start reading",
+        "related": "Related"
+      }
+    },
+    "postShowcase": {
+      "title": "Worth reading this week",
+      "lead": "The posts our readers shared most, picked by the editors.",
+      "badge": "Editors' picks",
+      "action": "View all posts"
+    }
+  },
+  "auth": {
+    "labels": {
+      "name": "Full name",
+      "email": "Email",
+      "password": "Password",
+      "remember": "Remember me",
+      "forgot": "Forgot password?",
+      "terms": "I agree to the terms of service",
+      "divider": "or",
+      "passkey": "Continue with a passkey",
+      "magic": "Email me a sign-in link"
+    },
+    "signin": {
+      "title": "Welcome back",
+      "text": "Sign in to continue to your workspace.",
+      "submit": "Sign in",
+      "switchText": "New here?",
+      "switchLink": "Create an account"
+    },
+    "signup": {
+      "title": "Create your account",
+      "text": "Start free. No card required.",
+      "submit": "Create account",
+      "switchText": "Already have an account?",
+      "switchLink": "Sign in"
+    },
+    "reset": {
+      "title": "Reset your password",
+      "text": "Enter your email and we will send you a link.",
+      "submit": "Send the link",
+      "switchText": "Remembered it?",
+      "switchLink": "Back to sign in"
+    },
+    "magic": {
+      "title": "Sign in with a link",
+      "text": "We email you a link. No password needed.",
+      "submit": "Email me a link",
+      "switchText": "Prefer a password?",
+      "switchLink": "Sign in"
+    }
+  },
+  "account": {
+    "profile": {
+      "title": "Profile",
+      "text": "Your name and email appear on invoices and in comments.",
+      "labels": {
+        "picture": "Profile picture",
+        "change": "Change picture",
+        "name": "Full name",
+        "email": "Email",
+        "bio": "Short bio",
+        "prefs": "Notifications",
+        "updates": "Product updates",
+        "alerts": "Security alerts",
+        "save": "Save changes",
+        "cancel": "Cancel"
+      }
+    }
+  },
+  "dashboard": {
+    "metrics": {
+      "title": "Overview"
+    },
+    "chart": {
+      "title": "Orders this week",
+      "text": "Orders per day over the last seven days.",
+      "summary": "Bar chart of orders per day, Monday to Sunday",
+      "percent": "{0}%"
+    },
+    "activity": {
+      "title": "Recent activity",
+      "text": "What happened in your workspace."
+    },
+    "empty": {
+      "orders": {
+        "title": "No orders yet",
+        "text": "When a customer buys something, the order shows up here.",
+        "cta": "Add a product"
+      },
+      "results": {
+        "title": "Nothing found",
+        "text": "Try another word or clear the filters.",
+        "cta": "Clear filters"
+      },
+      "inbox": {
+        "title": "You are all caught up",
+        "text": "New messages will appear here.",
+        "cta": "Refresh"
+      },
+      "tour": {
+        "title": "Take a quick tour",
+        "text": "A few short stops show you where everything is.",
+        "cta": "Start the tour"
+      }
+    },
+    "shells": {
+      "title": "Orders",
+      "label": "App navigation",
+      "subTitle": "Orders",
+      "search": "Search orders",
+      "shortcut": "Ctrl K",
+      "expand": "Expand the sidebar",
+      "userName": "Mara Quinn",
+      "copyright": "2026 Northwind. All rights reserved.",
+      "footerLabel": "Help links"
+    }
+  },
+  "onboarding": {
+    "checklist": {
+      "title": "Get started",
+      "progress": "{0} of {1} done"
+    },
+    "stepper": {
+      "title": "Set up your workspace",
+      "stepLabel": "Step {0} of {1}",
+      "back": "Back",
+      "next": "Continue"
+    }
+  },
+  "support": {
+    "contact": {
+      "title": "Contact us",
+      "text": "Tell us what you need and a person will answer within one working day.",
+      "labels": {
+        "name": "Your name",
+        "email": "Email",
+        "subject": "Subject",
+        "message": "Message",
+        "consent": "I agree to be contacted about this request",
+        "submit": "Send message"
+      }
+    },
+    "channels": {
+      "title": "Other ways to reach us",
+      "open": "Open"
+    }
+  },
+  "vibe": {
+    "nav": {
+      "label": "Main navigation",
+      "search": "Search the site",
+      "shortcut": "Ctrl K"
+    },
+    "mega": {
+      "trigger": "Product",
+      "promoTitle": "What is new",
+      "promoText": "Read the notes of this month's release."
+    },
+    "sitemap": {
+      "label": "Footer links",
+      "tagline": "Build pages from blocks that follow your data.",
+      "copyright": "2026 Northwind. All rights reserved.",
+      "status": "All systems operational",
+      "signupTitle": "Get product news",
+      "signupLabel": "Email address",
+      "signupSubmit": "Subscribe"
+    },
+    "bento": {
+      "title": "Everything in one place"
+    },
+    "tabs": {
+      "title": "One product, many jobs",
+      "label": "Features"
+    },
+    "accordion": {
+      "title": "Questions about the features"
+    },
+    "sticky": {
+      "title": "Follow the story"
+    },
+    "wall": {
+      "title": "And much more"
+    },
+    "beforeafter": {
+      "title": "Before and after",
+      "labels": {
+        "before": "Before",
+        "after": "After"
+      }
+    },
+    "proof": {
+      "title": "Trusted by teams everywhere"
+    },
+    "videos": {
+      "title": "Hear it from customers",
+      "play": "Play video"
+    },
+    "compare": {
+      "title": "Compare the plans",
+      "labels": {
+        "caption": "Features by plan",
+        "feature": "Feature",
+        "a": "Free",
+        "b": "Pro",
+        "c": "Team",
+        "yes": "Included",
+        "no": "Not included"
+      }
+    },
+    "rivals": {
+      "title": "How we compare",
+      "labels": {
+        "caption": "Features compared with other tools",
+        "feature": "Feature",
+        "a": "Us",
+        "b": "Tool B",
+        "c": "Tool C",
+        "yes": "Included",
+        "no": "Not included"
+      }
+    },
+    "usage": {
+      "title": "Estimate your bill",
+      "text": "Move the slider to the number of requests you expect each month.",
+      "currency": "USD",
+      "slider": "Requests per month",
+      "unit": "requests",
+      "estimate": "Estimated monthly price",
+      "cta": "Start for free"
+    },
+    "credits": {
+      "title": "Buy credits",
+      "badges": {
+        "popular": "Popular",
+        "best": "Best value"
+      },
+      "buy": "Buy now"
+    },
+    "pagehead": {
+      "title": "A page title",
+      "text": "One sentence that says what this page is for.",
+      "cta": "Take the next step"
+    },
+    "authpage": {
+      "visualTitle": "Ship pages faster",
+      "visualText": "Blocks, data and checks in one place, so a page is ready when the idea is."
+    },
+    "wizard": {
+      "title": "Create your account",
+      "labels": {
+        "stepOf": "Step {0} of {1}",
+        "steps": "Sign-up steps",
+        "back": "Back",
+        "next": "Continue",
+        "finish": "Finish"
+      }
+    },
+    "shell": {
+      "title": "Overview"
+    },
+    "overview": {
+      "title": "This week at a glance"
+    },
+    "kanban": {
+      "title": "Launch board",
+      "count": "{0} cards"
+    },
+    "sidebar": {
+      "label": "App navigation",
+      "userName": "Mara Quinn",
+      "userEmail": "mara@example.com"
+    },
+    "bottom": {
+      "label": "App tabs"
+    },
+    "skeleton": {
+      "title": "Loading the page",
+      "label": "Loading"
+    },
+    "tour": {
+      "title": "Add your first block",
+      "text": "Pick a block from the list and it appears on the page.",
+      "target": "Add block",
+      "position": "Step 2 of 4",
+      "skip": "Skip the tour",
+      "next": "Next"
+    },
+    "modal": {
+      "title": "Watch the walkthrough",
+      "text": "A three-minute tour of the editor.",
+      "close": "Close the video",
+      "play": "Play the video",
+      "chapters": "Chapters"
+    },
+    "error": {
+      "title": "This page could not be found",
+      "text": "The link may be old, or the page may have moved.",
+      "status": "404",
+      "cta": "Back to the home page",
+      "secondary": "Contact support"
+    },
+    "article": {
+      "title": "Why pages should start from data",
+      "toc": "On this page"
+    },
+    "billing": {
+      "label": "Billing period",
+      "monthly": "Monthly",
+      "annual": "Annual",
+      "save": "Save 2 months"
+    },
+    "faq": {
+      "tabs": "Question topics",
+      "search": "Search the questions",
+      "empty": "No questions to show"
+    },
+    "cta": {
+      "quote": "We shipped our site in a week.",
+      "quoteBy": "Mara Quinn, Northwind"
+    },
+    "code": {
+      "title": "Terminal",
+      "prompt": "$"
+    },
+    "posts": {
+      "topics": "Topics"
+    },
+    "hero": {
+      "promptLabel": "Describe your page",
+      "attach": "brief.md",
+      "model": "Model",
+      "badgeMark": "NEW",
+      "badgeLabel": "Version 2.0 is out",
+      "title": "Build your next page"
+    },
+    "templates": {
+      "title": "Browse templates",
+      "browse": "Browse All",
+      "filters": "Template topics",
+      "views": "Views",
+      "likes": "Likes"
+    }
+  },
+  "pages": {
+    "marketingLanding": {
+      "home": {
+        "nav": "Home",
+        "title": "Ship pages that stay simple",
+        "text": "One toolkit for the page, the proof and the call to action.",
+        "cta": "See the launch page"
+      },
+      "launch": {
+        "nav": "Launch",
+        "title": "Be first in line",
+        "text": "Leave an address and get the first invitation.",
+        "cta": "Read the developer page"
+      },
+      "developers": {
+        "nav": "Developers",
+        "title": "Built for developers",
+        "text": "Install, run and read the output in one terminal.",
+        "cta": "Meet the studio"
+      },
+      "studio": {
+        "nav": "Studio",
+        "title": "Big words, small page",
+        "text": "Type first, picture second, one button.",
+        "cta": "See the events page"
+      },
+      "events": {
+        "nav": "Events",
+        "title": "Join us on stage",
+        "text": "Talks, workshops and a room full of builders.",
+        "cta": "Back to the start"
+      },
+      "company": {
+        "nav": "Company",
+        "title": "About us",
+        "text": "How we work, where we came from and who we are.",
+        "cta": "See the work"
+      },
+      "work": {
+        "nav": "Work"
+      },
+      "teams": {
+        "nav": "Teams"
+      }
+    },
+    "marketingProduct": {
+      "home": {
+        "nav": "Home",
+        "title": "One product, many jobs",
+        "text": "See what it does and how the parts fit together.",
+        "cta": "Take the tour"
+      },
+      "tour": {
+        "nav": "Tour",
+        "title": "Take the tour",
+        "text": "Four stops: the list, the steps, the film and the menu.",
+        "cta": "See the capabilities"
+      },
+      "capabilities": {
+        "nav": "Capabilities",
+        "title": "Capabilities",
+        "text": "Every feature in a shape that suits it.",
+        "cta": "See the navigation"
+      },
+      "navigation": {
+        "nav": "Navigation",
+        "title": "Navigation patterns",
+        "text": "Bars, menus and footers in each shape.",
+        "cta": "Back to the start"
+      }
+    },
+    "marketingPricing": {
+      "home": {
+        "nav": "Home",
+        "title": "Plans for every team",
+        "text": "Pick a plan, change it when the team grows.",
+        "cta": "Compare the plans"
+      },
+      "plans": {
+        "nav": "Plans",
+        "title": "Free or pro",
+        "text": "Start free; the pro plan adds the rest.",
+        "cta": "See the usage page"
+      },
+      "usage": {
+        "nav": "Usage",
+        "title": "Pay for what you use",
+        "text": "Slide to your volume or buy a pack of credits.",
+        "cta": "See how we compare"
+      },
+      "compare": {
+        "nav": "Compare",
+        "title": "Why teams switch",
+        "text": "Us against the others, line by line.",
+        "cta": "Back to the plans"
+      }
+    },
+    "commerceShop": {
+      "home": {
+        "nav": "Home",
+        "title": "Good things for your desk",
+        "text": "New arrivals, picked by hand and shipped in two days.",
+        "cta": "Browse the catalog"
+      },
+      "catalog": {
+        "nav": "Catalog"
+      },
+      "browse": {
+        "nav": "Browse",
+        "title": "Browse by mood",
+        "text": "Three ways to look at the same shelf.",
+        "cta": "Open a product"
+      },
+      "offers": {
+        "nav": "Offers"
+      },
+      "product": {
+        "nav": "Product"
+      },
+      "cart": {
+        "nav": "Cart",
+        "title": "Your cart",
+        "text": "Check the lines and the total, then pay.",
+        "cta": "Go to checkout"
+      },
+      "checkout": {
+        "nav": "Checkout",
+        "title": "Place your order",
+        "text": "Four short steps and the order is on its way.",
+        "cta": "See the delivery options"
+      },
+      "delivery": {
+        "nav": "Delivery",
+        "title": "Delivery and pickup",
+        "text": "Zones, windows and the stores near you.",
+        "cta": "See your orders"
+      },
+      "orders": {
+        "nav": "Orders",
+        "title": "Your orders",
+        "text": "Every order, with its status.",
+        "cta": "Back to the shop"
+      }
+    },
+    "promoCampaign": {
+      "home": {
+        "nav": "Home",
+        "title": "Spring campaign",
+        "text": "A week of offers with a sign-up for early access.",
+        "cta": "See the launch"
+      },
+      "launch": {
+        "nav": "Launch",
+        "title": "The launch is live",
+        "text": "Everything new in one place.",
+        "cta": "See the offer"
+      },
+      "offer": {
+        "nav": "Offer",
+        "title": "Limited offer",
+        "text": "Three banners, one deadline.",
+        "cta": "See the notices"
+      },
+      "notices": {
+        "nav": "Notices",
+        "title": "Notices",
+        "text": "The bottom bar, the dismissible bar and the cookie choices.",
+        "cta": "Back to the start"
+      }
+    },
+    "contentBlog": {
+      "home": {
+        "nav": "Home",
+        "title": "The journal",
+        "text": "Notes on design, engineering and the work in between.",
+        "cta": "Read the articles"
+      },
+      "articles": {
+        "nav": "Articles",
+        "title": "All articles",
+        "text": "Filter by topic.",
+        "cta": "Open the archive"
+      },
+      "archive": {
+        "nav": "Archive",
+        "title": "Archive",
+        "text": "Older posts as a list, a digest and plain titles.",
+        "cta": "Read a post"
+      },
+      "post": {
+        "nav": "Post"
+      },
+      "story": {
+        "nav": "Story"
+      },
+      "essay": {
+        "nav": "Essay"
+      },
+      "plain": {
+        "nav": "Plain"
+      }
+    },
+    "accountPortal": {
+      "home": {
+        "nav": "Home",
+        "title": "Welcome back",
+        "text": "Sign in to pick up where you left off.",
+        "cta": "Sign in"
+      },
+      "start": {
+        "nav": "Start",
+        "title": "Good to see you",
+        "text": "Your workspace is one step away.",
+        "cta": "Sign in"
+      },
+      "signup": {
+        "nav": "Sign up",
+        "title": "Create your account",
+        "text": "Two minutes and you are in.",
+        "cta": "Create account"
+      },
+      "welcome": {
+        "nav": "Welcome",
+        "title": "Choose how to sign in",
+        "text": "Use an account you already have.",
+        "cta": "Continue"
+      },
+      "reset": {
+        "nav": "Reset",
+        "title": "Reset your password",
+        "text": "We send a link to your address.",
+        "cta": "Send the link"
+      },
+      "magic": {
+        "nav": "Magic link",
+        "title": "Sign in with a link",
+        "text": "No password, only your inbox.",
+        "cta": "Send the link"
+      },
+      "minimal": {
+        "nav": "Minimal",
+        "title": "Sign in",
+        "text": "Enter your address and password.",
+        "cta": "Sign in"
+      },
+      "options": {
+        "nav": "Options",
+        "title": "More ways to sign in",
+        "text": "Use a provider or your address.",
+        "cta": "Sign in"
+      },
+      "join": {
+        "nav": "Join",
+        "title": "Join in three steps",
+        "text": "Tell us about you, your team and your plan.",
+        "cta": "Back to sign in"
+      },
+      "cards": {
+        "nav": "Cards",
+        "title": "Sign-in cards",
+        "text": "The card on its own, in three modes.",
+        "cta": "Back to sign in"
+      },
+      "profile": {
+        "nav": "Profile",
+        "title": "Your profile",
+        "text": "Name, address and the way we reach you.",
+        "cta": "Back to sign in"
+      }
+    },
+    "dashboardConsole": {
+      "home": {
+        "nav": "Home",
+        "title": "Overview",
+        "text": "Counters, a chart and what happened last.",
+        "cta": "Open the board"
+      },
+      "board": {
+        "nav": "Board",
+        "title": "Work board",
+        "text": "Cards in lanes; the port adds moving.",
+        "cta": "Open the workspace"
+      },
+      "workspace": {
+        "nav": "Workspace",
+        "title": "Workspace shells",
+        "text": "The frame of a signed-in app in three shapes.",
+        "cta": "See the layouts"
+      },
+      "shells": {
+        "nav": "Shells",
+        "title": "Dashboard shells",
+        "text": "Top bars, sidebars and footers around empty cards.",
+        "cta": "See the layout parts"
+      },
+      "layouts": {
+        "nav": "Layouts",
+        "title": "Layout parts",
+        "text": "The sidebar, the bottom bar and the small widgets.",
+        "cta": "See the states"
+      },
+      "states": {
+        "nav": "States",
+        "title": "Empty and loading",
+        "text": "What the app shows before there is anything to show.",
+        "cta": "Back to the overview"
+      }
+    },
+    "onboardingFlow": {
+      "home": {
+        "nav": "Home",
+        "title": "Get started",
+        "text": "Three steps to a working account.",
+        "cta": "Watch the welcome"
+      },
+      "welcome": {
+        "nav": "Welcome",
+        "title": "Welcome aboard",
+        "text": "A short film, then the checklist.",
+        "cta": "Set up"
+      },
+      "setup": {
+        "nav": "Setup",
+        "title": "Set up your workspace",
+        "text": "Tick the tasks as you go.",
+        "cta": "Take the tour"
+      },
+      "tour": {
+        "nav": "Tour",
+        "title": "Product tour",
+        "text": "Callouts that point at the thing they explain.",
+        "cta": "Back to the start"
+      }
+    },
+    "supportCenter": {
+      "home": {
+        "nav": "Home",
+        "title": "How can we help?",
+        "text": "Pick a channel, read the answers or write to us.",
+        "cta": "Open the FAQ"
+      },
+      "faq": {
+        "nav": "FAQ",
+        "title": "Questions and answers",
+        "text": "Search, or ask the chat.",
+        "cta": "Contact us"
+      },
+      "contact": {
+        "nav": "Contact",
+        "title": "Contact us",
+        "text": "We answer within one working day.",
+        "cta": "Back to the help center"
+      },
+      "missing": {
+        "nav": "Missing",
+        "title": "This page is gone",
+        "text": "The address is wrong or the page moved.",
+        "cta": "Back to the help center"
+      },
+      "moved": {
+        "nav": "Moved",
+        "title": "This page moved",
+        "text": "Try the search, or go back.",
+        "cta": "Back to the help center"
+      }
+    }
+  },
+  "catalog": {
+    "title": "Catalog",
+    "intro": "The blocks of the kit by section and category, with all their variants, and whole pages built from them. Pick a category to see its blocks.",
+    "back": "Back to the catalog",
+    "backPages": "All pages",
+    "navLabel": "Catalog",
+    "categoriesTab": "Categories",
+    "count": "Blocks: {0}, variants: {1}",
+    "pagesTitle": "Pages",
+    "pagesText": "Whole pages composed of catalog blocks, top to bottom, on the same data.",
+    "pageCount": "Blocks: {0}",
+    "sections": {
+      "marketing": {
+        "title": "Marketing",
+        "text": "Landing page sections: navigation, hero, features, proof, pricing, FAQ, calls to action, footers, team and company pages."
+      },
+      "content": {
+        "title": "Content",
+        "text": "A blog and documents: post lists, post headers and long reading pages."
+      },
+      "promo": {
+        "title": "Promo",
+        "text": "Announcements, the cookie notice and newsletter sign-ups."
+      },
+      "support": {
+        "title": "Support",
+        "text": "Contact forms, the ways to reach a person and error pages."
+      },
+      "commerce": {
+        "title": "Commerce",
+        "text": "A whole store: storefront, categories, products, product page, cart, checkout and order history."
+      },
+      "app": {
+        "title": "App and dashboard",
+        "text": "The inside of a product: shells and navigation, dashboard widgets, states, sign-in, settings and onboarding."
+      }
+    },
+    "categories": {
+      "marketingNavigation": "Navigation",
+      "marketingHero": "Hero",
+      "marketingHeroSplit": "Split heroes",
+      "marketingPageHead": "Page head",
+      "marketingPageTrail": "Page headings with breadcrumbs",
+      "marketingFeatures": "Feature grids",
+      "marketingFeaturesSplit": "Features beside a picture",
+      "marketingFeatureCards": "Feature cards with a picture",
+      "marketingMediaList": "Lists beside a picture",
+      "marketingShowcases": "Feature showcases",
+      "marketingHowItWorks": "How it works",
+      "marketingProof": "Logos and proof",
+      "marketingStats": "Stats",
+      "marketingTestimonials": "Testimonials",
+      "marketingTestimonialsSplit": "Split testimonials",
+      "marketingPricing": "Pricing plans",
+      "marketingPricingTools": "Pricing tools",
+      "marketingFaq": "FAQ",
+      "marketingCta": "Call to action",
+      "marketingCtaProof": "Calls to action with proof",
+      "marketingTeam": "Team",
+      "marketingAbout": "About",
+      "marketingPortfolio": "Portfolio",
+      "marketingCareers": "Careers",
+      "marketingGallery": "Galleries",
+      "marketingFooter": "Footer",
+      "marketingFooterSplit": "Footers with more",
+      "contentBlog": "Blog",
+      "contentPostShowcase": "Post showcase",
+      "contentPostHeader": "Post header",
+      "contentPostHeaderSplit": "Post headers with more",
+      "contentArticle": "Article and legal",
+      "contentTimeline": "Timeline",
+      "contentStoryTabs": "Story in steps",
+      "promoBanners": "Banners",
+      "promoNewsletter": "Newsletter",
+      "supportContact": "Contact",
+      "supportStates": "Error pages",
+      "commerceStorefront": "Storefront",
+      "commerceCategories": "Categories and filters",
+      "commerceProducts": "Product grids and rails",
+      "commerceProduct": "Product page",
+      "commerceCart": "Cart",
+      "commerceCheckout": "Checkout",
+      "commerceDelivery": "Delivery and pickup",
+      "commerceOrders": "Orders",
+      "appShell": "Shells and navigation",
+      "appDashboardShells": "Dashboard shells",
+      "appWidgets": "Dashboard widgets",
+      "appBoards": "Dashboard boards",
+      "appStates": "Empty and loading states",
+      "appAuth": "Sign in and sign up",
+      "appAuthPages": "Sign-in pages",
+      "appSettings": "Settings",
+      "appOnboarding": "Onboarding",
+      "appGuidance": "Guidance"
+    },
+    "pages": {
+      "saasLanding": {
+        "title": "SaaS landing",
+        "text": "Split hero, logos, features, a sticky list, figures, quotes, plans, questions and a closing call to action."
+      },
+      "company": {
+        "title": "Company",
+        "text": "The page head, the culture, the story, the team, a mosaic of photos, the open roles and a call to action."
+      },
+      "portfolio": {
+        "title": "Portfolio",
+        "text": "A personal about section, selected projects, a masonry of photos, quotes and a call to action."
+      },
+      "storeHome": {
+        "title": "Store home",
+        "text": "An offer bar, a hero with an offer card, category tiles, bestsellers, a rail of deals, the store promises and a closing offer."
+      },
+      "storeHome2": {
+        "title": "Store home, picture hero",
+        "text": "Text over a faint picture, a strip of promises, the products, the delivery facts and the stores."
+      },
+      "storeCatalog": {
+        "title": "Catalog",
+        "text": "The page head, chips under a toolbar and a compact grid of products."
+      },
+      "productDetail": {
+        "title": "Product page",
+        "text": "The gallery and the buy box, the details and specs, reviews and a rail of related products."
+      },
+      "cart": {
+        "title": "Cart",
+        "text": "The cart lines beside the summary with a promo code, then a rail of products."
+      },
+      "checkout": {
+        "title": "Checkout",
+        "text": "The page head and the checkout steps beside a sticky order summary."
+      },
+      "shellClassic": {
+        "title": "Shell: top bar and sidebar",
+        "text": "A top bar with search across the app over a wide sidebar."
+      },
+      "shellInset": {
+        "title": "Shell: top bar over the content",
+        "text": "A wide sidebar beside a column with its own top bar and footer."
+      },
+      "shellRail": {
+        "title": "Shell: icon rail",
+        "text": "A top bar without search over a rail of icons and a list."
+      },
+      "shellRailFooter": {
+        "title": "Shell: rail with a footer",
+        "text": "An icon rail, a top bar over the content and a footer across."
+      },
+      "shellCollapsed": {
+        "title": "Shell: collapsed sidebar",
+        "text": "The static collapsed state of a sidebar with its expand button."
+      },
+      "shellTwoLevel": {
+        "title": "Shell: two-level sidebar",
+        "text": "A rail beside the links of the current section."
+      },
+      "shellTwoLevelFull": {
+        "title": "Shell: two levels under a top bar",
+        "text": "A top bar across, a two-level sidebar and a footer across."
+      },
+      "shellEnd": {
+        "title": "Shell: sidebar at the end",
+        "text": "A wide sidebar on the end side and a footer across."
+      },
+      "shellRailEnd": {
+        "title": "Shell: rail at the end",
+        "text": "An icon rail on the end side with a footer under the content."
+      },
+      "shellTopOnly": {
+        "title": "Shell: top bar only",
+        "text": "The links in the top bar and no sidebar."
+      },
+      "shellSideOnly": {
+        "title": "Shell: sidebar only",
+        "text": "A wide sidebar with the brand and no top bar."
+      },
+      "shellCollapsedEnd": {
+        "title": "Shell: collapsed at the end",
+        "text": "A collapsed sidebar on the end side, no top bar, a footer across."
+      }
+    }
+  },
+  "company": {
+    "team": {
+      "title": "The people behind the product",
+      "lead": "A small team in six cities, working in the open."
+    },
+    "depts": {
+      "leadership": "Leadership",
+      "engineering": "Engineering",
+      "design": "Design",
+      "product": "Product",
+      "support": "Support"
+    },
+    "photos": {
+      "title": "From the road",
+      "lead": "Places we worked from this year.",
+      "previous": "Previous photo",
+      "next": "Next photo",
+      "counter": "{0} of {1}"
+    },
+    "projects": {
+      "title": "Selected work",
+      "lead": "Products, brands and sites we shipped with our clients.",
+      "featured": "Featured",
+      "view": "Live site",
+      "case": "Read the case"
+    },
+    "jobs": {
+      "title": "Open roles",
+      "lead": "Remote-friendly roles across three teams.",
+      "apply": "Apply",
+      "caption": "Open roles",
+      "role": "Role",
+      "team": "Team",
+      "location": "Location",
+      "type": "Type",
+      "salary": "Salary",
+      "count": "{0} open roles"
+    },
+    "aboutMe": {
+      "title": "Hi, I design calm software",
+      "lead": "Nine years of product design for teams that ship every week. I like systems, plain words and short feedback loops.",
+      "badge": "Available for projects",
+      "level": "{0}%",
+      "cta": "See my work",
+      "more": "Get in touch"
+    },
+    "about": {
+      "title": "How we work",
+      "lead": "A few numbers and the three rules we hire and plan by."
+    },
+    "timeline": {
+      "title": "Our story so far",
+      "lead": "From a list of blocks to a kit in eight runtimes."
+    },
+    "pages": {
+      "companyTitle": "About the company",
+      "companyLead": "How we work, where we came from and who builds it."
+    },
+    "storyTabs": {
+      "title": "Five years in four steps",
+      "lead": "Pick a year to see what changed for the people who use the kit.",
+      "badge": "Our story",
+      "labels": {
+        "step": "Step {0} of {1}",
+        "previous": "Previous step",
+        "next": "Next step"
+      }
+    }
+  },
+  "skins": {
+    "title": "Skins",
+    "intro": "Change the look of the whole preview: pick a skin, then a font or a corner radius on top of it. The choice applies to every screen and stays after a reload.",
+    "navLabel": "Skins",
+    "back": "Back to the skins",
+    "sample": {
+      "card": "Card title",
+      "text": "Muted text on a card",
+      "button": "Button"
+    },
+    "skins": {
+      "title": "Skins",
+      "text": "The default theme and 14 presets from tweakcn. Each tile is drawn in its own skin.",
+      "reset": "Back to the build skin",
+      "names": {
+        "default": "Default",
+        "modernMinimal": "Modern Minimal",
+        "violetBloom": "Violet Bloom",
+        "t3Chat": "T3 Chat",
+        "bubblegum": "Bubblegum",
+        "doom64": "Doom 64",
+        "amberMinimal": "Amber Minimal",
+        "supabase": "Supabase",
+        "kodamaGrove": "Kodama Grove",
+        "perpetuity": "Perpetuity",
+        "cosmicNight": "Cosmic Night",
+        "claude": "Claude",
+        "mochaMousse": "Mocha Mousse",
+        "neoBrutalism": "Neo Brutalism",
+        "notebook": "Notebook"
+      }
+    },
+    "fonts": {
+      "title": "Fonts",
+      "text": "Google fonts with Latin and Cyrillic letters. A font replaces the font of the skin; click it again to go back.",
+      "reset": "Back to the skin font",
+      "specimen": "Aa \u0411\u0431 \u042f\u044f",
+      "pangram": "The quick brown fox jumps over the lazy dog",
+      "names": {
+        "inter": "Inter",
+        "roboto": "Roboto",
+        "manrope": "Manrope",
+        "montserrat": "Montserrat",
+        "rubik": "Rubik",
+        "nunito": "Nunito",
+        "ibmPlexSans": "IBM Plex Sans",
+        "golosText": "Golos Text",
+        "onest": "Onest",
+        "openSans": "Open Sans"
+      }
+    },
+    "radius": {
+      "title": "Corner radius",
+      "text": "A radius replaces the radius of the skin on every plain rounded corner; click it again to go back.",
+      "reset": "Back to the skin radius",
+      "names": {
+        "r0": "0",
+        "r4": "4 px",
+        "r8": "8 px",
+        "r12": "12 px",
+        "r16": "16 px"
+      }
+    }
+  },
+  "discovery": {
+    "title": "Discovery"
+  },
+  "empty": {
+    "logos": "No logos to show yet",
+    "features": "No features to show yet",
+    "steps": "No steps to show yet",
+    "quotes": "No quotes to show yet",
+    "members": "No people to show yet",
+    "perks": "No promises to show yet",
+    "metrics": "No figures to show yet",
+    "series": "No data to chart yet",
+    "activity": "No activity yet",
+    "tasks": "No tasks yet",
+    "cart": "Your cart is empty",
+    "summary": "Nothing to total yet",
+    "orders": "No orders yet",
+    "photos": "No photos yet",
+    "projects": "No projects yet",
+    "milestones": "No milestones yet",
+    "tiles": "No features to show yet",
+    "points": "No points to compare yet",
+    "channels": "No ways to reach us yet",
+    "packs": "No packs on sale yet",
+    "zones": "No delivery zones yet",
+    "stores": "No stores yet",
+    "sections": "Nothing to read yet",
+    "lanes": "No lanes yet",
+    "rows": "Nothing to compare yet",
+    "days": "No delivery windows yet",
+    "posts": "No posts yet",
+    "jobs": "No open jobs right now",
+    "templates": "No templates yet"
+  }
+} as const;
diff --git a/packages/shared/app/src/data/activity.ts b/packages/shared/app/src/data/activity.ts
new file mode 100644
index 0000000..fcf5d74
--- /dev/null
+++ b/packages/shared/app/src/data/activity.ts
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/activity.json
+// Fixture of the Codex collection "activity" (xgen/fixtures/activity.json)
+export const activity = [
+  {
+    "id": "event-a1",
+    "locale": "en",
+    "kind": "event",
+    "status": "published",
+    "visibility": "public",
+    "slug": "a1",
+    "title": "Plan upgraded to Team",
+    "metadata": {
+      "text": {
+        "value": "Billing changed by Dana Pierce."
+      },
+      "time": {
+        "value": "2026-03-30T11:58:00Z"
+      },
+      "tone": {
+        "value": "green"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "event-a2",
+    "locale": "en",
+    "kind": "event",
+    "status": "published",
+    "visibility": "public",
+    "slug": "a2",
+    "title": "New member joined",
+    "metadata": {
+      "text": {
+        "value": "Ravi Menon accepted the invitation."
+      },
+      "time": {
+        "value": "2026-03-30T11:00:00Z"
+      },
+      "tone": {
+        "value": "blue"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "event-a3",
+    "locale": "en",
+    "kind": "event",
+    "status": "published",
+    "visibility": "public",
+    "slug": "a3",
+    "title": "Export finished",
+    "metadata": {
+      "text": {
+        "value": "Customers.csv is ready to download."
+      },
+      "time": {
+        "value": "2026-03-29T12:00:00Z"
+      },
+      "tone": {
+        "value": "gray"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "event-a4",
+    "locale": "en",
+    "kind": "event",
+    "status": "published",
+    "visibility": "public",
+    "slug": "a4",
+    "title": "Payment failed",
+    "metadata": {
+      "text": {
+        "value": "The card ending 4242 was declined."
+      },
+      "time": {
+        "value": "2026-03-28T12:00:00Z"
+      },
+      "tone": {
+        "value": "red"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/article.ts b/packages/shared/app/src/data/article.ts
new file mode 100644
index 0000000..a83e8fc
--- /dev/null
+++ b/packages/shared/app/src/data/article.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/article.json
+// Fixture of the Codex collection "article" (xgen/fixtures/article.json)
+export const article = [
+  {
+    "id": "section-why",
+    "locale": "en",
+    "kind": "section",
+    "status": "published",
+    "visibility": "public",
+    "slug": "why",
+    "title": "Why start with the data",
+    "metadata": {
+      "text": {
+        "value": "A page that reads one source stays correct when the source changes. Everything else is layout, and layout is cheap to change."
+      },
+      "quote": {
+        "value": ""
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "section-blocks",
+    "locale": "en",
+    "kind": "section",
+    "status": "published",
+    "visibility": "public",
+    "slug": "blocks",
+    "title": "Compose from blocks",
+    "metadata": {
+      "text": {
+        "value": "Each block names its axes and its variants. A page is a list of blocks, so a new page is a few lines of data."
+      },
+      "quote": {
+        "value": "Pages are lists, not copies."
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "section-check",
+    "locale": "en",
+    "kind": "section",
+    "status": "published",
+    "visibility": "public",
+    "slug": "check",
+    "title": "Check what you ship",
+    "metadata": {
+      "text": {
+        "value": "Checks read the same specs as the generator, so a page cannot drift from its source without failing the build."
+      },
+      "quote": {
+        "value": ""
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "section-next",
+    "locale": "en",
+    "kind": "section",
+    "status": "published",
+    "visibility": "public",
+    "slug": "next",
+    "title": "Where to go next",
+    "metadata": {
+      "text": {
+        "value": "Open the gallery, pick a variant and put it on a page. The guides cover themes, data and deployment."
+      },
+      "quote": {
+        "value": ""
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/beforeafter.ts b/packages/shared/app/src/data/beforeafter.ts
new file mode 100644
index 0000000..f2e4c49
--- /dev/null
+++ b/packages/shared/app/src/data/beforeafter.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/beforeafter.json
+// Fixture of the Codex collection "beforeafter" (xgen/fixtures/beforeafter.json)
+export const beforeafter = [
+  {
+    "id": "point-setup",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "setup",
+    "title": "Setup",
+    "metadata": {
+      "before": {
+        "value": "Weeks of wiring"
+      },
+      "after": {
+        "value": "One command"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "point-pages",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "pages",
+    "title": "Pages",
+    "metadata": {
+      "before": {
+        "value": "Copied by hand"
+      },
+      "after": {
+        "value": "Composed from blocks"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "point-themes",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "themes",
+    "title": "Themes",
+    "metadata": {
+      "before": {
+        "value": "Colors set one by one"
+      },
+      "after": {
+        "value": "Tokens shared by every block"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "point-checks",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "checks",
+    "title": "Checks",
+    "metadata": {
+      "before": {
+        "value": "Review by eye"
+      },
+      "after": {
+        "value": "Automatic on every build"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/bento.ts b/packages/shared/app/src/data/bento.ts
new file mode 100644
index 0000000..1d2899e
--- /dev/null
+++ b/packages/shared/app/src/data/bento.ts
@@ -0,0 +1,173 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/bento.json
+// Fixture of the Codex collection "bento" (xgen/fixtures/bento.json)
+export const bento = [
+  {
+    "id": "tile-speed",
+    "locale": "en",
+    "kind": "tile",
+    "status": "published",
+    "visibility": "public",
+    "slug": "speed",
+    "title": "Fast by default",
+    "metadata": {
+      "text": {
+        "value": "Pages ship little script and load in under a second."
+      },
+      "icon": {
+        "value": "zap"
+      },
+      "size": {
+        "value": "large"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "tile-blocks",
+    "locale": "en",
+    "kind": "tile",
+    "status": "published",
+    "visibility": "public",
+    "slug": "blocks",
+    "title": "Ready blocks",
+    "metadata": {
+      "text": {
+        "value": "Compose a page from tested blocks and variants."
+      },
+      "icon": {
+        "value": "layout-grid"
+      },
+      "size": {
+        "value": "wide"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "tile-access",
+    "locale": "en",
+    "kind": "tile",
+    "status": "published",
+    "visibility": "public",
+    "slug": "access",
+    "title": "Accessible",
+    "metadata": {
+      "text": {
+        "value": "Landmarks, labels and focus order are checked."
+      },
+      "icon": {
+        "value": "accessibility"
+      },
+      "size": {
+        "value": "small"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "tile-themes",
+    "locale": "en",
+    "kind": "tile",
+    "status": "published",
+    "visibility": "public",
+    "slug": "themes",
+    "title": "Light and dark",
+    "metadata": {
+      "text": {
+        "value": "Every block follows the theme tokens."
+      },
+      "icon": {
+        "value": "moon"
+      },
+      "size": {
+        "value": "small"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "tile-data",
+    "locale": "en",
+    "kind": "tile",
+    "status": "published",
+    "visibility": "public",
+    "slug": "data",
+    "title": "One source of data",
+    "metadata": {
+      "text": {
+        "value": "Pages read collections, never copies."
+      },
+      "icon": {
+        "value": "database"
+      },
+      "size": {
+        "value": "wide"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  },
+  {
+    "id": "tile-secure",
+    "locale": "en",
+    "kind": "tile",
+    "status": "published",
+    "visibility": "public",
+    "slug": "secure",
+    "title": "Private by default",
+    "metadata": {
+      "text": {
+        "value": "Your data stays in your collections."
+      },
+      "icon": {
+        "value": "lock"
+      },
+      "size": {
+        "value": "small"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "tile-export",
+    "locale": "en",
+    "kind": "tile",
+    "status": "published",
+    "visibility": "public",
+    "slug": "export",
+    "title": "Export anywhere",
+    "metadata": {
+      "text": {
+        "value": "Take pages and data with you."
+      },
+      "icon": {
+        "value": "download"
+      },
+      "size": {
+        "value": "small"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/cards.ts b/packages/shared/app/src/data/cards.ts
new file mode 100644
index 0000000..c8dc4ed
--- /dev/null
+++ b/packages/shared/app/src/data/cards.ts
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/cards.json
+// Fixture of the Codex collection "cards" (xgen/fixtures/cards.json)
+export const cards = [
+  {
+    "id": "card-c1",
+    "locale": "en",
+    "kind": "card",
+    "status": "published",
+    "visibility": "public",
+    "slug": "c1",
+    "title": "Write the launch post",
+    "metadata": {
+      "lane": {
+        "value": "todo"
+      },
+      "tag": {
+        "value": "Content"
+      },
+      "who": {
+        "value": "Mara Quinn"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "card-c2",
+    "locale": "en",
+    "kind": "card",
+    "status": "published",
+    "visibility": "public",
+    "slug": "c2",
+    "title": "Review pricing copy",
+    "metadata": {
+      "lane": {
+        "value": "todo"
+      },
+      "tag": {
+        "value": "Growth"
+      },
+      "who": {
+        "value": "Jon Ellis"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "card-c3",
+    "locale": "en",
+    "kind": "card",
+    "status": "published",
+    "visibility": "public",
+    "slug": "c3",
+    "title": "Build the signup flow",
+    "metadata": {
+      "lane": {
+        "value": "doing"
+      },
+      "tag": {
+        "value": "Product"
+      },
+      "who": {
+        "value": "Aya Tanaka"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "card-c4",
+    "locale": "en",
+    "kind": "card",
+    "status": "published",
+    "visibility": "public",
+    "slug": "c4",
+    "title": "Fix the cart total",
+    "metadata": {
+      "lane": {
+        "value": "doing"
+      },
+      "tag": {
+        "value": "Bug"
+      },
+      "who": {
+        "value": "Luis Ortega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "card-c5",
+    "locale": "en",
+    "kind": "card",
+    "status": "published",
+    "visibility": "public",
+    "slug": "c5",
+    "title": "Publish the docs",
+    "metadata": {
+      "lane": {
+        "value": "done"
+      },
+      "tag": {
+        "value": "Docs"
+      },
+      "who": {
+        "value": "Mara Quinn"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  },
+  {
+    "id": "card-c6",
+    "locale": "en",
+    "kind": "card",
+    "status": "published",
+    "visibility": "public",
+    "slug": "c6",
+    "title": "Ship dark mode",
+    "metadata": {
+      "lane": {
+        "value": "done"
+      },
+      "tag": {
+        "value": "Design"
+      },
+      "who": {
+        "value": "Aya Tanaka"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-11T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/cart.ts b/packages/shared/app/src/data/cart.ts
new file mode 100644
index 0000000..a2e22fc
--- /dev/null
+++ b/packages/shared/app/src/data/cart.ts
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/cart.json
+// Fixture of the Codex collection "cart" (xgen/fixtures/cart.json)
+export const cart = [
+  {
+    "id": "cartline-lamp",
+    "locale": "en",
+    "kind": "cartline",
+    "status": "published",
+    "visibility": "public",
+    "slug": "lamp",
+    "title": "Arc desk lamp",
+    "metadata": {
+      "variant": {
+        "value": "Brass"
+      },
+      "price": {
+        "value": 8900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "qty": {
+        "value": 1
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "cartline-bag",
+    "locale": "en",
+    "kind": "cartline",
+    "status": "published",
+    "visibility": "public",
+    "slug": "bag",
+    "title": "Field backpack",
+    "metadata": {
+      "variant": {
+        "value": "Olive"
+      },
+      "price": {
+        "value": 12900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "qty": {
+        "value": 1
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "cartline-mat",
+    "locale": "en",
+    "kind": "cartline",
+    "status": "published",
+    "visibility": "public",
+    "slug": "mat",
+    "title": "Desk mat",
+    "metadata": {
+      "variant": {
+        "value": "Charcoal"
+      },
+      "price": {
+        "value": 3500
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "qty": {
+        "value": 2
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/categories.ts b/packages/shared/app/src/data/categories.ts
new file mode 100644
index 0000000..6829c61
--- /dev/null
+++ b/packages/shared/app/src/data/categories.ts
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/categories.json
+// Fixture of the Codex collection "categories" (xgen/fixtures/categories.json)
+export const categories = [
+  {
+    "id": "category-all",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "all",
+    "title": "All products",
+    "metadata": {
+      "location": {
+        "value": "categories"
+      },
+      "icon": {
+        "value": "layout-grid"
+      },
+      "count": {
+        "value": 48
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "category-desk",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "desk",
+    "title": "Desk",
+    "metadata": {
+      "location": {
+        "value": "categories"
+      },
+      "icon": {
+        "value": "lamp-desk"
+      },
+      "count": {
+        "value": 12
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "category-bags",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "bags",
+    "title": "Bags",
+    "metadata": {
+      "location": {
+        "value": "categories"
+      },
+      "icon": {
+        "value": "briefcase"
+      },
+      "count": {
+        "value": 9
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "category-audio",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "audio",
+    "title": "Audio",
+    "metadata": {
+      "location": {
+        "value": "categories"
+      },
+      "icon": {
+        "value": "headphones"
+      },
+      "count": {
+        "value": 11
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "category-light",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "light",
+    "title": "Lighting",
+    "metadata": {
+      "location": {
+        "value": "categories"
+      },
+      "icon": {
+        "value": "lightbulb"
+      },
+      "count": {
+        "value": 7
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  },
+  {
+    "id": "category-gifts",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "gifts",
+    "title": "Gifts",
+    "metadata": {
+      "location": {
+        "value": "categories"
+      },
+      "icon": {
+        "value": "gift"
+      },
+      "count": {
+        "value": 9
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-11T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/channels.ts b/packages/shared/app/src/data/channels.ts
new file mode 100644
index 0000000..beabff1
--- /dev/null
+++ b/packages/shared/app/src/data/channels.ts
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/channels.json
+// Fixture of the Codex collection "channels" (xgen/fixtures/channels.json)
+export const channels = [
+  {
+    "id": "channel-email",
+    "locale": "en",
+    "kind": "channel",
+    "status": "published",
+    "visibility": "public",
+    "slug": "email",
+    "title": "Email us",
+    "metadata": {
+      "text": {
+        "value": "Answers within one working day."
+      },
+      "icon": {
+        "value": "mail"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "channel-chat",
+    "locale": "en",
+    "kind": "channel",
+    "status": "published",
+    "visibility": "public",
+    "slug": "chat",
+    "title": "Live chat",
+    "metadata": {
+      "text": {
+        "value": "Talk to a person, weekdays 9 to 18."
+      },
+      "icon": {
+        "value": "message-circle"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "channel-docs",
+    "locale": "en",
+    "kind": "channel",
+    "status": "published",
+    "visibility": "public",
+    "slug": "docs",
+    "title": "Read the docs",
+    "metadata": {
+      "text": {
+        "value": "Guides and examples for every block."
+      },
+      "icon": {
+        "value": "book-open"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/chapters.ts b/packages/shared/app/src/data/chapters.ts
new file mode 100644
index 0000000..fdccd87
--- /dev/null
+++ b/packages/shared/app/src/data/chapters.ts
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/chapters.json
+// Fixture of the Codex collection "chapters" (xgen/fixtures/chapters.json)
+export const chapters = [
+  {
+    "id": "chapter-intro",
+    "locale": "en",
+    "kind": "chapter",
+    "status": "published",
+    "visibility": "public",
+    "slug": "intro",
+    "title": "Welcome",
+    "metadata": {
+      "text": {
+        "value": "0:00"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-01T10:00:00Z",
+    "published_at": "2026-03-01T11:00:00Z"
+  },
+  {
+    "id": "chapter-blocks",
+    "locale": "en",
+    "kind": "chapter",
+    "status": "published",
+    "visibility": "public",
+    "slug": "blocks",
+    "title": "Add a block",
+    "metadata": {
+      "text": {
+        "value": "1:10"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-02T10:00:00Z",
+    "published_at": "2026-03-02T11:00:00Z"
+  },
+  {
+    "id": "chapter-publish",
+    "locale": "en",
+    "kind": "chapter",
+    "status": "published",
+    "visibility": "public",
+    "slug": "publish",
+    "title": "Publish the page",
+    "metadata": {
+      "text": {
+        "value": "3:45"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-03T10:00:00Z",
+    "published_at": "2026-03-03T11:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/checklist.ts b/packages/shared/app/src/data/checklist.ts
new file mode 100644
index 0000000..f8216bc
--- /dev/null
+++ b/packages/shared/app/src/data/checklist.ts
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/checklist.json
+// Fixture of the Codex collection "checklist" (xgen/fixtures/checklist.json)
+export const checklist = [
+  {
+    "id": "task-profile",
+    "locale": "en",
+    "kind": "task",
+    "status": "published",
+    "visibility": "public",
+    "slug": "profile",
+    "title": "Complete your profile",
+    "metadata": {
+      "text": {
+        "value": "Add a name and a picture."
+      },
+      "done": {
+        "value": true
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "task-invite",
+    "locale": "en",
+    "kind": "task",
+    "status": "published",
+    "visibility": "public",
+    "slug": "invite",
+    "title": "Invite your team",
+    "metadata": {
+      "text": {
+        "value": "Teammates get access to every page."
+      },
+      "done": {
+        "value": true
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "task-connect",
+    "locale": "en",
+    "kind": "task",
+    "status": "published",
+    "visibility": "public",
+    "slug": "connect",
+    "title": "Connect your data",
+    "metadata": {
+      "text": {
+        "value": "Link a collection or upload a file."
+      },
+      "done": {
+        "value": false
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "task-publish",
+    "locale": "en",
+    "kind": "task",
+    "status": "published",
+    "visibility": "public",
+    "slug": "publish",
+    "title": "Publish your first page",
+    "metadata": {
+      "text": {
+        "value": "Pick a block and press publish."
+      },
+      "done": {
+        "value": false
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "task-domain",
+    "locale": "en",
+    "kind": "task",
+    "status": "published",
+    "visibility": "public",
+    "slug": "domain",
+    "title": "Add a custom domain",
+    "metadata": {
+      "text": {
+        "value": "Point your own address at the site."
+      },
+      "done": {
+        "value": false
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/community.ts b/packages/shared/app/src/data/community.ts
new file mode 100644
index 0000000..415ca92
--- /dev/null
+++ b/packages/shared/app/src/data/community.ts
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/community.json
+// Fixture of the Codex collection "community" (xgen/fixtures/community.json)
+export const community = [
+  {
+    "id": "channel-forum",
+    "locale": "en",
+    "kind": "channel",
+    "status": "published",
+    "visibility": "public",
+    "slug": "forum",
+    "title": "Community forum",
+    "metadata": {
+      "text": {
+        "value": "Ask and answer questions"
+      },
+      "icon": {
+        "value": "users"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "channel-videos",
+    "locale": "en",
+    "kind": "channel",
+    "status": "published",
+    "visibility": "public",
+    "slug": "videos",
+    "title": "Video lessons",
+    "metadata": {
+      "text": {
+        "value": "Short walkthroughs every week"
+      },
+      "icon": {
+        "value": "video"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "community-channel-chat",
+    "locale": "en",
+    "kind": "channel",
+    "status": "published",
+    "visibility": "public",
+    "slug": "community-channel-chat",
+    "title": "Group chat",
+    "metadata": {
+      "text": {
+        "value": "Talk with other builders"
+      },
+      "icon": {
+        "value": "messages-square"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/compare.ts b/packages/shared/app/src/data/compare.ts
new file mode 100644
index 0000000..38a311d
--- /dev/null
+++ b/packages/shared/app/src/data/compare.ts
@@ -0,0 +1,125 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/compare.json
+// Fixture of the Codex collection "compare" (xgen/fixtures/compare.json)
+export const compare = [
+  {
+    "id": "row-seats",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "seats",
+    "title": "Team seats",
+    "metadata": {
+      "a": {
+        "value": "1"
+      },
+      "b": {
+        "value": "10"
+      },
+      "c": {
+        "value": "Unlimited"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "row-storage",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "storage",
+    "title": "Storage",
+    "metadata": {
+      "a": {
+        "value": "1 GB"
+      },
+      "b": {
+        "value": "50 GB"
+      },
+      "c": {
+        "value": "1 TB"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "row-sso",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "sso",
+    "title": "Single sign-on",
+    "metadata": {
+      "a": {
+        "value": "no"
+      },
+      "b": {
+        "value": "no"
+      },
+      "c": {
+        "value": "yes"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "row-support",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "support",
+    "title": "Priority support",
+    "metadata": {
+      "a": {
+        "value": "no"
+      },
+      "b": {
+        "value": "yes"
+      },
+      "c": {
+        "value": "yes"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "row-export",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "export",
+    "title": "Data export",
+    "metadata": {
+      "a": {
+        "value": "yes"
+      },
+      "b": {
+        "value": "yes"
+      },
+      "c": {
+        "value": "yes"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/contacts.ts b/packages/shared/app/src/data/contacts.ts
new file mode 100644
index 0000000..f68fd68
--- /dev/null
+++ b/packages/shared/app/src/data/contacts.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/contacts.json
+// Fixture of the Codex collection "contacts" (xgen/fixtures/contacts.json)
+export const contacts = [
+  {
+    "id": "contact-email",
+    "locale": "en",
+    "kind": "contact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "email",
+    "title": "Email",
+    "metadata": {
+      "text": {
+        "value": "hello@northwind.example"
+      },
+      "icon": {
+        "value": "mail"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "contact-phone",
+    "locale": "en",
+    "kind": "contact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "phone",
+    "title": "Phone",
+    "metadata": {
+      "text": {
+        "value": "+1 555 0100"
+      },
+      "icon": {
+        "value": "phone"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "contact-office",
+    "locale": "en",
+    "kind": "contact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "office",
+    "title": "Office",
+    "metadata": {
+      "text": {
+        "value": "12 Harbor Street, Portland"
+      },
+      "icon": {
+        "value": "map-pin"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "contact-web",
+    "locale": "en",
+    "kind": "contact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "web",
+    "title": "Website",
+    "metadata": {
+      "text": {
+        "value": "northwind.example"
+      },
+      "icon": {
+        "value": "globe"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/credits.ts b/packages/shared/app/src/data/credits.ts
new file mode 100644
index 0000000..95d811e
--- /dev/null
+++ b/packages/shared/app/src/data/credits.ts
@@ -0,0 +1,113 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/credits.json
+// Fixture of the Codex collection "credits" (xgen/fixtures/credits.json)
+export const credits = [
+  {
+    "id": "pack-s",
+    "locale": "en",
+    "kind": "pack",
+    "status": "published",
+    "visibility": "public",
+    "slug": "s",
+    "title": "100 credits",
+    "metadata": {
+      "credits": {
+        "value": 100
+      },
+      "price": {
+        "value": 900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "badge": {
+        "value": ""
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "pack-m",
+    "locale": "en",
+    "kind": "pack",
+    "status": "published",
+    "visibility": "public",
+    "slug": "m",
+    "title": "500 credits",
+    "metadata": {
+      "credits": {
+        "value": 500
+      },
+      "price": {
+        "value": 3900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "badge": {
+        "value": "popular"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "pack-l",
+    "locale": "en",
+    "kind": "pack",
+    "status": "published",
+    "visibility": "public",
+    "slug": "l",
+    "title": "2,000 credits",
+    "metadata": {
+      "credits": {
+        "value": 2000
+      },
+      "price": {
+        "value": 12900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "badge": {
+        "value": "best"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "pack-xl",
+    "locale": "en",
+    "kind": "pack",
+    "status": "published",
+    "visibility": "public",
+    "slug": "xl",
+    "title": "10,000 credits",
+    "metadata": {
+      "credits": {
+        "value": 10000
+      },
+      "price": {
+        "value": 54900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "badge": {
+        "value": ""
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/crumbs.ts b/packages/shared/app/src/data/crumbs.ts
new file mode 100644
index 0000000..9f07eb6
--- /dev/null
+++ b/packages/shared/app/src/data/crumbs.ts
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/crumbs.json
+// Fixture of the Codex collection "crumbs" (xgen/fixtures/crumbs.json)
+export const crumbs = [
+  {
+    "id": "page-home",
+    "locale": "en",
+    "kind": "page",
+    "status": "published",
+    "visibility": "public",
+    "slug": "home",
+    "title": "Home",
+    "metadata": {
+      "icon": {
+        "value": "house"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "page-shop",
+    "locale": "en",
+    "kind": "page",
+    "status": "published",
+    "visibility": "public",
+    "slug": "shop",
+    "title": "Shop",
+    "parent_id": "page-home",
+    "metadata": {
+      "icon": {
+        "value": "store"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "page-catalog",
+    "locale": "en",
+    "kind": "page",
+    "status": "published",
+    "visibility": "public",
+    "slug": "catalog",
+    "title": "Catalog",
+    "parent_id": "page-shop",
+    "metadata": {
+      "icon": {
+        "value": "layers"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/days.ts b/packages/shared/app/src/data/days.ts
new file mode 100644
index 0000000..2583737
--- /dev/null
+++ b/packages/shared/app/src/data/days.ts
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/days.json
+// Fixture of the Codex collection "days" (xgen/fixtures/days.json)
+export const days = [
+  {
+    "id": "day-today",
+    "locale": "en",
+    "kind": "day",
+    "status": "published",
+    "visibility": "public",
+    "slug": "today",
+    "title": "Today, 8 October",
+    "metadata": {
+      "note": {
+        "value": "2 windows left"
+      },
+      "slots": {
+        "value": [
+          "18:00 to 20:00",
+          "20:00 to 22:00"
+        ]
+      },
+      "closed": {
+        "value": [
+          "10:00 to 12:00",
+          "12:00 to 14:00",
+          "14:00 to 16:00",
+          "16:00 to 18:00"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "day-tomorrow",
+    "locale": "en",
+    "kind": "day",
+    "status": "published",
+    "visibility": "public",
+    "slug": "tomorrow",
+    "title": "Tomorrow, 9 October",
+    "metadata": {
+      "note": {
+        "value": "6 windows"
+      },
+      "slots": {
+        "value": [
+          "10:00 to 12:00",
+          "12:00 to 14:00",
+          "14:00 to 16:00",
+          "16:00 to 18:00",
+          "18:00 to 20:00",
+          "20:00 to 22:00"
+        ]
+      },
+      "closed": {
+        "value": []
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/deliveryfacts.ts b/packages/shared/app/src/data/deliveryfacts.ts
new file mode 100644
index 0000000..730866e
--- /dev/null
+++ b/packages/shared/app/src/data/deliveryfacts.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/deliveryfacts.json
+// Fixture of the Codex collection "deliveryfacts" (xgen/fixtures/deliveryfacts.json)
+export const deliveryfacts = [
+  {
+    "id": "fact-windows",
+    "locale": "en",
+    "kind": "fact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "windows",
+    "title": "Two-hour windows",
+    "metadata": {
+      "text": {
+        "value": "Pick a window when you check out; the courier calls ten minutes before."
+      },
+      "icon": {
+        "value": "clock"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "fact-packing",
+    "locale": "en",
+    "kind": "fact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "packing",
+    "title": "Careful packing",
+    "metadata": {
+      "text": {
+        "value": "Fragile items travel in padded boxes, one order per box."
+      },
+      "icon": {
+        "value": "package"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "fact-price",
+    "locale": "en",
+    "kind": "fact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "price",
+    "title": "Delivery from $12",
+    "metadata": {
+      "text": {
+        "value": "Free from $75 in the central zone."
+      },
+      "icon": {
+        "value": "truck"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "fact-hub",
+    "locale": "en",
+    "kind": "fact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "hub",
+    "title": "The nearest hub",
+    "metadata": {
+      "text": {
+        "value": "Orders leave from the hub closest to your address."
+      },
+      "icon": {
+        "value": "map-pin"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/departments.ts b/packages/shared/app/src/data/departments.ts
new file mode 100644
index 0000000..26f516c
--- /dev/null
+++ b/packages/shared/app/src/data/departments.ts
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/departments.json
+// Fixture of the Codex collection "departments" (xgen/fixtures/departments.json)
+export const departments = [
+  {
+    "id": "department-engineering",
+    "locale": "en",
+    "kind": "department",
+    "status": "published",
+    "visibility": "public",
+    "slug": "engineering",
+    "title": "Engineering",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "department-design",
+    "locale": "en",
+    "kind": "department",
+    "status": "published",
+    "visibility": "public",
+    "slug": "design",
+    "title": "Design",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "department-support",
+    "locale": "en",
+    "kind": "department",
+    "status": "published",
+    "visibility": "public",
+    "slug": "support",
+    "title": "Support",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/details.ts b/packages/shared/app/src/data/details.ts
new file mode 100644
index 0000000..1d25dab
--- /dev/null
+++ b/packages/shared/app/src/data/details.ts
@@ -0,0 +1,77 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/details.json
+// Fixture of the Codex collection "details" (xgen/fixtures/details.json)
+export const details = [
+  {
+    "id": "detail-description",
+    "locale": "en",
+    "kind": "detail",
+    "status": "published",
+    "visibility": "public",
+    "slug": "description",
+    "title": "Description",
+    "metadata": {
+      "text": {
+        "value": "A desk lamp with a long reach and a heavy base. The arm moves in three joints and stays where you leave it."
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "detail-materials",
+    "locale": "en",
+    "kind": "detail",
+    "status": "published",
+    "visibility": "public",
+    "slug": "materials",
+    "title": "Materials",
+    "metadata": {
+      "text": {
+        "value": "Powder-coated aluminium arm, steel base, linen-wrapped cable."
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "detail-care",
+    "locale": "en",
+    "kind": "detail",
+    "status": "published",
+    "visibility": "public",
+    "slug": "care",
+    "title": "Care",
+    "metadata": {
+      "text": {
+        "value": "Wipe with a dry cloth. The LED module lasts about 25,000 hours and can be replaced."
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "detail-shipping",
+    "locale": "en",
+    "kind": "detail",
+    "status": "published",
+    "visibility": "public",
+    "slug": "shipping",
+    "title": "Shipping and returns",
+    "metadata": {
+      "text": {
+        "value": "Ships within one working day. Thirty days to return it in the original box."
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/duo.ts b/packages/shared/app/src/data/duo.ts
new file mode 100644
index 0000000..183c82b
--- /dev/null
+++ b/packages/shared/app/src/data/duo.ts
@@ -0,0 +1,98 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/duo.json
+// Fixture of the Codex collection "duo" (xgen/fixtures/duo.json)
+export const duo = [
+  {
+    "id": "duo-plan-free",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "duo-plan-free",
+    "title": "Free",
+    "metadata": {
+      "tagline": {
+        "value": "One person, one site"
+      },
+      "price": {
+        "value": 0
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 1
+      },
+      "storage": {
+        "value": 2
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "1 site",
+          "Community support",
+          "Basic analytics"
+        ]
+      },
+      "yearly": {
+        "value": 0
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  },
+  {
+    "id": "duo-plan-pro",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "duo-plan-pro",
+    "title": "Pro",
+    "metadata": {
+      "tagline": {
+        "value": "For a small team"
+      },
+      "price": {
+        "value": 2900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 10
+      },
+      "storage": {
+        "value": 50
+      },
+      "highlighted": {
+        "value": true
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "10 sites",
+          "Priority support",
+          "Advanced analytics",
+          "Custom domains"
+        ]
+      },
+      "yearly": {
+        "value": 29000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/faq.ts b/packages/shared/app/src/data/faq.ts
new file mode 100644
index 0000000..e54de15
--- /dev/null
+++ b/packages/shared/app/src/data/faq.ts
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/faq.json
+// Fixture of the Codex collection "faq" (xgen/fixtures/faq.json)
+export const faq = [
+  {
+    "id": "faq-trial",
+    "locale": "en",
+    "kind": "faq",
+    "status": "published",
+    "visibility": "public",
+    "slug": "trial",
+    "title": "Is there a free plan?",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-billing"
+      }
+    ],
+    "metadata": {
+      "answer": {
+        "value": "Yes. Solo is free and has no time limit."
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  },
+  {
+    "id": "faq-switch",
+    "locale": "en",
+    "kind": "faq",
+    "status": "published",
+    "visibility": "public",
+    "slug": "switch",
+    "title": "Can I change plans later?",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-account"
+      }
+    ],
+    "metadata": {
+      "answer": {
+        "value": "You can move up or down at any time; the change applies to the next month."
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  },
+  {
+    "id": "faq-export",
+    "locale": "en",
+    "kind": "faq",
+    "status": "published",
+    "visibility": "public",
+    "slug": "export",
+    "title": "Can I export my data?",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-account"
+      }
+    ],
+    "metadata": {
+      "answer": {
+        "value": "Every plan can export all content as files."
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-13T09:00:00Z",
+    "published_at": "2026-03-13T10:00:00Z"
+  },
+  {
+    "id": "faq-support",
+    "locale": "en",
+    "kind": "faq",
+    "status": "published",
+    "visibility": "public",
+    "slug": "support",
+    "title": "How fast is support?",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-billing"
+      }
+    ],
+    "metadata": {
+      "answer": {
+        "value": "Team answers within one working day, Scale within four hours."
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-14T09:00:00Z",
+    "published_at": "2026-03-14T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/faqtabs.ts b/packages/shared/app/src/data/faqtabs.ts
new file mode 100644
index 0000000..ada8be1
--- /dev/null
+++ b/packages/shared/app/src/data/faqtabs.ts
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/faqtabs.json
+// Fixture of the Codex collection "faqtabs" (xgen/fixtures/faqtabs.json)
+export const faqtabs = [
+  {
+    "id": "tab-all",
+    "locale": "en",
+    "kind": "tab",
+    "status": "published",
+    "visibility": "public",
+    "slug": "all",
+    "title": "All",
+    "metadata": {
+      "value": {
+        "value": ""
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "tab-billing",
+    "locale": "en",
+    "kind": "tab",
+    "status": "published",
+    "visibility": "public",
+    "slug": "billing",
+    "title": "Billing",
+    "metadata": {
+      "value": {
+        "value": "billing"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "faqtab-account",
+    "locale": "en",
+    "kind": "tab",
+    "status": "published",
+    "visibility": "public",
+    "slug": "faqtab-account",
+    "title": "Account",
+    "metadata": {
+      "value": {
+        "value": "account"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/features.ts b/packages/shared/app/src/data/features.ts
new file mode 100644
index 0000000..3241258
--- /dev/null
+++ b/packages/shared/app/src/data/features.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/features.json
+// Fixture of the Codex collection "features" (xgen/fixtures/features.json)
+export const features = [
+  {
+    "id": "feature-fast",
+    "locale": "en",
+    "kind": "feature",
+    "status": "published",
+    "visibility": "public",
+    "slug": "fast",
+    "title": "Fast by default",
+    "metadata": {
+      "text": {
+        "value": "Pages render from static data and ship little script."
+      },
+      "icon": {
+        "value": "zap"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  },
+  {
+    "id": "feature-clear",
+    "locale": "en",
+    "kind": "feature",
+    "status": "published",
+    "visibility": "public",
+    "slug": "clear",
+    "title": "Clear structure",
+    "metadata": {
+      "text": {
+        "value": "One heading per page, landmarks and a skip link come built in."
+      },
+      "icon": {
+        "value": "layers"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  },
+  {
+    "id": "feature-safe",
+    "locale": "en",
+    "kind": "feature",
+    "status": "published",
+    "visibility": "public",
+    "slug": "safe",
+    "title": "Safe forms",
+    "metadata": {
+      "text": {
+        "value": "Inputs carry labels and errors are announced to assistive tools."
+      },
+      "icon": {
+        "value": "shield-check"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-13T09:00:00Z",
+    "published_at": "2026-03-13T10:00:00Z"
+  },
+  {
+    "id": "feature-global",
+    "locale": "en",
+    "kind": "feature",
+    "status": "published",
+    "visibility": "public",
+    "slug": "global",
+    "title": "Ready for any language",
+    "metadata": {
+      "text": {
+        "value": "Every text lives in a dictionary, so a new language is one more file."
+      },
+      "icon": {
+        "value": "globe"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-14T09:00:00Z",
+    "published_at": "2026-03-14T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/helplinks.ts b/packages/shared/app/src/data/helplinks.ts
new file mode 100644
index 0000000..0628405
--- /dev/null
+++ b/packages/shared/app/src/data/helplinks.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/helplinks.json
+// Fixture of the Codex collection "helplinks" (xgen/fixtures/helplinks.json)
+export const helplinks = [
+  {
+    "id": "helplink-help",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "help",
+    "title": "Help center",
+    "metadata": {
+      "location": {
+        "value": "help"
+      },
+      "icon": {
+        "value": "circle-question-mark"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "helplink-status",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "status",
+    "title": "System status",
+    "metadata": {
+      "location": {
+        "value": "help"
+      },
+      "icon": {
+        "value": "circle-check"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "helplink-privacy",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "privacy",
+    "title": "Privacy",
+    "metadata": {
+      "location": {
+        "value": "help"
+      },
+      "icon": {
+        "value": "lock"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "helplink-terms",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "terms",
+    "title": "Terms",
+    "metadata": {
+      "location": {
+        "value": "help"
+      },
+      "icon": {
+        "value": "file-text"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/jobs.ts b/packages/shared/app/src/data/jobs.ts
new file mode 100644
index 0000000..b469c03
--- /dev/null
+++ b/packages/shared/app/src/data/jobs.ts
@@ -0,0 +1,185 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/jobs.json
+// Fixture of the Codex collection "jobs" (xgen/fixtures/jobs.json)
+export const jobs = [
+  {
+    "id": "job-frontend",
+    "locale": "en",
+    "kind": "job",
+    "status": "published",
+    "visibility": "public",
+    "slug": "frontend",
+    "title": "Senior Frontend Engineer",
+    "metadata": {
+      "dept": {
+        "value": "department-engineering"
+      },
+      "location": {
+        "value": "Remote"
+      },
+      "type": {
+        "value": "Full time"
+      },
+      "salary": {
+        "value": "$120k to $150k"
+      },
+      "posted": {
+        "value": "2026-03-28T12:00:00Z"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "job-platform",
+    "locale": "en",
+    "kind": "job",
+    "status": "published",
+    "visibility": "public",
+    "slug": "platform",
+    "title": "Platform Engineer",
+    "metadata": {
+      "dept": {
+        "value": "department-engineering"
+      },
+      "location": {
+        "value": "Berlin"
+      },
+      "type": {
+        "value": "Full time"
+      },
+      "salary": {
+        "value": "$110k to $140k"
+      },
+      "posted": {
+        "value": "2026-03-23T12:00:00Z"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "job-designer",
+    "locale": "en",
+    "kind": "job",
+    "status": "published",
+    "visibility": "public",
+    "slug": "designer",
+    "title": "Product Designer",
+    "metadata": {
+      "dept": {
+        "value": "department-design"
+      },
+      "location": {
+        "value": "Paris"
+      },
+      "type": {
+        "value": "Full time"
+      },
+      "salary": {
+        "value": "$95k to $120k"
+      },
+      "posted": {
+        "value": "2026-03-27T12:00:00Z"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "job-brand",
+    "locale": "en",
+    "kind": "job",
+    "status": "published",
+    "visibility": "public",
+    "slug": "brand",
+    "title": "Brand Designer",
+    "metadata": {
+      "dept": {
+        "value": "department-design"
+      },
+      "location": {
+        "value": "Remote"
+      },
+      "type": {
+        "value": "Contract"
+      },
+      "salary": {
+        "value": "$60 an hour"
+      },
+      "posted": {
+        "value": "2026-03-16T12:00:00Z"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  },
+  {
+    "id": "job-success",
+    "locale": "en",
+    "kind": "job",
+    "status": "published",
+    "visibility": "public",
+    "slug": "success",
+    "title": "Customer Success Lead",
+    "metadata": {
+      "dept": {
+        "value": "department-support"
+      },
+      "location": {
+        "value": "Toronto"
+      },
+      "type": {
+        "value": "Full time"
+      },
+      "salary": {
+        "value": "$80k to $95k"
+      },
+      "posted": {
+        "value": "2026-03-25T12:00:00Z"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-10T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  },
+  {
+    "id": "job-writer",
+    "locale": "en",
+    "kind": "job",
+    "status": "published",
+    "visibility": "public",
+    "slug": "writer",
+    "title": "Technical Writer",
+    "metadata": {
+      "dept": {
+        "value": "department-support"
+      },
+      "location": {
+        "value": "Remote"
+      },
+      "type": {
+        "value": "Part time"
+      },
+      "salary": {
+        "value": "$50 an hour"
+      },
+      "posted": {
+        "value": "2026-03-29T12:00:00Z"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-12T09:00:00Z",
+    "updated_at": "2026-03-13T09:00:00Z",
+    "published_at": "2026-03-13T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/lanes.ts b/packages/shared/app/src/data/lanes.ts
new file mode 100644
index 0000000..6d3cd5c
--- /dev/null
+++ b/packages/shared/app/src/data/lanes.ts
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/lanes.json
+// Fixture of the Codex collection "lanes" (xgen/fixtures/lanes.json)
+export const lanes = [
+  {
+    "id": "lane-todo",
+    "locale": "en",
+    "kind": "lane",
+    "status": "published",
+    "visibility": "public",
+    "slug": "todo",
+    "title": "To do",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "lane-doing",
+    "locale": "en",
+    "kind": "lane",
+    "status": "published",
+    "visibility": "public",
+    "slug": "doing",
+    "title": "In progress",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "lane-done",
+    "locale": "en",
+    "kind": "lane",
+    "status": "published",
+    "visibility": "public",
+    "slug": "done",
+    "title": "Done",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/logos.ts b/packages/shared/app/src/data/logos.ts
new file mode 100644
index 0000000..3d5aa28
--- /dev/null
+++ b/packages/shared/app/src/data/logos.ts
@@ -0,0 +1,113 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/logos.json
+// Fixture of the Codex collection "logos" (xgen/fixtures/logos.json)
+export const logos = [
+  {
+    "id": "logo-northwind",
+    "locale": "en",
+    "kind": "logo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "northwind",
+    "title": "Northwind",
+    "metadata": {
+      "icon": {
+        "value": "compass"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "logo-lumen",
+    "locale": "en",
+    "kind": "logo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "lumen",
+    "title": "Lumen",
+    "metadata": {
+      "icon": {
+        "value": "sun"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "logo-harbor",
+    "locale": "en",
+    "kind": "logo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "harbor",
+    "title": "Harbor",
+    "metadata": {
+      "icon": {
+        "value": "anchor"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "logo-summit",
+    "locale": "en",
+    "kind": "logo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "summit",
+    "title": "Summit",
+    "metadata": {
+      "icon": {
+        "value": "mountain"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "logo-orbit",
+    "locale": "en",
+    "kind": "logo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "orbit",
+    "title": "Orbit",
+    "metadata": {
+      "icon": {
+        "value": "orbit"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  },
+  {
+    "id": "logo-grove",
+    "locale": "en",
+    "kind": "logo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "grove",
+    "title": "Grove",
+    "metadata": {
+      "icon": {
+        "value": "trees"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-11T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/media.ts b/packages/shared/app/src/data/media.ts
new file mode 100644
index 0000000..9f6ac53
--- /dev/null
+++ b/packages/shared/app/src/data/media.ts
@@ -0,0 +1,125 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/media.json
+// Fixture of the Codex collection "media" (xgen/fixtures/media.json)
+export const media = [
+  {
+    "id": "media-lamp",
+    "locale": "en",
+    "kind": "media",
+    "status": "published",
+    "visibility": "public",
+    "slug": "arc-desk-lamp",
+    "title": "Arc desk lamp",
+    "metadata": {
+      "file": {
+        "value": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMDAiIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiPjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4xNiIvPjxjaXJjbGUgY3g9Ijg2NCIgY3k9IjM2MCIgcj0iMTIwIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNMCA4NjQgTDM2MCA1NDAgTDY2MCA4MTYgTDkwMCA2MjQgTDEyMDAgOTAwIFYxMjAwIEgwIFoiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4yOCIvPjxwYXRoIGQ9Ik0wIDEwMjAgTDQ4MCA3OTIgTDEyMDAgMTA4MCBWMTIwMCBIMCBaIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzYiLz48L3N2Zz4="
+      },
+      "mime": {
+        "value": "image/svg+xml"
+      },
+      "width": {
+        "value": 1200
+      },
+      "height": {
+        "value": 1200
+      },
+      "alt": {
+        "value": "A curved desk lamp on a wooden desk"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "media-phones",
+    "locale": "en",
+    "kind": "media",
+    "status": "published",
+    "visibility": "public",
+    "slug": "studio-headphones",
+    "title": "Studio headphones",
+    "metadata": {
+      "file": {
+        "value": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMDAiIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiPjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4xNiIvPjxjaXJjbGUgY3g9Ijg2NCIgY3k9IjM2MCIgcj0iMTIwIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNMCA4NjQgTDM2MCA1NDAgTDY2MCA4MTYgTDkwMCA2MjQgTDEyMDAgOTAwIFYxMjAwIEgwIFoiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4yOCIvPjxwYXRoIGQ9Ik0wIDEwMjAgTDQ4MCA3OTIgTDEyMDAgMTA4MCBWMTIwMCBIMCBaIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzYiLz48L3N2Zz4="
+      },
+      "mime": {
+        "value": "image/svg+xml"
+      },
+      "width": {
+        "value": 1200
+      },
+      "height": {
+        "value": 1200
+      },
+      "alt": {
+        "value": "Closed-back headphones on a stand"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "media-bag",
+    "locale": "en",
+    "kind": "media",
+    "status": "published",
+    "visibility": "public",
+    "slug": "field-backpack",
+    "title": "Field backpack",
+    "metadata": {
+      "file": {
+        "value": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMDAiIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiPjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4xNiIvPjxjaXJjbGUgY3g9Ijg2NCIgY3k9IjM2MCIgcj0iMTIwIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNMCA4NjQgTDM2MCA1NDAgTDY2MCA4MTYgTDkwMCA2MjQgTDEyMDAgOTAwIFYxMjAwIEgwIFoiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4yOCIvPjxwYXRoIGQ9Ik0wIDEwMjAgTDQ4MCA3OTIgTDEyMDAgMTA4MCBWMTIwMCBIMCBaIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzYiLz48L3N2Zz4="
+      },
+      "mime": {
+        "value": "image/svg+xml"
+      },
+      "width": {
+        "value": 1200
+      },
+      "height": {
+        "value": 1200
+      },
+      "alt": {
+        "value": "A grey backpack against a wall"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "media-static-first",
+    "locale": "en",
+    "kind": "media",
+    "status": "published",
+    "visibility": "public",
+    "slug": "static-first-cover",
+    "title": "Static-first cover",
+    "metadata": {
+      "file": {
+        "value": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMTAwIDkwMCIgd2lkdGg9IjIxMDAiIGhlaWdodD0iOTAwIj48cmVjdCB3aWR0aD0iMjEwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4xNiIvPjxjaXJjbGUgY3g9IjE1MTIiIGN5PSIyNzAiIHI9IjkwIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNMCA2NDggTDYzMCA0MDUgTDExNTUgNjEyIEwxNTc1IDQ2OCBMMjEwMCA2NzUgVjkwMCBIMCBaIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMjgiLz48cGF0aCBkPSJNMCA3NjUgTDg0MCA1OTQgTDIxMDAgODEwIFY5MDAgSDAgWiIgZmlsbD0iIzgwODA4MCIgZmlsbC1vcGFjaXR5PSIwLjM2Ii8+PC9zdmc+"
+      },
+      "mime": {
+        "value": "image/svg+xml"
+      },
+      "width": {
+        "value": 2100
+      },
+      "height": {
+        "value": 900
+      },
+      "alt": {
+        "value": "Abstract shapes in muted colors"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/megagroups.ts b/packages/shared/app/src/data/megagroups.ts
new file mode 100644
index 0000000..4b40b4e
--- /dev/null
+++ b/packages/shared/app/src/data/megagroups.ts
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/megagroups.json
+// Fixture of the Codex collection "megagroups" (xgen/fixtures/megagroups.json)
+export const megagroups = [
+  {
+    "id": "megagroup-product",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "megagroup-product",
+    "title": "Product",
+    "metadata": {
+      "location": {
+        "value": "mega"
+      },
+      "icon": {
+        "value": "layers"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "megagroup-resources",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "megagroup-resources",
+    "title": "Resources",
+    "metadata": {
+      "location": {
+        "value": "mega"
+      },
+      "icon": {
+        "value": "book-open"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "megagroup-company",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "megagroup-company",
+    "title": "Company",
+    "metadata": {
+      "location": {
+        "value": "mega"
+      },
+      "icon": {
+        "value": "building"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/members.ts b/packages/shared/app/src/data/members.ts
new file mode 100644
index 0000000..9bffc4a
--- /dev/null
+++ b/packages/shared/app/src/data/members.ts
@@ -0,0 +1,277 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/members.json
+// Fixture of the Codex collection "members" (xgen/fixtures/members.json)
+export const members = [
+  {
+    "id": "member-ava",
+    "locale": "en",
+    "kind": "member",
+    "status": "published",
+    "visibility": "public",
+    "slug": "ava",
+    "title": "Ava Moreno",
+    "metadata": {
+      "role": {
+        "value": "Founder and CEO"
+      },
+      "dept": {
+        "value": "leadership"
+      },
+      "location": {
+        "value": "Lisbon"
+      },
+      "bio": {
+        "value": "Started the company after ten years of building tools for other teams."
+      },
+      "skills": {
+        "value": [
+          "Strategy",
+          "Hiring",
+          "Sales"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "member-noah",
+    "locale": "en",
+    "kind": "member",
+    "status": "published",
+    "visibility": "public",
+    "slug": "noah",
+    "title": "Noah Becker",
+    "metadata": {
+      "role": {
+        "value": "Head of Engineering"
+      },
+      "dept": {
+        "value": "engineering"
+      },
+      "location": {
+        "value": "Berlin"
+      },
+      "bio": {
+        "value": "Keeps the build fast and the releases boring."
+      },
+      "skills": {
+        "value": [
+          "Platform",
+          "TypeScript",
+          "Reviews"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "member-mia",
+    "locale": "en",
+    "kind": "member",
+    "status": "published",
+    "visibility": "public",
+    "slug": "mia",
+    "title": "Mia Laurent",
+    "metadata": {
+      "role": {
+        "value": "Design Lead"
+      },
+      "dept": {
+        "value": "design"
+      },
+      "location": {
+        "value": "Paris"
+      },
+      "bio": {
+        "value": "Draws the system before anyone writes a line of code."
+      },
+      "skills": {
+        "value": [
+          "Design systems",
+          "Research",
+          "Motion"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "member-liam",
+    "locale": "en",
+    "kind": "member",
+    "status": "published",
+    "visibility": "public",
+    "slug": "liam",
+    "title": "Liam Okafor",
+    "metadata": {
+      "role": {
+        "value": "Product Manager"
+      },
+      "dept": {
+        "value": "product"
+      },
+      "location": {
+        "value": "London"
+      },
+      "bio": {
+        "value": "Talks to customers every week and writes it all down."
+      },
+      "skills": {
+        "value": [
+          "Roadmaps",
+          "Interviews",
+          "Analytics"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  },
+  {
+    "id": "member-zoe",
+    "locale": "en",
+    "kind": "member",
+    "status": "published",
+    "visibility": "public",
+    "slug": "zoe",
+    "title": "Zoe Tanaka",
+    "metadata": {
+      "role": {
+        "value": "Frontend Engineer"
+      },
+      "dept": {
+        "value": "engineering"
+      },
+      "location": {
+        "value": "Remote"
+      },
+      "bio": {
+        "value": "Owns the component library and its tests."
+      },
+      "skills": {
+        "value": [
+          "Svelte",
+          "React",
+          "Accessibility"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-10T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  },
+  {
+    "id": "member-omar",
+    "locale": "en",
+    "kind": "member",
+    "status": "published",
+    "visibility": "public",
+    "slug": "omar",
+    "title": "Omar Haddad",
+    "metadata": {
+      "role": {
+        "value": "Customer Success"
+      },
+      "dept": {
+        "value": "support"
+      },
+      "location": {
+        "value": "Toronto"
+      },
+      "bio": {
+        "value": "Turns tricky tickets into fixes and guides."
+      },
+      "skills": {
+        "value": [
+          "Onboarding",
+          "Docs",
+          "Training"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-12T09:00:00Z",
+    "updated_at": "2026-03-13T09:00:00Z",
+    "published_at": "2026-03-13T10:00:00Z"
+  },
+  {
+    "id": "member-elena",
+    "locale": "en",
+    "kind": "member",
+    "status": "published",
+    "visibility": "public",
+    "slug": "elena",
+    "title": "Elena Rossi",
+    "metadata": {
+      "role": {
+        "value": "Brand Designer"
+      },
+      "dept": {
+        "value": "design"
+      },
+      "location": {
+        "value": "Milan"
+      },
+      "bio": {
+        "value": "Makes the pages, the slides and the swag look like one brand."
+      },
+      "skills": {
+        "value": [
+          "Branding",
+          "Illustration",
+          "Type"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-14T09:00:00Z",
+    "updated_at": "2026-03-15T09:00:00Z",
+    "published_at": "2026-03-15T10:00:00Z"
+  },
+  {
+    "id": "member-sam",
+    "locale": "en",
+    "kind": "member",
+    "status": "published",
+    "visibility": "public",
+    "slug": "sam",
+    "title": "Sam Carter",
+    "metadata": {
+      "role": {
+        "value": "Backend Engineer"
+      },
+      "dept": {
+        "value": "engineering"
+      },
+      "location": {
+        "value": "Austin"
+      },
+      "bio": {
+        "value": "Builds the APIs and keeps the database happy."
+      },
+      "skills": {
+        "value": [
+          "Go",
+          "Postgres",
+          "Queues"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-16T09:00:00Z",
+    "updated_at": "2026-03-17T09:00:00Z",
+    "published_at": "2026-03-17T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/menulinks.ts b/packages/shared/app/src/data/menulinks.ts
new file mode 100644
index 0000000..9b36882
--- /dev/null
+++ b/packages/shared/app/src/data/menulinks.ts
@@ -0,0 +1,565 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/menulinks.json
+// Fixture of the Codex collection "menulinks" (xgen/fixtures/menulinks.json)
+export const menulinks = [
+  {
+    "id": "menulink-footer-product-blocks",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "blocks",
+    "title": "Blocks",
+    "parent_id": "group-product",
+    "order": 1,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-product-templates",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "templates",
+    "title": "Templates",
+    "parent_id": "group-product",
+    "order": 2,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-product-themes",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "themes",
+    "title": "Themes",
+    "parent_id": "group-product",
+    "order": 3,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-product-pricing",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "pricing",
+    "title": "Pricing",
+    "parent_id": "group-product",
+    "order": 4,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-company-about",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "about",
+    "title": "About",
+    "parent_id": "group-company",
+    "order": 1,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-company-careers",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "careers",
+    "title": "Careers",
+    "parent_id": "group-company",
+    "order": 2,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-company-contact",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "contact",
+    "title": "Contact",
+    "parent_id": "group-company",
+    "order": 3,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-company-press",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "press",
+    "title": "Press",
+    "parent_id": "group-company",
+    "order": 4,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-resources-guides",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "guides",
+    "title": "Guides",
+    "parent_id": "group-resources",
+    "order": 1,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-resources-changelog",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "changelog",
+    "title": "Changelog",
+    "parent_id": "group-resources",
+    "order": 2,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-resources-community",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "community",
+    "title": "Community",
+    "parent_id": "group-resources",
+    "order": 3,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-resources-support",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "support",
+    "title": "Support",
+    "parent_id": "group-resources",
+    "order": 4,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-legal-terms",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "terms",
+    "title": "Terms",
+    "parent_id": "group-legal",
+    "order": 1,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-legal-privacy",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "privacy",
+    "title": "Privacy",
+    "parent_id": "group-legal",
+    "order": 2,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-legal-cookies",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "cookies",
+    "title": "Cookies",
+    "parent_id": "group-legal",
+    "order": 3,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "menulink-footer-legal-security",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "security",
+    "title": "Security",
+    "parent_id": "group-legal",
+    "order": 4,
+    "metadata": {
+      "location": {
+        "value": "footer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-product-blocks",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "blocks",
+    "title": "Blocks",
+    "parent_id": "megagroup-product",
+    "order": 1,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-product-templates",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "templates",
+    "title": "Templates",
+    "parent_id": "megagroup-product",
+    "order": 2,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-product-themes",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "themes",
+    "title": "Themes",
+    "parent_id": "megagroup-product",
+    "order": 3,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-product-integrations",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "integrations",
+    "title": "Integrations",
+    "parent_id": "megagroup-product",
+    "order": 4,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-resources-guides",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "guides",
+    "title": "Guides",
+    "parent_id": "megagroup-resources",
+    "order": 1,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-resources-changelog",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "changelog",
+    "title": "Changelog",
+    "parent_id": "megagroup-resources",
+    "order": 2,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-resources-community",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "community",
+    "title": "Community",
+    "parent_id": "megagroup-resources",
+    "order": 3,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-resources-support",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "support",
+    "title": "Support",
+    "parent_id": "megagroup-resources",
+    "order": 4,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-company-about",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "about",
+    "title": "About",
+    "parent_id": "megagroup-company",
+    "order": 1,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-company-careers",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "careers",
+    "title": "Careers",
+    "parent_id": "megagroup-company",
+    "order": 2,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-company-contact",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "contact",
+    "title": "Contact",
+    "parent_id": "megagroup-company",
+    "order": 3,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "menulink-mega-company-press",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "press",
+    "title": "Press",
+    "parent_id": "megagroup-company",
+    "order": 4,
+    "metadata": {
+      "location": {
+        "value": "mega"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/metrics.ts b/packages/shared/app/src/data/metrics.ts
new file mode 100644
index 0000000..2d32f71
--- /dev/null
+++ b/packages/shared/app/src/data/metrics.ts
@@ -0,0 +1,107 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/metrics.json
+// Fixture of the Codex collection "metrics" (xgen/fixtures/metrics.json)
+export const metrics = [
+  {
+    "id": "metric-revenue",
+    "locale": "en",
+    "kind": "metric",
+    "status": "published",
+    "visibility": "public",
+    "slug": "revenue",
+    "title": "Revenue",
+    "metadata": {
+      "value": {
+        "value": 4820000
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "icon": {
+        "value": "badge-dollar-sign"
+      },
+      "hint": {
+        "value": "+8% this month"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "metric-orders",
+    "locale": "en",
+    "kind": "metric",
+    "status": "published",
+    "visibility": "public",
+    "slug": "orders",
+    "title": "Orders",
+    "metadata": {
+      "value": {
+        "value": 1284
+      },
+      "icon": {
+        "value": "shopping-cart"
+      },
+      "hint": {
+        "value": "+3% this month"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "metric-visitors",
+    "locale": "en",
+    "kind": "metric",
+    "status": "published",
+    "visibility": "public",
+    "slug": "visitors",
+    "title": "Visitors",
+    "metadata": {
+      "value": {
+        "value": 92410
+      },
+      "icon": {
+        "value": "eye"
+      },
+      "hint": {
+        "value": "+12% this month"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "metric-churn",
+    "locale": "en",
+    "kind": "metric",
+    "status": "published",
+    "visibility": "public",
+    "slug": "churn",
+    "title": "Churn",
+    "metadata": {
+      "value": {
+        "value": 1.9
+      },
+      "unit": {
+        "value": "percent"
+      },
+      "icon": {
+        "value": "trending-down"
+      },
+      "hint": {
+        "value": "-0.2% this month"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/milestones.ts b/packages/shared/app/src/data/milestones.ts
new file mode 100644
index 0000000..9f5f1ec
--- /dev/null
+++ b/packages/shared/app/src/data/milestones.ts
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/milestones.json
+// Fixture of the Codex collection "milestones" (xgen/fixtures/milestones.json)
+export const milestones = [
+  {
+    "id": "milestone-founded",
+    "locale": "en",
+    "kind": "milestone",
+    "status": "published",
+    "visibility": "public",
+    "slug": "founded",
+    "title": "The first commit",
+    "metadata": {
+      "date": {
+        "value": "2021"
+      },
+      "text": {
+        "value": "Two people, one laptop and a list of blocks they kept rebuilding."
+      },
+      "tag": {
+        "value": "Start"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "milestone-launch",
+    "locale": "en",
+    "kind": "milestone",
+    "status": "published",
+    "visibility": "public",
+    "slug": "launch",
+    "title": "Public launch",
+    "metadata": {
+      "date": {
+        "value": "2022"
+      },
+      "text": {
+        "value": "The kit goes public with forty blocks and one runtime."
+      },
+      "tag": {
+        "value": "Release"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "milestone-runtimes",
+    "locale": "en",
+    "kind": "milestone",
+    "status": "published",
+    "visibility": "public",
+    "slug": "runtimes",
+    "title": "Three runtimes",
+    "metadata": {
+      "date": {
+        "value": "2024"
+      },
+      "text": {
+        "value": "Svelte, React and Vue from the same specs, file for file."
+      },
+      "tag": {
+        "value": "Release"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "milestone-team",
+    "locale": "en",
+    "kind": "milestone",
+    "status": "published",
+    "visibility": "public",
+    "slug": "team",
+    "title": "A team of twenty",
+    "metadata": {
+      "date": {
+        "value": "2026"
+      },
+      "text": {
+        "value": "Offices in three cities and a support desk that answers within the hour."
+      },
+      "tag": {
+        "value": "Team"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/navlinks.ts b/packages/shared/app/src/data/navlinks.ts
new file mode 100644
index 0000000..f0a12e0
--- /dev/null
+++ b/packages/shared/app/src/data/navlinks.ts
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/navlinks.json
+// Fixture of the Codex collection "navlinks" (xgen/fixtures/navlinks.json)
+export const navlinks = [
+  {
+    "id": "link-product",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "product",
+    "title": "Product",
+    "metadata": {
+      "location": {
+        "value": "main"
+      },
+      "icon": {
+        "value": "package"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "link-solutions",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "solutions",
+    "title": "Solutions",
+    "metadata": {
+      "location": {
+        "value": "main"
+      },
+      "icon": {
+        "value": "layers"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "link-pricing",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "pricing",
+    "title": "Pricing",
+    "metadata": {
+      "location": {
+        "value": "main"
+      },
+      "icon": {
+        "value": "tag"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "link-docs",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "docs",
+    "title": "Docs",
+    "metadata": {
+      "location": {
+        "value": "main"
+      },
+      "icon": {
+        "value": "book-open"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "link-company",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "company",
+    "title": "Company",
+    "metadata": {
+      "location": {
+        "value": "main"
+      },
+      "icon": {
+        "value": "building"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/orders.ts b/packages/shared/app/src/data/orders.ts
new file mode 100644
index 0000000..a866ddc
--- /dev/null
+++ b/packages/shared/app/src/data/orders.ts
@@ -0,0 +1,125 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/orders.json
+// Fixture of the Codex collection "orders" (xgen/fixtures/orders.json)
+export const orders = [
+  {
+    "id": "order-o1042",
+    "locale": "en",
+    "kind": "order",
+    "status": "published",
+    "visibility": "public",
+    "slug": "o1042",
+    "title": "Order 1042",
+    "metadata": {
+      "date": {
+        "value": "2026-03-28T10:00:00Z"
+      },
+      "total": {
+        "value": 32400
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "order_status": {
+        "value": "shipped"
+      },
+      "items": {
+        "value": 4
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "order-o1041",
+    "locale": "en",
+    "kind": "order",
+    "status": "published",
+    "visibility": "public",
+    "slug": "o1041",
+    "title": "Order 1041",
+    "metadata": {
+      "date": {
+        "value": "2026-03-21T10:00:00Z"
+      },
+      "total": {
+        "value": 8900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "order_status": {
+        "value": "paid"
+      },
+      "items": {
+        "value": 1
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "order-o1038",
+    "locale": "en",
+    "kind": "order",
+    "status": "published",
+    "visibility": "public",
+    "slug": "o1038",
+    "title": "Order 1038",
+    "metadata": {
+      "date": {
+        "value": "2026-03-09T10:00:00Z"
+      },
+      "total": {
+        "value": 19900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "order_status": {
+        "value": "pending"
+      },
+      "items": {
+        "value": 1
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "order-o1031",
+    "locale": "en",
+    "kind": "order",
+    "status": "published",
+    "visibility": "public",
+    "slug": "o1031",
+    "title": "Order 1031",
+    "metadata": {
+      "date": {
+        "value": "2026-02-24T10:00:00Z"
+      },
+      "total": {
+        "value": 5000
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "order_status": {
+        "value": "refunded"
+      },
+      "items": {
+        "value": 1
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/outline.ts b/packages/shared/app/src/data/outline.ts
new file mode 100644
index 0000000..4b2ea55
--- /dev/null
+++ b/packages/shared/app/src/data/outline.ts
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/outline.json
+// Fixture of the Codex collection "outline" (xgen/fixtures/outline.json)
+export const outline = [
+  {
+    "id": "outlineitem-budget",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "budget",
+    "title": "Set a page weight budget",
+    "metadata": {
+      "location": {
+        "value": "outline"
+      },
+      "icon": {
+        "value": "chevron-right"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "outlineitem-images",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "images",
+    "title": "Ship smaller pictures",
+    "metadata": {
+      "location": {
+        "value": "outline"
+      },
+      "icon": {
+        "value": "chevron-right"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "outlineitem-cache",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "cache",
+    "title": "Cache what does not change",
+    "metadata": {
+      "location": {
+        "value": "outline"
+      },
+      "icon": {
+        "value": "chevron-right"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/payments.ts b/packages/shared/app/src/data/payments.ts
new file mode 100644
index 0000000..54369e3
--- /dev/null
+++ b/packages/shared/app/src/data/payments.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/payments.json
+// Fixture of the Codex collection "payments" (xgen/fixtures/payments.json)
+export const payments = [
+  {
+    "id": "payment-card",
+    "locale": "en",
+    "kind": "payment",
+    "status": "published",
+    "visibility": "public",
+    "slug": "card",
+    "title": "Card online",
+    "metadata": {
+      "text": {
+        "value": "Pay on a secure page after you confirm the order."
+      },
+      "icon": {
+        "value": "credit-card"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "payment-wallet",
+    "locale": "en",
+    "kind": "payment",
+    "status": "published",
+    "visibility": "public",
+    "slug": "wallet",
+    "title": "Phone wallet",
+    "metadata": {
+      "text": {
+        "value": "Confirm in the wallet on your phone, no card details to type."
+      },
+      "icon": {
+        "value": "smartphone"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "payment-courier",
+    "locale": "en",
+    "kind": "payment",
+    "status": "published",
+    "visibility": "public",
+    "slug": "courier",
+    "title": "Card on delivery",
+    "metadata": {
+      "text": {
+        "value": "The courier brings a card terminal."
+      },
+      "icon": {
+        "value": "wallet"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "payment-cash",
+    "locale": "en",
+    "kind": "payment",
+    "status": "published",
+    "visibility": "public",
+    "slug": "cash",
+    "title": "Cash on delivery",
+    "metadata": {
+      "text": {
+        "value": "Tell us the note you will pay with in the comment."
+      },
+      "icon": {
+        "value": "banknote"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/perks.ts b/packages/shared/app/src/data/perks.ts
new file mode 100644
index 0000000..8970542
--- /dev/null
+++ b/packages/shared/app/src/data/perks.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/perks.json
+// Fixture of the Codex collection "perks" (xgen/fixtures/perks.json)
+export const perks = [
+  {
+    "id": "perk-shipping",
+    "locale": "en",
+    "kind": "perk",
+    "status": "published",
+    "visibility": "public",
+    "slug": "shipping",
+    "title": "Free shipping over $75",
+    "metadata": {
+      "text": {
+        "value": "Two-hour windows, seven days a week."
+      },
+      "icon": {
+        "value": "truck"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "perk-returns",
+    "locale": "en",
+    "kind": "perk",
+    "status": "published",
+    "visibility": "public",
+    "slug": "returns",
+    "title": "Thirty-day returns",
+    "metadata": {
+      "text": {
+        "value": "Send it back for free if it does not fit your desk."
+      },
+      "icon": {
+        "value": "rotate-ccw"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "perk-warranty",
+    "locale": "en",
+    "kind": "perk",
+    "status": "published",
+    "visibility": "public",
+    "slug": "warranty",
+    "title": "Two-year warranty",
+    "metadata": {
+      "text": {
+        "value": "Repairs or a new one, whichever is faster."
+      },
+      "icon": {
+        "value": "shield-check"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "perk-support",
+    "locale": "en",
+    "kind": "perk",
+    "status": "published",
+    "visibility": "public",
+    "slug": "support",
+    "title": "Help seven days a week",
+    "metadata": {
+      "text": {
+        "value": "A person answers within the hour."
+      },
+      "icon": {
+        "value": "headphones"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/photos.ts b/packages/shared/app/src/data/photos.ts
new file mode 100644
index 0000000..00e7fef
--- /dev/null
+++ b/packages/shared/app/src/data/photos.ts
@@ -0,0 +1,194 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/photos.json
+// Fixture of the Codex collection "photos" (xgen/fixtures/photos.json)
+export const photos = [
+  {
+    "id": "photo-harbor",
+    "locale": "en",
+    "kind": "photo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "harbor",
+    "title": "Harbor at dawn",
+    "metadata": {
+      "tag": {
+        "value": "Travel"
+      },
+      "size": {
+        "value": "large"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "photo-studio",
+    "locale": "en",
+    "kind": "photo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "studio",
+    "title": "Studio corner",
+    "metadata": {
+      "tag": {
+        "value": "Interior"
+      },
+      "size": {
+        "value": "small"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "photo-market",
+    "locale": "en",
+    "kind": "photo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "market",
+    "title": "Morning market",
+    "metadata": {
+      "tag": {
+        "value": "Street"
+      },
+      "size": {
+        "value": "tall"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "photo-ridge",
+    "locale": "en",
+    "kind": "photo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "ridge",
+    "title": "Ridge trail",
+    "metadata": {
+      "tag": {
+        "value": "Nature"
+      },
+      "size": {
+        "value": "wide"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  },
+  {
+    "id": "photo-cafe",
+    "locale": "en",
+    "kind": "photo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "cafe",
+    "title": "Corner cafe",
+    "metadata": {
+      "tag": {
+        "value": "Street"
+      },
+      "size": {
+        "value": "small"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-10T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  },
+  {
+    "id": "photo-dunes",
+    "locale": "en",
+    "kind": "photo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "dunes",
+    "title": "Dunes at noon",
+    "metadata": {
+      "tag": {
+        "value": "Nature"
+      },
+      "size": {
+        "value": "tall"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-12T09:00:00Z",
+    "updated_at": "2026-03-13T09:00:00Z",
+    "published_at": "2026-03-13T10:00:00Z"
+  },
+  {
+    "id": "photo-library",
+    "locale": "en",
+    "kind": "photo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "library",
+    "title": "Old library",
+    "metadata": {
+      "tag": {
+        "value": "Interior"
+      },
+      "size": {
+        "value": "small"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-14T09:00:00Z",
+    "updated_at": "2026-03-15T09:00:00Z",
+    "published_at": "2026-03-15T10:00:00Z"
+  },
+  {
+    "id": "photo-bridge",
+    "locale": "en",
+    "kind": "photo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "bridge",
+    "title": "Iron bridge",
+    "metadata": {
+      "tag": {
+        "value": "Travel"
+      },
+      "size": {
+        "value": "wide"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-16T09:00:00Z",
+    "updated_at": "2026-03-17T09:00:00Z",
+    "published_at": "2026-03-17T10:00:00Z"
+  },
+  {
+    "id": "photo-orchard",
+    "locale": "en",
+    "kind": "photo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "orchard",
+    "title": "Orchard rows",
+    "metadata": {
+      "tag": {
+        "value": "Nature"
+      },
+      "size": {
+        "value": "small"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-18T09:00:00Z",
+    "updated_at": "2026-03-19T09:00:00Z",
+    "published_at": "2026-03-19T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/placeholders.ts b/packages/shared/app/src/data/placeholders.ts
new file mode 100644
index 0000000..90670a9
--- /dev/null
+++ b/packages/shared/app/src/data/placeholders.ts
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/placeholders.json
+// Fixture of the Codex collection "placeholders" (xgen/fixtures/placeholders.json)
+export const placeholders = [
+  {
+    "id": "placeholder-p1",
+    "locale": "en",
+    "kind": "placeholder",
+    "status": "published",
+    "visibility": "public",
+    "slug": "p1",
+    "title": "Placeholder 1",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-01T10:00:00Z",
+    "published_at": "2026-03-01T11:00:00Z"
+  },
+  {
+    "id": "placeholder-p2",
+    "locale": "en",
+    "kind": "placeholder",
+    "status": "published",
+    "visibility": "public",
+    "slug": "p2",
+    "title": "Placeholder 2",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-02T10:00:00Z",
+    "published_at": "2026-03-02T11:00:00Z"
+  },
+  {
+    "id": "placeholder-p3",
+    "locale": "en",
+    "kind": "placeholder",
+    "status": "published",
+    "visibility": "public",
+    "slug": "p3",
+    "title": "Placeholder 3",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-03T10:00:00Z",
+    "published_at": "2026-03-03T11:00:00Z"
+  },
+  {
+    "id": "placeholder-p4",
+    "locale": "en",
+    "kind": "placeholder",
+    "status": "published",
+    "visibility": "public",
+    "slug": "p4",
+    "title": "Placeholder 4",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-04T10:00:00Z",
+    "published_at": "2026-03-04T11:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/plans.ts b/packages/shared/app/src/data/plans.ts
new file mode 100644
index 0000000..b1001c0
--- /dev/null
+++ b/packages/shared/app/src/data/plans.ts
@@ -0,0 +1,564 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/plans.json
+// Fixture of the Codex collection "plans" (xgen/fixtures/plans.json)
+export const plans = [
+  {
+    "id": "plan-free",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "free",
+    "title": "Free",
+    "metadata": {
+      "tagline": {
+        "value": "For trying things out"
+      },
+      "price": {
+        "value": 0
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 1
+      },
+      "storage": {
+        "value": 1
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "1 project",
+          "Community support",
+          "Basic reports"
+        ]
+      },
+      "yearly": {
+        "value": 0
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-01T09:00:00Z",
+    "updated_at": "2026-02-01T09:00:00Z",
+    "published_at": "2026-02-01T10:00:00Z"
+  },
+  {
+    "id": "plan-starter",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "starter",
+    "title": "Starter",
+    "metadata": {
+      "tagline": {
+        "value": "For a single maker"
+      },
+      "price": {
+        "value": 900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 3
+      },
+      "storage": {
+        "value": 10
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "3 projects",
+          "Email support",
+          "Basic reports",
+          "Export to CSV"
+        ]
+      },
+      "yearly": {
+        "value": 9000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-02T09:00:00Z",
+    "updated_at": "2026-02-02T09:00:00Z",
+    "published_at": "2026-02-02T10:00:00Z"
+  },
+  {
+    "id": "plan-basic",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "basic",
+    "title": "Basic",
+    "metadata": {
+      "tagline": {
+        "value": "For small teams"
+      },
+      "price": {
+        "value": 1900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 5
+      },
+      "storage": {
+        "value": 50
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "10 projects",
+          "Email support",
+          "Shared dashboards"
+        ]
+      },
+      "yearly": {
+        "value": 19000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-03T09:00:00Z",
+    "updated_at": "2026-02-03T09:00:00Z",
+    "published_at": "2026-02-03T10:00:00Z"
+  },
+  {
+    "id": "plan-team",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "team",
+    "title": "Team",
+    "metadata": {
+      "tagline": {
+        "value": "For growing teams"
+      },
+      "price": {
+        "value": 3900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 15
+      },
+      "storage": {
+        "value": 200
+      },
+      "highlighted": {
+        "value": true
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "Unlimited projects",
+          "Priority support",
+          "Shared dashboards",
+          "Audit log"
+        ]
+      },
+      "yearly": {
+        "value": 39000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-04T09:00:00Z",
+    "updated_at": "2026-02-04T09:00:00Z",
+    "published_at": "2026-02-04T10:00:00Z"
+  },
+  {
+    "id": "plan-growth",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "growth",
+    "title": "Growth",
+    "metadata": {
+      "tagline": {
+        "value": "For teams that ship weekly"
+      },
+      "price": {
+        "value": 5900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 25
+      },
+      "storage": {
+        "value": 500
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "Unlimited projects",
+          "Priority support",
+          "Roles and permissions",
+          "Audit log"
+        ]
+      },
+      "yearly": {
+        "value": 59000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-05T09:00:00Z",
+    "updated_at": "2026-02-05T09:00:00Z",
+    "published_at": "2026-02-05T10:00:00Z"
+  },
+  {
+    "id": "plan-business",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "business",
+    "title": "Business",
+    "metadata": {
+      "tagline": {
+        "value": "For departments"
+      },
+      "price": {
+        "value": 9900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 50
+      },
+      "storage": {
+        "value": 1000
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "Unlimited projects",
+          "Single sign-on",
+          "Roles and permissions",
+          "Audit log",
+          "Custom domains"
+        ]
+      },
+      "yearly": {
+        "value": 99000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-06T09:00:00Z",
+    "updated_at": "2026-02-06T09:00:00Z",
+    "published_at": "2026-02-06T10:00:00Z"
+  },
+  {
+    "id": "plan-pro",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "pro",
+    "title": "Pro",
+    "metadata": {
+      "tagline": {
+        "value": "For power users"
+      },
+      "price": {
+        "value": 2900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 5
+      },
+      "storage": {
+        "value": 250
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "Unlimited projects",
+          "Priority support",
+          "API access"
+        ]
+      },
+      "yearly": {
+        "value": 29000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-07T09:00:00Z",
+    "updated_at": "2026-02-07T09:00:00Z",
+    "published_at": "2026-02-07T10:00:00Z"
+  },
+  {
+    "id": "plan-scale",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "scale",
+    "title": "Scale",
+    "metadata": {
+      "tagline": {
+        "value": "For high traffic"
+      },
+      "price": {
+        "value": 19900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 100
+      },
+      "storage": {
+        "value": 2000
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "Unlimited projects",
+          "Single sign-on",
+          "API access",
+          "Dedicated support"
+        ]
+      },
+      "yearly": {
+        "value": 199000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-08T09:00:00Z",
+    "updated_at": "2026-02-08T09:00:00Z",
+    "published_at": "2026-02-08T10:00:00Z"
+  },
+  {
+    "id": "plan-studio",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "studio",
+    "title": "Studio",
+    "metadata": {
+      "tagline": {
+        "value": "For agencies"
+      },
+      "price": {
+        "value": 14900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 40
+      },
+      "storage": {
+        "value": 1500
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "Client workspaces",
+          "White label",
+          "Roles and permissions",
+          "API access"
+        ]
+      },
+      "yearly": {
+        "value": 149000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-09T09:00:00Z",
+    "updated_at": "2026-02-09T09:00:00Z",
+    "published_at": "2026-02-09T10:00:00Z"
+  },
+  {
+    "id": "plan-enterprise",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "enterprise",
+    "title": "Enterprise",
+    "metadata": {
+      "tagline": {
+        "value": "For large companies"
+      },
+      "price": {
+        "value": 49900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 500
+      },
+      "storage": {
+        "value": 10000
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "Unlimited everything",
+          "Single sign-on",
+          "Dedicated manager",
+          "Service level agreement"
+        ]
+      },
+      "yearly": {
+        "value": 499000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-10T09:00:00Z",
+    "updated_at": "2026-02-10T09:00:00Z",
+    "published_at": "2026-02-10T10:00:00Z"
+  },
+  {
+    "id": "plan-legacy-starter",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "legacy-starter",
+    "title": "Legacy Starter",
+    "metadata": {
+      "tagline": {
+        "value": "Kept for old accounts"
+      },
+      "price": {
+        "value": 500
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 2
+      },
+      "storage": {
+        "value": 5
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "legacy"
+      },
+      "features": {
+        "value": [
+          "2 projects",
+          "Email support"
+        ]
+      },
+      "yearly": {
+        "value": 5000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-11T09:00:00Z",
+    "updated_at": "2026-02-11T09:00:00Z",
+    "published_at": "2026-02-11T10:00:00Z"
+  },
+  {
+    "id": "plan-legacy-team",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "legacy-team",
+    "title": "Legacy Team",
+    "metadata": {
+      "tagline": {
+        "value": "Kept for old accounts"
+      },
+      "price": {
+        "value": 2500
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 10
+      },
+      "storage": {
+        "value": 100
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "legacy"
+      },
+      "features": {
+        "value": [
+          "10 projects",
+          "Email support",
+          "Basic reports"
+        ]
+      },
+      "yearly": {
+        "value": 25000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-01-12T09:00:00Z",
+    "updated_at": "2026-02-12T09:00:00Z",
+    "published_at": "2026-02-12T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/posts.ts b/packages/shared/app/src/data/posts.ts
new file mode 100644
index 0000000..dd5f23e
--- /dev/null
+++ b/packages/shared/app/src/data/posts.ts
@@ -0,0 +1,198 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/posts.json
+// Fixture of the Codex collection "posts" (xgen/fixtures/posts.json)
+export const posts = [
+  {
+    "id": "post-static-first",
+    "locale": "en",
+    "kind": "post",
+    "status": "published",
+    "visibility": "public",
+    "slug": "static-first",
+    "title": "Why static-first pages still win",
+    "excerpt": "Less script, less waiting, and pages that keep working offline.",
+    "author_id": "user-mara-quinn",
+    "featured_media_id": "media-static-first",
+    "terms": [
+      {
+        "taxonomy": "category",
+        "term_id": "category-engineering"
+      }
+    ],
+    "metadata": {
+      "date": {
+        "value": "2026-03-18T10:00:00Z"
+      },
+      "minutes": {
+        "value": 6
+      },
+      "icon": {
+        "value": "zap"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "post-design-tokens",
+    "locale": "en",
+    "kind": "post",
+    "status": "published",
+    "visibility": "public",
+    "slug": "design-tokens",
+    "title": "Design tokens without the drift",
+    "excerpt": "How one list of tokens feeds every runtime and every theme.",
+    "author_id": "user-aya-tanaka",
+    "terms": [
+      {
+        "taxonomy": "category",
+        "term_id": "category-design"
+      }
+    ],
+    "metadata": {
+      "date": {
+        "value": "2026-03-11T10:00:00Z"
+      },
+      "minutes": {
+        "value": 5
+      },
+      "icon": {
+        "value": "palette"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "post-launch-notes",
+    "locale": "en",
+    "kind": "post",
+    "status": "published",
+    "visibility": "public",
+    "slug": "launch-notes",
+    "title": "Launch notes for spring",
+    "excerpt": "New blocks, faster builds and a calmer dashboard.",
+    "author_id": "user-jon-ellis",
+    "terms": [
+      {
+        "taxonomy": "category",
+        "term_id": "category-product"
+      }
+    ],
+    "metadata": {
+      "date": {
+        "value": "2026-03-04T10:00:00Z"
+      },
+      "minutes": {
+        "value": 3
+      },
+      "icon": {
+        "value": "megaphone"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "post-small-teams",
+    "locale": "en",
+    "kind": "post",
+    "status": "published",
+    "visibility": "public",
+    "slug": "small-teams",
+    "title": "Shipping with a small team",
+    "excerpt": "A short checklist that keeps a team of four on track.",
+    "author_id": "user-luis-ortega",
+    "terms": [
+      {
+        "taxonomy": "category",
+        "term_id": "category-company"
+      }
+    ],
+    "metadata": {
+      "date": {
+        "value": "2026-02-25T10:00:00Z"
+      },
+      "minutes": {
+        "value": 4
+      },
+      "icon": {
+        "value": "users"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "post-accessible-forms",
+    "locale": "en",
+    "kind": "post",
+    "status": "published",
+    "visibility": "public",
+    "slug": "accessible-forms",
+    "title": "Accessible forms in an afternoon",
+    "excerpt": "Labels, errors and focus: the three things that matter most.",
+    "author_id": "user-mara-quinn",
+    "terms": [
+      {
+        "taxonomy": "category",
+        "term_id": "category-engineering"
+      }
+    ],
+    "metadata": {
+      "date": {
+        "value": "2026-02-14T10:00:00Z"
+      },
+      "minutes": {
+        "value": 7
+      },
+      "icon": {
+        "value": "text-cursor-input"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  },
+  {
+    "id": "post-pricing-page",
+    "locale": "en",
+    "kind": "post",
+    "status": "published",
+    "visibility": "public",
+    "slug": "pricing-page",
+    "title": "What a good pricing page shows",
+    "excerpt": "Plans, limits and answers, in that order.",
+    "author_id": "user-jon-ellis",
+    "terms": [
+      {
+        "taxonomy": "category",
+        "term_id": "category-growth"
+      }
+    ],
+    "metadata": {
+      "date": {
+        "value": "2026-02-02T10:00:00Z"
+      },
+      "minutes": {
+        "value": 5
+      },
+      "icon": {
+        "value": "badge-dollar-sign"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-11T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/posttags.ts b/packages/shared/app/src/data/posttags.ts
new file mode 100644
index 0000000..555532b
--- /dev/null
+++ b/packages/shared/app/src/data/posttags.ts
@@ -0,0 +1,77 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/posttags.json
+// Fixture of the Codex collection "posttags" (xgen/fixtures/posttags.json)
+export const posttags = [
+  {
+    "id": "posttag-performance",
+    "locale": "en",
+    "kind": "posttag",
+    "status": "published",
+    "visibility": "public",
+    "slug": "performance",
+    "title": "Performance",
+    "metadata": {
+      "icon": {
+        "value": "zap"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "posttag-static",
+    "locale": "en",
+    "kind": "posttag",
+    "status": "published",
+    "visibility": "public",
+    "slug": "static",
+    "title": "Static sites",
+    "metadata": {
+      "icon": {
+        "value": "layers"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "posttag-caching",
+    "locale": "en",
+    "kind": "posttag",
+    "status": "published",
+    "visibility": "public",
+    "slug": "caching",
+    "title": "Caching",
+    "metadata": {
+      "icon": {
+        "value": "rotate-ccw"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "posttag-offline",
+    "locale": "en",
+    "kind": "posttag",
+    "status": "published",
+    "visibility": "public",
+    "slug": "offline",
+    "title": "Offline",
+    "metadata": {
+      "icon": {
+        "value": "globe"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/products.ts b/packages/shared/app/src/data/products.ts
new file mode 100644
index 0000000..9b604a8
--- /dev/null
+++ b/packages/shared/app/src/data/products.ts
@@ -0,0 +1,269 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/products.json
+// Fixture of the Codex collection "products" (xgen/fixtures/products.json)
+export const products = [
+  {
+    "id": "product-lamp",
+    "locale": "en",
+    "kind": "product",
+    "status": "published",
+    "visibility": "public",
+    "slug": "lamp",
+    "title": "Arc desk lamp",
+    "featured_media_id": "media-lamp",
+    "terms": [
+      {
+        "taxonomy": "product_category",
+        "term_id": "product-category-light"
+      }
+    ],
+    "metadata": {
+      "summary": {
+        "value": "Warm, dimmable light with a weighted base."
+      },
+      "price": {
+        "value": 8900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "rating": {
+        "value": 4.5
+      },
+      "reviews": {
+        "value": 128
+      },
+      "badge": {
+        "value": "new"
+      },
+      "inStock": {
+        "value": true
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "product-bag",
+    "locale": "en",
+    "kind": "product",
+    "status": "published",
+    "visibility": "public",
+    "slug": "bag",
+    "title": "Field backpack",
+    "featured_media_id": "media-bag",
+    "terms": [
+      {
+        "taxonomy": "product_category",
+        "term_id": "product-category-bags"
+      }
+    ],
+    "metadata": {
+      "summary": {
+        "value": "Water-resistant, 22 litres, fits a 16 inch laptop."
+      },
+      "price": {
+        "value": 12900
+      },
+      "compare_at": {
+        "value": 15900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "rating": {
+        "value": 4.8
+      },
+      "reviews": {
+        "value": 342
+      },
+      "badge": {
+        "value": ""
+      },
+      "inStock": {
+        "value": true
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "product-phones",
+    "locale": "en",
+    "kind": "product",
+    "status": "published",
+    "visibility": "public",
+    "slug": "phones",
+    "title": "Studio headphones",
+    "featured_media_id": "media-phones",
+    "terms": [
+      {
+        "taxonomy": "product_category",
+        "term_id": "product-category-audio"
+      }
+    ],
+    "metadata": {
+      "summary": {
+        "value": "Closed-back, 40 hour battery, wired and wireless."
+      },
+      "price": {
+        "value": 19900
+      },
+      "compare_at": {
+        "value": 24900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "rating": {
+        "value": 4.6
+      },
+      "reviews": {
+        "value": 87
+      },
+      "badge": {
+        "value": "sale"
+      },
+      "inStock": {
+        "value": true
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "product-stand",
+    "locale": "en",
+    "kind": "product",
+    "status": "published",
+    "visibility": "public",
+    "slug": "stand",
+    "title": "Laptop stand",
+    "terms": [
+      {
+        "taxonomy": "product_category",
+        "term_id": "product-category-desk"
+      }
+    ],
+    "metadata": {
+      "summary": {
+        "value": "Aluminium, folds flat, six heights."
+      },
+      "price": {
+        "value": 4900
+      },
+      "compare_at": {
+        "value": 5900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "rating": {
+        "value": 4.3
+      },
+      "reviews": {
+        "value": 210
+      },
+      "badge": {
+        "value": ""
+      },
+      "inStock": {
+        "value": false
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "product-mat",
+    "locale": "en",
+    "kind": "product",
+    "status": "published",
+    "visibility": "public",
+    "slug": "mat",
+    "title": "Desk mat",
+    "terms": [
+      {
+        "taxonomy": "product_category",
+        "term_id": "product-category-desk"
+      }
+    ],
+    "metadata": {
+      "summary": {
+        "value": "Felt top with a non-slip base, 90 by 40 cm."
+      },
+      "price": {
+        "value": 3500
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "rating": {
+        "value": 4.4
+      },
+      "reviews": {
+        "value": 64
+      },
+      "badge": {
+        "value": "new"
+      },
+      "inStock": {
+        "value": true
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  },
+  {
+    "id": "product-card",
+    "locale": "en",
+    "kind": "product",
+    "status": "published",
+    "visibility": "public",
+    "slug": "card",
+    "title": "Gift card",
+    "terms": [
+      {
+        "taxonomy": "product_category",
+        "term_id": "product-category-gifts"
+      }
+    ],
+    "metadata": {
+      "summary": {
+        "value": "Delivered by email, never expires."
+      },
+      "price": {
+        "value": 5000
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "rating": {
+        "value": 5
+      },
+      "reviews": {
+        "value": 19
+      },
+      "badge": {
+        "value": ""
+      },
+      "inStock": {
+        "value": true
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-11T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/profilefacts.ts b/packages/shared/app/src/data/profilefacts.ts
new file mode 100644
index 0000000..5bd5456
--- /dev/null
+++ b/packages/shared/app/src/data/profilefacts.ts
@@ -0,0 +1,77 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/profilefacts.json
+// Fixture of the Codex collection "profilefacts" (xgen/fixtures/profilefacts.json)
+export const profilefacts = [
+  {
+    "id": "profilefact-role",
+    "locale": "en",
+    "kind": "profilefact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "role",
+    "title": "Role",
+    "metadata": {
+      "value": {
+        "value": "Product designer"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "profilefact-based",
+    "locale": "en",
+    "kind": "profilefact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "based",
+    "title": "Based in",
+    "metadata": {
+      "value": {
+        "value": "Lisbon"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "profilefact-years",
+    "locale": "en",
+    "kind": "profilefact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "years",
+    "title": "Experience",
+    "metadata": {
+      "value": {
+        "value": "9 years"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "profilefact-status",
+    "locale": "en",
+    "kind": "profilefact",
+    "status": "published",
+    "visibility": "public",
+    "slug": "status",
+    "title": "Status",
+    "metadata": {
+      "value": {
+        "value": "Open to projects"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/projects.ts b/packages/shared/app/src/data/projects.ts
new file mode 100644
index 0000000..d5adcd2
--- /dev/null
+++ b/packages/shared/app/src/data/projects.ts
@@ -0,0 +1,240 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/projects.json
+// Fixture of the Codex collection "projects" (xgen/fixtures/projects.json)
+export const projects = [
+  {
+    "id": "project-atlas",
+    "locale": "en",
+    "kind": "project",
+    "status": "published",
+    "visibility": "public",
+    "slug": "atlas",
+    "title": "Atlas dashboard",
+    "metadata": {
+      "year": {
+        "value": 2026
+      },
+      "summary": {
+        "value": "An analytics dashboard for a logistics team: one screen for the whole fleet."
+      },
+      "tags": {
+        "value": [
+          "Svelte",
+          "Charts",
+          "Design system"
+        ]
+      },
+      "featured": {
+        "value": true
+      },
+      "client": {
+        "value": "Northwind Freight"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "project_category",
+        "term_id": "project-category-product-design"
+      }
+    ]
+  },
+  {
+    "id": "project-harbor",
+    "locale": "en",
+    "kind": "project",
+    "status": "published",
+    "visibility": "public",
+    "slug": "harbor",
+    "title": "Harbor booking",
+    "metadata": {
+      "year": {
+        "value": 2025
+      },
+      "summary": {
+        "value": "Booking flow for a chain of marinas, from the map to the receipt."
+      },
+      "tags": {
+        "value": [
+          "React",
+          "Payments"
+        ]
+      },
+      "featured": {
+        "value": false
+      },
+      "client": {
+        "value": "Bluewater"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "project_category",
+        "term_id": "project-category-web-app"
+      }
+    ]
+  },
+  {
+    "id": "project-lumen",
+    "locale": "en",
+    "kind": "project",
+    "status": "published",
+    "visibility": "public",
+    "slug": "lumen",
+    "title": "Lumen brand",
+    "metadata": {
+      "year": {
+        "value": 2025
+      },
+      "summary": {
+        "value": "Identity, type and a site for a lighting studio."
+      },
+      "tags": {
+        "value": [
+          "Brand",
+          "Website"
+        ]
+      },
+      "featured": {
+        "value": false
+      },
+      "client": {
+        "value": "Lumen Studio"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "project_category",
+        "term_id": "project-category-branding"
+      }
+    ]
+  },
+  {
+    "id": "project-orbit",
+    "locale": "en",
+    "kind": "project",
+    "status": "published",
+    "visibility": "public",
+    "slug": "orbit",
+    "title": "Orbit mobile",
+    "metadata": {
+      "year": {
+        "value": 2024
+      },
+      "summary": {
+        "value": "A habit tracker that fits on the lock screen."
+      },
+      "tags": {
+        "value": [
+          "iOS",
+          "Android"
+        ]
+      },
+      "featured": {
+        "value": true
+      },
+      "client": {
+        "value": "Orbit Labs"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "project_category",
+        "term_id": "project-category-mobile"
+      }
+    ]
+  },
+  {
+    "id": "project-field",
+    "locale": "en",
+    "kind": "project",
+    "status": "published",
+    "visibility": "public",
+    "slug": "field",
+    "title": "Field notes",
+    "metadata": {
+      "year": {
+        "value": 2024
+      },
+      "summary": {
+        "value": "A long-read magazine with a reading mode and offline issues."
+      },
+      "tags": {
+        "value": [
+          "Vue",
+          "Content"
+        ]
+      },
+      "featured": {
+        "value": false
+      },
+      "client": {
+        "value": "Field Press"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-10T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "project_category",
+        "term_id": "project-category-editorial"
+      }
+    ]
+  },
+  {
+    "id": "project-cedar",
+    "locale": "en",
+    "kind": "project",
+    "status": "published",
+    "visibility": "public",
+    "slug": "cedar",
+    "title": "Cedar store",
+    "metadata": {
+      "year": {
+        "value": 2023
+      },
+      "summary": {
+        "value": "A small furniture store with a configurator and same-day delivery."
+      },
+      "tags": {
+        "value": [
+          "Commerce",
+          "3D"
+        ]
+      },
+      "featured": {
+        "value": false
+      },
+      "client": {
+        "value": "Cedar and Co"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-12T09:00:00Z",
+    "updated_at": "2026-03-13T09:00:00Z",
+    "published_at": "2026-03-13T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "project_category",
+        "term_id": "project-category-commerce"
+      }
+    ]
+  }
+] as const;
diff --git a/packages/shared/app/src/data/promos.ts b/packages/shared/app/src/data/promos.ts
new file mode 100644
index 0000000..35793b3
--- /dev/null
+++ b/packages/shared/app/src/data/promos.ts
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/promos.json
+// Fixture of the Codex collection "promos" (xgen/fixtures/promos.json)
+export const promos = [
+  {
+    "id": "promo-welcome",
+    "locale": "en",
+    "kind": "promo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "welcome",
+    "title": "WELCOME10",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "promo-freeship",
+    "locale": "en",
+    "kind": "promo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "freeship",
+    "title": "FREESHIP",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "promo-desk",
+    "locale": "en",
+    "kind": "promo",
+    "status": "published",
+    "visibility": "public",
+    "slug": "desk",
+    "title": "DESK15",
+    "metadata": {},
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/prompts.ts b/packages/shared/app/src/data/prompts.ts
new file mode 100644
index 0000000..784dab2
--- /dev/null
+++ b/packages/shared/app/src/data/prompts.ts
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/prompts.json
+// Fixture of the Codex collection "prompts" (xgen/fixtures/prompts.json)
+export const prompts = [
+  {
+    "id": "prompt-code",
+    "locale": "en",
+    "kind": "prompt",
+    "status": "published",
+    "visibility": "public",
+    "slug": "code",
+    "title": "Code",
+    "metadata": {
+      "icon": {
+        "value": "code-xml"
+      },
+      "value": {
+        "value": "code"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "prompt-landing",
+    "locale": "en",
+    "kind": "prompt",
+    "status": "published",
+    "visibility": "public",
+    "slug": "landing",
+    "title": "Landing",
+    "metadata": {
+      "icon": {
+        "value": "layout-grid"
+      },
+      "value": {
+        "value": "landing"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "prompt-dashboard",
+    "locale": "en",
+    "kind": "prompt",
+    "status": "published",
+    "visibility": "public",
+    "slug": "dashboard",
+    "title": "Dashboard",
+    "metadata": {
+      "icon": {
+        "value": "activity"
+      },
+      "value": {
+        "value": "dashboard"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "prompt-mini-game",
+    "locale": "en",
+    "kind": "prompt",
+    "status": "published",
+    "visibility": "public",
+    "slug": "mini-game",
+    "title": "Mini Game",
+    "metadata": {
+      "icon": {
+        "value": "puzzle"
+      },
+      "value": {
+        "value": "mini-game"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "prompt-data",
+    "locale": "en",
+    "kind": "prompt",
+    "status": "published",
+    "visibility": "public",
+    "slug": "data",
+    "title": "Data",
+    "metadata": {
+      "icon": {
+        "value": "blocks"
+      },
+      "value": {
+        "value": "data"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/questions.ts b/packages/shared/app/src/data/questions.ts
new file mode 100644
index 0000000..e625b50
--- /dev/null
+++ b/packages/shared/app/src/data/questions.ts
@@ -0,0 +1,167 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/questions.json
+// Fixture of the Codex collection "questions" (xgen/fixtures/questions.json)
+export const questions = [
+  {
+    "id": "question-start",
+    "locale": "en",
+    "kind": "question",
+    "status": "published",
+    "visibility": "public",
+    "slug": "start",
+    "title": "How do I start a new site?",
+    "metadata": {
+      "answer": {
+        "value": "Pick a template, change the texts in one dictionary and publish. Most sites are live in an hour."
+      },
+      "icon": {
+        "value": "rocket"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-getting-started"
+      }
+    ]
+  },
+  {
+    "id": "question-domain",
+    "locale": "en",
+    "kind": "question",
+    "status": "published",
+    "visibility": "public",
+    "slug": "domain",
+    "title": "Can I use my own domain?",
+    "metadata": {
+      "answer": {
+        "value": "Yes. Point your domain at the site and we issue the certificate for you."
+      },
+      "icon": {
+        "value": "globe"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-getting-started"
+      }
+    ]
+  },
+  {
+    "id": "question-billing",
+    "locale": "en",
+    "kind": "question",
+    "status": "published",
+    "visibility": "public",
+    "slug": "billing",
+    "title": "When am I billed?",
+    "metadata": {
+      "answer": {
+        "value": "On the same day each month. You can switch to yearly billing and save two months."
+      },
+      "icon": {
+        "value": "credit-card"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-billing"
+      }
+    ]
+  },
+  {
+    "id": "question-refund",
+    "locale": "en",
+    "kind": "question",
+    "status": "published",
+    "visibility": "public",
+    "slug": "refund",
+    "title": "Do you give refunds?",
+    "metadata": {
+      "answer": {
+        "value": "Within 30 days of a payment, no questions asked."
+      },
+      "icon": {
+        "value": "rotate-ccw"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-billing"
+      }
+    ]
+  },
+  {
+    "id": "question-team",
+    "locale": "en",
+    "kind": "question",
+    "status": "published",
+    "visibility": "public",
+    "slug": "team",
+    "title": "How do I invite my team?",
+    "metadata": {
+      "answer": {
+        "value": "Open the settings, add their addresses and choose what each person can edit."
+      },
+      "icon": {
+        "value": "users"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-10T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-account"
+      }
+    ]
+  },
+  {
+    "id": "question-export",
+    "locale": "en",
+    "kind": "question",
+    "status": "published",
+    "visibility": "public",
+    "slug": "export",
+    "title": "Can I take my content with me?",
+    "metadata": {
+      "answer": {
+        "value": "Every plan exports all pages and texts as plain files at any time."
+      },
+      "icon": {
+        "value": "download"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-12T09:00:00Z",
+    "updated_at": "2026-03-13T09:00:00Z",
+    "published_at": "2026-03-13T10:00:00Z",
+    "terms": [
+      {
+        "taxonomy": "faq_category",
+        "term_id": "faq-category-account"
+      }
+    ]
+  }
+] as const;
diff --git a/packages/shared/app/src/data/reviews.ts b/packages/shared/app/src/data/reviews.ts
new file mode 100644
index 0000000..7aaec6b
--- /dev/null
+++ b/packages/shared/app/src/data/reviews.ts
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/reviews.json
+// Fixture of the Codex collection "reviews" (xgen/fixtures/reviews.json)
+export const reviews = [
+  {
+    "id": "review-r1",
+    "locale": "en",
+    "kind": "review",
+    "status": "published",
+    "visibility": "public",
+    "slug": "r1",
+    "title": "Great light for late work",
+    "author_id": "user-dana-pierce",
+    "metadata": {
+      "rating": {
+        "value": 5
+      },
+      "text": {
+        "value": "Bright enough to read, soft enough to relax. The base stays put."
+      },
+      "date": {
+        "value": "2026-03-12T10:00:00Z"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "review-r2",
+    "locale": "en",
+    "kind": "review",
+    "status": "published",
+    "visibility": "public",
+    "slug": "r2",
+    "title": "Solid and simple",
+    "author_id": "user-ravi-menon",
+    "metadata": {
+      "rating": {
+        "value": 4
+      },
+      "text": {
+        "value": "Build quality is better than the price suggests."
+      },
+      "date": {
+        "value": "2026-03-03T10:00:00Z"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "review-r3",
+    "locale": "en",
+    "kind": "review",
+    "status": "published",
+    "visibility": "public",
+    "slug": "r3",
+    "title": "Does the job",
+    "author_id": "user-elena-brandt",
+    "metadata": {
+      "rating": {
+        "value": 4
+      },
+      "text": {
+        "value": "Easy setup. I would like one more color."
+      },
+      "date": {
+        "value": "2026-02-19T10:00:00Z"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/rivals.ts b/packages/shared/app/src/data/rivals.ts
new file mode 100644
index 0000000..424b812
--- /dev/null
+++ b/packages/shared/app/src/data/rivals.ts
@@ -0,0 +1,125 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/rivals.json
+// Fixture of the Codex collection "rivals" (xgen/fixtures/rivals.json)
+export const rivals = [
+  {
+    "id": "row-speed",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "speed",
+    "title": "Median load time",
+    "metadata": {
+      "a": {
+        "value": "0.8 s"
+      },
+      "b": {
+        "value": "2.4 s"
+      },
+      "c": {
+        "value": "3.1 s"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "row-runtimes",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "runtimes",
+    "title": "Svelte and React",
+    "metadata": {
+      "a": {
+        "value": "yes"
+      },
+      "b": {
+        "value": "no"
+      },
+      "c": {
+        "value": "no"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "row-a11y",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "a11y",
+    "title": "Accessibility checks",
+    "metadata": {
+      "a": {
+        "value": "yes"
+      },
+      "b": {
+        "value": "yes"
+      },
+      "c": {
+        "value": "no"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "row-drift",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "drift",
+    "title": "Drift check",
+    "metadata": {
+      "a": {
+        "value": "yes"
+      },
+      "b": {
+        "value": "no"
+      },
+      "c": {
+        "value": "no"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "row-free",
+    "locale": "en",
+    "kind": "row",
+    "status": "published",
+    "visibility": "public",
+    "slug": "free",
+    "title": "Free tier",
+    "metadata": {
+      "a": {
+        "value": "yes"
+      },
+      "b": {
+        "value": "yes"
+      },
+      "c": {
+        "value": "no"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/series.ts b/packages/shared/app/src/data/series.ts
new file mode 100644
index 0000000..090b07e
--- /dev/null
+++ b/packages/shared/app/src/data/series.ts
@@ -0,0 +1,131 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/series.json
+// Fixture of the Codex collection "series" (xgen/fixtures/series.json)
+export const series = [
+  {
+    "id": "point-mon",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "mon",
+    "title": "Mon",
+    "metadata": {
+      "value": {
+        "value": 42
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "point-tue",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "tue",
+    "title": "Tue",
+    "metadata": {
+      "value": {
+        "value": 58
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "point-wed",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "wed",
+    "title": "Wed",
+    "metadata": {
+      "value": {
+        "value": 51
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "point-thu",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "thu",
+    "title": "Thu",
+    "metadata": {
+      "value": {
+        "value": 74
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "point-fri",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "fri",
+    "title": "Fri",
+    "metadata": {
+      "value": {
+        "value": 66
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  },
+  {
+    "id": "point-sat",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "sat",
+    "title": "Sat",
+    "metadata": {
+      "value": {
+        "value": 31
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-11T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  },
+  {
+    "id": "point-sun",
+    "locale": "en",
+    "kind": "point",
+    "status": "published",
+    "visibility": "public",
+    "slug": "sun",
+    "title": "Sun",
+    "metadata": {
+      "value": {
+        "value": 24
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-13T09:00:00Z",
+    "updated_at": "2026-03-14T09:00:00Z",
+    "published_at": "2026-03-14T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/sidenav.ts b/packages/shared/app/src/data/sidenav.ts
new file mode 100644
index 0000000..6bd6f42
--- /dev/null
+++ b/packages/shared/app/src/data/sidenav.ts
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/sidenav.json
+// Fixture of the Codex collection "sidenav" (xgen/fixtures/sidenav.json)
+export const sidenav = [
+  {
+    "id": "item-overview",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "overview",
+    "title": "Overview",
+    "metadata": {
+      "location": {
+        "value": "sidebar"
+      },
+      "icon": {
+        "value": "layout-dashboard"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "item-orders",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "orders",
+    "title": "Orders",
+    "metadata": {
+      "location": {
+        "value": "sidebar"
+      },
+      "icon": {
+        "value": "shopping-bag"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "item-customers",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "customers",
+    "title": "Customers",
+    "metadata": {
+      "location": {
+        "value": "sidebar"
+      },
+      "icon": {
+        "value": "users"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "item-reports",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "reports",
+    "title": "Reports",
+    "metadata": {
+      "location": {
+        "value": "sidebar"
+      },
+      "icon": {
+        "value": "file-text"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "item-settings",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "settings",
+    "title": "Settings",
+    "metadata": {
+      "location": {
+        "value": "sidebar"
+      },
+      "icon": {
+        "value": "settings"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/sitemap.ts b/packages/shared/app/src/data/sitemap.ts
new file mode 100644
index 0000000..a8a22fc
--- /dev/null
+++ b/packages/shared/app/src/data/sitemap.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/sitemap.json
+// Fixture of the Codex collection "sitemap" (xgen/fixtures/sitemap.json)
+export const sitemap = [
+  {
+    "id": "group-product",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "footer-product",
+    "title": "Product",
+    "metadata": {
+      "location": {
+        "value": "footer"
+      },
+      "icon": {
+        "value": "layers"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "group-company",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "footer-company",
+    "title": "Company",
+    "metadata": {
+      "location": {
+        "value": "footer"
+      },
+      "icon": {
+        "value": "building"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "group-resources",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "footer-resources",
+    "title": "Resources",
+    "metadata": {
+      "location": {
+        "value": "footer"
+      },
+      "icon": {
+        "value": "book-open"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "group-legal",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "footer-legal",
+    "title": "Legal",
+    "metadata": {
+      "location": {
+        "value": "footer"
+      },
+      "icon": {
+        "value": "shield"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/skills.ts b/packages/shared/app/src/data/skills.ts
new file mode 100644
index 0000000..e13a05f
--- /dev/null
+++ b/packages/shared/app/src/data/skills.ts
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/skills.json
+// Fixture of the Codex collection "skills" (xgen/fixtures/skills.json)
+export const skills = [
+  {
+    "id": "skill-systems",
+    "locale": "en",
+    "kind": "skill",
+    "status": "published",
+    "visibility": "public",
+    "slug": "systems",
+    "title": "Design systems",
+    "metadata": {
+      "level": {
+        "value": 95
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "skill-research",
+    "locale": "en",
+    "kind": "skill",
+    "status": "published",
+    "visibility": "public",
+    "slug": "research",
+    "title": "User research",
+    "metadata": {
+      "level": {
+        "value": 85
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "skill-prototyping",
+    "locale": "en",
+    "kind": "skill",
+    "status": "published",
+    "visibility": "public",
+    "slug": "prototyping",
+    "title": "Prototyping",
+    "metadata": {
+      "level": {
+        "value": 90
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "skill-frontend",
+    "locale": "en",
+    "kind": "skill",
+    "status": "published",
+    "visibility": "public",
+    "slug": "frontend",
+    "title": "Frontend code",
+    "metadata": {
+      "level": {
+        "value": 70
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  },
+  {
+    "id": "skill-writing",
+    "locale": "en",
+    "kind": "skill",
+    "status": "published",
+    "visibility": "public",
+    "slug": "writing",
+    "title": "Product writing",
+    "metadata": {
+      "level": {
+        "value": 80
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-10T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/specs.ts b/packages/shared/app/src/data/specs.ts
new file mode 100644
index 0000000..09ef236
--- /dev/null
+++ b/packages/shared/app/src/data/specs.ts
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/specs.json
+// Fixture of the Codex collection "specs" (xgen/fixtures/specs.json)
+export const specs = [
+  {
+    "id": "spec-category",
+    "locale": "en",
+    "kind": "spec",
+    "status": "published",
+    "visibility": "public",
+    "slug": "category",
+    "title": "Category",
+    "metadata": {
+      "value": {
+        "value": "Lighting"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "spec-weight",
+    "locale": "en",
+    "kind": "spec",
+    "status": "published",
+    "visibility": "public",
+    "slug": "weight",
+    "title": "Weight",
+    "metadata": {
+      "value": {
+        "value": "1.2 kg"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "spec-size",
+    "locale": "en",
+    "kind": "spec",
+    "status": "published",
+    "visibility": "public",
+    "slug": "size",
+    "title": "Size",
+    "metadata": {
+      "value": {
+        "value": "42 x 18 cm"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "spec-material",
+    "locale": "en",
+    "kind": "spec",
+    "status": "published",
+    "visibility": "public",
+    "slug": "material",
+    "title": "Material",
+    "metadata": {
+      "value": {
+        "value": "Aluminium"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  },
+  {
+    "id": "spec-warranty",
+    "locale": "en",
+    "kind": "spec",
+    "status": "published",
+    "visibility": "public",
+    "slug": "warranty",
+    "title": "Warranty",
+    "metadata": {
+      "value": {
+        "value": "2 years"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-10T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/stats.ts b/packages/shared/app/src/data/stats.ts
new file mode 100644
index 0000000..e476a31
--- /dev/null
+++ b/packages/shared/app/src/data/stats.ts
@@ -0,0 +1,107 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/stats.json
+// Fixture of the Codex collection "stats" (xgen/fixtures/stats.json)
+export const stats = [
+  {
+    "id": "stat-sites",
+    "locale": "en",
+    "kind": "stat",
+    "status": "published",
+    "visibility": "public",
+    "slug": "sites",
+    "title": "Sites published",
+    "metadata": {
+      "value": {
+        "value": 12400
+      },
+      "icon": {
+        "value": "globe"
+      },
+      "hint": {
+        "value": "since launch"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "stat-uptime",
+    "locale": "en",
+    "kind": "stat",
+    "status": "published",
+    "visibility": "public",
+    "slug": "uptime",
+    "title": "Uptime",
+    "metadata": {
+      "value": {
+        "value": 99.99
+      },
+      "unit": {
+        "value": "percent"
+      },
+      "icon": {
+        "value": "activity"
+      },
+      "hint": {
+        "value": "last 12 months"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "stat-teams",
+    "locale": "en",
+    "kind": "stat",
+    "status": "published",
+    "visibility": "public",
+    "slug": "teams",
+    "title": "Teams",
+    "metadata": {
+      "value": {
+        "value": 3200
+      },
+      "icon": {
+        "value": "users"
+      },
+      "hint": {
+        "value": "in 60 countries"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "stat-speed",
+    "locale": "en",
+    "kind": "stat",
+    "status": "published",
+    "visibility": "public",
+    "slug": "speed",
+    "title": "Median load",
+    "metadata": {
+      "value": {
+        "value": 0.8
+      },
+      "unit": {
+        "value": "second"
+      },
+      "icon": {
+        "value": "zap"
+      },
+      "hint": {
+        "value": "on a mobile network"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/steps.ts b/packages/shared/app/src/data/steps.ts
new file mode 100644
index 0000000..f0a9420
--- /dev/null
+++ b/packages/shared/app/src/data/steps.ts
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/steps.json
+// Fixture of the Codex collection "steps" (xgen/fixtures/steps.json)
+export const steps = [
+  {
+    "id": "step-plan",
+    "locale": "en",
+    "kind": "step",
+    "status": "published",
+    "visibility": "public",
+    "slug": "plan",
+    "title": "Pick a plan",
+    "metadata": {
+      "text": {
+        "value": "Start free and upgrade when the team grows."
+      },
+      "icon": {
+        "value": "clipboard-list"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "step-connect",
+    "locale": "en",
+    "kind": "step",
+    "status": "published",
+    "visibility": "public",
+    "slug": "connect",
+    "title": "Connect your data",
+    "metadata": {
+      "text": {
+        "value": "Point the site at your collections and content."
+      },
+      "icon": {
+        "value": "database"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "step-design",
+    "locale": "en",
+    "kind": "step",
+    "status": "published",
+    "visibility": "public",
+    "slug": "design",
+    "title": "Choose the blocks",
+    "metadata": {
+      "text": {
+        "value": "Compose pages from ready blocks and variants."
+      },
+      "icon": {
+        "value": "layout-grid"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "step-launch",
+    "locale": "en",
+    "kind": "step",
+    "status": "published",
+    "visibility": "public",
+    "slug": "launch",
+    "title": "Publish",
+    "metadata": {
+      "text": {
+        "value": "Ship to every runtime with one command."
+      },
+      "icon": {
+        "value": "rocket"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/stores.ts b/packages/shared/app/src/data/stores.ts
new file mode 100644
index 0000000..a7d29ee
--- /dev/null
+++ b/packages/shared/app/src/data/stores.ts
@@ -0,0 +1,150 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/stores.json
+// Fixture of the Codex collection "stores" (xgen/fixtures/stores.json)
+export const stores = [
+  {
+    "id": "store-market",
+    "locale": "en",
+    "kind": "store",
+    "status": "published",
+    "visibility": "public",
+    "slug": "market",
+    "title": "Market Street",
+    "metadata": {
+      "store_kind": {
+        "value": "pickup"
+      },
+      "address": {
+        "value": "18 Market Street"
+      },
+      "hours": {
+        "value": "Daily, 8:00 to 23:00"
+      },
+      "phone": {
+        "value": "+1 555 0145"
+      },
+      "note": {
+        "value": "Five minutes from Central station"
+      },
+      "services": {
+        "value": [
+          "Pickup in 30 minutes",
+          "Gift wrapping",
+          "Repairs"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "store-harbour",
+    "locale": "en",
+    "kind": "store",
+    "status": "published",
+    "visibility": "public",
+    "slug": "harbour",
+    "title": "Harbour Road",
+    "metadata": {
+      "store_kind": {
+        "value": "pickup"
+      },
+      "address": {
+        "value": "71 Harbour Road"
+      },
+      "hours": {
+        "value": "Daily, 8:00 to 22:00"
+      },
+      "phone": {
+        "value": "+1 555 0146"
+      },
+      "note": {
+        "value": "Parking at the back"
+      },
+      "services": {
+        "value": [
+          "Pickup in 30 minutes",
+          "Parking"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "store-hillside",
+    "locale": "en",
+    "kind": "store",
+    "status": "published",
+    "visibility": "public",
+    "slug": "hillside",
+    "title": "Hillside Mall",
+    "metadata": {
+      "store_kind": {
+        "value": "store"
+      },
+      "address": {
+        "value": "75 Hillside Avenue, level 2"
+      },
+      "hours": {
+        "value": "Daily, 9:00 to 22:00"
+      },
+      "phone": {
+        "value": "+1 555 0147"
+      },
+      "note": {
+        "value": "Inside the mall, next to the food court"
+      },
+      "services": {
+        "value": [
+          "Showroom",
+          "Parking"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "store-depot",
+    "locale": "en",
+    "kind": "store",
+    "status": "published",
+    "visibility": "public",
+    "slug": "depot",
+    "title": "North Depot",
+    "metadata": {
+      "store_kind": {
+        "value": "pickup"
+      },
+      "address": {
+        "value": "6 Depot Lane"
+      },
+      "hours": {
+        "value": "Daily, 9:00 to 23:00"
+      },
+      "phone": {
+        "value": "+1 555 0148"
+      },
+      "note": {
+        "value": "Delivery hub with a pickup desk"
+      },
+      "services": {
+        "value": [
+          "Delivery hub",
+          "Returns desk"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/subnav.ts b/packages/shared/app/src/data/subnav.ts
new file mode 100644
index 0000000..5267aa2
--- /dev/null
+++ b/packages/shared/app/src/data/subnav.ts
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/subnav.json
+// Fixture of the Codex collection "subnav" (xgen/fixtures/subnav.json)
+export const subnav = [
+  {
+    "id": "subitem-all",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "orders-all",
+    "title": "All orders",
+    "metadata": {
+      "location": {
+        "value": "subnav"
+      },
+      "icon": {
+        "value": "inbox"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "subitem-drafts",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "drafts",
+    "title": "Drafts",
+    "metadata": {
+      "location": {
+        "value": "subnav"
+      },
+      "icon": {
+        "value": "file-text"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "subitem-shipping",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "shipping",
+    "title": "Shipping",
+    "metadata": {
+      "location": {
+        "value": "subnav"
+      },
+      "icon": {
+        "value": "truck"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  },
+  {
+    "id": "subitem-returns",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "returns",
+    "title": "Returns",
+    "metadata": {
+      "location": {
+        "value": "subnav"
+      },
+      "icon": {
+        "value": "rotate-ccw"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-08T09:00:00Z",
+    "updated_at": "2026-03-09T09:00:00Z",
+    "published_at": "2026-03-09T10:00:00Z"
+  },
+  {
+    "id": "subitem-archive",
+    "locale": "en",
+    "kind": "menu_item",
+    "status": "published",
+    "visibility": "public",
+    "slug": "archive",
+    "title": "Archive",
+    "metadata": {
+      "location": {
+        "value": "subnav"
+      },
+      "icon": {
+        "value": "package"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-10T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/summary.ts b/packages/shared/app/src/data/summary.ts
new file mode 100644
index 0000000..b2c8d0d
--- /dev/null
+++ b/packages/shared/app/src/data/summary.ts
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/summary.json
+// Fixture of the Codex collection "summary" (xgen/fixtures/summary.json)
+export const summary = [
+  {
+    "id": "summaryrow-subtotal",
+    "locale": "en",
+    "kind": "summaryrow",
+    "status": "published",
+    "visibility": "public",
+    "slug": "subtotal",
+    "title": "Subtotal",
+    "metadata": {
+      "amount": {
+        "value": 28800
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "strong": {
+        "value": false
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "summaryrow-shipping",
+    "locale": "en",
+    "kind": "summaryrow",
+    "status": "published",
+    "visibility": "public",
+    "slug": "shipping",
+    "title": "Shipping",
+    "metadata": {
+      "amount": {
+        "value": 1200
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "strong": {
+        "value": false
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "summaryrow-tax",
+    "locale": "en",
+    "kind": "summaryrow",
+    "status": "published",
+    "visibility": "public",
+    "slug": "tax",
+    "title": "Tax",
+    "metadata": {
+      "amount": {
+        "value": 2400
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "strong": {
+        "value": false
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "summaryrow-total",
+    "locale": "en",
+    "kind": "summaryrow",
+    "status": "published",
+    "visibility": "public",
+    "slug": "total",
+    "title": "Total",
+    "metadata": {
+      "amount": {
+        "value": 32400
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "strong": {
+        "value": true
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/tabs.ts b/packages/shared/app/src/data/tabs.ts
new file mode 100644
index 0000000..06fcf39
--- /dev/null
+++ b/packages/shared/app/src/data/tabs.ts
@@ -0,0 +1,77 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/tabs.json
+// Fixture of the Codex collection "tabs" (xgen/fixtures/tabs.json)
+export const tabs = [
+  {
+    "id": "tab-home",
+    "locale": "en",
+    "kind": "tab",
+    "status": "published",
+    "visibility": "public",
+    "slug": "home",
+    "title": "Home",
+    "metadata": {
+      "icon": {
+        "value": "house"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "tab-explore",
+    "locale": "en",
+    "kind": "tab",
+    "status": "published",
+    "visibility": "public",
+    "slug": "explore",
+    "title": "Explore",
+    "metadata": {
+      "icon": {
+        "value": "compass"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "tab-alerts",
+    "locale": "en",
+    "kind": "tab",
+    "status": "published",
+    "visibility": "public",
+    "slug": "alerts",
+    "title": "Alerts",
+    "metadata": {
+      "icon": {
+        "value": "bell"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "tab-account",
+    "locale": "en",
+    "kind": "tab",
+    "status": "published",
+    "visibility": "public",
+    "slug": "account",
+    "title": "Account",
+    "metadata": {
+      "icon": {
+        "value": "user"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/taxonomies.ts b/packages/shared/app/src/data/taxonomies.ts
new file mode 100644
index 0000000..3c1e9dc
--- /dev/null
+++ b/packages/shared/app/src/data/taxonomies.ts
@@ -0,0 +1,256 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/taxonomies/*.json
+// The Codex taxonomy bundles (xgen/fixtures/taxonomies/*.json): the terms that entries name in `terms`
+export const taxonomies = [
+  {
+    "definition": {
+      "id": "category",
+      "locale": "en",
+      "label": "Category",
+      "mode": "flat",
+      "assigned_to_kinds": [
+        "post"
+      ],
+      "public": true,
+      "version": 1
+    },
+    "terms": [
+      {
+        "id": "category-engineering",
+        "locale": "en",
+        "taxonomy_id": "category",
+        "name": "Engineering",
+        "slug": "engineering",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "category-design",
+        "locale": "en",
+        "taxonomy_id": "category",
+        "name": "Design",
+        "slug": "design",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "category-product",
+        "locale": "en",
+        "taxonomy_id": "category",
+        "name": "Product",
+        "slug": "product",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "category-company",
+        "locale": "en",
+        "taxonomy_id": "category",
+        "name": "Company",
+        "slug": "company",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "category-growth",
+        "locale": "en",
+        "taxonomy_id": "category",
+        "name": "Growth",
+        "slug": "growth",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      }
+    ]
+  },
+  {
+    "definition": {
+      "id": "faq_category",
+      "locale": "en",
+      "label": "Question topic",
+      "mode": "flat",
+      "assigned_to_kinds": [
+        "faq",
+        "question"
+      ],
+      "public": true,
+      "version": 1
+    },
+    "terms": [
+      {
+        "id": "faq-category-getting-started",
+        "locale": "en",
+        "taxonomy_id": "faq_category",
+        "name": "Getting started",
+        "slug": "getting-started",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "faq-category-billing",
+        "locale": "en",
+        "taxonomy_id": "faq_category",
+        "name": "Billing",
+        "slug": "billing",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "faq-category-account",
+        "locale": "en",
+        "taxonomy_id": "faq_category",
+        "name": "Account",
+        "slug": "account",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      }
+    ]
+  },
+  {
+    "definition": {
+      "id": "product_category",
+      "locale": "en",
+      "label": "Product category",
+      "mode": "flat",
+      "assigned_to_kinds": [
+        "product"
+      ],
+      "public": true,
+      "version": 1
+    },
+    "terms": [
+      {
+        "id": "product-category-light",
+        "locale": "en",
+        "taxonomy_id": "product_category",
+        "name": "Light",
+        "slug": "light",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "product-category-bags",
+        "locale": "en",
+        "taxonomy_id": "product_category",
+        "name": "Bags",
+        "slug": "bags",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "product-category-audio",
+        "locale": "en",
+        "taxonomy_id": "product_category",
+        "name": "Audio",
+        "slug": "audio",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "product-category-desk",
+        "locale": "en",
+        "taxonomy_id": "product_category",
+        "name": "Desk",
+        "slug": "desk",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "product-category-gifts",
+        "locale": "en",
+        "taxonomy_id": "product_category",
+        "name": "Gifts",
+        "slug": "gifts",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      }
+    ]
+  },
+  {
+    "definition": {
+      "id": "project_category",
+      "locale": "en",
+      "label": "Project type",
+      "mode": "flat",
+      "assigned_to_kinds": [
+        "project"
+      ],
+      "public": true,
+      "version": 1
+    },
+    "terms": [
+      {
+        "id": "project-category-product-design",
+        "locale": "en",
+        "taxonomy_id": "project_category",
+        "name": "Product design",
+        "slug": "product-design",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "project-category-web-app",
+        "locale": "en",
+        "taxonomy_id": "project_category",
+        "name": "Web app",
+        "slug": "web-app",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "project-category-branding",
+        "locale": "en",
+        "taxonomy_id": "project_category",
+        "name": "Branding",
+        "slug": "branding",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "project-category-mobile",
+        "locale": "en",
+        "taxonomy_id": "project_category",
+        "name": "Mobile",
+        "slug": "mobile",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "project-category-editorial",
+        "locale": "en",
+        "taxonomy_id": "project_category",
+        "name": "Editorial",
+        "slug": "editorial",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      },
+      {
+        "id": "project-category-commerce",
+        "locale": "en",
+        "taxonomy_id": "project_category",
+        "name": "Commerce",
+        "slug": "commerce",
+        "version": 1,
+        "created_at": "2026-03-01T09:00:00Z",
+        "updated_at": "2026-03-02T09:00:00Z"
+      }
+    ]
+  }
+] as const;
diff --git a/packages/shared/app/src/data/templates.ts b/packages/shared/app/src/data/templates.ts
new file mode 100644
index 0000000..cb92f66
--- /dev/null
+++ b/packages/shared/app/src/data/templates.ts
@@ -0,0 +1,197 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/templates.json
+// Fixture of the Codex collection "templates" (xgen/fixtures/templates.json)
+export const templates = [
+  {
+    "id": "template-store-front",
+    "locale": "en",
+    "kind": "template",
+    "status": "published",
+    "visibility": "public",
+    "slug": "store-front",
+    "title": "Store Front",
+    "metadata": {
+      "views": {
+        "value": 1200
+      },
+      "likes": {
+        "value": 96
+      },
+      "topic": {
+        "value": "landing"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "template-event-page",
+    "locale": "en",
+    "kind": "template",
+    "status": "published",
+    "visibility": "public",
+    "slug": "event-page",
+    "title": "Event Page",
+    "metadata": {
+      "views": {
+        "value": 3400
+      },
+      "likes": {
+        "value": 210
+      },
+      "topic": {
+        "value": "landing"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "template-team-dashboard",
+    "locale": "en",
+    "kind": "template",
+    "status": "published",
+    "visibility": "public",
+    "slug": "team-dashboard",
+    "title": "Team Dashboard",
+    "metadata": {
+      "views": {
+        "value": 860
+      },
+      "likes": {
+        "value": 48
+      },
+      "topic": {
+        "value": "dashboard"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "template-docs-site",
+    "locale": "en",
+    "kind": "template",
+    "status": "published",
+    "visibility": "public",
+    "slug": "docs-site",
+    "title": "Docs Site",
+    "metadata": {
+      "views": {
+        "value": 2100
+      },
+      "likes": {
+        "value": 133
+      },
+      "topic": {
+        "value": "code"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "template-portfolio",
+    "locale": "en",
+    "kind": "template",
+    "status": "published",
+    "visibility": "public",
+    "slug": "portfolio",
+    "title": "Portfolio",
+    "metadata": {
+      "views": {
+        "value": 5000
+      },
+      "likes": {
+        "value": 402
+      },
+      "topic": {
+        "value": "landing"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "template-course-page",
+    "locale": "en",
+    "kind": "template",
+    "status": "published",
+    "visibility": "public",
+    "slug": "course-page",
+    "title": "Course Page",
+    "metadata": {
+      "views": {
+        "value": 740
+      },
+      "likes": {
+        "value": 35
+      },
+      "topic": {
+        "value": "dashboard"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "template-status-board",
+    "locale": "en",
+    "kind": "template",
+    "status": "published",
+    "visibility": "public",
+    "slug": "status-board",
+    "title": "Status Board",
+    "metadata": {
+      "views": {
+        "value": 1800
+      },
+      "likes": {
+        "value": 120
+      },
+      "topic": {
+        "value": "bots"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "template-recipe-blog",
+    "locale": "en",
+    "kind": "template",
+    "status": "published",
+    "visibility": "public",
+    "slug": "recipe-blog",
+    "title": "Recipe Blog",
+    "metadata": {
+      "views": {
+        "value": 2600
+      },
+      "likes": {
+        "value": 188
+      },
+      "topic": {
+        "value": "data"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/terminal.ts b/packages/shared/app/src/data/terminal.ts
new file mode 100644
index 0000000..47c86e9
--- /dev/null
+++ b/packages/shared/app/src/data/terminal.ts
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/terminal.json
+// Fixture of the Codex collection "terminal" (xgen/fixtures/terminal.json)
+export const terminal = [
+  {
+    "id": "line-l1",
+    "locale": "en",
+    "kind": "line",
+    "status": "published",
+    "visibility": "public",
+    "slug": "l1",
+    "title": "bun add @ui8kit/xgen",
+    "metadata": {
+      "line_kind": {
+        "value": "command"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "line-l2",
+    "locale": "en",
+    "kind": "line",
+    "status": "published",
+    "visibility": "public",
+    "slug": "l2",
+    "title": "xgen build",
+    "metadata": {
+      "line_kind": {
+        "value": "command"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "line-l3",
+    "locale": "en",
+    "kind": "line",
+    "status": "published",
+    "visibility": "public",
+    "slug": "l3",
+    "title": "8 targets, 664 files written",
+    "metadata": {
+      "line_kind": {
+        "value": "output"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "line-l4",
+    "locale": "en",
+    "kind": "line",
+    "status": "published",
+    "visibility": "public",
+    "slug": "l4",
+    "title": "xgen check",
+    "metadata": {
+      "line_kind": {
+        "value": "command"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "line-l5",
+    "locale": "en",
+    "kind": "line",
+    "status": "published",
+    "visibility": "public",
+    "slug": "l5",
+    "title": "all checks passed",
+    "metadata": {
+      "line_kind": {
+        "value": "output"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/testimonials.ts b/packages/shared/app/src/data/testimonials.ts
new file mode 100644
index 0000000..fc4c09e
--- /dev/null
+++ b/packages/shared/app/src/data/testimonials.ts
@@ -0,0 +1,149 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/testimonials.json
+// Fixture of the Codex collection "testimonials" (xgen/fixtures/testimonials.json)
+export const testimonials = [
+  {
+    "id": "testimonial-mara",
+    "locale": "en",
+    "kind": "testimonial",
+    "status": "published",
+    "visibility": "public",
+    "slug": "mara",
+    "title": "Mara Quinn",
+    "metadata": {
+      "quote": {
+        "value": "We moved our marketing site in a week and the pages got faster."
+      },
+      "role": {
+        "value": "Head of Growth"
+      },
+      "company": {
+        "value": "Lumen"
+      },
+      "rating": {
+        "value": 5
+      },
+      "handle": {
+        "value": "@maraquinn"
+      },
+      "time": {
+        "value": "2026-03-30T10:00:00Z"
+      },
+      "mark": {
+        "value": "compass"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "testimonial-jon",
+    "locale": "en",
+    "kind": "testimonial",
+    "status": "published",
+    "visibility": "public",
+    "slug": "jon",
+    "title": "Jon Ellis",
+    "metadata": {
+      "quote": {
+        "value": "Every page reads the same data, so nothing drifts between teams."
+      },
+      "role": {
+        "value": "Engineering Lead"
+      },
+      "company": {
+        "value": "Harbor"
+      },
+      "rating": {
+        "value": 5
+      },
+      "handle": {
+        "value": "@jonellis"
+      },
+      "time": {
+        "value": "2026-03-30T07:00:00Z"
+      },
+      "mark": {
+        "value": "anchor"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "testimonial-aya",
+    "locale": "en",
+    "kind": "testimonial",
+    "status": "published",
+    "visibility": "public",
+    "slug": "aya",
+    "title": "Aya Tanaka",
+    "metadata": {
+      "quote": {
+        "value": "The structure is clear, so new people ship on their first day."
+      },
+      "role": {
+        "value": "Product Designer"
+      },
+      "company": {
+        "value": "Summit"
+      },
+      "rating": {
+        "value": 4
+      },
+      "handle": {
+        "value": "@ayatanaka"
+      },
+      "time": {
+        "value": "2026-03-29T12:00:00Z"
+      },
+      "mark": {
+        "value": "mountain"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "testimonial-luis",
+    "locale": "en",
+    "kind": "testimonial",
+    "status": "published",
+    "visibility": "public",
+    "slug": "luis",
+    "title": "Luis Ortega",
+    "metadata": {
+      "quote": {
+        "value": "Support answers in minutes and the docs are short and exact."
+      },
+      "role": {
+        "value": "Operations"
+      },
+      "company": {
+        "value": "Orbit"
+      },
+      "rating": {
+        "value": 5
+      },
+      "handle": {
+        "value": "@luisortega"
+      },
+      "time": {
+        "value": "2026-03-27T12:00:00Z"
+      },
+      "mark": {
+        "value": "orbit"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/tiers.ts b/packages/shared/app/src/data/tiers.ts
new file mode 100644
index 0000000..da738e2
--- /dev/null
+++ b/packages/shared/app/src/data/tiers.ts
@@ -0,0 +1,145 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/tiers.json
+// Fixture of the Codex collection "tiers" (xgen/fixtures/tiers.json)
+export const tiers = [
+  {
+    "id": "plan-solo",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "solo",
+    "title": "Solo",
+    "metadata": {
+      "tagline": {
+        "value": "One person, one site"
+      },
+      "price": {
+        "value": 0
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 1
+      },
+      "storage": {
+        "value": 2
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "1 site",
+          "Community support",
+          "Basic analytics"
+        ]
+      },
+      "yearly": {
+        "value": 0
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-11T09:00:00Z",
+    "published_at": "2026-03-11T10:00:00Z"
+  },
+  {
+    "id": "tier-team",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "tier-team",
+    "title": "Team",
+    "metadata": {
+      "tagline": {
+        "value": "For a small team"
+      },
+      "price": {
+        "value": 2900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 10
+      },
+      "storage": {
+        "value": 50
+      },
+      "highlighted": {
+        "value": true
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "10 sites",
+          "Priority support",
+          "Advanced analytics",
+          "Custom domains"
+        ]
+      },
+      "yearly": {
+        "value": 29000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-12T09:00:00Z",
+    "published_at": "2026-03-12T10:00:00Z"
+  },
+  {
+    "id": "tier-scale",
+    "locale": "en",
+    "kind": "plan",
+    "status": "published",
+    "visibility": "public",
+    "slug": "tier-scale",
+    "title": "Scale",
+    "metadata": {
+      "tagline": {
+        "value": "For many sites and editors"
+      },
+      "price": {
+        "value": 9900
+      },
+      "currency": {
+        "value": "USD"
+      },
+      "seats": {
+        "value": 50
+      },
+      "storage": {
+        "value": 500
+      },
+      "highlighted": {
+        "value": false
+      },
+      "plan_status": {
+        "value": "active"
+      },
+      "features": {
+        "value": [
+          "Unlimited sites",
+          "Dedicated support",
+          "Audit log",
+          "Single sign-on"
+        ]
+      },
+      "yearly": {
+        "value": 99000
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-13T09:00:00Z",
+    "published_at": "2026-03-13T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/topics.ts b/packages/shared/app/src/data/topics.ts
new file mode 100644
index 0000000..91937e7
--- /dev/null
+++ b/packages/shared/app/src/data/topics.ts
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/topics.json
+// Fixture of the Codex collection "topics" (xgen/fixtures/topics.json)
+export const topics = [
+  {
+    "id": "topic-all",
+    "locale": "en",
+    "kind": "topic",
+    "status": "published",
+    "visibility": "public",
+    "slug": "all",
+    "title": "All",
+    "metadata": {
+      "value": {
+        "value": ""
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "topic-engineering",
+    "locale": "en",
+    "kind": "topic",
+    "status": "published",
+    "visibility": "public",
+    "slug": "engineering",
+    "title": "Engineering",
+    "metadata": {
+      "value": {
+        "value": "Engineering"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "topic-design",
+    "locale": "en",
+    "kind": "topic",
+    "status": "published",
+    "visibility": "public",
+    "slug": "design",
+    "title": "Design",
+    "metadata": {
+      "value": {
+        "value": "Design"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  },
+  {
+    "id": "topic-product",
+    "locale": "en",
+    "kind": "topic",
+    "status": "published",
+    "visibility": "public",
+    "slug": "product",
+    "title": "Product",
+    "metadata": {
+      "value": {
+        "value": "Product"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-07T09:00:00Z",
+    "updated_at": "2026-03-08T09:00:00Z",
+    "published_at": "2026-03-08T10:00:00Z"
+  },
+  {
+    "id": "topic-growth",
+    "locale": "en",
+    "kind": "topic",
+    "status": "published",
+    "visibility": "public",
+    "slug": "growth",
+    "title": "Growth",
+    "metadata": {
+      "value": {
+        "value": "Growth"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-09T09:00:00Z",
+    "updated_at": "2026-03-10T09:00:00Z",
+    "published_at": "2026-03-10T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/users.ts b/packages/shared/app/src/data/users.ts
new file mode 100644
index 0000000..be5cc1b
--- /dev/null
+++ b/packages/shared/app/src/data/users.ts
@@ -0,0 +1,166 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/users.json
+// Fixture of the Codex collection "users" (xgen/fixtures/users.json)
+export const users = [
+  {
+    "id": "user-mara-quinn",
+    "locale": "en",
+    "kind": "user",
+    "status": "published",
+    "visibility": "public",
+    "slug": "mara-quinn",
+    "title": "Mara Quinn",
+    "metadata": {
+      "display_name": {
+        "value": "Mara Quinn"
+      },
+      "roles": {
+        "value": [
+          "author"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "user-aya-tanaka",
+    "locale": "en",
+    "kind": "user",
+    "status": "published",
+    "visibility": "public",
+    "slug": "aya-tanaka",
+    "title": "Aya Tanaka",
+    "metadata": {
+      "display_name": {
+        "value": "Aya Tanaka"
+      },
+      "roles": {
+        "value": [
+          "author"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "user-jon-ellis",
+    "locale": "en",
+    "kind": "user",
+    "status": "published",
+    "visibility": "public",
+    "slug": "jon-ellis",
+    "title": "Jon Ellis",
+    "metadata": {
+      "display_name": {
+        "value": "Jon Ellis"
+      },
+      "roles": {
+        "value": [
+          "author"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "user-luis-ortega",
+    "locale": "en",
+    "kind": "user",
+    "status": "published",
+    "visibility": "public",
+    "slug": "luis-ortega",
+    "title": "Luis Ortega",
+    "metadata": {
+      "display_name": {
+        "value": "Luis Ortega"
+      },
+      "roles": {
+        "value": [
+          "author"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "user-dana-pierce",
+    "locale": "en",
+    "kind": "user",
+    "status": "published",
+    "visibility": "public",
+    "slug": "dana-pierce",
+    "title": "Dana Pierce",
+    "metadata": {
+      "display_name": {
+        "value": "Dana Pierce"
+      },
+      "roles": {
+        "value": [
+          "customer"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "user-ravi-menon",
+    "locale": "en",
+    "kind": "user",
+    "status": "published",
+    "visibility": "public",
+    "slug": "ravi-menon",
+    "title": "Ravi Menon",
+    "metadata": {
+      "display_name": {
+        "value": "Ravi Menon"
+      },
+      "roles": {
+        "value": [
+          "customer"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "user-elena-brandt",
+    "locale": "en",
+    "kind": "user",
+    "status": "published",
+    "visibility": "public",
+    "slug": "elena-brandt",
+    "title": "Elena Brandt",
+    "metadata": {
+      "display_name": {
+        "value": "Elena Brandt"
+      },
+      "roles": {
+        "value": [
+          "customer"
+        ]
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/values.ts b/packages/shared/app/src/data/values.ts
new file mode 100644
index 0000000..b7572bb
--- /dev/null
+++ b/packages/shared/app/src/data/values.ts
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/values.json
+// Fixture of the Codex collection "values" (xgen/fixtures/values.json)
+export const values = [
+  {
+    "id": "value-craft",
+    "locale": "en",
+    "kind": "value",
+    "status": "published",
+    "visibility": "public",
+    "slug": "craft",
+    "title": "Craft over speed",
+    "metadata": {
+      "text": {
+        "value": "We ship when it is right, then we ship often."
+      },
+      "icon": {
+        "value": "wrench"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "value-open",
+    "locale": "en",
+    "kind": "value",
+    "status": "published",
+    "visibility": "public",
+    "slug": "open",
+    "title": "Work in the open",
+    "metadata": {
+      "text": {
+        "value": "Plans, notes and numbers are shared with the whole team."
+      },
+      "icon": {
+        "value": "eye"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "value-care",
+    "locale": "en",
+    "kind": "value",
+    "status": "published",
+    "visibility": "public",
+    "slug": "care",
+    "title": "Care for the reader",
+    "metadata": {
+      "text": {
+        "value": "Every page is written for the person who has to use it."
+      },
+      "icon": {
+        "value": "heart"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/wizard.ts b/packages/shared/app/src/data/wizard.ts
new file mode 100644
index 0000000..1d9c10d
--- /dev/null
+++ b/packages/shared/app/src/data/wizard.ts
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/wizard.json
+// Fixture of the Codex collection "wizard" (xgen/fixtures/wizard.json)
+export const wizard = [
+  {
+    "id": "step-account",
+    "locale": "en",
+    "kind": "step",
+    "status": "published",
+    "visibility": "public",
+    "slug": "account",
+    "title": "Create your account",
+    "metadata": {
+      "text": {
+        "value": "Use your work email."
+      },
+      "icon": {
+        "value": "user"
+      },
+      "fieldA": {
+        "value": "Email"
+      },
+      "fieldB": {
+        "value": "Password"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-01T09:00:00Z",
+    "updated_at": "2026-03-02T09:00:00Z",
+    "published_at": "2026-03-02T10:00:00Z"
+  },
+  {
+    "id": "step-team",
+    "locale": "en",
+    "kind": "step",
+    "status": "published",
+    "visibility": "public",
+    "slug": "team",
+    "title": "Tell us about your team",
+    "metadata": {
+      "text": {
+        "value": "We tailor the workspace to its size."
+      },
+      "icon": {
+        "value": "users"
+      },
+      "fieldA": {
+        "value": "Company name"
+      },
+      "fieldB": {
+        "value": "Team size"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-03T09:00:00Z",
+    "updated_at": "2026-03-04T09:00:00Z",
+    "published_at": "2026-03-04T10:00:00Z"
+  },
+  {
+    "id": "wizard-step-plan",
+    "locale": "en",
+    "kind": "step",
+    "status": "published",
+    "visibility": "public",
+    "slug": "wizard-step-plan",
+    "title": "Choose a plan",
+    "metadata": {
+      "text": {
+        "value": "You can change it at any time."
+      },
+      "icon": {
+        "value": "tag"
+      },
+      "fieldA": {
+        "value": "Plan"
+      },
+      "fieldB": {
+        "value": "Billing email"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-05T09:00:00Z",
+    "updated_at": "2026-03-06T09:00:00Z",
+    "published_at": "2026-03-06T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/data/zones.ts b/packages/shared/app/src/data/zones.ts
new file mode 100644
index 0000000..58ddbf3
--- /dev/null
+++ b/packages/shared/app/src/data/zones.ts
@@ -0,0 +1,113 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/fixtures/zones.json
+// Fixture of the Codex collection "zones" (xgen/fixtures/zones.json)
+export const zones = [
+  {
+    "id": "zone-central",
+    "locale": "en",
+    "kind": "zone",
+    "status": "published",
+    "visibility": "public",
+    "slug": "central",
+    "title": "Central zone",
+    "metadata": {
+      "area": {
+        "value": "Old Town, Riverside, Market Square"
+      },
+      "price": {
+        "value": 1200
+      },
+      "freeFrom": {
+        "value": 7500
+      },
+      "minOrder": {
+        "value": 2000
+      },
+      "time": {
+        "value": "90 minutes"
+      },
+      "express": {
+        "value": "Express in 60 minutes"
+      },
+      "currency": {
+        "value": "USD"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-02T09:00:00Z",
+    "updated_at": "2026-03-03T09:00:00Z",
+    "published_at": "2026-03-03T10:00:00Z"
+  },
+  {
+    "id": "zone-inner",
+    "locale": "en",
+    "kind": "zone",
+    "status": "published",
+    "visibility": "public",
+    "slug": "inner",
+    "title": "Inner suburbs",
+    "metadata": {
+      "area": {
+        "value": "Northfield, Elm Park, Harbour"
+      },
+      "price": {
+        "value": 1500
+      },
+      "freeFrom": {
+        "value": 10000
+      },
+      "minOrder": {
+        "value": 3000
+      },
+      "time": {
+        "value": "2 hours"
+      },
+      "express": {
+        "value": ""
+      },
+      "currency": {
+        "value": "USD"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-04T09:00:00Z",
+    "updated_at": "2026-03-05T09:00:00Z",
+    "published_at": "2026-03-05T10:00:00Z"
+  },
+  {
+    "id": "zone-outer",
+    "locale": "en",
+    "kind": "zone",
+    "status": "published",
+    "visibility": "public",
+    "slug": "outer",
+    "title": "Outer towns",
+    "metadata": {
+      "area": {
+        "value": "Westbrook, Hillside, Lakeview"
+      },
+      "price": {
+        "value": 1900
+      },
+      "freeFrom": {
+        "value": 15000
+      },
+      "minOrder": {
+        "value": 5000
+      },
+      "time": {
+        "value": "Same day"
+      },
+      "express": {
+        "value": ""
+      },
+      "currency": {
+        "value": "USD"
+      }
+    },
+    "version": 1,
+    "created_at": "2026-03-06T09:00:00Z",
+    "updated_at": "2026-03-07T09:00:00Z",
+    "published_at": "2026-03-07T10:00:00Z"
+  }
+] as const;
diff --git a/packages/shared/app/src/nav/ThemeAccountPortalScreen.ts b/packages/shared/app/src/nav/ThemeAccountPortalScreen.ts
new file mode 100644
index 0000000..4359a96
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemeAccountPortalScreen.ts
@@ -0,0 +1,21 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-account-portal.json
+// The menu of screen.theme-account-portal, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.accountPortal.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "start", name: ui.pages.accountPortal.start.nav, icon: "link", href: "#/start", area: "start" },
+  { id: "signup", name: ui.pages.accountPortal.signup.nav, icon: "link", href: "#/signup", area: "signup" },
+  { id: "welcome", name: ui.pages.accountPortal.welcome.nav, icon: "link", href: "#/welcome", area: "welcome" },
+  { id: "reset", name: ui.pages.accountPortal.reset.nav, icon: "link", href: "#/reset", area: "reset" },
+  { id: "magic", name: ui.pages.accountPortal.magic.nav, icon: "link", href: "#/magic", area: "magic" },
+  { id: "minimal", name: ui.pages.accountPortal.minimal.nav, icon: "link", href: "#/minimal", area: "minimal" },
+  { id: "options", name: ui.pages.accountPortal.options.nav, icon: "link", href: "#/options", area: "options" },
+  { id: "join", name: ui.pages.accountPortal.join.nav, icon: "link", href: "#/join", area: "join" },
+  { id: "cards", name: ui.pages.accountPortal.cards.nav, icon: "link", href: "#/cards", area: "cards" },
+  { id: "profile", name: ui.pages.accountPortal.profile.nav, icon: "link", href: "#/profile", area: "profile" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/nav/ThemeCommerceShopScreen.ts b/packages/shared/app/src/nav/ThemeCommerceShopScreen.ts
new file mode 100644
index 0000000..a63817f
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemeCommerceShopScreen.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-commerce-shop.json
+// The menu of screen.theme-commerce-shop, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.commerceShop.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "catalog", name: ui.pages.commerceShop.catalog.nav, icon: "link", href: "#/catalog", area: "catalog" },
+  { id: "browse", name: ui.pages.commerceShop.browse.nav, icon: "link", href: "#/browse", area: "browse" },
+  { id: "offers", name: ui.pages.commerceShop.offers.nav, icon: "link", href: "#/offers", area: "offers" },
+  { id: "product", name: ui.pages.commerceShop.product.nav, icon: "link", href: "#/product", area: "product" },
+  { id: "cart", name: ui.pages.commerceShop.cart.nav, icon: "link", href: "#/cart", area: "cart" },
+  { id: "checkout", name: ui.pages.commerceShop.checkout.nav, icon: "link", href: "#/checkout", area: "checkout" },
+  { id: "delivery", name: ui.pages.commerceShop.delivery.nav, icon: "link", href: "#/delivery", area: "delivery" },
+  { id: "orders", name: ui.pages.commerceShop.orders.nav, icon: "link", href: "#/orders", area: "orders" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/nav/ThemeContentBlogScreen.ts b/packages/shared/app/src/nav/ThemeContentBlogScreen.ts
new file mode 100644
index 0000000..d645a55
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemeContentBlogScreen.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-content-blog.json
+// The menu of screen.theme-content-blog, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.contentBlog.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "articles", name: ui.pages.contentBlog.articles.nav, icon: "link", href: "#/articles", area: "articles" },
+  { id: "archive", name: ui.pages.contentBlog.archive.nav, icon: "link", href: "#/archive", area: "archive" },
+  { id: "post", name: ui.pages.contentBlog.post.nav, icon: "link", href: "#/post", area: "post" },
+  { id: "story", name: ui.pages.contentBlog.story.nav, icon: "link", href: "#/story", area: "story" },
+  { id: "essay", name: ui.pages.contentBlog.essay.nav, icon: "link", href: "#/essay", area: "essay" },
+  { id: "plain", name: ui.pages.contentBlog.plain.nav, icon: "link", href: "#/plain", area: "plain" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/nav/ThemeDashboardConsoleScreen.ts b/packages/shared/app/src/nav/ThemeDashboardConsoleScreen.ts
new file mode 100644
index 0000000..d3d1756
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemeDashboardConsoleScreen.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-dashboard-console.json
+// The menu of screen.theme-dashboard-console, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.dashboardConsole.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "board", name: ui.pages.dashboardConsole.board.nav, icon: "link", href: "#/board", area: "board" },
+  { id: "workspace", name: ui.pages.dashboardConsole.workspace.nav, icon: "link", href: "#/workspace", area: "workspace" },
+  { id: "shells", name: ui.pages.dashboardConsole.shells.nav, icon: "link", href: "#/shells", area: "shells" },
+  { id: "layouts", name: ui.pages.dashboardConsole.layouts.nav, icon: "link", href: "#/layouts", area: "layouts" },
+  { id: "states", name: ui.pages.dashboardConsole.states.nav, icon: "link", href: "#/states", area: "states" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/nav/ThemeMarketingLandingScreen.ts b/packages/shared/app/src/nav/ThemeMarketingLandingScreen.ts
new file mode 100644
index 0000000..6136673
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemeMarketingLandingScreen.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-landing.json
+// The menu of screen.theme-marketing-landing, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.marketingLanding.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "launch", name: ui.pages.marketingLanding.launch.nav, icon: "link", href: "#/launch", area: "launch" },
+  { id: "developers", name: ui.pages.marketingLanding.developers.nav, icon: "link", href: "#/developers", area: "developers" },
+  { id: "studio", name: ui.pages.marketingLanding.studio.nav, icon: "link", href: "#/studio", area: "studio" },
+  { id: "events", name: ui.pages.marketingLanding.events.nav, icon: "link", href: "#/events", area: "events" },
+  { id: "company", name: ui.pages.marketingLanding.company.nav, icon: "link", href: "#/company", area: "company" },
+  { id: "work", name: ui.pages.marketingLanding.work.nav, icon: "link", href: "#/work", area: "work" },
+  { id: "teams", name: ui.pages.marketingLanding.teams.nav, icon: "link", href: "#/teams", area: "teams" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/nav/ThemeMarketingPricingScreen.ts b/packages/shared/app/src/nav/ThemeMarketingPricingScreen.ts
new file mode 100644
index 0000000..5437534
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemeMarketingPricingScreen.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-pricing.json
+// The menu of screen.theme-marketing-pricing, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.marketingPricing.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "plans", name: ui.pages.marketingPricing.plans.nav, icon: "link", href: "#/plans", area: "plans" },
+  { id: "usage", name: ui.pages.marketingPricing.usage.nav, icon: "link", href: "#/usage", area: "usage" },
+  { id: "compare", name: ui.pages.marketingPricing.compare.nav, icon: "link", href: "#/compare", area: "compare" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/nav/ThemeMarketingProductScreen.ts b/packages/shared/app/src/nav/ThemeMarketingProductScreen.ts
new file mode 100644
index 0000000..7effd85
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemeMarketingProductScreen.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-marketing-product.json
+// The menu of screen.theme-marketing-product, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.marketingProduct.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "tour", name: ui.pages.marketingProduct.tour.nav, icon: "link", href: "#/tour", area: "tour" },
+  { id: "capabilities", name: ui.pages.marketingProduct.capabilities.nav, icon: "link", href: "#/capabilities", area: "capabilities" },
+  { id: "navigation", name: ui.pages.marketingProduct.navigation.nav, icon: "link", href: "#/navigation", area: "navigation" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/nav/ThemeOnboardingFlowScreen.ts b/packages/shared/app/src/nav/ThemeOnboardingFlowScreen.ts
new file mode 100644
index 0000000..47dbba7
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemeOnboardingFlowScreen.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-onboarding-flow.json
+// The menu of screen.theme-onboarding-flow, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.onboardingFlow.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "welcome", name: ui.pages.onboardingFlow.welcome.nav, icon: "link", href: "#/welcome", area: "welcome" },
+  { id: "setup", name: ui.pages.onboardingFlow.setup.nav, icon: "link", href: "#/setup", area: "setup" },
+  { id: "tour", name: ui.pages.onboardingFlow.tour.nav, icon: "link", href: "#/tour", area: "tour" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/nav/ThemePromoCampaignScreen.ts b/packages/shared/app/src/nav/ThemePromoCampaignScreen.ts
new file mode 100644
index 0000000..87205e4
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemePromoCampaignScreen.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-promo-campaign.json
+// The menu of screen.theme-promo-campaign, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.promoCampaign.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "launch", name: ui.pages.promoCampaign.launch.nav, icon: "link", href: "#/launch", area: "launch" },
+  { id: "offer", name: ui.pages.promoCampaign.offer.nav, icon: "link", href: "#/offer", area: "offer" },
+  { id: "notices", name: ui.pages.promoCampaign.notices.nav, icon: "link", href: "#/notices", area: "notices" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/nav/ThemeSupportCenterScreen.ts b/packages/shared/app/src/nav/ThemeSupportCenterScreen.ts
new file mode 100644
index 0000000..1756632
--- /dev/null
+++ b/packages/shared/app/src/nav/ThemeSupportCenterScreen.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/screens/theme-support-center.json
+// The menu of screen.theme-support-center, from "menu" of its screen spec
+import { ui } from "../content";
+
+export const NAV = [
+  { id: "home", name: ui.pages.supportCenter.home.nav, icon: "link", href: "#/", area: "home" },
+  { id: "faq", name: ui.pages.supportCenter.faq.nav, icon: "link", href: "#/faq", area: "faq" },
+  { id: "contact", name: ui.pages.supportCenter.contact.nav, icon: "link", href: "#/contact", area: "contact" },
+  { id: "missing", name: ui.pages.supportCenter.missing.nav, icon: "link", href: "#/missing", area: "missing" },
+  { id: "moved", name: ui.pages.supportCenter.moved.nav, icon: "link", href: "#/moved", area: "moved" },
+];
+
+/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */
+export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });
diff --git a/packages/shared/app/src/runtime/codex.ts b/packages/shared/app/src/runtime/codex.ts
new file mode 100644
index 0000000..49a164c
--- /dev/null
+++ b/packages/shared/app/src/runtime/codex.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/src/app-common.ts (codexFile: the lookups of the entries)
+// The lookups of the Codex entries: pass CODEX as the options of fromCodex so that featured_media_id, author_id and terms
+// resolve (media file, author name, term label, the links under a menu item). Add `routes` for the kinds an app has a page for: without one, no link.
+import type { ReadOptions } from "./core";
+import { media } from "../data/media";
+import { users } from "../data/users";
+import { menulinks } from "../data/menulinks";
+import { taxonomies } from "../data/taxonomies";
+
+export const CODEX: ReadOptions = {
+  media: [...media],
+  users: [...users],
+  menus: [...menulinks],
+  terms: (taxonomies as readonly { terms: readonly unknown[] }[]).flatMap((t) => t.terms),
+};
diff --git a/packages/shared/app/src/runtime/core.ts b/packages/shared/app/src/runtime/core.ts
new file mode 100644
index 0000000..2ef1d27
--- /dev/null
+++ b/packages/shared/app/src/runtime/core.ts
@@ -0,0 +1,316 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/app/core.ts
+// The portable runtime of a generated app: pure TypeScript, shared by the Svelte and the React runtime.
+// It holds everything a screen does that is not markup: the Codex mapping, search/sort/page, routes and the URL as a port.
+
+export type SortDir = "asc" | "desc";
+export interface ListConfig { searchFields: readonly string[]; pageSize: number; defaultSort: string }
+export interface ListState { q?: string; sort?: string; page?: string }
+export interface ListView<T> {
+  rows: T[];
+  total: number;
+  page: number;
+  pages: number;
+  sort: { field: string; dir: SortDir };
+  q: string;
+  /** 1-based position of the first and the last row on the page (0 when empty) */
+  from: number;
+  to: number;
+  /** the query string of the current list state ("?sort=price:desc&page=2" or ""), appended to links so a record keeps the list state */
+  qs: string;
+}
+
+/**
+ * The clock of relative dates. Fixtures are static, so the kit renders them against a fixed instant: every screen,
+ * runtime and screenshot shows the same "2 min ago". A live app passes its own `now` to `fromCodex`.
+ */
+export const DEMO_NOW = "2026-03-30T12:00:00Z";
+
+/** the locale of the kit's fixtures and of an entry that names none */
+export const DEFAULT_LOCALE = "en";
+
+const dateFmts = new Map<string, Intl.DateTimeFormat>();
+/** an RFC 3339 date-time -> a short date in the locale, UTC ("Mar 09, 2026" in en); a value that is not a date stays as it is */
+export function fmtDate(iso: unknown, locale: string = DEFAULT_LOCALE): unknown {
+  const t = typeof iso === "string" ? Date.parse(iso) : NaN;
+  if (Number.isNaN(t)) return iso;
+  let f = dateFmts.get(locale);
+  if (!f) { f = new Intl.DateTimeFormat(locale, { month: "short", day: "2-digit", year: "numeric", timeZone: "UTC" }); dateFmts.set(locale, f); }
+  return f.format(t);
+}
+
+export type AgoStyle = "ago" | "ago-days" | "ago-short";
+const isEnglish = (locale: string): boolean => /^en(-|$)/i.test(locale);
+const upperFirst = (s: string, locale: string): string => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
+/** n units before now in the locale: Intl.RelativeTimeFormat (long; numeric auto, so 1 day is "yesterday" in the "ago" style) */
+function relative(n: number, unit: "minute" | "hour" | "day" | "week", locale: string, style: AgoStyle): string {
+  // the kit's compact English units ("2 min ago", "1 h ago", "3 d ago") stay as they were; every other form comes from Intl
+  if (isEnglish(locale) && (unit === "minute" || unit === "hour" || (unit === "day" && style === "ago-short"))) return `${n} ${unit === "minute" ? "min" : unit === "hour" ? "h" : "d"} ago`;
+  const numeric = style === "ago" ? "auto" : "always";
+  return upperFirst(new Intl.RelativeTimeFormat(locale, { numeric, style: style === "ago-short" ? "short" : "long" }).format(-n, unit), locale);
+}
+/**
+ * an RFC 3339 date-time -> time before `now`, in the locale (en shown):
+ *   ago        "2 min ago", "1 h ago", "Yesterday", "3 days ago", "2 weeks ago"   (activity feeds)
+ *   ago-days   "1 day ago", "5 days ago", "1 week ago", "2 weeks ago"            (postings)
+ *   ago-short  "2 min ago", "5 h ago", "3 d ago"                                  (compact cards)
+ */
+export function fmtAgo(iso: unknown, now: string | number = DEMO_NOW, style: AgoStyle = "ago", locale: string = DEFAULT_LOCALE): unknown {
+  const t = typeof iso === "string" ? Date.parse(iso) : NaN;
+  const ref = typeof now === "number" ? now : Date.parse(now);
+  if (Number.isNaN(t) || Number.isNaN(ref)) return iso;
+  const min = Math.max(0, Math.round((ref - t) / 60000));
+  const h = Math.floor(min / 60), d = Math.floor(min / 1440), w = Math.floor(d / 7);
+  if (style === "ago-days") return d < 7 ? relative(Math.max(d, 1), "day", locale, style) : relative(w, "week", locale, style);
+  if (min < 60) return relative(min, "minute", locale, style);
+  if (h < 24) return relative(h, "hour", locale, style);
+  if (style === "ago-short") return relative(d, "day", locale, style);
+  return d < 7 ? relative(d, "day", locale, style) : relative(w, "week", locale, style);
+}
+
+/** the units a figure may carry (`metadata.unit` of the entry), as Intl unit identifiers */
+const FIGURE_UNITS = ["percent", "second", "millisecond", "minute", "hour", "day", "kilobyte", "megabyte", "gigabyte"] as const;
+
+/** a number of an entry in the locale (Intl), with its unit: (12400) -> "12,400", (99.99, percent) -> "99.99%", (0.8, second) -> "0.8s" */
+export function fmtFigure(value: unknown, unit: unknown, locale: string = DEFAULT_LOCALE): string | undefined {
+  if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
+  const known = typeof unit === "string" && (FIGURE_UNITS as readonly string[]).includes(unit);
+  return new Intl.NumberFormat(locale, known ? { style: "unit", unit: unit as string, unitDisplay: "narrow", maximumFractionDigits: 2 } : { maximumFractionDigits: 2 }).format(value);
+}
+
+/** a count in short form, in the locale (1200 -> "1.2K", 96 -> "96"): views, likes, followers */
+export function fmtCompact(value: unknown, locale: string = DEFAULT_LOCALE): string | undefined {
+  if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
+  return new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(value);
+}
+
+/** an amount of money in integer minor units ("4820000", "USD" -> "$48,200"), in the locale; whole amounts show no cents */
+export function fmtCurrency(minor: unknown, currency: string, locale: string = DEFAULT_LOCALE): string | undefined {
+  if (typeof minor !== "number" || !Number.isFinite(minor)) return undefined;
+  const digits = new Intl.NumberFormat(locale, { style: "currency", currency }).resolvedOptions().maximumFractionDigits ?? 2;
+  const value = minor / 10 ** digits;
+  return new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: Number.isInteger(value) ? 0 : digits }).format(value);
+}
+
+export interface ReadOptions {
+  now?: string | number;
+  /** the locale of the app; without it a date is formatted in the `locale` of its entry (then DEFAULT_LOCALE) */
+  locale?: string;
+  /** the entries of kind `media`: `featured_media_id|media` resolves to the `file` of the published one with that id; without it: undefined (the placeholder) */
+  media?: readonly unknown[];
+  /** the entries of kind `user`: `author_id|author` resolves to the `display_name` of the one with that id; without it: undefined */
+  users?: readonly unknown[];
+  /** the Codex terms (of every taxonomy): `terms|term:<taxonomy>` resolves to the `name` of the entry's first term of that taxonomy; without it: undefined */
+  terms?: readonly unknown[];
+  /** the entries of kind `menu_item` that sit under another (parent_id): `id|menu` lists the children of an item as NavLink
+   *  records { id, name, icon, href } in their `order`; without it: [] */
+  menus?: readonly unknown[];
+  /** the address of an entry by its kind, with `{slug}`: `{ product: "#/product/{slug}" }`; `slug|route` builds it; without a route: undefined (no link) */
+  routes?: Readonly<Record<string, string>>;
+}
+
+const field = (o: unknown, k: string): unknown => (o !== null && typeof o === "object" ? (o as Record<string, unknown>)[k] : undefined);
+
+/** a record is keyed by (id, locale): of the records with one id, the one in the locale, else the first */
+const byLocale = (records: readonly unknown[], locale: string): unknown => records.find((r) => field(r, "locale") === locale) ?? records[0];
+
+/**
+ * a value by a dotted path, with an optional formatter after a pipe:
+ *   "metadata.date.value|date"  -> fmtDate      "metadata.time.value|ago" (or ago-days, ago-short) -> fmtAgo   (in the locale)
+ *   "featured_media_id|media"   -> the file of that media entry      "slug|route" -> the address from the route of the entry's kind
+ *   "author_id|author"          -> the display name of that user     "terms|term:category" -> the name of the entry's term of that taxonomy
+ *   "terms|term-slug:faq_category" -> the slug of that term (a filter key)
+ *   "metadata.value.value|number" -> the number in the locale, with the entry's `metadata.unit` (percent, second): 12400 -> "12,400"
+ *   "metadata.views.value|compact" -> the count in short form: 1200 -> "1.2K"
+ *   "id|menu"                   -> the menu items under this one (parent_id), as { id, name, icon, href } (href only with a route)
+ */
+export function readPath(source: unknown, path: string, opts: ReadOptions = {}): unknown {
+  const [dotted, pipe] = path.split("|") as [string, string | undefined];
+  let cur: unknown = source;
+  for (const part of dotted.split(".")) {
+    if (cur === null || typeof cur !== "object") return undefined;
+    cur = (cur as Record<string, unknown>)[part];
+  }
+  if (pipe === undefined || cur === undefined) return cur;
+  const own = field(source, "locale");
+  const locale = opts.locale ?? (typeof own === "string" ? own : DEFAULT_LOCALE);
+  if (pipe === "date") return fmtDate(cur, locale);
+  if (pipe === "ago" || pipe === "ago-days" || pipe === "ago-short") return fmtAgo(cur, opts.now ?? DEMO_NOW, pipe, locale);
+  // a media entry with no uploaded asset is a draft: no file, the block shows its placeholder
+  if (pipe === "media") return field(field(field((opts.media ?? []).find((m) => field(m, "id") === cur && field(m, "status") === "published"), "metadata"), "file"), "value");
+  if (pipe === "author") {
+    const user = byLocale((opts.users ?? []).filter((u) => field(u, "id") === cur), locale);
+    return field(field(field(user, "metadata"), "display_name"), "value") ?? field(user, "title");
+  }
+  if (pipe === "number") {
+    const currency = field(field(field(source, "metadata"), "currency"), "value");
+    return typeof currency === "string" ? fmtCurrency(cur, currency, locale) : fmtFigure(cur, field(field(field(source, "metadata"), "unit"), "value"), locale);
+  }
+  if (pipe === "compact") return fmtCompact(cur, locale);
+  if (pipe.startsWith("term:") || pipe.startsWith("term-slug:")) {
+    const taxonomy = pipe.slice(pipe.indexOf(":") + 1);
+    const ref = Array.isArray(cur) ? cur.find((r) => field(r, "taxonomy") === taxonomy) : undefined;
+    if (ref === undefined) return undefined;
+    const term = byLocale((opts.terms ?? []).filter((t) => field(t, "taxonomy_id") === taxonomy && field(t, "id") === field(ref, "term_id")), locale);
+    return field(term, pipe.startsWith("term-slug:") ? "slug" : "name");
+  }
+  if (pipe === "menu") {
+    const kids = (opts.menus ?? []).filter((m) => field(m, "parent_id") === cur);
+    const order = (m: unknown): number => { const o = field(m, "order"); return typeof o === "number" ? o : 0; };
+    return [...kids].sort((a, b) => order(a) - order(b)).map((m) => ({
+      id: field(m, "id"), name: field(m, "title"), icon: field(field(field(m, "metadata"), "icon"), "value"), href: readPath(m, "slug|route", opts),
+    }));
+  }
+  if (pipe === "route") {
+    const kind = field(source, "kind"), route = typeof kind === "string" ? opts.routes?.[kind] : undefined;
+    return route === undefined ? undefined : route.replace("{slug}", encodeURIComponent(String(cur)));
+  }
+  throw new Error(`readPath: unknown formatter "${pipe}" in "${path}"`);
+}
+
+/** the trail of pages from the root to `leaf` by their parent_id chain (breadcrumbs); without `leaf`, the one no other names as parent */
+export function trail<T>(entries: readonly T[], leaf?: string): T[] {
+  const byId = new Map(entries.map((e) => [field(e, "id"), e] as const));
+  const parents = new Set(entries.map((e) => field(e, "parent_id")));
+  let cur: T | undefined = leaf !== undefined ? byId.get(leaf) : entries.find((e) => !parents.has(field(e, "id")));
+  const out: T[] = [];
+  while (cur !== undefined && !out.includes(cur)) { out.unshift(cur); cur = byId.get(field(cur, "parent_id")); }
+  return out;
+}
+
+/** Codex entries -> flat records by the `fields` mapping of the screen ("title", "metadata.price.value", "metadata.date.value|date") */
+export function fromCodex<T>(entries: readonly unknown[], fields: Record<string, string>, opts: ReadOptions = {}): T[] {
+  return entries.map((e) => Object.fromEntries(Object.entries(fields).map(([name, path]) => [name, readPath(e, path, opts)])) as T);
+}
+
+export function parseSort(sort: string | undefined, fallback: string): { field: string; dir: SortDir } {
+  const [field, dir] = (sort || fallback).split(":");
+  return { field: field || fallback.split(":")[0]!, dir: dir === "desc" ? "desc" : "asc" };
+}
+
+const compare = (a: unknown, b: unknown): number => {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
+  return String(a ?? "").localeCompare(String(b ?? ""), "en", { numeric: true, sensitivity: "base" });
+};
+
+export function listQuery(state: { q: string; sort: string; page: number }, cfg: ListConfig): string {
+  const p = new URLSearchParams();
+  if (state.q) p.set("q", state.q);
+  if (state.sort && state.sort !== cfg.defaultSort) p.set("sort", state.sort);
+  if (state.page > 1) p.set("page", String(state.page));
+  const s = p.toString().replace(/%3A/gi, ":");
+  return s ? `?${s}` : "";
+}
+
+export function collectionView<T extends object>(all: readonly T[], cfg: ListConfig, state: ListState): ListView<T> {
+  const q = (state.q ?? "").trim();
+  const sort = parseSort(state.sort, cfg.defaultSort);
+  const needle = q.toLowerCase();
+  const found = needle ? all.filter((r) => cfg.searchFields.some((f) => String((r as Record<string, unknown>)[f] ?? "").toLowerCase().includes(needle))) : [...all];
+  const sign = sort.dir === "desc" ? -1 : 1;
+  found.sort((a, b) => sign * compare((a as Record<string, unknown>)[sort.field], (b as Record<string, unknown>)[sort.field]));
+  const total = found.length;
+  const pages = Math.max(1, Math.ceil(total / cfg.pageSize));
+  const page = Math.min(Math.max(1, Math.floor(Number(state.page)) || 1), pages);
+  const start = (page - 1) * cfg.pageSize;
+  const rows = found.slice(start, start + cfg.pageSize);
+  return {
+    rows, total, page, pages, sort, q,
+    from: total ? start + 1 : 0,
+    to: start + rows.length,
+    qs: listQuery({ q, sort: `${sort.field}:${sort.dir}`, page }, cfg),
+  };
+}
+
+// ---- routes -----------------------------------------------------------------------------------------------
+
+export interface RouteDef { path: string; area: string }
+export interface RouteMatch { area: string; params: Record<string, string> }
+
+export function matchRoute(routes: readonly RouteDef[], path: string): RouteMatch | null {
+  const parts = path.split("/").filter(Boolean);
+  for (const r of routes) {
+    const pat = r.path.split("/").filter(Boolean);
+    if (pat.length !== parts.length) continue;
+    const params: Record<string, string> = {};
+    if (pat.every((seg, i) => (seg.startsWith(":") ? ((params[seg.slice(1)] = decodeURIComponent(parts[i]!)), true) : seg === parts[i]))) return { area: r.area, params };
+  }
+  return null;
+}
+
+/** does a route of this list own the path (decides which screen of an app shows) */
+export const ownsPath = (routes: readonly RouteDef[], path: string): boolean => matchRoute(routes, path) !== null;
+
+// ---- the URL as a port --------------------------------------------------------------------------------------
+// A screen never touches window.location. It gets a UrlPort: Svelte wraps the store in runes, React in useSyncExternalStore.
+
+export interface UrlState { path: string; query: Record<string, string> }
+export interface UrlPort extends UrlState { go(path: string, query?: Record<string, string | undefined>): void }
+
+/** `#/pricing` and the empty hash are routes; `#main-content` is an in-page anchor (the skip link) and leaves the route alone */
+export const isRouteHash = (hash: string): boolean => hash === "" || hash === "#" || hash.startsWith("#/");
+
+export function parseHash(hash: string): UrlState {
+  const raw = hash.replace(/^#\/?/, "");
+  const [path = "", search = ""] = raw.split("?");
+  const query: Record<string, string> = {};
+  for (const [k, v] of new URLSearchParams(search)) query[k] = v;
+  return { path: path.replace(/\/+$/, ""), query };
+}
+
+export function buildHash(path: string, query: Record<string, string | undefined> = {}): string {
+  const p = new URLSearchParams();
+  for (const [k, v] of Object.entries(query)) if (v !== undefined && v !== "") p.set(k, v);
+  const s = p.toString().replace(/%3A/gi, ":");
+  return `#/${path}${s ? `?${s}` : ""}`;
+}
+
+export interface HashStore { getSnapshot(): UrlState; subscribe(fn: () => void): () => void; go: UrlPort["go"] }
+
+/** the URL state in location.hash; the snapshot object changes only when the hash changes (useSyncExternalStore needs that) */
+export function createHashStore(win: Window = window): HashStore {
+  let hash = win.location.hash;
+  let snap = parseHash(isRouteHash(hash) ? hash : "");
+  const subs = new Set<() => void>();
+  const read = (): void => {
+    if (win.location.hash === hash) return;
+    hash = win.location.hash;
+    if (!isRouteHash(hash)) return;
+    snap = parseHash(hash);
+    subs.forEach((f) => f());
+  };
+  win.addEventListener("hashchange", read);
+  return {
+    getSnapshot: () => snap,
+    subscribe(fn) { subs.add(fn); return () => subs.delete(fn); },
+    go(path, query) { win.location.hash = buildHash(path, query); read(); },
+  };
+}
+
+// ---- screen actions ---------------------------------------------------------------------------------------
+
+export interface ScreenActions {
+  sort(field: string): void;
+  search(q: string): void;
+  page(n: number): void;
+  open(id: string): void;
+  back(): void;
+  toggleTheme(): void;
+}
+
+/** the actions of a collection screen; every one of them only changes the URL */
+export function screenActions(url: UrlPort, view: ListView<object>, listPath: string, recordPath: (id: string) => string, toggleTheme: () => void): ScreenActions {
+  const q = (extra: Record<string, string | undefined>): Record<string, string | undefined> => ({ ...url.query, ...extra });
+  return {
+    sort(field) {
+      const dir: SortDir = view.sort.field === field && view.sort.dir === "asc" ? "desc" : "asc";
+      url.go(listPath, q({ sort: `${field}:${dir}`, page: undefined }));
+    },
+    search(text) { url.go(listPath, q({ q: text || undefined, page: undefined })); },
+    page(n) { url.go(listPath, q({ page: n > 1 ? String(n) : undefined })); },
+    open(id) { url.go(recordPath(id), url.query); },
+    back() { url.go(listPath, url.query); },
+    toggleTheme,
+  };
+}
diff --git a/packages/shared/app/src/runtime/fields.ts b/packages/shared/app/src/runtime/fields.ts
new file mode 100644
index 0000000..e5e1514
--- /dev/null
+++ b/packages/shared/app/src/runtime/fields.ts
@@ -0,0 +1,195 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/app/fields.ts
+// The central Codex field maps: one map per entry kind, from a v0.4 entry to the record a kit block reads
+// (`fromCodex(entries, CODEX_FIELDS.product)`). Every runtime and every hand-written app reads the same map, so a
+// block's data contract lives in one place (xgen/schema/codex/blocks.json lists which block reads which map).
+// Paths: top-level entry fields ("title", "excerpt") or "metadata.<field>.value" of a field declared for the kind in
+// xgen/schema/codex/manifest.json; a pipe names a formatter of readPath: "|date" and "|ago" format in the locale, "|route" builds
+// the address from the slug (no href in data), "|media" takes the file of the `media` entry of featured_media_id,
+// "|author" the display name of the `user` entry of author_id, "|term:<taxonomy>" the name of the entry's term of that taxonomy
+// ("|term-slug:<taxonomy>" its slug), "|number" the number in the locale with the entry's `metadata.unit`.
+
+/** kind `product` -> Product (ProductGrid, ProductDetail, ProductCard) */
+export const productFields = {
+  id: "id",
+  name: "title",
+  summary: "metadata.summary.value",
+  price: "metadata.price.value",
+  currency: "metadata.currency.value",
+  rating: "metadata.rating.value",
+  reviews: "metadata.reviews.value",
+  badge: "metadata.badge.value",
+  category: "terms|term:product_category",
+  inStock: "metadata.inStock.value",
+  compareAt: "metadata.compare_at.value",
+  href: "slug|route",
+  image: "featured_media_id|media",
+} as const;
+
+/** kind `post` -> Post (PostHeader, PostGrid, PostCard) */
+export const postFields = {
+  id: "id",
+  title: "title",
+  excerpt: "excerpt",
+  category: "terms|term:category",
+  author: "author_id|author",
+  date: "metadata.date.value|date",
+  minutes: "metadata.minutes.value",
+  icon: "metadata.icon.value",
+  href: "slug|route",
+  image: "featured_media_id|media",
+} as const;
+
+/** kind `plan` -> Plan (PricingTiers, PricingCard) */
+export const planFields = {
+  id: "id",
+  name: "title",
+  tagline: "metadata.tagline.value",
+  price: "metadata.price.value",
+  currency: "metadata.currency.value",
+  seats: "metadata.seats.value",
+  storage: "metadata.storage.value",
+  highlighted: "metadata.highlighted.value",
+  features: "metadata.features.value",
+  yearly: "metadata.yearly.value",
+} as const;
+
+/** kind `review` -> Review (ProductReviews, Reviews) */
+export const reviewFields = {
+  id: "id",
+  title: "title",
+  author: "author_id|author",
+  rating: "metadata.rating.value",
+  text: "metadata.text.value",
+  date: "metadata.date.value|date",
+} as const;
+
+/** kind `stat` -> Stat (StatsBand, PageTrail facts, StatTile): `value` is a number with an optional `unit`, formatted in the locale */
+export const statFields = {
+  id: "id",
+  label: "title",
+  value: "metadata.value.value|number",
+  icon: "metadata.icon.value",
+  hint: "metadata.hint.value",
+} as const;
+
+/** kind `faq` -> Faq (FaqList): `category` is the slug of the entry's term of the taxonomy faq_category (the key the tabs filter by) */
+export const faqFields = {
+  id: "id",
+  question: "title",
+  answer: "metadata.answer.value",
+  category: "terms|term-slug:faq_category",
+} as const;
+
+/** kind `tab` -> FaqTab (FaqList category tabs): `value` is the slug of a faq_category term ("" = all) */
+export const faqTabFields = {
+  id: "id",
+  title: "title",
+  value: "metadata.value.value",
+} as const;
+
+/** kind `page` -> NavLink of a breadcrumb trail (PageTrail): the pages of a parent_id chain; `href` only where the app routes pages */
+export const pageFields = {
+  id: "id",
+  name: "title",
+  icon: "metadata.icon.value",
+  href: "slug|route",
+} as const;
+
+/** kind `menu_item` -> NavLink (NavBar, SidebarNav, BottomNav, ShellSidebar, the sub nav, outlines and help links): a menu entry
+ *  (Codex v0.4 Menu item: label = title, the address from the slug); `href` only where the app routes menu items, else no link */
+export const menuItemFields = {
+  id: "id",
+  name: "title",
+  icon: "metadata.icon.value",
+  href: "slug|route",
+} as const;
+
+/** kind `menu_item` with children -> MegaGroup (SitemapFooter, FooterColumns, FooterCard, MegaMenu, FooterSplit): a group of a
+ *  menu and the items under it (parent_id), resolved through the lookup CODEX.menus */
+export const menuGroupFields = {
+  id: "id",
+  title: "title",
+  icon: "metadata.icon.value",
+  links: "id|menu",
+  href: "slug|route",
+} as const;
+
+/** kind `menu_item` (location categories) -> Category (CategoryNav): a menu entry with the number of products under it */
+export const menuCategoryFields = {
+  id: "id",
+  name: "title",
+  icon: "metadata.icon.value",
+  count: "metadata.count.value",
+  href: "slug|route",
+} as const;
+
+
+// The other kinds of the kit fixtures, one map per kind (or per record where one kind feeds two records). `m.x` below reads
+// "metadata.x.value". Plain text fields; numbers stay numbers; money is integer minor units + `currency`.
+const m = (k: string) => `metadata.${k}.value` as const;
+/** id + title + text + icon: features, values, perks, delivery facts, payments, support channels, contacts (Feature) */
+const card = { id: "id", title: "title", text: m("text"), icon: m("icon") } as const;
+export const KIT_FIELDS = {
+  feature: card, value: card, perk: card, fact: card, payment: card, channel: card, contact: card, step: card,
+  logo: { id: "id", name: "title", icon: m("icon") },
+  testimonial: { id: "id", author: "title", role: m("role"), company: m("company"), quote: m("quote"), rating: m("rating"), handle: m("handle"), time: `${m("time")}|ago-short`, mark: m("mark") },
+  cartline: { id: "id", name: "title", variant: m("variant"), price: m("price"), currency: m("currency"), qty: m("qty") },
+  summaryrow: { id: "id", label: "title", amount: m("amount"), currency: m("currency"), strong: m("strong") },
+  order: { id: "id", number: "title", date: `${m("date")}|date`, total: m("total"), currency: m("currency"), status: m("order_status"), items: m("items") },
+  event: { id: "id", title: "title", text: m("text"), time: `${m("time")}|ago`, tone: m("tone") },
+  point: { id: "id", label: "title", value: m("value") },
+  metric: { id: "id", label: "title", value: `${m("value")}|number`, icon: m("icon"), hint: m("hint") },
+  task: { id: "id", title: "title", text: m("text"), done: m("done") },
+  prompt: { id: "id", name: "title", icon: m("icon") },
+  promptFilter: { id: "id", title: "title", value: m("value"), icon: m("icon") },
+  template: { id: "id", title: "title", views: `${m("views")}|compact`, likes: `${m("likes")}|compact`, topic: m("topic") },
+  tab: { id: "id", name: "title", icon: m("icon") },
+  posttag: { id: "id", name: "title", icon: m("icon") },
+  row: { id: "id", label: "title", a: m("a"), b: m("b"), c: m("c") },
+  pack: { id: "id", name: "title", credits: m("credits"), price: m("price"), currency: m("currency"), badge: m("badge") },
+  tile: { id: "id", title: "title", text: m("text"), icon: m("icon"), size: m("size") },
+  line: { id: "id", text: "title", kind: m("line_kind") },
+  wizardStep: { id: "id", title: "title", text: m("text"), icon: m("icon"), fieldA: m("fieldA"), fieldB: m("fieldB") },
+  lane: { id: "id", key: "slug", title: "title" },
+  card: { id: "id", lane: m("lane"), title: "title", tag: m("tag"), who: m("who") },
+  topic: { id: "id", title: "title", value: m("value") },
+  section: { id: "id", title: "title", text: m("text"), quote: m("quote") },
+  contrast: { id: "id", title: "title", before: m("before"), after: m("after") },
+  placeholder: { id: "id" },
+  chapter: { id: "id", title: "title", text: m("text") },
+  zone: { id: "id", name: "title", area: m("area"), price: m("price"), freeFrom: m("freeFrom"), minOrder: m("minOrder"), time: m("time"), express: m("express"), currency: m("currency") },
+  day: { id: "id", title: "title", note: m("note"), slots: m("slots"), closed: m("closed") },
+  store: { id: "id", name: "title", kind: m("store_kind"), address: m("address"), hours: m("hours"), phone: m("phone"), note: m("note"), services: m("services") },
+  detail: { id: "id", title: "title", text: m("text") },
+  spec: { id: "id", label: "title", value: m("value") },
+  profilefact: { id: "id", label: "title", value: m("value") },
+  promo: { id: "id", code: "title" },
+  member: { id: "id", name: "title", role: m("role"), dept: m("dept"), location: m("location"), bio: m("bio"), skills: m("skills") },
+  photo: { id: "id", title: "title", tag: m("tag"), size: m("size") },
+  project: { id: "id", title: "title", category: "terms|term:project_category", year: m("year"), summary: m("summary"), tags: m("tags"), featured: m("featured"), client: m("client") },
+  job: { id: "id", title: "title", dept: m("dept"), location: m("location"), type: m("type"), salary: m("salary"), posted: `${m("posted")}|ago-days` },
+  department: { id: "id", name: "title" },
+  milestone: { id: "id", date: m("date"), title: "title", text: m("text"), tag: m("tag") },
+  skill: { id: "id", label: "title", level: m("level") },
+  question: { id: "id", question: "title", answer: m("answer"), category: "terms|term:faq_category", icon: m("icon") },
+  // the copy decks of the taste screens (xgen/fixtures/deck*.json -> packages/taste-data/content/copy.json): kind `deck` and
+  // its parts, which name their deck (`deck`) and their place in it (`position`); figures and prices are poster copy, text
+  deck: { brand: "title", nav: m("nav"), eyebrow: m("eyebrow"), title: m("headline"), accent: m("accent"), lead: m("lead"), cta: m("cta"),
+    secondary: m("secondary"), input: m("input"), note: m("note"), tags: m("tags") },
+  deckStat: { value: m("value"), label: "title" },
+  deckItem: { title: "title", text: m("text") },
+  deckPlan: { name: "title", price: m("cost"), note: m("note"), perks: m("perks") },
+  deckQuote: { text: m("quote"), name: "title", role: m("role") },
+  deckFaq: { title: "title", text: m("answer") },
+  // kind `plan` as a row of the plans screen (screen.plans: list and record, with the plan status)
+  planRow: { id: "id", name: "title", tagline: m("tagline"), price: m("price"), currency: m("currency"), seats: m("seats"), storage: m("storage"),
+    highlighted: m("highlighted"), features: m("features"), yearly: m("yearly"), status: m("plan_status") },
+} as const;
+
+/** the field maps by entry kind */
+export const CODEX_FIELDS = {
+  product: productFields, post: postFields, plan: planFields, review: reviewFields, stat: statFields, faq: faqFields, faqtab: faqTabFields, page: pageFields,
+  menuItem: menuItemFields, menuGroup: menuGroupFields, menuCategory: menuCategoryFields, ...KIT_FIELDS,
+} as const;
+export type CodexFieldKind = keyof typeof CODEX_FIELDS;
diff --git a/packages/shared/app/src/runtime/inspect.ts b/packages/shared/app/src/runtime/inspect.ts
new file mode 100644
index 0000000..c3a45fe
--- /dev/null
+++ b/packages/shared/app/src/runtime/inspect.ts
@@ -0,0 +1,154 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/app/inspect.ts
+// Preview tooling, not kit output: the "Ins" button of the preview (VITE_INSPECT=1 builds only).
+// Ins -> pick mode (crosshair, hover outline; click or tap captures, Esc cancels) -> POST /__inspect with two PNGs
+// (the element with 16px around it, the viewport with a red frame) and where the element sits. Nothing is fixed here.
+import { domToCanvas } from "modern-screenshot";
+
+const PAD = 16;
+const MARK = "data-inspect-ui";
+let picking = false;
+let hovered: Element | null = null;
+
+function toast(text: string): void {
+  const t = Object.assign(document.createElement("div"), { textContent: text });
+  t.setAttribute(MARK, "");
+  Object.assign(t.style, { position: "fixed", left: "50%", bottom: "24px", transform: "translateX(-50%)", zIndex: "2147483647", padding: "8px 16px",
+    borderRadius: "8px", background: "#111", color: "#fff", font: "500 14px system-ui, sans-serif", pointerEvents: "none" });
+  document.body.append(t);
+  setTimeout(() => t.remove(), 2000);
+}
+
+function outline(el: Element | null): void {
+  if (hovered) (hovered as HTMLElement).style.removeProperty("outline");
+  hovered = el;
+  if (el) { (el as HTMLElement).style.setProperty("outline", "2px solid #ef4444"); (el as HTMLElement).style.setProperty("outline-offset", "-2px"); }
+}
+
+function selectorOf(el: Element): string {
+  const parts: string[] = [];
+  for (let e: Element | null = el; e && e !== document.documentElement; e = e.parentElement) {
+    let s = e.tagName.toLowerCase();
+    const id = e.getAttribute("id"), tid = e.getAttribute("data-testid");
+    if (id) { parts.unshift(`${s}#${id}`); break; }
+    if (tid) s += `[data-testid="${tid}"]`;
+    else if (e.parentElement) {
+      const same = [...e.parentElement.children].filter((c) => c.tagName === e!.tagName);
+      if (same.length > 1) s += `:nth-of-type(${same.indexOf(e) + 1})`;
+    }
+    parts.unshift(s);
+  }
+  return parts.join(" > ");
+}
+
+const brief = (e: Element) => ({ tag: e.tagName.toLowerCase(), classes: e.getAttribute("class") ?? "", testid: e.getAttribute("data-testid") ?? undefined, slot: e.getAttribute("data-slot") ?? undefined });
+
+function metaOf(el: Element) {
+  const r = el.getBoundingClientRect();
+  const parent = el.parentElement;
+  const pr = parent?.getBoundingClientRect();
+  const cs = getComputedStyle(el);
+  const block = el.closest("[data-block]");
+  const section = el.closest('[data-testid="section"], section[aria-labelledby]');
+  const ancestors: ReturnType<typeof brief>[] = [];
+  for (let e = el.parentElement; e && ancestors.length < 3; e = e.parentElement) ancestors.push(brief(e));
+  const root = document.documentElement;
+  return {
+    time: new Date().toISOString(),
+    url: location.href,
+    screen: location.pathname.split("/").filter(Boolean)[0] ?? "",
+    route: location.hash.replace(/^#/, "") || "/",
+    block: block?.getAttribute("data-block") ?? (location.pathname.includes("/blocks") ? location.hash.replace(/^#\//, "").split(/[/?]/)[0] : undefined),
+    category: location.pathname.includes("/catalog") ? location.hash.replace(/^#\//, "").split(/[/?]/)[0] || undefined : undefined,
+    variant: block?.getAttribute("data-variant") ?? undefined,
+    section: section?.getAttribute("aria-labelledby") ?? section?.getAttribute("id") ?? undefined,
+    selector: selectorOf(el),
+    element: { ...brief(el), text: (el.textContent ?? "").trim().slice(0, 80) },
+    ancestors,
+    rect: { x: Math.round(r.left + scrollX), y: Math.round(r.top + scrollY), width: Math.round(r.width), height: Math.round(r.height), viewportX: Math.round(r.left), viewportY: Math.round(r.top) },
+    box: {
+      width: cs.width, marginLeft: cs.marginLeft, marginRight: cs.marginRight,
+      parentWidth: pr ? Math.round(pr.width) : undefined,
+      leftInParent: pr ? Math.round(r.left - pr.left) : undefined,
+      rightInParent: pr ? Math.round(pr.right - r.right) : undefined,
+      overflowsParent: pr ? r.left < pr.left - 0.5 || r.right > pr.right + 0.5 : undefined,
+    },
+    viewport: { width: innerWidth, height: innerHeight, dpr: devicePixelRatio, scrollX: Math.round(scrollX), scrollY: Math.round(scrollY) },
+    skin: root.dataset.skin ?? "default",
+    theme: root.classList.contains("dark") || root.dataset.theme === "dark" ? "dark" : "light",
+    userAgent: navigator.userAgent,
+  };
+}
+
+async function capture(el: Element): Promise<void> {
+  outline(null);
+  const r = el.getBoundingClientRect();
+  const scale = Math.min(devicePixelRatio || 1, 2);
+  const t0 = performance.now();
+  const page = await domToCanvas(document.documentElement, { scale, timeout: 2000, filter: (n) => !(n instanceof Element && n.hasAttribute(MARK)) });
+  console.debug(`inspect: page drawn in ${Math.round(performance.now() - t0)} ms`);
+  // the page canvas covers the whole document: cut the viewport out of it
+  const vw = innerWidth, vh = innerHeight;
+  const view = document.createElement("canvas");
+  view.width = Math.round(vw * scale); view.height = Math.round(vh * scale);
+  const v = view.getContext("2d")!;
+  v.drawImage(page, scrollX * scale, scrollY * scale, vw * scale, vh * scale, 0, 0, vw * scale, vh * scale);
+  const x0 = Math.max(0, r.left - PAD), y0 = Math.max(0, r.top - PAD), x1 = Math.min(vw, r.right + PAD), y1 = Math.min(vh, r.bottom + PAD);
+  const crop = document.createElement("canvas");
+  crop.width = Math.max(1, Math.round((x1 - x0) * scale)); crop.height = Math.max(1, Math.round((y1 - y0) * scale));
+  crop.getContext("2d")!.drawImage(view, x0 * scale, y0 * scale, crop.width, crop.height, 0, 0, crop.width, crop.height);
+  v.strokeStyle = "#ef4444"; v.lineWidth = 3 * scale;
+  v.strokeRect(r.left * scale, r.top * scale, r.width * scale, r.height * scale);
+  const body = JSON.stringify({ meta: metaOf(el), element: crop.toDataURL("image/png"), viewport: view.toDataURL("image/png") });
+  const res = await fetch("/__inspect", { method: "POST", headers: { "content-type": "application/json" }, credentials: "same-origin", body });
+  const out = (await res.json().catch(() => ({}))) as { n?: number; error?: string };
+  toast(res.ok && out.n ? `Saved #${out.n}` : `Not saved: ${out.error ?? res.status}`);
+}
+
+function stop(): void {
+  picking = false;
+  outline(null);
+  document.documentElement.style.removeProperty("cursor");
+  document.removeEventListener("pointermove", onMove, true);
+  document.removeEventListener("click", onClick, true);
+  document.removeEventListener("keydown", onKey, true);
+}
+
+const target = (e: Event) => { const t = e.target as Element | null; return t && !t.closest(`[${MARK}]`) ? t : null; };
+function onMove(e: PointerEvent): void { const t = document.elementFromPoint(e.clientX, e.clientY); outline(t && !t.closest(`[${MARK}]`) ? t : null); }
+function onKey(e: KeyboardEvent): void { if (e.key === "Escape") { e.preventDefault(); stop(); toast("Cancelled"); } }
+function onClick(e: MouseEvent): void {
+  // an icon reports its owner (the button, the link), not a path inside the svg
+  const hit = target(e);
+  const t = hit?.closest("svg")?.parentElement ?? hit;
+  if (!t) return;
+  e.preventDefault(); e.stopPropagation();
+  stop();
+  capture(t).catch((err) => toast(`Not saved: ${String(err).slice(0, 60)}`));
+}
+
+function start(): void {
+  if (picking) { stop(); return; }
+  picking = true;
+  document.documentElement.style.setProperty("cursor", "crosshair");
+  document.addEventListener("pointermove", onMove, true);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("keydown", onKey, true);
+}
+
+/** keep an Ins button right after every theme toggle, styled like it but ghost */
+export function mountInspect(): void {
+  const place = () => {
+    for (const tg of document.querySelectorAll<HTMLElement>('[data-testid="theme-toggle"]')) {
+      if (tg.nextElementSibling?.hasAttribute(MARK)) continue;
+      const b = document.createElement("button");
+      b.type = "button"; b.textContent = "Ins"; b.className = tg.className; b.title = "Inspect: pick an element to report";
+      b.setAttribute(MARK, ""); b.setAttribute("aria-label", "Inspect an element");
+      Object.assign(b.style, { background: "transparent", boxShadow: "none", marginInlineStart: "4px" });
+      b.addEventListener("click", (e) => { e.stopPropagation(); start(); });
+      tg.after(b);
+    }
+  };
+  place();
+  new MutationObserver(place).observe(document.body, { childList: true, subtree: true });
+}
diff --git a/packages/shared/app/src/runtime/skin-fonts.ts b/packages/shared/app/src/runtime/skin-fonts.ts
new file mode 100644
index 0000000..363d195
--- /dev/null
+++ b/packages/shared/app/src/runtime/skin-fonts.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// The Google fonts a skin needs (family:axes for the css2 API), loaded only while that skin is on; the default skin uses the system font.
+// From xgen/runtimes/core/assets/styles/skins/skins.json.
+export const SKIN_FONTS: Record<string, readonly string[]> = {
+  "sky": ["Istok+Web:ital,wght@0,400;0,700;1,400;1,700"],
+  "modern-minimal": ["Inter:wght@400;500;600;700"],
+  "violet-bloom": ["Plus+Jakarta+Sans:wght@400;500;600;700"],
+  "bubblegum": ["Poppins:wght@400;500;600;700"],
+  "doom-64": ["Oxanium:wght@400;500;600;700"],
+  "amber-minimal": ["Inter:wght@400;500;600;700"],
+  "supabase": ["Outfit:wght@400;500;600;700"],
+  "kodama-grove": ["Merriweather:wght@400;500;600;700"],
+  "perpetuity": ["Source+Code+Pro:wght@400;500;600;700"],
+  "cosmic-night": ["Inter:wght@400;500;600;700"],
+  "mocha-mousse": ["DM+Sans:wght@400;500;600;700"],
+  "neo-brutalism": ["DM+Sans:wght@400;500;600;700"],
+  "notebook": ["Architects+Daughter:wght@400"],
+};
diff --git a/packages/shared/app/src/runtime/skins.ts b/packages/shared/app/src/runtime/skins.ts
new file mode 100644
index 0000000..442374a
--- /dev/null
+++ b/packages/shared/app/src/runtime/skins.ts
@@ -0,0 +1,155 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/app/skins.ts
+// Preview tooling, not kit output: the look picked on the Skins screen (/skins/), kept for every screen and every reload.
+// Three choices, each in localStorage:
+//   xgen-skin    the skin: data-skin on <html> (the skin CSS switches on it)
+//   xgen-font    a Google font over the skin's own: --font-sans on <html>
+//   xgen-radius  a corner radius over the skin's own: --radius on <html>
+// Order: the `?skin=` query parameter beats the stored skin, which beats the build skin (VITE_SKIN, else the screen's own).
+// The font and the radius sit on top of whatever skin is on: they are inline on <html>, so they beat every skin rule.
+// Nothing stored means nothing changes.
+// The tiles of /skins/ are static markup; this file wires them by their data attributes:
+//   data-skin-pick="<skin>"                          a skin tile
+//   data-font-pick="<id>" data-font-family="<name>"  a font tile (shown in its font; clicking the chosen one again drops it)
+//   data-radius-pick="<id>" data-radius="<length>"   a radius tile (its [data-radius-sample] box shows the radius)
+//   data-look-reset="skin|font|radius"               back to the build skin, the skin's font, the skin's radius
+// The tile of the current choice gets aria-pressed="true".
+import { SKIN_FONTS } from "./skin-fonts";
+
+const KEYS = { skin: "xgen-skin", font: "xgen-font", radius: "xgen-radius" } as const;
+type Choice = keyof typeof KEYS;
+
+function read(choice: Choice): string | null {
+  try { return localStorage.getItem(KEYS[choice]); } catch { return null; }
+}
+
+function write(choice: Choice, value: string | null): void {
+  try {
+    if (value === null) localStorage.removeItem(KEYS[choice]);
+    else localStorage.setItem(KEYS[choice], value);
+  } catch { /* storage is blocked: the choice lasts until the next reload */ }
+}
+
+const html = (): HTMLElement => document.documentElement;
+
+// ---- fonts ----
+
+const linked = new Set<string>();
+
+/** add a Google Fonts stylesheet once. `spec` is "Inter:wght@400;500;600;700". The css2 API splits every face by script
+ *  (latin, cyrillic, ...) with unicode-range, so the browser downloads the cyrillic part as soon as the page shows Cyrillic. */
+function loadFont(spec: string): void {
+  const href = `https://fonts.googleapis.com/css2?family=${spec}&display=swap`;
+  if (linked.has(href)) return;
+  linked.add(href);
+  document.head.append(Object.assign(document.createElement("link"), { rel: "stylesheet", href, crossOrigin: "anonymous" }));
+}
+
+/** every font of the Fonts row has the 400 to 700 faces */
+const fontSpec = (family: string): string => `${family.replace(/ /g, "+")}:wght@400;500;600;700`;
+const fontStack = (family: string): string => `"${family}", ui-sans-serif, system-ui, sans-serif`;
+
+// ---- applying a choice ----
+
+/** the skin picked on /skins/, or null */
+export const storedSkin = (): string | null => read("skin");
+
+/** put a skin on the page and load the fonts it needs */
+export function applySkin(skin: string): void {
+  html().dataset.skin = skin;
+  for (const spec of SKIN_FONTS[skin] ?? []) loadFont(spec);
+}
+
+/** put the stored font and radius on top of the skin, or take them off */
+export function applyOverrides(): void {
+  const style = html().style;
+  const family = read("font");
+  if (family) {
+    loadFont(fontSpec(family));
+    style.setProperty("--font-sans", fontStack(family));
+    // a skin may map medium and semibold onto other faces (sky, notebook); the chosen font has them all
+    style.setProperty("--font-weight-medium", "500");
+    style.setProperty("--font-weight-semibold", "600");
+  } else {
+    style.removeProperty("--font-sans");
+    style.removeProperty("--font-weight-medium");
+    style.removeProperty("--font-weight-semibold");
+  }
+  const radius = read("radius");
+  if (radius) style.setProperty("--radius", radius);
+  else style.removeProperty("--radius");
+}
+
+/** a picked skin replaces a `?skin=` of the address, or the next reload would bring that one back */
+function dropSkinQuery(): void {
+  const url = new URL(location.href);
+  if (!url.searchParams.has("skin")) return;
+  url.searchParams.delete("skin");
+  history.replaceState(history.state, "", url);
+}
+
+// ---- the tiles ----
+
+function press(el: HTMLElement, on: boolean): void {
+  if (el.getAttribute("aria-pressed") !== String(on)) el.setAttribute("aria-pressed", String(on));
+}
+
+/** mark the current choices, show every font tile in its font and every radius sample with its radius */
+function paint(): void {
+  const skin = html().dataset.skin ?? "";
+  const font = read("font") ?? "";
+  const radius = read("radius") ?? "";
+  for (const tile of document.querySelectorAll<HTMLElement>("[data-skin-pick]")) {
+    press(tile, tile.dataset.skinPick === skin);
+    for (const spec of SKIN_FONTS[tile.dataset.skinPick ?? ""] ?? []) loadFont(spec);
+  }
+  for (const tile of document.querySelectorAll<HTMLElement>("[data-font-pick]")) {
+    const family = tile.dataset.fontFamily ?? "";
+    press(tile, family === font);
+    if (family && !tile.style.fontFamily) {
+      loadFont(fontSpec(family));
+      tile.style.fontFamily = fontStack(family);
+    }
+  }
+  for (const tile of document.querySelectorAll<HTMLElement>("[data-radius-pick]")) {
+    press(tile, tile.dataset.radius === radius);
+    tile.querySelector<HTMLElement>("[data-radius-sample]")?.style.setProperty("--radius", tile.dataset.radius ?? "");
+  }
+}
+
+/** after the first paint of the app: wire the tiles (one click listener for the page) and keep them marked as the app renders */
+export function mountLook(buildSkin: string): void {
+  document.addEventListener("click", (event) => {
+    const el = (event.target as Element | null)?.closest<HTMLElement>("[data-skin-pick], [data-font-pick], [data-radius-pick], [data-look-reset]");
+    if (!el) return;
+    const d = el.dataset;
+    if (d.skinPick) {
+      write("skin", d.skinPick);
+      dropSkinQuery();
+      applySkin(d.skinPick);
+    } else if (d.fontPick) {
+      const family = d.fontFamily ?? "";
+      write("font", read("font") === family ? null : family);
+      applyOverrides();
+    } else if (d.radiusPick) {
+      const radius = d.radius ?? "";
+      write("radius", read("radius") === radius ? null : radius);
+      applyOverrides();
+    } else if (d.lookReset === "skin") {
+      write("skin", null);
+      dropSkinQuery();
+      applySkin(buildSkin);
+    } else if (d.lookReset === "font" || d.lookReset === "radius") {
+      write(d.lookReset, null);
+      applyOverrides();
+    }
+    paint();
+  });
+  paint();
+  let queued = false;
+  new MutationObserver(() => {
+    if (queued) return;
+    queued = true;
+    requestAnimationFrame(() => { queued = false; paint(); });
+  }).observe(document.body, { childList: true, subtree: true });
+}
diff --git a/packages/shared/app/src/runtime/theme.ts b/packages/shared/app/src/runtime/theme.ts
new file mode 100644
index 0000000..987e23f
--- /dev/null
+++ b/packages/shared/app/src/runtime/theme.ts
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/app/theme.ts
+// Light/dark mode of an app: the choice lives in <html data-theme> (the theme tokens switch on it) and in localStorage.
+export type ThemeMode = "light" | "dark" | "system";
+const KEY = "xgen-theme";
+
+const systemDark = (): boolean => typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
+
+export function resolveTheme(mode: ThemeMode): "light" | "dark" {
+  return mode === "system" ? (systemDark() ? "dark" : "light") : mode;
+}
+
+export function applyTheme(mode: ThemeMode): void {
+  const r = resolveTheme(mode);
+  const root = document.documentElement;
+  root.dataset.theme = r;
+  root.classList.toggle("dark", r === "dark");
+  root.style.colorScheme = r;
+}
+
+/** the mode of the visit: the saved choice, else the app default */
+export function initTheme(fallback: ThemeMode): void {
+  let mode: ThemeMode = fallback;
+  try {
+    const saved = localStorage.getItem(KEY);
+    if (saved === "light" || saved === "dark") mode = saved;
+  } catch { /* storage is blocked: keep the default */ }
+  applyTheme(mode);
+}
+
+export function toggleTheme(): void {
+  const next = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
+  try { localStorage.setItem(KEY, next); } catch { /* ignore */ }
+  applyTheme(next);
+}
diff --git a/packages/shared/app/src/runtime/visited.ts b/packages/shared/app/src/runtime/visited.ts
new file mode 100644
index 0000000..7d113e8
--- /dev/null
+++ b/packages/shared/app/src/runtime/visited.ts
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/app/visited.ts
+// Preview tooling, not kit output: the block gallery and the catalog remember the pages you opened (VITE_INSPECT=1 builds only).
+// Opening /blocks/#/<block> (or /catalog/#/<category>) stores the id in localStorage, one list per screen; the index outlines
+// those cards, adds a check, and shows "Viewed N of M" with a Reset button.
+const SCREENS = ["blocks", "catalog"];
+const screen = (): string => location.pathname.split("/").filter(Boolean)[0] ?? "";
+const KEY_OF = (s: string): string => `xgen-preview:visited-${s}`;
+const MARK = "data-visited-ui";
+const CHECK = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+
+const read = (): Set<string> => { try { return new Set(JSON.parse(localStorage.getItem(KEY_OF(screen())) ?? "[]") as string[]); } catch { return new Set(); } };
+const write = (s: Set<string>) => localStorage.setItem(KEY_OF(screen()), JSON.stringify([...s].sort()));
+/** the id a card stands for: the block of a gallery card, the route of a catalog card */
+const idOf = (a: HTMLElement): string => a.dataset.block ?? a.dataset.visit ?? "";
+
+function remember(): void {
+  const id = location.hash.replace(/^#\/?/, "").split(/[/?]/)[0];
+  if (!id) return;
+  const s = read();
+  if (!s.has(id)) { s.add(id); write(s); }
+}
+
+function paint(): void {
+  const links = [...document.querySelectorAll<HTMLElement>('[data-testid="block-link"][data-block], [data-visit]')];
+  if (!links.length) return;
+  const seen = read();
+  for (const a of links) {
+    const card = (a.closest("li") ?? a) as HTMLElement;
+    const on = seen.has(idOf(a));
+    // a 2px inset ring in the primary colour at half strength: drawn over the card's own 1px ring, no layout shift
+    card.style.boxShadow = on ? "inset 0 0 0 2px color-mix(in oklab, var(--primary) 50%, transparent)" : "";
+    const icon = a.querySelector(`[${MARK}]`);
+    if (on && !icon) { const i = document.createElement("span"); i.setAttribute(MARK, ""); i.setAttribute("title", "Viewed"); i.style.color = "var(--primary)"; i.style.display = "inline-flex"; i.innerHTML = CHECK; a.append(i); }
+    if (!on && icon) icon.remove();
+  }
+  const head = document.querySelector('[data-testid="gallery-title"], [data-testid="catalog-title"]')?.parentElement;
+  if (!head) return;
+  let bar = head.querySelector<HTMLElement>(`[${MARK}="bar"]`);
+  if (!bar) {
+    bar = document.createElement("div");
+    bar.setAttribute(MARK, "bar");
+    Object.assign(bar.style, { display: "flex", alignItems: "center", gap: "8px" });
+    const count = document.createElement("span");
+    count.className = "text-sm text-muted-foreground";
+    count.setAttribute("data-testid", "visited-count");
+    const reset = document.createElement("button");
+    reset.type = "button"; reset.textContent = "Reset";
+    reset.className = document.querySelector('[data-testid="theme-toggle"]')?.className ?? "";
+    Object.assign(reset.style, { background: "transparent", boxShadow: "none" });
+    reset.addEventListener("click", () => { localStorage.removeItem(KEY_OF(screen())); paint(); });
+    bar.append(count, reset);
+    head.append(bar);
+  }
+  const n = links.filter((a) => seen.has(idOf(a))).length;
+  const label = `Viewed ${n} of ${links.length}`;
+  const count = bar.querySelector("span")!;
+  if (count.textContent !== label) count.textContent = label;
+}
+
+export function mountVisited(): void {
+  if (!SCREENS.includes(screen())) return;
+  const tick = () => { remember(); paint(); };
+  tick();
+  addEventListener("hashchange", tick);
+  let queued = false;
+  new MutationObserver(() => { if (queued) return; queued = true; requestAnimationFrame(() => { queued = false; paint(); }); }).observe(document.body, { childList: true, subtree: true });
+}
diff --git a/packages/shared/app/src/screens.ts b/packages/shared/app/src/screens.ts
new file mode 100644
index 0000000..b365572
--- /dev/null
+++ b/packages/shared/app/src/screens.ts
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/src/app-common.ts (registryFile lists every hosted screen)
+// The screens the host apps serve: /<key>/#/<route> (or ?screen=<key>). One entry per screen spec of xgen/specs/screens.
+import { initTheme, type ThemeMode } from "./runtime/theme";
+import { applyOverrides, applySkin, mountLook, storedSkin } from "./runtime/skins";
+
+export interface ScreenEntry { key: string; id: string; name: string; skin: "default" }
+
+export const SCREENS: readonly ScreenEntry[] = [
+  { key: "blocks", id: "screen.blocks", name: "BlocksScreen", skin: "default" },
+  { key: "catalog", id: "screen.catalog", name: "CatalogScreen", skin: "default" },
+  { key: "plans", id: "screen.plans", name: "PlansScreen", skin: "default" },
+  { key: "site", id: "screen.site", name: "SiteScreen", skin: "default" },
+  { key: "skins", id: "screen.skins", name: "SkinsScreen", skin: "default" },
+  { key: "theme-account-portal", id: "screen.theme-account-portal", name: "ThemeAccountPortalScreen", skin: "default" },
+  { key: "theme-commerce-shop", id: "screen.theme-commerce-shop", name: "ThemeCommerceShopScreen", skin: "default" },
+  { key: "theme-content-blog", id: "screen.theme-content-blog", name: "ThemeContentBlogScreen", skin: "default" },
+  { key: "theme-dashboard-console", id: "screen.theme-dashboard-console", name: "ThemeDashboardConsoleScreen", skin: "default" },
+  { key: "theme-marketing-landing", id: "screen.theme-marketing-landing", name: "ThemeMarketingLandingScreen", skin: "default" },
+  { key: "theme-marketing-pricing", id: "screen.theme-marketing-pricing", name: "ThemeMarketingPricingScreen", skin: "default" },
+  { key: "theme-marketing-product", id: "screen.theme-marketing-product", name: "ThemeMarketingProductScreen", skin: "default" },
+  { key: "theme-onboarding-flow", id: "screen.theme-onboarding-flow", name: "ThemeOnboardingFlowScreen", skin: "default" },
+  { key: "theme-promo-campaign", id: "screen.theme-promo-campaign", name: "ThemePromoCampaignScreen", skin: "default" },
+  { key: "theme-support-center", id: "screen.theme-support-center", name: "ThemeSupportCenterScreen", skin: "default" },
+];
+
+/** the screen a visit asks for: the first segment of the path, else the `screen` query parameter; "" (the index) when there is no such screen */
+export function screenKeyOf(loc: { pathname: string; search: string }): string {
+  const key = loc.pathname.split("/").filter(Boolean)[0] || new URLSearchParams(loc.search).get("screen") || "";
+  return SCREENS.some((s) => s.key === key) ? key : "";
+}
+
+/** the skin of a build: the VITE_SKIN build variable, else the screen's own */
+const buildSkin = (own: string): string => (import.meta as { env?: Record<string, string | undefined> }).env?.VITE_SKIN || own;
+
+/** the skin of a visit: the `skin` query parameter, else the one picked on /skins/ (stored), else the build skin */
+export function skinOf(search: string, own: string): string {
+  return new URLSearchParams(search).get("skin") || storedSkin() || buildSkin(own);
+}
+
+/** before the first paint: the skin of the screen (and its fonts), the font and radius picked on /skins/, the title of the tab and the theme of the host */
+export function bootScreen(key: string, theme: ThemeMode, title: string): void {
+  const s = SCREENS.find((x) => x.key === key);
+  const own = s?.skin ?? "default";
+  applySkin(skinOf(location.search, own));
+  applyOverrides();
+  document.title = s ? `${s.key} · ${title}` : title;
+  initTheme(theme);
+  // the tiles of /skins/ (static markup) are wired by their data attributes
+  mountLook(buildSkin(own));
+  // preview tooling only: the Ins button (VITE_INSPECT=1 builds); other builds drop this branch and its chunk
+  // @ts-ignore import.meta.env is Vite's
+  if (import.meta.env.VITE_INSPECT === "1") void import("./runtime/inspect").then((m) => m.mountInspect());
+  // @ts-ignore import.meta.env is Vite's
+  if (import.meta.env.VITE_INSPECT === "1") void import("./runtime/visited").then((m) => m.mountVisited());
+}
diff --git a/packages/shared/app/src/styles/skins.css b/packages/shared/app/src/styles/skins.css
new file mode 100644
index 0000000..87db76a
--- /dev/null
+++ b/packages/shared/app/src/styles/skins.css
@@ -0,0 +1,24 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/core/assets/styles/skins.css */
+/* Skins of the screens: data-skin on <html>. The default is the shadcn neutral theme (theme.css); a skin overrides the shadcn
+   tokens under [data-skin="<name>"] (and its dark twin under .dark / data-theme="dark"). The same rule works on any element,
+   so a tile of the Skins screen (/skins/) previews a skin inside a page that wears another one (base.css resets such a tile first).
+   The skin of a visit: the `?skin=` query parameter, else the one picked on /skins/ (localStorage), else the VITE_SKIN build
+   variable, else the screen's own ("default"); see runtime/skins.ts. One file per skin in skins/ (sources and licences: skins/NOTICE.md). */
+@import "./skins/base.css";
+@import "./skins/default.css";
+@import "./skins/sky.css";
+@import "./skins/modern-minimal.css";
+@import "./skins/violet-bloom.css";
+@import "./skins/t3-chat.css";
+@import "./skins/bubblegum.css";
+@import "./skins/doom-64.css";
+@import "./skins/amber-minimal.css";
+@import "./skins/supabase.css";
+@import "./skins/kodama-grove.css";
+@import "./skins/perpetuity.css";
+@import "./skins/cosmic-night.css";
+@import "./skins/claude.css";
+@import "./skins/mocha-mousse.css";
+@import "./skins/neo-brutalism.css";
+@import "./skins/notebook.css";
diff --git a/packages/shared/app/src/styles/skins/NOTICE.md b/packages/shared/app/src/styles/skins/NOTICE.md
new file mode 100644
index 0000000..ab2aa2f
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/NOTICE.md
@@ -0,0 +1,12 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+# Skins: sources and licences
+
+- `sky.css`, `base.css`, `default.css`: ui8kit (this repository).
+- Every other `.css` file here is a built-in theme preset of **tweakcn** by Sahaj Jain and contributors
+  (<https://github.com/jnsahaj/tweakcn>, `utils/theme-presets.ts` at commit `a3b47b37cba97dd637de517aab52c45ec0f83456`),
+  used under the **Apache License, Version 2.0** (<https://www.apache.org/licenses/LICENSE-2.0>). tweakcn ships no NOTICE file.
+- Changes made to the tweakcn presets: merged with tweakcn's defaults and converted to CSS by
+  `xgen/runtimes/core/tools/tweakcn-skins.ts` (the colours, radius, fonts, shadows and letter spacing are tweakcn's values);
+  the selectors are ours (`data-skin` on `<html>` or on an element); a preset's `spacing` is not taken (the kit keeps 0.25rem);
+  fonts without medium or semibold faces have those weights mapped onto the faces that exist.
+- `skins.json` lists every skin, where it comes from and the Google Fonts it loads when it is on.
diff --git a/packages/shared/app/src/styles/skins/amber-minimal.css b/packages/shared/app/src/styles/skins/amber-minimal.css
new file mode 100644
index 0000000..4072a75
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/amber-minimal.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "amber-minimal" (Amber Minimal): the tweakcn preset "amber-minimal" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="amber-minimal" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Inter (Google Fonts, loaded when the skin is on). */
+[data-skin="amber-minimal"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 15%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 15%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 15%);
+  --primary: hsl(37.7 92.1% 50.2%);
+  --primary-foreground: hsl(0 0% 0%);
+  --secondary: hsl(220 14% 96%);
+  --secondary-foreground: hsl(215 14% 34%);
+  --muted: hsl(210 20% 98%);
+  --muted-foreground: hsl(220 9% 46%);
+  --accent: hsl(48 100% 96%);
+  --accent-foreground: hsl(22.7 82.5% 31.4%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(220 13% 91%);
+  --input: hsl(220 13% 91%);
+  --ring: hsl(37.7 92.1% 50.2%);
+  --chart-1: hsl(37.7 92.1% 50.2%);
+  --chart-2: hsl(32.1 94.6% 43.7%);
+  --chart-3: hsl(26 90% 37%);
+  --chart-4: hsl(22.7 82.5% 31.4%);
+  --chart-5: hsl(21.7 77.8% 26.5%);
+  --sidebar: hsl(210 20% 98%);
+  --sidebar-foreground: hsl(0 0% 15%);
+  --sidebar-primary: hsl(37.7 92.1% 50.2%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(48 100% 96%);
+  --sidebar-accent-foreground: hsl(22.7 82.5% 31.4%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(37.7 92.1% 50.2%);
+  --font-sans: Inter, sans-serif;
+  --font-serif: Source Serif 4, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.375rem;
+  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="amber-minimal"],
+[data-skin="amber-minimal"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 9%);
+  --foreground: hsl(0 0% 90%);
+  --card: hsl(0 0% 15%);
+  --card-foreground: hsl(0 0% 90%);
+  --popover: hsl(0 0% 15%);
+  --popover-foreground: hsl(0 0% 90%);
+  --primary: hsl(37.7 92.1% 50.2%);
+  --primary-foreground: hsl(0 0% 0%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 90%);
+  --muted: hsl(0 0% 12%);
+  --muted-foreground: hsl(0 0% 64%);
+  --accent: hsl(22.7 82.5% 31.4%);
+  --accent-foreground: hsl(48 96.6% 76.7%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 0% 25%);
+  --input: hsl(0 0% 25%);
+  --ring: hsl(37.7 92.1% 50.2%);
+  --chart-1: hsl(43.3 96.4% 56.3%);
+  --chart-2: hsl(32.1 94.6% 43.7%);
+  --chart-3: hsl(22.7 82.5% 31.4%);
+  --chart-4: hsl(26 90% 37%);
+  --chart-5: hsl(22.7 82.5% 31.4%);
+  --sidebar: hsl(0 0% 6%);
+  --sidebar-foreground: hsl(0 0% 90%);
+  --sidebar-primary: hsl(37.7 92.1% 50.2%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(22.7 82.5% 31.4%);
+  --sidebar-accent-foreground: hsl(48 96.6% 76.7%);
+  --sidebar-border: hsl(0 0% 25%);
+  --sidebar-ring: hsl(37.7 92.1% 50.2%);
+  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+}
+
+[data-skin="amber-minimal"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="amber-minimal"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="amber-minimal"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="amber-minimal"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="amber-minimal"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="amber-minimal"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/base.css b/packages/shared/app/src/styles/skins/base.css
new file mode 100644
index 0000000..0a1d495
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/base.css
@@ -0,0 +1,23 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* What a skin scoped on an element inside the page starts from (a tile of /skins/ carries data-skin="<name>"): the kit's
+   default font, weights, tracking, radius and shadows, so a tile shows its own skin and nothing of the skin of the page.
+   :where() keeps this rule at zero specificity, so the skin's own rule always wins. <html> itself is never matched here. */
+:where([data-skin]:not(:root)) {
+  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --tracking-normal: 0em;
+  --radius: 0.625rem;
+  --shadow-2xs: 0 1px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.1), 0 8px 10px -6px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
+  font-family: var(--font-sans);
+  letter-spacing: var(--tracking-normal);
+  background-color: var(--background);
+  color: var(--foreground);
+}
diff --git a/packages/shared/app/src/styles/skins/bubblegum.css b/packages/shared/app/src/styles/skins/bubblegum.css
new file mode 100644
index 0000000..3693b1d
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/bubblegum.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "bubblegum" (Bubblegum): the tweakcn preset "bubblegum" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="bubblegum" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Poppins (Google Fonts, loaded when the skin is on). */
+[data-skin="bubblegum"] {
+  --background: hsl(330 47.1% 93.3%);
+  --foreground: hsl(0 0% 36%);
+  --card: hsl(42 93% 89%);
+  --card-foreground: hsl(0 0% 36%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 36%);
+  --primary: hsl(325.3 52% 51.8%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(182 44% 68%);
+  --secondary-foreground: hsl(0 0% 20%);
+  --muted: hsl(191 59% 81%);
+  --muted-foreground: hsl(0 0% 36.5%);
+  --accent: hsl(42 91% 82%);
+  --accent-foreground: hsl(0 0% 20%);
+  --destructive: hsl(357.8 56.8% 53.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(325.6 57.8% 56.3%);
+  --input: hsl(0 0% 89%);
+  --ring: hsl(330 70% 67%);
+  --chart-1: hsl(330 70% 67%);
+  --chart-2: hsl(190 62% 70%);
+  --chart-3: hsl(42 91% 82%);
+  --chart-4: hsl(330 78% 79%);
+  --chart-5: hsl(330.6 64.1% 56.3%);
+  --sidebar: hsl(326 70% 91%);
+  --sidebar-foreground: hsl(0 0% 20%);
+  --sidebar-primary: hsl(330.4 81.2% 60.4%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(327.4 87.1% 81.8%);
+  --sidebar-accent-foreground: hsl(0 0% 20%);
+  --sidebar-border: hsl(268.7 100% 95.5%);
+  --sidebar-ring: hsl(330.4 81.2% 60.4%);
+  --font-sans: Poppins, sans-serif;
+  --font-serif: Lora, serif;
+  --font-mono: Fira Code, monospace;
+  --radius: 0.4rem;
+  --shadow-2xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
+  --shadow-xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
+  --shadow-sm: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow-md: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 2px 4px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow-lg: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 4px 6px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow-xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 8px 10px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow-2xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 2.50);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="bubblegum"],
+[data-skin="bubblegum"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(201.4 43.8% 12.5%);
+  --foreground: hsl(334 40% 92%);
+  --card: hsl(201.4 33.3% 16.5%);
+  --card-foreground: hsl(334 40% 92%);
+  --popover: hsl(201.4 33.3% 16.5%);
+  --popover-foreground: hsl(334 40% 92%);
+  --primary: hsl(42 91% 82%);
+  --primary-foreground: hsl(201.4 43.8% 12.5%);
+  --secondary: hsl(346.4 55% 76.5%);
+  --secondary-foreground: hsl(201.4 43.8% 12.5%);
+  --muted: hsl(214.3 8.9% 15.5%);
+  --muted-foreground: hsl(346.4 55% 76.5%);
+  --accent: hsl(337.2 30.7% 45.3%);
+  --accent-foreground: hsl(334 40% 92%);
+  --destructive: hsl(328.4 70.4% 62.9%);
+  --destructive-foreground: hsl(201.4 43.8% 12.5%);
+  --border: hsl(206 28% 27%);
+  --input: hsl(201 31% 18%);
+  --ring: hsl(184 41% 51%);
+  --chart-1: hsl(184 41% 51%);
+  --chart-2: hsl(346.4 55% 76.5%);
+  --chart-3: hsl(338 40% 63%);
+  --chart-4: hsl(191.3 64.9% 25.7%);
+  --chart-5: hsl(214.3 8.9% 15.5%);
+  --sidebar: hsl(203 43% 11%);
+  --sidebar-foreground: hsl(220 14% 96%);
+  --sidebar-primary: hsl(330.4 81.2% 60.4%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(327.4 87.1% 81.8%);
+  --sidebar-accent-foreground: hsl(215 28% 17%);
+  --sidebar-border: hsl(217 19% 27%);
+  --sidebar-ring: hsl(330.4 81.2% 60.4%);
+  --shadow-2xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
+  --shadow-xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
+  --shadow-sm: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow-md: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 2px 4px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow-lg: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 4px 6px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow-xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 8px 10px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow-2xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 2.50);
+}
+
+[data-skin="bubblegum"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="bubblegum"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="bubblegum"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="bubblegum"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="bubblegum"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="bubblegum"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/claude.css b/packages/shared/app/src/styles/skins/claude.css
new file mode 100644
index 0000000..3dbab32
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/claude.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "claude" (Claude): the tweakcn preset "claude" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="claude" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: system. */
+[data-skin="claude"] {
+  --background: hsl(48 33% 97%);
+  --foreground: hsl(48 20% 20%);
+  --card: hsl(48 33% 97%);
+  --card-foreground: hsl(60 3% 8%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(51 19% 13%);
+  --primary: hsl(15.3 55.2% 47.3%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(46 23% 89%);
+  --secondary-foreground: hsl(51 8% 30%);
+  --muted: hsl(44 29% 90%);
+  --muted-foreground: hsl(50 3% 40%);
+  --accent: hsl(46 23% 89%);
+  --accent-foreground: hsl(51 19% 13%);
+  --destructive: hsl(60 3% 8%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(50 7% 84%);
+  --input: hsl(51 8% 68%);
+  --ring: hsl(15.1 55.6% 52.4%);
+  --chart-1: hsl(18 57% 44%);
+  --chart-2: hsl(251.5 84.6% 74.5%);
+  --chart-3: hsl(46 28% 82%);
+  --chart-4: hsl(256.6 49.2% 88.4%);
+  --chart-5: hsl(18 60% 44%);
+  --sidebar: hsl(51 26% 95%);
+  --sidebar-foreground: hsl(60 3% 23%);
+  --sidebar-primary: hsl(15.1 55.6% 52.4%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(46 23% 89%);
+  --sidebar-accent-foreground: hsl(0 0% 20%);
+  --sidebar-border: hsl(0 0% 92%);
+  --sidebar-ring: hsl(0 0% 71%);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="claude"],
+[data-skin="claude"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(60 2.7% 14.5%);
+  --foreground: hsl(46 10% 74%);
+  --card: hsl(60 2.7% 14.5%);
+  --card-foreground: hsl(48 33% 97%);
+  --popover: hsl(60 2.1% 18.4%);
+  --popover-foreground: hsl(60 5% 89%);
+  --primary: hsl(14.8 52.1% 47.5%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(48 33% 97%);
+  --secondary-foreground: hsl(60 2.1% 18.4%);
+  --muted: hsl(60 4% 10%);
+  --muted-foreground: hsl(51 9% 69%);
+  --accent: hsl(48 11% 9%);
+  --accent-foreground: hsl(51 26% 95%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(60 5% 23%);
+  --input: hsl(52 5% 31%);
+  --ring: hsl(14.8 63.1% 59.6%);
+  --chart-1: hsl(18 57% 44%);
+  --chart-2: hsl(251.5 84.6% 74.5%);
+  --chart-3: hsl(48 11% 9%);
+  --chart-4: hsl(248 25% 23%);
+  --chart-5: hsl(18 60% 44%);
+  --sidebar: hsl(30 3% 12%);
+  --sidebar-foreground: hsl(46 10% 74%);
+  --sidebar-primary: hsl(0 0% 20%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(60 3% 6%);
+  --sidebar-accent-foreground: hsl(46 10% 74%);
+  --sidebar-border: hsl(0 0% 92%);
+  --sidebar-ring: hsl(0 0% 71%);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+[data-skin="claude"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="claude"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="claude"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="claude"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="claude"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="claude"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/cosmic-night.css b/packages/shared/app/src/styles/skins/cosmic-night.css
new file mode 100644
index 0000000..d6ef47f
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/cosmic-night.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "cosmic-night" (Cosmic Night): the tweakcn preset "cosmic-night" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="cosmic-night" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Inter (Google Fonts, loaded when the skin is on). */
+[data-skin="cosmic-night"] {
+  --background: hsl(240 100% 98%);
+  --foreground: hsl(240 27.6% 22.7%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 27.6% 22.7%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(240 27.6% 22.7%);
+  --primary: hsl(251.9 55.8% 57.5%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(249.4 100% 93.7%);
+  --secondary-foreground: hsl(249 33% 38%);
+  --muted: hsl(240 50% 96%);
+  --muted-foreground: hsl(240 12.4% 47.5%);
+  --accent: hsl(218.5 100% 92.4%);
+  --accent-foreground: hsl(240 27.6% 22.7%);
+  --destructive: hsl(347.1 70.5% 52.2%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(240 35% 91%);
+  --input: hsl(240 35% 91%);
+  --ring: hsl(251.9 55.8% 57.5%);
+  --chart-1: hsl(251.9 55.8% 57.5%);
+  --chart-2: hsl(250 95% 77%);
+  --chart-3: hsl(239 82% 65%);
+  --chart-4: hsl(243 93% 72%);
+  --chart-5: hsl(244 47% 48%);
+  --sidebar: hsl(240 50% 96%);
+  --sidebar-foreground: hsl(240 27.6% 22.7%);
+  --sidebar-primary: hsl(251.9 55.8% 57.5%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(218.5 100% 92.4%);
+  --sidebar-accent-foreground: hsl(240 27.6% 22.7%);
+  --sidebar-border: hsl(240 35% 91%);
+  --sidebar-ring: hsl(251.9 55.8% 57.5%);
+  --font-sans: Inter, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
+  --shadow-xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
+  --shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+  --shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+  --shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
+  --shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
+  --shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
+  --shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.30);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="cosmic-night"],
+[data-skin="cosmic-night"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(240 27% 8%);
+  --foreground: hsl(240 48.7% 92.4%);
+  --card: hsl(240 28% 14%);
+  --card-foreground: hsl(240 48.7% 92.4%);
+  --popover: hsl(240 28% 14%);
+  --popover-foreground: hsl(240 48.7% 92.4%);
+  --primary: hsl(251 100% 78%);
+  --primary-foreground: hsl(240 27% 8%);
+  --secondary: hsl(243 33% 25%);
+  --secondary-foreground: hsl(242 100% 88%);
+  --muted: hsl(240 33% 20%);
+  --muted-foreground: hsl(240 20% 69%);
+  --accent: hsl(240 33.3% 28.2%);
+  --accent-foreground: hsl(240 48.7% 92.4%);
+  --destructive: hsl(347.1 70.5% 52.2%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(240 26.2% 25.5%);
+  --input: hsl(240 26.2% 25.5%);
+  --ring: hsl(251 100% 78%);
+  --chart-1: hsl(251 100% 78%);
+  --chart-2: hsl(230.5 44.1% 63.5%);
+  --chart-3: hsl(207 89% 68%);
+  --chart-4: hsl(174 42% 51%);
+  --chart-5: hsl(325.5 100% 73.7%);
+  --sidebar: hsl(240 28% 14%);
+  --sidebar-foreground: hsl(240 48.7% 92.4%);
+  --sidebar-primary: hsl(251 100% 78%);
+  --sidebar-primary-foreground: hsl(240 27% 8%);
+  --sidebar-accent: hsl(240 33.3% 28.2%);
+  --sidebar-accent-foreground: hsl(240 48.7% 92.4%);
+  --sidebar-border: hsl(240 26.2% 25.5%);
+  --sidebar-ring: hsl(251 100% 78%);
+  --shadow-2xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
+  --shadow-xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
+  --shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+  --shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+  --shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
+  --shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
+  --shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
+  --shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.30);
+}
+
+[data-skin="cosmic-night"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="cosmic-night"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="cosmic-night"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="cosmic-night"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="cosmic-night"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="cosmic-night"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/default.css b/packages/shared/app/src/styles/skins/default.css
new file mode 100644
index 0000000..1d6b442
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/default.css
@@ -0,0 +1,70 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* The default skin (the shadcn neutral theme of theme.css) scoped on an element: the Default tile of /skins/ shows it even when
+   the page wears another skin. On <html>, data-skin="default" needs nothing: theme.css is the default. Same values as theme.css. */
+:where([data-skin="default"]:not(:root)) {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 4%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 4%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 4%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 43.5%);
+  --accent: hsl(0 0% 96%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0.6 88.4% 52.5%);
+  --border: hsl(0 0% 90%);
+  --input: hsl(0 0% 90%);
+  --ring: hsl(0 0% 63%);
+  --chart-1: hsl(18 100% 48%);
+  --chart-2: hsl(174.7 100% 29.5%);
+  --chart-3: hsl(196 72% 23%);
+  --chart-4: hsl(43.6 100% 50%);
+  --chart-5: hsl(36.3 100% 49.7%);
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(0 0% 4%);
+  --sidebar-primary: hsl(0 0% 9%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 96%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(0 0% 90%);
+  --sidebar-ring: hsl(0 0% 63%);
+}
+
+:where(.dark, [data-theme="dark"]) :where([data-skin="default"]:not(:root)) {
+  --background: hsl(0 0% 4%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 90%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 15%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(0 0% 15%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(356.1 62.4% 52%);
+  --border: hsl(0 0% 100% / 10%);
+  --input: hsl(0 0% 100% / 15%);
+  --ring: hsl(0 0% 45%);
+  --chart-1: hsl(225.3 84.1% 49%);
+  --chart-2: hsl(160 100% 37%);
+  --chart-3: hsl(36.3 100% 49.7%);
+  --chart-4: hsl(273.3 100% 63.8%);
+  --chart-5: hsl(345 100% 56%);
+  --sidebar: hsl(0 0% 9%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(225.3 84.1% 49%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 15%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 100% / 10%);
+  --sidebar-ring: hsl(0 0% 45%);
+}
diff --git a/packages/shared/app/src/styles/skins/doom-64.css b/packages/shared/app/src/styles/skins/doom-64.css
new file mode 100644
index 0000000..30e0aef
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/doom-64.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "doom-64" (Doom 64): the tweakcn preset "doom-64" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="doom-64" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Oxanium (Google Fonts, loaded when the skin is on). */
+[data-skin="doom-64"] {
+  --background: hsl(0 0% 80%);
+  --foreground: hsl(0 0% 12%);
+  --card: hsl(0 0% 69%);
+  --card-foreground: hsl(0 0% 12%);
+  --popover: hsl(0 0% 69%);
+  --popover-foreground: hsl(0 0% 12%);
+  --primary: hsl(0 73.5% 41.4%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(82 39% 30%);
+  --secondary-foreground: hsl(0 0% 100%);
+  --muted: hsl(0 0% 72%);
+  --muted-foreground: hsl(0 0% 26%);
+  --accent: hsl(207 47.2% 45.3%);
+  --accent-foreground: hsl(0 0% 100%);
+  --destructive: hsl(26 100% 50%);
+  --destructive-foreground: hsl(0 0% 0%);
+  --border: hsl(0 0% 31%);
+  --input: hsl(0 0% 31%);
+  --ring: hsl(0 73.5% 41.4%);
+  --chart-1: hsl(0 73.5% 41.4%);
+  --chart-2: hsl(82 39% 30%);
+  --chart-3: hsl(207 44% 49%);
+  --chart-4: hsl(26 100% 50%);
+  --chart-5: hsl(16 18% 47%);
+  --sidebar: hsl(0 0% 69%);
+  --sidebar-foreground: hsl(0 0% 12%);
+  --sidebar-primary: hsl(0 73.5% 41.4%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(207 44% 49%);
+  --sidebar-accent-foreground: hsl(0 0% 100%);
+  --sidebar-border: hsl(0 0% 31%);
+  --sidebar-ring: hsl(0 73.5% 41.4%);
+  --font-sans: "Oxanium", sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "Source Code Pro", monospace;
+  --radius: 0px;
+  --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
+  --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
+  --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+  --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
+  --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
+  --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
+  --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 1.00);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="doom-64"],
+[data-skin="doom-64"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 10%);
+  --foreground: hsl(0 0% 88%);
+  --card: hsl(0 0% 16.5%);
+  --card-foreground: hsl(0 0% 88%);
+  --popover: hsl(0 0% 16.5%);
+  --popover-foreground: hsl(0 0% 88%);
+  --primary: hsl(0.7 72% 52.4%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(92 48% 42%);
+  --secondary-foreground: hsl(0 0% 0%);
+  --muted: hsl(0 0% 14.5%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(207 89% 68%);
+  --accent-foreground: hsl(0 0% 0%);
+  --destructive: hsl(37.6 100% 50%);
+  --destructive-foreground: hsl(0 0% 0%);
+  --border: hsl(0 0% 29%);
+  --input: hsl(0 0% 29%);
+  --ring: hsl(1.4 77.2% 55.3%);
+  --chart-1: hsl(1.4 77.2% 55.3%);
+  --chart-2: hsl(92 48% 42%);
+  --chart-3: hsl(207 89% 68%);
+  --chart-4: hsl(37.6 100% 50%);
+  --chart-5: hsl(16 15% 56%);
+  --sidebar: hsl(0 0% 8%);
+  --sidebar-foreground: hsl(0 0% 88%);
+  --sidebar-primary: hsl(1.4 77.2% 55.3%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(207 89% 68%);
+  --sidebar-accent-foreground: hsl(0 0% 0%);
+  --sidebar-border: hsl(0 0% 29%);
+  --sidebar-ring: hsl(1.4 77.2% 55.3%);
+  --shadow-2xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
+  --shadow-xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
+  --shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
+  --shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
+  --shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 2px 4px -1px hsl(0 0% 0% / 0.60);
+  --shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 4px 6px -1px hsl(0 0% 0% / 0.60);
+  --shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.60);
+  --shadow-2xl: 0px 2px 5px 0px hsl(0 0% 0% / 1.50);
+}
+
+[data-skin="doom-64"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="doom-64"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="doom-64"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="doom-64"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="doom-64"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="doom-64"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/kodama-grove.css b/packages/shared/app/src/styles/skins/kodama-grove.css
new file mode 100644
index 0000000..1628ad5
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/kodama-grove.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "kodama-grove" (Kodama Grove): the tweakcn preset "kodama-grove" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="kodama-grove" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Merriweather (Google Fonts, loaded when the skin is on). */
+[data-skin="kodama-grove"] {
+  --background: hsl(45 49% 79%);
+  --foreground: hsl(26 19% 30%);
+  --card: hsl(42 45% 83%);
+  --card-foreground: hsl(26 19% 30%);
+  --popover: hsl(44 58% 89%);
+  --popover-foreground: hsl(26 19% 30%);
+  --primary: hsl(70.6 48.5% 32%);
+  --primary-foreground: hsl(43 64% 98%);
+  --secondary: hsl(45 48% 75%);
+  --secondary-foreground: hsl(26 19% 30%);
+  --muted: hsl(45 48% 75%);
+  --muted-foreground: hsl(26.4 14.6% 33.5%);
+  --accent: hsl(44 50% 72%);
+  --accent-foreground: hsl(26 19% 30%);
+  --destructive: hsl(8.5 34.7% 48%);
+  --destructive-foreground: hsl(45 44.4% 96.5%);
+  --border: hsl(26 24% 60%);
+  --input: hsl(44 50% 72%);
+  --ring: hsl(92 19% 62%);
+  --chart-1: hsl(92 19% 62%);
+  --chart-2: hsl(95 16% 55%);
+  --chart-3: hsl(103 16% 75%);
+  --chart-4: hsl(104 11% 47%);
+  --chart-5: hsl(104 11% 39%);
+  --sidebar: hsl(44 52% 76%);
+  --sidebar-foreground: hsl(26 19% 30%);
+  --sidebar-primary: hsl(92 19% 62%);
+  --sidebar-primary-foreground: hsl(43 64% 98%);
+  --sidebar-accent: hsl(42 29% 88%);
+  --sidebar-accent-foreground: hsl(26 19% 30%);
+  --sidebar-border: hsl(42 25% 86%);
+  --sidebar-ring: hsl(92 19% 62%);
+  --font-sans: Merriweather, serif;
+  --font-serif: Source Serif 4, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.425rem;
+  --shadow-2xs: 3px 3px 2px 0px hsl(88 22% 35% / 0.07);
+  --shadow-xs: 3px 3px 2px 0px hsl(88 22% 35% / 0.07);
+  --shadow-sm: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15);
+  --shadow: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15);
+  --shadow-md: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 2px 4px -1px hsl(88 22% 35% / 0.15);
+  --shadow-lg: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 4px 6px -1px hsl(88 22% 35% / 0.15);
+  --shadow-xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 8px 10px -1px hsl(88 22% 35% / 0.15);
+  --shadow-2xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.38);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="kodama-grove"],
+[data-skin="kodama-grove"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(42.4 17.2% 19.4%);
+  --foreground: hsl(38 41% 88%);
+  --card: hsl(39 12% 23%);
+  --card-foreground: hsl(38 41% 88%);
+  --popover: hsl(39 12% 23%);
+  --popover-foreground: hsl(38 41% 88%);
+  --primary: hsl(95 16% 55%);
+  --primary-foreground: hsl(27 12% 15%);
+  --secondary: hsl(40 13% 31%);
+  --secondary-foreground: hsl(38 41% 88%);
+  --muted: hsl(39 13% 26%);
+  --muted-foreground: hsl(33.3 11.5% 69.4%);
+  --accent: hsl(44 27% 50%);
+  --accent-foreground: hsl(27 12% 15%);
+  --destructive: hsl(9.3 31.6% 44.1%);
+  --destructive-foreground: hsl(40 41% 90%);
+  --border: hsl(40 13% 31%);
+  --input: hsl(40 13% 31%);
+  --ring: hsl(95 16% 55%);
+  --chart-1: hsl(95 16% 55%);
+  --chart-2: hsl(92 19% 62%);
+  --chart-3: hsl(104 11% 47%);
+  --chart-4: hsl(44 27% 50%);
+  --chart-5: hsl(104 11% 39%);
+  --sidebar: hsl(42.4 17.2% 19.4%);
+  --sidebar-foreground: hsl(38 41% 88%);
+  --sidebar-primary: hsl(95 16% 55%);
+  --sidebar-primary-foreground: hsl(27 12% 15%);
+  --sidebar-accent: hsl(44 27% 50%);
+  --sidebar-accent-foreground: hsl(27 12% 15%);
+  --sidebar-border: hsl(40 13% 31%);
+  --sidebar-ring: hsl(95 16% 55%);
+  --shadow-2xs: 3px 3px 2px 0px hsl(88 22% 35% / 0.07);
+  --shadow-xs: 3px 3px 2px 0px hsl(88 22% 35% / 0.07);
+  --shadow-sm: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15);
+  --shadow: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15);
+  --shadow-md: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 2px 4px -1px hsl(88 22% 35% / 0.15);
+  --shadow-lg: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 4px 6px -1px hsl(88 22% 35% / 0.15);
+  --shadow-xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 8px 10px -1px hsl(88 22% 35% / 0.15);
+  --shadow-2xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.38);
+}
+
+[data-skin="kodama-grove"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="kodama-grove"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="kodama-grove"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="kodama-grove"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="kodama-grove"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="kodama-grove"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/mocha-mousse.css b/packages/shared/app/src/styles/skins/mocha-mousse.css
new file mode 100644
index 0000000..dacf385
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/mocha-mousse.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "mocha-mousse" (Mocha Mousse): the tweakcn preset "mocha-mousse" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="mocha-mousse" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: DM Sans (Google Fonts, loaded when the skin is on). */
+[data-skin="mocha-mousse"] {
+  --background: hsl(55 30% 92%);
+  --foreground: hsl(16 15% 29%);
+  --card: hsl(55 30% 92%);
+  --card-foreground: hsl(16 15% 29%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(16 15% 29%);
+  --primary: hsl(17.7 25.5% 46.9%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(37.3 16.7% 43.3%);
+  --secondary-foreground: hsl(0 0% 100%);
+  --muted: hsl(20 45% 81%);
+  --muted-foreground: hsl(13.3 25.1% 35.1%);
+  --accent: hsl(20 45% 81%);
+  --accent-foreground: hsl(16 15% 29%);
+  --destructive: hsl(22.5 14.8% 10.6%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(37 22% 65%);
+  --input: hsl(37 22% 65%);
+  --ring: hsl(18 26% 52%);
+  --chart-1: hsl(18 26% 52%);
+  --chart-2: hsl(14 21% 45%);
+  --chart-3: hsl(22 33% 65%);
+  --chart-4: hsl(37 22% 65%);
+  --chart-5: hsl(22 19% 55%);
+  --sidebar: hsl(21 44% 86%);
+  --sidebar-foreground: hsl(16 15% 29%);
+  --sidebar-primary: hsl(18 26% 52%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(22 33% 65%);
+  --sidebar-accent-foreground: hsl(0 0% 100%);
+  --sidebar-border: hsl(22 19% 55%);
+  --sidebar-ring: hsl(18 26% 52%);
+  --font-sans: DM Sans, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: Menlo, monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 2px 2px 0px 0px hsl(20 18% 51% / 0.06);
+  --shadow-xs: 2px 2px 0px 0px hsl(20 18% 51% / 0.06);
+  --shadow-sm: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 1px 2px -1px hsl(20 18% 51% / 0.11);
+  --shadow: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 1px 2px -1px hsl(20 18% 51% / 0.11);
+  --shadow-md: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 2px 4px -1px hsl(20 18% 51% / 0.11);
+  --shadow-lg: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 4px 6px -1px hsl(20 18% 51% / 0.11);
+  --shadow-xl: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 8px 10px -1px hsl(20 18% 51% / 0.11);
+  --shadow-2xl: 2px 2px 0px 0px hsl(20 18% 51% / 0.28);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="mocha-mousse"],
+[data-skin="mocha-mousse"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(20 15% 15%);
+  --foreground: hsl(55 30% 92%);
+  --card: hsl(21 13% 21%);
+  --card-foreground: hsl(55 30% 92%);
+  --popover: hsl(21 13% 21%);
+  --popover-foreground: hsl(55 30% 92%);
+  --primary: hsl(22 33% 65%);
+  --primary-foreground: hsl(20 15% 15%);
+  --secondary: hsl(13.8 21.4% 43.9%);
+  --secondary-foreground: hsl(55 30% 92%);
+  --muted: hsl(16 15% 29%);
+  --muted-foreground: hsl(21 31% 73%);
+  --accent: hsl(37 22% 65%);
+  --accent-foreground: hsl(20 15% 15%);
+  --destructive: hsl(0 68.7% 67.5%);
+  --destructive-foreground: hsl(20 15% 15%);
+  --border: hsl(16 15% 29%);
+  --input: hsl(16 15% 29%);
+  --ring: hsl(22 33% 65%);
+  --chart-1: hsl(22 33% 65%);
+  --chart-2: hsl(37 22% 65%);
+  --chart-3: hsl(18 26% 52%);
+  --chart-4: hsl(14 21% 45%);
+  --chart-5: hsl(22 19% 55%);
+  --sidebar: hsl(22.5 14.8% 10.6%);
+  --sidebar-foreground: hsl(55 30% 92%);
+  --sidebar-primary: hsl(22 33% 65%);
+  --sidebar-primary-foreground: hsl(22.5 14.8% 10.6%);
+  --sidebar-accent: hsl(37 22% 65%);
+  --sidebar-accent-foreground: hsl(22.5 14.8% 10.6%);
+  --sidebar-border: hsl(16 15% 29%);
+  --sidebar-ring: hsl(22 33% 65%);
+  --shadow-2xs: 2px 2px 0px 0px hsl(20 18% 30% / 0.06);
+  --shadow-xs: 2px 2px 0px 0px hsl(20 18% 30% / 0.06);
+  --shadow-sm: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 1px 2px -1px hsl(20 18% 30% / 0.11);
+  --shadow: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 1px 2px -1px hsl(20 18% 30% / 0.11);
+  --shadow-md: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 2px 4px -1px hsl(20 18% 30% / 0.11);
+  --shadow-lg: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 4px 6px -1px hsl(20 18% 30% / 0.11);
+  --shadow-xl: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 8px 10px -1px hsl(20 18% 30% / 0.11);
+  --shadow-2xl: 2px 2px 0px 0px hsl(20 18% 30% / 0.28);
+}
+
+[data-skin="mocha-mousse"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="mocha-mousse"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="mocha-mousse"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="mocha-mousse"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="mocha-mousse"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="mocha-mousse"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/modern-minimal.css b/packages/shared/app/src/styles/skins/modern-minimal.css
new file mode 100644
index 0000000..223b69f
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/modern-minimal.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "modern-minimal" (Modern Minimal): the tweakcn preset "modern-minimal" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="modern-minimal" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Inter (Google Fonts, loaded when the skin is on). */
+[data-skin="modern-minimal"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 20%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 20%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 20%);
+  --primary: hsl(217.3 76.8% 52.7%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(220 14% 96%);
+  --secondary-foreground: hsl(215 14% 34%);
+  --muted: hsl(210 20% 98%);
+  --muted-foreground: hsl(220 9% 46%);
+  --accent: hsl(204 94% 94%);
+  --accent-foreground: hsl(224.4 64.3% 32.9%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(220 13% 91%);
+  --input: hsl(220 13% 91%);
+  --ring: hsl(217.2 91.2% 59.8%);
+  --chart-1: hsl(217.2 91.2% 59.8%);
+  --chart-2: hsl(221 83% 53%);
+  --chart-3: hsl(224.3 76.3% 48%);
+  --chart-4: hsl(226 71% 40%);
+  --chart-5: hsl(224.4 64.3% 32.9%);
+  --sidebar: hsl(210 20% 98%);
+  --sidebar-foreground: hsl(0 0% 20%);
+  --sidebar-primary: hsl(217.2 91.2% 59.8%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(204 94% 94%);
+  --sidebar-accent-foreground: hsl(224.4 64.3% 32.9%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --font-sans: Inter, sans-serif;
+  --font-serif: Source Serif 4, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.375rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="modern-minimal"],
+[data-skin="modern-minimal"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 9%);
+  --foreground: hsl(0 0% 90%);
+  --card: hsl(0 0% 15%);
+  --card-foreground: hsl(0 0% 90%);
+  --popover: hsl(0 0% 15%);
+  --popover-foreground: hsl(0 0% 90%);
+  --primary: hsl(217.3 76.8% 52.7%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 90%);
+  --muted: hsl(0 0% 12%);
+  --muted-foreground: hsl(0 0% 64%);
+  --accent: hsl(224.4 64.3% 32.9%);
+  --accent-foreground: hsl(213 97% 87%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 0% 25%);
+  --input: hsl(0 0% 25%);
+  --ring: hsl(217.2 91.2% 59.8%);
+  --chart-1: hsl(213 94% 68%);
+  --chart-2: hsl(217.2 91.2% 59.8%);
+  --chart-3: hsl(221 83% 53%);
+  --chart-4: hsl(224.3 76.3% 48%);
+  --chart-5: hsl(226 71% 40%);
+  --sidebar: hsl(0 0% 9%);
+  --sidebar-foreground: hsl(0 0% 90%);
+  --sidebar-primary: hsl(217.2 91.2% 59.8%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(224.4 64.3% 32.9%);
+  --sidebar-accent-foreground: hsl(213 97% 87%);
+  --sidebar-border: hsl(0 0% 25%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+[data-skin="modern-minimal"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="modern-minimal"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="modern-minimal"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="modern-minimal"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="modern-minimal"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="modern-minimal"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/neo-brutalism.css b/packages/shared/app/src/styles/skins/neo-brutalism.css
new file mode 100644
index 0000000..6bcdf79
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/neo-brutalism.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "neo-brutalism" (Neo Brutalism): the tweakcn preset "neo-brutalism" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="neo-brutalism" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: DM Sans (Google Fonts, loaded when the skin is on). */
+[data-skin="neo-brutalism"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 0%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 0%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 0%);
+  --primary: hsl(354.9 91.8% 47.6%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(60 100% 50%);
+  --secondary-foreground: hsl(0 0% 0%);
+  --muted: hsl(0 0% 94%);
+  --muted-foreground: hsl(0 0% 20%);
+  --accent: hsl(216 100% 50%);
+  --accent-foreground: hsl(0 0% 100%);
+  --destructive: hsl(0 0% 0%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 0% 0%);
+  --input: hsl(0 0% 0%);
+  --ring: hsl(0 100% 60%);
+  --chart-1: hsl(0 100% 60%);
+  --chart-2: hsl(60 100% 50%);
+  --chart-3: hsl(216 100% 50%);
+  --chart-4: hsl(120 100% 40%);
+  --chart-5: hsl(300 100% 40%);
+  --sidebar: hsl(0 0% 94%);
+  --sidebar-foreground: hsl(0 0% 0%);
+  --sidebar-primary: hsl(0 100% 60%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(216 100% 50%);
+  --sidebar-accent-foreground: hsl(0 0% 100%);
+  --sidebar-border: hsl(0 0% 0%);
+  --sidebar-ring: hsl(0 100% 60%);
+  --font-sans: DM Sans, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: Space Mono, monospace;
+  --radius: 0px;
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="neo-brutalism"],
+[data-skin="neo-brutalism"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 0%);
+  --foreground: hsl(0 0% 100%);
+  --card: hsl(0 0% 20%);
+  --card-foreground: hsl(0 0% 100%);
+  --popover: hsl(0 0% 20%);
+  --popover-foreground: hsl(0 0% 100%);
+  --primary: hsl(0 100% 70%);
+  --primary-foreground: hsl(0 0% 0%);
+  --secondary: hsl(60 100% 60%);
+  --secondary-foreground: hsl(0 0% 0%);
+  --muted: hsl(0 0% 10%);
+  --muted-foreground: hsl(0 0% 80%);
+  --accent: hsl(210 100% 60%);
+  --accent-foreground: hsl(0 0% 0%);
+  --destructive: hsl(0 0% 100%);
+  --destructive-foreground: hsl(0 0% 0%);
+  --border: hsl(0 0% 100%);
+  --input: hsl(0 0% 100%);
+  --ring: hsl(0 100% 70%);
+  --chart-1: hsl(0 100% 70%);
+  --chart-2: hsl(60 100% 60%);
+  --chart-3: hsl(210 100% 60%);
+  --chart-4: hsl(120 60% 50%);
+  --chart-5: hsl(300 60% 50%);
+  --sidebar: hsl(0 0% 0%);
+  --sidebar-foreground: hsl(0 0% 100%);
+  --sidebar-primary: hsl(0 100% 70%);
+  --sidebar-primary-foreground: hsl(0 0% 0%);
+  --sidebar-accent: hsl(210 100% 60%);
+  --sidebar-accent-foreground: hsl(0 0% 0%);
+  --sidebar-border: hsl(0 0% 100%);
+  --sidebar-ring: hsl(0 100% 70%);
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
+}
+
+[data-skin="neo-brutalism"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="neo-brutalism"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="neo-brutalism"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="neo-brutalism"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="neo-brutalism"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="neo-brutalism"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/notebook.css b/packages/shared/app/src/styles/skins/notebook.css
new file mode 100644
index 0000000..aec511b
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/notebook.css
@@ -0,0 +1,112 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "notebook" (Notebook): the tweakcn preset "notebook" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="notebook" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Architects Daughter (Google Fonts, loaded when the skin is on). */
+[data-skin="notebook"] {
+  --background: hsl(0 0% 98%);
+  --foreground: hsl(0 0% 23%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 23%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 23%);
+  --primary: hsl(0 0% 38%);
+  --primary-foreground: hsl(0 0% 94%);
+  --secondary: hsl(0 0% 87%);
+  --secondary-foreground: hsl(0 0% 23%);
+  --muted: hsl(0 0% 89%);
+  --muted-foreground: hsl(0 0% 31%);
+  --accent: hsl(47 64% 87%);
+  --accent-foreground: hsl(14 26% 29%);
+  --destructive: hsl(359.2 30.6% 52%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 1% 45%);
+  --input: hsl(0 0% 100%);
+  --ring: hsl(0 0% 63%);
+  --chart-1: hsl(0 0% 20%);
+  --chart-2: hsl(0 0% 33%);
+  --chart-3: hsl(0 0% 47%);
+  --chart-4: hsl(0 0% 60%);
+  --chart-5: hsl(0 0% 73%);
+  --sidebar: hsl(0 0% 94%);
+  --sidebar-foreground: hsl(0 0% 23%);
+  --sidebar-primary: hsl(0 0% 38%);
+  --sidebar-primary-foreground: hsl(0 0% 94%);
+  --sidebar-accent: hsl(47 64% 87%);
+  --sidebar-accent-foreground: hsl(14 26% 29%);
+  --sidebar-border: hsl(0 0% 75%);
+  --sidebar-ring: hsl(0 0% 63%);
+  --font-sans: Architects Daughter, sans-serif;
+  --font-serif: "Times New Roman", Times, serif;
+  --font-mono: "Courier New", Courier, monospace;
+  --font-weight-medium: 400;
+  --font-weight-semibold: 400;
+  --radius: 0.625rem;
+  --shadow-2xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
+  --shadow-xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
+  --shadow-sm: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
+  --shadow: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
+  --shadow-md: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 2px 4px -1px hsl(0 0% 0% / 0.03);
+  --shadow-lg: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 4px 6px -1px hsl(0 0% 0% / 0.03);
+  --shadow-xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 8px 10px -1px hsl(0 0% 0% / 0.03);
+  --shadow-2xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.07);
+  --tracking-normal: 0.5px;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="notebook"],
+[data-skin="notebook"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 17%);
+  --foreground: hsl(0 0% 86%);
+  --card: hsl(0 0% 20%);
+  --card-foreground: hsl(0 0% 86%);
+  --popover: hsl(0 0% 20%);
+  --popover-foreground: hsl(0 0% 86%);
+  --primary: hsl(0 0% 69%);
+  --primary-foreground: hsl(0 0% 17%);
+  --secondary: hsl(0 0% 30%);
+  --secondary-foreground: hsl(0 0% 75%);
+  --muted: hsl(0 0% 27%);
+  --muted-foreground: hsl(0 0% 70.6%);
+  --accent: hsl(0 0% 88%);
+  --accent-foreground: hsl(0 0% 20%);
+  --destructive: hsl(0 36% 77%);
+  --destructive-foreground: hsl(0 0% 17%);
+  --border: hsl(0 0% 31%);
+  --input: hsl(0 0% 20%);
+  --ring: hsl(0 0% 75%);
+  --chart-1: hsl(0 0% 94%);
+  --chart-2: hsl(0 0% 82%);
+  --chart-3: hsl(0 0% 69%);
+  --chart-4: hsl(0 0% 56%);
+  --chart-5: hsl(0 0% 44%);
+  --sidebar: hsl(0 0% 13%);
+  --sidebar-foreground: hsl(0 0% 86%);
+  --sidebar-primary: hsl(0 0% 69%);
+  --sidebar-primary-foreground: hsl(0 0% 13%);
+  --sidebar-accent: hsl(0 0% 88%);
+  --sidebar-accent-foreground: hsl(0 0% 20%);
+  --sidebar-border: hsl(0 0% 31%);
+  --sidebar-ring: hsl(0 0% 75%);
+  --font-serif: Georgia, serif;
+  --font-mono: "Fira Code", "Courier New", monospace;
+  --shadow-2xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
+  --shadow-xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
+  --shadow-sm: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
+  --shadow: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
+  --shadow-md: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 2px 4px -1px hsl(0 0% 0% / 0.03);
+  --shadow-lg: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 4px 6px -1px hsl(0 0% 0% / 0.03);
+  --shadow-xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 8px 10px -1px hsl(0 0% 0% / 0.03);
+  --shadow-2xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.07);
+}
+
+:root[data-skin="notebook"] body { letter-spacing: var(--tracking-normal); }
+[data-skin="notebook"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="notebook"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="notebook"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="notebook"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="notebook"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="notebook"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/perpetuity.css b/packages/shared/app/src/styles/skins/perpetuity.css
new file mode 100644
index 0000000..03f786a
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/perpetuity.css
@@ -0,0 +1,104 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "perpetuity" (Perpetuity): the tweakcn preset "perpetuity" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="perpetuity" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Source Code Pro (Google Fonts, loaded when the skin is on). */
+[data-skin="perpetuity"] {
+  --background: hsl(180 21% 93%);
+  --foreground: hsl(188.8 78.9% 18.6%);
+  --card: hsl(180 24% 96%);
+  --card-foreground: hsl(188.8 78.9% 18.6%);
+  --popover: hsl(180 24% 96%);
+  --popover-foreground: hsl(188.8 78.9% 18.6%);
+  --primary: hsl(184 100% 27%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(180 29% 88%);
+  --secondary-foreground: hsl(188.8 78.9% 18.6%);
+  --muted: hsl(180 19% 90%);
+  --muted-foreground: hsl(184 35.3% 33.3%);
+  --accent: hsl(184 38% 85%);
+  --accent-foreground: hsl(188.8 78.9% 18.6%);
+  --destructive: hsl(0 62.4% 52%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(186 27% 85%);
+  --input: hsl(180 29% 88%);
+  --ring: hsl(184 92% 29%);
+  --chart-1: hsl(184 92% 29%);
+  --chart-2: hsl(183.5 69.4% 38.4%);
+  --chart-3: hsl(183.6 55.1% 48%);
+  --chart-4: hsl(184 54% 59%);
+  --chart-5: hsl(183.6 55% 70.4%);
+  --sidebar: hsl(186 35% 89%);
+  --sidebar-foreground: hsl(188.8 78.9% 18.6%);
+  --sidebar-primary: hsl(184 92% 29%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(184 38% 85%);
+  --sidebar-accent-foreground: hsl(188.8 78.9% 18.6%);
+  --sidebar-border: hsl(186 27% 85%);
+  --sidebar-ring: hsl(184 92% 29%);
+  --font-sans: Courier New, monospace;
+  --font-serif: Courier New, monospace;
+  --font-mono: Courier New, monospace;
+  --radius: 0.125rem;
+  --shadow-2xs: 1px 1px 2px 0px hsl(185 70% 30% / 0.07);
+  --shadow-xs: 1px 1px 2px 0px hsl(185 70% 30% / 0.07);
+  --shadow-sm: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15);
+  --shadow: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15);
+  --shadow-md: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 2px 4px -1px hsl(185 70% 30% / 0.15);
+  --shadow-lg: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 4px 6px -1px hsl(185 70% 30% / 0.15);
+  --shadow-xl: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 8px 10px -1px hsl(185 70% 30% / 0.15);
+  --shadow-2xl: 1px 1px 2px 0px hsl(185 70% 30% / 0.38);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="perpetuity"],
+[data-skin="perpetuity"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(196 52% 8%);
+  --foreground: hsl(180 77% 61%);
+  --card: hsl(192 51% 9.6%);
+  --card-foreground: hsl(180 77% 61%);
+  --popover: hsl(192 51% 9.6%);
+  --popover-foreground: hsl(180 77% 61%);
+  --primary: hsl(180 77% 61%);
+  --primary-foreground: hsl(196 52% 8%);
+  --secondary: hsl(191 59% 21%);
+  --secondary-foreground: hsl(180 77% 61%);
+  --muted: hsl(193 58% 14%);
+  --muted-foreground: hsl(180 51% 43%);
+  --accent: hsl(191 59% 21%);
+  --accent-foreground: hsl(180 77% 61%);
+  --destructive: hsl(357.6 71.5% 48.2%);
+  --destructive-foreground: hsl(0 0% 95%);
+  --border: hsl(191 59% 21%);
+  --input: hsl(191 59% 21%);
+  --ring: hsl(180 77% 61%);
+  --chart-1: hsl(180 77% 61%);
+  --chart-2: hsl(180 51% 43%);
+  --chart-3: hsl(180 51% 36%);
+  --chart-4: hsl(184 58% 23%);
+  --chart-5: hsl(185.2 62.2% 14.5%);
+  --sidebar: hsl(196 52% 8%);
+  --sidebar-foreground: hsl(180 77% 61%);
+  --sidebar-primary: hsl(180 77% 61%);
+  --sidebar-primary-foreground: hsl(196 52% 8%);
+  --sidebar-accent: hsl(191 59% 21%);
+  --sidebar-accent-foreground: hsl(180 77% 61%);
+  --sidebar-border: hsl(191 59% 21%);
+  --sidebar-ring: hsl(180 77% 61%);
+  --font-sans: Source Code Pro, monospace;
+  --font-serif: Source Code Pro, monospace;
+  --font-mono: Source Code Pro, monospace;
+  --shadow-2xs: 1px 1px 2px 0px hsl(180 70% 60% / 0.10);
+  --shadow-xs: 1px 1px 2px 0px hsl(180 70% 60% / 0.10);
+  --shadow-sm: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20);
+  --shadow: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20);
+  --shadow-md: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 2px 4px -1px hsl(180 70% 60% / 0.20);
+  --shadow-lg: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 4px 6px -1px hsl(180 70% 60% / 0.20);
+  --shadow-xl: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 8px 10px -1px hsl(180 70% 60% / 0.20);
+  --shadow-2xl: 1px 1px 2px 0px hsl(180 70% 60% / 0.50);
+}
+
+[data-skin="perpetuity"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="perpetuity"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="perpetuity"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="perpetuity"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="perpetuity"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="perpetuity"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/sky.css b/packages/shared/app/src/styles/skins/sky.css
new file mode 100644
index 0000000..91e3cf8
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/sky.css
@@ -0,0 +1,117 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "sky": white and navy with an orange primary, Istok Web, 0.5rem (8px) corners, soft shadows.
+   On when <html data-skin="sky"> (see skins.css); the font is loaded by bootScreen only for this skin.
+   Only the shadcn tokens change: plain `rounded` reads --radius, the body font reads --font-sans, the tracking
+   utilities read --tracking-*; the shadow utilities print literal values, so the few the kit uses are pointed at the
+   skin's --shadow-* below. */
+:root[data-skin="sky"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(214.4262 100% 11.9608%);
+  --card: hsl(210 16.6667% 97.6471%);
+  --card-foreground: hsl(214.4262 100% 11.9608%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(214.4262 100% 11.9608%);
+  --primary: hsl(23.4 100% 39.2%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(209.0323 100% 93.9216%);
+  --secondary-foreground: hsl(214.4262 100% 11.9608%);
+  --muted: hsl(210 100% 98.0392%);
+  --muted-foreground: hsl(215.2941 39.0805% 34.1176%);
+  --accent: hsl(209.0323 100% 93.9216%);
+  --accent-foreground: hsl(214.4262 100% 11.9608%);
+  --destructive: hsl(358 69% 51%);
+  --destructive-foreground: hsl(210 40% 98.0392%);
+  /* a barely visible hairline: just darker than the card fill (97.6%), so card edges stay faintly readable on white;
+     fields keep the stronger line (--input, inset-ring-input in the kit) so they read as fields */
+  --border: hsl(214 32% 94%);
+  --input: hsl(214.2857 31.8182% 91.3725%);
+  --ring: hsl(214.4262 100% 11.9608%);
+  --chart-1: hsl(219.8684 90.4762% 67.0588%);
+  --chart-2: hsl(24.8908 100% 55.098%);
+  --chart-3: hsl(215.2941 25% 26.6667%);
+  --chart-4: hsl(32.2059 91.8919% 70.9804%);
+  --chart-5: hsl(213.4884 84.3137% 90%);
+  --sidebar: hsl(0 0% 100%);
+  --sidebar-foreground: hsl(214.4262 100% 11.9608%);
+  --sidebar-primary: hsl(29.1429 100% 51.9608%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(209.0323 100% 93.9216%);
+  --sidebar-accent-foreground: hsl(214.4262 100% 11.9608%);
+  --sidebar-border: hsl(214.2857 31.8182% 91.3725%);
+  --sidebar-ring: hsl(214.4262 100% 11.9608%);
+  --font-sans: "Istok Web", system-ui, sans-serif;
+  /* Istok Web ships 400 and 700 only: medium (500) and semibold (600) would ask for faces that do not exist,
+     and some engines (WebKit) then draw that text in the fallback system font; map them onto real faces */
+  --font-weight-medium: 400;
+  --font-weight-semibold: 700;
+  --font-serif: Georgia, serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
+  --shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
+  --shadow-sm: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+  --shadow: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+  --shadow-md: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
+  --shadow-lg: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
+  --shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.13);
+  /* the tracking scale follows --tracking-normal */
+  --tracking-normal: -0.01em;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+  --spacing: 0.25rem;
+}
+
+:root[data-skin="sky"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(220 23.0769% 5.098%);
+  --foreground: hsl(210 16.6667% 97.6471%);
+  --card: hsl(220 18.3673% 9.6078%);
+  --card-foreground: hsl(210 16.6667% 97.6471%);
+  --popover: hsl(220 23.0769% 5.098%);
+  --popover-foreground: hsl(210 16.6667% 97.6471%);
+  --primary: hsl(21.8 100% 40%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(217.2414 32.5843% 17.451%);
+  --secondary-foreground: hsl(210 16.6667% 97.6471%);
+  --muted: hsl(217.2414 32.5843% 17.451%);
+  --muted-foreground: hsl(215 20.2247% 65.098%);
+  --accent: hsl(214.4262 100% 11.9608%);
+  --accent-foreground: hsl(0 0% 100%);
+  --destructive: hsl(0 62.8205% 30.5882%);
+  --destructive-foreground: hsl(210 40% 98.0392%);
+  --border: hsl(217.2414 32.5843% 17.451%);
+  --input: hsl(217.2414 32.5843% 17.451%);
+  --ring: hsl(24.8908 100% 55.098%);
+  --chart-1: hsl(24.8908 100% 55.098%);
+  --chart-2: hsl(217.2193 91.2195% 59.8039%);
+  --chart-3: hsl(160.1183 84.0796% 39.4118%);
+  --chart-4: hsl(37.6923 92.126% 50.1961%);
+  --chart-5: hsl(238.7324 83.5294% 66.6667%);
+  --sidebar: hsl(220 23.0769% 5.098%);
+  --sidebar-foreground: hsl(210 16.6667% 97.6471%);
+  --sidebar-primary: hsl(24.8908 100% 55.098%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(0 0% 100%);
+  --sidebar-accent-foreground: hsl(210 23.7288% 23.1373%);
+  --sidebar-border: hsl(217.2414 32.5843% 17.451%);
+  --sidebar-ring: hsl(24.8908 100% 55.098%);
+  --shadow-2xs: 0px 4px 15px 0px hsl(0 0% 0% / 0.2);
+  --shadow-xs: 0px 4px 15px 0px hsl(0 0% 0% / 0.2);
+  --shadow-sm: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
+  --shadow: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
+  --shadow-md: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
+  --shadow-lg: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
+  --shadow-xl: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
+  --shadow-2xl: 0px 4px 15px 0px hsl(0 0% 0% / 1);
+}
+
+:root[data-skin="sky"] body { letter-spacing: var(--tracking-normal); }
+:root[data-skin="sky"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+:root[data-skin="sky"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+:root[data-skin="sky"] .shadow { --tw-shadow: var(--shadow); }
+:root[data-skin="sky"] .shadow-md { --tw-shadow: var(--shadow-md); }
+:root[data-skin="sky"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+:root[data-skin="sky"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/supabase.css b/packages/shared/app/src/styles/skins/supabase.css
new file mode 100644
index 0000000..15ad6ee
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/supabase.css
@@ -0,0 +1,108 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "supabase" (Supabase): the tweakcn preset "supabase" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="supabase" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Outfit (Google Fonts, loaded when the skin is on). */
+[data-skin="supabase"] {
+  --background: hsl(0 0% 99%);
+  --foreground: hsl(0 0% 9%);
+  --card: hsl(0 0% 99%);
+  --card-foreground: hsl(0 0% 9%);
+  --popover: hsl(0 0% 99%);
+  --popover-foreground: hsl(0 0% 32%);
+  --primary: hsl(151 67% 67%);
+  --primary-foreground: hsl(153.3 13% 13.5%);
+  --secondary: hsl(0 0% 99%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 93%);
+  --muted-foreground: hsl(0 0% 12.5%);
+  --accent: hsl(0 0% 93%);
+  --accent-foreground: hsl(0 0% 12.5%);
+  --destructive: hsl(9.9 82% 43.5%);
+  --destructive-foreground: hsl(0 100% 99.4%);
+  --border: hsl(0 0% 87%);
+  --input: hsl(0 0% 96%);
+  --ring: hsl(151 67% 67%);
+  --chart-1: hsl(151 67% 67%);
+  --chart-2: hsl(217.2 91.2% 59.8%);
+  --chart-3: hsl(258.3 89.5% 66.3%);
+  --chart-4: hsl(37.7 92.1% 50.2%);
+  --chart-5: hsl(160.1 84.1% 39.4%);
+  --sidebar: hsl(0 0% 99%);
+  --sidebar-foreground: hsl(0 0% 44%);
+  --sidebar-primary: hsl(151 67% 67%);
+  --sidebar-primary-foreground: hsl(153.3 13% 13.5%);
+  --sidebar-accent: hsl(0 0% 93%);
+  --sidebar-accent-foreground: hsl(0 0% 12.5%);
+  --sidebar-border: hsl(0 0% 87%);
+  --sidebar-ring: hsl(151 67% 67%);
+  --font-sans: Outfit, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+  --tracking-normal: 0.025em;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="supabase"],
+[data-skin="supabase"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 7%);
+  --foreground: hsl(214 32% 91%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(214 32% 91%);
+  --popover: hsl(0 0% 14%);
+  --popover-foreground: hsl(0 0% 66%);
+  --primary: hsl(154.9 100% 19.2%);
+  --primary-foreground: hsl(153 19% 89%);
+  --secondary: hsl(0 0% 14%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 12%);
+  --muted-foreground: hsl(0 0% 64%);
+  --accent: hsl(0 0% 19%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(6.7 60% 20.6%);
+  --destructive-foreground: hsl(12 12% 92%);
+  --border: hsl(0 0% 16%);
+  --input: hsl(0 0% 14%);
+  --ring: hsl(142 69% 58%);
+  --chart-1: hsl(142 69% 58%);
+  --chart-2: hsl(213 94% 68%);
+  --chart-3: hsl(255.1 91.7% 76.3%);
+  --chart-4: hsl(43.3 96.4% 56.3%);
+  --chart-5: hsl(172.5 66% 50.4%);
+  --sidebar: hsl(0 0% 7%);
+  --sidebar-foreground: hsl(0 0% 54%);
+  --sidebar-primary: hsl(154.9 100% 19.2%);
+  --sidebar-primary-foreground: hsl(153 19% 89%);
+  --sidebar-accent: hsl(0 0% 19%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 16%);
+  --sidebar-ring: hsl(142 69% 58%);
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+}
+
+:root[data-skin="supabase"] body { letter-spacing: var(--tracking-normal); }
+[data-skin="supabase"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="supabase"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="supabase"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="supabase"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="supabase"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="supabase"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/t3-chat.css b/packages/shared/app/src/styles/skins/t3-chat.css
new file mode 100644
index 0000000..3aa0d66
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/t3-chat.css
@@ -0,0 +1,101 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "t3-chat" (T3 Chat): the tweakcn preset "t3-chat" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="t3-chat" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: system. */
+[data-skin="t3-chat"] {
+  --background: hsl(300 33% 97%);
+  --foreground: hsl(296 56% 21%);
+  --card: hsl(300 33% 97%);
+  --card-foreground: hsl(296 56% 21%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(296 56% 21%);
+  --primary: hsl(333 43% 46%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(314.7 61.6% 85.7%);
+  --secondary-foreground: hsl(295.8 40.9% 34.5%);
+  --muted: hsl(311 49% 93%);
+  --muted-foreground: hsl(296 33% 40%);
+  --accent: hsl(314.7 61.6% 85.7%);
+  --accent-foreground: hsl(295.8 40.9% 34.5%);
+  --destructive: hsl(357.7 43.7% 46.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(305 61% 84%);
+  --input: hsl(317 44% 83%);
+  --ring: hsl(333.3 71.4% 50.6%);
+  --chart-1: hsl(318.4 70.2% 50%);
+  --chart-2: hsl(272 82% 40%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+  --sidebar: hsl(290 50% 93%);
+  --sidebar-foreground: hsl(327 77% 38%);
+  --sidebar-primary: hsl(240 10% 30%);
+  --sidebar-primary-foreground: hsl(320 47% 96%);
+  --sidebar-accent: hsl(60 7% 97%);
+  --sidebar-accent-foreground: hsl(240 10% 30%);
+  --sidebar-border: hsl(20 7% 92%);
+  --sidebar-ring: hsl(333.3 71.4% 50.6%);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="t3-chat"],
+[data-skin="t3-chat"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(270 15% 13%);
+  --foreground: hsl(272 28% 82%);
+  --card: hsl(270 14% 17%);
+  --card-foreground: hsl(324.5 23.4% 81.6%);
+  --popover: hsl(320 23% 5%);
+  --popover-foreground: hsl(326 33% 96%);
+  --primary: hsl(332 100% 32%);
+  --primary-foreground: hsl(329.4 59.5% 84.5%);
+  --secondary: hsl(274 15% 21%);
+  --secondary-foreground: hsl(270 30% 83%);
+  --muted: hsl(272.7 13.9% 15.5%);
+  --muted-foreground: hsl(268.8 20.7% 76.3%);
+  --accent: hsl(272 20% 27%);
+  --accent-foreground: hsl(326 33% 96%);
+  --destructive: hsl(350.6 50% 12.5%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(327 8% 21%);
+  --input: hsl(312 9% 22%);
+  --ring: hsl(333.3 71.4% 50.6%);
+  --chart-1: hsl(333 43% 46%);
+  --chart-2: hsl(273 55% 55%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar: hsl(309 17% 8%);
+  --sidebar-foreground: hsl(327.3 26.2% 83.5%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(318 21% 12%);
+  --sidebar-accent-foreground: hsl(240 5% 96%);
+  --sidebar-border: hsl(0 0% 0%);
+  --sidebar-ring: hsl(333.3 71.4% 50.6%);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+[data-skin="t3-chat"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="t3-chat"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="t3-chat"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="t3-chat"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="t3-chat"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="t3-chat"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/src/styles/skins/violet-bloom.css b/packages/shared/app/src/styles/skins/violet-bloom.css
new file mode 100644
index 0000000..1b87d93
--- /dev/null
+++ b/packages/shared/app/src/styles/skins/violet-bloom.css
@@ -0,0 +1,108 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Skin "violet-bloom" (Violet Bloom): the tweakcn preset "violet-bloom" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="violet-bloom" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Plus Jakarta Sans (Google Fonts, loaded when the skin is on). */
+[data-skin="violet-bloom"] {
+  --background: hsl(0 0% 99%);
+  --foreground: hsl(0 0% 0%);
+  --card: hsl(0 0% 99%);
+  --card-foreground: hsl(0 0% 0%);
+  --popover: hsl(0 0% 99%);
+  --popover-foreground: hsl(0 0% 0%);
+  --primary: hsl(258 100% 60%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(214 24% 94%);
+  --secondary-foreground: hsl(0 0% 3%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 32%);
+  --accent: hsl(213 100% 96%);
+  --accent-foreground: hsl(216.3 76% 49%);
+  --destructive: hsl(357.3 64.7% 53.3%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(240 17% 92%);
+  --input: hsl(0 0% 92%);
+  --ring: hsl(0 0% 0%);
+  --chart-1: hsl(148.1 53.4% 53.7%);
+  --chart-2: hsl(258 100% 60%);
+  --chart-3: hsl(25 98% 58%);
+  --chart-4: hsl(217.1 76.7% 54.5%);
+  --chart-5: hsl(0 0% 45%);
+  --sidebar: hsl(210 43% 97%);
+  --sidebar-foreground: hsl(0 0% 0%);
+  --sidebar-primary: hsl(0 0% 0%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(0 0% 92%);
+  --sidebar-accent-foreground: hsl(0 0% 0%);
+  --sidebar-border: hsl(0 0% 92%);
+  --sidebar-ring: hsl(0 0% 0%);
+  --font-sans: Plus Jakarta Sans, sans-serif;
+  --font-serif: Lora, serif;
+  --font-mono: IBM Plex Mono, monospace;
+  --radius: 1.4rem;
+  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
+  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
+  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
+  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
+  --tracking-normal: -0.025em;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="violet-bloom"],
+[data-skin="violet-bloom"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(225 7% 11%);
+  --foreground: hsl(0 0% 94%);
+  --card: hsl(228 7% 14%);
+  --card-foreground: hsl(0 0% 94%);
+  --popover: hsl(228 7% 14%);
+  --popover-foreground: hsl(0 0% 94%);
+  --primary: hsl(258.1 89% 64.3%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(227 10% 18%);
+  --secondary-foreground: hsl(0 0% 94%);
+  --muted: hsl(227 10% 18%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(217.2 32.6% 17.5%);
+  --accent-foreground: hsl(208.2 100% 73.7%);
+  --destructive: hsl(358.2 55.3% 53.5%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(223 6% 21%);
+  --input: hsl(223 6% 21%);
+  --ring: hsl(258 100% 68%);
+  --chart-1: hsl(142 69% 58%);
+  --chart-2: hsl(258 100% 68%);
+  --chart-3: hsl(0 94% 82%);
+  --chart-4: hsl(217.5 87.6% 65.3%);
+  --chart-5: hsl(0 0% 63%);
+  --sidebar: hsl(240 4% 9%);
+  --sidebar-foreground: hsl(0 0% 94%);
+  --sidebar-primary: hsl(258 100% 68%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(227 10% 18%);
+  --sidebar-accent-foreground: hsl(258 100% 68%);
+  --sidebar-border: hsl(223 6% 21%);
+  --sidebar-ring: hsl(258 100% 68%);
+  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
+  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
+  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
+  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
+}
+
+:root[data-skin="violet-bloom"] body { letter-spacing: var(--tracking-normal); }
+[data-skin="violet-bloom"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="violet-bloom"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="violet-bloom"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="violet-bloom"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="violet-bloom"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="violet-bloom"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/packages/shared/app/tsconfig.json b/packages/shared/app/tsconfig.json
new file mode 100644
index 0000000..fcabb3a
--- /dev/null
+++ b/packages/shared/app/tsconfig.json
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/src/app-common.ts (sharedPackage)
+{
+  "compilerOptions": {
+    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler",
+    "strict": true, "noEmit": true, "skipLibCheck": true, "isolatedModules": true, "verbatimModuleSyntax": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/solid/ui/.xgen-manifest.json b/packages/solid/ui/.xgen-manifest.json
new file mode 100644
index 0000000..d5087a7
--- /dev/null
+++ b/packages/solid/ui/.xgen-manifest.json
@@ -0,0 +1,406 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "packages/solid/ui",
+  "files": {
+    "package.json": "1eae9a2c0bc9022285b0e98437078171d64be509e9981d047b3eb07d911fa333",
+    "README.md": "890d6d2159dc91aee29b4e2f80754b7cd149ff3c3ab569b575c69b6d04267052",
+    "src/blocks/about-company.tsx": "49bf4b5fb5e3bea53eff99f9d4679f5435aaffab56cc0b8412f320025f4e5337",
+    "src/blocks/about-me.tsx": "615f61570f8323ab258f4cb3b1906baf68340a4e86fd9e29af9300df513959fd",
+    "src/blocks/about-me.types.ts": "043615269f4a7e5beca54e53db472db980a007cce859659d7a868d8c0bba40ef",
+    "src/blocks/activity-feed.tsx": "5650cbc792d4f9fbb78d2c4a3fc45a6cc8d149e60828e5233c8881ebca5843af",
+    "src/blocks/activity-feed.types.ts": "5f56124080084a1ff49293c65c40780d7f79a44f435b64afd0abcfa50b411026",
+    "src/blocks/announcement-bar.tsx": "b1745952b754c02fa835057c717b7efe2d44a133b1ba9c27427d026cd04a7241",
+    "src/blocks/app-shell.tsx": "19f26aa996d663d1df3a092fce8874f372b804dfff3a30579e599c810e7dc1c8",
+    "src/blocks/app-shell.types.ts": "57d12077a5f31a4d3291fca1d52771735d53fd95cd0f3c19ca244a35ba8bd3bb",
+    "src/blocks/article-body.tsx": "777dc8a92d87719d4c4683f1b50f672ed18ace8ff30b9536c68753bf40569264",
+    "src/blocks/article-body.types.ts": "082f005df03ec6d0774dfe0813bf984bc6fcadc924611c417b6dcef6e46c8c29",
+    "src/blocks/auth-card.tsx": "b39284a27117e18b54ee1b89d4d9d09c3180cffacd3f238c4c7b9d1db3ee5228",
+    "src/blocks/auth-card.types.ts": "8da7cf95a4994c41826f8958a760f4de110f0ae1592573fc3847f43e5a8051ac",
+    "src/blocks/auth-layout.tsx": "54dd4b3676cf474b57ddba23d3775c7172009ac053cede12602e3c5ccfea18c9",
+    "src/blocks/auth-layout.types.ts": "decc4806964fc2e585e1cc914bf334bb0e809a7d2a6c1a93065052fdce47c811",
+    "src/blocks/before-after.tsx": "3af7d68d97a76423ebe9a1ff802142128882bc853adfbe465f5ef35afce554f4",
+    "src/blocks/before-after.types.ts": "ed999d646c9c383b1a327e47cf63fa3eb78acb381271b917122b4139fdc57841",
+    "src/blocks/bento-grid.tsx": "20f8e9cbd5b029c5d94000582f8a952726ece3df764474a227e599d89852c5b1",
+    "src/blocks/bento-grid.types.ts": "6f6a81ac27f1735f3c2d59358bc808c65b04adde3b932860be3b56f70624f5d9",
+    "src/blocks/bottom-nav.tsx": "4560891d3d6f45280a665f93445c862c7b02558c03625ae5062a463fa34b274d",
+    "src/blocks/cart-drawer.tsx": "1264c4168c568ae6613604b92481b6d92ea702e77b485ae0ef1d4ba1ad67cbe0",
+    "src/blocks/cart-drawer.types.ts": "2b0a648c59d430f994286e02fa55f2ad5a7fb0eb7e26ef7a4a72c88849968826",
+    "src/blocks/cart-list.tsx": "dc07ae0184552b05a2021c12ef873aa1db3926e643cc2cbe417050bea1826344",
+    "src/blocks/cart-list.types.ts": "67dac0812500df9da16211d8d2527c3a8a0838910d1ef7d1db2f8bdd72349bb2",
+    "src/blocks/category-nav.tsx": "746f979fe28dd41fac347a015689642f21da4606415baaa7de17e67aebd50583",
+    "src/blocks/category-nav.types.ts": "88c758911dc968d2e05c42c2db256e8d44b6898f581b9d8b3ac5f3142e1b944a",
+    "src/blocks/chart-panel.tsx": "f31df1166a7634faf7a023293963ff7535524feeb40356210985c5cd7a11e9cb",
+    "src/blocks/chart-panel.types.ts": "3815109d2ab650e70c4faa038f64c3b31e4b6816266a97db707640acc1ab11dc",
+    "src/blocks/checklist.tsx": "b24e4a33bde1ab3e4f57122e4f77cda16cdeec74716d76b2f62b129eee83048c",
+    "src/blocks/checklist.types.ts": "cde2540d07d103bac3160f58689186f37775d8594c410b8a75838a4f34c08a72",
+    "src/blocks/checkout-form.tsx": "b4f66c9176831034b2b5d451a622ea340ad56ce0e4c181d0c1f7679053fa4922",
+    "src/blocks/checkout-form.types.ts": "b72088e90cdf5a6c42de163de2d4b8f2499d490ebac738d89694752b02f97aba",
+    "src/blocks/comparison-table.tsx": "de2b7af2dbfee8f879618d39d70b557e24243ee83c3bb357865cee67ef6984fc",
+    "src/blocks/comparison-table.types.ts": "edbee7a4289e384f16af68a9e0b700caf6d993408343338bbfd566791edc1b91",
+    "src/blocks/contact-form.tsx": "9c853bfaa739882094442af9a562eba445e5a1eb1d72e4381031c8118154b72a",
+    "src/blocks/contact-form.types.ts": "63b05d16b74cb8a30a43887f0f2fadcb3346230c81d0e81fd5a8f39446435e3e",
+    "src/blocks/cookie-banner.tsx": "ee8d40783e7c9aaf98723a00a05992159c5c1512fb57edad82e5f1ac58dd0fe1",
+    "src/blocks/credit-packs.tsx": "82befedb17d3799e0c507605a71a5908701445a5b770d2fdffd06e91bfcbed7e",
+    "src/blocks/credit-packs.types.ts": "be28fa1beccf2fba0789f5f572aee73c115cc24ae4cfa0736c8ae41e7cd1024e",
+    "src/blocks/cta-band.tsx": "610d5ce4c56eec0bd064c261887d65e8140bf6ec755db2f35df760bdb4d18409",
+    "src/blocks/cta-band.types.ts": "6140ffcebd34b3d98d06bad1122416626b8f5801f09540185e5b591cb8ff6f1f",
+    "src/blocks/cta-banner.tsx": "18a463f8fc8fcfe527a33f71ce63be23dc737c7fa84134a29578c5fb510c9c99",
+    "src/blocks/cta-proof.tsx": "dbc010fb77cb65cfe26952d6fb04e30ea5c36f88bae157e0591a332fb975d028",
+    "src/blocks/cta-proof.types.ts": "1673af2abdc4ea6382a876efb270e6984f2fd7140a67130bd108291369f1a10d",
+    "src/blocks/dashboard-overview.tsx": "f1e612684b4cf80cd82d5cab36de75526385b9260b733499a35d38ce87e91d69",
+    "src/blocks/dashboard-overview.types.ts": "05bd17982aa5d7b5cb940ff22700a0ef1c154f8a68ac1060a24ec2e67925a4b7",
+    "src/blocks/dashboard-shell.tsx": "ba38b07bfa88a04bd771d06e4c83eb78434ffade90bbe5410d541daaafefd8cc",
+    "src/blocks/dashboard-shell.types.ts": "37c3bba34d5681030b0ca37cb2cfdf65097a7bdbfae51c30931c33f816633895",
+    "src/blocks/delivery-info.tsx": "8e04a6579abc1e0dcba55b799a5fef1b1bf1f388d118d9c014d1d44f59cfb63f",
+    "src/blocks/delivery-info.types.ts": "d68c3ac24bacfc04622e3dc8d49b8c40a913a66a0d5d7d456efbd370bebc396c",
+    "src/blocks/empty-panel.tsx": "ecae10a0c8e597ce956f7e0ef9e41fd6ef8117e34f390a322bae0d47f46edc24",
+    "src/blocks/error-page.tsx": "e86e870ca184aa92686918670cd572cd3100f7da0e90dfe703f93ee9739b04db",
+    "src/blocks/error-page.types.ts": "dd8411dca18b74cd060609106f107ea8069af204aa926190bcffc9fb027f6d0c",
+    "src/blocks/faq-list.tsx": "00fabefb2f949c754d9567194e31f923c53e97dbe732ed460dc597d4ef76a408",
+    "src/blocks/faq-list.types.ts": "eb74ae6e1c1e51c2b4721d348b87cd9d7b46716cd2ed549bf11aa43f25366c6d",
+    "src/blocks/faq-split.tsx": "fa6e7bd952e4f8a0ca3e05471986345a1d0a2bfe8a59fd71eab07bbb2b1d2b40",
+    "src/blocks/faq-split.types.ts": "fbe3f37c43647961ea2055834f0128fa228d9f7b1ad3e3963d628f383835edbf",
+    "src/blocks/feature-accordion.tsx": "823cb9b95dde7bdcab9b1bc8d2734b7b5289d6c23ab8fcc20313ec8bb1a35116",
+    "src/blocks/feature-grid.tsx": "4bc4f2ab8fd9385651e4f1785da712fb0ec333a29dbf0e1649c283cbab62e1d2",
+    "src/blocks/feature-grid.types.ts": "50ab48aa51787e269ffc1f096e082c5b0fbe4abfc31902497dd33fce5d93fb27",
+    "src/blocks/feature-showcase.tsx": "6999f0268fd9fc8419c84e594dc7f4ebcc931aaf2a835f15b683609b3b7dedbe",
+    "src/blocks/feature-split.tsx": "05e9669d1863ef45ec7e62245bf1e8bbace3ca802e14073dc3eb1a85051af8df",
+    "src/blocks/feature-sticky.tsx": "f0b0b4db15149cbb18b4946ec46af52786cdf113e84335df2e3345a8a805c51c",
+    "src/blocks/feature-tabs.tsx": "11d76770e7e69483e1579c081bef965be482b9e11f4c914edad8a561f22411b4",
+    "src/blocks/footer-split.tsx": "20b6497aac82f2f8bd01a10aaef44308217e52c38558869bf61be699856a2cf3",
+    "src/blocks/footer-split.types.ts": "bde2bb954a3eb6ad5383df4bedca2da1ac7c99724000c4c2d081c6cd864fc920",
+    "src/blocks/hero-classic.tsx": "87e8ba6da5bc2057bc4171359e86f4b71da4a08aeb6c2141e7930685dc22e24d",
+    "src/blocks/hero-classic.types.ts": "4724563cef568d2f316f37c3d9386f6fd54ba27d49b6d0f5ec228750bfd44ac3",
+    "src/blocks/hero-prompt.tsx": "c6b367995febf33c0012f7b99af35845cbcfebfab86b4d3572cf23132a1c8e4a",
+    "src/blocks/hero-prompt.types.ts": "455da691d4fcc6dd8df6bced640f72b88a3fdc598efdd59ffb9c8b4fbc0142fe",
+    "src/blocks/hero-split.tsx": "02680681588af006ea50caba243e49201ae4548f0feb4cb747872266cff0974e",
+    "src/blocks/hero-split.types.ts": "d5459ec93bd4a4096825a7c28e8cf4fdd8b3d151e67c60f738234951312e1456",
+    "src/blocks/icon-wall.tsx": "782a1479344c63756c90416d42dcdd1714577f72d5e6654fc07de0932854eacd",
+    "src/blocks/job-board.tsx": "4ca9964827b9a945471d06554c591b53ab70d2223e0af6be378b4f8901c5e7e1",
+    "src/blocks/job-board.types.ts": "88ff24e5faf35fddc5a5edd2ca7f5c100fd27f45d6d003e4728c0ba34d268356",
+    "src/blocks/kanban-board.tsx": "737d5062eb789bf4a9a968b130c08369327c61cf71ed6935454885928651e42f",
+    "src/blocks/kanban-board.types.ts": "b3fcee6b6bf2b2dfca143b5b2f84f76ed0280b24181f20607cc8515d89d286e4",
+    "src/blocks/logo-cloud.tsx": "61d5c472c335c82b4f52d4b088582fb9802f69d13f0ba4792d3e2c2f2ac22226",
+    "src/blocks/logo-cloud.types.ts": "64e9e8cdc13d3b1dbf78894339377f8c654a704a16a6d09c6913b941321bf834",
+    "src/blocks/logo-ribbon.tsx": "eb81a5d332311126a802f444a4c84c83343c6bad3e64e84fcd391b9665dd4447",
+    "src/blocks/media-list.tsx": "1f7d20d5426b00ac9b3f02d146cd5c3ea41aa40a540f046d2685467468ab135e",
+    "src/blocks/media-list.types.ts": "30fdd46e926fecc640cd71aa55ca9a34155ecf77c67dc7a6aaf2cc6d4660a2c2",
+    "src/blocks/mega-menu.tsx": "a118e74788b6084749ec20e8bfe324d7003e07769a993f068fbd470a540a35fe",
+    "src/blocks/mega-menu.types.ts": "056c81e1507dd1f5d81367831240d65ab35145bbed4c27783942ea38ae2b4930",
+    "src/blocks/metric-row.tsx": "774c50086a36394e59c438fd74516856f0adc0cde50e8b408d2a21156546e19c",
+    "src/blocks/metric-row.types.ts": "c8a47f76f9f1b94b436b68895e586a30f34201967c91159ef4e145169c291453",
+    "src/blocks/milestone-timeline.tsx": "1154d3532ebafbf8c2e5e65e7ce5141d379549a3eb57927b776e36ad14ed562a",
+    "src/blocks/milestone-timeline.types.ts": "e7da0209b4575401be48da09eefcbd48108936ddbc7e9ec4a939668b5387cc5e",
+    "src/blocks/nav-bar.tsx": "da4348ec9bd57ca4159617015ca87a335ed46d6634df87976f651f00f5d42bbe",
+    "src/blocks/nav-bar.types.ts": "c54bfbd53c3506a21507761b00fb5ba26e5a27339a8809c2a8a72277685392db",
+    "src/blocks/newsletter-form.tsx": "aaa139e5604b2563d68d5a58fee5dbd96204c59e4dc37afe5093caeb4447ba01",
+    "src/blocks/order-summary.tsx": "729d928414528208ff45f1170ffa0e18ed831056064f7c1b48e792e7aa720412",
+    "src/blocks/order-summary.types.ts": "74280d6614841969b7bf18cf17b4f2795a35204a2c46f9da5c9a6789fa3694f9",
+    "src/blocks/order-table.tsx": "7ccbf64f43451d597b1135c946596ac54c7d250e4357a4965d3d506906cc0995",
+    "src/blocks/order-table.types.ts": "efcdf8babc0e087fc5d1061a8e9a2cfb4d5eee5aa3105f1ad8050c49cd344a8a",
+    "src/blocks/page-intro.tsx": "11272823f16b1c00cfdeb2dc90747a4c93989b1113e3c65f032ce8265a4c277f",
+    "src/blocks/page-trail.tsx": "5e324966c5a27a1c48e553fe26cf809d131686d5bf38a4cb66fa6bc0171c14c0",
+    "src/blocks/page-trail.types.ts": "4e2a680642da4de46d56aa5ce55df4a8540d4338f24f400705239389051bd668",
+    "src/blocks/photo-gallery.tsx": "887f6a36a8908a98d64d1a4ee5fe08179f24063f101ea23dbcdf9fc09c9a0494",
+    "src/blocks/photo-gallery.types.ts": "06a2f0c9e2a4d77d0c3c6a4bc7c3c797dcbe9cbe8e0017fdcac1a8f74aa35691",
+    "src/blocks/post-card.tsx": "a2e4335b2f33d001ab65c67a9a76f586b2fa37ab2d60a23ea115de86499aba65",
+    "src/blocks/post-card.types.ts": "17585f000ffbfcb2ebb30cd4030899fc7dcd6a85f1d9a33f4c9646a9e8f369e8",
+    "src/blocks/post-grid.tsx": "f9b5c7fc0ed920661b553a910102c0d5e4b7c95edb4b445561e3b95c9767a665",
+    "src/blocks/post-grid.types.ts": "7dad1d7843814dfe72ad2a4f80f16614bdc787da85b942a351b8f15aad0aeac9",
+    "src/blocks/post-header.tsx": "5e29bbe1aa3c56dc2aeee2a48ec1bcb53aacbf0d0bf7abc8b8ca85f088d0efd9",
+    "src/blocks/post-showcase.tsx": "bd86b21f53193c6b329f3aa074ea4a20fcdb79dcd42c4754832cf9be3eacffee",
+    "src/blocks/post-split.tsx": "8e67fa8967d92b741a2fb1fca78f3564a91db8270437479925593bfa11d27232",
+    "src/blocks/post-split.types.ts": "1ef646f6acfd44b81113d9c95799b72886428adcdfdece02a67ded6cf0ec062e",
+    "src/blocks/pricing-card.tsx": "660479cfc2a306ea46def5e558b9ac9f666259f0ed6f647b9cea8ece652454ac",
+    "src/blocks/pricing-card.types.ts": "6e0720cdd9a01ca9af210bd354adac7a32ee6ba76b36cb66f1c606562a97b724",
+    "src/blocks/pricing-tiers.tsx": "9025af686d1b3c657749d8979848805c69320ff381371b565f0c8a3793004d47",
+    "src/blocks/pricing-tiers.types.ts": "2324239330289603a8f69517dbe4ed428aad4d2c0e977e2baa6735fc8aa67fc6",
+    "src/blocks/product-card.tsx": "df41430c98c31b22feb51b6623df4b6fc0ecc32ab26d4d7aed93bdff3743dd16",
+    "src/blocks/product-card.types.ts": "8ed73709c2c62c3ccbaf3cee633a95cff31e435a6a375ccab83e9ecdfe9a1288",
+    "src/blocks/product-detail.tsx": "2103d046ea7029b1a24272389a276aa2e77703e26cf043240d7a996a96522605",
+    "src/blocks/product-detail.types.ts": "21523dab2a3ee82e5bf0dc3a5df1b68dd1b61bd0440dbc6da8b5b5ee530fea47",
+    "src/blocks/product-grid.tsx": "786dfc4f692aac64989fdb1e5991398535b28c8eb980f58882ebaa7fccc9a6fc",
+    "src/blocks/product-info.tsx": "143ad71c61ce17e2c8bf60fbadf1bfcf8714df97824d07c1f0901eb8c9f0ae2d",
+    "src/blocks/product-info.types.ts": "4da7062abf71c18b01e41b430464c5a22660b97d14106dce7ddb4b217ca9a55e",
+    "src/blocks/profile-form.tsx": "cee20eed12d2ef441939eed21550a4acefe3a2d7876296493230ac74083c9c05",
+    "src/blocks/profile-form.types.ts": "b7d90d69db86b26ce9fecaf7f0c9f3df70ef45a59399afbeffca26a03d72adc2",
+    "src/blocks/project-grid.tsx": "a16ba1fe00077c5c7f6f97f83beb37a33e8f9d22e1bab5cdbaf6b06ef3952fd7",
+    "src/blocks/project-grid.types.ts": "6c8d59fe2a056fab97bcfb6ba3aeebc3b2c13a315e83c6e8b8dd05df25ec71d4",
+    "src/blocks/proof-band.tsx": "80ffa1959522e69d99c21dcf43ae044d602dc2f8dd6d0db10ce46e52842066fe",
+    "src/blocks/quote-split.tsx": "235ac700412845e499674e767263a6149e638e2b8def80395879a7640209b1e8",
+    "src/blocks/quote-split.types.ts": "e611ebc9a576b69ae085e5d6203027dfefbbef21fa6f0e832e57247248285c17",
+    "src/blocks/review-list.tsx": "6026bc09c02f2625f9fdbd13c466782a1b38256e7d2a99903d1d5c7eaf34b485",
+    "src/blocks/review-list.types.ts": "a28ccf74c9890c239c529dfc565865ac5ea34169d62de056d9bfc7e23b444fe4",
+    "src/blocks/shopping-cart.tsx": "49a7829b95cd45d76f7475fa6ac06c49da428716bee5a4cd6e61ea998d066f71",
+    "src/blocks/shopping-cart.types.ts": "718d0b0ce29007dd7644fe2f2a9c6bba962829b308707c349712f2d9eb0457f6",
+    "src/blocks/sidebar-nav.tsx": "d9220aac99052520f214d0dea527ef86502396481e245a21ea735cb0a0893556",
+    "src/blocks/signup-wizard.tsx": "3d39a06f0a8167458a90271fd1a7b57dbb6644055b280149d5c4b956aaaeb620",
+    "src/blocks/signup-wizard.types.ts": "71456087f84eac60a95b460ed4e2b1ccf4572f5654a9dad8162ec2163aca635a",
+    "src/blocks/site-footer.tsx": "8141376e1716c0524515009b1c3628e0e4eeddd9955ec41f73198ed227c57cac",
+    "src/blocks/site-footer.types.ts": "3e1c4727ab0cbd891dd743e0278d5980cc2259145569cbd52a0389fcc5f36118",
+    "src/blocks/site-header.tsx": "8d400b72078e45a26627bad414664f697c42972370bc0ff970313f81a781ef26",
+    "src/blocks/site-header.types.ts": "a8a9c8f7fd15951ab74c5ca467bc07f77adc3eadd0422c80ec53ef1139376dfb",
+    "src/blocks/sitemap-footer.tsx": "3a90f10a2a1fc318ea450624699694e2827d4ac318052a949db6ae933f30cb5b",
+    "src/blocks/sitemap-footer.types.ts": "810cac7677786b3379073275c2823a147aba8f8a95531e4bf201ad4a1507d5be",
+    "src/blocks/skeleton-layout.tsx": "b0e8a0ca978f7329d87fe5f259d988b769aab2010b86a8910fbe98bc76a73b89",
+    "src/blocks/skeleton-layout.types.ts": "5d96e19b1711d3c8e1163ddc2a5ef2ff4f980d494da87e9809e89428394bd50c",
+    "src/blocks/slot-board.tsx": "16eed1c47320593c00f9501a3585dd30b45c94fd98dfc599934ff893b101a9b1",
+    "src/blocks/slot-board.types.ts": "3542f55416cc63bcd15544d50021bc1a9401c02fd384479c6a38e2556499be20",
+    "src/blocks/stats-band.tsx": "6f0be71ce724aaeb925f0f32275093b6cef479aa49fa2a2fb3fbc167ba3ff545",
+    "src/blocks/stats-band.types.ts": "47a7a6fb525314d9e1ba9d01d2f2bf59293f3902f79c07cb3773369e93a35f22",
+    "src/blocks/stepper.tsx": "604563d4493ec3d4fd7a286a2040b7b8dfd1992a4a8ad71fdce7b10d0031af36",
+    "src/blocks/steps-list.tsx": "55707af3ae8a50fdb9658b14a654554f8713ab9bb8e9bbed2c5d19bc3c88702e",
+    "src/blocks/steps-list.types.ts": "911950b03bc28b244429c33f3628506c8270e97810c3a81f3305efeaf2221de2",
+    "src/blocks/store-hero.tsx": "ca006cb38dc5533664d80c6337e8681b84da2a03c8e41494a41d7d246b780ad4",
+    "src/blocks/store-hero.types.ts": "cd6a768d92420bcb4caf45611520829aefd27a254ac182a7c22c3e5902016bde",
+    "src/blocks/store-locations.tsx": "bee2ced9009b4166f125e75d5a1a909793028823d0e47781d9f69463eeb7fb50",
+    "src/blocks/store-locations.types.ts": "3fe37417236992ca8bb8197431573805d1f625437b9568aedda65421fdb5fdbc",
+    "src/blocks/story-tabs.tsx": "2921dffed8b0807a07ef1d1aef2cf762c2a051b335da7a962cdaeafe65bb10d8",
+    "src/blocks/story-tabs.types.ts": "4db25e3132fdf612777817e64e85821ae502041f19dc29ae0bcd8f36901d1fde",
+    "src/blocks/support-channels.tsx": "4be3f1eccb4c579dd7174878c50b5fcc1c47f5dddf6de85a86c34ca8030e8298",
+    "src/blocks/team-grid.tsx": "20cac77955741ca2405aba56230e1484549b814416b292466a8d8ee129b59a88",
+    "src/blocks/team-grid.types.ts": "fe4f0431e5c1408e1cc0a0efd2b7e23dd19f673870c03b2296b0a9cf07b0b402",
+    "src/blocks/template-grid.tsx": "92a31916d9e5f6fd0a2643c36e28d9d9785462f5038423db532a9bb249a94436",
+    "src/blocks/template-grid.types.ts": "74ba85f8930eeea9a528590f89c9b865ef761d38c4f59dcbd909ef2df44bfd36",
+    "src/blocks/testimonial-grid.tsx": "66a5f306090597e646310edce146425a81ab8560ef9dbea12c4eebbc4ff3f1f5",
+    "src/blocks/testimonial-grid.types.ts": "1cbc644c6de4f3887c0be522a2a2aab67bdbf3bd276647739342b02adf150ec5",
+    "src/blocks/tour-callout.tsx": "ba449b5eb72a410aa357cbbc00fa11a8932d3e5bb6bcd96e0f9e932c998e230f",
+    "src/blocks/usage-calculator.tsx": "de8ea479b912ee74ada14d8da2a3bb63f19693c5a1a9ebc4c4d2ee5ab4ba534e",
+    "src/blocks/usage-calculator.types.ts": "d91f83ab20faba37f20698f41c85b0dce74b79ec0781fb405694969992b17959",
+    "src/blocks/usp-strip.tsx": "86e95f33e26bf65dae323eff467d9447e26a35be642ae1c81c09975e87fd0dbe",
+    "src/blocks/video-grid.tsx": "50d3a9bc57f894a755d8f3c8ea9b490b0dbba804a42ba9d4f64ba53d1fbcb834",
+    "src/blocks/video-modal.tsx": "19d137ad9fd2d51ec22d427613717e8d4d26e426b7e949790a5a29e9c15e7edd",
+    "src/blocks/video-modal.types.ts": "41b6aad69f119ffc067056ecfe57c599c039e10ea7c1e527a59dd7702ebfa1d8",
+    "src/blocks/zone-table.tsx": "15b3be3f167f4d41069a61a0fc40f74ab99e19e3869821372757df5871550ab3",
+    "src/blocks/zone-table.types.ts": "125c440eebe964662ad3468ef8101d7a186e650a003f72ee8318890e73da0433",
+    "src/components/action-group.tsx": "776ec42c5c0e656e995415a13c3672979258c47cb41726a8d7dcf6fd3aae9ddf",
+    "src/components/app-main.tsx": "ebce4c0f9a17d3b6dab3ea5e5d8bce336280150d19115cf4888bedaee8e8b2fe",
+    "src/components/article-block.tsx": "3bc6a1ba301d00730d4fc0f1b487ffdb2cf4b908510583d03a8aa79f7b8729f8",
+    "src/components/auth-form.tsx": "aa7fb1a7b5d11f75d111136a411b8716e6c738e87ddc91487a8117f91ca5ec8e",
+    "src/components/avatar.tsx": "ffb45c443a7bf46e3193875e790a781e6d4022611f2ad03f395b897fb6e7c242",
+    "src/components/backdrop.tsx": "795c6974336a0cc9cdf32ee7fe6829124c3c3b21dc365587654561357a12cec6",
+    "src/components/badge-square.tsx": "3d3f88047461842a4c7923aee7dc5aecdf584e51cc2b64b88dca7b036e4d12fe",
+    "src/components/bar-chart.tsx": "34ca6130be449ae20887f61911fbc93c2f21bd7322f0401a896ae0d188599e4b",
+    "src/components/bar-chart.types.ts": "968416cb2b20a1101e3285ac5f534150482d02787c24680cbdf1d6bd31f20c84",
+    "src/components/bulk-bar.tsx": "a6a95fb83329a8c9686665d11649f92853186f96ad87d398b86d3cbcb85a2e2e",
+    "src/components/cart-summary-card.tsx": "1efd105ef9f070ce233b7614352beecf64d40a975cbe6e1fa71d87759fcfa65c",
+    "src/components/cart-summary-card.types.ts": "5601fea020f5b34cdbd26b937dea1200da0a74817e5fb964789f19e2a5d3c0bf",
+    "src/components/cart-table.tsx": "2e53accf3c4e344c10cd20491ff1cbe25e61c8f83ea0839258b8ff5136d65947",
+    "src/components/checkout-step.tsx": "5768cdeafb4322e540ab5f985dcf686fc1df708de98cc30c2d50d8e4852a2ceb",
+    "src/components/checkout-submit.tsx": "492cd22416064642f2200c575ffb4fe93459e53e24bb9b734c8f7cd66fefbc21",
+    "src/components/code-window.tsx": "21b15ffc84f923f44c083f03f131ada4a1fea96fdfc7f6e13cbb0e2f222e89d5",
+    "src/components/code-window.types.ts": "7ccd99c880b4b6335243f2a94d69984a0f70dff47a8c21750714ff09675187e3",
+    "src/components/compare-mark.tsx": "1e7b8c1fbcdf57134ae1d366f122a45815fb7f09c2cff818af2a93a3f3d10aca",
+    "src/components/cta-actions.tsx": "1dcb22f04d9ec3ff1d97d86a16aa241f17e1ed11345ea4f8ccc255b48690f1a7",
+    "src/components/cta-actions.types.ts": "46940268f998167e911b3f9e625d8cfa289aa47863e1ae5f45b64fa0292c1f5a",
+    "src/components/cta-proof-items.tsx": "18d263c403442869eb5a24bc1315bb3ca5c3b86c3ecb6f8664897cdb1ba7fa14",
+    "src/components/drawer-lines.tsx": "67976b612b17165ab70719e7d6c7a8816ac0f2f1dee90f75b1915f7af025f9ed",
+    "src/components/dropdown-item.tsx": "77bb570eec8eabaea6fd490c01ded610579f93c96e8ae0fee40ea33254b95fb8",
+    "src/components/editor-tab.tsx": "468522eb30de063488214bb2265bdb0510b20c3a3975fec981984e52d44b724c",
+    "src/components/empty-state.tsx": "febf27d6ed25208c97e50442999db50d9e6315f849215b8808d8dce9ed763053",
+    "src/components/faq-cards.tsx": "8509dfccc6c55cf899959af7d6f97d3378a3902e2c6794c16839beae3fc299e0",
+    "src/components/faq-disclosures.tsx": "e90860caf4d568f85673ae8b5c5bdbdc7d3365a8920c7a61dee66583fede5267",
+    "src/components/faq-finder.tsx": "e8e42af37bc9b126baa22ac34928a67fe4c5c20cbf4a4cc813509ecfb3af7ec9",
+    "src/components/faq-help.tsx": "d5d2b2aa661c6dc4a9399ad4862fe9916e14e05a5facaf003c854a3de98469b7",
+    "src/components/feature-cards.tsx": "49189b5a2c385bf9d5381807f496be08621a4af093d01883c962a7fd4b6ae983",
+    "src/components/feature-metric-cards.tsx": "0d2d9ebca30392ad790cd3baf24477c81c01e356bb6bbca1aa53849099c0334f",
+    "src/components/feature-pairs.tsx": "7a9046fb9780730e427864bafc59cea12f9b703f9ec8dbaa8c91d898d98806a5",
+    "src/components/feature-rows.tsx": "dbb0b256fe087c027b142a2dec6f4fdd3514b1c50634ffe6daaf67cca2585762",
+    "src/components/feature-stat-rows.tsx": "e467f8bc33ffc472f9e18e3af2fcdbaf85935e900231768dc20573f3646ceaca",
+    "src/components/field.tsx": "b50491774ae27c09a162b4d8d187a3934f8cf3761f484e5dc6d821802c93a4bd",
+    "src/components/figure-block.tsx": "5f433658c72e839add06cfad96172ff0ec4763c9760aeaf3be42d65fd2d16e06",
+    "src/components/file-tree-item.tsx": "9179b60ba5341576cc0dc45e0fac5a604de256c520f538826a89405a12819cc6",
+    "src/components/file-tree.tsx": "c3bda2c0fdf42fb7fbb78a4830e2fe78b9c41a00ac88d2b24c0c949a8915b809",
+    "src/components/footer-brand.tsx": "42c135b8cd8449c69b34443aa0c7d54f8466e38c96868ade79e957075e2e2343",
+    "src/components/footer-card.tsx": "78440f4515e5931ff873b382a1188bb713ba96e2fffb38918c1ae338a949f8b6",
+    "src/components/footer-channels.tsx": "901fc8d2b2d4e13ba4b6874fc0e9b9d9d9ae419faa4693695551efec809e4e05",
+    "src/components/footer-columns.tsx": "b2052625e90809c5f5b589b3bfd5154b3dfa72c4e388a5e959dd6fb5f4a8f0a4",
+    "src/components/footer-contacts.tsx": "5f3dc2e9ca1b7425b101dcced24598a0b01660b9bcf553728f99f4f8e64d3208",
+    "src/components/footer-figures.tsx": "3fa6c545ed96948481284d7f57ca0fe73d9c0fafd0153441f94740aa585c02ae",
+    "src/components/footer-group-cards.tsx": "4d2546448bae556a3ddede5a6eedac82ca5047846ee56e4bc7743e69ee7bd74e",
+    "src/components/footer-link-columns.tsx": "a755150907a599e885ebcdeb77b125890e35e5c74a2ff498ea8f3160d5ba17fd",
+    "src/components/footer-points.tsx": "defcc2f9e7af8c7aefc4865e00cc8ebed859c4b54d837bb334bfaa5f1a1c475f",
+    "src/components/footer-signup-card.tsx": "bd26a971f32ca93c1ea0d552d4642aa44a9bf9fbf4b10c3a5e18fecb006daa1c",
+    "src/components/footer-sitemap.tsx": "8538a9516badae17aecaa8e1175df08cff60bacdca6e2a42020541f8179c84df",
+    "src/components/hero-badge.tsx": "357d1ed02a37c02a4fde8fb77f7118d75e1e7a39d672c9612783224fa7d3a95c",
+    "src/components/hero-head.tsx": "5c1d454a69786087c6ff8a1e8d17b0dd4bb5b3e7a0b03a167a444034afe08df9",
+    "src/components/hero-split-extras.tsx": "6546346a0b4b995debd0bd896fec595487c7cb5c325c46c4f7da436f9be6323e",
+    "src/components/hero-split-media.tsx": "06c127895a71b5b79673c657f2e6cebb0e7b4a4329949677564cb946dd4c4e5e",
+    "src/components/icon-tab.tsx": "b79183711ac99a916714b2dd27ba132c7488b73f554e545275e455adc027b0f6",
+    "src/components/icon-tabs.tsx": "44257cdd9638219b117827c5461210d109e59621dfd71087bc68fd5052027cff",
+    "src/components/job-cards.tsx": "4171a3bb0cd468c859426208a1768551088feaf2acf63aa2ff1c3282f01c5dca",
+    "src/components/logo-sidebar.tsx": "57d4dac82579610f5194ecbcdaec508d71b9632723938e5ab5cea65fefb32047",
+    "src/components/logo-slot.tsx": "9bbe6921a45f279de918f0c7c09d0271e95e401c51dddcf25df0992e95f7153a",
+    "src/components/media-contacts.tsx": "6c2ef971a7de988742d2735a9c1b73d0a3637052ebc16b092e1282d0efb1e7f3",
+    "src/components/media-figures.tsx": "18a05edf0decaeecf9d5c4439fc0fcae683a218356b709af3c3276473877c344",
+    "src/components/media-frame.assets.ts": "fe55210352e1184f2ef9109e52fae0e862a04d337c4abaa521c73b966d2cf7a1",
+    "src/components/media-frame.tsx": "ddf1ccee3fbbdb98a2a1ebb21e83df3dfc9a78aba67300fd0a2f0e65b7a34c42",
+    "src/components/media-posts.tsx": "f8d950e80b609b9641a7e477062cd7492e661c16ea720ec4f37bace1d30a9526",
+    "src/components/media-review.tsx": "d1249097f58fa247e2f9145a15a2705d94878bc8c2b6f469a35f165d300f606c",
+    "src/components/media-steps.tsx": "ddfc9a68c36e9cfc141182c1ed9951a57479a0931a15ce2502897d1126cb5311",
+    "src/components/media-topics.tsx": "ffdf8f5d262e0aeadabf792f6959a38d20800a78ec1a0d101186965a852696ff",
+    "src/components/member-row.tsx": "e0556ea64af5284c5d29773adb572541f57725fe8ecfaf3f4d62830cd849c9b2",
+    "src/components/menu-entry.tsx": "f5889ab0fb2dec4d212bb682f1d7074d4017dab105b7b18c209cfa1f5c7cfb70",
+    "src/components/meter-row.tsx": "bc23f31a2def292544c92399265a8ca99d11d1c2947a4ded68d3d3afbabd6a1b",
+    "src/components/nav-actions.tsx": "fa22c1c0faead03a6f6adfe93574003ba229ca4bcd0a8c5736811d9e6f53b54b",
+    "src/components/nav-bar-menu.tsx": "a7265243bfc5544d4a742e50755a4170d8c99905ff503d0db117f80ad7773329",
+    "src/components/nav-block.tsx": "871da4b44100db332e48a0b1d24838027d22e8b600f17f1d9589f2c0cbbf6755",
+    "src/components/nav-item-row.tsx": "d280ee9e206d3bc62e01054b406e5d71f51a9d493876dfb6ccb199e9c03973bc",
+    "src/components/nav-item.tsx": "a1cd4f8dc58341fa84d4374245b70b30e4894d38674c9600b868dfe2dc7eab38",
+    "src/components/nav-links.tsx": "23278594854c1bd57f7e1f2aed1fc61bbafcee85cf568fa140cdc22f6b06260f",
+    "src/components/notice.tsx": "52bd35218354a7efae72134b5a778c5881eb15763f41109af426e20034feec22",
+    "src/components/number-field.tsx": "d1681a707de0afec40f6dabc60f03966daba133b7fe7d1799b7dcbd300bb1596",
+    "src/components/offer-media.tsx": "63915d17b3702badcc6cacdb76c33c7edde454abc5d9b88936779a0b0e977187",
+    "src/components/order-rows.tsx": "1a163922fd61dc69cac3b6af7ff14c20086eceac706d4a0d496a444faaefe444",
+    "src/components/over-media.tsx": "9c730a13f8b3bbc0281c43771a15582cad891793d7e6e5eceef08869671c56ad",
+    "src/components/page-aside.tsx": "0d77c4b6a48877fe7c1a583831451c86de24a781b9c130c41d3c9b9d79b41638",
+    "src/components/page-crumbs.tsx": "1b3a5c0b7aa02f907b348007b72140e812664724c1b2d5b0532a5d00517e3315",
+    "src/components/page-header.tsx": "4fedb9cb9bf21e271d328b104ced20e19d92c984a057ae33987c18c47d1108b9",
+    "src/components/pager.tsx": "c86d2e1c1a76f912be23ccd501b8bff6775bb2d365ce34410efacfff7204ead1",
+    "src/components/panel.tsx": "1e22655cd7be31b59db04500ce0924544832253bbf6c85e698f4cd40e947d8cd",
+    "src/components/payment-options.tsx": "b6674b1a3e891f6261d3af422ef120dd6a3dd16dcf83494ba3afd7eaff763329",
+    "src/components/payment-options.types.ts": "d73a1783fd536ff758a76642351532b0783a8e69e372d42e8be7200c5099d08a",
+    "src/components/pill.tsx": "18daa258f4145dd7864041b62aa50e83bd91357dae5cf5bc01ce681440c39134",
+    "src/components/post-actions.tsx": "4a1e0556426a46a4162ecec869de1b4756a214f3d1289e7de1c82c5c0fb73734",
+    "src/components/post-author.tsx": "892f8e8690f5da9212d306bc518bc17cf721df37f4122838edbe282c9feb2dc7",
+    "src/components/post-feature.tsx": "ac8878755f1775574833f8b1922b2427175d97efe5e5ac5f139c39cd9ca84e2f",
+    "src/components/post-mini-card.tsx": "439c5cf8789394ee3779afe50c81d56da8214f45ec55912387a40a64dab93704",
+    "src/components/post-outline.tsx": "3ef44b647c08ab4aeab2d7f54b509d5ba653d0849775f9b4e81882a31a32bafc",
+    "src/components/post-overlay-card.tsx": "06a11e3afa21947a83c00be39d9140d6049a2d79d56115c2974fc00f7b916565",
+    "src/components/post-stats.tsx": "6c5c70d2c01010b7f0b15166e2a830e33da89dcb1b66077fcb214250de869a0f",
+    "src/components/post-tags.tsx": "2df6682943fc396c811a6ab3335dbe474d5d9c62ae736074f837479ba8ab0452",
+    "src/components/product-gallery.tsx": "3fe95483f8e77d5705a767aebd4eafff548500029a2d0920071688022f900ffc",
+    "src/components/product-price.tsx": "3e7642fab43b02133934f3013f6f083032347ea7b5b6c97a1444de99d3509c69",
+    "src/components/project-tiles.tsx": "12b8919e5b27fceb9efc321c9222f8b3ffbbbde03d7d4581b167b050a4db065b",
+    "src/components/prompt-composer.tsx": "3f21bc190cefa1a68d5af4942bc56eff4f834bddbacd751598e75d5148d44870",
+    "src/components/quote-card.tsx": "2af62862ff4ef08904d5102e418bb614efd552711c61b98832f18d6bba5d3930",
+    "src/components/quote-figures.tsx": "079844e63273a33f7bd76490a5a7b0f31d1e402929033ff22ff634f56029977f",
+    "src/components/quote-logo-tiles.tsx": "7856eebd53b55af118d9706da0c386f73019eb8fb69af1e7dbe3a295cf15668f",
+    "src/components/quote-proof.tsx": "a1b18dcd416061f3cac576471401cff0ee88552ba9d8b58f2687e9272e3b36f0",
+    "src/components/quote-rating-panel.tsx": "6e7e0eea8aca7ac0d77a65fd29f80dcf7de21865d22f7bbbd9ae7565aeb0de78",
+    "src/components/quote-slot.tsx": "0c2ff73e90e4ebd11136e64b03f176ffce67e69b441437288c58b31792aee6da",
+    "src/components/range-field.tsx": "6534b386e0294a3f1a8ea8d557933f5806673d17c7f89d0711d9694c3e8aabfe",
+    "src/components/rating.tsx": "8cac4ad40aab38d5ff42385c11e756ffa9e303a40110d3629cf1ccc4357a9116",
+    "src/components/region.tsx": "9d1cdab98f9d7c03763571f572b75721ae791147847a17f2bf4ca04463779070",
+    "src/components/search-field.tsx": "ced3c8335201d6b4d7e29bb0f09a9ac0ae8f87ea616d59f8002beff49cf57348",
+    "src/components/search-palette.tsx": "6530e5bc2e8865375aa7fc01f307a311869c5b67c3ef454666c357963c29e104",
+    "src/components/section-box.tsx": "eeeaad60bb9412e9f22be16df642f565dda8d95fddb211b38529e23b51fe774c",
+    "src/components/section-column.tsx": "c47f8146978797b6822f6b6268376f7e39a953d6d9db84df80ffd83bdb9e509e",
+    "src/components/section-frame.tsx": "92e659e9f4c79462afab23985c54532070b986d86430008cceef52b6688b891d",
+    "src/components/section-frame.types.ts": "d65a75d32577bc988045d002342eb28412a47fe880cb85c0f9fca3806354f11c",
+    "src/components/section-head.tsx": "e523357b6322ffa60f89415abf672f735bba85b5c300d7978923044d90129598",
+    "src/components/section-header.tsx": "b22dc7a27b7077be46266e735bc7a12da44a0fe20239b191e3b6f87dc7793aba",
+    "src/components/shell-content.tsx": "aec5ae522a2666c47504198baa81651b66e3026e63aa4c11dd2fb19b7ad82a24",
+    "src/components/shell-footer.tsx": "39bfa74a511ac6f9853dbcbfc8338cd2d6f0e8cdf14e2443287f075dd57ec24c",
+    "src/components/shell-sidebar.tsx": "961d9530f7fe819c14e21396a2d3d038f1a0ab5579168939edead97c2d5a0cc3",
+    "src/components/shell-topbar.tsx": "47f4e3b55924b3dc520d42b825d77d83b1a8ce37a4b64c1c7d38acd3546fd7c7",
+    "src/components/sidebar-panel.tsx": "8c5ab9a9542d017eeed8e11dd2b3e8f60fe569bcefe040813341c65ee1fc3d09",
+    "src/components/slot-grid.tsx": "879e564a1a51af88c65c3c37714678bd9296ceeec3a7988d1eb7ba5377f2f228",
+    "src/components/slot-grid.types.ts": "dbfbdc87d0bb8b62513e901d0aefd48d554b0532fd683b34605b5b47e100d1a0",
+    "src/components/stat-figure.tsx": "74bbe38003350b9cf217929f7b52cd623853a5209536d746b137d7cbe8d95129",
+    "src/components/stat-tile.tsx": "c27fe16f8112cb976bf7a430825f1774ce90fce6e119ba0a94c7845a58f5c671",
+    "src/components/story-dots.tsx": "11a1e4f0cf5c7dde05c48645a1337330570ad0f6989d17fa491cbb1995b76895",
+    "src/components/story-panel.tsx": "68973207d9928a491539479773f8aa2afd5708e8c4188232b28377f247e10b7f",
+    "src/components/switcher-item.tsx": "d6bd1be1898b6a466bae7c15917708654450af15d91e30b46e45fb8f225b0081",
+    "src/components/switcher.tsx": "11bcba5d4a6b8c6e94515881b11d199dafa4cbfe0383fd19249bfc8ac6af095d",
+    "src/components/table-toolbar.tsx": "f6b0fa55c49549098df1a12483b8438f431de5617d72d7db01af4c6be04b9947",
+    "src/components/timeline.tsx": "7a6f0e48edfea8b8b6558f39edea19e52082fcfe182d1fec27de8d030f84b4a4",
+    "src/components/timeline.types.ts": "2f1b0a9d5471f486efc6a86921b52143867da2a4d36963d84c9cbf77332316b1",
+    "src/components/topic-chips.tsx": "46a2a8924c06d96e311ae88c05c919d94c223156b8e01530b991a176416de07c",
+    "src/components/topic-chips.types.ts": "04d234613b49a81b216e8913c294ba6d11aec58f17bc49580793347d39149ec3",
+    "src/components/weighted-title.tsx": "455e21aefa02c3d0273a6b112cccd896cf8c4228ef9ab18dae756be397fb53ce",
+    "src/components/zone-rows.tsx": "e5e8f3e9d878e697c5bda9d48f164eb639e6a80baa53f088811728ac6beafc78",
+    "src/index.ts": "c18524ab068a82cb00aa2aee2930400e72f36d5d4586da52f48b43e1d66b9db3",
+    "src/presets/defaults.ts": "0f8d491e02d5cbad4b3e324239b780ed1b8dd6acdfe1c3fdeb87295167a94f51",
+    "src/primitives/alert/alert.tsx": "47716deee77e3ed37d986d5546e29558bfa3e33fab79bdff23b4d1a7a2ec157f",
+    "src/primitives/badge/badge.tsx": "93a17386bbc13c5d4ec154da4914cd53d93bd6934d93ad40e4dea20b1dc6dc32",
+    "src/primitives/block/block.tsx": "4d02cf4d2471e19c119f133c871b0abed2bc57a55f3f3138b8f6884830200f2d",
+    "src/primitives/box/box.tsx": "29c0d8256db25708ea4d8888a6bb595663f94699fc6b3c65aede5cc18db38dc7",
+    "src/primitives/breadcrumb/breadcrumb.tsx": "2aa456c1bee96b3f096cc404f3aaf14745eedad32fadf85be731186abc2664ff",
+    "src/primitives/button-plain/button-plain.tsx": "94ec66b10dce6a0288c70acd6eaf9109738aa57ee9f950926c53d6c318c57971",
+    "src/primitives/button/button.tsx": "488bae3c2109d03b916a8d933c1c2714afb8c9e9c851b14315a56071599564a4",
+    "src/primitives/card/card-content.tsx": "0851c449ba9c6e1fc9b1b47970f24793e735666035976439a8b6bda343e90a6e",
+    "src/primitives/card/card-description.tsx": "0a508cc0d9aa1e99b6e8fdf13ca576de5b542e020607f9e8526d18c670ef4f54",
+    "src/primitives/card/card-footer.tsx": "a7ea17f7307827e610fdb21139baa0d698483eeff0e0ce7a092ba8d5f5f0773e",
+    "src/primitives/card/card-header.tsx": "121213a0ef92dcc4569d3639a1087651bf34f04be73da9b4239f525f419d2046",
+    "src/primitives/card/card-title.tsx": "8791c2c17d374b17fdcfc1b9104f4be6a975c44ec7993a5e40ef0442e2e3a33c",
+    "src/primitives/card/card.tsx": "b3712e991731d44b728dc4893e68e2e850059d4442138325046aa360ce5cfe54",
+    "src/primitives/checkbox/checkbox.tsx": "f744969db538771b4f6ba29d53173c2b6b28e09e06ac02983b58341f9b175c58",
+    "src/primitives/container/container.tsx": "2e01914c8f1123debc8d6e4c22fc2a22503123d70505bfe6a513710c8a1a2b73",
+    "src/primitives/dialog/dialog.tsx": "bcf08ee69ee9a465b503d38b2870b2a2cb3bd47371e1b55b22c378ace3bd5379",
+    "src/primitives/disclosure/disclosure.tsx": "bad9822add0e721ec71304c12335b9b1a589e31837f49de7263ba64c85f4198c",
+    "src/primitives/disclosure/summary.tsx": "3449498cd39f9383f72fea65a58d585e0d732475b4de54391b86636c8010ab99",
+    "src/primitives/form/data-list.tsx": "dcf86ec89373e0dea51cc6f76d099ced69524b419ca1dc9b6c9fe846e083016e",
+    "src/primitives/form/data-option.tsx": "7a90bbee6653066abc6af4abf16b6c6f7e774d65d6513a39157254d5943d27fb",
+    "src/primitives/form/fieldset.tsx": "8ee079e99267ca3ffb576f5c0fc8dc05619f6326d97cbe20af33c80dbc1712d8",
+    "src/primitives/form/form-description.tsx": "9dca5438c0d0b5f7c8eea2a6da060f976348aab06eba6edacb567a77b49f2023",
+    "src/primitives/form/form-item.tsx": "74f73fa261507feb52578746921f00bf1f32a62b9d4466eb05f9d383f103c178",
+    "src/primitives/form/form-message.tsx": "b7c626fab144600bd9769455b219bffcbd39175ff2669e7ce98db2178c257949",
+    "src/primitives/form/form.tsx": "0ca976b7f4ee76df66c3131c1110766d3d7ec0dd7e6ddeccc950717a42af8841",
+    "src/primitives/form/legend.tsx": "b4ad3cc00e958f9774a76c9662ca120c56a7a85de85fec4471443bfcbdde9410",
+    "src/primitives/form/meter.tsx": "485e9fac8d47ef56a692d49d9bc80b41ebe88cd04f12a819502007414fb1e257",
+    "src/primitives/form/output.tsx": "538ed26a72cff7b270c23e6a7caed1b0f18e778bf073ec9e7b9144a9011ea46c",
+    "src/primitives/form/progress.tsx": "ee39247f5ae1f086051f8f48c3b7dcc03e6febf67d6a82a7b237f6820d98f483",
+    "src/primitives/grid/grid-col.tsx": "64379633e28a49fde626aa5b0c4e874256540689dfc88dfdad4b1764087d904f",
+    "src/primitives/grid/grid.tsx": "aed802ced2bac597a30d758a5a1d06cfec1b2480c4feab55b90152facfda9fe0",
+    "src/primitives/group/group.tsx": "3ee04ee73b52de990d11c2506cf9ab702069fb3f3c4d05fd4d37f8f3384495e8",
+    "src/primitives/icon/icon.tsx": "b477e3f20dd55aeac0380aee9efc395a70b06f2f9f6f07669c064a787e130203",
+    "src/primitives/iconbadge/iconbadge.tsx": "0a54c2545e4efcc82dfb68d060fa61f7ff422e951d8fb9073181fa2f3ba7d65f",
+    "src/primitives/image/image.tsx": "bbe0489326173443f947685a90b7c66fabe53e02d1bc6a02790936641dcb1eab",
+    "src/primitives/image/picture.tsx": "3342b0ecf2480fef1fc8d5a8fac2882c51fc49f32f69c60ee2f91fce66c28731",
+    "src/primitives/image/source.tsx": "416f2bff4909b48991bf63e38dddee2e0fe7708942bf8dccd61aa0d92cde5392",
+    "src/primitives/inline/inline.tsx": "91d2c1dbef7b963416599cd927b677fd19567db4591a6534e00fd23f9b6e9ff7",
+    "src/primitives/input/input.tsx": "be438426a999d7bcc9709440793e53420e6864892f3c6b889c5887eefbc15e01",
+    "src/primitives/label/label.tsx": "130974b6cfa905d67df5d5e0097d9f426395fc564613cfed9d87689bf58377fb",
+    "src/primitives/linebreak/linebreak.tsx": "4d01354bd35045e9e9ea4d580dd3f33c7546ae8185e6705f7adec8d41f06d1ad",
+    "src/primitives/link-plain/link-plain.tsx": "59430280f7a6e5eb9ca62081696ab1d546cbecd13bcff016ee7928a6352f62a3",
+    "src/primitives/link/link.tsx": "179b960471d1fe0ff59fc23759fc72519b0e937aff0dd445e3c1c468ce983cf7",
+    "src/primitives/list/list-item.tsx": "678abf6d238ef457f9c78dfb3ddfde39727b4d35286ff917229306d494c698e1",
+    "src/primitives/list/list.tsx": "406478820f76cab2f940f0ab0a293992939acd97a8d3b49c5457e8ec543263c6",
+    "src/primitives/lucide-icon/lucide-icon.tsx": "ff64e4545dc9ab0e36391b3b13013d624b7e9ecb14a091085f481b6e2615289e",
+    "src/primitives/lucide-icon/lucide-icons.ts": "a05bb5050ccb7c015088a0c5061116aaa400a15b70f3c8a9f9ca2e4bdd2ddd84",
+    "src/primitives/radio/radio.tsx": "5660d161431c0e140eae3bd42733b27d98f87e26b17ddadcec15eab993343f56",
+    "src/primitives/range/range.tsx": "defacd4da4b5cf1f8b7cd6ceb9f18f0d9816d2834fd75f37a8c5cd7bc774621e",
+    "src/primitives/select/opt-group.tsx": "1af865941f68f35c23587d0c2c6b32ce7fbdbcf9800ed650ed22c1184d86e58e",
+    "src/primitives/select/select-option.tsx": "bc77417803deb1518ffe531091064003a9da71707d41c0431137fff1abe3adc9",
+    "src/primitives/select/select.tsx": "564e97d848990e97a64aaf107e7f7703e9096a6b000dfe83c824830ca09ad2a7",
+    "src/primitives/separator/separator.tsx": "9a474622a46f3c6ecd18d4c78e81591c8170104545acc28f7a5aaf4d5fd41c45",
+    "src/primitives/sheet/sheet-close.tsx": "1b7cb5e2be0471ecce2a75c33a887839b54582784bd97667f9c4811472f6de30",
+    "src/primitives/sheet/sheet-trigger.tsx": "4981b2f5bbca3fd6053fc33f4f6942fa525dcd882411b2312c5675456feb2446",
+    "src/primitives/sheet/sheet.tsx": "393c1a21ae6f697125e74acae3c05d963f35edcc3a4fad5f7533be6037e9aac4",
+    "src/primitives/skeleton/skeleton.tsx": "5a99323dd321587be1a1b459d75dbd4148a39475ed148fe92b87092cd8e6c357",
+    "src/primitives/stack/stack.tsx": "8f6de41228bb1322f7ed4e335a36c707848815db6f932011c02b19145674ca50",
+    "src/primitives/switch/switch.tsx": "66c42760c4ae95c7315a291c3e7fc034f1d6df0f3fc8320cfb15446eec742972",
+    "src/primitives/table/table-body.tsx": "82f66468f81f6e33975755be9e7e007fd932b397a52c46faec1c5342d762ef6d",
+    "src/primitives/table/table-caption.tsx": "1607d92da7535fc200e58ba2f86430b7567587d208fedd3edb70ddaf1e1f7d2b",
+    "src/primitives/table/table-cell.tsx": "aa3a030dc02e170097c4bd5f0a13b82062d29d2fc35082906958563eea16ba4f",
+    "src/primitives/table/table-col-group.tsx": "24c0fd74bba393fc03fc53450a648d559789023e61c148ded45f7ebbc2d84b75",
+    "src/primitives/table/table-col.tsx": "375a04a38cdb04017cf1e209b1f8c49f2d41001b96b12178a88f7388ff04b7c8",
+    "src/primitives/table/table-foot.tsx": "d879ad94146831208e43b036e4f693f921e94f1095257c728e34257ff5932bea",
+    "src/primitives/table/table-head-cell.tsx": "fb78368b311a8a913a6c21ed3cd9f0e83e7563007aa435ad73b079c83561d968",
+    "src/primitives/table/table-head.tsx": "c40b41994b6ebe49fecd12144940ced65aaa830d7b0f977be2b1a3a109004b73",
+    "src/primitives/table/table-row.tsx": "f43da78a86650f515f7fd76826bcc0617fccec94326ecde234ccb813f3c5013a",
+    "src/primitives/table/table.tsx": "dd4c1a9e6621f82df1584cc1a1a5d69fbc045faa29c99cdf20e96c69caef6f13",
+    "src/primitives/text/text.tsx": "a193b8cc923d01ed5e319863d02b00a183d2702ae675edf2ae647a2bb4a5324b",
+    "src/primitives/textarea/textarea.tsx": "4e5046d663c15fa97c000360f7dd86379cbdd08194d70c83cff0dd459fea23ec",
+    "src/primitives/themetoggle/themetoggle.tsx": "41cd971609f4c33d320e5e0cf4267c645c94d26b625b5e525c3a040e0f974f0a",
+    "src/primitives/title/title.tsx": "fa36bb8b3f33ce00c9a8c65a05fcf253748be07714b4b6e080af7384881fb6b5",
+    "src/styles/index.css": "faab415882b268aae6efcee8a1db1660f9c0db83fdd1fdf23b0a9fd07eb18e93",
+    "src/styles/kit.css": "61a0fcb6630cf5e9811af1d16acc75066c440998b362d5dd6e576d6033d8aa91",
+    "src/styles/theme.css": "7c7c42d778a4ecc5ad87aeddf6fefa651f7164c4a24a4c78de2583a9fdfc2897",
+    "src/utils/a11y/dismiss.ts": "4857c8d86154e03cce8666a4bee9f169b1912eb37ea617a50e0313af198eb4cd",
+    "src/utils/a11y/focus-trap.ts": "48192cd0da3f0e36da6f6270565e86474e09d86dc4939512c5f70197312495b6",
+    "src/utils/a11y/focusable.ts": "1c198ba33a0a28cd3fc60b3d0cde564724a0c8a763010cf5d5b1c5749aeea039",
+    "src/utils/a11y/index.ts": "3f75625517661a016eca02d8be226e9422df2278c61f9c22bbc97e6047e82f9c",
+    "src/utils/a11y/roving.ts": "c01c19f7ea3be4aabfcbd64b0ea7c2657f5845cbdb5ad88fb1f8079937c6b60b",
+    "src/utils/a11y/scroll-lock.ts": "857cf3ffb53ce2fec202fa74f43d8d0c8e088a06a42daa60fa9e076f5f9dd3aa",
+    "src/utils/cn.ts": "9a07c604362da93936b2e5efae3bcef078d4f3c158e8aabe65856706768dec3f",
+    "src/utils/env.ts": "9e846ba9d690cb22d4fffeb4976200727854c2657845baababf5e1864ec916b1",
+    "src/utils/expr.ts": "d69a9fae5a2ebc126e0aabcf5d5c09697cc91c4df3ed453edeb14fba2376a28e",
+    "src/utils/format.ts": "e1bafdc1408e2a68b58d1b520878ddb87f7cb626c45b5ca65869729bd7dfdb51",
+    "src/utils/index.ts": "11aa42b5489421a050b39364edba13c4490f8a660d150c97ad8b95bef39050c9",
+    "src/utils/tags.ts": "e1406704ec4c738b4c395a2603de2f4313681504b84232f0fffa1d3d48cb2a4d",
+    "src/utils/variants.ts": "f027b4237cb7058efda6bd627d9db07b1e22b59f30bf3d8590f13702e1dd6415",
+    "tsconfig.json": "c14143d0f87136a4c272fcfb81820e127c5a14d273a213ea95a7832f14caa0c0"
+  }
+}
diff --git a/packages/solid/ui/README.md b/packages/solid/ui/README.md
new file mode 100644
index 0000000..bea59e4
--- /dev/null
+++ b/packages/solid/ui/README.md
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/generator/src/readme.ts -->
+# @ui8kit/solid-ui
+
+SolidJS 1.9 package **generated** by xgen from `xgen/specs`: 40 bricks, 72 parts, 243 organism(s).
+
+Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`; `bun run check` fails when a file differs from what the specs produce.
+
+```ts
+import { Button, Card, PricingCard } from "@ui8kit/solid-ui";
+```
+
+Styles: `@import "@ui8kit/solid-ui/styles/index.css";` in the app CSS (Tailwind v4).
+
+The package has no build step. Text comes only through props; the organisms take their texts as `labels`.
+
+## Layout (shadcn style: three tiers, kebab-case files, PascalCase exports)
+
+```
+src/primitives/<name>/   one primitive per folder, the variant table at the top of the file (`buttonVariants = variants({...})`)
+src/components/          small compositions of primitives (media-frame.tsx, nav-item.tsx, ...)
+src/blocks/              page sections made of components (hero-section.tsx, logo-cloud.tsx, ...)
+src/presets/<kit>.ts     the only place for kit sizes (arbitrary Tailwind values)
+src/utils/               cn, variants (a cva clone), formatters
+src/index.ts             named re-exports, grouped by tier
+```
diff --git a/packages/solid/ui/package.json b/packages/solid/ui/package.json
new file mode 100644
index 0000000..9a1d7a9
--- /dev/null
+++ b/packages/solid/ui/package.json
@@ -0,0 +1,59 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "@ui8kit/solid-ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "SolidJS 1.9 primitives (40 bricks, 72 parts) and organisms, generated by xgen from xgen/specs. Source only, no build step: the consumer's Vite compiles it.",
+  "sideEffects": [
+    "*.css"
+  ],
+  "ui8kit": {
+    "runtime": "solid",
+    "generated": true,
+    "kit": [
+      "src/primitives",
+      "src/utils",
+      "src/styles"
+    ],
+    "composition": [
+      "src/blocks",
+      "src/components"
+    ],
+    "blockRoot": [
+      "src/blocks",
+      "src/components/faq-help.tsx",
+      "src/components/footer-card.tsx",
+      "src/components/hero-head.tsx",
+      "src/components/region.tsx",
+      "src/components/section-frame.tsx",
+      "src/components/shell-footer.tsx",
+      "src/components/shell-sidebar.tsx",
+      "src/components/shell-topbar.tsx",
+      "src/components/sidebar-panel.tsx"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles/*": "./src/styles/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "check": "tsc --noEmit -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0",
+    "tailwindcss": "^4.3.3"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "solid-js": "^1.9.0",
+    "typescript": "~6.0.2"
+  }
+}
diff --git a/packages/solid/ui/src/blocks/about-company.tsx b/packages/solid/ui/src/blocks/about-company.tsx
new file mode 100644
index 0000000..a13c310
--- /dev/null
+++ b/packages/solid/ui/src/blocks/about-company.tsx
@@ -0,0 +1,97 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+/**
+ * The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout
+ * (split: the pictures beside the text, stacked: the pictures under it), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type AboutCompanyProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  stats: Stat[];
+  values: Feature[];
+  layout?: "split" | "stacked";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function AboutCompany({
+  id,
+  title,
+  lead = "",
+  stats,
+  values,
+  layout = "split",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: AboutCompanyProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      density={density}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      media={{ show: true, side: "start" }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <Box class="grid grid-cols-3 gap-4" data-testid="strip">
+          <MediaFrame alt={title} ratio="3/4" />
+          <MediaFrame alt={title} ratio="3/4" class="mt-8" />
+          <MediaFrame alt={title} ratio="3/4" />
+        </Box>
+      )}
+    >
+      {((stats?.length ?? 0) > 0) ? (
+        <Grid cols="2-4" class="gap-4" data-testid="stats">
+          <For each={stats ?? []}>{(s) => (
+            <Stack gap="0" data-testid="stat">
+              <Text size="3xl" weight="bold">
+                {s.value}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {s.label}
+              </Text>
+            </Stack>
+          )}</For>
+        </Grid>
+      ) : null}
+      {((values?.length ?? 0) > 0) ? (
+        <Box
+          class={cn("grid grid-cols-1 gap-4", (((layout as string) === "stacked") ? "md:grid-cols-3" : ""))}
+          data-testid="values"
+        >
+          <For each={values ?? []}>{(v) => (
+            <Group gap="4" align="start" class="border-t border-border pt-4" data-testid="value">
+              <LucideIcon name={v.icon} size={20} />
+              <Stack gap="2">
+                <Text size="sm" weight="semibold">
+                  {v.title}
+                </Text>
+                <Text size="sm" class="text-muted-foreground">
+                  {v.text}
+                </Text>
+              </Stack>
+            </Group>
+          )}</For>
+        </Box>
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/about-me.tsx b/packages/solid/ui/src/blocks/about-me.tsx
new file mode 100644
index 0000000..404353b
--- /dev/null
+++ b/packages/solid/ui/src/blocks/about-me.tsx
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+/**
+ * A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of
+ * specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills),
+ * mediaSide, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Progress } from "../primitives/form/progress";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Skill, AboutMeLabels } from "./about-me.types";
+import type { Spec } from "./product-info.types";
+import type { LinkActions } from "./error-page.types";
+
+export type AboutMeProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  facts: Spec[];
+  skills: Skill[];
+  labels: AboutMeLabels;
+  actions: LinkActions;
+  layout?: "facts" | "skills";
+  mediaSide?: "start" | "end";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function AboutMe({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 1,
+  facts,
+  skills,
+  labels,
+  actions,
+  layout = "facts",
+  mediaSide = "start",
+  tone = "default",
+  landmarkLabel,
+}: AboutMeProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge, level }}
+      layout="split"
+      media={{ show: true, side: mediaSide }}
+      tone={tone}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="3/4" />
+      )}
+    >
+      {((layout as string) === "facts") ? (
+        <>
+          {((facts?.length ?? 0) > 0) ? (
+            <List tag="ul" class="grid grid-cols-1 gap-4 sm:grid-cols-2" data-testid="facts">
+              <For each={facts ?? []}>{(f) => (
+                <ListItem class="rounded bg-card inset-ring inset-ring-border flex flex-col gap-0 p-4" data-testid="fact">
+                  <Text size="xs" class="text-muted-foreground">
+                    {f.label}
+                  </Text>
+                  <Text size="sm" weight="semibold">
+                    {f.value}
+                  </Text>
+                </ListItem>
+              )}</For>
+            </List>
+          ) : null}
+        </>
+      ) : ((skills?.length ?? 0) > 0) ? (
+        <Stack gap="4" align="stretch" data-testid="skills">
+          <For each={skills ?? []}>{(s) => (
+            <Stack gap="2" align="stretch" data-testid="skill">
+              <Group gap="4" justify="between">
+                <Text size="sm" weight="semibold">
+                  {s.label}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {tpl(labels.level, s.level)}
+                </Text>
+              </Group>
+              <Progress value={(s.level == null ? undefined : String(s.level))} max="100" aria-label={s.label} />
+            </Stack>
+          )}</For>
+        </Stack>
+      ) : null}
+      <ActionGroup
+        primary={actions.cta}
+        primaryHref={actions.href}
+        secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+        secondaryHref={actions.secondaryHref}
+      />
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/about-me.types.ts b/packages/solid/ui/src/blocks/about-me.types.ts
new file mode 100644
index 0000000..255f048
--- /dev/null
+++ b/packages/solid/ui/src/blocks/about-me.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Skill = {
+  id: string;
+  label: string;
+  level: number;
+};
+
+export type AboutMeLabels = {
+  level: string;
+};
diff --git a/packages/solid/ui/src/blocks/activity-feed.tsx b/packages/solid/ui/src/blocks/activity-feed.tsx
new file mode 100644
index 0000000..ea2af1c
--- /dev/null
+++ b/packages/solid/ui/src/blocks/activity-feed.tsx
@@ -0,0 +1,87 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout
+ * (timeline, list), density (default, compact), tone (default, muted).
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { Panel } from "../components/panel";
+import { Timeline } from "../components/timeline";
+import { cn, tpl } from "../utils";
+import type { Event } from "./activity-feed.types";
+
+export type ActivityFeedProps = {
+  id: string;
+  title: string;
+  text: string;
+  events: Event[];
+  empty?: string;
+  layout?: "timeline" | "list";
+  density?: "default" | "compact";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ActivityFeed({
+  id,
+  title,
+  text,
+  events,
+  empty = "",
+  layout = "timeline",
+  density = "default",
+  tone = "default",
+  landmarkLabel,
+}: ActivityFeedProps) {
+  return (
+    <Block
+      tag="section"
+      aria-labelledby={(landmarkLabel ? undefined : ((title && id) ? tpl("{0}-t", id) : undefined))}
+      data-testid="panel-section"
+      aria-label={landmarkLabel}
+    >
+      <Container class="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+        <Panel title={title} description={text} id={id} class={(((tone as string) === "muted") ? "bg-muted" : "")}>
+          {((events?.length ?? 0) === 0) ? (
+            <EmptyState icon="activity" title={empty} />
+          ) : ((layout as string) === "timeline") ? (
+            <Timeline items={events} />
+          ) : (
+            <List class="m-0 flex list-none flex-col p-0" data-testid="items">
+              <For each={events ?? []}>{(e) => (
+                <ListItem
+                  class={cn(
+                    "flex items-start justify-between gap-4 border-b border-border last:border-0",
+                    (((density as string) === "compact") ? "py-2" : "py-4")
+                  )}
+                  data-testid="item"
+                >
+                  <Stack gap="0">
+                    <Text size="sm" weight="semibold">
+                      {e.title}
+                    </Text>
+                    {((density as string) === "default") ? (
+                      <Text size="sm" class="text-muted-foreground">
+                        {e.text}
+                      </Text>
+                    ) : null}
+                  </Stack>
+                  <Text size="xs" class="shrink-0 text-muted-foreground">
+                    {e.time}
+                  </Text>
+                </ListItem>
+              )}</For>
+            </List>
+          )}
+        </Panel>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/activity-feed.types.ts b/packages/solid/ui/src/blocks/activity-feed.types.ts
new file mode 100644
index 0000000..8da30ee
--- /dev/null
+++ b/packages/solid/ui/src/blocks/activity-feed.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Event = {
+  id: string;
+  title: string;
+  text: string;
+  time: string;
+  tone: string;
+};
diff --git a/packages/solid/ui/src/blocks/announcement-bar.tsx b/packages/solid/ui/src/blocks/announcement-bar.tsx
new file mode 100644
index 0000000..f3e2353
--- /dev/null
+++ b/packages/solid/ui/src/blocks/announcement-bar.tsx
@@ -0,0 +1,118 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default,
+ * muted), layout (center, split), dismiss (show, hide).
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type AnnouncementBarProps = {
+  label: string;
+  text: string;
+  cta?: string;
+  ctaHref?: string;
+  icon?: string;
+  dismissLabel: string;
+  tone?: "default" | "muted";
+  layout?: "center" | "split";
+  dismiss?: "show" | "hide";
+  badgeLabel?: string;
+  badge?: "none" | "show";
+  position?: "top" | "bottom";
+  landmarkLabel?: string;
+};
+
+export function AnnouncementBar({
+  label,
+  text,
+  cta,
+  ctaHref,
+  icon = "megaphone",
+  dismissLabel,
+  tone = "default",
+  layout = "center",
+  dismiss = "hide",
+  badgeLabel,
+  badge = "none",
+  position = "top",
+  landmarkLabel,
+}: AnnouncementBarProps) {
+  return (
+    <Block
+      tag="aside"
+      class={cn(
+        "w-full",
+        (((position as string) === "bottom") ? "sticky bottom-0 z-40 border-t border-border" : ""),
+        (
+          (tone as string) === "muted" ? "bg-muted text-foreground"
+          : "bg-primary text-primary-foreground"
+        )
+      )}
+      aria-label={(landmarkLabel ?? label)}
+      data-testid="announcement"
+      data-layout={layout}
+    >
+      <Container
+        class={cn(
+          "mx-auto w-full max-w-6xl px-4",
+          "flex items-center gap-4 py-2",
+          (((layout as string) === "split") ? "justify-between" : "justify-center")
+        )}
+        data-slot="container"
+      >
+        <Group
+          gap="4"
+          align="center"
+          class={cn(
+            "min-w-0 flex-wrap",
+            ((((layout as string) === "center") && ((dismiss as string) === "show")) ? "ml-auto" : "")
+          )}
+        >
+          <LucideIcon name={icon} size={16} />
+          {((badge as string) === "show") ? (
+            <Inline
+              class="rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current"
+              data-testid="announcement-badge"
+            >
+              {badgeLabel}
+            </Inline>
+          ) : null}
+          <Text size="sm">
+            {text}
+          </Text>
+          {cta ? (
+            <LinkPlain
+              href={ctaHref}
+              class="inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4"
+              data-testid="announcement-cta"
+            >
+              {cta}
+              <LucideIcon name="arrow-right" size={16} />
+            </LinkPlain>
+          ) : null}
+        </Group>
+        {((dismiss as string) === "show") ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            class="ml-auto shrink-0 text-current"
+            type="button"
+            aria-label={dismissLabel}
+            data-testid="dismiss"
+          >
+            <LucideIcon name="x" size={16} />
+          </Button>
+        ) : null}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/app-shell.tsx b/packages/solid/ui/src/blocks/app-shell.tsx
new file mode 100644
index 0000000..ac3be22
--- /dev/null
+++ b/packages/solid/ui/src/blocks/app-shell.tsx
@@ -0,0 +1,132 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+/**
+ * The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a
+ * bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar
+ * is a port contract.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { AppMain } from "../components/app-main";
+import { NavBar } from "../blocks/nav-bar";
+import { Panel } from "../components/panel";
+import { SidebarNav } from "../blocks/sidebar-nav";
+import { cn, tpl } from "../utils";
+import type { AppNav, AppUser } from "./app-shell.types";
+import type { NavLink, NavSearch } from "./nav-bar.types";
+import type { Metric } from "./metric-row.types";
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+import type { OverviewChart, OverviewActivity } from "./dashboard-overview.types";
+
+export type AppShellProps = {
+  id: string;
+  title: string;
+  nav: AppNav;
+  user: AppUser;
+  search: NavSearch;
+  metrics: Metric[];
+  chart: OverviewChart;
+  activity: OverviewActivity;
+  layout?: "sidebar" | "top" | "panes";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function AppShell({
+  id,
+  title,
+  nav,
+  user,
+  search,
+  metrics,
+  chart,
+  activity,
+  layout = "sidebar",
+  density = "default",
+  landmarkLabel,
+}: AppShellProps) {
+  return (
+    <Block
+      tag="section"
+      class="bg-background"
+      aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+      data-testid="app-shell"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      {((layout as string) === "top") ? (
+        <Stack gap="6" align="stretch">
+          <NavBar
+            label={nav.label}
+            brand={nav.brand}
+            links={nav.links}
+            current={nav.current}
+            search={search}
+            actions={{ mode: "none" }}
+            layout="search"
+            landmarkLabel={landmarkLabel}
+          />
+          <Container class={cn("mx-auto w-full max-w-6xl px-4", "pb-8")} data-slot="container">
+            <AppMain id={id} title={title} metrics={metrics} chart={chart} cols="1-4" activity={activity} density={density} />
+          </Container>
+        </Stack>
+      ) : (
+        <Container class={cn("mx-auto w-full max-w-6xl px-4", "py-8")} data-slot="container">
+          {((layout as string) === "sidebar") ? (
+            <Grid cols="1" class="items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]">
+              <SidebarNav
+                label={nav.label}
+                brand={nav.brand}
+                links={nav.links}
+                current={nav.current}
+                userName={user.name}
+                userEmail={user.email}
+                density={density}
+                landmarkLabel={landmarkLabel}
+              />
+              <AppMain id={id} title={title} metrics={metrics} chart={chart} activity={activity} density={density} />
+            </Grid>
+          ) : (
+            <Grid cols="1-3" class="items-start gap-4">
+              <SidebarNav
+                label={nav.label}
+                brand={nav.brand}
+                links={nav.links}
+                current={nav.current}
+                userName={user.name}
+                userEmail={user.email}
+                width="compact"
+                density={density}
+                landmarkLabel={landmarkLabel}
+              />
+              {((activity.events?.length ?? 0) > 0) ? (
+                <Panel title={activity.title} description={activity.text} id={tpl("{0}-list", id)}>
+                  <List class="m-0 flex list-none flex-col gap-4 p-0" data-testid="items">
+                    <For each={activity.events ?? []}>{(e) => (
+                      <ListItem class="flex flex-col gap-2" data-testid="item">
+                        <Text size="sm" weight="semibold">
+                          {e.title}
+                        </Text>
+                        <Text size="xs" class="text-muted-foreground">
+                          {e.time}
+                        </Text>
+                      </ListItem>
+                    )}</For>
+                  </List>
+                </Panel>
+              ) : null}
+              <AppMain id={id} title={title} metrics={metrics} chart={chart} density="compact" />
+            </Grid>
+          )}
+        </Container>
+      )}
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/app-shell.types.ts b/packages/solid/ui/src/blocks/app-shell.types.ts
new file mode 100644
index 0000000..51a8838
--- /dev/null
+++ b/packages/solid/ui/src/blocks/app-shell.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type AppNav = {
+  /** accessible name of the navigation */
+  label: string;
+  brand: string;
+  links: NavLink[];
+  /** id of the current link */
+  current?: string;
+};
+
+export type AppUser = {
+  name: string;
+  email: string;
+};
diff --git a/packages/solid/ui/src/blocks/article-body.tsx b/packages/solid/ui/src/blocks/article-body.tsx
new file mode 100644
index 0000000..45a042e
--- /dev/null
+++ b/packages/solid/ui/src/blocks/article-body.tsx
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table
+ * of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting
+ * the section being read is a port contract.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Link } from "../primitives/link/link";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { NavBlock } from "../components/nav-block";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { Section } from "./article-body.types";
+
+export type ArticleBodyProps = {
+  id: string;
+  title: string;
+  sections: Section[];
+  empty?: string;
+  tocTitle: string;
+  layout?: "column" | "toc";
+  quotes?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ArticleBody({
+  id,
+  title,
+  sections,
+  empty = "",
+  tocTitle,
+  layout = "column",
+  quotes = "show",
+  tone = "default",
+  landmarkLabel,
+}: ArticleBodyProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      {((sections?.length ?? 0) === 0) ? (
+        <EmptyState icon="file-text" title={empty} />
+      ) : (
+        <Grid
+          cols="1"
+          class={cn(
+            "items-start gap-8",
+            (((layout as string) === "toc") ? "md:grid-cols-[14rem_minmax(0,1fr)]" : "")
+          )}
+        >
+          {((layout as string) === "toc") ? (
+            <NavBlock
+              label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", tocTitle, landmarkLabel)) : tocTitle)}
+              class="md:sticky md:top-4"
+              testid="toc"
+            >
+              <Stack gap="2">
+                <Text size="sm" weight="semibold">
+                  {tocTitle}
+                </Text>
+                <List class="m-0 flex list-none flex-col gap-2 p-0">
+                  <For each={sections ?? []}>{(s) => (
+                    <ListItem>
+                      <Link
+                        href={tpl("#{0}-{1}", id, s.id)}
+                        variant="default"
+                        class="text-sm text-muted-foreground"
+                        data-testid="toc-link"
+                      >
+                        {s.title}
+                      </Link>
+                    </ListItem>
+                  )}</For>
+                </List>
+              </Stack>
+            </NavBlock>
+          ) : null}
+          <Stack gap="8" align="stretch" class="mx-auto w-full max-w-2xl min-w-0" data-testid="article">
+            <For each={sections ?? []}>{(s) => (
+              <Box class="flex flex-col gap-4" id={tpl("{0}-{1}", id, s.id)} data-testid="item">
+                <Title as={3} size="2xl" weight="bold">
+                  {s.title}
+                </Title>
+                <Text size="base">
+                  {s.text}
+                </Text>
+                {((quotes as string) === "show") ? (
+                  <>
+                    {s.quote ? (
+                      <Text tag="blockquote" class="m-0 border-l border-border pl-4 text-lg" data-testid="quote">
+                        {s.quote}
+                      </Text>
+                    ) : null}
+                  </>
+                ) : null}
+              </Box>
+            )}</For>
+          </Stack>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/article-body.types.ts b/packages/solid/ui/src/blocks/article-body.types.ts
new file mode 100644
index 0000000..63a2648
--- /dev/null
+++ b/packages/solid/ui/src/blocks/article-body.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Section = {
+  id: string;
+  title: string;
+  text: string;
+  quote: string;
+};
diff --git a/packages/solid/ui/src/blocks/auth-card.tsx b/packages/solid/ui/src/blocks/auth-card.tsx
new file mode 100644
index 0000000..33088a6
--- /dev/null
+++ b/packages/solid/ui/src/blocks/auth-card.tsx
@@ -0,0 +1,121 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+/**
+ * A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button,
+ * optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout
+ * (card, plain), social (none, show).
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Separator } from "../primitives/separator/separator";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { AuthForm } from "../components/auth-form";
+import { cn, tpl } from "../utils";
+import type { AuthLabels } from "./auth-card.types";
+
+export type AuthCardProps = {
+  id: string;
+  title: string;
+  text: string;
+  submit: string;
+  switchText: string;
+  switchLink: string;
+  switchHref?: string;
+  labels: AuthLabels;
+  mode?: "signin" | "signup" | "reset" | "magic";
+  layout?: "card" | "plain";
+  social?: "none" | "show" | "first";
+  level?: 1 | 2;
+  landmarkLabel?: string;
+};
+
+export function AuthCard({
+  id,
+  title,
+  text,
+  submit,
+  switchText,
+  switchLink,
+  switchHref,
+  labels,
+  mode = "signin",
+  layout = "card",
+  social = "none",
+  level = 2,
+  landmarkLabel,
+}: AuthCardProps) {
+  return (
+    <Block
+      tag="section"
+      class={cn(
+        "flex w-full flex-col gap-6",
+        (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+      )}
+      aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+      data-testid="auth-card"
+      data-mode={mode}
+      aria-label={landmarkLabel}
+    >
+      <Stack gap="2">
+        <Title as={level} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+          {title}
+        </Title>
+        <Text size="sm" class="text-muted-foreground">
+          {text}
+        </Text>
+      </Stack>
+      {(((social as string) === "first") && ((social as string) !== "none") && ((mode as string) !== "reset") && ((mode as string) !== "magic")) ? (
+        <Stack gap="4" data-testid="social">
+          <Group gap="4" align="center">
+            <Separator class="flex-1" />
+            <Text size="xs" class="text-muted-foreground">
+              {labels.divider}
+            </Text>
+            <Separator class="flex-1" />
+          </Group>
+          <Button variant="outline" size="default" type="button" class="w-full">
+            <LucideIcon name="key-round" size={16} />
+            {labels.passkey}
+          </Button>
+          <Button variant="outline" size="default" type="button" class="w-full">
+            <LucideIcon name="mail" size={16} />
+            {labels.magic}
+          </Button>
+        </Stack>
+      ) : null}
+      <AuthForm id={id} mode={mode} labels={labels} submit={submit} />
+      {(((social as string) !== "first") && ((social as string) !== "none") && ((mode as string) !== "reset") && ((mode as string) !== "magic")) ? (
+        <Stack gap="4" data-testid="social">
+          <Group gap="4" align="center">
+            <Separator class="flex-1" />
+            <Text size="xs" class="text-muted-foreground">
+              {labels.divider}
+            </Text>
+            <Separator class="flex-1" />
+          </Group>
+          <Button variant="outline" size="default" type="button" class="w-full">
+            <LucideIcon name="key-round" size={16} />
+            {labels.passkey}
+          </Button>
+          <Button variant="outline" size="default" type="button" class="w-full">
+            <LucideIcon name="mail" size={16} />
+            {labels.magic}
+          </Button>
+        </Stack>
+      ) : null}
+      <Text size="sm" class="text-center text-muted-foreground">
+        {switchText}
+        {" "}
+        <Link href={switchHref} variant="default" data-testid="switch">
+          {switchLink}
+        </Link>
+      </Text>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/auth-card.types.ts b/packages/solid/ui/src/blocks/auth-card.types.ts
new file mode 100644
index 0000000..dcd767e
--- /dev/null
+++ b/packages/solid/ui/src/blocks/auth-card.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+
+export type AuthLabels = {
+  name: string;
+  email: string;
+  password: string;
+  remember: string;
+  forgot: string;
+  terms: string;
+  divider: string;
+  passkey: string;
+  magic: string;
+};
diff --git a/packages/solid/ui/src/blocks/auth-layout.tsx b/packages/solid/ui/src/blocks/auth-layout.tsx
new file mode 100644
index 0000000..13bf2d4
--- /dev/null
+++ b/packages/solid/ui/src/blocks/auth-layout.tsx
@@ -0,0 +1,132 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+/**
+ * A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card,
+ * centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side
+ * of the picture), mode, social. The page's heading is the card's title.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { AuthCard } from "../blocks/auth-card";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+import type { AuthSwitch, AuthVisual } from "./auth-layout.types";
+import type { AuthLabels } from "./auth-card.types";
+
+export type AuthLayoutProps = {
+  id: string;
+  title: string;
+  text: string;
+  submit: string;
+  switchTo: AuthSwitch;
+  labels: AuthLabels;
+  visual: AuthVisual;
+  level?: 1 | 2;
+  layout?: "split" | "centered" | "minimal";
+  side?: "end" | "start";
+  mode?: "signin" | "signup" | "reset" | "magic";
+  social?: "none" | "show" | "first";
+  landmarkLabel?: string;
+};
+
+export function AuthLayout({
+  id,
+  title,
+  text,
+  submit,
+  switchTo,
+  labels,
+  visual,
+  level = 1,
+  layout = "split",
+  side = "end",
+  mode = "signin",
+  social = "none",
+  landmarkLabel,
+}: AuthLayoutProps) {
+  return (
+    <Block tag="div" class="w-full" data-testid="auth-layout" data-layout={layout}>
+      <Container class={cn("mx-auto w-full max-w-6xl px-4", "py-12")} data-slot="container">
+        {((layout as string) === "split") ? (
+          <Grid cols="1-2" class="items-stretch gap-8">
+            <Box class="mx-auto flex w-full max-w-sm items-center">
+              <AuthCard
+                id={id}
+                title={title}
+                text={text}
+                submit={submit}
+                switchText={switchTo.text}
+                switchLink={switchTo.link}
+                switchHref={switchTo.href}
+                labels={labels}
+                mode={mode}
+                layout="plain"
+                social={social}
+                level={level}
+                landmarkLabel={landmarkLabel}
+              />
+            </Box>
+            <Stack
+              gap="4"
+              align="stretch"
+              class={cn(
+                "justify-end rounded bg-muted p-8",
+                (((side as string) === "start") ? "md:order-first" : "md:order-last")
+              )}
+              data-testid="visual"
+            >
+              <MediaFrame alt={visual.title} ratio="4/3" />
+              <Title as={2} size="2xl" weight="bold">
+                {visual.title}
+              </Title>
+              <Text size="sm" class="text-muted-foreground">
+                {visual.text}
+              </Text>
+            </Stack>
+          </Grid>
+        ) : ((layout as string) === "centered") ? (
+          <Box class="mx-auto w-full max-w-md rounded bg-muted p-6">
+            <AuthCard
+              id={id}
+              title={title}
+              text={text}
+              submit={submit}
+              switchText={switchTo.text}
+              switchLink={switchTo.link}
+              switchHref={switchTo.href}
+              labels={labels}
+              mode={mode}
+              social={social}
+              level={level}
+              landmarkLabel={landmarkLabel}
+            />
+          </Box>
+        ) : (
+          <Box class="mx-auto w-full max-w-sm">
+            <AuthCard
+              id={id}
+              title={title}
+              text={text}
+              submit={submit}
+              switchText={switchTo.text}
+              switchLink={switchTo.link}
+              switchHref={switchTo.href}
+              labels={labels}
+              mode={mode}
+              layout="plain"
+              social={social}
+              level={level}
+              landmarkLabel={landmarkLabel}
+            />
+          </Box>
+        )}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/auth-layout.types.ts b/packages/solid/ui/src/blocks/auth-layout.types.ts
new file mode 100644
index 0000000..59bd44b
--- /dev/null
+++ b/packages/solid/ui/src/blocks/auth-layout.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+
+export type AuthSwitch = {
+  /** the sentence before the link */
+  text: string;
+  /** text of the link */
+  link: string;
+  href?: string;
+};
+
+export type AuthVisual = {
+  /** the line on the picture panel */
+  title: string;
+  text: string;
+};
diff --git a/packages/solid/ui/src/blocks/before-after.tsx b/packages/solid/ui/src/blocks/before-after.tsx
new file mode 100644
index 0000000..805aa49
--- /dev/null
+++ b/packages/solid/ui/src/blocks/before-after.tsx
@@ -0,0 +1,136 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two
+ * cards, rows: one row per point), icons (show, hide), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Contrast, BeforeAfterLabels } from "./before-after.types";
+
+export type BeforeAfterProps = {
+  id: string;
+  title: string;
+  points: Contrast[];
+  empty?: string;
+  labels: BeforeAfterLabels;
+  layout?: "cards" | "rows";
+  icons?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function BeforeAfter({
+  id,
+  title,
+  points,
+  empty = "",
+  labels,
+  layout = "cards",
+  icons = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: BeforeAfterProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((points?.length ?? 0) === 0) ? (
+        <EmptyState icon="git-compare" title={empty} />
+      ) : ((layout as string) === "cards") ? (
+        <Grid cols="1-2" class="items-stretch gap-4" data-testid="sides">
+          <Card
+            variant="muted"
+            class={cn("h-full", (((density as string) === "compact") ? "gap-4 p-4" : ""))}
+            data-testid="side"
+            data-side="before"
+          >
+            <CardContent class="flex flex-col gap-4">
+              <Title as={3} size="xl" weight="bold">
+                {labels.before}
+              </Title>
+              <List class="m-0 flex list-none flex-col gap-4 p-0">
+                <For each={points ?? []}>{(p) => (
+                  <ListItem class="flex items-start gap-4" data-testid="item">
+                    {((icons as string) === "show") ? (
+                      <LucideIcon name="x" size={16} class="h-lh shrink-0 text-sm" />
+                    ) : null}
+                    <Text size="sm">
+                      {p.before}
+                    </Text>
+                  </ListItem>
+                )}</For>
+              </List>
+            </CardContent>
+          </Card>
+          <Card
+            variant="default"
+            class={cn("h-full", (((density as string) === "compact") ? "gap-4 p-4" : ""))}
+            data-testid="side"
+            data-side="after"
+          >
+            <CardContent class="flex flex-col gap-4">
+              <Title as={3} size="xl" weight="bold">
+                {labels.after}
+              </Title>
+              <List class="m-0 flex list-none flex-col gap-4 p-0">
+                <For each={points ?? []}>{(p) => (
+                  <ListItem class="flex items-start gap-4" data-testid="item">
+                    {((icons as string) === "show") ? (
+                      <LucideIcon name="check" size={16} class="h-lh shrink-0 text-sm" />
+                    ) : null}
+                    <Text size="sm">
+                      {p.after}
+                    </Text>
+                  </ListItem>
+                )}</For>
+              </List>
+            </CardContent>
+          </Card>
+        </Grid>
+      ) : (
+        <Stack gap="2" align="stretch" data-testid="rows">
+          <For each={points ?? []}>{(p) => (
+            <Grid
+              cols="1-3"
+              class={cn("items-center gap-4", "rounded bg-card inset-ring inset-ring-border p-4")}
+              data-testid="item"
+            >
+              <Text size="base" weight="semibold">
+                {p.title}
+              </Text>
+              <Group gap="2" align="start">
+                {((icons as string) === "show") ? (
+                  <LucideIcon name="x" size={16} class="h-lh shrink-0 text-sm text-muted-foreground" />
+                ) : null}
+                <Text size="sm" class="text-muted-foreground">
+                  {p.before}
+                </Text>
+              </Group>
+              <Group gap="2" align="start">
+                {((icons as string) === "show") ? (
+                  <LucideIcon name="check" size={16} class="h-lh shrink-0 text-sm text-primary" />
+                ) : null}
+                <Text size="sm" weight="semibold">
+                  {p.after}
+                </Text>
+              </Group>
+            </Grid>
+          )}</For>
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/before-after.types.ts b/packages/solid/ui/src/blocks/before-after.types.ts
new file mode 100644
index 0000000..5783791
--- /dev/null
+++ b/packages/solid/ui/src/blocks/before-after.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+
+export type Contrast = {
+  id: string;
+  title: string;
+  before: string;
+  after: string;
+};
+
+export type BeforeAfterLabels = {
+  before: string;
+  after: string;
+};
diff --git a/packages/solid/ui/src/blocks/bento-grid.tsx b/packages/solid/ui/src/blocks/bento-grid.tsx
new file mode 100644
index 0000000..8834d3c
--- /dev/null
+++ b/packages/solid/ui/src/blocks/bento-grid.tsx
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from
+ * the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in
+ * the large tiles), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { at, cn } from "../utils";
+import type { Tile } from "./bento-grid.types";
+
+const SPAN: Record<string, string> = {
+  "large": "md:col-span-2 md:row-span-2",
+  "wide": "md:col-span-2",
+  "small": "",
+};
+
+export type BentoGridProps = {
+  id: string;
+  title: string;
+  tiles: Tile[];
+  empty?: string;
+  layout?: "bento" | "even";
+  media?: "none" | "image";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function BentoGrid({
+  id,
+  title,
+  tiles,
+  empty = "",
+  layout = "bento",
+  media = "none",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: BentoGridProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((tiles?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-dashboard" title={empty} />
+      ) : (
+        <Grid cols="1-4" class="auto-rows-fr gap-4" data-testid="items">
+          <For each={tiles ?? []}>{(tile) => (
+            <Card
+              variant="default"
+              class={cn(
+                "h-full overflow-hidden",
+                (((density as string) === "compact") ? "gap-4 p-4" : ""),
+                (((layout as string) === "bento") ? at(SPAN, tile.size) : "")
+              )}
+              data-testid="item"
+              data-size={(((layout as string) === "bento") ? tile.size : "even")}
+            >
+              <CardContent class="flex h-full flex-col gap-4">
+                <LucideIcon name={tile.icon} size={24} />
+                <Title as={3} size="xl" weight="bold">
+                  {tile.title}
+                </Title>
+                <Text size="sm" class="text-muted-foreground">
+                  {tile.text}
+                </Text>
+                {(((media as string) === "image") && ((tile.size === "large") || ((layout as string) === "even"))) ? (
+                  <MediaFrame alt={tile.title} ratio="4/3" class="mt-auto" />
+                ) : null}
+              </CardContent>
+            </Card>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/bento-grid.types.ts b/packages/solid/ui/src/blocks/bento-grid.types.ts
new file mode 100644
index 0000000..c1a438e
--- /dev/null
+++ b/packages/solid/ui/src/blocks/bento-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+
+export type Tile = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  size: string;
+};
diff --git a/packages/solid/ui/src/blocks/bottom-nav.tsx b/packages/solid/ui/src/blocks/bottom-nav.tsx
new file mode 100644
index 0000000..b871715
--- /dev/null
+++ b/packages/solid/ui/src/blocks/bottom-nav.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show,
+ * hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { MenuEntry } from "../components/menu-entry";
+import { cn } from "../utils";
+import type { NavLink } from "./nav-bar.types";
+
+export type BottomNavProps = {
+  label: string;
+  tabs: NavLink[];
+  current?: string;
+  labels?: "show" | "hide";
+  position?: "static" | "sticky";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function BottomNav({
+  label,
+  tabs,
+  current = "",
+  labels = "show",
+  position = "static",
+  tone = "default",
+  landmarkLabel,
+}: BottomNavProps) {
+  return (
+    <>
+      {((tabs?.length ?? 0) > 0) ? (
+        <Block
+          tag="nav"
+          class={cn(
+            "mx-auto w-full max-w-md border-t border-border",
+            (((tone as string) === "muted") ? "bg-muted" : "bg-background"),
+            (((position as string) === "sticky") ? "sticky bottom-0 z-40" : "")
+          )}
+          aria-label={(landmarkLabel ?? label)}
+          data-testid="bottom-nav"
+          data-position={position}
+        >
+          <List class="m-0 grid list-none grid-flow-col auto-cols-fr p-0" data-testid="items">
+            <For each={tabs ?? []}>{(tab) => (
+              <ListItem>
+                <MenuEntry
+                  href={tab.href}
+                  class={cn(
+                    "flex flex-col items-center gap-2 py-2 text-xs",
+                    ((tab.id === current) ? "font-semibold text-primary" : "text-muted-foreground")
+                  )}
+                  current={(tab.id === current)}
+                  testid="item"
+                >
+                  <LucideIcon name={tab.icon} size={20} />
+                  <Inline class={(((labels as string) === "hide") ? "sr-only" : "")}>
+                    {tab.name}
+                  </Inline>
+                </MenuEntry>
+              </ListItem>
+            )}</For>
+          </List>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/cart-drawer.tsx b/packages/solid/ui/src/blocks/cart-drawer.tsx
new file mode 100644
index 0000000..fbf3b5a
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cart-drawer.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+/**
+ * The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity
+ * field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way
+ * back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Title } from "../primitives/title/title";
+import { DrawerLines } from "../components/drawer-lines";
+import { EmptyState } from "../components/empty-state";
+import { tpl } from "../utils";
+import type { DrawerLabels } from "./cart-drawer.types";
+import type { CartLine, CartLabels } from "./cart-list.types";
+import type { SummaryRow } from "./order-summary.types";
+
+export type CartDrawerProps = {
+  id: string;
+  lines: CartLine[];
+  rows: SummaryRow[];
+  labels: CartLabels;
+  drawer: DrawerLabels;
+  state?: "filled" | "empty";
+  media?: "image" | "none";
+  landmarkLabel?: string;
+};
+
+export function CartDrawer({
+  id,
+  lines,
+  rows,
+  labels,
+  drawer,
+  state = "filled",
+  media = "image",
+  landmarkLabel,
+}: CartDrawerProps) {
+  return (
+    <Block tag="section" class="py-8" aria-label={(landmarkLabel ?? drawer.title)} data-testid="section">
+      <Container class="mx-auto w-full max-w-6xl px-4" data-slot="container">
+        <Box class="flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border">
+          <Box class="hidden flex-1 flex-col gap-4 p-8 sm:flex" aria-hidden="true">
+            <Box class="h-8 w-48 rounded bg-background" />
+            <Box class="h-40 rounded bg-background" />
+            <Box class="h-40 rounded bg-background" />
+          </Box>
+          <Box
+            class="flex w-full flex-col bg-background shadow-lg sm:max-w-sm"
+            role="group"
+            aria-label={drawer.title}
+            data-testid="drawer"
+          >
+            <Group gap="4" align="center" justify="between" class="border-b border-border p-4">
+              <Title as={2} size="lg" weight="semibold">
+                {drawer.title}
+              </Title>
+              <Button variant="ghost" size="sm" layout="icon" aria-label={drawer.close}>
+                <LucideIcon name="x" size={16} />
+              </Button>
+            </Group>
+            {(((state as string) === "empty") || ((lines?.length ?? 0) === 0)) ? (
+              <Box class="flex flex-1 flex-col justify-center p-4" data-testid="empty">
+                <EmptyState
+                  icon="shopping-bag"
+                  title={drawer.empty}
+                  text={drawer.emptyText}
+                  action={(
+                    <Button variant="outline" size="default">
+                      {drawer.browse}
+                    </Button>
+                  )}
+                />
+              </Box>
+            ) : (
+              <DrawerLines field={tpl("{0}-qty", id)} lines={lines} rows={rows} labels={labels} drawer={drawer} media={media} />
+            )}
+          </Box>
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/cart-drawer.types.ts b/packages/solid/ui/src/blocks/cart-drawer.types.ts
new file mode 100644
index 0000000..8d66b9d
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cart-drawer.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type DrawerLabels = {
+  title: string;
+  close: string;
+  progress: string;
+  empty: string;
+  emptyText: string;
+  browse: string;
+};
diff --git a/packages/solid/ui/src/blocks/cart-list.tsx b/packages/solid/ui/src/blocks/cart-list.tsx
new file mode 100644
index 0000000..350b840
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cart-list.tsx
@@ -0,0 +1,109 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button.
+ * Axes: layout (table, cards), media (image, none), density, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { CartTable } from "../components/cart-table";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { NumberField } from "../components/number-field";
+import { SectionFrame } from "../components/section-frame";
+import { fmtMoney, tpl } from "../utils";
+import type { CartLine, CartLabels } from "./cart-list.types";
+
+export type CartListProps = {
+  id: string;
+  title: string;
+  lines: CartLine[];
+  empty?: string;
+  labels: CartLabels;
+  layout?: "table" | "cards";
+  media?: "image" | "none";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+  onRemove?: (id: string) => void;
+};
+
+export function CartList({
+  id,
+  title,
+  lines,
+  empty = "",
+  labels,
+  layout = "table",
+  media = "image",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onRemove,
+}: CartListProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((lines?.length ?? 0) === 0) ? (
+        <EmptyState icon="shopping-cart" title={empty} />
+      ) : ((layout as string) === "table") ? (
+        <CartTable
+          field={tpl("{0}-qty", id)}
+          lines={lines}
+          labels={labels}
+          media={media}
+          density={density}
+          onRemove={(arg: string) => onRemove?.(arg)}
+        />
+      ) : (
+        <Stack gap="4" align="stretch" data-testid="cart-cards">
+          <For each={lines ?? []}>{(line) => (
+            <Card variant="default" data-testid="item">
+              <CardContent class="flex flex-wrap items-center gap-4">
+                {((media as string) === "image") ? (
+                  <MediaFrame alt={line.name} ratio="1/1" class="size-16 shrink-0" />
+                ) : null}
+                <Stack gap="0" class="min-w-40 flex-1">
+                  <Text size="sm" weight="semibold">
+                    {line.name}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {line.variant}
+                  </Text>
+                  <Text size="sm">
+                    {fmtMoney(line.price, line.currency)}
+                  </Text>
+                </Stack>
+                <NumberField
+                  value={(line.qty == null ? undefined : String(line.qty))}
+                  name={tpl("{0}-qty-{1}", id, line.id)}
+                  min="1"
+                  label={labels.qty}
+                  decrease={labels.decrease}
+                  increase={labels.increase}
+                />
+                <Text size="base" weight="bold">
+                  {fmtMoney((line.price * line.qty), line.currency)}
+                </Text>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  layout="icon"
+                  aria-label={labels.remove}
+                  data-testid="remove"
+                  onClick={() => onRemove?.(line.id)}
+                >
+                  <LucideIcon name="x" size={16} />
+                </Button>
+              </CardContent>
+            </Card>
+          )}</For>
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/cart-list.types.ts b/packages/solid/ui/src/blocks/cart-list.types.ts
new file mode 100644
index 0000000..f5d7b14
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cart-list.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type CartLine = {
+  id: string;
+  name: string;
+  variant: string;
+  price: number;
+  currency: string;
+  qty: number;
+};
+
+export type CartLabels = {
+  caption: string;
+  product: string;
+  price: string;
+  qty: string;
+  total: string;
+  remove: string;
+  subtotal: string;
+  checkout: string;
+  decrease: string;
+  increase: string;
+};
diff --git a/packages/solid/ui/src/blocks/category-nav.tsx b/packages/solid/ui/src/blocks/category-nav.tsx
new file mode 100644
index 0000000..54eaa99
--- /dev/null
+++ b/packages/solid/ui/src/blocks/category-nav.tsx
@@ -0,0 +1,120 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon,
+ * or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes:
+ * layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Select } from "../primitives/select/select";
+import { SelectOption } from "../primitives/select/select-option";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { SearchField } from "../components/search-field";
+import { cn } from "../utils";
+import type { Category, CategoryTools } from "./category-nav.types";
+
+export type CategoryNavProps = {
+  label: string;
+  categories: Category[];
+  current?: string;
+  layout?: "chips" | "bar" | "sidebar" | "tiles" | "toolbar";
+  count?: "show" | "hide";
+  icon?: "show" | "hide";
+  density?: "default" | "compact";
+  tools?: CategoryTools;
+  landmarkLabel?: string;
+};
+
+export function CategoryNav({
+  label,
+  categories,
+  current = "all",
+  layout = "chips",
+  count = "show",
+  icon = "show",
+  density = "default",
+  tools,
+  landmarkLabel,
+}: CategoryNavProps) {
+  const chipLike = ((layout as string) === "chips") || ((layout as string) === "toolbar");
+  const tiles = (layout as string) === "tiles";
+  const linkShape =
+    chipLike ? "inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border"
+    : (layout as string) === "bar" ? "inline-flex items-center gap-2 -mb-px border-b px-1 py-2"
+    : tiles ? "flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border"
+    : "inline-flex w-full items-center gap-2 rounded px-3 py-2";
+  const currentLook =
+    chipLike ? "bg-primary text-primary-foreground"
+    : (layout as string) === "bar" ? "border-foreground font-semibold"
+    : tiles ? "inset-ring-foreground font-semibold"
+    : "bg-muted font-semibold";
+  const otherLook = ((layout as string) === "bar") ? "border-transparent" : "";
+  const listShape =
+    (layout as string) === "sidebar" ? "flex flex-col gap-2"
+    : (layout as string) === "bar" ? "flex flex-wrap gap-2 gap-x-4 border-b border-border"
+    : tiles ? "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6"
+    : "flex flex-wrap gap-2";
+  return (
+    <Block tag="nav" aria-label={(landmarkLabel ?? label)} data-testid="category-nav" data-layout={layout}>
+      <Container
+        class={cn("mx-auto w-full max-w-6xl px-4", (((density as string) === "compact") ? "py-2" : "py-4"))}
+        data-slot="container"
+      >
+        {((layout as string) === "toolbar") ? (
+          <Group gap="4" align="center" class="mb-4 flex-wrap" data-testid="toolbar">
+            <SearchField value={(tools?.query ?? "")} label={(tools?.search ?? "")} placeholder={tools?.search} />
+            <Select name="sort" size="sm" aria-label={tools?.sort} class="w-48">
+              <SelectOption value="sort" label={tools?.sortValue} selected={true} />
+            </Select>
+            <Text size="sm" class="text-muted-foreground">
+              {tools?.shown}
+            </Text>
+          </Group>
+        ) : null}
+        {((categories?.length ?? 0) > 0) ? (
+          <List tag="ul" class={listShape} data-testid="items">
+            <For each={categories ?? []}>{(c) => (
+              <ListItem>
+                <MenuEntry
+                  href={c.href}
+                  class={cn("text-sm", linkShape, ((c.id === current) ? currentLook : otherLook))}
+                  current={(c.id === current)}
+                  testid="item"
+                  block={true}
+                >
+                  {((icon as string) === "show") ? (
+                    <>
+                      {tiles ? (
+                        <Inline class="flex size-10 items-center justify-center rounded bg-muted">
+                          <LucideIcon name={c.icon} size={20} />
+                        </Inline>
+                      ) : (
+                        <LucideIcon name={c.icon} size={16} />
+                      )}
+                    </>
+                  ) : null}
+                  <Inline>
+                    {c.name}
+                  </Inline>
+                  {((count as string) === "show") ? (
+                    <Text size="xs" class="text-muted-foreground">
+                      {(c.count == null ? undefined : String(c.count))}
+                    </Text>
+                  ) : null}
+                </MenuEntry>
+              </ListItem>
+            )}</For>
+          </List>
+        ) : null}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/category-nav.types.ts b/packages/solid/ui/src/blocks/category-nav.types.ts
new file mode 100644
index 0000000..4a88a78
--- /dev/null
+++ b/packages/solid/ui/src/blocks/category-nav.types.ts
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Category = {
+  id: string;
+  name: string;
+  icon: string;
+  count: number;
+  href?: string;
+};
+
+export type CategoryTools = {
+  /** label of the search field */
+  search?: string;
+  /** label of the sort select */
+  sort?: string;
+  /** the chosen sort */
+  sortValue?: string;
+  /** how many products are shown */
+  shown?: string;
+  /** the text in the search field */
+  query?: string;
+};
diff --git a/packages/solid/ui/src/blocks/chart-panel.tsx b/packages/solid/ui/src/blocks/chart-panel.tsx
new file mode 100644
index 0000000..68f2423
--- /dev/null
+++ b/packages/solid/ui/src/blocks/chart-panel.tsx
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart
+ * (bars, meters), size (default, compact), tone (default, muted).
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { BarChart } from "../components/bar-chart";
+import { EmptyState } from "../components/empty-state";
+import { MeterRow } from "../components/meter-row";
+import { Panel } from "../components/panel";
+import { tpl } from "../utils";
+import type { Point } from "./chart-panel.types";
+
+export type ChartPanelProps = {
+  id: string;
+  title: string;
+  text: string;
+  series: Point[];
+  empty?: string;
+  summary: string;
+  percent: string;
+  chart?: "bars" | "meters";
+  size?: "default" | "compact";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ChartPanel({
+  id,
+  title,
+  text,
+  series,
+  empty = "",
+  summary,
+  percent,
+  chart = "bars",
+  size = "default",
+  tone = "default",
+  landmarkLabel,
+}: ChartPanelProps) {
+  return (
+    <Block
+      tag="section"
+      aria-labelledby={(landmarkLabel ? undefined : ((title && id) ? tpl("{0}-t", id) : undefined))}
+      data-testid="panel-section"
+      aria-label={landmarkLabel}
+    >
+      <Container class="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+        <Panel title={title} description={text} id={id} class={(((tone as string) === "muted") ? "bg-muted" : "")}>
+          {((series?.length ?? 0) === 0) ? (
+            <EmptyState icon="chart-column" title={empty} />
+          ) : ((chart as string) === "bars") ? (
+            <BarChart bars={series} label={summary} height={(((size as string) === "compact") ? 96 : 176)} />
+          ) : (
+            <Stack gap={(((size as string) === "compact") ? "0" : "2")} align="stretch" data-testid="items">
+              <For each={series ?? []}>{(s) => (
+                <MeterRow label={s.label} value={s.value} caption={tpl(percent, s.value)} />
+              )}</For>
+            </Stack>
+          )}
+        </Panel>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/chart-panel.types.ts b/packages/solid/ui/src/blocks/chart-panel.types.ts
new file mode 100644
index 0000000..9f64516
--- /dev/null
+++ b/packages/solid/ui/src/blocks/chart-panel.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Point = {
+  id: string;
+  label: string;
+  value: number;
+};
diff --git a/packages/solid/ui/src/blocks/checklist.tsx b/packages/solid/ui/src/blocks/checklist.tsx
new file mode 100644
index 0000000..149f7cf
--- /dev/null
+++ b/packages/solid/ui/src/blocks/checklist.tsx
@@ -0,0 +1,119 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain),
+ * progress (bar, text, none), marker (check, number), tone (default, muted).
+ */
+import { For, type JSX } from "solid-js";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Progress } from "../primitives/form/progress";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Task } from "./checklist.types";
+
+export type ChecklistProps = {
+  id: string;
+  title: string;
+  tasks: Task[];
+  empty?: string;
+  progressLabel: string;
+  layout?: "card" | "plain";
+  progress?: "bar" | "text" | "none";
+  marker?: "check" | "number";
+  detail?: "always" | "expand";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function Checklist({
+  id,
+  title,
+  tasks,
+  empty = "",
+  progressLabel,
+  layout = "card",
+  progress = "bar",
+  marker = "check",
+  detail = "always",
+  tone = "default",
+  landmarkLabel,
+}: ChecklistProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} measure="2xl" landmarkLabel={landmarkLabel}>
+      {((tasks?.length ?? 0) === 0) ? (
+        <EmptyState icon="list-checks" title={empty} />
+      ) : (
+        <Stack
+          gap="4"
+          align="stretch"
+          class={(((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")}
+          data-testid="checklist"
+        >
+          {((progress as string) === "bar") ? (
+            <Progress
+              value={
+                Math.round(((tasks.filter((i) => i["done"]).length * 100) / (tasks?.length ?? 0))) == null ? undefined
+                : String(Math.round(((tasks.filter((i) => i["done"]).length * 100) / (tasks?.length ?? 0))))
+              }
+              max="100"
+              aria-label={tpl(progressLabel, tasks.filter((i) => i["done"]).length, (tasks?.length ?? 0))}
+            />
+          ) : null}
+          {((progress as string) === "text") ? (
+            <Text size="sm" class="text-muted-foreground" data-testid="progress-text">
+              {tpl(progressLabel, tasks.filter((i) => i["done"]).length, (tasks?.length ?? 0))}
+            </Text>
+          ) : null}
+          <List class="m-0 flex list-none flex-col gap-4 p-0" data-testid="items">
+            <For each={tasks ?? []}>{(task, iOf) => { const i = iOf(); return (
+              <ListItem
+                class="flex items-start gap-4"
+                data-testid="item"
+                data-done={(task.done == null ? undefined : String(task.done))}
+              >
+                {((marker as string) === "number") ? (
+                  <IconBadge variant={(task.done ? "primary" : "outline")} size="xs">
+                    {((i + 1) == null ? undefined : String((i + 1)))}
+                  </IconBadge>
+                ) : (
+                  <LucideIcon
+                    name={(task.done ? "circle-check" : "circle")}
+                    size={24}
+                    class={(task.done ? "shrink-0 text-primary" : "shrink-0 text-muted-foreground")}
+                  />
+                )}
+                {((detail as string) === "expand") ? (
+                  <Disclosure variant="ghost" class="flex-1" data-testid="task-detail">
+                    <Summary variant="ghost">
+                      {task.title}
+                    </Summary>
+                    <Text size="sm" class="pb-2 text-muted-foreground">
+                      {task.text}
+                    </Text>
+                  </Disclosure>
+                ) : (
+                  <Stack gap="0">
+                    <Text size="base" weight="semibold">
+                      {task.title}
+                    </Text>
+                    <Text size="sm" class="text-muted-foreground">
+                      {task.text}
+                    </Text>
+                  </Stack>
+                )}
+              </ListItem>
+            ); }}</For>
+          </List>
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/checklist.types.ts b/packages/solid/ui/src/blocks/checklist.types.ts
new file mode 100644
index 0000000..54d9f32
--- /dev/null
+++ b/packages/solid/ui/src/blocks/checklist.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Task = {
+  id: string;
+  title: string;
+  text: string;
+  done: boolean;
+};
diff --git a/packages/solid/ui/src/blocks/checkout-form.tsx b/packages/solid/ui/src/blocks/checkout-form.tsx
new file mode 100644
index 0000000..b64cb22
--- /dev/null
+++ b/packages/solid/ui/src/blocks/checkout-form.tsx
@@ -0,0 +1,133 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+/**
+ * A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps,
+ * beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards:
+ * each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Form } from "../primitives/form/form";
+import { Grid } from "../primitives/grid/grid";
+import { Input } from "../primitives/input/input";
+import { Textarea } from "../primitives/textarea/textarea";
+import { CartSummaryCard } from "../components/cart-summary-card";
+import { CheckoutStep } from "../components/checkout-step";
+import { CheckoutSubmit } from "../components/checkout-submit";
+import { Field } from "../components/field";
+import { PaymentOptions } from "../components/payment-options";
+import { SectionFrame } from "../components/section-frame";
+import { SlotGrid } from "../components/slot-grid";
+import { tpl } from "../utils";
+import type { CheckoutLabels } from "./checkout-form.types";
+import type { Day } from "../components/slot-grid.types";
+import type { Payment } from "../components/payment-options.types";
+import type { CartLine } from "./cart-list.types";
+import type { SummaryRow } from "./order-summary.types";
+import type { Promo, CartSummaryLabels } from "../components/cart-summary-card.types";
+
+export type CheckoutFormProps = {
+  id: string;
+  title?: string;
+  days: Day[];
+  payments: Payment[];
+  lines: CartLine[];
+  rows: SummaryRow[];
+  promos: Promo[];
+  labels: CheckoutLabels;
+  totals: CartSummaryLabels;
+  layout?: "cards" | "numbered";
+  summary?: "aside" | "none";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function CheckoutForm({
+  id,
+  title = "",
+  days,
+  payments,
+  lines,
+  rows,
+  promos,
+  labels,
+  totals,
+  layout = "cards",
+  summary = "aside",
+  tone = "default",
+  landmarkLabel,
+}: CheckoutFormProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Box class="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+        <Form
+          method="dialog"
+          class={
+            (summary as string) === "aside" ? "flex flex-col gap-6 lg:col-span-2"
+            : "flex flex-col gap-6 lg:col-span-3"
+          }
+          data-testid="checkout-form"
+        >
+          <CheckoutStep number="1" title={labels.contacts} text={labels.contactsText} layout={layout}>
+            <Grid cols="1-2" class="gap-4">
+              <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+                <Input type="text" name="name" autocomplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.phone} htmlFor={tpl("{0}-phone", id)}>
+                <Input type="tel" name="phone" autocomplete="tel" id={tpl("{0}-phone", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+                <Input type="email" name="email" autocomplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+              </Field>
+            </Grid>
+          </CheckoutStep>
+          <CheckoutStep number="2" title={labels.address} text={labels.addressText} layout={layout}>
+            <Field label={labels.street} htmlFor={tpl("{0}-street", id)}>
+              <Input type="text" name="street" autocomplete="address-line1" id={tpl("{0}-street", id)} data-testid="field" />
+            </Field>
+            <Grid cols="2-4" class="gap-4">
+              <Field label={labels.house} htmlFor={tpl("{0}-house", id)}>
+                <Input type="text" name="house" id={tpl("{0}-house", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.flat} htmlFor={tpl("{0}-flat", id)}>
+                <Input type="text" name="flat" id={tpl("{0}-flat", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.entrance} htmlFor={tpl("{0}-entrance", id)}>
+                <Input type="text" name="entrance" id={tpl("{0}-entrance", id)} data-testid="field" />
+              </Field>
+              <Field label={labels.floor} htmlFor={tpl("{0}-floor", id)}>
+                <Input type="text" name="floor" id={tpl("{0}-floor", id)} data-testid="field" />
+              </Field>
+            </Grid>
+            <Field label={labels.comment} htmlFor={tpl("{0}-comment", id)}>
+              <Textarea rows={4} name="comment" id={tpl("{0}-comment", id)} data-testid="field" />
+            </Field>
+          </CheckoutStep>
+          <CheckoutStep number="3" title={labels.slot} text={labels.slotText} layout={layout}>
+            {((days?.length ?? 0) > 0) ? (
+              <SlotGrid days={days} name={tpl("{0}-slot", id)} item="plain" />
+            ) : null}
+          </CheckoutStep>
+          <CheckoutStep number="4" title={labels.payment} text={labels.paymentText} layout={layout}>
+            {((payments?.length ?? 0) > 0) ? (
+              <PaymentOptions payments={payments} name={tpl("{0}-payment", id)} checked="payment-card" />
+            ) : null}
+          </CheckoutStep>
+          <CheckoutSubmit id={id} consent={labels.consent} submit={labels.submit} legal={labels.legal} />
+        </Form>
+        {((summary as string) === "aside") ? (
+          <Box class="lg:sticky lg:top-8" data-testid="aside">
+            <CartSummaryCard
+              field={tpl("{0}-promo", id)}
+              lines={lines}
+              rows={rows}
+              promos={promos}
+              labels={totals}
+              items="show"
+            />
+          </Box>
+        ) : null}
+      </Box>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/checkout-form.types.ts b/packages/solid/ui/src/blocks/checkout-form.types.ts
new file mode 100644
index 0000000..204a76d
--- /dev/null
+++ b/packages/solid/ui/src/blocks/checkout-form.types.ts
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type CheckoutLabels = {
+  contacts: string;
+  contactsText: string;
+  name: string;
+  phone: string;
+  email: string;
+  address: string;
+  addressText: string;
+  street: string;
+  house: string;
+  flat: string;
+  entrance: string;
+  floor: string;
+  comment: string;
+  slot: string;
+  slotText: string;
+  payment: string;
+  paymentText: string;
+  consent: string;
+  submit: string;
+  legal: string;
+};
diff --git a/packages/solid/ui/src/blocks/comparison-table.tsx b/packages/solid/ui/src/blocks/comparison-table.tsx
new file mode 100644
index 0000000..bf78f1c
--- /dev/null
+++ b/packages/solid/ui/src/blocks/comparison-table.tsx
@@ -0,0 +1,104 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+/**
+ * Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a
+ * check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle
+ * column), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { CompareMark } from "../components/compare-mark";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { CompareRow, CompareLabels } from "./comparison-table.types";
+
+export type ComparisonTableProps = {
+  id: string;
+  title: string;
+  rows: CompareRow[];
+  empty?: string;
+  labels: CompareLabels;
+  highlight?: "none" | "middle";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function ComparisonTable({
+  id,
+  title,
+  rows,
+  empty = "",
+  labels,
+  highlight = "none",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ComparisonTableProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((rows?.length ?? 0) === 0) ? (
+        <EmptyState icon="table" title={empty} />
+      ) : (
+        <Box class="relative w-full overflow-x-auto">
+          <Table class="w-full text-left text-sm" data-testid="compare">
+            <TableCaption class="sr-only">
+              {labels.caption}
+            </TableCaption>
+            <TableHead>
+              <TableRow>
+                <TableHeadCell scope="col" class="py-4">
+                  {labels.feature}
+                </TableHeadCell>
+                <TableHeadCell scope="col" class="py-4">
+                  {labels.a}
+                </TableHeadCell>
+                <TableHeadCell
+                  scope="col"
+                  class={cn("py-4", (((highlight as string) === "middle") ? "bg-muted" : ""))}
+                  data-highlight={(((highlight as string) === "middle") ? "true" : "false")}
+                >
+                  {labels.b}
+                </TableHeadCell>
+                <TableHeadCell scope="col" class="py-4">
+                  {labels.c}
+                </TableHeadCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <For each={rows ?? []}>{(row) => (
+                <TableRow class="border-t border-border" data-testid="item">
+                  <TableHeadCell scope="row" class={cn("font-medium", (((density as string) === "compact") ? "py-2" : "py-4"))}>
+                    {row.label}
+                  </TableHeadCell>
+                  <TableCell class={cn((((density as string) === "compact") ? "py-2" : "py-4"))}>
+                    <CompareMark value={row.a} yes={labels.yes} no={labels.no} />
+                  </TableCell>
+                  <TableCell
+                    class={cn(
+                      (((density as string) === "compact") ? "py-2" : "py-4"),
+                      (((highlight as string) === "middle") ? "bg-muted font-semibold" : "")
+                    )}
+                  >
+                    <CompareMark value={row.b} yes={labels.yes} no={labels.no} />
+                  </TableCell>
+                  <TableCell class={(((density as string) === "compact") ? "py-2" : "py-4")}>
+                    <CompareMark value={row.c} yes={labels.yes} no={labels.no} />
+                  </TableCell>
+                </TableRow>
+              )}</For>
+            </TableBody>
+          </Table>
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/comparison-table.types.ts b/packages/solid/ui/src/blocks/comparison-table.types.ts
new file mode 100644
index 0000000..bb0984c
--- /dev/null
+++ b/packages/solid/ui/src/blocks/comparison-table.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type CompareRow = {
+  id: string;
+  label: string;
+  a: string;
+  b: string;
+  c: string;
+};
+
+export type CompareLabels = {
+  caption: string;
+  feature: string;
+  a: string;
+  b: string;
+  c: string;
+  yes: string;
+  no: string;
+};
diff --git a/packages/solid/ui/src/blocks/contact-form.tsx b/packages/solid/ui/src/blocks/contact-form.tsx
new file mode 100644
index 0000000..e42d836
--- /dev/null
+++ b/packages/solid/ui/src/blocks/contact-form.tsx
@@ -0,0 +1,117 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach
+ * us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone
+ * (default, muted).
+ */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Checkbox } from "../primitives/checkbox/checkbox";
+import { Form } from "../primitives/form/form";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Textarea } from "../primitives/textarea/textarea";
+import { Field } from "../components/field";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { ContactLabels } from "./contact-form.types";
+import type { Feature } from "./feature-grid.types";
+
+export type ContactFormProps = {
+  id: string;
+  title: string;
+  text: string;
+  labels: ContactLabels;
+  details: Feature[];
+  layout?: "single" | "split";
+  fields?: "short" | "full";
+  terms?: "show" | "hide";
+  level?: 1 | 2;
+  page?: "section" | "full";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ContactForm({
+  id,
+  title,
+  text,
+  labels,
+  details,
+  layout = "single",
+  fields = "full",
+  terms = "hide",
+  level = 2,
+  page = "section",
+  tone = "default",
+  landmarkLabel,
+}: ContactFormProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      heading={{ level }}
+      tone={tone}
+      density={(((page as string) === "full") ? "roomy" : "default")}
+      align={(((page as string) === "full") ? "center" : "start")}
+      measure={(((layout as string) === "single") ? "xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      <Grid cols={(((layout as string) === "split") ? "1-2" : "1")} class="items-start gap-8">
+        <Form method="dialog" class="w-full gap-4" data-testid="contact-form">
+          {((fields as string) === "full") ? (
+            <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+              <Input type="text" name="name" autocomplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+            </Field>
+          ) : null}
+          <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+            <Input type="email" name="email" autocomplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+          </Field>
+          {((fields as string) === "full") ? (
+            <Field label={labels.subject} htmlFor={tpl("{0}-subject", id)}>
+              <Input type="text" name="subject" id={tpl("{0}-subject", id)} data-testid="field" />
+            </Field>
+          ) : null}
+          <Field label={labels.message} htmlFor={tpl("{0}-message", id)}>
+            <Textarea rows={4} name="message" id={tpl("{0}-message", id)} data-testid="field" />
+          </Field>
+          {((terms as string) === "show") ? (
+            <Group gap="2" align="center" class={cn("w-fit", "")}>
+              <Checkbox name="consent" id={tpl("{0}-consent", id)} />
+              <Label for={tpl("{0}-consent", id)} class="text-sm">
+                {labels.consent}
+              </Label>
+            </Group>
+          ) : null}
+          <Button variant="default" size="default" type="submit" class="w-fit" data-testid="submit">
+            {labels.submit}
+          </Button>
+        </Form>
+        {(((layout as string) === "split") && ((details?.length ?? 0) > 0)) ? (
+          <Stack gap="4" data-testid="details">
+            <For each={details ?? []}>{(d) => (
+              <Group gap="4" align="start" data-testid="detail">
+                <LucideIcon name={d.icon} size={20} />
+                <Stack gap="0">
+                  <Text size="base" weight="semibold">
+                    {d.title}
+                  </Text>
+                  <Text size="sm" class="text-muted-foreground">
+                    {d.text}
+                  </Text>
+                </Stack>
+              </Group>
+            )}</For>
+          </Stack>
+        ) : null}
+      </Grid>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/contact-form.types.ts b/packages/solid/ui/src/blocks/contact-form.types.ts
new file mode 100644
index 0000000..d8ed802
--- /dev/null
+++ b/packages/solid/ui/src/blocks/contact-form.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+
+export type ContactLabels = {
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+  consent: string;
+  submit: string;
+};
diff --git a/packages/solid/ui/src/blocks/cookie-banner.tsx b/packages/solid/ui/src/blocks/cookie-banner.tsx
new file mode 100644
index 0000000..18caa25
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cookie-banner.tsx
@@ -0,0 +1,91 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings.
+ * Axes: layout (bar, card), actions (two, three), tone (default, muted).
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { cn, tpl } from "../utils";
+
+export type CookieBannerProps = {
+  id: string;
+  title: string;
+  text: string;
+  accept: string;
+  decline: string;
+  settings?: string;
+  layout?: "bar" | "card";
+  actions?: "two" | "three";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function CookieBanner({
+  id,
+  title,
+  text,
+  accept,
+  decline,
+  settings,
+  layout = "bar",
+  actions = "two",
+  tone = "default",
+  landmarkLabel,
+}: CookieBannerProps) {
+  return (
+    <Block
+      tag="section"
+      aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+      data-testid="cookie"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      <Container class={cn("mx-auto w-full max-w-6xl px-4", "py-4")} data-slot="container">
+        <Box
+          class={cn(
+            "flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border",
+            (((tone as string) === "muted") ? "bg-muted" : "bg-card"),
+            (
+              (layout as string) === "bar" ? "md:flex-row md:items-center md:justify-between"
+              : "mx-auto w-full max-w-md"
+            )
+          )}
+        >
+          <Group gap="4" align="start" class="min-w-0">
+            <LucideIcon name="cookie" size={24} />
+            <Stack gap="2">
+              <Title as={2} size="base" weight="bold" id={tpl("{0}-title", id)}>
+                {title}
+              </Title>
+              <Text size="sm" class="text-muted-foreground">
+                {text}
+              </Text>
+            </Stack>
+          </Group>
+          <Group gap="2" class="shrink-0 flex-wrap">
+            {(((actions as string) === "three") && settings) ? (
+              <Button variant="ghost" size="sm" type="button" data-testid="cookie-settings">
+                {settings}
+              </Button>
+            ) : null}
+            <Button variant="outline" size="sm" type="button" data-testid="cookie-decline">
+              {decline}
+            </Button>
+            <Button variant="default" size="sm" type="button" data-testid="cookie-accept">
+              {accept}
+            </Button>
+          </Group>
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/credit-packs.tsx b/packages/solid/ui/src/blocks/credit-packs.tsx
new file mode 100644
index 0000000..d2c9c0d
--- /dev/null
+++ b/packages/solid/ui/src/blocks/credit-packs.tsx
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+/**
+ * Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile,
+ * row), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { at, cn, fitCols, fmtMoney } from "../utils";
+import type { Pack } from "./credit-packs.types";
+
+export type CreditPacksProps = {
+  id: string;
+  title: string;
+  packs: Pack[];
+  empty?: string;
+  badges: Record<string, string>;
+  buy: string;
+  cols?: "2" | "4";
+  item?: "tile" | "row";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function CreditPacks({
+  id,
+  title,
+  packs,
+  empty = "",
+  badges,
+  buy,
+  cols = "4",
+  item = "tile",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: CreditPacksProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      measure={(((item as string) === "row") ? "2xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((packs?.length ?? 0) === 0) ? (
+        <EmptyState icon="coins" title={empty} />
+      ) : (
+        <Grid
+          cols={
+            (item as string) === "row" ? "1"
+            : fitCols((((cols as string) === "2") ? "1-2" : "1-4"), (packs?.length ?? 0))
+          }
+          class="gap-4"
+          data-testid="items"
+        >
+          <For each={packs ?? []}>{(pack) => (
+            <Card
+              variant="default"
+              class={cn(
+                "h-full",
+                (
+                  (item as string) === "row" ? "gap-4 p-4"
+                  : (density as string) === "compact" ? "gap-4 p-4"
+                  : ""
+                )
+              )}
+              data-testid="item"
+              data-badge={pack.badge}
+            >
+              <CardContent
+                class={cn(
+                  "flex h-full gap-4",
+                  (((item as string) === "row") ? "flex-row flex-wrap items-center justify-between" : "flex-col")
+                )}
+              >
+                <Stack gap="2" align="start" class={cn("min-w-0", (((item as string) === "row") ? "flex-1" : ""))}>
+                  {(pack.badge || (((item as string) !== "row") && (packs.filter((i) => i["badge"]).length > 0))) ? (
+                    <Box class="flex min-h-6 items-center" data-slot="badge-slot">
+                      {pack.badge ? (
+                        <Badge variant="default" size="default" class="w-fit shrink-0" data-testid="badge">
+                          {at(badges, pack.badge)}
+                        </Badge>
+                      ) : null}
+                    </Box>
+                  ) : null}
+                  <Stack gap="0" class="min-w-0">
+                    <Title as={3} size="xl" weight="bold">
+                      {pack.name}
+                    </Title>
+                    <Text size="2xl" weight="bold">
+                      {fmtMoney(pack.price, pack.currency)}
+                    </Text>
+                  </Stack>
+                </Stack>
+                <Button
+                  variant={((pack.badge === "popular") ? "default" : "outline")}
+                  size="sm"
+                  type="button"
+                  class={cn("w-fit shrink-0", (((item as string) === "row") ? "" : "mt-auto"))}
+                  data-testid="buy"
+                >
+                  {buy}
+                </Button>
+              </CardContent>
+            </Card>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/credit-packs.types.ts b/packages/solid/ui/src/blocks/credit-packs.types.ts
new file mode 100644
index 0000000..d320871
--- /dev/null
+++ b/packages/solid/ui/src/blocks/credit-packs.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type Pack = {
+  id: string;
+  name: string;
+  credits: number;
+  price: number;
+  currency: string;
+  badge: string;
+};
diff --git a/packages/solid/ui/src/blocks/cta-band.tsx b/packages/solid/ui/src/blocks/cta-band.tsx
new file mode 100644
index 0000000..19e4352
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cta-band.tsx
@@ -0,0 +1,116 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+/**
+ * A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split
+ * picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof
+ * (none, quote), density.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { CtaActions } from "../components/cta-actions";
+import { CtaBanner } from "../blocks/cta-banner";
+import { MediaFrame } from "../components/media-frame";
+import { QuoteProof } from "../components/quote-proof";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { CtaQuote } from "./cta-band.types";
+import type { ActionSet } from "../components/cta-actions.types";
+
+export type CtaBandProps = {
+  id: string;
+  title: string;
+  text: string;
+  actions: ActionSet;
+  quote?: CtaQuote;
+  layout?: "card" | "band" | "split" | "row" | "banner";
+  tone?: "default" | "muted";
+  proof?: "none" | "quote";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function CtaBand({
+  id,
+  title,
+  text,
+  actions,
+  quote,
+  layout = "card",
+  tone = "muted",
+  proof = "none",
+  density = "default",
+  landmarkLabel,
+}: CtaBandProps) {
+  const center = ((layout as string) === "band") || ((layout as string) === "banner");
+  return (
+    <>
+      {((layout as string) === "banner") ? (
+        <CtaBanner
+          id={id}
+          title={title}
+          text={text}
+          cta={actions.cta}
+          href={actions.href}
+          tone={tone}
+          landmarkLabel={landmarkLabel}
+        />
+      ) : ((layout as string) === "row") ? (
+        <Block
+          tag="section"
+          class="py-8"
+          aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+          data-testid="section"
+          data-tone={tone}
+          data-density={density}
+          aria-label={landmarkLabel}
+        >
+          <Container class="mx-auto w-full max-w-6xl px-4" data-slot="container">
+            <Card variant="muted">
+              <CardContent class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                <Stack gap="2" class="min-w-0">
+                  <Title as={2} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+                    {title}
+                  </Title>
+                  <Text size="base" class="text-muted-foreground">
+                    {text}
+                  </Text>
+                </Stack>
+                {((proof as string) === "quote") ? (
+                  <QuoteProof quote={quote?.text} quoteBy={quote?.by} center={center} />
+                ) : null}
+                <CtaActions id={id} actions={actions} center={center} />
+              </CardContent>
+            </Card>
+          </Container>
+        </Block>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={text}
+          layout={(((layout as string) === "split") ? "split" : "stack")}
+          align={(center ? "center" : "start")}
+          boxed={((layout as string) === "card")}
+          media={{ show: ((layout as string) === "split") }}
+          tone={tone}
+          density={density}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame alt={title} ratio="4/3" />
+          )}
+        >
+          {((proof as string) === "quote") ? (
+            <QuoteProof quote={quote?.text} quoteBy={quote?.by} center={center} />
+          ) : null}
+          <CtaActions id={id} actions={actions} center={center} />
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/cta-band.types.ts b/packages/solid/ui/src/blocks/cta-band.types.ts
new file mode 100644
index 0000000..e12f8ec
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cta-band.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type CtaQuote = {
+  /** a customer quote, shown when `proof` is quote */
+  text?: string;
+  /** who said it */
+  by?: string;
+};
diff --git a/packages/solid/ui/src/blocks/cta-banner.tsx b/packages/solid/ui/src/blocks/cta-banner.tsx
new file mode 100644
index 0000000..0227b6e
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cta-banner.tsx
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+/** A centered closing card: heading, one sentence and a pill button. Sizes from the default preset. */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { defaults } from "../presets/defaults";
+import { cn, tpl } from "../utils";
+
+export type CtaBannerProps = {
+  id: string;
+  title: string;
+  text: string;
+  cta: string;
+  href?: string;
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function CtaBanner({ id, title, text, cta, href, tone = "muted", landmarkLabel }: CtaBannerProps) {
+  return (
+    <Block
+      tag="section"
+      class="w-full py-0"
+      aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+      data-testid="section"
+      data-tone={tone}
+      data-density="compact"
+      aria-label={landmarkLabel}
+    >
+      <Box
+        class={cn("flex w-full flex-col items-center gap-10 bg-muted px-6 text-center", defaults.cta.panel)}
+        data-testid="cta-banner"
+      >
+        <Title
+          as={2}
+          size="3xl"
+          weight="semibold"
+          class={cn(defaults.cta.title, "leading-9")}
+          id={tpl("{0}-title", id)}
+        >
+          {title}
+        </Title>
+        <Text size="xs" weight="semibold" class={cn("leading-5 text-muted-foreground", defaults.cta.text)}>
+          {text}
+        </Text>
+        <Button variant="default" size="lg" href={href} class={defaults.cta.button} data-testid="action-primary">
+          {cta}
+        </Button>
+      </Box>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/cta-proof.tsx b/packages/solid/ui/src/blocks/cta-proof.tsx
new file mode 100644
index 0000000..aa2a652
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cta-proof.tsx
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/cta-proof.ts
+/**
+ * A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note.
+ * Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos,
+ * features, stats, rows, zones), mediaSide, tone.
+ */
+import { type JSX } from "solid-js";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { CtaProofItems } from "../components/cta-proof-items";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import type { CtaContent } from "./cta-proof.types";
+import type { Logo } from "./logo-cloud.types";
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Zone } from "./zone-table.types";
+import type { LinkActions } from "./error-page.types";
+
+export type CtaProofProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  actions: LinkActions;
+  content: CtaContent;
+  note?: string;
+  layout?: "center" | "split";
+  proof?: "logos" | "features" | "stats" | "rows" | "zones";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function CtaProof({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  actions,
+  content,
+  note = "",
+  layout = "center",
+  proof = "stats",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: CtaProofProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge }}
+      tone={tone}
+      align={(((layout as string) === "center") ? "center" : "start")}
+      layout={(((layout as string) === "center") ? "stack" : "split")}
+      media={{ show: ((layout as string) === "split"), side: mediaSide }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="4/3" />
+      )}
+    >
+      <CtaProofItems content={content} proof={proof} center={((layout as string) === "center")} />
+      <ActionGroup
+        primary={actions.cta}
+        primaryHref={actions.href}
+        secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+        secondaryHref={actions.secondaryHref}
+        align={(((layout as string) === "center") ? "center" : "start")}
+      />
+      {note ? (
+        <Text size="xs" class="text-muted-foreground" data-testid="cta-note">
+          {note}
+        </Text>
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/cta-proof.types.ts b/packages/solid/ui/src/blocks/cta-proof.types.ts
new file mode 100644
index 0000000..4169967
--- /dev/null
+++ b/packages/solid/ui/src/blocks/cta-proof.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/cta-proof.ts
+
+import type { Logo } from "./logo-cloud.types";
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Zone } from "./zone-table.types";
+
+export type CtaContent = {
+  logos: Logo[];
+  features: Feature[];
+  stats: Stat[];
+  zones: Zone[];
+};
diff --git a/packages/solid/ui/src/blocks/dashboard-overview.tsx b/packages/solid/ui/src/blocks/dashboard-overview.tsx
new file mode 100644
index 0000000..fe18bce
--- /dev/null
+++ b/packages/solid/ui/src/blocks/dashboard-overview.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+/**
+ * The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the
+ * activity side by side, stacked: one below the other), cols (2, 4), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { BarChart } from "../components/bar-chart";
+import { Panel } from "../components/panel";
+import { SectionFrame } from "../components/section-frame";
+import { StatTile } from "../components/stat-tile";
+import { Timeline } from "../components/timeline";
+import { tpl } from "../utils";
+import type { OverviewChart, OverviewActivity } from "./dashboard-overview.types";
+import type { Metric } from "./metric-row.types";
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+
+export type DashboardOverviewProps = {
+  id: string;
+  title: string;
+  metrics: Metric[];
+  chart: OverviewChart;
+  activity: OverviewActivity;
+  layout?: "split" | "stacked";
+  cols?: "2" | "4";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function DashboardOverview({
+  id,
+  title,
+  metrics,
+  chart,
+  activity,
+  layout = "split",
+  cols = "4",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: DashboardOverviewProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      <Stack gap="6" align="stretch">
+        {((metrics?.length ?? 0) > 0) ? (
+          <Grid cols={(((cols as string) === "2") ? "1-2" : "1-4")} class="gap-4" data-testid="items">
+            <For each={metrics ?? []}>{(m) => (
+              <Box data-testid="item">
+                <StatTile label={m.label} value={m.value} icon={m.icon} hint={m.hint} />
+              </Box>
+            )}</For>
+          </Grid>
+        ) : null}
+        <Grid cols={(((layout as string) === "split") ? "1-2" : "1")} class="items-stretch gap-4" data-testid="panels">
+          {((chart.series?.length ?? 0) > 0) ? (
+            <Panel title={chart.title} description={chart.text} id={tpl("{0}-chart", id)} class="h-full">
+              <BarChart bars={chart.series} label={chart.summary} height={144} />
+            </Panel>
+          ) : null}
+          {((activity.events?.length ?? 0) > 0) ? (
+            <Panel title={activity.title} description={activity.text} id={tpl("{0}-feed", id)} class="h-full">
+              <Timeline items={activity.events} />
+            </Panel>
+          ) : null}
+        </Grid>
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/dashboard-overview.types.ts b/packages/solid/ui/src/blocks/dashboard-overview.types.ts
new file mode 100644
index 0000000..f10bd5b
--- /dev/null
+++ b/packages/solid/ui/src/blocks/dashboard-overview.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+
+export type OverviewChart = {
+  title: string;
+  text: string;
+  /** the chart's accessible summary */
+  summary: string;
+  /** the bars */
+  series: Point[];
+};
+
+export type OverviewActivity = {
+  title: string;
+  text: string;
+  events: Event[];
+};
diff --git a/packages/solid/ui/src/blocks/dashboard-shell.tsx b/packages/solid/ui/src/blocks/dashboard-shell.tsx
new file mode 100644
index 0000000..60f4d53
--- /dev/null
+++ b/packages/solid/ui/src/blocks/dashboard-shell.tsx
@@ -0,0 +1,112 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/shells.ts
+/**
+ * The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset:
+ * over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide,
+ * rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries
+ * the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a
+ * framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { ShellContent } from "../components/shell-content";
+import { ShellFooter } from "../components/shell-footer";
+import { ShellSidebar } from "../components/shell-sidebar";
+import { ShellTopbar } from "../components/shell-topbar";
+import { cn, tpl } from "../utils";
+import type { ShellNav } from "./dashboard-shell.types";
+import type { NavLink } from "./nav-bar.types";
+
+export type DashboardShellProps = {
+  id: string;
+  title: string;
+  level?: 1 | 2;
+  nav: ShellNav;
+  topbar?: "full" | "inset" | "none";
+  search?: "show" | "hide";
+  sidebar?: "wide" | "rail" | "collapsed" | "twolevel" | "none";
+  side?: "start" | "end";
+  footer?: "full" | "inset" | "none";
+  content?: "grid" | "split" | "list";
+  frame?: "window" | "page";
+  landmarkLabel?: string;
+};
+
+export function DashboardShell({
+  id,
+  title,
+  level = 2,
+  nav,
+  topbar = "full",
+  search = "show",
+  sidebar = "wide",
+  side = "start",
+  footer = "none",
+  content = "grid",
+  frame = "window",
+  landmarkLabel,
+}: DashboardShellProps) {
+  const titleId = tpl("{0}-title", id);
+  return (
+    <Block
+      tag="section"
+      class={(((frame as string) === "window") ? "bg-background py-12" : "bg-background")}
+      id={id}
+      aria-labelledby={(landmarkLabel ? undefined : titleId)}
+      data-testid="dashboard-shell"
+      data-topbar={topbar}
+      data-sidebar={sidebar}
+      data-footer={footer}
+      aria-label={landmarkLabel}
+    >
+      <Box class={(((frame as string) === "window") ? "mx-auto w-full max-w-6xl px-4" : "")}>
+        <Box
+          class={cn(
+            "flex flex-col overflow-hidden bg-background",
+            (((frame as string) === "window") ? "min-h-160 rounded border border-border" : "min-h-screen")
+          )}
+          data-testid="window"
+        >
+          {((topbar as string) === "full") ? (
+            <ShellTopbar
+              nav={nav}
+              links={(((sidebar as string) === "none") ? "show" : "hide")}
+              search={search}
+              landmarkLabel={landmarkLabel}
+            />
+          ) : null}
+          <Box class={cn("flex min-h-0 flex-1", (((side as string) === "end") ? "flex-row-reverse" : ""))}>
+            {((sidebar as string) !== "none") ? (
+              <ShellSidebar
+                nav={nav}
+                mode={sidebar}
+                side={side}
+                brand={(((topbar as string) === "full") ? "hide" : "show")}
+                landmarkLabel={landmarkLabel}
+              />
+            ) : null}
+            <Box class="flex min-w-0 flex-1 flex-col">
+              {((topbar as string) === "inset") ? (
+                <ShellTopbar
+                  nav={nav}
+                  brand={(((sidebar as string) === "none") ? "show" : "hide")}
+                  links={(((sidebar as string) === "none") ? "show" : "hide")}
+                  search={search}
+                  landmarkLabel={landmarkLabel}
+                />
+              ) : null}
+              <ShellContent title={title} titleId={titleId} level={level} content={content} />
+              {((footer as string) === "inset") ? (
+                <ShellFooter nav={nav} place="inset" landmarkLabel={landmarkLabel} />
+              ) : null}
+            </Box>
+          </Box>
+          {((footer as string) === "full") ? (
+            <ShellFooter nav={nav} landmarkLabel={landmarkLabel} />
+          ) : null}
+        </Box>
+      </Box>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/dashboard-shell.types.ts b/packages/solid/ui/src/blocks/dashboard-shell.types.ts
new file mode 100644
index 0000000..1fbb633
--- /dev/null
+++ b/packages/solid/ui/src/blocks/dashboard-shell.types.ts
@@ -0,0 +1,21 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/shells.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type ShellNav = {
+  label: string;
+  brand: string;
+  links: NavLink[];
+  current: string;
+  subTitle: string;
+  sub: NavLink[];
+  subCurrent: string;
+  search: string;
+  shortcut: string;
+  expand: string;
+  userName: string;
+  copyright: string;
+  footerLabel: string;
+  footer: NavLink[];
+};
diff --git a/packages/solid/ui/src/blocks/delivery-info.tsx b/packages/solid/ui/src/blocks/delivery-info.tsx
new file mode 100644
index 0000000..dcdd25c
--- /dev/null
+++ b/packages/solid/ui/src/blocks/delivery-info.tsx
@@ -0,0 +1,117 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+/**
+ * How delivery works: the facts as icon cards, then the zones with their time and the order that ships free.
+ * Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones),
+ * tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { SectionFrame } from "../components/section-frame";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { DeliveryLabels } from "./delivery-info.types";
+import type { Feature } from "./feature-grid.types";
+import type { Zone } from "./zone-table.types";
+
+export type DeliveryInfoProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  facts: Feature[];
+  zones: Zone[];
+  labels: DeliveryLabels;
+  layout?: "full" | "facts" | "split";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function DeliveryInfo({
+  id,
+  title,
+  lead = "",
+  facts,
+  zones,
+  labels,
+  layout = "full",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: DeliveryInfoProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      <Box
+        class={cn(
+          "grid grid-cols-1 gap-8",
+          (((layout as string) === "split") ? "items-start md:grid-cols-2" : "")
+        )}
+      >
+        {((facts?.length ?? 0) > 0) ? (
+          <Grid cols={(((layout as string) === "split") ? "1-2" : "1-4")} class="gap-4" data-testid="facts">
+            <For each={facts ?? []}>{(f) => (
+              <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="fact">
+                <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                  <LucideIcon name={f.icon} size={20} />
+                </Box>
+                <Stack gap="2">
+                  <Text size="sm" weight="semibold">
+                    {f.title}
+                  </Text>
+                  <Text size="sm" class="text-muted-foreground">
+                    {f.text}
+                  </Text>
+                </Stack>
+              </Stack>
+            )}</For>
+          </Grid>
+        ) : null}
+        {(((layout as string) !== "facts") && ((zones?.length ?? 0) > 0)) ? (
+          <Stack gap="4" align="stretch">
+            <Title as={3} size="lg" weight="bold">
+              {labels.zones}
+            </Title>
+            <Box
+              class={
+                (layout as string) === "split" ? "flex flex-col gap-4"
+                : "grid grid-cols-1 gap-4 md:grid-cols-3"
+              }
+            >
+              <For each={zones ?? []}>{(z) => (
+                <Stack
+                  gap="2"
+                  class={
+                    (layout as string) === "split" ? "border-b border-border pb-4"
+                    : "rounded bg-card inset-ring inset-ring-border p-6"
+                  }
+                  data-testid="zone"
+                >
+                  <Group gap="4" align="baseline" justify="between">
+                    <Text size="sm" weight="semibold">
+                      {z.name}
+                    </Text>
+                    <Badge variant="secondary" size="default">
+                      {z.time}
+                    </Badge>
+                  </Group>
+                  <Text size="sm" class="text-muted-foreground">
+                    {z.area}
+                  </Text>
+                  <Text size="sm" weight="medium">
+                    {tpl(labels.freeFrom, fmtMoney(z.freeFrom, z.currency))}
+                  </Text>
+                </Stack>
+              )}</For>
+            </Box>
+          </Stack>
+        ) : null}
+      </Box>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/delivery-info.types.ts b/packages/solid/ui/src/blocks/delivery-info.types.ts
new file mode 100644
index 0000000..ab50895
--- /dev/null
+++ b/packages/solid/ui/src/blocks/delivery-info.types.ts
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type DeliveryLabels = {
+  zones: string;
+  freeFrom: string;
+};
diff --git a/packages/solid/ui/src/blocks/empty-panel.tsx b/packages/solid/ui/src/blocks/empty-panel.tsx
new file mode 100644
index 0000000..a038051
--- /dev/null
+++ b/packages/solid/ui/src/blocks/empty-panel.tsx
@@ -0,0 +1,90 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain.
+ * Axes: layout (card, plain), actions (button, none), size (default, compact).
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+
+export type EmptyPanelProps = {
+  id: string;
+  title: string;
+  text: string;
+  icon?: string;
+  cta?: string;
+  ctaHref?: string;
+  layout?: "card" | "plain";
+  actions?: "button" | "none";
+  visual?: "icon" | "image";
+  size?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function EmptyPanel({
+  id,
+  title,
+  text,
+  icon = "inbox",
+  cta,
+  ctaHref,
+  layout = "card",
+  actions = "button",
+  visual = "icon",
+  size = "default",
+  landmarkLabel,
+}: EmptyPanelProps) {
+  return (
+    <Block tag="section" aria-label={(landmarkLabel ?? title)} data-testid="empty">
+      <Container
+        class={cn("mx-auto w-full max-w-6xl px-4", (((size as string) === "compact") ? "py-4" : "py-8"))}
+        data-slot="container"
+      >
+        {((visual as string) === "image") ? (
+          <Stack gap="4" align="center" class="mx-auto max-w-md text-center" data-testid="empty-visual">
+            <MediaFrame alt={title} ratio="4/3" class="w-full max-w-xs" />
+            <Title as={2} size="2xl" weight="bold">
+              {title}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {text}
+            </Text>
+            {((actions as string) === "button") ? (
+              <Button variant="default" size="sm" href={ctaHref} data-testid="empty-action">
+                {cta}
+              </Button>
+            ) : null}
+          </Stack>
+        ) : (
+          <EmptyState
+            icon={icon}
+            title={title}
+            text={text}
+            class={cn(
+              "mx-auto max-w-xl",
+              (((layout as string) === "plain") ? "bg-transparent inset-ring-0" : ""),
+              (((size as string) === "compact") ? "py-6" : "")
+            )}
+            action={(
+              <>
+                {((actions as string) === "button") ? (
+                  <Button variant="default" size="sm" href={ctaHref} data-testid="empty-action">
+                    {cta}
+                  </Button>
+                ) : null}
+              </>
+            )}
+          />
+        )}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/error-page.tsx b/packages/solid/ui/src/blocks/error-page.tsx
new file mode 100644
index 0000000..b9d8375
--- /dev/null
+++ b/packages/solid/ui/src/blocks/error-page.tsx
@@ -0,0 +1,79 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way
+ * back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two),
+ * tone.
+ */
+import { type JSX } from "solid-js";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { LinkActions } from "./error-page.types";
+
+export type ErrorPageProps = {
+  id: string;
+  title: string;
+  text: string;
+  status: string;
+  actions: LinkActions;
+  level?: 1 | 2;
+  layout?: "centered" | "split";
+  code?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ErrorPage({
+  id,
+  title,
+  text,
+  status,
+  actions,
+  level = 1,
+  layout = "centered",
+  code = "show",
+  tone = "default",
+  landmarkLabel,
+}: ErrorPageProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      heading={{ level }}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "split") }}
+      align={(((layout as string) === "split") ? "start" : "center")}
+      tone={tone}
+      density="roomy"
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="4/3" />
+      )}
+    >
+      {((code as string) === "show") ? (
+        <Text
+          size="4xl"
+          weight="bold"
+          class={cn(
+            "text-8xl text-muted-foreground",
+            (((layout as string) === "split") ? "" : "text-center")
+          )}
+          data-testid="error-code"
+        >
+          {status}
+        </Text>
+      ) : null}
+      <ActionGroup
+        primary={actions.cta}
+        primaryHref={actions.href}
+        secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+        secondaryHref={actions.secondaryHref}
+        align={(((layout as string) === "split") ? "start" : "center")}
+      />
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/error-page.types.ts b/packages/solid/ui/src/blocks/error-page.types.ts
new file mode 100644
index 0000000..e117bb4
--- /dev/null
+++ b/packages/solid/ui/src/blocks/error-page.types.ts
@@ -0,0 +1,13 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type LinkActions = {
+  /** one or two links */
+  mode?: "one" | "two";
+  /** primary action label */
+  cta: string;
+  /** the address of the primary action; none: a button, not a link */
+  href?: string;
+  secondary?: string;
+  secondaryHref?: string;
+};
diff --git a/packages/solid/ui/src/blocks/faq-list.tsx b/packages/solid/ui/src/blocks/faq-list.tsx
new file mode 100644
index 0000000..bdcec8b
--- /dev/null
+++ b/packages/solid/ui/src/blocks/faq-list.tsx
@@ -0,0 +1,121 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+/**
+ * A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without
+ * script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search
+ * field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters
+ * by `filter.category`), density, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SearchField } from "../components/search-field";
+import { SectionFrame } from "../components/section-frame";
+import { Switcher } from "../components/switcher";
+import { SwitcherItem } from "../components/switcher-item";
+import { tpl } from "../utils";
+import type { Faq, FaqTab, FaqSearch, FaqFilter } from "./faq-list.types";
+
+export type FaqListProps = {
+  id: string;
+  title: string;
+  items: Faq[];
+  search?: FaqSearch;
+  filter?: FaqFilter;
+  layout?: "accordion" | "chat";
+  cols?: "1" | "2";
+  empty?: string;
+  multiple?: boolean;
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+  onQuery?: (text: string) => void;
+  onCategory?: (value: string) => void;
+};
+
+export function FaqList({
+  id,
+  title,
+  items,
+  search,
+  filter,
+  layout = "accordion",
+  cols = "1",
+  empty = "",
+  multiple = false,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onQuery,
+  onCategory,
+}: FaqListProps) {
+  const inCategory = items.filter((i) => !filter?.category || i["category"] === filter?.category);
+  const shown = inCategory.filter((i) => !search?.query || String(i["question"]).toLowerCase().includes(String(search?.query).toLowerCase()));
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      measure={(((layout as string) === "chat") ? "2xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {(search?.mode === "field") ? (
+        <SearchField
+          label={(search?.label ?? "")}
+          placeholder={search?.label}
+          value={(search?.query ?? "")}
+          onValue={(arg: string) => onQuery?.(arg)}
+        />
+      ) : null}
+      {(filter?.mode === "categories") ? (
+        <Switcher label={filter?.label}>
+          <For each={filter?.tabs ?? []}>{(tab) => (
+            <SwitcherItem active={(tab.value === filter?.category)} onClick={() => onCategory?.(tab.value)}>
+              {tab.title}
+            </SwitcherItem>
+          )}</For>
+        </Switcher>
+      ) : null}
+      {((shown?.length ?? 0) === 0) ? (
+        <EmptyState icon="circle-question-mark" title={empty} />
+      ) : null}
+      {((layout as string) === "chat") ? (
+        <Stack gap="4" align="stretch" data-testid="faq">
+          <For each={shown ?? []}>{(item) => (
+            <Stack gap="2" align="stretch" data-testid="faq-item">
+              <Box class="ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground">
+                <Text size="sm" weight="semibold">
+                  {item.question}
+                </Text>
+              </Box>
+              <Box class="mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4">
+                <Text size="sm">
+                  {item.answer}
+                </Text>
+              </Box>
+            </Stack>
+          )}</For>
+        </Stack>
+      ) : (
+        <Grid cols={(((cols as string) === "2") ? "1-2" : "1")} class="items-start gap-x-8" data-testid="faq">
+          <For each={shown ?? []}>{(item) => (
+            <Disclosure variant="item" name={(multiple ? undefined : tpl("{0}-faq", (id ?? "faq")))} data-testid="faq-item">
+              <Summary variant="item">
+                {item.question}
+              </Summary>
+              <Text size="sm" class="pb-4 text-muted-foreground">
+                {item.answer}
+              </Text>
+            </Disclosure>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/faq-list.types.ts b/packages/solid/ui/src/blocks/faq-list.types.ts
new file mode 100644
index 0000000..27fd513
--- /dev/null
+++ b/packages/solid/ui/src/blocks/faq-list.types.ts
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type Faq = {
+  id: string;
+  question: string;
+  answer: string;
+  category?: string;
+};
+
+export type FaqTab = {
+  id: string;
+  title: string;
+  value: string;
+};
+
+export type FaqSearch = {
+  /** field: a search field above the questions */
+  mode?: "none" | "field";
+  /** accessible name and placeholder of the search field */
+  label?: string;
+  /** the text the questions are filtered by */
+  query?: string;
+};
+
+export type FaqFilter = {
+  /** categories: tabs above the questions */
+  mode?: "none" | "categories";
+  /** the category tabs */
+  tabs?: FaqTab[];
+  /** accessible name of the tabs */
+  label?: string;
+  /** the value of the chosen tab */
+  category?: string;
+};
diff --git a/packages/solid/ui/src/blocks/faq-split.tsx b/packages/solid/ui/src/blocks/faq-split.tsx
new file mode 100644
index 0000000..f25960b
--- /dev/null
+++ b/packages/solid/ui/src/blocks/faq-split.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/faq-split.ts
+/**
+ * Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside:
+ * the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder
+ * beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { FaqCards } from "../components/faq-cards";
+import { FaqDisclosures } from "../components/faq-disclosures";
+import { FaqFinder } from "../components/faq-finder";
+import { FaqHelp } from "../components/faq-help";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Question, FaqSplitLabels } from "./faq-split.types";
+import type { Feature } from "./feature-grid.types";
+import type { FaqTab } from "./faq-list.types";
+
+export type FaqSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  items: Question[];
+  channels: Feature[];
+  topics: FaqTab[];
+  labels: FaqSplitLabels;
+  layout?: "head" | "aside" | "media" | "search" | "cards";
+  cards?: "grid3" | "grid4" | "icons";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function FaqSplit({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  items,
+  channels,
+  topics,
+  labels,
+  layout = "head",
+  cards = "grid3",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: FaqSplitProps) {
+  return (
+    <>
+      {((items?.length ?? 0) > 0) ? (
+        <>
+          {((layout as string) === "cards") ? (
+            <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+              <FaqCards items={items} labels={labels} cards={cards} />
+            </SectionFrame>
+          ) : null}
+          {((layout as string) === "head") ? (
+            <SectionFrame
+              id={id}
+              title={title}
+              lead={lead}
+              heading={{ badge }}
+              tone={tone}
+              layout="split"
+              media={{ show: true, side: "end", align: "start" }}
+              landmarkLabel={landmarkLabel}
+              aside={(
+                <FaqDisclosures items={items} name={tpl("{0}-faq", id)} />
+              )}
+            >
+              <Box>
+                <Button variant="default" size="default" data-testid="faq-cta">
+                  {labels.cta}
+                </Button>
+              </Box>
+            </SectionFrame>
+          ) : null}
+          {((layout as string) === "aside") ? (
+            <SectionFrame
+              id={id}
+              title={title}
+              lead={lead}
+              heading={{ badge }}
+              tone={tone}
+              layout="split"
+              media={{ show: true, side: "end", align: "start" }}
+              landmarkLabel={landmarkLabel}
+              aside={(
+                <FaqHelp labels={labels} channels={channels} landmarkLabel={landmarkLabel} />
+              )}
+            >
+              <FaqDisclosures items={items} name={tpl("{0}-faq", id)} />
+            </SectionFrame>
+          ) : null}
+          {((layout as string) === "media") ? (
+            <SectionFrame
+              id={id}
+              title={title}
+              lead={lead}
+              heading={{ badge }}
+              tone={tone}
+              layout="split"
+              media={{ show: true, side: mediaSide, align: "start" }}
+              landmarkLabel={landmarkLabel}
+              aside={(
+                <MediaFrame alt={title} ratio="4/3" />
+              )}
+            >
+              <FaqDisclosures items={items} name={tpl("{0}-faq", id)} />
+              <Box>
+                <Button variant="default" size="default" data-testid="faq-cta">
+                  {labels.cta}
+                </Button>
+              </Box>
+            </SectionFrame>
+          ) : null}
+          {((layout as string) === "search") ? (
+            <SectionFrame
+              id={id}
+              title={title}
+              lead={lead}
+              heading={{ badge }}
+              tone={tone}
+              layout="split"
+              media={{ show: true, side: mediaSide }}
+              landmarkLabel={landmarkLabel}
+              aside={(
+                <MediaFrame alt={title} ratio="4/3" />
+              )}
+            >
+              <FaqFinder items={items} labels={labels} topics={topics} />
+            </SectionFrame>
+          ) : null}
+        </>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/faq-split.types.ts b/packages/solid/ui/src/blocks/faq-split.types.ts
new file mode 100644
index 0000000..626adfc
--- /dev/null
+++ b/packages/solid/ui/src/blocks/faq-split.types.ts
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/faq-split.ts
+
+export type Question = {
+  id: string;
+  question: string;
+  answer: string;
+  category: string;
+  icon: string;
+  href?: string;
+};
+
+export type FaqSplitLabels = {
+  cta: string;
+  more: string;
+  asideTitle: string;
+  asideText: string;
+  asideCta: string;
+  search: string;
+  popular: string;
+  query?: string;
+};
diff --git a/packages/solid/ui/src/blocks/feature-accordion.tsx b/packages/solid/ui/src/blocks/feature-accordion.tsx
new file mode 100644
index 0000000..65f8e6f
--- /dev/null
+++ b/packages/solid/ui/src/blocks/feature-accordion.tsx
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the
+ * first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureAccordionProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  expand?: "first" | "none";
+  media?: "none" | "image";
+  multiple?: boolean;
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function FeatureAccordion({
+  id,
+  title,
+  features,
+  empty = "",
+  expand = "first",
+  media = "none",
+  multiple = false,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: FeatureAccordionProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      layout={(((media as string) === "image") ? "split" : "stack")}
+      media={{ show: ((media as string) === "image") }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="4/3" />
+      )}
+    >
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Stack gap="0" align="stretch" data-testid="items">
+          <For each={features ?? []}>{(f, iOf) => { const i = iOf(); return (
+            <Disclosure
+              variant="item"
+              name={(multiple ? undefined : tpl("{0}-accordion", (id ?? "accordion")))}
+              open={(((expand as string) === "first") && (i === 0))}
+              data-testid="item"
+            >
+              <Summary variant="item">
+                <Inline class="flex min-w-0 items-center justify-start gap-4">
+                  <LucideIcon name={f.icon} size={20} />
+                  <Inline class="text-base font-semibold">
+                    {f.title}
+                  </Inline>
+                </Inline>
+              </Summary>
+              <Text size="sm" class="pb-4 text-muted-foreground">
+                {f.text}
+              </Text>
+            </Disclosure>
+          ); }}</For>
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/feature-grid.tsx b/packages/solid/ui/src/blocks/feature-grid.tsx
new file mode 100644
index 0000000..a964f4b
--- /dev/null
+++ b/packages/solid/ui/src/blocks/feature-grid.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+/**
+ * A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are
+ * Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon),
+ * media side (rows), density, tone.
+ */
+import { type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Link } from "../primitives/link/link";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { FeatureCards } from "../components/feature-cards";
+import { FeatureRows } from "../components/feature-rows";
+import { SectionFrame } from "../components/section-frame";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Feature } from "./feature-grid.types";
+import type { HeadLink } from "../components/section-frame.types";
+
+export type FeatureGridProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  action?: HeadLink;
+  layout?: "grid" | "rows";
+  cols?: "1-2" | "1-3" | "1-4";
+  item?: "card" | "tile" | "cell";
+  mediaSide?: "end" | "start" | "alternate";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function FeatureGrid({
+  id,
+  title,
+  features,
+  empty = "",
+  action,
+  layout = "grid",
+  cols = "1-3",
+  item = "card",
+  mediaSide = "end",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: FeatureGridProps) {
+  return (
+    <>
+      {((item as string) === "cell") ? (
+        <SectionFrame id={id} tone={tone} density={density} measure="fill" class="py-0" landmarkLabel={landmarkLabel}>
+          <Group gap="4" align="center" justify="between" class="w-full">
+            <Title as={2} size="sm" weight="semibold" class="leading-7" id={(id + "-title")}>
+              {title}
+            </Title>
+            {(action?.label && action?.href) ? (
+              <Link
+                href={action?.href}
+                variant="default"
+                class={cn(defaults.text.tiny, "shrink-0 font-medium leading-5")}
+                data-testid="section-action"
+              >
+                {action?.label}
+              </Link>
+            ) : null}
+          </Group>
+          {((features?.length ?? 0) === 0) ? (
+            <EmptyState icon="layout-grid" title={empty} />
+          ) : (
+            <FeatureCards features={features} cols={cols} item={item} />
+          )}
+        </SectionFrame>
+      ) : (
+        <SectionFrame id={id} title={title} action={action} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+          {((features?.length ?? 0) === 0) ? (
+            <EmptyState icon="layout-grid" title={empty} />
+          ) : ((layout as string) === "rows") ? (
+            <FeatureRows features={features} mediaSide={mediaSide} />
+          ) : (
+            <FeatureCards features={features} cols={cols} item={item} />
+          )}
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/feature-grid.types.ts b/packages/solid/ui/src/blocks/feature-grid.types.ts
new file mode 100644
index 0000000..e60c78e
--- /dev/null
+++ b/packages/solid/ui/src/blocks/feature-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type Feature = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  href?: string;
+};
diff --git a/packages/solid/ui/src/blocks/feature-showcase.tsx b/packages/solid/ui/src/blocks/feature-showcase.tsx
new file mode 100644
index 0000000..ed4bf98
--- /dev/null
+++ b/packages/solid/ui/src/blocks/feature-showcase.tsx
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/feature-showcase.ts
+/**
+ * Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text
+ * and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4),
+ * tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { SectionFrame } from "../components/section-frame";
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureShowcaseProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  features: Feature[];
+  empty?: string;
+  more: string;
+  item?: "picture" | "panel";
+  cols?: "3" | "4";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function FeatureShowcase({
+  id,
+  title,
+  lead = "",
+  features,
+  empty = "",
+  more,
+  item = "picture",
+  cols = "3",
+  tone = "default",
+  landmarkLabel,
+}: FeatureShowcaseProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} align="center" landmarkLabel={landmarkLabel}>
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Box
+          class={
+            (cols as string) === "4" ? "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4"
+            : "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3"
+          }
+        >
+          <For each={features ?? []}>{(f) => (
+            <Card variant="default" class="h-full gap-4 overflow-hidden" data-testid="showcase-card">
+              {((item as string) === "picture") ? (
+                <MediaFrame alt={f.title} />
+              ) : (
+                <Box
+                  class="flex aspect-video items-center justify-center rounded bg-muted text-foreground"
+                  data-testid="showcase-panel"
+                >
+                  <LucideIcon name={f.icon} size={32} />
+                </Box>
+              )}
+              <CardContent class="flex flex-1 flex-col gap-2">
+                <Title as={3} size="base" weight="semibold">
+                  {f.title}
+                </Title>
+                <Text size="sm" class="text-muted-foreground">
+                  {f.text}
+                </Text>
+                {((item as string) === "picture") ? (
+                  <MenuEntry href={f.href} class="mt-auto gap-2 pt-2 text-sm font-medium" size="sm" testid="read">
+                    {more}
+                    <LucideIcon name="arrow-right" size={16} />
+                  </MenuEntry>
+                ) : null}
+              </CardContent>
+            </Card>
+          )}</For>
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/feature-split.tsx b/packages/solid/ui/src/blocks/feature-split.tsx
new file mode 100644
index 0000000..5f22683
--- /dev/null
+++ b/packages/solid/ui/src/blocks/feature-split.tsx
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/feature-split.ts
+/**
+ * Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as
+ * cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four
+ * metric cards and the actions), mediaSide, tone.
+ */
+import { type JSX } from "solid-js";
+import { ActionGroup } from "../components/action-group";
+import { FeatureCards } from "../components/feature-cards";
+import { FeatureMetricCards } from "../components/feature-metric-cards";
+import { FeaturePairs } from "../components/feature-pairs";
+import { FeatureStatRows } from "../components/feature-stat-rows";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { LinkActions } from "./error-page.types";
+
+export type FeatureSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  features: Feature[];
+  stats: Stat[];
+  actions: LinkActions;
+  layout?: "grid" | "cards" | "stats" | "metrics";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function FeatureSplit({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 2,
+  features,
+  stats,
+  actions,
+  layout = "grid",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: FeatureSplitProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge, level }}
+      tone={tone}
+      layout="split"
+      media={{ show: true, side: mediaSide }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio={(((layout as string) === "stats") ? "1/1" : "4/3")} />
+      )}
+    >
+      {((layout as string) === "grid") ? (
+        <>
+          {((features?.length ?? 0) > 0) ? (
+            <FeaturePairs features={features} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "cards") ? (
+        <>
+          {((features?.length ?? 0) > 0) ? (
+            <FeatureCards features={features} cols="1-2" item="tile" />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "stats") ? (
+        <>
+          {((features?.length ?? 0) > 0) ? (
+            <FeatureStatRows features={features} stats={stats} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "metrics") ? (
+        <>
+          {((stats?.length ?? 0) > 0) ? (
+            <FeatureMetricCards stats={stats} />
+          ) : null}
+        </>
+      ) : null}
+      {(((layout as string) === "cards") || ((layout as string) === "metrics")) ? (
+        <ActionGroup
+          primary={actions.cta}
+          primaryHref={actions.href}
+          secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+          secondaryHref={actions.secondaryHref}
+        />
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/feature-sticky.tsx b/packages/solid/ui/src/blocks/feature-sticky.tsx
new file mode 100644
index 0000000..6ab1db7
--- /dev/null
+++ b/packages/solid/ui/src/blocks/feature-sticky.tsx
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description
+ * that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item
+ * (plain, card), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureStickyProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  active?: string;
+  mediaSide?: "end" | "start";
+  item?: "plain" | "card";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function FeatureSticky({
+  id,
+  title,
+  features,
+  empty = "",
+  active = "",
+  mediaSide = "end",
+  item = "plain",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: FeatureStickyProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Grid cols="1-2" class="items-start gap-8" data-testid="sticky">
+          <Box
+            class={cn(
+              "md:sticky md:top-8",
+              (((mediaSide as string) === "start") ? "md:order-first" : "md:order-last")
+            )}
+            data-testid="sticky-media"
+          >
+            <MediaFrame alt={title} ratio="4/3" />
+          </Box>
+          <Stack gap={(((density as string) === "compact") ? "4" : "8")} align="stretch" data-testid="items">
+            <For each={features ?? []}>{(f) => (
+              <Stack
+                gap="2"
+                class={cn(
+                  (((item as string) === "card") ? "rounded bg-card inset-ring inset-ring-border p-6" : "py-4"),
+                  ((f.id === active) ? "inset-ring inset-ring-foreground" : "")
+                )}
+                data-testid="item"
+                aria-current={((f.id === active) ? "true" : undefined)}
+              >
+                <LucideIcon name={f.icon} size={24} />
+                <Title as={3} size="2xl" weight="bold">
+                  {f.title}
+                </Title>
+                <Text size="base" class="text-muted-foreground">
+                  {f.text}
+                </Text>
+              </Stack>
+            )}</For>
+          </Stack>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/feature-tabs.tsx b/packages/solid/ui/src/blocks/feature-tabs.tsx
new file mode 100644
index 0000000..3efe92e
--- /dev/null
+++ b/packages/solid/ui/src/blocks/feature-tabs.tsx
@@ -0,0 +1,91 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab
+ * (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the
+ * picture, stack: picture below), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { Switcher } from "../components/switcher";
+import { SwitcherItem } from "../components/switcher-item";
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureTabsProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  tabsLabel: string;
+  active?: string;
+  panel?: "split" | "stack";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+  onSelect?: (id: string) => void;
+};
+
+export function FeatureTabs({
+  id,
+  title,
+  features,
+  empty = "",
+  tabsLabel,
+  active = "",
+  panel = "split",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onSelect,
+}: FeatureTabsProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Stack gap="6" align="stretch">
+          <Switcher label={tabsLabel} class="w-fit max-w-full flex-wrap">
+            <For each={features ?? []}>{(f, iOf) => { const i = iOf(); return (
+              <SwitcherItem
+                active={((f.id === active) || (((active as string) === "") && (i === 0)))}
+                onClick={() => onSelect?.(f.id)}
+              >
+                {f.title}
+              </SwitcherItem>
+            ); }}</For>
+          </Switcher>
+          <For each={features ?? []}>{(f, iOf) => { const i = iOf(); return (
+            <>
+              {((f.id === active) || (((active as string) === "") && (i === 0))) ? (
+                <Grid
+                  cols={(((panel as string) === "split") ? "1-2" : "1")}
+                  class="items-center gap-8"
+                  data-testid="tab-panel"
+                  role="tabpanel"
+                >
+                  <Stack gap="4">
+                    <LucideIcon name={f.icon} size={24} />
+                    <Title as={3} size="2xl" weight="bold">
+                      {f.title}
+                    </Title>
+                    <Text size="base" class="text-muted-foreground">
+                      {f.text}
+                    </Text>
+                  </Stack>
+                  <MediaFrame alt={f.title} ratio="4/3" />
+                </Grid>
+              ) : null}
+            </>
+          ); }}</For>
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/footer-split.tsx b/packages/solid/ui/src/blocks/footer-split.tsx
new file mode 100644
index 0000000..e49706a
--- /dev/null
+++ b/packages/solid/ui/src/blocks/footer-split.tsx
@@ -0,0 +1,145 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/footer-split.ts
+/**
+ * A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the
+ * link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand
+ * and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two
+ * actions, or the community channels and figures), mediaSide, tone.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { FooterBrand } from "../components/footer-brand";
+import { FooterChannels } from "../components/footer-channels";
+import { FooterContacts } from "../components/footer-contacts";
+import { FooterFigures } from "../components/footer-figures";
+import { FooterGroupCards } from "../components/footer-group-cards";
+import { FooterLinkColumns } from "../components/footer-link-columns";
+import { FooterPoints } from "../components/footer-points";
+import { FooterSignupCard } from "../components/footer-signup-card";
+import { FooterSitemap } from "../components/footer-sitemap";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+import type { FooterExtras, FooterSplitLabels } from "./footer-split.types";
+import type { MegaGroup } from "./mega-menu.types";
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type FooterSplitProps = {
+  id?: string;
+  label: string;
+  brand: string;
+  tagline: string;
+  copyright: string;
+  groups: MegaGroup[];
+  extras: FooterExtras;
+  labels: FooterSplitLabels;
+  layout?: "stats" | "points" | "links" | "newsletter" | "contacts" | "channels";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function FooterSplit({
+  id = "footer",
+  label,
+  brand,
+  tagline,
+  copyright,
+  groups,
+  extras,
+  labels,
+  layout = "stats",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: FooterSplitProps) {
+  return (
+    <Block
+      tag="footer"
+      class={cn("border-t border-border", (((tone as string) === "muted") ? "bg-muted" : ""))}
+      data-testid="footer-split"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      <Container class={cn("mx-auto w-full max-w-6xl px-4", "py-12")} data-slot="container">
+        {((layout as string) === "stats") ? (
+          <Stack gap="8" align="stretch">
+            <Group gap="6" align="start" justify="between" class="flex-wrap">
+              <Stack gap="6" align="start">
+                <FooterBrand brand={brand} tagline={tagline} />
+                <FooterFigures extras={extras} />
+              </Stack>
+              <FooterSitemap href={extras.sitemapHref} label={labels.sitemap} />
+            </Group>
+            <FooterGroupCards label={label} groups={groups} landmarkLabel={landmarkLabel} />
+            <Box class="border-t border-border pt-6">
+              <Text size="sm" class="text-muted-foreground">
+                {copyright}
+              </Text>
+            </Box>
+          </Stack>
+        ) : (
+          <Box class="grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
+            {((mediaSide as string) === "start") ? (
+              <MediaFrame alt={brand} ratio="4/3" />
+            ) : null}
+            <Stack gap="8" align="stretch">
+              {(((layout as string) === "points") || ((layout as string) === "links")) ? (
+                <FooterBrand brand={brand} tagline={tagline} />
+              ) : (
+                <Stack gap="2" align="start">
+                  <Text size="xl" weight="bold">
+                    {(((layout as string) === "newsletter") ? labels.loopTitle : (((layout as string) === "channels") ? labels.joinTitle : labels.title))}
+                  </Text>
+                  <Text size="sm" class="text-muted-foreground">
+                    {(((layout as string) === "newsletter") ? labels.loopText : (((layout as string) === "channels") ? labels.joinText : labels.text))}
+                  </Text>
+                </Stack>
+              )}
+              {((layout as string) === "points") ? (
+                <FooterPoints extras={extras} title={labels.points} />
+              ) : null}
+              {((layout as string) === "newsletter") ? (
+                <FooterSignupCard id={id} labels={labels} />
+              ) : null}
+              {(((layout as string) === "links") || ((layout as string) === "newsletter")) ? (
+                <FooterLinkColumns label={label} groups={groups} landmarkLabel={landmarkLabel} />
+              ) : null}
+              {((layout as string) === "contacts") ? (
+                <>
+                  <FooterContacts extras={extras} />
+                  <ActionGroup
+                    primary={labels.cta}
+                    primaryHref={extras.ctaHref}
+                    secondary={labels.secondary}
+                    secondaryHref={extras.secondaryHref}
+                  />
+                </>
+              ) : null}
+              {((layout as string) === "channels") ? (
+                <>
+                  <FooterChannels extras={extras} />
+                  <FooterFigures extras={extras} />
+                </>
+              ) : null}
+              <Box class="border-t border-border pt-6">
+                <Text size="sm" class="text-muted-foreground">
+                  {copyright}
+                </Text>
+              </Box>
+            </Stack>
+            {((mediaSide as string) !== "start") ? (
+              <MediaFrame alt={brand} ratio="4/3" />
+            ) : null}
+          </Box>
+        )}
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/footer-split.types.ts b/packages/solid/ui/src/blocks/footer-split.types.ts
new file mode 100644
index 0000000..031f2fc
--- /dev/null
+++ b/packages/solid/ui/src/blocks/footer-split.types.ts
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/footer-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type FooterExtras = {
+  stats: Stat[];
+  points: Feature[];
+  contacts: Feature[];
+  channels: Feature[];
+  sitemapHref?: string;
+  ctaHref?: string;
+  secondaryHref?: string;
+};
+
+export type FooterSplitLabels = {
+  title: string;
+  text: string;
+  loopTitle: string;
+  loopText: string;
+  joinTitle: string;
+  joinText: string;
+  sitemap: string;
+  points: string;
+  signup: string;
+  email: string;
+  subscribe: string;
+  note: string;
+  cta: string;
+  secondary: string;
+};
diff --git a/packages/solid/ui/src/blocks/hero-classic.tsx b/packages/solid/ui/src/blocks/hero-classic.tsx
new file mode 100644
index 0000000..4832595
--- /dev/null
+++ b/packages/solid/ui/src/blocks/hero-classic.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+/**
+ * The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster).
+ * Axes: layout, media kind and side, scale, tone, density, actions mode.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { ActionGroup } from "../components/action-group";
+import { Backdrop } from "../components/backdrop";
+import { CodeWindow } from "../components/code-window";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { TopicChips } from "../components/topic-chips";
+import { cn, tpl } from "../utils";
+import type { HeroMedia } from "./hero-classic.types";
+import type { ActionSet } from "../components/cta-actions.types";
+import type { CodeLine } from "../components/code-window.types";
+import type { Topic } from "../components/topic-chips.types";
+
+export type HeroClassicProps = {
+  id: string;
+  title: string;
+  text: string;
+  level?: 1 | 2;
+  badge?: string;
+  topics?: Topic[];
+  actions?: ActionSet;
+  media?: HeroMedia;
+  layout?: "centered" | "split";
+  scale?: "default" | "display";
+  tone?: "default" | "muted" | "inverse";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function HeroClassic({
+  id,
+  title,
+  text,
+  level = 1,
+  badge,
+  topics,
+  actions,
+  media,
+  layout = "centered",
+  scale = "default",
+  tone = "default",
+  density = "roomy",
+  landmarkLabel,
+}: HeroClassicProps) {
+  const mediaKind = media?.kind ?? "none";
+  const mediaSide = media?.side ?? "end";
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      heading={{ level, scale, badge }}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      align={(((layout as string) === "split") ? "start" : "center")}
+      media={{
+        show: (((mediaKind as string) === "image") || ((mediaKind as string) === "code") || ((mediaKind as string) === "cluster")),
+        side: mediaSide,
+      }}
+      tone={tone}
+      density={density}
+      class={
+        (((mediaKind as string) === "backdrop") ? "image" : "none") === "image" ? "relative isolate overflow-hidden"
+        : ""
+      }
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <>
+          {(((mediaKind as string) === "code") && media?.lines && ((media?.lines?.length ?? 0) > 0) && media?.codeTitle && media?.prompt) ? (
+            <CodeWindow title={media?.codeTitle} prompt={media?.prompt} lines={media?.lines} />
+          ) : null}
+          {((mediaKind as string) === "cluster") ? (
+            <Grid cols="3" class="items-end gap-4" data-testid="cluster">
+              <Box class={cn("w-full", "")}>
+                <MediaFrame alt={title} ratio="3/4" />
+              </Box>
+              <Box class={cn("w-full", "-translate-y-4")}>
+                <MediaFrame alt={title} ratio="4/3" />
+              </Box>
+              <Box class={cn("w-full", "")}>
+                <MediaFrame alt={title} ratio="3/4" />
+              </Box>
+            </Grid>
+          ) : null}
+          {(((mediaKind as string) === "image")) ? (
+            <MediaFrame alt={title} ratio="4/3" />
+          ) : null}
+        </>
+      )}
+    >
+      <Backdrop kind={(((mediaKind as string) === "backdrop") ? "image" : "none")} alt={title} />
+      {actions?.cta ? (
+        <>
+          {(actions?.mode === "form") ? (
+            <Box
+              class={cn("w-full max-w-xl", (((layout as string) === "centered") ? "mx-auto" : ""))}
+              data-testid="email-form"
+            >
+              <Label for={tpl("{0}-email", id)} class="sr-only">
+                {actions?.emailLabel}
+              </Label>
+              <Group gap="2" align="start" class="w-full flex-wrap">
+                <Input
+                  type="text"
+                  name="prompt"
+                  class="min-w-0 flex-1"
+                  placeholder={actions?.emailLabel}
+                  id={tpl("{0}-email", id)}
+                  data-testid="field"
+                />
+                <Button variant="default" size="default" href={actions?.href} data-testid="submit">
+                  {actions?.cta}
+                </Button>
+              </Group>
+            </Box>
+          ) : (
+            <ActionGroup
+              primary={actions?.cta}
+              primaryHref={actions?.href}
+              secondary={((actions?.mode === "two") ? actions?.secondary : undefined)}
+              secondaryHref={actions?.secondaryHref}
+              align={(((layout as string) === "centered") ? "center" : "start")}
+            />
+          )}
+        </>
+      ) : null}
+      {(topics && ((topics?.length ?? 0) > 0)) ? (
+        <TopicChips topics={topics} />
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/hero-classic.types.ts b/packages/solid/ui/src/blocks/hero-classic.types.ts
new file mode 100644
index 0000000..dd95f46
--- /dev/null
+++ b/packages/solid/ui/src/blocks/hero-classic.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+
+import type { CodeLine } from "../components/code-window.types";
+
+export type HeroMedia = {
+  /** what the hero shows besides the text */
+  kind?: "none" | "image" | "backdrop" | "code" | "cluster";
+  /** side of the media in the split layout */
+  side?: "end" | "start";
+  /** title of the code window */
+  codeTitle?: string;
+  /** prompt line of the code window */
+  prompt?: string;
+  /** lines of the code window */
+  lines?: CodeLine[];
+};
diff --git a/packages/solid/ui/src/blocks/hero-prompt.tsx b/packages/solid/ui/src/blocks/hero-prompt.tsx
new file mode 100644
index 0000000..9b93071
--- /dev/null
+++ b/packages/solid/ui/src/blocks/hero-prompt.tsx
@@ -0,0 +1,112 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+/**
+ * A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic
+ * pills.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { ActionGroup } from "../components/action-group";
+import { HeroBadge } from "../components/hero-badge";
+import { HeroHead } from "../components/hero-head";
+import { PromptComposer } from "../components/prompt-composer";
+import { TopicChips } from "../components/topic-chips";
+import { WeightedTitle } from "../components/weighted-title";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { HeroComposer, HeroNav } from "./hero-prompt.types";
+import type { ActionSet } from "../components/cta-actions.types";
+import type { NavLink } from "./nav-bar.types";
+import type { Topic } from "../components/topic-chips.types";
+
+export type HeroPromptProps = {
+  title: string;
+  level?: 1 | 2;
+  badge?: string;
+  badgeMark?: string;
+  actions?: ActionSet;
+  composer?: HeroComposer;
+  nav?: HeroNav;
+  topics?: Topic[];
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function HeroPrompt({
+  title,
+  level = 1,
+  badge,
+  badgeMark,
+  actions,
+  composer,
+  nav,
+  topics,
+  density = "roomy",
+  landmarkLabel,
+}: HeroPromptProps) {
+  return (
+    <Block
+      tag="section"
+      class={cn(
+        "flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70",
+        defaults.hero.band
+      )}
+      aria-labelledby={(landmarkLabel ? undefined : "home-hero-title")}
+      data-testid="section"
+      data-tone="inverse"
+      data-density={density}
+      data-chrome="nav"
+      aria-label={landmarkLabel}
+    >
+      <Container class={cn("mx-auto w-full px-8", defaults.hero.container)} data-slot="container">
+        <Stack gap="0" align="stretch">
+          <HeroHead
+            brand={nav?.brand}
+            links={nav?.links}
+            current={nav?.current}
+            login={nav?.login}
+            loginHref={nav?.loginHref}
+            skip={nav?.skip}
+            navLabel={nav?.label}
+            cta={actions?.cta}
+            href={actions?.href}
+            landmarkLabel={landmarkLabel}
+          />
+          <Stack
+            gap="0"
+            align="center"
+            class={cn("mx-auto w-full pt-24 pb-16", defaults.hero.column)}
+            data-testid="hero-column"
+          >
+            {badge ? (
+              <HeroBadge label={badge} mark={badgeMark} />
+            ) : null}
+            <WeightedTitle id="home-hero-title" title={title} weights={defaults.hero.titleWeights} level={level} />
+            {(actions?.mode === "form") ? (
+              <PromptComposer
+                label={actions?.emailLabel}
+                attachLabel={composer?.attachLabel}
+                modelLabel={composer?.modelLabel}
+                send={actions?.cta}
+                href={actions?.href}
+              />
+            ) : actions?.cta ? (
+              <ActionGroup
+                primary={actions?.cta}
+                primaryHref={actions?.href}
+                secondary={((actions?.mode === "two") ? actions?.secondary : undefined)}
+                secondaryHref={actions?.secondaryHref}
+                align={(true ? "center" : "start")}
+              />
+            ) : null}
+            {(topics && ((topics?.length ?? 0) > 0)) ? (
+              <TopicChips topics={topics} tone="inverse" />
+            ) : null}
+          </Stack>
+        </Stack>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/hero-prompt.types.ts b/packages/solid/ui/src/blocks/hero-prompt.types.ts
new file mode 100644
index 0000000..816d54f
--- /dev/null
+++ b/packages/solid/ui/src/blocks/hero-prompt.types.ts
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type HeroComposer = {
+  /** attachment chip label */
+  attachLabel?: string;
+  /** model pill label */
+  modelLabel?: string;
+};
+
+export type HeroNav = {
+  /** brand word of the head row */
+  brand?: string;
+  /** menu links of the head row */
+  links?: NavLink[];
+  /** id of the current link */
+  current?: string;
+  login?: string;
+  loginHref?: string;
+  /** skip link text */
+  skip?: string;
+  /** accessible name of the menu */
+  label?: string;
+};
diff --git a/packages/solid/ui/src/blocks/hero-split.tsx b/packages/solid/ui/src/blocks/hero-split.tsx
new file mode 100644
index 0000000..9c628b2
--- /dev/null
+++ b/packages/solid/ui/src/blocks/hero-split.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/hero-split.ts
+/**
+ * A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes:
+ * extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote
+ * over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with
+ * captions, plans: two plan cards on the picture), mediaSide, tone.
+ */
+import { type JSX } from "solid-js";
+import { ActionGroup } from "../components/action-group";
+import { HeroSplitExtras } from "../components/hero-split-extras";
+import { HeroSplitMedia } from "../components/hero-split-media";
+import { SectionFrame } from "../components/section-frame";
+import type { HeroContent } from "./hero-split.types";
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+import type { Quote } from "./testimonial-grid.types";
+import type { OfferCard } from "./store-hero.types";
+import type { Plan } from "./pricing-card.types";
+import type { LinkActions } from "./error-page.types";
+
+export type HeroSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  actions: LinkActions;
+  content: HeroContent;
+  extra?: "stats" | "avatars" | "minis" | "quote" | "none";
+  media?: "picture" | "card" | "grid" | "plans";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function HeroSplit({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 1,
+  actions,
+  content,
+  extra = "stats",
+  media = "picture",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: HeroSplitProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge, level }}
+      layout="split"
+      media={{ show: true, side: mediaSide }}
+      tone={tone}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <HeroSplitMedia content={content} alt={title} media={media} />
+      )}
+    >
+      <HeroSplitExtras content={content} extra={extra} />
+      <ActionGroup
+        primary={actions.cta}
+        primaryHref={actions.href}
+        secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+        secondaryHref={actions.secondaryHref}
+      />
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/hero-split.types.ts b/packages/solid/ui/src/blocks/hero-split.types.ts
new file mode 100644
index 0000000..6216eb8
--- /dev/null
+++ b/packages/solid/ui/src/blocks/hero-split.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/hero-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+import type { Quote } from "./testimonial-grid.types";
+import type { OfferCard } from "./store-hero.types";
+import type { Plan } from "./pricing-card.types";
+
+export type HeroContent = {
+  stats: Stat[];
+  features: Feature[];
+  people: Quote[];
+  plans: Plan[];
+  proof: string;
+  card: OfferCard;
+};
diff --git a/packages/solid/ui/src/blocks/icon-wall.tsx b/packages/solid/ui/src/blocks/icon-wall.tsx
new file mode 100644
index 0000000..39b61b6
--- /dev/null
+++ b/packages/solid/ui/src/blocks/icon-wall.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the
+ * label, chip: icon beside it), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn, fitCols } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type IconWallProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  cols?: "3" | "4" | "6";
+  item?: "tile" | "chip";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function IconWall({
+  id,
+  title,
+  features,
+  empty = "",
+  cols = "4",
+  item = "tile",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: IconWallProps) {
+  const askedCols =
+    ((item as string) === "chip") && ((cols as string) === "6") ? "2-6"
+    : (cols as string) === "2" ? "2"
+    : (cols as string) === "3" ? "2-3"
+    : (cols as string) === "4" ? "2-4"
+    : "3-6";
+  const wallCols = fitCols(askedCols, (features?.length ?? 0));
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((features?.length ?? 0) === 0) ? (
+        <EmptyState icon="layout-grid" title={empty} />
+      ) : (
+        <Grid cols={wallCols} class="gap-4" data-testid="items">
+          <For each={features ?? []}>{(f) => (
+            <Box
+              class={cn(
+                "flex items-center gap-2",
+                "rounded bg-card inset-ring inset-ring-border",
+                (
+                  (item as string) === "tile" ? cn("flex-col justify-center text-center", (((density as string) === "compact") ? "p-4" : "p-6"))
+                  : "px-4 py-2"
+                )
+              )}
+              data-testid="item"
+            >
+              <LucideIcon name={f.icon} size={(((item as string) === "tile") ? 24 : 16)} />
+              <Text size="sm" weight="semibold">
+                {f.title}
+              </Text>
+            </Box>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/job-board.tsx b/packages/solid/ui/src/blocks/job-board.tsx
new file mode 100644
index 0000000..57aa62e
--- /dev/null
+++ b/packages/solid/ui/src/blocks/job-board.tsx
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+/**
+ * Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place,
+ * the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide),
+ * tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { JobCards } from "../components/job-cards";
+import { MenuEntry } from "../components/menu-entry";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Job, Department, JobLabels } from "./job-board.types";
+
+export type JobBoardProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  jobs: Job[];
+  departments: Department[];
+  labels: JobLabels;
+  layout?: "grid" | "grouped" | "table";
+  salary?: "show" | "hide";
+  tone?: "default" | "muted";
+  empty?: string;
+  landmarkLabel?: string;
+};
+
+export function JobBoard({
+  id,
+  title,
+  lead = "",
+  jobs,
+  departments,
+  labels,
+  layout = "grid",
+  salary = "hide",
+  tone = "default",
+  empty = "",
+  landmarkLabel,
+}: JobBoardProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      measure={(((layout as string) === "grouped") ? "3xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((jobs?.length ?? 0) === 0) ? (
+        <EmptyState icon="briefcase" title={empty} />
+      ) : ((layout as string) === "grouped") ? (
+        <Stack gap="8" align="stretch" data-testid="groups">
+          <For each={departments ?? []}>{(d) => (
+            <Stack gap="2" align="stretch" data-testid="group">
+              <Group gap="4" align="baseline" justify="between">
+                <Title as={3} size="lg" weight="bold">
+                  {d.name}
+                </Title>
+                <Text size="xs" class="text-muted-foreground">
+                  {tpl(labels.count, (jobs.filter((i) => !d.id || i["dept"] === d.id)?.length ?? 0))}
+                </Text>
+              </Group>
+              <List tag="ul" class="flex flex-col">
+                <For each={jobs.filter((i) => !d.id || i["dept"] === d.id) ?? []}>{(j) => (
+                  <ListItem
+                    class="flex flex-wrap items-center justify-between gap-4 border-b border-border py-4"
+                    data-testid="item"
+                  >
+                    <Stack gap="0">
+                      <MenuEntry href={j.href} class="font-medium">
+                        {j.title}
+                      </MenuEntry>
+                      <Text size="xs" class="text-muted-foreground">
+                        {tpl("{0}, {1}", j.location, j.type)}
+                      </Text>
+                    </Stack>
+                    <Badge variant="outline" size="default">
+                      {j.type}
+                    </Badge>
+                  </ListItem>
+                )}</For>
+              </List>
+            </Stack>
+          )}</For>
+        </Stack>
+      ) : (
+        <JobCards jobs={jobs} departments={departments} labels={labels} layout={layout} salary={salary} />
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/job-board.types.ts b/packages/solid/ui/src/blocks/job-board.types.ts
new file mode 100644
index 0000000..94f02f7
--- /dev/null
+++ b/packages/solid/ui/src/blocks/job-board.types.ts
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Job = {
+  id: string;
+  title: string;
+  dept: string;
+  location: string;
+  type: string;
+  salary: string;
+  posted: string;
+  href?: string;
+};
+
+export type Department = {
+  id: string;
+  name: string;
+};
+
+export type JobLabels = {
+  apply: string;
+  caption: string;
+  role: string;
+  team: string;
+  location: string;
+  type: string;
+  salary: string;
+  count: string;
+};
diff --git a/packages/solid/ui/src/blocks/kanban-board.tsx b/packages/solid/ui/src/blocks/kanban-board.tsx
new file mode 100644
index 0000000..1d9acbe
--- /dev/null
+++ b/packages/solid/ui/src/blocks/kanban-board.tsx
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+/**
+ * Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the
+ * person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card
+ * between lanes is a port contract.
+ */
+import { For, type JSX } from "solid-js";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { Pill } from "../components/pill";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { Lane, BoardCard } from "./kanban-board.types";
+
+export type KanbanBoardProps = {
+  id: string;
+  title: string;
+  lanes: Lane[];
+  empty?: string;
+  cards: BoardCard[];
+  countLabel: string;
+  card?: "simple" | "detail";
+  cols?: "2" | "3";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function KanbanBoard({
+  id,
+  title,
+  lanes,
+  empty = "",
+  cards,
+  countLabel,
+  card = "detail",
+  cols = "3",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: KanbanBoardProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((lanes?.length ?? 0) === 0) ? (
+        <EmptyState icon="kanban" title={empty} />
+      ) : (
+        <Grid cols={(((cols as string) === "2") ? "1-2" : "1-3")} class="items-start gap-4" data-testid="lanes">
+          <For each={lanes ?? []}>{(lane) => (
+            <Stack gap="4" align="stretch" class="rounded bg-muted p-4" data-testid="lane">
+              <Group gap="2" align="center" justify="between">
+                <Title as={3} size="base" weight="bold">
+                  {lane.title}
+                </Title>
+                <Text size="xs" class="text-muted-foreground">
+                  {tpl(countLabel, (cards.filter((i) => !lane.key || i["lane"] === lane.key)?.length ?? 0))}
+                </Text>
+              </Group>
+              <List class="m-0 flex list-none flex-col gap-2 p-0">
+                <For each={cards.filter((i) => !lane.key || i["lane"] === lane.key) ?? []}>{(c) => (
+                  <ListItem
+                    class={cn(
+                      "flex flex-col rounded bg-card inset-ring inset-ring-border",
+                      (((density as string) === "compact") ? "gap-2 p-2" : "gap-2 p-4")
+                    )}
+                    data-testid="item"
+                  >
+                    <Text size="sm" weight="semibold">
+                      {c.title}
+                    </Text>
+                    {((card as string) === "detail") ? (
+                      <Group gap="2" align="center" justify="between" class="flex-wrap">
+                        <Pill tone="blue" icon="tag">
+                          {c.tag}
+                        </Pill>
+                        <Text size="xs" class="text-muted-foreground">
+                          {c.who}
+                        </Text>
+                      </Group>
+                    ) : null}
+                  </ListItem>
+                )}</For>
+              </List>
+            </Stack>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/kanban-board.types.ts b/packages/solid/ui/src/blocks/kanban-board.types.ts
new file mode 100644
index 0000000..ec9ee64
--- /dev/null
+++ b/packages/solid/ui/src/blocks/kanban-board.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+export type Lane = {
+  id: string;
+  key: string;
+  title: string;
+};
+
+export type BoardCard = {
+  id: string;
+  lane: string;
+  title: string;
+  tag: string;
+  who: string;
+};
diff --git a/packages/solid/ui/src/blocks/logo-cloud.tsx b/packages/solid/ui/src/blocks/logo-cloud.tsx
new file mode 100644
index 0000000..f168885
--- /dev/null
+++ b/packages/solid/ui/src/blocks/logo-cloud.tsx
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/**
+ * A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row),
+ * columns (2, 3, 4), item (name, icon only, tile), density, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { LogoRibbon } from "../blocks/logo-ribbon";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Logo } from "./logo-cloud.types";
+
+export type LogoCloudProps = {
+  id: string;
+  title: string;
+  logos: Logo[];
+  empty?: string;
+  layout?: "grid" | "row";
+  cols?: "2" | "3" | "4";
+  item?: "name" | "icon" | "tile";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function LogoCloud({
+  id,
+  title,
+  logos,
+  empty = "",
+  layout = "grid",
+  cols = "4",
+  item = "name",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: LogoCloudProps) {
+  return (
+    <>
+      {((logos?.length ?? 0) === 0) ? (
+        <SectionFrame id={id} title={title} tone={tone} density={density} align="center" landmarkLabel={landmarkLabel}>
+          <EmptyState icon="building-2" title={empty} />
+        </SectionFrame>
+      ) : ((layout as string) === "row") ? (
+        <LogoRibbon id={id} title={title} logos={logos} tone={tone} density={density} landmarkLabel={landmarkLabel} />
+      ) : (
+        <SectionFrame id={id} title={title} tone={tone} density={density} align="center" landmarkLabel={landmarkLabel}>
+          <Grid
+            cols={
+              (cols as string) === "2" ? "2"
+              : (cols as string) === "3" ? "2-3"
+              : (cols as string) === "4" ? "2-4"
+              : "3-6"
+            }
+            class="gap-4"
+            data-testid="items"
+          >
+            <For each={logos ?? []}>{(logo) => (
+              <Group
+                gap="2"
+                align="center"
+                justify="center"
+                class={cn(
+                  "text-muted-foreground",
+                  (((item as string) === "tile") ? "flex-col rounded p-4 inset-ring inset-ring-border" : "")
+                )}
+                data-testid="item"
+              >
+                <LucideIcon name={logo.icon} size={24} />
+                <Text size="sm" weight="semibold" class={(((item as string) === "icon") ? "sr-only" : "")}>
+                  {logo.name}
+                </Text>
+              </Group>
+            )}</For>
+          </Grid>
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/logo-cloud.types.ts b/packages/solid/ui/src/blocks/logo-cloud.types.ts
new file mode 100644
index 0000000..e2e2d33
--- /dev/null
+++ b/packages/solid/ui/src/blocks/logo-cloud.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Logo = {
+  id: string;
+  name: string;
+  icon: string;
+};
diff --git a/packages/solid/ui/src/blocks/logo-ribbon.tsx b/packages/solid/ui/src/blocks/logo-ribbon.tsx
new file mode 100644
index 0000000..b9e9575
--- /dev/null
+++ b/packages/solid/ui/src/blocks/logo-ribbon.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/** A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset. */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Title } from "../primitives/title/title";
+import { LogoSlot } from "../components/logo-slot";
+import { SectionFrame } from "../components/section-frame";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Logo } from "./logo-cloud.types";
+
+export type LogoRibbonProps = {
+  id: string;
+  title: string;
+  logos: Logo[];
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function LogoRibbon({
+  id,
+  title,
+  logos,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: LogoRibbonProps) {
+  return (
+    <SectionFrame
+      id={id}
+      tone={tone}
+      density={density}
+      measure="fill"
+      align="center"
+      class="py-0"
+      landmarkLabel={landmarkLabel}
+    >
+      <Stack gap="6" align="center" data-testid="logos-block">
+        <Title as={2} size="xl" weight="semibold" class="leading-7" id={(id + "-title")}>
+          {title}
+        </Title>
+        <Group
+          gap="0"
+          justify="center"
+          align="start"
+          class={cn("flex w-full flex-wrap", defaults.logos.row)}
+          data-testid="items"
+        >
+          <For each={logos ?? []}>{(logo) => (
+            <LogoSlot name={logo.name} icon={logo.icon} />
+          )}</For>
+        </Group>
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/media-list.tsx b/packages/solid/ui/src/blocks/media-list.tsx
new file mode 100644
index 0000000..ed6bc8f
--- /dev/null
+++ b/packages/solid/ui/src/blocks/media-list.tsx
@@ -0,0 +1,123 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/media-list.ts
+/**
+ * A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures
+ * and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts,
+ * contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.
+ */
+import { type JSX } from "solid-js";
+import { ActionGroup } from "../components/action-group";
+import { MediaContacts } from "../components/media-contacts";
+import { MediaFigures } from "../components/media-figures";
+import { MediaFrame } from "../components/media-frame";
+import { MediaPosts } from "../components/media-posts";
+import { MediaReview } from "../components/media-review";
+import { MediaSteps } from "../components/media-steps";
+import { MediaTopics } from "../components/media-topics";
+import { SectionFrame } from "../components/section-frame";
+import type { MediaExtras, MediaListLabels } from "./media-list.types";
+import type { Stat } from "./stats-band.types";
+import type { Step } from "./steps-list.types";
+import type { Post } from "./post-card.types";
+import type { Category } from "./category-nav.types";
+import type { Feature } from "./feature-grid.types";
+import type { Review } from "./review-list.types";
+import type { LinkActions } from "./error-page.types";
+
+export type MediaListProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  extras: MediaExtras;
+  labels: MediaListLabels;
+  actions: LinkActions;
+  layout?: "figures" | "proof" | "steps" | "posts" | "topics" | "contact";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function MediaList({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  extras,
+  labels,
+  actions,
+  layout = "figures",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: MediaListProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge }}
+      tone={tone}
+      layout="split"
+      media={{ show: true, side: mediaSide }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame
+          alt={title}
+          ratio={((((layout as string) === "steps") || ((layout as string) === "topics")) ? "1/1" : "4/3")}
+        />
+      )}
+    >
+      {(((layout as string) === "figures") || ((layout as string) === "proof")) ? (
+        <>
+          {((extras.stats?.length ?? 0) > 0) ? (
+            <MediaFigures extras={extras} mode={(((layout as string) === "proof") ? "row" : "grid")} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "proof") ? (
+        <>
+          {((extras.reviews?.length ?? 0) > 0) ? (
+            <MediaReview extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "steps") ? (
+        <>
+          {((extras.steps?.length ?? 0) > 0) ? (
+            <MediaSteps extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "posts") ? (
+        <>
+          {((extras.posts?.length ?? 0) > 0) ? (
+            <MediaPosts extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "topics") ? (
+        <>
+          {((extras.topics?.length ?? 0) > 0) ? (
+            <MediaTopics extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) === "contact") ? (
+        <>
+          {((extras.channels?.length ?? 0) > 0) ? (
+            <MediaContacts extras={extras} labels={labels} />
+          ) : null}
+        </>
+      ) : null}
+      {((layout as string) !== "contact") ? (
+        <ActionGroup
+          primary={actions.cta}
+          primaryHref={actions.href}
+          secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+          secondaryHref={actions.secondaryHref}
+        />
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/media-list.types.ts b/packages/solid/ui/src/blocks/media-list.types.ts
new file mode 100644
index 0000000..54863b7
--- /dev/null
+++ b/packages/solid/ui/src/blocks/media-list.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/media-list.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Step } from "./steps-list.types";
+import type { Post } from "./post-card.types";
+import type { Category } from "./category-nav.types";
+import type { Feature } from "./feature-grid.types";
+import type { Review } from "./review-list.types";
+
+export type MediaExtras = {
+  stats: Stat[];
+  steps: Step[];
+  posts: Post[];
+  topics: Category[];
+  channels: Feature[];
+  reviews: Review[];
+};
+
+export type MediaListLabels = {
+  list: string;
+  count: string;
+  minutes: string;
+  featured: string;
+  rating: string;
+  figures: string;
+};
diff --git a/packages/solid/ui/src/blocks/mega-menu.tsx b/packages/solid/ui/src/blocks/mega-menu.tsx
new file mode 100644
index 0000000..eeb68cb
--- /dev/null
+++ b/packages/solid/ui/src/blocks/mega-menu.tsx
@@ -0,0 +1,140 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional
+ * promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed),
+ * cols (2, 3), promo (none, card).
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { MegaGroup } from "./mega-menu.types";
+import type { NavLink } from "./nav-bar.types";
+
+export type MegaMenuProps = {
+  label: string;
+  brand: string;
+  brandHref?: string;
+  trigger: string;
+  links: NavLink[];
+  groups: MegaGroup[];
+  promoTitle?: string;
+  promoText?: string;
+  panel?: "open" | "closed";
+  cols?: "2" | "3";
+  promo?: "none" | "card";
+  landmarkLabel?: string;
+};
+
+export function MegaMenu({
+  label,
+  brand,
+  brandHref,
+  trigger,
+  links,
+  groups,
+  promoTitle,
+  promoText,
+  panel = "open",
+  cols = "3",
+  promo = "none",
+  landmarkLabel,
+}: MegaMenuProps) {
+  return (
+    <>
+      <Block
+        tag="header"
+        class="relative border-b border-border bg-background"
+        data-testid="mega-menu"
+        aria-label={landmarkLabel}
+      >
+        <Container
+          class={cn("mx-auto w-full max-w-6xl px-4", "flex flex-wrap items-center gap-6 py-4")}
+          data-slot="container"
+        >
+          <MenuEntry href={brandHref} class="text-lg font-medium" testid="brand">
+            {brand}
+          </MenuEntry>
+          <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)} class="flex-1">
+            <Group gap="4" align="center" class="flex-wrap">
+              <ButtonPlain
+                type="button"
+                class="inline-flex items-center gap-2 text-sm font-semibold"
+                aria-expanded={(((panel as string) === "open") ? "true" : "false")}
+                data-testid="mega-trigger"
+              >
+                {trigger}
+                <LucideIcon name="chevron-down" size={16} />
+              </ButtonPlain>
+              <For each={links ?? []}>{(l) => (
+                <MenuEntry href={l.href} class="text-sm" current={(l.id === "")} testid="nav-link">
+                  {l.name}
+                </MenuEntry>
+              )}</For>
+            </Group>
+          </NavBlock>
+        </Container>
+      </Block>
+      {((panel as string) === "open") ? (
+        <Box class="border-t border-border bg-card" data-testid="mega-panel">
+          <Container
+            class={cn(
+              "mx-auto w-full max-w-6xl px-4",
+              "grid gap-8 py-6",
+              (((promo as string) === "card") ? "md:grid-cols-[1fr_16rem]" : "")
+            )}
+            data-slot="container"
+          >
+            {((groups?.length ?? 0) > 0) ? (
+              <Grid cols={(((cols as string) === "2") ? "1-2" : "1-3")} class="gap-6" data-testid="items">
+                <For each={groups ?? []}>{(g) => (
+                  <Stack gap="2" data-testid="item">
+                    <Group gap="2" align="center">
+                      <LucideIcon name={g.icon} size={16} />
+                      <Text size="sm" weight="semibold">
+                        {g.title}
+                      </Text>
+                    </Group>
+                    <List class="m-0 flex list-none flex-col gap-2 p-0">
+                      <For each={g.links ?? []}>{(item) => (
+                        <ListItem>
+                          <MenuEntry href={item.href} class="text-sm text-muted-foreground">
+                            {item.name}
+                          </MenuEntry>
+                        </ListItem>
+                      )}</For>
+                    </List>
+                  </Stack>
+                )}</For>
+              </Grid>
+            ) : null}
+            {((promo as string) === "card") ? (
+              <Stack gap="2" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="promo">
+                <MediaFrame alt={(promoTitle ?? "")} ratio="4/3" />
+                <Text size="base" weight="semibold">
+                  {promoTitle}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {promoText}
+                </Text>
+              </Stack>
+            ) : null}
+          </Container>
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/mega-menu.types.ts b/packages/solid/ui/src/blocks/mega-menu.types.ts
new file mode 100644
index 0000000..8177392
--- /dev/null
+++ b/packages/solid/ui/src/blocks/mega-menu.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type MegaGroup = {
+  id: string;
+  title: string;
+  icon: string;
+  links: NavLink[];
+  href?: string;
+};
diff --git a/packages/solid/ui/src/blocks/metric-row.tsx b/packages/solid/ui/src/blocks/metric-row.tsx
new file mode 100644
index 0000000..4561846
--- /dev/null
+++ b/packages/solid/ui/src/blocks/metric-row.tsx
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes:
+ * columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { StatTile } from "../components/stat-tile";
+import type { Metric } from "./metric-row.types";
+
+export type MetricRowProps = {
+  id: string;
+  title: string;
+  metrics: Metric[];
+  empty?: string;
+  cols?: "2" | "4";
+  item?: "tile" | "compact";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function MetricRow({
+  id,
+  title,
+  metrics,
+  empty = "",
+  cols = "4",
+  item = "tile",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: MetricRowProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((metrics?.length ?? 0) === 0) ? (
+        <EmptyState icon="gauge" title={empty} />
+      ) : (
+        <Grid cols={(((cols as string) === "2") ? "1-2" : "1-4")} class="gap-4" data-testid="items">
+          <For each={metrics ?? []}>{(m) => (
+            <>
+              {((item as string) === "tile") ? (
+                <Box data-testid="item">
+                  <StatTile label={m.label} value={m.value} icon={m.icon} hint={m.hint} />
+                </Box>
+              ) : (
+                <Stack gap="0" class="rounded bg-card p-4 inset-ring inset-ring-border" data-testid="item">
+                  <Group gap="2" align="center" class="text-muted-foreground">
+                    <LucideIcon name={m.icon} size={16} />
+                    <Text size="xs">
+                      {m.label}
+                    </Text>
+                  </Group>
+                  <Text size="2xl" weight="bold">
+                    {m.value}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {m.hint}
+                  </Text>
+                </Stack>
+              )}
+            </>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/metric-row.types.ts b/packages/solid/ui/src/blocks/metric-row.types.ts
new file mode 100644
index 0000000..3537e9f
--- /dev/null
+++ b/packages/solid/ui/src/blocks/metric-row.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Metric = {
+  id: string;
+  label: string;
+  value: string;
+  icon: string;
+  hint: string;
+};
diff --git a/packages/solid/ui/src/blocks/milestone-timeline.tsx b/packages/solid/ui/src/blocks/milestone-timeline.tsx
new file mode 100644
index 0000000..e3b399b
--- /dev/null
+++ b/packages/solid/ui/src/blocks/milestone-timeline.tsx
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+/**
+ * Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line
+ * beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone,
+ * density.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import type { Milestone } from "./milestone-timeline.types";
+
+export type MilestoneTimelineProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  milestones: Milestone[];
+  empty?: string;
+  layout?: "split" | "stacked" | "row";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function MilestoneTimeline({
+  id,
+  title,
+  lead = "",
+  milestones,
+  empty = "",
+  layout = "split",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: MilestoneTimelineProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      density={density}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "split"), side: "start", align: "start" }}
+      measure={(((layout as string) === "stacked") ? "2xl" : "default")}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="3/4" />
+      )}
+    >
+      {((milestones?.length ?? 0) === 0) ? (
+        <EmptyState icon="milestone" title={empty} />
+      ) : (
+        <List
+          tag="ol"
+          class={
+            (layout as string) === "row" ? "grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4"
+            : "flex flex-col gap-8 border-l border-border"
+          }
+          data-testid="items"
+        >
+          <For each={milestones ?? []}>{(m) => (
+            <ListItem
+              class={
+                (layout as string) === "row" ? "relative flex flex-col gap-2 pt-6"
+                : "relative flex flex-col gap-2 pl-6"
+              }
+              data-testid="item"
+            >
+              <Inline
+                class={
+                  (layout as string) === "row" ? "absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary"
+                  : "absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary"
+                }
+                aria-hidden="true"
+              />
+              <Group gap="2" align="center">
+                <Text size="sm" weight="semibold">
+                  {m.date}
+                </Text>
+                <Badge variant="outline" size="sm">
+                  {m.tag}
+                </Badge>
+              </Group>
+              <Title as={3} size="lg" weight="bold">
+                {m.title}
+              </Title>
+              <Text size="sm" class="text-muted-foreground">
+                {m.text}
+              </Text>
+            </ListItem>
+          )}</For>
+        </List>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/milestone-timeline.types.ts b/packages/solid/ui/src/blocks/milestone-timeline.types.ts
new file mode 100644
index 0000000..76e6bea
--- /dev/null
+++ b/packages/solid/ui/src/blocks/milestone-timeline.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Milestone = {
+  id: string;
+  date: string;
+  title: string;
+  text: string;
+  tag: string;
+};
diff --git a/packages/solid/ui/src/blocks/nav-bar.tsx b/packages/solid/ui/src/blocks/nav-bar.tsx
new file mode 100644
index 0000000..123c90a
--- /dev/null
+++ b/packages/solid/ui/src/blocks/nav-bar.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the
+ * middle with the links on both sides; search: a search field with its shortcut in the middle), over (none,
+ * media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark
+ * hero band). Turning solid on scroll is a port contract.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { MenuEntry } from "../components/menu-entry";
+import { NavActions } from "../components/nav-actions";
+import { NavBarMenu } from "../components/nav-bar-menu";
+import { NavBlock } from "../components/nav-block";
+import { NavLinks } from "../components/nav-links";
+import { OverMedia } from "../components/over-media";
+import { SearchPalette } from "../components/search-palette";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { NavLink, NavBarActions, NavSearch } from "./nav-bar.types";
+
+export type NavBarProps = {
+  label: string;
+  brand: string;
+  brandHref?: string;
+  links: NavLink[];
+  current?: string;
+  actions?: NavBarActions;
+  search: NavSearch;
+  tone?: "default" | "inverse";
+  layout?: "inline" | "split" | "search";
+  over?: "none" | "media";
+  skip?: string;
+  landmarkLabel?: string;
+  onTheme?: () => void;
+};
+
+export function NavBar({
+  label,
+  brand,
+  brandHref,
+  links,
+  current = "",
+  actions,
+  search,
+  tone = "default",
+  layout = "inline",
+  over = "none",
+  skip,
+  landmarkLabel,
+  onTheme,
+}: NavBarProps) {
+  return (
+    <Block
+      tag="header"
+      class={cn(
+        "relative",
+        (
+          (tone as string) === "inverse" ? "border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background"
+          : "border-b border-border bg-background"
+        ),
+        (((over as string) === "media") ? "isolate overflow-hidden border-0 bg-transparent" : "")
+      )}
+      data-testid="nav-bar"
+      data-layout={layout}
+      data-tone={tone}
+      aria-label={landmarkLabel}
+    >
+      <OverMedia on={((over as string) === "media")} alt={brand} />
+      {skip ? (
+        <LinkPlain
+          href="#main-content"
+          class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+            "focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border"}
+          data-testid="skip-link"
+        >
+          {skip}
+        </LinkPlain>
+      ) : null}
+      <Container class="mx-auto w-full max-w-6xl px-4" data-slot="container">
+        <Box class={cn("flex flex-wrap items-center justify-between gap-4", "py-4")}>
+          {((layout as string) === "split") ? (
+            <NavBlock
+              label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)}
+              class="w-full"
+              testid="site-nav"
+            >
+              <Grid cols="1-3" class="w-full items-center gap-4">
+                <Box class="md:justify-self-start">
+                  <NavLinks links={links} current={current} side="left" />
+                </Box>
+                <Box class="text-center">
+                  <MenuEntry href={brandHref} class="text-lg font-medium" testid="brand">
+                    {brand}
+                  </MenuEntry>
+                </Box>
+                <Group gap="4" align="center" justify="end" class="flex-wrap md:justify-self-end">
+                  <Box>
+                    <NavLinks links={links} current={current} side="right" />
+                  </Box>
+                  <NavActions
+                    login={actions?.login}
+                    loginHref={actions?.loginHref}
+                    cta={actions?.cta}
+                    ctaHref={actions?.href}
+                    actions={actions?.mode}
+                    tone={tone}
+                    themeLabel={actions?.themeLabel}
+                    onTheme={() => onTheme?.()}
+                  />
+                </Group>
+              </Grid>
+            </NavBlock>
+          ) : (
+            <>
+              <MenuEntry href={brandHref} class="text-lg font-medium" testid="brand">
+                {brand}
+              </MenuEntry>
+              {((layout as string) === "search") ? (
+                <SearchPalette label={search.label} shortcut={search.shortcut} />
+              ) : null}
+              <NavBarMenu label={label} links={links} current={current} landmarkLabel={landmarkLabel} />
+              <NavActions
+                login={actions?.login}
+                loginHref={actions?.loginHref}
+                cta={actions?.cta}
+                ctaHref={actions?.href}
+                actions={actions?.mode}
+                tone={tone}
+                themeLabel={actions?.themeLabel}
+                onTheme={() => onTheme?.()}
+              />
+            </>
+          )}
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/nav-bar.types.ts b/packages/solid/ui/src/blocks/nav-bar.types.ts
new file mode 100644
index 0000000..459db5a
--- /dev/null
+++ b/packages/solid/ui/src/blocks/nav-bar.types.ts
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+export type NavLink = {
+  id: string;
+  name: string;
+  icon: string;
+  href?: string;
+};
+
+export type NavBarActions = {
+  /** cta: show the call to action */
+  mode?: "none" | "cta";
+  /** text of the call to action */
+  cta?: string;
+  /** href of the call to action */
+  href?: string;
+  /** text of the login link; none: no login */
+  login?: string;
+  /** href of the login link; none: a button with no address */
+  loginHref?: string;
+  /** text of the theme button; none: no button */
+  themeLabel?: string;
+};
+
+export type NavSearch = {
+  /** name and placeholder of the search field (layout search) */
+  label: string;
+  /** the keys that open the search, shown in the field */
+  shortcut: string;
+};
diff --git a/packages/solid/ui/src/blocks/newsletter-form.tsx b/packages/solid/ui/src/blocks/newsletter-form.tsx
new file mode 100644
index 0000000..7b876ca
--- /dev/null
+++ b/packages/solid/ui/src/blocks/newsletter-form.tsx
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and
+ * picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start,
+ * center).
+ */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+
+export type NewsletterFormProps = {
+  id: string;
+  title: string;
+  text: string;
+  label: string;
+  submit: string;
+  consent?: string;
+  layout?: "inline" | "stacked" | "split";
+  terms?: "show" | "hide";
+  tone?: "default" | "muted";
+  align?: "start" | "center";
+  landmarkLabel?: string;
+};
+
+export function NewsletterForm({
+  id,
+  title,
+  text,
+  label,
+  submit,
+  consent,
+  layout = "inline",
+  terms = "hide",
+  tone = "default",
+  align = "center",
+  landmarkLabel,
+}: NewsletterFormProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      tone={tone}
+      align={align}
+      layout={(((layout as string) === "split") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "split") }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="4/3" />
+      )}
+    >
+      <Form
+        method="dialog"
+        class={cn("w-full max-w-md", (((align as string) === "center") ? "mx-auto" : ""))}
+        data-testid="newsletter-form"
+      >
+        <Label for={tpl("{0}-email", id)} class="sr-only">
+          {label}
+        </Label>
+        <Group
+          gap="2"
+          align="start"
+          class={cn("w-full", (((layout as string) === "stacked") ? "flex-col items-stretch" : "flex-wrap"))}
+        >
+          <Input type="email" name="email" class="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+          <Button variant="default" size="default" type="submit" data-testid="submit">
+            {submit}
+          </Button>
+        </Group>
+        {(((terms as string) === "show") && consent) ? (
+          <Text size="xs" class="text-muted-foreground" data-testid="consent">
+            {consent}
+          </Text>
+        ) : null}
+      </Form>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/order-summary.tsx b/packages/solid/ui/src/blocks/order-summary.tsx
new file mode 100644
index 0000000..5dd5d7a
--- /dev/null
+++ b/packages/solid/ui/src/blocks/order-summary.tsx
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout
+ * (card, plain), cta (show, hide), note (show, hide), density, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn, fmtMoney } from "../utils";
+import type { SummaryRow, SummaryLabels } from "./order-summary.types";
+
+export type OrderSummaryProps = {
+  id: string;
+  title: string;
+  rows: SummaryRow[];
+  empty?: string;
+  labels: SummaryLabels;
+  layout?: "card" | "plain";
+  cta?: "show" | "hide";
+  note?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function OrderSummary({
+  id,
+  title,
+  rows,
+  empty = "",
+  labels,
+  layout = "card",
+  cta = "show",
+  note = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: OrderSummaryProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} measure="md" landmarkLabel={landmarkLabel}>
+      {((rows?.length ?? 0) === 0) ? (
+        <EmptyState icon="receipt" title={empty} />
+      ) : (
+        <Box
+          class={cn(
+            (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+          )}
+          data-testid="summary"
+        >
+          <Stack gap="4" align="stretch">
+            <List tag="ul" class="flex flex-col gap-4">
+              <For each={rows ?? []}>{(row) => (
+                <ListItem
+                  class={cn(
+                    "flex items-center justify-between gap-4",
+                    (
+                      row.strong ? "border-t border-border pt-4 text-base font-bold"
+                      : "text-sm text-muted-foreground"
+                    )
+                  )}
+                  data-testid="item"
+                >
+                  <Inline>
+                    {row.label}
+                  </Inline>
+                  <Inline>
+                    {fmtMoney(row.amount, row.currency)}
+                  </Inline>
+                </ListItem>
+              )}</For>
+            </List>
+            {((cta as string) === "show") ? (
+              <Button variant="default" size="default" class="w-full" data-testid="checkout">
+                {labels.checkout}
+              </Button>
+            ) : null}
+            {((note as string) === "show") ? (
+              <Text size="xs" class="text-muted-foreground">
+                {labels.note}
+              </Text>
+            ) : null}
+          </Stack>
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/order-summary.types.ts b/packages/solid/ui/src/blocks/order-summary.types.ts
new file mode 100644
index 0000000..5fdaf66
--- /dev/null
+++ b/packages/solid/ui/src/blocks/order-summary.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type SummaryRow = {
+  id: string;
+  label: string;
+  amount: number;
+  currency: string;
+  strong: boolean;
+};
+
+export type SummaryLabels = {
+  checkout: string;
+  note: string;
+};
diff --git a/packages/solid/ui/src/blocks/order-table.tsx b/packages/solid/ui/src/blocks/order-table.tsx
new file mode 100644
index 0000000..056d9a3
--- /dev/null
+++ b/packages/solid/ui/src/blocks/order-table.tsx
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * The order history as a table or as cards: number, date, items, total and a status pill, with an optional
+ * pager. Axes: layout (table, cards), pager (show, hide), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { OrderRows } from "../components/order-rows";
+import { Pager } from "../components/pager";
+import { Pill } from "../components/pill";
+import { SectionFrame } from "../components/section-frame";
+import { at, fmtMoney, tpl } from "../utils";
+import type { Order, OrderLabels } from "./order-table.types";
+
+export type OrderTableProps = {
+  id: string;
+  title: string;
+  orders: Order[];
+  empty?: string;
+  statuses: Record<string, string>;
+  labels: OrderLabels;
+  layout?: "table" | "cards";
+  pager?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function OrderTable({
+  id,
+  title,
+  orders,
+  empty = "",
+  statuses,
+  labels,
+  layout = "table",
+  pager = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: OrderTableProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((orders?.length ?? 0) === 0) ? (
+        <EmptyState icon="package" title={empty} />
+      ) : (
+        <Stack gap="4" align="stretch">
+          {((layout as string) === "table") ? (
+            <OrderRows orders={orders} statuses={statuses} labels={labels} density={density} />
+          ) : (
+            <Stack gap="4" align="stretch" data-testid="order-cards">
+              <For each={orders ?? []}>{(o) => (
+                <Card variant="default" data-testid="item">
+                  <CardContent class="flex flex-wrap items-center justify-between gap-4">
+                    <Stack gap="0">
+                      <Text size="sm" weight="semibold">
+                        {o.number}
+                      </Text>
+                      <Text size="xs" class="text-muted-foreground">
+                        {o.date}
+                      </Text>
+                    </Stack>
+                    <Text size="sm">
+                      {tpl(labels.itemsCount, o.items)}
+                    </Text>
+                    <Text size="sm" weight="bold">
+                      {fmtMoney(o.total, o.currency)}
+                    </Text>
+                    <Pill
+                      tone={
+                        o.status === "paid" ? "green"
+                        : o.status === "shipped" ? "blue"
+                        : o.status === "pending" ? "amber"
+                        : "gray"
+                      }
+                    >
+                      {at(statuses, o.status)}
+                    </Pill>
+                  </CardContent>
+                </Card>
+              )}</For>
+            </Stack>
+          )}
+          {((pager as string) === "show") ? (
+            <Pager
+              page={1}
+              pages={3}
+              summary={tpl(labels.summary, 1, 4, 12)}
+              previousLabel={labels.previous}
+              nextLabel={labels.next}
+            />
+          ) : null}
+        </Stack>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/order-table.types.ts b/packages/solid/ui/src/blocks/order-table.types.ts
new file mode 100644
index 0000000..19b90e6
--- /dev/null
+++ b/packages/solid/ui/src/blocks/order-table.types.ts
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Order = {
+  id: string;
+  number: string;
+  date: string;
+  total: number;
+  currency: string;
+  status: string;
+  items: number;
+};
+
+export type OrderLabels = {
+  caption: string;
+  number: string;
+  date: string;
+  items: string;
+  total: string;
+  status: string;
+  itemsCount: string;
+  summary: string;
+  previous: string;
+  next: string;
+};
diff --git a/packages/solid/ui/src/blocks/page-intro.tsx b/packages/solid/ui/src/blocks/page-intro.tsx
new file mode 100644
index 0000000..b50bf4f
--- /dev/null
+++ b/packages/solid/ui/src/blocks/page-intro.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action.
+ * Axes: align (start, center), tone, density.
+ */
+import { type JSX } from "solid-js";
+import { ActionGroup } from "../components/action-group";
+import { SectionFrame } from "../components/section-frame";
+
+export type PageIntroProps = {
+  id: string;
+  title: string;
+  text: string;
+  cta?: string;
+  href?: string;
+  level?: 1 | 2;
+  align?: "start" | "center";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function PageIntro({
+  id,
+  title,
+  text,
+  cta,
+  href,
+  level = 1,
+  align = "start",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: PageIntroProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={text}
+      heading={{ level }}
+      align={align}
+      tone={tone}
+      density={density}
+      landmarkLabel={landmarkLabel}
+    >
+      {cta ? (
+        <ActionGroup primary={cta} primaryHref={href} align={align} />
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/page-trail.tsx b/packages/solid/ui/src/blocks/page-trail.tsx
new file mode 100644
index 0000000..4344185
--- /dev/null
+++ b/packages/solid/ui/src/blocks/page-trail.tsx
@@ -0,0 +1,79 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/page-trail.ts
+/**
+ * The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a
+ * total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts
+ * in two columns), tone.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Stack } from "../primitives/stack/stack";
+import { PageAside } from "../components/page-aside";
+import { PageCrumbs } from "../components/page-crumbs";
+import { SectionHeader } from "../components/section-header";
+import { cn } from "../utils";
+import type { PageExtras } from "./page-trail.types";
+import type { NavLink } from "./nav-bar.types";
+import type { Stat } from "./stats-band.types";
+
+export type PageTrailProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  label: string;
+  crumbs: NavLink[];
+  extras: PageExtras;
+  aside?: "none" | "figure" | "note" | "facts";
+  level?: 1 | 2;
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function PageTrail({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  label,
+  crumbs,
+  extras,
+  aside = "none",
+  level = 1,
+  tone = "default",
+  landmarkLabel,
+}: PageTrailProps) {
+  const titleId = id + "-title";
+  return (
+    <Block
+      tag="section"
+      class={cn("py-8", (((tone as string) === "muted") ? "bg-muted" : ""))}
+      aria-labelledby={(landmarkLabel ? undefined : titleId)}
+      data-testid="section"
+      data-tone={tone}
+      data-aside={aside}
+      aria-label={landmarkLabel}
+    >
+      <Container class={cn("mx-auto w-full max-w-6xl px-4", "flex flex-col gap-6")} data-slot="container">
+        {((crumbs?.length ?? 0) > 0) ? (
+          <PageCrumbs label={label} crumbs={crumbs} landmarkLabel={landmarkLabel} />
+        ) : null}
+        <Box
+          class={
+            (aside as string) === "facts" ? "grid grid-cols-1 items-center gap-8 lg:grid-cols-2"
+            : "flex flex-col gap-6 md:flex-row md:items-end md:justify-between"
+          }
+        >
+          <Stack gap="4" align="start" class="min-w-0">
+            <SectionHeader titleId={titleId} title={title} heading={{ level, badge }} lead={lead} />
+          </Stack>
+          {((aside as string) !== "none") ? (
+            <PageAside extras={extras} mode={aside} />
+          ) : null}
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/page-trail.types.ts b/packages/solid/ui/src/blocks/page-trail.types.ts
new file mode 100644
index 0000000..bb966d6
--- /dev/null
+++ b/packages/solid/ui/src/blocks/page-trail.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/page-trail.ts
+
+import type { Stat } from "./stats-band.types";
+
+export type PageExtras = {
+  value: string;
+  caption: string;
+  note: string;
+  icon: string;
+  facts: Stat[];
+};
diff --git a/packages/solid/ui/src/blocks/photo-gallery.tsx b/packages/solid/ui/src/blocks/photo-gallery.tsx
new file mode 100644
index 0000000..ba4dbed
--- /dev/null
+++ b/packages/solid/ui/src/blocks/photo-gallery.tsx
@@ -0,0 +1,130 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+/**
+ * Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of
+ * thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes:
+ * layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { Photo, PhotoLabels } from "./photo-gallery.types";
+
+export type PhotoGalleryProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  photos: Photo[];
+  empty?: string;
+  labels: PhotoLabels;
+  layout?: "grid" | "masonry" | "mosaic" | "featured" | "cards";
+  captions?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function PhotoGallery({
+  id,
+  title,
+  lead = "",
+  photos,
+  empty = "",
+  labels,
+  layout = "grid",
+  captions = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: PhotoGalleryProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((photos?.length ?? 0) === 0) ? (
+        <EmptyState icon="image" title={empty} />
+      ) : ((layout as string) === "featured") ? (
+        <Stack gap="4" align="stretch" data-testid="featured">
+          <MediaFrame alt={title} />
+          <Group gap="4" align="center" justify="between">
+            <Stack gap="0">
+              <Text size="base" weight="semibold">
+                {photos[0]?.title ?? ""}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {tpl(labels.counter, 1, (photos?.length ?? 0))}
+              </Text>
+            </Stack>
+            <Group gap="2">
+              <Button variant="outline" size="sm" layout="icon" aria-label={labels.previous}>
+                <LucideIcon name="chevron-left" size={16} />
+              </Button>
+              <Button variant="outline" size="sm" layout="icon" aria-label={labels.next}>
+                <LucideIcon name="chevron-right" size={16} />
+              </Button>
+            </Group>
+          </Group>
+          <Box class="grid grid-cols-3 gap-2 sm:grid-cols-9" data-testid="thumbs">
+            <For each={photos ?? []}>{(p, iOf) => { const i = iOf(); return (
+              <MediaFrame alt={p.title} ratio="1/1" class={((i === 0) ? "ring-2 ring-foreground" : "")} />
+            ); }}</For>
+          </Box>
+        </Stack>
+      ) : (
+        <Box
+          class={
+            (layout as string) === "masonry" ? "columns-1 gap-4 sm:columns-2 lg:columns-3"
+            : (layout as string) === "mosaic" ? "grid grid-cols-2 gap-4 md:grid-cols-4"
+            : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          }
+          data-testid="items"
+        >
+          <For each={photos ?? []}>{(p, iOf) => { const i = iOf(); return (
+            <FigureBlock
+              class={cn(
+                "flex flex-col gap-2",
+                (((layout as string) === "masonry") ? "mb-4 break-inside-avoid" : ""),
+                ((((layout as string) === "mosaic") && (i === 0)) ? "col-span-2 row-span-2" : ""),
+                (((layout as string) === "cards") ? "rounded bg-card inset-ring inset-ring-border p-4" : "")
+              )}
+              testid="item"
+            >
+              <MediaFrame
+                alt={p.title}
+                ratio={
+                  (layout as string) === "masonry" ? ((p.size === "tall") ? "3/4" : ((p.size === "wide") ? "16/9" : ((p.size === "large") ? "4/3" : "1/1")))
+                  : (layout as string) === "grid" ? "4/3"
+                  : "1/1"
+                }
+                class={(((layout as string) === "mosaic") ? "h-full" : "")}
+              />
+              {(((captions as string) === "show") && ((layout as string) === "cards")) ? (
+                <Group gap="4" align="center" justify="between">
+                  <Text size="sm" weight="semibold">
+                    {p.title}
+                  </Text>
+                  <Badge variant="secondary" size="sm">
+                    {p.tag}
+                  </Badge>
+                </Group>
+              ) : null}
+              {(((captions as string) === "show") && (((layout as string) === "grid") || ((layout as string) === "masonry"))) ? (
+                <Box class="text-sm text-muted-foreground" data-testid="caption">
+                  {p.title}
+                </Box>
+              ) : null}
+            </FigureBlock>
+          ); }}</For>
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/photo-gallery.types.ts b/packages/solid/ui/src/blocks/photo-gallery.types.ts
new file mode 100644
index 0000000..d0b8e7c
--- /dev/null
+++ b/packages/solid/ui/src/blocks/photo-gallery.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Photo = {
+  id: string;
+  title: string;
+  tag: string;
+  size: string;
+};
+
+export type PhotoLabels = {
+  previous: string;
+  next: string;
+  counter: string;
+};
diff --git a/packages/solid/ui/src/blocks/post-card.tsx b/packages/solid/ui/src/blocks/post-card.tsx
new file mode 100644
index 0000000..a57b951
--- /dev/null
+++ b/packages/solid/ui/src/blocks/post-card.tsx
@@ -0,0 +1,146 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+/**
+ * A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout
+ * (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only),
+ * density.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { CardContent } from "../primitives/card/card-content";
+import { Group } from "../primitives/group/group";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { defaults } from "../presets/defaults";
+import { cn, tpl } from "../utils";
+import type { Post, PostLabels } from "./post-card.types";
+
+export type PostCardProps = {
+  post: Post;
+  labels: PostLabels;
+  layout?: "vertical" | "horizontal";
+  media?: "image" | "none";
+  meta?: "full" | "short" | "news";
+  density?: "default" | "compact";
+};
+
+export function PostCard({
+  post,
+  labels,
+  layout = "vertical",
+  media = "image",
+  meta = "full",
+  density = "default",
+}: PostCardProps) {
+  return (
+    <>
+      {((meta as string) === "news") ? (
+        <Block
+          tag="article"
+          class={cn(
+            "flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border",
+            defaults.news.card
+          )}
+          data-testid="item"
+          data-layout={layout}
+          data-meta="news"
+        >
+          <Box class={cn("relative shrink-0 overflow-hidden", defaults.news.cover)} data-testid="news-cover">
+            <MediaFrame alt={post.title} src={post.image} class={cn("size-full", defaults.media.rounded)} />
+            <Title
+              as={3}
+              size="xs"
+              weight="semibold"
+              class={cn(
+                "pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground",
+                defaults.news.title
+              )}
+              data-testid="news-title"
+            >
+              {post.title}
+            </Title>
+          </Box>
+          <Group
+            gap="2"
+            align="center"
+            class={cn("w-full px-2 text-muted-foreground", defaults.news.strip)}
+            data-testid="news-date"
+          >
+            <LucideIcon name="calendar" size={16} />
+            <Text size="xs" weight="bold" class="leading-4">
+              {post.date}
+            </Text>
+            {post.category ? (
+              <Text size="xs" weight="bold" class="leading-4">
+                {post.category}
+              </Text>
+            ) : null}
+          </Group>
+        </Block>
+      ) : (
+        <Block
+          tag="article"
+          class={cn(
+            "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+            "h-full gap-4 overflow-hidden",
+            (((layout as string) === "horizontal") ? "flex flex-col sm:flex-row" : "flex flex-col")
+          )}
+          data-slot="card"
+          data-testid="item"
+          data-layout={layout}
+          data-meta={meta}
+        >
+          {((media as string) === "image") ? (
+            <Box class={cn("relative shrink-0", (((layout as string) === "horizontal") ? "sm:w-64" : ""))}>
+              <MediaFrame alt={post.title} src={post.image} class="h-full" />
+            </Box>
+          ) : null}
+          <CardContent class="flex flex-1 flex-col gap-2">
+            {((meta as string) !== "news") ? (
+              <Group gap="2" align="center">
+                <LucideIcon name={post.icon} size={16} />
+                <Text size="xs" class="uppercase tracking-wide text-muted-foreground">
+                  {post.category}
+                </Text>
+              </Group>
+            ) : null}
+            <Title as={3} size="xl" weight="bold">
+              {post.title}
+            </Title>
+            {(((density as string) === "default") && ((meta as string) !== "news")) ? (
+              <Text size="sm" class="text-muted-foreground">
+                {post.excerpt}
+              </Text>
+            ) : null}
+            {((meta as string) !== "news") ? (
+              <Group gap="2" class="mt-auto flex-wrap pt-2 text-muted-foreground">
+                {((meta as string) === "full") ? (
+                  <Text size="xs">
+                    {tpl(labels.by, post.author)}
+                  </Text>
+                ) : null}
+                <Text size="xs">
+                  {post.date}
+                </Text>
+                {((meta as string) === "full") ? (
+                  <Text size="xs">
+                    {tpl(labels.minutes, post.minutes)}
+                  </Text>
+                ) : null}
+              </Group>
+            ) : null}
+            {(((meta as string) !== "news") && post.href) ? (
+              <Link href={post.href} variant="default" data-testid="read">
+                {labels.read}
+              </Link>
+            ) : null}
+          </CardContent>
+        </Block>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/post-card.types.ts b/packages/solid/ui/src/blocks/post-card.types.ts
new file mode 100644
index 0000000..ae8d4ce
--- /dev/null
+++ b/packages/solid/ui/src/blocks/post-card.types.ts
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+
+export type Post = {
+  id: string;
+  title: string;
+  excerpt: string;
+  category: string;
+  author: string;
+  date: string;
+  minutes: number;
+  icon: string;
+  href?: string;
+  image?: string;
+};
+
+export type PostLabels = {
+  minutes: string;
+  by: string;
+  read: string;
+  empty: string;
+};
diff --git a/packages/solid/ui/src/blocks/post-grid.tsx b/packages/solid/ui/src/blocks/post-grid.tsx
new file mode 100644
index 0000000..f620f90
--- /dev/null
+++ b/packages/solid/ui/src/blocks/post-grid.tsx
@@ -0,0 +1,119 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+/**
+ * A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first
+ * post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news),
+ * filter mode (none, topics), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { PostCard } from "../blocks/post-card";
+import { SectionFrame } from "../components/section-frame";
+import { Switcher } from "../components/switcher";
+import { SwitcherItem } from "../components/switcher-item";
+import { fitCols } from "../utils";
+import type { PostTopic, PostFilter } from "./post-grid.types";
+import type { Post, PostLabels } from "./post-card.types";
+import type { HeadLink } from "../components/section-frame.types";
+
+export type PostGridProps = {
+  id: string;
+  title: string;
+  posts: Post[];
+  labels: PostLabels;
+  action?: HeadLink;
+  filter?: PostFilter;
+  layout?: "grid" | "list" | "magazine";
+  cols?: "1-2" | "1-3" | "1-4";
+  media?: "image" | "none";
+  meta?: "full" | "short" | "news";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+  onTopic?: (value: string) => void;
+};
+
+export function PostGrid({
+  id,
+  title,
+  posts,
+  labels,
+  action,
+  filter,
+  layout = "grid",
+  cols = "1-3",
+  media = "image",
+  meta = "full",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onTopic,
+}: PostGridProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      action={action}
+      tone={tone}
+      density={(((density as string) === "compact") ? "compact" : "default")}
+      measure={(((meta as string) === "news") ? "fill" : "default")}
+      class={(((meta as string) === "news") ? "py-0" : "")}
+      landmarkLabel={landmarkLabel}
+    >
+      {(filter?.mode === "topics") ? (
+        <Switcher label={filter?.label}>
+          <For each={filter?.topics ?? []}>{(tab) => (
+            <SwitcherItem active={(tab.value === filter?.topic)} onClick={() => onTopic?.(tab.value)}>
+              {tab.title}
+            </SwitcherItem>
+          )}</For>
+        </Switcher>
+      ) : null}
+      {((posts.filter((i) => !filter?.topic || i["category"] === filter?.topic)?.length ?? 0) > 0) ? (
+        <>
+          {((layout as string) === "magazine") ? (
+            <Stack gap="6" align="stretch" data-testid="items">
+              <For each={posts.filter((i) => !filter?.topic || i["category"] === filter?.topic) ?? []}>{(p, iOf) => { const i = iOf(); return (
+                <>
+                  {(i === 0) ? (
+                    <PostCard post={p} labels={labels} layout="horizontal" media={media} meta={meta} density={density} />
+                  ) : null}
+                </>
+              ); }}</For>
+              <Grid cols={cols} class="gap-6">
+                <For each={posts.filter((i) => !filter?.topic || i["category"] === filter?.topic) ?? []}>{(p, iOf) => { const i = iOf(); return (
+                  <>
+                    {(i > 0) ? (
+                      <PostCard post={p} labels={labels} media={media} meta={meta} density={density} />
+                    ) : null}
+                  </>
+                ); }}</For>
+              </Grid>
+            </Stack>
+          ) : (
+            <Grid
+              cols={
+                (layout as string) === "list" ? "1"
+                : fitCols(cols, (posts.filter((i) => !filter?.topic || i["category"] === filter?.topic)?.length ?? 0))
+              }
+              class="w-full gap-6"
+              data-testid="items"
+            >
+              <For each={posts.filter((i) => !filter?.topic || i["category"] === filter?.topic) ?? []}>{(p) => (
+                <PostCard
+                  post={p}
+                  labels={labels}
+                  layout={(((layout as string) === "list") ? "horizontal" : "vertical")}
+                  media={media}
+                  meta={meta}
+                  density={density}
+                />
+              )}</For>
+            </Grid>
+          )}
+        </>
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/post-grid.types.ts b/packages/solid/ui/src/blocks/post-grid.types.ts
new file mode 100644
index 0000000..73de7d6
--- /dev/null
+++ b/packages/solid/ui/src/blocks/post-grid.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+
+export type PostTopic = {
+  id: string;
+  title: string;
+  value: string;
+};
+
+export type PostFilter = {
+  /** topics: tabs above the posts; the page filters by `topic` */
+  mode?: "none" | "topics";
+  /** the topic tabs */
+  topics?: PostTopic[];
+  /** accessible name of the topic tabs */
+  label?: string;
+  /** the value of the chosen topic; empty: all posts */
+  topic?: string;
+};
diff --git a/packages/solid/ui/src/blocks/post-header.tsx b/packages/solid/ui/src/blocks/post-header.tsx
new file mode 100644
index 0000000..e021271
--- /dev/null
+++ b/packages/solid/ui/src/blocks/post-header.tsx
@@ -0,0 +1,87 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+/**
+ * The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout
+ * (start, center), cover (show, hide), meta (full, short), tone.
+ */
+import { type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { Pill } from "../components/pill";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Post, PostLabels } from "./post-card.types";
+
+export type PostHeaderProps = {
+  id: string;
+  post?: Post;
+  labels: PostLabels;
+  level?: 1 | 2;
+  layout?: "start" | "center";
+  cover?: "show" | "hide";
+  meta?: "full" | "short";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function PostHeader({
+  id,
+  post,
+  labels,
+  level = 1,
+  layout = "start",
+  cover = "show",
+  meta = "full",
+  tone = "default",
+  landmarkLabel,
+}: PostHeaderProps) {
+  return (
+    <>
+      {post ? (
+        <SectionFrame
+          id={id}
+          title={post?.title}
+          lead={post?.excerpt}
+          heading={{ level }}
+          align={layout}
+          tone={tone}
+          media={{ show: ((cover as string) === "show") }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame alt={post?.title} src={post?.image} ratio="21/9" />
+          )}
+        >
+          <Group
+            gap="4"
+            align="center"
+            justify={(((layout as string) === "center") ? "center" : "start")}
+            class="flex-wrap"
+            data-testid="post-meta"
+          >
+            <MediaFrame alt={post?.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+            <Text size="sm" weight="semibold">
+              {post?.author}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {post?.date}
+            </Text>
+            {((meta as string) === "full") ? (
+              <Text size="sm" class="text-muted-foreground">
+                {tpl(labels.minutes, post?.minutes)}
+              </Text>
+            ) : null}
+            <Pill tone="blue">
+              {post?.category}
+            </Pill>
+          </Group>
+        </SectionFrame>
+      ) : (
+        <SectionFrame id={id} heading={{ level }} align={layout} tone={tone} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="file-text" title={labels.empty} />
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/post-showcase.tsx b/packages/solid/ui/src/blocks/post-showcase.tsx
new file mode 100644
index 0000000..2d8db1f
--- /dev/null
+++ b/packages/solid/ui/src/blocks/post-showcase.tsx
@@ -0,0 +1,127 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/post-showcase.ts
+/**
+ * Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured:
+ * the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3:
+ * overlay columns), mediaSide, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { PostFeature } from "../components/post-feature";
+import { PostMiniCard } from "../components/post-mini-card";
+import { PostOverlayCard } from "../components/post-overlay-card";
+import { SectionFrame } from "../components/section-frame";
+import type { Post, PostLabels } from "./post-card.types";
+import type { HeadLink } from "../components/section-frame.types";
+
+export type PostShowcaseProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  posts: Post[];
+  labels: PostLabels;
+  action: HeadLink;
+  layout?: "intro" | "featured" | "overlay";
+  cols?: "2" | "3";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  empty?: string;
+  landmarkLabel?: string;
+};
+
+export function PostShowcase({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  posts,
+  labels,
+  action,
+  layout = "intro",
+  cols = "3",
+  mediaSide = "start",
+  tone = "default",
+  empty = "",
+  landmarkLabel,
+}: PostShowcaseProps) {
+  return (
+    <>
+      {((posts?.length ?? 0) === 0) ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="newspaper" title={empty} />
+        </SectionFrame>
+      ) : ((layout as string) === "intro") ? (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge }}
+          tone={tone}
+          layout="split"
+          media={{ show: true, side: mediaSide }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <For each={posts ?? []}>{(p, iOf) => { const i = iOf(); return (
+                <>
+                  {(i < 4) ? (
+                    <PostMiniCard p={p} labels={labels} />
+                  ) : null}
+                </>
+              ); }}</For>
+            </Box>
+          )}
+        >
+          <Link href={action.href} size="sm" data-testid="section-action">
+            {action.label}
+            <LucideIcon name="arrow-right" size={16} />
+          </Link>
+        </SectionFrame>
+      ) : ((layout as string) === "featured") ? (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge }}
+          tone={tone}
+          layout="split"
+          media={{ show: true, side: mediaSide }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame alt={title} ratio="4/3" />
+          )}
+        >
+          <For each={posts ?? []}>{(p, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 1) ? (
+                <PostFeature p={p} labels={labels} />
+              ) : null}
+            </>
+          ); }}</For>
+        </SectionFrame>
+      ) : (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <Box
+            class={
+              (cols as string) === "2" ? "grid grid-cols-1 gap-6 md:grid-cols-2"
+              : "grid grid-cols-1 gap-6 md:grid-cols-3"
+            }
+          >
+            <For each={posts ?? []}>{(p, iOf) => { const i = iOf(); return (
+              <>
+                {(i < (((cols as string) === "2") ? 2 : 3)) ? (
+                  <PostOverlayCard p={p} labels={labels} ratio={(((cols as string) === "2") ? "16/9" : "4/3")} />
+                ) : null}
+              </>
+            ); }}</For>
+          </Box>
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/post-split.tsx b/packages/solid/ui/src/blocks/post-split.tsx
new file mode 100644
index 0000000..17bca3d
--- /dev/null
+++ b/packages/solid/ui/src/blocks/post-split.tsx
@@ -0,0 +1,129 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/post-split.ts
+/**
+ * A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags,
+ * figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and
+ * related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair,
+ * wide, icons), tone.
+ */
+import { type JSX } from "solid-js";
+import { MediaFrame } from "../components/media-frame";
+import { PostActions } from "../components/post-actions";
+import { PostAuthor } from "../components/post-author";
+import { PostOutline } from "../components/post-outline";
+import { PostStats } from "../components/post-stats";
+import { PostTags } from "../components/post-tags";
+import { SectionFrame } from "../components/section-frame";
+import type { PostExtras, PostSplitLabels } from "./post-split.types";
+import type { Post } from "./post-card.types";
+import type { NavLink } from "./nav-bar.types";
+
+export type PostSplitProps = {
+  id: string;
+  post: Post;
+  labels: PostSplitLabels;
+  extras: PostExtras;
+  level?: 1 | 2;
+  layout?: "center" | "split" | "outline";
+  mediaSide?: "end" | "start";
+  author?: "line" | "card" | "bio";
+  cover?: "wide" | "square";
+  actions?: "pair" | "wide" | "icons";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function PostSplit({
+  id,
+  post,
+  labels,
+  extras,
+  level = 1,
+  layout = "split",
+  mediaSide = "end",
+  author = "line",
+  cover = "wide",
+  actions = "pair",
+  tone = "default",
+  landmarkLabel,
+}: PostSplitProps) {
+  return (
+    <>
+      {((layout as string) === "center") ? (
+        <SectionFrame
+          id={id}
+          title={post.title}
+          lead={post.excerpt}
+          heading={{ badge: post.category, level }}
+          tone={tone}
+          media={{ show: true }}
+          align="center"
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame
+              alt={post.title}
+              ratio={
+                (layout as string) === "center" ? "21/9"
+                : (cover as string) === "square" ? "1/1"
+                : "4/3"
+              }
+            />
+          )}
+        >
+          {((extras.tags?.length ?? 0) > 0) ? (
+            <PostTags tags={extras.tags} align="center" />
+          ) : null}
+          <PostStats post={post} extras={extras} labels={labels} align="center" />
+          <PostAuthor
+            post={post}
+            extras={extras}
+            labels={labels}
+            mode="card"
+            share={true}
+            class="mx-auto w-full max-w-md"
+          />
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={post.title}
+          lead={post.excerpt}
+          heading={{ badge: post.category, level }}
+          tone={tone}
+          media={{ show: true, side: mediaSide }}
+          layout="split"
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <MediaFrame
+              alt={post.title}
+              ratio={
+                (layout as string) === "center" ? "21/9"
+                : (cover as string) === "square" ? "1/1"
+                : "4/3"
+              }
+            />
+          )}
+        >
+          {((layout as string) === "outline") ? (
+            <>
+              {((extras.outline?.length ?? 0) > 0) ? (
+                <PostOutline post={post} extras={extras} labels={labels} />
+              ) : null}
+            </>
+          ) : (
+            <>
+              <PostAuthor post={post} extras={extras} labels={labels} mode={author} />
+              {((author as string) !== "line") ? (
+                <PostStats post={post} extras={extras} labels={labels} />
+              ) : null}
+              {((extras.tags?.length ?? 0) > 0) ? (
+                <PostTags tags={extras.tags} />
+              ) : null}
+            </>
+          )}
+          <PostActions labels={labels} mode={actions} />
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/post-split.types.ts b/packages/solid/ui/src/blocks/post-split.types.ts
new file mode 100644
index 0000000..8878db0
--- /dev/null
+++ b/packages/solid/ui/src/blocks/post-split.types.ts
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/post-split.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type PostExtras = {
+  role: string;
+  bio: string;
+  views: string;
+  likes: string;
+  tags: NavLink[];
+  outline: NavLink[];
+};
+
+export type PostSplitLabels = {
+  minutes: string;
+  views: string;
+  likes: string;
+  share: string;
+  save: string;
+  read: string;
+  related: string;
+};
diff --git a/packages/solid/ui/src/blocks/pricing-card.tsx b/packages/solid/ui/src/blocks/pricing-card.tsx
new file mode 100644
index 0000000..17955cf
--- /dev/null
+++ b/packages/solid/ui/src/blocks/pricing-card.tsx
@@ -0,0 +1,121 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-card.ts
+/**
+ * A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more
+ * actions. Text comes in through `labels`; the plan is data.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { CardContent } from "../primitives/card/card-content";
+import { CardDescription } from "../primitives/card/card-description";
+import { CardFooter } from "../primitives/card/card-footer";
+import { CardHeader } from "../primitives/card/card-header";
+import { CardTitle } from "../primitives/card/card-title";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { Plan, PricingCardLabels } from "./pricing-card.types";
+
+export type PricingCardProps = {
+  plan: Plan;
+  labels: PricingCardLabels;
+  current?: boolean;
+  emphasis?: "auto" | "off";
+  density?: "default" | "compact";
+  billing?: "monthly" | "annual";
+  footer?: (plan: Plan) => JSX.Element;
+  onSelect?: (id: string) => void;
+};
+
+export function PricingCard({
+  plan,
+  labels,
+  current,
+  emphasis = "auto",
+  density = "default",
+  billing = "monthly",
+  footer,
+  onSelect,
+}: PricingCardProps) {
+  const stand = plan.highlighted && ((emphasis as string) === "auto");
+  const yearlyOn = ((billing as string) === "annual") && (plan.yearly > 0);
+  const amount = yearlyOn ? plan.yearly : plan.price;
+  return (
+    <Block
+      tag="article"
+      class={cn(
+        "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+        "flex h-full flex-col"
+      )}
+      data-slot="card"
+      data-highlighted={(stand ? "true" : "false")}
+      data-current={(current ? "true" : "false")}
+    >
+      <CardHeader class="flex flex-col gap-2">
+        <Box class="flex min-h-6 items-center" data-slot="badge-slot">
+          {stand ? (
+            <Badge variant="default" size="default">
+              {labels.popular}
+            </Badge>
+          ) : null}
+        </Box>
+        <CardTitle as={3}>
+          {plan.name}
+        </CardTitle>
+        <CardDescription>
+          {plan.tagline}
+        </CardDescription>
+      </CardHeader>
+      <CardContent class={cn("flex flex-1 flex-col", (((density as string) === "compact") ? "gap-2" : "gap-4"))}>
+        <Group gap="2" align="baseline">
+          <Title as={2} size="4xl" weight="bold">
+            {(amount === 0) ? (
+              <>
+                {labels.free}
+              </>
+            ) : (
+              <>
+                {fmtMoney(amount, plan.currency)}
+              </>
+            )}
+          </Title>
+          {(amount > 0) ? (
+            <Text size="sm" class="text-muted-foreground">
+              {(yearlyOn ? labels.perYear : labels.perMonth)}
+            </Text>
+          ) : null}
+        </Group>
+        <Text size="sm" weight="medium">
+          {tpl(labels.seats, plan.seats)}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {tpl(labels.storage, plan.storage)}
+        </Text>
+        <List tag="ul" class="flex flex-col gap-2 text-sm">
+          <For each={plan.features ?? []}>{(feature) => (
+            <ListItem class="flex gap-2">
+              {feature}
+            </ListItem>
+          )}</For>
+        </List>
+      </CardContent>
+      <CardFooter class="flex flex-wrap items-center gap-2">
+        <Button
+          variant={(stand ? "default" : "outline")}
+          size="default"
+          data-testid="plan-select"
+          onClick={() => onSelect?.(plan.id)}
+        >
+          {labels.cta}
+        </Button>
+        {footer?.(plan)}
+      </CardFooter>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/pricing-card.types.ts b/packages/solid/ui/src/blocks/pricing-card.types.ts
new file mode 100644
index 0000000..4394b1c
--- /dev/null
+++ b/packages/solid/ui/src/blocks/pricing-card.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-card.ts
+
+export type Plan = {
+  id: string;
+  name: string;
+  tagline: string;
+  price: number;
+  currency: string;
+  seats: number;
+  storage: number;
+  highlighted: boolean;
+  status?: string;
+  features: string[];
+  yearly: number;
+};
+
+export type PricingCardLabels = {
+  popular: string;
+  perMonth: string;
+  seats: string;
+  storage: string;
+  cta: string;
+  free: string;
+  perYear: string;
+  empty: string;
+};
diff --git a/packages/solid/ui/src/blocks/pricing-tiers.tsx b/packages/solid/ui/src/blocks/pricing-tiers.tsx
new file mode 100644
index 0000000..355a971
--- /dev/null
+++ b/packages/solid/ui/src/blocks/pricing-tiers.tsx
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+/**
+ * A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid,
+ * stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and
+ * the prices of that period), density, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { EmptyState } from "../components/empty-state";
+import { PricingCard } from "../blocks/pricing-card";
+import { SectionFrame } from "../components/section-frame";
+import { Switcher } from "../components/switcher";
+import { SwitcherItem } from "../components/switcher-item";
+import { fitCols } from "../utils";
+import type { BillingLabels } from "./pricing-tiers.types";
+import type { Plan, PricingCardLabels } from "./pricing-card.types";
+
+export type PricingTiersProps = {
+  id: string;
+  title: string;
+  plans: Plan[];
+  labels: PricingCardLabels;
+  billingLabels: BillingLabels;
+  layout?: "grid" | "stack";
+  cols?: "1-2" | "1-3" | "1-4";
+  emphasis?: "auto" | "off";
+  billing?: "off" | "monthly" | "annual";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+  onSelect?: (id: string) => void;
+  onBilling?: (period: string) => void;
+};
+
+export function PricingTiers({
+  id,
+  title,
+  plans,
+  labels,
+  billingLabels,
+  layout = "grid",
+  cols = "1-3",
+  emphasis = "auto",
+  billing = "off",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onSelect,
+  onBilling,
+}: PricingTiersProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      measure={(((layout as string) === "stack") ? "md" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((billing as string) !== "off") ? (
+        <Group gap="4" align="center" justify="center" class="flex-wrap" data-testid="billing">
+          <Switcher label={billingLabels.label}>
+            <SwitcherItem active={((billing as string) === "monthly")} onClick={() => onBilling?.("monthly")}>
+              {billingLabels.monthly}
+            </SwitcherItem>
+            <SwitcherItem active={((billing as string) === "annual")} onClick={() => onBilling?.("annual")}>
+              {billingLabels.annual}
+            </SwitcherItem>
+          </Switcher>
+          <Badge variant="default" size="default">
+            {billingLabels.save}
+          </Badge>
+        </Group>
+      ) : null}
+      {((plans?.length ?? 0) === 0) ? (
+        <EmptyState icon="layers" title={labels.empty} />
+      ) : (
+        <Grid
+          cols={(((layout as string) === "stack") ? "1" : fitCols(cols, (plans?.length ?? 0)))}
+          class="gap-4"
+          data-testid="tiers"
+        >
+          <For each={plans ?? []}>{(plan) => (
+            <PricingCard
+              plan={plan}
+              labels={labels}
+              emphasis={emphasis}
+              billing={(((billing as string) === "annual") ? "annual" : "monthly")}
+              density={(((density as string) === "compact") ? "compact" : "default")}
+              onSelect={() => onSelect?.(plan.id)}
+            />
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/pricing-tiers.types.ts b/packages/solid/ui/src/blocks/pricing-tiers.types.ts
new file mode 100644
index 0000000..9e260af
--- /dev/null
+++ b/packages/solid/ui/src/blocks/pricing-tiers.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type BillingLabels = {
+  label: string;
+  monthly: string;
+  annual: string;
+  save: string;
+};
diff --git a/packages/solid/ui/src/blocks/product-card.tsx b/packages/solid/ui/src/blocks/product-card.tsx
new file mode 100644
index 0000000..e5d8720
--- /dev/null
+++ b/packages/solid/ui/src/blocks/product-card.tsx
@@ -0,0 +1,128 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck
+ * through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image,
+ * none), ratio, rating (show, hide), action (button, none), density.
+ */
+import { type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { CardContent } from "../primitives/card/card-content";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Link } from "../primitives/link/link";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { Rating } from "../components/rating";
+import { at, cn, fmtMoney, tpl } from "../utils";
+import type { Product, ProductLabels } from "./product-card.types";
+
+export type ProductCardProps = {
+  product: Product;
+  labels: ProductLabels;
+  badges: Record<string, string>;
+  layout?: "vertical" | "horizontal";
+  media?: "image" | "none";
+  ratio?: "4/3" | "1/1" | "3/4";
+  rating?: "show" | "hide";
+  action?: "button" | "none";
+  density?: "default" | "compact";
+  onAdd?: (id: string) => void;
+};
+
+export function ProductCard({
+  product,
+  labels,
+  badges,
+  layout = "vertical",
+  media = "image",
+  ratio = "4/3",
+  rating = "show",
+  action = "button",
+  density = "default",
+  onAdd,
+}: ProductCardProps) {
+  return (
+    <Block
+      tag="article"
+      class={cn(
+        "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+        "h-full gap-4 overflow-hidden",
+        (((layout as string) === "horizontal") ? "flex flex-col sm:flex-row" : "flex flex-col")
+      )}
+      data-slot="card"
+      data-testid="item"
+      data-layout={layout}
+    >
+      {((media as string) === "image") ? (
+        <Box class={cn("relative shrink-0", (((layout as string) === "horizontal") ? "sm:w-48" : ""))}>
+          <MediaFrame alt={product.name} src={product.image} ratio={ratio} class="h-full" />
+          {product.badge ? (
+            <Badge variant="default" size="default" class="absolute left-4 top-4" data-testid="badge">
+              {at(badges, product.badge)}
+            </Badge>
+          ) : null}
+        </Box>
+      ) : null}
+      <CardContent class="flex flex-1 flex-col gap-2">
+        <Text size="xs" class="uppercase tracking-wide text-muted-foreground">
+          {product.category}
+        </Text>
+        <Title as={3} size="base" weight="bold">
+          {product.href ? (
+            <Link href={product.href} variant="default" data-testid="open">
+              {product.name}
+            </Link>
+          ) : (
+            <>
+              {product.name}
+            </>
+          )}
+        </Title>
+        {((rating as string) === "show") ? (
+          <Group gap="2">
+            <Rating value={product.rating} label={tpl(labels.ratingLabel, product.rating)} />
+            <Text size="xs" class="text-muted-foreground">
+              {tpl(labels.reviews, product.reviews)}
+            </Text>
+          </Group>
+        ) : null}
+        {((density as string) === "default") ? (
+          <Text size="sm" class="text-muted-foreground">
+            {product.summary}
+          </Text>
+        ) : null}
+        <Group gap="4" justify="between" class="mt-auto pt-2">
+          <Group gap="2" align="baseline" class="flex-wrap">
+            <Text size="xl" weight="bold">
+              {fmtMoney(product.price, product.currency)}
+            </Text>
+            {(product.compareAt && (product.compareAt > product.price)) ? (
+              <Text tag="del" size="sm" class="relative text-muted-foreground" data-testid="compare-at">
+                <Inline class="sr-only">
+                  {labels.was}
+                </Inline>
+                {fmtMoney(product.compareAt, product.currency)}
+              </Text>
+            ) : null}
+          </Group>
+          {((action as string) === "button") ? (
+            <Button
+              variant={(product.inStock ? "default" : "outline")}
+              size="sm"
+              disabled={!product.inStock}
+              data-testid="add"
+              onClick={() => onAdd?.(product.id)}
+            >
+              {(product.inStock ? labels.add : labels.soldOut)}
+            </Button>
+          ) : null}
+        </Group>
+      </CardContent>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/product-card.types.ts b/packages/solid/ui/src/blocks/product-card.types.ts
new file mode 100644
index 0000000..6faac52
--- /dev/null
+++ b/packages/solid/ui/src/blocks/product-card.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Product = {
+  id: string;
+  name: string;
+  summary: string;
+  price: number;
+  currency: string;
+  rating: number;
+  reviews: number;
+  badge?: string;
+  category: string;
+  inStock: boolean;
+  compareAt?: number;
+  href?: string;
+  image?: string;
+};
+
+export type ProductLabels = {
+  add: string;
+  soldOut: string;
+  reviews: string;
+  ratingLabel: string;
+  was: string;
+  empty: string;
+};
diff --git a/packages/solid/ui/src/blocks/product-detail.tsx b/packages/solid/ui/src/blocks/product-detail.tsx
new file mode 100644
index 0000000..91af2e0
--- /dev/null
+++ b/packages/solid/ui/src/blocks/product-detail.tsx
@@ -0,0 +1,142 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price,
+ * stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs
+ * (none, below), buy (full, compact), tone, density.
+ */
+import { type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { NumberField } from "../components/number-field";
+import { ProductGallery } from "../components/product-gallery";
+import { ProductPrice } from "../components/product-price";
+import { Rating } from "../components/rating";
+import { SectionFrame } from "../components/section-frame";
+import { at, tpl } from "../utils";
+import type { ProductDetailLabels } from "./product-detail.types";
+import type { Product } from "./product-card.types";
+
+export type ProductDetailProps = {
+  id: string;
+  product?: Product;
+  labels: ProductDetailLabels;
+  badges: Record<string, string>;
+  level?: 1 | 2;
+  layout?: "split" | "stacked";
+  mediaSide?: "start" | "end";
+  thumbs?: "none" | "below";
+  buy?: "full" | "compact";
+  tone?: "default" | "muted";
+  density?: "default" | "roomy";
+  landmarkLabel?: string;
+  onAdd?: (id: string) => void;
+};
+
+export function ProductDetail({
+  id,
+  product,
+  labels,
+  badges,
+  level = 1,
+  layout = "split",
+  mediaSide = "start",
+  thumbs = "below",
+  buy = "full",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onAdd,
+}: ProductDetailProps) {
+  return (
+    <>
+      {!product ? (
+        <SectionFrame id={id} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="package" title={labels.empty} />
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={product?.name}
+          lead={product?.summary}
+          heading={{ level }}
+          layout={(((layout as string) === "split") ? "split" : "stack")}
+          media={{ show: true, side: mediaSide, align: "start" }}
+          tone={tone}
+          density={density}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <ProductGallery name={product?.name} image={product?.image} thumbs={thumbs} />
+          )}
+        >
+          <Stack gap="4" align="stretch" data-testid="buy-box">
+            {product?.category ? (
+              <Text size="xs" class="uppercase tracking-wide text-muted-foreground" data-testid="category">
+                {product?.category}
+              </Text>
+            ) : null}
+            <ProductPrice
+              price={product?.price}
+              compareAt={product?.compareAt}
+              currency={product?.currency}
+              badge={(product?.badge ? at(badges, product?.badge) : "")}
+              was={labels.was}
+            />
+            <Group gap="2">
+              <Rating value={product?.rating} label={tpl(labels.ratingLabel, product?.rating)} />
+              <Text size="sm" class="text-muted-foreground">
+                {tpl(labels.reviews, product?.reviews)}
+              </Text>
+            </Group>
+            <Text
+              size="sm"
+              weight="medium"
+              class={(product?.inStock ? "text-foreground" : "text-destructive")}
+              data-testid="stock"
+            >
+              {(product?.inStock ? labels.inStock : labels.soldOut)}
+            </Text>
+            <Group gap="4" class="flex-wrap">
+              {((buy as string) === "full") ? (
+                <NumberField
+                  value="1"
+                  name={tpl("{0}-qty", id)}
+                  min="1"
+                  label={labels.qty}
+                  decrease={labels.decrease}
+                  increase={labels.increase}
+                />
+              ) : null}
+              <Button disabled={!product?.inStock} data-testid="add" onClick={() => onAdd?.(product?.id)}>
+                {labels.add}
+              </Button>
+            </Group>
+            {((buy as string) === "full") ? (
+              <List tag="ul" class="flex flex-col gap-2 text-sm text-muted-foreground">
+                <ListItem class="flex items-center gap-2">
+                  <LucideIcon name="truck" size={16} />
+                  <Inline>
+                    {labels.shipping}
+                  </Inline>
+                </ListItem>
+                <ListItem class="flex items-center gap-2">
+                  <LucideIcon name="shield-check" size={16} />
+                  <Inline>
+                    {labels.returns}
+                  </Inline>
+                </ListItem>
+              </List>
+            ) : null}
+          </Stack>
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/product-detail.types.ts b/packages/solid/ui/src/blocks/product-detail.types.ts
new file mode 100644
index 0000000..ccba2ea
--- /dev/null
+++ b/packages/solid/ui/src/blocks/product-detail.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type ProductDetailLabels = {
+  add: string;
+  soldOut: string;
+  inStock: string;
+  qty: string;
+  decrease: string;
+  increase: string;
+  reviews: string;
+  ratingLabel: string;
+  shipping: string;
+  returns: string;
+  was: string;
+  empty: string;
+};
diff --git a/packages/solid/ui/src/blocks/product-grid.tsx b/packages/solid/ui/src/blocks/product-grid.tsx
new file mode 100644
index 0000000..be87fbb
--- /dev/null
+++ b/packages/solid/ui/src/blocks/product-grid.tsx
@@ -0,0 +1,90 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that
+ * scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating,
+ * action, tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { EmptyState } from "../components/empty-state";
+import { ProductCard } from "../blocks/product-card";
+import { SectionFrame } from "../components/section-frame";
+import type { Product, ProductLabels } from "./product-card.types";
+
+export type ProductGridProps = {
+  id: string;
+  title: string;
+  products: Product[];
+  labels: ProductLabels;
+  badges: Record<string, string>;
+  layout?: "grid" | "list" | "rail";
+  cols?: "1-2" | "1-3" | "1-4";
+  ratio?: "4/3" | "1/1" | "3/4";
+  rating?: "show" | "hide";
+  action?: "button" | "none";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+  onAdd?: (id: string) => void;
+};
+
+export function ProductGrid({
+  id,
+  title,
+  products,
+  labels,
+  badges,
+  layout = "grid",
+  cols = "1-3",
+  ratio = "4/3",
+  rating = "show",
+  action = "button",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onAdd,
+}: ProductGridProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((products?.length ?? 0) === 0) ? (
+        <EmptyState icon="package" title={labels.empty} />
+      ) : ((layout as string) === "rail") ? (
+        <Box class="flex snap-x gap-4 overflow-x-auto pb-4" data-testid="items">
+          <For each={products ?? []}>{(p) => (
+            <Box class="w-64 shrink-0 snap-start">
+              <ProductCard
+                product={p}
+                labels={labels}
+                badges={badges}
+                layout={(((layout as string) === "list") ? "horizontal" : "vertical")}
+                ratio={ratio}
+                rating={rating}
+                action={action}
+                density={(((density as string) === "compact") ? "compact" : "default")}
+                onAdd={() => onAdd?.(p.id)}
+              />
+            </Box>
+          )}</For>
+        </Box>
+      ) : (
+        <Grid cols={(((layout as string) === "list") ? "1" : cols)} class="gap-4" data-testid="items">
+          <For each={products ?? []}>{(p) => (
+            <ProductCard
+              product={p}
+              labels={labels}
+              badges={badges}
+              layout={(((layout as string) === "list") ? "horizontal" : "vertical")}
+              ratio={ratio}
+              rating={rating}
+              action={action}
+              density={(((density as string) === "compact") ? "compact" : "default")}
+              onAdd={() => onAdd?.(p.id)}
+            />
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/product-info.tsx b/packages/solid/ui/src/blocks/product-info.tsx
new file mode 100644
index 0000000..94f63d0
--- /dev/null
+++ b/packages/solid/ui/src/blocks/product-info.tsx
@@ -0,0 +1,98 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+/**
+ * The details of a product under its buy box: texts in an accordion (native details) beside a card with the
+ * specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text
+ * open, none), tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { SectionFrame } from "../components/section-frame";
+import type { Detail, Spec, ProductInfoLabels } from "./product-info.types";
+
+export type ProductInfoProps = {
+  id: string;
+  title: string;
+  details: Detail[];
+  specs: Spec[];
+  labels: ProductInfoLabels;
+  layout?: "split" | "stacked";
+  expand?: "first" | "none";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ProductInfo({
+  id,
+  title,
+  details,
+  specs,
+  labels,
+  layout = "split",
+  expand = "first",
+  tone = "default",
+  landmarkLabel,
+}: ProductInfoProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Box
+        class={
+          (layout as string) === "split" ? "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"
+          : "grid grid-cols-1 gap-8"
+        }
+      >
+        {((details?.length ?? 0) > 0) ? (
+          <Stack
+            gap="0"
+            align="stretch"
+            class={(((layout as string) === "split") ? "lg:col-span-2" : "")}
+            data-testid="items"
+          >
+            <For each={details ?? []}>{(d, iOf) => { const i = iOf(); return (
+              <Disclosure variant="item" open={(((expand as string) === "first") && (i === 0))} data-testid="item">
+                <Summary variant="item">
+                  <Inline class="text-base font-semibold">
+                    {d.title}
+                  </Inline>
+                </Summary>
+                <Text size="sm" class="pb-4 text-muted-foreground">
+                  {d.text}
+                </Text>
+              </Disclosure>
+            ); }}</For>
+          </Stack>
+        ) : null}
+        {((specs?.length ?? 0) > 0) ? (
+          <Stack gap="4" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="specs">
+            <Title as={3} size="lg" weight="bold">
+              {labels.specs}
+            </Title>
+            <List tag="ul" class="flex flex-col">
+              <For each={specs ?? []}>{(s) => (
+                <ListItem
+                  class="flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0"
+                  data-testid="spec"
+                >
+                  <Inline class="text-muted-foreground">
+                    {s.label}
+                  </Inline>
+                  <Inline class="font-medium">
+                    {s.value}
+                  </Inline>
+                </ListItem>
+              )}</For>
+            </List>
+          </Stack>
+        ) : null}
+      </Box>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/product-info.types.ts b/packages/solid/ui/src/blocks/product-info.types.ts
new file mode 100644
index 0000000..f315d66
--- /dev/null
+++ b/packages/solid/ui/src/blocks/product-info.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type Detail = {
+  id: string;
+  title: string;
+  text: string;
+};
+
+export type Spec = {
+  id: string;
+  label: string;
+  value: string;
+};
+
+export type ProductInfoLabels = {
+  specs: string;
+};
diff --git a/packages/solid/ui/src/blocks/profile-form.tsx b/packages/solid/ui/src/blocks/profile-form.tsx
new file mode 100644
index 0000000..6907b86
--- /dev/null
+++ b/packages/solid/ui/src/blocks/profile-form.tsx
@@ -0,0 +1,113 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+/**
+ * An account settings form: a picture with a change button, name, email, bio and two notification switches, with
+ * save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default,
+ * muted).
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Form } from "../primitives/form/form";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { Stack } from "../primitives/stack/stack";
+import { Switch } from "../primitives/switch/switch";
+import { Textarea } from "../primitives/textarea/textarea";
+import { Title } from "../primitives/title/title";
+import { Field } from "../components/field";
+import { MediaFrame } from "../components/media-frame";
+import { Panel } from "../components/panel";
+import { cn, tpl } from "../utils";
+import type { ProfileLabels } from "./profile-form.types";
+
+export type ProfileFormProps = {
+  id: string;
+  title: string;
+  text: string;
+  labels: ProfileLabels;
+  layout?: "stacked" | "split";
+  avatar?: "show" | "hide";
+  prefs?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ProfileForm({
+  id,
+  title,
+  text,
+  labels,
+  layout = "stacked",
+  avatar = "show",
+  prefs = "show",
+  tone = "default",
+  landmarkLabel,
+}: ProfileFormProps) {
+  return (
+    <Block
+      tag="section"
+      aria-labelledby={(landmarkLabel ? undefined : ((title && id) ? tpl("{0}-t", id) : undefined))}
+      data-testid="panel-section"
+      aria-label={landmarkLabel}
+    >
+      <Container class="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+        <Panel title={title} description={text} id={id} class={cn((((tone as string) === "muted") ? "bg-muted" : ""))}>
+          <Form method="dialog" class="gap-6" data-testid="profile-form">
+            <Grid cols={(((layout as string) === "split") ? "1-2" : "1")} class="items-start gap-8">
+              <Stack gap="4" align="stretch">
+                {((avatar as string) === "show") ? (
+                  <Group gap="4" align="center" data-testid="avatar">
+                    <MediaFrame alt={labels.picture} ratio="1/1" class="size-16 shrink-0 rounded-full" />
+                    <Button variant="outline" size="sm" type="button">
+                      {labels.change}
+                    </Button>
+                  </Group>
+                ) : null}
+                <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+                  <Input type="text" name="name" autocomplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+                </Field>
+                <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+                  <Input type="email" name="email" autocomplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+                </Field>
+                <Field label={labels.bio} htmlFor={tpl("{0}-bio", id)}>
+                  <Textarea rows={4} name="bio" id={tpl("{0}-bio", id)} data-testid="field" />
+                </Field>
+              </Stack>
+              {((prefs as string) === "show") ? (
+                <Stack gap="4" align="stretch" data-testid="prefs">
+                  <Title as={3} size="base" weight="bold">
+                    {labels.prefs}
+                  </Title>
+                  <Group gap="4" align="center" justify="between">
+                    <Label for={tpl("{0}-updates", id)} class="text-sm">
+                      {labels.updates}
+                    </Label>
+                    <Switch name="updates" id={tpl("{0}-updates", id)} />
+                  </Group>
+                  <Group gap="4" align="center" justify="between">
+                    <Label for={tpl("{0}-alerts", id)} class="text-sm">
+                      {labels.alerts}
+                    </Label>
+                    <Switch name="alerts" id={tpl("{0}-alerts", id)} />
+                  </Group>
+                </Stack>
+              ) : null}
+            </Grid>
+            <Group gap="2" class="flex-wrap">
+              <Button variant="default" size="default" type="submit" data-testid="submit">
+                {labels.save}
+              </Button>
+              <Button variant="outline" size="default" type="button">
+                {labels.cancel}
+              </Button>
+            </Group>
+          </Form>
+        </Panel>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/profile-form.types.ts b/packages/solid/ui/src/blocks/profile-form.types.ts
new file mode 100644
index 0000000..3ac275b
--- /dev/null
+++ b/packages/solid/ui/src/blocks/profile-form.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+
+export type ProfileLabels = {
+  picture: string;
+  change: string;
+  name: string;
+  email: string;
+  bio: string;
+  prefs: string;
+  updates: string;
+  alerts: string;
+  save: string;
+  cancel: string;
+};
diff --git a/packages/solid/ui/src/blocks/project-grid.tsx b/packages/solid/ui/src/blocks/project-grid.tsx
new file mode 100644
index 0000000..e84e00f
--- /dev/null
+++ b/packages/solid/ui/src/blocks/project-grid.tsx
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+/**
+ * Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the
+ * picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay,
+ * bento, list), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { ProjectTiles } from "../components/project-tiles";
+import { SectionFrame } from "../components/section-frame";
+import type { Project, ProjectLabels } from "./project-grid.types";
+
+export type ProjectGridProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  projects: Project[];
+  empty?: string;
+  labels: ProjectLabels;
+  layout?: "cards" | "compact" | "overlay" | "bento" | "list";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function ProjectGrid({
+  id,
+  title,
+  lead = "",
+  projects,
+  empty = "",
+  labels,
+  layout = "cards",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ProjectGridProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      density={density}
+      layout={(((layout as string) === "list") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "list"), align: "start" }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <Box class="grid grid-cols-2 gap-4" data-testid="collage">
+          <MediaFrame alt={title} ratio="3/4" />
+          <MediaFrame alt={title} ratio="3/4" class="mt-8" />
+        </Box>
+      )}
+    >
+      {((projects?.length ?? 0) === 0) ? (
+        <EmptyState icon="folder-open" title={empty} />
+      ) : ((layout as string) === "list") ? (
+        <Stack gap="4" align="stretch" data-testid="items">
+          <For each={projects ?? []}>{(p) => (
+            <Group gap="4" align="start" class="border-b border-border pb-4" data-testid="item">
+              <MediaFrame alt={p.title} ratio="1/1" class="size-16 shrink-0" />
+              <Stack gap="2" align="stretch" class="flex-1">
+                <Group gap="4" justify="between">
+                  <Text size="sm" weight="semibold">
+                    {p.title}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {p.year}
+                  </Text>
+                </Group>
+                <Text size="sm" class="text-muted-foreground">
+                  {p.summary}
+                </Text>
+              </Stack>
+            </Group>
+          )}</For>
+        </Stack>
+      ) : (
+        <ProjectTiles projects={projects} labels={labels} layout={layout} />
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/project-grid.types.ts b/packages/solid/ui/src/blocks/project-grid.types.ts
new file mode 100644
index 0000000..1075407
--- /dev/null
+++ b/packages/solid/ui/src/blocks/project-grid.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Project = {
+  id: string;
+  title: string;
+  category: string;
+  year: number;
+  summary: string;
+  tags: string[];
+  featured: boolean;
+  client: string;
+  href?: string;
+};
+
+export type ProjectLabels = {
+  featured: string;
+  view: string;
+  case: string;
+};
diff --git a/packages/solid/ui/src/blocks/proof-band.tsx b/packages/solid/ui/src/blocks/proof-band.tsx
new file mode 100644
index 0000000..a229abb
--- /dev/null
+++ b/packages/solid/ui/src/blocks/proof-band.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above,
+ * beside), logos (name, icon), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import type { Logo } from "./logo-cloud.types";
+import type { Stat } from "./stats-band.types";
+
+export type ProofBandProps = {
+  id: string;
+  title: string;
+  logos: Logo[];
+  empty?: string;
+  stats: Stat[];
+  layout?: "above" | "beside";
+  logoStyle?: "name" | "icon";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function ProofBand({
+  id,
+  title,
+  logos,
+  empty = "",
+  stats,
+  layout = "above",
+  logoStyle = "name",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ProofBandProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} align="center" landmarkLabel={landmarkLabel}>
+      {((logos?.length ?? 0) === 0) ? (
+        <EmptyState icon="building-2" title={empty} />
+      ) : (
+        <Grid cols={(((layout as string) === "beside") ? "1-2" : "1")} class="items-center gap-8">
+          <Group gap="6" justify="center" class="flex-wrap text-muted-foreground" data-testid="logos">
+            <For each={logos ?? []}>{(logo) => (
+              <Group gap="2" align="center" data-testid="logo">
+                <LucideIcon name={logo.icon} size={24} />
+                <Text size="sm" weight="semibold" class={(((logoStyle as string) === "icon") ? "sr-only" : "")}>
+                  {logo.name}
+                </Text>
+              </Group>
+            )}</For>
+          </Group>
+          <Grid cols={(((layout as string) === "beside") ? "2" : "1-4")} class="gap-6 text-center" data-testid="stats">
+            <For each={stats ?? []}>{(stat) => (
+              <Stack gap="0" align="center" data-testid="stat">
+                <Text size="4xl" weight="bold">
+                  {stat.value}
+                </Text>
+                <Text size="sm" class="text-muted-foreground">
+                  {stat.label}
+                </Text>
+              </Stack>
+            )}</For>
+          </Grid>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/quote-split.tsx b/packages/solid/ui/src/blocks/quote-split.tsx
new file mode 100644
index 0000000..12284f0
--- /dev/null
+++ b/packages/solid/ui/src/blocks/quote-split.tsx
@@ -0,0 +1,147 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/quote-split.ts
+/**
+ * Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture,
+ * logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three
+ * stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured
+ * quote beside a stack), mediaSide, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { ActionGroup } from "../components/action-group";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { QuoteFigures } from "../components/quote-figures";
+import { QuoteLogoTiles } from "../components/quote-logo-tiles";
+import { QuoteRatingPanel } from "../components/quote-rating-panel";
+import { QuoteSlot } from "../components/quote-slot";
+import { SectionFrame } from "../components/section-frame";
+import type { QuoteExtras } from "./quote-split.types";
+import type { Quote, QuoteLabels } from "./testimonial-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Logo } from "./logo-cloud.types";
+import type { LinkActions } from "./error-page.types";
+
+export type QuoteSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  quotes: Quote[];
+  labels: QuoteLabels;
+  extras: QuoteExtras;
+  actions: LinkActions;
+  layout?: "media" | "logos" | "rating" | "stack" | "compact" | "bento";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  empty?: string;
+  landmarkLabel?: string;
+};
+
+export function QuoteSplit({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  quotes,
+  labels,
+  extras,
+  actions,
+  layout = "media",
+  mediaSide = "end",
+  tone = "default",
+  empty = "",
+  landmarkLabel,
+}: QuoteSplitProps) {
+  return (
+    <>
+      {((quotes?.length ?? 0) === 0) ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="quote" title={empty} />
+        </SectionFrame>
+      ) : (((layout as string) === "compact") || ((layout as string) === "bento")) ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          {((layout as string) === "bento") ? (
+            <QuoteFigures extras={extras} />
+          ) : null}
+          <Box
+            class={
+              (layout as string) === "bento" ? "grid grid-cols-1 gap-4 lg:grid-cols-2"
+              : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+            }
+          >
+            <For each={quotes ?? []}>{(q, iOf) => { const i = iOf(); return (
+              <QuoteSlot
+                q={q}
+                labels={labels}
+                layout={((((layout as string) === "bento") && (i === 0)) ? "single" : "grid")}
+                class={((((layout as string) === "bento") && (i === 0)) ? "lg:row-span-3" : "")}
+              />
+            ); }}</For>
+          </Box>
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge }}
+          tone={tone}
+          layout="split"
+          media={{ show: true, side: mediaSide }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <>
+              {((layout as string) === "rating") ? (
+                <QuoteRatingPanel extras={extras} labels={labels} />
+              ) : (
+                <MediaFrame alt={title} ratio="4/3" />
+              )}
+            </>
+          )}
+        >
+          {(((layout as string) === "media") || ((layout as string) === "logos") || ((layout as string) === "rating")) ? (
+            <>
+              <For each={quotes ?? []}>{(q, iOf) => { const i = iOf(); return (
+                <>
+                  {(i < 1) ? (
+                    <QuoteSlot
+                      q={q}
+                      labels={labels}
+                      kind={(((layout as string) === "media") ? "card" : "plain")}
+                      layout="single"
+                      class=""
+                    />
+                  ) : null}
+                </>
+              ); }}</For>
+            </>
+          ) : null}
+          {((layout as string) === "logos") ? (
+            <QuoteLogoTiles extras={extras} />
+          ) : null}
+          {((layout as string) === "stack") ? (
+            <Stack gap="4" align="stretch">
+              <For each={quotes ?? []}>{(q, iOf) => { const i = iOf(); return (
+                <>
+                  {(i < 3) ? (
+                    <QuoteSlot q={q} labels={labels} layout="stack" class="" />
+                  ) : null}
+                </>
+              ); }}</For>
+            </Stack>
+          ) : null}
+          {(((layout as string) === "media") || ((layout as string) === "logos") || ((layout as string) === "rating")) ? (
+            <ActionGroup
+              primary={actions.cta}
+              primaryHref={actions.href}
+              secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+              secondaryHref={actions.secondaryHref}
+            />
+          ) : null}
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/quote-split.types.ts b/packages/solid/ui/src/blocks/quote-split.types.ts
new file mode 100644
index 0000000..2f2e305
--- /dev/null
+++ b/packages/solid/ui/src/blocks/quote-split.types.ts
@@ -0,0 +1,13 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/quote-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Logo } from "./logo-cloud.types";
+
+export type QuoteExtras = {
+  stats: Stat[];
+  logos: Logo[];
+  rating: number;
+  score: string;
+  reviews: string;
+};
diff --git a/packages/solid/ui/src/blocks/review-list.tsx b/packages/solid/ui/src/blocks/review-list.tsx
new file mode 100644
index 0000000..7908f63
--- /dev/null
+++ b/packages/solid/ui/src/blocks/review-list.tsx
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+/**
+ * Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid),
+ * columns, item (card, plain), avatar (none, image), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { ArticleBlock } from "../components/article-block";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { Rating } from "../components/rating";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { Review, ReviewLabels } from "./review-list.types";
+
+export type ReviewListProps = {
+  id: string;
+  title: string;
+  reviews: Review[];
+  labels: ReviewLabels;
+  layout?: "list" | "grid";
+  item?: "card" | "plain";
+  avatar?: "none" | "image";
+  tone?: "default" | "muted";
+  density?: "default" | "roomy";
+  landmarkLabel?: string;
+};
+
+export function ReviewList({
+  id,
+  title,
+  reviews,
+  labels,
+  layout = "list",
+  item = "card",
+  avatar = "none",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ReviewListProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      measure={(((layout as string) === "list") ? "2xl" : "default")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((reviews?.length ?? 0) === 0) ? (
+        <EmptyState icon="message-square-quote" title={labels.empty} />
+      ) : null}
+      <Grid cols={(((layout as string) === "grid") ? "1-3" : "1")} class="gap-4" data-testid="items">
+        <For each={reviews ?? []}>{(r) => (
+          <ArticleBlock
+            class={cn(
+              "flex h-full flex-col gap-4",
+              (
+                (item as string) === "card" ? "rounded bg-card p-6 inset-ring inset-ring-border"
+                : "border-b border-border pb-4"
+              )
+            )}
+            testid="item"
+          >
+            <Rating value={r.rating} label={tpl(labels.ratingLabel, r.rating)} />
+            <Title as={3} size="base" weight="bold">
+              {r.title}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {r.text}
+            </Text>
+            <Group gap="4" align="center" class="mt-auto">
+              {((avatar as string) === "image") ? (
+                <MediaFrame alt={r.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+              ) : null}
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {r.author}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {r.date}
+                </Text>
+              </Stack>
+            </Group>
+          </ArticleBlock>
+        )}</For>
+      </Grid>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/review-list.types.ts b/packages/solid/ui/src/blocks/review-list.types.ts
new file mode 100644
index 0000000..f4aac17
--- /dev/null
+++ b/packages/solid/ui/src/blocks/review-list.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Review = {
+  id: string;
+  title: string;
+  author: string;
+  rating: number;
+  text: string;
+  date: string;
+};
+
+export type ReviewLabels = {
+  ratingLabel: string;
+  empty: string;
+};
diff --git a/packages/solid/ui/src/blocks/shopping-cart.tsx b/packages/solid/ui/src/blocks/shopping-cart.tsx
new file mode 100644
index 0000000..37e9791
--- /dev/null
+++ b/packages/solid/ui/src/blocks/shopping-cart.tsx
@@ -0,0 +1,133 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+/**
+ * The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the
+ * way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout
+ * (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { CartSummaryCard } from "../components/cart-summary-card";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { NumberField } from "../components/number-field";
+import { SectionFrame } from "../components/section-frame";
+import { fmtMoney, tpl } from "../utils";
+import type { ShoppingCartLabels } from "./shopping-cart.types";
+import type { CartLine, CartLabels } from "./cart-list.types";
+import type { SummaryRow } from "./order-summary.types";
+import type { Promo, CartSummaryLabels } from "../components/cart-summary-card.types";
+
+export type ShoppingCartProps = {
+  id: string;
+  title: string;
+  lines: CartLine[];
+  rows: SummaryRow[];
+  promos: Promo[];
+  labels: CartLabels;
+  totals: CartSummaryLabels;
+  actions: ShoppingCartLabels;
+  layout?: "split" | "stacked";
+  promo?: "show" | "hide";
+  progress?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function ShoppingCart({
+  id,
+  title,
+  lines,
+  rows,
+  promos,
+  labels,
+  totals,
+  actions,
+  layout = "split",
+  promo = "show",
+  progress = "show",
+  tone = "default",
+  landmarkLabel,
+}: ShoppingCartProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Box
+        class={
+          (layout as string) === "split" ? "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"
+          : "grid grid-cols-1 gap-8"
+        }
+      >
+        <Stack
+          gap="4"
+          align="stretch"
+          class={(((layout as string) === "split") ? "lg:col-span-2" : "")}
+          data-testid="lines"
+        >
+          {((lines?.length ?? 0) === 0) ? (
+            <EmptyState icon="shopping-cart" title={actions.empty} />
+          ) : null}
+          <For each={lines ?? []}>{(line) => (
+            <Group
+              gap="4"
+              align="center"
+              class="rounded bg-card inset-ring inset-ring-border flex-wrap p-4"
+              data-testid="item"
+            >
+              <MediaFrame alt={line.name} ratio="1/1" class="size-20 shrink-0" />
+              <Stack gap="0" class="min-w-40 flex-1">
+                <Text size="sm" weight="semibold">
+                  {line.name}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {line.variant}
+                </Text>
+                <Text size="sm">
+                  {fmtMoney(line.price, line.currency)}
+                </Text>
+              </Stack>
+              <NumberField
+                value={(line.qty == null ? undefined : String(line.qty))}
+                name={tpl("{0}-qty-{1}", id, line.id)}
+                min="1"
+                label={labels.qty}
+                decrease={labels.decrease}
+                increase={labels.increase}
+              />
+              <Text size="base" weight="bold" class="w-24 text-right">
+                {fmtMoney((line.price * line.qty), line.currency)}
+              </Text>
+              <Button variant="ghost" size="sm" layout="icon" aria-label={labels.remove} data-testid="remove">
+                <LucideIcon name="trash" size={16} />
+              </Button>
+            </Group>
+          )}</For>
+          <Group gap="4" justify="between" class="flex-wrap">
+            <Button variant="outline" size="default">
+              <LucideIcon name="arrow-left" size={16} />
+              {actions.back}
+            </Button>
+            <Button variant="ghost" size="default">
+              {actions.clear}
+            </Button>
+          </Group>
+        </Stack>
+        <Box class={(((layout as string) === "split") ? "lg:sticky lg:top-8" : "")} data-testid="aside">
+          <CartSummaryCard
+            field={tpl("{0}-promo", id)}
+            lines={lines}
+            rows={rows}
+            promos={promos}
+            labels={totals}
+            promo={promo}
+            progress={progress}
+          />
+        </Box>
+      </Box>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/shopping-cart.types.ts b/packages/solid/ui/src/blocks/shopping-cart.types.ts
new file mode 100644
index 0000000..9e785e9
--- /dev/null
+++ b/packages/solid/ui/src/blocks/shopping-cart.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type ShoppingCartLabels = {
+  back: string;
+  clear: string;
+  empty: string;
+};
diff --git a/packages/solid/ui/src/blocks/sidebar-nav.tsx b/packages/solid/ui/src/blocks/sidebar-nav.tsx
new file mode 100644
index 0000000..a64f60d
--- /dev/null
+++ b/packages/solid/ui/src/blocks/sidebar-nav.tsx
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full:
+ * icon and name, compact: icons only with the name hidden), user (show, hide), density.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { NavLink } from "./nav-bar.types";
+
+export type SidebarNavProps = {
+  label: string;
+  brand: string;
+  links: NavLink[];
+  current?: string;
+  userName: string;
+  userEmail: string;
+  width?: "full" | "compact";
+  user?: "show" | "hide";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function SidebarNav({
+  label,
+  brand,
+  links,
+  current = "",
+  userName,
+  userEmail,
+  width = "full",
+  user = "show",
+  density = "default",
+  landmarkLabel,
+}: SidebarNavProps) {
+  return (
+    <Block
+      tag="aside"
+      class={cn(
+        "flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border",
+        (((width as string) === "compact") ? "w-20 items-center" : "w-64")
+      )}
+      aria-label={(landmarkLabel ?? brand)}
+      data-testid="sidebar"
+      data-width={width}
+    >
+      <Group gap="2" align="center">
+        <LucideIcon name="layers" size={24} />
+        <Text size="base" weight="bold" class={(((width as string) === "compact") ? "sr-only" : "")}>
+          {brand}
+        </Text>
+      </Group>
+      {((links?.length ?? 0) > 0) ? (
+        <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)} class="flex-1">
+          <List
+            class={cn(
+              "m-0 flex list-none flex-col p-0",
+              (((density as string) === "compact") ? "gap-0" : "gap-2")
+            )}
+            data-testid="items"
+          >
+            <For each={links ?? []}>{(l) => (
+              <ListItem>
+                <MenuEntry
+                  href={l.href}
+                  class={cn(
+                    "flex items-center gap-4 rounded px-4 text-sm",
+                    "py-2",
+                    ((l.id === current) ? "bg-muted font-semibold" : "")
+                  )}
+                  current={(l.id === current)}
+                  testid="item"
+                >
+                  <LucideIcon name={l.icon} size={16} />
+                  <Inline class={(((width as string) === "compact") ? "sr-only" : "")}>
+                    {l.name}
+                  </Inline>
+                </MenuEntry>
+              </ListItem>
+            )}</For>
+          </List>
+        </NavBlock>
+      ) : null}
+      {((user as string) === "show") ? (
+        <Group gap="4" align="center" class="border-t border-border pt-4" data-testid="user">
+          <MediaFrame alt={userName} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+          <Stack gap="0" class={(((width as string) === "compact") ? "sr-only" : "min-w-0")}>
+            <Text size="sm" weight="semibold">
+              {userName}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {userEmail}
+            </Text>
+          </Stack>
+        </Group>
+      ) : null}
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/signup-wizard.tsx b/packages/solid/ui/src/blocks/signup-wizard.tsx
new file mode 100644
index 0000000..09a68b0
--- /dev/null
+++ b/packages/solid/ui/src/blocks/signup-wizard.tsx
@@ -0,0 +1,141 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+/**
+ * A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown,
+ * counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values
+ * between steps is the page's job.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Progress } from "../primitives/form/progress";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { Field } from "../components/field";
+import { cn, tpl } from "../utils";
+import type { WizardStep, WizardLabels } from "./signup-wizard.types";
+
+export type SignupWizardProps = {
+  id: string;
+  title: string;
+  steps: WizardStep[];
+  labels: WizardLabels;
+  current?: number;
+  level?: 1 | 2;
+  progress?: "bar" | "list";
+  layout?: "card" | "plain";
+  landmarkLabel?: string;
+  onGo?: (step: number) => void;
+};
+
+export function SignupWizard({
+  id,
+  title,
+  steps,
+  labels,
+  current = 1,
+  level = 2,
+  progress = "bar",
+  layout = "card",
+  landmarkLabel,
+  onGo,
+}: SignupWizardProps) {
+  return (
+    <>
+      {((steps?.length ?? 0) > 0) ? (
+        <Block
+          tag="section"
+          class={cn(
+            "mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8",
+            (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+          )}
+          aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+          data-testid="wizard"
+          data-current={(current == null ? undefined : String(current))}
+          aria-label={landmarkLabel}
+        >
+          <Title as={level} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+            {title}
+          </Title>
+          <Text size="sm" class="text-muted-foreground" data-testid="step-of">
+            {tpl(labels.stepOf, current, (steps?.length ?? 0))}
+          </Text>
+          {((progress as string) === "bar") ? (
+            <Progress
+              value={(current == null ? undefined : String(current))}
+              max={((steps?.length ?? 0) == null ? undefined : String((steps?.length ?? 0)))}
+              aria-label={labels.steps}
+            />
+          ) : null}
+          {((progress as string) === "list") ? (
+            <List class="m-0 flex list-none flex-col gap-2 p-0" aria-label={labels.steps} data-testid="step-list">
+              <For each={steps ?? []}>{(s, iOf) => { const i = iOf(); return (
+                <ListItem
+                  class={cn(
+                    "flex items-center gap-4 text-sm",
+                    (((i + 1) === current) ? "font-semibold" : "text-muted-foreground")
+                  )}
+                  aria-current={(((i + 1) === current) ? "step" : undefined)}
+                  data-testid="step-item"
+                >
+                  <LucideIcon name={(((i + 1) < current) ? "circle-check" : s.icon)} size={16} />
+                  {s.title}
+                </ListItem>
+              ); }}</For>
+            </List>
+          ) : null}
+          <For each={steps ?? []}>{(s, iOf) => { const i = iOf(); return (
+            <>
+              {((i + 1) === current) ? (
+                <Stack gap="4" align="stretch" data-testid="step">
+                  <Title as={3} size="xl" weight="bold">
+                    {s.title}
+                  </Title>
+                  <Text size="sm" class="text-muted-foreground">
+                    {s.text}
+                  </Text>
+                  <Box class="grid gap-4">
+                    <Field label={s.fieldA} htmlFor={tpl("{0}-a", id)}>
+                      <Input type="text" name={tpl("{0}-a", id)} id={tpl("{0}-a", id)} data-testid="field" />
+                    </Field>
+                    <Field label={s.fieldB} htmlFor={tpl("{0}-b", id)}>
+                      <Input type="text" name={tpl("{0}-b", id)} id={tpl("{0}-b", id)} data-testid="field" />
+                    </Field>
+                  </Box>
+                </Stack>
+              ) : null}
+            </>
+          ); }}</For>
+          <Group gap="2" justify="between">
+            <Button
+              variant="outline"
+              size="default"
+              type="button"
+              disabled={(current < 2)}
+              data-testid="wizard-back"
+              onClick={() => onGo?.((current - 1))}
+            >
+              {labels.back}
+            </Button>
+            <Button
+              variant="default"
+              size="default"
+              type="button"
+              data-testid="wizard-next"
+              onClick={() => onGo?.((current + 1))}
+            >
+              {((current >= (steps?.length ?? 0)) ? labels.finish : labels.next)}
+            </Button>
+          </Group>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/signup-wizard.types.ts b/packages/solid/ui/src/blocks/signup-wizard.types.ts
new file mode 100644
index 0000000..bfaf060
--- /dev/null
+++ b/packages/solid/ui/src/blocks/signup-wizard.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+
+export type WizardStep = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  fieldA: string;
+  fieldB: string;
+};
+
+export type WizardLabels = {
+  stepOf: string;
+  steps: string;
+  back: string;
+  next: string;
+  finish: string;
+};
diff --git a/packages/solid/ui/src/blocks/site-footer.tsx b/packages/solid/ui/src/blocks/site-footer.tsx
new file mode 100644
index 0000000..d967d79
--- /dev/null
+++ b/packages/solid/ui/src/blocks/site-footer.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+/**
+ * The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density
+ * (default, compact).
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { SiteFooterLabels } from "./site-footer.types";
+import type { SiteRoutes } from "./site-header.types";
+
+export type SiteFooterProps = {
+  labels: SiteFooterLabels;
+  routes?: SiteRoutes;
+  layout?: "minimal" | "centered";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function SiteFooter({
+  labels,
+  routes,
+  layout = "minimal",
+  density = "default",
+  landmarkLabel,
+}: SiteFooterProps) {
+  return (
+    <Block
+      tag="footer"
+      class="mt-12 border-t border-border"
+      data-testid="site-footer"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      <Container
+        class={cn(
+          "mx-auto w-full max-w-6xl px-4",
+          "flex flex-wrap items-center gap-4",
+          (((density as string) === "compact") ? "py-4" : "py-6"),
+          (((layout as string) === "centered") ? "flex-col text-center" : "justify-between")
+        )}
+        data-slot="container"
+      >
+        <Text size="sm" class="text-muted-foreground" data-testid="copyright">
+          {labels.copyright}
+        </Text>
+        <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", labels.nav, landmarkLabel)) : labels.nav)}>
+          <Group gap="4">
+            <MenuEntry href={routes?.home} class="font-semibold">
+              {labels.home}
+            </MenuEntry>
+            <MenuEntry href={routes?.pricing} class="font-semibold">
+              {labels.pricing}
+            </MenuEntry>
+          </Group>
+        </NavBlock>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/site-footer.types.ts b/packages/solid/ui/src/blocks/site-footer.types.ts
new file mode 100644
index 0000000..be44645
--- /dev/null
+++ b/packages/solid/ui/src/blocks/site-footer.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type SiteFooterLabels = {
+  copyright: string;
+  nav: string;
+  home: string;
+  pricing: string;
+};
diff --git a/packages/solid/ui/src/blocks/site-header.tsx b/packages/solid/ui/src/blocks/site-header.tsx
new file mode 100644
index 0000000..d732417
--- /dev/null
+++ b/packages/solid/ui/src/blocks/site-header.tsx
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+/**
+ * The page header: a skip link to the main content, the brand, the two navigation links (the current one carries
+ * aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position
+ * (static, sticky), actions (none, cta).
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { SiteHeaderLabels, SiteRoutes } from "./site-header.types";
+
+export type SiteHeaderProps = {
+  labels: SiteHeaderLabels;
+  routes?: SiteRoutes;
+  current: string;
+  layout?: "inline" | "stacked";
+  position?: "static" | "sticky";
+  actions?: "none" | "cta";
+  cta?: string;
+  ctaHref?: string;
+  landmarkLabel?: string;
+  onTheme?: () => void;
+};
+
+export function SiteHeader({
+  labels,
+  routes,
+  current,
+  layout = "inline",
+  position = "static",
+  actions = "none",
+  cta,
+  ctaHref,
+  landmarkLabel,
+  onTheme,
+}: SiteHeaderProps) {
+  return (
+    <Block
+      tag="header"
+      class={cn(
+        "border-b border-border bg-background",
+        (((position as string) === "sticky") ? "sticky top-0 z-40" : "")
+      )}
+      data-testid="site-header"
+      data-layout={layout}
+      aria-label={landmarkLabel}
+    >
+      <LinkPlain
+        href="#main-content"
+        class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+          "focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border"}
+        data-testid="skip-link"
+      >
+        {labels.skip}
+      </LinkPlain>
+      <Container
+        class={cn(
+          "mx-auto w-full max-w-6xl px-4",
+          "flex flex-wrap gap-4 py-4",
+          (((layout as string) === "stacked") ? "flex-col items-center" : "items-center justify-between")
+        )}
+        data-slot="container"
+      >
+        <MenuEntry href={routes?.home} class="text-lg font-medium" testid="brand">
+          {labels.brand}
+        </MenuEntry>
+        <NavBlock
+          label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", labels.nav, landmarkLabel)) : labels.nav)}
+          testid="site-nav"
+        >
+          <Group gap="4" align="center">
+            <MenuEntry
+              href={routes?.home}
+              class="font-semibold"
+              current={((current as string) === "home")}
+              testid="nav-link"
+            >
+              {labels.home}
+            </MenuEntry>
+            <MenuEntry
+              href={routes?.pricing}
+              class="font-semibold"
+              current={((current as string) === "pricing")}
+              testid="nav-link"
+            >
+              {labels.pricing}
+            </MenuEntry>
+          </Group>
+        </NavBlock>
+        <Group gap="4" align="center">
+          <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => onTheme?.()}>
+            {labels.theme}
+          </Button>
+          {(((actions as string) === "cta") && cta) ? (
+            <Button variant="default" size="sm" href={ctaHref} data-testid="header-cta">
+              {cta}
+            </Button>
+          ) : null}
+        </Group>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/site-header.types.ts b/packages/solid/ui/src/blocks/site-header.types.ts
new file mode 100644
index 0000000..0ef0ca2
--- /dev/null
+++ b/packages/solid/ui/src/blocks/site-header.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type SiteHeaderLabels = {
+  skip: string;
+  brand: string;
+  nav: string;
+  home: string;
+  pricing: string;
+  theme: string;
+};
+
+export type SiteRoutes = {
+  home?: string;
+  pricing?: string;
+};
diff --git a/packages/solid/ui/src/blocks/sitemap-footer.tsx b/packages/solid/ui/src/blocks/sitemap-footer.tsx
new file mode 100644
index 0000000..8bd10a9
--- /dev/null
+++ b/packages/solid/ui/src/blocks/sitemap-footer.tsx
@@ -0,0 +1,142 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+/**
+ * A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above,
+ * equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none,
+ * first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status
+ * itself is a port contract.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Container } from "../primitives/container/container";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { FooterCard } from "../components/footer-card";
+import { FooterColumns } from "../components/footer-columns";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { Pill } from "../components/pill";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { FooterSignup, FooterStatus } from "./sitemap-footer.types";
+import type { MegaGroup } from "./mega-menu.types";
+
+export type SitemapFooterProps = {
+  label: string;
+  brand: string;
+  tagline: string;
+  copyright: string;
+  groups: MegaGroup[];
+  signup?: FooterSignup;
+  status?: FooterStatus;
+  id?: string;
+  layout?: "columns" | "row" | "card";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function SitemapFooter({
+  label,
+  brand,
+  tagline,
+  copyright,
+  groups,
+  signup,
+  status,
+  id = "footer",
+  layout = "columns",
+  density = "default",
+  landmarkLabel,
+}: SitemapFooterProps) {
+  return (
+    <>
+      {((layout as string) === "card") ? (
+        <FooterCard label={label} brand={brand} groups={groups} landmarkLabel={landmarkLabel} />
+      ) : (
+        <Block
+          tag="footer"
+          class="mt-12 border-t border-border"
+          data-testid="site-footer"
+          data-layout={layout}
+          aria-label={landmarkLabel}
+        >
+          <Container
+            class={cn(
+              "mx-auto w-full max-w-6xl px-4",
+              "flex flex-col gap-8",
+              (((density as string) === "compact") ? "py-6" : "py-12")
+            )}
+            data-slot="container"
+          >
+            {(signup?.mode === "first") ? (
+              <Stack gap="4" class="max-w-md" data-testid="signup">
+                <Title as={3} size="xl" weight="bold">
+                  {signup?.title}
+                </Title>
+                <Form method="dialog" class={cn("w-full max-w-md", (false ? "mx-auto" : ""))} data-testid="email-form">
+                  <Label for={tpl("{0}-email", id)} class="sr-only">
+                    {signup?.label}
+                  </Label>
+                  <Group gap="2" align="start" class="w-full flex-wrap">
+                    <Input type="email" name="email" class="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+                    <Button variant="default" size="default" type="submit" data-testid="submit">
+                      {signup?.submit}
+                    </Button>
+                  </Group>
+                </Form>
+              </Stack>
+            ) : null}
+            {((layout as string) === "columns") ? (
+              <Box class="flex flex-col gap-8 md:flex-row md:items-start md:gap-12" data-slot="footer-top">
+                <Stack gap="2" class="md:w-64 md:shrink-0">
+                  <Text size="xl" weight="bold">
+                    {brand}
+                  </Text>
+                  <Text size="sm" class="text-muted-foreground">
+                    {tagline}
+                  </Text>
+                </Stack>
+                <Box class="min-w-0 flex-1">
+                  <FooterColumns label={label} groups={groups} landmarkLabel={landmarkLabel} />
+                </Box>
+              </Box>
+            ) : (
+              <Group gap="6" align="center" justify="between" class="flex-wrap">
+                <Text size="base" weight="bold">
+                  {brand}
+                </Text>
+                {((groups?.length ?? 0) > 0) ? (
+                  <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)}>
+                    <Group gap="4" class="flex-wrap">
+                      <For each={groups ?? []}>{(g) => (
+                        <MenuEntry href={g.href} class="text-sm" testid="group">
+                          {g.title}
+                        </MenuEntry>
+                      )}</For>
+                    </Group>
+                  </NavBlock>
+                ) : null}
+              </Group>
+            )}
+            <Group gap="4" align="center" justify="between" class="flex-wrap border-t border-border pt-6">
+              <Text size="sm" class="text-muted-foreground">
+                {copyright}
+              </Text>
+              {(status?.mode === "show") ? (
+                <Pill tone="green" icon="circle-check">
+                  {status?.label}
+                </Pill>
+              ) : null}
+            </Group>
+          </Container>
+        </Block>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/sitemap-footer.types.ts b/packages/solid/ui/src/blocks/sitemap-footer.types.ts
new file mode 100644
index 0000000..ca75815
--- /dev/null
+++ b/packages/solid/ui/src/blocks/sitemap-footer.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+export type FooterSignup = {
+  /** first: the sign-up comes before the links */
+  mode?: "none" | "first";
+  title?: string;
+  /** accessible name of the email field */
+  label?: string;
+  submit?: string;
+};
+
+export type FooterStatus = {
+  /** show: the status pill is drawn */
+  mode?: "none" | "show";
+  /** text of the pill */
+  label?: string;
+};
diff --git a/packages/solid/ui/src/blocks/skeleton-layout.tsx b/packages/solid/ui/src/blocks/skeleton-layout.tsx
new file mode 100644
index 0000000..fbcad15
--- /dev/null
+++ b/packages/solid/ui/src/blocks/skeleton-layout.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or
+ * an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content
+ * is loading. The shimmer itself belongs to the Skeleton part.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Skeleton } from "../primitives/skeleton/skeleton";
+import { Stack } from "../primitives/stack/stack";
+import { SectionFrame } from "../components/section-frame";
+import type { Line } from "./skeleton-layout.types";
+
+export type SkeletonLayoutProps = {
+  id: string;
+  title: string;
+  label: string;
+  lines: Line[];
+  shape?: "cards" | "list" | "article";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function SkeletonLayout({
+  id,
+  title,
+  label,
+  lines,
+  shape = "cards",
+  tone = "default",
+  landmarkLabel,
+}: SkeletonLayoutProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Block tag="div" class="w-full" role="status" aria-label={label} data-testid="skeleton" data-shape={shape}>
+        {((shape as string) === "cards") ? (
+          <Grid cols="1-3" class="gap-4">
+            <For each={lines ?? []}>{(l) => (
+              <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="item">
+                <Skeleton class="aspect-video w-full" />
+                <Skeleton class="h-4 w-2/3" />
+                <Skeleton class="h-4 w-full" />
+              </Stack>
+            )}</For>
+          </Grid>
+        ) : ((shape as string) === "list") ? (
+          <Stack gap="4" align="stretch">
+            <For each={lines ?? []}>{(l) => (
+              <Group gap="4" align="center" data-testid="item">
+                <Skeleton class="size-10 shrink-0 rounded-full" />
+                <Stack gap="2" class="flex-1">
+                  <Skeleton class="h-4 w-1/3" />
+                  <Skeleton class="h-4 w-full" />
+                </Stack>
+              </Group>
+            )}</For>
+          </Stack>
+        ) : (
+          <Stack gap="4" align="stretch" class="mx-auto max-w-2xl">
+            <Skeleton class="h-8 w-3/4" />
+            <For each={lines ?? []}>{(l) => (
+              <Stack gap="2" data-testid="item">
+                <Skeleton class="h-4 w-full" />
+                <Skeleton class="h-4 w-5/6" />
+              </Stack>
+            )}</For>
+          </Stack>
+        )}
+      </Block>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/skeleton-layout.types.ts b/packages/solid/ui/src/blocks/skeleton-layout.types.ts
new file mode 100644
index 0000000..b2c05ba
--- /dev/null
+++ b/packages/solid/ui/src/blocks/skeleton-layout.types.ts
@@ -0,0 +1,6 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Line = {
+  id: string;
+};
diff --git a/packages/solid/ui/src/blocks/slot-board.tsx b/packages/solid/ui/src/blocks/slot-board.tsx
new file mode 100644
index 0000000..88116da
--- /dev/null
+++ b/packages/solid/ui/src/blocks/slot-board.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+/**
+ * Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and
+ * the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item
+ * (card, plain), tone.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Select } from "../primitives/select/select";
+import { SelectOption } from "../primitives/select/select-option";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { Field } from "../components/field";
+import { SectionFrame } from "../components/section-frame";
+import { SlotGrid } from "../components/slot-grid";
+import { fmtMoney, tpl } from "../utils";
+import type { SlotLabels } from "./slot-board.types";
+import type { Day } from "../components/slot-grid.types";
+import type { Zone } from "./zone-table.types";
+
+export type SlotBoardProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  days: Day[];
+  empty?: string;
+  zone: Zone;
+  labels: SlotLabels;
+  layout?: "split" | "stacked";
+  item?: "card" | "plain";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function SlotBoard({
+  id,
+  title,
+  lead = "",
+  days,
+  empty = "",
+  zone,
+  labels,
+  layout = "split",
+  item = "card",
+  tone = "default",
+  landmarkLabel,
+}: SlotBoardProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} landmarkLabel={landmarkLabel}>
+      {((days?.length ?? 0) === 0) ? (
+        <EmptyState icon="calendar" title={empty} />
+      ) : (
+        <Box class="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+          <Box class={(((layout as string) === "split") ? "lg:col-span-2" : "lg:col-span-3")}>
+            <SlotGrid days={days} name={tpl("{0}-slot", id)} item={item} />
+          </Box>
+          {((layout as string) === "split") ? (
+            <Stack gap="4" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="aside">
+              <Field label={labels.zone} htmlFor={tpl("{0}-zone", id)}>
+                <Select name={tpl("{0}-zone", id)} id={tpl("{0}-zone", id)}>
+                  <SelectOption value={zone.id} label={zone.name} selected={true} />
+                </Select>
+              </Field>
+              <List tag="ul" class="flex flex-col gap-2">
+                <ListItem class="flex items-center justify-between gap-4 text-sm">
+                  <Inline class="text-muted-foreground">
+                    {labels.price}
+                  </Inline>
+                  <Inline class="font-medium">
+                    {fmtMoney(zone.price, zone.currency)}
+                  </Inline>
+                </ListItem>
+                <ListItem class="flex items-center justify-between gap-4 text-sm">
+                  <Inline class="text-muted-foreground">
+                    {labels.freeFrom}
+                  </Inline>
+                  <Inline class="font-medium">
+                    {fmtMoney(zone.freeFrom, zone.currency)}
+                  </Inline>
+                </ListItem>
+                <ListItem class="flex items-center justify-between gap-4 text-sm">
+                  <Inline class="text-muted-foreground">
+                    {labels.time}
+                  </Inline>
+                  <Inline class="font-medium">
+                    {zone.time}
+                  </Inline>
+                </ListItem>
+              </List>
+              <Button variant="default" size="default" class="w-full">
+                {labels.primary}
+              </Button>
+              <Button variant="outline" size="default" class="w-full">
+                {labels.secondary}
+              </Button>
+              <Text size="xs" class="text-muted-foreground">
+                {labels.note}
+              </Text>
+            </Stack>
+          ) : null}
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/slot-board.types.ts b/packages/solid/ui/src/blocks/slot-board.types.ts
new file mode 100644
index 0000000..a128b0b
--- /dev/null
+++ b/packages/solid/ui/src/blocks/slot-board.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type SlotLabels = {
+  zone: string;
+  price: string;
+  freeFrom: string;
+  time: string;
+  primary: string;
+  secondary: string;
+  note: string;
+};
diff --git a/packages/solid/ui/src/blocks/stats-band.tsx b/packages/solid/ui/src/blocks/stats-band.tsx
new file mode 100644
index 0000000..c5d5723
--- /dev/null
+++ b/packages/solid/ui/src/blocks/stats-band.tsx
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/**
+ * Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3,
+ * 4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may
+ * be empty.
+ */
+import { For, type JSX } from "solid-js";
+import { Grid } from "../primitives/grid/grid";
+import { Backdrop } from "../components/backdrop";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { StatFigure } from "../components/stat-figure";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Stat } from "./stats-band.types";
+
+export type StatsBandProps = {
+  id: string;
+  title?: string;
+  stats: Stat[];
+  empty?: string;
+  cols?: "2" | "3" | "4";
+  layout?: "row" | "stack";
+  surface?: "none" | "image" | "panel";
+  item?: "plain" | "card" | "icon";
+  align?: "start" | "center";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function StatsBand({
+  id,
+  title = "",
+  stats,
+  empty = "",
+  cols = "4",
+  layout = "row",
+  surface = "none",
+  item = "plain",
+  align = "center",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: StatsBandProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      align={align}
+      measure={
+        (surface as string) === "panel" ? "fill"
+        : (layout as string) === "stack" ? "xs"
+        : "default"
+      }
+      class={cn(
+        cn((((surface as string) === "image") ? "bg-transparent" : ""), (((surface as string) === "panel") ? "py-0" : "")),
+        (
+          (((surface as string) === "image") ? "image" : "none") === "image" ? "relative isolate overflow-hidden"
+          : ""
+        )
+      )}
+      landmarkLabel={landmarkLabel}
+    >
+      <Backdrop kind={(((surface as string) === "image") ? "image" : "none")} alt={title} />
+      {((stats?.length ?? 0) === 0) ? (
+        <EmptyState icon="chart-column" title={empty} />
+      ) : ((surface as string) === "panel") ? (
+        <Grid
+          cols={
+            (cols as string) === "2" ? "2"
+            : (cols as string) === "3" ? "2-3"
+            : (cols as string) === "4" ? "2-4"
+            : "3-6"
+          }
+          class={cn("w-full items-center bg-muted px-6", defaults.stats.panel)}
+          data-testid="items"
+        >
+          <For each={stats ?? []}>{(stat) => (
+            <StatFigure stat={stat} item={item} align={align} />
+          )}</For>
+        </Grid>
+      ) : (
+        <Grid
+          cols={
+            (layout as string) === "stack" ? "1"
+            : (cols as string) === "2" ? "2"
+            : (cols as string) === "3" ? "2-3"
+            : (cols as string) === "4" ? "2-4"
+            : "3-6"
+          }
+          class="gap-6"
+          data-testid="items"
+        >
+          <For each={stats ?? []}>{(stat) => (
+            <StatFigure stat={stat} item={item} align={align} />
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/stats-band.types.ts b/packages/solid/ui/src/blocks/stats-band.types.ts
new file mode 100644
index 0000000..5e5e229
--- /dev/null
+++ b/packages/solid/ui/src/blocks/stats-band.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Stat = {
+  id: string;
+  label: string;
+  value: string;
+  icon: string;
+  hint: string;
+};
diff --git a/packages/solid/ui/src/blocks/stepper.tsx b/packages/solid/ui/src/blocks/stepper.tsx
new file mode 100644
index 0000000..0fe10d8
--- /dev/null
+++ b/packages/solid/ui/src/blocks/stepper.tsx
@@ -0,0 +1,120 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+/**
+ * A multi-step form header: the steps with the current one marked (aria-current step), and the current step's
+ * text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show,
+ * hide).
+ */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { SectionFrame } from "../components/section-frame";
+import { cn, tpl } from "../utils";
+import type { Step } from "./steps-list.types";
+
+export type StepperProps = {
+  id: string;
+  title: string;
+  steps: Step[];
+  current?: number;
+  stepLabel: string;
+  back: string;
+  next: string;
+  layout?: "horizontal" | "vertical";
+  marker?: "number" | "icon";
+  summary?: "show" | "hide";
+  landmarkLabel?: string;
+};
+
+export function Stepper({
+  id,
+  title,
+  steps,
+  current = 2,
+  stepLabel,
+  back,
+  next,
+  layout = "horizontal",
+  marker = "number",
+  summary = "show",
+  landmarkLabel,
+}: StepperProps) {
+  return (
+    <SectionFrame id={id} title={title} measure="3xl" landmarkLabel={landmarkLabel}>
+      {((steps?.length ?? 0) > 0) ? (
+        <Stack gap="6" align="stretch" data-testid="stepper">
+          <Text size="sm" class="text-muted-foreground">
+            {tpl(stepLabel, current, (steps?.length ?? 0))}
+          </Text>
+          <List
+            tag="ol"
+            class={cn(
+              "m-0 flex list-none gap-4 p-0",
+              (((layout as string) === "vertical") ? "flex-col" : "flex-col sm:flex-row")
+            )}
+            data-testid="items"
+          >
+            <For each={steps ?? []}>{(s, iOf) => { const i = iOf(); return (
+              <ListItem
+                class="flex flex-1 items-center gap-4"
+                data-testid="item"
+                aria-current={(((i + 1) === current) ? "step" : undefined)}
+              >
+                <IconBadge
+                  variant={(((i + 1) < (current + 1)) ? "primary" : "outline")}
+                  size="sm"
+                  class={(((i + 1) < (current + 1)) ? "text-sm" : "text-sm text-muted-foreground")}
+                >
+                  {((marker as string) === "icon") ? (
+                    <LucideIcon name={s.icon} size={16} />
+                  ) : (
+                    <Inline class="text-sm font-bold">
+                      {((i + 1) == null ? undefined : String((i + 1)))}
+                    </Inline>
+                  )}
+                </IconBadge>
+                <Text size="sm" weight={(((i + 1) === current) ? "bold" : "semibold")}>
+                  {s.title}
+                </Text>
+              </ListItem>
+            ); }}</For>
+          </List>
+          {((summary as string) === "show") ? (
+            <>
+              <For each={steps ?? []}>{(s, iOf) => { const i = iOf(); return (
+                <>
+                  {((i + 1) === current) ? (
+                    <Stack gap="2" class="rounded bg-card p-6 inset-ring inset-ring-border" data-testid="step-summary">
+                      <Title as={3} size="xl" weight="bold">
+                        {s.title}
+                      </Title>
+                      <Text size="sm" class="text-muted-foreground">
+                        {s.text}
+                      </Text>
+                      <Group gap="2" class="pt-2">
+                        <Button variant="outline" size="sm" type="button">
+                          {back}
+                        </Button>
+                        <Button variant="default" size="sm" type="button">
+                          {next}
+                        </Button>
+                      </Group>
+                    </Stack>
+                  ) : null}
+                </>
+              ); }}</For>
+            </>
+          ) : null}
+        </Stack>
+      ) : null}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/steps-list.tsx b/packages/solid/ui/src/blocks/steps-list.tsx
new file mode 100644
index 0000000..284d5dc
--- /dev/null
+++ b/packages/solid/ui/src/blocks/steps-list.tsx
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/**
+ * How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon),
+ * align, density, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Step } from "./steps-list.types";
+
+export type StepsListProps = {
+  id: string;
+  title: string;
+  steps: Step[];
+  empty?: string;
+  layout?: "row" | "column";
+  marker?: "number" | "icon";
+  align?: "start" | "center";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function StepsList({
+  id,
+  title,
+  steps,
+  empty = "",
+  layout = "row",
+  marker = "number",
+  align = "start",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: StepsListProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      align={align}
+      measure={(((layout as string) === "row") ? "default" : "2xl")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((steps?.length ?? 0) === 0) ? (
+        <EmptyState icon="list-ordered" title={empty} />
+      ) : (
+        <List
+          tag="ol"
+          class={cn("grid gap-6", (((layout as string) === "row") ? "sm:grid-cols-2 md:grid-cols-4" : ""))}
+          data-testid="items"
+        >
+          <For each={steps ?? []}>{(step, iOf) => { const i = iOf(); return (
+            <ListItem
+              class={cn(
+                "flex gap-4",
+                (((layout as string) === "row") ? "flex-col" : ""),
+                (((align as string) === "center") ? "items-center text-center" : "")
+              )}
+              data-testid="item"
+            >
+              <IconBadge variant="primary" data-slot="marker">
+                {((marker as string) === "icon") ? (
+                  <LucideIcon name={step.icon} size={20} />
+                ) : (
+                  <Inline class="text-base font-bold">
+                    {((i + 1) == null ? undefined : String((i + 1)))}
+                  </Inline>
+                )}
+              </IconBadge>
+              <Stack gap="2" align={(((align as string) === "center") ? "center" : "start")}>
+                <Title as={3} size="xl" weight="bold">
+                  {step.title}
+                </Title>
+                <Text size="sm" class="text-muted-foreground">
+                  {step.text}
+                </Text>
+              </Stack>
+            </ListItem>
+          ); }}</For>
+        </List>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/steps-list.types.ts b/packages/solid/ui/src/blocks/steps-list.types.ts
new file mode 100644
index 0000000..f2bb96f
--- /dev/null
+++ b/packages/solid/ui/src/blocks/steps-list.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Step = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/solid/ui/src/blocks/store-hero.tsx b/packages/solid/ui/src/blocks/store-hero.tsx
new file mode 100644
index 0000000..a9ed242
--- /dev/null
+++ b/packages/solid/ui/src/blocks/store-hero.tsx
@@ -0,0 +1,144 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/storefront.ts
+/**
+ * The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay
+ * layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text
+ * over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { ActionGroup } from "../components/action-group";
+import { Backdrop } from "../components/backdrop";
+import { OfferMedia } from "../components/offer-media";
+import { SectionFrame } from "../components/section-frame";
+import type { OfferCard } from "./store-hero.types";
+import type { Feature } from "./feature-grid.types";
+import type { LinkActions } from "./error-page.types";
+
+export type StoreHeroProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  actions: LinkActions;
+  perks: Feature[];
+  card: OfferCard;
+  layout?: "overlay" | "backdrop";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function StoreHero({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 1,
+  actions,
+  perks,
+  card,
+  layout = "overlay",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+}: StoreHeroProps) {
+  return (
+    <>
+      {((layout as string) === "backdrop") ? (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge, level }}
+          tone={tone}
+          density="roomy"
+          measure="3xl"
+          class={(("image" === "image") ? "relative isolate overflow-hidden" : "")}
+          landmarkLabel={landmarkLabel}
+        >
+          <Backdrop kind="image" alt={title} />
+          <ActionGroup
+            primary={actions.cta}
+            primaryHref={actions.href}
+            secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+            secondaryHref={actions.secondaryHref}
+          />
+          {((perks?.length ?? 0) > 0) ? (
+            <Grid cols="1-3" class="gap-4" data-testid="perks">
+              <For each={perks ?? []}>{(p, iOf) => { const i = iOf(); return (
+                <>
+                  {(i < 3) ? (
+                    <Group gap="4" align="start" data-testid="perk">
+                      <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                        <LucideIcon name={p.icon} size={20} />
+                      </Box>
+                      <Stack gap="0">
+                        <Text size="sm" weight="semibold">
+                          {p.title}
+                        </Text>
+                        <Text size="xs" class="text-muted-foreground">
+                          {p.text}
+                        </Text>
+                      </Stack>
+                    </Group>
+                  ) : null}
+                </>
+              ); }}</For>
+            </Grid>
+          ) : null}
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge, level }}
+          layout="split"
+          media={{ show: true, side: mediaSide }}
+          tone={tone}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <OfferMedia alt={title} card={card} />
+          )}
+        >
+          <ActionGroup
+            primary={actions.cta}
+            primaryHref={actions.href}
+            secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+            secondaryHref={actions.secondaryHref}
+          />
+          {((perks?.length ?? 0) > 0) ? (
+            <Grid cols="1-3" class="gap-4" data-testid="perks">
+              <For each={perks ?? []}>{(p, iOf) => { const i = iOf(); return (
+                <>
+                  {(i < 3) ? (
+                    <Group gap="4" align="start" data-testid="perk">
+                      <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                        <LucideIcon name={p.icon} size={20} />
+                      </Box>
+                      <Stack gap="0">
+                        <Text size="sm" weight="semibold">
+                          {p.title}
+                        </Text>
+                        <Text size="xs" class="text-muted-foreground">
+                          {p.text}
+                        </Text>
+                      </Stack>
+                    </Group>
+                  ) : null}
+                </>
+              ); }}</For>
+            </Grid>
+          ) : null}
+        </SectionFrame>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/store-hero.types.ts b/packages/solid/ui/src/blocks/store-hero.types.ts
new file mode 100644
index 0000000..3ded713
--- /dev/null
+++ b/packages/solid/ui/src/blocks/store-hero.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/storefront.ts
+
+export type OfferCard = {
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/solid/ui/src/blocks/store-locations.tsx b/packages/solid/ui/src/blocks/store-locations.tsx
new file mode 100644
index 0000000..a4b6c4c
--- /dev/null
+++ b/packages/solid/ui/src/blocks/store-locations.tsx
@@ -0,0 +1,137 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+/**
+ * The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the
+ * services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Link } from "../primitives/link/link";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { at, cn, tpl } from "../utils";
+import type { Store, StoreLabels } from "./store-locations.types";
+
+export type StoreLocationsProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  stores: Store[];
+  empty?: string;
+  kinds: Record<string, string>;
+  labels: StoreLabels;
+  layout?: "cards" | "list" | "map";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function StoreLocations({
+  id,
+  title,
+  lead = "",
+  stores,
+  empty = "",
+  kinds,
+  labels,
+  layout = "cards",
+  tone = "default",
+  landmarkLabel,
+}: StoreLocationsProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} landmarkLabel={landmarkLabel}>
+      {((stores?.length ?? 0) === 0) ? (
+        <EmptyState icon="store" title={empty} />
+      ) : (
+        <Box
+          class={cn(
+            "grid grid-cols-1 gap-8",
+            (((layout as string) === "map") ? "items-start md:grid-cols-2" : "")
+          )}
+        >
+          <Box
+            class={
+              (layout as string) === "cards" ? "grid grid-cols-1 gap-4 md:grid-cols-2"
+              : "flex flex-col gap-4"
+            }
+            data-testid="items"
+          >
+            <For each={stores ?? []}>{(s) => (
+              <Stack
+                gap="4"
+                class={
+                  (layout as string) === "list" ? "border-b border-border pb-4"
+                  : "rounded bg-card inset-ring inset-ring-border p-6"
+                }
+                data-testid="item"
+              >
+                <Stack gap="2">
+                  <Badge variant="outline" size="default" class="w-fit">
+                    {at(kinds, s.kind)}
+                  </Badge>
+                  <Title as={3} size="lg" weight="bold">
+                    {s.name}
+                  </Title>
+                </Stack>
+                <List
+                  tag="ul"
+                  class={
+                    (layout as string) === "list" ? "flex flex-wrap gap-x-8 gap-y-2 text-sm"
+                    : "flex flex-col gap-2 text-sm"
+                  }
+                >
+                  <ListItem class="flex items-center gap-2">
+                    <LucideIcon name="map-pin" size={16} />
+                    <Inline>
+                      {s.address}
+                    </Inline>
+                  </ListItem>
+                  <ListItem class="flex items-center gap-2">
+                    <LucideIcon name="clock" size={16} />
+                    <Inline>
+                      {s.hours}
+                    </Inline>
+                  </ListItem>
+                  <ListItem class="flex items-center gap-2">
+                    <LucideIcon name="phone" size={16} />
+                    <Link href={tpl("tel:{0}", s.phone)} variant="default">
+                      {(s.phone ?? "").replaceAll(" ", "\u00a0")}
+                    </Link>
+                  </ListItem>
+                </List>
+                {((layout as string) === "cards") ? (
+                  <>
+                    <Text size="sm" class="text-muted-foreground">
+                      {s.note}
+                    </Text>
+                    <Group gap="2" class="flex-wrap">
+                      <For each={s.services ?? []}>{(v) => (
+                        <Badge variant="secondary" size="default">
+                          {v}
+                        </Badge>
+                      )}</For>
+                    </Group>
+                  </>
+                ) : null}
+              </Stack>
+            )}</For>
+          </Box>
+          {((layout as string) === "map") ? (
+            <Box class="md:sticky md:top-8">
+              <MediaFrame alt={labels.map} ratio="1/1" />
+            </Box>
+          ) : null}
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/store-locations.types.ts b/packages/solid/ui/src/blocks/store-locations.types.ts
new file mode 100644
index 0000000..8d88fff
--- /dev/null
+++ b/packages/solid/ui/src/blocks/store-locations.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type Store = {
+  id: string;
+  name: string;
+  kind: string;
+  address: string;
+  hours: string;
+  phone: string;
+  note: string;
+  services: string[];
+};
+
+export type StoreLabels = {
+  map: string;
+};
diff --git a/packages/solid/ui/src/blocks/story-tabs.tsx b/packages/solid/ui/src/blocks/story-tabs.tsx
new file mode 100644
index 0000000..0d7d59d
--- /dev/null
+++ b/packages/solid/ui/src/blocks/story-tabs.tsx
@@ -0,0 +1,130 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/story-tabs.ts
+/**
+ * A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year
+ * with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next
+ * arrows and one dot per step), tone. Choosing a step emits `select`.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { StoryDots } from "../components/story-dots";
+import { StoryPanel } from "../components/story-panel";
+import type { StoryLabels } from "./story-tabs.types";
+import type { Milestone } from "./milestone-timeline.types";
+
+export type StoryTabsProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  steps: Milestone[];
+  empty?: string;
+  active: string;
+  labels: StoryLabels;
+  layout?: "years" | "carousel";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+  onSelect?: (id: string) => void;
+};
+
+export function StoryTabs({
+  id,
+  title,
+  lead = "",
+  badge = "",
+  steps,
+  empty = "",
+  active,
+  labels,
+  layout = "years",
+  tone = "default",
+  landmarkLabel,
+  onSelect,
+}: StoryTabsProps) {
+  return (
+    <>
+      {((steps?.length ?? 0) === 0) ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <EmptyState icon="milestone" title={empty} />
+        </SectionFrame>
+      ) : ((layout as string) === "years") ? (
+        <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+          <Box class="grid grid-cols-2 gap-2 sm:grid-cols-4" data-testid="story-tabs">
+            <For each={steps ?? []}>{(s) => (
+              <Button
+                variant={((s.id === active) ? "default" : "outline")}
+                size="lg"
+                type="button"
+                class="h-auto flex-col items-start gap-0 py-2 text-start"
+                data-testid="story-tab"
+                data-active={((s.id === active) ? "true" : "false")}
+                onClick={() => onSelect?.(s.id)}
+              >
+                <Inline class="text-sm font-semibold">
+                  {s.date}
+                </Inline>
+                <Inline class="text-xs">
+                  {s.tag}
+                </Inline>
+              </Button>
+            )}</For>
+          </Box>
+          <For each={steps ?? []}>{(s, iOf) => { const i = iOf(); return (
+            <>
+              {(s.id === active) ? (
+                <StoryPanel s={s} index={i} total={(steps?.length ?? 0)} labels={labels} />
+              ) : null}
+            </>
+          ); }}</For>
+        </SectionFrame>
+      ) : (
+        <SectionFrame
+          id={id}
+          title={title}
+          lead={lead}
+          heading={{ badge }}
+          tone={tone}
+          layout="split"
+          media={{ show: true }}
+          landmarkLabel={landmarkLabel}
+          aside={(
+            <Stack gap="4" align="stretch">
+              <MediaFrame alt={title} ratio="4/3" />
+              <Group gap="4" align="center" justify="between">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  layout="icon"
+                  type="button"
+                  aria-label={labels.previous}
+                  data-testid="story-arrow"
+                >
+                  <LucideIcon name="chevron-left" size={16} />
+                </Button>
+                <StoryDots steps={steps} active={active} />
+                <Button
+                  variant="outline"
+                  size="sm"
+                  layout="icon"
+                  type="button"
+                  aria-label={labels.next}
+                  data-testid="story-arrow"
+                >
+                  <LucideIcon name="chevron-right" size={16} />
+                </Button>
+              </Group>
+            </Stack>
+          )}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/story-tabs.types.ts b/packages/solid/ui/src/blocks/story-tabs.types.ts
new file mode 100644
index 0000000..04d1dc0
--- /dev/null
+++ b/packages/solid/ui/src/blocks/story-tabs.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/story-tabs.ts
+
+export type StoryLabels = {
+  step: string;
+  previous: string;
+  next: string;
+};
diff --git a/packages/solid/ui/src/blocks/support-channels.tsx b/packages/solid/ui/src/blocks/support-channels.tsx
new file mode 100644
index 0000000..13a5fd0
--- /dev/null
+++ b/packages/solid/ui/src/blocks/support-channels.tsx
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+/**
+ * Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout
+ * (grid, list), columns, action (link, none), tone (default, muted).
+ */
+import { For, type JSX } from "solid-js";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MenuEntry } from "../components/menu-entry";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type SupportChannelsProps = {
+  id: string;
+  title: string;
+  channels: Feature[];
+  empty?: string;
+  open: string;
+  layout?: "grid" | "list";
+  cols?: "1-2" | "1-3";
+  action?: "link" | "none";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function SupportChannels({
+  id,
+  title,
+  channels,
+  empty = "",
+  open,
+  layout = "grid",
+  cols = "1-3",
+  action = "link",
+  tone = "default",
+  landmarkLabel,
+}: SupportChannelsProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      {((channels?.length ?? 0) === 0) ? (
+        <EmptyState icon="life-buoy" title={empty} />
+      ) : (
+        <Grid cols={(((layout as string) === "list") ? "1" : cols)} class="gap-4" data-testid="items">
+          <For each={channels ?? []}>{(c) => (
+            <Card
+              variant="default"
+              class={cn("h-full", (((layout as string) === "list") ? "flex-row items-center" : ""))}
+              data-testid="item"
+            >
+              <CardContent class={cn("flex flex-1 gap-4", (((layout as string) === "list") ? "items-center" : "flex-col"))}>
+                <LucideIcon name={c.icon} size={24} />
+                <Stack gap="2" class="flex-1">
+                  <Title as={3} size="base" weight="bold">
+                    {c.title}
+                  </Title>
+                  <Text size="sm" class="text-muted-foreground">
+                    {c.text}
+                  </Text>
+                </Stack>
+                {((action as string) === "link") ? (
+                  <MenuEntry href={c.href} class="font-semibold" testid="open">
+                    {open}
+                  </MenuEntry>
+                ) : null}
+              </CardContent>
+            </Card>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/team-grid.tsx b/packages/solid/ui/src/blocks/team-grid.tsx
new file mode 100644
index 0000000..03b8c5e
--- /dev/null
+++ b/packages/solid/ui/src/blocks/team-grid.tsx
@@ -0,0 +1,111 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+/**
+ * The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows
+ * beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory),
+ * cols, tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { MemberRow } from "../components/member-row";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Member } from "./team-grid.types";
+
+export type TeamGridProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  members: Member[];
+  empty?: string;
+  depts: Record<string, string>;
+  layout?: "cards" | "minimal" | "detailed" | "list" | "directory";
+  cols?: "1-3" | "1-4";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function TeamGrid({
+  id,
+  title,
+  lead = "",
+  members,
+  empty = "",
+  depts,
+  layout = "cards",
+  cols = "1-4",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: TeamGridProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      tone={tone}
+      density={density}
+      layout={(((layout as string) === "list") ? "split" : "stack")}
+      media={{ show: ((layout as string) === "list"), side: "start", align: "start" }}
+      landmarkLabel={landmarkLabel}
+      aside={(
+        <MediaFrame alt={title} ratio="3/4" />
+      )}
+    >
+      {((members?.length ?? 0) === 0) ? (
+        <EmptyState icon="users" title={empty} />
+      ) : (
+        <Box
+          class={
+            (layout as string) === "minimal" ? "grid grid-cols-2 gap-8 md:grid-cols-4"
+            : (layout as string) === "directory" ? "grid grid-cols-1 gap-4 md:grid-cols-2"
+            : (layout as string) === "list" ? "flex flex-col gap-4"
+            : (cols as string) === "1-3" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+            : "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4"
+          }
+          data-testid="items"
+        >
+          <For each={members ?? []}>{(m) => (
+            <>
+              {((layout as string) === "minimal") ? (
+                <Stack gap="2" align="center" class="text-center" data-testid="item">
+                  <MediaFrame alt={m.name} ratio="1/1" class={cn("size-16", "shrink-0")} />
+                  <Text size="sm" weight="semibold">
+                    {m.name}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {m.role}
+                  </Text>
+                </Stack>
+              ) : ((layout as string) === "cards") ? (
+                <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="item">
+                  <MediaFrame alt={m.name} ratio="1/1" />
+                  <Stack gap="2">
+                    <Stack gap="0">
+                      <Text size="base" weight="semibold">
+                        {m.name}
+                      </Text>
+                      <Text size="sm" class="text-muted-foreground">
+                        {m.role}
+                      </Text>
+                    </Stack>
+                    <Text size="sm" class="text-muted-foreground">
+                      {m.bio}
+                    </Text>
+                  </Stack>
+                </Stack>
+              ) : (
+                <MemberRow member={m} depts={depts} layout={layout} />
+              )}
+            </>
+          )}</For>
+        </Box>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/team-grid.types.ts b/packages/solid/ui/src/blocks/team-grid.types.ts
new file mode 100644
index 0000000..fefd4c8
--- /dev/null
+++ b/packages/solid/ui/src/blocks/team-grid.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Member = {
+  id: string;
+  name: string;
+  role: string;
+  dept: string;
+  location: string;
+  bio: string;
+  skills: string[];
+};
diff --git a/packages/solid/ui/src/blocks/template-grid.tsx b/packages/solid/ui/src/blocks/template-grid.tsx
new file mode 100644
index 0000000..1c6f766
--- /dev/null
+++ b/packages/solid/ui/src/blocks/template-grid.tsx
@@ -0,0 +1,134 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/templates.ts
+/**
+ * Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all
+ * button.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Template, Filter, TemplateLabels } from "./template-grid.types";
+
+export type TemplateGridProps = {
+  id: string;
+  title: string;
+  templates: Template[];
+  filters: Filter[];
+  browseHref?: string;
+  labels: TemplateLabels;
+  cols?: "1-3" | "1-4";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  empty?: string;
+  landmarkLabel?: string;
+};
+
+export function TemplateGrid({
+  id,
+  title,
+  templates,
+  filters,
+  browseHref,
+  labels,
+  cols = "1-4",
+  tone = "default",
+  density = "compact",
+  empty = "",
+  landmarkLabel,
+}: TemplateGridProps) {
+  return (
+    <SectionFrame id={id} tone={tone} density={density} measure="fill" class="py-0" landmarkLabel={landmarkLabel}>
+      <Stack gap="8" align="stretch">
+        <Group gap="4" align="center" justify="between" class="h-8 w-full flex-wrap">
+          <Title as={2} size="2xl" weight="semibold" class="leading-9" id={(id + "-title")}>
+            {title}
+          </Title>
+          {((filters?.length ?? 0) > 0) ? (
+            <Group
+              gap="4"
+              align="center"
+              class="flex-wrap"
+              role="group"
+              aria-label={labels.filters}
+              data-testid="template-filters"
+            >
+              <For each={filters ?? []}>{(f) => (
+                <Button variant="outline" size="sm" type="button" class="gap-2" data-testid="template-filter">
+                  {f.icon ? (
+                    <LucideIcon name={f.icon} size={16} />
+                  ) : null}
+                  {f.title}
+                </Button>
+              )}</For>
+            </Group>
+          ) : null}
+        </Group>
+        {((templates?.length ?? 0) === 0) ? (
+          <EmptyState icon="layout-template" title={empty} />
+        ) : (
+          <Grid cols={cols} class="w-full gap-6" data-testid="template-grid">
+            <For each={templates ?? []}>{(t) => (
+              <Box
+                class={cn(
+                  "flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border",
+                  defaults.templates.card
+                )}
+                data-testid="template-card"
+              >
+                <Box class={cn("shrink-0 overflow-hidden", defaults.templates.image)}>
+                  <MediaFrame alt={t.title} class={cn("size-full", defaults.media.rounded)} />
+                </Box>
+                <Group gap="4" align="center" class={cn("w-full", defaults.templates.footer)} data-testid="template-footer">
+                  <IconBadge size="sm" class="overflow-hidden" data-testid="template-avatar">
+                    <LucideIcon name="layout-template" size={16} />
+                  </IconBadge>
+                  <Stack gap="0" class="min-w-0 flex-1">
+                    <Title as={3} size="base" weight="semibold" class="truncate leading-6">
+                      {t.title}
+                    </Title>
+                    <Group gap="4" align="center" class="h-4 text-muted-foreground">
+                      <Group gap="2" align="center">
+                        <LucideIcon name="eye" size={16} />
+                        <Inline class="sr-only">
+                          {labels.views}
+                        </Inline>
+                        <Text size="xs" weight="bold" class="leading-4">
+                          {t.views}
+                        </Text>
+                      </Group>
+                      <Group gap="2" align="center">
+                        <LucideIcon name="heart" size={16} />
+                        <Inline class="sr-only">
+                          {labels.likes}
+                        </Inline>
+                        <Text size="xs" weight="bold" class="leading-4">
+                          {t.likes}
+                        </Text>
+                      </Group>
+                    </Group>
+                  </Stack>
+                </Group>
+              </Box>
+            )}</For>
+          </Grid>
+        )}
+        <Button variant="outline" size="sm" href={browseHref} class="w-full" data-testid="template-browse">
+          {labels.browse}
+        </Button>
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/template-grid.types.ts b/packages/solid/ui/src/blocks/template-grid.types.ts
new file mode 100644
index 0000000..3a51f9a
--- /dev/null
+++ b/packages/solid/ui/src/blocks/template-grid.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/templates.ts
+
+export type Template = {
+  id: string;
+  title: string;
+  views: string;
+  likes: string;
+  topic: string;
+};
+
+export type Filter = {
+  id: string;
+  title: string;
+  value: string;
+  icon?: string;
+};
+
+export type TemplateLabels = {
+  filters: string;
+  browse: string;
+  views: string;
+  likes: string;
+};
diff --git a/packages/solid/ui/src/blocks/testimonial-grid.tsx b/packages/solid/ui/src/blocks/testimonial-grid.tsx
new file mode 100644
index 0000000..cc9490d
--- /dev/null
+++ b/packages/solid/ui/src/blocks/testimonial-grid.tsx
@@ -0,0 +1,82 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+/**
+ * Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured
+ * quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card,
+ * plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the
+ * Carousel port contract around the single layout.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Grid } from "../primitives/grid/grid";
+import { EmptyState } from "../components/empty-state";
+import { QuoteCard } from "../components/quote-card";
+import { SectionFrame } from "../components/section-frame";
+import type { Quote, QuoteLabels, QuoteItem } from "./testimonial-grid.types";
+
+export type TestimonialGridProps = {
+  id: string;
+  title: string;
+  quotes: Quote[];
+  empty?: string;
+  labels: QuoteLabels;
+  layout?: "grid" | "single" | "stack" | "masonry" | "strip";
+  cols?: "1-2" | "1-3";
+  item?: QuoteItem;
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function TestimonialGrid({
+  id,
+  title,
+  quotes,
+  empty = "",
+  labels,
+  layout = "grid",
+  cols = "1-3",
+  item,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: TestimonialGridProps) {
+  return (
+    <SectionFrame
+      id={id}
+      title={title}
+      tone={tone}
+      density={density}
+      align={(((layout as string) === "single") ? "center" : "start")}
+      measure={(((layout as string) === "grid") ? "default" : "2xl")}
+      landmarkLabel={landmarkLabel}
+    >
+      {((quotes?.length ?? 0) === 0) ? (
+        <EmptyState icon="message-square-quote" title={empty} />
+      ) : (((layout as string) === "masonry") || ((layout as string) === "strip")) ? (
+        <Block
+          tag="div"
+          class={
+            (layout as string) === "masonry" ? "columns-1 gap-4 md:columns-2 xl:columns-3"
+            : "flex snap-x gap-4 overflow-x-auto pb-2"
+          }
+          data-testid="items"
+        >
+          <For each={quotes ?? []}>{(q) => (
+            <QuoteCard q={q} labels={labels} item={item} layout={layout} />
+          )}</For>
+        </Block>
+      ) : (
+        <Grid cols={(((layout as string) === "grid") ? cols : "1")} class="gap-4" data-testid="items">
+          <For each={quotes ?? []}>{(q, iOf) => { const i = iOf(); return (
+            <>
+              {(((layout as string) !== "single") || (i === 0)) ? (
+                <QuoteCard q={q} labels={labels} item={item} layout={layout} />
+              ) : null}
+            </>
+          ); }}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/testimonial-grid.types.ts b/packages/solid/ui/src/blocks/testimonial-grid.types.ts
new file mode 100644
index 0000000..cff2f47
--- /dev/null
+++ b/packages/solid/ui/src/blocks/testimonial-grid.types.ts
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Quote = {
+  id: string;
+  author: string;
+  role: string;
+  company: string;
+  quote: string;
+  rating: number;
+  handle: string;
+  time: string;
+  mark: string;
+};
+
+export type QuoteLabels = {
+  /** template of the rating's accessible name, e.g. `{0} out of 5` */
+  rating: string;
+  /** template of the line under the author, e.g. `{0}, {1}` (role, company) */
+  byLine: string;
+  /** template of the line under a social author, e.g. `{0} / {1}` (handle, time) */
+  handleLine: string;
+};
+
+export type QuoteItem = {
+  /** card: boxed; plain: a bare figure; social: a post of a social wall */
+  kind?: "card" | "plain" | "social";
+  /** a round picture of the author */
+  avatar?: "none" | "image";
+  /** the stars (not on social posts) */
+  rating?: "show" | "hide";
+  /** a company glyph above the quote */
+  mark?: "none" | "icon";
+};
diff --git a/packages/solid/ui/src/blocks/tour-callout.tsx b/packages/solid/ui/src/blocks/tour-callout.tsx
new file mode 100644
index 0000000..bf3cc84
--- /dev/null
+++ b/packages/solid/ui/src/blocks/tour-callout.tsx
@@ -0,0 +1,91 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the
+ * position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target),
+ * tone, density.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+
+export type TourCalloutProps = {
+  id: string;
+  title: string;
+  text: string;
+  target: string;
+  position: string;
+  skip: string;
+  next: string;
+  placement?: "below" | "above" | "end";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function TourCallout({
+  id,
+  title,
+  text,
+  target,
+  position,
+  skip,
+  next,
+  placement = "below",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: TourCalloutProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      <Block
+        tag="div"
+        class={cn(
+          "flex gap-4",
+          (
+            (placement as string) === "end" ? "flex-col items-start md:flex-row md:items-center"
+            : (placement as string) === "above" ? "flex-col-reverse items-start"
+            : "flex-col items-start"
+          )
+        )}
+        data-testid="tour"
+        data-placement={placement}
+      >
+        <Button variant="outline" size="default" type="button" class="inset-ring-foreground" data-testid="tour-target">
+          {target}
+        </Button>
+        <Stack
+          gap="4"
+          align="stretch"
+          class={cn("w-full max-w-sm", "rounded bg-card inset-ring inset-ring-border", "p-4", "shadow-md")}
+          role="group"
+          aria-label={title}
+          data-testid="tour-callout"
+        >
+          <Text size="xs" class="text-muted-foreground">
+            {position}
+          </Text>
+          <Text size="base" weight="semibold">
+            {title}
+          </Text>
+          <Text size="sm" class="text-muted-foreground">
+            {text}
+          </Text>
+          <Group gap="2" justify="end">
+            <Button variant="ghost" size="sm" type="button">
+              {skip}
+            </Button>
+            <Button variant="default" size="sm" type="button">
+              {next}
+            </Button>
+          </Group>
+        </Stack>
+      </Block>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/usage-calculator.tsx b/packages/solid/ui/src/blocks/usage-calculator.tsx
new file mode 100644
index 0000000..d375602
--- /dev/null
+++ b/packages/solid/ui/src/blocks/usage-calculator.tsx
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+/**
+ * A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps
+ * the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the
+ * largest amount under the slider, hide), tone.
+ */
+import { type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Range } from "../primitives/range/range";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { SectionFrame } from "../components/section-frame";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { UsageSlider, UsagePrice } from "./usage-calculator.types";
+
+export type UsageCalculatorProps = {
+  id: string;
+  title: string;
+  text: string;
+  usage: number;
+  slider: UsageSlider;
+  price: UsagePrice;
+  cta: string;
+  href?: string;
+  layout?: "card" | "plain";
+  ends?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+  onUsage?: (value: string) => void;
+};
+
+export function UsageCalculator({
+  id,
+  title,
+  text,
+  usage,
+  slider,
+  price,
+  cta,
+  href,
+  layout = "card",
+  ends = "show",
+  tone = "default",
+  landmarkLabel,
+  onUsage,
+}: UsageCalculatorProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={text} tone={tone} align="center" landmarkLabel={landmarkLabel}>
+      <Stack
+        gap="4"
+        align="stretch"
+        class={cn(
+          "mx-auto w-full max-w-xl",
+          (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+        )}
+        data-testid="usage"
+      >
+        <Group justify="between" align="baseline">
+          <Text size="xl" weight="bold">
+            {tpl(slider.unit, usage)}
+          </Text>
+          <Text size="sm" class="text-muted-foreground">
+            {slider.label}
+          </Text>
+        </Group>
+        <Range
+          min={slider.min}
+          max={slider.max}
+          value={usage}
+          aria-label={slider.label}
+          data-testid="slider"
+          onInput={(event: InputEvent & { currentTarget: HTMLInputElement }) => onUsage?.(event.currentTarget.value)}
+        />
+        {((ends as string) === "show") ? (
+          <Group justify="between" data-testid="ends">
+            <Text size="xs" class="text-muted-foreground">
+              {tpl(slider.unit, slider.min)}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {tpl(slider.unit, slider.max)}
+            </Text>
+          </Group>
+        ) : null}
+        <Group justify="between" align="center" class="flex-wrap">
+          <Stack gap="0">
+            <Text size="xs" class="text-muted-foreground">
+              {price.label}
+            </Text>
+            <Text size="4xl" weight="bold" data-testid="estimate">
+              {fmtMoney((usage * price.rate), price.currency)}
+            </Text>
+          </Stack>
+          <Button variant="default" size="default" href={href} data-testid="submit">
+            {cta}
+          </Button>
+        </Group>
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/usage-calculator.types.ts b/packages/solid/ui/src/blocks/usage-calculator.types.ts
new file mode 100644
index 0000000..6577d8d
--- /dev/null
+++ b/packages/solid/ui/src/blocks/usage-calculator.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type UsageSlider = {
+  min: number;
+  max: number;
+  /** accessible name of the slider */
+  label: string;
+  /** template of an amount, e.g. `{0} credits` */
+  unit: string;
+};
+
+export type UsagePrice = {
+  /** price of one unit in minor units (cents) */
+  rate: number;
+  currency: string;
+  /** name of the estimate */
+  label: string;
+};
diff --git a/packages/solid/ui/src/blocks/usp-strip.tsx b/packages/solid/ui/src/blocks/usp-strip.tsx
new file mode 100644
index 0000000..7643fd9
--- /dev/null
+++ b/packages/solid/ui/src/blocks/usp-strip.tsx
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/storefront.ts
+/**
+ * The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted
+ * panel, cards: a card each, bar: a thin line of icons and titles), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Feature } from "./feature-grid.types";
+
+export type UspStripProps = {
+  id: string;
+  title?: string;
+  perks: Feature[];
+  empty?: string;
+  layout?: "strip" | "cards" | "bar";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function UspStrip({
+  id,
+  title = "",
+  perks,
+  empty = "",
+  layout = "strip",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: UspStripProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((perks?.length ?? 0) === 0) ? (
+        <EmptyState icon="truck" title={empty} />
+      ) : ((layout as string) === "bar") ? (
+        <List tag="ul" class="flex flex-wrap items-center justify-center gap-x-8 gap-y-4" data-testid="items">
+          <For each={perks ?? []}>{(p) => (
+            <ListItem class="flex items-center gap-2 text-sm font-medium" data-testid="item">
+              <LucideIcon name={p.icon} size={16} />
+              <Inline>
+                {p.title}
+              </Inline>
+            </ListItem>
+          )}</For>
+        </List>
+      ) : (
+        <Grid
+          cols="1-4"
+          class={cn("gap-4", (((layout as string) === "strip") ? "rounded bg-muted p-6" : ""))}
+          data-testid="items"
+        >
+          <For each={perks ?? []}>{(p) => (
+            <Stack
+              gap="4"
+              class={(((layout as string) === "cards") ? "rounded bg-card inset-ring inset-ring-border p-6" : "")}
+              data-testid="item"
+            >
+              <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                <LucideIcon name={p.icon} size={20} />
+              </Box>
+              <Stack gap="2">
+                <Text size="sm" weight="semibold">
+                  {p.title}
+                </Text>
+                <Text size="sm" class="text-muted-foreground">
+                  {p.text}
+                </Text>
+              </Stack>
+            </Stack>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/video-grid.tsx b/packages/solid/ui/src/blocks/video-grid.tsx
new file mode 100644
index 0000000..c6aaab3
--- /dev/null
+++ b/packages/solid/ui/src/blocks/video-grid.tsx
@@ -0,0 +1,98 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+/**
+ * Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port
+ * contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone,
+ * density.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { EmptyState } from "../components/empty-state";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { tpl } from "../utils";
+import type { Quote } from "./testimonial-grid.types";
+
+export type VideoGridProps = {
+  id: string;
+  title: string;
+  quotes: Quote[];
+  empty?: string;
+  playLabel: string;
+  byLine: string;
+  cols?: "1-2" | "1-3";
+  caption?: "below" | "overlay";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+  onPlay?: (id: string) => void;
+};
+
+export function VideoGrid({
+  id,
+  title,
+  quotes,
+  empty = "",
+  playLabel,
+  byLine,
+  cols = "1-3",
+  caption = "below",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+  onPlay,
+}: VideoGridProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((quotes?.length ?? 0) === 0) ? (
+        <EmptyState icon="video" title={empty} />
+      ) : (
+        <Grid cols={cols} class="gap-4" data-testid="items">
+          <For each={quotes ?? []}>{(q) => (
+            <FigureBlock class="m-0 flex flex-col gap-4" testid="item">
+              <Box class="relative">
+                <MediaFrame alt={q.author} />
+                <Button
+                  variant="default"
+                  size="default"
+                  type="button"
+                  class="absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0"
+                  aria-label={tpl(playLabel, q.author)}
+                  data-testid="play"
+                  onClick={() => onPlay?.(q.id)}
+                >
+                  <LucideIcon name="play" size={20} />
+                </Button>
+                {((caption as string) === "overlay") ? (
+                  <Box class="absolute inset-x-0 bottom-0 rounded bg-background p-4" data-testid="caption">
+                    <Text size="sm" weight="semibold">
+                      {q.author}
+                    </Text>
+                    <Text size="xs" class="text-muted-foreground">
+                      {tpl(byLine, q.role, q.company)}
+                    </Text>
+                  </Box>
+                ) : null}
+              </Box>
+              {((caption as string) === "below") ? (
+                <Text tag="figcaption" data-testid="caption">
+                  <Text size="sm" weight="semibold">
+                    {q.author}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {tpl(byLine, q.role, q.company)}
+                  </Text>
+                </Text>
+              ) : null}
+            </FigureBlock>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/video-modal.tsx b/packages/solid/ui/src/blocks/video-modal.tsx
new file mode 100644
index 0000000..9fbb709
--- /dev/null
+++ b/packages/solid/ui/src/blocks/video-modal.tsx
@@ -0,0 +1,107 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+/**
+ * A dialog with a walkthrough video: a title and a close button, the player area with a play button and,
+ * optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size
+ * (default, wide), outline (none, chapters: a list under the player), tone.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { SectionFrame } from "../components/section-frame";
+import { cn } from "../utils";
+import type { Chapter } from "./video-modal.types";
+
+export type VideoModalProps = {
+  id: string;
+  title: string;
+  text: string;
+  close: string;
+  play: string;
+  chaptersTitle: string;
+  chapters: Chapter[];
+  size?: "default" | "wide";
+  outline?: "none" | "chapters";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+
+export function VideoModal({
+  id,
+  title,
+  text,
+  close,
+  play,
+  chaptersTitle,
+  chapters,
+  size = "default",
+  outline = "none",
+  tone = "default",
+  landmarkLabel,
+}: VideoModalProps) {
+  return (
+    <SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+      <Stack
+        gap="4"
+        align="stretch"
+        class={cn(
+          "mx-auto w-full",
+          (((size as string) === "wide") ? "max-w-4xl" : "max-w-2xl"),
+          "rounded bg-card inset-ring inset-ring-border p-4 shadow-lg"
+        )}
+        role="dialog"
+        aria-label={title}
+        data-testid="video-modal"
+      >
+        <Group gap="2" align="center" justify="between">
+          <Text size="sm" class="text-muted-foreground">
+            {text}
+          </Text>
+          <Button variant="ghost" size="sm" type="button" class="shrink-0" aria-label={close} data-testid="modal-close">
+            <LucideIcon name="x" size={16} />
+          </Button>
+        </Group>
+        <Box class="relative" data-testid="player">
+          <MediaFrame alt={title} />
+          <Button
+            variant="default"
+            size="default"
+            type="button"
+            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded"
+            aria-label={play}
+            data-testid="play"
+          >
+            <LucideIcon name="play" size={24} />
+          </Button>
+        </Box>
+        {(((outline as string) === "chapters") && ((chapters?.length ?? 0) > 0)) ? (
+          <Stack gap="2" data-testid="chapters">
+            <Title as={3} size="base" weight="bold">
+              {chaptersTitle}
+            </Title>
+            <List class="m-0 flex list-none flex-col gap-2 p-0">
+              <For each={chapters ?? []}>{(c) => (
+                <ListItem class="flex items-baseline gap-4" data-testid="item">
+                  <Text size="sm" weight="semibold">
+                    {c.title}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {c.text}
+                  </Text>
+                </ListItem>
+              )}</For>
+            </List>
+          </Stack>
+        ) : null}
+      </Stack>
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/video-modal.types.ts b/packages/solid/ui/src/blocks/video-modal.types.ts
new file mode 100644
index 0000000..42259ea
--- /dev/null
+++ b/packages/solid/ui/src/blocks/video-modal.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Chapter = {
+  id: string;
+  title: string;
+  text: string;
+};
diff --git a/packages/solid/ui/src/blocks/zone-table.tsx b/packages/solid/ui/src/blocks/zone-table.tsx
new file mode 100644
index 0000000..6291674
--- /dev/null
+++ b/packages/solid/ui/src/blocks/zone-table.tsx
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+/**
+ * Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that
+ * ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Grid } from "../primitives/grid/grid";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { EmptyState } from "../components/empty-state";
+import { SectionFrame } from "../components/section-frame";
+import { ZoneRows } from "../components/zone-rows";
+import { fmtMoney } from "../utils";
+import type { Zone, ZoneLabels } from "./zone-table.types";
+
+export type ZoneTableProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  zones: Zone[];
+  empty?: string;
+  labels: ZoneLabels;
+  layout?: "table" | "cards";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+
+export function ZoneTable({
+  id,
+  title,
+  lead = "",
+  zones,
+  empty = "",
+  labels,
+  layout = "table",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+}: ZoneTableProps) {
+  return (
+    <SectionFrame id={id} title={title} lead={lead} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+      {((zones?.length ?? 0) === 0) ? (
+        <EmptyState icon="map" title={empty} />
+      ) : ((layout as string) === "table") ? (
+        <ZoneRows zones={zones} labels={labels} />
+      ) : (
+        <Grid cols="1-3" class="gap-4" data-testid="items">
+          <For each={zones ?? []}>{(z) => (
+            <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="item">
+              <Stack gap="2">
+                <Title as={3} size="lg" weight="bold">
+                  {z.name}
+                </Title>
+                <Text size="sm" class="text-muted-foreground">
+                  {z.area}
+                </Text>
+              </Stack>
+              <Text size="3xl" weight="bold">
+                {fmtMoney(z.price, z.currency)}
+              </Text>
+              <List tag="ul" class="flex flex-col gap-2 border-t border-border pt-4">
+                <ListItem class="flex items-center justify-between gap-4 text-sm">
+                  <Inline class="text-muted-foreground">
+                    {labels.freeFrom}
+                  </Inline>
+                  <Inline class="font-medium">
+                    {fmtMoney(z.freeFrom, z.currency)}
+                  </Inline>
+                </ListItem>
+                <ListItem class="flex items-center justify-between gap-4 text-sm">
+                  <Inline class="text-muted-foreground">
+                    {labels.minOrder}
+                  </Inline>
+                  <Inline class="font-medium">
+                    {fmtMoney(z.minOrder, z.currency)}
+                  </Inline>
+                </ListItem>
+                <ListItem class="flex items-center justify-between gap-4 text-sm">
+                  <Inline class="text-muted-foreground">
+                    {labels.time}
+                  </Inline>
+                  <Inline class="font-medium">
+                    {z.time}
+                  </Inline>
+                </ListItem>
+              </List>
+              {z.express ? (
+                <Badge variant="secondary" size="default" class="w-fit">
+                  {z.express}
+                </Badge>
+              ) : null}
+            </Stack>
+          )}</For>
+        </Grid>
+      )}
+    </SectionFrame>
+  );
+}
diff --git a/packages/solid/ui/src/blocks/zone-table.types.ts b/packages/solid/ui/src/blocks/zone-table.types.ts
new file mode 100644
index 0000000..6b8a1b2
--- /dev/null
+++ b/packages/solid/ui/src/blocks/zone-table.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type Zone = {
+  id: string;
+  name: string;
+  area: string;
+  price: number;
+  freeFrom: number;
+  minOrder: number;
+  time: string;
+  express: string;
+  currency: string;
+};
+
+export type ZoneLabels = {
+  caption: string;
+  zone: string;
+  price: string;
+  freeFrom: string;
+  minOrder: string;
+  time: string;
+  express: string;
+};
diff --git a/packages/solid/ui/src/components/action-group.tsx b/packages/solid/ui/src/components/action-group.tsx
new file mode 100644
index 0000000..ffb7428
--- /dev/null
+++ b/packages/solid/ui/src/components/action-group.tsx
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not
+ * handlers: the page decides what they open.
+ */
+import { type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+
+export type ActionGroupProps = {
+  primary: string;
+  primaryHref?: string;
+  secondary?: string;
+  secondaryHref?: string;
+  align?: "start" | "center";
+};
+
+export function ActionGroup({
+  primary,
+  primaryHref,
+  secondary,
+  secondaryHref,
+  align = "start",
+}: ActionGroupProps) {
+  return (
+    <Group
+      gap="4"
+      align="center"
+      justify={(((align as string) === "center") ? "center" : "start")}
+      class="flex-wrap"
+      data-slot="action-group"
+    >
+      <Button variant="default" size="default" href={primaryHref} data-testid="action-primary">
+        {primary}
+      </Button>
+      {secondary ? (
+        <Button variant="outline" size="default" href={secondaryHref} data-testid="action-secondary">
+          {secondary}
+        </Button>
+      ) : null}
+    </Group>
+  );
+}
diff --git a/packages/solid/ui/src/components/app-main.tsx b/packages/solid/ui/src/components/app-main.tsx
new file mode 100644
index 0000000..8b1b90b
--- /dev/null
+++ b/packages/solid/ui/src/components/app-main.tsx
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/app-main.ts
+/**
+ * The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel
+ * when `activity` is given).
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { Title } from "../primitives/title/title";
+import { BarChart } from "../components/bar-chart";
+import { Panel } from "../components/panel";
+import { StatTile } from "../components/stat-tile";
+import { Timeline } from "../components/timeline";
+import { tpl } from "../utils";
+import type { Metric } from "../blocks/metric-row.types";
+import type { Point } from "../blocks/chart-panel.types";
+import type { Event } from "../blocks/activity-feed.types";
+import type { OverviewChart, OverviewActivity } from "../blocks/dashboard-overview.types";
+
+export type AppMainProps = {
+  id: string;
+  title: string;
+  metrics: Metric[];
+  chart: OverviewChart;
+  activity?: OverviewActivity;
+  cols?: "1-2" | "1-4";
+  density?: "default" | "compact";
+};
+
+export function AppMain({
+  id,
+  title,
+  metrics,
+  chart,
+  activity,
+  cols = "1-2",
+  density = "default",
+}: AppMainProps) {
+  return (
+    <Stack
+      gap={(((density as string) === "compact") ? "4" : "6")}
+      align="stretch"
+      class="min-w-0"
+      data-testid="app-main"
+    >
+      <Title as={2} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+        {title}
+      </Title>
+      {((metrics?.length ?? 0) > 0) ? (
+        <Grid cols={cols} class="gap-4" data-testid="items">
+          <For each={metrics ?? []}>{(m) => (
+            <Box data-testid="item">
+              <StatTile label={m.label} value={m.value} icon={m.icon} hint={m.hint} />
+            </Box>
+          )}</For>
+        </Grid>
+      ) : null}
+      {activity ? (
+        <Grid cols="1-2" class="items-stretch gap-4">
+          {((chart.series?.length ?? 0) > 0) ? (
+            <Panel title={chart.title} description={chart.text} id={tpl("{0}-chart", id)} class="h-full">
+              <BarChart bars={chart.series} label={chart.summary} height={144} />
+            </Panel>
+          ) : null}
+          {((activity?.events?.length ?? 0) > 0) ? (
+            <Panel title={activity?.title} description={activity?.text} id={tpl("{0}-feed", id)} class="h-full">
+              <Timeline items={activity?.events} />
+            </Panel>
+          ) : null}
+        </Grid>
+      ) : ((chart.series?.length ?? 0) > 0) ? (
+        <Panel title={chart.title} description={chart.text} id={tpl("{0}-chart", id)} class="h-full">
+          <BarChart bars={chart.series} label={chart.summary} height={144} />
+        </Panel>
+      ) : null}
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/article-block.tsx b/packages/solid/ui/src/components/article-block.tsx
new file mode 100644
index 0000000..c668e8e
--- /dev/null
+++ b/packages/solid/ui/src/components/article-block.tsx
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/landmarks.ts
+/** A self-contained item (a review, a card, a project) in its own file: Block tag article. */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { cn } from "../utils";
+
+export type ArticleBlockProps = {
+  testid?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function ArticleBlock({ testid, class: className, children }: ArticleBlockProps) {
+  return (
+    <Block tag="article" class={cn(className)} data-testid={testid}>
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/auth-form.tsx b/packages/solid/ui/src/components/auth-form.tsx
new file mode 100644
index 0000000..9950b43
--- /dev/null
+++ b/packages/solid/ui/src/components/auth-form.tsx
@@ -0,0 +1,73 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/auth.ts
+/**
+ * The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot
+ * link, the terms, the submit button.
+ */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Checkbox } from "../primitives/checkbox/checkbox";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { Field } from "../components/field";
+import { cn, tpl } from "../utils";
+import type { AuthLabels } from "../blocks/auth-card.types";
+
+export type AuthFormProps = {
+  id: string;
+  mode?: "signin" | "signup" | "reset" | "magic";
+  labels: AuthLabels;
+  submit: string;
+};
+
+export function AuthForm({ id, mode = "signin", labels, submit }: AuthFormProps) {
+  return (
+    <Form method="dialog" class="gap-4" data-testid="auth-form">
+      {((mode as string) === "signup") ? (
+        <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+          <Input type="text" name="name" autocomplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+        </Field>
+      ) : null}
+      <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+        <Input type="email" name="email" autocomplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+      </Field>
+      {(((mode as string) !== "reset") && ((mode as string) !== "magic")) ? (
+        <Field label={labels.password} htmlFor={tpl("{0}-password", id)}>
+          <Input
+            type="password"
+            name="password"
+            autocomplete={(((mode as string) === "signup") ? "new-password" : "current-password")}
+            id={tpl("{0}-password", id)}
+            data-testid="field"
+          />
+        </Field>
+      ) : null}
+      {((mode as string) === "signin") ? (
+        <Group justify="between" align="center" class="flex-wrap gap-2">
+          <Group gap="2" align="center" class={cn("w-fit", "")}>
+            <Checkbox name="remember" id={tpl("{0}-remember", id)} />
+            <Label for={tpl("{0}-remember", id)} class="text-sm">
+              {labels.remember}
+            </Label>
+          </Group>
+          <Button variant="link" size="sm" class="px-0">
+            {labels.forgot}
+          </Button>
+        </Group>
+      ) : null}
+      {((mode as string) === "signup") ? (
+        <Group gap="2" align="center" class={cn("w-fit", "")}>
+          <Checkbox name="terms" id={tpl("{0}-terms", id)} />
+          <Label for={tpl("{0}-terms", id)} class="text-sm">
+            {labels.terms}
+          </Label>
+        </Group>
+      ) : null}
+      <Button variant="default" size="default" type="submit" class="w-full" data-testid="submit">
+        {submit}
+      </Button>
+    </Form>
+  );
+}
diff --git a/packages/solid/ui/src/components/avatar.tsx b/packages/solid/ui/src/components/avatar.tsx
new file mode 100644
index 0000000..2cc3477
--- /dev/null
+++ b/packages/solid/ui/src/components/avatar.tsx
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round. */
+import { type JSX } from "solid-js";
+import { Image } from "../primitives/image/image";
+import { Inline } from "../primitives/inline/inline";
+import { cn, variants } from "../utils";
+
+/** Avatar: the classes of each value (shadcn/cva style). */
+export const avatarVariants = variants({
+  base: "relative inline-flex shrink-0 overflow-hidden bg-muted rounded-full",
+  variants: {
+    size: {
+      xs: "size-6",
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12",
+      xl: "size-16",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type AvatarProps = {
+  src: string;
+  alt?: string;
+  size?: "xs" | "sm" | "default" | "lg" | "xl";
+  class?: string;
+};
+
+export function Avatar({ src, alt = "", size = "default", class: className }: AvatarProps) {
+  return (
+    <Inline class={cn(avatarVariants({ size: size }), className)} data-slot="avatar">
+      <Image
+        src={src}
+        alt={alt}
+        class="size-full object-cover"
+        fit="cover"
+        size="auto"
+        loading="eager"
+        decoding="auto"
+        draggable="false"
+      />
+    </Inline>
+  );
+}
diff --git a/packages/solid/ui/src/components/backdrop.tsx b/packages/solid/ui/src/components/backdrop.tsx
new file mode 100644
index 0000000..e08112b
--- /dev/null
+++ b/packages/solid/ui/src/components/backdrop.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the
+ * Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of
+ * the block (rule 01).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { MediaFrame } from "../components/media-frame";
+
+export type BackdropProps = {
+  kind?: "none" | "image";
+  alt?: string;
+};
+
+export function Backdrop({ kind = "none", alt = "" }: BackdropProps) {
+  return (
+    <>
+      {((kind as string) === "image") ? (
+        <Box class="pointer-events-none absolute inset-0 -z-10" data-testid="backdrop">
+          <MediaFrame alt={alt} ratio="21/9" class="size-full rounded-none opacity-30" />
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/badge-square.tsx b/packages/solid/ui/src/components/badge-square.tsx
new file mode 100644
index 0000000..ffe14e9
--- /dev/null
+++ b/packages/solid/ui/src/components/badge-square.tsx
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd). */
+import { type JSX } from "solid-js";
+import { Inline } from "../primitives/inline/inline";
+import { cn, variants } from "../utils";
+
+/** BadgeSquare: the classes of each value (shadcn/cva style). */
+export const badgeSquareVariants = variants({
+  base:
+    "inline-flex shrink-0 items-center justify-center bg-card text-xs font-medium whitespace-nowrap text-foreground " +
+    "inset-ring inset-ring-border rounded",
+  variants: {
+    size: {
+      sm: "h-4 min-w-4 px-1",
+      default: "h-5 px-2",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type BadgeSquareProps = {
+  size?: "sm" | "default";
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function BadgeSquare({ size = "default", class: className, children }: BadgeSquareProps) {
+  return (
+    <Inline class={cn(badgeSquareVariants({ size: size }), className)} data-slot="badge-square">
+      {children}
+    </Inline>
+  );
+}
diff --git a/packages/solid/ui/src/components/bar-chart.tsx b/packages/solid/ui/src/components/bar-chart.tsx
new file mode 100644
index 0000000..7c0b073
--- /dev/null
+++ b/packages/solid/ui/src/components/bar-chart.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image
+ * for assistive technology: `label` carries the summary, the bar values are in the captions and titles.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+import type { Bar } from "./bar-chart.types";
+
+export type BarChartProps = {
+  bars: Bar[];
+  label: string;
+  max?: number;
+  height?: number;
+  class?: string;
+};
+
+export function BarChart({ bars, label, max, height = 160, class: className }: BarChartProps) {
+  const top = Math.max(1, (max ?? bars.reduce((m, i) => Math.max(m, i.value), 0)));
+  return (
+    <Box class={cn("min-w-0", className)} data-slot="bar-chart">
+      <Box class="flex min-w-0 items-end gap-2" role="img" aria-label={label} style={`height:${height}px`}>
+        <For each={bars ?? []}>{(b) => (
+          <Box class="flex h-full min-w-0 flex-1 items-end" title={(b.title ?? b.label)}>
+            <Box
+              class={cn("w-full rounded", (b.muted ? "bg-muted-foreground" : "bg-primary"))}
+              style={`height:${Math.max(2, Math.round(((b.value / top) * 100)))}%`}
+              data-bar={b.id}
+            />
+          </Box>
+        )}</For>
+      </Box>
+      <Box class="mt-2 flex min-w-0 gap-2" aria-hidden="true">
+        <For each={bars ?? []}>{(b) => (
+          <Box class="relative h-4 min-w-0 flex-1">
+            <Text class={"absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground"}>
+              {b.label}
+            </Text>
+          </Box>
+        )}</For>
+      </Box>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/bar-chart.types.ts b/packages/solid/ui/src/components/bar-chart.types.ts
new file mode 100644
index 0000000..7125a60
--- /dev/null
+++ b/packages/solid/ui/src/components/bar-chart.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+
+export type Bar = {
+  id: string;
+  label: string;
+  value: number;
+  title?: string;
+  muted?: boolean;
+};
diff --git a/packages/solid/ui/src/components/bulk-bar.tsx b/packages/solid/ui/src/components/bulk-bar.tsx
new file mode 100644
index 0000000..804bf74
--- /dev/null
+++ b/packages/solid/ui/src/components/bulk-bar.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * The "N selected" bar of a list: a count, a clear button and the bulk actions (children). All text comes in
+ * through props.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn } from "../utils";
+
+export type BulkBarProps = {
+  label: string;
+  clearLabel: string;
+  class?: string;
+  children?: JSX.Element;
+  onClear?: () => void;
+};
+
+export function BulkBar({ label, clearLabel, class: className, children, onClear }: BulkBarProps) {
+  return (
+    <Box
+      class={cn(
+        "flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background",
+        className
+      )}
+      role="region"
+      aria-label={label}
+      aria-live="polite"
+      data-slot="bulk-bar"
+      data-testid="bulk-bar"
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        layout="icon"
+        type="button"
+        aria-label={clearLabel}
+        class="text-background hover:bg-background/15 hover:text-background"
+        onClick={() => onClear?.()}
+      >
+        <LucideIcon name="x" size={16} />
+      </Button>
+      <Inline data-testid="bulk-count">
+        {label}
+      </Inline>
+      <Inline class="ml-auto flex flex-wrap items-center gap-2">
+        {children}
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/cart-summary-card.tsx b/packages/solid/ui/src/components/cart-summary-card.tsx
new file mode 100644
index 0000000..a391900
--- /dev/null
+++ b/packages/solid/ui/src/components/cart-summary-card.tsx
@@ -0,0 +1,139 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/**
+ * The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field
+ * with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Button } from "../primitives/button/button";
+import { Progress } from "../primitives/form/progress";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Input } from "../primitives/input/input";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { Promo, CartSummaryLabels } from "./cart-summary-card.types";
+import type { CartLine } from "../blocks/cart-list.types";
+import type { SummaryRow } from "../blocks/order-summary.types";
+
+export type CartSummaryCardProps = {
+  lines: CartLine[];
+  rows: SummaryRow[];
+  promos: Promo[];
+  labels: CartSummaryLabels;
+  items?: "show" | "hide";
+  promo?: "show" | "hide";
+  field?: string;
+  progress?: "show" | "hide";
+  value?: number;
+};
+
+export function CartSummaryCard({
+  lines,
+  rows,
+  promos,
+  labels,
+  items = "hide",
+  promo = "show",
+  field = "promo",
+  progress = "show",
+  value = 70,
+}: CartSummaryCardProps) {
+  return (
+    <Stack gap="6" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="summary">
+      <Group gap="4" align="baseline" justify="between">
+        <Title as={2} size="lg" weight="semibold">
+          {labels.title}
+        </Title>
+        <Text size="xs" class="text-muted-foreground">
+          {tpl(labels.items, ((lines?.length ?? 0) == null ? undefined : String((lines?.length ?? 0))))}
+        </Text>
+      </Group>
+      {(((items as string) === "show") && ((lines?.length ?? 0) > 0)) ? (
+        <List tag="ul" class="flex flex-col gap-4" data-testid="summary-lines">
+          <For each={lines ?? []}>{(line) => (
+            <ListItem class="flex items-center gap-4 text-sm">
+              <MediaFrame alt={line.name} ratio="1/1" class="size-12 shrink-0" />
+              <Stack gap="0" class="flex-1">
+                <Text size="sm" weight="semibold">
+                  {line.name}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {tpl("{0} x {1}", line.qty, fmtMoney(line.price, line.currency))}
+                </Text>
+              </Stack>
+              <Inline class="font-medium">
+                {fmtMoney((line.price * line.qty), line.currency)}
+              </Inline>
+            </ListItem>
+          )}</For>
+        </List>
+      ) : null}
+      {((promo as string) === "show") ? (
+        <Stack gap="2" align="stretch" data-testid="promo">
+          <Group gap="2" align="center">
+            <Input type="text" name={field} aria-label={labels.promo} placeholder={labels.promo} class="min-w-0 flex-1" />
+            <Button variant="outline" size="default" type="button">
+              {labels.apply}
+            </Button>
+          </Group>
+          {((promos?.length ?? 0) > 0) ? (
+            <Group gap="2" align="center" class="flex-wrap">
+              <Text size="xs" class="text-muted-foreground">
+                {labels.codes}
+              </Text>
+              <For each={promos ?? []}>{(c) => (
+                <Badge variant="outline" size="sm" data-testid="code">
+                  {c.code}
+                </Badge>
+              )}</For>
+            </Group>
+          ) : null}
+        </Stack>
+      ) : null}
+      {((progress as string) === "show") ? (
+        <Stack gap="2" align="stretch" class="rounded bg-muted p-4" data-testid="progress">
+          <Text size="sm">
+            {labels.progress}
+          </Text>
+          <Progress value={(value == null ? undefined : String(value))} max="100" aria-label={labels.progress} />
+        </Stack>
+      ) : null}
+      {((rows?.length ?? 0) > 0) ? (
+        <List tag="ul" class="flex flex-col gap-2">
+          <For each={rows ?? []}>{(row) => (
+            <ListItem
+              class={cn(
+                "flex items-center justify-between gap-4",
+                (
+                  row.strong ? "border-t border-border pt-4 text-base font-bold"
+                  : "text-sm text-muted-foreground"
+                )
+              )}
+              data-testid="row"
+            >
+              <Inline>
+                {row.label}
+              </Inline>
+              <Inline>
+                {fmtMoney(row.amount, row.currency)}
+              </Inline>
+            </ListItem>
+          )}</For>
+        </List>
+      ) : null}
+      <Button variant="default" size="lg" class="w-full" data-testid="checkout">
+        {labels.checkout}
+      </Button>
+      <Text size="xs" class="text-muted-foreground">
+        {labels.note}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/cart-summary-card.types.ts b/packages/solid/ui/src/components/cart-summary-card.types.ts
new file mode 100644
index 0000000..9e5a5f5
--- /dev/null
+++ b/packages/solid/ui/src/components/cart-summary-card.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Promo = {
+  id: string;
+  code: string;
+};
+
+export type CartSummaryLabels = {
+  title: string;
+  items: string;
+  promo: string;
+  apply: string;
+  codes: string;
+  progress: string;
+  checkout: string;
+  note: string;
+};
diff --git a/packages/solid/ui/src/components/cart-table.tsx b/packages/solid/ui/src/components/cart-table.tsx
new file mode 100644
index 0000000..d7c7d09
--- /dev/null
+++ b/packages/solid/ui/src/components/cart-table.tsx
@@ -0,0 +1,143 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cart-table.ts
+/**
+ * The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a
+ * remove button.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { NumberField } from "../components/number-field";
+import { cn, fmtMoney, tpl } from "../utils";
+import type { CartLine, CartLabels } from "../blocks/cart-list.types";
+
+export type CartTableProps = {
+  lines: CartLine[];
+  labels: CartLabels;
+  media?: "image" | "none";
+  density?: "default" | "compact";
+  field?: string;
+  onRemove?: (id: string) => void;
+};
+
+export function CartTable({
+  lines,
+  labels,
+  media = "image",
+  density = "default",
+  field = "qty",
+  onRemove,
+}: CartTableProps) {
+  return (
+    <>
+      <Box class="w-full overflow-x-auto">
+        <Table class="w-full text-left text-sm" data-testid="cart-table">
+          <TableCaption class="sr-only">
+            {labels.caption}
+          </TableCaption>
+          <TableHead>
+            <TableRow>
+              <TableHeadCell scope="col" class="py-2">
+                {labels.product}
+              </TableHeadCell>
+              <TableHeadCell scope="col" class="hidden py-2 sm:table-cell">
+                {labels.price}
+              </TableHeadCell>
+              <TableHeadCell scope="col" class="py-2">
+                {labels.qty}
+              </TableHeadCell>
+              <TableHeadCell scope="col" class="py-2">
+                {labels.total}
+              </TableHeadCell>
+              <TableHeadCell scope="col" class="py-2">
+                <Inline class="sr-only">
+                  {labels.remove}
+                </Inline>
+              </TableHeadCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <For each={lines ?? []}>{(line) => (
+              <TableRow class="border-t border-border" data-testid="item">
+                <TableCell class={cn((((density as string) === "compact") ? "py-2" : "py-4"))}>
+                  <Group gap="4" align="center">
+                    {((media as string) === "image") ? (
+                      <MediaFrame alt={line.name} ratio="1/1" class="hidden size-14 shrink-0 sm:block" />
+                    ) : null}
+                    <Stack gap="0">
+                      <Text size="sm" weight="semibold">
+                        {line.name}
+                      </Text>
+                      <Text size="xs" class="text-muted-foreground">
+                        {line.variant}
+                      </Text>
+                    </Stack>
+                  </Group>
+                </TableCell>
+                <TableCell class="hidden sm:table-cell">
+                  {fmtMoney(line.price, line.currency)}
+                </TableCell>
+                <TableCell>
+                  <NumberField
+                    value={(line.qty == null ? undefined : String(line.qty))}
+                    name={tpl("{0}-{1}", field, line.id)}
+                    min="1"
+                    label={labels.qty}
+                    decrease={labels.decrease}
+                    increase={labels.increase}
+                  />
+                </TableCell>
+                <TableCell class="font-semibold">
+                  {fmtMoney((line.price * line.qty), line.currency)}
+                </TableCell>
+                <TableCell class="text-right">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    layout="icon"
+                    aria-label={labels.remove}
+                    data-testid="remove"
+                    onClick={() => onRemove?.(line.id)}
+                  >
+                    <LucideIcon name="x" size={16} />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            )}</For>
+          </TableBody>
+        </Table>
+      </Box>
+      {((lines?.length ?? 0) > 0) ? (
+        <Group
+          gap="4"
+          align="center"
+          justify="between"
+          class="mt-4 flex-wrap border-t border-border pt-4"
+          data-testid="cart-footer"
+        >
+          <Text size="base" weight="bold" data-testid="subtotal">
+            {labels.subtotal}
+            {" "}
+            {fmtMoney(lines.reduce((s, i) => s + i.price * i.qty, 0), lines[0]?.currency ?? "")}
+          </Text>
+          <Button variant="default" size="default" data-testid="checkout">
+            {labels.checkout}
+          </Button>
+        </Group>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/checkout-step.tsx b/packages/solid/ui/src/components/checkout-step.tsx
new file mode 100644
index 0000000..94248bb
--- /dev/null
+++ b/packages/solid/ui/src/components/checkout-step.tsx
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/**
+ * One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`).
+ * Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+
+export type CheckoutStepProps = {
+  number: string;
+  title: string;
+  text?: string;
+  layout?: "cards" | "numbered";
+  children?: JSX.Element;
+};
+
+export function CheckoutStep({ number, title, text = "", layout = "cards", children }: CheckoutStepProps) {
+  return (
+    <Stack
+      gap="6"
+      align="stretch"
+      class={
+        (layout as string) === "cards" ? "rounded bg-card inset-ring inset-ring-border p-6"
+        : "border-t border-border pt-6"
+      }
+      data-testid="step"
+    >
+      <Group gap="4" align="start">
+        {((layout as string) === "numbered") ? (
+          <Box class={"flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground"}>
+            {number}
+          </Box>
+        ) : null}
+        <Stack gap="0">
+          <Title as={2} size="lg" weight="semibold">
+            {title}
+          </Title>
+          {text ? (
+            <Text size="sm" class="text-muted-foreground">
+              {text}
+            </Text>
+          ) : null}
+        </Stack>
+      </Group>
+      {children}
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/checkout-submit.tsx b/packages/solid/ui/src/components/checkout-submit.tsx
new file mode 100644
index 0000000..a346d2a
--- /dev/null
+++ b/packages/solid/ui/src/components/checkout-submit.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/** The end of the checkout form: the consent checkbox, the submit button and the legal line. */
+import { type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Checkbox } from "../primitives/checkbox/checkbox";
+import { Group } from "../primitives/group/group";
+import { Label } from "../primitives/label/label";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { cn, tpl } from "../utils";
+
+export type CheckoutSubmitProps = {
+  id: string;
+  consent: string;
+  submit: string;
+  legal: string;
+};
+
+export function CheckoutSubmit({ id, consent, submit, legal }: CheckoutSubmitProps) {
+  return (
+    <Stack gap="4" align="start">
+      <Group gap="2" align="center" class={cn("w-fit", "")}>
+        <Checkbox name="consent" id={tpl("{0}-consent", id)} />
+        <Label for={tpl("{0}-consent", id)} class="text-sm">
+          {consent}
+        </Label>
+      </Group>
+      <Button variant="default" size="lg" type="submit" data-testid="submit">
+        {submit}
+      </Button>
+      <Text size="xs" class="text-muted-foreground">
+        {legal}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/code-window.tsx b/packages/solid/ui/src/components/code-window.tsx
new file mode 100644
index 0000000..c0f4742
--- /dev/null
+++ b/packages/solid/ui/src/components/code-window.tsx
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/visuals.ts
+/**
+ * A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with
+ * the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+import type { CodeLine } from "./code-window.types";
+
+export type CodeWindowProps = {
+  title: string;
+  prompt: string;
+  lines: CodeLine[];
+  class?: string;
+};
+
+export function CodeWindow({ title, prompt, lines, class: className }: CodeWindowProps) {
+  return (
+    <Box
+      class={cn(
+        "w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border",
+        className
+      )}
+      role="group"
+      aria-label={title}
+      data-slot="code-window"
+    >
+      <Box class="flex items-center border-b border-border px-4 py-2">
+        <Text size="xs" class="text-muted-foreground">
+          {title}
+        </Text>
+      </Box>
+      <List class="m-0 flex list-none flex-col gap-2 p-4 font-mono text-sm">
+        <For each={lines ?? []}>{(line) => (
+          <ListItem
+            class={cn("flex gap-2", ((line.kind === "command") ? "text-foreground" : "text-muted-foreground"))}
+            data-kind={line.kind}
+          >
+            {(line.kind === "command") ? (
+              <Inline class="select-none text-muted-foreground">
+                {prompt}
+              </Inline>
+            ) : null}
+            <Inline>
+              {line.text}
+            </Inline>
+          </ListItem>
+        )}</For>
+      </List>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/code-window.types.ts b/packages/solid/ui/src/components/code-window.types.ts
new file mode 100644
index 0000000..351eaab
--- /dev/null
+++ b/packages/solid/ui/src/components/code-window.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/visuals.ts
+
+export type CodeLine = {
+  id: string;
+  text: string;
+  kind: string;
+};
diff --git a/packages/solid/ui/src/components/compare-mark.tsx b/packages/solid/ui/src/components/compare-mark.tsx
new file mode 100644
index 0000000..012cd27
--- /dev/null
+++ b/packages/solid/ui/src/components/compare-mark.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/compare.ts
+/**
+ * One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen
+ * readers), any other value is shown as text.
+ */
+import { type JSX } from "solid-js";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+
+export type CompareMarkProps = {
+  value: string;
+  yes: string;
+  no: string;
+};
+
+export function CompareMark({ value, yes, no }: CompareMarkProps) {
+  return (
+    <>
+      {((value as string) === "yes") ? (
+        <Inline class="inline-flex items-center gap-2" data-mark="yes">
+          <LucideIcon name="check" size={16} class="text-foreground" />
+          <Inline class="sr-only">
+            {yes}
+          </Inline>
+        </Inline>
+      ) : null}
+      {((value as string) === "no") ? (
+        <Inline class="inline-flex items-center gap-2 text-muted-foreground" data-mark="no">
+          <LucideIcon name="minus" size={16} />
+          <Inline class="sr-only">
+            {no}
+          </Inline>
+        </Inline>
+      ) : null}
+      {(((value as string) !== "yes") && ((value as string) !== "no")) ? (
+        <Inline>
+          {value}
+        </Inline>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/cta-actions.tsx b/packages/solid/ui/src/components/cta-actions.tsx
new file mode 100644
index 0000000..5d50871
--- /dev/null
+++ b/packages/solid/ui/src/components/cta-actions.tsx
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta.ts
+/**
+ * The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions
+ * form).
+ */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { ActionGroup } from "../components/action-group";
+import { cn, tpl } from "../utils";
+import type { ActionSet } from "./cta-actions.types";
+
+export type CtaActionsProps = {
+  id: string;
+  actions: ActionSet;
+  center?: boolean;
+};
+
+export function CtaActions({ id, actions, center = false }: CtaActionsProps) {
+  return (
+    <>
+      {(actions.mode === "form") ? (
+        <Form method="dialog" class={cn("w-full max-w-md", (center ? "mx-auto" : ""))} data-testid="email-form">
+          <Label for={tpl("{0}-email", id)} class="sr-only">
+            {actions.emailLabel}
+          </Label>
+          <Group gap="2" align="start" class="w-full flex-wrap">
+            <Input type="email" name="email" class="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+            <Button variant="default" size="default" type="submit" data-testid="submit">
+              {actions.cta}
+            </Button>
+          </Group>
+        </Form>
+      ) : (
+        <ActionGroup
+          primary={actions.cta}
+          primaryHref={actions.href}
+          secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+          secondaryHref={actions.secondaryHref}
+          align={(center ? "center" : "start")}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/cta-actions.types.ts b/packages/solid/ui/src/components/cta-actions.types.ts
new file mode 100644
index 0000000..a82d453
--- /dev/null
+++ b/packages/solid/ui/src/components/cta-actions.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta.ts
+
+export type ActionSet = {
+  /** one or two links, or a form */
+  mode?: "one" | "two" | "form";
+  /** primary action label */
+  cta: string;
+  /** the address of the primary action; none: a button, not a link */
+  href?: string;
+  secondary?: string;
+  secondaryHref?: string;
+  /** label of the form field (the email field, or the prompt line of HeroPrompt) */
+  emailLabel?: string;
+};
diff --git a/packages/solid/ui/src/components/cta-proof-items.tsx b/packages/solid/ui/src/components/cta-proof-items.tsx
new file mode 100644
index 0000000..52074cd
--- /dev/null
+++ b/packages/solid/ui/src/components/cta-proof-items.tsx
@@ -0,0 +1,121 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta-proof-parts.ts
+/**
+ * The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats
+ * (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { fmtMoney } from "../utils";
+import type { CtaContent } from "../blocks/cta-proof.types";
+
+export type CtaProofItemsProps = {
+  content: CtaContent;
+  proof?: "logos" | "features" | "stats" | "rows" | "zones";
+  center?: boolean;
+};
+
+export function CtaProofItems({ content, proof = "stats", center = false }: CtaProofItemsProps) {
+  return (
+    <>
+      {(((proof as string) === "logos") && ((content.logos?.length ?? 0) > 0)) ? (
+        <Box class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6" data-testid="cta-proof">
+          <For each={content.logos ?? []}>{(l) => (
+            <Group gap="2" align="center" justify="center" class="text-muted-foreground" data-testid="cta-item">
+              <LucideIcon name={l.icon} size={20} />
+              <Text size="sm" weight="semibold">
+                {l.name}
+              </Text>
+            </Group>
+          )}</For>
+        </Box>
+      ) : null}
+      {(((proof as string) === "features") && ((content.features?.length ?? 0) > 0)) ? (
+        <Box class="grid grid-cols-1 gap-4 text-left sm:grid-cols-2" data-testid="cta-proof">
+          <For each={content.features ?? []}>{(f) => (
+            <Group gap="4" align="start" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="cta-item">
+              <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                <LucideIcon name={f.icon} size={20} />
+              </Box>
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {f.title}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {f.text}
+                </Text>
+              </Stack>
+            </Group>
+          )}</For>
+        </Box>
+      ) : null}
+      {(((proof as string) === "stats") && ((content.stats?.length ?? 0) > 0)) ? (
+        <Box class="grid grid-cols-3 gap-4" data-testid="cta-proof">
+          <For each={content.stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 3) ? (
+                <Stack gap="0" class={(center ? "items-center text-center" : "")} data-testid="cta-item">
+                  <Text size="3xl" weight="bold">
+                    {s.value}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {s.label}
+                  </Text>
+                </Stack>
+              ) : null}
+            </>
+          ); }}</For>
+        </Box>
+      ) : null}
+      {(((proof as string) === "rows") && ((content.features?.length ?? 0) > 0)) ? (
+        <List class="m-0 flex list-none flex-col gap-4 p-0" data-testid="cta-proof">
+          <For each={content.features ?? []}>{(f) => (
+            <ListItem class="flex items-start gap-4" data-testid="cta-item">
+              <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                <LucideIcon name={f.icon} size={20} />
+              </Box>
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {f.title}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {f.text}
+                </Text>
+              </Stack>
+            </ListItem>
+          )}</For>
+        </List>
+      ) : null}
+      {(((proof as string) === "zones") && ((content.zones?.length ?? 0) > 0)) ? (
+        <List class="m-0 flex list-none flex-col p-0" data-testid="cta-proof">
+          <For each={content.zones ?? []}>{(z) => (
+            <ListItem class="flex items-start justify-between gap-4 border-b border-border py-4" data-testid="cta-item">
+              <Stack gap="0" class="min-w-0">
+                <Text size="sm" weight="semibold">
+                  {z.name}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {z.area}
+                </Text>
+              </Stack>
+              <Stack gap="0" class="shrink-0 text-right">
+                <Text size="sm" weight="semibold">
+                  {fmtMoney(z.price, z.currency)}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {z.time}
+                </Text>
+              </Stack>
+            </ListItem>
+          )}</For>
+        </List>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/drawer-lines.tsx b/packages/solid/ui/src/components/drawer-lines.tsx
new file mode 100644
index 0000000..6c9ad5b
--- /dev/null
+++ b/packages/solid/ui/src/components/drawer-lines.tsx
@@ -0,0 +1,106 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shop-parts.ts
+/**
+ * The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal
+ * and total and the button.
+ */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Progress } from "../primitives/form/progress";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { NumberField } from "../components/number-field";
+import { fmtMoney, tpl } from "../utils";
+import type { CartLine, CartLabels } from "../blocks/cart-list.types";
+import type { SummaryRow } from "../blocks/order-summary.types";
+import type { DrawerLabels } from "../blocks/cart-drawer.types";
+
+export type DrawerLinesProps = {
+  lines: CartLine[];
+  rows: SummaryRow[];
+  labels: CartLabels;
+  drawer: DrawerLabels;
+  media?: "image" | "none";
+  field?: string;
+};
+
+export function DrawerLines({
+  lines,
+  rows,
+  labels,
+  drawer,
+  media = "image",
+  field = "qty",
+}: DrawerLinesProps) {
+  return (
+    <>
+      <Stack gap="4" align="stretch" class="flex-1 p-4" data-testid="lines">
+        <For each={lines ?? []}>{(line) => (
+          <Group gap="4" align="start" data-testid="item">
+            {((media as string) === "image") ? (
+              <MediaFrame alt={line.name} ratio="1/1" class="size-16 shrink-0" />
+            ) : null}
+            <Stack gap="2" align="stretch" class="flex-1">
+              <Group gap="2" justify="between" align="start">
+                <Text size="sm" weight="semibold">
+                  {line.name}
+                </Text>
+                <Inline class="text-sm font-medium">
+                  {fmtMoney((line.price * line.qty), line.currency)}
+                </Inline>
+              </Group>
+              <Text size="xs" class="text-muted-foreground">
+                {line.variant}
+              </Text>
+              <NumberField
+                value={(line.qty == null ? undefined : String(line.qty))}
+                name={tpl("{0}-{1}", field, line.id)}
+                min="1"
+                label={labels.qty}
+                decrease={labels.decrease}
+                increase={labels.increase}
+              />
+            </Stack>
+          </Group>
+        )}</For>
+      </Stack>
+      <Stack gap="4" align="stretch" class="border-t border-border p-4">
+        <Stack gap="2" align="stretch" class="rounded bg-muted p-4" data-testid="progress">
+          <Text size="sm">
+            {drawer.progress}
+          </Text>
+          <Progress value="96" max="100" aria-label={drawer.progress} />
+        </Stack>
+        <List tag="ul" class="flex flex-col gap-2">
+          <For each={rows ?? []}>{(row, iOf) => { const i = iOf(); return (
+            <>
+              {(row.strong ? true : (i === 0)) ? (
+                <ListItem
+                  class={
+                    row.strong ? "flex justify-between text-base font-bold"
+                    : "flex justify-between text-sm text-muted-foreground"
+                  }
+                >
+                  <Inline>
+                    {row.label}
+                  </Inline>
+                  <Inline>
+                    {fmtMoney(row.amount, row.currency)}
+                  </Inline>
+                </ListItem>
+              ) : null}
+            </>
+          ); }}</For>
+        </List>
+        <Button variant="default" size="lg" class="w-full" data-testid="checkout">
+          {labels.checkout}
+        </Button>
+      </Stack>
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/dropdown-item.tsx b/packages/solid/ui/src/components/dropdown-item.tsx
new file mode 100644
index 0000000..d7f6025
--- /dev/null
+++ b/packages/solid/ui/src/components/dropdown-item.tsx
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex
+ * -1: the menu moves focus with the arrow keys.
+ */
+import { type JSX } from "solid-js";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Inline } from "../primitives/inline/inline";
+import { cn } from "../utils";
+
+export type DropdownItemProps = {
+  selected?: boolean;
+  class?: string;
+  children?: JSX.Element;
+  icon?: JSX.Element;
+  right?: JSX.Element;
+  onClick?: () => void;
+};
+
+export function DropdownItem({
+  selected = false,
+  class: className,
+  children,
+  icon,
+  right,
+  onClick,
+}: DropdownItemProps) {
+  return (
+    <ButtonPlain
+      type="button"
+      role="menuitem"
+      class={cn("group flex h-9 w-full items-center px-2 text-left text-foreground", className)}
+      tabindex={-1}
+      data-slot="dropdown-item"
+      data-state={(selected ? "selected" : "default")}
+      onClick={() => onClick?.()}
+    >
+      <Inline
+        class={"flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted " +
+          "group-data-[state=selected]:bg-muted"}
+        data-slot="dropdown-item-content"
+      >
+        {icon ? (
+          <Inline class="flex w-7 shrink-0 items-center pr-2" data-slot="dropdown-item-icon">
+            {icon}
+          </Inline>
+        ) : null}
+        <Inline class={cn("text-xs", "min-w-0 flex-1 truncate px-1 font-bold")} data-slot="dropdown-item-label">
+          {children}
+        </Inline>
+        {right ? (
+          <Inline class="flex shrink-0 items-center pr-1" data-slot="dropdown-item-right">
+            {right}
+          </Inline>
+        ) : null}
+      </Inline>
+    </ButtonPlain>
+  );
+}
diff --git a/packages/solid/ui/src/components/editor-tab.tsx b/packages/solid/ui/src/components/editor-tab.tsx
new file mode 100644
index 0000000..65ebf4e
--- /dev/null
+++ b/packages/solid/ui/src/components/editor-tab.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not
+ * pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close
+ * events.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn } from "../utils";
+
+export type EditorTabProps = {
+  label: string;
+  closeLabel: string;
+  active?: boolean;
+  preview?: boolean;
+  class?: string;
+  icon?: JSX.Element;
+  onClick?: () => void;
+  onClose?: () => void;
+};
+
+export function EditorTab({
+  label,
+  closeLabel,
+  active = false,
+  preview = false,
+  class: className,
+  icon,
+  onClick,
+  onClose,
+}: EditorTabProps) {
+  return (
+    <Box
+      class={cn(
+        "flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card " +
+          "[&_svg]:text-muted-foreground",
+        "border-r border-border",
+        className
+      )}
+      role="tab"
+      aria-selected={active}
+      tabindex={(active ? 0 : -1)}
+      data-slot="editor-tab"
+      data-state={(active ? "active" : "default")}
+      onClick={() => onClick?.()}
+    >
+      <Inline class="flex h-10 items-center gap-2 px-3" data-slot="editor-tab-content">
+        {icon}
+        <Inline
+          class={cn("text-xs text-foreground", (preview ? "font-semibold italic" : "font-bold"))}
+          data-slot="editor-tab-label"
+        >
+          {label}
+        </Inline>
+        <Button
+          variant="ghost"
+          size="sm"
+          layout="icon"
+          class={"p-0 [&>svg]:size-4"}
+          aria-label={closeLabel}
+          tabindex={-1}
+          data-slot="editor-tab-close"
+          onClick={() => onClose?.()}
+        >
+          <LucideIcon name="x" size={16} />
+        </Button>
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/empty-state.tsx b/packages/solid/ui/src/components/empty-state.tsx
new file mode 100644
index 0000000..fcc0d20
--- /dev/null
+++ b/packages/solid/ui/src/components/empty-state.tsx
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** Empty list or nothing found: a round icon, a title, a hint and an optional action. */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type EmptyStateProps = {
+  icon?: string;
+  title: string;
+  text?: string;
+  class?: string;
+  action?: JSX.Element;
+};
+
+export function EmptyState({ icon = "inbox", title, text, class: className, action }: EmptyStateProps) {
+  return (
+    <Box
+      class={cn(
+        "flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border",
+        className
+      )}
+      role="status"
+    >
+      <IconBadge size="lg">
+        <LucideIcon name={icon} size={20} />
+      </IconBadge>
+      <Text class="m-0 text-sm font-bold text-foreground">
+        {title}
+      </Text>
+      {text ? (
+        <Text class="m-0 max-w-80 text-xs font-medium text-muted-foreground">
+          {text}
+        </Text>
+      ) : null}
+      {action}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/faq-cards.tsx b/packages/solid/ui/src/components/faq-cards.tsx
new file mode 100644
index 0000000..c282af0
--- /dev/null
+++ b/packages/solid/ui/src/components/faq-cards.tsx
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/faq-parts.ts
+/**
+ * The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon
+ * square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { ArticleBlock } from "../components/article-block";
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+
+export type FaqCardsProps = {
+  items: Question[];
+  labels: FaqSplitLabels;
+  cards?: "grid3" | "grid4" | "icons";
+};
+
+export function FaqCards({ items, labels, cards = "grid3" }: FaqCardsProps) {
+  return (
+    <Box
+      class={
+        (cards as string) === "grid4" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+        : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+      }
+      data-testid="faq"
+    >
+      <For each={items ?? []}>{(q) => (
+        <ArticleBlock class="rounded bg-card inset-ring inset-ring-border flex flex-col gap-4 p-6" testid="faq-card">
+          {((cards as string) === "icons") ? (
+            <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+              <LucideIcon name={q.icon} size={20} />
+            </Box>
+          ) : null}
+          <Stack gap="2">
+            <Badge variant="secondary" size="sm" class="w-fit">
+              {q.category}
+            </Badge>
+            <Title as={3} size="base" weight="semibold">
+              {q.question}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {q.answer}
+            </Text>
+          </Stack>
+          <Box class="mt-auto">
+            <Button variant="link" size="sm" class="gap-2 px-0 font-medium">
+              {labels.more}
+              <LucideIcon name="arrow-right" size={16} />
+            </Button>
+          </Box>
+        </ArticleBlock>
+      )}</For>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/faq-disclosures.tsx b/packages/solid/ui/src/components/faq-disclosures.tsx
new file mode 100644
index 0000000..b7d826d
--- /dev/null
+++ b/packages/solid/ui/src/components/faq-disclosures.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/faq-parts.ts
+/** The questions of FaqSplit as native disclosures, one open at a time. */
+import { For, type JSX } from "solid-js";
+import { Disclosure } from "../primitives/disclosure/disclosure";
+import { Summary } from "../primitives/disclosure/summary";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+
+export type FaqDisclosuresProps = {
+  items: Question[];
+  name: string;
+};
+
+export function FaqDisclosures({ items, name }: FaqDisclosuresProps) {
+  return (
+    <Stack gap="0" align="stretch" data-testid="faq">
+      <For each={items ?? []}>{(q) => (
+        <Disclosure variant="item" name={name} data-testid="faq-item">
+          <Summary variant="item">
+            {q.question}
+          </Summary>
+          <Text size="sm" class="pb-4 text-muted-foreground">
+            {q.answer}
+          </Text>
+        </Disclosure>
+      )}</For>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/faq-finder.tsx b/packages/solid/ui/src/components/faq-finder.tsx
new file mode 100644
index 0000000..dec0ffd
--- /dev/null
+++ b/packages/solid/ui/src/components/faq-finder.tsx
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/faq-parts.ts
+/**
+ * The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as
+ * popular links.
+ */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { SearchField } from "../components/search-field";
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+import type { FaqTab } from "../blocks/faq-list.types";
+
+export type FaqFinderProps = {
+  items: Question[];
+  labels: FaqSplitLabels;
+  topics: FaqTab[];
+};
+
+export function FaqFinder({ items, labels, topics }: FaqFinderProps) {
+  return (
+    <Stack gap="6" align="stretch" data-testid="faq-finder">
+      <SearchField label={labels.search} placeholder={labels.search} value={(labels.query ?? "")} />
+      <Group gap="2" class="flex-wrap">
+        <For each={topics ?? []}>{(t) => (
+          <Button variant="outline" size="sm" data-testid="faq-topic" data-value={t.value}>
+            {t.title}
+          </Button>
+        )}</For>
+      </Group>
+      <Stack gap="2">
+        <Text size="sm" weight="semibold">
+          {labels.popular}
+        </Text>
+        <List class="m-0 flex list-none flex-col gap-2 p-0">
+          <For each={items ?? []}>{(q, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 3) ? (
+                <ListItem data-testid="faq-popular">
+                  <MenuEntry href={q.href} class="text-sm font-medium" size="sm">
+                    {q.question}
+                  </MenuEntry>
+                </ListItem>
+              ) : null}
+            </>
+          ); }}</For>
+        </List>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/faq-help.tsx b/packages/solid/ui/src/components/faq-help.tsx
new file mode 100644
index 0000000..9060f4c
--- /dev/null
+++ b/packages/solid/ui/src/components/faq-help.tsx
@@ -0,0 +1,64 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/faq-parts.ts
+/**
+ * The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon,
+ * name, one line) and a link.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FaqHelpProps = {
+  labels: FaqSplitLabels;
+  channels: Feature[];
+  landmarkLabel?: string;
+};
+
+export function FaqHelp({ labels, channels, landmarkLabel }: FaqHelpProps) {
+  return (
+    <Block
+      tag="aside"
+      class="rounded bg-card inset-ring inset-ring-border flex flex-col gap-6 p-6"
+      aria-label={(landmarkLabel ?? labels.asideTitle)}
+      data-testid="faq-help"
+    >
+      <Stack gap="2">
+        <Text size="lg" weight="semibold">
+          {labels.asideTitle}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {labels.asideText}
+        </Text>
+      </Stack>
+      <List class="m-0 flex list-none flex-col gap-4 p-0">
+        <For each={channels ?? []}>{(c) => (
+          <ListItem class="flex items-start gap-4" data-testid="faq-channel">
+            <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+              <LucideIcon name={c.icon} size={20} />
+            </Box>
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {c.title}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {c.text}
+              </Text>
+            </Stack>
+          </ListItem>
+        )}</For>
+      </List>
+      <Button variant="link" size="sm" class="gap-2 px-0 font-medium">
+        {labels.asideCta}
+        <LucideIcon name="arrow-right" size={16} />
+      </Button>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/feature-cards.tsx b/packages/solid/ui/src/components/feature-cards.tsx
new file mode 100644
index 0000000..9e566c7
--- /dev/null
+++ b/packages/solid/ui/src/components/feature-cards.tsx
@@ -0,0 +1,88 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/features.ts
+/** The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names. */
+import { For, type JSX } from "solid-js";
+import { Card } from "../primitives/card/card";
+import { CardContent } from "../primitives/card/card-content";
+import { CardHeader } from "../primitives/card/card-header";
+import { CardTitle } from "../primitives/card/card-title";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FeatureCardsProps = {
+  features: Feature[];
+  cols?: "1-2" | "1-3" | "1-4";
+  item?: "card" | "tile" | "cell";
+};
+
+export function FeatureCards({ features, cols = "1-3", item = "card" }: FeatureCardsProps) {
+  return (
+    <Grid
+      cols={cols}
+      class={
+        (item as string) === "cell" ? cn("w-full gap-px overflow-hidden bg-border p-px", defaults.features.cells)
+        : "gap-6"
+      }
+      data-testid="feature-grid"
+    >
+      <For each={features ?? []}>{(feature) => (
+        <>
+          {((item as string) === "tile") ? (
+            <Card variant="compact" data-testid="feature-card">
+              <Group gap="4" align="start">
+                <LucideIcon name={feature.icon} size={20} />
+                <Stack gap="2">
+                  <Title as={3} size="base" weight="bold">
+                    {feature.title}
+                  </Title>
+                  <Text size="sm" class="text-muted-foreground">
+                    {feature.text}
+                  </Text>
+                </Stack>
+              </Group>
+            </Card>
+          ) : ((item as string) === "cell") ? (
+            <Stack
+              gap="2"
+              align="center"
+              class="h-full gap-8 bg-background px-6 py-12 text-center"
+              data-testid="feature-card"
+            >
+              <IconBadge variant="primary" size="xl" data-testid="feature-icon">
+                <LucideIcon name={feature.icon} size={24} />
+              </IconBadge>
+              <Title as={3} size="xl" weight="semibold" class="leading-6">
+                {feature.title}
+              </Title>
+              <Text size="sm" weight="semibold" class="leading-5 text-muted-foreground">
+                {feature.text}
+              </Text>
+            </Stack>
+          ) : (
+            <Card variant="default" data-testid="feature-card">
+              <CardHeader class="flex flex-col gap-4">
+                <LucideIcon name={feature.icon} size={24} />
+                <CardTitle as={3}>
+                  {feature.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Text size="sm" class="text-muted-foreground">
+                  {feature.text}
+                </Text>
+              </CardContent>
+            </Card>
+          )}
+        </>
+      )}</For>
+    </Grid>
+  );
+}
diff --git a/packages/solid/ui/src/components/feature-metric-cards.tsx b/packages/solid/ui/src/components/feature-metric-cards.tsx
new file mode 100644
index 0000000..3631511
--- /dev/null
+++ b/packages/solid/ui/src/components/feature-metric-cards.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/feature-split-parts.ts
+/**
+ * Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the
+ * label.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { Stat } from "../blocks/stats-band.types";
+
+export type FeatureMetricCardsProps = {
+  stats: Stat[];
+};
+
+export function FeatureMetricCards({ stats }: FeatureMetricCardsProps) {
+  return (
+    <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <For each={stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+        <>
+          {(i < 4) ? (
+            <Group
+              gap="4"
+              align="center"
+              class="rounded bg-card inset-ring inset-ring-border p-4"
+              data-testid="feature-stat"
+            >
+              <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+                <LucideIcon name={s.icon} size={20} />
+              </Inline>
+              <Stack gap="0" class="min-w-0">
+                <Text size="lg" weight="bold">
+                  {s.value}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {s.label}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {s.hint}
+                </Text>
+              </Stack>
+            </Group>
+          ) : null}
+        </>
+      ); }}</For>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/feature-pairs.tsx b/packages/solid/ui/src/components/feature-pairs.tsx
new file mode 100644
index 0000000..7fa2854
--- /dev/null
+++ b/packages/solid/ui/src/components/feature-pairs.tsx
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/feature-split-parts.ts
+/** Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards. */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FeaturePairsProps = {
+  features: Feature[];
+};
+
+export function FeaturePairs({ features }: FeaturePairsProps) {
+  return (
+    <Box class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+      <For each={features ?? []}>{(f, iOf) => { const i = iOf(); return (
+        <>
+          {(i < 4) ? (
+            <Group gap="4" align="start" data-testid="feature-item">
+              <Inline class="flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground">
+                <LucideIcon name={f.icon} size={16} />
+              </Inline>
+              <Stack gap="2" class="min-w-0">
+                <Title as={3} size="sm" weight="semibold">
+                  {f.title}
+                </Title>
+                <Text size="sm" class="text-muted-foreground">
+                  {f.text}
+                </Text>
+              </Stack>
+            </Group>
+          ) : null}
+        </>
+      ); }}</For>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/feature-rows.tsx b/packages/solid/ui/src/components/feature-rows.tsx
new file mode 100644
index 0000000..afdefdb
--- /dev/null
+++ b/packages/solid/ui/src/components/feature-rows.tsx
@@ -0,0 +1,50 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/features.ts
+/** The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names. */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FeatureRowsProps = {
+  features: Feature[];
+  mediaSide?: "end" | "start" | "alternate";
+};
+
+export function FeatureRows({ features, mediaSide = "end" }: FeatureRowsProps) {
+  return (
+    <Stack gap="8" align="stretch" data-testid="feature-rows">
+      <For each={features ?? []}>{(feature) => (
+        <Grid cols="1-2" class="group items-center gap-8" data-testid="feature-card">
+          <Stack gap="2" class="min-w-0">
+            <LucideIcon name={feature.icon} size={24} />
+            <Title as={3} size="xl" weight="bold">
+              {feature.title}
+            </Title>
+            <Text size="base" class="text-muted-foreground">
+              {feature.text}
+            </Text>
+          </Stack>
+          <Box
+            class={cn(
+              "w-full min-w-0",
+              (
+                (mediaSide as string) === "start" ? "md:order-first"
+                : (mediaSide as string) === "alternate" ? "md:group-even:order-first"
+                : ""
+              )
+            )}
+          >
+            <MediaFrame alt={feature.title} ratio="4/3" />
+          </Box>
+        </Grid>
+      )}</For>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/feature-stat-rows.tsx b/packages/solid/ui/src/components/feature-stat-rows.tsx
new file mode 100644
index 0000000..5597350
--- /dev/null
+++ b/packages/solid/ui/src/components/feature-stat-rows.tsx
@@ -0,0 +1,62 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/feature-split-parts.ts
+/** Two figures of FeatureSplit as cards, then three features as checked rows. */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import type { Feature } from "../blocks/feature-grid.types";
+import type { Stat } from "../blocks/stats-band.types";
+
+export type FeatureStatRowsProps = {
+  features: Feature[];
+  stats: Stat[];
+};
+
+export function FeatureStatRows({ features, stats }: FeatureStatRowsProps) {
+  return (
+    <Stack gap="6" align="stretch">
+      <Box class="grid grid-cols-2 gap-4">
+        <For each={stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+          <>
+            {(i < 2) ? (
+              <Stack gap="0" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="feature-stat">
+                <Text size="2xl" weight="bold">
+                  {s.value}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {s.label}
+                </Text>
+              </Stack>
+            ) : null}
+          </>
+        ); }}</For>
+      </Box>
+      <Stack gap="4" align="stretch">
+        <For each={features ?? []}>{(f, iOf) => { const i = iOf(); return (
+          <>
+            {(i < 3) ? (
+              <Group gap="4" align="start" data-testid="feature-item">
+                <Inline class="flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground">
+                  <LucideIcon name="check" size={16} />
+                </Inline>
+                <Stack gap="2" class="min-w-0">
+                  <Title as={3} size="sm" weight="semibold">
+                    {f.title}
+                  </Title>
+                  <Text size="sm" class="text-muted-foreground">
+                    {f.text}
+                  </Text>
+                </Stack>
+              </Group>
+            ) : null}
+          </>
+        ); }}</For>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/field.tsx b/packages/solid/ui/src/components/field.tsx
new file mode 100644
index 0000000..698d278
--- /dev/null
+++ b/packages/solid/ui/src/components/field.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the
+ * control.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Label } from "../primitives/label/label";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type FieldProps = {
+  label: string;
+  htmlFor: string;
+  hint?: string;
+  error?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function Field({ label, htmlFor, hint, error, class: className, children }: FieldProps) {
+  return (
+    <Box class={cn("flex min-w-0 flex-col gap-2", className)}>
+      <Label class="text-xs font-bold text-foreground" for={htmlFor}>
+        {label}
+      </Label>
+      {children}
+      {error ? (
+        <Text class="m-0 text-xs font-semibold text-destructive" role="alert">
+          {error}
+        </Text>
+      ) : hint ? (
+        <Text class="m-0 text-xs font-medium text-muted-foreground">
+          {hint}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/figure-block.tsx b/packages/solid/ui/src/components/figure-block.tsx
new file mode 100644
index 0000000..7be3d26
--- /dev/null
+++ b/packages/solid/ui/src/components/figure-block.tsx
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/landmarks.ts
+/**
+ * Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag
+ * figure.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { cn } from "../utils";
+
+export type FigureBlockProps = {
+  testid?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function FigureBlock({ testid, class: className, children }: FigureBlockProps) {
+  return (
+    <Block tag="figure" class={cn(className)} data-testid={testid}>
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/file-tree-item.tsx b/packages/solid/ui/src/components/file-tree-item.tsx
new file mode 100644
index 0000000..a92bfc5
--- /dev/null
+++ b/packages/solid/ui/src/components/file-tree-item.tsx
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/** A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide. */
+import { type JSX } from "solid-js";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn, variants } from "../utils";
+
+/** FileTreeItem: the classes of each value (shadcn/cva style). */
+export const fileTreeItemVariants = variants({
+  base: "flex h-6 w-full items-center gap-4 text-xs font-bold text-muted-foreground data-[state=selected]:bg-muted",
+  variants: {
+    kind: {
+      folder: "",
+      file: "px-8",
+    },
+  },
+  defaultVariants: { kind: "file" },
+});
+
+export type FileTreeItemProps = {
+  kind?: "folder" | "file";
+  label: string;
+  selected?: boolean;
+  expanded?: boolean;
+  class?: string;
+  onClick?: () => void;
+};
+
+export function FileTreeItem({
+  kind = "file",
+  label,
+  selected = false,
+  expanded = false,
+  class: className,
+  onClick,
+}: FileTreeItemProps) {
+  return (
+    <ButtonPlain
+      type="button"
+      role="treeitem"
+      class={cn(fileTreeItemVariants({ kind: kind }), className)}
+      aria-selected={selected}
+      tabindex={(selected ? 0 : -1)}
+      aria-expanded={(((kind as string) === "folder") ? expanded : undefined)}
+      data-slot="file-tree-item"
+      data-kind={kind}
+      data-state={(selected ? "selected" : "default")}
+      onClick={() => onClick?.()}
+    >
+      {((kind as string) === "folder") ? (
+        <>
+          <LucideIcon name={(expanded ? "chevron-down" : "chevron-right")} size={16} />
+          <LucideIcon name="folder-open" size={16} />
+        </>
+      ) : (
+        <LucideIcon name="file" size={16} />
+      )}
+      <Inline class="whitespace-nowrap" data-slot="file-tree-label">
+        {label}
+      </Inline>
+    </ButtonPlain>
+  );
+}
diff --git a/packages/solid/ui/src/components/file-tree.tsx b/packages/solid/ui/src/components/file-tree.tsx
new file mode 100644
index 0000000..3a54b63
--- /dev/null
+++ b/packages/solid/ui/src/components/file-tree.tsx
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead`
+ * from the utils to the keydown (vertical, no loop).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { cn } from "../utils";
+
+export type FileTreeProps = {
+  label?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function FileTree({ label, class: className, children }: FileTreeProps) {
+  return (
+    <Box class={cn("flex flex-col gap-2 p-2", className)} role="tree" aria-label={label} data-slot="file-tree">
+      {children}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-brand.tsx b/packages/solid/ui/src/components/footer-brand.tsx
new file mode 100644
index 0000000..04cb555
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-brand.tsx
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The brand of FooterSplit: a mark and the brand word over the tagline. */
+import { type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+
+export type FooterBrandProps = {
+  brand: string;
+  tagline: string;
+};
+
+export function FooterBrand({ brand, tagline }: FooterBrandProps) {
+  return (
+    <Stack gap="2" align="start" data-testid="footer-brand">
+      <Group gap="2" align="center">
+        <Inline class="flex size-8 items-center justify-center rounded bg-foreground text-background">
+          <LucideIcon name="layers" size={16} />
+        </Inline>
+        <Text size="xl" weight="bold">
+          {brand}
+        </Text>
+      </Group>
+      <Text size="sm" class="text-muted-foreground">
+        {tagline}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-card.tsx b/packages/solid/ui/src/components/footer-card.tsx
new file mode 100644
index 0000000..d1fffb0
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-card.tsx
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer.ts
+/** The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card. */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { defaults } from "../presets/defaults";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterCardProps = {
+  label: string;
+  brand: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+
+export function FooterCard({ label, brand, groups, landmarkLabel }: FooterCardProps) {
+  return (
+    <Block tag="footer" class="py-8" data-testid="site-footer" data-layout="card" aria-label={landmarkLabel}>
+      <Container class={cn(cn("mx-auto w-full px-4", defaults.section.landing), "px-0")} data-slot="container">
+        <Box
+          class={cn("flex w-full flex-row items-start overflow-hidden bg-muted p-10", defaults.footer.card)}
+          data-testid="footer-card"
+        >
+          <Group gap="4" align="center" class={cn("h-8 shrink-0", defaults.footer.brand)} data-testid="footer-brand">
+            <Inline class="flex size-8 items-center justify-center rounded bg-foreground text-background">
+              <LucideIcon name="hexagon" size={16} />
+            </Inline>
+            <Text size="base" weight="bold">
+              {brand}
+            </Text>
+          </Group>
+          {((groups?.length ?? 0) > 0) ? (
+            <NavBlock
+              label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)}
+              class="min-w-0 flex-1"
+            >
+              <Group
+                gap="0"
+                align="start"
+                class={cn("flex w-full flex-nowrap justify-between", defaults.footer.groups)}
+                data-testid="footer-groups"
+              >
+                <For each={groups ?? []}>{(g) => (
+                  <Stack gap="4" data-testid="group">
+                    <Text size="xs" weight="semibold" class="leading-5">
+                      {g.title}
+                    </Text>
+                    <List class="m-0 flex list-none flex-col gap-4 p-0">
+                      <For each={g.links ?? []}>{(item) => (
+                        <ListItem>
+                          <MenuEntry href={item.href} class="text-xs leading-5 text-muted-foreground">
+                            {item.name}
+                          </MenuEntry>
+                        </ListItem>
+                      )}</For>
+                    </List>
+                  </Stack>
+                )}</For>
+              </Group>
+            </NavBlock>
+          ) : null}
+        </Box>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-channels.tsx b/packages/solid/ui/src/components/footer-channels.tsx
new file mode 100644
index 0000000..20d93a2
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-channels.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The channels of the community as three cards: a glyph over the name and one line. */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterChannelsProps = {
+  extras: FooterExtras;
+};
+
+export function FooterChannels({ extras }: FooterChannelsProps) {
+  return (
+    <>
+      {((extras.channels?.length ?? 0) > 0) ? (
+        <Box class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          <For each={extras.channels ?? []}>{(c, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 3) ? (
+                <Stack
+                  gap="2"
+                  align="start"
+                  class="rounded bg-card inset-ring inset-ring-border p-4"
+                  data-testid="footer-channel"
+                >
+                  <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+                    <LucideIcon name={c.icon} size={20} />
+                  </Inline>
+                  <Text size="sm" weight="semibold">
+                    {c.title}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {c.text}
+                  </Text>
+                </Stack>
+              ) : null}
+            </>
+          ); }}</For>
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-columns.tsx b/packages/solid/ui/src/components/footer-columns.tsx
new file mode 100644
index 0000000..72a5d6e
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-columns.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer.ts
+/** The link groups of SitemapFooter as columns: a group title over its links, up to five columns. */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Grid } from "../primitives/grid/grid";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterColumnsProps = {
+  label: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+
+export function FooterColumns({ label, groups, landmarkLabel }: FooterColumnsProps) {
+  return (
+    <>
+      {((groups?.length ?? 0) > 0) ? (
+        <Block tag="nav" aria-label={(landmarkLabel ?? label)}>
+          <Grid cols="1" class="grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5" data-testid="footer-groups">
+            <For each={groups ?? []}>{(g) => (
+              <Stack gap="2" data-testid="group">
+                <Text size="sm" weight="semibold">
+                  {g.title}
+                </Text>
+                <List class="m-0 flex list-none flex-col gap-2 p-0">
+                  <For each={g.links ?? []}>{(item) => (
+                    <ListItem>
+                      <MenuEntry href={item.href} class="text-sm text-muted-foreground">
+                        {item.name}
+                      </MenuEntry>
+                    </ListItem>
+                  )}</For>
+                </List>
+              </Stack>
+            )}</For>
+          </Grid>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-contacts.tsx b/packages/solid/ui/src/components/footer-contacts.tsx
new file mode 100644
index 0000000..c606556
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-contacts.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value. */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterContactsProps = {
+  extras: FooterExtras;
+};
+
+export function FooterContacts({ extras }: FooterContactsProps) {
+  return (
+    <>
+      {((extras.contacts?.length ?? 0) > 0) ? (
+        <Stack gap="4" align="stretch">
+          <For each={extras.contacts ?? []}>{(c) => (
+            <Group gap="4" align="center" data-testid="footer-contact">
+              <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+                <LucideIcon name={c.icon} size={20} />
+              </Inline>
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {c.title}
+                </Text>
+                <Text size="sm" class="text-muted-foreground">
+                  {c.text}
+                </Text>
+              </Stack>
+            </Group>
+          )}</For>
+        </Stack>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-figures.tsx b/packages/solid/ui/src/components/footer-figures.tsx
new file mode 100644
index 0000000..365e1a5
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-figures.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** Three figures in a row under the brand of FooterSplit. */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterFiguresProps = {
+  extras: FooterExtras;
+};
+
+export function FooterFigures({ extras }: FooterFiguresProps) {
+  return (
+    <>
+      {((extras.stats?.length ?? 0) > 0) ? (
+        <Group gap="8" class="flex-wrap">
+          <For each={extras.stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 3) ? (
+                <Stack gap="0" data-testid="footer-stat">
+                  <Text size="xl" weight="bold">
+                    {s.value}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {s.label}
+                  </Text>
+                </Stack>
+              ) : null}
+            </>
+          ); }}</For>
+        </Group>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-group-cards.tsx b/packages/solid/ui/src/components/footer-group-cards.tsx
new file mode 100644
index 0000000..734feae
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-group-cards.tsx
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/**
+ * The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide
+ * screens.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterGroupCardsProps = {
+  label: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+
+export function FooterGroupCards({ label, groups, landmarkLabel }: FooterGroupCardsProps) {
+  return (
+    <>
+      {((groups?.length ?? 0) > 0) ? (
+        <Block tag="nav" aria-label={(landmarkLabel ?? label)}>
+          <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <For each={groups ?? []}>{(g) => (
+              <Stack gap="4" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="group">
+                <Group gap="2" align="center">
+                  <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+                    <LucideIcon name={g.icon} size={20} />
+                  </Inline>
+                  <Text size="sm" weight="semibold">
+                    {g.title}
+                  </Text>
+                </Group>
+                <List class="m-0 flex list-none flex-col gap-2 p-0">
+                  <For each={g.links ?? []}>{(item) => (
+                    <ListItem>
+                      <MenuEntry href={item.href} class="text-sm text-muted-foreground" variant="muted" size="sm">
+                        {item.name}
+                      </MenuEntry>
+                    </ListItem>
+                  )}</For>
+                </List>
+              </Stack>
+            )}</For>
+          </Box>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-link-columns.tsx b/packages/solid/ui/src/components/footer-link-columns.tsx
new file mode 100644
index 0000000..78709c5
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-link-columns.tsx
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The first three link groups of FooterSplit as small columns beside each other. */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterLinkColumnsProps = {
+  label: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+
+export function FooterLinkColumns({ label, groups, landmarkLabel }: FooterLinkColumnsProps) {
+  return (
+    <>
+      {((groups?.length ?? 0) > 0) ? (
+        <Block tag="nav" aria-label={(landmarkLabel ?? label)}>
+          <Box class="grid grid-cols-2 gap-8 sm:grid-cols-3">
+            <For each={groups ?? []}>{(g, iOf) => { const i = iOf(); return (
+              <>
+                {(i < 3) ? (
+                  <Stack gap="2" data-testid="group">
+                    <Text size="sm" weight="semibold">
+                      {g.title}
+                    </Text>
+                    <List class="m-0 flex list-none flex-col gap-2 p-0">
+                      <For each={g.links ?? []}>{(item) => (
+                        <ListItem>
+                          <MenuEntry href={item.href} class="text-sm text-muted-foreground" variant="muted" size="sm">
+                            {item.name}
+                          </MenuEntry>
+                        </ListItem>
+                      )}</For>
+                    </List>
+                  </Stack>
+                ) : null}
+              </>
+            ); }}</For>
+          </Box>
+        </Block>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-points.tsx b/packages/solid/ui/src/components/footer-points.tsx
new file mode 100644
index 0000000..f2d7074
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-points.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** Four points with their glyphs in a column, under the tagline of FooterSplit. */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterPointsProps = {
+  extras: FooterExtras;
+  title: string;
+};
+
+export function FooterPoints({ extras, title }: FooterPointsProps) {
+  return (
+    <>
+      {((extras.points?.length ?? 0) > 0) ? (
+        <Stack gap="4" align="start">
+          <Text size="sm" weight="semibold">
+            {title}
+          </Text>
+          <For each={extras.points ?? []}>{(p, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 4) ? (
+                <Group gap="2" align="center" data-testid="footer-point">
+                  <LucideIcon name={p.icon} size={16} />
+                  <Text size="sm">
+                    {p.title}
+                  </Text>
+                </Group>
+              ) : null}
+            </>
+          ); }}</For>
+        </Stack>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-signup-card.tsx b/packages/solid/ui/src/components/footer-signup-card.tsx
new file mode 100644
index 0000000..16942b7
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-signup-card.tsx
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/** The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note. */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Form } from "../primitives/form/form";
+import { Group } from "../primitives/group/group";
+import { Input } from "../primitives/input/input";
+import { Label } from "../primitives/label/label";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { cn, tpl } from "../utils";
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterSignupCardProps = {
+  id: string;
+  labels: FooterSplitLabels;
+};
+
+export function FooterSignupCard({ id, labels }: FooterSignupCardProps) {
+  return (
+    <Stack gap="4" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="signup">
+      <Group gap="2" align="center">
+        <LucideIcon name="mail" size={16} />
+        <Text size="sm" weight="semibold">
+          {labels.signup}
+        </Text>
+      </Group>
+      <Form method="dialog" class={cn("w-full max-w-md", (false ? "mx-auto" : ""))} data-testid="email-form">
+        <Label for={tpl("{0}-email", id)} class="sr-only">
+          {labels.email}
+        </Label>
+        <Group gap="2" align="start" class="w-full flex-wrap">
+          <Input type="email" name="email" class="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+          <Button variant="default" size="default" type="submit" data-testid="submit">
+            {labels.subscribe}
+          </Button>
+        </Group>
+      </Form>
+      <Text size="xs" class="text-muted-foreground">
+        {labels.note}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/footer-sitemap.tsx b/packages/solid/ui/src/components/footer-sitemap.tsx
new file mode 100644
index 0000000..251ff11
--- /dev/null
+++ b/packages/solid/ui/src/components/footer-sitemap.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/footer-split-parts.ts
+/**
+ * The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no
+ * link).
+ */
+import { type JSX } from "solid-js";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+
+export type FooterSitemapProps = {
+  href?: string;
+  label: string;
+};
+
+export function FooterSitemap({ href, label }: FooterSitemapProps) {
+  return (
+    <>
+      {href ? (
+        <Link href={href} size="sm" data-testid="footer-sitemap">
+          <LucideIcon name="arrow-right" size={16} />
+          {label}
+        </Link>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/hero-badge.tsx b/packages/solid/ui/src/components/hero-badge.tsx
new file mode 100644
index 0000000..df7a11e
--- /dev/null
+++ b/packages/solid/ui/src/components/hero-badge.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/** A composite badge on a dark band: an optional small mark beside a label. */
+import { type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Text } from "../primitives/text/text";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+export type HeroBadgeProps = {
+  label: string;
+  mark?: string;
+};
+
+export function HeroBadge({ label, mark }: HeroBadgeProps) {
+  return (
+    <Group
+      gap="2"
+      align="center"
+      class={cn(
+        "h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30",
+        defaults.hero.badge
+      )}
+      data-testid="section-badge"
+    >
+      {mark ? (
+        <Badge variant="secondary" size="sm" data-testid="badge-mark">
+          {mark}
+        </Badge>
+      ) : null}
+      <Text size="xs" weight="bold" class="leading-5 text-background">
+        {label}
+      </Text>
+    </Group>
+  );
+}
diff --git a/packages/solid/ui/src/components/hero-head.tsx b/packages/solid/ui/src/components/hero-head.tsx
new file mode 100644
index 0000000..8d395f5
--- /dev/null
+++ b/packages/solid/ui/src/components/hero-head.tsx
@@ -0,0 +1,119 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/**
+ * The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a
+ * call to action.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { Link } from "../primitives/link/link";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { defaults } from "../presets/defaults";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type HeroHeadProps = {
+  brand?: string;
+  brandHref?: string;
+  links?: NavLink[];
+  current?: string;
+  login?: string;
+  loginHref?: string;
+  cta?: string;
+  href?: string;
+  skip?: string;
+  navLabel?: string;
+  landmarkLabel?: string;
+};
+
+export function HeroHead({
+  brand,
+  brandHref,
+  links,
+  current = "",
+  login,
+  loginHref,
+  cta,
+  href,
+  skip,
+  navLabel,
+  landmarkLabel,
+}: HeroHeadProps) {
+  return (
+    <Block
+      tag="header"
+      class={cn("flex w-full flex-wrap items-center justify-between pr-4", defaults.hero.head)}
+      data-testid="hero-head"
+      aria-label={landmarkLabel}
+    >
+      {skip ? (
+        <LinkPlain
+          href="#main-content"
+          class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+            "focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border"}
+          data-testid="skip-link"
+        >
+          {skip}
+        </LinkPlain>
+      ) : null}
+      <MenuEntry
+        href={brandHref}
+        class={cn(defaults.text.small, "font-medium leading-6 text-background")}
+        testid="brand"
+      >
+        {brand}
+      </MenuEntry>
+      {(links && ((links?.length ?? 0) > 0)) ? (
+        <NavBlock
+          label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", navLabel, landmarkLabel)) : navLabel)}
+          testid="site-nav"
+        >
+          <Group gap="8" align="center" class="flex-wrap">
+            <For each={links ?? []}>{(l) => (
+              <>
+                {l.href ? (
+                  <Link
+                    href={l.href}
+                    variant="default"
+                    aria-current={((l.id === current) ? "page" : undefined)}
+                    class="text-xs font-medium leading-5 text-background"
+                    data-testid="nav-link"
+                  >
+                    {l.name}
+                  </Link>
+                ) : (
+                  <Inline class="text-xs font-medium leading-5 text-background" data-testid="nav-link">
+                    {l.name}
+                  </Inline>
+                )}
+              </>
+            )}</For>
+          </Group>
+        </NavBlock>
+      ) : null}
+      <Group gap="2" align="center">
+        {login ? (
+          <Button
+            href={loginHref}
+            variant="ghost"
+            size="sm"
+            class="text-background hover:bg-background/10"
+            data-testid="nav-login"
+          >
+            {login}
+          </Button>
+        ) : null}
+        {cta ? (
+          <Button href={href} variant="secondary" size="sm" data-testid="header-cta">
+            {cta}
+          </Button>
+        ) : null}
+      </Group>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/hero-split-extras.tsx b/packages/solid/ui/src/components/hero-split-extras.tsx
new file mode 100644
index 0000000..b8cf573
--- /dev/null
+++ b/packages/solid/ui/src/components/hero-split-extras.tsx
@@ -0,0 +1,126 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-split-parts.ts
+/**
+ * What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small
+ * feature cards, or a quote with its author over three figures.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import type { HeroContent } from "../blocks/hero-split.types";
+
+export type HeroSplitExtrasProps = {
+  content: HeroContent;
+  extra?: "stats" | "avatars" | "minis" | "quote" | "none";
+};
+
+export function HeroSplitExtras({ content, extra = "none" }: HeroSplitExtrasProps) {
+  return (
+    <>
+      {(((extra as string) === "stats") && ((content.stats?.length ?? 0) > 0)) ? (
+        <Box class="grid grid-cols-3 gap-4" data-testid="hero-stats">
+          <For each={content.stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 3) ? (
+                <Stack gap="0" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="hero-stat">
+                  <Text size="2xl" weight="semibold">
+                    {s.value}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {s.label}
+                  </Text>
+                </Stack>
+              ) : null}
+            </>
+          ); }}</For>
+        </Box>
+      ) : null}
+      {(((extra as string) === "avatars") && ((content.people?.length ?? 0) > 0)) ? (
+        <Group gap="4" align="center" class="flex-wrap" data-testid="hero-proof">
+          <Group gap="2" align="center">
+            <For each={content.people ?? []}>{(p, iOf) => { const i = iOf(); return (
+              <>
+                {(i < 4) ? (
+                  <MediaFrame alt={p.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+                ) : null}
+              </>
+            ); }}</For>
+          </Group>
+          <Text size="sm" class="text-muted-foreground">
+            {content.proof}
+          </Text>
+        </Group>
+      ) : null}
+      {(((extra as string) === "minis") && ((content.features?.length ?? 0) > 0)) ? (
+        <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2" data-testid="hero-minis">
+          <For each={content.features ?? []}>{(f, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 2) ? (
+                <Group gap="4" align="start" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="hero-mini">
+                  <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                    <LucideIcon name={f.icon} size={20} />
+                  </Box>
+                  <Stack gap="0">
+                    <Text size="sm" weight="semibold">
+                      {f.title}
+                    </Text>
+                    <Text size="xs" class="text-muted-foreground">
+                      {f.text}
+                    </Text>
+                  </Stack>
+                </Group>
+              ) : null}
+            </>
+          ); }}</For>
+        </Box>
+      ) : null}
+      {(((extra as string) === "quote") && ((content.people?.length ?? 0) > 0)) ? (
+        <Stack gap="6" align="stretch">
+          <For each={content.people ?? []}>{(p, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 1) ? (
+                <FigureBlock class="flex flex-col gap-4" testid="hero-quote">
+                  <Text tag="blockquote" class="text-lg font-medium">
+                    {p.quote}
+                  </Text>
+                  <Group gap="4" align="center">
+                    <MediaFrame alt={p.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+                    <Stack gap="0">
+                      <Text size="sm" weight="semibold">
+                        {p.author}
+                      </Text>
+                      <Text size="xs" class="text-muted-foreground">
+                        {p.role}
+                      </Text>
+                    </Stack>
+                  </Group>
+                </FigureBlock>
+              ) : null}
+            </>
+          ); }}</For>
+          <Box class="grid grid-cols-3 gap-4" data-testid="hero-stats">
+            <For each={content.stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+              <>
+                {(i < 3) ? (
+                  <Stack gap="0" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="hero-stat">
+                    <Text size="2xl" weight="semibold">
+                      {s.value}
+                    </Text>
+                    <Text size="xs" class="text-muted-foreground">
+                      {s.label}
+                    </Text>
+                  </Stack>
+                ) : null}
+              </>
+            ); }}</For>
+          </Box>
+        </Stack>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/hero-split-media.tsx b/packages/solid/ui/src/components/hero-split-media.tsx
new file mode 100644
index 0000000..d8cf93c
--- /dev/null
+++ b/packages/solid/ui/src/components/hero-split-media.tsx
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-split-parts.ts
+/**
+ * What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with
+ * captions, or a picture with two plan cards floating over it.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import { OfferMedia } from "../components/offer-media";
+import { cn } from "../utils";
+import type { HeroContent } from "../blocks/hero-split.types";
+
+export type HeroSplitMediaProps = {
+  content: HeroContent;
+  alt: string;
+  media?: "picture" | "card" | "grid" | "plans";
+};
+
+export function HeroSplitMedia({ content, alt, media = "picture" }: HeroSplitMediaProps) {
+  return (
+    <>
+      {((media as string) === "picture") ? (
+        <MediaFrame alt={alt} ratio="4/3" />
+      ) : null}
+      {((media as string) === "card") ? (
+        <OfferMedia alt={alt} card={content.card} />
+      ) : null}
+      {(((media as string) === "grid") && ((content.features?.length ?? 0) > 0)) ? (
+        <Box class="grid grid-cols-2 gap-4" data-testid="hero-grid">
+          <For each={content.features ?? []}>{(f, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 4) ? (
+                <FigureBlock class="flex flex-col gap-2" testid="hero-tile">
+                  <MediaFrame alt={f.title} ratio="1/1" />
+                  <Text size="xs" class="text-muted-foreground">
+                    {f.title}
+                  </Text>
+                </FigureBlock>
+              ) : null}
+            </>
+          ); }}</For>
+        </Box>
+      ) : null}
+      {(((media as string) === "plans") && ((content.plans?.length ?? 0) > 0)) ? (
+        <Box class="relative" data-testid="hero-media">
+          <MediaFrame alt={alt} ratio="4/3" />
+          <For each={content.plans ?? []}>{(p, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 2) ? (
+                <Stack
+                  gap="2"
+                  class={cn(
+                    "absolute w-48 rounded bg-card p-4 shadow-lg",
+                    ((i === 0) ? "top-8 left-4" : "right-4 bottom-8")
+                  )}
+                  data-testid="hero-plan"
+                >
+                  <Text size="sm" weight="semibold">
+                    {p.name}
+                  </Text>
+                  <Group gap="2" align="center">
+                    <LucideIcon name="check" size={16} />
+                    <Text size="xs" class="text-muted-foreground">
+                      {p.tagline}
+                    </Text>
+                  </Group>
+                </Stack>
+              ) : null}
+            </>
+          ); }}</For>
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/icon-tab.tsx b/packages/solid/ui/src/components/icon-tab.tsx
new file mode 100644
index 0000000..0bf7217
--- /dev/null
+++ b/packages/solid/ui/src/components/icon-tab.tsx
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key
+ * movement between tabs is the job of IconTabs (see roving).
+ */
+import { type JSX } from "solid-js";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { cn, variants } from "../utils";
+
+/** IconTab: the classes of each value (shadcn/cva style). */
+export const iconTabVariants = variants({
+  base:
+    "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground inset-ring " +
+    "inset-ring-transparent [&>svg]:size-4 rounded",
+  variants: {
+    state: {
+      default: "",
+      active: "bg-card text-foreground inset-ring-border",
+    },
+  },
+  defaultVariants: { state: "default" },
+});
+
+export type IconTabProps = {
+  active?: boolean;
+  label: string;
+  class?: string;
+  children?: JSX.Element;
+  onClick?: () => void;
+};
+
+export function IconTab({ active = false, label, class: className, children, onClick }: IconTabProps) {
+  return (
+    <ButtonPlain
+      type="button"
+      role="tab"
+      aria-label={label}
+      class={cn(iconTabVariants({ state: (active ? "active" : "default") }), className)}
+      aria-selected={active}
+      tabindex={(active ? 0 : -1)}
+      data-slot="icon-tab"
+      data-state={(active ? "active" : "default")}
+      onClick={() => onClick?.()}
+    >
+      {children}
+    </ButtonPlain>
+  );
+}
diff --git a/packages/solid/ui/src/components/icon-tabs.tsx b/packages/solid/ui/src/components/icon-tabs.tsx
new file mode 100644
index 0000000..eca7c26
--- /dev/null
+++ b/packages/solid/ui/src/components/icon-tabs.tsx
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach
+ * `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { cn } from "../utils";
+
+export type IconTabsProps = {
+  label?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function IconTabs({ label, class: className, children }: IconTabsProps) {
+  return (
+    <Box class={cn("flex items-center gap-2", className)} role="tablist" aria-label={label} data-slot="icon-tabs">
+      {children}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/job-cards.tsx b/packages/solid/ui/src/components/job-cards.tsx
new file mode 100644
index 0000000..ed89c64
--- /dev/null
+++ b/packages/solid/ui/src/components/job-cards.tsx
@@ -0,0 +1,148 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/people-parts.ts
+/**
+ * The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply)
+ * or as a table.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Grid } from "../primitives/grid/grid";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import type { Job, Department, JobLabels } from "../blocks/job-board.types";
+
+export type JobCardsProps = {
+  jobs: Job[];
+  departments: Department[];
+  labels: JobLabels;
+  layout?: "grid" | "grouped" | "table";
+  salary?: "show" | "hide";
+};
+
+export function JobCards({ jobs, departments, labels, layout = "grid", salary = "hide" }: JobCardsProps) {
+  return (
+    <>
+      {((layout as string) === "table") ? (
+        <Box class="w-full overflow-x-auto rounded inset-ring inset-ring-border">
+          <Table class="w-full text-left text-sm" data-testid="job-table">
+            <TableCaption class="sr-only">
+              {labels.caption}
+            </TableCaption>
+            <TableHead class="bg-muted">
+              <TableRow>
+                <TableHeadCell scope="col" class="px-4 py-2">
+                  {labels.role}
+                </TableHeadCell>
+                <TableHeadCell scope="col" class="hidden py-2 md:table-cell">
+                  {labels.team}
+                </TableHeadCell>
+                <TableHeadCell scope="col" class="hidden py-2 sm:table-cell">
+                  {labels.location}
+                </TableHeadCell>
+                <TableHeadCell scope="col" class="py-2">
+                  {labels.type}
+                </TableHeadCell>
+                {((salary as string) === "show") ? (
+                  <TableHeadCell scope="col" class="hidden py-2 md:table-cell">
+                    {labels.salary}
+                  </TableHeadCell>
+                ) : null}
+                <TableHeadCell scope="col" class="py-2 pr-4">
+                  <Inline class="sr-only">
+                    {labels.apply}
+                  </Inline>
+                </TableHeadCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <For each={jobs ?? []}>{(j) => (
+                <TableRow class="border-t border-border" data-testid="item">
+                  <TableCell class="px-4 py-4 font-medium">
+                    {j.title}
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell">
+                    {departments.filter((i) => !j.dept || i["id"] === j.dept)[0]?.name ?? ""}
+                  </TableCell>
+                  <TableCell class="hidden sm:table-cell">
+                    {j.location}
+                  </TableCell>
+                  <TableCell>
+                    {j.type}
+                  </TableCell>
+                  {((salary as string) === "show") ? (
+                    <TableCell class="hidden md:table-cell">
+                      {j.salary}
+                    </TableCell>
+                  ) : null}
+                  <TableCell class="pr-4 text-right">
+                    <MenuEntry href={j.href} class="font-medium">
+                      {labels.apply}
+                    </MenuEntry>
+                  </TableCell>
+                </TableRow>
+              )}</For>
+            </TableBody>
+          </Table>
+        </Box>
+      ) : (
+        <Grid cols="1-2" class="gap-4" data-testid="items">
+          <For each={jobs ?? []}>{(j) => (
+            <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="item">
+              <Stack gap="2">
+                <Text size="lg" weight="semibold">
+                  {j.title}
+                </Text>
+                <Group gap="4" class="flex-wrap text-sm text-muted-foreground">
+                  <Group gap="2" align="center">
+                    <LucideIcon name="briefcase" size={16} />
+                    <Inline>
+                      {j.type}
+                    </Inline>
+                  </Group>
+                  <Group gap="2" align="center">
+                    <LucideIcon name="map-pin" size={16} />
+                    <Inline>
+                      {j.location}
+                    </Inline>
+                  </Group>
+                  <Group gap="2" align="center">
+                    <LucideIcon name="calendar" size={16} />
+                    <Inline>
+                      {j.posted}
+                    </Inline>
+                  </Group>
+                </Group>
+              </Stack>
+              {((salary as string) === "show") ? (
+                <Text size="base" weight="semibold" data-testid="salary">
+                  {j.salary}
+                </Text>
+              ) : null}
+              <Group gap="4" align="center" justify="between" class="mt-auto">
+                <Badge variant="secondary" size="default">
+                  {departments.filter((i) => !j.dept || i["id"] === j.dept)[0]?.name ?? ""}
+                </Badge>
+                <MenuEntry href={j.href} class="inline-flex items-center gap-2 text-sm font-medium">
+                  {labels.apply}
+                  <LucideIcon name="arrow-right" size={16} />
+                </MenuEntry>
+              </Group>
+            </Stack>
+          )}</For>
+        </Grid>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/logo-sidebar.tsx b/packages/solid/ui/src/components/logo-sidebar.tsx
new file mode 100644
index 0000000..8faea29
--- /dev/null
+++ b/packages/solid/ui/src/components/logo-sidebar.tsx
@@ -0,0 +1,55 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The
+ * variant picks the padding (recipe).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { cn, variants } from "../utils";
+
+/** LogoSidebar: the classes of each value (shadcn/cva style). */
+export const logoSidebarVariants = variants({
+  base: "flex h-8 items-center justify-between",
+  variants: {
+    variant: {
+      chat: "px-2",
+      creator: "pr-4",
+    },
+  },
+  defaultVariants: { variant: "chat" },
+});
+
+export type LogoSidebarProps = {
+  variant?: "chat" | "creator";
+  name: string;
+  class?: string;
+  mark?: JSX.Element;
+  actions?: JSX.Element;
+};
+
+export function LogoSidebar({ variant = "chat", name, class: className, mark, actions }: LogoSidebarProps) {
+  return (
+    <Box
+      class={cn(
+        logoSidebarVariants({ variant: variant }),
+        "in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0",
+        className
+      )}
+      data-slot="logo-sidebar"
+    >
+      <Inline class="flex items-center gap-4" data-slot="logo-sidebar-brand">
+        {mark}
+        <Inline class="text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden" data-slot="logo-sidebar-name">
+          {name}
+        </Inline>
+      </Inline>
+      {actions ? (
+        <Inline class="flex items-center gap-2 in-data-[nav=collapsed]:hidden" data-slot="logo-sidebar-actions">
+          {actions}
+        </Inline>
+      ) : null}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/logo-slot.tsx b/packages/solid/ui/src/components/logo-slot.tsx
new file mode 100644
index 0000000..b3f65bf
--- /dev/null
+++ b/packages/solid/ui/src/components/logo-slot.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/marketing.ts
+/** One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only. */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+export type LogoSlotProps = {
+  name: string;
+  icon: string;
+};
+
+export function LogoSlot({ name, icon }: LogoSlotProps) {
+  return (
+    <Box
+      class={cn("flex shrink-0 items-center justify-center text-muted-foreground", defaults.logos.slot)}
+      data-testid="item"
+      data-slot="logo-slot"
+    >
+      <LucideIcon name={icon} size={defaults.logos.glyph} />
+      <Text size="sm" weight="semibold" class="sr-only">
+        {name}
+      </Text>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/media-contacts.tsx b/packages/solid/ui/src/components/media-contacts.tsx
new file mode 100644
index 0000000..bcdceca
--- /dev/null
+++ b/packages/solid/ui/src/components/media-contacts.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card. */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaContactsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaContacts({ extras, labels }: MediaContactsProps) {
+  return (
+    <Stack gap="6" align="stretch">
+      <Stack gap="2" align="stretch">
+        <Text size="sm" weight="semibold">
+          {labels.list}
+        </Text>
+        <For each={extras.channels ?? []}>{(c, iOf) => { const i = iOf(); return (
+          <Button variant="outline" size="default" href={c.href} class="w-full gap-2" data-testid="media-channel">
+            <LucideIcon name={c.icon} size={16} />
+            {c.title}
+          </Button>
+        ); }}</For>
+      </Stack>
+      <Stack gap="2" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-4">
+        <Text size="sm" weight="semibold">
+          {labels.figures}
+        </Text>
+        <For each={extras.stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+          <>
+            {(i < 3) ? (
+              <Group gap="4" align="center" justify="between" data-testid="media-stat">
+                <Text size="sm" class="text-muted-foreground">
+                  {s.label}
+                </Text>
+                <Text size="sm" weight="semibold">
+                  {s.value}
+                </Text>
+              </Group>
+            ) : null}
+          </>
+        ); }}</For>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/media-figures.tsx b/packages/solid/ui/src/components/media-figures.tsx
new file mode 100644
index 0000000..db264a2
--- /dev/null
+++ b/packages/solid/ui/src/components/media-figures.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The figures of MediaList: four in two columns, centered, or three in a row. */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaFiguresProps = {
+  extras: MediaExtras;
+  mode?: "grid" | "row";
+};
+
+export function MediaFigures({ extras, mode = "grid" }: MediaFiguresProps) {
+  return (
+    <Box
+      class={
+        (mode as string) === "grid" ? "grid grid-cols-2 gap-6 text-center"
+        : "grid grid-cols-3 gap-6"
+      }
+    >
+      <For each={extras.stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+        <>
+          {(i < (((mode as string) === "grid") ? 4 : 3)) ? (
+            <Stack gap="0" align={(((mode as string) === "grid") ? "center" : "start")} data-testid="media-stat">
+              <Text size="3xl" weight="bold">
+                {s.value}
+              </Text>
+              <Text size="sm" class="text-muted-foreground">
+                {s.label}
+              </Text>
+            </Stack>
+          ) : null}
+        </>
+      ); }}</For>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/media-frame.assets.ts b/packages/solid/ui/src/components/media-frame.assets.ts
new file mode 100644
index 0000000..fe14339
--- /dev/null
+++ b/packages/solid/ui/src/components/media-frame.assets.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+// Data of MediaFrame: long values (pictures as data URIs) kept out of the component file.
+
+export const PLACEHOLDER: Record<string, string> = {
+  "light": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNlMmU4ZjAiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjOTRhM2I4IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+  "dark": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxZTI5M2IiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjNDc1NTY5IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+};
diff --git a/packages/solid/ui/src/components/media-frame.tsx b/packages/solid/ui/src/components/media-frame.tsx
new file mode 100644
index 0000000..388c6a4
--- /dev/null
+++ b/packages/solid/ui/src/components/media-frame.tsx
@@ -0,0 +1,62 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one
+ * of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral
+ * placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the
+ * placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the
+ * corners are the plain theme radius.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Image } from "../primitives/image/image";
+import { at, cn, variants } from "../utils";
+import { PLACEHOLDER } from "./media-frame.assets";
+
+/** MediaFrame: the classes of each value (shadcn/cva style). */
+export const mediaFrameVariants = variants({
+  base: "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border rounded",
+  variants: {
+    ratio: {
+      "16/9": "aspect-video",
+      "4/3": "aspect-4/3",
+      "1/1": "aspect-square",
+      "3/4": "aspect-3/4",
+      "21/9": "aspect-21/9",
+    },
+  },
+  defaultVariants: { ratio: "16/9" },
+});
+
+export type MediaFrameProps = {
+  alt: string;
+  src?: string;
+  darkSrc?: string;
+  ratio?: "16/9" | "4/3" | "1/1" | "3/4" | "21/9";
+  class?: string;
+};
+
+export function MediaFrame({ alt, src, darkSrc, ratio = "16/9", class: className }: MediaFrameProps) {
+  const lightSrc = src ?? at(PLACEHOLDER, "light");
+  const nightSrc = darkSrc ?? src ?? at(PLACEHOLDER, "dark");
+  return (
+    <Box
+      class={cn(mediaFrameVariants({ ratio: ratio }), className)}
+      data-slot="media-frame"
+      data-placeholder={(src ? "false" : "true")}
+    >
+      <Image
+        src={lightSrc}
+        alt={alt}
+        class="absolute inset-0 size-full object-cover dark:hidden"
+        data-theme-src="light"
+      />
+      <Image
+        src={nightSrc}
+        alt={alt}
+        class="absolute inset-0 hidden size-full object-cover dark:block"
+        data-theme-src="dark"
+      />
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/media-posts.tsx b/packages/solid/ui/src/components/media-posts.tsx
new file mode 100644
index 0000000..1c8cb57
--- /dev/null
+++ b/packages/solid/ui/src/components/media-posts.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The latest posts of MediaList as rows: a dot, the title, the date and reading time. */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { tpl } from "../utils";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaPostsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaPosts({ extras, labels }: MediaPostsProps) {
+  return (
+    <Stack gap="4" align="stretch">
+      <Text size="sm" weight="semibold">
+        {labels.list}
+      </Text>
+      <For each={extras.posts ?? []}>{(p, iOf) => { const i = iOf(); return (
+        <>
+          {(i < 3) ? (
+            <Group gap="4" align="start" data-testid="media-post">
+              <Inline class="mt-2 size-2 shrink-0 rounded-full bg-primary" />
+              <Stack gap="0">
+                <MenuEntry href={p.href} class="text-sm font-medium" size="sm">
+                  {p.title}
+                </MenuEntry>
+                <Text size="xs" class="text-muted-foreground">
+                  {tpl("{0} · {1}", p.date, tpl(labels.minutes, p.minutes))}
+                </Text>
+              </Stack>
+            </Group>
+          ) : null}
+        </>
+      ); }}</For>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/media-review.tsx b/packages/solid/ui/src/components/media-review.tsx
new file mode 100644
index 0000000..e442bd8
--- /dev/null
+++ b/packages/solid/ui/src/components/media-review.tsx
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author. */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Rating } from "../components/rating";
+import { tpl } from "../utils";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaReviewProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaReview({ extras, labels }: MediaReviewProps) {
+  return (
+    <>
+      <For each={extras.reviews ?? []}>{(r, iOf) => { const i = iOf(); return (
+        <>
+          {(i < 1) ? (
+            <Stack gap="4" align="stretch" class="rounded bg-muted p-6" data-testid="media-review">
+              <Group gap="4" align="center" justify="between" class="flex-wrap">
+                <Text size="sm" weight="medium">
+                  {labels.featured}
+                </Text>
+                <Rating value={r.rating} label={tpl(labels.rating, r.rating)} />
+              </Group>
+              <Text size="base">
+                {tpl("“{0}”", r.text)}
+              </Text>
+              <Text size="sm" class="text-muted-foreground">
+                {tpl("{0} · {1}", r.author, r.date)}
+              </Text>
+            </Stack>
+          ) : null}
+        </>
+      ); }}</For>
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/media-steps.tsx b/packages/solid/ui/src/components/media-steps.tsx
new file mode 100644
index 0000000..c848516
--- /dev/null
+++ b/packages/solid/ui/src/components/media-steps.tsx
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The steps of MediaList as numbered rows: the number, a glyph, the title and the text. */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { tpl } from "../utils";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaStepsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaSteps({ extras, labels }: MediaStepsProps) {
+  return (
+    <Stack gap="4" align="stretch">
+      <Text size="sm" weight="semibold">
+        {labels.list}
+      </Text>
+      <For each={extras.steps ?? []}>{(s, iOf) => { const i = iOf(); return (
+        <Group gap="4" align="start" data-testid="media-step">
+          <Text size="sm" weight="semibold" class="w-6 shrink-0 text-primary">
+            {tpl("0{0}", ((i + 1) == null ? undefined : String((i + 1))))}
+          </Text>
+          <Inline class="flex size-6 shrink-0 items-center justify-center text-primary">
+            <LucideIcon name={s.icon} size={16} />
+          </Inline>
+          <Stack gap="0">
+            <Text size="sm" weight="semibold">
+              {s.title}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {s.text}
+            </Text>
+          </Stack>
+        </Group>
+      ); }}</For>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/media-topics.tsx b/packages/solid/ui/src/components/media-topics.tsx
new file mode 100644
index 0000000..0475e90
--- /dev/null
+++ b/packages/solid/ui/src/components/media-topics.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/media-list-parts.ts
+/** The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow. */
+import { For, type JSX } from "solid-js";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { tpl } from "../utils";
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaTopicsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+
+export function MediaTopics({ extras, labels }: MediaTopicsProps) {
+  return (
+    <Stack gap="4" align="stretch">
+      <Text size="sm" weight="semibold">
+        {labels.list}
+      </Text>
+      <For each={extras.topics ?? []}>{(c, iOf) => { const i = iOf(); return (
+        <>
+          {(i < 5) ? (
+            <MenuEntry
+              href={c.href}
+              class="rounded bg-card inset-ring inset-ring-border flex w-full items-center gap-4 p-4"
+              variant="block"
+              testid="media-topic"
+              block={true}
+            >
+              <Inline class="flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground">
+                <LucideIcon name={c.icon} size={16} />
+              </Inline>
+              <Stack gap="0" class="min-w-0 flex-1">
+                <Text size="sm" weight="semibold">
+                  {c.name}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {tpl(labels.count, c.count)}
+                </Text>
+              </Stack>
+              <LucideIcon name="arrow-right" size={16} />
+            </MenuEntry>
+          ) : null}
+        </>
+      ); }}</For>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/member-row.tsx b/packages/solid/ui/src/components/member-row.tsx
new file mode 100644
index 0000000..82b4f86
--- /dev/null
+++ b/packages/solid/ui/src/components/member-row.tsx
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/people-parts.ts
+/**
+ * One member of TeamGrid beside a small portrait: the name, the role, then the department and the place
+ * (detailed, directory), the bio (detailed) and the skills (detailed, list).
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { at, cn } from "../utils";
+import type { Member } from "../blocks/team-grid.types";
+
+export type MemberRowProps = {
+  member: Member;
+  depts: Record<string, string>;
+  layout?: "cards" | "minimal" | "detailed" | "list" | "directory";
+};
+
+export function MemberRow({ member, depts, layout = "list" }: MemberRowProps) {
+  return (
+    <Group
+      gap="4"
+      align="start"
+      class={
+        (layout as string) === "detailed" ? "rounded bg-card inset-ring inset-ring-border flex-col p-6"
+        : (layout as string) === "directory" ? "rounded bg-card inset-ring inset-ring-border p-4"
+        : "border-b border-border pb-4"
+      }
+      data-testid="item"
+    >
+      <MediaFrame
+        alt={member.name}
+        ratio="1/1"
+        class={cn((((layout as string) === "detailed") ? "size-16" : "size-12"), "shrink-0")}
+      />
+      <Stack gap="2" class="min-w-0 flex-1">
+        <Stack gap="0">
+          <Text size="base" weight="semibold">
+            {member.name}
+          </Text>
+          <Text size="sm" class="text-muted-foreground">
+            {member.role}
+          </Text>
+        </Stack>
+        {((layout as string) !== "list") ? (
+          <Group gap="2" align="center" class="flex-wrap text-xs text-muted-foreground">
+            <Badge variant="outline" size="sm">
+              {at(depts, member.dept)}
+            </Badge>
+            <LucideIcon name="map-pin" size={16} />
+            <Inline>
+              {member.location}
+            </Inline>
+          </Group>
+        ) : null}
+        {((layout as string) === "detailed") ? (
+          <Text size="sm" class="text-muted-foreground">
+            {member.bio}
+          </Text>
+        ) : null}
+        {((layout as string) !== "directory") ? (
+          <Group gap="2" class="flex-wrap">
+            <For each={member.skills ?? []}>{(k) => (
+              <Badge variant="secondary" size="sm">
+                {k}
+              </Badge>
+            )}</For>
+          </Group>
+        ) : null}
+      </Stack>
+    </Group>
+  );
+}
diff --git a/packages/solid/ui/src/components/menu-entry.tsx b/packages/solid/ui/src/components/menu-entry.tsx
new file mode 100644
index 0000000..6f370fd
--- /dev/null
+++ b/packages/solid/ui/src/components/menu-entry.tsx
@@ -0,0 +1,57 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/**
+ * One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine
+ * routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { Link } from "../primitives/link/link";
+
+export type MenuEntryProps = {
+  href?: string;
+  current?: boolean;
+  variant?: "default" | "muted" | "block";
+  size?: "default" | "sm";
+  testid?: string;
+  block?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function MenuEntry({
+  href,
+  current = false,
+  variant = "default",
+  size = "default",
+  testid,
+  block = false,
+  class: className,
+  children,
+}: MenuEntryProps) {
+  return (
+    <>
+      {href ? (
+        <Link
+          href={href}
+          variant={variant}
+          size={size}
+          aria-current={(current ? "page" : undefined)}
+          class={className}
+          data-testid={testid}
+        >
+          {children}
+        </Link>
+      ) : block ? (
+        <Box class={className} aria-current={(current ? "page" : undefined)} data-testid={testid}>
+          {children}
+        </Box>
+      ) : (
+        <Inline class={className} aria-current={(current ? "page" : undefined)} data-testid={testid}>
+          {children}
+        </Inline>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/meter-row.tsx b/packages/solid/ui/src/components/meter-row.tsx
new file mode 100644
index 0000000..ff65fc4
--- /dev/null
+++ b/packages/solid/ui/src/components/meter-row.tsx
@@ -0,0 +1,67 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With
+ * `href` the whole row is a link.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Progress } from "../primitives/form/progress";
+import { Link } from "../primitives/link/link";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type MeterRowProps = {
+  label: string;
+  value: number;
+  caption: string;
+  hint?: string;
+  href?: string;
+  class?: string;
+};
+
+export function MeterRow({ label, value, caption, hint, href, class: className }: MeterRowProps) {
+  return (
+    <Box class={cn("min-w-0", className)} data-slot="meter-row">
+      {href ? (
+        <Link
+          href={href}
+          variant="block"
+          class="flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted"
+        >
+          <Box class="flex items-baseline justify-between gap-4">
+            <Text class="m-0 min-w-0 truncate text-sm font-bold text-foreground">
+              {label}
+            </Text>
+            <Text class="m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground">
+              {caption}
+            </Text>
+          </Box>
+          <Progress value={(value == null ? undefined : String(value))} max="100" aria-label={label} />
+          {hint ? (
+            <Text class="m-0 text-xs font-medium text-muted-foreground">
+              {hint}
+            </Text>
+          ) : null}
+        </Link>
+      ) : (
+        <Box class="flex min-w-0 flex-col gap-2 p-2">
+          <Box class="flex items-baseline justify-between gap-4">
+            <Text class="m-0 min-w-0 truncate text-sm font-bold text-foreground">
+              {label}
+            </Text>
+            <Text class="m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground">
+              {caption}
+            </Text>
+          </Box>
+          <Progress value={(value == null ? undefined : String(value))} max="100" aria-label={label} />
+          {hint ? (
+            <Text class="m-0 text-xs font-medium text-muted-foreground">
+              {hint}
+            </Text>
+          ) : null}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/nav-actions.tsx b/packages/solid/ui/src/components/nav-actions.tsx
new file mode 100644
index 0000000..c368c01
--- /dev/null
+++ b/packages/solid/ui/src/components/nav-actions.tsx
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/**
+ * The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the
+ * press). No wrapper: they sit in the row of the bar.
+ */
+import { type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+
+export type NavActionsProps = {
+  login?: string;
+  loginHref?: string;
+  cta?: string;
+  ctaHref?: string;
+  actions?: "none" | "cta";
+  tone?: "default" | "inverse";
+  themeLabel?: string;
+  onTheme?: () => void;
+};
+
+export function NavActions({
+  login,
+  loginHref,
+  cta,
+  ctaHref,
+  actions = "cta",
+  tone = "default",
+  themeLabel,
+  onTheme,
+}: NavActionsProps) {
+  return (
+    <>
+      {login ? (
+        <Button
+          variant="ghost"
+          size="sm"
+          href={loginHref}
+          class={(((tone as string) === "inverse") ? "text-background hover:bg-background/10" : "")}
+          data-testid="nav-login"
+        >
+          {login}
+        </Button>
+      ) : null}
+      {(((actions as string) === "cta") && cta) ? (
+        <Button
+          variant={(((tone as string) === "inverse") ? "secondary" : "default")}
+          size="sm"
+          href={ctaHref}
+          data-testid="header-cta"
+        >
+          {cta}
+        </Button>
+      ) : null}
+      {themeLabel ? (
+        <Button variant="outline" size="sm" data-testid="theme-toggle" onClick={() => onTheme?.()}>
+          {themeLabel}
+        </Button>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/nav-bar-menu.tsx b/packages/solid/ui/src/components/nav-bar-menu.tsx
new file mode 100644
index 0000000..a829930
--- /dev/null
+++ b/packages/solid/ui/src/components/nav-bar-menu.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/** The links of NavBar in a nav landmark; left out when there are no links. */
+import { type JSX } from "solid-js";
+import { NavBlock } from "../components/nav-block";
+import { NavLinks } from "../components/nav-links";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type NavBarMenuProps = {
+  label: string;
+  links: NavLink[];
+  current?: string;
+  landmarkLabel?: string;
+};
+
+export function NavBarMenu({ label, links, current = "", landmarkLabel }: NavBarMenuProps) {
+  return (
+    <>
+      {((links?.length ?? 0) > 0) ? (
+        <NavBlock
+          label={label}
+          class={"order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0"}
+          testid="site-nav"
+          landmarkLabel={landmarkLabel}
+        >
+          <NavLinks links={links} current={current} />
+        </NavBlock>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/nav-block.tsx b/packages/solid/ui/src/components/nav-block.tsx
new file mode 100644
index 0000000..b10c1e0
--- /dev/null
+++ b/packages/solid/ui/src/components/nav-block.tsx
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/landmarks.ts
+/** A navigation region in its own file: Block tag nav named by `label`. */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { cn } from "../utils";
+
+export type NavBlockProps = {
+  label?: string;
+  testid?: string;
+  landmarkLabel?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function NavBlock({ label, testid, landmarkLabel, class: className, children }: NavBlockProps) {
+  return (
+    <Block tag="nav" class={cn(className)} aria-label={(landmarkLabel ?? label)} data-testid={testid}>
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/nav-item-row.tsx b/packages/solid/ui/src/components/nav-item-row.tsx
new file mode 100644
index 0000000..dad43d4
--- /dev/null
+++ b/packages/solid/ui/src/components/nav-item-row.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the
+ * right.
+ */
+import { type JSX } from "solid-js";
+import { Inline } from "../primitives/inline/inline";
+
+export type NavItemRowProps = {
+  inner?: string;
+  reserveRight?: boolean;
+  children?: JSX.Element;
+  icon?: JSX.Element;
+  right?: JSX.Element;
+};
+
+export function NavItemRow({ inner, reserveRight = false, children, icon, right }: NavItemRowProps) {
+  return (
+    <Inline class={inner} data-slot="nav-item-content">
+      <Inline
+        class={"flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center"}
+        data-slot="nav-item-left"
+      >
+        {icon}
+        <Inline class="min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden" data-slot="nav-item-label">
+          {children}
+        </Inline>
+      </Inline>
+      {right ? (
+        <Inline class="flex items-center gap-2 in-data-[nav=collapsed]:hidden" data-slot="nav-item-right">
+          {right}
+        </Inline>
+      ) : reserveRight ? (
+        <Inline class="size-5 shrink-0 in-data-[nav=collapsed]:hidden" data-slot="nav-item-right" />
+      ) : null}
+    </Inline>
+  );
+}
diff --git a/packages/solid/ui/src/components/nav-item.tsx b/packages/solid/ui/src/components/nav-item.tsx
new file mode 100644
index 0000000..c5279ba
--- /dev/null
+++ b/packages/solid/ui/src/components/nav-item.tsx
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a
+ * button, otherwise a static box.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { LinkPlain } from "../primitives/link-plain/link-plain";
+import { NavItemRow } from "../components/nav-item-row";
+import { cn, variants } from "../utils";
+
+/** NavItem: the classes of each value (shadcn/cva style). */
+export const navItemVariants = variants({
+  base: "flex w-full items-center p-2 rounded",
+  variants: {
+    level: {
+      "1": "",
+      "2": "",
+      "3": "pr-2 pl-12",
+      "4": "pr-2 pl-20",
+    },
+    state: {
+      default: "",
+      selected: "",
+    },
+  },
+  defaultVariants: { level: "1", state: "default" },
+});
+
+/** NavItem: the classes of each value (shadcn/cva style). */
+export const navItemContentVariants = variants({
+  base:
+    "flex h-8 min-w-0 flex-1 items-center justify-between px-4 py-2 text-xs font-bold text-muted-foreground " +
+    "inset-ring inset-ring-transparent rounded",
+  variants: {
+    level: {
+      "1": "",
+      "2": "",
+      "3": "px-2",
+      "4": "px-2",
+    },
+    state: {
+      default: "",
+      selected: "bg-background text-foreground inset-ring-border",
+    },
+  },
+  defaultVariants: { level: "1", state: "default" },
+});
+
+export type NavItemProps = {
+  selected?: boolean;
+  level?: "1" | "2" | "3" | "4";
+  href?: string;
+  interactive?: boolean;
+  reserveRight?: boolean;
+  contentClass?: string;
+  class?: string;
+  children?: JSX.Element;
+  icon?: JSX.Element;
+  right?: JSX.Element;
+  onClick?: () => void;
+};
+
+export function NavItem({
+  selected = false,
+  level,
+  href,
+  interactive = false,
+  reserveRight = false,
+  contentClass,
+  class: className,
+  children,
+  icon,
+  right,
+  onClick,
+}: NavItemProps) {
+  const state = selected ? "selected" : "default";
+  const outer =
+    cn(
+      navItemVariants({ level: level, state: state }),
+      "group in-data-[nav=collapsed]:justify-center",
+      className,
+    );
+  const inner =
+    cn(
+      navItemContentVariants({ level: level, state: state }),
+      (!selected && "group-hover:bg-muted"),
+      "in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0",
+      contentClass,
+    );
+  return (
+    <>
+      {href ? (
+        <LinkPlain
+          href={href}
+          class={outer}
+          aria-current={(selected ? "page" : undefined)}
+          data-slot="nav-item"
+          data-state={state}
+          onClick={() => onClick?.()}
+        >
+          <NavItemRow inner={inner} reserveRight={reserveRight} icon={icon} right={right} children={children} />
+        </LinkPlain>
+      ) : interactive ? (
+        <ButtonPlain
+          type="button"
+          class={cn(outer, "text-left")}
+          aria-current={(selected ? "page" : undefined)}
+          data-slot="nav-item"
+          data-state={state}
+          onClick={() => onClick?.()}
+        >
+          <NavItemRow inner={inner} reserveRight={reserveRight} icon={icon} right={right} children={children} />
+        </ButtonPlain>
+      ) : (
+        <Box class={outer} aria-current={(selected ? "page" : undefined)} data-slot="nav-item" data-state={state}>
+          <NavItemRow inner={inner} reserveRight={reserveRight} icon={icon} right={right} children={children} />
+        </Box>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/nav-links.tsx b/packages/solid/ui/src/components/nav-links.tsx
new file mode 100644
index 0000000..4f33a4c
--- /dev/null
+++ b/packages/solid/ui/src/components/nav-links.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/**
+ * The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half
+ * of the list.
+ */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { MenuEntry } from "../components/menu-entry";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type NavLinksProps = {
+  links: NavLink[];
+  current?: string;
+  side?: "all" | "left" | "right";
+};
+
+export function NavLinks({ links, current = "", side = "all" }: NavLinksProps) {
+  const count = links?.length ?? 0;
+  return (
+    <>
+      {((links?.length ?? 0) > 0) ? (
+        <Group gap="4" align="center" class="flex-wrap">
+          <For each={links ?? []}>{(l, iOf) => { const i = iOf(); return (
+            <>
+              {(((side as string) === "all") || (((i * 2) < count) === ((side as string) === "left"))) ? (
+                <MenuEntry href={l.href} class="text-sm" current={(l.id === current)} testid="nav-link">
+                  {l.name}
+                </MenuEntry>
+              ) : null}
+            </>
+          ); }}</For>
+        </Group>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/notice.tsx b/packages/solid/ui/src/components/notice.tsx
new file mode 100644
index 0000000..379630f
--- /dev/null
+++ b/packages/solid/ui/src/components/notice.tsx
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text
+ * renders nothing visible.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+
+export type NoticeProps = {
+  text: string;
+};
+
+export function Notice({ text }: NoticeProps) {
+  return (
+    <Box class="contents" role="status" data-testid="notice">
+      {text ? (
+        <Text
+          class={"fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold " +
+            "text-background shadow-lg"}
+        >
+          <LucideIcon name="circle-check" size={16} />
+          {text}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/number-field.tsx b/packages/solid/ui/src/components/number-field.tsx
new file mode 100644
index 0000000..d5ce55d
--- /dev/null
+++ b/packages/solid/ui/src/components/number-field.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/number-field.ts
+/**
+ * A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its
+ * ring). Static markup: the buttons carry no logic; the page wires them.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Input } from "../primitives/input/input";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+
+export type NumberFieldProps = {
+  value?: string;
+  name?: string;
+  min?: string;
+  label: string;
+  decrease: string;
+  increase: string;
+};
+
+export function NumberField({
+  value = "",
+  name = "",
+  min = "",
+  label,
+  decrease,
+  increase,
+}: NumberFieldProps) {
+  return (
+    <Box
+      class="inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input"
+      data-slot="number-field"
+    >
+      <Button variant="ghost" size="sm" layout="icon" type="button" aria-label={decrease} data-testid="decrease">
+        <LucideIcon name="minus" size={16} />
+      </Button>
+      <Input
+        type="number"
+        name={name}
+        value={value}
+        min={min}
+        aria-label={label}
+        size="sm"
+        class="number-bare w-8 bg-transparent px-0 text-center inset-ring-0"
+      />
+      <Button variant="ghost" size="sm" layout="icon" type="button" aria-label={increase} data-testid="increase">
+        <LucideIcon name="plus" size={16} />
+      </Button>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/offer-media.tsx b/packages/solid/ui/src/components/offer-media.tsx
new file mode 100644
index 0000000..fdc7d22
--- /dev/null
+++ b/packages/solid/ui/src/components/offer-media.tsx
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shop-parts.ts
+/**
+ * The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats
+ * over the picture).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import type { OfferCard } from "../blocks/store-hero.types";
+
+export type OfferMediaProps = {
+  alt: string;
+  card: OfferCard;
+};
+
+export function OfferMedia({ alt, card }: OfferMediaProps) {
+  return (
+    <Box class="relative" data-testid="hero-media">
+      <MediaFrame alt={alt} ratio="4/3" />
+      <Group
+        gap="4"
+        align="start"
+        class="absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg"
+        data-testid="offer-card"
+      >
+        <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+          <LucideIcon name={card.icon} size={20} />
+        </Box>
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {card.title}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {card.text}
+          </Text>
+        </Stack>
+      </Group>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/order-rows.tsx b/packages/solid/ui/src/components/order-rows.tsx
new file mode 100644
index 0000000..c740147
--- /dev/null
+++ b/packages/solid/ui/src/components/order-rows.tsx
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/orders.ts
+/** The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill. */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { Pill } from "../components/pill";
+import { at, cn, fmtMoney, tpl } from "../utils";
+import type { Order, OrderLabels } from "../blocks/order-table.types";
+
+export type OrderRowsProps = {
+  orders: Order[];
+  statuses: Record<string, string>;
+  labels: OrderLabels;
+  density?: "default" | "compact";
+};
+
+export function OrderRows({ orders, statuses, labels, density = "default" }: OrderRowsProps) {
+  return (
+    <Box class="w-full overflow-x-auto">
+      <Table class="w-full text-left text-sm" data-testid="order-table">
+        <TableCaption class="sr-only">
+          {labels.caption}
+        </TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell scope="col" class="py-2">
+              {labels.number}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-2">
+              {labels.date}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-2">
+              {labels.items}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-2">
+              {labels.total}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-2">
+              {labels.status}
+            </TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <For each={orders ?? []}>{(o) => (
+            <TableRow class="border-t border-border" data-testid="item">
+              <TableCell class={cn("font-semibold", (((density as string) === "compact") ? "py-2" : "py-4"))}>
+                {o.number}
+              </TableCell>
+              <TableCell>
+                {o.date}
+              </TableCell>
+              <TableCell>
+                {tpl(labels.itemsCount, o.items)}
+              </TableCell>
+              <TableCell>
+                {fmtMoney(o.total, o.currency)}
+              </TableCell>
+              <TableCell>
+                <Pill
+                  tone={
+                    o.status === "paid" ? "green"
+                    : o.status === "shipped" ? "blue"
+                    : o.status === "pending" ? "amber"
+                    : "gray"
+                  }
+                >
+                  {at(statuses, o.status)}
+                </Pill>
+              </TableCell>
+            </TableRow>
+          )}</For>
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/over-media.tsx b/packages/solid/ui/src/components/over-media.tsx
new file mode 100644
index 0000000..1f2a564
--- /dev/null
+++ b/packages/solid/ui/src/components/over-media.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/**
+ * A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing.
+ * It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the
+ * header stays the root of the block (rule 01).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { MediaFrame } from "../components/media-frame";
+
+export type OverMediaProps = {
+  on?: boolean;
+  alt: string;
+};
+
+export function OverMedia({ on = false, alt }: OverMediaProps) {
+  return (
+    <>
+      {on ? (
+        <Box class="pointer-events-none absolute inset-0 -z-10" data-testid="over">
+          <MediaFrame alt={alt} ratio="21/9" class="size-full rounded-none opacity-40" />
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/page-aside.tsx b/packages/solid/ui/src/components/page-aside.tsx
new file mode 100644
index 0000000..acd9620
--- /dev/null
+++ b/packages/solid/ui/src/components/page-aside.tsx
@@ -0,0 +1,77 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/page-trail-parts.ts
+/**
+ * The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key
+ * facts as cards in two columns.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { PageExtras } from "../blocks/page-trail.types";
+
+export type PageAsideProps = {
+  extras: PageExtras;
+  mode?: "none" | "figure" | "note" | "facts";
+};
+
+export function PageAside({ extras, mode = "figure" }: PageAsideProps) {
+  return (
+    <>
+      {((mode as string) === "figure") ? (
+        <Stack gap="0" align="end" class="text-end" data-testid="page-figure">
+          <Text size="4xl" weight="bold">
+            {extras.value}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {extras.caption}
+          </Text>
+        </Stack>
+      ) : null}
+      {((mode as string) === "note") ? (
+        <Group
+          gap="4"
+          align="start"
+          class="rounded bg-card inset-ring inset-ring-border max-w-xs p-4"
+          data-testid="page-note"
+        >
+          <LucideIcon name={extras.icon} size={20} />
+          <Stack gap="0">
+            <Text size="lg" weight="bold">
+              {extras.value}
+            </Text>
+            <Text size="sm" weight="medium">
+              {extras.caption}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {extras.note}
+            </Text>
+          </Stack>
+        </Group>
+      ) : null}
+      {((mode as string) === "facts") ? (
+        <Box class="grid grid-cols-2 gap-4">
+          <For each={extras.facts ?? []}>{(s, iOf) => { const i = iOf(); return (
+            <>
+              {(i < 4) ? (
+                <Stack gap="0" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="page-fact">
+                  <Text size="lg" weight="bold">
+                    {s.value}
+                  </Text>
+                  <Text size="xs" weight="medium">
+                    {s.label}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {s.hint}
+                  </Text>
+                </Stack>
+              ) : null}
+            </>
+          ); }}</For>
+        </Box>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/page-crumbs.tsx b/packages/solid/ui/src/components/page-crumbs.tsx
new file mode 100644
index 0000000..8fb1c77
--- /dev/null
+++ b/packages/solid/ui/src/components/page-crumbs.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/page-trail-parts.ts
+/**
+ * The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the
+ * last entry is the current page and is not a link.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Inline } from "../primitives/inline/inline";
+import { Link } from "../primitives/link/link";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type PageCrumbsProps = {
+  label: string;
+  crumbs: NavLink[];
+  landmarkLabel?: string;
+};
+
+export function PageCrumbs({ label, crumbs, landmarkLabel }: PageCrumbsProps) {
+  const last = (crumbs?.length ?? 0) - 1;
+  return (
+    <Block tag="nav" aria-label={(landmarkLabel ?? label)} data-testid="crumbs">
+      <List class="m-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground">
+        <For each={crumbs ?? []}>{(c, iOf) => { const i = iOf(); return (
+          <ListItem class="flex items-center gap-2">
+            {(i < last) ? (
+              <>
+                {c.href ? (
+                  <Link href={c.href} variant="muted" size="sm" data-testid="crumb">
+                    {c.name}
+                  </Link>
+                ) : (
+                  <Inline data-testid="crumb">
+                    {c.name}
+                  </Inline>
+                )}
+                <LucideIcon name="chevron-right" size={16} />
+              </>
+            ) : (
+              <Inline class="font-medium text-foreground" aria-current="page">
+                {c.name}
+              </Inline>
+            )}
+          </ListItem>
+        ); }}</For>
+      </List>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/page-header.tsx b/packages/solid/ui/src/components/page-header.tsx
new file mode 100644
index 0000000..47e1dee
--- /dev/null
+++ b/packages/solid/ui/src/components/page-header.tsx
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** The page heading: a title, a one-line summary and the action buttons on the right (below on phones). */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+
+export type PageHeaderProps = {
+  title: string;
+  summary?: string;
+  id?: string;
+  actions?: JSX.Element;
+};
+
+export function PageHeader({ title, summary, id, actions }: PageHeaderProps) {
+  return (
+    <Box class="flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between">
+      <Box class="flex min-w-0 flex-col gap-2">
+        <Title as={1} size="xl" weight="bold" class="m-0" id={id}>
+          {title}
+        </Title>
+        {summary ? (
+          <Text class="m-0 text-xs font-medium text-muted-foreground">
+            {summary}
+          </Text>
+        ) : null}
+      </Box>
+      {actions ? (
+        <Box class="flex flex-wrap items-center gap-2">
+          {actions}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/pager.tsx b/packages/solid/ui/src/components/pager.tsx
new file mode 100644
index 0000000..d08b727
--- /dev/null
+++ b/packages/solid/ui/src/components/pager.tsx
@@ -0,0 +1,118 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4
+ * 5 6 … 21), with `moreLabel` a "Load more" button. The current page is a plain element marked
+ * aria-current="page"; the others are buttons. All text comes in through props.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { pageWindow, tpl } from "../utils";
+
+export type PagerProps = {
+  page: number;
+  pages: number;
+  summary: string;
+  previousLabel: string;
+  nextLabel: string;
+  numbered?: boolean;
+  pageLabel?: string;
+  moreLabel?: string;
+  onPage?: (page: number) => void;
+  onMore?: () => void;
+};
+
+export function Pager({
+  page,
+  pages,
+  summary,
+  previousLabel,
+  nextLabel,
+  numbered = false,
+  pageLabel,
+  moreLabel,
+  onPage,
+  onMore,
+}: PagerProps) {
+  const numbers = pageWindow(page, pages);
+  return (
+    <Box
+      class={"flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground"}
+      data-testid="pager"
+    >
+      <Inline class="flex flex-wrap items-center gap-4">
+        <Inline>
+          {summary}
+        </Inline>
+      </Inline>
+      <Inline class="flex flex-wrap items-center gap-2">
+        {(moreLabel && (page < pages)) ? (
+          <Button variant="outline" size="sm" type="button" data-testid="pager-more" onClick={() => onMore?.()}>
+            {moreLabel}
+          </Button>
+        ) : null}
+        <Button
+          variant="outline"
+          size="sm"
+          layout="icon"
+          aria-label={previousLabel}
+          disabled={(page <= 1)}
+          onClick={() => onPage?.((page - 1))}
+        >
+          <LucideIcon name="chevron-left" size={16} />
+        </Button>
+        {numbered ? (
+          <>
+            <For each={numbers ?? []}>{(n, iOf) => { const i = iOf(); return (
+              <>
+                {(n === null) ? (
+                  <Inline class="w-8 text-center">
+                    {"…"}
+                  </Inline>
+                ) : (n === page) ? (
+                  <Inline
+                    class={"flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background"}
+                    aria-current="page"
+                    data-testid="pager-current"
+                  >
+                    {n}
+                  </Inline>
+                ) : (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    layout="icon"
+                    type="button"
+                    aria-label={tpl(pageLabel, n)}
+                    onClick={() => onPage?.(n)}
+                  >
+                    {n}
+                  </Button>
+                )}
+              </>
+            ); }}</For>
+          </>
+        ) : (
+          <Inline class="min-w-12 text-center font-bold text-foreground">
+            {page}
+            {" / "}
+            {pages}
+          </Inline>
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          layout="icon"
+          aria-label={nextLabel}
+          disabled={(page >= pages)}
+          onClick={() => onPage?.((page + 1))}
+        >
+          <LucideIcon name="chevron-right" size={16} />
+        </Button>
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/panel.tsx b/packages/solid/ui/src/components/panel.tsx
new file mode 100644
index 0000000..bc99b76
--- /dev/null
+++ b/packages/solid/ui/src/components/panel.tsx
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description
+ * and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the
+ * Block of its block (rule 01).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { cn, tpl } from "../utils";
+
+export type PanelProps = {
+  title?: string;
+  description?: string;
+  id?: string;
+  class?: string;
+  children?: JSX.Element;
+  actions?: JSX.Element;
+};
+
+export function Panel({ title, description, id, class: className, children, actions }: PanelProps) {
+  return (
+    <Box
+      class={cn(
+        "flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border",
+        className
+      )}
+      role="group"
+      aria-labelledby={((title && id) ? tpl("{0}-t", id) : undefined)}
+    >
+      {(title || actions) ? (
+        <Box class="flex items-start justify-between gap-4">
+          <Box class="flex min-w-0 flex-col gap-2">
+            {title ? (
+              <Title as={2} size="base" class="m-0 text-foreground" id={(id ? tpl("{0}-t", id) : undefined)}>
+                {title}
+              </Title>
+            ) : null}
+            {description ? (
+              <Text class="m-0 text-xs font-medium text-muted-foreground">
+                {description}
+              </Text>
+            ) : null}
+          </Box>
+          {actions}
+        </Box>
+      ) : null}
+      {children}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/payment-options.tsx b/packages/solid/ui/src/components/payment-options.tsx
new file mode 100644
index 0000000..9d77336
--- /dev/null
+++ b/packages/solid/ui/src/components/payment-options.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/** Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup. */
+import { For, type JSX } from "solid-js";
+import { Grid } from "../primitives/grid/grid";
+import { Inline } from "../primitives/inline/inline";
+import { Label } from "../primitives/label/label";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Radio } from "../primitives/radio/radio";
+import type { Payment } from "./payment-options.types";
+
+export type PaymentOptionsProps = {
+  payments: Payment[];
+  name: string;
+  checked?: string;
+};
+
+export function PaymentOptions({ payments, name, checked = "" }: PaymentOptionsProps) {
+  return (
+    <Grid cols="1-2" class="gap-4" data-testid="payments">
+      <For each={payments ?? []}>{(p) => (
+        <Label
+          class={"flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground"}
+          data-testid="payment"
+        >
+          <Radio name={name} value={p.id} checked={(p.id === checked)} />
+          <LucideIcon name={p.icon} size={20} class="shrink-0" />
+          <Inline class="flex flex-col items-start justify-start gap-0">
+            <Inline class="text-sm font-semibold">
+              {p.title}
+            </Inline>
+            <Inline class="text-xs text-muted-foreground">
+              {p.text}
+            </Inline>
+          </Inline>
+        </Label>
+      )}</For>
+    </Grid>
+  );
+}
diff --git a/packages/solid/ui/src/components/payment-options.types.ts b/packages/solid/ui/src/components/payment-options.types.ts
new file mode 100644
index 0000000..a38ead1
--- /dev/null
+++ b/packages/solid/ui/src/components/payment-options.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Payment = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/solid/ui/src/components/pill.tsx b/packages/solid/ui/src/components/pill.tsx
new file mode 100644
index 0000000..78a27e0
--- /dev/null
+++ b/packages/solid/ui/src/components/pill.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** A status pill: a tinted label with an icon (published, draft, role, comment state). */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { at, cn } from "../utils";
+
+const PILL: Record<string, string> = {
+  "gray": "bg-muted text-muted-foreground inset-ring-border",
+  "blue": "bg-blue-50 text-blue-700 inset-ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:inset-ring-blue-900",
+  "amber": "bg-amber-50 text-amber-700 inset-ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:inset-ring-amber-900",
+  "green": "bg-green-50 text-green-700 inset-ring-green-200 dark:bg-green-950 dark:text-green-300 dark:inset-ring-green-900",
+  "red": "bg-red-50 text-red-700 inset-ring-red-200 dark:bg-red-950 dark:text-red-300 dark:inset-ring-red-900",
+  "violet": "bg-violet-50 text-violet-700 inset-ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:inset-ring-violet-900",
+  "pink": "bg-pink-50 text-pink-700 inset-ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:inset-ring-pink-900",
+  "orange": "bg-orange-50 text-orange-700 inset-ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:inset-ring-orange-900",
+  "cyan": "bg-cyan-50 text-cyan-700 inset-ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:inset-ring-cyan-900",
+};
+
+export type PillProps = {
+  tone?: "gray" | "blue" | "amber" | "green" | "red" | "violet" | "pink" | "orange" | "cyan";
+  icon?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function Pill({ tone = "gray", icon, class: className, children }: PillProps) {
+  return (
+    <Box class="contents">
+      <Inline
+        class={cn(
+          "inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring",
+          at(PILL, tone),
+          className
+        )}
+        data-slot="pill"
+      >
+        {icon ? (
+          <LucideIcon name={icon} size={12} />
+        ) : null}
+        {children}
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/post-actions.tsx b/packages/solid/ui/src/components/post-actions.tsx
new file mode 100644
index 0000000..7caef87
--- /dev/null
+++ b/packages/solid/ui/src/components/post-actions.tsx
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/**
+ * The calls to action of a post header: share and save side by side, one wide read button, or a wide read button
+ * with share and save as icons.
+ */
+import { type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostActionsProps = {
+  labels: PostSplitLabels;
+  mode?: "pair" | "wide" | "icons";
+};
+
+export function PostActions({ labels, mode = "pair" }: PostActionsProps) {
+  return (
+    <>
+      {((mode as string) === "pair") ? (
+        <Group gap="2" class="flex-wrap">
+          <Button variant="default" size="default" class="gap-2" data-testid="action-primary">
+            <LucideIcon name="share-2" size={16} />
+            {labels.share}
+          </Button>
+          <Button variant="outline" size="default" class="gap-2" data-testid="post-save">
+            <LucideIcon name="bookmark" size={16} />
+            {labels.save}
+          </Button>
+        </Group>
+      ) : (
+        <Group gap="2">
+          <Button variant="default" size="default" class="gap-2 flex-1" data-testid="action-primary">
+            <LucideIcon name="book-open" size={16} />
+            {labels.read}
+          </Button>
+          {((mode as string) === "icons") ? (
+            <>
+              <Button variant="outline" size="default" layout="icon" aria-label={labels.share} data-testid="post-share">
+                <LucideIcon name="share-2" size={16} />
+              </Button>
+              <Button variant="outline" size="default" layout="icon" aria-label={labels.save} data-testid="post-save">
+                <LucideIcon name="bookmark" size={16} />
+              </Button>
+            </>
+          ) : null}
+        </Group>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/post-author.tsx b/packages/solid/ui/src/components/post-author.tsx
new file mode 100644
index 0000000..f541e92
--- /dev/null
+++ b/packages/solid/ui/src/components/post-author.tsx
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/**
+ * The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line,
+ * a card, or a card with the bio.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { cn } from "../utils";
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostAuthorProps = {
+  post: Post;
+  extras: PostExtras;
+  labels: PostSplitLabels;
+  mode?: "line" | "card" | "bio";
+  share?: boolean;
+  class?: string;
+};
+
+export function PostAuthor({
+  post,
+  extras,
+  labels,
+  mode = "line",
+  share = false,
+  class: className,
+}: PostAuthorProps) {
+  return (
+    <Stack
+      gap="4"
+      align="stretch"
+      class={cn(
+        (((mode as string) === "line") ? "" : "rounded bg-card inset-ring inset-ring-border p-4"),
+        className
+      )}
+      data-testid="post-author"
+    >
+      <Group gap="4" align="center">
+        <MediaFrame alt={post.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+        <Stack gap="0" align="start" class="min-w-0 flex-1 text-start">
+          <Text size="sm" weight="semibold">
+            {post.author}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {extras.role}
+          </Text>
+        </Stack>
+        {share ? (
+          <Group gap="2">
+            <Button variant="ghost" size="default" class="gap-2" data-testid="post-share">
+              <LucideIcon name="share-2" size={16} />
+              {labels.share}
+            </Button>
+            <Button variant="ghost" size="default" class="gap-2" data-testid="post-save">
+              <LucideIcon name="bookmark" size={16} />
+              {labels.save}
+            </Button>
+          </Group>
+        ) : (
+          <Box class="text-muted-foreground">
+            <Group gap="2" align="center">
+              <LucideIcon name="calendar" size={16} />
+              <Text size="sm">
+                {post.date}
+              </Text>
+            </Group>
+          </Box>
+        )}
+      </Group>
+      {((mode as string) === "bio") ? (
+        <Text size="sm" class="text-muted-foreground">
+          {extras.bio}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/post-feature.tsx b/packages/solid/ui/src/components/post-feature.tsx
new file mode 100644
index 0000000..429b2c5
--- /dev/null
+++ b/packages/solid/ui/src/components/post-feature.tsx
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-showcase-parts.ts
+/**
+ * The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading
+ * time, and a wide read button.
+ */
+import { type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { tpl } from "../utils";
+import type { Post, PostLabels } from "../blocks/post-card.types";
+
+export type PostFeatureProps = {
+  p: Post;
+  labels: PostLabels;
+};
+
+export function PostFeature({ p, labels }: PostFeatureProps) {
+  return (
+    <Stack gap="4" align="stretch" class="border-t border-border pt-6" data-testid="post-feature">
+      <Badge variant="secondary" size="sm" class="w-fit">
+        {p.category}
+      </Badge>
+      <Title as={3} size="xl" weight="semibold">
+        {p.title}
+      </Title>
+      <Text size="sm" class="text-muted-foreground">
+        {p.excerpt}
+      </Text>
+      <Group gap="4" align="center">
+        <MediaFrame alt={p.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {p.author}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {tpl("{0} · {1}", p.date, tpl(labels.minutes, p.minutes))}
+          </Text>
+        </Stack>
+      </Group>
+      <Button variant="default" size="default" href={p.href} class="w-full gap-2" data-testid="action-primary">
+        {labels.read}
+        <LucideIcon name="arrow-right" size={16} />
+      </Button>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/post-mini-card.tsx b/packages/solid/ui/src/components/post-mini-card.tsx
new file mode 100644
index 0000000..015baa0
--- /dev/null
+++ b/packages/solid/ui/src/components/post-mini-card.tsx
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-showcase-parts.ts
+/** A small post card of PostShowcase: the picture, the category, the title and the author with the reading time. */
+import { type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { tpl } from "../utils";
+import type { Post, PostLabels } from "../blocks/post-card.types";
+
+export type PostMiniCardProps = {
+  p: Post;
+  labels: PostLabels;
+};
+
+export function PostMiniCard({ p, labels }: PostMiniCardProps) {
+  return (
+    <Stack gap="2" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-2" data-testid="post-mini">
+      <MediaFrame alt={p.title} />
+      <Stack gap="2" align="start" class="p-2">
+        <Badge variant="secondary" size="sm">
+          {p.category}
+        </Badge>
+        <Title as={3} size="sm" weight="semibold">
+          {p.title}
+        </Title>
+        <Text size="xs" class="text-muted-foreground">
+          {tpl("{0} · {1}", p.author, tpl(labels.minutes, p.minutes))}
+        </Text>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/post-outline.tsx b/packages/solid/ui/src/components/post-outline.tsx
new file mode 100644
index 0000000..21e84fa
--- /dev/null
+++ b/packages/solid/ui/src/components/post-outline.tsx
@@ -0,0 +1,62 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/** The facts of a post in a column (author, date, minutes, views), then the related reading as links. */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { tpl } from "../utils";
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostOutlineProps = {
+  post: Post;
+  extras: PostExtras;
+  labels: PostSplitLabels;
+};
+
+export function PostOutline({ post, extras, labels }: PostOutlineProps) {
+  return (
+    <Stack gap="6" align="stretch" data-testid="post-outline">
+      <Stack gap="2" align="start" class="text-muted-foreground">
+        <Group gap="2" align="center">
+          <LucideIcon name="user" size={16} />
+          <Text size="sm">
+            {post.author}
+          </Text>
+        </Group>
+        <Group gap="2" align="center">
+          <LucideIcon name="calendar" size={16} />
+          <Text size="sm">
+            {post.date}
+          </Text>
+        </Group>
+        <Group gap="2" align="center">
+          <LucideIcon name="clock" size={16} />
+          <Text size="sm">
+            {tpl(labels.minutes, post.minutes)}
+          </Text>
+        </Group>
+        <Group gap="2" align="center">
+          <LucideIcon name="eye" size={16} />
+          <Text size="sm">
+            {tpl(labels.views, extras.views)}
+          </Text>
+        </Group>
+      </Stack>
+      <Stack gap="2" align="stretch" class="border-t border-border pt-4">
+        <Text size="xs" weight="medium" class="uppercase tracking-wide text-muted-foreground">
+          {labels.related}
+        </Text>
+        <For each={extras.outline ?? []}>{(l) => (
+          <MenuEntry href={l.href} class="text-sm font-medium" size="sm" testid="post-link">
+            <LucideIcon name="chevron-right" size={16} />
+            {l.name}
+          </MenuEntry>
+        )}</For>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/post-overlay-card.tsx b/packages/solid/ui/src/components/post-overlay-card.tsx
new file mode 100644
index 0000000..6175bbc
--- /dev/null
+++ b/packages/solid/ui/src/components/post-overlay-card.tsx
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-showcase-parts.ts
+/**
+ * A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and
+ * date, the title, the excerpt and a read link.
+ */
+import { type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { cn } from "../utils";
+import type { Post, PostLabels } from "../blocks/post-card.types";
+
+export type PostOverlayCardProps = {
+  p: Post;
+  labels: PostLabels;
+  ratio?: "4/3" | "16/9";
+};
+
+export function PostOverlayCard({ p, labels, ratio = "4/3" }: PostOverlayCardProps) {
+  return (
+    <Box class="relative overflow-hidden rounded" data-testid="post-overlay">
+      <MediaFrame alt={p.title} ratio={ratio} class={(((ratio as string) === "4/3") ? "min-h-80" : "min-h-64")} />
+      <Stack gap="2" align="start" class="absolute bottom-4 left-4 right-4 rounded bg-background p-4">
+        <Group gap="2" align="center">
+          <Badge variant="secondary" size="sm">
+            {p.category}
+          </Badge>
+          <Text size="xs" class="text-muted-foreground">
+            {p.date}
+          </Text>
+        </Group>
+        <Title as={3} size="base" weight="semibold">
+          {p.title}
+        </Title>
+        <Text size="sm" class={cn("text-muted-foreground", "line-clamp-2")}>
+          {p.excerpt}
+        </Text>
+        <MenuEntry href={p.href} class="gap-2 text-sm font-medium" size="sm" testid="read">
+          {labels.read}
+          <LucideIcon name="arrow-right" size={16} />
+        </MenuEntry>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/post-stats.tsx b/packages/solid/ui/src/components/post-stats.tsx
new file mode 100644
index 0000000..cf6c5b5
--- /dev/null
+++ b/packages/solid/ui/src/components/post-stats.tsx
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/** The reading figures of a post: minutes to read, views and likes, each with its glyph. */
+import { type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { tpl } from "../utils";
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostStatsProps = {
+  post: Post;
+  extras: PostExtras;
+  labels: PostSplitLabels;
+  align?: "start" | "center";
+};
+
+export function PostStats({ post, extras, labels, align = "start" }: PostStatsProps) {
+  return (
+    <Group gap="4" align="center" justify={align} class="flex-wrap text-muted-foreground" data-testid="post-stats">
+      <Group gap="2" align="center">
+        <LucideIcon name="clock" size={16} />
+        <Text size="sm">
+          {tpl(labels.minutes, post.minutes)}
+        </Text>
+      </Group>
+      <Group gap="2" align="center">
+        <LucideIcon name="eye" size={16} />
+        <Text size="sm">
+          {tpl(labels.views, extras.views)}
+        </Text>
+      </Group>
+      <Group gap="2" align="center">
+        <LucideIcon name="heart" size={16} />
+        <Text size="sm">
+          {tpl(labels.likes, extras.likes)}
+        </Text>
+      </Group>
+    </Group>
+  );
+}
diff --git a/packages/solid/ui/src/components/post-tags.tsx b/packages/solid/ui/src/components/post-tags.tsx
new file mode 100644
index 0000000..5557efd
--- /dev/null
+++ b/packages/solid/ui/src/components/post-tags.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/post-split-parts.ts
+/** The tags of a post as small badges in a wrapping row. */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type PostTagsProps = {
+  tags: NavLink[];
+  align?: "start" | "center";
+};
+
+export function PostTags({ tags, align = "start" }: PostTagsProps) {
+  return (
+    <Group gap="2" justify={align} class="flex-wrap">
+      <For each={tags ?? []}>{(tag) => (
+        <Badge variant="secondary" size="sm" data-testid="post-tag">
+          {tag.name}
+        </Badge>
+      )}</For>
+    </Group>
+  );
+}
diff --git a/packages/solid/ui/src/components/product-gallery.tsx b/packages/solid/ui/src/components/product-gallery.tsx
new file mode 100644
index 0000000..0d02b68
--- /dev/null
+++ b/packages/solid/ui/src/components/product-gallery.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/product-parts.ts
+/**
+ * The gallery of a product page: the picture (the file of the product's featured media, a placeholder without
+ * one) and optional thumbnails below.
+ */
+import { type JSX } from "solid-js";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { MediaFrame } from "../components/media-frame";
+
+export type ProductGalleryProps = {
+  name: string;
+  image?: string;
+  thumbs?: "none" | "below";
+};
+
+export function ProductGallery({ name, image, thumbs = "below" }: ProductGalleryProps) {
+  return (
+    <Stack gap="4" align="stretch" data-testid="gallery">
+      <MediaFrame alt={name} src={image} ratio="1/1" />
+      {((thumbs as string) === "below") ? (
+        <Grid cols="3" class="gap-4" data-testid="thumbs">
+          <MediaFrame alt={name} src={image} ratio="1/1" class="ring-2 ring-foreground" />
+          <MediaFrame alt={name} ratio="1/1" />
+          <MediaFrame alt={name} ratio="1/1" />
+        </Grid>
+      ) : null}
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/product-price.tsx b/packages/solid/ui/src/components/product-price.tsx
new file mode 100644
index 0000000..878556e
--- /dev/null
+++ b/packages/solid/ui/src/components/product-price.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/product-parts.ts
+/**
+ * The price line of a product page: the price (integer minor units in the currency), the old price (compare_at)
+ * struck through when higher, and the badge.
+ */
+import { type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Text } from "../primitives/text/text";
+import { fmtMoney } from "../utils";
+
+export type ProductPriceProps = {
+  price: number;
+  compareAt?: number;
+  currency: string;
+  badge?: string;
+  was: string;
+};
+
+export function ProductPrice({ price, compareAt, currency, badge = "", was }: ProductPriceProps) {
+  return (
+    <Group gap="4" align="center" class="flex-wrap">
+      <Text size="4xl" weight="bold">
+        {fmtMoney(price, currency)}
+      </Text>
+      {(compareAt && (compareAt > price)) ? (
+        <Text tag="del" size="lg" class="relative text-muted-foreground" data-testid="compare-at">
+          <Inline class="sr-only">
+            {was}
+          </Inline>
+          {fmtMoney(compareAt, currency)}
+        </Text>
+      ) : null}
+      {badge ? (
+        <Badge variant="default" size="default">
+          {badge}
+        </Badge>
+      ) : null}
+    </Group>
+  );
+}
diff --git a/packages/solid/ui/src/components/project-tiles.tsx b/packages/solid/ui/src/components/project-tiles.tsx
new file mode 100644
index 0000000..744ada1
--- /dev/null
+++ b/packages/solid/ui/src/components/project-tiles.tsx
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/work-parts.ts
+/**
+ * The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags,
+ * two links), compact cards in four columns, captions over the pictures, or a bento where the first project
+ * takes a big tile.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { ArticleBlock } from "../components/article-block";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { cn, tpl } from "../utils";
+import type { Project, ProjectLabels } from "../blocks/project-grid.types";
+
+export type ProjectTilesProps = {
+  projects: Project[];
+  labels: ProjectLabels;
+  layout?: "cards" | "compact" | "overlay" | "bento" | "list";
+};
+
+export function ProjectTiles({ projects, labels, layout = "cards" }: ProjectTilesProps) {
+  const over = ((layout as string) === "overlay") ? true : ((layout as string) === "bento");
+  return (
+    <Box
+      class={
+        (layout as string) === "compact" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+        : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+      }
+      data-testid="items"
+    >
+      <For each={projects ?? []}>{(p, iOf) => { const i = iOf(); return (
+        <ArticleBlock
+          class={cn(
+            "flex flex-col gap-4",
+            (over ? "relative" : "rounded bg-card inset-ring inset-ring-border p-4"),
+            ((((layout as string) === "bento") && (i === 0)) ? "sm:col-span-2 lg:row-span-2" : "")
+          )}
+          testid="item"
+        >
+          <Box class={(over ? "h-full" : "relative")}>
+            <MediaFrame
+              alt={p.title}
+              ratio={(((layout as string) === "compact") ? "1/1" : (over ? "3/4" : "4/3"))}
+              class={(over ? "h-full" : "")}
+            />
+            {(p.featured && ((layout as string) !== "compact")) ? (
+              <Badge variant="default" size="default" class="absolute left-4 top-4" data-testid="featured">
+                {labels.featured}
+              </Badge>
+            ) : null}
+          </Box>
+          <Stack
+            gap="2"
+            align="stretch"
+            class={(over ? "absolute right-4 bottom-4 left-4 rounded bg-background p-4" : "")}
+          >
+            <Text size="xs" class="text-muted-foreground">
+              {tpl("{0}, {1}", p.category, p.year)}
+            </Text>
+            <Title as={3} size={(((layout as string) === "compact") ? "sm" : "lg")} weight="semibold">
+              {p.title}
+            </Title>
+            {((layout as string) !== "compact") ? (
+              <Text size="sm" class="text-muted-foreground">
+                {p.summary}
+              </Text>
+            ) : null}
+            {((layout as string) === "cards") ? (
+              <>
+                <Group gap="2" class="flex-wrap">
+                  <For each={p.tags ?? []}>{(k) => (
+                    <Badge variant="secondary" size="sm">
+                      {k}
+                    </Badge>
+                  )}</For>
+                </Group>
+                <Group gap="4" class="pt-2">
+                  <MenuEntry href={p.href} class="inline-flex items-center gap-2 text-sm font-medium">
+                    {labels.case}
+                    <LucideIcon name="arrow-right" size={16} />
+                  </MenuEntry>
+                  <MenuEntry href={p.href} class="inline-flex items-center gap-2 text-sm font-medium">
+                    {labels.view}
+                    <LucideIcon name="external-link" size={16} />
+                  </MenuEntry>
+                </Group>
+              </>
+            ) : null}
+          </Stack>
+        </ArticleBlock>
+      ); }}</For>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/prompt-composer.tsx b/packages/solid/ui/src/components/prompt-composer.tsx
new file mode 100644
index 0000000..7c233d4
--- /dev/null
+++ b/packages/solid/ui/src/components/prompt-composer.tsx
@@ -0,0 +1,107 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/**
+ * A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send
+ * button. Static links only; a host adds behavior.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+export type PromptComposerProps = {
+  label?: string;
+  attachLabel?: string;
+  modelLabel?: string;
+  send?: string;
+  href?: string;
+};
+
+export function PromptComposer({ label, attachLabel, modelLabel, send, href }: PromptComposerProps) {
+  return (
+    <Box
+      class={cn(
+        "mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30",
+        defaults.hero.composer
+      )}
+      data-testid="email-form"
+    >
+      {attachLabel ? (
+        <Group gap="2" align="center" data-testid="composer-attachments">
+          <Button
+            variant="ghost"
+            size="sm"
+            class={cn(
+              "gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20",
+              defaults.hero.attach
+            )}
+            data-testid="composer-attach"
+          >
+            <LucideIcon name="file-text" size={16} />
+            {attachLabel}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            class={cn(
+              "gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20",
+              defaults.hero.attach
+            )}
+            data-testid="composer-attach"
+          >
+            <LucideIcon name="paperclip" size={16} />
+            {attachLabel}
+          </Button>
+        </Group>
+      ) : null}
+      <Text
+        size="xs"
+        weight="semibold"
+        class={cn("flex w-full items-center leading-5 text-background/80", defaults.hero.promptLine)}
+        data-testid="field"
+      >
+        {label}
+      </Text>
+      <Group gap="2" align="center" justify="between" class="h-8 w-full" data-testid="composer-tools">
+        <Group gap="2" align="center">
+          <Button
+            variant="ghost"
+            size="sm"
+            layout="icon"
+            class="bg-background/10 text-background hover:bg-background/20"
+            data-testid="composer-plus"
+            aria-label={(attachLabel ?? "Attach")}
+          >
+            <LucideIcon name="plus" size={16} />
+          </Button>
+          {modelLabel ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              class={cn("gap-2 bg-background/10 text-background hover:bg-background/20", defaults.hero.model)}
+              data-testid="composer-model"
+            >
+              <LucideIcon name="sparkles" size={16} />
+              {modelLabel}
+              <LucideIcon name="chevron-down" size={16} />
+            </Button>
+          ) : null}
+        </Group>
+        <Button
+          href={href}
+          variant="secondary"
+          size="sm"
+          layout="icon"
+          data-testid="submit"
+          aria-label={(send ?? "Send")}
+        >
+          <LucideIcon name="arrow-up" size={16} />
+        </Button>
+      </Group>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/quote-card.tsx b/packages/solid/ui/src/components/quote-card.tsx
new file mode 100644
index 0000000..e9e55ed
--- /dev/null
+++ b/packages/solid/ui/src/components/quote-card.tsx
@@ -0,0 +1,90 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/marketing.ts
+/**
+ * One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the
+ * stars and a company glyph as `item` says.
+ */
+import { type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { FigureBlock } from "../components/figure-block";
+import { MediaFrame } from "../components/media-frame";
+import { Rating } from "../components/rating";
+import { cn, tpl } from "../utils";
+import type { Quote, QuoteLabels, QuoteItem } from "../blocks/testimonial-grid.types";
+
+export type QuoteCardProps = {
+  q: Quote;
+  labels: QuoteLabels;
+  item?: QuoteItem;
+  layout?: "grid" | "single" | "stack" | "masonry" | "strip";
+};
+
+export function QuoteCard({ q, labels, item, layout = "grid" }: QuoteCardProps) {
+  return (
+    <FigureBlock
+      class={cn(
+        "m-0 flex flex-col gap-4",
+        ((item?.kind === "plain") ? "" : "rounded p-6 inset-ring inset-ring-border bg-card"),
+        (
+          (layout as string) === "masonry" ? "mb-4 break-inside-avoid"
+          : (layout as string) === "strip" ? "w-80 shrink-0 snap-start"
+          : "h-full"
+        )
+      )}
+      testid="item"
+    >
+      {(item?.kind === "social") ? (
+        <>
+          <Group gap="4" align="center">
+            {(item?.avatar !== "none") ? (
+              <MediaFrame alt={q.author} ratio="1/1" class="size-12 shrink-0 rounded-full" />
+            ) : null}
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {q.author}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {tpl(labels.handleLine, q.handle, q.time)}
+              </Text>
+            </Stack>
+            <LucideIcon name="message-circle" size={16} class="ml-auto text-muted-foreground" />
+          </Group>
+          <Text size="base">
+            {q.quote}
+          </Text>
+        </>
+      ) : (
+        <>
+          {(item?.rating !== "hide") ? (
+            <Rating value={q.rating} label={tpl(labels.rating, q.rating)} />
+          ) : null}
+          {(item?.mark === "icon") ? (
+            <Inline class="text-muted-foreground" data-testid="mark">
+              <LucideIcon name={q.mark} size={24} />
+            </Inline>
+          ) : null}
+          <Text size={(((layout as string) === "single") ? "xl" : "base")}>
+            {q.quote}
+          </Text>
+          <Group gap="4" align="center">
+            {(item?.avatar !== "none") ? (
+              <MediaFrame alt={q.author} ratio="1/1" class="size-12 shrink-0 rounded-full" />
+            ) : null}
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {q.author}
+              </Text>
+              <Text size="sm" class="text-muted-foreground">
+                {tpl(labels.byLine, q.role, q.company)}
+              </Text>
+            </Stack>
+          </Group>
+        </>
+      )}
+    </FigureBlock>
+  );
+}
diff --git a/packages/solid/ui/src/components/quote-figures.tsx b/packages/solid/ui/src/components/quote-figures.tsx
new file mode 100644
index 0000000..800fdb2
--- /dev/null
+++ b/packages/solid/ui/src/components/quote-figures.tsx
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/quote-split-parts.ts
+/** Three figures in a row above the quotes of QuoteSplit. */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import type { QuoteExtras } from "../blocks/quote-split.types";
+import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteFiguresProps = {
+  extras: QuoteExtras;
+};
+
+export function QuoteFigures({ extras }: QuoteFiguresProps) {
+  return (
+    <Box class="grid grid-cols-3 gap-4 border-b border-border pb-8" data-testid="quote-figures">
+      <For each={extras.stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+        <>
+          {(i < 3) ? (
+            <Stack gap="0" data-testid="quote-stat">
+              <Text size="3xl" weight="bold">
+                {s.value}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {s.label}
+              </Text>
+            </Stack>
+          ) : null}
+        </>
+      ); }}</For>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/quote-logo-tiles.tsx b/packages/solid/ui/src/components/quote-logo-tiles.tsx
new file mode 100644
index 0000000..24db04e
--- /dev/null
+++ b/packages/solid/ui/src/components/quote-logo-tiles.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/quote-split-parts.ts
+/** Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit. */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import type { QuoteExtras } from "../blocks/quote-split.types";
+import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteLogoTilesProps = {
+  extras: QuoteExtras;
+};
+
+export function QuoteLogoTiles({ extras }: QuoteLogoTilesProps) {
+  return (
+    <Box class="grid grid-cols-2 gap-4" data-testid="quote-logos">
+      <For each={extras.logos ?? []}>{(l, iOf) => { const i = iOf(); return (
+        <>
+          {(i < 4) ? (
+            <Group
+              gap="2"
+              align="center"
+              justify="center"
+              class="rounded bg-card inset-ring inset-ring-border p-4 text-muted-foreground"
+              data-testid="quote-logo"
+            >
+              <LucideIcon name={l.icon} size={20} />
+              <Text size="sm" weight="semibold">
+                {l.name}
+              </Text>
+            </Group>
+          ) : null}
+        </>
+      ); }}</For>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/quote-proof.tsx b/packages/solid/ui/src/components/quote-proof.tsx
new file mode 100644
index 0000000..47193e1
--- /dev/null
+++ b/packages/solid/ui/src/components/quote-proof.tsx
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta.ts
+/** A customer quote and who said it, as a figure. */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Text } from "../primitives/text/text";
+import { cn } from "../utils";
+
+export type QuoteProofProps = {
+  quote?: string;
+  quoteBy?: string;
+  center?: boolean;
+};
+
+export function QuoteProof({ quote, quoteBy, center = false }: QuoteProofProps) {
+  return (
+    <Block
+      tag="figure"
+      class={cn("flex flex-col gap-2", (center ? "items-center text-center" : ""))}
+      data-testid="proof"
+    >
+      <Text size="xl">
+        {quote}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {quoteBy}
+      </Text>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/quote-rating-panel.tsx b/packages/solid/ui/src/components/quote-rating-panel.tsx
new file mode 100644
index 0000000..1d1b660
--- /dev/null
+++ b/packages/solid/ui/src/components/quote-rating-panel.tsx
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/quote-split-parts.ts
+/** The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures. */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Rating } from "../components/rating";
+import { tpl } from "../utils";
+import type { QuoteExtras } from "../blocks/quote-split.types";
+import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteRatingPanelProps = {
+  extras: QuoteExtras;
+  labels: QuoteLabels;
+};
+
+export function QuoteRatingPanel({ extras, labels }: QuoteRatingPanelProps) {
+  return (
+    <Stack
+      gap="6"
+      align="center"
+      class="rounded bg-card inset-ring inset-ring-border p-8 text-center"
+      data-testid="quote-rating"
+    >
+      <Text size="5xl" weight="bold">
+        {extras.score}
+      </Text>
+      <Rating value={extras.rating} label={tpl(labels.rating, extras.rating)} size={20} />
+      <Text size="sm" class="text-muted-foreground">
+        {extras.reviews}
+      </Text>
+      <Box class="grid w-full grid-cols-2 gap-4 border-t border-border pt-6">
+        <For each={extras.stats ?? []}>{(s, iOf) => { const i = iOf(); return (
+          <>
+            {(i < 2) ? (
+              <Stack gap="0" align="center" data-testid="quote-stat">
+                <Text size="2xl" weight="semibold">
+                  {s.value}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {s.label}
+                </Text>
+              </Stack>
+            ) : null}
+          </>
+        ); }}</For>
+      </Box>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/quote-slot.tsx b/packages/solid/ui/src/components/quote-slot.tsx
new file mode 100644
index 0000000..99c7970
--- /dev/null
+++ b/packages/solid/ui/src/components/quote-slot.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/quote-split-parts.ts
+/**
+ * One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in
+ * a box that can span grid rows.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { QuoteCard } from "../components/quote-card";
+import type { Quote, QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteSlotProps = {
+  q: Quote;
+  labels: QuoteLabels;
+  kind?: "card" | "plain";
+  layout?: "grid" | "single" | "stack";
+  class?: string;
+};
+
+export function QuoteSlot({ q, labels, kind = "card", layout = "grid", class: className }: QuoteSlotProps) {
+  return (
+    <Box class={className} data-testid="quote">
+      <QuoteCard q={q} labels={labels} item={{ kind, avatar: "image", rating: "show", mark: "none" }} layout={layout} />
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/range-field.tsx b/packages/solid/ui/src/components/range-field.tsx
new file mode 100644
index 0000000..9962ac0
--- /dev/null
+++ b/packages/solid/ui/src/components/range-field.tsx
@@ -0,0 +1,84 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two
+ * sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { Input } from "../primitives/input/input";
+import { Range } from "../primitives/range/range";
+import { cn } from "../utils";
+
+export type RangeFieldProps = {
+  type: "number" | "date";
+  from: string;
+  to: string;
+  fromLabel: string;
+  toLabel: string;
+  min?: number;
+  max?: number;
+  class?: string;
+  onChange?: (from: string, to: string) => void;
+};
+
+export function RangeField({
+  type,
+  from,
+  to,
+  fromLabel,
+  toLabel,
+  min,
+  max,
+  class: className,
+  onChange,
+}: RangeFieldProps) {
+  return (
+    <Box class={cn("flex flex-col gap-2", className)} data-slot="range-field">
+      {(((type as string) === "number") && (min != null) && (max != null) && (min < max)) ? (
+        <>
+          <Range
+            min={min}
+            max={max}
+            aria-label={fromLabel}
+            value={(((from as string) === "") ? (min == null ? undefined : String(min)) : from)}
+            data-testid="range-from"
+            onInput={(event: InputEvent & { currentTarget: HTMLInputElement }) => onChange?.(event.currentTarget.value, to)}
+          />
+          <Range
+            min={min}
+            max={max}
+            aria-label={toLabel}
+            value={(((to as string) === "") ? (max == null ? undefined : String(max)) : to)}
+            data-testid="range-to"
+            onInput={(event: InputEvent & { currentTarget: HTMLInputElement }) => onChange?.(from, event.currentTarget.value)}
+          />
+        </>
+      ) : null}
+      <Inline class="flex items-center gap-2">
+        <Input
+          type={type}
+          size="sm"
+          aria-label={fromLabel}
+          value={from}
+          min={(min == null ? undefined : String(min))}
+          max={(max == null ? undefined : String(max))}
+          onInput={(event: InputEvent & { currentTarget: HTMLInputElement }) => onChange?.(event.currentTarget.value, to)}
+        />
+        <Inline class="text-muted-foreground">
+          {"–"}
+        </Inline>
+        <Input
+          type={type}
+          size="sm"
+          aria-label={toLabel}
+          value={to}
+          min={(min == null ? undefined : String(min))}
+          max={(max == null ? undefined : String(max))}
+          onInput={(event: InputEvent & { currentTarget: HTMLInputElement }) => onChange?.(from, event.currentTarget.value)}
+        />
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/rating.tsx b/packages/solid/ui/src/components/rating.tsx
new file mode 100644
index 0000000..c288c41
--- /dev/null
+++ b/packages/solid/ui/src/components/rating.tsx
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * One to five stars (a review's grade, the average of a product). The value is read as the label; the stars
+ * themselves are decoration.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn } from "../utils";
+
+export type RatingProps = {
+  value: number;
+  label: string;
+  max?: number;
+  size?: number;
+  class?: string;
+};
+
+export function Rating({ value, label, max = 5, size = 16, class: className }: RatingProps) {
+  const full = Math.round(Math.min(max, Math.max(0, value)));
+  return (
+    <Box
+      class={cn("inline-flex items-center gap-0", className)}
+      role="img"
+      aria-label={label}
+      data-slot="rating"
+      data-value={full}
+    >
+      <For each={Array.from({ length: max }, (_, i) => i) ?? []}>{(i) => (
+        <LucideIcon name="star" size={size} class={((i < full) ? "fill-foreground text-foreground" : "text-border")} />
+      )}</For>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/region.tsx b/packages/solid/ui/src/components/region.tsx
new file mode 100644
index 0000000..74fe02d
--- /dev/null
+++ b/packages/solid/ui/src/components/region.tsx
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never
+ * nested, so a nested landmark is its own component.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+
+export type RegionProps = {
+  tag: "header" | "nav" | "section" | "aside" | "footer" | "article" | "figure" | "main" | "search" | "div";
+  landmarkLabel?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function Region({ tag, landmarkLabel, class: className, children }: RegionProps) {
+  return (
+    <Block tag={tag} class={className} aria-label={landmarkLabel}>
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/search-field.tsx b/packages/solid/ui/src/components/search-field.tsx
new file mode 100644
index 0000000..331ff3a
--- /dev/null
+++ b/packages/solid/ui/src/components/search-field.tsx
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/** A search input with a magnifier. `value` fires on every keystroke with the new text. */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Input } from "../primitives/input/input";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { cn } from "../utils";
+
+export type SearchFieldProps = {
+  value: string;
+  placeholder?: string;
+  label: string;
+  class?: string;
+  onValue?: (value: string) => void;
+};
+
+export function SearchField({ value, placeholder, label, class: className, onValue }: SearchFieldProps) {
+  return (
+    <Box class={cn("relative min-w-44 flex-1", className)} role="search">
+      <LucideIcon name="search" size={16} class="pointer-events-none absolute top-2 left-3 text-muted-foreground" />
+      <Input
+        size="sm"
+        type="search"
+        placeholder={placeholder}
+        aria-label={label}
+        class="pr-3 pl-10"
+        value={value}
+        onInput={(event: InputEvent & { currentTarget: HTMLInputElement }) => onValue?.(event.currentTarget.value)}
+      />
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/search-palette.tsx b/packages/solid/ui/src/components/search-palette.tsx
new file mode 100644
index 0000000..f699cab
--- /dev/null
+++ b/packages/solid/ui/src/components/search-palette.tsx
@@ -0,0 +1,28 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/nav.ts
+/** A search field with a search glyph and the keys that open it. */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { Input } from "../primitives/input/input";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+
+export type SearchPaletteProps = {
+  label: string;
+  shortcut: string;
+};
+
+export function SearchPalette({ label, shortcut }: SearchPaletteProps) {
+  return (
+    <Box class="relative w-full max-w-sm" data-testid="palette">
+      <LucideIcon name="search" size={16} class="pointer-events-none absolute top-2 left-3 text-muted-foreground" />
+      <Input type="search" size="sm" placeholder={label} aria-label={label} class="pr-12 pl-10" />
+      <Inline
+        class={"pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring " +
+          "inset-ring-border"}
+      >
+        {shortcut}
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/section-box.tsx b/packages/solid/ui/src/components/section-box.tsx
new file mode 100644
index 0000000..608f386
--- /dev/null
+++ b/packages/solid/ui/src/components/section-box.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/** The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper). */
+import { type JSX } from "solid-js";
+import { Card } from "../primitives/card/card";
+
+export type SectionBoxProps = {
+  boxed?: boolean;
+  children?: JSX.Element;
+};
+
+export function SectionBox({ boxed = false, children }: SectionBoxProps) {
+  return (
+    <>
+      {boxed ? (
+        <Card variant="muted">
+          {children}
+        </Card>
+      ) : (
+        <>
+          {children}
+        </>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/section-column.tsx b/packages/solid/ui/src/components/section-column.tsx
new file mode 100644
index 0000000..e0361e6
--- /dev/null
+++ b/packages/solid/ui/src/components/section-column.tsx
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure
+ * (xs to 3xl) holds the column at that width, centred.
+ */
+import { type JSX } from "solid-js";
+import { Stack } from "../primitives/stack/stack";
+import { variants } from "../utils";
+
+/** SectionColumn: the classes of each value (shadcn/cva style). */
+export const sectionColumnVariants = variants({
+  variants: {
+    measure: {
+      default: "",
+      landing: "",
+      fill: "",
+      xs: "mx-auto w-full max-w-xs",
+      sm: "mx-auto w-full max-w-sm",
+      md: "mx-auto w-full max-w-md",
+      lg: "mx-auto w-full max-w-lg",
+      xl: "mx-auto w-full max-w-xl",
+      "2xl": "mx-auto w-full max-w-2xl",
+      "3xl": "mx-auto w-full max-w-3xl",
+    },
+  },
+  defaultVariants: { measure: "default" },
+});
+
+export type SectionColumnProps = {
+  measure?: "default" | "landing" | "fill" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  children?: JSX.Element;
+};
+
+export function SectionColumn({ measure = "default", children }: SectionColumnProps) {
+  return (
+    <Stack gap="6" align="stretch" class={sectionColumnVariants({ measure: measure })}>
+      {children}
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/section-frame.tsx b/packages/solid/ui/src/components/section-frame.tsx
new file mode 100644
index 0000000..0c47ef1
--- /dev/null
+++ b/packages/solid/ui/src/components/section-frame.tsx
@@ -0,0 +1,135 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body
+ * (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts
+ * the body in a card. Axes: layout, media side, tone, density, align.
+ */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Container } from "../primitives/container/container";
+import { Grid } from "../primitives/grid/grid";
+import { Stack } from "../primitives/stack/stack";
+import { SectionBox } from "../components/section-box";
+import { SectionColumn } from "../components/section-column";
+import { SectionHeader } from "../components/section-header";
+import { defaults } from "../presets/defaults";
+import { cn, variants } from "../utils";
+import type { SectionHeading, HeadLink, SectionMedia } from "./section-frame.types";
+
+/** SectionFrame: the classes of each value (shadcn/cva style). */
+export const sectionFrameVariants = variants({
+  base: "w-full",
+  variants: {
+    tone: {
+      default: "",
+      muted: "bg-muted",
+      inverse: "bg-foreground text-background [&_.text-muted-foreground]:text-background/70",
+    },
+    density: {
+      roomy: "py-16",
+      default: "py-10",
+      compact: "py-6",
+      flush: "py-0",
+    },
+    align: {
+      start: "",
+      center: "text-center",
+    },
+  },
+  defaultVariants: { tone: "default", density: "default", align: "start" },
+});
+
+export type SectionFrameProps = {
+  id: string;
+  title?: string;
+  lead?: string;
+  heading?: SectionHeading;
+  action?: HeadLink;
+  layout?: "stack" | "split";
+  media?: SectionMedia;
+  boxed?: boolean;
+  tone?: "default" | "muted" | "inverse";
+  density?: "roomy" | "default" | "compact" | "flush";
+  align?: "start" | "center";
+  measure?: "default" | "landing" | "fill" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  landmarkLabel?: string;
+  class?: string;
+  children?: JSX.Element;
+  aside?: JSX.Element;
+};
+
+export function SectionFrame({
+  id,
+  title = "",
+  lead,
+  heading,
+  action,
+  layout = "stack",
+  media,
+  boxed = false,
+  tone = "default",
+  density = "default",
+  align = "start",
+  measure = "default",
+  landmarkLabel,
+  class: className,
+  children,
+  aside,
+}: SectionFrameProps) {
+  const titleId = id + "-title";
+  const sectionTone = boxed ? "default" : tone;
+  const center = (align as string) === "center";
+  return (
+    <Block
+      tag="section"
+      class={cn(sectionFrameVariants({ tone: sectionTone, density: density, align: align }), className)}
+      aria-labelledby={(landmarkLabel ? undefined : (((title as string) !== "") ? titleId : undefined))}
+      aria-label={(landmarkLabel ?? (((title as string) === "") ? id : undefined))}
+      data-testid="section"
+      data-tone={tone}
+      data-density={density}
+    >
+      <Container
+        class={
+          (measure as string) === "landing" ? cn("mx-auto w-full px-4", defaults.section.landing)
+          : (measure as string) === "fill" ? "w-full"
+          : "mx-auto w-full max-w-6xl px-4"
+        }
+        data-slot="container"
+      >
+        <SectionBox boxed={boxed}>
+          {((layout as string) === "split") ? (
+            <Grid cols="1-2" class={cn("gap-8", ((media?.align === "start") ? "items-start" : "items-center"))}>
+              {(media?.show && (media?.side === "start")) ? (
+                <Box class="w-full" data-slot="media">
+                  {aside}
+                </Box>
+              ) : null}
+              <Stack gap="6" align="stretch">
+                <SectionHeader titleId={titleId} title={title} heading={heading} action={action} lead={lead} center={center} />
+                {children}
+              </Stack>
+              {(media?.show && (media?.side !== "start")) ? (
+                <Box class="w-full" data-slot="media">
+                  {aside}
+                </Box>
+              ) : null}
+            </Grid>
+          ) : (
+            <SectionColumn measure={measure}>
+              <SectionHeader titleId={titleId} title={title} heading={heading} action={action} lead={lead} center={center} />
+              {children}
+              {media?.show ? (
+                <Box class="w-full" data-slot="media">
+                  {aside}
+                </Box>
+              ) : null}
+            </SectionColumn>
+          )}
+        </SectionBox>
+      </Container>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/section-frame.types.ts b/packages/solid/ui/src/components/section-frame.types.ts
new file mode 100644
index 0000000..3502204
--- /dev/null
+++ b/packages/solid/ui/src/components/section-frame.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+
+export type SectionHeading = {
+  /** heading level */
+  level?: 1 | 2;
+  /** display: an oversized heading */
+  scale?: "default" | "display";
+  /** a short pill above the heading (e.g. New) */
+  badge?: string;
+};
+
+export type HeadLink = {
+  /** text of the link (View all, Browse all); none: no link */
+  label?: string;
+  /** href of the link; none: no link */
+  href?: string;
+};
+
+export type SectionMedia = {
+  /** the `aside` slot is shown */
+  show?: boolean;
+  /** side of the media in the split layout */
+  side?: "end" | "start";
+  /** split layout: the body and the media centred on each other, or both from the top */
+  align?: "center" | "start";
+};
diff --git a/packages/solid/ui/src/components/section-head.tsx b/packages/solid/ui/src/components/section-head.tsx
new file mode 100644
index 0000000..e3a60b4
--- /dev/null
+++ b/packages/solid/ui/src/components/section-head.tsx
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button
+ * (aria-expanded, the toggle event).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Inline } from "../primitives/inline/inline";
+import { cn, variants } from "../utils";
+
+/** SectionHead: the classes of each value (shadcn/cva style). */
+export const sectionHeadVariants = variants({
+  base: "flex items-center justify-between pr-4 pl-4",
+  variants: {
+    size: {
+      default: "h-8 py-2 text-xs font-semibold",
+      lg: "h-12 py-2 text-sm font-bold",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type SectionHeadProps = {
+  size?: "default" | "lg";
+  expanded?: boolean;
+  controls?: string;
+  class?: string;
+  children?: JSX.Element;
+  right?: JSX.Element;
+  onToggle?: () => void;
+};
+
+export function SectionHead({
+  size = "default",
+  expanded,
+  controls,
+  class: className,
+  children,
+  right,
+  onToggle,
+}: SectionHeadProps) {
+  const cls =
+    cn(
+      sectionHeadVariants({ size: size }),
+      "rounded text-foreground in-data-[nav=collapsed]:hidden",
+      className,
+    );
+  return (
+    <>
+      {(expanded != null) ? (
+        <ButtonPlain
+          type="button"
+          class={cn(cls, "w-full text-left")}
+          aria-expanded={expanded}
+          aria-controls={controls}
+          data-slot="section-head"
+          data-expanded={expanded}
+          onClick={() => onToggle?.()}
+        >
+          <Inline data-slot="section-head-title">
+            {children}
+          </Inline>
+          {right ? (
+            <Inline class="flex items-center gap-2" data-slot="section-head-right">
+              {right}
+            </Inline>
+          ) : null}
+        </ButtonPlain>
+      ) : (
+        <Box class={cls} data-slot="section-head">
+          <Inline data-slot="section-head-title">
+            {children}
+          </Inline>
+          {right ? (
+            <Inline class="flex items-center gap-2" data-slot="section-head-right">
+              {right}
+            </Inline>
+          ) : null}
+        </Box>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/section-header.tsx b/packages/solid/ui/src/components/section-header.tsx
new file mode 100644
index 0000000..480242c
--- /dev/null
+++ b/packages/solid/ui/src/components/section-header.tsx
@@ -0,0 +1,103 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+/**
+ * The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an
+ * optional lead. No wrapper: its parts are children of the section stack.
+ */
+import { type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Group } from "../primitives/group/group";
+import { Link } from "../primitives/link/link";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { SectionHeading, HeadLink } from "./section-frame.types";
+
+export type SectionHeaderProps = {
+  titleId: string;
+  title?: string;
+  heading?: SectionHeading;
+  action?: HeadLink;
+  lead?: string;
+  center?: boolean;
+};
+
+export function SectionHeader({
+  titleId,
+  title = "",
+  heading,
+  action,
+  lead,
+  center = false,
+}: SectionHeaderProps) {
+  const level = heading?.level ?? 2;
+  const scale = heading?.scale ?? "default";
+  const hasAction = action?.label && action?.href;
+  return (
+    <>
+      {heading?.badge ? (
+        <Badge variant="outline" size="lg" class={(center ? "mx-auto w-fit" : "w-fit")} data-testid="section-badge">
+          {heading?.badge}
+        </Badge>
+      ) : null}
+      {(((title as string) !== "") && hasAction) ? (
+        <Group gap="4" align="center" justify="between" class="w-full flex-wrap">
+          <Title
+            as={level}
+            size={((level === 1) ? "5xl" : "xl")}
+            weight="semibold"
+            class={
+              (scale as string) === "display" ? "text-6xl tracking-tight md:text-8xl"
+              : level === 1 ? "leading-tight"
+              : "leading-7"
+            }
+            id={titleId}
+          >
+            {title}
+          </Title>
+          <Link
+            href={action?.href}
+            variant="default"
+            class={cn(defaults.text.tiny, "shrink-0 font-medium leading-5")}
+            data-testid="section-action"
+          >
+            {action?.label}
+          </Link>
+        </Group>
+      ) : null}
+      {(((title as string) !== "") && !hasAction) ? (
+        <Title
+          as={level}
+          size={((level === 1) ? "5xl" : "xl")}
+          weight="semibold"
+          class={
+            (scale as string) === "display" ? "text-6xl tracking-tight md:text-8xl"
+            : level === 1 ? "leading-tight"
+            : "leading-7"
+          }
+          id={titleId}
+        >
+          {title}
+        </Title>
+      ) : null}
+      {(((title as string) === "") && hasAction) ? (
+        <Group gap="4" align="center" justify="end" class="w-full">
+          <Link
+            href={action?.href}
+            variant="default"
+            class={cn(defaults.text.tiny, "shrink-0 font-medium leading-5")}
+            data-testid="section-action"
+          >
+            {action?.label}
+          </Link>
+        </Group>
+      ) : null}
+      {lead ? (
+        <Text size="base" class={cn("max-w-2xl text-muted-foreground", (center ? "mx-auto" : ""))}>
+          {lead}
+        </Text>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/shell-content.tsx b/packages/solid/ui/src/components/shell-content.tsx
new file mode 100644
index 0000000..8141261
--- /dev/null
+++ b/packages/solid/ui/src/components/shell-content.tsx
@@ -0,0 +1,132 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shell-parts.ts
+/**
+ * The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px
+ * grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one),
+ * list (a toolbar over a card of rows). The cards are hidden from assistive technology.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Title } from "../primitives/title/title";
+import { cn } from "../utils";
+
+export type ShellContentProps = {
+  title: string;
+  titleId: string;
+  level?: 1 | 2;
+  content?: "grid" | "split" | "list";
+};
+
+export function ShellContent({ title, titleId, level = 2, content = "grid" }: ShellContentProps) {
+  return (
+    <Stack gap="6" align="stretch" class="flex-1 p-6" data-testid="content">
+      <Group gap="4" align="center" justify="between">
+        <Title as={level} size="2xl" weight="semibold" id={titleId}>
+          {title}
+        </Title>
+        <Box class="h-10 w-32 rounded bg-muted" aria-hidden="true" />
+      </Group>
+      <Box class="flex flex-1 flex-col gap-4" aria-hidden="true" data-testid="panels">
+        {((content as string) === "grid") ? (
+          <>
+            <Box class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+              <Box
+                class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+                data-testid="panel"
+              >
+                <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box class={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+              <Box
+                class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+                data-testid="panel"
+              >
+                <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box class={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+              <Box
+                class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+                data-testid="panel"
+              >
+                <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box class={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+              <Box
+                class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+                data-testid="panel"
+              >
+                <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box class={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+            </Box>
+            <Box
+              class={cn(
+                "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                "min-h-64 flex-1"
+              )}
+              data-testid="panel"
+            >
+              <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+              <Box class={cn("rounded bg-muted", "flex-1")} />
+            </Box>
+          </>
+        ) : null}
+        {((content as string) === "split") ? (
+          <>
+            <Box class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+              <Box
+                class={cn(
+                  "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                  "h-64 lg:col-span-2"
+                )}
+                data-testid="panel"
+              >
+                <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box class={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+              <Box
+                class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-64")}
+                data-testid="panel"
+              >
+                <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+                <Box class={cn("rounded bg-muted", "flex-1")} />
+              </Box>
+            </Box>
+            <Box
+              class={cn(
+                "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                "min-h-40 flex-1"
+              )}
+              data-testid="panel"
+            >
+              <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+              <Box class={cn("rounded bg-muted", "flex-1")} />
+            </Box>
+          </>
+        ) : null}
+        {((content as string) === "list") ? (
+          <>
+            <Group gap="4" align="center">
+              <Box class={cn("rounded bg-muted", "h-10 w-64")} />
+              <Box class={cn("rounded bg-muted", "h-10 w-24")} />
+              <Box class={cn("rounded bg-muted", "ml-auto h-10 w-32")} />
+            </Group>
+            <Box
+              class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "flex-1")}
+              data-testid="panel"
+            >
+              <Box class={cn("rounded bg-muted", "h-8")} />
+              <Box class={cn("rounded bg-muted", "h-8")} />
+              <Box class={cn("rounded bg-muted", "h-8")} />
+              <Box class={cn("rounded bg-muted", "h-8")} />
+              <Box class={cn("rounded bg-muted", "h-8")} />
+              <Box class={cn("rounded bg-muted", "h-8")} />
+            </Box>
+          </>
+        ) : null}
+      </Box>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/shell-footer.tsx b/packages/solid/ui/src/components/shell-footer.tsx
new file mode 100644
index 0000000..e56fbe0
--- /dev/null
+++ b/packages/solid/ui/src/components/shell-footer.tsx
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shell-parts.ts
+/**
+ * The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the
+ * whole shell (full).
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+export type ShellFooterProps = {
+  nav: ShellNav;
+  place?: "full" | "inset";
+  landmarkLabel?: string;
+};
+
+export function ShellFooter({ nav, place = "full", landmarkLabel }: ShellFooterProps) {
+  return (
+    <Block
+      tag="footer"
+      class={cn(
+        "flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4",
+        (((place as string) === "full") ? "bg-card" : "")
+      )}
+      data-testid="footer"
+      data-place={place}
+      aria-label={landmarkLabel}
+    >
+      <Text size="xs" class="text-muted-foreground">
+        {nav.copyright}
+      </Text>
+      {((nav.footer?.length ?? 0) > 0) ? (
+        <NavBlock
+          label={
+            landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.footerLabel, landmarkLabel))
+            : nav.footerLabel
+          }
+        >
+          <List class="m-0 flex list-none items-center gap-4 p-0">
+            <For each={nav.footer ?? []}>{(f) => (
+              <ListItem>
+                <MenuEntry href={f.href} class="text-xs text-muted-foreground" variant="muted" size="sm">
+                  {f.name}
+                </MenuEntry>
+              </ListItem>
+            )}</For>
+          </List>
+        </NavBlock>
+      ) : null}
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/shell-sidebar.tsx b/packages/solid/ui/src/components/shell-sidebar.tsx
new file mode 100644
index 0000000..617bc77
--- /dev/null
+++ b/packages/solid/ui/src/components/shell-sidebar.tsx
@@ -0,0 +1,145 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shell-parts.ts
+/**
+ * The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read),
+ * collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a
+ * panel of the current section's links). side puts it at the start or the end.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+export type ShellSidebarProps = {
+  nav: ShellNav;
+  mode?: "wide" | "rail" | "collapsed" | "twolevel" | "none";
+  side?: "start" | "end";
+  brand?: "show" | "hide";
+  landmarkLabel?: string;
+  onToggle?: () => void;
+};
+
+export function ShellSidebar({
+  nav,
+  mode = "wide",
+  side = "start",
+  brand = "show",
+  landmarkLabel,
+  onToggle,
+}: ShellSidebarProps) {
+  const named = (mode as string) === "wide";
+  return (
+    <Block
+      tag="aside"
+      class={cn(
+        "flex shrink-0 bg-card",
+        (
+          (side as string) === "end" ? "flex-row-reverse border-l border-border"
+          : "border-r border-border"
+        )
+      )}
+      aria-label={(landmarkLabel ?? nav.label)}
+      data-testid="sidebar"
+      data-mode={mode}
+    >
+      <Box class={cn("flex flex-col gap-6 py-4", (named ? "w-64 px-4" : "w-16 items-center px-2"))}>
+        {((brand as string) === "show") ? (
+          <Group gap="2" align="center" class="shrink-0" data-testid="brand">
+            <LucideIcon name="layers" size={24} />
+            <Text size="base" weight="bold" class={(named ? "" : "sr-only")}>
+              {nav.brand}
+            </Text>
+          </Group>
+        ) : null}
+        {((nav.links?.length ?? 0) > 0) ? (
+          <NavBlock
+            label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.label, landmarkLabel)) : nav.label)}
+            class="flex-1"
+          >
+            <List class="m-0 flex list-none flex-col gap-2 p-0" data-testid="items">
+              <For each={nav.links ?? []}>{(l) => (
+                <ListItem>
+                  <MenuEntry
+                    href={l.href}
+                    class={cn(
+                      "flex items-center gap-4 rounded py-2 text-sm",
+                      (named ? "px-4" : "justify-center px-2"),
+                      ((l.id === nav.current) ? "bg-muted font-medium" : "")
+                    )}
+                    current={(l.id === nav.current)}
+                    size="sm"
+                    testid="item"
+                  >
+                    <LucideIcon name={l.icon} size={16} />
+                    <Inline class={(named ? "" : "sr-only")}>
+                      {l.name}
+                    </Inline>
+                  </MenuEntry>
+                </ListItem>
+              )}</For>
+            </List>
+          </NavBlock>
+        ) : null}
+        {((mode as string) === "collapsed") ? (
+          <ButtonPlain
+            type="button"
+            class="inline-flex size-10 items-center justify-center rounded text-muted-foreground"
+            aria-label={nav.expand}
+            aria-expanded={(((mode as string) === "wide") ? "true" : "false")}
+            data-testid="toggle"
+            onClick={() => onToggle?.()}
+          >
+            <LucideIcon name="panel-left" size={20} />
+          </ButtonPlain>
+        ) : null}
+      </Box>
+      {(((mode as string) === "twolevel") && ((nav.sub?.length ?? 0) > 0)) ? (
+        <Box
+          class={cn(
+            "flex w-56 flex-col gap-4 px-4 py-6",
+            (((side as string) === "end") ? "border-r border-border" : "border-l border-border")
+          )}
+          data-testid="subnav"
+        >
+          <Text size="sm" weight="semibold" class="px-4">
+            {nav.subTitle}
+          </Text>
+          <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.subTitle, landmarkLabel)) : nav.subTitle)}>
+            <List class="m-0 flex list-none flex-col gap-2 p-0">
+              <For each={nav.sub ?? []}>{(s) => (
+                <ListItem>
+                  <MenuEntry
+                    href={s.href}
+                    class={cn(
+                      "flex items-center gap-4 rounded py-2 text-sm",
+                      (true ? "px-4" : "justify-center px-2"),
+                      ((s.id === nav.subCurrent) ? "bg-muted font-medium" : "")
+                    )}
+                    current={(s.id === nav.subCurrent)}
+                    size="sm"
+                    testid="item"
+                  >
+                    <LucideIcon name={s.icon} size={16} />
+                    <Inline class={(true ? "" : "sr-only")}>
+                      {s.name}
+                    </Inline>
+                  </MenuEntry>
+                </ListItem>
+              )}</For>
+            </List>
+          </NavBlock>
+        </Box>
+      ) : null}
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/shell-topbar.tsx b/packages/solid/ui/src/components/shell-topbar.tsx
new file mode 100644
index 0000000..f46b8cf
--- /dev/null
+++ b/packages/solid/ui/src/components/shell-topbar.tsx
@@ -0,0 +1,107 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shell-parts.ts
+/**
+ * The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar),
+ * an optional search field, and the signed-in person.
+ */
+import { For, type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+import { MediaFrame } from "../components/media-frame";
+import { MenuEntry } from "../components/menu-entry";
+import { NavBlock } from "../components/nav-block";
+import { SearchPalette } from "../components/search-palette";
+import { cn, tpl, uniqLabel } from "../utils";
+import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+export type ShellTopbarProps = {
+  nav: ShellNav;
+  brand?: "show" | "hide";
+  links?: "show" | "hide";
+  search?: "show" | "hide";
+  landmarkLabel?: string;
+};
+
+export function ShellTopbar({
+  nav,
+  brand = "show",
+  links = "hide",
+  search = "show",
+  landmarkLabel,
+}: ShellTopbarProps) {
+  return (
+    <Block
+      tag="header"
+      class="flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6"
+      data-testid="topbar"
+      aria-label={landmarkLabel}
+    >
+      {((brand as string) === "show") ? (
+        <Group gap="2" align="center" class="shrink-0" data-testid="brand">
+          <LucideIcon name="layers" size={24} />
+          <Text size="base" weight="bold" class={(true ? "" : "sr-only")}>
+            {nav.brand}
+          </Text>
+        </Group>
+      ) : null}
+      {(((links as string) === "show") && ((nav.links?.length ?? 0) > 0)) ? (
+        <NavBlock
+          label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.label, landmarkLabel)) : nav.label)}
+          class="hidden lg:block"
+        >
+          <List class="m-0 flex list-none items-center gap-2 p-0">
+            <For each={nav.links ?? []}>{(l) => (
+              <ListItem>
+                <MenuEntry
+                  href={l.href}
+                  class={cn(
+                    "flex items-center gap-4 rounded py-2 text-sm",
+                    (true ? "px-4" : "justify-center px-2"),
+                    ((l.id === nav.current) ? "bg-muted font-medium" : "")
+                  )}
+                  current={(l.id === nav.current)}
+                  size="sm"
+                  testid="item"
+                >
+                  <LucideIcon name={l.icon} size={16} />
+                  <Inline class={(true ? "" : "sr-only")}>
+                    {l.name}
+                  </Inline>
+                </MenuEntry>
+              </ListItem>
+            )}</For>
+          </List>
+        </NavBlock>
+      ) : null}
+      {((search as string) === "show") ? (
+        <>
+          {((links as string) === "show") ? (
+            <Box class="ml-auto hidden w-64 shrink-0 xl:block">
+              <SearchPalette label={nav.search} shortcut={nav.shortcut} />
+            </Box>
+          ) : (
+            <SearchPalette label={nav.search} shortcut={nav.shortcut} />
+          )}
+        </>
+      ) : null}
+      <Group
+        gap="4"
+        align="center"
+        class={
+          ((links as string) === "show") && ((search as string) === "show") ? "shrink-0"
+          : "ml-auto shrink-0"
+        }
+        data-testid="user"
+      >
+        <LucideIcon name="bell" size={20} class="text-muted-foreground" />
+        <MediaFrame alt={nav.userName} ratio="1/1" class="size-8 shrink-0 rounded-full" />
+      </Group>
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/sidebar-panel.tsx b/packages/solid/ui/src/components/sidebar-panel.tsx
new file mode 100644
index 0000000..e65f7fc
--- /dev/null
+++ b/packages/solid/ui/src/components/sidebar-panel.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/** The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer. */
+import { type JSX } from "solid-js";
+import { Block } from "../primitives/block/block";
+import { cn, variants } from "../utils";
+
+/** SidebarPanel: the classes of each value (shadcn/cva style). */
+export const sidebarPanelVariants = variants({
+  base: "flex shrink-0 flex-col",
+  variants: {
+    variant: {
+      chat: "w-68 gap-2 pt-6 pr-4 pb-6 pl-4",
+      creator: "w-62 justify-between gap-4 p-4",
+    },
+  },
+  defaultVariants: { variant: "chat" },
+});
+
+export type SidebarPanelProps = {
+  variant?: "chat" | "creator";
+  landmarkLabel?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function SidebarPanel({ variant, landmarkLabel, class: className, children }: SidebarPanelProps) {
+  return (
+    <Block
+      tag="aside"
+      class={cn(sidebarPanelVariants({ variant: variant }), className)}
+      data-slot="sidebar-panel"
+      data-variant={(variant ?? "chat")}
+      aria-label={landmarkLabel}
+    >
+      {children}
+    </Block>
+  );
+}
diff --git a/packages/solid/ui/src/components/slot-grid.tsx b/packages/solid/ui/src/components/slot-grid.tsx
new file mode 100644
index 0000000..ee63f7d
--- /dev/null
+++ b/packages/solid/ui/src/components/slot-grid.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+/**
+ * Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck
+ * through. One radio group (`name`) across all days. Static markup.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { Label } from "../primitives/label/label";
+import { Radio } from "../primitives/radio/radio";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { cn, tpl } from "../utils";
+import type { Day } from "./slot-grid.types";
+
+export type SlotGridProps = {
+  days: Day[];
+  name: string;
+  item?: "card" | "plain";
+};
+
+export function SlotGrid({ days, name, item = "card" }: SlotGridProps) {
+  return (
+    <Stack gap="4" align="stretch" data-testid="days">
+      <For each={days ?? []}>{(d) => (
+        <Stack
+          gap="4"
+          class={
+            (item as string) === "card" ? "rounded bg-card inset-ring inset-ring-border p-4"
+            : "border-b border-border pb-4"
+          }
+          data-testid="day"
+        >
+          <Group gap="4" align="baseline" justify="between" class="flex-wrap">
+            <Text size="sm" weight="semibold">
+              {d.title}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {d.note}
+            </Text>
+          </Group>
+          <Box class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+            <For each={d.slots ?? []}>{(s) => (
+              <Label
+                class={"flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted " +
+                  "has-checked:inset-ring-foreground"}
+              >
+                <Radio name={name} value={tpl("{0} {1}", d.id, s)} />
+                <Inline>
+                  {s}
+                </Inline>
+              </Label>
+            )}</For>
+            <For each={d.closed ?? []}>{(s) => (
+              <Label
+                class={cn(
+                  "flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted " +
+                    "has-checked:inset-ring-foreground",
+                  "text-muted-foreground line-through"
+                )}
+              >
+                <Radio name={name} value={tpl("{0} {1}", d.id, s)} disabled={true} />
+                <Inline>
+                  {s}
+                </Inline>
+              </Label>
+            )}</For>
+          </Box>
+        </Stack>
+      )}</For>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/slot-grid.types.ts b/packages/solid/ui/src/components/slot-grid.types.ts
new file mode 100644
index 0000000..b369480
--- /dev/null
+++ b/packages/solid/ui/src/components/slot-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Day = {
+  id: string;
+  title: string;
+  note: string;
+  slots: string[];
+  closed: string[];
+};
diff --git a/packages/solid/ui/src/components/stat-figure.tsx b/packages/solid/ui/src/components/stat-figure.tsx
new file mode 100644
index 0000000..53ecbee
--- /dev/null
+++ b/packages/solid/ui/src/components/stat-figure.tsx
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/marketing.ts
+/** One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon. */
+import { type JSX } from "solid-js";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { StatTile } from "../components/stat-tile";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+import type { Stat } from "../blocks/stats-band.types";
+
+export type StatFigureProps = {
+  stat: Stat;
+  item?: "plain" | "card" | "icon";
+  align?: "start" | "center";
+};
+
+export function StatFigure({ stat, item = "plain", align = "center" }: StatFigureProps) {
+  return (
+    <>
+      {((item as string) === "card") ? (
+        <StatTile label={stat.label} value={stat.value} icon={stat.icon} hint={stat.hint} />
+      ) : (
+        <Stack
+          gap="6"
+          align={(((align as string) === "center") ? "center" : "start")}
+          class={cn((((align as string) === "center") ? "text-center" : ""), defaults.stats.column)}
+          data-testid="item"
+        >
+          {((item as string) === "icon") ? (
+            <LucideIcon name={stat.icon} size={24} />
+          ) : null}
+          <Stack gap="2" align={(((align as string) === "center") ? "center" : "start")}>
+            <Text size="5xl" weight="medium" class={cn("flex items-center", defaults.stats.figure)}>
+              {stat.value}
+            </Text>
+            <Text size="sm" weight="semibold" class="leading-5 text-muted-foreground">
+              {stat.label}
+            </Text>
+          </Stack>
+        </Stack>
+      )}
+    </>
+  );
+}
diff --git a/packages/solid/ui/src/components/stat-tile.tsx b/packages/solid/ui/src/components/stat-tile.tsx
new file mode 100644
index 0000000..75f97b8
--- /dev/null
+++ b/packages/solid/ui/src/components/stat-tile.tsx
@@ -0,0 +1,71 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the
+ * tile is a plain figure.
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { IconBadge } from "../primitives/iconbadge/iconbadge";
+import { Link } from "../primitives/link/link";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import { Text } from "../primitives/text/text";
+
+export type StatTileProps = {
+  label: string;
+  value: string | number;
+  icon: string;
+  href?: string;
+  hint?: string;
+};
+
+export function StatTile({ label, value, icon, href, hint }: StatTileProps) {
+  return (
+    <Box class="min-w-0">
+      {href ? (
+        <Link
+          href={href}
+          variant="block"
+          class={"flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border " +
+            "hover:bg-muted"}
+        >
+          <Box class="flex items-center justify-between gap-2">
+            <Text class="m-0 text-xs font-bold text-muted-foreground">
+              {label}
+            </Text>
+            <IconBadge size="sm">
+              <LucideIcon name={icon} size={16} />
+            </IconBadge>
+          </Box>
+          <Text size="2xl" weight="bold" class="m-0 leading-8">
+            {value}
+          </Text>
+          {hint ? (
+            <Text class="m-0 text-xs font-medium text-muted-foreground">
+              {hint}
+            </Text>
+          ) : null}
+        </Link>
+      ) : (
+        <Box class="flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border">
+          <Box class="flex items-center justify-between gap-2">
+            <Text class="m-0 text-xs font-bold text-muted-foreground">
+              {label}
+            </Text>
+            <IconBadge size="sm">
+              <LucideIcon name={icon} size={16} />
+            </IconBadge>
+          </Box>
+          <Text size="2xl" weight="bold" class="m-0 leading-8">
+            {value}
+          </Text>
+          {hint ? (
+            <Text class="m-0 text-xs font-medium text-muted-foreground">
+              {hint}
+            </Text>
+          ) : null}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/story-dots.tsx b/packages/solid/ui/src/components/story-dots.tsx
new file mode 100644
index 0000000..6dba97c
--- /dev/null
+++ b/packages/solid/ui/src/components/story-dots.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/story-tabs-parts.ts
+/** One dot per step of StoryTabs; the dot of the active step is filled. */
+import { For, type JSX } from "solid-js";
+import { Group } from "../primitives/group/group";
+import { Inline } from "../primitives/inline/inline";
+import { cn } from "../utils";
+import type { Milestone } from "../blocks/milestone-timeline.types";
+import type { StoryLabels } from "../blocks/story-tabs.types";
+
+export type StoryDotsProps = {
+  steps: Milestone[];
+  active: string;
+};
+
+export function StoryDots({ steps, active }: StoryDotsProps) {
+  return (
+    <Group gap="2" align="center">
+      <For each={steps ?? []}>{(s) => (
+        <Inline
+          class={cn("size-2 rounded-full", ((s.id === active) ? "bg-primary" : "bg-border"))}
+          data-testid="story-dot"
+        />
+      )}</For>
+    </Group>
+  );
+}
diff --git a/packages/solid/ui/src/components/story-panel.tsx b/packages/solid/ui/src/components/story-panel.tsx
new file mode 100644
index 0000000..23f5000
--- /dev/null
+++ b/packages/solid/ui/src/components/story-panel.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/story-tabs-parts.ts
+/**
+ * The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag
+ * in a muted box.
+ */
+import { type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Group } from "../primitives/group/group";
+import { Stack } from "../primitives/stack/stack";
+import { Text } from "../primitives/text/text";
+import { Title } from "../primitives/title/title";
+import { tpl } from "../utils";
+import type { Milestone } from "../blocks/milestone-timeline.types";
+import type { StoryLabels } from "../blocks/story-tabs.types";
+
+export type StoryPanelProps = {
+  s: Milestone;
+  index: number;
+  total: number;
+  labels: StoryLabels;
+};
+
+export function StoryPanel({ s, index, total, labels }: StoryPanelProps) {
+  return (
+    <Stack
+      gap="4"
+      align="stretch"
+      class="rounded bg-card inset-ring inset-ring-border p-6"
+      data-testid="story-panel"
+    >
+      <Group gap="2" align="center">
+        <Badge variant="secondary" size="sm">
+          {s.date}
+        </Badge>
+        <Text size="xs" class="text-muted-foreground">
+          {tpl(labels.step, ((index + 1) == null ? undefined : String((index + 1))), (total == null ? undefined : String(total)))}
+        </Text>
+      </Group>
+      <Title as={3} size="xl" weight="semibold">
+        {s.title}
+      </Title>
+      <Text size="sm" class="text-muted-foreground">
+        {s.text}
+      </Text>
+      <Box class="rounded bg-muted p-4">
+        <Text size="sm" weight="semibold">
+          {s.tag}
+        </Text>
+      </Box>
+    </Stack>
+  );
+}
diff --git a/packages/solid/ui/src/components/switcher-item.tsx b/packages/solid/ui/src/components/switcher-item.tsx
new file mode 100644
index 0000000..a1f5929
--- /dev/null
+++ b/packages/solid/ui/src/components/switcher-item.tsx
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/** One item of a Switcher (default or active). Pass the same size and layout as the Switcher. */
+import { type JSX } from "solid-js";
+import { ButtonPlain } from "../primitives/button-plain/button-plain";
+import { cn, variants } from "../utils";
+
+/** SwitcherItem: the classes of each value (shadcn/cva style). */
+export const switcherItemVariants = variants({
+  base:
+    "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-bold text-muted-foreground inset-ring " +
+    "inset-ring-transparent rounded",
+  variants: {
+    size: {
+      sm: "h-6 gap-1 px-3 text-xs",
+      default: "h-8 gap-2 px-4 text-sm",
+      lg: "h-10 gap-2 px-5 text-sm",
+    },
+    state: {
+      default: "",
+      active: "bg-background text-foreground inset-ring-border",
+    },
+    layout: {
+      text: "",
+      icon: "[&>svg]:size-4",
+    },
+  },
+  defaultVariants: { size: "default", state: "default", layout: "text" },
+  compoundVariants: [
+    { layout: "icon", size: "sm", class: "w-6 px-0" },
+    { layout: "icon", size: "default", class: "w-8 px-0" },
+    { layout: "icon", size: "lg", class: "w-10 px-0" },
+  ],
+});
+
+export type SwitcherItemProps = {
+  active?: boolean;
+  size?: "sm" | "default" | "lg";
+  layout?: "text" | "icon";
+  class?: string;
+  children?: JSX.Element;
+  onClick?: () => void;
+};
+
+export function SwitcherItem({
+  active = false,
+  size = "default",
+  layout = "text",
+  class: className,
+  children,
+  onClick,
+}: SwitcherItemProps) {
+  return (
+    <ButtonPlain
+      type="button"
+      role="tab"
+      class={cn(
+        switcherItemVariants({ size: size, layout: layout, state: (active ? "active" : "default") }),
+        className
+      )}
+      aria-selected={active}
+      tabindex={(active ? 0 : -1)}
+      data-slot="switcher-item"
+      data-state={(active ? "active" : "default")}
+      onClick={() => onClick?.()}
+    >
+      {children}
+    </ButtonPlain>
+  );
+}
diff --git a/packages/solid/ui/src/components/switcher.tsx b/packages/solid/ui/src/components/switcher.tsx
new file mode 100644
index 0000000..bcd93cb
--- /dev/null
+++ b/packages/solid/ui/src/components/switcher.tsx
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/patterns.ts
+/**
+ * A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down
+ * through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown
+ * (horizontal, activate).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { cn, variants } from "../utils";
+
+/** Switcher: the classes of each value (shadcn/cva style). */
+export const switcherVariants = variants({
+  base: "inline-flex max-w-full items-center gap-1 overflow-x-auto bg-muted inset-ring inset-ring-border rounded",
+  variants: {
+    size: {
+      sm: "h-8 p-1",
+      default: "h-10 p-1",
+      lg: "h-12 p-1",
+    },
+    layout: {
+      text: "",
+      icon: "gap-0",
+    },
+  },
+  defaultVariants: { size: "default", layout: "text" },
+});
+
+export type SwitcherProps = {
+  size?: "sm" | "default" | "lg";
+  layout?: "text" | "icon";
+  label?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export function Switcher({
+  size = "default",
+  layout = "text",
+  label,
+  class: className,
+  children,
+}: SwitcherProps) {
+  return (
+    <Box
+      class={cn(switcherVariants({ size: size, layout: layout }), className)}
+      role="tablist"
+      aria-label={label}
+      data-slot="switcher"
+    >
+      {children}
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/table-toolbar.tsx b/packages/solid/ui/src/components/table-toolbar.tsx
new file mode 100644
index 0000000..f24f9ae
--- /dev/null
+++ b/packages/solid/ui/src/components/table-toolbar.tsx
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * The toolbar above a table: search and filter controls on the left (children), the actions on the right
+ * (`actions`). One tab stop group (role toolbar).
+ */
+import { type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { cn } from "../utils";
+
+export type TableToolbarProps = {
+  label: string;
+  class?: string;
+  children?: JSX.Element;
+  actions?: JSX.Element;
+};
+
+export function TableToolbar({ label, class: className, children, actions }: TableToolbarProps) {
+  return (
+    <Box
+      class={cn("flex flex-wrap items-center justify-between gap-2", className)}
+      role="toolbar"
+      aria-label={label}
+      data-slot="table-toolbar"
+    >
+      <Inline class="flex min-w-0 flex-wrap items-center gap-2">
+        {children}
+      </Inline>
+      <Inline class="flex flex-wrap items-center gap-2">
+        {actions}
+      </Inline>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/timeline.tsx b/packages/solid/ui/src/components/timeline.tsx
new file mode 100644
index 0000000..bcdaf4d
--- /dev/null
+++ b/packages/solid/ui/src/components/timeline.tsx
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+/**
+ * A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time.
+ * Newest first or oldest first is the caller's order.
+ */
+import { For, type JSX } from "solid-js";
+import { Box } from "../primitives/box/box";
+import { Inline } from "../primitives/inline/inline";
+import { List } from "../primitives/list/list";
+import { ListItem } from "../primitives/list/list-item";
+import { Text } from "../primitives/text/text";
+import { at, cn } from "../utils";
+import type { TimelineItem } from "./timeline.types";
+
+const TONE_DOT: Record<string, string> = {
+  "gray": "bg-muted-foreground",
+  "green": "bg-emerald-500",
+  "blue": "bg-blue-500",
+  "amber": "bg-amber-500",
+  "red": "bg-red-500",
+};
+
+export type TimelineProps = {
+  items: TimelineItem[];
+  class?: string;
+};
+
+export function Timeline({ items, class: className }: TimelineProps) {
+  return (
+    <Box class={cn("min-w-0", className)} data-slot="timeline">
+      <List class="m-0 flex list-none flex-col p-0">
+        <For each={items ?? []}>{(item, iOf) => { const i = iOf(); return (
+          <ListItem class="relative flex min-w-0 gap-4 pb-4 last:pb-0" data-event={item.id}>
+            <Box class="relative flex w-2 shrink-0 justify-center">
+              {(i < ((items?.length ?? 0) - 1)) ? (
+                <Inline class="absolute top-4 -bottom-0 w-px bg-border" />
+              ) : null}
+              <Inline class={cn("mt-2 size-2 rounded-full", at(TONE_DOT, (item.tone ?? "gray")))} />
+            </Box>
+            <Box class="flex min-w-0 flex-1 flex-col gap-0">
+              <Box class="flex flex-wrap items-baseline justify-between gap-x-4">
+                <Text class="m-0 text-sm font-bold text-foreground">
+                  {item.title}
+                </Text>
+                <Text class="m-0 shrink-0 text-xs font-medium text-muted-foreground">
+                  {item.time}
+                </Text>
+              </Box>
+              {item.text ? (
+                <Text class="m-0 text-xs font-medium text-muted-foreground">
+                  {item.text}
+                </Text>
+              ) : null}
+            </Box>
+          </ListItem>
+        ); }}</For>
+      </List>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/components/timeline.types.ts b/packages/solid/ui/src/components/timeline.types.ts
new file mode 100644
index 0000000..9474daa
--- /dev/null
+++ b/packages/solid/ui/src/components/timeline.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+
+export type TimelineItem = {
+  id: string;
+  title: string;
+  text?: string;
+  time: string;
+  tone?: string;
+};
diff --git a/packages/solid/ui/src/components/topic-chips.tsx b/packages/solid/ui/src/components/topic-chips.tsx
new file mode 100644
index 0000000..b2afad1
--- /dev/null
+++ b/packages/solid/ui/src/components/topic-chips.tsx
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/**
+ * A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band
+ * with an icon per topic; default: outlined.
+ */
+import { For, type JSX } from "solid-js";
+import { Button } from "../primitives/button/button";
+import { Group } from "../primitives/group/group";
+import { LucideIcon } from "../primitives/lucide-icon/lucide-icon";
+import type { Topic } from "./topic-chips.types";
+
+export type TopicChipsProps = {
+  topics: Topic[];
+  tone?: "default" | "inverse";
+};
+
+export function TopicChips({ topics, tone = "default" }: TopicChipsProps) {
+  return (
+    <Group gap="2" align="center" justify="center" class="flex-wrap" data-testid="hero-topics">
+      <For each={topics ?? []}>{(topic) => (
+        <>
+          {((tone as string) === "inverse") ? (
+            <Button
+              href={topic.href}
+              variant="ghost"
+              size="sm"
+              class="gap-2 text-background inset-ring-background/30 hover:bg-background/10"
+              data-testid="hero-topic"
+            >
+              {topic.icon ? (
+                <LucideIcon name={topic.icon} size={16} />
+              ) : null}
+              {topic.name}
+            </Button>
+          ) : (
+            <Button href={topic.href} variant="outline" size="sm" data-testid="hero-topic">
+              {topic.name}
+            </Button>
+          )}
+        </>
+      )}</For>
+    </Group>
+  );
+}
diff --git a/packages/solid/ui/src/components/topic-chips.types.ts b/packages/solid/ui/src/components/topic-chips.types.ts
new file mode 100644
index 0000000..9275c96
--- /dev/null
+++ b/packages/solid/ui/src/components/topic-chips.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+
+export type Topic = {
+  id: string;
+  name: string;
+  icon: string;
+  href?: string;
+};
diff --git a/packages/solid/ui/src/components/weighted-title.tsx b/packages/solid/ui/src/components/weighted-title.tsx
new file mode 100644
index 0000000..b956c95
--- /dev/null
+++ b/packages/solid/ui/src/components/weighted-title.tsx
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+/** A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text. */
+import { For, type JSX } from "solid-js";
+import { Inline } from "../primitives/inline/inline";
+import { Title } from "../primitives/title/title";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+export type WeightedTitleProps = {
+  id: string;
+  title: string;
+  weights?: readonly string[];
+  level?: 1 | 2;
+};
+
+export function WeightedTitle({ id, title, weights, level = 1 }: WeightedTitleProps) {
+  return (
+    <Title
+      as={level}
+      size="5xl"
+      weight="semibold"
+      class={cn("text-center tracking-tight text-background", defaults.hero.title)}
+      id={id}
+    >
+      <For each={(title ?? "").split(" ") ?? []}>{(word, iOf) => { const i = iOf(); return (
+        <>
+          <Inline class={weights?.[i]}>
+            {word}
+          </Inline>
+          {" "}
+        </>
+      ); }}</For>
+    </Title>
+  );
+}
diff --git a/packages/solid/ui/src/components/zone-rows.tsx b/packages/solid/ui/src/components/zone-rows.tsx
new file mode 100644
index 0000000..2155250
--- /dev/null
+++ b/packages/solid/ui/src/components/zone-rows.tsx
@@ -0,0 +1,94 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/shop-parts.ts
+/**
+ * The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the
+ * minimum order, the time and an express badge.
+ */
+import { For, type JSX } from "solid-js";
+import { Badge } from "../primitives/badge/badge";
+import { Box } from "../primitives/box/box";
+import { Stack } from "../primitives/stack/stack";
+import { Table } from "../primitives/table/table";
+import { TableBody } from "../primitives/table/table-body";
+import { TableCaption } from "../primitives/table/table-caption";
+import { TableCell } from "../primitives/table/table-cell";
+import { TableHead } from "../primitives/table/table-head";
+import { TableHeadCell } from "../primitives/table/table-head-cell";
+import { TableRow } from "../primitives/table/table-row";
+import { Text } from "../primitives/text/text";
+import { fmtMoney } from "../utils";
+import type { Zone, ZoneLabels } from "../blocks/zone-table.types";
+
+export type ZoneRowsProps = {
+  zones: Zone[];
+  labels: ZoneLabels;
+};
+
+export function ZoneRows({ zones, labels }: ZoneRowsProps) {
+  return (
+    <Box class="w-full overflow-x-auto rounded inset-ring inset-ring-border">
+      <Table class="w-full text-left text-sm" data-testid="zone-table">
+        <TableCaption class="sr-only">
+          {labels.caption}
+        </TableCaption>
+        <TableHead class="bg-muted">
+          <TableRow>
+            <TableHeadCell scope="col" class="px-4 py-2">
+              {labels.zone}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-2">
+              {labels.price}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-2">
+              {labels.freeFrom}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="hidden py-2 md:table-cell">
+              {labels.minOrder}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-2">
+              {labels.time}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="hidden py-2 pr-4 sm:table-cell">
+              {labels.express}
+            </TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <For each={zones ?? []}>{(z) => (
+            <TableRow class="border-t border-border" data-testid="item">
+              <TableCell class="px-4 py-4">
+                <Stack gap="0">
+                  <Text size="sm" weight="semibold">
+                    {z.name}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {z.area}
+                  </Text>
+                </Stack>
+              </TableCell>
+              <TableCell class="font-medium">
+                {fmtMoney(z.price, z.currency)}
+              </TableCell>
+              <TableCell>
+                {fmtMoney(z.freeFrom, z.currency)}
+              </TableCell>
+              <TableCell class="hidden md:table-cell">
+                {fmtMoney(z.minOrder, z.currency)}
+              </TableCell>
+              <TableCell>
+                {z.time}
+              </TableCell>
+              <TableCell class="hidden pr-4 sm:table-cell">
+                {z.express ? (
+                  <Badge variant="secondary" size="default">
+                    {z.express}
+                  </Badge>
+                ) : null}
+              </TableCell>
+            </TableRow>
+          )}</For>
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}
diff --git a/packages/solid/ui/src/index.ts b/packages/solid/ui/src/index.ts
new file mode 100644
index 0000000..7b02a9a
--- /dev/null
+++ b/packages/solid/ui/src/index.ts
@@ -0,0 +1,391 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/plan.ts (the barrel lists every spec)
+
+// primitives
+export * from "./primitives/alert/alert";
+export * from "./primitives/badge/badge";
+export * from "./primitives/block/block";
+export * from "./primitives/box/box";
+export * from "./primitives/breadcrumb/breadcrumb";
+export * from "./primitives/button-plain/button-plain";
+export * from "./primitives/button/button";
+export * from "./primitives/card/card";
+export * from "./primitives/card/card-header";
+export * from "./primitives/card/card-title";
+export * from "./primitives/card/card-description";
+export * from "./primitives/card/card-content";
+export * from "./primitives/card/card-footer";
+export * from "./primitives/checkbox/checkbox";
+export * from "./primitives/container/container";
+export * from "./primitives/form/fieldset";
+export * from "./primitives/form/legend";
+export * from "./primitives/form/data-list";
+export * from "./primitives/form/data-option";
+export * from "./primitives/form/output";
+export * from "./primitives/form/meter";
+export * from "./primitives/form/progress";
+export * from "./primitives/dialog/dialog";
+export * from "./primitives/disclosure/disclosure";
+export * from "./primitives/disclosure/summary";
+export * from "./primitives/form/form";
+export * from "./primitives/form/form-item";
+export * from "./primitives/form/form-description";
+export * from "./primitives/form/form-message";
+export * from "./primitives/grid/grid";
+export * from "./primitives/grid/grid-col";
+export * from "./primitives/group/group";
+export * from "./primitives/icon/icon";
+export * from "./primitives/iconbadge/iconbadge";
+export * from "./primitives/image/image";
+export * from "./primitives/image/picture";
+export * from "./primitives/image/source";
+export * from "./primitives/inline/inline";
+export * from "./primitives/input/input";
+export * from "./primitives/label/label";
+export * from "./primitives/linebreak/linebreak";
+export * from "./primitives/link-plain/link-plain";
+export * from "./primitives/link/link";
+export * from "./primitives/list/list";
+export * from "./primitives/list/list-item";
+export * from "./primitives/lucide-icon/lucide-icon";
+export * from "./primitives/radio/radio";
+export * from "./primitives/range/range";
+export * from "./primitives/select/select";
+export * from "./primitives/select/select-option";
+export * from "./primitives/select/opt-group";
+export * from "./primitives/separator/separator";
+export * from "./primitives/sheet/sheet";
+export * from "./primitives/sheet/sheet-trigger";
+export * from "./primitives/sheet/sheet-close";
+export * from "./primitives/skeleton/skeleton";
+export * from "./primitives/stack/stack";
+export * from "./primitives/switch/switch";
+export * from "./primitives/table/table";
+export * from "./primitives/table/table-caption";
+export * from "./primitives/table/table-head";
+export * from "./primitives/table/table-body";
+export * from "./primitives/table/table-foot";
+export * from "./primitives/table/table-row";
+export * from "./primitives/table/table-head-cell";
+export * from "./primitives/table/table-cell";
+export * from "./primitives/table/table-col-group";
+export * from "./primitives/table/table-col";
+export * from "./primitives/text/text";
+export * from "./primitives/textarea/textarea";
+export * from "./primitives/themetoggle/themetoggle";
+export * from "./primitives/title/title";
+
+// components
+export * from "./components/app-main";
+export * from "./components/article-block";
+export * from "./components/auth-form";
+export * from "./components/cart-summary-card";
+export type * from "./components/cart-summary-card.types";
+export * from "./components/cart-table";
+export * from "./components/checkout-step";
+export * from "./components/checkout-submit";
+export * from "./components/compare-mark";
+export * from "./components/cta-actions";
+export type * from "./components/cta-actions.types";
+export * from "./components/cta-proof-items";
+export * from "./components/drawer-lines";
+export * from "./components/faq-cards";
+export * from "./components/faq-disclosures";
+export * from "./components/faq-finder";
+export * from "./components/faq-help";
+export * from "./components/feature-cards";
+export * from "./components/feature-metric-cards";
+export * from "./components/feature-pairs";
+export * from "./components/feature-rows";
+export * from "./components/feature-stat-rows";
+export * from "./components/figure-block";
+export * from "./components/footer-brand";
+export * from "./components/footer-card";
+export * from "./components/footer-channels";
+export * from "./components/footer-columns";
+export * from "./components/footer-contacts";
+export * from "./components/footer-figures";
+export * from "./components/footer-group-cards";
+export * from "./components/footer-link-columns";
+export * from "./components/footer-points";
+export * from "./components/footer-signup-card";
+export * from "./components/footer-sitemap";
+export * from "./components/hero-badge";
+export * from "./components/hero-head";
+export * from "./components/hero-split-extras";
+export * from "./components/hero-split-media";
+export * from "./components/job-cards";
+export * from "./components/logo-slot";
+export * from "./components/media-contacts";
+export * from "./components/media-figures";
+export * from "./components/media-posts";
+export * from "./components/media-review";
+export * from "./components/media-steps";
+export * from "./components/media-topics";
+export * from "./components/member-row";
+export * from "./components/menu-entry";
+export * from "./components/nav-actions";
+export * from "./components/nav-bar-menu";
+export * from "./components/nav-block";
+export * from "./components/nav-links";
+export * from "./components/number-field";
+export * from "./components/offer-media";
+export * from "./components/order-rows";
+export * from "./components/over-media";
+export * from "./components/page-aside";
+export * from "./components/page-crumbs";
+export * from "./components/payment-options";
+export type * from "./components/payment-options.types";
+export * from "./components/post-actions";
+export * from "./components/post-author";
+export * from "./components/post-feature";
+export * from "./components/post-mini-card";
+export * from "./components/post-outline";
+export * from "./components/post-overlay-card";
+export * from "./components/post-stats";
+export * from "./components/post-tags";
+export * from "./components/product-gallery";
+export * from "./components/product-price";
+export * from "./components/project-tiles";
+export * from "./components/prompt-composer";
+export * from "./components/quote-card";
+export * from "./components/quote-figures";
+export * from "./components/quote-logo-tiles";
+export * from "./components/quote-proof";
+export * from "./components/quote-rating-panel";
+export * from "./components/quote-slot";
+export * from "./components/search-palette";
+export * from "./components/shell-content";
+export * from "./components/shell-footer";
+export * from "./components/shell-sidebar";
+export * from "./components/shell-topbar";
+export * from "./components/slot-grid";
+export type * from "./components/slot-grid.types";
+export * from "./components/stat-figure";
+export * from "./components/story-dots";
+export * from "./components/story-panel";
+export * from "./components/topic-chips";
+export type * from "./components/topic-chips.types";
+export * from "./components/weighted-title";
+export * from "./components/zone-rows";
+export * from "./components/avatar";
+export * from "./components/badge-square";
+export * from "./components/bar-chart";
+export type * from "./components/bar-chart.types";
+export * from "./components/bulk-bar";
+export * from "./components/empty-state";
+export * from "./components/field";
+export * from "./components/logo-sidebar";
+export * from "./components/meter-row";
+export * from "./components/notice";
+export * from "./components/page-header";
+export * from "./components/pager";
+export * from "./components/panel";
+export * from "./components/pill";
+export * from "./components/range-field";
+export * from "./components/rating";
+export * from "./components/region";
+export * from "./components/search-field";
+export * from "./components/stat-tile";
+export * from "./components/table-toolbar";
+export * from "./components/timeline";
+export type * from "./components/timeline.types";
+export * from "./components/action-group";
+export * from "./components/backdrop";
+export * from "./components/code-window";
+export type * from "./components/code-window.types";
+export * from "./components/dropdown-item";
+export * from "./components/editor-tab";
+export * from "./components/file-tree-item";
+export * from "./components/file-tree";
+export * from "./components/icon-tab";
+export * from "./components/icon-tabs";
+export * from "./components/media-frame";
+export * from "./components/nav-item-row";
+export * from "./components/nav-item";
+export * from "./components/section-box";
+export * from "./components/section-column";
+export * from "./components/section-frame";
+export type * from "./components/section-frame.types";
+export * from "./components/section-head";
+export * from "./components/section-header";
+export * from "./components/sidebar-panel";
+export * from "./components/switcher-item";
+export * from "./components/switcher";
+
+// blocks
+export * from "./blocks/about-company";
+export * from "./blocks/about-me";
+export type * from "./blocks/about-me.types";
+export * from "./blocks/activity-feed";
+export type * from "./blocks/activity-feed.types";
+export * from "./blocks/announcement-bar";
+export * from "./blocks/app-shell";
+export type * from "./blocks/app-shell.types";
+export * from "./blocks/article-body";
+export type * from "./blocks/article-body.types";
+export * from "./blocks/auth-card";
+export type * from "./blocks/auth-card.types";
+export * from "./blocks/auth-layout";
+export type * from "./blocks/auth-layout.types";
+export * from "./blocks/before-after";
+export type * from "./blocks/before-after.types";
+export * from "./blocks/bento-grid";
+export type * from "./blocks/bento-grid.types";
+export * from "./blocks/bottom-nav";
+export * from "./blocks/cart-drawer";
+export type * from "./blocks/cart-drawer.types";
+export * from "./blocks/cart-list";
+export type * from "./blocks/cart-list.types";
+export * from "./blocks/category-nav";
+export type * from "./blocks/category-nav.types";
+export * from "./blocks/chart-panel";
+export type * from "./blocks/chart-panel.types";
+export * from "./blocks/checklist";
+export type * from "./blocks/checklist.types";
+export * from "./blocks/checkout-form";
+export type * from "./blocks/checkout-form.types";
+export * from "./blocks/comparison-table";
+export type * from "./blocks/comparison-table.types";
+export * from "./blocks/contact-form";
+export type * from "./blocks/contact-form.types";
+export * from "./blocks/cookie-banner";
+export * from "./blocks/credit-packs";
+export type * from "./blocks/credit-packs.types";
+export * from "./blocks/cta-band";
+export type * from "./blocks/cta-band.types";
+export * from "./blocks/cta-banner";
+export * from "./blocks/cta-proof";
+export type * from "./blocks/cta-proof.types";
+export * from "./blocks/dashboard-overview";
+export type * from "./blocks/dashboard-overview.types";
+export * from "./blocks/dashboard-shell";
+export type * from "./blocks/dashboard-shell.types";
+export * from "./blocks/delivery-info";
+export type * from "./blocks/delivery-info.types";
+export * from "./blocks/empty-panel";
+export * from "./blocks/error-page";
+export type * from "./blocks/error-page.types";
+export * from "./blocks/faq-list";
+export type * from "./blocks/faq-list.types";
+export * from "./blocks/faq-split";
+export type * from "./blocks/faq-split.types";
+export * from "./blocks/feature-accordion";
+export * from "./blocks/feature-grid";
+export type * from "./blocks/feature-grid.types";
+export * from "./blocks/feature-showcase";
+export * from "./blocks/feature-split";
+export * from "./blocks/feature-sticky";
+export * from "./blocks/feature-tabs";
+export * from "./blocks/footer-split";
+export type * from "./blocks/footer-split.types";
+export * from "./blocks/hero-classic";
+export type * from "./blocks/hero-classic.types";
+export * from "./blocks/hero-prompt";
+export type * from "./blocks/hero-prompt.types";
+export * from "./blocks/hero-split";
+export type * from "./blocks/hero-split.types";
+export * from "./blocks/icon-wall";
+export * from "./blocks/job-board";
+export type * from "./blocks/job-board.types";
+export * from "./blocks/kanban-board";
+export type * from "./blocks/kanban-board.types";
+export * from "./blocks/logo-cloud";
+export type * from "./blocks/logo-cloud.types";
+export * from "./blocks/logo-ribbon";
+export * from "./blocks/media-list";
+export type * from "./blocks/media-list.types";
+export * from "./blocks/mega-menu";
+export type * from "./blocks/mega-menu.types";
+export * from "./blocks/metric-row";
+export type * from "./blocks/metric-row.types";
+export * from "./blocks/milestone-timeline";
+export type * from "./blocks/milestone-timeline.types";
+export * from "./blocks/nav-bar";
+export type * from "./blocks/nav-bar.types";
+export * from "./blocks/newsletter-form";
+export * from "./blocks/order-summary";
+export type * from "./blocks/order-summary.types";
+export * from "./blocks/order-table";
+export type * from "./blocks/order-table.types";
+export * from "./blocks/page-intro";
+export * from "./blocks/page-trail";
+export type * from "./blocks/page-trail.types";
+export * from "./blocks/photo-gallery";
+export type * from "./blocks/photo-gallery.types";
+export * from "./blocks/post-card";
+export type * from "./blocks/post-card.types";
+export * from "./blocks/post-grid";
+export type * from "./blocks/post-grid.types";
+export * from "./blocks/post-header";
+export * from "./blocks/post-showcase";
+export * from "./blocks/post-split";
+export type * from "./blocks/post-split.types";
+export * from "./blocks/pricing-card";
+export type * from "./blocks/pricing-card.types";
+export * from "./blocks/pricing-tiers";
+export type * from "./blocks/pricing-tiers.types";
+export * from "./blocks/product-card";
+export type * from "./blocks/product-card.types";
+export * from "./blocks/product-detail";
+export type * from "./blocks/product-detail.types";
+export * from "./blocks/product-grid";
+export * from "./blocks/product-info";
+export type * from "./blocks/product-info.types";
+export * from "./blocks/profile-form";
+export type * from "./blocks/profile-form.types";
+export * from "./blocks/project-grid";
+export type * from "./blocks/project-grid.types";
+export * from "./blocks/proof-band";
+export * from "./blocks/quote-split";
+export type * from "./blocks/quote-split.types";
+export * from "./blocks/review-list";
+export type * from "./blocks/review-list.types";
+export * from "./blocks/shopping-cart";
+export type * from "./blocks/shopping-cart.types";
+export * from "./blocks/sidebar-nav";
+export * from "./blocks/signup-wizard";
+export type * from "./blocks/signup-wizard.types";
+export * from "./blocks/site-footer";
+export type * from "./blocks/site-footer.types";
+export * from "./blocks/site-header";
+export type * from "./blocks/site-header.types";
+export * from "./blocks/sitemap-footer";
+export type * from "./blocks/sitemap-footer.types";
+export * from "./blocks/skeleton-layout";
+export type * from "./blocks/skeleton-layout.types";
+export * from "./blocks/slot-board";
+export type * from "./blocks/slot-board.types";
+export * from "./blocks/stats-band";
+export type * from "./blocks/stats-band.types";
+export * from "./blocks/stepper";
+export * from "./blocks/steps-list";
+export type * from "./blocks/steps-list.types";
+export * from "./blocks/store-hero";
+export type * from "./blocks/store-hero.types";
+export * from "./blocks/store-locations";
+export type * from "./blocks/store-locations.types";
+export * from "./blocks/story-tabs";
+export type * from "./blocks/story-tabs.types";
+export * from "./blocks/support-channels";
+export * from "./blocks/team-grid";
+export type * from "./blocks/team-grid.types";
+export * from "./blocks/template-grid";
+export type * from "./blocks/template-grid.types";
+export * from "./blocks/testimonial-grid";
+export type * from "./blocks/testimonial-grid.types";
+export * from "./blocks/tour-callout";
+export * from "./blocks/usage-calculator";
+export type * from "./blocks/usage-calculator.types";
+export * from "./blocks/usp-strip";
+export * from "./blocks/video-grid";
+export * from "./blocks/video-modal";
+export type * from "./blocks/video-modal.types";
+export * from "./blocks/zone-table";
+export type * from "./blocks/zone-table.types";
+
+// presets
+export { defaults } from "./presets/defaults";
+
+// utils
+export { cn, variants, tpl, fmtNumber, fmtMoney, at, pageWindow, fitCols, uniqLabel } from "./utils";
diff --git a/packages/solid/ui/src/presets/defaults.ts b/packages/solid/ui/src/presets/defaults.ts
new file mode 100644
index 0000000..995f05b
--- /dev/null
+++ b/packages/solid/ui/src/presets/defaults.ts
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/presets/defaults.ts
+
+/**
+ * Default layout preset: the sizes of the landing blocks as Tailwind classes.
+ * Blocks combine these with token classes; swap the preset to resize every block at once.
+ *
+ * Numbers: ui8kit default sizes (Tailwind scale, no arbitrary values)
+ */
+export const defaults = {
+  /** small type steps for chips, badges and links */
+  text: {
+    tiny: "text-xs",
+    small: "text-sm",
+  },
+  hero: {
+    /** the inverse band: tall section, large bottom radius */
+    band: "min-h-160 rounded",
+    container: "max-w-7xl",
+    head: "gap-12",
+    badge: "w-48",
+    /** display title */
+    title: "text-5xl leading-tight",
+    /** one font-weight class per title word */
+    titleWeights: ["font-normal", "font-semibold", "font-normal", "font-semibold"],
+    column: "max-w-xl gap-16",
+    /** the prompt box */
+    composer: "h-40 max-w-xl rounded",
+    attach: "w-24",
+    promptLine: "h-10",
+    model: "w-24",
+  },
+  section: {
+    landing: "max-w-6xl",
+  },
+  media: {
+    rounded: "rounded",
+  },
+  templates: {
+    card: "h-60 w-64",
+    image: "h-40 w-58 rounded",
+    footer: "h-12 min-h-12",
+  },
+  stats: {
+    column: "min-h-28",
+    figure: "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18",
+    panel: "gap-24 rounded py-20",
+  },
+  features: {
+    cells: "rounded",
+  },
+  news: {
+    card: "h-56 w-64",
+    cover: "h-40 w-64 rounded",
+    title: "top-16",
+    strip: "h-12 min-h-12",
+  },
+  cta: {
+    panel: "rounded py-20",
+    title: "max-w-md",
+    text: "max-w-2xl",
+    button: "w-40",
+  },
+  logos: {
+    /** one centered row of logo slots */
+    row: "h-28 max-w-4xl gap-12 pb-8",
+    slot: "size-20",
+    /** the Lucide glyph inside a slot: half the slot */
+    glyph: 40,
+  },
+  footer: {
+    card: "h-72 gap-12 rounded",
+    brand: "w-48",
+    groups: "gap-x-16",
+  },
+} as const;
diff --git a/packages/solid/ui/src/primitives/alert/alert.tsx b/packages/solid/ui/src/primitives/alert/alert.tsx
new file mode 100644
index 0000000..43fbcdc8
--- /dev/null
+++ b/packages/solid/ui/src/primitives/alert/alert.tsx
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/alert.json
+/**
+ * Alert displays a static status or informational message.
+ * Renders a live region with role=status by default; children carry the message body.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty, oneOfOr } from "../../utils/expr";
+
+/** Alert: the classes of each value of each prop (shadcn/cva style). */
+export const alertVariants = variants({
+  base: "flex min-h-8 items-center gap-2 px-2 text-xs font-semibold inset-ring rounded",
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground inset-ring-border",
+      destructive: "bg-muted text-destructive inset-ring-destructive",
+      success: "bg-muted text-foreground inset-ring-border",
+      warning: "bg-muted text-foreground inset-ring-border",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export type AlertVariant = VariantKey<typeof alertVariants, "variant">;
+
+/**
+ * Alert renders a div with alert or status semantics.
+ */
+export type AlertProps = Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "class" | "children" | "variant" | "role" | "aria-live"
+> & {
+  variant?: AlertVariant;
+  role?: "status" | "alert";
+  "aria-live"?: "off" | "polite" | "assertive";
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Alert: Component<AlertProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "role", "aria-live", "class", "children"]);
+  const cls = () => cn(alertVariants({ variant: local.variant }), local.class);
+  return (
+    <div
+      class={cls() || undefined}
+      data-slot="alert"
+      role={oneOfOr(local.role, "status", "status", "alert")}
+      aria-live={defaultIfEmpty(local["aria-live"], "polite")}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/badge/badge.tsx b/packages/solid/ui/src/primitives/badge/badge.tsx
new file mode 100644
index 0000000..3699d6a
--- /dev/null
+++ b/packages/solid/ui/src/primitives/badge/badge.tsx
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/badge.json
+/**
+ * Badge shows a short status label.
+ * Badge uses variant and size presets.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Badge: the classes of each value of each prop (shadcn/cva style). */
+export const badgeVariants = variants({
+  base: "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+  variants: {
+    size: {
+      sm: "h-5 px-2 text-xs",
+      default: "h-6 px-3 text-xs",
+      lg: "h-8 px-4 text-sm",
+    },
+    variant: {
+      default: "bg-primary text-primary-foreground inset-ring-primary",
+      secondary: "bg-muted text-foreground inset-ring-transparent",
+      outline: "bg-transparent text-foreground inset-ring-border",
+      destructive:
+        "bg-destructive text-white inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 " +
+        "dark:focus-visible:ring-destructive/40",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type BadgeVariant = VariantKey<typeof badgeVariants, "variant">;
+export type BadgeSize = VariantKey<typeof badgeVariants, "size">;
+
+/**
+ * Badge renders label text in a div wrapper.
+ */
+export type BadgeProps = Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "class" | "children" | "variant" | "size"
+> & {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Badge: Component<BadgeProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "class", "children"]);
+  const cls = () => cn(badgeVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <div class={cls() || undefined} data-slot="badge" {...rest}>
+      {local.children}
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/block/block.tsx b/packages/solid/ui/src/primitives/block/block.tsx
new file mode 100644
index 0000000..4699427
--- /dev/null
+++ b/packages/solid/ui/src/primitives/block/block.tsx
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/block.json
+/**
+ * Block is the one semantic root of a file (div, section, article, aside, header, footer, main, nav, figure,
+ * search, hgroup).
+ * Any file (block, composite, screen) may open on one Block; never nest Block inside Block in one file, never
+ * repeat it in a loop.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/**
+ * Block renders a resolved landmark element with children.
+ */
+export type BlockProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "children" | "tag"> & {
+  tag?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Block: Component<BlockProps> = (props) => {
+  const [local, rest] = splitProps(props, ["tag", "class", "children"]);
+  const cls = () => cn(local.class);
+  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.Layout);
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)}>
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/box/box.tsx b/packages/solid/ui/src/primitives/box/box.tsx
new file mode 100644
index 0000000..8bd8a9b
--- /dev/null
+++ b/packages/solid/ui/src/primitives/box/box.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/box.json
+/**
+ * Box is a generic layout wrapper for internal sections.
+ * Not for top-level landmarks — use Block for page regions.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/**
+ * Box renders a div layout wrapper.
+ */
+export type BoxProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "children" | "tag"> & {
+  tag?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Box: Component<BoxProps> = (props) => {
+  const [local, rest] = splitProps(props, ["tag", "class", "children"]);
+  const cls = () => cn(local.class);
+  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.BoxAllowed);
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)}>
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/breadcrumb/breadcrumb.tsx b/packages/solid/ui/src/primitives/breadcrumb/breadcrumb.tsx
new file mode 100644
index 0000000..23416bf
--- /dev/null
+++ b/packages/solid/ui/src/primitives/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/breadcrumb.json
+/**
+ * Breadcrumb shows the current page location within a hierarchy.
+ * Renders nav with ordered links and aria-current on the active item.
+ */
+
+import { splitProps, For, Show, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+import { isSetStr, orUndef } from "../../utils/expr";
+
+export type BreadcrumbItem = {
+  label?: string;
+  href?: string;
+  current?: boolean;
+  disabled?: boolean;
+};
+
+/**
+ * Breadcrumb renders the full navigation trail.
+ */
+export type BreadcrumbProps = Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "class" | "children" | "items"
+> & {
+  items?: BreadcrumbItem[];
+  class?: string;
+};
+
+export const Breadcrumb: Component<BreadcrumbProps> = (props) => {
+  const [local, rest] = splitProps(props, ["items", "class"]);
+  const cls = () => cn("text-sm", local.class);
+  return (
+    <nav class={cls() || undefined} {...rest}>
+      <ol class="flex flex-wrap items-center gap-2">
+        <For each={local.items ?? []}>
+          {(item) => (
+            <li class="inline-flex items-center">
+              <Show when={(isSetStr(item.href) && !(item.disabled))} fallback={
+                <span
+                  class={cn(
+                    "text-sm",
+                    (
+                      item.current ? "font-medium"
+                      : item.disabled ? "text-muted-foreground"
+                      : "text-primary underline-offset-4 hover:underline"
+                    )
+                  )}
+                  aria-current={item.current ? "page" : undefined}
+                >
+                  {item.label}
+                </span>
+              }>
+                <a
+                  href={orUndef(item.href)}
+                  class={cn(
+                    "text-sm",
+                    (
+                      item.current ? "font-medium"
+                      : item.disabled ? "text-muted-foreground"
+                      : "text-primary underline-offset-4 hover:underline"
+                    )
+                  )}
+                  aria-current={item.current ? "page" : undefined}
+                >
+                  {item.label}
+                </a>
+              </Show>
+            </li>
+          )}
+        </For>
+      </ol>
+    </nav>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/button-plain/button-plain.tsx b/packages/solid/ui/src/primitives/button-plain/button-plain.tsx
new file mode 100644
index 0000000..70a16a0
--- /dev/null
+++ b/packages/solid/ui/src/primitives/button-plain/button-plain.tsx
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/button-plain.json
+/**
+ * ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it
+ * themselves.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+import { oneOfOr } from "../../utils/expr";
+
+/**
+ * ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it
+ * themselves.
+ */
+export type ButtonPlainProps = Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "class" | "children" | "type" | "disabled"
+> & {
+  type?: string;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const ButtonPlain: Component<ButtonPlainProps> = (props) => {
+  const [local, rest] = splitProps(props, ["type", "disabled", "class", "children"]);
+  const cls = () => cn((local.disabled ? "pointer-events-none opacity-50" : ""), local.class);
+  return (
+    <button
+      type={oneOfOr(local.type, "button", "submit", "reset")}
+      class={cls() || undefined}
+      disabled={local.disabled || undefined}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/button/button.tsx b/packages/solid/ui/src/primitives/button/button.tsx
new file mode 100644
index 0000000..f284e26
--- /dev/null
+++ b/packages/solid/ui/src/primitives/button/button.tsx
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/button.json
+/**
+ * Button triggers an action on click.
+ * Optional Href renders an anchor with button appearance (CTA navigation).
+ * For exotic roots, use ButtonClasses (Templ/Svelte/Vue/Solid) or asChild (React).
+ * Prefer Link for prose/semantic navigation.
+ */
+
+import { splitProps, Show, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
+
+/** Button: the classes of each value of each prop (shadcn/cva style). */
+export const buttonVariants = variants({
+  base:
+    "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring transition-colors " +
+    "disabled:pointer-events-none disabled:opacity-50 rounded",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground inset-ring-primary",
+      outline: "bg-card text-foreground inset-ring-border",
+      ghost: "bg-transparent text-foreground inset-ring-transparent",
+      secondary: "bg-secondary text-secondary-foreground inset-ring-border",
+      destructive:
+        "bg-destructive text-white hover:bg-destructive/90 inset-ring-transparent focus-visible:ring-destructive/20 " +
+        "dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      link: "text-foreground inset-ring-transparent underline-offset-4 hover:underline",
+    },
+    size: {
+      sm: "h-8 px-3 text-sm",
+      default: "h-10 px-4 text-sm",
+      lg: "h-12 px-6 text-base",
+    },
+    layout: {
+      default: "",
+      icon: "",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default", layout: "default" },
+  compoundVariants: [
+    { layout: "icon", size: "sm", class: "size-8 p-0 [&>svg]:size-4" },
+    { layout: "icon", size: "default", class: "size-10 p-0 [&>svg]:size-5" },
+    { layout: "icon", size: "lg", class: "size-12 p-0 [&>svg]:size-6" },
+    { variant: "outline", layout: "icon", class: "text-muted-foreground" },
+    { variant: "ghost", layout: "icon", class: "text-muted-foreground" },
+  ],
+});
+
+export type ButtonVariant = VariantKey<typeof buttonVariants, "variant">;
+export type ButtonSize = VariantKey<typeof buttonVariants, "size">;
+export type ButtonLayout = VariantKey<typeof buttonVariants, "layout">;
+
+/**
+ * Button renders a button element, or an anchor when Href is set.
+ * Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
+ */
+export type ButtonProps = Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "class" | "children" | "variant" | "size" | "layout" | "type" | "href" | "target" | "rel" | "external" | "disabled"
+> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  layout?: ButtonLayout;
+  type?: string;
+  href?: string;
+  target?: string;
+  rel?: string;
+  external?: boolean;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Button: Component<ButtonProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "layout", "type", "href", "target", "rel", "external", "disabled", "class", "children"]);
+  const cls = () => cn(
+    buttonVariants({ variant: local.variant, size: local.size, layout: local.layout }),
+    (local.disabled ? "pointer-events-none opacity-50" : ""),
+    local.class
+  );
+  const targetValue = () => (isSetStr(local.target) ? local.target : (local.external ? "_blank" : ""));
+  const relValue = () => (isSetStr(local.rel) ? local.rel : ((local.external || eqStr(targetValue(), "_blank")) ? "noopener noreferrer" : ""));
+  return (
+    <Show when={isSetStr(local.href)} fallback={
+      <button
+        type={oneOfOr(local.type, "button", "submit", "reset")}
+        class={cls() || undefined}
+        data-slot="button"
+        disabled={local.disabled || undefined}
+        {...(rest as object)}
+      >
+        {local.children}
+      </button>
+    }>
+      <a
+        href={orUndef(local.href)}
+        class={cls() || undefined}
+        data-slot="button"
+        target={orUndef(targetValue())}
+        rel={orUndef(relValue())}
+        aria-disabled={local.disabled ? "true" : undefined}
+        tabindex={local.disabled ? -1 : undefined}
+        {...(rest as object)}
+      >
+        {local.children}
+      </a>
+    </Show>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/card/card-content.tsx b/packages/solid/ui/src/primitives/card/card-content.tsx
new file mode 100644
index 0000000..47e7452
--- /dev/null
+++ b/packages/solid/ui/src/primitives/card/card-content.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardContent: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * CardContent renders the padded main body slot.
+ */
+export type CardContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const CardContent: Component<CardContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <div class={cls() || undefined} {...rest}>
+      {local.children}
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/card/card-description.tsx b/packages/solid/ui/src/primitives/card/card-description.tsx
new file mode 100644
index 0000000..7c5cd43
--- /dev/null
+++ b/packages/solid/ui/src/primitives/card/card-description.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardDescription: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * CardDescription renders a muted subtitle in a p element.
+ */
+export type CardDescriptionProps = Omit<
+  JSX.HTMLAttributes<HTMLParagraphElement>,
+  "class" | "children"
+> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const CardDescription: Component<CardDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn("text-sm text-muted-foreground", local.class);
+  return (
+    <p class={cls() || undefined} {...rest}>
+      {local.children}
+    </p>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/card/card-footer.tsx b/packages/solid/ui/src/primitives/card/card-footer.tsx
new file mode 100644
index 0000000..bf6f047
--- /dev/null
+++ b/packages/solid/ui/src/primitives/card/card-footer.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardFooter: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * CardFooter renders the bottom action slot.
+ */
+export type CardFooterProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const CardFooter: Component<CardFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn("flex items-center", local.class);
+  return (
+    <div class={cls() || undefined} {...rest}>
+      {local.children}
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/card/card-header.tsx b/packages/solid/ui/src/primitives/card/card-header.tsx
new file mode 100644
index 0000000..fdedbc5
--- /dev/null
+++ b/packages/solid/ui/src/primitives/card/card-header.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardHeader: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * CardHeader renders the top slot.
+ */
+export type CardHeaderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const CardHeader: Component<CardHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn("grid auto-rows-min items-start gap-2", local.class);
+  return (
+    <div class={cls() || undefined} {...rest}>
+      {local.children}
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/card/card-title.tsx b/packages/solid/ui/src/primitives/card/card-title.tsx
new file mode 100644
index 0000000..705c995
--- /dev/null
+++ b/packages/solid/ui/src/primitives/card/card-title.tsx
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * CardTitle: one part of Card (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../utils";
+import { titleTag } from "../../utils/expr";
+
+/**
+ * CardTitle renders heading text at the As level (default h2).
+ */
+export type CardTitleProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "children" | "as"> & {
+  as?: 1 | 2 | 3 | 4 | 5 | 6;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const CardTitle: Component<CardTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["as", "class", "children"]);
+  const cls = () => cn("font-semibold leading-none", local.class);
+  const resolvedTagValue = () => titleTag(local.as);
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)}>
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/card/card.tsx b/packages/solid/ui/src/primitives/card/card.tsx
new file mode 100644
index 0000000..c44e916
--- /dev/null
+++ b/packages/solid/ui/src/primitives/card/card.tsx
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+/**
+ * Card groups related content in one bordered surface.
+ * Card uses header, content, and footer slots.
+ * For semantic root elements (section, article), use CardClasses on a manual wrapper.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Card: the classes of each value of each prop (shadcn/cva style). */
+export const cardVariants = variants({
+  base: "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+  variants: {
+    variant: {
+      default: "",
+      muted: "bg-muted",
+      ghost: "bg-transparent",
+      compact: "gap-4 p-4",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export type CardVariant = VariantKey<typeof cardVariants, "variant">;
+
+/**
+ * Card renders the bordered surface wrapper.
+ */
+export type CardProps = Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "class" | "children" | "variant"
+> & {
+  variant?: CardVariant;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Card: Component<CardProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "class", "children"]);
+  const cls = () => cn(cardVariants({ variant: local.variant }), local.class);
+  return (
+    <div class={cls() || undefined} data-slot="card" {...rest}>
+      {local.children}
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/checkbox/checkbox.tsx b/packages/solid/ui/src/primitives/checkbox/checkbox.tsx
new file mode 100644
index 0000000..d6b0f48
--- /dev/null
+++ b/packages/solid/ui/src/primitives/checkbox/checkbox.tsx
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/checkbox.json
+/**
+ * Checkbox is a native boolean form control.
+ * Wireframe styling via Variant and Size; supports standard ARIA attrs.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Checkbox: the classes of each value of each prop (shadcn/cva style). */
+export const checkboxVariants = variants({
+  base:
+    "peer shrink-0 appearance-none bg-background inset-ring inset-ring-input checked:bg-primary " +
+    "checked:inset-ring-primary checkbox-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      default: "size-5",
+      sm: "size-4",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type CheckboxVariant = VariantKey<typeof checkboxVariants, "variant">;
+export type CheckboxSize = VariantKey<typeof checkboxVariants, "size">;
+
+/**
+ * Checkbox renders a styled input[type=checkbox].
+ */
+export type CheckboxProps = Omit<
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  "class" | "children" | "variant" | "size" | "checked" | "disabled" | "required"
+> & {
+  variant?: CheckboxVariant;
+  size?: CheckboxSize;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+
+export const Checkbox: Component<CheckboxProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "checked", "disabled", "required", "class"]);
+  const cls = () => cn(checkboxVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <input
+      type="checkbox"
+      class={cls() || undefined}
+      checked={local.checked || undefined}
+      disabled={local.disabled || undefined}
+      required={local.required || undefined}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/container/container.tsx b/packages/solid/ui/src/primitives/container/container.tsx
new file mode 100644
index 0000000..c742793
--- /dev/null
+++ b/packages/solid/ui/src/primitives/container/container.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/container.json
+/**
+ * Container wraps page content with a constrained width shell.
+ * Optional main or section tag for inner layout regions.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/**
+ * Container renders the outer content shell.
+ */
+export type ContainerProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "children" | "tag"> & {
+  tag?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Container: Component<ContainerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["tag", "class", "children"]);
+  const cls = () => cn(local.class);
+  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.Container);
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)}>
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/dialog/dialog.tsx b/packages/solid/ui/src/primitives/dialog/dialog.tsx
new file mode 100644
index 0000000..3f6264a
--- /dev/null
+++ b/packages/solid/ui/src/primitives/dialog/dialog.tsx
@@ -0,0 +1,57 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/dialog.json
+/**
+ * Dialog renders a native dialog root with an optional behavior hook.
+ * The data-ui8kit hook defaults off; the registry ships no client JS.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Dialog: the classes of each value of each prop (shadcn/cva style). */
+export const dialogVariants = variants({
+  base:
+    "m-auto flex flex-col bg-background text-foreground inset-ring inset-ring-border shadow-lg " +
+    "backdrop:bg-foreground/20 rounded",
+  variants: {
+    size: {
+      default: "w-70",
+      full: "h-full w-full",
+      lg: "w-100",
+      xl: "w-140",
+    },
+    variant: {
+      card: "bg-card text-card-foreground",
+      default: "",
+      sheet: "min-h-screen rounded-none",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type DialogVariant = VariantKey<typeof dialogVariants, "variant">;
+export type DialogSize = VariantKey<typeof dialogVariants, "size">;
+
+/**
+ * Dialog renders a native dialog element.
+ */
+export type DialogProps = Omit<
+  JSX.DialogHtmlAttributes<HTMLDialogElement>,
+  "class" | "children" | "variant" | "size" | "open"
+> & {
+  variant?: DialogVariant;
+  size?: DialogSize;
+  open?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Dialog: Component<DialogProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "open", "class", "children"]);
+  const cls = () => cn(dialogVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <dialog class={cls() || undefined} open={local.open || undefined} {...rest}>
+      {local.children}
+    </dialog>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/disclosure/disclosure.tsx b/packages/solid/ui/src/primitives/disclosure/disclosure.tsx
new file mode 100644
index 0000000..466118d
--- /dev/null
+++ b/packages/solid/ui/src/primitives/disclosure/disclosure.tsx
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/disclosure.json
+/**
+ * Disclosure renders native details and summary elements.
+ * Open is a static attribute only — no controlled-state contract.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Disclosure: the classes of each value of each prop (shadcn/cva style). */
+export const disclosureVariants = variants({
+  base: "group",
+  variants: {
+    variant: {
+      card: "rounded bg-card inset-ring inset-ring-border",
+      default: "rounded inset-ring inset-ring-border",
+      ghost: "",
+      item: "border-b border-border last:border-b-0",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export type DisclosureVariant = VariantKey<typeof disclosureVariants, "variant">;
+
+/**
+ * Disclosure renders native details.
+ */
+export type DisclosureProps = Omit<
+  JSX.DetailsHtmlAttributes<HTMLDetailsElement>,
+  "class" | "children" | "variant" | "open"
+> & {
+  variant?: DisclosureVariant;
+  open?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Disclosure: Component<DisclosureProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "open", "class", "children"]);
+  const cls = () => cn(disclosureVariants({ variant: local.variant }), local.class);
+  return (
+    <details class={cls() || undefined} open={local.open || undefined} {...rest}>
+      {local.children}
+    </details>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/disclosure/summary.tsx b/packages/solid/ui/src/primitives/disclosure/summary.tsx
new file mode 100644
index 0000000..0ed548c
--- /dev/null
+++ b/packages/solid/ui/src/primitives/disclosure/summary.tsx
@@ -0,0 +1,57 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/disclosure.json
+/**
+ * Summary: one part of Disclosure (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Summary: the classes of each value of each prop (shadcn/cva style). */
+export const summaryVariants = variants({
+  base: "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
+  variants: {
+    size: {
+      sm: "text-xs font-semibold",
+      default: "text-sm font-semibold",
+      lg: "text-base font-semibold",
+    },
+    variant: {
+      card: "py-2 pr-4 pl-4",
+      default: "py-2 pr-4 pl-4",
+      ghost: "py-2",
+      item: "py-4 text-muted-foreground hover:text-foreground group-open:text-foreground",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type SummaryVariant = VariantKey<typeof summaryVariants, "variant">;
+
+/**
+ * Summary renders native summary, followed by a Lucide chevron-down indicator that turns over when the details
+ * open (CSS only: group-open:rotate-180 on the Disclosure group).
+ */
+export type SummaryProps = Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "class" | "children" | "variant"
+> & {
+  variant?: SummaryVariant;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Summary: Component<SummaryProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "class", "children"]);
+  const cls = () => cn(summaryVariants({ variant: local.variant }), local.class);
+  return (
+    <summary class={cls() || undefined} {...rest}>
+      {local.children}
+      <span
+        class="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+        aria-hidden="true"
+        data-slot="summary-indicator"
+      />
+    </summary>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/data-list.tsx b/packages/solid/ui/src/primitives/form/data-list.tsx
new file mode 100644
index 0000000..f6077e0
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/data-list.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * DataList: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * DataList renders a native datalist.
+ */
+export type DataListProps = Omit<JSX.HTMLAttributes<HTMLDataListElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const DataList: Component<DataListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <datalist class={cls() || undefined} {...rest}>
+      {local.children}
+    </datalist>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/data-option.tsx b/packages/solid/ui/src/primitives/form/data-option.tsx
new file mode 100644
index 0000000..12ff2c3
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/data-option.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * DataOption: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+
+/**
+ * DataOption renders an option inside a datalist.
+ */
+export type DataOptionProps = Omit<
+  JSX.OptionHTMLAttributes<HTMLOptionElement>,
+  "class" | "children"
+> & {
+  class?: string;
+};
+
+export const DataOption: Component<DataOptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <option {...rest} />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/fieldset.tsx b/packages/solid/ui/src/primitives/form/fieldset.tsx
new file mode 100644
index 0000000..718ffde
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/fieldset.tsx
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Form controls covers fieldset, legend, datalist, output, meter, and progress.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Fieldset: the classes of each value of each prop (shadcn/cva style). */
+export const fieldsetVariants = variants({
+  base: "grid",
+  variants: {
+    size: {
+      default: "gap-2",
+      lg: "gap-4",
+      sm: "gap-2",
+    },
+    variant: {
+      card: "rounded p-4 inset-ring inset-ring-border",
+      default: "",
+      inline: "flex flex-wrap items-start gap-4",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type FieldsetVariant = VariantKey<typeof fieldsetVariants, "variant">;
+export type FieldsetSize = VariantKey<typeof fieldsetVariants, "size">;
+
+/**
+ * Fieldset renders a native fieldset.
+ */
+export type FieldsetProps = Omit<
+  JSX.FieldsetHTMLAttributes<HTMLFieldSetElement>,
+  "class" | "children" | "variant" | "size" | "disabled"
+> & {
+  variant?: FieldsetVariant;
+  size?: FieldsetSize;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Fieldset: Component<FieldsetProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "disabled", "class", "children"]);
+  const cls = () => cn(fieldsetVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <fieldset class={cls() || undefined} disabled={local.disabled || undefined} {...rest}>
+      {local.children}
+    </fieldset>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/form-description.tsx b/packages/solid/ui/src/primitives/form/form-description.tsx
new file mode 100644
index 0000000..066af8a
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/form-description.tsx
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * FormDescription: one part of Form (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants } from "../../utils";
+
+/** FormDescription: the classes of each value of each prop (shadcn/cva style). */
+export const formDescriptionVariants = variants({
+  base: "text-xs font-semibold text-muted-foreground",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * FormDescription renders muted helper copy below a control.
+ */
+export type FormDescriptionProps = Omit<
+  JSX.HTMLAttributes<HTMLParagraphElement>,
+  "class" | "children"
+> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const FormDescription: Component<FormDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(formDescriptionVariants(), local.class);
+  return (
+    <p class={cls() || undefined} {...rest}>
+      {local.children}
+    </p>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/form-item.tsx b/packages/solid/ui/src/primitives/form/form-item.tsx
new file mode 100644
index 0000000..698d734
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/form-item.tsx
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * FormItem: one part of Form (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants } from "../../utils";
+
+/** FormItem: the classes of each value of each prop (shadcn/cva style). */
+export const formItemVariants = variants({
+  base: "flex flex-col gap-2",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * FormItem groups a single field with spacing for label and control.
+ */
+export type FormItemProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const FormItem: Component<FormItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(formItemVariants(), local.class);
+  return (
+    <div class={cls() || undefined} {...rest}>
+      {local.children}
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/form-message.tsx b/packages/solid/ui/src/primitives/form/form-message.tsx
new file mode 100644
index 0000000..75e70e3
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/form-message.tsx
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * FormMessage: one part of Form (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants } from "../../utils";
+
+/** FormMessage: the classes of each value of each prop (shadcn/cva style). */
+export const formMessageVariants = variants({
+  base: "text-xs font-semibold text-destructive",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * FormMessage renders destructive validation feedback.
+ */
+export type FormMessageProps = Omit<
+  JSX.HTMLAttributes<HTMLParagraphElement>,
+  "class" | "children"
+> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const FormMessage: Component<FormMessageProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(formMessageVariants(), local.class);
+  return (
+    <p class={cls() || undefined} role="alert" {...rest}>
+      {local.children}
+    </p>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/form.tsx b/packages/solid/ui/src/primitives/form/form.tsx
new file mode 100644
index 0000000..1fdaeca
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/form.tsx
@@ -0,0 +1,38 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Form primitives: form wrapper, field item, description, and validation message.
+ * Composes with Label, Input, and other controls.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants } from "../../utils";
+
+/** Form: the classes of each value of each prop (shadcn/cva style). */
+export const formVariants = variants({
+  base: "grid gap-4",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * Form renders a vertical grid form container.
+ */
+export type FormProps = Omit<
+  JSX.FormHTMLAttributes<HTMLFormElement>,
+  "class" | "children" | "noValidate"
+> & {
+  noValidate?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Form: Component<FormProps> = (props) => {
+  const [local, rest] = splitProps(props, ["noValidate", "class", "children"]);
+  const cls = () => cn(formVariants(), local.class);
+  return (
+    <form class={cls() || undefined} novalidate={local.noValidate || undefined} {...rest}>
+      {local.children}
+    </form>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/legend.tsx b/packages/solid/ui/src/primitives/form/legend.tsx
new file mode 100644
index 0000000..d5af74f
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/legend.tsx
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Legend: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Legend: the classes of each value of each prop (shadcn/cva style). */
+export const legendVariants = variants({
+  base: "font-bold",
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base",
+    },
+    variant: {
+      default: "",
+      muted: "text-muted-foreground",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type LegendVariant = VariantKey<typeof legendVariants, "variant">;
+export type LegendSize = VariantKey<typeof legendVariants, "size">;
+
+/**
+ * Legend renders a native legend.
+ */
+export type LegendProps = Omit<
+  JSX.HTMLAttributes<HTMLLegendElement>,
+  "class" | "children" | "variant" | "size"
+> & {
+  variant?: LegendVariant;
+  size?: LegendSize;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Legend: Component<LegendProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "class", "children"]);
+  const cls = () => cn(legendVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <legend class={cls() || undefined} {...rest}>
+      {local.children}
+    </legend>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/meter.tsx b/packages/solid/ui/src/primitives/form/meter.tsx
new file mode 100644
index 0000000..b70826e
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/meter.tsx
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Meter: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Meter: the classes of each value of each prop (shadcn/cva style). */
+export const meterVariants = variants({
+  base: "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  variants: {
+    size: {
+      sm: "h-1",
+      default: "h-2",
+      lg: "h-3",
+    },
+    variant: {
+      default: "[--bar:var(--color-primary)]",
+      muted: "[--bar:var(--color-muted-foreground)]",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type MeterVariant = VariantKey<typeof meterVariants, "variant">;
+export type MeterSize = VariantKey<typeof meterVariants, "size">;
+
+/**
+ * Meter renders a native meter.
+ */
+export type MeterProps = Omit<
+  JSX.MeterHTMLAttributes<HTMLMeterElement>,
+  "class" | "children" | "variant" | "size"
+> & {
+  variant?: MeterVariant;
+  size?: MeterSize;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Meter: Component<MeterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "class", "children"]);
+  const cls = () => cn(meterVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <meter class={cls() || undefined} {...rest}>
+      {local.children}
+    </meter>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/output.tsx b/packages/solid/ui/src/primitives/form/output.tsx
new file mode 100644
index 0000000..33d76ed
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/output.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Output: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * Output renders a native output element.
+ */
+export type OutputProps = Omit<
+  JSX.OutputHTMLAttributes<HTMLOutputElement>,
+  "class" | "children" | "value"
+> & {
+  value?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Output: Component<OutputProps> = (props) => {
+  const [local, rest] = splitProps(props, ["value", "class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <output class={cls() || undefined} {...rest}>
+      {local.value}
+      {local.children}
+    </output>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/form/progress.tsx b/packages/solid/ui/src/primitives/form/progress.tsx
new file mode 100644
index 0000000..a2bab22
--- /dev/null
+++ b/packages/solid/ui/src/primitives/form/progress.tsx
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
+/**
+ * Progress: one part of Fieldset (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Progress: the classes of each value of each prop (shadcn/cva style). */
+export const progressVariants = variants({
+  base: "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  variants: {
+    size: {
+      sm: "h-1",
+      default: "h-2",
+      lg: "h-3",
+    },
+    variant: {
+      default: "[--bar:var(--color-primary)]",
+      muted: "[--bar:var(--color-muted-foreground)]",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type ProgressVariant = VariantKey<typeof progressVariants, "variant">;
+export type ProgressSize = VariantKey<typeof progressVariants, "size">;
+
+/**
+ * Progress renders a native progress element.
+ */
+export type ProgressProps = Omit<
+  JSX.ProgressHTMLAttributes<HTMLProgressElement>,
+  "class" | "children" | "variant" | "size"
+> & {
+  variant?: ProgressVariant;
+  size?: ProgressSize;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Progress: Component<ProgressProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "class", "children"]);
+  const cls = () => cn(progressVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <progress class={cls() || undefined} {...rest}>
+      {local.children}
+    </progress>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/grid/grid-col.tsx b/packages/solid/ui/src/primitives/grid/grid-col.tsx
new file mode 100644
index 0000000..b6a3634
--- /dev/null
+++ b/packages/solid/ui/src/primitives/grid/grid-col.tsx
@@ -0,0 +1,55 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/grid.json
+/**
+ * GridCol: one part of Grid (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+import { intMapOr } from "../../utils/expr";
+
+/**
+ * GridCol renders one grid column child.
+ */
+export type GridColProps = Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "class" | "children" | "span" | "start" | "end" | "order"
+> & {
+  span?: number;
+  start?: number;
+  end?: number;
+  order?: number;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const GridCol: Component<GridColProps> = (props) => {
+  const [local, rest] = splitProps(props, ["span", "start", "end", "order", "class", "children"]);
+  const cls = () => cn(
+    intMapOr(local.span, {
+      1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4", 5: "col-span-5",
+      6: "col-span-6", 7: "col-span-7", 8: "col-span-8", 9: "col-span-9", 10: "col-span-10",
+      11: "col-span-11", 12: "col-span-12",
+    }, ""),
+    intMapOr(local.start, {
+      1: "col-start-1", 2: "col-start-2", 3: "col-start-3", 4: "col-start-4", 5: "col-start-5",
+      6: "col-start-6", 7: "col-start-7", 8: "col-start-8", 9: "col-start-9", 10: "col-start-10",
+      11: "col-start-11", 12: "col-start-12",
+    }, ""),
+    intMapOr(local.end, {
+      1: "col-end-1", 2: "col-end-2", 3: "col-end-3", 4: "col-end-4", 5: "col-end-5", 6: "col-end-6",
+      7: "col-end-7", 8: "col-end-8", 9: "col-end-9", 10: "col-end-10", 11: "col-end-11",
+      12: "col-end-12",
+    }, ""),
+    intMapOr(local.order, {
+      1: "order-1", 2: "order-2", 3: "order-3", 4: "order-4", 5: "order-5", 6: "order-6", 7: "order-7",
+      8: "order-8", 9: "order-9", 10: "order-10", 11: "order-11", 12: "order-12",
+    }, ""),
+    local.class
+  );
+  return (
+    <div class={cls() || undefined} {...rest}>
+      {local.children}
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/grid/grid.tsx b/packages/solid/ui/src/primitives/grid/grid.tsx
new file mode 100644
index 0000000..cdce8bd
--- /dev/null
+++ b/packages/solid/ui/src/primitives/grid/grid.tsx
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/grid.json
+/**
+ * Grid lays out children in a CSS grid with optional column wrappers.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants } from "../../utils";
+import { defaultIfEmpty, mapOr } from "../../utils/expr";
+
+/** Grid: the classes of each value of each prop (shadcn/cva style). */
+export const gridVariants = variants({
+  base: "grid",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * Grid renders a display:grid container.
+ */
+export type GridProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children" | "cols"> & {
+  cols?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Grid: Component<GridProps> = (props) => {
+  const [local, rest] = splitProps(props, ["cols", "class", "children"]);
+  const cls = () => cn(
+    gridVariants(),
+    ((local.class ?? "").includes("grid-cols-") ? "" : mapOr(defaultIfEmpty(local.cols, "1"), {
+      "1": "grid-cols-1", "2": "grid-cols-2", "3": "grid-cols-3", "4": "grid-cols-4", "5": "grid-cols-5",
+      "6": "grid-cols-6", "7": "grid-cols-7", "8": "grid-cols-8", "9": "grid-cols-9",
+      "10": "grid-cols-10", "11": "grid-cols-11", "12": "grid-cols-12",
+      "1-2": "grid-cols-1 md:grid-cols-2", "1-3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+      "1-4": "grid-cols-1 sm:grid-cols-2 md:grid-cols-4", "2-3": "grid-cols-2 md:grid-cols-3",
+      "2-4": "grid-cols-2 md:grid-cols-4", "2-6": "grid-cols-2 md:grid-cols-6",
+      "3-6": "grid-cols-3 md:grid-cols-6",
+    }, "")),
+    local.class
+  );
+  return (
+    <div class={cls() || undefined} {...rest}>
+      {local.children}
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/group/group.tsx b/packages/solid/ui/src/primitives/group/group.tsx
new file mode 100644
index 0000000..f9a13c1
--- /dev/null
+++ b/packages/solid/ui/src/primitives/group/group.tsx
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/group.json
+/**
+ * Group arranges children in a horizontal flex row.
+ * Supports fieldset for related form controls.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn, variants, type VariantKey } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/** Group: the classes of each value of each prop (shadcn/cva style). */
+export const groupVariants = variants({
+  base: "flex min-w-0",
+  variants: {
+    gap: {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      auto: "",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline",
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+    },
+  },
+  defaultVariants: { gap: "auto", align: "center", justify: "start" },
+});
+
+export type GroupGap = VariantKey<typeof groupVariants, "gap">;
+export type GroupAlign = VariantKey<typeof groupVariants, "align">;
+export type GroupJustify = VariantKey<typeof groupVariants, "justify">;
+
+/**
+ * Group renders a horizontal flex container.
+ */
+export type GroupProps = Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "class" | "children" | "gap" | "align" | "justify" | "tag"
+> & {
+  gap?: GroupGap;
+  align?: GroupAlign;
+  justify?: GroupJustify;
+  tag?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Group: Component<GroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["gap", "align", "justify", "tag", "class", "children"]);
+  const cls = () => cn(groupVariants({ gap: local.gap, align: local.align, justify: local.justify }), local.class);
+  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.Group);
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)}>
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/icon/icon.tsx b/packages/solid/ui/src/primitives/icon/icon.tsx
new file mode 100644
index 0000000..8580b47
--- /dev/null
+++ b/packages/solid/ui/src/primitives/icon/icon.tsx
@@ -0,0 +1,104 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/icon.json
+/**
+ * Icon renders a class-based span, svg use reference, or text fallback.
+ * Decorative icons are hidden from assistive technology by default.
+ */
+
+import { splitProps, Show, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { concatTrim, eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
+
+/** Icon: the classes of each value of each prop (shadcn/cva style). */
+export const iconVariants = variants({
+  base: "inline-block shrink-0",
+  variants: {
+    size: {
+      xs: "size-3",
+      default: "size-4",
+      md: "size-5",
+      lg: "size-6",
+    },
+    type: {
+      class: "",
+      svg: "",
+      text: "",
+    },
+  },
+  defaultVariants: { size: "default", type: "class" },
+});
+
+export type IconSize = VariantKey<typeof iconVariants, "size">;
+
+/**
+ * Icon renders a class-based span, svg use, or text fallback host.
+ */
+export type IconProps = Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "class" | "children" | "name" | "type" | "baseClass" | "prefix" | "size" | "href" | "title" | "aria-label" | "decorative"
+> & {
+  name?: string;
+  type?: string;
+  baseClass?: string;
+  prefix?: string;
+  size?: IconSize;
+  href?: string;
+  title?: string;
+  "aria-label"?: string;
+  decorative?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Icon: Component<IconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["name", "type", "baseClass", "prefix", "size", "href", "title", "aria-label", "decorative", "class", "children"]);
+  const cls = () => cn(
+    iconVariants({ size: local.size, type: oneOfOr(local.type, "class", "svg", "text") as VariantKey<typeof iconVariants, "type"> }),
+    (eqStr(oneOfOr(local.type, "class", "svg", "text"), "class") ? local.baseClass : ""),
+    ((eqStr(oneOfOr(local.type, "class", "svg", "text"), "class") && isSetStr(local.name)) ? concatTrim(local.prefix, local.name) : ""),
+    local.class
+  );
+  const iconKindValue = () => oneOfOr(local.type, "class", "svg", "text");
+  const isDecorativeValue = () => (local.decorative || (!(isSetStr(local.title)) && !(isSetStr(local["aria-label"]))));
+  return (
+    <Show when={eqStr(iconKindValue(), "svg")} fallback={
+      <Show when={eqStr(iconKindValue(), "text")} fallback={
+        <span
+          class={cls() || undefined}
+          aria-hidden={isDecorativeValue() ? "true" : undefined}
+          role={!(isDecorativeValue()) ? "img" : undefined}
+          aria-label={(!(isDecorativeValue()) && isSetStr(local["aria-label"])) ? local["aria-label"] : undefined}
+          {...(rest as object)}
+        />
+      }>
+        <span
+          class={cls() || undefined}
+          aria-hidden={isDecorativeValue() ? "true" : undefined}
+          role={!(isDecorativeValue()) ? "img" : undefined}
+          aria-label={(!(isDecorativeValue()) && isSetStr(local["aria-label"])) ? local["aria-label"] : undefined}
+          {...(rest as object)}
+        >
+          {local.children}
+        </span>
+      </Show>
+    }>
+      <svg
+        class={cls() || undefined}
+        aria-hidden={isDecorativeValue() ? "true" : undefined}
+        role={!(isDecorativeValue()) ? "img" : undefined}
+        aria-label={(!(isDecorativeValue()) && isSetStr(local["aria-label"])) ? local["aria-label"] : undefined}
+        {...(rest as object)}
+      >
+        <Show when={isSetStr(local.title)}>
+          <title>
+            {local.title}
+          </title>
+        </Show>
+        <Show when={isSetStr(local.href)}>
+          <use href={orUndef(local.href)} />
+        </Show>
+        {local.children}
+      </svg>
+    </Show>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/iconbadge/iconbadge.tsx b/packages/solid/ui/src/primitives/iconbadge/iconbadge.tsx
new file mode 100644
index 0000000..66f5df3
--- /dev/null
+++ b/packages/solid/ui/src/primitives/iconbadge/iconbadge.tsx
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/iconbadge.json
+/**
+ * IconBadge renders a small icon surface for nav rows, cards, and status blocks.
+ * Pass the letter, glyph, or Icon node as children.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** IconBadge: the classes of each value of each prop (shadcn/cva style). */
+export const iconbadgeVariants = variants({
+  base: "inline-flex shrink-0 items-center justify-center font-bold rounded",
+  variants: {
+    variant: {
+      default: "bg-muted text-muted-foreground",
+      primary: "bg-primary text-primary-foreground",
+      accent: "bg-accent text-accent-foreground",
+      secondary: "bg-secondary text-secondary-foreground",
+      outline: "text-foreground inset-ring inset-ring-border",
+      destructive: "bg-destructive text-white dark:bg-destructive/60",
+    },
+    size: {
+      xs: "size-6 text-xs",
+      sm: "size-8 text-xs",
+      default: "size-10 text-xs",
+      lg: "size-12 text-sm",
+      xl: "size-20 text-base",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type IconBadgeVariant = VariantKey<typeof iconbadgeVariants, "variant">;
+export type IconBadgeSize = VariantKey<typeof iconbadgeVariants, "size">;
+
+/**
+ * IconBadge renders children as the badge content.
+ */
+export type IconBadgeProps = Omit<
+  JSX.HTMLAttributes<HTMLSpanElement>,
+  "class" | "children" | "variant" | "size"
+> & {
+  variant?: IconBadgeVariant;
+  size?: IconBadgeSize;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const IconBadge: Component<IconBadgeProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "class", "children"]);
+  const cls = () => cn(iconbadgeVariants({ variant: local.variant, size: local.size }), local.class);
+  return (
+    <span class={cls() || undefined} {...rest}>
+      {local.children}
+    </span>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/image/image.tsx b/packages/solid/ui/src/primitives/image/image.tsx
new file mode 100644
index 0000000..e852c42
--- /dev/null
+++ b/packages/solid/ui/src/primitives/image/image.tsx
@@ -0,0 +1,98 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/image.json
+/**
+ * Image renders accessible img, picture, and source primitives.
+ * Use Decorative for purely visual images so alt stays empty.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { oneOfOr } from "../../utils/expr";
+
+/** Image: the classes of each value of each prop (shadcn/cva style). */
+export const imageVariants = variants({
+  base: "block max-w-full",
+  variants: {
+    aspect: {
+      auto: "aspect-auto",
+      square: "aspect-square",
+      video: "aspect-video",
+    },
+    fit: {
+      contain: "object-contain",
+      cover: "object-cover",
+      fill: "object-fill",
+      none: "object-none",
+      "scale-down": "object-scale-down",
+    },
+    position: {
+      bottom: "object-bottom",
+      center: "object-center",
+      left: "object-left",
+      "left-bottom": "object-left-bottom",
+      "left-top": "object-left-top",
+      right: "object-right",
+      "right-bottom": "object-right-bottom",
+      "right-top": "object-right-top",
+      top: "object-top",
+    },
+    size: {
+      auto: "",
+      default: "",
+      full: "h-full w-full",
+      xs: "size-6",
+      sm: "size-8",
+      md: "size-12",
+      lg: "size-16",
+      xl: "size-20",
+    },
+    variant: {
+      default: "",
+      logo: "object-contain",
+    },
+  },
+  defaultVariants: { aspect: "auto", fit: "cover", position: "center", size: "auto", variant: "default" },
+});
+
+export type ImageVariant = VariantKey<typeof imageVariants, "variant">;
+export type ImageSize = VariantKey<typeof imageVariants, "size">;
+export type ImageFit = VariantKey<typeof imageVariants, "fit">;
+export type ImagePosition = VariantKey<typeof imageVariants, "position">;
+export type ImageAspect = VariantKey<typeof imageVariants, "aspect">;
+
+/**
+ * Image renders an accessible img element.
+ */
+export type ImageProps = Omit<
+  JSX.ImgHTMLAttributes<HTMLImageElement>,
+  "class" | "children" | "variant" | "size" | "alt" | "fit" | "position" | "aspect" | "loading" | "decoding" | "decorative"
+> & {
+  variant?: ImageVariant;
+  size?: ImageSize;
+  alt?: string;
+  fit?: ImageFit;
+  position?: ImagePosition;
+  aspect?: ImageAspect;
+  loading?: string;
+  decoding?: string;
+  decorative?: boolean;
+  class?: string;
+};
+
+export const Image: Component<ImageProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "alt", "fit", "position", "aspect", "loading", "decoding", "decorative", "class"]);
+  const cls = () => cn(
+    imageVariants({ aspect: local.aspect, fit: local.fit, position: local.position, size: local.size, variant: local.variant }),
+    local.class
+  );
+  return (
+    <img
+      alt={((local.decorative ? "" : local.alt)) ?? ""}
+      loading={oneOfOr(local.loading, "lazy", "eager")}
+      decoding={oneOfOr(local.decoding, "async", "sync", "auto")}
+      class={cls() || undefined}
+      aria-hidden={local.decorative ? "true" : undefined}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/image/picture.tsx b/packages/solid/ui/src/primitives/image/picture.tsx
new file mode 100644
index 0000000..8edeecf
--- /dev/null
+++ b/packages/solid/ui/src/primitives/image/picture.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/image.json
+/**
+ * Picture: one part of Image (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * Picture renders a responsive image wrapper.
+ */
+export type PictureProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Picture: Component<PictureProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <picture class={cls() || undefined} {...rest}>
+      {local.children}
+    </picture>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/image/source.tsx b/packages/solid/ui/src/primitives/image/source.tsx
new file mode 100644
index 0000000..698b9d2
--- /dev/null
+++ b/packages/solid/ui/src/primitives/image/source.tsx
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/image.json
+/**
+ * Source: one part of Image (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+
+/**
+ * Source renders a source candidate for picture, video, or audio.
+ */
+export type SourceProps = Omit<
+  JSX.SourceHTMLAttributes<HTMLSourceElement>,
+  "class" | "children"
+> & {
+  class?: string;
+};
+
+export const Source: Component<SourceProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <source {...rest} />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/inline/inline.tsx b/packages/solid/ui/src/primitives/inline/inline.tsx
new file mode 100644
index 0000000..006d7f2
--- /dev/null
+++ b/packages/solid/ui/src/primitives/inline/inline.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/inline.json
+/**
+ * Inline renders inline copy as a span. Use Text for paragraph blocks and
+ * Title (as 1–6) for headings.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * Inline renders a span element with inline copy classes.
+ */
+export type InlineProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Inline: Component<InlineProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <span class={cls() || undefined} {...rest}>
+      {local.children}
+    </span>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/input/input.tsx b/packages/solid/ui/src/primitives/input/input.tsx
new file mode 100644
index 0000000..e78fcbb
--- /dev/null
+++ b/packages/solid/ui/src/primitives/input/input.tsx
@@ -0,0 +1,62 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/input.json
+/**
+ * Input is a single-line native text field.
+ * Supports types, validation attrs, and wireframe variant/size classes.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty } from "../../utils/expr";
+
+/** Input: the classes of each value of each prop (shadcn/cva style). */
+export const inputVariants = variants({
+  base:
+    "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+    "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+    "focus-visible:inset-ring-ring rounded",
+  variants: {
+    size: {
+      sm: "h-8 px-3 text-base md:text-sm",
+      default: "h-10 px-3 text-base md:text-sm",
+      lg: "h-12 px-4 text-base",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted inset-ring-transparent",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type InputVariant = VariantKey<typeof inputVariants, "variant">;
+export type InputSize = VariantKey<typeof inputVariants, "size">;
+
+/**
+ * Input renders a styled single-line form control.
+ */
+export type InputProps = Omit<
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  "class" | "children" | "variant" | "size" | "type" | "disabled" | "required"
+> & {
+  variant?: InputVariant;
+  size?: InputSize;
+  type?: string;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+
+export const Input: Component<InputProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "type", "disabled", "required", "class"]);
+  const cls = () => cn(inputVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <input
+      type={defaultIfEmpty(local.type, "text")}
+      class={cls() || undefined}
+      disabled={local.disabled || undefined}
+      required={local.required || undefined}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/label/label.tsx b/packages/solid/ui/src/primitives/label/label.tsx
new file mode 100644
index 0000000..faef598
--- /dev/null
+++ b/packages/solid/ui/src/primitives/label/label.tsx
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/label.json
+/**
+ * Label associates visible text with a form control via the for attribute.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants } from "../../utils";
+
+/** Label: the classes of each value of each prop (shadcn/cva style). */
+export const labelVariants = variants({
+  base: "text-xs font-bold text-foreground",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * Label renders accessible text linked to a control.
+ */
+export type LabelProps = Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Label: Component<LabelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(labelVariants(), local.class);
+  return (
+    <label class={cls() || undefined} {...rest}>
+      {local.children}
+    </label>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/linebreak/linebreak.tsx b/packages/solid/ui/src/primitives/linebreak/linebreak.tsx
new file mode 100644
index 0000000..833ee45
--- /dev/null
+++ b/packages/solid/ui/src/primitives/linebreak/linebreak.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/linebreak.json
+/**
+ * Break renders br or wbr for controlled inline wrapping.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../utils";
+import { mapOr } from "../../utils/expr";
+
+/**
+ * Break renders br by default, or wbr when Type is wbr/word.
+ */
+export type BreakProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "children" | "type"> & {
+  type?: string;
+  class?: string;
+};
+
+export const Break: Component<BreakProps> = (props) => {
+  const [local, rest] = splitProps(props, ["type", "class"]);
+  const cls = () => cn(local.class);
+  const resolvedTagValue = () => mapOr(local.type, { "wbr": "wbr", "word": "wbr" }, "br");
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)} />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/link-plain/link-plain.tsx b/packages/solid/ui/src/primitives/link-plain/link-plain.tsx
new file mode 100644
index 0000000..6d34b28
--- /dev/null
+++ b/packages/solid/ui/src/primitives/link-plain/link-plain.tsx
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/link-plain.json
+/**
+ * LinkPlain is a bare anchor: no styling beyond Class.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+import { eqStr, isSetStr, orUndef } from "../../utils/expr";
+
+/**
+ * LinkPlain is a bare anchor: no styling beyond Class.
+ */
+export type LinkPlainProps = Omit<
+  JSX.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "class" | "children" | "target" | "rel" | "external" | "disabled"
+> & {
+  target?: string;
+  rel?: string;
+  external?: boolean;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const LinkPlain: Component<LinkPlainProps> = (props) => {
+  const [local, rest] = splitProps(props, ["target", "rel", "external", "disabled", "class", "children"]);
+  const cls = () => cn((local.disabled ? "pointer-events-none opacity-50" : ""), local.class);
+  const targetValue = () => (isSetStr(local.target) ? local.target : (local.external ? "_blank" : ""));
+  const relValue = () => (isSetStr(local.rel) ? local.rel : ((local.external || eqStr(targetValue(), "_blank")) ? "noopener noreferrer" : ""));
+  return (
+    <a
+      class={cls() || undefined}
+      target={orUndef(targetValue())}
+      rel={orUndef(relValue())}
+      aria-disabled={local.disabled ? "true" : undefined}
+      tabindex={local.disabled ? -1 : undefined}
+      {...rest}
+    >
+      {local.children}
+    </a>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/link/link.tsx b/packages/solid/ui/src/primitives/link/link.tsx
new file mode 100644
index 0000000..3377ba7
--- /dev/null
+++ b/packages/solid/ui/src/primitives/link/link.tsx
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/link.json
+/**
+ * Link renders a semantic anchor for navigation and prose.
+ * Use Button for actions; use Link for destinations.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { eqStr, isSetStr, orUndef } from "../../utils/expr";
+
+/** Link: the classes of each value of each prop (shadcn/cva style). */
+export const linkVariants = variants({
+  base: "inline-flex items-center underline-offset-4",
+  variants: {
+    size: {
+      sm: "gap-2 text-sm font-medium",
+      default: "gap-2 text-base font-semibold",
+      md: "gap-2 text-xl font-semibold",
+      lg: "gap-2 text-2xl font-semibold",
+    },
+    variant: {
+      block: "flex w-full text-foreground",
+      default: "text-foreground hover:underline",
+      external: "text-foreground hover:underline",
+      muted: "text-muted-foreground hover:text-foreground",
+      nav: "text-foreground",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type LinkVariant = VariantKey<typeof linkVariants, "variant">;
+export type LinkSize = VariantKey<typeof linkVariants, "size">;
+
+/**
+ * Link renders a semantic anchor element.
+ */
+export type LinkProps = Omit<
+  JSX.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "class" | "children" | "variant" | "size" | "target" | "rel" | "external" | "disabled"
+> & {
+  variant?: LinkVariant;
+  size?: LinkSize;
+  target?: string;
+  rel?: string;
+  external?: boolean;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Link: Component<LinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "target", "rel", "external", "disabled", "class", "children"]);
+  const cls = () => cn(
+    linkVariants({ size: local.size, variant: local.variant }),
+    (local.disabled ? "pointer-events-none opacity-50" : ""),
+    local.class
+  );
+  const targetValue = () => (isSetStr(local.target) ? local.target : (local.external ? "_blank" : ""));
+  const relValue = () => (isSetStr(local.rel) ? local.rel : ((local.external || eqStr(targetValue(), "_blank")) ? "noopener noreferrer" : ""));
+  return (
+    <a
+      class={cls() || undefined}
+      target={orUndef(targetValue())}
+      rel={orUndef(relValue())}
+      aria-disabled={local.disabled ? "true" : undefined}
+      tabindex={local.disabled ? -1 : undefined}
+      {...rest}
+    >
+      {local.children}
+    </a>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/list/list-item.tsx b/packages/solid/ui/src/primitives/list/list-item.tsx
new file mode 100644
index 0000000..88ef565
--- /dev/null
+++ b/packages/solid/ui/src/primitives/list/list-item.tsx
@@ -0,0 +1,40 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/list.json
+/**
+ * ListItem: one part of List (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../utils";
+import { eqStr, isSetNum } from "../../utils/expr";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/**
+ * ListItem renders one li with optional value attribute.
+ */
+export type ListItemProps = Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "class" | "children" | "tag" | "value"
+> & {
+  tag?: string;
+  value?: number;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const ListItem: Component<ListItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["tag", "value", "class", "children"]);
+  const cls = () => cn(local.class);
+  const resolvedTagValue = () => resolveTag(local.tag, "li", TagGroup.ListItem);
+  return (
+    <Dynamic
+      component={resolvedTagValue()}
+      class={cls() || undefined}
+      value={(isSetNum(local.value) && eqStr(resolvedTagValue(), "li")) ? String(local.value ?? 0) : undefined}
+      {...(rest as object)}
+    >
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/list/list.tsx b/packages/solid/ui/src/primitives/list/list.tsx
new file mode 100644
index 0000000..415ad22
--- /dev/null
+++ b/packages/solid/ui/src/primitives/list/list.tsx
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/list.json
+/**
+ * List renders semantic ul, ol, dl, or menu lists with ListItem children.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/**
+ * List renders a list container (ul, ol, dl, or menu).
+ */
+export type ListProps = Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "children" | "tag"> & {
+  tag?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const List: Component<ListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["tag", "class", "children"]);
+  const cls = () => cn(local.class);
+  const resolvedTagValue = () => resolveTag(local.tag, "ul", TagGroup.List);
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)}>
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/lucide-icon/lucide-icon.tsx b/packages/solid/ui/src/primitives/lucide-icon/lucide-icon.tsx
new file mode 100644
index 0000000..ae56a7a
--- /dev/null
+++ b/packages/solid/ui/src/primitives/lucide-icon/lucide-icon.tsx
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/lucide-icon.json
+/**
+ * LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file.
+ * Decorative (aria-hidden) unless a `label` is given.
+ */
+import { For, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../utils";
+import { LUCIDE } from "./lucide-icons";
+
+export type LucideIconProps = { name: string; size?: number; strokeWidth?: number; label?: string; class?: string };
+
+export function LucideIcon(props: LucideIconProps): JSX.Element {
+  const nodes = () => LUCIDE[props.name] ?? LUCIDE["circle"] ?? [];
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={props.size ?? 16}
+      height={props.size ?? 16}
+      fill="none"
+      stroke="currentColor"
+      stroke-width={props.strokeWidth ?? 2}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={cn("inline-block shrink-0", props.class)}
+      aria-hidden={props.label ? undefined : true}
+      aria-label={props.label}
+      role={props.label ? "img" : undefined}
+      data-slot="icon"
+      data-lucide={props.name}
+    >
+      <For each={nodes()}>{([tag, attrs]) => <Dynamic component={tag} {...attrs} />}</For>
+    </svg>
+  );
+}
diff --git a/packages/solid/ui/src/primitives/lucide-icon/lucide-icons.ts b/packages/solid/ui/src/primitives/lucide-icon/lucide-icons.ts
new file mode 100644
index 0000000..46edfe4
--- /dev/null
+++ b/packages/solid/ui/src/primitives/lucide-icon/lucide-icons.ts
@@ -0,0 +1,283 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/assets/lucide-icons.json
+// Lucide icons (ISC license, https://lucide.dev), harvested into xgen/specs/assets/lucide-icons.json.
+export const LUCIDE: Record<string, Array<[string, Record<string, string>]>> = {
+  "accessibility": [["circle",{"cx":"16","cy":"4","r":"1"}],["path",{"d":"m18 19 1-7-6 1"}],["path",{"d":"m5 8 3-3 5.5 3-2.36 3.5"}],["path",{"d":"M4.24 14.5a5 5 0 0 0 6.88 6"}],["path",{"d":"M13.76 17.5a5 5 0 0 0-6.88-6"}]],
+  "activity": [["path",{"d":"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"}]],
+  "anchor": [["path",{"d":"M12 6v16"}],["path",{"d":"m19 13 2-1a9 9 0 0 1-18 0l2 1"}],["path",{"d":"M9 11h6"}],["circle",{"cx":"12","cy":"4","r":"2"}]],
+  "archive": [["rect",{"width":"20","height":"5","x":"2","y":"3","rx":"1"}],["path",{"d":"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"}],["path",{"d":"M10 12h4"}]],
+  "arrow-down": [["path",{"d":"M12 5v14"}],["path",{"d":"m19 12-7 7-7-7"}]],
+  "arrow-down-up": [["path",{"d":"m3 16 4 4 4-4"}],["path",{"d":"M7 20V4"}],["path",{"d":"m21 8-4-4-4 4"}],["path",{"d":"M17 4v16"}]],
+  "arrow-left": [["path",{"d":"m12 19-7-7 7-7"}],["path",{"d":"M19 12H5"}]],
+  "arrow-right": [["path",{"d":"M5 12h14"}],["path",{"d":"m12 5 7 7-7 7"}]],
+  "arrow-up": [["path",{"d":"m5 12 7-7 7 7"}],["path",{"d":"M12 19V5"}]],
+  "arrow-up-right": [["path",{"d":"M7 7h10v10"}],["path",{"d":"M7 17 17 7"}]],
+  "at-sign": [["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"}]],
+  "badge-check": [["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],
+  "badge-dollar-sign": [["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],
+  "ban": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M4.929 4.929 19.07 19.071"}]],
+  "banknote": [["rect",{"width":"20","height":"12","x":"2","y":"6","rx":"2"}],["circle",{"cx":"12","cy":"12","r":"2"}],["path",{"d":"M6 12h.01M18 12h.01"}]],
+  "bell": [["path",{"d":"M10.268 21a2 2 0 0 0 3.464 0"}],["path",{"d":"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"}]],
+  "blocks": [["path",{"d":"M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"}],["rect",{"x":"14","y":"2","width":"8","height":"8","rx":"1"}]],
+  "bold": [["path",{"d":"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"}]],
+  "bolt": [["path",{"d":"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"}],["circle",{"cx":"12","cy":"12","r":"4"}]],
+  "book-open": [["path",{"d":"M12 5v16"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}]],
+  "book-open-text": [["path",{"d":"M12 5v16"}],["path",{"d":"M16 13h2"}],["path",{"d":"M16 9h2"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}],["path",{"d":"M6 13h2"}],["path",{"d":"M6 9h2"}]],
+  "book-x": [["path",{"d":"m14.5 7.5-5 5"}],["path",{"d":"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"}],["path",{"d":"m9.5 7.5 5 5"}]],
+  "bookmark": [["path",{"d":"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"}]],
+  "bot": [["path",{"d":"M12 8V4H8"}],["rect",{"width":"16","height":"12","x":"4","y":"8","rx":"2"}],["path",{"d":"M2 14h2"}],["path",{"d":"M20 14h2"}],["path",{"d":"M15 13v2"}],["path",{"d":"M9 13v2"}]],
+  "boxes": [["path",{"d":"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"}],["path",{"d":"m7 16.5-4.74-2.85"}],["path",{"d":"m7 16.5 5-3"}],["path",{"d":"M7 16.5v5.17"}],["path",{"d":"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"}],["path",{"d":"m17 16.5-5-3"}],["path",{"d":"m17 16.5 4.74-2.85"}],["path",{"d":"M17 16.5v5.17"}],["path",{"d":"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"}],["path",{"d":"M12 8 7.26 5.15"}],["path",{"d":"m12 8 4.74-2.85"}],["path",{"d":"M12 13.5V8"}]],
+  "brain": [["path",{"d":"M12 18V5"}],["path",{"d":"M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"}],["path",{"d":"M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"}],["path",{"d":"M17.997 5.125a4 4 0 0 1 2.526 5.77"}],["path",{"d":"M18 18a4 4 0 0 0 2-7.464"}],["path",{"d":"M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"}],["path",{"d":"M6 18a4 4 0 0 1-2-7.464"}],["path",{"d":"M6.003 5.125a4 4 0 0 0-2.526 5.77"}]],
+  "briefcase": [["path",{"d":"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"}],["rect",{"width":"20","height":"14","x":"2","y":"6","rx":"2"}]],
+  "brush": [["path",{"d":"m11 10 3 3"}],["path",{"d":"M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"}],["path",{"d":"M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"}]],
+  "building": [["path",{"d":"M12 10h.01"}],["path",{"d":"M12 14h.01"}],["path",{"d":"M12 6h.01"}],["path",{"d":"M16 10h.01"}],["path",{"d":"M16 14h.01"}],["path",{"d":"M16 6h.01"}],["path",{"d":"M8 10h.01"}],["path",{"d":"M8 14h.01"}],["path",{"d":"M8 6h.01"}],["path",{"d":"M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"}],["rect",{"x":"4","y":"2","width":"16","height":"20","rx":"2"}]],
+  "calendar": [["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "calendar-days": [["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 13h.01"}],["path",{"d":"M12 13h.01"}],["path",{"d":"M16 13h.01"}],["path",{"d":"M8 17h.01"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M16 17h.01"}]],
+  "calendar-range": [["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M16 2v3"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 2v3"}],["path",{"d":"M17 13h-6"}],["path",{"d":"M13 17H7"}],["path",{"d":"M7 13h.01"}],["path",{"d":"M17 17h.01"}]],
+  "camera": [["path",{"d":"M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"}],["circle",{"cx":"12","cy":"13","r":"3"}]],
+  "chart-area": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"}]],
+  "chart-column": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M18 17V9"}],["path",{"d":"M13 17V5"}],["path",{"d":"M8 17v-3"}]],
+  "chart-line": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"m19 9-5 5-4-4-3 3"}]],
+  "chart-pie": [["path",{"d":"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"}],["path",{"d":"M21.21 15.89A10 10 0 1 1 8 2.83"}]],
+  "chart-scatter": [["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],["circle",{"cx":"18.5","cy":"5.5","r":".5","fill":"currentColor"}],["circle",{"cx":"11.5","cy":"11.5","r":".5","fill":"currentColor"}],["circle",{"cx":"7.5","cy":"16.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"14.5","r":".5","fill":"currentColor"}],["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}]],
+  "check": [["path",{"d":"M20 6 9 17l-5-5"}]],
+  "chevron-down": [["path",{"d":"m6 9 6 6 6-6"}]],
+  "chevron-left": [["path",{"d":"m15 18-6-6 6-6"}]],
+  "chevron-right": [["path",{"d":"m9 18 6-6-6-6"}]],
+  "chevron-up": [["path",{"d":"m18 15-6-6-6 6"}]],
+  "chevrons-down": [["path",{"d":"m7 6 5 5 5-5"}],["path",{"d":"m7 13 5 5 5-5"}]],
+  "chevrons-up": [["path",{"d":"m17 11-5-5-5 5"}],["path",{"d":"m17 18-5-5-5 5"}]],
+  "chevrons-up-down": [["path",{"d":"m7 15 5 5 5-5"}],["path",{"d":"m7 9 5-5 5 5"}]],
+  "circle": [["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-alert": [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"12","x2":"12","y1":"8","y2":"12"}],["line",{"x1":"12","x2":"12.01","y1":"16","y2":"16"}]],
+  "circle-check": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],
+  "circle-dollar-sign": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],
+  "circle-dot": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-play": [["path",{"d":"M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"}],["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-plus": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M8 12h8"}],["path",{"d":"M12 8v8"}]],
+  "circle-question-mark": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
+  "circle-slash": [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"9","x2":"15","y1":"15","y2":"9"}]],
+  "circle-user": [["circle",{"cx":"12","cy":"12","r":"10"}],["circle",{"cx":"12","cy":"10","r":"3"}],["path",{"d":"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"}]],
+  "circle-x": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"m9 9 6 6"}]],
+  "clipboard-check": [["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"m9 14 2 2 4-4"}]],
+  "clipboard-list": [["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"M12 11h4"}],["path",{"d":"M12 16h4"}],["path",{"d":"M8 11h.01"}],["path",{"d":"M8 16h.01"}]],
+  "clock": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 6v6l4 2"}]],
+  "cloud": [["path",{"d":"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"}]],
+  "cloud-off": [["path",{"d":"M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057"}],["path",{"d":"M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78"}],["path",{"d":"m2 2 20 20"}]],
+  "cloud-upload": [["path",{"d":"M12 13v8"}],["path",{"d":"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"}],["path",{"d":"m8 17 4-4 4 4"}]],
+  "code-xml": [["path",{"d":"m18 16 4-4-4-4"}],["path",{"d":"m6 8-4 4 4 4"}],["path",{"d":"m14.5 4-5 16"}]],
+  "columns-3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "command": [["path",{"d":"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"}]],
+  "compass": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"}]],
+  "cookie": [["path",{"d":"M11 17h.01"}],["path",{"d":"M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2"}],["path",{"d":"M12 12h.01"}],["path",{"d":"M16 16h.01"}],["path",{"d":"M16 3h.01"}],["path",{"d":"M21 4h.01"}],["path",{"d":"M21 8h.01"}],["path",{"d":"M7 14h.01"}],["path",{"d":"M9 8h.01"}]],
+  "copy": [["rect",{"width":"14","height":"14","x":"8","y":"8","rx":"2","ry":"2"}],["path",{"d":"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]],
+  "credit-card": [["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"2"}],["line",{"x1":"2","x2":"22","y1":"10","y2":"10"}],["path",{"d":"M6 14h2"}]],
+  "database": [["ellipse",{"cx":"12","cy":"5","rx":"9","ry":"3"}],["path",{"d":"M3 5V19A9 3 0 0 0 21 19V5"}],["path",{"d":"M3 12A9 3 0 0 0 21 12"}]],
+  "dollar-sign": [["line",{"x1":"12","x2":"12","y1":"2","y2":"22"}],["path",{"d":"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"}]],
+  "dot": [["circle",{"cx":"12","cy":"12","r":"1"}]],
+  "download": [["path",{"d":"M12 15V3"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["path",{"d":"m7 10 5 5 5-5"}]],
+  "ellipsis": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"19","cy":"12","r":"1"}],["circle",{"cx":"5","cy":"12","r":"1"}]],
+  "ellipsis-vertical": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"5","r":"1"}],["circle",{"cx":"12","cy":"19","r":"1"}]],
+  "external-link": [["path",{"d":"M15 3h6v6"}],["path",{"d":"M10 14 21 3"}],["path",{"d":"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]],
+  "eye": [["path",{"d":"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
+  "eye-off": [["path",{"d":"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"}],["path",{"d":"M14.084 14.158a3 3 0 0 1-4.242-4.242"}],["path",{"d":"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"}],["path",{"d":"m2 2 20 20"}]],
+  "file": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}]],
+  "file-code": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 12.5 8 15l2 2.5"}],["path",{"d":"m14 12.5 2 2.5-2 2.5"}]],
+  "file-down": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 18v-6"}],["path",{"d":"m9 15 3 3 3-3"}]],
+  "file-image": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"10","cy":"12","r":"2"}],["path",{"d":"m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"}]],
+  "file-pen": [["path",{"d":"M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"}]],
+  "file-pen-line": [["path",{"d":"M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"}],["path",{"d":"M14.487 7.858A1 1 0 0 1 14 7V2"}],["path",{"d":"M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"}],["path",{"d":"M8 18h1"}]],
+  "file-plus": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M9 15h6"}],["path",{"d":"M12 18v-6"}]],
+  "file-question-mark": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"}]],
+  "file-search": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"11.5","cy":"14.5","r":"2.5"}],["path",{"d":"M13.3 16.3 15 18"}]],
+  "file-spreadsheet": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M8 13h2"}],["path",{"d":"M14 13h2"}],["path",{"d":"M8 17h2"}],["path",{"d":"M14 17h2"}]],
+  "file-text": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 9H8"}],["path",{"d":"M16 13H8"}],["path",{"d":"M16 17H8"}]],
+  "file-up": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 12v6"}],["path",{"d":"m15 15-3-3-3 3"}]],
+  "file-video-camera": [["path",{"d":"M4 12V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"m10 17.843 3.033-1.755a.64.64 0 0 1 .967.56v4.704a.65.65 0 0 1-.967.56L10 20.157"}],["rect",{"width":"7","height":"6","x":"3","y":"16","rx":"1"}]],
+  "files": [["path",{"d":"M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"}],["path",{"d":"M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z"}],["path",{"d":"M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1"}]],
+  "film": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M7 3v18"}],["path",{"d":"M3 7.5h4"}],["path",{"d":"M3 12h18"}],["path",{"d":"M3 16.5h4"}],["path",{"d":"M17 3v18"}],["path",{"d":"M17 7.5h4"}],["path",{"d":"M17 16.5h4"}]],
+  "fingerprint-pattern": [["path",{"d":"M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"}],["path",{"d":"M14 13.12c0 2.38 0 6.38-1 8.88"}],["path",{"d":"M17.29 21.02c.12-.6.43-2.3.5-3.02"}],["path",{"d":"M2 12a10 10 0 0 1 18-6"}],["path",{"d":"M2 16h.01"}],["path",{"d":"M21.8 16c.2-2 .131-5.354 0-6"}],["path",{"d":"M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"}],["path",{"d":"M8.65 22c.21-.66.45-1.32.57-2"}],["path",{"d":"M9 6.8a6 6 0 0 1 9 5.2v2"}]],
+  "flag": [["path",{"d":"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"}]],
+  "folder": [["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
+  "folder-archive": [["circle",{"cx":"15","cy":"19","r":"2"}],["path",{"d":"M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"}],["path",{"d":"M15 11v-1"}],["path",{"d":"M15 17v-2"}]],
+  "folder-kanban": [["path",{"d":"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"}],["path",{"d":"M8 10v4"}],["path",{"d":"M12 10v2"}],["path",{"d":"M16 10v6"}]],
+  "folder-open": [["path",{"d":"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}]],
+  "folder-plus": [["path",{"d":"M12 10v6"}],["path",{"d":"M9 13h6"}],["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
+  "folder-tree": [["path",{"d":"M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M3 5a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 3v13a2 2 0 0 0 2 2h3"}]],
+  "funnel": [["path",{"d":"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"}]],
+  "gift": [["path",{"d":"M12 7v14"}],["path",{"d":"M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"}],["path",{"d":"M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"}],["rect",{"x":"3","y":"7","width":"18","height":"4","rx":"1"}]],
+  "git-compare": [["circle",{"cx":"18","cy":"18","r":"3"}],["circle",{"cx":"6","cy":"6","r":"3"}],["path",{"d":"M13 6h3a2 2 0 0 1 2 2v7"}],["path",{"d":"M11 18H8a2 2 0 0 1-2-2V9"}]],
+  "globe": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}],["path",{"d":"M2 12h20"}]],
+  "globe-lock": [["path",{"d":"M15.686 15A14.5 14.5 0 0 1 12 22a14.5 14.5 0 0 1 0-20 10 10 0 1 0 9.542 13"}],["path",{"d":"M2 12h8.5"}],["path",{"d":"M20 6V4a2 2 0 1 0-4 0v2"}],["rect",{"width":"8","height":"5","x":"14","y":"6","rx":"1"}]],
+  "graduation-cap": [["path",{"d":"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"}],["path",{"d":"M22 10v6"}],["path",{"d":"M6 12.5V16a6 3 0 0 0 12 0v-3.5"}]],
+  "grid-3x3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "grip-vertical": [["circle",{"cx":"9","cy":"12","r":"1"}],["circle",{"cx":"9","cy":"5","r":"1"}],["circle",{"cx":"9","cy":"19","r":"1"}],["circle",{"cx":"15","cy":"12","r":"1"}],["circle",{"cx":"15","cy":"5","r":"1"}],["circle",{"cx":"15","cy":"19","r":"1"}]],
+  "group": [["path",{"d":"M3 7V5c0-1.1.9-2 2-2h2"}],["path",{"d":"M17 3h2c1.1 0 2 .9 2 2v2"}],["path",{"d":"M21 17v2c0 1.1-.9 2-2 2h-2"}],["path",{"d":"M7 21H5c-1.1 0-2-.9-2-2v-2"}],["rect",{"width":"7","height":"5","x":"7","y":"7","rx":"1"}],["rect",{"width":"7","height":"5","x":"10","y":"12","rx":"1"}]],
+  "handshake": [["path",{"d":"m11 17 2 2a1 1 0 1 0 3-3"}],["path",{"d":"m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"}],["path",{"d":"m21 3 1 11h-2"}],["path",{"d":"M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"}],["path",{"d":"M3 4h8"}]],
+  "hash": [["line",{"x1":"4","x2":"20","y1":"9","y2":"9"}],["line",{"x1":"4","x2":"20","y1":"15","y2":"15"}],["line",{"x1":"10","x2":"8","y1":"3","y2":"21"}],["line",{"x1":"16","x2":"14","y1":"3","y2":"21"}]],
+  "heading": [["path",{"d":"M6 12h12"}],["path",{"d":"M6 20V4"}],["path",{"d":"M18 20V4"}]],
+  "headphones": [["path",{"d":"M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"}]],
+  "heart": [["path",{"d":"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"}]],
+  "heart-handshake": [["path",{"d":"M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"}]],
+  "hourglass": [["path",{"d":"M5 22h14"}],["path",{"d":"M5 2h14"}],["path",{"d":"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"}],["path",{"d":"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"}]],
+  "house": [["path",{"d":"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["path",{"d":"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}]],
+  "id-card": [["path",{"d":"M13 19a4 4 0 00-8 0"}],["path",{"d":"M16 10h2"}],["path",{"d":"M16 14h2"}],["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"x":"2","y":"5","width":"20","height":"14","rx":"2"}]],
+  "image": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2","ry":"2"}],["circle",{"cx":"9","cy":"9","r":"2"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]],
+  "image-off": [["line",{"x1":"2","x2":"22","y1":"2","y2":"22"}],["path",{"d":"M10.41 10.41a2 2 0 1 1-2.83-2.83"}],["line",{"x1":"13.5","x2":"6","y1":"13.5","y2":"21"}],["line",{"x1":"18","x2":"21","y1":"12","y2":"15"}],["path",{"d":"M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"}],["path",{"d":"M21 15V5a2 2 0 0 0-2-2H9"}]],
+  "image-plus": [["path",{"d":"M16 5h6"}],["path",{"d":"M19 2v6"}],["path",{"d":"M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}],["circle",{"cx":"9","cy":"9","r":"2"}]],
+  "images": [["path",{"d":"m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"}],["path",{"d":"M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"}],["circle",{"cx":"13","cy":"7","r":"1","fill":"currentColor"}],["rect",{"x":"8","y":"2","width":"14","height":"14","rx":"2"}]],
+  "inbox": [["polyline",{"points":"22 12 16 12 14 15 10 15 8 12 2 12"}],["path",{"d":"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"}]],
+  "info": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 16v-4"}],["path",{"d":"M12 8h.01"}]],
+  "italic": [["line",{"x1":"19","x2":"10","y1":"4","y2":"4"}],["line",{"x1":"14","x2":"5","y1":"20","y2":"20"}],["line",{"x1":"15","x2":"9","y1":"4","y2":"20"}]],
+  "kanban": [["path",{"d":"M5 3v14"}],["path",{"d":"M12 3v8"}],["path",{"d":"M19 3v18"}]],
+  "key": [["path",{"d":"m2 21 9.6-9.6"}],["path",{"d":"m7.5 15.5 2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19"}],["circle",{"cx":"15.5","cy":"7.5","r":"5.5"}]],
+  "key-round": [["path",{"d":"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"}],["circle",{"cx":"16.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "lamp-desk": [["path",{"d":"M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z"}],["path",{"d":"m14.207 4.793-3.414 3.414"}],["path",{"d":"M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"}],["path",{"d":"m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18"}]],
+  "landmark": [["path",{"d":"M10 18v-7"}],["path",{"d":"M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"}],["path",{"d":"M14 18v-7"}],["path",{"d":"M18 18v-7"}],["path",{"d":"M3 22h18"}],["path",{"d":"M6 18v-7"}]],
+  "languages": [["path",{"d":"m5 8 6 6"}],["path",{"d":"m4 14 6-6 2-3"}],["path",{"d":"M2 5h12"}],["path",{"d":"M7 2h1"}],["path",{"d":"m22 22-5-10-5 10"}],["path",{"d":"M14 18h6"}]],
+  "laptop": [["path",{"d":"M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z"}],["path",{"d":"M20.054 15.987H3.946"}]],
+  "layers": [["path",{"d":"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{"d":"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{"d":"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]],
+  "layout-dashboard": [["rect",{"width":"7","height":"9","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"5","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"9","x":"14","y":"12","rx":"1"}],["rect",{"width":"7","height":"5","x":"3","y":"16","rx":"1"}]],
+  "layout-grid": [["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"14","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}]],
+  "layout-list": [["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}],["path",{"d":"M14 4h7"}],["path",{"d":"M14 9h7"}],["path",{"d":"M14 15h7"}],["path",{"d":"M14 20h7"}]],
+  "layout-template": [["rect",{"width":"18","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"9","height":"7","x":"3","y":"14","rx":"1"}],["rect",{"width":"5","height":"7","x":"16","y":"14","rx":"1"}]],
+  "life-buoy": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m4.93 4.93 4.24 4.24"}],["path",{"d":"m14.83 9.17 4.24-4.24"}],["path",{"d":"m14.83 14.83 4.24 4.24"}],["path",{"d":"m9.17 14.83-4.24 4.24"}],["circle",{"cx":"12","cy":"12","r":"4"}]],
+  "lightbulb": [["path",{"d":"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"}],["path",{"d":"M9 18h6"}],["path",{"d":"M10 22h4"}]],
+  "link": [["path",{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["path",{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]],
+  "link-2": [["path",{"d":"M9 17H7A5 5 0 0 1 7 7h2"}],["path",{"d":"M15 7h2a5 5 0 1 1 0 10h-2"}],["line",{"x1":"8","x2":"16","y1":"12","y2":"12"}]],
+  "list": [["path",{"d":"M3 5h.01"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M3 19h.01"}],["path",{"d":"M8 5h13"}],["path",{"d":"M8 12h13"}],["path",{"d":"M8 19h13"}]],
+  "list-checks": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["path",{"d":"m3 7 2 2 4-4"}]],
+  "list-filter": [["path",{"d":"M2 5h20"}],["path",{"d":"M6 12h12"}],["path",{"d":"M9 19h6"}]],
+  "list-ordered": [["path",{"d":"M11 5h10"}],["path",{"d":"M11 12h10"}],["path",{"d":"M11 19h10"}],["path",{"d":"M4 4h1v5"}],["path",{"d":"M4 9h2"}],["path",{"d":"M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"}]],
+  "list-todo": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["rect",{"x":"3","y":"4","width":"6","height":"6","rx":"1"}]],
+  "list-tree": [["path",{"d":"M8 5h13"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"M3 10a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 5v12a2 2 0 0 0 2 2h3"}]],
+  "loader": [["path",{"d":"M12 2v4"}],["path",{"d":"m16.2 7.8 2.9-2.9"}],["path",{"d":"M18 12h4"}],["path",{"d":"m16.2 16.2 2.9 2.9"}],["path",{"d":"M12 18v4"}],["path",{"d":"m4.9 19.1 2.9-2.9"}],["path",{"d":"M2 12h4"}],["path",{"d":"m4.9 4.9 2.9 2.9"}]],
+  "loader-circle": [["path",{"d":"M21 12a9 9 0 1 1-6.219-8.56"}]],
+  "lock": [["rect",{"width":"18","height":"11","x":"3","y":"11","rx":"2","ry":"2"}],["path",{"d":"M7 11V7a5 5 0 0 1 10 0v4"}]],
+  "lock-keyhole": [["circle",{"cx":"12","cy":"16","r":"1"}],["rect",{"x":"3","y":"10","width":"18","height":"12","rx":"2"}],["path",{"d":"M7 10V7a5 5 0 0 1 10 0v3"}]],
+  "log-in": [["path",{"d":"m10 17 5-5-5-5"}],["path",{"d":"M15 12H3"}],["path",{"d":"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"}]],
+  "log-out": [["path",{"d":"m16 17 5-5-5-5"}],["path",{"d":"M21 12H9"}],["path",{"d":"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"}]],
+  "mail": [["path",{"d":"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"}],["rect",{"x":"2","y":"4","width":"20","height":"16","rx":"2"}]],
+  "mail-check": [["path",{"d":"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"}],["path",{"d":"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"}],["path",{"d":"m16 19 2 2 4-4"}]],
+  "mail-open": [["path",{"d":"M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"}],["path",{"d":"m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"}]],
+  "map-pin": [["path",{"d":"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}],["circle",{"cx":"12","cy":"10","r":"3"}]],
+  "megaphone": [["path",{"d":"M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"}],["path",{"d":"M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"}],["path",{"d":"M8 6v8"}]],
+  "menu": [["path",{"d":"M4 5h16"}],["path",{"d":"M4 12h16"}],["path",{"d":"M4 19h16"}]],
+  "message-circle": [["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}]],
+  "message-circle-question-mark": [["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
+  "message-square": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}]],
+  "message-square-more": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M12 11h.01"}],["path",{"d":"M16 11h.01"}],["path",{"d":"M8 11h.01"}]],
+  "message-square-quote": [["path",{"d":"M14 14a2 2 0 0 0 2-2V8h-2"}],["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M8 14a2 2 0 0 0 2-2V8H8"}]],
+  "message-square-text": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M7 11h10"}],["path",{"d":"M7 15h6"}],["path",{"d":"M7 7h8"}]],
+  "messages-square": [["path",{"d":"M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"}],["path",{"d":"M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"}]],
+  "minus": [["path",{"d":"M5 12h14"}]],
+  "monitor": [["rect",{"width":"20","height":"14","x":"2","y":"3","rx":"2"}],["line",{"x1":"8","x2":"16","y1":"21","y2":"21"}],["line",{"x1":"12","x2":"12","y1":"17","y2":"21"}]],
+  "monitor-smartphone": [["path",{"d":"M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"}],["path",{"d":"M10 19v-3.96 3.15"}],["path",{"d":"M7 19h5"}],["rect",{"width":"6","height":"10","x":"16","y":"12","rx":"2"}]],
+  "moon": [["path",{"d":"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"}]],
+  "mountain": [["path",{"d":"m8 3 4 8 5-5 5 15H2L8 3z"}]],
+  "mouse-pointer-click": [["path",{"d":"M14 4.1 12 6"}],["path",{"d":"m5.1 8-2.9-.8"}],["path",{"d":"m6 12-1.9 2"}],["path",{"d":"M7.2 2.2 8 5.1"}],["path",{"d":"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"}]],
+  "move-right": [["path",{"d":"M18 8L22 12L18 16"}],["path",{"d":"M2 12H22"}]],
+  "music": [["path",{"d":"M9 18V5l12-2v13"}],["circle",{"cx":"6","cy":"18","r":"3"}],["circle",{"cx":"18","cy":"16","r":"3"}]],
+  "newspaper": [["path",{"d":"M15 18h-5"}],["path",{"d":"M18 14h-8"}],["path",{"d":"M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"}],["rect",{"width":"8","height":"4","x":"10","y":"6","rx":"1"}]],
+  "orbit": [["path",{"d":"M20.341 6.484A10 10 0 0 1 10.266 21.85"}],["path",{"d":"M3.659 17.516A10 10 0 0 1 13.74 2.152"}],["circle",{"cx":"12","cy":"12","r":"3"}],["circle",{"cx":"19","cy":"5","r":"2"}],["circle",{"cx":"5","cy":"19","r":"2"}]],
+  "package": [["path",{"d":"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}],["path",{"d":"M12 22V12"}],["polyline",{"points":"3.29 7 12 12 20.71 7"}],["path",{"d":"m7.5 4.27 9 5.15"}]],
+  "package-check": [["path",{"d":"M12 22V12"}],["path",{"d":"m16 17 2 2 4-4"}],["path",{"d":"M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"}],["path",{"d":"M3.29 7 12 12l8.71-5"}],["path",{"d":"m7.5 4.27 8.997 5.148"}]],
+  "package-open": [["path",{"d":"M12 22v-9"}],["path",{"d":"M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"}],["path",{"d":"M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"}],["path",{"d":"M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"}]],
+  "palette": [["path",{"d":"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"}],["circle",{"cx":"13.5","cy":"6.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"10.5","r":".5","fill":"currentColor"}],["circle",{"cx":"6.5","cy":"12.5","r":".5","fill":"currentColor"}],["circle",{"cx":"8.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "panel-bottom": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 15h18"}]],
+  "panel-left": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}]],
+  "panel-left-close": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"m16 15-3-3 3-3"}]],
+  "panel-top": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "paperclip": [["path",{"d":"m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"}]],
+  "pause": [["rect",{"x":"14","y":"3","width":"5","height":"18","rx":"1"}],["rect",{"x":"5","y":"3","width":"5","height":"18","rx":"1"}]],
+  "pencil": [["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}],["path",{"d":"m15 5 4 4"}]],
+  "pencil-line": [["path",{"d":"M13 21h8"}],["path",{"d":"m15 5 4 4"}],["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}]],
+  "percent": [["line",{"x1":"19","x2":"5","y1":"5","y2":"19"}],["circle",{"cx":"6.5","cy":"6.5","r":"2.5"}],["circle",{"cx":"17.5","cy":"17.5","r":"2.5"}]],
+  "phone": [["path",{"d":"M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"}]],
+  "pilcrow": [["path",{"d":"M13 4v16"}],["path",{"d":"M17 4v16"}],["path",{"d":"M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}]],
+  "pin": [["path",{"d":"M12 17v5"}],["path",{"d":"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"}]],
+  "play": [["path",{"d":"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"}]],
+  "plug": [["path",{"d":"M12 22v-5"}],["path",{"d":"M15 8V2"}],["path",{"d":"M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"}],["path",{"d":"M9 8V2"}]],
+  "plug-zap": [["path",{"d":"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"}],["path",{"d":"m2 22 3-3"}],["path",{"d":"M7.5 13.5 10 11"}],["path",{"d":"M10.5 16.5 13 14"}],["path",{"d":"m18 3-4 4h6l-4 4"}]],
+  "plus": [["path",{"d":"M5 12h14"}],["path",{"d":"M12 5v14"}]],
+  "presentation": [["path",{"d":"M2 3h20"}],["path",{"d":"M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"}],["path",{"d":"m7 21 5-5 5 5"}]],
+  "printer": [["path",{"d":"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"}],["path",{"d":"M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"}],["rect",{"x":"6","y":"14","width":"12","height":"8","rx":"1"}]],
+  "puzzle": [["path",{"d":"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}]],
+  "qr-code": [["rect",{"width":"5","height":"5","x":"3","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"16","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"3","y":"16","rx":"1"}],["path",{"d":"M21 16h-3a2 2 0 0 0-2 2v3"}],["path",{"d":"M21 21v.01"}],["path",{"d":"M12 7v3a2 2 0 0 1-2 2H7"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M12 3h.01"}],["path",{"d":"M12 16v.01"}],["path",{"d":"M16 12h1"}],["path",{"d":"M21 12v.01"}],["path",{"d":"M12 21v-1"}]],
+  "quote": [["path",{"d":"M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}],["path",{"d":"M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}]],
+  "receipt-text": [["path",{"d":"M13 16H8"}],["path",{"d":"M14 8H8"}],["path",{"d":"M16 12H8"}],["path",{"d":"M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"}]],
+  "redo-2": [["path",{"d":"m15 14 5-5-5-5"}],["path",{"d":"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]],
+  "refresh-cw": [["path",{"d":"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}],["path",{"d":"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{"d":"M8 16H3v5"}]],
+  "rocket": [["path",{"d":"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"}],["path",{"d":"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"}],["path",{"d":"M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"}],["path",{"d":"M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"}]],
+  "rotate-ccw": [["path",{"d":"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}],["path",{"d":"M3 3v5h5"}]],
+  "rotate-cw": [["path",{"d":"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}]],
+  "rows-3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "save": [["path",{"d":"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}],["path",{"d":"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}],["path",{"d":"M7 3v4a1 1 0 0 0 1 1h7"}]],
+  "scale": [["path",{"d":"M12 3v18"}],["path",{"d":"m19 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"}],["path",{"d":"m5 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M7 21h10"}]],
+  "scan-face": [["path",{"d":"M3 7V5a2 2 0 0 1 2-2h2"}],["path",{"d":"M17 3h2a2 2 0 0 1 2 2v2"}],["path",{"d":"M21 17v2a2 2 0 0 1-2 2h-2"}],["path",{"d":"M7 21H5a2 2 0 0 1-2-2v-2"}],["path",{"d":"M8 14s1.5 2 4 2 4-2 4-2"}],["path",{"d":"M9 9h.01"}],["path",{"d":"M15 9h.01"}]],
+  "scroll-text": [["path",{"d":"M15 12h-5"}],["path",{"d":"M15 8h-5"}],["path",{"d":"M19 17V5a2 2 0 0 0-2-2H4"}],["path",{"d":"M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"}]],
+  "search": [["path",{"d":"m21 21-4.34-4.34"}],["circle",{"cx":"11","cy":"11","r":"8"}]],
+  "search-x": [["path",{"d":"m13.5 8.5-5 5"}],["path",{"d":"m8.5 8.5 5 5"}],["circle",{"cx":"11","cy":"11","r":"8"}],["path",{"d":"m21 21-4.3-4.3"}]],
+  "send": [["path",{"d":"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"}],["path",{"d":"m21.854 2.147-10.94 10.939"}]],
+  "settings": [["path",{"d":"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
+  "settings-2": [["path",{"d":"M14 17H5"}],["path",{"d":"M19 7h-9"}],["circle",{"cx":"17","cy":"17","r":"3"}],["circle",{"cx":"7","cy":"7","r":"3"}]],
+  "share": [["path",{"d":"M12 2v13"}],["path",{"d":"m16 6-4-4-4 4"}],["path",{"d":"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"}]],
+  "share-2": [["circle",{"cx":"18","cy":"5","r":"3"}],["circle",{"cx":"6","cy":"12","r":"3"}],["circle",{"cx":"18","cy":"19","r":"3"}],["line",{"x1":"8.59","x2":"15.42","y1":"13.51","y2":"17.49"}],["line",{"x1":"15.41","x2":"8.59","y1":"6.51","y2":"10.49"}]],
+  "shield": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}]],
+  "shield-alert": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"M12 8v4"}],["path",{"d":"M12 16h.01"}]],
+  "shield-ban": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m4.243 5.21 14.39 12.472"}]],
+  "shield-check": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m9 12 2 2 4-4"}]],
+  "shield-x": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m14.5 9.5-5 5"}],["path",{"d":"m9.5 9.5 5 5"}]],
+  "shopping-bag": [["path",{"d":"M16 10a4 4 0 0 1-8 0"}],["path",{"d":"M3.103 6.034h17.794"}],["path",{"d":"M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"}]],
+  "shopping-cart": [["path",{"d":"m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"}],["path",{"d":"M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"}],["circle",{"cx":"18","cy":"20","r":"2"}],["circle",{"cx":"8","cy":"20","r":"2"}]],
+  "sliders-horizontal": [["path",{"d":"M10 5H3"}],["path",{"d":"M12 19H3"}],["path",{"d":"M14 3v4"}],["path",{"d":"M16 17v4"}],["path",{"d":"M21 12h-9"}],["path",{"d":"M21 19h-5"}],["path",{"d":"M21 5h-7"}],["path",{"d":"M8 10v4"}],["path",{"d":"M8 12H3"}]],
+  "sliders-vertical": [["path",{"d":"M10 8h4"}],["path",{"d":"M12 21v-9"}],["path",{"d":"M12 8V3"}],["path",{"d":"M17 16h4"}],["path",{"d":"M19 12V3"}],["path",{"d":"M19 21v-5"}],["path",{"d":"M3 14h4"}],["path",{"d":"M5 10V3"}],["path",{"d":"M5 21v-7"}]],
+  "smartphone": [["rect",{"width":"14","height":"20","x":"5","y":"2","rx":"2","ry":"2"}],["path",{"d":"M12 18h.01"}]],
+  "sparkles": [["path",{"d":"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"}],["path",{"d":"M20 2v4"}],["path",{"d":"M22 4h-4"}],["circle",{"cx":"4","cy":"20","r":"2"}]],
+  "square": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}]],
+  "square-pen": [["path",{"d":"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}],["path",{"d":"M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"}]],
+  "star": [["path",{"d":"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"}]],
+  "star-half": [["path",{"d":"M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"}]],
+  "store": [["path",{"d":"M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"}],["path",{"d":"M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"}],["path",{"d":"M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"}]],
+  "sun": [["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M12 2v2"}],["path",{"d":"M12 20v2"}],["path",{"d":"m4.93 4.93 1.41 1.41"}],["path",{"d":"m17.66 17.66 1.41 1.41"}],["path",{"d":"M2 12h2"}],["path",{"d":"M20 12h2"}],["path",{"d":"m6.34 17.66-1.41 1.41"}],["path",{"d":"m19.07 4.93-1.41 1.41"}]],
+  "table": [["path",{"d":"M12 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}]],
+  "table-properties": [["path",{"d":"M15 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "tablet": [["rect",{"width":"16","height":"20","x":"4","y":"2","rx":"2","ry":"2"}],["line",{"x1":"12","x2":"12.01","y1":"18","y2":"18"}]],
+  "tag": [["path",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "tags": [["path",{"d":"M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"}],["path",{"d":"M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"}],["circle",{"cx":"10.5","cy":"6.5","r":".5","fill":"currentColor"}]],
+  "terminal": [["path",{"d":"M12 19h8"}],["path",{"d":"m4 17 6-6-6-6"}]],
+  "text-align-center": [["path",{"d":"M21 5H3"}],["path",{"d":"M17 12H7"}],["path",{"d":"M19 19H5"}]],
+  "text-align-end": [["path",{"d":"M21 5H3"}],["path",{"d":"M21 12H9"}],["path",{"d":"M21 19H7"}]],
+  "text-align-start": [["path",{"d":"M21 5H3"}],["path",{"d":"M15 12H3"}],["path",{"d":"M17 19H3"}]],
+  "text-cursor-input": [["path",{"d":"M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"}],["path",{"d":"M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"}],["path",{"d":"M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"}],["path",{"d":"M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"}],["path",{"d":"M9 6v12"}]],
+  "thumbs-down": [["path",{"d":"M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"}],["path",{"d":"M17 14V2"}]],
+  "thumbs-up": [["path",{"d":"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"}],["path",{"d":"M7 10v12"}]],
+  "ticket-percent": [["path",{"d":"M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"}],["path",{"d":"M9 9h.01"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"M15 15h.01"}]],
+  "timer": [["line",{"x1":"10","x2":"14","y1":"2","y2":"2"}],["line",{"x1":"12","x2":"15","y1":"14","y2":"11"}],["circle",{"cx":"12","cy":"14","r":"8"}]],
+  "toggle-left": [["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"7"}]],
+  "trash": [["path",{"d":"M10 11v6"}],["path",{"d":"M14 11v6"}],["path",{"d":"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{"d":"M3 6h18"}],["path",{"d":"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]],
+  "trees": [["path",{"d":"M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"}],["path",{"d":"M7 16v6"}],["path",{"d":"M13 19v3"}],["path",{"d":"M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"}]],
+  "trending-down": [["path",{"d":"M16 17h6v-6"}],["path",{"d":"m22 17-8.5-8.5-5 5L2 7"}]],
+  "trending-up": [["path",{"d":"M16 7h6v6"}],["path",{"d":"m22 7-8.5 8.5-5-5L2 17"}]],
+  "triangle-alert": [["path",{"d":"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}],["path",{"d":"M12 9v4"}],["path",{"d":"M12 17h.01"}]],
+  "truck": [["path",{"d":"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}],["path",{"d":"M15 18H9"}],["path",{"d":"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"}],["circle",{"cx":"17","cy":"18","r":"2"}],["circle",{"cx":"7","cy":"18","r":"2"}]],
+  "type": [["path",{"d":"M12 4v16"}],["path",{"d":"M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"}],["path",{"d":"M9 20h6"}]],
+  "undo-2": [["path",{"d":"M9 14 4 9l5-5"}],["path",{"d":"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]],
+  "upload": [["path",{"d":"M12 3v12"}],["path",{"d":"m17 8-5-5-5 5"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}]],
+  "user": [["path",{"d":"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}],["circle",{"cx":"12","cy":"7","r":"4"}]],
+  "user-check": [["path",{"d":"m16 11 2 2 4-4"}],["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "user-cog": [["path",{"d":"M10 15H6a4 4 0 0 0-4 4v2"}],["path",{"d":"m14.305 16.53.923-.382"}],["path",{"d":"m15.228 13.852-.923-.383"}],["path",{"d":"m16.852 12.228-.383-.923"}],["path",{"d":"m16.852 17.772-.383.924"}],["path",{"d":"m19.148 12.228.383-.923"}],["path",{"d":"m19.53 18.696-.382-.924"}],["path",{"d":"m20.772 13.852.924-.383"}],["path",{"d":"m20.772 16.148.924.383"}],["circle",{"cx":"18","cy":"15","r":"3"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "user-pen": [["path",{"d":"M11.5 15H7a4 4 0 0 0-4 4v2"}],["path",{"d":"M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"}],["circle",{"cx":"10","cy":"7","r":"4"}]],
+  "user-plus": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"19","x2":"19","y1":"8","y2":"14"}],["line",{"x1":"22","x2":"16","y1":"11","y2":"11"}]],
+  "user-round-check": [["path",{"d":"M2 21a8 8 0 0 1 13.292-6"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"m16 19 2 2 4-4"}]],
+  "user-x": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"17","x2":"22","y1":"8","y2":"13"}],["line",{"x1":"22","x2":"17","y1":"8","y2":"13"}]],
+  "users": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["path",{"d":"M16 3.128a4 4 0 0 1 0 7.744"}],["path",{"d":"M22 21v-2a4 4 0 0 0-3-3.87"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "users-round": [["path",{"d":"M18 21a8 8 0 0 0-16 0"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"}]],
+  "video": [["path",{"d":"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"}],["rect",{"x":"2","y":"6","width":"14","height":"12","rx":"2"}]],
+  "wallet": [["path",{"d":"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"}],["path",{"d":"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"}]],
+  "wand-sparkles": [["path",{"d":"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"}],["path",{"d":"m14 7 3 3"}],["path",{"d":"M5 6v4"}],["path",{"d":"M19 14v4"}],["path",{"d":"M10 2v2"}],["path",{"d":"M7 8H3"}],["path",{"d":"M21 16h-4"}],["path",{"d":"M11 3H9"}]],
+  "webhook": [["path",{"d":"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"}],["path",{"d":"m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"}],["path",{"d":"m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"}]],
+  "wrench": [["path",{"d":"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"}]],
+  "x": [["path",{"d":"M18 6 6 18"}],["path",{"d":"m6 6 12 12"}]],
+  "zap": [["path",{"d":"M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"}]],
+};
diff --git a/packages/solid/ui/src/primitives/radio/radio.tsx b/packages/solid/ui/src/primitives/radio/radio.tsx
new file mode 100644
index 0000000..f1318e8
--- /dev/null
+++ b/packages/solid/ui/src/primitives/radio/radio.tsx
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/radio.json
+/**
+ * Radio is a native single-choice control within a named group.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Radio: the classes of each value of each prop (shadcn/cva style). */
+export const radioVariants = variants({
+  base:
+    "shrink-0 appearance-none rounded-full bg-background inset-ring inset-ring-input checked:bg-primary " +
+    "checked:inset-ring-primary radio-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      default: "size-5 [--dot:10px]",
+      sm: "size-4 [--dot:8px]",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type RadioVariant = VariantKey<typeof radioVariants, "variant">;
+export type RadioSize = VariantKey<typeof radioVariants, "size">;
+
+/**
+ * Radio renders input[type=radio] with shared Name for grouping.
+ */
+export type RadioProps = Omit<
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  "class" | "children" | "variant" | "size" | "checked" | "disabled" | "required"
+> & {
+  variant?: RadioVariant;
+  size?: RadioSize;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+
+export const Radio: Component<RadioProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "checked", "disabled", "required", "class"]);
+  const cls = () => cn(radioVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <input
+      type="radio"
+      class={cls() || undefined}
+      checked={local.checked || undefined}
+      disabled={local.disabled || undefined}
+      required={local.required || undefined}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/range/range.tsx b/packages/solid/ui/src/primitives/range/range.tsx
new file mode 100644
index 0000000..9be5597
--- /dev/null
+++ b/packages/solid/ui/src/primitives/range/range.tsx
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/range.json
+/**
+ * Range renders a styled input[type=range] (single thumb slider). The value is controlled from outside: Value
+ * in, an input event out (canary used a bindable prop).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants } from "../../utils";
+import { isSetNum, orUndef } from "../../utils/expr";
+
+/** Range: the classes of each value of each prop (shadcn/cva style). */
+export const rangeVariants = variants({
+  base:
+    "h-5 w-full cursor-pointer appearance-none bg-transparent accent-primary disabled:cursor-not-allowed " +
+    "disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded " +
+    "[&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 " +
+    "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded " +
+    "[&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded " +
+    "[&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded " +
+    "[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * Range renders input type=range.
+ */
+export type RangeProps = Omit<
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  "class" | "children" | "min" | "max" | "step" | "disabled" | "aria-label"
+> & {
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  "aria-label"?: string;
+  class?: string;
+};
+
+export const Range: Component<RangeProps> = (props) => {
+  const [local, rest] = splitProps(props, ["min", "max", "step", "disabled", "aria-label", "class"]);
+  const cls = () => cn(rangeVariants(), local.class);
+  return (
+    <input
+      type="range"
+      class={cls() || undefined}
+      min={(isSetNum(local.min) ? String(local.min ?? 0) : "0")}
+      max={(isSetNum(local.max) ? String(local.max ?? 0) : "100")}
+      step={(isSetNum(local.step) ? String(local.step ?? 0) : "1")}
+      disabled={local.disabled || undefined}
+      aria-label={orUndef(local["aria-label"])}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/select/opt-group.tsx b/packages/solid/ui/src/primitives/select/opt-group.tsx
new file mode 100644
index 0000000..657322f
--- /dev/null
+++ b/packages/solid/ui/src/primitives/select/opt-group.tsx
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/select.json
+/**
+ * OptGroup: one part of Select (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * OptGroup renders a native optgroup around option children.
+ */
+export type OptGroupProps = Omit<
+  JSX.OptgroupHTMLAttributes<HTMLOptGroupElement>,
+  "class" | "children" | "disabled"
+> & {
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const OptGroup: Component<OptGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["disabled", "class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <optgroup class={cls() || undefined} disabled={local.disabled || undefined} {...rest}>
+      {local.children}
+    </optgroup>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/select/select-option.tsx b/packages/solid/ui/src/primitives/select/select-option.tsx
new file mode 100644
index 0000000..99b6adf
--- /dev/null
+++ b/packages/solid/ui/src/primitives/select/select-option.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/select.json
+/**
+ * SelectOption: one part of Select (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+
+/**
+ * SelectOption renders an option for custom Select children.
+ */
+export type SelectOptionProps = Omit<
+  JSX.OptionHTMLAttributes<HTMLOptionElement>,
+  "class" | "children" | "selected" | "disabled"
+> & {
+  selected?: boolean;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const SelectOption: Component<SelectOptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["selected", "disabled", "class", "children"]);
+  return (
+    <option selected={local.selected || undefined} disabled={local.disabled || undefined} {...rest}>
+      {local.children}
+    </option>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/select/select.tsx b/packages/solid/ui/src/primitives/select/select.tsx
new file mode 100644
index 0000000..0678c89
--- /dev/null
+++ b/packages/solid/ui/src/primitives/select/select.tsx
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/select.json
+/**
+ * Select is a native dropdown built from Option items.
+ */
+
+import { splitProps, For, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { eqStr } from "../../utils/expr";
+
+/** Select: the classes of each value of each prop (shadcn/cva style). */
+export const selectVariants = variants({
+  base:
+    "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+    "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+    "focus-visible:inset-ring-ring rounded",
+  variants: {
+    size: {
+      sm: "h-8 px-3 text-sm",
+      default: "h-10 px-3 text-sm",
+      lg: "h-12 px-4 text-base",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted inset-ring-transparent",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type SelectOptionItem = {
+  value?: string;
+  label?: string;
+};
+
+export type SelectVariant = VariantKey<typeof selectVariants, "variant">;
+export type SelectSize = VariantKey<typeof selectVariants, "size">;
+
+/**
+ * Select renders option children from the Options list plus manual children.
+ */
+export type SelectProps = Omit<
+  JSX.SelectHTMLAttributes<HTMLSelectElement>,
+  "class" | "children" | "variant" | "size" | "value" | "disabled" | "required" | "options"
+> & {
+  variant?: SelectVariant;
+  size?: SelectSize;
+  value?: string;
+  disabled?: boolean;
+  required?: boolean;
+  options?: SelectOptionItem[];
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Select: Component<SelectProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "value", "disabled", "required", "options", "class", "children"]);
+  const cls = () => cn(selectVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <select
+      class={cls() || undefined}
+      disabled={local.disabled || undefined}
+      required={local.required || undefined}
+      {...rest}
+    >
+      <For each={local.options ?? []}>
+        {(item) => (
+          <option value={(item.value) ?? ""} selected={eqStr(item.value, local.value) || undefined}>
+            {item.label}
+          </option>
+        )}
+      </For>
+      {local.children}
+    </select>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/separator/separator.tsx b/packages/solid/ui/src/primitives/separator/separator.tsx
new file mode 100644
index 0000000..0d04d29
--- /dev/null
+++ b/packages/solid/ui/src/primitives/separator/separator.tsx
@@ -0,0 +1,55 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/separator.json
+/**
+ * Separator renders a semantic or decorative hr.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { eqStr } from "../../utils/expr";
+
+/** Separator: the classes of each value of each prop (shadcn/cva style). */
+export const separatorVariants = variants({
+  base: "shrink-0 border-0 bg-border",
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "h-full w-px",
+    },
+    variant: {
+      default: "",
+      spaced: "my-6",
+    },
+  },
+  defaultVariants: { orientation: "horizontal", variant: "default" },
+});
+
+export type SeparatorVariant = VariantKey<typeof separatorVariants, "variant">;
+export type SeparatorOrientation = VariantKey<typeof separatorVariants, "orientation">;
+
+/**
+ * Separator renders hr with optional decorative semantics.
+ */
+export type SeparatorProps = Omit<
+  JSX.HTMLAttributes<HTMLHRElement>,
+  "class" | "children" | "variant" | "orientation" | "decorative"
+> & {
+  variant?: SeparatorVariant;
+  orientation?: SeparatorOrientation;
+  decorative?: boolean;
+  class?: string;
+};
+
+export const Separator: Component<SeparatorProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "orientation", "decorative", "class"]);
+  const cls = () => cn(separatorVariants({ orientation: local.orientation, variant: local.variant }), local.class);
+  return (
+    <hr
+      class={cls() || undefined}
+      role={local.decorative ? "presentation" : undefined}
+      aria-hidden={local.decorative ? "true" : undefined}
+      aria-orientation={eqStr(local.orientation, "vertical") ? "vertical" : undefined}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/sheet/sheet-close.tsx b/packages/solid/ui/src/primitives/sheet/sheet-close.tsx
new file mode 100644
index 0000000..901f4ae
--- /dev/null
+++ b/packages/solid/ui/src/primitives/sheet/sheet-close.tsx
@@ -0,0 +1,55 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/sheet.json
+/**
+ * SheetClose: one part of Sheet (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, type VariantKey } from "../../utils";
+import { defaultIfEmpty } from "../../utils/expr";
+import { sheettriggerVariants } from "./sheet-trigger";
+
+export type SheetCloseVariant = VariantKey<typeof sheettriggerVariants, "variant">;
+export type SheetCloseSize = VariantKey<typeof sheettriggerVariants, "size">;
+
+/**
+ * SheetClose renders the close button (Lucide x) inside the panel.
+ */
+export type SheetCloseProps = Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "class" | "children" | "variant" | "size" | "aria-label"
+> & {
+  variant?: SheetCloseVariant;
+  size?: SheetCloseSize;
+  "aria-label"?: string;
+  class?: string;
+};
+
+export const SheetClose: Component<SheetCloseProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "aria-label", "class"]);
+  const cls = () => cn(sheettriggerVariants({ variant: local.variant, size: local.size }), local.class);
+  return (
+    <button
+      type="button"
+      class={cls() || undefined}
+      data-ui8kit="sheet-close"
+      aria-label={defaultIfEmpty(local["aria-label"], "Close menu")}
+      {...rest}
+    >
+      <svg
+        class="size-5"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/sheet/sheet-trigger.tsx b/packages/solid/ui/src/primitives/sheet/sheet-trigger.tsx
new file mode 100644
index 0000000..3e02f61
--- /dev/null
+++ b/packages/solid/ui/src/primitives/sheet/sheet-trigger.tsx
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/sheet.json
+/**
+ * SheetTrigger: one part of Sheet (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty, orUndef } from "../../utils/expr";
+
+/** SheetTrigger: the classes of each value of each prop (shadcn/cva style). */
+export const sheettriggerVariants = variants({
+  base:
+    "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  variants: {
+    variant: {
+      default: "bg-muted text-foreground hover:bg-accent",
+      ghost: "bg-transparent text-foreground hover:bg-muted",
+      contrast: "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      current: "bg-transparent text-current hover:bg-current/10",
+    },
+    size: {
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type SheetTriggerVariant = VariantKey<typeof sheettriggerVariants, "variant">;
+export type SheetTriggerSize = VariantKey<typeof sheettriggerVariants, "size">;
+
+/**
+ * SheetTrigger renders the menu button (aria-expanded, aria-controls, aria-haspopup=dialog) with Lucide menu/x
+ * icons.
+ */
+export type SheetTriggerProps = Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "class" | "children" | "variant" | "size" | "controls" | "aria-label"
+> & {
+  variant?: SheetTriggerVariant;
+  size?: SheetTriggerSize;
+  controls?: string;
+  "aria-label"?: string;
+  class?: string;
+};
+
+export const SheetTrigger: Component<SheetTriggerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "controls", "aria-label", "class"]);
+  const cls = () => cn(sheettriggerVariants({ variant: local.variant, size: local.size }), local.class);
+  return (
+    <button
+      type="button"
+      class={cls() || undefined}
+      data-ui8kit="sheet-trigger"
+      aria-controls={orUndef(local.controls)}
+      aria-expanded="false"
+      aria-haspopup="dialog"
+      aria-label={defaultIfEmpty(local["aria-label"], "Open menu")}
+      {...rest}
+    >
+      <svg
+        class="block size-5 in-aria-expanded:hidden"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <line x1="4" x2="20" y1="12" y2="12" />
+        <line x1="4" x2="20" y1="6" y2="6" />
+        <line x1="4" x2="20" y1="18" y2="18" />
+      </svg>
+      <svg
+        class="hidden size-5 in-aria-expanded:block"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/sheet/sheet.tsx b/packages/solid/ui/src/primitives/sheet/sheet.tsx
new file mode 100644
index 0000000..a050c08
--- /dev/null
+++ b/packages/solid/ui/src/primitives/sheet/sheet.tsx
@@ -0,0 +1,64 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/sheet.json
+/**
+ * Sheet is a side drawer dialog with a trigger (Lucide menu/x) and a close button. Behavior:
+ * behaviors/ui8kit.js.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty, orUndef } from "../../utils/expr";
+
+/** Sheet: the classes of each value of each prop (shadcn/cva style). */
+export const sheetVariants = variants({
+  base: "fixed inset-0 z-50 flex",
+  variants: {
+    side: {
+      left: "flex-row justify-start",
+      right: "flex-row justify-end",
+    },
+  },
+  defaultVariants: { side: "right" },
+});
+
+export type SheetSide = VariantKey<typeof sheetVariants, "side">;
+
+/**
+ * Sheet renders the hidden dialog root: overlay + panel (children). ID is required for the trigger's
+ * aria-controls.
+ */
+export type SheetProps = Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "class" | "children" | "side" | "id" | "aria-label" | "open"
+> & {
+  side?: SheetSide;
+  id?: string;
+  "aria-label"?: string;
+  open?: boolean;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Sheet: Component<SheetProps> = (props) => {
+  const [local, rest] = splitProps(props, ["side", "id", "aria-label", "open", "class", "children"]);
+  const cls = () => cn(sheetVariants({ side: local.side }), local.class);
+  return (
+    <div
+      class={cls() || undefined}
+      id={orUndef(local.id)}
+      role="dialog"
+      aria-modal="true"
+      aria-label={defaultIfEmpty(local["aria-label"], "Menu")}
+      data-ui8kit="sheet"
+      hidden={!(local.open) || undefined}
+      {...rest}
+    >
+      <div class="absolute inset-0 bg-foreground/40" data-ui8kit="sheet-overlay" />
+      <div
+        class="relative flex h-full w-80 max-w-full flex-col gap-6 overflow-auto bg-background p-6 text-foreground shadow-lg"
+      >
+        {local.children}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/skeleton/skeleton.tsx b/packages/solid/ui/src/primitives/skeleton/skeleton.tsx
new file mode 100644
index 0000000..cf23c82
--- /dev/null
+++ b/packages/solid/ui/src/primitives/skeleton/skeleton.tsx
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/skeleton.json
+/**
+ * Skeleton renders a pulsing placeholder box (loading state). It is decorative: aria-hidden; the loading state
+ * is announced by the container (aria-busy).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+
+/** Skeleton: the classes of each value of each prop (shadcn/cva style). */
+export const skeletonVariants = variants({
+  base: "animate-pulse bg-muted motion-reduce:animate-none rounded",
+  variants: {
+    shape: {
+      line: "h-4 w-full",
+      block: "h-20 w-full",
+    },
+  },
+  defaultVariants: { shape: "line" },
+});
+
+export type SkeletonShape = VariantKey<typeof skeletonVariants, "shape">;
+
+/**
+ * Skeleton renders a decorative placeholder.
+ */
+export type SkeletonProps = Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "class" | "children" | "shape"
+> & {
+  shape?: SkeletonShape;
+  class?: string;
+};
+
+export const Skeleton: Component<SkeletonProps> = (props) => {
+  const [local, rest] = splitProps(props, ["shape", "class"]);
+  const cls = () => cn(skeletonVariants({ shape: local.shape }), local.class);
+  return (
+    <div class={cls() || undefined} aria-hidden="true" data-slot="skeleton" {...rest} />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/stack/stack.tsx b/packages/solid/ui/src/primitives/stack/stack.tsx
new file mode 100644
index 0000000..85616f1
--- /dev/null
+++ b/packages/solid/ui/src/primitives/stack/stack.tsx
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/stack.json
+/**
+ * Stack arranges children vertically in a flex column.
+ * Default layout primitive for spacing sections and form fields.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn, variants, type VariantKey } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/** Stack: the classes of each value of each prop (shadcn/cva style). */
+export const stackVariants = variants({
+  base: "flex flex-col",
+  variants: {
+    gap: {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      auto: "",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline",
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+    },
+  },
+  defaultVariants: { gap: "auto", align: "start", justify: "start" },
+});
+
+export type StackGap = VariantKey<typeof stackVariants, "gap">;
+export type StackAlign = VariantKey<typeof stackVariants, "align">;
+export type StackJustify = VariantKey<typeof stackVariants, "justify">;
+
+/**
+ * Stack renders a vertical flex container.
+ */
+export type StackProps = Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "class" | "children" | "gap" | "align" | "justify" | "tag"
+> & {
+  gap?: StackGap;
+  align?: StackAlign;
+  justify?: StackJustify;
+  tag?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Stack: Component<StackProps> = (props) => {
+  const [local, rest] = splitProps(props, ["gap", "align", "justify", "tag", "class", "children"]);
+  const cls = () => cn(stackVariants({ gap: local.gap, align: local.align, justify: local.justify }), local.class);
+  const resolvedTagValue = () => resolveTag(local.tag, "div", TagGroup.Stack);
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)}>
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/switch/switch.tsx b/packages/solid/ui/src/primitives/switch/switch.tsx
new file mode 100644
index 0000000..e11d820
--- /dev/null
+++ b/packages/solid/ui/src/primitives/switch/switch.tsx
@@ -0,0 +1,57 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/switch.json
+/**
+ * Switch is a toggle control (checkbox with switch ARIA semantics).
+ * Use for on/off settings; wireframe uses native checkbox styling.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { boolStr } from "../../utils/expr";
+
+/** Switch: the classes of each value of each prop (shadcn/cva style). */
+export const switchVariants = variants({
+  base:
+    "relative shrink-0 appearance-none bg-muted inset-ring inset-ring-input checked:bg-primary " +
+    "checked:inset-ring-primary switch-knob disabled:cursor-not-allowed disabled:opacity-50 rounded-full",
+  variants: {
+    size: {
+      default: "h-5 w-9 [--knob:12px] [--pad:4px]",
+      sm: "h-4 w-8 [--knob:12px] [--pad:2px]",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type SwitchSize = VariantKey<typeof switchVariants, "size">;
+
+/**
+ * Switch renders input[type=checkbox] with switch role attrs.
+ */
+export type SwitchProps = Omit<
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  "class" | "children" | "size" | "checked" | "disabled" | "required"
+> & {
+  size?: SwitchSize;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+
+export const Switch: Component<SwitchProps> = (props) => {
+  const [local, rest] = splitProps(props, ["size", "checked", "disabled", "required", "class"]);
+  const cls = () => cn(switchVariants({ size: local.size }), local.class);
+  return (
+    <input
+      type="checkbox"
+      class={cls() || undefined}
+      checked={local.checked || undefined}
+      disabled={local.disabled || undefined}
+      required={local.required || undefined}
+      role="switch"
+      aria-checked={boolStr(local.checked)}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table-body.tsx b/packages/solid/ui/src/primitives/table/table-body.tsx
new file mode 100644
index 0000000..ed9374e
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table-body.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableBody: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * TableBody renders the tbody section.
+ */
+export type TableBodyProps = Omit<
+  JSX.HTMLAttributes<HTMLTableSectionElement>,
+  "class" | "children"
+> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const TableBody: Component<TableBodyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <tbody class={cls() || undefined} {...rest}>
+      {local.children}
+    </tbody>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table-caption.tsx b/packages/solid/ui/src/primitives/table/table-caption.tsx
new file mode 100644
index 0000000..e09abd8
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table-caption.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableCaption: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * TableCaption renders the table caption.
+ */
+export type TableCaptionProps = Omit<
+  JSX.HTMLAttributes<HTMLTableCaptionElement>,
+  "class" | "children"
+> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const TableCaption: Component<TableCaptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <caption class={cls() || undefined} {...rest}>
+      {local.children}
+    </caption>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table-cell.tsx b/packages/solid/ui/src/primitives/table/table-cell.tsx
new file mode 100644
index 0000000..a36046f
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table-cell.tsx
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableCell: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+/** TableCell: the classes of each value of each prop (shadcn/cva style). */
+export const tableCellVariants = variants({
+  base: "px-2 py-2 align-middle",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * TableCell renders td with colspan and rowspan.
+ */
+export type TableCellProps = Omit<
+  JSX.TdHTMLAttributes<HTMLTableCellElement>,
+  "class" | "children" | "scope" | "colSpan" | "rowSpan" | "abbr"
+> & {
+  scope?: string;
+  colSpan?: number;
+  rowSpan?: number;
+  abbr?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const TableCell: Component<TableCellProps> = (props) => {
+  const [local, rest] = splitProps(props, ["scope", "colSpan", "rowSpan", "abbr", "class", "children"]);
+  const cls = () => cn(tableCellVariants(), local.class);
+  return (
+    <td
+      class={cls() || undefined}
+      colspan={isSetNum(local.colSpan) ? local.colSpan : undefined}
+      rowspan={isSetNum(local.rowSpan) ? local.rowSpan : undefined}
+      {...rest}
+    >
+      {local.children}
+    </td>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table-col-group.tsx b/packages/solid/ui/src/primitives/table/table-col-group.tsx
new file mode 100644
index 0000000..b9ef728
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table-col-group.tsx
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableColGroup: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+/**
+ * TableColGroup renders colgroup with optional span.
+ */
+export type TableColGroupProps = Omit<
+  JSX.ColgroupHTMLAttributes<HTMLTableColElement>,
+  "class" | "children" | "span"
+> & {
+  span?: number;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const TableColGroup: Component<TableColGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["span", "class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <colgroup class={cls() || undefined} span={isSetNum(local.span) ? local.span : undefined} {...rest}>
+      {local.children}
+    </colgroup>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table-col.tsx b/packages/solid/ui/src/primitives/table/table-col.tsx
new file mode 100644
index 0000000..709b1d5
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table-col.tsx
@@ -0,0 +1,28 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableCol: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+/**
+ * TableCol renders a single col definition.
+ */
+export type TableColProps = Omit<
+  JSX.ColHTMLAttributes<HTMLTableColElement>,
+  "class" | "children" | "span"
+> & {
+  span?: number;
+  class?: string;
+};
+
+export const TableCol: Component<TableColProps> = (props) => {
+  const [local, rest] = splitProps(props, ["span", "class"]);
+  const cls = () => cn(local.class);
+  return (
+    <col class={cls() || undefined} span={isSetNum(local.span) ? local.span : undefined} {...rest} />
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table-foot.tsx b/packages/solid/ui/src/primitives/table/table-foot.tsx
new file mode 100644
index 0000000..ff877b0
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table-foot.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableFoot: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * TableFoot renders the tfoot section.
+ */
+export type TableFootProps = Omit<
+  JSX.HTMLAttributes<HTMLTableSectionElement>,
+  "class" | "children"
+> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const TableFoot: Component<TableFootProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <tfoot class={cls() || undefined} {...rest}>
+      {local.children}
+    </tfoot>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table-head-cell.tsx b/packages/solid/ui/src/primitives/table/table-head-cell.tsx
new file mode 100644
index 0000000..3ce8f6d
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table-head-cell.tsx
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableHeadCell: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants } from "../../utils";
+import { isSetNum, oneOfOrLower, orUndef } from "../../utils/expr";
+
+/** TableHeadCell: the classes of each value of each prop (shadcn/cva style). */
+export const tableHeadCellVariants = variants({
+  base: "px-2 py-2 text-left align-middle font-semibold",
+  variants: {},
+  defaultVariants: {},
+});
+
+/**
+ * TableHeadCell renders th with optional scope and abbr.
+ */
+export type TableHeadCellProps = Omit<
+  JSX.ThHTMLAttributes<HTMLTableCellElement>,
+  "class" | "children" | "scope" | "colSpan" | "rowSpan" | "abbr"
+> & {
+  scope?: string;
+  colSpan?: number;
+  rowSpan?: number;
+  abbr?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const TableHeadCell: Component<TableHeadCellProps> = (props) => {
+  const [local, rest] = splitProps(props, ["scope", "colSpan", "rowSpan", "abbr", "class", "children"]);
+  const cls = () => cn(tableHeadCellVariants(), local.class);
+  return (
+    <th
+      class={cls() || undefined}
+      scope={orUndef(oneOfOrLower(local.scope, "", "col", "colgroup", "row", "rowgroup")) as "col" | "row" | "rowgroup" | "colgroup" | undefined}
+      abbr={orUndef(local.abbr)}
+      colspan={isSetNum(local.colSpan) ? local.colSpan : undefined}
+      rowspan={isSetNum(local.rowSpan) ? local.rowSpan : undefined}
+      {...rest}
+    >
+      {local.children}
+    </th>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table-head.tsx b/packages/solid/ui/src/primitives/table/table-head.tsx
new file mode 100644
index 0000000..a3ab62e
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table-head.tsx
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableHead: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * TableHead renders the thead section.
+ */
+export type TableHeadProps = Omit<
+  JSX.HTMLAttributes<HTMLTableSectionElement>,
+  "class" | "children"
+> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const TableHead: Component<TableHeadProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <thead class={cls() || undefined} {...rest}>
+      {local.children}
+    </thead>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table-row.tsx b/packages/solid/ui/src/primitives/table/table-row.tsx
new file mode 100644
index 0000000..da66dd9
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table-row.tsx
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * TableRow: one part of Table (one file per part, as in the Svelte package).
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * TableRow renders one tr row.
+ */
+export type TableRowProps = Omit<JSX.HTMLAttributes<HTMLTableRowElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const TableRow: Component<TableRowProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <tr class={cls() || undefined} {...rest}>
+      {local.children}
+    </tr>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/table/table.tsx b/packages/solid/ui/src/primitives/table/table.tsx
new file mode 100644
index 0000000..9ac9f9a
--- /dev/null
+++ b/packages/solid/ui/src/primitives/table/table.tsx
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+/**
+ * Table composes semantic table, caption, sections, rows, and cells.
+ * Supports scope, colspan, and headers attrs on head cells.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "../../utils";
+
+/**
+ * Table renders the root table element.
+ */
+export type TableProps = Omit<JSX.HTMLAttributes<HTMLTableElement>, "class" | "children"> & {
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Table: Component<TableProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const cls = () => cn(local.class);
+  return (
+    <table class={cls() || undefined} {...rest}>
+      {local.children}
+    </table>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/text/text.tsx b/packages/solid/ui/src/primitives/text/text.tsx
new file mode 100644
index 0000000..0df1346
--- /dev/null
+++ b/packages/solid/ui/src/primitives/text/text.tsx
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/text.json
+/**
+ * Text renders body copy: a paragraph by default; Tag picks another text element (blockquote, figcaption,
+ * address, pre, or an
+ * inline element). Title (as 1–6) is for headings.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn, variants, type VariantKey } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+/** Text: the classes of each value of each prop (shadcn/cva style). */
+export const textVariants = variants({
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      inherit: "",
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      inherit: "",
+    },
+  },
+  defaultVariants: { size: "inherit", weight: "inherit" },
+});
+
+export type TextSize = VariantKey<typeof textVariants, "size">;
+export type TextWeight = VariantKey<typeof textVariants, "weight">;
+
+/**
+ * Text renders a p element with body copy classes, or the block or inline text element of `Tag`.
+ */
+export type TextProps = Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "class" | "children" | "size" | "weight" | "tag"
+> & {
+  size?: TextSize;
+  weight?: TextWeight;
+  tag?: string;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Text: Component<TextProps> = (props) => {
+  const [local, rest] = splitProps(props, ["size", "weight", "tag", "class", "children"]);
+  const cls = () => cn(textVariants({ size: local.size, weight: local.weight }), local.class);
+  const resolvedTagValue = () => resolveTag(local.tag, "p", TagGroup.Text);
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)}>
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/textarea/textarea.tsx b/packages/solid/ui/src/primitives/textarea/textarea.tsx
new file mode 100644
index 0000000..c7d84d2
--- /dev/null
+++ b/packages/solid/ui/src/primitives/textarea/textarea.tsx
@@ -0,0 +1,64 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/textarea.json
+/**
+ * Textarea is a multi-line native text field with row sizing.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+/** Textarea: the classes of each value of each prop (shadcn/cva style). */
+export const textareaVariants = variants({
+  base:
+    "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+    "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+    "focus-visible:inset-ring-ring rounded",
+  variants: {
+    size: {
+      sm: "min-h-16 px-3 py-2 text-base md:text-sm",
+      default: "min-h-20 px-3 py-2 text-base md:text-sm",
+      lg: "min-h-24 px-4 py-3 text-base",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted inset-ring-transparent",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type TextareaVariant = VariantKey<typeof textareaVariants, "variant">;
+export type TextareaSize = VariantKey<typeof textareaVariants, "size">;
+
+/**
+ * Textarea renders a styled multi-line form control.
+ */
+export type TextareaProps = Omit<
+  JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "class" | "children" | "variant" | "size" | "value" | "rows" | "disabled" | "required"
+> & {
+  variant?: TextareaVariant;
+  size?: TextareaSize;
+  value?: string;
+  rows?: number;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+
+export const Textarea: Component<TextareaProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "value", "rows", "disabled", "required", "class"]);
+  const cls = () => cn(textareaVariants({ size: local.size, variant: local.variant }), local.class);
+  return (
+    <textarea
+      class={cls() || undefined}
+      rows={(isSetNum(local.rows) ? local.rows : 4)}
+      disabled={local.disabled || undefined}
+      required={local.required || undefined}
+      {...rest}
+    >
+      {local.value}
+    </textarea>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/themetoggle/themetoggle.tsx b/packages/solid/ui/src/primitives/themetoggle/themetoggle.tsx
new file mode 100644
index 0000000..9f47c82
--- /dev/null
+++ b/packages/solid/ui/src/primitives/themetoggle/themetoggle.tsx
@@ -0,0 +1,97 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/themetoggle.json
+/**
+ * ThemeToggle switches between light and dark color schemes (button with aria-pressed). Behavior:
+ * data-ui8kit="theme-toggle" in behaviors/ui8kit.js.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn, variants, type VariantKey } from "../../utils";
+import { defaultIfEmpty } from "../../utils/expr";
+
+/** ThemeToggle: the classes of each value of each prop (shadcn/cva style). */
+export const themetoggleVariants = variants({
+  base:
+    "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  variants: {
+    variant: {
+      default: "bg-muted text-foreground hover:bg-accent",
+      ghost: "bg-transparent text-foreground hover:bg-muted",
+      contrast: "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      current: "bg-transparent text-current hover:bg-current/10",
+    },
+    size: {
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type ThemeToggleVariant = VariantKey<typeof themetoggleVariants, "variant">;
+export type ThemeToggleSize = VariantKey<typeof themetoggleVariants, "size">;
+
+/**
+ * ThemeToggle renders a button with Lucide sun/moon icons; aria-pressed reflects dark mode.
+ */
+export type ThemeToggleProps = Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "class" | "children" | "variant" | "size" | "aria-label"
+> & {
+  variant?: ThemeToggleVariant;
+  size?: ThemeToggleSize;
+  "aria-label"?: string;
+  class?: string;
+};
+
+export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "aria-label", "class"]);
+  const cls = () => cn(themetoggleVariants({ variant: local.variant, size: local.size }), local.class);
+  return (
+    <button
+      type="button"
+      class={cls() || undefined}
+      data-ui8kit="theme-toggle"
+      aria-label={defaultIfEmpty(local["aria-label"], "Dark mode")}
+      aria-pressed="false"
+      {...rest}
+    >
+      <svg
+        class="hidden size-5 dark:block"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2v2" />
+        <path d="M12 20v2" />
+        <path d="m4.93 4.93 1.41 1.41" />
+        <path d="m17.66 17.66 1.41 1.41" />
+        <path d="M2 12h2" />
+        <path d="M20 12h2" />
+        <path d="m6.34 17.66-1.41 1.41" />
+        <path d="m19.07 4.93-1.41 1.41" />
+      </svg>
+      <svg
+        class="block size-5 dark:hidden"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+      </svg>
+    </button>
+  );
+};
diff --git a/packages/solid/ui/src/primitives/title/title.tsx b/packages/solid/ui/src/primitives/title/title.tsx
new file mode 100644
index 0000000..a87af85
--- /dev/null
+++ b/packages/solid/ui/src/primitives/title/title.tsx
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/title.json
+/**
+ * Title renders a heading (h1–h6) from As (1–6). Defaults to h2 when As is 0
+ * or out of range.
+ */
+
+import { splitProps, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn, variants, type VariantKey } from "../../utils";
+import { titleTag } from "../../utils/expr";
+
+/** Title: the classes of each value of each prop (shadcn/cva style). */
+export const titleVariants = variants({
+  base: "text-foreground",
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      inherit: "",
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+    },
+  },
+  defaultVariants: { size: "inherit", weight: "semibold" },
+});
+
+export type TitleSize = VariantKey<typeof titleVariants, "size">;
+export type TitleWeight = VariantKey<typeof titleVariants, "weight">;
+
+/**
+ * Title renders the resolved heading element.
+ */
+export type TitleProps = Omit<
+  JSX.HTMLAttributes<HTMLElement>,
+  "class" | "children" | "size" | "weight" | "as"
+> & {
+  size?: TitleSize;
+  weight?: TitleWeight;
+  as?: 1 | 2 | 3 | 4 | 5 | 6;
+  class?: string;
+  children?: JSX.Element;
+};
+
+export const Title: Component<TitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["size", "weight", "as", "class", "children"]);
+  const cls = () => cn(titleVariants({ size: local.size, weight: local.weight }), local.class);
+  const resolvedTagValue = () => titleTag(local.as);
+  return (
+    <Dynamic component={resolvedTagValue()} class={cls() || undefined} {...(rest as object)}>
+      {local.children}
+    </Dynamic>
+  );
+};
diff --git a/packages/solid/ui/src/styles/index.css b/packages/solid/ui/src/styles/index.css
new file mode 100644
index 0000000..cb56ae7
--- /dev/null
+++ b/packages/solid/ui/src/styles/index.css
@@ -0,0 +1,7 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/generator/src/plan.ts (uiPackage) */
+/* Entry of the styles: theme tokens and the kit. @source makes Tailwind v4 scan this package for class names. */
+@import "./theme.css";
+@import "./kit.css";
+
+@source "../";
diff --git a/packages/solid/ui/src/styles/kit.css b/packages/solid/ui/src/styles/kit.css
new file mode 100644
index 0000000..f18dcc2
--- /dev/null
+++ b/packages/solid/ui/src/styles/kit.css
@@ -0,0 +1,95 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/core/assets/styles/kit.css */
+/* Kit-wide CSS: base layer, input glyph utilities, focus ring. Colors and the one corner token (--radius) come from theme.css (shadcn neutral);
+   shadows: only floating layers have one (shadow-md, shadow-lg), set in their specs; nothing here draws one. */
+@layer base {
+  html, body { margin: 0; background: var(--color-background); color: var(--color-foreground); }
+  body { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; overflow-x: hidden; }
+  button { cursor: pointer; }
+  html { -webkit-text-size-adjust: 100%; color-scheme: light; }
+}
+
+/* the box of a checkbox: its corner is the theme radius scaled to the 16-20px box (0.4 x 10px = 4px), so it never reads as a radio */
+@utility checkbox-glyph {
+  display: inline-grid; place-content: center; border-radius: calc(var(--radius) * 0.4);
+  &::before { content: ""; width: 8px; height: 6px; opacity: 0; background: currentColor;
+    clip-path: polygon(0 55%, 14% 40%, 38% 64%, 86% 0, 100% 15%, 38% 95%); }
+  &:checked { color: var(--color-primary-foreground); }
+  &:checked::before { opacity: 1; }
+}
+/* a number field without the browser spin buttons (NumberField draws its own minus and plus) */
+@utility number-bare {
+  appearance: textfield; -moz-appearance: textfield;
+  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+}
+@utility radio-glyph {
+  display: inline-grid; place-content: center;
+  &::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 9999px; background: var(--color-primary-foreground); opacity: 0; }
+  &:checked::before { opacity: 1; }
+}
+@utility switch-knob {
+  &::before { content: ""; position: absolute; top: 50%; left: var(--pad); width: var(--knob); height: var(--knob); border-radius: 9999px;
+    background: var(--color-background); translate: 0 -50%; transition: left .15s; }
+  &:checked::before { left: calc(100% - var(--pad) - var(--knob)); }
+}
+@utility progress-bar {
+  &::-webkit-progress-bar { background: transparent; }
+  &::-webkit-progress-value { background: var(--bar); border-radius: var(--radius); }
+  &::-moz-progress-bar { background: var(--bar); border-radius: var(--radius); }
+  &::-webkit-meter-bar { background: transparent; border: 0; }
+  &::-webkit-meter-optimum-value { background: var(--bar); }
+}
+
+/* Focus ring sits above utility shadows. Keyboard only. The 4px halo is gray unless the element sets a ring colour
+   (shadcn style, e.g. focus-visible:ring-destructive/20 on the destructive variants); --tw-ring-color does not inherit. */
+:where(a, button, input, select, textarea, summary, [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="option"], [role="treeitem"], [role="radio"], [role="switch"], [tabindex]):focus-visible {
+  outline: none;
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), 0 0 0 4px var(--tw-ring-color, rgb(128 128 128 / 0.15)), var(--tw-shadow, 0 0 #0000);
+}
+[data-slot="prompt-input"]:focus-within, [data-slot="smartbox"]:focus-within { box-shadow: 0 0 0 4px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-border); }
+[data-slot="prompt-input"] textarea:focus-visible, [data-slot="smartbox"] input:focus-visible { box-shadow: none; }
+[data-slot="file-tree-item"]:focus-visible, [data-slot="editor-tab"]:focus-visible, [data-slot="icon-tab"]:focus-visible, [data-slot="dropdown-item"]:focus-visible {
+  box-shadow: inset 0 0 0 2px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-muted-foreground);
+}
+:where([data-screen]) :focus:not(:focus-visible) { outline: none; }
+::selection { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
+
+/* The disclosure indicator: the Lucide chevron-down drawn in the text colour; the Summary brick turns it over when its
+   details open (group-open:rotate-180), so an accordion needs no script. */
+[data-slot="summary-indicator"] {
+  display: inline-block;
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+/* Per-element tokens (UI8KIT-2.0 §11): badge, button, card, alert, media. An unset token falls back to the value of the utility class the
+   rule matches (p-6, px-4 h-10, ...), stated explicitly: a revert-layer fallback inside var() is not supported by every
+   browser (there the property became unset: buttons and badges lost their padding and height).
+   A skin or a scope (a wrapper, the magazine specimen) sets only the ones it wants.
+   Radius:  --radius-badge|button|card|alert|media   (unset: var(--radius); the badge unset: the pill). Only elements that carry plain `rounded` follow it.
+   Shadow:  --shadow-card|alert|media                (unset: the spec's own: none). A full box-shadow layer, e.g. var(--shadow-sm) or 0 0 #0000.
+   Density: data-density-badge|button|card|alert = compact | default | comfortable, on the element or any ancestor, sets --pad-*:
+            card 16/24/32 (padding of a default card), alert inline 8/8/16 with --min-alert 24/32/40,
+            button inline 12/16/20 and height 32/40/48 (default size), badge inline 8/12/16 and height 20/24/28 (default size).
+            4px steps only inside controls (button, badge); card and alert stay on the 8px step. */
+[data-slot="button"].rounded { border-radius: var(--radius-button, var(--radius)); }
+[data-slot="card"].rounded { border-radius: var(--radius-card, var(--radius)); }
+[data-slot="alert"].rounded { border-radius: var(--radius-alert, var(--radius)); }
+[data-slot="media-frame"].rounded { border-radius: var(--radius-media, var(--radius)); }
+[data-slot="badge"].rounded-full { border-radius: var(--radius-badge, calc(infinity * 1px)); }
+[data-slot="card"] { --tw-shadow: var(--shadow-card, 0 0 #0000); }
+[data-slot="alert"] { --tw-shadow: var(--shadow-alert, 0 0 #0000); }
+[data-slot="media-frame"] { --tw-shadow: var(--shadow-media, 0 0 #0000); }
+[data-slot="card"].p-6 { padding: var(--pad-card, calc(var(--spacing) * 6)); }
+[data-slot="alert"].px-2 { padding-inline: var(--pad-alert, calc(var(--spacing) * 2)); }
+[data-slot="alert"].min-h-8 { min-height: var(--min-alert, calc(var(--spacing) * 8)); }
+[data-slot="button"].px-4.h-10 { padding-inline: var(--pad-button, calc(var(--spacing) * 4)); height: var(--h-button, calc(var(--spacing) * 10)); }
+[data-slot="badge"].px-3.h-6 { padding-inline: var(--pad-badge, calc(var(--spacing) * 3)); height: var(--h-badge, calc(var(--spacing) * 6)); }
+[data-density-card="compact"] { --pad-card: 16px; }
+[data-density-card="comfortable"] { --pad-card: 32px; }
+[data-density-alert="compact"] { --pad-alert: 8px; --min-alert: 24px; }
+[data-density-alert="comfortable"] { --pad-alert: 16px; --min-alert: 40px; }
+[data-density-button="compact"] { --pad-button: 12px; --h-button: 32px; }
+[data-density-button="comfortable"] { --pad-button: 20px; --h-button: 48px; }
+[data-density-badge="compact"] { --pad-badge: 8px; --h-badge: 20px; }
+[data-density-badge="comfortable"] { --pad-badge: 16px; --h-badge: 28px; }
diff --git a/packages/solid/ui/src/styles/theme.css b/packages/solid/ui/src/styles/theme.css
new file mode 100644
index 0000000..4b05103
--- /dev/null
+++ b/packages/solid/ui/src/styles/theme.css
@@ -0,0 +1,131 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/core/assets/styles/theme.css */
+@import "tailwindcss";
+
+/* shadcn/ui neutral theme (Tailwind v4, written as hsl() for old browsers; same colours as the oklch values published at https://ui.shadcn.com/docs/theming
+   ("Default Theme CSS", base color neutral). Dark mode: the .dark class or data-theme="dark" on an ancestor. */
+@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
+
+/* The one corner token. Plain `rounded` reads the bare --radius theme key, so every corner of the kit follows it
+   (shadcn keeps --radius in :root; here it sits in @theme so that `rounded` resolves to it; same value, 0.625rem). */
+@theme {
+  --radius: 0.625rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 4%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 4%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 4%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 43.5%);
+  --accent: hsl(0 0% 96%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0.6 88.4% 52.5%);
+  --border: hsl(0 0% 90%);
+  --input: hsl(0 0% 90%);
+  --ring: hsl(0 0% 63%);
+  --chart-1: hsl(18 100% 48%);
+  --chart-2: hsl(174.7 100% 29.5%);
+  --chart-3: hsl(196 72% 23%);
+  --chart-4: hsl(43.6 100% 50%);
+  --chart-5: hsl(36.3 100% 49.7%);
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(0 0% 4%);
+  --sidebar-primary: hsl(0 0% 9%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 96%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(0 0% 90%);
+  --sidebar-ring: hsl(0 0% 63%);
+}
+
+:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 4%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 90%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 15%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(0 0% 15%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(356.1 62.4% 52%);
+  --border: hsl(0 0% 100% / 10%);
+  --input: hsl(0 0% 100% / 15%);
+  --ring: hsl(0 0% 45%);
+  --chart-1: hsl(225.3 84.1% 49%);
+  --chart-2: hsl(160 100% 37%);
+  --chart-3: hsl(36.3 100% 49.7%);
+  --chart-4: hsl(273.3 100% 63.8%);
+  --chart-5: hsl(345 100% 56%);
+  --sidebar: hsl(0 0% 9%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(225.3 84.1% 49%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 15%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 100% / 10%);
+  --sidebar-ring: hsl(0 0% 45%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/packages/solid/ui/src/utils/a11y/dismiss.ts b/packages/solid/ui/src/utils/a11y/dismiss.ts
new file mode 100644
index 0000000..0f672de
--- /dev/null
+++ b/packages/solid/ui/src/utils/a11y/dismiss.ts
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/dismiss.ts
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+export type DismissReason = "escape" | "outside";
+const stack: object[] = [];   // topmost dismissable layer handles Escape first (menu inside off-canvas sidebar, …)
+
+/** Escape and pointer-down outside the node call onDismiss. Returns the cleanup. */
+export function dismissable(node: HTMLElement, opts: () => { onDismiss: (reason: DismissReason) => void; ignore?: () => (Element | null | undefined)[]; outside?: boolean }): () => void {
+  {
+    const layer = {};
+    stack.push(layer);
+    const { onDismiss, ignore = () => [], outside = true } = opts();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || e.defaultPrevented || stack[stack.length - 1] !== layer) return;
+      e.preventDefault(); e.stopPropagation();
+      onDismiss("escape");
+    };
+    const onDown = (e: PointerEvent) => {
+      if (!outside || stack[stack.length - 1] !== layer) return;
+      const t = e.target as Node | null;
+      if (!t || node.contains(t) || ignore().some((el) => el?.contains(t))) return;
+      onDismiss("outside");
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onDown, true);
+      const i = stack.indexOf(layer); if (i >= 0) stack.splice(i, 1);
+    };
+  }
+}
diff --git a/packages/solid/ui/src/utils/a11y/focus-trap.ts b/packages/solid/ui/src/utils/a11y/focus-trap.ts
new file mode 100644
index 0000000..33606fa
--- /dev/null
+++ b/packages/solid/ui/src/utils/a11y/focus-trap.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/focus-trap.ts
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+import { focusables } from "./focusable";
+
+/** Tab/Shift+Tab cycle inside `node`; on cleanup focus returns to the element focused before. */
+export function trapFocus(node: HTMLElement): () => void {
+  const previous = document.activeElement as HTMLElement | null;
+  if (!node.contains(previous)) queueMicrotask(() => focusables(node)[0]?.focus());
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key !== "Tab") return;
+    const items = focusables(node);
+    if (!items.length) { e.preventDefault(); return; }
+    const first = items[0], last = items[items.length - 1], cur = document.activeElement;
+    if (e.shiftKey && (cur === first || !node.contains(cur))) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && (cur === last || !node.contains(cur))) { e.preventDefault(); first.focus(); }
+  };
+  node.addEventListener("keydown", onKey);
+  return () => { node.removeEventListener("keydown", onKey); /* after the page is no longer inert */ requestAnimationFrame(() => { if (previous?.isConnected) previous.focus(); }); };
+}
diff --git a/packages/solid/ui/src/utils/a11y/focusable.ts b/packages/solid/ui/src/utils/a11y/focusable.ts
new file mode 100644
index 0000000..6b2897a
--- /dev/null
+++ b/packages/solid/ui/src/utils/a11y/focusable.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/focusable.ts
+// Small headless helpers shared by the interactive primitives (menus, dialogs, tabs, off-canvas sidebar).
+export const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+/** visible, tabbable descendants of `root` in DOM order */
+export function focusables(root: HTMLElement): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((el) => !el.closest("[inert]") && el.getClientRects().length > 0 && getComputedStyle(el).visibility !== "hidden");
+}
diff --git a/packages/solid/ui/src/utils/a11y/index.ts b/packages/solid/ui/src/utils/a11y/index.ts
new file mode 100644
index 0000000..3487525
--- /dev/null
+++ b/packages/solid/ui/src/utils/a11y/index.ts
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/index.ts
+export { FOCUSABLE, focusables } from "./focusable";
+export { moveFocus, typeahead, type RovingOptions } from "./roving";
+export { lockScroll } from "./scroll-lock";
+export { dismissable, type DismissReason } from "./dismiss";
+export { trapFocus } from "./focus-trap";
diff --git a/packages/solid/ui/src/utils/a11y/roving.ts b/packages/solid/ui/src/utils/a11y/roving.ts
new file mode 100644
index 0000000..b9f5246
--- /dev/null
+++ b/packages/solid/ui/src/utils/a11y/roving.ts
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/roving.ts
+// Arrow-key navigation over a list of focusable items (menus, listboxes, tab lists, trees).
+export type RovingOptions = { orientation?: "vertical" | "horizontal" | "both"; loop?: boolean; activate?: boolean };
+
+/** Handles ArrowUp/Down/Left/Right, Home, End. Returns true when the key was consumed. */
+export function moveFocus(e: KeyboardEvent, items: HTMLElement[], { orientation = "vertical", loop = true, activate = false }: RovingOptions = {}): boolean {
+  if (!items.length || e.altKey || e.ctrlKey || e.metaKey) return false;
+  const prev = orientation !== "horizontal" ? ["ArrowUp"] : [];
+  const next = orientation !== "horizontal" ? ["ArrowDown"] : [];
+  if (orientation !== "vertical") { prev.push("ArrowLeft"); next.push("ArrowRight"); }
+  const cur = items.indexOf(document.activeElement as HTMLElement);
+  let idx = -1;
+  if (next.includes(e.key)) idx = cur < 0 ? 0 : cur + 1;
+  else if (prev.includes(e.key)) idx = cur < 0 ? items.length - 1 : cur - 1;
+  else if (e.key === "Home") idx = 0;
+  else if (e.key === "End") idx = items.length - 1;
+  else return false;
+  if (idx >= items.length) idx = loop ? 0 : items.length - 1;
+  if (idx < 0) idx = loop ? items.length - 1 : 0;
+  e.preventDefault();
+  const el = items[idx];
+  el.focus();
+  if (activate) el.click();
+  return true;
+}
+
+/** type-ahead: focus the next item whose text starts with the typed characters (reset after 600 ms) */
+export function typeahead() {
+  let buf = "", t: ReturnType<typeof setTimeout> | undefined;
+  return (e: KeyboardEvent, items: HTMLElement[]): boolean => {
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey || e.key === " ") return false;
+    buf += e.key.toLowerCase();
+    clearTimeout(t); t = setTimeout(() => (buf = ""), 600);
+    const start = Math.max(0, items.indexOf(document.activeElement as HTMLElement) + (buf.length === 1 ? 1 : 0));
+    const ordered = [...items.slice(start), ...items.slice(0, start)];
+    const hit = ordered.find((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(buf));
+    if (hit) { hit.focus(); e.preventDefault(); return true; }
+    return false;
+  };
+}
diff --git a/packages/solid/ui/src/utils/a11y/scroll-lock.ts b/packages/solid/ui/src/utils/a11y/scroll-lock.ts
new file mode 100644
index 0000000..f0bbd14
--- /dev/null
+++ b/packages/solid/ui/src/utils/a11y/scroll-lock.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/scroll-lock.ts
+// Reference-counted page scroll lock (off-canvas sidebar, modal dialog). Compensates the scrollbar width on desktop.
+let count = 0;
+let saved = { overflow: "", paddingRight: "" };
+
+export function lockScroll(): () => void {
+  const root = document.documentElement;
+  if (count++ === 0) {
+    const sw = window.innerWidth - root.clientWidth;
+    saved = { overflow: root.style.overflow, paddingRight: root.style.paddingRight };
+    root.style.overflow = "hidden";
+    if (sw > 0) root.style.paddingRight = `${sw}px`;
+    root.setAttribute("data-scroll-locked", "");
+  }
+  let released = false;
+  return () => {
+    if (released) return; released = true;
+    if (--count === 0) {
+      root.style.overflow = saved.overflow; root.style.paddingRight = saved.paddingRight;
+      root.removeAttribute("data-scroll-locked");
+    }
+  };
+}
diff --git a/packages/solid/ui/src/utils/cn.ts b/packages/solid/ui/src/utils/cn.ts
new file mode 100644
index 0000000..0d98839
--- /dev/null
+++ b/packages/solid/ui/src/utils/cn.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/cn.ts
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge class values. Caller-supplied classes win over recipe classes. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/solid/ui/src/utils/env.ts b/packages/solid/ui/src/utils/env.ts
new file mode 100644
index 0000000..762068d
--- /dev/null
+++ b/packages/solid/ui/src/utils/env.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/env.ts
+export function isDevEnv(): boolean {
+  try {
+    const env = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
+    if (env && typeof env.DEV === "boolean") return env.DEV;
+  } catch {
+    // import.meta may be unavailable in some contexts
+  }
+  return false;
+}
diff --git a/packages/solid/ui/src/utils/expr.ts b/packages/solid/ui/src/utils/expr.ts
new file mode 100644
index 0000000..10e671e
--- /dev/null
+++ b/packages/solid/ui/src/utils/expr.ts
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/expr.ts
+/**
+ * Tiny attribute-logic helpers used by generated components. One
+ * implementation per runtime family keeps every default-resolution decision
+ * table byte-identical across React, Svelte, and Vue (mirrors `expr.go`).
+ */
+
+export const trimStr = (v: string | number | null | undefined): string =>
+  v === null || v === undefined ? "" : String(v).trim();
+
+export const isSetStr = (v: string | null | undefined): boolean => trimStr(v) !== "";
+
+export const isSetNum = (v: number | null | undefined): boolean => (v ?? 0) > 0;
+
+/**
+ * `trim(v) === "" ? fallback : trim(v)` — DefaultInputType-style defaults.
+ * Generic so enum-typed props keep their literal union through the default.
+ */
+export const defaultIfEmpty = <T extends string>(v: T | null | undefined, fallback: T): T => {
+  const t = trimStr(v) as T;
+  return t === "" ? fallback : t;
+};
+
+/** Whitelist: returns `trim(v)` when in `allowed`, otherwise `fallback`. */
+export const oneOfOr = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v) as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+export const oneOfOrLower = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v).toLowerCase() as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+/** Decision table: `mapping[trim(v)] ?? fallback`. */
+export const mapOr = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v)] ?? fallback;
+
+export const mapOrLower = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v).toLowerCase()] ?? fallback;
+
+/** Integer decision table: `mapping[v] ?? fallback`. */
+export const intMapOr = <T extends string>(
+  v: number | null | undefined,
+  mapping: Record<number, T>,
+  fallback: T
+): T => mapping[v ?? 0] ?? fallback;
+
+/** Null-safe string equality (both sides normalized to ""). */
+export const eqStr = (a: string | null | undefined, b: string | null | undefined): boolean =>
+  (a ?? "") === (b ?? "");
+
+/** ARIA state stringification: always "true"/"false", never omitted. */
+export const boolStr = (v: boolean | null | undefined): "true" | "false" =>
+  v ? "true" : "false";
+
+/** Concatenation of trimmed parts (icon `Prefix + Name`). */
+export const concatTrim = (...parts: (string | null | undefined)[]): string =>
+  parts.map(trimStr).join("");
+
+/** Omit-if-empty attribute value: `""` → `undefined` so the attr is dropped. */
+export const orUndef = (v: string | null | undefined): string | undefined => {
+  const t = trimStr(v);
+  return t === "" ? undefined : String(v);
+};
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** h1–h6 from a heading level; 0/undefined/out-of-range default to h2. */
+export const titleTag = (order: HeadingLevel | number | null | undefined): string => {
+  switch (order) {
+    case 1:
+      return "h1";
+    case 3:
+      return "h3";
+    case 4:
+      return "h4";
+    case 5:
+      return "h5";
+    case 6:
+      return "h6";
+    default:
+      return "h2";
+  }
+};
diff --git a/packages/solid/ui/src/utils/format.ts b/packages/solid/ui/src/utils/format.ts
new file mode 100644
index 0000000..05a0355
--- /dev/null
+++ b/packages/solid/ui/src/utils/format.ts
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/format.ts
+// Text and number formatting shared by every generated organism and screen. Pure functions, no runtime dependency.
+
+/** fills {0}, {1}... of a content template */
+export function tpl(template: string | undefined, ...values: Array<string | number | undefined>): string {
+  return (template ?? "").replace(/\{(\d+)\}/g, (_m, i: string) => String(values[Number(i)] ?? ""));
+}
+
+const nf = new Intl.NumberFormat("en-US");
+export function fmtNumber(n: number): string {
+  return nf.format(n);
+}
+
+/** digits of the minor unit (ISO 4217): cents for most currencies, none for JPY and KRW */
+export function minorDigits(currency: string): number {
+  return currency === "JPY" || currency === "KRW" ? 0 : 2;
+}
+
+const moneyCache = new Map<string, Intl.NumberFormat>();
+/** money in integer minor units (Codex v0.4: 1250 = 12.50 USD) -> "$12.50"; whole amounts drop the fraction: 1499_00 -> "$1,499" */
+export function fmtMoney(minor: number, currency: string): string {
+  const d = minorDigits(currency);
+  const cents = Math.round(minor);
+  const frac = d > 0 && cents % 10 ** d !== 0 ? d : 0;
+  const key = `${currency}:${frac}`;
+  let f = moneyCache.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: frac, maximumFractionDigits: frac });
+    moneyCache.set(key, f);
+  }
+  return f.format(cents / 10 ** d);
+}
+
+/** a content word by key (the status of a record -> its label); the key itself when the dictionary has no entry */
+export function at(dict: Record<string, string> | undefined, key: string): string {
+  return dict?.[key] ?? key;
+}
+
+/** the page numbers a pager shows: the first, the last and the neighbours of the current page; null is a gap */
+export function pageWindow(page: number, pages: number): (number | null)[] {
+  const keep = new Set([1, pages, page - 1, page, page + 1].filter((n) => n >= 1 && n <= pages));
+  const out: (number | null)[] = [];
+  let prev = 0;
+  for (const n of [...keep].sort((a, b) => a - b)) {
+    if (n - prev > 1) out.push(null);
+    out.push(n);
+    prev = n;
+  }
+  return out;
+}
+
+/** a responsive column variant of Grid capped by the number of items, so no column stays empty: ("1-4", 3) -> "1-3", ("2-6", 4) -> "2-4" */
+export function fitCols(cols: string, n: number): string {
+  const m = /^(\d+)-(\d+)$/.exec(cols);
+  if (!m) return cols;
+  const lo = Number(m[1]), hi = Number(m[2]);
+  if (n >= hi) return cols;
+  const top = Math.max(lo, n);
+  const known = ["1-2", "1-3", "1-4", "2-3", "2-4", "2-6", "3-6"];
+  for (let h = top; h > lo; h--) if (known.includes(`${lo}-${h}`)) return `${lo}-${h}`;
+  return String(Math.min(lo, Math.max(n, 1)));
+}
+
+/** a label of segments joined by ", " without a segment equal (case-insensitive) to the one before it:
+ *  "Footer, Footer, Centered" -> "Footer, Centered" */
+export function uniqLabel(label: string | undefined): string {
+  const parts = (label ?? "").split(", ");
+  return parts.filter((s, i) => i === 0 || s.toLowerCase() !== (parts[i - 1] ?? "").toLowerCase()).join(", ");
+}
diff --git a/packages/solid/ui/src/utils/index.ts b/packages/solid/ui/src/utils/index.ts
new file mode 100644
index 0000000..725a2fa
--- /dev/null
+++ b/packages/solid/ui/src/utils/index.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/index.ts
+export { cn } from "./cn";
+export { isDevEnv } from "./env";
+export { variants, type VariantFn, type VariantKey, type VariantSelection, type VariantTable } from "./variants";
+export { TagGroup, isAllowedTag, resolveTag } from "./tags";
+export * from "./expr";
+export { tpl, fmtNumber, fmtMoney, minorDigits, at, pageWindow, fitCols, uniqLabel } from "./format";
+export * from "./a11y";
diff --git a/packages/solid/ui/src/utils/tags.ts b/packages/solid/ui/src/utils/tags.ts
new file mode 100644
index 0000000..115a7d0
--- /dev/null
+++ b/packages/solid/ui/src/utils/tags.ts
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/tags.ts
+// Code generated by tagsgen. DO NOT EDIT.
+
+import { isDevEnv } from "./env";
+
+export const TagGroup = {
+  Layout: "Layout",
+  BoxAllowed: "BoxAllowed",
+  BlockText: "BlockText",
+  Inline: "Inline",
+  Heading: "Heading",
+  List: "List",
+  ListItem: "ListItem",
+  Form: "Form",
+  FormControl: "FormControl",
+  FormLabel: "FormLabel",
+  Table: "Table",
+  TableSection: "TableSection",
+  TableRow: "TableRow",
+  TableCell: "TableCell",
+  TableColumn: "TableColumn",
+  Media: "Media",
+  Disclosure: "Disclosure",
+  Container: "Container",
+  Stack: "Stack",
+  Group: "Group",
+  Text: "Text",
+} as const;
+
+export type TagGroup = (typeof TagGroup)[keyof typeof TagGroup];
+
+const layoutTags = new Set(["div", "section", "article", "aside", "header", "footer", "main", "nav", "figure", "search", "hgroup"]);
+const boxAllowedTags = new Set(["div"]);
+const blockTextTags = new Set(["p", "blockquote", "figcaption", "address", "pre"]);
+const inlineTags = new Set(["span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"]);
+const headingTags = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+const listTags = new Set(["ul", "ol", "dl", "menu"]);
+const listItemTags = new Set(["li", "dt", "dd"]);
+const formTags = new Set(["form", "fieldset"]);
+const formControlTags = new Set(["input", "textarea", "select", "button", "option", "optgroup", "datalist", "output", "meter", "progress"]);
+const formLabelTags = new Set(["label", "legend"]);
+const tableTags = new Set(["table"]);
+const tableSectionTags = new Set(["thead", "tbody", "tfoot"]);
+const tableRowTags = new Set(["tr"]);
+const tableCellTags = new Set(["th", "td"]);
+const tableColumnTags = new Set(["colgroup", "col"]);
+const mediaTags = new Set(["img", "picture", "source"]);
+const disclosureTags = new Set(["details", "summary"]);
+const containerTags = new Set(["div", "main", "section"]);
+const stackTags = new Set(["div", "ul", "ol"]);
+const groupTags = new Set(["div", "fieldset", "dl"]);
+
+function oneOf(tag: string, options: Set<string>): boolean {
+  return options.has(tag);
+}
+
+const warnedTagFallbacks = new Set<string>();
+
+function warnTagFallback(tag: string, fallback: string, group: TagGroup): void {
+  if (!isDevEnv()) return;
+  const key = `${group}:${tag}:${fallback}`;
+  if (warnedTagFallbacks.has(key)) return;
+  warnedTagFallbacks.add(key);
+  console.warn(`[resolveTag] disallowed tag "${tag}" for group "${group}", fallback "${fallback}" used.`);
+}
+
+export function isAllowedTag(tag: string, group: TagGroup): boolean {
+  const t = tag.trim().toLowerCase();
+  switch (group) {
+    case TagGroup.Layout:
+      return oneOf(t, layoutTags);
+    case TagGroup.BoxAllowed:
+      return oneOf(t, boxAllowedTags);
+    case TagGroup.BlockText:
+      return oneOf(t, blockTextTags);
+    case TagGroup.Inline:
+      return oneOf(t, inlineTags);
+    case TagGroup.Heading:
+      return oneOf(t, headingTags);
+    case TagGroup.List:
+      return oneOf(t, listTags);
+    case TagGroup.ListItem:
+      return oneOf(t, listItemTags);
+    case TagGroup.Form:
+      return oneOf(t, formTags);
+    case TagGroup.FormControl:
+      return oneOf(t, formControlTags);
+    case TagGroup.FormLabel:
+      return oneOf(t, formLabelTags);
+    case TagGroup.Table:
+      return oneOf(t, tableTags);
+    case TagGroup.TableSection:
+      return oneOf(t, tableSectionTags);
+    case TagGroup.TableRow:
+      return oneOf(t, tableRowTags);
+    case TagGroup.TableCell:
+      return oneOf(t, tableCellTags);
+    case TagGroup.TableColumn:
+      return oneOf(t, tableColumnTags);
+    case TagGroup.Media:
+      return oneOf(t, mediaTags);
+    case TagGroup.Disclosure:
+      return oneOf(t, disclosureTags);
+    case TagGroup.Container:
+      return oneOf(t, containerTags);
+    case TagGroup.Stack:
+      return oneOf(t, stackTags);
+    case TagGroup.Group:
+      return oneOf(t, groupTags);
+    case TagGroup.Text:
+      return blockTextTags.has(t) || inlineTags.has(t);
+    default:
+      return false;
+  }
+}
+
+export function resolveTag(tag: string | undefined, fallback: string, group: TagGroup): string {
+  const t = tag?.trim().toLowerCase() ?? "";
+  if (!t) return fallback;
+  if (isAllowedTag(t, group)) return t;
+  warnTagFallback(t, fallback, group);
+  return fallback;
+}
diff --git a/packages/solid/ui/src/utils/variants.ts b/packages/solid/ui/src/utils/variants.ts
new file mode 100644
index 0000000..1c00c17
--- /dev/null
+++ b/packages/solid/ui/src/utils/variants.ts
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/variants.ts
+import { cn } from "./cn";
+import { isDevEnv } from "./env";
+
+/**
+ * A shadcn/cva-style variant table, without the dependency (same idea as `cva` from class-variance-authority).
+ *
+ *   const badgeVariants = variants({
+ *     base: "inline-flex items-center",
+ *     variants: { size: { sm: "h-5 px-2", lg: "h-8 px-3" } },
+ *     defaultVariants: { size: "sm" },
+ *     compoundVariants: [{ size: "lg", shape: "rounded", class: "rounded-lg" }],
+ *   });
+ *   badgeVariants({ size: "lg" }); // "inline-flex items-center h-8 px-3"
+ *
+ * Classes come in this order: base, each variant in table order, then the matching compound variants.
+ * tailwind-merge (`cn`) resolves conflicts, the later class wins. A compound value may list alternatives: "32|lg".
+ */
+export type VariantTable = {
+  base?: string;
+  variants: Record<string, Record<string, string>>;
+  defaultVariants: Record<string, string>;
+  compoundVariants?: Array<{ class: string } & Record<string, string>>;
+};
+
+/** the props a table accepts: one optional value per variant */
+export type VariantSelection<T extends VariantTable> = {
+  [K in keyof T["variants"]]?: (keyof T["variants"][K] & string) | undefined;
+};
+
+/** a variant function: call it with the selected values, read `.table` for the types */
+export type VariantFn<T extends VariantTable> = ((selection?: VariantSelection<T>) => string) & { table: T };
+
+/** the values of one variant of a table: `VariantKey<typeof badgeVariants, "size">` is `"sm" | "lg"` */
+export type VariantKey<F extends { table: VariantTable }, K extends keyof F["table"]["variants"]> = Exclude<
+  keyof F["table"]["variants"][K] & string,
+  ""
+>;
+
+export function variants<T extends VariantTable>(table: T): VariantFn<T> {
+  const pick = (selection: Record<string, string | undefined>, key: string): string =>
+    (selection[key] ?? "").trim() || (table.defaultVariants[key] ?? "").trim();
+  const fn = (selection: VariantSelection<T> = {}): string => {
+    const sel = selection as Record<string, string | undefined>;
+    const parts: string[] = [table.base ?? ""];
+    for (const [key, choices] of Object.entries(table.variants)) {
+      const choice = pick(sel, key);
+      const cls = choices[choice];
+      // a typo in development is an error; in production the unknown value is dropped
+      if (cls === undefined && isDevEnv()) throw new Error(`[variants] unknown value "${choice}" for "${key}"`);
+      parts.push(cls ?? "");
+    }
+    for (const compound of table.compoundVariants ?? []) {
+      const matches = Object.entries(compound).every(([k, want]) => k === "class" || want.split("|").includes(pick(sel, k)));
+      if (matches) parts.push(compound.class);
+    }
+    return cn(...parts.map((p) => p.trim()).filter(Boolean));
+  };
+  return Object.assign(fn, { table });
+}
diff --git a/packages/solid/ui/tsconfig.json b/packages/solid/ui/tsconfig.json
new file mode 100644
index 0000000..d35aaf0
--- /dev/null
+++ b/packages/solid/ui/tsconfig.json
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/plan.ts (uiPackage)
+{
+  "compilerOptions": {
+    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "preserve", "jsxImportSource": "solid-js",
+    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/svelte/ui/.xgen-manifest.json b/packages/svelte/ui/.xgen-manifest.json
new file mode 100644
index 0000000..115852c
--- /dev/null
+++ b/packages/svelte/ui/.xgen-manifest.json
@@ -0,0 +1,406 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "packages/svelte/ui",
+  "files": {
+    "package.json": "e52d07fd7ad2cc78f7626c664c7275930ec76ed4a11c5e82445acc7276920359",
+    "README.md": "c34f261bdf3b6a4a50b4f862d07d017c14ca0864f11b9acba32348e8f7d3104f",
+    "src/blocks/about-company.svelte": "588fc0a40684b6f29109d11fbbeb51ac990ce112788271c0115a4a74de4b4054",
+    "src/blocks/about-me.svelte": "6b18d81e19d37fdd4a3b313434a186e6815999326d67047669d55a2167315ddd",
+    "src/blocks/about-me.types.ts": "043615269f4a7e5beca54e53db472db980a007cce859659d7a868d8c0bba40ef",
+    "src/blocks/activity-feed.svelte": "0acc2b722e21d37ed940d0f71d1aa51810f0cb9854b14c393b3f5e49955f59ec",
+    "src/blocks/activity-feed.types.ts": "5f56124080084a1ff49293c65c40780d7f79a44f435b64afd0abcfa50b411026",
+    "src/blocks/announcement-bar.svelte": "c296cccf8d66b74e0a9dcde9f5bd6670b830616902680f27e2327a89ce63b943",
+    "src/blocks/app-shell.svelte": "48e5a5d8b333032a169d7a9960839a45b7846731d9d343199bd759cf6f86edd2",
+    "src/blocks/app-shell.types.ts": "57d12077a5f31a4d3291fca1d52771735d53fd95cd0f3c19ca244a35ba8bd3bb",
+    "src/blocks/article-body.svelte": "2c36e724bd96f654767a361cabc440da38f1b57a8268c7301897e774c46eb95f",
+    "src/blocks/article-body.types.ts": "082f005df03ec6d0774dfe0813bf984bc6fcadc924611c417b6dcef6e46c8c29",
+    "src/blocks/auth-card.svelte": "08ac7cab7938c740eba257d1349278d194d20f8873056f7503652db487c874a0",
+    "src/blocks/auth-card.types.ts": "8da7cf95a4994c41826f8958a760f4de110f0ae1592573fc3847f43e5a8051ac",
+    "src/blocks/auth-layout.svelte": "8a855a5687f8d3792e95a2e37f59ecd39c1a7d913946c6436cf115ab1c435c8a",
+    "src/blocks/auth-layout.types.ts": "decc4806964fc2e585e1cc914bf334bb0e809a7d2a6c1a93065052fdce47c811",
+    "src/blocks/before-after.svelte": "5cb12617a6372cdd66ce0d573a7ae6909f9b8224b10f7418faf6a8df0a96f6a7",
+    "src/blocks/before-after.types.ts": "ed999d646c9c383b1a327e47cf63fa3eb78acb381271b917122b4139fdc57841",
+    "src/blocks/bento-grid.svelte": "7ad146e8e8361318cec81cbf054cf9204aa72178143aa8812168109b69da1900",
+    "src/blocks/bento-grid.types.ts": "6f6a81ac27f1735f3c2d59358bc808c65b04adde3b932860be3b56f70624f5d9",
+    "src/blocks/bottom-nav.svelte": "35b84db65f59dbf24ef68caaed0aa981b106bd32141618cbd8a674fe48029d06",
+    "src/blocks/cart-drawer.svelte": "48d8c03f7a28430feae245ad343a4fd07a8e240418633b1070119708203c4d69",
+    "src/blocks/cart-drawer.types.ts": "2b0a648c59d430f994286e02fa55f2ad5a7fb0eb7e26ef7a4a72c88849968826",
+    "src/blocks/cart-list.svelte": "a8f6cd381b22dc63f6c2e91a6039191a7293db07a020bfbd5ac4557d6099faae",
+    "src/blocks/cart-list.types.ts": "67dac0812500df9da16211d8d2527c3a8a0838910d1ef7d1db2f8bdd72349bb2",
+    "src/blocks/category-nav.svelte": "17db55f1de75a04bc1fa76d6443c0c9aa443d7ba430374fb7486cbb38b4dcf59",
+    "src/blocks/category-nav.types.ts": "88c758911dc968d2e05c42c2db256e8d44b6898f581b9d8b3ac5f3142e1b944a",
+    "src/blocks/chart-panel.svelte": "e6a4e128d0e77a27f3d17ee3d639f9aa13e4d4b047854b188b3b4eec1bd362e5",
+    "src/blocks/chart-panel.types.ts": "3815109d2ab650e70c4faa038f64c3b31e4b6816266a97db707640acc1ab11dc",
+    "src/blocks/checklist.svelte": "6c150b49d962e63c31268b23a5f0593a8e0cd7b298703d8be4212ff84cdd37c5",
+    "src/blocks/checklist.types.ts": "cde2540d07d103bac3160f58689186f37775d8594c410b8a75838a4f34c08a72",
+    "src/blocks/checkout-form.svelte": "029f63f17271a4ac9f7ae5eca064de4d3b2ad3eb54da738540e0e59bb058cc8f",
+    "src/blocks/checkout-form.types.ts": "b72088e90cdf5a6c42de163de2d4b8f2499d490ebac738d89694752b02f97aba",
+    "src/blocks/comparison-table.svelte": "f6cc4944fa76776b4d815b40915aa845fb1da7394addcb0ad33ea3339a8b61fd",
+    "src/blocks/comparison-table.types.ts": "edbee7a4289e384f16af68a9e0b700caf6d993408343338bbfd566791edc1b91",
+    "src/blocks/contact-form.svelte": "ca96aecdc0e889c2a1ee2507fac24282fc3d38bc15d97eb1e009b8eea8da0036",
+    "src/blocks/contact-form.types.ts": "63b05d16b74cb8a30a43887f0f2fadcb3346230c81d0e81fd5a8f39446435e3e",
+    "src/blocks/cookie-banner.svelte": "a038afbe3071a09bd48fec93d9602f98893ad005929024f53f3b8bbd9ced3024",
+    "src/blocks/credit-packs.svelte": "1d1d78ade4fceea5be71c1b66833e567c599133661e6244246e645ee1ff1ca41",
+    "src/blocks/credit-packs.types.ts": "be28fa1beccf2fba0789f5f572aee73c115cc24ae4cfa0736c8ae41e7cd1024e",
+    "src/blocks/cta-band.svelte": "32b744448117fdebfd53441d8705da0ecac3b4c587ea2f6233935547b5441b3b",
+    "src/blocks/cta-band.types.ts": "6140ffcebd34b3d98d06bad1122416626b8f5801f09540185e5b591cb8ff6f1f",
+    "src/blocks/cta-banner.svelte": "9214caa20e402d6e8e401c4e428be467d4abc095a2e23170ff18ac084fdd302a",
+    "src/blocks/cta-proof.svelte": "964fb1588e83f60798aa23f3661f40914be96a287205b304eac6764f867cf4fb",
+    "src/blocks/cta-proof.types.ts": "1673af2abdc4ea6382a876efb270e6984f2fd7140a67130bd108291369f1a10d",
+    "src/blocks/dashboard-overview.svelte": "2fec4da29f234b25b54d5663cff64f3fe7501d57d5c054a6f54533b7d0c224bc",
+    "src/blocks/dashboard-overview.types.ts": "05bd17982aa5d7b5cb940ff22700a0ef1c154f8a68ac1060a24ec2e67925a4b7",
+    "src/blocks/dashboard-shell.svelte": "245033a5cc11761a33493ca693fd5524d82b017ec3c581bbf57e716d8b971607",
+    "src/blocks/dashboard-shell.types.ts": "37c3bba34d5681030b0ca37cb2cfdf65097a7bdbfae51c30931c33f816633895",
+    "src/blocks/delivery-info.svelte": "4bf3f0379d2a4ee4377c0d1fc67af47661e974faa8add788f57531b0fa5a97d2",
+    "src/blocks/delivery-info.types.ts": "d68c3ac24bacfc04622e3dc8d49b8c40a913a66a0d5d7d456efbd370bebc396c",
+    "src/blocks/empty-panel.svelte": "f2e3a3435e66cdc589c013ea9dab1a417c4f09cf28efbf6f19cfaa454d593897",
+    "src/blocks/error-page.svelte": "783ccc12e6c01f4d53a7cd3909b9754a97a51b91671387243ab4e3e4395a0124",
+    "src/blocks/error-page.types.ts": "dd8411dca18b74cd060609106f107ea8069af204aa926190bcffc9fb027f6d0c",
+    "src/blocks/faq-list.svelte": "5f99f6a033fdedc9e6644a763a6c401c9c9f0f02cf437edfd66004e2df2c9b9a",
+    "src/blocks/faq-list.types.ts": "eb74ae6e1c1e51c2b4721d348b87cd9d7b46716cd2ed549bf11aa43f25366c6d",
+    "src/blocks/faq-split.svelte": "ba666e8c9100b2e59fa867b0b7229deb84e502ba07d4812b480c6ba79464f056",
+    "src/blocks/faq-split.types.ts": "fbe3f37c43647961ea2055834f0128fa228d9f7b1ad3e3963d628f383835edbf",
+    "src/blocks/feature-accordion.svelte": "de756ccd0318d7f95d77e59ec657a0d4b4bcecbc5686f8cd32916d4e29920cbb",
+    "src/blocks/feature-grid.svelte": "0556c55d222ea2e5f46af18ddbde742b63e3dc188617002dc188459168992787",
+    "src/blocks/feature-grid.types.ts": "50ab48aa51787e269ffc1f096e082c5b0fbe4abfc31902497dd33fce5d93fb27",
+    "src/blocks/feature-showcase.svelte": "1c5f9eb0fda08ad8d8c1595ce3bb6c49b1aadaa2c9ff81240b8a63d901228567",
+    "src/blocks/feature-split.svelte": "575be0c11f5c5d338c65fc4b679c0cf558bfe1ce5bab6c0cdcfaf0d2a1e89694",
+    "src/blocks/feature-sticky.svelte": "f49dc821394637c75cf45b281d6309c6577e92e23f0925ef0bed49fbebfe97c0",
+    "src/blocks/feature-tabs.svelte": "6ec9ddb88b7951f646f6b46d487bbe01947ac9cc9295581123ad576fc9bd78be",
+    "src/blocks/footer-split.svelte": "e1cf66d91781ed5100b87428907b6ddbc4d182bd5be5597f70f5bb665e191435",
+    "src/blocks/footer-split.types.ts": "bde2bb954a3eb6ad5383df4bedca2da1ac7c99724000c4c2d081c6cd864fc920",
+    "src/blocks/hero-classic.svelte": "363cfa5303b13f5d6abba431cd0755b4ab99b243adfe05c78fa3affafa23a4f9",
+    "src/blocks/hero-classic.types.ts": "4724563cef568d2f316f37c3d9386f6fd54ba27d49b6d0f5ec228750bfd44ac3",
+    "src/blocks/hero-prompt.svelte": "bc2c651b41da751d1265c1c63af60db48166011908e022279ff61c9f820527da",
+    "src/blocks/hero-prompt.types.ts": "455da691d4fcc6dd8df6bced640f72b88a3fdc598efdd59ffb9c8b4fbc0142fe",
+    "src/blocks/hero-split.svelte": "e4d63319ec3cdc9f5671bdd0cd8117ec3b11979d425954a561e558a1db4161a5",
+    "src/blocks/hero-split.types.ts": "d5459ec93bd4a4096825a7c28e8cf4fdd8b3d151e67c60f738234951312e1456",
+    "src/blocks/icon-wall.svelte": "c14fc535948ce5445966e2686df27c78ebff3951db1ca46823c89537bec0a76b",
+    "src/blocks/job-board.svelte": "6a49418d1f737dfe068dd75be0998fff34272122d60cd49f75cc7a735d974e2c",
+    "src/blocks/job-board.types.ts": "88ff24e5faf35fddc5a5edd2ca7f5c100fd27f45d6d003e4728c0ba34d268356",
+    "src/blocks/kanban-board.svelte": "9bf612d81abdfab1f3de37ff84281c9b5aa319c777dd6c22d0142a07e2fd9fbf",
+    "src/blocks/kanban-board.types.ts": "b3fcee6b6bf2b2dfca143b5b2f84f76ed0280b24181f20607cc8515d89d286e4",
+    "src/blocks/logo-cloud.svelte": "8620a3d5eb3dc546f1a66ae4b915a4bef4070b84665e4efb532afce4fe61800b",
+    "src/blocks/logo-cloud.types.ts": "64e9e8cdc13d3b1dbf78894339377f8c654a704a16a6d09c6913b941321bf834",
+    "src/blocks/logo-ribbon.svelte": "02900e7248c7da2f5269724914edf45803e909ddaa5e5a6f790fbaf842456876",
+    "src/blocks/media-list.svelte": "d75339d038acc552e650981f1153130590099059623a9e7cc94d4a8601e1472e",
+    "src/blocks/media-list.types.ts": "30fdd46e926fecc640cd71aa55ca9a34155ecf77c67dc7a6aaf2cc6d4660a2c2",
+    "src/blocks/mega-menu.svelte": "936cee0f470f95542f50cbeaf05a6ef2b4d518211bafa1ad5417a073ccf5d4f3",
+    "src/blocks/mega-menu.types.ts": "056c81e1507dd1f5d81367831240d65ab35145bbed4c27783942ea38ae2b4930",
+    "src/blocks/metric-row.svelte": "b9da0ffc48a9d69be821a5fbe2710c9a77532d99d0ea7720b7d453c806d00294",
+    "src/blocks/metric-row.types.ts": "c8a47f76f9f1b94b436b68895e586a30f34201967c91159ef4e145169c291453",
+    "src/blocks/milestone-timeline.svelte": "3bb87443ea3f4e30e0d99d4c310f180757917b131b8c9f9b93e0821716ef9dfb",
+    "src/blocks/milestone-timeline.types.ts": "e7da0209b4575401be48da09eefcbd48108936ddbc7e9ec4a939668b5387cc5e",
+    "src/blocks/nav-bar.svelte": "371786c1c5c5579de69d14c6fa64d01c46250eec84ecf4d489e2fc21e3b6fa8c",
+    "src/blocks/nav-bar.types.ts": "c54bfbd53c3506a21507761b00fb5ba26e5a27339a8809c2a8a72277685392db",
+    "src/blocks/newsletter-form.svelte": "7f3e74dcc5977bebf59e07517d9e34825eff0fb15e06a72218a06394bf192280",
+    "src/blocks/order-summary.svelte": "e95af4a1fe6781b55c6959c8e69cbddda70633c6c36e093d4b0b32336a27ffb2",
+    "src/blocks/order-summary.types.ts": "74280d6614841969b7bf18cf17b4f2795a35204a2c46f9da5c9a6789fa3694f9",
+    "src/blocks/order-table.svelte": "e38398ffa6a3c179007efc4217bfe787658abc9d780bac0a262b2d73c42ab428",
+    "src/blocks/order-table.types.ts": "efcdf8babc0e087fc5d1061a8e9a2cfb4d5eee5aa3105f1ad8050c49cd344a8a",
+    "src/blocks/page-intro.svelte": "2c03925ece1d5970ad52c7a63d341a41fe13c45576f79f5f82aa75a27534fef1",
+    "src/blocks/page-trail.svelte": "427022d8f2b19413ae0d25dfc9466093203fd3830ce40ed535ca470471ba81fa",
+    "src/blocks/page-trail.types.ts": "4e2a680642da4de46d56aa5ce55df4a8540d4338f24f400705239389051bd668",
+    "src/blocks/photo-gallery.svelte": "fcf0ed700c23706c2c63e6fa6b80b6cc9b5c68f3444a7b3265ddd216aa915d1c",
+    "src/blocks/photo-gallery.types.ts": "06a2f0c9e2a4d77d0c3c6a4bc7c3c797dcbe9cbe8e0017fdcac1a8f74aa35691",
+    "src/blocks/post-card.svelte": "65c5f6985b632f85bd53e3eb1afeb395a847a4dfe2b9c94f980ea655f845660d",
+    "src/blocks/post-card.types.ts": "17585f000ffbfcb2ebb30cd4030899fc7dcd6a85f1d9a33f4c9646a9e8f369e8",
+    "src/blocks/post-grid.svelte": "76f4bf30ed762ffe799cf39931d42982c23e395666df749c5a74a4c8117da311",
+    "src/blocks/post-grid.types.ts": "7dad1d7843814dfe72ad2a4f80f16614bdc787da85b942a351b8f15aad0aeac9",
+    "src/blocks/post-header.svelte": "9a76afa82dd61082376167a2aa48d603b0e331bec34c51beb367e9a79a63367f",
+    "src/blocks/post-showcase.svelte": "cb62499baca241127c626055d8d3ebcb6554c2a7bec744e40769743517a8626e",
+    "src/blocks/post-split.svelte": "312c636c24e3f6e6aa06acae1e3870e5d4b00dd92739c603eb12f6a15516f758",
+    "src/blocks/post-split.types.ts": "1ef646f6acfd44b81113d9c95799b72886428adcdfdece02a67ded6cf0ec062e",
+    "src/blocks/pricing-card.svelte": "ec310d963b19a6e359ecc29958551f8c6829619adea9f307a87b14dfbf16ab07",
+    "src/blocks/pricing-card.types.ts": "6e0720cdd9a01ca9af210bd354adac7a32ee6ba76b36cb66f1c606562a97b724",
+    "src/blocks/pricing-tiers.svelte": "4cdf8125afa38bce28b77e9d69d5323a970c38c04ae1a1b46c3d8f1878c53726",
+    "src/blocks/pricing-tiers.types.ts": "2324239330289603a8f69517dbe4ed428aad4d2c0e977e2baa6735fc8aa67fc6",
+    "src/blocks/product-card.svelte": "98d6018a25062f50f9e8c1c0f8873d70605b3480e71421c96269a16fd5ea1280",
+    "src/blocks/product-card.types.ts": "8ed73709c2c62c3ccbaf3cee633a95cff31e435a6a375ccab83e9ecdfe9a1288",
+    "src/blocks/product-detail.svelte": "66dcb603c7e41f92b124acbc8274a2a66c8e1f05e4ad3c9533b79f5667725685",
+    "src/blocks/product-detail.types.ts": "21523dab2a3ee82e5bf0dc3a5df1b68dd1b61bd0440dbc6da8b5b5ee530fea47",
+    "src/blocks/product-grid.svelte": "ddac47b73174b1aebc57aa2288230d13d4417f3b72187f3baf8a5f72719df0da",
+    "src/blocks/product-info.svelte": "019d92be5df40fe2a4c726954ee330d3e42bcdba8cfbc72f1b5331ae7f8926ca",
+    "src/blocks/product-info.types.ts": "4da7062abf71c18b01e41b430464c5a22660b97d14106dce7ddb4b217ca9a55e",
+    "src/blocks/profile-form.svelte": "a7086ad6a503d89405e71cc1f2497cb94bf443760793b08ab8b956ed738b4812",
+    "src/blocks/profile-form.types.ts": "b7d90d69db86b26ce9fecaf7f0c9f3df70ef45a59399afbeffca26a03d72adc2",
+    "src/blocks/project-grid.svelte": "972c9e9bbe6124a74e8c2c41b0c74d2b8ea187ad664ed5935a26c668fc0309be",
+    "src/blocks/project-grid.types.ts": "6c8d59fe2a056fab97bcfb6ba3aeebc3b2c13a315e83c6e8b8dd05df25ec71d4",
+    "src/blocks/proof-band.svelte": "3656b2f3c5e809087d72460fce22be260506f3949e330149a3b64d282e68a8fc",
+    "src/blocks/quote-split.svelte": "741dd98b281c7d584b8eca8d0ce7f4b00256525fa5d1fa0b0a26c2df1bd1d2b3",
+    "src/blocks/quote-split.types.ts": "e611ebc9a576b69ae085e5d6203027dfefbbef21fa6f0e832e57247248285c17",
+    "src/blocks/review-list.svelte": "31830ba8fb464d9b6d642e4053e5fd7375fa2f813c4c246be3021805698a5724",
+    "src/blocks/review-list.types.ts": "a28ccf74c9890c239c529dfc565865ac5ea34169d62de056d9bfc7e23b444fe4",
+    "src/blocks/shopping-cart.svelte": "00c946590e4e3b4afaabfbf2db117f8a7fcf089f623108de00bb1df5c11a8395",
+    "src/blocks/shopping-cart.types.ts": "718d0b0ce29007dd7644fe2f2a9c6bba962829b308707c349712f2d9eb0457f6",
+    "src/blocks/sidebar-nav.svelte": "4b2169952dba8ee178c71498826b3ff95f744867ff6e813933a5f796bc23ab1e",
+    "src/blocks/signup-wizard.svelte": "d262c3c98817c0393b8441eeff03e03ce94c0d2af5998757d8e6ab4d97614a01",
+    "src/blocks/signup-wizard.types.ts": "71456087f84eac60a95b460ed4e2b1ccf4572f5654a9dad8162ec2163aca635a",
+    "src/blocks/site-footer.svelte": "de1444c54a4965c696b617eff5c25ae97f2c1e260577c99c27b796ae68b5298a",
+    "src/blocks/site-footer.types.ts": "3e1c4727ab0cbd891dd743e0278d5980cc2259145569cbd52a0389fcc5f36118",
+    "src/blocks/site-header.svelte": "c203ee4d2496b10786258f1dfc7c3acf15220fb1d8458d7ad847d5911a61d163",
+    "src/blocks/site-header.types.ts": "a8a9c8f7fd15951ab74c5ca467bc07f77adc3eadd0422c80ec53ef1139376dfb",
+    "src/blocks/sitemap-footer.svelte": "ea9029e3274f0e9611f2ea30f38dd0bcf7fe3fb870cadea0b0f63e3498c557ab",
+    "src/blocks/sitemap-footer.types.ts": "810cac7677786b3379073275c2823a147aba8f8a95531e4bf201ad4a1507d5be",
+    "src/blocks/skeleton-layout.svelte": "11854aabe89e2b32616f3926c2efc93bbd6ee34137eb6c0e894475eb1acfc206",
+    "src/blocks/skeleton-layout.types.ts": "5d96e19b1711d3c8e1163ddc2a5ef2ff4f980d494da87e9809e89428394bd50c",
+    "src/blocks/slot-board.svelte": "dc78b4b630a9df1ba66d0c4cc38da1d9621cd714263fbb43b7aab4afaefebb95",
+    "src/blocks/slot-board.types.ts": "3542f55416cc63bcd15544d50021bc1a9401c02fd384479c6a38e2556499be20",
+    "src/blocks/stats-band.svelte": "d2fc495e18a4c887be1630db8ae761ecc623deb41103c669c69e0e3268a23f70",
+    "src/blocks/stats-band.types.ts": "47a7a6fb525314d9e1ba9d01d2f2bf59293f3902f79c07cb3773369e93a35f22",
+    "src/blocks/stepper.svelte": "4101f3d41ce8ce0a22ee97986bb28ee0ae4d8f244241295f74ba07acfb6f4b32",
+    "src/blocks/steps-list.svelte": "538e653415b04671c48934665f998c1987650abf293c402b64e514556252f9fb",
+    "src/blocks/steps-list.types.ts": "911950b03bc28b244429c33f3628506c8270e97810c3a81f3305efeaf2221de2",
+    "src/blocks/store-hero.svelte": "7e66176ec94db4716a22cbd729cd76eeb518a16997b438f32872ecacfe81f7ab",
+    "src/blocks/store-hero.types.ts": "cd6a768d92420bcb4caf45611520829aefd27a254ac182a7c22c3e5902016bde",
+    "src/blocks/store-locations.svelte": "9e1fceebe8228747be4e888421b675d514dd41ef7a868e5d5ade6a359d26cf0a",
+    "src/blocks/store-locations.types.ts": "3fe37417236992ca8bb8197431573805d1f625437b9568aedda65421fdb5fdbc",
+    "src/blocks/story-tabs.svelte": "27a3c688cc7de909a1e66a2ea4d11527ad59eb091d904b1dff2b406bf9b2bbd1",
+    "src/blocks/story-tabs.types.ts": "4db25e3132fdf612777817e64e85821ae502041f19dc29ae0bcd8f36901d1fde",
+    "src/blocks/support-channels.svelte": "230b29c733a0b65c086af649f855e9ea07588f63bcdcc26089663dae230a4b48",
+    "src/blocks/team-grid.svelte": "17eedb7e8c3c67326c490e01088d2d42d18158e4357a1e56aec1a532c45cbecf",
+    "src/blocks/team-grid.types.ts": "fe4f0431e5c1408e1cc0a0efd2b7e23dd19f673870c03b2296b0a9cf07b0b402",
+    "src/blocks/template-grid.svelte": "d079ab3f6ae4f6e9eb0b392014d02111f50a1ddde9d6c7ecf24d919f7ede138b",
+    "src/blocks/template-grid.types.ts": "74ba85f8930eeea9a528590f89c9b865ef761d38c4f59dcbd909ef2df44bfd36",
+    "src/blocks/testimonial-grid.svelte": "d02a47c14137fa593d47d6b061fb831cac3162a8c67ccc836e4bfe65f5165c4d",
+    "src/blocks/testimonial-grid.types.ts": "1cbc644c6de4f3887c0be522a2a2aab67bdbf3bd276647739342b02adf150ec5",
+    "src/blocks/tour-callout.svelte": "df586f7be55afeb85f928a3061c93ed517bdf93a725ec9dcc4e79be70d3ec4ae",
+    "src/blocks/usage-calculator.svelte": "49e3371e9e53d24d1c93a79d4f9ce88613d0ffa2ca1a0ebcf8d908c7b012d4cb",
+    "src/blocks/usage-calculator.types.ts": "d91f83ab20faba37f20698f41c85b0dce74b79ec0781fb405694969992b17959",
+    "src/blocks/usp-strip.svelte": "56f615490d8d2709a9e56b774de5b879aa98425d5685d8f070808c06a77fe65e",
+    "src/blocks/video-grid.svelte": "72865a85d93025fd593f4afc493bc0b58f12efea0c8b219a1ae4e127ecbf1a83",
+    "src/blocks/video-modal.svelte": "dae0f5b8ea1893d481dbec487d994e8e90c8a6b5149437a3d0dd011c85f01131",
+    "src/blocks/video-modal.types.ts": "41b6aad69f119ffc067056ecfe57c599c039e10ea7c1e527a59dd7702ebfa1d8",
+    "src/blocks/zone-table.svelte": "7af0fe2013e5a5f5057127293d4f92b1ea8eaf28289d724f1c6c5b8c2ba10756",
+    "src/blocks/zone-table.types.ts": "125c440eebe964662ad3468ef8101d7a186e650a003f72ee8318890e73da0433",
+    "src/components/action-group.svelte": "13974a17973fce288e7a2529b3c90a98be504a9717b5e47e2ea50860fdae5c2d",
+    "src/components/app-main.svelte": "2ee67e36f00c4444f6563b1096e453ca6da5d455fff2cb2cec51d96497ea8a03",
+    "src/components/article-block.svelte": "d61702a145914a0dd97244225f4e1b87d6eca1cb59f8f5a45214d54040d371e9",
+    "src/components/auth-form.svelte": "a5771322276bc9cdf12f6f4ef709924d1d8b967448b41c61a5cb69fde5835b17",
+    "src/components/avatar.svelte": "25622871a34e6ce8f4f446c44357c92028ab96c7fb505d403149aabbc42ee413",
+    "src/components/backdrop.svelte": "6451ec29599f5897f54a71c0ba1e2bbbc94b2c42195d7bc7a5de1a79827b35d5",
+    "src/components/badge-square.svelte": "3935982de8ec1834514dd5f5486b856208a3d121f60d471a9c9c543de9b2f6b3",
+    "src/components/bar-chart.svelte": "8497e36324a5d77a90bfdd257a36709cdfab07839d75935688a993c594963c63",
+    "src/components/bar-chart.types.ts": "968416cb2b20a1101e3285ac5f534150482d02787c24680cbdf1d6bd31f20c84",
+    "src/components/bulk-bar.svelte": "0a4e1b72546f9c2622a84209e2ba25dc51f2addd07f0faf4910a259c69f0858a",
+    "src/components/cart-summary-card.svelte": "94debd9fc0f71d07afd603d2c58c1e9792feeceb021ff951fadc4d16c7d87ab0",
+    "src/components/cart-summary-card.types.ts": "5601fea020f5b34cdbd26b937dea1200da0a74817e5fb964789f19e2a5d3c0bf",
+    "src/components/cart-table.svelte": "e868058b9cca47c49ff24529bba8175abbb139a17f7ddfa85c6dab9f1db0c6b3",
+    "src/components/checkout-step.svelte": "727623d17a20aa2e3fe7b77709b62e0fcfbb76f3b160da900c399dc7a0e61f7b",
+    "src/components/checkout-submit.svelte": "376d06368ce6fc3ca2c1cb75fc862e2155d55390408e76645cde20e3fea4ff08",
+    "src/components/code-window.svelte": "81470637252dc81bb5a8bf704db159269c6a50ef942c38991d2670d5ad5eedec",
+    "src/components/code-window.types.ts": "7ccd99c880b4b6335243f2a94d69984a0f70dff47a8c21750714ff09675187e3",
+    "src/components/compare-mark.svelte": "39bab024a2970b83c55a60ce7e9375f656aa63de9a22ffaa9a907d146660e59d",
+    "src/components/cta-actions.svelte": "c57661d136d1df356a0d4b7c3e4b4fe72a6a7fb34683faa9d03ebbc36853564c",
+    "src/components/cta-actions.types.ts": "46940268f998167e911b3f9e625d8cfa289aa47863e1ae5f45b64fa0292c1f5a",
+    "src/components/cta-proof-items.svelte": "7995e9d1cc6027d05d2e12a780a320cb2498513f9d3d5e52c6affd23c68835db",
+    "src/components/drawer-lines.svelte": "dcafc8328ba0a88ac4125724c7f5d68a3b487d76d5d5b1a535c03e3e76d6924a",
+    "src/components/dropdown-item.svelte": "1490b97ac2aeb7fe40c5b360cf21fbf96cb48e077d0db0646cfb807cce41ccd6",
+    "src/components/editor-tab.svelte": "393bb77a71060948eb38f0338746cb0d4d74d9e85747815e8b3a40b82f790e9b",
+    "src/components/empty-state.svelte": "7e1da5de99e310d56bf4ae8b109fd571c9f76142b92416cb882b44d2842b4513",
+    "src/components/faq-cards.svelte": "4fbcea3b5bf0cbcb9c81a2dd1dbdaad20da35b6becf1af6b0dfd5448135ab12a",
+    "src/components/faq-disclosures.svelte": "9ac50e079932e830ab721608382ab4f4c85549ab27fac418edeab3f29ea3a7f4",
+    "src/components/faq-finder.svelte": "b71aff0970d5435b72afa762b25ecfc87cdf210ead82a607460fa6b02278e2be",
+    "src/components/faq-help.svelte": "2010b51e8a502263467325ff01d00aaea450e9b95059a61d9801363ced9594ce",
+    "src/components/feature-cards.svelte": "319cd060281efba9d5d0a528a6129aa6ec6b9ee2f2920cbd48b7fd409539e341",
+    "src/components/feature-metric-cards.svelte": "26874addcaa4d68fc8861d5180429fa8ade5bafe00c5d6267dd631904ed2ed9a",
+    "src/components/feature-pairs.svelte": "bf89144a5fe088615d2068e199fa284416125428dd78e9cb9331e8e09642e09b",
+    "src/components/feature-rows.svelte": "d7f5c853553a7bd6dbb2001cdb70de411ba51e16b6e5bae0b15c8c2ba651cbc8",
+    "src/components/feature-stat-rows.svelte": "7b0a3d5dd2f42dca3c714ee8ab1ec9f42c59e6c99edb21cbf22762e0c1a65f8b",
+    "src/components/field.svelte": "71f6f2a236676035ad546760eee629cbf4b6a31f97ed355600b6707a8e044406",
+    "src/components/figure-block.svelte": "4a86de9bee65bb96b8e91a03cda6825dd598052b188a3a8eb8c48b30d5c0d55b",
+    "src/components/file-tree-item.svelte": "9a283a8783f779d6b2047325898f1ef08f152dcbe9c538e5ac71fddc21f330b5",
+    "src/components/file-tree.svelte": "cce567ea313339a18e4c4926e24d1b77c6af29eb25013d5a5e48924920b4c6d0",
+    "src/components/footer-brand.svelte": "7537504ec289db3b20ae6f1dfdaaf5153d49bb1801858bf83dc194842aaa50ee",
+    "src/components/footer-card.svelte": "5d1035d206fdc7d4fd2a4a96d36154f8f189c8d9be6fe16b5e1a8f7f107e525f",
+    "src/components/footer-channels.svelte": "e9e17e89d504c8ff7522222f495be89691d539d70cc3145b86f2e57bca768e0b",
+    "src/components/footer-columns.svelte": "531b5c351c604a636663483cbc280c653520839855aab60f08ca461dc9e29951",
+    "src/components/footer-contacts.svelte": "c7db915227de79ea5ec9a1bef624ea89151348d4962e9e6b1d6e7ad42fe7043e",
+    "src/components/footer-figures.svelte": "72c8b3df46acb4441a15a17e25e0e9b467d86886af62b449ec4aac249fb403d8",
+    "src/components/footer-group-cards.svelte": "12405e809e0bf27629f8e4f7acf3e276969aa62fca1ef3d82aafedc425024a21",
+    "src/components/footer-link-columns.svelte": "c175fa734ac11c2c2fb89ed32df01b254e25cc4fc394347114eb22158b98b5f6",
+    "src/components/footer-points.svelte": "a9f2dabba986317f4d212949bce3cb69baad1ef4279a510f5cf78b36e5191cca",
+    "src/components/footer-signup-card.svelte": "af6fc4ec85e2419a1148b0e66d8ab545d42bb0f77a4b30f5223d92c294e8e561",
+    "src/components/footer-sitemap.svelte": "be754f6eefddbb03e78c7d5caeaa3d71178f62a68d6d534420cdd5907d03193c",
+    "src/components/hero-badge.svelte": "65a5fcb7b0f324b356549823457c8e787af908e78eb74438871cdbc31a003695",
+    "src/components/hero-head.svelte": "ebffa967d6bbc049316c9d55db7c40dc2c3b1da63bee0472b330037306b64871",
+    "src/components/hero-split-extras.svelte": "69cf1439c36e44aadd143e38684f56f740912caf8006dd77473f160b330dce3d",
+    "src/components/hero-split-media.svelte": "d757ad42af3bde8ec3fd6050297b9a37f8ba2c7813c4824e7229d8bf9e3388c0",
+    "src/components/icon-tab.svelte": "5108dfe93e5c309518715208cf2b5309864570572a233defc53d885aa3e4c184",
+    "src/components/icon-tabs.svelte": "ed1b680408ca8649bc1ddfa39f88b850604ce185df42e2c4f181a5a5c023fd8c",
+    "src/components/job-cards.svelte": "235534492a2f736ad3a0f6efc0ebc8e35e376e582ac19b80eb4f7abfc41c5c4d",
+    "src/components/logo-sidebar.svelte": "07e6b195e05425368b574c4c3de4729dfc26af27749468ac0a9256ef17ef4b52",
+    "src/components/logo-slot.svelte": "105b83eb66d616a0966b21afe6e3df51f145966335aead95e58eb3f6144f8dff",
+    "src/components/media-contacts.svelte": "02633ab3df7cf9addb6b3a44cacd2c8c58f78405471451997d4e8394f7c6abe8",
+    "src/components/media-figures.svelte": "85866943a97d1f682bb7ad12c96e7796b5f36a85f93a9580c1a73b843b121dec",
+    "src/components/media-frame.assets.ts": "fe55210352e1184f2ef9109e52fae0e862a04d337c4abaa521c73b966d2cf7a1",
+    "src/components/media-frame.svelte": "4a07f9639b8c3af918db637a25940bc6e3ec81a360a21bd87f793d75a74c8df5",
+    "src/components/media-posts.svelte": "91890f6b17910cbbbab3383fddb3a474aaa9ed904173b0206c136db92178248a",
+    "src/components/media-review.svelte": "f75e3064b007c19e89ffb49646809103aed75a9338c7bef41b616cd4436576ce",
+    "src/components/media-steps.svelte": "96f40ff2fb178bd1a1024f6cbd2625f9babf8b26ce1e035cfef6950ada72bf69",
+    "src/components/media-topics.svelte": "2b76c96c3ebf38ffbf2233385d1e6d99f132437f5335aac2dbfb48cf60191069",
+    "src/components/member-row.svelte": "bdfb68ba930c582a95340a04dcff959e9dfa2147ef27582ab05ceddf596214e3",
+    "src/components/menu-entry.svelte": "5f9f17b4f2916a04a056c8a4ea989fdd9ab8400064b0b10eea4d556f2a00019f",
+    "src/components/meter-row.svelte": "909d7dd080f514d5677e885dd64ab9dce2c6b26180038f2f23fd8d379afe8e72",
+    "src/components/nav-actions.svelte": "8ebff917e7d7aef95143866c532d8ba87df110aaa8974517d315ef189154e496",
+    "src/components/nav-bar-menu.svelte": "54a8290704d59057ffdb654c0f188f4758df0770b6eaa40f42ec52007ee79dcb",
+    "src/components/nav-block.svelte": "e947df7dffba811883ac32792da17d12925bfdbe58059fa4b1a6044fbd253d1c",
+    "src/components/nav-item-row.svelte": "4a95ec5c07457ffdfd515f992c020054abcd392cde2aacce8e263853232a2446",
+    "src/components/nav-item.svelte": "edab16e6cf5ae24d97b0c7698d45e2b314c459fde240f453c01552ae2c267396",
+    "src/components/nav-links.svelte": "0defc84ff25c018a829856e33ec4e3787bc66171b33788cbc594caac22a852c6",
+    "src/components/notice.svelte": "e30d6af1328246b33165f4e6bf2c8328321449fcc36e3672e42fd4daf4410903",
+    "src/components/number-field.svelte": "8ed338a70b0340c4afa4d2ad0859de7da29f130b3755942545522707443c12be",
+    "src/components/offer-media.svelte": "163b424c710d70f11f84e8dbb8dc51039956d68b90f881b6c839b6b7f9076c93",
+    "src/components/order-rows.svelte": "a7576e5f562f8501d47dac0478796279f22e864c7d845d1950a3960c0b477226",
+    "src/components/over-media.svelte": "f1a50e7b515a1521667ce4f8f8e70ecca0b28ed91c077ad3e5d5b520ff3cc1e7",
+    "src/components/page-aside.svelte": "4517b3e24450e20351522fcecb88a038a2f4a5f96812c668e647296b48cae884",
+    "src/components/page-crumbs.svelte": "eec8194c9f03f3e4e071d7eb4db1f34c23e72cb68802511893f577ff8d17bf5d",
+    "src/components/page-header.svelte": "3631101bb97b6f7106f09b62248a12a6e7c9e200db7724f90c10536b13b725e2",
+    "src/components/pager.svelte": "6df1255bcc2d60feeea7475c257d9e09ecc46f5dab96683f236f30a655f58844",
+    "src/components/panel.svelte": "e5add9a9ca45b6805160deb5b010a64c42f2adf912fa540a29b7e4510c7ae4de",
+    "src/components/payment-options.svelte": "72b0edfa4fa0445678e748290f07f8633e221806b5c12268169ae0ed43b9526b",
+    "src/components/payment-options.types.ts": "d73a1783fd536ff758a76642351532b0783a8e69e372d42e8be7200c5099d08a",
+    "src/components/pill.svelte": "4e316c2c3a9f848a51983b5f4d49eb8dd68f3ef835b871a47dbdb1ca4b0faaa8",
+    "src/components/post-actions.svelte": "430564271e5355ef5360c4f7164c6fc27211b12e7136c85ffa7361270d6194f5",
+    "src/components/post-author.svelte": "c164a6225e1577c8b62a399fcef4eeb07abb66443e64623fc920804a3158e548",
+    "src/components/post-feature.svelte": "535dd70fc7c850bdbffef12b7138cb41ab772f2d9b48c04e3690607a49b4f0bc",
+    "src/components/post-mini-card.svelte": "f9482b3b3d3e99c847b44a07c5a0626d595da9973c34d614a0cfdf9dc3450f09",
+    "src/components/post-outline.svelte": "6a833aee796e6d33b80e9a26027ec60252ca4f4dafdc455970673d5f4c5832ff",
+    "src/components/post-overlay-card.svelte": "45df069b8fc4ba621d55b477fd1d97605548c41daa9fa981e4e5dc5399bdf295",
+    "src/components/post-stats.svelte": "bf45a2f57961a1b7a4e6b36caa8be3584681a1d413b6700a22aeb21752a99a27",
+    "src/components/post-tags.svelte": "666eb749d9c1cdfea931fab38d60d5e99aedeb02ec7098c37bc02848c0866d1b",
+    "src/components/product-gallery.svelte": "a555a7675cc9ee37a21a32749c14066bdb2b3402b01523c25788668243fef131",
+    "src/components/product-price.svelte": "63498bd41f83a64eaaff9ad2bdec1cdd279f1d3471779c45d9bdaca46b8c3868",
+    "src/components/project-tiles.svelte": "8f4d32214decc4745744210b3d3b485916c2c90f22ae5c729715ee57c5d5b0f7",
+    "src/components/prompt-composer.svelte": "5d4f8cffcfdeb60c77b4639862e4e2968f18b85830624d1f015a6b188494c3e8",
+    "src/components/quote-card.svelte": "affe8037eb50cafcbbb90c45c1643d2e91af7cb58a552e56d489d153e01e0bda",
+    "src/components/quote-figures.svelte": "f76977b9844c7e5acffe800da5bdacd0f33df68ab3303e055246eb63da4fb63a",
+    "src/components/quote-logo-tiles.svelte": "c69f8cd8293e58cd5506b1275e14e496a95ffcae8ccfa2245b07f2c57f176379",
+    "src/components/quote-proof.svelte": "3522e0dbd184e50150a192321c44785362a529e0444c5133648f2ca8ffc54cc8",
+    "src/components/quote-rating-panel.svelte": "bfa55836246cb706ceb2d3feeb2cae6b822cf6d60839c5f9ba39279b9831e917",
+    "src/components/quote-slot.svelte": "6ae7e1850022a4a9b9b9f5fc1be8a441a8ff2574291c7bb808763411c0a186de",
+    "src/components/range-field.svelte": "31f3a7742ba5b9402e3db3529dd7712d730336e20f4d89f36a9796900e1d73cf",
+    "src/components/rating.svelte": "8af53e22cdeac6ada812b44c02c01627e0e685a83b4c1ec92a0431eeaf045cdf",
+    "src/components/region.svelte": "2abc72805f893cb5a5caca21b4b30e008aa44794f2ffea974fa6d5ef9d7372e4",
+    "src/components/search-field.svelte": "f50f63e8e775c369113d65fb8ad7deecce530e359f08f1697fbf1c031271c7fd",
+    "src/components/search-palette.svelte": "837ed666f93d96f954045e0af30a6a0b58d0b027464bd3e36f94b8702c5b726c",
+    "src/components/section-box.svelte": "7cd5dd6d597eb80bc55bf2e927d21b85e937e58e3cf81fa57dda534d4b46e4b5",
+    "src/components/section-column.svelte": "088a4798217f63a1c25e858f9dffe641cfe5e3e60ec59cd0dd441c3e95a5a0fd",
+    "src/components/section-frame.svelte": "f7ef18b7593a910931b785b8450d965de64c5324558c210c806137155fab5475",
+    "src/components/section-frame.types.ts": "d65a75d32577bc988045d002342eb28412a47fe880cb85c0f9fca3806354f11c",
+    "src/components/section-head.svelte": "11ccd28f7c220e7e388aeb5823ff68b07a3d73692ecb1ce33a3ae1552030f9c7",
+    "src/components/section-header.svelte": "619472d1ad6bddb9f01c0f8545871fcd863857b2730c2a0d80c3d99ad0829699",
+    "src/components/shell-content.svelte": "9e0bacbb455098ba4be108159f90408d08ce97b5a60c86019a70de5c5450ecaf",
+    "src/components/shell-footer.svelte": "fe899c85ebab703c628c783f92ef9ba5daeaf561e533bc4c2ae80979372527e7",
+    "src/components/shell-sidebar.svelte": "b6aee815e78138b6e3047b08aa69ad6cc8cce0b84524e243334cce937563e351",
+    "src/components/shell-topbar.svelte": "4c319e3720728c19671a57e5f9ee40dea3bc3e8af1b3509d510ff9c21c973cc1",
+    "src/components/sidebar-panel.svelte": "02cf491d7ee2a08b70ad2f59df31d79fed12a3e135115b876bd286899060969b",
+    "src/components/slot-grid.svelte": "611f7dcb94b82b2bd8d582747e805a87e22997cebcf062ae2a8714862a2afb67",
+    "src/components/slot-grid.types.ts": "dbfbdc87d0bb8b62513e901d0aefd48d554b0532fd683b34605b5b47e100d1a0",
+    "src/components/stat-figure.svelte": "58917d1c26385d092cfff4f99f26eee02e3f2be52369ea37bb96ea22d3ae2471",
+    "src/components/stat-tile.svelte": "4482bc884021b8cb4eb21f002d238d26d09c7c38fe598894d2a603eec19536ce",
+    "src/components/story-dots.svelte": "1efa6869db181da850a4abf32b698218450fc9d2d85e95abf765aff80845a3de",
+    "src/components/story-panel.svelte": "99bc24b6c7e4cc3bb251d98c1b0c01b00fa4d637ff3d71f8619e5e73542c7da4",
+    "src/components/switcher-item.svelte": "012079611e6b3e5d52c01b28a0a8bb62ca1d1118767cc9a660f29d06cff0937b",
+    "src/components/switcher.svelte": "93413a9b49bb06cee562a5b580c8430c01958ca433f4c202638cc15a01a44250",
+    "src/components/table-toolbar.svelte": "005aebb170ff221b74ddd5481f58583141abb2ec3fdc5d57a1c3f8b5b8dbf6a0",
+    "src/components/timeline.svelte": "b80a917ee01f9109a1da2f57aa7b8d05c4b31f99747fee86848ac5465801d00b",
+    "src/components/timeline.types.ts": "2f1b0a9d5471f486efc6a86921b52143867da2a4d36963d84c9cbf77332316b1",
+    "src/components/topic-chips.svelte": "203860c7ce17d10d60233a4727a9cac89aaa2346764ae38afcf48d5340eea5c4",
+    "src/components/topic-chips.types.ts": "04d234613b49a81b216e8913c294ba6d11aec58f17bc49580793347d39149ec3",
+    "src/components/weighted-title.svelte": "69e3a779d27548034290efdfdf3000808c0bece300fa57345d2be8a51252cdab",
+    "src/components/zone-rows.svelte": "e7a1e484cf606f181ab075c1c509a4792d51a01edf7eaefebdcb230228b8cda9",
+    "src/index.ts": "36a7dd19832ad73f3d3b73d5fdcea9c16eea1512a9ea61cd7175c97accd78b9d",
+    "src/presets/defaults.ts": "0f8d491e02d5cbad4b3e324239b780ed1b8dd6acdfe1c3fdeb87295167a94f51",
+    "src/primitives/alert/alert.svelte": "69a6d18e913b69f0175eed8ea4e14d818bbe44ff3a748cd9e8b8f56b03970a22",
+    "src/primitives/badge/badge.svelte": "4c482e28c3829287a6d5236e28fb8d4ec83070936f0670d4e1ae587e61673d68",
+    "src/primitives/block/block.svelte": "e3ceba104ed609247b961aec3d7b5c83d2954f1588ae794db2a4251c59ac9b6e",
+    "src/primitives/box/box.svelte": "efc2e940a5aae9756b03dd8a13d17d951b33f4cf0466146aa50878bc5fed54f7",
+    "src/primitives/breadcrumb/breadcrumb.svelte": "9d437d8364121f1ec64385245e0117cc5f2c772b697eeedb0cd2c911c05cfcd5",
+    "src/primitives/button-plain/button-plain.svelte": "a98a25b1b0e463a5916906c53fffb4226c7858c50e0e592c96c6cf27d7541d3e",
+    "src/primitives/button/button.svelte": "f1a3ed21b2a0feb4a3674997703e113e7d86f3491412a84051101a191dfc3917",
+    "src/primitives/card/card-content.svelte": "63bb24af4388db57df9bd300adcc9b3fd6180cfe27d7e8f8b98a7d062e53b3f6",
+    "src/primitives/card/card-description.svelte": "ccef3e6c60f837b02976edfb9cc49b93a2ab984883f74421aa360e4a24ac6cdf",
+    "src/primitives/card/card-footer.svelte": "2945395ade96b5a665db183bf09c4085c89ce49bf016b1b391a67c11502666e1",
+    "src/primitives/card/card-header.svelte": "8a6c80ec0116a7d7f3ffee48f33d92f29e93c8aad248fbc24812073a3ea90422",
+    "src/primitives/card/card-title.svelte": "3093f0508028e3497aad5299fac41b5e25e96c40f52f8f24f9b067e7435211c7",
+    "src/primitives/card/card.svelte": "ebaf0dc231fc5a87ff06802be792850bf5aa9546b5f069fd243e638dd882af4f",
+    "src/primitives/checkbox/checkbox.svelte": "0d82609394ff8beabacb0f293da9e48bcd14384e924d0886069847c1236097eb",
+    "src/primitives/container/container.svelte": "4d609a14ec23ac534a0c49db982f7478e15aafd2b9fd7578e3aff4e543a1750b",
+    "src/primitives/dialog/dialog.svelte": "bc1ca89624a563b021465fcf4736525e2fd592d76e443c4638755f5c6a509518",
+    "src/primitives/disclosure/disclosure.svelte": "7592b0f010a9a95486bfad71a14cda5cc255075a27c2e5530cd931720ea0f749",
+    "src/primitives/disclosure/summary.svelte": "663e8f73e03d9f62bc4d77b5e280e924bda2d589f4218529cef039e3f50f1b99",
+    "src/primitives/form/data-list.svelte": "a680230d75fc5d742bc1a73f89d6d988b20d0746c00f973351162a5284b2ad18",
+    "src/primitives/form/data-option.svelte": "f14a613a712b6a03c637b7e166b18486579f99fe00ec5e129d475a60caf708f0",
+    "src/primitives/form/fieldset.svelte": "9f419be7495da4b9e3944059b65fb46dafc25b9ecd5c6d9acc2198b23f561a31",
+    "src/primitives/form/form-description.svelte": "ba0983efcfe3d51c88a548e60585b10e087193ed4c64138fe3463fffc11b49cf",
+    "src/primitives/form/form-item.svelte": "39c093ae92ed0335bbca53380d16dc4d8bd299c4d12790a3df6958cf744c4f19",
+    "src/primitives/form/form-message.svelte": "240bab62462e4bdff7ca6b2f5b71f8a1efbc917e15b4d363ea96ba0c3d4469de",
+    "src/primitives/form/form.svelte": "43ceb1d0e46ee020435412a6836f0c640fccc74f25237786350d03fc864e8d4a",
+    "src/primitives/form/legend.svelte": "90ca49fdd55ef5c025f241b05db36167e1cef18d66126c66e0832d33db4221c9",
+    "src/primitives/form/meter.svelte": "42f4391ad4277356e67179a80667fe1958a80757876938630f324348fecf11ef",
+    "src/primitives/form/output.svelte": "b4d2410c59c8a9e28de8fd0fdad04c41b2d3e6ad4e5c8d5395e5222c0ed4eadb",
+    "src/primitives/form/progress.svelte": "8b752489be8c0cc2ae33c2a5876776404a694e618b49f05b42f16e8b1e027160",
+    "src/primitives/grid/grid-col.svelte": "c0acdab8d15e3288f59a13753f33a74cedaac54c0e8bba250c548a7117798a71",
+    "src/primitives/grid/grid.svelte": "c2ac791ba741540c4f662ad88db680f79b515cf2583614d06708340724ebda4d",
+    "src/primitives/group/group.svelte": "29154cb4c0a78e5ca06706b89993b8ba239b93b6182ea2267f339de6d35ebdfc",
+    "src/primitives/icon/icon.svelte": "8457e4a153e02cd44562918e42d55a18c321f33d829fbb1a3311a3c3035c03d4",
+    "src/primitives/iconbadge/icon-badge.svelte": "59ee7f4b3c301866bbf368b510f3bce00a62388ec586dc765f9d132554a2682e",
+    "src/primitives/image/image.svelte": "5fa3071aca34714586a2bdf8459e9b876f2bc9be0799dc313f0a937c3943c141",
+    "src/primitives/image/picture.svelte": "28bd5f9093af74ce23a09af0e947c732ae5500933d5f25fe04f2d27482e37488",
+    "src/primitives/image/source.svelte": "2932a5754a0eb3cfaed9a97ae5ab8efe02918353f49817a82d50a49d49ab3060",
+    "src/primitives/inline/inline.svelte": "a502e514f36b649edc5d438663ccb0a7067a8df71c4ccffde2ba8853ce954d05",
+    "src/primitives/input/input.svelte": "6be9dc6e59080f212f070e3cf4db43160f9de0bf4cf83a25c8da5c422f902222",
+    "src/primitives/label/label.svelte": "2e13054e332640c336f6cd783ae8812e17ea30bf49f0db478d8974b8898d9d08",
+    "src/primitives/linebreak/break.svelte": "bb3d7feb3489032d0326f0f5dd893981609c3a3d5ff38cc847150b9931376c22",
+    "src/primitives/link-plain/link-plain.svelte": "613b077e764df4c88e9a37a36255d9134833b7ba5d602ad3473bd4fca8bbcab5",
+    "src/primitives/link/link.svelte": "70638e1ca1d4df3d53a297c8637986ad4d00da8c97f616e80fda0a98ce4b80ab",
+    "src/primitives/list/list-item.svelte": "483f7bac520d955a5e9b539a79d359bf6bd72caea413448ade3ec98e3bcd099b",
+    "src/primitives/list/list.svelte": "a1d8635064ba1fde77f24c7dae7117cea32be6f1d2adeb5856bbd3a84ff308ea",
+    "src/primitives/lucide-icon/lucide-icon.svelte": "c204805343c20360fb9b3e210c5c42572049cb9ce93d97ebb40bdcb6094be263",
+    "src/primitives/lucide-icon/lucide-icons.ts": "a05bb5050ccb7c015088a0c5061116aaa400a15b70f3c8a9f9ca2e4bdd2ddd84",
+    "src/primitives/radio/radio.svelte": "2b9ec7195f2d590bb9051bd560af846f043f06d3c170304bd2545d1a133a9981",
+    "src/primitives/range/range.svelte": "35a88a5e13d5a608f82142084bffb6a16facf9dbd0eca61e6f7001d5620ee684",
+    "src/primitives/select/opt-group.svelte": "857680a33903a960da550df0bbf76eabbd14682b1b3ec0478cf6baef2ff55ac0",
+    "src/primitives/select/select-option.svelte": "42dc70924949495f3f44fc7f90265a9fd9c7030f98aec3848e3ac110098af8f2",
+    "src/primitives/select/select.svelte": "4f20a3025e82e872c8c637cebc128166b2d110506496826d5cc74e7c09225917",
+    "src/primitives/separator/separator.svelte": "1051072a3e7836d3fd5efa01db2c197558027a0e3ca1bec6d45ab5e82cfc1187",
+    "src/primitives/sheet/sheet-close.svelte": "544979a38c25cf1a864fedbba666683f34e6fa6981710faa81a4cfde264927eb",
+    "src/primitives/sheet/sheet-trigger.svelte": "79bb7313585686d03904181e83561dbb74b9f9c16a9fa31056e3a0be71cad4dd",
+    "src/primitives/sheet/sheet.svelte": "e2695b06a6f6ec83e3a54c7306f02cf79d8b1428fd4458cd06d60e717fbd5be2",
+    "src/primitives/skeleton/skeleton.svelte": "81f310fb1ab45c2d0ec2662050778ac6400684596f5793c4f6ef9acdadec6ca3",
+    "src/primitives/stack/stack.svelte": "7b7e2afbf9394ea7df18d39e726ba116f71f29ae907bbc94f48566ce5e2e83f2",
+    "src/primitives/switch/switch.svelte": "fe7dbea0aa661865452503e06bc04fcae4ecebd5d3273ca2a116e3630ab7c9e1",
+    "src/primitives/table/table-body.svelte": "0ea78c6381767a4ed6c1a867e33680db63029a2dffe3a364054313e4c4b3c2ab",
+    "src/primitives/table/table-caption.svelte": "89d21f95929c47643797ff16d0a19d8026f3d7ea6debc0ef091ab7f4e4c5951a",
+    "src/primitives/table/table-cell.svelte": "90e9c701b190789b04cce2ee5b24d6f45e0b5af8e6c2b52dc28c60dc39132c0a",
+    "src/primitives/table/table-col-group.svelte": "aa91ab17da703d3bd16b71ca873433ad9038fac7eb4f498ad568fe2c64b2e2f3",
+    "src/primitives/table/table-col.svelte": "6fa6ea4d71acc1c4885a166812b09f2f3a01d99976391bde2a2c1f8841aac25e",
+    "src/primitives/table/table-foot.svelte": "9d122064665fae718dd22c89e77195feeaae6ca92fa6f49a2d9e6e1d3bb07d16",
+    "src/primitives/table/table-head-cell.svelte": "9fa2c1a10a3552b42bb24b8a84537f1d60ab0f284dcf1ddbd162cb5ee7e09211",
+    "src/primitives/table/table-head.svelte": "1dd5aa4260088bd8c421eb8e0a0ca05b19024eb2217ee843fb215f24199333f8",
+    "src/primitives/table/table-row.svelte": "5b819997562bd3bd47b4512381ace7570a1dfd4e4e189a7ac3648c6ee80e7883",
+    "src/primitives/table/table.svelte": "5e70316e90d5c02274d00d19d38136d6fcc36acdfb3fed4d757511e1b2909651",
+    "src/primitives/text/text.svelte": "29f30b1ddb0c4c06bce5fa1636feb88c90165d4174ed33845e5eb915b0d48a51",
+    "src/primitives/textarea/textarea.svelte": "a362a80f0670c74899bcfb7e4ed1c969a32b82901a199e20366a525cd2791e1f",
+    "src/primitives/themetoggle/theme-toggle.svelte": "fc65cfa2b5f4679a402a9aeea5b2f9ba8a5d820741a315aad4ddfea5d765af08",
+    "src/primitives/title/title.svelte": "5e1deb5e85d135c31640afc9653d43a373aadbb43fe5031d29eb38842f4cce0f",
+    "src/styles/index.css": "faab415882b268aae6efcee8a1db1660f9c0db83fdd1fdf23b0a9fd07eb18e93",
+    "src/styles/kit.css": "61a0fcb6630cf5e9811af1d16acc75066c440998b362d5dd6e576d6033d8aa91",
+    "src/styles/theme.css": "7c7c42d778a4ecc5ad87aeddf6fefa651f7164c4a24a4c78de2583a9fdfc2897",
+    "src/utils/a11y/dismiss.ts": "4857c8d86154e03cce8666a4bee9f169b1912eb37ea617a50e0313af198eb4cd",
+    "src/utils/a11y/focus-trap.ts": "48192cd0da3f0e36da6f6270565e86474e09d86dc4939512c5f70197312495b6",
+    "src/utils/a11y/focusable.ts": "1c198ba33a0a28cd3fc60b3d0cde564724a0c8a763010cf5d5b1c5749aeea039",
+    "src/utils/a11y/index.ts": "3f75625517661a016eca02d8be226e9422df2278c61f9c22bbc97e6047e82f9c",
+    "src/utils/a11y/roving.ts": "c01c19f7ea3be4aabfcbd64b0ea7c2657f5845cbdb5ad88fb1f8079937c6b60b",
+    "src/utils/a11y/scroll-lock.ts": "857cf3ffb53ce2fec202fa74f43d8d0c8e088a06a42daa60fa9e076f5f9dd3aa",
+    "src/utils/cn.ts": "9a07c604362da93936b2e5efae3bcef078d4f3c158e8aabe65856706768dec3f",
+    "src/utils/env.ts": "9e846ba9d690cb22d4fffeb4976200727854c2657845baababf5e1864ec916b1",
+    "src/utils/expr.ts": "d69a9fae5a2ebc126e0aabcf5d5c09697cc91c4df3ed453edeb14fba2376a28e",
+    "src/utils/format.ts": "e1bafdc1408e2a68b58d1b520878ddb87f7cb626c45b5ca65869729bd7dfdb51",
+    "src/utils/index.ts": "11aa42b5489421a050b39364edba13c4490f8a660d150c97ad8b95bef39050c9",
+    "src/utils/tags.ts": "e1406704ec4c738b4c395a2603de2f4313681504b84232f0fffa1d3d48cb2a4d",
+    "src/utils/variants.ts": "f027b4237cb7058efda6bd627d9db07b1e22b59f30bf3d8590f13702e1dd6415",
+    "tsconfig.json": "7b26858b54b6c739e1be653568d98fc163fa3d9e0c70e28ce91e040183daaf20"
+  }
+}
diff --git a/packages/svelte/ui/README.md b/packages/svelte/ui/README.md
new file mode 100644
index 0000000..3c415d1
--- /dev/null
+++ b/packages/svelte/ui/README.md
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/generator/src/readme.ts -->
+# @ui8kit/svelte-ui
+
+Svelte 5 package **generated** by xgen from `xgen/specs`: 40 bricks, 72 parts, 243 organism(s).
+
+Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`; `bun run check` fails when a file differs from what the specs produce.
+
+```ts
+import { Button, Card, PricingCard } from "@ui8kit/svelte-ui";
+```
+
+Styles: `@import "@ui8kit/svelte-ui/styles/index.css";` in the app CSS (Tailwind v4).
+
+The package has no build step. Text comes only through props; the organisms take their texts as `labels`.
+
+## Layout (shadcn style: three tiers, kebab-case files, PascalCase exports)
+
+```
+src/primitives/<name>/   one primitive per folder, the variant table at the top of the file (`buttonVariants = variants({...})`)
+src/components/          small compositions of primitives (media-frame.svelte, nav-item.svelte, ...)
+src/blocks/              page sections made of components (hero-section.svelte, logo-cloud.svelte, ...)
+src/presets/<kit>.ts     the only place for kit sizes (arbitrary Tailwind values)
+src/utils/               cn, variants (a cva clone), formatters
+src/index.ts             named re-exports, grouped by tier
+```
diff --git a/packages/svelte/ui/package.json b/packages/svelte/ui/package.json
new file mode 100644
index 0000000..b31b45c
--- /dev/null
+++ b/packages/svelte/ui/package.json
@@ -0,0 +1,62 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "@ui8kit/svelte-ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Svelte 5 primitives (40 bricks, 72 parts) and organisms, generated by xgen from xgen/specs. Source only, no build step: the consumer's Vite compiles it.",
+  "sideEffects": [
+    "*.css"
+  ],
+  "ui8kit": {
+    "runtime": "svelte",
+    "generated": true,
+    "kit": [
+      "src/primitives",
+      "src/utils",
+      "src/styles"
+    ],
+    "composition": [
+      "src/blocks",
+      "src/components"
+    ],
+    "blockRoot": [
+      "src/blocks",
+      "src/components/faq-help.svelte",
+      "src/components/footer-card.svelte",
+      "src/components/hero-head.svelte",
+      "src/components/region.svelte",
+      "src/components/section-frame.svelte",
+      "src/components/shell-footer.svelte",
+      "src/components/shell-sidebar.svelte",
+      "src/components/shell-topbar.svelte",
+      "src/components/sidebar-panel.svelte"
+    ]
+  },
+  "exports": {
+    ".": {
+      "svelte": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles/*": "./src/styles/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "peerDependencies": {
+    "svelte": "^5.57.0",
+    "tailwindcss": "^4.3.3"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@tsconfig/svelte": "^5.0.8",
+    "svelte": "^5.57.0",
+    "svelte-check": "^4.7.6",
+    "typescript": "~6.0.2"
+  }
+}
diff --git a/packages/svelte/ui/src/blocks/about-company.svelte b/packages/svelte/ui/src/blocks/about-company.svelte
new file mode 100644
index 0000000..d4a007a
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/about-company.svelte
@@ -0,0 +1,100 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/people.ts -->
+<!--
+  The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout
+  (split: the pictures beside the text, stacked: the pictures under it), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Stat } from "./stats-band.types";
+  import type { Feature } from "./feature-grid.types";
+
+  export type AboutCompanyProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    stats: Stat[];
+    values: Feature[];
+    layout?: "split" | "stacked";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    stats,
+    values,
+    layout = "split",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: AboutCompanyProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  tone={tone}
+  density={density}
+  layout={(((layout as string) === "split") ? "split" : "stack")}
+  media={{ show: true, side: "start" }}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((stats?.length ?? 0) > 0)}
+    <Grid cols="2-4" class="gap-4" data-testid="stats">
+      {#each stats as s (s.id)}
+        <Stack gap="0" data-testid="stat">
+          <Text size="3xl" weight="bold">
+            {s.value}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {s.label}
+          </Text>
+        </Stack>
+      {/each}
+    </Grid>
+  {/if}
+  {#if ((values?.length ?? 0) > 0)}
+    <Box
+      class={cn("grid grid-cols-1 gap-4", (((layout as string) === "stacked") ? "md:grid-cols-3" : ""))}
+      data-testid="values"
+    >
+      {#each values as v (v.id)}
+        <Group gap="4" align="start" class="border-t border-border pt-4" data-testid="value">
+          <LucideIcon name={v.icon} size={20} />
+          <Stack gap="2">
+            <Text size="sm" weight="semibold">
+              {v.title}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {v.text}
+            </Text>
+          </Stack>
+        </Group>
+      {/each}
+    </Box>
+  {/if}
+  {#snippet aside()}
+    <Box class="grid grid-cols-3 gap-4" data-testid="strip">
+      <MediaFrame alt={title} ratio="3/4" />
+      <MediaFrame alt={title} ratio="3/4" class="mt-8" />
+      <MediaFrame alt={title} ratio="3/4" />
+    </Box>
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/about-me.svelte b/packages/svelte/ui/src/blocks/about-me.svelte
new file mode 100644
index 0000000..8dcf097
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/about-me.svelte
@@ -0,0 +1,111 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/people.ts -->
+<!--
+  A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of
+  specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills),
+  mediaSide, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Skill, AboutMeLabels } from "./about-me.types";
+  import type { Spec } from "./product-info.types";
+  import type { LinkActions } from "./error-page.types";
+
+  export type AboutMeProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    level?: 1 | 2;
+    facts: Spec[];
+    skills: Skill[];
+    labels: AboutMeLabels;
+    actions: LinkActions;
+    layout?: "facts" | "skills";
+    mediaSide?: "start" | "end";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Progress from "../primitives/form/progress.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import ActionGroup from "../components/action-group.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    level = 1,
+    facts,
+    skills,
+    labels,
+    actions,
+    layout = "facts",
+    mediaSide = "start",
+    tone = "default",
+    landmarkLabel,
+  }: AboutMeProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  heading={{ badge, level }}
+  layout="split"
+  media={{ show: true, side: mediaSide }}
+  tone={tone}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((layout as string) === "facts")}
+    {#if ((facts?.length ?? 0) > 0)}
+      <List tag="ul" class="grid grid-cols-1 gap-4 sm:grid-cols-2" data-testid="facts">
+        {#each facts as f (f.id)}
+          <ListItem class="rounded bg-card inset-ring inset-ring-border flex flex-col gap-0 p-4" data-testid="fact">
+            <Text size="xs" class="text-muted-foreground">
+              {f.label}
+            </Text>
+            <Text size="sm" weight="semibold">
+              {f.value}
+            </Text>
+          </ListItem>
+        {/each}
+      </List>
+    {/if}
+  {:else if ((skills?.length ?? 0) > 0)}
+    <Stack gap="4" align="stretch" data-testid="skills">
+      {#each skills as s (s.id)}
+        <Stack gap="2" align="stretch" data-testid="skill">
+          <Group gap="4" justify="between">
+            <Text size="sm" weight="semibold">
+              {s.label}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {tpl(labels.level, s.level)}
+            </Text>
+          </Group>
+          <Progress value={(s.level == null ? undefined : String(s.level))} max="100" aria-label={s.label} />
+        </Stack>
+      {/each}
+    </Stack>
+  {/if}
+  <ActionGroup
+    primary={actions.cta}
+    primaryHref={actions.href}
+    secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+    secondaryHref={actions.secondaryHref}
+  />
+  {#snippet aside()}
+    <MediaFrame alt={title} ratio="3/4" />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/about-me.types.ts b/packages/svelte/ui/src/blocks/about-me.types.ts
new file mode 100644
index 0000000..255f048
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/about-me.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Skill = {
+  id: string;
+  label: string;
+  level: number;
+};
+
+export type AboutMeLabels = {
+  level: string;
+};
diff --git a/packages/svelte/ui/src/blocks/activity-feed.svelte b/packages/svelte/ui/src/blocks/activity-feed.svelte
new file mode 100644
index 0000000..11f3dac
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/activity-feed.svelte
@@ -0,0 +1,90 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout
+  (timeline, list), density (default, compact), tone (default, muted).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Event } from "./activity-feed.types";
+
+  export type ActivityFeedProps = {
+    id: string;
+    title: string;
+    text: string;
+    events: Event[];
+    empty?: string;
+    layout?: "timeline" | "list";
+    density?: "default" | "compact";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import Panel from "../components/panel.svelte";
+  import Timeline from "../components/timeline.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    events,
+    empty = "",
+    layout = "timeline",
+    density = "default",
+    tone = "default",
+    landmarkLabel,
+  }: ActivityFeedProps = $props();
+</script>
+
+<Block
+  tag="section"
+  aria-labelledby={(landmarkLabel ? undefined : ((title && id) ? tpl("{0}-t", id) : undefined))}
+  data-testid="panel-section"
+  aria-label={landmarkLabel}
+>
+  <Container class="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+    <Panel title={title} description={text} id={id} class={(((tone as string) === "muted") ? "bg-muted" : "")}>
+      {#if ((events?.length ?? 0) === 0)}
+        <EmptyState icon="activity" title={empty} />
+      {:else if ((layout as string) === "timeline")}
+        <Timeline items={events} />
+      {:else}
+        <List class="m-0 flex list-none flex-col p-0" data-testid="items">
+          {#each events as e (e.id)}
+            <ListItem
+              class={cn(
+                "flex items-start justify-between gap-4 border-b border-border last:border-0",
+                (((density as string) === "compact") ? "py-2" : "py-4")
+              )}
+              data-testid="item"
+            >
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {e.title}
+                </Text>
+                {#if ((density as string) === "default")}
+                  <Text size="sm" class="text-muted-foreground">
+                    {e.text}
+                  </Text>
+                {/if}
+              </Stack>
+              <Text size="xs" class="shrink-0 text-muted-foreground">
+                {e.time}
+              </Text>
+            </ListItem>
+          {/each}
+        </List>
+      {/if}
+    </Panel>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/activity-feed.types.ts b/packages/svelte/ui/src/blocks/activity-feed.types.ts
new file mode 100644
index 0000000..8da30ee
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/activity-feed.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Event = {
+  id: string;
+  title: string;
+  text: string;
+  time: string;
+  tone: string;
+};
diff --git a/packages/svelte/ui/src/blocks/announcement-bar.svelte b/packages/svelte/ui/src/blocks/announcement-bar.svelte
new file mode 100644
index 0000000..b52a996
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/announcement-bar.svelte
@@ -0,0 +1,121 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default,
+  muted), layout (center, split), dismiss (show, hide).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type AnnouncementBarProps = {
+    label: string;
+    text: string;
+    cta?: string;
+    ctaHref?: string;
+    icon?: string;
+    dismissLabel: string;
+    tone?: "default" | "muted";
+    layout?: "center" | "split";
+    dismiss?: "show" | "hide";
+    badgeLabel?: string;
+    badge?: "none" | "show";
+    position?: "top" | "bottom";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LinkPlain from "../primitives/link-plain/link-plain.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn } from "../utils";
+
+  let {
+    label,
+    text,
+    cta,
+    ctaHref,
+    icon = "megaphone",
+    dismissLabel,
+    tone = "default",
+    layout = "center",
+    dismiss = "hide",
+    badgeLabel,
+    badge = "none",
+    position = "top",
+    landmarkLabel,
+  }: AnnouncementBarProps = $props();
+</script>
+
+<Block
+  tag="aside"
+  class={cn(
+    "w-full",
+    (((position as string) === "bottom") ? "sticky bottom-0 z-40 border-t border-border" : ""),
+    (
+      (tone as string) === "muted" ? "bg-muted text-foreground"
+      : "bg-primary text-primary-foreground"
+    )
+  )}
+  aria-label={(landmarkLabel ?? label)}
+  data-testid="announcement"
+  data-layout={layout}
+>
+  <Container
+    class={cn(
+      "mx-auto w-full max-w-6xl px-4",
+      "flex items-center gap-4 py-2",
+      (((layout as string) === "split") ? "justify-between" : "justify-center")
+    )}
+    data-slot="container"
+  >
+    <Group
+      gap="4"
+      align="center"
+      class={cn(
+        "min-w-0 flex-wrap",
+        ((((layout as string) === "center") && ((dismiss as string) === "show")) ? "ml-auto" : "")
+      )}
+    >
+      <LucideIcon name={icon} size={16} />
+      {#if ((badge as string) === "show")}
+        <Inline
+          class="rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current"
+          data-testid="announcement-badge"
+        >
+          {badgeLabel}
+        </Inline>
+      {/if}
+      <Text size="sm">
+        {text}
+      </Text>
+      {#if cta}
+        <LinkPlain
+          href={ctaHref}
+          class="inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4"
+          data-testid="announcement-cta"
+        >
+          {cta}
+          <LucideIcon name="arrow-right" size={16} />
+        </LinkPlain>
+      {/if}
+    </Group>
+    {#if ((dismiss as string) === "show")}
+      <Button
+        variant="ghost"
+        size="sm"
+        class="ml-auto shrink-0 text-current"
+        type="button"
+        aria-label={dismissLabel}
+        data-testid="dismiss"
+      >
+        <LucideIcon name="x" size={16} />
+      </Button>
+    {/if}
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/app-shell.svelte b/packages/svelte/ui/src/blocks/app-shell.svelte
new file mode 100644
index 0000000..5c0fa3d
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/app-shell.svelte
@@ -0,0 +1,135 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/workspace.ts -->
+<!--
+  The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a
+  bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar
+  is a port contract.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { AppNav, AppUser } from "./app-shell.types";
+  import type { NavLink, NavSearch } from "./nav-bar.types";
+  import type { Metric } from "./metric-row.types";
+  import type { Point } from "./chart-panel.types";
+  import type { Event } from "./activity-feed.types";
+  import type { OverviewChart, OverviewActivity } from "./dashboard-overview.types";
+
+  export type AppShellProps = {
+    id: string;
+    title: string;
+    nav: AppNav;
+    user: AppUser;
+    search: NavSearch;
+    metrics: Metric[];
+    chart: OverviewChart;
+    activity: OverviewActivity;
+    layout?: "sidebar" | "top" | "panes";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import AppMain from "../components/app-main.svelte";
+  import NavBar from "../blocks/nav-bar.svelte";
+  import Panel from "../components/panel.svelte";
+  import SidebarNav from "../blocks/sidebar-nav.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    nav,
+    user,
+    search,
+    metrics,
+    chart,
+    activity,
+    layout = "sidebar",
+    density = "default",
+    landmarkLabel,
+  }: AppShellProps = $props();
+</script>
+
+<Block
+  tag="section"
+  class="bg-background"
+  aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+  data-testid="app-shell"
+  data-layout={layout}
+  aria-label={landmarkLabel}
+>
+  {#if ((layout as string) === "top")}
+    <Stack gap="6" align="stretch">
+      <NavBar
+        label={nav.label}
+        brand={nav.brand}
+        links={nav.links}
+        current={nav.current}
+        search={search}
+        actions={{ mode: "none" }}
+        layout="search"
+        landmarkLabel={landmarkLabel}
+      />
+      <Container class={cn("mx-auto w-full max-w-6xl px-4", "pb-8")} data-slot="container">
+        <AppMain id={id} title={title} metrics={metrics} chart={chart} cols="1-4" activity={activity} density={density} />
+      </Container>
+    </Stack>
+  {:else}
+    <Container class={cn("mx-auto w-full max-w-6xl px-4", "py-8")} data-slot="container">
+      {#if ((layout as string) === "sidebar")}
+        <Grid cols="1" class="items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]">
+          <SidebarNav
+            label={nav.label}
+            brand={nav.brand}
+            links={nav.links}
+            current={nav.current}
+            userName={user.name}
+            userEmail={user.email}
+            density={density}
+            landmarkLabel={landmarkLabel}
+          />
+          <AppMain id={id} title={title} metrics={metrics} chart={chart} activity={activity} density={density} />
+        </Grid>
+      {:else}
+        <Grid cols="1-3" class="items-start gap-4">
+          <SidebarNav
+            label={nav.label}
+            brand={nav.brand}
+            links={nav.links}
+            current={nav.current}
+            userName={user.name}
+            userEmail={user.email}
+            width="compact"
+            density={density}
+            landmarkLabel={landmarkLabel}
+          />
+          {#if ((activity.events?.length ?? 0) > 0)}
+            <Panel title={activity.title} description={activity.text} id={tpl("{0}-list", id)}>
+              <List class="m-0 flex list-none flex-col gap-4 p-0" data-testid="items">
+                {#each activity.events as e (e.id)}
+                  <ListItem class="flex flex-col gap-2" data-testid="item">
+                    <Text size="sm" weight="semibold">
+                      {e.title}
+                    </Text>
+                    <Text size="xs" class="text-muted-foreground">
+                      {e.time}
+                    </Text>
+                  </ListItem>
+                {/each}
+              </List>
+            </Panel>
+          {/if}
+          <AppMain id={id} title={title} metrics={metrics} chart={chart} density="compact" />
+        </Grid>
+      {/if}
+    </Container>
+  {/if}
+</Block>
diff --git a/packages/svelte/ui/src/blocks/app-shell.types.ts b/packages/svelte/ui/src/blocks/app-shell.types.ts
new file mode 100644
index 0000000..51a8838
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/app-shell.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type AppNav = {
+  /** accessible name of the navigation */
+  label: string;
+  brand: string;
+  links: NavLink[];
+  /** id of the current link */
+  current?: string;
+};
+
+export type AppUser = {
+  name: string;
+  email: string;
+};
diff --git a/packages/svelte/ui/src/blocks/article-body.svelte b/packages/svelte/ui/src/blocks/article-body.svelte
new file mode 100644
index 0000000..3b5825b
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/article-body.svelte
@@ -0,0 +1,111 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table
+  of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting
+  the section being read is a port contract.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Section } from "./article-body.types";
+
+  export type ArticleBodyProps = {
+    id: string;
+    title: string;
+    sections: Section[];
+    empty?: string;
+    tocTitle: string;
+    layout?: "column" | "toc";
+    quotes?: "show" | "hide";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let {
+    id,
+    title,
+    sections,
+    empty = "",
+    tocTitle,
+    layout = "column",
+    quotes = "show",
+    tone = "default",
+    landmarkLabel,
+  }: ArticleBodyProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+  {#if ((sections?.length ?? 0) === 0)}
+    <EmptyState icon="file-text" title={empty} />
+  {:else}
+    <Grid
+      cols="1"
+      class={cn(
+        "items-start gap-8",
+        (((layout as string) === "toc") ? "md:grid-cols-[14rem_minmax(0,1fr)]" : "")
+      )}
+    >
+      {#if ((layout as string) === "toc")}
+        <NavBlock
+          label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", tocTitle, landmarkLabel)) : tocTitle)}
+          class="md:sticky md:top-4"
+          testid="toc"
+        >
+          <Stack gap="2">
+            <Text size="sm" weight="semibold">
+              {tocTitle}
+            </Text>
+            <List class="m-0 flex list-none flex-col gap-2 p-0">
+              {#each sections as s (s.id)}
+                <ListItem>
+                  <Link
+                    href={tpl("#{0}-{1}", id, s.id)}
+                    variant="default"
+                    class="text-sm text-muted-foreground"
+                    data-testid="toc-link"
+                  >
+                    {s.title}
+                  </Link>
+                </ListItem>
+              {/each}
+            </List>
+          </Stack>
+        </NavBlock>
+      {/if}
+      <Stack gap="8" align="stretch" class="mx-auto w-full max-w-2xl min-w-0" data-testid="article">
+        {#each sections as s (s.id)}
+          <Box class="flex flex-col gap-4" id={tpl("{0}-{1}", id, s.id)} data-testid="item">
+            <Title as={3} size="2xl" weight="bold">
+              {s.title}
+            </Title>
+            <Text size="base">
+              {s.text}
+            </Text>
+            {#if ((quotes as string) === "show")}
+              {#if s.quote}
+                <Text tag="blockquote" class="m-0 border-l border-border pl-4 text-lg" data-testid="quote">
+                  {s.quote}
+                </Text>
+              {/if}
+            {/if}
+          </Box>
+        {/each}
+      </Stack>
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/article-body.types.ts b/packages/svelte/ui/src/blocks/article-body.types.ts
new file mode 100644
index 0000000..63a2648
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/article-body.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Section = {
+  id: string;
+  title: string;
+  text: string;
+  quote: string;
+};
diff --git a/packages/svelte/ui/src/blocks/auth-card.svelte b/packages/svelte/ui/src/blocks/auth-card.svelte
new file mode 100644
index 0000000..1c43d40
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/auth-card.svelte
@@ -0,0 +1,124 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/account.ts -->
+<!--
+  A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button,
+  optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout
+  (card, plain), social (none, show).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { AuthLabels } from "./auth-card.types";
+
+  export type AuthCardProps = {
+    id: string;
+    title: string;
+    text: string;
+    submit: string;
+    switchText: string;
+    switchLink: string;
+    switchHref?: string;
+    labels: AuthLabels;
+    mode?: "signin" | "signup" | "reset" | "magic";
+    layout?: "card" | "plain";
+    social?: "none" | "show" | "first";
+    level?: 1 | 2;
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Separator from "../primitives/separator/separator.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import AuthForm from "../components/auth-form.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    submit,
+    switchText,
+    switchLink,
+    switchHref,
+    labels,
+    mode = "signin",
+    layout = "card",
+    social = "none",
+    level = 2,
+    landmarkLabel,
+  }: AuthCardProps = $props();
+</script>
+
+<Block
+  tag="section"
+  class={cn(
+    "flex w-full flex-col gap-6",
+    (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+  )}
+  aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+  data-testid="auth-card"
+  data-mode={mode}
+  aria-label={landmarkLabel}
+>
+  <Stack gap="2">
+    <Title as={level} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+      {title}
+    </Title>
+    <Text size="sm" class="text-muted-foreground">
+      {text}
+    </Text>
+  </Stack>
+  {#if (((social as string) === "first") && ((social as string) !== "none") && ((mode as string) !== "reset") && ((mode as string) !== "magic"))}
+    <Stack gap="4" data-testid="social">
+      <Group gap="4" align="center">
+        <Separator class="flex-1" />
+        <Text size="xs" class="text-muted-foreground">
+          {labels.divider}
+        </Text>
+        <Separator class="flex-1" />
+      </Group>
+      <Button variant="outline" size="default" type="button" class="w-full">
+        <LucideIcon name="key-round" size={16} />
+        {labels.passkey}
+      </Button>
+      <Button variant="outline" size="default" type="button" class="w-full">
+        <LucideIcon name="mail" size={16} />
+        {labels.magic}
+      </Button>
+    </Stack>
+  {/if}
+  <AuthForm id={id} mode={mode} labels={labels} submit={submit} />
+  {#if (((social as string) !== "first") && ((social as string) !== "none") && ((mode as string) !== "reset") && ((mode as string) !== "magic"))}
+    <Stack gap="4" data-testid="social">
+      <Group gap="4" align="center">
+        <Separator class="flex-1" />
+        <Text size="xs" class="text-muted-foreground">
+          {labels.divider}
+        </Text>
+        <Separator class="flex-1" />
+      </Group>
+      <Button variant="outline" size="default" type="button" class="w-full">
+        <LucideIcon name="key-round" size={16} />
+        {labels.passkey}
+      </Button>
+      <Button variant="outline" size="default" type="button" class="w-full">
+        <LucideIcon name="mail" size={16} />
+        {labels.magic}
+      </Button>
+    </Stack>
+  {/if}
+  <Text size="sm" class="text-center text-muted-foreground">
+    {switchText}
+    {" "}
+    <Link href={switchHref} variant="default" data-testid="switch">
+      {switchLink}
+    </Link>
+  </Text>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/auth-card.types.ts b/packages/svelte/ui/src/blocks/auth-card.types.ts
new file mode 100644
index 0000000..dcd767e
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/auth-card.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+
+export type AuthLabels = {
+  name: string;
+  email: string;
+  password: string;
+  remember: string;
+  forgot: string;
+  terms: string;
+  divider: string;
+  passkey: string;
+  magic: string;
+};
diff --git a/packages/svelte/ui/src/blocks/auth-layout.svelte b/packages/svelte/ui/src/blocks/auth-layout.svelte
new file mode 100644
index 0000000..cab8cf7
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/auth-layout.svelte
@@ -0,0 +1,135 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/signup.ts -->
+<!--
+  A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card,
+  centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side
+  of the picture), mode, social. The page's heading is the card's title.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { AuthSwitch, AuthVisual } from "./auth-layout.types";
+  import type { AuthLabels } from "./auth-card.types";
+
+  export type AuthLayoutProps = {
+    id: string;
+    title: string;
+    text: string;
+    submit: string;
+    switchTo: AuthSwitch;
+    labels: AuthLabels;
+    visual: AuthVisual;
+    level?: 1 | 2;
+    layout?: "split" | "centered" | "minimal";
+    side?: "end" | "start";
+    mode?: "signin" | "signup" | "reset" | "magic";
+    social?: "none" | "show" | "first";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import AuthCard from "../blocks/auth-card.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    submit,
+    switchTo,
+    labels,
+    visual,
+    level = 1,
+    layout = "split",
+    side = "end",
+    mode = "signin",
+    social = "none",
+    landmarkLabel,
+  }: AuthLayoutProps = $props();
+</script>
+
+<Block tag="div" class="w-full" data-testid="auth-layout" data-layout={layout}>
+  <Container class={cn("mx-auto w-full max-w-6xl px-4", "py-12")} data-slot="container">
+    {#if ((layout as string) === "split")}
+      <Grid cols="1-2" class="items-stretch gap-8">
+        <Box class="mx-auto flex w-full max-w-sm items-center">
+          <AuthCard
+            id={id}
+            title={title}
+            text={text}
+            submit={submit}
+            switchText={switchTo.text}
+            switchLink={switchTo.link}
+            switchHref={switchTo.href}
+            labels={labels}
+            mode={mode}
+            layout="plain"
+            social={social}
+            level={level}
+            landmarkLabel={landmarkLabel}
+          />
+        </Box>
+        <Stack
+          gap="4"
+          align="stretch"
+          class={cn(
+            "justify-end rounded bg-muted p-8",
+            (((side as string) === "start") ? "md:order-first" : "md:order-last")
+          )}
+          data-testid="visual"
+        >
+          <MediaFrame alt={visual.title} ratio="4/3" />
+          <Title as={2} size="2xl" weight="bold">
+            {visual.title}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {visual.text}
+          </Text>
+        </Stack>
+      </Grid>
+    {:else if ((layout as string) === "centered")}
+      <Box class="mx-auto w-full max-w-md rounded bg-muted p-6">
+        <AuthCard
+          id={id}
+          title={title}
+          text={text}
+          submit={submit}
+          switchText={switchTo.text}
+          switchLink={switchTo.link}
+          switchHref={switchTo.href}
+          labels={labels}
+          mode={mode}
+          social={social}
+          level={level}
+          landmarkLabel={landmarkLabel}
+        />
+      </Box>
+    {:else}
+      <Box class="mx-auto w-full max-w-sm">
+        <AuthCard
+          id={id}
+          title={title}
+          text={text}
+          submit={submit}
+          switchText={switchTo.text}
+          switchLink={switchTo.link}
+          switchHref={switchTo.href}
+          labels={labels}
+          mode={mode}
+          layout="plain"
+          social={social}
+          level={level}
+          landmarkLabel={landmarkLabel}
+        />
+      </Box>
+    {/if}
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/auth-layout.types.ts b/packages/svelte/ui/src/blocks/auth-layout.types.ts
new file mode 100644
index 0000000..59bd44b
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/auth-layout.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+
+export type AuthSwitch = {
+  /** the sentence before the link */
+  text: string;
+  /** text of the link */
+  link: string;
+  href?: string;
+};
+
+export type AuthVisual = {
+  /** the line on the picture panel */
+  title: string;
+  text: string;
+};
diff --git a/packages/svelte/ui/src/blocks/before-after.svelte b/packages/svelte/ui/src/blocks/before-after.svelte
new file mode 100644
index 0000000..a86460a
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/before-after.svelte
@@ -0,0 +1,139 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two
+  cards, rows: one row per point), icons (show, hide), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Contrast, BeforeAfterLabels } from "./before-after.types";
+
+  export type BeforeAfterProps = {
+    id: string;
+    title: string;
+    points: Contrast[];
+    empty?: string;
+    labels: BeforeAfterLabels;
+    layout?: "cards" | "rows";
+    icons?: "show" | "hide";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Card from "../primitives/card/card.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    points,
+    empty = "",
+    labels,
+    layout = "cards",
+    icons = "show",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: BeforeAfterProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((points?.length ?? 0) === 0)}
+    <EmptyState icon="git-compare" title={empty} />
+  {:else if ((layout as string) === "cards")}
+    <Grid cols="1-2" class="items-stretch gap-4" data-testid="sides">
+      <Card
+        variant="muted"
+        class={cn("h-full", (((density as string) === "compact") ? "gap-4 p-4" : ""))}
+        data-testid="side"
+        data-side="before"
+      >
+        <CardContent class="flex flex-col gap-4">
+          <Title as={3} size="xl" weight="bold">
+            {labels.before}
+          </Title>
+          <List class="m-0 flex list-none flex-col gap-4 p-0">
+            {#each points as p (p.id)}
+              <ListItem class="flex items-start gap-4" data-testid="item">
+                {#if ((icons as string) === "show")}
+                  <LucideIcon name="x" size={16} class="h-lh shrink-0 text-sm" />
+                {/if}
+                <Text size="sm">
+                  {p.before}
+                </Text>
+              </ListItem>
+            {/each}
+          </List>
+        </CardContent>
+      </Card>
+      <Card
+        variant="default"
+        class={cn("h-full", (((density as string) === "compact") ? "gap-4 p-4" : ""))}
+        data-testid="side"
+        data-side="after"
+      >
+        <CardContent class="flex flex-col gap-4">
+          <Title as={3} size="xl" weight="bold">
+            {labels.after}
+          </Title>
+          <List class="m-0 flex list-none flex-col gap-4 p-0">
+            {#each points as p (p.id)}
+              <ListItem class="flex items-start gap-4" data-testid="item">
+                {#if ((icons as string) === "show")}
+                  <LucideIcon name="check" size={16} class="h-lh shrink-0 text-sm" />
+                {/if}
+                <Text size="sm">
+                  {p.after}
+                </Text>
+              </ListItem>
+            {/each}
+          </List>
+        </CardContent>
+      </Card>
+    </Grid>
+  {:else}
+    <Stack gap="2" align="stretch" data-testid="rows">
+      {#each points as p (p.id)}
+        <Grid
+          cols="1-3"
+          class={cn("items-center gap-4", "rounded bg-card inset-ring inset-ring-border p-4")}
+          data-testid="item"
+        >
+          <Text size="base" weight="semibold">
+            {p.title}
+          </Text>
+          <Group gap="2" align="start">
+            {#if ((icons as string) === "show")}
+              <LucideIcon name="x" size={16} class="h-lh shrink-0 text-sm text-muted-foreground" />
+            {/if}
+            <Text size="sm" class="text-muted-foreground">
+              {p.before}
+            </Text>
+          </Group>
+          <Group gap="2" align="start">
+            {#if ((icons as string) === "show")}
+              <LucideIcon name="check" size={16} class="h-lh shrink-0 text-sm text-primary" />
+            {/if}
+            <Text size="sm" weight="semibold">
+              {p.after}
+            </Text>
+          </Group>
+        </Grid>
+      {/each}
+    </Stack>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/before-after.types.ts b/packages/svelte/ui/src/blocks/before-after.types.ts
new file mode 100644
index 0000000..5783791
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/before-after.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+
+export type Contrast = {
+  id: string;
+  title: string;
+  before: string;
+  after: string;
+};
+
+export type BeforeAfterLabels = {
+  before: string;
+  after: string;
+};
diff --git a/packages/svelte/ui/src/blocks/bento-grid.svelte b/packages/svelte/ui/src/blocks/bento-grid.svelte
new file mode 100644
index 0000000..88162bf
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/bento-grid.svelte
@@ -0,0 +1,87 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from
+  the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in
+  the large tiles), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Tile } from "./bento-grid.types";
+
+  export type BentoGridProps = {
+    id: string;
+    title: string;
+    tiles: Tile[];
+    empty?: string;
+    layout?: "bento" | "even";
+    media?: "none" | "image";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Card from "../primitives/card/card.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { at, cn } from "../utils";
+
+  const SPAN: Record<string, string> = {
+    "large": "md:col-span-2 md:row-span-2",
+    "wide": "md:col-span-2",
+    "small": "",
+  };
+  let {
+    id,
+    title,
+    tiles,
+    empty = "",
+    layout = "bento",
+    media = "none",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: BentoGridProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((tiles?.length ?? 0) === 0)}
+    <EmptyState icon="layout-dashboard" title={empty} />
+  {:else}
+    <Grid cols="1-4" class="auto-rows-fr gap-4" data-testid="items">
+      {#each tiles as tile (tile.id)}
+        <Card
+          variant="default"
+          class={cn(
+            "h-full overflow-hidden",
+            (((density as string) === "compact") ? "gap-4 p-4" : ""),
+            (((layout as string) === "bento") ? at(SPAN, tile.size) : "")
+          )}
+          data-testid="item"
+          data-size={(((layout as string) === "bento") ? tile.size : "even")}
+        >
+          <CardContent class="flex h-full flex-col gap-4">
+            <LucideIcon name={tile.icon} size={24} />
+            <Title as={3} size="xl" weight="bold">
+              {tile.title}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {tile.text}
+            </Text>
+            {#if (((media as string) === "image") && ((tile.size === "large") || ((layout as string) === "even")))}
+              <MediaFrame alt={tile.title} ratio="4/3" class="mt-auto" />
+            {/if}
+          </CardContent>
+        </Card>
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/bento-grid.types.ts b/packages/svelte/ui/src/blocks/bento-grid.types.ts
new file mode 100644
index 0000000..c1a438e
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/bento-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+
+export type Tile = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  size: string;
+};
diff --git a/packages/svelte/ui/src/blocks/bottom-nav.svelte b/packages/svelte/ui/src/blocks/bottom-nav.svelte
new file mode 100644
index 0000000..2b388e7
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/bottom-nav.svelte
@@ -0,0 +1,75 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show,
+  hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { NavLink } from "./nav-bar.types";
+
+  export type BottomNavProps = {
+    label: string;
+    tabs: NavLink[];
+    current?: string;
+    labels?: "show" | "hide";
+    position?: "static" | "sticky";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import { cn } from "../utils";
+
+  let {
+    label,
+    tabs,
+    current = "",
+    labels = "show",
+    position = "static",
+    tone = "default",
+    landmarkLabel,
+  }: BottomNavProps = $props();
+</script>
+
+{#if ((tabs?.length ?? 0) > 0)}
+  <Block
+    tag="nav"
+    class={cn(
+      "mx-auto w-full max-w-md border-t border-border",
+      (((tone as string) === "muted") ? "bg-muted" : "bg-background"),
+      (((position as string) === "sticky") ? "sticky bottom-0 z-40" : "")
+    )}
+    aria-label={(landmarkLabel ?? label)}
+    data-testid="bottom-nav"
+    data-position={position}
+  >
+    <List class="m-0 grid list-none grid-flow-col auto-cols-fr p-0" data-testid="items">
+      {#each tabs as tab (tab.id)}
+        <ListItem>
+          <MenuEntry
+            href={tab.href}
+            class={cn(
+              "flex flex-col items-center gap-2 py-2 text-xs",
+              ((tab.id === current) ? "font-semibold text-primary" : "text-muted-foreground")
+            )}
+            current={(tab.id === current)}
+            testid="item"
+          >
+            <LucideIcon name={tab.icon} size={20} />
+            <Inline class={(((labels as string) === "hide") ? "sr-only" : "")}>
+              {tab.name}
+            </Inline>
+          </MenuEntry>
+        </ListItem>
+      {/each}
+    </List>
+  </Block>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/cart-drawer.svelte b/packages/svelte/ui/src/blocks/cart-drawer.svelte
new file mode 100644
index 0000000..504e5a8
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cart-drawer.svelte
@@ -0,0 +1,88 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/checkout.ts -->
+<!--
+  The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity
+  field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way
+  back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { DrawerLabels } from "./cart-drawer.types";
+  import type { CartLine, CartLabels } from "./cart-list.types";
+  import type { SummaryRow } from "./order-summary.types";
+
+  export type CartDrawerProps = {
+    id: string;
+    lines: CartLine[];
+    rows: SummaryRow[];
+    labels: CartLabels;
+    drawer: DrawerLabels;
+    state?: "filled" | "empty";
+    media?: "image" | "none";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import DrawerLines from "../components/drawer-lines.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    lines,
+    rows,
+    labels,
+    drawer,
+    state = "filled",
+    media = "image",
+    landmarkLabel,
+  }: CartDrawerProps = $props();
+</script>
+
+<Block tag="section" class="py-8" aria-label={(landmarkLabel ?? drawer.title)} data-testid="section">
+  <Container class="mx-auto w-full max-w-6xl px-4" data-slot="container">
+    <Box class="flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border">
+      <Box class="hidden flex-1 flex-col gap-4 p-8 sm:flex" aria-hidden="true">
+        <Box class="h-8 w-48 rounded bg-background" />
+        <Box class="h-40 rounded bg-background" />
+        <Box class="h-40 rounded bg-background" />
+      </Box>
+      <Box
+        class="flex w-full flex-col bg-background shadow-lg sm:max-w-sm"
+        role="group"
+        aria-label={drawer.title}
+        data-testid="drawer"
+      >
+        <Group gap="4" align="center" justify="between" class="border-b border-border p-4">
+          <Title as={2} size="lg" weight="semibold">
+            {drawer.title}
+          </Title>
+          <Button variant="ghost" size="sm" layout="icon" aria-label={drawer.close}>
+            <LucideIcon name="x" size={16} />
+          </Button>
+        </Group>
+        {#if (((state as string) === "empty") || ((lines?.length ?? 0) === 0))}
+          <Box class="flex flex-1 flex-col justify-center p-4" data-testid="empty">
+            <EmptyState icon="shopping-bag" title={drawer.empty} text={drawer.emptyText}>
+              {#snippet action()}
+                <Button variant="outline" size="default">
+                  {drawer.browse}
+                </Button>
+              {/snippet}
+            </EmptyState>
+          </Box>
+        {:else}
+          <DrawerLines field={tpl("{0}-qty", id)} lines={lines} rows={rows} labels={labels} drawer={drawer} media={media} />
+        {/if}
+      </Box>
+    </Box>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/cart-drawer.types.ts b/packages/svelte/ui/src/blocks/cart-drawer.types.ts
new file mode 100644
index 0000000..8d66b9d
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cart-drawer.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type DrawerLabels = {
+  title: string;
+  close: string;
+  progress: string;
+  empty: string;
+  emptyText: string;
+  browse: string;
+};
diff --git a/packages/svelte/ui/src/blocks/cart-list.svelte b/packages/svelte/ui/src/blocks/cart-list.svelte
new file mode 100644
index 0000000..ad59f6f
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cart-list.svelte
@@ -0,0 +1,112 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button.
+  Axes: layout (table, cards), media (image, none), density, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { CartLine, CartLabels } from "./cart-list.types";
+
+  export type CartListProps = {
+    id: string;
+    title: string;
+    lines: CartLine[];
+    empty?: string;
+    labels: CartLabels;
+    layout?: "table" | "cards";
+    media?: "image" | "none";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+    onremove?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Card from "../primitives/card/card.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import CartTable from "../components/cart-table.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import NumberField from "../components/number-field.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { fmtMoney, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lines,
+    empty = "",
+    labels,
+    layout = "table",
+    media = "image",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+    onremove,
+  }: CartListProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((lines?.length ?? 0) === 0)}
+    <EmptyState icon="shopping-cart" title={empty} />
+  {:else if ((layout as string) === "table")}
+    <CartTable
+      field={tpl("{0}-qty", id)}
+      lines={lines}
+      labels={labels}
+      media={media}
+      density={density}
+      onremove={(arg: string) => onremove?.(arg)}
+    />
+  {:else}
+    <Stack gap="4" align="stretch" data-testid="cart-cards">
+      {#each lines as line (line.id)}
+        <Card variant="default" data-testid="item">
+          <CardContent class="flex flex-wrap items-center gap-4">
+            {#if ((media as string) === "image")}
+              <MediaFrame alt={line.name} ratio="1/1" class="size-16 shrink-0" />
+            {/if}
+            <Stack gap="0" class="min-w-40 flex-1">
+              <Text size="sm" weight="semibold">
+                {line.name}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {line.variant}
+              </Text>
+              <Text size="sm">
+                {fmtMoney(line.price, line.currency)}
+              </Text>
+            </Stack>
+            <NumberField
+              value={(line.qty == null ? undefined : String(line.qty))}
+              name={tpl("{0}-qty-{1}", id, line.id)}
+              min="1"
+              label={labels.qty}
+              decrease={labels.decrease}
+              increase={labels.increase}
+            />
+            <Text size="base" weight="bold">
+              {fmtMoney((line.price * line.qty), line.currency)}
+            </Text>
+            <Button
+              variant="ghost"
+              size="sm"
+              layout="icon"
+              aria-label={labels.remove}
+              data-testid="remove"
+              onclick={() => onremove?.(line.id)}
+            >
+              <LucideIcon name="x" size={16} />
+            </Button>
+          </CardContent>
+        </Card>
+      {/each}
+    </Stack>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/cart-list.types.ts b/packages/svelte/ui/src/blocks/cart-list.types.ts
new file mode 100644
index 0000000..f5d7b14
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cart-list.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type CartLine = {
+  id: string;
+  name: string;
+  variant: string;
+  price: number;
+  currency: string;
+  qty: number;
+};
+
+export type CartLabels = {
+  caption: string;
+  product: string;
+  price: string;
+  qty: string;
+  total: string;
+  remove: string;
+  subtotal: string;
+  checkout: string;
+  decrease: string;
+  increase: string;
+};
diff --git a/packages/svelte/ui/src/blocks/category-nav.svelte b/packages/svelte/ui/src/blocks/category-nav.svelte
new file mode 100644
index 0000000..879f124
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/category-nav.svelte
@@ -0,0 +1,124 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon,
+  or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes:
+  layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Category, CategoryTools } from "./category-nav.types";
+
+  export type CategoryNavProps = {
+    label: string;
+    categories: Category[];
+    current?: string;
+    layout?: "chips" | "bar" | "sidebar" | "tiles" | "toolbar";
+    count?: "show" | "hide";
+    icon?: "show" | "hide";
+    density?: "default" | "compact";
+    tools?: CategoryTools;
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Select from "../primitives/select/select.svelte";
+  import SelectOption from "../primitives/select/select-option.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import SearchField from "../components/search-field.svelte";
+  import { cn } from "../utils";
+
+  let {
+    label,
+    categories,
+    current = "all",
+    layout = "chips",
+    count = "show",
+    icon = "show",
+    density = "default",
+    tools,
+    landmarkLabel,
+  }: CategoryNavProps = $props();
+  const chipLike = $derived(((layout as string) === "chips") || ((layout as string) === "toolbar"));
+  const tiles = $derived((layout as string) === "tiles");
+  const linkShape = $derived(
+    chipLike ? "inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border"
+    : (layout as string) === "bar" ? "inline-flex items-center gap-2 -mb-px border-b px-1 py-2"
+    : tiles ? "flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border"
+    : "inline-flex w-full items-center gap-2 rounded px-3 py-2"
+  );
+  const currentLook = $derived(
+    chipLike ? "bg-primary text-primary-foreground"
+    : (layout as string) === "bar" ? "border-foreground font-semibold"
+    : tiles ? "inset-ring-foreground font-semibold"
+    : "bg-muted font-semibold"
+  );
+  const otherLook = $derived(((layout as string) === "bar") ? "border-transparent" : "");
+  const listShape = $derived(
+    (layout as string) === "sidebar" ? "flex flex-col gap-2"
+    : (layout as string) === "bar" ? "flex flex-wrap gap-2 gap-x-4 border-b border-border"
+    : tiles ? "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6"
+    : "flex flex-wrap gap-2"
+  );
+</script>
+
+<Block tag="nav" aria-label={(landmarkLabel ?? label)} data-testid="category-nav" data-layout={layout}>
+  <Container
+    class={cn("mx-auto w-full max-w-6xl px-4", (((density as string) === "compact") ? "py-2" : "py-4"))}
+    data-slot="container"
+  >
+    {#if ((layout as string) === "toolbar")}
+      <Group gap="4" align="center" class="mb-4 flex-wrap" data-testid="toolbar">
+        <SearchField value={(tools?.query ?? "")} label={(tools?.search ?? "")} placeholder={tools?.search} />
+        <Select name="sort" size="sm" aria-label={tools?.sort} class="w-48">
+          <SelectOption value="sort" label={tools?.sortValue} selected={true} />
+        </Select>
+        <Text size="sm" class="text-muted-foreground">
+          {tools?.shown}
+        </Text>
+      </Group>
+    {/if}
+    {#if ((categories?.length ?? 0) > 0)}
+      <List tag="ul" class={listShape} data-testid="items">
+        {#each categories as c (c.id)}
+          <ListItem>
+            <MenuEntry
+              href={c.href}
+              class={cn("text-sm", linkShape, ((c.id === current) ? currentLook : otherLook))}
+              current={(c.id === current)}
+              testid="item"
+              block={true}
+            >
+              {#if ((icon as string) === "show")}
+                {#if tiles}
+                  <Inline class="flex size-10 items-center justify-center rounded bg-muted">
+                    <LucideIcon name={c.icon} size={20} />
+                  </Inline>
+                {:else}
+                  <LucideIcon name={c.icon} size={16} />
+                {/if}
+              {/if}
+              <Inline>
+                {c.name}
+              </Inline>
+              {#if ((count as string) === "show")}
+                <Text size="xs" class="text-muted-foreground">
+                  {(c.count == null ? undefined : String(c.count))}
+                </Text>
+              {/if}
+            </MenuEntry>
+          </ListItem>
+        {/each}
+      </List>
+    {/if}
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/category-nav.types.ts b/packages/svelte/ui/src/blocks/category-nav.types.ts
new file mode 100644
index 0000000..4a88a78
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/category-nav.types.ts
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Category = {
+  id: string;
+  name: string;
+  icon: string;
+  count: number;
+  href?: string;
+};
+
+export type CategoryTools = {
+  /** label of the search field */
+  search?: string;
+  /** label of the sort select */
+  sort?: string;
+  /** the chosen sort */
+  sortValue?: string;
+  /** how many products are shown */
+  shown?: string;
+  /** the text in the search field */
+  query?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/chart-panel.svelte b/packages/svelte/ui/src/blocks/chart-panel.svelte
new file mode 100644
index 0000000..5c3b225
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/chart-panel.svelte
@@ -0,0 +1,72 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart
+  (bars, meters), size (default, compact), tone (default, muted).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Point } from "./chart-panel.types";
+
+  export type ChartPanelProps = {
+    id: string;
+    title: string;
+    text: string;
+    series: Point[];
+    empty?: string;
+    summary: string;
+    percent: string;
+    chart?: "bars" | "meters";
+    size?: "default" | "compact";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import BarChart from "../components/bar-chart.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MeterRow from "../components/meter-row.svelte";
+  import Panel from "../components/panel.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    series,
+    empty = "",
+    summary,
+    percent,
+    chart = "bars",
+    size = "default",
+    tone = "default",
+    landmarkLabel,
+  }: ChartPanelProps = $props();
+</script>
+
+<Block
+  tag="section"
+  aria-labelledby={(landmarkLabel ? undefined : ((title && id) ? tpl("{0}-t", id) : undefined))}
+  data-testid="panel-section"
+  aria-label={landmarkLabel}
+>
+  <Container class="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+    <Panel title={title} description={text} id={id} class={(((tone as string) === "muted") ? "bg-muted" : "")}>
+      {#if ((series?.length ?? 0) === 0)}
+        <EmptyState icon="chart-column" title={empty} />
+      {:else if ((chart as string) === "bars")}
+        <BarChart bars={series} label={summary} height={(((size as string) === "compact") ? 96 : 176)} />
+      {:else}
+        <Stack gap={(((size as string) === "compact") ? "0" : "2")} align="stretch" data-testid="items">
+          {#each series as s (s.id)}
+            <MeterRow label={s.label} value={s.value} caption={tpl(percent, s.value)} />
+          {/each}
+        </Stack>
+      {/if}
+    </Panel>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/chart-panel.types.ts b/packages/svelte/ui/src/blocks/chart-panel.types.ts
new file mode 100644
index 0000000..9f64516
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/chart-panel.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Point = {
+  id: string;
+  label: string;
+  value: number;
+};
diff --git a/packages/svelte/ui/src/blocks/checklist.svelte b/packages/svelte/ui/src/blocks/checklist.svelte
new file mode 100644
index 0000000..7170e31
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/checklist.svelte
@@ -0,0 +1,122 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain),
+  progress (bar, text, none), marker (check, number), tone (default, muted).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Task } from "./checklist.types";
+
+  export type ChecklistProps = {
+    id: string;
+    title: string;
+    tasks: Task[];
+    empty?: string;
+    progressLabel: string;
+    layout?: "card" | "plain";
+    progress?: "bar" | "text" | "none";
+    marker?: "check" | "number";
+    detail?: "always" | "expand";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Disclosure from "../primitives/disclosure/disclosure.svelte";
+  import IconBadge from "../primitives/iconbadge/icon-badge.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Progress from "../primitives/form/progress.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Summary from "../primitives/disclosure/summary.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    tasks,
+    empty = "",
+    progressLabel,
+    layout = "card",
+    progress = "bar",
+    marker = "check",
+    detail = "always",
+    tone = "default",
+    landmarkLabel,
+  }: ChecklistProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} measure="2xl" landmarkLabel={landmarkLabel}>
+  {#if ((tasks?.length ?? 0) === 0)}
+    <EmptyState icon="list-checks" title={empty} />
+  {:else}
+    <Stack
+      gap="4"
+      align="stretch"
+      class={(((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")}
+      data-testid="checklist"
+    >
+      {#if ((progress as string) === "bar")}
+        <Progress
+          value={
+            Math.round(((tasks.filter((i) => i["done"]).length * 100) / (tasks?.length ?? 0))) == null ? undefined
+            : String(Math.round(((tasks.filter((i) => i["done"]).length * 100) / (tasks?.length ?? 0))))
+          }
+          max="100"
+          aria-label={tpl(progressLabel, tasks.filter((i) => i["done"]).length, (tasks?.length ?? 0))}
+        />
+      {/if}
+      {#if ((progress as string) === "text")}
+        <Text size="sm" class="text-muted-foreground" data-testid="progress-text">
+          {tpl(progressLabel, tasks.filter((i) => i["done"]).length, (tasks?.length ?? 0))}
+        </Text>
+      {/if}
+      <List class="m-0 flex list-none flex-col gap-4 p-0" data-testid="items">
+        {#each tasks as task, i (task.id)}
+          <ListItem
+            class="flex items-start gap-4"
+            data-testid="item"
+            data-done={(task.done == null ? undefined : String(task.done))}
+          >
+            {#if ((marker as string) === "number")}
+              <IconBadge variant={(task.done ? "primary" : "outline")} size="xs">
+                {((i + 1) == null ? undefined : String((i + 1)))}
+              </IconBadge>
+            {:else}
+              <LucideIcon
+                name={(task.done ? "circle-check" : "circle")}
+                size={24}
+                class={(task.done ? "shrink-0 text-primary" : "shrink-0 text-muted-foreground")}
+              />
+            {/if}
+            {#if ((detail as string) === "expand")}
+              <Disclosure variant="ghost" class="flex-1" data-testid="task-detail">
+                <Summary variant="ghost">
+                  {task.title}
+                </Summary>
+                <Text size="sm" class="pb-2 text-muted-foreground">
+                  {task.text}
+                </Text>
+              </Disclosure>
+            {:else}
+              <Stack gap="0">
+                <Text size="base" weight="semibold">
+                  {task.title}
+                </Text>
+                <Text size="sm" class="text-muted-foreground">
+                  {task.text}
+                </Text>
+              </Stack>
+            {/if}
+          </ListItem>
+        {/each}
+      </List>
+    </Stack>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/checklist.types.ts b/packages/svelte/ui/src/blocks/checklist.types.ts
new file mode 100644
index 0000000..54d9f32
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/checklist.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Task = {
+  id: string;
+  title: string;
+  text: string;
+  done: boolean;
+};
diff --git a/packages/svelte/ui/src/blocks/checkout-form.svelte b/packages/svelte/ui/src/blocks/checkout-form.svelte
new file mode 100644
index 0000000..f86eccc
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/checkout-form.svelte
@@ -0,0 +1,136 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/checkout.ts -->
+<!--
+  A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps,
+  beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards:
+  each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { CheckoutLabels } from "./checkout-form.types";
+  import type { Day } from "../components/slot-grid.types";
+  import type { Payment } from "../components/payment-options.types";
+  import type { CartLine } from "./cart-list.types";
+  import type { SummaryRow } from "./order-summary.types";
+  import type { Promo, CartSummaryLabels } from "../components/cart-summary-card.types";
+
+  export type CheckoutFormProps = {
+    id: string;
+    title?: string;
+    days: Day[];
+    payments: Payment[];
+    lines: CartLine[];
+    rows: SummaryRow[];
+    promos: Promo[];
+    labels: CheckoutLabels;
+    totals: CartSummaryLabels;
+    layout?: "cards" | "numbered";
+    summary?: "aside" | "none";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Form from "../primitives/form/form.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Textarea from "../primitives/textarea/textarea.svelte";
+  import CartSummaryCard from "../components/cart-summary-card.svelte";
+  import CheckoutStep from "../components/checkout-step.svelte";
+  import CheckoutSubmit from "../components/checkout-submit.svelte";
+  import Field from "../components/field.svelte";
+  import PaymentOptions from "../components/payment-options.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import SlotGrid from "../components/slot-grid.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title = "",
+    days,
+    payments,
+    lines,
+    rows,
+    promos,
+    labels,
+    totals,
+    layout = "cards",
+    summary = "aside",
+    tone = "default",
+    landmarkLabel,
+  }: CheckoutFormProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+  <Box class="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+    <Form
+      method="dialog"
+      class={
+        (summary as string) === "aside" ? "flex flex-col gap-6 lg:col-span-2"
+        : "flex flex-col gap-6 lg:col-span-3"
+      }
+      data-testid="checkout-form"
+    >
+      <CheckoutStep number="1" title={labels.contacts} text={labels.contactsText} layout={layout}>
+        <Grid cols="1-2" class="gap-4">
+          <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+            <Input type="text" name="name" autocomplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+          </Field>
+          <Field label={labels.phone} htmlFor={tpl("{0}-phone", id)}>
+            <Input type="tel" name="phone" autocomplete="tel" id={tpl("{0}-phone", id)} data-testid="field" />
+          </Field>
+          <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+            <Input type="email" name="email" autocomplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+          </Field>
+        </Grid>
+      </CheckoutStep>
+      <CheckoutStep number="2" title={labels.address} text={labels.addressText} layout={layout}>
+        <Field label={labels.street} htmlFor={tpl("{0}-street", id)}>
+          <Input type="text" name="street" autocomplete="address-line1" id={tpl("{0}-street", id)} data-testid="field" />
+        </Field>
+        <Grid cols="2-4" class="gap-4">
+          <Field label={labels.house} htmlFor={tpl("{0}-house", id)}>
+            <Input type="text" name="house" id={tpl("{0}-house", id)} data-testid="field" />
+          </Field>
+          <Field label={labels.flat} htmlFor={tpl("{0}-flat", id)}>
+            <Input type="text" name="flat" id={tpl("{0}-flat", id)} data-testid="field" />
+          </Field>
+          <Field label={labels.entrance} htmlFor={tpl("{0}-entrance", id)}>
+            <Input type="text" name="entrance" id={tpl("{0}-entrance", id)} data-testid="field" />
+          </Field>
+          <Field label={labels.floor} htmlFor={tpl("{0}-floor", id)}>
+            <Input type="text" name="floor" id={tpl("{0}-floor", id)} data-testid="field" />
+          </Field>
+        </Grid>
+        <Field label={labels.comment} htmlFor={tpl("{0}-comment", id)}>
+          <Textarea rows={4} name="comment" id={tpl("{0}-comment", id)} data-testid="field" />
+        </Field>
+      </CheckoutStep>
+      <CheckoutStep number="3" title={labels.slot} text={labels.slotText} layout={layout}>
+        {#if ((days?.length ?? 0) > 0)}
+          <SlotGrid days={days} name={tpl("{0}-slot", id)} item="plain" />
+        {/if}
+      </CheckoutStep>
+      <CheckoutStep number="4" title={labels.payment} text={labels.paymentText} layout={layout}>
+        {#if ((payments?.length ?? 0) > 0)}
+          <PaymentOptions payments={payments} name={tpl("{0}-payment", id)} checked="payment-card" />
+        {/if}
+      </CheckoutStep>
+      <CheckoutSubmit id={id} consent={labels.consent} submit={labels.submit} legal={labels.legal} />
+    </Form>
+    {#if ((summary as string) === "aside")}
+      <Box class="lg:sticky lg:top-8" data-testid="aside">
+        <CartSummaryCard
+          field={tpl("{0}-promo", id)}
+          lines={lines}
+          rows={rows}
+          promos={promos}
+          labels={totals}
+          items="show"
+        />
+      </Box>
+    {/if}
+  </Box>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/checkout-form.types.ts b/packages/svelte/ui/src/blocks/checkout-form.types.ts
new file mode 100644
index 0000000..204a76d
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/checkout-form.types.ts
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type CheckoutLabels = {
+  contacts: string;
+  contactsText: string;
+  name: string;
+  phone: string;
+  email: string;
+  address: string;
+  addressText: string;
+  street: string;
+  house: string;
+  flat: string;
+  entrance: string;
+  floor: string;
+  comment: string;
+  slot: string;
+  slotText: string;
+  payment: string;
+  paymentText: string;
+  consent: string;
+  submit: string;
+  legal: string;
+};
diff --git a/packages/svelte/ui/src/blocks/comparison-table.svelte b/packages/svelte/ui/src/blocks/comparison-table.svelte
new file mode 100644
index 0000000..a4e8aa8
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/comparison-table.svelte
@@ -0,0 +1,107 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/pricing-more.ts -->
+<!--
+  Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a
+  check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle
+  column), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { CompareRow, CompareLabels } from "./comparison-table.types";
+
+  export type ComparisonTableProps = {
+    id: string;
+    title: string;
+    rows: CompareRow[];
+    empty?: string;
+    labels: CompareLabels;
+    highlight?: "none" | "middle";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Table from "../primitives/table/table.svelte";
+  import TableBody from "../primitives/table/table-body.svelte";
+  import TableCaption from "../primitives/table/table-caption.svelte";
+  import TableCell from "../primitives/table/table-cell.svelte";
+  import TableHead from "../primitives/table/table-head.svelte";
+  import TableHeadCell from "../primitives/table/table-head-cell.svelte";
+  import TableRow from "../primitives/table/table-row.svelte";
+  import CompareMark from "../components/compare-mark.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    rows,
+    empty = "",
+    labels,
+    highlight = "none",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: ComparisonTableProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((rows?.length ?? 0) === 0)}
+    <EmptyState icon="table" title={empty} />
+  {:else}
+    <Box class="relative w-full overflow-x-auto">
+      <Table class="w-full text-left text-sm" data-testid="compare">
+        <TableCaption class="sr-only">
+          {labels.caption}
+        </TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell scope="col" class="py-4">
+              {labels.feature}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-4">
+              {labels.a}
+            </TableHeadCell>
+            <TableHeadCell
+              scope="col"
+              class={cn("py-4", (((highlight as string) === "middle") ? "bg-muted" : ""))}
+              data-highlight={(((highlight as string) === "middle") ? "true" : "false")}
+            >
+              {labels.b}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-4">
+              {labels.c}
+            </TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {#each rows as row (row.id)}
+            <TableRow class="border-t border-border" data-testid="item">
+              <TableHeadCell scope="row" class={cn("font-medium", (((density as string) === "compact") ? "py-2" : "py-4"))}>
+                {row.label}
+              </TableHeadCell>
+              <TableCell class={cn((((density as string) === "compact") ? "py-2" : "py-4"))}>
+                <CompareMark value={row.a} yes={labels.yes} no={labels.no} />
+              </TableCell>
+              <TableCell
+                class={cn(
+                  (((density as string) === "compact") ? "py-2" : "py-4"),
+                  (((highlight as string) === "middle") ? "bg-muted font-semibold" : "")
+                )}
+              >
+                <CompareMark value={row.b} yes={labels.yes} no={labels.no} />
+              </TableCell>
+              <TableCell class={(((density as string) === "compact") ? "py-2" : "py-4")}>
+                <CompareMark value={row.c} yes={labels.yes} no={labels.no} />
+              </TableCell>
+            </TableRow>
+          {/each}
+        </TableBody>
+      </Table>
+    </Box>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/comparison-table.types.ts b/packages/svelte/ui/src/blocks/comparison-table.types.ts
new file mode 100644
index 0000000..bb0984c
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/comparison-table.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type CompareRow = {
+  id: string;
+  label: string;
+  a: string;
+  b: string;
+  c: string;
+};
+
+export type CompareLabels = {
+  caption: string;
+  feature: string;
+  a: string;
+  b: string;
+  c: string;
+  yes: string;
+  no: string;
+};
diff --git a/packages/svelte/ui/src/blocks/contact-form.svelte b/packages/svelte/ui/src/blocks/contact-form.svelte
new file mode 100644
index 0000000..1a5618d
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/contact-form.svelte
@@ -0,0 +1,120 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach
+  us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone
+  (default, muted).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { ContactLabels } from "./contact-form.types";
+  import type { Feature } from "./feature-grid.types";
+
+  export type ContactFormProps = {
+    id: string;
+    title: string;
+    text: string;
+    labels: ContactLabels;
+    details: Feature[];
+    layout?: "single" | "split";
+    fields?: "short" | "full";
+    terms?: "show" | "hide";
+    level?: 1 | 2;
+    page?: "section" | "full";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Checkbox from "../primitives/checkbox/checkbox.svelte";
+  import Form from "../primitives/form/form.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Textarea from "../primitives/textarea/textarea.svelte";
+  import Field from "../components/field.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    labels,
+    details,
+    layout = "single",
+    fields = "full",
+    terms = "hide",
+    level = 2,
+    page = "section",
+    tone = "default",
+    landmarkLabel,
+  }: ContactFormProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={text}
+  heading={{ level }}
+  tone={tone}
+  density={(((page as string) === "full") ? "roomy" : "default")}
+  align={(((page as string) === "full") ? "center" : "start")}
+  measure={(((layout as string) === "single") ? "xl" : "default")}
+  landmarkLabel={landmarkLabel}
+>
+  <Grid cols={(((layout as string) === "split") ? "1-2" : "1")} class="items-start gap-8">
+    <Form method="dialog" class="w-full gap-4" data-testid="contact-form">
+      {#if ((fields as string) === "full")}
+        <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+          <Input type="text" name="name" autocomplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+        </Field>
+      {/if}
+      <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+        <Input type="email" name="email" autocomplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+      </Field>
+      {#if ((fields as string) === "full")}
+        <Field label={labels.subject} htmlFor={tpl("{0}-subject", id)}>
+          <Input type="text" name="subject" id={tpl("{0}-subject", id)} data-testid="field" />
+        </Field>
+      {/if}
+      <Field label={labels.message} htmlFor={tpl("{0}-message", id)}>
+        <Textarea rows={4} name="message" id={tpl("{0}-message", id)} data-testid="field" />
+      </Field>
+      {#if ((terms as string) === "show")}
+        <Group gap="2" align="center" class={cn("w-fit", "")}>
+          <Checkbox name="consent" id={tpl("{0}-consent", id)} />
+          <Label for={tpl("{0}-consent", id)} class="text-sm">
+            {labels.consent}
+          </Label>
+        </Group>
+      {/if}
+      <Button variant="default" size="default" type="submit" class="w-fit" data-testid="submit">
+        {labels.submit}
+      </Button>
+    </Form>
+    {#if (((layout as string) === "split") && ((details?.length ?? 0) > 0))}
+      <Stack gap="4" data-testid="details">
+        {#each details as d (d.id)}
+          <Group gap="4" align="start" data-testid="detail">
+            <LucideIcon name={d.icon} size={20} />
+            <Stack gap="0">
+              <Text size="base" weight="semibold">
+                {d.title}
+              </Text>
+              <Text size="sm" class="text-muted-foreground">
+                {d.text}
+              </Text>
+            </Stack>
+          </Group>
+        {/each}
+      </Stack>
+    {/if}
+  </Grid>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/contact-form.types.ts b/packages/svelte/ui/src/blocks/contact-form.types.ts
new file mode 100644
index 0000000..d8ed802
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/contact-form.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+
+export type ContactLabels = {
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+  consent: string;
+  submit: string;
+};
diff --git a/packages/svelte/ui/src/blocks/cookie-banner.svelte b/packages/svelte/ui/src/blocks/cookie-banner.svelte
new file mode 100644
index 0000000..0a0cc33
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cookie-banner.svelte
@@ -0,0 +1,94 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings.
+  Axes: layout (bar, card), actions (two, three), tone (default, muted).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CookieBannerProps = {
+    id: string;
+    title: string;
+    text: string;
+    accept: string;
+    decline: string;
+    settings?: string;
+    layout?: "bar" | "card";
+    actions?: "two" | "three";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    accept,
+    decline,
+    settings,
+    layout = "bar",
+    actions = "two",
+    tone = "default",
+    landmarkLabel,
+  }: CookieBannerProps = $props();
+</script>
+
+<Block
+  tag="section"
+  aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+  data-testid="cookie"
+  data-layout={layout}
+  aria-label={landmarkLabel}
+>
+  <Container class={cn("mx-auto w-full max-w-6xl px-4", "py-4")} data-slot="container">
+    <Box
+      class={cn(
+        "flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border",
+        (((tone as string) === "muted") ? "bg-muted" : "bg-card"),
+        (
+          (layout as string) === "bar" ? "md:flex-row md:items-center md:justify-between"
+          : "mx-auto w-full max-w-md"
+        )
+      )}
+    >
+      <Group gap="4" align="start" class="min-w-0">
+        <LucideIcon name="cookie" size={24} />
+        <Stack gap="2">
+          <Title as={2} size="base" weight="bold" id={tpl("{0}-title", id)}>
+            {title}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {text}
+          </Text>
+        </Stack>
+      </Group>
+      <Group gap="2" class="shrink-0 flex-wrap">
+        {#if (((actions as string) === "three") && settings)}
+          <Button variant="ghost" size="sm" type="button" data-testid="cookie-settings">
+            {settings}
+          </Button>
+        {/if}
+        <Button variant="outline" size="sm" type="button" data-testid="cookie-decline">
+          {decline}
+        </Button>
+        <Button variant="default" size="sm" type="button" data-testid="cookie-accept">
+          {accept}
+        </Button>
+      </Group>
+    </Box>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/credit-packs.svelte b/packages/svelte/ui/src/blocks/credit-packs.svelte
new file mode 100644
index 0000000..306d832
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/credit-packs.svelte
@@ -0,0 +1,127 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/pricing-more.ts -->
+<!--
+  Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile,
+  row), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Pack } from "./credit-packs.types";
+
+  export type CreditPacksProps = {
+    id: string;
+    title: string;
+    packs: Pack[];
+    empty?: string;
+    badges: Record<string, string>;
+    buy: string;
+    cols?: "2" | "4";
+    item?: "tile" | "row";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Card from "../primitives/card/card.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { at, cn, fitCols, fmtMoney } from "../utils";
+
+  let {
+    id,
+    title,
+    packs,
+    empty = "",
+    badges,
+    buy,
+    cols = "4",
+    item = "tile",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: CreditPacksProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  tone={tone}
+  density={density}
+  measure={(((item as string) === "row") ? "2xl" : "default")}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((packs?.length ?? 0) === 0)}
+    <EmptyState icon="coins" title={empty} />
+  {:else}
+    <Grid
+      cols={
+        (item as string) === "row" ? "1"
+        : fitCols((((cols as string) === "2") ? "1-2" : "1-4"), (packs?.length ?? 0))
+      }
+      class="gap-4"
+      data-testid="items"
+    >
+      {#each packs as pack (pack.id)}
+        <Card
+          variant="default"
+          class={cn(
+            "h-full",
+            (
+              (item as string) === "row" ? "gap-4 p-4"
+              : (density as string) === "compact" ? "gap-4 p-4"
+              : ""
+            )
+          )}
+          data-testid="item"
+          data-badge={pack.badge}
+        >
+          <CardContent
+            class={cn(
+              "flex h-full gap-4",
+              (((item as string) === "row") ? "flex-row flex-wrap items-center justify-between" : "flex-col")
+            )}
+          >
+            <Stack gap="2" align="start" class={cn("min-w-0", (((item as string) === "row") ? "flex-1" : ""))}>
+              {#if (pack.badge || (((item as string) !== "row") && (packs.filter((i) => i["badge"]).length > 0)))}
+                <Box class="flex min-h-6 items-center" data-slot="badge-slot">
+                  {#if pack.badge}
+                    <Badge variant="default" size="default" class="w-fit shrink-0" data-testid="badge">
+                      {at(badges, pack.badge)}
+                    </Badge>
+                  {/if}
+                </Box>
+              {/if}
+              <Stack gap="0" class="min-w-0">
+                <Title as={3} size="xl" weight="bold">
+                  {pack.name}
+                </Title>
+                <Text size="2xl" weight="bold">
+                  {fmtMoney(pack.price, pack.currency)}
+                </Text>
+              </Stack>
+            </Stack>
+            <Button
+              variant={((pack.badge === "popular") ? "default" : "outline")}
+              size="sm"
+              type="button"
+              class={cn("w-fit shrink-0", (((item as string) === "row") ? "" : "mt-auto"))}
+              data-testid="buy"
+            >
+              {buy}
+            </Button>
+          </CardContent>
+        </Card>
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/credit-packs.types.ts b/packages/svelte/ui/src/blocks/credit-packs.types.ts
new file mode 100644
index 0000000..d320871
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/credit-packs.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type Pack = {
+  id: string;
+  name: string;
+  credits: number;
+  price: number;
+  currency: string;
+  badge: string;
+};
diff --git a/packages/svelte/ui/src/blocks/cta-band.svelte b/packages/svelte/ui/src/blocks/cta-band.svelte
new file mode 100644
index 0000000..99628ed
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cta-band.svelte
@@ -0,0 +1,117 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing.ts -->
+<!--
+  A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split
+  picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof
+  (none, quote), density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { CtaQuote } from "./cta-band.types";
+  import type { ActionSet } from "../components/cta-actions.types";
+
+  export type CtaBandProps = {
+    id: string;
+    title: string;
+    text: string;
+    actions: ActionSet;
+    quote?: CtaQuote;
+    layout?: "card" | "band" | "split" | "row" | "banner";
+    tone?: "default" | "muted";
+    proof?: "none" | "quote";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Card from "../primitives/card/card.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import CtaActions from "../components/cta-actions.svelte";
+  import CtaBanner from "../blocks/cta-banner.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import QuoteProof from "../components/quote-proof.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    actions,
+    quote,
+    layout = "card",
+    tone = "muted",
+    proof = "none",
+    density = "default",
+    landmarkLabel,
+  }: CtaBandProps = $props();
+  const center = $derived(((layout as string) === "band") || ((layout as string) === "banner"));
+</script>
+
+{#if ((layout as string) === "banner")}
+  <CtaBanner
+    id={id}
+    title={title}
+    text={text}
+    cta={actions.cta}
+    href={actions.href}
+    tone={tone}
+    landmarkLabel={landmarkLabel}
+  />
+{:else if ((layout as string) === "row")}
+  <Block
+    tag="section"
+    class="py-8"
+    aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+    data-testid="section"
+    data-tone={tone}
+    data-density={density}
+    aria-label={landmarkLabel}
+  >
+    <Container class="mx-auto w-full max-w-6xl px-4" data-slot="container">
+      <Card variant="muted">
+        <CardContent class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <Stack gap="2" class="min-w-0">
+            <Title as={2} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+              {title}
+            </Title>
+            <Text size="base" class="text-muted-foreground">
+              {text}
+            </Text>
+          </Stack>
+          {#if ((proof as string) === "quote")}
+            <QuoteProof quote={quote?.text} quoteBy={quote?.by} center={center} />
+          {/if}
+          <CtaActions id={id} actions={actions} center={center} />
+        </CardContent>
+      </Card>
+    </Container>
+  </Block>
+{:else}
+  <SectionFrame
+    id={id}
+    title={title}
+    lead={text}
+    layout={(((layout as string) === "split") ? "split" : "stack")}
+    align={(center ? "center" : "start")}
+    boxed={((layout as string) === "card")}
+    media={{ show: ((layout as string) === "split") }}
+    tone={tone}
+    density={density}
+    landmarkLabel={landmarkLabel}
+  >
+    {#if ((proof as string) === "quote")}
+      <QuoteProof quote={quote?.text} quoteBy={quote?.by} center={center} />
+    {/if}
+    <CtaActions id={id} actions={actions} center={center} />
+    {#snippet aside()}
+      <MediaFrame alt={title} ratio="4/3" />
+    {/snippet}
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/cta-band.types.ts b/packages/svelte/ui/src/blocks/cta-band.types.ts
new file mode 100644
index 0000000..e12f8ec
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cta-band.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type CtaQuote = {
+  /** a customer quote, shown when `proof` is quote */
+  text?: string;
+  /** who said it */
+  by?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/cta-banner.svelte b/packages/svelte/ui/src/blocks/cta-banner.svelte
new file mode 100644
index 0000000..fca33e6
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cta-banner.svelte
@@ -0,0 +1,59 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing.ts -->
+<!-- A centered closing card: heading, one sentence and a pill button. Sizes from the default preset. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CtaBannerProps = {
+    id: string;
+    title: string;
+    text: string;
+    cta: string;
+    href?: string;
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn, tpl } from "../utils";
+
+  let { id, title, text, cta, href, tone = "muted", landmarkLabel }: CtaBannerProps = $props();
+</script>
+
+<Block
+  tag="section"
+  class="w-full py-0"
+  aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+  data-testid="section"
+  data-tone={tone}
+  data-density="compact"
+  aria-label={landmarkLabel}
+>
+  <Box
+    class={cn("flex w-full flex-col items-center gap-10 bg-muted px-6 text-center", defaults.cta.panel)}
+    data-testid="cta-banner"
+  >
+    <Title
+      as={2}
+      size="3xl"
+      weight="semibold"
+      class={cn(defaults.cta.title, "leading-9")}
+      id={tpl("{0}-title", id)}
+    >
+      {title}
+    </Title>
+    <Text size="xs" weight="semibold" class={cn("leading-5 text-muted-foreground", defaults.cta.text)}>
+      {text}
+    </Text>
+    <Button variant="default" size="lg" href={href} class={defaults.cta.button} data-testid="action-primary">
+      {cta}
+    </Button>
+  </Box>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/cta-proof.svelte b/packages/svelte/ui/src/blocks/cta-proof.svelte
new file mode 100644
index 0000000..f47a89a
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cta-proof.svelte
@@ -0,0 +1,83 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/cta-proof.ts -->
+<!--
+  A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note.
+  Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos,
+  features, stats, rows, zones), mediaSide, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { CtaContent } from "./cta-proof.types";
+  import type { Logo } from "./logo-cloud.types";
+  import type { Feature } from "./feature-grid.types";
+  import type { Stat } from "./stats-band.types";
+  import type { Zone } from "./zone-table.types";
+  import type { LinkActions } from "./error-page.types";
+
+  export type CtaProofProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    actions: LinkActions;
+    content: CtaContent;
+    note?: string;
+    layout?: "center" | "split";
+    proof?: "logos" | "features" | "stats" | "rows" | "zones";
+    mediaSide?: "end" | "start";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Text from "../primitives/text/text.svelte";
+  import ActionGroup from "../components/action-group.svelte";
+  import CtaProofItems from "../components/cta-proof-items.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    actions,
+    content,
+    note = "",
+    layout = "center",
+    proof = "stats",
+    mediaSide = "end",
+    tone = "default",
+    landmarkLabel,
+  }: CtaProofProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  heading={{ badge }}
+  tone={tone}
+  align={(((layout as string) === "center") ? "center" : "start")}
+  layout={(((layout as string) === "center") ? "stack" : "split")}
+  media={{ show: ((layout as string) === "split"), side: mediaSide }}
+  landmarkLabel={landmarkLabel}
+>
+  <CtaProofItems content={content} proof={proof} center={((layout as string) === "center")} />
+  <ActionGroup
+    primary={actions.cta}
+    primaryHref={actions.href}
+    secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+    secondaryHref={actions.secondaryHref}
+    align={(((layout as string) === "center") ? "center" : "start")}
+  />
+  {#if note}
+    <Text size="xs" class="text-muted-foreground" data-testid="cta-note">
+      {note}
+    </Text>
+  {/if}
+  {#snippet aside()}
+    <MediaFrame alt={title} ratio="4/3" />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/cta-proof.types.ts b/packages/svelte/ui/src/blocks/cta-proof.types.ts
new file mode 100644
index 0000000..4169967
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/cta-proof.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/cta-proof.ts
+
+import type { Logo } from "./logo-cloud.types";
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Zone } from "./zone-table.types";
+
+export type CtaContent = {
+  logos: Logo[];
+  features: Feature[];
+  stats: Stat[];
+  zones: Zone[];
+};
diff --git a/packages/svelte/ui/src/blocks/dashboard-overview.svelte b/packages/svelte/ui/src/blocks/dashboard-overview.svelte
new file mode 100644
index 0000000..1e29c4e
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/dashboard-overview.svelte
@@ -0,0 +1,77 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/workspace.ts -->
+<!--
+  The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the
+  activity side by side, stacked: one below the other), cols (2, 4), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { OverviewChart, OverviewActivity } from "./dashboard-overview.types";
+  import type { Metric } from "./metric-row.types";
+  import type { Point } from "./chart-panel.types";
+  import type { Event } from "./activity-feed.types";
+
+  export type DashboardOverviewProps = {
+    id: string;
+    title: string;
+    metrics: Metric[];
+    chart: OverviewChart;
+    activity: OverviewActivity;
+    layout?: "split" | "stacked";
+    cols?: "2" | "4";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import BarChart from "../components/bar-chart.svelte";
+  import Panel from "../components/panel.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import StatTile from "../components/stat-tile.svelte";
+  import Timeline from "../components/timeline.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    metrics,
+    chart,
+    activity,
+    layout = "split",
+    cols = "4",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: DashboardOverviewProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  <Stack gap="6" align="stretch">
+    {#if ((metrics?.length ?? 0) > 0)}
+      <Grid cols={(((cols as string) === "2") ? "1-2" : "1-4")} class="gap-4" data-testid="items">
+        {#each metrics as m (m.id)}
+          <Box data-testid="item">
+            <StatTile label={m.label} value={m.value} icon={m.icon} hint={m.hint} />
+          </Box>
+        {/each}
+      </Grid>
+    {/if}
+    <Grid cols={(((layout as string) === "split") ? "1-2" : "1")} class="items-stretch gap-4" data-testid="panels">
+      {#if ((chart.series?.length ?? 0) > 0)}
+        <Panel title={chart.title} description={chart.text} id={tpl("{0}-chart", id)} class="h-full">
+          <BarChart bars={chart.series} label={chart.summary} height={144} />
+        </Panel>
+      {/if}
+      {#if ((activity.events?.length ?? 0) > 0)}
+        <Panel title={activity.title} description={activity.text} id={tpl("{0}-feed", id)} class="h-full">
+          <Timeline items={activity.events} />
+        </Panel>
+      {/if}
+    </Grid>
+  </Stack>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/dashboard-overview.types.ts b/packages/svelte/ui/src/blocks/dashboard-overview.types.ts
new file mode 100644
index 0000000..f10bd5b
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/dashboard-overview.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+
+export type OverviewChart = {
+  title: string;
+  text: string;
+  /** the chart's accessible summary */
+  summary: string;
+  /** the bars */
+  series: Point[];
+};
+
+export type OverviewActivity = {
+  title: string;
+  text: string;
+  events: Event[];
+};
diff --git a/packages/svelte/ui/src/blocks/dashboard-shell.svelte b/packages/svelte/ui/src/blocks/dashboard-shell.svelte
new file mode 100644
index 0000000..2a34e78
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/dashboard-shell.svelte
@@ -0,0 +1,115 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/shells.ts -->
+<!--
+  The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset:
+  over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide,
+  rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries
+  the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a
+  framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { ShellNav } from "./dashboard-shell.types";
+  import type { NavLink } from "./nav-bar.types";
+
+  export type DashboardShellProps = {
+    id: string;
+    title: string;
+    level?: 1 | 2;
+    nav: ShellNav;
+    topbar?: "full" | "inset" | "none";
+    search?: "show" | "hide";
+    sidebar?: "wide" | "rail" | "collapsed" | "twolevel" | "none";
+    side?: "start" | "end";
+    footer?: "full" | "inset" | "none";
+    content?: "grid" | "split" | "list";
+    frame?: "window" | "page";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import ShellContent from "../components/shell-content.svelte";
+  import ShellFooter from "../components/shell-footer.svelte";
+  import ShellSidebar from "../components/shell-sidebar.svelte";
+  import ShellTopbar from "../components/shell-topbar.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    level = 2,
+    nav,
+    topbar = "full",
+    search = "show",
+    sidebar = "wide",
+    side = "start",
+    footer = "none",
+    content = "grid",
+    frame = "window",
+    landmarkLabel,
+  }: DashboardShellProps = $props();
+  const titleId = $derived(tpl("{0}-title", id));
+</script>
+
+<Block
+  tag="section"
+  class={(((frame as string) === "window") ? "bg-background py-12" : "bg-background")}
+  id={id}
+  aria-labelledby={(landmarkLabel ? undefined : titleId)}
+  data-testid="dashboard-shell"
+  data-topbar={topbar}
+  data-sidebar={sidebar}
+  data-footer={footer}
+  aria-label={landmarkLabel}
+>
+  <Box class={(((frame as string) === "window") ? "mx-auto w-full max-w-6xl px-4" : "")}>
+    <Box
+      class={cn(
+        "flex flex-col overflow-hidden bg-background",
+        (((frame as string) === "window") ? "min-h-160 rounded border border-border" : "min-h-screen")
+      )}
+      data-testid="window"
+    >
+      {#if ((topbar as string) === "full")}
+        <ShellTopbar
+          nav={nav}
+          links={(((sidebar as string) === "none") ? "show" : "hide")}
+          search={search}
+          landmarkLabel={landmarkLabel}
+        />
+      {/if}
+      <Box class={cn("flex min-h-0 flex-1", (((side as string) === "end") ? "flex-row-reverse" : ""))}>
+        {#if ((sidebar as string) !== "none")}
+          <ShellSidebar
+            nav={nav}
+            mode={sidebar}
+            side={side}
+            brand={(((topbar as string) === "full") ? "hide" : "show")}
+            landmarkLabel={landmarkLabel}
+          />
+        {/if}
+        <Box class="flex min-w-0 flex-1 flex-col">
+          {#if ((topbar as string) === "inset")}
+            <ShellTopbar
+              nav={nav}
+              brand={(((sidebar as string) === "none") ? "show" : "hide")}
+              links={(((sidebar as string) === "none") ? "show" : "hide")}
+              search={search}
+              landmarkLabel={landmarkLabel}
+            />
+          {/if}
+          <ShellContent title={title} titleId={titleId} level={level} content={content} />
+          {#if ((footer as string) === "inset")}
+            <ShellFooter nav={nav} place="inset" landmarkLabel={landmarkLabel} />
+          {/if}
+        </Box>
+      </Box>
+      {#if ((footer as string) === "full")}
+        <ShellFooter nav={nav} landmarkLabel={landmarkLabel} />
+      {/if}
+    </Box>
+  </Box>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/dashboard-shell.types.ts b/packages/svelte/ui/src/blocks/dashboard-shell.types.ts
new file mode 100644
index 0000000..1fbb633
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/dashboard-shell.types.ts
@@ -0,0 +1,21 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/shells.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type ShellNav = {
+  label: string;
+  brand: string;
+  links: NavLink[];
+  current: string;
+  subTitle: string;
+  sub: NavLink[];
+  subCurrent: string;
+  search: string;
+  shortcut: string;
+  expand: string;
+  userName: string;
+  copyright: string;
+  footerLabel: string;
+  footer: NavLink[];
+};
diff --git a/packages/svelte/ui/src/blocks/delivery-info.svelte b/packages/svelte/ui/src/blocks/delivery-info.svelte
new file mode 100644
index 0000000..074c614
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/delivery-info.svelte
@@ -0,0 +1,120 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/delivery.ts -->
+<!--
+  How delivery works: the facts as icon cards, then the zones with their time and the order that ships free.
+  Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones),
+  tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { DeliveryLabels } from "./delivery-info.types";
+  import type { Feature } from "./feature-grid.types";
+  import type { Zone } from "./zone-table.types";
+
+  export type DeliveryInfoProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    facts: Feature[];
+    zones: Zone[];
+    labels: DeliveryLabels;
+    layout?: "full" | "facts" | "split";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, fmtMoney, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    facts,
+    zones,
+    labels,
+    layout = "full",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: DeliveryInfoProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} lead={lead} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  <Box
+    class={cn(
+      "grid grid-cols-1 gap-8",
+      (((layout as string) === "split") ? "items-start md:grid-cols-2" : "")
+    )}
+  >
+    {#if ((facts?.length ?? 0) > 0)}
+      <Grid cols={(((layout as string) === "split") ? "1-2" : "1-4")} class="gap-4" data-testid="facts">
+        {#each facts as f (f.id)}
+          <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="fact">
+            <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+              <LucideIcon name={f.icon} size={20} />
+            </Box>
+            <Stack gap="2">
+              <Text size="sm" weight="semibold">
+                {f.title}
+              </Text>
+              <Text size="sm" class="text-muted-foreground">
+                {f.text}
+              </Text>
+            </Stack>
+          </Stack>
+        {/each}
+      </Grid>
+    {/if}
+    {#if (((layout as string) !== "facts") && ((zones?.length ?? 0) > 0))}
+      <Stack gap="4" align="stretch">
+        <Title as={3} size="lg" weight="bold">
+          {labels.zones}
+        </Title>
+        <Box
+          class={
+            (layout as string) === "split" ? "flex flex-col gap-4"
+            : "grid grid-cols-1 gap-4 md:grid-cols-3"
+          }
+        >
+          {#each zones as z (z.id)}
+            <Stack
+              gap="2"
+              class={
+                (layout as string) === "split" ? "border-b border-border pb-4"
+                : "rounded bg-card inset-ring inset-ring-border p-6"
+              }
+              data-testid="zone"
+            >
+              <Group gap="4" align="baseline" justify="between">
+                <Text size="sm" weight="semibold">
+                  {z.name}
+                </Text>
+                <Badge variant="secondary" size="default">
+                  {z.time}
+                </Badge>
+              </Group>
+              <Text size="sm" class="text-muted-foreground">
+                {z.area}
+              </Text>
+              <Text size="sm" weight="medium">
+                {tpl(labels.freeFrom, fmtMoney(z.freeFrom, z.currency))}
+              </Text>
+            </Stack>
+          {/each}
+        </Box>
+      </Stack>
+    {/if}
+  </Box>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/delivery-info.types.ts b/packages/svelte/ui/src/blocks/delivery-info.types.ts
new file mode 100644
index 0000000..ab50895
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/delivery-info.types.ts
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type DeliveryLabels = {
+  zones: string;
+  freeFrom: string;
+};
diff --git a/packages/svelte/ui/src/blocks/empty-panel.svelte b/packages/svelte/ui/src/blocks/empty-panel.svelte
new file mode 100644
index 0000000..afdae65
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/empty-panel.svelte
@@ -0,0 +1,92 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain.
+  Axes: layout (card, plain), actions (button, none), size (default, compact).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type EmptyPanelProps = {
+    id: string;
+    title: string;
+    text: string;
+    icon?: string;
+    cta?: string;
+    ctaHref?: string;
+    layout?: "card" | "plain";
+    actions?: "button" | "none";
+    visual?: "icon" | "image";
+    size?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    icon = "inbox",
+    cta,
+    ctaHref,
+    layout = "card",
+    actions = "button",
+    visual = "icon",
+    size = "default",
+    landmarkLabel,
+  }: EmptyPanelProps = $props();
+</script>
+
+<Block tag="section" aria-label={(landmarkLabel ?? title)} data-testid="empty">
+  <Container
+    class={cn("mx-auto w-full max-w-6xl px-4", (((size as string) === "compact") ? "py-4" : "py-8"))}
+    data-slot="container"
+  >
+    {#if ((visual as string) === "image")}
+      <Stack gap="4" align="center" class="mx-auto max-w-md text-center" data-testid="empty-visual">
+        <MediaFrame alt={title} ratio="4/3" class="w-full max-w-xs" />
+        <Title as={2} size="2xl" weight="bold">
+          {title}
+        </Title>
+        <Text size="sm" class="text-muted-foreground">
+          {text}
+        </Text>
+        {#if ((actions as string) === "button")}
+          <Button variant="default" size="sm" href={ctaHref} data-testid="empty-action">
+            {cta}
+          </Button>
+        {/if}
+      </Stack>
+    {:else}
+      <EmptyState
+        icon={icon}
+        title={title}
+        text={text}
+        class={cn(
+          "mx-auto max-w-xl",
+          (((layout as string) === "plain") ? "bg-transparent inset-ring-0" : ""),
+          (((size as string) === "compact") ? "py-6" : "")
+        )}
+      >
+        {#snippet action()}
+          {#if ((actions as string) === "button")}
+            <Button variant="default" size="sm" href={ctaHref} data-testid="empty-action">
+              {cta}
+            </Button>
+          {/if}
+        {/snippet}
+      </EmptyState>
+    {/if}
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/error-page.svelte b/packages/svelte/ui/src/blocks/error-page.svelte
new file mode 100644
index 0000000..0d37931
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/error-page.svelte
@@ -0,0 +1,82 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way
+  back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two),
+  tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { LinkActions } from "./error-page.types";
+
+  export type ErrorPageProps = {
+    id: string;
+    title: string;
+    text: string;
+    status: string;
+    actions: LinkActions;
+    level?: 1 | 2;
+    layout?: "centered" | "split";
+    code?: "show" | "hide";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Text from "../primitives/text/text.svelte";
+  import ActionGroup from "../components/action-group.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    status,
+    actions,
+    level = 1,
+    layout = "centered",
+    code = "show",
+    tone = "default",
+    landmarkLabel,
+  }: ErrorPageProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={text}
+  heading={{ level }}
+  layout={(((layout as string) === "split") ? "split" : "stack")}
+  media={{ show: ((layout as string) === "split") }}
+  align={(((layout as string) === "split") ? "start" : "center")}
+  tone={tone}
+  density="roomy"
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((code as string) === "show")}
+    <Text
+      size="4xl"
+      weight="bold"
+      class={cn(
+        "text-8xl text-muted-foreground",
+        (((layout as string) === "split") ? "" : "text-center")
+      )}
+      data-testid="error-code"
+    >
+      {status}
+    </Text>
+  {/if}
+  <ActionGroup
+    primary={actions.cta}
+    primaryHref={actions.href}
+    secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+    secondaryHref={actions.secondaryHref}
+    align={(((layout as string) === "split") ? "start" : "center")}
+  />
+  {#snippet aside()}
+    <MediaFrame alt={title} ratio="4/3" />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/error-page.types.ts b/packages/svelte/ui/src/blocks/error-page.types.ts
new file mode 100644
index 0000000..e117bb4
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/error-page.types.ts
@@ -0,0 +1,13 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type LinkActions = {
+  /** one or two links */
+  mode?: "one" | "two";
+  /** primary action label */
+  cta: string;
+  /** the address of the primary action; none: a button, not a link */
+  href?: string;
+  secondary?: string;
+  secondaryHref?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/faq-list.svelte b/packages/svelte/ui/src/blocks/faq-list.svelte
new file mode 100644
index 0000000..fdb6a3f
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/faq-list.svelte
@@ -0,0 +1,124 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing.ts -->
+<!--
+  A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without
+  script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search
+  field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters
+  by `filter.category`), density, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Faq, FaqTab, FaqSearch, FaqFilter } from "./faq-list.types";
+
+  export type FaqListProps = {
+    id: string;
+    title: string;
+    items: Faq[];
+    search?: FaqSearch;
+    filter?: FaqFilter;
+    layout?: "accordion" | "chat";
+    cols?: "1" | "2";
+    empty?: string;
+    multiple?: boolean;
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+    onquery?: (text: string) => void;
+    oncategory?: (value: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Disclosure from "../primitives/disclosure/disclosure.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Summary from "../primitives/disclosure/summary.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SearchField from "../components/search-field.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import Switcher from "../components/switcher.svelte";
+  import SwitcherItem from "../components/switcher-item.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    items,
+    search,
+    filter,
+    layout = "accordion",
+    cols = "1",
+    empty = "",
+    multiple = false,
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+    onquery,
+    oncategory,
+  }: FaqListProps = $props();
+  const inCategory = $derived(items.filter((i) => !filter?.category || i["category"] === filter?.category));
+  const shown = $derived(inCategory.filter((i) => !search?.query || String(i["question"]).toLowerCase().includes(String(search?.query).toLowerCase())));
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  tone={tone}
+  density={density}
+  measure={(((layout as string) === "chat") ? "2xl" : "default")}
+  landmarkLabel={landmarkLabel}
+>
+  {#if (search?.mode === "field")}
+    <SearchField
+      label={(search?.label ?? "")}
+      placeholder={search?.label}
+      value={(search?.query ?? "")}
+      onvalue={(arg: string) => onquery?.(arg)}
+    />
+  {/if}
+  {#if (filter?.mode === "categories")}
+    <Switcher label={filter?.label}>
+      {#each filter?.tabs as tab (tab.id)}
+        <SwitcherItem active={(tab.value === filter?.category)} onclick={() => oncategory?.(tab.value)}>
+          {tab.title}
+        </SwitcherItem>
+      {/each}
+    </Switcher>
+  {/if}
+  {#if ((shown?.length ?? 0) === 0)}
+    <EmptyState icon="circle-question-mark" title={empty} />
+  {/if}
+  {#if ((layout as string) === "chat")}
+    <Stack gap="4" align="stretch" data-testid="faq">
+      {#each shown as item (item.id)}
+        <Stack gap="2" align="stretch" data-testid="faq-item">
+          <Box class="ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground">
+            <Text size="sm" weight="semibold">
+              {item.question}
+            </Text>
+          </Box>
+          <Box class="mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4">
+            <Text size="sm">
+              {item.answer}
+            </Text>
+          </Box>
+        </Stack>
+      {/each}
+    </Stack>
+  {:else}
+    <Grid cols={(((cols as string) === "2") ? "1-2" : "1")} class="items-start gap-x-8" data-testid="faq">
+      {#each shown as item (item.id)}
+        <Disclosure variant="item" name={(multiple ? undefined : tpl("{0}-faq", (id ?? "faq")))} data-testid="faq-item">
+          <Summary variant="item">
+            {item.question}
+          </Summary>
+          <Text size="sm" class="pb-4 text-muted-foreground">
+            {item.answer}
+          </Text>
+        </Disclosure>
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/faq-list.types.ts b/packages/svelte/ui/src/blocks/faq-list.types.ts
new file mode 100644
index 0000000..27fd513
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/faq-list.types.ts
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type Faq = {
+  id: string;
+  question: string;
+  answer: string;
+  category?: string;
+};
+
+export type FaqTab = {
+  id: string;
+  title: string;
+  value: string;
+};
+
+export type FaqSearch = {
+  /** field: a search field above the questions */
+  mode?: "none" | "field";
+  /** accessible name and placeholder of the search field */
+  label?: string;
+  /** the text the questions are filtered by */
+  query?: string;
+};
+
+export type FaqFilter = {
+  /** categories: tabs above the questions */
+  mode?: "none" | "categories";
+  /** the category tabs */
+  tabs?: FaqTab[];
+  /** accessible name of the tabs */
+  label?: string;
+  /** the value of the chosen tab */
+  category?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/faq-split.svelte b/packages/svelte/ui/src/blocks/faq-split.svelte
new file mode 100644
index 0000000..d4f0aa4
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/faq-split.svelte
@@ -0,0 +1,142 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/faq-split.ts -->
+<!--
+  Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside:
+  the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder
+  beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Question, FaqSplitLabels } from "./faq-split.types";
+  import type { Feature } from "./feature-grid.types";
+  import type { FaqTab } from "./faq-list.types";
+
+  export type FaqSplitProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    items: Question[];
+    channels: Feature[];
+    topics: FaqTab[];
+    labels: FaqSplitLabels;
+    layout?: "head" | "aside" | "media" | "search" | "cards";
+    cards?: "grid3" | "grid4" | "icons";
+    mediaSide?: "end" | "start";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import FaqCards from "../components/faq-cards.svelte";
+  import FaqDisclosures from "../components/faq-disclosures.svelte";
+  import FaqFinder from "../components/faq-finder.svelte";
+  import FaqHelp from "../components/faq-help.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    items,
+    channels,
+    topics,
+    labels,
+    layout = "head",
+    cards = "grid3",
+    mediaSide = "end",
+    tone = "default",
+    landmarkLabel,
+  }: FaqSplitProps = $props();
+</script>
+
+{#if ((items?.length ?? 0) > 0)}
+  {#if ((layout as string) === "cards")}
+    <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+      <FaqCards items={items} labels={labels} cards={cards} />
+    </SectionFrame>
+  {/if}
+  {#if ((layout as string) === "head")}
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge }}
+      tone={tone}
+      layout="split"
+      media={{ show: true, side: "end", align: "start" }}
+      landmarkLabel={landmarkLabel}
+    >
+      <Box>
+        <Button variant="default" size="default" data-testid="faq-cta">
+          {labels.cta}
+        </Button>
+      </Box>
+      {#snippet aside()}
+        <FaqDisclosures items={items} name={tpl("{0}-faq", id)} />
+      {/snippet}
+    </SectionFrame>
+  {/if}
+  {#if ((layout as string) === "aside")}
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge }}
+      tone={tone}
+      layout="split"
+      media={{ show: true, side: "end", align: "start" }}
+      landmarkLabel={landmarkLabel}
+    >
+      <FaqDisclosures items={items} name={tpl("{0}-faq", id)} />
+      {#snippet aside()}
+        <FaqHelp labels={labels} channels={channels} landmarkLabel={landmarkLabel} />
+      {/snippet}
+    </SectionFrame>
+  {/if}
+  {#if ((layout as string) === "media")}
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge }}
+      tone={tone}
+      layout="split"
+      media={{ show: true, side: mediaSide, align: "start" }}
+      landmarkLabel={landmarkLabel}
+    >
+      <FaqDisclosures items={items} name={tpl("{0}-faq", id)} />
+      <Box>
+        <Button variant="default" size="default" data-testid="faq-cta">
+          {labels.cta}
+        </Button>
+      </Box>
+      {#snippet aside()}
+        <MediaFrame alt={title} ratio="4/3" />
+      {/snippet}
+    </SectionFrame>
+  {/if}
+  {#if ((layout as string) === "search")}
+    <SectionFrame
+      id={id}
+      title={title}
+      lead={lead}
+      heading={{ badge }}
+      tone={tone}
+      layout="split"
+      media={{ show: true, side: mediaSide }}
+      landmarkLabel={landmarkLabel}
+    >
+      <FaqFinder items={items} labels={labels} topics={topics} />
+      {#snippet aside()}
+        <MediaFrame alt={title} ratio="4/3" />
+      {/snippet}
+    </SectionFrame>
+  {/if}
+{/if}
diff --git a/packages/svelte/ui/src/blocks/faq-split.types.ts b/packages/svelte/ui/src/blocks/faq-split.types.ts
new file mode 100644
index 0000000..626adfc
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/faq-split.types.ts
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/faq-split.ts
+
+export type Question = {
+  id: string;
+  question: string;
+  answer: string;
+  category: string;
+  icon: string;
+  href?: string;
+};
+
+export type FaqSplitLabels = {
+  cta: string;
+  more: string;
+  asideTitle: string;
+  asideText: string;
+  asideCta: string;
+  search: string;
+  popular: string;
+  query?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/feature-accordion.svelte b/packages/svelte/ui/src/blocks/feature-accordion.svelte
new file mode 100644
index 0000000..8f0cf2e
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/feature-accordion.svelte
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the
+  first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "./feature-grid.types";
+
+  export type FeatureAccordionProps = {
+    id: string;
+    title: string;
+    features: Feature[];
+    empty?: string;
+    expand?: "first" | "none";
+    media?: "none" | "image";
+    multiple?: boolean;
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Disclosure from "../primitives/disclosure/disclosure.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Summary from "../primitives/disclosure/summary.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    features,
+    empty = "",
+    expand = "first",
+    media = "none",
+    multiple = false,
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: FeatureAccordionProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  tone={tone}
+  density={density}
+  layout={(((media as string) === "image") ? "split" : "stack")}
+  media={{ show: ((media as string) === "image") }}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((features?.length ?? 0) === 0)}
+    <EmptyState icon="layout-grid" title={empty} />
+  {:else}
+    <Stack gap="0" align="stretch" data-testid="items">
+      {#each features as f, i (f.id)}
+        <Disclosure
+          variant="item"
+          name={(multiple ? undefined : tpl("{0}-accordion", (id ?? "accordion")))}
+          open={(((expand as string) === "first") && (i === 0))}
+          data-testid="item"
+        >
+          <Summary variant="item">
+            <Inline class="flex min-w-0 items-center justify-start gap-4">
+              <LucideIcon name={f.icon} size={20} />
+              <Inline class="text-base font-semibold">
+                {f.title}
+              </Inline>
+            </Inline>
+          </Summary>
+          <Text size="sm" class="pb-4 text-muted-foreground">
+            {f.text}
+          </Text>
+        </Disclosure>
+      {/each}
+    </Stack>
+  {/if}
+  {#snippet aside()}
+    <MediaFrame alt={title} ratio="4/3" />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/feature-grid.svelte b/packages/svelte/ui/src/blocks/feature-grid.svelte
new file mode 100644
index 0000000..81dd428
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/feature-grid.svelte
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/site.ts -->
+<!--
+  A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are
+  Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon),
+  media side (rows), density, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "./feature-grid.types";
+  import type { HeadLink } from "../components/section-frame.types";
+
+  export type FeatureGridProps = {
+    id: string;
+    title: string;
+    features: Feature[];
+    empty?: string;
+    action?: HeadLink;
+    layout?: "grid" | "rows";
+    cols?: "1-2" | "1-3" | "1-4";
+    item?: "card" | "tile" | "cell";
+    mediaSide?: "end" | "start" | "alternate";
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import FeatureCards from "../components/feature-cards.svelte";
+  import FeatureRows from "../components/feature-rows.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    features,
+    empty = "",
+    action,
+    layout = "grid",
+    cols = "1-3",
+    item = "card",
+    mediaSide = "end",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: FeatureGridProps = $props();
+</script>
+
+{#if ((item as string) === "cell")}
+  <SectionFrame id={id} tone={tone} density={density} measure="fill" class="py-0" landmarkLabel={landmarkLabel}>
+    <Group gap="4" align="center" justify="between" class="w-full">
+      <Title as={2} size="sm" weight="semibold" class="leading-7" id={(id + "-title")}>
+        {title}
+      </Title>
+      {#if (action?.label && action?.href)}
+        <Link
+          href={action?.href}
+          variant="default"
+          class={cn(defaults.text.tiny, "shrink-0 font-medium leading-5")}
+          data-testid="section-action"
+        >
+          {action?.label}
+        </Link>
+      {/if}
+    </Group>
+    {#if ((features?.length ?? 0) === 0)}
+      <EmptyState icon="layout-grid" title={empty} />
+    {:else}
+      <FeatureCards features={features} cols={cols} item={item} />
+    {/if}
+  </SectionFrame>
+{:else}
+  <SectionFrame id={id} title={title} action={action} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+    {#if ((features?.length ?? 0) === 0)}
+      <EmptyState icon="layout-grid" title={empty} />
+    {:else if ((layout as string) === "rows")}
+      <FeatureRows features={features} mediaSide={mediaSide} />
+    {:else}
+      <FeatureCards features={features} cols={cols} item={item} />
+    {/if}
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/feature-grid.types.ts b/packages/svelte/ui/src/blocks/feature-grid.types.ts
new file mode 100644
index 0000000..e60c78e
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/feature-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type Feature = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  href?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/feature-showcase.svelte b/packages/svelte/ui/src/blocks/feature-showcase.svelte
new file mode 100644
index 0000000..584187d
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/feature-showcase.svelte
@@ -0,0 +1,92 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/feature-showcase.ts -->
+<!--
+  Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text
+  and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4),
+  tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "./feature-grid.types";
+
+  export type FeatureShowcaseProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    features: Feature[];
+    empty?: string;
+    more: string;
+    item?: "picture" | "panel";
+    cols?: "3" | "4";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Card from "../primitives/card/card.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    features,
+    empty = "",
+    more,
+    item = "picture",
+    cols = "3",
+    tone = "default",
+    landmarkLabel,
+  }: FeatureShowcaseProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} lead={lead} tone={tone} align="center" landmarkLabel={landmarkLabel}>
+  {#if ((features?.length ?? 0) === 0)}
+    <EmptyState icon="layout-grid" title={empty} />
+  {:else}
+    <Box
+      class={
+        (cols as string) === "4" ? "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4"
+        : "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3"
+      }
+    >
+      {#each features as f (f.id)}
+        <Card variant="default" class="h-full gap-4 overflow-hidden" data-testid="showcase-card">
+          {#if ((item as string) === "picture")}
+            <MediaFrame alt={f.title} />
+          {:else}
+            <Box
+              class="flex aspect-video items-center justify-center rounded bg-muted text-foreground"
+              data-testid="showcase-panel"
+            >
+              <LucideIcon name={f.icon} size={32} />
+            </Box>
+          {/if}
+          <CardContent class="flex flex-1 flex-col gap-2">
+            <Title as={3} size="base" weight="semibold">
+              {f.title}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {f.text}
+            </Text>
+            {#if ((item as string) === "picture")}
+              <MenuEntry href={f.href} class="mt-auto gap-2 pt-2 text-sm font-medium" size="sm" testid="read">
+                {more}
+                <LucideIcon name="arrow-right" size={16} />
+              </MenuEntry>
+            {/if}
+          </CardContent>
+        </Card>
+      {/each}
+    </Box>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/feature-split.svelte b/packages/svelte/ui/src/blocks/feature-split.svelte
new file mode 100644
index 0000000..701f0b0
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/feature-split.svelte
@@ -0,0 +1,96 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/feature-split.ts -->
+<!--
+  Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as
+  cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four
+  metric cards and the actions), mediaSide, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "./feature-grid.types";
+  import type { Stat } from "./stats-band.types";
+  import type { LinkActions } from "./error-page.types";
+
+  export type FeatureSplitProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    level?: 1 | 2;
+    features: Feature[];
+    stats: Stat[];
+    actions: LinkActions;
+    layout?: "grid" | "cards" | "stats" | "metrics";
+    mediaSide?: "end" | "start";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import ActionGroup from "../components/action-group.svelte";
+  import FeatureCards from "../components/feature-cards.svelte";
+  import FeatureMetricCards from "../components/feature-metric-cards.svelte";
+  import FeaturePairs from "../components/feature-pairs.svelte";
+  import FeatureStatRows from "../components/feature-stat-rows.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    level = 2,
+    features,
+    stats,
+    actions,
+    layout = "grid",
+    mediaSide = "end",
+    tone = "default",
+    landmarkLabel,
+  }: FeatureSplitProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  heading={{ badge, level }}
+  tone={tone}
+  layout="split"
+  media={{ show: true, side: mediaSide }}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((layout as string) === "grid")}
+    {#if ((features?.length ?? 0) > 0)}
+      <FeaturePairs features={features} />
+    {/if}
+  {/if}
+  {#if ((layout as string) === "cards")}
+    {#if ((features?.length ?? 0) > 0)}
+      <FeatureCards features={features} cols="1-2" item="tile" />
+    {/if}
+  {/if}
+  {#if ((layout as string) === "stats")}
+    {#if ((features?.length ?? 0) > 0)}
+      <FeatureStatRows features={features} stats={stats} />
+    {/if}
+  {/if}
+  {#if ((layout as string) === "metrics")}
+    {#if ((stats?.length ?? 0) > 0)}
+      <FeatureMetricCards stats={stats} />
+    {/if}
+  {/if}
+  {#if (((layout as string) === "cards") || ((layout as string) === "metrics"))}
+    <ActionGroup
+      primary={actions.cta}
+      primaryHref={actions.href}
+      secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+      secondaryHref={actions.secondaryHref}
+    />
+  {/if}
+  {#snippet aside()}
+    <MediaFrame alt={title} ratio={(((layout as string) === "stats") ? "1/1" : "4/3")} />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/feature-sticky.svelte b/packages/svelte/ui/src/blocks/feature-sticky.svelte
new file mode 100644
index 0000000..3b6d8be
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/feature-sticky.svelte
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description
+  that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item
+  (plain, card), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "./feature-grid.types";
+
+  export type FeatureStickyProps = {
+    id: string;
+    title: string;
+    features: Feature[];
+    empty?: string;
+    active?: string;
+    mediaSide?: "end" | "start";
+    item?: "plain" | "card";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    features,
+    empty = "",
+    active = "",
+    mediaSide = "end",
+    item = "plain",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: FeatureStickyProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((features?.length ?? 0) === 0)}
+    <EmptyState icon="layout-grid" title={empty} />
+  {:else}
+    <Grid cols="1-2" class="items-start gap-8" data-testid="sticky">
+      <Box
+        class={cn(
+          "md:sticky md:top-8",
+          (((mediaSide as string) === "start") ? "md:order-first" : "md:order-last")
+        )}
+        data-testid="sticky-media"
+      >
+        <MediaFrame alt={title} ratio="4/3" />
+      </Box>
+      <Stack gap={(((density as string) === "compact") ? "4" : "8")} align="stretch" data-testid="items">
+        {#each features as f (f.id)}
+          <Stack
+            gap="2"
+            class={cn(
+              (((item as string) === "card") ? "rounded bg-card inset-ring inset-ring-border p-6" : "py-4"),
+              ((f.id === active) ? "inset-ring inset-ring-foreground" : "")
+            )}
+            data-testid="item"
+            aria-current={((f.id === active) ? "true" : undefined)}
+          >
+            <LucideIcon name={f.icon} size={24} />
+            <Title as={3} size="2xl" weight="bold">
+              {f.title}
+            </Title>
+            <Text size="base" class="text-muted-foreground">
+              {f.text}
+            </Text>
+          </Stack>
+        {/each}
+      </Stack>
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/feature-tabs.svelte b/packages/svelte/ui/src/blocks/feature-tabs.svelte
new file mode 100644
index 0000000..0663773
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/feature-tabs.svelte
@@ -0,0 +1,92 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab
+  (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the
+  picture, stack: picture below), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "./feature-grid.types";
+
+  export type FeatureTabsProps = {
+    id: string;
+    title: string;
+    features: Feature[];
+    empty?: string;
+    tabsLabel: string;
+    active?: string;
+    panel?: "split" | "stack";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+    onselect?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Grid from "../primitives/grid/grid.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import Switcher from "../components/switcher.svelte";
+  import SwitcherItem from "../components/switcher-item.svelte";
+
+  let {
+    id,
+    title,
+    features,
+    empty = "",
+    tabsLabel,
+    active = "",
+    panel = "split",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+    onselect,
+  }: FeatureTabsProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((features?.length ?? 0) === 0)}
+    <EmptyState icon="layout-grid" title={empty} />
+  {:else}
+    <Stack gap="6" align="stretch">
+      <Switcher label={tabsLabel} class="w-fit max-w-full flex-wrap">
+        {#each features as f, i (f.id)}
+          <SwitcherItem
+            active={((f.id === active) || (((active as string) === "") && (i === 0)))}
+            onclick={() => onselect?.(f.id)}
+          >
+            {f.title}
+          </SwitcherItem>
+        {/each}
+      </Switcher>
+      {#each features as f, i (f.id)}
+        {#if ((f.id === active) || (((active as string) === "") && (i === 0)))}
+          <Grid
+            cols={(((panel as string) === "split") ? "1-2" : "1")}
+            class="items-center gap-8"
+            data-testid="tab-panel"
+            role="tabpanel"
+          >
+            <Stack gap="4">
+              <LucideIcon name={f.icon} size={24} />
+              <Title as={3} size="2xl" weight="bold">
+                {f.title}
+              </Title>
+              <Text size="base" class="text-muted-foreground">
+                {f.text}
+              </Text>
+            </Stack>
+            <MediaFrame alt={f.title} ratio="4/3" />
+          </Grid>
+        {/if}
+      {/each}
+    </Stack>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/footer-split.svelte b/packages/svelte/ui/src/blocks/footer-split.svelte
new file mode 100644
index 0000000..774a57d
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/footer-split.svelte
@@ -0,0 +1,144 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/footer-split.ts -->
+<!--
+  A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the
+  link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand
+  and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two
+  actions, or the community channels and figures), mediaSide, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { FooterExtras, FooterSplitLabels } from "./footer-split.types";
+  import type { MegaGroup } from "./mega-menu.types";
+  import type { Stat } from "./stats-band.types";
+  import type { Feature } from "./feature-grid.types";
+
+  export type FooterSplitProps = {
+    id?: string;
+    label: string;
+    brand: string;
+    tagline: string;
+    copyright: string;
+    groups: MegaGroup[];
+    extras: FooterExtras;
+    labels: FooterSplitLabels;
+    layout?: "stats" | "points" | "links" | "newsletter" | "contacts" | "channels";
+    mediaSide?: "end" | "start";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import ActionGroup from "../components/action-group.svelte";
+  import FooterBrand from "../components/footer-brand.svelte";
+  import FooterChannels from "../components/footer-channels.svelte";
+  import FooterContacts from "../components/footer-contacts.svelte";
+  import FooterFigures from "../components/footer-figures.svelte";
+  import FooterGroupCards from "../components/footer-group-cards.svelte";
+  import FooterLinkColumns from "../components/footer-link-columns.svelte";
+  import FooterPoints from "../components/footer-points.svelte";
+  import FooterSignupCard from "../components/footer-signup-card.svelte";
+  import FooterSitemap from "../components/footer-sitemap.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id = "footer",
+    label,
+    brand,
+    tagline,
+    copyright,
+    groups,
+    extras,
+    labels,
+    layout = "stats",
+    mediaSide = "end",
+    tone = "default",
+    landmarkLabel,
+  }: FooterSplitProps = $props();
+</script>
+
+<Block
+  tag="footer"
+  class={cn("border-t border-border", (((tone as string) === "muted") ? "bg-muted" : ""))}
+  data-testid="footer-split"
+  data-layout={layout}
+  aria-label={landmarkLabel}
+>
+  <Container class={cn("mx-auto w-full max-w-6xl px-4", "py-12")} data-slot="container">
+    {#if ((layout as string) === "stats")}
+      <Stack gap="8" align="stretch">
+        <Group gap="6" align="start" justify="between" class="flex-wrap">
+          <Stack gap="6" align="start">
+            <FooterBrand brand={brand} tagline={tagline} />
+            <FooterFigures extras={extras} />
+          </Stack>
+          <FooterSitemap href={extras.sitemapHref} label={labels.sitemap} />
+        </Group>
+        <FooterGroupCards label={label} groups={groups} landmarkLabel={landmarkLabel} />
+        <Box class="border-t border-border pt-6">
+          <Text size="sm" class="text-muted-foreground">
+            {copyright}
+          </Text>
+        </Box>
+      </Stack>
+    {:else}
+      <Box class="grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
+        {#if ((mediaSide as string) === "start")}
+          <MediaFrame alt={brand} ratio="4/3" />
+        {/if}
+        <Stack gap="8" align="stretch">
+          {#if (((layout as string) === "points") || ((layout as string) === "links"))}
+            <FooterBrand brand={brand} tagline={tagline} />
+          {:else}
+            <Stack gap="2" align="start">
+              <Text size="xl" weight="bold">
+                {(((layout as string) === "newsletter") ? labels.loopTitle : (((layout as string) === "channels") ? labels.joinTitle : labels.title))}
+              </Text>
+              <Text size="sm" class="text-muted-foreground">
+                {(((layout as string) === "newsletter") ? labels.loopText : (((layout as string) === "channels") ? labels.joinText : labels.text))}
+              </Text>
+            </Stack>
+          {/if}
+          {#if ((layout as string) === "points")}
+            <FooterPoints extras={extras} title={labels.points} />
+          {/if}
+          {#if ((layout as string) === "newsletter")}
+            <FooterSignupCard id={id} labels={labels} />
+          {/if}
+          {#if (((layout as string) === "links") || ((layout as string) === "newsletter"))}
+            <FooterLinkColumns label={label} groups={groups} landmarkLabel={landmarkLabel} />
+          {/if}
+          {#if ((layout as string) === "contacts")}
+            <FooterContacts extras={extras} />
+            <ActionGroup
+              primary={labels.cta}
+              primaryHref={extras.ctaHref}
+              secondary={labels.secondary}
+              secondaryHref={extras.secondaryHref}
+            />
+          {/if}
+          {#if ((layout as string) === "channels")}
+            <FooterChannels extras={extras} />
+            <FooterFigures extras={extras} />
+          {/if}
+          <Box class="border-t border-border pt-6">
+            <Text size="sm" class="text-muted-foreground">
+              {copyright}
+            </Text>
+          </Box>
+        </Stack>
+        {#if ((mediaSide as string) !== "start")}
+          <MediaFrame alt={brand} ratio="4/3" />
+        {/if}
+      </Box>
+    {/if}
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/footer-split.types.ts b/packages/svelte/ui/src/blocks/footer-split.types.ts
new file mode 100644
index 0000000..031f2fc
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/footer-split.types.ts
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/footer-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type FooterExtras = {
+  stats: Stat[];
+  points: Feature[];
+  contacts: Feature[];
+  channels: Feature[];
+  sitemapHref?: string;
+  ctaHref?: string;
+  secondaryHref?: string;
+};
+
+export type FooterSplitLabels = {
+  title: string;
+  text: string;
+  loopTitle: string;
+  loopText: string;
+  joinTitle: string;
+  joinText: string;
+  sitemap: string;
+  points: string;
+  signup: string;
+  email: string;
+  subscribe: string;
+  note: string;
+  cta: string;
+  secondary: string;
+};
diff --git a/packages/svelte/ui/src/blocks/hero-classic.svelte b/packages/svelte/ui/src/blocks/hero-classic.svelte
new file mode 100644
index 0000000..076a960
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/hero-classic.svelte
@@ -0,0 +1,142 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing-hero.ts -->
+<!--
+  The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster).
+  Axes: layout, media kind and side, scale, tone, density, actions mode.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HeroMedia } from "./hero-classic.types";
+  import type { ActionSet } from "../components/cta-actions.types";
+  import type { CodeLine } from "../components/code-window.types";
+  import type { Topic } from "../components/topic-chips.types";
+
+  export type HeroClassicProps = {
+    id: string;
+    title: string;
+    text: string;
+    level?: 1 | 2;
+    badge?: string;
+    topics?: Topic[];
+    actions?: ActionSet;
+    media?: HeroMedia;
+    layout?: "centered" | "split";
+    scale?: "default" | "display";
+    tone?: "default" | "muted" | "inverse";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import ActionGroup from "../components/action-group.svelte";
+  import Backdrop from "../components/backdrop.svelte";
+  import CodeWindow from "../components/code-window.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import TopicChips from "../components/topic-chips.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    level = 1,
+    badge,
+    topics,
+    actions,
+    media,
+    layout = "centered",
+    scale = "default",
+    tone = "default",
+    density = "roomy",
+    landmarkLabel,
+  }: HeroClassicProps = $props();
+  const mediaKind = $derived(media?.kind ?? "none");
+  const mediaSide = $derived(media?.side ?? "end");
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={text}
+  heading={{ level, scale, badge }}
+  layout={(((layout as string) === "split") ? "split" : "stack")}
+  align={(((layout as string) === "split") ? "start" : "center")}
+  media={{
+    show: (((mediaKind as string) === "image") || ((mediaKind as string) === "code") || ((mediaKind as string) === "cluster")),
+    side: mediaSide,
+  }}
+  tone={tone}
+  density={density}
+  class={
+    (((mediaKind as string) === "backdrop") ? "image" : "none") === "image" ? "relative isolate overflow-hidden"
+    : ""
+  }
+  landmarkLabel={landmarkLabel}
+>
+  <Backdrop kind={(((mediaKind as string) === "backdrop") ? "image" : "none")} alt={title} />
+  {#if actions?.cta}
+    {#if (actions?.mode === "form")}
+      <Box
+        class={cn("w-full max-w-xl", (((layout as string) === "centered") ? "mx-auto" : ""))}
+        data-testid="email-form"
+      >
+        <Label for={tpl("{0}-email", id)} class="sr-only">
+          {actions?.emailLabel}
+        </Label>
+        <Group gap="2" align="start" class="w-full flex-wrap">
+          <Input
+            type="text"
+            name="prompt"
+            class="min-w-0 flex-1"
+            placeholder={actions?.emailLabel}
+            id={tpl("{0}-email", id)}
+            data-testid="field"
+          />
+          <Button variant="default" size="default" href={actions?.href} data-testid="submit">
+            {actions?.cta}
+          </Button>
+        </Group>
+      </Box>
+    {:else}
+      <ActionGroup
+        primary={actions?.cta}
+        primaryHref={actions?.href}
+        secondary={((actions?.mode === "two") ? actions?.secondary : undefined)}
+        secondaryHref={actions?.secondaryHref}
+        align={(((layout as string) === "centered") ? "center" : "start")}
+      />
+    {/if}
+  {/if}
+  {#if (topics && ((topics?.length ?? 0) > 0))}
+    <TopicChips topics={topics} />
+  {/if}
+  {#snippet aside()}
+    {#if (((mediaKind as string) === "code") && media?.lines && ((media?.lines?.length ?? 0) > 0) && media?.codeTitle && media?.prompt)}
+      <CodeWindow title={media?.codeTitle} prompt={media?.prompt} lines={media?.lines} />
+    {/if}
+    {#if ((mediaKind as string) === "cluster")}
+      <Grid cols="3" class="items-end gap-4" data-testid="cluster">
+        <Box class={cn("w-full", "")}>
+          <MediaFrame alt={title} ratio="3/4" />
+        </Box>
+        <Box class={cn("w-full", "-translate-y-4")}>
+          <MediaFrame alt={title} ratio="4/3" />
+        </Box>
+        <Box class={cn("w-full", "")}>
+          <MediaFrame alt={title} ratio="3/4" />
+        </Box>
+      </Grid>
+    {/if}
+    {#if (((mediaKind as string) === "image"))}
+      <MediaFrame alt={title} ratio="4/3" />
+    {/if}
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/hero-classic.types.ts b/packages/svelte/ui/src/blocks/hero-classic.types.ts
new file mode 100644
index 0000000..dd95f46
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/hero-classic.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+
+import type { CodeLine } from "../components/code-window.types";
+
+export type HeroMedia = {
+  /** what the hero shows besides the text */
+  kind?: "none" | "image" | "backdrop" | "code" | "cluster";
+  /** side of the media in the split layout */
+  side?: "end" | "start";
+  /** title of the code window */
+  codeTitle?: string;
+  /** prompt line of the code window */
+  prompt?: string;
+  /** lines of the code window */
+  lines?: CodeLine[];
+};
diff --git a/packages/svelte/ui/src/blocks/hero-prompt.svelte b/packages/svelte/ui/src/blocks/hero-prompt.svelte
new file mode 100644
index 0000000..aa4f098
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/hero-prompt.svelte
@@ -0,0 +1,115 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing-hero.ts -->
+<!--
+  A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic
+  pills.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HeroComposer, HeroNav } from "./hero-prompt.types";
+  import type { ActionSet } from "../components/cta-actions.types";
+  import type { NavLink } from "./nav-bar.types";
+  import type { Topic } from "../components/topic-chips.types";
+
+  export type HeroPromptProps = {
+    title: string;
+    level?: 1 | 2;
+    badge?: string;
+    badgeMark?: string;
+    actions?: ActionSet;
+    composer?: HeroComposer;
+    nav?: HeroNav;
+    topics?: Topic[];
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import ActionGroup from "../components/action-group.svelte";
+  import HeroBadge from "../components/hero-badge.svelte";
+  import HeroHead from "../components/hero-head.svelte";
+  import PromptComposer from "../components/prompt-composer.svelte";
+  import TopicChips from "../components/topic-chips.svelte";
+  import WeightedTitle from "../components/weighted-title.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let {
+    title,
+    level = 1,
+    badge,
+    badgeMark,
+    actions,
+    composer,
+    nav,
+    topics,
+    density = "roomy",
+    landmarkLabel,
+  }: HeroPromptProps = $props();
+</script>
+
+<Block
+  tag="section"
+  class={cn(
+    "flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70",
+    defaults.hero.band
+  )}
+  aria-labelledby={(landmarkLabel ? undefined : "home-hero-title")}
+  data-testid="section"
+  data-tone="inverse"
+  data-density={density}
+  data-chrome="nav"
+  aria-label={landmarkLabel}
+>
+  <Container class={cn("mx-auto w-full px-8", defaults.hero.container)} data-slot="container">
+    <Stack gap="0" align="stretch">
+      <HeroHead
+        brand={nav?.brand}
+        links={nav?.links}
+        current={nav?.current}
+        login={nav?.login}
+        loginHref={nav?.loginHref}
+        skip={nav?.skip}
+        navLabel={nav?.label}
+        cta={actions?.cta}
+        href={actions?.href}
+        landmarkLabel={landmarkLabel}
+      />
+      <Stack
+        gap="0"
+        align="center"
+        class={cn("mx-auto w-full pt-24 pb-16", defaults.hero.column)}
+        data-testid="hero-column"
+      >
+        {#if badge}
+          <HeroBadge label={badge} mark={badgeMark} />
+        {/if}
+        <WeightedTitle id="home-hero-title" title={title} weights={defaults.hero.titleWeights} level={level} />
+        {#if (actions?.mode === "form")}
+          <PromptComposer
+            label={actions?.emailLabel}
+            attachLabel={composer?.attachLabel}
+            modelLabel={composer?.modelLabel}
+            send={actions?.cta}
+            href={actions?.href}
+          />
+        {:else if actions?.cta}
+          <ActionGroup
+            primary={actions?.cta}
+            primaryHref={actions?.href}
+            secondary={((actions?.mode === "two") ? actions?.secondary : undefined)}
+            secondaryHref={actions?.secondaryHref}
+            align={(true ? "center" : "start")}
+          />
+        {/if}
+        {#if (topics && ((topics?.length ?? 0) > 0))}
+          <TopicChips topics={topics} tone="inverse" />
+        {/if}
+      </Stack>
+    </Stack>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/hero-prompt.types.ts b/packages/svelte/ui/src/blocks/hero-prompt.types.ts
new file mode 100644
index 0000000..816d54f
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/hero-prompt.types.ts
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type HeroComposer = {
+  /** attachment chip label */
+  attachLabel?: string;
+  /** model pill label */
+  modelLabel?: string;
+};
+
+export type HeroNav = {
+  /** brand word of the head row */
+  brand?: string;
+  /** menu links of the head row */
+  links?: NavLink[];
+  /** id of the current link */
+  current?: string;
+  login?: string;
+  loginHref?: string;
+  /** skip link text */
+  skip?: string;
+  /** accessible name of the menu */
+  label?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/hero-split.svelte b/packages/svelte/ui/src/blocks/hero-split.svelte
new file mode 100644
index 0000000..80910e8
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/hero-split.svelte
@@ -0,0 +1,77 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/hero-split.ts -->
+<!--
+  A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes:
+  extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote
+  over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with
+  captions, plans: two plan cards on the picture), mediaSide, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HeroContent } from "./hero-split.types";
+  import type { Stat } from "./stats-band.types";
+  import type { Feature } from "./feature-grid.types";
+  import type { Quote } from "./testimonial-grid.types";
+  import type { OfferCard } from "./store-hero.types";
+  import type { Plan } from "./pricing-card.types";
+  import type { LinkActions } from "./error-page.types";
+
+  export type HeroSplitProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    level?: 1 | 2;
+    actions: LinkActions;
+    content: HeroContent;
+    extra?: "stats" | "avatars" | "minis" | "quote" | "none";
+    media?: "picture" | "card" | "grid" | "plans";
+    mediaSide?: "end" | "start";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import ActionGroup from "../components/action-group.svelte";
+  import HeroSplitExtras from "../components/hero-split-extras.svelte";
+  import HeroSplitMedia from "../components/hero-split-media.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    level = 1,
+    actions,
+    content,
+    extra = "stats",
+    media = "picture",
+    mediaSide = "end",
+    tone = "default",
+    landmarkLabel,
+  }: HeroSplitProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  heading={{ badge, level }}
+  layout="split"
+  media={{ show: true, side: mediaSide }}
+  tone={tone}
+  landmarkLabel={landmarkLabel}
+>
+  <HeroSplitExtras content={content} extra={extra} />
+  <ActionGroup
+    primary={actions.cta}
+    primaryHref={actions.href}
+    secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+    secondaryHref={actions.secondaryHref}
+  />
+  {#snippet aside()}
+    <HeroSplitMedia content={content} alt={title} media={media} />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/hero-split.types.ts b/packages/svelte/ui/src/blocks/hero-split.types.ts
new file mode 100644
index 0000000..6216eb8
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/hero-split.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/hero-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+import type { Quote } from "./testimonial-grid.types";
+import type { OfferCard } from "./store-hero.types";
+import type { Plan } from "./pricing-card.types";
+
+export type HeroContent = {
+  stats: Stat[];
+  features: Feature[];
+  people: Quote[];
+  plans: Plan[];
+  proof: string;
+  card: OfferCard;
+};
diff --git a/packages/svelte/ui/src/blocks/icon-wall.svelte b/packages/svelte/ui/src/blocks/icon-wall.svelte
new file mode 100644
index 0000000..534c71d
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/icon-wall.svelte
@@ -0,0 +1,79 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the
+  label, chip: icon beside it), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "./feature-grid.types";
+
+  export type IconWallProps = {
+    id: string;
+    title: string;
+    features: Feature[];
+    empty?: string;
+    cols?: "3" | "4" | "6";
+    item?: "tile" | "chip";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, fitCols } from "../utils";
+
+  let {
+    id,
+    title,
+    features,
+    empty = "",
+    cols = "4",
+    item = "tile",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: IconWallProps = $props();
+  const askedCols = $derived(
+    ((item as string) === "chip") && ((cols as string) === "6") ? "2-6"
+    : (cols as string) === "2" ? "2"
+    : (cols as string) === "3" ? "2-3"
+    : (cols as string) === "4" ? "2-4"
+    : "3-6"
+  );
+  const wallCols = $derived(fitCols(askedCols, (features?.length ?? 0)));
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((features?.length ?? 0) === 0)}
+    <EmptyState icon="layout-grid" title={empty} />
+  {:else}
+    <Grid cols={wallCols} class="gap-4" data-testid="items">
+      {#each features as f (f.id)}
+        <Box
+          class={cn(
+            "flex items-center gap-2",
+            "rounded bg-card inset-ring inset-ring-border",
+            (
+              (item as string) === "tile" ? cn("flex-col justify-center text-center", (((density as string) === "compact") ? "p-4" : "p-6"))
+              : "px-4 py-2"
+            )
+          )}
+          data-testid="item"
+        >
+          <LucideIcon name={f.icon} size={(((item as string) === "tile") ? 24 : 16)} />
+          <Text size="sm" weight="semibold">
+            {f.title}
+          </Text>
+        </Box>
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/job-board.svelte b/packages/svelte/ui/src/blocks/job-board.svelte
new file mode 100644
index 0000000..7bca393
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/job-board.svelte
@@ -0,0 +1,104 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/people.ts -->
+<!--
+  Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place,
+  the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide),
+  tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Job, Department, JobLabels } from "./job-board.types";
+
+  export type JobBoardProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    jobs: Job[];
+    departments: Department[];
+    labels: JobLabels;
+    layout?: "grid" | "grouped" | "table";
+    salary?: "show" | "hide";
+    tone?: "default" | "muted";
+    empty?: string;
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import JobCards from "../components/job-cards.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    jobs,
+    departments,
+    labels,
+    layout = "grid",
+    salary = "hide",
+    tone = "default",
+    empty = "",
+    landmarkLabel,
+  }: JobBoardProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  tone={tone}
+  measure={(((layout as string) === "grouped") ? "3xl" : "default")}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((jobs?.length ?? 0) === 0)}
+    <EmptyState icon="briefcase" title={empty} />
+  {:else if ((layout as string) === "grouped")}
+    <Stack gap="8" align="stretch" data-testid="groups">
+      {#each departments as d (d.id)}
+        <Stack gap="2" align="stretch" data-testid="group">
+          <Group gap="4" align="baseline" justify="between">
+            <Title as={3} size="lg" weight="bold">
+              {d.name}
+            </Title>
+            <Text size="xs" class="text-muted-foreground">
+              {tpl(labels.count, (jobs.filter((i) => !d.id || i["dept"] === d.id)?.length ?? 0))}
+            </Text>
+          </Group>
+          <List tag="ul" class="flex flex-col">
+            {#each jobs.filter((i) => !d.id || i["dept"] === d.id) as j (j.id)}
+              <ListItem
+                class="flex flex-wrap items-center justify-between gap-4 border-b border-border py-4"
+                data-testid="item"
+              >
+                <Stack gap="0">
+                  <MenuEntry href={j.href} class="font-medium">
+                    {j.title}
+                  </MenuEntry>
+                  <Text size="xs" class="text-muted-foreground">
+                    {tpl("{0}, {1}", j.location, j.type)}
+                  </Text>
+                </Stack>
+                <Badge variant="outline" size="default">
+                  {j.type}
+                </Badge>
+              </ListItem>
+            {/each}
+          </List>
+        </Stack>
+      {/each}
+    </Stack>
+  {:else}
+    <JobCards jobs={jobs} departments={departments} labels={labels} layout={layout} salary={salary} />
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/job-board.types.ts b/packages/svelte/ui/src/blocks/job-board.types.ts
new file mode 100644
index 0000000..94f02f7
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/job-board.types.ts
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Job = {
+  id: string;
+  title: string;
+  dept: string;
+  location: string;
+  type: string;
+  salary: string;
+  posted: string;
+  href?: string;
+};
+
+export type Department = {
+  id: string;
+  name: string;
+};
+
+export type JobLabels = {
+  apply: string;
+  caption: string;
+  role: string;
+  team: string;
+  location: string;
+  type: string;
+  salary: string;
+  count: string;
+};
diff --git a/packages/svelte/ui/src/blocks/kanban-board.svelte b/packages/svelte/ui/src/blocks/kanban-board.svelte
new file mode 100644
index 0000000..ba06934
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/kanban-board.svelte
@@ -0,0 +1,99 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/workspace.ts -->
+<!--
+  Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the
+  person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card
+  between lanes is a port contract.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Lane, BoardCard } from "./kanban-board.types";
+
+  export type KanbanBoardProps = {
+    id: string;
+    title: string;
+    lanes: Lane[];
+    empty?: string;
+    cards: BoardCard[];
+    countLabel: string;
+    card?: "simple" | "detail";
+    cols?: "2" | "3";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import Pill from "../components/pill.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lanes,
+    empty = "",
+    cards,
+    countLabel,
+    card = "detail",
+    cols = "3",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: KanbanBoardProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((lanes?.length ?? 0) === 0)}
+    <EmptyState icon="kanban" title={empty} />
+  {:else}
+    <Grid cols={(((cols as string) === "2") ? "1-2" : "1-3")} class="items-start gap-4" data-testid="lanes">
+      {#each lanes as lane (lane.id)}
+        <Stack gap="4" align="stretch" class="rounded bg-muted p-4" data-testid="lane">
+          <Group gap="2" align="center" justify="between">
+            <Title as={3} size="base" weight="bold">
+              {lane.title}
+            </Title>
+            <Text size="xs" class="text-muted-foreground">
+              {tpl(countLabel, (cards.filter((i) => !lane.key || i["lane"] === lane.key)?.length ?? 0))}
+            </Text>
+          </Group>
+          <List class="m-0 flex list-none flex-col gap-2 p-0">
+            {#each cards.filter((i) => !lane.key || i["lane"] === lane.key) as c (c.id)}
+              <ListItem
+                class={cn(
+                  "flex flex-col rounded bg-card inset-ring inset-ring-border",
+                  (((density as string) === "compact") ? "gap-2 p-2" : "gap-2 p-4")
+                )}
+                data-testid="item"
+              >
+                <Text size="sm" weight="semibold">
+                  {c.title}
+                </Text>
+                {#if ((card as string) === "detail")}
+                  <Group gap="2" align="center" justify="between" class="flex-wrap">
+                    <Pill tone="blue" icon="tag">
+                      {c.tag}
+                    </Pill>
+                    <Text size="xs" class="text-muted-foreground">
+                      {c.who}
+                    </Text>
+                  </Group>
+                {/if}
+              </ListItem>
+            {/each}
+          </List>
+        </Stack>
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/kanban-board.types.ts b/packages/svelte/ui/src/blocks/kanban-board.types.ts
new file mode 100644
index 0000000..ec9ee64
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/kanban-board.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+export type Lane = {
+  id: string;
+  key: string;
+  title: string;
+};
+
+export type BoardCard = {
+  id: string;
+  lane: string;
+  title: string;
+  tag: string;
+  who: string;
+};
diff --git a/packages/svelte/ui/src/blocks/logo-cloud.svelte b/packages/svelte/ui/src/blocks/logo-cloud.svelte
new file mode 100644
index 0000000..130f05e
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/logo-cloud.svelte
@@ -0,0 +1,86 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!--
+  A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row),
+  columns (2, 3, 4), item (name, icon only, tile), density, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Logo } from "./logo-cloud.types";
+
+  export type LogoCloudProps = {
+    id: string;
+    title: string;
+    logos: Logo[];
+    empty?: string;
+    layout?: "grid" | "row";
+    cols?: "2" | "3" | "4";
+    item?: "name" | "icon" | "tile";
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import LogoRibbon from "../blocks/logo-ribbon.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    logos,
+    empty = "",
+    layout = "grid",
+    cols = "4",
+    item = "name",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: LogoCloudProps = $props();
+</script>
+
+{#if ((logos?.length ?? 0) === 0)}
+  <SectionFrame id={id} title={title} tone={tone} density={density} align="center" landmarkLabel={landmarkLabel}>
+    <EmptyState icon="building-2" title={empty} />
+  </SectionFrame>
+{:else if ((layout as string) === "row")}
+  <LogoRibbon id={id} title={title} logos={logos} tone={tone} density={density} landmarkLabel={landmarkLabel} />
+{:else}
+  <SectionFrame id={id} title={title} tone={tone} density={density} align="center" landmarkLabel={landmarkLabel}>
+    <Grid
+      cols={
+        (cols as string) === "2" ? "2"
+        : (cols as string) === "3" ? "2-3"
+        : (cols as string) === "4" ? "2-4"
+        : "3-6"
+      }
+      class="gap-4"
+      data-testid="items"
+    >
+      {#each logos as logo (logo.id)}
+        <Group
+          gap="2"
+          align="center"
+          justify="center"
+          class={cn(
+            "text-muted-foreground",
+            (((item as string) === "tile") ? "flex-col rounded p-4 inset-ring inset-ring-border" : "")
+          )}
+          data-testid="item"
+        >
+          <LucideIcon name={logo.icon} size={24} />
+          <Text size="sm" weight="semibold" class={(((item as string) === "icon") ? "sr-only" : "")}>
+            {logo.name}
+          </Text>
+        </Group>
+      {/each}
+    </Grid>
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/logo-cloud.types.ts b/packages/svelte/ui/src/blocks/logo-cloud.types.ts
new file mode 100644
index 0000000..e2e2d33
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/logo-cloud.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Logo = {
+  id: string;
+  name: string;
+  icon: string;
+};
diff --git a/packages/svelte/ui/src/blocks/logo-ribbon.svelte b/packages/svelte/ui/src/blocks/logo-ribbon.svelte
new file mode 100644
index 0000000..7b29517
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/logo-ribbon.svelte
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!-- A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Logo } from "./logo-cloud.types";
+
+  export type LogoRibbonProps = {
+    id: string;
+    title: string;
+    logos: Logo[];
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import LogoSlot from "../components/logo-slot.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let { id, title, logos, tone = "default", density = "default", landmarkLabel }: LogoRibbonProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  tone={tone}
+  density={density}
+  measure="fill"
+  align="center"
+  class="py-0"
+  landmarkLabel={landmarkLabel}
+>
+  <Stack gap="6" align="center" data-testid="logos-block">
+    <Title as={2} size="xl" weight="semibold" class="leading-7" id={(id + "-title")}>
+      {title}
+    </Title>
+    <Group
+      gap="0"
+      justify="center"
+      align="start"
+      class={cn("flex w-full flex-wrap", defaults.logos.row)}
+      data-testid="items"
+    >
+      {#each logos as logo (logo.id)}
+        <LogoSlot name={logo.name} icon={logo.icon} />
+      {/each}
+    </Group>
+  </Stack>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/media-list.svelte b/packages/svelte/ui/src/blocks/media-list.svelte
new file mode 100644
index 0000000..060fe16
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/media-list.svelte
@@ -0,0 +1,114 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/media-list.ts -->
+<!--
+  A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures
+  and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts,
+  contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MediaExtras, MediaListLabels } from "./media-list.types";
+  import type { Stat } from "./stats-band.types";
+  import type { Step } from "./steps-list.types";
+  import type { Post } from "./post-card.types";
+  import type { Category } from "./category-nav.types";
+  import type { Feature } from "./feature-grid.types";
+  import type { Review } from "./review-list.types";
+  import type { LinkActions } from "./error-page.types";
+
+  export type MediaListProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    extras: MediaExtras;
+    labels: MediaListLabels;
+    actions: LinkActions;
+    layout?: "figures" | "proof" | "steps" | "posts" | "topics" | "contact";
+    mediaSide?: "end" | "start";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import ActionGroup from "../components/action-group.svelte";
+  import MediaContacts from "../components/media-contacts.svelte";
+  import MediaFigures from "../components/media-figures.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import MediaPosts from "../components/media-posts.svelte";
+  import MediaReview from "../components/media-review.svelte";
+  import MediaSteps from "../components/media-steps.svelte";
+  import MediaTopics from "../components/media-topics.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    extras,
+    labels,
+    actions,
+    layout = "figures",
+    mediaSide = "end",
+    tone = "default",
+    landmarkLabel,
+  }: MediaListProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  heading={{ badge }}
+  tone={tone}
+  layout="split"
+  media={{ show: true, side: mediaSide }}
+  landmarkLabel={landmarkLabel}
+>
+  {#if (((layout as string) === "figures") || ((layout as string) === "proof"))}
+    {#if ((extras.stats?.length ?? 0) > 0)}
+      <MediaFigures extras={extras} mode={(((layout as string) === "proof") ? "row" : "grid")} />
+    {/if}
+  {/if}
+  {#if ((layout as string) === "proof")}
+    {#if ((extras.reviews?.length ?? 0) > 0)}
+      <MediaReview extras={extras} labels={labels} />
+    {/if}
+  {/if}
+  {#if ((layout as string) === "steps")}
+    {#if ((extras.steps?.length ?? 0) > 0)}
+      <MediaSteps extras={extras} labels={labels} />
+    {/if}
+  {/if}
+  {#if ((layout as string) === "posts")}
+    {#if ((extras.posts?.length ?? 0) > 0)}
+      <MediaPosts extras={extras} labels={labels} />
+    {/if}
+  {/if}
+  {#if ((layout as string) === "topics")}
+    {#if ((extras.topics?.length ?? 0) > 0)}
+      <MediaTopics extras={extras} labels={labels} />
+    {/if}
+  {/if}
+  {#if ((layout as string) === "contact")}
+    {#if ((extras.channels?.length ?? 0) > 0)}
+      <MediaContacts extras={extras} labels={labels} />
+    {/if}
+  {/if}
+  {#if ((layout as string) !== "contact")}
+    <ActionGroup
+      primary={actions.cta}
+      primaryHref={actions.href}
+      secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+      secondaryHref={actions.secondaryHref}
+    />
+  {/if}
+  {#snippet aside()}
+    <MediaFrame
+      alt={title}
+      ratio={((((layout as string) === "steps") || ((layout as string) === "topics")) ? "1/1" : "4/3")}
+    />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/media-list.types.ts b/packages/svelte/ui/src/blocks/media-list.types.ts
new file mode 100644
index 0000000..54863b7
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/media-list.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/media-list.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Step } from "./steps-list.types";
+import type { Post } from "./post-card.types";
+import type { Category } from "./category-nav.types";
+import type { Feature } from "./feature-grid.types";
+import type { Review } from "./review-list.types";
+
+export type MediaExtras = {
+  stats: Stat[];
+  steps: Step[];
+  posts: Post[];
+  topics: Category[];
+  channels: Feature[];
+  reviews: Review[];
+};
+
+export type MediaListLabels = {
+  list: string;
+  count: string;
+  minutes: string;
+  featured: string;
+  rating: string;
+  figures: string;
+};
diff --git a/packages/svelte/ui/src/blocks/mega-menu.svelte b/packages/svelte/ui/src/blocks/mega-menu.svelte
new file mode 100644
index 0000000..80aab59
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/mega-menu.svelte
@@ -0,0 +1,141 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional
+  promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed),
+  cols (2, 3), promo (none, card).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MegaGroup } from "./mega-menu.types";
+  import type { NavLink } from "./nav-bar.types";
+
+  export type MegaMenuProps = {
+    label: string;
+    brand: string;
+    brandHref?: string;
+    trigger: string;
+    links: NavLink[];
+    groups: MegaGroup[];
+    promoTitle?: string;
+    promoText?: string;
+    panel?: "open" | "closed";
+    cols?: "2" | "3";
+    promo?: "none" | "card";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import ButtonPlain from "../primitives/button-plain/button-plain.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let {
+    label,
+    brand,
+    brandHref,
+    trigger,
+    links,
+    groups,
+    promoTitle,
+    promoText,
+    panel = "open",
+    cols = "3",
+    promo = "none",
+    landmarkLabel,
+  }: MegaMenuProps = $props();
+</script>
+
+<Block
+  tag="header"
+  class="relative border-b border-border bg-background"
+  data-testid="mega-menu"
+  aria-label={landmarkLabel}
+>
+  <Container
+    class={cn("mx-auto w-full max-w-6xl px-4", "flex flex-wrap items-center gap-6 py-4")}
+    data-slot="container"
+  >
+    <MenuEntry href={brandHref} class="text-lg font-medium" testid="brand">
+      {brand}
+    </MenuEntry>
+    <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)} class="flex-1">
+      <Group gap="4" align="center" class="flex-wrap">
+        <ButtonPlain
+          type="button"
+          class="inline-flex items-center gap-2 text-sm font-semibold"
+          aria-expanded={(((panel as string) === "open") ? "true" : "false")}
+          data-testid="mega-trigger"
+        >
+          {trigger}
+          <LucideIcon name="chevron-down" size={16} />
+        </ButtonPlain>
+        {#each links as l (l.id)}
+          <MenuEntry href={l.href} class="text-sm" current={(l.id === "")} testid="nav-link">
+            {l.name}
+          </MenuEntry>
+        {/each}
+      </Group>
+    </NavBlock>
+  </Container>
+</Block>
+{#if ((panel as string) === "open")}
+  <Box class="border-t border-border bg-card" data-testid="mega-panel">
+    <Container
+      class={cn(
+        "mx-auto w-full max-w-6xl px-4",
+        "grid gap-8 py-6",
+        (((promo as string) === "card") ? "md:grid-cols-[1fr_16rem]" : "")
+      )}
+      data-slot="container"
+    >
+      {#if ((groups?.length ?? 0) > 0)}
+        <Grid cols={(((cols as string) === "2") ? "1-2" : "1-3")} class="gap-6" data-testid="items">
+          {#each groups as g (g.id)}
+            <Stack gap="2" data-testid="item">
+              <Group gap="2" align="center">
+                <LucideIcon name={g.icon} size={16} />
+                <Text size="sm" weight="semibold">
+                  {g.title}
+                </Text>
+              </Group>
+              <List class="m-0 flex list-none flex-col gap-2 p-0">
+                {#each g.links as item (item.id)}
+                  <ListItem>
+                    <MenuEntry href={item.href} class="text-sm text-muted-foreground">
+                      {item.name}
+                    </MenuEntry>
+                  </ListItem>
+                {/each}
+              </List>
+            </Stack>
+          {/each}
+        </Grid>
+      {/if}
+      {#if ((promo as string) === "card")}
+        <Stack gap="2" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="promo">
+          <MediaFrame alt={(promoTitle ?? "")} ratio="4/3" />
+          <Text size="base" weight="semibold">
+            {promoTitle}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {promoText}
+          </Text>
+        </Stack>
+      {/if}
+    </Container>
+  </Box>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/mega-menu.types.ts b/packages/svelte/ui/src/blocks/mega-menu.types.ts
new file mode 100644
index 0000000..8177392
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/mega-menu.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type MegaGroup = {
+  id: string;
+  title: string;
+  icon: string;
+  links: NavLink[];
+  href?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/metric-row.svelte b/packages/svelte/ui/src/blocks/metric-row.svelte
new file mode 100644
index 0000000..6f10528
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/metric-row.svelte
@@ -0,0 +1,77 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes:
+  columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Metric } from "./metric-row.types";
+
+  export type MetricRowProps = {
+    id: string;
+    title: string;
+    metrics: Metric[];
+    empty?: string;
+    cols?: "2" | "4";
+    item?: "tile" | "compact";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import StatTile from "../components/stat-tile.svelte";
+
+  let {
+    id,
+    title,
+    metrics,
+    empty = "",
+    cols = "4",
+    item = "tile",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: MetricRowProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((metrics?.length ?? 0) === 0)}
+    <EmptyState icon="gauge" title={empty} />
+  {:else}
+    <Grid cols={(((cols as string) === "2") ? "1-2" : "1-4")} class="gap-4" data-testid="items">
+      {#each metrics as m (m.id)}
+        {#if ((item as string) === "tile")}
+          <Box data-testid="item">
+            <StatTile label={m.label} value={m.value} icon={m.icon} hint={m.hint} />
+          </Box>
+        {:else}
+          <Stack gap="0" class="rounded bg-card p-4 inset-ring inset-ring-border" data-testid="item">
+            <Group gap="2" align="center" class="text-muted-foreground">
+              <LucideIcon name={m.icon} size={16} />
+              <Text size="xs">
+                {m.label}
+              </Text>
+            </Group>
+            <Text size="2xl" weight="bold">
+              {m.value}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {m.hint}
+            </Text>
+          </Stack>
+        {/if}
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/metric-row.types.ts b/packages/svelte/ui/src/blocks/metric-row.types.ts
new file mode 100644
index 0000000..3537e9f
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/metric-row.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Metric = {
+  id: string;
+  label: string;
+  value: string;
+  icon: string;
+  hint: string;
+};
diff --git a/packages/svelte/ui/src/blocks/milestone-timeline.svelte b/packages/svelte/ui/src/blocks/milestone-timeline.svelte
new file mode 100644
index 0000000..59fbcd0
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/milestone-timeline.svelte
@@ -0,0 +1,108 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/work.ts -->
+<!--
+  Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line
+  beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone,
+  density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Milestone } from "./milestone-timeline.types";
+
+  export type MilestoneTimelineProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    milestones: Milestone[];
+    empty?: string;
+    layout?: "split" | "stacked" | "row";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    milestones,
+    empty = "",
+    layout = "split",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: MilestoneTimelineProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  tone={tone}
+  density={density}
+  layout={(((layout as string) === "split") ? "split" : "stack")}
+  media={{ show: ((layout as string) === "split"), side: "start", align: "start" }}
+  measure={(((layout as string) === "stacked") ? "2xl" : "default")}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((milestones?.length ?? 0) === 0)}
+    <EmptyState icon="milestone" title={empty} />
+  {:else}
+    <List
+      tag="ol"
+      class={
+        (layout as string) === "row" ? "grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4"
+        : "flex flex-col gap-8 border-l border-border"
+      }
+      data-testid="items"
+    >
+      {#each milestones as m (m.id)}
+        <ListItem
+          class={
+            (layout as string) === "row" ? "relative flex flex-col gap-2 pt-6"
+            : "relative flex flex-col gap-2 pl-6"
+          }
+          data-testid="item"
+        >
+          <Inline
+            class={
+              (layout as string) === "row" ? "absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary"
+              : "absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary"
+            }
+            aria-hidden="true"
+          />
+          <Group gap="2" align="center">
+            <Text size="sm" weight="semibold">
+              {m.date}
+            </Text>
+            <Badge variant="outline" size="sm">
+              {m.tag}
+            </Badge>
+          </Group>
+          <Title as={3} size="lg" weight="bold">
+            {m.title}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {m.text}
+          </Text>
+        </ListItem>
+      {/each}
+    </List>
+  {/if}
+  {#snippet aside()}
+    <MediaFrame alt={title} ratio="3/4" />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/milestone-timeline.types.ts b/packages/svelte/ui/src/blocks/milestone-timeline.types.ts
new file mode 100644
index 0000000..76e6bea
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/milestone-timeline.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Milestone = {
+  id: string;
+  date: string;
+  title: string;
+  text: string;
+  tag: string;
+};
diff --git a/packages/svelte/ui/src/blocks/nav-bar.svelte b/packages/svelte/ui/src/blocks/nav-bar.svelte
new file mode 100644
index 0000000..f050e2c
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/nav-bar.svelte
@@ -0,0 +1,144 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the
+  middle with the links on both sides; search: a search field with its shortcut in the middle), over (none,
+  media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark
+  hero band). Turning solid on scroll is a port contract.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { NavLink, NavBarActions, NavSearch } from "./nav-bar.types";
+
+  export type NavBarProps = {
+    label: string;
+    brand: string;
+    brandHref?: string;
+    links: NavLink[];
+    current?: string;
+    actions?: NavBarActions;
+    search: NavSearch;
+    tone?: "default" | "inverse";
+    layout?: "inline" | "split" | "search";
+    over?: "none" | "media";
+    skip?: string;
+    landmarkLabel?: string;
+    ontheme?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LinkPlain from "../primitives/link-plain/link-plain.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavActions from "../components/nav-actions.svelte";
+  import NavBarMenu from "../components/nav-bar-menu.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import NavLinks from "../components/nav-links.svelte";
+  import OverMedia from "../components/over-media.svelte";
+  import SearchPalette from "../components/search-palette.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let {
+    label,
+    brand,
+    brandHref,
+    links,
+    current = "",
+    actions,
+    search,
+    tone = "default",
+    layout = "inline",
+    over = "none",
+    skip,
+    landmarkLabel,
+    ontheme,
+  }: NavBarProps = $props();
+</script>
+
+<Block
+  tag="header"
+  class={cn(
+    "relative",
+    (
+      (tone as string) === "inverse" ? "border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background"
+      : "border-b border-border bg-background"
+    ),
+    (((over as string) === "media") ? "isolate overflow-hidden border-0 bg-transparent" : "")
+  )}
+  data-testid="nav-bar"
+  data-layout={layout}
+  data-tone={tone}
+  aria-label={landmarkLabel}
+>
+  <OverMedia on={((over as string) === "media")} alt={brand} />
+  {#if skip}
+    <LinkPlain
+      href="#main-content"
+      class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+        "focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border"}
+      data-testid="skip-link"
+    >
+      {skip}
+    </LinkPlain>
+  {/if}
+  <Container class="mx-auto w-full max-w-6xl px-4" data-slot="container">
+    <Box class={cn("flex flex-wrap items-center justify-between gap-4", "py-4")}>
+      {#if ((layout as string) === "split")}
+        <NavBlock
+          label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)}
+          class="w-full"
+          testid="site-nav"
+        >
+          <Grid cols="1-3" class="w-full items-center gap-4">
+            <Box class="md:justify-self-start">
+              <NavLinks links={links} current={current} side="left" />
+            </Box>
+            <Box class="text-center">
+              <MenuEntry href={brandHref} class="text-lg font-medium" testid="brand">
+                {brand}
+              </MenuEntry>
+            </Box>
+            <Group gap="4" align="center" justify="end" class="flex-wrap md:justify-self-end">
+              <Box>
+                <NavLinks links={links} current={current} side="right" />
+              </Box>
+              <NavActions
+                login={actions?.login}
+                loginHref={actions?.loginHref}
+                cta={actions?.cta}
+                ctaHref={actions?.href}
+                actions={actions?.mode}
+                tone={tone}
+                themeLabel={actions?.themeLabel}
+                ontheme={() => ontheme?.()}
+              />
+            </Group>
+          </Grid>
+        </NavBlock>
+      {:else}
+        <MenuEntry href={brandHref} class="text-lg font-medium" testid="brand">
+          {brand}
+        </MenuEntry>
+        {#if ((layout as string) === "search")}
+          <SearchPalette label={search.label} shortcut={search.shortcut} />
+        {/if}
+        <NavBarMenu label={label} links={links} current={current} landmarkLabel={landmarkLabel} />
+        <NavActions
+          login={actions?.login}
+          loginHref={actions?.loginHref}
+          cta={actions?.cta}
+          ctaHref={actions?.href}
+          actions={actions?.mode}
+          tone={tone}
+          themeLabel={actions?.themeLabel}
+          ontheme={() => ontheme?.()}
+        />
+      {/if}
+    </Box>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/nav-bar.types.ts b/packages/svelte/ui/src/blocks/nav-bar.types.ts
new file mode 100644
index 0000000..459db5a
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/nav-bar.types.ts
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+export type NavLink = {
+  id: string;
+  name: string;
+  icon: string;
+  href?: string;
+};
+
+export type NavBarActions = {
+  /** cta: show the call to action */
+  mode?: "none" | "cta";
+  /** text of the call to action */
+  cta?: string;
+  /** href of the call to action */
+  href?: string;
+  /** text of the login link; none: no login */
+  login?: string;
+  /** href of the login link; none: a button with no address */
+  loginHref?: string;
+  /** text of the theme button; none: no button */
+  themeLabel?: string;
+};
+
+export type NavSearch = {
+  /** name and placeholder of the search field (layout search) */
+  label: string;
+  /** the keys that open the search, shown in the field */
+  shortcut: string;
+};
diff --git a/packages/svelte/ui/src/blocks/newsletter-form.svelte b/packages/svelte/ui/src/blocks/newsletter-form.svelte
new file mode 100644
index 0000000..1acf2a5
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/newsletter-form.svelte
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and
+  picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start,
+  center).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type NewsletterFormProps = {
+    id: string;
+    title: string;
+    text: string;
+    label: string;
+    submit: string;
+    consent?: string;
+    layout?: "inline" | "stacked" | "split";
+    terms?: "show" | "hide";
+    tone?: "default" | "muted";
+    align?: "start" | "center";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Form from "../primitives/form/form.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    label,
+    submit,
+    consent,
+    layout = "inline",
+    terms = "hide",
+    tone = "default",
+    align = "center",
+    landmarkLabel,
+  }: NewsletterFormProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={text}
+  tone={tone}
+  align={align}
+  layout={(((layout as string) === "split") ? "split" : "stack")}
+  media={{ show: ((layout as string) === "split") }}
+  landmarkLabel={landmarkLabel}
+>
+  <Form
+    method="dialog"
+    class={cn("w-full max-w-md", (((align as string) === "center") ? "mx-auto" : ""))}
+    data-testid="newsletter-form"
+  >
+    <Label for={tpl("{0}-email", id)} class="sr-only">
+      {label}
+    </Label>
+    <Group
+      gap="2"
+      align="start"
+      class={cn("w-full", (((layout as string) === "stacked") ? "flex-col items-stretch" : "flex-wrap"))}
+    >
+      <Input type="email" name="email" class="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+      <Button variant="default" size="default" type="submit" data-testid="submit">
+        {submit}
+      </Button>
+    </Group>
+    {#if (((terms as string) === "show") && consent)}
+      <Text size="xs" class="text-muted-foreground" data-testid="consent">
+        {consent}
+      </Text>
+    {/if}
+  </Form>
+  {#snippet aside()}
+    <MediaFrame alt={title} ratio="4/3" />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/order-summary.svelte b/packages/svelte/ui/src/blocks/order-summary.svelte
new file mode 100644
index 0000000..2f6dc3e
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/order-summary.svelte
@@ -0,0 +1,98 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout
+  (card, plain), cta (show, hide), note (show, hide), density, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { SummaryRow, SummaryLabels } from "./order-summary.types";
+
+  export type OrderSummaryProps = {
+    id: string;
+    title: string;
+    rows: SummaryRow[];
+    empty?: string;
+    labels: SummaryLabels;
+    layout?: "card" | "plain";
+    cta?: "show" | "hide";
+    note?: "show" | "hide";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, fmtMoney } from "../utils";
+
+  let {
+    id,
+    title,
+    rows,
+    empty = "",
+    labels,
+    layout = "card",
+    cta = "show",
+    note = "show",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: OrderSummaryProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} measure="md" landmarkLabel={landmarkLabel}>
+  {#if ((rows?.length ?? 0) === 0)}
+    <EmptyState icon="receipt" title={empty} />
+  {:else}
+    <Box
+      class={cn(
+        (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+      )}
+      data-testid="summary"
+    >
+      <Stack gap="4" align="stretch">
+        <List tag="ul" class="flex flex-col gap-4">
+          {#each rows as row (row.id)}
+            <ListItem
+              class={cn(
+                "flex items-center justify-between gap-4",
+                (
+                  row.strong ? "border-t border-border pt-4 text-base font-bold"
+                  : "text-sm text-muted-foreground"
+                )
+              )}
+              data-testid="item"
+            >
+              <Inline>
+                {row.label}
+              </Inline>
+              <Inline>
+                {fmtMoney(row.amount, row.currency)}
+              </Inline>
+            </ListItem>
+          {/each}
+        </List>
+        {#if ((cta as string) === "show")}
+          <Button variant="default" size="default" class="w-full" data-testid="checkout">
+            {labels.checkout}
+          </Button>
+        {/if}
+        {#if ((note as string) === "show")}
+          <Text size="xs" class="text-muted-foreground">
+            {labels.note}
+          </Text>
+        {/if}
+      </Stack>
+    </Box>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/order-summary.types.ts b/packages/svelte/ui/src/blocks/order-summary.types.ts
new file mode 100644
index 0000000..5fdaf66
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/order-summary.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type SummaryRow = {
+  id: string;
+  label: string;
+  amount: number;
+  currency: string;
+  strong: boolean;
+};
+
+export type SummaryLabels = {
+  checkout: string;
+  note: string;
+};
diff --git a/packages/svelte/ui/src/blocks/order-table.svelte b/packages/svelte/ui/src/blocks/order-table.svelte
new file mode 100644
index 0000000..bfc9d75
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/order-table.svelte
@@ -0,0 +1,105 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  The order history as a table or as cards: number, date, items, total and a status pill, with an optional
+  pager. Axes: layout (table, cards), pager (show, hide), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Order, OrderLabels } from "./order-table.types";
+
+  export type OrderTableProps = {
+    id: string;
+    title: string;
+    orders: Order[];
+    empty?: string;
+    statuses: Record<string, string>;
+    labels: OrderLabels;
+    layout?: "table" | "cards";
+    pager?: "show" | "hide";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Card from "../primitives/card/card.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import OrderRows from "../components/order-rows.svelte";
+  import Pager from "../components/pager.svelte";
+  import Pill from "../components/pill.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { at, fmtMoney, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    orders,
+    empty = "",
+    statuses,
+    labels,
+    layout = "table",
+    pager = "show",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: OrderTableProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((orders?.length ?? 0) === 0)}
+    <EmptyState icon="package" title={empty} />
+  {:else}
+    <Stack gap="4" align="stretch">
+      {#if ((layout as string) === "table")}
+        <OrderRows orders={orders} statuses={statuses} labels={labels} density={density} />
+      {:else}
+        <Stack gap="4" align="stretch" data-testid="order-cards">
+          {#each orders as o (o.id)}
+            <Card variant="default" data-testid="item">
+              <CardContent class="flex flex-wrap items-center justify-between gap-4">
+                <Stack gap="0">
+                  <Text size="sm" weight="semibold">
+                    {o.number}
+                  </Text>
+                  <Text size="xs" class="text-muted-foreground">
+                    {o.date}
+                  </Text>
+                </Stack>
+                <Text size="sm">
+                  {tpl(labels.itemsCount, o.items)}
+                </Text>
+                <Text size="sm" weight="bold">
+                  {fmtMoney(o.total, o.currency)}
+                </Text>
+                <Pill
+                  tone={
+                    o.status === "paid" ? "green"
+                    : o.status === "shipped" ? "blue"
+                    : o.status === "pending" ? "amber"
+                    : "gray"
+                  }
+                >
+                  {at(statuses, o.status)}
+                </Pill>
+              </CardContent>
+            </Card>
+          {/each}
+        </Stack>
+      {/if}
+      {#if ((pager as string) === "show")}
+        <Pager
+          page={1}
+          pages={3}
+          summary={tpl(labels.summary, 1, 4, 12)}
+          previousLabel={labels.previous}
+          nextLabel={labels.next}
+        />
+      {/if}
+    </Stack>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/order-table.types.ts b/packages/svelte/ui/src/blocks/order-table.types.ts
new file mode 100644
index 0000000..19b90e6
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/order-table.types.ts
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Order = {
+  id: string;
+  number: string;
+  date: string;
+  total: number;
+  currency: string;
+  status: string;
+  items: number;
+};
+
+export type OrderLabels = {
+  caption: string;
+  number: string;
+  date: string;
+  items: string;
+  total: string;
+  status: string;
+  itemsCount: string;
+  summary: string;
+  previous: string;
+  next: string;
+};
diff --git a/packages/svelte/ui/src/blocks/page-intro.svelte b/packages/svelte/ui/src/blocks/page-intro.svelte
new file mode 100644
index 0000000..6c33284
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/page-intro.svelte
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action.
+  Axes: align (start, center), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type PageIntroProps = {
+    id: string;
+    title: string;
+    text: string;
+    cta?: string;
+    href?: string;
+    level?: 1 | 2;
+    align?: "start" | "center";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import ActionGroup from "../components/action-group.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    text,
+    cta,
+    href,
+    level = 1,
+    align = "start",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: PageIntroProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={text}
+  heading={{ level }}
+  align={align}
+  tone={tone}
+  density={density}
+  landmarkLabel={landmarkLabel}
+>
+  {#if cta}
+    <ActionGroup primary={cta} primaryHref={href} align={align} />
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/page-trail.svelte b/packages/svelte/ui/src/blocks/page-trail.svelte
new file mode 100644
index 0000000..66787a5
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/page-trail.svelte
@@ -0,0 +1,82 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/page-trail.ts -->
+<!--
+  The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a
+  total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts
+  in two columns), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { PageExtras } from "./page-trail.types";
+  import type { NavLink } from "./nav-bar.types";
+  import type { Stat } from "./stats-band.types";
+
+  export type PageTrailProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    label: string;
+    crumbs: NavLink[];
+    extras: PageExtras;
+    aside?: "none" | "figure" | "note" | "facts";
+    level?: 1 | 2;
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import PageAside from "../components/page-aside.svelte";
+  import PageCrumbs from "../components/page-crumbs.svelte";
+  import SectionHeader from "../components/section-header.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    label,
+    crumbs,
+    extras,
+    aside = "none",
+    level = 1,
+    tone = "default",
+    landmarkLabel,
+  }: PageTrailProps = $props();
+  const titleId = $derived(id + "-title");
+</script>
+
+<Block
+  tag="section"
+  class={cn("py-8", (((tone as string) === "muted") ? "bg-muted" : ""))}
+  aria-labelledby={(landmarkLabel ? undefined : titleId)}
+  data-testid="section"
+  data-tone={tone}
+  data-aside={aside}
+  aria-label={landmarkLabel}
+>
+  <Container class={cn("mx-auto w-full max-w-6xl px-4", "flex flex-col gap-6")} data-slot="container">
+    {#if ((crumbs?.length ?? 0) > 0)}
+      <PageCrumbs label={label} crumbs={crumbs} landmarkLabel={landmarkLabel} />
+    {/if}
+    <Box
+      class={
+        (aside as string) === "facts" ? "grid grid-cols-1 items-center gap-8 lg:grid-cols-2"
+        : "flex flex-col gap-6 md:flex-row md:items-end md:justify-between"
+      }
+    >
+      <Stack gap="4" align="start" class="min-w-0">
+        <SectionHeader titleId={titleId} title={title} heading={{ level, badge }} lead={lead} />
+      </Stack>
+      {#if ((aside as string) !== "none")}
+        <PageAside extras={extras} mode={aside} />
+      {/if}
+    </Box>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/page-trail.types.ts b/packages/svelte/ui/src/blocks/page-trail.types.ts
new file mode 100644
index 0000000..bb966d6
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/page-trail.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/page-trail.ts
+
+import type { Stat } from "./stats-band.types";
+
+export type PageExtras = {
+  value: string;
+  caption: string;
+  note: string;
+  icon: string;
+  facts: Stat[];
+};
diff --git a/packages/svelte/ui/src/blocks/photo-gallery.svelte b/packages/svelte/ui/src/blocks/photo-gallery.svelte
new file mode 100644
index 0000000..0491808
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/photo-gallery.svelte
@@ -0,0 +1,133 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/work.ts -->
+<!--
+  Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of
+  thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes:
+  layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Photo, PhotoLabels } from "./photo-gallery.types";
+
+  export type PhotoGalleryProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    photos: Photo[];
+    empty?: string;
+    labels: PhotoLabels;
+    layout?: "grid" | "masonry" | "mosaic" | "featured" | "cards";
+    captions?: "show" | "hide";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import FigureBlock from "../components/figure-block.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    photos,
+    empty = "",
+    labels,
+    layout = "grid",
+    captions = "show",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: PhotoGalleryProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} lead={lead} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((photos?.length ?? 0) === 0)}
+    <EmptyState icon="image" title={empty} />
+  {:else if ((layout as string) === "featured")}
+    <Stack gap="4" align="stretch" data-testid="featured">
+      <MediaFrame alt={title} />
+      <Group gap="4" align="center" justify="between">
+        <Stack gap="0">
+          <Text size="base" weight="semibold">
+            {photos[0]?.title ?? ""}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {tpl(labels.counter, 1, (photos?.length ?? 0))}
+          </Text>
+        </Stack>
+        <Group gap="2">
+          <Button variant="outline" size="sm" layout="icon" aria-label={labels.previous}>
+            <LucideIcon name="chevron-left" size={16} />
+          </Button>
+          <Button variant="outline" size="sm" layout="icon" aria-label={labels.next}>
+            <LucideIcon name="chevron-right" size={16} />
+          </Button>
+        </Group>
+      </Group>
+      <Box class="grid grid-cols-3 gap-2 sm:grid-cols-9" data-testid="thumbs">
+        {#each photos as p, i (p.id)}
+          <MediaFrame alt={p.title} ratio="1/1" class={((i === 0) ? "ring-2 ring-foreground" : "")} />
+        {/each}
+      </Box>
+    </Stack>
+  {:else}
+    <Box
+      class={
+        (layout as string) === "masonry" ? "columns-1 gap-4 sm:columns-2 lg:columns-3"
+        : (layout as string) === "mosaic" ? "grid grid-cols-2 gap-4 md:grid-cols-4"
+        : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+      }
+      data-testid="items"
+    >
+      {#each photos as p, i (p.id)}
+        <FigureBlock
+          class={cn(
+            "flex flex-col gap-2",
+            (((layout as string) === "masonry") ? "mb-4 break-inside-avoid" : ""),
+            ((((layout as string) === "mosaic") && (i === 0)) ? "col-span-2 row-span-2" : ""),
+            (((layout as string) === "cards") ? "rounded bg-card inset-ring inset-ring-border p-4" : "")
+          )}
+          testid="item"
+        >
+          <MediaFrame
+            alt={p.title}
+            ratio={
+              (layout as string) === "masonry" ? ((p.size === "tall") ? "3/4" : ((p.size === "wide") ? "16/9" : ((p.size === "large") ? "4/3" : "1/1")))
+              : (layout as string) === "grid" ? "4/3"
+              : "1/1"
+            }
+            class={(((layout as string) === "mosaic") ? "h-full" : "")}
+          />
+          {#if (((captions as string) === "show") && ((layout as string) === "cards"))}
+            <Group gap="4" align="center" justify="between">
+              <Text size="sm" weight="semibold">
+                {p.title}
+              </Text>
+              <Badge variant="secondary" size="sm">
+                {p.tag}
+              </Badge>
+            </Group>
+          {/if}
+          {#if (((captions as string) === "show") && (((layout as string) === "grid") || ((layout as string) === "masonry")))}
+            <Box class="text-sm text-muted-foreground" data-testid="caption">
+              {p.title}
+            </Box>
+          {/if}
+        </FigureBlock>
+      {/each}
+    </Box>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/photo-gallery.types.ts b/packages/svelte/ui/src/blocks/photo-gallery.types.ts
new file mode 100644
index 0000000..d0b8e7c
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/photo-gallery.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Photo = {
+  id: string;
+  title: string;
+  tag: string;
+  size: string;
+};
+
+export type PhotoLabels = {
+  previous: string;
+  next: string;
+  counter: string;
+};
diff --git a/packages/svelte/ui/src/blocks/post-card.svelte b/packages/svelte/ui/src/blocks/post-card.svelte
new file mode 100644
index 0000000..78c5152
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/post-card.svelte
@@ -0,0 +1,147 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/content.ts -->
+<!--
+  A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout
+  (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only),
+  density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post, PostLabels } from "./post-card.types";
+
+  export type PostCardProps = {
+    post: Post;
+    labels: PostLabels;
+    layout?: "vertical" | "horizontal";
+    media?: "image" | "none";
+    meta?: "full" | "short" | "news";
+    density?: "default" | "compact";
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn, tpl } from "../utils";
+
+  let {
+    post,
+    labels,
+    layout = "vertical",
+    media = "image",
+    meta = "full",
+    density = "default",
+  }: PostCardProps = $props();
+</script>
+
+{#if ((meta as string) === "news")}
+  <Block
+    tag="article"
+    class={cn(
+      "flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border",
+      defaults.news.card
+    )}
+    data-testid="item"
+    data-layout={layout}
+    data-meta="news"
+  >
+    <Box class={cn("relative shrink-0 overflow-hidden", defaults.news.cover)} data-testid="news-cover">
+      <MediaFrame alt={post.title} src={post.image} class={cn("size-full", defaults.media.rounded)} />
+      <Title
+        as={3}
+        size="xs"
+        weight="semibold"
+        class={cn(
+          "pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground",
+          defaults.news.title
+        )}
+        data-testid="news-title"
+      >
+        {post.title}
+      </Title>
+    </Box>
+    <Group
+      gap="2"
+      align="center"
+      class={cn("w-full px-2 text-muted-foreground", defaults.news.strip)}
+      data-testid="news-date"
+    >
+      <LucideIcon name="calendar" size={16} />
+      <Text size="xs" weight="bold" class="leading-4">
+        {post.date}
+      </Text>
+      {#if post.category}
+        <Text size="xs" weight="bold" class="leading-4">
+          {post.category}
+        </Text>
+      {/if}
+    </Group>
+  </Block>
+{:else}
+  <Block
+    tag="article"
+    class={cn(
+      "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+      "h-full gap-4 overflow-hidden",
+      (((layout as string) === "horizontal") ? "flex flex-col sm:flex-row" : "flex flex-col")
+    )}
+    data-slot="card"
+    data-testid="item"
+    data-layout={layout}
+    data-meta={meta}
+  >
+    {#if ((media as string) === "image")}
+      <Box class={cn("relative shrink-0", (((layout as string) === "horizontal") ? "sm:w-64" : ""))}>
+        <MediaFrame alt={post.title} src={post.image} class="h-full" />
+      </Box>
+    {/if}
+    <CardContent class="flex flex-1 flex-col gap-2">
+      {#if ((meta as string) !== "news")}
+        <Group gap="2" align="center">
+          <LucideIcon name={post.icon} size={16} />
+          <Text size="xs" class="uppercase tracking-wide text-muted-foreground">
+            {post.category}
+          </Text>
+        </Group>
+      {/if}
+      <Title as={3} size="xl" weight="bold">
+        {post.title}
+      </Title>
+      {#if (((density as string) === "default") && ((meta as string) !== "news"))}
+        <Text size="sm" class="text-muted-foreground">
+          {post.excerpt}
+        </Text>
+      {/if}
+      {#if ((meta as string) !== "news")}
+        <Group gap="2" class="mt-auto flex-wrap pt-2 text-muted-foreground">
+          {#if ((meta as string) === "full")}
+            <Text size="xs">
+              {tpl(labels.by, post.author)}
+            </Text>
+          {/if}
+          <Text size="xs">
+            {post.date}
+          </Text>
+          {#if ((meta as string) === "full")}
+            <Text size="xs">
+              {tpl(labels.minutes, post.minutes)}
+            </Text>
+          {/if}
+        </Group>
+      {/if}
+      {#if (((meta as string) !== "news") && post.href)}
+        <Link href={post.href} variant="default" data-testid="read">
+          {labels.read}
+        </Link>
+      {/if}
+    </CardContent>
+  </Block>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/post-card.types.ts b/packages/svelte/ui/src/blocks/post-card.types.ts
new file mode 100644
index 0000000..ae8d4ce
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/post-card.types.ts
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+
+export type Post = {
+  id: string;
+  title: string;
+  excerpt: string;
+  category: string;
+  author: string;
+  date: string;
+  minutes: number;
+  icon: string;
+  href?: string;
+  image?: string;
+};
+
+export type PostLabels = {
+  minutes: string;
+  by: string;
+  read: string;
+  empty: string;
+};
diff --git a/packages/svelte/ui/src/blocks/post-grid.svelte b/packages/svelte/ui/src/blocks/post-grid.svelte
new file mode 100644
index 0000000..f893206
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/post-grid.svelte
@@ -0,0 +1,116 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/content.ts -->
+<!--
+  A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first
+  post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news),
+  filter mode (none, topics), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { PostTopic, PostFilter } from "./post-grid.types";
+  import type { Post, PostLabels } from "./post-card.types";
+  import type { HeadLink } from "../components/section-frame.types";
+
+  export type PostGridProps = {
+    id: string;
+    title: string;
+    posts: Post[];
+    labels: PostLabels;
+    action?: HeadLink;
+    filter?: PostFilter;
+    layout?: "grid" | "list" | "magazine";
+    cols?: "1-2" | "1-3" | "1-4";
+    media?: "image" | "none";
+    meta?: "full" | "short" | "news";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+    ontopic?: (value: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Grid from "../primitives/grid/grid.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import PostCard from "../blocks/post-card.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import Switcher from "../components/switcher.svelte";
+  import SwitcherItem from "../components/switcher-item.svelte";
+  import { fitCols } from "../utils";
+
+  let {
+    id,
+    title,
+    posts,
+    labels,
+    action,
+    filter,
+    layout = "grid",
+    cols = "1-3",
+    media = "image",
+    meta = "full",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+    ontopic,
+  }: PostGridProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  action={action}
+  tone={tone}
+  density={(((density as string) === "compact") ? "compact" : "default")}
+  measure={(((meta as string) === "news") ? "fill" : "default")}
+  class={(((meta as string) === "news") ? "py-0" : "")}
+  landmarkLabel={landmarkLabel}
+>
+  {#if (filter?.mode === "topics")}
+    <Switcher label={filter?.label}>
+      {#each filter?.topics as tab (tab.id)}
+        <SwitcherItem active={(tab.value === filter?.topic)} onclick={() => ontopic?.(tab.value)}>
+          {tab.title}
+        </SwitcherItem>
+      {/each}
+    </Switcher>
+  {/if}
+  {#if ((posts.filter((i) => !filter?.topic || i["category"] === filter?.topic)?.length ?? 0) > 0)}
+    {#if ((layout as string) === "magazine")}
+      <Stack gap="6" align="stretch" data-testid="items">
+        {#each posts.filter((i) => !filter?.topic || i["category"] === filter?.topic) as p, i (p.id)}
+          {#if (i === 0)}
+            <PostCard post={p} labels={labels} layout="horizontal" media={media} meta={meta} density={density} />
+          {/if}
+        {/each}
+        <Grid cols={cols} class="gap-6">
+          {#each posts.filter((i) => !filter?.topic || i["category"] === filter?.topic) as p, i (p.id)}
+            {#if (i > 0)}
+              <PostCard post={p} labels={labels} media={media} meta={meta} density={density} />
+            {/if}
+          {/each}
+        </Grid>
+      </Stack>
+    {:else}
+      <Grid
+        cols={
+          (layout as string) === "list" ? "1"
+          : fitCols(cols, (posts.filter((i) => !filter?.topic || i["category"] === filter?.topic)?.length ?? 0))
+        }
+        class="w-full gap-6"
+        data-testid="items"
+      >
+        {#each posts.filter((i) => !filter?.topic || i["category"] === filter?.topic) as p (p.id)}
+          <PostCard
+            post={p}
+            labels={labels}
+            layout={(((layout as string) === "list") ? "horizontal" : "vertical")}
+            media={media}
+            meta={meta}
+            density={density}
+          />
+        {/each}
+      </Grid>
+    {/if}
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/post-grid.types.ts b/packages/svelte/ui/src/blocks/post-grid.types.ts
new file mode 100644
index 0000000..73de7d6
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/post-grid.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+
+export type PostTopic = {
+  id: string;
+  title: string;
+  value: string;
+};
+
+export type PostFilter = {
+  /** topics: tabs above the posts; the page filters by `topic` */
+  mode?: "none" | "topics";
+  /** the topic tabs */
+  topics?: PostTopic[];
+  /** accessible name of the topic tabs */
+  label?: string;
+  /** the value of the chosen topic; empty: all posts */
+  topic?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/post-header.svelte b/packages/svelte/ui/src/blocks/post-header.svelte
new file mode 100644
index 0000000..926a031
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/post-header.svelte
@@ -0,0 +1,88 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/content.ts -->
+<!--
+  The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout
+  (start, center), cover (show, hide), meta (full, short), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post, PostLabels } from "./post-card.types";
+
+  export type PostHeaderProps = {
+    id: string;
+    post?: Post;
+    labels: PostLabels;
+    level?: 1 | 2;
+    layout?: "start" | "center";
+    cover?: "show" | "hide";
+    meta?: "full" | "short";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import Pill from "../components/pill.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    post,
+    labels,
+    level = 1,
+    layout = "start",
+    cover = "show",
+    meta = "full",
+    tone = "default",
+    landmarkLabel,
+  }: PostHeaderProps = $props();
+</script>
+
+{#if post}
+  <SectionFrame
+    id={id}
+    title={post?.title}
+    lead={post?.excerpt}
+    heading={{ level }}
+    align={layout}
+    tone={tone}
+    media={{ show: ((cover as string) === "show") }}
+    landmarkLabel={landmarkLabel}
+  >
+    <Group
+      gap="4"
+      align="center"
+      justify={(((layout as string) === "center") ? "center" : "start")}
+      class="flex-wrap"
+      data-testid="post-meta"
+    >
+      <MediaFrame alt={post?.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+      <Text size="sm" weight="semibold">
+        {post?.author}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {post?.date}
+      </Text>
+      {#if ((meta as string) === "full")}
+        <Text size="sm" class="text-muted-foreground">
+          {tpl(labels.minutes, post?.minutes)}
+        </Text>
+      {/if}
+      <Pill tone="blue">
+        {post?.category}
+      </Pill>
+    </Group>
+    {#snippet aside()}
+      <MediaFrame alt={post?.title} src={post?.image} ratio="21/9" />
+    {/snippet}
+  </SectionFrame>
+{:else}
+  <SectionFrame id={id} heading={{ level }} align={layout} tone={tone} landmarkLabel={landmarkLabel}>
+    <EmptyState icon="file-text" title={labels.empty} />
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/post-showcase.svelte b/packages/svelte/ui/src/blocks/post-showcase.svelte
new file mode 100644
index 0000000..ebdb28c
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/post-showcase.svelte
@@ -0,0 +1,122 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/post-showcase.ts -->
+<!--
+  Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured:
+  the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3:
+  overlay columns), mediaSide, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post, PostLabels } from "./post-card.types";
+  import type { HeadLink } from "../components/section-frame.types";
+
+  export type PostShowcaseProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    posts: Post[];
+    labels: PostLabels;
+    action: HeadLink;
+    layout?: "intro" | "featured" | "overlay";
+    cols?: "2" | "3";
+    mediaSide?: "end" | "start";
+    tone?: "default" | "muted";
+    empty?: string;
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import PostFeature from "../components/post-feature.svelte";
+  import PostMiniCard from "../components/post-mini-card.svelte";
+  import PostOverlayCard from "../components/post-overlay-card.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    posts,
+    labels,
+    action,
+    layout = "intro",
+    cols = "3",
+    mediaSide = "start",
+    tone = "default",
+    empty = "",
+    landmarkLabel,
+  }: PostShowcaseProps = $props();
+</script>
+
+{#if ((posts?.length ?? 0) === 0)}
+  <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+    <EmptyState icon="newspaper" title={empty} />
+  </SectionFrame>
+{:else if ((layout as string) === "intro")}
+  <SectionFrame
+    id={id}
+    title={title}
+    lead={lead}
+    heading={{ badge }}
+    tone={tone}
+    layout="split"
+    media={{ show: true, side: mediaSide }}
+    landmarkLabel={landmarkLabel}
+  >
+    <Link href={action.href} size="sm" data-testid="section-action">
+      {action.label}
+      <LucideIcon name="arrow-right" size={16} />
+    </Link>
+    {#snippet aside()}
+      <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        {#each posts as p, i (p.id)}
+          {#if (i < 4)}
+            <PostMiniCard p={p} labels={labels} />
+          {/if}
+        {/each}
+      </Box>
+    {/snippet}
+  </SectionFrame>
+{:else if ((layout as string) === "featured")}
+  <SectionFrame
+    id={id}
+    title={title}
+    lead={lead}
+    heading={{ badge }}
+    tone={tone}
+    layout="split"
+    media={{ show: true, side: mediaSide }}
+    landmarkLabel={landmarkLabel}
+  >
+    {#each posts as p, i (p.id)}
+      {#if (i < 1)}
+        <PostFeature p={p} labels={labels} />
+      {/if}
+    {/each}
+    {#snippet aside()}
+      <MediaFrame alt={title} ratio="4/3" />
+    {/snippet}
+  </SectionFrame>
+{:else}
+  <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+    <Box
+      class={
+        (cols as string) === "2" ? "grid grid-cols-1 gap-6 md:grid-cols-2"
+        : "grid grid-cols-1 gap-6 md:grid-cols-3"
+      }
+    >
+      {#each posts as p, i (p.id)}
+        {#if (i < (((cols as string) === "2") ? 2 : 3))}
+          <PostOverlayCard p={p} labels={labels} ratio={(((cols as string) === "2") ? "16/9" : "4/3")} />
+        {/if}
+      {/each}
+    </Box>
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/post-split.svelte b/packages/svelte/ui/src/blocks/post-split.svelte
new file mode 100644
index 0000000..277ff79
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/post-split.svelte
@@ -0,0 +1,126 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/post-split.ts -->
+<!--
+  A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags,
+  figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and
+  related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair,
+  wide, icons), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { PostExtras, PostSplitLabels } from "./post-split.types";
+  import type { Post } from "./post-card.types";
+  import type { NavLink } from "./nav-bar.types";
+
+  export type PostSplitProps = {
+    id: string;
+    post: Post;
+    labels: PostSplitLabels;
+    extras: PostExtras;
+    level?: 1 | 2;
+    layout?: "center" | "split" | "outline";
+    mediaSide?: "end" | "start";
+    author?: "line" | "card" | "bio";
+    cover?: "wide" | "square";
+    actions?: "pair" | "wide" | "icons";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import MediaFrame from "../components/media-frame.svelte";
+  import PostActions from "../components/post-actions.svelte";
+  import PostAuthor from "../components/post-author.svelte";
+  import PostOutline from "../components/post-outline.svelte";
+  import PostStats from "../components/post-stats.svelte";
+  import PostTags from "../components/post-tags.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    post,
+    labels,
+    extras,
+    level = 1,
+    layout = "split",
+    mediaSide = "end",
+    author = "line",
+    cover = "wide",
+    actions = "pair",
+    tone = "default",
+    landmarkLabel,
+  }: PostSplitProps = $props();
+</script>
+
+{#if ((layout as string) === "center")}
+  <SectionFrame
+    id={id}
+    title={post.title}
+    lead={post.excerpt}
+    heading={{ badge: post.category, level }}
+    tone={tone}
+    media={{ show: true }}
+    align="center"
+    landmarkLabel={landmarkLabel}
+  >
+    {#if ((extras.tags?.length ?? 0) > 0)}
+      <PostTags tags={extras.tags} align="center" />
+    {/if}
+    <PostStats post={post} extras={extras} labels={labels} align="center" />
+    <PostAuthor
+      post={post}
+      extras={extras}
+      labels={labels}
+      mode="card"
+      share={true}
+      class="mx-auto w-full max-w-md"
+    />
+    {#snippet aside()}
+      <MediaFrame
+        alt={post.title}
+        ratio={
+          (layout as string) === "center" ? "21/9"
+          : (cover as string) === "square" ? "1/1"
+          : "4/3"
+        }
+      />
+    {/snippet}
+  </SectionFrame>
+{:else}
+  <SectionFrame
+    id={id}
+    title={post.title}
+    lead={post.excerpt}
+    heading={{ badge: post.category, level }}
+    tone={tone}
+    media={{ show: true, side: mediaSide }}
+    layout="split"
+    landmarkLabel={landmarkLabel}
+  >
+    {#if ((layout as string) === "outline")}
+      {#if ((extras.outline?.length ?? 0) > 0)}
+        <PostOutline post={post} extras={extras} labels={labels} />
+      {/if}
+    {:else}
+      <PostAuthor post={post} extras={extras} labels={labels} mode={author} />
+      {#if ((author as string) !== "line")}
+        <PostStats post={post} extras={extras} labels={labels} />
+      {/if}
+      {#if ((extras.tags?.length ?? 0) > 0)}
+        <PostTags tags={extras.tags} />
+      {/if}
+    {/if}
+    <PostActions labels={labels} mode={actions} />
+    {#snippet aside()}
+      <MediaFrame
+        alt={post.title}
+        ratio={
+          (layout as string) === "center" ? "21/9"
+          : (cover as string) === "square" ? "1/1"
+          : "4/3"
+        }
+      />
+    {/snippet}
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/post-split.types.ts b/packages/svelte/ui/src/blocks/post-split.types.ts
new file mode 100644
index 0000000..8878db0
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/post-split.types.ts
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/post-split.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type PostExtras = {
+  role: string;
+  bio: string;
+  views: string;
+  likes: string;
+  tags: NavLink[];
+  outline: NavLink[];
+};
+
+export type PostSplitLabels = {
+  minutes: string;
+  views: string;
+  likes: string;
+  share: string;
+  save: string;
+  read: string;
+  related: string;
+};
diff --git a/packages/svelte/ui/src/blocks/pricing-card.svelte b/packages/svelte/ui/src/blocks/pricing-card.svelte
new file mode 100644
index 0000000..7fc8443
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/pricing-card.svelte
@@ -0,0 +1,120 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/pricing-card.ts -->
+<!--
+  A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more
+  actions. Text comes in through `labels`; the plan is data.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Plan, PricingCardLabels } from "./pricing-card.types";
+
+  export type PricingCardProps = {
+    plan: Plan;
+    labels: PricingCardLabels;
+    current?: boolean;
+    emphasis?: "auto" | "off";
+    density?: "default" | "compact";
+    billing?: "monthly" | "annual";
+    footer?: Snippet<[Plan]>;
+    onselect?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import CardDescription from "../primitives/card/card-description.svelte";
+  import CardFooter from "../primitives/card/card-footer.svelte";
+  import CardHeader from "../primitives/card/card-header.svelte";
+  import CardTitle from "../primitives/card/card-title.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import { cn, fmtMoney, tpl } from "../utils";
+
+  let {
+    plan,
+    labels,
+    current,
+    emphasis = "auto",
+    density = "default",
+    billing = "monthly",
+    footer,
+    onselect,
+  }: PricingCardProps = $props();
+  const stand = $derived(plan.highlighted && ((emphasis as string) === "auto"));
+  const yearlyOn = $derived(((billing as string) === "annual") && (plan.yearly > 0));
+  const amount = $derived(yearlyOn ? plan.yearly : plan.price);
+</script>
+
+<Block
+  tag="article"
+  class={cn(
+    "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+    "flex h-full flex-col"
+  )}
+  data-slot="card"
+  data-highlighted={(stand ? "true" : "false")}
+  data-current={(current ? "true" : "false")}
+>
+  <CardHeader class="flex flex-col gap-2">
+    <Box class="flex min-h-6 items-center" data-slot="badge-slot">
+      {#if stand}
+        <Badge variant="default" size="default">
+          {labels.popular}
+        </Badge>
+      {/if}
+    </Box>
+    <CardTitle as={3}>
+      {plan.name}
+    </CardTitle>
+    <CardDescription>
+      {plan.tagline}
+    </CardDescription>
+  </CardHeader>
+  <CardContent class={cn("flex flex-1 flex-col", (((density as string) === "compact") ? "gap-2" : "gap-4"))}>
+    <Group gap="2" align="baseline">
+      <Title as={2} size="4xl" weight="bold">
+        {#if (amount === 0)}
+          {labels.free}
+        {:else}
+          {fmtMoney(amount, plan.currency)}
+        {/if}
+      </Title>
+      {#if (amount > 0)}
+        <Text size="sm" class="text-muted-foreground">
+          {(yearlyOn ? labels.perYear : labels.perMonth)}
+        </Text>
+      {/if}
+    </Group>
+    <Text size="sm" weight="medium">
+      {tpl(labels.seats, plan.seats)}
+    </Text>
+    <Text size="sm" class="text-muted-foreground">
+      {tpl(labels.storage, plan.storage)}
+    </Text>
+    <List tag="ul" class="flex flex-col gap-2 text-sm">
+      {#each plan.features as feature (feature)}
+        <ListItem class="flex gap-2">
+          {feature}
+        </ListItem>
+      {/each}
+    </List>
+  </CardContent>
+  <CardFooter class="flex flex-wrap items-center gap-2">
+    <Button
+      variant={(stand ? "default" : "outline")}
+      size="default"
+      data-testid="plan-select"
+      onclick={() => onselect?.(plan.id)}
+    >
+      {labels.cta}
+    </Button>
+    {@render footer?.(plan)}
+  </CardFooter>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/pricing-card.types.ts b/packages/svelte/ui/src/blocks/pricing-card.types.ts
new file mode 100644
index 0000000..4394b1c
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/pricing-card.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-card.ts
+
+export type Plan = {
+  id: string;
+  name: string;
+  tagline: string;
+  price: number;
+  currency: string;
+  seats: number;
+  storage: number;
+  highlighted: boolean;
+  status?: string;
+  features: string[];
+  yearly: number;
+};
+
+export type PricingCardLabels = {
+  popular: string;
+  perMonth: string;
+  seats: string;
+  storage: string;
+  cta: string;
+  free: string;
+  perYear: string;
+  empty: string;
+};
diff --git a/packages/svelte/ui/src/blocks/pricing-tiers.svelte b/packages/svelte/ui/src/blocks/pricing-tiers.svelte
new file mode 100644
index 0000000..273efeb
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/pricing-tiers.svelte
@@ -0,0 +1,103 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing.ts -->
+<!--
+  A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid,
+  stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and
+  the prices of that period), density, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { BillingLabels } from "./pricing-tiers.types";
+  import type { Plan, PricingCardLabels } from "./pricing-card.types";
+
+  export type PricingTiersProps = {
+    id: string;
+    title: string;
+    plans: Plan[];
+    labels: PricingCardLabels;
+    billingLabels: BillingLabels;
+    layout?: "grid" | "stack";
+    cols?: "1-2" | "1-3" | "1-4";
+    emphasis?: "auto" | "off";
+    billing?: "off" | "monthly" | "annual";
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+    onselect?: (id: string) => void;
+    onbilling?: (period: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import PricingCard from "../blocks/pricing-card.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import Switcher from "../components/switcher.svelte";
+  import SwitcherItem from "../components/switcher-item.svelte";
+  import { fitCols } from "../utils";
+
+  let {
+    id,
+    title,
+    plans,
+    labels,
+    billingLabels,
+    layout = "grid",
+    cols = "1-3",
+    emphasis = "auto",
+    billing = "off",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+    onselect,
+    onbilling,
+  }: PricingTiersProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  tone={tone}
+  density={density}
+  measure={(((layout as string) === "stack") ? "md" : "default")}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((billing as string) !== "off")}
+    <Group gap="4" align="center" justify="center" class="flex-wrap" data-testid="billing">
+      <Switcher label={billingLabels.label}>
+        <SwitcherItem active={((billing as string) === "monthly")} onclick={() => onbilling?.("monthly")}>
+          {billingLabels.monthly}
+        </SwitcherItem>
+        <SwitcherItem active={((billing as string) === "annual")} onclick={() => onbilling?.("annual")}>
+          {billingLabels.annual}
+        </SwitcherItem>
+      </Switcher>
+      <Badge variant="default" size="default">
+        {billingLabels.save}
+      </Badge>
+    </Group>
+  {/if}
+  {#if ((plans?.length ?? 0) === 0)}
+    <EmptyState icon="layers" title={labels.empty} />
+  {:else}
+    <Grid
+      cols={(((layout as string) === "stack") ? "1" : fitCols(cols, (plans?.length ?? 0)))}
+      class="gap-4"
+      data-testid="tiers"
+    >
+      {#each plans as plan (plan.id)}
+        <PricingCard
+          plan={plan}
+          labels={labels}
+          emphasis={emphasis}
+          billing={(((billing as string) === "annual") ? "annual" : "monthly")}
+          density={(((density as string) === "compact") ? "compact" : "default")}
+          onselect={() => onselect?.(plan.id)}
+        />
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/pricing-tiers.types.ts b/packages/svelte/ui/src/blocks/pricing-tiers.types.ts
new file mode 100644
index 0000000..9e260af
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/pricing-tiers.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type BillingLabels = {
+  label: string;
+  monthly: string;
+  annual: string;
+  save: string;
+};
diff --git a/packages/svelte/ui/src/blocks/product-card.svelte b/packages/svelte/ui/src/blocks/product-card.svelte
new file mode 100644
index 0000000..8ff1f12
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/product-card.svelte
@@ -0,0 +1,129 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck
+  through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image,
+  none), ratio, rating (show, hide), action (button, none), density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Product, ProductLabels } from "./product-card.types";
+
+  export type ProductCardProps = {
+    product: Product;
+    labels: ProductLabels;
+    badges: Record<string, string>;
+    layout?: "vertical" | "horizontal";
+    media?: "image" | "none";
+    ratio?: "4/3" | "1/1" | "3/4";
+    rating?: "show" | "hide";
+    action?: "button" | "none";
+    density?: "default" | "compact";
+    onadd?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import Rating from "../components/rating.svelte";
+  import { at, cn, fmtMoney, tpl } from "../utils";
+
+  let {
+    product,
+    labels,
+    badges,
+    layout = "vertical",
+    media = "image",
+    ratio = "4/3",
+    rating = "show",
+    action = "button",
+    density = "default",
+    onadd,
+  }: ProductCardProps = $props();
+</script>
+
+<Block
+  tag="article"
+  class={cn(
+    "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+    "h-full gap-4 overflow-hidden",
+    (((layout as string) === "horizontal") ? "flex flex-col sm:flex-row" : "flex flex-col")
+  )}
+  data-slot="card"
+  data-testid="item"
+  data-layout={layout}
+>
+  {#if ((media as string) === "image")}
+    <Box class={cn("relative shrink-0", (((layout as string) === "horizontal") ? "sm:w-48" : ""))}>
+      <MediaFrame alt={product.name} src={product.image} ratio={ratio} class="h-full" />
+      {#if product.badge}
+        <Badge variant="default" size="default" class="absolute left-4 top-4" data-testid="badge">
+          {at(badges, product.badge)}
+        </Badge>
+      {/if}
+    </Box>
+  {/if}
+  <CardContent class="flex flex-1 flex-col gap-2">
+    <Text size="xs" class="uppercase tracking-wide text-muted-foreground">
+      {product.category}
+    </Text>
+    <Title as={3} size="base" weight="bold">
+      {#if product.href}
+        <Link href={product.href} variant="default" data-testid="open">
+          {product.name}
+        </Link>
+      {:else}
+        {product.name}
+      {/if}
+    </Title>
+    {#if ((rating as string) === "show")}
+      <Group gap="2">
+        <Rating value={product.rating} label={tpl(labels.ratingLabel, product.rating)} />
+        <Text size="xs" class="text-muted-foreground">
+          {tpl(labels.reviews, product.reviews)}
+        </Text>
+      </Group>
+    {/if}
+    {#if ((density as string) === "default")}
+      <Text size="sm" class="text-muted-foreground">
+        {product.summary}
+      </Text>
+    {/if}
+    <Group gap="4" justify="between" class="mt-auto pt-2">
+      <Group gap="2" align="baseline" class="flex-wrap">
+        <Text size="xl" weight="bold">
+          {fmtMoney(product.price, product.currency)}
+        </Text>
+        {#if (product.compareAt && (product.compareAt > product.price))}
+          <Text tag="del" size="sm" class="relative text-muted-foreground" data-testid="compare-at">
+            <Inline class="sr-only">
+              {labels.was}
+            </Inline>
+            {fmtMoney(product.compareAt, product.currency)}
+          </Text>
+        {/if}
+      </Group>
+      {#if ((action as string) === "button")}
+        <Button
+          variant={(product.inStock ? "default" : "outline")}
+          size="sm"
+          disabled={!product.inStock}
+          data-testid="add"
+          onclick={() => onadd?.(product.id)}
+        >
+          {(product.inStock ? labels.add : labels.soldOut)}
+        </Button>
+      {/if}
+    </Group>
+  </CardContent>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/product-card.types.ts b/packages/svelte/ui/src/blocks/product-card.types.ts
new file mode 100644
index 0000000..6faac52
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/product-card.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Product = {
+  id: string;
+  name: string;
+  summary: string;
+  price: number;
+  currency: string;
+  rating: number;
+  reviews: number;
+  badge?: string;
+  category: string;
+  inStock: boolean;
+  compareAt?: number;
+  href?: string;
+  image?: string;
+};
+
+export type ProductLabels = {
+  add: string;
+  soldOut: string;
+  reviews: string;
+  ratingLabel: string;
+  was: string;
+  empty: string;
+};
diff --git a/packages/svelte/ui/src/blocks/product-detail.svelte b/packages/svelte/ui/src/blocks/product-detail.svelte
new file mode 100644
index 0000000..69b7f28
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/product-detail.svelte
@@ -0,0 +1,143 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price,
+  stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs
+  (none, below), buy (full, compact), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { ProductDetailLabels } from "./product-detail.types";
+  import type { Product } from "./product-card.types";
+
+  export type ProductDetailProps = {
+    id: string;
+    product?: Product;
+    labels: ProductDetailLabels;
+    badges: Record<string, string>;
+    level?: 1 | 2;
+    layout?: "split" | "stacked";
+    mediaSide?: "start" | "end";
+    thumbs?: "none" | "below";
+    buy?: "full" | "compact";
+    tone?: "default" | "muted";
+    density?: "default" | "roomy";
+    landmarkLabel?: string;
+    onadd?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import NumberField from "../components/number-field.svelte";
+  import ProductGallery from "../components/product-gallery.svelte";
+  import ProductPrice from "../components/product-price.svelte";
+  import Rating from "../components/rating.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { at, tpl } from "../utils";
+
+  let {
+    id,
+    product,
+    labels,
+    badges,
+    level = 1,
+    layout = "split",
+    mediaSide = "start",
+    thumbs = "below",
+    buy = "full",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+    onadd,
+  }: ProductDetailProps = $props();
+</script>
+
+{#if !product}
+  <SectionFrame id={id} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+    <EmptyState icon="package" title={labels.empty} />
+  </SectionFrame>
+{:else}
+  <SectionFrame
+    id={id}
+    title={product?.name}
+    lead={product?.summary}
+    heading={{ level }}
+    layout={(((layout as string) === "split") ? "split" : "stack")}
+    media={{ show: true, side: mediaSide, align: "start" }}
+    tone={tone}
+    density={density}
+    landmarkLabel={landmarkLabel}
+  >
+    <Stack gap="4" align="stretch" data-testid="buy-box">
+      {#if product?.category}
+        <Text size="xs" class="uppercase tracking-wide text-muted-foreground" data-testid="category">
+          {product?.category}
+        </Text>
+      {/if}
+      <ProductPrice
+        price={product?.price}
+        compareAt={product?.compareAt}
+        currency={product?.currency}
+        badge={(product?.badge ? at(badges, product?.badge) : "")}
+        was={labels.was}
+      />
+      <Group gap="2">
+        <Rating value={product?.rating} label={tpl(labels.ratingLabel, product?.rating)} />
+        <Text size="sm" class="text-muted-foreground">
+          {tpl(labels.reviews, product?.reviews)}
+        </Text>
+      </Group>
+      <Text
+        size="sm"
+        weight="medium"
+        class={(product?.inStock ? "text-foreground" : "text-destructive")}
+        data-testid="stock"
+      >
+        {(product?.inStock ? labels.inStock : labels.soldOut)}
+      </Text>
+      <Group gap="4" class="flex-wrap">
+        {#if ((buy as string) === "full")}
+          <NumberField
+            value="1"
+            name={tpl("{0}-qty", id)}
+            min="1"
+            label={labels.qty}
+            decrease={labels.decrease}
+            increase={labels.increase}
+          />
+        {/if}
+        <Button disabled={!product?.inStock} data-testid="add" onclick={() => onadd?.(product?.id)}>
+          {labels.add}
+        </Button>
+      </Group>
+      {#if ((buy as string) === "full")}
+        <List tag="ul" class="flex flex-col gap-2 text-sm text-muted-foreground">
+          <ListItem class="flex items-center gap-2">
+            <LucideIcon name="truck" size={16} />
+            <Inline>
+              {labels.shipping}
+            </Inline>
+          </ListItem>
+          <ListItem class="flex items-center gap-2">
+            <LucideIcon name="shield-check" size={16} />
+            <Inline>
+              {labels.returns}
+            </Inline>
+          </ListItem>
+        </List>
+      {/if}
+    </Stack>
+    {#snippet aside()}
+      <ProductGallery name={product?.name} image={product?.image} thumbs={thumbs} />
+    {/snippet}
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/product-detail.types.ts b/packages/svelte/ui/src/blocks/product-detail.types.ts
new file mode 100644
index 0000000..ccba2ea
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/product-detail.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type ProductDetailLabels = {
+  add: string;
+  soldOut: string;
+  inStock: string;
+  qty: string;
+  decrease: string;
+  increase: string;
+  reviews: string;
+  ratingLabel: string;
+  shipping: string;
+  returns: string;
+  was: string;
+  empty: string;
+};
diff --git a/packages/svelte/ui/src/blocks/product-grid.svelte b/packages/svelte/ui/src/blocks/product-grid.svelte
new file mode 100644
index 0000000..f3c04e8
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/product-grid.svelte
@@ -0,0 +1,93 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that
+  scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating,
+  action, tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Product, ProductLabels } from "./product-card.types";
+
+  export type ProductGridProps = {
+    id: string;
+    title: string;
+    products: Product[];
+    labels: ProductLabels;
+    badges: Record<string, string>;
+    layout?: "grid" | "list" | "rail";
+    cols?: "1-2" | "1-3" | "1-4";
+    ratio?: "4/3" | "1/1" | "3/4";
+    rating?: "show" | "hide";
+    action?: "button" | "none";
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+    onadd?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import ProductCard from "../blocks/product-card.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    products,
+    labels,
+    badges,
+    layout = "grid",
+    cols = "1-3",
+    ratio = "4/3",
+    rating = "show",
+    action = "button",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+    onadd,
+  }: ProductGridProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((products?.length ?? 0) === 0)}
+    <EmptyState icon="package" title={labels.empty} />
+  {:else if ((layout as string) === "rail")}
+    <Box class="flex snap-x gap-4 overflow-x-auto pb-4" data-testid="items">
+      {#each products as p (p.id)}
+        <Box class="w-64 shrink-0 snap-start">
+          <ProductCard
+            product={p}
+            labels={labels}
+            badges={badges}
+            layout={(((layout as string) === "list") ? "horizontal" : "vertical")}
+            ratio={ratio}
+            rating={rating}
+            action={action}
+            density={(((density as string) === "compact") ? "compact" : "default")}
+            onadd={() => onadd?.(p.id)}
+          />
+        </Box>
+      {/each}
+    </Box>
+  {:else}
+    <Grid cols={(((layout as string) === "list") ? "1" : cols)} class="gap-4" data-testid="items">
+      {#each products as p (p.id)}
+        <ProductCard
+          product={p}
+          labels={labels}
+          badges={badges}
+          layout={(((layout as string) === "list") ? "horizontal" : "vertical")}
+          ratio={ratio}
+          rating={rating}
+          action={action}
+          density={(((density as string) === "compact") ? "compact" : "default")}
+          onadd={() => onadd?.(p.id)}
+        />
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/product-info.svelte b/packages/svelte/ui/src/blocks/product-info.svelte
new file mode 100644
index 0000000..cfc27de
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/product-info.svelte
@@ -0,0 +1,101 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/checkout.ts -->
+<!--
+  The details of a product under its buy box: texts in an accordion (native details) beside a card with the
+  specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text
+  open, none), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Detail, Spec, ProductInfoLabels } from "./product-info.types";
+
+  export type ProductInfoProps = {
+    id: string;
+    title: string;
+    details: Detail[];
+    specs: Spec[];
+    labels: ProductInfoLabels;
+    layout?: "split" | "stacked";
+    expand?: "first" | "none";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Disclosure from "../primitives/disclosure/disclosure.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Summary from "../primitives/disclosure/summary.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    details,
+    specs,
+    labels,
+    layout = "split",
+    expand = "first",
+    tone = "default",
+    landmarkLabel,
+  }: ProductInfoProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+  <Box
+    class={
+      (layout as string) === "split" ? "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"
+      : "grid grid-cols-1 gap-8"
+    }
+  >
+    {#if ((details?.length ?? 0) > 0)}
+      <Stack
+        gap="0"
+        align="stretch"
+        class={(((layout as string) === "split") ? "lg:col-span-2" : "")}
+        data-testid="items"
+      >
+        {#each details as d, i (d.id)}
+          <Disclosure variant="item" open={(((expand as string) === "first") && (i === 0))} data-testid="item">
+            <Summary variant="item">
+              <Inline class="text-base font-semibold">
+                {d.title}
+              </Inline>
+            </Summary>
+            <Text size="sm" class="pb-4 text-muted-foreground">
+              {d.text}
+            </Text>
+          </Disclosure>
+        {/each}
+      </Stack>
+    {/if}
+    {#if ((specs?.length ?? 0) > 0)}
+      <Stack gap="4" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="specs">
+        <Title as={3} size="lg" weight="bold">
+          {labels.specs}
+        </Title>
+        <List tag="ul" class="flex flex-col">
+          {#each specs as s (s.id)}
+            <ListItem
+              class="flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0"
+              data-testid="spec"
+            >
+              <Inline class="text-muted-foreground">
+                {s.label}
+              </Inline>
+              <Inline class="font-medium">
+                {s.value}
+              </Inline>
+            </ListItem>
+          {/each}
+        </List>
+      </Stack>
+    {/if}
+  </Box>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/product-info.types.ts b/packages/svelte/ui/src/blocks/product-info.types.ts
new file mode 100644
index 0000000..f315d66
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/product-info.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type Detail = {
+  id: string;
+  title: string;
+  text: string;
+};
+
+export type Spec = {
+  id: string;
+  label: string;
+  value: string;
+};
+
+export type ProductInfoLabels = {
+  specs: string;
+};
diff --git a/packages/svelte/ui/src/blocks/profile-form.svelte b/packages/svelte/ui/src/blocks/profile-form.svelte
new file mode 100644
index 0000000..c8ec5ac
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/profile-form.svelte
@@ -0,0 +1,116 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/account.ts -->
+<!--
+  An account settings form: a picture with a change button, name, email, bio and two notification switches, with
+  save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default,
+  muted).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { ProfileLabels } from "./profile-form.types";
+
+  export type ProfileFormProps = {
+    id: string;
+    title: string;
+    text: string;
+    labels: ProfileLabels;
+    layout?: "stacked" | "split";
+    avatar?: "show" | "hide";
+    prefs?: "show" | "hide";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Form from "../primitives/form/form.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Switch from "../primitives/switch/switch.svelte";
+  import Textarea from "../primitives/textarea/textarea.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import Field from "../components/field.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import Panel from "../components/panel.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    labels,
+    layout = "stacked",
+    avatar = "show",
+    prefs = "show",
+    tone = "default",
+    landmarkLabel,
+  }: ProfileFormProps = $props();
+</script>
+
+<Block
+  tag="section"
+  aria-labelledby={(landmarkLabel ? undefined : ((title && id) ? tpl("{0}-t", id) : undefined))}
+  data-testid="panel-section"
+  aria-label={landmarkLabel}
+>
+  <Container class="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+    <Panel title={title} description={text} id={id} class={cn((((tone as string) === "muted") ? "bg-muted" : ""))}>
+      <Form method="dialog" class="gap-6" data-testid="profile-form">
+        <Grid cols={(((layout as string) === "split") ? "1-2" : "1")} class="items-start gap-8">
+          <Stack gap="4" align="stretch">
+            {#if ((avatar as string) === "show")}
+              <Group gap="4" align="center" data-testid="avatar">
+                <MediaFrame alt={labels.picture} ratio="1/1" class="size-16 shrink-0 rounded-full" />
+                <Button variant="outline" size="sm" type="button">
+                  {labels.change}
+                </Button>
+              </Group>
+            {/if}
+            <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+              <Input type="text" name="name" autocomplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+            </Field>
+            <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+              <Input type="email" name="email" autocomplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+            </Field>
+            <Field label={labels.bio} htmlFor={tpl("{0}-bio", id)}>
+              <Textarea rows={4} name="bio" id={tpl("{0}-bio", id)} data-testid="field" />
+            </Field>
+          </Stack>
+          {#if ((prefs as string) === "show")}
+            <Stack gap="4" align="stretch" data-testid="prefs">
+              <Title as={3} size="base" weight="bold">
+                {labels.prefs}
+              </Title>
+              <Group gap="4" align="center" justify="between">
+                <Label for={tpl("{0}-updates", id)} class="text-sm">
+                  {labels.updates}
+                </Label>
+                <Switch name="updates" id={tpl("{0}-updates", id)} />
+              </Group>
+              <Group gap="4" align="center" justify="between">
+                <Label for={tpl("{0}-alerts", id)} class="text-sm">
+                  {labels.alerts}
+                </Label>
+                <Switch name="alerts" id={tpl("{0}-alerts", id)} />
+              </Group>
+            </Stack>
+          {/if}
+        </Grid>
+        <Group gap="2" class="flex-wrap">
+          <Button variant="default" size="default" type="submit" data-testid="submit">
+            {labels.save}
+          </Button>
+          <Button variant="outline" size="default" type="button">
+            {labels.cancel}
+          </Button>
+        </Group>
+      </Form>
+    </Panel>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/profile-form.types.ts b/packages/svelte/ui/src/blocks/profile-form.types.ts
new file mode 100644
index 0000000..3ac275b
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/profile-form.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+
+export type ProfileLabels = {
+  picture: string;
+  change: string;
+  name: string;
+  email: string;
+  bio: string;
+  prefs: string;
+  updates: string;
+  alerts: string;
+  save: string;
+  cancel: string;
+};
diff --git a/packages/svelte/ui/src/blocks/project-grid.svelte b/packages/svelte/ui/src/blocks/project-grid.svelte
new file mode 100644
index 0000000..34d5825
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/project-grid.svelte
@@ -0,0 +1,92 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/work.ts -->
+<!--
+  Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the
+  picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay,
+  bento, list), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Project, ProjectLabels } from "./project-grid.types";
+
+  export type ProjectGridProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    projects: Project[];
+    empty?: string;
+    labels: ProjectLabels;
+    layout?: "cards" | "compact" | "overlay" | "bento" | "list";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import ProjectTiles from "../components/project-tiles.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    projects,
+    empty = "",
+    labels,
+    layout = "cards",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: ProjectGridProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  tone={tone}
+  density={density}
+  layout={(((layout as string) === "list") ? "split" : "stack")}
+  media={{ show: ((layout as string) === "list"), align: "start" }}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((projects?.length ?? 0) === 0)}
+    <EmptyState icon="folder-open" title={empty} />
+  {:else if ((layout as string) === "list")}
+    <Stack gap="4" align="stretch" data-testid="items">
+      {#each projects as p (p.id)}
+        <Group gap="4" align="start" class="border-b border-border pb-4" data-testid="item">
+          <MediaFrame alt={p.title} ratio="1/1" class="size-16 shrink-0" />
+          <Stack gap="2" align="stretch" class="flex-1">
+            <Group gap="4" justify="between">
+              <Text size="sm" weight="semibold">
+                {p.title}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {p.year}
+              </Text>
+            </Group>
+            <Text size="sm" class="text-muted-foreground">
+              {p.summary}
+            </Text>
+          </Stack>
+        </Group>
+      {/each}
+    </Stack>
+  {:else}
+    <ProjectTiles projects={projects} labels={labels} layout={layout} />
+  {/if}
+  {#snippet aside()}
+    <Box class="grid grid-cols-2 gap-4" data-testid="collage">
+      <MediaFrame alt={title} ratio="3/4" />
+      <MediaFrame alt={title} ratio="3/4" class="mt-8" />
+    </Box>
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/project-grid.types.ts b/packages/svelte/ui/src/blocks/project-grid.types.ts
new file mode 100644
index 0000000..1075407
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/project-grid.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Project = {
+  id: string;
+  title: string;
+  category: string;
+  year: number;
+  summary: string;
+  tags: string[];
+  featured: boolean;
+  client: string;
+  href?: string;
+};
+
+export type ProjectLabels = {
+  featured: string;
+  view: string;
+  case: string;
+};
diff --git a/packages/svelte/ui/src/blocks/proof-band.svelte b/packages/svelte/ui/src/blocks/proof-band.svelte
new file mode 100644
index 0000000..bec5a67
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/proof-band.svelte
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above,
+  beside), logos (name, icon), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Logo } from "./logo-cloud.types";
+  import type { Stat } from "./stats-band.types";
+
+  export type ProofBandProps = {
+    id: string;
+    title: string;
+    logos: Logo[];
+    empty?: string;
+    stats: Stat[];
+    layout?: "above" | "beside";
+    logoStyle?: "name" | "icon";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    logos,
+    empty = "",
+    stats,
+    layout = "above",
+    logoStyle = "name",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: ProofBandProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} align="center" landmarkLabel={landmarkLabel}>
+  {#if ((logos?.length ?? 0) === 0)}
+    <EmptyState icon="building-2" title={empty} />
+  {:else}
+    <Grid cols={(((layout as string) === "beside") ? "1-2" : "1")} class="items-center gap-8">
+      <Group gap="6" justify="center" class="flex-wrap text-muted-foreground" data-testid="logos">
+        {#each logos as logo (logo.id)}
+          <Group gap="2" align="center" data-testid="logo">
+            <LucideIcon name={logo.icon} size={24} />
+            <Text size="sm" weight="semibold" class={(((logoStyle as string) === "icon") ? "sr-only" : "")}>
+              {logo.name}
+            </Text>
+          </Group>
+        {/each}
+      </Group>
+      <Grid cols={(((layout as string) === "beside") ? "2" : "1-4")} class="gap-6 text-center" data-testid="stats">
+        {#each stats as stat (stat.id)}
+          <Stack gap="0" align="center" data-testid="stat">
+            <Text size="4xl" weight="bold">
+              {stat.value}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {stat.label}
+            </Text>
+          </Stack>
+        {/each}
+      </Grid>
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/quote-split.svelte b/packages/svelte/ui/src/blocks/quote-split.svelte
new file mode 100644
index 0000000..432e1a6
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/quote-split.svelte
@@ -0,0 +1,140 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/quote-split.ts -->
+<!--
+  Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture,
+  logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three
+  stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured
+  quote beside a stack), mediaSide, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { QuoteExtras } from "./quote-split.types";
+  import type { Quote, QuoteLabels } from "./testimonial-grid.types";
+  import type { Stat } from "./stats-band.types";
+  import type { Logo } from "./logo-cloud.types";
+  import type { LinkActions } from "./error-page.types";
+
+  export type QuoteSplitProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    quotes: Quote[];
+    labels: QuoteLabels;
+    extras: QuoteExtras;
+    actions: LinkActions;
+    layout?: "media" | "logos" | "rating" | "stack" | "compact" | "bento";
+    mediaSide?: "end" | "start";
+    tone?: "default" | "muted";
+    empty?: string;
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import ActionGroup from "../components/action-group.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import QuoteFigures from "../components/quote-figures.svelte";
+  import QuoteLogoTiles from "../components/quote-logo-tiles.svelte";
+  import QuoteRatingPanel from "../components/quote-rating-panel.svelte";
+  import QuoteSlot from "../components/quote-slot.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    quotes,
+    labels,
+    extras,
+    actions,
+    layout = "media",
+    mediaSide = "end",
+    tone = "default",
+    empty = "",
+    landmarkLabel,
+  }: QuoteSplitProps = $props();
+</script>
+
+{#if ((quotes?.length ?? 0) === 0)}
+  <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+    <EmptyState icon="quote" title={empty} />
+  </SectionFrame>
+{:else if (((layout as string) === "compact") || ((layout as string) === "bento"))}
+  <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+    {#if ((layout as string) === "bento")}
+      <QuoteFigures extras={extras} />
+    {/if}
+    <Box
+      class={
+        (layout as string) === "bento" ? "grid grid-cols-1 gap-4 lg:grid-cols-2"
+        : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+      }
+    >
+      {#each quotes as q, i (q.id)}
+        <QuoteSlot
+          q={q}
+          labels={labels}
+          layout={((((layout as string) === "bento") && (i === 0)) ? "single" : "grid")}
+          class={((((layout as string) === "bento") && (i === 0)) ? "lg:row-span-3" : "")}
+        />
+      {/each}
+    </Box>
+  </SectionFrame>
+{:else}
+  <SectionFrame
+    id={id}
+    title={title}
+    lead={lead}
+    heading={{ badge }}
+    tone={tone}
+    layout="split"
+    media={{ show: true, side: mediaSide }}
+    landmarkLabel={landmarkLabel}
+  >
+    {#if (((layout as string) === "media") || ((layout as string) === "logos") || ((layout as string) === "rating"))}
+      {#each quotes as q, i (q.id)}
+        {#if (i < 1)}
+          <QuoteSlot
+            q={q}
+            labels={labels}
+            kind={(((layout as string) === "media") ? "card" : "plain")}
+            layout="single"
+            class=""
+          />
+        {/if}
+      {/each}
+    {/if}
+    {#if ((layout as string) === "logos")}
+      <QuoteLogoTiles extras={extras} />
+    {/if}
+    {#if ((layout as string) === "stack")}
+      <Stack gap="4" align="stretch">
+        {#each quotes as q, i (q.id)}
+          {#if (i < 3)}
+            <QuoteSlot q={q} labels={labels} layout="stack" class="" />
+          {/if}
+        {/each}
+      </Stack>
+    {/if}
+    {#if (((layout as string) === "media") || ((layout as string) === "logos") || ((layout as string) === "rating"))}
+      <ActionGroup
+        primary={actions.cta}
+        primaryHref={actions.href}
+        secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+        secondaryHref={actions.secondaryHref}
+      />
+    {/if}
+    {#snippet aside()}
+      {#if ((layout as string) === "rating")}
+        <QuoteRatingPanel extras={extras} labels={labels} />
+      {:else}
+        <MediaFrame alt={title} ratio="4/3" />
+      {/if}
+    {/snippet}
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/quote-split.types.ts b/packages/svelte/ui/src/blocks/quote-split.types.ts
new file mode 100644
index 0000000..2f2e305
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/quote-split.types.ts
@@ -0,0 +1,13 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/quote-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Logo } from "./logo-cloud.types";
+
+export type QuoteExtras = {
+  stats: Stat[];
+  logos: Logo[];
+  rating: number;
+  score: string;
+  reviews: string;
+};
diff --git a/packages/svelte/ui/src/blocks/review-list.svelte b/packages/svelte/ui/src/blocks/review-list.svelte
new file mode 100644
index 0000000..002e4eb
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/review-list.svelte
@@ -0,0 +1,98 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid),
+  columns, item (card, plain), avatar (none, image), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Review, ReviewLabels } from "./review-list.types";
+
+  export type ReviewListProps = {
+    id: string;
+    title: string;
+    reviews: Review[];
+    labels: ReviewLabels;
+    layout?: "list" | "grid";
+    item?: "card" | "plain";
+    avatar?: "none" | "image";
+    tone?: "default" | "muted";
+    density?: "default" | "roomy";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import ArticleBlock from "../components/article-block.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import Rating from "../components/rating.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    reviews,
+    labels,
+    layout = "list",
+    item = "card",
+    avatar = "none",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: ReviewListProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  tone={tone}
+  density={density}
+  measure={(((layout as string) === "list") ? "2xl" : "default")}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((reviews?.length ?? 0) === 0)}
+    <EmptyState icon="message-square-quote" title={labels.empty} />
+  {/if}
+  <Grid cols={(((layout as string) === "grid") ? "1-3" : "1")} class="gap-4" data-testid="items">
+    {#each reviews as r (r.id)}
+      <ArticleBlock
+        class={cn(
+          "flex h-full flex-col gap-4",
+          (
+            (item as string) === "card" ? "rounded bg-card p-6 inset-ring inset-ring-border"
+            : "border-b border-border pb-4"
+          )
+        )}
+        testid="item"
+      >
+        <Rating value={r.rating} label={tpl(labels.ratingLabel, r.rating)} />
+        <Title as={3} size="base" weight="bold">
+          {r.title}
+        </Title>
+        <Text size="sm" class="text-muted-foreground">
+          {r.text}
+        </Text>
+        <Group gap="4" align="center" class="mt-auto">
+          {#if ((avatar as string) === "image")}
+            <MediaFrame alt={r.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+          {/if}
+          <Stack gap="0">
+            <Text size="sm" weight="semibold">
+              {r.author}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {r.date}
+            </Text>
+          </Stack>
+        </Group>
+      </ArticleBlock>
+    {/each}
+  </Grid>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/review-list.types.ts b/packages/svelte/ui/src/blocks/review-list.types.ts
new file mode 100644
index 0000000..f4aac17
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/review-list.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Review = {
+  id: string;
+  title: string;
+  author: string;
+  rating: number;
+  text: string;
+  date: string;
+};
+
+export type ReviewLabels = {
+  ratingLabel: string;
+  empty: string;
+};
diff --git a/packages/svelte/ui/src/blocks/shopping-cart.svelte b/packages/svelte/ui/src/blocks/shopping-cart.svelte
new file mode 100644
index 0000000..bbf3240
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/shopping-cart.svelte
@@ -0,0 +1,136 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/checkout.ts -->
+<!--
+  The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the
+  way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout
+  (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { ShoppingCartLabels } from "./shopping-cart.types";
+  import type { CartLine, CartLabels } from "./cart-list.types";
+  import type { SummaryRow } from "./order-summary.types";
+  import type { Promo, CartSummaryLabels } from "../components/cart-summary-card.types";
+
+  export type ShoppingCartProps = {
+    id: string;
+    title: string;
+    lines: CartLine[];
+    rows: SummaryRow[];
+    promos: Promo[];
+    labels: CartLabels;
+    totals: CartSummaryLabels;
+    actions: ShoppingCartLabels;
+    layout?: "split" | "stacked";
+    promo?: "show" | "hide";
+    progress?: "show" | "hide";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import CartSummaryCard from "../components/cart-summary-card.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import NumberField from "../components/number-field.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { fmtMoney, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lines,
+    rows,
+    promos,
+    labels,
+    totals,
+    actions,
+    layout = "split",
+    promo = "show",
+    progress = "show",
+    tone = "default",
+    landmarkLabel,
+  }: ShoppingCartProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+  <Box
+    class={
+      (layout as string) === "split" ? "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"
+      : "grid grid-cols-1 gap-8"
+    }
+  >
+    <Stack
+      gap="4"
+      align="stretch"
+      class={(((layout as string) === "split") ? "lg:col-span-2" : "")}
+      data-testid="lines"
+    >
+      {#if ((lines?.length ?? 0) === 0)}
+        <EmptyState icon="shopping-cart" title={actions.empty} />
+      {/if}
+      {#each lines as line (line.id)}
+        <Group
+          gap="4"
+          align="center"
+          class="rounded bg-card inset-ring inset-ring-border flex-wrap p-4"
+          data-testid="item"
+        >
+          <MediaFrame alt={line.name} ratio="1/1" class="size-20 shrink-0" />
+          <Stack gap="0" class="min-w-40 flex-1">
+            <Text size="sm" weight="semibold">
+              {line.name}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {line.variant}
+            </Text>
+            <Text size="sm">
+              {fmtMoney(line.price, line.currency)}
+            </Text>
+          </Stack>
+          <NumberField
+            value={(line.qty == null ? undefined : String(line.qty))}
+            name={tpl("{0}-qty-{1}", id, line.id)}
+            min="1"
+            label={labels.qty}
+            decrease={labels.decrease}
+            increase={labels.increase}
+          />
+          <Text size="base" weight="bold" class="w-24 text-right">
+            {fmtMoney((line.price * line.qty), line.currency)}
+          </Text>
+          <Button variant="ghost" size="sm" layout="icon" aria-label={labels.remove} data-testid="remove">
+            <LucideIcon name="trash" size={16} />
+          </Button>
+        </Group>
+      {/each}
+      <Group gap="4" justify="between" class="flex-wrap">
+        <Button variant="outline" size="default">
+          <LucideIcon name="arrow-left" size={16} />
+          {actions.back}
+        </Button>
+        <Button variant="ghost" size="default">
+          {actions.clear}
+        </Button>
+      </Group>
+    </Stack>
+    <Box class={(((layout as string) === "split") ? "lg:sticky lg:top-8" : "")} data-testid="aside">
+      <CartSummaryCard
+        field={tpl("{0}-promo", id)}
+        lines={lines}
+        rows={rows}
+        promos={promos}
+        labels={totals}
+        promo={promo}
+        progress={progress}
+      />
+    </Box>
+  </Box>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/shopping-cart.types.ts b/packages/svelte/ui/src/blocks/shopping-cart.types.ts
new file mode 100644
index 0000000..9e785e9
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/shopping-cart.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type ShoppingCartLabels = {
+  back: string;
+  clear: string;
+  empty: string;
+};
diff --git a/packages/svelte/ui/src/blocks/sidebar-nav.svelte b/packages/svelte/ui/src/blocks/sidebar-nav.svelte
new file mode 100644
index 0000000..2b4b45d
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/sidebar-nav.svelte
@@ -0,0 +1,113 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full:
+  icon and name, compact: icons only with the name hidden), user (show, hide), density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { NavLink } from "./nav-bar.types";
+
+  export type SidebarNavProps = {
+    label: string;
+    brand: string;
+    links: NavLink[];
+    current?: string;
+    userName: string;
+    userEmail: string;
+    width?: "full" | "compact";
+    user?: "show" | "hide";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let {
+    label,
+    brand,
+    links,
+    current = "",
+    userName,
+    userEmail,
+    width = "full",
+    user = "show",
+    density = "default",
+    landmarkLabel,
+  }: SidebarNavProps = $props();
+</script>
+
+<Block
+  tag="aside"
+  class={cn(
+    "flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border",
+    (((width as string) === "compact") ? "w-20 items-center" : "w-64")
+  )}
+  aria-label={(landmarkLabel ?? brand)}
+  data-testid="sidebar"
+  data-width={width}
+>
+  <Group gap="2" align="center">
+    <LucideIcon name="layers" size={24} />
+    <Text size="base" weight="bold" class={(((width as string) === "compact") ? "sr-only" : "")}>
+      {brand}
+    </Text>
+  </Group>
+  {#if ((links?.length ?? 0) > 0)}
+    <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)} class="flex-1">
+      <List
+        class={cn(
+          "m-0 flex list-none flex-col p-0",
+          (((density as string) === "compact") ? "gap-0" : "gap-2")
+        )}
+        data-testid="items"
+      >
+        {#each links as l (l.id)}
+          <ListItem>
+            <MenuEntry
+              href={l.href}
+              class={cn(
+                "flex items-center gap-4 rounded px-4 text-sm",
+                "py-2",
+                ((l.id === current) ? "bg-muted font-semibold" : "")
+              )}
+              current={(l.id === current)}
+              testid="item"
+            >
+              <LucideIcon name={l.icon} size={16} />
+              <Inline class={(((width as string) === "compact") ? "sr-only" : "")}>
+                {l.name}
+              </Inline>
+            </MenuEntry>
+          </ListItem>
+        {/each}
+      </List>
+    </NavBlock>
+  {/if}
+  {#if ((user as string) === "show")}
+    <Group gap="4" align="center" class="border-t border-border pt-4" data-testid="user">
+      <MediaFrame alt={userName} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+      <Stack gap="0" class={(((width as string) === "compact") ? "sr-only" : "min-w-0")}>
+        <Text size="sm" weight="semibold">
+          {userName}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {userEmail}
+        </Text>
+      </Stack>
+    </Group>
+  {/if}
+</Block>
diff --git a/packages/svelte/ui/src/blocks/signup-wizard.svelte b/packages/svelte/ui/src/blocks/signup-wizard.svelte
new file mode 100644
index 0000000..61a9687
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/signup-wizard.svelte
@@ -0,0 +1,140 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/signup.ts -->
+<!--
+  A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown,
+  counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values
+  between steps is the page's job.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { WizardStep, WizardLabels } from "./signup-wizard.types";
+
+  export type SignupWizardProps = {
+    id: string;
+    title: string;
+    steps: WizardStep[];
+    labels: WizardLabels;
+    current?: number;
+    level?: 1 | 2;
+    progress?: "bar" | "list";
+    layout?: "card" | "plain";
+    landmarkLabel?: string;
+    ongo?: (step: number) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Progress from "../primitives/form/progress.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import Field from "../components/field.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    steps,
+    labels,
+    current = 1,
+    level = 2,
+    progress = "bar",
+    layout = "card",
+    landmarkLabel,
+    ongo,
+  }: SignupWizardProps = $props();
+</script>
+
+{#if ((steps?.length ?? 0) > 0)}
+  <Block
+    tag="section"
+    class={cn(
+      "mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8",
+      (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+    )}
+    aria-labelledby={(landmarkLabel ? undefined : tpl("{0}-title", id))}
+    data-testid="wizard"
+    data-current={(current == null ? undefined : String(current))}
+    aria-label={landmarkLabel}
+  >
+    <Title as={level} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+      {title}
+    </Title>
+    <Text size="sm" class="text-muted-foreground" data-testid="step-of">
+      {tpl(labels.stepOf, current, (steps?.length ?? 0))}
+    </Text>
+    {#if ((progress as string) === "bar")}
+      <Progress
+        value={(current == null ? undefined : String(current))}
+        max={((steps?.length ?? 0) == null ? undefined : String((steps?.length ?? 0)))}
+        aria-label={labels.steps}
+      />
+    {/if}
+    {#if ((progress as string) === "list")}
+      <List class="m-0 flex list-none flex-col gap-2 p-0" aria-label={labels.steps} data-testid="step-list">
+        {#each steps as s, i (s.id)}
+          <ListItem
+            class={cn(
+              "flex items-center gap-4 text-sm",
+              (((i + 1) === current) ? "font-semibold" : "text-muted-foreground")
+            )}
+            aria-current={(((i + 1) === current) ? "step" : undefined)}
+            data-testid="step-item"
+          >
+            <LucideIcon name={(((i + 1) < current) ? "circle-check" : s.icon)} size={16} />
+            {s.title}
+          </ListItem>
+        {/each}
+      </List>
+    {/if}
+    {#each steps as s, i (s.id)}
+      {#if ((i + 1) === current)}
+        <Stack gap="4" align="stretch" data-testid="step">
+          <Title as={3} size="xl" weight="bold">
+            {s.title}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {s.text}
+          </Text>
+          <Box class="grid gap-4">
+            <Field label={s.fieldA} htmlFor={tpl("{0}-a", id)}>
+              <Input type="text" name={tpl("{0}-a", id)} id={tpl("{0}-a", id)} data-testid="field" />
+            </Field>
+            <Field label={s.fieldB} htmlFor={tpl("{0}-b", id)}>
+              <Input type="text" name={tpl("{0}-b", id)} id={tpl("{0}-b", id)} data-testid="field" />
+            </Field>
+          </Box>
+        </Stack>
+      {/if}
+    {/each}
+    <Group gap="2" justify="between">
+      <Button
+        variant="outline"
+        size="default"
+        type="button"
+        disabled={(current < 2)}
+        data-testid="wizard-back"
+        onclick={() => ongo?.((current - 1))}
+      >
+        {labels.back}
+      </Button>
+      <Button
+        variant="default"
+        size="default"
+        type="button"
+        data-testid="wizard-next"
+        onclick={() => ongo?.((current + 1))}
+      >
+        {((current >= (steps?.length ?? 0)) ? labels.finish : labels.next)}
+      </Button>
+    </Group>
+  </Block>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/signup-wizard.types.ts b/packages/svelte/ui/src/blocks/signup-wizard.types.ts
new file mode 100644
index 0000000..bfaf060
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/signup-wizard.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+
+export type WizardStep = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  fieldA: string;
+  fieldB: string;
+};
+
+export type WizardLabels = {
+  stepOf: string;
+  steps: string;
+  back: string;
+  next: string;
+  finish: string;
+};
diff --git a/packages/svelte/ui/src/blocks/site-footer.svelte b/packages/svelte/ui/src/blocks/site-footer.svelte
new file mode 100644
index 0000000..e3a2c6e
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/site-footer.svelte
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/site.ts -->
+<!--
+  The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density
+  (default, compact).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { SiteFooterLabels } from "./site-footer.types";
+  import type { SiteRoutes } from "./site-header.types";
+
+  export type SiteFooterProps = {
+    labels: SiteFooterLabels;
+    routes?: SiteRoutes;
+    layout?: "minimal" | "centered";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let { labels, routes, layout = "minimal", density = "default", landmarkLabel }: SiteFooterProps = $props();
+</script>
+
+<Block
+  tag="footer"
+  class="mt-12 border-t border-border"
+  data-testid="site-footer"
+  data-layout={layout}
+  aria-label={landmarkLabel}
+>
+  <Container
+    class={cn(
+      "mx-auto w-full max-w-6xl px-4",
+      "flex flex-wrap items-center gap-4",
+      (((density as string) === "compact") ? "py-4" : "py-6"),
+      (((layout as string) === "centered") ? "flex-col text-center" : "justify-between")
+    )}
+    data-slot="container"
+  >
+    <Text size="sm" class="text-muted-foreground" data-testid="copyright">
+      {labels.copyright}
+    </Text>
+    <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", labels.nav, landmarkLabel)) : labels.nav)}>
+      <Group gap="4">
+        <MenuEntry href={routes?.home} class="font-semibold">
+          {labels.home}
+        </MenuEntry>
+        <MenuEntry href={routes?.pricing} class="font-semibold">
+          {labels.pricing}
+        </MenuEntry>
+      </Group>
+    </NavBlock>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/site-footer.types.ts b/packages/svelte/ui/src/blocks/site-footer.types.ts
new file mode 100644
index 0000000..be44645
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/site-footer.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type SiteFooterLabels = {
+  copyright: string;
+  nav: string;
+  home: string;
+  pricing: string;
+};
diff --git a/packages/svelte/ui/src/blocks/site-header.svelte b/packages/svelte/ui/src/blocks/site-header.svelte
new file mode 100644
index 0000000..13f816e
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/site-header.svelte
@@ -0,0 +1,113 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/site.ts -->
+<!--
+  The page header: a skip link to the main content, the brand, the two navigation links (the current one carries
+  aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position
+  (static, sticky), actions (none, cta).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { SiteHeaderLabels, SiteRoutes } from "./site-header.types";
+
+  export type SiteHeaderProps = {
+    labels: SiteHeaderLabels;
+    routes?: SiteRoutes;
+    current: string;
+    layout?: "inline" | "stacked";
+    position?: "static" | "sticky";
+    actions?: "none" | "cta";
+    cta?: string;
+    ctaHref?: string;
+    landmarkLabel?: string;
+    ontheme?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LinkPlain from "../primitives/link-plain/link-plain.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let {
+    labels,
+    routes,
+    current,
+    layout = "inline",
+    position = "static",
+    actions = "none",
+    cta,
+    ctaHref,
+    landmarkLabel,
+    ontheme,
+  }: SiteHeaderProps = $props();
+</script>
+
+<Block
+  tag="header"
+  class={cn(
+    "border-b border-border bg-background",
+    (((position as string) === "sticky") ? "sticky top-0 z-40" : "")
+  )}
+  data-testid="site-header"
+  data-layout={layout}
+  aria-label={landmarkLabel}
+>
+  <LinkPlain
+    href="#main-content"
+    class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+      "focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border"}
+    data-testid="skip-link"
+  >
+    {labels.skip}
+  </LinkPlain>
+  <Container
+    class={cn(
+      "mx-auto w-full max-w-6xl px-4",
+      "flex flex-wrap gap-4 py-4",
+      (((layout as string) === "stacked") ? "flex-col items-center" : "items-center justify-between")
+    )}
+    data-slot="container"
+  >
+    <MenuEntry href={routes?.home} class="text-lg font-medium" testid="brand">
+      {labels.brand}
+    </MenuEntry>
+    <NavBlock
+      label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", labels.nav, landmarkLabel)) : labels.nav)}
+      testid="site-nav"
+    >
+      <Group gap="4" align="center">
+        <MenuEntry
+          href={routes?.home}
+          class="font-semibold"
+          current={((current as string) === "home")}
+          testid="nav-link"
+        >
+          {labels.home}
+        </MenuEntry>
+        <MenuEntry
+          href={routes?.pricing}
+          class="font-semibold"
+          current={((current as string) === "pricing")}
+          testid="nav-link"
+        >
+          {labels.pricing}
+        </MenuEntry>
+      </Group>
+    </NavBlock>
+    <Group gap="4" align="center">
+      <Button variant="outline" size="sm" data-testid="theme-toggle" onclick={() => ontheme?.()}>
+        {labels.theme}
+      </Button>
+      {#if (((actions as string) === "cta") && cta)}
+        <Button variant="default" size="sm" href={ctaHref} data-testid="header-cta">
+          {cta}
+        </Button>
+      {/if}
+    </Group>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/blocks/site-header.types.ts b/packages/svelte/ui/src/blocks/site-header.types.ts
new file mode 100644
index 0000000..0ef0ca2
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/site-header.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type SiteHeaderLabels = {
+  skip: string;
+  brand: string;
+  nav: string;
+  home: string;
+  pricing: string;
+  theme: string;
+};
+
+export type SiteRoutes = {
+  home?: string;
+  pricing?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/sitemap-footer.svelte b/packages/svelte/ui/src/blocks/sitemap-footer.svelte
new file mode 100644
index 0000000..b3beb3a
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/sitemap-footer.svelte
@@ -0,0 +1,143 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above,
+  equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none,
+  first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status
+  itself is a port contract.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { FooterSignup, FooterStatus } from "./sitemap-footer.types";
+  import type { MegaGroup } from "./mega-menu.types";
+
+  export type SitemapFooterProps = {
+    label: string;
+    brand: string;
+    tagline: string;
+    copyright: string;
+    groups: MegaGroup[];
+    signup?: FooterSignup;
+    status?: FooterStatus;
+    id?: string;
+    layout?: "columns" | "row" | "card";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Form from "../primitives/form/form.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import FooterCard from "../components/footer-card.svelte";
+  import FooterColumns from "../components/footer-columns.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import Pill from "../components/pill.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let {
+    label,
+    brand,
+    tagline,
+    copyright,
+    groups,
+    signup,
+    status,
+    id = "footer",
+    layout = "columns",
+    density = "default",
+    landmarkLabel,
+  }: SitemapFooterProps = $props();
+</script>
+
+{#if ((layout as string) === "card")}
+  <FooterCard label={label} brand={brand} groups={groups} landmarkLabel={landmarkLabel} />
+{:else}
+  <Block
+    tag="footer"
+    class="mt-12 border-t border-border"
+    data-testid="site-footer"
+    data-layout={layout}
+    aria-label={landmarkLabel}
+  >
+    <Container
+      class={cn(
+        "mx-auto w-full max-w-6xl px-4",
+        "flex flex-col gap-8",
+        (((density as string) === "compact") ? "py-6" : "py-12")
+      )}
+      data-slot="container"
+    >
+      {#if (signup?.mode === "first")}
+        <Stack gap="4" class="max-w-md" data-testid="signup">
+          <Title as={3} size="xl" weight="bold">
+            {signup?.title}
+          </Title>
+          <Form method="dialog" class={cn("w-full max-w-md", (false ? "mx-auto" : ""))} data-testid="email-form">
+            <Label for={tpl("{0}-email", id)} class="sr-only">
+              {signup?.label}
+            </Label>
+            <Group gap="2" align="start" class="w-full flex-wrap">
+              <Input type="email" name="email" class="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+              <Button variant="default" size="default" type="submit" data-testid="submit">
+                {signup?.submit}
+              </Button>
+            </Group>
+          </Form>
+        </Stack>
+      {/if}
+      {#if ((layout as string) === "columns")}
+        <Box class="flex flex-col gap-8 md:flex-row md:items-start md:gap-12" data-slot="footer-top">
+          <Stack gap="2" class="md:w-64 md:shrink-0">
+            <Text size="xl" weight="bold">
+              {brand}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {tagline}
+            </Text>
+          </Stack>
+          <Box class="min-w-0 flex-1">
+            <FooterColumns label={label} groups={groups} landmarkLabel={landmarkLabel} />
+          </Box>
+        </Box>
+      {:else}
+        <Group gap="6" align="center" justify="between" class="flex-wrap">
+          <Text size="base" weight="bold">
+            {brand}
+          </Text>
+          {#if ((groups?.length ?? 0) > 0)}
+            <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)}>
+              <Group gap="4" class="flex-wrap">
+                {#each groups as g (g.id)}
+                  <MenuEntry href={g.href} class="text-sm" testid="group">
+                    {g.title}
+                  </MenuEntry>
+                {/each}
+              </Group>
+            </NavBlock>
+          {/if}
+        </Group>
+      {/if}
+      <Group gap="4" align="center" justify="between" class="flex-wrap border-t border-border pt-6">
+        <Text size="sm" class="text-muted-foreground">
+          {copyright}
+        </Text>
+        {#if (status?.mode === "show")}
+          <Pill tone="green" icon="circle-check">
+            {status?.label}
+          </Pill>
+        {/if}
+      </Group>
+    </Container>
+  </Block>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/sitemap-footer.types.ts b/packages/svelte/ui/src/blocks/sitemap-footer.types.ts
new file mode 100644
index 0000000..ca75815
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/sitemap-footer.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+export type FooterSignup = {
+  /** first: the sign-up comes before the links */
+  mode?: "none" | "first";
+  title?: string;
+  /** accessible name of the email field */
+  label?: string;
+  submit?: string;
+};
+
+export type FooterStatus = {
+  /** show: the status pill is drawn */
+  mode?: "none" | "show";
+  /** text of the pill */
+  label?: string;
+};
diff --git a/packages/svelte/ui/src/blocks/skeleton-layout.svelte b/packages/svelte/ui/src/blocks/skeleton-layout.svelte
new file mode 100644
index 0000000..bfa3111
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/skeleton-layout.svelte
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or
+  an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content
+  is loading. The shimmer itself belongs to the Skeleton part.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Line } from "./skeleton-layout.types";
+
+  export type SkeletonLayoutProps = {
+    id: string;
+    title: string;
+    label: string;
+    lines: Line[];
+    shape?: "cards" | "list" | "article";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Skeleton from "../primitives/skeleton/skeleton.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    label,
+    lines,
+    shape = "cards",
+    tone = "default",
+    landmarkLabel,
+  }: SkeletonLayoutProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+  <Block tag="div" class="w-full" role="status" aria-label={label} data-testid="skeleton" data-shape={shape}>
+    {#if ((shape as string) === "cards")}
+      <Grid cols="1-3" class="gap-4">
+        {#each lines as l (l.id)}
+          <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="item">
+            <Skeleton class="aspect-video w-full" />
+            <Skeleton class="h-4 w-2/3" />
+            <Skeleton class="h-4 w-full" />
+          </Stack>
+        {/each}
+      </Grid>
+    {:else if ((shape as string) === "list")}
+      <Stack gap="4" align="stretch">
+        {#each lines as l (l.id)}
+          <Group gap="4" align="center" data-testid="item">
+            <Skeleton class="size-10 shrink-0 rounded-full" />
+            <Stack gap="2" class="flex-1">
+              <Skeleton class="h-4 w-1/3" />
+              <Skeleton class="h-4 w-full" />
+            </Stack>
+          </Group>
+        {/each}
+      </Stack>
+    {:else}
+      <Stack gap="4" align="stretch" class="mx-auto max-w-2xl">
+        <Skeleton class="h-8 w-3/4" />
+        {#each lines as l (l.id)}
+          <Stack gap="2" data-testid="item">
+            <Skeleton class="h-4 w-full" />
+            <Skeleton class="h-4 w-5/6" />
+          </Stack>
+        {/each}
+      </Stack>
+    {/if}
+  </Block>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/skeleton-layout.types.ts b/packages/svelte/ui/src/blocks/skeleton-layout.types.ts
new file mode 100644
index 0000000..b2c05ba
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/skeleton-layout.types.ts
@@ -0,0 +1,6 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Line = {
+  id: string;
+};
diff --git a/packages/svelte/ui/src/blocks/slot-board.svelte b/packages/svelte/ui/src/blocks/slot-board.svelte
new file mode 100644
index 0000000..bbf7910
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/slot-board.svelte
@@ -0,0 +1,114 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/delivery.ts -->
+<!--
+  Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and
+  the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item
+  (card, plain), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { SlotLabels } from "./slot-board.types";
+  import type { Day } from "../components/slot-grid.types";
+  import type { Zone } from "./zone-table.types";
+
+  export type SlotBoardProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    days: Day[];
+    empty?: string;
+    zone: Zone;
+    labels: SlotLabels;
+    layout?: "split" | "stacked";
+    item?: "card" | "plain";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Select from "../primitives/select/select.svelte";
+  import SelectOption from "../primitives/select/select-option.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import Field from "../components/field.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import SlotGrid from "../components/slot-grid.svelte";
+  import { fmtMoney, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    days,
+    empty = "",
+    zone,
+    labels,
+    layout = "split",
+    item = "card",
+    tone = "default",
+    landmarkLabel,
+  }: SlotBoardProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} lead={lead} tone={tone} landmarkLabel={landmarkLabel}>
+  {#if ((days?.length ?? 0) === 0)}
+    <EmptyState icon="calendar" title={empty} />
+  {:else}
+    <Box class="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+      <Box class={(((layout as string) === "split") ? "lg:col-span-2" : "lg:col-span-3")}>
+        <SlotGrid days={days} name={tpl("{0}-slot", id)} item={item} />
+      </Box>
+      {#if ((layout as string) === "split")}
+        <Stack gap="4" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="aside">
+          <Field label={labels.zone} htmlFor={tpl("{0}-zone", id)}>
+            <Select name={tpl("{0}-zone", id)} id={tpl("{0}-zone", id)}>
+              <SelectOption value={zone.id} label={zone.name} selected={true} />
+            </Select>
+          </Field>
+          <List tag="ul" class="flex flex-col gap-2">
+            <ListItem class="flex items-center justify-between gap-4 text-sm">
+              <Inline class="text-muted-foreground">
+                {labels.price}
+              </Inline>
+              <Inline class="font-medium">
+                {fmtMoney(zone.price, zone.currency)}
+              </Inline>
+            </ListItem>
+            <ListItem class="flex items-center justify-between gap-4 text-sm">
+              <Inline class="text-muted-foreground">
+                {labels.freeFrom}
+              </Inline>
+              <Inline class="font-medium">
+                {fmtMoney(zone.freeFrom, zone.currency)}
+              </Inline>
+            </ListItem>
+            <ListItem class="flex items-center justify-between gap-4 text-sm">
+              <Inline class="text-muted-foreground">
+                {labels.time}
+              </Inline>
+              <Inline class="font-medium">
+                {zone.time}
+              </Inline>
+            </ListItem>
+          </List>
+          <Button variant="default" size="default" class="w-full">
+            {labels.primary}
+          </Button>
+          <Button variant="outline" size="default" class="w-full">
+            {labels.secondary}
+          </Button>
+          <Text size="xs" class="text-muted-foreground">
+            {labels.note}
+          </Text>
+        </Stack>
+      {/if}
+    </Box>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/slot-board.types.ts b/packages/svelte/ui/src/blocks/slot-board.types.ts
new file mode 100644
index 0000000..a128b0b
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/slot-board.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type SlotLabels = {
+  zone: string;
+  price: string;
+  freeFrom: string;
+  time: string;
+  primary: string;
+  secondary: string;
+  note: string;
+};
diff --git a/packages/svelte/ui/src/blocks/stats-band.svelte b/packages/svelte/ui/src/blocks/stats-band.svelte
new file mode 100644
index 0000000..1edc836
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/stats-band.svelte
@@ -0,0 +1,108 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!--
+  Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3,
+  4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may
+  be empty.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Stat } from "./stats-band.types";
+
+  export type StatsBandProps = {
+    id: string;
+    title?: string;
+    stats: Stat[];
+    empty?: string;
+    cols?: "2" | "3" | "4";
+    layout?: "row" | "stack";
+    surface?: "none" | "image" | "panel";
+    item?: "plain" | "card" | "icon";
+    align?: "start" | "center";
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Grid from "../primitives/grid/grid.svelte";
+  import Backdrop from "../components/backdrop.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import StatFigure from "../components/stat-figure.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title = "",
+    stats,
+    empty = "",
+    cols = "4",
+    layout = "row",
+    surface = "none",
+    item = "plain",
+    align = "center",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: StatsBandProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  tone={tone}
+  density={density}
+  align={align}
+  measure={
+    (surface as string) === "panel" ? "fill"
+    : (layout as string) === "stack" ? "xs"
+    : "default"
+  }
+  class={cn(
+    cn((((surface as string) === "image") ? "bg-transparent" : ""), (((surface as string) === "panel") ? "py-0" : "")),
+    (
+      (((surface as string) === "image") ? "image" : "none") === "image" ? "relative isolate overflow-hidden"
+      : ""
+    )
+  )}
+  landmarkLabel={landmarkLabel}
+>
+  <Backdrop kind={(((surface as string) === "image") ? "image" : "none")} alt={title} />
+  {#if ((stats?.length ?? 0) === 0)}
+    <EmptyState icon="chart-column" title={empty} />
+  {:else if ((surface as string) === "panel")}
+    <Grid
+      cols={
+        (cols as string) === "2" ? "2"
+        : (cols as string) === "3" ? "2-3"
+        : (cols as string) === "4" ? "2-4"
+        : "3-6"
+      }
+      class={cn("w-full items-center bg-muted px-6", defaults.stats.panel)}
+      data-testid="items"
+    >
+      {#each stats as stat (stat.id)}
+        <StatFigure stat={stat} item={item} align={align} />
+      {/each}
+    </Grid>
+  {:else}
+    <Grid
+      cols={
+        (layout as string) === "stack" ? "1"
+        : (cols as string) === "2" ? "2"
+        : (cols as string) === "3" ? "2-3"
+        : (cols as string) === "4" ? "2-4"
+        : "3-6"
+      }
+      class="gap-6"
+      data-testid="items"
+    >
+      {#each stats as stat (stat.id)}
+        <StatFigure stat={stat} item={item} align={align} />
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/stats-band.types.ts b/packages/svelte/ui/src/blocks/stats-band.types.ts
new file mode 100644
index 0000000..5e5e229
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/stats-band.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Stat = {
+  id: string;
+  label: string;
+  value: string;
+  icon: string;
+  hint: string;
+};
diff --git a/packages/svelte/ui/src/blocks/stepper.svelte b/packages/svelte/ui/src/blocks/stepper.svelte
new file mode 100644
index 0000000..914f396
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/stepper.svelte
@@ -0,0 +1,119 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  A multi-step form header: the steps with the current one marked (aria-current step), and the current step's
+  text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show,
+  hide).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Step } from "./steps-list.types";
+
+  export type StepperProps = {
+    id: string;
+    title: string;
+    steps: Step[];
+    current?: number;
+    stepLabel: string;
+    back: string;
+    next: string;
+    layout?: "horizontal" | "vertical";
+    marker?: "number" | "icon";
+    summary?: "show" | "hide";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import IconBadge from "../primitives/iconbadge/icon-badge.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    steps,
+    current = 2,
+    stepLabel,
+    back,
+    next,
+    layout = "horizontal",
+    marker = "number",
+    summary = "show",
+    landmarkLabel,
+  }: StepperProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} measure="3xl" landmarkLabel={landmarkLabel}>
+  {#if ((steps?.length ?? 0) > 0)}
+    <Stack gap="6" align="stretch" data-testid="stepper">
+      <Text size="sm" class="text-muted-foreground">
+        {tpl(stepLabel, current, (steps?.length ?? 0))}
+      </Text>
+      <List
+        tag="ol"
+        class={cn(
+          "m-0 flex list-none gap-4 p-0",
+          (((layout as string) === "vertical") ? "flex-col" : "flex-col sm:flex-row")
+        )}
+        data-testid="items"
+      >
+        {#each steps as s, i (s.id)}
+          <ListItem
+            class="flex flex-1 items-center gap-4"
+            data-testid="item"
+            aria-current={(((i + 1) === current) ? "step" : undefined)}
+          >
+            <IconBadge
+              variant={(((i + 1) < (current + 1)) ? "primary" : "outline")}
+              size="sm"
+              class={(((i + 1) < (current + 1)) ? "text-sm" : "text-sm text-muted-foreground")}
+            >
+              {#if ((marker as string) === "icon")}
+                <LucideIcon name={s.icon} size={16} />
+              {:else}
+                <Inline class="text-sm font-bold">
+                  {((i + 1) == null ? undefined : String((i + 1)))}
+                </Inline>
+              {/if}
+            </IconBadge>
+            <Text size="sm" weight={(((i + 1) === current) ? "bold" : "semibold")}>
+              {s.title}
+            </Text>
+          </ListItem>
+        {/each}
+      </List>
+      {#if ((summary as string) === "show")}
+        {#each steps as s, i (s.id)}
+          {#if ((i + 1) === current)}
+            <Stack gap="2" class="rounded bg-card p-6 inset-ring inset-ring-border" data-testid="step-summary">
+              <Title as={3} size="xl" weight="bold">
+                {s.title}
+              </Title>
+              <Text size="sm" class="text-muted-foreground">
+                {s.text}
+              </Text>
+              <Group gap="2" class="pt-2">
+                <Button variant="outline" size="sm" type="button">
+                  {back}
+                </Button>
+                <Button variant="default" size="sm" type="button">
+                  {next}
+                </Button>
+              </Group>
+            </Stack>
+          {/if}
+        {/each}
+      {/if}
+    </Stack>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/steps-list.svelte b/packages/svelte/ui/src/blocks/steps-list.svelte
new file mode 100644
index 0000000..8731c13
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/steps-list.svelte
@@ -0,0 +1,99 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!--
+  How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon),
+  align, density, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Step } from "./steps-list.types";
+
+  export type StepsListProps = {
+    id: string;
+    title: string;
+    steps: Step[];
+    empty?: string;
+    layout?: "row" | "column";
+    marker?: "number" | "icon";
+    align?: "start" | "center";
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import IconBadge from "../primitives/iconbadge/icon-badge.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    steps,
+    empty = "",
+    layout = "row",
+    marker = "number",
+    align = "start",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: StepsListProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  tone={tone}
+  density={density}
+  align={align}
+  measure={(((layout as string) === "row") ? "default" : "2xl")}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((steps?.length ?? 0) === 0)}
+    <EmptyState icon="list-ordered" title={empty} />
+  {:else}
+    <List
+      tag="ol"
+      class={cn("grid gap-6", (((layout as string) === "row") ? "sm:grid-cols-2 md:grid-cols-4" : ""))}
+      data-testid="items"
+    >
+      {#each steps as step, i (step.id)}
+        <ListItem
+          class={cn(
+            "flex gap-4",
+            (((layout as string) === "row") ? "flex-col" : ""),
+            (((align as string) === "center") ? "items-center text-center" : "")
+          )}
+          data-testid="item"
+        >
+          <IconBadge variant="primary" data-slot="marker">
+            {#if ((marker as string) === "icon")}
+              <LucideIcon name={step.icon} size={20} />
+            {:else}
+              <Inline class="text-base font-bold">
+                {((i + 1) == null ? undefined : String((i + 1)))}
+              </Inline>
+            {/if}
+          </IconBadge>
+          <Stack gap="2" align={(((align as string) === "center") ? "center" : "start")}>
+            <Title as={3} size="xl" weight="bold">
+              {step.title}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {step.text}
+            </Text>
+          </Stack>
+        </ListItem>
+      {/each}
+    </List>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/steps-list.types.ts b/packages/svelte/ui/src/blocks/steps-list.types.ts
new file mode 100644
index 0000000..f2bb96f
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/steps-list.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Step = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/svelte/ui/src/blocks/store-hero.svelte b/packages/svelte/ui/src/blocks/store-hero.svelte
new file mode 100644
index 0000000..447825b
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/store-hero.svelte
@@ -0,0 +1,141 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/storefront.ts -->
+<!--
+  The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay
+  layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text
+  over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { OfferCard } from "./store-hero.types";
+  import type { Feature } from "./feature-grid.types";
+  import type { LinkActions } from "./error-page.types";
+
+  export type StoreHeroProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    level?: 1 | 2;
+    actions: LinkActions;
+    perks: Feature[];
+    card: OfferCard;
+    layout?: "overlay" | "backdrop";
+    mediaSide?: "end" | "start";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import ActionGroup from "../components/action-group.svelte";
+  import Backdrop from "../components/backdrop.svelte";
+  import OfferMedia from "../components/offer-media.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    level = 1,
+    actions,
+    perks,
+    card,
+    layout = "overlay",
+    mediaSide = "end",
+    tone = "default",
+    landmarkLabel,
+  }: StoreHeroProps = $props();
+</script>
+
+{#if ((layout as string) === "backdrop")}
+  <SectionFrame
+    id={id}
+    title={title}
+    lead={lead}
+    heading={{ badge, level }}
+    tone={tone}
+    density="roomy"
+    measure="3xl"
+    class={(("image" === "image") ? "relative isolate overflow-hidden" : "")}
+    landmarkLabel={landmarkLabel}
+  >
+    <Backdrop kind="image" alt={title} />
+    <ActionGroup
+      primary={actions.cta}
+      primaryHref={actions.href}
+      secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+      secondaryHref={actions.secondaryHref}
+    />
+    {#if ((perks?.length ?? 0) > 0)}
+      <Grid cols="1-3" class="gap-4" data-testid="perks">
+        {#each perks as p, i (p.id)}
+          {#if (i < 3)}
+            <Group gap="4" align="start" data-testid="perk">
+              <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                <LucideIcon name={p.icon} size={20} />
+              </Box>
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {p.title}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {p.text}
+                </Text>
+              </Stack>
+            </Group>
+          {/if}
+        {/each}
+      </Grid>
+    {/if}
+  </SectionFrame>
+{:else}
+  <SectionFrame
+    id={id}
+    title={title}
+    lead={lead}
+    heading={{ badge, level }}
+    layout="split"
+    media={{ show: true, side: mediaSide }}
+    tone={tone}
+    landmarkLabel={landmarkLabel}
+  >
+    <ActionGroup
+      primary={actions.cta}
+      primaryHref={actions.href}
+      secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+      secondaryHref={actions.secondaryHref}
+    />
+    {#if ((perks?.length ?? 0) > 0)}
+      <Grid cols="1-3" class="gap-4" data-testid="perks">
+        {#each perks as p, i (p.id)}
+          {#if (i < 3)}
+            <Group gap="4" align="start" data-testid="perk">
+              <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+                <LucideIcon name={p.icon} size={20} />
+              </Box>
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {p.title}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {p.text}
+                </Text>
+              </Stack>
+            </Group>
+          {/if}
+        {/each}
+      </Grid>
+    {/if}
+    {#snippet aside()}
+      <OfferMedia alt={title} card={card} />
+    {/snippet}
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/store-hero.types.ts b/packages/svelte/ui/src/blocks/store-hero.types.ts
new file mode 100644
index 0000000..3ded713
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/store-hero.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/storefront.ts
+
+export type OfferCard = {
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/svelte/ui/src/blocks/store-locations.svelte b/packages/svelte/ui/src/blocks/store-locations.svelte
new file mode 100644
index 0000000..0ab8619
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/store-locations.svelte
@@ -0,0 +1,138 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/delivery.ts -->
+<!--
+  The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the
+  services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Store, StoreLabels } from "./store-locations.types";
+
+  export type StoreLocationsProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    stores: Store[];
+    empty?: string;
+    kinds: Record<string, string>;
+    labels: StoreLabels;
+    layout?: "cards" | "list" | "map";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { at, cn, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    stores,
+    empty = "",
+    kinds,
+    labels,
+    layout = "cards",
+    tone = "default",
+    landmarkLabel,
+  }: StoreLocationsProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} lead={lead} tone={tone} landmarkLabel={landmarkLabel}>
+  {#if ((stores?.length ?? 0) === 0)}
+    <EmptyState icon="store" title={empty} />
+  {:else}
+    <Box
+      class={cn(
+        "grid grid-cols-1 gap-8",
+        (((layout as string) === "map") ? "items-start md:grid-cols-2" : "")
+      )}
+    >
+      <Box
+        class={
+          (layout as string) === "cards" ? "grid grid-cols-1 gap-4 md:grid-cols-2"
+          : "flex flex-col gap-4"
+        }
+        data-testid="items"
+      >
+        {#each stores as s (s.id)}
+          <Stack
+            gap="4"
+            class={
+              (layout as string) === "list" ? "border-b border-border pb-4"
+              : "rounded bg-card inset-ring inset-ring-border p-6"
+            }
+            data-testid="item"
+          >
+            <Stack gap="2">
+              <Badge variant="outline" size="default" class="w-fit">
+                {at(kinds, s.kind)}
+              </Badge>
+              <Title as={3} size="lg" weight="bold">
+                {s.name}
+              </Title>
+            </Stack>
+            <List
+              tag="ul"
+              class={
+                (layout as string) === "list" ? "flex flex-wrap gap-x-8 gap-y-2 text-sm"
+                : "flex flex-col gap-2 text-sm"
+              }
+            >
+              <ListItem class="flex items-center gap-2">
+                <LucideIcon name="map-pin" size={16} />
+                <Inline>
+                  {s.address}
+                </Inline>
+              </ListItem>
+              <ListItem class="flex items-center gap-2">
+                <LucideIcon name="clock" size={16} />
+                <Inline>
+                  {s.hours}
+                </Inline>
+              </ListItem>
+              <ListItem class="flex items-center gap-2">
+                <LucideIcon name="phone" size={16} />
+                <Link href={tpl("tel:{0}", s.phone)} variant="default">
+                  {(s.phone ?? "").replaceAll(" ", "\u00a0")}
+                </Link>
+              </ListItem>
+            </List>
+            {#if ((layout as string) === "cards")}
+              <Text size="sm" class="text-muted-foreground">
+                {s.note}
+              </Text>
+              <Group gap="2" class="flex-wrap">
+                {#each s.services as v (v)}
+                  <Badge variant="secondary" size="default">
+                    {v}
+                  </Badge>
+                {/each}
+              </Group>
+            {/if}
+          </Stack>
+        {/each}
+      </Box>
+      {#if ((layout as string) === "map")}
+        <Box class="md:sticky md:top-8">
+          <MediaFrame alt={labels.map} ratio="1/1" />
+        </Box>
+      {/if}
+    </Box>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/store-locations.types.ts b/packages/svelte/ui/src/blocks/store-locations.types.ts
new file mode 100644
index 0000000..8d88fff
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/store-locations.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type Store = {
+  id: string;
+  name: string;
+  kind: string;
+  address: string;
+  hours: string;
+  phone: string;
+  note: string;
+  services: string[];
+};
+
+export type StoreLabels = {
+  map: string;
+};
diff --git a/packages/svelte/ui/src/blocks/story-tabs.svelte b/packages/svelte/ui/src/blocks/story-tabs.svelte
new file mode 100644
index 0000000..8ea70b3
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/story-tabs.svelte
@@ -0,0 +1,130 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/story-tabs.ts -->
+<!--
+  A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year
+  with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next
+  arrows and one dot per step), tone. Choosing a step emits `select`.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { StoryLabels } from "./story-tabs.types";
+  import type { Milestone } from "./milestone-timeline.types";
+
+  export type StoryTabsProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    badge?: string;
+    steps: Milestone[];
+    empty?: string;
+    active: string;
+    labels: StoryLabels;
+    layout?: "years" | "carousel";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+    onselect?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import StoryDots from "../components/story-dots.svelte";
+  import StoryPanel from "../components/story-panel.svelte";
+
+  let {
+    id,
+    title,
+    lead = "",
+    badge = "",
+    steps,
+    empty = "",
+    active,
+    labels,
+    layout = "years",
+    tone = "default",
+    landmarkLabel,
+    onselect,
+  }: StoryTabsProps = $props();
+</script>
+
+{#if ((steps?.length ?? 0) === 0)}
+  <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+    <EmptyState icon="milestone" title={empty} />
+  </SectionFrame>
+{:else if ((layout as string) === "years")}
+  <SectionFrame id={id} title={title} lead={lead} heading={{ badge }} tone={tone} landmarkLabel={landmarkLabel}>
+    <Box class="grid grid-cols-2 gap-2 sm:grid-cols-4" data-testid="story-tabs">
+      {#each steps as s (s.id)}
+        <Button
+          variant={((s.id === active) ? "default" : "outline")}
+          size="lg"
+          type="button"
+          class="h-auto flex-col items-start gap-0 py-2 text-start"
+          data-testid="story-tab"
+          data-active={((s.id === active) ? "true" : "false")}
+          onclick={() => onselect?.(s.id)}
+        >
+          <Inline class="text-sm font-semibold">
+            {s.date}
+          </Inline>
+          <Inline class="text-xs">
+            {s.tag}
+          </Inline>
+        </Button>
+      {/each}
+    </Box>
+    {#each steps as s, i (s.id)}
+      {#if (s.id === active)}
+        <StoryPanel s={s} index={i} total={(steps?.length ?? 0)} labels={labels} />
+      {/if}
+    {/each}
+  </SectionFrame>
+{:else}
+  <SectionFrame
+    id={id}
+    title={title}
+    lead={lead}
+    heading={{ badge }}
+    tone={tone}
+    layout="split"
+    media={{ show: true }}
+    landmarkLabel={landmarkLabel}
+  >
+    {#snippet aside()}
+      <Stack gap="4" align="stretch">
+        <MediaFrame alt={title} ratio="4/3" />
+        <Group gap="4" align="center" justify="between">
+          <Button
+            variant="outline"
+            size="sm"
+            layout="icon"
+            type="button"
+            aria-label={labels.previous}
+            data-testid="story-arrow"
+          >
+            <LucideIcon name="chevron-left" size={16} />
+          </Button>
+          <StoryDots steps={steps} active={active} />
+          <Button
+            variant="outline"
+            size="sm"
+            layout="icon"
+            type="button"
+            aria-label={labels.next}
+            data-testid="story-arrow"
+          >
+            <LucideIcon name="chevron-right" size={16} />
+          </Button>
+        </Group>
+      </Stack>
+    {/snippet}
+  </SectionFrame>
+{/if}
diff --git a/packages/svelte/ui/src/blocks/story-tabs.types.ts b/packages/svelte/ui/src/blocks/story-tabs.types.ts
new file mode 100644
index 0000000..04d1dc0
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/story-tabs.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/story-tabs.ts
+
+export type StoryLabels = {
+  step: string;
+  previous: string;
+  next: string;
+};
diff --git a/packages/svelte/ui/src/blocks/support-channels.svelte b/packages/svelte/ui/src/blocks/support-channels.svelte
new file mode 100644
index 0000000..f62c0c2
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/support-channels.svelte
@@ -0,0 +1,83 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout
+  (grid, list), columns, action (link, none), tone (default, muted).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "./feature-grid.types";
+
+  export type SupportChannelsProps = {
+    id: string;
+    title: string;
+    channels: Feature[];
+    empty?: string;
+    open: string;
+    layout?: "grid" | "list";
+    cols?: "1-2" | "1-3";
+    action?: "link" | "none";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Card from "../primitives/card/card.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    channels,
+    empty = "",
+    open,
+    layout = "grid",
+    cols = "1-3",
+    action = "link",
+    tone = "default",
+    landmarkLabel,
+  }: SupportChannelsProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+  {#if ((channels?.length ?? 0) === 0)}
+    <EmptyState icon="life-buoy" title={empty} />
+  {:else}
+    <Grid cols={(((layout as string) === "list") ? "1" : cols)} class="gap-4" data-testid="items">
+      {#each channels as c (c.id)}
+        <Card
+          variant="default"
+          class={cn("h-full", (((layout as string) === "list") ? "flex-row items-center" : ""))}
+          data-testid="item"
+        >
+          <CardContent class={cn("flex flex-1 gap-4", (((layout as string) === "list") ? "items-center" : "flex-col"))}>
+            <LucideIcon name={c.icon} size={24} />
+            <Stack gap="2" class="flex-1">
+              <Title as={3} size="base" weight="bold">
+                {c.title}
+              </Title>
+              <Text size="sm" class="text-muted-foreground">
+                {c.text}
+              </Text>
+            </Stack>
+            {#if ((action as string) === "link")}
+              <MenuEntry href={c.href} class="font-semibold" testid="open">
+                {open}
+              </MenuEntry>
+            {/if}
+          </CardContent>
+        </Card>
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/team-grid.svelte b/packages/svelte/ui/src/blocks/team-grid.svelte
new file mode 100644
index 0000000..97d2eb9
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/team-grid.svelte
@@ -0,0 +1,112 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/people.ts -->
+<!--
+  The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows
+  beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory),
+  cols, tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Member } from "./team-grid.types";
+
+  export type TeamGridProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    members: Member[];
+    empty?: string;
+    depts: Record<string, string>;
+    layout?: "cards" | "minimal" | "detailed" | "list" | "directory";
+    cols?: "1-3" | "1-4";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import MemberRow from "../components/member-row.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    members,
+    empty = "",
+    depts,
+    layout = "cards",
+    cols = "1-4",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: TeamGridProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  lead={lead}
+  tone={tone}
+  density={density}
+  layout={(((layout as string) === "list") ? "split" : "stack")}
+  media={{ show: ((layout as string) === "list"), side: "start", align: "start" }}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((members?.length ?? 0) === 0)}
+    <EmptyState icon="users" title={empty} />
+  {:else}
+    <Box
+      class={
+        (layout as string) === "minimal" ? "grid grid-cols-2 gap-8 md:grid-cols-4"
+        : (layout as string) === "directory" ? "grid grid-cols-1 gap-4 md:grid-cols-2"
+        : (layout as string) === "list" ? "flex flex-col gap-4"
+        : (cols as string) === "1-3" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+        : "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4"
+      }
+      data-testid="items"
+    >
+      {#each members as m (m.id)}
+        {#if ((layout as string) === "minimal")}
+          <Stack gap="2" align="center" class="text-center" data-testid="item">
+            <MediaFrame alt={m.name} ratio="1/1" class={cn("size-16", "shrink-0")} />
+            <Text size="sm" weight="semibold">
+              {m.name}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {m.role}
+            </Text>
+          </Stack>
+        {:else if ((layout as string) === "cards")}
+          <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="item">
+            <MediaFrame alt={m.name} ratio="1/1" />
+            <Stack gap="2">
+              <Stack gap="0">
+                <Text size="base" weight="semibold">
+                  {m.name}
+                </Text>
+                <Text size="sm" class="text-muted-foreground">
+                  {m.role}
+                </Text>
+              </Stack>
+              <Text size="sm" class="text-muted-foreground">
+                {m.bio}
+              </Text>
+            </Stack>
+          </Stack>
+        {:else}
+          <MemberRow member={m} depts={depts} layout={layout} />
+        {/if}
+      {/each}
+    </Box>
+  {/if}
+  {#snippet aside()}
+    <MediaFrame alt={title} ratio="3/4" />
+  {/snippet}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/team-grid.types.ts b/packages/svelte/ui/src/blocks/team-grid.types.ts
new file mode 100644
index 0000000..fefd4c8
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/team-grid.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Member = {
+  id: string;
+  name: string;
+  role: string;
+  dept: string;
+  location: string;
+  bio: string;
+  skills: string[];
+};
diff --git a/packages/svelte/ui/src/blocks/template-grid.svelte b/packages/svelte/ui/src/blocks/template-grid.svelte
new file mode 100644
index 0000000..3b4ff65
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/template-grid.svelte
@@ -0,0 +1,137 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/templates.ts -->
+<!--
+  Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all
+  button.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Template, Filter, TemplateLabels } from "./template-grid.types";
+
+  export type TemplateGridProps = {
+    id: string;
+    title: string;
+    templates: Template[];
+    filters: Filter[];
+    browseHref?: string;
+    labels: TemplateLabels;
+    cols?: "1-3" | "1-4";
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    empty?: string;
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import IconBadge from "../primitives/iconbadge/icon-badge.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    templates,
+    filters,
+    browseHref,
+    labels,
+    cols = "1-4",
+    tone = "default",
+    density = "compact",
+    empty = "",
+    landmarkLabel,
+  }: TemplateGridProps = $props();
+</script>
+
+<SectionFrame id={id} tone={tone} density={density} measure="fill" class="py-0" landmarkLabel={landmarkLabel}>
+  <Stack gap="8" align="stretch">
+    <Group gap="4" align="center" justify="between" class="h-8 w-full flex-wrap">
+      <Title as={2} size="2xl" weight="semibold" class="leading-9" id={(id + "-title")}>
+        {title}
+      </Title>
+      {#if ((filters?.length ?? 0) > 0)}
+        <Group
+          gap="4"
+          align="center"
+          class="flex-wrap"
+          role="group"
+          aria-label={labels.filters}
+          data-testid="template-filters"
+        >
+          {#each filters as f (f.id)}
+            <Button variant="outline" size="sm" type="button" class="gap-2" data-testid="template-filter">
+              {#if f.icon}
+                <LucideIcon name={f.icon} size={16} />
+              {/if}
+              {f.title}
+            </Button>
+          {/each}
+        </Group>
+      {/if}
+    </Group>
+    {#if ((templates?.length ?? 0) === 0)}
+      <EmptyState icon="layout-template" title={empty} />
+    {:else}
+      <Grid cols={cols} class="w-full gap-6" data-testid="template-grid">
+        {#each templates as t (t.id)}
+          <Box
+            class={cn(
+              "flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border",
+              defaults.templates.card
+            )}
+            data-testid="template-card"
+          >
+            <Box class={cn("shrink-0 overflow-hidden", defaults.templates.image)}>
+              <MediaFrame alt={t.title} class={cn("size-full", defaults.media.rounded)} />
+            </Box>
+            <Group gap="4" align="center" class={cn("w-full", defaults.templates.footer)} data-testid="template-footer">
+              <IconBadge size="sm" class="overflow-hidden" data-testid="template-avatar">
+                <LucideIcon name="layout-template" size={16} />
+              </IconBadge>
+              <Stack gap="0" class="min-w-0 flex-1">
+                <Title as={3} size="base" weight="semibold" class="truncate leading-6">
+                  {t.title}
+                </Title>
+                <Group gap="4" align="center" class="h-4 text-muted-foreground">
+                  <Group gap="2" align="center">
+                    <LucideIcon name="eye" size={16} />
+                    <Inline class="sr-only">
+                      {labels.views}
+                    </Inline>
+                    <Text size="xs" weight="bold" class="leading-4">
+                      {t.views}
+                    </Text>
+                  </Group>
+                  <Group gap="2" align="center">
+                    <LucideIcon name="heart" size={16} />
+                    <Inline class="sr-only">
+                      {labels.likes}
+                    </Inline>
+                    <Text size="xs" weight="bold" class="leading-4">
+                      {t.likes}
+                    </Text>
+                  </Group>
+                </Group>
+              </Stack>
+            </Group>
+          </Box>
+        {/each}
+      </Grid>
+    {/if}
+    <Button variant="outline" size="sm" href={browseHref} class="w-full" data-testid="template-browse">
+      {labels.browse}
+    </Button>
+  </Stack>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/template-grid.types.ts b/packages/svelte/ui/src/blocks/template-grid.types.ts
new file mode 100644
index 0000000..3a51f9a
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/template-grid.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/templates.ts
+
+export type Template = {
+  id: string;
+  title: string;
+  views: string;
+  likes: string;
+  topic: string;
+};
+
+export type Filter = {
+  id: string;
+  title: string;
+  value: string;
+  icon?: string;
+};
+
+export type TemplateLabels = {
+  filters: string;
+  browse: string;
+  views: string;
+  likes: string;
+};
diff --git a/packages/svelte/ui/src/blocks/testimonial-grid.svelte b/packages/svelte/ui/src/blocks/testimonial-grid.svelte
new file mode 100644
index 0000000..dc3b006
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/testimonial-grid.svelte
@@ -0,0 +1,83 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!--
+  Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured
+  quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card,
+  plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the
+  Carousel port contract around the single layout.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Quote, QuoteLabels, QuoteItem } from "./testimonial-grid.types";
+
+  export type TestimonialGridProps = {
+    id: string;
+    title: string;
+    quotes: Quote[];
+    empty?: string;
+    labels: QuoteLabels;
+    layout?: "grid" | "single" | "stack" | "masonry" | "strip";
+    cols?: "1-2" | "1-3";
+    item?: QuoteItem;
+    tone?: "default" | "muted";
+    density?: "roomy" | "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import QuoteCard from "../components/quote-card.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+
+  let {
+    id,
+    title,
+    quotes,
+    empty = "",
+    labels,
+    layout = "grid",
+    cols = "1-3",
+    item,
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: TestimonialGridProps = $props();
+</script>
+
+<SectionFrame
+  id={id}
+  title={title}
+  tone={tone}
+  density={density}
+  align={(((layout as string) === "single") ? "center" : "start")}
+  measure={(((layout as string) === "grid") ? "default" : "2xl")}
+  landmarkLabel={landmarkLabel}
+>
+  {#if ((quotes?.length ?? 0) === 0)}
+    <EmptyState icon="message-square-quote" title={empty} />
+  {:else if (((layout as string) === "masonry") || ((layout as string) === "strip"))}
+    <Block
+      tag="div"
+      class={
+        (layout as string) === "masonry" ? "columns-1 gap-4 md:columns-2 xl:columns-3"
+        : "flex snap-x gap-4 overflow-x-auto pb-2"
+      }
+      data-testid="items"
+    >
+      {#each quotes as q (q.id)}
+        <QuoteCard q={q} labels={labels} item={item} layout={layout} />
+      {/each}
+    </Block>
+  {:else}
+    <Grid cols={(((layout as string) === "grid") ? cols : "1")} class="gap-4" data-testid="items">
+      {#each quotes as q, i (q.id)}
+        {#if (((layout as string) !== "single") || (i === 0))}
+          <QuoteCard q={q} labels={labels} item={item} layout={layout} />
+        {/if}
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/testimonial-grid.types.ts b/packages/svelte/ui/src/blocks/testimonial-grid.types.ts
new file mode 100644
index 0000000..cff2f47
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/testimonial-grid.types.ts
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Quote = {
+  id: string;
+  author: string;
+  role: string;
+  company: string;
+  quote: string;
+  rating: number;
+  handle: string;
+  time: string;
+  mark: string;
+};
+
+export type QuoteLabels = {
+  /** template of the rating's accessible name, e.g. `{0} out of 5` */
+  rating: string;
+  /** template of the line under the author, e.g. `{0}, {1}` (role, company) */
+  byLine: string;
+  /** template of the line under a social author, e.g. `{0} / {1}` (handle, time) */
+  handleLine: string;
+};
+
+export type QuoteItem = {
+  /** card: boxed; plain: a bare figure; social: a post of a social wall */
+  kind?: "card" | "plain" | "social";
+  /** a round picture of the author */
+  avatar?: "none" | "image";
+  /** the stars (not on social posts) */
+  rating?: "show" | "hide";
+  /** a company glyph above the quote */
+  mark?: "none" | "icon";
+};
diff --git a/packages/svelte/ui/src/blocks/tour-callout.svelte b/packages/svelte/ui/src/blocks/tour-callout.svelte
new file mode 100644
index 0000000..b82de36
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/tour-callout.svelte
@@ -0,0 +1,94 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the
+  position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target),
+  tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type TourCalloutProps = {
+    id: string;
+    title: string;
+    text: string;
+    target: string;
+    position: string;
+    skip: string;
+    next: string;
+    placement?: "below" | "above" | "end";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    target,
+    position,
+    skip,
+    next,
+    placement = "below",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: TourCalloutProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  <Block
+    tag="div"
+    class={cn(
+      "flex gap-4",
+      (
+        (placement as string) === "end" ? "flex-col items-start md:flex-row md:items-center"
+        : (placement as string) === "above" ? "flex-col-reverse items-start"
+        : "flex-col items-start"
+      )
+    )}
+    data-testid="tour"
+    data-placement={placement}
+  >
+    <Button variant="outline" size="default" type="button" class="inset-ring-foreground" data-testid="tour-target">
+      {target}
+    </Button>
+    <Stack
+      gap="4"
+      align="stretch"
+      class={cn("w-full max-w-sm", "rounded bg-card inset-ring inset-ring-border", "p-4", "shadow-md")}
+      role="group"
+      aria-label={title}
+      data-testid="tour-callout"
+    >
+      <Text size="xs" class="text-muted-foreground">
+        {position}
+      </Text>
+      <Text size="base" weight="semibold">
+        {title}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {text}
+      </Text>
+      <Group gap="2" justify="end">
+        <Button variant="ghost" size="sm" type="button">
+          {skip}
+        </Button>
+        <Button variant="default" size="sm" type="button">
+          {next}
+        </Button>
+      </Group>
+    </Stack>
+  </Block>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/usage-calculator.svelte b/packages/svelte/ui/src/blocks/usage-calculator.svelte
new file mode 100644
index 0000000..91e60b7
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/usage-calculator.svelte
@@ -0,0 +1,105 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/pricing-more.ts -->
+<!--
+  A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps
+  the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the
+  largest amount under the slider, hide), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { UsageSlider, UsagePrice } from "./usage-calculator.types";
+
+  export type UsageCalculatorProps = {
+    id: string;
+    title: string;
+    text: string;
+    usage: number;
+    slider: UsageSlider;
+    price: UsagePrice;
+    cta: string;
+    href?: string;
+    layout?: "card" | "plain";
+    ends?: "show" | "hide";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+    onusage?: (value: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Range from "../primitives/range/range.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn, fmtMoney, tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    usage,
+    slider,
+    price,
+    cta,
+    href,
+    layout = "card",
+    ends = "show",
+    tone = "default",
+    landmarkLabel,
+    onusage,
+  }: UsageCalculatorProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} lead={text} tone={tone} align="center" landmarkLabel={landmarkLabel}>
+  <Stack
+    gap="4"
+    align="stretch"
+    class={cn(
+      "mx-auto w-full max-w-xl",
+      (((layout as string) === "card") ? "rounded bg-card p-6 inset-ring inset-ring-border" : "")
+    )}
+    data-testid="usage"
+  >
+    <Group justify="between" align="baseline">
+      <Text size="xl" weight="bold">
+        {tpl(slider.unit, usage)}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {slider.label}
+      </Text>
+    </Group>
+    <Range
+      min={slider.min}
+      max={slider.max}
+      value={usage}
+      aria-label={slider.label}
+      data-testid="slider"
+      oninput={(event: Event & { currentTarget: HTMLInputElement }) => onusage?.(event.currentTarget.value)}
+    />
+    {#if ((ends as string) === "show")}
+      <Group justify="between" data-testid="ends">
+        <Text size="xs" class="text-muted-foreground">
+          {tpl(slider.unit, slider.min)}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {tpl(slider.unit, slider.max)}
+        </Text>
+      </Group>
+    {/if}
+    <Group justify="between" align="center" class="flex-wrap">
+      <Stack gap="0">
+        <Text size="xs" class="text-muted-foreground">
+          {price.label}
+        </Text>
+        <Text size="4xl" weight="bold" data-testid="estimate">
+          {fmtMoney((usage * price.rate), price.currency)}
+        </Text>
+      </Stack>
+      <Button variant="default" size="default" href={href} data-testid="submit">
+        {cta}
+      </Button>
+    </Group>
+  </Stack>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/usage-calculator.types.ts b/packages/svelte/ui/src/blocks/usage-calculator.types.ts
new file mode 100644
index 0000000..6577d8d
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/usage-calculator.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type UsageSlider = {
+  min: number;
+  max: number;
+  /** accessible name of the slider */
+  label: string;
+  /** template of an amount, e.g. `{0} credits` */
+  unit: string;
+};
+
+export type UsagePrice = {
+  /** price of one unit in minor units (cents) */
+  rate: number;
+  currency: string;
+  /** name of the estimate */
+  label: string;
+};
diff --git a/packages/svelte/ui/src/blocks/usp-strip.svelte b/packages/svelte/ui/src/blocks/usp-strip.svelte
new file mode 100644
index 0000000..9028a79
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/usp-strip.svelte
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/storefront.ts -->
+<!--
+  The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted
+  panel, cards: a card each, bar: a thin line of icons and titles), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "./feature-grid.types";
+
+  export type UspStripProps = {
+    id: string;
+    title?: string;
+    perks: Feature[];
+    empty?: string;
+    layout?: "strip" | "cards" | "bar";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title = "",
+    perks,
+    empty = "",
+    layout = "strip",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: UspStripProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((perks?.length ?? 0) === 0)}
+    <EmptyState icon="truck" title={empty} />
+  {:else if ((layout as string) === "bar")}
+    <List tag="ul" class="flex flex-wrap items-center justify-center gap-x-8 gap-y-4" data-testid="items">
+      {#each perks as p (p.id)}
+        <ListItem class="flex items-center gap-2 text-sm font-medium" data-testid="item">
+          <LucideIcon name={p.icon} size={16} />
+          <Inline>
+            {p.title}
+          </Inline>
+        </ListItem>
+      {/each}
+    </List>
+  {:else}
+    <Grid
+      cols="1-4"
+      class={cn("gap-4", (((layout as string) === "strip") ? "rounded bg-muted p-6" : ""))}
+      data-testid="items"
+    >
+      {#each perks as p (p.id)}
+        <Stack
+          gap="4"
+          class={(((layout as string) === "cards") ? "rounded bg-card inset-ring inset-ring-border p-6" : "")}
+          data-testid="item"
+        >
+          <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+            <LucideIcon name={p.icon} size={20} />
+          </Box>
+          <Stack gap="2">
+            <Text size="sm" weight="semibold">
+              {p.title}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {p.text}
+            </Text>
+          </Stack>
+        </Stack>
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/video-grid.svelte b/packages/svelte/ui/src/blocks/video-grid.svelte
new file mode 100644
index 0000000..906af78
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/video-grid.svelte
@@ -0,0 +1,101 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port
+  contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone,
+  density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Quote } from "./testimonial-grid.types";
+
+  export type VideoGridProps = {
+    id: string;
+    title: string;
+    quotes: Quote[];
+    empty?: string;
+    playLabel: string;
+    byLine: string;
+    cols?: "1-2" | "1-3";
+    caption?: "below" | "overlay";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+    onplay?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import FigureBlock from "../components/figure-block.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { tpl } from "../utils";
+
+  let {
+    id,
+    title,
+    quotes,
+    empty = "",
+    playLabel,
+    byLine,
+    cols = "1-3",
+    caption = "below",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+    onplay,
+  }: VideoGridProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((quotes?.length ?? 0) === 0)}
+    <EmptyState icon="video" title={empty} />
+  {:else}
+    <Grid cols={cols} class="gap-4" data-testid="items">
+      {#each quotes as q (q.id)}
+        <FigureBlock class="m-0 flex flex-col gap-4" testid="item">
+          <Box class="relative">
+            <MediaFrame alt={q.author} />
+            <Button
+              variant="default"
+              size="default"
+              type="button"
+              class="absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0"
+              aria-label={tpl(playLabel, q.author)}
+              data-testid="play"
+              onclick={() => onplay?.(q.id)}
+            >
+              <LucideIcon name="play" size={20} />
+            </Button>
+            {#if ((caption as string) === "overlay")}
+              <Box class="absolute inset-x-0 bottom-0 rounded bg-background p-4" data-testid="caption">
+                <Text size="sm" weight="semibold">
+                  {q.author}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {tpl(byLine, q.role, q.company)}
+                </Text>
+              </Box>
+            {/if}
+          </Box>
+          {#if ((caption as string) === "below")}
+            <Text tag="figcaption" data-testid="caption">
+              <Text size="sm" weight="semibold">
+                {q.author}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {tpl(byLine, q.role, q.company)}
+              </Text>
+            </Text>
+          {/if}
+        </FigureBlock>
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/video-modal.svelte b/packages/svelte/ui/src/blocks/video-modal.svelte
new file mode 100644
index 0000000..3d569fd
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/video-modal.svelte
@@ -0,0 +1,110 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  A dialog with a walkthrough video: a title and a close button, the player area with a play button and,
+  optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size
+  (default, wide), outline (none, chapters: a list under the player), tone.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Chapter } from "./video-modal.types";
+
+  export type VideoModalProps = {
+    id: string;
+    title: string;
+    text: string;
+    close: string;
+    play: string;
+    chaptersTitle: string;
+    chapters: Chapter[];
+    size?: "default" | "wide";
+    outline?: "none" | "chapters";
+    tone?: "default" | "muted";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title,
+    text,
+    close,
+    play,
+    chaptersTitle,
+    chapters,
+    size = "default",
+    outline = "none",
+    tone = "default",
+    landmarkLabel,
+  }: VideoModalProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} tone={tone} landmarkLabel={landmarkLabel}>
+  <Stack
+    gap="4"
+    align="stretch"
+    class={cn(
+      "mx-auto w-full",
+      (((size as string) === "wide") ? "max-w-4xl" : "max-w-2xl"),
+      "rounded bg-card inset-ring inset-ring-border p-4 shadow-lg"
+    )}
+    role="dialog"
+    aria-label={title}
+    data-testid="video-modal"
+  >
+    <Group gap="2" align="center" justify="between">
+      <Text size="sm" class="text-muted-foreground">
+        {text}
+      </Text>
+      <Button variant="ghost" size="sm" type="button" class="shrink-0" aria-label={close} data-testid="modal-close">
+        <LucideIcon name="x" size={16} />
+      </Button>
+    </Group>
+    <Box class="relative" data-testid="player">
+      <MediaFrame alt={title} />
+      <Button
+        variant="default"
+        size="default"
+        type="button"
+        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded"
+        aria-label={play}
+        data-testid="play"
+      >
+        <LucideIcon name="play" size={24} />
+      </Button>
+    </Box>
+    {#if (((outline as string) === "chapters") && ((chapters?.length ?? 0) > 0))}
+      <Stack gap="2" data-testid="chapters">
+        <Title as={3} size="base" weight="bold">
+          {chaptersTitle}
+        </Title>
+        <List class="m-0 flex list-none flex-col gap-2 p-0">
+          {#each chapters as c (c.id)}
+            <ListItem class="flex items-baseline gap-4" data-testid="item">
+              <Text size="sm" weight="semibold">
+                {c.title}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {c.text}
+              </Text>
+            </ListItem>
+          {/each}
+        </List>
+      </Stack>
+    {/if}
+  </Stack>
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/video-modal.types.ts b/packages/svelte/ui/src/blocks/video-modal.types.ts
new file mode 100644
index 0000000..42259ea
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/video-modal.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Chapter = {
+  id: string;
+  title: string;
+  text: string;
+};
diff --git a/packages/svelte/ui/src/blocks/zone-table.svelte b/packages/svelte/ui/src/blocks/zone-table.svelte
new file mode 100644
index 0000000..d286541
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/zone-table.svelte
@@ -0,0 +1,108 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/delivery.ts -->
+<!--
+  Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that
+  ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Zone, ZoneLabels } from "./zone-table.types";
+
+  export type ZoneTableProps = {
+    id: string;
+    title: string;
+    lead?: string;
+    zones: Zone[];
+    empty?: string;
+    labels: ZoneLabels;
+    layout?: "table" | "cards";
+    tone?: "default" | "muted";
+    density?: "default" | "compact";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import EmptyState from "../components/empty-state.svelte";
+  import SectionFrame from "../components/section-frame.svelte";
+  import ZoneRows from "../components/zone-rows.svelte";
+  import { fmtMoney } from "../utils";
+
+  let {
+    id,
+    title,
+    lead = "",
+    zones,
+    empty = "",
+    labels,
+    layout = "table",
+    tone = "default",
+    density = "default",
+    landmarkLabel,
+  }: ZoneTableProps = $props();
+</script>
+
+<SectionFrame id={id} title={title} lead={lead} tone={tone} density={density} landmarkLabel={landmarkLabel}>
+  {#if ((zones?.length ?? 0) === 0)}
+    <EmptyState icon="map" title={empty} />
+  {:else if ((layout as string) === "table")}
+    <ZoneRows zones={zones} labels={labels} />
+  {:else}
+    <Grid cols="1-3" class="gap-4" data-testid="items">
+      {#each zones as z (z.id)}
+        <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="item">
+          <Stack gap="2">
+            <Title as={3} size="lg" weight="bold">
+              {z.name}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {z.area}
+            </Text>
+          </Stack>
+          <Text size="3xl" weight="bold">
+            {fmtMoney(z.price, z.currency)}
+          </Text>
+          <List tag="ul" class="flex flex-col gap-2 border-t border-border pt-4">
+            <ListItem class="flex items-center justify-between gap-4 text-sm">
+              <Inline class="text-muted-foreground">
+                {labels.freeFrom}
+              </Inline>
+              <Inline class="font-medium">
+                {fmtMoney(z.freeFrom, z.currency)}
+              </Inline>
+            </ListItem>
+            <ListItem class="flex items-center justify-between gap-4 text-sm">
+              <Inline class="text-muted-foreground">
+                {labels.minOrder}
+              </Inline>
+              <Inline class="font-medium">
+                {fmtMoney(z.minOrder, z.currency)}
+              </Inline>
+            </ListItem>
+            <ListItem class="flex items-center justify-between gap-4 text-sm">
+              <Inline class="text-muted-foreground">
+                {labels.time}
+              </Inline>
+              <Inline class="font-medium">
+                {z.time}
+              </Inline>
+            </ListItem>
+          </List>
+          {#if z.express}
+            <Badge variant="secondary" size="default" class="w-fit">
+              {z.express}
+            </Badge>
+          {/if}
+        </Stack>
+      {/each}
+    </Grid>
+  {/if}
+</SectionFrame>
diff --git a/packages/svelte/ui/src/blocks/zone-table.types.ts b/packages/svelte/ui/src/blocks/zone-table.types.ts
new file mode 100644
index 0000000..6b8a1b2
--- /dev/null
+++ b/packages/svelte/ui/src/blocks/zone-table.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type Zone = {
+  id: string;
+  name: string;
+  area: string;
+  price: number;
+  freeFrom: number;
+  minOrder: number;
+  time: string;
+  express: string;
+  currency: string;
+};
+
+export type ZoneLabels = {
+  caption: string;
+  zone: string;
+  price: string;
+  freeFrom: string;
+  minOrder: string;
+  time: string;
+  express: string;
+};
diff --git a/packages/svelte/ui/src/components/action-group.svelte b/packages/svelte/ui/src/components/action-group.svelte
new file mode 100644
index 0000000..dd2b326
--- /dev/null
+++ b/packages/svelte/ui/src/components/action-group.svelte
@@ -0,0 +1,41 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not
+  handlers: the page decides what they open.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type ActionGroupProps = {
+    primary: string;
+    primaryHref?: string;
+    secondary?: string;
+    secondaryHref?: string;
+    align?: "start" | "center";
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+
+  let { primary, primaryHref, secondary, secondaryHref, align = "start" }: ActionGroupProps = $props();
+</script>
+
+<Group
+  gap="4"
+  align="center"
+  justify={(((align as string) === "center") ? "center" : "start")}
+  class="flex-wrap"
+  data-slot="action-group"
+>
+  <Button variant="default" size="default" href={primaryHref} data-testid="action-primary">
+    {primary}
+  </Button>
+  {#if secondary}
+    <Button variant="outline" size="default" href={secondaryHref} data-testid="action-secondary">
+      {secondary}
+    </Button>
+  {/if}
+</Group>
diff --git a/packages/svelte/ui/src/components/app-main.svelte b/packages/svelte/ui/src/components/app-main.svelte
new file mode 100644
index 0000000..b79a342
--- /dev/null
+++ b/packages/svelte/ui/src/components/app-main.svelte
@@ -0,0 +1,75 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/app-main.ts -->
+<!--
+  The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel
+  when `activity` is given).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Metric } from "../blocks/metric-row.types";
+  import type { Point } from "../blocks/chart-panel.types";
+  import type { Event } from "../blocks/activity-feed.types";
+  import type { OverviewChart, OverviewActivity } from "../blocks/dashboard-overview.types";
+
+  export type AppMainProps = {
+    id: string;
+    title: string;
+    metrics: Metric[];
+    chart: OverviewChart;
+    activity?: OverviewActivity;
+    cols?: "1-2" | "1-4";
+    density?: "default" | "compact";
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import BarChart from "../components/bar-chart.svelte";
+  import Panel from "../components/panel.svelte";
+  import StatTile from "../components/stat-tile.svelte";
+  import Timeline from "../components/timeline.svelte";
+  import { tpl } from "../utils";
+
+  let { id, title, metrics, chart, activity, cols = "1-2", density = "default" }: AppMainProps = $props();
+</script>
+
+<Stack
+  gap={(((density as string) === "compact") ? "4" : "6")}
+  align="stretch"
+  class="min-w-0"
+  data-testid="app-main"
+>
+  <Title as={2} size="2xl" weight="bold" id={tpl("{0}-title", id)}>
+    {title}
+  </Title>
+  {#if ((metrics?.length ?? 0) > 0)}
+    <Grid cols={cols} class="gap-4" data-testid="items">
+      {#each metrics as m (m.id)}
+        <Box data-testid="item">
+          <StatTile label={m.label} value={m.value} icon={m.icon} hint={m.hint} />
+        </Box>
+      {/each}
+    </Grid>
+  {/if}
+  {#if activity}
+    <Grid cols="1-2" class="items-stretch gap-4">
+      {#if ((chart.series?.length ?? 0) > 0)}
+        <Panel title={chart.title} description={chart.text} id={tpl("{0}-chart", id)} class="h-full">
+          <BarChart bars={chart.series} label={chart.summary} height={144} />
+        </Panel>
+      {/if}
+      {#if ((activity?.events?.length ?? 0) > 0)}
+        <Panel title={activity?.title} description={activity?.text} id={tpl("{0}-feed", id)} class="h-full">
+          <Timeline items={activity?.events} />
+        </Panel>
+      {/if}
+    </Grid>
+  {:else if ((chart.series?.length ?? 0) > 0)}
+    <Panel title={chart.title} description={chart.text} id={tpl("{0}-chart", id)} class="h-full">
+      <BarChart bars={chart.series} label={chart.summary} height={144} />
+    </Panel>
+  {/if}
+</Stack>
diff --git a/packages/svelte/ui/src/components/article-block.svelte b/packages/svelte/ui/src/components/article-block.svelte
new file mode 100644
index 0000000..8669669
--- /dev/null
+++ b/packages/svelte/ui/src/components/article-block.svelte
@@ -0,0 +1,23 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/landmarks.ts -->
+<!-- A self-contained item (a review, a card, a project) in its own file: Block tag article. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type ArticleBlockProps = {
+    testid?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import { cn } from "../utils";
+
+  let { testid, class: className, children }: ArticleBlockProps = $props();
+</script>
+
+<Block tag="article" class={cn(className)} data-testid={testid}>
+  {@render children?.()}
+</Block>
diff --git a/packages/svelte/ui/src/components/auth-form.svelte b/packages/svelte/ui/src/components/auth-form.svelte
new file mode 100644
index 0000000..64ea867
--- /dev/null
+++ b/packages/svelte/ui/src/components/auth-form.svelte
@@ -0,0 +1,76 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/auth.ts -->
+<!--
+  The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot
+  link, the terms, the submit button.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { AuthLabels } from "../blocks/auth-card.types";
+
+  export type AuthFormProps = {
+    id: string;
+    mode?: "signin" | "signup" | "reset" | "magic";
+    labels: AuthLabels;
+    submit: string;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Checkbox from "../primitives/checkbox/checkbox.svelte";
+  import Form from "../primitives/form/form.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import Field from "../components/field.svelte";
+  import { cn, tpl } from "../utils";
+
+  let { id, mode = "signin", labels, submit }: AuthFormProps = $props();
+</script>
+
+<Form method="dialog" class="gap-4" data-testid="auth-form">
+  {#if ((mode as string) === "signup")}
+    <Field label={labels.name} htmlFor={tpl("{0}-name", id)}>
+      <Input type="text" name="name" autocomplete="name" id={tpl("{0}-name", id)} data-testid="field" />
+    </Field>
+  {/if}
+  <Field label={labels.email} htmlFor={tpl("{0}-email", id)}>
+    <Input type="email" name="email" autocomplete="email" id={tpl("{0}-email", id)} data-testid="field" />
+  </Field>
+  {#if (((mode as string) !== "reset") && ((mode as string) !== "magic"))}
+    <Field label={labels.password} htmlFor={tpl("{0}-password", id)}>
+      <Input
+        type="password"
+        name="password"
+        autocomplete={(((mode as string) === "signup") ? "new-password" : "current-password")}
+        id={tpl("{0}-password", id)}
+        data-testid="field"
+      />
+    </Field>
+  {/if}
+  {#if ((mode as string) === "signin")}
+    <Group justify="between" align="center" class="flex-wrap gap-2">
+      <Group gap="2" align="center" class={cn("w-fit", "")}>
+        <Checkbox name="remember" id={tpl("{0}-remember", id)} />
+        <Label for={tpl("{0}-remember", id)} class="text-sm">
+          {labels.remember}
+        </Label>
+      </Group>
+      <Button variant="link" size="sm" class="px-0">
+        {labels.forgot}
+      </Button>
+    </Group>
+  {/if}
+  {#if ((mode as string) === "signup")}
+    <Group gap="2" align="center" class={cn("w-fit", "")}>
+      <Checkbox name="terms" id={tpl("{0}-terms", id)} />
+      <Label for={tpl("{0}-terms", id)} class="text-sm">
+        {labels.terms}
+      </Label>
+    </Group>
+  {/if}
+  <Button variant="default" size="default" type="submit" class="w-full" data-testid="submit">
+    {submit}
+  </Button>
+</Form>
diff --git a/packages/svelte/ui/src/components/avatar.svelte b/packages/svelte/ui/src/components/avatar.svelte
new file mode 100644
index 0000000..647bed0
--- /dev/null
+++ b/packages/svelte/ui/src/components/avatar.svelte
@@ -0,0 +1,50 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** Avatar: the classes of each value (shadcn/cva style). */
+  export const avatarVariants = variants({
+    base: "relative inline-flex shrink-0 overflow-hidden bg-muted rounded-full",
+    variants: {
+      size: {
+        xs: "size-6",
+        sm: "size-8",
+        default: "size-10",
+        lg: "size-12",
+        xl: "size-16",
+      },
+    },
+    defaultVariants: { size: "default" },
+  });
+
+  export type AvatarProps = {
+    src: string;
+    alt?: string;
+    size?: "xs" | "sm" | "default" | "lg" | "xl";
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Image from "../primitives/image/image.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import { cn } from "../utils";
+
+  let { src, alt = "", size = "default", class: className }: AvatarProps = $props();
+</script>
+
+<Inline class={cn(avatarVariants({ size: size }), className)} data-slot="avatar">
+  <Image
+    src={src}
+    alt={alt}
+    class="size-full object-cover"
+    fit="cover"
+    size="auto"
+    loading="eager"
+    decoding="auto"
+    draggable="false"
+  />
+</Inline>
diff --git a/packages/svelte/ui/src/components/backdrop.svelte b/packages/svelte/ui/src/components/backdrop.svelte
new file mode 100644
index 0000000..07bc7d6
--- /dev/null
+++ b/packages/svelte/ui/src/components/backdrop.svelte
@@ -0,0 +1,28 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the
+  Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of
+  the block (rule 01).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type BackdropProps = {
+    kind?: "none" | "image";
+    alt?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+
+  let { kind = "none", alt = "" }: BackdropProps = $props();
+</script>
+
+{#if ((kind as string) === "image")}
+  <Box class="pointer-events-none absolute inset-0 -z-10" data-testid="backdrop">
+    <MediaFrame alt={alt} ratio="21/9" class="size-full rounded-none opacity-30" />
+  </Box>
+{/if}
diff --git a/packages/svelte/ui/src/components/badge-square.svelte b/packages/svelte/ui/src/components/badge-square.svelte
new file mode 100644
index 0000000..e551653
--- /dev/null
+++ b/packages/svelte/ui/src/components/badge-square.svelte
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd). -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** BadgeSquare: the classes of each value (shadcn/cva style). */
+  export const badgeSquareVariants = variants({
+    base:
+      "inline-flex shrink-0 items-center justify-center bg-card text-xs font-medium whitespace-nowrap text-foreground " +
+      "inset-ring inset-ring-border rounded",
+    variants: {
+      size: {
+        sm: "h-4 min-w-4 px-1",
+        default: "h-5 px-2",
+      },
+    },
+    defaultVariants: { size: "default" },
+  });
+
+  export type BadgeSquareProps = {
+    size?: "sm" | "default";
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Inline from "../primitives/inline/inline.svelte";
+  import { cn } from "../utils";
+
+  let { size = "default", class: className, children }: BadgeSquareProps = $props();
+</script>
+
+<Inline class={cn(badgeSquareVariants({ size: size }), className)} data-slot="badge-square">
+  {@render children?.()}
+</Inline>
diff --git a/packages/svelte/ui/src/components/bar-chart.svelte b/packages/svelte/ui/src/components/bar-chart.svelte
new file mode 100644
index 0000000..fe5b4d1
--- /dev/null
+++ b/packages/svelte/ui/src/components/bar-chart.svelte
@@ -0,0 +1,50 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image
+  for assistive technology: `label` carries the summary, the bar values are in the captions and titles.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Bar } from "./bar-chart.types";
+
+  export type BarChartProps = {
+    bars: Bar[];
+    label: string;
+    max?: number;
+    height?: number;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn } from "../utils";
+
+  let { bars, label, max, height = 160, class: className }: BarChartProps = $props();
+  const top = $derived(Math.max(1, (max ?? bars.reduce((m, i) => Math.max(m, i.value), 0))));
+</script>
+
+<Box class={cn("min-w-0", className)} data-slot="bar-chart">
+  <Box class="flex min-w-0 items-end gap-2" role="img" aria-label={label} style={`height:${height}px`}>
+    {#each bars as b (b.id)}
+      <Box class="flex h-full min-w-0 flex-1 items-end" title={(b.title ?? b.label)}>
+        <Box
+          class={cn("w-full rounded", (b.muted ? "bg-muted-foreground" : "bg-primary"))}
+          style={`height:${Math.max(2, Math.round(((b.value / top) * 100)))}%`}
+          data-bar={b.id}
+        />
+      </Box>
+    {/each}
+  </Box>
+  <Box class="mt-2 flex min-w-0 gap-2" aria-hidden="true">
+    {#each bars as b (b.id)}
+      <Box class="relative h-4 min-w-0 flex-1">
+        <Text class={"absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground"}>
+          {b.label}
+        </Text>
+      </Box>
+    {/each}
+  </Box>
+</Box>
diff --git a/packages/svelte/ui/src/components/bar-chart.types.ts b/packages/svelte/ui/src/components/bar-chart.types.ts
new file mode 100644
index 0000000..7125a60
--- /dev/null
+++ b/packages/svelte/ui/src/components/bar-chart.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+
+export type Bar = {
+  id: string;
+  label: string;
+  value: number;
+  title?: string;
+  muted?: boolean;
+};
diff --git a/packages/svelte/ui/src/components/bulk-bar.svelte b/packages/svelte/ui/src/components/bulk-bar.svelte
new file mode 100644
index 0000000..ac7aa8d
--- /dev/null
+++ b/packages/svelte/ui/src/components/bulk-bar.svelte
@@ -0,0 +1,57 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  The "N selected" bar of a list: a count, a clear button and the bulk actions (children). All text comes in
+  through props.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type BulkBarProps = {
+    label: string;
+    clearLabel: string;
+    class?: string;
+    children?: Snippet;
+    onclear?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import { cn } from "../utils";
+
+  let { label, clearLabel, class: className, children, onclear }: BulkBarProps = $props();
+</script>
+
+<Box
+  class={cn(
+    "flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background",
+    className
+  )}
+  role="region"
+  aria-label={label}
+  aria-live="polite"
+  data-slot="bulk-bar"
+  data-testid="bulk-bar"
+>
+  <Button
+    variant="ghost"
+    size="sm"
+    layout="icon"
+    type="button"
+    aria-label={clearLabel}
+    class="text-background hover:bg-background/15 hover:text-background"
+    onclick={() => onclear?.()}
+  >
+    <LucideIcon name="x" size={16} />
+  </Button>
+  <Inline data-testid="bulk-count">
+    {label}
+  </Inline>
+  <Inline class="ml-auto flex flex-wrap items-center gap-2">
+    {@render children?.()}
+  </Inline>
+</Box>
diff --git a/packages/svelte/ui/src/components/cart-summary-card.svelte b/packages/svelte/ui/src/components/cart-summary-card.svelte
new file mode 100644
index 0000000..5cb689a
--- /dev/null
+++ b/packages/svelte/ui/src/components/cart-summary-card.svelte
@@ -0,0 +1,142 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!--
+  The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field
+  with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Promo, CartSummaryLabels } from "./cart-summary-card.types";
+  import type { CartLine } from "../blocks/cart-list.types";
+  import type { SummaryRow } from "../blocks/order-summary.types";
+
+  export type CartSummaryCardProps = {
+    lines: CartLine[];
+    rows: SummaryRow[];
+    promos: Promo[];
+    labels: CartSummaryLabels;
+    items?: "show" | "hide";
+    promo?: "show" | "hide";
+    field?: string;
+    progress?: "show" | "hide";
+    value?: number;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Progress from "../primitives/form/progress.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { cn, fmtMoney, tpl } from "../utils";
+
+  let {
+    lines,
+    rows,
+    promos,
+    labels,
+    items = "hide",
+    promo = "show",
+    field = "promo",
+    progress = "show",
+    value = 70,
+  }: CartSummaryCardProps = $props();
+</script>
+
+<Stack gap="6" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="summary">
+  <Group gap="4" align="baseline" justify="between">
+    <Title as={2} size="lg" weight="semibold">
+      {labels.title}
+    </Title>
+    <Text size="xs" class="text-muted-foreground">
+      {tpl(labels.items, ((lines?.length ?? 0) == null ? undefined : String((lines?.length ?? 0))))}
+    </Text>
+  </Group>
+  {#if (((items as string) === "show") && ((lines?.length ?? 0) > 0))}
+    <List tag="ul" class="flex flex-col gap-4" data-testid="summary-lines">
+      {#each lines as line (line.id)}
+        <ListItem class="flex items-center gap-4 text-sm">
+          <MediaFrame alt={line.name} ratio="1/1" class="size-12 shrink-0" />
+          <Stack gap="0" class="flex-1">
+            <Text size="sm" weight="semibold">
+              {line.name}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {tpl("{0} x {1}", line.qty, fmtMoney(line.price, line.currency))}
+            </Text>
+          </Stack>
+          <Inline class="font-medium">
+            {fmtMoney((line.price * line.qty), line.currency)}
+          </Inline>
+        </ListItem>
+      {/each}
+    </List>
+  {/if}
+  {#if ((promo as string) === "show")}
+    <Stack gap="2" align="stretch" data-testid="promo">
+      <Group gap="2" align="center">
+        <Input type="text" name={field} aria-label={labels.promo} placeholder={labels.promo} class="min-w-0 flex-1" />
+        <Button variant="outline" size="default" type="button">
+          {labels.apply}
+        </Button>
+      </Group>
+      {#if ((promos?.length ?? 0) > 0)}
+        <Group gap="2" align="center" class="flex-wrap">
+          <Text size="xs" class="text-muted-foreground">
+            {labels.codes}
+          </Text>
+          {#each promos as c (c.id)}
+            <Badge variant="outline" size="sm" data-testid="code">
+              {c.code}
+            </Badge>
+          {/each}
+        </Group>
+      {/if}
+    </Stack>
+  {/if}
+  {#if ((progress as string) === "show")}
+    <Stack gap="2" align="stretch" class="rounded bg-muted p-4" data-testid="progress">
+      <Text size="sm">
+        {labels.progress}
+      </Text>
+      <Progress value={(value == null ? undefined : String(value))} max="100" aria-label={labels.progress} />
+    </Stack>
+  {/if}
+  {#if ((rows?.length ?? 0) > 0)}
+    <List tag="ul" class="flex flex-col gap-2">
+      {#each rows as row (row.id)}
+        <ListItem
+          class={cn(
+            "flex items-center justify-between gap-4",
+            (
+              row.strong ? "border-t border-border pt-4 text-base font-bold"
+              : "text-sm text-muted-foreground"
+            )
+          )}
+          data-testid="row"
+        >
+          <Inline>
+            {row.label}
+          </Inline>
+          <Inline>
+            {fmtMoney(row.amount, row.currency)}
+          </Inline>
+        </ListItem>
+      {/each}
+    </List>
+  {/if}
+  <Button variant="default" size="lg" class="w-full" data-testid="checkout">
+    {labels.checkout}
+  </Button>
+  <Text size="xs" class="text-muted-foreground">
+    {labels.note}
+  </Text>
+</Stack>
diff --git a/packages/svelte/ui/src/components/cart-summary-card.types.ts b/packages/svelte/ui/src/components/cart-summary-card.types.ts
new file mode 100644
index 0000000..9e5a5f5
--- /dev/null
+++ b/packages/svelte/ui/src/components/cart-summary-card.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Promo = {
+  id: string;
+  code: string;
+};
+
+export type CartSummaryLabels = {
+  title: string;
+  items: string;
+  promo: string;
+  apply: string;
+  codes: string;
+  progress: string;
+  checkout: string;
+  note: string;
+};
diff --git a/packages/svelte/ui/src/components/cart-table.svelte b/packages/svelte/ui/src/components/cart-table.svelte
new file mode 100644
index 0000000..9f23cfb
--- /dev/null
+++ b/packages/svelte/ui/src/components/cart-table.svelte
@@ -0,0 +1,144 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/cart-table.ts -->
+<!--
+  The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a
+  remove button.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { CartLine, CartLabels } from "../blocks/cart-list.types";
+
+  export type CartTableProps = {
+    lines: CartLine[];
+    labels: CartLabels;
+    media?: "image" | "none";
+    density?: "default" | "compact";
+    field?: string;
+    onremove?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Table from "../primitives/table/table.svelte";
+  import TableBody from "../primitives/table/table-body.svelte";
+  import TableCaption from "../primitives/table/table-caption.svelte";
+  import TableCell from "../primitives/table/table-cell.svelte";
+  import TableHead from "../primitives/table/table-head.svelte";
+  import TableHeadCell from "../primitives/table/table-head-cell.svelte";
+  import TableRow from "../primitives/table/table-row.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import NumberField from "../components/number-field.svelte";
+  import { cn, fmtMoney, tpl } from "../utils";
+
+  let {
+    lines,
+    labels,
+    media = "image",
+    density = "default",
+    field = "qty",
+    onremove,
+  }: CartTableProps = $props();
+</script>
+
+<Box class="w-full overflow-x-auto">
+  <Table class="w-full text-left text-sm" data-testid="cart-table">
+    <TableCaption class="sr-only">
+      {labels.caption}
+    </TableCaption>
+    <TableHead>
+      <TableRow>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.product}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="hidden py-2 sm:table-cell">
+          {labels.price}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.qty}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.total}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          <Inline class="sr-only">
+            {labels.remove}
+          </Inline>
+        </TableHeadCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each lines as line (line.id)}
+        <TableRow class="border-t border-border" data-testid="item">
+          <TableCell class={cn((((density as string) === "compact") ? "py-2" : "py-4"))}>
+            <Group gap="4" align="center">
+              {#if ((media as string) === "image")}
+                <MediaFrame alt={line.name} ratio="1/1" class="hidden size-14 shrink-0 sm:block" />
+              {/if}
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {line.name}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {line.variant}
+                </Text>
+              </Stack>
+            </Group>
+          </TableCell>
+          <TableCell class="hidden sm:table-cell">
+            {fmtMoney(line.price, line.currency)}
+          </TableCell>
+          <TableCell>
+            <NumberField
+              value={(line.qty == null ? undefined : String(line.qty))}
+              name={tpl("{0}-{1}", field, line.id)}
+              min="1"
+              label={labels.qty}
+              decrease={labels.decrease}
+              increase={labels.increase}
+            />
+          </TableCell>
+          <TableCell class="font-semibold">
+            {fmtMoney((line.price * line.qty), line.currency)}
+          </TableCell>
+          <TableCell class="text-right">
+            <Button
+              variant="ghost"
+              size="sm"
+              layout="icon"
+              aria-label={labels.remove}
+              data-testid="remove"
+              onclick={() => onremove?.(line.id)}
+            >
+              <LucideIcon name="x" size={16} />
+            </Button>
+          </TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</Box>
+{#if ((lines?.length ?? 0) > 0)}
+  <Group
+    gap="4"
+    align="center"
+    justify="between"
+    class="mt-4 flex-wrap border-t border-border pt-4"
+    data-testid="cart-footer"
+  >
+    <Text size="base" weight="bold" data-testid="subtotal">
+      {labels.subtotal}
+      {" "}
+      {fmtMoney(lines.reduce((s, i) => s + i.price * i.qty, 0), lines[0]?.currency ?? "")}
+    </Text>
+    <Button variant="default" size="default" data-testid="checkout">
+      {labels.checkout}
+    </Button>
+  </Group>
+{/if}
diff --git a/packages/svelte/ui/src/components/checkout-step.svelte b/packages/svelte/ui/src/components/checkout-step.svelte
new file mode 100644
index 0000000..a197c4d
--- /dev/null
+++ b/packages/svelte/ui/src/components/checkout-step.svelte
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!--
+  One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`).
+  Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CheckoutStepProps = {
+    number: string;
+    title: string;
+    text?: string;
+    layout?: "cards" | "numbered";
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+
+  let { number, title, text = "", layout = "cards", children }: CheckoutStepProps = $props();
+</script>
+
+<Stack
+  gap="6"
+  align="stretch"
+  class={
+    (layout as string) === "cards" ? "rounded bg-card inset-ring inset-ring-border p-6"
+    : "border-t border-border pt-6"
+  }
+  data-testid="step"
+>
+  <Group gap="4" align="start">
+    {#if ((layout as string) === "numbered")}
+      <Box class={"flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground"}>
+        {number}
+      </Box>
+    {/if}
+    <Stack gap="0">
+      <Title as={2} size="lg" weight="semibold">
+        {title}
+      </Title>
+      {#if text}
+        <Text size="sm" class="text-muted-foreground">
+          {text}
+        </Text>
+      {/if}
+    </Stack>
+  </Group>
+  {@render children?.()}
+</Stack>
diff --git a/packages/svelte/ui/src/components/checkout-submit.svelte b/packages/svelte/ui/src/components/checkout-submit.svelte
new file mode 100644
index 0000000..8ada63e
--- /dev/null
+++ b/packages/svelte/ui/src/components/checkout-submit.svelte
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!-- The end of the checkout form: the consent checkbox, the submit button and the legal line. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CheckoutSubmitProps = {
+    id: string;
+    consent: string;
+    submit: string;
+    legal: string;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Checkbox from "../primitives/checkbox/checkbox.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn, tpl } from "../utils";
+
+  let { id, consent, submit, legal }: CheckoutSubmitProps = $props();
+</script>
+
+<Stack gap="4" align="start">
+  <Group gap="2" align="center" class={cn("w-fit", "")}>
+    <Checkbox name="consent" id={tpl("{0}-consent", id)} />
+    <Label for={tpl("{0}-consent", id)} class="text-sm">
+      {consent}
+    </Label>
+  </Group>
+  <Button variant="default" size="lg" type="submit" data-testid="submit">
+    {submit}
+  </Button>
+  <Text size="xs" class="text-muted-foreground">
+    {legal}
+  </Text>
+</Stack>
diff --git a/packages/svelte/ui/src/components/code-window.svelte b/packages/svelte/ui/src/components/code-window.svelte
new file mode 100644
index 0000000..14b73bf
--- /dev/null
+++ b/packages/svelte/ui/src/components/code-window.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/visuals.ts -->
+<!--
+  A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with
+  the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { CodeLine } from "./code-window.types";
+
+  export type CodeWindowProps = {
+    title: string;
+    prompt: string;
+    lines: CodeLine[];
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn } from "../utils";
+
+  let { title, prompt, lines, class: className }: CodeWindowProps = $props();
+</script>
+
+<Box
+  class={cn(
+    "w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border",
+    className
+  )}
+  role="group"
+  aria-label={title}
+  data-slot="code-window"
+>
+  <Box class="flex items-center border-b border-border px-4 py-2">
+    <Text size="xs" class="text-muted-foreground">
+      {title}
+    </Text>
+  </Box>
+  <List class="m-0 flex list-none flex-col gap-2 p-4 font-mono text-sm">
+    {#each lines as line (line.id)}
+      <ListItem
+        class={cn("flex gap-2", ((line.kind === "command") ? "text-foreground" : "text-muted-foreground"))}
+        data-kind={line.kind}
+      >
+        {#if (line.kind === "command")}
+          <Inline class="select-none text-muted-foreground">
+            {prompt}
+          </Inline>
+        {/if}
+        <Inline>
+          {line.text}
+        </Inline>
+      </ListItem>
+    {/each}
+  </List>
+</Box>
diff --git a/packages/svelte/ui/src/components/code-window.types.ts b/packages/svelte/ui/src/components/code-window.types.ts
new file mode 100644
index 0000000..351eaab
--- /dev/null
+++ b/packages/svelte/ui/src/components/code-window.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/visuals.ts
+
+export type CodeLine = {
+  id: string;
+  text: string;
+  kind: string;
+};
diff --git a/packages/svelte/ui/src/components/compare-mark.svelte b/packages/svelte/ui/src/components/compare-mark.svelte
new file mode 100644
index 0000000..3db0145
--- /dev/null
+++ b/packages/svelte/ui/src/components/compare-mark.svelte
@@ -0,0 +1,44 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/compare.ts -->
+<!--
+  One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen
+  readers), any other value is shown as text.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CompareMarkProps = {
+    value: string;
+    yes: string;
+    no: string;
+  };
+</script>
+
+<script lang="ts">
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+
+  let { value, yes, no }: CompareMarkProps = $props();
+</script>
+
+{#if ((value as string) === "yes")}
+  <Inline class="inline-flex items-center gap-2" data-mark="yes">
+    <LucideIcon name="check" size={16} class="text-foreground" />
+    <Inline class="sr-only">
+      {yes}
+    </Inline>
+  </Inline>
+{/if}
+{#if ((value as string) === "no")}
+  <Inline class="inline-flex items-center gap-2 text-muted-foreground" data-mark="no">
+    <LucideIcon name="minus" size={16} />
+    <Inline class="sr-only">
+      {no}
+    </Inline>
+  </Inline>
+{/if}
+{#if (((value as string) !== "yes") && ((value as string) !== "no"))}
+  <Inline>
+    {value}
+  </Inline>
+{/if}
diff --git a/packages/svelte/ui/src/components/cta-actions.svelte b/packages/svelte/ui/src/components/cta-actions.svelte
new file mode 100644
index 0000000..ea7d189
--- /dev/null
+++ b/packages/svelte/ui/src/components/cta-actions.svelte
@@ -0,0 +1,50 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/cta.ts -->
+<!--
+  The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions
+  form).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { ActionSet } from "./cta-actions.types";
+
+  export type CtaActionsProps = {
+    id: string;
+    actions: ActionSet;
+    center?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Form from "../primitives/form/form.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import ActionGroup from "../components/action-group.svelte";
+  import { cn, tpl } from "../utils";
+
+  let { id, actions, center = false }: CtaActionsProps = $props();
+</script>
+
+{#if (actions.mode === "form")}
+  <Form method="dialog" class={cn("w-full max-w-md", (center ? "mx-auto" : ""))} data-testid="email-form">
+    <Label for={tpl("{0}-email", id)} class="sr-only">
+      {actions.emailLabel}
+    </Label>
+    <Group gap="2" align="start" class="w-full flex-wrap">
+      <Input type="email" name="email" class="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+      <Button variant="default" size="default" type="submit" data-testid="submit">
+        {actions.cta}
+      </Button>
+    </Group>
+  </Form>
+{:else}
+  <ActionGroup
+    primary={actions.cta}
+    primaryHref={actions.href}
+    secondary={((actions.mode === "two") ? actions.secondary : undefined)}
+    secondaryHref={actions.secondaryHref}
+    align={(center ? "center" : "start")}
+  />
+{/if}
diff --git a/packages/svelte/ui/src/components/cta-actions.types.ts b/packages/svelte/ui/src/components/cta-actions.types.ts
new file mode 100644
index 0000000..a82d453
--- /dev/null
+++ b/packages/svelte/ui/src/components/cta-actions.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta.ts
+
+export type ActionSet = {
+  /** one or two links, or a form */
+  mode?: "one" | "two" | "form";
+  /** primary action label */
+  cta: string;
+  /** the address of the primary action; none: a button, not a link */
+  href?: string;
+  secondary?: string;
+  secondaryHref?: string;
+  /** label of the form field (the email field, or the prompt line of HeroPrompt) */
+  emailLabel?: string;
+};
diff --git a/packages/svelte/ui/src/components/cta-proof-items.svelte b/packages/svelte/ui/src/components/cta-proof-items.svelte
new file mode 100644
index 0000000..794f2eb
--- /dev/null
+++ b/packages/svelte/ui/src/components/cta-proof-items.svelte
@@ -0,0 +1,120 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/cta-proof-parts.ts -->
+<!--
+  The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats
+  (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { CtaContent } from "../blocks/cta-proof.types";
+
+  export type CtaProofItemsProps = {
+    content: CtaContent;
+    proof?: "logos" | "features" | "stats" | "rows" | "zones";
+    center?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { fmtMoney } from "../utils";
+
+  let { content, proof = "stats", center = false }: CtaProofItemsProps = $props();
+</script>
+
+{#if (((proof as string) === "logos") && ((content.logos?.length ?? 0) > 0))}
+  <Box class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6" data-testid="cta-proof">
+    {#each content.logos as l (l.id)}
+      <Group gap="2" align="center" justify="center" class="text-muted-foreground" data-testid="cta-item">
+        <LucideIcon name={l.icon} size={20} />
+        <Text size="sm" weight="semibold">
+          {l.name}
+        </Text>
+      </Group>
+    {/each}
+  </Box>
+{/if}
+{#if (((proof as string) === "features") && ((content.features?.length ?? 0) > 0))}
+  <Box class="grid grid-cols-1 gap-4 text-left sm:grid-cols-2" data-testid="cta-proof">
+    {#each content.features as f (f.id)}
+      <Group gap="4" align="start" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="cta-item">
+        <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+          <LucideIcon name={f.icon} size={20} />
+        </Box>
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {f.title}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {f.text}
+          </Text>
+        </Stack>
+      </Group>
+    {/each}
+  </Box>
+{/if}
+{#if (((proof as string) === "stats") && ((content.stats?.length ?? 0) > 0))}
+  <Box class="grid grid-cols-3 gap-4" data-testid="cta-proof">
+    {#each content.stats as s, i (s.id)}
+      {#if (i < 3)}
+        <Stack gap="0" class={(center ? "items-center text-center" : "")} data-testid="cta-item">
+          <Text size="3xl" weight="bold">
+            {s.value}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {s.label}
+          </Text>
+        </Stack>
+      {/if}
+    {/each}
+  </Box>
+{/if}
+{#if (((proof as string) === "rows") && ((content.features?.length ?? 0) > 0))}
+  <List class="m-0 flex list-none flex-col gap-4 p-0" data-testid="cta-proof">
+    {#each content.features as f (f.id)}
+      <ListItem class="flex items-start gap-4" data-testid="cta-item">
+        <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+          <LucideIcon name={f.icon} size={20} />
+        </Box>
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {f.title}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {f.text}
+          </Text>
+        </Stack>
+      </ListItem>
+    {/each}
+  </List>
+{/if}
+{#if (((proof as string) === "zones") && ((content.zones?.length ?? 0) > 0))}
+  <List class="m-0 flex list-none flex-col p-0" data-testid="cta-proof">
+    {#each content.zones as z (z.id)}
+      <ListItem class="flex items-start justify-between gap-4 border-b border-border py-4" data-testid="cta-item">
+        <Stack gap="0" class="min-w-0">
+          <Text size="sm" weight="semibold">
+            {z.name}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {z.area}
+          </Text>
+        </Stack>
+        <Stack gap="0" class="shrink-0 text-right">
+          <Text size="sm" weight="semibold">
+            {fmtMoney(z.price, z.currency)}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {z.time}
+          </Text>
+        </Stack>
+      </ListItem>
+    {/each}
+  </List>
+{/if}
diff --git a/packages/svelte/ui/src/components/drawer-lines.svelte b/packages/svelte/ui/src/components/drawer-lines.svelte
new file mode 100644
index 0000000..e9c01b0
--- /dev/null
+++ b/packages/svelte/ui/src/components/drawer-lines.svelte
@@ -0,0 +1,98 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shop-parts.ts -->
+<!--
+  The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal
+  and total and the button.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { CartLine, CartLabels } from "../blocks/cart-list.types";
+  import type { SummaryRow } from "../blocks/order-summary.types";
+  import type { DrawerLabels } from "../blocks/cart-drawer.types";
+
+  export type DrawerLinesProps = {
+    lines: CartLine[];
+    rows: SummaryRow[];
+    labels: CartLabels;
+    drawer: DrawerLabels;
+    media?: "image" | "none";
+    field?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Progress from "../primitives/form/progress.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import NumberField from "../components/number-field.svelte";
+  import { fmtMoney, tpl } from "../utils";
+
+  let { lines, rows, labels, drawer, media = "image", field = "qty" }: DrawerLinesProps = $props();
+</script>
+
+<Stack gap="4" align="stretch" class="flex-1 p-4" data-testid="lines">
+  {#each lines as line (line.id)}
+    <Group gap="4" align="start" data-testid="item">
+      {#if ((media as string) === "image")}
+        <MediaFrame alt={line.name} ratio="1/1" class="size-16 shrink-0" />
+      {/if}
+      <Stack gap="2" align="stretch" class="flex-1">
+        <Group gap="2" justify="between" align="start">
+          <Text size="sm" weight="semibold">
+            {line.name}
+          </Text>
+          <Inline class="text-sm font-medium">
+            {fmtMoney((line.price * line.qty), line.currency)}
+          </Inline>
+        </Group>
+        <Text size="xs" class="text-muted-foreground">
+          {line.variant}
+        </Text>
+        <NumberField
+          value={(line.qty == null ? undefined : String(line.qty))}
+          name={tpl("{0}-{1}", field, line.id)}
+          min="1"
+          label={labels.qty}
+          decrease={labels.decrease}
+          increase={labels.increase}
+        />
+      </Stack>
+    </Group>
+  {/each}
+</Stack>
+<Stack gap="4" align="stretch" class="border-t border-border p-4">
+  <Stack gap="2" align="stretch" class="rounded bg-muted p-4" data-testid="progress">
+    <Text size="sm">
+      {drawer.progress}
+    </Text>
+    <Progress value="96" max="100" aria-label={drawer.progress} />
+  </Stack>
+  <List tag="ul" class="flex flex-col gap-2">
+    {#each rows as row, i (row.id)}
+      {#if (row.strong ? true : (i === 0))}
+        <ListItem
+          class={
+            row.strong ? "flex justify-between text-base font-bold"
+            : "flex justify-between text-sm text-muted-foreground"
+          }
+        >
+          <Inline>
+            {row.label}
+          </Inline>
+          <Inline>
+            {fmtMoney(row.amount, row.currency)}
+          </Inline>
+        </ListItem>
+      {/if}
+    {/each}
+  </List>
+  <Button variant="default" size="lg" class="w-full" data-testid="checkout">
+    {labels.checkout}
+  </Button>
+</Stack>
diff --git a/packages/svelte/ui/src/components/dropdown-item.svelte b/packages/svelte/ui/src/components/dropdown-item.svelte
new file mode 100644
index 0000000..c76eba8
--- /dev/null
+++ b/packages/svelte/ui/src/components/dropdown-item.svelte
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex
+  -1: the menu moves focus with the arrow keys.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type DropdownItemProps = {
+    selected?: boolean;
+    class?: string;
+    children?: Snippet;
+    icon?: Snippet;
+    right?: Snippet;
+    onclick?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import ButtonPlain from "../primitives/button-plain/button-plain.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import { cn } from "../utils";
+
+  let { selected = false, class: className, children, icon, right, onclick }: DropdownItemProps = $props();
+</script>
+
+<ButtonPlain
+  type="button"
+  role="menuitem"
+  class={cn("group flex h-9 w-full items-center px-2 text-left text-foreground", className)}
+  tabindex={-1}
+  data-slot="dropdown-item"
+  data-state={(selected ? "selected" : "default")}
+  onclick={() => onclick?.()}
+>
+  <Inline
+    class={"flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted " +
+      "group-data-[state=selected]:bg-muted"}
+    data-slot="dropdown-item-content"
+  >
+    {#if icon}
+      <Inline class="flex w-7 shrink-0 items-center pr-2" data-slot="dropdown-item-icon">
+        {@render icon?.()}
+      </Inline>
+    {/if}
+    <Inline class={cn("text-xs", "min-w-0 flex-1 truncate px-1 font-bold")} data-slot="dropdown-item-label">
+      {@render children?.()}
+    </Inline>
+    {#if right}
+      <Inline class="flex shrink-0 items-center pr-1" data-slot="dropdown-item-right">
+        {@render right?.()}
+      </Inline>
+    {/if}
+  </Inline>
+</ButtonPlain>
diff --git a/packages/svelte/ui/src/components/editor-tab.svelte b/packages/svelte/ui/src/components/editor-tab.svelte
new file mode 100644
index 0000000..79d8b14
--- /dev/null
+++ b/packages/svelte/ui/src/components/editor-tab.svelte
@@ -0,0 +1,77 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not
+  pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close
+  events.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type EditorTabProps = {
+    label: string;
+    closeLabel: string;
+    active?: boolean;
+    preview?: boolean;
+    class?: string;
+    icon?: Snippet;
+    onclick?: () => void;
+    onclose?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import { cn } from "../utils";
+
+  let {
+    label,
+    closeLabel,
+    active = false,
+    preview = false,
+    class: className,
+    icon,
+    onclick,
+    onclose,
+  }: EditorTabProps = $props();
+</script>
+
+<Box
+  class={cn(
+    "flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card " +
+      "[&_svg]:text-muted-foreground",
+    "border-r border-border",
+    className
+  )}
+  role="tab"
+  aria-selected={active}
+  tabindex={(active ? 0 : -1)}
+  data-slot="editor-tab"
+  data-state={(active ? "active" : "default")}
+  onclick={() => onclick?.()}
+>
+  <Inline class="flex h-10 items-center gap-2 px-3" data-slot="editor-tab-content">
+    {@render icon?.()}
+    <Inline
+      class={cn("text-xs text-foreground", (preview ? "font-semibold italic" : "font-bold"))}
+      data-slot="editor-tab-label"
+    >
+      {label}
+    </Inline>
+    <Button
+      variant="ghost"
+      size="sm"
+      layout="icon"
+      class={"p-0 [&>svg]:size-4"}
+      aria-label={closeLabel}
+      tabindex={-1}
+      data-slot="editor-tab-close"
+      onclick={() => onclose?.()}
+    >
+      <LucideIcon name="x" size={16} />
+    </Button>
+  </Inline>
+</Box>
diff --git a/packages/svelte/ui/src/components/empty-state.svelte b/packages/svelte/ui/src/components/empty-state.svelte
new file mode 100644
index 0000000..08ca2fc
--- /dev/null
+++ b/packages/svelte/ui/src/components/empty-state.svelte
@@ -0,0 +1,45 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- Empty list or nothing found: a round icon, a title, a hint and an optional action. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type EmptyStateProps = {
+    icon?: string;
+    title: string;
+    text?: string;
+    class?: string;
+    action?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import IconBadge from "../primitives/iconbadge/icon-badge.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn } from "../utils";
+
+  let { icon = "inbox", title, text, class: className, action }: EmptyStateProps = $props();
+</script>
+
+<Box
+  class={cn(
+    "flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border",
+    className
+  )}
+  role="status"
+>
+  <IconBadge size="lg">
+    <LucideIcon name={icon} size={20} />
+  </IconBadge>
+  <Text class="m-0 text-sm font-bold text-foreground">
+    {title}
+  </Text>
+  {#if text}
+    <Text class="m-0 max-w-80 text-xs font-medium text-muted-foreground">
+      {text}
+    </Text>
+  {/if}
+  {@render action?.()}
+</Box>
diff --git a/packages/svelte/ui/src/components/faq-cards.svelte b/packages/svelte/ui/src/components/faq-cards.svelte
new file mode 100644
index 0000000..973765a
--- /dev/null
+++ b/packages/svelte/ui/src/components/faq-cards.svelte
@@ -0,0 +1,64 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/faq-parts.ts -->
+<!--
+  The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon
+  square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+
+  export type FaqCardsProps = {
+    items: Question[];
+    labels: FaqSplitLabels;
+    cards?: "grid3" | "grid4" | "icons";
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import ArticleBlock from "../components/article-block.svelte";
+
+  let { items, labels, cards = "grid3" }: FaqCardsProps = $props();
+</script>
+
+<Box
+  class={
+    (cards as string) === "grid4" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+    : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+  }
+  data-testid="faq"
+>
+  {#each items as q (q.id)}
+    <ArticleBlock class="rounded bg-card inset-ring inset-ring-border flex flex-col gap-4 p-6" testid="faq-card">
+      {#if ((cards as string) === "icons")}
+        <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+          <LucideIcon name={q.icon} size={20} />
+        </Box>
+      {/if}
+      <Stack gap="2">
+        <Badge variant="secondary" size="sm" class="w-fit">
+          {q.category}
+        </Badge>
+        <Title as={3} size="base" weight="semibold">
+          {q.question}
+        </Title>
+        <Text size="sm" class="text-muted-foreground">
+          {q.answer}
+        </Text>
+      </Stack>
+      <Box class="mt-auto">
+        <Button variant="link" size="sm" class="gap-2 px-0 font-medium">
+          {labels.more}
+          <LucideIcon name="arrow-right" size={16} />
+        </Button>
+      </Box>
+    </ArticleBlock>
+  {/each}
+</Box>
diff --git a/packages/svelte/ui/src/components/faq-disclosures.svelte b/packages/svelte/ui/src/components/faq-disclosures.svelte
new file mode 100644
index 0000000..17145c4
--- /dev/null
+++ b/packages/svelte/ui/src/components/faq-disclosures.svelte
@@ -0,0 +1,34 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/faq-parts.ts -->
+<!-- The questions of FaqSplit as native disclosures, one open at a time. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+
+  export type FaqDisclosuresProps = {
+    items: Question[];
+    name: string;
+  };
+</script>
+
+<script lang="ts">
+  import Disclosure from "../primitives/disclosure/disclosure.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Summary from "../primitives/disclosure/summary.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { items, name }: FaqDisclosuresProps = $props();
+</script>
+
+<Stack gap="0" align="stretch" data-testid="faq">
+  {#each items as q (q.id)}
+    <Disclosure variant="item" name={name} data-testid="faq-item">
+      <Summary variant="item">
+        {q.question}
+      </Summary>
+      <Text size="sm" class="pb-4 text-muted-foreground">
+        {q.answer}
+      </Text>
+    </Disclosure>
+  {/each}
+</Stack>
diff --git a/packages/svelte/ui/src/components/faq-finder.svelte b/packages/svelte/ui/src/components/faq-finder.svelte
new file mode 100644
index 0000000..55e195b
--- /dev/null
+++ b/packages/svelte/ui/src/components/faq-finder.svelte
@@ -0,0 +1,57 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/faq-parts.ts -->
+<!--
+  The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as
+  popular links.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+  import type { FaqTab } from "../blocks/faq-list.types";
+
+  export type FaqFinderProps = {
+    items: Question[];
+    labels: FaqSplitLabels;
+    topics: FaqTab[];
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import SearchField from "../components/search-field.svelte";
+
+  let { items, labels, topics }: FaqFinderProps = $props();
+</script>
+
+<Stack gap="6" align="stretch" data-testid="faq-finder">
+  <SearchField label={labels.search} placeholder={labels.search} value={(labels.query ?? "")} />
+  <Group gap="2" class="flex-wrap">
+    {#each topics as t (t.id)}
+      <Button variant="outline" size="sm" data-testid="faq-topic" data-value={t.value}>
+        {t.title}
+      </Button>
+    {/each}
+  </Group>
+  <Stack gap="2">
+    <Text size="sm" weight="semibold">
+      {labels.popular}
+    </Text>
+    <List class="m-0 flex list-none flex-col gap-2 p-0">
+      {#each items as q, i (q.id)}
+        {#if (i < 3)}
+          <ListItem data-testid="faq-popular">
+            <MenuEntry href={q.href} class="text-sm font-medium" size="sm">
+              {q.question}
+            </MenuEntry>
+          </ListItem>
+        {/if}
+      {/each}
+    </List>
+  </Stack>
+</Stack>
diff --git a/packages/svelte/ui/src/components/faq-help.svelte b/packages/svelte/ui/src/components/faq-help.svelte
new file mode 100644
index 0000000..cac4e5c
--- /dev/null
+++ b/packages/svelte/ui/src/components/faq-help.svelte
@@ -0,0 +1,67 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/faq-parts.ts -->
+<!--
+  The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon,
+  name, one line) and a link.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+  import type { Feature } from "../blocks/feature-grid.types";
+
+  export type FaqHelpProps = {
+    labels: FaqSplitLabels;
+    channels: Feature[];
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { labels, channels, landmarkLabel }: FaqHelpProps = $props();
+</script>
+
+<Block
+  tag="aside"
+  class="rounded bg-card inset-ring inset-ring-border flex flex-col gap-6 p-6"
+  aria-label={(landmarkLabel ?? labels.asideTitle)}
+  data-testid="faq-help"
+>
+  <Stack gap="2">
+    <Text size="lg" weight="semibold">
+      {labels.asideTitle}
+    </Text>
+    <Text size="sm" class="text-muted-foreground">
+      {labels.asideText}
+    </Text>
+  </Stack>
+  <List class="m-0 flex list-none flex-col gap-4 p-0">
+    {#each channels as c (c.id)}
+      <ListItem class="flex items-start gap-4" data-testid="faq-channel">
+        <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+          <LucideIcon name={c.icon} size={20} />
+        </Box>
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {c.title}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {c.text}
+          </Text>
+        </Stack>
+      </ListItem>
+    {/each}
+  </List>
+  <Button variant="link" size="sm" class="gap-2 px-0 font-medium">
+    {labels.asideCta}
+    <LucideIcon name="arrow-right" size={16} />
+  </Button>
+</Block>
diff --git a/packages/svelte/ui/src/components/feature-cards.svelte b/packages/svelte/ui/src/components/feature-cards.svelte
new file mode 100644
index 0000000..6d733b0
--- /dev/null
+++ b/packages/svelte/ui/src/components/feature-cards.svelte
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/features.ts -->
+<!-- The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "../blocks/feature-grid.types";
+
+  export type FeatureCardsProps = {
+    features: Feature[];
+    cols?: "1-2" | "1-3" | "1-4";
+    item?: "card" | "tile" | "cell";
+  };
+</script>
+
+<script lang="ts">
+  import Card from "../primitives/card/card.svelte";
+  import CardContent from "../primitives/card/card-content.svelte";
+  import CardHeader from "../primitives/card/card-header.svelte";
+  import CardTitle from "../primitives/card/card-title.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import IconBadge from "../primitives/iconbadge/icon-badge.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let { features, cols = "1-3", item = "card" }: FeatureCardsProps = $props();
+</script>
+
+<Grid
+  cols={cols}
+  class={
+    (item as string) === "cell" ? cn("w-full gap-px overflow-hidden bg-border p-px", defaults.features.cells)
+    : "gap-6"
+  }
+  data-testid="feature-grid"
+>
+  {#each features as feature (feature.id)}
+    {#if ((item as string) === "tile")}
+      <Card variant="compact" data-testid="feature-card">
+        <Group gap="4" align="start">
+          <LucideIcon name={feature.icon} size={20} />
+          <Stack gap="2">
+            <Title as={3} size="base" weight="bold">
+              {feature.title}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {feature.text}
+            </Text>
+          </Stack>
+        </Group>
+      </Card>
+    {:else if ((item as string) === "cell")}
+      <Stack
+        gap="2"
+        align="center"
+        class="h-full gap-8 bg-background px-6 py-12 text-center"
+        data-testid="feature-card"
+      >
+        <IconBadge variant="primary" size="xl" data-testid="feature-icon">
+          <LucideIcon name={feature.icon} size={24} />
+        </IconBadge>
+        <Title as={3} size="xl" weight="semibold" class="leading-6">
+          {feature.title}
+        </Title>
+        <Text size="sm" weight="semibold" class="leading-5 text-muted-foreground">
+          {feature.text}
+        </Text>
+      </Stack>
+    {:else}
+      <Card variant="default" data-testid="feature-card">
+        <CardHeader class="flex flex-col gap-4">
+          <LucideIcon name={feature.icon} size={24} />
+          <CardTitle as={3}>
+            {feature.title}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Text size="sm" class="text-muted-foreground">
+            {feature.text}
+          </Text>
+        </CardContent>
+      </Card>
+    {/if}
+  {/each}
+</Grid>
diff --git a/packages/svelte/ui/src/components/feature-metric-cards.svelte b/packages/svelte/ui/src/components/feature-metric-cards.svelte
new file mode 100644
index 0000000..1a47f53
--- /dev/null
+++ b/packages/svelte/ui/src/components/feature-metric-cards.svelte
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/feature-split-parts.ts -->
+<!--
+  Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the
+  label.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Stat } from "../blocks/stats-band.types";
+
+  export type FeatureMetricCardsProps = {
+    stats: Stat[];
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { stats }: FeatureMetricCardsProps = $props();
+</script>
+
+<Box class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+  {#each stats as s, i (s.id)}
+    {#if (i < 4)}
+      <Group
+        gap="4"
+        align="center"
+        class="rounded bg-card inset-ring inset-ring-border p-4"
+        data-testid="feature-stat"
+      >
+        <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+          <LucideIcon name={s.icon} size={20} />
+        </Inline>
+        <Stack gap="0" class="min-w-0">
+          <Text size="lg" weight="bold">
+            {s.value}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {s.label}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {s.hint}
+          </Text>
+        </Stack>
+      </Group>
+    {/if}
+  {/each}
+</Box>
diff --git a/packages/svelte/ui/src/components/feature-pairs.svelte b/packages/svelte/ui/src/components/feature-pairs.svelte
new file mode 100644
index 0000000..e50f2b2
--- /dev/null
+++ b/packages/svelte/ui/src/components/feature-pairs.svelte
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/feature-split-parts.ts -->
+<!-- Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "../blocks/feature-grid.types";
+
+  export type FeaturePairsProps = {
+    features: Feature[];
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+
+  let { features }: FeaturePairsProps = $props();
+</script>
+
+<Box class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+  {#each features as f, i (f.id)}
+    {#if (i < 4)}
+      <Group gap="4" align="start" data-testid="feature-item">
+        <Inline class="flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground">
+          <LucideIcon name={f.icon} size={16} />
+        </Inline>
+        <Stack gap="2" class="min-w-0">
+          <Title as={3} size="sm" weight="semibold">
+            {f.title}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {f.text}
+          </Text>
+        </Stack>
+      </Group>
+    {/if}
+  {/each}
+</Box>
diff --git a/packages/svelte/ui/src/components/feature-rows.svelte b/packages/svelte/ui/src/components/feature-rows.svelte
new file mode 100644
index 0000000..738820a
--- /dev/null
+++ b/packages/svelte/ui/src/components/feature-rows.svelte
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/features.ts -->
+<!-- The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "../blocks/feature-grid.types";
+
+  export type FeatureRowsProps = {
+    features: Feature[];
+    mediaSide?: "end" | "start" | "alternate";
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { cn } from "../utils";
+
+  let { features, mediaSide = "end" }: FeatureRowsProps = $props();
+</script>
+
+<Stack gap="8" align="stretch" data-testid="feature-rows">
+  {#each features as feature (feature.id)}
+    <Grid cols="1-2" class="group items-center gap-8" data-testid="feature-card">
+      <Stack gap="2" class="min-w-0">
+        <LucideIcon name={feature.icon} size={24} />
+        <Title as={3} size="xl" weight="bold">
+          {feature.title}
+        </Title>
+        <Text size="base" class="text-muted-foreground">
+          {feature.text}
+        </Text>
+      </Stack>
+      <Box
+        class={cn(
+          "w-full min-w-0",
+          (
+            (mediaSide as string) === "start" ? "md:order-first"
+            : (mediaSide as string) === "alternate" ? "md:group-even:order-first"
+            : ""
+          )
+        )}
+      >
+        <MediaFrame alt={feature.title} ratio="4/3" />
+      </Box>
+    </Grid>
+  {/each}
+</Stack>
diff --git a/packages/svelte/ui/src/components/feature-stat-rows.svelte b/packages/svelte/ui/src/components/feature-stat-rows.svelte
new file mode 100644
index 0000000..95f892c
--- /dev/null
+++ b/packages/svelte/ui/src/components/feature-stat-rows.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/feature-split-parts.ts -->
+<!-- Two figures of FeatureSplit as cards, then three features as checked rows. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Feature } from "../blocks/feature-grid.types";
+  import type { Stat } from "../blocks/stats-band.types";
+
+  export type FeatureStatRowsProps = {
+    features: Feature[];
+    stats: Stat[];
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+
+  let { features, stats }: FeatureStatRowsProps = $props();
+</script>
+
+<Stack gap="6" align="stretch">
+  <Box class="grid grid-cols-2 gap-4">
+    {#each stats as s, i (s.id)}
+      {#if (i < 2)}
+        <Stack gap="0" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="feature-stat">
+          <Text size="2xl" weight="bold">
+            {s.value}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {s.label}
+          </Text>
+        </Stack>
+      {/if}
+    {/each}
+  </Box>
+  <Stack gap="4" align="stretch">
+    {#each features as f, i (f.id)}
+      {#if (i < 3)}
+        <Group gap="4" align="start" data-testid="feature-item">
+          <Inline class="flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground">
+            <LucideIcon name="check" size={16} />
+          </Inline>
+          <Stack gap="2" class="min-w-0">
+            <Title as={3} size="sm" weight="semibold">
+              {f.title}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {f.text}
+            </Text>
+          </Stack>
+        </Group>
+      {/if}
+    {/each}
+  </Stack>
+</Stack>
diff --git a/packages/svelte/ui/src/components/field.svelte b/packages/svelte/ui/src/components/field.svelte
new file mode 100644
index 0000000..d86566a
--- /dev/null
+++ b/packages/svelte/ui/src/components/field.svelte
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the
+  control.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type FieldProps = {
+    label: string;
+    htmlFor: string;
+    hint?: string;
+    error?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn } from "../utils";
+
+  let { label, htmlFor, hint, error, class: className, children }: FieldProps = $props();
+</script>
+
+<Box class={cn("flex min-w-0 flex-col gap-2", className)}>
+  <Label class="text-xs font-bold text-foreground" for={htmlFor}>
+    {label}
+  </Label>
+  {@render children?.()}
+  {#if error}
+    <Text class="m-0 text-xs font-semibold text-destructive" role="alert">
+      {error}
+    </Text>
+  {:else if hint}
+    <Text class="m-0 text-xs font-medium text-muted-foreground">
+      {hint}
+    </Text>
+  {/if}
+</Box>
diff --git a/packages/svelte/ui/src/components/figure-block.svelte b/packages/svelte/ui/src/components/figure-block.svelte
new file mode 100644
index 0000000..1accb92
--- /dev/null
+++ b/packages/svelte/ui/src/components/figure-block.svelte
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/landmarks.ts -->
+<!--
+  Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag
+  figure.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type FigureBlockProps = {
+    testid?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import { cn } from "../utils";
+
+  let { testid, class: className, children }: FigureBlockProps = $props();
+</script>
+
+<Block tag="figure" class={cn(className)} data-testid={testid}>
+  {@render children?.()}
+</Block>
diff --git a/packages/svelte/ui/src/components/file-tree-item.svelte b/packages/svelte/ui/src/components/file-tree-item.svelte
new file mode 100644
index 0000000..25db18c
--- /dev/null
+++ b/packages/svelte/ui/src/components/file-tree-item.svelte
@@ -0,0 +1,67 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!-- A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** FileTreeItem: the classes of each value (shadcn/cva style). */
+  export const fileTreeItemVariants = variants({
+    base: "flex h-6 w-full items-center gap-4 text-xs font-bold text-muted-foreground data-[state=selected]:bg-muted",
+    variants: {
+      kind: {
+        folder: "",
+        file: "px-8",
+      },
+    },
+    defaultVariants: { kind: "file" },
+  });
+
+  export type FileTreeItemProps = {
+    kind?: "folder" | "file";
+    label: string;
+    selected?: boolean;
+    expanded?: boolean;
+    class?: string;
+    onclick?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import ButtonPlain from "../primitives/button-plain/button-plain.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import { cn } from "../utils";
+
+  let {
+    kind = "file",
+    label,
+    selected = false,
+    expanded = false,
+    class: className,
+    onclick,
+  }: FileTreeItemProps = $props();
+</script>
+
+<ButtonPlain
+  type="button"
+  role="treeitem"
+  class={cn(fileTreeItemVariants({ kind: kind }), className)}
+  aria-selected={selected}
+  tabindex={(selected ? 0 : -1)}
+  aria-expanded={(((kind as string) === "folder") ? expanded : undefined)}
+  data-slot="file-tree-item"
+  data-kind={kind}
+  data-state={(selected ? "selected" : "default")}
+  onclick={() => onclick?.()}
+>
+  {#if ((kind as string) === "folder")}
+    <LucideIcon name={(expanded ? "chevron-down" : "chevron-right")} size={16} />
+    <LucideIcon name="folder-open" size={16} />
+  {:else}
+    <LucideIcon name="file" size={16} />
+  {/if}
+  <Inline class="whitespace-nowrap" data-slot="file-tree-label">
+    {label}
+  </Inline>
+</ButtonPlain>
diff --git a/packages/svelte/ui/src/components/file-tree.svelte b/packages/svelte/ui/src/components/file-tree.svelte
new file mode 100644
index 0000000..bd23326
--- /dev/null
+++ b/packages/svelte/ui/src/components/file-tree.svelte
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead`
+  from the utils to the keydown (vertical, no loop).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type FileTreeProps = {
+    label?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import { cn } from "../utils";
+
+  let { label, class: className, children }: FileTreeProps = $props();
+</script>
+
+<Box class={cn("flex flex-col gap-2 p-2", className)} role="tree" aria-label={label} data-slot="file-tree">
+  {@render children?.()}
+</Box>
diff --git a/packages/svelte/ui/src/components/footer-brand.svelte b/packages/svelte/ui/src/components/footer-brand.svelte
new file mode 100644
index 0000000..7af55c5
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-brand.svelte
@@ -0,0 +1,35 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The brand of FooterSplit: a mark and the brand word over the tagline. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type FooterBrandProps = {
+    brand: string;
+    tagline: string;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { brand, tagline }: FooterBrandProps = $props();
+</script>
+
+<Stack gap="2" align="start" data-testid="footer-brand">
+  <Group gap="2" align="center">
+    <Inline class="flex size-8 items-center justify-center rounded bg-foreground text-background">
+      <LucideIcon name="layers" size={16} />
+    </Inline>
+    <Text size="xl" weight="bold">
+      {brand}
+    </Text>
+  </Group>
+  <Text size="sm" class="text-muted-foreground">
+    {tagline}
+  </Text>
+</Stack>
diff --git a/packages/svelte/ui/src/components/footer-card.svelte b/packages/svelte/ui/src/components/footer-card.svelte
new file mode 100644
index 0000000..e88875c
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-card.svelte
@@ -0,0 +1,81 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer.ts -->
+<!-- The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MegaGroup } from "../blocks/mega-menu.types";
+
+  export type FooterCardProps = {
+    label: string;
+    brand: string;
+    groups: MegaGroup[];
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let { label, brand, groups, landmarkLabel }: FooterCardProps = $props();
+</script>
+
+<Block tag="footer" class="py-8" data-testid="site-footer" data-layout="card" aria-label={landmarkLabel}>
+  <Container class={cn(cn("mx-auto w-full px-4", defaults.section.landing), "px-0")} data-slot="container">
+    <Box
+      class={cn("flex w-full flex-row items-start overflow-hidden bg-muted p-10", defaults.footer.card)}
+      data-testid="footer-card"
+    >
+      <Group gap="4" align="center" class={cn("h-8 shrink-0", defaults.footer.brand)} data-testid="footer-brand">
+        <Inline class="flex size-8 items-center justify-center rounded bg-foreground text-background">
+          <LucideIcon name="hexagon" size={16} />
+        </Inline>
+        <Text size="base" weight="bold">
+          {brand}
+        </Text>
+      </Group>
+      {#if ((groups?.length ?? 0) > 0)}
+        <NavBlock
+          label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", label, landmarkLabel)) : label)}
+          class="min-w-0 flex-1"
+        >
+          <Group
+            gap="0"
+            align="start"
+            class={cn("flex w-full flex-nowrap justify-between", defaults.footer.groups)}
+            data-testid="footer-groups"
+          >
+            {#each groups as g (g.id)}
+              <Stack gap="4" data-testid="group">
+                <Text size="xs" weight="semibold" class="leading-5">
+                  {g.title}
+                </Text>
+                <List class="m-0 flex list-none flex-col gap-4 p-0">
+                  {#each g.links as item (item.id)}
+                    <ListItem>
+                      <MenuEntry href={item.href} class="text-xs leading-5 text-muted-foreground">
+                        {item.name}
+                      </MenuEntry>
+                    </ListItem>
+                  {/each}
+                </List>
+              </Stack>
+            {/each}
+          </Group>
+        </NavBlock>
+      {/if}
+    </Box>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/components/footer-channels.svelte b/packages/svelte/ui/src/components/footer-channels.svelte
new file mode 100644
index 0000000..eeb1019
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-channels.svelte
@@ -0,0 +1,46 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The channels of the community as three cards: a glyph over the name and one line. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+  export type FooterChannelsProps = {
+    extras: FooterExtras;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { extras }: FooterChannelsProps = $props();
+</script>
+
+{#if ((extras.channels?.length ?? 0) > 0)}
+  <Box class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+    {#each extras.channels as c, i (c.id)}
+      {#if (i < 3)}
+        <Stack
+          gap="2"
+          align="start"
+          class="rounded bg-card inset-ring inset-ring-border p-4"
+          data-testid="footer-channel"
+        >
+          <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+            <LucideIcon name={c.icon} size={20} />
+          </Inline>
+          <Text size="sm" weight="semibold">
+            {c.title}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {c.text}
+          </Text>
+        </Stack>
+      {/if}
+    {/each}
+  </Box>
+{/if}
diff --git a/packages/svelte/ui/src/components/footer-columns.svelte b/packages/svelte/ui/src/components/footer-columns.svelte
new file mode 100644
index 0000000..41ca0a6
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-columns.svelte
@@ -0,0 +1,48 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer.ts -->
+<!-- The link groups of SitemapFooter as columns: a group title over its links, up to five columns. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MegaGroup } from "../blocks/mega-menu.types";
+
+  export type FooterColumnsProps = {
+    label: string;
+    groups: MegaGroup[];
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+
+  let { label, groups, landmarkLabel }: FooterColumnsProps = $props();
+</script>
+
+{#if ((groups?.length ?? 0) > 0)}
+  <Block tag="nav" aria-label={(landmarkLabel ?? label)}>
+    <Grid cols="1" class="grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5" data-testid="footer-groups">
+      {#each groups as g (g.id)}
+        <Stack gap="2" data-testid="group">
+          <Text size="sm" weight="semibold">
+            {g.title}
+          </Text>
+          <List class="m-0 flex list-none flex-col gap-2 p-0">
+            {#each g.links as item (item.id)}
+              <ListItem>
+                <MenuEntry href={item.href} class="text-sm text-muted-foreground">
+                  {item.name}
+                </MenuEntry>
+              </ListItem>
+            {/each}
+          </List>
+        </Stack>
+      {/each}
+    </Grid>
+  </Block>
+{/if}
diff --git a/packages/svelte/ui/src/components/footer-contacts.svelte b/packages/svelte/ui/src/components/footer-contacts.svelte
new file mode 100644
index 0000000..c8f6d1e
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-contacts.svelte
@@ -0,0 +1,41 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+  export type FooterContactsProps = {
+    extras: FooterExtras;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { extras }: FooterContactsProps = $props();
+</script>
+
+{#if ((extras.contacts?.length ?? 0) > 0)}
+  <Stack gap="4" align="stretch">
+    {#each extras.contacts as c (c.id)}
+      <Group gap="4" align="center" data-testid="footer-contact">
+        <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+          <LucideIcon name={c.icon} size={20} />
+        </Inline>
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {c.title}
+          </Text>
+          <Text size="sm" class="text-muted-foreground">
+            {c.text}
+          </Text>
+        </Stack>
+      </Group>
+    {/each}
+  </Stack>
+{/if}
diff --git a/packages/svelte/ui/src/components/footer-figures.svelte b/packages/svelte/ui/src/components/footer-figures.svelte
new file mode 100644
index 0000000..a2d6763
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-figures.svelte
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- Three figures in a row under the brand of FooterSplit. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+  export type FooterFiguresProps = {
+    extras: FooterExtras;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { extras }: FooterFiguresProps = $props();
+</script>
+
+{#if ((extras.stats?.length ?? 0) > 0)}
+  <Group gap="8" class="flex-wrap">
+    {#each extras.stats as s, i (s.id)}
+      {#if (i < 3)}
+        <Stack gap="0" data-testid="footer-stat">
+          <Text size="xl" weight="bold">
+            {s.value}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {s.label}
+          </Text>
+        </Stack>
+      {/if}
+    {/each}
+  </Group>
+{/if}
diff --git a/packages/svelte/ui/src/components/footer-group-cards.svelte b/packages/svelte/ui/src/components/footer-group-cards.svelte
new file mode 100644
index 0000000..436c380
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-group-cards.svelte
@@ -0,0 +1,59 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!--
+  The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide
+  screens.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MegaGroup } from "../blocks/mega-menu.types";
+
+  export type FooterGroupCardsProps = {
+    label: string;
+    groups: MegaGroup[];
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+
+  let { label, groups, landmarkLabel }: FooterGroupCardsProps = $props();
+</script>
+
+{#if ((groups?.length ?? 0) > 0)}
+  <Block tag="nav" aria-label={(landmarkLabel ?? label)}>
+    <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {#each groups as g (g.id)}
+        <Stack gap="4" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="group">
+          <Group gap="2" align="center">
+            <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+              <LucideIcon name={g.icon} size={20} />
+            </Inline>
+            <Text size="sm" weight="semibold">
+              {g.title}
+            </Text>
+          </Group>
+          <List class="m-0 flex list-none flex-col gap-2 p-0">
+            {#each g.links as item (item.id)}
+              <ListItem>
+                <MenuEntry href={item.href} class="text-sm text-muted-foreground" variant="muted" size="sm">
+                  {item.name}
+                </MenuEntry>
+              </ListItem>
+            {/each}
+          </List>
+        </Stack>
+      {/each}
+    </Box>
+  </Block>
+{/if}
diff --git a/packages/svelte/ui/src/components/footer-link-columns.svelte b/packages/svelte/ui/src/components/footer-link-columns.svelte
new file mode 100644
index 0000000..da62191
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-link-columns.svelte
@@ -0,0 +1,50 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The first three link groups of FooterSplit as small columns beside each other. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MegaGroup } from "../blocks/mega-menu.types";
+
+  export type FooterLinkColumnsProps = {
+    label: string;
+    groups: MegaGroup[];
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+
+  let { label, groups, landmarkLabel }: FooterLinkColumnsProps = $props();
+</script>
+
+{#if ((groups?.length ?? 0) > 0)}
+  <Block tag="nav" aria-label={(landmarkLabel ?? label)}>
+    <Box class="grid grid-cols-2 gap-8 sm:grid-cols-3">
+      {#each groups as g, i (g.id)}
+        {#if (i < 3)}
+          <Stack gap="2" data-testid="group">
+            <Text size="sm" weight="semibold">
+              {g.title}
+            </Text>
+            <List class="m-0 flex list-none flex-col gap-2 p-0">
+              {#each g.links as item (item.id)}
+                <ListItem>
+                  <MenuEntry href={item.href} class="text-sm text-muted-foreground" variant="muted" size="sm">
+                    {item.name}
+                  </MenuEntry>
+                </ListItem>
+              {/each}
+            </List>
+          </Stack>
+        {/if}
+      {/each}
+    </Box>
+  </Block>
+{/if}
diff --git a/packages/svelte/ui/src/components/footer-points.svelte b/packages/svelte/ui/src/components/footer-points.svelte
new file mode 100644
index 0000000..a2e30f4
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-points.svelte
@@ -0,0 +1,39 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- Four points with their glyphs in a column, under the tagline of FooterSplit. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+  export type FooterPointsProps = {
+    extras: FooterExtras;
+    title: string;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { extras, title }: FooterPointsProps = $props();
+</script>
+
+{#if ((extras.points?.length ?? 0) > 0)}
+  <Stack gap="4" align="start">
+    <Text size="sm" weight="semibold">
+      {title}
+    </Text>
+    {#each extras.points as p, i (p.id)}
+      {#if (i < 4)}
+        <Group gap="2" align="center" data-testid="footer-point">
+          <LucideIcon name={p.icon} size={16} />
+          <Text size="sm">
+            {p.title}
+          </Text>
+        </Group>
+      {/if}
+    {/each}
+  </Stack>
+{/if}
diff --git a/packages/svelte/ui/src/components/footer-signup-card.svelte b/packages/svelte/ui/src/components/footer-signup-card.svelte
new file mode 100644
index 0000000..c2adb22
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-signup-card.svelte
@@ -0,0 +1,49 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+  export type FooterSignupCardProps = {
+    id: string;
+    labels: FooterSplitLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Form from "../primitives/form/form.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn, tpl } from "../utils";
+
+  let { id, labels }: FooterSignupCardProps = $props();
+</script>
+
+<Stack gap="4" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="signup">
+  <Group gap="2" align="center">
+    <LucideIcon name="mail" size={16} />
+    <Text size="sm" weight="semibold">
+      {labels.signup}
+    </Text>
+  </Group>
+  <Form method="dialog" class={cn("w-full max-w-md", (false ? "mx-auto" : ""))} data-testid="email-form">
+    <Label for={tpl("{0}-email", id)} class="sr-only">
+      {labels.email}
+    </Label>
+    <Group gap="2" align="start" class="w-full flex-wrap">
+      <Input type="email" name="email" class="min-w-0 flex-1" id={tpl("{0}-email", id)} data-testid="field" />
+      <Button variant="default" size="default" type="submit" data-testid="submit">
+        {labels.subscribe}
+      </Button>
+    </Group>
+  </Form>
+  <Text size="xs" class="text-muted-foreground">
+    {labels.note}
+  </Text>
+</Stack>
diff --git a/packages/svelte/ui/src/components/footer-sitemap.svelte b/packages/svelte/ui/src/components/footer-sitemap.svelte
new file mode 100644
index 0000000..e46054e
--- /dev/null
+++ b/packages/svelte/ui/src/components/footer-sitemap.svelte
@@ -0,0 +1,28 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!--
+  The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no
+  link).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type FooterSitemapProps = {
+    href?: string;
+    label: string;
+  };
+</script>
+
+<script lang="ts">
+  import Link from "../primitives/link/link.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+
+  let { href, label }: FooterSitemapProps = $props();
+</script>
+
+{#if href}
+  <Link href={href} size="sm" data-testid="footer-sitemap">
+    <LucideIcon name="arrow-right" size={16} />
+    {label}
+  </Link>
+{/if}
diff --git a/packages/svelte/ui/src/components/hero-badge.svelte b/packages/svelte/ui/src/components/hero-badge.svelte
new file mode 100644
index 0000000..d21b885
--- /dev/null
+++ b/packages/svelte/ui/src/components/hero-badge.svelte
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!-- A composite badge on a dark band: an optional small mark beside a label. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type HeroBadgeProps = {
+    label: string;
+    mark?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let { label, mark }: HeroBadgeProps = $props();
+</script>
+
+<Group
+  gap="2"
+  align="center"
+  class={cn(
+    "h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30",
+    defaults.hero.badge
+  )}
+  data-testid="section-badge"
+>
+  {#if mark}
+    <Badge variant="secondary" size="sm" data-testid="badge-mark">
+      {mark}
+    </Badge>
+  {/if}
+  <Text size="xs" weight="bold" class="leading-5 text-background">
+    {label}
+  </Text>
+</Group>
diff --git a/packages/svelte/ui/src/components/hero-head.svelte b/packages/svelte/ui/src/components/hero-head.svelte
new file mode 100644
index 0000000..b619879
--- /dev/null
+++ b/packages/svelte/ui/src/components/hero-head.svelte
@@ -0,0 +1,120 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!--
+  The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a
+  call to action.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { NavLink } from "../blocks/nav-bar.types";
+
+  export type HeroHeadProps = {
+    brand?: string;
+    brandHref?: string;
+    links?: NavLink[];
+    current?: string;
+    login?: string;
+    loginHref?: string;
+    cta?: string;
+    href?: string;
+    skip?: string;
+    navLabel?: string;
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import LinkPlain from "../primitives/link-plain/link-plain.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let {
+    brand,
+    brandHref,
+    links,
+    current = "",
+    login,
+    loginHref,
+    cta,
+    href,
+    skip,
+    navLabel,
+    landmarkLabel,
+  }: HeroHeadProps = $props();
+</script>
+
+<Block
+  tag="header"
+  class={cn("flex w-full flex-wrap items-center justify-between pr-4", defaults.hero.head)}
+  data-testid="hero-head"
+  aria-label={landmarkLabel}
+>
+  {#if skip}
+    <LinkPlain
+      href="#main-content"
+      class={"sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background " +
+        "focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border"}
+      data-testid="skip-link"
+    >
+      {skip}
+    </LinkPlain>
+  {/if}
+  <MenuEntry
+    href={brandHref}
+    class={cn(defaults.text.small, "font-medium leading-6 text-background")}
+    testid="brand"
+  >
+    {brand}
+  </MenuEntry>
+  {#if (links && ((links?.length ?? 0) > 0))}
+    <NavBlock
+      label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", navLabel, landmarkLabel)) : navLabel)}
+      testid="site-nav"
+    >
+      <Group gap="8" align="center" class="flex-wrap">
+        {#each links as l (l.id)}
+          {#if l.href}
+            <Link
+              href={l.href}
+              variant="default"
+              aria-current={((l.id === current) ? "page" : undefined)}
+              class="text-xs font-medium leading-5 text-background"
+              data-testid="nav-link"
+            >
+              {l.name}
+            </Link>
+          {:else}
+            <Inline class="text-xs font-medium leading-5 text-background" data-testid="nav-link">
+              {l.name}
+            </Inline>
+          {/if}
+        {/each}
+      </Group>
+    </NavBlock>
+  {/if}
+  <Group gap="2" align="center">
+    {#if login}
+      <Button
+        href={loginHref}
+        variant="ghost"
+        size="sm"
+        class="text-background hover:bg-background/10"
+        data-testid="nav-login"
+      >
+        {login}
+      </Button>
+    {/if}
+    {#if cta}
+      <Button href={href} variant="secondary" size="sm" data-testid="header-cta">
+        {cta}
+      </Button>
+    {/if}
+  </Group>
+</Block>
diff --git a/packages/svelte/ui/src/components/hero-split-extras.svelte b/packages/svelte/ui/src/components/hero-split-extras.svelte
new file mode 100644
index 0000000..0700a5a
--- /dev/null
+++ b/packages/svelte/ui/src/components/hero-split-extras.svelte
@@ -0,0 +1,117 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-split-parts.ts -->
+<!--
+  What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small
+  feature cards, or a quote with its author over three figures.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HeroContent } from "../blocks/hero-split.types";
+
+  export type HeroSplitExtrasProps = {
+    content: HeroContent;
+    extra?: "stats" | "avatars" | "minis" | "quote" | "none";
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import FigureBlock from "../components/figure-block.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+
+  let { content, extra = "none" }: HeroSplitExtrasProps = $props();
+</script>
+
+{#if (((extra as string) === "stats") && ((content.stats?.length ?? 0) > 0))}
+  <Box class="grid grid-cols-3 gap-4" data-testid="hero-stats">
+    {#each content.stats as s, i (s.id)}
+      {#if (i < 3)}
+        <Stack gap="0" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="hero-stat">
+          <Text size="2xl" weight="semibold">
+            {s.value}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {s.label}
+          </Text>
+        </Stack>
+      {/if}
+    {/each}
+  </Box>
+{/if}
+{#if (((extra as string) === "avatars") && ((content.people?.length ?? 0) > 0))}
+  <Group gap="4" align="center" class="flex-wrap" data-testid="hero-proof">
+    <Group gap="2" align="center">
+      {#each content.people as p, i (p.id)}
+        {#if (i < 4)}
+          <MediaFrame alt={p.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+        {/if}
+      {/each}
+    </Group>
+    <Text size="sm" class="text-muted-foreground">
+      {content.proof}
+    </Text>
+  </Group>
+{/if}
+{#if (((extra as string) === "minis") && ((content.features?.length ?? 0) > 0))}
+  <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2" data-testid="hero-minis">
+    {#each content.features as f, i (f.id)}
+      {#if (i < 2)}
+        <Group gap="4" align="start" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="hero-mini">
+          <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+            <LucideIcon name={f.icon} size={20} />
+          </Box>
+          <Stack gap="0">
+            <Text size="sm" weight="semibold">
+              {f.title}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {f.text}
+            </Text>
+          </Stack>
+        </Group>
+      {/if}
+    {/each}
+  </Box>
+{/if}
+{#if (((extra as string) === "quote") && ((content.people?.length ?? 0) > 0))}
+  <Stack gap="6" align="stretch">
+    {#each content.people as p, i (p.id)}
+      {#if (i < 1)}
+        <FigureBlock class="flex flex-col gap-4" testid="hero-quote">
+          <Text tag="blockquote" class="text-lg font-medium">
+            {p.quote}
+          </Text>
+          <Group gap="4" align="center">
+            <MediaFrame alt={p.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {p.author}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {p.role}
+              </Text>
+            </Stack>
+          </Group>
+        </FigureBlock>
+      {/if}
+    {/each}
+    <Box class="grid grid-cols-3 gap-4" data-testid="hero-stats">
+      {#each content.stats as s, i (s.id)}
+        {#if (i < 3)}
+          <Stack gap="0" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="hero-stat">
+            <Text size="2xl" weight="semibold">
+              {s.value}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {s.label}
+            </Text>
+          </Stack>
+        {/if}
+      {/each}
+    </Box>
+  </Stack>
+{/if}
diff --git a/packages/svelte/ui/src/components/hero-split-media.svelte b/packages/svelte/ui/src/components/hero-split-media.svelte
new file mode 100644
index 0000000..5af0137
--- /dev/null
+++ b/packages/svelte/ui/src/components/hero-split-media.svelte
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-split-parts.ts -->
+<!--
+  What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with
+  captions, or a picture with two plan cards floating over it.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HeroContent } from "../blocks/hero-split.types";
+
+  export type HeroSplitMediaProps = {
+    content: HeroContent;
+    alt: string;
+    media?: "picture" | "card" | "grid" | "plans";
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import FigureBlock from "../components/figure-block.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import OfferMedia from "../components/offer-media.svelte";
+  import { cn } from "../utils";
+
+  let { content, alt, media = "picture" }: HeroSplitMediaProps = $props();
+</script>
+
+{#if ((media as string) === "picture")}
+  <MediaFrame alt={alt} ratio="4/3" />
+{/if}
+{#if ((media as string) === "card")}
+  <OfferMedia alt={alt} card={content.card} />
+{/if}
+{#if (((media as string) === "grid") && ((content.features?.length ?? 0) > 0))}
+  <Box class="grid grid-cols-2 gap-4" data-testid="hero-grid">
+    {#each content.features as f, i (f.id)}
+      {#if (i < 4)}
+        <FigureBlock class="flex flex-col gap-2" testid="hero-tile">
+          <MediaFrame alt={f.title} ratio="1/1" />
+          <Text size="xs" class="text-muted-foreground">
+            {f.title}
+          </Text>
+        </FigureBlock>
+      {/if}
+    {/each}
+  </Box>
+{/if}
+{#if (((media as string) === "plans") && ((content.plans?.length ?? 0) > 0))}
+  <Box class="relative" data-testid="hero-media">
+    <MediaFrame alt={alt} ratio="4/3" />
+    {#each content.plans as p, i (p.id)}
+      {#if (i < 2)}
+        <Stack
+          gap="2"
+          class={cn(
+            "absolute w-48 rounded bg-card p-4 shadow-lg",
+            ((i === 0) ? "top-8 left-4" : "right-4 bottom-8")
+          )}
+          data-testid="hero-plan"
+        >
+          <Text size="sm" weight="semibold">
+            {p.name}
+          </Text>
+          <Group gap="2" align="center">
+            <LucideIcon name="check" size={16} />
+            <Text size="xs" class="text-muted-foreground">
+              {p.tagline}
+            </Text>
+          </Group>
+        </Stack>
+      {/if}
+    {/each}
+  </Box>
+{/if}
diff --git a/packages/svelte/ui/src/components/icon-tab.svelte b/packages/svelte/ui/src/components/icon-tab.svelte
new file mode 100644
index 0000000..cb5dcb5
--- /dev/null
+++ b/packages/svelte/ui/src/components/icon-tab.svelte
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key
+  movement between tabs is the job of IconTabs (see roving).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** IconTab: the classes of each value (shadcn/cva style). */
+  export const iconTabVariants = variants({
+    base:
+      "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground inset-ring " +
+      "inset-ring-transparent [&>svg]:size-4 rounded",
+    variants: {
+      state: {
+        default: "",
+        active: "bg-card text-foreground inset-ring-border",
+      },
+    },
+    defaultVariants: { state: "default" },
+  });
+
+  export type IconTabProps = {
+    active?: boolean;
+    label: string;
+    class?: string;
+    children?: Snippet;
+    onclick?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import ButtonPlain from "../primitives/button-plain/button-plain.svelte";
+  import { cn } from "../utils";
+
+  let { active = false, label, class: className, children, onclick }: IconTabProps = $props();
+</script>
+
+<ButtonPlain
+  type="button"
+  role="tab"
+  aria-label={label}
+  class={cn(iconTabVariants({ state: (active ? "active" : "default") }), className)}
+  aria-selected={active}
+  tabindex={(active ? 0 : -1)}
+  data-slot="icon-tab"
+  data-state={(active ? "active" : "default")}
+  onclick={() => onclick?.()}
+>
+  {@render children?.()}
+</ButtonPlain>
diff --git a/packages/svelte/ui/src/components/icon-tabs.svelte b/packages/svelte/ui/src/components/icon-tabs.svelte
new file mode 100644
index 0000000..9c67b23
--- /dev/null
+++ b/packages/svelte/ui/src/components/icon-tabs.svelte
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach
+  `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type IconTabsProps = {
+    label?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import { cn } from "../utils";
+
+  let { label, class: className, children }: IconTabsProps = $props();
+</script>
+
+<Box class={cn("flex items-center gap-2", className)} role="tablist" aria-label={label} data-slot="icon-tabs">
+  {@render children?.()}
+</Box>
diff --git a/packages/svelte/ui/src/components/job-cards.svelte b/packages/svelte/ui/src/components/job-cards.svelte
new file mode 100644
index 0000000..74c88f9
--- /dev/null
+++ b/packages/svelte/ui/src/components/job-cards.svelte
@@ -0,0 +1,149 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/people-parts.ts -->
+<!--
+  The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply)
+  or as a table.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Job, Department, JobLabels } from "../blocks/job-board.types";
+
+  export type JobCardsProps = {
+    jobs: Job[];
+    departments: Department[];
+    labels: JobLabels;
+    layout?: "grid" | "grouped" | "table";
+    salary?: "show" | "hide";
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Table from "../primitives/table/table.svelte";
+  import TableBody from "../primitives/table/table-body.svelte";
+  import TableCaption from "../primitives/table/table-caption.svelte";
+  import TableCell from "../primitives/table/table-cell.svelte";
+  import TableHead from "../primitives/table/table-head.svelte";
+  import TableHeadCell from "../primitives/table/table-head-cell.svelte";
+  import TableRow from "../primitives/table/table-row.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+
+  let { jobs, departments, labels, layout = "grid", salary = "hide" }: JobCardsProps = $props();
+</script>
+
+{#if ((layout as string) === "table")}
+  <Box class="w-full overflow-x-auto rounded inset-ring inset-ring-border">
+    <Table class="w-full text-left text-sm" data-testid="job-table">
+      <TableCaption class="sr-only">
+        {labels.caption}
+      </TableCaption>
+      <TableHead class="bg-muted">
+        <TableRow>
+          <TableHeadCell scope="col" class="px-4 py-2">
+            {labels.role}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="hidden py-2 md:table-cell">
+            {labels.team}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="hidden py-2 sm:table-cell">
+            {labels.location}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {labels.type}
+          </TableHeadCell>
+          {#if ((salary as string) === "show")}
+            <TableHeadCell scope="col" class="hidden py-2 md:table-cell">
+              {labels.salary}
+            </TableHeadCell>
+          {/if}
+          <TableHeadCell scope="col" class="py-2 pr-4">
+            <Inline class="sr-only">
+              {labels.apply}
+            </Inline>
+          </TableHeadCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each jobs as j (j.id)}
+          <TableRow class="border-t border-border" data-testid="item">
+            <TableCell class="px-4 py-4 font-medium">
+              {j.title}
+            </TableCell>
+            <TableCell class="hidden md:table-cell">
+              {departments.filter((i) => !j.dept || i["id"] === j.dept)[0]?.name ?? ""}
+            </TableCell>
+            <TableCell class="hidden sm:table-cell">
+              {j.location}
+            </TableCell>
+            <TableCell>
+              {j.type}
+            </TableCell>
+            {#if ((salary as string) === "show")}
+              <TableCell class="hidden md:table-cell">
+                {j.salary}
+              </TableCell>
+            {/if}
+            <TableCell class="pr-4 text-right">
+              <MenuEntry href={j.href} class="font-medium">
+                {labels.apply}
+              </MenuEntry>
+            </TableCell>
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  </Box>
+{:else}
+  <Grid cols="1-2" class="gap-4" data-testid="items">
+    {#each jobs as j (j.id)}
+      <Stack gap="4" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="item">
+        <Stack gap="2">
+          <Text size="lg" weight="semibold">
+            {j.title}
+          </Text>
+          <Group gap="4" class="flex-wrap text-sm text-muted-foreground">
+            <Group gap="2" align="center">
+              <LucideIcon name="briefcase" size={16} />
+              <Inline>
+                {j.type}
+              </Inline>
+            </Group>
+            <Group gap="2" align="center">
+              <LucideIcon name="map-pin" size={16} />
+              <Inline>
+                {j.location}
+              </Inline>
+            </Group>
+            <Group gap="2" align="center">
+              <LucideIcon name="calendar" size={16} />
+              <Inline>
+                {j.posted}
+              </Inline>
+            </Group>
+          </Group>
+        </Stack>
+        {#if ((salary as string) === "show")}
+          <Text size="base" weight="semibold" data-testid="salary">
+            {j.salary}
+          </Text>
+        {/if}
+        <Group gap="4" align="center" justify="between" class="mt-auto">
+          <Badge variant="secondary" size="default">
+            {departments.filter((i) => !j.dept || i["id"] === j.dept)[0]?.name ?? ""}
+          </Badge>
+          <MenuEntry href={j.href} class="inline-flex items-center gap-2 text-sm font-medium">
+            {labels.apply}
+            <LucideIcon name="arrow-right" size={16} />
+          </MenuEntry>
+        </Group>
+      </Stack>
+    {/each}
+  </Grid>
+{/if}
diff --git a/packages/svelte/ui/src/components/logo-sidebar.svelte b/packages/svelte/ui/src/components/logo-sidebar.svelte
new file mode 100644
index 0000000..081a6ed
--- /dev/null
+++ b/packages/svelte/ui/src/components/logo-sidebar.svelte
@@ -0,0 +1,59 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The
+  variant picks the padding (recipe).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** LogoSidebar: the classes of each value (shadcn/cva style). */
+  export const logoSidebarVariants = variants({
+    base: "flex h-8 items-center justify-between",
+    variants: {
+      variant: {
+        chat: "px-2",
+        creator: "pr-4",
+      },
+    },
+    defaultVariants: { variant: "chat" },
+  });
+
+  export type LogoSidebarProps = {
+    variant?: "chat" | "creator";
+    name: string;
+    class?: string;
+    mark?: Snippet;
+    actions?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import { cn } from "../utils";
+
+  let { variant = "chat", name, class: className, mark, actions }: LogoSidebarProps = $props();
+</script>
+
+<Box
+  class={cn(
+    logoSidebarVariants({ variant: variant }),
+    "in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0",
+    className
+  )}
+  data-slot="logo-sidebar"
+>
+  <Inline class="flex items-center gap-4" data-slot="logo-sidebar-brand">
+    {@render mark?.()}
+    <Inline class="text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden" data-slot="logo-sidebar-name">
+      {name}
+    </Inline>
+  </Inline>
+  {#if actions}
+    <Inline class="flex items-center gap-2 in-data-[nav=collapsed]:hidden" data-slot="logo-sidebar-actions">
+      {@render actions?.()}
+    </Inline>
+  {/if}
+</Box>
diff --git a/packages/svelte/ui/src/components/logo-slot.svelte b/packages/svelte/ui/src/components/logo-slot.svelte
new file mode 100644
index 0000000..55d317b
--- /dev/null
+++ b/packages/svelte/ui/src/components/logo-slot.svelte
@@ -0,0 +1,32 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/marketing.ts -->
+<!-- One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type LogoSlotProps = {
+    name: string;
+    icon: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let { name, icon }: LogoSlotProps = $props();
+</script>
+
+<Box
+  class={cn("flex shrink-0 items-center justify-center text-muted-foreground", defaults.logos.slot)}
+  data-testid="item"
+  data-slot="logo-slot"
+>
+  <LucideIcon name={icon} size={defaults.logos.glyph} />
+  <Text size="sm" weight="semibold" class="sr-only">
+    {name}
+  </Text>
+</Box>
diff --git a/packages/svelte/ui/src/components/media-contacts.svelte b/packages/svelte/ui/src/components/media-contacts.svelte
new file mode 100644
index 0000000..c85b2de
--- /dev/null
+++ b/packages/svelte/ui/src/components/media-contacts.svelte
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+  export type MediaContactsProps = {
+    extras: MediaExtras;
+    labels: MediaListLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { extras, labels }: MediaContactsProps = $props();
+</script>
+
+<Stack gap="6" align="stretch">
+  <Stack gap="2" align="stretch">
+    <Text size="sm" weight="semibold">
+      {labels.list}
+    </Text>
+    {#each extras.channels as c, i (c.id)}
+      <Button variant="outline" size="default" href={c.href} class="w-full gap-2" data-testid="media-channel">
+        <LucideIcon name={c.icon} size={16} />
+        {c.title}
+      </Button>
+    {/each}
+  </Stack>
+  <Stack gap="2" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-4">
+    <Text size="sm" weight="semibold">
+      {labels.figures}
+    </Text>
+    {#each extras.stats as s, i (s.id)}
+      {#if (i < 3)}
+        <Group gap="4" align="center" justify="between" data-testid="media-stat">
+          <Text size="sm" class="text-muted-foreground">
+            {s.label}
+          </Text>
+          <Text size="sm" weight="semibold">
+            {s.value}
+          </Text>
+        </Group>
+      {/if}
+    {/each}
+  </Stack>
+</Stack>
diff --git a/packages/svelte/ui/src/components/media-figures.svelte b/packages/svelte/ui/src/components/media-figures.svelte
new file mode 100644
index 0000000..6702c18
--- /dev/null
+++ b/packages/svelte/ui/src/components/media-figures.svelte
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The figures of MediaList: four in two columns, centered, or three in a row. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+  export type MediaFiguresProps = {
+    extras: MediaExtras;
+    mode?: "grid" | "row";
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { extras, mode = "grid" }: MediaFiguresProps = $props();
+</script>
+
+<Box
+  class={
+    (mode as string) === "grid" ? "grid grid-cols-2 gap-6 text-center"
+    : "grid grid-cols-3 gap-6"
+  }
+>
+  {#each extras.stats as s, i (s.id)}
+    {#if (i < (((mode as string) === "grid") ? 4 : 3))}
+      <Stack gap="0" align={(((mode as string) === "grid") ? "center" : "start")} data-testid="media-stat">
+        <Text size="3xl" weight="bold">
+          {s.value}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {s.label}
+        </Text>
+      </Stack>
+    {/if}
+  {/each}
+</Box>
diff --git a/packages/svelte/ui/src/components/media-frame.assets.ts b/packages/svelte/ui/src/components/media-frame.assets.ts
new file mode 100644
index 0000000..fe14339
--- /dev/null
+++ b/packages/svelte/ui/src/components/media-frame.assets.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+// Data of MediaFrame: long values (pictures as data URIs) kept out of the component file.
+
+export const PLACEHOLDER: Record<string, string> = {
+  "light": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNlMmU4ZjAiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjOTRhM2I4IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+  "dark": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxZTI5M2IiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjNDc1NTY5IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+};
diff --git a/packages/svelte/ui/src/components/media-frame.svelte b/packages/svelte/ui/src/components/media-frame.svelte
new file mode 100644
index 0000000..77100f6
--- /dev/null
+++ b/packages/svelte/ui/src/components/media-frame.svelte
@@ -0,0 +1,66 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one
+  of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral
+  placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the
+  placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the
+  corners are the plain theme radius.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** MediaFrame: the classes of each value (shadcn/cva style). */
+  export const mediaFrameVariants = variants({
+    base: "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border rounded",
+    variants: {
+      ratio: {
+        "16/9": "aspect-video",
+        "4/3": "aspect-4/3",
+        "1/1": "aspect-square",
+        "3/4": "aspect-3/4",
+        "21/9": "aspect-21/9",
+      },
+    },
+    defaultVariants: { ratio: "16/9" },
+  });
+
+  export type MediaFrameProps = {
+    alt: string;
+    src?: string;
+    darkSrc?: string;
+    ratio?: "16/9" | "4/3" | "1/1" | "3/4" | "21/9";
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Image from "../primitives/image/image.svelte";
+  import { at, cn } from "../utils";
+  import { PLACEHOLDER } from "./media-frame.assets";
+
+  let { alt, src, darkSrc, ratio = "16/9", class: className }: MediaFrameProps = $props();
+  const lightSrc = $derived(src ?? at(PLACEHOLDER, "light"));
+  const nightSrc = $derived(darkSrc ?? src ?? at(PLACEHOLDER, "dark"));
+</script>
+
+<Box
+  class={cn(mediaFrameVariants({ ratio: ratio }), className)}
+  data-slot="media-frame"
+  data-placeholder={(src ? "false" : "true")}
+>
+  <Image
+    src={lightSrc}
+    alt={alt}
+    class="absolute inset-0 size-full object-cover dark:hidden"
+    data-theme-src="light"
+  />
+  <Image
+    src={nightSrc}
+    alt={alt}
+    class="absolute inset-0 hidden size-full object-cover dark:block"
+    data-theme-src="dark"
+  />
+</Box>
diff --git a/packages/svelte/ui/src/components/media-posts.svelte b/packages/svelte/ui/src/components/media-posts.svelte
new file mode 100644
index 0000000..a256d36
--- /dev/null
+++ b/packages/svelte/ui/src/components/media-posts.svelte
@@ -0,0 +1,44 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The latest posts of MediaList as rows: a dot, the title, the date and reading time. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+  export type MediaPostsProps = {
+    extras: MediaExtras;
+    labels: MediaListLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import { tpl } from "../utils";
+
+  let { extras, labels }: MediaPostsProps = $props();
+</script>
+
+<Stack gap="4" align="stretch">
+  <Text size="sm" weight="semibold">
+    {labels.list}
+  </Text>
+  {#each extras.posts as p, i (p.id)}
+    {#if (i < 3)}
+      <Group gap="4" align="start" data-testid="media-post">
+        <Inline class="mt-2 size-2 shrink-0 rounded-full bg-primary" />
+        <Stack gap="0">
+          <MenuEntry href={p.href} class="text-sm font-medium" size="sm">
+            {p.title}
+          </MenuEntry>
+          <Text size="xs" class="text-muted-foreground">
+            {tpl("{0} · {1}", p.date, tpl(labels.minutes, p.minutes))}
+          </Text>
+        </Stack>
+      </Group>
+    {/if}
+  {/each}
+</Stack>
diff --git a/packages/svelte/ui/src/components/media-review.svelte b/packages/svelte/ui/src/components/media-review.svelte
new file mode 100644
index 0000000..d385e73
--- /dev/null
+++ b/packages/svelte/ui/src/components/media-review.svelte
@@ -0,0 +1,41 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+  export type MediaReviewProps = {
+    extras: MediaExtras;
+    labels: MediaListLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Rating from "../components/rating.svelte";
+  import { tpl } from "../utils";
+
+  let { extras, labels }: MediaReviewProps = $props();
+</script>
+
+{#each extras.reviews as r, i (r.id)}
+  {#if (i < 1)}
+    <Stack gap="4" align="stretch" class="rounded bg-muted p-6" data-testid="media-review">
+      <Group gap="4" align="center" justify="between" class="flex-wrap">
+        <Text size="sm" weight="medium">
+          {labels.featured}
+        </Text>
+        <Rating value={r.rating} label={tpl(labels.rating, r.rating)} />
+      </Group>
+      <Text size="base">
+        {tpl("“{0}”", r.text)}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {tpl("{0} · {1}", r.author, r.date)}
+      </Text>
+    </Stack>
+  {/if}
+{/each}
diff --git a/packages/svelte/ui/src/components/media-steps.svelte b/packages/svelte/ui/src/components/media-steps.svelte
new file mode 100644
index 0000000..7a78169
--- /dev/null
+++ b/packages/svelte/ui/src/components/media-steps.svelte
@@ -0,0 +1,47 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The steps of MediaList as numbered rows: the number, a glyph, the title and the text. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+  export type MediaStepsProps = {
+    extras: MediaExtras;
+    labels: MediaListLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { tpl } from "../utils";
+
+  let { extras, labels }: MediaStepsProps = $props();
+</script>
+
+<Stack gap="4" align="stretch">
+  <Text size="sm" weight="semibold">
+    {labels.list}
+  </Text>
+  {#each extras.steps as s, i (s.id)}
+    <Group gap="4" align="start" data-testid="media-step">
+      <Text size="sm" weight="semibold" class="w-6 shrink-0 text-primary">
+        {tpl("0{0}", ((i + 1) == null ? undefined : String((i + 1))))}
+      </Text>
+      <Inline class="flex size-6 shrink-0 items-center justify-center text-primary">
+        <LucideIcon name={s.icon} size={16} />
+      </Inline>
+      <Stack gap="0">
+        <Text size="sm" weight="semibold">
+          {s.title}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {s.text}
+        </Text>
+      </Stack>
+    </Group>
+  {/each}
+</Stack>
diff --git a/packages/svelte/ui/src/components/media-topics.svelte b/packages/svelte/ui/src/components/media-topics.svelte
new file mode 100644
index 0000000..cbdea30
--- /dev/null
+++ b/packages/svelte/ui/src/components/media-topics.svelte
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+  export type MediaTopicsProps = {
+    extras: MediaExtras;
+    labels: MediaListLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import { tpl } from "../utils";
+
+  let { extras, labels }: MediaTopicsProps = $props();
+</script>
+
+<Stack gap="4" align="stretch">
+  <Text size="sm" weight="semibold">
+    {labels.list}
+  </Text>
+  {#each extras.topics as c, i (c.id)}
+    {#if (i < 5)}
+      <MenuEntry
+        href={c.href}
+        class="rounded bg-card inset-ring inset-ring-border flex w-full items-center gap-4 p-4"
+        variant="block"
+        testid="media-topic"
+        block={true}
+      >
+        <Inline class="flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground">
+          <LucideIcon name={c.icon} size={16} />
+        </Inline>
+        <Stack gap="0" class="min-w-0 flex-1">
+          <Text size="sm" weight="semibold">
+            {c.name}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {tpl(labels.count, c.count)}
+          </Text>
+        </Stack>
+        <LucideIcon name="arrow-right" size={16} />
+      </MenuEntry>
+    {/if}
+  {/each}
+</Stack>
diff --git a/packages/svelte/ui/src/components/member-row.svelte b/packages/svelte/ui/src/components/member-row.svelte
new file mode 100644
index 0000000..07d0690
--- /dev/null
+++ b/packages/svelte/ui/src/components/member-row.svelte
@@ -0,0 +1,81 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/people-parts.ts -->
+<!--
+  One member of TeamGrid beside a small portrait: the name, the role, then the department and the place
+  (detailed, directory), the bio (detailed) and the skills (detailed, list).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Member } from "../blocks/team-grid.types";
+
+  export type MemberRowProps = {
+    member: Member;
+    depts: Record<string, string>;
+    layout?: "cards" | "minimal" | "detailed" | "list" | "directory";
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { at, cn } from "../utils";
+
+  let { member, depts, layout = "list" }: MemberRowProps = $props();
+</script>
+
+<Group
+  gap="4"
+  align="start"
+  class={
+    (layout as string) === "detailed" ? "rounded bg-card inset-ring inset-ring-border flex-col p-6"
+    : (layout as string) === "directory" ? "rounded bg-card inset-ring inset-ring-border p-4"
+    : "border-b border-border pb-4"
+  }
+  data-testid="item"
+>
+  <MediaFrame
+    alt={member.name}
+    ratio="1/1"
+    class={cn((((layout as string) === "detailed") ? "size-16" : "size-12"), "shrink-0")}
+  />
+  <Stack gap="2" class="min-w-0 flex-1">
+    <Stack gap="0">
+      <Text size="base" weight="semibold">
+        {member.name}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {member.role}
+      </Text>
+    </Stack>
+    {#if ((layout as string) !== "list")}
+      <Group gap="2" align="center" class="flex-wrap text-xs text-muted-foreground">
+        <Badge variant="outline" size="sm">
+          {at(depts, member.dept)}
+        </Badge>
+        <LucideIcon name="map-pin" size={16} />
+        <Inline>
+          {member.location}
+        </Inline>
+      </Group>
+    {/if}
+    {#if ((layout as string) === "detailed")}
+      <Text size="sm" class="text-muted-foreground">
+        {member.bio}
+      </Text>
+    {/if}
+    {#if ((layout as string) !== "directory")}
+      <Group gap="2" class="flex-wrap">
+        {#each member.skills as k (k)}
+          <Badge variant="secondary" size="sm">
+            {k}
+          </Badge>
+        {/each}
+      </Group>
+    {/if}
+  </Stack>
+</Group>
diff --git a/packages/svelte/ui/src/components/menu-entry.svelte b/packages/svelte/ui/src/components/menu-entry.svelte
new file mode 100644
index 0000000..6db1637
--- /dev/null
+++ b/packages/svelte/ui/src/components/menu-entry.svelte
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!--
+  One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine
+  routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type MenuEntryProps = {
+    href?: string;
+    current?: boolean;
+    variant?: "default" | "muted" | "block";
+    size?: "default" | "sm";
+    testid?: string;
+    block?: boolean;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Link from "../primitives/link/link.svelte";
+
+  let {
+    href,
+    current = false,
+    variant = "default",
+    size = "default",
+    testid,
+    block = false,
+    class: className,
+    children,
+  }: MenuEntryProps = $props();
+</script>
+
+{#if href}
+  <Link
+    href={href}
+    variant={variant}
+    size={size}
+    aria-current={(current ? "page" : undefined)}
+    class={className}
+    data-testid={testid}
+  >
+    {@render children?.()}
+  </Link>
+{:else if block}
+  <Box class={className} aria-current={(current ? "page" : undefined)} data-testid={testid}>
+    {@render children?.()}
+  </Box>
+{:else}
+  <Inline class={className} aria-current={(current ? "page" : undefined)} data-testid={testid}>
+    {@render children?.()}
+  </Inline>
+{/if}
diff --git a/packages/svelte/ui/src/components/meter-row.svelte b/packages/svelte/ui/src/components/meter-row.svelte
new file mode 100644
index 0000000..ccad011
--- /dev/null
+++ b/packages/svelte/ui/src/components/meter-row.svelte
@@ -0,0 +1,70 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With
+  `href` the whole row is a link.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type MeterRowProps = {
+    label: string;
+    value: number;
+    caption: string;
+    hint?: string;
+    href?: string;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import Progress from "../primitives/form/progress.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn } from "../utils";
+
+  let { label, value, caption, hint, href, class: className }: MeterRowProps = $props();
+</script>
+
+<Box class={cn("min-w-0", className)} data-slot="meter-row">
+  {#if href}
+    <Link
+      href={href}
+      variant="block"
+      class="flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted"
+    >
+      <Box class="flex items-baseline justify-between gap-4">
+        <Text class="m-0 min-w-0 truncate text-sm font-bold text-foreground">
+          {label}
+        </Text>
+        <Text class="m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground">
+          {caption}
+        </Text>
+      </Box>
+      <Progress value={(value == null ? undefined : String(value))} max="100" aria-label={label} />
+      {#if hint}
+        <Text class="m-0 text-xs font-medium text-muted-foreground">
+          {hint}
+        </Text>
+      {/if}
+    </Link>
+  {:else}
+    <Box class="flex min-w-0 flex-col gap-2 p-2">
+      <Box class="flex items-baseline justify-between gap-4">
+        <Text class="m-0 min-w-0 truncate text-sm font-bold text-foreground">
+          {label}
+        </Text>
+        <Text class="m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground">
+          {caption}
+        </Text>
+      </Box>
+      <Progress value={(value == null ? undefined : String(value))} max="100" aria-label={label} />
+      {#if hint}
+        <Text class="m-0 text-xs font-medium text-muted-foreground">
+          {hint}
+        </Text>
+      {/if}
+    </Box>
+  {/if}
+</Box>
diff --git a/packages/svelte/ui/src/components/nav-actions.svelte b/packages/svelte/ui/src/components/nav-actions.svelte
new file mode 100644
index 0000000..d1b2d26
--- /dev/null
+++ b/packages/svelte/ui/src/components/nav-actions.svelte
@@ -0,0 +1,62 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!--
+  The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the
+  press). No wrapper: they sit in the row of the bar.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type NavActionsProps = {
+    login?: string;
+    loginHref?: string;
+    cta?: string;
+    ctaHref?: string;
+    actions?: "none" | "cta";
+    tone?: "default" | "inverse";
+    themeLabel?: string;
+    ontheme?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+
+  let {
+    login,
+    loginHref,
+    cta,
+    ctaHref,
+    actions = "cta",
+    tone = "default",
+    themeLabel,
+    ontheme,
+  }: NavActionsProps = $props();
+</script>
+
+{#if login}
+  <Button
+    variant="ghost"
+    size="sm"
+    href={loginHref}
+    class={(((tone as string) === "inverse") ? "text-background hover:bg-background/10" : "")}
+    data-testid="nav-login"
+  >
+    {login}
+  </Button>
+{/if}
+{#if (((actions as string) === "cta") && cta)}
+  <Button
+    variant={(((tone as string) === "inverse") ? "secondary" : "default")}
+    size="sm"
+    href={ctaHref}
+    data-testid="header-cta"
+  >
+    {cta}
+  </Button>
+{/if}
+{#if themeLabel}
+  <Button variant="outline" size="sm" data-testid="theme-toggle" onclick={() => ontheme?.()}>
+    {themeLabel}
+  </Button>
+{/if}
diff --git a/packages/svelte/ui/src/components/nav-bar-menu.svelte b/packages/svelte/ui/src/components/nav-bar-menu.svelte
new file mode 100644
index 0000000..e7ebec8
--- /dev/null
+++ b/packages/svelte/ui/src/components/nav-bar-menu.svelte
@@ -0,0 +1,32 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!-- The links of NavBar in a nav landmark; left out when there are no links. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { NavLink } from "../blocks/nav-bar.types";
+
+  export type NavBarMenuProps = {
+    label: string;
+    links: NavLink[];
+    current?: string;
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import NavBlock from "../components/nav-block.svelte";
+  import NavLinks from "../components/nav-links.svelte";
+
+  let { label, links, current = "", landmarkLabel }: NavBarMenuProps = $props();
+</script>
+
+{#if ((links?.length ?? 0) > 0)}
+  <NavBlock
+    label={label}
+    class={"order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0"}
+    testid="site-nav"
+    landmarkLabel={landmarkLabel}
+  >
+    <NavLinks links={links} current={current} />
+  </NavBlock>
+{/if}
diff --git a/packages/svelte/ui/src/components/nav-block.svelte b/packages/svelte/ui/src/components/nav-block.svelte
new file mode 100644
index 0000000..e4ff2bc
--- /dev/null
+++ b/packages/svelte/ui/src/components/nav-block.svelte
@@ -0,0 +1,25 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/landmarks.ts -->
+<!-- A navigation region in its own file: Block tag nav named by `label`. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type NavBlockProps = {
+    label?: string;
+    testid?: string;
+    landmarkLabel?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import { cn } from "../utils";
+
+  let { label, testid, landmarkLabel, class: className, children }: NavBlockProps = $props();
+</script>
+
+<Block tag="nav" class={cn(className)} aria-label={(landmarkLabel ?? label)} data-testid={testid}>
+  {@render children?.()}
+</Block>
diff --git a/packages/svelte/ui/src/components/nav-item-row.svelte b/packages/svelte/ui/src/components/nav-item-row.svelte
new file mode 100644
index 0000000..93c46b9
--- /dev/null
+++ b/packages/svelte/ui/src/components/nav-item-row.svelte
@@ -0,0 +1,42 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the
+  right.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type NavItemRowProps = {
+    inner?: string;
+    reserveRight?: boolean;
+    children?: Snippet;
+    icon?: Snippet;
+    right?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Inline from "../primitives/inline/inline.svelte";
+
+  let { inner, reserveRight = false, children, icon, right }: NavItemRowProps = $props();
+</script>
+
+<Inline class={inner} data-slot="nav-item-content">
+  <Inline
+    class={"flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center"}
+    data-slot="nav-item-left"
+  >
+    {@render icon?.()}
+    <Inline class="min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden" data-slot="nav-item-label">
+      {@render children?.()}
+    </Inline>
+  </Inline>
+  {#if right}
+    <Inline class="flex items-center gap-2 in-data-[nav=collapsed]:hidden" data-slot="nav-item-right">
+      {@render right?.()}
+    </Inline>
+  {:else if reserveRight}
+    <Inline class="size-5 shrink-0 in-data-[nav=collapsed]:hidden" data-slot="nav-item-right" />
+  {/if}
+</Inline>
diff --git a/packages/svelte/ui/src/components/nav-item.svelte b/packages/svelte/ui/src/components/nav-item.svelte
new file mode 100644
index 0000000..a6d9959
--- /dev/null
+++ b/packages/svelte/ui/src/components/nav-item.svelte
@@ -0,0 +1,127 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a
+  button, otherwise a static box.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** NavItem: the classes of each value (shadcn/cva style). */
+  export const navItemVariants = variants({
+    base: "flex w-full items-center p-2 rounded",
+    variants: {
+      level: {
+        "1": "",
+        "2": "",
+        "3": "pr-2 pl-12",
+        "4": "pr-2 pl-20",
+      },
+      state: {
+        default: "",
+        selected: "",
+      },
+    },
+    defaultVariants: { level: "1", state: "default" },
+  });
+  /** NavItem: the classes of each value (shadcn/cva style). */
+  export const navItemContentVariants = variants({
+    base:
+      "flex h-8 min-w-0 flex-1 items-center justify-between px-4 py-2 text-xs font-bold text-muted-foreground " +
+      "inset-ring inset-ring-transparent rounded",
+    variants: {
+      level: {
+        "1": "",
+        "2": "",
+        "3": "px-2",
+        "4": "px-2",
+      },
+      state: {
+        default: "",
+        selected: "bg-background text-foreground inset-ring-border",
+      },
+    },
+    defaultVariants: { level: "1", state: "default" },
+  });
+
+  export type NavItemProps = {
+    selected?: boolean;
+    level?: "1" | "2" | "3" | "4";
+    href?: string;
+    interactive?: boolean;
+    reserveRight?: boolean;
+    contentClass?: string;
+    class?: string;
+    children?: Snippet;
+    icon?: Snippet;
+    right?: Snippet;
+    onclick?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import ButtonPlain from "../primitives/button-plain/button-plain.svelte";
+  import LinkPlain from "../primitives/link-plain/link-plain.svelte";
+  import NavItemRow from "../components/nav-item-row.svelte";
+  import { cn } from "../utils";
+
+  let {
+    selected = false,
+    level,
+    href,
+    interactive = false,
+    reserveRight = false,
+    contentClass,
+    class: className,
+    children,
+    icon,
+    right,
+    onclick,
+  }: NavItemProps = $props();
+  const state = $derived(selected ? "selected" : "default");
+  const outer = $derived(
+    cn(
+      navItemVariants({ level: level, state: state }),
+      "group in-data-[nav=collapsed]:justify-center",
+      className,
+    )
+  );
+  const inner = $derived(
+    cn(
+      navItemContentVariants({ level: level, state: state }),
+      (!selected && "group-hover:bg-muted"),
+      "in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0",
+      contentClass,
+    )
+  );
+</script>
+
+{#if href}
+  <LinkPlain
+    href={href}
+    class={outer}
+    aria-current={(selected ? "page" : undefined)}
+    data-slot="nav-item"
+    data-state={state}
+    onclick={() => onclick?.()}
+  >
+    <NavItemRow inner={inner} reserveRight={reserveRight} icon={icon} right={right} children={children} />
+  </LinkPlain>
+{:else if interactive}
+  <ButtonPlain
+    type="button"
+    class={cn(outer, "text-left")}
+    aria-current={(selected ? "page" : undefined)}
+    data-slot="nav-item"
+    data-state={state}
+    onclick={() => onclick?.()}
+  >
+    <NavItemRow inner={inner} reserveRight={reserveRight} icon={icon} right={right} children={children} />
+  </ButtonPlain>
+{:else}
+  <Box class={outer} aria-current={(selected ? "page" : undefined)} data-slot="nav-item" data-state={state}>
+    <NavItemRow inner={inner} reserveRight={reserveRight} icon={icon} right={right} children={children} />
+  </Box>
+{/if}
diff --git a/packages/svelte/ui/src/components/nav-links.svelte b/packages/svelte/ui/src/components/nav-links.svelte
new file mode 100644
index 0000000..8a7456a
--- /dev/null
+++ b/packages/svelte/ui/src/components/nav-links.svelte
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!--
+  The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half
+  of the list.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { NavLink } from "../blocks/nav-bar.types";
+
+  export type NavLinksProps = {
+    links: NavLink[];
+    current?: string;
+    side?: "all" | "left" | "right";
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+
+  let { links, current = "", side = "all" }: NavLinksProps = $props();
+  const count = $derived(links?.length ?? 0);
+</script>
+
+{#if ((links?.length ?? 0) > 0)}
+  <Group gap="4" align="center" class="flex-wrap">
+    {#each links as l, i (l.id)}
+      {#if (((side as string) === "all") || (((i * 2) < count) === ((side as string) === "left")))}
+        <MenuEntry href={l.href} class="text-sm" current={(l.id === current)} testid="nav-link">
+          {l.name}
+        </MenuEntry>
+      {/if}
+    {/each}
+  </Group>
+{/if}
diff --git a/packages/svelte/ui/src/components/notice.svelte b/packages/svelte/ui/src/components/notice.svelte
new file mode 100644
index 0000000..b3cc9c1
--- /dev/null
+++ b/packages/svelte/ui/src/components/notice.svelte
@@ -0,0 +1,33 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text
+  renders nothing visible.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type NoticeProps = {
+    text: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { text }: NoticeProps = $props();
+</script>
+
+<Box class="contents" role="status" data-testid="notice">
+  {#if text}
+    <Text
+      class={"fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold " +
+        "text-background shadow-lg"}
+    >
+      <LucideIcon name="circle-check" size={16} />
+      {text}
+    </Text>
+  {/if}
+</Box>
diff --git a/packages/svelte/ui/src/components/number-field.svelte b/packages/svelte/ui/src/components/number-field.svelte
new file mode 100644
index 0000000..51394c3
--- /dev/null
+++ b/packages/svelte/ui/src/components/number-field.svelte
@@ -0,0 +1,48 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/number-field.ts -->
+<!--
+  A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its
+  ring). Static markup: the buttons carry no logic; the page wires them.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type NumberFieldProps = {
+    value?: string;
+    name?: string;
+    min?: string;
+    label: string;
+    decrease: string;
+    increase: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+
+  let { value = "", name = "", min = "", label, decrease, increase }: NumberFieldProps = $props();
+</script>
+
+<Box
+  class="inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input"
+  data-slot="number-field"
+>
+  <Button variant="ghost" size="sm" layout="icon" type="button" aria-label={decrease} data-testid="decrease">
+    <LucideIcon name="minus" size={16} />
+  </Button>
+  <Input
+    type="number"
+    name={name}
+    value={value}
+    min={min}
+    aria-label={label}
+    size="sm"
+    class="number-bare w-8 bg-transparent px-0 text-center inset-ring-0"
+  />
+  <Button variant="ghost" size="sm" layout="icon" type="button" aria-label={increase} data-testid="increase">
+    <LucideIcon name="plus" size={16} />
+  </Button>
+</Box>
diff --git a/packages/svelte/ui/src/components/offer-media.svelte b/packages/svelte/ui/src/components/offer-media.svelte
new file mode 100644
index 0000000..0d3efee
--- /dev/null
+++ b/packages/svelte/ui/src/components/offer-media.svelte
@@ -0,0 +1,48 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shop-parts.ts -->
+<!--
+  The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats
+  over the picture).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { OfferCard } from "../blocks/store-hero.types";
+
+  export type OfferMediaProps = {
+    alt: string;
+    card: OfferCard;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+
+  let { alt, card }: OfferMediaProps = $props();
+</script>
+
+<Box class="relative" data-testid="hero-media">
+  <MediaFrame alt={alt} ratio="4/3" />
+  <Group
+    gap="4"
+    align="start"
+    class="absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg"
+    data-testid="offer-card"
+  >
+    <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+      <LucideIcon name={card.icon} size={20} />
+    </Box>
+    <Stack gap="0">
+      <Text size="sm" weight="semibold">
+        {card.title}
+      </Text>
+      <Text size="xs" class="text-muted-foreground">
+        {card.text}
+      </Text>
+    </Stack>
+  </Group>
+</Box>
diff --git a/packages/svelte/ui/src/components/order-rows.svelte b/packages/svelte/ui/src/components/order-rows.svelte
new file mode 100644
index 0000000..ae903d9
--- /dev/null
+++ b/packages/svelte/ui/src/components/order-rows.svelte
@@ -0,0 +1,86 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/orders.ts -->
+<!-- The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Order, OrderLabels } from "../blocks/order-table.types";
+
+  export type OrderRowsProps = {
+    orders: Order[];
+    statuses: Record<string, string>;
+    labels: OrderLabels;
+    density?: "default" | "compact";
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Table from "../primitives/table/table.svelte";
+  import TableBody from "../primitives/table/table-body.svelte";
+  import TableCaption from "../primitives/table/table-caption.svelte";
+  import TableCell from "../primitives/table/table-cell.svelte";
+  import TableHead from "../primitives/table/table-head.svelte";
+  import TableHeadCell from "../primitives/table/table-head-cell.svelte";
+  import TableRow from "../primitives/table/table-row.svelte";
+  import Pill from "../components/pill.svelte";
+  import { at, cn, fmtMoney, tpl } from "../utils";
+
+  let { orders, statuses, labels, density = "default" }: OrderRowsProps = $props();
+</script>
+
+<Box class="w-full overflow-x-auto">
+  <Table class="w-full text-left text-sm" data-testid="order-table">
+    <TableCaption class="sr-only">
+      {labels.caption}
+    </TableCaption>
+    <TableHead>
+      <TableRow>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.number}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.date}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.items}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.total}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.status}
+        </TableHeadCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each orders as o (o.id)}
+        <TableRow class="border-t border-border" data-testid="item">
+          <TableCell class={cn("font-semibold", (((density as string) === "compact") ? "py-2" : "py-4"))}>
+            {o.number}
+          </TableCell>
+          <TableCell>
+            {o.date}
+          </TableCell>
+          <TableCell>
+            {tpl(labels.itemsCount, o.items)}
+          </TableCell>
+          <TableCell>
+            {fmtMoney(o.total, o.currency)}
+          </TableCell>
+          <TableCell>
+            <Pill
+              tone={
+                o.status === "paid" ? "green"
+                : o.status === "shipped" ? "blue"
+                : o.status === "pending" ? "amber"
+                : "gray"
+              }
+            >
+              {at(statuses, o.status)}
+            </Pill>
+          </TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</Box>
diff --git a/packages/svelte/ui/src/components/over-media.svelte b/packages/svelte/ui/src/components/over-media.svelte
new file mode 100644
index 0000000..254af4c
--- /dev/null
+++ b/packages/svelte/ui/src/components/over-media.svelte
@@ -0,0 +1,28 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!--
+  A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing.
+  It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the
+  header stays the root of the block (rule 01).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type OverMediaProps = {
+    on?: boolean;
+    alt: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+
+  let { on = false, alt }: OverMediaProps = $props();
+</script>
+
+{#if on}
+  <Box class="pointer-events-none absolute inset-0 -z-10" data-testid="over">
+    <MediaFrame alt={alt} ratio="21/9" class="size-full rounded-none opacity-40" />
+  </Box>
+{/if}
diff --git a/packages/svelte/ui/src/components/page-aside.svelte b/packages/svelte/ui/src/components/page-aside.svelte
new file mode 100644
index 0000000..fc55f7a
--- /dev/null
+++ b/packages/svelte/ui/src/components/page-aside.svelte
@@ -0,0 +1,76 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/page-trail-parts.ts -->
+<!--
+  The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key
+  facts as cards in two columns.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { PageExtras } from "../blocks/page-trail.types";
+
+  export type PageAsideProps = {
+    extras: PageExtras;
+    mode?: "none" | "figure" | "note" | "facts";
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { extras, mode = "figure" }: PageAsideProps = $props();
+</script>
+
+{#if ((mode as string) === "figure")}
+  <Stack gap="0" align="end" class="text-end" data-testid="page-figure">
+    <Text size="4xl" weight="bold">
+      {extras.value}
+    </Text>
+    <Text size="xs" class="text-muted-foreground">
+      {extras.caption}
+    </Text>
+  </Stack>
+{/if}
+{#if ((mode as string) === "note")}
+  <Group
+    gap="4"
+    align="start"
+    class="rounded bg-card inset-ring inset-ring-border max-w-xs p-4"
+    data-testid="page-note"
+  >
+    <LucideIcon name={extras.icon} size={20} />
+    <Stack gap="0">
+      <Text size="lg" weight="bold">
+        {extras.value}
+      </Text>
+      <Text size="sm" weight="medium">
+        {extras.caption}
+      </Text>
+      <Text size="xs" class="text-muted-foreground">
+        {extras.note}
+      </Text>
+    </Stack>
+  </Group>
+{/if}
+{#if ((mode as string) === "facts")}
+  <Box class="grid grid-cols-2 gap-4">
+    {#each extras.facts as s, i (s.id)}
+      {#if (i < 4)}
+        <Stack gap="0" class="rounded bg-card inset-ring inset-ring-border p-4" data-testid="page-fact">
+          <Text size="lg" weight="bold">
+            {s.value}
+          </Text>
+          <Text size="xs" weight="medium">
+            {s.label}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {s.hint}
+          </Text>
+        </Stack>
+      {/if}
+    {/each}
+  </Box>
+{/if}
diff --git a/packages/svelte/ui/src/components/page-crumbs.svelte b/packages/svelte/ui/src/components/page-crumbs.svelte
new file mode 100644
index 0000000..1d12e40
--- /dev/null
+++ b/packages/svelte/ui/src/components/page-crumbs.svelte
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/page-trail-parts.ts -->
+<!--
+  The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the
+  last entry is the current page and is not a link.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { NavLink } from "../blocks/nav-bar.types";
+
+  export type PageCrumbsProps = {
+    label: string;
+    crumbs: NavLink[];
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+
+  let { label, crumbs, landmarkLabel }: PageCrumbsProps = $props();
+  const last = $derived((crumbs?.length ?? 0) - 1);
+</script>
+
+<Block tag="nav" aria-label={(landmarkLabel ?? label)} data-testid="crumbs">
+  <List class="m-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground">
+    {#each crumbs as c, i (c.id)}
+      <ListItem class="flex items-center gap-2">
+        {#if (i < last)}
+          {#if c.href}
+            <Link href={c.href} variant="muted" size="sm" data-testid="crumb">
+              {c.name}
+            </Link>
+          {:else}
+            <Inline data-testid="crumb">
+              {c.name}
+            </Inline>
+          {/if}
+          <LucideIcon name="chevron-right" size={16} />
+        {:else}
+          <Inline class="font-medium text-foreground" aria-current="page">
+            {c.name}
+          </Inline>
+        {/if}
+      </ListItem>
+    {/each}
+  </List>
+</Block>
diff --git a/packages/svelte/ui/src/components/page-header.svelte b/packages/svelte/ui/src/components/page-header.svelte
new file mode 100644
index 0000000..7b11186
--- /dev/null
+++ b/packages/svelte/ui/src/components/page-header.svelte
@@ -0,0 +1,39 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- The page heading: a title, a one-line summary and the action buttons on the right (below on phones). -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type PageHeaderProps = {
+    title: string;
+    summary?: string;
+    id?: string;
+    actions?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+
+  let { title, summary, id, actions }: PageHeaderProps = $props();
+</script>
+
+<Box class="flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between">
+  <Box class="flex min-w-0 flex-col gap-2">
+    <Title as={1} size="xl" weight="bold" class="m-0" id={id}>
+      {title}
+    </Title>
+    {#if summary}
+      <Text class="m-0 text-xs font-medium text-muted-foreground">
+        {summary}
+      </Text>
+    {/if}
+  </Box>
+  {#if actions}
+    <Box class="flex flex-wrap items-center gap-2">
+      {@render actions?.()}
+    </Box>
+  {/if}
+</Box>
diff --git a/packages/svelte/ui/src/components/pager.svelte b/packages/svelte/ui/src/components/pager.svelte
new file mode 100644
index 0000000..39d819d
--- /dev/null
+++ b/packages/svelte/ui/src/components/pager.svelte
@@ -0,0 +1,117 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4
+  5 6 … 21), with `moreLabel` a "Load more" button. The current page is a plain element marked
+  aria-current="page"; the others are buttons. All text comes in through props.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type PagerProps = {
+    page: number;
+    pages: number;
+    summary: string;
+    previousLabel: string;
+    nextLabel: string;
+    numbered?: boolean;
+    pageLabel?: string;
+    moreLabel?: string;
+    onpage?: (page: number) => void;
+    onmore?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import { pageWindow, tpl } from "../utils";
+
+  let {
+    page,
+    pages,
+    summary,
+    previousLabel,
+    nextLabel,
+    numbered = false,
+    pageLabel,
+    moreLabel,
+    onpage,
+    onmore,
+  }: PagerProps = $props();
+  const numbers = $derived(pageWindow(page, pages));
+</script>
+
+<Box
+  class={"flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground"}
+  data-testid="pager"
+>
+  <Inline class="flex flex-wrap items-center gap-4">
+    <Inline>
+      {summary}
+    </Inline>
+  </Inline>
+  <Inline class="flex flex-wrap items-center gap-2">
+    {#if (moreLabel && (page < pages))}
+      <Button variant="outline" size="sm" type="button" data-testid="pager-more" onclick={() => onmore?.()}>
+        {moreLabel}
+      </Button>
+    {/if}
+    <Button
+      variant="outline"
+      size="sm"
+      layout="icon"
+      aria-label={previousLabel}
+      disabled={(page <= 1)}
+      onclick={() => onpage?.((page - 1))}
+    >
+      <LucideIcon name="chevron-left" size={16} />
+    </Button>
+    {#if numbered}
+      {#each numbers as n, i ((n || tpl("gap{0}", i)))}
+        {#if (n === null)}
+          <Inline class="w-8 text-center">
+            {"…"}
+          </Inline>
+        {:else if (n === page)}
+          <Inline
+            class={"flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background"}
+            aria-current="page"
+            data-testid="pager-current"
+          >
+            {n}
+          </Inline>
+        {:else}
+          <Button
+            variant="ghost"
+            size="sm"
+            layout="icon"
+            type="button"
+            aria-label={tpl(pageLabel, n)}
+            onclick={() => onpage?.(n)}
+          >
+            {n}
+          </Button>
+        {/if}
+      {/each}
+    {:else}
+      <Inline class="min-w-12 text-center font-bold text-foreground">
+        {page}
+        {" / "}
+        {pages}
+      </Inline>
+    {/if}
+    <Button
+      variant="outline"
+      size="sm"
+      layout="icon"
+      aria-label={nextLabel}
+      disabled={(page >= pages)}
+      onclick={() => onpage?.((page + 1))}
+    >
+      <LucideIcon name="chevron-right" size={16} />
+    </Button>
+  </Inline>
+</Box>
diff --git a/packages/svelte/ui/src/components/panel.svelte b/packages/svelte/ui/src/components/panel.svelte
new file mode 100644
index 0000000..b294475
--- /dev/null
+++ b/packages/svelte/ui/src/components/panel.svelte
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description
+  and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the
+  Block of its block (rule 01).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type PanelProps = {
+    title?: string;
+    description?: string;
+    id?: string;
+    class?: string;
+    children?: Snippet;
+    actions?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import { cn, tpl } from "../utils";
+
+  let { title, description, id, class: className, children, actions }: PanelProps = $props();
+</script>
+
+<Box
+  class={cn(
+    "flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border",
+    className
+  )}
+  role="group"
+  aria-labelledby={((title && id) ? tpl("{0}-t", id) : undefined)}
+>
+  {#if (title || actions)}
+    <Box class="flex items-start justify-between gap-4">
+      <Box class="flex min-w-0 flex-col gap-2">
+        {#if title}
+          <Title as={2} size="base" class="m-0 text-foreground" id={(id ? tpl("{0}-t", id) : undefined)}>
+            {title}
+          </Title>
+        {/if}
+        {#if description}
+          <Text class="m-0 text-xs font-medium text-muted-foreground">
+            {description}
+          </Text>
+        {/if}
+      </Box>
+      {@render actions?.()}
+    </Box>
+  {/if}
+  {@render children?.()}
+</Box>
diff --git a/packages/svelte/ui/src/components/payment-options.svelte b/packages/svelte/ui/src/components/payment-options.svelte
new file mode 100644
index 0000000..a8e73e7
--- /dev/null
+++ b/packages/svelte/ui/src/components/payment-options.svelte
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!-- Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Payment } from "./payment-options.types";
+
+  export type PaymentOptionsProps = {
+    payments: Payment[];
+    name: string;
+    checked?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Grid from "../primitives/grid/grid.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Radio from "../primitives/radio/radio.svelte";
+
+  let { payments, name, checked = "" }: PaymentOptionsProps = $props();
+</script>
+
+<Grid cols="1-2" class="gap-4" data-testid="payments">
+  {#each payments as p (p.id)}
+    <Label
+      class={"flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground"}
+      data-testid="payment"
+    >
+      <Radio name={name} value={p.id} checked={(p.id === checked)} />
+      <LucideIcon name={p.icon} size={20} class="shrink-0" />
+      <Inline class="flex flex-col items-start justify-start gap-0">
+        <Inline class="text-sm font-semibold">
+          {p.title}
+        </Inline>
+        <Inline class="text-xs text-muted-foreground">
+          {p.text}
+        </Inline>
+      </Inline>
+    </Label>
+  {/each}
+</Grid>
diff --git a/packages/svelte/ui/src/components/payment-options.types.ts b/packages/svelte/ui/src/components/payment-options.types.ts
new file mode 100644
index 0000000..a38ead1
--- /dev/null
+++ b/packages/svelte/ui/src/components/payment-options.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Payment = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/svelte/ui/src/components/pill.svelte b/packages/svelte/ui/src/components/pill.svelte
new file mode 100644
index 0000000..cdeb21f
--- /dev/null
+++ b/packages/svelte/ui/src/components/pill.svelte
@@ -0,0 +1,49 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- A status pill: a tinted label with an icon (published, draft, role, comment state). -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type PillProps = {
+    tone?: "gray" | "blue" | "amber" | "green" | "red" | "violet" | "pink" | "orange" | "cyan";
+    icon?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import { at, cn } from "../utils";
+
+  const PILL: Record<string, string> = {
+    "gray": "bg-muted text-muted-foreground inset-ring-border",
+    "blue": "bg-blue-50 text-blue-700 inset-ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:inset-ring-blue-900",
+    "amber": "bg-amber-50 text-amber-700 inset-ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:inset-ring-amber-900",
+    "green": "bg-green-50 text-green-700 inset-ring-green-200 dark:bg-green-950 dark:text-green-300 dark:inset-ring-green-900",
+    "red": "bg-red-50 text-red-700 inset-ring-red-200 dark:bg-red-950 dark:text-red-300 dark:inset-ring-red-900",
+    "violet": "bg-violet-50 text-violet-700 inset-ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:inset-ring-violet-900",
+    "pink": "bg-pink-50 text-pink-700 inset-ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:inset-ring-pink-900",
+    "orange": "bg-orange-50 text-orange-700 inset-ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:inset-ring-orange-900",
+    "cyan": "bg-cyan-50 text-cyan-700 inset-ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:inset-ring-cyan-900",
+  };
+  let { tone = "gray", icon, class: className, children }: PillProps = $props();
+</script>
+
+<Box class="contents">
+  <Inline
+    class={cn(
+      "inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring",
+      at(PILL, tone),
+      className
+    )}
+    data-slot="pill"
+  >
+    {#if icon}
+      <LucideIcon name={icon} size={12} />
+    {/if}
+    {@render children?.()}
+  </Inline>
+</Box>
diff --git a/packages/svelte/ui/src/components/post-actions.svelte b/packages/svelte/ui/src/components/post-actions.svelte
new file mode 100644
index 0000000..89e5b14
--- /dev/null
+++ b/packages/svelte/ui/src/components/post-actions.svelte
@@ -0,0 +1,52 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!--
+  The calls to action of a post header: share and save side by side, one wide read button, or a wide read button
+  with share and save as icons.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post } from "../blocks/post-card.types";
+  import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+  export type PostActionsProps = {
+    labels: PostSplitLabels;
+    mode?: "pair" | "wide" | "icons";
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+
+  let { labels, mode = "pair" }: PostActionsProps = $props();
+</script>
+
+{#if ((mode as string) === "pair")}
+  <Group gap="2" class="flex-wrap">
+    <Button variant="default" size="default" class="gap-2" data-testid="action-primary">
+      <LucideIcon name="share-2" size={16} />
+      {labels.share}
+    </Button>
+    <Button variant="outline" size="default" class="gap-2" data-testid="post-save">
+      <LucideIcon name="bookmark" size={16} />
+      {labels.save}
+    </Button>
+  </Group>
+{:else}
+  <Group gap="2">
+    <Button variant="default" size="default" class="gap-2 flex-1" data-testid="action-primary">
+      <LucideIcon name="book-open" size={16} />
+      {labels.read}
+    </Button>
+    {#if ((mode as string) === "icons")}
+      <Button variant="outline" size="default" layout="icon" aria-label={labels.share} data-testid="post-share">
+        <LucideIcon name="share-2" size={16} />
+      </Button>
+      <Button variant="outline" size="default" layout="icon" aria-label={labels.save} data-testid="post-save">
+        <LucideIcon name="bookmark" size={16} />
+      </Button>
+    {/if}
+  </Group>
+{/if}
diff --git a/packages/svelte/ui/src/components/post-author.svelte b/packages/svelte/ui/src/components/post-author.svelte
new file mode 100644
index 0000000..3b76e72
--- /dev/null
+++ b/packages/svelte/ui/src/components/post-author.svelte
@@ -0,0 +1,81 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!--
+  The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line,
+  a card, or a card with the bio.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post } from "../blocks/post-card.types";
+  import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+  export type PostAuthorProps = {
+    post: Post;
+    extras: PostExtras;
+    labels: PostSplitLabels;
+    mode?: "line" | "card" | "bio";
+    share?: boolean;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { cn } from "../utils";
+
+  let { post, extras, labels, mode = "line", share = false, class: className }: PostAuthorProps = $props();
+</script>
+
+<Stack
+  gap="4"
+  align="stretch"
+  class={cn(
+    (((mode as string) === "line") ? "" : "rounded bg-card inset-ring inset-ring-border p-4"),
+    className
+  )}
+  data-testid="post-author"
+>
+  <Group gap="4" align="center">
+    <MediaFrame alt={post.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+    <Stack gap="0" align="start" class="min-w-0 flex-1 text-start">
+      <Text size="sm" weight="semibold">
+        {post.author}
+      </Text>
+      <Text size="xs" class="text-muted-foreground">
+        {extras.role}
+      </Text>
+    </Stack>
+    {#if share}
+      <Group gap="2">
+        <Button variant="ghost" size="default" class="gap-2" data-testid="post-share">
+          <LucideIcon name="share-2" size={16} />
+          {labels.share}
+        </Button>
+        <Button variant="ghost" size="default" class="gap-2" data-testid="post-save">
+          <LucideIcon name="bookmark" size={16} />
+          {labels.save}
+        </Button>
+      </Group>
+    {:else}
+      <Box class="text-muted-foreground">
+        <Group gap="2" align="center">
+          <LucideIcon name="calendar" size={16} />
+          <Text size="sm">
+            {post.date}
+          </Text>
+        </Group>
+      </Box>
+    {/if}
+  </Group>
+  {#if ((mode as string) === "bio")}
+    <Text size="sm" class="text-muted-foreground">
+      {extras.bio}
+    </Text>
+  {/if}
+</Stack>
diff --git a/packages/svelte/ui/src/components/post-feature.svelte b/packages/svelte/ui/src/components/post-feature.svelte
new file mode 100644
index 0000000..3c1ca21
--- /dev/null
+++ b/packages/svelte/ui/src/components/post-feature.svelte
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-showcase-parts.ts -->
+<!--
+  The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading
+  time, and a wide read button.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post, PostLabels } from "../blocks/post-card.types";
+
+  export type PostFeatureProps = {
+    p: Post;
+    labels: PostLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { tpl } from "../utils";
+
+  let { p, labels }: PostFeatureProps = $props();
+</script>
+
+<Stack gap="4" align="stretch" class="border-t border-border pt-6" data-testid="post-feature">
+  <Badge variant="secondary" size="sm" class="w-fit">
+    {p.category}
+  </Badge>
+  <Title as={3} size="xl" weight="semibold">
+    {p.title}
+  </Title>
+  <Text size="sm" class="text-muted-foreground">
+    {p.excerpt}
+  </Text>
+  <Group gap="4" align="center">
+    <MediaFrame alt={p.author} ratio="1/1" class="size-10 shrink-0 rounded-full" />
+    <Stack gap="0">
+      <Text size="sm" weight="semibold">
+        {p.author}
+      </Text>
+      <Text size="xs" class="text-muted-foreground">
+        {tpl("{0} · {1}", p.date, tpl(labels.minutes, p.minutes))}
+      </Text>
+    </Stack>
+  </Group>
+  <Button variant="default" size="default" href={p.href} class="w-full gap-2" data-testid="action-primary">
+    {labels.read}
+    <LucideIcon name="arrow-right" size={16} />
+  </Button>
+</Stack>
diff --git a/packages/svelte/ui/src/components/post-mini-card.svelte b/packages/svelte/ui/src/components/post-mini-card.svelte
new file mode 100644
index 0000000..81229cd
--- /dev/null
+++ b/packages/svelte/ui/src/components/post-mini-card.svelte
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-showcase-parts.ts -->
+<!-- A small post card of PostShowcase: the picture, the category, the title and the author with the reading time. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post, PostLabels } from "../blocks/post-card.types";
+
+  export type PostMiniCardProps = {
+    p: Post;
+    labels: PostLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import { tpl } from "../utils";
+
+  let { p, labels }: PostMiniCardProps = $props();
+</script>
+
+<Stack gap="2" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-2" data-testid="post-mini">
+  <MediaFrame alt={p.title} />
+  <Stack gap="2" align="start" class="p-2">
+    <Badge variant="secondary" size="sm">
+      {p.category}
+    </Badge>
+    <Title as={3} size="sm" weight="semibold">
+      {p.title}
+    </Title>
+    <Text size="xs" class="text-muted-foreground">
+      {tpl("{0} · {1}", p.author, tpl(labels.minutes, p.minutes))}
+    </Text>
+  </Stack>
+</Stack>
diff --git a/packages/svelte/ui/src/components/post-outline.svelte b/packages/svelte/ui/src/components/post-outline.svelte
new file mode 100644
index 0000000..729d789
--- /dev/null
+++ b/packages/svelte/ui/src/components/post-outline.svelte
@@ -0,0 +1,65 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!-- The facts of a post in a column (author, date, minutes, views), then the related reading as links. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post } from "../blocks/post-card.types";
+  import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+  export type PostOutlineProps = {
+    post: Post;
+    extras: PostExtras;
+    labels: PostSplitLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import { tpl } from "../utils";
+
+  let { post, extras, labels }: PostOutlineProps = $props();
+</script>
+
+<Stack gap="6" align="stretch" data-testid="post-outline">
+  <Stack gap="2" align="start" class="text-muted-foreground">
+    <Group gap="2" align="center">
+      <LucideIcon name="user" size={16} />
+      <Text size="sm">
+        {post.author}
+      </Text>
+    </Group>
+    <Group gap="2" align="center">
+      <LucideIcon name="calendar" size={16} />
+      <Text size="sm">
+        {post.date}
+      </Text>
+    </Group>
+    <Group gap="2" align="center">
+      <LucideIcon name="clock" size={16} />
+      <Text size="sm">
+        {tpl(labels.minutes, post.minutes)}
+      </Text>
+    </Group>
+    <Group gap="2" align="center">
+      <LucideIcon name="eye" size={16} />
+      <Text size="sm">
+        {tpl(labels.views, extras.views)}
+      </Text>
+    </Group>
+  </Stack>
+  <Stack gap="2" align="stretch" class="border-t border-border pt-4">
+    <Text size="xs" weight="medium" class="uppercase tracking-wide text-muted-foreground">
+      {labels.related}
+    </Text>
+    {#each extras.outline as l (l.id)}
+      <MenuEntry href={l.href} class="text-sm font-medium" size="sm" testid="post-link">
+        <LucideIcon name="chevron-right" size={16} />
+        {l.name}
+      </MenuEntry>
+    {/each}
+  </Stack>
+</Stack>
diff --git a/packages/svelte/ui/src/components/post-overlay-card.svelte b/packages/svelte/ui/src/components/post-overlay-card.svelte
new file mode 100644
index 0000000..91ccb96
--- /dev/null
+++ b/packages/svelte/ui/src/components/post-overlay-card.svelte
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-showcase-parts.ts -->
+<!--
+  A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and
+  date, the title, the excerpt and a read link.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post, PostLabels } from "../blocks/post-card.types";
+
+  export type PostOverlayCardProps = {
+    p: Post;
+    labels: PostLabels;
+    ratio?: "4/3" | "16/9";
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import { cn } from "../utils";
+
+  let { p, labels, ratio = "4/3" }: PostOverlayCardProps = $props();
+</script>
+
+<Box class="relative overflow-hidden rounded" data-testid="post-overlay">
+  <MediaFrame alt={p.title} ratio={ratio} class={(((ratio as string) === "4/3") ? "min-h-80" : "min-h-64")} />
+  <Stack gap="2" align="start" class="absolute bottom-4 left-4 right-4 rounded bg-background p-4">
+    <Group gap="2" align="center">
+      <Badge variant="secondary" size="sm">
+        {p.category}
+      </Badge>
+      <Text size="xs" class="text-muted-foreground">
+        {p.date}
+      </Text>
+    </Group>
+    <Title as={3} size="base" weight="semibold">
+      {p.title}
+    </Title>
+    <Text size="sm" class={cn("text-muted-foreground", "line-clamp-2")}>
+      {p.excerpt}
+    </Text>
+    <MenuEntry href={p.href} class="gap-2 text-sm font-medium" size="sm" testid="read">
+      {labels.read}
+      <LucideIcon name="arrow-right" size={16} />
+    </MenuEntry>
+  </Stack>
+</Box>
diff --git a/packages/svelte/ui/src/components/post-stats.svelte b/packages/svelte/ui/src/components/post-stats.svelte
new file mode 100644
index 0000000..fbf6336
--- /dev/null
+++ b/packages/svelte/ui/src/components/post-stats.svelte
@@ -0,0 +1,45 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!-- The reading figures of a post: minutes to read, views and likes, each with its glyph. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Post } from "../blocks/post-card.types";
+  import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+  export type PostStatsProps = {
+    post: Post;
+    extras: PostExtras;
+    labels: PostSplitLabels;
+    align?: "start" | "center";
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { tpl } from "../utils";
+
+  let { post, extras, labels, align = "start" }: PostStatsProps = $props();
+</script>
+
+<Group gap="4" align="center" justify={align} class="flex-wrap text-muted-foreground" data-testid="post-stats">
+  <Group gap="2" align="center">
+    <LucideIcon name="clock" size={16} />
+    <Text size="sm">
+      {tpl(labels.minutes, post.minutes)}
+    </Text>
+  </Group>
+  <Group gap="2" align="center">
+    <LucideIcon name="eye" size={16} />
+    <Text size="sm">
+      {tpl(labels.views, extras.views)}
+    </Text>
+  </Group>
+  <Group gap="2" align="center">
+    <LucideIcon name="heart" size={16} />
+    <Text size="sm">
+      {tpl(labels.likes, extras.likes)}
+    </Text>
+  </Group>
+</Group>
diff --git a/packages/svelte/ui/src/components/post-tags.svelte b/packages/svelte/ui/src/components/post-tags.svelte
new file mode 100644
index 0000000..f353508
--- /dev/null
+++ b/packages/svelte/ui/src/components/post-tags.svelte
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!-- The tags of a post as small badges in a wrapping row. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { NavLink } from "../blocks/nav-bar.types";
+
+  export type PostTagsProps = {
+    tags: NavLink[];
+    align?: "start" | "center";
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Group from "../primitives/group/group.svelte";
+
+  let { tags, align = "start" }: PostTagsProps = $props();
+</script>
+
+<Group gap="2" justify={align} class="flex-wrap">
+  {#each tags as tag (tag.id)}
+    <Badge variant="secondary" size="sm" data-testid="post-tag">
+      {tag.name}
+    </Badge>
+  {/each}
+</Group>
diff --git a/packages/svelte/ui/src/components/product-gallery.svelte b/packages/svelte/ui/src/components/product-gallery.svelte
new file mode 100644
index 0000000..5044d56
--- /dev/null
+++ b/packages/svelte/ui/src/components/product-gallery.svelte
@@ -0,0 +1,34 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/product-parts.ts -->
+<!--
+  The gallery of a product page: the picture (the file of the product's featured media, a placeholder without
+  one) and optional thumbnails below.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type ProductGalleryProps = {
+    name: string;
+    image?: string;
+    thumbs?: "none" | "below";
+  };
+</script>
+
+<script lang="ts">
+  import Grid from "../primitives/grid/grid.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+
+  let { name, image, thumbs = "below" }: ProductGalleryProps = $props();
+</script>
+
+<Stack gap="4" align="stretch" data-testid="gallery">
+  <MediaFrame alt={name} src={image} ratio="1/1" />
+  {#if ((thumbs as string) === "below")}
+    <Grid cols="3" class="gap-4" data-testid="thumbs">
+      <MediaFrame alt={name} src={image} ratio="1/1" class="ring-2 ring-foreground" />
+      <MediaFrame alt={name} ratio="1/1" />
+      <MediaFrame alt={name} ratio="1/1" />
+    </Grid>
+  {/if}
+</Stack>
diff --git a/packages/svelte/ui/src/components/product-price.svelte b/packages/svelte/ui/src/components/product-price.svelte
new file mode 100644
index 0000000..dde031d
--- /dev/null
+++ b/packages/svelte/ui/src/components/product-price.svelte
@@ -0,0 +1,46 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/product-parts.ts -->
+<!--
+  The price line of a product page: the price (integer minor units in the currency), the old price (compare_at)
+  struck through when higher, and the badge.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type ProductPriceProps = {
+    price: number;
+    compareAt?: number;
+    currency: string;
+    badge?: string;
+    was: string;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { fmtMoney } from "../utils";
+
+  let { price, compareAt, currency, badge = "", was }: ProductPriceProps = $props();
+</script>
+
+<Group gap="4" align="center" class="flex-wrap">
+  <Text size="4xl" weight="bold">
+    {fmtMoney(price, currency)}
+  </Text>
+  {#if (compareAt && (compareAt > price))}
+    <Text tag="del" size="lg" class="relative text-muted-foreground" data-testid="compare-at">
+      <Inline class="sr-only">
+        {was}
+      </Inline>
+      {fmtMoney(compareAt, currency)}
+    </Text>
+  {/if}
+  {#if badge}
+    <Badge variant="default" size="default">
+      {badge}
+    </Badge>
+  {/if}
+</Group>
diff --git a/packages/svelte/ui/src/components/project-tiles.svelte b/packages/svelte/ui/src/components/project-tiles.svelte
new file mode 100644
index 0000000..f2c07d2
--- /dev/null
+++ b/packages/svelte/ui/src/components/project-tiles.svelte
@@ -0,0 +1,105 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/work-parts.ts -->
+<!--
+  The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags,
+  two links), compact cards in four columns, captions over the pictures, or a bento where the first project
+  takes a big tile.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Project, ProjectLabels } from "../blocks/project-grid.types";
+
+  export type ProjectTilesProps = {
+    projects: Project[];
+    labels: ProjectLabels;
+    layout?: "cards" | "compact" | "overlay" | "bento" | "list";
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import ArticleBlock from "../components/article-block.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import { cn, tpl } from "../utils";
+
+  let { projects, labels, layout = "cards" }: ProjectTilesProps = $props();
+  const over = $derived(
+    (layout as string) === "overlay" ? true
+    : ((layout as string) === "bento")
+  );
+</script>
+
+<Box
+  class={
+    (layout as string) === "compact" ? "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+    : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+  }
+  data-testid="items"
+>
+  {#each projects as p, i (p.id)}
+    <ArticleBlock
+      class={cn(
+        "flex flex-col gap-4",
+        (over ? "relative" : "rounded bg-card inset-ring inset-ring-border p-4"),
+        ((((layout as string) === "bento") && (i === 0)) ? "sm:col-span-2 lg:row-span-2" : "")
+      )}
+      testid="item"
+    >
+      <Box class={(over ? "h-full" : "relative")}>
+        <MediaFrame
+          alt={p.title}
+          ratio={(((layout as string) === "compact") ? "1/1" : (over ? "3/4" : "4/3"))}
+          class={(over ? "h-full" : "")}
+        />
+        {#if (p.featured && ((layout as string) !== "compact"))}
+          <Badge variant="default" size="default" class="absolute left-4 top-4" data-testid="featured">
+            {labels.featured}
+          </Badge>
+        {/if}
+      </Box>
+      <Stack
+        gap="2"
+        align="stretch"
+        class={(over ? "absolute right-4 bottom-4 left-4 rounded bg-background p-4" : "")}
+      >
+        <Text size="xs" class="text-muted-foreground">
+          {tpl("{0}, {1}", p.category, p.year)}
+        </Text>
+        <Title as={3} size={(((layout as string) === "compact") ? "sm" : "lg")} weight="semibold">
+          {p.title}
+        </Title>
+        {#if ((layout as string) !== "compact")}
+          <Text size="sm" class="text-muted-foreground">
+            {p.summary}
+          </Text>
+        {/if}
+        {#if ((layout as string) === "cards")}
+          <Group gap="2" class="flex-wrap">
+            {#each p.tags as k (k)}
+              <Badge variant="secondary" size="sm">
+                {k}
+              </Badge>
+            {/each}
+          </Group>
+          <Group gap="4" class="pt-2">
+            <MenuEntry href={p.href} class="inline-flex items-center gap-2 text-sm font-medium">
+              {labels.case}
+              <LucideIcon name="arrow-right" size={16} />
+            </MenuEntry>
+            <MenuEntry href={p.href} class="inline-flex items-center gap-2 text-sm font-medium">
+              {labels.view}
+              <LucideIcon name="external-link" size={16} />
+            </MenuEntry>
+          </Group>
+        {/if}
+      </Stack>
+    </ArticleBlock>
+  {/each}
+</Box>
diff --git a/packages/svelte/ui/src/components/prompt-composer.svelte b/packages/svelte/ui/src/components/prompt-composer.svelte
new file mode 100644
index 0000000..faff8ba
--- /dev/null
+++ b/packages/svelte/ui/src/components/prompt-composer.svelte
@@ -0,0 +1,110 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!--
+  A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send
+  button. Static links only; a host adds behavior.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type PromptComposerProps = {
+    label?: string;
+    attachLabel?: string;
+    modelLabel?: string;
+    send?: string;
+    href?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let { label, attachLabel, modelLabel, send, href }: PromptComposerProps = $props();
+</script>
+
+<Box
+  class={cn(
+    "mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30",
+    defaults.hero.composer
+  )}
+  data-testid="email-form"
+>
+  {#if attachLabel}
+    <Group gap="2" align="center" data-testid="composer-attachments">
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          "gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20",
+          defaults.hero.attach
+        )}
+        data-testid="composer-attach"
+      >
+        <LucideIcon name="file-text" size={16} />
+        {attachLabel}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class={cn(
+          "gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20",
+          defaults.hero.attach
+        )}
+        data-testid="composer-attach"
+      >
+        <LucideIcon name="paperclip" size={16} />
+        {attachLabel}
+      </Button>
+    </Group>
+  {/if}
+  <Text
+    size="xs"
+    weight="semibold"
+    class={cn("flex w-full items-center leading-5 text-background/80", defaults.hero.promptLine)}
+    data-testid="field"
+  >
+    {label}
+  </Text>
+  <Group gap="2" align="center" justify="between" class="h-8 w-full" data-testid="composer-tools">
+    <Group gap="2" align="center">
+      <Button
+        variant="ghost"
+        size="sm"
+        layout="icon"
+        class="bg-background/10 text-background hover:bg-background/20"
+        data-testid="composer-plus"
+        aria-label={(attachLabel ?? "Attach")}
+      >
+        <LucideIcon name="plus" size={16} />
+      </Button>
+      {#if modelLabel}
+        <Button
+          variant="ghost"
+          size="sm"
+          class={cn("gap-2 bg-background/10 text-background hover:bg-background/20", defaults.hero.model)}
+          data-testid="composer-model"
+        >
+          <LucideIcon name="sparkles" size={16} />
+          {modelLabel}
+          <LucideIcon name="chevron-down" size={16} />
+        </Button>
+      {/if}
+    </Group>
+    <Button
+      href={href}
+      variant="secondary"
+      size="sm"
+      layout="icon"
+      data-testid="submit"
+      aria-label={(send ?? "Send")}
+    >
+      <LucideIcon name="arrow-up" size={16} />
+    </Button>
+  </Group>
+</Box>
diff --git a/packages/svelte/ui/src/components/quote-card.svelte b/packages/svelte/ui/src/components/quote-card.svelte
new file mode 100644
index 0000000..db7db4d
--- /dev/null
+++ b/packages/svelte/ui/src/components/quote-card.svelte
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/marketing.ts -->
+<!--
+  One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the
+  stars and a company glyph as `item` says.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Quote, QuoteLabels, QuoteItem } from "../blocks/testimonial-grid.types";
+
+  export type QuoteCardProps = {
+    q: Quote;
+    labels: QuoteLabels;
+    item?: QuoteItem;
+    layout?: "grid" | "single" | "stack" | "masonry" | "strip";
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import FigureBlock from "../components/figure-block.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import Rating from "../components/rating.svelte";
+  import { cn, tpl } from "../utils";
+
+  let { q, labels, item, layout = "grid" }: QuoteCardProps = $props();
+</script>
+
+<FigureBlock
+  class={cn(
+    "m-0 flex flex-col gap-4",
+    ((item?.kind === "plain") ? "" : "rounded p-6 inset-ring inset-ring-border bg-card"),
+    (
+      (layout as string) === "masonry" ? "mb-4 break-inside-avoid"
+      : (layout as string) === "strip" ? "w-80 shrink-0 snap-start"
+      : "h-full"
+    )
+  )}
+  testid="item"
+>
+  {#if (item?.kind === "social")}
+    <Group gap="4" align="center">
+      {#if (item?.avatar !== "none")}
+        <MediaFrame alt={q.author} ratio="1/1" class="size-12 shrink-0 rounded-full" />
+      {/if}
+      <Stack gap="0">
+        <Text size="sm" weight="semibold">
+          {q.author}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {tpl(labels.handleLine, q.handle, q.time)}
+        </Text>
+      </Stack>
+      <LucideIcon name="message-circle" size={16} class="ml-auto text-muted-foreground" />
+    </Group>
+    <Text size="base">
+      {q.quote}
+    </Text>
+  {:else}
+    {#if (item?.rating !== "hide")}
+      <Rating value={q.rating} label={tpl(labels.rating, q.rating)} />
+    {/if}
+    {#if (item?.mark === "icon")}
+      <Inline class="text-muted-foreground" data-testid="mark">
+        <LucideIcon name={q.mark} size={24} />
+      </Inline>
+    {/if}
+    <Text size={(((layout as string) === "single") ? "xl" : "base")}>
+      {q.quote}
+    </Text>
+    <Group gap="4" align="center">
+      {#if (item?.avatar !== "none")}
+        <MediaFrame alt={q.author} ratio="1/1" class="size-12 shrink-0 rounded-full" />
+      {/if}
+      <Stack gap="0">
+        <Text size="sm" weight="semibold">
+          {q.author}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {tpl(labels.byLine, q.role, q.company)}
+        </Text>
+      </Stack>
+    </Group>
+  {/if}
+</FigureBlock>
diff --git a/packages/svelte/ui/src/components/quote-figures.svelte b/packages/svelte/ui/src/components/quote-figures.svelte
new file mode 100644
index 0000000..121c432
--- /dev/null
+++ b/packages/svelte/ui/src/components/quote-figures.svelte
@@ -0,0 +1,35 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/quote-split-parts.ts -->
+<!-- Three figures in a row above the quotes of QuoteSplit. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { QuoteExtras } from "../blocks/quote-split.types";
+  import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+  export type QuoteFiguresProps = {
+    extras: QuoteExtras;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { extras }: QuoteFiguresProps = $props();
+</script>
+
+<Box class="grid grid-cols-3 gap-4 border-b border-border pb-8" data-testid="quote-figures">
+  {#each extras.stats as s, i (s.id)}
+    {#if (i < 3)}
+      <Stack gap="0" data-testid="quote-stat">
+        <Text size="3xl" weight="bold">
+          {s.value}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {s.label}
+        </Text>
+      </Stack>
+    {/if}
+  {/each}
+</Box>
diff --git a/packages/svelte/ui/src/components/quote-logo-tiles.svelte b/packages/svelte/ui/src/components/quote-logo-tiles.svelte
new file mode 100644
index 0000000..67b3b92
--- /dev/null
+++ b/packages/svelte/ui/src/components/quote-logo-tiles.svelte
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/quote-split-parts.ts -->
+<!-- Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { QuoteExtras } from "../blocks/quote-split.types";
+  import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+  export type QuoteLogoTilesProps = {
+    extras: QuoteExtras;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { extras }: QuoteLogoTilesProps = $props();
+</script>
+
+<Box class="grid grid-cols-2 gap-4" data-testid="quote-logos">
+  {#each extras.logos as l, i (l.id)}
+    {#if (i < 4)}
+      <Group
+        gap="2"
+        align="center"
+        justify="center"
+        class="rounded bg-card inset-ring inset-ring-border p-4 text-muted-foreground"
+        data-testid="quote-logo"
+      >
+        <LucideIcon name={l.icon} size={20} />
+        <Text size="sm" weight="semibold">
+          {l.name}
+        </Text>
+      </Group>
+    {/if}
+  {/each}
+</Box>
diff --git a/packages/svelte/ui/src/components/quote-proof.svelte b/packages/svelte/ui/src/components/quote-proof.svelte
new file mode 100644
index 0000000..e7c82a2
--- /dev/null
+++ b/packages/svelte/ui/src/components/quote-proof.svelte
@@ -0,0 +1,33 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/cta.ts -->
+<!-- A customer quote and who said it, as a figure. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type QuoteProofProps = {
+    quote?: string;
+    quoteBy?: string;
+    center?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn } from "../utils";
+
+  let { quote, quoteBy, center = false }: QuoteProofProps = $props();
+</script>
+
+<Block
+  tag="figure"
+  class={cn("flex flex-col gap-2", (center ? "items-center text-center" : ""))}
+  data-testid="proof"
+>
+  <Text size="xl">
+    {quote}
+  </Text>
+  <Text size="sm" class="text-muted-foreground">
+    {quoteBy}
+  </Text>
+</Block>
diff --git a/packages/svelte/ui/src/components/quote-rating-panel.svelte b/packages/svelte/ui/src/components/quote-rating-panel.svelte
new file mode 100644
index 0000000..2d7aa86
--- /dev/null
+++ b/packages/svelte/ui/src/components/quote-rating-panel.svelte
@@ -0,0 +1,52 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/quote-split-parts.ts -->
+<!-- The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { QuoteExtras } from "../blocks/quote-split.types";
+  import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+  export type QuoteRatingPanelProps = {
+    extras: QuoteExtras;
+    labels: QuoteLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Rating from "../components/rating.svelte";
+  import { tpl } from "../utils";
+
+  let { extras, labels }: QuoteRatingPanelProps = $props();
+</script>
+
+<Stack
+  gap="6"
+  align="center"
+  class="rounded bg-card inset-ring inset-ring-border p-8 text-center"
+  data-testid="quote-rating"
+>
+  <Text size="5xl" weight="bold">
+    {extras.score}
+  </Text>
+  <Rating value={extras.rating} label={tpl(labels.rating, extras.rating)} size={20} />
+  <Text size="sm" class="text-muted-foreground">
+    {extras.reviews}
+  </Text>
+  <Box class="grid w-full grid-cols-2 gap-4 border-t border-border pt-6">
+    {#each extras.stats as s, i (s.id)}
+      {#if (i < 2)}
+        <Stack gap="0" align="center" data-testid="quote-stat">
+          <Text size="2xl" weight="semibold">
+            {s.value}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {s.label}
+          </Text>
+        </Stack>
+      {/if}
+    {/each}
+  </Box>
+</Stack>
diff --git a/packages/svelte/ui/src/components/quote-slot.svelte b/packages/svelte/ui/src/components/quote-slot.svelte
new file mode 100644
index 0000000..1de73cc
--- /dev/null
+++ b/packages/svelte/ui/src/components/quote-slot.svelte
@@ -0,0 +1,29 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/quote-split-parts.ts -->
+<!--
+  One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in
+  a box that can span grid rows.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Quote, QuoteLabels } from "../blocks/testimonial-grid.types";
+
+  export type QuoteSlotProps = {
+    q: Quote;
+    labels: QuoteLabels;
+    kind?: "card" | "plain";
+    layout?: "grid" | "single" | "stack";
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import QuoteCard from "../components/quote-card.svelte";
+
+  let { q, labels, kind = "card", layout = "grid", class: className }: QuoteSlotProps = $props();
+</script>
+
+<Box class={className} data-testid="quote">
+  <QuoteCard q={q} labels={labels} item={{ kind, avatar: "image", rating: "show", mark: "none" }} layout={layout} />
+</Box>
diff --git a/packages/svelte/ui/src/components/range-field.svelte b/packages/svelte/ui/src/components/range-field.svelte
new file mode 100644
index 0000000..5d293d5
--- /dev/null
+++ b/packages/svelte/ui/src/components/range-field.svelte
@@ -0,0 +1,85 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two
+  sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type RangeFieldProps = {
+    type: "number" | "date";
+    from: string;
+    to: string;
+    fromLabel: string;
+    toLabel: string;
+    min?: number;
+    max?: number;
+    class?: string;
+    onchange?: (from: string, to: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import Range from "../primitives/range/range.svelte";
+  import { cn } from "../utils";
+
+  let {
+    type,
+    from,
+    to,
+    fromLabel,
+    toLabel,
+    min,
+    max,
+    class: className,
+    onchange,
+  }: RangeFieldProps = $props();
+</script>
+
+<Box class={cn("flex flex-col gap-2", className)} data-slot="range-field">
+  {#if (((type as string) === "number") && (min != null) && (max != null) && (min < max))}
+    <Range
+      min={min}
+      max={max}
+      aria-label={fromLabel}
+      value={(((from as string) === "") ? (min == null ? undefined : String(min)) : from)}
+      data-testid="range-from"
+      oninput={(event: Event & { currentTarget: HTMLInputElement }) => onchange?.(event.currentTarget.value, to)}
+    />
+    <Range
+      min={min}
+      max={max}
+      aria-label={toLabel}
+      value={(((to as string) === "") ? (max == null ? undefined : String(max)) : to)}
+      data-testid="range-to"
+      oninput={(event: Event & { currentTarget: HTMLInputElement }) => onchange?.(from, event.currentTarget.value)}
+    />
+  {/if}
+  <Inline class="flex items-center gap-2">
+    <Input
+      type={type}
+      size="sm"
+      aria-label={fromLabel}
+      value={from}
+      min={(min == null ? undefined : String(min))}
+      max={(max == null ? undefined : String(max))}
+      oninput={(event: Event & { currentTarget: HTMLInputElement }) => onchange?.(event.currentTarget.value, to)}
+    />
+    <Inline class="text-muted-foreground">
+      {"–"}
+    </Inline>
+    <Input
+      type={type}
+      size="sm"
+      aria-label={toLabel}
+      value={to}
+      min={(min == null ? undefined : String(min))}
+      max={(max == null ? undefined : String(max))}
+      oninput={(event: Event & { currentTarget: HTMLInputElement }) => onchange?.(from, event.currentTarget.value)}
+    />
+  </Inline>
+</Box>
diff --git a/packages/svelte/ui/src/components/rating.svelte b/packages/svelte/ui/src/components/rating.svelte
new file mode 100644
index 0000000..ed4abfa
--- /dev/null
+++ b/packages/svelte/ui/src/components/rating.svelte
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  One to five stars (a review's grade, the average of a product). The value is read as the label; the stars
+  themselves are decoration.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type RatingProps = {
+    value: number;
+    label: string;
+    max?: number;
+    size?: number;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import { cn } from "../utils";
+
+  let { value, label, max = 5, size = 16, class: className }: RatingProps = $props();
+  const full = $derived(Math.round(Math.min(max, Math.max(0, value))));
+</script>
+
+<Box
+  class={cn("inline-flex items-center gap-0", className)}
+  role="img"
+  aria-label={label}
+  data-slot="rating"
+  data-value={full}
+>
+  {#each Array.from({ length: max }, (_, i) => i) as i (i)}
+    <LucideIcon name="star" size={size} class={((i < full) ? "fill-foreground text-foreground" : "text-border")} />
+  {/each}
+</Box>
diff --git a/packages/svelte/ui/src/components/region.svelte b/packages/svelte/ui/src/components/region.svelte
new file mode 100644
index 0000000..4ff9273
--- /dev/null
+++ b/packages/svelte/ui/src/components/region.svelte
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never
+  nested, so a nested landmark is its own component.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type RegionProps = {
+    tag: "header" | "nav" | "section" | "aside" | "footer" | "article" | "figure" | "main" | "search" | "div";
+    landmarkLabel?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+
+  let { tag, landmarkLabel, class: className, children }: RegionProps = $props();
+</script>
+
+<Block tag={tag} class={className} aria-label={landmarkLabel}>
+  {@render children?.()}
+</Block>
diff --git a/packages/svelte/ui/src/components/search-field.svelte b/packages/svelte/ui/src/components/search-field.svelte
new file mode 100644
index 0000000..2d6ef91
--- /dev/null
+++ b/packages/svelte/ui/src/components/search-field.svelte
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- A search input with a magnifier. `value` fires on every keystroke with the new text. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type SearchFieldProps = {
+    value: string;
+    placeholder?: string;
+    label: string;
+    class?: string;
+    onvalue?: (value: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import { cn } from "../utils";
+
+  let { value, placeholder, label, class: className, onvalue }: SearchFieldProps = $props();
+</script>
+
+<Box class={cn("relative min-w-44 flex-1", className)} role="search">
+  <LucideIcon name="search" size={16} class="pointer-events-none absolute top-2 left-3 text-muted-foreground" />
+  <Input
+    size="sm"
+    type="search"
+    placeholder={placeholder}
+    aria-label={label}
+    class="pr-3 pl-10"
+    value={value}
+    oninput={(event: Event & { currentTarget: HTMLInputElement }) => onvalue?.(event.currentTarget.value)}
+  />
+</Box>
diff --git a/packages/svelte/ui/src/components/search-palette.svelte b/packages/svelte/ui/src/components/search-palette.svelte
new file mode 100644
index 0000000..0febb22
--- /dev/null
+++ b/packages/svelte/ui/src/components/search-palette.svelte
@@ -0,0 +1,31 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!-- A search field with a search glyph and the keys that open it. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type SearchPaletteProps = {
+    label: string;
+    shortcut: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Input from "../primitives/input/input.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+
+  let { label, shortcut }: SearchPaletteProps = $props();
+</script>
+
+<Box class="relative w-full max-w-sm" data-testid="palette">
+  <LucideIcon name="search" size={16} class="pointer-events-none absolute top-2 left-3 text-muted-foreground" />
+  <Input type="search" size="sm" placeholder={label} aria-label={label} class="pr-12 pl-10" />
+  <Inline
+    class={"pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring " +
+      "inset-ring-border"}
+  >
+    {shortcut}
+  </Inline>
+</Box>
diff --git a/packages/svelte/ui/src/components/section-box.svelte b/packages/svelte/ui/src/components/section-box.svelte
new file mode 100644
index 0000000..776fd3c
--- /dev/null
+++ b/packages/svelte/ui/src/components/section-box.svelte
@@ -0,0 +1,25 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!-- The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper). -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type SectionBoxProps = {
+    boxed?: boolean;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Card from "../primitives/card/card.svelte";
+
+  let { boxed = false, children }: SectionBoxProps = $props();
+</script>
+
+{#if boxed}
+  <Card variant="muted">
+    {@render children?.()}
+  </Card>
+{:else}
+  {@render children?.()}
+{/if}
diff --git a/packages/svelte/ui/src/components/section-column.svelte b/packages/svelte/ui/src/components/section-column.svelte
new file mode 100644
index 0000000..375a35c
--- /dev/null
+++ b/packages/svelte/ui/src/components/section-column.svelte
@@ -0,0 +1,44 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure
+  (xs to 3xl) holds the column at that width, centred.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** SectionColumn: the classes of each value (shadcn/cva style). */
+  export const sectionColumnVariants = variants({
+    variants: {
+      measure: {
+        default: "",
+        landing: "",
+        fill: "",
+        xs: "mx-auto w-full max-w-xs",
+        sm: "mx-auto w-full max-w-sm",
+        md: "mx-auto w-full max-w-md",
+        lg: "mx-auto w-full max-w-lg",
+        xl: "mx-auto w-full max-w-xl",
+        "2xl": "mx-auto w-full max-w-2xl",
+        "3xl": "mx-auto w-full max-w-3xl",
+      },
+    },
+    defaultVariants: { measure: "default" },
+  });
+
+  export type SectionColumnProps = {
+    measure?: "default" | "landing" | "fill" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Stack from "../primitives/stack/stack.svelte";
+
+  let { measure = "default", children }: SectionColumnProps = $props();
+</script>
+
+<Stack gap="6" align="stretch" class={sectionColumnVariants({ measure: measure })}>
+  {@render children?.()}
+</Stack>
diff --git a/packages/svelte/ui/src/components/section-frame.svelte b/packages/svelte/ui/src/components/section-frame.svelte
new file mode 100644
index 0000000..4468600
--- /dev/null
+++ b/packages/svelte/ui/src/components/section-frame.svelte
@@ -0,0 +1,139 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body
+  (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts
+  the body in a card. Axes: layout, media side, tone, density, align.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { SectionHeading, HeadLink, SectionMedia } from "./section-frame.types";
+  import { variants } from "../utils";
+
+  /** SectionFrame: the classes of each value (shadcn/cva style). */
+  export const sectionFrameVariants = variants({
+    base: "w-full",
+    variants: {
+      tone: {
+        default: "",
+        muted: "bg-muted",
+        inverse: "bg-foreground text-background [&_.text-muted-foreground]:text-background/70",
+      },
+      density: {
+        roomy: "py-16",
+        default: "py-10",
+        compact: "py-6",
+        flush: "py-0",
+      },
+      align: {
+        start: "",
+        center: "text-center",
+      },
+    },
+    defaultVariants: { tone: "default", density: "default", align: "start" },
+  });
+
+  export type SectionFrameProps = {
+    id: string;
+    title?: string;
+    lead?: string;
+    heading?: SectionHeading;
+    action?: HeadLink;
+    layout?: "stack" | "split";
+    media?: SectionMedia;
+    boxed?: boolean;
+    tone?: "default" | "muted" | "inverse";
+    density?: "roomy" | "default" | "compact" | "flush";
+    align?: "start" | "center";
+    measure?: "default" | "landing" | "fill" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+    landmarkLabel?: string;
+    class?: string;
+    children?: Snippet;
+    aside?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Container from "../primitives/container/container.svelte";
+  import Grid from "../primitives/grid/grid.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import SectionBox from "../components/section-box.svelte";
+  import SectionColumn from "../components/section-column.svelte";
+  import SectionHeader from "../components/section-header.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let {
+    id,
+    title = "",
+    lead,
+    heading,
+    action,
+    layout = "stack",
+    media,
+    boxed = false,
+    tone = "default",
+    density = "default",
+    align = "start",
+    measure = "default",
+    landmarkLabel,
+    class: className,
+    children,
+    aside,
+  }: SectionFrameProps = $props();
+  const titleId = $derived(id + "-title");
+  const sectionTone = $derived(boxed ? "default" : tone);
+  const center = $derived((align as string) === "center");
+</script>
+
+<Block
+  tag="section"
+  class={cn(sectionFrameVariants({ tone: sectionTone, density: density, align: align }), className)}
+  aria-labelledby={(landmarkLabel ? undefined : (((title as string) !== "") ? titleId : undefined))}
+  aria-label={(landmarkLabel ?? (((title as string) === "") ? id : undefined))}
+  data-testid="section"
+  data-tone={tone}
+  data-density={density}
+>
+  <Container
+    class={
+      (measure as string) === "landing" ? cn("mx-auto w-full px-4", defaults.section.landing)
+      : (measure as string) === "fill" ? "w-full"
+      : "mx-auto w-full max-w-6xl px-4"
+    }
+    data-slot="container"
+  >
+    <SectionBox boxed={boxed}>
+      {#if ((layout as string) === "split")}
+        <Grid cols="1-2" class={cn("gap-8", ((media?.align === "start") ? "items-start" : "items-center"))}>
+          {#if (media?.show && (media?.side === "start"))}
+            <Box class="w-full" data-slot="media">
+              {@render aside?.()}
+            </Box>
+          {/if}
+          <Stack gap="6" align="stretch">
+            <SectionHeader titleId={titleId} title={title} heading={heading} action={action} lead={lead} center={center} />
+            {@render children?.()}
+          </Stack>
+          {#if (media?.show && (media?.side !== "start"))}
+            <Box class="w-full" data-slot="media">
+              {@render aside?.()}
+            </Box>
+          {/if}
+        </Grid>
+      {:else}
+        <SectionColumn measure={measure}>
+          <SectionHeader titleId={titleId} title={title} heading={heading} action={action} lead={lead} center={center} />
+          {@render children?.()}
+          {#if media?.show}
+            <Box class="w-full" data-slot="media">
+              {@render aside?.()}
+            </Box>
+          {/if}
+        </SectionColumn>
+      {/if}
+    </SectionBox>
+  </Container>
+</Block>
diff --git a/packages/svelte/ui/src/components/section-frame.types.ts b/packages/svelte/ui/src/components/section-frame.types.ts
new file mode 100644
index 0000000..3502204
--- /dev/null
+++ b/packages/svelte/ui/src/components/section-frame.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+
+export type SectionHeading = {
+  /** heading level */
+  level?: 1 | 2;
+  /** display: an oversized heading */
+  scale?: "default" | "display";
+  /** a short pill above the heading (e.g. New) */
+  badge?: string;
+};
+
+export type HeadLink = {
+  /** text of the link (View all, Browse all); none: no link */
+  label?: string;
+  /** href of the link; none: no link */
+  href?: string;
+};
+
+export type SectionMedia = {
+  /** the `aside` slot is shown */
+  show?: boolean;
+  /** side of the media in the split layout */
+  side?: "end" | "start";
+  /** split layout: the body and the media centred on each other, or both from the top */
+  align?: "center" | "start";
+};
diff --git a/packages/svelte/ui/src/components/section-head.svelte b/packages/svelte/ui/src/components/section-head.svelte
new file mode 100644
index 0000000..aa37a05
--- /dev/null
+++ b/packages/svelte/ui/src/components/section-head.svelte
@@ -0,0 +1,88 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button
+  (aria-expanded, the toggle event).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** SectionHead: the classes of each value (shadcn/cva style). */
+  export const sectionHeadVariants = variants({
+    base: "flex items-center justify-between pr-4 pl-4",
+    variants: {
+      size: {
+        default: "h-8 py-2 text-xs font-semibold",
+        lg: "h-12 py-2 text-sm font-bold",
+      },
+    },
+    defaultVariants: { size: "default" },
+  });
+
+  export type SectionHeadProps = {
+    size?: "default" | "lg";
+    expanded?: boolean;
+    controls?: string;
+    class?: string;
+    children?: Snippet;
+    right?: Snippet;
+    ontoggle?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import ButtonPlain from "../primitives/button-plain/button-plain.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import { cn } from "../utils";
+
+  let {
+    size = "default",
+    expanded,
+    controls,
+    class: className,
+    children,
+    right,
+    ontoggle,
+  }: SectionHeadProps = $props();
+  const cls = $derived(
+    cn(
+      sectionHeadVariants({ size: size }),
+      "rounded text-foreground in-data-[nav=collapsed]:hidden",
+      className,
+    )
+  );
+</script>
+
+{#if (expanded != null)}
+  <ButtonPlain
+    type="button"
+    class={cn(cls, "w-full text-left")}
+    aria-expanded={expanded}
+    aria-controls={controls}
+    data-slot="section-head"
+    data-expanded={expanded}
+    onclick={() => ontoggle?.()}
+  >
+    <Inline data-slot="section-head-title">
+      {@render children?.()}
+    </Inline>
+    {#if right}
+      <Inline class="flex items-center gap-2" data-slot="section-head-right">
+        {@render right?.()}
+      </Inline>
+    {/if}
+  </ButtonPlain>
+{:else}
+  <Box class={cls} data-slot="section-head">
+    <Inline data-slot="section-head-title">
+      {@render children?.()}
+    </Inline>
+    {#if right}
+      <Inline class="flex items-center gap-2" data-slot="section-head-right">
+        {@render right?.()}
+      </Inline>
+    {/if}
+  </Box>
+{/if}
diff --git a/packages/svelte/ui/src/components/section-header.svelte b/packages/svelte/ui/src/components/section-header.svelte
new file mode 100644
index 0000000..3c98406
--- /dev/null
+++ b/packages/svelte/ui/src/components/section-header.svelte
@@ -0,0 +1,97 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an
+  optional lead. No wrapper: its parts are children of the section stack.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { SectionHeading, HeadLink } from "./section-frame.types";
+
+  export type SectionHeaderProps = {
+    titleId: string;
+    title?: string;
+    heading?: SectionHeading;
+    action?: HeadLink;
+    lead?: string;
+    center?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let { titleId, title = "", heading, action, lead, center = false }: SectionHeaderProps = $props();
+  const level = $derived(heading?.level ?? 2);
+  const scale = $derived(heading?.scale ?? "default");
+  const hasAction = $derived(action?.label && action?.href);
+</script>
+
+{#if heading?.badge}
+  <Badge variant="outline" size="lg" class={(center ? "mx-auto w-fit" : "w-fit")} data-testid="section-badge">
+    {heading?.badge}
+  </Badge>
+{/if}
+{#if (((title as string) !== "") && hasAction)}
+  <Group gap="4" align="center" justify="between" class="w-full flex-wrap">
+    <Title
+      as={level}
+      size={((level === 1) ? "5xl" : "xl")}
+      weight="semibold"
+      class={
+        (scale as string) === "display" ? "text-6xl tracking-tight md:text-8xl"
+        : level === 1 ? "leading-tight"
+        : "leading-7"
+      }
+      id={titleId}
+    >
+      {title}
+    </Title>
+    <Link
+      href={action?.href}
+      variant="default"
+      class={cn(defaults.text.tiny, "shrink-0 font-medium leading-5")}
+      data-testid="section-action"
+    >
+      {action?.label}
+    </Link>
+  </Group>
+{/if}
+{#if (((title as string) !== "") && !hasAction)}
+  <Title
+    as={level}
+    size={((level === 1) ? "5xl" : "xl")}
+    weight="semibold"
+    class={
+      (scale as string) === "display" ? "text-6xl tracking-tight md:text-8xl"
+      : level === 1 ? "leading-tight"
+      : "leading-7"
+    }
+    id={titleId}
+  >
+    {title}
+  </Title>
+{/if}
+{#if (((title as string) === "") && hasAction)}
+  <Group gap="4" align="center" justify="end" class="w-full">
+    <Link
+      href={action?.href}
+      variant="default"
+      class={cn(defaults.text.tiny, "shrink-0 font-medium leading-5")}
+      data-testid="section-action"
+    >
+      {action?.label}
+    </Link>
+  </Group>
+{/if}
+{#if lead}
+  <Text size="base" class={cn("max-w-2xl text-muted-foreground", (center ? "mx-auto" : ""))}>
+    {lead}
+  </Text>
+{/if}
diff --git a/packages/svelte/ui/src/components/shell-content.svelte b/packages/svelte/ui/src/components/shell-content.svelte
new file mode 100644
index 0000000..aa5b1ad
--- /dev/null
+++ b/packages/svelte/ui/src/components/shell-content.svelte
@@ -0,0 +1,129 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shell-parts.ts -->
+<!--
+  The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px
+  grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one),
+  list (a toolbar over a card of rows). The cards are hidden from assistive technology.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type ShellContentProps = {
+    title: string;
+    titleId: string;
+    level?: 1 | 2;
+    content?: "grid" | "split" | "list";
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import { cn } from "../utils";
+
+  let { title, titleId, level = 2, content = "grid" }: ShellContentProps = $props();
+</script>
+
+<Stack gap="6" align="stretch" class="flex-1 p-6" data-testid="content">
+  <Group gap="4" align="center" justify="between">
+    <Title as={level} size="2xl" weight="semibold" id={titleId}>
+      {title}
+    </Title>
+    <Box class="h-10 w-32 rounded bg-muted" aria-hidden="true" />
+  </Group>
+  <Box class="flex flex-1 flex-col gap-4" aria-hidden="true" data-testid="panels">
+    {#if ((content as string) === "grid")}
+      <Box class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        <Box
+          class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+          data-testid="panel"
+        >
+          <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+          <Box class={cn("rounded bg-muted", "flex-1")} />
+        </Box>
+        <Box
+          class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+          data-testid="panel"
+        >
+          <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+          <Box class={cn("rounded bg-muted", "flex-1")} />
+        </Box>
+        <Box
+          class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+          data-testid="panel"
+        >
+          <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+          <Box class={cn("rounded bg-muted", "flex-1")} />
+        </Box>
+        <Box
+          class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")}
+          data-testid="panel"
+        >
+          <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+          <Box class={cn("rounded bg-muted", "flex-1")} />
+        </Box>
+      </Box>
+      <Box
+        class={cn(
+          "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+          "min-h-64 flex-1"
+        )}
+        data-testid="panel"
+      >
+        <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+        <Box class={cn("rounded bg-muted", "flex-1")} />
+      </Box>
+    {/if}
+    {#if ((content as string) === "split")}
+      <Box class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <Box
+          class={cn(
+            "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+            "h-64 lg:col-span-2"
+          )}
+          data-testid="panel"
+        >
+          <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+          <Box class={cn("rounded bg-muted", "flex-1")} />
+        </Box>
+        <Box
+          class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-64")}
+          data-testid="panel"
+        >
+          <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+          <Box class={cn("rounded bg-muted", "flex-1")} />
+        </Box>
+      </Box>
+      <Box
+        class={cn(
+          "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+          "min-h-40 flex-1"
+        )}
+        data-testid="panel"
+      >
+        <Box class={cn("rounded bg-muted", "h-4 w-1/3")} />
+        <Box class={cn("rounded bg-muted", "flex-1")} />
+      </Box>
+    {/if}
+    {#if ((content as string) === "list")}
+      <Group gap="4" align="center">
+        <Box class={cn("rounded bg-muted", "h-10 w-64")} />
+        <Box class={cn("rounded bg-muted", "h-10 w-24")} />
+        <Box class={cn("rounded bg-muted", "ml-auto h-10 w-32")} />
+      </Group>
+      <Box
+        class={cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "flex-1")}
+        data-testid="panel"
+      >
+        <Box class={cn("rounded bg-muted", "h-8")} />
+        <Box class={cn("rounded bg-muted", "h-8")} />
+        <Box class={cn("rounded bg-muted", "h-8")} />
+        <Box class={cn("rounded bg-muted", "h-8")} />
+        <Box class={cn("rounded bg-muted", "h-8")} />
+        <Box class={cn("rounded bg-muted", "h-8")} />
+      </Box>
+    {/if}
+  </Box>
+</Stack>
diff --git a/packages/svelte/ui/src/components/shell-footer.svelte b/packages/svelte/ui/src/components/shell-footer.svelte
new file mode 100644
index 0000000..5757219
--- /dev/null
+++ b/packages/svelte/ui/src/components/shell-footer.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shell-parts.ts -->
+<!--
+  The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the
+  whole shell (full).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+  export type ShellFooterProps = {
+    nav: ShellNav;
+    place?: "full" | "inset";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let { nav, place = "full", landmarkLabel }: ShellFooterProps = $props();
+</script>
+
+<Block
+  tag="footer"
+  class={cn(
+    "flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4",
+    (((place as string) === "full") ? "bg-card" : "")
+  )}
+  data-testid="footer"
+  data-place={place}
+  aria-label={landmarkLabel}
+>
+  <Text size="xs" class="text-muted-foreground">
+    {nav.copyright}
+  </Text>
+  {#if ((nav.footer?.length ?? 0) > 0)}
+    <NavBlock
+      label={
+        landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.footerLabel, landmarkLabel))
+        : nav.footerLabel
+      }
+    >
+      <List class="m-0 flex list-none items-center gap-4 p-0">
+        {#each nav.footer as f (f.id)}
+          <ListItem>
+            <MenuEntry href={f.href} class="text-xs text-muted-foreground" variant="muted" size="sm">
+              {f.name}
+            </MenuEntry>
+          </ListItem>
+        {/each}
+      </List>
+    </NavBlock>
+  {/if}
+</Block>
diff --git a/packages/svelte/ui/src/components/shell-sidebar.svelte b/packages/svelte/ui/src/components/shell-sidebar.svelte
new file mode 100644
index 0000000..b110e89
--- /dev/null
+++ b/packages/svelte/ui/src/components/shell-sidebar.svelte
@@ -0,0 +1,148 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shell-parts.ts -->
+<!--
+  The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read),
+  collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a
+  panel of the current section's links). side puts it at the start or the end.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+  export type ShellSidebarProps = {
+    nav: ShellNav;
+    mode?: "wide" | "rail" | "collapsed" | "twolevel" | "none";
+    side?: "start" | "end";
+    brand?: "show" | "hide";
+    landmarkLabel?: string;
+    ontoggle?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import ButtonPlain from "../primitives/button-plain/button-plain.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let {
+    nav,
+    mode = "wide",
+    side = "start",
+    brand = "show",
+    landmarkLabel,
+    ontoggle,
+  }: ShellSidebarProps = $props();
+  const named = $derived((mode as string) === "wide");
+</script>
+
+<Block
+  tag="aside"
+  class={cn(
+    "flex shrink-0 bg-card",
+    (
+      (side as string) === "end" ? "flex-row-reverse border-l border-border"
+      : "border-r border-border"
+    )
+  )}
+  aria-label={(landmarkLabel ?? nav.label)}
+  data-testid="sidebar"
+  data-mode={mode}
+>
+  <Box class={cn("flex flex-col gap-6 py-4", (named ? "w-64 px-4" : "w-16 items-center px-2"))}>
+    {#if ((brand as string) === "show")}
+      <Group gap="2" align="center" class="shrink-0" data-testid="brand">
+        <LucideIcon name="layers" size={24} />
+        <Text size="base" weight="bold" class={(named ? "" : "sr-only")}>
+          {nav.brand}
+        </Text>
+      </Group>
+    {/if}
+    {#if ((nav.links?.length ?? 0) > 0)}
+      <NavBlock
+        label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.label, landmarkLabel)) : nav.label)}
+        class="flex-1"
+      >
+        <List class="m-0 flex list-none flex-col gap-2 p-0" data-testid="items">
+          {#each nav.links as l (l.id)}
+            <ListItem>
+              <MenuEntry
+                href={l.href}
+                class={cn(
+                  "flex items-center gap-4 rounded py-2 text-sm",
+                  (named ? "px-4" : "justify-center px-2"),
+                  ((l.id === nav.current) ? "bg-muted font-medium" : "")
+                )}
+                current={(l.id === nav.current)}
+                size="sm"
+                testid="item"
+              >
+                <LucideIcon name={l.icon} size={16} />
+                <Inline class={(named ? "" : "sr-only")}>
+                  {l.name}
+                </Inline>
+              </MenuEntry>
+            </ListItem>
+          {/each}
+        </List>
+      </NavBlock>
+    {/if}
+    {#if ((mode as string) === "collapsed")}
+      <ButtonPlain
+        type="button"
+        class="inline-flex size-10 items-center justify-center rounded text-muted-foreground"
+        aria-label={nav.expand}
+        aria-expanded={(((mode as string) === "wide") ? "true" : "false")}
+        data-testid="toggle"
+        onclick={() => ontoggle?.()}
+      >
+        <LucideIcon name="panel-left" size={20} />
+      </ButtonPlain>
+    {/if}
+  </Box>
+  {#if (((mode as string) === "twolevel") && ((nav.sub?.length ?? 0) > 0))}
+    <Box
+      class={cn(
+        "flex w-56 flex-col gap-4 px-4 py-6",
+        (((side as string) === "end") ? "border-r border-border" : "border-l border-border")
+      )}
+      data-testid="subnav"
+    >
+      <Text size="sm" weight="semibold" class="px-4">
+        {nav.subTitle}
+      </Text>
+      <NavBlock label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.subTitle, landmarkLabel)) : nav.subTitle)}>
+        <List class="m-0 flex list-none flex-col gap-2 p-0">
+          {#each nav.sub as s (s.id)}
+            <ListItem>
+              <MenuEntry
+                href={s.href}
+                class={cn(
+                  "flex items-center gap-4 rounded py-2 text-sm",
+                  (true ? "px-4" : "justify-center px-2"),
+                  ((s.id === nav.subCurrent) ? "bg-muted font-medium" : "")
+                )}
+                current={(s.id === nav.subCurrent)}
+                size="sm"
+                testid="item"
+              >
+                <LucideIcon name={s.icon} size={16} />
+                <Inline class={(true ? "" : "sr-only")}>
+                  {s.name}
+                </Inline>
+              </MenuEntry>
+            </ListItem>
+          {/each}
+        </List>
+      </NavBlock>
+    </Box>
+  {/if}
+</Block>
diff --git a/packages/svelte/ui/src/components/shell-topbar.svelte b/packages/svelte/ui/src/components/shell-topbar.svelte
new file mode 100644
index 0000000..b828528
--- /dev/null
+++ b/packages/svelte/ui/src/components/shell-topbar.svelte
@@ -0,0 +1,102 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shell-parts.ts -->
+<!--
+  The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar),
+  an optional search field, and the signed-in person.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+  export type ShellTopbarProps = {
+    nav: ShellNav;
+    brand?: "show" | "hide";
+    links?: "show" | "hide";
+    search?: "show" | "hide";
+    landmarkLabel?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import MediaFrame from "../components/media-frame.svelte";
+  import MenuEntry from "../components/menu-entry.svelte";
+  import NavBlock from "../components/nav-block.svelte";
+  import SearchPalette from "../components/search-palette.svelte";
+  import { cn, tpl, uniqLabel } from "../utils";
+
+  let { nav, brand = "show", links = "hide", search = "show", landmarkLabel }: ShellTopbarProps = $props();
+</script>
+
+<Block
+  tag="header"
+  class="flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6"
+  data-testid="topbar"
+  aria-label={landmarkLabel}
+>
+  {#if ((brand as string) === "show")}
+    <Group gap="2" align="center" class="shrink-0" data-testid="brand">
+      <LucideIcon name="layers" size={24} />
+      <Text size="base" weight="bold" class={(true ? "" : "sr-only")}>
+        {nav.brand}
+      </Text>
+    </Group>
+  {/if}
+  {#if (((links as string) === "show") && ((nav.links?.length ?? 0) > 0))}
+    <NavBlock
+      label={(landmarkLabel ? uniqLabel(tpl("{0}, {1}", nav.label, landmarkLabel)) : nav.label)}
+      class="hidden lg:block"
+    >
+      <List class="m-0 flex list-none items-center gap-2 p-0">
+        {#each nav.links as l (l.id)}
+          <ListItem>
+            <MenuEntry
+              href={l.href}
+              class={cn(
+                "flex items-center gap-4 rounded py-2 text-sm",
+                (true ? "px-4" : "justify-center px-2"),
+                ((l.id === nav.current) ? "bg-muted font-medium" : "")
+              )}
+              current={(l.id === nav.current)}
+              size="sm"
+              testid="item"
+            >
+              <LucideIcon name={l.icon} size={16} />
+              <Inline class={(true ? "" : "sr-only")}>
+                {l.name}
+              </Inline>
+            </MenuEntry>
+          </ListItem>
+        {/each}
+      </List>
+    </NavBlock>
+  {/if}
+  {#if ((search as string) === "show")}
+    {#if ((links as string) === "show")}
+      <Box class="ml-auto hidden w-64 shrink-0 xl:block">
+        <SearchPalette label={nav.search} shortcut={nav.shortcut} />
+      </Box>
+    {:else}
+      <SearchPalette label={nav.search} shortcut={nav.shortcut} />
+    {/if}
+  {/if}
+  <Group
+    gap="4"
+    align="center"
+    class={
+      ((links as string) === "show") && ((search as string) === "show") ? "shrink-0"
+      : "ml-auto shrink-0"
+    }
+    data-testid="user"
+  >
+    <LucideIcon name="bell" size={20} class="text-muted-foreground" />
+    <MediaFrame alt={nav.userName} ratio="1/1" class="size-8 shrink-0 rounded-full" />
+  </Group>
+</Block>
diff --git a/packages/svelte/ui/src/components/sidebar-panel.svelte b/packages/svelte/ui/src/components/sidebar-panel.svelte
new file mode 100644
index 0000000..054cc0e
--- /dev/null
+++ b/packages/svelte/ui/src/components/sidebar-panel.svelte
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!-- The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** SidebarPanel: the classes of each value (shadcn/cva style). */
+  export const sidebarPanelVariants = variants({
+    base: "flex shrink-0 flex-col",
+    variants: {
+      variant: {
+        chat: "w-68 gap-2 pt-6 pr-4 pb-6 pl-4",
+        creator: "w-62 justify-between gap-4 p-4",
+      },
+    },
+    defaultVariants: { variant: "chat" },
+  });
+
+  export type SidebarPanelProps = {
+    variant?: "chat" | "creator";
+    landmarkLabel?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Block from "../primitives/block/block.svelte";
+  import { cn } from "../utils";
+
+  let { variant, landmarkLabel, class: className, children }: SidebarPanelProps = $props();
+</script>
+
+<Block
+  tag="aside"
+  class={cn(sidebarPanelVariants({ variant: variant }), className)}
+  data-slot="sidebar-panel"
+  data-variant={(variant ?? "chat")}
+  aria-label={landmarkLabel}
+>
+  {@render children?.()}
+</Block>
diff --git a/packages/svelte/ui/src/components/slot-grid.svelte b/packages/svelte/ui/src/components/slot-grid.svelte
new file mode 100644
index 0000000..7acaa55
--- /dev/null
+++ b/packages/svelte/ui/src/components/slot-grid.svelte
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!--
+  Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck
+  through. One radio group (`name`) across all days. Static markup.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Day } from "./slot-grid.types";
+
+  export type SlotGridProps = {
+    days: Day[];
+    name: string;
+    item?: "card" | "plain";
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import Label from "../primitives/label/label.svelte";
+  import Radio from "../primitives/radio/radio.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { cn, tpl } from "../utils";
+
+  let { days, name, item = "card" }: SlotGridProps = $props();
+</script>
+
+<Stack gap="4" align="stretch" data-testid="days">
+  {#each days as d (d.id)}
+    <Stack
+      gap="4"
+      class={
+        (item as string) === "card" ? "rounded bg-card inset-ring inset-ring-border p-4"
+        : "border-b border-border pb-4"
+      }
+      data-testid="day"
+    >
+      <Group gap="4" align="baseline" justify="between" class="flex-wrap">
+        <Text size="sm" weight="semibold">
+          {d.title}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {d.note}
+        </Text>
+      </Group>
+      <Box class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+        {#each d.slots as s (s)}
+          <Label
+            class={"flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted " +
+              "has-checked:inset-ring-foreground"}
+          >
+            <Radio name={name} value={tpl("{0} {1}", d.id, s)} />
+            <Inline>
+              {s}
+            </Inline>
+          </Label>
+        {/each}
+        {#each d.closed as s (s)}
+          <Label
+            class={cn(
+              "flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted " +
+                "has-checked:inset-ring-foreground",
+              "text-muted-foreground line-through"
+            )}
+          >
+            <Radio name={name} value={tpl("{0} {1}", d.id, s)} disabled={true} />
+            <Inline>
+              {s}
+            </Inline>
+          </Label>
+        {/each}
+      </Box>
+    </Stack>
+  {/each}
+</Stack>
diff --git a/packages/svelte/ui/src/components/slot-grid.types.ts b/packages/svelte/ui/src/components/slot-grid.types.ts
new file mode 100644
index 0000000..b369480
--- /dev/null
+++ b/packages/svelte/ui/src/components/slot-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Day = {
+  id: string;
+  title: string;
+  note: string;
+  slots: string[];
+  closed: string[];
+};
diff --git a/packages/svelte/ui/src/components/stat-figure.svelte b/packages/svelte/ui/src/components/stat-figure.svelte
new file mode 100644
index 0000000..7d91a15
--- /dev/null
+++ b/packages/svelte/ui/src/components/stat-figure.svelte
@@ -0,0 +1,47 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/marketing.ts -->
+<!-- One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Stat } from "../blocks/stats-band.types";
+
+  export type StatFigureProps = {
+    stat: Stat;
+    item?: "plain" | "card" | "icon";
+    align?: "start" | "center";
+  };
+</script>
+
+<script lang="ts">
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import StatTile from "../components/stat-tile.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let { stat, item = "plain", align = "center" }: StatFigureProps = $props();
+</script>
+
+{#if ((item as string) === "card")}
+  <StatTile label={stat.label} value={stat.value} icon={stat.icon} hint={stat.hint} />
+{:else}
+  <Stack
+    gap="6"
+    align={(((align as string) === "center") ? "center" : "start")}
+    class={cn((((align as string) === "center") ? "text-center" : ""), defaults.stats.column)}
+    data-testid="item"
+  >
+    {#if ((item as string) === "icon")}
+      <LucideIcon name={stat.icon} size={24} />
+    {/if}
+    <Stack gap="2" align={(((align as string) === "center") ? "center" : "start")}>
+      <Text size="5xl" weight="medium" class={cn("flex items-center", defaults.stats.figure)}>
+        {stat.value}
+      </Text>
+      <Text size="sm" weight="semibold" class="leading-5 text-muted-foreground">
+        {stat.label}
+      </Text>
+    </Stack>
+  </Stack>
+{/if}
diff --git a/packages/svelte/ui/src/components/stat-tile.svelte b/packages/svelte/ui/src/components/stat-tile.svelte
new file mode 100644
index 0000000..d8be460
--- /dev/null
+++ b/packages/svelte/ui/src/components/stat-tile.svelte
@@ -0,0 +1,74 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the
+  tile is a plain figure.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type StatTileProps = {
+    label: string;
+    value: string | number;
+    icon: string;
+    href?: string;
+    hint?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import IconBadge from "../primitives/iconbadge/icon-badge.svelte";
+  import Link from "../primitives/link/link.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+  import Text from "../primitives/text/text.svelte";
+
+  let { label, value, icon, href, hint }: StatTileProps = $props();
+</script>
+
+<Box class="min-w-0">
+  {#if href}
+    <Link
+      href={href}
+      variant="block"
+      class={"flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border " +
+        "hover:bg-muted"}
+    >
+      <Box class="flex items-center justify-between gap-2">
+        <Text class="m-0 text-xs font-bold text-muted-foreground">
+          {label}
+        </Text>
+        <IconBadge size="sm">
+          <LucideIcon name={icon} size={16} />
+        </IconBadge>
+      </Box>
+      <Text size="2xl" weight="bold" class="m-0 leading-8">
+        {value}
+      </Text>
+      {#if hint}
+        <Text class="m-0 text-xs font-medium text-muted-foreground">
+          {hint}
+        </Text>
+      {/if}
+    </Link>
+  {:else}
+    <Box class="flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border">
+      <Box class="flex items-center justify-between gap-2">
+        <Text class="m-0 text-xs font-bold text-muted-foreground">
+          {label}
+        </Text>
+        <IconBadge size="sm">
+          <LucideIcon name={icon} size={16} />
+        </IconBadge>
+      </Box>
+      <Text size="2xl" weight="bold" class="m-0 leading-8">
+        {value}
+      </Text>
+      {#if hint}
+        <Text class="m-0 text-xs font-medium text-muted-foreground">
+          {hint}
+        </Text>
+      {/if}
+    </Box>
+  {/if}
+</Box>
diff --git a/packages/svelte/ui/src/components/story-dots.svelte b/packages/svelte/ui/src/components/story-dots.svelte
new file mode 100644
index 0000000..61c53c9
--- /dev/null
+++ b/packages/svelte/ui/src/components/story-dots.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/story-tabs-parts.ts -->
+<!-- One dot per step of StoryTabs; the dot of the active step is filled. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Milestone } from "../blocks/milestone-timeline.types";
+  import type { StoryLabels } from "../blocks/story-tabs.types";
+
+  export type StoryDotsProps = {
+    steps: Milestone[];
+    active: string;
+  };
+</script>
+
+<script lang="ts">
+  import Group from "../primitives/group/group.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import { cn } from "../utils";
+
+  let { steps, active }: StoryDotsProps = $props();
+</script>
+
+<Group gap="2" align="center">
+  {#each steps as s (s.id)}
+    <Inline
+      class={cn("size-2 rounded-full", ((s.id === active) ? "bg-primary" : "bg-border"))}
+      data-testid="story-dot"
+    />
+  {/each}
+</Group>
diff --git a/packages/svelte/ui/src/components/story-panel.svelte b/packages/svelte/ui/src/components/story-panel.svelte
new file mode 100644
index 0000000..09fd643
--- /dev/null
+++ b/packages/svelte/ui/src/components/story-panel.svelte
@@ -0,0 +1,57 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/story-tabs-parts.ts -->
+<!--
+  The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag
+  in a muted box.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Milestone } from "../blocks/milestone-timeline.types";
+  import type { StoryLabels } from "../blocks/story-tabs.types";
+
+  export type StoryPanelProps = {
+    s: Milestone;
+    index: number;
+    total: number;
+    labels: StoryLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import { tpl } from "../utils";
+
+  let { s, index, total, labels }: StoryPanelProps = $props();
+</script>
+
+<Stack
+  gap="4"
+  align="stretch"
+  class="rounded bg-card inset-ring inset-ring-border p-6"
+  data-testid="story-panel"
+>
+  <Group gap="2" align="center">
+    <Badge variant="secondary" size="sm">
+      {s.date}
+    </Badge>
+    <Text size="xs" class="text-muted-foreground">
+      {tpl(labels.step, ((index + 1) == null ? undefined : String((index + 1))), (total == null ? undefined : String(total)))}
+    </Text>
+  </Group>
+  <Title as={3} size="xl" weight="semibold">
+    {s.title}
+  </Title>
+  <Text size="sm" class="text-muted-foreground">
+    {s.text}
+  </Text>
+  <Box class="rounded bg-muted p-4">
+    <Text size="sm" weight="semibold">
+      {s.tag}
+    </Text>
+  </Box>
+</Stack>
diff --git a/packages/svelte/ui/src/components/switcher-item.svelte b/packages/svelte/ui/src/components/switcher-item.svelte
new file mode 100644
index 0000000..b29937c
--- /dev/null
+++ b/packages/svelte/ui/src/components/switcher-item.svelte
@@ -0,0 +1,74 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!-- One item of a Switcher (default or active). Pass the same size and layout as the Switcher. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** SwitcherItem: the classes of each value (shadcn/cva style). */
+  export const switcherItemVariants = variants({
+    base:
+      "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-bold text-muted-foreground inset-ring " +
+      "inset-ring-transparent rounded",
+    variants: {
+      size: {
+        sm: "h-6 gap-1 px-3 text-xs",
+        default: "h-8 gap-2 px-4 text-sm",
+        lg: "h-10 gap-2 px-5 text-sm",
+      },
+      state: {
+        default: "",
+        active: "bg-background text-foreground inset-ring-border",
+      },
+      layout: {
+        text: "",
+        icon: "[&>svg]:size-4",
+      },
+    },
+    defaultVariants: { size: "default", state: "default", layout: "text" },
+    compoundVariants: [
+      { layout: "icon", size: "sm", class: "w-6 px-0" },
+      { layout: "icon", size: "default", class: "w-8 px-0" },
+      { layout: "icon", size: "lg", class: "w-10 px-0" },
+    ],
+  });
+
+  export type SwitcherItemProps = {
+    active?: boolean;
+    size?: "sm" | "default" | "lg";
+    layout?: "text" | "icon";
+    class?: string;
+    children?: Snippet;
+    onclick?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import ButtonPlain from "../primitives/button-plain/button-plain.svelte";
+  import { cn } from "../utils";
+
+  let {
+    active = false,
+    size = "default",
+    layout = "text",
+    class: className,
+    children,
+    onclick,
+  }: SwitcherItemProps = $props();
+</script>
+
+<ButtonPlain
+  type="button"
+  role="tab"
+  class={cn(
+    switcherItemVariants({ size: size, layout: layout, state: (active ? "active" : "default") }),
+    className
+  )}
+  aria-selected={active}
+  tabindex={(active ? 0 : -1)}
+  data-slot="switcher-item"
+  data-state={(active ? "active" : "default")}
+  onclick={() => onclick?.()}
+>
+  {@render children?.()}
+</ButtonPlain>
diff --git a/packages/svelte/ui/src/components/switcher.svelte b/packages/svelte/ui/src/components/switcher.svelte
new file mode 100644
index 0000000..e6efb70
--- /dev/null
+++ b/packages/svelte/ui/src/components/switcher.svelte
@@ -0,0 +1,52 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down
+  through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown
+  (horizontal, activate).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../utils";
+
+  /** Switcher: the classes of each value (shadcn/cva style). */
+  export const switcherVariants = variants({
+    base: "inline-flex max-w-full items-center gap-1 overflow-x-auto bg-muted inset-ring inset-ring-border rounded",
+    variants: {
+      size: {
+        sm: "h-8 p-1",
+        default: "h-10 p-1",
+        lg: "h-12 p-1",
+      },
+      layout: {
+        text: "",
+        icon: "gap-0",
+      },
+    },
+    defaultVariants: { size: "default", layout: "text" },
+  });
+
+  export type SwitcherProps = {
+    size?: "sm" | "default" | "lg";
+    layout?: "text" | "icon";
+    label?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import { cn } from "../utils";
+
+  let { size = "default", layout = "text", label, class: className, children }: SwitcherProps = $props();
+</script>
+
+<Box
+  class={cn(switcherVariants({ size: size, layout: layout }), className)}
+  role="tablist"
+  aria-label={label}
+  data-slot="switcher"
+>
+  {@render children?.()}
+</Box>
diff --git a/packages/svelte/ui/src/components/table-toolbar.svelte b/packages/svelte/ui/src/components/table-toolbar.svelte
new file mode 100644
index 0000000..2fbf17b
--- /dev/null
+++ b/packages/svelte/ui/src/components/table-toolbar.svelte
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  The toolbar above a table: search and filter controls on the left (children), the actions on the right
+  (`actions`). One tab stop group (role toolbar).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type TableToolbarProps = {
+    label: string;
+    class?: string;
+    children?: Snippet;
+    actions?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import { cn } from "../utils";
+
+  let { label, class: className, children, actions }: TableToolbarProps = $props();
+</script>
+
+<Box
+  class={cn("flex flex-wrap items-center justify-between gap-2", className)}
+  role="toolbar"
+  aria-label={label}
+  data-slot="table-toolbar"
+>
+  <Inline class="flex min-w-0 flex-wrap items-center gap-2">
+    {@render children?.()}
+  </Inline>
+  <Inline class="flex flex-wrap items-center gap-2">
+    {@render actions?.()}
+  </Inline>
+</Box>
diff --git a/packages/svelte/ui/src/components/timeline.svelte b/packages/svelte/ui/src/components/timeline.svelte
new file mode 100644
index 0000000..5e4906a
--- /dev/null
+++ b/packages/svelte/ui/src/components/timeline.svelte
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time.
+  Newest first or oldest first is the caller's order.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { TimelineItem } from "./timeline.types";
+
+  export type TimelineProps = {
+    items: TimelineItem[];
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import Box from "../primitives/box/box.svelte";
+  import Inline from "../primitives/inline/inline.svelte";
+  import List from "../primitives/list/list.svelte";
+  import ListItem from "../primitives/list/list-item.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { at, cn } from "../utils";
+
+  const TONE_DOT: Record<string, string> = {
+    "gray": "bg-muted-foreground",
+    "green": "bg-emerald-500",
+    "blue": "bg-blue-500",
+    "amber": "bg-amber-500",
+    "red": "bg-red-500",
+  };
+  let { items, class: className }: TimelineProps = $props();
+</script>
+
+<Box class={cn("min-w-0", className)} data-slot="timeline">
+  <List class="m-0 flex list-none flex-col p-0">
+    {#each items as item, i (item.id)}
+      <ListItem class="relative flex min-w-0 gap-4 pb-4 last:pb-0" data-event={item.id}>
+        <Box class="relative flex w-2 shrink-0 justify-center">
+          {#if (i < ((items?.length ?? 0) - 1))}
+            <Inline class="absolute top-4 -bottom-0 w-px bg-border" />
+          {/if}
+          <Inline class={cn("mt-2 size-2 rounded-full", at(TONE_DOT, (item.tone ?? "gray")))} />
+        </Box>
+        <Box class="flex min-w-0 flex-1 flex-col gap-0">
+          <Box class="flex flex-wrap items-baseline justify-between gap-x-4">
+            <Text class="m-0 text-sm font-bold text-foreground">
+              {item.title}
+            </Text>
+            <Text class="m-0 shrink-0 text-xs font-medium text-muted-foreground">
+              {item.time}
+            </Text>
+          </Box>
+          {#if item.text}
+            <Text class="m-0 text-xs font-medium text-muted-foreground">
+              {item.text}
+            </Text>
+          {/if}
+        </Box>
+      </ListItem>
+    {/each}
+  </List>
+</Box>
diff --git a/packages/svelte/ui/src/components/timeline.types.ts b/packages/svelte/ui/src/components/timeline.types.ts
new file mode 100644
index 0000000..9474daa
--- /dev/null
+++ b/packages/svelte/ui/src/components/timeline.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+
+export type TimelineItem = {
+  id: string;
+  title: string;
+  text?: string;
+  time: string;
+  tone?: string;
+};
diff --git a/packages/svelte/ui/src/components/topic-chips.svelte b/packages/svelte/ui/src/components/topic-chips.svelte
new file mode 100644
index 0000000..f8cf8ec
--- /dev/null
+++ b/packages/svelte/ui/src/components/topic-chips.svelte
@@ -0,0 +1,46 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!--
+  A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band
+  with an icon per topic; default: outlined.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Topic } from "./topic-chips.types";
+
+  export type TopicChipsProps = {
+    topics: Topic[];
+    tone?: "default" | "inverse";
+  };
+</script>
+
+<script lang="ts">
+  import Button from "../primitives/button/button.svelte";
+  import Group from "../primitives/group/group.svelte";
+  import LucideIcon from "../primitives/lucide-icon/lucide-icon.svelte";
+
+  let { topics, tone = "default" }: TopicChipsProps = $props();
+</script>
+
+<Group gap="2" align="center" justify="center" class="flex-wrap" data-testid="hero-topics">
+  {#each topics as topic (topic.id)}
+    {#if ((tone as string) === "inverse")}
+      <Button
+        href={topic.href}
+        variant="ghost"
+        size="sm"
+        class="gap-2 text-background inset-ring-background/30 hover:bg-background/10"
+        data-testid="hero-topic"
+      >
+        {#if topic.icon}
+          <LucideIcon name={topic.icon} size={16} />
+        {/if}
+        {topic.name}
+      </Button>
+    {:else}
+      <Button href={topic.href} variant="outline" size="sm" data-testid="hero-topic">
+        {topic.name}
+      </Button>
+    {/if}
+  {/each}
+</Group>
diff --git a/packages/svelte/ui/src/components/topic-chips.types.ts b/packages/svelte/ui/src/components/topic-chips.types.ts
new file mode 100644
index 0000000..9275c96
--- /dev/null
+++ b/packages/svelte/ui/src/components/topic-chips.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+
+export type Topic = {
+  id: string;
+  name: string;
+  icon: string;
+  href?: string;
+};
diff --git a/packages/svelte/ui/src/components/weighted-title.svelte b/packages/svelte/ui/src/components/weighted-title.svelte
new file mode 100644
index 0000000..724ee54
--- /dev/null
+++ b/packages/svelte/ui/src/components/weighted-title.svelte
@@ -0,0 +1,37 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!-- A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text. -->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type WeightedTitleProps = {
+    id: string;
+    title: string;
+    weights?: readonly string[];
+    level?: 1 | 2;
+  };
+</script>
+
+<script lang="ts">
+  import Inline from "../primitives/inline/inline.svelte";
+  import Title from "../primitives/title/title.svelte";
+  import { defaults } from "../presets/defaults";
+  import { cn } from "../utils";
+
+  let { id, title, weights, level = 1 }: WeightedTitleProps = $props();
+</script>
+
+<Title
+  as={level}
+  size="5xl"
+  weight="semibold"
+  class={cn("text-center tracking-tight text-background", defaults.hero.title)}
+  id={id}
+>
+  {#each (title ?? "").split(" ") as word, i (i)}
+    <Inline class={weights?.[i]}>
+      {word}
+    </Inline>
+    {" "}
+  {/each}
+</Title>
diff --git a/packages/svelte/ui/src/components/zone-rows.svelte b/packages/svelte/ui/src/components/zone-rows.svelte
new file mode 100644
index 0000000..c57b863
--- /dev/null
+++ b/packages/svelte/ui/src/components/zone-rows.svelte
@@ -0,0 +1,97 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shop-parts.ts -->
+<!--
+  The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the
+  minimum order, the time and an express badge.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { Zone, ZoneLabels } from "../blocks/zone-table.types";
+
+  export type ZoneRowsProps = {
+    zones: Zone[];
+    labels: ZoneLabels;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "../primitives/badge/badge.svelte";
+  import Box from "../primitives/box/box.svelte";
+  import Stack from "../primitives/stack/stack.svelte";
+  import Table from "../primitives/table/table.svelte";
+  import TableBody from "../primitives/table/table-body.svelte";
+  import TableCaption from "../primitives/table/table-caption.svelte";
+  import TableCell from "../primitives/table/table-cell.svelte";
+  import TableHead from "../primitives/table/table-head.svelte";
+  import TableHeadCell from "../primitives/table/table-head-cell.svelte";
+  import TableRow from "../primitives/table/table-row.svelte";
+  import Text from "../primitives/text/text.svelte";
+  import { fmtMoney } from "../utils";
+
+  let { zones, labels }: ZoneRowsProps = $props();
+</script>
+
+<Box class="w-full overflow-x-auto rounded inset-ring inset-ring-border">
+  <Table class="w-full text-left text-sm" data-testid="zone-table">
+    <TableCaption class="sr-only">
+      {labels.caption}
+    </TableCaption>
+    <TableHead class="bg-muted">
+      <TableRow>
+        <TableHeadCell scope="col" class="px-4 py-2">
+          {labels.zone}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.price}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.freeFrom}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="hidden py-2 md:table-cell">
+          {labels.minOrder}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="py-2">
+          {labels.time}
+        </TableHeadCell>
+        <TableHeadCell scope="col" class="hidden py-2 pr-4 sm:table-cell">
+          {labels.express}
+        </TableHeadCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each zones as z (z.id)}
+        <TableRow class="border-t border-border" data-testid="item">
+          <TableCell class="px-4 py-4">
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {z.name}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {z.area}
+              </Text>
+            </Stack>
+          </TableCell>
+          <TableCell class="font-medium">
+            {fmtMoney(z.price, z.currency)}
+          </TableCell>
+          <TableCell>
+            {fmtMoney(z.freeFrom, z.currency)}
+          </TableCell>
+          <TableCell class="hidden md:table-cell">
+            {fmtMoney(z.minOrder, z.currency)}
+          </TableCell>
+          <TableCell>
+            {z.time}
+          </TableCell>
+          <TableCell class="hidden pr-4 sm:table-cell">
+            {#if z.express}
+              <Badge variant="secondary" size="default">
+                {z.express}
+              </Badge>
+            {/if}
+          </TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</Box>
diff --git a/packages/svelte/ui/src/index.ts b/packages/svelte/ui/src/index.ts
new file mode 100644
index 0000000..2ef9971
--- /dev/null
+++ b/packages/svelte/ui/src/index.ts
@@ -0,0 +1,726 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/plan.ts (the barrel lists every spec)
+
+// primitives
+export { default as Alert } from "./primitives/alert/alert.svelte";
+export type { AlertProps } from "./primitives/alert/alert.svelte";
+export { alertVariants } from "./primitives/alert/alert.svelte";
+export { default as Badge } from "./primitives/badge/badge.svelte";
+export type { BadgeProps } from "./primitives/badge/badge.svelte";
+export { badgeVariants } from "./primitives/badge/badge.svelte";
+export { default as Block } from "./primitives/block/block.svelte";
+export type { BlockProps } from "./primitives/block/block.svelte";
+export { default as Box } from "./primitives/box/box.svelte";
+export type { BoxProps } from "./primitives/box/box.svelte";
+export { default as Breadcrumb } from "./primitives/breadcrumb/breadcrumb.svelte";
+export type { BreadcrumbProps } from "./primitives/breadcrumb/breadcrumb.svelte";
+export { default as ButtonPlain } from "./primitives/button-plain/button-plain.svelte";
+export type { ButtonPlainProps } from "./primitives/button-plain/button-plain.svelte";
+export { default as Button } from "./primitives/button/button.svelte";
+export type { ButtonProps } from "./primitives/button/button.svelte";
+export { buttonVariants } from "./primitives/button/button.svelte";
+export { default as Card } from "./primitives/card/card.svelte";
+export type { CardProps } from "./primitives/card/card.svelte";
+export { cardVariants } from "./primitives/card/card.svelte";
+export { default as CardHeader } from "./primitives/card/card-header.svelte";
+export type { CardHeaderProps } from "./primitives/card/card-header.svelte";
+export { default as CardTitle } from "./primitives/card/card-title.svelte";
+export type { CardTitleProps } from "./primitives/card/card-title.svelte";
+export { default as CardDescription } from "./primitives/card/card-description.svelte";
+export type { CardDescriptionProps } from "./primitives/card/card-description.svelte";
+export { default as CardContent } from "./primitives/card/card-content.svelte";
+export type { CardContentProps } from "./primitives/card/card-content.svelte";
+export { default as CardFooter } from "./primitives/card/card-footer.svelte";
+export type { CardFooterProps } from "./primitives/card/card-footer.svelte";
+export { default as Checkbox } from "./primitives/checkbox/checkbox.svelte";
+export type { CheckboxProps } from "./primitives/checkbox/checkbox.svelte";
+export { checkboxVariants } from "./primitives/checkbox/checkbox.svelte";
+export { default as Container } from "./primitives/container/container.svelte";
+export type { ContainerProps } from "./primitives/container/container.svelte";
+export { default as Fieldset } from "./primitives/form/fieldset.svelte";
+export type { FieldsetProps } from "./primitives/form/fieldset.svelte";
+export { fieldsetVariants } from "./primitives/form/fieldset.svelte";
+export { default as Legend } from "./primitives/form/legend.svelte";
+export type { LegendProps } from "./primitives/form/legend.svelte";
+export { legendVariants } from "./primitives/form/legend.svelte";
+export { default as DataList } from "./primitives/form/data-list.svelte";
+export type { DataListProps } from "./primitives/form/data-list.svelte";
+export { default as DataOption } from "./primitives/form/data-option.svelte";
+export type { DataOptionProps } from "./primitives/form/data-option.svelte";
+export { default as Output } from "./primitives/form/output.svelte";
+export type { OutputProps } from "./primitives/form/output.svelte";
+export { default as Meter } from "./primitives/form/meter.svelte";
+export type { MeterProps } from "./primitives/form/meter.svelte";
+export { meterVariants } from "./primitives/form/meter.svelte";
+export { default as Progress } from "./primitives/form/progress.svelte";
+export type { ProgressProps } from "./primitives/form/progress.svelte";
+export { progressVariants } from "./primitives/form/progress.svelte";
+export { default as Dialog } from "./primitives/dialog/dialog.svelte";
+export type { DialogProps } from "./primitives/dialog/dialog.svelte";
+export { dialogVariants } from "./primitives/dialog/dialog.svelte";
+export { default as Disclosure } from "./primitives/disclosure/disclosure.svelte";
+export type { DisclosureProps } from "./primitives/disclosure/disclosure.svelte";
+export { disclosureVariants } from "./primitives/disclosure/disclosure.svelte";
+export { default as Summary } from "./primitives/disclosure/summary.svelte";
+export type { SummaryProps } from "./primitives/disclosure/summary.svelte";
+export { summaryVariants } from "./primitives/disclosure/summary.svelte";
+export { default as Form } from "./primitives/form/form.svelte";
+export type { FormProps } from "./primitives/form/form.svelte";
+export { formVariants } from "./primitives/form/form.svelte";
+export { default as FormItem } from "./primitives/form/form-item.svelte";
+export type { FormItemProps } from "./primitives/form/form-item.svelte";
+export { formItemVariants } from "./primitives/form/form-item.svelte";
+export { default as FormDescription } from "./primitives/form/form-description.svelte";
+export type { FormDescriptionProps } from "./primitives/form/form-description.svelte";
+export { formDescriptionVariants } from "./primitives/form/form-description.svelte";
+export { default as FormMessage } from "./primitives/form/form-message.svelte";
+export type { FormMessageProps } from "./primitives/form/form-message.svelte";
+export { formMessageVariants } from "./primitives/form/form-message.svelte";
+export { default as Grid } from "./primitives/grid/grid.svelte";
+export type { GridProps } from "./primitives/grid/grid.svelte";
+export { gridVariants } from "./primitives/grid/grid.svelte";
+export { default as GridCol } from "./primitives/grid/grid-col.svelte";
+export type { GridColProps } from "./primitives/grid/grid-col.svelte";
+export { default as Group } from "./primitives/group/group.svelte";
+export type { GroupProps } from "./primitives/group/group.svelte";
+export { groupVariants } from "./primitives/group/group.svelte";
+export { default as Icon } from "./primitives/icon/icon.svelte";
+export type { IconProps } from "./primitives/icon/icon.svelte";
+export { iconVariants } from "./primitives/icon/icon.svelte";
+export { default as IconBadge } from "./primitives/iconbadge/icon-badge.svelte";
+export type { IconBadgeProps } from "./primitives/iconbadge/icon-badge.svelte";
+export { iconbadgeVariants } from "./primitives/iconbadge/icon-badge.svelte";
+export { default as Image } from "./primitives/image/image.svelte";
+export type { ImageProps } from "./primitives/image/image.svelte";
+export { imageVariants } from "./primitives/image/image.svelte";
+export { default as Picture } from "./primitives/image/picture.svelte";
+export type { PictureProps } from "./primitives/image/picture.svelte";
+export { default as Source } from "./primitives/image/source.svelte";
+export type { SourceProps } from "./primitives/image/source.svelte";
+export { default as Inline } from "./primitives/inline/inline.svelte";
+export type { InlineProps } from "./primitives/inline/inline.svelte";
+export { default as Input } from "./primitives/input/input.svelte";
+export type { InputProps } from "./primitives/input/input.svelte";
+export { inputVariants } from "./primitives/input/input.svelte";
+export { default as Label } from "./primitives/label/label.svelte";
+export type { LabelProps } from "./primitives/label/label.svelte";
+export { labelVariants } from "./primitives/label/label.svelte";
+export { default as Break } from "./primitives/linebreak/break.svelte";
+export type { BreakProps } from "./primitives/linebreak/break.svelte";
+export { default as LinkPlain } from "./primitives/link-plain/link-plain.svelte";
+export type { LinkPlainProps } from "./primitives/link-plain/link-plain.svelte";
+export { default as Link } from "./primitives/link/link.svelte";
+export type { LinkProps } from "./primitives/link/link.svelte";
+export { linkVariants } from "./primitives/link/link.svelte";
+export { default as List } from "./primitives/list/list.svelte";
+export type { ListProps } from "./primitives/list/list.svelte";
+export { default as ListItem } from "./primitives/list/list-item.svelte";
+export type { ListItemProps } from "./primitives/list/list-item.svelte";
+export { default as LucideIcon } from "./primitives/lucide-icon/lucide-icon.svelte";
+export type { LucideIconProps } from "./primitives/lucide-icon/lucide-icon.svelte";
+export { default as Radio } from "./primitives/radio/radio.svelte";
+export type { RadioProps } from "./primitives/radio/radio.svelte";
+export { radioVariants } from "./primitives/radio/radio.svelte";
+export { default as Range } from "./primitives/range/range.svelte";
+export type { RangeProps } from "./primitives/range/range.svelte";
+export { rangeVariants } from "./primitives/range/range.svelte";
+export { default as Select } from "./primitives/select/select.svelte";
+export type { SelectProps } from "./primitives/select/select.svelte";
+export { selectVariants } from "./primitives/select/select.svelte";
+export { default as SelectOption } from "./primitives/select/select-option.svelte";
+export type { SelectOptionProps } from "./primitives/select/select-option.svelte";
+export { default as OptGroup } from "./primitives/select/opt-group.svelte";
+export type { OptGroupProps } from "./primitives/select/opt-group.svelte";
+export { default as Separator } from "./primitives/separator/separator.svelte";
+export type { SeparatorProps } from "./primitives/separator/separator.svelte";
+export { separatorVariants } from "./primitives/separator/separator.svelte";
+export { default as Sheet } from "./primitives/sheet/sheet.svelte";
+export type { SheetProps } from "./primitives/sheet/sheet.svelte";
+export { sheetVariants } from "./primitives/sheet/sheet.svelte";
+export { default as SheetTrigger } from "./primitives/sheet/sheet-trigger.svelte";
+export type { SheetTriggerProps } from "./primitives/sheet/sheet-trigger.svelte";
+export { sheettriggerVariants } from "./primitives/sheet/sheet-trigger.svelte";
+export { default as SheetClose } from "./primitives/sheet/sheet-close.svelte";
+export type { SheetCloseProps } from "./primitives/sheet/sheet-close.svelte";
+export { default as Skeleton } from "./primitives/skeleton/skeleton.svelte";
+export type { SkeletonProps } from "./primitives/skeleton/skeleton.svelte";
+export { skeletonVariants } from "./primitives/skeleton/skeleton.svelte";
+export { default as Stack } from "./primitives/stack/stack.svelte";
+export type { StackProps } from "./primitives/stack/stack.svelte";
+export { stackVariants } from "./primitives/stack/stack.svelte";
+export { default as Switch } from "./primitives/switch/switch.svelte";
+export type { SwitchProps } from "./primitives/switch/switch.svelte";
+export { switchVariants } from "./primitives/switch/switch.svelte";
+export { default as Table } from "./primitives/table/table.svelte";
+export type { TableProps } from "./primitives/table/table.svelte";
+export { default as TableCaption } from "./primitives/table/table-caption.svelte";
+export type { TableCaptionProps } from "./primitives/table/table-caption.svelte";
+export { default as TableHead } from "./primitives/table/table-head.svelte";
+export type { TableHeadProps } from "./primitives/table/table-head.svelte";
+export { default as TableBody } from "./primitives/table/table-body.svelte";
+export type { TableBodyProps } from "./primitives/table/table-body.svelte";
+export { default as TableFoot } from "./primitives/table/table-foot.svelte";
+export type { TableFootProps } from "./primitives/table/table-foot.svelte";
+export { default as TableRow } from "./primitives/table/table-row.svelte";
+export type { TableRowProps } from "./primitives/table/table-row.svelte";
+export { default as TableHeadCell } from "./primitives/table/table-head-cell.svelte";
+export type { TableHeadCellProps } from "./primitives/table/table-head-cell.svelte";
+export { tableHeadCellVariants } from "./primitives/table/table-head-cell.svelte";
+export { default as TableCell } from "./primitives/table/table-cell.svelte";
+export type { TableCellProps } from "./primitives/table/table-cell.svelte";
+export { tableCellVariants } from "./primitives/table/table-cell.svelte";
+export { default as TableColGroup } from "./primitives/table/table-col-group.svelte";
+export type { TableColGroupProps } from "./primitives/table/table-col-group.svelte";
+export { default as TableCol } from "./primitives/table/table-col.svelte";
+export type { TableColProps } from "./primitives/table/table-col.svelte";
+export { default as Text } from "./primitives/text/text.svelte";
+export type { TextProps } from "./primitives/text/text.svelte";
+export { textVariants } from "./primitives/text/text.svelte";
+export { default as Textarea } from "./primitives/textarea/textarea.svelte";
+export type { TextareaProps } from "./primitives/textarea/textarea.svelte";
+export { textareaVariants } from "./primitives/textarea/textarea.svelte";
+export { default as ThemeToggle } from "./primitives/themetoggle/theme-toggle.svelte";
+export type { ThemeToggleProps } from "./primitives/themetoggle/theme-toggle.svelte";
+export { themetoggleVariants } from "./primitives/themetoggle/theme-toggle.svelte";
+export { default as Title } from "./primitives/title/title.svelte";
+export type { TitleProps } from "./primitives/title/title.svelte";
+export { titleVariants } from "./primitives/title/title.svelte";
+
+// components
+export { default as AppMain } from "./components/app-main.svelte";
+export type { AppMainProps } from "./components/app-main.svelte";
+export { default as ArticleBlock } from "./components/article-block.svelte";
+export type { ArticleBlockProps } from "./components/article-block.svelte";
+export { default as AuthForm } from "./components/auth-form.svelte";
+export type { AuthFormProps } from "./components/auth-form.svelte";
+export { default as CartSummaryCard } from "./components/cart-summary-card.svelte";
+export type { CartSummaryCardProps } from "./components/cart-summary-card.svelte";
+export type * from "./components/cart-summary-card.types";
+export { default as CartTable } from "./components/cart-table.svelte";
+export type { CartTableProps } from "./components/cart-table.svelte";
+export { default as CheckoutStep } from "./components/checkout-step.svelte";
+export type { CheckoutStepProps } from "./components/checkout-step.svelte";
+export { default as CheckoutSubmit } from "./components/checkout-submit.svelte";
+export type { CheckoutSubmitProps } from "./components/checkout-submit.svelte";
+export { default as CompareMark } from "./components/compare-mark.svelte";
+export type { CompareMarkProps } from "./components/compare-mark.svelte";
+export { default as CtaActions } from "./components/cta-actions.svelte";
+export type { CtaActionsProps } from "./components/cta-actions.svelte";
+export type * from "./components/cta-actions.types";
+export { default as CtaProofItems } from "./components/cta-proof-items.svelte";
+export type { CtaProofItemsProps } from "./components/cta-proof-items.svelte";
+export { default as DrawerLines } from "./components/drawer-lines.svelte";
+export type { DrawerLinesProps } from "./components/drawer-lines.svelte";
+export { default as FaqCards } from "./components/faq-cards.svelte";
+export type { FaqCardsProps } from "./components/faq-cards.svelte";
+export { default as FaqDisclosures } from "./components/faq-disclosures.svelte";
+export type { FaqDisclosuresProps } from "./components/faq-disclosures.svelte";
+export { default as FaqFinder } from "./components/faq-finder.svelte";
+export type { FaqFinderProps } from "./components/faq-finder.svelte";
+export { default as FaqHelp } from "./components/faq-help.svelte";
+export type { FaqHelpProps } from "./components/faq-help.svelte";
+export { default as FeatureCards } from "./components/feature-cards.svelte";
+export type { FeatureCardsProps } from "./components/feature-cards.svelte";
+export { default as FeatureMetricCards } from "./components/feature-metric-cards.svelte";
+export type { FeatureMetricCardsProps } from "./components/feature-metric-cards.svelte";
+export { default as FeaturePairs } from "./components/feature-pairs.svelte";
+export type { FeaturePairsProps } from "./components/feature-pairs.svelte";
+export { default as FeatureRows } from "./components/feature-rows.svelte";
+export type { FeatureRowsProps } from "./components/feature-rows.svelte";
+export { default as FeatureStatRows } from "./components/feature-stat-rows.svelte";
+export type { FeatureStatRowsProps } from "./components/feature-stat-rows.svelte";
+export { default as FigureBlock } from "./components/figure-block.svelte";
+export type { FigureBlockProps } from "./components/figure-block.svelte";
+export { default as FooterBrand } from "./components/footer-brand.svelte";
+export type { FooterBrandProps } from "./components/footer-brand.svelte";
+export { default as FooterCard } from "./components/footer-card.svelte";
+export type { FooterCardProps } from "./components/footer-card.svelte";
+export { default as FooterChannels } from "./components/footer-channels.svelte";
+export type { FooterChannelsProps } from "./components/footer-channels.svelte";
+export { default as FooterColumns } from "./components/footer-columns.svelte";
+export type { FooterColumnsProps } from "./components/footer-columns.svelte";
+export { default as FooterContacts } from "./components/footer-contacts.svelte";
+export type { FooterContactsProps } from "./components/footer-contacts.svelte";
+export { default as FooterFigures } from "./components/footer-figures.svelte";
+export type { FooterFiguresProps } from "./components/footer-figures.svelte";
+export { default as FooterGroupCards } from "./components/footer-group-cards.svelte";
+export type { FooterGroupCardsProps } from "./components/footer-group-cards.svelte";
+export { default as FooterLinkColumns } from "./components/footer-link-columns.svelte";
+export type { FooterLinkColumnsProps } from "./components/footer-link-columns.svelte";
+export { default as FooterPoints } from "./components/footer-points.svelte";
+export type { FooterPointsProps } from "./components/footer-points.svelte";
+export { default as FooterSignupCard } from "./components/footer-signup-card.svelte";
+export type { FooterSignupCardProps } from "./components/footer-signup-card.svelte";
+export { default as FooterSitemap } from "./components/footer-sitemap.svelte";
+export type { FooterSitemapProps } from "./components/footer-sitemap.svelte";
+export { default as HeroBadge } from "./components/hero-badge.svelte";
+export type { HeroBadgeProps } from "./components/hero-badge.svelte";
+export { default as HeroHead } from "./components/hero-head.svelte";
+export type { HeroHeadProps } from "./components/hero-head.svelte";
+export { default as HeroSplitExtras } from "./components/hero-split-extras.svelte";
+export type { HeroSplitExtrasProps } from "./components/hero-split-extras.svelte";
+export { default as HeroSplitMedia } from "./components/hero-split-media.svelte";
+export type { HeroSplitMediaProps } from "./components/hero-split-media.svelte";
+export { default as JobCards } from "./components/job-cards.svelte";
+export type { JobCardsProps } from "./components/job-cards.svelte";
+export { default as LogoSlot } from "./components/logo-slot.svelte";
+export type { LogoSlotProps } from "./components/logo-slot.svelte";
+export { default as MediaContacts } from "./components/media-contacts.svelte";
+export type { MediaContactsProps } from "./components/media-contacts.svelte";
+export { default as MediaFigures } from "./components/media-figures.svelte";
+export type { MediaFiguresProps } from "./components/media-figures.svelte";
+export { default as MediaPosts } from "./components/media-posts.svelte";
+export type { MediaPostsProps } from "./components/media-posts.svelte";
+export { default as MediaReview } from "./components/media-review.svelte";
+export type { MediaReviewProps } from "./components/media-review.svelte";
+export { default as MediaSteps } from "./components/media-steps.svelte";
+export type { MediaStepsProps } from "./components/media-steps.svelte";
+export { default as MediaTopics } from "./components/media-topics.svelte";
+export type { MediaTopicsProps } from "./components/media-topics.svelte";
+export { default as MemberRow } from "./components/member-row.svelte";
+export type { MemberRowProps } from "./components/member-row.svelte";
+export { default as MenuEntry } from "./components/menu-entry.svelte";
+export type { MenuEntryProps } from "./components/menu-entry.svelte";
+export { default as NavActions } from "./components/nav-actions.svelte";
+export type { NavActionsProps } from "./components/nav-actions.svelte";
+export { default as NavBarMenu } from "./components/nav-bar-menu.svelte";
+export type { NavBarMenuProps } from "./components/nav-bar-menu.svelte";
+export { default as NavBlock } from "./components/nav-block.svelte";
+export type { NavBlockProps } from "./components/nav-block.svelte";
+export { default as NavLinks } from "./components/nav-links.svelte";
+export type { NavLinksProps } from "./components/nav-links.svelte";
+export { default as NumberField } from "./components/number-field.svelte";
+export type { NumberFieldProps } from "./components/number-field.svelte";
+export { default as OfferMedia } from "./components/offer-media.svelte";
+export type { OfferMediaProps } from "./components/offer-media.svelte";
+export { default as OrderRows } from "./components/order-rows.svelte";
+export type { OrderRowsProps } from "./components/order-rows.svelte";
+export { default as OverMedia } from "./components/over-media.svelte";
+export type { OverMediaProps } from "./components/over-media.svelte";
+export { default as PageAside } from "./components/page-aside.svelte";
+export type { PageAsideProps } from "./components/page-aside.svelte";
+export { default as PageCrumbs } from "./components/page-crumbs.svelte";
+export type { PageCrumbsProps } from "./components/page-crumbs.svelte";
+export { default as PaymentOptions } from "./components/payment-options.svelte";
+export type { PaymentOptionsProps } from "./components/payment-options.svelte";
+export type * from "./components/payment-options.types";
+export { default as PostActions } from "./components/post-actions.svelte";
+export type { PostActionsProps } from "./components/post-actions.svelte";
+export { default as PostAuthor } from "./components/post-author.svelte";
+export type { PostAuthorProps } from "./components/post-author.svelte";
+export { default as PostFeature } from "./components/post-feature.svelte";
+export type { PostFeatureProps } from "./components/post-feature.svelte";
+export { default as PostMiniCard } from "./components/post-mini-card.svelte";
+export type { PostMiniCardProps } from "./components/post-mini-card.svelte";
+export { default as PostOutline } from "./components/post-outline.svelte";
+export type { PostOutlineProps } from "./components/post-outline.svelte";
+export { default as PostOverlayCard } from "./components/post-overlay-card.svelte";
+export type { PostOverlayCardProps } from "./components/post-overlay-card.svelte";
+export { default as PostStats } from "./components/post-stats.svelte";
+export type { PostStatsProps } from "./components/post-stats.svelte";
+export { default as PostTags } from "./components/post-tags.svelte";
+export type { PostTagsProps } from "./components/post-tags.svelte";
+export { default as ProductGallery } from "./components/product-gallery.svelte";
+export type { ProductGalleryProps } from "./components/product-gallery.svelte";
+export { default as ProductPrice } from "./components/product-price.svelte";
+export type { ProductPriceProps } from "./components/product-price.svelte";
+export { default as ProjectTiles } from "./components/project-tiles.svelte";
+export type { ProjectTilesProps } from "./components/project-tiles.svelte";
+export { default as PromptComposer } from "./components/prompt-composer.svelte";
+export type { PromptComposerProps } from "./components/prompt-composer.svelte";
+export { default as QuoteCard } from "./components/quote-card.svelte";
+export type { QuoteCardProps } from "./components/quote-card.svelte";
+export { default as QuoteFigures } from "./components/quote-figures.svelte";
+export type { QuoteFiguresProps } from "./components/quote-figures.svelte";
+export { default as QuoteLogoTiles } from "./components/quote-logo-tiles.svelte";
+export type { QuoteLogoTilesProps } from "./components/quote-logo-tiles.svelte";
+export { default as QuoteProof } from "./components/quote-proof.svelte";
+export type { QuoteProofProps } from "./components/quote-proof.svelte";
+export { default as QuoteRatingPanel } from "./components/quote-rating-panel.svelte";
+export type { QuoteRatingPanelProps } from "./components/quote-rating-panel.svelte";
+export { default as QuoteSlot } from "./components/quote-slot.svelte";
+export type { QuoteSlotProps } from "./components/quote-slot.svelte";
+export { default as SearchPalette } from "./components/search-palette.svelte";
+export type { SearchPaletteProps } from "./components/search-palette.svelte";
+export { default as ShellContent } from "./components/shell-content.svelte";
+export type { ShellContentProps } from "./components/shell-content.svelte";
+export { default as ShellFooter } from "./components/shell-footer.svelte";
+export type { ShellFooterProps } from "./components/shell-footer.svelte";
+export { default as ShellSidebar } from "./components/shell-sidebar.svelte";
+export type { ShellSidebarProps } from "./components/shell-sidebar.svelte";
+export { default as ShellTopbar } from "./components/shell-topbar.svelte";
+export type { ShellTopbarProps } from "./components/shell-topbar.svelte";
+export { default as SlotGrid } from "./components/slot-grid.svelte";
+export type { SlotGridProps } from "./components/slot-grid.svelte";
+export type * from "./components/slot-grid.types";
+export { default as StatFigure } from "./components/stat-figure.svelte";
+export type { StatFigureProps } from "./components/stat-figure.svelte";
+export { default as StoryDots } from "./components/story-dots.svelte";
+export type { StoryDotsProps } from "./components/story-dots.svelte";
+export { default as StoryPanel } from "./components/story-panel.svelte";
+export type { StoryPanelProps } from "./components/story-panel.svelte";
+export { default as TopicChips } from "./components/topic-chips.svelte";
+export type { TopicChipsProps } from "./components/topic-chips.svelte";
+export type * from "./components/topic-chips.types";
+export { default as WeightedTitle } from "./components/weighted-title.svelte";
+export type { WeightedTitleProps } from "./components/weighted-title.svelte";
+export { default as ZoneRows } from "./components/zone-rows.svelte";
+export type { ZoneRowsProps } from "./components/zone-rows.svelte";
+export { default as Avatar } from "./components/avatar.svelte";
+export type { AvatarProps } from "./components/avatar.svelte";
+export { default as BadgeSquare } from "./components/badge-square.svelte";
+export type { BadgeSquareProps } from "./components/badge-square.svelte";
+export { default as BarChart } from "./components/bar-chart.svelte";
+export type { BarChartProps } from "./components/bar-chart.svelte";
+export type * from "./components/bar-chart.types";
+export { default as BulkBar } from "./components/bulk-bar.svelte";
+export type { BulkBarProps } from "./components/bulk-bar.svelte";
+export { default as EmptyState } from "./components/empty-state.svelte";
+export type { EmptyStateProps } from "./components/empty-state.svelte";
+export { default as Field } from "./components/field.svelte";
+export type { FieldProps } from "./components/field.svelte";
+export { default as LogoSidebar } from "./components/logo-sidebar.svelte";
+export type { LogoSidebarProps } from "./components/logo-sidebar.svelte";
+export { default as MeterRow } from "./components/meter-row.svelte";
+export type { MeterRowProps } from "./components/meter-row.svelte";
+export { default as Notice } from "./components/notice.svelte";
+export type { NoticeProps } from "./components/notice.svelte";
+export { default as PageHeader } from "./components/page-header.svelte";
+export type { PageHeaderProps } from "./components/page-header.svelte";
+export { default as Pager } from "./components/pager.svelte";
+export type { PagerProps } from "./components/pager.svelte";
+export { default as Panel } from "./components/panel.svelte";
+export type { PanelProps } from "./components/panel.svelte";
+export { default as Pill } from "./components/pill.svelte";
+export type { PillProps } from "./components/pill.svelte";
+export { default as RangeField } from "./components/range-field.svelte";
+export type { RangeFieldProps } from "./components/range-field.svelte";
+export { default as Rating } from "./components/rating.svelte";
+export type { RatingProps } from "./components/rating.svelte";
+export { default as Region } from "./components/region.svelte";
+export type { RegionProps } from "./components/region.svelte";
+export { default as SearchField } from "./components/search-field.svelte";
+export type { SearchFieldProps } from "./components/search-field.svelte";
+export { default as StatTile } from "./components/stat-tile.svelte";
+export type { StatTileProps } from "./components/stat-tile.svelte";
+export { default as TableToolbar } from "./components/table-toolbar.svelte";
+export type { TableToolbarProps } from "./components/table-toolbar.svelte";
+export { default as Timeline } from "./components/timeline.svelte";
+export type { TimelineProps } from "./components/timeline.svelte";
+export type * from "./components/timeline.types";
+export { default as ActionGroup } from "./components/action-group.svelte";
+export type { ActionGroupProps } from "./components/action-group.svelte";
+export { default as Backdrop } from "./components/backdrop.svelte";
+export type { BackdropProps } from "./components/backdrop.svelte";
+export { default as CodeWindow } from "./components/code-window.svelte";
+export type { CodeWindowProps } from "./components/code-window.svelte";
+export type * from "./components/code-window.types";
+export { default as DropdownItem } from "./components/dropdown-item.svelte";
+export type { DropdownItemProps } from "./components/dropdown-item.svelte";
+export { default as EditorTab } from "./components/editor-tab.svelte";
+export type { EditorTabProps } from "./components/editor-tab.svelte";
+export { default as FileTreeItem } from "./components/file-tree-item.svelte";
+export type { FileTreeItemProps } from "./components/file-tree-item.svelte";
+export { default as FileTree } from "./components/file-tree.svelte";
+export type { FileTreeProps } from "./components/file-tree.svelte";
+export { default as IconTab } from "./components/icon-tab.svelte";
+export type { IconTabProps } from "./components/icon-tab.svelte";
+export { default as IconTabs } from "./components/icon-tabs.svelte";
+export type { IconTabsProps } from "./components/icon-tabs.svelte";
+export { default as MediaFrame } from "./components/media-frame.svelte";
+export type { MediaFrameProps } from "./components/media-frame.svelte";
+export { default as NavItemRow } from "./components/nav-item-row.svelte";
+export type { NavItemRowProps } from "./components/nav-item-row.svelte";
+export { default as NavItem } from "./components/nav-item.svelte";
+export type { NavItemProps } from "./components/nav-item.svelte";
+export { default as SectionBox } from "./components/section-box.svelte";
+export type { SectionBoxProps } from "./components/section-box.svelte";
+export { default as SectionColumn } from "./components/section-column.svelte";
+export type { SectionColumnProps } from "./components/section-column.svelte";
+export { default as SectionFrame } from "./components/section-frame.svelte";
+export type { SectionFrameProps } from "./components/section-frame.svelte";
+export type * from "./components/section-frame.types";
+export { default as SectionHead } from "./components/section-head.svelte";
+export type { SectionHeadProps } from "./components/section-head.svelte";
+export { default as SectionHeader } from "./components/section-header.svelte";
+export type { SectionHeaderProps } from "./components/section-header.svelte";
+export { default as SidebarPanel } from "./components/sidebar-panel.svelte";
+export type { SidebarPanelProps } from "./components/sidebar-panel.svelte";
+export { default as SwitcherItem } from "./components/switcher-item.svelte";
+export type { SwitcherItemProps } from "./components/switcher-item.svelte";
+export { default as Switcher } from "./components/switcher.svelte";
+export type { SwitcherProps } from "./components/switcher.svelte";
+
+// blocks
+export { default as AboutCompany } from "./blocks/about-company.svelte";
+export type { AboutCompanyProps } from "./blocks/about-company.svelte";
+export { default as AboutMe } from "./blocks/about-me.svelte";
+export type { AboutMeProps } from "./blocks/about-me.svelte";
+export type * from "./blocks/about-me.types";
+export { default as ActivityFeed } from "./blocks/activity-feed.svelte";
+export type { ActivityFeedProps } from "./blocks/activity-feed.svelte";
+export type * from "./blocks/activity-feed.types";
+export { default as AnnouncementBar } from "./blocks/announcement-bar.svelte";
+export type { AnnouncementBarProps } from "./blocks/announcement-bar.svelte";
+export { default as AppShell } from "./blocks/app-shell.svelte";
+export type { AppShellProps } from "./blocks/app-shell.svelte";
+export type * from "./blocks/app-shell.types";
+export { default as ArticleBody } from "./blocks/article-body.svelte";
+export type { ArticleBodyProps } from "./blocks/article-body.svelte";
+export type * from "./blocks/article-body.types";
+export { default as AuthCard } from "./blocks/auth-card.svelte";
+export type { AuthCardProps } from "./blocks/auth-card.svelte";
+export type * from "./blocks/auth-card.types";
+export { default as AuthLayout } from "./blocks/auth-layout.svelte";
+export type { AuthLayoutProps } from "./blocks/auth-layout.svelte";
+export type * from "./blocks/auth-layout.types";
+export { default as BeforeAfter } from "./blocks/before-after.svelte";
+export type { BeforeAfterProps } from "./blocks/before-after.svelte";
+export type * from "./blocks/before-after.types";
+export { default as BentoGrid } from "./blocks/bento-grid.svelte";
+export type { BentoGridProps } from "./blocks/bento-grid.svelte";
+export type * from "./blocks/bento-grid.types";
+export { default as BottomNav } from "./blocks/bottom-nav.svelte";
+export type { BottomNavProps } from "./blocks/bottom-nav.svelte";
+export { default as CartDrawer } from "./blocks/cart-drawer.svelte";
+export type { CartDrawerProps } from "./blocks/cart-drawer.svelte";
+export type * from "./blocks/cart-drawer.types";
+export { default as CartList } from "./blocks/cart-list.svelte";
+export type { CartListProps } from "./blocks/cart-list.svelte";
+export type * from "./blocks/cart-list.types";
+export { default as CategoryNav } from "./blocks/category-nav.svelte";
+export type { CategoryNavProps } from "./blocks/category-nav.svelte";
+export type * from "./blocks/category-nav.types";
+export { default as ChartPanel } from "./blocks/chart-panel.svelte";
+export type { ChartPanelProps } from "./blocks/chart-panel.svelte";
+export type * from "./blocks/chart-panel.types";
+export { default as Checklist } from "./blocks/checklist.svelte";
+export type { ChecklistProps } from "./blocks/checklist.svelte";
+export type * from "./blocks/checklist.types";
+export { default as CheckoutForm } from "./blocks/checkout-form.svelte";
+export type { CheckoutFormProps } from "./blocks/checkout-form.svelte";
+export type * from "./blocks/checkout-form.types";
+export { default as ComparisonTable } from "./blocks/comparison-table.svelte";
+export type { ComparisonTableProps } from "./blocks/comparison-table.svelte";
+export type * from "./blocks/comparison-table.types";
+export { default as ContactForm } from "./blocks/contact-form.svelte";
+export type { ContactFormProps } from "./blocks/contact-form.svelte";
+export type * from "./blocks/contact-form.types";
+export { default as CookieBanner } from "./blocks/cookie-banner.svelte";
+export type { CookieBannerProps } from "./blocks/cookie-banner.svelte";
+export { default as CreditPacks } from "./blocks/credit-packs.svelte";
+export type { CreditPacksProps } from "./blocks/credit-packs.svelte";
+export type * from "./blocks/credit-packs.types";
+export { default as CtaBand } from "./blocks/cta-band.svelte";
+export type { CtaBandProps } from "./blocks/cta-band.svelte";
+export type * from "./blocks/cta-band.types";
+export { default as CtaBanner } from "./blocks/cta-banner.svelte";
+export type { CtaBannerProps } from "./blocks/cta-banner.svelte";
+export { default as CtaProof } from "./blocks/cta-proof.svelte";
+export type { CtaProofProps } from "./blocks/cta-proof.svelte";
+export type * from "./blocks/cta-proof.types";
+export { default as DashboardOverview } from "./blocks/dashboard-overview.svelte";
+export type { DashboardOverviewProps } from "./blocks/dashboard-overview.svelte";
+export type * from "./blocks/dashboard-overview.types";
+export { default as DashboardShell } from "./blocks/dashboard-shell.svelte";
+export type { DashboardShellProps } from "./blocks/dashboard-shell.svelte";
+export type * from "./blocks/dashboard-shell.types";
+export { default as DeliveryInfo } from "./blocks/delivery-info.svelte";
+export type { DeliveryInfoProps } from "./blocks/delivery-info.svelte";
+export type * from "./blocks/delivery-info.types";
+export { default as EmptyPanel } from "./blocks/empty-panel.svelte";
+export type { EmptyPanelProps } from "./blocks/empty-panel.svelte";
+export { default as ErrorPage } from "./blocks/error-page.svelte";
+export type { ErrorPageProps } from "./blocks/error-page.svelte";
+export type * from "./blocks/error-page.types";
+export { default as FaqList } from "./blocks/faq-list.svelte";
+export type { FaqListProps } from "./blocks/faq-list.svelte";
+export type * from "./blocks/faq-list.types";
+export { default as FaqSplit } from "./blocks/faq-split.svelte";
+export type { FaqSplitProps } from "./blocks/faq-split.svelte";
+export type * from "./blocks/faq-split.types";
+export { default as FeatureAccordion } from "./blocks/feature-accordion.svelte";
+export type { FeatureAccordionProps } from "./blocks/feature-accordion.svelte";
+export { default as FeatureGrid } from "./blocks/feature-grid.svelte";
+export type { FeatureGridProps } from "./blocks/feature-grid.svelte";
+export type * from "./blocks/feature-grid.types";
+export { default as FeatureShowcase } from "./blocks/feature-showcase.svelte";
+export type { FeatureShowcaseProps } from "./blocks/feature-showcase.svelte";
+export { default as FeatureSplit } from "./blocks/feature-split.svelte";
+export type { FeatureSplitProps } from "./blocks/feature-split.svelte";
+export { default as FeatureSticky } from "./blocks/feature-sticky.svelte";
+export type { FeatureStickyProps } from "./blocks/feature-sticky.svelte";
+export { default as FeatureTabs } from "./blocks/feature-tabs.svelte";
+export type { FeatureTabsProps } from "./blocks/feature-tabs.svelte";
+export { default as FooterSplit } from "./blocks/footer-split.svelte";
+export type { FooterSplitProps } from "./blocks/footer-split.svelte";
+export type * from "./blocks/footer-split.types";
+export { default as HeroClassic } from "./blocks/hero-classic.svelte";
+export type { HeroClassicProps } from "./blocks/hero-classic.svelte";
+export type * from "./blocks/hero-classic.types";
+export { default as HeroPrompt } from "./blocks/hero-prompt.svelte";
+export type { HeroPromptProps } from "./blocks/hero-prompt.svelte";
+export type * from "./blocks/hero-prompt.types";
+export { default as HeroSplit } from "./blocks/hero-split.svelte";
+export type { HeroSplitProps } from "./blocks/hero-split.svelte";
+export type * from "./blocks/hero-split.types";
+export { default as IconWall } from "./blocks/icon-wall.svelte";
+export type { IconWallProps } from "./blocks/icon-wall.svelte";
+export { default as JobBoard } from "./blocks/job-board.svelte";
+export type { JobBoardProps } from "./blocks/job-board.svelte";
+export type * from "./blocks/job-board.types";
+export { default as KanbanBoard } from "./blocks/kanban-board.svelte";
+export type { KanbanBoardProps } from "./blocks/kanban-board.svelte";
+export type * from "./blocks/kanban-board.types";
+export { default as LogoCloud } from "./blocks/logo-cloud.svelte";
+export type { LogoCloudProps } from "./blocks/logo-cloud.svelte";
+export type * from "./blocks/logo-cloud.types";
+export { default as LogoRibbon } from "./blocks/logo-ribbon.svelte";
+export type { LogoRibbonProps } from "./blocks/logo-ribbon.svelte";
+export { default as MediaList } from "./blocks/media-list.svelte";
+export type { MediaListProps } from "./blocks/media-list.svelte";
+export type * from "./blocks/media-list.types";
+export { default as MegaMenu } from "./blocks/mega-menu.svelte";
+export type { MegaMenuProps } from "./blocks/mega-menu.svelte";
+export type * from "./blocks/mega-menu.types";
+export { default as MetricRow } from "./blocks/metric-row.svelte";
+export type { MetricRowProps } from "./blocks/metric-row.svelte";
+export type * from "./blocks/metric-row.types";
+export { default as MilestoneTimeline } from "./blocks/milestone-timeline.svelte";
+export type { MilestoneTimelineProps } from "./blocks/milestone-timeline.svelte";
+export type * from "./blocks/milestone-timeline.types";
+export { default as NavBar } from "./blocks/nav-bar.svelte";
+export type { NavBarProps } from "./blocks/nav-bar.svelte";
+export type * from "./blocks/nav-bar.types";
+export { default as NewsletterForm } from "./blocks/newsletter-form.svelte";
+export type { NewsletterFormProps } from "./blocks/newsletter-form.svelte";
+export { default as OrderSummary } from "./blocks/order-summary.svelte";
+export type { OrderSummaryProps } from "./blocks/order-summary.svelte";
+export type * from "./blocks/order-summary.types";
+export { default as OrderTable } from "./blocks/order-table.svelte";
+export type { OrderTableProps } from "./blocks/order-table.svelte";
+export type * from "./blocks/order-table.types";
+export { default as PageIntro } from "./blocks/page-intro.svelte";
+export type { PageIntroProps } from "./blocks/page-intro.svelte";
+export { default as PageTrail } from "./blocks/page-trail.svelte";
+export type { PageTrailProps } from "./blocks/page-trail.svelte";
+export type * from "./blocks/page-trail.types";
+export { default as PhotoGallery } from "./blocks/photo-gallery.svelte";
+export type { PhotoGalleryProps } from "./blocks/photo-gallery.svelte";
+export type * from "./blocks/photo-gallery.types";
+export { default as PostCard } from "./blocks/post-card.svelte";
+export type { PostCardProps } from "./blocks/post-card.svelte";
+export type * from "./blocks/post-card.types";
+export { default as PostGrid } from "./blocks/post-grid.svelte";
+export type { PostGridProps } from "./blocks/post-grid.svelte";
+export type * from "./blocks/post-grid.types";
+export { default as PostHeader } from "./blocks/post-header.svelte";
+export type { PostHeaderProps } from "./blocks/post-header.svelte";
+export { default as PostShowcase } from "./blocks/post-showcase.svelte";
+export type { PostShowcaseProps } from "./blocks/post-showcase.svelte";
+export { default as PostSplit } from "./blocks/post-split.svelte";
+export type { PostSplitProps } from "./blocks/post-split.svelte";
+export type * from "./blocks/post-split.types";
+export { default as PricingCard } from "./blocks/pricing-card.svelte";
+export type { PricingCardProps } from "./blocks/pricing-card.svelte";
+export type * from "./blocks/pricing-card.types";
+export { default as PricingTiers } from "./blocks/pricing-tiers.svelte";
+export type { PricingTiersProps } from "./blocks/pricing-tiers.svelte";
+export type * from "./blocks/pricing-tiers.types";
+export { default as ProductCard } from "./blocks/product-card.svelte";
+export type { ProductCardProps } from "./blocks/product-card.svelte";
+export type * from "./blocks/product-card.types";
+export { default as ProductDetail } from "./blocks/product-detail.svelte";
+export type { ProductDetailProps } from "./blocks/product-detail.svelte";
+export type * from "./blocks/product-detail.types";
+export { default as ProductGrid } from "./blocks/product-grid.svelte";
+export type { ProductGridProps } from "./blocks/product-grid.svelte";
+export { default as ProductInfo } from "./blocks/product-info.svelte";
+export type { ProductInfoProps } from "./blocks/product-info.svelte";
+export type * from "./blocks/product-info.types";
+export { default as ProfileForm } from "./blocks/profile-form.svelte";
+export type { ProfileFormProps } from "./blocks/profile-form.svelte";
+export type * from "./blocks/profile-form.types";
+export { default as ProjectGrid } from "./blocks/project-grid.svelte";
+export type { ProjectGridProps } from "./blocks/project-grid.svelte";
+export type * from "./blocks/project-grid.types";
+export { default as ProofBand } from "./blocks/proof-band.svelte";
+export type { ProofBandProps } from "./blocks/proof-band.svelte";
+export { default as QuoteSplit } from "./blocks/quote-split.svelte";
+export type { QuoteSplitProps } from "./blocks/quote-split.svelte";
+export type * from "./blocks/quote-split.types";
+export { default as ReviewList } from "./blocks/review-list.svelte";
+export type { ReviewListProps } from "./blocks/review-list.svelte";
+export type * from "./blocks/review-list.types";
+export { default as ShoppingCart } from "./blocks/shopping-cart.svelte";
+export type { ShoppingCartProps } from "./blocks/shopping-cart.svelte";
+export type * from "./blocks/shopping-cart.types";
+export { default as SidebarNav } from "./blocks/sidebar-nav.svelte";
+export type { SidebarNavProps } from "./blocks/sidebar-nav.svelte";
+export { default as SignupWizard } from "./blocks/signup-wizard.svelte";
+export type { SignupWizardProps } from "./blocks/signup-wizard.svelte";
+export type * from "./blocks/signup-wizard.types";
+export { default as SiteFooter } from "./blocks/site-footer.svelte";
+export type { SiteFooterProps } from "./blocks/site-footer.svelte";
+export type * from "./blocks/site-footer.types";
+export { default as SiteHeader } from "./blocks/site-header.svelte";
+export type { SiteHeaderProps } from "./blocks/site-header.svelte";
+export type * from "./blocks/site-header.types";
+export { default as SitemapFooter } from "./blocks/sitemap-footer.svelte";
+export type { SitemapFooterProps } from "./blocks/sitemap-footer.svelte";
+export type * from "./blocks/sitemap-footer.types";
+export { default as SkeletonLayout } from "./blocks/skeleton-layout.svelte";
+export type { SkeletonLayoutProps } from "./blocks/skeleton-layout.svelte";
+export type * from "./blocks/skeleton-layout.types";
+export { default as SlotBoard } from "./blocks/slot-board.svelte";
+export type { SlotBoardProps } from "./blocks/slot-board.svelte";
+export type * from "./blocks/slot-board.types";
+export { default as StatsBand } from "./blocks/stats-band.svelte";
+export type { StatsBandProps } from "./blocks/stats-band.svelte";
+export type * from "./blocks/stats-band.types";
+export { default as Stepper } from "./blocks/stepper.svelte";
+export type { StepperProps } from "./blocks/stepper.svelte";
+export { default as StepsList } from "./blocks/steps-list.svelte";
+export type { StepsListProps } from "./blocks/steps-list.svelte";
+export type * from "./blocks/steps-list.types";
+export { default as StoreHero } from "./blocks/store-hero.svelte";
+export type { StoreHeroProps } from "./blocks/store-hero.svelte";
+export type * from "./blocks/store-hero.types";
+export { default as StoreLocations } from "./blocks/store-locations.svelte";
+export type { StoreLocationsProps } from "./blocks/store-locations.svelte";
+export type * from "./blocks/store-locations.types";
+export { default as StoryTabs } from "./blocks/story-tabs.svelte";
+export type { StoryTabsProps } from "./blocks/story-tabs.svelte";
+export type * from "./blocks/story-tabs.types";
+export { default as SupportChannels } from "./blocks/support-channels.svelte";
+export type { SupportChannelsProps } from "./blocks/support-channels.svelte";
+export { default as TeamGrid } from "./blocks/team-grid.svelte";
+export type { TeamGridProps } from "./blocks/team-grid.svelte";
+export type * from "./blocks/team-grid.types";
+export { default as TemplateGrid } from "./blocks/template-grid.svelte";
+export type { TemplateGridProps } from "./blocks/template-grid.svelte";
+export type * from "./blocks/template-grid.types";
+export { default as TestimonialGrid } from "./blocks/testimonial-grid.svelte";
+export type { TestimonialGridProps } from "./blocks/testimonial-grid.svelte";
+export type * from "./blocks/testimonial-grid.types";
+export { default as TourCallout } from "./blocks/tour-callout.svelte";
+export type { TourCalloutProps } from "./blocks/tour-callout.svelte";
+export { default as UsageCalculator } from "./blocks/usage-calculator.svelte";
+export type { UsageCalculatorProps } from "./blocks/usage-calculator.svelte";
+export type * from "./blocks/usage-calculator.types";
+export { default as UspStrip } from "./blocks/usp-strip.svelte";
+export type { UspStripProps } from "./blocks/usp-strip.svelte";
+export { default as VideoGrid } from "./blocks/video-grid.svelte";
+export type { VideoGridProps } from "./blocks/video-grid.svelte";
+export { default as VideoModal } from "./blocks/video-modal.svelte";
+export type { VideoModalProps } from "./blocks/video-modal.svelte";
+export type * from "./blocks/video-modal.types";
+export { default as ZoneTable } from "./blocks/zone-table.svelte";
+export type { ZoneTableProps } from "./blocks/zone-table.svelte";
+export type * from "./blocks/zone-table.types";
+
+// presets
+export { defaults } from "./presets/defaults";
+
+// utils
+export { cn, variants, tpl, fmtNumber, fmtMoney, at, pageWindow, fitCols, uniqLabel } from "./utils";
diff --git a/packages/svelte/ui/src/presets/defaults.ts b/packages/svelte/ui/src/presets/defaults.ts
new file mode 100644
index 0000000..995f05b
--- /dev/null
+++ b/packages/svelte/ui/src/presets/defaults.ts
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/presets/defaults.ts
+
+/**
+ * Default layout preset: the sizes of the landing blocks as Tailwind classes.
+ * Blocks combine these with token classes; swap the preset to resize every block at once.
+ *
+ * Numbers: ui8kit default sizes (Tailwind scale, no arbitrary values)
+ */
+export const defaults = {
+  /** small type steps for chips, badges and links */
+  text: {
+    tiny: "text-xs",
+    small: "text-sm",
+  },
+  hero: {
+    /** the inverse band: tall section, large bottom radius */
+    band: "min-h-160 rounded",
+    container: "max-w-7xl",
+    head: "gap-12",
+    badge: "w-48",
+    /** display title */
+    title: "text-5xl leading-tight",
+    /** one font-weight class per title word */
+    titleWeights: ["font-normal", "font-semibold", "font-normal", "font-semibold"],
+    column: "max-w-xl gap-16",
+    /** the prompt box */
+    composer: "h-40 max-w-xl rounded",
+    attach: "w-24",
+    promptLine: "h-10",
+    model: "w-24",
+  },
+  section: {
+    landing: "max-w-6xl",
+  },
+  media: {
+    rounded: "rounded",
+  },
+  templates: {
+    card: "h-60 w-64",
+    image: "h-40 w-58 rounded",
+    footer: "h-12 min-h-12",
+  },
+  stats: {
+    column: "min-h-28",
+    figure: "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18",
+    panel: "gap-24 rounded py-20",
+  },
+  features: {
+    cells: "rounded",
+  },
+  news: {
+    card: "h-56 w-64",
+    cover: "h-40 w-64 rounded",
+    title: "top-16",
+    strip: "h-12 min-h-12",
+  },
+  cta: {
+    panel: "rounded py-20",
+    title: "max-w-md",
+    text: "max-w-2xl",
+    button: "w-40",
+  },
+  logos: {
+    /** one centered row of logo slots */
+    row: "h-28 max-w-4xl gap-12 pb-8",
+    slot: "size-20",
+    /** the Lucide glyph inside a slot: half the slot */
+    glyph: 40,
+  },
+  footer: {
+    card: "h-72 gap-12 rounded",
+    brand: "w-48",
+    groups: "gap-x-16",
+  },
+} as const;
diff --git a/packages/svelte/ui/src/primitives/alert/alert.svelte b/packages/svelte/ui/src/primitives/alert/alert.svelte
new file mode 100644
index 0000000..34b0a4a
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/alert/alert.svelte
@@ -0,0 +1,60 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/alert.json -->
+<!--
+  Alert renders a div with alert or status semantics.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Alert: the classes of each value of each prop (shadcn/cva style). */
+  export const alertVariants = variants({
+    base: "flex min-h-8 items-center gap-2 px-2 text-xs font-semibold inset-ring rounded",
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground inset-ring-border",
+        destructive: "bg-muted text-destructive inset-ring-destructive",
+        success: "bg-muted text-foreground inset-ring-border",
+        warning: "bg-muted text-foreground inset-ring-border",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  });
+
+  export type AlertVariant = VariantKey<typeof alertVariants, "variant">;
+
+  export type AlertProps = {
+    variant?: AlertVariant;
+    role?: "status" | "alert";
+    "aria-live"?: "off" | "polite" | "assertive";
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { defaultIfEmpty, oneOfOr } from "../../utils/expr";
+
+  let {
+    variant,
+    role,
+    "aria-live": ariaLive,
+    class: className,
+    children,
+    ...rest
+  }: AlertProps = $props();
+
+  const cls = $derived(cn(alertVariants({ variant }), className));
+</script>
+
+<div
+  {...(cls ? { class: cls } : {})}
+  data-slot="alert"
+  role={oneOfOr(role, "status", "status", "alert")}
+  aria-live={defaultIfEmpty(ariaLive, "polite")}
+  {...rest}
+>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/ui/src/primitives/badge/badge.svelte b/packages/svelte/ui/src/primitives/badge/badge.svelte
new file mode 100644
index 0000000..be85705
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/badge/badge.svelte
@@ -0,0 +1,59 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/badge.json -->
+<!--
+  Badge renders label text in a div wrapper.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Badge: the classes of each value of each prop (shadcn/cva style). */
+  export const badgeVariants = variants({
+    base: "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+    variants: {
+      size: {
+        sm: "h-5 px-2 text-xs",
+        default: "h-6 px-3 text-xs",
+        lg: "h-8 px-4 text-sm",
+      },
+      variant: {
+        default: "bg-primary text-primary-foreground inset-ring-primary",
+        secondary: "bg-muted text-foreground inset-ring-transparent",
+        outline: "bg-transparent text-foreground inset-ring-border",
+        destructive:
+          "bg-destructive text-white inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 " +
+          "dark:focus-visible:ring-destructive/40",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type BadgeVariant = VariantKey<typeof badgeVariants, "variant">;
+  export type BadgeSize = VariantKey<typeof badgeVariants, "size">;
+
+  export type BadgeProps = {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    size,
+    class: className,
+    children,
+    ...rest
+  }: BadgeProps = $props();
+
+  const cls = $derived(cn(badgeVariants({ size, variant }), className));
+</script>
+
+<div {...(cls ? { class: cls } : {})} data-slot="badge" {...rest}>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/ui/src/primitives/block/block.svelte b/packages/svelte/ui/src/primitives/block/block.svelte
new file mode 100644
index 0000000..a6d3419
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/block/block.svelte
@@ -0,0 +1,34 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/block.json -->
+<!--
+  Block renders a resolved landmark element with children.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type BlockProps = {
+    tag?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { resolveTag, TagGroup } from "../../utils/tags";
+
+  let {
+    tag,
+    class: className,
+    children,
+    ...rest
+  }: BlockProps = $props();
+
+  const cls = $derived(cn(className));
+  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.Layout));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/primitives/box/box.svelte b/packages/svelte/ui/src/primitives/box/box.svelte
new file mode 100644
index 0000000..1058a88
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/box/box.svelte
@@ -0,0 +1,34 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/box.json -->
+<!--
+  Box renders a div layout wrapper.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type BoxProps = {
+    tag?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { resolveTag, TagGroup } from "../../utils/tags";
+
+  let {
+    tag,
+    class: className,
+    children,
+    ...rest
+  }: BoxProps = $props();
+
+  const cls = $derived(cn(className));
+  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.BoxAllowed));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/primitives/breadcrumb/breadcrumb.svelte b/packages/svelte/ui/src/primitives/breadcrumb/breadcrumb.svelte
new file mode 100644
index 0000000..01f7f80
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,68 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/breadcrumb.json -->
+<!--
+  Breadcrumb renders the full navigation trail.
+-->
+<script lang="ts" module>
+
+  export type BreadcrumbItem = {
+    label?: string;
+    href?: string;
+    current?: boolean;
+    disabled?: boolean;
+  };
+
+  export type BreadcrumbProps = {
+    items?: BreadcrumbItem[];
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { isSetStr, orUndef } from "../../utils/expr";
+
+  let {
+    items,
+    class: className,
+    ...rest
+  }: BreadcrumbProps = $props();
+
+  const cls = $derived(cn("text-sm", className));
+</script>
+
+<nav {...(cls ? { class: cls } : {})} {...rest}>
+  <ol class="flex flex-wrap items-center gap-2">
+    {#each items ?? [] as item}
+      <li class="inline-flex items-center">
+        {#if (isSetStr(item.href) && !(item.disabled))}
+          <a
+            href={orUndef(item.href)}
+            class={cn(
+              "text-sm",
+              (
+                item.current ? "font-medium"
+                : item.disabled ? "text-muted-foreground"
+                : "text-primary underline-offset-4 hover:underline"
+              )
+            )}
+            aria-current={item.current ? "page" : undefined}
+          >{item.label}</a>
+        {:else}
+          <span
+            class={cn(
+              "text-sm",
+              (
+                item.current ? "font-medium"
+                : item.disabled ? "text-muted-foreground"
+                : "text-primary underline-offset-4 hover:underline"
+              )
+            )}
+            aria-current={item.current ? "page" : undefined}
+          >{item.label}</span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
diff --git a/packages/svelte/ui/src/primitives/button-plain/button-plain.svelte b/packages/svelte/ui/src/primitives/button-plain/button-plain.svelte
new file mode 100644
index 0000000..1dea7fb
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/button-plain/button-plain.svelte
@@ -0,0 +1,41 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/button-plain.json -->
+<!--
+  ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it
+  themselves.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type ButtonPlainProps = {
+    type?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { oneOfOr } from "../../utils/expr";
+
+  let {
+    type,
+    disabled,
+    class: className,
+    children,
+    ...rest
+  }: ButtonPlainProps = $props();
+
+  const cls = $derived(cn((disabled ? "pointer-events-none opacity-50" : ""), className));
+</script>
+
+<button
+  type={oneOfOr(type, "button", "submit", "reset")}
+  {...(cls ? { class: cls } : {})}
+  disabled={disabled || undefined}
+  {...rest}
+>
+  {@render children?.()}
+</button>
diff --git a/packages/svelte/ui/src/primitives/button/button.svelte b/packages/svelte/ui/src/primitives/button/button.svelte
new file mode 100644
index 0000000..eb2950c
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/button/button.svelte
@@ -0,0 +1,119 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/button.json -->
+<!--
+  Button renders a button element, or an anchor when Href is set.
+  Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Button: the classes of each value of each prop (shadcn/cva style). */
+  export const buttonVariants = variants({
+    base:
+      "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring transition-colors " +
+      "disabled:pointer-events-none disabled:opacity-50 rounded",
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground inset-ring-primary",
+        outline: "bg-card text-foreground inset-ring-border",
+        ghost: "bg-transparent text-foreground inset-ring-transparent",
+        secondary: "bg-secondary text-secondary-foreground inset-ring-border",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 inset-ring-transparent focus-visible:ring-destructive/20 " +
+          "dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        link: "text-foreground inset-ring-transparent underline-offset-4 hover:underline",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        default: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base",
+      },
+      layout: {
+        default: "",
+        icon: "",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default", layout: "default" },
+    compoundVariants: [
+      { layout: "icon", size: "sm", class: "size-8 p-0 [&>svg]:size-4" },
+      { layout: "icon", size: "default", class: "size-10 p-0 [&>svg]:size-5" },
+      { layout: "icon", size: "lg", class: "size-12 p-0 [&>svg]:size-6" },
+      { variant: "outline", layout: "icon", class: "text-muted-foreground" },
+      { variant: "ghost", layout: "icon", class: "text-muted-foreground" },
+    ],
+  });
+
+  export type ButtonVariant = VariantKey<typeof buttonVariants, "variant">;
+  export type ButtonSize = VariantKey<typeof buttonVariants, "size">;
+  export type ButtonLayout = VariantKey<typeof buttonVariants, "layout">;
+
+  export type ButtonProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    layout?: ButtonLayout;
+    type?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    external?: boolean;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
+
+  let {
+    variant,
+    size,
+    layout,
+    type,
+    href,
+    target,
+    rel,
+    external,
+    disabled,
+    class: className,
+    children,
+    ...rest
+  }: ButtonProps = $props();
+
+  const cls = $derived(cn(
+    buttonVariants({ variant, size, layout }),
+    (disabled ? "pointer-events-none opacity-50" : ""),
+    className
+  ));
+  const targetValue = $derived((isSetStr(target) ? target : (external ? "_blank" : "")));
+  const relValue = $derived((isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : "")));
+</script>
+
+{#if isSetStr(href)}
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <a
+    href={orUndef(href)}
+    {...(cls ? { class: cls } : {})}
+    data-slot="button"
+    target={orUndef(targetValue)}
+    rel={orUndef(relValue)}
+    aria-disabled={disabled ? "true" : undefined}
+    tabindex={disabled ? -1 : undefined}
+    {...rest}
+  >
+    {@render children?.()}
+  </a>
+{:else}
+  <button
+    type={oneOfOr(type, "button", "submit", "reset")}
+    {...(cls ? { class: cls } : {})}
+    data-slot="button"
+    disabled={disabled || undefined}
+    {...rest}
+  >
+    {@render children?.()}
+  </button>
+{/if}
diff --git a/packages/svelte/ui/src/primitives/card/card-content.svelte b/packages/svelte/ui/src/primitives/card/card-content.svelte
new file mode 100644
index 0000000..25a2ad6
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/card/card-content.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardContent renders the padded main body slot.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CardContentProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: CardContentProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<div {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/ui/src/primitives/card/card-description.svelte b/packages/svelte/ui/src/primitives/card/card-description.svelte
new file mode 100644
index 0000000..c9e274b
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/card/card-description.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardDescription renders a muted subtitle in a p element.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CardDescriptionProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: CardDescriptionProps = $props();
+
+  const cls = $derived(cn("text-sm text-muted-foreground", className));
+</script>
+
+<p {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</p>
diff --git a/packages/svelte/ui/src/primitives/card/card-footer.svelte b/packages/svelte/ui/src/primitives/card/card-footer.svelte
new file mode 100644
index 0000000..e46ad69
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/card/card-footer.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardFooter renders the bottom action slot.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CardFooterProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: CardFooterProps = $props();
+
+  const cls = $derived(cn("flex items-center", className));
+</script>
+
+<div {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/ui/src/primitives/card/card-header.svelte b/packages/svelte/ui/src/primitives/card/card-header.svelte
new file mode 100644
index 0000000..58d3465
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/card/card-header.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardHeader renders the top slot.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CardHeaderProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: CardHeaderProps = $props();
+
+  const cls = $derived(cn("grid auto-rows-min items-start gap-2", className));
+</script>
+
+<div {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/ui/src/primitives/card/card-title.svelte b/packages/svelte/ui/src/primitives/card/card-title.svelte
new file mode 100644
index 0000000..bec2bbb
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/card/card-title.svelte
@@ -0,0 +1,34 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardTitle renders heading text at the As level (default h2).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type CardTitleProps = {
+    as?: 1 | 2 | 3 | 4 | 5 | 6;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { titleTag } from "../../utils/expr";
+
+  let {
+    as,
+    class: className,
+    children,
+    ...rest
+  }: CardTitleProps = $props();
+
+  const cls = $derived(cn("font-semibold leading-none", className));
+  const resolvedTagValue = $derived(titleTag(as));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/primitives/card/card.svelte b/packages/svelte/ui/src/primitives/card/card.svelte
new file mode 100644
index 0000000..e00f31b
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/card/card.svelte
@@ -0,0 +1,49 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  Card renders the bordered surface wrapper.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Card: the classes of each value of each prop (shadcn/cva style). */
+  export const cardVariants = variants({
+    base: "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+    variants: {
+      variant: {
+        default: "",
+        muted: "bg-muted",
+        ghost: "bg-transparent",
+        compact: "gap-4 p-4",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  });
+
+  export type CardVariant = VariantKey<typeof cardVariants, "variant">;
+
+  export type CardProps = {
+    variant?: CardVariant;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    class: className,
+    children,
+    ...rest
+  }: CardProps = $props();
+
+  const cls = $derived(cn(cardVariants({ variant }), className));
+</script>
+
+<div {...(cls ? { class: cls } : {})} data-slot="card" {...rest}>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/ui/src/primitives/checkbox/checkbox.svelte b/packages/svelte/ui/src/primitives/checkbox/checkbox.svelte
new file mode 100644
index 0000000..76cff7f
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/checkbox/checkbox.svelte
@@ -0,0 +1,64 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/checkbox.json -->
+<!--
+  Checkbox renders a styled input[type=checkbox].
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Checkbox: the classes of each value of each prop (shadcn/cva style). */
+  export const checkboxVariants = variants({
+    base:
+      "peer shrink-0 appearance-none bg-background inset-ring inset-ring-input checked:bg-primary " +
+      "checked:inset-ring-primary checkbox-glyph disabled:cursor-not-allowed disabled:opacity-50",
+    variants: {
+      size: {
+        default: "size-5",
+        sm: "size-4",
+      },
+      variant: {
+        default: "",
+        ghost: "bg-muted",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type CheckboxVariant = VariantKey<typeof checkboxVariants, "variant">;
+  export type CheckboxSize = VariantKey<typeof checkboxVariants, "size">;
+
+  export type CheckboxProps = {
+    variant?: CheckboxVariant;
+    size?: CheckboxSize;
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    size,
+    checked,
+    disabled,
+    required,
+    class: className,
+    ...rest
+  }: CheckboxProps = $props();
+
+  const cls = $derived(cn(checkboxVariants({ size, variant }), className));
+</script>
+
+<input
+  type="checkbox"
+  {...(cls ? { class: cls } : {})}
+  checked={checked || undefined}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  {...rest}
+/>
diff --git a/packages/svelte/ui/src/primitives/container/container.svelte b/packages/svelte/ui/src/primitives/container/container.svelte
new file mode 100644
index 0000000..fe3c3f6
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/container/container.svelte
@@ -0,0 +1,34 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/container.json -->
+<!--
+  Container renders the outer content shell.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type ContainerProps = {
+    tag?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { resolveTag, TagGroup } from "../../utils/tags";
+
+  let {
+    tag,
+    class: className,
+    children,
+    ...rest
+  }: ContainerProps = $props();
+
+  const cls = $derived(cn(className));
+  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.Container));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/primitives/dialog/dialog.svelte b/packages/svelte/ui/src/primitives/dialog/dialog.svelte
new file mode 100644
index 0000000..f435e96
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/dialog/dialog.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/dialog.json -->
+<!--
+  Dialog renders a native dialog element.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Dialog: the classes of each value of each prop (shadcn/cva style). */
+  export const dialogVariants = variants({
+    base:
+      "m-auto flex flex-col bg-background text-foreground inset-ring inset-ring-border shadow-lg " +
+      "backdrop:bg-foreground/20 rounded",
+    variants: {
+      size: {
+        default: "w-70",
+        full: "h-full w-full",
+        lg: "w-100",
+        xl: "w-140",
+      },
+      variant: {
+        card: "bg-card text-card-foreground",
+        default: "",
+        sheet: "min-h-screen rounded-none",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type DialogVariant = VariantKey<typeof dialogVariants, "variant">;
+  export type DialogSize = VariantKey<typeof dialogVariants, "size">;
+
+  export type DialogProps = {
+    variant?: DialogVariant;
+    size?: DialogSize;
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    size,
+    open,
+    class: className,
+    children,
+    ...rest
+  }: DialogProps = $props();
+
+  const cls = $derived(cn(dialogVariants({ size, variant }), className));
+</script>
+
+<dialog {...(cls ? { class: cls } : {})} open={open || undefined} {...rest}>
+  {@render children?.()}
+</dialog>
diff --git a/packages/svelte/ui/src/primitives/disclosure/disclosure.svelte b/packages/svelte/ui/src/primitives/disclosure/disclosure.svelte
new file mode 100644
index 0000000..c0c6f20
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/disclosure/disclosure.svelte
@@ -0,0 +1,51 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/disclosure.json -->
+<!--
+  Disclosure renders native details.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Disclosure: the classes of each value of each prop (shadcn/cva style). */
+  export const disclosureVariants = variants({
+    base: "group",
+    variants: {
+      variant: {
+        card: "rounded bg-card inset-ring inset-ring-border",
+        default: "rounded inset-ring inset-ring-border",
+        ghost: "",
+        item: "border-b border-border last:border-b-0",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  });
+
+  export type DisclosureVariant = VariantKey<typeof disclosureVariants, "variant">;
+
+  export type DisclosureProps = {
+    variant?: DisclosureVariant;
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    open,
+    class: className,
+    children,
+    ...rest
+  }: DisclosureProps = $props();
+
+  const cls = $derived(cn(disclosureVariants({ variant }), className));
+</script>
+
+<details {...(cls ? { class: cls } : {})} open={open || undefined} {...rest}>
+  {@render children?.()}
+</details>
diff --git a/packages/svelte/ui/src/primitives/disclosure/summary.svelte b/packages/svelte/ui/src/primitives/disclosure/summary.svelte
new file mode 100644
index 0000000..54e6e0d
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/disclosure/summary.svelte
@@ -0,0 +1,60 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/disclosure.json -->
+<!--
+  Summary renders native summary, followed by a Lucide chevron-down indicator that turns over when the details
+  open (CSS only: group-open:rotate-180 on the Disclosure group).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Summary: the classes of each value of each prop (shadcn/cva style). */
+  export const summaryVariants = variants({
+    base: "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
+    variants: {
+      size: {
+        sm: "text-xs font-semibold",
+        default: "text-sm font-semibold",
+        lg: "text-base font-semibold",
+      },
+      variant: {
+        card: "py-2 pr-4 pl-4",
+        default: "py-2 pr-4 pl-4",
+        ghost: "py-2",
+        item: "py-4 text-muted-foreground hover:text-foreground group-open:text-foreground",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type SummaryVariant = VariantKey<typeof summaryVariants, "variant">;
+
+  export type SummaryProps = {
+    variant?: SummaryVariant;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    class: className,
+    children,
+    ...rest
+  }: SummaryProps = $props();
+
+  const cls = $derived(cn(summaryVariants({ variant }), className));
+</script>
+
+<summary {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+  <span
+    class="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+    aria-hidden="true"
+    data-slot="summary-indicator"
+  ></span>
+</summary>
diff --git a/packages/svelte/ui/src/primitives/form/data-list.svelte b/packages/svelte/ui/src/primitives/form/data-list.svelte
new file mode 100644
index 0000000..3ebd73e
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/data-list.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  DataList renders a native datalist.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type DataListProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: DataListProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<datalist {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</datalist>
diff --git a/packages/svelte/ui/src/primitives/form/data-option.svelte b/packages/svelte/ui/src/primitives/form/data-option.svelte
new file mode 100644
index 0000000..101cf9f
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/data-option.svelte
@@ -0,0 +1,21 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  DataOption renders an option inside a datalist.
+-->
+<script lang="ts" module>
+
+  export type DataOptionProps = {
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    ...rest
+  }: DataOptionProps = $props();
+</script>
+
+<option {...rest}></option>
diff --git a/packages/svelte/ui/src/primitives/form/fieldset.svelte b/packages/svelte/ui/src/primitives/form/fieldset.svelte
new file mode 100644
index 0000000..f6135f3
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/fieldset.svelte
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Fieldset renders a native fieldset.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Fieldset: the classes of each value of each prop (shadcn/cva style). */
+  export const fieldsetVariants = variants({
+    base: "grid",
+    variants: {
+      size: {
+        default: "gap-2",
+        lg: "gap-4",
+        sm: "gap-2",
+      },
+      variant: {
+        card: "rounded p-4 inset-ring inset-ring-border",
+        default: "",
+        inline: "flex flex-wrap items-start gap-4",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type FieldsetVariant = VariantKey<typeof fieldsetVariants, "variant">;
+  export type FieldsetSize = VariantKey<typeof fieldsetVariants, "size">;
+
+  export type FieldsetProps = {
+    variant?: FieldsetVariant;
+    size?: FieldsetSize;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    size,
+    disabled,
+    class: className,
+    children,
+    ...rest
+  }: FieldsetProps = $props();
+
+  const cls = $derived(cn(fieldsetVariants({ size, variant }), className));
+</script>
+
+<fieldset {...(cls ? { class: cls } : {})} disabled={disabled || undefined} {...rest}>
+  {@render children?.()}
+</fieldset>
diff --git a/packages/svelte/ui/src/primitives/form/form-description.svelte b/packages/svelte/ui/src/primitives/form/form-description.svelte
new file mode 100644
index 0000000..8a97316
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/form-description.svelte
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  FormDescription renders muted helper copy below a control.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../../utils";
+
+  /** FormDescription: the classes of each value of each prop (shadcn/cva style). */
+  export const formDescriptionVariants = variants({
+    base: "text-xs font-semibold text-muted-foreground",
+    variants: {},
+    defaultVariants: {},
+  });
+
+  export type FormDescriptionProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: FormDescriptionProps = $props();
+
+  const cls = $derived(cn(formDescriptionVariants(), className));
+</script>
+
+<p {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</p>
diff --git a/packages/svelte/ui/src/primitives/form/form-item.svelte b/packages/svelte/ui/src/primitives/form/form-item.svelte
new file mode 100644
index 0000000..551be68
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/form-item.svelte
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  FormItem groups a single field with spacing for label and control.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../../utils";
+
+  /** FormItem: the classes of each value of each prop (shadcn/cva style). */
+  export const formItemVariants = variants({
+    base: "flex flex-col gap-2",
+    variants: {},
+    defaultVariants: {},
+  });
+
+  export type FormItemProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: FormItemProps = $props();
+
+  const cls = $derived(cn(formItemVariants(), className));
+</script>
+
+<div {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/ui/src/primitives/form/form-message.svelte b/packages/svelte/ui/src/primitives/form/form-message.svelte
new file mode 100644
index 0000000..b040c11
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/form-message.svelte
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  FormMessage renders destructive validation feedback.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../../utils";
+
+  /** FormMessage: the classes of each value of each prop (shadcn/cva style). */
+  export const formMessageVariants = variants({
+    base: "text-xs font-semibold text-destructive",
+    variants: {},
+    defaultVariants: {},
+  });
+
+  export type FormMessageProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: FormMessageProps = $props();
+
+  const cls = $derived(cn(formMessageVariants(), className));
+</script>
+
+<p {...(cls ? { class: cls } : {})} role="alert" {...rest}>
+  {@render children?.()}
+</p>
diff --git a/packages/svelte/ui/src/primitives/form/form.svelte b/packages/svelte/ui/src/primitives/form/form.svelte
new file mode 100644
index 0000000..8601ad3
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/form.svelte
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Form renders a vertical grid form container.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../../utils";
+
+  /** Form: the classes of each value of each prop (shadcn/cva style). */
+  export const formVariants = variants({
+    base: "grid gap-4",
+    variants: {},
+    defaultVariants: {},
+  });
+
+  export type FormProps = {
+    novalidate?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    novalidate: noValidate,
+    class: className,
+    children,
+    ...rest
+  }: FormProps = $props();
+
+  const cls = $derived(cn(formVariants(), className));
+</script>
+
+<form {...(cls ? { class: cls } : {})} novalidate={noValidate || undefined} {...rest}>
+  {@render children?.()}
+</form>
diff --git a/packages/svelte/ui/src/primitives/form/legend.svelte b/packages/svelte/ui/src/primitives/form/legend.svelte
new file mode 100644
index 0000000..6063dc7
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/legend.svelte
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Legend renders a native legend.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Legend: the classes of each value of each prop (shadcn/cva style). */
+  export const legendVariants = variants({
+    base: "font-bold",
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      },
+      variant: {
+        default: "",
+        muted: "text-muted-foreground",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type LegendVariant = VariantKey<typeof legendVariants, "variant">;
+  export type LegendSize = VariantKey<typeof legendVariants, "size">;
+
+  export type LegendProps = {
+    variant?: LegendVariant;
+    size?: LegendSize;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    size,
+    class: className,
+    children,
+    ...rest
+  }: LegendProps = $props();
+
+  const cls = $derived(cn(legendVariants({ size, variant }), className));
+</script>
+
+<legend {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</legend>
diff --git a/packages/svelte/ui/src/primitives/form/meter.svelte b/packages/svelte/ui/src/primitives/form/meter.svelte
new file mode 100644
index 0000000..85569be
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/meter.svelte
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Meter renders a native meter.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Meter: the classes of each value of each prop (shadcn/cva style). */
+  export const meterVariants = variants({
+    base: "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+    variants: {
+      size: {
+        sm: "h-1",
+        default: "h-2",
+        lg: "h-3",
+      },
+      variant: {
+        default: "[--bar:var(--color-primary)]",
+        muted: "[--bar:var(--color-muted-foreground)]",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type MeterVariant = VariantKey<typeof meterVariants, "variant">;
+  export type MeterSize = VariantKey<typeof meterVariants, "size">;
+
+  export type MeterProps = {
+    variant?: MeterVariant;
+    size?: MeterSize;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    size,
+    class: className,
+    children,
+    ...rest
+  }: MeterProps = $props();
+
+  const cls = $derived(cn(meterVariants({ size, variant }), className));
+</script>
+
+<meter {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</meter>
diff --git a/packages/svelte/ui/src/primitives/form/output.svelte b/packages/svelte/ui/src/primitives/form/output.svelte
new file mode 100644
index 0000000..412f923
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/output.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Output renders a native output element.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type OutputProps = {
+    value?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    value,
+    class: className,
+    children,
+    ...rest
+  }: OutputProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<output {...(cls ? { class: cls } : {})} {...rest}>{value}{@render children?.()}</output>
diff --git a/packages/svelte/ui/src/primitives/form/progress.svelte b/packages/svelte/ui/src/primitives/form/progress.svelte
new file mode 100644
index 0000000..efe61c2
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/form/progress.svelte
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Progress renders a native progress element.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Progress: the classes of each value of each prop (shadcn/cva style). */
+  export const progressVariants = variants({
+    base: "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+    variants: {
+      size: {
+        sm: "h-1",
+        default: "h-2",
+        lg: "h-3",
+      },
+      variant: {
+        default: "[--bar:var(--color-primary)]",
+        muted: "[--bar:var(--color-muted-foreground)]",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type ProgressVariant = VariantKey<typeof progressVariants, "variant">;
+  export type ProgressSize = VariantKey<typeof progressVariants, "size">;
+
+  export type ProgressProps = {
+    variant?: ProgressVariant;
+    size?: ProgressSize;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    size,
+    class: className,
+    children,
+    ...rest
+  }: ProgressProps = $props();
+
+  const cls = $derived(cn(progressVariants({ size, variant }), className));
+</script>
+
+<progress {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</progress>
diff --git a/packages/svelte/ui/src/primitives/grid/grid-col.svelte b/packages/svelte/ui/src/primitives/grid/grid-col.svelte
new file mode 100644
index 0000000..f286252
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/grid/grid-col.svelte
@@ -0,0 +1,60 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/grid.json -->
+<!--
+  GridCol renders one grid column child.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type GridColProps = {
+    span?: number;
+    start?: number;
+    end?: number;
+    order?: number;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { intMapOr } from "../../utils/expr";
+
+  let {
+    span,
+    start,
+    end,
+    order,
+    class: className,
+    children,
+    ...rest
+  }: GridColProps = $props();
+
+  const cls = $derived(cn(
+    intMapOr(span, {
+      1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4", 5: "col-span-5",
+      6: "col-span-6", 7: "col-span-7", 8: "col-span-8", 9: "col-span-9", 10: "col-span-10",
+      11: "col-span-11", 12: "col-span-12",
+    }, ""),
+    intMapOr(start, {
+      1: "col-start-1", 2: "col-start-2", 3: "col-start-3", 4: "col-start-4", 5: "col-start-5",
+      6: "col-start-6", 7: "col-start-7", 8: "col-start-8", 9: "col-start-9", 10: "col-start-10",
+      11: "col-start-11", 12: "col-start-12",
+    }, ""),
+    intMapOr(end, {
+      1: "col-end-1", 2: "col-end-2", 3: "col-end-3", 4: "col-end-4", 5: "col-end-5", 6: "col-end-6",
+      7: "col-end-7", 8: "col-end-8", 9: "col-end-9", 10: "col-end-10", 11: "col-end-11",
+      12: "col-end-12",
+    }, ""),
+    intMapOr(order, {
+      1: "order-1", 2: "order-2", 3: "order-3", 4: "order-4", 5: "order-5", 6: "order-6", 7: "order-7",
+      8: "order-8", 9: "order-9", 10: "order-10", 11: "order-11", 12: "order-12",
+    }, ""),
+    className
+  ));
+</script>
+
+<div {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/ui/src/primitives/grid/grid.svelte b/packages/svelte/ui/src/primitives/grid/grid.svelte
new file mode 100644
index 0000000..e806a2c
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/grid/grid.svelte
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/grid.json -->
+<!--
+  Grid renders a display:grid container.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../../utils";
+
+  /** Grid: the classes of each value of each prop (shadcn/cva style). */
+  export const gridVariants = variants({
+    base: "grid",
+    variants: {},
+    defaultVariants: {},
+  });
+
+  export type GridProps = {
+    cols?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { defaultIfEmpty, mapOr } from "../../utils/expr";
+
+  let {
+    cols,
+    class: className,
+    children,
+    ...rest
+  }: GridProps = $props();
+
+  const cls = $derived(cn(
+    gridVariants(),
+    ((className ?? "").includes("grid-cols-") ? "" : mapOr(defaultIfEmpty(cols, "1"), {
+      "1": "grid-cols-1", "2": "grid-cols-2", "3": "grid-cols-3", "4": "grid-cols-4", "5": "grid-cols-5",
+      "6": "grid-cols-6", "7": "grid-cols-7", "8": "grid-cols-8", "9": "grid-cols-9",
+      "10": "grid-cols-10", "11": "grid-cols-11", "12": "grid-cols-12",
+      "1-2": "grid-cols-1 md:grid-cols-2", "1-3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+      "1-4": "grid-cols-1 sm:grid-cols-2 md:grid-cols-4", "2-3": "grid-cols-2 md:grid-cols-3",
+      "2-4": "grid-cols-2 md:grid-cols-4", "2-6": "grid-cols-2 md:grid-cols-6",
+      "3-6": "grid-cols-3 md:grid-cols-6",
+    }, "")),
+    className
+  ));
+</script>
+
+<div {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</div>
diff --git a/packages/svelte/ui/src/primitives/group/group.svelte b/packages/svelte/ui/src/primitives/group/group.svelte
new file mode 100644
index 0000000..5969f74
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/group/group.svelte
@@ -0,0 +1,76 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/group.json -->
+<!--
+  Group renders a horizontal flex container.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Group: the classes of each value of each prop (shadcn/cva style). */
+  export const groupVariants = variants({
+    base: "flex min-w-0",
+    variants: {
+      gap: {
+        "0": "gap-0",
+        "2": "gap-2",
+        "4": "gap-4",
+        "6": "gap-6",
+        "8": "gap-8",
+        "10": "gap-10",
+        "12": "gap-12",
+        auto: "",
+      },
+      align: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
+      },
+      justify: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+      },
+    },
+    defaultVariants: { gap: "auto", align: "center", justify: "start" },
+  });
+
+  export type GroupGap = VariantKey<typeof groupVariants, "gap">;
+  export type GroupAlign = VariantKey<typeof groupVariants, "align">;
+  export type GroupJustify = VariantKey<typeof groupVariants, "justify">;
+
+  export type GroupProps = {
+    gap?: GroupGap;
+    align?: GroupAlign;
+    justify?: GroupJustify;
+    tag?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { resolveTag, TagGroup } from "../../utils/tags";
+
+  let {
+    gap,
+    align,
+    justify,
+    tag,
+    class: className,
+    children,
+    ...rest
+  }: GroupProps = $props();
+
+  const cls = $derived(cn(groupVariants({ gap, align, justify }), className));
+  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.Group));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/primitives/icon/icon.svelte b/packages/svelte/ui/src/primitives/icon/icon.svelte
new file mode 100644
index 0000000..da66300
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/icon/icon.svelte
@@ -0,0 +1,110 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/icon.json -->
+<!--
+  Icon renders a class-based span, svg use, or text fallback host.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Icon: the classes of each value of each prop (shadcn/cva style). */
+  export const iconVariants = variants({
+    base: "inline-block shrink-0",
+    variants: {
+      size: {
+        xs: "size-3",
+        default: "size-4",
+        md: "size-5",
+        lg: "size-6",
+      },
+      type: {
+        class: "",
+        svg: "",
+        text: "",
+      },
+    },
+    defaultVariants: { size: "default", type: "class" },
+  });
+
+  export type IconSize = VariantKey<typeof iconVariants, "size">;
+
+  export type IconProps = {
+    name?: string;
+    type?: string;
+    baseClass?: string;
+    prefix?: string;
+    size?: IconSize;
+    href?: string;
+    title?: string;
+    "aria-label"?: string;
+    decorative?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { concatTrim, eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
+
+  let {
+    name,
+    type,
+    baseClass,
+    prefix,
+    size,
+    href,
+    title,
+    "aria-label": ariaLabel,
+    decorative,
+    class: className,
+    children,
+    ...rest
+  }: IconProps = $props();
+
+  const cls = $derived(cn(
+    iconVariants({ size, type: oneOfOr(type, "class", "svg", "text") as VariantKey<typeof iconVariants, "type"> }),
+    (eqStr(oneOfOr(type, "class", "svg", "text"), "class") ? baseClass : ""),
+    ((eqStr(oneOfOr(type, "class", "svg", "text"), "class") && isSetStr(name)) ? concatTrim(prefix, name) : ""),
+    className
+  ));
+  const iconKindValue = $derived(oneOfOr(type, "class", "svg", "text"));
+  const isDecorativeValue = $derived((decorative || (!(isSetStr(title)) && !(isSetStr(ariaLabel)))));
+</script>
+
+{#if eqStr(iconKindValue, "svg")}
+  <svg
+    {...(cls ? { class: cls } : {})}
+    aria-hidden={isDecorativeValue ? "true" : undefined}
+    role={!(isDecorativeValue) ? "img" : undefined}
+    aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined}
+    {...rest}
+  >
+    {#if isSetStr(title)}
+      <title>{title}</title>
+    {/if}
+    {#if isSetStr(href)}
+      <use href={orUndef(href)}></use>
+    {/if}
+    {@render children?.()}
+  </svg>
+{:else if eqStr(iconKindValue, "text")}
+  <span
+    {...(cls ? { class: cls } : {})}
+    aria-hidden={isDecorativeValue ? "true" : undefined}
+    role={!(isDecorativeValue) ? "img" : undefined}
+    aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined}
+    {...rest}
+  >
+    {@render children?.()}
+  </span>
+{:else}
+  <span
+    {...(cls ? { class: cls } : {})}
+    aria-hidden={isDecorativeValue ? "true" : undefined}
+    role={!(isDecorativeValue) ? "img" : undefined}
+    aria-label={(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined}
+    {...rest}
+  ></span>
+{/if}
diff --git a/packages/svelte/ui/src/primitives/iconbadge/icon-badge.svelte b/packages/svelte/ui/src/primitives/iconbadge/icon-badge.svelte
new file mode 100644
index 0000000..e530eed
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/iconbadge/icon-badge.svelte
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/iconbadge.json -->
+<!--
+  IconBadge renders children as the badge content.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** IconBadge: the classes of each value of each prop (shadcn/cva style). */
+  export const iconbadgeVariants = variants({
+    base: "inline-flex shrink-0 items-center justify-center font-bold rounded",
+    variants: {
+      variant: {
+        default: "bg-muted text-muted-foreground",
+        primary: "bg-primary text-primary-foreground",
+        accent: "bg-accent text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground",
+        outline: "text-foreground inset-ring inset-ring-border",
+        destructive: "bg-destructive text-white dark:bg-destructive/60",
+      },
+      size: {
+        xs: "size-6 text-xs",
+        sm: "size-8 text-xs",
+        default: "size-10 text-xs",
+        lg: "size-12 text-sm",
+        xl: "size-20 text-base",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  });
+
+  export type IconBadgeVariant = VariantKey<typeof iconbadgeVariants, "variant">;
+  export type IconBadgeSize = VariantKey<typeof iconbadgeVariants, "size">;
+
+  export type IconBadgeProps = {
+    variant?: IconBadgeVariant;
+    size?: IconBadgeSize;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    size,
+    class: className,
+    children,
+    ...rest
+  }: IconBadgeProps = $props();
+
+  const cls = $derived(cn(iconbadgeVariants({ variant, size }), className));
+</script>
+
+<span {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</span>
diff --git a/packages/svelte/ui/src/primitives/image/image.svelte b/packages/svelte/ui/src/primitives/image/image.svelte
new file mode 100644
index 0000000..5bac83d
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/image/image.svelte
@@ -0,0 +1,103 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/image.json -->
+<!--
+  Image renders an accessible img element.
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Image: the classes of each value of each prop (shadcn/cva style). */
+  export const imageVariants = variants({
+    base: "block max-w-full",
+    variants: {
+      aspect: {
+        auto: "aspect-auto",
+        square: "aspect-square",
+        video: "aspect-video",
+      },
+      fit: {
+        contain: "object-contain",
+        cover: "object-cover",
+        fill: "object-fill",
+        none: "object-none",
+        "scale-down": "object-scale-down",
+      },
+      position: {
+        bottom: "object-bottom",
+        center: "object-center",
+        left: "object-left",
+        "left-bottom": "object-left-bottom",
+        "left-top": "object-left-top",
+        right: "object-right",
+        "right-bottom": "object-right-bottom",
+        "right-top": "object-right-top",
+        top: "object-top",
+      },
+      size: {
+        auto: "",
+        default: "",
+        full: "h-full w-full",
+        xs: "size-6",
+        sm: "size-8",
+        md: "size-12",
+        lg: "size-16",
+        xl: "size-20",
+      },
+      variant: {
+        default: "",
+        logo: "object-contain",
+      },
+    },
+    defaultVariants: { aspect: "auto", fit: "cover", position: "center", size: "auto", variant: "default" },
+  });
+
+  export type ImageVariant = VariantKey<typeof imageVariants, "variant">;
+  export type ImageSize = VariantKey<typeof imageVariants, "size">;
+  export type ImageFit = VariantKey<typeof imageVariants, "fit">;
+  export type ImagePosition = VariantKey<typeof imageVariants, "position">;
+  export type ImageAspect = VariantKey<typeof imageVariants, "aspect">;
+
+  export type ImageProps = {
+    variant?: ImageVariant;
+    size?: ImageSize;
+    alt?: string;
+    fit?: ImageFit;
+    position?: ImagePosition;
+    aspect?: ImageAspect;
+    loading?: string;
+    decoding?: string;
+    decorative?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { oneOfOr } from "../../utils/expr";
+
+  let {
+    variant,
+    size,
+    alt,
+    fit,
+    position,
+    aspect,
+    loading,
+    decoding,
+    decorative,
+    class: className,
+    ...rest
+  }: ImageProps = $props();
+
+  const cls = $derived(cn(imageVariants({ aspect, fit, position, size, variant }), className));
+</script>
+
+<img
+  alt={((decorative ? "" : alt)) ?? ""}
+  loading={oneOfOr(loading, "lazy", "eager")}
+  decoding={oneOfOr(decoding, "async", "sync", "auto")}
+  {...(cls ? { class: cls } : {})}
+  aria-hidden={decorative ? "true" : undefined}
+  {...rest}
+/>
diff --git a/packages/svelte/ui/src/primitives/image/picture.svelte b/packages/svelte/ui/src/primitives/image/picture.svelte
new file mode 100644
index 0000000..3b00520
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/image/picture.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/image.json -->
+<!--
+  Picture renders a responsive image wrapper.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type PictureProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: PictureProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<picture {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</picture>
diff --git a/packages/svelte/ui/src/primitives/image/source.svelte b/packages/svelte/ui/src/primitives/image/source.svelte
new file mode 100644
index 0000000..ac9cb1b
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/image/source.svelte
@@ -0,0 +1,21 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/image.json -->
+<!--
+  Source renders a source candidate for picture, video, or audio.
+-->
+<script lang="ts" module>
+
+  export type SourceProps = {
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    ...rest
+  }: SourceProps = $props();
+</script>
+
+<source {...rest} />
diff --git a/packages/svelte/ui/src/primitives/inline/inline.svelte b/packages/svelte/ui/src/primitives/inline/inline.svelte
new file mode 100644
index 0000000..8fedf30
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/inline/inline.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/inline.json -->
+<!--
+  Inline renders a span element with inline copy classes.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type InlineProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: InlineProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<span {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</span>
diff --git a/packages/svelte/ui/src/primitives/input/input.svelte b/packages/svelte/ui/src/primitives/input/input.svelte
new file mode 100644
index 0000000..79773c5
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/input/input.svelte
@@ -0,0 +1,66 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/input.json -->
+<!--
+  Input renders a styled single-line form control.
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Input: the classes of each value of each prop (shadcn/cva style). */
+  export const inputVariants = variants({
+    base:
+      "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+      "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+      "focus-visible:inset-ring-ring rounded",
+    variants: {
+      size: {
+        sm: "h-8 px-3 text-base md:text-sm",
+        default: "h-10 px-3 text-base md:text-sm",
+        lg: "h-12 px-4 text-base",
+      },
+      variant: {
+        default: "",
+        ghost: "bg-muted inset-ring-transparent",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type InputVariant = VariantKey<typeof inputVariants, "variant">;
+  export type InputSize = VariantKey<typeof inputVariants, "size">;
+
+  export type InputProps = {
+    variant?: InputVariant;
+    size?: InputSize;
+    type?: string;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { defaultIfEmpty } from "../../utils/expr";
+
+  let {
+    variant,
+    size,
+    type,
+    disabled,
+    required,
+    class: className,
+    ...rest
+  }: InputProps = $props();
+
+  const cls = $derived(cn(inputVariants({ size, variant }), className));
+</script>
+
+<input
+  type={defaultIfEmpty(type, "text")}
+  {...(cls ? { class: cls } : {})}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  {...rest}
+/>
diff --git a/packages/svelte/ui/src/primitives/label/label.svelte b/packages/svelte/ui/src/primitives/label/label.svelte
new file mode 100644
index 0000000..1c59351
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/label/label.svelte
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/label.json -->
+<!--
+  Label renders accessible text linked to a control.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../../utils";
+
+  /** Label: the classes of each value of each prop (shadcn/cva style). */
+  export const labelVariants = variants({
+    base: "text-xs font-bold text-foreground",
+    variants: {},
+    defaultVariants: {},
+  });
+
+  export type LabelProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: LabelProps = $props();
+
+  const cls = $derived(cn(labelVariants(), className));
+</script>
+
+<label {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</label>
diff --git a/packages/svelte/ui/src/primitives/linebreak/break.svelte b/packages/svelte/ui/src/primitives/linebreak/break.svelte
new file mode 100644
index 0000000..25d09be
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/linebreak/break.svelte
@@ -0,0 +1,29 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/linebreak.json -->
+<!--
+  Break renders br by default, or wbr when Type is wbr/word.
+-->
+<script lang="ts" module>
+
+  export type BreakProps = {
+    type?: string;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { mapOr } from "../../utils/expr";
+
+  let {
+    type,
+    class: className,
+    ...rest
+  }: BreakProps = $props();
+
+  const cls = $derived(cn(className));
+  const resolvedTagValue = $derived(mapOr(type, { "wbr": "wbr", "word": "wbr" }, "br"));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest} />
diff --git a/packages/svelte/ui/src/primitives/link-plain/link-plain.svelte b/packages/svelte/ui/src/primitives/link-plain/link-plain.svelte
new file mode 100644
index 0000000..930a282
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/link-plain/link-plain.svelte
@@ -0,0 +1,49 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/link-plain.json -->
+<!--
+  LinkPlain is a bare anchor: no styling beyond Class.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type LinkPlainProps = {
+    target?: string;
+    rel?: string;
+    external?: boolean;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { eqStr, isSetStr, orUndef } from "../../utils/expr";
+
+  let {
+    target,
+    rel,
+    external,
+    disabled,
+    class: className,
+    children,
+    ...rest
+  }: LinkPlainProps = $props();
+
+  const cls = $derived(cn((disabled ? "pointer-events-none opacity-50" : ""), className));
+  const targetValue = $derived((isSetStr(target) ? target : (external ? "_blank" : "")));
+  const relValue = $derived((isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : "")));
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<a
+  {...(cls ? { class: cls } : {})}
+  target={orUndef(targetValue)}
+  rel={orUndef(relValue)}
+  aria-disabled={disabled ? "true" : undefined}
+  tabindex={disabled ? -1 : undefined}
+  {...rest}
+>
+  {@render children?.()}
+</a>
diff --git a/packages/svelte/ui/src/primitives/link/link.svelte b/packages/svelte/ui/src/primitives/link/link.svelte
new file mode 100644
index 0000000..ee27099
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/link/link.svelte
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/link.json -->
+<!--
+  Link renders a semantic anchor element.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Link: the classes of each value of each prop (shadcn/cva style). */
+  export const linkVariants = variants({
+    base: "inline-flex items-center underline-offset-4",
+    variants: {
+      size: {
+        sm: "gap-2 text-sm font-medium",
+        default: "gap-2 text-base font-semibold",
+        md: "gap-2 text-xl font-semibold",
+        lg: "gap-2 text-2xl font-semibold",
+      },
+      variant: {
+        block: "flex w-full text-foreground",
+        default: "text-foreground hover:underline",
+        external: "text-foreground hover:underline",
+        muted: "text-muted-foreground hover:text-foreground",
+        nav: "text-foreground",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type LinkVariant = VariantKey<typeof linkVariants, "variant">;
+  export type LinkSize = VariantKey<typeof linkVariants, "size">;
+
+  export type LinkProps = {
+    variant?: LinkVariant;
+    size?: LinkSize;
+    target?: string;
+    rel?: string;
+    external?: boolean;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { eqStr, isSetStr, orUndef } from "../../utils/expr";
+
+  let {
+    variant,
+    size,
+    target,
+    rel,
+    external,
+    disabled,
+    class: className,
+    children,
+    ...rest
+  }: LinkProps = $props();
+
+  const cls = $derived(cn(linkVariants({ size, variant }), (disabled ? "pointer-events-none opacity-50" : ""), className));
+  const targetValue = $derived((isSetStr(target) ? target : (external ? "_blank" : "")));
+  const relValue = $derived((isSetStr(rel) ? rel : ((external || eqStr(targetValue, "_blank")) ? "noopener noreferrer" : "")));
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<a
+  {...(cls ? { class: cls } : {})}
+  target={orUndef(targetValue)}
+  rel={orUndef(relValue)}
+  aria-disabled={disabled ? "true" : undefined}
+  tabindex={disabled ? -1 : undefined}
+  {...rest}
+>
+  {@render children?.()}
+</a>
diff --git a/packages/svelte/ui/src/primitives/list/list-item.svelte b/packages/svelte/ui/src/primitives/list/list-item.svelte
new file mode 100644
index 0000000..165bb49
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/list/list-item.svelte
@@ -0,0 +1,42 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/list.json -->
+<!--
+  ListItem renders one li with optional value attribute.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type ListItemProps = {
+    tag?: string;
+    value?: number;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { eqStr, isSetNum } from "../../utils/expr";
+  import { resolveTag, TagGroup } from "../../utils/tags";
+
+  let {
+    tag,
+    value,
+    class: className,
+    children,
+    ...rest
+  }: ListItemProps = $props();
+
+  const cls = $derived(cn(className));
+  const resolvedTagValue = $derived(resolveTag(tag, "li", TagGroup.ListItem));
+</script>
+
+<svelte:element
+  this={resolvedTagValue}
+  {...(cls ? { class: cls } : {})}
+  {...({ "value": (isSetNum(value) && eqStr(resolvedTagValue, "li")) ? String(value ?? 0) : undefined } as Record<string, unknown>)}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/primitives/list/list.svelte b/packages/svelte/ui/src/primitives/list/list.svelte
new file mode 100644
index 0000000..f3b8b4b
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/list/list.svelte
@@ -0,0 +1,34 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/list.json -->
+<!--
+  List renders a list container (ul, ol, dl, or menu).
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type ListProps = {
+    tag?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { resolveTag, TagGroup } from "../../utils/tags";
+
+  let {
+    tag,
+    class: className,
+    children,
+    ...rest
+  }: ListProps = $props();
+
+  const cls = $derived(cn(className));
+  const resolvedTagValue = $derived(resolveTag(tag, "ul", TagGroup.List));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/primitives/lucide-icon/lucide-icon.svelte b/packages/svelte/ui/src/primitives/lucide-icon/lucide-icon.svelte
new file mode 100644
index 0000000..81c9eee
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/lucide-icon/lucide-icon.svelte
@@ -0,0 +1,39 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/lucide-icon.json -->
+<!--
+  LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file.
+  Decorative (aria-hidden) unless a `label` is given.
+-->
+<script lang="ts" module>
+  export type LucideIconProps = { name: string; size?: number; strokeWidth?: number; label?: string; class?: string };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { LUCIDE } from "./lucide-icons";
+
+  let { name, size = 16, strokeWidth = 2, label, class: className }: LucideIconProps = $props();
+  const nodes = $derived(LUCIDE[name] ?? LUCIDE["circle"] ?? []);
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width={size}
+  height={size}
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={cn("inline-block shrink-0", className)}
+  aria-hidden={label ? undefined : "true"}
+  aria-label={label}
+  role={label ? "img" : undefined}
+  data-slot="icon"
+  data-lucide={name}
+>
+  {#each nodes as [tag, attrs], i (i)}
+    <svelte:element this={tag} {...attrs} />
+  {/each}
+</svg>
diff --git a/packages/svelte/ui/src/primitives/lucide-icon/lucide-icons.ts b/packages/svelte/ui/src/primitives/lucide-icon/lucide-icons.ts
new file mode 100644
index 0000000..46edfe4
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/lucide-icon/lucide-icons.ts
@@ -0,0 +1,283 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/assets/lucide-icons.json
+// Lucide icons (ISC license, https://lucide.dev), harvested into xgen/specs/assets/lucide-icons.json.
+export const LUCIDE: Record<string, Array<[string, Record<string, string>]>> = {
+  "accessibility": [["circle",{"cx":"16","cy":"4","r":"1"}],["path",{"d":"m18 19 1-7-6 1"}],["path",{"d":"m5 8 3-3 5.5 3-2.36 3.5"}],["path",{"d":"M4.24 14.5a5 5 0 0 0 6.88 6"}],["path",{"d":"M13.76 17.5a5 5 0 0 0-6.88-6"}]],
+  "activity": [["path",{"d":"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"}]],
+  "anchor": [["path",{"d":"M12 6v16"}],["path",{"d":"m19 13 2-1a9 9 0 0 1-18 0l2 1"}],["path",{"d":"M9 11h6"}],["circle",{"cx":"12","cy":"4","r":"2"}]],
+  "archive": [["rect",{"width":"20","height":"5","x":"2","y":"3","rx":"1"}],["path",{"d":"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"}],["path",{"d":"M10 12h4"}]],
+  "arrow-down": [["path",{"d":"M12 5v14"}],["path",{"d":"m19 12-7 7-7-7"}]],
+  "arrow-down-up": [["path",{"d":"m3 16 4 4 4-4"}],["path",{"d":"M7 20V4"}],["path",{"d":"m21 8-4-4-4 4"}],["path",{"d":"M17 4v16"}]],
+  "arrow-left": [["path",{"d":"m12 19-7-7 7-7"}],["path",{"d":"M19 12H5"}]],
+  "arrow-right": [["path",{"d":"M5 12h14"}],["path",{"d":"m12 5 7 7-7 7"}]],
+  "arrow-up": [["path",{"d":"m5 12 7-7 7 7"}],["path",{"d":"M12 19V5"}]],
+  "arrow-up-right": [["path",{"d":"M7 7h10v10"}],["path",{"d":"M7 17 17 7"}]],
+  "at-sign": [["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"}]],
+  "badge-check": [["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],
+  "badge-dollar-sign": [["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],
+  "ban": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M4.929 4.929 19.07 19.071"}]],
+  "banknote": [["rect",{"width":"20","height":"12","x":"2","y":"6","rx":"2"}],["circle",{"cx":"12","cy":"12","r":"2"}],["path",{"d":"M6 12h.01M18 12h.01"}]],
+  "bell": [["path",{"d":"M10.268 21a2 2 0 0 0 3.464 0"}],["path",{"d":"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"}]],
+  "blocks": [["path",{"d":"M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"}],["rect",{"x":"14","y":"2","width":"8","height":"8","rx":"1"}]],
+  "bold": [["path",{"d":"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"}]],
+  "bolt": [["path",{"d":"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"}],["circle",{"cx":"12","cy":"12","r":"4"}]],
+  "book-open": [["path",{"d":"M12 5v16"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}]],
+  "book-open-text": [["path",{"d":"M12 5v16"}],["path",{"d":"M16 13h2"}],["path",{"d":"M16 9h2"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}],["path",{"d":"M6 13h2"}],["path",{"d":"M6 9h2"}]],
+  "book-x": [["path",{"d":"m14.5 7.5-5 5"}],["path",{"d":"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"}],["path",{"d":"m9.5 7.5 5 5"}]],
+  "bookmark": [["path",{"d":"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"}]],
+  "bot": [["path",{"d":"M12 8V4H8"}],["rect",{"width":"16","height":"12","x":"4","y":"8","rx":"2"}],["path",{"d":"M2 14h2"}],["path",{"d":"M20 14h2"}],["path",{"d":"M15 13v2"}],["path",{"d":"M9 13v2"}]],
+  "boxes": [["path",{"d":"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"}],["path",{"d":"m7 16.5-4.74-2.85"}],["path",{"d":"m7 16.5 5-3"}],["path",{"d":"M7 16.5v5.17"}],["path",{"d":"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"}],["path",{"d":"m17 16.5-5-3"}],["path",{"d":"m17 16.5 4.74-2.85"}],["path",{"d":"M17 16.5v5.17"}],["path",{"d":"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"}],["path",{"d":"M12 8 7.26 5.15"}],["path",{"d":"m12 8 4.74-2.85"}],["path",{"d":"M12 13.5V8"}]],
+  "brain": [["path",{"d":"M12 18V5"}],["path",{"d":"M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"}],["path",{"d":"M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"}],["path",{"d":"M17.997 5.125a4 4 0 0 1 2.526 5.77"}],["path",{"d":"M18 18a4 4 0 0 0 2-7.464"}],["path",{"d":"M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"}],["path",{"d":"M6 18a4 4 0 0 1-2-7.464"}],["path",{"d":"M6.003 5.125a4 4 0 0 0-2.526 5.77"}]],
+  "briefcase": [["path",{"d":"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"}],["rect",{"width":"20","height":"14","x":"2","y":"6","rx":"2"}]],
+  "brush": [["path",{"d":"m11 10 3 3"}],["path",{"d":"M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"}],["path",{"d":"M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"}]],
+  "building": [["path",{"d":"M12 10h.01"}],["path",{"d":"M12 14h.01"}],["path",{"d":"M12 6h.01"}],["path",{"d":"M16 10h.01"}],["path",{"d":"M16 14h.01"}],["path",{"d":"M16 6h.01"}],["path",{"d":"M8 10h.01"}],["path",{"d":"M8 14h.01"}],["path",{"d":"M8 6h.01"}],["path",{"d":"M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"}],["rect",{"x":"4","y":"2","width":"16","height":"20","rx":"2"}]],
+  "calendar": [["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "calendar-days": [["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 13h.01"}],["path",{"d":"M12 13h.01"}],["path",{"d":"M16 13h.01"}],["path",{"d":"M8 17h.01"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M16 17h.01"}]],
+  "calendar-range": [["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M16 2v3"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 2v3"}],["path",{"d":"M17 13h-6"}],["path",{"d":"M13 17H7"}],["path",{"d":"M7 13h.01"}],["path",{"d":"M17 17h.01"}]],
+  "camera": [["path",{"d":"M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"}],["circle",{"cx":"12","cy":"13","r":"3"}]],
+  "chart-area": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"}]],
+  "chart-column": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M18 17V9"}],["path",{"d":"M13 17V5"}],["path",{"d":"M8 17v-3"}]],
+  "chart-line": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"m19 9-5 5-4-4-3 3"}]],
+  "chart-pie": [["path",{"d":"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"}],["path",{"d":"M21.21 15.89A10 10 0 1 1 8 2.83"}]],
+  "chart-scatter": [["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],["circle",{"cx":"18.5","cy":"5.5","r":".5","fill":"currentColor"}],["circle",{"cx":"11.5","cy":"11.5","r":".5","fill":"currentColor"}],["circle",{"cx":"7.5","cy":"16.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"14.5","r":".5","fill":"currentColor"}],["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}]],
+  "check": [["path",{"d":"M20 6 9 17l-5-5"}]],
+  "chevron-down": [["path",{"d":"m6 9 6 6 6-6"}]],
+  "chevron-left": [["path",{"d":"m15 18-6-6 6-6"}]],
+  "chevron-right": [["path",{"d":"m9 18 6-6-6-6"}]],
+  "chevron-up": [["path",{"d":"m18 15-6-6-6 6"}]],
+  "chevrons-down": [["path",{"d":"m7 6 5 5 5-5"}],["path",{"d":"m7 13 5 5 5-5"}]],
+  "chevrons-up": [["path",{"d":"m17 11-5-5-5 5"}],["path",{"d":"m17 18-5-5-5 5"}]],
+  "chevrons-up-down": [["path",{"d":"m7 15 5 5 5-5"}],["path",{"d":"m7 9 5-5 5 5"}]],
+  "circle": [["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-alert": [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"12","x2":"12","y1":"8","y2":"12"}],["line",{"x1":"12","x2":"12.01","y1":"16","y2":"16"}]],
+  "circle-check": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],
+  "circle-dollar-sign": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],
+  "circle-dot": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-play": [["path",{"d":"M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"}],["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-plus": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M8 12h8"}],["path",{"d":"M12 8v8"}]],
+  "circle-question-mark": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
+  "circle-slash": [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"9","x2":"15","y1":"15","y2":"9"}]],
+  "circle-user": [["circle",{"cx":"12","cy":"12","r":"10"}],["circle",{"cx":"12","cy":"10","r":"3"}],["path",{"d":"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"}]],
+  "circle-x": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"m9 9 6 6"}]],
+  "clipboard-check": [["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"m9 14 2 2 4-4"}]],
+  "clipboard-list": [["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"M12 11h4"}],["path",{"d":"M12 16h4"}],["path",{"d":"M8 11h.01"}],["path",{"d":"M8 16h.01"}]],
+  "clock": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 6v6l4 2"}]],
+  "cloud": [["path",{"d":"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"}]],
+  "cloud-off": [["path",{"d":"M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057"}],["path",{"d":"M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78"}],["path",{"d":"m2 2 20 20"}]],
+  "cloud-upload": [["path",{"d":"M12 13v8"}],["path",{"d":"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"}],["path",{"d":"m8 17 4-4 4 4"}]],
+  "code-xml": [["path",{"d":"m18 16 4-4-4-4"}],["path",{"d":"m6 8-4 4 4 4"}],["path",{"d":"m14.5 4-5 16"}]],
+  "columns-3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "command": [["path",{"d":"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"}]],
+  "compass": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"}]],
+  "cookie": [["path",{"d":"M11 17h.01"}],["path",{"d":"M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2"}],["path",{"d":"M12 12h.01"}],["path",{"d":"M16 16h.01"}],["path",{"d":"M16 3h.01"}],["path",{"d":"M21 4h.01"}],["path",{"d":"M21 8h.01"}],["path",{"d":"M7 14h.01"}],["path",{"d":"M9 8h.01"}]],
+  "copy": [["rect",{"width":"14","height":"14","x":"8","y":"8","rx":"2","ry":"2"}],["path",{"d":"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]],
+  "credit-card": [["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"2"}],["line",{"x1":"2","x2":"22","y1":"10","y2":"10"}],["path",{"d":"M6 14h2"}]],
+  "database": [["ellipse",{"cx":"12","cy":"5","rx":"9","ry":"3"}],["path",{"d":"M3 5V19A9 3 0 0 0 21 19V5"}],["path",{"d":"M3 12A9 3 0 0 0 21 12"}]],
+  "dollar-sign": [["line",{"x1":"12","x2":"12","y1":"2","y2":"22"}],["path",{"d":"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"}]],
+  "dot": [["circle",{"cx":"12","cy":"12","r":"1"}]],
+  "download": [["path",{"d":"M12 15V3"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["path",{"d":"m7 10 5 5 5-5"}]],
+  "ellipsis": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"19","cy":"12","r":"1"}],["circle",{"cx":"5","cy":"12","r":"1"}]],
+  "ellipsis-vertical": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"5","r":"1"}],["circle",{"cx":"12","cy":"19","r":"1"}]],
+  "external-link": [["path",{"d":"M15 3h6v6"}],["path",{"d":"M10 14 21 3"}],["path",{"d":"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]],
+  "eye": [["path",{"d":"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
+  "eye-off": [["path",{"d":"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"}],["path",{"d":"M14.084 14.158a3 3 0 0 1-4.242-4.242"}],["path",{"d":"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"}],["path",{"d":"m2 2 20 20"}]],
+  "file": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}]],
+  "file-code": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 12.5 8 15l2 2.5"}],["path",{"d":"m14 12.5 2 2.5-2 2.5"}]],
+  "file-down": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 18v-6"}],["path",{"d":"m9 15 3 3 3-3"}]],
+  "file-image": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"10","cy":"12","r":"2"}],["path",{"d":"m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"}]],
+  "file-pen": [["path",{"d":"M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"}]],
+  "file-pen-line": [["path",{"d":"M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"}],["path",{"d":"M14.487 7.858A1 1 0 0 1 14 7V2"}],["path",{"d":"M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"}],["path",{"d":"M8 18h1"}]],
+  "file-plus": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M9 15h6"}],["path",{"d":"M12 18v-6"}]],
+  "file-question-mark": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"}]],
+  "file-search": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"11.5","cy":"14.5","r":"2.5"}],["path",{"d":"M13.3 16.3 15 18"}]],
+  "file-spreadsheet": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M8 13h2"}],["path",{"d":"M14 13h2"}],["path",{"d":"M8 17h2"}],["path",{"d":"M14 17h2"}]],
+  "file-text": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 9H8"}],["path",{"d":"M16 13H8"}],["path",{"d":"M16 17H8"}]],
+  "file-up": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 12v6"}],["path",{"d":"m15 15-3-3-3 3"}]],
+  "file-video-camera": [["path",{"d":"M4 12V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"m10 17.843 3.033-1.755a.64.64 0 0 1 .967.56v4.704a.65.65 0 0 1-.967.56L10 20.157"}],["rect",{"width":"7","height":"6","x":"3","y":"16","rx":"1"}]],
+  "files": [["path",{"d":"M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"}],["path",{"d":"M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z"}],["path",{"d":"M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1"}]],
+  "film": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M7 3v18"}],["path",{"d":"M3 7.5h4"}],["path",{"d":"M3 12h18"}],["path",{"d":"M3 16.5h4"}],["path",{"d":"M17 3v18"}],["path",{"d":"M17 7.5h4"}],["path",{"d":"M17 16.5h4"}]],
+  "fingerprint-pattern": [["path",{"d":"M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"}],["path",{"d":"M14 13.12c0 2.38 0 6.38-1 8.88"}],["path",{"d":"M17.29 21.02c.12-.6.43-2.3.5-3.02"}],["path",{"d":"M2 12a10 10 0 0 1 18-6"}],["path",{"d":"M2 16h.01"}],["path",{"d":"M21.8 16c.2-2 .131-5.354 0-6"}],["path",{"d":"M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"}],["path",{"d":"M8.65 22c.21-.66.45-1.32.57-2"}],["path",{"d":"M9 6.8a6 6 0 0 1 9 5.2v2"}]],
+  "flag": [["path",{"d":"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"}]],
+  "folder": [["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
+  "folder-archive": [["circle",{"cx":"15","cy":"19","r":"2"}],["path",{"d":"M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"}],["path",{"d":"M15 11v-1"}],["path",{"d":"M15 17v-2"}]],
+  "folder-kanban": [["path",{"d":"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"}],["path",{"d":"M8 10v4"}],["path",{"d":"M12 10v2"}],["path",{"d":"M16 10v6"}]],
+  "folder-open": [["path",{"d":"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}]],
+  "folder-plus": [["path",{"d":"M12 10v6"}],["path",{"d":"M9 13h6"}],["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
+  "folder-tree": [["path",{"d":"M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M3 5a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 3v13a2 2 0 0 0 2 2h3"}]],
+  "funnel": [["path",{"d":"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"}]],
+  "gift": [["path",{"d":"M12 7v14"}],["path",{"d":"M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"}],["path",{"d":"M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"}],["rect",{"x":"3","y":"7","width":"18","height":"4","rx":"1"}]],
+  "git-compare": [["circle",{"cx":"18","cy":"18","r":"3"}],["circle",{"cx":"6","cy":"6","r":"3"}],["path",{"d":"M13 6h3a2 2 0 0 1 2 2v7"}],["path",{"d":"M11 18H8a2 2 0 0 1-2-2V9"}]],
+  "globe": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}],["path",{"d":"M2 12h20"}]],
+  "globe-lock": [["path",{"d":"M15.686 15A14.5 14.5 0 0 1 12 22a14.5 14.5 0 0 1 0-20 10 10 0 1 0 9.542 13"}],["path",{"d":"M2 12h8.5"}],["path",{"d":"M20 6V4a2 2 0 1 0-4 0v2"}],["rect",{"width":"8","height":"5","x":"14","y":"6","rx":"1"}]],
+  "graduation-cap": [["path",{"d":"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"}],["path",{"d":"M22 10v6"}],["path",{"d":"M6 12.5V16a6 3 0 0 0 12 0v-3.5"}]],
+  "grid-3x3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "grip-vertical": [["circle",{"cx":"9","cy":"12","r":"1"}],["circle",{"cx":"9","cy":"5","r":"1"}],["circle",{"cx":"9","cy":"19","r":"1"}],["circle",{"cx":"15","cy":"12","r":"1"}],["circle",{"cx":"15","cy":"5","r":"1"}],["circle",{"cx":"15","cy":"19","r":"1"}]],
+  "group": [["path",{"d":"M3 7V5c0-1.1.9-2 2-2h2"}],["path",{"d":"M17 3h2c1.1 0 2 .9 2 2v2"}],["path",{"d":"M21 17v2c0 1.1-.9 2-2 2h-2"}],["path",{"d":"M7 21H5c-1.1 0-2-.9-2-2v-2"}],["rect",{"width":"7","height":"5","x":"7","y":"7","rx":"1"}],["rect",{"width":"7","height":"5","x":"10","y":"12","rx":"1"}]],
+  "handshake": [["path",{"d":"m11 17 2 2a1 1 0 1 0 3-3"}],["path",{"d":"m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"}],["path",{"d":"m21 3 1 11h-2"}],["path",{"d":"M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"}],["path",{"d":"M3 4h8"}]],
+  "hash": [["line",{"x1":"4","x2":"20","y1":"9","y2":"9"}],["line",{"x1":"4","x2":"20","y1":"15","y2":"15"}],["line",{"x1":"10","x2":"8","y1":"3","y2":"21"}],["line",{"x1":"16","x2":"14","y1":"3","y2":"21"}]],
+  "heading": [["path",{"d":"M6 12h12"}],["path",{"d":"M6 20V4"}],["path",{"d":"M18 20V4"}]],
+  "headphones": [["path",{"d":"M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"}]],
+  "heart": [["path",{"d":"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"}]],
+  "heart-handshake": [["path",{"d":"M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"}]],
+  "hourglass": [["path",{"d":"M5 22h14"}],["path",{"d":"M5 2h14"}],["path",{"d":"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"}],["path",{"d":"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"}]],
+  "house": [["path",{"d":"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["path",{"d":"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}]],
+  "id-card": [["path",{"d":"M13 19a4 4 0 00-8 0"}],["path",{"d":"M16 10h2"}],["path",{"d":"M16 14h2"}],["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"x":"2","y":"5","width":"20","height":"14","rx":"2"}]],
+  "image": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2","ry":"2"}],["circle",{"cx":"9","cy":"9","r":"2"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]],
+  "image-off": [["line",{"x1":"2","x2":"22","y1":"2","y2":"22"}],["path",{"d":"M10.41 10.41a2 2 0 1 1-2.83-2.83"}],["line",{"x1":"13.5","x2":"6","y1":"13.5","y2":"21"}],["line",{"x1":"18","x2":"21","y1":"12","y2":"15"}],["path",{"d":"M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"}],["path",{"d":"M21 15V5a2 2 0 0 0-2-2H9"}]],
+  "image-plus": [["path",{"d":"M16 5h6"}],["path",{"d":"M19 2v6"}],["path",{"d":"M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}],["circle",{"cx":"9","cy":"9","r":"2"}]],
+  "images": [["path",{"d":"m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"}],["path",{"d":"M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"}],["circle",{"cx":"13","cy":"7","r":"1","fill":"currentColor"}],["rect",{"x":"8","y":"2","width":"14","height":"14","rx":"2"}]],
+  "inbox": [["polyline",{"points":"22 12 16 12 14 15 10 15 8 12 2 12"}],["path",{"d":"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"}]],
+  "info": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 16v-4"}],["path",{"d":"M12 8h.01"}]],
+  "italic": [["line",{"x1":"19","x2":"10","y1":"4","y2":"4"}],["line",{"x1":"14","x2":"5","y1":"20","y2":"20"}],["line",{"x1":"15","x2":"9","y1":"4","y2":"20"}]],
+  "kanban": [["path",{"d":"M5 3v14"}],["path",{"d":"M12 3v8"}],["path",{"d":"M19 3v18"}]],
+  "key": [["path",{"d":"m2 21 9.6-9.6"}],["path",{"d":"m7.5 15.5 2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19"}],["circle",{"cx":"15.5","cy":"7.5","r":"5.5"}]],
+  "key-round": [["path",{"d":"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"}],["circle",{"cx":"16.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "lamp-desk": [["path",{"d":"M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z"}],["path",{"d":"m14.207 4.793-3.414 3.414"}],["path",{"d":"M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"}],["path",{"d":"m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18"}]],
+  "landmark": [["path",{"d":"M10 18v-7"}],["path",{"d":"M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"}],["path",{"d":"M14 18v-7"}],["path",{"d":"M18 18v-7"}],["path",{"d":"M3 22h18"}],["path",{"d":"M6 18v-7"}]],
+  "languages": [["path",{"d":"m5 8 6 6"}],["path",{"d":"m4 14 6-6 2-3"}],["path",{"d":"M2 5h12"}],["path",{"d":"M7 2h1"}],["path",{"d":"m22 22-5-10-5 10"}],["path",{"d":"M14 18h6"}]],
+  "laptop": [["path",{"d":"M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z"}],["path",{"d":"M20.054 15.987H3.946"}]],
+  "layers": [["path",{"d":"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{"d":"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{"d":"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]],
+  "layout-dashboard": [["rect",{"width":"7","height":"9","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"5","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"9","x":"14","y":"12","rx":"1"}],["rect",{"width":"7","height":"5","x":"3","y":"16","rx":"1"}]],
+  "layout-grid": [["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"14","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}]],
+  "layout-list": [["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}],["path",{"d":"M14 4h7"}],["path",{"d":"M14 9h7"}],["path",{"d":"M14 15h7"}],["path",{"d":"M14 20h7"}]],
+  "layout-template": [["rect",{"width":"18","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"9","height":"7","x":"3","y":"14","rx":"1"}],["rect",{"width":"5","height":"7","x":"16","y":"14","rx":"1"}]],
+  "life-buoy": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m4.93 4.93 4.24 4.24"}],["path",{"d":"m14.83 9.17 4.24-4.24"}],["path",{"d":"m14.83 14.83 4.24 4.24"}],["path",{"d":"m9.17 14.83-4.24 4.24"}],["circle",{"cx":"12","cy":"12","r":"4"}]],
+  "lightbulb": [["path",{"d":"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"}],["path",{"d":"M9 18h6"}],["path",{"d":"M10 22h4"}]],
+  "link": [["path",{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["path",{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]],
+  "link-2": [["path",{"d":"M9 17H7A5 5 0 0 1 7 7h2"}],["path",{"d":"M15 7h2a5 5 0 1 1 0 10h-2"}],["line",{"x1":"8","x2":"16","y1":"12","y2":"12"}]],
+  "list": [["path",{"d":"M3 5h.01"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M3 19h.01"}],["path",{"d":"M8 5h13"}],["path",{"d":"M8 12h13"}],["path",{"d":"M8 19h13"}]],
+  "list-checks": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["path",{"d":"m3 7 2 2 4-4"}]],
+  "list-filter": [["path",{"d":"M2 5h20"}],["path",{"d":"M6 12h12"}],["path",{"d":"M9 19h6"}]],
+  "list-ordered": [["path",{"d":"M11 5h10"}],["path",{"d":"M11 12h10"}],["path",{"d":"M11 19h10"}],["path",{"d":"M4 4h1v5"}],["path",{"d":"M4 9h2"}],["path",{"d":"M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"}]],
+  "list-todo": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["rect",{"x":"3","y":"4","width":"6","height":"6","rx":"1"}]],
+  "list-tree": [["path",{"d":"M8 5h13"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"M3 10a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 5v12a2 2 0 0 0 2 2h3"}]],
+  "loader": [["path",{"d":"M12 2v4"}],["path",{"d":"m16.2 7.8 2.9-2.9"}],["path",{"d":"M18 12h4"}],["path",{"d":"m16.2 16.2 2.9 2.9"}],["path",{"d":"M12 18v4"}],["path",{"d":"m4.9 19.1 2.9-2.9"}],["path",{"d":"M2 12h4"}],["path",{"d":"m4.9 4.9 2.9 2.9"}]],
+  "loader-circle": [["path",{"d":"M21 12a9 9 0 1 1-6.219-8.56"}]],
+  "lock": [["rect",{"width":"18","height":"11","x":"3","y":"11","rx":"2","ry":"2"}],["path",{"d":"M7 11V7a5 5 0 0 1 10 0v4"}]],
+  "lock-keyhole": [["circle",{"cx":"12","cy":"16","r":"1"}],["rect",{"x":"3","y":"10","width":"18","height":"12","rx":"2"}],["path",{"d":"M7 10V7a5 5 0 0 1 10 0v3"}]],
+  "log-in": [["path",{"d":"m10 17 5-5-5-5"}],["path",{"d":"M15 12H3"}],["path",{"d":"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"}]],
+  "log-out": [["path",{"d":"m16 17 5-5-5-5"}],["path",{"d":"M21 12H9"}],["path",{"d":"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"}]],
+  "mail": [["path",{"d":"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"}],["rect",{"x":"2","y":"4","width":"20","height":"16","rx":"2"}]],
+  "mail-check": [["path",{"d":"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"}],["path",{"d":"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"}],["path",{"d":"m16 19 2 2 4-4"}]],
+  "mail-open": [["path",{"d":"M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"}],["path",{"d":"m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"}]],
+  "map-pin": [["path",{"d":"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}],["circle",{"cx":"12","cy":"10","r":"3"}]],
+  "megaphone": [["path",{"d":"M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"}],["path",{"d":"M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"}],["path",{"d":"M8 6v8"}]],
+  "menu": [["path",{"d":"M4 5h16"}],["path",{"d":"M4 12h16"}],["path",{"d":"M4 19h16"}]],
+  "message-circle": [["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}]],
+  "message-circle-question-mark": [["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
+  "message-square": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}]],
+  "message-square-more": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M12 11h.01"}],["path",{"d":"M16 11h.01"}],["path",{"d":"M8 11h.01"}]],
+  "message-square-quote": [["path",{"d":"M14 14a2 2 0 0 0 2-2V8h-2"}],["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M8 14a2 2 0 0 0 2-2V8H8"}]],
+  "message-square-text": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M7 11h10"}],["path",{"d":"M7 15h6"}],["path",{"d":"M7 7h8"}]],
+  "messages-square": [["path",{"d":"M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"}],["path",{"d":"M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"}]],
+  "minus": [["path",{"d":"M5 12h14"}]],
+  "monitor": [["rect",{"width":"20","height":"14","x":"2","y":"3","rx":"2"}],["line",{"x1":"8","x2":"16","y1":"21","y2":"21"}],["line",{"x1":"12","x2":"12","y1":"17","y2":"21"}]],
+  "monitor-smartphone": [["path",{"d":"M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"}],["path",{"d":"M10 19v-3.96 3.15"}],["path",{"d":"M7 19h5"}],["rect",{"width":"6","height":"10","x":"16","y":"12","rx":"2"}]],
+  "moon": [["path",{"d":"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"}]],
+  "mountain": [["path",{"d":"m8 3 4 8 5-5 5 15H2L8 3z"}]],
+  "mouse-pointer-click": [["path",{"d":"M14 4.1 12 6"}],["path",{"d":"m5.1 8-2.9-.8"}],["path",{"d":"m6 12-1.9 2"}],["path",{"d":"M7.2 2.2 8 5.1"}],["path",{"d":"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"}]],
+  "move-right": [["path",{"d":"M18 8L22 12L18 16"}],["path",{"d":"M2 12H22"}]],
+  "music": [["path",{"d":"M9 18V5l12-2v13"}],["circle",{"cx":"6","cy":"18","r":"3"}],["circle",{"cx":"18","cy":"16","r":"3"}]],
+  "newspaper": [["path",{"d":"M15 18h-5"}],["path",{"d":"M18 14h-8"}],["path",{"d":"M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"}],["rect",{"width":"8","height":"4","x":"10","y":"6","rx":"1"}]],
+  "orbit": [["path",{"d":"M20.341 6.484A10 10 0 0 1 10.266 21.85"}],["path",{"d":"M3.659 17.516A10 10 0 0 1 13.74 2.152"}],["circle",{"cx":"12","cy":"12","r":"3"}],["circle",{"cx":"19","cy":"5","r":"2"}],["circle",{"cx":"5","cy":"19","r":"2"}]],
+  "package": [["path",{"d":"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}],["path",{"d":"M12 22V12"}],["polyline",{"points":"3.29 7 12 12 20.71 7"}],["path",{"d":"m7.5 4.27 9 5.15"}]],
+  "package-check": [["path",{"d":"M12 22V12"}],["path",{"d":"m16 17 2 2 4-4"}],["path",{"d":"M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"}],["path",{"d":"M3.29 7 12 12l8.71-5"}],["path",{"d":"m7.5 4.27 8.997 5.148"}]],
+  "package-open": [["path",{"d":"M12 22v-9"}],["path",{"d":"M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"}],["path",{"d":"M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"}],["path",{"d":"M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"}]],
+  "palette": [["path",{"d":"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"}],["circle",{"cx":"13.5","cy":"6.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"10.5","r":".5","fill":"currentColor"}],["circle",{"cx":"6.5","cy":"12.5","r":".5","fill":"currentColor"}],["circle",{"cx":"8.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "panel-bottom": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 15h18"}]],
+  "panel-left": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}]],
+  "panel-left-close": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"m16 15-3-3 3-3"}]],
+  "panel-top": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "paperclip": [["path",{"d":"m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"}]],
+  "pause": [["rect",{"x":"14","y":"3","width":"5","height":"18","rx":"1"}],["rect",{"x":"5","y":"3","width":"5","height":"18","rx":"1"}]],
+  "pencil": [["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}],["path",{"d":"m15 5 4 4"}]],
+  "pencil-line": [["path",{"d":"M13 21h8"}],["path",{"d":"m15 5 4 4"}],["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}]],
+  "percent": [["line",{"x1":"19","x2":"5","y1":"5","y2":"19"}],["circle",{"cx":"6.5","cy":"6.5","r":"2.5"}],["circle",{"cx":"17.5","cy":"17.5","r":"2.5"}]],
+  "phone": [["path",{"d":"M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"}]],
+  "pilcrow": [["path",{"d":"M13 4v16"}],["path",{"d":"M17 4v16"}],["path",{"d":"M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}]],
+  "pin": [["path",{"d":"M12 17v5"}],["path",{"d":"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"}]],
+  "play": [["path",{"d":"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"}]],
+  "plug": [["path",{"d":"M12 22v-5"}],["path",{"d":"M15 8V2"}],["path",{"d":"M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"}],["path",{"d":"M9 8V2"}]],
+  "plug-zap": [["path",{"d":"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"}],["path",{"d":"m2 22 3-3"}],["path",{"d":"M7.5 13.5 10 11"}],["path",{"d":"M10.5 16.5 13 14"}],["path",{"d":"m18 3-4 4h6l-4 4"}]],
+  "plus": [["path",{"d":"M5 12h14"}],["path",{"d":"M12 5v14"}]],
+  "presentation": [["path",{"d":"M2 3h20"}],["path",{"d":"M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"}],["path",{"d":"m7 21 5-5 5 5"}]],
+  "printer": [["path",{"d":"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"}],["path",{"d":"M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"}],["rect",{"x":"6","y":"14","width":"12","height":"8","rx":"1"}]],
+  "puzzle": [["path",{"d":"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}]],
+  "qr-code": [["rect",{"width":"5","height":"5","x":"3","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"16","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"3","y":"16","rx":"1"}],["path",{"d":"M21 16h-3a2 2 0 0 0-2 2v3"}],["path",{"d":"M21 21v.01"}],["path",{"d":"M12 7v3a2 2 0 0 1-2 2H7"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M12 3h.01"}],["path",{"d":"M12 16v.01"}],["path",{"d":"M16 12h1"}],["path",{"d":"M21 12v.01"}],["path",{"d":"M12 21v-1"}]],
+  "quote": [["path",{"d":"M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}],["path",{"d":"M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}]],
+  "receipt-text": [["path",{"d":"M13 16H8"}],["path",{"d":"M14 8H8"}],["path",{"d":"M16 12H8"}],["path",{"d":"M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"}]],
+  "redo-2": [["path",{"d":"m15 14 5-5-5-5"}],["path",{"d":"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]],
+  "refresh-cw": [["path",{"d":"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}],["path",{"d":"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{"d":"M8 16H3v5"}]],
+  "rocket": [["path",{"d":"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"}],["path",{"d":"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"}],["path",{"d":"M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"}],["path",{"d":"M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"}]],
+  "rotate-ccw": [["path",{"d":"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}],["path",{"d":"M3 3v5h5"}]],
+  "rotate-cw": [["path",{"d":"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}]],
+  "rows-3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "save": [["path",{"d":"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}],["path",{"d":"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}],["path",{"d":"M7 3v4a1 1 0 0 0 1 1h7"}]],
+  "scale": [["path",{"d":"M12 3v18"}],["path",{"d":"m19 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"}],["path",{"d":"m5 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M7 21h10"}]],
+  "scan-face": [["path",{"d":"M3 7V5a2 2 0 0 1 2-2h2"}],["path",{"d":"M17 3h2a2 2 0 0 1 2 2v2"}],["path",{"d":"M21 17v2a2 2 0 0 1-2 2h-2"}],["path",{"d":"M7 21H5a2 2 0 0 1-2-2v-2"}],["path",{"d":"M8 14s1.5 2 4 2 4-2 4-2"}],["path",{"d":"M9 9h.01"}],["path",{"d":"M15 9h.01"}]],
+  "scroll-text": [["path",{"d":"M15 12h-5"}],["path",{"d":"M15 8h-5"}],["path",{"d":"M19 17V5a2 2 0 0 0-2-2H4"}],["path",{"d":"M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"}]],
+  "search": [["path",{"d":"m21 21-4.34-4.34"}],["circle",{"cx":"11","cy":"11","r":"8"}]],
+  "search-x": [["path",{"d":"m13.5 8.5-5 5"}],["path",{"d":"m8.5 8.5 5 5"}],["circle",{"cx":"11","cy":"11","r":"8"}],["path",{"d":"m21 21-4.3-4.3"}]],
+  "send": [["path",{"d":"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"}],["path",{"d":"m21.854 2.147-10.94 10.939"}]],
+  "settings": [["path",{"d":"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
+  "settings-2": [["path",{"d":"M14 17H5"}],["path",{"d":"M19 7h-9"}],["circle",{"cx":"17","cy":"17","r":"3"}],["circle",{"cx":"7","cy":"7","r":"3"}]],
+  "share": [["path",{"d":"M12 2v13"}],["path",{"d":"m16 6-4-4-4 4"}],["path",{"d":"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"}]],
+  "share-2": [["circle",{"cx":"18","cy":"5","r":"3"}],["circle",{"cx":"6","cy":"12","r":"3"}],["circle",{"cx":"18","cy":"19","r":"3"}],["line",{"x1":"8.59","x2":"15.42","y1":"13.51","y2":"17.49"}],["line",{"x1":"15.41","x2":"8.59","y1":"6.51","y2":"10.49"}]],
+  "shield": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}]],
+  "shield-alert": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"M12 8v4"}],["path",{"d":"M12 16h.01"}]],
+  "shield-ban": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m4.243 5.21 14.39 12.472"}]],
+  "shield-check": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m9 12 2 2 4-4"}]],
+  "shield-x": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m14.5 9.5-5 5"}],["path",{"d":"m9.5 9.5 5 5"}]],
+  "shopping-bag": [["path",{"d":"M16 10a4 4 0 0 1-8 0"}],["path",{"d":"M3.103 6.034h17.794"}],["path",{"d":"M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"}]],
+  "shopping-cart": [["path",{"d":"m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"}],["path",{"d":"M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"}],["circle",{"cx":"18","cy":"20","r":"2"}],["circle",{"cx":"8","cy":"20","r":"2"}]],
+  "sliders-horizontal": [["path",{"d":"M10 5H3"}],["path",{"d":"M12 19H3"}],["path",{"d":"M14 3v4"}],["path",{"d":"M16 17v4"}],["path",{"d":"M21 12h-9"}],["path",{"d":"M21 19h-5"}],["path",{"d":"M21 5h-7"}],["path",{"d":"M8 10v4"}],["path",{"d":"M8 12H3"}]],
+  "sliders-vertical": [["path",{"d":"M10 8h4"}],["path",{"d":"M12 21v-9"}],["path",{"d":"M12 8V3"}],["path",{"d":"M17 16h4"}],["path",{"d":"M19 12V3"}],["path",{"d":"M19 21v-5"}],["path",{"d":"M3 14h4"}],["path",{"d":"M5 10V3"}],["path",{"d":"M5 21v-7"}]],
+  "smartphone": [["rect",{"width":"14","height":"20","x":"5","y":"2","rx":"2","ry":"2"}],["path",{"d":"M12 18h.01"}]],
+  "sparkles": [["path",{"d":"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"}],["path",{"d":"M20 2v4"}],["path",{"d":"M22 4h-4"}],["circle",{"cx":"4","cy":"20","r":"2"}]],
+  "square": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}]],
+  "square-pen": [["path",{"d":"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}],["path",{"d":"M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"}]],
+  "star": [["path",{"d":"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"}]],
+  "star-half": [["path",{"d":"M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"}]],
+  "store": [["path",{"d":"M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"}],["path",{"d":"M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"}],["path",{"d":"M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"}]],
+  "sun": [["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M12 2v2"}],["path",{"d":"M12 20v2"}],["path",{"d":"m4.93 4.93 1.41 1.41"}],["path",{"d":"m17.66 17.66 1.41 1.41"}],["path",{"d":"M2 12h2"}],["path",{"d":"M20 12h2"}],["path",{"d":"m6.34 17.66-1.41 1.41"}],["path",{"d":"m19.07 4.93-1.41 1.41"}]],
+  "table": [["path",{"d":"M12 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}]],
+  "table-properties": [["path",{"d":"M15 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "tablet": [["rect",{"width":"16","height":"20","x":"4","y":"2","rx":"2","ry":"2"}],["line",{"x1":"12","x2":"12.01","y1":"18","y2":"18"}]],
+  "tag": [["path",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "tags": [["path",{"d":"M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"}],["path",{"d":"M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"}],["circle",{"cx":"10.5","cy":"6.5","r":".5","fill":"currentColor"}]],
+  "terminal": [["path",{"d":"M12 19h8"}],["path",{"d":"m4 17 6-6-6-6"}]],
+  "text-align-center": [["path",{"d":"M21 5H3"}],["path",{"d":"M17 12H7"}],["path",{"d":"M19 19H5"}]],
+  "text-align-end": [["path",{"d":"M21 5H3"}],["path",{"d":"M21 12H9"}],["path",{"d":"M21 19H7"}]],
+  "text-align-start": [["path",{"d":"M21 5H3"}],["path",{"d":"M15 12H3"}],["path",{"d":"M17 19H3"}]],
+  "text-cursor-input": [["path",{"d":"M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"}],["path",{"d":"M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"}],["path",{"d":"M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"}],["path",{"d":"M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"}],["path",{"d":"M9 6v12"}]],
+  "thumbs-down": [["path",{"d":"M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"}],["path",{"d":"M17 14V2"}]],
+  "thumbs-up": [["path",{"d":"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"}],["path",{"d":"M7 10v12"}]],
+  "ticket-percent": [["path",{"d":"M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"}],["path",{"d":"M9 9h.01"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"M15 15h.01"}]],
+  "timer": [["line",{"x1":"10","x2":"14","y1":"2","y2":"2"}],["line",{"x1":"12","x2":"15","y1":"14","y2":"11"}],["circle",{"cx":"12","cy":"14","r":"8"}]],
+  "toggle-left": [["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"7"}]],
+  "trash": [["path",{"d":"M10 11v6"}],["path",{"d":"M14 11v6"}],["path",{"d":"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{"d":"M3 6h18"}],["path",{"d":"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]],
+  "trees": [["path",{"d":"M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"}],["path",{"d":"M7 16v6"}],["path",{"d":"M13 19v3"}],["path",{"d":"M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"}]],
+  "trending-down": [["path",{"d":"M16 17h6v-6"}],["path",{"d":"m22 17-8.5-8.5-5 5L2 7"}]],
+  "trending-up": [["path",{"d":"M16 7h6v6"}],["path",{"d":"m22 7-8.5 8.5-5-5L2 17"}]],
+  "triangle-alert": [["path",{"d":"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}],["path",{"d":"M12 9v4"}],["path",{"d":"M12 17h.01"}]],
+  "truck": [["path",{"d":"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}],["path",{"d":"M15 18H9"}],["path",{"d":"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"}],["circle",{"cx":"17","cy":"18","r":"2"}],["circle",{"cx":"7","cy":"18","r":"2"}]],
+  "type": [["path",{"d":"M12 4v16"}],["path",{"d":"M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"}],["path",{"d":"M9 20h6"}]],
+  "undo-2": [["path",{"d":"M9 14 4 9l5-5"}],["path",{"d":"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]],
+  "upload": [["path",{"d":"M12 3v12"}],["path",{"d":"m17 8-5-5-5 5"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}]],
+  "user": [["path",{"d":"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}],["circle",{"cx":"12","cy":"7","r":"4"}]],
+  "user-check": [["path",{"d":"m16 11 2 2 4-4"}],["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "user-cog": [["path",{"d":"M10 15H6a4 4 0 0 0-4 4v2"}],["path",{"d":"m14.305 16.53.923-.382"}],["path",{"d":"m15.228 13.852-.923-.383"}],["path",{"d":"m16.852 12.228-.383-.923"}],["path",{"d":"m16.852 17.772-.383.924"}],["path",{"d":"m19.148 12.228.383-.923"}],["path",{"d":"m19.53 18.696-.382-.924"}],["path",{"d":"m20.772 13.852.924-.383"}],["path",{"d":"m20.772 16.148.924.383"}],["circle",{"cx":"18","cy":"15","r":"3"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "user-pen": [["path",{"d":"M11.5 15H7a4 4 0 0 0-4 4v2"}],["path",{"d":"M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"}],["circle",{"cx":"10","cy":"7","r":"4"}]],
+  "user-plus": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"19","x2":"19","y1":"8","y2":"14"}],["line",{"x1":"22","x2":"16","y1":"11","y2":"11"}]],
+  "user-round-check": [["path",{"d":"M2 21a8 8 0 0 1 13.292-6"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"m16 19 2 2 4-4"}]],
+  "user-x": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"17","x2":"22","y1":"8","y2":"13"}],["line",{"x1":"22","x2":"17","y1":"8","y2":"13"}]],
+  "users": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["path",{"d":"M16 3.128a4 4 0 0 1 0 7.744"}],["path",{"d":"M22 21v-2a4 4 0 0 0-3-3.87"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "users-round": [["path",{"d":"M18 21a8 8 0 0 0-16 0"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"}]],
+  "video": [["path",{"d":"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"}],["rect",{"x":"2","y":"6","width":"14","height":"12","rx":"2"}]],
+  "wallet": [["path",{"d":"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"}],["path",{"d":"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"}]],
+  "wand-sparkles": [["path",{"d":"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"}],["path",{"d":"m14 7 3 3"}],["path",{"d":"M5 6v4"}],["path",{"d":"M19 14v4"}],["path",{"d":"M10 2v2"}],["path",{"d":"M7 8H3"}],["path",{"d":"M21 16h-4"}],["path",{"d":"M11 3H9"}]],
+  "webhook": [["path",{"d":"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"}],["path",{"d":"m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"}],["path",{"d":"m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"}]],
+  "wrench": [["path",{"d":"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"}]],
+  "x": [["path",{"d":"M18 6 6 18"}],["path",{"d":"m6 6 12 12"}]],
+  "zap": [["path",{"d":"M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"}]],
+};
diff --git a/packages/svelte/ui/src/primitives/radio/radio.svelte b/packages/svelte/ui/src/primitives/radio/radio.svelte
new file mode 100644
index 0000000..bd1e597
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/radio/radio.svelte
@@ -0,0 +1,64 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/radio.json -->
+<!--
+  Radio renders input[type=radio] with shared Name for grouping.
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Radio: the classes of each value of each prop (shadcn/cva style). */
+  export const radioVariants = variants({
+    base:
+      "shrink-0 appearance-none rounded-full bg-background inset-ring inset-ring-input checked:bg-primary " +
+      "checked:inset-ring-primary radio-glyph disabled:cursor-not-allowed disabled:opacity-50",
+    variants: {
+      size: {
+        default: "size-5 [--dot:10px]",
+        sm: "size-4 [--dot:8px]",
+      },
+      variant: {
+        default: "",
+        ghost: "bg-muted",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type RadioVariant = VariantKey<typeof radioVariants, "variant">;
+  export type RadioSize = VariantKey<typeof radioVariants, "size">;
+
+  export type RadioProps = {
+    variant?: RadioVariant;
+    size?: RadioSize;
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    variant,
+    size,
+    checked,
+    disabled,
+    required,
+    class: className,
+    ...rest
+  }: RadioProps = $props();
+
+  const cls = $derived(cn(radioVariants({ size, variant }), className));
+</script>
+
+<input
+  type="radio"
+  {...(cls ? { class: cls } : {})}
+  checked={checked || undefined}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  {...rest}
+/>
diff --git a/packages/svelte/ui/src/primitives/range/range.svelte b/packages/svelte/ui/src/primitives/range/range.svelte
new file mode 100644
index 0000000..2d04e11
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/range/range.svelte
@@ -0,0 +1,60 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/range.json -->
+<!--
+  Range renders input type=range.
+-->
+<script lang="ts" module>
+  import { variants } from "../../utils";
+
+  /** Range: the classes of each value of each prop (shadcn/cva style). */
+  export const rangeVariants = variants({
+    base:
+      "h-5 w-full cursor-pointer appearance-none bg-transparent accent-primary disabled:cursor-not-allowed " +
+      "disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded " +
+      "[&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 " +
+      "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded " +
+      "[&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded " +
+      "[&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded " +
+      "[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+    variants: {},
+    defaultVariants: {},
+  });
+
+  export type RangeProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    "aria-label"?: string;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { isSetNum, orUndef } from "../../utils/expr";
+
+  let {
+    min,
+    max,
+    step,
+    disabled,
+    "aria-label": ariaLabel,
+    class: className,
+    ...rest
+  }: RangeProps = $props();
+
+  const cls = $derived(cn(rangeVariants(), className));
+</script>
+
+<input
+  type="range"
+  {...(cls ? { class: cls } : {})}
+  {...({ "min": (isSetNum(min) ? String(min ?? 0) : "0") } as Record<string, unknown>)}
+  {...({ "max": (isSetNum(max) ? String(max ?? 0) : "100") } as Record<string, unknown>)}
+  {...({ "step": (isSetNum(step) ? String(step ?? 0) : "1") } as Record<string, unknown>)}
+  disabled={disabled || undefined}
+  aria-label={orUndef(ariaLabel)}
+  {...rest}
+/>
diff --git a/packages/svelte/ui/src/primitives/select/opt-group.svelte b/packages/svelte/ui/src/primitives/select/opt-group.svelte
new file mode 100644
index 0000000..e3f4da7
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/select/opt-group.svelte
@@ -0,0 +1,32 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/select.json -->
+<!--
+  OptGroup renders a native optgroup around option children.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type OptGroupProps = {
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    disabled,
+    class: className,
+    children,
+    ...rest
+  }: OptGroupProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<optgroup {...(cls ? { class: cls } : {})} disabled={disabled || undefined} {...rest}>
+  {@render children?.()}
+</optgroup>
diff --git a/packages/svelte/ui/src/primitives/select/select-option.svelte b/packages/svelte/ui/src/primitives/select/select-option.svelte
new file mode 100644
index 0000000..a560643
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/select/select-option.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/select.json -->
+<!--
+  SelectOption renders an option for custom Select children.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type SelectOptionProps = {
+    selected?: boolean;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    selected,
+    disabled,
+    class: className,
+    children,
+    ...rest
+  }: SelectOptionProps = $props();
+</script>
+
+<option selected={selected || undefined} disabled={disabled || undefined} {...rest}>
+  {@render children?.()}
+</option>
diff --git a/packages/svelte/ui/src/primitives/select/select.svelte b/packages/svelte/ui/src/primitives/select/select.svelte
new file mode 100644
index 0000000..92c14bc
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/select/select.svelte
@@ -0,0 +1,83 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/select.json -->
+<!--
+  Select renders option children from the Options list plus manual children.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Select: the classes of each value of each prop (shadcn/cva style). */
+  export const selectVariants = variants({
+    base:
+      "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+      "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+      "focus-visible:inset-ring-ring rounded",
+    variants: {
+      size: {
+        sm: "h-8 px-3 text-sm",
+        default: "h-10 px-3 text-sm",
+        lg: "h-12 px-4 text-base",
+      },
+      variant: {
+        default: "",
+        ghost: "bg-muted inset-ring-transparent",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type SelectOptionItem = {
+    value?: string;
+    label?: string;
+  };
+
+  export type SelectVariant = VariantKey<typeof selectVariants, "variant">;
+  export type SelectSize = VariantKey<typeof selectVariants, "size">;
+
+  export type SelectProps = {
+    variant?: SelectVariant;
+    size?: SelectSize;
+    value?: string;
+    disabled?: boolean;
+    required?: boolean;
+    options?: SelectOptionItem[];
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { eqStr, orUndef } from "../../utils/expr";
+
+  let {
+    variant,
+    size,
+    value,
+    disabled,
+    required,
+    options,
+    class: className,
+    children,
+    ...rest
+  }: SelectProps = $props();
+
+  const cls = $derived(cn(selectVariants({ size, variant }), className));
+</script>
+
+<select
+  {...(cls ? { class: cls } : {})}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  {...rest}
+>
+  {#each options ?? [] as item}
+    <option
+      {...({ "value": orUndef(item.value) } as Record<string, unknown>)}
+      selected={eqStr(item.value, value) || undefined}
+    >{item.label}</option>
+  {/each}
+  {@render children?.()}
+</select>
diff --git a/packages/svelte/ui/src/primitives/separator/separator.svelte b/packages/svelte/ui/src/primitives/separator/separator.svelte
new file mode 100644
index 0000000..9ecb6ca
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/separator/separator.svelte
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/separator.json -->
+<!--
+  Separator renders hr with optional decorative semantics.
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Separator: the classes of each value of each prop (shadcn/cva style). */
+  export const separatorVariants = variants({
+    base: "shrink-0 border-0 bg-border",
+    variants: {
+      orientation: {
+        horizontal: "h-px w-full",
+        vertical: "h-full w-px",
+      },
+      variant: {
+        default: "",
+        spaced: "my-6",
+      },
+    },
+    defaultVariants: { orientation: "horizontal", variant: "default" },
+  });
+
+  export type SeparatorVariant = VariantKey<typeof separatorVariants, "variant">;
+  export type SeparatorOrientation = VariantKey<typeof separatorVariants, "orientation">;
+
+  export type SeparatorProps = {
+    variant?: SeparatorVariant;
+    orientation?: SeparatorOrientation;
+    decorative?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { eqStr } from "../../utils/expr";
+
+  let {
+    variant,
+    orientation,
+    decorative,
+    class: className,
+    ...rest
+  }: SeparatorProps = $props();
+
+  const cls = $derived(cn(separatorVariants({ orientation, variant }), className));
+</script>
+
+<hr
+  {...(cls ? { class: cls } : {})}
+  role={decorative ? "presentation" : undefined}
+  aria-hidden={decorative ? "true" : undefined}
+  aria-orientation={eqStr(orientation, "vertical") ? "vertical" : undefined}
+  {...rest}
+/>
diff --git a/packages/svelte/ui/src/primitives/sheet/sheet-close.svelte b/packages/svelte/ui/src/primitives/sheet/sheet-close.svelte
new file mode 100644
index 0000000..671b10e
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/sheet/sheet-close.svelte
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/sheet.json -->
+<!--
+  SheetClose renders the close button (Lucide x) inside the panel.
+-->
+<script lang="ts" module>
+  import { type VariantKey } from "../../utils";
+  import { sheettriggerVariants } from "./sheet-trigger.svelte";
+
+  export type SheetCloseVariant = VariantKey<typeof sheettriggerVariants, "variant">;
+  export type SheetCloseSize = VariantKey<typeof sheettriggerVariants, "size">;
+
+  export type SheetCloseProps = {
+    variant?: SheetCloseVariant;
+    size?: SheetCloseSize;
+    "aria-label"?: string;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { defaultIfEmpty } from "../../utils/expr";
+
+  let {
+    variant,
+    size,
+    "aria-label": ariaLabel,
+    class: className,
+    ...rest
+  }: SheetCloseProps = $props();
+
+  const cls = $derived(cn(sheettriggerVariants({ variant, size }), className));
+</script>
+
+<button
+  type="button"
+  {...(cls ? { class: cls } : {})}
+  data-ui8kit="sheet-close"
+  aria-label={defaultIfEmpty(ariaLabel, "Close menu")}
+  {...rest}
+>
+  <svg
+    class="size-5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M18 6 6 18"></path>
+    <path d="m6 6 12 12"></path>
+  </svg>
+</button>
diff --git a/packages/svelte/ui/src/primitives/sheet/sheet-trigger.svelte b/packages/svelte/ui/src/primitives/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000..9c2b99d
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/sheet/sheet-trigger.svelte
@@ -0,0 +1,99 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/sheet.json -->
+<!--
+  SheetTrigger renders the menu button (aria-expanded, aria-controls, aria-haspopup=dialog) with Lucide menu/x
+  icons.
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** SheetTrigger: the classes of each value of each prop (shadcn/cva style). */
+  export const sheettriggerVariants = variants({
+    base:
+      "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors " +
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    variants: {
+      variant: {
+        default: "bg-muted text-foreground hover:bg-accent",
+        ghost: "bg-transparent text-foreground hover:bg-muted",
+        contrast: "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+        current: "bg-transparent text-current hover:bg-current/10",
+      },
+      size: {
+        sm: "size-8",
+        default: "size-10",
+        lg: "size-12",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  });
+
+  export type SheetTriggerVariant = VariantKey<typeof sheettriggerVariants, "variant">;
+  export type SheetTriggerSize = VariantKey<typeof sheettriggerVariants, "size">;
+
+  export type SheetTriggerProps = {
+    variant?: SheetTriggerVariant;
+    size?: SheetTriggerSize;
+    controls?: string;
+    "aria-label"?: string;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { defaultIfEmpty, orUndef } from "../../utils/expr";
+
+  let {
+    variant,
+    size,
+    controls,
+    "aria-label": ariaLabel,
+    class: className,
+    ...rest
+  }: SheetTriggerProps = $props();
+
+  const cls = $derived(cn(sheettriggerVariants({ variant, size }), className));
+</script>
+
+<button
+  type="button"
+  {...(cls ? { class: cls } : {})}
+  data-ui8kit="sheet-trigger"
+  aria-controls={orUndef(controls)}
+  aria-expanded="false"
+  aria-haspopup="dialog"
+  aria-label={defaultIfEmpty(ariaLabel, "Open menu")}
+  {...rest}
+>
+  <svg
+    class="block size-5 in-aria-expanded:hidden"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <line x1="4" x2="20" y1="12" y2="12"></line>
+    <line x1="4" x2="20" y1="6" y2="6"></line>
+    <line x1="4" x2="20" y1="18" y2="18"></line>
+  </svg>
+  <svg
+    class="hidden size-5 in-aria-expanded:block"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M18 6 6 18"></path>
+    <path d="m6 6 12 12"></path>
+  </svg>
+</button>
diff --git a/packages/svelte/ui/src/primitives/sheet/sheet.svelte b/packages/svelte/ui/src/primitives/sheet/sheet.svelte
new file mode 100644
index 0000000..f59d968
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/sheet/sheet.svelte
@@ -0,0 +1,69 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/sheet.json -->
+<!--
+  Sheet renders the hidden dialog root: overlay + panel (children). ID is required for the trigger's
+  aria-controls.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Sheet: the classes of each value of each prop (shadcn/cva style). */
+  export const sheetVariants = variants({
+    base: "fixed inset-0 z-50 flex",
+    variants: {
+      side: {
+        left: "flex-row justify-start",
+        right: "flex-row justify-end",
+      },
+    },
+    defaultVariants: { side: "right" },
+  });
+
+  export type SheetSide = VariantKey<typeof sheetVariants, "side">;
+
+  export type SheetProps = {
+    side?: SheetSide;
+    id?: string;
+    "aria-label"?: string;
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { defaultIfEmpty, orUndef } from "../../utils/expr";
+
+  let {
+    side,
+    id: iD,
+    "aria-label": ariaLabel,
+    open,
+    class: className,
+    children,
+    ...rest
+  }: SheetProps = $props();
+
+  const cls = $derived(cn(sheetVariants({ side }), className));
+</script>
+
+<div
+  {...(cls ? { class: cls } : {})}
+  id={orUndef(iD)}
+  role="dialog"
+  aria-modal="true"
+  aria-label={defaultIfEmpty(ariaLabel, "Menu")}
+  data-ui8kit="sheet"
+  hidden={!(open) || undefined}
+  {...rest}
+>
+  <div class="absolute inset-0 bg-foreground/40" data-ui8kit="sheet-overlay"></div>
+  <div
+    class="relative flex h-full w-80 max-w-full flex-col gap-6 overflow-auto bg-background p-6 text-foreground shadow-lg"
+  >
+    {@render children?.()}
+  </div>
+</div>
diff --git a/packages/svelte/ui/src/primitives/skeleton/skeleton.svelte b/packages/svelte/ui/src/primitives/skeleton/skeleton.svelte
new file mode 100644
index 0000000..f8470a6
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/skeleton/skeleton.svelte
@@ -0,0 +1,42 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/skeleton.json -->
+<!--
+  Skeleton renders a decorative placeholder.
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Skeleton: the classes of each value of each prop (shadcn/cva style). */
+  export const skeletonVariants = variants({
+    base: "animate-pulse bg-muted motion-reduce:animate-none rounded",
+    variants: {
+      shape: {
+        line: "h-4 w-full",
+        block: "h-20 w-full",
+      },
+    },
+    defaultVariants: { shape: "line" },
+  });
+
+  export type SkeletonShape = VariantKey<typeof skeletonVariants, "shape">;
+
+  export type SkeletonProps = {
+    shape?: SkeletonShape;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    shape,
+    class: className,
+    ...rest
+  }: SkeletonProps = $props();
+
+  const cls = $derived(cn(skeletonVariants({ shape }), className));
+</script>
+
+<div {...(cls ? { class: cls } : {})} aria-hidden="true" data-slot="skeleton" {...rest}></div>
diff --git a/packages/svelte/ui/src/primitives/stack/stack.svelte b/packages/svelte/ui/src/primitives/stack/stack.svelte
new file mode 100644
index 0000000..2221b07
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/stack/stack.svelte
@@ -0,0 +1,76 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/stack.json -->
+<!--
+  Stack renders a vertical flex container.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Stack: the classes of each value of each prop (shadcn/cva style). */
+  export const stackVariants = variants({
+    base: "flex flex-col",
+    variants: {
+      gap: {
+        "0": "gap-0",
+        "2": "gap-2",
+        "4": "gap-4",
+        "6": "gap-6",
+        "8": "gap-8",
+        "10": "gap-10",
+        "12": "gap-12",
+        auto: "",
+      },
+      align: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
+      },
+      justify: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+      },
+    },
+    defaultVariants: { gap: "auto", align: "start", justify: "start" },
+  });
+
+  export type StackGap = VariantKey<typeof stackVariants, "gap">;
+  export type StackAlign = VariantKey<typeof stackVariants, "align">;
+  export type StackJustify = VariantKey<typeof stackVariants, "justify">;
+
+  export type StackProps = {
+    gap?: StackGap;
+    align?: StackAlign;
+    justify?: StackJustify;
+    tag?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { resolveTag, TagGroup } from "../../utils/tags";
+
+  let {
+    gap,
+    align,
+    justify,
+    tag,
+    class: className,
+    children,
+    ...rest
+  }: StackProps = $props();
+
+  const cls = $derived(cn(stackVariants({ gap, align, justify }), className));
+  const resolvedTagValue = $derived(resolveTag(tag, "div", TagGroup.Stack));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/primitives/switch/switch.svelte b/packages/svelte/ui/src/primitives/switch/switch.svelte
new file mode 100644
index 0000000..5c52354
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/switch/switch.svelte
@@ -0,0 +1,60 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/switch.json -->
+<!--
+  Switch renders input[type=checkbox] with switch role attrs.
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Switch: the classes of each value of each prop (shadcn/cva style). */
+  export const switchVariants = variants({
+    base:
+      "relative shrink-0 appearance-none bg-muted inset-ring inset-ring-input checked:bg-primary " +
+      "checked:inset-ring-primary switch-knob disabled:cursor-not-allowed disabled:opacity-50 rounded-full",
+    variants: {
+      size: {
+        default: "h-5 w-9 [--knob:12px] [--pad:4px]",
+        sm: "h-4 w-8 [--knob:12px] [--pad:2px]",
+      },
+    },
+    defaultVariants: { size: "default" },
+  });
+
+  export type SwitchSize = VariantKey<typeof switchVariants, "size">;
+
+  export type SwitchProps = {
+    size?: SwitchSize;
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { boolStr } from "../../utils/expr";
+
+  let {
+    size,
+    checked,
+    disabled,
+    required,
+    class: className,
+    ...rest
+  }: SwitchProps = $props();
+
+  const cls = $derived(cn(switchVariants({ size }), className));
+</script>
+
+<input
+  type="checkbox"
+  {...(cls ? { class: cls } : {})}
+  checked={checked || undefined}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  role="switch"
+  aria-checked={boolStr(checked)}
+  {...rest}
+/>
diff --git a/packages/svelte/ui/src/primitives/table/table-body.svelte b/packages/svelte/ui/src/primitives/table/table-body.svelte
new file mode 100644
index 0000000..29806bc
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table-body.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableBody renders the tbody section.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type TableBodyProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: TableBodyProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<tbody {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</tbody>
diff --git a/packages/svelte/ui/src/primitives/table/table-caption.svelte b/packages/svelte/ui/src/primitives/table/table-caption.svelte
new file mode 100644
index 0000000..876563f
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table-caption.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableCaption renders the table caption.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type TableCaptionProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: TableCaptionProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<caption {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</caption>
diff --git a/packages/svelte/ui/src/primitives/table/table-cell.svelte b/packages/svelte/ui/src/primitives/table/table-cell.svelte
new file mode 100644
index 0000000..c1bb8a2
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table-cell.svelte
@@ -0,0 +1,52 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableCell renders td with colspan and rowspan.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../../utils";
+
+  /** TableCell: the classes of each value of each prop (shadcn/cva style). */
+  export const tableCellVariants = variants({
+    base: "px-2 py-2 align-middle",
+    variants: {},
+    defaultVariants: {},
+  });
+
+  export type TableCellProps = {
+    scope?: string;
+    colspan?: number;
+    rowspan?: number;
+    abbr?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { isSetNum } from "../../utils/expr";
+
+  let {
+    scope,
+    colspan: colSpan,
+    rowspan: rowSpan,
+    abbr,
+    class: className,
+    children,
+    ...rest
+  }: TableCellProps = $props();
+
+  const cls = $derived(cn(tableCellVariants(), className));
+</script>
+
+<td
+  {...(cls ? { class: cls } : {})}
+  {...({ "colspan": isSetNum(colSpan) ? String(colSpan ?? 0) : undefined } as Record<string, unknown>)}
+  {...({ "rowspan": isSetNum(rowSpan) ? String(rowSpan ?? 0) : undefined } as Record<string, unknown>)}
+  {...rest}
+>
+  {@render children?.()}
+</td>
diff --git a/packages/svelte/ui/src/primitives/table/table-col-group.svelte b/packages/svelte/ui/src/primitives/table/table-col-group.svelte
new file mode 100644
index 0000000..7e4ed30
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table-col-group.svelte
@@ -0,0 +1,37 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableColGroup renders colgroup with optional span.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type TableColGroupProps = {
+    span?: number;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { isSetNum } from "../../utils/expr";
+
+  let {
+    span,
+    class: className,
+    children,
+    ...rest
+  }: TableColGroupProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<colgroup
+  {...(cls ? { class: cls } : {})}
+  {...({ "span": isSetNum(span) ? String(span ?? 0) : undefined } as Record<string, unknown>)}
+  {...rest}
+>
+  {@render children?.()}
+</colgroup>
diff --git a/packages/svelte/ui/src/primitives/table/table-col.svelte b/packages/svelte/ui/src/primitives/table/table-col.svelte
new file mode 100644
index 0000000..c7760f9
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table-col.svelte
@@ -0,0 +1,32 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableCol renders a single col definition.
+-->
+<script lang="ts" module>
+
+  export type TableColProps = {
+    span?: number;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { isSetNum } from "../../utils/expr";
+
+  let {
+    span,
+    class: className,
+    ...rest
+  }: TableColProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<col
+  {...(cls ? { class: cls } : {})}
+  {...({ "span": isSetNum(span) ? String(span ?? 0) : undefined } as Record<string, unknown>)}
+  {...rest}
+/>
diff --git a/packages/svelte/ui/src/primitives/table/table-foot.svelte b/packages/svelte/ui/src/primitives/table/table-foot.svelte
new file mode 100644
index 0000000..e070cb3
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table-foot.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableFoot renders the tfoot section.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type TableFootProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: TableFootProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<tfoot {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</tfoot>
diff --git a/packages/svelte/ui/src/primitives/table/table-head-cell.svelte b/packages/svelte/ui/src/primitives/table/table-head-cell.svelte
new file mode 100644
index 0000000..a99c87c
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table-head-cell.svelte
@@ -0,0 +1,54 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableHeadCell renders th with optional scope and abbr.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants } from "../../utils";
+
+  /** TableHeadCell: the classes of each value of each prop (shadcn/cva style). */
+  export const tableHeadCellVariants = variants({
+    base: "px-2 py-2 text-left align-middle font-semibold",
+    variants: {},
+    defaultVariants: {},
+  });
+
+  export type TableHeadCellProps = {
+    scope?: string;
+    colspan?: number;
+    rowspan?: number;
+    abbr?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { isSetNum, oneOfOrLower, orUndef } from "../../utils/expr";
+
+  let {
+    scope,
+    colspan: colSpan,
+    rowspan: rowSpan,
+    abbr,
+    class: className,
+    children,
+    ...rest
+  }: TableHeadCellProps = $props();
+
+  const cls = $derived(cn(tableHeadCellVariants(), className));
+</script>
+
+<th
+  {...(cls ? { class: cls } : {})}
+  {...({ "scope": orUndef(oneOfOrLower(scope, "", "col", "colgroup", "row", "rowgroup")) } as Record<string, unknown>)}
+  abbr={orUndef(abbr)}
+  {...({ "colspan": isSetNum(colSpan) ? String(colSpan ?? 0) : undefined } as Record<string, unknown>)}
+  {...({ "rowspan": isSetNum(rowSpan) ? String(rowSpan ?? 0) : undefined } as Record<string, unknown>)}
+  {...rest}
+>
+  {@render children?.()}
+</th>
diff --git a/packages/svelte/ui/src/primitives/table/table-head.svelte b/packages/svelte/ui/src/primitives/table/table-head.svelte
new file mode 100644
index 0000000..5065aaa
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table-head.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableHead renders the thead section.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type TableHeadProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: TableHeadProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<thead {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</thead>
diff --git a/packages/svelte/ui/src/primitives/table/table-row.svelte b/packages/svelte/ui/src/primitives/table/table-row.svelte
new file mode 100644
index 0000000..438121b
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table-row.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableRow renders one tr row.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type TableRowProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: TableRowProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<tr {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</tr>
diff --git a/packages/svelte/ui/src/primitives/table/table.svelte b/packages/svelte/ui/src/primitives/table/table.svelte
new file mode 100644
index 0000000..5c374b4
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/table/table.svelte
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  Table renders the root table element.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export type TableProps = {
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: TableProps = $props();
+
+  const cls = $derived(cn(className));
+</script>
+
+<table {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</table>
diff --git a/packages/svelte/ui/src/primitives/text/text.svelte b/packages/svelte/ui/src/primitives/text/text.svelte
new file mode 100644
index 0000000..5f698c4
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/text/text.svelte
@@ -0,0 +1,68 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/text.json -->
+<!--
+  Text renders a p element with body copy classes, or the block or inline text element of `Tag`.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Text: the classes of each value of each prop (shadcn/cva style). */
+  export const textVariants = variants({
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        base: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+        "5xl": "text-5xl",
+        inherit: "",
+      },
+      weight: {
+        regular: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+        inherit: "",
+      },
+    },
+    defaultVariants: { size: "inherit", weight: "inherit" },
+  });
+
+  export type TextSize = VariantKey<typeof textVariants, "size">;
+  export type TextWeight = VariantKey<typeof textVariants, "weight">;
+
+  export type TextProps = {
+    size?: TextSize;
+    weight?: TextWeight;
+    tag?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { resolveTag, TagGroup } from "../../utils/tags";
+
+  let {
+    size,
+    weight,
+    tag,
+    class: className,
+    children,
+    ...rest
+  }: TextProps = $props();
+
+  const cls = $derived(cn(textVariants({ size, weight }), className));
+  const resolvedTagValue = $derived(resolveTag(tag, "p", TagGroup.Text));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/primitives/textarea/textarea.svelte b/packages/svelte/ui/src/primitives/textarea/textarea.svelte
new file mode 100644
index 0000000..0dcbfaf
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/textarea/textarea.svelte
@@ -0,0 +1,68 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/textarea.json -->
+<!--
+  Textarea renders a styled multi-line form control.
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Textarea: the classes of each value of each prop (shadcn/cva style). */
+  export const textareaVariants = variants({
+    base:
+      "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+      "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+      "focus-visible:inset-ring-ring rounded",
+    variants: {
+      size: {
+        sm: "min-h-16 px-3 py-2 text-base md:text-sm",
+        default: "min-h-20 px-3 py-2 text-base md:text-sm",
+        lg: "min-h-24 px-4 py-3 text-base",
+      },
+      variant: {
+        default: "",
+        ghost: "bg-muted inset-ring-transparent",
+      },
+    },
+    defaultVariants: { size: "default", variant: "default" },
+  });
+
+  export type TextareaVariant = VariantKey<typeof textareaVariants, "variant">;
+  export type TextareaSize = VariantKey<typeof textareaVariants, "size">;
+
+  export type TextareaProps = {
+    variant?: TextareaVariant;
+    size?: TextareaSize;
+    value?: string;
+    rows?: number;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { isSetNum } from "../../utils/expr";
+
+  let {
+    variant,
+    size,
+    value,
+    rows,
+    disabled,
+    required,
+    class: className,
+    ...rest
+  }: TextareaProps = $props();
+
+  const cls = $derived(cn(textareaVariants({ size, variant }), className));
+</script>
+
+<textarea
+  {...(cls ? { class: cls } : {})}
+  {...({ "rows": (isSetNum(rows) ? String(rows ?? 0) : "4") } as Record<string, unknown>)}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  {...rest}
+>{value}</textarea>
diff --git a/packages/svelte/ui/src/primitives/themetoggle/theme-toggle.svelte b/packages/svelte/ui/src/primitives/themetoggle/theme-toggle.svelte
new file mode 100644
index 0000000..06964e4
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/themetoggle/theme-toggle.svelte
@@ -0,0 +1,99 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/themetoggle.json -->
+<!--
+  ThemeToggle renders a button with Lucide sun/moon icons; aria-pressed reflects dark mode.
+-->
+<script lang="ts" module>
+  import { variants, type VariantKey } from "../../utils";
+
+  /** ThemeToggle: the classes of each value of each prop (shadcn/cva style). */
+  export const themetoggleVariants = variants({
+    base:
+      "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors " +
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    variants: {
+      variant: {
+        default: "bg-muted text-foreground hover:bg-accent",
+        ghost: "bg-transparent text-foreground hover:bg-muted",
+        contrast: "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+        current: "bg-transparent text-current hover:bg-current/10",
+      },
+      size: {
+        sm: "size-8",
+        default: "size-10",
+        lg: "size-12",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  });
+
+  export type ThemeToggleVariant = VariantKey<typeof themetoggleVariants, "variant">;
+  export type ThemeToggleSize = VariantKey<typeof themetoggleVariants, "size">;
+
+  export type ThemeToggleProps = {
+    variant?: ThemeToggleVariant;
+    size?: ThemeToggleSize;
+    "aria-label"?: string;
+    class?: string;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { defaultIfEmpty } from "../../utils/expr";
+
+  let {
+    variant,
+    size,
+    "aria-label": ariaLabel,
+    class: className,
+    ...rest
+  }: ThemeToggleProps = $props();
+
+  const cls = $derived(cn(themetoggleVariants({ variant, size }), className));
+</script>
+
+<button
+  type="button"
+  {...(cls ? { class: cls } : {})}
+  data-ui8kit="theme-toggle"
+  aria-label={defaultIfEmpty(ariaLabel, "Dark mode")}
+  aria-pressed="false"
+  {...rest}
+>
+  <svg
+    class="hidden size-5 dark:block"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="4"></circle>
+    <path d="M12 2v2"></path>
+    <path d="M12 20v2"></path>
+    <path d="m4.93 4.93 1.41 1.41"></path>
+    <path d="m17.66 17.66 1.41 1.41"></path>
+    <path d="M2 12h2"></path>
+    <path d="M20 12h2"></path>
+    <path d="m6.34 17.66-1.41 1.41"></path>
+    <path d="m19.07 4.93-1.41 1.41"></path>
+  </svg>
+  <svg
+    class="block size-5 dark:hidden"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+  </svg>
+</button>
diff --git a/packages/svelte/ui/src/primitives/title/title.svelte b/packages/svelte/ui/src/primitives/title/title.svelte
new file mode 100644
index 0000000..81c7b92
--- /dev/null
+++ b/packages/svelte/ui/src/primitives/title/title.svelte
@@ -0,0 +1,68 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/title.json -->
+<!--
+  Title renders the resolved heading element.
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import { variants, type VariantKey } from "../../utils";
+
+  /** Title: the classes of each value of each prop (shadcn/cva style). */
+  export const titleVariants = variants({
+    base: "text-foreground",
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        base: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+        "5xl": "text-5xl",
+        inherit: "",
+      },
+      weight: {
+        regular: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+      },
+    },
+    defaultVariants: { size: "inherit", weight: "semibold" },
+  });
+
+  export type TitleSize = VariantKey<typeof titleVariants, "size">;
+  export type TitleWeight = VariantKey<typeof titleVariants, "weight">;
+
+  export type TitleProps = {
+    size?: TitleSize;
+    weight?: TitleWeight;
+    as?: 1 | 2 | 3 | 4 | 5 | 6;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { titleTag } from "../../utils/expr";
+
+  let {
+    size,
+    weight,
+    as,
+    class: className,
+    children,
+    ...rest
+  }: TitleProps = $props();
+
+  const cls = $derived(cn(titleVariants({ size, weight }), className));
+  const resolvedTagValue = $derived(titleTag(as));
+</script>
+
+<svelte:element this={resolvedTagValue} {...(cls ? { class: cls } : {})} {...rest}>
+  {@render children?.()}
+</svelte:element>
diff --git a/packages/svelte/ui/src/styles/index.css b/packages/svelte/ui/src/styles/index.css
new file mode 100644
index 0000000..cb56ae7
--- /dev/null
+++ b/packages/svelte/ui/src/styles/index.css
@@ -0,0 +1,7 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/generator/src/plan.ts (uiPackage) */
+/* Entry of the styles: theme tokens and the kit. @source makes Tailwind v4 scan this package for class names. */
+@import "./theme.css";
+@import "./kit.css";
+
+@source "../";
diff --git a/packages/svelte/ui/src/styles/kit.css b/packages/svelte/ui/src/styles/kit.css
new file mode 100644
index 0000000..f18dcc2
--- /dev/null
+++ b/packages/svelte/ui/src/styles/kit.css
@@ -0,0 +1,95 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/core/assets/styles/kit.css */
+/* Kit-wide CSS: base layer, input glyph utilities, focus ring. Colors and the one corner token (--radius) come from theme.css (shadcn neutral);
+   shadows: only floating layers have one (shadow-md, shadow-lg), set in their specs; nothing here draws one. */
+@layer base {
+  html, body { margin: 0; background: var(--color-background); color: var(--color-foreground); }
+  body { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; overflow-x: hidden; }
+  button { cursor: pointer; }
+  html { -webkit-text-size-adjust: 100%; color-scheme: light; }
+}
+
+/* the box of a checkbox: its corner is the theme radius scaled to the 16-20px box (0.4 x 10px = 4px), so it never reads as a radio */
+@utility checkbox-glyph {
+  display: inline-grid; place-content: center; border-radius: calc(var(--radius) * 0.4);
+  &::before { content: ""; width: 8px; height: 6px; opacity: 0; background: currentColor;
+    clip-path: polygon(0 55%, 14% 40%, 38% 64%, 86% 0, 100% 15%, 38% 95%); }
+  &:checked { color: var(--color-primary-foreground); }
+  &:checked::before { opacity: 1; }
+}
+/* a number field without the browser spin buttons (NumberField draws its own minus and plus) */
+@utility number-bare {
+  appearance: textfield; -moz-appearance: textfield;
+  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+}
+@utility radio-glyph {
+  display: inline-grid; place-content: center;
+  &::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 9999px; background: var(--color-primary-foreground); opacity: 0; }
+  &:checked::before { opacity: 1; }
+}
+@utility switch-knob {
+  &::before { content: ""; position: absolute; top: 50%; left: var(--pad); width: var(--knob); height: var(--knob); border-radius: 9999px;
+    background: var(--color-background); translate: 0 -50%; transition: left .15s; }
+  &:checked::before { left: calc(100% - var(--pad) - var(--knob)); }
+}
+@utility progress-bar {
+  &::-webkit-progress-bar { background: transparent; }
+  &::-webkit-progress-value { background: var(--bar); border-radius: var(--radius); }
+  &::-moz-progress-bar { background: var(--bar); border-radius: var(--radius); }
+  &::-webkit-meter-bar { background: transparent; border: 0; }
+  &::-webkit-meter-optimum-value { background: var(--bar); }
+}
+
+/* Focus ring sits above utility shadows. Keyboard only. The 4px halo is gray unless the element sets a ring colour
+   (shadcn style, e.g. focus-visible:ring-destructive/20 on the destructive variants); --tw-ring-color does not inherit. */
+:where(a, button, input, select, textarea, summary, [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="option"], [role="treeitem"], [role="radio"], [role="switch"], [tabindex]):focus-visible {
+  outline: none;
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), 0 0 0 4px var(--tw-ring-color, rgb(128 128 128 / 0.15)), var(--tw-shadow, 0 0 #0000);
+}
+[data-slot="prompt-input"]:focus-within, [data-slot="smartbox"]:focus-within { box-shadow: 0 0 0 4px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-border); }
+[data-slot="prompt-input"] textarea:focus-visible, [data-slot="smartbox"] input:focus-visible { box-shadow: none; }
+[data-slot="file-tree-item"]:focus-visible, [data-slot="editor-tab"]:focus-visible, [data-slot="icon-tab"]:focus-visible, [data-slot="dropdown-item"]:focus-visible {
+  box-shadow: inset 0 0 0 2px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-muted-foreground);
+}
+:where([data-screen]) :focus:not(:focus-visible) { outline: none; }
+::selection { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
+
+/* The disclosure indicator: the Lucide chevron-down drawn in the text colour; the Summary brick turns it over when its
+   details open (group-open:rotate-180), so an accordion needs no script. */
+[data-slot="summary-indicator"] {
+  display: inline-block;
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+/* Per-element tokens (UI8KIT-2.0 §11): badge, button, card, alert, media. An unset token falls back to the value of the utility class the
+   rule matches (p-6, px-4 h-10, ...), stated explicitly: a revert-layer fallback inside var() is not supported by every
+   browser (there the property became unset: buttons and badges lost their padding and height).
+   A skin or a scope (a wrapper, the magazine specimen) sets only the ones it wants.
+   Radius:  --radius-badge|button|card|alert|media   (unset: var(--radius); the badge unset: the pill). Only elements that carry plain `rounded` follow it.
+   Shadow:  --shadow-card|alert|media                (unset: the spec's own: none). A full box-shadow layer, e.g. var(--shadow-sm) or 0 0 #0000.
+   Density: data-density-badge|button|card|alert = compact | default | comfortable, on the element or any ancestor, sets --pad-*:
+            card 16/24/32 (padding of a default card), alert inline 8/8/16 with --min-alert 24/32/40,
+            button inline 12/16/20 and height 32/40/48 (default size), badge inline 8/12/16 and height 20/24/28 (default size).
+            4px steps only inside controls (button, badge); card and alert stay on the 8px step. */
+[data-slot="button"].rounded { border-radius: var(--radius-button, var(--radius)); }
+[data-slot="card"].rounded { border-radius: var(--radius-card, var(--radius)); }
+[data-slot="alert"].rounded { border-radius: var(--radius-alert, var(--radius)); }
+[data-slot="media-frame"].rounded { border-radius: var(--radius-media, var(--radius)); }
+[data-slot="badge"].rounded-full { border-radius: var(--radius-badge, calc(infinity * 1px)); }
+[data-slot="card"] { --tw-shadow: var(--shadow-card, 0 0 #0000); }
+[data-slot="alert"] { --tw-shadow: var(--shadow-alert, 0 0 #0000); }
+[data-slot="media-frame"] { --tw-shadow: var(--shadow-media, 0 0 #0000); }
+[data-slot="card"].p-6 { padding: var(--pad-card, calc(var(--spacing) * 6)); }
+[data-slot="alert"].px-2 { padding-inline: var(--pad-alert, calc(var(--spacing) * 2)); }
+[data-slot="alert"].min-h-8 { min-height: var(--min-alert, calc(var(--spacing) * 8)); }
+[data-slot="button"].px-4.h-10 { padding-inline: var(--pad-button, calc(var(--spacing) * 4)); height: var(--h-button, calc(var(--spacing) * 10)); }
+[data-slot="badge"].px-3.h-6 { padding-inline: var(--pad-badge, calc(var(--spacing) * 3)); height: var(--h-badge, calc(var(--spacing) * 6)); }
+[data-density-card="compact"] { --pad-card: 16px; }
+[data-density-card="comfortable"] { --pad-card: 32px; }
+[data-density-alert="compact"] { --pad-alert: 8px; --min-alert: 24px; }
+[data-density-alert="comfortable"] { --pad-alert: 16px; --min-alert: 40px; }
+[data-density-button="compact"] { --pad-button: 12px; --h-button: 32px; }
+[data-density-button="comfortable"] { --pad-button: 20px; --h-button: 48px; }
+[data-density-badge="compact"] { --pad-badge: 8px; --h-badge: 20px; }
+[data-density-badge="comfortable"] { --pad-badge: 16px; --h-badge: 28px; }
diff --git a/packages/svelte/ui/src/styles/theme.css b/packages/svelte/ui/src/styles/theme.css
new file mode 100644
index 0000000..4b05103
--- /dev/null
+++ b/packages/svelte/ui/src/styles/theme.css
@@ -0,0 +1,131 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/core/assets/styles/theme.css */
+@import "tailwindcss";
+
+/* shadcn/ui neutral theme (Tailwind v4, written as hsl() for old browsers; same colours as the oklch values published at https://ui.shadcn.com/docs/theming
+   ("Default Theme CSS", base color neutral). Dark mode: the .dark class or data-theme="dark" on an ancestor. */
+@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
+
+/* The one corner token. Plain `rounded` reads the bare --radius theme key, so every corner of the kit follows it
+   (shadcn keeps --radius in :root; here it sits in @theme so that `rounded` resolves to it; same value, 0.625rem). */
+@theme {
+  --radius: 0.625rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 4%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 4%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 4%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 43.5%);
+  --accent: hsl(0 0% 96%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0.6 88.4% 52.5%);
+  --border: hsl(0 0% 90%);
+  --input: hsl(0 0% 90%);
+  --ring: hsl(0 0% 63%);
+  --chart-1: hsl(18 100% 48%);
+  --chart-2: hsl(174.7 100% 29.5%);
+  --chart-3: hsl(196 72% 23%);
+  --chart-4: hsl(43.6 100% 50%);
+  --chart-5: hsl(36.3 100% 49.7%);
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(0 0% 4%);
+  --sidebar-primary: hsl(0 0% 9%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 96%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(0 0% 90%);
+  --sidebar-ring: hsl(0 0% 63%);
+}
+
+:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 4%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 90%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 15%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(0 0% 15%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(356.1 62.4% 52%);
+  --border: hsl(0 0% 100% / 10%);
+  --input: hsl(0 0% 100% / 15%);
+  --ring: hsl(0 0% 45%);
+  --chart-1: hsl(225.3 84.1% 49%);
+  --chart-2: hsl(160 100% 37%);
+  --chart-3: hsl(36.3 100% 49.7%);
+  --chart-4: hsl(273.3 100% 63.8%);
+  --chart-5: hsl(345 100% 56%);
+  --sidebar: hsl(0 0% 9%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(225.3 84.1% 49%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 15%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 100% / 10%);
+  --sidebar-ring: hsl(0 0% 45%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/packages/svelte/ui/src/utils/a11y/dismiss.ts b/packages/svelte/ui/src/utils/a11y/dismiss.ts
new file mode 100644
index 0000000..0f672de
--- /dev/null
+++ b/packages/svelte/ui/src/utils/a11y/dismiss.ts
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/dismiss.ts
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+export type DismissReason = "escape" | "outside";
+const stack: object[] = [];   // topmost dismissable layer handles Escape first (menu inside off-canvas sidebar, …)
+
+/** Escape and pointer-down outside the node call onDismiss. Returns the cleanup. */
+export function dismissable(node: HTMLElement, opts: () => { onDismiss: (reason: DismissReason) => void; ignore?: () => (Element | null | undefined)[]; outside?: boolean }): () => void {
+  {
+    const layer = {};
+    stack.push(layer);
+    const { onDismiss, ignore = () => [], outside = true } = opts();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || e.defaultPrevented || stack[stack.length - 1] !== layer) return;
+      e.preventDefault(); e.stopPropagation();
+      onDismiss("escape");
+    };
+    const onDown = (e: PointerEvent) => {
+      if (!outside || stack[stack.length - 1] !== layer) return;
+      const t = e.target as Node | null;
+      if (!t || node.contains(t) || ignore().some((el) => el?.contains(t))) return;
+      onDismiss("outside");
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onDown, true);
+      const i = stack.indexOf(layer); if (i >= 0) stack.splice(i, 1);
+    };
+  }
+}
diff --git a/packages/svelte/ui/src/utils/a11y/focus-trap.ts b/packages/svelte/ui/src/utils/a11y/focus-trap.ts
new file mode 100644
index 0000000..33606fa
--- /dev/null
+++ b/packages/svelte/ui/src/utils/a11y/focus-trap.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/focus-trap.ts
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+import { focusables } from "./focusable";
+
+/** Tab/Shift+Tab cycle inside `node`; on cleanup focus returns to the element focused before. */
+export function trapFocus(node: HTMLElement): () => void {
+  const previous = document.activeElement as HTMLElement | null;
+  if (!node.contains(previous)) queueMicrotask(() => focusables(node)[0]?.focus());
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key !== "Tab") return;
+    const items = focusables(node);
+    if (!items.length) { e.preventDefault(); return; }
+    const first = items[0], last = items[items.length - 1], cur = document.activeElement;
+    if (e.shiftKey && (cur === first || !node.contains(cur))) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && (cur === last || !node.contains(cur))) { e.preventDefault(); first.focus(); }
+  };
+  node.addEventListener("keydown", onKey);
+  return () => { node.removeEventListener("keydown", onKey); /* after the page is no longer inert */ requestAnimationFrame(() => { if (previous?.isConnected) previous.focus(); }); };
+}
diff --git a/packages/svelte/ui/src/utils/a11y/focusable.ts b/packages/svelte/ui/src/utils/a11y/focusable.ts
new file mode 100644
index 0000000..6b2897a
--- /dev/null
+++ b/packages/svelte/ui/src/utils/a11y/focusable.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/focusable.ts
+// Small headless helpers shared by the interactive primitives (menus, dialogs, tabs, off-canvas sidebar).
+export const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+/** visible, tabbable descendants of `root` in DOM order */
+export function focusables(root: HTMLElement): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((el) => !el.closest("[inert]") && el.getClientRects().length > 0 && getComputedStyle(el).visibility !== "hidden");
+}
diff --git a/packages/svelte/ui/src/utils/a11y/index.ts b/packages/svelte/ui/src/utils/a11y/index.ts
new file mode 100644
index 0000000..3487525
--- /dev/null
+++ b/packages/svelte/ui/src/utils/a11y/index.ts
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/index.ts
+export { FOCUSABLE, focusables } from "./focusable";
+export { moveFocus, typeahead, type RovingOptions } from "./roving";
+export { lockScroll } from "./scroll-lock";
+export { dismissable, type DismissReason } from "./dismiss";
+export { trapFocus } from "./focus-trap";
diff --git a/packages/svelte/ui/src/utils/a11y/roving.ts b/packages/svelte/ui/src/utils/a11y/roving.ts
new file mode 100644
index 0000000..b9f5246
--- /dev/null
+++ b/packages/svelte/ui/src/utils/a11y/roving.ts
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/roving.ts
+// Arrow-key navigation over a list of focusable items (menus, listboxes, tab lists, trees).
+export type RovingOptions = { orientation?: "vertical" | "horizontal" | "both"; loop?: boolean; activate?: boolean };
+
+/** Handles ArrowUp/Down/Left/Right, Home, End. Returns true when the key was consumed. */
+export function moveFocus(e: KeyboardEvent, items: HTMLElement[], { orientation = "vertical", loop = true, activate = false }: RovingOptions = {}): boolean {
+  if (!items.length || e.altKey || e.ctrlKey || e.metaKey) return false;
+  const prev = orientation !== "horizontal" ? ["ArrowUp"] : [];
+  const next = orientation !== "horizontal" ? ["ArrowDown"] : [];
+  if (orientation !== "vertical") { prev.push("ArrowLeft"); next.push("ArrowRight"); }
+  const cur = items.indexOf(document.activeElement as HTMLElement);
+  let idx = -1;
+  if (next.includes(e.key)) idx = cur < 0 ? 0 : cur + 1;
+  else if (prev.includes(e.key)) idx = cur < 0 ? items.length - 1 : cur - 1;
+  else if (e.key === "Home") idx = 0;
+  else if (e.key === "End") idx = items.length - 1;
+  else return false;
+  if (idx >= items.length) idx = loop ? 0 : items.length - 1;
+  if (idx < 0) idx = loop ? items.length - 1 : 0;
+  e.preventDefault();
+  const el = items[idx];
+  el.focus();
+  if (activate) el.click();
+  return true;
+}
+
+/** type-ahead: focus the next item whose text starts with the typed characters (reset after 600 ms) */
+export function typeahead() {
+  let buf = "", t: ReturnType<typeof setTimeout> | undefined;
+  return (e: KeyboardEvent, items: HTMLElement[]): boolean => {
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey || e.key === " ") return false;
+    buf += e.key.toLowerCase();
+    clearTimeout(t); t = setTimeout(() => (buf = ""), 600);
+    const start = Math.max(0, items.indexOf(document.activeElement as HTMLElement) + (buf.length === 1 ? 1 : 0));
+    const ordered = [...items.slice(start), ...items.slice(0, start)];
+    const hit = ordered.find((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(buf));
+    if (hit) { hit.focus(); e.preventDefault(); return true; }
+    return false;
+  };
+}
diff --git a/packages/svelte/ui/src/utils/a11y/scroll-lock.ts b/packages/svelte/ui/src/utils/a11y/scroll-lock.ts
new file mode 100644
index 0000000..f0bbd14
--- /dev/null
+++ b/packages/svelte/ui/src/utils/a11y/scroll-lock.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/scroll-lock.ts
+// Reference-counted page scroll lock (off-canvas sidebar, modal dialog). Compensates the scrollbar width on desktop.
+let count = 0;
+let saved = { overflow: "", paddingRight: "" };
+
+export function lockScroll(): () => void {
+  const root = document.documentElement;
+  if (count++ === 0) {
+    const sw = window.innerWidth - root.clientWidth;
+    saved = { overflow: root.style.overflow, paddingRight: root.style.paddingRight };
+    root.style.overflow = "hidden";
+    if (sw > 0) root.style.paddingRight = `${sw}px`;
+    root.setAttribute("data-scroll-locked", "");
+  }
+  let released = false;
+  return () => {
+    if (released) return; released = true;
+    if (--count === 0) {
+      root.style.overflow = saved.overflow; root.style.paddingRight = saved.paddingRight;
+      root.removeAttribute("data-scroll-locked");
+    }
+  };
+}
diff --git a/packages/svelte/ui/src/utils/cn.ts b/packages/svelte/ui/src/utils/cn.ts
new file mode 100644
index 0000000..0d98839
--- /dev/null
+++ b/packages/svelte/ui/src/utils/cn.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/cn.ts
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge class values. Caller-supplied classes win over recipe classes. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/svelte/ui/src/utils/env.ts b/packages/svelte/ui/src/utils/env.ts
new file mode 100644
index 0000000..762068d
--- /dev/null
+++ b/packages/svelte/ui/src/utils/env.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/env.ts
+export function isDevEnv(): boolean {
+  try {
+    const env = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
+    if (env && typeof env.DEV === "boolean") return env.DEV;
+  } catch {
+    // import.meta may be unavailable in some contexts
+  }
+  return false;
+}
diff --git a/packages/svelte/ui/src/utils/expr.ts b/packages/svelte/ui/src/utils/expr.ts
new file mode 100644
index 0000000..10e671e
--- /dev/null
+++ b/packages/svelte/ui/src/utils/expr.ts
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/expr.ts
+/**
+ * Tiny attribute-logic helpers used by generated components. One
+ * implementation per runtime family keeps every default-resolution decision
+ * table byte-identical across React, Svelte, and Vue (mirrors `expr.go`).
+ */
+
+export const trimStr = (v: string | number | null | undefined): string =>
+  v === null || v === undefined ? "" : String(v).trim();
+
+export const isSetStr = (v: string | null | undefined): boolean => trimStr(v) !== "";
+
+export const isSetNum = (v: number | null | undefined): boolean => (v ?? 0) > 0;
+
+/**
+ * `trim(v) === "" ? fallback : trim(v)` — DefaultInputType-style defaults.
+ * Generic so enum-typed props keep their literal union through the default.
+ */
+export const defaultIfEmpty = <T extends string>(v: T | null | undefined, fallback: T): T => {
+  const t = trimStr(v) as T;
+  return t === "" ? fallback : t;
+};
+
+/** Whitelist: returns `trim(v)` when in `allowed`, otherwise `fallback`. */
+export const oneOfOr = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v) as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+export const oneOfOrLower = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v).toLowerCase() as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+/** Decision table: `mapping[trim(v)] ?? fallback`. */
+export const mapOr = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v)] ?? fallback;
+
+export const mapOrLower = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v).toLowerCase()] ?? fallback;
+
+/** Integer decision table: `mapping[v] ?? fallback`. */
+export const intMapOr = <T extends string>(
+  v: number | null | undefined,
+  mapping: Record<number, T>,
+  fallback: T
+): T => mapping[v ?? 0] ?? fallback;
+
+/** Null-safe string equality (both sides normalized to ""). */
+export const eqStr = (a: string | null | undefined, b: string | null | undefined): boolean =>
+  (a ?? "") === (b ?? "");
+
+/** ARIA state stringification: always "true"/"false", never omitted. */
+export const boolStr = (v: boolean | null | undefined): "true" | "false" =>
+  v ? "true" : "false";
+
+/** Concatenation of trimmed parts (icon `Prefix + Name`). */
+export const concatTrim = (...parts: (string | null | undefined)[]): string =>
+  parts.map(trimStr).join("");
+
+/** Omit-if-empty attribute value: `""` → `undefined` so the attr is dropped. */
+export const orUndef = (v: string | null | undefined): string | undefined => {
+  const t = trimStr(v);
+  return t === "" ? undefined : String(v);
+};
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** h1–h6 from a heading level; 0/undefined/out-of-range default to h2. */
+export const titleTag = (order: HeadingLevel | number | null | undefined): string => {
+  switch (order) {
+    case 1:
+      return "h1";
+    case 3:
+      return "h3";
+    case 4:
+      return "h4";
+    case 5:
+      return "h5";
+    case 6:
+      return "h6";
+    default:
+      return "h2";
+  }
+};
diff --git a/packages/svelte/ui/src/utils/format.ts b/packages/svelte/ui/src/utils/format.ts
new file mode 100644
index 0000000..05a0355
--- /dev/null
+++ b/packages/svelte/ui/src/utils/format.ts
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/format.ts
+// Text and number formatting shared by every generated organism and screen. Pure functions, no runtime dependency.
+
+/** fills {0}, {1}... of a content template */
+export function tpl(template: string | undefined, ...values: Array<string | number | undefined>): string {
+  return (template ?? "").replace(/\{(\d+)\}/g, (_m, i: string) => String(values[Number(i)] ?? ""));
+}
+
+const nf = new Intl.NumberFormat("en-US");
+export function fmtNumber(n: number): string {
+  return nf.format(n);
+}
+
+/** digits of the minor unit (ISO 4217): cents for most currencies, none for JPY and KRW */
+export function minorDigits(currency: string): number {
+  return currency === "JPY" || currency === "KRW" ? 0 : 2;
+}
+
+const moneyCache = new Map<string, Intl.NumberFormat>();
+/** money in integer minor units (Codex v0.4: 1250 = 12.50 USD) -> "$12.50"; whole amounts drop the fraction: 1499_00 -> "$1,499" */
+export function fmtMoney(minor: number, currency: string): string {
+  const d = minorDigits(currency);
+  const cents = Math.round(minor);
+  const frac = d > 0 && cents % 10 ** d !== 0 ? d : 0;
+  const key = `${currency}:${frac}`;
+  let f = moneyCache.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: frac, maximumFractionDigits: frac });
+    moneyCache.set(key, f);
+  }
+  return f.format(cents / 10 ** d);
+}
+
+/** a content word by key (the status of a record -> its label); the key itself when the dictionary has no entry */
+export function at(dict: Record<string, string> | undefined, key: string): string {
+  return dict?.[key] ?? key;
+}
+
+/** the page numbers a pager shows: the first, the last and the neighbours of the current page; null is a gap */
+export function pageWindow(page: number, pages: number): (number | null)[] {
+  const keep = new Set([1, pages, page - 1, page, page + 1].filter((n) => n >= 1 && n <= pages));
+  const out: (number | null)[] = [];
+  let prev = 0;
+  for (const n of [...keep].sort((a, b) => a - b)) {
+    if (n - prev > 1) out.push(null);
+    out.push(n);
+    prev = n;
+  }
+  return out;
+}
+
+/** a responsive column variant of Grid capped by the number of items, so no column stays empty: ("1-4", 3) -> "1-3", ("2-6", 4) -> "2-4" */
+export function fitCols(cols: string, n: number): string {
+  const m = /^(\d+)-(\d+)$/.exec(cols);
+  if (!m) return cols;
+  const lo = Number(m[1]), hi = Number(m[2]);
+  if (n >= hi) return cols;
+  const top = Math.max(lo, n);
+  const known = ["1-2", "1-3", "1-4", "2-3", "2-4", "2-6", "3-6"];
+  for (let h = top; h > lo; h--) if (known.includes(`${lo}-${h}`)) return `${lo}-${h}`;
+  return String(Math.min(lo, Math.max(n, 1)));
+}
+
+/** a label of segments joined by ", " without a segment equal (case-insensitive) to the one before it:
+ *  "Footer, Footer, Centered" -> "Footer, Centered" */
+export function uniqLabel(label: string | undefined): string {
+  const parts = (label ?? "").split(", ");
+  return parts.filter((s, i) => i === 0 || s.toLowerCase() !== (parts[i - 1] ?? "").toLowerCase()).join(", ");
+}
diff --git a/packages/svelte/ui/src/utils/index.ts b/packages/svelte/ui/src/utils/index.ts
new file mode 100644
index 0000000..725a2fa
--- /dev/null
+++ b/packages/svelte/ui/src/utils/index.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/index.ts
+export { cn } from "./cn";
+export { isDevEnv } from "./env";
+export { variants, type VariantFn, type VariantKey, type VariantSelection, type VariantTable } from "./variants";
+export { TagGroup, isAllowedTag, resolveTag } from "./tags";
+export * from "./expr";
+export { tpl, fmtNumber, fmtMoney, minorDigits, at, pageWindow, fitCols, uniqLabel } from "./format";
+export * from "./a11y";
diff --git a/packages/svelte/ui/src/utils/tags.ts b/packages/svelte/ui/src/utils/tags.ts
new file mode 100644
index 0000000..115a7d0
--- /dev/null
+++ b/packages/svelte/ui/src/utils/tags.ts
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/tags.ts
+// Code generated by tagsgen. DO NOT EDIT.
+
+import { isDevEnv } from "./env";
+
+export const TagGroup = {
+  Layout: "Layout",
+  BoxAllowed: "BoxAllowed",
+  BlockText: "BlockText",
+  Inline: "Inline",
+  Heading: "Heading",
+  List: "List",
+  ListItem: "ListItem",
+  Form: "Form",
+  FormControl: "FormControl",
+  FormLabel: "FormLabel",
+  Table: "Table",
+  TableSection: "TableSection",
+  TableRow: "TableRow",
+  TableCell: "TableCell",
+  TableColumn: "TableColumn",
+  Media: "Media",
+  Disclosure: "Disclosure",
+  Container: "Container",
+  Stack: "Stack",
+  Group: "Group",
+  Text: "Text",
+} as const;
+
+export type TagGroup = (typeof TagGroup)[keyof typeof TagGroup];
+
+const layoutTags = new Set(["div", "section", "article", "aside", "header", "footer", "main", "nav", "figure", "search", "hgroup"]);
+const boxAllowedTags = new Set(["div"]);
+const blockTextTags = new Set(["p", "blockquote", "figcaption", "address", "pre"]);
+const inlineTags = new Set(["span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"]);
+const headingTags = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+const listTags = new Set(["ul", "ol", "dl", "menu"]);
+const listItemTags = new Set(["li", "dt", "dd"]);
+const formTags = new Set(["form", "fieldset"]);
+const formControlTags = new Set(["input", "textarea", "select", "button", "option", "optgroup", "datalist", "output", "meter", "progress"]);
+const formLabelTags = new Set(["label", "legend"]);
+const tableTags = new Set(["table"]);
+const tableSectionTags = new Set(["thead", "tbody", "tfoot"]);
+const tableRowTags = new Set(["tr"]);
+const tableCellTags = new Set(["th", "td"]);
+const tableColumnTags = new Set(["colgroup", "col"]);
+const mediaTags = new Set(["img", "picture", "source"]);
+const disclosureTags = new Set(["details", "summary"]);
+const containerTags = new Set(["div", "main", "section"]);
+const stackTags = new Set(["div", "ul", "ol"]);
+const groupTags = new Set(["div", "fieldset", "dl"]);
+
+function oneOf(tag: string, options: Set<string>): boolean {
+  return options.has(tag);
+}
+
+const warnedTagFallbacks = new Set<string>();
+
+function warnTagFallback(tag: string, fallback: string, group: TagGroup): void {
+  if (!isDevEnv()) return;
+  const key = `${group}:${tag}:${fallback}`;
+  if (warnedTagFallbacks.has(key)) return;
+  warnedTagFallbacks.add(key);
+  console.warn(`[resolveTag] disallowed tag "${tag}" for group "${group}", fallback "${fallback}" used.`);
+}
+
+export function isAllowedTag(tag: string, group: TagGroup): boolean {
+  const t = tag.trim().toLowerCase();
+  switch (group) {
+    case TagGroup.Layout:
+      return oneOf(t, layoutTags);
+    case TagGroup.BoxAllowed:
+      return oneOf(t, boxAllowedTags);
+    case TagGroup.BlockText:
+      return oneOf(t, blockTextTags);
+    case TagGroup.Inline:
+      return oneOf(t, inlineTags);
+    case TagGroup.Heading:
+      return oneOf(t, headingTags);
+    case TagGroup.List:
+      return oneOf(t, listTags);
+    case TagGroup.ListItem:
+      return oneOf(t, listItemTags);
+    case TagGroup.Form:
+      return oneOf(t, formTags);
+    case TagGroup.FormControl:
+      return oneOf(t, formControlTags);
+    case TagGroup.FormLabel:
+      return oneOf(t, formLabelTags);
+    case TagGroup.Table:
+      return oneOf(t, tableTags);
+    case TagGroup.TableSection:
+      return oneOf(t, tableSectionTags);
+    case TagGroup.TableRow:
+      return oneOf(t, tableRowTags);
+    case TagGroup.TableCell:
+      return oneOf(t, tableCellTags);
+    case TagGroup.TableColumn:
+      return oneOf(t, tableColumnTags);
+    case TagGroup.Media:
+      return oneOf(t, mediaTags);
+    case TagGroup.Disclosure:
+      return oneOf(t, disclosureTags);
+    case TagGroup.Container:
+      return oneOf(t, containerTags);
+    case TagGroup.Stack:
+      return oneOf(t, stackTags);
+    case TagGroup.Group:
+      return oneOf(t, groupTags);
+    case TagGroup.Text:
+      return blockTextTags.has(t) || inlineTags.has(t);
+    default:
+      return false;
+  }
+}
+
+export function resolveTag(tag: string | undefined, fallback: string, group: TagGroup): string {
+  const t = tag?.trim().toLowerCase() ?? "";
+  if (!t) return fallback;
+  if (isAllowedTag(t, group)) return t;
+  warnTagFallback(t, fallback, group);
+  return fallback;
+}
diff --git a/packages/svelte/ui/src/utils/variants.ts b/packages/svelte/ui/src/utils/variants.ts
new file mode 100644
index 0000000..1c00c17
--- /dev/null
+++ b/packages/svelte/ui/src/utils/variants.ts
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/variants.ts
+import { cn } from "./cn";
+import { isDevEnv } from "./env";
+
+/**
+ * A shadcn/cva-style variant table, without the dependency (same idea as `cva` from class-variance-authority).
+ *
+ *   const badgeVariants = variants({
+ *     base: "inline-flex items-center",
+ *     variants: { size: { sm: "h-5 px-2", lg: "h-8 px-3" } },
+ *     defaultVariants: { size: "sm" },
+ *     compoundVariants: [{ size: "lg", shape: "rounded", class: "rounded-lg" }],
+ *   });
+ *   badgeVariants({ size: "lg" }); // "inline-flex items-center h-8 px-3"
+ *
+ * Classes come in this order: base, each variant in table order, then the matching compound variants.
+ * tailwind-merge (`cn`) resolves conflicts, the later class wins. A compound value may list alternatives: "32|lg".
+ */
+export type VariantTable = {
+  base?: string;
+  variants: Record<string, Record<string, string>>;
+  defaultVariants: Record<string, string>;
+  compoundVariants?: Array<{ class: string } & Record<string, string>>;
+};
+
+/** the props a table accepts: one optional value per variant */
+export type VariantSelection<T extends VariantTable> = {
+  [K in keyof T["variants"]]?: (keyof T["variants"][K] & string) | undefined;
+};
+
+/** a variant function: call it with the selected values, read `.table` for the types */
+export type VariantFn<T extends VariantTable> = ((selection?: VariantSelection<T>) => string) & { table: T };
+
+/** the values of one variant of a table: `VariantKey<typeof badgeVariants, "size">` is `"sm" | "lg"` */
+export type VariantKey<F extends { table: VariantTable }, K extends keyof F["table"]["variants"]> = Exclude<
+  keyof F["table"]["variants"][K] & string,
+  ""
+>;
+
+export function variants<T extends VariantTable>(table: T): VariantFn<T> {
+  const pick = (selection: Record<string, string | undefined>, key: string): string =>
+    (selection[key] ?? "").trim() || (table.defaultVariants[key] ?? "").trim();
+  const fn = (selection: VariantSelection<T> = {}): string => {
+    const sel = selection as Record<string, string | undefined>;
+    const parts: string[] = [table.base ?? ""];
+    for (const [key, choices] of Object.entries(table.variants)) {
+      const choice = pick(sel, key);
+      const cls = choices[choice];
+      // a typo in development is an error; in production the unknown value is dropped
+      if (cls === undefined && isDevEnv()) throw new Error(`[variants] unknown value "${choice}" for "${key}"`);
+      parts.push(cls ?? "");
+    }
+    for (const compound of table.compoundVariants ?? []) {
+      const matches = Object.entries(compound).every(([k, want]) => k === "class" || want.split("|").includes(pick(sel, k)));
+      if (matches) parts.push(compound.class);
+    }
+    return cn(...parts.map((p) => p.trim()).filter(Boolean));
+  };
+  return Object.assign(fn, { table });
+}
diff --git a/packages/svelte/ui/tsconfig.json b/packages/svelte/ui/tsconfig.json
new file mode 100644
index 0000000..4ecab6c
--- /dev/null
+++ b/packages/svelte/ui/tsconfig.json
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/plan.ts (uiPackage)
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": { "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "types": ["svelte"], "allowArbitraryExtensions": true, "resolveJsonModule": true, "noEmit": true },
+  "include": ["src/**/*.ts", "src/**/*.svelte"]
+}
diff --git a/packages/templ/ui/.gitignore b/packages/templ/ui/.gitignore
new file mode 100644
index 0000000..d4063c7
--- /dev/null
+++ b/packages/templ/ui/.gitignore
@@ -0,0 +1,3 @@
+# Code generated by xgen. DO NOT EDIT.
+# templ generate output: rebuilt by bun run check (templ generate, go vet, go build)
+*_templ.go
diff --git a/packages/templ/ui/.xgen-manifest.json b/packages/templ/ui/.xgen-manifest.json
new file mode 100644
index 0000000..4710d77
--- /dev/null
+++ b/packages/templ/ui/.xgen-manifest.json
@@ -0,0 +1,387 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "packages/templ/ui",
+  "files": {
+    ".gitignore": "bbd5194b8a23ce62fcfa3b019c99087415b4db0baf47032a735b8fcf52784114",
+    "blocks/about-company.templ": "26f0031a4759996a4587b9f422eff4d8f14e4d0f4db5e200762796c004d0c146",
+    "blocks/about-me.templ": "7eb31974334473fe8059e7b52ad4b1e05f5fe4c7c04990e86ea5e4abfec972a2",
+    "blocks/action-group.templ": "26aadb0ea05e054d29789cfffc4a2d294ab2120a7adf52158d7c099ca1a78b2d",
+    "blocks/activity-feed.templ": "3756c3584a3d9080c6e02ccca7f09b0191480cb2051d71cb26a5062e53413454",
+    "blocks/announcement-bar.templ": "d7d3cef8399d8d0a0e6fc473756fa4a5f9c41ec9ec6a95fb1a66a687da54762b",
+    "blocks/app-main.templ": "2e3d1cee466573df5b79c73fe3509f33928ebea48ef3beee3a5bc362ed3f6329",
+    "blocks/app-shell.templ": "221e03d5a4ff1d4e2b3e211d2bd5f1c91d0fb9aa110760844ddfb72603f953ce",
+    "blocks/article-block.templ": "68dba63a9e37919960d4a8a5adb35e547a327388932a50c2d46310e57fc89a2f",
+    "blocks/article-body.templ": "8f55f102a04d0bd748d14a18584f30a1bd2e360482ed225b69448c2a806c0d21",
+    "blocks/auth-card.templ": "a95a622126f76d60545e779e51d6621f43a3593884c884b5d8cfd82e47bd6493",
+    "blocks/auth-form.templ": "1d3698d2ac95a79459e89e8507aa6da08f6060480bd7f05e0d975a7dfc51ddb6",
+    "blocks/auth-layout.templ": "ebb70252789304c9a54c6b38249a0e2e3420d747cb7bfd3a9245bd7ceffb9bdb",
+    "blocks/avatar.templ": "69c2659857c7826eec0454f012814acc049b528465aec3e5e812603be8669cc7",
+    "blocks/backdrop.templ": "acdb84e8f8c4b66554d2357a2fa21e584ce4d7733e5854df374b4469da60a9f3",
+    "blocks/badge-square.templ": "b64a3fdd94485d25bacb4d4c1ef1a19f7f0b1ce70ed9c3ebf7684ed503e4bece",
+    "blocks/bar-chart.templ": "2a5d54d0b6386da604f1e7d31cae0e761daedb8a1340f441462f0835fe9ccd9d",
+    "blocks/before-after.templ": "284133b100cb297108c59435cd6bd656291115b7a2657a9a8b1a2d1bad6f003a",
+    "blocks/bento-grid.templ": "6127a617128ee651fe2f30d8bc5b1458a7693dffd14366cf233b9d43cc8a9b5f",
+    "blocks/bottom-nav.templ": "c545866fba5756c0004172a6711f3537991491ecc7364fb134ae7c04cda29983",
+    "blocks/bulk-bar.templ": "85bb359e28f9bd85fa84b73dbcccb3e75541db51003aa4f6d6451260c8f445fb",
+    "blocks/cart-drawer.templ": "62b867aec71afb26f037672832c7631f472484d84e2306780cd1f5222f4d8cc9",
+    "blocks/cart-list.templ": "e05edf42803abd37dbe0867afdbb8e73c1094add7f56af6c44b30bf50e167c8c",
+    "blocks/cart-summary-card.templ": "5543241f35363afae2d8821f7de5cc5d66b4a512a82139d90ba7288156a7f0c1",
+    "blocks/cart-table.templ": "d40ce1f1424dad6de95ad8d36808bf09a06d58c873a6956d33c8bb712e9db2eb",
+    "blocks/category-nav.templ": "9533cb3c3aa2815127d7b755083706919427fb7ee37edd439b217f4c7c98d45c",
+    "blocks/chart-panel.templ": "81f168ca1d92feca1ac745d12bf83d907dd9479ffb8c5ec348453aa7d0edc41a",
+    "blocks/checklist.templ": "d32ccc0245c29dfa1d06ed83d6d5a247eabd0a306e5f7c6a506007425e1907b7",
+    "blocks/checkout-form.templ": "947df37c1f9c4132ffe94dae72740a6e883022f120d6872ab8d721b07d5b0d02",
+    "blocks/checkout-step.templ": "9e5dfc5cdbde543b9b83b40dfda831a04936e59e26a1a11e6138c1cef4f9b30e",
+    "blocks/checkout-submit.templ": "497a0b8395a92019ae2e2f0a5c265c8878e7e894a0d7ce5bbde1cce176160727",
+    "blocks/code-window.templ": "cc513e41d2d6ade9ad60d32e8e909f51e246d4254420bcd8844b8eed75d8ee3d",
+    "blocks/compare-mark.templ": "f1d35eba352bba847b6099fa81aa00fd362bb0e6b9ee4ceca405abd17074fbfa",
+    "blocks/comparison-table.templ": "0efc40545360974bf43dec5027a2824c6840790b6869fd9a14e3d013b7c81478",
+    "blocks/contact-form.templ": "1ed5850cdb915afd688b0bfb47cd0129278f7108af54a82562db84abacad76f6",
+    "blocks/cookie-banner.templ": "7a3616915c385f061bfd3ce20c3c3c021973a006757e6b69155696b6c76c34f3",
+    "blocks/credit-packs.templ": "cddcd456373675a2b6c9ff658caa84210092fe88b4363e86ab736a2caa217ce3",
+    "blocks/cta-actions.templ": "a7e8456fdfad5e6181c89595a582aa6a5b09fd5225d129f90e9a3428eb2d9633",
+    "blocks/cta-band.templ": "dcbc2890d14d90ab0113166144ff01635a7df02e04048ed41fab8f114d2e2263",
+    "blocks/cta-banner.templ": "80e76f537faa22f8ecfd5cf48781cbe2186ac081140bcee1a3536f21e9c1e23a",
+    "blocks/cta-proof-items.templ": "09c92466f493de0b148c8d0d7a7626bfdfeae526adaf6f0dd4b86449d829d1bf",
+    "blocks/cta-proof.templ": "a2f4997883052d5d06b931cbae139b2d56b3ba41d6fa9b3686fd3a12226193f6",
+    "blocks/dashboard-overview.templ": "257a42558ac40858ecd02470ff273b35dc79cbbae0692c82406f7f701a43b790",
+    "blocks/dashboard-shell.templ": "e4911533562a61c4e1311ca5c95205502453a287bb8ab2c813b909ba3c4e1933",
+    "blocks/delivery-info.templ": "0affedfd202239af3a8dc616bd9f0c895765a95a167b34444a1043183a3f36de",
+    "blocks/drawer-lines.templ": "ea7534b621455dcd13300da12fa4a0bc9ceb0c110dbb1472b84ebd1294a79903",
+    "blocks/dropdown-item.templ": "50a86b3b35c1a1938d96ddc34fe002054eea4025afc271dd8911b02e0a7e4e81",
+    "blocks/editor-tab.templ": "a294416ee2f1f7d425642d11e7d2bbec6504ee901127ea834a1ade0db6dd17e7",
+    "blocks/embed.go": "5a1f55f5a5584197625ee6f3bb57c4907d2d838a6ef3d27c39ede4edc5cfc0b6",
+    "blocks/empty-panel.templ": "66a57cfaa238b985b4c5c1e0f06558302cdd8c6c57044ccd2969fc46e28cdfb1",
+    "blocks/empty-state.templ": "be6dba4a38d0cd13effbe7a5ee3c9d908ec043f9e8848f55cc2aafd498c0b967",
+    "blocks/error-page.templ": "a11546521a2971268840ce437cc61e8ab7e656064cc2b669e8c5c25dd47de821",
+    "blocks/faq-cards.templ": "08d7cbfe0495ac7f9cc7f106256c75d9cb2b32751a87ee106cae4b1e0a65142e",
+    "blocks/faq-disclosures.templ": "c1da93c3c7700b2913fdc3f93dcec6e26d91a45148b6ec58cadf49222a0480df",
+    "blocks/faq-finder.templ": "f8342d3dab03d757542e0e5ce1429d281a5dc48859c391330e3510778761ec66",
+    "blocks/faq-help.templ": "681675a21ab6291965c4fc29d41c867749602e30d916875e77cb778b399b9abf",
+    "blocks/faq-list.templ": "41b166ee46ab161bd645047d10019b6b9a79c0b0660bccae2d8977e48621a5d9",
+    "blocks/faq-split.templ": "368b5c2cebd63dc0edea8a8908efc5fc0d6a1ef1f3159f7f5818a09a78a0dc03",
+    "blocks/feature-accordion.templ": "5971920f14a99b323ad95a270a0ce76c8720614bd9c989ca2f7ec4daba8325ac",
+    "blocks/feature-cards.templ": "7afd49573f7a3034e2844fdb09b6aa43712fd16f2bdec83d7f5d881790fd08fa",
+    "blocks/feature-grid.templ": "f5f981abbf1846bb7240ba2c5145928686f494d13fcd89b39ee704a9d95f44e4",
+    "blocks/feature-metric-cards.templ": "2ef79a700d48eb91e2b36a8fcd521d92262fcaaf74e47797fb058fc6fb4863d7",
+    "blocks/feature-pairs.templ": "f0ff8b1ae2e3b151b9d8f525f1c75759dd67da62ecd1c3917ddde00c70ca9647",
+    "blocks/feature-rows.templ": "e8c479f2fde481268cef1355ab8e1f9c5eef8ff18e1f25b26d03728876dedfc7",
+    "blocks/feature-showcase.templ": "5580f0dfdaf18ece0cd65a11e876a637faaec21c7b8fa95c7a70f1fd4f96440f",
+    "blocks/feature-split.templ": "795bc32cf267c20f382efd06807195b5922a595542426245011c87f8472eac22",
+    "blocks/feature-stat-rows.templ": "867d2dcc164b2b3a4bc7a43aafbb97bcbd761fab4fd6d602831e133d36ebaa4b",
+    "blocks/feature-sticky.templ": "1641cf959d9a60569c5978d363428b80d2daed7339452d924f118d58e5c0ad98",
+    "blocks/feature-tabs.templ": "b724b070347213da95b2a5cc35ccc6898c692832c4d83bca102f510203102eb3",
+    "blocks/field.templ": "994c78cf4700493c94cf7e3b599404eb8fb35877236dbeac7add3953e7b6309d",
+    "blocks/figure-block.templ": "98b32610456854e0a97de11e66415c26aeac9793b956b3f7cec89e4d003f481a",
+    "blocks/file-tree-item.templ": "370d158e84c3a19676caf8c2c0fac5f36d79c8b176059de2567e58e80db6c1f4",
+    "blocks/file-tree.templ": "52f43f939bd83b1707d59321b49f0bd81b4a5acadac229f6cd45a03a7d4c9826",
+    "blocks/footer-brand.templ": "b84d8b22fdfb852daf2d1caa0aad266fb0db858e494a3e2a59c503c820afbebe",
+    "blocks/footer-card.templ": "bdedb052e848725b9b98c01e84d3475d71b5dba1818c55f3fcba41e126442540",
+    "blocks/footer-channels.templ": "a3f0c47de9e99529745f30cf0d4d9d2b00bd6e8f3698523cad4a7ab8dab274ff",
+    "blocks/footer-columns.templ": "dc754cca3c7186d0888ff2313b7f5ccafda936fc9d770f00f0beefad34078567",
+    "blocks/footer-contacts.templ": "407d34734f30ed7cbb8def1c322dd12b8c737e026c01b7789a854be59481b143",
+    "blocks/footer-figures.templ": "97bf55295cfa21aa0ff1064fe02daa4996c86c32d78820912d580723e352f4b4",
+    "blocks/footer-group-cards.templ": "2eb9ad5d9ad7cd735f6c38dfeafedbd6a888f5335781d3d5c0a6d7a4c832097b",
+    "blocks/footer-link-columns.templ": "943be102f05b8f7b0622eae1caba8a20b92602c2200cc7bab8201dbae77f0e2e",
+    "blocks/footer-points.templ": "d1e4c08aae5c9167588550869cd629c9e6a15e9267d0575700f5e3a9a1de3ef7",
+    "blocks/footer-signup-card.templ": "59f42f14ab63c5e931a66cf4f3543cfcce73cf7b08498d70f2184eedf4d2ab65",
+    "blocks/footer-sitemap.templ": "3b739d14cb92e78525c7ded0d6716b7a1e686347a55a0aeed75dc8f20fb4f585",
+    "blocks/footer-split.templ": "89850d046ed5c9e1b9f01f5f652c98a01ce86f9d0a77d231fddee107f3c89fe0",
+    "blocks/hero-badge.templ": "914bf99f22a93e172015489fbea64346b858d9d60a765c8f0d3f36d844d3fd6b",
+    "blocks/hero-classic.templ": "417ff92ce3d5700c145e1fc1391db25dbfd2f48de944720f8067778497c17a33",
+    "blocks/hero-head.templ": "f98629992a9df9e5d7581e4fecda0dbb047d6edde633f9a0746e6b998c8b89ff",
+    "blocks/hero-prompt.templ": "59f97a503c268f075788e599103363abf556fa704510edfcc798d95ed31afe3c",
+    "blocks/hero-split-extras.templ": "e2887077ae8ba864b4417647ad2b9b376a08f2289494698175cf0e1907cd7f87",
+    "blocks/hero-split-media.templ": "6d21b58167264dc18c26ea0b87a581801e35ff3159e07704f152d1c0b39a3d35",
+    "blocks/hero-split.templ": "5016834bcea13a42ec0d4431eca929a4a1efa9a10fd6495e0c21f6a6b6c3dcfc",
+    "blocks/icon-tab.templ": "a61197b225065b0112d240be448a786b17533af563a90790144a73c556e05a81",
+    "blocks/icon-tabs.templ": "3b4a7e70db6cf339a992f60265932397134af2b3fb76a8ffb900bfc28f62c8a3",
+    "blocks/icon-wall.templ": "6c5433308f1379f10b19cb832cd37d8fa3aa4db77b7264d5b1a54dad8c153750",
+    "blocks/job-board.templ": "7f63353979128380944cc6d5bfd4b6dade5e423c07383cd9281980d5a158fbd5",
+    "blocks/job-cards.templ": "0ada6a932bad410ba037a34b57d6a421d8099f032fe72f025ade84bdec7f0355",
+    "blocks/kanban-board.templ": "e608776b7eff576423f6d3b8f39170f6f76c36ed6bf9be2b4be7522d30731591",
+    "blocks/logo-cloud.templ": "a821a468c676e20579c8db13b05287bfa4988cbe6b620a4d3de5735f3cf0c5c9",
+    "blocks/logo-ribbon.templ": "1f73f448ca9d5eb440772de889af4a90474e29ac2c9844efb549fd34e4f27d2f",
+    "blocks/logo-sidebar.templ": "5871eeed9243c79a851fd978cb153b1bdbb73c378d78d252b22617bfc194278c",
+    "blocks/logo-slot.templ": "f6f075b76b8854b62e64a6e9c6cece3790b9a35a53a4dbca0f1855dee2de9471",
+    "blocks/media-contacts.templ": "290a7054ae3264cd460461f4d0e192ffe16c678cbb8b227d09f2793b12e98429",
+    "blocks/media-figures.templ": "53be2e61a3a7d8c52705fa2e2fd5a670a75a601694b46ee666c01e2751c19ca6",
+    "blocks/media-frame.templ": "dc615e0043590a3669e888a272628da036227dc5f55cf6bd83783ef22e65a698",
+    "blocks/media-list.templ": "9c9fbd791851a50f40945b43e04a48fd6e600730c1c71003a77f61dd6e6c1c4c",
+    "blocks/media-posts.templ": "faa66a8369f63691b5681e5f7ef8d138577d667d47b894b99da35476757bf1fa",
+    "blocks/media-review.templ": "d18c9904441412f9bf7cd789c581a34092d17de4e5b9ff8573a4e21fbb357a7d",
+    "blocks/media-steps.templ": "6265da93362f2e61d737c07d84e8b1d7cab42a82d9ab165e45d8512fb5c22860",
+    "blocks/media-topics.templ": "162beee180ba9d87abee69c4426f4429ec447991916e699d5e1d3fc5ee571752",
+    "blocks/mega-menu.templ": "97694600f24b07ed7ff4e15677f36bbeed1b825cd5aa9c730bd20a27b4498bf3",
+    "blocks/member-row.templ": "762dea9ea243fa92497a7731dd999803e96ba4a06129fefa2484ae612a4b4e71",
+    "blocks/menu-entry.templ": "78abbdbb131e6aa6df1f75072600d9264d31de27bb2bd1a2a2cdb4a926d21012",
+    "blocks/meter-row.templ": "60d65a05adaa0e17815ab9c09e844201e6f2fdf7c0772d8022add1ceddb6af0e",
+    "blocks/metric-row.templ": "ca7b92970f372fd622fb273c72af6035d53ce40affce910148595e5e1181115e",
+    "blocks/milestone-timeline.templ": "3b7d405bd93195dd3bc1c0ba04b773eba66c1fd1d99e0eeee4e6dc0965d6c449",
+    "blocks/nav-actions.templ": "f48e672cdf64dadbde4f9cbab2b26ca26b8f54e8e4da2ead0027d4bfb95bbd7e",
+    "blocks/nav-bar-menu.templ": "9630277c84264fb86c01b4a5df2d9b19e26216d877ed03b3035400652930eeae",
+    "blocks/nav-bar.templ": "a547aa32a8443aae62b9cb587a24cb1fe4a995369aa69492ee46ead7dcd3f113",
+    "blocks/nav-block.templ": "6ce885680ddd512dc93c00d476691fb0819c217b0a8cbdcd21fd8b7400c4255b",
+    "blocks/nav-item-row.templ": "7a264296253cc4f7c238ddff4fbbf08444feb3bfd346c46cb9b2d63ee3b29410",
+    "blocks/nav-item.templ": "7bf90f69040b8b232e8f8252204c17d38e8dfda138b856c812e20b1434183484",
+    "blocks/nav-links.templ": "e808f18234c3dd1853591eab9b35eb1216b8f5382b0571965277de87c6f5d847",
+    "blocks/newsletter-form.templ": "11244a8db6562eaf4fede2b2cde679a8f609179de5813ab07f313710c70a4ba6",
+    "blocks/notice.templ": "df5a2a73db3ce6d0738c6fd0ead1a8ce0c5c46a22f008aa4bbb6d307da85f009",
+    "blocks/number-field.templ": "ce38746cfbad23c30c49f2ba6c7fb6f76dfcc87fe742f4a789c36cbd29e2023d",
+    "blocks/offer-media.templ": "a207cdb6c706aeab156322f012ad3c27226e4a4dac80b11fa444ef0c22cc4b1f",
+    "blocks/order-rows.templ": "e4445c2c8208dc0a19f7b0ccfb9953e0d4a60ce6eb11808555775f423679077a",
+    "blocks/order-summary.templ": "b7a9616752b631fca7c0d694c7ac027cbfd449c7981401e4ed8fd559ea21e130",
+    "blocks/order-table.templ": "5fa4c0dbff351b8f40878b695a673c1b374ad63714f8379e84530211b7408b1f",
+    "blocks/over-media.templ": "56dc00fdf20f18271b7774f4fc53d8caa991d0a4b1ce9139bccd07da861c40f9",
+    "blocks/page-aside.templ": "629d80a5eab51a96eaf6774247cf0436d167aac2ea3dd4ee176ccca746a1874e",
+    "blocks/page-crumbs.templ": "8e7eb863ee100a7d58aa4ad16b56ed512ef6b88608d46401490259a8a50c4149",
+    "blocks/page-header.templ": "e921d2445d308dd08b00fcfc1d1b45c01903ab65f64cd9650f3e24dca57b0525",
+    "blocks/page-intro.templ": "40597a9a60d5cda4e8af1c6634a2aedb6bf3e3edd8a96a7e79c8f760a3825b12",
+    "blocks/page-trail.templ": "d3d69bc94779bc8daca3938ae155ee2ba937f68345eb2fa2101d6612a8406adb",
+    "blocks/pager.templ": "b2bee7874552d359ffed069d1bb29f086c7b21b924db2e5f6da655313ca0bae6",
+    "blocks/panel.templ": "1b0626632717a74fc34ac74d56ed42ec08ab8a20f9f0cb64c2e4fbe478f22620",
+    "blocks/payment-options.templ": "fd04bff26f146641c8a282c870ae47b7e431cfbc379c1fd72a8606de3a20e3d1",
+    "blocks/photo-gallery.templ": "a74c7db64f4a673a015b9d6b6eb9cb45a076e27c92ddb3e5afb075498da82750",
+    "blocks/pill.templ": "9375a609ccbd201901e1a8037326cf40fad27d086402819d9a5ac95cbf93e734",
+    "blocks/post-actions.templ": "3cbf6428837445b2f5bc62459f0c6fd34f6200f087ec89648c8cd4a8a2778db5",
+    "blocks/post-author.templ": "44f65a890a5b92b56982e67da82d1e48e9883774811fb74fd6fc7bdfbdbe933b",
+    "blocks/post-card.templ": "ed3f01e47230257af0282048dd6a952a4dc42ab02f77594aa7c0d9d5f7dd6971",
+    "blocks/post-feature.templ": "7e3e27ab3965c59ddefb1fef6be4274359a2f8162e7dc93fe8edbc5ba0b64c10",
+    "blocks/post-grid.templ": "45c68d1e865e59109729d00962e0af6f182e5e0fe3b8295c1f1b1c04a3b8b55c",
+    "blocks/post-header.templ": "1797121b5aefb3ac12b80ddaec8c267ce3a78da3f51c94336fd893c152170981",
+    "blocks/post-mini-card.templ": "5561d7ddada782c169101b83071d94647e4eb6070548b2f11ee2f81efa97a3b0",
+    "blocks/post-outline.templ": "69f589d92c2f1411869c925af1a141603cef44d3d14f9d84fbcc12d9d6d425fd",
+    "blocks/post-overlay-card.templ": "8663b238721ebd3e1685748442ae6a109a7bb35642848866f03dc9ab2485de3f",
+    "blocks/post-showcase.templ": "5399b35286ec3f3de8ca6f997429c5106c6f6111af11ae936c5d540ff2c0a213",
+    "blocks/post-split.templ": "0bd5c8681dfb2fbda64381945875a72f1b16c0cf6131a2ba7af2aea5e9d91392",
+    "blocks/post-stats.templ": "bcac7dede93422499af9497a6060f5c74a7fc6628f07d6291f0626f40fff5166",
+    "blocks/post-tags.templ": "4d384692d1b802df95b2f8ca9b1bb4a97d90b0b16d46087cd8f0e2cf252fc7a7",
+    "blocks/presets/defaults.json": "b95b6b8c5025af8dfbe44aef409b13c0dadf5bf41d854abb21a112e595b29ae3",
+    "blocks/pricing-card.templ": "c0d4f7b80d9fffdc9edfa6eb223c9a4dde862e71adfbc103951fbab64bdfaa37",
+    "blocks/pricing-tiers.templ": "eec4f0b7b84a683c6d19de6cabcb7582ea1c20fe177e873887fc10e36051b249",
+    "blocks/product-card.templ": "6a62ebe7414c2b35d523ef291b323e899f8bd0a64ae258e48784deae8f1c4578",
+    "blocks/product-detail.templ": "fc732e42bb8bc74d6425e87fbfa0e295f4cf1e84bcf2c1d6cfd630cf06b54a5f",
+    "blocks/product-gallery.templ": "1a1914e6148329173a43a065c948a556e9e822e68fb367fc211054dff16c7eaa",
+    "blocks/product-grid.templ": "ffa4bf232aab89dbe2239db1af17dba88489fd07a10324bc25807f9fd9235a8c",
+    "blocks/product-info.templ": "301489186f9c7bf424c4426d4c5becf2b62e7c00e816a68a47986584432d20de",
+    "blocks/product-price.templ": "295822e2129711d8465d635ff8a0d64c2c5dd1aa995f73c9d206b2697b5cc2f1",
+    "blocks/profile-form.templ": "b596d5bdba68fab915ff8a7dbb7f174bf686959b71a44bbfb37f5de593280ca5",
+    "blocks/project-grid.templ": "64256b05f99613313bc52d85e853ef9916fa0ec8eb71891bf45137324149a5bb",
+    "blocks/project-tiles.templ": "1b87b11f5842db35c4e6adfaf3682ce6fa9e0bded853b336ab2817e022405fdf",
+    "blocks/prompt-composer.templ": "a7a60150b4f80e763ccd45b966fff6730bfb47e48ed22a0ba665f8c00b5fb80a",
+    "blocks/proof-band.templ": "2b78f673c61b242a09faf486a3a3e4d89ce2db081c7c0c8b9f00fdac6cc70309",
+    "blocks/quote-card.templ": "e721187fbe78da8760c9030ed05fbe1e514c9c64188559a8123e075c0907f01f",
+    "blocks/quote-figures.templ": "9a5e3e51e403d32d53e7dd7f12148fae372e25fed0a43ece0e0b40e89b928208",
+    "blocks/quote-logo-tiles.templ": "ac482016c72610bb848fadae295c80787ed8b9a5e93e0742ad9e20a75b7b38ce",
+    "blocks/quote-proof.templ": "e9a31563597ff4162da28993bf6ae1887da62d78ae5b46f9ef5203ef418267e6",
+    "blocks/quote-rating-panel.templ": "d642dc859bcc85cb3b255abcc647e7515f62152878346d2962b4f7b8d943db79",
+    "blocks/quote-slot.templ": "6534d4a07e591e746b577779f6d291bfa1f5e55b4939ff6b767a113257e61a8a",
+    "blocks/quote-split.templ": "d0a7ef604e04a58bfc55f86922043d55791bb3b2259b3364904e8d613d4a3e28",
+    "blocks/range-field.templ": "79c02a08c30ae3482cbd3e00684cb92808477e28915d3a41f927a30237f8c2e2",
+    "blocks/rating.templ": "4ca2e9439e10341044cd0d0e25198826e4e8a916ba03b4b3be25af6c6962d792",
+    "blocks/recipes/avatar.variants.json": "46ea20a1e9e713020f165ad7cac44a8c3ece47acaf2754530ad23f23a6e0b172",
+    "blocks/recipes/badge-square.variants.json": "5e8e73320e350988fab7de311cd65d662a8ddcf63e97ce88872e66ee813587c1",
+    "blocks/recipes/file-tree-item.variants.json": "debc1471dbb13602b05a323fedda8503ec955c815f3d22d57804dba279d72d91",
+    "blocks/recipes/icon-tab.variants.json": "2e50f9390011c0e6ee576c63c5ed2e8ac6673610928282fb250a12fb5c7ad6e0",
+    "blocks/recipes/logo-sidebar.variants.json": "79db82787954766904c176eb1af84184e74a5ac7816ed924711fb556714fd76c",
+    "blocks/recipes/media-frame.variants.json": "acffd976f9f24993ca00e9806900c0328b77bdb3211fe9368bd93022bc62f89b",
+    "blocks/recipes/nav-item-content.variants.json": "243a020eb53ab7878c02f896f0283d7e04d197e2a7f419a6b32d11269b0528e4",
+    "blocks/recipes/nav-item.variants.json": "5617402602686362fc2dab73bad603fa51fa1d5971b6833a3d32e018bbc66297",
+    "blocks/recipes/section-column.variants.json": "f06d6cedaf76d8cea8a4fcbf62d62dfd51250570184c3b355b83d2e49cf84396",
+    "blocks/recipes/section-frame.variants.json": "ef2d97d45afd1107c441702b657e77c0c1661c1ba76b0215eecc9169529d4a05",
+    "blocks/recipes/section-head.variants.json": "f2624d5c33466e23046036a99c05831ea84011647632d3a901ca19914778d84e",
+    "blocks/recipes/sidebar-panel.variants.json": "319a47e1524ffbb564189f483b546ff7c22c143b133a4e406bd73a5f61b05321",
+    "blocks/recipes/switcher-item.variants.json": "0c2e75f5db33ecb6774d83709ac938adc20946f45748a3e7e9d1009ea0169bca",
+    "blocks/recipes/switcher.variants.json": "6e59af0edcfdf3d5754b7c7991ac9c6e84713db161dd21022bd308859cbb708a",
+    "blocks/region.templ": "0628d3ba58dd51d3b520d0ecefc9a9a40a9c4c180166643d61d89a110296daa4",
+    "blocks/review-list.templ": "df8d7ebd6d9468be80664ae856a3c7fe9195eb09ff31bb2c2ca9ae4de47df116",
+    "blocks/search-field.templ": "21577cd2ee9ca2fcf7b775b5b0f7fc9481d628d38cd0a444cac964622e3b2f1e",
+    "blocks/search-palette.templ": "034cb4f1acddc83f35068b55203a9ea89a954ed9ec7077fbff49b50a6e1874de",
+    "blocks/section-box.templ": "d9d47418f8b3affb0fecd554e87e7e1ee41f07a7cca753937f65ab30773717a3",
+    "blocks/section-column.templ": "c41a0d60df010bae1367ba3badb8d74f9f75cbecc40d23e516f59e2c3d8923dd",
+    "blocks/section-frame.templ": "c1869304cdb7317550d585cce675a4d84ee059b066abeba2dbe5a06e4a97dbb1",
+    "blocks/section-head.templ": "02a00148020a1cef607fa2df590a5ec9d4cb0ce0edfeb71c0af4933b93f81343",
+    "blocks/section-header.templ": "cf56d4bd0b970fd9660a188b19a740c0eb7ec7c65aabf170a4d9989afda17bd6",
+    "blocks/shell-content.templ": "56c5db6377e70cd4e0d1449bd594cde9674c68a6cdb3e7c465a9706d34af7e3a",
+    "blocks/shell-footer.templ": "95dbad3edcd22e97ea3e1519f5fcca766bfc59d3bab6f335ebfaca61360fb59c",
+    "blocks/shell-sidebar.templ": "c8e27f0676781a061edf30715844f1640b013bc6ac922ca8ddf7ef76e3fd80a1",
+    "blocks/shell-topbar.templ": "e699f86f94ca02b6498706643e30369f857a20143cfa7cc1865b3637e8b2160e",
+    "blocks/shopping-cart.templ": "5c8ad33a54392c8e70cb9fa1d54e66e88d6ef0096b80bc87862a3bd371a46b86",
+    "blocks/sidebar-nav.templ": "1126c561f3cf373a992dc8010c3bf1e1b88a4eee0756b75f03df92a49299d1aa",
+    "blocks/sidebar-panel.templ": "c45073841df57fb61fb454482ae80ad61619aee9e84bf33f98012f842ba2511f",
+    "blocks/signup-wizard.templ": "c44ee0996c1809bab626947b37e1d9ff0e81b3d657b68ec3113b152a640f3a75",
+    "blocks/site-footer.templ": "54c3fda416c504d406f139aa836fc269c1e9ea329c0ad59a1305bc8aa30239f1",
+    "blocks/site-header.templ": "f6983e638a6a419d5c097a5c9310c0484d09b8bbe8c67d17e7d7b71e9aac2806",
+    "blocks/sitemap-footer.templ": "b101e3aa7a8e0174ed5b331c3ad39b1e2b8e7566ab328a4c357d6f53bb9979f0",
+    "blocks/skeleton-layout.templ": "21ca321f17ee5c2b2c30d466d3daf8d4ba4cc35ea88445fd14181262bddc733c",
+    "blocks/slot-board.templ": "5ae5afbfe580c172707a367ec69886c10bd55596613f2001e5e58d97e52ad129",
+    "blocks/slot-grid.templ": "ed29e0556ec296f831ba64bdaae2f2a0cbdab5d4926dd134682e364bf7485046",
+    "blocks/stat-figure.templ": "2a6b4e547d0b2f5e25faa78769d36e90c4fa10b9209c2e9f6acf371733b8083b",
+    "blocks/stat-tile.templ": "85ca8e8a0e65692f0c72713851da9d9b7e76b999a8e025e10f4e4e2d964d62b1",
+    "blocks/stats-band.templ": "b05472833f2c41d48be2b46befe6ad35aa497a621cec57810773dc2faec83312",
+    "blocks/stepper.templ": "605f8be81d19fc62b7c75d91a107973abb60a1a7b521e3eda97bc902c94e5d10",
+    "blocks/steps-list.templ": "3c5b1f65531d7e79614ff023f6bfc9993247211a8fe87c49a45f780587d5547b",
+    "blocks/store-hero.templ": "8bf9ee8a6ad13629033f8378160225ccc418a5edf4c860371848fa66479253e8",
+    "blocks/store-locations.templ": "c2fb7ad5270a48bef308b1808358b2f99ba3ef68063c9b592aa4a99780960c8c",
+    "blocks/story-dots.templ": "50ce5ab0d82865a7b119bd38a64c145bd746401333d202a39fe23d13aa7f5790",
+    "blocks/story-panel.templ": "5e67aef15eccde70136771a7ff44b06a27c293b9e16bbe9f15477da7b64215a6",
+    "blocks/story-tabs.templ": "75d1bf3fcd3d83ef55cb68c6280bd952282f198a1c2efdffbb3545aae794c4aa",
+    "blocks/support-channels.templ": "0157ef454859a9ca5e6f0a7e1f6e622f4add8e9b38c237222def6aa91d921311",
+    "blocks/switcher-item.templ": "57cf08b9e60045c372862e6c1cad0a1b52bb5606f3e5f97a6348cf2011c0acf6",
+    "blocks/switcher.templ": "04b189f747970bff48fae7639057c9465dd1770d30078be64668a7d74d1ccf94",
+    "blocks/table-toolbar.templ": "112f8b58e59984e93d1faf16312223a63f2a82b94f74085adc8ad2996723b484",
+    "blocks/team-grid.templ": "ac3900bff78887033604e0bbaed654166c1384f98f7bcd4c9a3e24efa595f5c0",
+    "blocks/template-grid.templ": "8a2104f6817c40edfa88730e08bff03129bd276604037abce786326e518b5467",
+    "blocks/testimonial-grid.templ": "4dddccc133fbb5febc368aca647006a432b5a76b3238261f2c5d61a06097e561",
+    "blocks/timeline.templ": "ee2462957cd2ec45f2b573a5e4dcdce0d9490182187dc94ded8e3b9a05526381",
+    "blocks/topic-chips.templ": "22fae296e57cc42cdc553dc12b3732338db01498dabbf6385b44dd78ea30e017",
+    "blocks/tour-callout.templ": "b11816b0ce8a3fe90ea6338b82b7966c4e0052931ae94eb3639519c904336c67",
+    "blocks/usage-calculator.templ": "2065d8bc62311a7e35d78d86f95437134ccb444037e11cc5f9cf32b7dfb9b69f",
+    "blocks/usp-strip.templ": "a66712ffa577bacca25c6fa8cbe0872cfe9e4a2bf54d0ed2366814d36ab6ffda",
+    "blocks/video-grid.templ": "5f2f1777cb31d5f52d75e677aaf483f2b9611da7d89c6ab3c47a5f1f803a70b0",
+    "blocks/video-modal.templ": "9ea17d4cf57e5c1514b268dace5ccd6613515a1ef7205674065139bbad53f34a",
+    "blocks/weighted-title.templ": "584ba2843d443cb4ec2f2ade3b025af84804a31c4d9a839cdca909a4050e2404",
+    "blocks/zone-rows.templ": "48f2c0af8c3236f4efc4a1f98b9afa6f7e5ccffce6f7e24f244c9324f24d6cf9",
+    "blocks/zone-table.templ": "7a186bbfc3c24b0d208f23e2d3b9bcc914cf3738b138d1f6479eae005c40221d",
+    "cmd/parity-blocks/main.go": "0d86acdcff7349e4f87b422f501b666ef5ab1cc7533effb078c59c423ee076d3",
+    "cmd/parity/main.go": "b81f229ee45c94756f612c033add597a96e5395ebbe65855f5c80dda13e391fb",
+    "go.mod": "39a9051015d5afdb0322fbba90deb31b61d997f7f4ebbf7f214b1c484b5dbc0d",
+    "package.json": "7299e35a9ad58f3dd87b234af668c64978edebc5d1ff2719e25826c34d989c8f",
+    "README.md": "0b59cef979d16135aee7da7e7e1e1d3ea46d80cd4ec8b8d5029b247a66581219",
+    "ui/alert/alert_gen.go": "b2a5d4583c9f98fa81edb18d3d1f0eba438fd6ba5b4ea7f05f518ff12f324874",
+    "ui/alert/alert.templ": "ca633540c257250e7b6b1b3fc7a4fea58b62d3cec797119e3a777c316a8538b9",
+    "ui/alert/alert.variants.json": "cefdda02dd06430011d612938ba847d6303e9996fdcab107817e0d8009ad426d",
+    "ui/badge/badge_gen.go": "20c89a56ea1459886d2c6e77a82848e20df9a66709918980b5265e2fd025c1e6",
+    "ui/badge/badge.templ": "be069516869100472c995a1ae31c631ee796b13d57ca493dff53d986ff3222f2",
+    "ui/badge/badge.variants.json": "8db00aefbdebfb21d2688390aefbb1c20a6c6e76a1312b9af0715b87d8376c43",
+    "ui/block/block_gen.go": "e8cb4d323d66387f264b5fb78723d70536f3770fd5bf9447fd824ee115a71583",
+    "ui/block/block.templ": "2072cf1c52202ce1f4505f8a37c46b930f718d458cfb417b2ce3a4b062104192",
+    "ui/block/block.variants.json": "f235a778278b81299c3275421643eeb796884e6e5f2af3ae52bd51eac2f81932",
+    "ui/box/box_gen.go": "6ea394e653e3932c4b4ad9c26c790a8b66fb6600b53205f4bcf3b1509669aa32",
+    "ui/box/box.templ": "5c008a7b4e74002b02aebb16bd17707a7eb8fc261e64e4e45ac3ff30f066f930",
+    "ui/box/box.variants.json": "0154ef69d6a3ad01aa95455dcf87bbd70c3f5e67a0f6a2b36379a1a7ced1601d",
+    "ui/breadcrumb/breadcrumb.templ": "08929468606ae8d5c02ffb0684618b48a74ea7cb2bf6a8e61e2e79ecb58c0f25",
+    "ui/button-plain/button-plain_gen.go": "b258f2aa455c10dec51ff7eaa8b090f38e39418ad1cc5b28305d1e89b82e3fa5",
+    "ui/button-plain/button-plain.templ": "020c6de7277c67fcb5256e5ab5d2b3b78bb18982d66de0f4b0d294b577cdf365",
+    "ui/button-plain/button-plain.variants.json": "c4caf3f4e128276ed64e53559e8aaabb18effd2e4322a34f95df644cb467966b",
+    "ui/button/button_gen.go": "bbedea6163a85dcd552ba5c728f4cddfb5732e979ba15ced35457afdde822940",
+    "ui/button/button.templ": "5b0fc3550505d32815629bd25052e68ad8ca44abcb06963284cad46fe8f4431b",
+    "ui/button/button.variants.json": "2ba04bf702fb940c64e69576c49d974e8b746ee6d23561065e77ff45bc41de31",
+    "ui/card/card_gen.go": "28079d9eef09236402f3fd8ff8740dcabfe152c46b0815eb41f36d0ec587ba5f",
+    "ui/card/card.templ": "80ba578daa346155c7bd4a7939849fcde6a1079311ffad97c04836b84a4a0884",
+    "ui/card/card.variants.json": "39bc2c0110b12ceb6ca91ff2d0ba71637a3af956f584025bbee250b454e717a2",
+    "ui/checkbox/checkbox_gen.go": "e2cdd2f4a9fe068cba63c8eb7b466b514edda2ee201b4c481ba27daebde4a573",
+    "ui/checkbox/checkbox.templ": "30c2eb7984cb9f0add5c4407fcbe88f4e29ad3771dc3b921ef3392ae2f9d0779",
+    "ui/checkbox/checkbox.variants.json": "1f1ef3389fa04636f53885b610f025e3809f039ce5672eb2eda60e0b4a326556",
+    "ui/container/container_gen.go": "da2a91d83df67f3837f643093f2c0e48558470e5d5e93010b8846182656af227",
+    "ui/container/container.templ": "e8f5fcc895ceba8e0e9781748fa2e3c13bef2a1c166a6eb6f904678e4f8b1991",
+    "ui/container/container.variants.json": "dca2ec275adcd27206521396de76f425a8a98a6642ae8a12ffa923eca31d86af",
+    "ui/dialog/dialog_gen.go": "dd1f72cccdd131cb7f8d7614395e95c4e8fef546b3f925e0d30c8a1045868380",
+    "ui/dialog/dialog.templ": "de903811712a3a4e518d4b42fc15d7e9a8c862d64b81af8055624217aa3df732",
+    "ui/dialog/dialog.variants.json": "e3790244e2ba83b1bec43848274cb935c3dd8bcd04ddbe9deba4f51171e49e06",
+    "ui/disclosure/disclosure_gen.go": "b5fca0b93c2aadc262f0573dafde0edff3ef18e8e8bc44759ec250c56586ba8c",
+    "ui/disclosure/disclosure.templ": "47d61bf8dcd20ae151be73a98e926a2b17b974835368bb4150188f595ffd57c0",
+    "ui/disclosure/disclosure.variants.json": "20163642d62b6953552a02416b434cdfbf277c3254d8934959723789d4b6ec10",
+    "ui/disclosure/summary.variants.json": "274973e927d3536baffe8302d7de780e7e78d890cc10823cd111ccc1c9633325",
+    "ui/form/controls_gen.go": "545d2b7dcfb36c418fa1d7c2a5691adf5958d36636b47edc931f6d8687fd7484",
+    "ui/form/controls.templ": "c2a8d019b3d3a0ac012ccb53d2b1d50b01d1d5d7abf82fa4f80ca241c05c0519",
+    "ui/form/fieldset.variants.json": "9f3c3ba117228f83577f10d329384a7706ea068fd7d8a98d4ebb556a018e3158",
+    "ui/form/form_gen.go": "1a7aaff4be7283935c2e4a6368da7a41348d9caa7a287e2c0c6871bd3f46b198",
+    "ui/form/form-description.variants.json": "fd398ea382acaf37f8dd82a7c67219877d355e85b9f9a954222659adcbdbc85b",
+    "ui/form/form-item.variants.json": "27c49ce5f42af19b06c9d6f9f3b8683058af44e35c0df5082fa897008b771559",
+    "ui/form/form-message.variants.json": "281c0272d251ffbd015fe1570879676b6d787b8149ac9129db846448d88b89b4",
+    "ui/form/form.templ": "251208fa46ea0fa14e8cc62a2ec72922dac3d5bc64bdbd8571fa9948023c87c7",
+    "ui/form/form.variants.json": "2e2b94499ea19b932f158c9417602a070b843d368326be97780b686d565d2e6a",
+    "ui/form/legend.variants.json": "58415ce5ebbd97ef3fe8a85adc19f805d5f32408648457284fe2fa1e45e6cb11",
+    "ui/form/meter.variants.json": "9ea910d4be6378ffccb5ec9d1a92fc8f026b79fcf26968280d8bdd16fc87cb16",
+    "ui/form/progress.variants.json": "7d118704a6477aa91feb73e4dcde0980c9639350ec79d801384c4dad3bf2ab8a",
+    "ui/grid/grid_gen.go": "77a663927b682868e3f1d5c6b56de37ad5913fff2b8214988495f1edad1e767d",
+    "ui/grid/grid.templ": "87b08d5a1b335c544cf1f95d750e77b6ade49404bd87a2fa79a9f03bac39bb0a",
+    "ui/grid/grid.variants.json": "c1819c6d4d725e6137d0b7a053511da50fb26eb6f5b5146de7a0b512da945a74",
+    "ui/group/group_gen.go": "7a9c162857a418d288642a3603cf4d61702711374c7ae07bb352b9981dc9d009",
+    "ui/group/group.templ": "75861ab5e4959e80aacd9d7840313d4942edc0556918fa7d2c88c6400f798926",
+    "ui/group/group.variants.json": "c571dd93f7a92a7c31792d7e30c248010934a70c089b65dee7a59afe96c2fb2d",
+    "ui/icon/icon_gen.go": "920a736c59cfc5f1c1537e46219ea51a1eaf5e737ffff5dcd5b6bae322af7157",
+    "ui/icon/icon.templ": "62c83e9453f68948bd029ef4770d9cfb75dbd7368b74a70b4ca0d74cc489b209",
+    "ui/icon/icon.variants.json": "1e931f52ab6497706c0ff0f6a01894f209035a70206dc2ef40a89413d2995d28",
+    "ui/iconbadge/iconbadge_gen.go": "28350c6a87c1012f2b581914526e84e1240686c773268a49e2cda19c9e4cf526",
+    "ui/iconbadge/iconbadge.templ": "9194c80014e4bb102fb63dec3455c907ccefffc67f2be6a025cb2bacb23efc78",
+    "ui/iconbadge/iconbadge.variants.json": "6b24fb827049944852a4bd3380418aa18b1f8acd156c00f551830fa28a006131",
+    "ui/image/image_gen.go": "c14253ac737db719a25c4685039b6c12b76271136273caad482c7392b7a97569",
+    "ui/image/image.templ": "633d6ced09508a73b9db26d09fca6b2c24e73dcfa5198711f89b816ec6d485f0",
+    "ui/image/image.variants.json": "6b0a048a1a1a736361ca5bf755c4bc05f9418fd0d1cc8414e511a0861d4d6ce6",
+    "ui/inline/inline_gen.go": "b4c611cf3cad08ad8004f10746e5cafeda08de8ed04956de995bc92253dfd844",
+    "ui/inline/inline.templ": "25a8bcde70e5dfebf24cb0ac614887e665d2af0304e128aa217466cce3d87fa6",
+    "ui/inline/inline.variants.json": "3b4c0082fea7d2fddef77e9a24cdc5ee0f2e0676626ca6a9827e373710b5d646",
+    "ui/input/input_gen.go": "45350c0624f06251fd3970813e2ab41bf4eca06814d37dd61f5a88ec8259aa3b",
+    "ui/input/input.templ": "030af9418ce56a9e16ad31ef93348aa686c857c052057e9897a8f8c2884115e2",
+    "ui/input/input.variants.json": "df29f2ffc799d56eeda94ceaabe15e168179fdc7b6d1aafeab2c4eb330014d04",
+    "ui/label/label_gen.go": "76dc0c702f96aba096196f181b7f9c52e840e909f6df9c557c568fb1b6b5529d",
+    "ui/label/label.templ": "4d48a27fd973218db4200d20d6186833d63daa14bf5f734e1c01694d9b88199f",
+    "ui/label/label.variants.json": "a29b14935c0aacac086db0180d99159c2dd9105f9e05331a247b2e36234e5e54",
+    "ui/linebreak/linebreak_gen.go": "740da1f5ab4995e34cdbb09044f84ef32e617117ba26b2e2aa145dcca07f81d6",
+    "ui/linebreak/linebreak.templ": "10f1e9e62fda5c78fec690973c05d60329b8911d7961e5f499546642d84ad500",
+    "ui/linebreak/linebreak.variants.json": "ee15b0b3f21340688ceaf1d0640dab60a091ba013c44470c7de1b4d524e89dad",
+    "ui/link-plain/link-plain_gen.go": "729b6f476ae18ee1e202457ea778dfc30ea8616192d69a6f05b11769016afc3c",
+    "ui/link-plain/link-plain.templ": "9066a3730bc25a5b7485438a61a212a4087a4ae02604199c091957899de3b611",
+    "ui/link-plain/link-plain.variants.json": "f2f7a34d5f33118736c60148e426083dd89cf8699cf112fbb1a00da5658dde82",
+    "ui/link/link_gen.go": "16daeff9005a0bbcbfcf59f8b8f520b160aaccdbb7000501165411ea879ad297",
+    "ui/link/link.templ": "3312aacb6f435d154f288952e426d2993ca0576563a0612de2208e35d26ced87",
+    "ui/link/link.variants.json": "4ebce197e49566a1ed9bf537e8eb65b1c86167c36be1a8b075d24e4455c37bd4",
+    "ui/list/list_gen.go": "5e6e5726e0b590be6ca0da8681f1c7a34604d247bbade54e2636fa01dea9ecaf",
+    "ui/list/list.templ": "ec43b94b6cfda7ff59fddd998133c9c0d3d79d6f4b6b37ce93b421f8147b69b0",
+    "ui/list/list.variants.json": "286007571632d86eef167a1ca3f9ee3338085479ff1d6bbe3bc308436b8bfa57",
+    "ui/lucide-icon/lucide_icons.go": "0a65fbc01e0140794f22a742f34c27d044627a3870a4e967bab6985d18da5c1c",
+    "ui/lucide-icon/lucide-icon.templ": "9eb059f79e61ffd247af27a154a5344cdd8f67b64bc335074033cb25ef5ba6fa",
+    "ui/radio/radio_gen.go": "c88404965abdc9c89af371cfbca715d15d851385a95327c6f21eb164a744a6de",
+    "ui/radio/radio.templ": "3e78c1d62e5b9a993b91a2ffecc245cbbe10b96c19839205c5970c1b3ba733e3",
+    "ui/radio/radio.variants.json": "e260efee6e8cb1082a2cfa5fd54e1554e45c8c094850758476a692c978066fdb",
+    "ui/range/range_gen.go": "2a229e5d3ba47dc80d27cc307d98354888381ba4c6e810010201d8ad81cd4602",
+    "ui/range/range.templ": "9cd4046f15401b2db0b4d27b402d5d3b370a67fe916896a76ca3afaa8ea79606",
+    "ui/range/range.variants.json": "9d90b66e2a73778049cc1850587cd6c24f01d75f64c2a981f20e54de3fea7e8a",
+    "ui/select/select_gen.go": "b0e9166c64e97ab526c7c3ae7796803535e9f44c19c1edc8b18d08a080f39b3b",
+    "ui/select/select.templ": "e44549d38d57a8820f161129700aadcab55b3640b147b22e8944bc0f052acadd",
+    "ui/select/select.variants.json": "6bb9388ceb4a2bbcd2b70292a081614920f6e118073436d93f924a3282217bed",
+    "ui/separator/separator_gen.go": "ccb984099949b077a751880aa9aa07ddb4c63931311bf363c2a88c90afafce2a",
+    "ui/separator/separator.templ": "62f49f429f43b23e8b5c51de0562398cebbc6c25047ceab9ad188517e4e2f75a",
+    "ui/separator/separator.variants.json": "f1f7562cb3b082ea0054378ef6754585e32fd1ebbdeeb37ca222860c03271f47",
+    "ui/sheet/sheet_gen.go": "6787785f00418a418152a2e428b5427490875146b6571165da7ad1ea70746b22",
+    "ui/sheet/sheet.templ": "276d00e92d810f4a18d1e1f02e58daf077df0408cee1efdc94bc5b341713616f",
+    "ui/sheet/sheet.variants.json": "cd1406a8461a53512853718fccd2cc669f7bf5e4cd16d89d9fbae890760e4bb4",
+    "ui/sheet/sheettrigger.variants.json": "79e43efa27faca8ebcb3c9c38cbd187d2a898df4fc22534a21cbe722189ef138",
+    "ui/skeleton/skeleton_gen.go": "55dd720861a2c1b3cd9b9caf177828afbae3bb6b2e2e28f2e9927efc7974ccc6",
+    "ui/skeleton/skeleton.templ": "ca5e8ef7022315447523a815ab9dc8d5d1572a36eec87c729909fbde28b28068",
+    "ui/skeleton/skeleton.variants.json": "ca79242c112ff2b714b0c2ec16ab07ee402fa6b23df3f7cf0c3b6f153dc788e8",
+    "ui/stack/stack_gen.go": "257612da3af7b35352a5bc248c6b7cb25af113e104cbfdcbd74e980986fe9600",
+    "ui/stack/stack.templ": "3fb1c53d9cbeb19387250c21169a1b4d482e2fe2c36b495b28794f8d1db11456",
+    "ui/stack/stack.variants.json": "aa6a71c5a5d5bb664149c92107daa0cfd23ae0f8904265e02adfd284f82bd797",
+    "ui/switch/switch_gen.go": "5f49399ca1c89d2b5730ae52d7cdbb9ebb6932440cdec3a6eb9f092a397454ac",
+    "ui/switch/switch.templ": "99bd8a62cb960faafe0040caf1502f6ee1a4b350705c92731d69940fd142c44d",
+    "ui/switch/switch.variants.json": "7d3f004339b9af0abeb81a8b9acb32c8e8a87c2bb5be498867a57fd5b1347539",
+    "ui/table/table_gen.go": "9fca92a0ba22d03abc9378f02d9ed1d583d9b53cb11f8b186939d79c1c56a1ab",
+    "ui/table/table-cell.variants.json": "f0be9b8640964cfae0df8d4477eca8f53e21d67e9113baf3070ab86c7432aff5",
+    "ui/table/table-head-cell.variants.json": "fb3eed1db6b23d7e4ad52140ce79abf7372f751c0b3182090b840dd0eaee7f5a",
+    "ui/table/table.templ": "34033b0a9247e5bb384e1ae8f76f2ca9d8d30a4e27eb67c61651f14ff9a53425",
+    "ui/table/table.variants.json": "4ac5d1d28b8709903feadba166706419d070192af753721739efbba2ab5373dd",
+    "ui/text/text_gen.go": "f154df1df75cbd25c4cd1dd2edfc6a087496df127155f9bae0b5e4fd76d2f263",
+    "ui/text/text.templ": "094ae4307484eaacdf5746f7d7398fbaba56a3ae597ecdce685370e2be40ceb5",
+    "ui/text/text.variants.json": "820b1e16356e614f3d08fd85cd57aac44afa4e53b2f4b020bbf94e5a80816abe",
+    "ui/textarea/textarea_gen.go": "eecbefba52ac501bf2001aec387807940fb46988d859ab8af32b4a7a1da32a5c",
+    "ui/textarea/textarea.templ": "eeb3a886e2eb34e487000f994524186478c7d76eafef9a5e98615b621e75f3be",
+    "ui/textarea/textarea.variants.json": "a733e48a9ed18b409325ea585f3a58e5f356afd064c625072063be1526f7bf02",
+    "ui/themetoggle/themetoggle_gen.go": "9d4fa8692dfe443e9f54d9c383410aee030f339a98f55e3b14a6493c49a6a131",
+    "ui/themetoggle/themetoggle.templ": "3b1431a856d59816c99d47fed1c1e43cad7dbb98fbeb6172a14ddb8f7aac7620",
+    "ui/themetoggle/themetoggle.variants.json": "9797fd2291d4997d3ed5e373439cb6340284553f2f398227d400fe14a40f1459",
+    "ui/title/title_gen.go": "e51c94129a94b192d52c7ef6089b29d6bfc2e22fbe312a35c2c046a328a80d61",
+    "ui/title/title.templ": "923bca8f83d2a46eb7dd9b712719297468a34de266f806f6bb5dead2e4034b33",
+    "ui/title/title.variants.json": "ebaf2491ef8666cc5e0d20e8ba02935665ebf07f1adbcea9432cb8851f92c8a2",
+    "utils/cn_merge_test.go": "28a7d414849b4627809c77465028803f59c3d4c8ea7778e08e3ae33c8792c448",
+    "utils/cn_merge.go": "8980fc0f08836b9aed45cee9cf85163f15f32b81ec3f132d8686ce0a0f031d10",
+    "utils/dyn.go": "798ca7362f5dd2cade32cb005240d596de5854fbaba5b3c272fae3af24f4f4e2",
+    "utils/expr.go": "0f9903011a2c16262b55bfe4b4c21be41cf902941e943a1c76b72f95701edf73",
+    "utils/heading.go": "7cc9f1f61cca60d91d215115c008339886696780ae0586e649b8da8bc00b3de5",
+    "utils/tags.go": "b8f666465e0d10d0477fdc4c4035c406bc9e71ffb60bb9a89d7cbce71a027401",
+    "utils/utils.go": "0a067fcaa6eca10e611e4d6bd6144c546d984a32917fb99c27a3281fde81a130",
+    "utils/variants_json.go": "35b72f356d67936683fb4035f154618a093102d4a9b70a672ae00434fdf53385"
+  }
+}
diff --git a/packages/templ/ui/README.md b/packages/templ/ui/README.md
new file mode 100644
index 0000000..f71d87a
--- /dev/null
+++ b/packages/templ/ui/README.md
@@ -0,0 +1,18 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+# github.com/ui8kit/codegen/packages/templ/ui
+
+Go [templ](https://templ.guide) package **generated** by xgen from `xgen/specs`: 40 bricks, 72 parts.
+
+Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`.
+
+```sh
+templ generate && go vet ./... && go build ./...
+```
+
+```go
+import "github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+
+@button.Button(button.ButtonProps{Variant: "outline"}) { Save }
+```
+
+The classes are the same Tailwind v4 utilities as the Svelte, React, Vue and Solid packages: import their `styles/index.css` (theme and kit) in the app CSS and add `@source` for this folder.
diff --git a/packages/templ/ui/blocks/about-company.templ b/packages/templ/ui/blocks/about-company.templ
new file mode 100644
index 0000000..e2001e4
--- /dev/null
+++ b/packages/templ/ui/blocks/about-company.templ
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/about-company.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// AboutCompanyProps are the props of AboutCompany; the values are the JSON shapes of the TypeScript props.
+type AboutCompanyProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Stats any `json:"stats"`
+	Values any `json:"values"`
+	Layout any `json:"layout"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout (split: the pictures beside the text, stacked: the pictures under it), tone, density.
+templ AboutCompany(p AboutCompanyProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vStats := p.Stats }}
+	{{ vValues := p.Values }}
+	{{ vLayout := uiutils.Def(p.Layout, "split") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, Density: vDensity, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "split", "stack"), Media: map[string]any{"show": true, "side": "start"}, LandmarkLabel: vLandmarkLabel, Aside: aboutCompanyFill1(p, vTitle)}) {
+		if uiutils.Gt(uiutils.Len(vStats), float64(0)) {
+			@grid.Grid(grid.GridProps{Cols: "2-4", Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "stats")}) {
+				for _, vS := range uiutils.L(vStats) {
+					@stack.Stack(stack.StackProps{Gap: "0", Attrs: uiutils.Attrs("data-testid", "stat")}) {
+						@text.Text(text.TextProps{Size: "3xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "value")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "label")) }
+						}
+					}
+				}
+			}
+		}
+		if uiutils.Gt(uiutils.Len(vValues), float64(0)) {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("grid grid-cols-1 gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "stacked")), "md:grid-cols-3", ""))), Attrs: uiutils.Attrs("data-testid", "values")}) {
+				for _, vV := range uiutils.L(vValues) {
+					@group.Group(group.GroupProps{Gap: "4", Align: "start", Class: "border-t border-border pt-4", Attrs: uiutils.Attrs("data-testid", "value")}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vV, "icon")), Size: 20})
+						@stack.Stack(stack.StackProps{Gap: "2"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vV, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vV, "text")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+templ aboutCompanyFill1(p AboutCompanyProps, vTitle any) {
+	@box.Box(box.BoxProps{Class: "grid grid-cols-3 gap-4", Attrs: uiutils.Attrs("data-testid", "strip")}) {
+		@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4"})
+		@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4", Class: uiutils.Cnv("mt-8")})
+		@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4"})
+	}
+}
diff --git a/packages/templ/ui/blocks/about-me.templ b/packages/templ/ui/blocks/about-me.templ
new file mode 100644
index 0000000..119433b
--- /dev/null
+++ b/packages/templ/ui/blocks/about-me.templ
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/about-me.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// AboutMeProps are the props of AboutMe; the values are the JSON shapes of the TypeScript props.
+type AboutMeProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Level any `json:"level"`
+	Facts any `json:"facts"`
+	Skills any `json:"skills"`
+	Labels any `json:"labels"`
+	Actions any `json:"actions"`
+	Layout any `json:"layout"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills), mediaSide, tone.
+templ AboutMe(p AboutMeProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vFacts := p.Facts }}
+	{{ vSkills := p.Skills }}
+	{{ vLabels := p.Labels }}
+	{{ vActions := p.Actions }}
+	{{ vLayout := uiutils.Def(p.Layout, "facts") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "start") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge, "level": vLevel}, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide}, Tone: vTone, LandmarkLabel: vLandmarkLabel, Aside: aboutMeFill1(p, vTitle)}) {
+		if uiutils.Eq(vLayout, "facts") {
+			if uiutils.Gt(uiutils.Len(vFacts), float64(0)) {
+				@list.List(list.ListProps{Tag: "ul", Class: "grid grid-cols-1 gap-4 sm:grid-cols-2", Attrs: uiutils.Attrs("data-testid", "facts")}) {
+					for _, vF := range uiutils.L(vFacts) {
+						@list.ListItem(list.ListItemProps{Class: "rounded bg-card inset-ring inset-ring-border flex flex-col gap-0 p-4", Attrs: uiutils.Attrs("data-testid", "fact")}) {
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vF, "label")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vF, "value")) }
+							}
+						}
+					}
+				}
+			}
+		} else if uiutils.Gt(uiutils.Len(vSkills), float64(0)) {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "skills")}) {
+				for _, vS := range uiutils.L(vSkills) {
+					@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "skill")}) {
+						@group.Group(group.GroupProps{Gap: "4", Justify: "between"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vS, "label")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "level"), uiutils.Get(vS, "level"))) }
+							}
+						}
+						@form.Progress(form.ProgressProps{Value: uiutils.S(uiutils.Str(uiutils.Get(vS, "level"))), Max: "100", Attrs: uiutils.Attrs("aria-label", uiutils.Get(vS, "label"))})
+					}
+				}
+			}
+		}
+		@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref")})
+	}
+}
+
+templ aboutMeFill1(p AboutMeProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4"})
+}
diff --git a/packages/templ/ui/blocks/action-group.templ b/packages/templ/ui/blocks/action-group.templ
new file mode 100644
index 0000000..fbc7f9e
--- /dev/null
+++ b/packages/templ/ui/blocks/action-group.templ
@@ -0,0 +1,38 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/action-group.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ActionGroupProps are the props of ActionGroup; the values are the JSON shapes of the TypeScript props.
+type ActionGroupProps struct {
+	Primary any `json:"primary"`
+	PrimaryHref any `json:"primaryHref"`
+	Secondary any `json:"secondary"`
+	SecondaryHref any `json:"secondaryHref"`
+	Align any `json:"align"`
+}
+
+// One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not handlers: the page decides what they open.
+templ ActionGroup(p ActionGroupProps) {
+	{{ vPrimary := p.Primary }}
+	{{ vPrimaryHref := p.PrimaryHref }}
+	{{ vSecondary := p.Secondary }}
+	{{ vSecondaryHref := p.SecondaryHref }}
+	{{ vAlign := uiutils.Def(p.Align, "start") }}
+	@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vAlign, "center")), "center", "start")), Class: "flex-wrap", Attrs: uiutils.Attrs("data-slot", "action-group")}) {
+		@button.Button(button.ButtonProps{Variant: "default", Size: "default", Href: uiutils.S(vPrimaryHref), Attrs: uiutils.Attrs("data-testid", "action-primary")}) {
+			{ uiutils.Text(vPrimary) }
+		}
+		if uiutils.T(vSecondary) {
+			@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Href: uiutils.S(vSecondaryHref), Attrs: uiutils.Attrs("data-testid", "action-secondary")}) {
+				{ uiutils.Text(vSecondary) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/activity-feed.templ b/packages/templ/ui/blocks/activity-feed.templ
new file mode 100644
index 0000000..5948b50
--- /dev/null
+++ b/packages/templ/ui/blocks/activity-feed.templ
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/activity-feed.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ActivityFeedProps are the props of ActivityFeed; the values are the JSON shapes of the TypeScript props.
+type ActivityFeedProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Events any `json:"events"`
+	Empty any `json:"empty"`
+	Layout any `json:"layout"`
+	Density any `json:"density"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout (timeline, list), density (default, compact), tone (default, muted).
+templ ActivityFeed(p ActivityFeedProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vEvents := p.Events }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLayout := uiutils.Def(p.Layout, "timeline") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Cond(uiutils.T(uiutils.And(vTitle, vId)), uiutils.Tpl("{0}-t", vId), nil)), "data-testid", "panel-section", "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: "mx-auto w-full max-w-6xl px-4 py-8", Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@Panel(PanelProps{Title: vTitle, Description: vText, Id: vId, Class: uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "muted")), "bg-muted", ""))}) {
+				if uiutils.Eq(uiutils.Len(vEvents), float64(0)) {
+					@EmptyState(EmptyStateProps{Icon: "activity", Title: vEmpty})
+				} else if uiutils.Eq(vLayout, "timeline") {
+					@Timeline(TimelineProps{Items: vEvents})
+				} else {
+					@list.List(list.ListProps{Class: "m-0 flex list-none flex-col p-0", Attrs: uiutils.Attrs("data-testid", "items")}) {
+						for _, vE := range uiutils.L(vEvents) {
+							@list.ListItem(list.ListItemProps{Class: uiutils.S(uiutils.Cnv("flex items-start justify-between gap-4 border-b border-border last:border-0", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-2", "py-4"))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+								@stack.Stack(stack.StackProps{Gap: "0"}) {
+									@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vE, "title")) }
+									}
+									if uiutils.Eq(vDensity, "default") {
+										@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+											{ uiutils.Text(uiutils.Get(vE, "text")) }
+										}
+									}
+								}
+								@text.Text(text.TextProps{Size: "xs", Class: "shrink-0 text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vE, "time")) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/announcement-bar.templ b/packages/templ/ui/blocks/announcement-bar.templ
new file mode 100644
index 0000000..8927c58
--- /dev/null
+++ b/packages/templ/ui/blocks/announcement-bar.templ
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/announcement-bar.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	linkplain "github.com/ui8kit/codegen/packages/templ/ui/ui/link-plain"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// AnnouncementBarProps are the props of AnnouncementBar; the values are the JSON shapes of the TypeScript props.
+type AnnouncementBarProps struct {
+	Label any `json:"label"`
+	Text any `json:"text"`
+	Cta any `json:"cta"`
+	CtaHref any `json:"ctaHref"`
+	Icon any `json:"icon"`
+	DismissLabel any `json:"dismissLabel"`
+	Tone any `json:"tone"`
+	Layout any `json:"layout"`
+	Dismiss any `json:"dismiss"`
+	BadgeLabel any `json:"badgeLabel"`
+	Badge any `json:"badge"`
+	Position any `json:"position"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default, muted), layout (center, split), dismiss (show, hide).
+templ AnnouncementBar(p AnnouncementBarProps) {
+	{{ vLabel := p.Label }}
+	{{ vText := p.Text }}
+	{{ vCta := p.Cta }}
+	{{ vCtaHref := p.CtaHref }}
+	{{ vIcon := uiutils.Def(p.Icon, "megaphone") }}
+	{{ vDismissLabel := p.DismissLabel }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLayout := uiutils.Def(p.Layout, "center") }}
+	{{ vDismiss := uiutils.Def(p.Dismiss, "hide") }}
+	{{ vBadgeLabel := p.BadgeLabel }}
+	{{ vBadge := uiutils.Def(p.Badge, "none") }}
+	{{ vPosition := uiutils.Def(p.Position, "top") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "aside", Class: uiutils.S(uiutils.Cnv("w-full", uiutils.Cond(uiutils.T(uiutils.Eq(vPosition, "bottom")), "sticky bottom-0 z-40 border-t border-border", ""), uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "muted")), "bg-muted text-foreground", "bg-primary text-primary-foreground"))), Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vLabel), "data-testid", "announcement", "data-layout", vLayout)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "flex items-center gap-4 py-2", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "justify-between", "justify-center"))), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: uiutils.S(uiutils.Cnv("min-w-0 flex-wrap", uiutils.Cond(uiutils.T(uiutils.And(uiutils.Eq(vLayout, "center"), uiutils.Eq(vDismiss, "show"))), "ml-auto", "")))}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(vIcon), Size: 16})
+				if uiutils.Eq(vBadge, "show") {
+					@inline.Inline(inline.InlineProps{Class: "rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current", Attrs: uiutils.Attrs("data-testid", "announcement-badge")}) {
+						{ uiutils.Text(vBadgeLabel) }
+					}
+				}
+				@text.Text(text.TextProps{Size: "sm"}) {
+					{ uiutils.Text(vText) }
+				}
+				if uiutils.T(vCta) {
+					@linkplain.LinkPlain(linkplain.LinkPlainProps{Href: uiutils.S(vCtaHref), Class: "inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4", Attrs: uiutils.Attrs("data-testid", "announcement-cta")}) {
+						{ uiutils.Text(vCta) }
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+					}
+				}
+			}
+			if uiutils.Eq(vDismiss, "show") {
+				@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Class: "ml-auto shrink-0 text-current", Type: "button", Attrs: uiutils.Attrs("aria-label", vDismissLabel, "data-testid", "dismiss")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "x", Size: 16})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/app-main.templ b/packages/templ/ui/blocks/app-main.templ
new file mode 100644
index 0000000..325d193
--- /dev/null
+++ b/packages/templ/ui/blocks/app-main.templ
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/app-main.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// AppMainProps are the props of AppMain; the values are the JSON shapes of the TypeScript props.
+type AppMainProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Metrics any `json:"metrics"`
+	Chart any `json:"chart"`
+	Activity any `json:"activity"`
+	Cols any `json:"cols"`
+	Density any `json:"density"`
+}
+
+// The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel when `activity` is given).
+templ AppMain(p AppMainProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vMetrics := p.Metrics }}
+	{{ vChart := p.Chart }}
+	{{ vActivity := p.Activity }}
+	{{ vCols := uiutils.Def(p.Cols, "1-2") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	@stack.Stack(stack.StackProps{Gap: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "4", "6")), Align: "stretch", Class: "min-w-0", Attrs: uiutils.Attrs("data-testid", "app-main")}) {
+		@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "2xl", Weight: "bold", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-title", vId))}) {
+			{ uiutils.Text(vTitle) }
+		}
+		if uiutils.Gt(uiutils.Len(vMetrics), float64(0)) {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(vCols), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vM := range uiutils.L(vMetrics) {
+					@box.Box(box.BoxProps{Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@StatTile(StatTileProps{Label: uiutils.Get(vM, "label"), Value: uiutils.Get(vM, "value"), Icon: uiutils.Get(vM, "icon"), Hint: uiutils.Get(vM, "hint")})
+					}
+				}
+			}
+		}
+		if uiutils.T(vActivity) {
+			@grid.Grid(grid.GridProps{Cols: "1-2", Class: "items-stretch gap-4"}) {
+				if uiutils.Gt(uiutils.Len(uiutils.Get(vChart, "series")), float64(0)) {
+					@Panel(PanelProps{Title: uiutils.Get(vChart, "title"), Description: uiutils.Get(vChart, "text"), Id: uiutils.Tpl("{0}-chart", vId), Class: uiutils.Cnv("h-full")}) {
+						@BarChart(BarChartProps{Bars: uiutils.Get(vChart, "series"), Label: uiutils.Get(vChart, "summary"), Height: float64(144)})
+					}
+				}
+				if uiutils.Gt(uiutils.Len(uiutils.Get(vActivity, "events")), float64(0)) {
+					@Panel(PanelProps{Title: uiutils.Get(vActivity, "title"), Description: uiutils.Get(vActivity, "text"), Id: uiutils.Tpl("{0}-feed", vId), Class: uiutils.Cnv("h-full")}) {
+						@Timeline(TimelineProps{Items: uiutils.Get(vActivity, "events")})
+					}
+				}
+			}
+		} else if uiutils.Gt(uiutils.Len(uiutils.Get(vChart, "series")), float64(0)) {
+			@Panel(PanelProps{Title: uiutils.Get(vChart, "title"), Description: uiutils.Get(vChart, "text"), Id: uiutils.Tpl("{0}-chart", vId), Class: uiutils.Cnv("h-full")}) {
+				@BarChart(BarChartProps{Bars: uiutils.Get(vChart, "series"), Label: uiutils.Get(vChart, "summary"), Height: float64(144)})
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/app-shell.templ b/packages/templ/ui/blocks/app-shell.templ
new file mode 100644
index 0000000..916d9a5
--- /dev/null
+++ b/packages/templ/ui/blocks/app-shell.templ
@@ -0,0 +1,84 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/app-shell.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// AppShellProps are the props of AppShell; the values are the JSON shapes of the TypeScript props.
+type AppShellProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Nav any `json:"nav"`
+	User any `json:"user"`
+	Search any `json:"search"`
+	Metrics any `json:"metrics"`
+	Chart any `json:"chart"`
+	Activity any `json:"activity"`
+	Layout any `json:"layout"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar is a port contract.
+templ AppShell(p AppShellProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vNav := p.Nav }}
+	{{ vUser := p.User }}
+	{{ vSearch := p.Search }}
+	{{ vMetrics := p.Metrics }}
+	{{ vChart := p.Chart }}
+	{{ vActivity := p.Activity }}
+	{{ vLayout := uiutils.Def(p.Layout, "sidebar") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Class: "bg-background", Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Tpl("{0}-title", vId)), "data-testid", "app-shell", "data-layout", vLayout, "aria-label", vLandmarkLabel)}) {
+		if uiutils.Eq(vLayout, "top") {
+			@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch"}) {
+				@NavBar(NavBarProps{Label: uiutils.Get(vNav, "label"), Brand: uiutils.Get(vNav, "brand"), Links: uiutils.Get(vNav, "links"), Current: uiutils.Get(vNav, "current"), Search: vSearch, Actions: map[string]any{"mode": "none"}, Layout: "search", LandmarkLabel: vLandmarkLabel})
+				@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "pb-8")), Attrs: uiutils.Attrs("data-slot", "container")}) {
+					@AppMain(AppMainProps{Id: vId, Title: vTitle, Metrics: vMetrics, Chart: vChart, Cols: "1-4", Activity: vActivity, Density: vDensity})
+				}
+			}
+		} else {
+			@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "py-8")), Attrs: uiutils.Attrs("data-slot", "container")}) {
+				if uiutils.Eq(vLayout, "sidebar") {
+					@grid.Grid(grid.GridProps{Cols: "1", Class: "items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]"}) {
+						@SidebarNav(SidebarNavProps{Label: uiutils.Get(vNav, "label"), Brand: uiutils.Get(vNav, "brand"), Links: uiutils.Get(vNav, "links"), Current: uiutils.Get(vNav, "current"), UserName: uiutils.Get(vUser, "name"), UserEmail: uiutils.Get(vUser, "email"), Density: vDensity, LandmarkLabel: vLandmarkLabel})
+						@AppMain(AppMainProps{Id: vId, Title: vTitle, Metrics: vMetrics, Chart: vChart, Activity: vActivity, Density: vDensity})
+					}
+				} else {
+					@grid.Grid(grid.GridProps{Cols: "1-3", Class: "items-start gap-4"}) {
+						@SidebarNav(SidebarNavProps{Label: uiutils.Get(vNav, "label"), Brand: uiutils.Get(vNav, "brand"), Links: uiutils.Get(vNav, "links"), Current: uiutils.Get(vNav, "current"), UserName: uiutils.Get(vUser, "name"), UserEmail: uiutils.Get(vUser, "email"), Width: "compact", Density: vDensity, LandmarkLabel: vLandmarkLabel})
+						if uiutils.Gt(uiutils.Len(uiutils.Get(vActivity, "events")), float64(0)) {
+							@Panel(PanelProps{Title: uiutils.Get(vActivity, "title"), Description: uiutils.Get(vActivity, "text"), Id: uiutils.Tpl("{0}-list", vId)}) {
+								@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-4 p-0", Attrs: uiutils.Attrs("data-testid", "items")}) {
+									for _, vE := range uiutils.L(uiutils.Get(vActivity, "events")) {
+										@list.ListItem(list.ListItemProps{Class: "flex flex-col gap-2", Attrs: uiutils.Attrs("data-testid", "item")}) {
+											@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+												{ uiutils.Text(uiutils.Get(vE, "title")) }
+											}
+											@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+												{ uiutils.Text(uiutils.Get(vE, "time")) }
+											}
+										}
+									}
+								}
+							}
+						}
+						@AppMain(AppMainProps{Id: vId, Title: vTitle, Metrics: vMetrics, Chart: vChart, Density: "compact"})
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/article-block.templ b/packages/templ/ui/blocks/article-block.templ
new file mode 100644
index 0000000..40b5de0
--- /dev/null
+++ b/packages/templ/ui/blocks/article-block.templ
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/article-block.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ArticleBlockProps are the props of ArticleBlock; the values are the JSON shapes of the TypeScript props.
+type ArticleBlockProps struct {
+	Testid any `json:"testid"`
+	Class string `json:"className"`
+}
+
+// A self-contained item (a review, a card, a project) in its own file: Block tag article.
+templ ArticleBlock(p ArticleBlockProps) {
+	{{ vTestid := p.Testid }}
+	@block.Block(block.BlockProps{Tag: "article", Class: uiutils.S(uiutils.Cnv(p.Class)), Attrs: uiutils.Attrs("data-testid", vTestid)}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/article-body.templ b/packages/templ/ui/blocks/article-body.templ
new file mode 100644
index 0000000..b483f6a
--- /dev/null
+++ b/packages/templ/ui/blocks/article-body.templ
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/article-body.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ArticleBodyProps are the props of ArticleBody; the values are the JSON shapes of the TypeScript props.
+type ArticleBodyProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Sections any `json:"sections"`
+	Empty any `json:"empty"`
+	TocTitle any `json:"tocTitle"`
+	Layout any `json:"layout"`
+	Quotes any `json:"quotes"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting the section being read is a port contract.
+templ ArticleBody(p ArticleBodyProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vSections := p.Sections }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vTocTitle := p.TocTitle }}
+	{{ vLayout := uiutils.Def(p.Layout, "column") }}
+	{{ vQuotes := uiutils.Def(p.Quotes, "show") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vSections), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "file-text", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: "1", Class: uiutils.S(uiutils.Cnv("items-start gap-8", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "toc")), "md:grid-cols-[14rem_minmax(0,1fr)]", "")))}) {
+				if uiutils.Eq(vLayout, "toc") {
+					@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", vTocTitle, vLandmarkLabel)), vTocTitle), Class: uiutils.Cnv("md:sticky md:top-4"), Testid: "toc"}) {
+						@stack.Stack(stack.StackProps{Gap: "2"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(vTocTitle) }
+							}
+							@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0"}) {
+								for _, vS := range uiutils.L(vSections) {
+									@list.ListItem(list.ListItemProps{}) {
+										@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Tpl("#{0}-{1}", vId, uiutils.Get(vS, "id"))), Variant: "default", Class: "text-sm text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "toc-link")}) {
+											{ uiutils.Text(uiutils.Get(vS, "title")) }
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+				@stack.Stack(stack.StackProps{Gap: "8", Align: "stretch", Class: "mx-auto w-full max-w-2xl min-w-0", Attrs: uiutils.Attrs("data-testid", "article")}) {
+					for _, vS := range uiutils.L(vSections) {
+						@box.Box(box.BoxProps{Class: "flex flex-col gap-4", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-{1}", vId, uiutils.Get(vS, "id")), "data-testid", "item")}) {
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "2xl", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vS, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "base"}) {
+								{ uiutils.Text(uiutils.Get(vS, "text")) }
+							}
+							if uiutils.Eq(vQuotes, "show") {
+								if uiutils.T(uiutils.Get(vS, "quote")) {
+									@text.Text(text.TextProps{Tag: "blockquote", Class: "m-0 border-l border-border pl-4 text-lg", Attrs: uiutils.Attrs("data-testid", "quote")}) {
+										{ uiutils.Text(uiutils.Get(vS, "quote")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/auth-card.templ b/packages/templ/ui/blocks/auth-card.templ
new file mode 100644
index 0000000..1c2c33e
--- /dev/null
+++ b/packages/templ/ui/blocks/auth-card.templ
@@ -0,0 +1,107 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/auth-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/separator"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// AuthCardProps are the props of AuthCard; the values are the JSON shapes of the TypeScript props.
+type AuthCardProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Submit any `json:"submit"`
+	SwitchText any `json:"switchText"`
+	SwitchLink any `json:"switchLink"`
+	SwitchHref any `json:"switchHref"`
+	Labels any `json:"labels"`
+	Mode any `json:"mode"`
+	Layout any `json:"layout"`
+	Social any `json:"social"`
+	Level any `json:"level"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button, optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout (card, plain), social (none, show).
+templ AuthCard(p AuthCardProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vSubmit := p.Submit }}
+	{{ vSwitchText := p.SwitchText }}
+	{{ vSwitchLink := p.SwitchLink }}
+	{{ vSwitchHref := p.SwitchHref }}
+	{{ vLabels := p.Labels }}
+	{{ vMode := uiutils.Def(p.Mode, "signin") }}
+	{{ vLayout := uiutils.Def(p.Layout, "card") }}
+	{{ vSocial := uiutils.Def(p.Social, "none") }}
+	{{ vLevel := uiutils.Def(p.Level, float64(2)) }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Class: uiutils.S(uiutils.Cnv("flex w-full flex-col gap-6", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "card")), "rounded bg-card p-6 inset-ring inset-ring-border", ""))), Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Tpl("{0}-title", vId)), "data-testid", "auth-card", "data-mode", vMode, "aria-label", vLandmarkLabel)}) {
+		@stack.Stack(stack.StackProps{Gap: "2"}) {
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(vLevel)), Size: "2xl", Weight: "bold", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-title", vId))}) {
+				{ uiutils.Text(vTitle) }
+			}
+			@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(vText) }
+			}
+		}
+		if uiutils.T(uiutils.And(uiutils.Eq(vSocial, "first"), !uiutils.Eq(vSocial, "none"), !uiutils.Eq(vMode, "reset"), !uiutils.Eq(vMode, "magic"))) {
+			@stack.Stack(stack.StackProps{Gap: "4", Attrs: uiutils.Attrs("data-testid", "social")}) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+					@separator.Separator(separator.SeparatorProps{Class: "flex-1"})
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "divider")) }
+					}
+					@separator.Separator(separator.SeparatorProps{Class: "flex-1"})
+				}
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Type: "button", Class: "w-full"}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "key-round", Size: 16})
+					{ uiutils.Text(uiutils.Get(vLabels, "passkey")) }
+				}
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Type: "button", Class: "w-full"}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "mail", Size: 16})
+					{ uiutils.Text(uiutils.Get(vLabels, "magic")) }
+				}
+			}
+		}
+		@AuthForm(AuthFormProps{Id: vId, Mode: vMode, Labels: vLabels, Submit: vSubmit})
+		if uiutils.T(uiutils.And(!uiutils.Eq(vSocial, "first"), !uiutils.Eq(vSocial, "none"), !uiutils.Eq(vMode, "reset"), !uiutils.Eq(vMode, "magic"))) {
+			@stack.Stack(stack.StackProps{Gap: "4", Attrs: uiutils.Attrs("data-testid", "social")}) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+					@separator.Separator(separator.SeparatorProps{Class: "flex-1"})
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "divider")) }
+					}
+					@separator.Separator(separator.SeparatorProps{Class: "flex-1"})
+				}
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Type: "button", Class: "w-full"}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "key-round", Size: 16})
+					{ uiutils.Text(uiutils.Get(vLabels, "passkey")) }
+				}
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Type: "button", Class: "w-full"}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "mail", Size: 16})
+					{ uiutils.Text(uiutils.Get(vLabels, "magic")) }
+				}
+			}
+		}
+		@text.Text(text.TextProps{Size: "sm", Class: "text-center text-muted-foreground"}) {
+			{ uiutils.Text(vSwitchText) }
+			{ uiutils.Text(" ") }
+			@link.Link(link.LinkProps{Href: uiutils.S(vSwitchHref), Variant: "default", Attrs: uiutils.Attrs("data-testid", "switch")}) {
+				{ uiutils.Text(vSwitchLink) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/auth-form.templ b/packages/templ/ui/blocks/auth-form.templ
new file mode 100644
index 0000000..739a23e
--- /dev/null
+++ b/packages/templ/ui/blocks/auth-form.templ
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/auth-form.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/checkbox"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// AuthFormProps are the props of AuthForm; the values are the JSON shapes of the TypeScript props.
+type AuthFormProps struct {
+	Id any `json:"id"`
+	Mode any `json:"mode"`
+	Labels any `json:"labels"`
+	Submit any `json:"submit"`
+}
+
+// The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot link, the terms, the submit button.
+templ AuthForm(p AuthFormProps) {
+	{{ vId := p.Id }}
+	{{ vMode := uiutils.Def(p.Mode, "signin") }}
+	{{ vLabels := p.Labels }}
+	{{ vSubmit := p.Submit }}
+	@form.Form(form.FormProps{Method: "dialog", Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "auth-form")}) {
+		if uiutils.Eq(vMode, "signup") {
+			@Field(FieldProps{Label: uiutils.Get(vLabels, "name"), HtmlFor: uiutils.Tpl("{0}-name", vId)}) {
+				@input.Input(input.InputProps{Type: "text", Name: "name", Autocomplete: "name", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-name", vId), "data-testid", "field")})
+			}
+		}
+		@Field(FieldProps{Label: uiutils.Get(vLabels, "email"), HtmlFor: uiutils.Tpl("{0}-email", vId)}) {
+			@input.Input(input.InputProps{Type: "email", Name: "email", Autocomplete: "email", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-email", vId), "data-testid", "field")})
+		}
+		if uiutils.T(uiutils.And(!uiutils.Eq(vMode, "reset"), !uiutils.Eq(vMode, "magic"))) {
+			@Field(FieldProps{Label: uiutils.Get(vLabels, "password"), HtmlFor: uiutils.Tpl("{0}-password", vId)}) {
+				@input.Input(input.InputProps{Type: "password", Name: "password", Autocomplete: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vMode, "signup")), "new-password", "current-password")), Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-password", vId), "data-testid", "field")})
+			}
+		}
+		if uiutils.Eq(vMode, "signin") {
+			@group.Group(group.GroupProps{Justify: "between", Align: "center", Class: "flex-wrap gap-2"}) {
+				@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: uiutils.S(uiutils.Cnv("w-fit", ""))}) {
+					@checkbox.Checkbox(checkbox.CheckboxProps{Name: "remember", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-remember", vId))})
+					@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-remember", vId)), Class: "text-sm"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "remember")) }
+					}
+				}
+				@button.Button(button.ButtonProps{Variant: "link", Size: "sm", Class: "px-0"}) {
+					{ uiutils.Text(uiutils.Get(vLabels, "forgot")) }
+				}
+			}
+		}
+		if uiutils.Eq(vMode, "signup") {
+			@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: uiutils.S(uiutils.Cnv("w-fit", ""))}) {
+				@checkbox.Checkbox(checkbox.CheckboxProps{Name: "terms", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-terms", vId))})
+				@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-terms", vId)), Class: "text-sm"}) {
+					{ uiutils.Text(uiutils.Get(vLabels, "terms")) }
+				}
+			}
+		}
+		@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "submit", Class: "w-full", Attrs: uiutils.Attrs("data-testid", "submit")}) {
+			{ uiutils.Text(vSubmit) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/auth-layout.templ b/packages/templ/ui/blocks/auth-layout.templ
new file mode 100644
index 0000000..7261e3d
--- /dev/null
+++ b/packages/templ/ui/blocks/auth-layout.templ
@@ -0,0 +1,77 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/auth-layout.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// AuthLayoutProps are the props of AuthLayout; the values are the JSON shapes of the TypeScript props.
+type AuthLayoutProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Submit any `json:"submit"`
+	SwitchTo any `json:"switchTo"`
+	Labels any `json:"labels"`
+	Visual any `json:"visual"`
+	Level any `json:"level"`
+	Layout any `json:"layout"`
+	Side any `json:"side"`
+	Mode any `json:"mode"`
+	Social any `json:"social"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card, centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side of the picture), mode, social. The page's heading is the card's title.
+templ AuthLayout(p AuthLayoutProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vSubmit := p.Submit }}
+	{{ vSwitchTo := p.SwitchTo }}
+	{{ vLabels := p.Labels }}
+	{{ vVisual := p.Visual }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vLayout := uiutils.Def(p.Layout, "split") }}
+	{{ vSide := uiutils.Def(p.Side, "end") }}
+	{{ vMode := uiutils.Def(p.Mode, "signin") }}
+	{{ vSocial := uiutils.Def(p.Social, "none") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "div", Class: "w-full", Attrs: uiutils.Attrs("data-testid", "auth-layout", "data-layout", vLayout)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "py-12")), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			if uiutils.Eq(vLayout, "split") {
+				@grid.Grid(grid.GridProps{Cols: "1-2", Class: "items-stretch gap-8"}) {
+					@box.Box(box.BoxProps{Class: "mx-auto flex w-full max-w-sm items-center"}) {
+						@AuthCard(AuthCardProps{Id: vId, Title: vTitle, Text: vText, Submit: vSubmit, SwitchText: uiutils.Get(vSwitchTo, "text"), SwitchLink: uiutils.Get(vSwitchTo, "link"), SwitchHref: uiutils.Get(vSwitchTo, "href"), Labels: vLabels, Mode: vMode, Layout: "plain", Social: vSocial, Level: vLevel, LandmarkLabel: vLandmarkLabel})
+					}
+					@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: uiutils.S(uiutils.Cnv("justify-end rounded bg-muted p-8", uiutils.Cond(uiutils.T(uiutils.Eq(vSide, "start")), "md:order-first", "md:order-last"))), Attrs: uiutils.Attrs("data-testid", "visual")}) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vVisual, "title"), Ratio: "4/3"})
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "2xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vVisual, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vVisual, "text")) }
+						}
+					}
+				}
+			} else if uiutils.Eq(vLayout, "centered") {
+				@box.Box(box.BoxProps{Class: "mx-auto w-full max-w-md rounded bg-muted p-6"}) {
+					@AuthCard(AuthCardProps{Id: vId, Title: vTitle, Text: vText, Submit: vSubmit, SwitchText: uiutils.Get(vSwitchTo, "text"), SwitchLink: uiutils.Get(vSwitchTo, "link"), SwitchHref: uiutils.Get(vSwitchTo, "href"), Labels: vLabels, Mode: vMode, Social: vSocial, Level: vLevel, LandmarkLabel: vLandmarkLabel})
+				}
+			} else {
+				@box.Box(box.BoxProps{Class: "mx-auto w-full max-w-sm"}) {
+					@AuthCard(AuthCardProps{Id: vId, Title: vTitle, Text: vText, Submit: vSubmit, SwitchText: uiutils.Get(vSwitchTo, "text"), SwitchLink: uiutils.Get(vSwitchTo, "link"), SwitchHref: uiutils.Get(vSwitchTo, "href"), Labels: vLabels, Mode: vMode, Layout: "plain", Social: vSocial, Level: vLevel, LandmarkLabel: vLandmarkLabel})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/avatar.templ b/packages/templ/ui/blocks/avatar.templ
new file mode 100644
index 0000000..a0ade78
--- /dev/null
+++ b/packages/templ/ui/blocks/avatar.templ
@@ -0,0 +1,28 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/avatar.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/image"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// AvatarProps are the props of Avatar; the values are the JSON shapes of the TypeScript props.
+type AvatarProps struct {
+	Src any `json:"src"`
+	Alt any `json:"alt"`
+	Size any `json:"size"`
+	Class string `json:"className"`
+}
+
+// An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round.
+templ Avatar(p AvatarProps) {
+	{{ vSrc := p.Src }}
+	{{ vAlt := uiutils.Def(p.Alt, "") }}
+	{{ vSize := uiutils.Def(p.Size, "default") }}
+	@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cnv(recipeAvatar.Of(map[string]any{"size": vSize}), p.Class)), Attrs: uiutils.Attrs("data-slot", "avatar")}) {
+		@image.Image(image.ImageProps{Src: uiutils.S(vSrc), Alt: uiutils.S(vAlt), Class: "size-full object-cover", Fit: "cover", Size: "auto", Loading: "eager", Decoding: "auto", Attrs: uiutils.Attrs("draggable", "false")})
+	}
+}
diff --git a/packages/templ/ui/blocks/backdrop.templ b/packages/templ/ui/blocks/backdrop.templ
new file mode 100644
index 0000000..7c6494b
--- /dev/null
+++ b/packages/templ/ui/blocks/backdrop.templ
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/backdrop.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// BackdropProps are the props of Backdrop; the values are the JSON shapes of the TypeScript props.
+type BackdropProps struct {
+	Kind any `json:"kind"`
+	Alt any `json:"alt"`
+}
+
+// A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of the block (rule 01).
+templ Backdrop(p BackdropProps) {
+	{{ vKind := uiutils.Def(p.Kind, "none") }}
+	{{ vAlt := uiutils.Def(p.Alt, "") }}
+	if uiutils.Eq(vKind, "image") {
+		@box.Box(box.BoxProps{Class: "pointer-events-none absolute inset-0 -z-10", Attrs: uiutils.Attrs("data-testid", "backdrop")}) {
+			@MediaFrame(MediaFrameProps{Alt: vAlt, Ratio: "21/9", Class: uiutils.Cnv("size-full rounded-none opacity-30")})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/badge-square.templ b/packages/templ/ui/blocks/badge-square.templ
new file mode 100644
index 0000000..4e04e6b
--- /dev/null
+++ b/packages/templ/ui/blocks/badge-square.templ
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/badge-square.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// BadgeSquareProps are the props of BadgeSquare; the values are the JSON shapes of the TypeScript props.
+type BadgeSquareProps struct {
+	Size any `json:"size"`
+	Class string `json:"className"`
+}
+
+// A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd).
+templ BadgeSquare(p BadgeSquareProps) {
+	{{ vSize := uiutils.Def(p.Size, "default") }}
+	@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cnv(recipeBadgeSquare.Of(map[string]any{"size": vSize}), p.Class)), Attrs: uiutils.Attrs("data-slot", "badge-square")}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/bar-chart.templ b/packages/templ/ui/blocks/bar-chart.templ
new file mode 100644
index 0000000..f27380d
--- /dev/null
+++ b/packages/templ/ui/blocks/bar-chart.templ
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/bar-chart.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// BarChartProps are the props of BarChart; the values are the JSON shapes of the TypeScript props.
+type BarChartProps struct {
+	Bars any `json:"bars"`
+	Label any `json:"label"`
+	Max any `json:"max"`
+	Height any `json:"height"`
+	Class string `json:"className"`
+}
+
+// A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image for assistive technology: `label` carries the summary, the bar values are in the captions and titles.
+templ BarChart(p BarChartProps) {
+	{{ vBars := p.Bars }}
+	{{ vLabel := p.Label }}
+	{{ vMax := p.Max }}
+	{{ vHeight := uiutils.Def(p.Height, float64(160)) }}
+	{{ vTop := any(uiutils.Max(float64(1), uiutils.Coalesce(vMax, uiutils.MaxBy(vBars, "value")))) }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("min-w-0", p.Class)), Attrs: uiutils.Attrs("data-slot", "bar-chart")}) {
+		@box.Box(box.BoxProps{Class: "flex min-w-0 items-end gap-2", Attrs: uiutils.Attrs("role", "img", "aria-label", vLabel, "style", uiutils.Css("height", vHeight, "px"))}) {
+			for _, vB := range uiutils.L(vBars) {
+				@box.Box(box.BoxProps{Class: "flex h-full min-w-0 flex-1 items-end", Attrs: uiutils.Attrs("title", uiutils.Coalesce(uiutils.Get(vB, "title"), uiutils.Get(vB, "label")))}) {
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("w-full rounded", uiutils.Cond(uiutils.T(uiutils.Get(vB, "muted")), "bg-muted-foreground", "bg-primary"))), Attrs: uiutils.Attrs("style", uiutils.Css("height", uiutils.Max(float64(2), uiutils.Round(uiutils.Mul(uiutils.Div(uiutils.Get(vB, "value"), vTop), float64(100)))), "%"), "data-bar", uiutils.Get(vB, "id"))})
+				}
+			}
+		}
+		@box.Box(box.BoxProps{Class: "mt-2 flex min-w-0 gap-2", Attrs: uiutils.Attrs("aria-hidden", "true")}) {
+			for _, vB := range uiutils.L(vBars) {
+				@box.Box(box.BoxProps{Class: "relative h-4 min-w-0 flex-1"}) {
+					@text.Text(text.TextProps{Class: "absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vB, "label")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/before-after.templ b/packages/templ/ui/blocks/before-after.templ
new file mode 100644
index 0000000..1c25210
--- /dev/null
+++ b/packages/templ/ui/blocks/before-after.templ
@@ -0,0 +1,116 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/before-after.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// BeforeAfterProps are the props of BeforeAfter; the values are the JSON shapes of the TypeScript props.
+type BeforeAfterProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Points any `json:"points"`
+	Empty any `json:"empty"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Icons any `json:"icons"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two cards, rows: one row per point), icons (show, hide), tone, density.
+templ BeforeAfter(p BeforeAfterProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vPoints := p.Points }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "cards") }}
+	{{ vIcons := uiutils.Def(p.Icons, "show") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vPoints), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "git-compare", Title: vEmpty})
+		} else if uiutils.Eq(vLayout, "cards") {
+			@grid.Grid(grid.GridProps{Cols: "1-2", Class: "items-stretch gap-4", Attrs: uiutils.Attrs("data-testid", "sides")}) {
+				@card.Card(card.CardProps{Variant: "muted", Class: uiutils.S(uiutils.Cnv("h-full", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "gap-4 p-4", ""))), Attrs: uiutils.Attrs("data-testid", "side", "data-side", "before")}) {
+					@card.CardContent(card.CardContentProps{Class: "flex flex-col gap-4"}) {
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "before")) }
+						}
+						@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-4 p-0"}) {
+							for _, vP := range uiutils.L(vPoints) {
+								@list.ListItem(list.ListItemProps{Class: "flex items-start gap-4", Attrs: uiutils.Attrs("data-testid", "item")}) {
+									if uiutils.Eq(vIcons, "show") {
+										@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "x", Size: 16, Class: "h-lh shrink-0 text-sm"})
+									}
+									@text.Text(text.TextProps{Size: "sm"}) {
+										{ uiutils.Text(uiutils.Get(vP, "before")) }
+									}
+								}
+							}
+						}
+					}
+				}
+				@card.Card(card.CardProps{Variant: "default", Class: uiutils.S(uiutils.Cnv("h-full", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "gap-4 p-4", ""))), Attrs: uiutils.Attrs("data-testid", "side", "data-side", "after")}) {
+					@card.CardContent(card.CardContentProps{Class: "flex flex-col gap-4"}) {
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "after")) }
+						}
+						@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-4 p-0"}) {
+							for _, vP := range uiutils.L(vPoints) {
+								@list.ListItem(list.ListItemProps{Class: "flex items-start gap-4", Attrs: uiutils.Attrs("data-testid", "item")}) {
+									if uiutils.Eq(vIcons, "show") {
+										@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "check", Size: 16, Class: "h-lh shrink-0 text-sm"})
+									}
+									@text.Text(text.TextProps{Size: "sm"}) {
+										{ uiutils.Text(uiutils.Get(vP, "after")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		} else {
+			@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "rows")}) {
+				for _, vP := range uiutils.L(vPoints) {
+					@grid.Grid(grid.GridProps{Cols: "1-3", Class: uiutils.S(uiutils.Cnv("items-center gap-4", "rounded bg-card inset-ring inset-ring-border p-4")), Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@text.Text(text.TextProps{Size: "base", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vP, "title")) }
+						}
+						@group.Group(group.GroupProps{Gap: "2", Align: "start"}) {
+							if uiutils.Eq(vIcons, "show") {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "x", Size: 16, Class: "h-lh shrink-0 text-sm text-muted-foreground"})
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vP, "before")) }
+							}
+						}
+						@group.Group(group.GroupProps{Gap: "2", Align: "start"}) {
+							if uiutils.Eq(vIcons, "show") {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "check", Size: 16, Class: "h-lh shrink-0 text-sm text-primary"})
+							}
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vP, "after")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/bento-grid.templ b/packages/templ/ui/blocks/bento-grid.templ
new file mode 100644
index 0000000..c19f277
--- /dev/null
+++ b/packages/templ/ui/blocks/bento-grid.templ
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/bento-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// BentoGridProps are the props of BentoGrid; the values are the JSON shapes of the TypeScript props.
+type BentoGridProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Tiles any `json:"tiles"`
+	Empty any `json:"empty"`
+	Layout any `json:"layout"`
+	Media any `json:"media"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+var bentoGridSpan = map[string]any{
+	"large": "md:col-span-2 md:row-span-2",
+	"wide": "md:col-span-2",
+	"small": "",
+}
+
+// Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in the large tiles), tone, density.
+templ BentoGrid(p BentoGridProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vTiles := p.Tiles }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLayout := uiutils.Def(p.Layout, "bento") }}
+	{{ vMedia := uiutils.Def(p.Media, "none") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vTiles), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "layout-dashboard", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: "1-4", Class: "auto-rows-fr gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vTile := range uiutils.L(vTiles) {
+					@card.Card(card.CardProps{Variant: "default", Class: uiutils.S(uiutils.Cnv("h-full overflow-hidden", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "gap-4 p-4", ""), uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "bento")), uiutils.At(bentoGridSpan, uiutils.Get(vTile, "size")), ""))), Attrs: uiutils.Attrs("data-testid", "item", "data-size", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "bento")), uiutils.Get(vTile, "size"), "even"))}) {
+						@card.CardContent(card.CardContentProps{Class: "flex h-full flex-col gap-4"}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vTile, "icon")), Size: 24})
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vTile, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vTile, "text")) }
+							}
+							if uiutils.T(uiutils.And(uiutils.Eq(vMedia, "image"), uiutils.Or(uiutils.Eq(uiutils.Get(vTile, "size"), "large"), uiutils.Eq(vLayout, "even")))) {
+								@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vTile, "title"), Ratio: "4/3", Class: uiutils.Cnv("mt-auto")})
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/bottom-nav.templ b/packages/templ/ui/blocks/bottom-nav.templ
new file mode 100644
index 0000000..7377654
--- /dev/null
+++ b/packages/templ/ui/blocks/bottom-nav.templ
@@ -0,0 +1,50 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/bottom-nav.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// BottomNavProps are the props of BottomNav; the values are the JSON shapes of the TypeScript props.
+type BottomNavProps struct {
+	Label any `json:"label"`
+	Tabs any `json:"tabs"`
+	Current any `json:"current"`
+	Labels any `json:"labels"`
+	Position any `json:"position"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show, hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.
+templ BottomNav(p BottomNavProps) {
+	{{ vLabel := p.Label }}
+	{{ vTabs := p.Tabs }}
+	{{ vCurrent := uiutils.Def(p.Current, "") }}
+	{{ vLabels := uiutils.Def(p.Labels, "show") }}
+	{{ vPosition := uiutils.Def(p.Position, "static") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Gt(uiutils.Len(vTabs), float64(0)) {
+		@block.Block(block.BlockProps{Tag: "nav", Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-md border-t border-border", uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "muted")), "bg-muted", "bg-background"), uiutils.Cond(uiutils.T(uiutils.Eq(vPosition, "sticky")), "sticky bottom-0 z-40", ""))), Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vLabel), "data-testid", "bottom-nav", "data-position", vPosition)}) {
+			@list.List(list.ListProps{Class: "m-0 grid list-none grid-flow-col auto-cols-fr p-0", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vTab := range uiutils.L(vTabs) {
+					@list.ListItem(list.ListItemProps{}) {
+						@MenuEntry(MenuEntryProps{Href: uiutils.Get(vTab, "href"), Class: uiutils.Cnv(uiutils.Cnv("flex flex-col items-center gap-2 py-2 text-xs", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vTab, "id"), vCurrent)), "font-semibold text-primary", "text-muted-foreground"))), Current: uiutils.Eq(uiutils.Get(vTab, "id"), vCurrent), Testid: "item"}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vTab, "icon")), Size: 20})
+							@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLabels, "hide")), "sr-only", ""))}) {
+								{ uiutils.Text(uiutils.Get(vTab, "name")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/bulk-bar.templ b/packages/templ/ui/blocks/bulk-bar.templ
new file mode 100644
index 0000000..0f52e96
--- /dev/null
+++ b/packages/templ/ui/blocks/bulk-bar.templ
@@ -0,0 +1,36 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/bulk-bar.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// BulkBarProps are the props of BulkBar; the values are the JSON shapes of the TypeScript props.
+type BulkBarProps struct {
+	Label any `json:"label"`
+	ClearLabel any `json:"clearLabel"`
+	Class string `json:"className"`
+}
+
+// The "N selected" bar of a list: a count, a clear button and the bulk actions (children). All text comes in through props.
+templ BulkBar(p BulkBarProps) {
+	{{ vLabel := p.Label }}
+	{{ vClearLabel := p.ClearLabel }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background", p.Class)), Attrs: uiutils.Attrs("role", "region", "aria-label", vLabel, "aria-live", "polite", "data-slot", "bulk-bar", "data-testid", "bulk-bar")}) {
+		@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", Type: "button", AriaLabel: uiutils.S(vClearLabel), Class: "text-background hover:bg-background/15 hover:text-background"}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "x", Size: 16})
+		}
+		@inline.Inline(inline.InlineProps{Attrs: uiutils.Attrs("data-testid", "bulk-count")}) {
+			{ uiutils.Text(vLabel) }
+		}
+		@inline.Inline(inline.InlineProps{Class: "ml-auto flex flex-wrap items-center gap-2"}) {
+			{ children... }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/cart-drawer.templ b/packages/templ/ui/blocks/cart-drawer.templ
new file mode 100644
index 0000000..103228f
--- /dev/null
+++ b/packages/templ/ui/blocks/cart-drawer.templ
@@ -0,0 +1,73 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cart-drawer.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CartDrawerProps are the props of CartDrawer; the values are the JSON shapes of the TypeScript props.
+type CartDrawerProps struct {
+	Id any `json:"id"`
+	Lines any `json:"lines"`
+	Rows any `json:"rows"`
+	Labels any `json:"labels"`
+	Drawer any `json:"drawer"`
+	State any `json:"state"`
+	Media any `json:"media"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).
+templ CartDrawer(p CartDrawerProps) {
+	{{ vId := p.Id }}
+	{{ vLines := p.Lines }}
+	{{ vRows := p.Rows }}
+	{{ vLabels := p.Labels }}
+	{{ vDrawer := p.Drawer }}
+	{{ vState := uiutils.Def(p.State, "filled") }}
+	{{ vMedia := uiutils.Def(p.Media, "image") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Class: "py-8", Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, uiutils.Get(vDrawer, "title")), "data-testid", "section")}) {
+		@container.Container(container.ContainerProps{Class: "mx-auto w-full max-w-6xl px-4", Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@box.Box(box.BoxProps{Class: "flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border"}) {
+				@box.Box(box.BoxProps{Class: "hidden flex-1 flex-col gap-4 p-8 sm:flex", Attrs: uiutils.Attrs("aria-hidden", "true")}) {
+					@box.Box(box.BoxProps{Class: "h-8 w-48 rounded bg-background"})
+					@box.Box(box.BoxProps{Class: "h-40 rounded bg-background"})
+					@box.Box(box.BoxProps{Class: "h-40 rounded bg-background"})
+				}
+				@box.Box(box.BoxProps{Class: "flex w-full flex-col bg-background shadow-lg sm:max-w-sm", Attrs: uiutils.Attrs("role", "group", "aria-label", uiutils.Get(vDrawer, "title"), "data-testid", "drawer")}) {
+					@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between", Class: "border-b border-border p-4"}) {
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "lg", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vDrawer, "title")) }
+						}
+						@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", AriaLabel: uiutils.S(uiutils.Get(vDrawer, "close"))}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "x", Size: 16})
+						}
+					}
+					if uiutils.T(uiutils.Or(uiutils.Eq(vState, "empty"), uiutils.Eq(uiutils.Len(vLines), float64(0)))) {
+						@box.Box(box.BoxProps{Class: "flex flex-1 flex-col justify-center p-4", Attrs: uiutils.Attrs("data-testid", "empty")}) {
+							@EmptyState(EmptyStateProps{Icon: "shopping-bag", Title: uiutils.Get(vDrawer, "empty"), Text: uiutils.Get(vDrawer, "emptyText"), Action: cartDrawerFill1(p, vDrawer)})
+						}
+					} else {
+						@DrawerLines(DrawerLinesProps{Field: uiutils.Tpl("{0}-qty", vId), Lines: vLines, Rows: vRows, Labels: vLabels, Drawer: vDrawer, Media: vMedia})
+					}
+				}
+			}
+		}
+	}
+}
+
+templ cartDrawerFill1(p CartDrawerProps, vDrawer any) {
+	@button.Button(button.ButtonProps{Variant: "outline", Size: "default"}) {
+		{ uiutils.Text(uiutils.Get(vDrawer, "browse")) }
+	}
+}
diff --git a/packages/templ/ui/blocks/cart-list.templ b/packages/templ/ui/blocks/cart-list.templ
new file mode 100644
index 0000000..892a4e5
--- /dev/null
+++ b/packages/templ/ui/blocks/cart-list.templ
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cart-list.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CartListProps are the props of CartList; the values are the JSON shapes of the TypeScript props.
+type CartListProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lines any `json:"lines"`
+	Empty any `json:"empty"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Media any `json:"media"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button. Axes: layout (table, cards), media (image, none), density, tone.
+templ CartList(p CartListProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLines := p.Lines }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "table") }}
+	{{ vMedia := uiutils.Def(p.Media, "image") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vLines), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "shopping-cart", Title: vEmpty})
+		} else if uiutils.Eq(vLayout, "table") {
+			@CartTable(CartTableProps{Field: uiutils.Tpl("{0}-qty", vId), Lines: vLines, Labels: vLabels, Media: vMedia, Density: vDensity})
+		} else {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "cart-cards")}) {
+				for _, vLine := range uiutils.L(vLines) {
+					@card.Card(card.CardProps{Variant: "default", Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@card.CardContent(card.CardContentProps{Class: "flex flex-wrap items-center gap-4"}) {
+							if uiutils.Eq(vMedia, "image") {
+								@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vLine, "name"), Ratio: "1/1", Class: uiutils.Cnv("size-16 shrink-0")})
+							}
+							@stack.Stack(stack.StackProps{Gap: "0", Class: "min-w-40 flex-1"}) {
+								@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+									{ uiutils.Text(uiutils.Get(vLine, "name")) }
+								}
+								@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vLine, "variant")) }
+								}
+								@text.Text(text.TextProps{Size: "sm"}) {
+									{ uiutils.Text(uiutils.Money(uiutils.Get(vLine, "price"), uiutils.Get(vLine, "currency"))) }
+								}
+							}
+							@NumberField(NumberFieldProps{Value: uiutils.Str(uiutils.Get(vLine, "qty")), Name: uiutils.Tpl("{0}-qty-{1}", vId, uiutils.Get(vLine, "id")), Min: "1", Label: uiutils.Get(vLabels, "qty"), Decrease: uiutils.Get(vLabels, "decrease"), Increase: uiutils.Get(vLabels, "increase")})
+							@text.Text(text.TextProps{Size: "base", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Money(uiutils.Mul(uiutils.Get(vLine, "price"), uiutils.Get(vLine, "qty")), uiutils.Get(vLine, "currency"))) }
+							}
+							@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", AriaLabel: uiutils.S(uiutils.Get(vLabels, "remove")), Attrs: uiutils.Attrs("data-testid", "remove")}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "x", Size: 16})
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/cart-summary-card.templ b/packages/templ/ui/blocks/cart-summary-card.templ
new file mode 100644
index 0000000..c5aa710
--- /dev/null
+++ b/packages/templ/ui/blocks/cart-summary-card.templ
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cart-summary-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CartSummaryCardProps are the props of CartSummaryCard; the values are the JSON shapes of the TypeScript props.
+type CartSummaryCardProps struct {
+	Lines any `json:"lines"`
+	Rows any `json:"rows"`
+	Promos any `json:"promos"`
+	Labels any `json:"labels"`
+	Items any `json:"items"`
+	Promo any `json:"promo"`
+	Field any `json:"field"`
+	Progress any `json:"progress"`
+	Value any `json:"value"`
+}
+
+// The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.
+templ CartSummaryCard(p CartSummaryCardProps) {
+	{{ vLines := p.Lines }}
+	{{ vRows := p.Rows }}
+	{{ vPromos := p.Promos }}
+	{{ vLabels := p.Labels }}
+	{{ vItems := uiutils.Def(p.Items, "hide") }}
+	{{ vPromo := uiutils.Def(p.Promo, "show") }}
+	{{ vField := uiutils.Def(p.Field, "promo") }}
+	{{ vProgress := uiutils.Def(p.Progress, "show") }}
+	{{ vValue := uiutils.Def(p.Value, float64(70)) }}
+	@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch", Class: "rounded bg-card inset-ring inset-ring-border p-6", Attrs: uiutils.Attrs("data-testid", "summary")}) {
+		@group.Group(group.GroupProps{Gap: "4", Align: "baseline", Justify: "between"}) {
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "lg", Weight: "semibold"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "title")) }
+			}
+			@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "items"), uiutils.Str(uiutils.Len(vLines)))) }
+			}
+		}
+		if uiutils.T(uiutils.And(uiutils.Eq(vItems, "show"), uiutils.Gt(uiutils.Len(vLines), float64(0)))) {
+			@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col gap-4", Attrs: uiutils.Attrs("data-testid", "summary-lines")}) {
+				for _, vLine := range uiutils.L(vLines) {
+					@list.ListItem(list.ListItemProps{Class: "flex items-center gap-4 text-sm"}) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vLine, "name"), Ratio: "1/1", Class: uiutils.Cnv("size-12 shrink-0")})
+						@stack.Stack(stack.StackProps{Gap: "0", Class: "flex-1"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vLine, "name")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Tpl("{0} x {1}", uiutils.Get(vLine, "qty"), uiutils.Money(uiutils.Get(vLine, "price"), uiutils.Get(vLine, "currency")))) }
+							}
+						}
+						@inline.Inline(inline.InlineProps{Class: "font-medium"}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Mul(uiutils.Get(vLine, "price"), uiutils.Get(vLine, "qty")), uiutils.Get(vLine, "currency"))) }
+						}
+					}
+				}
+			}
+		}
+		if uiutils.Eq(vPromo, "show") {
+			@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "promo")}) {
+				@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+					@input.Input(input.InputProps{Type: "text", Name: uiutils.S(vField), AriaLabel: uiutils.S(uiutils.Get(vLabels, "promo")), Placeholder: uiutils.S(uiutils.Get(vLabels, "promo")), Class: "min-w-0 flex-1"})
+					@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Type: "button"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "apply")) }
+					}
+				}
+				if uiutils.Gt(uiutils.Len(vPromos), float64(0)) {
+					@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: "flex-wrap"}) {
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "codes")) }
+						}
+						for _, vC := range uiutils.L(vPromos) {
+							@badge.Badge(badge.BadgeProps{Variant: "outline", Size: "sm", Attrs: uiutils.Attrs("data-testid", "code")}) {
+								{ uiutils.Text(uiutils.Get(vC, "code")) }
+							}
+						}
+					}
+				}
+			}
+		}
+		if uiutils.Eq(vProgress, "show") {
+			@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Class: "rounded bg-muted p-4", Attrs: uiutils.Attrs("data-testid", "progress")}) {
+				@text.Text(text.TextProps{Size: "sm"}) {
+					{ uiutils.Text(uiutils.Get(vLabels, "progress")) }
+				}
+				@form.Progress(form.ProgressProps{Value: uiutils.S(uiutils.Str(vValue)), Max: "100", Attrs: uiutils.Attrs("aria-label", uiutils.Get(vLabels, "progress"))})
+			}
+		}
+		if uiutils.Gt(uiutils.Len(vRows), float64(0)) {
+			@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col gap-2"}) {
+				for _, vRow := range uiutils.L(vRows) {
+					@list.ListItem(list.ListItemProps{Class: uiutils.S(uiutils.Cnv("flex items-center justify-between gap-4", uiutils.Cond(uiutils.T(uiutils.Get(vRow, "strong")), "border-t border-border pt-4 text-base font-bold", "text-sm text-muted-foreground"))), Attrs: uiutils.Attrs("data-testid", "row")}) {
+						@inline.Inline(inline.InlineProps{}) {
+							{ uiutils.Text(uiutils.Get(vRow, "label")) }
+						}
+						@inline.Inline(inline.InlineProps{}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vRow, "amount"), uiutils.Get(vRow, "currency"))) }
+						}
+					}
+				}
+			}
+		}
+		@button.Button(button.ButtonProps{Variant: "default", Size: "lg", Class: "w-full", Attrs: uiutils.Attrs("data-testid", "checkout")}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "checkout")) }
+		}
+		@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "note")) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/cart-table.templ b/packages/templ/ui/blocks/cart-table.templ
new file mode 100644
index 0000000..5584660
--- /dev/null
+++ b/packages/templ/ui/blocks/cart-table.templ
@@ -0,0 +1,109 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cart-table.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/table"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CartTableProps are the props of CartTable; the values are the JSON shapes of the TypeScript props.
+type CartTableProps struct {
+	Lines any `json:"lines"`
+	Labels any `json:"labels"`
+	Media any `json:"media"`
+	Density any `json:"density"`
+	Field any `json:"field"`
+}
+
+// The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a remove button.
+templ CartTable(p CartTableProps) {
+	{{ vLines := p.Lines }}
+	{{ vLabels := p.Labels }}
+	{{ vMedia := uiutils.Def(p.Media, "image") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vField := uiutils.Def(p.Field, "qty") }}
+	@box.Box(box.BoxProps{Class: "w-full overflow-x-auto"}) {
+		@table.Table(table.TableProps{Class: "w-full text-left text-sm", Attrs: uiutils.Attrs("data-testid", "cart-table")}) {
+			@table.TableCaption(table.TableCaptionProps{Class: "sr-only"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "caption")) }
+			}
+			@table.TableHead(table.TableHeadProps{}) {
+				@table.TableRow(table.TableRowProps{}) {
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "product")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "hidden py-2 sm:table-cell"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "price")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "qty")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "total")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						@inline.Inline(inline.InlineProps{Class: "sr-only"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "remove")) }
+						}
+					}
+				}
+			}
+			@table.TableBody(table.TableBodyProps{}) {
+				for _, vLine := range uiutils.L(vLines) {
+					@table.TableRow(table.TableRowProps{Class: "border-t border-border", Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@table.TableCell(table.TableCellProps{Class: uiutils.S(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-2", "py-4")))}) {
+							@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+								if uiutils.Eq(vMedia, "image") {
+									@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vLine, "name"), Ratio: "1/1", Class: uiutils.Cnv("hidden size-14 shrink-0 sm:block")})
+								}
+								@stack.Stack(stack.StackProps{Gap: "0"}) {
+									@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vLine, "name")) }
+									}
+									@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+										{ uiutils.Text(uiutils.Get(vLine, "variant")) }
+									}
+								}
+							}
+						}
+						@table.TableCell(table.TableCellProps{Class: "hidden sm:table-cell"}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vLine, "price"), uiutils.Get(vLine, "currency"))) }
+						}
+						@table.TableCell(table.TableCellProps{}) {
+							@NumberField(NumberFieldProps{Value: uiutils.Str(uiutils.Get(vLine, "qty")), Name: uiutils.Tpl("{0}-{1}", vField, uiutils.Get(vLine, "id")), Min: "1", Label: uiutils.Get(vLabels, "qty"), Decrease: uiutils.Get(vLabels, "decrease"), Increase: uiutils.Get(vLabels, "increase")})
+						}
+						@table.TableCell(table.TableCellProps{Class: "font-semibold"}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Mul(uiutils.Get(vLine, "price"), uiutils.Get(vLine, "qty")), uiutils.Get(vLine, "currency"))) }
+						}
+						@table.TableCell(table.TableCellProps{Class: "text-right"}) {
+							@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", AriaLabel: uiutils.S(uiutils.Get(vLabels, "remove")), Attrs: uiutils.Attrs("data-testid", "remove")}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "x", Size: 16})
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	if uiutils.Gt(uiutils.Len(vLines), float64(0)) {
+		@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between", Class: "mt-4 flex-wrap border-t border-border pt-4", Attrs: uiutils.Attrs("data-testid", "cart-footer")}) {
+			@text.Text(text.TextProps{Size: "base", Weight: "bold", Attrs: uiutils.Attrs("data-testid", "subtotal")}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "subtotal")) }
+				{ uiutils.Text(" ") }
+				{ uiutils.Text(uiutils.Money(uiutils.SumBy(vLines, "price", "qty"), uiutils.FirstOf(vLines, "currency"))) }
+			}
+			@button.Button(button.ButtonProps{Variant: "default", Size: "default", Attrs: uiutils.Attrs("data-testid", "checkout")}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "checkout")) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/category-nav.templ b/packages/templ/ui/blocks/category-nav.templ
new file mode 100644
index 0000000..6492589
--- /dev/null
+++ b/packages/templ/ui/blocks/category-nav.templ
@@ -0,0 +1,90 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/category-nav.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	selectfield "github.com/ui8kit/codegen/packages/templ/ui/ui/select"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CategoryNavProps are the props of CategoryNav; the values are the JSON shapes of the TypeScript props.
+type CategoryNavProps struct {
+	Label any `json:"label"`
+	Categories any `json:"categories"`
+	Current any `json:"current"`
+	Layout any `json:"layout"`
+	Count any `json:"count"`
+	Icon any `json:"icon"`
+	Density any `json:"density"`
+	Tools any `json:"tools"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon, or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes: layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.
+templ CategoryNav(p CategoryNavProps) {
+	{{ vLabel := p.Label }}
+	{{ vCategories := p.Categories }}
+	{{ vCurrent := uiutils.Def(p.Current, "all") }}
+	{{ vLayout := uiutils.Def(p.Layout, "chips") }}
+	{{ vCount := uiutils.Def(p.Count, "show") }}
+	{{ vIcon := uiutils.Def(p.Icon, "show") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vTools := p.Tools }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vChipLike := any(uiutils.Or(uiutils.Eq(vLayout, "chips"), uiutils.Eq(vLayout, "toolbar"))) }}
+	{{ vTiles := any(uiutils.Eq(vLayout, "tiles")) }}
+	{{ vLinkShape := any(uiutils.Cond(uiutils.T(vChipLike), "inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "bar")), "inline-flex items-center gap-2 -mb-px border-b px-1 py-2", uiutils.Cond(uiutils.T(vTiles), "flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border", "inline-flex w-full items-center gap-2 rounded px-3 py-2")))) }}
+	{{ vCurrentLook := any(uiutils.Cond(uiutils.T(vChipLike), "bg-primary text-primary-foreground", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "bar")), "border-foreground font-semibold", uiutils.Cond(uiutils.T(vTiles), "inset-ring-foreground font-semibold", "bg-muted font-semibold")))) }}
+	{{ vOtherLook := any(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "bar")), "border-transparent", "")) }}
+	{{ vListShape := any(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "sidebar")), "flex flex-col gap-2", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "bar")), "flex flex-wrap gap-2 gap-x-4 border-b border-border", uiutils.Cond(uiutils.T(vTiles), "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6", "flex flex-wrap gap-2")))) }}
+	@block.Block(block.BlockProps{Tag: "nav", Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vLabel), "data-testid", "category-nav", "data-layout", vLayout)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-2", "py-4"))), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			if uiutils.Eq(vLayout, "toolbar") {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "mb-4 flex-wrap", Attrs: uiutils.Attrs("data-testid", "toolbar")}) {
+					@SearchField(SearchFieldProps{Value: uiutils.Coalesce(uiutils.Get(vTools, "query"), ""), Label: uiutils.Coalesce(uiutils.Get(vTools, "search"), ""), Placeholder: uiutils.Get(vTools, "search")})
+					@selectfield.Select(selectfield.SelectProps{Name: "sort", Size: "sm", AriaLabel: uiutils.S(uiutils.Get(vTools, "sort")), Class: "w-48"}) {
+						@selectfield.SelectOption(selectfield.SelectOptionProps{Value: "sort", Label: uiutils.S(uiutils.Get(vTools, "sortValue")), Selected: true})
+					}
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vTools, "shown")) }
+					}
+				}
+			}
+			if uiutils.Gt(uiutils.Len(vCategories), float64(0)) {
+				@list.List(list.ListProps{Tag: "ul", Class: uiutils.S(vListShape), Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for _, vC := range uiutils.L(vCategories) {
+						@list.ListItem(list.ListItemProps{}) {
+							@MenuEntry(MenuEntryProps{Href: uiutils.Get(vC, "href"), Class: uiutils.Cnv(uiutils.Cnv("text-sm", vLinkShape, uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vC, "id"), vCurrent)), vCurrentLook, vOtherLook))), Current: uiutils.Eq(uiutils.Get(vC, "id"), vCurrent), Testid: "item", Block: true}) {
+								if uiutils.Eq(vIcon, "show") {
+									if uiutils.T(vTiles) {
+										@inline.Inline(inline.InlineProps{Class: "flex size-10 items-center justify-center rounded bg-muted"}) {
+											@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vC, "icon")), Size: 20})
+										}
+									} else {
+										@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vC, "icon")), Size: 16})
+									}
+								}
+								@inline.Inline(inline.InlineProps{}) {
+									{ uiutils.Text(uiutils.Get(vC, "name")) }
+								}
+								if uiutils.Eq(vCount, "show") {
+									@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+										{ uiutils.Text(uiutils.Str(uiutils.Get(vC, "count"))) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/chart-panel.templ b/packages/templ/ui/blocks/chart-panel.templ
new file mode 100644
index 0000000..537e0c8
--- /dev/null
+++ b/packages/templ/ui/blocks/chart-panel.templ
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/chart-panel.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ChartPanelProps are the props of ChartPanel; the values are the JSON shapes of the TypeScript props.
+type ChartPanelProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Series any `json:"series"`
+	Empty any `json:"empty"`
+	Summary any `json:"summary"`
+	Percent any `json:"percent"`
+	Chart any `json:"chart"`
+	Size any `json:"size"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart (bars, meters), size (default, compact), tone (default, muted).
+templ ChartPanel(p ChartPanelProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vSeries := p.Series }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vSummary := p.Summary }}
+	{{ vPercent := p.Percent }}
+	{{ vChart := uiutils.Def(p.Chart, "bars") }}
+	{{ vSize := uiutils.Def(p.Size, "default") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Cond(uiutils.T(uiutils.And(vTitle, vId)), uiutils.Tpl("{0}-t", vId), nil)), "data-testid", "panel-section", "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: "mx-auto w-full max-w-6xl px-4 py-8", Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@Panel(PanelProps{Title: vTitle, Description: vText, Id: vId, Class: uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "muted")), "bg-muted", ""))}) {
+				if uiutils.Eq(uiutils.Len(vSeries), float64(0)) {
+					@EmptyState(EmptyStateProps{Icon: "chart-column", Title: vEmpty})
+				} else if uiutils.Eq(vChart, "bars") {
+					@BarChart(BarChartProps{Bars: vSeries, Label: vSummary, Height: uiutils.Cond(uiutils.T(uiutils.Eq(vSize, "compact")), float64(96), float64(176))})
+				} else {
+					@stack.Stack(stack.StackProps{Gap: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vSize, "compact")), "0", "2")), Align: "stretch", Attrs: uiutils.Attrs("data-testid", "items")}) {
+						for _, vS := range uiutils.L(vSeries) {
+							@MeterRow(MeterRowProps{Label: uiutils.Get(vS, "label"), Value: uiutils.Get(vS, "value"), Caption: uiutils.Tpl(vPercent, uiutils.Get(vS, "value"))})
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/checklist.templ b/packages/templ/ui/blocks/checklist.templ
new file mode 100644
index 0000000..dd3fbd0
--- /dev/null
+++ b/packages/templ/ui/blocks/checklist.templ
@@ -0,0 +1,93 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/checklist.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/disclosure"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/iconbadge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ChecklistProps are the props of Checklist; the values are the JSON shapes of the TypeScript props.
+type ChecklistProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Tasks any `json:"tasks"`
+	Empty any `json:"empty"`
+	ProgressLabel any `json:"progressLabel"`
+	Layout any `json:"layout"`
+	Progress any `json:"progress"`
+	Marker any `json:"marker"`
+	Detail any `json:"detail"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain), progress (bar, text, none), marker (check, number), tone (default, muted).
+templ Checklist(p ChecklistProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vTasks := p.Tasks }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vProgressLabel := p.ProgressLabel }}
+	{{ vLayout := uiutils.Def(p.Layout, "card") }}
+	{{ vProgress := uiutils.Def(p.Progress, "bar") }}
+	{{ vMarker := uiutils.Def(p.Marker, "check") }}
+	{{ vDetail := uiutils.Def(p.Detail, "always") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Measure: "2xl", LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vTasks), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "list-checks", Title: vEmpty})
+		} else {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "card")), "rounded bg-card p-6 inset-ring inset-ring-border", "")), Attrs: uiutils.Attrs("data-testid", "checklist")}) {
+				if uiutils.Eq(vProgress, "bar") {
+					@form.Progress(form.ProgressProps{Value: uiutils.S(uiutils.Str(uiutils.Round(uiutils.Div(uiutils.Mul(uiutils.Count(vTasks, "done"), float64(100)), uiutils.Len(vTasks))))), Max: "100", Attrs: uiutils.Attrs("aria-label", uiutils.Tpl(vProgressLabel, uiutils.Count(vTasks, "done"), uiutils.Len(vTasks)))})
+				}
+				if uiutils.Eq(vProgress, "text") {
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "progress-text")}) {
+						{ uiutils.Text(uiutils.Tpl(vProgressLabel, uiutils.Count(vTasks, "done"), uiutils.Len(vTasks))) }
+					}
+				}
+				@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-4 p-0", Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for vI, vTask := range uiutils.L(vTasks) {
+						@list.ListItem(list.ListItemProps{Class: "flex items-start gap-4", Attrs: uiutils.Attrs("data-testid", "item", "data-done", uiutils.Str(uiutils.Get(vTask, "done")))}) {
+							if uiutils.Eq(vMarker, "number") {
+								@iconbadge.IconBadge(iconbadge.IconBadgeProps{Variant: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Get(vTask, "done")), "primary", "outline")), Size: "xs"}) {
+									{ uiutils.Text(uiutils.Str(uiutils.Add(float64(vI), float64(1)))) }
+								}
+							} else {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Get(vTask, "done")), "circle-check", "circle")), Size: 24, Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Get(vTask, "done")), "shrink-0 text-primary", "shrink-0 text-muted-foreground"))})
+							}
+							if uiutils.Eq(vDetail, "expand") {
+								@disclosure.Disclosure(disclosure.DisclosureProps{Variant: "ghost", Class: "flex-1", Attrs: uiutils.Attrs("data-testid", "task-detail")}) {
+									@disclosure.Summary(disclosure.SummaryProps{Variant: "ghost"}) {
+										{ uiutils.Text(uiutils.Get(vTask, "title")) }
+									}
+									@text.Text(text.TextProps{Size: "sm", Class: "pb-2 text-muted-foreground"}) {
+										{ uiutils.Text(uiutils.Get(vTask, "text")) }
+									}
+								}
+							} else {
+								@stack.Stack(stack.StackProps{Gap: "0"}) {
+									@text.Text(text.TextProps{Size: "base", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vTask, "title")) }
+									}
+									@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+										{ uiutils.Text(uiutils.Get(vTask, "text")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/checkout-form.templ b/packages/templ/ui/blocks/checkout-form.templ
new file mode 100644
index 0000000..e4e641f
--- /dev/null
+++ b/packages/templ/ui/blocks/checkout-form.templ
@@ -0,0 +1,104 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/checkout-form.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/textarea"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CheckoutFormProps are the props of CheckoutForm; the values are the JSON shapes of the TypeScript props.
+type CheckoutFormProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Days any `json:"days"`
+	Payments any `json:"payments"`
+	Lines any `json:"lines"`
+	Rows any `json:"rows"`
+	Promos any `json:"promos"`
+	Labels any `json:"labels"`
+	Totals any `json:"totals"`
+	Layout any `json:"layout"`
+	Summary any `json:"summary"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps, beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards: each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.
+templ CheckoutForm(p CheckoutFormProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := uiutils.Def(p.Title, "") }}
+	{{ vDays := p.Days }}
+	{{ vPayments := p.Payments }}
+	{{ vLines := p.Lines }}
+	{{ vRows := p.Rows }}
+	{{ vPromos := p.Promos }}
+	{{ vLabels := p.Labels }}
+	{{ vTotals := p.Totals }}
+	{{ vLayout := uiutils.Def(p.Layout, "cards") }}
+	{{ vSummary := uiutils.Def(p.Summary, "aside") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"}) {
+			@form.Form(form.FormProps{Method: "dialog", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vSummary, "aside")), "flex flex-col gap-6 lg:col-span-2", "flex flex-col gap-6 lg:col-span-3")), Attrs: uiutils.Attrs("data-testid", "checkout-form")}) {
+				@CheckoutStep(CheckoutStepProps{Number: "1", Title: uiutils.Get(vLabels, "contacts"), Text: uiutils.Get(vLabels, "contactsText"), Layout: vLayout}) {
+					@grid.Grid(grid.GridProps{Cols: "1-2", Class: "gap-4"}) {
+						@Field(FieldProps{Label: uiutils.Get(vLabels, "name"), HtmlFor: uiutils.Tpl("{0}-name", vId)}) {
+							@input.Input(input.InputProps{Type: "text", Name: "name", Autocomplete: "name", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-name", vId), "data-testid", "field")})
+						}
+						@Field(FieldProps{Label: uiutils.Get(vLabels, "phone"), HtmlFor: uiutils.Tpl("{0}-phone", vId)}) {
+							@input.Input(input.InputProps{Type: "tel", Name: "phone", Autocomplete: "tel", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-phone", vId), "data-testid", "field")})
+						}
+						@Field(FieldProps{Label: uiutils.Get(vLabels, "email"), HtmlFor: uiutils.Tpl("{0}-email", vId)}) {
+							@input.Input(input.InputProps{Type: "email", Name: "email", Autocomplete: "email", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-email", vId), "data-testid", "field")})
+						}
+					}
+				}
+				@CheckoutStep(CheckoutStepProps{Number: "2", Title: uiutils.Get(vLabels, "address"), Text: uiutils.Get(vLabels, "addressText"), Layout: vLayout}) {
+					@Field(FieldProps{Label: uiutils.Get(vLabels, "street"), HtmlFor: uiutils.Tpl("{0}-street", vId)}) {
+						@input.Input(input.InputProps{Type: "text", Name: "street", Autocomplete: "address-line1", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-street", vId), "data-testid", "field")})
+					}
+					@grid.Grid(grid.GridProps{Cols: "2-4", Class: "gap-4"}) {
+						@Field(FieldProps{Label: uiutils.Get(vLabels, "house"), HtmlFor: uiutils.Tpl("{0}-house", vId)}) {
+							@input.Input(input.InputProps{Type: "text", Name: "house", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-house", vId), "data-testid", "field")})
+						}
+						@Field(FieldProps{Label: uiutils.Get(vLabels, "flat"), HtmlFor: uiutils.Tpl("{0}-flat", vId)}) {
+							@input.Input(input.InputProps{Type: "text", Name: "flat", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-flat", vId), "data-testid", "field")})
+						}
+						@Field(FieldProps{Label: uiutils.Get(vLabels, "entrance"), HtmlFor: uiutils.Tpl("{0}-entrance", vId)}) {
+							@input.Input(input.InputProps{Type: "text", Name: "entrance", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-entrance", vId), "data-testid", "field")})
+						}
+						@Field(FieldProps{Label: uiutils.Get(vLabels, "floor"), HtmlFor: uiutils.Tpl("{0}-floor", vId)}) {
+							@input.Input(input.InputProps{Type: "text", Name: "floor", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-floor", vId), "data-testid", "field")})
+						}
+					}
+					@Field(FieldProps{Label: uiutils.Get(vLabels, "comment"), HtmlFor: uiutils.Tpl("{0}-comment", vId)}) {
+						@textarea.Textarea(textarea.TextareaProps{Rows: 4, Name: "comment", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-comment", vId), "data-testid", "field")})
+					}
+				}
+				@CheckoutStep(CheckoutStepProps{Number: "3", Title: uiutils.Get(vLabels, "slot"), Text: uiutils.Get(vLabels, "slotText"), Layout: vLayout}) {
+					if uiutils.Gt(uiutils.Len(vDays), float64(0)) {
+						@SlotGrid(SlotGridProps{Days: vDays, Name: uiutils.Tpl("{0}-slot", vId), Item: "plain"})
+					}
+				}
+				@CheckoutStep(CheckoutStepProps{Number: "4", Title: uiutils.Get(vLabels, "payment"), Text: uiutils.Get(vLabels, "paymentText"), Layout: vLayout}) {
+					if uiutils.Gt(uiutils.Len(vPayments), float64(0)) {
+						@PaymentOptions(PaymentOptionsProps{Payments: vPayments, Name: uiutils.Tpl("{0}-payment", vId), Checked: "payment-card"})
+					}
+				}
+				@CheckoutSubmit(CheckoutSubmitProps{Id: vId, Consent: uiutils.Get(vLabels, "consent"), Submit: uiutils.Get(vLabels, "submit"), Legal: uiutils.Get(vLabels, "legal")})
+			}
+			if uiutils.Eq(vSummary, "aside") {
+				@box.Box(box.BoxProps{Class: "lg:sticky lg:top-8", Attrs: uiutils.Attrs("data-testid", "aside")}) {
+					@CartSummaryCard(CartSummaryCardProps{Field: uiutils.Tpl("{0}-promo", vId), Lines: vLines, Rows: vRows, Promos: vPromos, Labels: vTotals, Items: "show"})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/checkout-step.templ b/packages/templ/ui/blocks/checkout-step.templ
new file mode 100644
index 0000000..c5e6008
--- /dev/null
+++ b/packages/templ/ui/blocks/checkout-step.templ
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/checkout-step.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CheckoutStepProps are the props of CheckoutStep; the values are the JSON shapes of the TypeScript props.
+type CheckoutStepProps struct {
+	Number any `json:"number"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Layout any `json:"layout"`
+}
+
+// One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`). Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).
+templ CheckoutStep(p CheckoutStepProps) {
+	{{ vNumber := p.Number }}
+	{{ vTitle := p.Title }}
+	{{ vText := uiutils.Def(p.Text, "") }}
+	{{ vLayout := uiutils.Def(p.Layout, "cards") }}
+	@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "cards")), "rounded bg-card inset-ring inset-ring-border p-6", "border-t border-border pt-6")), Attrs: uiutils.Attrs("data-testid", "step")}) {
+		@group.Group(group.GroupProps{Gap: "4", Align: "start"}) {
+			if uiutils.Eq(vLayout, "numbered") {
+				@box.Box(box.BoxProps{Class: "flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground"}) {
+					{ uiutils.Text(vNumber) }
+				}
+			}
+			@stack.Stack(stack.StackProps{Gap: "0"}) {
+				@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "lg", Weight: "semibold"}) {
+					{ uiutils.Text(vTitle) }
+				}
+				if uiutils.T(vText) {
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(vText) }
+					}
+				}
+			}
+		}
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/checkout-submit.templ b/packages/templ/ui/blocks/checkout-submit.templ
new file mode 100644
index 0000000..feb885b
--- /dev/null
+++ b/packages/templ/ui/blocks/checkout-submit.templ
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/checkout-submit.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/checkbox"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CheckoutSubmitProps are the props of CheckoutSubmit; the values are the JSON shapes of the TypeScript props.
+type CheckoutSubmitProps struct {
+	Id any `json:"id"`
+	Consent any `json:"consent"`
+	Submit any `json:"submit"`
+	Legal any `json:"legal"`
+}
+
+// The end of the checkout form: the consent checkbox, the submit button and the legal line.
+templ CheckoutSubmit(p CheckoutSubmitProps) {
+	{{ vId := p.Id }}
+	{{ vConsent := p.Consent }}
+	{{ vSubmit := p.Submit }}
+	{{ vLegal := p.Legal }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "start"}) {
+		@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: uiutils.S(uiutils.Cnv("w-fit", ""))}) {
+			@checkbox.Checkbox(checkbox.CheckboxProps{Name: "consent", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-consent", vId))})
+			@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-consent", vId)), Class: "text-sm"}) {
+				{ uiutils.Text(vConsent) }
+			}
+		}
+		@button.Button(button.ButtonProps{Variant: "default", Size: "lg", Type: "submit", Attrs: uiutils.Attrs("data-testid", "submit")}) {
+			{ uiutils.Text(vSubmit) }
+		}
+		@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+			{ uiutils.Text(vLegal) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/code-window.templ b/packages/templ/ui/blocks/code-window.templ
new file mode 100644
index 0000000..828f47a
--- /dev/null
+++ b/packages/templ/ui/blocks/code-window.templ
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/code-window.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CodeWindowProps are the props of CodeWindow; the values are the JSON shapes of the TypeScript props.
+type CodeWindowProps struct {
+	Title any `json:"title"`
+	Prompt any `json:"prompt"`
+	Lines any `json:"lines"`
+	Class string `json:"className"`
+}
+
+// A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).
+templ CodeWindow(p CodeWindowProps) {
+	{{ vTitle := p.Title }}
+	{{ vPrompt := p.Prompt }}
+	{{ vLines := p.Lines }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border", p.Class)), Attrs: uiutils.Attrs("role", "group", "aria-label", vTitle, "data-slot", "code-window")}) {
+		@box.Box(box.BoxProps{Class: "flex items-center border-b border-border px-4 py-2"}) {
+			@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(vTitle) }
+			}
+		}
+		@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-4 font-mono text-sm"}) {
+			for _, vLine := range uiutils.L(vLines) {
+				@list.ListItem(list.ListItemProps{Class: uiutils.S(uiutils.Cnv("flex gap-2", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vLine, "kind"), "command")), "text-foreground", "text-muted-foreground"))), Attrs: uiutils.Attrs("data-kind", uiutils.Get(vLine, "kind"))}) {
+					if uiutils.Eq(uiutils.Get(vLine, "kind"), "command") {
+						@inline.Inline(inline.InlineProps{Class: "select-none text-muted-foreground"}) {
+							{ uiutils.Text(vPrompt) }
+						}
+					}
+					@inline.Inline(inline.InlineProps{}) {
+						{ uiutils.Text(uiutils.Get(vLine, "text")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/compare-mark.templ b/packages/templ/ui/blocks/compare-mark.templ
new file mode 100644
index 0000000..31cb3d5
--- /dev/null
+++ b/packages/templ/ui/blocks/compare-mark.templ
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/compare-mark.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CompareMarkProps are the props of CompareMark; the values are the JSON shapes of the TypeScript props.
+type CompareMarkProps struct {
+	Value any `json:"value"`
+	Yes any `json:"yes"`
+	No any `json:"no"`
+}
+
+// One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen readers), any other value is shown as text.
+templ CompareMark(p CompareMarkProps) {
+	{{ vValue := p.Value }}
+	{{ vYes := p.Yes }}
+	{{ vNo := p.No }}
+	if uiutils.Eq(vValue, "yes") {
+		@inline.Inline(inline.InlineProps{Class: "inline-flex items-center gap-2", Attrs: uiutils.Attrs("data-mark", "yes")}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "check", Size: 16, Class: "text-foreground"})
+			@inline.Inline(inline.InlineProps{Class: "sr-only"}) {
+				{ uiutils.Text(vYes) }
+			}
+		}
+	}
+	if uiutils.Eq(vValue, "no") {
+		@inline.Inline(inline.InlineProps{Class: "inline-flex items-center gap-2 text-muted-foreground", Attrs: uiutils.Attrs("data-mark", "no")}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "minus", Size: 16})
+			@inline.Inline(inline.InlineProps{Class: "sr-only"}) {
+				{ uiutils.Text(vNo) }
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(!uiutils.Eq(vValue, "yes"), !uiutils.Eq(vValue, "no"))) {
+		@inline.Inline(inline.InlineProps{}) {
+			{ uiutils.Text(vValue) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/comparison-table.templ b/packages/templ/ui/blocks/comparison-table.templ
new file mode 100644
index 0000000..228cf22
--- /dev/null
+++ b/packages/templ/ui/blocks/comparison-table.templ
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/comparison-table.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/table"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ComparisonTableProps are the props of ComparisonTable; the values are the JSON shapes of the TypeScript props.
+type ComparisonTableProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Rows any `json:"rows"`
+	Empty any `json:"empty"`
+	Labels any `json:"labels"`
+	Highlight any `json:"highlight"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle column), tone, density.
+templ ComparisonTable(p ComparisonTableProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vRows := p.Rows }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLabels := p.Labels }}
+	{{ vHighlight := uiutils.Def(p.Highlight, "none") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vRows), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "table", Title: vEmpty})
+		} else {
+			@box.Box(box.BoxProps{Class: "relative w-full overflow-x-auto"}) {
+				@table.Table(table.TableProps{Class: "w-full text-left text-sm", Attrs: uiutils.Attrs("data-testid", "compare")}) {
+					@table.TableCaption(table.TableCaptionProps{Class: "sr-only"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "caption")) }
+					}
+					@table.TableHead(table.TableHeadProps{}) {
+						@table.TableRow(table.TableRowProps{}) {
+							@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-4"}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "feature")) }
+							}
+							@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-4"}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "a")) }
+							}
+							@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: uiutils.S(uiutils.Cnv("py-4", uiutils.Cond(uiutils.T(uiutils.Eq(vHighlight, "middle")), "bg-muted", ""))), Attrs: uiutils.Attrs("data-highlight", uiutils.Cond(uiutils.T(uiutils.Eq(vHighlight, "middle")), "true", "false"))}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "b")) }
+							}
+							@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-4"}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "c")) }
+							}
+						}
+					}
+					@table.TableBody(table.TableBodyProps{}) {
+						for _, vRow := range uiutils.L(vRows) {
+							@table.TableRow(table.TableRowProps{Class: "border-t border-border", Attrs: uiutils.Attrs("data-testid", "item")}) {
+								@table.TableHeadCell(table.TableHeadCellProps{Scope: "row", Class: uiutils.S(uiutils.Cnv("font-medium", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-2", "py-4")))}) {
+									{ uiutils.Text(uiutils.Get(vRow, "label")) }
+								}
+								@table.TableCell(table.TableCellProps{Class: uiutils.S(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-2", "py-4")))}) {
+									@CompareMark(CompareMarkProps{Value: uiutils.Get(vRow, "a"), Yes: uiutils.Get(vLabels, "yes"), No: uiutils.Get(vLabels, "no")})
+								}
+								@table.TableCell(table.TableCellProps{Class: uiutils.S(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-2", "py-4"), uiutils.Cond(uiutils.T(uiutils.Eq(vHighlight, "middle")), "bg-muted font-semibold", "")))}) {
+									@CompareMark(CompareMarkProps{Value: uiutils.Get(vRow, "b"), Yes: uiutils.Get(vLabels, "yes"), No: uiutils.Get(vLabels, "no")})
+								}
+								@table.TableCell(table.TableCellProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-2", "py-4"))}) {
+									@CompareMark(CompareMarkProps{Value: uiutils.Get(vRow, "c"), Yes: uiutils.Get(vLabels, "yes"), No: uiutils.Get(vLabels, "no")})
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/contact-form.templ b/packages/templ/ui/blocks/contact-form.templ
new file mode 100644
index 0000000..85981c4
--- /dev/null
+++ b/packages/templ/ui/blocks/contact-form.templ
@@ -0,0 +1,101 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/contact-form.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/checkbox"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/textarea"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ContactFormProps are the props of ContactForm; the values are the JSON shapes of the TypeScript props.
+type ContactFormProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Labels any `json:"labels"`
+	Details any `json:"details"`
+	Layout any `json:"layout"`
+	Fields any `json:"fields"`
+	Terms any `json:"terms"`
+	Level any `json:"level"`
+	Page any `json:"page"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone (default, muted).
+templ ContactForm(p ContactFormProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vLabels := p.Labels }}
+	{{ vDetails := p.Details }}
+	{{ vLayout := uiutils.Def(p.Layout, "single") }}
+	{{ vFields := uiutils.Def(p.Fields, "full") }}
+	{{ vTerms := uiutils.Def(p.Terms, "hide") }}
+	{{ vLevel := uiutils.Def(p.Level, float64(2)) }}
+	{{ vPage := uiutils.Def(p.Page, "section") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vText, Heading: map[string]any{"level": vLevel}, Tone: vTone, Density: uiutils.Cond(uiutils.T(uiutils.Eq(vPage, "full")), "roomy", "default"), Align: uiutils.Cond(uiutils.T(uiutils.Eq(vPage, "full")), "center", "start"), Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "single")), "xl", "default"), LandmarkLabel: vLandmarkLabel}) {
+		@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "1-2", "1")), Class: "items-start gap-8"}) {
+			@form.Form(form.FormProps{Method: "dialog", Class: "w-full gap-4", Attrs: uiutils.Attrs("data-testid", "contact-form")}) {
+				if uiutils.Eq(vFields, "full") {
+					@Field(FieldProps{Label: uiutils.Get(vLabels, "name"), HtmlFor: uiutils.Tpl("{0}-name", vId)}) {
+						@input.Input(input.InputProps{Type: "text", Name: "name", Autocomplete: "name", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-name", vId), "data-testid", "field")})
+					}
+				}
+				@Field(FieldProps{Label: uiutils.Get(vLabels, "email"), HtmlFor: uiutils.Tpl("{0}-email", vId)}) {
+					@input.Input(input.InputProps{Type: "email", Name: "email", Autocomplete: "email", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-email", vId), "data-testid", "field")})
+				}
+				if uiutils.Eq(vFields, "full") {
+					@Field(FieldProps{Label: uiutils.Get(vLabels, "subject"), HtmlFor: uiutils.Tpl("{0}-subject", vId)}) {
+						@input.Input(input.InputProps{Type: "text", Name: "subject", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-subject", vId), "data-testid", "field")})
+					}
+				}
+				@Field(FieldProps{Label: uiutils.Get(vLabels, "message"), HtmlFor: uiutils.Tpl("{0}-message", vId)}) {
+					@textarea.Textarea(textarea.TextareaProps{Rows: 4, Name: "message", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-message", vId), "data-testid", "field")})
+				}
+				if uiutils.Eq(vTerms, "show") {
+					@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: uiutils.S(uiutils.Cnv("w-fit", ""))}) {
+						@checkbox.Checkbox(checkbox.CheckboxProps{Name: "consent", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-consent", vId))})
+						@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-consent", vId)), Class: "text-sm"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "consent")) }
+						}
+					}
+				}
+				@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "submit", Class: "w-fit", Attrs: uiutils.Attrs("data-testid", "submit")}) {
+					{ uiutils.Text(uiutils.Get(vLabels, "submit")) }
+				}
+			}
+			if uiutils.T(uiutils.And(uiutils.Eq(vLayout, "split"), uiutils.Gt(uiutils.Len(vDetails), float64(0)))) {
+				@stack.Stack(stack.StackProps{Gap: "4", Attrs: uiutils.Attrs("data-testid", "details")}) {
+					for _, vD := range uiutils.L(vDetails) {
+						@group.Group(group.GroupProps{Gap: "4", Align: "start", Attrs: uiutils.Attrs("data-testid", "detail")}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vD, "icon")), Size: 20})
+							@stack.Stack(stack.StackProps{Gap: "0"}) {
+								@text.Text(text.TextProps{Size: "base", Weight: "semibold"}) {
+									{ uiutils.Text(uiutils.Get(vD, "title")) }
+								}
+								@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vD, "text")) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/cookie-banner.templ b/packages/templ/ui/blocks/cookie-banner.templ
new file mode 100644
index 0000000..58a763a
--- /dev/null
+++ b/packages/templ/ui/blocks/cookie-banner.templ
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cookie-banner.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CookieBannerProps are the props of CookieBanner; the values are the JSON shapes of the TypeScript props.
+type CookieBannerProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Accept any `json:"accept"`
+	Decline any `json:"decline"`
+	Settings any `json:"settings"`
+	Layout any `json:"layout"`
+	Actions any `json:"actions"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings. Axes: layout (bar, card), actions (two, three), tone (default, muted).
+templ CookieBanner(p CookieBannerProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vAccept := p.Accept }}
+	{{ vDecline := p.Decline }}
+	{{ vSettings := p.Settings }}
+	{{ vLayout := uiutils.Def(p.Layout, "bar") }}
+	{{ vActions := uiutils.Def(p.Actions, "two") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Tpl("{0}-title", vId)), "data-testid", "cookie", "data-layout", vLayout, "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "py-4")), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border", uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "muted")), "bg-muted", "bg-card"), uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "bar")), "md:flex-row md:items-center md:justify-between", "mx-auto w-full max-w-md")))}) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "start", Class: "min-w-0"}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "cookie", Size: 24})
+					@stack.Stack(stack.StackProps{Gap: "2"}) {
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "base", Weight: "bold", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-title", vId))}) {
+							{ uiutils.Text(vTitle) }
+						}
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(vText) }
+						}
+					}
+				}
+				@group.Group(group.GroupProps{Gap: "2", Class: "shrink-0 flex-wrap"}) {
+					if uiutils.T(uiutils.And(uiutils.Eq(vActions, "three"), vSettings)) {
+						@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Type: "button", Attrs: uiutils.Attrs("data-testid", "cookie-settings")}) {
+							{ uiutils.Text(vSettings) }
+						}
+					}
+					@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Type: "button", Attrs: uiutils.Attrs("data-testid", "cookie-decline")}) {
+						{ uiutils.Text(vDecline) }
+					}
+					@button.Button(button.ButtonProps{Variant: "default", Size: "sm", Type: "button", Attrs: uiutils.Attrs("data-testid", "cookie-accept")}) {
+						{ uiutils.Text(vAccept) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/credit-packs.templ b/packages/templ/ui/blocks/credit-packs.templ
new file mode 100644
index 0000000..84405ad
--- /dev/null
+++ b/packages/templ/ui/blocks/credit-packs.templ
@@ -0,0 +1,82 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/credit-packs.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CreditPacksProps are the props of CreditPacks; the values are the JSON shapes of the TypeScript props.
+type CreditPacksProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Packs any `json:"packs"`
+	Empty any `json:"empty"`
+	Badges any `json:"badges"`
+	Buy any `json:"buy"`
+	Cols any `json:"cols"`
+	Item any `json:"item"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile, row), tone, density.
+templ CreditPacks(p CreditPacksProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vPacks := p.Packs }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vBadges := p.Badges }}
+	{{ vBuy := p.Buy }}
+	{{ vCols := uiutils.Def(p.Cols, "4") }}
+	{{ vItem := uiutils.Def(p.Item, "tile") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "row")), "2xl", "default"), LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vPacks), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "coins", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "row")), "1", uiutils.FitCols(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "1-2", "1-4"), uiutils.Len(vPacks)))), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vPack := range uiutils.L(vPacks) {
+					@card.Card(card.CardProps{Variant: "default", Class: uiutils.S(uiutils.Cnv("h-full", uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "row")), "gap-4 p-4", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "gap-4 p-4", "")))), Attrs: uiutils.Attrs("data-testid", "item", "data-badge", uiutils.Get(vPack, "badge"))}) {
+						@card.CardContent(card.CardContentProps{Class: uiutils.S(uiutils.Cnv("flex h-full gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "row")), "flex-row flex-wrap items-center justify-between", "flex-col")))}) {
+							@stack.Stack(stack.StackProps{Gap: "2", Align: "start", Class: uiutils.S(uiutils.Cnv("min-w-0", uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "row")), "flex-1", "")))}) {
+								if uiutils.T(uiutils.Or(uiutils.Get(vPack, "badge"), uiutils.And(!uiutils.Eq(vItem, "row"), uiutils.Gt(uiutils.Count(vPacks, "badge"), float64(0))))) {
+									@box.Box(box.BoxProps{Class: "flex min-h-6 items-center", Attrs: uiutils.Attrs("data-slot", "badge-slot")}) {
+										if uiutils.T(uiutils.Get(vPack, "badge")) {
+											@badge.Badge(badge.BadgeProps{Variant: "default", Size: "default", Class: "w-fit shrink-0", Attrs: uiutils.Attrs("data-testid", "badge")}) {
+												{ uiutils.Text(uiutils.At(vBadges, uiutils.Get(vPack, "badge"))) }
+											}
+										}
+									}
+								}
+								@stack.Stack(stack.StackProps{Gap: "0", Class: "min-w-0"}) {
+									@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+										{ uiutils.Text(uiutils.Get(vPack, "name")) }
+									}
+									@text.Text(text.TextProps{Size: "2xl", Weight: "bold"}) {
+										{ uiutils.Text(uiutils.Money(uiutils.Get(vPack, "price"), uiutils.Get(vPack, "currency"))) }
+									}
+								}
+							}
+							@button.Button(button.ButtonProps{Variant: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vPack, "badge"), "popular")), "default", "outline")), Size: "sm", Type: "button", Class: uiutils.S(uiutils.Cnv("w-fit shrink-0", uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "row")), "", "mt-auto"))), Attrs: uiutils.Attrs("data-testid", "buy")}) {
+								{ uiutils.Text(vBuy) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/cta-actions.templ b/packages/templ/ui/blocks/cta-actions.templ
new file mode 100644
index 0000000..abc17c7
--- /dev/null
+++ b/packages/templ/ui/blocks/cta-actions.templ
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cta-actions.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CtaActionsProps are the props of CtaActions; the values are the JSON shapes of the TypeScript props.
+type CtaActionsProps struct {
+	Id any `json:"id"`
+	Actions any `json:"actions"`
+	Center any `json:"center"`
+}
+
+// The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions form).
+templ CtaActions(p CtaActionsProps) {
+	{{ vId := p.Id }}
+	{{ vActions := p.Actions }}
+	{{ vCenter := uiutils.Def(p.Center, false) }}
+	if uiutils.Eq(uiutils.Get(vActions, "mode"), "form") {
+		@form.Form(form.FormProps{Method: "dialog", Class: uiutils.S(uiutils.Cnv("w-full max-w-md", uiutils.Cond(uiutils.T(vCenter), "mx-auto", ""))), Attrs: uiutils.Attrs("data-testid", "email-form")}) {
+			@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-email", vId)), Class: "sr-only"}) {
+				{ uiutils.Text(uiutils.Get(vActions, "emailLabel")) }
+			}
+			@group.Group(group.GroupProps{Gap: "2", Align: "start", Class: "w-full flex-wrap"}) {
+				@input.Input(input.InputProps{Type: "email", Name: "email", Class: "min-w-0 flex-1", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-email", vId), "data-testid", "field")})
+				@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "submit", Attrs: uiutils.Attrs("data-testid", "submit")}) {
+					{ uiutils.Text(uiutils.Get(vActions, "cta")) }
+				}
+			}
+		}
+	} else {
+		@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref"), Align: uiutils.Cond(uiutils.T(vCenter), "center", "start")})
+	}
+}
diff --git a/packages/templ/ui/blocks/cta-band.templ b/packages/templ/ui/blocks/cta-band.templ
new file mode 100644
index 0000000..a901851
--- /dev/null
+++ b/packages/templ/ui/blocks/cta-band.templ
@@ -0,0 +1,78 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cta-band.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CtaBandProps are the props of CtaBand; the values are the JSON shapes of the TypeScript props.
+type CtaBandProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Actions any `json:"actions"`
+	Quote any `json:"quote"`
+	Layout any `json:"layout"`
+	Tone any `json:"tone"`
+	Proof any `json:"proof"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof (none, quote), density.
+templ CtaBand(p CtaBandProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vActions := p.Actions }}
+	{{ vQuote := p.Quote }}
+	{{ vLayout := uiutils.Def(p.Layout, "card") }}
+	{{ vTone := uiutils.Def(p.Tone, "muted") }}
+	{{ vProof := uiutils.Def(p.Proof, "none") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vCenter := any(uiutils.Or(uiutils.Eq(vLayout, "band"), uiutils.Eq(vLayout, "banner"))) }}
+	if uiutils.Eq(vLayout, "banner") {
+		@CtaBanner(CtaBannerProps{Id: vId, Title: vTitle, Text: vText, Cta: uiutils.Get(vActions, "cta"), Href: uiutils.Get(vActions, "href"), Tone: vTone, LandmarkLabel: vLandmarkLabel})
+	} else if uiutils.Eq(vLayout, "row") {
+		@block.Block(block.BlockProps{Tag: "section", Class: "py-8", Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Tpl("{0}-title", vId)), "data-testid", "section", "data-tone", vTone, "data-density", vDensity, "aria-label", vLandmarkLabel)}) {
+			@container.Container(container.ContainerProps{Class: "mx-auto w-full max-w-6xl px-4", Attrs: uiutils.Attrs("data-slot", "container")}) {
+				@card.Card(card.CardProps{Variant: "muted"}) {
+					@card.CardContent(card.CardContentProps{Class: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between"}) {
+						@stack.Stack(stack.StackProps{Gap: "2", Class: "min-w-0"}) {
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "2xl", Weight: "bold", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-title", vId))}) {
+								{ uiutils.Text(vTitle) }
+							}
+							@text.Text(text.TextProps{Size: "base", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(vText) }
+							}
+						}
+						if uiutils.Eq(vProof, "quote") {
+							@QuoteProof(QuoteProofProps{Quote: uiutils.Get(vQuote, "text"), QuoteBy: uiutils.Get(vQuote, "by"), Center: vCenter})
+						}
+						@CtaActions(CtaActionsProps{Id: vId, Actions: vActions, Center: vCenter})
+					}
+				}
+			}
+		}
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vText, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "split", "stack"), Align: uiutils.Cond(uiutils.T(vCenter), "center", "start"), Boxed: uiutils.Eq(vLayout, "card"), Media: map[string]any{"show": uiutils.Eq(vLayout, "split")}, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel, Aside: ctaBandFill1(p, vTitle)}) {
+			if uiutils.Eq(vProof, "quote") {
+				@QuoteProof(QuoteProofProps{Quote: uiutils.Get(vQuote, "text"), QuoteBy: uiutils.Get(vQuote, "by"), Center: vCenter})
+			}
+			@CtaActions(CtaActionsProps{Id: vId, Actions: vActions, Center: vCenter})
+		}
+	}
+}
+
+templ ctaBandFill1(p CtaBandProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+}
diff --git a/packages/templ/ui/blocks/cta-banner.templ b/packages/templ/ui/blocks/cta-banner.templ
new file mode 100644
index 0000000..f7b5638
--- /dev/null
+++ b/packages/templ/ui/blocks/cta-banner.templ
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cta-banner.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CtaBannerProps are the props of CtaBanner; the values are the JSON shapes of the TypeScript props.
+type CtaBannerProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Cta any `json:"cta"`
+	Href any `json:"href"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A centered closing card: heading, one sentence and a pill button. Sizes from the default preset.
+templ CtaBanner(p CtaBannerProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vCta := p.Cta }}
+	{{ vHref := p.Href }}
+	{{ vTone := uiutils.Def(p.Tone, "muted") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Class: "w-full py-0", Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Tpl("{0}-title", vId)), "data-testid", "section", "data-tone", vTone, "data-density", "compact", "aria-label", vLandmarkLabel)}) {
+		@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex w-full flex-col items-center gap-10 bg-muted px-6 text-center", uiutils.Get(presetDefaults, "cta", "panel"))), Attrs: uiutils.Attrs("data-testid", "cta-banner")}) {
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "3xl", Weight: "semibold", Class: uiutils.S(uiutils.Cnv(uiutils.Get(presetDefaults, "cta", "title"), "leading-9")), Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-title", vId))}) {
+				{ uiutils.Text(vTitle) }
+			}
+			@text.Text(text.TextProps{Size: "xs", Weight: "semibold", Class: uiutils.S(uiutils.Cnv("leading-5 text-muted-foreground", uiutils.Get(presetDefaults, "cta", "text")))}) {
+				{ uiutils.Text(vText) }
+			}
+			@button.Button(button.ButtonProps{Variant: "default", Size: "lg", Href: uiutils.S(vHref), Class: uiutils.S(uiutils.Get(presetDefaults, "cta", "button")), Attrs: uiutils.Attrs("data-testid", "action-primary")}) {
+				{ uiutils.Text(vCta) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/cta-proof-items.templ b/packages/templ/ui/blocks/cta-proof-items.templ
new file mode 100644
index 0000000..f52b328
--- /dev/null
+++ b/packages/templ/ui/blocks/cta-proof-items.templ
@@ -0,0 +1,118 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cta-proof-items.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CtaProofItemsProps are the props of CtaProofItems; the values are the JSON shapes of the TypeScript props.
+type CtaProofItemsProps struct {
+	Content any `json:"content"`
+	Proof any `json:"proof"`
+	Center any `json:"center"`
+}
+
+// The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).
+templ CtaProofItems(p CtaProofItemsProps) {
+	{{ vContent := p.Content }}
+	{{ vProof := uiutils.Def(p.Proof, "stats") }}
+	{{ vCenter := uiutils.Def(p.Center, false) }}
+	if uiutils.T(uiutils.And(uiutils.Eq(vProof, "logos"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "logos")), float64(0)))) {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6", Attrs: uiutils.Attrs("data-testid", "cta-proof")}) {
+			for _, vL := range uiutils.L(uiutils.Get(vContent, "logos")) {
+				@group.Group(group.GroupProps{Gap: "2", Align: "center", Justify: "center", Class: "text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "cta-item")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vL, "icon")), Size: 20})
+					@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+						{ uiutils.Text(uiutils.Get(vL, "name")) }
+					}
+				}
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vProof, "features"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "features")), float64(0)))) {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-1 gap-4 text-left sm:grid-cols-2", Attrs: uiutils.Attrs("data-testid", "cta-proof")}) {
+			for _, vF := range uiutils.L(uiutils.Get(vContent, "features")) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "start", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "cta-item")}) {
+					@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 20})
+					}
+					@stack.Stack(stack.StackProps{Gap: "0"}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vF, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vF, "text")) }
+						}
+					}
+				}
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vProof, "stats"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "stats")), float64(0)))) {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-3 gap-4", Attrs: uiutils.Attrs("data-testid", "cta-proof")}) {
+			for vI, vS := range uiutils.L(uiutils.Get(vContent, "stats")) {
+				if uiutils.Lt(float64(vI), float64(3)) {
+					@stack.Stack(stack.StackProps{Gap: "0", Class: uiutils.S(uiutils.Cond(uiutils.T(vCenter), "items-center text-center", "")), Attrs: uiutils.Attrs("data-testid", "cta-item")}) {
+						@text.Text(text.TextProps{Size: "3xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "value")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "label")) }
+						}
+					}
+				}
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vProof, "rows"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "features")), float64(0)))) {
+		@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-4 p-0", Attrs: uiutils.Attrs("data-testid", "cta-proof")}) {
+			for _, vF := range uiutils.L(uiutils.Get(vContent, "features")) {
+				@list.ListItem(list.ListItemProps{Class: "flex items-start gap-4", Attrs: uiutils.Attrs("data-testid", "cta-item")}) {
+					@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 20})
+					}
+					@stack.Stack(stack.StackProps{Gap: "0"}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vF, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vF, "text")) }
+						}
+					}
+				}
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vProof, "zones"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "zones")), float64(0)))) {
+		@list.List(list.ListProps{Class: "m-0 flex list-none flex-col p-0", Attrs: uiutils.Attrs("data-testid", "cta-proof")}) {
+			for _, vZ := range uiutils.L(uiutils.Get(vContent, "zones")) {
+				@list.ListItem(list.ListItemProps{Class: "flex items-start justify-between gap-4 border-b border-border py-4", Attrs: uiutils.Attrs("data-testid", "cta-item")}) {
+					@stack.Stack(stack.StackProps{Gap: "0", Class: "min-w-0"}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vZ, "name")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vZ, "area")) }
+						}
+					}
+					@stack.Stack(stack.StackProps{Gap: "0", Class: "shrink-0 text-right"}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vZ, "price"), uiutils.Get(vZ, "currency"))) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vZ, "time")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/cta-proof.templ b/packages/templ/ui/blocks/cta-proof.templ
new file mode 100644
index 0000000..84cd63a
--- /dev/null
+++ b/packages/templ/ui/blocks/cta-proof.templ
@@ -0,0 +1,54 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/cta-proof.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// CtaProofProps are the props of CtaProof; the values are the JSON shapes of the TypeScript props.
+type CtaProofProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Actions any `json:"actions"`
+	Content any `json:"content"`
+	Note any `json:"note"`
+	Layout any `json:"layout"`
+	Proof any `json:"proof"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note. Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos, features, stats, rows, zones), mediaSide, tone.
+templ CtaProof(p CtaProofProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vActions := p.Actions }}
+	{{ vContent := p.Content }}
+	{{ vNote := uiutils.Def(p.Note, "") }}
+	{{ vLayout := uiutils.Def(p.Layout, "center") }}
+	{{ vProof := uiutils.Def(p.Proof, "stats") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Align: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "center")), "center", "start"), Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "center")), "stack", "split"), Media: map[string]any{"show": uiutils.Eq(vLayout, "split"), "side": vMediaSide}, LandmarkLabel: vLandmarkLabel, Aside: ctaProofFill1(p, vTitle)}) {
+		@CtaProofItems(CtaProofItemsProps{Content: vContent, Proof: vProof, Center: uiutils.Eq(vLayout, "center")})
+		@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref"), Align: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "center")), "center", "start")})
+		if uiutils.T(vNote) {
+			@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "cta-note")}) {
+				{ uiutils.Text(vNote) }
+			}
+		}
+	}
+}
+
+templ ctaProofFill1(p CtaProofProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+}
diff --git a/packages/templ/ui/blocks/dashboard-overview.templ b/packages/templ/ui/blocks/dashboard-overview.templ
new file mode 100644
index 0000000..f44d3f7
--- /dev/null
+++ b/packages/templ/ui/blocks/dashboard-overview.templ
@@ -0,0 +1,64 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/dashboard-overview.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// DashboardOverviewProps are the props of DashboardOverview; the values are the JSON shapes of the TypeScript props.
+type DashboardOverviewProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Metrics any `json:"metrics"`
+	Chart any `json:"chart"`
+	Activity any `json:"activity"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the activity side by side, stacked: one below the other), cols (2, 4), tone, density.
+templ DashboardOverview(p DashboardOverviewProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vMetrics := p.Metrics }}
+	{{ vChart := p.Chart }}
+	{{ vActivity := p.Activity }}
+	{{ vLayout := uiutils.Def(p.Layout, "split") }}
+	{{ vCols := uiutils.Def(p.Cols, "4") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch"}) {
+			if uiutils.Gt(uiutils.Len(vMetrics), float64(0)) {
+				@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "1-2", "1-4")), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for _, vM := range uiutils.L(vMetrics) {
+						@box.Box(box.BoxProps{Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@StatTile(StatTileProps{Label: uiutils.Get(vM, "label"), Value: uiutils.Get(vM, "value"), Icon: uiutils.Get(vM, "icon"), Hint: uiutils.Get(vM, "hint")})
+						}
+					}
+				}
+			}
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "1-2", "1")), Class: "items-stretch gap-4", Attrs: uiutils.Attrs("data-testid", "panels")}) {
+				if uiutils.Gt(uiutils.Len(uiutils.Get(vChart, "series")), float64(0)) {
+					@Panel(PanelProps{Title: uiutils.Get(vChart, "title"), Description: uiutils.Get(vChart, "text"), Id: uiutils.Tpl("{0}-chart", vId), Class: uiutils.Cnv("h-full")}) {
+						@BarChart(BarChartProps{Bars: uiutils.Get(vChart, "series"), Label: uiutils.Get(vChart, "summary"), Height: float64(144)})
+					}
+				}
+				if uiutils.Gt(uiutils.Len(uiutils.Get(vActivity, "events")), float64(0)) {
+					@Panel(PanelProps{Title: uiutils.Get(vActivity, "title"), Description: uiutils.Get(vActivity, "text"), Id: uiutils.Tpl("{0}-feed", vId), Class: uiutils.Cnv("h-full")}) {
+						@Timeline(TimelineProps{Items: uiutils.Get(vActivity, "events")})
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/dashboard-shell.templ b/packages/templ/ui/blocks/dashboard-shell.templ
new file mode 100644
index 0000000..5c1bfdd
--- /dev/null
+++ b/packages/templ/ui/blocks/dashboard-shell.templ
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/dashboard-shell.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// DashboardShellProps are the props of DashboardShell; the values are the JSON shapes of the TypeScript props.
+type DashboardShellProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Level any `json:"level"`
+	Nav any `json:"nav"`
+	Topbar any `json:"topbar"`
+	Search any `json:"search"`
+	Sidebar any `json:"sidebar"`
+	Side any `json:"side"`
+	Footer any `json:"footer"`
+	Content any `json:"content"`
+	Frame any `json:"frame"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset: over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide, rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.
+templ DashboardShell(p DashboardShellProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLevel := uiutils.Def(p.Level, float64(2)) }}
+	{{ vNav := p.Nav }}
+	{{ vTopbar := uiutils.Def(p.Topbar, "full") }}
+	{{ vSearch := uiutils.Def(p.Search, "show") }}
+	{{ vSidebar := uiutils.Def(p.Sidebar, "wide") }}
+	{{ vSide := uiutils.Def(p.Side, "start") }}
+	{{ vFooter := uiutils.Def(p.Footer, "none") }}
+	{{ vContent := uiutils.Def(p.Content, "grid") }}
+	{{ vFrame := uiutils.Def(p.Frame, "window") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vTitleId := any(uiutils.Tpl("{0}-title", vId)) }}
+	@block.Block(block.BlockProps{Tag: "section", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vFrame, "window")), "bg-background py-12", "bg-background")), Attrs: uiutils.Attrs("id", vId, "aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, vTitleId), "data-testid", "dashboard-shell", "data-topbar", vTopbar, "data-sidebar", vSidebar, "data-footer", vFooter, "aria-label", vLandmarkLabel)}) {
+		@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vFrame, "window")), "mx-auto w-full max-w-6xl px-4", ""))}) {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col overflow-hidden bg-background", uiutils.Cond(uiutils.T(uiutils.Eq(vFrame, "window")), "min-h-160 rounded border border-border", "min-h-screen"))), Attrs: uiutils.Attrs("data-testid", "window")}) {
+				if uiutils.Eq(vTopbar, "full") {
+					@ShellTopbar(ShellTopbarProps{Nav: vNav, Links: uiutils.Cond(uiutils.T(uiutils.Eq(vSidebar, "none")), "show", "hide"), Search: vSearch, LandmarkLabel: vLandmarkLabel})
+				}
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex min-h-0 flex-1", uiutils.Cond(uiutils.T(uiutils.Eq(vSide, "end")), "flex-row-reverse", "")))}) {
+					if !uiutils.Eq(vSidebar, "none") {
+						@ShellSidebar(ShellSidebarProps{Nav: vNav, Mode: vSidebar, Side: vSide, Brand: uiutils.Cond(uiutils.T(uiutils.Eq(vTopbar, "full")), "hide", "show"), LandmarkLabel: vLandmarkLabel})
+					}
+					@box.Box(box.BoxProps{Class: "flex min-w-0 flex-1 flex-col"}) {
+						if uiutils.Eq(vTopbar, "inset") {
+							@ShellTopbar(ShellTopbarProps{Nav: vNav, Brand: uiutils.Cond(uiutils.T(uiutils.Eq(vSidebar, "none")), "show", "hide"), Links: uiutils.Cond(uiutils.T(uiutils.Eq(vSidebar, "none")), "show", "hide"), Search: vSearch, LandmarkLabel: vLandmarkLabel})
+						}
+						@ShellContent(ShellContentProps{Title: vTitle, TitleId: vTitleId, Level: vLevel, Content: vContent})
+						if uiutils.Eq(vFooter, "inset") {
+							@ShellFooter(ShellFooterProps{Nav: vNav, Place: "inset", LandmarkLabel: vLandmarkLabel})
+						}
+					}
+				}
+				if uiutils.Eq(vFooter, "full") {
+					@ShellFooter(ShellFooterProps{Nav: vNav, LandmarkLabel: vLandmarkLabel})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/delivery-info.templ b/packages/templ/ui/blocks/delivery-info.templ
new file mode 100644
index 0000000..b6964f5
--- /dev/null
+++ b/packages/templ/ui/blocks/delivery-info.templ
@@ -0,0 +1,94 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/delivery-info.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// DeliveryInfoProps are the props of DeliveryInfo; the values are the JSON shapes of the TypeScript props.
+type DeliveryInfoProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Facts any `json:"facts"`
+	Zones any `json:"zones"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// How delivery works: the facts as icon cards, then the zones with their time and the order that ships free. Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones), tone, density.
+templ DeliveryInfo(p DeliveryInfoProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vFacts := p.Facts }}
+	{{ vZones := p.Zones }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "full") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("grid grid-cols-1 gap-8", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "items-start md:grid-cols-2", "")))}) {
+			if uiutils.Gt(uiutils.Len(vFacts), float64(0)) {
+				@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "1-2", "1-4")), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "facts")}) {
+					for _, vF := range uiutils.L(vFacts) {
+						@stack.Stack(stack.StackProps{Gap: "4", Class: "rounded bg-card inset-ring inset-ring-border p-6", Attrs: uiutils.Attrs("data-testid", "fact")}) {
+							@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 20})
+							}
+							@stack.Stack(stack.StackProps{Gap: "2"}) {
+								@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+									{ uiutils.Text(uiutils.Get(vF, "title")) }
+								}
+								@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vF, "text")) }
+								}
+							}
+						}
+					}
+				}
+			}
+			if uiutils.T(uiutils.And(!uiutils.Eq(vLayout, "facts"), uiutils.Gt(uiutils.Len(vZones), float64(0)))) {
+				@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+					@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "lg", Weight: "bold"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "zones")) }
+					}
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "flex flex-col gap-4", "grid grid-cols-1 gap-4 md:grid-cols-3"))}) {
+						for _, vZ := range uiutils.L(vZones) {
+							@stack.Stack(stack.StackProps{Gap: "2", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "border-b border-border pb-4", "rounded bg-card inset-ring inset-ring-border p-6")), Attrs: uiutils.Attrs("data-testid", "zone")}) {
+								@group.Group(group.GroupProps{Gap: "4", Align: "baseline", Justify: "between"}) {
+									@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vZ, "name")) }
+									}
+									@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "default"}) {
+										{ uiutils.Text(uiutils.Get(vZ, "time")) }
+									}
+								}
+								@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vZ, "area")) }
+								}
+								@text.Text(text.TextProps{Size: "sm", Weight: "medium"}) {
+									{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "freeFrom"), uiutils.Money(uiutils.Get(vZ, "freeFrom"), uiutils.Get(vZ, "currency")))) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/drawer-lines.templ b/packages/templ/ui/blocks/drawer-lines.templ
new file mode 100644
index 0000000..8124e71
--- /dev/null
+++ b/packages/templ/ui/blocks/drawer-lines.templ
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/drawer-lines.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// DrawerLinesProps are the props of DrawerLines; the values are the JSON shapes of the TypeScript props.
+type DrawerLinesProps struct {
+	Lines any `json:"lines"`
+	Rows any `json:"rows"`
+	Labels any `json:"labels"`
+	Drawer any `json:"drawer"`
+	Media any `json:"media"`
+	Field any `json:"field"`
+}
+
+// The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal and total and the button.
+templ DrawerLines(p DrawerLinesProps) {
+	{{ vLines := p.Lines }}
+	{{ vRows := p.Rows }}
+	{{ vLabels := p.Labels }}
+	{{ vDrawer := p.Drawer }}
+	{{ vMedia := uiutils.Def(p.Media, "image") }}
+	{{ vField := uiutils.Def(p.Field, "qty") }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "flex-1 p-4", Attrs: uiutils.Attrs("data-testid", "lines")}) {
+		for _, vLine := range uiutils.L(vLines) {
+			@group.Group(group.GroupProps{Gap: "4", Align: "start", Attrs: uiutils.Attrs("data-testid", "item")}) {
+				if uiutils.Eq(vMedia, "image") {
+					@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vLine, "name"), Ratio: "1/1", Class: uiutils.Cnv("size-16 shrink-0")})
+				}
+				@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Class: "flex-1"}) {
+					@group.Group(group.GroupProps{Gap: "2", Justify: "between", Align: "start"}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vLine, "name")) }
+						}
+						@inline.Inline(inline.InlineProps{Class: "text-sm font-medium"}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Mul(uiutils.Get(vLine, "price"), uiutils.Get(vLine, "qty")), uiutils.Get(vLine, "currency"))) }
+						}
+					}
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vLine, "variant")) }
+					}
+					@NumberField(NumberFieldProps{Value: uiutils.Str(uiutils.Get(vLine, "qty")), Name: uiutils.Tpl("{0}-{1}", vField, uiutils.Get(vLine, "id")), Min: "1", Label: uiutils.Get(vLabels, "qty"), Decrease: uiutils.Get(vLabels, "decrease"), Increase: uiutils.Get(vLabels, "increase")})
+				}
+			}
+		}
+	}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "border-t border-border p-4"}) {
+		@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Class: "rounded bg-muted p-4", Attrs: uiutils.Attrs("data-testid", "progress")}) {
+			@text.Text(text.TextProps{Size: "sm"}) {
+				{ uiutils.Text(uiutils.Get(vDrawer, "progress")) }
+			}
+			@form.Progress(form.ProgressProps{Value: "96", Max: "100", Attrs: uiutils.Attrs("aria-label", uiutils.Get(vDrawer, "progress"))})
+		}
+		@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col gap-2"}) {
+			for vI, vRow := range uiutils.L(vRows) {
+				if uiutils.T(uiutils.Cond(uiutils.T(uiutils.Get(vRow, "strong")), true, uiutils.Eq(float64(vI), float64(0)))) {
+					@list.ListItem(list.ListItemProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Get(vRow, "strong")), "flex justify-between text-base font-bold", "flex justify-between text-sm text-muted-foreground"))}) {
+						@inline.Inline(inline.InlineProps{}) {
+							{ uiutils.Text(uiutils.Get(vRow, "label")) }
+						}
+						@inline.Inline(inline.InlineProps{}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vRow, "amount"), uiutils.Get(vRow, "currency"))) }
+						}
+					}
+				}
+			}
+		}
+		@button.Button(button.ButtonProps{Variant: "default", Size: "lg", Class: "w-full", Attrs: uiutils.Attrs("data-testid", "checkout")}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "checkout")) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/dropdown-item.templ b/packages/templ/ui/blocks/dropdown-item.templ
new file mode 100644
index 0000000..9d249c0
--- /dev/null
+++ b/packages/templ/ui/blocks/dropdown-item.templ
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/dropdown-item.json
+
+package blocks
+
+import (
+	buttonplain "github.com/ui8kit/codegen/packages/templ/ui/ui/button-plain"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// DropdownItemProps are the props of DropdownItem; the values are the JSON shapes of the TypeScript props.
+type DropdownItemProps struct {
+	Selected any `json:"selected"`
+	Class string `json:"className"`
+	Icon templ.Component `json:"-"`
+	Right templ.Component `json:"-"`
+}
+
+// A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex -1: the menu moves focus with the arrow keys.
+templ DropdownItem(p DropdownItemProps) {
+	{{ vSelected := uiutils.Def(p.Selected, false) }}
+	@buttonplain.ButtonPlain(buttonplain.ButtonPlainProps{Type: "button", Role: "menuitem", Class: uiutils.S(uiutils.Cnv("group flex h-9 w-full items-center px-2 text-left text-foreground", p.Class)), Attrs: uiutils.Attrs("tabindex", float64(-1), "data-slot", "dropdown-item", "data-state", uiutils.Cond(uiutils.T(vSelected), "selected", "default"))}) {
+		@inline.Inline(inline.InlineProps{Class: "flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted group-data-[state=selected]:bg-muted", Attrs: uiutils.Attrs("data-slot", "dropdown-item-content")}) {
+			if uiutils.T((p.Icon != nil)) {
+				@inline.Inline(inline.InlineProps{Class: "flex w-7 shrink-0 items-center pr-2", Attrs: uiutils.Attrs("data-slot", "dropdown-item-icon")}) {
+					if p.Icon != nil {
+						@p.Icon
+					}
+				}
+			}
+			@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cnv("text-xs", "min-w-0 flex-1 truncate px-1 font-bold")), Attrs: uiutils.Attrs("data-slot", "dropdown-item-label")}) {
+				{ children... }
+			}
+			if uiutils.T((p.Right != nil)) {
+				@inline.Inline(inline.InlineProps{Class: "flex shrink-0 items-center pr-1", Attrs: uiutils.Attrs("data-slot", "dropdown-item-right")}) {
+					if p.Right != nil {
+						@p.Right
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/editor-tab.templ b/packages/templ/ui/blocks/editor-tab.templ
new file mode 100644
index 0000000..030b777
--- /dev/null
+++ b/packages/templ/ui/blocks/editor-tab.templ
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/editor-tab.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// EditorTabProps are the props of EditorTab; the values are the JSON shapes of the TypeScript props.
+type EditorTabProps struct {
+	Label any `json:"label"`
+	CloseLabel any `json:"closeLabel"`
+	Active any `json:"active"`
+	Preview any `json:"preview"`
+	Class string `json:"className"`
+	Icon templ.Component `json:"-"`
+}
+
+// An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close events.
+templ EditorTab(p EditorTabProps) {
+	{{ vLabel := p.Label }}
+	{{ vCloseLabel := p.CloseLabel }}
+	{{ vActive := uiutils.Def(p.Active, false) }}
+	{{ vPreview := uiutils.Def(p.Preview, false) }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card [&_svg]:text-muted-foreground", "border-r border-border", p.Class)), Attrs: uiutils.Attrs("role", "tab", "aria-selected", vActive, "tabindex", uiutils.Cond(uiutils.T(vActive), float64(0), float64(-1)), "data-slot", "editor-tab", "data-state", uiutils.Cond(uiutils.T(vActive), "active", "default"))}) {
+		@inline.Inline(inline.InlineProps{Class: "flex h-10 items-center gap-2 px-3", Attrs: uiutils.Attrs("data-slot", "editor-tab-content")}) {
+			if p.Icon != nil {
+				@p.Icon
+			}
+			@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cnv("text-xs text-foreground", uiutils.Cond(uiutils.T(vPreview), "font-semibold italic", "font-bold"))), Attrs: uiutils.Attrs("data-slot", "editor-tab-label")}) {
+				{ uiutils.Text(vLabel) }
+			}
+			@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", Class: "p-0 [&>svg]:size-4", AriaLabel: uiutils.S(vCloseLabel), Attrs: uiutils.Attrs("tabindex", float64(-1), "data-slot", "editor-tab-close")}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "x", Size: 16})
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/embed.go b/packages/templ/ui/blocks/embed.go
new file mode 100644
index 0000000..f963eb5
--- /dev/null
+++ b/packages/templ/ui/blocks/embed.go
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/templ.ts
+
+package blocks
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed recipes/avatar.variants.json
+var recipeAvatarJSON []byte
+var recipeAvatar = uiutils.MustRecipe(recipeAvatarJSON)
+
+//go:embed recipes/badge-square.variants.json
+var recipeBadgeSquareJSON []byte
+var recipeBadgeSquare = uiutils.MustRecipe(recipeBadgeSquareJSON)
+
+//go:embed recipes/file-tree-item.variants.json
+var recipeFileTreeItemJSON []byte
+var recipeFileTreeItem = uiutils.MustRecipe(recipeFileTreeItemJSON)
+
+//go:embed recipes/icon-tab.variants.json
+var recipeIconTabJSON []byte
+var recipeIconTab = uiutils.MustRecipe(recipeIconTabJSON)
+
+//go:embed recipes/logo-sidebar.variants.json
+var recipeLogoSidebarJSON []byte
+var recipeLogoSidebar = uiutils.MustRecipe(recipeLogoSidebarJSON)
+
+//go:embed recipes/media-frame.variants.json
+var recipeMediaFrameJSON []byte
+var recipeMediaFrame = uiutils.MustRecipe(recipeMediaFrameJSON)
+
+//go:embed recipes/nav-item.variants.json
+var recipeNavItemJSON []byte
+var recipeNavItem = uiutils.MustRecipe(recipeNavItemJSON)
+
+//go:embed recipes/nav-item-content.variants.json
+var recipeNavItemContentJSON []byte
+var recipeNavItemContent = uiutils.MustRecipe(recipeNavItemContentJSON)
+
+//go:embed recipes/section-column.variants.json
+var recipeSectionColumnJSON []byte
+var recipeSectionColumn = uiutils.MustRecipe(recipeSectionColumnJSON)
+
+//go:embed recipes/section-frame.variants.json
+var recipeSectionFrameJSON []byte
+var recipeSectionFrame = uiutils.MustRecipe(recipeSectionFrameJSON)
+
+//go:embed recipes/section-head.variants.json
+var recipeSectionHeadJSON []byte
+var recipeSectionHead = uiutils.MustRecipe(recipeSectionHeadJSON)
+
+//go:embed recipes/sidebar-panel.variants.json
+var recipeSidebarPanelJSON []byte
+var recipeSidebarPanel = uiutils.MustRecipe(recipeSidebarPanelJSON)
+
+//go:embed recipes/switcher.variants.json
+var recipeSwitcherJSON []byte
+var recipeSwitcher = uiutils.MustRecipe(recipeSwitcherJSON)
+
+//go:embed recipes/switcher-item.variants.json
+var recipeSwitcherItemJSON []byte
+var recipeSwitcherItem = uiutils.MustRecipe(recipeSwitcherItemJSON)
+
+//go:embed presets/defaults.json
+var presetDefaultsJSON []byte
+var presetDefaults = uiutils.Get(uiutils.MustJSON(presetDefaultsJSON), "values")
diff --git a/packages/templ/ui/blocks/empty-panel.templ b/packages/templ/ui/blocks/empty-panel.templ
new file mode 100644
index 0000000..3b1d717
--- /dev/null
+++ b/packages/templ/ui/blocks/empty-panel.templ
@@ -0,0 +1,73 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/empty-panel.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// EmptyPanelProps are the props of EmptyPanel; the values are the JSON shapes of the TypeScript props.
+type EmptyPanelProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Icon any `json:"icon"`
+	Cta any `json:"cta"`
+	CtaHref any `json:"ctaHref"`
+	Layout any `json:"layout"`
+	Actions any `json:"actions"`
+	Visual any `json:"visual"`
+	Size any `json:"size"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain. Axes: layout (card, plain), actions (button, none), size (default, compact).
+templ EmptyPanel(p EmptyPanelProps) {
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vIcon := uiutils.Def(p.Icon, "inbox") }}
+	{{ vCta := p.Cta }}
+	{{ vCtaHref := p.CtaHref }}
+	{{ vLayout := uiutils.Def(p.Layout, "card") }}
+	{{ vActions := uiutils.Def(p.Actions, "button") }}
+	{{ vVisual := uiutils.Def(p.Visual, "icon") }}
+	{{ vSize := uiutils.Def(p.Size, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vTitle), "data-testid", "empty")}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", uiutils.Cond(uiutils.T(uiutils.Eq(vSize, "compact")), "py-4", "py-8"))), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			if uiutils.Eq(vVisual, "image") {
+				@stack.Stack(stack.StackProps{Gap: "4", Align: "center", Class: "mx-auto max-w-md text-center", Attrs: uiutils.Attrs("data-testid", "empty-visual")}) {
+					@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3", Class: uiutils.Cnv("w-full max-w-xs")})
+					@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "2xl", Weight: "bold"}) {
+						{ uiutils.Text(vTitle) }
+					}
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(vText) }
+					}
+					if uiutils.Eq(vActions, "button") {
+						@button.Button(button.ButtonProps{Variant: "default", Size: "sm", Href: uiutils.S(vCtaHref), Attrs: uiutils.Attrs("data-testid", "empty-action")}) {
+							{ uiutils.Text(vCta) }
+						}
+					}
+				}
+			} else {
+				@EmptyState(EmptyStateProps{Icon: vIcon, Title: vTitle, Text: vText, Class: uiutils.Cnv(uiutils.Cnv("mx-auto max-w-xl", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "plain")), "bg-transparent inset-ring-0", ""), uiutils.Cond(uiutils.T(uiutils.Eq(vSize, "compact")), "py-6", ""))), Action: emptyPanelFill1(p, vCta, vCtaHref, vActions)})
+			}
+		}
+	}
+}
+
+templ emptyPanelFill1(p EmptyPanelProps, vCta any, vCtaHref any, vActions any) {
+	if uiutils.Eq(vActions, "button") {
+		@button.Button(button.ButtonProps{Variant: "default", Size: "sm", Href: uiutils.S(vCtaHref), Attrs: uiutils.Attrs("data-testid", "empty-action")}) {
+			{ uiutils.Text(vCta) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/empty-state.templ b/packages/templ/ui/blocks/empty-state.templ
new file mode 100644
index 0000000..a466890
--- /dev/null
+++ b/packages/templ/ui/blocks/empty-state.templ
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/empty-state.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/iconbadge"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// EmptyStateProps are the props of EmptyState; the values are the JSON shapes of the TypeScript props.
+type EmptyStateProps struct {
+	Icon any `json:"icon"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Class string `json:"className"`
+	Action templ.Component `json:"-"`
+}
+
+// Empty list or nothing found: a round icon, a title, a hint and an optional action.
+templ EmptyState(p EmptyStateProps) {
+	{{ vIcon := uiutils.Def(p.Icon, "inbox") }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border", p.Class)), Attrs: uiutils.Attrs("role", "status")}) {
+		@iconbadge.IconBadge(iconbadge.IconBadgeProps{Size: "lg"}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(vIcon), Size: 20})
+		}
+		@text.Text(text.TextProps{Class: "m-0 text-sm font-bold text-foreground"}) {
+			{ uiutils.Text(vTitle) }
+		}
+		if uiutils.T(vText) {
+			@text.Text(text.TextProps{Class: "m-0 max-w-80 text-xs font-medium text-muted-foreground"}) {
+				{ uiutils.Text(vText) }
+			}
+		}
+		if p.Action != nil {
+			@p.Action
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/error-page.templ b/packages/templ/ui/blocks/error-page.templ
new file mode 100644
index 0000000..819cf6d
--- /dev/null
+++ b/packages/templ/ui/blocks/error-page.templ
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/error-page.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ErrorPageProps are the props of ErrorPage; the values are the JSON shapes of the TypeScript props.
+type ErrorPageProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Status any `json:"status"`
+	Actions any `json:"actions"`
+	Level any `json:"level"`
+	Layout any `json:"layout"`
+	Code any `json:"code"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two), tone.
+templ ErrorPage(p ErrorPageProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vStatus := p.Status }}
+	{{ vActions := p.Actions }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vLayout := uiutils.Def(p.Layout, "centered") }}
+	{{ vCode := uiutils.Def(p.Code, "show") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vText, Heading: map[string]any{"level": vLevel}, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "split", "stack"), Media: map[string]any{"show": uiutils.Eq(vLayout, "split")}, Align: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "start", "center"), Tone: vTone, Density: "roomy", LandmarkLabel: vLandmarkLabel, Aside: errorPageFill1(p, vTitle)}) {
+		if uiutils.Eq(vCode, "show") {
+			@text.Text(text.TextProps{Size: "4xl", Weight: "bold", Class: uiutils.S(uiutils.Cnv("text-8xl text-muted-foreground", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "", "text-center"))), Attrs: uiutils.Attrs("data-testid", "error-code")}) {
+				{ uiutils.Text(vStatus) }
+			}
+		}
+		@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref"), Align: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "start", "center")})
+	}
+}
+
+templ errorPageFill1(p ErrorPageProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+}
diff --git a/packages/templ/ui/blocks/faq-cards.templ b/packages/templ/ui/blocks/faq-cards.templ
new file mode 100644
index 0000000..35984e5
--- /dev/null
+++ b/packages/templ/ui/blocks/faq-cards.templ
@@ -0,0 +1,57 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/faq-cards.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FaqCardsProps are the props of FaqCards; the values are the JSON shapes of the TypeScript props.
+type FaqCardsProps struct {
+	Items any `json:"items"`
+	Labels any `json:"labels"`
+	Cards any `json:"cards"`
+}
+
+// The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).
+templ FaqCards(p FaqCardsProps) {
+	{{ vItems := p.Items }}
+	{{ vLabels := p.Labels }}
+	{{ vCards := uiutils.Def(p.Cards, "grid3") }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCards, "grid4")), "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3")), Attrs: uiutils.Attrs("data-testid", "faq")}) {
+		for _, vQ := range uiutils.L(vItems) {
+			@ArticleBlock(ArticleBlockProps{Class: uiutils.Cnv("rounded bg-card inset-ring inset-ring-border flex flex-col gap-4 p-6"), Testid: "faq-card"}) {
+				if uiutils.Eq(vCards, "icons") {
+					@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vQ, "icon")), Size: 20})
+					}
+				}
+				@stack.Stack(stack.StackProps{Gap: "2"}) {
+					@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm", Class: "w-fit"}) {
+						{ uiutils.Text(uiutils.Get(vQ, "category")) }
+					}
+					@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "semibold"}) {
+						{ uiutils.Text(uiutils.Get(vQ, "question")) }
+					}
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vQ, "answer")) }
+					}
+				}
+				@box.Box(box.BoxProps{Class: "mt-auto"}) {
+					@button.Button(button.ButtonProps{Variant: "link", Size: "sm", Class: "gap-2 px-0 font-medium"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "more")) }
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/faq-disclosures.templ b/packages/templ/ui/blocks/faq-disclosures.templ
new file mode 100644
index 0000000..8caaf6f
--- /dev/null
+++ b/packages/templ/ui/blocks/faq-disclosures.templ
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/faq-disclosures.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/disclosure"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FaqDisclosuresProps are the props of FaqDisclosures; the values are the JSON shapes of the TypeScript props.
+type FaqDisclosuresProps struct {
+	Items any `json:"items"`
+	Name any `json:"name"`
+}
+
+// The questions of FaqSplit as native disclosures, one open at a time.
+templ FaqDisclosures(p FaqDisclosuresProps) {
+	{{ vItems := p.Items }}
+	{{ vName := p.Name }}
+	@stack.Stack(stack.StackProps{Gap: "0", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "faq")}) {
+		for _, vQ := range uiutils.L(vItems) {
+			@disclosure.Disclosure(disclosure.DisclosureProps{Variant: "item", Name: uiutils.S(vName), Attrs: uiutils.Attrs("data-testid", "faq-item")}) {
+				@disclosure.Summary(disclosure.SummaryProps{Variant: "item"}) {
+					{ uiutils.Text(uiutils.Get(vQ, "question")) }
+				}
+				@text.Text(text.TextProps{Size: "sm", Class: "pb-4 text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vQ, "answer")) }
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/faq-finder.templ b/packages/templ/ui/blocks/faq-finder.templ
new file mode 100644
index 0000000..7a2ef01
--- /dev/null
+++ b/packages/templ/ui/blocks/faq-finder.templ
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/faq-finder.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FaqFinderProps are the props of FaqFinder; the values are the JSON shapes of the TypeScript props.
+type FaqFinderProps struct {
+	Items any `json:"items"`
+	Labels any `json:"labels"`
+	Topics any `json:"topics"`
+}
+
+// The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as popular links.
+templ FaqFinder(p FaqFinderProps) {
+	{{ vItems := p.Items }}
+	{{ vLabels := p.Labels }}
+	{{ vTopics := p.Topics }}
+	@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "faq-finder")}) {
+		@SearchField(SearchFieldProps{Label: uiutils.Get(vLabels, "search"), Placeholder: uiutils.Get(vLabels, "search"), Value: uiutils.Coalesce(uiutils.Get(vLabels, "query"), "")})
+		@group.Group(group.GroupProps{Gap: "2", Class: "flex-wrap"}) {
+			for _, vT := range uiutils.L(vTopics) {
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Attrs: uiutils.Attrs("data-testid", "faq-topic", "data-value", uiutils.Get(vT, "value"))}) {
+					{ uiutils.Text(uiutils.Get(vT, "title")) }
+				}
+			}
+		}
+		@stack.Stack(stack.StackProps{Gap: "2"}) {
+			@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "popular")) }
+			}
+			@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0"}) {
+				for vI, vQ := range uiutils.L(vItems) {
+					if uiutils.Lt(float64(vI), float64(3)) {
+						@list.ListItem(list.ListItemProps{Attrs: uiutils.Attrs("data-testid", "faq-popular")}) {
+							@MenuEntry(MenuEntryProps{Href: uiutils.Get(vQ, "href"), Class: uiutils.Cnv("text-sm font-medium"), Size: "sm"}) {
+								{ uiutils.Text(uiutils.Get(vQ, "question")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/faq-help.templ b/packages/templ/ui/blocks/faq-help.templ
new file mode 100644
index 0000000..162fab7
--- /dev/null
+++ b/packages/templ/ui/blocks/faq-help.templ
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/faq-help.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FaqHelpProps are the props of FaqHelp; the values are the JSON shapes of the TypeScript props.
+type FaqHelpProps struct {
+	Labels any `json:"labels"`
+	Channels any `json:"channels"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon, name, one line) and a link.
+templ FaqHelp(p FaqHelpProps) {
+	{{ vLabels := p.Labels }}
+	{{ vChannels := p.Channels }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "aside", Class: "rounded bg-card inset-ring inset-ring-border flex flex-col gap-6 p-6", Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, uiutils.Get(vLabels, "asideTitle")), "data-testid", "faq-help")}) {
+		@stack.Stack(stack.StackProps{Gap: "2"}) {
+			@text.Text(text.TextProps{Size: "lg", Weight: "semibold"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "asideTitle")) }
+			}
+			@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "asideText")) }
+			}
+		}
+		@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-4 p-0"}) {
+			for _, vC := range uiutils.L(vChannels) {
+				@list.ListItem(list.ListItemProps{Class: "flex items-start gap-4", Attrs: uiutils.Attrs("data-testid", "faq-channel")}) {
+					@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vC, "icon")), Size: 20})
+					}
+					@stack.Stack(stack.StackProps{Gap: "0"}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vC, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vC, "text")) }
+						}
+					}
+				}
+			}
+		}
+		@button.Button(button.ButtonProps{Variant: "link", Size: "sm", Class: "gap-2 px-0 font-medium"}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "asideCta")) }
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/faq-list.templ b/packages/templ/ui/blocks/faq-list.templ
new file mode 100644
index 0000000..d36a02f
--- /dev/null
+++ b/packages/templ/ui/blocks/faq-list.templ
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/faq-list.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/disclosure"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FaqListProps are the props of FaqList; the values are the JSON shapes of the TypeScript props.
+type FaqListProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Items any `json:"items"`
+	Search any `json:"search"`
+	Filter any `json:"filter"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Empty any `json:"empty"`
+	Multiple any `json:"multiple"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters by `filter.category`), density, tone.
+templ FaqList(p FaqListProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vItems := p.Items }}
+	{{ vSearch := p.Search }}
+	{{ vFilter := p.Filter }}
+	{{ vLayout := uiutils.Def(p.Layout, "accordion") }}
+	{{ vCols := uiutils.Def(p.Cols, "1") }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vMultiple := uiutils.Def(p.Multiple, false) }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vInCategory := any(uiutils.Where(vItems, "category", uiutils.Get(vFilter, "category"))) }}
+	{{ vShown := any(uiutils.Match(vInCategory, "question", uiutils.Get(vSearch, "query"))) }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "chat")), "2xl", "default"), LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Get(vSearch, "mode"), "field") {
+			@SearchField(SearchFieldProps{Label: uiutils.Coalesce(uiutils.Get(vSearch, "label"), ""), Placeholder: uiutils.Get(vSearch, "label"), Value: uiutils.Coalesce(uiutils.Get(vSearch, "query"), "")})
+		}
+		if uiutils.Eq(uiutils.Get(vFilter, "mode"), "categories") {
+			@Switcher(SwitcherProps{Label: uiutils.Get(vFilter, "label")}) {
+				for _, vTab := range uiutils.L(uiutils.Get(vFilter, "tabs")) {
+					@SwitcherItem(SwitcherItemProps{Active: uiutils.Eq(uiutils.Get(vTab, "value"), uiutils.Get(vFilter, "category"))}) {
+						{ uiutils.Text(uiutils.Get(vTab, "title")) }
+					}
+				}
+			}
+		}
+		if uiutils.Eq(uiutils.Len(vShown), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "circle-question-mark", Title: vEmpty})
+		}
+		if uiutils.Eq(vLayout, "chat") {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "faq")}) {
+				for _, vItem := range uiutils.L(vShown) {
+					@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "faq-item")}) {
+						@box.Box(box.BoxProps{Class: "ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vItem, "question")) }
+							}
+						}
+						@box.Box(box.BoxProps{Class: "mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4"}) {
+							@text.Text(text.TextProps{Size: "sm"}) {
+								{ uiutils.Text(uiutils.Get(vItem, "answer")) }
+							}
+						}
+					}
+				}
+			}
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "1-2", "1")), Class: "items-start gap-x-8", Attrs: uiutils.Attrs("data-testid", "faq")}) {
+				for _, vItem := range uiutils.L(vShown) {
+					@disclosure.Disclosure(disclosure.DisclosureProps{Variant: "item", Name: uiutils.S(uiutils.Cond(uiutils.T(vMultiple), nil, uiutils.Tpl("{0}-faq", uiutils.Coalesce(vId, "faq")))), Attrs: uiutils.Attrs("data-testid", "faq-item")}) {
+						@disclosure.Summary(disclosure.SummaryProps{Variant: "item"}) {
+							{ uiutils.Text(uiutils.Get(vItem, "question")) }
+						}
+						@text.Text(text.TextProps{Size: "sm", Class: "pb-4 text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vItem, "answer")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/faq-split.templ b/packages/templ/ui/blocks/faq-split.templ
new file mode 100644
index 0000000..f78514f
--- /dev/null
+++ b/packages/templ/ui/blocks/faq-split.templ
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/faq-split.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FaqSplitProps are the props of FaqSplit; the values are the JSON shapes of the TypeScript props.
+type FaqSplitProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Items any `json:"items"`
+	Channels any `json:"channels"`
+	Topics any `json:"topics"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Cards any `json:"cards"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside: the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.
+templ FaqSplit(p FaqSplitProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vItems := p.Items }}
+	{{ vChannels := p.Channels }}
+	{{ vTopics := p.Topics }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "head") }}
+	{{ vCards := uiutils.Def(p.Cards, "grid3") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Gt(uiutils.Len(vItems), float64(0)) {
+		if uiutils.Eq(vLayout, "cards") {
+			@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+				@FaqCards(FaqCardsProps{Items: vItems, Labels: vLabels, Cards: vCards})
+			}
+		}
+		if uiutils.Eq(vLayout, "head") {
+			@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true, "side": "end", "align": "start"}, LandmarkLabel: vLandmarkLabel, Aside: faqSplitFill1(p, vId, vItems)}) {
+				@box.Box(box.BoxProps{}) {
+					@button.Button(button.ButtonProps{Variant: "default", Size: "default", Attrs: uiutils.Attrs("data-testid", "faq-cta")}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "cta")) }
+					}
+				}
+			}
+		}
+		if uiutils.Eq(vLayout, "aside") {
+			@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true, "side": "end", "align": "start"}, LandmarkLabel: vLandmarkLabel, Aside: faqSplitFill2(p, vChannels, vLabels, vLandmarkLabel)}) {
+				@FaqDisclosures(FaqDisclosuresProps{Items: vItems, Name: uiutils.Tpl("{0}-faq", vId)})
+			}
+		}
+		if uiutils.Eq(vLayout, "media") {
+			@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide, "align": "start"}, LandmarkLabel: vLandmarkLabel, Aside: faqSplitFill3(p, vTitle)}) {
+				@FaqDisclosures(FaqDisclosuresProps{Items: vItems, Name: uiutils.Tpl("{0}-faq", vId)})
+				@box.Box(box.BoxProps{}) {
+					@button.Button(button.ButtonProps{Variant: "default", Size: "default", Attrs: uiutils.Attrs("data-testid", "faq-cta")}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "cta")) }
+					}
+				}
+			}
+		}
+		if uiutils.Eq(vLayout, "search") {
+			@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide}, LandmarkLabel: vLandmarkLabel, Aside: faqSplitFill4(p, vTitle)}) {
+				@FaqFinder(FaqFinderProps{Items: vItems, Labels: vLabels, Topics: vTopics})
+			}
+		}
+	}
+}
+
+templ faqSplitFill1(p FaqSplitProps, vId any, vItems any) {
+	@FaqDisclosures(FaqDisclosuresProps{Items: vItems, Name: uiutils.Tpl("{0}-faq", vId)})
+}
+
+templ faqSplitFill2(p FaqSplitProps, vChannels any, vLabels any, vLandmarkLabel any) {
+	@FaqHelp(FaqHelpProps{Labels: vLabels, Channels: vChannels, LandmarkLabel: vLandmarkLabel})
+}
+
+templ faqSplitFill3(p FaqSplitProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+}
+
+templ faqSplitFill4(p FaqSplitProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+}
diff --git a/packages/templ/ui/blocks/feature-accordion.templ b/packages/templ/ui/blocks/feature-accordion.templ
new file mode 100644
index 0000000..9261732
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-accordion.templ
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-accordion.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/disclosure"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureAccordionProps are the props of FeatureAccordion; the values are the JSON shapes of the TypeScript props.
+type FeatureAccordionProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Features any `json:"features"`
+	Empty any `json:"empty"`
+	Expand any `json:"expand"`
+	Media any `json:"media"`
+	Multiple any `json:"multiple"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.
+templ FeatureAccordion(p FeatureAccordionProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vFeatures := p.Features }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vExpand := uiutils.Def(p.Expand, "first") }}
+	{{ vMedia := uiutils.Def(p.Media, "none") }}
+	{{ vMultiple := uiutils.Def(p.Multiple, false) }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vMedia, "image")), "split", "stack"), Media: map[string]any{"show": uiutils.Eq(vMedia, "image")}, LandmarkLabel: vLandmarkLabel, Aside: featureAccordionFill1(p, vTitle)}) {
+		if uiutils.Eq(uiutils.Len(vFeatures), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "layout-grid", Title: vEmpty})
+		} else {
+			@stack.Stack(stack.StackProps{Gap: "0", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for vI, vF := range uiutils.L(vFeatures) {
+					@disclosure.Disclosure(disclosure.DisclosureProps{Variant: "item", Name: uiutils.S(uiutils.Cond(uiutils.T(vMultiple), nil, uiutils.Tpl("{0}-accordion", uiutils.Coalesce(vId, "accordion")))), Open: uiutils.T(uiutils.And(uiutils.Eq(vExpand, "first"), uiutils.Eq(float64(vI), float64(0)))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@disclosure.Summary(disclosure.SummaryProps{Variant: "item"}) {
+							@inline.Inline(inline.InlineProps{Class: "flex min-w-0 items-center justify-start gap-4"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 20})
+								@inline.Inline(inline.InlineProps{Class: "text-base font-semibold"}) {
+									{ uiutils.Text(uiutils.Get(vF, "title")) }
+								}
+							}
+						}
+						@text.Text(text.TextProps{Size: "sm", Class: "pb-4 text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vF, "text")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+templ featureAccordionFill1(p FeatureAccordionProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+}
diff --git a/packages/templ/ui/blocks/feature-cards.templ b/packages/templ/ui/blocks/feature-cards.templ
new file mode 100644
index 0000000..bc62fdf
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-cards.templ
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-cards.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/iconbadge"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureCardsProps are the props of FeatureCards; the values are the JSON shapes of the TypeScript props.
+type FeatureCardsProps struct {
+	Features any `json:"features"`
+	Cols any `json:"cols"`
+	Item any `json:"item"`
+}
+
+// The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names.
+templ FeatureCards(p FeatureCardsProps) {
+	{{ vFeatures := p.Features }}
+	{{ vCols := uiutils.Def(p.Cols, "1-3") }}
+	{{ vItem := uiutils.Def(p.Item, "card") }}
+	@grid.Grid(grid.GridProps{Cols: uiutils.S(vCols), Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "cell")), uiutils.Cnv("w-full gap-px overflow-hidden bg-border p-px", uiutils.Get(presetDefaults, "features", "cells")), "gap-6")), Attrs: uiutils.Attrs("data-testid", "feature-grid")}) {
+		for _, vFeature := range uiutils.L(vFeatures) {
+			if uiutils.Eq(vItem, "tile") {
+				@card.Card(card.CardProps{Variant: "compact", Attrs: uiutils.Attrs("data-testid", "feature-card")}) {
+					@group.Group(group.GroupProps{Gap: "4", Align: "start"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vFeature, "icon")), Size: 20})
+						@stack.Stack(stack.StackProps{Gap: "2"}) {
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vFeature, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vFeature, "text")) }
+							}
+						}
+					}
+				}
+			} else if uiutils.Eq(vItem, "cell") {
+				@stack.Stack(stack.StackProps{Gap: "2", Align: "center", Class: "h-full gap-8 bg-background px-6 py-12 text-center", Attrs: uiutils.Attrs("data-testid", "feature-card")}) {
+					@iconbadge.IconBadge(iconbadge.IconBadgeProps{Variant: "primary", Size: "xl", Attrs: uiutils.Attrs("data-testid", "feature-icon")}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vFeature, "icon")), Size: 24})
+					}
+					@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "semibold", Class: "leading-6"}) {
+						{ uiutils.Text(uiutils.Get(vFeature, "title")) }
+					}
+					@text.Text(text.TextProps{Size: "sm", Weight: "semibold", Class: "leading-5 text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vFeature, "text")) }
+					}
+				}
+			} else {
+				@card.Card(card.CardProps{Variant: "default", Attrs: uiutils.Attrs("data-testid", "feature-card")}) {
+					@card.CardHeader(card.CardHeaderProps{Class: "flex flex-col gap-4"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vFeature, "icon")), Size: 24})
+						@card.CardTitle(card.CardTitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3)))}) {
+							{ uiutils.Text(uiutils.Get(vFeature, "title")) }
+						}
+					}
+					@card.CardContent(card.CardContentProps{}) {
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vFeature, "text")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/feature-grid.templ b/packages/templ/ui/blocks/feature-grid.templ
new file mode 100644
index 0000000..6335663
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-grid.templ
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureGridProps are the props of FeatureGrid; the values are the JSON shapes of the TypeScript props.
+type FeatureGridProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Features any `json:"features"`
+	Empty any `json:"empty"`
+	Action any `json:"action"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Item any `json:"item"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon), media side (rows), density, tone.
+templ FeatureGrid(p FeatureGridProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vFeatures := p.Features }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vAction := p.Action }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vCols := uiutils.Def(p.Cols, "1-3") }}
+	{{ vItem := uiutils.Def(p.Item, "card") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Eq(vItem, "cell") {
+		@SectionFrame(SectionFrameProps{Id: vId, Tone: vTone, Density: vDensity, Measure: "fill", Class: uiutils.Cnv("py-0"), LandmarkLabel: vLandmarkLabel}) {
+			@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between", Class: "w-full"}) {
+				@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "sm", Weight: "semibold", Class: "leading-7", Attrs: uiutils.Attrs("id", uiutils.Add(vId, "-title"))}) {
+					{ uiutils.Text(vTitle) }
+				}
+				if uiutils.T(uiutils.And(uiutils.Get(vAction, "label"), uiutils.Get(vAction, "href"))) {
+					@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Get(vAction, "href")), Variant: "default", Class: uiutils.S(uiutils.Cnv(uiutils.Get(presetDefaults, "text", "tiny"), "shrink-0 font-medium leading-5")), Attrs: uiutils.Attrs("data-testid", "section-action")}) {
+						{ uiutils.Text(uiutils.Get(vAction, "label")) }
+					}
+				}
+			}
+			if uiutils.Eq(uiutils.Len(vFeatures), float64(0)) {
+				@EmptyState(EmptyStateProps{Icon: "layout-grid", Title: vEmpty})
+			} else {
+				@FeatureCards(FeatureCardsProps{Features: vFeatures, Cols: vCols, Item: vItem})
+			}
+		}
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Action: vAction, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+			if uiutils.Eq(uiutils.Len(vFeatures), float64(0)) {
+				@EmptyState(EmptyStateProps{Icon: "layout-grid", Title: vEmpty})
+			} else if uiutils.Eq(vLayout, "rows") {
+				@FeatureRows(FeatureRowsProps{Features: vFeatures, MediaSide: vMediaSide})
+			} else {
+				@FeatureCards(FeatureCardsProps{Features: vFeatures, Cols: vCols, Item: vItem})
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/feature-metric-cards.templ b/packages/templ/ui/blocks/feature-metric-cards.templ
new file mode 100644
index 0000000..d038420
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-metric-cards.templ
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-metric-cards.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureMetricCardsProps are the props of FeatureMetricCards; the values are the JSON shapes of the TypeScript props.
+type FeatureMetricCardsProps struct {
+	Stats any `json:"stats"`
+}
+
+// Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the label.
+templ FeatureMetricCards(p FeatureMetricCardsProps) {
+	{{ vStats := p.Stats }}
+	@box.Box(box.BoxProps{Class: "grid grid-cols-1 gap-4 sm:grid-cols-2"}) {
+		for vI, vS := range uiutils.L(vStats) {
+			if uiutils.Lt(float64(vI), float64(4)) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "feature-stat")}) {
+					@inline.Inline(inline.InlineProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vS, "icon")), Size: 20})
+					}
+					@stack.Stack(stack.StackProps{Gap: "0", Class: "min-w-0"}) {
+						@text.Text(text.TextProps{Size: "lg", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "value")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "label")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "hint")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/feature-pairs.templ b/packages/templ/ui/blocks/feature-pairs.templ
new file mode 100644
index 0000000..0ac6a9e
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-pairs.templ
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-pairs.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeaturePairsProps are the props of FeaturePairs; the values are the JSON shapes of the TypeScript props.
+type FeaturePairsProps struct {
+	Features any `json:"features"`
+}
+
+// Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards.
+templ FeaturePairs(p FeaturePairsProps) {
+	{{ vFeatures := p.Features }}
+	@box.Box(box.BoxProps{Class: "grid grid-cols-1 gap-6 sm:grid-cols-2"}) {
+		for vI, vF := range uiutils.L(vFeatures) {
+			if uiutils.Lt(float64(vI), float64(4)) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "start", Attrs: uiutils.Attrs("data-testid", "feature-item")}) {
+					@inline.Inline(inline.InlineProps{Class: "flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 16})
+					}
+					@stack.Stack(stack.StackProps{Gap: "2", Class: "min-w-0"}) {
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vF, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vF, "text")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/feature-rows.templ b/packages/templ/ui/blocks/feature-rows.templ
new file mode 100644
index 0000000..3f141d2
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-rows.templ
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-rows.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureRowsProps are the props of FeatureRows; the values are the JSON shapes of the TypeScript props.
+type FeatureRowsProps struct {
+	Features any `json:"features"`
+	MediaSide any `json:"mediaSide"`
+}
+
+// The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names.
+templ FeatureRows(p FeatureRowsProps) {
+	{{ vFeatures := p.Features }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	@stack.Stack(stack.StackProps{Gap: "8", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "feature-rows")}) {
+		for _, vFeature := range uiutils.L(vFeatures) {
+			@grid.Grid(grid.GridProps{Cols: "1-2", Class: "group items-center gap-8", Attrs: uiutils.Attrs("data-testid", "feature-card")}) {
+				@stack.Stack(stack.StackProps{Gap: "2", Class: "min-w-0"}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vFeature, "icon")), Size: 24})
+					@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+						{ uiutils.Text(uiutils.Get(vFeature, "title")) }
+					}
+					@text.Text(text.TextProps{Size: "base", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vFeature, "text")) }
+					}
+				}
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("w-full min-w-0", uiutils.Cond(uiutils.T(uiutils.Eq(vMediaSide, "start")), "md:order-first", uiutils.Cond(uiutils.T(uiutils.Eq(vMediaSide, "alternate")), "md:group-even:order-first", ""))))}) {
+					@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vFeature, "title"), Ratio: "4/3"})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/feature-showcase.templ b/packages/templ/ui/blocks/feature-showcase.templ
new file mode 100644
index 0000000..d151b86
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-showcase.templ
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-showcase.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureShowcaseProps are the props of FeatureShowcase; the values are the JSON shapes of the TypeScript props.
+type FeatureShowcaseProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Features any `json:"features"`
+	Empty any `json:"empty"`
+	More any `json:"more"`
+	Item any `json:"item"`
+	Cols any `json:"cols"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4), tone.
+templ FeatureShowcase(p FeatureShowcaseProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vFeatures := p.Features }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vMore := p.More }}
+	{{ vItem := uiutils.Def(p.Item, "picture") }}
+	{{ vCols := uiutils.Def(p.Cols, "3") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, Align: "center", LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vFeatures), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "layout-grid", Title: vEmpty})
+		} else {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "4")), "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4", "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3"))}) {
+				for _, vF := range uiutils.L(vFeatures) {
+					@card.Card(card.CardProps{Variant: "default", Class: "h-full gap-4 overflow-hidden", Attrs: uiutils.Attrs("data-testid", "showcase-card")}) {
+						if uiutils.Eq(vItem, "picture") {
+							@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vF, "title")})
+						} else {
+							@box.Box(box.BoxProps{Class: "flex aspect-video items-center justify-center rounded bg-muted text-foreground", Attrs: uiutils.Attrs("data-testid", "showcase-panel")}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 32})
+							}
+						}
+						@card.CardContent(card.CardContentProps{Class: "flex flex-1 flex-col gap-2"}) {
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vF, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vF, "text")) }
+							}
+							if uiutils.Eq(vItem, "picture") {
+								@MenuEntry(MenuEntryProps{Href: uiutils.Get(vF, "href"), Class: uiutils.Cnv("mt-auto gap-2 pt-2 text-sm font-medium"), Size: "sm", Testid: "read"}) {
+									{ uiutils.Text(vMore) }
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/feature-split.templ b/packages/templ/ui/blocks/feature-split.templ
new file mode 100644
index 0000000..4544536
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-split.templ
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-split.json
+
+package blocks
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureSplitProps are the props of FeatureSplit; the values are the JSON shapes of the TypeScript props.
+type FeatureSplitProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Level any `json:"level"`
+	Features any `json:"features"`
+	Stats any `json:"stats"`
+	Actions any `json:"actions"`
+	Layout any `json:"layout"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four metric cards and the actions), mediaSide, tone.
+templ FeatureSplit(p FeatureSplitProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vLevel := uiutils.Def(p.Level, float64(2)) }}
+	{{ vFeatures := p.Features }}
+	{{ vStats := p.Stats }}
+	{{ vActions := p.Actions }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge, "level": vLevel}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide}, LandmarkLabel: vLandmarkLabel, Aside: featureSplitFill1(p, vTitle, vLayout)}) {
+		if uiutils.Eq(vLayout, "grid") {
+			if uiutils.Gt(uiutils.Len(vFeatures), float64(0)) {
+				@FeaturePairs(FeaturePairsProps{Features: vFeatures})
+			}
+		}
+		if uiutils.Eq(vLayout, "cards") {
+			if uiutils.Gt(uiutils.Len(vFeatures), float64(0)) {
+				@FeatureCards(FeatureCardsProps{Features: vFeatures, Cols: "1-2", Item: "tile"})
+			}
+		}
+		if uiutils.Eq(vLayout, "stats") {
+			if uiutils.Gt(uiutils.Len(vFeatures), float64(0)) {
+				@FeatureStatRows(FeatureStatRowsProps{Features: vFeatures, Stats: vStats})
+			}
+		}
+		if uiutils.Eq(vLayout, "metrics") {
+			if uiutils.Gt(uiutils.Len(vStats), float64(0)) {
+				@FeatureMetricCards(FeatureMetricCardsProps{Stats: vStats})
+			}
+		}
+		if uiutils.T(uiutils.Or(uiutils.Eq(vLayout, "cards"), uiutils.Eq(vLayout, "metrics"))) {
+			@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref")})
+		}
+	}
+}
+
+templ featureSplitFill1(p FeatureSplitProps, vTitle any, vLayout any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "stats")), "1/1", "4/3")})
+}
diff --git a/packages/templ/ui/blocks/feature-stat-rows.templ b/packages/templ/ui/blocks/feature-stat-rows.templ
new file mode 100644
index 0000000..f4ae71c
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-stat-rows.templ
@@ -0,0 +1,62 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-stat-rows.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureStatRowsProps are the props of FeatureStatRows; the values are the JSON shapes of the TypeScript props.
+type FeatureStatRowsProps struct {
+	Features any `json:"features"`
+	Stats any `json:"stats"`
+}
+
+// Two figures of FeatureSplit as cards, then three features as checked rows.
+templ FeatureStatRows(p FeatureStatRowsProps) {
+	{{ vFeatures := p.Features }}
+	{{ vStats := p.Stats }}
+	@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch"}) {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-4"}) {
+			for vI, vS := range uiutils.L(vStats) {
+				if uiutils.Lt(float64(vI), float64(2)) {
+					@stack.Stack(stack.StackProps{Gap: "0", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "feature-stat")}) {
+						@text.Text(text.TextProps{Size: "2xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "value")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "label")) }
+						}
+					}
+				}
+			}
+		}
+		@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+			for vI, vF := range uiutils.L(vFeatures) {
+				if uiutils.Lt(float64(vI), float64(3)) {
+					@group.Group(group.GroupProps{Gap: "4", Align: "start", Attrs: uiutils.Attrs("data-testid", "feature-item")}) {
+						@inline.Inline(inline.InlineProps{Class: "flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground"}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "check", Size: 16})
+						}
+						@stack.Stack(stack.StackProps{Gap: "2", Class: "min-w-0"}) {
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vF, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vF, "text")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/feature-sticky.templ b/packages/templ/ui/blocks/feature-sticky.templ
new file mode 100644
index 0000000..11455db
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-sticky.templ
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-sticky.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureStickyProps are the props of FeatureSticky; the values are the JSON shapes of the TypeScript props.
+type FeatureStickyProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Features any `json:"features"`
+	Empty any `json:"empty"`
+	Active any `json:"active"`
+	MediaSide any `json:"mediaSide"`
+	Item any `json:"item"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item (plain, card), tone, density.
+templ FeatureSticky(p FeatureStickyProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vFeatures := p.Features }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vActive := uiutils.Def(p.Active, "") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vItem := uiutils.Def(p.Item, "plain") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vFeatures), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "layout-grid", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: "1-2", Class: "items-start gap-8", Attrs: uiutils.Attrs("data-testid", "sticky")}) {
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("md:sticky md:top-8", uiutils.Cond(uiutils.T(uiutils.Eq(vMediaSide, "start")), "md:order-first", "md:order-last"))), Attrs: uiutils.Attrs("data-testid", "sticky-media")}) {
+					@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+				}
+				@stack.Stack(stack.StackProps{Gap: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "4", "8")), Align: "stretch", Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for _, vF := range uiutils.L(vFeatures) {
+						@stack.Stack(stack.StackProps{Gap: "2", Class: uiutils.S(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "card")), "rounded bg-card inset-ring inset-ring-border p-6", "py-4"), uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vF, "id"), vActive)), "inset-ring inset-ring-foreground", ""))), Attrs: uiutils.Attrs("data-testid", "item", "aria-current", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vF, "id"), vActive)), "true", nil))}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 24})
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "2xl", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vF, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "base", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vF, "text")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/feature-tabs.templ b/packages/templ/ui/blocks/feature-tabs.templ
new file mode 100644
index 0000000..b249d92
--- /dev/null
+++ b/packages/templ/ui/blocks/feature-tabs.templ
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/feature-tabs.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FeatureTabsProps are the props of FeatureTabs; the values are the JSON shapes of the TypeScript props.
+type FeatureTabsProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Features any `json:"features"`
+	Empty any `json:"empty"`
+	TabsLabel any `json:"tabsLabel"`
+	Active any `json:"active"`
+	Panel any `json:"panel"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the picture, stack: picture below), tone, density.
+templ FeatureTabs(p FeatureTabsProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vFeatures := p.Features }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vTabsLabel := p.TabsLabel }}
+	{{ vActive := uiutils.Def(p.Active, "") }}
+	{{ vPanel := uiutils.Def(p.Panel, "split") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vFeatures), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "layout-grid", Title: vEmpty})
+		} else {
+			@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch"}) {
+				@Switcher(SwitcherProps{Label: vTabsLabel, Class: uiutils.Cnv("w-fit max-w-full flex-wrap")}) {
+					for vI, vF := range uiutils.L(vFeatures) {
+						@SwitcherItem(SwitcherItemProps{Active: uiutils.Or(uiutils.Eq(uiutils.Get(vF, "id"), vActive), uiutils.And(uiutils.Eq(vActive, ""), uiutils.Eq(float64(vI), float64(0))))}) {
+							{ uiutils.Text(uiutils.Get(vF, "title")) }
+						}
+					}
+				}
+				for vI, vF := range uiutils.L(vFeatures) {
+					if uiutils.T(uiutils.Or(uiutils.Eq(uiutils.Get(vF, "id"), vActive), uiutils.And(uiutils.Eq(vActive, ""), uiutils.Eq(float64(vI), float64(0))))) {
+						@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vPanel, "split")), "1-2", "1")), Class: "items-center gap-8", Attrs: uiutils.Attrs("data-testid", "tab-panel", "role", "tabpanel")}) {
+							@stack.Stack(stack.StackProps{Gap: "4"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 24})
+								@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "2xl", Weight: "bold"}) {
+									{ uiutils.Text(uiutils.Get(vF, "title")) }
+								}
+								@text.Text(text.TextProps{Size: "base", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vF, "text")) }
+								}
+							}
+							@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vF, "title"), Ratio: "4/3"})
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/field.templ b/packages/templ/ui/blocks/field.templ
new file mode 100644
index 0000000..9b2dc94
--- /dev/null
+++ b/packages/templ/ui/blocks/field.templ
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/field.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FieldProps are the props of Field; the values are the JSON shapes of the TypeScript props.
+type FieldProps struct {
+	Label any `json:"label"`
+	HtmlFor any `json:"htmlFor"`
+	Hint any `json:"hint"`
+	Error any `json:"error"`
+	Class string `json:"className"`
+}
+
+// A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the control.
+templ Field(p FieldProps) {
+	{{ vLabel := p.Label }}
+	{{ vHtmlFor := p.HtmlFor }}
+	{{ vHint := p.Hint }}
+	{{ vError := p.Error }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex min-w-0 flex-col gap-2", p.Class))}) {
+		@label.Label(label.LabelProps{Class: "text-xs font-bold text-foreground", HTMLFor: uiutils.S(vHtmlFor)}) {
+			{ uiutils.Text(vLabel) }
+		}
+		{ children... }
+		if uiutils.T(vError) {
+			@text.Text(text.TextProps{Class: "m-0 text-xs font-semibold text-destructive", Attrs: uiutils.Attrs("role", "alert")}) {
+				{ uiutils.Text(vError) }
+			}
+		} else if uiutils.T(vHint) {
+			@text.Text(text.TextProps{Class: "m-0 text-xs font-medium text-muted-foreground"}) {
+				{ uiutils.Text(vHint) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/figure-block.templ b/packages/templ/ui/blocks/figure-block.templ
new file mode 100644
index 0000000..a4eb3e5
--- /dev/null
+++ b/packages/templ/ui/blocks/figure-block.templ
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/figure-block.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FigureBlockProps are the props of FigureBlock; the values are the JSON shapes of the TypeScript props.
+type FigureBlockProps struct {
+	Testid any `json:"testid"`
+	Class string `json:"className"`
+}
+
+// Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag figure.
+templ FigureBlock(p FigureBlockProps) {
+	{{ vTestid := p.Testid }}
+	@block.Block(block.BlockProps{Tag: "figure", Class: uiutils.S(uiutils.Cnv(p.Class)), Attrs: uiutils.Attrs("data-testid", vTestid)}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/file-tree-item.templ b/packages/templ/ui/blocks/file-tree-item.templ
new file mode 100644
index 0000000..350be84
--- /dev/null
+++ b/packages/templ/ui/blocks/file-tree-item.templ
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/file-tree-item.json
+
+package blocks
+
+import (
+	buttonplain "github.com/ui8kit/codegen/packages/templ/ui/ui/button-plain"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FileTreeItemProps are the props of FileTreeItem; the values are the JSON shapes of the TypeScript props.
+type FileTreeItemProps struct {
+	Kind any `json:"kind"`
+	Label any `json:"label"`
+	Selected any `json:"selected"`
+	Expanded any `json:"expanded"`
+	Class string `json:"className"`
+}
+
+// A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide.
+templ FileTreeItem(p FileTreeItemProps) {
+	{{ vKind := uiutils.Def(p.Kind, "file") }}
+	{{ vLabel := p.Label }}
+	{{ vSelected := uiutils.Def(p.Selected, false) }}
+	{{ vExpanded := uiutils.Def(p.Expanded, false) }}
+	@buttonplain.ButtonPlain(buttonplain.ButtonPlainProps{Type: "button", Role: "treeitem", Class: uiutils.S(uiutils.Cnv(recipeFileTreeItem.Of(map[string]any{"kind": vKind}), p.Class)), Attrs: uiutils.Attrs("aria-selected", vSelected, "tabindex", uiutils.Cond(uiutils.T(vSelected), float64(0), float64(-1)), "aria-expanded", uiutils.Cond(uiutils.T(uiutils.Eq(vKind, "folder")), vExpanded, nil), "data-slot", "file-tree-item", "data-kind", vKind, "data-state", uiutils.Cond(uiutils.T(vSelected), "selected", "default"))}) {
+		if uiutils.Eq(vKind, "folder") {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Cond(uiutils.T(vExpanded), "chevron-down", "chevron-right")), Size: 16})
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "folder-open", Size: 16})
+		} else {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "file", Size: 16})
+		}
+		@inline.Inline(inline.InlineProps{Class: "whitespace-nowrap", Attrs: uiutils.Attrs("data-slot", "file-tree-label")}) {
+			{ uiutils.Text(vLabel) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/file-tree.templ b/packages/templ/ui/blocks/file-tree.templ
new file mode 100644
index 0000000..ea1224e
--- /dev/null
+++ b/packages/templ/ui/blocks/file-tree.templ
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/file-tree.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FileTreeProps are the props of FileTree; the values are the JSON shapes of the TypeScript props.
+type FileTreeProps struct {
+	Label any `json:"label"`
+	Class string `json:"className"`
+}
+
+// The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead` from the utils to the keydown (vertical, no loop).
+templ FileTree(p FileTreeProps) {
+	{{ vLabel := p.Label }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-2 p-2", p.Class)), Attrs: uiutils.Attrs("role", "tree", "aria-label", vLabel, "data-slot", "file-tree")}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-brand.templ b/packages/templ/ui/blocks/footer-brand.templ
new file mode 100644
index 0000000..72ece0a
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-brand.templ
@@ -0,0 +1,38 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-brand.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterBrandProps are the props of FooterBrand; the values are the JSON shapes of the TypeScript props.
+type FooterBrandProps struct {
+	Brand any `json:"brand"`
+	Tagline any `json:"tagline"`
+}
+
+// The brand of FooterSplit: a mark and the brand word over the tagline.
+templ FooterBrand(p FooterBrandProps) {
+	{{ vBrand := p.Brand }}
+	{{ vTagline := p.Tagline }}
+	@stack.Stack(stack.StackProps{Gap: "2", Align: "start", Attrs: uiutils.Attrs("data-testid", "footer-brand")}) {
+		@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+			@inline.Inline(inline.InlineProps{Class: "flex size-8 items-center justify-center rounded bg-foreground text-background"}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "layers", Size: 16})
+			}
+			@text.Text(text.TextProps{Size: "xl", Weight: "bold"}) {
+				{ uiutils.Text(vBrand) }
+			}
+		}
+		@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+			{ uiutils.Text(vTagline) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-card.templ b/packages/templ/ui/blocks/footer-card.templ
new file mode 100644
index 0000000..3088bf4
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-card.templ
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterCardProps are the props of FooterCard; the values are the JSON shapes of the TypeScript props.
+type FooterCardProps struct {
+	Label any `json:"label"`
+	Brand any `json:"brand"`
+	Groups any `json:"groups"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card.
+templ FooterCard(p FooterCardProps) {
+	{{ vLabel := p.Label }}
+	{{ vBrand := p.Brand }}
+	{{ vGroups := p.Groups }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "footer", Class: "py-8", Attrs: uiutils.Attrs("data-testid", "site-footer", "data-layout", "card", "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv(uiutils.Cnv("mx-auto w-full px-4", uiutils.Get(presetDefaults, "section", "landing")), "px-0")), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex w-full flex-row items-start overflow-hidden bg-muted p-10", uiutils.Get(presetDefaults, "footer", "card"))), Attrs: uiutils.Attrs("data-testid", "footer-card")}) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: uiutils.S(uiutils.Cnv("h-8 shrink-0", uiutils.Get(presetDefaults, "footer", "brand"))), Attrs: uiutils.Attrs("data-testid", "footer-brand")}) {
+					@inline.Inline(inline.InlineProps{Class: "flex size-8 items-center justify-center rounded bg-foreground text-background"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "hexagon", Size: 16})
+					}
+					@text.Text(text.TextProps{Size: "base", Weight: "bold"}) {
+						{ uiutils.Text(vBrand) }
+					}
+				}
+				if uiutils.Gt(uiutils.Len(vGroups), float64(0)) {
+					@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", vLabel, vLandmarkLabel)), vLabel), Class: uiutils.Cnv("min-w-0 flex-1")}) {
+						@group.Group(group.GroupProps{Gap: "0", Align: "start", Class: uiutils.S(uiutils.Cnv("flex w-full flex-nowrap justify-between", uiutils.Get(presetDefaults, "footer", "groups"))), Attrs: uiutils.Attrs("data-testid", "footer-groups")}) {
+							for _, vG := range uiutils.L(vGroups) {
+								@stack.Stack(stack.StackProps{Gap: "4", Attrs: uiutils.Attrs("data-testid", "group")}) {
+									@text.Text(text.TextProps{Size: "xs", Weight: "semibold", Class: "leading-5"}) {
+										{ uiutils.Text(uiutils.Get(vG, "title")) }
+									}
+									@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-4 p-0"}) {
+										for _, vItem := range uiutils.L(uiutils.Get(vG, "links")) {
+											@list.ListItem(list.ListItemProps{}) {
+												@MenuEntry(MenuEntryProps{Href: uiutils.Get(vItem, "href"), Class: uiutils.Cnv("text-xs leading-5 text-muted-foreground")}) {
+													{ uiutils.Text(uiutils.Get(vItem, "name")) }
+												}
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-channels.templ b/packages/templ/ui/blocks/footer-channels.templ
new file mode 100644
index 0000000..9f8d4a7
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-channels.templ
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-channels.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterChannelsProps are the props of FooterChannels; the values are the JSON shapes of the TypeScript props.
+type FooterChannelsProps struct {
+	Extras any `json:"extras"`
+}
+
+// The channels of the community as three cards: a glyph over the name and one line.
+templ FooterChannels(p FooterChannelsProps) {
+	{{ vExtras := p.Extras }}
+	if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "channels")), float64(0)) {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-1 gap-4 sm:grid-cols-3"}) {
+			for vI, vC := range uiutils.L(uiutils.Get(vExtras, "channels")) {
+				if uiutils.Lt(float64(vI), float64(3)) {
+					@stack.Stack(stack.StackProps{Gap: "2", Align: "start", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "footer-channel")}) {
+						@inline.Inline(inline.InlineProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground"}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vC, "icon")), Size: 20})
+						}
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vC, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vC, "text")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-columns.templ b/packages/templ/ui/blocks/footer-columns.templ
new file mode 100644
index 0000000..7662c6f
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-columns.templ
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-columns.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterColumnsProps are the props of FooterColumns; the values are the JSON shapes of the TypeScript props.
+type FooterColumnsProps struct {
+	Label any `json:"label"`
+	Groups any `json:"groups"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The link groups of SitemapFooter as columns: a group title over its links, up to five columns.
+templ FooterColumns(p FooterColumnsProps) {
+	{{ vLabel := p.Label }}
+	{{ vGroups := p.Groups }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Gt(uiutils.Len(vGroups), float64(0)) {
+		@block.Block(block.BlockProps{Tag: "nav", Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vLabel))}) {
+			@grid.Grid(grid.GridProps{Cols: "1", Class: "grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5", Attrs: uiutils.Attrs("data-testid", "footer-groups")}) {
+				for _, vG := range uiutils.L(vGroups) {
+					@stack.Stack(stack.StackProps{Gap: "2", Attrs: uiutils.Attrs("data-testid", "group")}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vG, "title")) }
+						}
+						@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0"}) {
+							for _, vItem := range uiutils.L(uiutils.Get(vG, "links")) {
+								@list.ListItem(list.ListItemProps{}) {
+									@MenuEntry(MenuEntryProps{Href: uiutils.Get(vItem, "href"), Class: uiutils.Cnv("text-sm text-muted-foreground")}) {
+										{ uiutils.Text(uiutils.Get(vItem, "name")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-contacts.templ b/packages/templ/ui/blocks/footer-contacts.templ
new file mode 100644
index 0000000..e94ddc8
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-contacts.templ
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-contacts.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterContactsProps are the props of FooterContacts; the values are the JSON shapes of the TypeScript props.
+type FooterContactsProps struct {
+	Extras any `json:"extras"`
+}
+
+// The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value.
+templ FooterContacts(p FooterContactsProps) {
+	{{ vExtras := p.Extras }}
+	if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "contacts")), float64(0)) {
+		@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+			for _, vC := range uiutils.L(uiutils.Get(vExtras, "contacts")) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center", Attrs: uiutils.Attrs("data-testid", "footer-contact")}) {
+					@inline.Inline(inline.InlineProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vC, "icon")), Size: 20})
+					}
+					@stack.Stack(stack.StackProps{Gap: "0"}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vC, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vC, "text")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-figures.templ b/packages/templ/ui/blocks/footer-figures.templ
new file mode 100644
index 0000000..f204229
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-figures.templ
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-figures.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterFiguresProps are the props of FooterFigures; the values are the JSON shapes of the TypeScript props.
+type FooterFiguresProps struct {
+	Extras any `json:"extras"`
+}
+
+// Three figures in a row under the brand of FooterSplit.
+templ FooterFigures(p FooterFiguresProps) {
+	{{ vExtras := p.Extras }}
+	if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "stats")), float64(0)) {
+		@group.Group(group.GroupProps{Gap: "8", Class: "flex-wrap"}) {
+			for vI, vS := range uiutils.L(uiutils.Get(vExtras, "stats")) {
+				if uiutils.Lt(float64(vI), float64(3)) {
+					@stack.Stack(stack.StackProps{Gap: "0", Attrs: uiutils.Attrs("data-testid", "footer-stat")}) {
+						@text.Text(text.TextProps{Size: "xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "value")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "label")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-group-cards.templ b/packages/templ/ui/blocks/footer-group-cards.templ
new file mode 100644
index 0000000..fd103b3
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-group-cards.templ
@@ -0,0 +1,57 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-group-cards.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterGroupCardsProps are the props of FooterGroupCards; the values are the JSON shapes of the TypeScript props.
+type FooterGroupCardsProps struct {
+	Label any `json:"label"`
+	Groups any `json:"groups"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide screens.
+templ FooterGroupCards(p FooterGroupCardsProps) {
+	{{ vLabel := p.Label }}
+	{{ vGroups := p.Groups }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Gt(uiutils.Len(vGroups), float64(0)) {
+		@block.Block(block.BlockProps{Tag: "nav", Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vLabel))}) {
+			@box.Box(box.BoxProps{Class: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"}) {
+				for _, vG := range uiutils.L(vGroups) {
+					@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "rounded bg-card inset-ring inset-ring-border p-6", Attrs: uiutils.Attrs("data-testid", "group")}) {
+						@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+							@inline.Inline(inline.InlineProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vG, "icon")), Size: 20})
+							}
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vG, "title")) }
+							}
+						}
+						@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0"}) {
+							for _, vItem := range uiutils.L(uiutils.Get(vG, "links")) {
+								@list.ListItem(list.ListItemProps{}) {
+									@MenuEntry(MenuEntryProps{Href: uiutils.Get(vItem, "href"), Class: uiutils.Cnv("text-sm text-muted-foreground"), Variant: "muted", Size: "sm"}) {
+										{ uiutils.Text(uiutils.Get(vItem, "name")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-link-columns.templ b/packages/templ/ui/blocks/footer-link-columns.templ
new file mode 100644
index 0000000..da39a8b
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-link-columns.templ
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-link-columns.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterLinkColumnsProps are the props of FooterLinkColumns; the values are the JSON shapes of the TypeScript props.
+type FooterLinkColumnsProps struct {
+	Label any `json:"label"`
+	Groups any `json:"groups"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The first three link groups of FooterSplit as small columns beside each other.
+templ FooterLinkColumns(p FooterLinkColumnsProps) {
+	{{ vLabel := p.Label }}
+	{{ vGroups := p.Groups }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Gt(uiutils.Len(vGroups), float64(0)) {
+		@block.Block(block.BlockProps{Tag: "nav", Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vLabel))}) {
+			@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-8 sm:grid-cols-3"}) {
+				for vI, vG := range uiutils.L(vGroups) {
+					if uiutils.Lt(float64(vI), float64(3)) {
+						@stack.Stack(stack.StackProps{Gap: "2", Attrs: uiutils.Attrs("data-testid", "group")}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vG, "title")) }
+							}
+							@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0"}) {
+								for _, vItem := range uiutils.L(uiutils.Get(vG, "links")) {
+									@list.ListItem(list.ListItemProps{}) {
+										@MenuEntry(MenuEntryProps{Href: uiutils.Get(vItem, "href"), Class: uiutils.Cnv("text-sm text-muted-foreground"), Variant: "muted", Size: "sm"}) {
+											{ uiutils.Text(uiutils.Get(vItem, "name")) }
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-points.templ b/packages/templ/ui/blocks/footer-points.templ
new file mode 100644
index 0000000..bc19358
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-points.templ
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-points.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterPointsProps are the props of FooterPoints; the values are the JSON shapes of the TypeScript props.
+type FooterPointsProps struct {
+	Extras any `json:"extras"`
+	Title any `json:"title"`
+}
+
+// Four points with their glyphs in a column, under the tagline of FooterSplit.
+templ FooterPoints(p FooterPointsProps) {
+	{{ vExtras := p.Extras }}
+	{{ vTitle := p.Title }}
+	if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "points")), float64(0)) {
+		@stack.Stack(stack.StackProps{Gap: "4", Align: "start"}) {
+			@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+				{ uiutils.Text(vTitle) }
+			}
+			for vI, vP := range uiutils.L(uiutils.Get(vExtras, "points")) {
+				if uiutils.Lt(float64(vI), float64(4)) {
+					@group.Group(group.GroupProps{Gap: "2", Align: "center", Attrs: uiutils.Attrs("data-testid", "footer-point")}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vP, "icon")), Size: 16})
+						@text.Text(text.TextProps{Size: "sm"}) {
+							{ uiutils.Text(uiutils.Get(vP, "title")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-signup-card.templ b/packages/templ/ui/blocks/footer-signup-card.templ
new file mode 100644
index 0000000..509ab60
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-signup-card.templ
@@ -0,0 +1,50 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-signup-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterSignupCardProps are the props of FooterSignupCard; the values are the JSON shapes of the TypeScript props.
+type FooterSignupCardProps struct {
+	Id any `json:"id"`
+	Labels any `json:"labels"`
+}
+
+// The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note.
+templ FooterSignupCard(p FooterSignupCardProps) {
+	{{ vId := p.Id }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "rounded bg-card inset-ring inset-ring-border p-6", Attrs: uiutils.Attrs("data-testid", "signup")}) {
+		@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "mail", Size: 16})
+			@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "signup")) }
+			}
+		}
+		@form.Form(form.FormProps{Method: "dialog", Class: uiutils.S(uiutils.Cnv("w-full max-w-md", uiutils.Cond(uiutils.T(false), "mx-auto", ""))), Attrs: uiutils.Attrs("data-testid", "email-form")}) {
+			@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-email", vId)), Class: "sr-only"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "email")) }
+			}
+			@group.Group(group.GroupProps{Gap: "2", Align: "start", Class: "w-full flex-wrap"}) {
+				@input.Input(input.InputProps{Type: "email", Name: "email", Class: "min-w-0 flex-1", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-email", vId), "data-testid", "field")})
+				@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "submit", Attrs: uiutils.Attrs("data-testid", "submit")}) {
+					{ uiutils.Text(uiutils.Get(vLabels, "subscribe")) }
+				}
+			}
+		}
+		@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "note")) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-sitemap.templ b/packages/templ/ui/blocks/footer-sitemap.templ
new file mode 100644
index 0000000..94f1bc8
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-sitemap.templ
@@ -0,0 +1,28 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-sitemap.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterSitemapProps are the props of FooterSitemap; the values are the JSON shapes of the TypeScript props.
+type FooterSitemapProps struct {
+	Href any `json:"href"`
+	Label any `json:"label"`
+}
+
+// The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no link).
+templ FooterSitemap(p FooterSitemapProps) {
+	{{ vHref := p.Href }}
+	{{ vLabel := p.Label }}
+	if uiutils.T(vHref) {
+		@link.Link(link.LinkProps{Href: uiutils.S(vHref), Size: "sm", Attrs: uiutils.Attrs("data-testid", "footer-sitemap")}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+			{ uiutils.Text(vLabel) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/footer-split.templ b/packages/templ/ui/blocks/footer-split.templ
new file mode 100644
index 0000000..6043376
--- /dev/null
+++ b/packages/templ/ui/blocks/footer-split.templ
@@ -0,0 +1,112 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/footer-split.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// FooterSplitProps are the props of FooterSplit; the values are the JSON shapes of the TypeScript props.
+type FooterSplitProps struct {
+	Id any `json:"id"`
+	Label any `json:"label"`
+	Brand any `json:"brand"`
+	Tagline any `json:"tagline"`
+	Copyright any `json:"copyright"`
+	Groups any `json:"groups"`
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two actions, or the community channels and figures), mediaSide, tone.
+templ FooterSplit(p FooterSplitProps) {
+	{{ vId := uiutils.Def(p.Id, "footer") }}
+	{{ vLabel := p.Label }}
+	{{ vBrand := p.Brand }}
+	{{ vTagline := p.Tagline }}
+	{{ vCopyright := p.Copyright }}
+	{{ vGroups := p.Groups }}
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "stats") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "footer", Class: uiutils.S(uiutils.Cnv("border-t border-border", uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "muted")), "bg-muted", ""))), Attrs: uiutils.Attrs("data-testid", "footer-split", "data-layout", vLayout, "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "py-12")), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			if uiutils.Eq(vLayout, "stats") {
+				@stack.Stack(stack.StackProps{Gap: "8", Align: "stretch"}) {
+					@group.Group(group.GroupProps{Gap: "6", Align: "start", Justify: "between", Class: "flex-wrap"}) {
+						@stack.Stack(stack.StackProps{Gap: "6", Align: "start"}) {
+							@FooterBrand(FooterBrandProps{Brand: vBrand, Tagline: vTagline})
+							@FooterFigures(FooterFiguresProps{Extras: vExtras})
+						}
+						@FooterSitemap(FooterSitemapProps{Href: uiutils.Get(vExtras, "sitemapHref"), Label: uiutils.Get(vLabels, "sitemap")})
+					}
+					@FooterGroupCards(FooterGroupCardsProps{Label: vLabel, Groups: vGroups, LandmarkLabel: vLandmarkLabel})
+					@box.Box(box.BoxProps{Class: "border-t border-border pt-6"}) {
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(vCopyright) }
+						}
+					}
+				}
+			} else {
+				@box.Box(box.BoxProps{Class: "grid grid-cols-1 items-center gap-8 lg:grid-cols-2"}) {
+					if uiutils.Eq(vMediaSide, "start") {
+						@MediaFrame(MediaFrameProps{Alt: vBrand, Ratio: "4/3"})
+					}
+					@stack.Stack(stack.StackProps{Gap: "8", Align: "stretch"}) {
+						if uiutils.T(uiutils.Or(uiutils.Eq(vLayout, "points"), uiutils.Eq(vLayout, "links"))) {
+							@FooterBrand(FooterBrandProps{Brand: vBrand, Tagline: vTagline})
+						} else {
+							@stack.Stack(stack.StackProps{Gap: "2", Align: "start"}) {
+								@text.Text(text.TextProps{Size: "xl", Weight: "bold"}) {
+									{ uiutils.Text(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "newsletter")), uiutils.Get(vLabels, "loopTitle"), uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "channels")), uiutils.Get(vLabels, "joinTitle"), uiutils.Get(vLabels, "title")))) }
+								}
+								@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "newsletter")), uiutils.Get(vLabels, "loopText"), uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "channels")), uiutils.Get(vLabels, "joinText"), uiutils.Get(vLabels, "text")))) }
+								}
+							}
+						}
+						if uiutils.Eq(vLayout, "points") {
+							@FooterPoints(FooterPointsProps{Extras: vExtras, Title: uiutils.Get(vLabels, "points")})
+						}
+						if uiutils.Eq(vLayout, "newsletter") {
+							@FooterSignupCard(FooterSignupCardProps{Id: vId, Labels: vLabels})
+						}
+						if uiutils.T(uiutils.Or(uiutils.Eq(vLayout, "links"), uiutils.Eq(vLayout, "newsletter"))) {
+							@FooterLinkColumns(FooterLinkColumnsProps{Label: vLabel, Groups: vGroups, LandmarkLabel: vLandmarkLabel})
+						}
+						if uiutils.Eq(vLayout, "contacts") {
+							@FooterContacts(FooterContactsProps{Extras: vExtras})
+							@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vLabels, "cta"), PrimaryHref: uiutils.Get(vExtras, "ctaHref"), Secondary: uiutils.Get(vLabels, "secondary"), SecondaryHref: uiutils.Get(vExtras, "secondaryHref")})
+						}
+						if uiutils.Eq(vLayout, "channels") {
+							@FooterChannels(FooterChannelsProps{Extras: vExtras})
+							@FooterFigures(FooterFiguresProps{Extras: vExtras})
+						}
+						@box.Box(box.BoxProps{Class: "border-t border-border pt-6"}) {
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(vCopyright) }
+							}
+						}
+					}
+					if !uiutils.Eq(vMediaSide, "start") {
+						@MediaFrame(MediaFrameProps{Alt: vBrand, Ratio: "4/3"})
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/hero-badge.templ b/packages/templ/ui/blocks/hero-badge.templ
new file mode 100644
index 0000000..1d8c79f
--- /dev/null
+++ b/packages/templ/ui/blocks/hero-badge.templ
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/hero-badge.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// HeroBadgeProps are the props of HeroBadge; the values are the JSON shapes of the TypeScript props.
+type HeroBadgeProps struct {
+	Label any `json:"label"`
+	Mark any `json:"mark"`
+}
+
+// A composite badge on a dark band: an optional small mark beside a label.
+templ HeroBadge(p HeroBadgeProps) {
+	{{ vLabel := p.Label }}
+	{{ vMark := p.Mark }}
+	@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: uiutils.S(uiutils.Cnv("h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30", uiutils.Get(presetDefaults, "hero", "badge"))), Attrs: uiutils.Attrs("data-testid", "section-badge")}) {
+		if uiutils.T(vMark) {
+			@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm", Attrs: uiutils.Attrs("data-testid", "badge-mark")}) {
+				{ uiutils.Text(vMark) }
+			}
+		}
+		@text.Text(text.TextProps{Size: "xs", Weight: "bold", Class: "leading-5 text-background"}) {
+			{ uiutils.Text(vLabel) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/hero-classic.templ b/packages/templ/ui/blocks/hero-classic.templ
new file mode 100644
index 0000000..d04eb0e
--- /dev/null
+++ b/packages/templ/ui/blocks/hero-classic.templ
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/hero-classic.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// HeroClassicProps are the props of HeroClassic; the values are the JSON shapes of the TypeScript props.
+type HeroClassicProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Level any `json:"level"`
+	Badge any `json:"badge"`
+	Topics any `json:"topics"`
+	Actions any `json:"actions"`
+	Media any `json:"media"`
+	Layout any `json:"layout"`
+	Scale any `json:"scale"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster). Axes: layout, media kind and side, scale, tone, density, actions mode.
+templ HeroClassic(p HeroClassicProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vBadge := p.Badge }}
+	{{ vTopics := p.Topics }}
+	{{ vActions := p.Actions }}
+	{{ vMedia := p.Media }}
+	{{ vLayout := uiutils.Def(p.Layout, "centered") }}
+	{{ vScale := uiutils.Def(p.Scale, "default") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "roomy") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vMediaKind := any(uiutils.Coalesce(uiutils.Get(vMedia, "kind"), "none")) }}
+	{{ vMediaSide := any(uiutils.Coalesce(uiutils.Get(vMedia, "side"), "end")) }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vText, Heading: map[string]any{"level": vLevel, "scale": vScale, "badge": vBadge}, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "split", "stack"), Align: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "start", "center"), Media: map[string]any{"show": uiutils.Or(uiutils.Eq(vMediaKind, "image"), uiutils.Eq(vMediaKind, "code"), uiutils.Eq(vMediaKind, "cluster")), "side": vMediaSide}, Tone: vTone, Density: vDensity, Class: uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Cond(uiutils.T(uiutils.Eq(vMediaKind, "backdrop")), "image", "none"), "image")), "relative isolate overflow-hidden", "")), LandmarkLabel: vLandmarkLabel, Aside: heroClassicFill1(p, vTitle, vMedia, vMediaKind)}) {
+		@Backdrop(BackdropProps{Kind: uiutils.Cond(uiutils.T(uiutils.Eq(vMediaKind, "backdrop")), "image", "none"), Alt: vTitle})
+		if uiutils.T(uiutils.Get(vActions, "cta")) {
+			if uiutils.Eq(uiutils.Get(vActions, "mode"), "form") {
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("w-full max-w-xl", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "centered")), "mx-auto", ""))), Attrs: uiutils.Attrs("data-testid", "email-form")}) {
+					@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-email", vId)), Class: "sr-only"}) {
+						{ uiutils.Text(uiutils.Get(vActions, "emailLabel")) }
+					}
+					@group.Group(group.GroupProps{Gap: "2", Align: "start", Class: "w-full flex-wrap"}) {
+						@input.Input(input.InputProps{Type: "text", Name: "prompt", Class: "min-w-0 flex-1", Placeholder: uiutils.S(uiutils.Get(vActions, "emailLabel")), Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-email", vId), "data-testid", "field")})
+						@button.Button(button.ButtonProps{Variant: "default", Size: "default", Href: uiutils.S(uiutils.Get(vActions, "href")), Attrs: uiutils.Attrs("data-testid", "submit")}) {
+							{ uiutils.Text(uiutils.Get(vActions, "cta")) }
+						}
+					}
+				}
+			} else {
+				@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref"), Align: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "centered")), "center", "start")})
+			}
+		}
+		if uiutils.T(uiutils.And(vTopics, uiutils.Gt(uiutils.Len(vTopics), float64(0)))) {
+			@TopicChips(TopicChipsProps{Topics: vTopics})
+		}
+	}
+}
+
+templ heroClassicFill1(p HeroClassicProps, vTitle any, vMedia any, vMediaKind any) {
+	if uiutils.T(uiutils.And(uiutils.Eq(vMediaKind, "code"), uiutils.Get(vMedia, "lines"), uiutils.Gt(uiutils.Len(uiutils.Get(vMedia, "lines")), float64(0)), uiutils.Get(vMedia, "codeTitle"), uiutils.Get(vMedia, "prompt"))) {
+		@CodeWindow(CodeWindowProps{Title: uiutils.Get(vMedia, "codeTitle"), Prompt: uiutils.Get(vMedia, "prompt"), Lines: uiutils.Get(vMedia, "lines")})
+	}
+	if uiutils.Eq(vMediaKind, "cluster") {
+		@grid.Grid(grid.GridProps{Cols: "3", Class: "items-end gap-4", Attrs: uiutils.Attrs("data-testid", "cluster")}) {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("w-full", ""))}) {
+				@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4"})
+			}
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("w-full", "-translate-y-4"))}) {
+				@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+			}
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("w-full", ""))}) {
+				@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4"})
+			}
+		}
+	}
+	if uiutils.T(uiutils.Or(uiutils.Eq(vMediaKind, "image"))) {
+		@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+	}
+}
diff --git a/packages/templ/ui/blocks/hero-head.templ b/packages/templ/ui/blocks/hero-head.templ
new file mode 100644
index 0000000..d5b96c2
--- /dev/null
+++ b/packages/templ/ui/blocks/hero-head.templ
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/hero-head.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	linkplain "github.com/ui8kit/codegen/packages/templ/ui/ui/link-plain"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// HeroHeadProps are the props of HeroHead; the values are the JSON shapes of the TypeScript props.
+type HeroHeadProps struct {
+	Brand any `json:"brand"`
+	BrandHref any `json:"brandHref"`
+	Links any `json:"links"`
+	Current any `json:"current"`
+	Login any `json:"login"`
+	LoginHref any `json:"loginHref"`
+	Cta any `json:"cta"`
+	Href any `json:"href"`
+	Skip any `json:"skip"`
+	NavLabel any `json:"navLabel"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a call to action.
+templ HeroHead(p HeroHeadProps) {
+	{{ vBrand := p.Brand }}
+	{{ vBrandHref := p.BrandHref }}
+	{{ vLinks := p.Links }}
+	{{ vCurrent := uiutils.Def(p.Current, "") }}
+	{{ vLogin := p.Login }}
+	{{ vLoginHref := p.LoginHref }}
+	{{ vCta := p.Cta }}
+	{{ vHref := p.Href }}
+	{{ vSkip := p.Skip }}
+	{{ vNavLabel := p.NavLabel }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "header", Class: uiutils.S(uiutils.Cnv("flex w-full flex-wrap items-center justify-between pr-4", uiutils.Get(presetDefaults, "hero", "head"))), Attrs: uiutils.Attrs("data-testid", "hero-head", "aria-label", vLandmarkLabel)}) {
+		if uiutils.T(vSkip) {
+			@linkplain.LinkPlain(linkplain.LinkPlainProps{Href: "#main-content", Class: "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border", Attrs: uiutils.Attrs("data-testid", "skip-link")}) {
+				{ uiutils.Text(vSkip) }
+			}
+		}
+		@MenuEntry(MenuEntryProps{Href: vBrandHref, Class: uiutils.Cnv(uiutils.Cnv(uiutils.Get(presetDefaults, "text", "small"), "font-medium leading-6 text-background")), Testid: "brand"}) {
+			{ uiutils.Text(vBrand) }
+		}
+		if uiutils.T(uiutils.And(vLinks, uiutils.Gt(uiutils.Len(vLinks), float64(0)))) {
+			@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", vNavLabel, vLandmarkLabel)), vNavLabel), Testid: "site-nav"}) {
+				@group.Group(group.GroupProps{Gap: "8", Align: "center", Class: "flex-wrap"}) {
+					for _, vL := range uiutils.L(vLinks) {
+						if uiutils.T(uiutils.Get(vL, "href")) {
+							@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Get(vL, "href")), Variant: "default", AriaCurrent: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vL, "id"), vCurrent)), "page", nil)), Class: "text-xs font-medium leading-5 text-background", Attrs: uiutils.Attrs("data-testid", "nav-link")}) {
+								{ uiutils.Text(uiutils.Get(vL, "name")) }
+							}
+						} else {
+							@inline.Inline(inline.InlineProps{Class: "text-xs font-medium leading-5 text-background", Attrs: uiutils.Attrs("data-testid", "nav-link")}) {
+								{ uiutils.Text(uiutils.Get(vL, "name")) }
+							}
+						}
+					}
+				}
+			}
+		}
+		@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+			if uiutils.T(vLogin) {
+				@button.Button(button.ButtonProps{Href: uiutils.S(vLoginHref), Variant: "ghost", Size: "sm", Class: "text-background hover:bg-background/10", Attrs: uiutils.Attrs("data-testid", "nav-login")}) {
+					{ uiutils.Text(vLogin) }
+				}
+			}
+			if uiutils.T(vCta) {
+				@button.Button(button.ButtonProps{Href: uiutils.S(vHref), Variant: "secondary", Size: "sm", Attrs: uiutils.Attrs("data-testid", "header-cta")}) {
+					{ uiutils.Text(vCta) }
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/hero-prompt.templ b/packages/templ/ui/blocks/hero-prompt.templ
new file mode 100644
index 0000000..8976eb3
--- /dev/null
+++ b/packages/templ/ui/blocks/hero-prompt.templ
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/hero-prompt.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// HeroPromptProps are the props of HeroPrompt; the values are the JSON shapes of the TypeScript props.
+type HeroPromptProps struct {
+	Title any `json:"title"`
+	Level any `json:"level"`
+	Badge any `json:"badge"`
+	BadgeMark any `json:"badgeMark"`
+	Actions any `json:"actions"`
+	Composer any `json:"composer"`
+	Nav any `json:"nav"`
+	Topics any `json:"topics"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic pills.
+templ HeroPrompt(p HeroPromptProps) {
+	{{ vTitle := p.Title }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vBadge := p.Badge }}
+	{{ vBadgeMark := p.BadgeMark }}
+	{{ vActions := p.Actions }}
+	{{ vComposer := p.Composer }}
+	{{ vNav := p.Nav }}
+	{{ vTopics := p.Topics }}
+	{{ vDensity := uiutils.Def(p.Density, "roomy") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Class: uiutils.S(uiutils.Cnv("flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70", uiutils.Get(presetDefaults, "hero", "band"))), Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, "home-hero-title"), "data-testid", "section", "data-tone", "inverse", "data-density", vDensity, "data-chrome", "nav", "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full px-8", uiutils.Get(presetDefaults, "hero", "container"))), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@stack.Stack(stack.StackProps{Gap: "0", Align: "stretch"}) {
+				@HeroHead(HeroHeadProps{Brand: uiutils.Get(vNav, "brand"), Links: uiutils.Get(vNav, "links"), Current: uiutils.Get(vNav, "current"), Login: uiutils.Get(vNav, "login"), LoginHref: uiutils.Get(vNav, "loginHref"), Skip: uiutils.Get(vNav, "skip"), NavLabel: uiutils.Get(vNav, "label"), Cta: uiutils.Get(vActions, "cta"), Href: uiutils.Get(vActions, "href"), LandmarkLabel: vLandmarkLabel})
+				@stack.Stack(stack.StackProps{Gap: "0", Align: "center", Class: uiutils.S(uiutils.Cnv("mx-auto w-full pt-24 pb-16", uiutils.Get(presetDefaults, "hero", "column"))), Attrs: uiutils.Attrs("data-testid", "hero-column")}) {
+					if uiutils.T(vBadge) {
+						@HeroBadge(HeroBadgeProps{Label: vBadge, Mark: vBadgeMark})
+					}
+					@WeightedTitle(WeightedTitleProps{Id: "home-hero-title", Title: vTitle, Weights: uiutils.Get(presetDefaults, "hero", "titleWeights"), Level: vLevel})
+					if uiutils.Eq(uiutils.Get(vActions, "mode"), "form") {
+						@PromptComposer(PromptComposerProps{Label: uiutils.Get(vActions, "emailLabel"), AttachLabel: uiutils.Get(vComposer, "attachLabel"), ModelLabel: uiutils.Get(vComposer, "modelLabel"), Send: uiutils.Get(vActions, "cta"), Href: uiutils.Get(vActions, "href")})
+					} else if uiutils.T(uiutils.Get(vActions, "cta")) {
+						@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref"), Align: uiutils.Cond(uiutils.T(true), "center", "start")})
+					}
+					if uiutils.T(uiutils.And(vTopics, uiutils.Gt(uiutils.Len(vTopics), float64(0)))) {
+						@TopicChips(TopicChipsProps{Topics: vTopics, Tone: "inverse"})
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/hero-split-extras.templ b/packages/templ/ui/blocks/hero-split-extras.templ
new file mode 100644
index 0000000..95ebd91
--- /dev/null
+++ b/packages/templ/ui/blocks/hero-split-extras.templ
@@ -0,0 +1,114 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/hero-split-extras.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// HeroSplitExtrasProps are the props of HeroSplitExtras; the values are the JSON shapes of the TypeScript props.
+type HeroSplitExtrasProps struct {
+	Content any `json:"content"`
+	Extra any `json:"extra"`
+}
+
+// What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small feature cards, or a quote with its author over three figures.
+templ HeroSplitExtras(p HeroSplitExtrasProps) {
+	{{ vContent := p.Content }}
+	{{ vExtra := uiutils.Def(p.Extra, "none") }}
+	if uiutils.T(uiutils.And(uiutils.Eq(vExtra, "stats"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "stats")), float64(0)))) {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-3 gap-4", Attrs: uiutils.Attrs("data-testid", "hero-stats")}) {
+			for vI, vS := range uiutils.L(uiutils.Get(vContent, "stats")) {
+				if uiutils.Lt(float64(vI), float64(3)) {
+					@stack.Stack(stack.StackProps{Gap: "0", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "hero-stat")}) {
+						@text.Text(text.TextProps{Size: "2xl", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "value")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "label")) }
+						}
+					}
+				}
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vExtra, "avatars"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "people")), float64(0)))) {
+		@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "flex-wrap", Attrs: uiutils.Attrs("data-testid", "hero-proof")}) {
+			@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+				for vI, vP := range uiutils.L(uiutils.Get(vContent, "people")) {
+					if uiutils.Lt(float64(vI), float64(4)) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vP, "author"), Ratio: "1/1", Class: uiutils.Cnv("size-10 shrink-0 rounded-full")})
+					}
+				}
+			}
+			@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Get(vContent, "proof")) }
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vExtra, "minis"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "features")), float64(0)))) {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-1 gap-4 sm:grid-cols-2", Attrs: uiutils.Attrs("data-testid", "hero-minis")}) {
+			for vI, vF := range uiutils.L(uiutils.Get(vContent, "features")) {
+				if uiutils.Lt(float64(vI), float64(2)) {
+					@group.Group(group.GroupProps{Gap: "4", Align: "start", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "hero-mini")}) {
+						@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 20})
+						}
+						@stack.Stack(stack.StackProps{Gap: "0"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vF, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vF, "text")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vExtra, "quote"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "people")), float64(0)))) {
+		@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch"}) {
+			for vI, vP := range uiutils.L(uiutils.Get(vContent, "people")) {
+				if uiutils.Lt(float64(vI), float64(1)) {
+					@FigureBlock(FigureBlockProps{Class: uiutils.Cnv("flex flex-col gap-4"), Testid: "hero-quote"}) {
+						@text.Text(text.TextProps{Tag: "blockquote", Class: "text-lg font-medium"}) {
+							{ uiutils.Text(uiutils.Get(vP, "quote")) }
+						}
+						@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+							@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vP, "author"), Ratio: "1/1", Class: uiutils.Cnv("size-10 shrink-0 rounded-full")})
+							@stack.Stack(stack.StackProps{Gap: "0"}) {
+								@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+									{ uiutils.Text(uiutils.Get(vP, "author")) }
+								}
+								@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vP, "role")) }
+								}
+							}
+						}
+					}
+				}
+			}
+			@box.Box(box.BoxProps{Class: "grid grid-cols-3 gap-4", Attrs: uiutils.Attrs("data-testid", "hero-stats")}) {
+				for vI, vS := range uiutils.L(uiutils.Get(vContent, "stats")) {
+					if uiutils.Lt(float64(vI), float64(3)) {
+						@stack.Stack(stack.StackProps{Gap: "0", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "hero-stat")}) {
+							@text.Text(text.TextProps{Size: "2xl", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vS, "value")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vS, "label")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/hero-split-media.templ b/packages/templ/ui/blocks/hero-split-media.templ
new file mode 100644
index 0000000..91a1f95
--- /dev/null
+++ b/packages/templ/ui/blocks/hero-split-media.templ
@@ -0,0 +1,67 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/hero-split-media.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// HeroSplitMediaProps are the props of HeroSplitMedia; the values are the JSON shapes of the TypeScript props.
+type HeroSplitMediaProps struct {
+	Content any `json:"content"`
+	Alt any `json:"alt"`
+	Media any `json:"media"`
+}
+
+// What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with captions, or a picture with two plan cards floating over it.
+templ HeroSplitMedia(p HeroSplitMediaProps) {
+	{{ vContent := p.Content }}
+	{{ vAlt := p.Alt }}
+	{{ vMedia := uiutils.Def(p.Media, "picture") }}
+	if uiutils.Eq(vMedia, "picture") {
+		@MediaFrame(MediaFrameProps{Alt: vAlt, Ratio: "4/3"})
+	}
+	if uiutils.Eq(vMedia, "card") {
+		@OfferMedia(OfferMediaProps{Alt: vAlt, Card: uiutils.Get(vContent, "card")})
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vMedia, "grid"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "features")), float64(0)))) {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-4", Attrs: uiutils.Attrs("data-testid", "hero-grid")}) {
+			for vI, vF := range uiutils.L(uiutils.Get(vContent, "features")) {
+				if uiutils.Lt(float64(vI), float64(4)) {
+					@FigureBlock(FigureBlockProps{Class: uiutils.Cnv("flex flex-col gap-2"), Testid: "hero-tile"}) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vF, "title"), Ratio: "1/1"})
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vF, "title")) }
+						}
+					}
+				}
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vMedia, "plans"), uiutils.Gt(uiutils.Len(uiutils.Get(vContent, "plans")), float64(0)))) {
+		@box.Box(box.BoxProps{Class: "relative", Attrs: uiutils.Attrs("data-testid", "hero-media")}) {
+			@MediaFrame(MediaFrameProps{Alt: vAlt, Ratio: "4/3"})
+			for vI, vP := range uiutils.L(uiutils.Get(vContent, "plans")) {
+				if uiutils.Lt(float64(vI), float64(2)) {
+					@stack.Stack(stack.StackProps{Gap: "2", Class: uiutils.S(uiutils.Cnv("absolute w-48 rounded bg-card p-4 shadow-lg", uiutils.Cond(uiutils.T(uiutils.Eq(float64(vI), float64(0))), "top-8 left-4", "right-4 bottom-8"))), Attrs: uiutils.Attrs("data-testid", "hero-plan")}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vP, "name")) }
+						}
+						@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "check", Size: 16})
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vP, "tagline")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/hero-split.templ b/packages/templ/ui/blocks/hero-split.templ
new file mode 100644
index 0000000..9794cc3
--- /dev/null
+++ b/packages/templ/ui/blocks/hero-split.templ
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/hero-split.json
+
+package blocks
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// HeroSplitProps are the props of HeroSplit; the values are the JSON shapes of the TypeScript props.
+type HeroSplitProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Level any `json:"level"`
+	Actions any `json:"actions"`
+	Content any `json:"content"`
+	Extra any `json:"extra"`
+	Media any `json:"media"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes: extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with captions, plans: two plan cards on the picture), mediaSide, tone.
+templ HeroSplit(p HeroSplitProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vActions := p.Actions }}
+	{{ vContent := p.Content }}
+	{{ vExtra := uiutils.Def(p.Extra, "stats") }}
+	{{ vMedia := uiutils.Def(p.Media, "picture") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge, "level": vLevel}, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide}, Tone: vTone, LandmarkLabel: vLandmarkLabel, Aside: heroSplitFill1(p, vTitle, vContent, vMedia)}) {
+		@HeroSplitExtras(HeroSplitExtrasProps{Content: vContent, Extra: vExtra})
+		@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref")})
+	}
+}
+
+templ heroSplitFill1(p HeroSplitProps, vTitle any, vContent any, vMedia any) {
+	@HeroSplitMedia(HeroSplitMediaProps{Content: vContent, Alt: vTitle, Media: vMedia})
+}
diff --git a/packages/templ/ui/blocks/icon-tab.templ b/packages/templ/ui/blocks/icon-tab.templ
new file mode 100644
index 0000000..7fe77de
--- /dev/null
+++ b/packages/templ/ui/blocks/icon-tab.templ
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/icon-tab.json
+
+package blocks
+
+import (
+	buttonplain "github.com/ui8kit/codegen/packages/templ/ui/ui/button-plain"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// IconTabProps are the props of IconTab; the values are the JSON shapes of the TypeScript props.
+type IconTabProps struct {
+	Active any `json:"active"`
+	Label any `json:"label"`
+	Class string `json:"className"`
+}
+
+// One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key movement between tabs is the job of IconTabs (see roving).
+templ IconTab(p IconTabProps) {
+	{{ vActive := uiutils.Def(p.Active, false) }}
+	{{ vLabel := p.Label }}
+	@buttonplain.ButtonPlain(buttonplain.ButtonPlainProps{Type: "button", Role: "tab", AriaLabel: uiutils.S(vLabel), Class: uiutils.S(uiutils.Cnv(recipeIconTab.Of(map[string]any{"state": uiutils.Cond(uiutils.T(vActive), "active", "default")}), p.Class)), Attrs: uiutils.Attrs("aria-selected", vActive, "tabindex", uiutils.Cond(uiutils.T(vActive), float64(0), float64(-1)), "data-slot", "icon-tab", "data-state", uiutils.Cond(uiutils.T(vActive), "active", "default"))}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/icon-tabs.templ b/packages/templ/ui/blocks/icon-tabs.templ
new file mode 100644
index 0000000..914ffd2
--- /dev/null
+++ b/packages/templ/ui/blocks/icon-tabs.templ
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/icon-tabs.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// IconTabsProps are the props of IconTabs; the values are the JSON shapes of the TypeScript props.
+type IconTabsProps struct {
+	Label any `json:"label"`
+	Class string `json:"className"`
+}
+
+// A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).
+templ IconTabs(p IconTabsProps) {
+	{{ vLabel := p.Label }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex items-center gap-2", p.Class)), Attrs: uiutils.Attrs("role", "tablist", "aria-label", vLabel, "data-slot", "icon-tabs")}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/icon-wall.templ b/packages/templ/ui/blocks/icon-wall.templ
new file mode 100644
index 0000000..cdd212c
--- /dev/null
+++ b/packages/templ/ui/blocks/icon-wall.templ
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/icon-wall.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// IconWallProps are the props of IconWall; the values are the JSON shapes of the TypeScript props.
+type IconWallProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Features any `json:"features"`
+	Empty any `json:"empty"`
+	Cols any `json:"cols"`
+	Item any `json:"item"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the label, chip: icon beside it), tone, density.
+templ IconWall(p IconWallProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vFeatures := p.Features }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vCols := uiutils.Def(p.Cols, "4") }}
+	{{ vItem := uiutils.Def(p.Item, "tile") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vAskedCols := any(uiutils.Cond(uiutils.T(uiutils.And(uiutils.Eq(vItem, "chip"), uiutils.Eq(vCols, "6"))), "2-6", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "2", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "3")), "2-3", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "4")), "2-4", "3-6"))))) }}
+	{{ vWallCols := any(uiutils.FitCols(vAskedCols, uiutils.Len(vFeatures))) }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vFeatures), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "layout-grid", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(vWallCols), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vF := range uiutils.L(vFeatures) {
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex items-center gap-2", "rounded bg-card inset-ring inset-ring-border", uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "tile")), uiutils.Cnv("flex-col justify-center text-center", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "p-4", "p-6")), "px-4 py-2"))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: uiutils.I(uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "tile")), float64(24), float64(16)))})
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vF, "title")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/job-board.templ b/packages/templ/ui/blocks/job-board.templ
new file mode 100644
index 0000000..c3ac6ad
--- /dev/null
+++ b/packages/templ/ui/blocks/job-board.templ
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/job-board.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// JobBoardProps are the props of JobBoard; the values are the JSON shapes of the TypeScript props.
+type JobBoardProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Jobs any `json:"jobs"`
+	Departments any `json:"departments"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Salary any `json:"salary"`
+	Tone any `json:"tone"`
+	Empty any `json:"empty"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place, the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide), tone.
+templ JobBoard(p JobBoardProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vJobs := p.Jobs }}
+	{{ vDepartments := p.Departments }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vSalary := uiutils.Def(p.Salary, "hide") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "grouped")), "3xl", "default"), LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vJobs), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "briefcase", Title: vEmpty})
+		} else if uiutils.Eq(vLayout, "grouped") {
+			@stack.Stack(stack.StackProps{Gap: "8", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "groups")}) {
+				for _, vD := range uiutils.L(vDepartments) {
+					@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "group")}) {
+						@group.Group(group.GroupProps{Gap: "4", Align: "baseline", Justify: "between"}) {
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "lg", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vD, "name")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "count"), uiutils.Len(uiutils.Where(vJobs, "dept", uiutils.Get(vD, "id"))))) }
+							}
+						}
+						@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col"}) {
+							for _, vJ := range uiutils.L(uiutils.Where(vJobs, "dept", uiutils.Get(vD, "id"))) {
+								@list.ListItem(list.ListItemProps{Class: "flex flex-wrap items-center justify-between gap-4 border-b border-border py-4", Attrs: uiutils.Attrs("data-testid", "item")}) {
+									@stack.Stack(stack.StackProps{Gap: "0"}) {
+										@MenuEntry(MenuEntryProps{Href: uiutils.Get(vJ, "href"), Class: uiutils.Cnv("font-medium")}) {
+											{ uiutils.Text(uiutils.Get(vJ, "title")) }
+										}
+										@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+											{ uiutils.Text(uiutils.Tpl("{0}, {1}", uiutils.Get(vJ, "location"), uiutils.Get(vJ, "type"))) }
+										}
+									}
+									@badge.Badge(badge.BadgeProps{Variant: "outline", Size: "default"}) {
+										{ uiutils.Text(uiutils.Get(vJ, "type")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		} else {
+			@JobCards(JobCardsProps{Jobs: vJobs, Departments: vDepartments, Labels: vLabels, Layout: vLayout, Salary: vSalary})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/job-cards.templ b/packages/templ/ui/blocks/job-cards.templ
new file mode 100644
index 0000000..23de258
--- /dev/null
+++ b/packages/templ/ui/blocks/job-cards.templ
@@ -0,0 +1,144 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/job-cards.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/table"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// JobCardsProps are the props of JobCards; the values are the JSON shapes of the TypeScript props.
+type JobCardsProps struct {
+	Jobs any `json:"jobs"`
+	Departments any `json:"departments"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Salary any `json:"salary"`
+}
+
+// The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply) or as a table.
+templ JobCards(p JobCardsProps) {
+	{{ vJobs := p.Jobs }}
+	{{ vDepartments := p.Departments }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vSalary := uiutils.Def(p.Salary, "hide") }}
+	if uiutils.Eq(vLayout, "table") {
+		@box.Box(box.BoxProps{Class: "w-full overflow-x-auto rounded inset-ring inset-ring-border"}) {
+			@table.Table(table.TableProps{Class: "w-full text-left text-sm", Attrs: uiutils.Attrs("data-testid", "job-table")}) {
+				@table.TableCaption(table.TableCaptionProps{Class: "sr-only"}) {
+					{ uiutils.Text(uiutils.Get(vLabels, "caption")) }
+				}
+				@table.TableHead(table.TableHeadProps{Class: "bg-muted"}) {
+					@table.TableRow(table.TableRowProps{}) {
+						@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "px-4 py-2"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "role")) }
+						}
+						@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "hidden py-2 md:table-cell"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "team")) }
+						}
+						@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "hidden py-2 sm:table-cell"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "location")) }
+						}
+						@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "type")) }
+						}
+						if uiutils.Eq(vSalary, "show") {
+							@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "hidden py-2 md:table-cell"}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "salary")) }
+							}
+						}
+						@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2 pr-4"}) {
+							@inline.Inline(inline.InlineProps{Class: "sr-only"}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "apply")) }
+							}
+						}
+					}
+				}
+				@table.TableBody(table.TableBodyProps{}) {
+					for _, vJ := range uiutils.L(vJobs) {
+						@table.TableRow(table.TableRowProps{Class: "border-t border-border", Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@table.TableCell(table.TableCellProps{Class: "px-4 py-4 font-medium"}) {
+								{ uiutils.Text(uiutils.Get(vJ, "title")) }
+							}
+							@table.TableCell(table.TableCellProps{Class: "hidden md:table-cell"}) {
+								{ uiutils.Text(uiutils.FirstOf(uiutils.Where(vDepartments, "id", uiutils.Get(vJ, "dept")), "name")) }
+							}
+							@table.TableCell(table.TableCellProps{Class: "hidden sm:table-cell"}) {
+								{ uiutils.Text(uiutils.Get(vJ, "location")) }
+							}
+							@table.TableCell(table.TableCellProps{}) {
+								{ uiutils.Text(uiutils.Get(vJ, "type")) }
+							}
+							if uiutils.Eq(vSalary, "show") {
+								@table.TableCell(table.TableCellProps{Class: "hidden md:table-cell"}) {
+									{ uiutils.Text(uiutils.Get(vJ, "salary")) }
+								}
+							}
+							@table.TableCell(table.TableCellProps{Class: "pr-4 text-right"}) {
+								@MenuEntry(MenuEntryProps{Href: uiutils.Get(vJ, "href"), Class: uiutils.Cnv("font-medium")}) {
+									{ uiutils.Text(uiutils.Get(vLabels, "apply")) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	} else {
+		@grid.Grid(grid.GridProps{Cols: "1-2", Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+			for _, vJ := range uiutils.L(vJobs) {
+				@stack.Stack(stack.StackProps{Gap: "4", Class: "rounded bg-card inset-ring inset-ring-border p-6", Attrs: uiutils.Attrs("data-testid", "item")}) {
+					@stack.Stack(stack.StackProps{Gap: "2"}) {
+						@text.Text(text.TextProps{Size: "lg", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vJ, "title")) }
+						}
+						@group.Group(group.GroupProps{Gap: "4", Class: "flex-wrap text-sm text-muted-foreground"}) {
+							@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "briefcase", Size: 16})
+								@inline.Inline(inline.InlineProps{}) {
+									{ uiutils.Text(uiutils.Get(vJ, "type")) }
+								}
+							}
+							@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "map-pin", Size: 16})
+								@inline.Inline(inline.InlineProps{}) {
+									{ uiutils.Text(uiutils.Get(vJ, "location")) }
+								}
+							}
+							@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "calendar", Size: 16})
+								@inline.Inline(inline.InlineProps{}) {
+									{ uiutils.Text(uiutils.Get(vJ, "posted")) }
+								}
+							}
+						}
+					}
+					if uiutils.Eq(vSalary, "show") {
+						@text.Text(text.TextProps{Size: "base", Weight: "semibold", Attrs: uiutils.Attrs("data-testid", "salary")}) {
+							{ uiutils.Text(uiutils.Get(vJ, "salary")) }
+						}
+					}
+					@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between", Class: "mt-auto"}) {
+						@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "default"}) {
+							{ uiutils.Text(uiutils.FirstOf(uiutils.Where(vDepartments, "id", uiutils.Get(vJ, "dept")), "name")) }
+						}
+						@MenuEntry(MenuEntryProps{Href: uiutils.Get(vJ, "href"), Class: uiutils.Cnv("inline-flex items-center gap-2 text-sm font-medium")}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "apply")) }
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/kanban-board.templ b/packages/templ/ui/blocks/kanban-board.templ
new file mode 100644
index 0000000..77066f2
--- /dev/null
+++ b/packages/templ/ui/blocks/kanban-board.templ
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/kanban-board.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// KanbanBoardProps are the props of KanbanBoard; the values are the JSON shapes of the TypeScript props.
+type KanbanBoardProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lanes any `json:"lanes"`
+	Empty any `json:"empty"`
+	Cards any `json:"cards"`
+	CountLabel any `json:"countLabel"`
+	Card any `json:"card"`
+	Cols any `json:"cols"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card between lanes is a port contract.
+templ KanbanBoard(p KanbanBoardProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLanes := p.Lanes }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vCards := p.Cards }}
+	{{ vCountLabel := p.CountLabel }}
+	{{ vCard := uiutils.Def(p.Card, "detail") }}
+	{{ vCols := uiutils.Def(p.Cols, "3") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vLanes), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "kanban", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "1-2", "1-3")), Class: "items-start gap-4", Attrs: uiutils.Attrs("data-testid", "lanes")}) {
+				for _, vLane := range uiutils.L(vLanes) {
+					@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "rounded bg-muted p-4", Attrs: uiutils.Attrs("data-testid", "lane")}) {
+						@group.Group(group.GroupProps{Gap: "2", Align: "center", Justify: "between"}) {
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vLane, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Tpl(vCountLabel, uiutils.Len(uiutils.Where(vCards, "lane", uiutils.Get(vLane, "key"))))) }
+							}
+						}
+						@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0"}) {
+							for _, vC := range uiutils.L(uiutils.Where(vCards, "lane", uiutils.Get(vLane, "key"))) {
+								@list.ListItem(list.ListItemProps{Class: uiutils.S(uiutils.Cnv("flex flex-col rounded bg-card inset-ring inset-ring-border", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "gap-2 p-2", "gap-2 p-4"))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+									@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vC, "title")) }
+									}
+									if uiutils.Eq(vCard, "detail") {
+										@group.Group(group.GroupProps{Gap: "2", Align: "center", Justify: "between", Class: "flex-wrap"}) {
+											@Pill(PillProps{Tone: "blue", Icon: "tag"}) {
+												{ uiutils.Text(uiutils.Get(vC, "tag")) }
+											}
+											@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+												{ uiutils.Text(uiutils.Get(vC, "who")) }
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/logo-cloud.templ b/packages/templ/ui/blocks/logo-cloud.templ
new file mode 100644
index 0000000..2d66bcd
--- /dev/null
+++ b/packages/templ/ui/blocks/logo-cloud.templ
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/logo-cloud.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// LogoCloudProps are the props of LogoCloud; the values are the JSON shapes of the TypeScript props.
+type LogoCloudProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Logos any `json:"logos"`
+	Empty any `json:"empty"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Item any `json:"item"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row), columns (2, 3, 4), item (name, icon only, tile), density, tone.
+templ LogoCloud(p LogoCloudProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLogos := p.Logos }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vCols := uiutils.Def(p.Cols, "4") }}
+	{{ vItem := uiutils.Def(p.Item, "name") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Eq(uiutils.Len(vLogos), float64(0)) {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Align: "center", LandmarkLabel: vLandmarkLabel}) {
+			@EmptyState(EmptyStateProps{Icon: "building-2", Title: vEmpty})
+		}
+	} else if uiutils.Eq(vLayout, "row") {
+		@LogoRibbon(LogoRibbonProps{Id: vId, Title: vTitle, Logos: vLogos, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel})
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Align: "center", LandmarkLabel: vLandmarkLabel}) {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "2", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "3")), "2-3", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "4")), "2-4", "3-6")))), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vLogo := range uiutils.L(vLogos) {
+					@group.Group(group.GroupProps{Gap: "2", Align: "center", Justify: "center", Class: uiutils.S(uiutils.Cnv("text-muted-foreground", uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "tile")), "flex-col rounded p-4 inset-ring inset-ring-border", ""))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vLogo, "icon")), Size: 24})
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "icon")), "sr-only", ""))}) {
+							{ uiutils.Text(uiutils.Get(vLogo, "name")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/logo-ribbon.templ b/packages/templ/ui/blocks/logo-ribbon.templ
new file mode 100644
index 0000000..4debf6e
--- /dev/null
+++ b/packages/templ/ui/blocks/logo-ribbon.templ
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/logo-ribbon.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// LogoRibbonProps are the props of LogoRibbon; the values are the JSON shapes of the TypeScript props.
+type LogoRibbonProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Logos any `json:"logos"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset.
+templ LogoRibbon(p LogoRibbonProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLogos := p.Logos }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Tone: vTone, Density: vDensity, Measure: "fill", Align: "center", Class: uiutils.Cnv("py-0"), LandmarkLabel: vLandmarkLabel}) {
+		@stack.Stack(stack.StackProps{Gap: "6", Align: "center", Attrs: uiutils.Attrs("data-testid", "logos-block")}) {
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "xl", Weight: "semibold", Class: "leading-7", Attrs: uiutils.Attrs("id", uiutils.Add(vId, "-title"))}) {
+				{ uiutils.Text(vTitle) }
+			}
+			@group.Group(group.GroupProps{Gap: "0", Justify: "center", Align: "start", Class: uiutils.S(uiutils.Cnv("flex w-full flex-wrap", uiutils.Get(presetDefaults, "logos", "row"))), Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vLogo := range uiutils.L(vLogos) {
+					@LogoSlot(LogoSlotProps{Name: uiutils.Get(vLogo, "name"), Icon: uiutils.Get(vLogo, "icon")})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/logo-sidebar.templ b/packages/templ/ui/blocks/logo-sidebar.templ
new file mode 100644
index 0000000..159293d
--- /dev/null
+++ b/packages/templ/ui/blocks/logo-sidebar.templ
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/logo-sidebar.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// LogoSidebarProps are the props of LogoSidebar; the values are the JSON shapes of the TypeScript props.
+type LogoSidebarProps struct {
+	Variant any `json:"variant"`
+	Name any `json:"name"`
+	Class string `json:"className"`
+	Mark templ.Component `json:"-"`
+	Actions templ.Component `json:"-"`
+}
+
+// The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The variant picks the padding (recipe).
+templ LogoSidebar(p LogoSidebarProps) {
+	{{ vVariant := uiutils.Def(p.Variant, "chat") }}
+	{{ vName := p.Name }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv(recipeLogoSidebar.Of(map[string]any{"variant": vVariant}), "in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0", p.Class)), Attrs: uiutils.Attrs("data-slot", "logo-sidebar")}) {
+		@inline.Inline(inline.InlineProps{Class: "flex items-center gap-4", Attrs: uiutils.Attrs("data-slot", "logo-sidebar-brand")}) {
+			if p.Mark != nil {
+				@p.Mark
+			}
+			@inline.Inline(inline.InlineProps{Class: "text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden", Attrs: uiutils.Attrs("data-slot", "logo-sidebar-name")}) {
+				{ uiutils.Text(vName) }
+			}
+		}
+		if uiutils.T((p.Actions != nil)) {
+			@inline.Inline(inline.InlineProps{Class: "flex items-center gap-2 in-data-[nav=collapsed]:hidden", Attrs: uiutils.Attrs("data-slot", "logo-sidebar-actions")}) {
+				if p.Actions != nil {
+					@p.Actions
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/logo-slot.templ b/packages/templ/ui/blocks/logo-slot.templ
new file mode 100644
index 0000000..abf626c
--- /dev/null
+++ b/packages/templ/ui/blocks/logo-slot.templ
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/logo-slot.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// LogoSlotProps are the props of LogoSlot; the values are the JSON shapes of the TypeScript props.
+type LogoSlotProps struct {
+	Name any `json:"name"`
+	Icon any `json:"icon"`
+}
+
+// One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only.
+templ LogoSlot(p LogoSlotProps) {
+	{{ vName := p.Name }}
+	{{ vIcon := p.Icon }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex shrink-0 items-center justify-center text-muted-foreground", uiutils.Get(presetDefaults, "logos", "slot"))), Attrs: uiutils.Attrs("data-testid", "item", "data-slot", "logo-slot")}) {
+		@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(vIcon), Size: uiutils.I(uiutils.Get(presetDefaults, "logos", "glyph"))})
+		@text.Text(text.TextProps{Size: "sm", Weight: "semibold", Class: "sr-only"}) {
+			{ uiutils.Text(vName) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/media-contacts.templ b/packages/templ/ui/blocks/media-contacts.templ
new file mode 100644
index 0000000..059b7c8
--- /dev/null
+++ b/packages/templ/ui/blocks/media-contacts.templ
@@ -0,0 +1,55 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/media-contacts.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MediaContactsProps are the props of MediaContacts; the values are the JSON shapes of the TypeScript props.
+type MediaContactsProps struct {
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+}
+
+// The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card.
+templ MediaContacts(p MediaContactsProps) {
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch"}) {
+		@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch"}) {
+			@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "list")) }
+			}
+			for _, vC := range uiutils.L(uiutils.Get(vExtras, "channels")) {
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Href: uiutils.S(uiutils.Get(vC, "href")), Class: "w-full gap-2", Attrs: uiutils.Attrs("data-testid", "media-channel")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vC, "icon")), Size: 16})
+					{ uiutils.Text(uiutils.Get(vC, "title")) }
+				}
+			}
+		}
+		@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Class: "rounded bg-card inset-ring inset-ring-border p-4"}) {
+			@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "figures")) }
+			}
+			for vI, vS := range uiutils.L(uiutils.Get(vExtras, "stats")) {
+				if uiutils.Lt(float64(vI), float64(3)) {
+					@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between", Attrs: uiutils.Attrs("data-testid", "media-stat")}) {
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "label")) }
+						}
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "value")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/media-figures.templ b/packages/templ/ui/blocks/media-figures.templ
new file mode 100644
index 0000000..aab96b3
--- /dev/null
+++ b/packages/templ/ui/blocks/media-figures.templ
@@ -0,0 +1,37 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/media-figures.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MediaFiguresProps are the props of MediaFigures; the values are the JSON shapes of the TypeScript props.
+type MediaFiguresProps struct {
+	Extras any `json:"extras"`
+	Mode any `json:"mode"`
+}
+
+// The figures of MediaList: four in two columns, centered, or three in a row.
+templ MediaFigures(p MediaFiguresProps) {
+	{{ vExtras := p.Extras }}
+	{{ vMode := uiutils.Def(p.Mode, "grid") }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vMode, "grid")), "grid grid-cols-2 gap-6 text-center", "grid grid-cols-3 gap-6"))}) {
+		for vI, vS := range uiutils.L(uiutils.Get(vExtras, "stats")) {
+			if uiutils.T(uiutils.Lt(float64(vI), uiutils.Cond(uiutils.T(uiutils.Eq(vMode, "grid")), float64(4), float64(3)))) {
+				@stack.Stack(stack.StackProps{Gap: "0", Align: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vMode, "grid")), "center", "start")), Attrs: uiutils.Attrs("data-testid", "media-stat")}) {
+					@text.Text(text.TextProps{Size: "3xl", Weight: "bold"}) {
+						{ uiutils.Text(uiutils.Get(vS, "value")) }
+					}
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vS, "label")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/media-frame.templ b/packages/templ/ui/blocks/media-frame.templ
new file mode 100644
index 0000000..244341a
--- /dev/null
+++ b/packages/templ/ui/blocks/media-frame.templ
@@ -0,0 +1,38 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/media-frame.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/image"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MediaFrameProps are the props of MediaFrame; the values are the JSON shapes of the TypeScript props.
+type MediaFrameProps struct {
+	Alt any `json:"alt"`
+	Src any `json:"src"`
+	DarkSrc any `json:"darkSrc"`
+	Ratio any `json:"ratio"`
+	Class string `json:"className"`
+}
+
+var mediaFramePlaceholder = map[string]any{
+	"light": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNlMmU4ZjAiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjOTRhM2I4IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+	"dark": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxZTI5M2IiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjNDc1NTY5IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+}
+
+// A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the corners are the plain theme radius.
+templ MediaFrame(p MediaFrameProps) {
+	{{ vAlt := p.Alt }}
+	{{ vSrc := p.Src }}
+	{{ vDarkSrc := p.DarkSrc }}
+	{{ vRatio := uiutils.Def(p.Ratio, "16/9") }}
+	{{ vLightSrc := any(uiutils.Coalesce(vSrc, uiutils.At(mediaFramePlaceholder, "light"))) }}
+	{{ vNightSrc := any(uiutils.Coalesce(vDarkSrc, vSrc, uiutils.At(mediaFramePlaceholder, "dark"))) }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv(recipeMediaFrame.Of(map[string]any{"ratio": vRatio}), p.Class)), Attrs: uiutils.Attrs("data-slot", "media-frame", "data-placeholder", uiutils.Cond(uiutils.T(vSrc), "false", "true"))}) {
+		@image.Image(image.ImageProps{Src: uiutils.S(vLightSrc), Alt: uiutils.S(vAlt), Class: "absolute inset-0 size-full object-cover dark:hidden", Attrs: uiutils.Attrs("data-theme-src", "light")})
+		@image.Image(image.ImageProps{Src: uiutils.S(vNightSrc), Alt: uiutils.S(vAlt), Class: "absolute inset-0 hidden size-full object-cover dark:block", Attrs: uiutils.Attrs("data-theme-src", "dark")})
+	}
+}
diff --git a/packages/templ/ui/blocks/media-list.templ b/packages/templ/ui/blocks/media-list.templ
new file mode 100644
index 0000000..cf15d7f
--- /dev/null
+++ b/packages/templ/ui/blocks/media-list.templ
@@ -0,0 +1,77 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/media-list.json
+
+package blocks
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MediaListProps are the props of MediaList; the values are the JSON shapes of the TypeScript props.
+type MediaListProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+	Actions any `json:"actions"`
+	Layout any `json:"layout"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts, contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.
+templ MediaList(p MediaListProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	{{ vActions := p.Actions }}
+	{{ vLayout := uiutils.Def(p.Layout, "figures") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide}, LandmarkLabel: vLandmarkLabel, Aside: mediaListFill1(p, vTitle, vLayout)}) {
+		if uiutils.T(uiutils.Or(uiutils.Eq(vLayout, "figures"), uiutils.Eq(vLayout, "proof"))) {
+			if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "stats")), float64(0)) {
+				@MediaFigures(MediaFiguresProps{Extras: vExtras, Mode: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "proof")), "row", "grid")})
+			}
+		}
+		if uiutils.Eq(vLayout, "proof") {
+			if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "reviews")), float64(0)) {
+				@MediaReview(MediaReviewProps{Extras: vExtras, Labels: vLabels})
+			}
+		}
+		if uiutils.Eq(vLayout, "steps") {
+			if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "steps")), float64(0)) {
+				@MediaSteps(MediaStepsProps{Extras: vExtras, Labels: vLabels})
+			}
+		}
+		if uiutils.Eq(vLayout, "posts") {
+			if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "posts")), float64(0)) {
+				@MediaPosts(MediaPostsProps{Extras: vExtras, Labels: vLabels})
+			}
+		}
+		if uiutils.Eq(vLayout, "topics") {
+			if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "topics")), float64(0)) {
+				@MediaTopics(MediaTopicsProps{Extras: vExtras, Labels: vLabels})
+			}
+		}
+		if uiutils.Eq(vLayout, "contact") {
+			if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "channels")), float64(0)) {
+				@MediaContacts(MediaContactsProps{Extras: vExtras, Labels: vLabels})
+			}
+		}
+		if !uiutils.Eq(vLayout, "contact") {
+			@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref")})
+		}
+	}
+}
+
+templ mediaListFill1(p MediaListProps, vTitle any, vLayout any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: uiutils.Cond(uiutils.T(uiutils.Or(uiutils.Eq(vLayout, "steps"), uiutils.Eq(vLayout, "topics"))), "1/1", "4/3")})
+}
diff --git a/packages/templ/ui/blocks/media-posts.templ b/packages/templ/ui/blocks/media-posts.templ
new file mode 100644
index 0000000..5646844
--- /dev/null
+++ b/packages/templ/ui/blocks/media-posts.templ
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/media-posts.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MediaPostsProps are the props of MediaPosts; the values are the JSON shapes of the TypeScript props.
+type MediaPostsProps struct {
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+}
+
+// The latest posts of MediaList as rows: a dot, the title, the date and reading time.
+templ MediaPosts(p MediaPostsProps) {
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+		@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "list")) }
+		}
+		for vI, vP := range uiutils.L(uiutils.Get(vExtras, "posts")) {
+			if uiutils.Lt(float64(vI), float64(3)) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "start", Attrs: uiutils.Attrs("data-testid", "media-post")}) {
+					@inline.Inline(inline.InlineProps{Class: "mt-2 size-2 shrink-0 rounded-full bg-primary"})
+					@stack.Stack(stack.StackProps{Gap: "0"}) {
+						@MenuEntry(MenuEntryProps{Href: uiutils.Get(vP, "href"), Class: uiutils.Cnv("text-sm font-medium"), Size: "sm"}) {
+							{ uiutils.Text(uiutils.Get(vP, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Tpl("{0} · {1}", uiutils.Get(vP, "date"), uiutils.Tpl(uiutils.Get(vLabels, "minutes"), uiutils.Get(vP, "minutes")))) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/media-review.templ b/packages/templ/ui/blocks/media-review.templ
new file mode 100644
index 0000000..321d7b9
--- /dev/null
+++ b/packages/templ/ui/blocks/media-review.templ
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/media-review.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MediaReviewProps are the props of MediaReview; the values are the JSON shapes of the TypeScript props.
+type MediaReviewProps struct {
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+}
+
+// The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author.
+templ MediaReview(p MediaReviewProps) {
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	for vI, vR := range uiutils.L(uiutils.Get(vExtras, "reviews")) {
+		if uiutils.Lt(float64(vI), float64(1)) {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "rounded bg-muted p-6", Attrs: uiutils.Attrs("data-testid", "media-review")}) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between", Class: "flex-wrap"}) {
+					@text.Text(text.TextProps{Size: "sm", Weight: "medium"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "featured")) }
+					}
+					@Rating(RatingProps{Value: uiutils.Get(vR, "rating"), Label: uiutils.Tpl(uiutils.Get(vLabels, "rating"), uiutils.Get(vR, "rating"))})
+				}
+				@text.Text(text.TextProps{Size: "base"}) {
+					{ uiutils.Text(uiutils.Tpl("“{0}”", uiutils.Get(vR, "text"))) }
+				}
+				@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Tpl("{0} · {1}", uiutils.Get(vR, "author"), uiutils.Get(vR, "date"))) }
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/media-steps.templ b/packages/templ/ui/blocks/media-steps.templ
new file mode 100644
index 0000000..96b92d2
--- /dev/null
+++ b/packages/templ/ui/blocks/media-steps.templ
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/media-steps.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MediaStepsProps are the props of MediaSteps; the values are the JSON shapes of the TypeScript props.
+type MediaStepsProps struct {
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+}
+
+// The steps of MediaList as numbered rows: the number, a glyph, the title and the text.
+templ MediaSteps(p MediaStepsProps) {
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+		@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "list")) }
+		}
+		for vI, vS := range uiutils.L(uiutils.Get(vExtras, "steps")) {
+			@group.Group(group.GroupProps{Gap: "4", Align: "start", Attrs: uiutils.Attrs("data-testid", "media-step")}) {
+				@text.Text(text.TextProps{Size: "sm", Weight: "semibold", Class: "w-6 shrink-0 text-primary"}) {
+					{ uiutils.Text(uiutils.Tpl("0{0}", uiutils.Str(uiutils.Add(float64(vI), float64(1))))) }
+				}
+				@inline.Inline(inline.InlineProps{Class: "flex size-6 shrink-0 items-center justify-center text-primary"}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vS, "icon")), Size: 16})
+				}
+				@stack.Stack(stack.StackProps{Gap: "0"}) {
+					@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+						{ uiutils.Text(uiutils.Get(vS, "title")) }
+					}
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vS, "text")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/media-topics.templ b/packages/templ/ui/blocks/media-topics.templ
new file mode 100644
index 0000000..273de4f
--- /dev/null
+++ b/packages/templ/ui/blocks/media-topics.templ
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/media-topics.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MediaTopicsProps are the props of MediaTopics; the values are the JSON shapes of the TypeScript props.
+type MediaTopicsProps struct {
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+}
+
+// The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow.
+templ MediaTopics(p MediaTopicsProps) {
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+		@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "list")) }
+		}
+		for vI, vC := range uiutils.L(uiutils.Get(vExtras, "topics")) {
+			if uiutils.Lt(float64(vI), float64(5)) {
+				@MenuEntry(MenuEntryProps{Href: uiutils.Get(vC, "href"), Class: uiutils.Cnv("rounded bg-card inset-ring inset-ring-border flex w-full items-center gap-4 p-4"), Variant: "block", Testid: "media-topic", Block: true}) {
+					@inline.Inline(inline.InlineProps{Class: "flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vC, "icon")), Size: 16})
+					}
+					@stack.Stack(stack.StackProps{Gap: "0", Class: "min-w-0 flex-1"}) {
+						@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vC, "name")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "count"), uiutils.Get(vC, "count"))) }
+						}
+					}
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/mega-menu.templ b/packages/templ/ui/blocks/mega-menu.templ
new file mode 100644
index 0000000..9cc3ced
--- /dev/null
+++ b/packages/templ/ui/blocks/mega-menu.templ
@@ -0,0 +1,110 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/mega-menu.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	buttonplain "github.com/ui8kit/codegen/packages/templ/ui/ui/button-plain"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MegaMenuProps are the props of MegaMenu; the values are the JSON shapes of the TypeScript props.
+type MegaMenuProps struct {
+	Label any `json:"label"`
+	Brand any `json:"brand"`
+	BrandHref any `json:"brandHref"`
+	Trigger any `json:"trigger"`
+	Links any `json:"links"`
+	Groups any `json:"groups"`
+	PromoTitle any `json:"promoTitle"`
+	PromoText any `json:"promoText"`
+	Panel any `json:"panel"`
+	Cols any `json:"cols"`
+	Promo any `json:"promo"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed), cols (2, 3), promo (none, card).
+templ MegaMenu(p MegaMenuProps) {
+	{{ vLabel := p.Label }}
+	{{ vBrand := p.Brand }}
+	{{ vBrandHref := p.BrandHref }}
+	{{ vTrigger := p.Trigger }}
+	{{ vLinks := p.Links }}
+	{{ vGroups := p.Groups }}
+	{{ vPromoTitle := p.PromoTitle }}
+	{{ vPromoText := p.PromoText }}
+	{{ vPanel := uiutils.Def(p.Panel, "open") }}
+	{{ vCols := uiutils.Def(p.Cols, "3") }}
+	{{ vPromo := uiutils.Def(p.Promo, "none") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "header", Class: "relative border-b border-border bg-background", Attrs: uiutils.Attrs("data-testid", "mega-menu", "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "flex flex-wrap items-center gap-6 py-4")), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@MenuEntry(MenuEntryProps{Href: vBrandHref, Class: uiutils.Cnv("text-lg font-medium"), Testid: "brand"}) {
+				{ uiutils.Text(vBrand) }
+			}
+			@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", vLabel, vLandmarkLabel)), vLabel), Class: uiutils.Cnv("flex-1")}) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "flex-wrap"}) {
+					@buttonplain.ButtonPlain(buttonplain.ButtonPlainProps{Type: "button", Class: "inline-flex items-center gap-2 text-sm font-semibold", Attrs: uiutils.Attrs("aria-expanded", uiutils.Cond(uiutils.T(uiutils.Eq(vPanel, "open")), "true", "false"), "data-testid", "mega-trigger")}) {
+						{ uiutils.Text(vTrigger) }
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-down", Size: 16})
+					}
+					for _, vL := range uiutils.L(vLinks) {
+						@MenuEntry(MenuEntryProps{Href: uiutils.Get(vL, "href"), Class: uiutils.Cnv("text-sm"), Current: uiutils.Eq(uiutils.Get(vL, "id"), ""), Testid: "nav-link"}) {
+							{ uiutils.Text(uiutils.Get(vL, "name")) }
+						}
+					}
+				}
+			}
+		}
+	}
+	if uiutils.Eq(vPanel, "open") {
+		@box.Box(box.BoxProps{Class: "border-t border-border bg-card", Attrs: uiutils.Attrs("data-testid", "mega-panel")}) {
+			@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "grid gap-8 py-6", uiutils.Cond(uiutils.T(uiutils.Eq(vPromo, "card")), "md:grid-cols-[1fr_16rem]", ""))), Attrs: uiutils.Attrs("data-slot", "container")}) {
+				if uiutils.Gt(uiutils.Len(vGroups), float64(0)) {
+					@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "1-2", "1-3")), Class: "gap-6", Attrs: uiutils.Attrs("data-testid", "items")}) {
+						for _, vG := range uiutils.L(vGroups) {
+							@stack.Stack(stack.StackProps{Gap: "2", Attrs: uiutils.Attrs("data-testid", "item")}) {
+								@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vG, "icon")), Size: 16})
+									@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vG, "title")) }
+									}
+								}
+								@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0"}) {
+									for _, vItem := range uiutils.L(uiutils.Get(vG, "links")) {
+										@list.ListItem(list.ListItemProps{}) {
+											@MenuEntry(MenuEntryProps{Href: uiutils.Get(vItem, "href"), Class: uiutils.Cnv("text-sm text-muted-foreground")}) {
+												{ uiutils.Text(uiutils.Get(vItem, "name")) }
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+				if uiutils.Eq(vPromo, "card") {
+					@stack.Stack(stack.StackProps{Gap: "2", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "promo")}) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Coalesce(vPromoTitle, ""), Ratio: "4/3"})
+						@text.Text(text.TextProps{Size: "base", Weight: "semibold"}) {
+							{ uiutils.Text(vPromoTitle) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(vPromoText) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/member-row.templ b/packages/templ/ui/blocks/member-row.templ
new file mode 100644
index 0000000..3554efb
--- /dev/null
+++ b/packages/templ/ui/blocks/member-row.templ
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/member-row.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MemberRowProps are the props of MemberRow; the values are the JSON shapes of the TypeScript props.
+type MemberRowProps struct {
+	Member any `json:"member"`
+	Depts any `json:"depts"`
+	Layout any `json:"layout"`
+}
+
+// One member of TeamGrid beside a small portrait: the name, the role, then the department and the place (detailed, directory), the bio (detailed) and the skills (detailed, list).
+templ MemberRow(p MemberRowProps) {
+	{{ vMember := p.Member }}
+	{{ vDepts := p.Depts }}
+	{{ vLayout := uiutils.Def(p.Layout, "list") }}
+	@group.Group(group.GroupProps{Gap: "4", Align: "start", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "detailed")), "rounded bg-card inset-ring inset-ring-border flex-col p-6", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "directory")), "rounded bg-card inset-ring inset-ring-border p-4", "border-b border-border pb-4"))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+		@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vMember, "name"), Ratio: "1/1", Class: uiutils.Cnv(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "detailed")), "size-16", "size-12"), "shrink-0"))})
+		@stack.Stack(stack.StackProps{Gap: "2", Class: "min-w-0 flex-1"}) {
+			@stack.Stack(stack.StackProps{Gap: "0"}) {
+				@text.Text(text.TextProps{Size: "base", Weight: "semibold"}) {
+					{ uiutils.Text(uiutils.Get(vMember, "name")) }
+				}
+				@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vMember, "role")) }
+				}
+			}
+			if !uiutils.Eq(vLayout, "list") {
+				@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: "flex-wrap text-xs text-muted-foreground"}) {
+					@badge.Badge(badge.BadgeProps{Variant: "outline", Size: "sm"}) {
+						{ uiutils.Text(uiutils.At(vDepts, uiutils.Get(vMember, "dept"))) }
+					}
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "map-pin", Size: 16})
+					@inline.Inline(inline.InlineProps{}) {
+						{ uiutils.Text(uiutils.Get(vMember, "location")) }
+					}
+				}
+			}
+			if uiutils.Eq(vLayout, "detailed") {
+				@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vMember, "bio")) }
+				}
+			}
+			if !uiutils.Eq(vLayout, "directory") {
+				@group.Group(group.GroupProps{Gap: "2", Class: "flex-wrap"}) {
+					for _, vK := range uiutils.L(uiutils.Get(vMember, "skills")) {
+						@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm"}) {
+							{ uiutils.Text(vK) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/menu-entry.templ b/packages/templ/ui/blocks/menu-entry.templ
new file mode 100644
index 0000000..34950cd
--- /dev/null
+++ b/packages/templ/ui/blocks/menu-entry.templ
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/menu-entry.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MenuEntryProps are the props of MenuEntry; the values are the JSON shapes of the TypeScript props.
+type MenuEntryProps struct {
+	Href any `json:"href"`
+	Current any `json:"current"`
+	Variant any `json:"variant"`
+	Size any `json:"size"`
+	Testid any `json:"testid"`
+	Block any `json:"block"`
+	Class string `json:"className"`
+}
+
+// One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.
+templ MenuEntry(p MenuEntryProps) {
+	{{ vHref := p.Href }}
+	{{ vCurrent := uiutils.Def(p.Current, false) }}
+	{{ vVariant := uiutils.Def(p.Variant, "default") }}
+	{{ vSize := uiutils.Def(p.Size, "default") }}
+	{{ vTestid := p.Testid }}
+	{{ vBlock := uiutils.Def(p.Block, false) }}
+	if uiutils.T(vHref) {
+		@link.Link(link.LinkProps{Href: uiutils.S(vHref), Variant: uiutils.S(vVariant), Size: uiutils.S(vSize), AriaCurrent: uiutils.S(uiutils.Cond(uiutils.T(vCurrent), "page", nil)), Class: uiutils.S(p.Class), Attrs: uiutils.Attrs("data-testid", vTestid)}) {
+			{ children... }
+		}
+	} else if uiutils.T(vBlock) {
+		@box.Box(box.BoxProps{Class: uiutils.S(p.Class), Attrs: uiutils.Attrs("aria-current", uiutils.Cond(uiutils.T(vCurrent), "page", nil), "data-testid", vTestid)}) {
+			{ children... }
+		}
+	} else {
+		@inline.Inline(inline.InlineProps{Class: uiutils.S(p.Class), Attrs: uiutils.Attrs("aria-current", uiutils.Cond(uiutils.T(vCurrent), "page", nil), "data-testid", vTestid)}) {
+			{ children... }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/meter-row.templ b/packages/templ/ui/blocks/meter-row.templ
new file mode 100644
index 0000000..dfe4d2e
--- /dev/null
+++ b/packages/templ/ui/blocks/meter-row.templ
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/meter-row.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MeterRowProps are the props of MeterRow; the values are the JSON shapes of the TypeScript props.
+type MeterRowProps struct {
+	Label any `json:"label"`
+	Value any `json:"value"`
+	Caption any `json:"caption"`
+	Hint any `json:"hint"`
+	Href any `json:"href"`
+	Class string `json:"className"`
+}
+
+// A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With `href` the whole row is a link.
+templ MeterRow(p MeterRowProps) {
+	{{ vLabel := p.Label }}
+	{{ vValue := p.Value }}
+	{{ vCaption := p.Caption }}
+	{{ vHint := p.Hint }}
+	{{ vHref := p.Href }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("min-w-0", p.Class)), Attrs: uiutils.Attrs("data-slot", "meter-row")}) {
+		if uiutils.T(vHref) {
+			@link.Link(link.LinkProps{Href: uiutils.S(vHref), Variant: "block", Class: "flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted"}) {
+				@box.Box(box.BoxProps{Class: "flex items-baseline justify-between gap-4"}) {
+					@text.Text(text.TextProps{Class: "m-0 min-w-0 truncate text-sm font-bold text-foreground"}) {
+						{ uiutils.Text(vLabel) }
+					}
+					@text.Text(text.TextProps{Class: "m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground"}) {
+						{ uiutils.Text(vCaption) }
+					}
+				}
+				@form.Progress(form.ProgressProps{Value: uiutils.S(uiutils.Str(vValue)), Max: "100", Attrs: uiutils.Attrs("aria-label", vLabel)})
+				if uiutils.T(vHint) {
+					@text.Text(text.TextProps{Class: "m-0 text-xs font-medium text-muted-foreground"}) {
+						{ uiutils.Text(vHint) }
+					}
+				}
+			}
+		} else {
+			@box.Box(box.BoxProps{Class: "flex min-w-0 flex-col gap-2 p-2"}) {
+				@box.Box(box.BoxProps{Class: "flex items-baseline justify-between gap-4"}) {
+					@text.Text(text.TextProps{Class: "m-0 min-w-0 truncate text-sm font-bold text-foreground"}) {
+						{ uiutils.Text(vLabel) }
+					}
+					@text.Text(text.TextProps{Class: "m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground"}) {
+						{ uiutils.Text(vCaption) }
+					}
+				}
+				@form.Progress(form.ProgressProps{Value: uiutils.S(uiutils.Str(vValue)), Max: "100", Attrs: uiutils.Attrs("aria-label", vLabel)})
+				if uiutils.T(vHint) {
+					@text.Text(text.TextProps{Class: "m-0 text-xs font-medium text-muted-foreground"}) {
+						{ uiutils.Text(vHint) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/metric-row.templ b/packages/templ/ui/blocks/metric-row.templ
new file mode 100644
index 0000000..49f1f1b
--- /dev/null
+++ b/packages/templ/ui/blocks/metric-row.templ
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/metric-row.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MetricRowProps are the props of MetricRow; the values are the JSON shapes of the TypeScript props.
+type MetricRowProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Metrics any `json:"metrics"`
+	Empty any `json:"empty"`
+	Cols any `json:"cols"`
+	Item any `json:"item"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes: columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).
+templ MetricRow(p MetricRowProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vMetrics := p.Metrics }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vCols := uiutils.Def(p.Cols, "4") }}
+	{{ vItem := uiutils.Def(p.Item, "tile") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vMetrics), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "gauge", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "1-2", "1-4")), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vM := range uiutils.L(vMetrics) {
+					if uiutils.Eq(vItem, "tile") {
+						@box.Box(box.BoxProps{Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@StatTile(StatTileProps{Label: uiutils.Get(vM, "label"), Value: uiutils.Get(vM, "value"), Icon: uiutils.Get(vM, "icon"), Hint: uiutils.Get(vM, "hint")})
+						}
+					} else {
+						@stack.Stack(stack.StackProps{Gap: "0", Class: "rounded bg-card p-4 inset-ring inset-ring-border", Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: "text-muted-foreground"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vM, "icon")), Size: 16})
+								@text.Text(text.TextProps{Size: "xs"}) {
+									{ uiutils.Text(uiutils.Get(vM, "label")) }
+								}
+							}
+							@text.Text(text.TextProps{Size: "2xl", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vM, "value")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vM, "hint")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/milestone-timeline.templ b/packages/templ/ui/blocks/milestone-timeline.templ
new file mode 100644
index 0000000..f2411d8
--- /dev/null
+++ b/packages/templ/ui/blocks/milestone-timeline.templ
@@ -0,0 +1,71 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/milestone-timeline.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// MilestoneTimelineProps are the props of MilestoneTimeline; the values are the JSON shapes of the TypeScript props.
+type MilestoneTimelineProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Milestones any `json:"milestones"`
+	Empty any `json:"empty"`
+	Layout any `json:"layout"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone, density.
+templ MilestoneTimeline(p MilestoneTimelineProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vMilestones := p.Milestones }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLayout := uiutils.Def(p.Layout, "split") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, Density: vDensity, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "split", "stack"), Media: map[string]any{"show": uiutils.Eq(vLayout, "split"), "side": "start", "align": "start"}, Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "stacked")), "2xl", "default"), LandmarkLabel: vLandmarkLabel, Aside: milestoneTimelineFill1(p, vTitle)}) {
+		if uiutils.Eq(uiutils.Len(vMilestones), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "milestone", Title: vEmpty})
+		} else {
+			@list.List(list.ListProps{Tag: "ol", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "row")), "grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4", "flex flex-col gap-8 border-l border-border")), Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vM := range uiutils.L(vMilestones) {
+					@list.ListItem(list.ListItemProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "row")), "relative flex flex-col gap-2 pt-6", "relative flex flex-col gap-2 pl-6")), Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "row")), "absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary", "absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary")), Attrs: uiutils.Attrs("aria-hidden", "true")})
+						@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vM, "date")) }
+							}
+							@badge.Badge(badge.BadgeProps{Variant: "outline", Size: "sm"}) {
+								{ uiutils.Text(uiutils.Get(vM, "tag")) }
+							}
+						}
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "lg", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vM, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vM, "text")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+templ milestoneTimelineFill1(p MilestoneTimelineProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4"})
+}
diff --git a/packages/templ/ui/blocks/nav-actions.templ b/packages/templ/ui/blocks/nav-actions.templ
new file mode 100644
index 0000000..34b21cc
--- /dev/null
+++ b/packages/templ/ui/blocks/nav-actions.templ
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/nav-actions.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NavActionsProps are the props of NavActions; the values are the JSON shapes of the TypeScript props.
+type NavActionsProps struct {
+	Login any `json:"login"`
+	LoginHref any `json:"loginHref"`
+	Cta any `json:"cta"`
+	CtaHref any `json:"ctaHref"`
+	Actions any `json:"actions"`
+	Tone any `json:"tone"`
+	ThemeLabel any `json:"themeLabel"`
+}
+
+// The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the press). No wrapper: they sit in the row of the bar.
+templ NavActions(p NavActionsProps) {
+	{{ vLogin := p.Login }}
+	{{ vLoginHref := p.LoginHref }}
+	{{ vCta := p.Cta }}
+	{{ vCtaHref := p.CtaHref }}
+	{{ vActions := uiutils.Def(p.Actions, "cta") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vThemeLabel := p.ThemeLabel }}
+	if uiutils.T(vLogin) {
+		@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Href: uiutils.S(vLoginHref), Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "inverse")), "text-background hover:bg-background/10", "")), Attrs: uiutils.Attrs("data-testid", "nav-login")}) {
+			{ uiutils.Text(vLogin) }
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vActions, "cta"), vCta)) {
+		@button.Button(button.ButtonProps{Variant: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "inverse")), "secondary", "default")), Size: "sm", Href: uiutils.S(vCtaHref), Attrs: uiutils.Attrs("data-testid", "header-cta")}) {
+			{ uiutils.Text(vCta) }
+		}
+	}
+	if uiutils.T(vThemeLabel) {
+		@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Attrs: uiutils.Attrs("data-testid", "theme-toggle")}) {
+			{ uiutils.Text(vThemeLabel) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/nav-bar-menu.templ b/packages/templ/ui/blocks/nav-bar-menu.templ
new file mode 100644
index 0000000..09f8901
--- /dev/null
+++ b/packages/templ/ui/blocks/nav-bar-menu.templ
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/nav-bar-menu.json
+
+package blocks
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NavBarMenuProps are the props of NavBarMenu; the values are the JSON shapes of the TypeScript props.
+type NavBarMenuProps struct {
+	Label any `json:"label"`
+	Links any `json:"links"`
+	Current any `json:"current"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The links of NavBar in a nav landmark; left out when there are no links.
+templ NavBarMenu(p NavBarMenuProps) {
+	{{ vLabel := p.Label }}
+	{{ vLinks := p.Links }}
+	{{ vCurrent := uiutils.Def(p.Current, "") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Gt(uiutils.Len(vLinks), float64(0)) {
+		@NavBlock(NavBlockProps{Label: vLabel, Class: uiutils.Cnv("order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0"), Testid: "site-nav", LandmarkLabel: vLandmarkLabel}) {
+			@NavLinks(NavLinksProps{Links: vLinks, Current: vCurrent})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/nav-bar.templ b/packages/templ/ui/blocks/nav-bar.templ
new file mode 100644
index 0000000..8ac6b4c
--- /dev/null
+++ b/packages/templ/ui/blocks/nav-bar.templ
@@ -0,0 +1,87 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/nav-bar.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	linkplain "github.com/ui8kit/codegen/packages/templ/ui/ui/link-plain"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NavBarProps are the props of NavBar; the values are the JSON shapes of the TypeScript props.
+type NavBarProps struct {
+	Label any `json:"label"`
+	Brand any `json:"brand"`
+	BrandHref any `json:"brandHref"`
+	Links any `json:"links"`
+	Current any `json:"current"`
+	Actions any `json:"actions"`
+	Search any `json:"search"`
+	Tone any `json:"tone"`
+	Layout any `json:"layout"`
+	Over any `json:"over"`
+	Skip any `json:"skip"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the middle with the links on both sides; search: a search field with its shortcut in the middle), over (none, media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark hero band). Turning solid on scroll is a port contract.
+templ NavBar(p NavBarProps) {
+	{{ vLabel := p.Label }}
+	{{ vBrand := p.Brand }}
+	{{ vBrandHref := p.BrandHref }}
+	{{ vLinks := p.Links }}
+	{{ vCurrent := uiutils.Def(p.Current, "") }}
+	{{ vActions := p.Actions }}
+	{{ vSearch := p.Search }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLayout := uiutils.Def(p.Layout, "inline") }}
+	{{ vOver := uiutils.Def(p.Over, "none") }}
+	{{ vSkip := p.Skip }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "header", Class: uiutils.S(uiutils.Cnv("relative", uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "inverse")), "border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background", "border-b border-border bg-background"), uiutils.Cond(uiutils.T(uiutils.Eq(vOver, "media")), "isolate overflow-hidden border-0 bg-transparent", ""))), Attrs: uiutils.Attrs("data-testid", "nav-bar", "data-layout", vLayout, "data-tone", vTone, "aria-label", vLandmarkLabel)}) {
+		@OverMedia(OverMediaProps{On: uiutils.Eq(vOver, "media"), Alt: vBrand})
+		if uiutils.T(vSkip) {
+			@linkplain.LinkPlain(linkplain.LinkPlainProps{Href: "#main-content", Class: "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border", Attrs: uiutils.Attrs("data-testid", "skip-link")}) {
+				{ uiutils.Text(vSkip) }
+			}
+		}
+		@container.Container(container.ContainerProps{Class: "mx-auto w-full max-w-6xl px-4", Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-wrap items-center justify-between gap-4", "py-4"))}) {
+				if uiutils.Eq(vLayout, "split") {
+					@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", vLabel, vLandmarkLabel)), vLabel), Class: uiutils.Cnv("w-full"), Testid: "site-nav"}) {
+						@grid.Grid(grid.GridProps{Cols: "1-3", Class: "w-full items-center gap-4"}) {
+							@box.Box(box.BoxProps{Class: "md:justify-self-start"}) {
+								@NavLinks(NavLinksProps{Links: vLinks, Current: vCurrent, Side: "left"})
+							}
+							@box.Box(box.BoxProps{Class: "text-center"}) {
+								@MenuEntry(MenuEntryProps{Href: vBrandHref, Class: uiutils.Cnv("text-lg font-medium"), Testid: "brand"}) {
+									{ uiutils.Text(vBrand) }
+								}
+							}
+							@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "end", Class: "flex-wrap md:justify-self-end"}) {
+								@box.Box(box.BoxProps{}) {
+									@NavLinks(NavLinksProps{Links: vLinks, Current: vCurrent, Side: "right"})
+								}
+								@NavActions(NavActionsProps{Login: uiutils.Get(vActions, "login"), LoginHref: uiutils.Get(vActions, "loginHref"), Cta: uiutils.Get(vActions, "cta"), CtaHref: uiutils.Get(vActions, "href"), Actions: uiutils.Get(vActions, "mode"), Tone: vTone, ThemeLabel: uiutils.Get(vActions, "themeLabel")})
+							}
+						}
+					}
+				} else {
+					@MenuEntry(MenuEntryProps{Href: vBrandHref, Class: uiutils.Cnv("text-lg font-medium"), Testid: "brand"}) {
+						{ uiutils.Text(vBrand) }
+					}
+					if uiutils.Eq(vLayout, "search") {
+						@SearchPalette(SearchPaletteProps{Label: uiutils.Get(vSearch, "label"), Shortcut: uiutils.Get(vSearch, "shortcut")})
+					}
+					@NavBarMenu(NavBarMenuProps{Label: vLabel, Links: vLinks, Current: vCurrent, LandmarkLabel: vLandmarkLabel})
+					@NavActions(NavActionsProps{Login: uiutils.Get(vActions, "login"), LoginHref: uiutils.Get(vActions, "loginHref"), Cta: uiutils.Get(vActions, "cta"), CtaHref: uiutils.Get(vActions, "href"), Actions: uiutils.Get(vActions, "mode"), Tone: vTone, ThemeLabel: uiutils.Get(vActions, "themeLabel")})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/nav-block.templ b/packages/templ/ui/blocks/nav-block.templ
new file mode 100644
index 0000000..81beabd
--- /dev/null
+++ b/packages/templ/ui/blocks/nav-block.templ
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/nav-block.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NavBlockProps are the props of NavBlock; the values are the JSON shapes of the TypeScript props.
+type NavBlockProps struct {
+	Label any `json:"label"`
+	Testid any `json:"testid"`
+	LandmarkLabel any `json:"landmarkLabel"`
+	Class string `json:"className"`
+}
+
+// A navigation region in its own file: Block tag nav named by `label`.
+templ NavBlock(p NavBlockProps) {
+	{{ vLabel := p.Label }}
+	{{ vTestid := p.Testid }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "nav", Class: uiutils.S(uiutils.Cnv(p.Class)), Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vLabel), "data-testid", vTestid)}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/nav-item-row.templ b/packages/templ/ui/blocks/nav-item-row.templ
new file mode 100644
index 0000000..8e3091e
--- /dev/null
+++ b/packages/templ/ui/blocks/nav-item-row.templ
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/nav-item-row.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NavItemRowProps are the props of NavItemRow; the values are the JSON shapes of the TypeScript props.
+type NavItemRowProps struct {
+	Inner any `json:"inner"`
+	ReserveRight any `json:"reserveRight"`
+	Icon templ.Component `json:"-"`
+	Right templ.Component `json:"-"`
+}
+
+// The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the right.
+templ NavItemRow(p NavItemRowProps) {
+	{{ vInner := p.Inner }}
+	{{ vReserveRight := uiutils.Def(p.ReserveRight, false) }}
+	@inline.Inline(inline.InlineProps{Class: uiutils.S(vInner), Attrs: uiutils.Attrs("data-slot", "nav-item-content")}) {
+		@inline.Inline(inline.InlineProps{Class: "flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center", Attrs: uiutils.Attrs("data-slot", "nav-item-left")}) {
+			if p.Icon != nil {
+				@p.Icon
+			}
+			@inline.Inline(inline.InlineProps{Class: "min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden", Attrs: uiutils.Attrs("data-slot", "nav-item-label")}) {
+				{ children... }
+			}
+		}
+		if uiutils.T((p.Right != nil)) {
+			@inline.Inline(inline.InlineProps{Class: "flex items-center gap-2 in-data-[nav=collapsed]:hidden", Attrs: uiutils.Attrs("data-slot", "nav-item-right")}) {
+				if p.Right != nil {
+					@p.Right
+				}
+			}
+		} else if uiutils.T(vReserveRight) {
+			@inline.Inline(inline.InlineProps{Class: "size-5 shrink-0 in-data-[nav=collapsed]:hidden", Attrs: uiutils.Attrs("data-slot", "nav-item-right")})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/nav-item.templ b/packages/templ/ui/blocks/nav-item.templ
new file mode 100644
index 0000000..d83932e
--- /dev/null
+++ b/packages/templ/ui/blocks/nav-item.templ
@@ -0,0 +1,56 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/nav-item.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	buttonplain "github.com/ui8kit/codegen/packages/templ/ui/ui/button-plain"
+	linkplain "github.com/ui8kit/codegen/packages/templ/ui/ui/link-plain"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NavItemProps are the props of NavItem; the values are the JSON shapes of the TypeScript props.
+type NavItemProps struct {
+	Selected any `json:"selected"`
+	Level any `json:"level"`
+	Href any `json:"href"`
+	Interactive any `json:"interactive"`
+	ReserveRight any `json:"reserveRight"`
+	ContentClass any `json:"contentClass"`
+	Class string `json:"className"`
+	Icon templ.Component `json:"-"`
+	Right templ.Component `json:"-"`
+}
+
+// A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a button, otherwise a static box.
+templ NavItem(p NavItemProps) {
+	{{ vSelected := uiutils.Def(p.Selected, false) }}
+	{{ vLevel := p.Level }}
+	{{ vHref := p.Href }}
+	{{ vInteractive := uiutils.Def(p.Interactive, false) }}
+	{{ vReserveRight := uiutils.Def(p.ReserveRight, false) }}
+	{{ vContentClass := p.ContentClass }}
+	{{ vState := any(uiutils.Cond(uiutils.T(vSelected), "selected", "default")) }}
+	{{ vOuter := any(uiutils.Cnv(recipeNavItem.Of(map[string]any{"level": vLevel, "state": vState}), "group in-data-[nav=collapsed]:justify-center", p.Class)) }}
+	{{ vInner := any(uiutils.Cnv(recipeNavItemContent.Of(map[string]any{"level": vLevel, "state": vState}), uiutils.And(!uiutils.T(vSelected), "group-hover:bg-muted"), "in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0", vContentClass)) }}
+	if uiutils.T(vHref) {
+		@linkplain.LinkPlain(linkplain.LinkPlainProps{Href: uiutils.S(vHref), Class: uiutils.S(vOuter), AriaCurrent: uiutils.S(uiutils.Cond(uiutils.T(vSelected), "page", nil)), Attrs: uiutils.Attrs("data-slot", "nav-item", "data-state", vState)}) {
+			@NavItemRow(NavItemRowProps{Inner: vInner, ReserveRight: vReserveRight, Icon: p.Icon, Right: p.Right}) {
+				{ children... }
+			}
+		}
+	} else if uiutils.T(vInteractive) {
+		@buttonplain.ButtonPlain(buttonplain.ButtonPlainProps{Type: "button", Class: uiutils.S(uiutils.Cnv(vOuter, "text-left")), Attrs: uiutils.Attrs("aria-current", uiutils.Cond(uiutils.T(vSelected), "page", nil), "data-slot", "nav-item", "data-state", vState)}) {
+			@NavItemRow(NavItemRowProps{Inner: vInner, ReserveRight: vReserveRight, Icon: p.Icon, Right: p.Right}) {
+				{ children... }
+			}
+		}
+	} else {
+		@box.Box(box.BoxProps{Class: uiutils.S(vOuter), Attrs: uiutils.Attrs("aria-current", uiutils.Cond(uiutils.T(vSelected), "page", nil), "data-slot", "nav-item", "data-state", vState)}) {
+			@NavItemRow(NavItemRowProps{Inner: vInner, ReserveRight: vReserveRight, Icon: p.Icon, Right: p.Right}) {
+				{ children... }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/nav-links.templ b/packages/templ/ui/blocks/nav-links.templ
new file mode 100644
index 0000000..76625bf
--- /dev/null
+++ b/packages/templ/ui/blocks/nav-links.templ
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/nav-links.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NavLinksProps are the props of NavLinks; the values are the JSON shapes of the TypeScript props.
+type NavLinksProps struct {
+	Links any `json:"links"`
+	Current any `json:"current"`
+	Side any `json:"side"`
+}
+
+// The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half of the list.
+templ NavLinks(p NavLinksProps) {
+	{{ vLinks := p.Links }}
+	{{ vCurrent := uiutils.Def(p.Current, "") }}
+	{{ vSide := uiutils.Def(p.Side, "all") }}
+	{{ vCount := any(uiutils.Len(vLinks)) }}
+	if uiutils.Gt(uiutils.Len(vLinks), float64(0)) {
+		@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "flex-wrap"}) {
+			for vI, vL := range uiutils.L(vLinks) {
+				if uiutils.T(uiutils.Or(uiutils.Eq(vSide, "all"), uiutils.Eq(uiutils.Lt(uiutils.Mul(float64(vI), float64(2)), vCount), uiutils.Eq(vSide, "left")))) {
+					@MenuEntry(MenuEntryProps{Href: uiutils.Get(vL, "href"), Class: uiutils.Cnv("text-sm"), Current: uiutils.Eq(uiutils.Get(vL, "id"), vCurrent), Testid: "nav-link"}) {
+						{ uiutils.Text(uiutils.Get(vL, "name")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/newsletter-form.templ b/packages/templ/ui/blocks/newsletter-form.templ
new file mode 100644
index 0000000..0652431
--- /dev/null
+++ b/packages/templ/ui/blocks/newsletter-form.templ
@@ -0,0 +1,66 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/newsletter-form.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NewsletterFormProps are the props of NewsletterForm; the values are the JSON shapes of the TypeScript props.
+type NewsletterFormProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Label any `json:"label"`
+	Submit any `json:"submit"`
+	Consent any `json:"consent"`
+	Layout any `json:"layout"`
+	Terms any `json:"terms"`
+	Tone any `json:"tone"`
+	Align any `json:"align"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start, center).
+templ NewsletterForm(p NewsletterFormProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vLabel := p.Label }}
+	{{ vSubmit := p.Submit }}
+	{{ vConsent := p.Consent }}
+	{{ vLayout := uiutils.Def(p.Layout, "inline") }}
+	{{ vTerms := uiutils.Def(p.Terms, "hide") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vAlign := uiutils.Def(p.Align, "center") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vText, Tone: vTone, Align: vAlign, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "split", "stack"), Media: map[string]any{"show": uiutils.Eq(vLayout, "split")}, LandmarkLabel: vLandmarkLabel, Aside: newsletterFormFill1(p, vTitle)}) {
+		@form.Form(form.FormProps{Method: "dialog", Class: uiutils.S(uiutils.Cnv("w-full max-w-md", uiutils.Cond(uiutils.T(uiutils.Eq(vAlign, "center")), "mx-auto", ""))), Attrs: uiutils.Attrs("data-testid", "newsletter-form")}) {
+			@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-email", vId)), Class: "sr-only"}) {
+				{ uiutils.Text(vLabel) }
+			}
+			@group.Group(group.GroupProps{Gap: "2", Align: "start", Class: uiutils.S(uiutils.Cnv("w-full", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "stacked")), "flex-col items-stretch", "flex-wrap")))}) {
+				@input.Input(input.InputProps{Type: "email", Name: "email", Class: "min-w-0 flex-1", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-email", vId), "data-testid", "field")})
+				@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "submit", Attrs: uiutils.Attrs("data-testid", "submit")}) {
+					{ uiutils.Text(vSubmit) }
+				}
+			}
+			if uiutils.T(uiutils.And(uiutils.Eq(vTerms, "show"), vConsent)) {
+				@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "consent")}) {
+					{ uiutils.Text(vConsent) }
+				}
+			}
+		}
+	}
+}
+
+templ newsletterFormFill1(p NewsletterFormProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+}
diff --git a/packages/templ/ui/blocks/notice.templ b/packages/templ/ui/blocks/notice.templ
new file mode 100644
index 0000000..96e6848
--- /dev/null
+++ b/packages/templ/ui/blocks/notice.templ
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/notice.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NoticeProps are the props of Notice; the values are the JSON shapes of the TypeScript props.
+type NoticeProps struct {
+	Text any `json:"text"`
+}
+
+// A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text renders nothing visible.
+templ Notice(p NoticeProps) {
+	{{ vText := p.Text }}
+	@box.Box(box.BoxProps{Class: "contents", Attrs: uiutils.Attrs("role", "status", "data-testid", "notice")}) {
+		if uiutils.T(vText) {
+			@text.Text(text.TextProps{Class: "fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold text-background shadow-lg"}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "circle-check", Size: 16})
+				{ uiutils.Text(vText) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/number-field.templ b/packages/templ/ui/blocks/number-field.templ
new file mode 100644
index 0000000..da2daf9
--- /dev/null
+++ b/packages/templ/ui/blocks/number-field.templ
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/number-field.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// NumberFieldProps are the props of NumberField; the values are the JSON shapes of the TypeScript props.
+type NumberFieldProps struct {
+	Value any `json:"value"`
+	Name any `json:"name"`
+	Min any `json:"min"`
+	Label any `json:"label"`
+	Decrease any `json:"decrease"`
+	Increase any `json:"increase"`
+}
+
+// A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its ring). Static markup: the buttons carry no logic; the page wires them.
+templ NumberField(p NumberFieldProps) {
+	{{ vValue := uiutils.Def(p.Value, "") }}
+	{{ vName := uiutils.Def(p.Name, "") }}
+	{{ vMin := uiutils.Def(p.Min, "") }}
+	{{ vLabel := p.Label }}
+	{{ vDecrease := p.Decrease }}
+	{{ vIncrease := p.Increase }}
+	@box.Box(box.BoxProps{Class: "inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input", Attrs: uiutils.Attrs("data-slot", "number-field")}) {
+		@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", Type: "button", AriaLabel: uiutils.S(vDecrease), Attrs: uiutils.Attrs("data-testid", "decrease")}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "minus", Size: 16})
+		}
+		@input.Input(input.InputProps{Type: "number", Name: uiutils.S(vName), Value: uiutils.S(vValue), Min: uiutils.S(vMin), AriaLabel: uiutils.S(vLabel), Size: "sm", Class: "number-bare w-8 bg-transparent px-0 text-center inset-ring-0"})
+		@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", Type: "button", AriaLabel: uiutils.S(vIncrease), Attrs: uiutils.Attrs("data-testid", "increase")}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "plus", Size: 16})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/offer-media.templ b/packages/templ/ui/blocks/offer-media.templ
new file mode 100644
index 0000000..da86fb0
--- /dev/null
+++ b/packages/templ/ui/blocks/offer-media.templ
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/offer-media.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// OfferMediaProps are the props of OfferMedia; the values are the JSON shapes of the TypeScript props.
+type OfferMediaProps struct {
+	Alt any `json:"alt"`
+	Card any `json:"card"`
+}
+
+// The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats over the picture).
+templ OfferMedia(p OfferMediaProps) {
+	{{ vAlt := p.Alt }}
+	{{ vCard := p.Card }}
+	@box.Box(box.BoxProps{Class: "relative", Attrs: uiutils.Attrs("data-testid", "hero-media")}) {
+		@MediaFrame(MediaFrameProps{Alt: vAlt, Ratio: "4/3"})
+		@group.Group(group.GroupProps{Gap: "4", Align: "start", Class: "absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg", Attrs: uiutils.Attrs("data-testid", "offer-card")}) {
+			@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vCard, "icon")), Size: 20})
+			}
+			@stack.Stack(stack.StackProps{Gap: "0"}) {
+				@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+					{ uiutils.Text(uiutils.Get(vCard, "title")) }
+				}
+				@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vCard, "text")) }
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/order-rows.templ b/packages/templ/ui/blocks/order-rows.templ
new file mode 100644
index 0000000..42d4c3e
--- /dev/null
+++ b/packages/templ/ui/blocks/order-rows.templ
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/order-rows.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/table"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// OrderRowsProps are the props of OrderRows; the values are the JSON shapes of the TypeScript props.
+type OrderRowsProps struct {
+	Orders any `json:"orders"`
+	Statuses any `json:"statuses"`
+	Labels any `json:"labels"`
+	Density any `json:"density"`
+}
+
+// The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill.
+templ OrderRows(p OrderRowsProps) {
+	{{ vOrders := p.Orders }}
+	{{ vStatuses := p.Statuses }}
+	{{ vLabels := p.Labels }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	@box.Box(box.BoxProps{Class: "w-full overflow-x-auto"}) {
+		@table.Table(table.TableProps{Class: "w-full text-left text-sm", Attrs: uiutils.Attrs("data-testid", "order-table")}) {
+			@table.TableCaption(table.TableCaptionProps{Class: "sr-only"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "caption")) }
+			}
+			@table.TableHead(table.TableHeadProps{}) {
+				@table.TableRow(table.TableRowProps{}) {
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "number")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "date")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "items")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "total")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "status")) }
+					}
+				}
+			}
+			@table.TableBody(table.TableBodyProps{}) {
+				for _, vO := range uiutils.L(vOrders) {
+					@table.TableRow(table.TableRowProps{Class: "border-t border-border", Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@table.TableCell(table.TableCellProps{Class: uiutils.S(uiutils.Cnv("font-semibold", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-2", "py-4")))}) {
+							{ uiutils.Text(uiutils.Get(vO, "number")) }
+						}
+						@table.TableCell(table.TableCellProps{}) {
+							{ uiutils.Text(uiutils.Get(vO, "date")) }
+						}
+						@table.TableCell(table.TableCellProps{}) {
+							{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "itemsCount"), uiutils.Get(vO, "items"))) }
+						}
+						@table.TableCell(table.TableCellProps{}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vO, "total"), uiutils.Get(vO, "currency"))) }
+						}
+						@table.TableCell(table.TableCellProps{}) {
+							@Pill(PillProps{Tone: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vO, "status"), "paid")), "green", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vO, "status"), "shipped")), "blue", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vO, "status"), "pending")), "amber", "gray")))}) {
+								{ uiutils.Text(uiutils.At(vStatuses, uiutils.Get(vO, "status"))) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/order-summary.templ b/packages/templ/ui/blocks/order-summary.templ
new file mode 100644
index 0000000..12a893a
--- /dev/null
+++ b/packages/templ/ui/blocks/order-summary.templ
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/order-summary.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// OrderSummaryProps are the props of OrderSummary; the values are the JSON shapes of the TypeScript props.
+type OrderSummaryProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Rows any `json:"rows"`
+	Empty any `json:"empty"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Cta any `json:"cta"`
+	Note any `json:"note"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout (card, plain), cta (show, hide), note (show, hide), density, tone.
+templ OrderSummary(p OrderSummaryProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vRows := p.Rows }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "card") }}
+	{{ vCta := uiutils.Def(p.Cta, "show") }}
+	{{ vNote := uiutils.Def(p.Note, "show") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Measure: "md", LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vRows), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "receipt", Title: vEmpty})
+		} else {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "card")), "rounded bg-card p-6 inset-ring inset-ring-border", ""))), Attrs: uiutils.Attrs("data-testid", "summary")}) {
+				@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+					@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col gap-4"}) {
+						for _, vRow := range uiutils.L(vRows) {
+							@list.ListItem(list.ListItemProps{Class: uiutils.S(uiutils.Cnv("flex items-center justify-between gap-4", uiutils.Cond(uiutils.T(uiutils.Get(vRow, "strong")), "border-t border-border pt-4 text-base font-bold", "text-sm text-muted-foreground"))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+								@inline.Inline(inline.InlineProps{}) {
+									{ uiutils.Text(uiutils.Get(vRow, "label")) }
+								}
+								@inline.Inline(inline.InlineProps{}) {
+									{ uiutils.Text(uiutils.Money(uiutils.Get(vRow, "amount"), uiutils.Get(vRow, "currency"))) }
+								}
+							}
+						}
+					}
+					if uiutils.Eq(vCta, "show") {
+						@button.Button(button.ButtonProps{Variant: "default", Size: "default", Class: "w-full", Attrs: uiutils.Attrs("data-testid", "checkout")}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "checkout")) }
+						}
+					}
+					if uiutils.Eq(vNote, "show") {
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "note")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/order-table.templ b/packages/templ/ui/blocks/order-table.templ
new file mode 100644
index 0000000..03d0094
--- /dev/null
+++ b/packages/templ/ui/blocks/order-table.templ
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/order-table.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// OrderTableProps are the props of OrderTable; the values are the JSON shapes of the TypeScript props.
+type OrderTableProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Orders any `json:"orders"`
+	Empty any `json:"empty"`
+	Statuses any `json:"statuses"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Pager any `json:"pager"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The order history as a table or as cards: number, date, items, total and a status pill, with an optional pager. Axes: layout (table, cards), pager (show, hide), tone, density.
+templ OrderTable(p OrderTableProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vOrders := p.Orders }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vStatuses := p.Statuses }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "table") }}
+	{{ vPager := uiutils.Def(p.Pager, "show") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vOrders), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "package", Title: vEmpty})
+		} else {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+				if uiutils.Eq(vLayout, "table") {
+					@OrderRows(OrderRowsProps{Orders: vOrders, Statuses: vStatuses, Labels: vLabels, Density: vDensity})
+				} else {
+					@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "order-cards")}) {
+						for _, vO := range uiutils.L(vOrders) {
+							@card.Card(card.CardProps{Variant: "default", Attrs: uiutils.Attrs("data-testid", "item")}) {
+								@card.CardContent(card.CardContentProps{Class: "flex flex-wrap items-center justify-between gap-4"}) {
+									@stack.Stack(stack.StackProps{Gap: "0"}) {
+										@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+											{ uiutils.Text(uiutils.Get(vO, "number")) }
+										}
+										@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+											{ uiutils.Text(uiutils.Get(vO, "date")) }
+										}
+									}
+									@text.Text(text.TextProps{Size: "sm"}) {
+										{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "itemsCount"), uiutils.Get(vO, "items"))) }
+									}
+									@text.Text(text.TextProps{Size: "sm", Weight: "bold"}) {
+										{ uiutils.Text(uiutils.Money(uiutils.Get(vO, "total"), uiutils.Get(vO, "currency"))) }
+									}
+									@Pill(PillProps{Tone: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vO, "status"), "paid")), "green", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vO, "status"), "shipped")), "blue", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vO, "status"), "pending")), "amber", "gray")))}) {
+										{ uiutils.Text(uiutils.At(vStatuses, uiutils.Get(vO, "status"))) }
+									}
+								}
+							}
+						}
+					}
+				}
+				if uiutils.Eq(vPager, "show") {
+					@Pager(PagerProps{Page: float64(1), Pages: float64(3), Summary: uiutils.Tpl(uiutils.Get(vLabels, "summary"), float64(1), float64(4), float64(12)), PreviousLabel: uiutils.Get(vLabels, "previous"), NextLabel: uiutils.Get(vLabels, "next")})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/over-media.templ b/packages/templ/ui/blocks/over-media.templ
new file mode 100644
index 0000000..1221317
--- /dev/null
+++ b/packages/templ/ui/blocks/over-media.templ
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/over-media.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// OverMediaProps are the props of OverMedia; the values are the JSON shapes of the TypeScript props.
+type OverMediaProps struct {
+	On any `json:"on"`
+	Alt any `json:"alt"`
+}
+
+// A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing. It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the header stays the root of the block (rule 01).
+templ OverMedia(p OverMediaProps) {
+	{{ vOn := uiutils.Def(p.On, false) }}
+	{{ vAlt := p.Alt }}
+	if uiutils.T(vOn) {
+		@box.Box(box.BoxProps{Class: "pointer-events-none absolute inset-0 -z-10", Attrs: uiutils.Attrs("data-testid", "over")}) {
+			@MediaFrame(MediaFrameProps{Alt: vAlt, Ratio: "21/9", Class: uiutils.Cnv("size-full rounded-none opacity-40")})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/page-aside.templ b/packages/templ/ui/blocks/page-aside.templ
new file mode 100644
index 0000000..4d56ec8
--- /dev/null
+++ b/packages/templ/ui/blocks/page-aside.templ
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/page-aside.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PageAsideProps are the props of PageAside; the values are the JSON shapes of the TypeScript props.
+type PageAsideProps struct {
+	Extras any `json:"extras"`
+	Mode any `json:"mode"`
+}
+
+// The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key facts as cards in two columns.
+templ PageAside(p PageAsideProps) {
+	{{ vExtras := p.Extras }}
+	{{ vMode := uiutils.Def(p.Mode, "figure") }}
+	if uiutils.Eq(vMode, "figure") {
+		@stack.Stack(stack.StackProps{Gap: "0", Align: "end", Class: "text-end", Attrs: uiutils.Attrs("data-testid", "page-figure")}) {
+			@text.Text(text.TextProps{Size: "4xl", Weight: "bold"}) {
+				{ uiutils.Text(uiutils.Get(vExtras, "value")) }
+			}
+			@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Get(vExtras, "caption")) }
+			}
+		}
+	}
+	if uiutils.Eq(vMode, "note") {
+		@group.Group(group.GroupProps{Gap: "4", Align: "start", Class: "rounded bg-card inset-ring inset-ring-border max-w-xs p-4", Attrs: uiutils.Attrs("data-testid", "page-note")}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vExtras, "icon")), Size: 20})
+			@stack.Stack(stack.StackProps{Gap: "0"}) {
+				@text.Text(text.TextProps{Size: "lg", Weight: "bold"}) {
+					{ uiutils.Text(uiutils.Get(vExtras, "value")) }
+				}
+				@text.Text(text.TextProps{Size: "sm", Weight: "medium"}) {
+					{ uiutils.Text(uiutils.Get(vExtras, "caption")) }
+				}
+				@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vExtras, "note")) }
+				}
+			}
+		}
+	}
+	if uiutils.Eq(vMode, "facts") {
+		@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-4"}) {
+			for vI, vS := range uiutils.L(uiutils.Get(vExtras, "facts")) {
+				if uiutils.Lt(float64(vI), float64(4)) {
+					@stack.Stack(stack.StackProps{Gap: "0", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "page-fact")}) {
+						@text.Text(text.TextProps{Size: "lg", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "value")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Weight: "medium"}) {
+							{ uiutils.Text(uiutils.Get(vS, "label")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "hint")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/page-crumbs.templ b/packages/templ/ui/blocks/page-crumbs.templ
new file mode 100644
index 0000000..d80448b
--- /dev/null
+++ b/packages/templ/ui/blocks/page-crumbs.templ
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/page-crumbs.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PageCrumbsProps are the props of PageCrumbs; the values are the JSON shapes of the TypeScript props.
+type PageCrumbsProps struct {
+	Label any `json:"label"`
+	Crumbs any `json:"crumbs"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the last entry is the current page and is not a link.
+templ PageCrumbs(p PageCrumbsProps) {
+	{{ vLabel := p.Label }}
+	{{ vCrumbs := p.Crumbs }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vLast := any(uiutils.Sub(uiutils.Len(vCrumbs), float64(1))) }}
+	@block.Block(block.BlockProps{Tag: "nav", Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vLabel), "data-testid", "crumbs")}) {
+		@list.List(list.ListProps{Class: "m-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground"}) {
+			for vI, vC := range uiutils.L(vCrumbs) {
+				@list.ListItem(list.ListItemProps{Class: "flex items-center gap-2"}) {
+					if uiutils.Lt(float64(vI), vLast) {
+						if uiutils.T(uiutils.Get(vC, "href")) {
+							@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Get(vC, "href")), Variant: "muted", Size: "sm", Attrs: uiutils.Attrs("data-testid", "crumb")}) {
+								{ uiutils.Text(uiutils.Get(vC, "name")) }
+							}
+						} else {
+							@inline.Inline(inline.InlineProps{Attrs: uiutils.Attrs("data-testid", "crumb")}) {
+								{ uiutils.Text(uiutils.Get(vC, "name")) }
+							}
+						}
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-right", Size: 16})
+					} else {
+						@inline.Inline(inline.InlineProps{Class: "font-medium text-foreground", Attrs: uiutils.Attrs("aria-current", "page")}) {
+							{ uiutils.Text(uiutils.Get(vC, "name")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/page-header.templ b/packages/templ/ui/blocks/page-header.templ
new file mode 100644
index 0000000..d25a9f4
--- /dev/null
+++ b/packages/templ/ui/blocks/page-header.templ
@@ -0,0 +1,45 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/page-header.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PageHeaderProps are the props of PageHeader; the values are the JSON shapes of the TypeScript props.
+type PageHeaderProps struct {
+	Title any `json:"title"`
+	Summary any `json:"summary"`
+	Id any `json:"id"`
+	Actions templ.Component `json:"-"`
+}
+
+// The page heading: a title, a one-line summary and the action buttons on the right (below on phones).
+templ PageHeader(p PageHeaderProps) {
+	{{ vTitle := p.Title }}
+	{{ vSummary := p.Summary }}
+	{{ vId := p.Id }}
+	@box.Box(box.BoxProps{Class: "flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between"}) {
+		@box.Box(box.BoxProps{Class: "flex min-w-0 flex-col gap-2"}) {
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(1))), Size: "xl", Weight: "bold", Class: "m-0", Attrs: uiutils.Attrs("id", vId)}) {
+				{ uiutils.Text(vTitle) }
+			}
+			if uiutils.T(vSummary) {
+				@text.Text(text.TextProps{Class: "m-0 text-xs font-medium text-muted-foreground"}) {
+					{ uiutils.Text(vSummary) }
+				}
+			}
+		}
+		if uiutils.T((p.Actions != nil)) {
+			@box.Box(box.BoxProps{Class: "flex flex-wrap items-center gap-2"}) {
+				if p.Actions != nil {
+					@p.Actions
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/page-intro.templ b/packages/templ/ui/blocks/page-intro.templ
new file mode 100644
index 0000000..bdbffc8
--- /dev/null
+++ b/packages/templ/ui/blocks/page-intro.templ
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/page-intro.json
+
+package blocks
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PageIntroProps are the props of PageIntro; the values are the JSON shapes of the TypeScript props.
+type PageIntroProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Cta any `json:"cta"`
+	Href any `json:"href"`
+	Level any `json:"level"`
+	Align any `json:"align"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action. Axes: align (start, center), tone, density.
+templ PageIntro(p PageIntroProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vCta := p.Cta }}
+	{{ vHref := p.Href }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vAlign := uiutils.Def(p.Align, "start") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vText, Heading: map[string]any{"level": vLevel}, Align: vAlign, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.T(vCta) {
+			@ActionGroup(ActionGroupProps{Primary: vCta, PrimaryHref: vHref, Align: vAlign})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/page-trail.templ b/packages/templ/ui/blocks/page-trail.templ
new file mode 100644
index 0000000..bad79e1
--- /dev/null
+++ b/packages/templ/ui/blocks/page-trail.templ
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/page-trail.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PageTrailProps are the props of PageTrail; the values are the JSON shapes of the TypeScript props.
+type PageTrailProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Label any `json:"label"`
+	Crumbs any `json:"crumbs"`
+	Extras any `json:"extras"`
+	Aside any `json:"aside"`
+	Level any `json:"level"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts in two columns), tone.
+templ PageTrail(p PageTrailProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vLabel := p.Label }}
+	{{ vCrumbs := p.Crumbs }}
+	{{ vExtras := p.Extras }}
+	{{ vAside := uiutils.Def(p.Aside, "none") }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vTitleId := any(uiutils.Add(vId, "-title")) }}
+	@block.Block(block.BlockProps{Tag: "section", Class: uiutils.S(uiutils.Cnv("py-8", uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "muted")), "bg-muted", ""))), Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, vTitleId), "data-testid", "section", "data-tone", vTone, "data-aside", vAside, "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "flex flex-col gap-6")), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			if uiutils.Gt(uiutils.Len(vCrumbs), float64(0)) {
+				@PageCrumbs(PageCrumbsProps{Label: vLabel, Crumbs: vCrumbs, LandmarkLabel: vLandmarkLabel})
+			}
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vAside, "facts")), "grid grid-cols-1 items-center gap-8 lg:grid-cols-2", "flex flex-col gap-6 md:flex-row md:items-end md:justify-between"))}) {
+				@stack.Stack(stack.StackProps{Gap: "4", Align: "start", Class: "min-w-0"}) {
+					@SectionHeader(SectionHeaderProps{TitleId: vTitleId, Title: vTitle, Heading: map[string]any{"level": vLevel, "badge": vBadge}, Lead: vLead})
+				}
+				if !uiutils.Eq(vAside, "none") {
+					@PageAside(PageAsideProps{Extras: vExtras, Mode: vAside})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/pager.templ b/packages/templ/ui/blocks/pager.templ
new file mode 100644
index 0000000..41787eb
--- /dev/null
+++ b/packages/templ/ui/blocks/pager.templ
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/pager.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PagerProps are the props of Pager; the values are the JSON shapes of the TypeScript props.
+type PagerProps struct {
+	Page any `json:"page"`
+	Pages any `json:"pages"`
+	Summary any `json:"summary"`
+	PreviousLabel any `json:"previousLabel"`
+	NextLabel any `json:"nextLabel"`
+	Numbered any `json:"numbered"`
+	PageLabel any `json:"pageLabel"`
+	MoreLabel any `json:"moreLabel"`
+}
+
+// The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4 5 6 … 21), with `moreLabel` a "Load more" button. The current page is a plain element marked aria-current="page"; the others are buttons. All text comes in through props.
+templ Pager(p PagerProps) {
+	{{ vPage := p.Page }}
+	{{ vPages := p.Pages }}
+	{{ vSummary := p.Summary }}
+	{{ vPreviousLabel := p.PreviousLabel }}
+	{{ vNextLabel := p.NextLabel }}
+	{{ vNumbered := uiutils.Def(p.Numbered, false) }}
+	{{ vPageLabel := p.PageLabel }}
+	{{ vMoreLabel := p.MoreLabel }}
+	{{ vNumbers := any(uiutils.PageWindow(vPage, vPages)) }}
+	@box.Box(box.BoxProps{Class: "flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "pager")}) {
+		@inline.Inline(inline.InlineProps{Class: "flex flex-wrap items-center gap-4"}) {
+			@inline.Inline(inline.InlineProps{}) {
+				{ uiutils.Text(vSummary) }
+			}
+		}
+		@inline.Inline(inline.InlineProps{Class: "flex flex-wrap items-center gap-2"}) {
+			if uiutils.T(uiutils.And(vMoreLabel, uiutils.Lt(vPage, vPages))) {
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Type: "button", Attrs: uiutils.Attrs("data-testid", "pager-more")}) {
+					{ uiutils.Text(vMoreLabel) }
+				}
+			}
+			@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Layout: "icon", AriaLabel: uiutils.S(vPreviousLabel), Disabled: uiutils.T(uiutils.Le(vPage, float64(1)))}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-left", Size: 16})
+			}
+			if uiutils.T(vNumbered) {
+				for _, vN := range uiutils.L(vNumbers) {
+					if uiutils.Eq(vN, nil) {
+						@inline.Inline(inline.InlineProps{Class: "w-8 text-center"}) {
+							{ uiutils.Text("…") }
+						}
+					} else if uiutils.Eq(vN, vPage) {
+						@inline.Inline(inline.InlineProps{Class: "flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background", Attrs: uiutils.Attrs("aria-current", "page", "data-testid", "pager-current")}) {
+							{ uiutils.Text(vN) }
+						}
+					} else {
+						@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", Type: "button", AriaLabel: uiutils.S(uiutils.Tpl(vPageLabel, vN))}) {
+							{ uiutils.Text(vN) }
+						}
+					}
+				}
+			} else {
+				@inline.Inline(inline.InlineProps{Class: "min-w-12 text-center font-bold text-foreground"}) {
+					{ uiutils.Text(vPage) }
+					{ uiutils.Text(" / ") }
+					{ uiutils.Text(vPages) }
+				}
+			}
+			@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Layout: "icon", AriaLabel: uiutils.S(vNextLabel), Disabled: uiutils.T(uiutils.Ge(vPage, vPages))}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-right", Size: 16})
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/panel.templ b/packages/templ/ui/blocks/panel.templ
new file mode 100644
index 0000000..4df197e
--- /dev/null
+++ b/packages/templ/ui/blocks/panel.templ
@@ -0,0 +1,49 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/panel.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PanelProps are the props of Panel; the values are the JSON shapes of the TypeScript props.
+type PanelProps struct {
+	Title any `json:"title"`
+	Description any `json:"description"`
+	Id any `json:"id"`
+	Class string `json:"className"`
+	Actions templ.Component `json:"-"`
+}
+
+// A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the Block of its block (rule 01).
+templ Panel(p PanelProps) {
+	{{ vTitle := p.Title }}
+	{{ vDescription := p.Description }}
+	{{ vId := p.Id }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border", p.Class)), Attrs: uiutils.Attrs("role", "group", "aria-labelledby", uiutils.Cond(uiutils.T(uiutils.And(vTitle, vId)), uiutils.Tpl("{0}-t", vId), nil))}) {
+		if uiutils.T(uiutils.Or(vTitle, (p.Actions != nil))) {
+			@box.Box(box.BoxProps{Class: "flex items-start justify-between gap-4"}) {
+				@box.Box(box.BoxProps{Class: "flex min-w-0 flex-col gap-2"}) {
+					if uiutils.T(vTitle) {
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "base", Class: "m-0 text-foreground", Attrs: uiutils.Attrs("id", uiutils.Cond(uiutils.T(vId), uiutils.Tpl("{0}-t", vId), nil))}) {
+							{ uiutils.Text(vTitle) }
+						}
+					}
+					if uiutils.T(vDescription) {
+						@text.Text(text.TextProps{Class: "m-0 text-xs font-medium text-muted-foreground"}) {
+							{ uiutils.Text(vDescription) }
+						}
+					}
+				}
+				if p.Actions != nil {
+					@p.Actions
+				}
+			}
+		}
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/payment-options.templ b/packages/templ/ui/blocks/payment-options.templ
new file mode 100644
index 0000000..210f6d9
--- /dev/null
+++ b/packages/templ/ui/blocks/payment-options.templ
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/payment-options.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/radio"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PaymentOptionsProps are the props of PaymentOptions; the values are the JSON shapes of the TypeScript props.
+type PaymentOptionsProps struct {
+	Payments any `json:"payments"`
+	Name any `json:"name"`
+	Checked any `json:"checked"`
+}
+
+// Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup.
+templ PaymentOptions(p PaymentOptionsProps) {
+	{{ vPayments := p.Payments }}
+	{{ vName := p.Name }}
+	{{ vChecked := uiutils.Def(p.Checked, "") }}
+	@grid.Grid(grid.GridProps{Cols: "1-2", Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "payments")}) {
+		for _, vP := range uiutils.L(vPayments) {
+			@label.Label(label.LabelProps{Class: "flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground", Attrs: uiutils.Attrs("data-testid", "payment")}) {
+				@radio.Radio(radio.RadioProps{Name: uiutils.S(vName), Value: uiutils.S(uiutils.Get(vP, "id")), Checked: uiutils.T(uiutils.Eq(uiutils.Get(vP, "id"), vChecked))})
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vP, "icon")), Size: 20, Class: "shrink-0"})
+				@inline.Inline(inline.InlineProps{Class: "flex flex-col items-start justify-start gap-0"}) {
+					@inline.Inline(inline.InlineProps{Class: "text-sm font-semibold"}) {
+						{ uiutils.Text(uiutils.Get(vP, "title")) }
+					}
+					@inline.Inline(inline.InlineProps{Class: "text-xs text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vP, "text")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/photo-gallery.templ b/packages/templ/ui/blocks/photo-gallery.templ
new file mode 100644
index 0000000..69a8045
--- /dev/null
+++ b/packages/templ/ui/blocks/photo-gallery.templ
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/photo-gallery.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PhotoGalleryProps are the props of PhotoGallery; the values are the JSON shapes of the TypeScript props.
+type PhotoGalleryProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Photos any `json:"photos"`
+	Empty any `json:"empty"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Captions any `json:"captions"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes: layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.
+templ PhotoGallery(p PhotoGalleryProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vPhotos := p.Photos }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vCaptions := uiutils.Def(p.Captions, "show") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vPhotos), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "image", Title: vEmpty})
+		} else if uiutils.Eq(vLayout, "featured") {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "featured")}) {
+				@MediaFrame(MediaFrameProps{Alt: vTitle})
+				@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between"}) {
+					@stack.Stack(stack.StackProps{Gap: "0"}) {
+						@text.Text(text.TextProps{Size: "base", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.FirstOf(vPhotos, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "counter"), float64(1), uiutils.Len(vPhotos))) }
+						}
+					}
+					@group.Group(group.GroupProps{Gap: "2"}) {
+						@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Layout: "icon", AriaLabel: uiutils.S(uiutils.Get(vLabels, "previous"))}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-left", Size: 16})
+						}
+						@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Layout: "icon", AriaLabel: uiutils.S(uiutils.Get(vLabels, "next"))}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-right", Size: 16})
+						}
+					}
+				}
+				@box.Box(box.BoxProps{Class: "grid grid-cols-3 gap-2 sm:grid-cols-9", Attrs: uiutils.Attrs("data-testid", "thumbs")}) {
+					for vI, vP := range uiutils.L(vPhotos) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vP, "title"), Ratio: "1/1", Class: uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(float64(vI), float64(0))), "ring-2 ring-foreground", ""))})
+					}
+				}
+			}
+		} else {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "masonry")), "columns-1 gap-4 sm:columns-2 lg:columns-3", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "mosaic")), "grid grid-cols-2 gap-4 md:grid-cols-4", "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"))), Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for vI, vP := range uiutils.L(vPhotos) {
+					@FigureBlock(FigureBlockProps{Class: uiutils.Cnv(uiutils.Cnv("flex flex-col gap-2", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "masonry")), "mb-4 break-inside-avoid", ""), uiutils.Cond(uiutils.T(uiutils.And(uiutils.Eq(vLayout, "mosaic"), uiutils.Eq(float64(vI), float64(0)))), "col-span-2 row-span-2", ""), uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "cards")), "rounded bg-card inset-ring inset-ring-border p-4", ""))), Testid: "item"}) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vP, "title"), Ratio: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "masonry")), uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vP, "size"), "tall")), "3/4", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vP, "size"), "wide")), "16/9", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vP, "size"), "large")), "4/3", "1/1"))), uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "grid")), "4/3", "1/1")), Class: uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "mosaic")), "h-full", ""))})
+						if uiutils.T(uiutils.And(uiutils.Eq(vCaptions, "show"), uiutils.Eq(vLayout, "cards"))) {
+							@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between"}) {
+								@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+									{ uiutils.Text(uiutils.Get(vP, "title")) }
+								}
+								@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm"}) {
+									{ uiutils.Text(uiutils.Get(vP, "tag")) }
+								}
+							}
+						}
+						if uiutils.T(uiutils.And(uiutils.Eq(vCaptions, "show"), uiutils.Or(uiutils.Eq(vLayout, "grid"), uiutils.Eq(vLayout, "masonry")))) {
+							@box.Box(box.BoxProps{Class: "text-sm text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "caption")}) {
+								{ uiutils.Text(uiutils.Get(vP, "title")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/pill.templ b/packages/templ/ui/blocks/pill.templ
new file mode 100644
index 0000000..30c4ffa
--- /dev/null
+++ b/packages/templ/ui/blocks/pill.templ
@@ -0,0 +1,44 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/pill.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PillProps are the props of Pill; the values are the JSON shapes of the TypeScript props.
+type PillProps struct {
+	Tone any `json:"tone"`
+	Icon any `json:"icon"`
+	Class string `json:"className"`
+}
+
+var pillPill = map[string]any{
+	"gray": "bg-muted text-muted-foreground inset-ring-border",
+	"blue": "bg-blue-50 text-blue-700 inset-ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:inset-ring-blue-900",
+	"amber": "bg-amber-50 text-amber-700 inset-ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:inset-ring-amber-900",
+	"green": "bg-green-50 text-green-700 inset-ring-green-200 dark:bg-green-950 dark:text-green-300 dark:inset-ring-green-900",
+	"red": "bg-red-50 text-red-700 inset-ring-red-200 dark:bg-red-950 dark:text-red-300 dark:inset-ring-red-900",
+	"violet": "bg-violet-50 text-violet-700 inset-ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:inset-ring-violet-900",
+	"pink": "bg-pink-50 text-pink-700 inset-ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:inset-ring-pink-900",
+	"orange": "bg-orange-50 text-orange-700 inset-ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:inset-ring-orange-900",
+	"cyan": "bg-cyan-50 text-cyan-700 inset-ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:inset-ring-cyan-900",
+}
+
+// A status pill: a tinted label with an icon (published, draft, role, comment state).
+templ Pill(p PillProps) {
+	{{ vTone := uiutils.Def(p.Tone, "gray") }}
+	{{ vIcon := p.Icon }}
+	@box.Box(box.BoxProps{Class: "contents"}) {
+		@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cnv("inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring", uiutils.At(pillPill, vTone), p.Class)), Attrs: uiutils.Attrs("data-slot", "pill")}) {
+			if uiutils.T(vIcon) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(vIcon), Size: 12})
+			}
+			{ children... }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-actions.templ b/packages/templ/ui/blocks/post-actions.templ
new file mode 100644
index 0000000..22786d6
--- /dev/null
+++ b/packages/templ/ui/blocks/post-actions.templ
@@ -0,0 +1,50 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-actions.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostActionsProps are the props of PostActions; the values are the JSON shapes of the TypeScript props.
+type PostActionsProps struct {
+	Labels any `json:"labels"`
+	Mode any `json:"mode"`
+}
+
+// The calls to action of a post header: share and save side by side, one wide read button, or a wide read button with share and save as icons.
+templ PostActions(p PostActionsProps) {
+	{{ vLabels := p.Labels }}
+	{{ vMode := uiutils.Def(p.Mode, "pair") }}
+	if uiutils.Eq(vMode, "pair") {
+		@group.Group(group.GroupProps{Gap: "2", Class: "flex-wrap"}) {
+			@button.Button(button.ButtonProps{Variant: "default", Size: "default", Class: "gap-2", Attrs: uiutils.Attrs("data-testid", "action-primary")}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "share-2", Size: 16})
+				{ uiutils.Text(uiutils.Get(vLabels, "share")) }
+			}
+			@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Class: "gap-2", Attrs: uiutils.Attrs("data-testid", "post-save")}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "bookmark", Size: 16})
+				{ uiutils.Text(uiutils.Get(vLabels, "save")) }
+			}
+		}
+	} else {
+		@group.Group(group.GroupProps{Gap: "2"}) {
+			@button.Button(button.ButtonProps{Variant: "default", Size: "default", Class: "gap-2 flex-1", Attrs: uiutils.Attrs("data-testid", "action-primary")}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "book-open", Size: 16})
+				{ uiutils.Text(uiutils.Get(vLabels, "read")) }
+			}
+			if uiutils.Eq(vMode, "icons") {
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Layout: "icon", AriaLabel: uiutils.S(uiutils.Get(vLabels, "share")), Attrs: uiutils.Attrs("data-testid", "post-share")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "share-2", Size: 16})
+				}
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Layout: "icon", AriaLabel: uiutils.S(uiutils.Get(vLabels, "save")), Attrs: uiutils.Attrs("data-testid", "post-save")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "bookmark", Size: 16})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-author.templ b/packages/templ/ui/blocks/post-author.templ
new file mode 100644
index 0000000..8a519b2
--- /dev/null
+++ b/packages/templ/ui/blocks/post-author.templ
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-author.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostAuthorProps are the props of PostAuthor; the values are the JSON shapes of the TypeScript props.
+type PostAuthorProps struct {
+	Post any `json:"post"`
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+	Mode any `json:"mode"`
+	Share any `json:"share"`
+	Class string `json:"className"`
+}
+
+// The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line, a card, or a card with the bio.
+templ PostAuthor(p PostAuthorProps) {
+	{{ vPost := p.Post }}
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	{{ vMode := uiutils.Def(p.Mode, "line") }}
+	{{ vShare := uiutils.Def(p.Share, false) }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: uiutils.S(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vMode, "line")), "", "rounded bg-card inset-ring inset-ring-border p-4"), p.Class)), Attrs: uiutils.Attrs("data-testid", "post-author")}) {
+		@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+			@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vPost, "author"), Ratio: "1/1", Class: uiutils.Cnv("size-10 shrink-0 rounded-full")})
+			@stack.Stack(stack.StackProps{Gap: "0", Align: "start", Class: "min-w-0 flex-1 text-start"}) {
+				@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+					{ uiutils.Text(uiutils.Get(vPost, "author")) }
+				}
+				@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vExtras, "role")) }
+				}
+			}
+			if uiutils.T(vShare) {
+				@group.Group(group.GroupProps{Gap: "2"}) {
+					@button.Button(button.ButtonProps{Variant: "ghost", Size: "default", Class: "gap-2", Attrs: uiutils.Attrs("data-testid", "post-share")}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "share-2", Size: 16})
+						{ uiutils.Text(uiutils.Get(vLabels, "share")) }
+					}
+					@button.Button(button.ButtonProps{Variant: "ghost", Size: "default", Class: "gap-2", Attrs: uiutils.Attrs("data-testid", "post-save")}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "bookmark", Size: 16})
+						{ uiutils.Text(uiutils.Get(vLabels, "save")) }
+					}
+				}
+			} else {
+				@box.Box(box.BoxProps{Class: "text-muted-foreground"}) {
+					@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "calendar", Size: 16})
+						@text.Text(text.TextProps{Size: "sm"}) {
+							{ uiutils.Text(uiutils.Get(vPost, "date")) }
+						}
+					}
+				}
+			}
+		}
+		if uiutils.Eq(vMode, "bio") {
+			@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Get(vExtras, "bio")) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-card.templ b/packages/templ/ui/blocks/post-card.templ
new file mode 100644
index 0000000..48a984c
--- /dev/null
+++ b/packages/templ/ui/blocks/post-card.templ
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostCardProps are the props of PostCard; the values are the JSON shapes of the TypeScript props.
+type PostCardProps struct {
+	Post any `json:"post"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Media any `json:"media"`
+	Meta any `json:"meta"`
+	Density any `json:"density"`
+}
+
+// A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only), density.
+templ PostCard(p PostCardProps) {
+	{{ vPost := p.Post }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "vertical") }}
+	{{ vMedia := uiutils.Def(p.Media, "image") }}
+	{{ vMeta := uiutils.Def(p.Meta, "full") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	if uiutils.Eq(vMeta, "news") {
+		@block.Block(block.BlockProps{Tag: "article", Class: uiutils.S(uiutils.Cnv("flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border", uiutils.Get(presetDefaults, "news", "card"))), Attrs: uiutils.Attrs("data-testid", "item", "data-layout", vLayout, "data-meta", "news")}) {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("relative shrink-0 overflow-hidden", uiutils.Get(presetDefaults, "news", "cover"))), Attrs: uiutils.Attrs("data-testid", "news-cover")}) {
+				@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vPost, "title"), Src: uiutils.Get(vPost, "image"), Class: uiutils.Cnv(uiutils.Cnv("size-full", uiutils.Get(presetDefaults, "media", "rounded")))})
+				@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xs", Weight: "semibold", Class: uiutils.S(uiutils.Cnv("pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground", uiutils.Get(presetDefaults, "news", "title"))), Attrs: uiutils.Attrs("data-testid", "news-title")}) {
+					{ uiutils.Text(uiutils.Get(vPost, "title")) }
+				}
+			}
+			@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: uiutils.S(uiutils.Cnv("w-full px-2 text-muted-foreground", uiutils.Get(presetDefaults, "news", "strip"))), Attrs: uiutils.Attrs("data-testid", "news-date")}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "calendar", Size: 16})
+				@text.Text(text.TextProps{Size: "xs", Weight: "bold", Class: "leading-4"}) {
+					{ uiutils.Text(uiutils.Get(vPost, "date")) }
+				}
+				if uiutils.T(uiutils.Get(vPost, "category")) {
+					@text.Text(text.TextProps{Size: "xs", Weight: "bold", Class: "leading-4"}) {
+						{ uiutils.Text(uiutils.Get(vPost, "category")) }
+					}
+				}
+			}
+		}
+	} else {
+		@block.Block(block.BlockProps{Tag: "article", Class: uiutils.S(uiutils.Cnv("flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded", "h-full gap-4 overflow-hidden", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "horizontal")), "flex flex-col sm:flex-row", "flex flex-col"))), Attrs: uiutils.Attrs("data-slot", "card", "data-testid", "item", "data-layout", vLayout, "data-meta", vMeta)}) {
+			if uiutils.Eq(vMedia, "image") {
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("relative shrink-0", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "horizontal")), "sm:w-64", "")))}) {
+					@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vPost, "title"), Src: uiutils.Get(vPost, "image"), Class: uiutils.Cnv("h-full")})
+				}
+			}
+			@card.CardContent(card.CardContentProps{Class: "flex flex-1 flex-col gap-2"}) {
+				if !uiutils.Eq(vMeta, "news") {
+					@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vPost, "icon")), Size: 16})
+						@text.Text(text.TextProps{Size: "xs", Class: "uppercase tracking-wide text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vPost, "category")) }
+						}
+					}
+				}
+				@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+					{ uiutils.Text(uiutils.Get(vPost, "title")) }
+				}
+				if uiutils.T(uiutils.And(uiutils.Eq(vDensity, "default"), !uiutils.Eq(vMeta, "news"))) {
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vPost, "excerpt")) }
+					}
+				}
+				if !uiutils.Eq(vMeta, "news") {
+					@group.Group(group.GroupProps{Gap: "2", Class: "mt-auto flex-wrap pt-2 text-muted-foreground"}) {
+						if uiutils.Eq(vMeta, "full") {
+							@text.Text(text.TextProps{Size: "xs"}) {
+								{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "by"), uiutils.Get(vPost, "author"))) }
+							}
+						}
+						@text.Text(text.TextProps{Size: "xs"}) {
+							{ uiutils.Text(uiutils.Get(vPost, "date")) }
+						}
+						if uiutils.Eq(vMeta, "full") {
+							@text.Text(text.TextProps{Size: "xs"}) {
+								{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "minutes"), uiutils.Get(vPost, "minutes"))) }
+							}
+						}
+					}
+				}
+				if uiutils.T(uiutils.And(!uiutils.Eq(vMeta, "news"), uiutils.Get(vPost, "href"))) {
+					@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Get(vPost, "href")), Variant: "default", Attrs: uiutils.Attrs("data-testid", "read")}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "read")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-feature.templ b/packages/templ/ui/blocks/post-feature.templ
new file mode 100644
index 0000000..fbf7aeb
--- /dev/null
+++ b/packages/templ/ui/blocks/post-feature.templ
@@ -0,0 +1,53 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-feature.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostFeatureProps are the props of PostFeature; the values are the JSON shapes of the TypeScript props.
+type PostFeatureProps struct {
+	P any `json:"p"`
+	Labels any `json:"labels"`
+}
+
+// The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading time, and a wide read button.
+templ PostFeature(p PostFeatureProps) {
+	{{ vP := p.P }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "border-t border-border pt-6", Attrs: uiutils.Attrs("data-testid", "post-feature")}) {
+		@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm", Class: "w-fit"}) {
+			{ uiutils.Text(uiutils.Get(vP, "category")) }
+		}
+		@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "semibold"}) {
+			{ uiutils.Text(uiutils.Get(vP, "title")) }
+		}
+		@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+			{ uiutils.Text(uiutils.Get(vP, "excerpt")) }
+		}
+		@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+			@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vP, "author"), Ratio: "1/1", Class: uiutils.Cnv("size-10 shrink-0 rounded-full")})
+			@stack.Stack(stack.StackProps{Gap: "0"}) {
+				@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+					{ uiutils.Text(uiutils.Get(vP, "author")) }
+				}
+				@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Tpl("{0} · {1}", uiutils.Get(vP, "date"), uiutils.Tpl(uiutils.Get(vLabels, "minutes"), uiutils.Get(vP, "minutes")))) }
+				}
+			}
+		}
+		@button.Button(button.ButtonProps{Variant: "default", Size: "default", Href: uiutils.S(uiutils.Get(vP, "href")), Class: "w-full gap-2", Attrs: uiutils.Attrs("data-testid", "action-primary")}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "read")) }
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-grid.templ b/packages/templ/ui/blocks/post-grid.templ
new file mode 100644
index 0000000..ee44b63
--- /dev/null
+++ b/packages/templ/ui/blocks/post-grid.templ
@@ -0,0 +1,79 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostGridProps are the props of PostGrid; the values are the JSON shapes of the TypeScript props.
+type PostGridProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Posts any `json:"posts"`
+	Labels any `json:"labels"`
+	Action any `json:"action"`
+	Filter any `json:"filter"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Media any `json:"media"`
+	Meta any `json:"meta"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news), filter mode (none, topics), tone, density.
+templ PostGrid(p PostGridProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vPosts := p.Posts }}
+	{{ vLabels := p.Labels }}
+	{{ vAction := p.Action }}
+	{{ vFilter := p.Filter }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vCols := uiutils.Def(p.Cols, "1-3") }}
+	{{ vMedia := uiutils.Def(p.Media, "image") }}
+	{{ vMeta := uiutils.Def(p.Meta, "full") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Action: vAction, Tone: vTone, Density: uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "compact", "default"), Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vMeta, "news")), "fill", "default"), Class: uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vMeta, "news")), "py-0", "")), LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Get(vFilter, "mode"), "topics") {
+			@Switcher(SwitcherProps{Label: uiutils.Get(vFilter, "label")}) {
+				for _, vTab := range uiutils.L(uiutils.Get(vFilter, "topics")) {
+					@SwitcherItem(SwitcherItemProps{Active: uiutils.Eq(uiutils.Get(vTab, "value"), uiutils.Get(vFilter, "topic"))}) {
+						{ uiutils.Text(uiutils.Get(vTab, "title")) }
+					}
+				}
+			}
+		}
+		if uiutils.Gt(uiutils.Len(uiutils.Where(vPosts, "category", uiutils.Get(vFilter, "topic"))), float64(0)) {
+			if uiutils.Eq(vLayout, "magazine") {
+				@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for vI, vP := range uiutils.L(uiutils.Where(vPosts, "category", uiutils.Get(vFilter, "topic"))) {
+						if uiutils.Eq(float64(vI), float64(0)) {
+							@PostCard(PostCardProps{Post: vP, Labels: vLabels, Layout: "horizontal", Media: vMedia, Meta: vMeta, Density: vDensity})
+						}
+					}
+					@grid.Grid(grid.GridProps{Cols: uiutils.S(vCols), Class: "gap-6"}) {
+						for vI, vP := range uiutils.L(uiutils.Where(vPosts, "category", uiutils.Get(vFilter, "topic"))) {
+							if uiutils.Gt(float64(vI), float64(0)) {
+								@PostCard(PostCardProps{Post: vP, Labels: vLabels, Media: vMedia, Meta: vMeta, Density: vDensity})
+							}
+						}
+					}
+				}
+			} else {
+				@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "1", uiutils.FitCols(vCols, uiutils.Len(uiutils.Where(vPosts, "category", uiutils.Get(vFilter, "topic")))))), Class: "w-full gap-6", Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for _, vP := range uiutils.L(uiutils.Where(vPosts, "category", uiutils.Get(vFilter, "topic"))) {
+						@PostCard(PostCardProps{Post: vP, Labels: vLabels, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "horizontal", "vertical"), Media: vMedia, Meta: vMeta, Density: vDensity})
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-header.templ b/packages/templ/ui/blocks/post-header.templ
new file mode 100644
index 0000000..f6f1dd9
--- /dev/null
+++ b/packages/templ/ui/blocks/post-header.templ
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-header.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostHeaderProps are the props of PostHeader; the values are the JSON shapes of the TypeScript props.
+type PostHeaderProps struct {
+	Id any `json:"id"`
+	Post any `json:"post"`
+	Labels any `json:"labels"`
+	Level any `json:"level"`
+	Layout any `json:"layout"`
+	Cover any `json:"cover"`
+	Meta any `json:"meta"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout (start, center), cover (show, hide), meta (full, short), tone.
+templ PostHeader(p PostHeaderProps) {
+	{{ vId := p.Id }}
+	{{ vPost := p.Post }}
+	{{ vLabels := p.Labels }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vLayout := uiutils.Def(p.Layout, "start") }}
+	{{ vCover := uiutils.Def(p.Cover, "show") }}
+	{{ vMeta := uiutils.Def(p.Meta, "full") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.T(vPost) {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: uiutils.Get(vPost, "title"), Lead: uiutils.Get(vPost, "excerpt"), Heading: map[string]any{"level": vLevel}, Align: vLayout, Tone: vTone, Media: map[string]any{"show": uiutils.Eq(vCover, "show")}, LandmarkLabel: vLandmarkLabel, Aside: postHeaderFill1(p, vPost)}) {
+			@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "center")), "center", "start")), Class: "flex-wrap", Attrs: uiutils.Attrs("data-testid", "post-meta")}) {
+				@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vPost, "author"), Ratio: "1/1", Class: uiutils.Cnv("size-10 shrink-0 rounded-full")})
+				@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+					{ uiutils.Text(uiutils.Get(vPost, "author")) }
+				}
+				@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vPost, "date")) }
+				}
+				if uiutils.Eq(vMeta, "full") {
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "minutes"), uiutils.Get(vPost, "minutes"))) }
+					}
+				}
+				@Pill(PillProps{Tone: "blue"}) {
+					{ uiutils.Text(uiutils.Get(vPost, "category")) }
+				}
+			}
+		}
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Heading: map[string]any{"level": vLevel}, Align: vLayout, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+			@EmptyState(EmptyStateProps{Icon: "file-text", Title: uiutils.Get(vLabels, "empty")})
+		}
+	}
+}
+
+templ postHeaderFill1(p PostHeaderProps, vPost any) {
+	@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vPost, "title"), Src: uiutils.Get(vPost, "image"), Ratio: "21/9"})
+}
diff --git a/packages/templ/ui/blocks/post-mini-card.templ b/packages/templ/ui/blocks/post-mini-card.templ
new file mode 100644
index 0000000..15afbef
--- /dev/null
+++ b/packages/templ/ui/blocks/post-mini-card.templ
@@ -0,0 +1,38 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-mini-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostMiniCardProps are the props of PostMiniCard; the values are the JSON shapes of the TypeScript props.
+type PostMiniCardProps struct {
+	P any `json:"p"`
+	Labels any `json:"labels"`
+}
+
+// A small post card of PostShowcase: the picture, the category, the title and the author with the reading time.
+templ PostMiniCard(p PostMiniCardProps) {
+	{{ vP := p.P }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Class: "rounded bg-card inset-ring inset-ring-border p-2", Attrs: uiutils.Attrs("data-testid", "post-mini")}) {
+		@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vP, "title")})
+		@stack.Stack(stack.StackProps{Gap: "2", Align: "start", Class: "p-2"}) {
+			@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm"}) {
+				{ uiutils.Text(uiutils.Get(vP, "category")) }
+			}
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "sm", Weight: "semibold"}) {
+				{ uiutils.Text(uiutils.Get(vP, "title")) }
+			}
+			@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Tpl("{0} · {1}", uiutils.Get(vP, "author"), uiutils.Tpl(uiutils.Get(vLabels, "minutes"), uiutils.Get(vP, "minutes")))) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-outline.templ b/packages/templ/ui/blocks/post-outline.templ
new file mode 100644
index 0000000..bb8384f
--- /dev/null
+++ b/packages/templ/ui/blocks/post-outline.templ
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-outline.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostOutlineProps are the props of PostOutline; the values are the JSON shapes of the TypeScript props.
+type PostOutlineProps struct {
+	Post any `json:"post"`
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+}
+
+// The facts of a post in a column (author, date, minutes, views), then the related reading as links.
+templ PostOutline(p PostOutlineProps) {
+	{{ vPost := p.Post }}
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "post-outline")}) {
+		@stack.Stack(stack.StackProps{Gap: "2", Align: "start", Class: "text-muted-foreground"}) {
+			@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "user", Size: 16})
+				@text.Text(text.TextProps{Size: "sm"}) {
+					{ uiutils.Text(uiutils.Get(vPost, "author")) }
+				}
+			}
+			@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "calendar", Size: 16})
+				@text.Text(text.TextProps{Size: "sm"}) {
+					{ uiutils.Text(uiutils.Get(vPost, "date")) }
+				}
+			}
+			@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "clock", Size: 16})
+				@text.Text(text.TextProps{Size: "sm"}) {
+					{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "minutes"), uiutils.Get(vPost, "minutes"))) }
+				}
+			}
+			@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "eye", Size: 16})
+				@text.Text(text.TextProps{Size: "sm"}) {
+					{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "views"), uiutils.Get(vExtras, "views"))) }
+				}
+			}
+		}
+		@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Class: "border-t border-border pt-4"}) {
+			@text.Text(text.TextProps{Size: "xs", Weight: "medium", Class: "uppercase tracking-wide text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "related")) }
+			}
+			for _, vL := range uiutils.L(uiutils.Get(vExtras, "outline")) {
+				@MenuEntry(MenuEntryProps{Href: uiutils.Get(vL, "href"), Class: uiutils.Cnv("text-sm font-medium"), Size: "sm", Testid: "post-link"}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-right", Size: 16})
+					{ uiutils.Text(uiutils.Get(vL, "name")) }
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-overlay-card.templ b/packages/templ/ui/blocks/post-overlay-card.templ
new file mode 100644
index 0000000..d951a79
--- /dev/null
+++ b/packages/templ/ui/blocks/post-overlay-card.templ
@@ -0,0 +1,52 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-overlay-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostOverlayCardProps are the props of PostOverlayCard; the values are the JSON shapes of the TypeScript props.
+type PostOverlayCardProps struct {
+	P any `json:"p"`
+	Labels any `json:"labels"`
+	Ratio any `json:"ratio"`
+}
+
+// A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and date, the title, the excerpt and a read link.
+templ PostOverlayCard(p PostOverlayCardProps) {
+	{{ vP := p.P }}
+	{{ vLabels := p.Labels }}
+	{{ vRatio := uiutils.Def(p.Ratio, "4/3") }}
+	@box.Box(box.BoxProps{Class: "relative overflow-hidden rounded", Attrs: uiutils.Attrs("data-testid", "post-overlay")}) {
+		@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vP, "title"), Ratio: vRatio, Class: uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vRatio, "4/3")), "min-h-80", "min-h-64"))})
+		@stack.Stack(stack.StackProps{Gap: "2", Align: "start", Class: "absolute bottom-4 left-4 right-4 rounded bg-background p-4"}) {
+			@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+				@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm"}) {
+					{ uiutils.Text(uiutils.Get(vP, "category")) }
+				}
+				@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vP, "date")) }
+				}
+			}
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "semibold"}) {
+				{ uiutils.Text(uiutils.Get(vP, "title")) }
+			}
+			@text.Text(text.TextProps{Size: "sm", Class: uiutils.S(uiutils.Cnv("text-muted-foreground", "line-clamp-2"))}) {
+				{ uiutils.Text(uiutils.Get(vP, "excerpt")) }
+			}
+			@MenuEntry(MenuEntryProps{Href: uiutils.Get(vP, "href"), Class: uiutils.Cnv("gap-2 text-sm font-medium"), Size: "sm", Testid: "read"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "read")) }
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-showcase.templ b/packages/templ/ui/blocks/post-showcase.templ
new file mode 100644
index 0000000..b3ce485
--- /dev/null
+++ b/packages/templ/ui/blocks/post-showcase.templ
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-showcase.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostShowcaseProps are the props of PostShowcase; the values are the JSON shapes of the TypeScript props.
+type PostShowcaseProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Posts any `json:"posts"`
+	Labels any `json:"labels"`
+	Action any `json:"action"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	Empty any `json:"empty"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured: the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3: overlay columns), mediaSide, tone.
+templ PostShowcase(p PostShowcaseProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vPosts := p.Posts }}
+	{{ vLabels := p.Labels }}
+	{{ vAction := p.Action }}
+	{{ vLayout := uiutils.Def(p.Layout, "intro") }}
+	{{ vCols := uiutils.Def(p.Cols, "3") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "start") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Eq(uiutils.Len(vPosts), float64(0)) {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+			@EmptyState(EmptyStateProps{Icon: "newspaper", Title: vEmpty})
+		}
+	} else if uiutils.Eq(vLayout, "intro") {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide}, LandmarkLabel: vLandmarkLabel, Aside: postShowcaseFill1(p, vPosts, vLabels)}) {
+			@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Get(vAction, "href")), Size: "sm", Attrs: uiutils.Attrs("data-testid", "section-action")}) {
+				{ uiutils.Text(uiutils.Get(vAction, "label")) }
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+			}
+		}
+	} else if uiutils.Eq(vLayout, "featured") {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide}, LandmarkLabel: vLandmarkLabel, Aside: postShowcaseFill2(p, vTitle)}) {
+			for vI, vP := range uiutils.L(vPosts) {
+				if uiutils.Lt(float64(vI), float64(1)) {
+					@PostFeature(PostFeatureProps{P: vP, Labels: vLabels})
+				}
+			}
+		}
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "grid grid-cols-1 gap-6 md:grid-cols-2", "grid grid-cols-1 gap-6 md:grid-cols-3"))}) {
+				for vI, vP := range uiutils.L(vPosts) {
+					if uiutils.T(uiutils.Lt(float64(vI), uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), float64(2), float64(3)))) {
+						@PostOverlayCard(PostOverlayCardProps{P: vP, Labels: vLabels, Ratio: uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "16/9", "4/3")})
+					}
+				}
+			}
+		}
+	}
+}
+
+templ postShowcaseFill1(p PostShowcaseProps, vPosts any, vLabels any) {
+	@box.Box(box.BoxProps{Class: "grid grid-cols-1 gap-4 sm:grid-cols-2"}) {
+		for vI, vP := range uiutils.L(vPosts) {
+			if uiutils.Lt(float64(vI), float64(4)) {
+				@PostMiniCard(PostMiniCardProps{P: vP, Labels: vLabels})
+			}
+		}
+	}
+}
+
+templ postShowcaseFill2(p PostShowcaseProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+}
diff --git a/packages/templ/ui/blocks/post-split.templ b/packages/templ/ui/blocks/post-split.templ
new file mode 100644
index 0000000..ef2c475
--- /dev/null
+++ b/packages/templ/ui/blocks/post-split.templ
@@ -0,0 +1,74 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-split.json
+
+package blocks
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostSplitProps are the props of PostSplit; the values are the JSON shapes of the TypeScript props.
+type PostSplitProps struct {
+	Id any `json:"id"`
+	Post any `json:"post"`
+	Labels any `json:"labels"`
+	Extras any `json:"extras"`
+	Level any `json:"level"`
+	Layout any `json:"layout"`
+	MediaSide any `json:"mediaSide"`
+	Author any `json:"author"`
+	Cover any `json:"cover"`
+	Actions any `json:"actions"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags, figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair, wide, icons), tone.
+templ PostSplit(p PostSplitProps) {
+	{{ vId := p.Id }}
+	{{ vPost := p.Post }}
+	{{ vLabels := p.Labels }}
+	{{ vExtras := p.Extras }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vLayout := uiutils.Def(p.Layout, "split") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vAuthor := uiutils.Def(p.Author, "line") }}
+	{{ vCover := uiutils.Def(p.Cover, "wide") }}
+	{{ vActions := uiutils.Def(p.Actions, "pair") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Eq(vLayout, "center") {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: uiutils.Get(vPost, "title"), Lead: uiutils.Get(vPost, "excerpt"), Heading: map[string]any{"badge": uiutils.Get(vPost, "category"), "level": vLevel}, Tone: vTone, Media: map[string]any{"show": true}, Align: "center", LandmarkLabel: vLandmarkLabel, Aside: postSplitFill1(p, vPost, vLayout, vCover)}) {
+			if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "tags")), float64(0)) {
+				@PostTags(PostTagsProps{Tags: uiutils.Get(vExtras, "tags"), Align: "center"})
+			}
+			@PostStats(PostStatsProps{Post: vPost, Extras: vExtras, Labels: vLabels, Align: "center"})
+			@PostAuthor(PostAuthorProps{Post: vPost, Extras: vExtras, Labels: vLabels, Mode: "card", Share: true, Class: uiutils.Cnv("mx-auto w-full max-w-md")})
+		}
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: uiutils.Get(vPost, "title"), Lead: uiutils.Get(vPost, "excerpt"), Heading: map[string]any{"badge": uiutils.Get(vPost, "category"), "level": vLevel}, Tone: vTone, Media: map[string]any{"show": true, "side": vMediaSide}, Layout: "split", LandmarkLabel: vLandmarkLabel, Aside: postSplitFill2(p, vPost, vLayout, vCover)}) {
+			if uiutils.Eq(vLayout, "outline") {
+				if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "outline")), float64(0)) {
+					@PostOutline(PostOutlineProps{Post: vPost, Extras: vExtras, Labels: vLabels})
+				}
+			} else {
+				@PostAuthor(PostAuthorProps{Post: vPost, Extras: vExtras, Labels: vLabels, Mode: vAuthor})
+				if !uiutils.Eq(vAuthor, "line") {
+					@PostStats(PostStatsProps{Post: vPost, Extras: vExtras, Labels: vLabels})
+				}
+				if uiutils.Gt(uiutils.Len(uiutils.Get(vExtras, "tags")), float64(0)) {
+					@PostTags(PostTagsProps{Tags: uiutils.Get(vExtras, "tags")})
+				}
+			}
+			@PostActions(PostActionsProps{Labels: vLabels, Mode: vActions})
+		}
+	}
+}
+
+templ postSplitFill1(p PostSplitProps, vPost any, vLayout any, vCover any) {
+	@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vPost, "title"), Ratio: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "center")), "21/9", uiutils.Cond(uiutils.T(uiutils.Eq(vCover, "square")), "1/1", "4/3"))})
+}
+
+templ postSplitFill2(p PostSplitProps, vPost any, vLayout any, vCover any) {
+	@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vPost, "title"), Ratio: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "center")), "21/9", uiutils.Cond(uiutils.T(uiutils.Eq(vCover, "square")), "1/1", "4/3"))})
+}
diff --git a/packages/templ/ui/blocks/post-stats.templ b/packages/templ/ui/blocks/post-stats.templ
new file mode 100644
index 0000000..0eb41ad
--- /dev/null
+++ b/packages/templ/ui/blocks/post-stats.templ
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-stats.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostStatsProps are the props of PostStats; the values are the JSON shapes of the TypeScript props.
+type PostStatsProps struct {
+	Post any `json:"post"`
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+	Align any `json:"align"`
+}
+
+// The reading figures of a post: minutes to read, views and likes, each with its glyph.
+templ PostStats(p PostStatsProps) {
+	{{ vPost := p.Post }}
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	{{ vAlign := uiutils.Def(p.Align, "start") }}
+	@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: uiutils.S(vAlign), Class: "flex-wrap text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "post-stats")}) {
+		@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "clock", Size: 16})
+			@text.Text(text.TextProps{Size: "sm"}) {
+				{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "minutes"), uiutils.Get(vPost, "minutes"))) }
+			}
+		}
+		@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "eye", Size: 16})
+			@text.Text(text.TextProps{Size: "sm"}) {
+				{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "views"), uiutils.Get(vExtras, "views"))) }
+			}
+		}
+		@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "heart", Size: 16})
+			@text.Text(text.TextProps{Size: "sm"}) {
+				{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "likes"), uiutils.Get(vExtras, "likes"))) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/post-tags.templ b/packages/templ/ui/blocks/post-tags.templ
new file mode 100644
index 0000000..f6ca656
--- /dev/null
+++ b/packages/templ/ui/blocks/post-tags.templ
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/post-tags.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PostTagsProps are the props of PostTags; the values are the JSON shapes of the TypeScript props.
+type PostTagsProps struct {
+	Tags any `json:"tags"`
+	Align any `json:"align"`
+}
+
+// The tags of a post as small badges in a wrapping row.
+templ PostTags(p PostTagsProps) {
+	{{ vTags := p.Tags }}
+	{{ vAlign := uiutils.Def(p.Align, "start") }}
+	@group.Group(group.GroupProps{Gap: "2", Justify: uiutils.S(vAlign), Class: "flex-wrap"}) {
+		for _, vTag := range uiutils.L(vTags) {
+			@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm", Attrs: uiutils.Attrs("data-testid", "post-tag")}) {
+				{ uiutils.Text(uiutils.Get(vTag, "name")) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/presets/defaults.json b/packages/templ/ui/blocks/presets/defaults.json
new file mode 100644
index 0000000..b6af443
--- /dev/null
+++ b/packages/templ/ui/blocks/presets/defaults.json
@@ -0,0 +1,82 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "specVersion": 1,
+  "id": "preset.defaults",
+  "name": "defaults",
+  "docs": "Default layout preset: the sizes of the landing blocks as Tailwind classes.\nBlocks combine these with token classes; swap the preset to resize every block at once.",
+  "source": "ui8kit default sizes (Tailwind scale, no arbitrary values)",
+  "notes": {
+    "text": "small type steps for chips, badges and links",
+    "hero.band": "the inverse band: tall section, large bottom radius",
+    "hero.title": "display title",
+    "hero.titleWeights": "one font-weight class per title word",
+    "hero.composer": "the prompt box",
+    "logos.row": "one centered row of logo slots",
+    "logos.glyph": "the Lucide glyph inside a slot: half the slot"
+  },
+  "values": {
+    "text": {
+      "tiny": "text-xs",
+      "small": "text-sm"
+    },
+    "hero": {
+      "band": "min-h-160 rounded",
+      "container": "max-w-7xl",
+      "head": "gap-12",
+      "badge": "w-48",
+      "title": "text-5xl leading-tight",
+      "titleWeights": [
+        "font-normal",
+        "font-semibold",
+        "font-normal",
+        "font-semibold"
+      ],
+      "column": "max-w-xl gap-16",
+      "composer": "h-40 max-w-xl rounded",
+      "attach": "w-24",
+      "promptLine": "h-10",
+      "model": "w-24"
+    },
+    "section": {
+      "landing": "max-w-6xl"
+    },
+    "media": {
+      "rounded": "rounded"
+    },
+    "templates": {
+      "card": "h-60 w-64",
+      "image": "h-40 w-58 rounded",
+      "footer": "h-12 min-h-12"
+    },
+    "stats": {
+      "column": "min-h-28",
+      "figure": "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18",
+      "panel": "gap-24 rounded py-20"
+    },
+    "features": {
+      "cells": "rounded"
+    },
+    "news": {
+      "card": "h-56 w-64",
+      "cover": "h-40 w-64 rounded",
+      "title": "top-16",
+      "strip": "h-12 min-h-12"
+    },
+    "cta": {
+      "panel": "rounded py-20",
+      "title": "max-w-md",
+      "text": "max-w-2xl",
+      "button": "w-40"
+    },
+    "logos": {
+      "row": "h-28 max-w-4xl gap-12 pb-8",
+      "slot": "size-20",
+      "glyph": 40
+    },
+    "footer": {
+      "card": "h-72 gap-12 rounded",
+      "brand": "w-48",
+      "groups": "gap-x-16"
+    }
+  }
+}
diff --git a/packages/templ/ui/blocks/pricing-card.templ b/packages/templ/ui/blocks/pricing-card.templ
new file mode 100644
index 0000000..4978673
--- /dev/null
+++ b/packages/templ/ui/blocks/pricing-card.templ
@@ -0,0 +1,95 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/pricing-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PricingCardProps are the props of PricingCard; the values are the JSON shapes of the TypeScript props.
+type PricingCardProps struct {
+	Plan any `json:"plan"`
+	Labels any `json:"labels"`
+	Current any `json:"current"`
+	Emphasis any `json:"emphasis"`
+	Density any `json:"density"`
+	Billing any `json:"billing"`
+	Footer func(args ...any) templ.Component `json:"-"`
+}
+
+// A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more actions. Text comes in through `labels`; the plan is data.
+templ PricingCard(p PricingCardProps) {
+	{{ vPlan := p.Plan }}
+	{{ vLabels := p.Labels }}
+	{{ vCurrent := p.Current }}
+	{{ vEmphasis := uiutils.Def(p.Emphasis, "auto") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vBilling := uiutils.Def(p.Billing, "monthly") }}
+	{{ vStand := any(uiutils.And(uiutils.Get(vPlan, "highlighted"), uiutils.Eq(vEmphasis, "auto"))) }}
+	{{ vYearlyOn := any(uiutils.And(uiutils.Eq(vBilling, "annual"), uiutils.Gt(uiutils.Get(vPlan, "yearly"), float64(0)))) }}
+	{{ vAmount := any(uiutils.Cond(uiutils.T(vYearlyOn), uiutils.Get(vPlan, "yearly"), uiutils.Get(vPlan, "price"))) }}
+	@block.Block(block.BlockProps{Tag: "article", Class: uiutils.S(uiutils.Cnv("flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded", "flex h-full flex-col")), Attrs: uiutils.Attrs("data-slot", "card", "data-highlighted", uiutils.Cond(uiutils.T(vStand), "true", "false"), "data-current", uiutils.Cond(uiutils.T(vCurrent), "true", "false"))}) {
+		@card.CardHeader(card.CardHeaderProps{Class: "flex flex-col gap-2"}) {
+			@box.Box(box.BoxProps{Class: "flex min-h-6 items-center", Attrs: uiutils.Attrs("data-slot", "badge-slot")}) {
+				if uiutils.T(vStand) {
+					@badge.Badge(badge.BadgeProps{Variant: "default", Size: "default"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "popular")) }
+					}
+				}
+			}
+			@card.CardTitle(card.CardTitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3)))}) {
+				{ uiutils.Text(uiutils.Get(vPlan, "name")) }
+			}
+			@card.CardDescription(card.CardDescriptionProps{}) {
+				{ uiutils.Text(uiutils.Get(vPlan, "tagline")) }
+			}
+		}
+		@card.CardContent(card.CardContentProps{Class: uiutils.S(uiutils.Cnv("flex flex-1 flex-col", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "gap-2", "gap-4")))}) {
+			@group.Group(group.GroupProps{Gap: "2", Align: "baseline"}) {
+				@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "4xl", Weight: "bold"}) {
+					if uiutils.Eq(vAmount, float64(0)) {
+						{ uiutils.Text(uiutils.Get(vLabels, "free")) }
+					} else {
+						{ uiutils.Text(uiutils.Money(vAmount, uiutils.Get(vPlan, "currency"))) }
+					}
+				}
+				if uiutils.Gt(vAmount, float64(0)) {
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Cond(uiutils.T(vYearlyOn), uiutils.Get(vLabels, "perYear"), uiutils.Get(vLabels, "perMonth"))) }
+					}
+				}
+			}
+			@text.Text(text.TextProps{Size: "sm", Weight: "medium"}) {
+				{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "seats"), uiutils.Get(vPlan, "seats"))) }
+			}
+			@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "storage"), uiutils.Get(vPlan, "storage"))) }
+			}
+			@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col gap-2 text-sm"}) {
+				for _, vFeature := range uiutils.L(uiutils.Get(vPlan, "features")) {
+					@list.ListItem(list.ListItemProps{Class: "flex gap-2"}) {
+						{ uiutils.Text(vFeature) }
+					}
+				}
+			}
+		}
+		@card.CardFooter(card.CardFooterProps{Class: "flex flex-wrap items-center gap-2"}) {
+			@button.Button(button.ButtonProps{Variant: uiutils.S(uiutils.Cond(uiutils.T(vStand), "default", "outline")), Size: "default", Attrs: uiutils.Attrs("data-testid", "plan-select")}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "cta")) }
+			}
+			if p.Footer != nil {
+				@p.Footer(vPlan)
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/pricing-tiers.templ b/packages/templ/ui/blocks/pricing-tiers.templ
new file mode 100644
index 0000000..9b80bda
--- /dev/null
+++ b/packages/templ/ui/blocks/pricing-tiers.templ
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/pricing-tiers.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PricingTiersProps are the props of PricingTiers; the values are the JSON shapes of the TypeScript props.
+type PricingTiersProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Plans any `json:"plans"`
+	Labels any `json:"labels"`
+	BillingLabels any `json:"billingLabels"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Emphasis any `json:"emphasis"`
+	Billing any `json:"billing"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid, stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and the prices of that period), density, tone.
+templ PricingTiers(p PricingTiersProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vPlans := p.Plans }}
+	{{ vLabels := p.Labels }}
+	{{ vBillingLabels := p.BillingLabels }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vCols := uiutils.Def(p.Cols, "1-3") }}
+	{{ vEmphasis := uiutils.Def(p.Emphasis, "auto") }}
+	{{ vBilling := uiutils.Def(p.Billing, "off") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "stack")), "md", "default"), LandmarkLabel: vLandmarkLabel}) {
+		if !uiutils.Eq(vBilling, "off") {
+			@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "center", Class: "flex-wrap", Attrs: uiutils.Attrs("data-testid", "billing")}) {
+				@Switcher(SwitcherProps{Label: uiutils.Get(vBillingLabels, "label")}) {
+					@SwitcherItem(SwitcherItemProps{Active: uiutils.Eq(vBilling, "monthly")}) {
+						{ uiutils.Text(uiutils.Get(vBillingLabels, "monthly")) }
+					}
+					@SwitcherItem(SwitcherItemProps{Active: uiutils.Eq(vBilling, "annual")}) {
+						{ uiutils.Text(uiutils.Get(vBillingLabels, "annual")) }
+					}
+				}
+				@badge.Badge(badge.BadgeProps{Variant: "default", Size: "default"}) {
+					{ uiutils.Text(uiutils.Get(vBillingLabels, "save")) }
+				}
+			}
+		}
+		if uiutils.Eq(uiutils.Len(vPlans), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "layers", Title: uiutils.Get(vLabels, "empty")})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "stack")), "1", uiutils.FitCols(vCols, uiutils.Len(vPlans)))), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "tiers")}) {
+				for _, vPlan := range uiutils.L(vPlans) {
+					@PricingCard(PricingCardProps{Plan: vPlan, Labels: vLabels, Emphasis: vEmphasis, Billing: uiutils.Cond(uiutils.T(uiutils.Eq(vBilling, "annual")), "annual", "monthly"), Density: uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "compact", "default")})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/product-card.templ b/packages/templ/ui/blocks/product-card.templ
new file mode 100644
index 0000000..9db76ea
--- /dev/null
+++ b/packages/templ/ui/blocks/product-card.templ
@@ -0,0 +1,103 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/product-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProductCardProps are the props of ProductCard; the values are the JSON shapes of the TypeScript props.
+type ProductCardProps struct {
+	Product any `json:"product"`
+	Labels any `json:"labels"`
+	Badges any `json:"badges"`
+	Layout any `json:"layout"`
+	Media any `json:"media"`
+	Ratio any `json:"ratio"`
+	Rating any `json:"rating"`
+	Action any `json:"action"`
+	Density any `json:"density"`
+}
+
+// A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image, none), ratio, rating (show, hide), action (button, none), density.
+templ ProductCard(p ProductCardProps) {
+	{{ vProduct := p.Product }}
+	{{ vLabels := p.Labels }}
+	{{ vBadges := p.Badges }}
+	{{ vLayout := uiutils.Def(p.Layout, "vertical") }}
+	{{ vMedia := uiutils.Def(p.Media, "image") }}
+	{{ vRatio := uiutils.Def(p.Ratio, "4/3") }}
+	{{ vRating := uiutils.Def(p.Rating, "show") }}
+	{{ vAction := uiutils.Def(p.Action, "button") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	@block.Block(block.BlockProps{Tag: "article", Class: uiutils.S(uiutils.Cnv("flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded", "h-full gap-4 overflow-hidden", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "horizontal")), "flex flex-col sm:flex-row", "flex flex-col"))), Attrs: uiutils.Attrs("data-slot", "card", "data-testid", "item", "data-layout", vLayout)}) {
+		if uiutils.Eq(vMedia, "image") {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("relative shrink-0", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "horizontal")), "sm:w-48", "")))}) {
+				@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vProduct, "name"), Src: uiutils.Get(vProduct, "image"), Ratio: vRatio, Class: uiutils.Cnv("h-full")})
+				if uiutils.T(uiutils.Get(vProduct, "badge")) {
+					@badge.Badge(badge.BadgeProps{Variant: "default", Size: "default", Class: "absolute left-4 top-4", Attrs: uiutils.Attrs("data-testid", "badge")}) {
+						{ uiutils.Text(uiutils.At(vBadges, uiutils.Get(vProduct, "badge"))) }
+					}
+				}
+			}
+		}
+		@card.CardContent(card.CardContentProps{Class: "flex flex-1 flex-col gap-2"}) {
+			@text.Text(text.TextProps{Size: "xs", Class: "uppercase tracking-wide text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Get(vProduct, "category")) }
+			}
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "bold"}) {
+				if uiutils.T(uiutils.Get(vProduct, "href")) {
+					@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Get(vProduct, "href")), Variant: "default", Attrs: uiutils.Attrs("data-testid", "open")}) {
+						{ uiutils.Text(uiutils.Get(vProduct, "name")) }
+					}
+				} else {
+					{ uiutils.Text(uiutils.Get(vProduct, "name")) }
+				}
+			}
+			if uiutils.Eq(vRating, "show") {
+				@group.Group(group.GroupProps{Gap: "2"}) {
+					@Rating(RatingProps{Value: uiutils.Get(vProduct, "rating"), Label: uiutils.Tpl(uiutils.Get(vLabels, "ratingLabel"), uiutils.Get(vProduct, "rating"))})
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "reviews"), uiutils.Get(vProduct, "reviews"))) }
+					}
+				}
+			}
+			if uiutils.Eq(vDensity, "default") {
+				@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vProduct, "summary")) }
+				}
+			}
+			@group.Group(group.GroupProps{Gap: "4", Justify: "between", Class: "mt-auto pt-2"}) {
+				@group.Group(group.GroupProps{Gap: "2", Align: "baseline", Class: "flex-wrap"}) {
+					@text.Text(text.TextProps{Size: "xl", Weight: "bold"}) {
+						{ uiutils.Text(uiutils.Money(uiutils.Get(vProduct, "price"), uiutils.Get(vProduct, "currency"))) }
+					}
+					if uiutils.T(uiutils.And(uiutils.Get(vProduct, "compareAt"), uiutils.Gt(uiutils.Get(vProduct, "compareAt"), uiutils.Get(vProduct, "price")))) {
+						@text.Text(text.TextProps{Tag: "del", Size: "sm", Class: "relative text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "compare-at")}) {
+							@inline.Inline(inline.InlineProps{Class: "sr-only"}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "was")) }
+							}
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vProduct, "compareAt"), uiutils.Get(vProduct, "currency"))) }
+						}
+					}
+				}
+				if uiutils.Eq(vAction, "button") {
+					@button.Button(button.ButtonProps{Variant: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Get(vProduct, "inStock")), "default", "outline")), Size: "sm", Disabled: uiutils.T(!uiutils.T(uiutils.Get(vProduct, "inStock"))), Attrs: uiutils.Attrs("data-testid", "add")}) {
+						{ uiutils.Text(uiutils.Cond(uiutils.T(uiutils.Get(vProduct, "inStock")), uiutils.Get(vLabels, "add"), uiutils.Get(vLabels, "soldOut"))) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/product-detail.templ b/packages/templ/ui/blocks/product-detail.templ
new file mode 100644
index 0000000..9b1c571
--- /dev/null
+++ b/packages/templ/ui/blocks/product-detail.templ
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/product-detail.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProductDetailProps are the props of ProductDetail; the values are the JSON shapes of the TypeScript props.
+type ProductDetailProps struct {
+	Id any `json:"id"`
+	Product any `json:"product"`
+	Labels any `json:"labels"`
+	Badges any `json:"badges"`
+	Level any `json:"level"`
+	Layout any `json:"layout"`
+	MediaSide any `json:"mediaSide"`
+	Thumbs any `json:"thumbs"`
+	Buy any `json:"buy"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price, stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs (none, below), buy (full, compact), tone, density.
+templ ProductDetail(p ProductDetailProps) {
+	{{ vId := p.Id }}
+	{{ vProduct := p.Product }}
+	{{ vLabels := p.Labels }}
+	{{ vBadges := p.Badges }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vLayout := uiutils.Def(p.Layout, "split") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "start") }}
+	{{ vThumbs := uiutils.Def(p.Thumbs, "below") }}
+	{{ vBuy := uiutils.Def(p.Buy, "full") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if !uiutils.T(vProduct) {
+		@SectionFrame(SectionFrameProps{Id: vId, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+			@EmptyState(EmptyStateProps{Icon: "package", Title: uiutils.Get(vLabels, "empty")})
+		}
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: uiutils.Get(vProduct, "name"), Lead: uiutils.Get(vProduct, "summary"), Heading: map[string]any{"level": vLevel}, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "split", "stack"), Media: map[string]any{"show": true, "side": vMediaSide, "align": "start"}, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel, Aside: productDetailFill1(p, vProduct, vThumbs)}) {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "buy-box")}) {
+				if uiutils.T(uiutils.Get(vProduct, "category")) {
+					@text.Text(text.TextProps{Size: "xs", Class: "uppercase tracking-wide text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "category")}) {
+						{ uiutils.Text(uiutils.Get(vProduct, "category")) }
+					}
+				}
+				@ProductPrice(ProductPriceProps{Price: uiutils.Get(vProduct, "price"), CompareAt: uiutils.Get(vProduct, "compareAt"), Currency: uiutils.Get(vProduct, "currency"), Badge: uiutils.Cond(uiutils.T(uiutils.Get(vProduct, "badge")), uiutils.At(vBadges, uiutils.Get(vProduct, "badge")), ""), Was: uiutils.Get(vLabels, "was")})
+				@group.Group(group.GroupProps{Gap: "2"}) {
+					@Rating(RatingProps{Value: uiutils.Get(vProduct, "rating"), Label: uiutils.Tpl(uiutils.Get(vLabels, "ratingLabel"), uiutils.Get(vProduct, "rating"))})
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "reviews"), uiutils.Get(vProduct, "reviews"))) }
+					}
+				}
+				@text.Text(text.TextProps{Size: "sm", Weight: "medium", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Get(vProduct, "inStock")), "text-foreground", "text-destructive")), Attrs: uiutils.Attrs("data-testid", "stock")}) {
+					{ uiutils.Text(uiutils.Cond(uiutils.T(uiutils.Get(vProduct, "inStock")), uiutils.Get(vLabels, "inStock"), uiutils.Get(vLabels, "soldOut"))) }
+				}
+				@group.Group(group.GroupProps{Gap: "4", Class: "flex-wrap"}) {
+					if uiutils.Eq(vBuy, "full") {
+						@NumberField(NumberFieldProps{Value: "1", Name: uiutils.Tpl("{0}-qty", vId), Min: "1", Label: uiutils.Get(vLabels, "qty"), Decrease: uiutils.Get(vLabels, "decrease"), Increase: uiutils.Get(vLabels, "increase")})
+					}
+					@button.Button(button.ButtonProps{Disabled: uiutils.T(!uiutils.T(uiutils.Get(vProduct, "inStock"))), Attrs: uiutils.Attrs("data-testid", "add")}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "add")) }
+					}
+				}
+				if uiutils.Eq(vBuy, "full") {
+					@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col gap-2 text-sm text-muted-foreground"}) {
+						@list.ListItem(list.ListItemProps{Class: "flex items-center gap-2"}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "truck", Size: 16})
+							@inline.Inline(inline.InlineProps{}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "shipping")) }
+							}
+						}
+						@list.ListItem(list.ListItemProps{Class: "flex items-center gap-2"}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "shield-check", Size: 16})
+							@inline.Inline(inline.InlineProps{}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "returns")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+templ productDetailFill1(p ProductDetailProps, vProduct any, vThumbs any) {
+	@ProductGallery(ProductGalleryProps{Name: uiutils.Get(vProduct, "name"), Image: uiutils.Get(vProduct, "image"), Thumbs: vThumbs})
+}
diff --git a/packages/templ/ui/blocks/product-gallery.templ b/packages/templ/ui/blocks/product-gallery.templ
new file mode 100644
index 0000000..c12c3d2
--- /dev/null
+++ b/packages/templ/ui/blocks/product-gallery.templ
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/product-gallery.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProductGalleryProps are the props of ProductGallery; the values are the JSON shapes of the TypeScript props.
+type ProductGalleryProps struct {
+	Name any `json:"name"`
+	Image any `json:"image"`
+	Thumbs any `json:"thumbs"`
+}
+
+// The gallery of a product page: the picture (the file of the product's featured media, a placeholder without one) and optional thumbnails below.
+templ ProductGallery(p ProductGalleryProps) {
+	{{ vName := p.Name }}
+	{{ vImage := p.Image }}
+	{{ vThumbs := uiutils.Def(p.Thumbs, "below") }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "gallery")}) {
+		@MediaFrame(MediaFrameProps{Alt: vName, Src: vImage, Ratio: "1/1"})
+		if uiutils.Eq(vThumbs, "below") {
+			@grid.Grid(grid.GridProps{Cols: "3", Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "thumbs")}) {
+				@MediaFrame(MediaFrameProps{Alt: vName, Src: vImage, Ratio: "1/1", Class: uiutils.Cnv("ring-2 ring-foreground")})
+				@MediaFrame(MediaFrameProps{Alt: vName, Ratio: "1/1"})
+				@MediaFrame(MediaFrameProps{Alt: vName, Ratio: "1/1"})
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/product-grid.templ b/packages/templ/ui/blocks/product-grid.templ
new file mode 100644
index 0000000..5120981
--- /dev/null
+++ b/packages/templ/ui/blocks/product-grid.templ
@@ -0,0 +1,63 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/product-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProductGridProps are the props of ProductGrid; the values are the JSON shapes of the TypeScript props.
+type ProductGridProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Products any `json:"products"`
+	Labels any `json:"labels"`
+	Badges any `json:"badges"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Ratio any `json:"ratio"`
+	Rating any `json:"rating"`
+	Action any `json:"action"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating, action, tone, density.
+templ ProductGrid(p ProductGridProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vProducts := p.Products }}
+	{{ vLabels := p.Labels }}
+	{{ vBadges := p.Badges }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vCols := uiutils.Def(p.Cols, "1-3") }}
+	{{ vRatio := uiutils.Def(p.Ratio, "4/3") }}
+	{{ vRating := uiutils.Def(p.Rating, "show") }}
+	{{ vAction := uiutils.Def(p.Action, "button") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vProducts), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "package", Title: uiutils.Get(vLabels, "empty")})
+		} else if uiutils.Eq(vLayout, "rail") {
+			@box.Box(box.BoxProps{Class: "flex snap-x gap-4 overflow-x-auto pb-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vP := range uiutils.L(vProducts) {
+					@box.Box(box.BoxProps{Class: "w-64 shrink-0 snap-start"}) {
+						@ProductCard(ProductCardProps{Product: vP, Labels: vLabels, Badges: vBadges, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "horizontal", "vertical"), Ratio: vRatio, Rating: vRating, Action: vAction, Density: uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "compact", "default")})
+					}
+				}
+			}
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "1", vCols)), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vP := range uiutils.L(vProducts) {
+					@ProductCard(ProductCardProps{Product: vP, Labels: vLabels, Badges: vBadges, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "horizontal", "vertical"), Ratio: vRatio, Rating: vRating, Action: vAction, Density: uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "compact", "default")})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/product-info.templ b/packages/templ/ui/blocks/product-info.templ
new file mode 100644
index 0000000..08a1541
--- /dev/null
+++ b/packages/templ/ui/blocks/product-info.templ
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/product-info.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/disclosure"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProductInfoProps are the props of ProductInfo; the values are the JSON shapes of the TypeScript props.
+type ProductInfoProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Details any `json:"details"`
+	Specs any `json:"specs"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Expand any `json:"expand"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The details of a product under its buy box: texts in an accordion (native details) beside a card with the specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text open, none), tone.
+templ ProductInfo(p ProductInfoProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vDetails := p.Details }}
+	{{ vSpecs := p.Specs }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "split") }}
+	{{ vExpand := uiutils.Def(p.Expand, "first") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+		@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "grid grid-cols-1 items-start gap-8 lg:grid-cols-3", "grid grid-cols-1 gap-8"))}) {
+			if uiutils.Gt(uiutils.Len(vDetails), float64(0)) {
+				@stack.Stack(stack.StackProps{Gap: "0", Align: "stretch", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "lg:col-span-2", "")), Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for vI, vD := range uiutils.L(vDetails) {
+						@disclosure.Disclosure(disclosure.DisclosureProps{Variant: "item", Open: uiutils.T(uiutils.And(uiutils.Eq(vExpand, "first"), uiutils.Eq(float64(vI), float64(0)))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@disclosure.Summary(disclosure.SummaryProps{Variant: "item"}) {
+								@inline.Inline(inline.InlineProps{Class: "text-base font-semibold"}) {
+									{ uiutils.Text(uiutils.Get(vD, "title")) }
+								}
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "pb-4 text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vD, "text")) }
+							}
+						}
+					}
+				}
+			}
+			if uiutils.Gt(uiutils.Len(vSpecs), float64(0)) {
+				@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "rounded bg-card inset-ring inset-ring-border p-6", Attrs: uiutils.Attrs("data-testid", "specs")}) {
+					@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "lg", Weight: "bold"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "specs")) }
+					}
+					@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col"}) {
+						for _, vS := range uiutils.L(vSpecs) {
+							@list.ListItem(list.ListItemProps{Class: "flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0", Attrs: uiutils.Attrs("data-testid", "spec")}) {
+								@inline.Inline(inline.InlineProps{Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vS, "label")) }
+								}
+								@inline.Inline(inline.InlineProps{Class: "font-medium"}) {
+									{ uiutils.Text(uiutils.Get(vS, "value")) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/product-price.templ b/packages/templ/ui/blocks/product-price.templ
new file mode 100644
index 0000000..448e89c
--- /dev/null
+++ b/packages/templ/ui/blocks/product-price.templ
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/product-price.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProductPriceProps are the props of ProductPrice; the values are the JSON shapes of the TypeScript props.
+type ProductPriceProps struct {
+	Price any `json:"price"`
+	CompareAt any `json:"compareAt"`
+	Currency any `json:"currency"`
+	Badge any `json:"badge"`
+	Was any `json:"was"`
+}
+
+// The price line of a product page: the price (integer minor units in the currency), the old price (compare_at) struck through when higher, and the badge.
+templ ProductPrice(p ProductPriceProps) {
+	{{ vPrice := p.Price }}
+	{{ vCompareAt := p.CompareAt }}
+	{{ vCurrency := p.Currency }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vWas := p.Was }}
+	@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "flex-wrap"}) {
+		@text.Text(text.TextProps{Size: "4xl", Weight: "bold"}) {
+			{ uiutils.Text(uiutils.Money(vPrice, vCurrency)) }
+		}
+		if uiutils.T(uiutils.And(vCompareAt, uiutils.Gt(vCompareAt, vPrice))) {
+			@text.Text(text.TextProps{Tag: "del", Size: "lg", Class: "relative text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "compare-at")}) {
+				@inline.Inline(inline.InlineProps{Class: "sr-only"}) {
+					{ uiutils.Text(vWas) }
+				}
+				{ uiutils.Text(uiutils.Money(vCompareAt, vCurrency)) }
+			}
+		}
+		if uiutils.T(vBadge) {
+			@badge.Badge(badge.BadgeProps{Variant: "default", Size: "default"}) {
+				{ uiutils.Text(vBadge) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/profile-form.templ b/packages/templ/ui/blocks/profile-form.templ
new file mode 100644
index 0000000..21f11e9
--- /dev/null
+++ b/packages/templ/ui/blocks/profile-form.templ
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/profile-form.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	formswitch "github.com/ui8kit/codegen/packages/templ/ui/ui/switch"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/textarea"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProfileFormProps are the props of ProfileForm; the values are the JSON shapes of the TypeScript props.
+type ProfileFormProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Avatar any `json:"avatar"`
+	Prefs any `json:"prefs"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// An account settings form: a picture with a change button, name, email, bio and two notification switches, with save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default, muted).
+templ ProfileForm(p ProfileFormProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "stacked") }}
+	{{ vAvatar := uiutils.Def(p.Avatar, "show") }}
+	{{ vPrefs := uiutils.Def(p.Prefs, "show") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "section", Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Cond(uiutils.T(uiutils.And(vTitle, vId)), uiutils.Tpl("{0}-t", vId), nil)), "data-testid", "panel-section", "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: "mx-auto w-full max-w-6xl px-4 py-8", Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@Panel(PanelProps{Title: vTitle, Description: vText, Id: vId, Class: uiutils.Cnv(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vTone, "muted")), "bg-muted", "")))}) {
+				@form.Form(form.FormProps{Method: "dialog", Class: "gap-6", Attrs: uiutils.Attrs("data-testid", "profile-form")}) {
+					@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "1-2", "1")), Class: "items-start gap-8"}) {
+						@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+							if uiutils.Eq(vAvatar, "show") {
+								@group.Group(group.GroupProps{Gap: "4", Align: "center", Attrs: uiutils.Attrs("data-testid", "avatar")}) {
+									@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vLabels, "picture"), Ratio: "1/1", Class: uiutils.Cnv("size-16 shrink-0 rounded-full")})
+									@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Type: "button"}) {
+										{ uiutils.Text(uiutils.Get(vLabels, "change")) }
+									}
+								}
+							}
+							@Field(FieldProps{Label: uiutils.Get(vLabels, "name"), HtmlFor: uiutils.Tpl("{0}-name", vId)}) {
+								@input.Input(input.InputProps{Type: "text", Name: "name", Autocomplete: "name", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-name", vId), "data-testid", "field")})
+							}
+							@Field(FieldProps{Label: uiutils.Get(vLabels, "email"), HtmlFor: uiutils.Tpl("{0}-email", vId)}) {
+								@input.Input(input.InputProps{Type: "email", Name: "email", Autocomplete: "email", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-email", vId), "data-testid", "field")})
+							}
+							@Field(FieldProps{Label: uiutils.Get(vLabels, "bio"), HtmlFor: uiutils.Tpl("{0}-bio", vId)}) {
+								@textarea.Textarea(textarea.TextareaProps{Rows: 4, Name: "bio", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-bio", vId), "data-testid", "field")})
+							}
+						}
+						if uiutils.Eq(vPrefs, "show") {
+							@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "prefs")}) {
+								@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "bold"}) {
+									{ uiutils.Text(uiutils.Get(vLabels, "prefs")) }
+								}
+								@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between"}) {
+									@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-updates", vId)), Class: "text-sm"}) {
+										{ uiutils.Text(uiutils.Get(vLabels, "updates")) }
+									}
+									@formswitch.Switch(formswitch.SwitchProps{Name: "updates", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-updates", vId))})
+								}
+								@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between"}) {
+									@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-alerts", vId)), Class: "text-sm"}) {
+										{ uiutils.Text(uiutils.Get(vLabels, "alerts")) }
+									}
+									@formswitch.Switch(formswitch.SwitchProps{Name: "alerts", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-alerts", vId))})
+								}
+							}
+						}
+					}
+					@group.Group(group.GroupProps{Gap: "2", Class: "flex-wrap"}) {
+						@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "submit", Attrs: uiutils.Attrs("data-testid", "submit")}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "save")) }
+						}
+						@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Type: "button"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "cancel")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/project-grid.templ b/packages/templ/ui/blocks/project-grid.templ
new file mode 100644
index 0000000..6b2231e
--- /dev/null
+++ b/packages/templ/ui/blocks/project-grid.templ
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/project-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProjectGridProps are the props of ProjectGrid; the values are the JSON shapes of the TypeScript props.
+type ProjectGridProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Projects any `json:"projects"`
+	Empty any `json:"empty"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay, bento, list), tone, density.
+templ ProjectGrid(p ProjectGridProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vProjects := p.Projects }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "cards") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, Density: vDensity, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "split", "stack"), Media: map[string]any{"show": uiutils.Eq(vLayout, "list"), "align": "start"}, LandmarkLabel: vLandmarkLabel, Aside: projectGridFill1(p, vTitle)}) {
+		if uiutils.Eq(uiutils.Len(vProjects), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "folder-open", Title: vEmpty})
+		} else if uiutils.Eq(vLayout, "list") {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vP := range uiutils.L(vProjects) {
+					@group.Group(group.GroupProps{Gap: "4", Align: "start", Class: "border-b border-border pb-4", Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vP, "title"), Ratio: "1/1", Class: uiutils.Cnv("size-16 shrink-0")})
+						@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Class: "flex-1"}) {
+							@group.Group(group.GroupProps{Gap: "4", Justify: "between"}) {
+								@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+									{ uiutils.Text(uiutils.Get(vP, "title")) }
+								}
+								@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vP, "year")) }
+								}
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vP, "summary")) }
+							}
+						}
+					}
+				}
+			}
+		} else {
+			@ProjectTiles(ProjectTilesProps{Projects: vProjects, Labels: vLabels, Layout: vLayout})
+		}
+	}
+}
+
+templ projectGridFill1(p ProjectGridProps, vTitle any) {
+	@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-4", Attrs: uiutils.Attrs("data-testid", "collage")}) {
+		@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4"})
+		@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4", Class: uiutils.Cnv("mt-8")})
+	}
+}
diff --git a/packages/templ/ui/blocks/project-tiles.templ b/packages/templ/ui/blocks/project-tiles.templ
new file mode 100644
index 0000000..42227be
--- /dev/null
+++ b/packages/templ/ui/blocks/project-tiles.templ
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/project-tiles.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProjectTilesProps are the props of ProjectTiles; the values are the JSON shapes of the TypeScript props.
+type ProjectTilesProps struct {
+	Projects any `json:"projects"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+}
+
+// The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags, two links), compact cards in four columns, captions over the pictures, or a bento where the first project takes a big tile.
+templ ProjectTiles(p ProjectTilesProps) {
+	{{ vProjects := p.Projects }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "cards") }}
+	{{ vOver := any(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "overlay")), true, uiutils.Eq(vLayout, "bento"))) }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "compact")), "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3")), Attrs: uiutils.Attrs("data-testid", "items")}) {
+		for vI, vP := range uiutils.L(vProjects) {
+			@ArticleBlock(ArticleBlockProps{Class: uiutils.Cnv(uiutils.Cnv("flex flex-col gap-4", uiutils.Cond(uiutils.T(vOver), "relative", "rounded bg-card inset-ring inset-ring-border p-4"), uiutils.Cond(uiutils.T(uiutils.And(uiutils.Eq(vLayout, "bento"), uiutils.Eq(float64(vI), float64(0)))), "sm:col-span-2 lg:row-span-2", ""))), Testid: "item"}) {
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(vOver), "h-full", "relative"))}) {
+					@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vP, "title"), Ratio: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "compact")), "1/1", uiutils.Cond(uiutils.T(vOver), "3/4", "4/3")), Class: uiutils.Cnv(uiutils.Cond(uiutils.T(vOver), "h-full", ""))})
+					if uiutils.T(uiutils.And(uiutils.Get(vP, "featured"), !uiutils.Eq(vLayout, "compact"))) {
+						@badge.Badge(badge.BadgeProps{Variant: "default", Size: "default", Class: "absolute left-4 top-4", Attrs: uiutils.Attrs("data-testid", "featured")}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "featured")) }
+						}
+					}
+				}
+				@stack.Stack(stack.StackProps{Gap: "2", Align: "stretch", Class: uiutils.S(uiutils.Cond(uiutils.T(vOver), "absolute right-4 bottom-4 left-4 rounded bg-background p-4", ""))}) {
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Tpl("{0}, {1}", uiutils.Get(vP, "category"), uiutils.Get(vP, "year"))) }
+					}
+					@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "compact")), "sm", "lg")), Weight: "semibold"}) {
+						{ uiutils.Text(uiutils.Get(vP, "title")) }
+					}
+					if !uiutils.Eq(vLayout, "compact") {
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vP, "summary")) }
+						}
+					}
+					if uiutils.Eq(vLayout, "cards") {
+						@group.Group(group.GroupProps{Gap: "2", Class: "flex-wrap"}) {
+							for _, vK := range uiutils.L(uiutils.Get(vP, "tags")) {
+								@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm"}) {
+									{ uiutils.Text(vK) }
+								}
+							}
+						}
+						@group.Group(group.GroupProps{Gap: "4", Class: "pt-2"}) {
+							@MenuEntry(MenuEntryProps{Href: uiutils.Get(vP, "href"), Class: uiutils.Cnv("inline-flex items-center gap-2 text-sm font-medium")}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "case")) }
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-right", Size: 16})
+							}
+							@MenuEntry(MenuEntryProps{Href: uiutils.Get(vP, "href"), Class: uiutils.Cnv("inline-flex items-center gap-2 text-sm font-medium")}) {
+								{ uiutils.Text(uiutils.Get(vLabels, "view")) }
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "external-link", Size: 16})
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/prompt-composer.templ b/packages/templ/ui/blocks/prompt-composer.templ
new file mode 100644
index 0000000..6c440b1
--- /dev/null
+++ b/packages/templ/ui/blocks/prompt-composer.templ
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/prompt-composer.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// PromptComposerProps are the props of PromptComposer; the values are the JSON shapes of the TypeScript props.
+type PromptComposerProps struct {
+	Label any `json:"label"`
+	AttachLabel any `json:"attachLabel"`
+	ModelLabel any `json:"modelLabel"`
+	Send any `json:"send"`
+	Href any `json:"href"`
+}
+
+// A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send button. Static links only; a host adds behavior.
+templ PromptComposer(p PromptComposerProps) {
+	{{ vLabel := p.Label }}
+	{{ vAttachLabel := p.AttachLabel }}
+	{{ vModelLabel := p.ModelLabel }}
+	{{ vSend := p.Send }}
+	{{ vHref := p.Href }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30", uiutils.Get(presetDefaults, "hero", "composer"))), Attrs: uiutils.Attrs("data-testid", "email-form")}) {
+		if uiutils.T(vAttachLabel) {
+			@group.Group(group.GroupProps{Gap: "2", Align: "center", Attrs: uiutils.Attrs("data-testid", "composer-attachments")}) {
+				@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Class: uiutils.S(uiutils.Cnv("gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20", uiutils.Get(presetDefaults, "hero", "attach"))), Attrs: uiutils.Attrs("data-testid", "composer-attach")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "file-text", Size: 16})
+					{ uiutils.Text(vAttachLabel) }
+				}
+				@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Class: uiutils.S(uiutils.Cnv("gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20", uiutils.Get(presetDefaults, "hero", "attach"))), Attrs: uiutils.Attrs("data-testid", "composer-attach")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "paperclip", Size: 16})
+					{ uiutils.Text(vAttachLabel) }
+				}
+			}
+		}
+		@text.Text(text.TextProps{Size: "xs", Weight: "semibold", Class: uiutils.S(uiutils.Cnv("flex w-full items-center leading-5 text-background/80", uiutils.Get(presetDefaults, "hero", "promptLine"))), Attrs: uiutils.Attrs("data-testid", "field")}) {
+			{ uiutils.Text(vLabel) }
+		}
+		@group.Group(group.GroupProps{Gap: "2", Align: "center", Justify: "between", Class: "h-8 w-full", Attrs: uiutils.Attrs("data-testid", "composer-tools")}) {
+			@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+				@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", Class: "bg-background/10 text-background hover:bg-background/20", Attrs: uiutils.Attrs("data-testid", "composer-plus", "aria-label", uiutils.Coalesce(vAttachLabel, "Attach"))}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "plus", Size: 16})
+				}
+				if uiutils.T(vModelLabel) {
+					@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Class: uiutils.S(uiutils.Cnv("gap-2 bg-background/10 text-background hover:bg-background/20", uiutils.Get(presetDefaults, "hero", "model"))), Attrs: uiutils.Attrs("data-testid", "composer-model")}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "sparkles", Size: 16})
+						{ uiutils.Text(vModelLabel) }
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-down", Size: 16})
+					}
+				}
+			}
+			@button.Button(button.ButtonProps{Href: uiutils.S(vHref), Variant: "secondary", Size: "sm", Layout: "icon", Attrs: uiutils.Attrs("data-testid", "submit", "aria-label", uiutils.Coalesce(vSend, "Send"))}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-up", Size: 16})
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/proof-band.templ b/packages/templ/ui/blocks/proof-band.templ
new file mode 100644
index 0000000..0ab6e74
--- /dev/null
+++ b/packages/templ/ui/blocks/proof-band.templ
@@ -0,0 +1,71 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/proof-band.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ProofBandProps are the props of ProofBand; the values are the JSON shapes of the TypeScript props.
+type ProofBandProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Logos any `json:"logos"`
+	Empty any `json:"empty"`
+	Stats any `json:"stats"`
+	Layout any `json:"layout"`
+	LogoStyle any `json:"logoStyle"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above, beside), logos (name, icon), tone, density.
+templ ProofBand(p ProofBandProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLogos := p.Logos }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vStats := p.Stats }}
+	{{ vLayout := uiutils.Def(p.Layout, "above") }}
+	{{ vLogoStyle := uiutils.Def(p.LogoStyle, "name") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Align: "center", LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vLogos), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "building-2", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "beside")), "1-2", "1")), Class: "items-center gap-8"}) {
+				@group.Group(group.GroupProps{Gap: "6", Justify: "center", Class: "flex-wrap text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "logos")}) {
+					for _, vLogo := range uiutils.L(vLogos) {
+						@group.Group(group.GroupProps{Gap: "2", Align: "center", Attrs: uiutils.Attrs("data-testid", "logo")}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vLogo, "icon")), Size: 24})
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLogoStyle, "icon")), "sr-only", ""))}) {
+								{ uiutils.Text(uiutils.Get(vLogo, "name")) }
+							}
+						}
+					}
+				}
+				@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "beside")), "2", "1-4")), Class: "gap-6 text-center", Attrs: uiutils.Attrs("data-testid", "stats")}) {
+					for _, vStat := range uiutils.L(vStats) {
+						@stack.Stack(stack.StackProps{Gap: "0", Align: "center", Attrs: uiutils.Attrs("data-testid", "stat")}) {
+							@text.Text(text.TextProps{Size: "4xl", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vStat, "value")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vStat, "label")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/quote-card.templ b/packages/templ/ui/blocks/quote-card.templ
new file mode 100644
index 0000000..67e7b16
--- /dev/null
+++ b/packages/templ/ui/blocks/quote-card.templ
@@ -0,0 +1,75 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/quote-card.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// QuoteCardProps are the props of QuoteCard; the values are the JSON shapes of the TypeScript props.
+type QuoteCardProps struct {
+	Q any `json:"q"`
+	Labels any `json:"labels"`
+	Item any `json:"item"`
+	Layout any `json:"layout"`
+}
+
+// One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the stars and a company glyph as `item` says.
+templ QuoteCard(p QuoteCardProps) {
+	{{ vQ := p.Q }}
+	{{ vLabels := p.Labels }}
+	{{ vItem := p.Item }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	@FigureBlock(FigureBlockProps{Class: uiutils.Cnv(uiutils.Cnv("m-0 flex flex-col gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vItem, "kind"), "plain")), "", "rounded p-6 inset-ring inset-ring-border bg-card"), uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "masonry")), "mb-4 break-inside-avoid", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "strip")), "w-80 shrink-0 snap-start", "h-full")))), Testid: "item"}) {
+		if uiutils.Eq(uiutils.Get(vItem, "kind"), "social") {
+			@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+				if !uiutils.Eq(uiutils.Get(vItem, "avatar"), "none") {
+					@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vQ, "author"), Ratio: "1/1", Class: uiutils.Cnv("size-12 shrink-0 rounded-full")})
+				}
+				@stack.Stack(stack.StackProps{Gap: "0"}) {
+					@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+						{ uiutils.Text(uiutils.Get(vQ, "author")) }
+					}
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "handleLine"), uiutils.Get(vQ, "handle"), uiutils.Get(vQ, "time"))) }
+					}
+				}
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "message-circle", Size: 16, Class: "ml-auto text-muted-foreground"})
+			}
+			@text.Text(text.TextProps{Size: "base"}) {
+				{ uiutils.Text(uiutils.Get(vQ, "quote")) }
+			}
+		} else {
+			if !uiutils.Eq(uiutils.Get(vItem, "rating"), "hide") {
+				@Rating(RatingProps{Value: uiutils.Get(vQ, "rating"), Label: uiutils.Tpl(uiutils.Get(vLabels, "rating"), uiutils.Get(vQ, "rating"))})
+			}
+			if uiutils.Eq(uiutils.Get(vItem, "mark"), "icon") {
+				@inline.Inline(inline.InlineProps{Class: "text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "mark")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vQ, "mark")), Size: 24})
+				}
+			}
+			@text.Text(text.TextProps{Size: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "single")), "xl", "base"))}) {
+				{ uiutils.Text(uiutils.Get(vQ, "quote")) }
+			}
+			@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+				if !uiutils.Eq(uiutils.Get(vItem, "avatar"), "none") {
+					@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vQ, "author"), Ratio: "1/1", Class: uiutils.Cnv("size-12 shrink-0 rounded-full")})
+				}
+				@stack.Stack(stack.StackProps{Gap: "0"}) {
+					@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+						{ uiutils.Text(uiutils.Get(vQ, "author")) }
+					}
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "byLine"), uiutils.Get(vQ, "role"), uiutils.Get(vQ, "company"))) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/quote-figures.templ b/packages/templ/ui/blocks/quote-figures.templ
new file mode 100644
index 0000000..9f8f3ec
--- /dev/null
+++ b/packages/templ/ui/blocks/quote-figures.templ
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/quote-figures.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// QuoteFiguresProps are the props of QuoteFigures; the values are the JSON shapes of the TypeScript props.
+type QuoteFiguresProps struct {
+	Extras any `json:"extras"`
+}
+
+// Three figures in a row above the quotes of QuoteSplit.
+templ QuoteFigures(p QuoteFiguresProps) {
+	{{ vExtras := p.Extras }}
+	@box.Box(box.BoxProps{Class: "grid grid-cols-3 gap-4 border-b border-border pb-8", Attrs: uiutils.Attrs("data-testid", "quote-figures")}) {
+		for vI, vS := range uiutils.L(uiutils.Get(vExtras, "stats")) {
+			if uiutils.Lt(float64(vI), float64(3)) {
+				@stack.Stack(stack.StackProps{Gap: "0", Attrs: uiutils.Attrs("data-testid", "quote-stat")}) {
+					@text.Text(text.TextProps{Size: "3xl", Weight: "bold"}) {
+						{ uiutils.Text(uiutils.Get(vS, "value")) }
+					}
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vS, "label")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/quote-logo-tiles.templ b/packages/templ/ui/blocks/quote-logo-tiles.templ
new file mode 100644
index 0000000..f26017f
--- /dev/null
+++ b/packages/templ/ui/blocks/quote-logo-tiles.templ
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/quote-logo-tiles.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// QuoteLogoTilesProps are the props of QuoteLogoTiles; the values are the JSON shapes of the TypeScript props.
+type QuoteLogoTilesProps struct {
+	Extras any `json:"extras"`
+}
+
+// Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit.
+templ QuoteLogoTiles(p QuoteLogoTilesProps) {
+	{{ vExtras := p.Extras }}
+	@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-4", Attrs: uiutils.Attrs("data-testid", "quote-logos")}) {
+		for vI, vL := range uiutils.L(uiutils.Get(vExtras, "logos")) {
+			if uiutils.Lt(float64(vI), float64(4)) {
+				@group.Group(group.GroupProps{Gap: "2", Align: "center", Justify: "center", Class: "rounded bg-card inset-ring inset-ring-border p-4 text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "quote-logo")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vL, "icon")), Size: 20})
+					@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+						{ uiutils.Text(uiutils.Get(vL, "name")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/quote-proof.templ b/packages/templ/ui/blocks/quote-proof.templ
new file mode 100644
index 0000000..840bdcc
--- /dev/null
+++ b/packages/templ/ui/blocks/quote-proof.templ
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/quote-proof.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// QuoteProofProps are the props of QuoteProof; the values are the JSON shapes of the TypeScript props.
+type QuoteProofProps struct {
+	Quote any `json:"quote"`
+	QuoteBy any `json:"quoteBy"`
+	Center any `json:"center"`
+}
+
+// A customer quote and who said it, as a figure.
+templ QuoteProof(p QuoteProofProps) {
+	{{ vQuote := p.Quote }}
+	{{ vQuoteBy := p.QuoteBy }}
+	{{ vCenter := uiutils.Def(p.Center, false) }}
+	@block.Block(block.BlockProps{Tag: "figure", Class: uiutils.S(uiutils.Cnv("flex flex-col gap-2", uiutils.Cond(uiutils.T(vCenter), "items-center text-center", ""))), Attrs: uiutils.Attrs("data-testid", "proof")}) {
+		@text.Text(text.TextProps{Size: "xl"}) {
+			{ uiutils.Text(vQuote) }
+		}
+		@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+			{ uiutils.Text(vQuoteBy) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/quote-rating-panel.templ b/packages/templ/ui/blocks/quote-rating-panel.templ
new file mode 100644
index 0000000..df4382b
--- /dev/null
+++ b/packages/templ/ui/blocks/quote-rating-panel.templ
@@ -0,0 +1,46 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/quote-rating-panel.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// QuoteRatingPanelProps are the props of QuoteRatingPanel; the values are the JSON shapes of the TypeScript props.
+type QuoteRatingPanelProps struct {
+	Extras any `json:"extras"`
+	Labels any `json:"labels"`
+}
+
+// The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures.
+templ QuoteRatingPanel(p QuoteRatingPanelProps) {
+	{{ vExtras := p.Extras }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "6", Align: "center", Class: "rounded bg-card inset-ring inset-ring-border p-8 text-center", Attrs: uiutils.Attrs("data-testid", "quote-rating")}) {
+		@text.Text(text.TextProps{Size: "5xl", Weight: "bold"}) {
+			{ uiutils.Text(uiutils.Get(vExtras, "score")) }
+		}
+		@Rating(RatingProps{Value: uiutils.Get(vExtras, "rating"), Label: uiutils.Tpl(uiutils.Get(vLabels, "rating"), uiutils.Get(vExtras, "rating")), Size: float64(20)})
+		@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+			{ uiutils.Text(uiutils.Get(vExtras, "reviews")) }
+		}
+		@box.Box(box.BoxProps{Class: "grid w-full grid-cols-2 gap-4 border-t border-border pt-6"}) {
+			for vI, vS := range uiutils.L(uiutils.Get(vExtras, "stats")) {
+				if uiutils.Lt(float64(vI), float64(2)) {
+					@stack.Stack(stack.StackProps{Gap: "0", Align: "center", Attrs: uiutils.Attrs("data-testid", "quote-stat")}) {
+						@text.Text(text.TextProps{Size: "2xl", Weight: "semibold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "value")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "label")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/quote-slot.templ b/packages/templ/ui/blocks/quote-slot.templ
new file mode 100644
index 0000000..7cd4241
--- /dev/null
+++ b/packages/templ/ui/blocks/quote-slot.templ
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/quote-slot.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// QuoteSlotProps are the props of QuoteSlot; the values are the JSON shapes of the TypeScript props.
+type QuoteSlotProps struct {
+	Q any `json:"q"`
+	Labels any `json:"labels"`
+	Kind any `json:"kind"`
+	Layout any `json:"layout"`
+	Class string `json:"className"`
+}
+
+// One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in a box that can span grid rows.
+templ QuoteSlot(p QuoteSlotProps) {
+	{{ vQ := p.Q }}
+	{{ vLabels := p.Labels }}
+	{{ vKind := uiutils.Def(p.Kind, "card") }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	@box.Box(box.BoxProps{Class: uiutils.S(p.Class), Attrs: uiutils.Attrs("data-testid", "quote")}) {
+		@QuoteCard(QuoteCardProps{Q: vQ, Labels: vLabels, Item: map[string]any{"kind": vKind, "avatar": "image", "rating": "show", "mark": "none"}, Layout: vLayout})
+	}
+}
diff --git a/packages/templ/ui/blocks/quote-split.templ b/packages/templ/ui/blocks/quote-split.templ
new file mode 100644
index 0000000..959ee3b
--- /dev/null
+++ b/packages/templ/ui/blocks/quote-split.templ
@@ -0,0 +1,93 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/quote-split.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// QuoteSplitProps are the props of QuoteSplit; the values are the JSON shapes of the TypeScript props.
+type QuoteSplitProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Quotes any `json:"quotes"`
+	Labels any `json:"labels"`
+	Extras any `json:"extras"`
+	Actions any `json:"actions"`
+	Layout any `json:"layout"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	Empty any `json:"empty"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture, logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured quote beside a stack), mediaSide, tone.
+templ QuoteSplit(p QuoteSplitProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vQuotes := p.Quotes }}
+	{{ vLabels := p.Labels }}
+	{{ vExtras := p.Extras }}
+	{{ vActions := p.Actions }}
+	{{ vLayout := uiutils.Def(p.Layout, "media") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Eq(uiutils.Len(vQuotes), float64(0)) {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+			@EmptyState(EmptyStateProps{Icon: "quote", Title: vEmpty})
+		}
+	} else if uiutils.T(uiutils.Or(uiutils.Eq(vLayout, "compact"), uiutils.Eq(vLayout, "bento"))) {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+			if uiutils.Eq(vLayout, "bento") {
+				@QuoteFigures(QuoteFiguresProps{Extras: vExtras})
+			}
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "bento")), "grid grid-cols-1 gap-4 lg:grid-cols-2", "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"))}) {
+				for vI, vQ := range uiutils.L(vQuotes) {
+					@QuoteSlot(QuoteSlotProps{Q: vQ, Labels: vLabels, Layout: uiutils.Cond(uiutils.T(uiutils.And(uiutils.Eq(vLayout, "bento"), uiutils.Eq(float64(vI), float64(0)))), "single", "grid"), Class: uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.And(uiutils.Eq(vLayout, "bento"), uiutils.Eq(float64(vI), float64(0)))), "lg:row-span-3", ""))})
+				}
+			}
+		}
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide}, LandmarkLabel: vLandmarkLabel, Aside: quoteSplitFill1(p, vTitle, vLabels, vExtras, vLayout)}) {
+			if uiutils.T(uiutils.Or(uiutils.Eq(vLayout, "media"), uiutils.Eq(vLayout, "logos"), uiutils.Eq(vLayout, "rating"))) {
+				for vI, vQ := range uiutils.L(vQuotes) {
+					if uiutils.Lt(float64(vI), float64(1)) {
+						@QuoteSlot(QuoteSlotProps{Q: vQ, Labels: vLabels, Kind: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "media")), "card", "plain"), Layout: "single", Class: uiutils.Cnv("")})
+					}
+				}
+			}
+			if uiutils.Eq(vLayout, "logos") {
+				@QuoteLogoTiles(QuoteLogoTilesProps{Extras: vExtras})
+			}
+			if uiutils.Eq(vLayout, "stack") {
+				@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+					for vI, vQ := range uiutils.L(vQuotes) {
+						if uiutils.Lt(float64(vI), float64(3)) {
+							@QuoteSlot(QuoteSlotProps{Q: vQ, Labels: vLabels, Layout: "stack", Class: uiutils.Cnv("")})
+						}
+					}
+				}
+			}
+			if uiutils.T(uiutils.Or(uiutils.Eq(vLayout, "media"), uiutils.Eq(vLayout, "logos"), uiutils.Eq(vLayout, "rating"))) {
+				@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref")})
+			}
+		}
+	}
+}
+
+templ quoteSplitFill1(p QuoteSplitProps, vTitle any, vLabels any, vExtras any, vLayout any) {
+	if uiutils.Eq(vLayout, "rating") {
+		@QuoteRatingPanel(QuoteRatingPanelProps{Extras: vExtras, Labels: vLabels})
+	} else {
+		@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+	}
+}
diff --git a/packages/templ/ui/blocks/range-field.templ b/packages/templ/ui/blocks/range-field.templ
new file mode 100644
index 0000000..e83cf6c
--- /dev/null
+++ b/packages/templ/ui/blocks/range-field.templ
@@ -0,0 +1,48 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/range-field.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	rangefield "github.com/ui8kit/codegen/packages/templ/ui/ui/range"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// RangeFieldProps are the props of RangeField; the values are the JSON shapes of the TypeScript props.
+type RangeFieldProps struct {
+	Type any `json:"type"`
+	From any `json:"from"`
+	To any `json:"to"`
+	FromLabel any `json:"fromLabel"`
+	ToLabel any `json:"toLabel"`
+	Min any `json:"min"`
+	Max any `json:"max"`
+	Class string `json:"className"`
+}
+
+// A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.
+templ RangeField(p RangeFieldProps) {
+	{{ vType := p.Type }}
+	{{ vFrom := p.From }}
+	{{ vTo := p.To }}
+	{{ vFromLabel := p.FromLabel }}
+	{{ vToLabel := p.ToLabel }}
+	{{ vMin := p.Min }}
+	{{ vMax := p.Max }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-2", p.Class)), Attrs: uiutils.Attrs("data-slot", "range-field")}) {
+		if uiutils.T(uiutils.And(uiutils.Eq(vType, "number"), uiutils.Has(vMin), uiutils.Has(vMax), uiutils.Lt(vMin, vMax))) {
+			@rangefield.Range(rangefield.RangeProps{Min: uiutils.I(vMin), Max: uiutils.I(vMax), AriaLabel: uiutils.S(vFromLabel), Value: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vFrom, "")), uiutils.Str(vMin), vFrom)), Attrs: uiutils.Attrs("data-testid", "range-from")})
+			@rangefield.Range(rangefield.RangeProps{Min: uiutils.I(vMin), Max: uiutils.I(vMax), AriaLabel: uiutils.S(vToLabel), Value: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vTo, "")), uiutils.Str(vMax), vTo)), Attrs: uiutils.Attrs("data-testid", "range-to")})
+		}
+		@inline.Inline(inline.InlineProps{Class: "flex items-center gap-2"}) {
+			@input.Input(input.InputProps{Type: uiutils.S(vType), Size: "sm", AriaLabel: uiutils.S(vFromLabel), Value: uiutils.S(vFrom), Min: uiutils.S(uiutils.Str(vMin)), Max: uiutils.S(uiutils.Str(vMax))})
+			@inline.Inline(inline.InlineProps{Class: "text-muted-foreground"}) {
+				{ uiutils.Text("–") }
+			}
+			@input.Input(input.InputProps{Type: uiutils.S(vType), Size: "sm", AriaLabel: uiutils.S(vToLabel), Value: uiutils.S(vTo), Min: uiutils.S(uiutils.Str(vMin)), Max: uiutils.S(uiutils.Str(vMax))})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/rating.templ b/packages/templ/ui/blocks/rating.templ
new file mode 100644
index 0000000..a5339ce
--- /dev/null
+++ b/packages/templ/ui/blocks/rating.templ
@@ -0,0 +1,33 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/rating.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// RatingProps are the props of Rating; the values are the JSON shapes of the TypeScript props.
+type RatingProps struct {
+	Value any `json:"value"`
+	Label any `json:"label"`
+	Max any `json:"max"`
+	Size any `json:"size"`
+	Class string `json:"className"`
+}
+
+// One to five stars (a review's grade, the average of a product). The value is read as the label; the stars themselves are decoration.
+templ Rating(p RatingProps) {
+	{{ vValue := p.Value }}
+	{{ vLabel := p.Label }}
+	{{ vMax := uiutils.Def(p.Max, float64(5)) }}
+	{{ vSize := uiutils.Def(p.Size, float64(16)) }}
+	{{ vFull := any(uiutils.Round(uiutils.Min(vMax, uiutils.Max(float64(0), vValue)))) }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("inline-flex items-center gap-0", p.Class)), Attrs: uiutils.Attrs("role", "img", "aria-label", vLabel, "data-slot", "rating", "data-value", vFull)}) {
+		for _, vI := range uiutils.L(uiutils.Range(vMax)) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "star", Size: uiutils.I(vSize), Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Lt(vI, vFull)), "fill-foreground text-foreground", "text-border"))})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/recipes/avatar.variants.json b/packages/templ/ui/blocks/recipes/avatar.variants.json
new file mode 100644
index 0000000..54d4895
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/avatar.variants.json
@@ -0,0 +1,22 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.avatar",
+  "base": "relative inline-flex shrink-0 overflow-hidden bg-muted rounded-full",
+  "byKey": {
+    "size": {
+      "xs": "size-6",
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12",
+      "xl": "size-16"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/packages/templ/ui/blocks/recipes/badge-square.variants.json b/packages/templ/ui/blocks/recipes/badge-square.variants.json
new file mode 100644
index 0000000..b8b52c5
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/badge-square.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.badge-square",
+  "base": "inline-flex shrink-0 items-center justify-center bg-card text-xs font-medium whitespace-nowrap text-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-4 min-w-4 px-1",
+      "default": "h-5 px-2"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/packages/templ/ui/blocks/recipes/file-tree-item.variants.json b/packages/templ/ui/blocks/recipes/file-tree-item.variants.json
new file mode 100644
index 0000000..489ce86
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/file-tree-item.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.file-tree-item",
+  "base": "flex h-6 w-full items-center gap-4 text-xs font-bold text-muted-foreground data-[state=selected]:bg-muted",
+  "byKey": {
+    "kind": {
+      "folder": "",
+      "file": "px-8"
+    }
+  },
+  "defaults": {
+    "kind": "file"
+  },
+  "keys": [
+    "kind"
+  ]
+}
diff --git a/packages/templ/ui/blocks/recipes/icon-tab.variants.json b/packages/templ/ui/blocks/recipes/icon-tab.variants.json
new file mode 100644
index 0000000..f4b0990
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/icon-tab.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.icon-tab",
+  "base": "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground inset-ring inset-ring-transparent [&>svg]:size-4 rounded",
+  "byKey": {
+    "state": {
+      "default": "",
+      "active": "bg-card text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "state": "default"
+  },
+  "keys": [
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/templ/ui/blocks/recipes/logo-sidebar.variants.json b/packages/templ/ui/blocks/recipes/logo-sidebar.variants.json
new file mode 100644
index 0000000..8759a84
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/logo-sidebar.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.logo-sidebar",
+  "base": "flex h-8 items-center justify-between",
+  "byKey": {
+    "variant": {
+      "chat": "px-2",
+      "creator": "pr-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/packages/templ/ui/blocks/recipes/media-frame.variants.json b/packages/templ/ui/blocks/recipes/media-frame.variants.json
new file mode 100644
index 0000000..2d0b526
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/media-frame.variants.json
@@ -0,0 +1,22 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.media-frame",
+  "base": "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "ratio": {
+      "16/9": "aspect-video",
+      "4/3": "aspect-4/3",
+      "1/1": "aspect-square",
+      "3/4": "aspect-3/4",
+      "21/9": "aspect-21/9"
+    }
+  },
+  "defaults": {
+    "ratio": "16/9"
+  },
+  "keys": [
+    "ratio"
+  ],
+  "compound": []
+}
diff --git a/packages/templ/ui/blocks/recipes/nav-item-content.variants.json b/packages/templ/ui/blocks/recipes/nav-item-content.variants.json
new file mode 100644
index 0000000..9d4e03a
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/nav-item-content.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item-content",
+  "base": "flex h-8 min-w-0 flex-1 items-center justify-between px-4 py-2 text-xs font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "px-2",
+      "4": "px-2"
+    },
+    "state": {
+      "default": "",
+      "selected": "bg-background text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/templ/ui/blocks/recipes/nav-item.variants.json b/packages/templ/ui/blocks/recipes/nav-item.variants.json
new file mode 100644
index 0000000..c8eba12
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/nav-item.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item",
+  "base": "flex w-full items-center p-2 rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "pr-2 pl-12",
+      "4": "pr-2 pl-20"
+    },
+    "state": {
+      "default": "",
+      "selected": ""
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/templ/ui/blocks/recipes/section-column.variants.json b/packages/templ/ui/blocks/recipes/section-column.variants.json
new file mode 100644
index 0000000..b5637fc
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/section-column.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-column",
+  "base": "",
+  "defaults": {
+    "measure": "default"
+  },
+  "keys": [
+    "measure"
+  ],
+  "compound": [],
+  "byKey": {
+    "measure": {
+      "default": "",
+      "landing": "",
+      "fill": "",
+      "xs": "mx-auto w-full max-w-xs",
+      "sm": "mx-auto w-full max-w-sm",
+      "md": "mx-auto w-full max-w-md",
+      "lg": "mx-auto w-full max-w-lg",
+      "xl": "mx-auto w-full max-w-xl",
+      "2xl": "mx-auto w-full max-w-2xl",
+      "3xl": "mx-auto w-full max-w-3xl"
+    }
+  }
+}
diff --git a/packages/templ/ui/blocks/recipes/section-frame.variants.json b/packages/templ/ui/blocks/recipes/section-frame.variants.json
new file mode 100644
index 0000000..d141c90
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/section-frame.variants.json
@@ -0,0 +1,34 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-frame",
+  "base": "w-full",
+  "byKey": {
+    "tone": {
+      "default": "",
+      "muted": "bg-muted",
+      "inverse": "bg-foreground text-background [&_.text-muted-foreground]:text-background/70"
+    },
+    "density": {
+      "roomy": "py-16",
+      "default": "py-10",
+      "compact": "py-6",
+      "flush": "py-0"
+    },
+    "align": {
+      "start": "",
+      "center": "text-center"
+    }
+  },
+  "defaults": {
+    "tone": "default",
+    "density": "default",
+    "align": "start"
+  },
+  "keys": [
+    "tone",
+    "density",
+    "align"
+  ],
+  "compound": []
+}
diff --git a/packages/templ/ui/blocks/recipes/section-head.variants.json b/packages/templ/ui/blocks/recipes/section-head.variants.json
new file mode 100644
index 0000000..ff1cc80
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/section-head.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.section-head",
+  "base": "flex items-center justify-between pr-4 pl-4",
+  "byKey": {
+    "size": {
+      "default": "h-8 py-2 text-xs font-semibold",
+      "lg": "h-12 py-2 text-sm font-bold"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ]
+}
diff --git a/packages/templ/ui/blocks/recipes/sidebar-panel.variants.json b/packages/templ/ui/blocks/recipes/sidebar-panel.variants.json
new file mode 100644
index 0000000..5a7bb9c
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/sidebar-panel.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.sidebar-panel",
+  "base": "flex shrink-0 flex-col",
+  "byKey": {
+    "variant": {
+      "chat": "w-68 gap-2 pt-6 pr-4 pb-6 pl-4",
+      "creator": "w-62 justify-between gap-4 p-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/packages/templ/ui/blocks/recipes/switcher-item.variants.json b/packages/templ/ui/blocks/recipes/switcher-item.variants.json
new file mode 100644
index 0000000..58d88d5
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/switcher-item.variants.json
@@ -0,0 +1,48 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher-item",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-6 gap-1 px-3 text-xs",
+      "default": "h-8 gap-2 px-4 text-sm",
+      "lg": "h-10 gap-2 px-5 text-sm"
+    },
+    "state": {
+      "default": "",
+      "active": "bg-background text-foreground inset-ring-border"
+    },
+    "layout": {
+      "text": "",
+      "icon": "[&>svg]:size-4"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "state": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "state",
+    "layout"
+  ],
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "w-6 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "w-8 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "w-10 px-0"
+    }
+  ]
+}
diff --git a/packages/templ/ui/blocks/recipes/switcher.variants.json b/packages/templ/ui/blocks/recipes/switcher.variants.json
new file mode 100644
index 0000000..d0ef662
--- /dev/null
+++ b/packages/templ/ui/blocks/recipes/switcher.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher",
+  "base": "inline-flex max-w-full items-center gap-1 overflow-x-auto bg-muted inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-8 p-1",
+      "default": "h-10 p-1",
+      "lg": "h-12 p-1"
+    },
+    "layout": {
+      "text": "",
+      "icon": "gap-0"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "layout"
+  ],
+  "compound": []
+}
diff --git a/packages/templ/ui/blocks/region.templ b/packages/templ/ui/blocks/region.templ
new file mode 100644
index 0000000..37d7d9e
--- /dev/null
+++ b/packages/templ/ui/blocks/region.templ
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/region.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// RegionProps are the props of Region; the values are the JSON shapes of the TypeScript props.
+type RegionProps struct {
+	Tag any `json:"tag"`
+	LandmarkLabel any `json:"landmarkLabel"`
+	Class string `json:"className"`
+}
+
+// A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never nested, so a nested landmark is its own component.
+templ Region(p RegionProps) {
+	{{ vTag := p.Tag }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: uiutils.S(vTag), Class: uiutils.S(p.Class), Attrs: uiutils.Attrs("aria-label", vLandmarkLabel)}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/review-list.templ b/packages/templ/ui/blocks/review-list.templ
new file mode 100644
index 0000000..64db969
--- /dev/null
+++ b/packages/templ/ui/blocks/review-list.templ
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/review-list.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ReviewListProps are the props of ReviewList; the values are the JSON shapes of the TypeScript props.
+type ReviewListProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Reviews any `json:"reviews"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Item any `json:"item"`
+	Avatar any `json:"avatar"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid), columns, item (card, plain), avatar (none, image), tone, density.
+templ ReviewList(p ReviewListProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vReviews := p.Reviews }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "list") }}
+	{{ vItem := uiutils.Def(p.Item, "card") }}
+	{{ vAvatar := uiutils.Def(p.Avatar, "none") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "2xl", "default"), LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vReviews), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "message-square-quote", Title: uiutils.Get(vLabels, "empty")})
+		}
+		@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "grid")), "1-3", "1")), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+			for _, vR := range uiutils.L(vReviews) {
+				@ArticleBlock(ArticleBlockProps{Class: uiutils.Cnv(uiutils.Cnv("flex h-full flex-col gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "card")), "rounded bg-card p-6 inset-ring inset-ring-border", "border-b border-border pb-4"))), Testid: "item"}) {
+					@Rating(RatingProps{Value: uiutils.Get(vR, "rating"), Label: uiutils.Tpl(uiutils.Get(vLabels, "ratingLabel"), uiutils.Get(vR, "rating"))})
+					@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "bold"}) {
+						{ uiutils.Text(uiutils.Get(vR, "title")) }
+					}
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vR, "text")) }
+					}
+					@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "mt-auto"}) {
+						if uiutils.Eq(vAvatar, "image") {
+							@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vR, "author"), Ratio: "1/1", Class: uiutils.Cnv("size-10 shrink-0 rounded-full")})
+						}
+						@stack.Stack(stack.StackProps{Gap: "0"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vR, "author")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vR, "date")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/search-field.templ b/packages/templ/ui/blocks/search-field.templ
new file mode 100644
index 0000000..bc27360
--- /dev/null
+++ b/packages/templ/ui/blocks/search-field.templ
@@ -0,0 +1,30 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/search-field.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SearchFieldProps are the props of SearchField; the values are the JSON shapes of the TypeScript props.
+type SearchFieldProps struct {
+	Value any `json:"value"`
+	Placeholder any `json:"placeholder"`
+	Label any `json:"label"`
+	Class string `json:"className"`
+}
+
+// A search input with a magnifier. `value` fires on every keystroke with the new text.
+templ SearchField(p SearchFieldProps) {
+	{{ vValue := p.Value }}
+	{{ vPlaceholder := p.Placeholder }}
+	{{ vLabel := p.Label }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("relative min-w-44 flex-1", p.Class)), Attrs: uiutils.Attrs("role", "search")}) {
+		@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "search", Size: 16, Class: "pointer-events-none absolute top-2 left-3 text-muted-foreground"})
+		@input.Input(input.InputProps{Size: "sm", Type: "search", Placeholder: uiutils.S(vPlaceholder), AriaLabel: uiutils.S(vLabel), Class: "pr-3 pl-10", Value: uiutils.S(vValue)})
+	}
+}
diff --git a/packages/templ/ui/blocks/search-palette.templ b/packages/templ/ui/blocks/search-palette.templ
new file mode 100644
index 0000000..ffd18e7
--- /dev/null
+++ b/packages/templ/ui/blocks/search-palette.templ
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/search-palette.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SearchPaletteProps are the props of SearchPalette; the values are the JSON shapes of the TypeScript props.
+type SearchPaletteProps struct {
+	Label any `json:"label"`
+	Shortcut any `json:"shortcut"`
+}
+
+// A search field with a search glyph and the keys that open it.
+templ SearchPalette(p SearchPaletteProps) {
+	{{ vLabel := p.Label }}
+	{{ vShortcut := p.Shortcut }}
+	@box.Box(box.BoxProps{Class: "relative w-full max-w-sm", Attrs: uiutils.Attrs("data-testid", "palette")}) {
+		@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "search", Size: 16, Class: "pointer-events-none absolute top-2 left-3 text-muted-foreground"})
+		@input.Input(input.InputProps{Type: "search", Size: "sm", Placeholder: uiutils.S(vLabel), AriaLabel: uiutils.S(vLabel), Class: "pr-12 pl-10"})
+		@inline.Inline(inline.InlineProps{Class: "pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring inset-ring-border"}) {
+			{ uiutils.Text(vShortcut) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/section-box.templ b/packages/templ/ui/blocks/section-box.templ
new file mode 100644
index 0000000..175b8a5
--- /dev/null
+++ b/packages/templ/ui/blocks/section-box.templ
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/section-box.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SectionBoxProps are the props of SectionBox; the values are the JSON shapes of the TypeScript props.
+type SectionBoxProps struct {
+	Boxed any `json:"boxed"`
+}
+
+// The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper).
+templ SectionBox(p SectionBoxProps) {
+	{{ vBoxed := uiutils.Def(p.Boxed, false) }}
+	if uiutils.T(vBoxed) {
+		@card.Card(card.CardProps{Variant: "muted"}) {
+			{ children... }
+		}
+	} else {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/section-column.templ b/packages/templ/ui/blocks/section-column.templ
new file mode 100644
index 0000000..b8dfe78
--- /dev/null
+++ b/packages/templ/ui/blocks/section-column.templ
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/section-column.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SectionColumnProps are the props of SectionColumn; the values are the JSON shapes of the TypeScript props.
+type SectionColumnProps struct {
+	Measure any `json:"measure"`
+}
+
+// The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure (xs to 3xl) holds the column at that width, centred.
+templ SectionColumn(p SectionColumnProps) {
+	{{ vMeasure := uiutils.Def(p.Measure, "default") }}
+	@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch", Class: uiutils.S(recipeSectionColumn.Of(map[string]any{"measure": vMeasure}))}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/section-frame.templ b/packages/templ/ui/blocks/section-frame.templ
new file mode 100644
index 0000000..0de4060
--- /dev/null
+++ b/packages/templ/ui/blocks/section-frame.templ
@@ -0,0 +1,92 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/section-frame.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SectionFrameProps are the props of SectionFrame; the values are the JSON shapes of the TypeScript props.
+type SectionFrameProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Heading any `json:"heading"`
+	Action any `json:"action"`
+	Layout any `json:"layout"`
+	Media any `json:"media"`
+	Boxed any `json:"boxed"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	Align any `json:"align"`
+	Measure any `json:"measure"`
+	LandmarkLabel any `json:"landmarkLabel"`
+	Class string `json:"className"`
+	Aside templ.Component `json:"-"`
+}
+
+// A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts the body in a card. Axes: layout, media side, tone, density, align.
+templ SectionFrame(p SectionFrameProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := uiutils.Def(p.Title, "") }}
+	{{ vLead := p.Lead }}
+	{{ vHeading := p.Heading }}
+	{{ vAction := p.Action }}
+	{{ vLayout := uiutils.Def(p.Layout, "stack") }}
+	{{ vMedia := p.Media }}
+	{{ vBoxed := uiutils.Def(p.Boxed, false) }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vAlign := uiutils.Def(p.Align, "start") }}
+	{{ vMeasure := uiutils.Def(p.Measure, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vTitleId := any(uiutils.Add(vId, "-title")) }}
+	{{ vSectionTone := any(uiutils.Cond(uiutils.T(vBoxed), "default", vTone)) }}
+	{{ vCenter := any(uiutils.Eq(vAlign, "center")) }}
+	@block.Block(block.BlockProps{Tag: "section", Class: uiutils.S(uiutils.Cnv(recipeSectionFrame.Of(map[string]any{"tone": vSectionTone, "density": vDensity, "align": vAlign}), p.Class)), Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Cond(uiutils.T(!uiutils.Eq(vTitle, "")), vTitleId, nil)), "aria-label", uiutils.Coalesce(vLandmarkLabel, uiutils.Cond(uiutils.T(uiutils.Eq(vTitle, "")), vId, nil)), "data-testid", "section", "data-tone", vTone, "data-density", vDensity)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vMeasure, "landing")), uiutils.Cnv("mx-auto w-full px-4", uiutils.Get(presetDefaults, "section", "landing")), uiutils.Cond(uiutils.T(uiutils.Eq(vMeasure, "fill")), "w-full", "mx-auto w-full max-w-6xl px-4"))), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@SectionBox(SectionBoxProps{Boxed: vBoxed}) {
+				if uiutils.Eq(vLayout, "split") {
+					@grid.Grid(grid.GridProps{Cols: "1-2", Class: uiutils.S(uiutils.Cnv("gap-8", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vMedia, "align"), "start")), "items-start", "items-center")))}) {
+						if uiutils.T(uiutils.And(uiutils.Get(vMedia, "show"), uiutils.Eq(uiutils.Get(vMedia, "side"), "start"))) {
+							@box.Box(box.BoxProps{Class: "w-full", Attrs: uiutils.Attrs("data-slot", "media")}) {
+								if p.Aside != nil {
+									@p.Aside
+								}
+							}
+						}
+						@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch"}) {
+							@SectionHeader(SectionHeaderProps{TitleId: vTitleId, Title: vTitle, Heading: vHeading, Action: vAction, Lead: vLead, Center: vCenter})
+							{ children... }
+						}
+						if uiutils.T(uiutils.And(uiutils.Get(vMedia, "show"), !uiutils.Eq(uiutils.Get(vMedia, "side"), "start"))) {
+							@box.Box(box.BoxProps{Class: "w-full", Attrs: uiutils.Attrs("data-slot", "media")}) {
+								if p.Aside != nil {
+									@p.Aside
+								}
+							}
+						}
+					}
+				} else {
+					@SectionColumn(SectionColumnProps{Measure: vMeasure}) {
+						@SectionHeader(SectionHeaderProps{TitleId: vTitleId, Title: vTitle, Heading: vHeading, Action: vAction, Lead: vLead, Center: vCenter})
+						{ children... }
+						if uiutils.T(uiutils.Get(vMedia, "show")) {
+							@box.Box(box.BoxProps{Class: "w-full", Attrs: uiutils.Attrs("data-slot", "media")}) {
+								if p.Aside != nil {
+									@p.Aside
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/section-head.templ b/packages/templ/ui/blocks/section-head.templ
new file mode 100644
index 0000000..28836b3
--- /dev/null
+++ b/packages/templ/ui/blocks/section-head.templ
@@ -0,0 +1,55 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/section-head.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	buttonplain "github.com/ui8kit/codegen/packages/templ/ui/ui/button-plain"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SectionHeadProps are the props of SectionHead; the values are the JSON shapes of the TypeScript props.
+type SectionHeadProps struct {
+	Size any `json:"size"`
+	Expanded any `json:"expanded"`
+	Controls any `json:"controls"`
+	Class string `json:"className"`
+	Right templ.Component `json:"-"`
+}
+
+// A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button (aria-expanded, the toggle event).
+templ SectionHead(p SectionHeadProps) {
+	{{ vSize := uiutils.Def(p.Size, "default") }}
+	{{ vExpanded := p.Expanded }}
+	{{ vControls := p.Controls }}
+	{{ vCls := any(uiutils.Cnv(recipeSectionHead.Of(map[string]any{"size": vSize}), "rounded text-foreground in-data-[nav=collapsed]:hidden", p.Class)) }}
+	if uiutils.Has(vExpanded) {
+		@buttonplain.ButtonPlain(buttonplain.ButtonPlainProps{Type: "button", Class: uiutils.S(uiutils.Cnv(vCls, "w-full text-left")), Attrs: uiutils.Attrs("aria-expanded", vExpanded, "aria-controls", vControls, "data-slot", "section-head", "data-expanded", vExpanded)}) {
+			@inline.Inline(inline.InlineProps{Attrs: uiutils.Attrs("data-slot", "section-head-title")}) {
+				{ children... }
+			}
+			if uiutils.T((p.Right != nil)) {
+				@inline.Inline(inline.InlineProps{Class: "flex items-center gap-2", Attrs: uiutils.Attrs("data-slot", "section-head-right")}) {
+					if p.Right != nil {
+						@p.Right
+					}
+				}
+			}
+		}
+	} else {
+		@box.Box(box.BoxProps{Class: uiutils.S(vCls), Attrs: uiutils.Attrs("data-slot", "section-head")}) {
+			@inline.Inline(inline.InlineProps{Attrs: uiutils.Attrs("data-slot", "section-head-title")}) {
+				{ children... }
+			}
+			if uiutils.T((p.Right != nil)) {
+				@inline.Inline(inline.InlineProps{Class: "flex items-center gap-2", Attrs: uiutils.Attrs("data-slot", "section-head-right")}) {
+					if p.Right != nil {
+						@p.Right
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/section-header.templ b/packages/templ/ui/blocks/section-header.templ
new file mode 100644
index 0000000..588451e
--- /dev/null
+++ b/packages/templ/ui/blocks/section-header.templ
@@ -0,0 +1,68 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/section-header.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SectionHeaderProps are the props of SectionHeader; the values are the JSON shapes of the TypeScript props.
+type SectionHeaderProps struct {
+	TitleId any `json:"titleId"`
+	Title any `json:"title"`
+	Heading any `json:"heading"`
+	Action any `json:"action"`
+	Lead any `json:"lead"`
+	Center any `json:"center"`
+}
+
+// The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an optional lead. No wrapper: its parts are children of the section stack.
+templ SectionHeader(p SectionHeaderProps) {
+	{{ vTitleId := p.TitleId }}
+	{{ vTitle := uiutils.Def(p.Title, "") }}
+	{{ vHeading := p.Heading }}
+	{{ vAction := p.Action }}
+	{{ vLead := p.Lead }}
+	{{ vCenter := uiutils.Def(p.Center, false) }}
+	{{ vLevel := any(uiutils.Coalesce(uiutils.Get(vHeading, "level"), float64(2))) }}
+	{{ vScale := any(uiutils.Coalesce(uiutils.Get(vHeading, "scale"), "default")) }}
+	{{ vHasAction := any(uiutils.And(uiutils.Get(vAction, "label"), uiutils.Get(vAction, "href"))) }}
+	if uiutils.T(uiutils.Get(vHeading, "badge")) {
+		@badge.Badge(badge.BadgeProps{Variant: "outline", Size: "lg", Class: uiutils.S(uiutils.Cond(uiutils.T(vCenter), "mx-auto w-fit", "w-fit")), Attrs: uiutils.Attrs("data-testid", "section-badge")}) {
+			{ uiutils.Text(uiutils.Get(vHeading, "badge")) }
+		}
+	}
+	if uiutils.T(uiutils.And(!uiutils.Eq(vTitle, ""), vHasAction)) {
+		@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between", Class: "w-full flex-wrap"}) {
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(vLevel)), Size: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLevel, float64(1))), "5xl", "xl")), Weight: "semibold", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vScale, "display")), "text-6xl tracking-tight md:text-8xl", uiutils.Cond(uiutils.T(uiutils.Eq(vLevel, float64(1))), "leading-tight", "leading-7"))), Attrs: uiutils.Attrs("id", vTitleId)}) {
+				{ uiutils.Text(vTitle) }
+			}
+			@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Get(vAction, "href")), Variant: "default", Class: uiutils.S(uiutils.Cnv(uiutils.Get(presetDefaults, "text", "tiny"), "shrink-0 font-medium leading-5")), Attrs: uiutils.Attrs("data-testid", "section-action")}) {
+				{ uiutils.Text(uiutils.Get(vAction, "label")) }
+			}
+		}
+	}
+	if uiutils.T(uiutils.And(!uiutils.Eq(vTitle, ""), !uiutils.T(vHasAction))) {
+		@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(vLevel)), Size: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLevel, float64(1))), "5xl", "xl")), Weight: "semibold", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vScale, "display")), "text-6xl tracking-tight md:text-8xl", uiutils.Cond(uiutils.T(uiutils.Eq(vLevel, float64(1))), "leading-tight", "leading-7"))), Attrs: uiutils.Attrs("id", vTitleId)}) {
+			{ uiutils.Text(vTitle) }
+		}
+	}
+	if uiutils.T(uiutils.And(uiutils.Eq(vTitle, ""), vHasAction)) {
+		@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "end", Class: "w-full"}) {
+			@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Get(vAction, "href")), Variant: "default", Class: uiutils.S(uiutils.Cnv(uiutils.Get(presetDefaults, "text", "tiny"), "shrink-0 font-medium leading-5")), Attrs: uiutils.Attrs("data-testid", "section-action")}) {
+				{ uiutils.Text(uiutils.Get(vAction, "label")) }
+			}
+		}
+	}
+	if uiutils.T(vLead) {
+		@text.Text(text.TextProps{Size: "base", Class: uiutils.S(uiutils.Cnv("max-w-2xl text-muted-foreground", uiutils.Cond(uiutils.T(vCenter), "mx-auto", "")))}) {
+			{ uiutils.Text(vLead) }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/shell-content.templ b/packages/templ/ui/blocks/shell-content.templ
new file mode 100644
index 0000000..69771eb
--- /dev/null
+++ b/packages/templ/ui/blocks/shell-content.templ
@@ -0,0 +1,93 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/shell-content.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ShellContentProps are the props of ShellContent; the values are the JSON shapes of the TypeScript props.
+type ShellContentProps struct {
+	Title any `json:"title"`
+	TitleId any `json:"titleId"`
+	Level any `json:"level"`
+	Content any `json:"content"`
+}
+
+// The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one), list (a toolbar over a card of rows). The cards are hidden from assistive technology.
+templ ShellContent(p ShellContentProps) {
+	{{ vTitle := p.Title }}
+	{{ vTitleId := p.TitleId }}
+	{{ vLevel := uiutils.Def(p.Level, float64(2)) }}
+	{{ vContent := uiutils.Def(p.Content, "grid") }}
+	@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch", Class: "flex-1 p-6", Attrs: uiutils.Attrs("data-testid", "content")}) {
+		@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between"}) {
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(vLevel)), Size: "2xl", Weight: "semibold", Attrs: uiutils.Attrs("id", vTitleId)}) {
+				{ uiutils.Text(vTitle) }
+			}
+			@box.Box(box.BoxProps{Class: "h-10 w-32 rounded bg-muted", Attrs: uiutils.Attrs("aria-hidden", "true")})
+		}
+		@box.Box(box.BoxProps{Class: "flex flex-1 flex-col gap-4", Attrs: uiutils.Attrs("aria-hidden", "true", "data-testid", "panels")}) {
+			if uiutils.Eq(vContent, "grid") {
+				@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-4 lg:grid-cols-4"}) {
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")), Attrs: uiutils.Attrs("data-testid", "panel")}) {
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-4 w-1/3"))})
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "flex-1"))})
+					}
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")), Attrs: uiutils.Attrs("data-testid", "panel")}) {
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-4 w-1/3"))})
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "flex-1"))})
+					}
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")), Attrs: uiutils.Attrs("data-testid", "panel")}) {
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-4 w-1/3"))})
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "flex-1"))})
+					}
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-24")), Attrs: uiutils.Attrs("data-testid", "panel")}) {
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-4 w-1/3"))})
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "flex-1"))})
+					}
+				}
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "min-h-64 flex-1")), Attrs: uiutils.Attrs("data-testid", "panel")}) {
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-4 w-1/3"))})
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "flex-1"))})
+				}
+			}
+			if uiutils.Eq(vContent, "split") {
+				@box.Box(box.BoxProps{Class: "grid grid-cols-1 gap-4 lg:grid-cols-3"}) {
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-64 lg:col-span-2")), Attrs: uiutils.Attrs("data-testid", "panel")}) {
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-4 w-1/3"))})
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "flex-1"))})
+					}
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "h-64")), Attrs: uiutils.Attrs("data-testid", "panel")}) {
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-4 w-1/3"))})
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "flex-1"))})
+					}
+				}
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "min-h-40 flex-1")), Attrs: uiutils.Attrs("data-testid", "panel")}) {
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-4 w-1/3"))})
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "flex-1"))})
+				}
+			}
+			if uiutils.Eq(vContent, "list") {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-10 w-64"))})
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-10 w-24"))})
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "ml-auto h-10 w-32"))})
+				}
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", "flex-1")), Attrs: uiutils.Attrs("data-testid", "panel")}) {
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-8"))})
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-8"))})
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-8"))})
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-8"))})
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-8"))})
+					@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("rounded bg-muted", "h-8"))})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/shell-footer.templ b/packages/templ/ui/blocks/shell-footer.templ
new file mode 100644
index 0000000..a5dbfac
--- /dev/null
+++ b/packages/templ/ui/blocks/shell-footer.templ
@@ -0,0 +1,43 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/shell-footer.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ShellFooterProps are the props of ShellFooter; the values are the JSON shapes of the TypeScript props.
+type ShellFooterProps struct {
+	Nav any `json:"nav"`
+	Place any `json:"place"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the whole shell (full).
+templ ShellFooter(p ShellFooterProps) {
+	{{ vNav := p.Nav }}
+	{{ vPlace := uiutils.Def(p.Place, "full") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "footer", Class: uiutils.S(uiutils.Cnv("flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4", uiutils.Cond(uiutils.T(uiutils.Eq(vPlace, "full")), "bg-card", ""))), Attrs: uiutils.Attrs("data-testid", "footer", "data-place", vPlace, "aria-label", vLandmarkLabel)}) {
+		@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+			{ uiutils.Text(uiutils.Get(vNav, "copyright")) }
+		}
+		if uiutils.Gt(uiutils.Len(uiutils.Get(vNav, "footer")), float64(0)) {
+			@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", uiutils.Get(vNav, "footerLabel"), vLandmarkLabel)), uiutils.Get(vNav, "footerLabel"))}) {
+				@list.List(list.ListProps{Class: "m-0 flex list-none items-center gap-4 p-0"}) {
+					for _, vF := range uiutils.L(uiutils.Get(vNav, "footer")) {
+						@list.ListItem(list.ListItemProps{}) {
+							@MenuEntry(MenuEntryProps{Href: uiutils.Get(vF, "href"), Class: uiutils.Cnv("text-xs text-muted-foreground"), Variant: "muted", Size: "sm"}) {
+								{ uiutils.Text(uiutils.Get(vF, "name")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/shell-sidebar.templ b/packages/templ/ui/blocks/shell-sidebar.templ
new file mode 100644
index 0000000..1ea571e
--- /dev/null
+++ b/packages/templ/ui/blocks/shell-sidebar.templ
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/shell-sidebar.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	buttonplain "github.com/ui8kit/codegen/packages/templ/ui/ui/button-plain"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ShellSidebarProps are the props of ShellSidebar; the values are the JSON shapes of the TypeScript props.
+type ShellSidebarProps struct {
+	Nav any `json:"nav"`
+	Mode any `json:"mode"`
+	Side any `json:"side"`
+	Brand any `json:"brand"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read), collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a panel of the current section's links). side puts it at the start or the end.
+templ ShellSidebar(p ShellSidebarProps) {
+	{{ vNav := p.Nav }}
+	{{ vMode := uiutils.Def(p.Mode, "wide") }}
+	{{ vSide := uiutils.Def(p.Side, "start") }}
+	{{ vBrand := uiutils.Def(p.Brand, "show") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	{{ vNamed := any(uiutils.Eq(vMode, "wide")) }}
+	@block.Block(block.BlockProps{Tag: "aside", Class: uiutils.S(uiutils.Cnv("flex shrink-0 bg-card", uiutils.Cond(uiutils.T(uiutils.Eq(vSide, "end")), "flex-row-reverse border-l border-border", "border-r border-border"))), Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, uiutils.Get(vNav, "label")), "data-testid", "sidebar", "data-mode", vMode)}) {
+		@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-6 py-4", uiutils.Cond(uiutils.T(vNamed), "w-64 px-4", "w-16 items-center px-2")))}) {
+			if uiutils.Eq(vBrand, "show") {
+				@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: "shrink-0", Attrs: uiutils.Attrs("data-testid", "brand")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "layers", Size: 24})
+					@text.Text(text.TextProps{Size: "base", Weight: "bold", Class: uiutils.S(uiutils.Cond(uiutils.T(vNamed), "", "sr-only"))}) {
+						{ uiutils.Text(uiutils.Get(vNav, "brand")) }
+					}
+				}
+			}
+			if uiutils.Gt(uiutils.Len(uiutils.Get(vNav, "links")), float64(0)) {
+				@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", uiutils.Get(vNav, "label"), vLandmarkLabel)), uiutils.Get(vNav, "label")), Class: uiutils.Cnv("flex-1")}) {
+					@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0", Attrs: uiutils.Attrs("data-testid", "items")}) {
+						for _, vL := range uiutils.L(uiutils.Get(vNav, "links")) {
+							@list.ListItem(list.ListItemProps{}) {
+								@MenuEntry(MenuEntryProps{Href: uiutils.Get(vL, "href"), Class: uiutils.Cnv(uiutils.Cnv("flex items-center gap-4 rounded py-2 text-sm", uiutils.Cond(uiutils.T(vNamed), "px-4", "justify-center px-2"), uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vL, "id"), uiutils.Get(vNav, "current"))), "bg-muted font-medium", ""))), Current: uiutils.Eq(uiutils.Get(vL, "id"), uiutils.Get(vNav, "current")), Size: "sm", Testid: "item"}) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vL, "icon")), Size: 16})
+									@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cond(uiutils.T(vNamed), "", "sr-only"))}) {
+										{ uiutils.Text(uiutils.Get(vL, "name")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+			if uiutils.Eq(vMode, "collapsed") {
+				@buttonplain.ButtonPlain(buttonplain.ButtonPlainProps{Type: "button", Class: "inline-flex size-10 items-center justify-center rounded text-muted-foreground", Attrs: uiutils.Attrs("aria-label", uiutils.Get(vNav, "expand"), "aria-expanded", uiutils.Cond(uiutils.T(uiutils.Eq(vMode, "wide")), "true", "false"), "data-testid", "toggle")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "panel-left", Size: 20})
+				}
+			}
+		}
+		if uiutils.T(uiutils.And(uiutils.Eq(vMode, "twolevel"), uiutils.Gt(uiutils.Len(uiutils.Get(vNav, "sub")), float64(0)))) {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex w-56 flex-col gap-4 px-4 py-6", uiutils.Cond(uiutils.T(uiutils.Eq(vSide, "end")), "border-r border-border", "border-l border-border"))), Attrs: uiutils.Attrs("data-testid", "subnav")}) {
+				@text.Text(text.TextProps{Size: "sm", Weight: "semibold", Class: "px-4"}) {
+					{ uiutils.Text(uiutils.Get(vNav, "subTitle")) }
+				}
+				@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", uiutils.Get(vNav, "subTitle"), vLandmarkLabel)), uiutils.Get(vNav, "subTitle"))}) {
+					@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0"}) {
+						for _, vS := range uiutils.L(uiutils.Get(vNav, "sub")) {
+							@list.ListItem(list.ListItemProps{}) {
+								@MenuEntry(MenuEntryProps{Href: uiutils.Get(vS, "href"), Class: uiutils.Cnv(uiutils.Cnv("flex items-center gap-4 rounded py-2 text-sm", uiutils.Cond(uiutils.T(true), "px-4", "justify-center px-2"), uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vS, "id"), uiutils.Get(vNav, "subCurrent"))), "bg-muted font-medium", ""))), Current: uiutils.Eq(uiutils.Get(vS, "id"), uiutils.Get(vNav, "subCurrent")), Size: "sm", Testid: "item"}) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vS, "icon")), Size: 16})
+									@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cond(uiutils.T(true), "", "sr-only"))}) {
+										{ uiutils.Text(uiutils.Get(vS, "name")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/shell-topbar.templ b/packages/templ/ui/blocks/shell-topbar.templ
new file mode 100644
index 0000000..a7bf219
--- /dev/null
+++ b/packages/templ/ui/blocks/shell-topbar.templ
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/shell-topbar.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ShellTopbarProps are the props of ShellTopbar; the values are the JSON shapes of the TypeScript props.
+type ShellTopbarProps struct {
+	Nav any `json:"nav"`
+	Brand any `json:"brand"`
+	Links any `json:"links"`
+	Search any `json:"search"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar), an optional search field, and the signed-in person.
+templ ShellTopbar(p ShellTopbarProps) {
+	{{ vNav := p.Nav }}
+	{{ vBrand := uiutils.Def(p.Brand, "show") }}
+	{{ vLinks := uiutils.Def(p.Links, "hide") }}
+	{{ vSearch := uiutils.Def(p.Search, "show") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "header", Class: "flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6", Attrs: uiutils.Attrs("data-testid", "topbar", "aria-label", vLandmarkLabel)}) {
+		if uiutils.Eq(vBrand, "show") {
+			@group.Group(group.GroupProps{Gap: "2", Align: "center", Class: "shrink-0", Attrs: uiutils.Attrs("data-testid", "brand")}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "layers", Size: 24})
+				@text.Text(text.TextProps{Size: "base", Weight: "bold", Class: uiutils.S(uiutils.Cond(uiutils.T(true), "", "sr-only"))}) {
+					{ uiutils.Text(uiutils.Get(vNav, "brand")) }
+				}
+			}
+		}
+		if uiutils.T(uiutils.And(uiutils.Eq(vLinks, "show"), uiutils.Gt(uiutils.Len(uiutils.Get(vNav, "links")), float64(0)))) {
+			@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", uiutils.Get(vNav, "label"), vLandmarkLabel)), uiutils.Get(vNav, "label")), Class: uiutils.Cnv("hidden lg:block")}) {
+				@list.List(list.ListProps{Class: "m-0 flex list-none items-center gap-2 p-0"}) {
+					for _, vL := range uiutils.L(uiutils.Get(vNav, "links")) {
+						@list.ListItem(list.ListItemProps{}) {
+							@MenuEntry(MenuEntryProps{Href: uiutils.Get(vL, "href"), Class: uiutils.Cnv(uiutils.Cnv("flex items-center gap-4 rounded py-2 text-sm", uiutils.Cond(uiutils.T(true), "px-4", "justify-center px-2"), uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vL, "id"), uiutils.Get(vNav, "current"))), "bg-muted font-medium", ""))), Current: uiutils.Eq(uiutils.Get(vL, "id"), uiutils.Get(vNav, "current")), Size: "sm", Testid: "item"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vL, "icon")), Size: 16})
+								@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cond(uiutils.T(true), "", "sr-only"))}) {
+									{ uiutils.Text(uiutils.Get(vL, "name")) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+		if uiutils.Eq(vSearch, "show") {
+			if uiutils.Eq(vLinks, "show") {
+				@box.Box(box.BoxProps{Class: "ml-auto hidden w-64 shrink-0 xl:block"}) {
+					@SearchPalette(SearchPaletteProps{Label: uiutils.Get(vNav, "search"), Shortcut: uiutils.Get(vNav, "shortcut")})
+				}
+			} else {
+				@SearchPalette(SearchPaletteProps{Label: uiutils.Get(vNav, "search"), Shortcut: uiutils.Get(vNav, "shortcut")})
+			}
+		}
+		@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.And(uiutils.Eq(vLinks, "show"), uiutils.Eq(vSearch, "show"))), "shrink-0", "ml-auto shrink-0")), Attrs: uiutils.Attrs("data-testid", "user")}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "bell", Size: 20, Class: "text-muted-foreground"})
+			@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vNav, "userName"), Ratio: "1/1", Class: uiutils.Cnv("size-8 shrink-0 rounded-full")})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/shopping-cart.templ b/packages/templ/ui/blocks/shopping-cart.templ
new file mode 100644
index 0000000..5995276
--- /dev/null
+++ b/packages/templ/ui/blocks/shopping-cart.templ
@@ -0,0 +1,92 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/shopping-cart.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ShoppingCartProps are the props of ShoppingCart; the values are the JSON shapes of the TypeScript props.
+type ShoppingCartProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lines any `json:"lines"`
+	Rows any `json:"rows"`
+	Promos any `json:"promos"`
+	Labels any `json:"labels"`
+	Totals any `json:"totals"`
+	Actions any `json:"actions"`
+	Layout any `json:"layout"`
+	Promo any `json:"promo"`
+	Progress any `json:"progress"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.
+templ ShoppingCart(p ShoppingCartProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLines := p.Lines }}
+	{{ vRows := p.Rows }}
+	{{ vPromos := p.Promos }}
+	{{ vLabels := p.Labels }}
+	{{ vTotals := p.Totals }}
+	{{ vActions := p.Actions }}
+	{{ vLayout := uiutils.Def(p.Layout, "split") }}
+	{{ vPromo := uiutils.Def(p.Promo, "show") }}
+	{{ vProgress := uiutils.Def(p.Progress, "show") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+		@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "grid grid-cols-1 items-start gap-8 lg:grid-cols-3", "grid grid-cols-1 gap-8"))}) {
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "lg:col-span-2", "")), Attrs: uiutils.Attrs("data-testid", "lines")}) {
+				if uiutils.Eq(uiutils.Len(vLines), float64(0)) {
+					@EmptyState(EmptyStateProps{Icon: "shopping-cart", Title: uiutils.Get(vActions, "empty")})
+				}
+				for _, vLine := range uiutils.L(vLines) {
+					@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "rounded bg-card inset-ring inset-ring-border flex-wrap p-4", Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vLine, "name"), Ratio: "1/1", Class: uiutils.Cnv("size-20 shrink-0")})
+						@stack.Stack(stack.StackProps{Gap: "0", Class: "min-w-40 flex-1"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vLine, "name")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vLine, "variant")) }
+							}
+							@text.Text(text.TextProps{Size: "sm"}) {
+								{ uiutils.Text(uiutils.Money(uiutils.Get(vLine, "price"), uiutils.Get(vLine, "currency"))) }
+							}
+						}
+						@NumberField(NumberFieldProps{Value: uiutils.Str(uiutils.Get(vLine, "qty")), Name: uiutils.Tpl("{0}-qty-{1}", vId, uiutils.Get(vLine, "id")), Min: "1", Label: uiutils.Get(vLabels, "qty"), Decrease: uiutils.Get(vLabels, "decrease"), Increase: uiutils.Get(vLabels, "increase")})
+						@text.Text(text.TextProps{Size: "base", Weight: "bold", Class: "w-24 text-right"}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Mul(uiutils.Get(vLine, "price"), uiutils.Get(vLine, "qty")), uiutils.Get(vLine, "currency"))) }
+						}
+						@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Layout: "icon", AriaLabel: uiutils.S(uiutils.Get(vLabels, "remove")), Attrs: uiutils.Attrs("data-testid", "remove")}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "trash", Size: 16})
+						}
+					}
+				}
+				@group.Group(group.GroupProps{Gap: "4", Justify: "between", Class: "flex-wrap"}) {
+					@button.Button(button.ButtonProps{Variant: "outline", Size: "default"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "arrow-left", Size: 16})
+						{ uiutils.Text(uiutils.Get(vActions, "back")) }
+					}
+					@button.Button(button.ButtonProps{Variant: "ghost", Size: "default"}) {
+						{ uiutils.Text(uiutils.Get(vActions, "clear")) }
+					}
+				}
+			}
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "lg:sticky lg:top-8", "")), Attrs: uiutils.Attrs("data-testid", "aside")}) {
+				@CartSummaryCard(CartSummaryCardProps{Field: uiutils.Tpl("{0}-promo", vId), Lines: vLines, Rows: vRows, Promos: vPromos, Labels: vTotals, Promo: vPromo, Progress: vProgress})
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/sidebar-nav.templ b/packages/templ/ui/blocks/sidebar-nav.templ
new file mode 100644
index 0000000..be1e1a5
--- /dev/null
+++ b/packages/templ/ui/blocks/sidebar-nav.templ
@@ -0,0 +1,80 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/sidebar-nav.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SidebarNavProps are the props of SidebarNav; the values are the JSON shapes of the TypeScript props.
+type SidebarNavProps struct {
+	Label any `json:"label"`
+	Brand any `json:"brand"`
+	Links any `json:"links"`
+	Current any `json:"current"`
+	UserName any `json:"userName"`
+	UserEmail any `json:"userEmail"`
+	Width any `json:"width"`
+	User any `json:"user"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full: icon and name, compact: icons only with the name hidden), user (show, hide), density.
+templ SidebarNav(p SidebarNavProps) {
+	{{ vLabel := p.Label }}
+	{{ vBrand := p.Brand }}
+	{{ vLinks := p.Links }}
+	{{ vCurrent := uiutils.Def(p.Current, "") }}
+	{{ vUserName := p.UserName }}
+	{{ vUserEmail := p.UserEmail }}
+	{{ vWidth := uiutils.Def(p.Width, "full") }}
+	{{ vUser := uiutils.Def(p.User, "show") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "aside", Class: uiutils.S(uiutils.Cnv("flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border", uiutils.Cond(uiutils.T(uiutils.Eq(vWidth, "compact")), "w-20 items-center", "w-64"))), Attrs: uiutils.Attrs("aria-label", uiutils.Coalesce(vLandmarkLabel, vBrand), "data-testid", "sidebar", "data-width", vWidth)}) {
+		@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+			@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "layers", Size: 24})
+			@text.Text(text.TextProps{Size: "base", Weight: "bold", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vWidth, "compact")), "sr-only", ""))}) {
+				{ uiutils.Text(vBrand) }
+			}
+		}
+		if uiutils.Gt(uiutils.Len(vLinks), float64(0)) {
+			@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", vLabel, vLandmarkLabel)), vLabel), Class: uiutils.Cnv("flex-1")}) {
+				@list.List(list.ListProps{Class: uiutils.S(uiutils.Cnv("m-0 flex list-none flex-col p-0", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "gap-0", "gap-2"))), Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for _, vL := range uiutils.L(vLinks) {
+						@list.ListItem(list.ListItemProps{}) {
+							@MenuEntry(MenuEntryProps{Href: uiutils.Get(vL, "href"), Class: uiutils.Cnv(uiutils.Cnv("flex items-center gap-4 rounded px-4 text-sm", "py-2", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vL, "id"), vCurrent)), "bg-muted font-semibold", ""))), Current: uiutils.Eq(uiutils.Get(vL, "id"), vCurrent), Testid: "item"}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vL, "icon")), Size: 16})
+								@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vWidth, "compact")), "sr-only", ""))}) {
+									{ uiutils.Text(uiutils.Get(vL, "name")) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+		if uiutils.Eq(vUser, "show") {
+			@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "border-t border-border pt-4", Attrs: uiutils.Attrs("data-testid", "user")}) {
+				@MediaFrame(MediaFrameProps{Alt: vUserName, Ratio: "1/1", Class: uiutils.Cnv("size-10 shrink-0 rounded-full")})
+				@stack.Stack(stack.StackProps{Gap: "0", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vWidth, "compact")), "sr-only", "min-w-0"))}) {
+					@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+						{ uiutils.Text(vUserName) }
+					}
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(vUserEmail) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/sidebar-panel.templ b/packages/templ/ui/blocks/sidebar-panel.templ
new file mode 100644
index 0000000..757de30
--- /dev/null
+++ b/packages/templ/ui/blocks/sidebar-panel.templ
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/sidebar-panel.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SidebarPanelProps are the props of SidebarPanel; the values are the JSON shapes of the TypeScript props.
+type SidebarPanelProps struct {
+	Variant any `json:"variant"`
+	LandmarkLabel any `json:"landmarkLabel"`
+	Class string `json:"className"`
+}
+
+// The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer.
+templ SidebarPanel(p SidebarPanelProps) {
+	{{ vVariant := p.Variant }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "aside", Class: uiutils.S(uiutils.Cnv(recipeSidebarPanel.Of(map[string]any{"variant": vVariant}), p.Class)), Attrs: uiutils.Attrs("data-slot", "sidebar-panel", "data-variant", uiutils.Coalesce(vVariant, "chat"), "aria-label", vLandmarkLabel)}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/signup-wizard.templ b/packages/templ/ui/blocks/signup-wizard.templ
new file mode 100644
index 0000000..6010eed
--- /dev/null
+++ b/packages/templ/ui/blocks/signup-wizard.templ
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/signup-wizard.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SignupWizardProps are the props of SignupWizard; the values are the JSON shapes of the TypeScript props.
+type SignupWizardProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Steps any `json:"steps"`
+	Labels any `json:"labels"`
+	Current any `json:"current"`
+	Level any `json:"level"`
+	Progress any `json:"progress"`
+	Layout any `json:"layout"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown, counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values between steps is the page's job.
+templ SignupWizard(p SignupWizardProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vSteps := p.Steps }}
+	{{ vLabels := p.Labels }}
+	{{ vCurrent := uiutils.Def(p.Current, float64(1)) }}
+	{{ vLevel := uiutils.Def(p.Level, float64(2)) }}
+	{{ vProgress := uiutils.Def(p.Progress, "bar") }}
+	{{ vLayout := uiutils.Def(p.Layout, "card") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Gt(uiutils.Len(vSteps), float64(0)) {
+		@block.Block(block.BlockProps{Tag: "section", Class: uiutils.S(uiutils.Cnv("mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "card")), "rounded bg-card p-6 inset-ring inset-ring-border", ""))), Attrs: uiutils.Attrs("aria-labelledby", uiutils.Cond(uiutils.T(vLandmarkLabel), nil, uiutils.Tpl("{0}-title", vId)), "data-testid", "wizard", "data-current", uiutils.Str(vCurrent), "aria-label", vLandmarkLabel)}) {
+			@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(vLevel)), Size: "2xl", Weight: "bold", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-title", vId))}) {
+				{ uiutils.Text(vTitle) }
+			}
+			@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "step-of")}) {
+				{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "stepOf"), vCurrent, uiutils.Len(vSteps))) }
+			}
+			if uiutils.Eq(vProgress, "bar") {
+				@form.Progress(form.ProgressProps{Value: uiutils.S(uiutils.Str(vCurrent)), Max: uiutils.S(uiutils.Str(uiutils.Len(vSteps))), Attrs: uiutils.Attrs("aria-label", uiutils.Get(vLabels, "steps"))})
+			}
+			if uiutils.Eq(vProgress, "list") {
+				@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0", Attrs: uiutils.Attrs("aria-label", uiutils.Get(vLabels, "steps"), "data-testid", "step-list")}) {
+					for vI, vS := range uiutils.L(vSteps) {
+						@list.ListItem(list.ListItemProps{Class: uiutils.S(uiutils.Cnv("flex items-center gap-4 text-sm", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Add(float64(vI), float64(1)), vCurrent)), "font-semibold", "text-muted-foreground"))), Attrs: uiutils.Attrs("aria-current", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Add(float64(vI), float64(1)), vCurrent)), "step", nil), "data-testid", "step-item")}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Lt(uiutils.Add(float64(vI), float64(1)), vCurrent)), "circle-check", uiutils.Get(vS, "icon"))), Size: 16})
+							{ uiutils.Text(uiutils.Get(vS, "title")) }
+						}
+					}
+				}
+			}
+			for vI, vS := range uiutils.L(vSteps) {
+				if uiutils.Eq(uiutils.Add(float64(vI), float64(1)), vCurrent) {
+					@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "step")}) {
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "title")) }
+						}
+						@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vS, "text")) }
+						}
+						@box.Box(box.BoxProps{Class: "grid gap-4"}) {
+							@Field(FieldProps{Label: uiutils.Get(vS, "fieldA"), HtmlFor: uiutils.Tpl("{0}-a", vId)}) {
+								@input.Input(input.InputProps{Type: "text", Name: uiutils.S(uiutils.Tpl("{0}-a", vId)), Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-a", vId), "data-testid", "field")})
+							}
+							@Field(FieldProps{Label: uiutils.Get(vS, "fieldB"), HtmlFor: uiutils.Tpl("{0}-b", vId)}) {
+								@input.Input(input.InputProps{Type: "text", Name: uiutils.S(uiutils.Tpl("{0}-b", vId)), Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-b", vId), "data-testid", "field")})
+							}
+						}
+					}
+				}
+			}
+			@group.Group(group.GroupProps{Gap: "2", Justify: "between"}) {
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Type: "button", Disabled: uiutils.T(uiutils.Lt(vCurrent, float64(2))), Attrs: uiutils.Attrs("data-testid", "wizard-back")}) {
+					{ uiutils.Text(uiutils.Get(vLabels, "back")) }
+				}
+				@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "button", Attrs: uiutils.Attrs("data-testid", "wizard-next")}) {
+					{ uiutils.Text(uiutils.Cond(uiutils.T(uiutils.Ge(vCurrent, uiutils.Len(vSteps))), uiutils.Get(vLabels, "finish"), uiutils.Get(vLabels, "next"))) }
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/site-footer.templ b/packages/templ/ui/blocks/site-footer.templ
new file mode 100644
index 0000000..36c87e3
--- /dev/null
+++ b/packages/templ/ui/blocks/site-footer.templ
@@ -0,0 +1,47 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/site-footer.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SiteFooterProps are the props of SiteFooter; the values are the JSON shapes of the TypeScript props.
+type SiteFooterProps struct {
+	Labels any `json:"labels"`
+	Routes any `json:"routes"`
+	Layout any `json:"layout"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density (default, compact).
+templ SiteFooter(p SiteFooterProps) {
+	{{ vLabels := p.Labels }}
+	{{ vRoutes := p.Routes }}
+	{{ vLayout := uiutils.Def(p.Layout, "minimal") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "footer", Class: "mt-12 border-t border-border", Attrs: uiutils.Attrs("data-testid", "site-footer", "data-layout", vLayout, "aria-label", vLandmarkLabel)}) {
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "flex flex-wrap items-center gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-4", "py-6"), uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "centered")), "flex-col text-center", "justify-between"))), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground", Attrs: uiutils.Attrs("data-testid", "copyright")}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "copyright")) }
+			}
+			@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", uiutils.Get(vLabels, "nav"), vLandmarkLabel)), uiutils.Get(vLabels, "nav"))}) {
+				@group.Group(group.GroupProps{Gap: "4"}) {
+					@MenuEntry(MenuEntryProps{Href: uiutils.Get(vRoutes, "home"), Class: uiutils.Cnv("font-semibold")}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "home")) }
+					}
+					@MenuEntry(MenuEntryProps{Href: uiutils.Get(vRoutes, "pricing"), Class: uiutils.Cnv("font-semibold")}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "pricing")) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/site-header.templ b/packages/templ/ui/blocks/site-header.templ
new file mode 100644
index 0000000..98e0d91
--- /dev/null
+++ b/packages/templ/ui/blocks/site-header.templ
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/site-header.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	linkplain "github.com/ui8kit/codegen/packages/templ/ui/ui/link-plain"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SiteHeaderProps are the props of SiteHeader; the values are the JSON shapes of the TypeScript props.
+type SiteHeaderProps struct {
+	Labels any `json:"labels"`
+	Routes any `json:"routes"`
+	Current any `json:"current"`
+	Layout any `json:"layout"`
+	Position any `json:"position"`
+	Actions any `json:"actions"`
+	Cta any `json:"cta"`
+	CtaHref any `json:"ctaHref"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The page header: a skip link to the main content, the brand, the two navigation links (the current one carries aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position (static, sticky), actions (none, cta).
+templ SiteHeader(p SiteHeaderProps) {
+	{{ vLabels := p.Labels }}
+	{{ vRoutes := p.Routes }}
+	{{ vCurrent := p.Current }}
+	{{ vLayout := uiutils.Def(p.Layout, "inline") }}
+	{{ vPosition := uiutils.Def(p.Position, "static") }}
+	{{ vActions := uiutils.Def(p.Actions, "none") }}
+	{{ vCta := p.Cta }}
+	{{ vCtaHref := p.CtaHref }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@block.Block(block.BlockProps{Tag: "header", Class: uiutils.S(uiutils.Cnv("border-b border-border bg-background", uiutils.Cond(uiutils.T(uiutils.Eq(vPosition, "sticky")), "sticky top-0 z-40", ""))), Attrs: uiutils.Attrs("data-testid", "site-header", "data-layout", vLayout, "aria-label", vLandmarkLabel)}) {
+		@linkplain.LinkPlain(linkplain.LinkPlainProps{Href: "#main-content", Class: "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border", Attrs: uiutils.Attrs("data-testid", "skip-link")}) {
+			{ uiutils.Text(uiutils.Get(vLabels, "skip")) }
+		}
+		@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "flex flex-wrap gap-4 py-4", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "stacked")), "flex-col items-center", "items-center justify-between"))), Attrs: uiutils.Attrs("data-slot", "container")}) {
+			@MenuEntry(MenuEntryProps{Href: uiutils.Get(vRoutes, "home"), Class: uiutils.Cnv("text-lg font-medium"), Testid: "brand"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "brand")) }
+			}
+			@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", uiutils.Get(vLabels, "nav"), vLandmarkLabel)), uiutils.Get(vLabels, "nav")), Testid: "site-nav"}) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+					@MenuEntry(MenuEntryProps{Href: uiutils.Get(vRoutes, "home"), Class: uiutils.Cnv("font-semibold"), Current: uiutils.Eq(vCurrent, "home"), Testid: "nav-link"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "home")) }
+					}
+					@MenuEntry(MenuEntryProps{Href: uiutils.Get(vRoutes, "pricing"), Class: uiutils.Cnv("font-semibold"), Current: uiutils.Eq(vCurrent, "pricing"), Testid: "nav-link"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "pricing")) }
+					}
+				}
+			}
+			@group.Group(group.GroupProps{Gap: "4", Align: "center"}) {
+				@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Attrs: uiutils.Attrs("data-testid", "theme-toggle")}) {
+					{ uiutils.Text(uiutils.Get(vLabels, "theme")) }
+				}
+				if uiutils.T(uiutils.And(uiutils.Eq(vActions, "cta"), vCta)) {
+					@button.Button(button.ButtonProps{Variant: "default", Size: "sm", Href: uiutils.S(vCtaHref), Attrs: uiutils.Attrs("data-testid", "header-cta")}) {
+						{ uiutils.Text(vCta) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/sitemap-footer.templ b/packages/templ/ui/blocks/sitemap-footer.templ
new file mode 100644
index 0000000..ccaed39
--- /dev/null
+++ b/packages/templ/ui/blocks/sitemap-footer.templ
@@ -0,0 +1,117 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/sitemap-footer.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SitemapFooterProps are the props of SitemapFooter; the values are the JSON shapes of the TypeScript props.
+type SitemapFooterProps struct {
+	Label any `json:"label"`
+	Brand any `json:"brand"`
+	Tagline any `json:"tagline"`
+	Copyright any `json:"copyright"`
+	Groups any `json:"groups"`
+	Signup any `json:"signup"`
+	Status any `json:"status"`
+	Id any `json:"id"`
+	Layout any `json:"layout"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above, equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none, first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status itself is a port contract.
+templ SitemapFooter(p SitemapFooterProps) {
+	{{ vLabel := p.Label }}
+	{{ vBrand := p.Brand }}
+	{{ vTagline := p.Tagline }}
+	{{ vCopyright := p.Copyright }}
+	{{ vGroups := p.Groups }}
+	{{ vSignup := p.Signup }}
+	{{ vStatus := p.Status }}
+	{{ vId := uiutils.Def(p.Id, "footer") }}
+	{{ vLayout := uiutils.Def(p.Layout, "columns") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Eq(vLayout, "card") {
+		@FooterCard(FooterCardProps{Label: vLabel, Brand: vBrand, Groups: vGroups, LandmarkLabel: vLandmarkLabel})
+	} else {
+		@block.Block(block.BlockProps{Tag: "footer", Class: "mt-12 border-t border-border", Attrs: uiutils.Attrs("data-testid", "site-footer", "data-layout", vLayout, "aria-label", vLandmarkLabel)}) {
+			@container.Container(container.ContainerProps{Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-6xl px-4", "flex flex-col gap-8", uiutils.Cond(uiutils.T(uiutils.Eq(vDensity, "compact")), "py-6", "py-12"))), Attrs: uiutils.Attrs("data-slot", "container")}) {
+				if uiutils.Eq(uiutils.Get(vSignup, "mode"), "first") {
+					@stack.Stack(stack.StackProps{Gap: "4", Class: "max-w-md", Attrs: uiutils.Attrs("data-testid", "signup")}) {
+						@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Get(vSignup, "title")) }
+						}
+						@form.Form(form.FormProps{Method: "dialog", Class: uiutils.S(uiutils.Cnv("w-full max-w-md", uiutils.Cond(uiutils.T(false), "mx-auto", ""))), Attrs: uiutils.Attrs("data-testid", "email-form")}) {
+							@label.Label(label.LabelProps{HTMLFor: uiutils.S(uiutils.Tpl("{0}-email", vId)), Class: "sr-only"}) {
+								{ uiutils.Text(uiutils.Get(vSignup, "label")) }
+							}
+							@group.Group(group.GroupProps{Gap: "2", Align: "start", Class: "w-full flex-wrap"}) {
+								@input.Input(input.InputProps{Type: "email", Name: "email", Class: "min-w-0 flex-1", Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-email", vId), "data-testid", "field")})
+								@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "submit", Attrs: uiutils.Attrs("data-testid", "submit")}) {
+									{ uiutils.Text(uiutils.Get(vSignup, "submit")) }
+								}
+							}
+						}
+					}
+				}
+				if uiutils.Eq(vLayout, "columns") {
+					@box.Box(box.BoxProps{Class: "flex flex-col gap-8 md:flex-row md:items-start md:gap-12", Attrs: uiutils.Attrs("data-slot", "footer-top")}) {
+						@stack.Stack(stack.StackProps{Gap: "2", Class: "md:w-64 md:shrink-0"}) {
+							@text.Text(text.TextProps{Size: "xl", Weight: "bold"}) {
+								{ uiutils.Text(vBrand) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(vTagline) }
+							}
+						}
+						@box.Box(box.BoxProps{Class: "min-w-0 flex-1"}) {
+							@FooterColumns(FooterColumnsProps{Label: vLabel, Groups: vGroups, LandmarkLabel: vLandmarkLabel})
+						}
+					}
+				} else {
+					@group.Group(group.GroupProps{Gap: "6", Align: "center", Justify: "between", Class: "flex-wrap"}) {
+						@text.Text(text.TextProps{Size: "base", Weight: "bold"}) {
+							{ uiutils.Text(vBrand) }
+						}
+						if uiutils.Gt(uiutils.Len(vGroups), float64(0)) {
+							@NavBlock(NavBlockProps{Label: uiutils.Cond(uiutils.T(vLandmarkLabel), uiutils.Uniq(uiutils.Tpl("{0}, {1}", vLabel, vLandmarkLabel)), vLabel)}) {
+								@group.Group(group.GroupProps{Gap: "4", Class: "flex-wrap"}) {
+									for _, vG := range uiutils.L(vGroups) {
+										@MenuEntry(MenuEntryProps{Href: uiutils.Get(vG, "href"), Class: uiutils.Cnv("text-sm"), Testid: "group"}) {
+											{ uiutils.Text(uiutils.Get(vG, "title")) }
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+				@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between", Class: "flex-wrap border-t border-border pt-6"}) {
+					@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(vCopyright) }
+					}
+					if uiutils.Eq(uiutils.Get(vStatus, "mode"), "show") {
+						@Pill(PillProps{Tone: "green", Icon: "circle-check"}) {
+							{ uiutils.Text(uiutils.Get(vStatus, "label")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/skeleton-layout.templ b/packages/templ/ui/blocks/skeleton-layout.templ
new file mode 100644
index 0000000..3d148d0
--- /dev/null
+++ b/packages/templ/ui/blocks/skeleton-layout.templ
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/skeleton-layout.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/skeleton"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SkeletonLayoutProps are the props of SkeletonLayout; the values are the JSON shapes of the TypeScript props.
+type SkeletonLayoutProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Label any `json:"label"`
+	Lines any `json:"lines"`
+	Shape any `json:"shape"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content is loading. The shimmer itself belongs to the Skeleton part.
+templ SkeletonLayout(p SkeletonLayoutProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLabel := p.Label }}
+	{{ vLines := p.Lines }}
+	{{ vShape := uiutils.Def(p.Shape, "cards") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+		@block.Block(block.BlockProps{Tag: "div", Class: "w-full", Attrs: uiutils.Attrs("role", "status", "aria-label", vLabel, "data-testid", "skeleton", "data-shape", vShape)}) {
+			if uiutils.Eq(vShape, "cards") {
+				@grid.Grid(grid.GridProps{Cols: "1-3", Class: "gap-4"}) {
+					for range uiutils.L(vLines) {
+						@stack.Stack(stack.StackProps{Gap: "4", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@skeleton.Skeleton(skeleton.SkeletonProps{Class: "aspect-video w-full"})
+							@skeleton.Skeleton(skeleton.SkeletonProps{Class: "h-4 w-2/3"})
+							@skeleton.Skeleton(skeleton.SkeletonProps{Class: "h-4 w-full"})
+						}
+					}
+				}
+			} else if uiutils.Eq(vShape, "list") {
+				@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+					for range uiutils.L(vLines) {
+						@group.Group(group.GroupProps{Gap: "4", Align: "center", Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@skeleton.Skeleton(skeleton.SkeletonProps{Class: "size-10 shrink-0 rounded-full"})
+							@stack.Stack(stack.StackProps{Gap: "2", Class: "flex-1"}) {
+								@skeleton.Skeleton(skeleton.SkeletonProps{Class: "h-4 w-1/3"})
+								@skeleton.Skeleton(skeleton.SkeletonProps{Class: "h-4 w-full"})
+							}
+						}
+					}
+				}
+			} else {
+				@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "mx-auto max-w-2xl"}) {
+					@skeleton.Skeleton(skeleton.SkeletonProps{Class: "h-8 w-3/4"})
+					for range uiutils.L(vLines) {
+						@stack.Stack(stack.StackProps{Gap: "2", Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@skeleton.Skeleton(skeleton.SkeletonProps{Class: "h-4 w-full"})
+							@skeleton.Skeleton(skeleton.SkeletonProps{Class: "h-4 w-5/6"})
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/slot-board.templ b/packages/templ/ui/blocks/slot-board.templ
new file mode 100644
index 0000000..6e51236
--- /dev/null
+++ b/packages/templ/ui/blocks/slot-board.templ
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/slot-board.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	selectfield "github.com/ui8kit/codegen/packages/templ/ui/ui/select"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SlotBoardProps are the props of SlotBoard; the values are the JSON shapes of the TypeScript props.
+type SlotBoardProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Days any `json:"days"`
+	Empty any `json:"empty"`
+	Zone any `json:"zone"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Item any `json:"item"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item (card, plain), tone.
+templ SlotBoard(p SlotBoardProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vDays := p.Days }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vZone := p.Zone }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "split") }}
+	{{ vItem := uiutils.Def(p.Item, "card") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vDays), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "calendar", Title: vEmpty})
+		} else {
+			@box.Box(box.BoxProps{Class: "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"}) {
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "split")), "lg:col-span-2", "lg:col-span-3"))}) {
+					@SlotGrid(SlotGridProps{Days: vDays, Name: uiutils.Tpl("{0}-slot", vId), Item: vItem})
+				}
+				if uiutils.Eq(vLayout, "split") {
+					@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "rounded bg-card inset-ring inset-ring-border p-6", Attrs: uiutils.Attrs("data-testid", "aside")}) {
+						@Field(FieldProps{Label: uiutils.Get(vLabels, "zone"), HtmlFor: uiutils.Tpl("{0}-zone", vId)}) {
+							@selectfield.Select(selectfield.SelectProps{Name: uiutils.S(uiutils.Tpl("{0}-zone", vId)), Attrs: uiutils.Attrs("id", uiutils.Tpl("{0}-zone", vId))}) {
+								@selectfield.SelectOption(selectfield.SelectOptionProps{Value: uiutils.S(uiutils.Get(vZone, "id")), Label: uiutils.S(uiutils.Get(vZone, "name")), Selected: true})
+							}
+						}
+						@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col gap-2"}) {
+							@list.ListItem(list.ListItemProps{Class: "flex items-center justify-between gap-4 text-sm"}) {
+								@inline.Inline(inline.InlineProps{Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vLabels, "price")) }
+								}
+								@inline.Inline(inline.InlineProps{Class: "font-medium"}) {
+									{ uiutils.Text(uiutils.Money(uiutils.Get(vZone, "price"), uiutils.Get(vZone, "currency"))) }
+								}
+							}
+							@list.ListItem(list.ListItemProps{Class: "flex items-center justify-between gap-4 text-sm"}) {
+								@inline.Inline(inline.InlineProps{Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vLabels, "freeFrom")) }
+								}
+								@inline.Inline(inline.InlineProps{Class: "font-medium"}) {
+									{ uiutils.Text(uiutils.Money(uiutils.Get(vZone, "freeFrom"), uiutils.Get(vZone, "currency"))) }
+								}
+							}
+							@list.ListItem(list.ListItemProps{Class: "flex items-center justify-between gap-4 text-sm"}) {
+								@inline.Inline(inline.InlineProps{Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vLabels, "time")) }
+								}
+								@inline.Inline(inline.InlineProps{Class: "font-medium"}) {
+									{ uiutils.Text(uiutils.Get(vZone, "time")) }
+								}
+							}
+						}
+						@button.Button(button.ButtonProps{Variant: "default", Size: "default", Class: "w-full"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "primary")) }
+						}
+						@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Class: "w-full"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "secondary")) }
+						}
+						@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+							{ uiutils.Text(uiutils.Get(vLabels, "note")) }
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/slot-grid.templ b/packages/templ/ui/blocks/slot-grid.templ
new file mode 100644
index 0000000..e3bb71d
--- /dev/null
+++ b/packages/templ/ui/blocks/slot-grid.templ
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/slot-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/radio"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SlotGridProps are the props of SlotGrid; the values are the JSON shapes of the TypeScript props.
+type SlotGridProps struct {
+	Days any `json:"days"`
+	Name any `json:"name"`
+	Item any `json:"item"`
+}
+
+// Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck through. One radio group (`name`) across all days. Static markup.
+templ SlotGrid(p SlotGridProps) {
+	{{ vDays := p.Days }}
+	{{ vName := p.Name }}
+	{{ vItem := uiutils.Def(p.Item, "card") }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "days")}) {
+		for _, vD := range uiutils.L(vDays) {
+			@stack.Stack(stack.StackProps{Gap: "4", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vItem, "card")), "rounded bg-card inset-ring inset-ring-border p-4", "border-b border-border pb-4")), Attrs: uiutils.Attrs("data-testid", "day")}) {
+				@group.Group(group.GroupProps{Gap: "4", Align: "baseline", Justify: "between", Class: "flex-wrap"}) {
+					@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+						{ uiutils.Text(uiutils.Get(vD, "title")) }
+					}
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vD, "note")) }
+					}
+				}
+				@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-2 sm:grid-cols-3"}) {
+					for _, vS := range uiutils.L(uiutils.Get(vD, "slots")) {
+						@label.Label(label.LabelProps{Class: "flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground"}) {
+							@radio.Radio(radio.RadioProps{Name: uiutils.S(vName), Value: uiutils.S(uiutils.Tpl("{0} {1}", uiutils.Get(vD, "id"), vS))})
+							@inline.Inline(inline.InlineProps{}) {
+								{ uiutils.Text(vS) }
+							}
+						}
+					}
+					for _, vS := range uiutils.L(uiutils.Get(vD, "closed")) {
+						@label.Label(label.LabelProps{Class: uiutils.S(uiutils.Cnv("flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground", "text-muted-foreground line-through"))}) {
+							@radio.Radio(radio.RadioProps{Name: uiutils.S(vName), Value: uiutils.S(uiutils.Tpl("{0} {1}", uiutils.Get(vD, "id"), vS)), Disabled: true})
+							@inline.Inline(inline.InlineProps{}) {
+								{ uiutils.Text(vS) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/stat-figure.templ b/packages/templ/ui/blocks/stat-figure.templ
new file mode 100644
index 0000000..9a31fd0
--- /dev/null
+++ b/packages/templ/ui/blocks/stat-figure.templ
@@ -0,0 +1,42 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/stat-figure.json
+
+package blocks
+
+import (
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StatFigureProps are the props of StatFigure; the values are the JSON shapes of the TypeScript props.
+type StatFigureProps struct {
+	Stat any `json:"stat"`
+	Item any `json:"item"`
+	Align any `json:"align"`
+}
+
+// One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon.
+templ StatFigure(p StatFigureProps) {
+	{{ vStat := p.Stat }}
+	{{ vItem := uiutils.Def(p.Item, "plain") }}
+	{{ vAlign := uiutils.Def(p.Align, "center") }}
+	if uiutils.Eq(vItem, "card") {
+		@StatTile(StatTileProps{Label: uiutils.Get(vStat, "label"), Value: uiutils.Get(vStat, "value"), Icon: uiutils.Get(vStat, "icon"), Hint: uiutils.Get(vStat, "hint")})
+	} else {
+		@stack.Stack(stack.StackProps{Gap: "6", Align: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vAlign, "center")), "center", "start")), Class: uiutils.S(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vAlign, "center")), "text-center", ""), uiutils.Get(presetDefaults, "stats", "column"))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+			if uiutils.Eq(vItem, "icon") {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vStat, "icon")), Size: 24})
+			}
+			@stack.Stack(stack.StackProps{Gap: "2", Align: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vAlign, "center")), "center", "start"))}) {
+				@text.Text(text.TextProps{Size: "5xl", Weight: "medium", Class: uiutils.S(uiutils.Cnv("flex items-center", uiutils.Get(presetDefaults, "stats", "figure")))}) {
+					{ uiutils.Text(uiutils.Get(vStat, "value")) }
+				}
+				@text.Text(text.TextProps{Size: "sm", Weight: "semibold", Class: "leading-5 text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vStat, "label")) }
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/stat-tile.templ b/packages/templ/ui/blocks/stat-tile.templ
new file mode 100644
index 0000000..118a09c
--- /dev/null
+++ b/packages/templ/ui/blocks/stat-tile.templ
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/stat-tile.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/iconbadge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StatTileProps are the props of StatTile; the values are the JSON shapes of the TypeScript props.
+type StatTileProps struct {
+	Label any `json:"label"`
+	Value any `json:"value"`
+	Icon any `json:"icon"`
+	Href any `json:"href"`
+	Hint any `json:"hint"`
+}
+
+// A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the tile is a plain figure.
+templ StatTile(p StatTileProps) {
+	{{ vLabel := p.Label }}
+	{{ vValue := p.Value }}
+	{{ vIcon := p.Icon }}
+	{{ vHref := p.Href }}
+	{{ vHint := p.Hint }}
+	@box.Box(box.BoxProps{Class: "min-w-0"}) {
+		if uiutils.T(vHref) {
+			@link.Link(link.LinkProps{Href: uiutils.S(vHref), Variant: "block", Class: "flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border hover:bg-muted"}) {
+				@box.Box(box.BoxProps{Class: "flex items-center justify-between gap-2"}) {
+					@text.Text(text.TextProps{Class: "m-0 text-xs font-bold text-muted-foreground"}) {
+						{ uiutils.Text(vLabel) }
+					}
+					@iconbadge.IconBadge(iconbadge.IconBadgeProps{Size: "sm"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(vIcon), Size: 16})
+					}
+				}
+				@text.Text(text.TextProps{Size: "2xl", Weight: "bold", Class: "m-0 leading-8"}) {
+					{ uiutils.Text(vValue) }
+				}
+				if uiutils.T(vHint) {
+					@text.Text(text.TextProps{Class: "m-0 text-xs font-medium text-muted-foreground"}) {
+						{ uiutils.Text(vHint) }
+					}
+				}
+			}
+		} else {
+			@box.Box(box.BoxProps{Class: "flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border"}) {
+				@box.Box(box.BoxProps{Class: "flex items-center justify-between gap-2"}) {
+					@text.Text(text.TextProps{Class: "m-0 text-xs font-bold text-muted-foreground"}) {
+						{ uiutils.Text(vLabel) }
+					}
+					@iconbadge.IconBadge(iconbadge.IconBadgeProps{Size: "sm"}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(vIcon), Size: 16})
+					}
+				}
+				@text.Text(text.TextProps{Size: "2xl", Weight: "bold", Class: "m-0 leading-8"}) {
+					{ uiutils.Text(vValue) }
+				}
+				if uiutils.T(vHint) {
+					@text.Text(text.TextProps{Class: "m-0 text-xs font-medium text-muted-foreground"}) {
+						{ uiutils.Text(vHint) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/stats-band.templ b/packages/templ/ui/blocks/stats-band.templ
new file mode 100644
index 0000000..06661cd
--- /dev/null
+++ b/packages/templ/ui/blocks/stats-band.templ
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/stats-band.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StatsBandProps are the props of StatsBand; the values are the JSON shapes of the TypeScript props.
+type StatsBandProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Stats any `json:"stats"`
+	Empty any `json:"empty"`
+	Cols any `json:"cols"`
+	Layout any `json:"layout"`
+	Surface any `json:"surface"`
+	Item any `json:"item"`
+	Align any `json:"align"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3, 4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may be empty.
+templ StatsBand(p StatsBandProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := uiutils.Def(p.Title, "") }}
+	{{ vStats := p.Stats }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vCols := uiutils.Def(p.Cols, "4") }}
+	{{ vLayout := uiutils.Def(p.Layout, "row") }}
+	{{ vSurface := uiutils.Def(p.Surface, "none") }}
+	{{ vItem := uiutils.Def(p.Item, "plain") }}
+	{{ vAlign := uiutils.Def(p.Align, "center") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Align: vAlign, Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vSurface, "panel")), "fill", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "stack")), "xs", "default")), Class: uiutils.Cnv(uiutils.Cnv(uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq(vSurface, "image")), "bg-transparent", ""), uiutils.Cond(uiutils.T(uiutils.Eq(vSurface, "panel")), "py-0", "")), uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Cond(uiutils.T(uiutils.Eq(vSurface, "image")), "image", "none"), "image")), "relative isolate overflow-hidden", ""))), LandmarkLabel: vLandmarkLabel}) {
+		@Backdrop(BackdropProps{Kind: uiutils.Cond(uiutils.T(uiutils.Eq(vSurface, "image")), "image", "none"), Alt: vTitle})
+		if uiutils.Eq(uiutils.Len(vStats), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "chart-column", Title: vEmpty})
+		} else if uiutils.Eq(vSurface, "panel") {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "2", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "3")), "2-3", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "4")), "2-4", "3-6")))), Class: uiutils.S(uiutils.Cnv("w-full items-center bg-muted px-6", uiutils.Get(presetDefaults, "stats", "panel"))), Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vStat := range uiutils.L(vStats) {
+					@StatFigure(StatFigureProps{Stat: vStat, Item: vItem, Align: vAlign})
+				}
+			}
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "stack")), "1", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "2")), "2", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "3")), "2-3", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "4")), "2-4", "3-6"))))), Class: "gap-6", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vStat := range uiutils.L(vStats) {
+					@StatFigure(StatFigureProps{Stat: vStat, Item: vItem, Align: vAlign})
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/stepper.templ b/packages/templ/ui/blocks/stepper.templ
new file mode 100644
index 0000000..ddd0cc3
--- /dev/null
+++ b/packages/templ/ui/blocks/stepper.templ
@@ -0,0 +1,96 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/stepper.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/iconbadge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StepperProps are the props of Stepper; the values are the JSON shapes of the TypeScript props.
+type StepperProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Steps any `json:"steps"`
+	Current any `json:"current"`
+	StepLabel any `json:"stepLabel"`
+	Back any `json:"back"`
+	Next any `json:"next"`
+	Layout any `json:"layout"`
+	Marker any `json:"marker"`
+	Summary any `json:"summary"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A multi-step form header: the steps with the current one marked (aria-current step), and the current step's text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show, hide).
+templ Stepper(p StepperProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vSteps := p.Steps }}
+	{{ vCurrent := uiutils.Def(p.Current, float64(2)) }}
+	{{ vStepLabel := p.StepLabel }}
+	{{ vBack := p.Back }}
+	{{ vNext := p.Next }}
+	{{ vLayout := uiutils.Def(p.Layout, "horizontal") }}
+	{{ vMarker := uiutils.Def(p.Marker, "number") }}
+	{{ vSummary := uiutils.Def(p.Summary, "show") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Measure: "3xl", LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Gt(uiutils.Len(vSteps), float64(0)) {
+			@stack.Stack(stack.StackProps{Gap: "6", Align: "stretch", Attrs: uiutils.Attrs("data-testid", "stepper")}) {
+				@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Tpl(vStepLabel, vCurrent, uiutils.Len(vSteps))) }
+				}
+				@list.List(list.ListProps{Tag: "ol", Class: uiutils.S(uiutils.Cnv("m-0 flex list-none gap-4 p-0", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "vertical")), "flex-col", "flex-col sm:flex-row"))), Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for vI, vS := range uiutils.L(vSteps) {
+						@list.ListItem(list.ListItemProps{Class: "flex flex-1 items-center gap-4", Attrs: uiutils.Attrs("data-testid", "item", "aria-current", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Add(float64(vI), float64(1)), vCurrent)), "step", nil))}) {
+							@iconbadge.IconBadge(iconbadge.IconBadgeProps{Variant: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Lt(uiutils.Add(float64(vI), float64(1)), uiutils.Add(vCurrent, float64(1)))), "primary", "outline")), Size: "sm", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Lt(uiutils.Add(float64(vI), float64(1)), uiutils.Add(vCurrent, float64(1)))), "text-sm", "text-sm text-muted-foreground"))}) {
+								if uiutils.Eq(vMarker, "icon") {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vS, "icon")), Size: 16})
+								} else {
+									@inline.Inline(inline.InlineProps{Class: "text-sm font-bold"}) {
+										{ uiutils.Text(uiutils.Str(uiutils.Add(float64(vI), float64(1)))) }
+									}
+								}
+							}
+							@text.Text(text.TextProps{Size: "sm", Weight: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Add(float64(vI), float64(1)), vCurrent)), "bold", "semibold"))}) {
+								{ uiutils.Text(uiutils.Get(vS, "title")) }
+							}
+						}
+					}
+				}
+				if uiutils.Eq(vSummary, "show") {
+					for vI, vS := range uiutils.L(vSteps) {
+						if uiutils.Eq(uiutils.Add(float64(vI), float64(1)), vCurrent) {
+							@stack.Stack(stack.StackProps{Gap: "2", Class: "rounded bg-card p-6 inset-ring inset-ring-border", Attrs: uiutils.Attrs("data-testid", "step-summary")}) {
+								@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+									{ uiutils.Text(uiutils.Get(vS, "title")) }
+								}
+								@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vS, "text")) }
+								}
+								@group.Group(group.GroupProps{Gap: "2", Class: "pt-2"}) {
+									@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Type: "button"}) {
+										{ uiutils.Text(vBack) }
+									}
+									@button.Button(button.ButtonProps{Variant: "default", Size: "sm", Type: "button"}) {
+										{ uiutils.Text(vNext) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/steps-list.templ b/packages/templ/ui/blocks/steps-list.templ
new file mode 100644
index 0000000..0d4c46c
--- /dev/null
+++ b/packages/templ/ui/blocks/steps-list.templ
@@ -0,0 +1,72 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/steps-list.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/iconbadge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StepsListProps are the props of StepsList; the values are the JSON shapes of the TypeScript props.
+type StepsListProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Steps any `json:"steps"`
+	Empty any `json:"empty"`
+	Layout any `json:"layout"`
+	Marker any `json:"marker"`
+	Align any `json:"align"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon), align, density, tone.
+templ StepsList(p StepsListProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vSteps := p.Steps }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLayout := uiutils.Def(p.Layout, "row") }}
+	{{ vMarker := uiutils.Def(p.Marker, "number") }}
+	{{ vAlign := uiutils.Def(p.Align, "start") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Align: vAlign, Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "row")), "default", "2xl"), LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vSteps), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "list-ordered", Title: vEmpty})
+		} else {
+			@list.List(list.ListProps{Tag: "ol", Class: uiutils.S(uiutils.Cnv("grid gap-6", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "row")), "sm:grid-cols-2 md:grid-cols-4", ""))), Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for vI, vStep := range uiutils.L(vSteps) {
+					@list.ListItem(list.ListItemProps{Class: uiutils.S(uiutils.Cnv("flex gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "row")), "flex-col", ""), uiutils.Cond(uiutils.T(uiutils.Eq(vAlign, "center")), "items-center text-center", ""))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@iconbadge.IconBadge(iconbadge.IconBadgeProps{Variant: "primary", Attrs: uiutils.Attrs("data-slot", "marker")}) {
+							if uiutils.Eq(vMarker, "icon") {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vStep, "icon")), Size: 20})
+							} else {
+								@inline.Inline(inline.InlineProps{Class: "text-base font-bold"}) {
+									{ uiutils.Text(uiutils.Str(uiutils.Add(float64(vI), float64(1)))) }
+								}
+							}
+						}
+						@stack.Stack(stack.StackProps{Gap: "2", Align: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vAlign, "center")), "center", "start"))}) {
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vStep, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vStep, "text")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/store-hero.templ b/packages/templ/ui/blocks/store-hero.templ
new file mode 100644
index 0000000..c9bfae1
--- /dev/null
+++ b/packages/templ/ui/blocks/store-hero.templ
@@ -0,0 +1,102 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/store-hero.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StoreHeroProps are the props of StoreHero; the values are the JSON shapes of the TypeScript props.
+type StoreHeroProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Level any `json:"level"`
+	Actions any `json:"actions"`
+	Perks any `json:"perks"`
+	Card any `json:"card"`
+	Layout any `json:"layout"`
+	MediaSide any `json:"mediaSide"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.
+templ StoreHero(p StoreHeroProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	{{ vActions := p.Actions }}
+	{{ vPerks := p.Perks }}
+	{{ vCard := p.Card }}
+	{{ vLayout := uiutils.Def(p.Layout, "overlay") }}
+	{{ vMediaSide := uiutils.Def(p.MediaSide, "end") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Eq(vLayout, "backdrop") {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge, "level": vLevel}, Tone: vTone, Density: "roomy", Measure: "3xl", Class: uiutils.Cnv(uiutils.Cond(uiutils.T(uiutils.Eq("image", "image")), "relative isolate overflow-hidden", "")), LandmarkLabel: vLandmarkLabel}) {
+			@Backdrop(BackdropProps{Kind: "image", Alt: vTitle})
+			@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref")})
+			if uiutils.Gt(uiutils.Len(vPerks), float64(0)) {
+				@grid.Grid(grid.GridProps{Cols: "1-3", Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "perks")}) {
+					for vI, vP := range uiutils.L(vPerks) {
+						if uiutils.Lt(float64(vI), float64(3)) {
+							@group.Group(group.GroupProps{Gap: "4", Align: "start", Attrs: uiutils.Attrs("data-testid", "perk")}) {
+								@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vP, "icon")), Size: 20})
+								}
+								@stack.Stack(stack.StackProps{Gap: "0"}) {
+									@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vP, "title")) }
+									}
+									@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+										{ uiutils.Text(uiutils.Get(vP, "text")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge, "level": vLevel}, Layout: "split", Media: map[string]any{"show": true, "side": vMediaSide}, Tone: vTone, LandmarkLabel: vLandmarkLabel, Aside: storeHeroFill1(p, vTitle, vCard)}) {
+			@ActionGroup(ActionGroupProps{Primary: uiutils.Get(vActions, "cta"), PrimaryHref: uiutils.Get(vActions, "href"), Secondary: uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vActions, "mode"), "two")), uiutils.Get(vActions, "secondary"), nil), SecondaryHref: uiutils.Get(vActions, "secondaryHref")})
+			if uiutils.Gt(uiutils.Len(vPerks), float64(0)) {
+				@grid.Grid(grid.GridProps{Cols: "1-3", Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "perks")}) {
+					for vI, vP := range uiutils.L(vPerks) {
+						if uiutils.Lt(float64(vI), float64(3)) {
+							@group.Group(group.GroupProps{Gap: "4", Align: "start", Attrs: uiutils.Attrs("data-testid", "perk")}) {
+								@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vP, "icon")), Size: 20})
+								}
+								@stack.Stack(stack.StackProps{Gap: "0"}) {
+									@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vP, "title")) }
+									}
+									@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+										{ uiutils.Text(uiutils.Get(vP, "text")) }
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+templ storeHeroFill1(p StoreHeroProps, vTitle any, vCard any) {
+	@OfferMedia(OfferMediaProps{Alt: vTitle, Card: vCard})
+}
diff --git a/packages/templ/ui/blocks/store-locations.templ b/packages/templ/ui/blocks/store-locations.templ
new file mode 100644
index 0000000..feb01ac
--- /dev/null
+++ b/packages/templ/ui/blocks/store-locations.templ
@@ -0,0 +1,105 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/store-locations.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StoreLocationsProps are the props of StoreLocations; the values are the JSON shapes of the TypeScript props.
+type StoreLocationsProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Stores any `json:"stores"`
+	Empty any `json:"empty"`
+	Kinds any `json:"kinds"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.
+templ StoreLocations(p StoreLocationsProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vStores := p.Stores }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vKinds := p.Kinds }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "cards") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vStores), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "store", Title: vEmpty})
+		} else {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("grid grid-cols-1 gap-8", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "map")), "items-start md:grid-cols-2", "")))}) {
+				@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "cards")), "grid grid-cols-1 gap-4 md:grid-cols-2", "flex flex-col gap-4")), Attrs: uiutils.Attrs("data-testid", "items")}) {
+					for _, vS := range uiutils.L(vStores) {
+						@stack.Stack(stack.StackProps{Gap: "4", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "border-b border-border pb-4", "rounded bg-card inset-ring inset-ring-border p-6")), Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@stack.Stack(stack.StackProps{Gap: "2"}) {
+								@badge.Badge(badge.BadgeProps{Variant: "outline", Size: "default", Class: "w-fit"}) {
+									{ uiutils.Text(uiutils.At(vKinds, uiutils.Get(vS, "kind"))) }
+								}
+								@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "lg", Weight: "bold"}) {
+									{ uiutils.Text(uiutils.Get(vS, "name")) }
+								}
+							}
+							@list.List(list.ListProps{Tag: "ul", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "flex flex-wrap gap-x-8 gap-y-2 text-sm", "flex flex-col gap-2 text-sm"))}) {
+								@list.ListItem(list.ListItemProps{Class: "flex items-center gap-2"}) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "map-pin", Size: 16})
+									@inline.Inline(inline.InlineProps{}) {
+										{ uiutils.Text(uiutils.Get(vS, "address")) }
+									}
+								}
+								@list.ListItem(list.ListItemProps{Class: "flex items-center gap-2"}) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "clock", Size: 16})
+									@inline.Inline(inline.InlineProps{}) {
+										{ uiutils.Text(uiutils.Get(vS, "hours")) }
+									}
+								}
+								@list.ListItem(list.ListItemProps{Class: "flex items-center gap-2"}) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "phone", Size: 16})
+									@link.Link(link.LinkProps{Href: uiutils.S(uiutils.Tpl("tel:{0}", uiutils.Get(vS, "phone"))), Variant: "default"}) {
+										{ uiutils.Text(uiutils.Nbsp(uiutils.Get(vS, "phone"))) }
+									}
+								}
+							}
+							if uiutils.Eq(vLayout, "cards") {
+								@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vS, "note")) }
+								}
+								@group.Group(group.GroupProps{Gap: "2", Class: "flex-wrap"}) {
+									for _, vV := range uiutils.L(uiutils.Get(vS, "services")) {
+										@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "default"}) {
+											{ uiutils.Text(vV) }
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+				if uiutils.Eq(vLayout, "map") {
+					@box.Box(box.BoxProps{Class: "md:sticky md:top-8"}) {
+						@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vLabels, "map"), Ratio: "1/1"})
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/story-dots.templ b/packages/templ/ui/blocks/story-dots.templ
new file mode 100644
index 0000000..60d78db
--- /dev/null
+++ b/packages/templ/ui/blocks/story-dots.templ
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/story-dots.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StoryDotsProps are the props of StoryDots; the values are the JSON shapes of the TypeScript props.
+type StoryDotsProps struct {
+	Steps any `json:"steps"`
+	Active any `json:"active"`
+}
+
+// One dot per step of StoryTabs; the dot of the active step is filled.
+templ StoryDots(p StoryDotsProps) {
+	{{ vSteps := p.Steps }}
+	{{ vActive := p.Active }}
+	@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+		for _, vS := range uiutils.L(vSteps) {
+			@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cnv("size-2 rounded-full", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vS, "id"), vActive)), "bg-primary", "bg-border"))), Attrs: uiutils.Attrs("data-testid", "story-dot")})
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/story-panel.templ b/packages/templ/ui/blocks/story-panel.templ
new file mode 100644
index 0000000..bca0707
--- /dev/null
+++ b/packages/templ/ui/blocks/story-panel.templ
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/story-panel.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StoryPanelProps are the props of StoryPanel; the values are the JSON shapes of the TypeScript props.
+type StoryPanelProps struct {
+	S any `json:"s"`
+	Index any `json:"index"`
+	Total any `json:"total"`
+	Labels any `json:"labels"`
+}
+
+// The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag in a muted box.
+templ StoryPanel(p StoryPanelProps) {
+	{{ vS := p.S }}
+	{{ vIndex := p.Index }}
+	{{ vTotal := p.Total }}
+	{{ vLabels := p.Labels }}
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: "rounded bg-card inset-ring inset-ring-border p-6", Attrs: uiutils.Attrs("data-testid", "story-panel")}) {
+		@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+			@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "sm"}) {
+				{ uiutils.Text(uiutils.Get(vS, "date")) }
+			}
+			@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+				{ uiutils.Text(uiutils.Tpl(uiutils.Get(vLabels, "step"), uiutils.Str(uiutils.Add(vIndex, float64(1))), uiutils.Str(vTotal))) }
+			}
+		}
+		@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "xl", Weight: "semibold"}) {
+			{ uiutils.Text(uiutils.Get(vS, "title")) }
+		}
+		@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+			{ uiutils.Text(uiutils.Get(vS, "text")) }
+		}
+		@box.Box(box.BoxProps{Class: "rounded bg-muted p-4"}) {
+			@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+				{ uiutils.Text(uiutils.Get(vS, "tag")) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/story-tabs.templ b/packages/templ/ui/blocks/story-tabs.templ
new file mode 100644
index 0000000..9e7cc37
--- /dev/null
+++ b/packages/templ/ui/blocks/story-tabs.templ
@@ -0,0 +1,86 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/story-tabs.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StoryTabsProps are the props of StoryTabs; the values are the JSON shapes of the TypeScript props.
+type StoryTabsProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Badge any `json:"badge"`
+	Steps any `json:"steps"`
+	Empty any `json:"empty"`
+	Active any `json:"active"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next arrows and one dot per step), tone. Choosing a step emits `select`.
+templ StoryTabs(p StoryTabsProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vBadge := uiutils.Def(p.Badge, "") }}
+	{{ vSteps := p.Steps }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vActive := p.Active }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "years") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	if uiutils.Eq(uiutils.Len(vSteps), float64(0)) {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+			@EmptyState(EmptyStateProps{Icon: "milestone", Title: vEmpty})
+		}
+	} else if uiutils.Eq(vLayout, "years") {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+			@box.Box(box.BoxProps{Class: "grid grid-cols-2 gap-2 sm:grid-cols-4", Attrs: uiutils.Attrs("data-testid", "story-tabs")}) {
+				for _, vS := range uiutils.L(vSteps) {
+					@button.Button(button.ButtonProps{Variant: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vS, "id"), vActive)), "default", "outline")), Size: "lg", Type: "button", Class: "h-auto flex-col items-start gap-0 py-2 text-start", Attrs: uiutils.Attrs("data-testid", "story-tab", "data-active", uiutils.Cond(uiutils.T(uiutils.Eq(uiutils.Get(vS, "id"), vActive)), "true", "false"))}) {
+						@inline.Inline(inline.InlineProps{Class: "text-sm font-semibold"}) {
+							{ uiutils.Text(uiutils.Get(vS, "date")) }
+						}
+						@inline.Inline(inline.InlineProps{Class: "text-xs"}) {
+							{ uiutils.Text(uiutils.Get(vS, "tag")) }
+						}
+					}
+				}
+			}
+			for vI, vS := range uiutils.L(vSteps) {
+				if uiutils.Eq(uiutils.Get(vS, "id"), vActive) {
+					@StoryPanel(StoryPanelProps{S: vS, Index: float64(vI), Total: uiutils.Len(vSteps), Labels: vLabels})
+				}
+			}
+		}
+	} else {
+		@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Heading: map[string]any{"badge": vBadge}, Tone: vTone, Layout: "split", Media: map[string]any{"show": true}, LandmarkLabel: vLandmarkLabel, Aside: storyTabsFill1(p, vTitle, vSteps, vActive, vLabels)})
+	}
+}
+
+templ storyTabsFill1(p StoryTabsProps, vTitle any, vSteps any, vActive any, vLabels any) {
+	@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch"}) {
+		@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "4/3"})
+		@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between"}) {
+			@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Layout: "icon", Type: "button", AriaLabel: uiutils.S(uiutils.Get(vLabels, "previous")), Attrs: uiutils.Attrs("data-testid", "story-arrow")}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-left", Size: 16})
+			}
+			@StoryDots(StoryDotsProps{Steps: vSteps, Active: vActive})
+			@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Layout: "icon", Type: "button", AriaLabel: uiutils.S(uiutils.Get(vLabels, "next")), Attrs: uiutils.Attrs("data-testid", "story-arrow")}) {
+				@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "chevron-right", Size: 16})
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/support-channels.templ b/packages/templ/ui/blocks/support-channels.templ
new file mode 100644
index 0000000..4ff7b75
--- /dev/null
+++ b/packages/templ/ui/blocks/support-channels.templ
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/support-channels.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SupportChannelsProps are the props of SupportChannels; the values are the JSON shapes of the TypeScript props.
+type SupportChannelsProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Channels any `json:"channels"`
+	Empty any `json:"empty"`
+	Open any `json:"open"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Action any `json:"action"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout (grid, list), columns, action (link, none), tone (default, muted).
+templ SupportChannels(p SupportChannelsProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vChannels := p.Channels }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vOpen := p.Open }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vCols := uiutils.Def(p.Cols, "1-3") }}
+	{{ vAction := uiutils.Def(p.Action, "link") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vChannels), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "life-buoy", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "1", vCols)), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vC := range uiutils.L(vChannels) {
+					@card.Card(card.CardProps{Variant: "default", Class: uiutils.S(uiutils.Cnv("h-full", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "flex-row items-center", ""))), Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@card.CardContent(card.CardContentProps{Class: uiutils.S(uiutils.Cnv("flex flex-1 gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "items-center", "flex-col")))}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vC, "icon")), Size: 24})
+							@stack.Stack(stack.StackProps{Gap: "2", Class: "flex-1"}) {
+								@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "bold"}) {
+									{ uiutils.Text(uiutils.Get(vC, "title")) }
+								}
+								@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vC, "text")) }
+								}
+							}
+							if uiutils.Eq(vAction, "link") {
+								@MenuEntry(MenuEntryProps{Href: uiutils.Get(vC, "href"), Class: uiutils.Cnv("font-semibold"), Testid: "open"}) {
+									{ uiutils.Text(vOpen) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/switcher-item.templ b/packages/templ/ui/blocks/switcher-item.templ
new file mode 100644
index 0000000..c51a7e6
--- /dev/null
+++ b/packages/templ/ui/blocks/switcher-item.templ
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/switcher-item.json
+
+package blocks
+
+import (
+	buttonplain "github.com/ui8kit/codegen/packages/templ/ui/ui/button-plain"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SwitcherItemProps are the props of SwitcherItem; the values are the JSON shapes of the TypeScript props.
+type SwitcherItemProps struct {
+	Active any `json:"active"`
+	Size any `json:"size"`
+	Layout any `json:"layout"`
+	Class string `json:"className"`
+}
+
+// One item of a Switcher (default or active). Pass the same size and layout as the Switcher.
+templ SwitcherItem(p SwitcherItemProps) {
+	{{ vActive := uiutils.Def(p.Active, false) }}
+	{{ vSize := uiutils.Def(p.Size, "default") }}
+	{{ vLayout := uiutils.Def(p.Layout, "text") }}
+	@buttonplain.ButtonPlain(buttonplain.ButtonPlainProps{Type: "button", Role: "tab", Class: uiutils.S(uiutils.Cnv(recipeSwitcherItem.Of(map[string]any{"size": vSize, "layout": vLayout, "state": uiutils.Cond(uiutils.T(vActive), "active", "default")}), p.Class)), Attrs: uiutils.Attrs("aria-selected", vActive, "tabindex", uiutils.Cond(uiutils.T(vActive), float64(0), float64(-1)), "data-slot", "switcher-item", "data-state", uiutils.Cond(uiutils.T(vActive), "active", "default"))}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/switcher.templ b/packages/templ/ui/blocks/switcher.templ
new file mode 100644
index 0000000..2b4d286
--- /dev/null
+++ b/packages/templ/ui/blocks/switcher.templ
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/patterns/switcher.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SwitcherProps are the props of Switcher; the values are the JSON shapes of the TypeScript props.
+type SwitcherProps struct {
+	Size any `json:"size"`
+	Layout any `json:"layout"`
+	Label any `json:"label"`
+	Class string `json:"className"`
+}
+
+// A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown (horizontal, activate).
+templ Switcher(p SwitcherProps) {
+	{{ vSize := uiutils.Def(p.Size, "default") }}
+	{{ vLayout := uiutils.Def(p.Layout, "text") }}
+	{{ vLabel := p.Label }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv(recipeSwitcher.Of(map[string]any{"size": vSize, "layout": vLayout}), p.Class)), Attrs: uiutils.Attrs("role", "tablist", "aria-label", vLabel, "data-slot", "switcher")}) {
+		{ children... }
+	}
+}
diff --git a/packages/templ/ui/blocks/table-toolbar.templ b/packages/templ/ui/blocks/table-toolbar.templ
new file mode 100644
index 0000000..332a726
--- /dev/null
+++ b/packages/templ/ui/blocks/table-toolbar.templ
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/table-toolbar.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// TableToolbarProps are the props of TableToolbar; the values are the JSON shapes of the TypeScript props.
+type TableToolbarProps struct {
+	Label any `json:"label"`
+	Class string `json:"className"`
+	Actions templ.Component `json:"-"`
+}
+
+// The toolbar above a table: search and filter controls on the left (children), the actions on the right (`actions`). One tab stop group (role toolbar).
+templ TableToolbar(p TableToolbarProps) {
+	{{ vLabel := p.Label }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-wrap items-center justify-between gap-2", p.Class)), Attrs: uiutils.Attrs("role", "toolbar", "aria-label", vLabel, "data-slot", "table-toolbar")}) {
+		@inline.Inline(inline.InlineProps{Class: "flex min-w-0 flex-wrap items-center gap-2"}) {
+			{ children... }
+		}
+		@inline.Inline(inline.InlineProps{Class: "flex flex-wrap items-center gap-2"}) {
+			if p.Actions != nil {
+				@p.Actions
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/team-grid.templ b/packages/templ/ui/blocks/team-grid.templ
new file mode 100644
index 0000000..3d53f9e
--- /dev/null
+++ b/packages/templ/ui/blocks/team-grid.templ
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/team-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// TeamGridProps are the props of TeamGrid; the values are the JSON shapes of the TypeScript props.
+type TeamGridProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Members any `json:"members"`
+	Empty any `json:"empty"`
+	Depts any `json:"depts"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory), cols, tone, density.
+templ TeamGrid(p TeamGridProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vMembers := p.Members }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vDepts := p.Depts }}
+	{{ vLayout := uiutils.Def(p.Layout, "cards") }}
+	{{ vCols := uiutils.Def(p.Cols, "1-4") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, Density: vDensity, Layout: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "split", "stack"), Media: map[string]any{"show": uiutils.Eq(vLayout, "list"), "side": "start", "align": "start"}, LandmarkLabel: vLandmarkLabel, Aside: teamGridFill1(p, vTitle)}) {
+		if uiutils.Eq(uiutils.Len(vMembers), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "users", Title: vEmpty})
+		} else {
+			@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "minimal")), "grid grid-cols-2 gap-8 md:grid-cols-4", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "directory")), "grid grid-cols-1 gap-4 md:grid-cols-2", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "list")), "flex flex-col gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(vCols, "1-3")), "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4"))))), Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vM := range uiutils.L(vMembers) {
+					if uiutils.Eq(vLayout, "minimal") {
+						@stack.Stack(stack.StackProps{Gap: "2", Align: "center", Class: "text-center", Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vM, "name"), Ratio: "1/1", Class: uiutils.Cnv(uiutils.Cnv("size-16", "shrink-0"))})
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vM, "name")) }
+							}
+							@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vM, "role")) }
+							}
+						}
+					} else if uiutils.Eq(vLayout, "cards") {
+						@stack.Stack(stack.StackProps{Gap: "4", Class: "rounded bg-card inset-ring inset-ring-border p-4", Attrs: uiutils.Attrs("data-testid", "item")}) {
+							@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vM, "name"), Ratio: "1/1"})
+							@stack.Stack(stack.StackProps{Gap: "2"}) {
+								@stack.Stack(stack.StackProps{Gap: "0"}) {
+									@text.Text(text.TextProps{Size: "base", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vM, "name")) }
+									}
+									@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+										{ uiutils.Text(uiutils.Get(vM, "role")) }
+									}
+								}
+								@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vM, "bio")) }
+								}
+							}
+						}
+					} else {
+						@MemberRow(MemberRowProps{Member: vM, Depts: vDepts, Layout: vLayout})
+					}
+				}
+			}
+		}
+	}
+}
+
+templ teamGridFill1(p TeamGridProps, vTitle any) {
+	@MediaFrame(MediaFrameProps{Alt: vTitle, Ratio: "3/4"})
+}
diff --git a/packages/templ/ui/blocks/template-grid.templ b/packages/templ/ui/blocks/template-grid.templ
new file mode 100644
index 0000000..2e7785d
--- /dev/null
+++ b/packages/templ/ui/blocks/template-grid.templ
@@ -0,0 +1,115 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/template-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/iconbadge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// TemplateGridProps are the props of TemplateGrid; the values are the JSON shapes of the TypeScript props.
+type TemplateGridProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Templates any `json:"templates"`
+	Filters any `json:"filters"`
+	BrowseHref any `json:"browseHref"`
+	Labels any `json:"labels"`
+	Cols any `json:"cols"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	Empty any `json:"empty"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all button.
+templ TemplateGrid(p TemplateGridProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vTemplates := p.Templates }}
+	{{ vFilters := p.Filters }}
+	{{ vBrowseHref := p.BrowseHref }}
+	{{ vLabels := p.Labels }}
+	{{ vCols := uiutils.Def(p.Cols, "1-4") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "compact") }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Tone: vTone, Density: vDensity, Measure: "fill", Class: uiutils.Cnv("py-0"), LandmarkLabel: vLandmarkLabel}) {
+		@stack.Stack(stack.StackProps{Gap: "8", Align: "stretch"}) {
+			@group.Group(group.GroupProps{Gap: "4", Align: "center", Justify: "between", Class: "h-8 w-full flex-wrap"}) {
+				@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(2))), Size: "2xl", Weight: "semibold", Class: "leading-9", Attrs: uiutils.Attrs("id", uiutils.Add(vId, "-title"))}) {
+					{ uiutils.Text(vTitle) }
+				}
+				if uiutils.Gt(uiutils.Len(vFilters), float64(0)) {
+					@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "flex-wrap", Attrs: uiutils.Attrs("role", "group", "aria-label", uiutils.Get(vLabels, "filters"), "data-testid", "template-filters")}) {
+						for _, vF := range uiutils.L(vFilters) {
+							@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Type: "button", Class: "gap-2", Attrs: uiutils.Attrs("data-testid", "template-filter")}) {
+								if uiutils.T(uiutils.Get(vF, "icon")) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vF, "icon")), Size: 16})
+								}
+								{ uiutils.Text(uiutils.Get(vF, "title")) }
+							}
+						}
+					}
+				}
+			}
+			if uiutils.Eq(uiutils.Len(vTemplates), float64(0)) {
+				@EmptyState(EmptyStateProps{Icon: "layout-template", Title: vEmpty})
+			} else {
+				@grid.Grid(grid.GridProps{Cols: uiutils.S(vCols), Class: "w-full gap-6", Attrs: uiutils.Attrs("data-testid", "template-grid")}) {
+					for _, vT := range uiutils.L(vTemplates) {
+						@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border", uiutils.Get(presetDefaults, "templates", "card"))), Attrs: uiutils.Attrs("data-testid", "template-card")}) {
+							@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("shrink-0 overflow-hidden", uiutils.Get(presetDefaults, "templates", "image")))}) {
+								@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vT, "title"), Class: uiutils.Cnv(uiutils.Cnv("size-full", uiutils.Get(presetDefaults, "media", "rounded")))})
+							}
+							@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: uiutils.S(uiutils.Cnv("w-full", uiutils.Get(presetDefaults, "templates", "footer"))), Attrs: uiutils.Attrs("data-testid", "template-footer")}) {
+								@iconbadge.IconBadge(iconbadge.IconBadgeProps{Size: "sm", Class: "overflow-hidden", Attrs: uiutils.Attrs("data-testid", "template-avatar")}) {
+									@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "layout-template", Size: 16})
+								}
+								@stack.Stack(stack.StackProps{Gap: "0", Class: "min-w-0 flex-1"}) {
+									@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "semibold", Class: "truncate leading-6"}) {
+										{ uiutils.Text(uiutils.Get(vT, "title")) }
+									}
+									@group.Group(group.GroupProps{Gap: "4", Align: "center", Class: "h-4 text-muted-foreground"}) {
+										@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+											@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "eye", Size: 16})
+											@inline.Inline(inline.InlineProps{Class: "sr-only"}) {
+												{ uiutils.Text(uiutils.Get(vLabels, "views")) }
+											}
+											@text.Text(text.TextProps{Size: "xs", Weight: "bold", Class: "leading-4"}) {
+												{ uiutils.Text(uiutils.Get(vT, "views")) }
+											}
+										}
+										@group.Group(group.GroupProps{Gap: "2", Align: "center"}) {
+											@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "heart", Size: 16})
+											@inline.Inline(inline.InlineProps{Class: "sr-only"}) {
+												{ uiutils.Text(uiutils.Get(vLabels, "likes")) }
+											}
+											@text.Text(text.TextProps{Size: "xs", Weight: "bold", Class: "leading-4"}) {
+												{ uiutils.Text(uiutils.Get(vT, "likes")) }
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+			@button.Button(button.ButtonProps{Variant: "outline", Size: "sm", Href: uiutils.S(vBrowseHref), Class: "w-full", Attrs: uiutils.Attrs("data-testid", "template-browse")}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "browse")) }
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/testimonial-grid.templ b/packages/templ/ui/blocks/testimonial-grid.templ
new file mode 100644
index 0000000..ded386d
--- /dev/null
+++ b/packages/templ/ui/blocks/testimonial-grid.templ
@@ -0,0 +1,59 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/testimonial-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// TestimonialGridProps are the props of TestimonialGrid; the values are the JSON shapes of the TypeScript props.
+type TestimonialGridProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Quotes any `json:"quotes"`
+	Empty any `json:"empty"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Cols any `json:"cols"`
+	Item any `json:"item"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card, plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the Carousel port contract around the single layout.
+templ TestimonialGrid(p TestimonialGridProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vQuotes := p.Quotes }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "grid") }}
+	{{ vCols := uiutils.Def(p.Cols, "1-3") }}
+	{{ vItem := p.Item }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, Align: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "single")), "center", "start"), Measure: uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "grid")), "default", "2xl"), LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vQuotes), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "message-square-quote", Title: vEmpty})
+		} else if uiutils.T(uiutils.Or(uiutils.Eq(vLayout, "masonry"), uiutils.Eq(vLayout, "strip"))) {
+			@block.Block(block.BlockProps{Tag: "div", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "masonry")), "columns-1 gap-4 md:columns-2 xl:columns-3", "flex snap-x gap-4 overflow-x-auto pb-2")), Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vQ := range uiutils.L(vQuotes) {
+					@QuoteCard(QuoteCardProps{Q: vQ, Labels: vLabels, Item: vItem, Layout: vLayout})
+				}
+			}
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "grid")), vCols, "1")), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for vI, vQ := range uiutils.L(vQuotes) {
+					if uiutils.T(uiutils.Or(!uiutils.Eq(vLayout, "single"), uiutils.Eq(float64(vI), float64(0)))) {
+						@QuoteCard(QuoteCardProps{Q: vQ, Labels: vLabels, Item: vItem, Layout: vLayout})
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/timeline.templ b/packages/templ/ui/blocks/timeline.templ
new file mode 100644
index 0000000..492a26e
--- /dev/null
+++ b/packages/templ/ui/blocks/timeline.templ
@@ -0,0 +1,60 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/parts/timeline.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// TimelineProps are the props of Timeline; the values are the JSON shapes of the TypeScript props.
+type TimelineProps struct {
+	Items any `json:"items"`
+	Class string `json:"className"`
+}
+
+var timelineToneDot = map[string]any{
+	"gray": "bg-muted-foreground",
+	"green": "bg-emerald-500",
+	"blue": "bg-blue-500",
+	"amber": "bg-amber-500",
+	"red": "bg-red-500",
+}
+
+// A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time. Newest first or oldest first is the caller's order.
+templ Timeline(p TimelineProps) {
+	{{ vItems := p.Items }}
+	@box.Box(box.BoxProps{Class: uiutils.S(uiutils.Cnv("min-w-0", p.Class)), Attrs: uiutils.Attrs("data-slot", "timeline")}) {
+		@list.List(list.ListProps{Class: "m-0 flex list-none flex-col p-0"}) {
+			for vI, vItem := range uiutils.L(vItems) {
+				@list.ListItem(list.ListItemProps{Class: "relative flex min-w-0 gap-4 pb-4 last:pb-0", Attrs: uiutils.Attrs("data-event", uiutils.Get(vItem, "id"))}) {
+					@box.Box(box.BoxProps{Class: "relative flex w-2 shrink-0 justify-center"}) {
+						if uiutils.T(uiutils.Lt(float64(vI), uiutils.Sub(uiutils.Len(vItems), float64(1)))) {
+							@inline.Inline(inline.InlineProps{Class: "absolute top-4 -bottom-0 w-px bg-border"})
+						}
+						@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Cnv("mt-2 size-2 rounded-full", uiutils.At(timelineToneDot, uiutils.Coalesce(uiutils.Get(vItem, "tone"), "gray"))))})
+					}
+					@box.Box(box.BoxProps{Class: "flex min-w-0 flex-1 flex-col gap-0"}) {
+						@box.Box(box.BoxProps{Class: "flex flex-wrap items-baseline justify-between gap-x-4"}) {
+							@text.Text(text.TextProps{Class: "m-0 text-sm font-bold text-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vItem, "title")) }
+							}
+							@text.Text(text.TextProps{Class: "m-0 shrink-0 text-xs font-medium text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vItem, "time")) }
+							}
+						}
+						if uiutils.T(uiutils.Get(vItem, "text")) {
+							@text.Text(text.TextProps{Class: "m-0 text-xs font-medium text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vItem, "text")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/topic-chips.templ b/packages/templ/ui/blocks/topic-chips.templ
new file mode 100644
index 0000000..b2dd74f
--- /dev/null
+++ b/packages/templ/ui/blocks/topic-chips.templ
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/topic-chips.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// TopicChipsProps are the props of TopicChips; the values are the JSON shapes of the TypeScript props.
+type TopicChipsProps struct {
+	Topics any `json:"topics"`
+	Tone any `json:"tone"`
+}
+
+// A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band with an icon per topic; default: outlined.
+templ TopicChips(p TopicChipsProps) {
+	{{ vTopics := p.Topics }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	@group.Group(group.GroupProps{Gap: "2", Align: "center", Justify: "center", Class: "flex-wrap", Attrs: uiutils.Attrs("data-testid", "hero-topics")}) {
+		for _, vTopic := range uiutils.L(vTopics) {
+			if uiutils.Eq(vTone, "inverse") {
+				@button.Button(button.ButtonProps{Href: uiutils.S(uiutils.Get(vTopic, "href")), Variant: "ghost", Size: "sm", Class: "gap-2 text-background inset-ring-background/30 hover:bg-background/10", Attrs: uiutils.Attrs("data-testid", "hero-topic")}) {
+					if uiutils.T(uiutils.Get(vTopic, "icon")) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vTopic, "icon")), Size: 16})
+					}
+					{ uiutils.Text(uiutils.Get(vTopic, "name")) }
+				}
+			} else {
+				@button.Button(button.ButtonProps{Href: uiutils.S(uiutils.Get(vTopic, "href")), Variant: "outline", Size: "sm", Attrs: uiutils.Attrs("data-testid", "hero-topic")}) {
+					{ uiutils.Text(uiutils.Get(vTopic, "name")) }
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/tour-callout.templ b/packages/templ/ui/blocks/tour-callout.templ
new file mode 100644
index 0000000..37f6e16
--- /dev/null
+++ b/packages/templ/ui/blocks/tour-callout.templ
@@ -0,0 +1,69 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/tour-callout.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// TourCalloutProps are the props of TourCallout; the values are the JSON shapes of the TypeScript props.
+type TourCalloutProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Target any `json:"target"`
+	Position any `json:"position"`
+	Skip any `json:"skip"`
+	Next any `json:"next"`
+	Placement any `json:"placement"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target), tone, density.
+templ TourCallout(p TourCalloutProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vTarget := p.Target }}
+	{{ vPosition := p.Position }}
+	{{ vSkip := p.Skip }}
+	{{ vNext := p.Next }}
+	{{ vPlacement := uiutils.Def(p.Placement, "below") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		@block.Block(block.BlockProps{Tag: "div", Class: uiutils.S(uiutils.Cnv("flex gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(vPlacement, "end")), "flex-col items-start md:flex-row md:items-center", uiutils.Cond(uiutils.T(uiutils.Eq(vPlacement, "above")), "flex-col-reverse items-start", "flex-col items-start")))), Attrs: uiutils.Attrs("data-testid", "tour", "data-placement", vPlacement)}) {
+			@button.Button(button.ButtonProps{Variant: "outline", Size: "default", Type: "button", Class: "inset-ring-foreground", Attrs: uiutils.Attrs("data-testid", "tour-target")}) {
+				{ uiutils.Text(vTarget) }
+			}
+			@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: uiutils.S(uiutils.Cnv("w-full max-w-sm", "rounded bg-card inset-ring inset-ring-border", "p-4", "shadow-md")), Attrs: uiutils.Attrs("role", "group", "aria-label", vTitle, "data-testid", "tour-callout")}) {
+				@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(vPosition) }
+				}
+				@text.Text(text.TextProps{Size: "base", Weight: "semibold"}) {
+					{ uiutils.Text(vTitle) }
+				}
+				@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(vText) }
+				}
+				@group.Group(group.GroupProps{Gap: "2", Justify: "end"}) {
+					@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Type: "button"}) {
+						{ uiutils.Text(vSkip) }
+					}
+					@button.Button(button.ButtonProps{Variant: "default", Size: "sm", Type: "button"}) {
+						{ uiutils.Text(vNext) }
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/usage-calculator.templ b/packages/templ/ui/blocks/usage-calculator.templ
new file mode 100644
index 0000000..fedb129
--- /dev/null
+++ b/packages/templ/ui/blocks/usage-calculator.templ
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/usage-calculator.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	rangefield "github.com/ui8kit/codegen/packages/templ/ui/ui/range"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// UsageCalculatorProps are the props of UsageCalculator; the values are the JSON shapes of the TypeScript props.
+type UsageCalculatorProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Usage any `json:"usage"`
+	Slider any `json:"slider"`
+	Price any `json:"price"`
+	Cta any `json:"cta"`
+	Href any `json:"href"`
+	Layout any `json:"layout"`
+	Ends any `json:"ends"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the largest amount under the slider, hide), tone.
+templ UsageCalculator(p UsageCalculatorProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vUsage := p.Usage }}
+	{{ vSlider := p.Slider }}
+	{{ vPrice := p.Price }}
+	{{ vCta := p.Cta }}
+	{{ vHref := p.Href }}
+	{{ vLayout := uiutils.Def(p.Layout, "card") }}
+	{{ vEnds := uiutils.Def(p.Ends, "show") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vText, Tone: vTone, Align: "center", LandmarkLabel: vLandmarkLabel}) {
+		@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: uiutils.S(uiutils.Cnv("mx-auto w-full max-w-xl", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "card")), "rounded bg-card p-6 inset-ring inset-ring-border", ""))), Attrs: uiutils.Attrs("data-testid", "usage")}) {
+			@group.Group(group.GroupProps{Justify: "between", Align: "baseline"}) {
+				@text.Text(text.TextProps{Size: "xl", Weight: "bold"}) {
+					{ uiutils.Text(uiutils.Tpl(uiutils.Get(vSlider, "unit"), vUsage)) }
+				}
+				@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(uiutils.Get(vSlider, "label")) }
+				}
+			}
+			@rangefield.Range(rangefield.RangeProps{Min: uiutils.I(uiutils.Get(vSlider, "min")), Max: uiutils.I(uiutils.Get(vSlider, "max")), Value: uiutils.S(vUsage), AriaLabel: uiutils.S(uiutils.Get(vSlider, "label")), Attrs: uiutils.Attrs("data-testid", "slider")})
+			if uiutils.Eq(vEnds, "show") {
+				@group.Group(group.GroupProps{Justify: "between", Attrs: uiutils.Attrs("data-testid", "ends")}) {
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Tpl(uiutils.Get(vSlider, "unit"), uiutils.Get(vSlider, "min"))) }
+					}
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Tpl(uiutils.Get(vSlider, "unit"), uiutils.Get(vSlider, "max"))) }
+					}
+				}
+			}
+			@group.Group(group.GroupProps{Justify: "between", Align: "center", Class: "flex-wrap"}) {
+				@stack.Stack(stack.StackProps{Gap: "0"}) {
+					@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+						{ uiutils.Text(uiutils.Get(vPrice, "label")) }
+					}
+					@text.Text(text.TextProps{Size: "4xl", Weight: "bold", Attrs: uiutils.Attrs("data-testid", "estimate")}) {
+						{ uiutils.Text(uiutils.Money(uiutils.Mul(vUsage, uiutils.Get(vPrice, "rate")), uiutils.Get(vPrice, "currency"))) }
+					}
+				}
+				@button.Button(button.ButtonProps{Variant: "default", Size: "default", Href: uiutils.S(vHref), Attrs: uiutils.Attrs("data-testid", "submit")}) {
+					{ uiutils.Text(vCta) }
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/usp-strip.templ b/packages/templ/ui/blocks/usp-strip.templ
new file mode 100644
index 0000000..a4ee0cd
--- /dev/null
+++ b/packages/templ/ui/blocks/usp-strip.templ
@@ -0,0 +1,73 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/usp-strip.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// UspStripProps are the props of UspStrip; the values are the JSON shapes of the TypeScript props.
+type UspStripProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Perks any `json:"perks"`
+	Empty any `json:"empty"`
+	Layout any `json:"layout"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted panel, cards: a card each, bar: a thin line of icons and titles), tone, density.
+templ UspStrip(p UspStripProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := uiutils.Def(p.Title, "") }}
+	{{ vPerks := p.Perks }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLayout := uiutils.Def(p.Layout, "strip") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vPerks), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "truck", Title: vEmpty})
+		} else if uiutils.Eq(vLayout, "bar") {
+			@list.List(list.ListProps{Tag: "ul", Class: "flex flex-wrap items-center justify-center gap-x-8 gap-y-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vP := range uiutils.L(vPerks) {
+					@list.ListItem(list.ListItemProps{Class: "flex items-center gap-2 text-sm font-medium", Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vP, "icon")), Size: 16})
+						@inline.Inline(inline.InlineProps{}) {
+							{ uiutils.Text(uiutils.Get(vP, "title")) }
+						}
+					}
+				}
+			}
+		} else {
+			@grid.Grid(grid.GridProps{Cols: "1-4", Class: uiutils.S(uiutils.Cnv("gap-4", uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "strip")), "rounded bg-muted p-6", ""))), Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vP := range uiutils.L(vPerks) {
+					@stack.Stack(stack.StackProps{Gap: "4", Class: uiutils.S(uiutils.Cond(uiutils.T(uiutils.Eq(vLayout, "cards")), "rounded bg-card inset-ring inset-ring-border p-6", "")), Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@box.Box(box.BoxProps{Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted"}) {
+							@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: uiutils.S(uiutils.Get(vP, "icon")), Size: 20})
+						}
+						@stack.Stack(stack.StackProps{Gap: "2"}) {
+							@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+								{ uiutils.Text(uiutils.Get(vP, "title")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vP, "text")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/video-grid.templ b/packages/templ/ui/blocks/video-grid.templ
new file mode 100644
index 0000000..e0d90a0
--- /dev/null
+++ b/packages/templ/ui/blocks/video-grid.templ
@@ -0,0 +1,81 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/video-grid.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// VideoGridProps are the props of VideoGrid; the values are the JSON shapes of the TypeScript props.
+type VideoGridProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Quotes any `json:"quotes"`
+	Empty any `json:"empty"`
+	PlayLabel any `json:"playLabel"`
+	ByLine any `json:"byLine"`
+	Cols any `json:"cols"`
+	Caption any `json:"caption"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone, density.
+templ VideoGrid(p VideoGridProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vQuotes := p.Quotes }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vPlayLabel := p.PlayLabel }}
+	{{ vByLine := p.ByLine }}
+	{{ vCols := uiutils.Def(p.Cols, "1-3") }}
+	{{ vCaption := uiutils.Def(p.Caption, "below") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vQuotes), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "video", Title: vEmpty})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: uiutils.S(vCols), Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vQ := range uiutils.L(vQuotes) {
+					@FigureBlock(FigureBlockProps{Class: uiutils.Cnv("m-0 flex flex-col gap-4"), Testid: "item"}) {
+						@box.Box(box.BoxProps{Class: "relative"}) {
+							@MediaFrame(MediaFrameProps{Alt: uiutils.Get(vQ, "author")})
+							@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "button", Class: "absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0", Attrs: uiutils.Attrs("aria-label", uiutils.Tpl(vPlayLabel, uiutils.Get(vQ, "author")), "data-testid", "play")}) {
+								@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "play", Size: 20})
+							}
+							if uiutils.Eq(vCaption, "overlay") {
+								@box.Box(box.BoxProps{Class: "absolute inset-x-0 bottom-0 rounded bg-background p-4", Attrs: uiutils.Attrs("data-testid", "caption")}) {
+									@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+										{ uiutils.Text(uiutils.Get(vQ, "author")) }
+									}
+									@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+										{ uiutils.Text(uiutils.Tpl(vByLine, uiutils.Get(vQ, "role"), uiutils.Get(vQ, "company"))) }
+									}
+								}
+							}
+						}
+						if uiutils.Eq(vCaption, "below") {
+							@text.Text(text.TextProps{Tag: "figcaption", Attrs: uiutils.Attrs("data-testid", "caption")}) {
+								@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+									{ uiutils.Text(uiutils.Get(vQ, "author")) }
+								}
+								@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Tpl(vByLine, uiutils.Get(vQ, "role"), uiutils.Get(vQ, "company"))) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/video-modal.templ b/packages/templ/ui/blocks/video-modal.templ
new file mode 100644
index 0000000..5d2a0ad
--- /dev/null
+++ b/packages/templ/ui/blocks/video-modal.templ
@@ -0,0 +1,83 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/video-modal.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// VideoModalProps are the props of VideoModal; the values are the JSON shapes of the TypeScript props.
+type VideoModalProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Text any `json:"text"`
+	Close any `json:"close"`
+	Play any `json:"play"`
+	ChaptersTitle any `json:"chaptersTitle"`
+	Chapters any `json:"chapters"`
+	Size any `json:"size"`
+	Outline any `json:"outline"`
+	Tone any `json:"tone"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// A dialog with a walkthrough video: a title and a close button, the player area with a play button and, optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size (default, wide), outline (none, chapters: a list under the player), tone.
+templ VideoModal(p VideoModalProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vText := p.Text }}
+	{{ vClose := p.Close }}
+	{{ vPlay := p.Play }}
+	{{ vChaptersTitle := p.ChaptersTitle }}
+	{{ vChapters := p.Chapters }}
+	{{ vSize := uiutils.Def(p.Size, "default") }}
+	{{ vOutline := uiutils.Def(p.Outline, "none") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Tone: vTone, LandmarkLabel: vLandmarkLabel}) {
+		@stack.Stack(stack.StackProps{Gap: "4", Align: "stretch", Class: uiutils.S(uiutils.Cnv("mx-auto w-full", uiutils.Cond(uiutils.T(uiutils.Eq(vSize, "wide")), "max-w-4xl", "max-w-2xl"), "rounded bg-card inset-ring inset-ring-border p-4 shadow-lg")), Attrs: uiutils.Attrs("role", "dialog", "aria-label", vTitle, "data-testid", "video-modal")}) {
+			@group.Group(group.GroupProps{Gap: "2", Align: "center", Justify: "between"}) {
+				@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+					{ uiutils.Text(vText) }
+				}
+				@button.Button(button.ButtonProps{Variant: "ghost", Size: "sm", Type: "button", Class: "shrink-0", Attrs: uiutils.Attrs("aria-label", vClose, "data-testid", "modal-close")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "x", Size: 16})
+				}
+			}
+			@box.Box(box.BoxProps{Class: "relative", Attrs: uiutils.Attrs("data-testid", "player")}) {
+				@MediaFrame(MediaFrameProps{Alt: vTitle})
+				@button.Button(button.ButtonProps{Variant: "default", Size: "default", Type: "button", Class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded", Attrs: uiutils.Attrs("aria-label", vPlay, "data-testid", "play")}) {
+					@lucideicon.LucideIcon(lucideicon.LucideIconProps{Name: "play", Size: 24})
+				}
+			}
+			if uiutils.T(uiutils.And(uiutils.Eq(vOutline, "chapters"), uiutils.Gt(uiutils.Len(vChapters), float64(0)))) {
+				@stack.Stack(stack.StackProps{Gap: "2", Attrs: uiutils.Attrs("data-testid", "chapters")}) {
+					@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "base", Weight: "bold"}) {
+						{ uiutils.Text(vChaptersTitle) }
+					}
+					@list.List(list.ListProps{Class: "m-0 flex list-none flex-col gap-2 p-0"}) {
+						for _, vC := range uiutils.L(vChapters) {
+							@list.ListItem(list.ListItemProps{Class: "flex items-baseline gap-4", Attrs: uiutils.Attrs("data-testid", "item")}) {
+								@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+									{ uiutils.Text(uiutils.Get(vC, "title")) }
+								}
+								@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vC, "text")) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/weighted-title.templ b/packages/templ/ui/blocks/weighted-title.templ
new file mode 100644
index 0000000..95d31bc
--- /dev/null
+++ b/packages/templ/ui/blocks/weighted-title.templ
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/weighted-title.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// WeightedTitleProps are the props of WeightedTitle; the values are the JSON shapes of the TypeScript props.
+type WeightedTitleProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Weights any `json:"weights"`
+	Level any `json:"level"`
+}
+
+// A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text.
+templ WeightedTitle(p WeightedTitleProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vWeights := p.Weights }}
+	{{ vLevel := uiutils.Def(p.Level, float64(1)) }}
+	@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(vLevel)), Size: "5xl", Weight: "semibold", Class: uiutils.S(uiutils.Cnv("text-center tracking-tight text-background", uiutils.Get(presetDefaults, "hero", "title"))), Attrs: uiutils.Attrs("id", vId)}) {
+		for vI, vWord := range uiutils.L(uiutils.Words(vTitle)) {
+			@inline.Inline(inline.InlineProps{Class: uiutils.S(uiutils.Nth(vWeights, float64(vI)))}) {
+				{ uiutils.Text(vWord) }
+			}
+			{ uiutils.Text(" ") }
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/zone-rows.templ b/packages/templ/ui/blocks/zone-rows.templ
new file mode 100644
index 0000000..cb85882
--- /dev/null
+++ b/packages/templ/ui/blocks/zone-rows.templ
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/zone-rows.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/table"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ZoneRowsProps are the props of ZoneRows; the values are the JSON shapes of the TypeScript props.
+type ZoneRowsProps struct {
+	Zones any `json:"zones"`
+	Labels any `json:"labels"`
+}
+
+// The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the minimum order, the time and an express badge.
+templ ZoneRows(p ZoneRowsProps) {
+	{{ vZones := p.Zones }}
+	{{ vLabels := p.Labels }}
+	@box.Box(box.BoxProps{Class: "w-full overflow-x-auto rounded inset-ring inset-ring-border"}) {
+		@table.Table(table.TableProps{Class: "w-full text-left text-sm", Attrs: uiutils.Attrs("data-testid", "zone-table")}) {
+			@table.TableCaption(table.TableCaptionProps{Class: "sr-only"}) {
+				{ uiutils.Text(uiutils.Get(vLabels, "caption")) }
+			}
+			@table.TableHead(table.TableHeadProps{Class: "bg-muted"}) {
+				@table.TableRow(table.TableRowProps{}) {
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "px-4 py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "zone")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "price")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "freeFrom")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "hidden py-2 md:table-cell"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "minOrder")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "py-2"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "time")) }
+					}
+					@table.TableHeadCell(table.TableHeadCellProps{Scope: "col", Class: "hidden py-2 pr-4 sm:table-cell"}) {
+						{ uiutils.Text(uiutils.Get(vLabels, "express")) }
+					}
+				}
+			}
+			@table.TableBody(table.TableBodyProps{}) {
+				for _, vZ := range uiutils.L(vZones) {
+					@table.TableRow(table.TableRowProps{Class: "border-t border-border", Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@table.TableCell(table.TableCellProps{Class: "px-4 py-4"}) {
+							@stack.Stack(stack.StackProps{Gap: "0"}) {
+								@text.Text(text.TextProps{Size: "sm", Weight: "semibold"}) {
+									{ uiutils.Text(uiutils.Get(vZ, "name")) }
+								}
+								@text.Text(text.TextProps{Size: "xs", Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vZ, "area")) }
+								}
+							}
+						}
+						@table.TableCell(table.TableCellProps{Class: "font-medium"}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vZ, "price"), uiutils.Get(vZ, "currency"))) }
+						}
+						@table.TableCell(table.TableCellProps{}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vZ, "freeFrom"), uiutils.Get(vZ, "currency"))) }
+						}
+						@table.TableCell(table.TableCellProps{Class: "hidden md:table-cell"}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vZ, "minOrder"), uiutils.Get(vZ, "currency"))) }
+						}
+						@table.TableCell(table.TableCellProps{}) {
+							{ uiutils.Text(uiutils.Get(vZ, "time")) }
+						}
+						@table.TableCell(table.TableCellProps{Class: "hidden pr-4 sm:table-cell"}) {
+							if uiutils.T(uiutils.Get(vZ, "express")) {
+								@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "default"}) {
+									{ uiutils.Text(uiutils.Get(vZ, "express")) }
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/blocks/zone-table.templ b/packages/templ/ui/blocks/zone-table.templ
new file mode 100644
index 0000000..ef46bae
--- /dev/null
+++ b/packages/templ/ui/blocks/zone-table.templ
@@ -0,0 +1,99 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/organisms/zone-table.json
+
+package blocks
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ZoneTableProps are the props of ZoneTable; the values are the JSON shapes of the TypeScript props.
+type ZoneTableProps struct {
+	Id any `json:"id"`
+	Title any `json:"title"`
+	Lead any `json:"lead"`
+	Zones any `json:"zones"`
+	Empty any `json:"empty"`
+	Labels any `json:"labels"`
+	Layout any `json:"layout"`
+	Tone any `json:"tone"`
+	Density any `json:"density"`
+	LandmarkLabel any `json:"landmarkLabel"`
+}
+
+// Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.
+templ ZoneTable(p ZoneTableProps) {
+	{{ vId := p.Id }}
+	{{ vTitle := p.Title }}
+	{{ vLead := uiutils.Def(p.Lead, "") }}
+	{{ vZones := p.Zones }}
+	{{ vEmpty := uiutils.Def(p.Empty, "") }}
+	{{ vLabels := p.Labels }}
+	{{ vLayout := uiutils.Def(p.Layout, "table") }}
+	{{ vTone := uiutils.Def(p.Tone, "default") }}
+	{{ vDensity := uiutils.Def(p.Density, "default") }}
+	{{ vLandmarkLabel := p.LandmarkLabel }}
+	@SectionFrame(SectionFrameProps{Id: vId, Title: vTitle, Lead: vLead, Tone: vTone, Density: vDensity, LandmarkLabel: vLandmarkLabel}) {
+		if uiutils.Eq(uiutils.Len(vZones), float64(0)) {
+			@EmptyState(EmptyStateProps{Icon: "map", Title: vEmpty})
+		} else if uiutils.Eq(vLayout, "table") {
+			@ZoneRows(ZoneRowsProps{Zones: vZones, Labels: vLabels})
+		} else {
+			@grid.Grid(grid.GridProps{Cols: "1-3", Class: "gap-4", Attrs: uiutils.Attrs("data-testid", "items")}) {
+				for _, vZ := range uiutils.L(vZones) {
+					@stack.Stack(stack.StackProps{Gap: "4", Class: "rounded bg-card inset-ring inset-ring-border p-6", Attrs: uiutils.Attrs("data-testid", "item")}) {
+						@stack.Stack(stack.StackProps{Gap: "2"}) {
+							@title.Title(title.TitleProps{As: uiutils.HeadingLevel(uiutils.I(float64(3))), Size: "lg", Weight: "bold"}) {
+								{ uiutils.Text(uiutils.Get(vZ, "name")) }
+							}
+							@text.Text(text.TextProps{Size: "sm", Class: "text-muted-foreground"}) {
+								{ uiutils.Text(uiutils.Get(vZ, "area")) }
+							}
+						}
+						@text.Text(text.TextProps{Size: "3xl", Weight: "bold"}) {
+							{ uiutils.Text(uiutils.Money(uiutils.Get(vZ, "price"), uiutils.Get(vZ, "currency"))) }
+						}
+						@list.List(list.ListProps{Tag: "ul", Class: "flex flex-col gap-2 border-t border-border pt-4"}) {
+							@list.ListItem(list.ListItemProps{Class: "flex items-center justify-between gap-4 text-sm"}) {
+								@inline.Inline(inline.InlineProps{Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vLabels, "freeFrom")) }
+								}
+								@inline.Inline(inline.InlineProps{Class: "font-medium"}) {
+									{ uiutils.Text(uiutils.Money(uiutils.Get(vZ, "freeFrom"), uiutils.Get(vZ, "currency"))) }
+								}
+							}
+							@list.ListItem(list.ListItemProps{Class: "flex items-center justify-between gap-4 text-sm"}) {
+								@inline.Inline(inline.InlineProps{Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vLabels, "minOrder")) }
+								}
+								@inline.Inline(inline.InlineProps{Class: "font-medium"}) {
+									{ uiutils.Text(uiutils.Money(uiutils.Get(vZ, "minOrder"), uiutils.Get(vZ, "currency"))) }
+								}
+							}
+							@list.ListItem(list.ListItemProps{Class: "flex items-center justify-between gap-4 text-sm"}) {
+								@inline.Inline(inline.InlineProps{Class: "text-muted-foreground"}) {
+									{ uiutils.Text(uiutils.Get(vLabels, "time")) }
+								}
+								@inline.Inline(inline.InlineProps{Class: "font-medium"}) {
+									{ uiutils.Text(uiutils.Get(vZ, "time")) }
+								}
+							}
+						}
+						if uiutils.T(uiutils.Get(vZ, "express")) {
+							@badge.Badge(badge.BadgeProps{Variant: "secondary", Size: "default", Class: "w-fit"}) {
+								{ uiutils.Text(uiutils.Get(vZ, "express")) }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/templ/ui/cmd/parity-blocks/main.go b/packages/templ/ui/cmd/parity-blocks/main.go
new file mode 100644
index 0000000..21563e4
--- /dev/null
+++ b/packages/templ/ui/cmd/parity-blocks/main.go
@@ -0,0 +1,1395 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/templ.ts
+
+// Command parity-blocks renders organisms from JSON props: stdin [{"name":"HeroSection","props":{...}}], stdout the HTML of each.
+package main
+
+import (
+	"bufio"
+	"context"
+	"encoding/json"
+	"fmt"
+	"os"
+	"strings"
+
+	"github.com/a-h/templ"
+
+	"github.com/ui8kit/codegen/packages/templ/ui/blocks"
+)
+
+type request struct {
+	Name  string          `json:"name"`
+	Props json.RawMessage `json:"props"`
+}
+
+func component(name string, props []byte) (templ.Component, error) {
+	switch name {
+	case "AboutCompany":
+		var p blocks.AboutCompanyProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.AboutCompany(p), nil
+	case "AboutMe":
+		var p blocks.AboutMeProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.AboutMe(p), nil
+	case "ActionGroup":
+		var p blocks.ActionGroupProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ActionGroup(p), nil
+	case "ActivityFeed":
+		var p blocks.ActivityFeedProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ActivityFeed(p), nil
+	case "AnnouncementBar":
+		var p blocks.AnnouncementBarProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.AnnouncementBar(p), nil
+	case "AppMain":
+		var p blocks.AppMainProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.AppMain(p), nil
+	case "AppShell":
+		var p blocks.AppShellProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.AppShell(p), nil
+	case "ArticleBlock":
+		var p blocks.ArticleBlockProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ArticleBlock(p), nil
+	case "ArticleBody":
+		var p blocks.ArticleBodyProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ArticleBody(p), nil
+	case "AuthCard":
+		var p blocks.AuthCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.AuthCard(p), nil
+	case "AuthForm":
+		var p blocks.AuthFormProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.AuthForm(p), nil
+	case "AuthLayout":
+		var p blocks.AuthLayoutProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.AuthLayout(p), nil
+	case "Avatar":
+		var p blocks.AvatarProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Avatar(p), nil
+	case "Backdrop":
+		var p blocks.BackdropProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Backdrop(p), nil
+	case "BadgeSquare":
+		var p blocks.BadgeSquareProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.BadgeSquare(p), nil
+	case "BarChart":
+		var p blocks.BarChartProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.BarChart(p), nil
+	case "BeforeAfter":
+		var p blocks.BeforeAfterProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.BeforeAfter(p), nil
+	case "BentoGrid":
+		var p blocks.BentoGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.BentoGrid(p), nil
+	case "BottomNav":
+		var p blocks.BottomNavProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.BottomNav(p), nil
+	case "BulkBar":
+		var p blocks.BulkBarProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.BulkBar(p), nil
+	case "CartDrawer":
+		var p blocks.CartDrawerProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CartDrawer(p), nil
+	case "CartList":
+		var p blocks.CartListProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CartList(p), nil
+	case "CartSummaryCard":
+		var p blocks.CartSummaryCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CartSummaryCard(p), nil
+	case "CartTable":
+		var p blocks.CartTableProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CartTable(p), nil
+	case "CategoryNav":
+		var p blocks.CategoryNavProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CategoryNav(p), nil
+	case "ChartPanel":
+		var p blocks.ChartPanelProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ChartPanel(p), nil
+	case "Checklist":
+		var p blocks.ChecklistProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Checklist(p), nil
+	case "CheckoutForm":
+		var p blocks.CheckoutFormProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CheckoutForm(p), nil
+	case "CheckoutStep":
+		var p blocks.CheckoutStepProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CheckoutStep(p), nil
+	case "CheckoutSubmit":
+		var p blocks.CheckoutSubmitProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CheckoutSubmit(p), nil
+	case "CodeWindow":
+		var p blocks.CodeWindowProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CodeWindow(p), nil
+	case "CompareMark":
+		var p blocks.CompareMarkProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CompareMark(p), nil
+	case "ComparisonTable":
+		var p blocks.ComparisonTableProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ComparisonTable(p), nil
+	case "ContactForm":
+		var p blocks.ContactFormProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ContactForm(p), nil
+	case "CookieBanner":
+		var p blocks.CookieBannerProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CookieBanner(p), nil
+	case "CreditPacks":
+		var p blocks.CreditPacksProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CreditPacks(p), nil
+	case "CtaActions":
+		var p blocks.CtaActionsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CtaActions(p), nil
+	case "CtaBand":
+		var p blocks.CtaBandProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CtaBand(p), nil
+	case "CtaBanner":
+		var p blocks.CtaBannerProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CtaBanner(p), nil
+	case "CtaProof":
+		var p blocks.CtaProofProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CtaProof(p), nil
+	case "CtaProofItems":
+		var p blocks.CtaProofItemsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.CtaProofItems(p), nil
+	case "DashboardOverview":
+		var p blocks.DashboardOverviewProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.DashboardOverview(p), nil
+	case "DashboardShell":
+		var p blocks.DashboardShellProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.DashboardShell(p), nil
+	case "DeliveryInfo":
+		var p blocks.DeliveryInfoProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.DeliveryInfo(p), nil
+	case "DrawerLines":
+		var p blocks.DrawerLinesProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.DrawerLines(p), nil
+	case "DropdownItem":
+		var p blocks.DropdownItemProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.DropdownItem(p), nil
+	case "EditorTab":
+		var p blocks.EditorTabProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.EditorTab(p), nil
+	case "EmptyPanel":
+		var p blocks.EmptyPanelProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.EmptyPanel(p), nil
+	case "EmptyState":
+		var p blocks.EmptyStateProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.EmptyState(p), nil
+	case "ErrorPage":
+		var p blocks.ErrorPageProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ErrorPage(p), nil
+	case "FaqCards":
+		var p blocks.FaqCardsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FaqCards(p), nil
+	case "FaqDisclosures":
+		var p blocks.FaqDisclosuresProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FaqDisclosures(p), nil
+	case "FaqFinder":
+		var p blocks.FaqFinderProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FaqFinder(p), nil
+	case "FaqHelp":
+		var p blocks.FaqHelpProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FaqHelp(p), nil
+	case "FaqList":
+		var p blocks.FaqListProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FaqList(p), nil
+	case "FaqSplit":
+		var p blocks.FaqSplitProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FaqSplit(p), nil
+	case "FeatureAccordion":
+		var p blocks.FeatureAccordionProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureAccordion(p), nil
+	case "FeatureCards":
+		var p blocks.FeatureCardsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureCards(p), nil
+	case "FeatureGrid":
+		var p blocks.FeatureGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureGrid(p), nil
+	case "FeatureMetricCards":
+		var p blocks.FeatureMetricCardsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureMetricCards(p), nil
+	case "FeaturePairs":
+		var p blocks.FeaturePairsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeaturePairs(p), nil
+	case "FeatureRows":
+		var p blocks.FeatureRowsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureRows(p), nil
+	case "FeatureShowcase":
+		var p blocks.FeatureShowcaseProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureShowcase(p), nil
+	case "FeatureSplit":
+		var p blocks.FeatureSplitProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureSplit(p), nil
+	case "FeatureStatRows":
+		var p blocks.FeatureStatRowsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureStatRows(p), nil
+	case "FeatureSticky":
+		var p blocks.FeatureStickyProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureSticky(p), nil
+	case "FeatureTabs":
+		var p blocks.FeatureTabsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FeatureTabs(p), nil
+	case "Field":
+		var p blocks.FieldProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Field(p), nil
+	case "FigureBlock":
+		var p blocks.FigureBlockProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FigureBlock(p), nil
+	case "FileTree":
+		var p blocks.FileTreeProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FileTree(p), nil
+	case "FileTreeItem":
+		var p blocks.FileTreeItemProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FileTreeItem(p), nil
+	case "FooterBrand":
+		var p blocks.FooterBrandProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterBrand(p), nil
+	case "FooterCard":
+		var p blocks.FooterCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterCard(p), nil
+	case "FooterChannels":
+		var p blocks.FooterChannelsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterChannels(p), nil
+	case "FooterColumns":
+		var p blocks.FooterColumnsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterColumns(p), nil
+	case "FooterContacts":
+		var p blocks.FooterContactsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterContacts(p), nil
+	case "FooterFigures":
+		var p blocks.FooterFiguresProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterFigures(p), nil
+	case "FooterGroupCards":
+		var p blocks.FooterGroupCardsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterGroupCards(p), nil
+	case "FooterLinkColumns":
+		var p blocks.FooterLinkColumnsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterLinkColumns(p), nil
+	case "FooterPoints":
+		var p blocks.FooterPointsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterPoints(p), nil
+	case "FooterSignupCard":
+		var p blocks.FooterSignupCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterSignupCard(p), nil
+	case "FooterSitemap":
+		var p blocks.FooterSitemapProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterSitemap(p), nil
+	case "FooterSplit":
+		var p blocks.FooterSplitProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.FooterSplit(p), nil
+	case "HeroBadge":
+		var p blocks.HeroBadgeProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.HeroBadge(p), nil
+	case "HeroClassic":
+		var p blocks.HeroClassicProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.HeroClassic(p), nil
+	case "HeroHead":
+		var p blocks.HeroHeadProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.HeroHead(p), nil
+	case "HeroPrompt":
+		var p blocks.HeroPromptProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.HeroPrompt(p), nil
+	case "HeroSplit":
+		var p blocks.HeroSplitProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.HeroSplit(p), nil
+	case "HeroSplitExtras":
+		var p blocks.HeroSplitExtrasProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.HeroSplitExtras(p), nil
+	case "HeroSplitMedia":
+		var p blocks.HeroSplitMediaProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.HeroSplitMedia(p), nil
+	case "IconTab":
+		var p blocks.IconTabProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.IconTab(p), nil
+	case "IconTabs":
+		var p blocks.IconTabsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.IconTabs(p), nil
+	case "IconWall":
+		var p blocks.IconWallProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.IconWall(p), nil
+	case "JobBoard":
+		var p blocks.JobBoardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.JobBoard(p), nil
+	case "JobCards":
+		var p blocks.JobCardsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.JobCards(p), nil
+	case "KanbanBoard":
+		var p blocks.KanbanBoardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.KanbanBoard(p), nil
+	case "LogoCloud":
+		var p blocks.LogoCloudProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.LogoCloud(p), nil
+	case "LogoRibbon":
+		var p blocks.LogoRibbonProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.LogoRibbon(p), nil
+	case "LogoSidebar":
+		var p blocks.LogoSidebarProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.LogoSidebar(p), nil
+	case "LogoSlot":
+		var p blocks.LogoSlotProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.LogoSlot(p), nil
+	case "MediaContacts":
+		var p blocks.MediaContactsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MediaContacts(p), nil
+	case "MediaFigures":
+		var p blocks.MediaFiguresProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MediaFigures(p), nil
+	case "MediaFrame":
+		var p blocks.MediaFrameProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MediaFrame(p), nil
+	case "MediaList":
+		var p blocks.MediaListProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MediaList(p), nil
+	case "MediaPosts":
+		var p blocks.MediaPostsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MediaPosts(p), nil
+	case "MediaReview":
+		var p blocks.MediaReviewProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MediaReview(p), nil
+	case "MediaSteps":
+		var p blocks.MediaStepsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MediaSteps(p), nil
+	case "MediaTopics":
+		var p blocks.MediaTopicsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MediaTopics(p), nil
+	case "MegaMenu":
+		var p blocks.MegaMenuProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MegaMenu(p), nil
+	case "MemberRow":
+		var p blocks.MemberRowProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MemberRow(p), nil
+	case "MenuEntry":
+		var p blocks.MenuEntryProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MenuEntry(p), nil
+	case "MeterRow":
+		var p blocks.MeterRowProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MeterRow(p), nil
+	case "MetricRow":
+		var p blocks.MetricRowProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MetricRow(p), nil
+	case "MilestoneTimeline":
+		var p blocks.MilestoneTimelineProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.MilestoneTimeline(p), nil
+	case "NavActions":
+		var p blocks.NavActionsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.NavActions(p), nil
+	case "NavBar":
+		var p blocks.NavBarProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.NavBar(p), nil
+	case "NavBarMenu":
+		var p blocks.NavBarMenuProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.NavBarMenu(p), nil
+	case "NavBlock":
+		var p blocks.NavBlockProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.NavBlock(p), nil
+	case "NavItem":
+		var p blocks.NavItemProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.NavItem(p), nil
+	case "NavItemRow":
+		var p blocks.NavItemRowProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.NavItemRow(p), nil
+	case "NavLinks":
+		var p blocks.NavLinksProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.NavLinks(p), nil
+	case "NewsletterForm":
+		var p blocks.NewsletterFormProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.NewsletterForm(p), nil
+	case "Notice":
+		var p blocks.NoticeProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Notice(p), nil
+	case "NumberField":
+		var p blocks.NumberFieldProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.NumberField(p), nil
+	case "OfferMedia":
+		var p blocks.OfferMediaProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.OfferMedia(p), nil
+	case "OrderRows":
+		var p blocks.OrderRowsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.OrderRows(p), nil
+	case "OrderSummary":
+		var p blocks.OrderSummaryProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.OrderSummary(p), nil
+	case "OrderTable":
+		var p blocks.OrderTableProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.OrderTable(p), nil
+	case "OverMedia":
+		var p blocks.OverMediaProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.OverMedia(p), nil
+	case "PageAside":
+		var p blocks.PageAsideProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PageAside(p), nil
+	case "PageCrumbs":
+		var p blocks.PageCrumbsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PageCrumbs(p), nil
+	case "PageHeader":
+		var p blocks.PageHeaderProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PageHeader(p), nil
+	case "PageIntro":
+		var p blocks.PageIntroProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PageIntro(p), nil
+	case "PageTrail":
+		var p blocks.PageTrailProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PageTrail(p), nil
+	case "Pager":
+		var p blocks.PagerProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Pager(p), nil
+	case "Panel":
+		var p blocks.PanelProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Panel(p), nil
+	case "PaymentOptions":
+		var p blocks.PaymentOptionsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PaymentOptions(p), nil
+	case "PhotoGallery":
+		var p blocks.PhotoGalleryProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PhotoGallery(p), nil
+	case "Pill":
+		var p blocks.PillProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Pill(p), nil
+	case "PostActions":
+		var p blocks.PostActionsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostActions(p), nil
+	case "PostAuthor":
+		var p blocks.PostAuthorProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostAuthor(p), nil
+	case "PostCard":
+		var p blocks.PostCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostCard(p), nil
+	case "PostFeature":
+		var p blocks.PostFeatureProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostFeature(p), nil
+	case "PostGrid":
+		var p blocks.PostGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostGrid(p), nil
+	case "PostHeader":
+		var p blocks.PostHeaderProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostHeader(p), nil
+	case "PostMiniCard":
+		var p blocks.PostMiniCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostMiniCard(p), nil
+	case "PostOutline":
+		var p blocks.PostOutlineProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostOutline(p), nil
+	case "PostOverlayCard":
+		var p blocks.PostOverlayCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostOverlayCard(p), nil
+	case "PostShowcase":
+		var p blocks.PostShowcaseProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostShowcase(p), nil
+	case "PostSplit":
+		var p blocks.PostSplitProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostSplit(p), nil
+	case "PostStats":
+		var p blocks.PostStatsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostStats(p), nil
+	case "PostTags":
+		var p blocks.PostTagsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PostTags(p), nil
+	case "PricingCard":
+		var p blocks.PricingCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PricingCard(p), nil
+	case "PricingTiers":
+		var p blocks.PricingTiersProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PricingTiers(p), nil
+	case "ProductCard":
+		var p blocks.ProductCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProductCard(p), nil
+	case "ProductDetail":
+		var p blocks.ProductDetailProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProductDetail(p), nil
+	case "ProductGallery":
+		var p blocks.ProductGalleryProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProductGallery(p), nil
+	case "ProductGrid":
+		var p blocks.ProductGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProductGrid(p), nil
+	case "ProductInfo":
+		var p blocks.ProductInfoProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProductInfo(p), nil
+	case "ProductPrice":
+		var p blocks.ProductPriceProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProductPrice(p), nil
+	case "ProfileForm":
+		var p blocks.ProfileFormProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProfileForm(p), nil
+	case "ProjectGrid":
+		var p blocks.ProjectGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProjectGrid(p), nil
+	case "ProjectTiles":
+		var p blocks.ProjectTilesProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProjectTiles(p), nil
+	case "PromptComposer":
+		var p blocks.PromptComposerProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.PromptComposer(p), nil
+	case "ProofBand":
+		var p blocks.ProofBandProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ProofBand(p), nil
+	case "QuoteCard":
+		var p blocks.QuoteCardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.QuoteCard(p), nil
+	case "QuoteFigures":
+		var p blocks.QuoteFiguresProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.QuoteFigures(p), nil
+	case "QuoteLogoTiles":
+		var p blocks.QuoteLogoTilesProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.QuoteLogoTiles(p), nil
+	case "QuoteProof":
+		var p blocks.QuoteProofProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.QuoteProof(p), nil
+	case "QuoteRatingPanel":
+		var p blocks.QuoteRatingPanelProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.QuoteRatingPanel(p), nil
+	case "QuoteSlot":
+		var p blocks.QuoteSlotProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.QuoteSlot(p), nil
+	case "QuoteSplit":
+		var p blocks.QuoteSplitProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.QuoteSplit(p), nil
+	case "RangeField":
+		var p blocks.RangeFieldProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.RangeField(p), nil
+	case "Rating":
+		var p blocks.RatingProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Rating(p), nil
+	case "Region":
+		var p blocks.RegionProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Region(p), nil
+	case "ReviewList":
+		var p blocks.ReviewListProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ReviewList(p), nil
+	case "SearchField":
+		var p blocks.SearchFieldProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SearchField(p), nil
+	case "SearchPalette":
+		var p blocks.SearchPaletteProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SearchPalette(p), nil
+	case "SectionBox":
+		var p blocks.SectionBoxProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SectionBox(p), nil
+	case "SectionColumn":
+		var p blocks.SectionColumnProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SectionColumn(p), nil
+	case "SectionFrame":
+		var p blocks.SectionFrameProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SectionFrame(p), nil
+	case "SectionHead":
+		var p blocks.SectionHeadProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SectionHead(p), nil
+	case "SectionHeader":
+		var p blocks.SectionHeaderProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SectionHeader(p), nil
+	case "ShellContent":
+		var p blocks.ShellContentProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ShellContent(p), nil
+	case "ShellFooter":
+		var p blocks.ShellFooterProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ShellFooter(p), nil
+	case "ShellSidebar":
+		var p blocks.ShellSidebarProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ShellSidebar(p), nil
+	case "ShellTopbar":
+		var p blocks.ShellTopbarProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ShellTopbar(p), nil
+	case "ShoppingCart":
+		var p blocks.ShoppingCartProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ShoppingCart(p), nil
+	case "SidebarNav":
+		var p blocks.SidebarNavProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SidebarNav(p), nil
+	case "SidebarPanel":
+		var p blocks.SidebarPanelProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SidebarPanel(p), nil
+	case "SignupWizard":
+		var p blocks.SignupWizardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SignupWizard(p), nil
+	case "SiteFooter":
+		var p blocks.SiteFooterProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SiteFooter(p), nil
+	case "SiteHeader":
+		var p blocks.SiteHeaderProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SiteHeader(p), nil
+	case "SitemapFooter":
+		var p blocks.SitemapFooterProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SitemapFooter(p), nil
+	case "SkeletonLayout":
+		var p blocks.SkeletonLayoutProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SkeletonLayout(p), nil
+	case "SlotBoard":
+		var p blocks.SlotBoardProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SlotBoard(p), nil
+	case "SlotGrid":
+		var p blocks.SlotGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SlotGrid(p), nil
+	case "StatFigure":
+		var p blocks.StatFigureProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.StatFigure(p), nil
+	case "StatTile":
+		var p blocks.StatTileProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.StatTile(p), nil
+	case "StatsBand":
+		var p blocks.StatsBandProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.StatsBand(p), nil
+	case "Stepper":
+		var p blocks.StepperProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Stepper(p), nil
+	case "StepsList":
+		var p blocks.StepsListProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.StepsList(p), nil
+	case "StoreHero":
+		var p blocks.StoreHeroProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.StoreHero(p), nil
+	case "StoreLocations":
+		var p blocks.StoreLocationsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.StoreLocations(p), nil
+	case "StoryDots":
+		var p blocks.StoryDotsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.StoryDots(p), nil
+	case "StoryPanel":
+		var p blocks.StoryPanelProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.StoryPanel(p), nil
+	case "StoryTabs":
+		var p blocks.StoryTabsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.StoryTabs(p), nil
+	case "SupportChannels":
+		var p blocks.SupportChannelsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SupportChannels(p), nil
+	case "Switcher":
+		var p blocks.SwitcherProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Switcher(p), nil
+	case "SwitcherItem":
+		var p blocks.SwitcherItemProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.SwitcherItem(p), nil
+	case "TableToolbar":
+		var p blocks.TableToolbarProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.TableToolbar(p), nil
+	case "TeamGrid":
+		var p blocks.TeamGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.TeamGrid(p), nil
+	case "TemplateGrid":
+		var p blocks.TemplateGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.TemplateGrid(p), nil
+	case "TestimonialGrid":
+		var p blocks.TestimonialGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.TestimonialGrid(p), nil
+	case "Timeline":
+		var p blocks.TimelineProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.Timeline(p), nil
+	case "TopicChips":
+		var p blocks.TopicChipsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.TopicChips(p), nil
+	case "TourCallout":
+		var p blocks.TourCalloutProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.TourCallout(p), nil
+	case "UsageCalculator":
+		var p blocks.UsageCalculatorProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.UsageCalculator(p), nil
+	case "UspStrip":
+		var p blocks.UspStripProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.UspStrip(p), nil
+	case "VideoGrid":
+		var p blocks.VideoGridProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.VideoGrid(p), nil
+	case "VideoModal":
+		var p blocks.VideoModalProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.VideoModal(p), nil
+	case "WeightedTitle":
+		var p blocks.WeightedTitleProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.WeightedTitle(p), nil
+	case "ZoneRows":
+		var p blocks.ZoneRowsProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ZoneRows(p), nil
+	case "ZoneTable":
+		var p blocks.ZoneTableProps
+		if err := json.Unmarshal(props, &p); err != nil {
+			return nil, err
+		}
+		return blocks.ZoneTable(p), nil
+	}
+	return nil, fmt.Errorf("unknown organism %s", name)
+}
+
+func main() {
+	var reqs []request
+	if err := json.NewDecoder(bufio.NewReader(os.Stdin)).Decode(&reqs); err != nil {
+		panic(err)
+	}
+	out := make([]string, len(reqs))
+	for i, r := range reqs {
+		c, err := component(r.Name, r.Props)
+		if err != nil {
+			out[i] = "ERROR: " + err.Error()
+			continue
+		}
+		var b strings.Builder
+		if err := c.Render(context.Background(), &b); err != nil {
+			out[i] = "ERROR: " + err.Error()
+			continue
+		}
+		out[i] = b.String()
+	}
+	_ = json.NewEncoder(os.Stdout).Encode(out)
+}
diff --git a/packages/templ/ui/cmd/parity/main.go b/packages/templ/ui/cmd/parity/main.go
new file mode 100644
index 0000000..2a3f03d
--- /dev/null
+++ b/packages/templ/ui/cmd/parity/main.go
@@ -0,0 +1,524 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/src/go-harness.ts
+
+// Command parity renders any generated part from canonical JSON props.
+// stdin:  [{"name":"button/button/Button","props":{...},"children":"<b>x</b>"}]
+// stdout: ["<button ...>...</button>", ...]
+package main
+
+import (
+	"bufio"
+	"context"
+	"encoding/json"
+	"fmt"
+	"os"
+	"strings"
+
+	"github.com/a-h/templ"
+
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/alert"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/badge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/breadcrumb"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	buttonplain "github.com/ui8kit/codegen/packages/templ/ui/ui/button-plain"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/card"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/checkbox"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/container"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/dialog"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/disclosure"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/form"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/grid"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/group"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/iconbadge"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/image"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/label"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/linebreak"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/link"
+	linkplain "github.com/ui8kit/codegen/packages/templ/ui/ui/link-plain"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/list"
+	lucideicon "github.com/ui8kit/codegen/packages/templ/ui/ui/lucide-icon"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/radio"
+	rangefield "github.com/ui8kit/codegen/packages/templ/ui/ui/range"
+	selectfield "github.com/ui8kit/codegen/packages/templ/ui/ui/select"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/separator"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/sheet"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/skeleton"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/stack"
+	formswitch "github.com/ui8kit/codegen/packages/templ/ui/ui/switch"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/table"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/textarea"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/themetoggle"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+)
+
+type renderRequest struct {
+	Name     string          `json:"name"`
+	Props    json.RawMessage `json:"props"`
+	Children string          `json:"children"`
+}
+
+func renderCase(ctx context.Context, name string, propsJSON []byte, children templ.Component, buf *strings.Builder) error {
+	switch name {
+	case "alert/alert/Alert":
+		var p alert.AlertProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return alert.Alert(p).Render(templ.WithChildren(ctx, children), buf)
+	case "badge/badge/Badge":
+		var p badge.BadgeProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return badge.Badge(p).Render(templ.WithChildren(ctx, children), buf)
+	case "block/block/Block":
+		var p block.BlockProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return block.Block(p).Render(templ.WithChildren(ctx, children), buf)
+	case "box/box/Box":
+		var p box.BoxProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return box.Box(p).Render(templ.WithChildren(ctx, children), buf)
+	case "breadcrumb/breadcrumb/Breadcrumb":
+		var p breadcrumb.BreadcrumbProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return breadcrumb.Breadcrumb(p).Render(ctx, buf)
+	case "button-plain/button-plain/ButtonPlain":
+		var p buttonplain.ButtonPlainProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return buttonplain.ButtonPlain(p).Render(templ.WithChildren(ctx, children), buf)
+	case "button/button/Button":
+		var p button.ButtonProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return button.Button(p).Render(templ.WithChildren(ctx, children), buf)
+	case "card/card/Card":
+		var p card.CardProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return card.Card(p).Render(templ.WithChildren(ctx, children), buf)
+	case "card/card/CardHeader":
+		var p card.CardHeaderProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return card.CardHeader(p).Render(templ.WithChildren(ctx, children), buf)
+	case "card/card/CardTitle":
+		var p card.CardTitleProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return card.CardTitle(p).Render(templ.WithChildren(ctx, children), buf)
+	case "card/card/CardDescription":
+		var p card.CardDescriptionProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return card.CardDescription(p).Render(templ.WithChildren(ctx, children), buf)
+	case "card/card/CardContent":
+		var p card.CardContentProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return card.CardContent(p).Render(templ.WithChildren(ctx, children), buf)
+	case "card/card/CardFooter":
+		var p card.CardFooterProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return card.CardFooter(p).Render(templ.WithChildren(ctx, children), buf)
+	case "checkbox/checkbox/Checkbox":
+		var p checkbox.CheckboxProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return checkbox.Checkbox(p).Render(ctx, buf)
+	case "container/container/Container":
+		var p container.ContainerProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return container.Container(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/controls/Fieldset":
+		var p form.FieldsetProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.Fieldset(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/controls/Legend":
+		var p form.LegendProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.Legend(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/controls/DataList":
+		var p form.DataListProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.DataList(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/controls/DataOption":
+		var p form.DataOptionProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.DataOption(p).Render(ctx, buf)
+	case "form/controls/Output":
+		var p form.OutputProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.Output(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/controls/Meter":
+		var p form.MeterProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.Meter(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/controls/Progress":
+		var p form.ProgressProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.Progress(p).Render(templ.WithChildren(ctx, children), buf)
+	case "dialog/dialog/Dialog":
+		var p dialog.DialogProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return dialog.Dialog(p).Render(templ.WithChildren(ctx, children), buf)
+	case "disclosure/disclosure/Disclosure":
+		var p disclosure.DisclosureProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return disclosure.Disclosure(p).Render(templ.WithChildren(ctx, children), buf)
+	case "disclosure/disclosure/Summary":
+		var p disclosure.SummaryProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return disclosure.Summary(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/form/Form":
+		var p form.FormProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.Form(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/form/FormItem":
+		var p form.FormItemProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.FormItem(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/form/FormDescription":
+		var p form.FormDescriptionProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.FormDescription(p).Render(templ.WithChildren(ctx, children), buf)
+	case "form/form/FormMessage":
+		var p form.FormMessageProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return form.FormMessage(p).Render(templ.WithChildren(ctx, children), buf)
+	case "grid/grid/Grid":
+		var p grid.GridProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return grid.Grid(p).Render(templ.WithChildren(ctx, children), buf)
+	case "grid/grid/GridCol":
+		var p grid.GridColProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return grid.GridCol(p).Render(templ.WithChildren(ctx, children), buf)
+	case "group/group/Group":
+		var p group.GroupProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return group.Group(p).Render(templ.WithChildren(ctx, children), buf)
+	case "icon/icon/Icon":
+		var p icon.IconProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return icon.Icon(p).Render(templ.WithChildren(ctx, children), buf)
+	case "iconbadge/iconbadge/IconBadge":
+		var p iconbadge.IconBadgeProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return iconbadge.IconBadge(p).Render(templ.WithChildren(ctx, children), buf)
+	case "image/image/Image":
+		var p image.ImageProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return image.Image(p).Render(ctx, buf)
+	case "image/image/Picture":
+		var p image.PictureProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return image.Picture(p).Render(templ.WithChildren(ctx, children), buf)
+	case "image/image/Source":
+		var p image.SourceProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return image.Source(p).Render(ctx, buf)
+	case "inline/inline/Inline":
+		var p inline.InlineProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return inline.Inline(p).Render(templ.WithChildren(ctx, children), buf)
+	case "input/input/Input":
+		var p input.InputProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return input.Input(p).Render(ctx, buf)
+	case "label/label/Label":
+		var p label.LabelProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return label.Label(p).Render(templ.WithChildren(ctx, children), buf)
+	case "linebreak/linebreak/Break":
+		var p linebreak.BreakProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return linebreak.Break(p).Render(ctx, buf)
+	case "link-plain/link-plain/LinkPlain":
+		var p linkplain.LinkPlainProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return linkplain.LinkPlain(p).Render(templ.WithChildren(ctx, children), buf)
+	case "link/link/Link":
+		var p link.LinkProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return link.Link(p).Render(templ.WithChildren(ctx, children), buf)
+	case "list/list/List":
+		var p list.ListProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return list.List(p).Render(templ.WithChildren(ctx, children), buf)
+	case "list/list/ListItem":
+		var p list.ListItemProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return list.ListItem(p).Render(templ.WithChildren(ctx, children), buf)
+	case "lucide-icon/lucide-icon/LucideIcon":
+		var p lucideicon.LucideIconProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return lucideicon.LucideIcon(p).Render(ctx, buf)
+	case "radio/radio/Radio":
+		var p radio.RadioProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return radio.Radio(p).Render(ctx, buf)
+	case "range/range/Range":
+		var p rangefield.RangeProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return rangefield.Range(p).Render(ctx, buf)
+	case "select/select/Select":
+		var p selectfield.SelectProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return selectfield.Select(p).Render(templ.WithChildren(ctx, children), buf)
+	case "select/select/SelectOption":
+		var p selectfield.SelectOptionProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return selectfield.SelectOption(p).Render(templ.WithChildren(ctx, children), buf)
+	case "select/select/OptGroup":
+		var p selectfield.OptGroupProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return selectfield.OptGroup(p).Render(templ.WithChildren(ctx, children), buf)
+	case "separator/separator/Separator":
+		var p separator.SeparatorProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return separator.Separator(p).Render(ctx, buf)
+	case "sheet/sheet/Sheet":
+		var p sheet.SheetProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return sheet.Sheet(p).Render(templ.WithChildren(ctx, children), buf)
+	case "sheet/sheet/SheetTrigger":
+		var p sheet.SheetTriggerProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return sheet.SheetTrigger(p).Render(ctx, buf)
+	case "sheet/sheet/SheetClose":
+		var p sheet.SheetCloseProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return sheet.SheetClose(p).Render(ctx, buf)
+	case "skeleton/skeleton/Skeleton":
+		var p skeleton.SkeletonProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return skeleton.Skeleton(p).Render(ctx, buf)
+	case "stack/stack/Stack":
+		var p stack.StackProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return stack.Stack(p).Render(templ.WithChildren(ctx, children), buf)
+	case "switch/switch/Switch":
+		var p formswitch.SwitchProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return formswitch.Switch(p).Render(ctx, buf)
+	case "table/table/Table":
+		var p table.TableProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.Table(p).Render(templ.WithChildren(ctx, children), buf)
+	case "table/table/TableCaption":
+		var p table.TableCaptionProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.TableCaption(p).Render(templ.WithChildren(ctx, children), buf)
+	case "table/table/TableHead":
+		var p table.TableHeadProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.TableHead(p).Render(templ.WithChildren(ctx, children), buf)
+	case "table/table/TableBody":
+		var p table.TableBodyProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.TableBody(p).Render(templ.WithChildren(ctx, children), buf)
+	case "table/table/TableFoot":
+		var p table.TableFootProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.TableFoot(p).Render(templ.WithChildren(ctx, children), buf)
+	case "table/table/TableRow":
+		var p table.TableRowProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.TableRow(p).Render(templ.WithChildren(ctx, children), buf)
+	case "table/table/TableHeadCell":
+		var p table.TableHeadCellProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.TableHeadCell(p).Render(templ.WithChildren(ctx, children), buf)
+	case "table/table/TableCell":
+		var p table.TableCellProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.TableCell(p).Render(templ.WithChildren(ctx, children), buf)
+	case "table/table/TableColGroup":
+		var p table.TableColGroupProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.TableColGroup(p).Render(templ.WithChildren(ctx, children), buf)
+	case "table/table/TableCol":
+		var p table.TableColProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return table.TableCol(p).Render(ctx, buf)
+	case "text/text/Text":
+		var p text.TextProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return text.Text(p).Render(templ.WithChildren(ctx, children), buf)
+	case "textarea/textarea/Textarea":
+		var p textarea.TextareaProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return textarea.Textarea(p).Render(ctx, buf)
+	case "themetoggle/themetoggle/ThemeToggle":
+		var p themetoggle.ThemeToggleProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return themetoggle.ThemeToggle(p).Render(ctx, buf)
+	case "title/title/Title":
+		var p title.TitleProps
+		if err := json.Unmarshal(propsJSON, &p); err != nil {
+			return err
+		}
+		return title.Title(p).Render(templ.WithChildren(ctx, children), buf)
+	}
+	return fmt.Errorf("unknown case %q", name)
+}
+
+func main() {
+	var requests []renderRequest
+	if err := json.NewDecoder(bufio.NewReader(os.Stdin)).Decode(&requests); err != nil {
+		fmt.Fprintln(os.Stderr, err)
+		os.Exit(1)
+	}
+	results := make([]string, 0, len(requests))
+	for _, req := range requests {
+		var buf strings.Builder
+		children := templ.Raw(req.Children)
+		if err := renderCase(context.Background(), req.Name, req.Props, children, &buf); err != nil {
+			fmt.Fprintf(os.Stderr, "%s: %v\n", req.Name, err)
+			os.Exit(1)
+		}
+		results = append(results, buf.String())
+	}
+	if err := json.NewEncoder(os.Stdout).Encode(results); err != nil {
+		fmt.Fprintln(os.Stderr, err)
+		os.Exit(1)
+	}
+}
diff --git a/packages/templ/ui/go.mod b/packages/templ/ui/go.mod
new file mode 100644
index 0000000..07a030c
--- /dev/null
+++ b/packages/templ/ui/go.mod
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/templ.ts
+module github.com/ui8kit/codegen/packages/templ/ui
+
+go 1.26.0
+
+require github.com/a-h/templ v0.3.1070
diff --git a/packages/templ/ui/go.sum b/packages/templ/ui/go.sum
new file mode 100644
index 0000000..d4d87f3
--- /dev/null
+++ b/packages/templ/ui/go.sum
@@ -0,0 +1,4 @@
+github.com/a-h/templ v0.3.1070 h1:3iCOXHXqFXa99OQzgkUOLJbNzv/QjFGLwKZkBAg+ADA=
+github.com/a-h/templ v0.3.1070/go.mod h1:iIqB3g2RHBe/WlnPwa+Bvhh1TKXHWLRnBD9NWHOLm78=
+github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
+github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
diff --git a/packages/templ/ui/package.json b/packages/templ/ui/package.json
new file mode 100644
index 0000000..3107076
--- /dev/null
+++ b/packages/templ/ui/package.json
@@ -0,0 +1,126 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "@ui8kit/templ-ui",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Go templ primitives (40 bricks, 72 parts) generated by xgen from xgen/specs. Go module github.com/ui8kit/codegen/packages/templ/ui; run templ generate before go build.",
+  "ui8kit": {
+    "runtime": "templ",
+    "generated": true,
+    "kit": [
+      "ui",
+      "utils"
+    ],
+    "composition": [
+      "blocks"
+    ],
+    "blockRoot": [
+      "blocks/about-company.templ",
+      "blocks/about-me.templ",
+      "blocks/activity-feed.templ",
+      "blocks/announcement-bar.templ",
+      "blocks/app-shell.templ",
+      "blocks/article-body.templ",
+      "blocks/auth-card.templ",
+      "blocks/auth-layout.templ",
+      "blocks/before-after.templ",
+      "blocks/bento-grid.templ",
+      "blocks/bottom-nav.templ",
+      "blocks/cart-drawer.templ",
+      "blocks/cart-list.templ",
+      "blocks/category-nav.templ",
+      "blocks/chart-panel.templ",
+      "blocks/checklist.templ",
+      "blocks/checkout-form.templ",
+      "blocks/comparison-table.templ",
+      "blocks/contact-form.templ",
+      "blocks/cookie-banner.templ",
+      "blocks/credit-packs.templ",
+      "blocks/cta-band.templ",
+      "blocks/cta-banner.templ",
+      "blocks/cta-proof.templ",
+      "blocks/dashboard-overview.templ",
+      "blocks/dashboard-shell.templ",
+      "blocks/delivery-info.templ",
+      "blocks/empty-panel.templ",
+      "blocks/error-page.templ",
+      "blocks/faq-help.templ",
+      "blocks/faq-list.templ",
+      "blocks/faq-split.templ",
+      "blocks/feature-accordion.templ",
+      "blocks/feature-grid.templ",
+      "blocks/feature-showcase.templ",
+      "blocks/feature-split.templ",
+      "blocks/feature-sticky.templ",
+      "blocks/feature-tabs.templ",
+      "blocks/footer-card.templ",
+      "blocks/footer-split.templ",
+      "blocks/hero-classic.templ",
+      "blocks/hero-head.templ",
+      "blocks/hero-prompt.templ",
+      "blocks/hero-split.templ",
+      "blocks/icon-wall.templ",
+      "blocks/job-board.templ",
+      "blocks/kanban-board.templ",
+      "blocks/logo-cloud.templ",
+      "blocks/logo-ribbon.templ",
+      "blocks/media-list.templ",
+      "blocks/mega-menu.templ",
+      "blocks/metric-row.templ",
+      "blocks/milestone-timeline.templ",
+      "blocks/nav-bar.templ",
+      "blocks/newsletter-form.templ",
+      "blocks/order-summary.templ",
+      "blocks/order-table.templ",
+      "blocks/page-intro.templ",
+      "blocks/page-trail.templ",
+      "blocks/photo-gallery.templ",
+      "blocks/post-card.templ",
+      "blocks/post-grid.templ",
+      "blocks/post-header.templ",
+      "blocks/post-showcase.templ",
+      "blocks/post-split.templ",
+      "blocks/pricing-card.templ",
+      "blocks/pricing-tiers.templ",
+      "blocks/product-card.templ",
+      "blocks/product-detail.templ",
+      "blocks/product-grid.templ",
+      "blocks/product-info.templ",
+      "blocks/profile-form.templ",
+      "blocks/project-grid.templ",
+      "blocks/proof-band.templ",
+      "blocks/quote-split.templ",
+      "blocks/region.templ",
+      "blocks/review-list.templ",
+      "blocks/section-frame.templ",
+      "blocks/shell-footer.templ",
+      "blocks/shell-sidebar.templ",
+      "blocks/shell-topbar.templ",
+      "blocks/shopping-cart.templ",
+      "blocks/sidebar-nav.templ",
+      "blocks/sidebar-panel.templ",
+      "blocks/signup-wizard.templ",
+      "blocks/site-footer.templ",
+      "blocks/site-header.templ",
+      "blocks/sitemap-footer.templ",
+      "blocks/skeleton-layout.templ",
+      "blocks/slot-board.templ",
+      "blocks/stats-band.templ",
+      "blocks/stepper.templ",
+      "blocks/steps-list.templ",
+      "blocks/store-hero.templ",
+      "blocks/store-locations.templ",
+      "blocks/story-tabs.templ",
+      "blocks/support-channels.templ",
+      "blocks/team-grid.templ",
+      "blocks/template-grid.templ",
+      "blocks/testimonial-grid.templ",
+      "blocks/tour-callout.templ",
+      "blocks/usage-calculator.templ",
+      "blocks/usp-strip.templ",
+      "blocks/video-grid.templ",
+      "blocks/video-modal.templ",
+      "blocks/zone-table.templ"
+    ]
+  }
+}
diff --git a/generated/ui/alert/alert.templ b/packages/templ/ui/ui/alert/alert.templ
similarity index 87%
rename from generated/ui/alert/alert.templ
rename to packages/templ/ui/ui/alert/alert.templ
index db58c2b..2a87eef 100644
--- a/generated/ui/alert/alert.templ
+++ b/packages/templ/ui/ui/alert/alert.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/alert.json
 
 /*
 Alert displays a static status or informational message.
@@ -8,7 +9,7 @@ Renders a live region with role=status by default; children carry the message bo
 package alert
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // AlertProps configures Alert.
@@ -36,6 +37,7 @@ func AlertClasses(p AlertProps) string {
 templ Alert(p AlertProps) {
 	<div
 		class={ AlertClasses(p) }
+		data-slot="alert"
 		role={ uiutils.OneOfOr(p.Role, "status", "status", "alert") }
 		aria-live={ uiutils.DefaultIfEmpty(p.AriaLive, "polite") }
 		{ p.Attrs... }
diff --git a/packages/templ/ui/ui/alert/alert.variants.json b/packages/templ/ui/ui/alert/alert.variants.json
new file mode 100644
index 0000000..29370d6
--- /dev/null
+++ b/packages/templ/ui/ui/alert/alert.variants.json
@@ -0,0 +1,20 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.alert",
+  "base": "flex min-h-8 items-center gap-2 px-2 text-xs font-semibold inset-ring rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-card text-card-foreground inset-ring-border",
+      "destructive": "bg-muted text-destructive inset-ring-destructive",
+      "success": "bg-muted text-foreground inset-ring-border",
+      "warning": "bg-muted text-foreground inset-ring-border"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/alert/alert_gen.go b/packages/templ/ui/ui/alert/alert_gen.go
new file mode 100644
index 0000000..07be4b9
--- /dev/null
+++ b/packages/templ/ui/ui/alert/alert_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/alert.json
+
+package alert
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed alert.variants.json
+var alertVariantsJSON []byte
+
+// AlertVariants is the CVA recipe shared verbatim by all runtimes.
+var AlertVariants = uiutils.MustParseVariantRecipe(alertVariantsJSON).ToVariants()
diff --git a/generated/ui/badge/badge.templ b/packages/templ/ui/ui/badge/badge.templ
similarity index 83%
rename from generated/ui/badge/badge.templ
rename to packages/templ/ui/ui/badge/badge.templ
index e253de1..4e33afd 100644
--- a/generated/ui/badge/badge.templ
+++ b/packages/templ/ui/ui/badge/badge.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/badge.json
 
 /*
 Badge shows a short status label.
@@ -8,7 +9,7 @@ Badge uses variant and size presets.
 package badge
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // BadgeProps configures Badge.
@@ -26,8 +27,8 @@ type BadgeProps struct {
 // the server-composition escape hatch for custom root elements.
 func BadgeClasses(p BadgeProps) string {
 	return uiutils.Compose(BadgeVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
@@ -35,6 +36,7 @@ func BadgeClasses(p BadgeProps) string {
 templ Badge(p BadgeProps) {
 	<div
 		class={ BadgeClasses(p) }
+		data-slot="badge"
 		{ p.Attrs... }
 	>
 		{ children... }
diff --git a/packages/templ/ui/ui/badge/badge.variants.json b/packages/templ/ui/ui/badge/badge.variants.json
new file mode 100644
index 0000000..adfac0c
--- /dev/null
+++ b/packages/templ/ui/ui/badge/badge.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.badge",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-5 px-2 text-xs",
+      "default": "h-6 px-3 text-xs",
+      "lg": "h-8 px-4 text-sm"
+    },
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "secondary": "bg-muted text-foreground inset-ring-transparent",
+      "outline": "bg-transparent text-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/badge/badge_gen.go b/packages/templ/ui/ui/badge/badge_gen.go
new file mode 100644
index 0000000..341af08
--- /dev/null
+++ b/packages/templ/ui/ui/badge/badge_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/badge.json
+
+package badge
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed badge.variants.json
+var badgeVariantsJSON []byte
+
+// BadgeVariants is the CVA recipe shared verbatim by all runtimes.
+var BadgeVariants = uiutils.MustParseVariantRecipe(badgeVariantsJSON).ToVariants()
diff --git a/generated/ui/block/block.templ b/packages/templ/ui/ui/block/block.templ
similarity index 82%
rename from generated/ui/block/block.templ
rename to packages/templ/ui/ui/block/block.templ
index 730d2cb..78ddc2c 100644
--- a/generated/ui/block/block.templ
+++ b/packages/templ/ui/ui/block/block.templ
@@ -1,14 +1,15 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/block.json
 
 /*
-Block is a top-level page landmark (main, header, section, nav, …).
-Use for document structure; do not nest Block inside Block.
+Block is the one semantic root of a file (div, section, article, aside, header, footer, main, nav, figure, search, hgroup).
+Any file (block, composite, screen) may open on one Block; never nest Block inside Block in one file, never repeat it in a loop.
 */
 
 package block
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // BlockProps configures Block.
@@ -16,7 +17,7 @@ type BlockProps struct {
 	ID string
 	// Class — adds Tailwind utilities
 	Class string
-	// Tag — semantic landmark: main, header, section, footer, nav, article, aside, figure
+	// Tag — semantic tag: div (default), section, article, aside, header, footer, main, nav, figure, search, hgroup
 	Tag string
 	Attrs templ.Attributes
 }
diff --git a/packages/templ/ui/ui/block/block.variants.json b/packages/templ/ui/ui/block/block.variants.json
new file mode 100644
index 0000000..430ecf7
--- /dev/null
+++ b/packages/templ/ui/ui/block/block.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.block",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/block/block_gen.go b/packages/templ/ui/ui/block/block_gen.go
new file mode 100644
index 0000000..ab484d5
--- /dev/null
+++ b/packages/templ/ui/ui/block/block_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/block.json
+
+package block
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed block.variants.json
+var blockVariantsJSON []byte
+
+// BlockVariants is the CVA recipe shared verbatim by all runtimes.
+var BlockVariants = uiutils.MustParseVariantRecipe(blockVariantsJSON).ToVariants()
diff --git a/generated/ui/box/box.templ b/packages/templ/ui/ui/box/box.templ
similarity index 86%
rename from generated/ui/box/box.templ
rename to packages/templ/ui/ui/box/box.templ
index 7abedbe..5270234 100644
--- a/generated/ui/box/box.templ
+++ b/packages/templ/ui/ui/box/box.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/box.json
 
 /*
 Box is a generic layout wrapper for internal sections.
@@ -8,7 +9,7 @@ Not for top-level landmarks — use Block for page regions.
 package box
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // BoxProps configures Box.
diff --git a/packages/templ/ui/ui/box/box.variants.json b/packages/templ/ui/ui/box/box.variants.json
new file mode 100644
index 0000000..2ae4cf2
--- /dev/null
+++ b/packages/templ/ui/ui/box/box.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.box",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/box/box_gen.go b/packages/templ/ui/ui/box/box_gen.go
new file mode 100644
index 0000000..01c69ca
--- /dev/null
+++ b/packages/templ/ui/ui/box/box_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/box.json
+
+package box
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed box.variants.json
+var boxVariantsJSON []byte
+
+// BoxVariants is the CVA recipe shared verbatim by all runtimes.
+var BoxVariants = uiutils.MustParseVariantRecipe(boxVariantsJSON).ToVariants()
diff --git a/generated/ui/breadcrumb/breadcrumb.templ b/packages/templ/ui/ui/breadcrumb/breadcrumb.templ
similarity index 93%
rename from generated/ui/breadcrumb/breadcrumb.templ
rename to packages/templ/ui/ui/breadcrumb/breadcrumb.templ
index 35abd46..c0c30ce 100644
--- a/generated/ui/breadcrumb/breadcrumb.templ
+++ b/packages/templ/ui/ui/breadcrumb/breadcrumb.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/breadcrumb.json
 
 /*
 Breadcrumb shows the current page location within a hierarchy.
@@ -8,7 +9,7 @@ Renders nav with ordered links and aria-current on the active item.
 package breadcrumb
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // BreadcrumbItem is one BreadcrumbItem entry.
diff --git a/packages/templ/ui/ui/button-plain/button-plain.templ b/packages/templ/ui/ui/button-plain/button-plain.templ
new file mode 100644
index 0000000..b1a4ab7
--- /dev/null
+++ b/packages/templ/ui/ui/button-plain/button-plain.templ
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/button-plain.json
+
+/*
+ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it themselves.
+*/
+
+package buttonplain
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ButtonPlainProps configures ButtonPlain.
+type ButtonPlainProps struct {
+	// Class — adds Tailwind utilities
+	Class string
+	// Type — button type: button, submit, reset (ignored when Href is set)
+	Type string
+	// Disabled — blocks interaction
+	Disabled bool
+	// ID — element id
+	ID string
+	// Role — ARIA role override
+	Role string
+	// TabIndex — tab order override
+	TabIndex string
+	// AriaLabel — accessible name for unlabeled controls
+	AriaLabel string
+	Attrs templ.Attributes
+}
+
+// ButtonPlainClasses composes ButtonPlain classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func ButtonPlainClasses(p ButtonPlainProps) string {
+	return uiutils.Compose(ButtonPlainVariants, map[string]string{}, uiutils.If(p.Disabled, "pointer-events-none opacity-50", ""), p.Class)
+}
+
+// ButtonPlain renders the ButtonPlain contract.
+templ ButtonPlain(p ButtonPlainProps) {
+	<button
+		type={ uiutils.OneOfOr(p.Type, "button", "submit", "reset") }
+		class={ ButtonPlainClasses(p) }
+		disabled?={ p.Disabled }
+		if uiutils.IsSetStr(p.ID) {
+			id={ p.ID }
+		}
+		if uiutils.IsSetStr(p.Role) {
+			role={ p.Role }
+		}
+		if uiutils.IsSetStr(p.TabIndex) {
+			tabindex={ p.TabIndex }
+		}
+		if uiutils.IsSetStr(p.AriaLabel) {
+			aria-label={ p.AriaLabel }
+		}
+		{ p.Attrs... }
+	>
+		{ children... }
+	</button>
+}
diff --git a/packages/templ/ui/ui/button-plain/button-plain.variants.json b/packages/templ/ui/ui/button-plain/button-plain.variants.json
new file mode 100644
index 0000000..0e844f8
--- /dev/null
+++ b/packages/templ/ui/ui/button-plain/button-plain.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.button-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/button-plain/button-plain_gen.go b/packages/templ/ui/ui/button-plain/button-plain_gen.go
new file mode 100644
index 0000000..c2ad1b9
--- /dev/null
+++ b/packages/templ/ui/ui/button-plain/button-plain_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/button-plain.json
+
+package buttonplain
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed button-plain.variants.json
+var buttonPlainVariantsJSON []byte
+
+// ButtonPlainVariants is the CVA recipe shared verbatim by all runtimes.
+var ButtonPlainVariants = uiutils.MustParseVariantRecipe(buttonPlainVariantsJSON).ToVariants()
diff --git a/generated/ui/button/button.templ b/packages/templ/ui/ui/button/button.templ
similarity index 92%
rename from generated/ui/button/button.templ
rename to packages/templ/ui/ui/button/button.templ
index f7df2ea..a5d9390 100644
--- a/generated/ui/button/button.templ
+++ b/packages/templ/ui/ui/button/button.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/button.json
 
 /*
 Button triggers an action on click.
@@ -12,7 +13,7 @@ package button
 import (
 	"strconv"
 
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // ButtonProps configures Button.
@@ -21,6 +22,8 @@ type ButtonProps struct {
 	Variant string
 	// Size — density preset: default, sm, lg, icon
 	Size string
+	// Layout — sets layout
+	Layout string
 	// Class — adds Tailwind utilities
 	Class string
 	// Type — button type: button, submit, reset (ignored when Href is set)
@@ -54,6 +57,7 @@ func ButtonClasses(p ButtonProps) string {
 	return uiutils.Compose(ButtonVariants, map[string]string{
 		"variant": p.Variant,
 		"size": p.Size,
+		"layout": p.Layout,
 	}, uiutils.If(p.Disabled, "pointer-events-none opacity-50", ""), p.Class)
 }
 
@@ -73,6 +77,7 @@ templ Button(p ButtonProps) {
 				href={ p.Href }
 			}
 			class={ ButtonClasses(p) }
+			data-slot="button"
 			if uiutils.IsSetStr(p.ID) {
 				id={ p.ID }
 			}
@@ -102,6 +107,7 @@ templ Button(p ButtonProps) {
 		<button
 			type={ uiutils.OneOfOr(p.Type, "button", "submit", "reset") }
 			class={ ButtonClasses(p) }
+			data-slot="button"
 			disabled?={ p.Disabled }
 			if uiutils.IsSetStr(p.ID) {
 				id={ p.ID }
diff --git a/packages/templ/ui/ui/button/button.variants.json b/packages/templ/ui/ui/button/button.variants.json
new file mode 100644
index 0000000..6f6eed9
--- /dev/null
+++ b/packages/templ/ui/ui/button/button.variants.json
@@ -0,0 +1,61 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.button",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring transition-colors disabled:pointer-events-none disabled:opacity-50 rounded",
+  "keys": [
+    "variant",
+    "size",
+    "layout"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default",
+    "layout": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "outline": "bg-card text-foreground inset-ring-border",
+      "ghost": "bg-transparent text-foreground inset-ring-transparent",
+      "secondary": "bg-secondary text-secondary-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white hover:bg-destructive/90 inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      "link": "text-foreground inset-ring-transparent underline-offset-4 hover:underline"
+    },
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-4 text-sm",
+      "lg": "h-12 px-6 text-base"
+    },
+    "layout": {
+      "default": "",
+      "icon": ""
+    }
+  },
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "size-8 p-0 [&>svg]:size-4"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "size-10 p-0 [&>svg]:size-5"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "size-12 p-0 [&>svg]:size-6"
+    },
+    {
+      "variant": "outline",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    },
+    {
+      "variant": "ghost",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    }
+  ]
+}
diff --git a/packages/templ/ui/ui/button/button_gen.go b/packages/templ/ui/ui/button/button_gen.go
new file mode 100644
index 0000000..d9f0863
--- /dev/null
+++ b/packages/templ/ui/ui/button/button_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/button.json
+
+package button
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed button.variants.json
+var buttonVariantsJSON []byte
+
+// ButtonVariants is the CVA recipe shared verbatim by all runtimes.
+var ButtonVariants = uiutils.MustParseVariantRecipe(buttonVariantsJSON).ToVariants()
diff --git a/generated/ui/card/card.templ b/packages/templ/ui/ui/card/card.templ
similarity index 92%
rename from generated/ui/card/card.templ
rename to packages/templ/ui/ui/card/card.templ
index 278580f..c8adf26 100644
--- a/generated/ui/card/card.templ
+++ b/packages/templ/ui/ui/card/card.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
 
 /*
 Card groups related content in one bordered surface.
@@ -9,14 +10,14 @@ For semantic root elements (section, article), use CardClasses on a manual wrapp
 package card
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // CardProps configures Card.
 type CardProps struct {
 	// Class — adds Tailwind utilities
 	Class string
-	// Variant — surface preset: default, raised, kpi, muted, ghost, compact, flat, accent
+	// Variant — surface: default, muted, ghost, compact
 	Variant string
 	Attrs templ.Attributes
 }
@@ -33,6 +34,7 @@ func CardClasses(p CardProps) string {
 templ Card(p CardProps) {
 	<div
 		class={ CardClasses(p) }
+		data-slot="card"
 		{ p.Attrs... }
 	>
 		{ children... }
@@ -49,7 +51,7 @@ type CardHeaderProps struct {
 // CardHeaderClasses composes CardHeader classes without rendering —
 // the server-composition escape hatch for custom root elements.
 func CardHeaderClasses(p CardHeaderProps) string {
-	return uiutils.Cn("grid auto-rows-min items-start gap-1.5 px-6", p.Class)
+	return uiutils.Cn("grid auto-rows-min items-start gap-2", p.Class)
 }
 
 // CardHeader renders the CardHeader contract.
@@ -158,7 +160,7 @@ type CardContentProps struct {
 // CardContentClasses composes CardContent classes without rendering —
 // the server-composition escape hatch for custom root elements.
 func CardContentClasses(p CardContentProps) string {
-	return uiutils.Cn("px-6", p.Class)
+	return uiutils.Cn(p.Class)
 }
 
 // CardContent renders the CardContent contract.
@@ -181,7 +183,7 @@ type CardFooterProps struct {
 // CardFooterClasses composes CardFooter classes without rendering —
 // the server-composition escape hatch for custom root elements.
 func CardFooterClasses(p CardFooterProps) string {
-	return uiutils.Cn("flex items-center px-6", p.Class)
+	return uiutils.Cn("flex items-center", p.Class)
 }
 
 // CardFooter renders the CardFooter contract.
diff --git a/packages/templ/ui/ui/card/card.variants.json b/packages/templ/ui/ui/card/card.variants.json
new file mode 100644
index 0000000..6740b57
--- /dev/null
+++ b/packages/templ/ui/ui/card/card.variants.json
@@ -0,0 +1,20 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.card",
+  "base": "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "",
+      "muted": "bg-muted",
+      "ghost": "bg-transparent",
+      "compact": "gap-4 p-4"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/card/card_gen.go b/packages/templ/ui/ui/card/card_gen.go
new file mode 100644
index 0000000..8ddb0c0
--- /dev/null
+++ b/packages/templ/ui/ui/card/card_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/card.json
+
+package card
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed card.variants.json
+var cardVariantsJSON []byte
+
+// CardVariants is the CVA recipe shared verbatim by all runtimes.
+var CardVariants = uiutils.MustParseVariantRecipe(cardVariantsJSON).ToVariants()
diff --git a/generated/ui/checkbox/checkbox.templ b/packages/templ/ui/ui/checkbox/checkbox.templ
similarity index 91%
rename from generated/ui/checkbox/checkbox.templ
rename to packages/templ/ui/ui/checkbox/checkbox.templ
index 51ee420..adb41c0 100644
--- a/generated/ui/checkbox/checkbox.templ
+++ b/packages/templ/ui/ui/checkbox/checkbox.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/checkbox.json
 
 /*
 Checkbox is a native boolean form control.
@@ -8,7 +9,7 @@ Wireframe styling via Variant and Size; supports standard ARIA attrs.
 package checkbox
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // CheckboxProps configures Checkbox.
@@ -39,8 +40,8 @@ type CheckboxProps struct {
 // the server-composition escape hatch for custom root elements.
 func CheckboxClasses(p CheckboxProps) string {
 	return uiutils.Compose(CheckboxVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
diff --git a/packages/templ/ui/ui/checkbox/checkbox.variants.json b/packages/templ/ui/ui/checkbox/checkbox.variants.json
new file mode 100644
index 0000000..6b1dccc
--- /dev/null
+++ b/packages/templ/ui/ui/checkbox/checkbox.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.checkbox",
+  "base": "peer shrink-0 appearance-none bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary checkbox-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5",
+      "sm": "size-4"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/checkbox/checkbox_gen.go b/packages/templ/ui/ui/checkbox/checkbox_gen.go
new file mode 100644
index 0000000..c9c47b1
--- /dev/null
+++ b/packages/templ/ui/ui/checkbox/checkbox_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/checkbox.json
+
+package checkbox
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed checkbox.variants.json
+var checkboxVariantsJSON []byte
+
+// CheckboxVariants is the CVA recipe shared verbatim by all runtimes.
+var CheckboxVariants = uiutils.MustParseVariantRecipe(checkboxVariantsJSON).ToVariants()
diff --git a/generated/ui/container/container.templ b/packages/templ/ui/ui/container/container.templ
similarity index 88%
rename from generated/ui/container/container.templ
rename to packages/templ/ui/ui/container/container.templ
index fd3a7a0..07ed16e 100644
--- a/generated/ui/container/container.templ
+++ b/packages/templ/ui/ui/container/container.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/container.json
 
 /*
 Container wraps page content with a constrained width shell.
@@ -8,7 +9,7 @@ Optional main or section tag for inner layout regions.
 package container
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // ContainerProps configures Container.
diff --git a/packages/templ/ui/ui/container/container.variants.json b/packages/templ/ui/ui/container/container.variants.json
new file mode 100644
index 0000000..e2842e5
--- /dev/null
+++ b/packages/templ/ui/ui/container/container.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.container",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/container/container_gen.go b/packages/templ/ui/ui/container/container_gen.go
new file mode 100644
index 0000000..a15ed38
--- /dev/null
+++ b/packages/templ/ui/ui/container/container_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/container.json
+
+package container
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed container.variants.json
+var containerVariantsJSON []byte
+
+// ContainerVariants is the CVA recipe shared verbatim by all runtimes.
+var ContainerVariants = uiutils.MustParseVariantRecipe(containerVariantsJSON).ToVariants()
diff --git a/generated/ui/dialog/dialog.templ b/packages/templ/ui/ui/dialog/dialog.templ
similarity index 91%
rename from generated/ui/dialog/dialog.templ
rename to packages/templ/ui/ui/dialog/dialog.templ
index 580399c..d01d4e2 100644
--- a/generated/ui/dialog/dialog.templ
+++ b/packages/templ/ui/ui/dialog/dialog.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/dialog.json
 
 /*
 Dialog renders a native dialog root with an optional behavior hook.
@@ -8,7 +9,7 @@ The data-ui8kit hook defaults off; the registry ships no client JS.
 package dialog
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // DialogProps configures Dialog.
@@ -34,8 +35,8 @@ type DialogProps struct {
 // the server-composition escape hatch for custom root elements.
 func DialogClasses(p DialogProps) string {
 	return uiutils.Compose(DialogVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
diff --git a/packages/templ/ui/ui/dialog/dialog.variants.json b/packages/templ/ui/ui/dialog/dialog.variants.json
new file mode 100644
index 0000000..1bb166d
--- /dev/null
+++ b/packages/templ/ui/ui/dialog/dialog.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.dialog",
+  "base": "m-auto flex flex-col bg-background text-foreground inset-ring inset-ring-border shadow-lg backdrop:bg-foreground/20 rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "w-70",
+      "full": "h-full w-full",
+      "lg": "w-100",
+      "xl": "w-140"
+    },
+    "variant": {
+      "card": "bg-card text-card-foreground",
+      "default": "",
+      "sheet": "min-h-screen rounded-none"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/dialog/dialog_gen.go b/packages/templ/ui/ui/dialog/dialog_gen.go
new file mode 100644
index 0000000..adee165
--- /dev/null
+++ b/packages/templ/ui/ui/dialog/dialog_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/dialog.json
+
+package dialog
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed dialog.variants.json
+var dialogVariantsJSON []byte
+
+// DialogVariants is the CVA recipe shared verbatim by all runtimes.
+var DialogVariants = uiutils.MustParseVariantRecipe(dialogVariantsJSON).ToVariants()
diff --git a/generated/ui/disclosure/disclosure.templ b/packages/templ/ui/ui/disclosure/disclosure.templ
similarity index 75%
rename from generated/ui/disclosure/disclosure.templ
rename to packages/templ/ui/ui/disclosure/disclosure.templ
index 203ca6c..6745a5e 100644
--- a/generated/ui/disclosure/disclosure.templ
+++ b/packages/templ/ui/ui/disclosure/disclosure.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/disclosure.json
 
 /*
 Disclosure renders native details and summary elements.
@@ -8,19 +9,19 @@ Open is a static attribute only — no controlled-state contract.
 package disclosure
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // DisclosureProps configures Disclosure.
 type DisclosureProps struct {
 	// Variant — sets appearance preset
 	Variant string
-	// Size — sets density preset
-	Size string
 	// Class — adds Tailwind utilities
 	Class string
 	// Open — initial open state (static attribute only)
 	Open bool
+	// Name — group name: details of one name open one at a time (native exclusive accordion); leave out for independent items
+	Name string
 	Attrs templ.Attributes
 }
 
@@ -29,7 +30,6 @@ type DisclosureProps struct {
 func DisclosureClasses(p DisclosureProps) string {
 	return uiutils.Compose(DisclosureVariants, map[string]string{
 		"variant": p.Variant,
-		"size": p.Size,
 	}, p.Class)
 }
 
@@ -38,6 +38,9 @@ templ Disclosure(p DisclosureProps) {
 	<details
 		class={ DisclosureClasses(p) }
 		open?={ p.Open }
+		if uiutils.IsSetStr(p.Name) {
+			name={ p.Name }
+		}
 		{ p.Attrs... }
 	>
 		{ children... }
@@ -48,8 +51,6 @@ templ Disclosure(p DisclosureProps) {
 type SummaryProps struct {
 	// Variant — sets appearance preset
 	Variant string
-	// Size — sets density preset
-	Size string
 	// Class — adds Tailwind utilities
 	Class string
 	Attrs templ.Attributes
@@ -60,7 +61,6 @@ type SummaryProps struct {
 func SummaryClasses(p SummaryProps) string {
 	return uiutils.Compose(SummaryVariants, map[string]string{
 		"variant": p.Variant,
-		"size": p.Size,
 	}, p.Class)
 }
 
@@ -71,5 +71,10 @@ templ Summary(p SummaryProps) {
 		{ p.Attrs... }
 	>
 		{ children... }
+		<span
+			class="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+			aria-hidden="true"
+			data-slot="summary-indicator"
+		></span>
 	</summary>
 }
diff --git a/packages/templ/ui/ui/disclosure/disclosure.variants.json b/packages/templ/ui/ui/disclosure/disclosure.variants.json
new file mode 100644
index 0000000..b3a254a
--- /dev/null
+++ b/packages/templ/ui/ui/disclosure/disclosure.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.disclosure",
+  "base": "group",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "card": "rounded bg-card inset-ring inset-ring-border",
+      "default": "rounded inset-ring inset-ring-border",
+      "ghost": "",
+      "item": "border-b border-border last:border-b-0"
+    }
+  }
+}
diff --git a/generated/ui/disclosure/disclosure_gen.go b/packages/templ/ui/ui/disclosure/disclosure_gen.go
similarity index 78%
rename from generated/ui/disclosure/disclosure_gen.go
rename to packages/templ/ui/ui/disclosure/disclosure_gen.go
index 3fb10a3..34e14ae 100644
--- a/generated/ui/disclosure/disclosure_gen.go
+++ b/packages/templ/ui/ui/disclosure/disclosure_gen.go
@@ -1,11 +1,12 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/disclosure.json
 
 package disclosure
 
 import (
 	_ "embed"
 
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 //go:embed disclosure.variants.json
diff --git a/packages/templ/ui/ui/disclosure/summary.variants.json b/packages/templ/ui/ui/disclosure/summary.variants.json
new file mode 100644
index 0000000..6502ca6
--- /dev/null
+++ b/packages/templ/ui/ui/disclosure/summary.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.summary",
+  "base": "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs font-semibold",
+      "default": "text-sm font-semibold",
+      "lg": "text-base font-semibold"
+    },
+    "variant": {
+      "card": "py-2 pr-4 pl-4",
+      "default": "py-2 pr-4 pl-4",
+      "ghost": "py-2",
+      "item": "py-4 text-muted-foreground hover:text-foreground group-open:text-foreground"
+    }
+  }
+}
diff --git a/generated/ui/form/controls.templ b/packages/templ/ui/ui/form/controls.templ
similarity index 97%
rename from generated/ui/form/controls.templ
rename to packages/templ/ui/ui/form/controls.templ
index 0bc4651..d39c217 100644
--- a/generated/ui/form/controls.templ
+++ b/packages/templ/ui/ui/form/controls.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
 
 /*
 Form controls covers fieldset, legend, datalist, output, meter, and progress.
@@ -7,7 +8,7 @@ Form controls covers fieldset, legend, datalist, output, meter, and progress.
 package form
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // FieldsetProps configures Fieldset.
@@ -28,8 +29,8 @@ type FieldsetProps struct {
 // the server-composition escape hatch for custom root elements.
 func FieldsetClasses(p FieldsetProps) string {
 	return uiutils.Compose(FieldsetVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
@@ -65,8 +66,8 @@ type LegendProps struct {
 // the server-composition escape hatch for custom root elements.
 func LegendClasses(p LegendProps) string {
 	return uiutils.Compose(LegendVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
@@ -187,8 +188,8 @@ type MeterProps struct {
 // the server-composition escape hatch for custom root elements.
 func MeterClasses(p MeterProps) string {
 	return uiutils.Compose(MeterVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
@@ -241,8 +242,8 @@ type ProgressProps struct {
 // the server-composition escape hatch for custom root elements.
 func ProgressClasses(p ProgressProps) string {
 	return uiutils.Compose(ProgressVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
diff --git a/generated/ui/form/controls_gen.go b/packages/templ/ui/ui/form/controls_gen.go
similarity index 86%
rename from generated/ui/form/controls_gen.go
rename to packages/templ/ui/ui/form/controls_gen.go
index 19938d0..e48d243 100644
--- a/generated/ui/form/controls_gen.go
+++ b/packages/templ/ui/ui/form/controls_gen.go
@@ -1,11 +1,12 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/controls.json
 
 package form
 
 import (
 	_ "embed"
 
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 //go:embed fieldset.variants.json
diff --git a/packages/templ/ui/ui/form/fieldset.variants.json b/packages/templ/ui/ui/form/fieldset.variants.json
new file mode 100644
index 0000000..963b29d
--- /dev/null
+++ b/packages/templ/ui/ui/form/fieldset.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.fieldset",
+  "base": "grid",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "gap-2",
+      "lg": "gap-4",
+      "sm": "gap-2"
+    },
+    "variant": {
+      "card": "rounded p-4 inset-ring inset-ring-border",
+      "default": "",
+      "inline": "flex flex-wrap items-start gap-4"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/form/form-description.variants.json b/packages/templ/ui/ui/form/form-description.variants.json
new file mode 100644
index 0000000..82a749d
--- /dev/null
+++ b/packages/templ/ui/ui/form/form-description.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-description",
+  "base": "text-xs font-semibold text-muted-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/form/form-item.variants.json b/packages/templ/ui/ui/form/form-item.variants.json
new file mode 100644
index 0000000..e7da2d4
--- /dev/null
+++ b/packages/templ/ui/ui/form/form-item.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-item",
+  "base": "flex flex-col gap-2",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/form/form-message.variants.json b/packages/templ/ui/ui/form/form-message.variants.json
new file mode 100644
index 0000000..b58d5a8
--- /dev/null
+++ b/packages/templ/ui/ui/form/form-message.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-message",
+  "base": "text-xs font-semibold text-destructive",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/generated/ui/form/form.templ b/packages/templ/ui/ui/form/form.templ
similarity index 95%
rename from generated/ui/form/form.templ
rename to packages/templ/ui/ui/form/form.templ
index f6eda79..c6a7bdc 100644
--- a/generated/ui/form/form.templ
+++ b/packages/templ/ui/ui/form/form.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/form.json
 
 /*
 Form primitives: form wrapper, field item, description, and validation message.
@@ -8,7 +9,7 @@ Composes with Label, Input, and other controls.
 package form
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // FormProps configures Form.
diff --git a/packages/templ/ui/ui/form/form.variants.json b/packages/templ/ui/ui/form/form.variants.json
new file mode 100644
index 0000000..7a19129
--- /dev/null
+++ b/packages/templ/ui/ui/form/form.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form",
+  "base": "grid gap-4",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/generated/ui/form/form_gen.go b/packages/templ/ui/ui/form/form_gen.go
similarity index 87%
rename from generated/ui/form/form_gen.go
rename to packages/templ/ui/ui/form/form_gen.go
index 686ee27..9986d28 100644
--- a/generated/ui/form/form_gen.go
+++ b/packages/templ/ui/ui/form/form_gen.go
@@ -1,11 +1,12 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/form.json
 
 package form
 
 import (
 	_ "embed"
 
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 //go:embed form.variants.json
diff --git a/packages/templ/ui/ui/form/legend.variants.json b/packages/templ/ui/ui/form/legend.variants.json
new file mode 100644
index 0000000..7a2f0ab
--- /dev/null
+++ b/packages/templ/ui/ui/form/legend.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.legend",
+  "base": "font-bold",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs",
+      "default": "text-sm",
+      "lg": "text-base"
+    },
+    "variant": {
+      "default": "",
+      "muted": "text-muted-foreground"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/form/meter.variants.json b/packages/templ/ui/ui/form/meter.variants.json
new file mode 100644
index 0000000..b931112
--- /dev/null
+++ b/packages/templ/ui/ui/form/meter.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.meter",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/form/progress.variants.json b/packages/templ/ui/ui/form/progress.variants.json
new file mode 100644
index 0000000..ac8c766
--- /dev/null
+++ b/packages/templ/ui/ui/form/progress.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.progress",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/generated/ui/grid/grid.templ b/packages/templ/ui/ui/grid/grid.templ
similarity index 86%
rename from generated/ui/grid/grid.templ
rename to packages/templ/ui/ui/grid/grid.templ
index 2f13879..cacd434 100644
--- a/generated/ui/grid/grid.templ
+++ b/packages/templ/ui/ui/grid/grid.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/grid.json
 
 /*
 Grid lays out children in a CSS grid with optional column wrappers.
@@ -9,7 +10,7 @@ package grid
 import (
 	"strings"
 
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // GridProps configures Grid.
@@ -24,7 +25,7 @@ type GridProps struct {
 // GridClasses composes Grid classes without rendering —
 // the server-composition escape hatch for custom root elements.
 func GridClasses(p GridProps) string {
-	return uiutils.Compose(GridVariants, map[string]string{}, uiutils.If(strings.Contains(p.Class, "grid-cols-"), "", uiutils.MapOr(uiutils.DefaultIfEmpty(p.Cols, "1"), map[string]string{"1": "grid-cols-1", "2": "grid-cols-2", "3": "grid-cols-3", "4": "grid-cols-4", "5": "grid-cols-5", "6": "grid-cols-6", "7": "grid-cols-7", "8": "grid-cols-8", "9": "grid-cols-9", "10": "grid-cols-10", "11": "grid-cols-11", "12": "grid-cols-12", "1-2": "grid-cols-1 md:grid-cols-2", "1-3": "grid-cols-1 md:grid-cols-2 xl:grid-cols-3", "1-4": "grid-cols-1 md:grid-cols-2 xl:grid-cols-4"}, "")), p.Class)
+	return uiutils.Compose(GridVariants, map[string]string{}, uiutils.If(strings.Contains(p.Class, "grid-cols-"), "", uiutils.MapOr(uiutils.DefaultIfEmpty(p.Cols, "1"), map[string]string{"1": "grid-cols-1", "2": "grid-cols-2", "3": "grid-cols-3", "4": "grid-cols-4", "5": "grid-cols-5", "6": "grid-cols-6", "7": "grid-cols-7", "8": "grid-cols-8", "9": "grid-cols-9", "10": "grid-cols-10", "11": "grid-cols-11", "12": "grid-cols-12", "1-2": "grid-cols-1 md:grid-cols-2", "1-3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", "1-4": "grid-cols-1 sm:grid-cols-2 md:grid-cols-4", "2-3": "grid-cols-2 md:grid-cols-3", "2-4": "grid-cols-2 md:grid-cols-4", "2-6": "grid-cols-2 md:grid-cols-6", "3-6": "grid-cols-3 md:grid-cols-6"}, "")), p.Class)
 }
 
 // Grid renders the Grid contract.
diff --git a/packages/templ/ui/ui/grid/grid.variants.json b/packages/templ/ui/ui/grid/grid.variants.json
new file mode 100644
index 0000000..7fccc0f
--- /dev/null
+++ b/packages/templ/ui/ui/grid/grid.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.grid",
+  "base": "grid",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/grid/grid_gen.go b/packages/templ/ui/ui/grid/grid_gen.go
new file mode 100644
index 0000000..b9210a8
--- /dev/null
+++ b/packages/templ/ui/ui/grid/grid_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/grid.json
+
+package grid
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed grid.variants.json
+var gridVariantsJSON []byte
+
+// GridVariants is the CVA recipe shared verbatim by all runtimes.
+var GridVariants = uiutils.MustParseVariantRecipe(gridVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/group/group.templ b/packages/templ/ui/ui/group/group.templ
new file mode 100644
index 0000000..7b7ef72
--- /dev/null
+++ b/packages/templ/ui/ui/group/group.templ
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/group.json
+
+/*
+Group arranges children in a horizontal flex row.
+Supports fieldset for related form controls.
+*/
+
+package group
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// GroupProps configures Group.
+type GroupProps struct {
+	// Gap — sets gap: a Tailwind spacing step (0, 2, 4, 6, 8, 10, 12 = gap-N) or auto
+	Gap string
+	// Align — sets align
+	Align string
+	// Justify — sets justify
+	Justify string
+	// Class — adds Tailwind utilities
+	Class string
+	// Tag — div, fieldset, or dl. Use fieldset for related form controls.
+	Tag string
+	Attrs templ.Attributes
+}
+
+// GroupClasses composes Group classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func GroupClasses(p GroupProps) string {
+	return uiutils.Compose(GroupVariants, map[string]string{
+		"gap": p.Gap,
+		"align": p.Align,
+		"justify": p.Justify,
+	}, p.Class)
+}
+
+// Group renders the Group contract.
+templ Group(p GroupProps) {
+	switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupGroup) {
+		case "fieldset":
+			<fieldset
+				class={ GroupClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</fieldset>
+		case "dl":
+			<dl
+				class={ GroupClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</dl>
+		default:
+			<div
+				class={ GroupClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</div>
+	}
+}
diff --git a/packages/templ/ui/ui/group/group.variants.json b/packages/templ/ui/ui/group/group.variants.json
new file mode 100644
index 0000000..a2ef4f4
--- /dev/null
+++ b/packages/templ/ui/ui/group/group.variants.json
@@ -0,0 +1,40 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.group",
+  "base": "flex min-w-0",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "center",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/group/group_gen.go b/packages/templ/ui/ui/group/group_gen.go
new file mode 100644
index 0000000..14d01d7
--- /dev/null
+++ b/packages/templ/ui/ui/group/group_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/group.json
+
+package group
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed group.variants.json
+var groupVariantsJSON []byte
+
+// GroupVariants is the CVA recipe shared verbatim by all runtimes.
+var GroupVariants = uiutils.MustParseVariantRecipe(groupVariantsJSON).ToVariants()
diff --git a/generated/ui/icon/icon.templ b/packages/templ/ui/ui/icon/icon.templ
similarity index 95%
rename from generated/ui/icon/icon.templ
rename to packages/templ/ui/ui/icon/icon.templ
index 452b3ab..a88bff6 100644
--- a/generated/ui/icon/icon.templ
+++ b/packages/templ/ui/ui/icon/icon.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/icon.json
 
 /*
 Icon renders a class-based span, svg use reference, or text fallback.
@@ -8,7 +9,7 @@ Decorative icons are hidden from assistive technology by default.
 package icon
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // IconProps configures Icon.
@@ -40,8 +41,8 @@ type IconProps struct {
 // the server-composition escape hatch for custom root elements.
 func IconClasses(p IconProps) string {
 	return uiutils.Compose(IconVariants, map[string]string{
-		"type": uiutils.OneOfOr(p.Type, "class", "svg", "text"),
 		"size": p.Size,
+		"type": uiutils.OneOfOr(p.Type, "class", "svg", "text"),
 	}, uiutils.If(uiutils.OneOfOr(p.Type, "class", "svg", "text") == "class", p.BaseClass, ""), uiutils.If((uiutils.OneOfOr(p.Type, "class", "svg", "text") == "class" && uiutils.IsSetStr(p.Name)), uiutils.ConcatTrim(p.Prefix, p.Name), ""), p.Class)
 }
 
diff --git a/packages/templ/ui/ui/icon/icon.variants.json b/packages/templ/ui/ui/icon/icon.variants.json
new file mode 100644
index 0000000..5f73b17
--- /dev/null
+++ b/packages/templ/ui/ui/icon/icon.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.icon",
+  "base": "inline-block shrink-0",
+  "keys": [
+    "size",
+    "type"
+  ],
+  "defaults": {
+    "size": "default",
+    "type": "class"
+  },
+  "byKey": {
+    "size": {
+      "xs": "size-3",
+      "default": "size-4",
+      "md": "size-5",
+      "lg": "size-6"
+    },
+    "type": {
+      "class": "",
+      "svg": "",
+      "text": ""
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/icon/icon_gen.go b/packages/templ/ui/ui/icon/icon_gen.go
new file mode 100644
index 0000000..ee57594
--- /dev/null
+++ b/packages/templ/ui/ui/icon/icon_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/icon.json
+
+package icon
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed icon.variants.json
+var iconVariantsJSON []byte
+
+// IconVariants is the CVA recipe shared verbatim by all runtimes.
+var IconVariants = uiutils.MustParseVariantRecipe(iconVariantsJSON).ToVariants()
diff --git a/generated/ui/iconbadge/iconbadge.templ b/packages/templ/ui/ui/iconbadge/iconbadge.templ
similarity index 86%
rename from generated/ui/iconbadge/iconbadge.templ
rename to packages/templ/ui/ui/iconbadge/iconbadge.templ
index 35229c9..64915f2 100644
--- a/generated/ui/iconbadge/iconbadge.templ
+++ b/packages/templ/ui/ui/iconbadge/iconbadge.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/iconbadge.json
 
 /*
 IconBadge renders a small icon surface for nav rows, cards, and status blocks.
@@ -8,7 +9,7 @@ Pass the letter, glyph, or Icon node as children.
 package iconbadge
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // IconBadgeProps configures IconBadge.
diff --git a/packages/templ/ui/ui/iconbadge/iconbadge.variants.json b/packages/templ/ui/ui/iconbadge/iconbadge.variants.json
new file mode 100644
index 0000000..1c2e331
--- /dev/null
+++ b/packages/templ/ui/ui/iconbadge/iconbadge.variants.json
@@ -0,0 +1,31 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.iconbadge",
+  "base": "inline-flex shrink-0 items-center justify-center font-bold rounded",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-muted-foreground",
+      "primary": "bg-primary text-primary-foreground",
+      "accent": "bg-accent text-accent-foreground",
+      "secondary": "bg-secondary text-secondary-foreground",
+      "outline": "text-foreground inset-ring inset-ring-border",
+      "destructive": "bg-destructive text-white dark:bg-destructive/60"
+    },
+    "size": {
+      "xs": "size-6 text-xs",
+      "sm": "size-8 text-xs",
+      "default": "size-10 text-xs",
+      "lg": "size-12 text-sm",
+      "xl": "size-20 text-base"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/iconbadge/iconbadge_gen.go b/packages/templ/ui/ui/iconbadge/iconbadge_gen.go
new file mode 100644
index 0000000..4e4650c
--- /dev/null
+++ b/packages/templ/ui/ui/iconbadge/iconbadge_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/iconbadge.json
+
+package iconbadge
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed iconbadge.variants.json
+var iconbadgeVariantsJSON []byte
+
+// IconbadgeVariants is the CVA recipe shared verbatim by all runtimes.
+var IconbadgeVariants = uiutils.MustParseVariantRecipe(iconbadgeVariantsJSON).ToVariants()
diff --git a/generated/ui/image/image.templ b/packages/templ/ui/ui/image/image.templ
similarity index 95%
rename from generated/ui/image/image.templ
rename to packages/templ/ui/ui/image/image.templ
index 5cd3d96..6f0d265 100644
--- a/generated/ui/image/image.templ
+++ b/packages/templ/ui/ui/image/image.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/image.json
 
 /*
 Image renders accessible img, picture, and source primitives.
@@ -8,7 +9,7 @@ Use Decorative for purely visual images so alt stays empty.
 package image
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // ImageProps configures Image.
@@ -47,11 +48,11 @@ type ImageProps struct {
 // the server-composition escape hatch for custom root elements.
 func ImageClasses(p ImageProps) string {
 	return uiutils.Compose(ImageVariants, map[string]string{
-		"variant": p.Variant,
-		"size": p.Size,
+		"aspect": p.Aspect,
 		"fit": p.Fit,
 		"position": p.Position,
-		"aspect": p.Aspect,
+		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
diff --git a/packages/templ/ui/ui/image/image.variants.json b/packages/templ/ui/ui/image/image.variants.json
new file mode 100644
index 0000000..573b15b
--- /dev/null
+++ b/packages/templ/ui/ui/image/image.variants.json
@@ -0,0 +1,59 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.image",
+  "base": "block max-w-full",
+  "keys": [
+    "aspect",
+    "fit",
+    "position",
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "aspect": "auto",
+    "fit": "cover",
+    "position": "center",
+    "size": "auto",
+    "variant": "default"
+  },
+  "byKey": {
+    "aspect": {
+      "auto": "aspect-auto",
+      "square": "aspect-square",
+      "video": "aspect-video"
+    },
+    "fit": {
+      "contain": "object-contain",
+      "cover": "object-cover",
+      "fill": "object-fill",
+      "none": "object-none",
+      "scale-down": "object-scale-down"
+    },
+    "position": {
+      "bottom": "object-bottom",
+      "center": "object-center",
+      "left": "object-left",
+      "left-bottom": "object-left-bottom",
+      "left-top": "object-left-top",
+      "right": "object-right",
+      "right-bottom": "object-right-bottom",
+      "right-top": "object-right-top",
+      "top": "object-top"
+    },
+    "size": {
+      "auto": "",
+      "default": "",
+      "full": "h-full w-full",
+      "xs": "size-6",
+      "sm": "size-8",
+      "md": "size-12",
+      "lg": "size-16",
+      "xl": "size-20"
+    },
+    "variant": {
+      "default": "",
+      "logo": "object-contain"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/image/image_gen.go b/packages/templ/ui/ui/image/image_gen.go
new file mode 100644
index 0000000..5db34a2
--- /dev/null
+++ b/packages/templ/ui/ui/image/image_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/image.json
+
+package image
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed image.variants.json
+var imageVariantsJSON []byte
+
+// ImageVariants is the CVA recipe shared verbatim by all runtimes.
+var ImageVariants = uiutils.MustParseVariantRecipe(imageVariantsJSON).ToVariants()
diff --git a/generated/ui/inline/inline.templ b/packages/templ/ui/ui/inline/inline.templ
similarity index 83%
rename from generated/ui/inline/inline.templ
rename to packages/templ/ui/ui/inline/inline.templ
index db0db79..c2b22bc 100644
--- a/generated/ui/inline/inline.templ
+++ b/packages/templ/ui/ui/inline/inline.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/inline.json
 
 /*
 Inline renders inline copy as a span. Use Text for paragraph blocks and
@@ -8,7 +9,7 @@ Title (as 1–6) for headings.
 package inline
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // InlineProps configures Inline.
diff --git a/packages/templ/ui/ui/inline/inline.variants.json b/packages/templ/ui/ui/inline/inline.variants.json
new file mode 100644
index 0000000..8c11e25
--- /dev/null
+++ b/packages/templ/ui/ui/inline/inline.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.inline",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/inline/inline_gen.go b/packages/templ/ui/ui/inline/inline_gen.go
new file mode 100644
index 0000000..badc7a7
--- /dev/null
+++ b/packages/templ/ui/ui/inline/inline_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/inline.json
+
+package inline
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed inline.variants.json
+var inlineVariantsJSON []byte
+
+// InlineVariants is the CVA recipe shared verbatim by all runtimes.
+var InlineVariants = uiutils.MustParseVariantRecipe(inlineVariantsJSON).ToVariants()
diff --git a/generated/ui/input/input.templ b/packages/templ/ui/ui/input/input.templ
similarity index 93%
rename from generated/ui/input/input.templ
rename to packages/templ/ui/ui/input/input.templ
index 855f948..1960970 100644
--- a/generated/ui/input/input.templ
+++ b/packages/templ/ui/ui/input/input.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/input.json
 
 /*
 Input is a single-line native text field.
@@ -8,7 +9,7 @@ Supports types, validation attrs, and wireframe variant/size classes.
 package input
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // InputProps configures Input.
@@ -44,8 +45,8 @@ type InputProps struct {
 // the server-composition escape hatch for custom root elements.
 func InputClasses(p InputProps) string {
 	return uiutils.Compose(InputVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
diff --git a/packages/templ/ui/ui/input/input.variants.json b/packages/templ/ui/ui/input/input.variants.json
new file mode 100644
index 0000000..43bf16e
--- /dev/null
+++ b/packages/templ/ui/ui/input/input.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.input",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-base md:text-sm",
+      "default": "h-10 px-3 text-base md:text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/input/input_gen.go b/packages/templ/ui/ui/input/input_gen.go
new file mode 100644
index 0000000..2e62e72
--- /dev/null
+++ b/packages/templ/ui/ui/input/input_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/input.json
+
+package input
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed input.variants.json
+var inputVariantsJSON []byte
+
+// InputVariants is the CVA recipe shared verbatim by all runtimes.
+var InputVariants = uiutils.MustParseVariantRecipe(inputVariantsJSON).ToVariants()
diff --git a/generated/ui/label/label.templ b/packages/templ/ui/ui/label/label.templ
similarity index 84%
rename from generated/ui/label/label.templ
rename to packages/templ/ui/ui/label/label.templ
index 4fb3494..feac2a8 100644
--- a/generated/ui/label/label.templ
+++ b/packages/templ/ui/ui/label/label.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/label.json
 
 /*
 Label associates visible text with a form control via the for attribute.
@@ -7,7 +8,7 @@ Label associates visible text with a form control via the for attribute.
 package label
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // LabelProps configures Label.
diff --git a/packages/templ/ui/ui/label/label.variants.json b/packages/templ/ui/ui/label/label.variants.json
new file mode 100644
index 0000000..bdebe07
--- /dev/null
+++ b/packages/templ/ui/ui/label/label.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.label",
+  "base": "text-xs font-bold text-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/label/label_gen.go b/packages/templ/ui/ui/label/label_gen.go
new file mode 100644
index 0000000..3bb26a7
--- /dev/null
+++ b/packages/templ/ui/ui/label/label_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/label.json
+
+package label
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed label.variants.json
+var labelVariantsJSON []byte
+
+// LabelVariants is the CVA recipe shared verbatim by all runtimes.
+var LabelVariants = uiutils.MustParseVariantRecipe(labelVariantsJSON).ToVariants()
diff --git a/generated/ui/linebreak/linebreak.templ b/packages/templ/ui/ui/linebreak/linebreak.templ
similarity index 85%
rename from generated/ui/linebreak/linebreak.templ
rename to packages/templ/ui/ui/linebreak/linebreak.templ
index b2e6cd6..35aff39 100644
--- a/generated/ui/linebreak/linebreak.templ
+++ b/packages/templ/ui/ui/linebreak/linebreak.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/linebreak.json
 
 /*
 Break renders br or wbr for controlled inline wrapping.
@@ -7,7 +8,7 @@ Break renders br or wbr for controlled inline wrapping.
 package linebreak
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // BreakProps configures Break.
diff --git a/packages/templ/ui/ui/linebreak/linebreak.variants.json b/packages/templ/ui/ui/linebreak/linebreak.variants.json
new file mode 100644
index 0000000..eafffc3
--- /dev/null
+++ b/packages/templ/ui/ui/linebreak/linebreak.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.linebreak",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/linebreak/linebreak_gen.go b/packages/templ/ui/ui/linebreak/linebreak_gen.go
new file mode 100644
index 0000000..778fc98
--- /dev/null
+++ b/packages/templ/ui/ui/linebreak/linebreak_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/linebreak.json
+
+package linebreak
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed linebreak.variants.json
+var linebreakVariantsJSON []byte
+
+// LinebreakVariants is the CVA recipe shared verbatim by all runtimes.
+var LinebreakVariants = uiutils.MustParseVariantRecipe(linebreakVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/link-plain/link-plain.templ b/packages/templ/ui/ui/link-plain/link-plain.templ
new file mode 100644
index 0000000..7a1d503
--- /dev/null
+++ b/packages/templ/ui/ui/link-plain/link-plain.templ
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/link-plain.json
+
+/*
+LinkPlain is a bare anchor: no styling beyond Class.
+*/
+
+package linkplain
+
+import (
+	"strconv"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// LinkPlainProps configures LinkPlain.
+type LinkPlainProps struct {
+	// Class — adds Tailwind utilities
+	Class string
+	Href string
+	// Target — explicit target; External implies _blank
+	Target string
+	// Rel — explicit rel; external links default to noopener noreferrer
+	Rel string
+	Download string
+	// External — opens in a new tab with safe rel defaults
+	External bool
+	// Disabled — visually and semantically disables the link
+	Disabled bool
+	AriaCurrent string
+	AriaLabel string
+	ID string
+	Role string
+	Attrs templ.Attributes
+}
+
+// LinkPlainClasses composes LinkPlain classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func LinkPlainClasses(p LinkPlainProps) string {
+	return uiutils.Compose(LinkPlainVariants, map[string]string{}, uiutils.If(p.Disabled, "pointer-events-none opacity-50", ""), p.Class)
+}
+
+func linkPlainTarget(p LinkPlainProps) string {
+	return uiutils.If(uiutils.IsSetStr(p.Target), p.Target, uiutils.If(p.External, "_blank", ""))
+}
+
+func linkPlainRel(p LinkPlainProps) string {
+	return uiutils.If(uiutils.IsSetStr(p.Rel), p.Rel, uiutils.If((p.External || linkPlainTarget(p) == "_blank"), "noopener noreferrer", ""))
+}
+
+// LinkPlain renders the LinkPlain contract.
+templ LinkPlain(p LinkPlainProps) {
+	<a
+		if uiutils.IsSetStr(p.Href) {
+			href={ p.Href }
+		}
+		class={ LinkPlainClasses(p) }
+		if uiutils.IsSetStr(p.ID) {
+			id={ p.ID }
+		}
+		if uiutils.IsSetStr(linkPlainTarget(p)) {
+			target={ linkPlainTarget(p) }
+		}
+		if uiutils.IsSetStr(linkPlainRel(p)) {
+			rel={ linkPlainRel(p) }
+		}
+		if uiutils.IsSetStr(p.Download) {
+			download={ p.Download }
+		}
+		if uiutils.IsSetStr(p.Role) {
+			role={ p.Role }
+		}
+		if uiutils.IsSetStr(p.AriaLabel) {
+			aria-label={ p.AriaLabel }
+		}
+		if uiutils.IsSetStr(p.AriaCurrent) {
+			aria-current={ p.AriaCurrent }
+		}
+		if p.Disabled {
+			aria-disabled={ "true" }
+		}
+		if p.Disabled {
+			tabindex={ strconv.Itoa(-1) }
+		}
+		{ p.Attrs... }
+	>
+		{ children... }
+	</a>
+}
diff --git a/packages/templ/ui/ui/link-plain/link-plain.variants.json b/packages/templ/ui/ui/link-plain/link-plain.variants.json
new file mode 100644
index 0000000..9915f9b
--- /dev/null
+++ b/packages/templ/ui/ui/link-plain/link-plain.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.link-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/link-plain/link-plain_gen.go b/packages/templ/ui/ui/link-plain/link-plain_gen.go
new file mode 100644
index 0000000..0c27217
--- /dev/null
+++ b/packages/templ/ui/ui/link-plain/link-plain_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/link-plain.json
+
+package linkplain
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed link-plain.variants.json
+var linkPlainVariantsJSON []byte
+
+// LinkPlainVariants is the CVA recipe shared verbatim by all runtimes.
+var LinkPlainVariants = uiutils.MustParseVariantRecipe(linkPlainVariantsJSON).ToVariants()
diff --git a/generated/ui/link/link.templ b/packages/templ/ui/ui/link/link.templ
similarity index 94%
rename from generated/ui/link/link.templ
rename to packages/templ/ui/ui/link/link.templ
index 4d8049f..1dc491d 100644
--- a/generated/ui/link/link.templ
+++ b/packages/templ/ui/ui/link/link.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/link.json
 
 /*
 Link renders a semantic anchor for navigation and prose.
@@ -10,7 +11,7 @@ package link
 import (
 	"strconv"
 
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // LinkProps configures Link.
@@ -42,8 +43,8 @@ type LinkProps struct {
 // the server-composition escape hatch for custom root elements.
 func LinkClasses(p LinkProps) string {
 	return uiutils.Compose(LinkVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, uiutils.If(p.Disabled, "pointer-events-none opacity-50", ""), p.Class)
 }
 
diff --git a/packages/templ/ui/ui/link/link.variants.json b/packages/templ/ui/ui/link/link.variants.json
new file mode 100644
index 0000000..6478252
--- /dev/null
+++ b/packages/templ/ui/ui/link/link.variants.json
@@ -0,0 +1,28 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.link",
+  "base": "inline-flex items-center underline-offset-4",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "gap-2 text-sm font-medium",
+      "default": "gap-2 text-base font-semibold",
+      "md": "gap-2 text-xl font-semibold",
+      "lg": "gap-2 text-2xl font-semibold"
+    },
+    "variant": {
+      "block": "flex w-full text-foreground",
+      "default": "text-foreground hover:underline",
+      "external": "text-foreground hover:underline",
+      "muted": "text-muted-foreground hover:text-foreground",
+      "nav": "text-foreground"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/link/link_gen.go b/packages/templ/ui/ui/link/link_gen.go
new file mode 100644
index 0000000..48b7b94
--- /dev/null
+++ b/packages/templ/ui/ui/link/link_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/link.json
+
+package link
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed link.variants.json
+var linkVariantsJSON []byte
+
+// LinkVariants is the CVA recipe shared verbatim by all runtimes.
+var LinkVariants = uiutils.MustParseVariantRecipe(linkVariantsJSON).ToVariants()
diff --git a/generated/ui/list/list.templ b/packages/templ/ui/ui/list/list.templ
similarity index 93%
rename from generated/ui/list/list.templ
rename to packages/templ/ui/ui/list/list.templ
index 9065157..1f7496d 100644
--- a/generated/ui/list/list.templ
+++ b/packages/templ/ui/ui/list/list.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/list.json
 
 /*
 List renders semantic ul, ol, dl, or menu lists with ListItem children.
@@ -9,7 +10,7 @@ package list
 import (
 	"strconv"
 
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // ListProps configures List.
diff --git a/packages/templ/ui/ui/list/list.variants.json b/packages/templ/ui/ui/list/list.variants.json
new file mode 100644
index 0000000..59bcd92
--- /dev/null
+++ b/packages/templ/ui/ui/list/list.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.list",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/list/list_gen.go b/packages/templ/ui/ui/list/list_gen.go
new file mode 100644
index 0000000..8bd98fd
--- /dev/null
+++ b/packages/templ/ui/ui/list/list_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/list.json
+
+package list
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed list.variants.json
+var listVariantsJSON []byte
+
+// ListVariants is the CVA recipe shared verbatim by all runtimes.
+var ListVariants = uiutils.MustParseVariantRecipe(listVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/lucide-icon/lucide-icon.templ b/packages/templ/ui/ui/lucide-icon/lucide-icon.templ
new file mode 100644
index 0000000..a4503d1
--- /dev/null
+++ b/packages/templ/ui/ui/lucide-icon/lucide-icon.templ
@@ -0,0 +1,85 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/assets/LucideIcon.templ
+/*
+LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file
+(lucide_icons.go). Decorative (aria-hidden) unless a Label is given.
+*/
+
+package lucideicon
+
+import (
+	"html"
+	"sort"
+	"strconv"
+	"strings"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// LucideIconProps configures LucideIcon. Size and StrokeWidth default to 16 and 2.
+type LucideIconProps struct {
+	Name        string
+	Size        int
+	StrokeWidth int
+	Label       string
+	Class       string
+	Attrs       templ.Attributes
+}
+
+func orInt(v, d int) string {
+	if v == 0 {
+		return strconv.Itoa(d)
+	}
+	return strconv.Itoa(v)
+}
+
+// glyph is the inner markup of the icon: its nodes with their attributes in name order, escaped.
+func glyph(name string) string {
+	nodes, ok := lucide[name]
+	if !ok {
+		nodes = lucide["circle"]
+	}
+	var b strings.Builder
+	for _, n := range nodes {
+		keys := make([]string, 0, len(n.Attrs))
+		for k := range n.Attrs {
+			keys = append(keys, k)
+		}
+		sort.Strings(keys)
+		b.WriteString("<" + n.Tag)
+		for _, k := range keys {
+			b.WriteString(" " + k + "=\"" + html.EscapeString(n.Attrs[k]) + "\"")
+		}
+		b.WriteString("></" + n.Tag + ">")
+	}
+	return b.String()
+}
+
+// LucideIcon renders the glyph as an inline svg.
+templ LucideIcon(p LucideIconProps) {
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width={ orInt(p.Size, 16) }
+		height={ orInt(p.Size, 16) }
+		fill="none"
+		stroke="currentColor"
+		stroke-width={ orInt(p.StrokeWidth, 2) }
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={ uiutils.Cn("inline-block shrink-0", p.Class) }
+		if p.Label == "" {
+			aria-hidden="true"
+		} else {
+			aria-label={ p.Label }
+			role="img"
+		}
+		data-slot="icon"
+		if p.Name != "" {
+			data-lucide={ p.Name }
+		}
+		{ p.Attrs... }
+	>
+		@templ.Raw(glyph(p.Name))
+	</svg>
+}
diff --git a/packages/templ/ui/ui/lucide-icon/lucide_icons.go b/packages/templ/ui/ui/lucide-icon/lucide_icons.go
new file mode 100644
index 0000000..b1bf455
--- /dev/null
+++ b/packages/templ/ui/ui/lucide-icon/lucide_icons.go
@@ -0,0 +1,1488 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/assets/lucide-icons.json
+// Lucide icons (ISC license, https://lucide.dev), harvested into xgen/specs/assets/lucide-icons.json.
+
+package lucideicon
+
+type glyphNode struct {
+	Tag   string
+	Attrs map[string]string
+}
+
+var lucide = map[string][]glyphNode{
+	"accessibility": {
+		{"circle", map[string]string{"cx": "16", "cy": "4", "r": "1"}},
+		{"path", map[string]string{"d": "m18 19 1-7-6 1"}},
+		{"path", map[string]string{"d": "m5 8 3-3 5.5 3-2.36 3.5"}},
+		{"path", map[string]string{"d": "M4.24 14.5a5 5 0 0 0 6.88 6"}},
+		{"path", map[string]string{"d": "M13.76 17.5a5 5 0 0 0-6.88-6"}},
+	},
+	"activity": {
+		{"path", map[string]string{"d": "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"}},
+	},
+	"anchor": {
+		{"path", map[string]string{"d": "M12 6v16"}},
+		{"path", map[string]string{"d": "m19 13 2-1a9 9 0 0 1-18 0l2 1"}},
+		{"path", map[string]string{"d": "M9 11h6"}},
+		{"circle", map[string]string{"cx": "12", "cy": "4", "r": "2"}},
+	},
+	"archive": {
+		{"rect", map[string]string{"width": "20", "height": "5", "x": "2", "y": "3", "rx": "1"}},
+		{"path", map[string]string{"d": "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"}},
+		{"path", map[string]string{"d": "M10 12h4"}},
+	},
+	"arrow-down": {
+		{"path", map[string]string{"d": "M12 5v14"}},
+		{"path", map[string]string{"d": "m19 12-7 7-7-7"}},
+	},
+	"arrow-down-up": {
+		{"path", map[string]string{"d": "m3 16 4 4 4-4"}},
+		{"path", map[string]string{"d": "M7 20V4"}},
+		{"path", map[string]string{"d": "m21 8-4-4-4 4"}},
+		{"path", map[string]string{"d": "M17 4v16"}},
+	},
+	"arrow-left": {
+		{"path", map[string]string{"d": "m12 19-7-7 7-7"}},
+		{"path", map[string]string{"d": "M19 12H5"}},
+	},
+	"arrow-right": {
+		{"path", map[string]string{"d": "M5 12h14"}},
+		{"path", map[string]string{"d": "m12 5 7 7-7 7"}},
+	},
+	"arrow-up": {
+		{"path", map[string]string{"d": "m5 12 7-7 7 7"}},
+		{"path", map[string]string{"d": "M12 19V5"}},
+	},
+	"arrow-up-right": {
+		{"path", map[string]string{"d": "M7 7h10v10"}},
+		{"path", map[string]string{"d": "M7 17 17 7"}},
+	},
+	"at-sign": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "4"}},
+		{"path", map[string]string{"d": "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"}},
+	},
+	"badge-check": {
+		{"path", map[string]string{"d": "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}},
+		{"path", map[string]string{"d": "m16 9-5.5 5.5L8 12"}},
+	},
+	"badge-dollar-sign": {
+		{"path", map[string]string{"d": "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}},
+		{"path", map[string]string{"d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}},
+		{"path", map[string]string{"d": "M12 18V6"}},
+	},
+	"ban": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "M4.929 4.929 19.07 19.071"}},
+	},
+	"banknote": {
+		{"rect", map[string]string{"width": "20", "height": "12", "x": "2", "y": "6", "rx": "2"}},
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "2"}},
+		{"path", map[string]string{"d": "M6 12h.01M18 12h.01"}},
+	},
+	"bell": {
+		{"path", map[string]string{"d": "M10.268 21a2 2 0 0 0 3.464 0"}},
+		{"path", map[string]string{"d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"}},
+	},
+	"blocks": {
+		{"path", map[string]string{"d": "M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"}},
+		{"rect", map[string]string{"x": "14", "y": "2", "width": "8", "height": "8", "rx": "1"}},
+	},
+	"bold": {
+		{"path", map[string]string{"d": "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"}},
+	},
+	"bolt": {
+		{"path", map[string]string{"d": "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"}},
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "4"}},
+	},
+	"book-open": {
+		{"path", map[string]string{"d": "M12 5v16"}},
+		{"path", map[string]string{"d": "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}},
+	},
+	"book-open-text": {
+		{"path", map[string]string{"d": "M12 5v16"}},
+		{"path", map[string]string{"d": "M16 13h2"}},
+		{"path", map[string]string{"d": "M16 9h2"}},
+		{"path", map[string]string{"d": "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}},
+		{"path", map[string]string{"d": "M6 13h2"}},
+		{"path", map[string]string{"d": "M6 9h2"}},
+	},
+	"book-x": {
+		{"path", map[string]string{"d": "m14.5 7.5-5 5"}},
+		{"path", map[string]string{"d": "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"}},
+		{"path", map[string]string{"d": "m9.5 7.5 5 5"}},
+	},
+	"bookmark": {
+		{"path", map[string]string{"d": "M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"}},
+	},
+	"bot": {
+		{"path", map[string]string{"d": "M12 8V4H8"}},
+		{"rect", map[string]string{"width": "16", "height": "12", "x": "4", "y": "8", "rx": "2"}},
+		{"path", map[string]string{"d": "M2 14h2"}},
+		{"path", map[string]string{"d": "M20 14h2"}},
+		{"path", map[string]string{"d": "M15 13v2"}},
+		{"path", map[string]string{"d": "M9 13v2"}},
+	},
+	"boxes": {
+		{"path", map[string]string{"d": "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"}},
+		{"path", map[string]string{"d": "m7 16.5-4.74-2.85"}},
+		{"path", map[string]string{"d": "m7 16.5 5-3"}},
+		{"path", map[string]string{"d": "M7 16.5v5.17"}},
+		{"path", map[string]string{"d": "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"}},
+		{"path", map[string]string{"d": "m17 16.5-5-3"}},
+		{"path", map[string]string{"d": "m17 16.5 4.74-2.85"}},
+		{"path", map[string]string{"d": "M17 16.5v5.17"}},
+		{"path", map[string]string{"d": "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"}},
+		{"path", map[string]string{"d": "M12 8 7.26 5.15"}},
+		{"path", map[string]string{"d": "m12 8 4.74-2.85"}},
+		{"path", map[string]string{"d": "M12 13.5V8"}},
+	},
+	"brain": {
+		{"path", map[string]string{"d": "M12 18V5"}},
+		{"path", map[string]string{"d": "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"}},
+		{"path", map[string]string{"d": "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"}},
+		{"path", map[string]string{"d": "M17.997 5.125a4 4 0 0 1 2.526 5.77"}},
+		{"path", map[string]string{"d": "M18 18a4 4 0 0 0 2-7.464"}},
+		{"path", map[string]string{"d": "M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"}},
+		{"path", map[string]string{"d": "M6 18a4 4 0 0 1-2-7.464"}},
+		{"path", map[string]string{"d": "M6.003 5.125a4 4 0 0 0-2.526 5.77"}},
+	},
+	"briefcase": {
+		{"path", map[string]string{"d": "M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"}},
+		{"rect", map[string]string{"width": "20", "height": "14", "x": "2", "y": "6", "rx": "2"}},
+	},
+	"brush": {
+		{"path", map[string]string{"d": "m11 10 3 3"}},
+		{"path", map[string]string{"d": "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"}},
+		{"path", map[string]string{"d": "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"}},
+	},
+	"building": {
+		{"path", map[string]string{"d": "M12 10h.01"}},
+		{"path", map[string]string{"d": "M12 14h.01"}},
+		{"path", map[string]string{"d": "M12 6h.01"}},
+		{"path", map[string]string{"d": "M16 10h.01"}},
+		{"path", map[string]string{"d": "M16 14h.01"}},
+		{"path", map[string]string{"d": "M16 6h.01"}},
+		{"path", map[string]string{"d": "M8 10h.01"}},
+		{"path", map[string]string{"d": "M8 14h.01"}},
+		{"path", map[string]string{"d": "M8 6h.01"}},
+		{"path", map[string]string{"d": "M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"}},
+		{"rect", map[string]string{"x": "4", "y": "2", "width": "16", "height": "20", "rx": "2"}},
+	},
+	"calendar": {
+		{"path", map[string]string{"d": "M8 2v3"}},
+		{"path", map[string]string{"d": "M16 2v3"}},
+		{"rect", map[string]string{"x": "3", "y": "3", "width": "18", "height": "18", "rx": "2"}},
+		{"path", map[string]string{"d": "M3 9h18"}},
+	},
+	"calendar-days": {
+		{"path", map[string]string{"d": "M8 2v3"}},
+		{"path", map[string]string{"d": "M16 2v3"}},
+		{"rect", map[string]string{"x": "3", "y": "3", "width": "18", "height": "18", "rx": "2"}},
+		{"path", map[string]string{"d": "M3 9h18"}},
+		{"path", map[string]string{"d": "M8 13h.01"}},
+		{"path", map[string]string{"d": "M12 13h.01"}},
+		{"path", map[string]string{"d": "M16 13h.01"}},
+		{"path", map[string]string{"d": "M8 17h.01"}},
+		{"path", map[string]string{"d": "M12 17h.01"}},
+		{"path", map[string]string{"d": "M16 17h.01"}},
+	},
+	"calendar-range": {
+		{"rect", map[string]string{"x": "3", "y": "3", "width": "18", "height": "18", "rx": "2"}},
+		{"path", map[string]string{"d": "M16 2v3"}},
+		{"path", map[string]string{"d": "M3 9h18"}},
+		{"path", map[string]string{"d": "M8 2v3"}},
+		{"path", map[string]string{"d": "M17 13h-6"}},
+		{"path", map[string]string{"d": "M13 17H7"}},
+		{"path", map[string]string{"d": "M7 13h.01"}},
+		{"path", map[string]string{"d": "M17 17h.01"}},
+	},
+	"camera": {
+		{"path", map[string]string{"d": "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"}},
+		{"circle", map[string]string{"cx": "12", "cy": "13", "r": "3"}},
+	},
+	"chart-area": {
+		{"path", map[string]string{"d": "M3 3v16a2 2 0 0 0 2 2h16"}},
+		{"path", map[string]string{"d": "M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"}},
+	},
+	"chart-column": {
+		{"path", map[string]string{"d": "M3 3v16a2 2 0 0 0 2 2h16"}},
+		{"path", map[string]string{"d": "M18 17V9"}},
+		{"path", map[string]string{"d": "M13 17V5"}},
+		{"path", map[string]string{"d": "M8 17v-3"}},
+	},
+	"chart-line": {
+		{"path", map[string]string{"d": "M3 3v16a2 2 0 0 0 2 2h16"}},
+		{"path", map[string]string{"d": "m19 9-5 5-4-4-3 3"}},
+	},
+	"chart-pie": {
+		{"path", map[string]string{"d": "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"}},
+		{"path", map[string]string{"d": "M21.21 15.89A10 10 0 1 1 8 2.83"}},
+	},
+	"chart-scatter": {
+		{"circle", map[string]string{"cx": "7.5", "cy": "7.5", "r": ".5", "fill": "currentColor"}},
+		{"circle", map[string]string{"cx": "18.5", "cy": "5.5", "r": ".5", "fill": "currentColor"}},
+		{"circle", map[string]string{"cx": "11.5", "cy": "11.5", "r": ".5", "fill": "currentColor"}},
+		{"circle", map[string]string{"cx": "7.5", "cy": "16.5", "r": ".5", "fill": "currentColor"}},
+		{"circle", map[string]string{"cx": "17.5", "cy": "14.5", "r": ".5", "fill": "currentColor"}},
+		{"path", map[string]string{"d": "M3 3v16a2 2 0 0 0 2 2h16"}},
+	},
+	"check": {
+		{"path", map[string]string{"d": "M20 6 9 17l-5-5"}},
+	},
+	"chevron-down": {
+		{"path", map[string]string{"d": "m6 9 6 6 6-6"}},
+	},
+	"chevron-left": {
+		{"path", map[string]string{"d": "m15 18-6-6 6-6"}},
+	},
+	"chevron-right": {
+		{"path", map[string]string{"d": "m9 18 6-6-6-6"}},
+	},
+	"chevron-up": {
+		{"path", map[string]string{"d": "m18 15-6-6-6 6"}},
+	},
+	"chevrons-down": {
+		{"path", map[string]string{"d": "m7 6 5 5 5-5"}},
+		{"path", map[string]string{"d": "m7 13 5 5 5-5"}},
+	},
+	"chevrons-up": {
+		{"path", map[string]string{"d": "m17 11-5-5-5 5"}},
+		{"path", map[string]string{"d": "m17 18-5-5-5 5"}},
+	},
+	"chevrons-up-down": {
+		{"path", map[string]string{"d": "m7 15 5 5 5-5"}},
+		{"path", map[string]string{"d": "m7 9 5-5 5 5"}},
+	},
+	"circle": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+	},
+	"circle-alert": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"line", map[string]string{"x1": "12", "x2": "12", "y1": "8", "y2": "12"}},
+		{"line", map[string]string{"x1": "12", "x2": "12.01", "y1": "16", "y2": "16"}},
+	},
+	"circle-check": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "m16 9-5.5 5.5L8 12"}},
+	},
+	"circle-dollar-sign": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}},
+		{"path", map[string]string{"d": "M12 18V6"}},
+	},
+	"circle-dot": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "1"}},
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+	},
+	"circle-play": {
+		{"path", map[string]string{"d": "M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"}},
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+	},
+	"circle-plus": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "M8 12h8"}},
+		{"path", map[string]string{"d": "M12 8v8"}},
+	},
+	"circle-question-mark": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}},
+		{"path", map[string]string{"d": "M12 17h.01"}},
+	},
+	"circle-slash": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"line", map[string]string{"x1": "9", "x2": "15", "y1": "15", "y2": "9"}},
+	},
+	"circle-user": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"circle", map[string]string{"cx": "12", "cy": "10", "r": "3"}},
+		{"path", map[string]string{"d": "M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"}},
+	},
+	"circle-x": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "m15 9-6 6"}},
+		{"path", map[string]string{"d": "m9 9 6 6"}},
+	},
+	"clipboard-check": {
+		{"rect", map[string]string{"width": "8", "height": "4", "x": "8", "y": "2", "rx": "1", "ry": "1"}},
+		{"path", map[string]string{"d": "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}},
+		{"path", map[string]string{"d": "m9 14 2 2 4-4"}},
+	},
+	"clipboard-list": {
+		{"rect", map[string]string{"width": "8", "height": "4", "x": "8", "y": "2", "rx": "1", "ry": "1"}},
+		{"path", map[string]string{"d": "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}},
+		{"path", map[string]string{"d": "M12 11h4"}},
+		{"path", map[string]string{"d": "M12 16h4"}},
+		{"path", map[string]string{"d": "M8 11h.01"}},
+		{"path", map[string]string{"d": "M8 16h.01"}},
+	},
+	"clock": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "M12 6v6l4 2"}},
+	},
+	"cloud": {
+		{"path", map[string]string{"d": "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"}},
+	},
+	"cloud-off": {
+		{"path", map[string]string{"d": "M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057"}},
+		{"path", map[string]string{"d": "M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78"}},
+		{"path", map[string]string{"d": "m2 2 20 20"}},
+	},
+	"cloud-upload": {
+		{"path", map[string]string{"d": "M12 13v8"}},
+		{"path", map[string]string{"d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"}},
+		{"path", map[string]string{"d": "m8 17 4-4 4 4"}},
+	},
+	"code-xml": {
+		{"path", map[string]string{"d": "m18 16 4-4-4-4"}},
+		{"path", map[string]string{"d": "m6 8-4 4 4 4"}},
+		{"path", map[string]string{"d": "m14.5 4-5 16"}},
+	},
+	"columns-3": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M9 3v18"}},
+		{"path", map[string]string{"d": "M15 3v18"}},
+	},
+	"command": {
+		{"path", map[string]string{"d": "M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"}},
+	},
+	"compass": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"}},
+	},
+	"cookie": {
+		{"path", map[string]string{"d": "M11 17h.01"}},
+		{"path", map[string]string{"d": "M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2"}},
+		{"path", map[string]string{"d": "M12 12h.01"}},
+		{"path", map[string]string{"d": "M16 16h.01"}},
+		{"path", map[string]string{"d": "M16 3h.01"}},
+		{"path", map[string]string{"d": "M21 4h.01"}},
+		{"path", map[string]string{"d": "M21 8h.01"}},
+		{"path", map[string]string{"d": "M7 14h.01"}},
+		{"path", map[string]string{"d": "M9 8h.01"}},
+	},
+	"copy": {
+		{"rect", map[string]string{"width": "14", "height": "14", "x": "8", "y": "8", "rx": "2", "ry": "2"}},
+		{"path", map[string]string{"d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}},
+	},
+	"credit-card": {
+		{"rect", map[string]string{"width": "20", "height": "14", "x": "2", "y": "5", "rx": "2"}},
+		{"line", map[string]string{"x1": "2", "x2": "22", "y1": "10", "y2": "10"}},
+		{"path", map[string]string{"d": "M6 14h2"}},
+	},
+	"database": {
+		{"ellipse", map[string]string{"cx": "12", "cy": "5", "rx": "9", "ry": "3"}},
+		{"path", map[string]string{"d": "M3 5V19A9 3 0 0 0 21 19V5"}},
+		{"path", map[string]string{"d": "M3 12A9 3 0 0 0 21 12"}},
+	},
+	"dollar-sign": {
+		{"line", map[string]string{"x1": "12", "x2": "12", "y1": "2", "y2": "22"}},
+		{"path", map[string]string{"d": "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"}},
+	},
+	"dot": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "1"}},
+	},
+	"download": {
+		{"path", map[string]string{"d": "M12 15V3"}},
+		{"path", map[string]string{"d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}},
+		{"path", map[string]string{"d": "m7 10 5 5 5-5"}},
+	},
+	"ellipsis": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "1"}},
+		{"circle", map[string]string{"cx": "19", "cy": "12", "r": "1"}},
+		{"circle", map[string]string{"cx": "5", "cy": "12", "r": "1"}},
+	},
+	"ellipsis-vertical": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "1"}},
+		{"circle", map[string]string{"cx": "12", "cy": "5", "r": "1"}},
+		{"circle", map[string]string{"cx": "12", "cy": "19", "r": "1"}},
+	},
+	"external-link": {
+		{"path", map[string]string{"d": "M15 3h6v6"}},
+		{"path", map[string]string{"d": "M10 14 21 3"}},
+		{"path", map[string]string{"d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}},
+	},
+	"eye": {
+		{"path", map[string]string{"d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}},
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "3"}},
+	},
+	"eye-off": {
+		{"path", map[string]string{"d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"}},
+		{"path", map[string]string{"d": "M14.084 14.158a3 3 0 0 1-4.242-4.242"}},
+		{"path", map[string]string{"d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"}},
+		{"path", map[string]string{"d": "m2 2 20 20"}},
+	},
+	"file": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+	},
+	"file-code": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"path", map[string]string{"d": "M10 12.5 8 15l2 2.5"}},
+		{"path", map[string]string{"d": "m14 12.5 2 2.5-2 2.5"}},
+	},
+	"file-down": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"path", map[string]string{"d": "M12 18v-6"}},
+		{"path", map[string]string{"d": "m9 15 3 3 3-3"}},
+	},
+	"file-image": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"circle", map[string]string{"cx": "10", "cy": "12", "r": "2"}},
+		{"path", map[string]string{"d": "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"}},
+	},
+	"file-pen": {
+		{"path", map[string]string{"d": "M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"path", map[string]string{"d": "M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"}},
+	},
+	"file-pen-line": {
+		{"path", map[string]string{"d": "M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"}},
+		{"path", map[string]string{"d": "M14.487 7.858A1 1 0 0 1 14 7V2"}},
+		{"path", map[string]string{"d": "M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"}},
+		{"path", map[string]string{"d": "M8 18h1"}},
+	},
+	"file-plus": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"path", map[string]string{"d": "M9 15h6"}},
+		{"path", map[string]string{"d": "M12 18v-6"}},
+	},
+	"file-question-mark": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M12 17h.01"}},
+		{"path", map[string]string{"d": "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"}},
+	},
+	"file-search": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"circle", map[string]string{"cx": "11.5", "cy": "14.5", "r": "2.5"}},
+		{"path", map[string]string{"d": "M13.3 16.3 15 18"}},
+	},
+	"file-spreadsheet": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"path", map[string]string{"d": "M8 13h2"}},
+		{"path", map[string]string{"d": "M14 13h2"}},
+		{"path", map[string]string{"d": "M8 17h2"}},
+		{"path", map[string]string{"d": "M14 17h2"}},
+	},
+	"file-text": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"path", map[string]string{"d": "M10 9H8"}},
+		{"path", map[string]string{"d": "M16 13H8"}},
+		{"path", map[string]string{"d": "M16 17H8"}},
+	},
+	"file-up": {
+		{"path", map[string]string{"d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"path", map[string]string{"d": "M12 12v6"}},
+		{"path", map[string]string{"d": "m15 15-3-3-3 3"}},
+	},
+	"file-video-camera": {
+		{"path", map[string]string{"d": "M4 12V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2"}},
+		{"path", map[string]string{"d": "M14 2v5a1 1 0 0 0 1 1h5"}},
+		{"path", map[string]string{"d": "m10 17.843 3.033-1.755a.64.64 0 0 1 .967.56v4.704a.65.65 0 0 1-.967.56L10 20.157"}},
+		{"rect", map[string]string{"width": "7", "height": "6", "x": "3", "y": "16", "rx": "1"}},
+	},
+	"files": {
+		{"path", map[string]string{"d": "M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"}},
+		{"path", map[string]string{"d": "M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z"}},
+		{"path", map[string]string{"d": "M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1"}},
+	},
+	"film": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M7 3v18"}},
+		{"path", map[string]string{"d": "M3 7.5h4"}},
+		{"path", map[string]string{"d": "M3 12h18"}},
+		{"path", map[string]string{"d": "M3 16.5h4"}},
+		{"path", map[string]string{"d": "M17 3v18"}},
+		{"path", map[string]string{"d": "M17 7.5h4"}},
+		{"path", map[string]string{"d": "M17 16.5h4"}},
+	},
+	"fingerprint-pattern": {
+		{"path", map[string]string{"d": "M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"}},
+		{"path", map[string]string{"d": "M14 13.12c0 2.38 0 6.38-1 8.88"}},
+		{"path", map[string]string{"d": "M17.29 21.02c.12-.6.43-2.3.5-3.02"}},
+		{"path", map[string]string{"d": "M2 12a10 10 0 0 1 18-6"}},
+		{"path", map[string]string{"d": "M2 16h.01"}},
+		{"path", map[string]string{"d": "M21.8 16c.2-2 .131-5.354 0-6"}},
+		{"path", map[string]string{"d": "M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"}},
+		{"path", map[string]string{"d": "M8.65 22c.21-.66.45-1.32.57-2"}},
+		{"path", map[string]string{"d": "M9 6.8a6 6 0 0 1 9 5.2v2"}},
+	},
+	"flag": {
+		{"path", map[string]string{"d": "M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"}},
+	},
+	"folder": {
+		{"path", map[string]string{"d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}},
+	},
+	"folder-archive": {
+		{"circle", map[string]string{"cx": "15", "cy": "19", "r": "2"}},
+		{"path", map[string]string{"d": "M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"}},
+		{"path", map[string]string{"d": "M15 11v-1"}},
+		{"path", map[string]string{"d": "M15 17v-2"}},
+	},
+	"folder-kanban": {
+		{"path", map[string]string{"d": "M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"}},
+		{"path", map[string]string{"d": "M8 10v4"}},
+		{"path", map[string]string{"d": "M12 10v2"}},
+		{"path", map[string]string{"d": "M16 10v6"}},
+	},
+	"folder-open": {
+		{"path", map[string]string{"d": "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}},
+	},
+	"folder-plus": {
+		{"path", map[string]string{"d": "M12 10v6"}},
+		{"path", map[string]string{"d": "M9 13h6"}},
+		{"path", map[string]string{"d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}},
+	},
+	"folder-tree": {
+		{"path", map[string]string{"d": "M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}},
+		{"path", map[string]string{"d": "M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}},
+		{"path", map[string]string{"d": "M3 5a2 2 0 0 0 2 2h3"}},
+		{"path", map[string]string{"d": "M3 3v13a2 2 0 0 0 2 2h3"}},
+	},
+	"funnel": {
+		{"path", map[string]string{"d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"}},
+	},
+	"gift": {
+		{"path", map[string]string{"d": "M12 7v14"}},
+		{"path", map[string]string{"d": "M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"}},
+		{"path", map[string]string{"d": "M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"}},
+		{"rect", map[string]string{"x": "3", "y": "7", "width": "18", "height": "4", "rx": "1"}},
+	},
+	"git-compare": {
+		{"circle", map[string]string{"cx": "18", "cy": "18", "r": "3"}},
+		{"circle", map[string]string{"cx": "6", "cy": "6", "r": "3"}},
+		{"path", map[string]string{"d": "M13 6h3a2 2 0 0 1 2 2v7"}},
+		{"path", map[string]string{"d": "M11 18H8a2 2 0 0 1-2-2V9"}},
+	},
+	"globe": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}},
+		{"path", map[string]string{"d": "M2 12h20"}},
+	},
+	"globe-lock": {
+		{"path", map[string]string{"d": "M15.686 15A14.5 14.5 0 0 1 12 22a14.5 14.5 0 0 1 0-20 10 10 0 1 0 9.542 13"}},
+		{"path", map[string]string{"d": "M2 12h8.5"}},
+		{"path", map[string]string{"d": "M20 6V4a2 2 0 1 0-4 0v2"}},
+		{"rect", map[string]string{"width": "8", "height": "5", "x": "14", "y": "6", "rx": "1"}},
+	},
+	"graduation-cap": {
+		{"path", map[string]string{"d": "M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"}},
+		{"path", map[string]string{"d": "M22 10v6"}},
+		{"path", map[string]string{"d": "M6 12.5V16a6 3 0 0 0 12 0v-3.5"}},
+	},
+	"grid-3x3": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M3 9h18"}},
+		{"path", map[string]string{"d": "M3 15h18"}},
+		{"path", map[string]string{"d": "M9 3v18"}},
+		{"path", map[string]string{"d": "M15 3v18"}},
+	},
+	"grip-vertical": {
+		{"circle", map[string]string{"cx": "9", "cy": "12", "r": "1"}},
+		{"circle", map[string]string{"cx": "9", "cy": "5", "r": "1"}},
+		{"circle", map[string]string{"cx": "9", "cy": "19", "r": "1"}},
+		{"circle", map[string]string{"cx": "15", "cy": "12", "r": "1"}},
+		{"circle", map[string]string{"cx": "15", "cy": "5", "r": "1"}},
+		{"circle", map[string]string{"cx": "15", "cy": "19", "r": "1"}},
+	},
+	"group": {
+		{"path", map[string]string{"d": "M3 7V5c0-1.1.9-2 2-2h2"}},
+		{"path", map[string]string{"d": "M17 3h2c1.1 0 2 .9 2 2v2"}},
+		{"path", map[string]string{"d": "M21 17v2c0 1.1-.9 2-2 2h-2"}},
+		{"path", map[string]string{"d": "M7 21H5c-1.1 0-2-.9-2-2v-2"}},
+		{"rect", map[string]string{"width": "7", "height": "5", "x": "7", "y": "7", "rx": "1"}},
+		{"rect", map[string]string{"width": "7", "height": "5", "x": "10", "y": "12", "rx": "1"}},
+	},
+	"handshake": {
+		{"path", map[string]string{"d": "m11 17 2 2a1 1 0 1 0 3-3"}},
+		{"path", map[string]string{"d": "m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"}},
+		{"path", map[string]string{"d": "m21 3 1 11h-2"}},
+		{"path", map[string]string{"d": "M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"}},
+		{"path", map[string]string{"d": "M3 4h8"}},
+	},
+	"hash": {
+		{"line", map[string]string{"x1": "4", "x2": "20", "y1": "9", "y2": "9"}},
+		{"line", map[string]string{"x1": "4", "x2": "20", "y1": "15", "y2": "15"}},
+		{"line", map[string]string{"x1": "10", "x2": "8", "y1": "3", "y2": "21"}},
+		{"line", map[string]string{"x1": "16", "x2": "14", "y1": "3", "y2": "21"}},
+	},
+	"heading": {
+		{"path", map[string]string{"d": "M6 12h12"}},
+		{"path", map[string]string{"d": "M6 20V4"}},
+		{"path", map[string]string{"d": "M18 20V4"}},
+	},
+	"headphones": {
+		{"path", map[string]string{"d": "M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"}},
+	},
+	"heart": {
+		{"path", map[string]string{"d": "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"}},
+	},
+	"heart-handshake": {
+		{"path", map[string]string{"d": "M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"}},
+	},
+	"hourglass": {
+		{"path", map[string]string{"d": "M5 22h14"}},
+		{"path", map[string]string{"d": "M5 2h14"}},
+		{"path", map[string]string{"d": "M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"}},
+		{"path", map[string]string{"d": "M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"}},
+	},
+	"house": {
+		{"path", map[string]string{"d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}},
+		{"path", map[string]string{"d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}},
+	},
+	"id-card": {
+		{"path", map[string]string{"d": "M13 19a4 4 0 00-8 0"}},
+		{"path", map[string]string{"d": "M16 10h2"}},
+		{"path", map[string]string{"d": "M16 14h2"}},
+		{"circle", map[string]string{"cx": "9", "cy": "12", "r": "3"}},
+		{"rect", map[string]string{"x": "2", "y": "5", "width": "20", "height": "14", "rx": "2"}},
+	},
+	"image": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2"}},
+		{"circle", map[string]string{"cx": "9", "cy": "9", "r": "2"}},
+		{"path", map[string]string{"d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}},
+	},
+	"image-off": {
+		{"line", map[string]string{"x1": "2", "x2": "22", "y1": "2", "y2": "22"}},
+		{"path", map[string]string{"d": "M10.41 10.41a2 2 0 1 1-2.83-2.83"}},
+		{"line", map[string]string{"x1": "13.5", "x2": "6", "y1": "13.5", "y2": "21"}},
+		{"line", map[string]string{"x1": "18", "x2": "21", "y1": "12", "y2": "15"}},
+		{"path", map[string]string{"d": "M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"}},
+		{"path", map[string]string{"d": "M21 15V5a2 2 0 0 0-2-2H9"}},
+	},
+	"image-plus": {
+		{"path", map[string]string{"d": "M16 5h6"}},
+		{"path", map[string]string{"d": "M19 2v6"}},
+		{"path", map[string]string{"d": "M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"}},
+		{"path", map[string]string{"d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}},
+		{"circle", map[string]string{"cx": "9", "cy": "9", "r": "2"}},
+	},
+	"images": {
+		{"path", map[string]string{"d": "m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"}},
+		{"path", map[string]string{"d": "M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"}},
+		{"circle", map[string]string{"cx": "13", "cy": "7", "r": "1", "fill": "currentColor"}},
+		{"rect", map[string]string{"x": "8", "y": "2", "width": "14", "height": "14", "rx": "2"}},
+	},
+	"inbox": {
+		{"polyline", map[string]string{"points": "22 12 16 12 14 15 10 15 8 12 2 12"}},
+		{"path", map[string]string{"d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"}},
+	},
+	"info": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "M12 16v-4"}},
+		{"path", map[string]string{"d": "M12 8h.01"}},
+	},
+	"italic": {
+		{"line", map[string]string{"x1": "19", "x2": "10", "y1": "4", "y2": "4"}},
+		{"line", map[string]string{"x1": "14", "x2": "5", "y1": "20", "y2": "20"}},
+		{"line", map[string]string{"x1": "15", "x2": "9", "y1": "4", "y2": "20"}},
+	},
+	"kanban": {
+		{"path", map[string]string{"d": "M5 3v14"}},
+		{"path", map[string]string{"d": "M12 3v8"}},
+		{"path", map[string]string{"d": "M19 3v18"}},
+	},
+	"key": {
+		{"path", map[string]string{"d": "m2 21 9.6-9.6"}},
+		{"path", map[string]string{"d": "m7.5 15.5 2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19"}},
+		{"circle", map[string]string{"cx": "15.5", "cy": "7.5", "r": "5.5"}},
+	},
+	"key-round": {
+		{"path", map[string]string{"d": "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"}},
+		{"circle", map[string]string{"cx": "16.5", "cy": "7.5", "r": ".5", "fill": "currentColor"}},
+	},
+	"lamp-desk": {
+		{"path", map[string]string{"d": "M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z"}},
+		{"path", map[string]string{"d": "m14.207 4.793-3.414 3.414"}},
+		{"path", map[string]string{"d": "M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"}},
+		{"path", map[string]string{"d": "m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18"}},
+	},
+	"landmark": {
+		{"path", map[string]string{"d": "M10 18v-7"}},
+		{"path", map[string]string{"d": "M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"}},
+		{"path", map[string]string{"d": "M14 18v-7"}},
+		{"path", map[string]string{"d": "M18 18v-7"}},
+		{"path", map[string]string{"d": "M3 22h18"}},
+		{"path", map[string]string{"d": "M6 18v-7"}},
+	},
+	"languages": {
+		{"path", map[string]string{"d": "m5 8 6 6"}},
+		{"path", map[string]string{"d": "m4 14 6-6 2-3"}},
+		{"path", map[string]string{"d": "M2 5h12"}},
+		{"path", map[string]string{"d": "M7 2h1"}},
+		{"path", map[string]string{"d": "m22 22-5-10-5 10"}},
+		{"path", map[string]string{"d": "M14 18h6"}},
+	},
+	"laptop": {
+		{"path", map[string]string{"d": "M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z"}},
+		{"path", map[string]string{"d": "M20.054 15.987H3.946"}},
+	},
+	"layers": {
+		{"path", map[string]string{"d": "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}},
+		{"path", map[string]string{"d": "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}},
+		{"path", map[string]string{"d": "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}},
+	},
+	"layout-dashboard": {
+		{"rect", map[string]string{"width": "7", "height": "9", "x": "3", "y": "3", "rx": "1"}},
+		{"rect", map[string]string{"width": "7", "height": "5", "x": "14", "y": "3", "rx": "1"}},
+		{"rect", map[string]string{"width": "7", "height": "9", "x": "14", "y": "12", "rx": "1"}},
+		{"rect", map[string]string{"width": "7", "height": "5", "x": "3", "y": "16", "rx": "1"}},
+	},
+	"layout-grid": {
+		{"rect", map[string]string{"width": "7", "height": "7", "x": "3", "y": "3", "rx": "1"}},
+		{"rect", map[string]string{"width": "7", "height": "7", "x": "14", "y": "3", "rx": "1"}},
+		{"rect", map[string]string{"width": "7", "height": "7", "x": "14", "y": "14", "rx": "1"}},
+		{"rect", map[string]string{"width": "7", "height": "7", "x": "3", "y": "14", "rx": "1"}},
+	},
+	"layout-list": {
+		{"rect", map[string]string{"width": "7", "height": "7", "x": "3", "y": "3", "rx": "1"}},
+		{"rect", map[string]string{"width": "7", "height": "7", "x": "3", "y": "14", "rx": "1"}},
+		{"path", map[string]string{"d": "M14 4h7"}},
+		{"path", map[string]string{"d": "M14 9h7"}},
+		{"path", map[string]string{"d": "M14 15h7"}},
+		{"path", map[string]string{"d": "M14 20h7"}},
+	},
+	"layout-template": {
+		{"rect", map[string]string{"width": "18", "height": "7", "x": "3", "y": "3", "rx": "1"}},
+		{"rect", map[string]string{"width": "9", "height": "7", "x": "3", "y": "14", "rx": "1"}},
+		{"rect", map[string]string{"width": "5", "height": "7", "x": "16", "y": "14", "rx": "1"}},
+	},
+	"life-buoy": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "10"}},
+		{"path", map[string]string{"d": "m4.93 4.93 4.24 4.24"}},
+		{"path", map[string]string{"d": "m14.83 9.17 4.24-4.24"}},
+		{"path", map[string]string{"d": "m14.83 14.83 4.24 4.24"}},
+		{"path", map[string]string{"d": "m9.17 14.83-4.24 4.24"}},
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "4"}},
+	},
+	"lightbulb": {
+		{"path", map[string]string{"d": "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"}},
+		{"path", map[string]string{"d": "M9 18h6"}},
+		{"path", map[string]string{"d": "M10 22h4"}},
+	},
+	"link": {
+		{"path", map[string]string{"d": "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}},
+		{"path", map[string]string{"d": "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}},
+	},
+	"link-2": {
+		{"path", map[string]string{"d": "M9 17H7A5 5 0 0 1 7 7h2"}},
+		{"path", map[string]string{"d": "M15 7h2a5 5 0 1 1 0 10h-2"}},
+		{"line", map[string]string{"x1": "8", "x2": "16", "y1": "12", "y2": "12"}},
+	},
+	"list": {
+		{"path", map[string]string{"d": "M3 5h.01"}},
+		{"path", map[string]string{"d": "M3 12h.01"}},
+		{"path", map[string]string{"d": "M3 19h.01"}},
+		{"path", map[string]string{"d": "M8 5h13"}},
+		{"path", map[string]string{"d": "M8 12h13"}},
+		{"path", map[string]string{"d": "M8 19h13"}},
+	},
+	"list-checks": {
+		{"path", map[string]string{"d": "M13 5h8"}},
+		{"path", map[string]string{"d": "M13 12h8"}},
+		{"path", map[string]string{"d": "M13 19h8"}},
+		{"path", map[string]string{"d": "m3 17 2 2 4-4"}},
+		{"path", map[string]string{"d": "m3 7 2 2 4-4"}},
+	},
+	"list-filter": {
+		{"path", map[string]string{"d": "M2 5h20"}},
+		{"path", map[string]string{"d": "M6 12h12"}},
+		{"path", map[string]string{"d": "M9 19h6"}},
+	},
+	"list-ordered": {
+		{"path", map[string]string{"d": "M11 5h10"}},
+		{"path", map[string]string{"d": "M11 12h10"}},
+		{"path", map[string]string{"d": "M11 19h10"}},
+		{"path", map[string]string{"d": "M4 4h1v5"}},
+		{"path", map[string]string{"d": "M4 9h2"}},
+		{"path", map[string]string{"d": "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"}},
+	},
+	"list-todo": {
+		{"path", map[string]string{"d": "M13 5h8"}},
+		{"path", map[string]string{"d": "M13 12h8"}},
+		{"path", map[string]string{"d": "M13 19h8"}},
+		{"path", map[string]string{"d": "m3 17 2 2 4-4"}},
+		{"rect", map[string]string{"x": "3", "y": "4", "width": "6", "height": "6", "rx": "1"}},
+	},
+	"list-tree": {
+		{"path", map[string]string{"d": "M8 5h13"}},
+		{"path", map[string]string{"d": "M13 12h8"}},
+		{"path", map[string]string{"d": "M13 19h8"}},
+		{"path", map[string]string{"d": "M3 10a2 2 0 0 0 2 2h3"}},
+		{"path", map[string]string{"d": "M3 5v12a2 2 0 0 0 2 2h3"}},
+	},
+	"loader": {
+		{"path", map[string]string{"d": "M12 2v4"}},
+		{"path", map[string]string{"d": "m16.2 7.8 2.9-2.9"}},
+		{"path", map[string]string{"d": "M18 12h4"}},
+		{"path", map[string]string{"d": "m16.2 16.2 2.9 2.9"}},
+		{"path", map[string]string{"d": "M12 18v4"}},
+		{"path", map[string]string{"d": "m4.9 19.1 2.9-2.9"}},
+		{"path", map[string]string{"d": "M2 12h4"}},
+		{"path", map[string]string{"d": "m4.9 4.9 2.9 2.9"}},
+	},
+	"loader-circle": {
+		{"path", map[string]string{"d": "M21 12a9 9 0 1 1-6.219-8.56"}},
+	},
+	"lock": {
+		{"rect", map[string]string{"width": "18", "height": "11", "x": "3", "y": "11", "rx": "2", "ry": "2"}},
+		{"path", map[string]string{"d": "M7 11V7a5 5 0 0 1 10 0v4"}},
+	},
+	"lock-keyhole": {
+		{"circle", map[string]string{"cx": "12", "cy": "16", "r": "1"}},
+		{"rect", map[string]string{"x": "3", "y": "10", "width": "18", "height": "12", "rx": "2"}},
+		{"path", map[string]string{"d": "M7 10V7a5 5 0 0 1 10 0v3"}},
+	},
+	"log-in": {
+		{"path", map[string]string{"d": "m10 17 5-5-5-5"}},
+		{"path", map[string]string{"d": "M15 12H3"}},
+		{"path", map[string]string{"d": "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"}},
+	},
+	"log-out": {
+		{"path", map[string]string{"d": "m16 17 5-5-5-5"}},
+		{"path", map[string]string{"d": "M21 12H9"}},
+		{"path", map[string]string{"d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"}},
+	},
+	"mail": {
+		{"path", map[string]string{"d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"}},
+		{"rect", map[string]string{"x": "2", "y": "4", "width": "20", "height": "16", "rx": "2"}},
+	},
+	"mail-check": {
+		{"path", map[string]string{"d": "M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"}},
+		{"path", map[string]string{"d": "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"}},
+		{"path", map[string]string{"d": "m16 19 2 2 4-4"}},
+	},
+	"mail-open": {
+		{"path", map[string]string{"d": "M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"}},
+		{"path", map[string]string{"d": "m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"}},
+	},
+	"map-pin": {
+		{"path", map[string]string{"d": "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}},
+		{"circle", map[string]string{"cx": "12", "cy": "10", "r": "3"}},
+	},
+	"megaphone": {
+		{"path", map[string]string{"d": "M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"}},
+		{"path", map[string]string{"d": "M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"}},
+		{"path", map[string]string{"d": "M8 6v8"}},
+	},
+	"menu": {
+		{"path", map[string]string{"d": "M4 5h16"}},
+		{"path", map[string]string{"d": "M4 12h16"}},
+		{"path", map[string]string{"d": "M4 19h16"}},
+	},
+	"message-circle": {
+		{"path", map[string]string{"d": "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}},
+	},
+	"message-circle-question-mark": {
+		{"path", map[string]string{"d": "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}},
+		{"path", map[string]string{"d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}},
+		{"path", map[string]string{"d": "M12 17h.01"}},
+	},
+	"message-square": {
+		{"path", map[string]string{"d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}},
+	},
+	"message-square-more": {
+		{"path", map[string]string{"d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}},
+		{"path", map[string]string{"d": "M12 11h.01"}},
+		{"path", map[string]string{"d": "M16 11h.01"}},
+		{"path", map[string]string{"d": "M8 11h.01"}},
+	},
+	"message-square-quote": {
+		{"path", map[string]string{"d": "M14 14a2 2 0 0 0 2-2V8h-2"}},
+		{"path", map[string]string{"d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}},
+		{"path", map[string]string{"d": "M8 14a2 2 0 0 0 2-2V8H8"}},
+	},
+	"message-square-text": {
+		{"path", map[string]string{"d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}},
+		{"path", map[string]string{"d": "M7 11h10"}},
+		{"path", map[string]string{"d": "M7 15h6"}},
+		{"path", map[string]string{"d": "M7 7h8"}},
+	},
+	"messages-square": {
+		{"path", map[string]string{"d": "M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"}},
+		{"path", map[string]string{"d": "M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"}},
+	},
+	"minus": {
+		{"path", map[string]string{"d": "M5 12h14"}},
+	},
+	"monitor": {
+		{"rect", map[string]string{"width": "20", "height": "14", "x": "2", "y": "3", "rx": "2"}},
+		{"line", map[string]string{"x1": "8", "x2": "16", "y1": "21", "y2": "21"}},
+		{"line", map[string]string{"x1": "12", "x2": "12", "y1": "17", "y2": "21"}},
+	},
+	"monitor-smartphone": {
+		{"path", map[string]string{"d": "M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"}},
+		{"path", map[string]string{"d": "M10 19v-3.96 3.15"}},
+		{"path", map[string]string{"d": "M7 19h5"}},
+		{"rect", map[string]string{"width": "6", "height": "10", "x": "16", "y": "12", "rx": "2"}},
+	},
+	"moon": {
+		{"path", map[string]string{"d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"}},
+	},
+	"mountain": {
+		{"path", map[string]string{"d": "m8 3 4 8 5-5 5 15H2L8 3z"}},
+	},
+	"mouse-pointer-click": {
+		{"path", map[string]string{"d": "M14 4.1 12 6"}},
+		{"path", map[string]string{"d": "m5.1 8-2.9-.8"}},
+		{"path", map[string]string{"d": "m6 12-1.9 2"}},
+		{"path", map[string]string{"d": "M7.2 2.2 8 5.1"}},
+		{"path", map[string]string{"d": "M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"}},
+	},
+	"move-right": {
+		{"path", map[string]string{"d": "M18 8L22 12L18 16"}},
+		{"path", map[string]string{"d": "M2 12H22"}},
+	},
+	"music": {
+		{"path", map[string]string{"d": "M9 18V5l12-2v13"}},
+		{"circle", map[string]string{"cx": "6", "cy": "18", "r": "3"}},
+		{"circle", map[string]string{"cx": "18", "cy": "16", "r": "3"}},
+	},
+	"newspaper": {
+		{"path", map[string]string{"d": "M15 18h-5"}},
+		{"path", map[string]string{"d": "M18 14h-8"}},
+		{"path", map[string]string{"d": "M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"}},
+		{"rect", map[string]string{"width": "8", "height": "4", "x": "10", "y": "6", "rx": "1"}},
+	},
+	"orbit": {
+		{"path", map[string]string{"d": "M20.341 6.484A10 10 0 0 1 10.266 21.85"}},
+		{"path", map[string]string{"d": "M3.659 17.516A10 10 0 0 1 13.74 2.152"}},
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "3"}},
+		{"circle", map[string]string{"cx": "19", "cy": "5", "r": "2"}},
+		{"circle", map[string]string{"cx": "5", "cy": "19", "r": "2"}},
+	},
+	"package": {
+		{"path", map[string]string{"d": "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}},
+		{"path", map[string]string{"d": "M12 22V12"}},
+		{"polyline", map[string]string{"points": "3.29 7 12 12 20.71 7"}},
+		{"path", map[string]string{"d": "m7.5 4.27 9 5.15"}},
+	},
+	"package-check": {
+		{"path", map[string]string{"d": "M12 22V12"}},
+		{"path", map[string]string{"d": "m16 17 2 2 4-4"}},
+		{"path", map[string]string{"d": "M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"}},
+		{"path", map[string]string{"d": "M3.29 7 12 12l8.71-5"}},
+		{"path", map[string]string{"d": "m7.5 4.27 8.997 5.148"}},
+	},
+	"package-open": {
+		{"path", map[string]string{"d": "M12 22v-9"}},
+		{"path", map[string]string{"d": "M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"}},
+		{"path", map[string]string{"d": "M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"}},
+		{"path", map[string]string{"d": "M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"}},
+	},
+	"palette": {
+		{"path", map[string]string{"d": "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"}},
+		{"circle", map[string]string{"cx": "13.5", "cy": "6.5", "r": ".5", "fill": "currentColor"}},
+		{"circle", map[string]string{"cx": "17.5", "cy": "10.5", "r": ".5", "fill": "currentColor"}},
+		{"circle", map[string]string{"cx": "6.5", "cy": "12.5", "r": ".5", "fill": "currentColor"}},
+		{"circle", map[string]string{"cx": "8.5", "cy": "7.5", "r": ".5", "fill": "currentColor"}},
+	},
+	"panel-bottom": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M3 15h18"}},
+	},
+	"panel-left": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M9 3v18"}},
+	},
+	"panel-left-close": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M9 3v18"}},
+		{"path", map[string]string{"d": "m16 15-3-3 3-3"}},
+	},
+	"panel-top": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M3 9h18"}},
+	},
+	"paperclip": {
+		{"path", map[string]string{"d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"}},
+	},
+	"pause": {
+		{"rect", map[string]string{"x": "14", "y": "3", "width": "5", "height": "18", "rx": "1"}},
+		{"rect", map[string]string{"x": "5", "y": "3", "width": "5", "height": "18", "rx": "1"}},
+	},
+	"pencil": {
+		{"path", map[string]string{"d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}},
+		{"path", map[string]string{"d": "m15 5 4 4"}},
+	},
+	"pencil-line": {
+		{"path", map[string]string{"d": "M13 21h8"}},
+		{"path", map[string]string{"d": "m15 5 4 4"}},
+		{"path", map[string]string{"d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}},
+	},
+	"percent": {
+		{"line", map[string]string{"x1": "19", "x2": "5", "y1": "5", "y2": "19"}},
+		{"circle", map[string]string{"cx": "6.5", "cy": "6.5", "r": "2.5"}},
+		{"circle", map[string]string{"cx": "17.5", "cy": "17.5", "r": "2.5"}},
+	},
+	"phone": {
+		{"path", map[string]string{"d": "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"}},
+	},
+	"pilcrow": {
+		{"path", map[string]string{"d": "M13 4v16"}},
+		{"path", map[string]string{"d": "M17 4v16"}},
+		{"path", map[string]string{"d": "M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}},
+	},
+	"pin": {
+		{"path", map[string]string{"d": "M12 17v5"}},
+		{"path", map[string]string{"d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"}},
+	},
+	"play": {
+		{"path", map[string]string{"d": "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"}},
+	},
+	"plug": {
+		{"path", map[string]string{"d": "M12 22v-5"}},
+		{"path", map[string]string{"d": "M15 8V2"}},
+		{"path", map[string]string{"d": "M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"}},
+		{"path", map[string]string{"d": "M9 8V2"}},
+	},
+	"plug-zap": {
+		{"path", map[string]string{"d": "M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"}},
+		{"path", map[string]string{"d": "m2 22 3-3"}},
+		{"path", map[string]string{"d": "M7.5 13.5 10 11"}},
+		{"path", map[string]string{"d": "M10.5 16.5 13 14"}},
+		{"path", map[string]string{"d": "m18 3-4 4h6l-4 4"}},
+	},
+	"plus": {
+		{"path", map[string]string{"d": "M5 12h14"}},
+		{"path", map[string]string{"d": "M12 5v14"}},
+	},
+	"presentation": {
+		{"path", map[string]string{"d": "M2 3h20"}},
+		{"path", map[string]string{"d": "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"}},
+		{"path", map[string]string{"d": "m7 21 5-5 5 5"}},
+	},
+	"printer": {
+		{"path", map[string]string{"d": "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"}},
+		{"path", map[string]string{"d": "M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"}},
+		{"rect", map[string]string{"x": "6", "y": "14", "width": "12", "height": "8", "rx": "1"}},
+	},
+	"puzzle": {
+		{"path", map[string]string{"d": "M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}},
+	},
+	"qr-code": {
+		{"rect", map[string]string{"width": "5", "height": "5", "x": "3", "y": "3", "rx": "1"}},
+		{"rect", map[string]string{"width": "5", "height": "5", "x": "16", "y": "3", "rx": "1"}},
+		{"rect", map[string]string{"width": "5", "height": "5", "x": "3", "y": "16", "rx": "1"}},
+		{"path", map[string]string{"d": "M21 16h-3a2 2 0 0 0-2 2v3"}},
+		{"path", map[string]string{"d": "M21 21v.01"}},
+		{"path", map[string]string{"d": "M12 7v3a2 2 0 0 1-2 2H7"}},
+		{"path", map[string]string{"d": "M3 12h.01"}},
+		{"path", map[string]string{"d": "M12 3h.01"}},
+		{"path", map[string]string{"d": "M12 16v.01"}},
+		{"path", map[string]string{"d": "M16 12h1"}},
+		{"path", map[string]string{"d": "M21 12v.01"}},
+		{"path", map[string]string{"d": "M12 21v-1"}},
+	},
+	"quote": {
+		{"path", map[string]string{"d": "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}},
+		{"path", map[string]string{"d": "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}},
+	},
+	"receipt-text": {
+		{"path", map[string]string{"d": "M13 16H8"}},
+		{"path", map[string]string{"d": "M14 8H8"}},
+		{"path", map[string]string{"d": "M16 12H8"}},
+		{"path", map[string]string{"d": "M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"}},
+	},
+	"redo-2": {
+		{"path", map[string]string{"d": "m15 14 5-5-5-5"}},
+		{"path", map[string]string{"d": "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}},
+	},
+	"refresh-cw": {
+		{"path", map[string]string{"d": "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}},
+		{"path", map[string]string{"d": "M21 3v5h-5"}},
+		{"path", map[string]string{"d": "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}},
+		{"path", map[string]string{"d": "M8 16H3v5"}},
+	},
+	"rocket": {
+		{"path", map[string]string{"d": "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"}},
+		{"path", map[string]string{"d": "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"}},
+		{"path", map[string]string{"d": "M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"}},
+		{"path", map[string]string{"d": "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"}},
+	},
+	"rotate-ccw": {
+		{"path", map[string]string{"d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}},
+		{"path", map[string]string{"d": "M3 3v5h5"}},
+	},
+	"rotate-cw": {
+		{"path", map[string]string{"d": "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"}},
+		{"path", map[string]string{"d": "M21 3v5h-5"}},
+	},
+	"rows-3": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M21 9H3"}},
+		{"path", map[string]string{"d": "M21 15H3"}},
+	},
+	"save": {
+		{"path", map[string]string{"d": "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}},
+		{"path", map[string]string{"d": "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}},
+		{"path", map[string]string{"d": "M7 3v4a1 1 0 0 0 1 1h7"}},
+	},
+	"scale": {
+		{"path", map[string]string{"d": "M12 3v18"}},
+		{"path", map[string]string{"d": "m19 8 3 8a5 5 0 0 1-6 0zV7"}},
+		{"path", map[string]string{"d": "M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"}},
+		{"path", map[string]string{"d": "m5 8 3 8a5 5 0 0 1-6 0zV7"}},
+		{"path", map[string]string{"d": "M7 21h10"}},
+	},
+	"scan-face": {
+		{"path", map[string]string{"d": "M3 7V5a2 2 0 0 1 2-2h2"}},
+		{"path", map[string]string{"d": "M17 3h2a2 2 0 0 1 2 2v2"}},
+		{"path", map[string]string{"d": "M21 17v2a2 2 0 0 1-2 2h-2"}},
+		{"path", map[string]string{"d": "M7 21H5a2 2 0 0 1-2-2v-2"}},
+		{"path", map[string]string{"d": "M8 14s1.5 2 4 2 4-2 4-2"}},
+		{"path", map[string]string{"d": "M9 9h.01"}},
+		{"path", map[string]string{"d": "M15 9h.01"}},
+	},
+	"scroll-text": {
+		{"path", map[string]string{"d": "M15 12h-5"}},
+		{"path", map[string]string{"d": "M15 8h-5"}},
+		{"path", map[string]string{"d": "M19 17V5a2 2 0 0 0-2-2H4"}},
+		{"path", map[string]string{"d": "M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"}},
+	},
+	"search": {
+		{"path", map[string]string{"d": "m21 21-4.34-4.34"}},
+		{"circle", map[string]string{"cx": "11", "cy": "11", "r": "8"}},
+	},
+	"search-x": {
+		{"path", map[string]string{"d": "m13.5 8.5-5 5"}},
+		{"path", map[string]string{"d": "m8.5 8.5 5 5"}},
+		{"circle", map[string]string{"cx": "11", "cy": "11", "r": "8"}},
+		{"path", map[string]string{"d": "m21 21-4.3-4.3"}},
+	},
+	"send": {
+		{"path", map[string]string{"d": "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"}},
+		{"path", map[string]string{"d": "m21.854 2.147-10.94 10.939"}},
+	},
+	"settings": {
+		{"path", map[string]string{"d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}},
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "3"}},
+	},
+	"settings-2": {
+		{"path", map[string]string{"d": "M14 17H5"}},
+		{"path", map[string]string{"d": "M19 7h-9"}},
+		{"circle", map[string]string{"cx": "17", "cy": "17", "r": "3"}},
+		{"circle", map[string]string{"cx": "7", "cy": "7", "r": "3"}},
+	},
+	"share": {
+		{"path", map[string]string{"d": "M12 2v13"}},
+		{"path", map[string]string{"d": "m16 6-4-4-4 4"}},
+		{"path", map[string]string{"d": "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"}},
+	},
+	"share-2": {
+		{"circle", map[string]string{"cx": "18", "cy": "5", "r": "3"}},
+		{"circle", map[string]string{"cx": "6", "cy": "12", "r": "3"}},
+		{"circle", map[string]string{"cx": "18", "cy": "19", "r": "3"}},
+		{"line", map[string]string{"x1": "8.59", "x2": "15.42", "y1": "13.51", "y2": "17.49"}},
+		{"line", map[string]string{"x1": "15.41", "x2": "8.59", "y1": "6.51", "y2": "10.49"}},
+	},
+	"shield": {
+		{"path", map[string]string{"d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}},
+	},
+	"shield-alert": {
+		{"path", map[string]string{"d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}},
+		{"path", map[string]string{"d": "M12 8v4"}},
+		{"path", map[string]string{"d": "M12 16h.01"}},
+	},
+	"shield-ban": {
+		{"path", map[string]string{"d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}},
+		{"path", map[string]string{"d": "m4.243 5.21 14.39 12.472"}},
+	},
+	"shield-check": {
+		{"path", map[string]string{"d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}},
+		{"path", map[string]string{"d": "m9 12 2 2 4-4"}},
+	},
+	"shield-x": {
+		{"path", map[string]string{"d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}},
+		{"path", map[string]string{"d": "m14.5 9.5-5 5"}},
+		{"path", map[string]string{"d": "m9.5 9.5 5 5"}},
+	},
+	"shopping-bag": {
+		{"path", map[string]string{"d": "M16 10a4 4 0 0 1-8 0"}},
+		{"path", map[string]string{"d": "M3.103 6.034h17.794"}},
+		{"path", map[string]string{"d": "M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"}},
+	},
+	"shopping-cart": {
+		{"path", map[string]string{"d": "m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"}},
+		{"path", map[string]string{"d": "M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"}},
+		{"circle", map[string]string{"cx": "18", "cy": "20", "r": "2"}},
+		{"circle", map[string]string{"cx": "8", "cy": "20", "r": "2"}},
+	},
+	"sliders-horizontal": {
+		{"path", map[string]string{"d": "M10 5H3"}},
+		{"path", map[string]string{"d": "M12 19H3"}},
+		{"path", map[string]string{"d": "M14 3v4"}},
+		{"path", map[string]string{"d": "M16 17v4"}},
+		{"path", map[string]string{"d": "M21 12h-9"}},
+		{"path", map[string]string{"d": "M21 19h-5"}},
+		{"path", map[string]string{"d": "M21 5h-7"}},
+		{"path", map[string]string{"d": "M8 10v4"}},
+		{"path", map[string]string{"d": "M8 12H3"}},
+	},
+	"sliders-vertical": {
+		{"path", map[string]string{"d": "M10 8h4"}},
+		{"path", map[string]string{"d": "M12 21v-9"}},
+		{"path", map[string]string{"d": "M12 8V3"}},
+		{"path", map[string]string{"d": "M17 16h4"}},
+		{"path", map[string]string{"d": "M19 12V3"}},
+		{"path", map[string]string{"d": "M19 21v-5"}},
+		{"path", map[string]string{"d": "M3 14h4"}},
+		{"path", map[string]string{"d": "M5 10V3"}},
+		{"path", map[string]string{"d": "M5 21v-7"}},
+	},
+	"smartphone": {
+		{"rect", map[string]string{"width": "14", "height": "20", "x": "5", "y": "2", "rx": "2", "ry": "2"}},
+		{"path", map[string]string{"d": "M12 18h.01"}},
+	},
+	"sparkles": {
+		{"path", map[string]string{"d": "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"}},
+		{"path", map[string]string{"d": "M20 2v4"}},
+		{"path", map[string]string{"d": "M22 4h-4"}},
+		{"circle", map[string]string{"cx": "4", "cy": "20", "r": "2"}},
+	},
+	"square": {
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+	},
+	"square-pen": {
+		{"path", map[string]string{"d": "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}},
+		{"path", map[string]string{"d": "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"}},
+	},
+	"star": {
+		{"path", map[string]string{"d": "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"}},
+	},
+	"star-half": {
+		{"path", map[string]string{"d": "M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"}},
+	},
+	"store": {
+		{"path", map[string]string{"d": "M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"}},
+		{"path", map[string]string{"d": "M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"}},
+		{"path", map[string]string{"d": "M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"}},
+	},
+	"sun": {
+		{"circle", map[string]string{"cx": "12", "cy": "12", "r": "4"}},
+		{"path", map[string]string{"d": "M12 2v2"}},
+		{"path", map[string]string{"d": "M12 20v2"}},
+		{"path", map[string]string{"d": "m4.93 4.93 1.41 1.41"}},
+		{"path", map[string]string{"d": "m17.66 17.66 1.41 1.41"}},
+		{"path", map[string]string{"d": "M2 12h2"}},
+		{"path", map[string]string{"d": "M20 12h2"}},
+		{"path", map[string]string{"d": "m6.34 17.66-1.41 1.41"}},
+		{"path", map[string]string{"d": "m19.07 4.93-1.41 1.41"}},
+	},
+	"table": {
+		{"path", map[string]string{"d": "M12 3v18"}},
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M3 9h18"}},
+		{"path", map[string]string{"d": "M3 15h18"}},
+	},
+	"table-properties": {
+		{"path", map[string]string{"d": "M15 3v18"}},
+		{"rect", map[string]string{"width": "18", "height": "18", "x": "3", "y": "3", "rx": "2"}},
+		{"path", map[string]string{"d": "M21 9H3"}},
+		{"path", map[string]string{"d": "M21 15H3"}},
+	},
+	"tablet": {
+		{"rect", map[string]string{"width": "16", "height": "20", "x": "4", "y": "2", "rx": "2", "ry": "2"}},
+		{"line", map[string]string{"x1": "12", "x2": "12.01", "y1": "18", "y2": "18"}},
+	},
+	"tag": {
+		{"path", map[string]string{"d": "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}},
+		{"circle", map[string]string{"cx": "7.5", "cy": "7.5", "r": ".5", "fill": "currentColor"}},
+	},
+	"tags": {
+		{"path", map[string]string{"d": "M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"}},
+		{"path", map[string]string{"d": "M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"}},
+		{"circle", map[string]string{"cx": "10.5", "cy": "6.5", "r": ".5", "fill": "currentColor"}},
+	},
+	"terminal": {
+		{"path", map[string]string{"d": "M12 19h8"}},
+		{"path", map[string]string{"d": "m4 17 6-6-6-6"}},
+	},
+	"text-align-center": {
+		{"path", map[string]string{"d": "M21 5H3"}},
+		{"path", map[string]string{"d": "M17 12H7"}},
+		{"path", map[string]string{"d": "M19 19H5"}},
+	},
+	"text-align-end": {
+		{"path", map[string]string{"d": "M21 5H3"}},
+		{"path", map[string]string{"d": "M21 12H9"}},
+		{"path", map[string]string{"d": "M21 19H7"}},
+	},
+	"text-align-start": {
+		{"path", map[string]string{"d": "M21 5H3"}},
+		{"path", map[string]string{"d": "M15 12H3"}},
+		{"path", map[string]string{"d": "M17 19H3"}},
+	},
+	"text-cursor-input": {
+		{"path", map[string]string{"d": "M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"}},
+		{"path", map[string]string{"d": "M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"}},
+		{"path", map[string]string{"d": "M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"}},
+		{"path", map[string]string{"d": "M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"}},
+		{"path", map[string]string{"d": "M9 6v12"}},
+	},
+	"thumbs-down": {
+		{"path", map[string]string{"d": "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"}},
+		{"path", map[string]string{"d": "M17 14V2"}},
+	},
+	"thumbs-up": {
+		{"path", map[string]string{"d": "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"}},
+		{"path", map[string]string{"d": "M7 10v12"}},
+	},
+	"ticket-percent": {
+		{"path", map[string]string{"d": "M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"}},
+		{"path", map[string]string{"d": "M9 9h.01"}},
+		{"path", map[string]string{"d": "m15 9-6 6"}},
+		{"path", map[string]string{"d": "M15 15h.01"}},
+	},
+	"timer": {
+		{"line", map[string]string{"x1": "10", "x2": "14", "y1": "2", "y2": "2"}},
+		{"line", map[string]string{"x1": "12", "x2": "15", "y1": "14", "y2": "11"}},
+		{"circle", map[string]string{"cx": "12", "cy": "14", "r": "8"}},
+	},
+	"toggle-left": {
+		{"circle", map[string]string{"cx": "9", "cy": "12", "r": "3"}},
+		{"rect", map[string]string{"width": "20", "height": "14", "x": "2", "y": "5", "rx": "7"}},
+	},
+	"trash": {
+		{"path", map[string]string{"d": "M10 11v6"}},
+		{"path", map[string]string{"d": "M14 11v6"}},
+		{"path", map[string]string{"d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}},
+		{"path", map[string]string{"d": "M3 6h18"}},
+		{"path", map[string]string{"d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}},
+	},
+	"trees": {
+		{"path", map[string]string{"d": "M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"}},
+		{"path", map[string]string{"d": "M7 16v6"}},
+		{"path", map[string]string{"d": "M13 19v3"}},
+		{"path", map[string]string{"d": "M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"}},
+	},
+	"trending-down": {
+		{"path", map[string]string{"d": "M16 17h6v-6"}},
+		{"path", map[string]string{"d": "m22 17-8.5-8.5-5 5L2 7"}},
+	},
+	"trending-up": {
+		{"path", map[string]string{"d": "M16 7h6v6"}},
+		{"path", map[string]string{"d": "m22 7-8.5 8.5-5-5L2 17"}},
+	},
+	"triangle-alert": {
+		{"path", map[string]string{"d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}},
+		{"path", map[string]string{"d": "M12 9v4"}},
+		{"path", map[string]string{"d": "M12 17h.01"}},
+	},
+	"truck": {
+		{"path", map[string]string{"d": "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}},
+		{"path", map[string]string{"d": "M15 18H9"}},
+		{"path", map[string]string{"d": "M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"}},
+		{"circle", map[string]string{"cx": "17", "cy": "18", "r": "2"}},
+		{"circle", map[string]string{"cx": "7", "cy": "18", "r": "2"}},
+	},
+	"type": {
+		{"path", map[string]string{"d": "M12 4v16"}},
+		{"path", map[string]string{"d": "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"}},
+		{"path", map[string]string{"d": "M9 20h6"}},
+	},
+	"undo-2": {
+		{"path", map[string]string{"d": "M9 14 4 9l5-5"}},
+		{"path", map[string]string{"d": "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}},
+	},
+	"upload": {
+		{"path", map[string]string{"d": "M12 3v12"}},
+		{"path", map[string]string{"d": "m17 8-5-5-5 5"}},
+		{"path", map[string]string{"d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}},
+	},
+	"user": {
+		{"path", map[string]string{"d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}},
+		{"circle", map[string]string{"cx": "12", "cy": "7", "r": "4"}},
+	},
+	"user-check": {
+		{"path", map[string]string{"d": "m16 11 2 2 4-4"}},
+		{"path", map[string]string{"d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}},
+		{"circle", map[string]string{"cx": "9", "cy": "7", "r": "4"}},
+	},
+	"user-cog": {
+		{"path", map[string]string{"d": "M10 15H6a4 4 0 0 0-4 4v2"}},
+		{"path", map[string]string{"d": "m14.305 16.53.923-.382"}},
+		{"path", map[string]string{"d": "m15.228 13.852-.923-.383"}},
+		{"path", map[string]string{"d": "m16.852 12.228-.383-.923"}},
+		{"path", map[string]string{"d": "m16.852 17.772-.383.924"}},
+		{"path", map[string]string{"d": "m19.148 12.228.383-.923"}},
+		{"path", map[string]string{"d": "m19.53 18.696-.382-.924"}},
+		{"path", map[string]string{"d": "m20.772 13.852.924-.383"}},
+		{"path", map[string]string{"d": "m20.772 16.148.924.383"}},
+		{"circle", map[string]string{"cx": "18", "cy": "15", "r": "3"}},
+		{"circle", map[string]string{"cx": "9", "cy": "7", "r": "4"}},
+	},
+	"user-pen": {
+		{"path", map[string]string{"d": "M11.5 15H7a4 4 0 0 0-4 4v2"}},
+		{"path", map[string]string{"d": "M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"}},
+		{"circle", map[string]string{"cx": "10", "cy": "7", "r": "4"}},
+	},
+	"user-plus": {
+		{"path", map[string]string{"d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}},
+		{"circle", map[string]string{"cx": "9", "cy": "7", "r": "4"}},
+		{"line", map[string]string{"x1": "19", "x2": "19", "y1": "8", "y2": "14"}},
+		{"line", map[string]string{"x1": "22", "x2": "16", "y1": "11", "y2": "11"}},
+	},
+	"user-round-check": {
+		{"path", map[string]string{"d": "M2 21a8 8 0 0 1 13.292-6"}},
+		{"circle", map[string]string{"cx": "10", "cy": "8", "r": "5"}},
+		{"path", map[string]string{"d": "m16 19 2 2 4-4"}},
+	},
+	"user-x": {
+		{"path", map[string]string{"d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}},
+		{"circle", map[string]string{"cx": "9", "cy": "7", "r": "4"}},
+		{"line", map[string]string{"x1": "17", "x2": "22", "y1": "8", "y2": "13"}},
+		{"line", map[string]string{"x1": "22", "x2": "17", "y1": "8", "y2": "13"}},
+	},
+	"users": {
+		{"path", map[string]string{"d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}},
+		{"path", map[string]string{"d": "M16 3.128a4 4 0 0 1 0 7.744"}},
+		{"path", map[string]string{"d": "M22 21v-2a4 4 0 0 0-3-3.87"}},
+		{"circle", map[string]string{"cx": "9", "cy": "7", "r": "4"}},
+	},
+	"users-round": {
+		{"path", map[string]string{"d": "M18 21a8 8 0 0 0-16 0"}},
+		{"circle", map[string]string{"cx": "10", "cy": "8", "r": "5"}},
+		{"path", map[string]string{"d": "M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"}},
+	},
+	"video": {
+		{"path", map[string]string{"d": "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"}},
+		{"rect", map[string]string{"x": "2", "y": "6", "width": "14", "height": "12", "rx": "2"}},
+	},
+	"wallet": {
+		{"path", map[string]string{"d": "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"}},
+		{"path", map[string]string{"d": "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"}},
+	},
+	"wand-sparkles": {
+		{"path", map[string]string{"d": "m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"}},
+		{"path", map[string]string{"d": "m14 7 3 3"}},
+		{"path", map[string]string{"d": "M5 6v4"}},
+		{"path", map[string]string{"d": "M19 14v4"}},
+		{"path", map[string]string{"d": "M10 2v2"}},
+		{"path", map[string]string{"d": "M7 8H3"}},
+		{"path", map[string]string{"d": "M21 16h-4"}},
+		{"path", map[string]string{"d": "M11 3H9"}},
+	},
+	"webhook": {
+		{"path", map[string]string{"d": "M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"}},
+		{"path", map[string]string{"d": "m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"}},
+		{"path", map[string]string{"d": "m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"}},
+	},
+	"wrench": {
+		{"path", map[string]string{"d": "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"}},
+	},
+	"x": {
+		{"path", map[string]string{"d": "M18 6 6 18"}},
+		{"path", map[string]string{"d": "m6 6 12 12"}},
+	},
+	"zap": {
+		{"path", map[string]string{"d": "M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"}},
+	},
+}
diff --git a/generated/ui/radio/radio.templ b/packages/templ/ui/ui/radio/radio.templ
similarity index 91%
rename from generated/ui/radio/radio.templ
rename to packages/templ/ui/ui/radio/radio.templ
index 2a5a088..479dbd8 100644
--- a/generated/ui/radio/radio.templ
+++ b/packages/templ/ui/ui/radio/radio.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/radio.json
 
 /*
 Radio is a native single-choice control within a named group.
@@ -7,7 +8,7 @@ Radio is a native single-choice control within a named group.
 package radio
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // RadioProps configures Radio.
@@ -38,8 +39,8 @@ type RadioProps struct {
 // the server-composition escape hatch for custom root elements.
 func RadioClasses(p RadioProps) string {
 	return uiutils.Compose(RadioVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
diff --git a/packages/templ/ui/ui/radio/radio.variants.json b/packages/templ/ui/ui/radio/radio.variants.json
new file mode 100644
index 0000000..48c72cb
--- /dev/null
+++ b/packages/templ/ui/ui/radio/radio.variants.json
@@ -0,0 +1,23 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.radio",
+  "base": "shrink-0 appearance-none rounded-full bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary radio-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5 [--dot:10px]",
+      "sm": "size-4 [--dot:8px]"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/radio/radio_gen.go b/packages/templ/ui/ui/radio/radio_gen.go
new file mode 100644
index 0000000..3930c25
--- /dev/null
+++ b/packages/templ/ui/ui/radio/radio_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/radio.json
+
+package radio
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed radio.variants.json
+var radioVariantsJSON []byte
+
+// RadioVariants is the CVA recipe shared verbatim by all runtimes.
+var RadioVariants = uiutils.MustParseVariantRecipe(radioVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/range/range.templ b/packages/templ/ui/ui/range/range.templ
new file mode 100644
index 0000000..060f1ab
--- /dev/null
+++ b/packages/templ/ui/ui/range/range.templ
@@ -0,0 +1,58 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/range.json
+
+/*
+Range renders a styled input[type=range] (single thumb slider). The value is controlled from outside: Value in, an input event out (canary used a bindable prop).
+*/
+
+package rangefield
+
+import (
+	"strconv"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// RangeProps configures Range.
+type RangeProps struct {
+	// Value — current value as a string, controlled by the caller
+	Value string
+	// Min — lowest value, 0 by default
+	Min int
+	// Max — highest value, 100 by default
+	Max int
+	// Step — step, 1 by default
+	Step int
+	// Disabled — disables the slider
+	Disabled bool
+	// AriaLabel — accessible name
+	AriaLabel string
+	// Class — adds Tailwind utilities
+	Class string
+	Attrs templ.Attributes
+}
+
+// RangeClasses composes Range classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func RangeClasses(p RangeProps) string {
+	return uiutils.Compose(RangeVariants, map[string]string{}, p.Class)
+}
+
+// Range renders the Range contract.
+templ Range(p RangeProps) {
+	<input
+		type="range"
+		class={ RangeClasses(p) }
+		min={ uiutils.If((int(p.Min) > 0), strconv.Itoa(int(p.Min)), "0") }
+		max={ uiutils.If((int(p.Max) > 0), strconv.Itoa(int(p.Max)), "100") }
+		step={ uiutils.If((int(p.Step) > 0), strconv.Itoa(int(p.Step)), "1") }
+		if uiutils.IsSetStr(p.Value) {
+			value={ p.Value }
+		}
+		disabled?={ p.Disabled }
+		if uiutils.IsSetStr(p.AriaLabel) {
+			aria-label={ p.AriaLabel }
+		}
+		{ p.Attrs... }
+	/>
+}
diff --git a/packages/templ/ui/ui/range/range.variants.json b/packages/templ/ui/ui/range/range.variants.json
new file mode 100644
index 0000000..0f9b0de
--- /dev/null
+++ b/packages/templ/ui/ui/range/range.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.range",
+  "base": "h-5 w-full cursor-pointer appearance-none bg-transparent accent-primary disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded [&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/range/range_gen.go b/packages/templ/ui/ui/range/range_gen.go
new file mode 100644
index 0000000..409ce16
--- /dev/null
+++ b/packages/templ/ui/ui/range/range_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/range.json
+
+package rangefield
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed range.variants.json
+var rangeVariantsJSON []byte
+
+// RangeVariants is the CVA recipe shared verbatim by all runtimes.
+var RangeVariants = uiutils.MustParseVariantRecipe(rangeVariantsJSON).ToVariants()
diff --git a/generated/ui/select/select.templ b/packages/templ/ui/ui/select/select.templ
similarity index 95%
rename from generated/ui/select/select.templ
rename to packages/templ/ui/ui/select/select.templ
index 9a3cafc..1267d5b 100644
--- a/generated/ui/select/select.templ
+++ b/packages/templ/ui/ui/select/select.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/select.json
 
 /*
 Select is a native dropdown built from Option items.
@@ -7,7 +8,7 @@ Select is a native dropdown built from Option items.
 package selectfield
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // SelectOptionItem is one SelectOptionItem entry.
@@ -45,8 +46,8 @@ type SelectProps struct {
 // the server-composition escape hatch for custom root elements.
 func SelectClasses(p SelectProps) string {
 	return uiutils.Compose(SelectVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
diff --git a/packages/templ/ui/ui/select/select.variants.json b/packages/templ/ui/ui/select/select.variants.json
new file mode 100644
index 0000000..132d2e8
--- /dev/null
+++ b/packages/templ/ui/ui/select/select.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.select",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-3 text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/select/select_gen.go b/packages/templ/ui/ui/select/select_gen.go
new file mode 100644
index 0000000..6b4d11a
--- /dev/null
+++ b/packages/templ/ui/ui/select/select_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/select.json
+
+package selectfield
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed select.variants.json
+var selectVariantsJSON []byte
+
+// SelectVariants is the CVA recipe shared verbatim by all runtimes.
+var SelectVariants = uiutils.MustParseVariantRecipe(selectVariantsJSON).ToVariants()
diff --git a/generated/ui/separator/separator.templ b/packages/templ/ui/ui/separator/separator.templ
similarity index 88%
rename from generated/ui/separator/separator.templ
rename to packages/templ/ui/ui/separator/separator.templ
index c6210d8..93f42cb 100644
--- a/generated/ui/separator/separator.templ
+++ b/packages/templ/ui/ui/separator/separator.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/separator.json
 
 /*
 Separator renders a semantic or decorative hr.
@@ -7,7 +8,7 @@ Separator renders a semantic or decorative hr.
 package separator
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // SeparatorProps configures Separator.
@@ -27,8 +28,8 @@ type SeparatorProps struct {
 // the server-composition escape hatch for custom root elements.
 func SeparatorClasses(p SeparatorProps) string {
 	return uiutils.Compose(SeparatorVariants, map[string]string{
-		"variant": p.Variant,
 		"orientation": p.Orientation,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
diff --git a/packages/templ/ui/ui/separator/separator.variants.json b/packages/templ/ui/ui/separator/separator.variants.json
new file mode 100644
index 0000000..909771e
--- /dev/null
+++ b/packages/templ/ui/ui/separator/separator.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.separator",
+  "base": "shrink-0 border-0 bg-border",
+  "keys": [
+    "orientation",
+    "variant"
+  ],
+  "defaults": {
+    "orientation": "horizontal",
+    "variant": "default"
+  },
+  "byKey": {
+    "orientation": {
+      "horizontal": "h-px w-full",
+      "vertical": "h-full w-px"
+    },
+    "variant": {
+      "default": "",
+      "spaced": "my-6"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/separator/separator_gen.go b/packages/templ/ui/ui/separator/separator_gen.go
new file mode 100644
index 0000000..f0730b5
--- /dev/null
+++ b/packages/templ/ui/ui/separator/separator_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/separator.json
+
+package separator
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed separator.variants.json
+var separatorVariantsJSON []byte
+
+// SeparatorVariants is the CVA recipe shared verbatim by all runtimes.
+var SeparatorVariants = uiutils.MustParseVariantRecipe(separatorVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/sheet/sheet.templ b/packages/templ/ui/ui/sheet/sheet.templ
new file mode 100644
index 0000000..dcaf9b7
--- /dev/null
+++ b/packages/templ/ui/ui/sheet/sheet.templ
@@ -0,0 +1,191 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/sheet.json
+
+/*
+Sheet is a side drawer dialog with a trigger (Lucide menu/x) and a close button. Behavior: behaviors/ui8kit.js.
+*/
+
+package sheet
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SheetProps configures Sheet.
+type SheetProps struct {
+	// Side — left or right
+	Side string
+	// Class — adds Tailwind utilities
+	Class string
+	// ID — dialog id (target of SheetTrigger Controls)
+	ID string
+	// AriaLabel — accessible name (default: Menu)
+	AriaLabel string
+	// Open — render open (static); default hidden
+	Open bool
+	Attrs templ.Attributes
+}
+
+// SheetClasses composes Sheet classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func SheetClasses(p SheetProps) string {
+	return uiutils.Compose(SheetVariants, map[string]string{
+		"side": p.Side,
+	}, p.Class)
+}
+
+// Sheet renders the Sheet contract.
+templ Sheet(p SheetProps) {
+	<div
+		class={ SheetClasses(p) }
+		if uiutils.IsSetStr(p.ID) {
+			id={ p.ID }
+		}
+		role="dialog"
+		aria-modal="true"
+		aria-label={ uiutils.DefaultIfEmpty(p.AriaLabel, "Menu") }
+		data-ui8kit="sheet"
+		hidden?={ !(p.Open) }
+		{ p.Attrs... }
+	>
+		<div class="absolute inset-0 bg-foreground/40" data-ui8kit="sheet-overlay"></div>
+		<div
+			class="relative flex h-full w-80 max-w-full flex-col gap-6 overflow-auto bg-background p-6 text-foreground shadow-lg"
+		>
+			{ children... }
+		</div>
+	</div>
+}
+
+// SheetTriggerProps configures SheetTrigger.
+type SheetTriggerProps struct {
+	// Variant — default, ghost, contrast, current
+	Variant string
+	// Size — sm, default, lg
+	Size string
+	// Class — adds Tailwind utilities
+	Class string
+	// Controls — id of the Sheet
+	Controls string
+	// AriaLabel — accessible name (default: Open menu)
+	AriaLabel string
+	Attrs templ.Attributes
+}
+
+// SheetTriggerClasses composes SheetTrigger classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func SheetTriggerClasses(p SheetTriggerProps) string {
+	return uiutils.Compose(SheettriggerVariants, map[string]string{
+		"variant": p.Variant,
+		"size": p.Size,
+	}, p.Class)
+}
+
+// SheetTrigger renders the SheetTrigger contract.
+templ SheetTrigger(p SheetTriggerProps) {
+	<button
+		type="button"
+		class={ SheetTriggerClasses(p) }
+		data-ui8kit="sheet-trigger"
+		if uiutils.IsSetStr(p.Controls) {
+			aria-controls={ p.Controls }
+		}
+		aria-expanded="false"
+		aria-haspopup="dialog"
+		aria-label={ uiutils.DefaultIfEmpty(p.AriaLabel, "Open menu") }
+		{ p.Attrs... }
+	>
+		<svg
+			class="block size-5 in-aria-expanded:hidden"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<line
+				x1="4"
+				x2="20"
+				y1="12"
+				y2="12"
+			></line>
+			<line
+				x1="4"
+				x2="20"
+				y1="6"
+				y2="6"
+			></line>
+			<line
+				x1="4"
+				x2="20"
+				y1="18"
+				y2="18"
+			></line>
+		</svg>
+		<svg
+			class="hidden size-5 in-aria-expanded:block"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<path d="M18 6 6 18"></path>
+			<path d="m6 6 12 12"></path>
+		</svg>
+	</button>
+}
+
+// SheetCloseProps configures SheetClose.
+type SheetCloseProps struct {
+	// Variant — default, ghost, contrast, current
+	Variant string
+	// Size — sm, default, lg
+	Size string
+	// Class — adds Tailwind utilities
+	Class string
+	// AriaLabel — accessible name (default: Close menu)
+	AriaLabel string
+	Attrs templ.Attributes
+}
+
+// SheetCloseClasses composes SheetClose classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func SheetCloseClasses(p SheetCloseProps) string {
+	return uiutils.Compose(SheettriggerVariants, map[string]string{
+		"variant": p.Variant,
+		"size": p.Size,
+	}, p.Class)
+}
+
+// SheetClose renders the SheetClose contract.
+templ SheetClose(p SheetCloseProps) {
+	<button
+		type="button"
+		class={ SheetCloseClasses(p) }
+		data-ui8kit="sheet-close"
+		aria-label={ uiutils.DefaultIfEmpty(p.AriaLabel, "Close menu") }
+		{ p.Attrs... }
+	>
+		<svg
+			class="size-5"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<path d="M18 6 6 18"></path>
+			<path d="m6 6 12 12"></path>
+		</svg>
+	</button>
+}
diff --git a/packages/templ/ui/ui/sheet/sheet.variants.json b/packages/templ/ui/ui/sheet/sheet.variants.json
new file mode 100644
index 0000000..7f6e7ca
--- /dev/null
+++ b/packages/templ/ui/ui/sheet/sheet.variants.json
@@ -0,0 +1,17 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.sheet",
+  "base": "fixed inset-0 z-50 flex",
+  "keys": [
+    "side"
+  ],
+  "defaults": {
+    "side": "right"
+  },
+  "byKey": {
+    "side": {
+      "left": "flex-row justify-start",
+      "right": "flex-row justify-end"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/sheet/sheet_gen.go b/packages/templ/ui/ui/sheet/sheet_gen.go
new file mode 100644
index 0000000..7a3bf6e
--- /dev/null
+++ b/packages/templ/ui/ui/sheet/sheet_gen.go
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/sheet.json
+
+package sheet
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed sheet.variants.json
+var sheetVariantsJSON []byte
+
+// SheetVariants is the CVA recipe shared verbatim by all runtimes.
+var SheetVariants = uiutils.MustParseVariantRecipe(sheetVariantsJSON).ToVariants()
+
+//go:embed sheettrigger.variants.json
+var sheettriggerVariantsJSON []byte
+
+// SheettriggerVariants is the CVA recipe shared verbatim by all runtimes.
+var SheettriggerVariants = uiutils.MustParseVariantRecipe(sheettriggerVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/sheet/sheettrigger.variants.json b/packages/templ/ui/ui/sheet/sheettrigger.variants.json
new file mode 100644
index 0000000..e9d754b
--- /dev/null
+++ b/packages/templ/ui/ui/sheet/sheettrigger.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.sheettrigger",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/skeleton/skeleton.templ b/packages/templ/ui/ui/skeleton/skeleton.templ
new file mode 100644
index 0000000..7d7191a
--- /dev/null
+++ b/packages/templ/ui/ui/skeleton/skeleton.templ
@@ -0,0 +1,39 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/skeleton.json
+
+/*
+Skeleton renders a pulsing placeholder box (loading state). It is decorative: aria-hidden; the loading state is announced by the container (aria-busy).
+*/
+
+package skeleton
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// SkeletonProps configures Skeleton.
+type SkeletonProps struct {
+	// Shape — line, block or circle
+	Shape string
+	// Class — adds Tailwind utilities
+	Class string
+	Attrs templ.Attributes
+}
+
+// SkeletonClasses composes Skeleton classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func SkeletonClasses(p SkeletonProps) string {
+	return uiutils.Compose(SkeletonVariants, map[string]string{
+		"shape": p.Shape,
+	}, p.Class)
+}
+
+// Skeleton renders the Skeleton contract.
+templ Skeleton(p SkeletonProps) {
+	<div
+		class={ SkeletonClasses(p) }
+		aria-hidden="true"
+		data-slot="skeleton"
+		{ p.Attrs... }
+	></div>
+}
diff --git a/packages/templ/ui/ui/skeleton/skeleton.variants.json b/packages/templ/ui/ui/skeleton/skeleton.variants.json
new file mode 100644
index 0000000..ad1e74f
--- /dev/null
+++ b/packages/templ/ui/ui/skeleton/skeleton.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.skeleton",
+  "base": "animate-pulse bg-muted motion-reduce:animate-none rounded",
+  "keys": [
+    "shape"
+  ],
+  "defaults": {
+    "shape": "line"
+  },
+  "byKey": {
+    "shape": {
+      "line": "h-4 w-full",
+      "block": "h-20 w-full"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/skeleton/skeleton_gen.go b/packages/templ/ui/ui/skeleton/skeleton_gen.go
new file mode 100644
index 0000000..3e02b1d
--- /dev/null
+++ b/packages/templ/ui/ui/skeleton/skeleton_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/skeleton.json
+
+package skeleton
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed skeleton.variants.json
+var skeletonVariantsJSON []byte
+
+// SkeletonVariants is the CVA recipe shared verbatim by all runtimes.
+var SkeletonVariants = uiutils.MustParseVariantRecipe(skeletonVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/stack/stack.templ b/packages/templ/ui/ui/stack/stack.templ
new file mode 100644
index 0000000..f38a8bf
--- /dev/null
+++ b/packages/templ/ui/ui/stack/stack.templ
@@ -0,0 +1,65 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/stack.json
+
+/*
+Stack arranges children vertically in a flex column.
+Default layout primitive for spacing sections and form fields.
+*/
+
+package stack
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// StackProps configures Stack.
+type StackProps struct {
+	// Gap — sets gap: a Tailwind spacing step (0, 2, 4, 6, 8, 10, 12 = gap-N) or auto
+	Gap string
+	// Align — sets align
+	Align string
+	// Justify — sets justify
+	Justify string
+	// Class — adds Tailwind utilities
+	Class string
+	// Tag — div, ul, or ol. Use Block for landmarks (aside, section, header, nav).
+	Tag string
+	Attrs templ.Attributes
+}
+
+// StackClasses composes Stack classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func StackClasses(p StackProps) string {
+	return uiutils.Compose(StackVariants, map[string]string{
+		"gap": p.Gap,
+		"align": p.Align,
+		"justify": p.Justify,
+	}, p.Class)
+}
+
+// Stack renders the Stack contract.
+templ Stack(p StackProps) {
+	switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupStack) {
+		case "ul":
+			<ul
+				class={ StackClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</ul>
+		case "ol":
+			<ol
+				class={ StackClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</ol>
+		default:
+			<div
+				class={ StackClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</div>
+	}
+}
diff --git a/packages/templ/ui/ui/stack/stack.variants.json b/packages/templ/ui/ui/stack/stack.variants.json
new file mode 100644
index 0000000..c720342
--- /dev/null
+++ b/packages/templ/ui/ui/stack/stack.variants.json
@@ -0,0 +1,40 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.stack",
+  "base": "flex flex-col",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "start",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/stack/stack_gen.go b/packages/templ/ui/ui/stack/stack_gen.go
new file mode 100644
index 0000000..1e00516
--- /dev/null
+++ b/packages/templ/ui/ui/stack/stack_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/stack.json
+
+package stack
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed stack.variants.json
+var stackVariantsJSON []byte
+
+// StackVariants is the CVA recipe shared verbatim by all runtimes.
+var StackVariants = uiutils.MustParseVariantRecipe(stackVariantsJSON).ToVariants()
diff --git a/generated/ui/switch/switch.templ b/packages/templ/ui/ui/switch/switch.templ
similarity index 88%
rename from generated/ui/switch/switch.templ
rename to packages/templ/ui/ui/switch/switch.templ
index 9a0f684..f497bdd 100644
--- a/generated/ui/switch/switch.templ
+++ b/packages/templ/ui/ui/switch/switch.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/switch.json
 
 /*
 Switch is a toggle control (checkbox with switch ARIA semantics).
@@ -8,13 +9,11 @@ Use for on/off settings; wireframe uses native checkbox styling.
 package formswitch
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // SwitchProps configures Switch.
 type SwitchProps struct {
-	// Variant — sets appearance preset
-	Variant string
 	// Size — sets density preset
 	Size string
 	// Class — adds Tailwind utilities
@@ -34,7 +33,6 @@ type SwitchProps struct {
 // the server-composition escape hatch for custom root elements.
 func SwitchClasses(p SwitchProps) string {
 	return uiutils.Compose(SwitchVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
 	}, p.Class)
 }
diff --git a/packages/templ/ui/ui/switch/switch.variants.json b/packages/templ/ui/ui/switch/switch.variants.json
new file mode 100644
index 0000000..243eed4
--- /dev/null
+++ b/packages/templ/ui/ui/switch/switch.variants.json
@@ -0,0 +1,17 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.switch",
+  "base": "relative shrink-0 appearance-none bg-muted inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary switch-knob disabled:cursor-not-allowed disabled:opacity-50 rounded-full",
+  "keys": [
+    "size"
+  ],
+  "defaults": {
+    "size": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "h-5 w-9 [--knob:12px] [--pad:4px]",
+      "sm": "h-4 w-8 [--knob:12px] [--pad:2px]"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/switch/switch_gen.go b/packages/templ/ui/ui/switch/switch_gen.go
new file mode 100644
index 0000000..3949a9f
--- /dev/null
+++ b/packages/templ/ui/ui/switch/switch_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/switch.json
+
+package formswitch
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed switch.variants.json
+var switchVariantsJSON []byte
+
+// SwitchVariants is the CVA recipe shared verbatim by all runtimes.
+var SwitchVariants = uiutils.MustParseVariantRecipe(switchVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/table/table-cell.variants.json b/packages/templ/ui/ui/table/table-cell.variants.json
new file mode 100644
index 0000000..0725dbc
--- /dev/null
+++ b/packages/templ/ui/ui/table/table-cell.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table-cell",
+  "base": "px-2 py-2 align-middle",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/table/table-head-cell.variants.json b/packages/templ/ui/ui/table/table-head-cell.variants.json
new file mode 100644
index 0000000..d7d0d52
--- /dev/null
+++ b/packages/templ/ui/ui/table/table-head-cell.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table-head-cell",
+  "base": "px-2 py-2 text-left align-middle font-semibold",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/generated/ui/table/table.templ b/packages/templ/ui/ui/table/table.templ
similarity index 95%
rename from generated/ui/table/table.templ
rename to packages/templ/ui/ui/table/table.templ
index 6d61b4f..9ae828e 100644
--- a/generated/ui/table/table.templ
+++ b/packages/templ/ui/ui/table/table.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
 
 /*
 Table composes semantic table, caption, sections, rows, and cells.
@@ -10,7 +11,7 @@ package table
 import (
 	"strconv"
 
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // TableProps configures Table.
@@ -169,7 +170,7 @@ type TableHeadCellProps struct {
 // TableHeadCellClasses composes TableHeadCell classes without rendering —
 // the server-composition escape hatch for custom root elements.
 func TableHeadCellClasses(p TableHeadCellProps) string {
-	return uiutils.Cn(p.Class)
+	return uiutils.Compose(TableHeadCellVariants, map[string]string{}, p.Class)
 }
 
 // TableHeadCell renders the TableHeadCell contract.
@@ -215,7 +216,7 @@ type TableCellProps struct {
 // TableCellClasses composes TableCell classes without rendering —
 // the server-composition escape hatch for custom root elements.
 func TableCellClasses(p TableCellProps) string {
-	return uiutils.Cn(p.Class)
+	return uiutils.Compose(TableCellVariants, map[string]string{}, p.Class)
 }
 
 // TableCell renders the TableCell contract.
diff --git a/packages/templ/ui/ui/table/table.variants.json b/packages/templ/ui/ui/table/table.variants.json
new file mode 100644
index 0000000..7b2c2ad
--- /dev/null
+++ b/packages/templ/ui/ui/table/table.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/templ/ui/ui/table/table_gen.go b/packages/templ/ui/ui/table/table_gen.go
new file mode 100644
index 0000000..3d574e8
--- /dev/null
+++ b/packages/templ/ui/ui/table/table_gen.go
@@ -0,0 +1,28 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/table.json
+
+package table
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed table.variants.json
+var tableVariantsJSON []byte
+
+// TableVariants is the CVA recipe shared verbatim by all runtimes.
+var TableVariants = uiutils.MustParseVariantRecipe(tableVariantsJSON).ToVariants()
+
+//go:embed table-cell.variants.json
+var tableCellVariantsJSON []byte
+
+// TableCellVariants is the CVA recipe shared verbatim by all runtimes.
+var TableCellVariants = uiutils.MustParseVariantRecipe(tableCellVariantsJSON).ToVariants()
+
+//go:embed table-head-cell.variants.json
+var tableHeadCellVariantsJSON []byte
+
+// TableHeadCellVariants is the CVA recipe shared verbatim by all runtimes.
+var TableHeadCellVariants = uiutils.MustParseVariantRecipe(tableHeadCellVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/text/text.templ b/packages/templ/ui/ui/text/text.templ
new file mode 100644
index 0000000..3664ff0
--- /dev/null
+++ b/packages/templ/ui/ui/text/text.templ
@@ -0,0 +1,251 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/text.json
+
+/*
+Text renders body copy: a paragraph by default; Tag picks another text element (blockquote, figcaption, address, pre, or an
+inline element). Title (as 1–6) is for headings.
+*/
+
+package text
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// TextProps configures Text.
+type TextProps struct {
+	// Size — sets size
+	Size string
+	// Weight — sets weight
+	Weight string
+	// Class — adds Tailwind utilities
+	Class string
+	// Tag — p (default), blockquote, figcaption, address, pre, or an inline element (span, strong, em, ...)
+	Tag string
+	Attrs templ.Attributes
+}
+
+// TextClasses composes Text classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func TextClasses(p TextProps) string {
+	return uiutils.Compose(TextVariants, map[string]string{
+		"size": p.Size,
+		"weight": p.Weight,
+	}, p.Class)
+}
+
+// Text renders the Text contract.
+templ Text(p TextProps) {
+	switch uiutils.ResolveTag(p.Tag, "p", uiutils.TagGroupText) {
+		case "blockquote":
+			<blockquote
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</blockquote>
+		case "figcaption":
+			<figcaption
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</figcaption>
+		case "address":
+			<address
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</address>
+		case "pre":
+			<pre
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</pre>
+		case "span":
+			<span
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</span>
+		case "em":
+			<em
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</em>
+		case "strong":
+			<strong
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</strong>
+		case "small":
+			<small
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</small>
+		case "abbr":
+			<abbr
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</abbr>
+		case "cite":
+			<cite
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</cite>
+		case "code":
+			<code
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</code>
+		case "kbd":
+			<kbd
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</kbd>
+		case "mark":
+			<mark
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</mark>
+		case "time":
+			<time
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</time>
+		case "data":
+			<data
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</data>
+		case "var":
+			<var
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</var>
+		case "samp":
+			<samp
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</samp>
+		case "sub":
+			<sub
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</sub>
+		case "sup":
+			<sup
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</sup>
+		case "b":
+			<b
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</b>
+		case "i":
+			<i
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</i>
+		case "u":
+			<u
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</u>
+		case "s":
+			<s
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</s>
+		case "q":
+			<q
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</q>
+		case "dfn":
+			<dfn
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</dfn>
+		case "bdo":
+			<bdo
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</bdo>
+		case "bdi":
+			<bdi
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</bdi>
+		case "ins":
+			<ins
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</ins>
+		case "del":
+			<del
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</del>
+		default:
+			<p
+				class={ TextClasses(p) }
+				{ p.Attrs... }
+			>
+				{ children... }
+			</p>
+	}
+}
diff --git a/packages/templ/ui/ui/text/text.variants.json b/packages/templ/ui/ui/text/text.variants.json
new file mode 100644
index 0000000..2869a4f
--- /dev/null
+++ b/packages/templ/ui/ui/text/text.variants.json
@@ -0,0 +1,34 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.text",
+  "base": "",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "inherit"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold",
+      "inherit": ""
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/text/text_gen.go b/packages/templ/ui/ui/text/text_gen.go
new file mode 100644
index 0000000..db26b29
--- /dev/null
+++ b/packages/templ/ui/ui/text/text_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/text.json
+
+package text
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed text.variants.json
+var textVariantsJSON []byte
+
+// TextVariants is the CVA recipe shared verbatim by all runtimes.
+var TextVariants = uiutils.MustParseVariantRecipe(textVariantsJSON).ToVariants()
diff --git a/generated/ui/textarea/textarea.templ b/packages/templ/ui/ui/textarea/textarea.templ
similarity index 92%
rename from generated/ui/textarea/textarea.templ
rename to packages/templ/ui/ui/textarea/textarea.templ
index 128dcab..d207e55 100644
--- a/generated/ui/textarea/textarea.templ
+++ b/packages/templ/ui/ui/textarea/textarea.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/textarea.json
 
 /*
 Textarea is a multi-line native text field with row sizing.
@@ -9,7 +10,7 @@ package textarea
 import (
 	"strconv"
 
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // TextareaProps configures Textarea.
@@ -43,8 +44,8 @@ type TextareaProps struct {
 // the server-composition escape hatch for custom root elements.
 func TextareaClasses(p TextareaProps) string {
 	return uiutils.Compose(TextareaVariants, map[string]string{
-		"variant": p.Variant,
 		"size": p.Size,
+		"variant": p.Variant,
 	}, p.Class)
 }
 
diff --git a/packages/templ/ui/ui/textarea/textarea.variants.json b/packages/templ/ui/ui/textarea/textarea.variants.json
new file mode 100644
index 0000000..6480057
--- /dev/null
+++ b/packages/templ/ui/ui/textarea/textarea.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.textarea",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "min-h-16 px-3 py-2 text-base md:text-sm",
+      "default": "min-h-20 px-3 py-2 text-base md:text-sm",
+      "lg": "min-h-24 px-4 py-3 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/templ/ui/ui/textarea/textarea_gen.go b/packages/templ/ui/ui/textarea/textarea_gen.go
new file mode 100644
index 0000000..23a2e46
--- /dev/null
+++ b/packages/templ/ui/ui/textarea/textarea_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/textarea.json
+
+package textarea
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed textarea.variants.json
+var textareaVariantsJSON []byte
+
+// TextareaVariants is the CVA recipe shared verbatim by all runtimes.
+var TextareaVariants = uiutils.MustParseVariantRecipe(textareaVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/ui/themetoggle/themetoggle.templ b/packages/templ/ui/ui/themetoggle/themetoggle.templ
new file mode 100644
index 0000000..6e9cd29
--- /dev/null
+++ b/packages/templ/ui/ui/themetoggle/themetoggle.templ
@@ -0,0 +1,89 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/themetoggle.json
+
+/*
+ThemeToggle switches between light and dark color schemes (button with aria-pressed). Behavior: data-ui8kit="theme-toggle" in behaviors/ui8kit.js.
+*/
+
+package themetoggle
+
+import (
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+// ThemeToggleProps configures ThemeToggle.
+type ThemeToggleProps struct {
+	// Variant — default, ghost, contrast (on primary surfaces), current (inherits text color)
+	Variant string
+	// Size — sm, default, lg
+	Size string
+	// Class — adds Tailwind utilities
+	Class string
+	ID string
+	// AriaLabel — accessible name (default: Dark mode)
+	AriaLabel string
+	Attrs templ.Attributes
+}
+
+// ThemeToggleClasses composes ThemeToggle classes without rendering —
+// the server-composition escape hatch for custom root elements.
+func ThemeToggleClasses(p ThemeToggleProps) string {
+	return uiutils.Compose(ThemetoggleVariants, map[string]string{
+		"variant": p.Variant,
+		"size": p.Size,
+	}, p.Class)
+}
+
+// ThemeToggle renders the ThemeToggle contract.
+templ ThemeToggle(p ThemeToggleProps) {
+	<button
+		type="button"
+		class={ ThemeToggleClasses(p) }
+		if uiutils.IsSetStr(p.ID) {
+			id={ p.ID }
+		}
+		data-ui8kit="theme-toggle"
+		aria-label={ uiutils.DefaultIfEmpty(p.AriaLabel, "Dark mode") }
+		aria-pressed="false"
+		{ p.Attrs... }
+	>
+		<svg
+			class="hidden size-5 dark:block"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<circle
+				cx="12"
+				cy="12"
+				r="4"
+			></circle>
+			<path d="M12 2v2"></path>
+			<path d="M12 20v2"></path>
+			<path d="m4.93 4.93 1.41 1.41"></path>
+			<path d="m17.66 17.66 1.41 1.41"></path>
+			<path d="M2 12h2"></path>
+			<path d="M20 12h2"></path>
+			<path d="m6.34 17.66-1.41 1.41"></path>
+			<path d="m19.07 4.93-1.41 1.41"></path>
+		</svg>
+		<svg
+			class="block size-5 dark:hidden"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+		</svg>
+	</button>
+}
diff --git a/packages/templ/ui/ui/themetoggle/themetoggle.variants.json b/packages/templ/ui/ui/themetoggle/themetoggle.variants.json
new file mode 100644
index 0000000..e373e79
--- /dev/null
+++ b/packages/templ/ui/ui/themetoggle/themetoggle.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.themetoggle",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/themetoggle/themetoggle_gen.go b/packages/templ/ui/ui/themetoggle/themetoggle_gen.go
new file mode 100644
index 0000000..3b15184
--- /dev/null
+++ b/packages/templ/ui/ui/themetoggle/themetoggle_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/themetoggle.json
+
+package themetoggle
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed themetoggle.variants.json
+var themetoggleVariantsJSON []byte
+
+// ThemetoggleVariants is the CVA recipe shared verbatim by all runtimes.
+var ThemetoggleVariants = uiutils.MustParseVariantRecipe(themetoggleVariantsJSON).ToVariants()
diff --git a/generated/ui/title/title.templ b/packages/templ/ui/ui/title/title.templ
similarity index 79%
rename from generated/ui/title/title.templ
rename to packages/templ/ui/ui/title/title.templ
index 21858b8..c1c7a11 100644
--- a/generated/ui/title/title.templ
+++ b/packages/templ/ui/ui/title/title.templ
@@ -1,4 +1,5 @@
-// Code generated by @ui8kit/codegen. DO NOT EDIT.
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/title.json
 
 /*
 Title renders a heading (h1–h6) from As (1–6). Defaults to h2 when As is 0
@@ -8,11 +9,15 @@ or out of range.
 package title
 
 import (
-	uiutils "github.com/ui8kit/ui/utils"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
 )
 
 // TitleProps configures Title.
 type TitleProps struct {
+	// Size — sets size
+	Size string
+	// Weight — sets weight
+	Weight string
 	// Class — adds Tailwind utilities
 	Class string
 	// As — maps to h1–h6; 0 and 2 default to h2
@@ -23,7 +28,10 @@ type TitleProps struct {
 // TitleClasses composes Title classes without rendering —
 // the server-composition escape hatch for custom root elements.
 func TitleClasses(p TitleProps) string {
-	return uiutils.Compose(TitleVariants, map[string]string{}, p.Class)
+	return uiutils.Compose(TitleVariants, map[string]string{
+		"size": p.Size,
+		"weight": p.Weight,
+	}, p.Class)
 }
 
 // Title renders the Title contract.
diff --git a/packages/templ/ui/ui/title/title.variants.json b/packages/templ/ui/ui/title/title.variants.json
new file mode 100644
index 0000000..aeb5034
--- /dev/null
+++ b/packages/templ/ui/ui/title/title.variants.json
@@ -0,0 +1,33 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.title",
+  "base": "text-foreground",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "semibold"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold"
+    }
+  }
+}
diff --git a/packages/templ/ui/ui/title/title_gen.go b/packages/templ/ui/ui/title/title_gen.go
new file mode 100644
index 0000000..22ab0b7
--- /dev/null
+++ b/packages/templ/ui/ui/title/title_gen.go
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/ui/title.json
+
+package title
+
+import (
+	_ "embed"
+
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+//go:embed title.variants.json
+var titleVariantsJSON []byte
+
+// TitleVariants is the CVA recipe shared verbatim by all runtimes.
+var TitleVariants = uiutils.MustParseVariantRecipe(titleVariantsJSON).ToVariants()
diff --git a/packages/templ/ui/utils/cn_merge.go b/packages/templ/ui/utils/cn_merge.go
new file mode 100644
index 0000000..00a9c05
--- /dev/null
+++ b/packages/templ/ui/utils/cn_merge.go
@@ -0,0 +1,295 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/assets/go/cn_merge.go
+package uiutils
+
+import (
+	"strings"
+	"unicode"
+)
+
+func mergeTailwind(classes ...string) string {
+	var tokens []string
+	for _, chunk := range classes {
+		for _, part := range strings.Fields(chunk) {
+			tokens = append(tokens, part)
+		}
+	}
+	if len(tokens) == 0 {
+		return ""
+	}
+
+	// tailwind-merge semantics: each class has one group; a later class removes the earlier classes
+	// of its own group and of the groups it overrides (p-2 removes an earlier px-4, not the reverse).
+	type item struct {
+		token string
+		key   string
+	}
+	kept := make([]item, 0, len(tokens))
+	for _, token := range tokens {
+		prefix, key, removes := classKey(token)
+		if key != "" {
+			drop := map[string]bool{key: true}
+			for _, g := range removes {
+				drop[prefix+g] = true
+			}
+			next := kept[:0]
+			for _, it := range kept {
+				if !drop[it.key] {
+					next = append(next, it)
+				}
+			}
+			kept = next
+		}
+		kept = append(kept, item{token: token, key: key})
+	}
+
+	out := make([]string, 0, len(kept))
+	for _, it := range kept {
+		out = append(out, it.token)
+	}
+	return strings.Join(out, " ")
+}
+
+// classKey: the variant prefix, the conflict key (prefix + group) and the groups this class overrides.
+func classKey(token string) (prefix, key string, removes []string) {
+	prefix, core := splitVariant(token)
+	if core == "" {
+		return "", "", nil
+	}
+	groups := utilityGroups(core)
+	if len(groups) == 0 {
+		// no known group: only the same class conflicts with itself (tailwind-merge keeps the last of duplicates)
+		return prefix, "=" + token, nil
+	}
+	return prefix, prefix + groups[0], groups[1:]
+}
+
+func splitVariant(token string) (prefix, core string) {
+	depth := 0
+	cut := -1
+	for i, r := range token {
+		switch r {
+		case '[':
+			depth++
+		case ']':
+			if depth > 0 {
+				depth--
+			}
+		case ':':
+			if depth == 0 {
+				cut = i
+			}
+		}
+	}
+	if cut == -1 {
+		return "", strings.TrimPrefix(token, "!")
+	}
+	return token[:cut+1], strings.TrimPrefix(token[cut+1:], "!")
+}
+
+func utilityGroups(core string) []string {
+	switch core {
+	case "block", "inline", "inline-block", "inline-flex", "flex", "grid", "contents", "hidden":
+		return []string{"display"}
+	case "flex-row", "flex-col", "flex-row-reverse", "flex-col-reverse":
+		return []string{"flex-direction"}
+	case "static", "relative", "absolute", "fixed", "sticky":
+		return []string{"position"}
+	case "isolate", "isolation-auto":
+		return []string{"isolation"}
+	}
+
+	// rings: the width (ring, ring-2) and the colour (ring-primary) are separate groups, as in tailwind-merge
+	for _, kind := range []string{"inset-ring", "ring"} {
+		if core == kind {
+			return []string{kind + "-width"}
+		}
+		if rest, ok := strings.CutPrefix(core, kind+"-"); ok {
+			if isNumber(rest) {
+				return []string{kind + "-width"}
+			}
+			return []string{kind + "-color"}
+		}
+	}
+
+	if group, ok := prefixGroup(core, [][2]string{
+		{"gap-x-", "gap-x"},
+		{"gap-y-", "gap-y"},
+		{"items-", "align-items"},
+		{"justify-", "justify-content"},
+		{"self-", "align-self"},
+		{"content-", "align-content"},
+		{"overflow-x-", "overflow-x"},
+		{"overflow-y-", "overflow-y"},
+		{"inset-x-", "inset-x"},
+		{"inset-y-", "inset-y"},
+		{"min-w-", "min-width"},
+		{"min-h-", "min-height"},
+		{"max-w-", "max-width"},
+		{"max-h-", "max-height"},
+		{"shadow-", "shadow"},
+		{"ring-", "ring"},
+		{"rounded-", "rounded"},
+		{"leading-", "leading"},
+		{"tracking-", "tracking"},
+		{"opacity-", "opacity"},
+		{"z-", "z"},
+		{"top-", "top"},
+		{"right-", "right"},
+		{"bottom-", "bottom"},
+		{"left-", "left"},
+	}); ok {
+		return []string{group}
+	}
+
+	switch {
+	case strings.HasPrefix(core, "gap-"):
+		return []string{"gap", "gap-x", "gap-y"}
+	case strings.HasPrefix(core, "inset-"):
+		return []string{"inset", "inset-x", "inset-y", "top", "right", "bottom", "left"}
+	case strings.HasPrefix(core, "overflow-"):
+		return []string{"overflow", "overflow-x", "overflow-y"}
+	case core == "border" || (strings.HasPrefix(core, "border-") && isNumber(core[7:])):
+		return []string{"border-width", "border-w-x", "border-w-y", "border-w-t", "border-w-r", "border-w-b", "border-w-l", "border-w-s", "border-w-e"}
+	case len(core) >= 8 && strings.HasPrefix(core, "border-") && strings.Contains("xytrblse", core[7:8]) && (len(core) == 8 || (core[8] == '-' && isNumber(core[9:]))):
+		side := core[7:8]
+		if side == "x" {
+			return []string{"border-w-x", "border-w-r", "border-w-l", "border-w-s", "border-w-e"}
+		}
+		if side == "y" {
+			return []string{"border-w-y", "border-w-t", "border-w-b"}
+		}
+		return []string{"border-w-" + side}
+	case core == "text-left" || core == "text-center" || core == "text-right" || core == "text-justify" || core == "text-start" || core == "text-end":
+		return []string{"text-align"}
+	case core == "rounded":
+		return []string{"rounded"}
+	case core == "shadow" || core == "shadow-none":
+		return []string{"shadow"}
+	case core == "flex-1" || core == "flex-auto" || core == "flex-none" || core == "flex-initial":
+		return []string{"flex-size", "flex-grow", "flex-shrink", "flex-basis"}
+	case core == "grow" || strings.HasPrefix(core, "grow-"):
+		return []string{"flex-grow"}
+	case core == "shrink" || core == "shrink-0":
+		return []string{"flex-shrink"}
+	}
+
+	if strings.HasPrefix(core, "size-") {
+		return []string{"size", "width", "height"}
+	}
+	if strings.HasPrefix(core, "w-") {
+		return []string{"width"}
+	}
+	if strings.HasPrefix(core, "h-") {
+		return []string{"height"}
+	}
+
+	if strings.HasPrefix(core, "p-") && !hasDirectionPrefix(core, "p") {
+		return []string{"padding", "padding-x", "padding-y", "padding-t", "padding-r", "padding-b", "padding-l", "padding-s", "padding-e"}
+	}
+	if g, ok := spaceAxis(core, "p"); ok {
+		return g
+	}
+	if strings.HasPrefix(core, "m-") && !hasDirectionPrefix(core, "m") {
+		return []string{"margin", "margin-x", "margin-y", "margin-t", "margin-r", "margin-b", "margin-l", "margin-s", "margin-e"}
+	}
+	if g, ok := spaceAxis(core, "m"); ok {
+		return g
+	}
+
+	if strings.HasPrefix(core, "bg-") {
+		return []string{"bg"}
+	}
+	if isTextSize(core) {
+		return []string{"text-size", "leading"}
+	}
+	if strings.HasPrefix(core, "text-") {
+		return []string{"text-color"}
+	}
+	if strings.HasPrefix(core, "font-") && isFontWeight(core) {
+		return []string{"font-weight"}
+	}
+	return nil
+}
+
+func prefixGroup(core string, prefixes [][2]string) (string, bool) {
+	for _, pair := range prefixes {
+		if strings.HasPrefix(core, pair[0]) {
+			return pair[1], true
+		}
+	}
+	return "", false
+}
+
+func hasDirectionPrefix(core, kind string) bool {
+	for _, dir := range []string{"x-", "y-", "t-", "r-", "b-", "l-", "s-", "e-"} {
+		if strings.HasPrefix(core, kind+dir) {
+			return true
+		}
+	}
+	return false
+}
+
+func spaceAxis(core, kind string) ([]string, bool) {
+	switch {
+	case strings.HasPrefix(core, kind+"x-"):
+		return []string{kindName(kind) + "-x", kindName(kind) + "-r", kindName(kind) + "-l", kindName(kind) + "-s", kindName(kind) + "-e"}, true
+	case strings.HasPrefix(core, kind+"y-"):
+		return []string{kindName(kind) + "-y", kindName(kind) + "-t", kindName(kind) + "-b"}, true
+	case strings.HasPrefix(core, kind+"t-"):
+		return []string{kindName(kind) + "-t"}, true
+	case strings.HasPrefix(core, kind+"r-"):
+		return []string{kindName(kind) + "-r"}, true
+	case strings.HasPrefix(core, kind+"b-"):
+		return []string{kindName(kind) + "-b"}, true
+	case strings.HasPrefix(core, kind+"l-"):
+		return []string{kindName(kind) + "-l"}, true
+	}
+	return nil, false
+}
+
+func kindName(kind string) string {
+	if kind == "p" {
+		return "padding"
+	}
+	return "margin"
+}
+
+func isTextSize(core string) bool {
+	switch core {
+	case "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "text-3xl", "text-4xl", "text-5xl", "text-6xl", "text-7xl", "text-8xl", "text-9xl":
+		return true
+	}
+	if strings.HasPrefix(core, "text-[") {
+		rest := strings.TrimPrefix(core, "text-[")
+		if rest == "" {
+			return false
+		}
+		return unicode.IsDigit(rune(rest[0])) || rest[0] == '.'
+	}
+	return false
+}
+
+func isFontWeight(core string) bool {
+	switch core {
+	case "font-thin", "font-extralight", "font-light", "font-normal", "font-medium", "font-semibold", "font-bold", "font-extrabold", "font-black":
+		return true
+	}
+	return false
+}
+
+// isNumber: a bare number (2, 0.5) or an arbitrary length ([3px])
+func isNumber(s string) bool {
+	if strings.HasPrefix(s, "[") {
+		return true
+	}
+	if s == "" {
+		return false
+	}
+	for _, c := range s {
+		if (c < '0' || c > '9') && c != '.' {
+			return false
+		}
+	}
+	return true
+}
diff --git a/runtime/go/cn_merge_test.go b/packages/templ/ui/utils/cn_merge_test.go
similarity index 91%
rename from runtime/go/cn_merge_test.go
rename to packages/templ/ui/utils/cn_merge_test.go
index 78a3b6b..c1f2128 100644
--- a/runtime/go/cn_merge_test.go
+++ b/packages/templ/ui/utils/cn_merge_test.go
@@ -1,3 +1,5 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/assets/go/cn_merge_test.go
 package uiutils
 
 import (
diff --git a/packages/templ/ui/utils/dyn.go b/packages/templ/ui/utils/dyn.go
new file mode 100644
index 0000000..63b277e
--- /dev/null
+++ b/packages/templ/ui/utils/dyn.go
@@ -0,0 +1,705 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/assets/go/dyn.go
+package uiutils
+
+// The dynamic values of the generated organisms: props, records and labels travel as `any` (JSON shapes: string,
+// float64, bool, nil, []any, map[string]any), read with the same rules as the TypeScript output (JS truthiness,
+// strict equality, String(), clsx + tailwind-merge for classes). Every helper is nil-safe, like `?.` in TypeScript.
+
+import (
+	"fmt"
+	"encoding/json"
+	"math"
+	"strconv"
+	"strings"
+
+	"github.com/a-h/templ"
+)
+
+// Get reads a path of fields: Get(plan, "price", "amount"); `length` of a list or a text is its size.
+func Get(v any, path ...string) any {
+	for _, k := range path {
+		switch x := v.(type) {
+		case map[string]any:
+			v = x[k]
+		case []any:
+			if k == "length" {
+				v = float64(len(x))
+			} else if i, err := strconv.Atoi(k); err == nil && i >= 0 && i < len(x) {
+				v = x[i]
+			} else {
+				return nil
+			}
+		case string:
+			if k != "length" {
+				return nil
+			}
+			v = float64(len([]rune(x)))
+		default:
+			return nil
+		}
+	}
+	return v
+}
+
+// num is the number of a value (int, float64), and whether it is one.
+func num(v any) (float64, bool) {
+	switch x := v.(type) {
+	case float64:
+		return x, true
+	case int:
+		return float64(x), true
+	case int64:
+		return float64(x), true
+	case float32:
+		return float64(x), true
+	}
+	return 0, false
+}
+
+// fmtNum is String(n) of JavaScript for the numbers the views print: 3, 2.5, -1.
+func fmtNum(f float64) string {
+	if math.IsNaN(f) {
+		return "NaN"
+	}
+	if f == math.Trunc(f) && math.Abs(f) < 1e21 {
+		return strconv.FormatFloat(f, 'f', -1, 64)
+	}
+	return strconv.FormatFloat(f, 'g', -1, 64)
+}
+
+// S is String(v) for a value read into a string slot; nil is the empty string.
+func S(v any) string {
+	switch x := v.(type) {
+	case nil:
+		return ""
+	case string:
+		return x
+	case bool:
+		if x {
+			return "true"
+		}
+		return "false"
+	}
+	if f, ok := num(v); ok {
+		return fmtNum(f)
+	}
+	b, _ := json.Marshal(v)
+	return string(b)
+}
+
+// Text is what a text node shows: React and Svelte print nothing for nil and booleans.
+func Text(v any) string {
+	if _, ok := v.(bool); ok {
+		return ""
+	}
+	return S(v)
+}
+
+// T is the truthiness of JavaScript: nil, false, 0, NaN and "" are false.
+func T(v any) bool {
+	switch x := v.(type) {
+	case nil:
+		return false
+	case bool:
+		return x
+	case string:
+		return x != ""
+	}
+	if f, ok := num(v); ok {
+		return f != 0 && !math.IsNaN(f)
+	}
+	return true
+}
+
+// N is Number(v): numbers as they are, numeric strings parsed, booleans 0 or 1, the rest 0.
+func N(v any) float64 {
+	if f, ok := num(v); ok {
+		return f
+	}
+	switch x := v.(type) {
+	case string:
+		f, err := strconv.ParseFloat(strings.TrimSpace(x), 64)
+		if err == nil {
+			return f
+		}
+	case bool:
+		if x {
+			return 1
+		}
+	}
+	return 0
+}
+
+// I is an int for an int prop of a brick (Size: 16).
+func I(v any) int { return int(math.Round(N(v))) }
+
+// Eq is strict equality (===) of two values.
+func Eq(a, b any) bool {
+	fa, okA := num(a)
+	fb, okB := num(b)
+	if okA || okB {
+		return okA && okB && fa == fb
+	}
+	switch x := a.(type) {
+	case nil:
+		return b == nil
+	case string:
+		y, ok := b.(string)
+		return ok && x == y
+	case bool:
+		y, ok := b.(bool)
+		return ok && x == y
+	}
+	return false
+}
+
+// Lt and friends compare numbers, or two texts by their code units.
+func cmp(a, b any) (int, bool) {
+	if x, ok := a.(string); ok {
+		if y, ok2 := b.(string); ok2 {
+			return strings.Compare(x, y), true
+		}
+	}
+	if a == nil || b == nil {
+		return 0, false
+	}
+	fa, fb := N(a), N(b)
+	switch {
+	case fa < fb:
+		return -1, true
+	case fa > fb:
+		return 1, true
+	}
+	return 0, true
+}
+func Lt(a, b any) bool { c, ok := cmp(a, b); return ok && c < 0 }
+func Gt(a, b any) bool { c, ok := cmp(a, b); return ok && c > 0 }
+func Le(a, b any) bool { c, ok := cmp(a, b); return ok && c <= 0 }
+func Ge(a, b any) bool { c, ok := cmp(a, b); return ok && c >= 0 }
+
+// Add is `a + b`: text when either side is text, else a sum.
+func Add(a, b any) any {
+	_, sa := a.(string)
+	_, sb := b.(string)
+	if sa || sb {
+		return S(a) + S(b)
+	}
+	return N(a) + N(b)
+}
+func Sub(a, b any) any { return N(a) - N(b) }
+func Mul(a, b any) any { return N(a) * N(b) }
+func Div(a, b any) any { return N(a) / N(b) }
+
+// And and Or keep the value of JavaScript: the first falsy (And) or truthy (Or) operand, else the last.
+func And(vs ...any) any {
+	var last any
+	for _, v := range vs {
+		if !T(v) {
+			return v
+		}
+		last = v
+	}
+	return last
+}
+func Or(vs ...any) any {
+	var last any
+	for _, v := range vs {
+		if T(v) {
+			return v
+		}
+		last = v
+	}
+	return last
+}
+
+// Coalesce is `a ?? b ?? c`.
+func Coalesce(vs ...any) any {
+	for _, v := range vs {
+		if v != nil {
+			return v
+		}
+	}
+	return nil
+}
+
+// Def is a prop with its default: the default when the prop is nil.
+func Def(v, d any) any {
+	if v == nil {
+		return d
+	}
+	return v
+}
+
+// Cond is `c ? a : b` (both sides are pure values, read eagerly).
+func Cond(c bool, a, b any) any {
+	if c {
+		return a
+	}
+	return b
+}
+
+// L is a list to range over; nil and other values are empty.
+func L(v any) []any {
+	switch x := v.(type) {
+	case []any:
+		return x
+	case []string:
+		out := make([]any, len(x))
+		for i, s := range x {
+			out[i] = s
+		}
+		return out
+	case []map[string]any:
+		out := make([]any, len(x))
+		for i, s := range x {
+			out[i] = s
+		}
+		return out
+	}
+	return nil
+}
+
+// Len is `x?.length ?? 0`.
+func Len(v any) any {
+	switch x := v.(type) {
+	case string:
+		return float64(len([]rune(x)))
+	case nil:
+		return float64(0)
+	}
+	return float64(len(L(v)))
+}
+
+// List is a literal array.
+func List(vs ...any) any { return vs }
+
+// Group is a literal object; Spread copies the fields of a named group first (`{ ...BASE, mode: "two" }`).
+func Spread(base any, fields map[string]any) any {
+	out := map[string]any{}
+	if m, ok := base.(map[string]any); ok {
+		for k, v := range m {
+			out[k] = v
+		}
+	}
+	for k, v := range fields {
+		out[k] = v
+	}
+	return out
+}
+
+// Str is String(x) with undefined kept undefined.
+func Str(v any) any {
+	if v == nil {
+		return nil
+	}
+	return S(v)
+}
+
+// Has is `x != null`.
+func Has(v any) bool { return v != nil }
+
+// Cnv is cn(...) over values: clsx skips the falsy ones, tailwind-merge resolves conflicts.
+func Cnv(vs ...any) string {
+	parts := make([]string, 0, len(vs))
+	for _, v := range vs {
+		if T(v) {
+			parts = append(parts, S(v))
+		}
+	}
+	return mergeTailwind(parts...)
+}
+
+// Tpl fills {0}, {1}... of a content template.
+func Tpl(t any, vals ...any) string {
+	s := S(t)
+	var b strings.Builder
+	for i := 0; i < len(s); i++ {
+		if s[i] == '{' {
+			j := i + 1
+			for j < len(s) && s[j] >= '0' && s[j] <= '9' {
+				j++
+			}
+			if j > i+1 && j < len(s) && s[j] == '}' {
+				n, _ := strconv.Atoi(s[i+1 : j])
+				if n < len(vals) {
+					b.WriteString(S(vals[n]))
+				}
+				i = j
+				continue
+			}
+		}
+		b.WriteByte(s[i])
+	}
+	return b.String()
+}
+
+// group writes the integer part of a number with en-US thousands separators.
+func group(f float64, decimals int) string {
+	s := strconv.FormatFloat(math.Abs(f), 'f', decimals, 64)
+	intPart, frac, _ := strings.Cut(s, ".")
+	var b strings.Builder
+	for i, c := range intPart {
+		if i > 0 && (len(intPart)-i)%3 == 0 {
+			b.WriteByte(',')
+		}
+		b.WriteRune(c)
+	}
+	out := b.String()
+	if frac != "" {
+		frac = strings.TrimRight(frac, "0")
+		if frac != "" {
+			out += "." + frac
+		}
+	}
+	if f < 0 && out != "0" {
+		out = "-" + out
+	}
+	return out
+}
+
+// Num is Intl.NumberFormat("en-US"): grouped, up to 3 decimals.
+func Num(v any) string { return group(N(v), 3) }
+
+var currencySymbols = map[string]string{"USD": "$", "EUR": "€", "GBP": "£", "JPY": "¥", "INR": "₹", "CAD": "CA$", "AUD": "A$"}
+
+// MinorDigits is the digits of the minor unit (ISO 4217): 2, or 0 for JPY and KRW.
+func MinorDigits(c string) int {
+	if c == "JPY" || c == "KRW" {
+		return 0
+	}
+	return 2
+}
+
+// Money formats integer minor units (Codex v0.4: 1250 = 12.50) like Intl.NumberFormat("en-US", {style: "currency"}),
+// without the fraction when the amount is whole: 149900 -> "$1,499", 1250 -> "$12.50".
+func Money(amount, currency any) string {
+	c := S(currency)
+	sym, ok := currencySymbols[c]
+	if !ok {
+		sym = c + "\u00a0"
+	}
+	minor := math.Round(N(amount))
+	sign := ""
+	if minor < 0 {
+		sign, minor = "-", -minor
+	}
+	d := MinorDigits(c)
+	unit := math.Pow(10, float64(d))
+	whole := math.Floor(minor / unit)
+	out := sign + sym + group(whole, 0)
+	if rest := minor - whole*unit; d > 0 && rest != 0 {
+		out += fmt.Sprintf(".%0*d", d, int(rest))
+	}
+	return out
+}
+
+// At is a content word by key, the key itself when the dictionary has no entry.
+func At(dict, key any) string {
+	if v := Get(dict, S(key)); v != nil {
+		return S(v)
+	}
+	return S(key)
+}
+
+// PageWindow is the pages a pager shows: the first, the last and the neighbours of the current one; nil is a gap.
+func PageWindow(pageV, pagesV any) any {
+	page, pages := int(N(pageV)), int(N(pagesV))
+	keep := map[int]bool{}
+	for _, n := range []int{1, pages, page - 1, page, page + 1} {
+		if n >= 1 && n <= pages {
+			keep[n] = true
+		}
+	}
+	out := []any{}
+	prev := 0
+	for n := 1; n <= pages; n++ {
+		if !keep[n] {
+			continue
+		}
+		if n-prev > 1 {
+			out = append(out, nil)
+		}
+		out = append(out, float64(n))
+		prev = n
+	}
+	return out
+}
+
+// FitCols caps a responsive column variant of Grid by the number of items: ("1-4", 3) -> "1-3".
+func FitCols(colsV, nV any) string {
+	cols, n := S(colsV), int(N(nV))
+	lo, hi, ok := strings.Cut(cols, "-")
+	l, e1 := strconv.Atoi(lo)
+	h, e2 := strconv.Atoi(hi)
+	if !ok || e1 != nil || e2 != nil {
+		return cols
+	}
+	if n >= h {
+		return cols
+	}
+	top := l
+	if n > top {
+		top = n
+	}
+	known := map[string]bool{"1-2": true, "1-3": true, "1-4": true, "2-3": true, "2-4": true, "2-6": true, "3-6": true}
+	for k := top; k > l; k-- {
+		if known[strconv.Itoa(l)+"-"+strconv.Itoa(k)] {
+			return strconv.Itoa(l) + "-" + strconv.Itoa(k)
+		}
+	}
+	m := n
+	if m < 1 {
+		m = 1
+	}
+	if l < m {
+		m = l
+	}
+	return strconv.Itoa(m)
+}
+
+// Uniq drops a segment of a ", " label equal (case-insensitive) to the one before it.
+func Uniq(v any) string {
+	parts := strings.Split(S(v), ", ")
+	out := make([]string, 0, len(parts))
+	for i, s := range parts {
+		if i == 0 || !strings.EqualFold(s, parts[i-1]) {
+			out = append(out, s)
+		}
+	}
+	return strings.Join(out, ", ")
+}
+
+// Words splits a text at its spaces.
+func Words(v any) any {
+	out := []any{}
+	for _, w := range strings.Split(S(v), " ") {
+		out = append(out, w)
+	}
+	return out
+}
+
+// Nbsp makes every space a no-break space.
+func Nbsp(v any) string { return strings.ReplaceAll(S(v), " ", "\u00a0") }
+
+// Nth is `list?.[i]`.
+func Nth(list, i any) any {
+	l := L(list)
+	n := int(N(i))
+	if n < 0 || n >= len(l) {
+		return nil
+	}
+	return l[n]
+}
+
+// Range is [0 .. n-1].
+func Range(n any) any {
+	out := []any{}
+	for i := 0; i < int(N(n)); i++ {
+		out = append(out, float64(i))
+	}
+	return out
+}
+
+func Max(vs ...any) any {
+	m := math.Inf(-1)
+	for _, v := range vs {
+		m = math.Max(m, N(v))
+	}
+	return m
+}
+func Min(vs ...any) any {
+	m := math.Inf(1)
+	for _, v := range vs {
+		m = math.Min(m, N(v))
+	}
+	return m
+}
+
+// Round is Math.round (halves up).
+func Round(v any) any { return math.Floor(N(v) + 0.5) }
+
+// Count is how many items have a truthy field.
+func Count(items, field any) any {
+	n := 0
+	for _, it := range L(items) {
+		if T(Get(it, S(field))) {
+			n++
+		}
+	}
+	return float64(n)
+}
+
+// Where keeps the items whose field equals the value; an empty value keeps all.
+func Where(items, field, value any) any {
+	if !T(value) {
+		return L(items)
+	}
+	out := []any{}
+	for _, it := range L(items) {
+		if Eq(Get(it, S(field)), value) {
+			out = append(out, it)
+		}
+	}
+	return out
+}
+
+// Match keeps the items whose text field contains the query, ignoring case; an empty query keeps all.
+func Match(items, field, query any) any {
+	if !T(query) {
+		return L(items)
+	}
+	q := strings.ToLower(S(query))
+	out := []any{}
+	for _, it := range L(items) {
+		if strings.Contains(strings.ToLower(S(Get(it, S(field)))), q) {
+			out = append(out, it)
+		}
+	}
+	return out
+}
+
+// Pick is the item whose id equals the value.
+func Pick(items, id any) any {
+	for _, it := range L(items) {
+		if Eq(Get(it, "id"), id) {
+			return it
+		}
+	}
+	return nil
+}
+
+// SumBy is the sum of a * b over the items.
+func SumBy(items any, a, b string) any {
+	s := 0.0
+	for _, it := range L(items) {
+		s += N(Get(it, a)) * N(Get(it, b))
+	}
+	return s
+}
+
+// FirstOf is a field of the first item, "" for none.
+func FirstOf(items any, field string) any {
+	l := L(items)
+	if len(l) == 0 {
+		return ""
+	}
+	return Coalesce(Get(l[0], field), "")
+}
+
+// MaxBy is the largest field of the items, 0 for none.
+func MaxBy(items any, field string) any {
+	m := 0.0
+	for _, it := range L(items) {
+		m = math.Max(m, N(Get(it, field)))
+	}
+	return m
+}
+
+// Css is an inline style from (property, value, unit) triples: "height:12px;width:50%".
+func Css(triples ...any) string {
+	parts := []string{}
+	for i := 0; i+2 < len(triples); i += 3 {
+		parts = append(parts, S(triples[i])+":"+S(triples[i+1])+S(triples[i+2]))
+	}
+	return strings.Join(parts, ";")
+}
+
+// Variant is a class string of a recipe table (shadcn/cva style): base, each key in order, the matching compounds.
+func Variant(r VariantRecipe, compound []map[string]string, sel map[string]any) string {
+	pick := func(k string) string {
+		if v := strings.TrimSpace(S(sel[k])); v != "" {
+			return v
+		}
+		return strings.TrimSpace(r.Defaults[k])
+	}
+	parts := []string{r.Base}
+	for _, k := range r.Keys {
+		parts = append(parts, r.ByKey[k][pick(k)])
+	}
+	for _, c := range compound {
+		ok := true
+		for k, want := range c {
+			if k == "class" {
+				continue
+			}
+			hit := false
+			for _, w := range strings.Split(want, "|") {
+				if w == pick(k) {
+					hit = true
+				}
+			}
+			ok = ok && hit
+		}
+		if ok {
+			parts = append(parts, c["class"])
+		}
+	}
+	keep := []string{}
+	for _, p := range parts {
+		if p = strings.TrimSpace(p); p != "" {
+			keep = append(keep, p)
+		}
+	}
+	return mergeTailwind(keep...)
+}
+
+// Recipe is a parsed recipe file with its compound variants.
+type Recipe struct {
+	VariantRecipe
+}
+
+// MustRecipe parses an embedded *.variants.json.
+func MustRecipe(data []byte) Recipe {
+	var r Recipe
+	if err := json.Unmarshal(data, &r); err != nil {
+		panic(err)
+	}
+	return r
+}
+
+// Of is the class string of a recipe for a selection.
+func (r Recipe) Of(sel map[string]any) string {
+	return Variant(r.VariantRecipe, r.VariantRecipe.Compound, sel)
+}
+
+// MustJSON parses embedded JSON into `any` (the kit presets).
+func MustJSON(data []byte) any {
+	var v any
+	if err := json.Unmarshal(data, &v); err != nil {
+		panic(err)
+	}
+	return v
+}
+
+// As converts a dynamic value into a typed one through JSON (the items of a brick: []BreadcrumbItem).
+func As[T any](v any) T {
+	var out T
+	b, err := json.Marshal(v)
+	if err == nil {
+		_ = json.Unmarshal(b, &out)
+	}
+	return out
+}
+
+// Attrs are free DOM attributes from (name, value) pairs, as React prints them: nil is left out, a boolean of a
+// data-* or aria-* attribute is its text, a boolean of another attribute is present or absent, a number is its text.
+func Attrs(kv ...any) templ.Attributes {
+	out := templ.Attributes{}
+	for i := 0; i+1 < len(kv); i += 2 {
+		k, v := S(kv[i]), kv[i+1]
+		switch x := v.(type) {
+		case nil:
+			continue
+		case bool:
+			if strings.HasPrefix(k, "data-") || strings.HasPrefix(k, "aria-") {
+				out[k] = S(x)
+			} else if x {
+				out[k] = true
+			}
+		default:
+			out[k] = S(v)
+		}
+	}
+	return out
+}
diff --git a/runtime/go/expr.go b/packages/templ/ui/utils/expr.go
similarity index 96%
rename from runtime/go/expr.go
rename to packages/templ/ui/utils/expr.go
index 5cb80b8..0b47666 100644
--- a/runtime/go/expr.go
+++ b/packages/templ/ui/utils/expr.go
@@ -1,3 +1,5 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/assets/go/expr.go
 package uiutils
 
 import "strings"
diff --git a/runtime/go/heading.go b/packages/templ/ui/utils/heading.go
similarity index 84%
rename from runtime/go/heading.go
rename to packages/templ/ui/utils/heading.go
index ea79a36..fcc42f6 100644
--- a/runtime/go/heading.go
+++ b/packages/templ/ui/utils/heading.go
@@ -1,3 +1,5 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/assets/go/heading.go
 package uiutils
 
 // HeadingLevel maps to h1–h6 (default h2 when zero or out of range).
diff --git a/runtime/go/tags.go b/packages/templ/ui/utils/tags.go
similarity index 97%
rename from runtime/go/tags.go
rename to packages/templ/ui/utils/tags.go
index 04268e6..6db1809 100644
--- a/runtime/go/tags.go
+++ b/packages/templ/ui/utils/tags.go
@@ -1,3 +1,5 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/assets/go/tags.go
 // Code generated by tagsgen. DO NOT EDIT.
 
 // TagGroup restricts HTML tags for one primitive semantic group.
diff --git a/packages/templ/ui/utils/utils.go b/packages/templ/ui/utils/utils.go
new file mode 100644
index 0000000..b9f4124
--- /dev/null
+++ b/packages/templ/ui/utils/utils.go
@@ -0,0 +1,92 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/assets/go/utils.go
+// Package uiutils holds shared Go helpers for generated UI8Kit bricks.
+package uiutils
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/a-h/templ"
+)
+
+// Variants groups a base utility chain and keyed variant maps (cva-style).
+type Variants struct {
+	Base     string
+	Keys     []string
+	ByKey    map[string]map[string]string
+	Defaults map[string]string
+	Compound []map[string]string
+}
+
+// Compose merges Base, variant selections, and optional tail classes.
+func Compose(v Variants, selection map[string]string, extra ...string) string {
+	var parts []string
+	if strings.TrimSpace(v.Base) != "" {
+		parts = append(parts, strings.TrimSpace(v.Base))
+	}
+	for _, key := range v.Keys {
+		choices, ok := v.ByKey[key]
+		if !ok {
+			continue
+		}
+		choice := strings.TrimSpace(selection[key])
+		if choice == "" {
+			choice = strings.TrimSpace(v.Defaults[key])
+		}
+		if choice == "" {
+			if len(choices) > 0 {
+				panic(fmt.Sprintf("[Compose] missing default for key %q", key))
+			}
+			continue
+		}
+		if cls, ok2 := choices[choice]; ok2 {
+			if strings.TrimSpace(cls) != "" {
+				parts = append(parts, cls)
+			}
+		}
+		// Unknown choices are silently dropped to avoid leaking typos into
+		// the DOM as literal class names.
+	}
+	for _, c := range v.Compound {
+		ok := true
+		for k, want := range c {
+			if k == "class" {
+				continue
+			}
+			got := strings.TrimSpace(selection[k])
+			if got == "" {
+				got = strings.TrimSpace(v.Defaults[k])
+			}
+			hit := false
+			for _, w := range strings.Split(want, "|") {
+				if w == got {
+					hit = true
+				}
+			}
+			ok = ok && hit
+		}
+		if ok && strings.TrimSpace(c["class"]) != "" {
+			parts = append(parts, c["class"])
+		}
+	}
+	parts = append(parts, extra...)
+	return Cn(parts...)
+}
+
+// Cn joins class fragments and resolves Tailwind conflicts (last class wins),
+// matching the JS `cn` = clsx + tailwind-merge used by HostingPanel kit.
+func Cn(classes ...string) string {
+	return mergeTailwind(classes...)
+}
+
+// MergeAttrs merges attribute maps left to right.
+func MergeAttrs(parts ...templ.Attributes) templ.Attributes {
+	out := templ.Attributes{}
+	for _, attrs := range parts {
+		for k, v := range attrs {
+			out[k] = v
+		}
+	}
+	return out
+}
diff --git a/packages/templ/ui/utils/variants_json.go b/packages/templ/ui/utils/variants_json.go
new file mode 100644
index 0000000..7d7ff91
--- /dev/null
+++ b/packages/templ/ui/utils/variants_json.go
@@ -0,0 +1,51 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/templ/assets/go/variants_json.go
+package uiutils
+
+import (
+	"encoding/json"
+	"fmt"
+)
+
+// VariantRecipe is the JSON shape for *.variants.json (shared with React CVA recipes).
+type VariantRecipe struct {
+	ID       string                       `json:"id"`
+	Base     string                       `json:"base"`
+	Keys     []string                     `json:"keys"`
+	Defaults map[string]string            `json:"defaults"`
+	ByKey    map[string]map[string]string `json:"byKey"`
+	Meta     map[string]string            `json:"meta,omitempty"`
+	Compound []map[string]string          `json:"compound,omitempty"`
+}
+
+// ToVariants converts a recipe into the in-memory CVA map used by Compose.
+func (r VariantRecipe) ToVariants() Variants {
+	return Variants{
+		Base:     r.Base,
+		Keys:     r.Keys,
+		ByKey:    r.ByKey,
+		Defaults: r.Defaults,
+		Compound: r.Compound,
+	}
+}
+
+// ParseVariantRecipe unmarshals *.variants.json bytes.
+func ParseVariantRecipe(data []byte) (VariantRecipe, error) {
+	var recipe VariantRecipe
+	if err := json.Unmarshal(data, &recipe); err != nil {
+		return VariantRecipe{}, fmt.Errorf("variants JSON: %w", err)
+	}
+	if recipe.ByKey == nil {
+		return VariantRecipe{}, fmt.Errorf("variants JSON: missing byKey")
+	}
+	return recipe, nil
+}
+
+// MustParseVariantRecipe parses recipe JSON or panics (for generated init blocks).
+func MustParseVariantRecipe(data []byte) VariantRecipe {
+	recipe, err := ParseVariantRecipe(data)
+	if err != nil {
+		panic(err)
+	}
+	return recipe
+}
diff --git a/packages/tooling/bin/audit.sh b/packages/tooling/bin/audit.sh
new file mode 100755
index 0000000..d0ec26f
--- /dev/null
+++ b/packages/tooling/bin/audit.sh
@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+# Pre-push audit: the commits of the branch must not carry private/, shots/, .fig, design-kit assets, secrets or server addresses.
+# Usage: xgen-audit [base-ref]   (bin of @ui8kit/xgen-tooling, default origin/main); from the root: bun run audit:push
+# The Lucide icon data (public, ISC) is the one thing left out of the secret scan: SVG path numbers look like addresses.
+# base: the last pushed state of this branch; the empty tree before the first push
+if [ -n "$1" ]; then base="$1"; elif git rev-parse -q --verify origin/main >/dev/null; then base="origin/main"; else base=$(git hash-object -t tree -w /dev/null); fi
+bad=$(git diff --name-only "$base"..HEAD | grep -iE '(^|/)(private|shots|\.manual)/|\.fig$|(^|/)public/p/|\.(png|jpe?g|gif|webp|avif|ico|woff2?|ttf|otf|fig)$|\.env|\.pem$|\.key$|id_rsa' || true)
+sec=$(git diff "$base"..HEAD -- . ':(top,exclude)packages/tooling/bin/audit.sh' ':(top,exclude)xgen/specs/assets/lucide-icons.json' ':(top,exclude)packages/*/ui/src/primitives/lucide-icon/lucide-icons.ts' ':(top,exclude)packages/templ/ui/ui/lucide-icon/lucide_icons.go' ':(top,exclude)packages/twig/ui/ui/lucide-icon/lucide-icons.json' ':(top,exclude)packages/jinja2/ui/ui/lucide-icon/lucide-icons.json' ':(top,exclude)packages/latte/ui/ui/lucide-icon/lucide-icons.json' | grep -E '^\+' | grep -v '^+++' | grep -iE 'BEGIN [A-Z ]*PRIVATE KEY|ghp_[A-Za-z0-9]{20,}|github_pat_|sk-[A-Za-z0-9]{20,}|ssh [a-z@]|(^|[^0-9.])([0-9]{1,3}\.){3}[0-9]{1,3}([^0-9.]|$)|[a-z0-9]+-vps\b' | grep -v '127\.0\.0\.1' || true)
+if [ -n "$bad" ] || [ -n "$sec" ]; then echo "AUDIT FAILED"; echo "$bad"; echo "$sec" | cut -c1-120; exit 1; fi
+echo "audit ok: $(git diff --name-only "$base"..HEAD | wc -l) files, no private/shots/.fig/public/p, no secrets or addresses"
diff --git a/packages/tooling/bin/rules.mjs b/packages/tooling/bin/rules.mjs
new file mode 100755
index 0000000..7076a41
--- /dev/null
+++ b/packages/tooling/bin/rules.mjs
@@ -0,0 +1,12 @@
+#!/usr/bin/env bun
+// Rules 01, 02, 03 and 06 for the workspace this runs in (apps/<name> or packages/<name>): a delegate of the `rules` group of `xgen check`.
+// It replaces the old Svelte-only xgen-retag, xgen-rules and xgen-i18n: one set of detectors for svelte, react and vue,
+// zones from the "ui8kit" field of package.json, baselines in rules/baselines/<package>.json. Cyrillic is the `text` group of `xgen check`.
+//   xgen-rules          exit 1 on a finding that is not recorded in the baseline
+import path from "node:path";
+import { spawnSync } from "node:child_process";
+import { APP, REPO } from "../src/app.mjs";
+
+const dir = path.relative(REPO, APP);
+const r = spawnSync("bun", [path.join(REPO, "xgen/check/tools/rules.ts"), "--gate", ...(dir ? [dir] : [])], { stdio: "inherit" });
+process.exit(r.status ?? 1);
diff --git a/packages/tooling/bin/ui8px-extract.mjs b/packages/tooling/bin/ui8px-extract.mjs
new file mode 100644
index 0000000..85dd500
--- /dev/null
+++ b/packages/tooling/bin/ui8px-extract.mjs
@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+// ui8px reads class="..." in .html files only (also .css @apply, .templ, .go); it does not see JSON specs, .svelte, .tsx or .vue.
+// This bridge mirrors every class set of the specs (the single source of truth) into .ui8px/extract/specs/<dir>/<spec>.html,
+// one <i data-src="$.json.path" class="..."> per class set, so a lint hit points at the spec location to change.
+// Usage (from the workspace root): node packages/tooling/bin/ui8px-extract.mjs
+import fs from "node:fs";
+import path from "node:path";
+
+const root = process.cwd();
+const out = path.join(root, ".ui8px/extract");
+fs.rmSync(out, { recursive: true, force: true });
+
+/** keys whose string value is a class list (variant tables: base/staticBase, view nodes: Class/className) */
+const CLASS_KEYS = new Set(["base", "staticBase", "class", "Class", "className", "classes"]);
+/** keys whose object holds class lists by variant value (variant tables) or by path (presets) */
+const TABLE_KEYS = new Set(["byKey", "values"]);
+
+/** the static class strings inside a class-valued expression (cn, coalesce, or, both branches of cond) */
+function classLeaves(v, p, acc) {
+  if (typeof v === "string") { if (v.trim()) acc.push([p, v.trim()]); return; }
+  if (!v || typeof v !== "object" || Array.isArray(v) || "$" in v) return;
+  const args = Array.isArray(v.args) ? v.args : [];
+  if (v.op === "cn" || v.op === "coalesce" || v.op === "or") args.forEach((a, i) => classLeaves(a, `${p}.args[${i}]`, acc));
+  else if (v.op === "cond") [1, 2].forEach((i) => classLeaves(args[i], `${p}.args[${i}]`, acc));
+}
+
+/** every string below a table key: a variant value or a preset path */
+function tableLeaves(v, p, acc) {
+  if (typeof v === "string") { if (v.trim()) acc.push([p, v.trim()]); return; }
+  if (Array.isArray(v)) return v.forEach((x, i) => tableLeaves(x, `${p}[${i}]`, acc));
+  if (v && typeof v === "object") for (const [k, x] of Object.entries(v)) tableLeaves(x, `${p}.${k}`, acc);
+}
+
+function collect(node, p, acc) {
+  if (Array.isArray(node)) return node.forEach((v, i) => collect(v, `${p}[${i}]`, acc));
+  if (!node || typeof node !== "object") return;
+  for (const [k, v] of Object.entries(node)) {
+    const kp = `${p}.${k}`;
+    if (TABLE_KEYS.has(k) && v && typeof v === "object") { tableLeaves(v, kp, acc); continue; }
+    if (CLASS_KEYS.has(k)) {
+      if (typeof v === "string") { if (v.trim()) acc.push([kp, v.trim()]); continue; }
+      if (v && typeof v === "object" && "op" in v) { classLeaves(v, kp, acc); continue; }
+    }
+    collect(v, kp, acc);
+  }
+}
+
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+const specRoot = path.join(root, "xgen/specs");
+let lists = 0;
+let files = 0;
+for (const dir of fs.readdirSync(specRoot, { withFileTypes: true })) {
+  if (!dir.isDirectory()) continue;
+  for (const file of fs.readdirSync(path.join(specRoot, dir.name)).sort()) {
+    if (!file.endsWith(".json")) continue;
+    const acc = [];
+    collect(JSON.parse(fs.readFileSync(path.join(specRoot, dir.name, file), "utf8")), "$", acc);
+    if (!acc.length) continue;
+    const target = path.join(out, "specs", dir.name, file.replace(/\.json$/, ".html"));
+    fs.mkdirSync(path.dirname(target), { recursive: true });
+    const body = acc.map(([jp, cls]) => `<i data-src="${esc(jp)}" class="${esc(cls)}"></i>`).join("\n");
+    fs.writeFileSync(target, `<!-- source: xgen/specs/${dir.name}/${file} -->\n${body}\n`);
+    lists += acc.length;
+    files++;
+  }
+}
+// a nested .gitignore keeps the mirror out of git; ui8px reads only the root .gitignore, so it still scans the files
+fs.writeFileSync(path.join(out, ".gitignore"), "*\n");
+console.log(`ui8px-extract: ${lists} class sets from ${files} specs -> .ui8px/extract/specs`);
diff --git a/packages/tooling/bin/ui8px-gate.mjs b/packages/tooling/bin/ui8px-gate.mjs
new file mode 100644
index 0000000..3c0ffc4
--- /dev/null
+++ b/packages/tooling/bin/ui8px-gate.mjs
@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+// The ui8px gate: extract the class sets of the specs, lint them, write the JSON report to a file (stdout is cut at 64 KiB),
+// print a summary by rule and by spec, and fail when the blocking rules exceed the ratchet in .ui8px/gate.json.
+// Blocking: UI8PX001 (spacing off the grid of the scope), UI8PX003 (denied class), UI8PX005 (unknown ui-* class), GRID (below).
+// Report only: UI8PX002 (class not in the allowed list) and UI8PX004 (conflict; inset-ring + inset-ring-<color> is a false positive).
+// Usage (from the workspace root): bun run lint:px      UI8PX_MAX=<n> overrides the ratchet for one run.
+import fs from "node:fs";
+import { execFileSync, spawnSync } from "node:child_process";
+
+execFileSync(process.execPath, ["packages/tooling/bin/ui8px-extract.mjs"], { stdio: "inherit" });
+fs.mkdirSync(".ui8px/reports", { recursive: true });
+const report = ".ui8px/reports/lint.json";
+// stdout goes straight to the file: through a pipe ui8px exits before a long report is flushed
+const fd = fs.openSync(report, "w");
+const run = spawnSync("node_modules/.bin/ui8px", ["lint", ".ui8px/extract/specs", "--json"], { stdio: ["ignore", fd, "pipe"], encoding: "utf8" });
+fs.closeSync(fd);
+if (run.status === 2 || run.status === null) { console.error(run.stderr || "ui8px failed"); process.exit(2); }
+
+const gate = JSON.parse(fs.readFileSync(".ui8px/gate.json", "utf8"));
+const max = process.env.UI8PX_MAX !== undefined ? Number(process.env.UI8PX_MAX) : gate.max;
+const blockingRules = new Set(gate.blocking);
+// GRID: spacing-like tokens that ui8px files under UI8PX002 because its grammar does not know them (size-*, space-x/y-*,
+// negative spacing, w/h/inset with a number), checked against the scale of the scope of the file
+const allowed = JSON.parse(fs.readFileSync(".ui8px/policy/allowed.json", "utf8"));
+const scopes = JSON.parse(fs.readFileSync(".ui8px/policy/scopes.json", "utf8"));
+const scaleOf = (scope) => allowed.spacing[scopes.scopes.find((s) => s.name === scope)?.spacing ?? "layout"];
+const GRID_RE = /^-?(size|space-[xy]|p[xytrbl]?|m[xytrbl]?|gap(?:-[xy])?|[wh]|min-[wh]|max-[wh]|top|right|bottom|left|inset(?:-[xy])?)-(\d+(?:\.\d+)?|\[[^\]]+\])$/;
+const { diagnostics } = JSON.parse(fs.readFileSync(report, "utf8"));
+const counts = {};
+const blocking = [];
+for (const d of diagnostics) {
+  counts[d.rule] = (counts[d.rule] ?? 0) + 1;
+  if (blockingRules.has(d.rule)) { blocking.push({ ...d, gate: d.rule }); continue; }
+  if (d.rule !== "UI8PX002" || !blockingRules.has("GRID")) continue;
+  const base = d.className.split(":").pop();
+  const m = base.match(GRID_RE);
+  if (!m || allowed.utilities.includes(base)) continue;
+  if (!scaleOf(d.scope).includes(m[2])) blocking.push({ ...d, gate: "GRID" });
+}
+const byGate = {};
+const bySpec = {};
+for (const b of blocking) {
+  byGate[b.gate] = (byGate[b.gate] ?? 0) + 1;
+  (bySpec[b.file.replace(/^.*extract\/specs\//, "").replace(/\.html$/, "")] ??= []).push(b.className);
+}
+for (const [spec, cls] of Object.entries(bySpec).sort()) console.log(`  ${spec}: ${[...new Set(cls)].join(" ")}`);
+console.log(`ui8px: ${JSON.stringify(counts)}; blocking ${JSON.stringify(byGate)} = ${blocking.length} (ratchet ${max}); report ${report}`);
+if (blocking.length > max) { console.error(`ui8px: ${blocking.length} blocking hits, over the ratchet of ${max}`); process.exit(1); }
+if (blocking.length < max) console.log(`ui8px: below the ratchet; lower "max" in .ui8px/gate.json to ${blocking.length}`);
diff --git a/packages/tooling/bin/zones.mjs b/packages/tooling/bin/zones.mjs
new file mode 100755
index 0000000..ac5b866
--- /dev/null
+++ b/packages/tooling/bin/zones.mjs
@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+// Prints the zones catalog assembled from the "ui8kit" field of every workspace package.json.
+//   xgen-zones            print it
+//   xgen-zones --write    write rules/zones.json (xgen check, group rules, fails when the copy is stale)
+import fs from "node:fs";
+import path from "node:path";
+import { REPO } from "../src/app.mjs";
+import { ZONES_FILE, zonesText } from "../src/zones.mjs";
+
+const text = zonesText(REPO);
+if (process.argv.includes("--write")) { fs.writeFileSync(path.join(REPO, ZONES_FILE), text); console.log(`wrote ${ZONES_FILE}`); }
+else process.stdout.write(text);
diff --git a/packages/tooling/package.json b/packages/tooling/package.json
new file mode 100644
index 0000000..f799460
--- /dev/null
+++ b/packages/tooling/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@ui8kit/xgen-tooling",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Gates of the workspace as bins: rules 01, 02, 03 and 06 (xgen-rules, a delegate of the rules group of xgen check), the zones catalog (xgen-zones), pre-push audit (xgen-audit).",
+  "bin": {
+    "xgen-rules": "./bin/rules.mjs",
+    "xgen-audit": "./bin/audit.sh",
+    "xgen-zones": "./bin/zones.mjs"
+  },
+  "exports": {
+    "./app": "./src/app.mjs",
+    "./zones": "./src/zones.mjs",
+    "./package.json": "./package.json"
+  }
+}
diff --git a/packages/tooling/src/app.mjs b/packages/tooling/src/app.mjs
new file mode 100644
index 0000000..ac3734f
--- /dev/null
+++ b/packages/tooling/src/app.mjs
@@ -0,0 +1,28 @@
+// Shared by the check scripts of @ui8kit/xgen-tooling. A script runs with the working directory set to one workspace: an app (apps/<name>),
+// a package (packages/<name>) or the repository root itself (only the root scripts/ folder is checked there).
+//   APP      absolute path of the workspace being checked (process.cwd(), or APP_ROOT when set)
+//   REPO     absolute path of the repository root (the folder with the workspaces package.json)
+//   KIND     "apps", "packages" or "root"
+//   KIT_DIRS the kit zone of the workspace (relative to APP), read from the "ui8kit" field of its package.json (see src/zones.mjs):
+//            raw host markup is allowed there and the composition rules never scan it
+//   HOST_DIR the first kit dir (src/primitives in packages/<rt>/ui), null when the workspace declares none
+//   projectFile(name)   .project/<kind>/<name>/<file>: baselines and allow-lists per workspace live in the repo root, next to the shared .project material
+import fs from "node:fs";
+import path from "node:path";
+
+export const APP = path.resolve(process.env.APP_ROOT ?? process.cwd());
+export const REPO = (() => {
+  for (let d = APP; ; d = path.dirname(d)) {
+    try { if (JSON.parse(fs.readFileSync(path.join(d, "package.json"), "utf8")).workspaces) return d; } catch { /* no package.json here */ }
+    if (path.dirname(d) === d) throw new Error(`no workspace root above ${APP}`);
+  }
+})();
+const parts = path.relative(REPO, APP).split(path.sep);
+export const KIND = APP === REPO ? "root" : parts[0] === "packages" ? "packages" : parts[0] === "apps" ? "apps" : "xgen";
+// packages/svelte/ui -> svelte-ui
+export const APP_NAME = parts.slice(1).join("-") || parts[0];
+const zones = (() => { try { return JSON.parse(fs.readFileSync(path.join(APP, "package.json"), "utf8")).ui8kit ?? null; } catch { return null; } })();
+export const KIT_DIRS = zones?.kit ?? [];
+export const COMPOSITION_DIRS = zones?.composition ?? [];
+export const HOST_DIR = KIT_DIRS[0] ?? null;
+export const projectFile = (name) => path.join(REPO, ".project", KIND, KIND === "root" ? "" : APP_NAME, name);
diff --git a/packages/tooling/src/zones.mjs b/packages/tooling/src/zones.mjs
new file mode 100644
index 0000000..1fdac95
--- /dev/null
+++ b/packages/tooling/src/zones.mjs
@@ -0,0 +1,43 @@
+// Zones catalog: every workspace declares its own zones in the "ui8kit" field of its package.json.
+//   runtime      svelte | react | vue | solid | templ | twig | jinja2
+//   kit          primitives and utils: raw host markup is allowed, the composition rules never scan it
+//   composition  blocks, composite components, app screens: rules 01, 02, 03 and 06 apply
+//   blockRoot    the part of the composition whose files must open on Block (blocks and screens)
+//   generated    true when xgen writes the files: never hand-edit them, fix the spec or the generator
+// readZones(repo) assembles the catalog live; rules/zones.json is the committed copy (`bun packages/tooling/bin/zones.mjs --write`).
+import fs from "node:fs";
+import path from "node:path";
+
+/** workspace dirs of the root package.json, "dir/*" expanded */
+export function workspaces(repo) {
+  const root = JSON.parse(fs.readFileSync(path.join(repo, "package.json"), "utf8"));
+  return root.workspaces.flatMap((w) => {
+    if (!w.endsWith("/*")) return [w];
+    const base = w.slice(0, -2);
+    if (!fs.existsSync(path.join(repo, base))) return [];
+    return fs.readdirSync(path.join(repo, base), { withFileTypes: true }).filter((e) => e.isDirectory()).map((e) => `${base}/${e.name}`);
+  }).filter((d) => fs.existsSync(path.join(repo, d, "package.json"))).sort();
+}
+
+/** @returns {{ version: 1, packages: Array<{ name: string, dir: string, runtime: string, generated: boolean, kit: string[], composition: string[], blockRoot: string[] }> }} */
+export function readZones(repo) {
+  const packages = [];
+  for (const dir of workspaces(repo)) {
+    const pkg = JSON.parse(fs.readFileSync(path.join(repo, dir, "package.json"), "utf8"));
+    const z = pkg.ui8kit;
+    if (!z) continue;
+    packages.push({ name: pkg.name, dir, runtime: z.runtime, generated: z.generated === true, kit: z.kit ?? [], composition: z.composition ?? [], blockRoot: z.blockRoot ?? [] });
+  }
+  return { version: 1, packages };
+}
+
+export const zonesText = (repo) => JSON.stringify(readZones(repo), null, 2) + "\n";
+export const ZONES_FILE = "rules/zones.json";
+
+/** zone of a path relative to the package dir: "kit" | "composition" | null */
+export function zoneOf(pkg, rel) {
+  const under = (p) => rel === p || rel.startsWith(`${p}/`);
+  if (pkg.kit.some(under)) return "kit";
+  if (pkg.composition.some(under)) return "composition";
+  return null;
+}
diff --git a/packages/twig/ui/.gitignore b/packages/twig/ui/.gitignore
new file mode 100644
index 0000000..d6a2b91
--- /dev/null
+++ b/packages/twig/ui/.gitignore
@@ -0,0 +1,4 @@
+# Code generated by xgen. DO NOT EDIT.
+# composer install output: rebuilt by bun run check
+vendor/
+composer.lock
diff --git a/packages/twig/ui/.xgen-manifest.json b/packages/twig/ui/.xgen-manifest.json
new file mode 100644
index 0000000..4d89fda
--- /dev/null
+++ b/packages/twig/ui/.xgen-manifest.json
@@ -0,0 +1,374 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "packages/twig/ui",
+  "files": {
+    ".gitignore": "73f3140271ab2bba951044ead08ae4e9a53fb1f56eb8c3d8c342c9f5f56f13b9",
+    "bin/parity.php": "37c8ad10f539406b8bfbf481b9e300eadbcd76ef8571b538e084a1e47dddb580",
+    "blocks/about-company.html.twig": "90b7dfb2f2a3b5e47e4eaaf159dac7826a895391dac0447b4b62c367c4b20eab",
+    "blocks/about-me.html.twig": "faf9bef4dcee715f5d5fa34fdca2ea98bee1c60591b16e01d83edb1f6f7a2e44",
+    "blocks/action-group.html.twig": "d2d44ad09fe03ba243089a33f8c40aa20f425b8ca0a643767d5a3949437dec3b",
+    "blocks/activity-feed.html.twig": "a68a1abb0026e30088006d5a0e018a0ef85894246e8582eee588f714d90e3bf9",
+    "blocks/announcement-bar.html.twig": "62b85cae794497f946ed6b23895e7fbff1515207ec4d37056cc15ce561785cdc",
+    "blocks/app-main.html.twig": "5709c0e1f8f15761a5abf7ef5ae178a640287a3c12f2a7ab287aa2d004a2b490",
+    "blocks/app-shell.html.twig": "a227d32691bdc41239a429d305e22ac0a639137c0f44b0498486fa431ace0b96",
+    "blocks/article-block.html.twig": "e0beeedd32f14a5e5afc721e0b37c605dd23041a2cc34018c1cb4be51c79b006",
+    "blocks/article-body.html.twig": "4a011a517477b33cc445e154d5e957686abd0c11c59d99645f838c06119660af",
+    "blocks/auth-card.html.twig": "b9338c238658a64dfedfdd0ffe40b167eed9d67153c576b741a53e897e9f4074",
+    "blocks/auth-form.html.twig": "2a9756d60361e0c6f4dcb30e7887e076903035d1794000ce1dc18861ecce31bf",
+    "blocks/auth-layout.html.twig": "d69d2d348f392c69c65d746c6083eb04bc7d04902d713ff5fd65235eb43e235e",
+    "blocks/avatar.html.twig": "dd4b0fe78ffbb6e2b6ff30d445148bc884ae6682a34407da9780d8a77f4d35fa",
+    "blocks/backdrop.html.twig": "7abca4ed53cffbd33975c8e5cf88efc3e6c33bcd003906ef5f3498db8d6c7dc2",
+    "blocks/badge-square.html.twig": "5f7eb23adf76da596b7849b1b3f935883a3c8451b6d4651f933f07b1d483c879",
+    "blocks/bar-chart.html.twig": "55380f4d5ba74681d58d80c6b81e4ca4c965581c727d8ebf48b1c786c54d841f",
+    "blocks/before-after.html.twig": "ffa3b242fbd7781799aee8dad511f11e7cc5ba25d7b6cd75dda7c615917340f4",
+    "blocks/bento-grid.html.twig": "6a1512cfa3e0c9a04f3ff28158a6f737d06d8cd1a3d8a0ffd7d428d064ef75cb",
+    "blocks/bottom-nav.html.twig": "6fa978c51c860ceb95855931c52cf0722ec00d52704e0563d243d6381ea95b3a",
+    "blocks/bulk-bar.html.twig": "fa3533e8da0badf38260bd9c57a0ea8a54253a6991b9ddac65c57ab23deb62b1",
+    "blocks/cart-drawer.html.twig": "72e3e9405a178d5e8a94ac73e575eb453df096715b3896713ea590ea9d174c72",
+    "blocks/cart-list.html.twig": "5fc800b0ad6f1ebbd9482e8c1e77a0acdbae15c22ad936aa1da50e3dea5c7e82",
+    "blocks/cart-summary-card.html.twig": "6074c1c48e79c2bde65c5088a8d70c1f93a1c0359799af0803204149a838204f",
+    "blocks/cart-table.html.twig": "3c447e8d964a5fb44934a094a03f9296cb55d0ca62c66f95fc47132ba5e732bd",
+    "blocks/category-nav.html.twig": "a322fe6d99322ac1466a4e0e2c459da58b25169f8d54756510b487bb3e670672",
+    "blocks/chart-panel.html.twig": "3ef90240675fc96b85eae6c46ddc1f0bf694a70d8594006816cfe9e29ebc5075",
+    "blocks/checklist.html.twig": "e5f9af6530beff76be6ed72c1cfea1fdf837b0767eec1facc7d36c0a7b0e6f23",
+    "blocks/checkout-form.html.twig": "8932405f43aa2c016d0bd79cbcdcf4c78e1ad8ace78a999d3edccf088684db53",
+    "blocks/checkout-step.html.twig": "0e0b449f844972076b66bd0ae7e3a0a48402bb15ab8c0e93a6d268410394175b",
+    "blocks/checkout-submit.html.twig": "1902f4529b1951d54fdaf0f7076b4dd8d4ef86882a5fea90b1a892534c8ca253",
+    "blocks/code-window.html.twig": "3eaa80d1777da17688b2141b2f48a3bd3941c84837fe46a0fb8af417eedc314a",
+    "blocks/compare-mark.html.twig": "d9244735242ad787ae941ff8202758b99acff51785ee538d8e92e5f9bc041b4c",
+    "blocks/comparison-table.html.twig": "5a6941a6155e7047bb8a473c9b4b033c42cf51a8e089be1a971a409c53fd8889",
+    "blocks/contact-form.html.twig": "0edf9ffec6eb82155946def34804225368f85bd9c12e2b109a2d9125c73c9256",
+    "blocks/cookie-banner.html.twig": "f067a13d6c683165ee288a413c0587d66eecd024ce450f6096510c4d311d51c2",
+    "blocks/credit-packs.html.twig": "162059cce1f08ac768f0a632d5db902f19c6c47bd33129296bec9a290b95ef95",
+    "blocks/cta-actions.html.twig": "b92edf1fcfe9a4dcaa6f8721a75e170453bf5f6edc87fb69c5ecd21a9e51f7b7",
+    "blocks/cta-band.html.twig": "e2b3e8d05114f99a047e9981cd89f8d080df7e7b8b1f559546f90ca707a38767",
+    "blocks/cta-banner.html.twig": "1df76266ccf47807c7c2139c5284e8029059629bffaff7e930b421977a376582",
+    "blocks/cta-proof-items.html.twig": "e4fc754d1eb7b5101bbd2e26b84d1d49833d9ec56452c973beae3f75d8250b4c",
+    "blocks/cta-proof.html.twig": "6e656d575415af37579abc3ac81aa0efee76508d19263cc3347e5fbaadab35fb",
+    "blocks/dashboard-overview.html.twig": "ef8dcd70cda99b6679ab67ce8a58c34b9ffe8f84a38561d0b1ebe23bf3917337",
+    "blocks/dashboard-shell.html.twig": "ae8b9918a0081a7b0beeb49ac4381577f13b3f9f17c3125bd6b3e8aec62fa6fb",
+    "blocks/delivery-info.html.twig": "856019c77e6b88cc46b4768a2d7560ddb2955643e5480da19e28abad66ec7b28",
+    "blocks/drawer-lines.html.twig": "29b265e6b6a960317e7c450b6727e3bfeb63abcfb576c07d42ad46a376fcb747",
+    "blocks/dropdown-item.html.twig": "d3a2851e2dc054087ff1c3ff701b547c6d498ad959b10e8800618ea30e5fd88b",
+    "blocks/editor-tab.html.twig": "621e25eca1f873dfb2ae0a94f5d4f6d72af8f83159e2a9be5ec55a44961634e5",
+    "blocks/empty-panel.html.twig": "f33bbf345d2d8b1f3006cfb154702c788113d9e2ef01a3b844694a156a05a5ab",
+    "blocks/empty-state.html.twig": "ceb6cf67a00cea7f5d8d938fc29beee05fd73203a36750f311fa09b479af6271",
+    "blocks/error-page.html.twig": "c717a5abe11ae76cb07e14e200f7e76d87a58984bfb643bdd0497ffb5702c5bb",
+    "blocks/faq-cards.html.twig": "30c9a7372158640e0a764682daab111db086bb263e024830eae276faf7c214d3",
+    "blocks/faq-disclosures.html.twig": "147cd166da1a22eb4e28f2d9a4f9f087a21f25b79dc794ca6fc133e1d9d9793e",
+    "blocks/faq-finder.html.twig": "10c8aeb450a3b7b60f5771c69139d09e544c4ebf8289aafbef8d0964a92663fc",
+    "blocks/faq-help.html.twig": "3bf373fb4c597b3a42006ee6b0036b2ea3c6d9254f5ef18f9e6ecf0d90ae31c6",
+    "blocks/faq-list.html.twig": "c594cae16e0b3c399f9dcbc6c8c525c537d433f7af68dc00cba24fcccb5b3072",
+    "blocks/faq-split.html.twig": "c9f3615e04586701574ccc9fe504c04ce41aba15ea4acbed67050ad6859afd52",
+    "blocks/feature-accordion.html.twig": "ff83b6fdca106efcc10b696afb65af845de05443485aa148b606cdb3ffbfe939",
+    "blocks/feature-cards.html.twig": "72528b1712016af257706d71a5467ad38920b44193fe96fcc287f1e89bbddba1",
+    "blocks/feature-grid.html.twig": "3681bdff5862de2bacbcc26bbb652db5d4b606de95812ffb14ae2801d271116b",
+    "blocks/feature-metric-cards.html.twig": "1673e13a5cdeec05959be361c6af072b290bcbc5964021eb488c2be0c9800990",
+    "blocks/feature-pairs.html.twig": "ed37fe33d100e2a272316ce9235f83185d8cbd2011b5f5e1cf99b8095f94c63c",
+    "blocks/feature-rows.html.twig": "fce341e16a6041c32829c55f69bbc57df471be0bcb58e8a71f109fe6f8d4b164",
+    "blocks/feature-showcase.html.twig": "fa96797d19f13f02c6fa3a6b9ce66d86ff3f72b4afc15dfd2081b66883514cfe",
+    "blocks/feature-split.html.twig": "7ccc38234c7ff4700b54d713e1d7a930e9361447a86da835f2de54a4a88e1559",
+    "blocks/feature-stat-rows.html.twig": "dd2808fa8dfcd7944a085bc571b7befeeee71482adaa9f50b2b1e72e0111279e",
+    "blocks/feature-sticky.html.twig": "7b6a27764bde61bf6192c124e482d373a019635ea1c7fcc65a4be6f2f4ed4d38",
+    "blocks/feature-tabs.html.twig": "66c72a11ff4c335e9a7b943d0eb9b9a0a1b20d82ad9bd5c0281d69bbda94a38a",
+    "blocks/field.html.twig": "554efac73ac5477e14930b56b41271470bb5f3250c3cd257ac3272e825a73e52",
+    "blocks/figure-block.html.twig": "5f8515a809646c93b4f98b75f59c993b3a4461c93d28c859afbe92596d7139e8",
+    "blocks/file-tree-item.html.twig": "c8ecf22ccf723b818d869b8c68ffdca8c365bc0b1adbc8fb7f2c4532d421538f",
+    "blocks/file-tree.html.twig": "ab04e781d8d92336585310bf436a5c3279b5173dc1f0ca54c3b12c24a23c38ec",
+    "blocks/footer-brand.html.twig": "e2ffe1eb0eee1164b4e4229310594cd07912e59fd2cfdca1f77e1d00ec9a49ef",
+    "blocks/footer-card.html.twig": "fd56aa94ed1698e6af484da39d56b2fefe0b2bdd354bc76cf2ac32cd5d923b8d",
+    "blocks/footer-channels.html.twig": "deaea8ec5adee113765cc4556c4b8afd025160890a5d51edfbcc46ae727b79b5",
+    "blocks/footer-columns.html.twig": "fb256cb65cbe2a68b7ab38c6cb75698f0ef0630963d56e065fe1097d59d3a1e1",
+    "blocks/footer-contacts.html.twig": "9ac8c9717626854a9e5306660f6edd4df7bf69f68fb675f4cb3d700fcafd8eda",
+    "blocks/footer-figures.html.twig": "75428b1fb8e059d52851201dcc1f543656090ec2d2c9a93c2c70347bba2e6e0a",
+    "blocks/footer-group-cards.html.twig": "e78d943bbc5e60418d12572e496a684dfb0f825cf37475e3bea9a3969fc1d4e5",
+    "blocks/footer-link-columns.html.twig": "61013004a9e81182dee0e48001ef243dfe145f43db4c3fe1a0ce812c8feee069",
+    "blocks/footer-points.html.twig": "2ba93f7ca989f23c190c450767d0fe812d042fc2cb3d5595ec5bb9e60e97bd3e",
+    "blocks/footer-signup-card.html.twig": "863b5886defaad486322292aa473ecc221c7fd8284c4201bdc6ef9b1beab7165",
+    "blocks/footer-sitemap.html.twig": "1801d17e3f33377216200d10d4685818dbc14f5e4a0b8ed608e5fcfcbf5805a1",
+    "blocks/footer-split.html.twig": "7feb67e0285fb6ad2a9ca66d17b4fdafbe6376d532e67b58386cb0619ed62fbd",
+    "blocks/hero-badge.html.twig": "bbd49b3e503bff4d1f40d308aa6a5ba4216445a41a35d0e544e9609ca8a6ab01",
+    "blocks/hero-classic.html.twig": "777e7a638c5eaa9b279e2df365759fcbfc4ff682c362e47398099f3d9b6f4cf8",
+    "blocks/hero-head.html.twig": "03b9fa77303db448d41f14e4ba8b72cc30b8b70239d0a9138ec3689ab50fc0f1",
+    "blocks/hero-prompt.html.twig": "c8eb795398c891ffff4ccc6bc184137367743a909a97a3e541edf540aa756660",
+    "blocks/hero-split-extras.html.twig": "40897060cc6570eb8fcbb09ade2614c7f0ab9623a8514534710f7375cc808ef0",
+    "blocks/hero-split-media.html.twig": "c48960dfb5c9d8d9f03ecb70eaa860a218682952b59b7d61a57b0a78d925c1ef",
+    "blocks/hero-split.html.twig": "1f769d58a0c0d5862e2032836e0dd5b053ecd8725610638369831fee18750323",
+    "blocks/icon-tab.html.twig": "eb2856a30c61014b6f7401673176c0378212634ba5ce1e681e90e3313db19de0",
+    "blocks/icon-tabs.html.twig": "b529b9d9ad8291cdab650797fd865ebddede4b87f295421f107fc88d6009444a",
+    "blocks/icon-wall.html.twig": "e56118920cd7e92a7d71eef4e47ed8785122961c1e41092af95ed2e742640c60",
+    "blocks/job-board.html.twig": "650898f7da54118dab908d0d2ad4a8716a087b43e5fc5c6574ef9f62c240c693",
+    "blocks/job-cards.html.twig": "df5a0e1247597e45ee2ac33d0cf3131360dd8656e1b2d8c09e093ed59694b264",
+    "blocks/kanban-board.html.twig": "a44a26c92cc3c1a134704d0f163b926929d2d1625e7c10a869a50e2d3666379f",
+    "blocks/logo-cloud.html.twig": "294c7b671e94e90b103d24afea9f9ecbe3fd3d573d46d3b59258c77d1657f06a",
+    "blocks/logo-ribbon.html.twig": "82b68163b126809c8284fb93423c56eccd8bd06692f63176c4d5207b5d50f813",
+    "blocks/logo-sidebar.html.twig": "0f092dec1d8546e26a706b6c532ae4b8fbfc75242c1bf0e0df15636bffa0e883",
+    "blocks/logo-slot.html.twig": "74acb3b91d54c22c5a1456269acf7381965774ee0b67c57215c3dbaffdc4a1e1",
+    "blocks/media-contacts.html.twig": "660e686cb492cbc01ca8a318afc87b9e666659456bea826b197970b0f0aa2647",
+    "blocks/media-figures.html.twig": "0f134d7c3b824e92d61493f4d4a6c3cfec7aef232d2bd21555f75601bcd3240b",
+    "blocks/media-frame.html.twig": "22e09aae88d728fffcc61194b7ea25e4d5d9cf4a3268effb92004ffe1351ec5c",
+    "blocks/media-list.html.twig": "4b7c9bfdf384297bda13a4221abf200b365a103f91eacd9bdb649d2f32ec52b1",
+    "blocks/media-posts.html.twig": "763cb84787ad7d225d57bd94e244b651015544f93b55c68e838b0e3ffd4a2ba8",
+    "blocks/media-review.html.twig": "b40424dafa69745483cf61a280f22a902b6c95e005661b9a726f98de90dfec69",
+    "blocks/media-steps.html.twig": "687ecdb2e599e1704f9383fa25368cf19b4de6451ebd5e6341c72d067ced83da",
+    "blocks/media-topics.html.twig": "d0050cc88847f8b0faf94040f1082426e8522c4a032b61a87d37a0a5e9b3e9e3",
+    "blocks/mega-menu.html.twig": "cbd1becdec9b080e2fece594eac7c42c7846b89e196839d1c085b53fe8e86013",
+    "blocks/member-row.html.twig": "b3532fe496ab8037df7e46164bff87b23d027a648e00cdface6be72299e145a1",
+    "blocks/menu-entry.html.twig": "812c176013aa4e824d57149e37d030aa2aa1d8c101380d477c008bdf222fbbfb",
+    "blocks/meter-row.html.twig": "b1710f23d5e1bbcee129503898c3b0bf29deec726d3f0460d6420d279c13d339",
+    "blocks/metric-row.html.twig": "992bfa5d51d93e7dbd396ee9bd3f398644746c08356b35dd000e8f8683a30c0e",
+    "blocks/milestone-timeline.html.twig": "cee0e656e860b72d8dec002a7e2daed64b94344917c66830284aa8fd1a264e1d",
+    "blocks/nav-actions.html.twig": "500f2688969947d108287e1f06d4ddee35c4255916fb44b80e47d1fe8e1a694f",
+    "blocks/nav-bar-menu.html.twig": "7ae9e10e15dfc1d66cce9e43b25829ad28d5fb2adc42271b0bbedc4bbe033367",
+    "blocks/nav-bar.html.twig": "0bfe23dff0e4890241caeae1702c5544c37ceb3d27073840691bc16d982a6ff8",
+    "blocks/nav-block.html.twig": "b36b8500479bb9436d8c550058a5ae6c08eb1cdc477fe931966d35a0430715a9",
+    "blocks/nav-item-row.html.twig": "42a57e22dac3a6cffe04977059f8a48214ca73f243798bb7e8e540cba1e0684b",
+    "blocks/nav-item.html.twig": "a048ea0187d0c86f4071d76b62ee70876e95c952f8b28d71fc3278711c6ce445",
+    "blocks/nav-links.html.twig": "09c0b682e729ec31f71357e959c10160fbca565827578c9fcc22067b02798eed",
+    "blocks/newsletter-form.html.twig": "7f5866616552e807a2b52b5c925fb9fcc99644c4dc5c0bee9316a284533340ec",
+    "blocks/notice.html.twig": "86ed0cb9e0c8de6c53f6f580ee8172fa88561335733781296a28c1d5b9a0af39",
+    "blocks/number-field.html.twig": "f88531ba9042ff57e6e8a81bebb3355d2191d54529331fbd065e03f59009afb5",
+    "blocks/offer-media.html.twig": "87c37bc4584a27df9f19565aa3344d2a0d9e14d9e741febd2188c63219374ec1",
+    "blocks/order-rows.html.twig": "b9de7377bb0fe473f643e95235d666bd4d62b7193467f5057ab41e609b6687ae",
+    "blocks/order-summary.html.twig": "e8a59ce6830913a051149e98417c86a2cf134334a4ba4566e8dbc6bdd07c47d3",
+    "blocks/order-table.html.twig": "0b00aee40d204a01a7d7a6763cac99c0155a4c2c1727f6b26b093ebfd97d1f5e",
+    "blocks/over-media.html.twig": "66bc24b2a8537e2b85688ae4c73ea229f908f805e791b89240ab9964bc60e486",
+    "blocks/page-aside.html.twig": "a13ab714242cf10c18115d611c665a8c4be20e9817f8e935710cac1dd73b8080",
+    "blocks/page-crumbs.html.twig": "4a5c980e6f94fc243a86e01d2873d70cf81c275dededf92b308609ad4211914e",
+    "blocks/page-header.html.twig": "70af0647a7bcad519862cc279084f216bc8b438406d14f97fe4bbb95ff8e9f90",
+    "blocks/page-intro.html.twig": "b9f68d51e689e9f6a95009fd607d93b5848e6edcb404672291f76189f04714f7",
+    "blocks/page-trail.html.twig": "0243a5963f31dec073029daeaa0eb634acef47df6c51c5cfac5900f6535f6249",
+    "blocks/pager.html.twig": "2f2df7a257db5c92b4a6f142a6c6bcca7ec4541780ed2e4d3ecdf012004f73d2",
+    "blocks/panel.html.twig": "0e66cb32d36866fc0aa53e9474e60619a330878715aa5f33525091c2dc2880bd",
+    "blocks/payment-options.html.twig": "1c64cfc17c04b9be017d40a9e03edce51df309bbdd35f2552b251ce3cd34988d",
+    "blocks/photo-gallery.html.twig": "ae7d46816b79ec696dce45471bc4e2581ca517493fc60f1d9da35a6569c6fcdd",
+    "blocks/pill.html.twig": "185a4a95ad49e6e6830190b0dcd175ece0b0b9c2cc6a9ae6ddfe451145499d27",
+    "blocks/post-actions.html.twig": "3c253b5a17a0d0287c68eeaffb9d1858c2ec584209e1ddf8c5933132603f7d38",
+    "blocks/post-author.html.twig": "e1639bcae0065252162143c3ec58e9abb9df035bab0dbd57b61c33abeca9e168",
+    "blocks/post-card.html.twig": "ca5585649fd4aa51928bafd8ff62d19379290f45a4fd52a19cf12f27b42c50c2",
+    "blocks/post-feature.html.twig": "f52a7637d66340b706b9d92a420d823455ee6f91a5506ee75a52f0e15bca8024",
+    "blocks/post-grid.html.twig": "377c89578915ea6b0bc936edc1c63bb25370416651f36b758677636c3f63aab5",
+    "blocks/post-header.html.twig": "1f384accf46629af828b8f8f0f5bd2391f5a90b16bc1408c3cb15bf4869670ff",
+    "blocks/post-mini-card.html.twig": "4b500865c24ea4d6581933bb00f6a3f5db34277a46f34792f44924d6f626cadf",
+    "blocks/post-outline.html.twig": "84fb41d41067f934e2257592473eb3a988a841787af9da1b376824551542ec25",
+    "blocks/post-overlay-card.html.twig": "d5d97db086f61c6268bb40575cd106edd8c8fb9d840906f3688df3d7772a20f2",
+    "blocks/post-showcase.html.twig": "ebe8edcc321d6dd2804336ed78a137e2f7300aa4423f006e3509a3f4a55f88ea",
+    "blocks/post-split.html.twig": "b9a28bda9c13c71677cccf1597ec6d3081791e8f4b156dab3f937c8df7e838b0",
+    "blocks/post-stats.html.twig": "0e93d769e2901228748409211ecea54e2017d72a42ae924f77f9cfa7b8a1dfde",
+    "blocks/post-tags.html.twig": "ed3898e2dca2f6a476fafdae52164eb45b36f550815d1450ce17bcd978f7578e",
+    "blocks/presets/defaults.json": "b95b6b8c5025af8dfbe44aef409b13c0dadf5bf41d854abb21a112e595b29ae3",
+    "blocks/pricing-card.html.twig": "47db541b00c877f233442b72405e5c75dc93385950f69bc9e8c735fc02e292d9",
+    "blocks/pricing-tiers.html.twig": "71113b524df7c84ee03a8ec3cd774aa75f8720a244bab25bde34695f3b6f1879",
+    "blocks/product-card.html.twig": "ae868ca3c750985f0de29e52c08da7530a31aeeac7a232f1b82e6817be96b55b",
+    "blocks/product-detail.html.twig": "e371a05ce77fd3f34c0372a0c10420cb37b426c60c49e8208f7be8eef7a64e75",
+    "blocks/product-gallery.html.twig": "cd882958abdb99b9d0a1e2a85854647af2223eb249a40114155fe6ab694cf4a5",
+    "blocks/product-grid.html.twig": "2316bcb85908501c9cb309f8e21f2eb4cd6e2d399d5682d107b952194b467b3c",
+    "blocks/product-info.html.twig": "565c2672092fd9cd014bf79ab1b6d24f5f0a8c46d72bd3749fddd56a21f2a52c",
+    "blocks/product-price.html.twig": "b73529602547fb22a9b04a4967504887704467008b3c3be9bcbe1bb2b882b9de",
+    "blocks/profile-form.html.twig": "4a033ea6bd039a6fa1a39f21f4046698b7b58580772473318d1c7d22b4cabfac",
+    "blocks/project-grid.html.twig": "627de47f055bcc0f2bf6a05169a98578974557ed371a286f565dbbb31ed8795e",
+    "blocks/project-tiles.html.twig": "770994bc659febba1e5e734f59b17514f43554937b519caa57fb296fe9abe256",
+    "blocks/prompt-composer.html.twig": "8784b817c6cad388ea8ad14a3d0042748429a972dd7c1c4e798bb22f097adfbd",
+    "blocks/proof-band.html.twig": "5e902c3c5d25423b51adb0a2097f2fe07b21c17645037a20eabd4b22214bc5e1",
+    "blocks/quote-card.html.twig": "a44dceed52b96718eb97cbbcf0fa3066249c6abd0d16f71a0d914a14a64655b6",
+    "blocks/quote-figures.html.twig": "243fdf6d550c771adcc84626d4608e3b911cf4e66717c6f45b49bc567ce8f8bc",
+    "blocks/quote-logo-tiles.html.twig": "426ee74cfabd7b25e8a1db364c2446a9f8fd6c53274e6490496c327c0209d726",
+    "blocks/quote-proof.html.twig": "efe2a28dd4ebd7d598e89d662404018b091f92897b2c7e3a42f1ffc971975395",
+    "blocks/quote-rating-panel.html.twig": "cfa1f144fa48d686f9187239f7c2d83dab0d94b7051aeb65f0b2bacb05a7864c",
+    "blocks/quote-slot.html.twig": "f5d542e15b2c735564b50fcf8c1b2c7736cee7c495fff23fab60441c98895155",
+    "blocks/quote-split.html.twig": "e42d14bb6e64f5d7caab951bacd817a6e988999bfc87567a4009ade95b1c9a8e",
+    "blocks/range-field.html.twig": "da9ee255baa5916623e4a82dac583d78d3be56cc6d6bb08a05bab6b02c94172e",
+    "blocks/rating.html.twig": "ed801755655cbbad1ae84ca02f8ed15f38c7c63ea4c7ce2dd0b12c897d004960",
+    "blocks/recipes/avatar.variants.json": "46ea20a1e9e713020f165ad7cac44a8c3ece47acaf2754530ad23f23a6e0b172",
+    "blocks/recipes/badge-square.variants.json": "5e8e73320e350988fab7de311cd65d662a8ddcf63e97ce88872e66ee813587c1",
+    "blocks/recipes/file-tree-item.variants.json": "debc1471dbb13602b05a323fedda8503ec955c815f3d22d57804dba279d72d91",
+    "blocks/recipes/icon-tab.variants.json": "2e50f9390011c0e6ee576c63c5ed2e8ac6673610928282fb250a12fb5c7ad6e0",
+    "blocks/recipes/logo-sidebar.variants.json": "79db82787954766904c176eb1af84184e74a5ac7816ed924711fb556714fd76c",
+    "blocks/recipes/media-frame.variants.json": "acffd976f9f24993ca00e9806900c0328b77bdb3211fe9368bd93022bc62f89b",
+    "blocks/recipes/nav-item-content.variants.json": "243a020eb53ab7878c02f896f0283d7e04d197e2a7f419a6b32d11269b0528e4",
+    "blocks/recipes/nav-item.variants.json": "5617402602686362fc2dab73bad603fa51fa1d5971b6833a3d32e018bbc66297",
+    "blocks/recipes/section-column.variants.json": "f06d6cedaf76d8cea8a4fcbf62d62dfd51250570184c3b355b83d2e49cf84396",
+    "blocks/recipes/section-frame.variants.json": "ef2d97d45afd1107c441702b657e77c0c1661c1ba76b0215eecc9169529d4a05",
+    "blocks/recipes/section-head.variants.json": "f2624d5c33466e23046036a99c05831ea84011647632d3a901ca19914778d84e",
+    "blocks/recipes/sidebar-panel.variants.json": "319a47e1524ffbb564189f483b546ff7c22c143b133a4e406bd73a5f61b05321",
+    "blocks/recipes/switcher-item.variants.json": "0c2e75f5db33ecb6774d83709ac938adc20946f45748a3e7e9d1009ea0169bca",
+    "blocks/recipes/switcher.variants.json": "6e59af0edcfdf3d5754b7c7991ac9c6e84713db161dd21022bd308859cbb708a",
+    "blocks/region.html.twig": "5c0c70b49d86585024107d9b612988f091cc9df3f127dd5d614441be6925a9b1",
+    "blocks/review-list.html.twig": "72a6a09f0f2d68ca65f9f40bb5b73a7fa700f4b062462c5029ef5bfabdf2f637",
+    "blocks/search-field.html.twig": "5e6eb993b55a6fc8f67e2698722e589e3f30bb24a6e53523ee6eee7f256972fd",
+    "blocks/search-palette.html.twig": "93165014433acf5ba7998d54dd8bb2f83e867621f017fd77acf170bf541874eb",
+    "blocks/section-box.html.twig": "edac0d35d2c3d33a96e1b3d5d5c549054eaa6e56f4c72276b9965051cf0fb276",
+    "blocks/section-column.html.twig": "96bb08ca243563a30be635cd1f1d6ba8d4f71dacaf34fea27628048b0a3ffbce",
+    "blocks/section-frame.html.twig": "0e12cb4eb043100fbe77f2fdbf7e62bcc9790bf06c199900ff2ca6e55d1bc1e3",
+    "blocks/section-head.html.twig": "b2ac1a3a2b5cc78a99dacda83e7654c99cde1e6c22c638313ad9af77adbef926",
+    "blocks/section-header.html.twig": "5ffa0ce6298bc38cc52f7a0e621e9e3117741721475510841cc42d9be3d946e3",
+    "blocks/shell-content.html.twig": "aa0daa17d33cf101988e441670dd9ac24c35bc0399ec6050880a1803fbddc564",
+    "blocks/shell-footer.html.twig": "0c507fa55c1d467066092ab824e37709520889e0d373a122947a7537a77b58f8",
+    "blocks/shell-sidebar.html.twig": "f2cdc7663ec2e4dcaee07db6f4d30c263c049644468bf3950e9eeb1b0d9b33ce",
+    "blocks/shell-topbar.html.twig": "8bc065aeb220fcb400aa7c034add7c1a76c42e8d54c666a4d815d325625f83ac",
+    "blocks/shopping-cart.html.twig": "8369d106bcd8a7250d1df04f92136acea7681e4ded41ed19dec16b3eeec3cbbc",
+    "blocks/sidebar-nav.html.twig": "c8b593e692833ec5bcb05fad054bdd5b1ce742f8a6ba44d844f87e0b54d258eb",
+    "blocks/sidebar-panel.html.twig": "f313b8e9828c6ff3db931f84f94d3a82d60edcd28e4a16af787b702d124cf6f2",
+    "blocks/signup-wizard.html.twig": "94c617f12a08736db3b4810ee8d01bf96d1a290a921e351fb156545578edec82",
+    "blocks/site-footer.html.twig": "78b802af2c3cc3100c2cc592b9374930c8b2a3581bc5805e37a8eb969a468ec7",
+    "blocks/site-header.html.twig": "61cb7a8846c79daf8137d626187eb855f1bce86c589e4cb9db653db6f59edd00",
+    "blocks/sitemap-footer.html.twig": "6e98360c11824ea26ae7e25677040eb7c35e42e3e6d7685f7a3de44d782fde5c",
+    "blocks/skeleton-layout.html.twig": "04d51b2f61f16641af056f00e350bbd60b19764259dbea30d514ac8655bd4caf",
+    "blocks/slot-board.html.twig": "242a1616a16e54e6195d40be54f245ab7492a270185173687bac314835bcceb6",
+    "blocks/slot-grid.html.twig": "bc00a69a5f408e14dd04f092cb6ecea7954de9bf67145278cf3c81206b350940",
+    "blocks/stat-figure.html.twig": "49808c8d33e62098854862af5606bf1e9f245d776ea284ffba791a97483712e2",
+    "blocks/stat-tile.html.twig": "c57eb0b89a62f8a345312a53e064bab74915e11949f4643f971b27a2b1d33926",
+    "blocks/stats-band.html.twig": "aaca31c3a66d3a0cec97cf3e4ee6f3ff921bd2fbc2f9031abc7b1c230129b375",
+    "blocks/stepper.html.twig": "144ea0127fe0851f479fe6a8260a2694f95d1b9c2edcb7312cb6d4a7e4dca527",
+    "blocks/steps-list.html.twig": "08a00232f3d6cb54c633e80a237efb09813404ddc024990c8585958b1bf043cf",
+    "blocks/store-hero.html.twig": "0a34e362aca8648b6bf6131cb79f3ce0bf5cc867a700aa704f804853c0a5f61c",
+    "blocks/store-locations.html.twig": "e90de6f687a0eaaa677ab0c66af4251fdfd52cece86d0938771cdaf4594cfa05",
+    "blocks/story-dots.html.twig": "d35a40ee449089d6e39e25bc980d3eee8916fd919669cb1594f0f033943d203c",
+    "blocks/story-panel.html.twig": "1f16c19f0ba8b076839bf6e69c53a164fecc1a1e9bcfe66d6a9e261e570ed7b5",
+    "blocks/story-tabs.html.twig": "ab4c8d0137ef576069c297945af04c4a8a29728438f89a2bea63a2a8335bbe18",
+    "blocks/support-channels.html.twig": "4d1d61155ef631ac20b519e9f1151bad2df052a7ad76da7ec7af6458f8c6f48f",
+    "blocks/switcher-item.html.twig": "dfdb121b3acc5eaa82c7fec6c8177b1b4d5d49ae5a226c5c8fd491ce370ea98d",
+    "blocks/switcher.html.twig": "9a750510ccde13477846f4e7d4c2d46027f99f9da38f22b332f7f5d3a6da3644",
+    "blocks/table-toolbar.html.twig": "39d1950d08df89b02d89e56846a8a3e6da1455530f65a7d9bad70eb367610f2c",
+    "blocks/team-grid.html.twig": "0c0fdf444b5377e1ea8436ea6ca006cc83cc457503abc4cdfd83bc58a472c1df",
+    "blocks/template-grid.html.twig": "37163955f2abdb0b6144c6c1d84e15e435d81aecfcdc66560ec159d889426784",
+    "blocks/testimonial-grid.html.twig": "5b09cc6b5f7030ffa92fa078fa4cb5a82689472bb81590112e0f42fb8f9dd659",
+    "blocks/timeline.html.twig": "19d490c51e7dc9c42ecb82f24ec0306b8eca71d6f9c03cd9e58e347675249e21",
+    "blocks/topic-chips.html.twig": "263d72e0589d9e62fe4701f9db7ccc9fc30bc60dfd3d8942dd2ef17a58764764",
+    "blocks/tour-callout.html.twig": "f17962d2f1e392bc7e4ac332dc79eb6245c43cf133e817b154e8e60839091af4",
+    "blocks/usage-calculator.html.twig": "617ca62689c8783f3ddc4f699d28c7958fc5cfe530a043e570e71fd91e6ceb19",
+    "blocks/usp-strip.html.twig": "b016261c5ce54a3c17188b9a43251d607665ddb528bb1bdf271b250571b35359",
+    "blocks/video-grid.html.twig": "c224ddd66b061d791c0f1d6b9976e6af61b577319d9084d05d4c273454775e6c",
+    "blocks/video-modal.html.twig": "161a616b75b7103d876fb1fa5990d9fdd60c3403db82ef2736abb35c3da3f146",
+    "blocks/weighted-title.html.twig": "0e507efc81bd33a6b097389f7c2a2532f0971535c4601243caedda40c19a56d7",
+    "blocks/zone-rows.html.twig": "e90c8bcb9a838cb93490c35e99494823bd8b6f8533ee41b30cc0aab306eea50d",
+    "blocks/zone-table.html.twig": "61e0e405c499ed7675a15271f67a2590361e1e7b6116d2d9922e26d02be7caa6",
+    "composer.json": "9681d3c7e46e00641b9d7f2fb1e31fe7084d04e4756ac5e45ea947f3d4bd66f2",
+    "package.json": "574ff1fba28280c0f9c45db537c60fd56852350644a03259b45800affe9db324",
+    "php/CnMerge.php": "b8d9cf2f756b0945256dd72773645876570232c684c52db6c2b508571ed6c004",
+    "php/Extension.php": "99bab780968b5da44e4ec657234c64add752f132066efb619e6670ef51564952",
+    "php/Runtime.php": "99146dba15c57b4c48b240d2551a52d98c4a6619413b81ad441dd09745658b5f",
+    "README.md": "3dfb4d13797221ed505384c47c9b5605995fe72ebe8925c64e90537f8b4c6bc8",
+    "ui/alert/alert.html.twig": "e631a8bfa4cc5575e5e08a10d61f9b5af6e106525dbe4266ecbb6af42431594e",
+    "ui/alert/alert.variants.json": "cefdda02dd06430011d612938ba847d6303e9996fdcab107817e0d8009ad426d",
+    "ui/badge/badge.html.twig": "a651a59a84b05411b18bc6838bb8b800af3c7d012ac83f273dbdb8212e70b5b0",
+    "ui/badge/badge.variants.json": "8db00aefbdebfb21d2688390aefbb1c20a6c6e76a1312b9af0715b87d8376c43",
+    "ui/block/block.html.twig": "3e2ef21a2f5561baf7d2673c099ecb43fa516d1c9dae71cb0fb5043b662ac9df",
+    "ui/block/block.variants.json": "f235a778278b81299c3275421643eeb796884e6e5f2af3ae52bd51eac2f81932",
+    "ui/box/box.html.twig": "e2b98d591d8560c9802afee4b9333a53fdeabdd589ec47005359dd04a55fa860",
+    "ui/box/box.variants.json": "0154ef69d6a3ad01aa95455dcf87bbd70c3f5e67a0f6a2b36379a1a7ced1601d",
+    "ui/breadcrumb/breadcrumb.html.twig": "579930a83646e1a2755115cdd64affb00dd64595ad98fd1259d3fa9471c3321d",
+    "ui/button-plain/button-plain.html.twig": "b9cd7d081d2941991f38f11946ccd6d0872f56cb2ac62004eb9a5c22ecd994b2",
+    "ui/button-plain/button-plain.variants.json": "c4caf3f4e128276ed64e53559e8aaabb18effd2e4322a34f95df644cb467966b",
+    "ui/button/button.html.twig": "7c56111742bf5ab9567046ad4a3f9eba6b9c842ecdb38f58879c1974b6ac2e36",
+    "ui/button/button.variants.json": "2ba04bf702fb940c64e69576c49d974e8b746ee6d23561065e77ff45bc41de31",
+    "ui/card/card-content.html.twig": "c2dc20931fce69e92ed1cf8f7f485a9e574330b212d5d1b7b0d899d90b5dd6c7",
+    "ui/card/card-description.html.twig": "01193d69df23cd845410e214c7ac7d218ef93541482cc80026974acb2eaf82b8",
+    "ui/card/card-footer.html.twig": "e70c29fdc72906797fe17f3d0eb2bca711b2537398f59229c760890886b689d9",
+    "ui/card/card-header.html.twig": "7579d5cb8cefc15f3707a98fd394b26b45d9f22420db541d8a5566be2148ab22",
+    "ui/card/card-title.html.twig": "5b7a364b13be7c9c7d2053dd81a485826cd29b1ffcefd018d1b186eca289f4ca",
+    "ui/card/card.html.twig": "bab6d78e095703e7a98d6703fee2a7e8e6382598c0a4db360ab0b85a79ccc6a0",
+    "ui/card/card.variants.json": "39bc2c0110b12ceb6ca91ff2d0ba71637a3af956f584025bbee250b454e717a2",
+    "ui/checkbox/checkbox.html.twig": "e8b2a04cb49430db3db8740dced1b812ea0f9d9942537ff8858bdef1ba4c1fd9",
+    "ui/checkbox/checkbox.variants.json": "1f1ef3389fa04636f53885b610f025e3809f039ce5672eb2eda60e0b4a326556",
+    "ui/container/container.html.twig": "9f7f06ef246bce1199d3b5012cea1860fca9586cc7108d7e2ae35e342f9910d5",
+    "ui/container/container.variants.json": "dca2ec275adcd27206521396de76f425a8a98a6642ae8a12ffa923eca31d86af",
+    "ui/dialog/dialog.html.twig": "a3d01505bab5d192a77c762104405be4c39f9efacdaa8dbcf94c3ed755926fd5",
+    "ui/dialog/dialog.variants.json": "e3790244e2ba83b1bec43848274cb935c3dd8bcd04ddbe9deba4f51171e49e06",
+    "ui/disclosure/disclosure.html.twig": "24431c4831015785c9b734ee4292cb262ddb8791403cced1812174ecf9501928",
+    "ui/disclosure/disclosure.variants.json": "20163642d62b6953552a02416b434cdfbf277c3254d8934959723789d4b6ec10",
+    "ui/disclosure/summary.html.twig": "0c7ee320d090d8e6370d8044fd222449625468ff3b9c6950cedc81f9131467a8",
+    "ui/disclosure/summary.variants.json": "274973e927d3536baffe8302d7de780e7e78d890cc10823cd111ccc1c9633325",
+    "ui/form/data-list.html.twig": "96ab002b522dbc20f3723e97bd32fab2b3edaa77f2acf9b909b6e52b94780566",
+    "ui/form/data-option.html.twig": "fc25f3880cbcb4fd3b69166b78ebaade052f1a153ddd17aa9a3feedb777ac404",
+    "ui/form/fieldset.html.twig": "b87422f1e58aeb46f28609acc050095e22fe3fe97460c0b15ad22177b83f75ac",
+    "ui/form/fieldset.variants.json": "9f3c3ba117228f83577f10d329384a7706ea068fd7d8a98d4ebb556a018e3158",
+    "ui/form/form-description.html.twig": "1f713ec358c6940966ddcbb5e0b2cc30a5975993a1fc12ec02b91d79c5e58142",
+    "ui/form/form-description.variants.json": "fd398ea382acaf37f8dd82a7c67219877d355e85b9f9a954222659adcbdbc85b",
+    "ui/form/form-item.html.twig": "67e3a51ebcafb8db2767c6420c98497a30de8c7f62151db60a32378184388cf8",
+    "ui/form/form-item.variants.json": "27c49ce5f42af19b06c9d6f9f3b8683058af44e35c0df5082fa897008b771559",
+    "ui/form/form-message.html.twig": "2ccc7f1a683ecca1a39087e33113cf2d7fa15b776eb90fb515ea340a1556bc38",
+    "ui/form/form-message.variants.json": "281c0272d251ffbd015fe1570879676b6d787b8149ac9129db846448d88b89b4",
+    "ui/form/form.html.twig": "dc3042950a5dc1214d5341515a12d87bb851e952953b7829ce44c24cd3de456e",
+    "ui/form/form.variants.json": "2e2b94499ea19b932f158c9417602a070b843d368326be97780b686d565d2e6a",
+    "ui/form/legend.html.twig": "f7466aeb53d1d377caad7d6e5d6b98280ba5abe568f945c79946a4bfe8efe891",
+    "ui/form/legend.variants.json": "58415ce5ebbd97ef3fe8a85adc19f805d5f32408648457284fe2fa1e45e6cb11",
+    "ui/form/meter.html.twig": "abebbf324297c6d2b6a2747fd7fe2833708b785e5e4e0bcf863bb893bc369196",
+    "ui/form/meter.variants.json": "9ea910d4be6378ffccb5ec9d1a92fc8f026b79fcf26968280d8bdd16fc87cb16",
+    "ui/form/output.html.twig": "8e28442dda088a49a7bf2575787dc23d03b055d027ee56a6a026436cceb770bf",
+    "ui/form/progress.html.twig": "e872be1bb935f23387bc2969807bb7eaf166d0c6cc0c9a3143ffb506fc026b48",
+    "ui/form/progress.variants.json": "7d118704a6477aa91feb73e4dcde0980c9639350ec79d801384c4dad3bf2ab8a",
+    "ui/grid/grid-col.html.twig": "9be0be1659ffa9b47a029db656400ca99059a3a8269b889ef0c0eabd172d49ea",
+    "ui/grid/grid.html.twig": "45a2a60b7c305a698d0ce6e4bb4735e8a21aef381627b2a261d83b4006da76e3",
+    "ui/grid/grid.variants.json": "c1819c6d4d725e6137d0b7a053511da50fb26eb6f5b5146de7a0b512da945a74",
+    "ui/group/group.html.twig": "0060c711ec9f9220b8acee3f80f60f5074fda77fa8f2d1102b59be3977c34619",
+    "ui/group/group.variants.json": "c571dd93f7a92a7c31792d7e30c248010934a70c089b65dee7a59afe96c2fb2d",
+    "ui/icon/icon.html.twig": "248a5a23bcc05ef4257c8ce2960c0ca7a0d143a1576f814e0ebf67ca9ab07551",
+    "ui/icon/icon.variants.json": "1e931f52ab6497706c0ff0f6a01894f209035a70206dc2ef40a89413d2995d28",
+    "ui/iconbadge/icon-badge.html.twig": "66c6779cf2b859bc7cffc70f5aeacf2985a81b2da0a20d83394e2b7a64f1e734",
+    "ui/iconbadge/iconbadge.variants.json": "6b24fb827049944852a4bd3380418aa18b1f8acd156c00f551830fa28a006131",
+    "ui/image/image.html.twig": "ebba7f52e5edd9d7b824fc2f3a0172a388b05c1d4ef213cab8729b1c3cc87178",
+    "ui/image/image.variants.json": "6b0a048a1a1a736361ca5bf755c4bc05f9418fd0d1cc8414e511a0861d4d6ce6",
+    "ui/image/picture.html.twig": "b0aed57e24a96676d19f44806c495d98c65daaad61c98ba2e70d99bf0360f3ba",
+    "ui/image/source.html.twig": "23d90d3ef22544882fefe6034557314e6de85aa17c744a0ab2d24ffad2f16c8f",
+    "ui/inline/inline.html.twig": "ef6489abd8fd25f6a56c682bfc83250fbd87dce67af7724cb1acccaf688ccac8",
+    "ui/inline/inline.variants.json": "3b4c0082fea7d2fddef77e9a24cdc5ee0f2e0676626ca6a9827e373710b5d646",
+    "ui/input/input.html.twig": "72544f1a65e02aecdc0f18bc3d41a62cee3ab291995712fa8d1402385cceb8fc",
+    "ui/input/input.variants.json": "df29f2ffc799d56eeda94ceaabe15e168179fdc7b6d1aafeab2c4eb330014d04",
+    "ui/label/label.html.twig": "1ec1bb56b1818004a328c653a503ebe595f255aca33098b36f3c98b94326b9b0",
+    "ui/label/label.variants.json": "a29b14935c0aacac086db0180d99159c2dd9105f9e05331a247b2e36234e5e54",
+    "ui/linebreak/break.html.twig": "56db6bbab78ea2e26cb5c835dd70db65fcf52c14985061609321c0a308f63c8c",
+    "ui/linebreak/linebreak.variants.json": "ee15b0b3f21340688ceaf1d0640dab60a091ba013c44470c7de1b4d524e89dad",
+    "ui/link-plain/link-plain.html.twig": "98ea331ed542437c8161dca33134792a04461bb5ac13ff876e8b4189eb581fda",
+    "ui/link-plain/link-plain.variants.json": "f2f7a34d5f33118736c60148e426083dd89cf8699cf112fbb1a00da5658dde82",
+    "ui/link/link.html.twig": "699d7af8d9a98d3c0a6e42f02090c7cbf37925deebcf6b970262690c7afbabfa",
+    "ui/link/link.variants.json": "4ebce197e49566a1ed9bf537e8eb65b1c86167c36be1a8b075d24e4455c37bd4",
+    "ui/list/list-item.html.twig": "b3a1df24f6d9180538ad6b0101983cc1bec17c2dfa5e3b7f50cd8c8fa81b411c",
+    "ui/list/list.html.twig": "41fe35579ac215e921a74ac3e7fea2015b4f6415c0a152313922b24af70a54ff",
+    "ui/list/list.variants.json": "286007571632d86eef167a1ca3f9ee3338085479ff1d6bbe3bc308436b8bfa57",
+    "ui/lucide-icon/lucide-icon.html.twig": "1ce57028685b333d7861e8f2c09e9f8a56ad2f4b6cdd86d21e7db70ac95a06b1",
+    "ui/lucide-icon/lucide-icons.json": "3fc859a5369f955aa9ec4af16960f8b6ca7c67416d7716f0fc78b50abedf5ba9",
+    "ui/radio/radio.html.twig": "64486d8ddba62b7d79f19b8aa3cb0d19cbcbe6327c8f679a7eec3f37eb8c7586",
+    "ui/radio/radio.variants.json": "e260efee6e8cb1082a2cfa5fd54e1554e45c8c094850758476a692c978066fdb",
+    "ui/range/range.html.twig": "3078831631b4255e4d0e6942e20e2dad7d1d8c9af90771759b9863350a6c2fdc",
+    "ui/range/range.variants.json": "9d90b66e2a73778049cc1850587cd6c24f01d75f64c2a981f20e54de3fea7e8a",
+    "ui/select/opt-group.html.twig": "0aafae493b2f31d23e47e5998f7fb9e474efbe76f405795d5592acc3a4a882ec",
+    "ui/select/select-option.html.twig": "63993dc7c5bf6f1e75612a82b21458047271febbdc8990da8c6f1a63a8eda18a",
+    "ui/select/select.html.twig": "97b5df9c2ba606b1d660cfb3c80c8ca11ff82032c40505b45b5ed5f58755dccd",
+    "ui/select/select.variants.json": "6bb9388ceb4a2bbcd2b70292a081614920f6e118073436d93f924a3282217bed",
+    "ui/separator/separator.html.twig": "3b0963e97a002bc21a10c3fa810287ecf56b0ae85966a13efb9c34bd14387162",
+    "ui/separator/separator.variants.json": "f1f7562cb3b082ea0054378ef6754585e32fd1ebbdeeb37ca222860c03271f47",
+    "ui/sheet/sheet-close.html.twig": "89f79cf5d2abba71fdfa68492c39c11a41c86c7d8bd1595066e7cdbc2f9583df",
+    "ui/sheet/sheet-trigger.html.twig": "112b5685ffdb21516e127e49c374bdc497a37d17db38a06060947abe39b24eee",
+    "ui/sheet/sheet.html.twig": "b12c764119caf8431420a59c85691c036365b1b62b545a65721db6bac6fd3ec2",
+    "ui/sheet/sheet.variants.json": "cd1406a8461a53512853718fccd2cc669f7bf5e4cd16d89d9fbae890760e4bb4",
+    "ui/sheet/sheettrigger.variants.json": "79e43efa27faca8ebcb3c9c38cbd187d2a898df4fc22534a21cbe722189ef138",
+    "ui/skeleton/skeleton.html.twig": "54bac80e3570733ee84773c529a563a6f219c51e4bdbd2b72613ed13e43c8f0b",
+    "ui/skeleton/skeleton.variants.json": "ca79242c112ff2b714b0c2ec16ab07ee402fa6b23df3f7cf0c3b6f153dc788e8",
+    "ui/stack/stack.html.twig": "ab9b562a986f4c708e75ea8cabb4d3c308563178eea9c1051ac238da1491a246",
+    "ui/stack/stack.variants.json": "aa6a71c5a5d5bb664149c92107daa0cfd23ae0f8904265e02adfd284f82bd797",
+    "ui/switch/switch.html.twig": "1a9450de32b51919a10c15cc65e81d28cdb4ea9ac150267b145e5f610bfbe1c4",
+    "ui/switch/switch.variants.json": "7d3f004339b9af0abeb81a8b9acb32c8e8a87c2bb5be498867a57fd5b1347539",
+    "ui/table/table-body.html.twig": "0df3817ceaa4ccb752b22790be9ec537866712aa1b5c83ebe5483d6e7103ce46",
+    "ui/table/table-caption.html.twig": "7b10d7900bc5262fb27576b3b67a114d8326c1ec15b9703bbe36477f4181dc54",
+    "ui/table/table-cell.html.twig": "741cb3b7da64194561766b5e4e08935231ade4d9be460a2b8e952944c9bf1314",
+    "ui/table/table-cell.variants.json": "f0be9b8640964cfae0df8d4477eca8f53e21d67e9113baf3070ab86c7432aff5",
+    "ui/table/table-col-group.html.twig": "b2e9365955e00bf6ddafb53e1accc4f771b4e6f5a8140b7fbe0306dae95ca911",
+    "ui/table/table-col.html.twig": "fcbeeb4188c28508658fdb66111e8f70ec81465f927fc308b22f60bde4436ed9",
+    "ui/table/table-foot.html.twig": "dbd7cf0f3a080d8c2e42d0bb9f86aa14a17d20e369cb3d2ca128ec25388c79aa",
+    "ui/table/table-head-cell.html.twig": "c032f5be13dd69ef693fe6d000802e870ed96eee64d0d5c3b1df6c6a346a4985",
+    "ui/table/table-head-cell.variants.json": "fb3eed1db6b23d7e4ad52140ce79abf7372f751c0b3182090b840dd0eaee7f5a",
+    "ui/table/table-head.html.twig": "fc386e068d939d172906c50fded254c9ec121fced20aa6b4fb899064f729201e",
+    "ui/table/table-row.html.twig": "0577685304f1e1d55e15cf9279e96126b6ef724fbdf59e25adf88162183115fc",
+    "ui/table/table.html.twig": "bcaa83ae929ae2e3e0c7ad067382c73a6bdafba7311c4a629a56dd923b18500f",
+    "ui/table/table.variants.json": "4ac5d1d28b8709903feadba166706419d070192af753721739efbba2ab5373dd",
+    "ui/text/text.html.twig": "7f9fec686f2d77e17749c180545341dcba2e5edb8c673e53a2dcce6a4e7d60c6",
+    "ui/text/text.variants.json": "820b1e16356e614f3d08fd85cd57aac44afa4e53b2f4b020bbf94e5a80816abe",
+    "ui/textarea/textarea.html.twig": "af77353af9fb06240648afb922fb52a8874a514621ce146261e47beb08d139d4",
+    "ui/textarea/textarea.variants.json": "a733e48a9ed18b409325ea585f3a58e5f356afd064c625072063be1526f7bf02",
+    "ui/themetoggle/theme-toggle.html.twig": "4618c6668e6c6fabca655fbe2477d8cf0a6c3367f5458d6b962ebef4a421369f",
+    "ui/themetoggle/themetoggle.variants.json": "9797fd2291d4997d3ed5e373439cb6340284553f2f398227d400fe14a40f1459",
+    "ui/title/title.html.twig": "57da65b0b45df737d4c4d024563b997088f1918058a7efb11bfe2d6e5fe7c27e",
+    "ui/title/title.variants.json": "ebaf2491ef8666cc5e0d20e8ba02935665ebf07f1adbcea9432cb8851f92c8a2"
+  }
+}
diff --git a/packages/twig/ui/README.md b/packages/twig/ui/README.md
new file mode 100644
index 0000000..b0cab80
--- /dev/null
+++ b/packages/twig/ui/README.md
@@ -0,0 +1,16 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+# ui8kit/twig-ui
+
+[Twig](https://twig.symfony.com) templates **generated** by xgen from `xgen/specs`: 40 bricks, 72 parts, and the blocks.
+
+Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`.
+
+```php
+$twig = \UI8Kit\Twig\Extension::environment('/path/to/packages/twig/ui');
+echo $twig->render('ui/button/button.html.twig', ['p' => ['Variant' => 'outline'], 'children' => 'Save']);
+```
+
+In a template: `{{ include('ui/button/button.html.twig', {p: {Variant: 'outline'}, children: label}, with_context = false) }}`. Brick props use the canonical
+names (`Variant`, `Class`, `Attrs`), block props the JSON names of the TypeScript props (`title`, `className`); `children` is markup.
+
+The classes are the same Tailwind v4 utilities as the Svelte, React, Vue and Solid packages: import their `styles/index.css` in the app CSS and add `@source` for this folder.
diff --git a/packages/twig/ui/bin/parity.php b/packages/twig/ui/bin/parity.php
new file mode 100644
index 0000000..bc1ef67
--- /dev/null
+++ b/packages/twig/ui/bin/parity.php
@@ -0,0 +1,25 @@
+<?php
+
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/twig/assets/parity.php
+
+// Renders generated templates from JSON: stdin [{"template":"ui/button/button.html.twig","vars":{"p":{...},"children":"x"}}],
+// stdout the HTML of each (a failure is "ERROR: <message>"). Used by the parity check of xgen.
+
+declare(strict_types=1);
+
+require __DIR__ . '/../vendor/autoload.php';
+
+use UI8Kit\Twig\Extension;
+
+$env = Extension::environment(dirname(__DIR__), ['strict_variables' => false]);
+$requests = json_decode(stream_get_contents(STDIN), true, 512, JSON_THROW_ON_ERROR);
+$out = [];
+foreach ($requests as $r) {
+    try {
+        $out[] = $env->render($r['template'], $r['vars'] ?? []);
+    } catch (\Throwable $e) {
+        $out[] = 'ERROR: ' . $e->getMessage();
+    }
+}
+echo json_encode($out, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_INVALID_UTF8_SUBSTITUTE), "\n";
diff --git a/packages/twig/ui/blocks/about-company.html.twig b/packages/twig/ui/blocks/about-company.html.twig
new file mode 100644
index 0000000..f70a751
--- /dev/null
+++ b/packages/twig/ui/blocks/about-company.html.twig
@@ -0,0 +1,64 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/about-company.json
+    The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout (split: the pictures beside the text, stacked: the pictures under it), tone, density.
+    Props (p): id, title, lead, stats, values, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_stats = (p.stats ?? null) -%}
+{%- set v_values = (p.values ?? null) -%}
+{%- set v_layout = (p.layout ?? 'split') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_10 -%}
+  {%- set c_11 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4'}}, with_context = false) }}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4', 'className': ui_cnv(['mt-8'])}}, with_context = false) }}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4'}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-3 gap-4', 'Attrs': ui_attrs(['data-testid', 'strip'])}, 'children': c_11}, with_context = false) }}
+{%- endset -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_gt(ui_len(v_stats), 0)) %}
+    {%- set c_4 -%}
+      {%- for v_s in ui_l(v_stats) %}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Attrs': ui_attrs(['data-testid', 'stat'])}, 'children': c_3}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '2-4', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'stats'])}, 'children': c_4}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_gt(ui_len(v_values), 0)) %}
+    {%- set c_9 -%}
+      {%- for v_v in ui_l(v_values) %}
+        {%- set c_8 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_v, ['icon'])), 'Size': 20}}, with_context = false) }}
+          {%- set c_7 -%}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_v, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}, with_context = false) }}
+            {%- set c_6 -%}
+              {{ ui_text(ui_get(v_v, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_7}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'border-t border-border pt-4', 'Attrs': ui_attrs(['data-testid', 'value'])}, 'children': c_8}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['grid grid-cols-1 gap-4', (ui_t(ui_eq(v_layout, 'stacked')) ? 'md:grid-cols-3' : '')])), 'Attrs': ui_attrs(['data-testid', 'values'])}, 'children': c_9}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'layout': (ui_t(ui_eq(v_layout, 'split')) ? 'split' : 'stack'), 'media': {'show': true, 'side': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_10}, 'children': c_12}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/about-me.html.twig b/packages/twig/ui/blocks/about-me.html.twig
new file mode 100644
index 0000000..c528180
--- /dev/null
+++ b/packages/twig/ui/blocks/about-me.html.twig
@@ -0,0 +1,65 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/about-me.json
+    A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, facts, skills, labels, actions, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_facts = (p.facts ?? null) -%}
+{%- set v_skills = (p.skills ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_layout = (p.layout ?? 'facts') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'start') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_10 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4'}}, with_context = false) }}
+{%- endset -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(v_layout, 'facts')) %}
+    {%- if ui_t(ui_gt(ui_len(v_facts), 0)) %}
+      {%- set c_4 -%}
+        {%- for v_f in ui_l(v_facts) %}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_f, ['label'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_f, ['value'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'rounded bg-card inset-ring inset-ring-border flex flex-col gap-0 p-4', 'Attrs': ui_attrs(['data-testid', 'fact'])}, 'children': c_3}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2', 'Attrs': ui_attrs(['data-testid', 'facts'])}, 'children': c_4}, with_context = false) }}
+    {%- endif %}
+  {%- elseif ui_t(ui_gt(ui_len(v_skills), 0)) %}
+    {%- set c_9 -%}
+      {%- for v_s in ui_l(v_skills) %}
+        {%- set c_8 -%}
+          {%- set c_7 -%}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_s, ['label'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}, with_context = false) }}
+            {%- set c_6 -%}
+              {{ ui_text(ui_tpl(ui_get(v_labels, ['level']), [ui_get(v_s, ['level'])])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Justify': 'between'}, 'children': c_7}, with_context = false) }}
+          {{ include('ui/form/progress.html.twig', {'p': {'Value': ui_s(ui_str(ui_get(v_s, ['level']))), 'Max': '100', 'Attrs': ui_attrs(['aria-label', ui_get(v_s, ['label'])])}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'skill'])}, 'children': c_8}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'skills'])}, 'children': c_9}, with_context = false) }}
+  {%- endif %}
+  {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel, 'aside': f_10}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/action-group.html.twig b/packages/twig/ui/blocks/action-group.html.twig
new file mode 100644
index 0000000..a829b9d
--- /dev/null
+++ b/packages/twig/ui/blocks/action-group.html.twig
@@ -0,0 +1,22 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/action-group.json
+    One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not handlers: the page decides what they open.
+    Props (p): primary, primaryHref, secondary, secondaryHref, align. -#}
+{%- set v_primary = (p.primary ?? null) -%}
+{%- set v_primaryHref = (p.primaryHref ?? null) -%}
+{%- set v_secondary = (p.secondary ?? null) -%}
+{%- set v_secondaryHref = (p.secondaryHref ?? null) -%}
+{%- set v_align = (p.align ?? 'start') -%}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_primary) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Href': ui_s(v_primaryHref), 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_1}, with_context = false) }}
+  {%- if ui_t(v_secondary) %}
+    {%- set c_2 -%}
+      {{ ui_text(v_secondary) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Href': ui_s(v_secondaryHref), 'Attrs': ui_attrs(['data-testid', 'action-secondary'])}, 'children': c_2}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': ui_s((ui_t(ui_eq(v_align, 'center')) ? 'center' : 'start')), 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-slot', 'action-group'])}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/activity-feed.html.twig b/packages/twig/ui/blocks/activity-feed.html.twig
new file mode 100644
index 0000000..402d8d4
--- /dev/null
+++ b/packages/twig/ui/blocks/activity-feed.html.twig
@@ -0,0 +1,53 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/activity-feed.json
+    A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout (timeline, list), density (default, compact), tone (default, muted).
+    Props (p): id, title, text, events, empty, layout, density, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_events = (p.events ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_layout = (p.layout ?? 'timeline') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- set c_7 -%}
+      {%- if ui_t(ui_eq(ui_len(v_events), 0)) %}
+        {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'activity', 'title': v_empty}}, with_context = false) }}
+      {%- elseif ui_t(ui_eq(v_layout, 'timeline')) %}
+        {{ include('blocks/timeline.html.twig', {'p': {'items': v_events}}, with_context = false) }}
+      {%- else %}
+        {%- set c_6 -%}
+          {%- for v_e in ui_l(v_events) %}
+            {%- set c_5 -%}
+              {%- set c_3 -%}
+                {%- set c_1 -%}
+                  {{ ui_text(ui_get(v_e, ['title'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+                {%- if ui_t(ui_eq(v_density, 'default')) %}
+                  {%- set c_2 -%}
+                    {{ ui_text(ui_get(v_e, ['text'])) }}
+                  {%- endset -%}
+                  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+                {%- endif %}
+              {%- endset -%}
+              {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_3}, with_context = false) }}
+              {%- set c_4 -%}
+                {{ ui_text(ui_get(v_e, ['time'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'shrink-0 text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex items-start justify-between gap-4 border-b border-border last:border-0', (ui_t(ui_eq(v_density, 'compact')) ? 'py-2' : 'py-4')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_5}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('blocks/panel.html.twig', {'p': {'title': v_title, 'description': v_text, 'id': v_id, 'className': ui_cnv([(ui_t(ui_eq(v_tone, 'muted')) ? 'bg-muted' : '')])}, 'children': c_7}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4 py-8', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_8}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : (ui_t(ui_and([v_title, v_id])) ? ui_tpl('{0}-t', [v_id]) : null)), 'data-testid', 'panel-section', 'aria-label', v_landmarkLabel])}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/announcement-bar.html.twig b/packages/twig/ui/blocks/announcement-bar.html.twig
new file mode 100644
index 0000000..4ef77d5
--- /dev/null
+++ b/packages/twig/ui/blocks/announcement-bar.html.twig
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/announcement-bar.json
+    A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default, muted), layout (center, split), dismiss (show, hide).
+    Props (p): label, text, cta, ctaHref, icon, dismissLabel, tone, layout, dismiss, badgeLabel, badge, position, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_cta = (p.cta ?? null) -%}
+{%- set v_ctaHref = (p.ctaHref ?? null) -%}
+{%- set v_icon = (p.icon ?? 'megaphone') -%}
+{%- set v_dismissLabel = (p.dismissLabel ?? null) -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_layout = (p.layout ?? 'center') -%}
+{%- set v_dismiss = (p.dismiss ?? 'hide') -%}
+{%- set v_badgeLabel = (p.badgeLabel ?? null) -%}
+{%- set v_badge = (p.badge ?? 'none') -%}
+{%- set v_position = (p.position ?? 'top') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_7 -%}
+  {%- set c_6 -%}
+    {%- set c_4 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(v_icon), 'Size': 16}}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_badge, 'show')) %}
+        {%- set c_1 -%}
+          {{ ui_text(v_badgeLabel) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current', 'Attrs': ui_attrs(['data-testid', 'announcement-badge'])}, 'children': c_1}, with_context = false) }}
+      {%- endif %}
+      {%- set c_2 -%}
+        {{ ui_text(v_text) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_2}, with_context = false) }}
+      {%- if ui_t(v_cta) %}
+        {%- set c_3 -%}
+          {{ ui_text(v_cta) }}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/link-plain/link-plain.html.twig', {'p': {'Href': ui_s(v_ctaHref), 'Class': 'inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4', 'Attrs': ui_attrs(['data-testid', 'announcement-cta'])}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': ui_s(ui_cnv(['min-w-0 flex-wrap', (ui_t(ui_and([ui_eq(v_layout, 'center'), ui_eq(v_dismiss, 'show')])) ? 'ml-auto' : '')]))}, 'children': c_4}, with_context = false) }}
+    {%- if ui_t(ui_eq(v_dismiss, 'show')) %}
+      {%- set c_5 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'x', 'Size': 16}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Class': 'ml-auto shrink-0 text-current', 'Type': 'button', 'Attrs': ui_attrs(['aria-label', v_dismissLabel, 'data-testid', 'dismiss'])}, 'children': c_5}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex items-center gap-4 py-2', (ui_t(ui_eq(v_layout, 'split')) ? 'justify-between' : 'justify-center')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_6}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'aside', 'Class': ui_s(ui_cnv(['w-full', (ui_t(ui_eq(v_position, 'bottom')) ? 'sticky bottom-0 z-40 border-t border-border' : ''), (ui_t(ui_eq(v_tone, 'muted')) ? 'bg-muted text-foreground' : 'bg-primary text-primary-foreground')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', 'announcement', 'data-layout', v_layout])}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/app-main.html.twig b/packages/twig/ui/blocks/app-main.html.twig
new file mode 100644
index 0000000..6190256
--- /dev/null
+++ b/packages/twig/ui/blocks/app-main.html.twig
@@ -0,0 +1,51 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/app-main.json
+    The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel when `activity` is given).
+    Props (p): id, title, metrics, chart, activity, cols, density. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_metrics = (p.metrics ?? null) -%}
+{%- set v_chart = (p.chart ?? null) -%}
+{%- set v_activity = (p.activity ?? null) -%}
+{%- set v_cols = (p.cols ?? '1-2') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set c_8 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}, with_context = false) }}
+  {%- if ui_t(ui_gt(ui_len(v_metrics), 0)) %}
+    {%- set c_3 -%}
+      {%- for v_m in ui_l(v_metrics) %}
+        {%- set c_2 -%}
+          {{ include('blocks/stat-tile.html.twig', {'p': {'label': ui_get(v_m, ['label']), 'value': ui_get(v_m, ['value']), 'icon': ui_get(v_m, ['icon']), 'hint': ui_get(v_m, ['hint'])}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_2}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s(v_cols), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_3}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(v_activity) %}
+    {%- set c_6 -%}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_chart, ['series'])), 0)) %}
+        {%- set c_4 -%}
+          {{ include('blocks/bar-chart.html.twig', {'p': {'bars': ui_get(v_chart, ['series']), 'label': ui_get(v_chart, ['summary']), 'height': 144}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/panel.html.twig', {'p': {'title': ui_get(v_chart, ['title']), 'description': ui_get(v_chart, ['text']), 'id': ui_tpl('{0}-chart', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_4}, with_context = false) }}
+      {%- endif %}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_activity, ['events'])), 0)) %}
+        {%- set c_5 -%}
+          {{ include('blocks/timeline.html.twig', {'p': {'items': ui_get(v_activity, ['events'])}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/panel.html.twig', {'p': {'title': ui_get(v_activity, ['title']), 'description': ui_get(v_activity, ['text']), 'id': ui_tpl('{0}-feed', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_5}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-2', 'Class': 'items-stretch gap-4'}, 'children': c_6}, with_context = false) }}
+  {%- elseif ui_t(ui_gt(ui_len(ui_get(v_chart, ['series'])), 0)) %}
+    {%- set c_7 -%}
+      {{ include('blocks/bar-chart.html.twig', {'p': {'bars': ui_get(v_chart, ['series']), 'label': ui_get(v_chart, ['summary']), 'height': 144}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/panel.html.twig', {'p': {'title': ui_get(v_chart, ['title']), 'description': ui_get(v_chart, ['text']), 'id': ui_tpl('{0}-chart', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': ui_s((ui_t(ui_eq(v_density, 'compact')) ? '4' : '6')), 'Align': 'stretch', 'Class': 'min-w-0', 'Attrs': ui_attrs(['data-testid', 'app-main'])}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/app-shell.html.twig b/packages/twig/ui/blocks/app-shell.html.twig
new file mode 100644
index 0000000..72e0a9a
--- /dev/null
+++ b/packages/twig/ui/blocks/app-shell.html.twig
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/app-shell.json
+    The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar is a port contract.
+    Props (p): id, title, nav, user, search, metrics, chart, activity, layout, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_nav = (p.nav ?? null) -%}
+{%- set v_user = (p.user ?? null) -%}
+{%- set v_search = (p.search ?? null) -%}
+{%- set v_metrics = (p.metrics ?? null) -%}
+{%- set v_chart = (p.chart ?? null) -%}
+{%- set v_activity = (p.activity ?? null) -%}
+{%- set v_layout = (p.layout ?? 'sidebar') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(v_layout, 'top')) %}
+    {%- set c_2 -%}
+      {{ include('blocks/nav-bar.html.twig', {'p': {'label': ui_get(v_nav, ['label']), 'brand': ui_get(v_nav, ['brand']), 'links': ui_get(v_nav, ['links']), 'current': ui_get(v_nav, ['current']), 'search': v_search, 'actions': {'mode': 'none'}, 'layout': 'search', 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+      {%- set c_1 -%}
+        {{ include('blocks/app-main.html.twig', {'p': {'id': v_id, 'title': v_title, 'metrics': v_metrics, 'chart': v_chart, 'cols': '1-4', 'activity': v_activity, 'density': v_density}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'pb-8'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_1}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_2}, with_context = false) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- if ui_t(ui_eq(v_layout, 'sidebar')) %}
+        {%- set c_3 -%}
+          {{ include('blocks/sidebar-nav.html.twig', {'p': {'label': ui_get(v_nav, ['label']), 'brand': ui_get(v_nav, ['brand']), 'links': ui_get(v_nav, ['links']), 'current': ui_get(v_nav, ['current']), 'userName': ui_get(v_user, ['name']), 'userEmail': ui_get(v_user, ['email']), 'density': v_density, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+          {{ include('blocks/app-main.html.twig', {'p': {'id': v_id, 'title': v_title, 'metrics': v_metrics, 'chart': v_chart, 'activity': v_activity, 'density': v_density}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1', 'Class': 'items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]'}, 'children': c_3}, with_context = false) }}
+      {%- else %}
+        {%- set c_9 -%}
+          {{ include('blocks/sidebar-nav.html.twig', {'p': {'label': ui_get(v_nav, ['label']), 'brand': ui_get(v_nav, ['brand']), 'links': ui_get(v_nav, ['links']), 'current': ui_get(v_nav, ['current']), 'userName': ui_get(v_user, ['name']), 'userEmail': ui_get(v_user, ['email']), 'width': 'compact', 'density': v_density, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+          {%- if ui_t(ui_gt(ui_len(ui_get(v_activity, ['events'])), 0)) %}
+            {%- set c_8 -%}
+              {%- set c_7 -%}
+                {%- for v_e in ui_l(ui_get(v_activity, ['events'])) %}
+                  {%- set c_6 -%}
+                    {%- set c_4 -%}
+                      {{ ui_text(ui_get(v_e, ['title'])) }}
+                    {%- endset -%}
+                    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+                    {%- set c_5 -%}
+                      {{ ui_text(ui_get(v_e, ['time'])) }}
+                    {%- endset -%}
+                    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+                  {%- endset -%}
+                  {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex flex-col gap-2', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}, with_context = false) }}
+                {%- endfor %}
+              {%- endset -%}
+              {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/panel.html.twig', {'p': {'title': ui_get(v_activity, ['title']), 'description': ui_get(v_activity, ['text']), 'id': ui_tpl('{0}-list', [v_id])}, 'children': c_8}, with_context = false) }}
+          {%- endif %}
+          {{ include('blocks/app-main.html.twig', {'p': {'id': v_id, 'title': v_title, 'metrics': v_metrics, 'chart': v_chart, 'density': 'compact'}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-3', 'Class': 'items-start gap-4'}, 'children': c_9}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-8'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': 'bg-background', 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : ui_tpl('{0}-title', [v_id])), 'data-testid', 'app-shell', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/article-block.html.twig b/packages/twig/ui/blocks/article-block.html.twig
new file mode 100644
index 0000000..98d3759
--- /dev/null
+++ b/packages/twig/ui/blocks/article-block.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/article-block.json
+    A self-contained item (a review, a card, a project) in its own file: Block tag article.
+    Props (p): testid, className; children: markup. -#}
+{%- set v_testid = (p.testid ?? null) -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv([(p.className ?? '')])), 'Attrs': ui_attrs(['data-testid', v_testid])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/article-body.html.twig b/packages/twig/ui/blocks/article-body.html.twig
new file mode 100644
index 0000000..acc7055
--- /dev/null
+++ b/packages/twig/ui/blocks/article-body.html.twig
@@ -0,0 +1,71 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/article-body.json
+    A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting the section being read is a port contract.
+    Props (p): id, title, sections, empty, tocTitle, layout, quotes, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_sections = (p.sections ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_tocTitle = (p.tocTitle ?? null) -%}
+{%- set v_layout = (p.layout ?? 'column') -%}
+{%- set v_quotes = (p.quotes ?? 'show') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_13 -%}
+  {%- if ui_t(ui_eq(ui_len(v_sections), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'file-text', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_12 -%}
+      {%- if ui_t(ui_eq(v_layout, 'toc')) %}
+        {%- set c_6 -%}
+          {%- set c_5 -%}
+            {%- set c_1 -%}
+              {{ ui_text(v_tocTitle) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_4 -%}
+              {%- for v_s in ui_l(v_sections) %}
+                {%- set c_3 -%}
+                  {%- set c_2 -%}
+                    {{ ui_text(ui_get(v_s, ['title'])) }}
+                  {%- endset -%}
+                  {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_tpl('#{0}-{1}', [v_id, ui_get(v_s, ['id'])])), 'Variant': 'default', 'Class': 'text-sm text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'toc-link'])}, 'children': c_2}, with_context = false) }}
+                {%- endset -%}
+                {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_3}, with_context = false) }}
+              {%- endfor %}
+            {%- endset -%}
+            {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [v_tocTitle, v_landmarkLabel])) : v_tocTitle), 'className': ui_cnv(['md:sticky md:top-4']), 'testid': 'toc'}, 'children': c_6}, with_context = false) }}
+      {%- endif %}
+      {%- set c_11 -%}
+        {%- for v_s in ui_l(v_sections) %}
+          {%- set c_10 -%}
+            {%- set c_7 -%}
+              {{ ui_text(ui_get(v_s, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_7}, with_context = false) }}
+            {%- set c_8 -%}
+              {{ ui_text(ui_get(v_s, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'base'}, 'children': c_8}, with_context = false) }}
+            {%- if ui_t(ui_eq(v_quotes, 'show')) %}
+              {%- if ui_t(ui_get(v_s, ['quote'])) %}
+                {%- set c_9 -%}
+                  {{ ui_text(ui_get(v_s, ['quote'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Tag': 'blockquote', 'Class': 'm-0 border-l border-border pl-4 text-lg', 'Attrs': ui_attrs(['data-testid', 'quote'])}, 'children': c_9}, with_context = false) }}
+              {%- endif %}
+            {%- endif %}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex flex-col gap-4', 'Attrs': ui_attrs(['id', ui_tpl('{0}-{1}', [v_id, ui_get(v_s, ['id'])]), 'data-testid', 'item'])}, 'children': c_10}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '8', 'Align': 'stretch', 'Class': 'mx-auto w-full max-w-2xl min-w-0', 'Attrs': ui_attrs(['data-testid', 'article'])}, 'children': c_11}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1', 'Class': ui_s(ui_cnv(['items-start gap-8', (ui_t(ui_eq(v_layout, 'toc')) ? 'md:grid-cols-[14rem_minmax(0,1fr)]' : '')]))}, 'children': c_12}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_13}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/auth-card.html.twig b/packages/twig/ui/blocks/auth-card.html.twig
new file mode 100644
index 0000000..10c9095
--- /dev/null
+++ b/packages/twig/ui/blocks/auth-card.html.twig
@@ -0,0 +1,89 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/auth-card.json
+    A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button, optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout (card, plain), social (none, show).
+    Props (p): id, title, text, submit, switchText, switchLink, switchHref, labels, mode, layout, social, level, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_submit = (p.submit ?? null) -%}
+{%- set v_switchText = (p.switchText ?? null) -%}
+{%- set v_switchLink = (p.switchLink ?? null) -%}
+{%- set v_switchHref = (p.switchHref ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_mode = (p.mode ?? 'signin') -%}
+{%- set v_layout = (p.layout ?? 'card') -%}
+{%- set v_social = (p.social ?? 'none') -%}
+{%- set v_level = (p.level ?? 2) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_16 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(v_level), 'Size': '2xl', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ ui_text(v_text) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_3}, with_context = false) }}
+  {%- if ui_t(ui_and([ui_eq(v_social, 'first'), not (ui_eq(v_social, 'none')), not (ui_eq(v_mode, 'reset')), not (ui_eq(v_mode, 'magic'))])) %}
+    {%- set c_8 -%}
+      {%- set c_5 -%}
+        {{ include('ui/separator/separator.html.twig', {'p': {'Class': 'flex-1'}}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['divider'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+        {{ include('ui/separator/separator.html.twig', {'p': {'Class': 'flex-1'}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_5}, with_context = false) }}
+      {%- set c_6 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'key-round', 'Size': 16}}, with_context = false) }}
+        {{ ui_text(ui_get(v_labels, ['passkey'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'w-full'}, 'children': c_6}, with_context = false) }}
+      {%- set c_7 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'mail', 'Size': 16}}, with_context = false) }}
+        {{ ui_text(ui_get(v_labels, ['magic'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'w-full'}, 'children': c_7}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Attrs': ui_attrs(['data-testid', 'social'])}, 'children': c_8}, with_context = false) }}
+  {%- endif %}
+  {{ include('blocks/auth-form.html.twig', {'p': {'id': v_id, 'mode': v_mode, 'labels': v_labels, 'submit': v_submit}}, with_context = false) }}
+  {%- if ui_t(ui_and([not (ui_eq(v_social, 'first')), not (ui_eq(v_social, 'none')), not (ui_eq(v_mode, 'reset')), not (ui_eq(v_mode, 'magic'))])) %}
+    {%- set c_13 -%}
+      {%- set c_10 -%}
+        {{ include('ui/separator/separator.html.twig', {'p': {'Class': 'flex-1'}}, with_context = false) }}
+        {%- set c_9 -%}
+          {{ ui_text(ui_get(v_labels, ['divider'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_9}, with_context = false) }}
+        {{ include('ui/separator/separator.html.twig', {'p': {'Class': 'flex-1'}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_10}, with_context = false) }}
+      {%- set c_11 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'key-round', 'Size': 16}}, with_context = false) }}
+        {{ ui_text(ui_get(v_labels, ['passkey'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'w-full'}, 'children': c_11}, with_context = false) }}
+      {%- set c_12 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'mail', 'Size': 16}}, with_context = false) }}
+        {{ ui_text(ui_get(v_labels, ['magic'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'w-full'}, 'children': c_12}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Attrs': ui_attrs(['data-testid', 'social'])}, 'children': c_13}, with_context = false) }}
+  {%- endif %}
+  {%- set c_15 -%}
+    {{ ui_text(v_switchText) }}
+    {{ ui_text(' ') }}
+    {%- set c_14 -%}
+      {{ ui_text(v_switchLink) }}
+    {%- endset -%}
+    {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(v_switchHref), 'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'switch'])}, 'children': c_14}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-center text-muted-foreground'}, 'children': c_15}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv(['flex w-full flex-col gap-6', (ui_t(ui_eq(v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')])), 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : ui_tpl('{0}-title', [v_id])), 'data-testid', 'auth-card', 'data-mode', v_mode, 'aria-label', v_landmarkLabel])}, 'children': c_16}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/auth-form.html.twig b/packages/twig/ui/blocks/auth-form.html.twig
new file mode 100644
index 0000000..6b143b1
--- /dev/null
+++ b/packages/twig/ui/blocks/auth-form.html.twig
@@ -0,0 +1,58 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/auth-form.json
+    The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot link, the terms, the submit button.
+    Props (p): id, mode, labels, submit. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_mode = (p.mode ?? 'signin') -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_submit = (p.submit ?? null) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(v_mode, 'signup')) %}
+    {%- set c_1 -%}
+      {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'name', 'Autocomplete': 'name', 'Attrs': ui_attrs(['id', ui_tpl('{0}-name', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['name']), 'htmlFor': ui_tpl('{0}-name', [v_id])}, 'children': c_1}, with_context = false) }}
+  {%- endif %}
+  {%- set c_2 -%}
+    {{ include('ui/input/input.html.twig', {'p': {'Type': 'email', 'Name': 'email', 'Autocomplete': 'email', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['email']), 'htmlFor': ui_tpl('{0}-email', [v_id])}, 'children': c_2}, with_context = false) }}
+  {%- if ui_t(ui_and([not (ui_eq(v_mode, 'reset')), not (ui_eq(v_mode, 'magic'))])) %}
+    {%- set c_3 -%}
+      {{ include('ui/input/input.html.twig', {'p': {'Type': 'password', 'Name': 'password', 'Autocomplete': ui_s((ui_t(ui_eq(v_mode, 'signup')) ? 'new-password' : 'current-password')), 'Attrs': ui_attrs(['id', ui_tpl('{0}-password', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['password']), 'htmlFor': ui_tpl('{0}-password', [v_id])}, 'children': c_3}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_mode, 'signin')) %}
+    {%- set c_7 -%}
+      {%- set c_5 -%}
+        {{ include('ui/checkbox/checkbox.html.twig', {'p': {'Name': 'remember', 'Attrs': ui_attrs(['id', ui_tpl('{0}-remember', [v_id])])}}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['remember'])) }}
+        {%- endset -%}
+        {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-remember', [v_id])), 'Class': 'text-sm'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-fit', '']))}, 'children': c_5}, with_context = false) }}
+      {%- set c_6 -%}
+        {{ ui_text(ui_get(v_labels, ['forgot'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'link', 'Size': 'sm', 'Class': 'px-0'}, 'children': c_6}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Justify': 'between', 'Align': 'center', 'Class': 'flex-wrap gap-2'}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_mode, 'signup')) %}
+    {%- set c_9 -%}
+      {{ include('ui/checkbox/checkbox.html.twig', {'p': {'Name': 'terms', 'Attrs': ui_attrs(['id', ui_tpl('{0}-terms', [v_id])])}}, with_context = false) }}
+      {%- set c_8 -%}
+        {{ ui_text(ui_get(v_labels, ['terms'])) }}
+      {%- endset -%}
+      {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-terms', [v_id])), 'Class': 'text-sm'}, 'children': c_8}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-fit', '']))}, 'children': c_9}, with_context = false) }}
+  {%- endif %}
+  {%- set c_10 -%}
+    {{ ui_text(v_submit) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_10}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/form/form.html.twig', {'p': {'Method': 'dialog', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'auth-form'])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/auth-layout.html.twig b/packages/twig/ui/blocks/auth-layout.html.twig
new file mode 100644
index 0000000..283103e
--- /dev/null
+++ b/packages/twig/ui/blocks/auth-layout.html.twig
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/auth-layout.json
+    A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card, centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side of the picture), mode, social. The page's heading is the card's title.
+    Props (p): id, title, text, submit, switchTo, labels, visual, level, layout, side, mode, social, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_submit = (p.submit ?? null) -%}
+{%- set v_switchTo = (p.switchTo ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_visual = (p.visual ?? null) -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_layout = (p.layout ?? 'split') -%}
+{%- set v_side = (p.side ?? 'end') -%}
+{%- set v_mode = (p.mode ?? 'signin') -%}
+{%- set v_social = (p.social ?? 'none') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- if ui_t(ui_eq(v_layout, 'split')) %}
+      {%- set c_5 -%}
+        {%- set c_1 -%}
+          {{ include('blocks/auth-card.html.twig', {'p': {'id': v_id, 'title': v_title, 'text': v_text, 'submit': v_submit, 'switchText': ui_get(v_switchTo, ['text']), 'switchLink': ui_get(v_switchTo, ['link']), 'switchHref': ui_get(v_switchTo, ['href']), 'labels': v_labels, 'mode': v_mode, 'layout': 'plain', 'social': v_social, 'level': v_level, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'mx-auto flex w-full max-w-sm items-center'}, 'children': c_1}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_visual, ['title']), 'ratio': '4/3'}}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_visual, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_visual, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv(['justify-end rounded bg-muted p-8', (ui_t(ui_eq(v_side, 'start')) ? 'md:order-first' : 'md:order-last')])), 'Attrs': ui_attrs(['data-testid', 'visual'])}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-2', 'Class': 'items-stretch gap-8'}, 'children': c_5}, with_context = false) }}
+    {%- elseif ui_t(ui_eq(v_layout, 'centered')) %}
+      {%- set c_6 -%}
+        {{ include('blocks/auth-card.html.twig', {'p': {'id': v_id, 'title': v_title, 'text': v_text, 'submit': v_submit, 'switchText': ui_get(v_switchTo, ['text']), 'switchLink': ui_get(v_switchTo, ['link']), 'switchHref': ui_get(v_switchTo, ['href']), 'labels': v_labels, 'mode': v_mode, 'social': v_social, 'level': v_level, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'mx-auto w-full max-w-md rounded bg-muted p-6'}, 'children': c_6}, with_context = false) }}
+    {%- else %}
+      {%- set c_7 -%}
+        {{ include('blocks/auth-card.html.twig', {'p': {'id': v_id, 'title': v_title, 'text': v_text, 'submit': v_submit, 'switchText': ui_get(v_switchTo, ['text']), 'switchLink': ui_get(v_switchTo, ['link']), 'switchHref': ui_get(v_switchTo, ['href']), 'labels': v_labels, 'mode': v_mode, 'layout': 'plain', 'social': v_social, 'level': v_level, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'mx-auto w-full max-w-sm'}, 'children': c_7}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-12'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_8}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'div', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'auth-layout', 'data-layout', v_layout])}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/avatar.html.twig b/packages/twig/ui/blocks/avatar.html.twig
new file mode 100644
index 0000000..12d1e3c
--- /dev/null
+++ b/packages/twig/ui/blocks/avatar.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/avatar.json
+    An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round.
+    Props (p): src, alt, size, className. -#}
+{%- set v_src = (p.src ?? null) -%}
+{%- set v_alt = (p.alt ?? '') -%}
+{%- set v_size = (p.size ?? 'default') -%}
+{%- set c_1 -%}
+  {{ include('ui/image/image.html.twig', {'p': {'Src': ui_s(v_src), 'Alt': ui_s(v_alt), 'Class': 'size-full object-cover', 'Fit': 'cover', 'Size': 'auto', 'Loading': 'eager', 'Decoding': 'auto', 'Attrs': ui_attrs(['draggable', 'false'])}}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/avatar.variants.json', {'size': v_size}), (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'avatar'])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/backdrop.html.twig b/packages/twig/ui/blocks/backdrop.html.twig
new file mode 100644
index 0000000..3fe6929
--- /dev/null
+++ b/packages/twig/ui/blocks/backdrop.html.twig
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/backdrop.json
+    A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of the block (rule 01).
+    Props (p): kind, alt. -#}
+{%- set v_kind = (p.kind ?? 'none') -%}
+{%- set v_alt = (p.alt ?? '') -%}
+{%- if ui_t(ui_eq(v_kind, 'image')) %}
+  {%- set c_1 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_alt, 'ratio': '21/9', 'className': ui_cnv(['size-full rounded-none opacity-30'])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'pointer-events-none absolute inset-0 -z-10', 'Attrs': ui_attrs(['data-testid', 'backdrop'])}, 'children': c_1}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/badge-square.html.twig b/packages/twig/ui/blocks/badge-square.html.twig
new file mode 100644
index 0000000..f158c92
--- /dev/null
+++ b/packages/twig/ui/blocks/badge-square.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/badge-square.json
+    A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd).
+    Props (p): size, className; children: markup. -#}
+{%- set v_size = (p.size ?? 'default') -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/badge-square.variants.json', {'size': v_size}), (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'badge-square'])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/bar-chart.html.twig b/packages/twig/ui/blocks/bar-chart.html.twig
new file mode 100644
index 0000000..a07c243
--- /dev/null
+++ b/packages/twig/ui/blocks/bar-chart.html.twig
@@ -0,0 +1,33 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/bar-chart.json
+    A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image for assistive technology: `label` carries the summary, the bar values are in the captions and titles.
+    Props (p): bars, label, max, height, className. -#}
+{%- set v_bars = (p.bars ?? null) -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_max = (p.max ?? null) -%}
+{%- set v_height = (p.height ?? 160) -%}
+{%- set v_top = ui_max([1, ui_coalesce([v_max, ui_max_by(v_bars, 'value')])]) -%}
+{%- set c_6 -%}
+  {%- set c_2 -%}
+    {%- for v_b in ui_l(v_bars) %}
+      {%- set c_1 -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['w-full rounded', (ui_t(ui_get(v_b, ['muted'])) ? 'bg-muted-foreground' : 'bg-primary')])), 'Attrs': ui_attrs(['style', ui_css(['height', ui_max([2, ui_round(ui_mul(ui_div(ui_get(v_b, ['value']), v_top), 100))]), '%']), 'data-bar', ui_get(v_b, ['id'])])}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex h-full min-w-0 flex-1 items-end', 'Attrs': ui_attrs(['title', ui_coalesce([ui_get(v_b, ['title']), ui_get(v_b, ['label'])])])}, 'children': c_1}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-w-0 items-end gap-2', 'Attrs': ui_attrs(['role', 'img', 'aria-label', v_label, 'style', ui_css(['height', v_height, 'px'])])}, 'children': c_2}, with_context = false) }}
+  {%- set c_5 -%}
+    {%- for v_b in ui_l(v_bars) %}
+      {%- set c_4 -%}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_b, ['label'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'relative h-4 min-w-0 flex-1'}, 'children': c_4}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'mt-2 flex min-w-0 gap-2', 'Attrs': ui_attrs(['aria-hidden', 'true'])}, 'children': c_5}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['min-w-0', (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'bar-chart'])}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/before-after.html.twig b/packages/twig/ui/blocks/before-after.html.twig
new file mode 100644
index 0000000..3b1e52e
--- /dev/null
+++ b/packages/twig/ui/blocks/before-after.html.twig
@@ -0,0 +1,107 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/before-after.json
+    Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two cards, rows: one row per point), icons (show, hide), tone, density.
+    Props (p): id, title, points, empty, labels, layout, icons, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_points = (p.points ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'cards') -%}
+{%- set v_icons = (p.icons ?? 'show') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_21 -%}
+  {%- if ui_t(ui_eq(ui_len(v_points), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'git-compare', 'title': v_empty}}, with_context = false) }}
+  {%- elseif ui_t(ui_eq(v_layout, 'cards')) %}
+    {%- set c_13 -%}
+      {%- set c_6 -%}
+        {%- set c_5 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_labels, ['before'])) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+          {%- set c_4 -%}
+            {%- for v_p in ui_l(v_points) %}
+              {%- set c_3 -%}
+                {%- if ui_t(ui_eq(v_icons, 'show')) %}
+                  {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'x', 'Size': 16, 'Class': 'h-lh shrink-0 text-sm'}}, with_context = false) }}
+                {%- endif %}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_get(v_p, ['before'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_2}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_3}, with_context = false) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0'}, 'children': c_4}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card-content.html.twig', {'p': {'Class': 'flex flex-col gap-4'}, 'children': c_5}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/card/card.html.twig', {'p': {'Variant': 'muted', 'Class': ui_s(ui_cnv(['h-full', (ui_t(ui_eq(v_density, 'compact')) ? 'gap-4 p-4' : '')])), 'Attrs': ui_attrs(['data-testid', 'side', 'data-side', 'before'])}, 'children': c_6}, with_context = false) }}
+      {%- set c_12 -%}
+        {%- set c_11 -%}
+          {%- set c_7 -%}
+            {{ ui_text(ui_get(v_labels, ['after'])) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_7}, with_context = false) }}
+          {%- set c_10 -%}
+            {%- for v_p in ui_l(v_points) %}
+              {%- set c_9 -%}
+                {%- if ui_t(ui_eq(v_icons, 'show')) %}
+                  {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'check', 'Size': 16, 'Class': 'h-lh shrink-0 text-sm'}}, with_context = false) }}
+                {%- endif %}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_get(v_p, ['after'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_8}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_9}, with_context = false) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0'}, 'children': c_10}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card-content.html.twig', {'p': {'Class': 'flex flex-col gap-4'}, 'children': c_11}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/card/card.html.twig', {'p': {'Variant': 'default', 'Class': ui_s(ui_cnv(['h-full', (ui_t(ui_eq(v_density, 'compact')) ? 'gap-4 p-4' : '')])), 'Attrs': ui_attrs(['data-testid', 'side', 'data-side', 'after'])}, 'children': c_12}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-2', 'Class': 'items-stretch gap-4', 'Attrs': ui_attrs(['data-testid', 'sides'])}, 'children': c_13}, with_context = false) }}
+  {%- else %}
+    {%- set c_20 -%}
+      {%- for v_p in ui_l(v_points) %}
+        {%- set c_19 -%}
+          {%- set c_14 -%}
+            {{ ui_text(ui_get(v_p, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_14}, with_context = false) }}
+          {%- set c_16 -%}
+            {%- if ui_t(ui_eq(v_icons, 'show')) %}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'x', 'Size': 16, 'Class': 'h-lh shrink-0 text-sm text-muted-foreground'}}, with_context = false) }}
+            {%- endif %}
+            {%- set c_15 -%}
+              {{ ui_text(ui_get(v_p, ['before'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_15}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'start'}, 'children': c_16}, with_context = false) }}
+          {%- set c_18 -%}
+            {%- if ui_t(ui_eq(v_icons, 'show')) %}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'check', 'Size': 16, 'Class': 'h-lh shrink-0 text-sm text-primary'}}, with_context = false) }}
+            {%- endif %}
+            {%- set c_17 -%}
+              {{ ui_text(ui_get(v_p, ['after'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_17}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'start'}, 'children': c_18}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-3', 'Class': ui_s(ui_cnv(['items-center gap-4', 'rounded bg-card inset-ring inset-ring-border p-4'])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_19}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'rows'])}, 'children': c_20}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_21}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/bento-grid.html.twig b/packages/twig/ui/blocks/bento-grid.html.twig
new file mode 100644
index 0000000..9a1bc6c
--- /dev/null
+++ b/packages/twig/ui/blocks/bento-grid.html.twig
@@ -0,0 +1,44 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/bento-grid.json
+    Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in the large tiles), tone, density.
+    Props (p): id, title, tiles, empty, layout, media, tone, density, landmarkLabel. -#}
+{%- set k_SPAN = {'large': 'md:col-span-2 md:row-span-2', 'wide': 'md:col-span-2', 'small': ''} -%}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_tiles = (p.tiles ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_layout = (p.layout ?? 'bento') -%}
+{%- set v_media = (p.media ?? 'none') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_6 -%}
+  {%- if ui_t(ui_eq(ui_len(v_tiles), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layout-dashboard', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_5 -%}
+      {%- for v_tile in ui_l(v_tiles) %}
+        {%- set c_4 -%}
+          {%- set c_3 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_tile, ['icon'])), 'Size': 24}}, with_context = false) }}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_tile, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_tile, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+            {%- if ui_t(ui_and([ui_eq(v_media, 'image'), ui_or([ui_eq(ui_get(v_tile, ['size']), 'large'), ui_eq(v_layout, 'even')])])) %}
+              {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_tile, ['title']), 'ratio': '4/3', 'className': ui_cnv(['mt-auto'])}}, with_context = false) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ include('ui/card/card-content.html.twig', {'p': {'Class': 'flex h-full flex-col gap-4'}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card.html.twig', {'p': {'Variant': 'default', 'Class': ui_s(ui_cnv(['h-full overflow-hidden', (ui_t(ui_eq(v_density, 'compact')) ? 'gap-4 p-4' : ''), (ui_t(ui_eq(v_layout, 'bento')) ? ui_at(k_SPAN, ui_get(v_tile, ['size'])) : '')])), 'Attrs': ui_attrs(['data-testid', 'item', 'data-size', (ui_t(ui_eq(v_layout, 'bento')) ? ui_get(v_tile, ['size']) : 'even')])}, 'children': c_4}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-4', 'Class': 'auto-rows-fr gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_5}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/bottom-nav.html.twig b/packages/twig/ui/blocks/bottom-nav.html.twig
new file mode 100644
index 0000000..8001b19
--- /dev/null
+++ b/packages/twig/ui/blocks/bottom-nav.html.twig
@@ -0,0 +1,32 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/bottom-nav.json
+    An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show, hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.
+    Props (p): label, tabs, current, labels, position, tone, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_tabs = (p.tabs ?? null) -%}
+{%- set v_current = (p.current ?? '') -%}
+{%- set v_labels = (p.labels ?? 'show') -%}
+{%- set v_position = (p.position ?? 'static') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(v_tabs), 0)) %}
+  {%- set c_5 -%}
+    {%- set c_4 -%}
+      {%- for v_tab in ui_l(v_tabs) %}
+        {%- set c_3 -%}
+          {%- set c_2 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_tab, ['icon'])), 'Size': 20}}, with_context = false) }}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_tab, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_labels, 'hide')) ? 'sr-only' : ''))}, 'children': c_1}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_tab, ['href']), 'className': ui_cnv([ui_cnv(['flex flex-col items-center gap-2 py-2 text-xs', (ui_t(ui_eq(ui_get(v_tab, ['id']), v_current)) ? 'font-semibold text-primary' : 'text-muted-foreground')])]), 'current': ui_eq(ui_get(v_tab, ['id']), v_current), 'testid': 'item'}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_3}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 grid list-none grid-flow-col auto-cols-fr p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_4}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'nav', 'Class': ui_s(ui_cnv(['mx-auto w-full max-w-md border-t border-border', (ui_t(ui_eq(v_tone, 'muted')) ? 'bg-muted' : 'bg-background'), (ui_t(ui_eq(v_position, 'sticky')) ? 'sticky bottom-0 z-40' : '')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', 'bottom-nav', 'data-position', v_position])}, 'children': c_5}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/bulk-bar.html.twig b/packages/twig/ui/blocks/bulk-bar.html.twig
new file mode 100644
index 0000000..6ed5a21
--- /dev/null
+++ b/packages/twig/ui/blocks/bulk-bar.html.twig
@@ -0,0 +1,21 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/bulk-bar.json
+    The "N selected" bar of a list: a count, a clear button and the bulk actions (children). All text comes in through props.
+    Props (p): label, clearLabel, className; children: markup. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_clearLabel = (p.clearLabel ?? null) -%}
+{%- set c_4 -%}
+  {%- set c_1 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'x', 'Size': 16}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(v_clearLabel), 'Class': 'text-background hover:bg-background/15 hover:text-background'}, 'children': c_1}, with_context = false) }}
+  {%- set c_2 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Attrs': ui_attrs(['data-testid', 'bulk-count'])}, 'children': c_2}, with_context = false) }}
+  {%- set c_3 -%}
+    {{ (children ?? '')|raw }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'ml-auto flex flex-wrap items-center gap-2'}, 'children': c_3}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'region', 'aria-label', v_label, 'aria-live', 'polite', 'data-slot', 'bulk-bar', 'data-testid', 'bulk-bar'])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/cart-drawer.html.twig b/packages/twig/ui/blocks/cart-drawer.html.twig
new file mode 100644
index 0000000..225ed5a
--- /dev/null
+++ b/packages/twig/ui/blocks/cart-drawer.html.twig
@@ -0,0 +1,55 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-drawer.json
+    The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).
+    Props (p): id, lines, rows, labels, drawer, state, media, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_lines = (p.lines ?? null) -%}
+{%- set v_rows = (p.rows ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_drawer = (p.drawer ?? null) -%}
+{%- set v_state = (p.state ?? 'filled') -%}
+{%- set v_media = (p.media ?? 'image') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_11 -%}
+  {%- set c_10 -%}
+    {%- set c_9 -%}
+      {%- set c_1 -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'h-8 w-48 rounded bg-background'}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'h-40 rounded bg-background'}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'h-40 rounded bg-background'}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'hidden flex-1 flex-col gap-4 p-8 sm:flex', 'Attrs': ui_attrs(['aria-hidden', 'true'])}, 'children': c_1}, with_context = false) }}
+      {%- set c_8 -%}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_drawer, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': 'lg', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'x', 'Size': 16}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_drawer, ['close']))}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'border-b border-border p-4'}, 'children': c_4}, with_context = false) }}
+        {%- if ui_t(ui_or([ui_eq(v_state, 'empty'), ui_eq(ui_len(v_lines), 0)])) %}
+          {%- set c_7 -%}
+            {%- set f_5 -%}
+              {%- set c_6 -%}
+                {{ ui_text(ui_get(v_drawer, ['browse'])) }}
+              {%- endset -%}
+              {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default'}, 'children': c_6}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'shopping-bag', 'title': ui_get(v_drawer, ['empty']), 'text': ui_get(v_drawer, ['emptyText']), 'action': f_5}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex flex-1 flex-col justify-center p-4', 'Attrs': ui_attrs(['data-testid', 'empty'])}, 'children': c_7}, with_context = false) }}
+        {%- else %}
+          {{ include('blocks/drawer-lines.html.twig', {'p': {'field': ui_tpl('{0}-qty', [v_id]), 'lines': v_lines, 'rows': v_rows, 'labels': v_labels, 'drawer': v_drawer, 'media': v_media}}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex w-full flex-col bg-background shadow-lg sm:max-w-sm', 'Attrs': ui_attrs(['role', 'group', 'aria-label', ui_get(v_drawer, ['title']), 'data-testid', 'drawer'])}, 'children': c_8}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border'}, 'children': c_9}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': 'py-8', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, ui_get(v_drawer, ['title'])]), 'data-testid', 'section'])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/cart-list.html.twig b/packages/twig/ui/blocks/cart-list.html.twig
new file mode 100644
index 0000000..c285b8c
--- /dev/null
+++ b/packages/twig/ui/blocks/cart-list.html.twig
@@ -0,0 +1,61 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-list.json
+    The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button. Axes: layout (table, cards), media (image, none), density, tone.
+    Props (p): id, title, lines, empty, labels, layout, media, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lines = (p.lines ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'table') -%}
+{%- set v_media = (p.media ?? 'image') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_10 -%}
+  {%- if ui_t(ui_eq(ui_len(v_lines), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'shopping-cart', 'title': v_empty}}, with_context = false) }}
+  {%- elseif ui_t(ui_eq(v_layout, 'table')) %}
+    {{ include('blocks/cart-table.html.twig', {'p': {'field': ui_tpl('{0}-qty', [v_id]), 'lines': v_lines, 'labels': v_labels, 'media': v_media, 'density': v_density}}, with_context = false) }}
+  {%- else %}
+    {%- set c_9 -%}
+      {%- for v_line in ui_l(v_lines) %}
+        {%- set c_8 -%}
+          {%- set c_7 -%}
+            {%- if ui_t(ui_eq(v_media, 'image')) %}
+              {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['size-16 shrink-0'])}}, with_context = false) }}
+            {%- endif %}
+            {%- set c_4 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_line, ['name'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_line, ['variant'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_money(ui_get(v_line, ['price']), ui_get(v_line, ['currency']))) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_3}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'min-w-40 flex-1'}, 'children': c_4}, with_context = false) }}
+            {{ include('blocks/number-field.html.twig', {'p': {'value': ui_str(ui_get(v_line, ['qty'])), 'name': ui_tpl('{0}-qty-{1}', [v_id, ui_get(v_line, ['id'])]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}, with_context = false) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'bold'}, 'children': c_5}, with_context = false) }}
+            {%- set c_6 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'x', 'Size': 16}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['remove'])), 'Attrs': ui_attrs(['data-testid', 'remove'])}, 'children': c_6}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/card/card-content.html.twig', {'p': {'Class': 'flex flex-wrap items-center gap-4'}, 'children': c_7}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card.html.twig', {'p': {'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'cart-cards'])}, 'children': c_9}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_10}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/cart-summary-card.html.twig b/packages/twig/ui/blocks/cart-summary-card.html.twig
new file mode 100644
index 0000000..659c6f8
--- /dev/null
+++ b/packages/twig/ui/blocks/cart-summary-card.html.twig
@@ -0,0 +1,117 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-summary-card.json
+    The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.
+    Props (p): lines, rows, promos, labels, items, promo, field, progress, value. -#}
+{%- set v_lines = (p.lines ?? null) -%}
+{%- set v_rows = (p.rows ?? null) -%}
+{%- set v_promos = (p.promos ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_items = (p.items ?? 'hide') -%}
+{%- set v_promo = (p.promo ?? 'show') -%}
+{%- set v_field = (p.field ?? 'promo') -%}
+{%- set v_progress = (p.progress ?? 'show') -%}
+{%- set v_value = (p.value ?? 70) -%}
+{%- set c_24 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['title'])) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': 'lg', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['items']), [ui_str(ui_len(v_lines))])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'baseline', 'Justify': 'between'}, 'children': c_3}, with_context = false) }}
+  {%- if ui_t(ui_and([ui_eq(v_items, 'show'), ui_gt(ui_len(v_lines), 0)])) %}
+    {%- set c_9 -%}
+      {%- for v_line in ui_l(v_lines) %}
+        {%- set c_8 -%}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['size-12 shrink-0'])}}, with_context = false) }}
+          {%- set c_6 -%}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_line, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_tpl('{0} x {1}', [ui_get(v_line, ['qty']), ui_money(ui_get(v_line, ['price']), ui_get(v_line, ['currency']))])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'flex-1'}, 'children': c_6}, with_context = false) }}
+          {%- set c_7 -%}
+            {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'font-medium'}, 'children': c_7}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center gap-4 text-sm'}, 'children': c_8}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-4', 'Attrs': ui_attrs(['data-testid', 'summary-lines'])}, 'children': c_9}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_promo, 'show')) %}
+    {%- set c_15 -%}
+      {%- set c_11 -%}
+        {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': ui_s(v_field), 'AriaLabel': ui_s(ui_get(v_labels, ['promo'])), 'Placeholder': ui_s(ui_get(v_labels, ['promo'])), 'Class': 'min-w-0 flex-1'}}, with_context = false) }}
+        {%- set c_10 -%}
+          {{ ui_text(ui_get(v_labels, ['apply'])) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button'}, 'children': c_10}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_11}, with_context = false) }}
+      {%- if ui_t(ui_gt(ui_len(v_promos), 0)) %}
+        {%- set c_14 -%}
+          {%- set c_12 -%}
+            {{ ui_text(ui_get(v_labels, ['codes'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_12}, with_context = false) }}
+          {%- for v_c in ui_l(v_promos) %}
+            {%- set c_13 -%}
+              {{ ui_text(ui_get(v_c, ['code'])) }}
+            {%- endset -%}
+            {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'code'])}, 'children': c_13}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_14}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'promo'])}, 'children': c_15}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_progress, 'show')) %}
+    {%- set c_17 -%}
+      {%- set c_16 -%}
+        {{ ui_text(ui_get(v_labels, ['progress'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_16}, with_context = false) }}
+      {{ include('ui/form/progress.html.twig', {'p': {'Value': ui_s(ui_str(v_value)), 'Max': '100', 'Attrs': ui_attrs(['aria-label', ui_get(v_labels, ['progress'])])}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'rounded bg-muted p-4', 'Attrs': ui_attrs(['data-testid', 'progress'])}, 'children': c_17}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_gt(ui_len(v_rows), 0)) %}
+    {%- set c_21 -%}
+      {%- for v_row in ui_l(v_rows) %}
+        {%- set c_20 -%}
+          {%- set c_18 -%}
+            {{ ui_text(ui_get(v_row, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_18}, with_context = false) }}
+          {%- set c_19 -%}
+            {{ ui_text(ui_money(ui_get(v_row, ['amount']), ui_get(v_row, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_19}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/list/list-item.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex items-center justify-between gap-4', (ui_t(ui_get(v_row, ['strong'])) ? 'border-t border-border pt-4 text-base font-bold' : 'text-sm text-muted-foreground')])), 'Attrs': ui_attrs(['data-testid', 'row'])}, 'children': c_20}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2'}, 'children': c_21}, with_context = false) }}
+  {%- endif %}
+  {%- set c_22 -%}
+    {{ ui_text(ui_get(v_labels, ['checkout'])) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'lg', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'checkout'])}, 'children': c_22}, with_context = false) }}
+  {%- set c_23 -%}
+    {{ ui_text(ui_get(v_labels, ['note'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_23}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'summary'])}, 'children': c_24}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/cart-table.html.twig b/packages/twig/ui/blocks/cart-table.html.twig
new file mode 100644
index 0000000..aebbb0a
--- /dev/null
+++ b/packages/twig/ui/blocks/cart-table.html.twig
@@ -0,0 +1,110 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cart-table.json
+    The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a remove button.
+    Props (p): lines, labels, media, density, field. -#}
+{%- set v_lines = (p.lines ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_media = (p.media ?? 'image') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_field = (p.field ?? 'qty') -%}
+{%- set c_23 -%}
+  {%- set c_22 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['caption'])) }}
+    {%- endset -%}
+    {{ include('ui/table/table-caption.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+    {%- set c_9 -%}
+      {%- set c_8 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['product'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_2}, with_context = false) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['price'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'hidden py-2 sm:table-cell'}, 'children': c_3}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['qty'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_4}, with_context = false) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_labels, ['total'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_5}, with_context = false) }}
+        {%- set c_7 -%}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_labels, ['remove'])) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_6}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_7}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/table/table-row.html.twig', {'p': {}, 'children': c_8}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/table/table-head.html.twig', {'p': {}, 'children': c_9}, with_context = false) }}
+    {%- set c_21 -%}
+      {%- for v_line in ui_l(v_lines) %}
+        {%- set c_20 -%}
+          {%- set c_14 -%}
+            {%- set c_13 -%}
+              {%- if ui_t(ui_eq(v_media, 'image')) %}
+                {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['hidden size-14 shrink-0 sm:block'])}}, with_context = false) }}
+              {%- endif %}
+              {%- set c_12 -%}
+                {%- set c_10 -%}
+                  {{ ui_text(ui_get(v_line, ['name'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_10}, with_context = false) }}
+                {%- set c_11 -%}
+                  {{ ui_text(ui_get(v_line, ['variant'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_12}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_13}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {'Class': ui_s(ui_cnv([(ui_t(ui_eq(v_density, 'compact')) ? 'py-2' : 'py-4')]))}, 'children': c_14}, with_context = false) }}
+          {%- set c_15 -%}
+            {{ ui_text(ui_money(ui_get(v_line, ['price']), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'hidden sm:table-cell'}, 'children': c_15}, with_context = false) }}
+          {%- set c_16 -%}
+            {{ include('blocks/number-field.html.twig', {'p': {'value': ui_str(ui_get(v_line, ['qty'])), 'name': ui_tpl('{0}-{1}', [v_field, ui_get(v_line, ['id'])]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {}, 'children': c_16}, with_context = false) }}
+          {%- set c_17 -%}
+            {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'font-semibold'}, 'children': c_17}, with_context = false) }}
+          {%- set c_19 -%}
+            {%- set c_18 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'x', 'Size': 16}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['remove'])), 'Attrs': ui_attrs(['data-testid', 'remove'])}, 'children': c_18}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'text-right'}, 'children': c_19}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/table/table-row.html.twig', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_20}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/table/table-body.html.twig', {'p': {}, 'children': c_21}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/table/table.html.twig', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'cart-table'])}, 'children': c_22}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'w-full overflow-x-auto'}, 'children': c_23}, with_context = false) }}
+{%- if ui_t(ui_gt(ui_len(v_lines), 0)) %}
+  {%- set c_26 -%}
+    {%- set c_24 -%}
+      {{ ui_text(ui_get(v_labels, ['subtotal'])) }}
+      {{ ui_text(' ') }}
+      {{ ui_text(ui_money(ui_sum_by(v_lines, 'price', 'qty'), ui_first_of(v_lines, 'currency'))) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'bold', 'Attrs': ui_attrs(['data-testid', 'subtotal'])}, 'children': c_24}, with_context = false) }}
+    {%- set c_25 -%}
+      {{ ui_text(ui_get(v_labels, ['checkout'])) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Attrs': ui_attrs(['data-testid', 'checkout'])}, 'children': c_25}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'mt-4 flex-wrap border-t border-border pt-4', 'Attrs': ui_attrs(['data-testid', 'cart-footer'])}, 'children': c_26}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/category-nav.html.twig b/packages/twig/ui/blocks/category-nav.html.twig
new file mode 100644
index 0000000..9fda03d
--- /dev/null
+++ b/packages/twig/ui/blocks/category-nav.html.twig
@@ -0,0 +1,72 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/category-nav.json
+    Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon, or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes: layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.
+    Props (p): label, categories, current, layout, count, icon, density, tools, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_categories = (p.categories ?? null) -%}
+{%- set v_current = (p.current ?? 'all') -%}
+{%- set v_layout = (p.layout ?? 'chips') -%}
+{%- set v_count = (p.count ?? 'show') -%}
+{%- set v_icon = (p.icon ?? 'show') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_tools = (p.tools ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_chipLike = ui_or([ui_eq(v_layout, 'chips'), ui_eq(v_layout, 'toolbar')]) -%}
+{%- set v_tiles = ui_eq(v_layout, 'tiles') -%}
+{%- set v_linkShape = (ui_t(v_chipLike) ? 'inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border' : (ui_t(ui_eq(v_layout, 'bar')) ? 'inline-flex items-center gap-2 -mb-px border-b px-1 py-2' : (ui_t(v_tiles) ? 'flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border' : 'inline-flex w-full items-center gap-2 rounded px-3 py-2'))) -%}
+{%- set v_currentLook = (ui_t(v_chipLike) ? 'bg-primary text-primary-foreground' : (ui_t(ui_eq(v_layout, 'bar')) ? 'border-foreground font-semibold' : (ui_t(v_tiles) ? 'inset-ring-foreground font-semibold' : 'bg-muted font-semibold'))) -%}
+{%- set v_otherLook = (ui_t(ui_eq(v_layout, 'bar')) ? 'border-transparent' : '') -%}
+{%- set v_listShape = (ui_t(ui_eq(v_layout, 'sidebar')) ? 'flex flex-col gap-2' : (ui_t(ui_eq(v_layout, 'bar')) ? 'flex flex-wrap gap-2 gap-x-4 border-b border-border' : (ui_t(v_tiles) ? 'grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6' : 'flex flex-wrap gap-2'))) -%}
+{%- set c_11 -%}
+  {%- set c_10 -%}
+    {%- if ui_t(ui_eq(v_layout, 'toolbar')) %}
+      {%- set c_3 -%}
+        {{ include('blocks/search-field.html.twig', {'p': {'value': ui_coalesce([ui_get(v_tools, ['query']), '']), 'label': ui_coalesce([ui_get(v_tools, ['search']), '']), 'placeholder': ui_get(v_tools, ['search'])}}, with_context = false) }}
+        {%- set c_1 -%}
+          {{ include('ui/select/select-option.html.twig', {'p': {'Value': 'sort', 'Label': ui_s(ui_get(v_tools, ['sortValue'])), 'Selected': true}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/select/select.html.twig', {'p': {'Name': 'sort', 'Size': 'sm', 'AriaLabel': ui_s(ui_get(v_tools, ['sort'])), 'Class': 'w-48'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_tools, ['shown'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'mb-4 flex-wrap', 'Attrs': ui_attrs(['data-testid', 'toolbar'])}, 'children': c_3}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_gt(ui_len(v_categories), 0)) %}
+      {%- set c_9 -%}
+        {%- for v_c in ui_l(v_categories) %}
+          {%- set c_8 -%}
+            {%- set c_7 -%}
+              {%- if ui_t(ui_eq(v_icon, 'show')) %}
+                {%- if ui_t(v_tiles) %}
+                  {%- set c_4 -%}
+                    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 20}}, with_context = false) }}
+                  {%- endset -%}
+                  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-10 items-center justify-center rounded bg-muted'}, 'children': c_4}, with_context = false) }}
+                {%- else %}
+                  {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 16}}, with_context = false) }}
+                {%- endif %}
+              {%- endif %}
+              {%- set c_5 -%}
+                {{ ui_text(ui_get(v_c, ['name'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_5}, with_context = false) }}
+              {%- if ui_t(ui_eq(v_count, 'show')) %}
+                {%- set c_6 -%}
+                  {{ ui_text(ui_str(ui_get(v_c, ['count']))) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+              {%- endif %}
+            {%- endset -%}
+            {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_c, ['href']), 'className': ui_cnv([ui_cnv(['text-sm', v_linkShape, (ui_t(ui_eq(ui_get(v_c, ['id']), v_current)) ? v_currentLook : v_otherLook)])]), 'current': ui_eq(ui_get(v_c, ['id']), v_current), 'testid': 'item', 'block': true}, 'children': c_7}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_8}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': ui_s(v_listShape), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_9}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', (ui_t(ui_eq(v_density, 'compact')) ? 'py-2' : 'py-4')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', 'category-nav', 'data-layout', v_layout])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/chart-panel.html.twig b/packages/twig/ui/blocks/chart-panel.html.twig
new file mode 100644
index 0000000..ff9adf7
--- /dev/null
+++ b/packages/twig/ui/blocks/chart-panel.html.twig
@@ -0,0 +1,36 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/chart-panel.json
+    A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart (bars, meters), size (default, compact), tone (default, muted).
+    Props (p): id, title, text, series, empty, summary, percent, chart, size, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_series = (p.series ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_summary = (p.summary ?? null) -%}
+{%- set v_percent = (p.percent ?? null) -%}
+{%- set v_chart = (p.chart ?? 'bars') -%}
+{%- set v_size = (p.size ?? 'default') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {%- set c_2 -%}
+      {%- if ui_t(ui_eq(ui_len(v_series), 0)) %}
+        {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'chart-column', 'title': v_empty}}, with_context = false) }}
+      {%- elseif ui_t(ui_eq(v_chart, 'bars')) %}
+        {{ include('blocks/bar-chart.html.twig', {'p': {'bars': v_series, 'label': v_summary, 'height': (ui_t(ui_eq(v_size, 'compact')) ? 96 : 176)}}, with_context = false) }}
+      {%- else %}
+        {%- set c_1 -%}
+          {%- for v_s in ui_l(v_series) %}
+            {{ include('blocks/meter-row.html.twig', {'p': {'label': ui_get(v_s, ['label']), 'value': ui_get(v_s, ['value']), 'caption': ui_tpl(v_percent, [ui_get(v_s, ['value'])])}}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': ui_s((ui_t(ui_eq(v_size, 'compact')) ? '0' : '2')), 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_1}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('blocks/panel.html.twig', {'p': {'title': v_title, 'description': v_text, 'id': v_id, 'className': ui_cnv([(ui_t(ui_eq(v_tone, 'muted')) ? 'bg-muted' : '')])}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4 py-8', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_3}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : (ui_t(ui_and([v_title, v_id])) ? ui_tpl('{0}-t', [v_id]) : null)), 'data-testid', 'panel-section', 'aria-label', v_landmarkLabel])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/checklist.html.twig b/packages/twig/ui/blocks/checklist.html.twig
new file mode 100644
index 0000000..92e3cd8
--- /dev/null
+++ b/packages/twig/ui/blocks/checklist.html.twig
@@ -0,0 +1,76 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checklist.json
+    An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain), progress (bar, text, none), marker (check, number), tone (default, muted).
+    Props (p): id, title, tasks, empty, progressLabel, layout, progress, marker, detail, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_tasks = (p.tasks ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_progressLabel = (p.progressLabel ?? null) -%}
+{%- set v_layout = (p.layout ?? 'card') -%}
+{%- set v_progress = (p.progress ?? 'bar') -%}
+{%- set v_marker = (p.marker ?? 'check') -%}
+{%- set v_detail = (p.detail ?? 'always') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_len(v_tasks), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'list-checks', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_11 -%}
+      {%- if ui_t(ui_eq(v_progress, 'bar')) %}
+        {{ include('ui/form/progress.html.twig', {'p': {'Value': ui_s(ui_str(ui_round(ui_div(ui_mul(ui_count(v_tasks, 'done'), 100), ui_len(v_tasks))))), 'Max': '100', 'Attrs': ui_attrs(['aria-label', ui_tpl(v_progressLabel, [ui_count(v_tasks, 'done'), ui_len(v_tasks)])])}}, with_context = false) }}
+      {%- endif %}
+      {%- if ui_t(ui_eq(v_progress, 'text')) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_tpl(v_progressLabel, [ui_count(v_tasks, 'done'), ui_len(v_tasks)])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'progress-text'])}, 'children': c_1}, with_context = false) }}
+      {%- endif %}
+      {%- set c_10 -%}
+        {%- for v_task in ui_l(v_tasks) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_9 -%}
+            {%- if ui_t(ui_eq(v_marker, 'number')) %}
+              {%- set c_2 -%}
+                {{ ui_text(ui_str(ui_add(v_i, 1))) }}
+              {%- endset -%}
+              {{ include('ui/iconbadge/icon-badge.html.twig', {'p': {'Variant': ui_s((ui_t(ui_get(v_task, ['done'])) ? 'primary' : 'outline')), 'Size': 'xs'}, 'children': c_2}, with_context = false) }}
+            {%- else %}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s((ui_t(ui_get(v_task, ['done'])) ? 'circle-check' : 'circle')), 'Size': 24, 'Class': ui_s((ui_t(ui_get(v_task, ['done'])) ? 'shrink-0 text-primary' : 'shrink-0 text-muted-foreground'))}}, with_context = false) }}
+            {%- endif %}
+            {%- if ui_t(ui_eq(v_detail, 'expand')) %}
+              {%- set c_5 -%}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_get(v_task, ['title'])) }}
+                {%- endset -%}
+                {{ include('ui/disclosure/summary.html.twig', {'p': {'Variant': 'ghost'}, 'children': c_3}, with_context = false) }}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_task, ['text'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'pb-2 text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/disclosure/disclosure.html.twig', {'p': {'Variant': 'ghost', 'Class': 'flex-1', 'Attrs': ui_attrs(['data-testid', 'task-detail'])}, 'children': c_5}, with_context = false) }}
+            {%- else %}
+              {%- set c_8 -%}
+                {%- set c_6 -%}
+                  {{ ui_text(ui_get(v_task, ['title'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_6}, with_context = false) }}
+                {%- set c_7 -%}
+                  {{ ui_text(ui_get(v_task, ['text'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_8}, with_context = false) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'item', 'data-done', ui_str(ui_get(v_task, ['done']))])}, 'children': c_9}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_10}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s((ui_t(ui_eq(v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')), 'Attrs': ui_attrs(['data-testid', 'checklist'])}, 'children': c_11}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'measure': '2xl', 'landmarkLabel': v_landmarkLabel}, 'children': c_12}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/checkout-form.html.twig b/packages/twig/ui/blocks/checkout-form.html.twig
new file mode 100644
index 0000000..57be623
--- /dev/null
+++ b/packages/twig/ui/blocks/checkout-form.html.twig
@@ -0,0 +1,93 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checkout-form.json
+    A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps, beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards: each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.
+    Props (p): id, title, days, payments, lines, rows, promos, labels, totals, layout, summary, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? '') -%}
+{%- set v_days = (p.days ?? null) -%}
+{%- set v_payments = (p.payments ?? null) -%}
+{%- set v_lines = (p.lines ?? null) -%}
+{%- set v_rows = (p.rows ?? null) -%}
+{%- set v_promos = (p.promos ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_totals = (p.totals ?? null) -%}
+{%- set v_layout = (p.layout ?? 'cards') -%}
+{%- set v_summary = (p.summary ?? 'aside') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_19 -%}
+  {%- set c_18 -%}
+    {%- set c_16 -%}
+      {%- set c_5 -%}
+        {%- set c_4 -%}
+          {%- set c_1 -%}
+            {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'name', 'Autocomplete': 'name', 'Attrs': ui_attrs(['id', ui_tpl('{0}-name', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['name']), 'htmlFor': ui_tpl('{0}-name', [v_id])}, 'children': c_1}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ include('ui/input/input.html.twig', {'p': {'Type': 'tel', 'Name': 'phone', 'Autocomplete': 'tel', 'Attrs': ui_attrs(['id', ui_tpl('{0}-phone', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['phone']), 'htmlFor': ui_tpl('{0}-phone', [v_id])}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ include('ui/input/input.html.twig', {'p': {'Type': 'email', 'Name': 'email', 'Autocomplete': 'email', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['email']), 'htmlFor': ui_tpl('{0}-email', [v_id])}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-2', 'Class': 'gap-4'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('blocks/checkout-step.html.twig', {'p': {'number': '1', 'title': ui_get(v_labels, ['contacts']), 'text': ui_get(v_labels, ['contactsText']), 'layout': v_layout}, 'children': c_5}, with_context = false) }}
+      {%- set c_13 -%}
+        {%- set c_6 -%}
+          {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'street', 'Autocomplete': 'address-line1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-street', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['street']), 'htmlFor': ui_tpl('{0}-street', [v_id])}, 'children': c_6}, with_context = false) }}
+        {%- set c_11 -%}
+          {%- set c_7 -%}
+            {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'house', 'Attrs': ui_attrs(['id', ui_tpl('{0}-house', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['house']), 'htmlFor': ui_tpl('{0}-house', [v_id])}, 'children': c_7}, with_context = false) }}
+          {%- set c_8 -%}
+            {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'flat', 'Attrs': ui_attrs(['id', ui_tpl('{0}-flat', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['flat']), 'htmlFor': ui_tpl('{0}-flat', [v_id])}, 'children': c_8}, with_context = false) }}
+          {%- set c_9 -%}
+            {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'entrance', 'Attrs': ui_attrs(['id', ui_tpl('{0}-entrance', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['entrance']), 'htmlFor': ui_tpl('{0}-entrance', [v_id])}, 'children': c_9}, with_context = false) }}
+          {%- set c_10 -%}
+            {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'floor', 'Attrs': ui_attrs(['id', ui_tpl('{0}-floor', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['floor']), 'htmlFor': ui_tpl('{0}-floor', [v_id])}, 'children': c_10}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '2-4', 'Class': 'gap-4'}, 'children': c_11}, with_context = false) }}
+        {%- set c_12 -%}
+          {{ include('ui/textarea/textarea.html.twig', {'p': {'Rows': 4, 'Name': 'comment', 'Attrs': ui_attrs(['id', ui_tpl('{0}-comment', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['comment']), 'htmlFor': ui_tpl('{0}-comment', [v_id])}, 'children': c_12}, with_context = false) }}
+      {%- endset -%}
+      {{ include('blocks/checkout-step.html.twig', {'p': {'number': '2', 'title': ui_get(v_labels, ['address']), 'text': ui_get(v_labels, ['addressText']), 'layout': v_layout}, 'children': c_13}, with_context = false) }}
+      {%- set c_14 -%}
+        {%- if ui_t(ui_gt(ui_len(v_days), 0)) %}
+          {{ include('blocks/slot-grid.html.twig', {'p': {'days': v_days, 'name': ui_tpl('{0}-slot', [v_id]), 'item': 'plain'}}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('blocks/checkout-step.html.twig', {'p': {'number': '3', 'title': ui_get(v_labels, ['slot']), 'text': ui_get(v_labels, ['slotText']), 'layout': v_layout}, 'children': c_14}, with_context = false) }}
+      {%- set c_15 -%}
+        {%- if ui_t(ui_gt(ui_len(v_payments), 0)) %}
+          {{ include('blocks/payment-options.html.twig', {'p': {'payments': v_payments, 'name': ui_tpl('{0}-payment', [v_id]), 'checked': 'payment-card'}}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('blocks/checkout-step.html.twig', {'p': {'number': '4', 'title': ui_get(v_labels, ['payment']), 'text': ui_get(v_labels, ['paymentText']), 'layout': v_layout}, 'children': c_15}, with_context = false) }}
+      {{ include('blocks/checkout-submit.html.twig', {'p': {'id': v_id, 'consent': ui_get(v_labels, ['consent']), 'submit': ui_get(v_labels, ['submit']), 'legal': ui_get(v_labels, ['legal'])}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/form/form.html.twig', {'p': {'Method': 'dialog', 'Class': ui_s((ui_t(ui_eq(v_summary, 'aside')) ? 'flex flex-col gap-6 lg:col-span-2' : 'flex flex-col gap-6 lg:col-span-3')), 'Attrs': ui_attrs(['data-testid', 'checkout-form'])}, 'children': c_16}, with_context = false) }}
+    {%- if ui_t(ui_eq(v_summary, 'aside')) %}
+      {%- set c_17 -%}
+        {{ include('blocks/cart-summary-card.html.twig', {'p': {'field': ui_tpl('{0}-promo', [v_id]), 'lines': v_lines, 'rows': v_rows, 'promos': v_promos, 'labels': v_totals, 'items': 'show'}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'lg:sticky lg:top-8', 'Attrs': ui_attrs(['data-testid', 'aside'])}, 'children': c_17}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3'}, 'children': c_18}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_19}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/checkout-step.html.twig b/packages/twig/ui/blocks/checkout-step.html.twig
new file mode 100644
index 0000000..74cb464
--- /dev/null
+++ b/packages/twig/ui/blocks/checkout-step.html.twig
@@ -0,0 +1,34 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checkout-step.json
+    One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`). Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).
+    Props (p): number, title, text, layout; children: markup. -#}
+{%- set v_number = (p.number ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? '') -%}
+{%- set v_layout = (p.layout ?? 'cards') -%}
+{%- set c_6 -%}
+  {%- set c_5 -%}
+    {%- if ui_t(ui_eq(v_layout, 'numbered')) %}
+      {%- set c_1 -%}
+        {{ ui_text(v_number) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground'}, 'children': c_1}, with_context = false) }}
+    {%- endif %}
+    {%- set c_4 -%}
+      {%- set c_2 -%}
+        {{ ui_text(v_title) }}
+      {%- endset -%}
+      {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': 'lg', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+      {%- if ui_t(v_text) %}
+        {%- set c_3 -%}
+          {{ ui_text(v_text) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_4}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start'}, 'children': c_5}, with_context = false) }}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch', 'Class': ui_s((ui_t(ui_eq(v_layout, 'cards')) ? 'rounded bg-card inset-ring inset-ring-border p-6' : 'border-t border-border pt-6')), 'Attrs': ui_attrs(['data-testid', 'step'])}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/checkout-submit.html.twig b/packages/twig/ui/blocks/checkout-submit.html.twig
new file mode 100644
index 0000000..ce4d6fe
--- /dev/null
+++ b/packages/twig/ui/blocks/checkout-submit.html.twig
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/checkout-submit.json
+    The end of the checkout form: the consent checkbox, the submit button and the legal line.
+    Props (p): id, consent, submit, legal. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_consent = (p.consent ?? null) -%}
+{%- set v_submit = (p.submit ?? null) -%}
+{%- set v_legal = (p.legal ?? null) -%}
+{%- set c_5 -%}
+  {%- set c_2 -%}
+    {{ include('ui/checkbox/checkbox.html.twig', {'p': {'Name': 'consent', 'Attrs': ui_attrs(['id', ui_tpl('{0}-consent', [v_id])])}}, with_context = false) }}
+    {%- set c_1 -%}
+      {{ ui_text(v_consent) }}
+    {%- endset -%}
+    {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-consent', [v_id])), 'Class': 'text-sm'}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-fit', '']))}, 'children': c_2}, with_context = false) }}
+  {%- set c_3 -%}
+    {{ ui_text(v_submit) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'lg', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_3}, with_context = false) }}
+  {%- set c_4 -%}
+    {{ ui_text(v_legal) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'start'}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/code-window.html.twig b/packages/twig/ui/blocks/code-window.html.twig
new file mode 100644
index 0000000..03510c5
--- /dev/null
+++ b/packages/twig/ui/blocks/code-window.html.twig
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/code-window.json
+    A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).
+    Props (p): title, prompt, lines, className. -#}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_prompt = (p.prompt ?? null) -%}
+{%- set v_lines = (p.lines ?? null) -%}
+{%- set c_7 -%}
+  {%- set c_2 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex items-center border-b border-border px-4 py-2'}, 'children': c_2}, with_context = false) }}
+  {%- set c_6 -%}
+    {%- for v_line in ui_l(v_lines) %}
+      {%- set c_5 -%}
+        {%- if ui_t(ui_eq(ui_get(v_line, ['kind']), 'command')) %}
+          {%- set c_3 -%}
+            {{ ui_text(v_prompt) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'select-none text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+        {%- endif %}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_line, ['text'])) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/list/list-item.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex gap-2', (ui_t(ui_eq(ui_get(v_line, ['kind']), 'command')) ? 'text-foreground' : 'text-muted-foreground')])), 'Attrs': ui_attrs(['data-kind', ui_get(v_line, ['kind'])])}, 'children': c_5}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-4 font-mono text-sm'}, 'children': c_6}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'group', 'aria-label', v_title, 'data-slot', 'code-window'])}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/compare-mark.html.twig b/packages/twig/ui/blocks/compare-mark.html.twig
new file mode 100644
index 0000000..63fdad7
--- /dev/null
+++ b/packages/twig/ui/blocks/compare-mark.html.twig
@@ -0,0 +1,33 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/compare-mark.json
+    One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen readers), any other value is shown as text.
+    Props (p): value, yes, no. -#}
+{%- set v_value = (p.value ?? null) -%}
+{%- set v_yes = (p.yes ?? null) -%}
+{%- set v_no = (p.no ?? null) -%}
+{%- if ui_t(ui_eq(v_value, 'yes')) %}
+  {%- set c_2 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'check', 'Size': 16, 'Class': 'text-foreground'}}, with_context = false) }}
+    {%- set c_1 -%}
+      {{ ui_text(v_yes) }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'inline-flex items-center gap-2', 'Attrs': ui_attrs(['data-mark', 'yes'])}, 'children': c_2}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_eq(v_value, 'no')) %}
+  {%- set c_4 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'minus', 'Size': 16}}, with_context = false) }}
+    {%- set c_3 -%}
+      {{ ui_text(v_no) }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_3}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'inline-flex items-center gap-2 text-muted-foreground', 'Attrs': ui_attrs(['data-mark', 'no'])}, 'children': c_4}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([not (ui_eq(v_value, 'yes')), not (ui_eq(v_value, 'no'))])) %}
+  {%- set c_5 -%}
+    {{ ui_text(v_value) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_5}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/comparison-table.html.twig b/packages/twig/ui/blocks/comparison-table.html.twig
new file mode 100644
index 0000000..cc2c1d6
--- /dev/null
+++ b/packages/twig/ui/blocks/comparison-table.html.twig
@@ -0,0 +1,76 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/comparison-table.json
+    Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle column), tone, density.
+    Props (p): id, title, rows, empty, labels, highlight, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_rows = (p.rows ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_highlight = (p.highlight ?? 'none') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_16 -%}
+  {%- if ui_t(ui_eq(ui_len(v_rows), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'table', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_15 -%}
+      {%- set c_14 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_labels, ['caption'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-caption.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+        {%- set c_7 -%}
+          {%- set c_6 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_labels, ['feature'])) }}
+            {%- endset -%}
+            {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-4'}, 'children': c_2}, with_context = false) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_labels, ['a'])) }}
+            {%- endset -%}
+            {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-4'}, 'children': c_3}, with_context = false) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_labels, ['b'])) }}
+            {%- endset -%}
+            {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': ui_s(ui_cnv(['py-4', (ui_t(ui_eq(v_highlight, 'middle')) ? 'bg-muted' : '')])), 'Attrs': ui_attrs(['data-highlight', (ui_t(ui_eq(v_highlight, 'middle')) ? 'true' : 'false')])}, 'children': c_4}, with_context = false) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_labels, ['c'])) }}
+            {%- endset -%}
+            {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-4'}, 'children': c_5}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/table/table-row.html.twig', {'p': {}, 'children': c_6}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head.html.twig', {'p': {}, 'children': c_7}, with_context = false) }}
+        {%- set c_13 -%}
+          {%- for v_row in ui_l(v_rows) %}
+            {%- set c_12 -%}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_row, ['label'])) }}
+              {%- endset -%}
+              {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'row', 'Class': ui_s(ui_cnv(['font-medium', (ui_t(ui_eq(v_density, 'compact')) ? 'py-2' : 'py-4')]))}, 'children': c_8}, with_context = false) }}
+              {%- set c_9 -%}
+                {{ include('blocks/compare-mark.html.twig', {'p': {'value': ui_get(v_row, ['a']), 'yes': ui_get(v_labels, ['yes']), 'no': ui_get(v_labels, ['no'])}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/table/table-cell.html.twig', {'p': {'Class': ui_s(ui_cnv([(ui_t(ui_eq(v_density, 'compact')) ? 'py-2' : 'py-4')]))}, 'children': c_9}, with_context = false) }}
+              {%- set c_10 -%}
+                {{ include('blocks/compare-mark.html.twig', {'p': {'value': ui_get(v_row, ['b']), 'yes': ui_get(v_labels, ['yes']), 'no': ui_get(v_labels, ['no'])}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/table/table-cell.html.twig', {'p': {'Class': ui_s(ui_cnv([(ui_t(ui_eq(v_density, 'compact')) ? 'py-2' : 'py-4'), (ui_t(ui_eq(v_highlight, 'middle')) ? 'bg-muted font-semibold' : '')]))}, 'children': c_10}, with_context = false) }}
+              {%- set c_11 -%}
+                {{ include('blocks/compare-mark.html.twig', {'p': {'value': ui_get(v_row, ['c']), 'yes': ui_get(v_labels, ['yes']), 'no': ui_get(v_labels, ['no'])}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/table/table-cell.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_density, 'compact')) ? 'py-2' : 'py-4'))}, 'children': c_11}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/table/table-row.html.twig', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_12}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/table/table-body.html.twig', {'p': {}, 'children': c_13}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/table/table.html.twig', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'compare'])}, 'children': c_14}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'relative w-full overflow-x-auto'}, 'children': c_15}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_16}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/contact-form.html.twig b/packages/twig/ui/blocks/contact-form.html.twig
new file mode 100644
index 0000000..70bb732
--- /dev/null
+++ b/packages/twig/ui/blocks/contact-form.html.twig
@@ -0,0 +1,81 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/contact-form.json
+    A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone (default, muted).
+    Props (p): id, title, text, labels, details, layout, fields, terms, level, page, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_details = (p.details ?? null) -%}
+{%- set v_layout = (p.layout ?? 'single') -%}
+{%- set v_fields = (p.fields ?? 'full') -%}
+{%- set v_terms = (p.terms ?? 'hide') -%}
+{%- set v_level = (p.level ?? 2) -%}
+{%- set v_page = (p.page ?? 'section') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_15 -%}
+  {%- set c_14 -%}
+    {%- set c_8 -%}
+      {%- if ui_t(ui_eq(v_fields, 'full')) %}
+        {%- set c_1 -%}
+          {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'name', 'Autocomplete': 'name', 'Attrs': ui_attrs(['id', ui_tpl('{0}-name', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['name']), 'htmlFor': ui_tpl('{0}-name', [v_id])}, 'children': c_1}, with_context = false) }}
+      {%- endif %}
+      {%- set c_2 -%}
+        {{ include('ui/input/input.html.twig', {'p': {'Type': 'email', 'Name': 'email', 'Autocomplete': 'email', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['email']), 'htmlFor': ui_tpl('{0}-email', [v_id])}, 'children': c_2}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_fields, 'full')) %}
+        {%- set c_3 -%}
+          {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'subject', 'Attrs': ui_attrs(['id', ui_tpl('{0}-subject', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['subject']), 'htmlFor': ui_tpl('{0}-subject', [v_id])}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+      {%- set c_4 -%}
+        {{ include('ui/textarea/textarea.html.twig', {'p': {'Rows': 4, 'Name': 'message', 'Attrs': ui_attrs(['id', ui_tpl('{0}-message', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['message']), 'htmlFor': ui_tpl('{0}-message', [v_id])}, 'children': c_4}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_terms, 'show')) %}
+        {%- set c_6 -%}
+          {{ include('ui/checkbox/checkbox.html.twig', {'p': {'Name': 'consent', 'Attrs': ui_attrs(['id', ui_tpl('{0}-consent', [v_id])])}}, with_context = false) }}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_labels, ['consent'])) }}
+          {%- endset -%}
+          {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-consent', [v_id])), 'Class': 'text-sm'}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-fit', '']))}, 'children': c_6}, with_context = false) }}
+      {%- endif %}
+      {%- set c_7 -%}
+        {{ ui_text(ui_get(v_labels, ['submit'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Class': 'w-fit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_7}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/form/form.html.twig', {'p': {'Method': 'dialog', 'Class': 'w-full gap-4', 'Attrs': ui_attrs(['data-testid', 'contact-form'])}, 'children': c_8}, with_context = false) }}
+    {%- if ui_t(ui_and([ui_eq(v_layout, 'split'), ui_gt(ui_len(v_details), 0)])) %}
+      {%- set c_13 -%}
+        {%- for v_d in ui_l(v_details) %}
+          {%- set c_12 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_d, ['icon'])), 'Size': 20}}, with_context = false) }}
+            {%- set c_11 -%}
+              {%- set c_9 -%}
+                {{ ui_text(ui_get(v_d, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_9}, with_context = false) }}
+              {%- set c_10 -%}
+                {{ ui_text(ui_get(v_d, ['text'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_10}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_11}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'detail'])}, 'children': c_12}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Attrs': ui_attrs(['data-testid', 'details'])}, 'children': c_13}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'split')) ? '1-2' : '1')), 'Class': 'items-start gap-8'}, 'children': c_14}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'heading': {'level': v_level}, 'tone': v_tone, 'density': (ui_t(ui_eq(v_page, 'full')) ? 'roomy' : 'default'), 'align': (ui_t(ui_eq(v_page, 'full')) ? 'center' : 'start'), 'measure': (ui_t(ui_eq(v_layout, 'single')) ? 'xl' : 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_15}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/cookie-banner.html.twig b/packages/twig/ui/blocks/cookie-banner.html.twig
new file mode 100644
index 0000000..768c436
--- /dev/null
+++ b/packages/twig/ui/blocks/cookie-banner.html.twig
@@ -0,0 +1,55 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cookie-banner.json
+    A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings. Axes: layout (bar, card), actions (two, three), tone (default, muted).
+    Props (p): id, title, text, accept, decline, settings, layout, actions, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_accept = (p.accept ?? null) -%}
+{%- set v_decline = (p.decline ?? null) -%}
+{%- set v_settings = (p.settings ?? null) -%}
+{%- set v_layout = (p.layout ?? 'bar') -%}
+{%- set v_actions = (p.actions ?? 'two') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_11 -%}
+  {%- set c_10 -%}
+    {%- set c_9 -%}
+      {%- set c_4 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'cookie', 'Size': 24}}, with_context = false) }}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(v_title) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': 'base', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(v_text) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_3}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'min-w-0'}, 'children': c_4}, with_context = false) }}
+      {%- set c_8 -%}
+        {%- if ui_t(ui_and([ui_eq(v_actions, 'three'), v_settings])) %}
+          {%- set c_5 -%}
+            {{ ui_text(v_settings) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'cookie-settings'])}, 'children': c_5}, with_context = false) }}
+        {%- endif %}
+        {%- set c_6 -%}
+          {{ ui_text(v_decline) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'cookie-decline'])}, 'children': c_6}, with_context = false) }}
+        {%- set c_7 -%}
+          {{ ui_text(v_accept) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'sm', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'cookie-accept'])}, 'children': c_7}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Class': 'shrink-0 flex-wrap'}, 'children': c_8}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border', (ui_t(ui_eq(v_tone, 'muted')) ? 'bg-muted' : 'bg-card'), (ui_t(ui_eq(v_layout, 'bar')) ? 'md:flex-row md:items-center md:justify-between' : 'mx-auto w-full max-w-md')]))}, 'children': c_9}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-4'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : ui_tpl('{0}-title', [v_id])), 'data-testid', 'cookie', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/credit-packs.html.twig b/packages/twig/ui/blocks/credit-packs.html.twig
new file mode 100644
index 0000000..ba0ac8e
--- /dev/null
+++ b/packages/twig/ui/blocks/credit-packs.html.twig
@@ -0,0 +1,62 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/credit-packs.json
+    Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile, row), tone, density.
+    Props (p): id, title, packs, empty, badges, buy, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_packs = (p.packs ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_badges = (p.badges ?? null) -%}
+{%- set v_buy = (p.buy ?? null) -%}
+{%- set v_cols = (p.cols ?? '4') -%}
+{%- set v_item = (p.item ?? 'tile') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(ui_len(v_packs), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'coins', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- for v_pack in ui_l(v_packs) %}
+        {%- set c_9 -%}
+          {%- set c_8 -%}
+            {%- set c_6 -%}
+              {%- if ui_t(ui_or([ui_get(v_pack, ['badge']), ui_and([not (ui_eq(v_item, 'row')), ui_gt(ui_count(v_packs, 'badge'), 0)])])) %}
+                {%- set c_2 -%}
+                  {%- if ui_t(ui_get(v_pack, ['badge'])) %}
+                    {%- set c_1 -%}
+                      {{ ui_text(ui_at(v_badges, ui_get(v_pack, ['badge']))) }}
+                    {%- endset -%}
+                    {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'w-fit shrink-0', 'Attrs': ui_attrs(['data-testid', 'badge'])}, 'children': c_1}, with_context = false) }}
+                  {%- endif %}
+                {%- endset -%}
+                {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-h-6 items-center', 'Attrs': ui_attrs(['data-slot', 'badge-slot'])}, 'children': c_2}, with_context = false) }}
+              {%- endif %}
+              {%- set c_5 -%}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_get(v_pack, ['name'])) }}
+                {%- endset -%}
+                {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_3}, with_context = false) }}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_money(ui_get(v_pack, ['price']), ui_get(v_pack, ['currency']))) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': '2xl', 'Weight': 'bold'}, 'children': c_4}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'min-w-0'}, 'children': c_5}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': ui_s(ui_cnv(['min-w-0', (ui_t(ui_eq(v_item, 'row')) ? 'flex-1' : '')]))}, 'children': c_6}, with_context = false) }}
+            {%- set c_7 -%}
+              {{ ui_text(v_buy) }}
+            {%- endset -%}
+            {{ include('ui/button/button.html.twig', {'p': {'Variant': ui_s((ui_t(ui_eq(ui_get(v_pack, ['badge']), 'popular')) ? 'default' : 'outline')), 'Size': 'sm', 'Type': 'button', 'Class': ui_s(ui_cnv(['w-fit shrink-0', (ui_t(ui_eq(v_item, 'row')) ? '' : 'mt-auto')])), 'Attrs': ui_attrs(['data-testid', 'buy'])}, 'children': c_7}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/card/card-content.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex h-full gap-4', (ui_t(ui_eq(v_item, 'row')) ? 'flex-row flex-wrap items-center justify-between' : 'flex-col')]))}, 'children': c_8}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card.html.twig', {'p': {'Variant': 'default', 'Class': ui_s(ui_cnv(['h-full', (ui_t(ui_eq(v_item, 'row')) ? 'gap-4 p-4' : (ui_t(ui_eq(v_density, 'compact')) ? 'gap-4 p-4' : ''))])), 'Attrs': ui_attrs(['data-testid', 'item', 'data-badge', ui_get(v_pack, ['badge'])])}, 'children': c_9}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_item, 'row')) ? '1' : ui_fit_cols((ui_t(ui_eq(v_cols, '2')) ? '1-2' : '1-4'), ui_len(v_packs)))), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_10}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': (ui_t(ui_eq(v_item, 'row')) ? '2xl' : 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/cta-actions.html.twig b/packages/twig/ui/blocks/cta-actions.html.twig
new file mode 100644
index 0000000..ae88fb6
--- /dev/null
+++ b/packages/twig/ui/blocks/cta-actions.html.twig
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-actions.json
+    The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions form).
+    Props (p): id, actions, center. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_center = (p.center ?? false) -%}
+{%- if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'form')) %}
+  {%- set c_4 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_actions, ['emailLabel'])) }}
+    {%- endset -%}
+    {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+    {%- set c_3 -%}
+      {{ include('ui/input/input.html.twig', {'p': {'Type': 'email', 'Name': 'email', 'Class': 'min-w-0 flex-1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_actions, ['cta'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'w-full flex-wrap'}, 'children': c_3}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/form/form.html.twig', {'p': {'Method': 'dialog', 'Class': ui_s(ui_cnv(['w-full max-w-md', (ui_t(v_center) ? 'mx-auto' : '')])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_4}, with_context = false) }}
+{%- else %}
+  {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': (ui_t(v_center) ? 'center' : 'start')}}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/cta-band.html.twig b/packages/twig/ui/blocks/cta-band.html.twig
new file mode 100644
index 0000000..adbdc83
--- /dev/null
+++ b/packages/twig/ui/blocks/cta-band.html.twig
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-band.json
+    A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof (none, quote), density.
+    Props (p): id, title, text, actions, quote, layout, tone, proof, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_quote = (p.quote ?? null) -%}
+{%- set v_layout = (p.layout ?? 'card') -%}
+{%- set v_tone = (p.tone ?? 'muted') -%}
+{%- set v_proof = (p.proof ?? 'none') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_center = ui_or([ui_eq(v_layout, 'band'), ui_eq(v_layout, 'banner')]) -%}
+{%- if ui_t(ui_eq(v_layout, 'banner')) %}
+  {{ include('blocks/cta-banner.html.twig', {'p': {'id': v_id, 'title': v_title, 'text': v_text, 'cta': ui_get(v_actions, ['cta']), 'href': ui_get(v_actions, ['href']), 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+{%- elseif ui_t(ui_eq(v_layout, 'row')) %}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {%- set c_5 -%}
+        {%- set c_4 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(v_title) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(v_text) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'min-w-0'}, 'children': c_3}, with_context = false) }}
+          {%- if ui_t(ui_eq(v_proof, 'quote')) %}
+            {{ include('blocks/quote-proof.html.twig', {'p': {'quote': ui_get(v_quote, ['text']), 'quoteBy': ui_get(v_quote, ['by']), 'center': v_center}}, with_context = false) }}
+          {%- endif %}
+          {{ include('blocks/cta-actions.html.twig', {'p': {'id': v_id, 'actions': v_actions, 'center': v_center}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card-content.html.twig', {'p': {'Class': 'flex flex-col gap-4 md:flex-row md:items-center md:justify-between'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/card/card.html.twig', {'p': {'Variant': 'muted'}, 'children': c_5}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/container/container.html.twig', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_6}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': 'py-8', 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : ui_tpl('{0}-title', [v_id])), 'data-testid', 'section', 'data-tone', v_tone, 'data-density', v_density, 'aria-label', v_landmarkLabel])}, 'children': c_7}, with_context = false) }}
+{%- else %}
+  {%- set f_8 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+  {%- endset -%}
+  {%- set c_9 -%}
+    {%- if ui_t(ui_eq(v_proof, 'quote')) %}
+      {{ include('blocks/quote-proof.html.twig', {'p': {'quote': ui_get(v_quote, ['text']), 'quoteBy': ui_get(v_quote, ['by']), 'center': v_center}}, with_context = false) }}
+    {%- endif %}
+    {{ include('blocks/cta-actions.html.twig', {'p': {'id': v_id, 'actions': v_actions, 'center': v_center}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'layout': (ui_t(ui_eq(v_layout, 'split')) ? 'split' : 'stack'), 'align': (ui_t(v_center) ? 'center' : 'start'), 'boxed': ui_eq(v_layout, 'card'), 'media': {'show': ui_eq(v_layout, 'split')}, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel, 'aside': f_8}, 'children': c_9}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/cta-banner.html.twig b/packages/twig/ui/blocks/cta-banner.html.twig
new file mode 100644
index 0000000..c968f40
--- /dev/null
+++ b/packages/twig/ui/blocks/cta-banner.html.twig
@@ -0,0 +1,29 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-banner.json
+    A centered closing card: heading, one sentence and a pill button. Sizes from the default preset.
+    Props (p): id, title, text, cta, href, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_cta = (p.cta ?? null) -%}
+{%- set v_href = (p.href ?? null) -%}
+{%- set v_tone = (p.tone ?? 'muted') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_5 -%}
+  {%- set c_4 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': '3xl', 'Weight': 'semibold', 'Class': ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['cta', 'title']), 'leading-9'])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ ui_text(v_text) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'semibold', 'Class': ui_s(ui_cnv(['leading-5 text-muted-foreground', ui_preset('blocks/presets/defaults.json', ['cta', 'text'])]))}, 'children': c_2}, with_context = false) }}
+    {%- set c_3 -%}
+      {{ ui_text(v_cta) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'lg', 'Href': ui_s(v_href), 'Class': ui_s(ui_preset('blocks/presets/defaults.json', ['cta', 'button'])), 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_3}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex w-full flex-col items-center gap-10 bg-muted px-6 text-center', ui_preset('blocks/presets/defaults.json', ['cta', 'panel'])])), 'Attrs': ui_attrs(['data-testid', 'cta-banner'])}, 'children': c_4}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': 'w-full py-0', 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : ui_tpl('{0}-title', [v_id])), 'data-testid', 'section', 'data-tone', v_tone, 'data-density', 'compact', 'aria-label', v_landmarkLabel])}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/cta-proof-items.html.twig b/packages/twig/ui/blocks/cta-proof-items.html.twig
new file mode 100644
index 0000000..5f2c316
--- /dev/null
+++ b/packages/twig/ui/blocks/cta-proof-items.html.twig
@@ -0,0 +1,125 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-proof-items.json
+    The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).
+    Props (p): content, proof, center. -#}
+{%- set v_content = (p.content ?? null) -%}
+{%- set v_proof = (p.proof ?? 'stats') -%}
+{%- set v_center = (p.center ?? false) -%}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'logos'), ui_gt(ui_len(ui_get(v_content, ['logos'])), 0)])) %}
+  {%- set c_3 -%}
+    {%- for v_l in ui_l(ui_get(v_content, ['logos'])) %}
+      {%- set c_2 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 20}}, with_context = false) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_l, ['name'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'center', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_2}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_3}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'features'), ui_gt(ui_len(ui_get(v_content, ['features'])), 0)])) %}
+  {%- set c_9 -%}
+    {%- for v_f in ui_l(ui_get(v_content, ['features'])) %}
+      {%- set c_8 -%}
+        {%- set c_4 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_4}, with_context = false) }}
+        {%- set c_7 -%}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}, with_context = false) }}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_f, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_7}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_8}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 gap-4 text-left sm:grid-cols-2', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_9}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'stats'), ui_gt(ui_len(ui_get(v_content, ['stats'])), 0)])) %}
+  {%- set c_13 -%}
+    {%- for v_s in ui_l(ui_get(v_content, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_12 -%}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_10}, with_context = false) }}
+          {%- set c_11 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': ui_s((ui_t(v_center) ? 'items-center text-center' : '')), 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_12}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-3 gap-4', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_13}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'rows'), ui_gt(ui_len(ui_get(v_content, ['features'])), 0)])) %}
+  {%- set c_19 -%}
+    {%- for v_f in ui_l(ui_get(v_content, ['features'])) %}
+      {%- set c_18 -%}
+        {%- set c_14 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_14}, with_context = false) }}
+        {%- set c_17 -%}
+          {%- set c_15 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_15}, with_context = false) }}
+          {%- set c_16 -%}
+            {{ ui_text(ui_get(v_f, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_16}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_17}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_18}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_19}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_proof, 'zones'), ui_gt(ui_len(ui_get(v_content, ['zones'])), 0)])) %}
+  {%- set c_27 -%}
+    {%- for v_z in ui_l(ui_get(v_content, ['zones'])) %}
+      {%- set c_26 -%}
+        {%- set c_22 -%}
+          {%- set c_20 -%}
+            {{ ui_text(ui_get(v_z, ['name'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_20}, with_context = false) }}
+          {%- set c_21 -%}
+            {{ ui_text(ui_get(v_z, ['area'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_21}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'min-w-0'}, 'children': c_22}, with_context = false) }}
+        {%- set c_25 -%}
+          {%- set c_23 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['price']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_23}, with_context = false) }}
+          {%- set c_24 -%}
+            {{ ui_text(ui_get(v_z, ['time'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_24}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'shrink-0 text-right'}, 'children': c_25}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-start justify-between gap-4 border-b border-border py-4', 'Attrs': ui_attrs(['data-testid', 'cta-item'])}, 'children': c_26}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col p-0', 'Attrs': ui_attrs(['data-testid', 'cta-proof'])}, 'children': c_27}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/cta-proof.html.twig b/packages/twig/ui/blocks/cta-proof.html.twig
new file mode 100644
index 0000000..5bcdc3b
--- /dev/null
+++ b/packages/twig/ui/blocks/cta-proof.html.twig
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/cta-proof.json
+    A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note. Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos, features, stats, rows, zones), mediaSide, tone.
+    Props (p): id, title, lead, badge, actions, content, note, layout, proof, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_content = (p.content ?? null) -%}
+{%- set v_note = (p.note ?? '') -%}
+{%- set v_layout = (p.layout ?? 'center') -%}
+{%- set v_proof = (p.proof ?? 'stats') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_2 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+{%- endset -%}
+{%- set c_3 -%}
+  {{ include('blocks/cta-proof-items.html.twig', {'p': {'content': v_content, 'proof': v_proof, 'center': ui_eq(v_layout, 'center')}}, with_context = false) }}
+  {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': (ui_t(ui_eq(v_layout, 'center')) ? 'center' : 'start')}}, with_context = false) }}
+  {%- if ui_t(v_note) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_note) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'cta-note'])}, 'children': c_1}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'align': (ui_t(ui_eq(v_layout, 'center')) ? 'center' : 'start'), 'layout': (ui_t(ui_eq(v_layout, 'center')) ? 'stack' : 'split'), 'media': {'show': ui_eq(v_layout, 'split'), 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_2}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/dashboard-overview.html.twig b/packages/twig/ui/blocks/dashboard-overview.html.twig
new file mode 100644
index 0000000..e0ac682
--- /dev/null
+++ b/packages/twig/ui/blocks/dashboard-overview.html.twig
@@ -0,0 +1,46 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/dashboard-overview.json
+    The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the activity side by side, stacked: one below the other), cols (2, 4), tone, density.
+    Props (p): id, title, metrics, chart, activity, layout, cols, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_metrics = (p.metrics ?? null) -%}
+{%- set v_chart = (p.chart ?? null) -%}
+{%- set v_activity = (p.activity ?? null) -%}
+{%- set v_layout = (p.layout ?? 'split') -%}
+{%- set v_cols = (p.cols ?? '4') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_7 -%}
+  {%- set c_6 -%}
+    {%- if ui_t(ui_gt(ui_len(v_metrics), 0)) %}
+      {%- set c_2 -%}
+        {%- for v_m in ui_l(v_metrics) %}
+          {%- set c_1 -%}
+            {{ include('blocks/stat-tile.html.twig', {'p': {'label': ui_get(v_m, ['label']), 'value': ui_get(v_m, ['value']), 'icon': ui_get(v_m, ['icon']), 'hint': ui_get(v_m, ['hint'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_1}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_cols, '2')) ? '1-2' : '1-4')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}, with_context = false) }}
+    {%- endif %}
+    {%- set c_5 -%}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_chart, ['series'])), 0)) %}
+        {%- set c_3 -%}
+          {{ include('blocks/bar-chart.html.twig', {'p': {'bars': ui_get(v_chart, ['series']), 'label': ui_get(v_chart, ['summary']), 'height': 144}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/panel.html.twig', {'p': {'title': ui_get(v_chart, ['title']), 'description': ui_get(v_chart, ['text']), 'id': ui_tpl('{0}-chart', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_activity, ['events'])), 0)) %}
+        {%- set c_4 -%}
+          {{ include('blocks/timeline.html.twig', {'p': {'items': ui_get(v_activity, ['events'])}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/panel.html.twig', {'p': {'title': ui_get(v_activity, ['title']), 'description': ui_get(v_activity, ['text']), 'id': ui_tpl('{0}-feed', [v_id]), 'className': ui_cnv(['h-full'])}, 'children': c_4}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'split')) ? '1-2' : '1')), 'Class': 'items-stretch gap-4', 'Attrs': ui_attrs(['data-testid', 'panels'])}, 'children': c_5}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_6}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/dashboard-shell.html.twig b/packages/twig/ui/blocks/dashboard-shell.html.twig
new file mode 100644
index 0000000..bd34b5e
--- /dev/null
+++ b/packages/twig/ui/blocks/dashboard-shell.html.twig
@@ -0,0 +1,48 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/dashboard-shell.json
+    The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset: over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide, rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.
+    Props (p): id, title, level, nav, topbar, search, sidebar, side, footer, content, frame, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_level = (p.level ?? 2) -%}
+{%- set v_nav = (p.nav ?? null) -%}
+{%- set v_topbar = (p.topbar ?? 'full') -%}
+{%- set v_search = (p.search ?? 'show') -%}
+{%- set v_sidebar = (p.sidebar ?? 'wide') -%}
+{%- set v_side = (p.side ?? 'start') -%}
+{%- set v_footer = (p.footer ?? 'none') -%}
+{%- set v_content = (p.content ?? 'grid') -%}
+{%- set v_frame = (p.frame ?? 'window') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_titleId = ui_tpl('{0}-title', [v_id]) -%}
+{%- set c_5 -%}
+  {%- set c_4 -%}
+    {%- set c_3 -%}
+      {%- if ui_t(ui_eq(v_topbar, 'full')) %}
+        {{ include('blocks/shell-topbar.html.twig', {'p': {'nav': v_nav, 'links': (ui_t(ui_eq(v_sidebar, 'none')) ? 'show' : 'hide'), 'search': v_search, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+      {%- endif %}
+      {%- set c_2 -%}
+        {%- if ui_t(not (ui_eq(v_sidebar, 'none'))) %}
+          {{ include('blocks/shell-sidebar.html.twig', {'p': {'nav': v_nav, 'mode': v_sidebar, 'side': v_side, 'brand': (ui_t(ui_eq(v_topbar, 'full')) ? 'hide' : 'show'), 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+        {%- endif %}
+        {%- set c_1 -%}
+          {%- if ui_t(ui_eq(v_topbar, 'inset')) %}
+            {{ include('blocks/shell-topbar.html.twig', {'p': {'nav': v_nav, 'brand': (ui_t(ui_eq(v_sidebar, 'none')) ? 'show' : 'hide'), 'links': (ui_t(ui_eq(v_sidebar, 'none')) ? 'show' : 'hide'), 'search': v_search, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+          {%- endif %}
+          {{ include('blocks/shell-content.html.twig', {'p': {'title': v_title, 'titleId': v_titleId, 'level': v_level, 'content': v_content}}, with_context = false) }}
+          {%- if ui_t(ui_eq(v_footer, 'inset')) %}
+            {{ include('blocks/shell-footer.html.twig', {'p': {'nav': v_nav, 'place': 'inset', 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-w-0 flex-1 flex-col'}, 'children': c_1}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex min-h-0 flex-1', (ui_t(ui_eq(v_side, 'end')) ? 'flex-row-reverse' : '')]))}, 'children': c_2}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_footer, 'full')) %}
+        {{ include('blocks/shell-footer.html.twig', {'p': {'nav': v_nav, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col overflow-hidden bg-background', (ui_t(ui_eq(v_frame, 'window')) ? 'min-h-160 rounded border border-border' : 'min-h-screen')])), 'Attrs': ui_attrs(['data-testid', 'window'])}, 'children': c_3}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_frame, 'window')) ? 'mx-auto w-full max-w-6xl px-4' : ''))}, 'children': c_4}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': ui_s((ui_t(ui_eq(v_frame, 'window')) ? 'bg-background py-12' : 'bg-background')), 'Attrs': ui_attrs(['id', v_id, 'aria-labelledby', (ui_t(v_landmarkLabel) ? null : v_titleId), 'data-testid', 'dashboard-shell', 'data-topbar', v_topbar, 'data-sidebar', v_sidebar, 'data-footer', v_footer, 'aria-label', v_landmarkLabel])}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/delivery-info.html.twig b/packages/twig/ui/blocks/delivery-info.html.twig
new file mode 100644
index 0000000..bd11458
--- /dev/null
+++ b/packages/twig/ui/blocks/delivery-info.html.twig
@@ -0,0 +1,81 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/delivery-info.json
+    How delivery works: the facts as icon cards, then the zones with their time and the order that ships free. Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones), tone, density.
+    Props (p): id, title, lead, facts, zones, labels, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_facts = (p.facts ?? null) -%}
+{%- set v_zones = (p.zones ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'full') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_17 -%}
+  {%- set c_16 -%}
+    {%- if ui_t(ui_gt(ui_len(v_facts), 0)) %}
+      {%- set c_6 -%}
+        {%- for v_f in ui_l(v_facts) %}
+          {%- set c_5 -%}
+            {%- set c_1 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_1}, with_context = false) }}
+            {%- set c_4 -%}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_f, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_f, ['text'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'fact'])}, 'children': c_5}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'split')) ? '1-2' : '1-4')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'facts'])}, 'children': c_6}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_and([not (ui_eq(v_layout, 'facts')), ui_gt(ui_len(v_zones), 0)])) %}
+      {%- set c_15 -%}
+        {%- set c_7 -%}
+          {{ ui_text(ui_get(v_labels, ['zones'])) }}
+        {%- endset -%}
+        {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_7}, with_context = false) }}
+        {%- set c_14 -%}
+          {%- for v_z in ui_l(v_zones) %}
+            {%- set c_13 -%}
+              {%- set c_10 -%}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_get(v_z, ['name'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_8}, with_context = false) }}
+                {%- set c_9 -%}
+                  {{ ui_text(ui_get(v_z, ['time'])) }}
+                {%- endset -%}
+                {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'default'}, 'children': c_9}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'baseline', 'Justify': 'between'}, 'children': c_10}, with_context = false) }}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_z, ['area'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+              {%- set c_12 -%}
+                {{ ui_text(ui_tpl(ui_get(v_labels, ['freeFrom']), [ui_money(ui_get(v_z, ['freeFrom']), ui_get(v_z, ['currency']))])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'medium'}, 'children': c_12}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': ui_s((ui_t(ui_eq(v_layout, 'split')) ? 'border-b border-border pb-4' : 'rounded bg-card inset-ring inset-ring-border p-6')), 'Attrs': ui_attrs(['data-testid', 'zone'])}, 'children': c_13}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'split')) ? 'flex flex-col gap-4' : 'grid grid-cols-1 gap-4 md:grid-cols-3'))}, 'children': c_14}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_15}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['grid grid-cols-1 gap-8', (ui_t(ui_eq(v_layout, 'split')) ? 'items-start md:grid-cols-2' : '')]))}, 'children': c_16}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_17}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/drawer-lines.html.twig b/packages/twig/ui/blocks/drawer-lines.html.twig
new file mode 100644
index 0000000..bf2be04
--- /dev/null
+++ b/packages/twig/ui/blocks/drawer-lines.html.twig
@@ -0,0 +1,74 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/drawer-lines.json
+    The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal and total and the button.
+    Props (p): lines, rows, labels, drawer, media, field. -#}
+{%- set v_lines = (p.lines ?? null) -%}
+{%- set v_rows = (p.rows ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_drawer = (p.drawer ?? null) -%}
+{%- set v_media = (p.media ?? 'image') -%}
+{%- set v_field = (p.field ?? 'qty') -%}
+{%- set c_7 -%}
+  {%- for v_line in ui_l(v_lines) %}
+    {%- set c_6 -%}
+      {%- if ui_t(ui_eq(v_media, 'image')) %}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['size-16 shrink-0'])}}, with_context = false) }}
+      {%- endif %}
+      {%- set c_5 -%}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_line, ['name'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-sm font-medium'}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Justify': 'between', 'Align': 'start'}, 'children': c_3}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_line, ['variant'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+        {{ include('blocks/number-field.html.twig', {'p': {'value': ui_str(ui_get(v_line, ['qty'])), 'name': ui_tpl('{0}-{1}', [v_field, ui_get(v_line, ['id'])]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'flex-1'}, 'children': c_5}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'flex-1 p-4', 'Attrs': ui_attrs(['data-testid', 'lines'])}, 'children': c_7}, with_context = false) }}
+{%- set c_15 -%}
+  {%- set c_9 -%}
+    {%- set c_8 -%}
+      {{ ui_text(ui_get(v_drawer, ['progress'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_8}, with_context = false) }}
+    {{ include('ui/form/progress.html.twig', {'p': {'Value': '96', 'Max': '100', 'Attrs': ui_attrs(['aria-label', ui_get(v_drawer, ['progress'])])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'rounded bg-muted p-4', 'Attrs': ui_attrs(['data-testid', 'progress'])}, 'children': c_9}, with_context = false) }}
+  {%- set c_13 -%}
+    {%- for v_row in ui_l(v_rows) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t((ui_t(ui_get(v_row, ['strong'])) ? true : ui_eq(v_i, 0))) %}
+        {%- set c_12 -%}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_row, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_10}, with_context = false) }}
+          {%- set c_11 -%}
+            {{ ui_text(ui_money(ui_get(v_row, ['amount']), ui_get(v_row, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_11}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/list/list-item.html.twig', {'p': {'Class': ui_s((ui_t(ui_get(v_row, ['strong'])) ? 'flex justify-between text-base font-bold' : 'flex justify-between text-sm text-muted-foreground'))}, 'children': c_12}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2'}, 'children': c_13}, with_context = false) }}
+  {%- set c_14 -%}
+    {{ ui_text(ui_get(v_labels, ['checkout'])) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'lg', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'checkout'])}, 'children': c_14}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'border-t border-border p-4'}, 'children': c_15}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/dropdown-item.html.twig b/packages/twig/ui/blocks/dropdown-item.html.twig
new file mode 100644
index 0000000..93aafc9
--- /dev/null
+++ b/packages/twig/ui/blocks/dropdown-item.html.twig
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/dropdown-item.json
+    A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex -1: the menu moves focus with the arrow keys.
+    Props (p): selected, className, icon (slot), right (slot); children: markup. -#}
+{%- set v_selected = (p.selected ?? false) -%}
+{%- set c_5 -%}
+  {%- set c_4 -%}
+    {%- if ui_t(((p.icon ?? null) is not null)) %}
+      {%- set c_1 -%}
+        {{ (p.icon ?? '')|raw }}
+      {%- endset -%}
+      {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex w-7 shrink-0 items-center pr-2', 'Attrs': ui_attrs(['data-slot', 'dropdown-item-icon'])}, 'children': c_1}, with_context = false) }}
+    {%- endif %}
+    {%- set c_2 -%}
+      {{ (children ?? '')|raw }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s(ui_cnv(['text-xs', 'min-w-0 flex-1 truncate px-1 font-bold'])), 'Attrs': ui_attrs(['data-slot', 'dropdown-item-label'])}, 'children': c_2}, with_context = false) }}
+    {%- if ui_t(((p.right ?? null) is not null)) %}
+      {%- set c_3 -%}
+        {{ (p.right ?? '')|raw }}
+      {%- endset -%}
+      {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex shrink-0 items-center pr-1', 'Attrs': ui_attrs(['data-slot', 'dropdown-item-right'])}, 'children': c_3}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted group-data-[state=selected]:bg-muted', 'Attrs': ui_attrs(['data-slot', 'dropdown-item-content'])}, 'children': c_4}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/button-plain/button-plain.html.twig', {'p': {'Type': 'button', 'Role': 'menuitem', 'Class': ui_s(ui_cnv(['group flex h-9 w-full items-center px-2 text-left text-foreground', (p.className ?? '')])), 'Attrs': ui_attrs(['tabindex', -1, 'data-slot', 'dropdown-item', 'data-state', (ui_t(v_selected) ? 'selected' : 'default')])}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/editor-tab.html.twig b/packages/twig/ui/blocks/editor-tab.html.twig
new file mode 100644
index 0000000..05da103
--- /dev/null
+++ b/packages/twig/ui/blocks/editor-tab.html.twig
@@ -0,0 +1,23 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/editor-tab.json
+    An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close events.
+    Props (p): label, closeLabel, active, preview, className, icon (slot). -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_closeLabel = (p.closeLabel ?? null) -%}
+{%- set v_active = (p.active ?? false) -%}
+{%- set v_preview = (p.preview ?? false) -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {{ (p.icon ?? '')|raw }}
+    {%- set c_1 -%}
+      {{ ui_text(v_label) }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s(ui_cnv(['text-xs text-foreground', (ui_t(v_preview) ? 'font-semibold italic' : 'font-bold')])), 'Attrs': ui_attrs(['data-slot', 'editor-tab-label'])}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'x', 'Size': 16}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Class': 'p-0 [&>svg]:size-4', 'AriaLabel': ui_s(v_closeLabel), 'Attrs': ui_attrs(['tabindex', -1, 'data-slot', 'editor-tab-close'])}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex h-10 items-center gap-2 px-3', 'Attrs': ui_attrs(['data-slot', 'editor-tab-content'])}, 'children': c_3}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card [&_svg]:text-muted-foreground', 'border-r border-border', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'tab', 'aria-selected', v_active, 'tabindex', (ui_t(v_active) ? 0 : -1), 'data-slot', 'editor-tab', 'data-state', (ui_t(v_active) ? 'active' : 'default')])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/empty-panel.html.twig b/packages/twig/ui/blocks/empty-panel.html.twig
new file mode 100644
index 0000000..c288638
--- /dev/null
+++ b/packages/twig/ui/blocks/empty-panel.html.twig
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/empty-panel.json
+    An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain. Axes: layout (card, plain), actions (button, none), size (default, compact).
+    Props (p): id, title, text, icon, cta, ctaHref, layout, actions, visual, size, landmarkLabel. -#}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_icon = (p.icon ?? 'inbox') -%}
+{%- set v_cta = (p.cta ?? null) -%}
+{%- set v_ctaHref = (p.ctaHref ?? null) -%}
+{%- set v_layout = (p.layout ?? 'card') -%}
+{%- set v_actions = (p.actions ?? 'button') -%}
+{%- set v_visual = (p.visual ?? 'icon') -%}
+{%- set v_size = (p.size ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_8 -%}
+  {%- set c_7 -%}
+    {%- if ui_t(ui_eq(v_visual, 'image')) %}
+      {%- set c_4 -%}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3', 'className': ui_cnv(['w-full max-w-xs'])}}, with_context = false) }}
+        {%- set c_1 -%}
+          {{ ui_text(v_title) }}
+        {%- endset -%}
+        {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(v_text) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- if ui_t(ui_eq(v_actions, 'button')) %}
+          {%- set c_3 -%}
+            {{ ui_text(v_cta) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'sm', 'Href': ui_s(v_ctaHref), 'Attrs': ui_attrs(['data-testid', 'empty-action'])}, 'children': c_3}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'mx-auto max-w-md text-center', 'Attrs': ui_attrs(['data-testid', 'empty-visual'])}, 'children': c_4}, with_context = false) }}
+    {%- else %}
+      {%- set f_5 -%}
+        {%- if ui_t(ui_eq(v_actions, 'button')) %}
+          {%- set c_6 -%}
+            {{ ui_text(v_cta) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'sm', 'Href': ui_s(v_ctaHref), 'Attrs': ui_attrs(['data-testid', 'empty-action'])}, 'children': c_6}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('blocks/empty-state.html.twig', {'p': {'icon': v_icon, 'title': v_title, 'text': v_text, 'className': ui_cnv([ui_cnv(['mx-auto max-w-xl', (ui_t(ui_eq(v_layout, 'plain')) ? 'bg-transparent inset-ring-0' : ''), (ui_t(ui_eq(v_size, 'compact')) ? 'py-6' : '')])]), 'action': f_5}}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', (ui_t(ui_eq(v_size, 'compact')) ? 'py-4' : 'py-8')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_7}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_title]), 'data-testid', 'empty'])}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/empty-state.html.twig b/packages/twig/ui/blocks/empty-state.html.twig
new file mode 100644
index 0000000..d27f33f
--- /dev/null
+++ b/packages/twig/ui/blocks/empty-state.html.twig
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/empty-state.json
+    Empty list or nothing found: a round icon, a title, a hint and an optional action.
+    Props (p): icon, title, text, className, action (slot). -#}
+{%- set v_icon = (p.icon ?? 'inbox') -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set c_4 -%}
+  {%- set c_1 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(v_icon), 'Size': 20}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/iconbadge/icon-badge.html.twig', {'p': {'Size': 'lg'}, 'children': c_1}, with_context = false) }}
+  {%- set c_2 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-sm font-bold text-foreground'}, 'children': c_2}, with_context = false) }}
+  {%- if ui_t(v_text) %}
+    {%- set c_3 -%}
+      {{ ui_text(v_text) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 max-w-80 text-xs font-medium text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+  {%- endif %}
+  {{ (p.action ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'status'])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/error-page.html.twig b/packages/twig/ui/blocks/error-page.html.twig
new file mode 100644
index 0000000..21c94ca
--- /dev/null
+++ b/packages/twig/ui/blocks/error-page.html.twig
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/error-page.json
+    A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two), tone.
+    Props (p): id, title, text, status, actions, level, layout, code, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_status = (p.status ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_layout = (p.layout ?? 'centered') -%}
+{%- set v_code = (p.code ?? 'show') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_2 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+{%- endset -%}
+{%- set c_3 -%}
+  {%- if ui_t(ui_eq(v_code, 'show')) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_status) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': '4xl', 'Weight': 'bold', 'Class': ui_s(ui_cnv(['text-8xl text-muted-foreground', (ui_t(ui_eq(v_layout, 'split')) ? '' : 'text-center')])), 'Attrs': ui_attrs(['data-testid', 'error-code'])}, 'children': c_1}, with_context = false) }}
+  {%- endif %}
+  {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': (ui_t(ui_eq(v_layout, 'split')) ? 'start' : 'center')}}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'heading': {'level': v_level}, 'layout': (ui_t(ui_eq(v_layout, 'split')) ? 'split' : 'stack'), 'media': {'show': ui_eq(v_layout, 'split')}, 'align': (ui_t(ui_eq(v_layout, 'split')) ? 'start' : 'center'), 'tone': v_tone, 'density': 'roomy', 'landmarkLabel': v_landmarkLabel, 'aside': f_2}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/faq-cards.html.twig b/packages/twig/ui/blocks/faq-cards.html.twig
new file mode 100644
index 0000000..3477436
--- /dev/null
+++ b/packages/twig/ui/blocks/faq-cards.html.twig
@@ -0,0 +1,44 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-cards.json
+    The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).
+    Props (p): items, labels, cards. -#}
+{%- set v_items = (p.items ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_cards = (p.cards ?? 'grid3') -%}
+{%- set c_9 -%}
+  {%- for v_q in ui_l(v_items) %}
+    {%- set c_8 -%}
+      {%- if ui_t(ui_eq(v_cards, 'icons')) %}
+        {%- set c_1 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_q, ['icon'])), 'Size': 20}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_1}, with_context = false) }}
+      {%- endif %}
+      {%- set c_5 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_q, ['category'])) }}
+        {%- endset -%}
+        {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm', 'Class': 'w-fit'}, 'children': c_2}, with_context = false) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_q, ['question'])) }}
+        {%- endset -%}
+        {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'semibold'}, 'children': c_3}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_q, ['answer'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_5}, with_context = false) }}
+      {%- set c_7 -%}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['more'])) }}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'link', 'Size': 'sm', 'Class': 'gap-2 px-0 font-medium'}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'mt-auto'}, 'children': c_7}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/article-block.html.twig', {'p': {'className': ui_cnv(['rounded bg-card inset-ring inset-ring-border flex flex-col gap-4 p-6']), 'testid': 'faq-card'}, 'children': c_8}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_cards, 'grid4')) ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3')), 'Attrs': ui_attrs(['data-testid', 'faq'])}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/faq-disclosures.html.twig b/packages/twig/ui/blocks/faq-disclosures.html.twig
new file mode 100644
index 0000000..96aa7db
--- /dev/null
+++ b/packages/twig/ui/blocks/faq-disclosures.html.twig
@@ -0,0 +1,22 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-disclosures.json
+    The questions of FaqSplit as native disclosures, one open at a time.
+    Props (p): items, name. -#}
+{%- set v_items = (p.items ?? null) -%}
+{%- set v_name = (p.name ?? null) -%}
+{%- set c_4 -%}
+  {%- for v_q in ui_l(v_items) %}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_q, ['question'])) }}
+      {%- endset -%}
+      {{ include('ui/disclosure/summary.html.twig', {'p': {'Variant': 'item'}, 'children': c_1}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_q, ['answer'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'pb-4 text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/disclosure/disclosure.html.twig', {'p': {'Variant': 'item', 'Name': ui_s(v_name), 'Attrs': ui_attrs(['data-testid', 'faq-item'])}, 'children': c_3}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'faq'])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/faq-finder.html.twig b/packages/twig/ui/blocks/faq-finder.html.twig
new file mode 100644
index 0000000..b638d8d
--- /dev/null
+++ b/packages/twig/ui/blocks/faq-finder.html.twig
@@ -0,0 +1,42 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-finder.json
+    The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as popular links.
+    Props (p): items, labels, topics. -#}
+{%- set v_items = (p.items ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_topics = (p.topics ?? null) -%}
+{%- set c_8 -%}
+  {{ include('blocks/search-field.html.twig', {'p': {'label': ui_get(v_labels, ['search']), 'placeholder': ui_get(v_labels, ['search']), 'value': ui_coalesce([ui_get(v_labels, ['query']), ''])}}, with_context = false) }}
+  {%- set c_2 -%}
+    {%- for v_t in ui_l(v_topics) %}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_t, ['title'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'faq-topic', 'data-value', ui_get(v_t, ['value'])])}, 'children': c_1}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_2}, with_context = false) }}
+  {%- set c_7 -%}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_labels, ['popular'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_3}, with_context = false) }}
+    {%- set c_6 -%}
+      {%- for v_q in ui_l(v_items) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 3)) %}
+          {%- set c_5 -%}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_q, ['question'])) }}
+            {%- endset -%}
+            {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_q, ['href']), 'className': ui_cnv(['text-sm font-medium']), 'size': 'sm'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {'Attrs': ui_attrs(['data-testid', 'faq-popular'])}, 'children': c_5}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_6}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_7}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'faq-finder'])}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/faq-help.html.twig b/packages/twig/ui/blocks/faq-help.html.twig
new file mode 100644
index 0000000..3d6fccb
--- /dev/null
+++ b/packages/twig/ui/blocks/faq-help.html.twig
@@ -0,0 +1,49 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-help.json
+    The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon, name, one line) and a link.
+    Props (p): labels, channels, landmarkLabel. -#}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_channels = (p.channels ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_11 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['asideTitle'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'lg', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_labels, ['asideText'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_3}, with_context = false) }}
+  {%- set c_9 -%}
+    {%- for v_c in ui_l(v_channels) %}
+      {%- set c_8 -%}
+        {%- set c_4 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 20}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_4}, with_context = false) }}
+        {%- set c_7 -%}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_c, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}, with_context = false) }}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_c, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_7}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'faq-channel'])}, 'children': c_8}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0'}, 'children': c_9}, with_context = false) }}
+  {%- set c_10 -%}
+    {{ ui_text(ui_get(v_labels, ['asideCta'])) }}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'link', 'Size': 'sm', 'Class': 'gap-2 px-0 font-medium'}, 'children': c_10}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'aside', 'Class': 'rounded bg-card inset-ring inset-ring-border flex flex-col gap-6 p-6', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, ui_get(v_labels, ['asideTitle'])]), 'data-testid', 'faq-help'])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/faq-list.html.twig b/packages/twig/ui/blocks/faq-list.html.twig
new file mode 100644
index 0000000..9ac9f1f
--- /dev/null
+++ b/packages/twig/ui/blocks/faq-list.html.twig
@@ -0,0 +1,79 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-list.json
+    A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters by `filter.category`), density, tone.
+    Props (p): id, title, items, search, filter, layout, cols, empty, multiple, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_items = (p.items ?? null) -%}
+{%- set v_search = (p.search ?? null) -%}
+{%- set v_filter = (p.filter ?? null) -%}
+{%- set v_layout = (p.layout ?? 'accordion') -%}
+{%- set v_cols = (p.cols ?? '1') -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_multiple = (p.multiple ?? false) -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_inCategory = ui_where(v_items, 'category', ui_get(v_filter, ['category'])) -%}
+{%- set v_shown = ui_match(v_inCategory, 'question', ui_get(v_search, ['query'])) -%}
+{%- set c_13 -%}
+  {%- if ui_t(ui_eq(ui_get(v_search, ['mode']), 'field')) %}
+    {{ include('blocks/search-field.html.twig', {'p': {'label': ui_coalesce([ui_get(v_search, ['label']), '']), 'placeholder': ui_get(v_search, ['label']), 'value': ui_coalesce([ui_get(v_search, ['query']), ''])}}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(ui_get(v_filter, ['mode']), 'categories')) %}
+    {%- set c_2 -%}
+      {%- for v_tab in ui_l(ui_get(v_filter, ['tabs'])) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_tab, ['title'])) }}
+        {%- endset -%}
+        {{ include('blocks/switcher-item.html.twig', {'p': {'active': ui_eq(ui_get(v_tab, ['value']), ui_get(v_filter, ['category']))}, 'children': c_1}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('blocks/switcher.html.twig', {'p': {'label': ui_get(v_filter, ['label'])}, 'children': c_2}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(ui_len(v_shown), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'circle-question-mark', 'title': v_empty}}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'chat')) %}
+    {%- set c_8 -%}
+      {%- for v_item in ui_l(v_shown) %}
+        {%- set c_7 -%}
+          {%- set c_4 -%}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_item, ['question'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_3}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground'}, 'children': c_4}, with_context = false) }}
+          {%- set c_6 -%}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_item, ['answer'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_5}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4'}, 'children': c_6}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'faq-item'])}, 'children': c_7}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'faq'])}, 'children': c_8}, with_context = false) }}
+  {%- else %}
+    {%- set c_12 -%}
+      {%- for v_item in ui_l(v_shown) %}
+        {%- set c_11 -%}
+          {%- set c_9 -%}
+            {{ ui_text(ui_get(v_item, ['question'])) }}
+          {%- endset -%}
+          {{ include('ui/disclosure/summary.html.twig', {'p': {'Variant': 'item'}, 'children': c_9}, with_context = false) }}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_item, ['answer'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'pb-4 text-muted-foreground'}, 'children': c_10}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/disclosure/disclosure.html.twig', {'p': {'Variant': 'item', 'Name': ui_s((ui_t(v_multiple) ? null : ui_tpl('{0}-faq', [ui_coalesce([v_id, 'faq'])]))), 'Attrs': ui_attrs(['data-testid', 'faq-item'])}, 'children': c_11}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_cols, '2')) ? '1-2' : '1')), 'Class': 'items-start gap-x-8', 'Attrs': ui_attrs(['data-testid', 'faq'])}, 'children': c_12}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': (ui_t(ui_eq(v_layout, 'chat')) ? '2xl' : 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_13}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/faq-split.html.twig b/packages/twig/ui/blocks/faq-split.html.twig
new file mode 100644
index 0000000..0bfdf75
--- /dev/null
+++ b/packages/twig/ui/blocks/faq-split.html.twig
@@ -0,0 +1,74 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/faq-split.json
+    Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside: the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.
+    Props (p): id, title, lead, badge, items, channels, topics, labels, layout, cards, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_items = (p.items ?? null) -%}
+{%- set v_channels = (p.channels ?? null) -%}
+{%- set v_topics = (p.topics ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'head') -%}
+{%- set v_cards = (p.cards ?? 'grid3') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(v_items), 0)) %}
+  {%- if ui_t(ui_eq(v_layout, 'cards')) %}
+    {%- set c_1 -%}
+      {{ include('blocks/faq-cards.html.twig', {'p': {'items': v_items, 'labels': v_labels, 'cards': v_cards}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'head')) %}
+    {%- set f_4 -%}
+      {{ include('blocks/faq-disclosures.html.twig', {'p': {'items': v_items, 'name': ui_tpl('{0}-faq', [v_id])}}, with_context = false) }}
+    {%- endset -%}
+    {%- set c_5 -%}
+      {%- set c_3 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['cta'])) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Attrs': ui_attrs(['data-testid', 'faq-cta'])}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {}, 'children': c_3}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': 'end', 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_4}, 'children': c_5}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'aside')) %}
+    {%- set f_6 -%}
+      {{ include('blocks/faq-help.html.twig', {'p': {'labels': v_labels, 'channels': v_channels, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+    {%- endset -%}
+    {%- set c_7 -%}
+      {{ include('blocks/faq-disclosures.html.twig', {'p': {'items': v_items, 'name': ui_tpl('{0}-faq', [v_id])}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': 'end', 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_6}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'media')) %}
+    {%- set f_10 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+    {%- endset -%}
+    {%- set c_11 -%}
+      {{ include('blocks/faq-disclosures.html.twig', {'p': {'items': v_items, 'name': ui_tpl('{0}-faq', [v_id])}}, with_context = false) }}
+      {%- set c_9 -%}
+        {%- set c_8 -%}
+          {{ ui_text(ui_get(v_labels, ['cta'])) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Attrs': ui_attrs(['data-testid', 'faq-cta'])}, 'children': c_8}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {}, 'children': c_9}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide, 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_10}, 'children': c_11}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'search')) %}
+    {%- set f_12 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+    {%- endset -%}
+    {%- set c_13 -%}
+      {{ include('blocks/faq-finder.html.twig', {'p': {'items': v_items, 'labels': v_labels, 'topics': v_topics}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_12}, 'children': c_13}, with_context = false) }}
+  {%- endif %}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/feature-accordion.html.twig b/packages/twig/ui/blocks/feature-accordion.html.twig
new file mode 100644
index 0000000..999b357
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-accordion.html.twig
@@ -0,0 +1,48 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-accordion.json
+    Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.
+    Props (p): id, title, features, empty, expand, media, multiple, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_expand = (p.expand ?? 'first') -%}
+{%- set v_media = (p.media ?? 'none') -%}
+{%- set v_multiple = (p.multiple ?? false) -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_7 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+{%- endset -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layout-grid', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_6 -%}
+      {%- for v_f in ui_l(v_features) %}
+        {%- set v_i = loop.index0 -%}
+        {%- set c_5 -%}
+          {%- set c_3 -%}
+            {%- set c_2 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}, with_context = false) }}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_f, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-base font-semibold'}, 'children': c_1}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex min-w-0 items-center justify-start gap-4'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/disclosure/summary.html.twig', {'p': {'Variant': 'item'}, 'children': c_3}, with_context = false) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_f, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'pb-4 text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/disclosure/disclosure.html.twig', {'p': {'Variant': 'item', 'Name': ui_s((ui_t(v_multiple) ? null : ui_tpl('{0}-accordion', [ui_coalesce([v_id, 'accordion'])]))), 'Open': ui_t(ui_and([ui_eq(v_expand, 'first'), ui_eq(v_i, 0)])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_5}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'layout': (ui_t(ui_eq(v_media, 'image')) ? 'split' : 'stack'), 'media': {'show': ui_eq(v_media, 'image')}, 'landmarkLabel': v_landmarkLabel, 'aside': f_7}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/feature-cards.html.twig b/packages/twig/ui/blocks/feature-cards.html.twig
new file mode 100644
index 0000000..46bf1f8
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-cards.html.twig
@@ -0,0 +1,67 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-cards.json
+    The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names.
+    Props (p): features, cols, item. -#}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_cols = (p.cols ?? '1-3') -%}
+{%- set v_item = (p.item ?? 'card') -%}
+{%- set c_15 -%}
+  {%- for v_feature in ui_l(v_features) %}
+    {%- if ui_t(ui_eq(v_item, 'tile')) %}
+      {%- set c_5 -%}
+        {%- set c_4 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_feature, ['icon'])), 'Size': 20}}, with_context = false) }}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_feature, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_feature, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/card/card.html.twig', {'p': {'Variant': 'compact', 'Attrs': ui_attrs(['data-testid', 'feature-card'])}, 'children': c_5}, with_context = false) }}
+    {%- elseif ui_t(ui_eq(v_item, 'cell')) %}
+      {%- set c_9 -%}
+        {%- set c_6 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_feature, ['icon'])), 'Size': 24}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/iconbadge/icon-badge.html.twig', {'p': {'Variant': 'primary', 'Size': 'xl', 'Attrs': ui_attrs(['data-testid', 'feature-icon'])}, 'children': c_6}, with_context = false) }}
+        {%- set c_7 -%}
+          {{ ui_text(ui_get(v_feature, ['title'])) }}
+        {%- endset -%}
+        {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'semibold', 'Class': 'leading-6'}, 'children': c_7}, with_context = false) }}
+        {%- set c_8 -%}
+          {{ ui_text(ui_get(v_feature, ['text'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'leading-5 text-muted-foreground'}, 'children': c_8}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'h-full gap-8 bg-background px-6 py-12 text-center', 'Attrs': ui_attrs(['data-testid', 'feature-card'])}, 'children': c_9}, with_context = false) }}
+    {%- else %}
+      {%- set c_14 -%}
+        {%- set c_11 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_feature, ['icon'])), 'Size': 24}}, with_context = false) }}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_feature, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/card/card-title.html.twig', {'p': {'As': ui_i(3)}, 'children': c_10}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card-header.html.twig', {'p': {'Class': 'flex flex-col gap-4'}, 'children': c_11}, with_context = false) }}
+        {%- set c_13 -%}
+          {%- set c_12 -%}
+            {{ ui_text(ui_get(v_feature, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_12}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card-content.html.twig', {'p': {}, 'children': c_13}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/card/card.html.twig', {'p': {'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'feature-card'])}, 'children': c_14}, with_context = false) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s(v_cols), 'Class': ui_s((ui_t(ui_eq(v_item, 'cell')) ? ui_cnv(['w-full gap-px overflow-hidden bg-border p-px', ui_preset('blocks/presets/defaults.json', ['features', 'cells'])]) : 'gap-6')), 'Attrs': ui_attrs(['data-testid', 'feature-grid'])}, 'children': c_15}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/feature-grid.html.twig b/packages/twig/ui/blocks/feature-grid.html.twig
new file mode 100644
index 0000000..716db3c
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-grid.html.twig
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-grid.json
+    A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon), media side (rows), density, tone.
+    Props (p): id, title, features, empty, action, layout, cols, item, mediaSide, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_action = (p.action ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_cols = (p.cols ?? '1-3') -%}
+{%- set v_item = (p.item ?? 'card') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_eq(v_item, 'cell')) %}
+  {%- set c_4 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(v_title) }}
+      {%- endset -%}
+      {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': 'sm', 'Weight': 'semibold', 'Class': 'leading-7', 'Attrs': ui_attrs(['id', ui_add(v_id, '-title')])}, 'children': c_1}, with_context = false) }}
+      {%- if ui_t(ui_and([ui_get(v_action, ['label']), ui_get(v_action, ['href'])])) %}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_action, ['label'])) }}
+        {%- endset -%}
+        {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_get(v_action, ['href'])), 'Variant': 'default', 'Class': ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'tiny']), 'shrink-0 font-medium leading-5'])), 'Attrs': ui_attrs(['data-testid', 'section-action'])}, 'children': c_2}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'w-full'}, 'children': c_3}, with_context = false) }}
+    {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+      {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layout-grid', 'title': v_empty}}, with_context = false) }}
+    {%- else %}
+      {{ include('blocks/feature-cards.html.twig', {'p': {'features': v_features, 'cols': v_cols, 'item': v_item}}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'tone': v_tone, 'density': v_density, 'measure': 'fill', 'className': ui_cnv(['py-0']), 'landmarkLabel': v_landmarkLabel}, 'children': c_4}, with_context = false) }}
+{%- else %}
+  {%- set c_5 -%}
+    {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+      {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layout-grid', 'title': v_empty}}, with_context = false) }}
+    {%- elseif ui_t(ui_eq(v_layout, 'rows')) %}
+      {{ include('blocks/feature-rows.html.twig', {'p': {'features': v_features, 'mediaSide': v_mediaSide}}, with_context = false) }}
+    {%- else %}
+      {{ include('blocks/feature-cards.html.twig', {'p': {'features': v_features, 'cols': v_cols, 'item': v_item}}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'action': v_action, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_5}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/feature-metric-cards.html.twig b/packages/twig/ui/blocks/feature-metric-cards.html.twig
new file mode 100644
index 0000000..6d90ec9
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-metric-cards.html.twig
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-metric-cards.json
+    Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the label.
+    Props (p): stats. -#}
+{%- set v_stats = (p.stats ?? null) -%}
+{%- set c_7 -%}
+  {%- for v_s in ui_l(v_stats) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 4)) %}
+      {%- set c_6 -%}
+        {%- set c_1 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_s, ['icon'])), 'Size': 20}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'}, 'children': c_1}, with_context = false) }}
+        {%- set c_5 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'lg', 'Weight': 'bold'}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_s, ['hint'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'min-w-0'}, 'children': c_5}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'feature-stat'])}, 'children': c_6}, with_context = false) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2'}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/feature-pairs.html.twig b/packages/twig/ui/blocks/feature-pairs.html.twig
new file mode 100644
index 0000000..f9906b8
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-pairs.html.twig
@@ -0,0 +1,31 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-pairs.json
+    Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards.
+    Props (p): features. -#}
+{%- set v_features = (p.features ?? null) -%}
+{%- set c_6 -%}
+  {%- for v_f in ui_l(v_features) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 4)) %}
+      {%- set c_5 -%}
+        {%- set c_1 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground'}, 'children': c_1}, with_context = false) }}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_f, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'min-w-0'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'feature-item'])}, 'children': c_5}, with_context = false) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 gap-6 sm:grid-cols-2'}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/feature-rows.html.twig b/packages/twig/ui/blocks/feature-rows.html.twig
new file mode 100644
index 0000000..5bfe2e4
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-rows.html.twig
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-rows.json
+    The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names.
+    Props (p): features, mediaSide. -#}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set c_6 -%}
+  {%- for v_feature in ui_l(v_features) %}
+    {%- set c_5 -%}
+      {%- set c_3 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_feature, ['icon'])), 'Size': 24}}, with_context = false) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_feature, ['title'])) }}
+        {%- endset -%}
+        {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_feature, ['text'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'min-w-0'}, 'children': c_3}, with_context = false) }}
+      {%- set c_4 -%}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_feature, ['title']), 'ratio': '4/3'}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['w-full min-w-0', (ui_t(ui_eq(v_mediaSide, 'start')) ? 'md:order-first' : (ui_t(ui_eq(v_mediaSide, 'alternate')) ? 'md:group-even:order-first' : ''))]))}, 'children': c_4}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-2', 'Class': 'group items-center gap-8', 'Attrs': ui_attrs(['data-testid', 'feature-card'])}, 'children': c_5}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '8', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'feature-rows'])}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/feature-showcase.html.twig b/packages/twig/ui/blocks/feature-showcase.html.twig
new file mode 100644
index 0000000..a03a4b2
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-showcase.html.twig
@@ -0,0 +1,55 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-showcase.json
+    Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4), tone.
+    Props (p): id, title, lead, features, empty, more, item, cols, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_more = (p.more ?? null) -%}
+{%- set v_item = (p.item ?? 'picture') -%}
+{%- set v_cols = (p.cols ?? '3') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layout-grid', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_f in ui_l(v_features) %}
+        {%- set c_6 -%}
+          {%- if ui_t(ui_eq(v_item, 'picture')) %}
+            {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_f, ['title'])}}, with_context = false) }}
+          {%- else %}
+            {%- set c_1 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 32}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex aspect-video items-center justify-center rounded bg-muted text-foreground', 'Attrs': ui_attrs(['data-testid', 'showcase-panel'])}, 'children': c_1}, with_context = false) }}
+          {%- endif %}
+          {%- set c_5 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_f, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+            {%- if ui_t(ui_eq(v_item, 'picture')) %}
+              {%- set c_4 -%}
+                {{ ui_text(v_more) }}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_f, ['href']), 'className': ui_cnv(['mt-auto gap-2 pt-2 text-sm font-medium']), 'size': 'sm', 'testid': 'read'}, 'children': c_4}, with_context = false) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ include('ui/card/card-content.html.twig', {'p': {'Class': 'flex flex-1 flex-col gap-2'}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card.html.twig', {'p': {'Variant': 'default', 'Class': 'h-full gap-4 overflow-hidden', 'Attrs': ui_attrs(['data-testid', 'showcase-card'])}, 'children': c_6}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_cols, '4')) ? 'grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4' : 'grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3'))}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/feature-split.html.twig b/packages/twig/ui/blocks/feature-split.html.twig
new file mode 100644
index 0000000..c1137b4
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-split.html.twig
@@ -0,0 +1,45 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-split.json
+    Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four metric cards and the actions), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, features, stats, actions, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_level = (p.level ?? 2) -%}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_stats = (p.stats ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_1 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': (ui_t(ui_eq(v_layout, 'stats')) ? '1/1' : '4/3')}}, with_context = false) }}
+{%- endset -%}
+{%- set c_2 -%}
+  {%- if ui_t(ui_eq(v_layout, 'grid')) %}
+    {%- if ui_t(ui_gt(ui_len(v_features), 0)) %}
+      {{ include('blocks/feature-pairs.html.twig', {'p': {'features': v_features}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'cards')) %}
+    {%- if ui_t(ui_gt(ui_len(v_features), 0)) %}
+      {{ include('blocks/feature-cards.html.twig', {'p': {'features': v_features, 'cols': '1-2', 'item': 'tile'}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'stats')) %}
+    {%- if ui_t(ui_gt(ui_len(v_features), 0)) %}
+      {{ include('blocks/feature-stat-rows.html.twig', {'p': {'features': v_features, 'stats': v_stats}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'metrics')) %}
+    {%- if ui_t(ui_gt(ui_len(v_stats), 0)) %}
+      {{ include('blocks/feature-metric-cards.html.twig', {'p': {'stats': v_stats}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_or([ui_eq(v_layout, 'cards'), ui_eq(v_layout, 'metrics')])) %}
+    {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_1}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/feature-stat-rows.html.twig b/packages/twig/ui/blocks/feature-stat-rows.html.twig
new file mode 100644
index 0000000..77e56d2
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-stat-rows.html.twig
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-stat-rows.json
+    Two figures of FeatureSplit as cards, then three features as checked rows.
+    Props (p): features, stats. -#}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_stats = (p.stats ?? null) -%}
+{%- set c_11 -%}
+  {%- set c_4 -%}
+    {%- for v_s in ui_l(v_stats) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 2)) %}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': '2xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'feature-stat'])}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-4'}, 'children': c_4}, with_context = false) }}
+  {%- set c_10 -%}
+    {%- for v_f in ui_l(v_features) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_9 -%}
+          {%- set c_5 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'check', 'Size': 16}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground'}, 'children': c_5}, with_context = false) }}
+          {%- set c_8 -%}
+            {%- set c_6 -%}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'sm', 'Weight': 'semibold'}, 'children': c_6}, with_context = false) }}
+            {%- set c_7 -%}
+              {{ ui_text(ui_get(v_f, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'min-w-0'}, 'children': c_8}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'feature-item'])}, 'children': c_9}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_10}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/feature-sticky.html.twig b/packages/twig/ui/blocks/feature-sticky.html.twig
new file mode 100644
index 0000000..841e022
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-sticky.html.twig
@@ -0,0 +1,45 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-sticky.json
+    A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item (plain, card), tone, density.
+    Props (p): id, title, features, empty, active, mediaSide, item, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_active = (p.active ?? '') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_item = (p.item ?? 'plain') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_7 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layout-grid', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_6 -%}
+      {%- set c_1 -%}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['md:sticky md:top-8', (ui_t(ui_eq(v_mediaSide, 'start')) ? 'md:order-first' : 'md:order-last')])), 'Attrs': ui_attrs(['data-testid', 'sticky-media'])}, 'children': c_1}, with_context = false) }}
+      {%- set c_5 -%}
+        {%- for v_f in ui_l(v_features) %}
+          {%- set c_4 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 24}}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_2}, with_context = false) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_f, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': ui_s(ui_cnv([(ui_t(ui_eq(v_item, 'card')) ? 'rounded bg-card inset-ring inset-ring-border p-6' : 'py-4'), (ui_t(ui_eq(ui_get(v_f, ['id']), v_active)) ? 'inset-ring inset-ring-foreground' : '')])), 'Attrs': ui_attrs(['data-testid', 'item', 'aria-current', (ui_t(ui_eq(ui_get(v_f, ['id']), v_active)) ? 'true' : null)])}, 'children': c_4}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': ui_s((ui_t(ui_eq(v_density, 'compact')) ? '4' : '8')), 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_5}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-2', 'Class': 'items-start gap-8', 'Attrs': ui_attrs(['data-testid', 'sticky'])}, 'children': c_6}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/feature-tabs.html.twig b/packages/twig/ui/blocks/feature-tabs.html.twig
new file mode 100644
index 0000000..3ec5212
--- /dev/null
+++ b/packages/twig/ui/blocks/feature-tabs.html.twig
@@ -0,0 +1,55 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/feature-tabs.json
+    Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the picture, stack: picture below), tone, density.
+    Props (p): id, title, features, empty, tabsLabel, active, panel, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_tabsLabel = (p.tabsLabel ?? null) -%}
+{%- set v_active = (p.active ?? '') -%}
+{%- set v_panel = (p.panel ?? 'split') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layout-grid', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- set c_2 -%}
+        {%- for v_f in ui_l(v_features) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ include('blocks/switcher-item.html.twig', {'p': {'active': ui_or([ui_eq(ui_get(v_f, ['id']), v_active), ui_and([ui_eq(v_active, ''), ui_eq(v_i, 0)])])}, 'children': c_1}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('blocks/switcher.html.twig', {'p': {'label': v_tabsLabel, 'className': ui_cnv(['w-fit max-w-full flex-wrap'])}, 'children': c_2}, with_context = false) }}
+      {%- for v_f in ui_l(v_features) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_or([ui_eq(ui_get(v_f, ['id']), v_active), ui_and([ui_eq(v_active, ''), ui_eq(v_i, 0)])])) %}
+          {%- set c_6 -%}
+            {%- set c_5 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 24}}, with_context = false) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_f, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': '2xl', 'Weight': 'bold'}, 'children': c_3}, with_context = false) }}
+              {%- set c_4 -%}
+                {{ ui_text(ui_get(v_f, ['text'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4'}, 'children': c_5}, with_context = false) }}
+            {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_f, ['title']), 'ratio': '4/3'}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_panel, 'split')) ? '1-2' : '1')), 'Class': 'items-center gap-8', 'Attrs': ui_attrs(['data-testid', 'tab-panel', 'role', 'tabpanel'])}, 'children': c_6}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/field.html.twig b/packages/twig/ui/blocks/field.html.twig
new file mode 100644
index 0000000..1da0c9f
--- /dev/null
+++ b/packages/twig/ui/blocks/field.html.twig
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/field.json
+    A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the control.
+    Props (p): label, htmlFor, hint, error, className; children: markup. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_htmlFor = (p.htmlFor ?? null) -%}
+{%- set v_hint = (p.hint ?? null) -%}
+{%- set v_error = (p.error ?? null) -%}
+{%- set c_4 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ include('ui/label/label.html.twig', {'p': {'Class': 'text-xs font-bold text-foreground', 'HTMLFor': ui_s(v_htmlFor)}, 'children': c_1}, with_context = false) }}
+  {{ (children ?? '')|raw }}
+  {%- if ui_t(v_error) %}
+    {%- set c_2 -%}
+      {{ ui_text(v_error) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-semibold text-destructive', 'Attrs': ui_attrs(['role', 'alert'])}, 'children': c_2}, with_context = false) }}
+  {%- elseif ui_t(v_hint) %}
+    {%- set c_3 -%}
+      {{ ui_text(v_hint) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex min-w-0 flex-col gap-2', (p.className ?? '')]))}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/figure-block.html.twig b/packages/twig/ui/blocks/figure-block.html.twig
new file mode 100644
index 0000000..1305b51
--- /dev/null
+++ b/packages/twig/ui/blocks/figure-block.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/figure-block.json
+    Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag figure.
+    Props (p): testid, className; children: markup. -#}
+{%- set v_testid = (p.testid ?? null) -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'figure', 'Class': ui_s(ui_cnv([(p.className ?? '')])), 'Attrs': ui_attrs(['data-testid', v_testid])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/file-tree-item.html.twig b/packages/twig/ui/blocks/file-tree-item.html.twig
new file mode 100644
index 0000000..46afad4
--- /dev/null
+++ b/packages/twig/ui/blocks/file-tree-item.html.twig
@@ -0,0 +1,21 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/file-tree-item.json
+    A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide.
+    Props (p): kind, label, selected, expanded, className. -#}
+{%- set v_kind = (p.kind ?? 'file') -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_selected = (p.selected ?? false) -%}
+{%- set v_expanded = (p.expanded ?? false) -%}
+{%- set c_2 -%}
+  {%- if ui_t(ui_eq(v_kind, 'folder')) %}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s((ui_t(v_expanded) ? 'chevron-down' : 'chevron-right')), 'Size': 16}}, with_context = false) }}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'folder-open', 'Size': 16}}, with_context = false) }}
+  {%- else %}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'file', 'Size': 16}}, with_context = false) }}
+  {%- endif %}
+  {%- set c_1 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'whitespace-nowrap', 'Attrs': ui_attrs(['data-slot', 'file-tree-label'])}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/button-plain/button-plain.html.twig', {'p': {'Type': 'button', 'Role': 'treeitem', 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/file-tree-item.variants.json', {'kind': v_kind}), (p.className ?? '')])), 'Attrs': ui_attrs(['aria-selected', v_selected, 'tabindex', (ui_t(v_selected) ? 0 : -1), 'aria-expanded', (ui_t(ui_eq(v_kind, 'folder')) ? v_expanded : null), 'data-slot', 'file-tree-item', 'data-kind', v_kind, 'data-state', (ui_t(v_selected) ? 'selected' : 'default')])}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/file-tree.html.twig b/packages/twig/ui/blocks/file-tree.html.twig
new file mode 100644
index 0000000..9fb6543
--- /dev/null
+++ b/packages/twig/ui/blocks/file-tree.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/file-tree.json
+    The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead` from the utils to the keydown (vertical, no loop).
+    Props (p): label, className; children: markup. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-2 p-2', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'tree', 'aria-label', v_label, 'data-slot', 'file-tree'])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/footer-brand.html.twig b/packages/twig/ui/blocks/footer-brand.html.twig
new file mode 100644
index 0000000..f72584a
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-brand.html.twig
@@ -0,0 +1,24 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-brand.json
+    The brand of FooterSplit: a mark and the brand word over the tagline.
+    Props (p): brand, tagline. -#}
+{%- set v_brand = (p.brand ?? null) -%}
+{%- set v_tagline = (p.tagline ?? null) -%}
+{%- set c_5 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'layers', 'Size': 16}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-8 items-center justify-center rounded bg-foreground text-background'}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ ui_text(v_brand) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}, with_context = false) }}
+  {%- set c_4 -%}
+    {{ ui_text(v_tagline) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'footer-brand'])}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/footer-card.html.twig b/packages/twig/ui/blocks/footer-card.html.twig
new file mode 100644
index 0000000..cf3373c
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-card.html.twig
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-card.json
+    The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card.
+    Props (p): label, brand, groups, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_brand = (p.brand ?? null) -%}
+{%- set v_groups = (p.groups ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_13 -%}
+  {%- set c_12 -%}
+    {%- set c_11 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'hexagon', 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-8 items-center justify-center rounded bg-foreground text-background'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(v_brand) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'bold'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': ui_s(ui_cnv(['h-8 shrink-0', ui_preset('blocks/presets/defaults.json', ['footer', 'brand'])])), 'Attrs': ui_attrs(['data-testid', 'footer-brand'])}, 'children': c_3}, with_context = false) }}
+      {%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+        {%- set c_10 -%}
+          {%- set c_9 -%}
+            {%- for v_g in ui_l(v_groups) %}
+              {%- set c_8 -%}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_g, ['title'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'semibold', 'Class': 'leading-5'}, 'children': c_4}, with_context = false) }}
+                {%- set c_7 -%}
+                  {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+                    {%- set c_6 -%}
+                      {%- set c_5 -%}
+                        {{ ui_text(ui_get(v_item, ['name'])) }}
+                      {%- endset -%}
+                      {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-xs leading-5 text-muted-foreground'])}, 'children': c_5}, with_context = false) }}
+                    {%- endset -%}
+                    {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_6}, with_context = false) }}
+                  {%- endfor %}
+                {%- endset -%}
+                {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-4 p-0'}, 'children': c_7}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_8}, with_context = false) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '0', 'Align': 'start', 'Class': ui_s(ui_cnv(['flex w-full flex-nowrap justify-between', ui_preset('blocks/presets/defaults.json', ['footer', 'groups'])])), 'Attrs': ui_attrs(['data-testid', 'footer-groups'])}, 'children': c_9}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) : v_label), 'className': ui_cnv(['min-w-0 flex-1'])}, 'children': c_10}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex w-full flex-row items-start overflow-hidden bg-muted p-10', ui_preset('blocks/presets/defaults.json', ['footer', 'card'])])), 'Attrs': ui_attrs(['data-testid', 'footer-card'])}, 'children': c_11}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv([ui_cnv(['mx-auto w-full px-4', ui_preset('blocks/presets/defaults.json', ['section', 'landing'])]), 'px-0'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_12}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'footer', 'Class': 'py-8', 'Attrs': ui_attrs(['data-testid', 'site-footer', 'data-layout', 'card', 'aria-label', v_landmarkLabel])}, 'children': c_13}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/footer-channels.html.twig b/packages/twig/ui/blocks/footer-channels.html.twig
new file mode 100644
index 0000000..6ddf930
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-channels.html.twig
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-channels.json
+    The channels of the community as three cards: a glyph over the name and one line.
+    Props (p): extras. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['channels'])), 0)) %}
+  {%- set c_5 -%}
+    {%- for v_c in ui_l(ui_get(v_extras, ['channels'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_4 -%}
+          {%- set c_1 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 20}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'}, 'children': c_1}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_c, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_c, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'footer-channel'])}, 'children': c_4}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-3'}, 'children': c_5}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/footer-columns.html.twig b/packages/twig/ui/blocks/footer-columns.html.twig
new file mode 100644
index 0000000..a400997
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-columns.html.twig
@@ -0,0 +1,36 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-columns.json
+    The link groups of SitemapFooter as columns: a group title over its links, up to five columns.
+    Props (p): label, groups, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_groups = (p.groups ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {%- for v_g in ui_l(v_groups) %}
+        {%- set c_5 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_g, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+          {%- set c_4 -%}
+            {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+              {%- set c_3 -%}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_get(v_item, ['name'])) }}
+                {%- endset -%}
+                {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-sm text-muted-foreground'])}, 'children': c_2}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_3}, with_context = false) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_4}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_5}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1', 'Class': 'grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5', 'Attrs': ui_attrs(['data-testid', 'footer-groups'])}, 'children': c_6}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label])])}, 'children': c_7}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/footer-contacts.html.twig b/packages/twig/ui/blocks/footer-contacts.html.twig
new file mode 100644
index 0000000..803e342
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-contacts.html.twig
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-contacts.json
+    The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value.
+    Props (p): extras. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['contacts'])), 0)) %}
+  {%- set c_6 -%}
+    {%- for v_c in ui_l(ui_get(v_extras, ['contacts'])) %}
+      {%- set c_5 -%}
+        {%- set c_1 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 20}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'}, 'children': c_1}, with_context = false) }}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_c, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_c, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'footer-contact'])}, 'children': c_5}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_6}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/footer-figures.html.twig b/packages/twig/ui/blocks/footer-figures.html.twig
new file mode 100644
index 0000000..4a93c59
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-figures.html.twig
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-figures.json
+    Three figures in a row under the brand of FooterSplit.
+    Props (p): extras. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['stats'])), 0)) %}
+  {%- set c_4 -%}
+    {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Attrs': ui_attrs(['data-testid', 'footer-stat'])}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '8', 'Class': 'flex-wrap'}, 'children': c_4}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/footer-group-cards.html.twig b/packages/twig/ui/blocks/footer-group-cards.html.twig
new file mode 100644
index 0000000..0255c97
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-group-cards.html.twig
@@ -0,0 +1,43 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-group-cards.json
+    The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide screens.
+    Props (p): label, groups, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_groups = (p.groups ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+  {%- set c_9 -%}
+    {%- set c_8 -%}
+      {%- for v_g in ui_l(v_groups) %}
+        {%- set c_7 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_g, ['icon'])), 'Size': 20}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_g, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}, with_context = false) }}
+          {%- set c_6 -%}
+            {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+              {%- set c_5 -%}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_item, ['name'])) }}
+                {%- endset -%}
+                {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-sm text-muted-foreground']), 'variant': 'muted', 'size': 'sm'}, 'children': c_4}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_5}, with_context = false) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_6}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_7}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'}, 'children': c_8}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label])])}, 'children': c_9}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/footer-link-columns.html.twig b/packages/twig/ui/blocks/footer-link-columns.html.twig
new file mode 100644
index 0000000..61859eb
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-link-columns.html.twig
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-link-columns.json
+    The first three link groups of FooterSplit as small columns beside each other.
+    Props (p): label, groups, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_groups = (p.groups ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {%- for v_g in ui_l(v_groups) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 3)) %}
+          {%- set c_5 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_g, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_4 -%}
+              {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+                {%- set c_3 -%}
+                  {%- set c_2 -%}
+                    {{ ui_text(ui_get(v_item, ['name'])) }}
+                  {%- endset -%}
+                  {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-sm text-muted-foreground']), 'variant': 'muted', 'size': 'sm'}, 'children': c_2}, with_context = false) }}
+                {%- endset -%}
+                {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_3}, with_context = false) }}
+              {%- endfor %}
+            {%- endset -%}
+            {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_5}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-8 sm:grid-cols-3'}, 'children': c_6}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label])])}, 'children': c_7}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/footer-points.html.twig b/packages/twig/ui/blocks/footer-points.html.twig
new file mode 100644
index 0000000..3c020fb
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-points.html.twig
@@ -0,0 +1,28 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-points.json
+    Four points with their glyphs in a column, under the tagline of FooterSplit.
+    Props (p): extras, title. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['points'])), 0)) %}
+  {%- set c_4 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+    {%- for v_p in ui_l(ui_get(v_extras, ['points'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 4)) %}
+        {%- set c_3 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 16}}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_p, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'footer-point'])}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'start'}, 'children': c_4}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/footer-signup-card.html.twig b/packages/twig/ui/blocks/footer-signup-card.html.twig
new file mode 100644
index 0000000..1ee5eb7
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-signup-card.html.twig
@@ -0,0 +1,36 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-signup-card.json
+    The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note.
+    Props (p): id, labels. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_8 -%}
+  {%- set c_2 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'mail', 'Size': 16}}, with_context = false) }}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['signup'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_2}, with_context = false) }}
+  {%- set c_6 -%}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_labels, ['email'])) }}
+    {%- endset -%}
+    {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_3}, with_context = false) }}
+    {%- set c_5 -%}
+      {{ include('ui/input/input.html.twig', {'p': {'Type': 'email', 'Name': 'email', 'Class': 'min-w-0 flex-1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_labels, ['subscribe'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_4}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'w-full flex-wrap'}, 'children': c_5}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/form/form.html.twig', {'p': {'Method': 'dialog', 'Class': ui_s(ui_cnv(['w-full max-w-md', (ui_t(false) ? 'mx-auto' : '')])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_6}, with_context = false) }}
+  {%- set c_7 -%}
+    {{ ui_text(ui_get(v_labels, ['note'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'signup'])}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/footer-sitemap.html.twig b/packages/twig/ui/blocks/footer-sitemap.html.twig
new file mode 100644
index 0000000..df0bd65
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-sitemap.html.twig
@@ -0,0 +1,13 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-sitemap.json
+    The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no link).
+    Props (p): href, label. -#}
+{%- set v_href = (p.href ?? null) -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- if ui_t(v_href) %}
+  {%- set c_1 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(v_href), 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'footer-sitemap'])}, 'children': c_1}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/footer-split.html.twig b/packages/twig/ui/blocks/footer-split.html.twig
new file mode 100644
index 0000000..5b36343
--- /dev/null
+++ b/packages/twig/ui/blocks/footer-split.html.twig
@@ -0,0 +1,96 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/footer-split.json
+    A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two actions, or the community channels and figures), mediaSide, tone.
+    Props (p): id, label, brand, tagline, copyright, groups, extras, labels, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? 'footer') -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_brand = (p.brand ?? null) -%}
+{%- set v_tagline = (p.tagline ?? null) -%}
+{%- set v_copyright = (p.copyright ?? null) -%}
+{%- set v_groups = (p.groups ?? null) -%}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'stats') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_14 -%}
+  {%- set c_13 -%}
+    {%- if ui_t(ui_eq(v_layout, 'stats')) %}
+      {%- set c_5 -%}
+        {%- set c_2 -%}
+          {%- set c_1 -%}
+            {{ include('blocks/footer-brand.html.twig', {'p': {'brand': v_brand, 'tagline': v_tagline}}, with_context = false) }}
+            {{ include('blocks/footer-figures.html.twig', {'p': {'extras': v_extras}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'start'}, 'children': c_1}, with_context = false) }}
+          {{ include('blocks/footer-sitemap.html.twig', {'p': {'href': ui_get(v_extras, ['sitemapHref']), 'label': ui_get(v_labels, ['sitemap'])}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '6', 'Align': 'start', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_2}, with_context = false) }}
+        {{ include('blocks/footer-group-cards.html.twig', {'p': {'label': v_label, 'groups': v_groups, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+        {%- set c_4 -%}
+          {%- set c_3 -%}
+            {{ ui_text(v_copyright) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'border-t border-border pt-6'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '8', 'Align': 'stretch'}, 'children': c_5}, with_context = false) }}
+    {%- else %}
+      {%- set c_12 -%}
+        {%- if ui_t(ui_eq(v_mediaSide, 'start')) %}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_brand, 'ratio': '4/3'}}, with_context = false) }}
+        {%- endif %}
+        {%- set c_11 -%}
+          {%- if ui_t(ui_or([ui_eq(v_layout, 'points'), ui_eq(v_layout, 'links')])) %}
+            {{ include('blocks/footer-brand.html.twig', {'p': {'brand': v_brand, 'tagline': v_tagline}}, with_context = false) }}
+          {%- else %}
+            {%- set c_8 -%}
+              {%- set c_6 -%}
+                {{ ui_text((ui_t(ui_eq(v_layout, 'newsletter')) ? ui_get(v_labels, ['loopTitle']) : (ui_t(ui_eq(v_layout, 'channels')) ? ui_get(v_labels, ['joinTitle']) : ui_get(v_labels, ['title'])))) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_6}, with_context = false) }}
+              {%- set c_7 -%}
+                {{ ui_text((ui_t(ui_eq(v_layout, 'newsletter')) ? ui_get(v_labels, ['loopText']) : (ui_t(ui_eq(v_layout, 'channels')) ? ui_get(v_labels, ['joinText']) : ui_get(v_labels, ['text'])))) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'start'}, 'children': c_8}, with_context = false) }}
+          {%- endif %}
+          {%- if ui_t(ui_eq(v_layout, 'points')) %}
+            {{ include('blocks/footer-points.html.twig', {'p': {'extras': v_extras, 'title': ui_get(v_labels, ['points'])}}, with_context = false) }}
+          {%- endif %}
+          {%- if ui_t(ui_eq(v_layout, 'newsletter')) %}
+            {{ include('blocks/footer-signup-card.html.twig', {'p': {'id': v_id, 'labels': v_labels}}, with_context = false) }}
+          {%- endif %}
+          {%- if ui_t(ui_or([ui_eq(v_layout, 'links'), ui_eq(v_layout, 'newsletter')])) %}
+            {{ include('blocks/footer-link-columns.html.twig', {'p': {'label': v_label, 'groups': v_groups, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+          {%- endif %}
+          {%- if ui_t(ui_eq(v_layout, 'contacts')) %}
+            {{ include('blocks/footer-contacts.html.twig', {'p': {'extras': v_extras}}, with_context = false) }}
+            {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_labels, ['cta']), 'primaryHref': ui_get(v_extras, ['ctaHref']), 'secondary': ui_get(v_labels, ['secondary']), 'secondaryHref': ui_get(v_extras, ['secondaryHref'])}}, with_context = false) }}
+          {%- endif %}
+          {%- if ui_t(ui_eq(v_layout, 'channels')) %}
+            {{ include('blocks/footer-channels.html.twig', {'p': {'extras': v_extras}}, with_context = false) }}
+            {{ include('blocks/footer-figures.html.twig', {'p': {'extras': v_extras}}, with_context = false) }}
+          {%- endif %}
+          {%- set c_10 -%}
+            {%- set c_9 -%}
+              {{ ui_text(v_copyright) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_9}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'border-t border-border pt-6'}, 'children': c_10}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '8', 'Align': 'stretch'}, 'children': c_11}, with_context = false) }}
+        {%- if ui_t(not (ui_eq(v_mediaSide, 'start'))) %}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_brand, 'ratio': '4/3'}}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 items-center gap-8 lg:grid-cols-2'}, 'children': c_12}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'py-12'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_13}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'footer', 'Class': ui_s(ui_cnv(['border-t border-border', (ui_t(ui_eq(v_tone, 'muted')) ? 'bg-muted' : '')])), 'Attrs': ui_attrs(['data-testid', 'footer-split', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_14}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/hero-badge.html.twig b/packages/twig/ui/blocks/hero-badge.html.twig
new file mode 100644
index 0000000..2f770ce
--- /dev/null
+++ b/packages/twig/ui/blocks/hero-badge.html.twig
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-badge.json
+    A composite badge on a dark band: an optional small mark beside a label.
+    Props (p): label, mark. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_mark = (p.mark ?? null) -%}
+{%- set c_3 -%}
+  {%- if ui_t(v_mark) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_mark) }}
+    {%- endset -%}
+    {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'badge-mark'])}, 'children': c_1}, with_context = false) }}
+  {%- endif %}
+  {%- set c_2 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-5 text-background'}, 'children': c_2}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30', ui_preset('blocks/presets/defaults.json', ['hero', 'badge'])])), 'Attrs': ui_attrs(['data-testid', 'section-badge'])}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/hero-classic.html.twig b/packages/twig/ui/blocks/hero-classic.html.twig
new file mode 100644
index 0000000..f2db353
--- /dev/null
+++ b/packages/twig/ui/blocks/hero-classic.html.twig
@@ -0,0 +1,72 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-classic.json
+    The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster). Axes: layout, media kind and side, scale, tone, density, actions mode.
+    Props (p): id, title, text, level, badge, topics, actions, media, layout, scale, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_badge = (p.badge ?? null) -%}
+{%- set v_topics = (p.topics ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_media = (p.media ?? null) -%}
+{%- set v_layout = (p.layout ?? 'centered') -%}
+{%- set v_scale = (p.scale ?? 'default') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'roomy') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_mediaKind = ui_coalesce([ui_get(v_media, ['kind']), 'none']) -%}
+{%- set v_mediaSide = ui_coalesce([ui_get(v_media, ['side']), 'end']) -%}
+{%- set f_5 -%}
+  {%- if ui_t(ui_and([ui_eq(v_mediaKind, 'code'), ui_get(v_media, ['lines']), ui_gt(ui_len(ui_get(v_media, ['lines'])), 0), ui_get(v_media, ['codeTitle']), ui_get(v_media, ['prompt'])])) %}
+    {{ include('blocks/code-window.html.twig', {'p': {'title': ui_get(v_media, ['codeTitle']), 'prompt': ui_get(v_media, ['prompt']), 'lines': ui_get(v_media, ['lines'])}}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_mediaKind, 'cluster')) %}
+    {%- set c_9 -%}
+      {%- set c_6 -%}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4'}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['w-full', '']))}, 'children': c_6}, with_context = false) }}
+      {%- set c_7 -%}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['w-full', '-translate-y-4']))}, 'children': c_7}, with_context = false) }}
+      {%- set c_8 -%}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4'}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['w-full', '']))}, 'children': c_8}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '3', 'Class': 'items-end gap-4', 'Attrs': ui_attrs(['data-testid', 'cluster'])}, 'children': c_9}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_or([ui_eq(v_mediaKind, 'image')])) %}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{%- set c_10 -%}
+  {{ include('blocks/backdrop.html.twig', {'p': {'kind': (ui_t(ui_eq(v_mediaKind, 'backdrop')) ? 'image' : 'none'), 'alt': v_title}}, with_context = false) }}
+  {%- if ui_t(ui_get(v_actions, ['cta'])) %}
+    {%- if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'form')) %}
+      {%- set c_4 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_actions, ['emailLabel'])) }}
+        {%- endset -%}
+        {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+        {%- set c_3 -%}
+          {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'prompt', 'Class': 'min-w-0 flex-1', 'Placeholder': ui_s(ui_get(v_actions, ['emailLabel'])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_actions, ['cta'])) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Href': ui_s(ui_get(v_actions, ['href'])), 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'w-full flex-wrap'}, 'children': c_3}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['w-full max-w-xl', (ui_t(ui_eq(v_layout, 'centered')) ? 'mx-auto' : '')])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_4}, with_context = false) }}
+    {%- else %}
+      {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': (ui_t(ui_eq(v_layout, 'centered')) ? 'center' : 'start')}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_and([v_topics, ui_gt(ui_len(v_topics), 0)])) %}
+    {{ include('blocks/topic-chips.html.twig', {'p': {'topics': v_topics}}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'heading': {'level': v_level, 'scale': v_scale, 'badge': v_badge}, 'layout': (ui_t(ui_eq(v_layout, 'split')) ? 'split' : 'stack'), 'align': (ui_t(ui_eq(v_layout, 'split')) ? 'start' : 'center'), 'media': {'show': ui_or([ui_eq(v_mediaKind, 'image'), ui_eq(v_mediaKind, 'code'), ui_eq(v_mediaKind, 'cluster')]), 'side': v_mediaSide}, 'tone': v_tone, 'density': v_density, 'className': ui_cnv([(ui_t(ui_eq((ui_t(ui_eq(v_mediaKind, 'backdrop')) ? 'image' : 'none'), 'image')) ? 'relative isolate overflow-hidden' : '')]), 'landmarkLabel': v_landmarkLabel, 'aside': f_5}, 'children': c_10}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/hero-head.html.twig b/packages/twig/ui/blocks/hero-head.html.twig
new file mode 100644
index 0000000..bc3ed32
--- /dev/null
+++ b/packages/twig/ui/blocks/hero-head.html.twig
@@ -0,0 +1,64 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-head.json
+    The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a call to action.
+    Props (p): brand, brandHref, links, current, login, loginHref, cta, href, skip, navLabel, landmarkLabel. -#}
+{%- set v_brand = (p.brand ?? null) -%}
+{%- set v_brandHref = (p.brandHref ?? null) -%}
+{%- set v_links = (p.links ?? null) -%}
+{%- set v_current = (p.current ?? '') -%}
+{%- set v_login = (p.login ?? null) -%}
+{%- set v_loginHref = (p.loginHref ?? null) -%}
+{%- set v_cta = (p.cta ?? null) -%}
+{%- set v_href = (p.href ?? null) -%}
+{%- set v_skip = (p.skip ?? null) -%}
+{%- set v_navLabel = (p.navLabel ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_10 -%}
+  {%- if ui_t(v_skip) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_skip) }}
+    {%- endset -%}
+    {{ include('ui/link-plain/link-plain.html.twig', {'p': {'Href': '#main-content', 'Class': 'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'skip-link'])}, 'children': c_1}, with_context = false) }}
+  {%- endif %}
+  {%- set c_2 -%}
+    {{ ui_text(v_brand) }}
+  {%- endset -%}
+  {{ include('blocks/menu-entry.html.twig', {'p': {'href': v_brandHref, 'className': ui_cnv([ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'small']), 'font-medium leading-6 text-background'])]), 'testid': 'brand'}, 'children': c_2}, with_context = false) }}
+  {%- if ui_t(ui_and([v_links, ui_gt(ui_len(v_links), 0)])) %}
+    {%- set c_6 -%}
+      {%- set c_5 -%}
+        {%- for v_l in ui_l(v_links) %}
+          {%- if ui_t(ui_get(v_l, ['href'])) %}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_l, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_get(v_l, ['href'])), 'Variant': 'default', 'AriaCurrent': ui_s((ui_t(ui_eq(ui_get(v_l, ['id']), v_current)) ? 'page' : null)), 'Class': 'text-xs font-medium leading-5 text-background', 'Attrs': ui_attrs(['data-testid', 'nav-link'])}, 'children': c_3}, with_context = false) }}
+          {%- else %}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_l, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-xs font-medium leading-5 text-background', 'Attrs': ui_attrs(['data-testid', 'nav-link'])}, 'children': c_4}, with_context = false) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '8', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_5}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [v_navLabel, v_landmarkLabel])) : v_navLabel), 'testid': 'site-nav'}, 'children': c_6}, with_context = false) }}
+  {%- endif %}
+  {%- set c_9 -%}
+    {%- if ui_t(v_login) %}
+      {%- set c_7 -%}
+        {{ ui_text(v_login) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Href': ui_s(v_loginHref), 'Variant': 'ghost', 'Size': 'sm', 'Class': 'text-background hover:bg-background/10', 'Attrs': ui_attrs(['data-testid', 'nav-login'])}, 'children': c_7}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(v_cta) %}
+      {%- set c_8 -%}
+        {{ ui_text(v_cta) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Href': ui_s(v_href), 'Variant': 'secondary', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'header-cta'])}, 'children': c_8}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_9}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'header', 'Class': ui_s(ui_cnv(['flex w-full flex-wrap items-center justify-between pr-4', ui_preset('blocks/presets/defaults.json', ['hero', 'head'])])), 'Attrs': ui_attrs(['data-testid', 'hero-head', 'aria-label', v_landmarkLabel])}, 'children': c_10}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/hero-prompt.html.twig b/packages/twig/ui/blocks/hero-prompt.html.twig
new file mode 100644
index 0000000..c4875e8
--- /dev/null
+++ b/packages/twig/ui/blocks/hero-prompt.html.twig
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-prompt.json
+    A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic pills.
+    Props (p): title, level, badge, badgeMark, actions, composer, nav, topics, density, landmarkLabel. -#}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_badge = (p.badge ?? null) -%}
+{%- set v_badgeMark = (p.badgeMark ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_composer = (p.composer ?? null) -%}
+{%- set v_nav = (p.nav ?? null) -%}
+{%- set v_topics = (p.topics ?? null) -%}
+{%- set v_density = (p.density ?? 'roomy') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {%- set c_2 -%}
+      {{ include('blocks/hero-head.html.twig', {'p': {'brand': ui_get(v_nav, ['brand']), 'links': ui_get(v_nav, ['links']), 'current': ui_get(v_nav, ['current']), 'login': ui_get(v_nav, ['login']), 'loginHref': ui_get(v_nav, ['loginHref']), 'skip': ui_get(v_nav, ['skip']), 'navLabel': ui_get(v_nav, ['label']), 'cta': ui_get(v_actions, ['cta']), 'href': ui_get(v_actions, ['href']), 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+      {%- set c_1 -%}
+        {%- if ui_t(v_badge) %}
+          {{ include('blocks/hero-badge.html.twig', {'p': {'label': v_badge, 'mark': v_badgeMark}}, with_context = false) }}
+        {%- endif %}
+        {{ include('blocks/weighted-title.html.twig', {'p': {'id': 'home-hero-title', 'title': v_title, 'weights': ui_preset('blocks/presets/defaults.json', ['hero', 'titleWeights']), 'level': v_level}}, with_context = false) }}
+        {%- if ui_t(ui_eq(ui_get(v_actions, ['mode']), 'form')) %}
+          {{ include('blocks/prompt-composer.html.twig', {'p': {'label': ui_get(v_actions, ['emailLabel']), 'attachLabel': ui_get(v_composer, ['attachLabel']), 'modelLabel': ui_get(v_composer, ['modelLabel']), 'send': ui_get(v_actions, ['cta']), 'href': ui_get(v_actions, ['href'])}}, with_context = false) }}
+        {%- elseif ui_t(ui_get(v_actions, ['cta'])) %}
+          {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref']), 'align': (ui_t(true) ? 'center' : 'start')}}, with_context = false) }}
+        {%- endif %}
+        {%- if ui_t(ui_and([v_topics, ui_gt(ui_len(v_topics), 0)])) %}
+          {{ include('blocks/topic-chips.html.twig', {'p': {'topics': v_topics, 'tone': 'inverse'}}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': 'center', 'Class': ui_s(ui_cnv(['mx-auto w-full pt-24 pb-16', ui_preset('blocks/presets/defaults.json', ['hero', 'column'])])), 'Attrs': ui_attrs(['data-testid', 'hero-column'])}, 'children': c_1}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': 'stretch'}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full px-8', ui_preset('blocks/presets/defaults.json', ['hero', 'container'])])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_3}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv(['flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70', ui_preset('blocks/presets/defaults.json', ['hero', 'band'])])), 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : 'home-hero-title'), 'data-testid', 'section', 'data-tone', 'inverse', 'data-density', v_density, 'data-chrome', 'nav', 'aria-label', v_landmarkLabel])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/hero-split-extras.html.twig b/packages/twig/ui/blocks/hero-split-extras.html.twig
new file mode 100644
index 0000000..d46a463
--- /dev/null
+++ b/packages/twig/ui/blocks/hero-split-extras.html.twig
@@ -0,0 +1,124 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-split-extras.json
+    What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small feature cards, or a quote with its author over three figures.
+    Props (p): content, extra. -#}
+{%- set v_content = (p.content ?? null) -%}
+{%- set v_extra = (p.extra ?? 'none') -%}
+{%- if ui_t(ui_and([ui_eq(v_extra, 'stats'), ui_gt(ui_len(ui_get(v_content, ['stats'])), 0)])) %}
+  {%- set c_4 -%}
+    {%- for v_s in ui_l(ui_get(v_content, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': '2xl', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'hero-stat'])}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-3 gap-4', 'Attrs': ui_attrs(['data-testid', 'hero-stats'])}, 'children': c_4}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_extra, 'avatars'), ui_gt(ui_len(ui_get(v_content, ['people'])), 0)])) %}
+  {%- set c_7 -%}
+    {%- set c_5 -%}
+      {%- for v_p in ui_l(ui_get(v_content, ['people'])) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 4)) %}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_p, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_5}, with_context = false) }}
+    {%- set c_6 -%}
+      {{ ui_text(ui_get(v_content, ['proof'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-testid', 'hero-proof'])}, 'children': c_7}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_extra, 'minis'), ui_gt(ui_len(ui_get(v_content, ['features'])), 0)])) %}
+  {%- set c_13 -%}
+    {%- for v_f in ui_l(ui_get(v_content, ['features'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 2)) %}
+        {%- set c_12 -%}
+          {%- set c_8 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 20}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_8}, with_context = false) }}
+          {%- set c_11 -%}
+            {%- set c_9 -%}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_9}, with_context = false) }}
+            {%- set c_10 -%}
+              {{ ui_text(ui_get(v_f, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_10}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_11}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'hero-mini'])}, 'children': c_12}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2', 'Attrs': ui_attrs(['data-testid', 'hero-minis'])}, 'children': c_13}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_extra, 'quote'), ui_gt(ui_len(ui_get(v_content, ['people'])), 0)])) %}
+  {%- set c_24 -%}
+    {%- for v_p in ui_l(ui_get(v_content, ['people'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 1)) %}
+        {%- set c_19 -%}
+          {%- set c_14 -%}
+            {{ ui_text(ui_get(v_p, ['quote'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Tag': 'blockquote', 'Class': 'text-lg font-medium'}, 'children': c_14}, with_context = false) }}
+          {%- set c_18 -%}
+            {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_p, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}, with_context = false) }}
+            {%- set c_17 -%}
+              {%- set c_15 -%}
+                {{ ui_text(ui_get(v_p, ['author'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_15}, with_context = false) }}
+              {%- set c_16 -%}
+                {{ ui_text(ui_get(v_p, ['role'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_16}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_17}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_18}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/figure-block.html.twig', {'p': {'className': ui_cnv(['flex flex-col gap-4']), 'testid': 'hero-quote'}, 'children': c_19}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+    {%- set c_23 -%}
+      {%- for v_s in ui_l(ui_get(v_content, ['stats'])) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 3)) %}
+          {%- set c_22 -%}
+            {%- set c_20 -%}
+              {{ ui_text(ui_get(v_s, ['value'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': '2xl', 'Weight': 'semibold'}, 'children': c_20}, with_context = false) }}
+            {%- set c_21 -%}
+              {{ ui_text(ui_get(v_s, ['label'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_21}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'hero-stat'])}, 'children': c_22}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-3 gap-4', 'Attrs': ui_attrs(['data-testid', 'hero-stats'])}, 'children': c_23}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_24}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/hero-split-media.html.twig b/packages/twig/ui/blocks/hero-split-media.html.twig
new file mode 100644
index 0000000..5661422
--- /dev/null
+++ b/packages/twig/ui/blocks/hero-split-media.html.twig
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-split-media.json
+    What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with captions, or a picture with two plan cards floating over it.
+    Props (p): content, alt, media. -#}
+{%- set v_content = (p.content ?? null) -%}
+{%- set v_alt = (p.alt ?? null) -%}
+{%- set v_media = (p.media ?? 'picture') -%}
+{%- if ui_t(ui_eq(v_media, 'picture')) %}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_alt, 'ratio': '4/3'}}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_eq(v_media, 'card')) %}
+  {{ include('blocks/offer-media.html.twig', {'p': {'alt': v_alt, 'card': ui_get(v_content, ['card'])}}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_media, 'grid'), ui_gt(ui_len(ui_get(v_content, ['features'])), 0)])) %}
+  {%- set c_3 -%}
+    {%- for v_f in ui_l(ui_get(v_content, ['features'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 4)) %}
+        {%- set c_2 -%}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_f, ['title']), 'ratio': '1/1'}}, with_context = false) }}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_1}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/figure-block.html.twig', {'p': {'className': ui_cnv(['flex flex-col gap-2']), 'testid': 'hero-tile'}, 'children': c_2}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-4', 'Attrs': ui_attrs(['data-testid', 'hero-grid'])}, 'children': c_3}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_media, 'plans'), ui_gt(ui_len(ui_get(v_content, ['plans'])), 0)])) %}
+  {%- set c_8 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_alt, 'ratio': '4/3'}}, with_context = false) }}
+    {%- for v_p in ui_l(ui_get(v_content, ['plans'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 2)) %}
+        {%- set c_7 -%}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_p, ['name'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+          {%- set c_6 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'check', 'Size': 16}}, with_context = false) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_p, ['tagline'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_6}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': ui_s(ui_cnv(['absolute w-48 rounded bg-card p-4 shadow-lg', (ui_t(ui_eq(v_i, 0)) ? 'top-8 left-4' : 'right-4 bottom-8')])), 'Attrs': ui_attrs(['data-testid', 'hero-plan'])}, 'children': c_7}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'relative', 'Attrs': ui_attrs(['data-testid', 'hero-media'])}, 'children': c_8}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/hero-split.html.twig b/packages/twig/ui/blocks/hero-split.html.twig
new file mode 100644
index 0000000..580cbc0
--- /dev/null
+++ b/packages/twig/ui/blocks/hero-split.html.twig
@@ -0,0 +1,24 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/hero-split.json
+    A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes: extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with captions, plans: two plan cards on the picture), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, actions, content, extra, media, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_content = (p.content ?? null) -%}
+{%- set v_extra = (p.extra ?? 'stats') -%}
+{%- set v_media = (p.media ?? 'picture') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_1 -%}
+  {{ include('blocks/hero-split-media.html.twig', {'p': {'content': v_content, 'alt': v_title, 'media': v_media}}, with_context = false) }}
+{%- endset -%}
+{%- set c_2 -%}
+  {{ include('blocks/hero-split-extras.html.twig', {'p': {'content': v_content, 'extra': v_extra}}, with_context = false) }}
+  {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel, 'aside': f_1}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/icon-tab.html.twig b/packages/twig/ui/blocks/icon-tab.html.twig
new file mode 100644
index 0000000..3519b68
--- /dev/null
+++ b/packages/twig/ui/blocks/icon-tab.html.twig
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/icon-tab.json
+    One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key movement between tabs is the job of IconTabs (see roving).
+    Props (p): active, label, className; children: markup. -#}
+{%- set v_active = (p.active ?? false) -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/button-plain/button-plain.html.twig', {'p': {'Type': 'button', 'Role': 'tab', 'AriaLabel': ui_s(v_label), 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/icon-tab.variants.json', {'state': (ui_t(v_active) ? 'active' : 'default')}), (p.className ?? '')])), 'Attrs': ui_attrs(['aria-selected', v_active, 'tabindex', (ui_t(v_active) ? 0 : -1), 'data-slot', 'icon-tab', 'data-state', (ui_t(v_active) ? 'active' : 'default')])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/icon-tabs.html.twig b/packages/twig/ui/blocks/icon-tabs.html.twig
new file mode 100644
index 0000000..d49e7e5
--- /dev/null
+++ b/packages/twig/ui/blocks/icon-tabs.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/icon-tabs.json
+    A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).
+    Props (p): label, className; children: markup. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex items-center gap-2', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'tablist', 'aria-label', v_label, 'data-slot', 'icon-tabs'])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/icon-wall.html.twig b/packages/twig/ui/blocks/icon-wall.html.twig
new file mode 100644
index 0000000..9732070
--- /dev/null
+++ b/packages/twig/ui/blocks/icon-wall.html.twig
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/icon-wall.json
+    A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the label, chip: icon beside it), tone, density.
+    Props (p): id, title, features, empty, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_features = (p.features ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_cols = (p.cols ?? '4') -%}
+{%- set v_item = (p.item ?? 'tile') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_askedCols = (ui_t(ui_and([ui_eq(v_item, 'chip'), ui_eq(v_cols, '6')])) ? '2-6' : (ui_t(ui_eq(v_cols, '2')) ? '2' : (ui_t(ui_eq(v_cols, '3')) ? '2-3' : (ui_t(ui_eq(v_cols, '4')) ? '2-4' : '3-6')))) -%}
+{%- set v_wallCols = ui_fit_cols(v_askedCols, ui_len(v_features)) -%}
+{%- set c_4 -%}
+  {%- if ui_t(ui_eq(ui_len(v_features), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layout-grid', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_3 -%}
+      {%- for v_f in ui_l(v_features) %}
+        {%- set c_2 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': ui_i((ui_t(ui_eq(v_item, 'tile')) ? 24 : 16))}}, with_context = false) }}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_f, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex items-center gap-2', 'rounded bg-card inset-ring inset-ring-border', (ui_t(ui_eq(v_item, 'tile')) ? ui_cnv(['flex-col justify-center text-center', (ui_t(ui_eq(v_density, 'compact')) ? 'p-4' : 'p-6')]) : 'px-4 py-2')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_2}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s(v_wallCols), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_3}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/job-board.html.twig b/packages/twig/ui/blocks/job-board.html.twig
new file mode 100644
index 0000000..557190c
--- /dev/null
+++ b/packages/twig/ui/blocks/job-board.html.twig
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/job-board.json
+    Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place, the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide), tone.
+    Props (p): id, title, lead, jobs, departments, labels, layout, salary, tone, empty, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_jobs = (p.jobs ?? null) -%}
+{%- set v_departments = (p.departments ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_salary = (p.salary ?? 'hide') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_len(v_jobs), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'briefcase', 'title': v_empty}}, with_context = false) }}
+  {%- elseif ui_t(ui_eq(v_layout, 'grouped')) %}
+    {%- set c_11 -%}
+      {%- for v_d in ui_l(v_departments) %}
+        {%- set c_10 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_d, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_tpl(ui_get(v_labels, ['count']), [ui_len(ui_where(v_jobs, 'dept', ui_get(v_d, ['id'])))])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'baseline', 'Justify': 'between'}, 'children': c_3}, with_context = false) }}
+          {%- set c_9 -%}
+            {%- for v_j in ui_l(ui_where(v_jobs, 'dept', ui_get(v_d, ['id']))) %}
+              {%- set c_8 -%}
+                {%- set c_6 -%}
+                  {%- set c_4 -%}
+                    {{ ui_text(ui_get(v_j, ['title'])) }}
+                  {%- endset -%}
+                  {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_j, ['href']), 'className': ui_cnv(['font-medium'])}, 'children': c_4}, with_context = false) }}
+                  {%- set c_5 -%}
+                    {{ ui_text(ui_tpl('{0}, {1}', [ui_get(v_j, ['location']), ui_get(v_j, ['type'])])) }}
+                  {%- endset -%}
+                  {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+                {%- endset -%}
+                {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_6}, with_context = false) }}
+                {%- set c_7 -%}
+                  {{ ui_text(ui_get(v_j, ['type'])) }}
+                {%- endset -%}
+                {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'outline', 'Size': 'default'}, 'children': c_7}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex flex-wrap items-center justify-between gap-4 border-b border-border py-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}, with_context = false) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col'}, 'children': c_9}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'group'])}, 'children': c_10}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '8', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'groups'])}, 'children': c_11}, with_context = false) }}
+  {%- else %}
+    {{ include('blocks/job-cards.html.twig', {'p': {'jobs': v_jobs, 'departments': v_departments, 'labels': v_labels, 'layout': v_layout, 'salary': v_salary}}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'measure': (ui_t(ui_eq(v_layout, 'grouped')) ? '3xl' : 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_12}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/job-cards.html.twig b/packages/twig/ui/blocks/job-cards.html.twig
new file mode 100644
index 0000000..f9a4a35
--- /dev/null
+++ b/packages/twig/ui/blocks/job-cards.html.twig
@@ -0,0 +1,154 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/job-cards.json
+    The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply) or as a table.
+    Props (p): jobs, departments, labels, layout, salary. -#}
+{%- set v_jobs = (p.jobs ?? null) -%}
+{%- set v_departments = (p.departments ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_salary = (p.salary ?? 'hide') -%}
+{%- if ui_t(ui_eq(v_layout, 'table')) %}
+  {%- set c_21 -%}
+    {%- set c_20 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_labels, ['caption'])) }}
+      {%- endset -%}
+      {{ include('ui/table/table-caption.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+      {%- set c_10 -%}
+        {%- set c_9 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_labels, ['role'])) }}
+          {%- endset -%}
+          {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'px-4 py-2'}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_labels, ['team'])) }}
+          {%- endset -%}
+          {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'hidden py-2 md:table-cell'}, 'children': c_3}, with_context = false) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_labels, ['location'])) }}
+          {%- endset -%}
+          {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'hidden py-2 sm:table-cell'}, 'children': c_4}, with_context = false) }}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_labels, ['type'])) }}
+          {%- endset -%}
+          {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_5}, with_context = false) }}
+          {%- if ui_t(ui_eq(v_salary, 'show')) %}
+            {%- set c_6 -%}
+              {{ ui_text(ui_get(v_labels, ['salary'])) }}
+            {%- endset -%}
+            {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'hidden py-2 md:table-cell'}, 'children': c_6}, with_context = false) }}
+          {%- endif %}
+          {%- set c_8 -%}
+            {%- set c_7 -%}
+              {{ ui_text(ui_get(v_labels, ['apply'])) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_7}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2 pr-4'}, 'children': c_8}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/table/table-row.html.twig', {'p': {}, 'children': c_9}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/table/table-head.html.twig', {'p': {'Class': 'bg-muted'}, 'children': c_10}, with_context = false) }}
+      {%- set c_19 -%}
+        {%- for v_j in ui_l(v_jobs) %}
+          {%- set c_18 -%}
+            {%- set c_11 -%}
+              {{ ui_text(ui_get(v_j, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'px-4 py-4 font-medium'}, 'children': c_11}, with_context = false) }}
+            {%- set c_12 -%}
+              {{ ui_text(ui_first_of(ui_where(v_departments, 'id', ui_get(v_j, ['dept'])), 'name')) }}
+            {%- endset -%}
+            {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'hidden md:table-cell'}, 'children': c_12}, with_context = false) }}
+            {%- set c_13 -%}
+              {{ ui_text(ui_get(v_j, ['location'])) }}
+            {%- endset -%}
+            {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'hidden sm:table-cell'}, 'children': c_13}, with_context = false) }}
+            {%- set c_14 -%}
+              {{ ui_text(ui_get(v_j, ['type'])) }}
+            {%- endset -%}
+            {{ include('ui/table/table-cell.html.twig', {'p': {}, 'children': c_14}, with_context = false) }}
+            {%- if ui_t(ui_eq(v_salary, 'show')) %}
+              {%- set c_15 -%}
+                {{ ui_text(ui_get(v_j, ['salary'])) }}
+              {%- endset -%}
+              {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'hidden md:table-cell'}, 'children': c_15}, with_context = false) }}
+            {%- endif %}
+            {%- set c_17 -%}
+              {%- set c_16 -%}
+                {{ ui_text(ui_get(v_labels, ['apply'])) }}
+              {%- endset -%}
+              {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_j, ['href']), 'className': ui_cnv(['font-medium'])}, 'children': c_16}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'pr-4 text-right'}, 'children': c_17}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/table/table-row.html.twig', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_18}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/table/table-body.html.twig', {'p': {}, 'children': c_19}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/table/table.html.twig', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'job-table'])}, 'children': c_20}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'w-full overflow-x-auto rounded inset-ring inset-ring-border'}, 'children': c_21}, with_context = false) }}
+{%- else %}
+  {%- set c_36 -%}
+    {%- for v_j in ui_l(v_jobs) %}
+      {%- set c_35 -%}
+        {%- set c_30 -%}
+          {%- set c_22 -%}
+            {{ ui_text(ui_get(v_j, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'lg', 'Weight': 'semibold'}, 'children': c_22}, with_context = false) }}
+          {%- set c_29 -%}
+            {%- set c_24 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'briefcase', 'Size': 16}}, with_context = false) }}
+              {%- set c_23 -%}
+                {{ ui_text(ui_get(v_j, ['type'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_23}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_24}, with_context = false) }}
+            {%- set c_26 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'map-pin', 'Size': 16}}, with_context = false) }}
+              {%- set c_25 -%}
+                {{ ui_text(ui_get(v_j, ['location'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_25}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_26}, with_context = false) }}
+            {%- set c_28 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'calendar', 'Size': 16}}, with_context = false) }}
+              {%- set c_27 -%}
+                {{ ui_text(ui_get(v_j, ['posted'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_27}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_28}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Class': 'flex-wrap text-sm text-muted-foreground'}, 'children': c_29}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_30}, with_context = false) }}
+        {%- if ui_t(ui_eq(v_salary, 'show')) %}
+          {%- set c_31 -%}
+            {{ ui_text(ui_get(v_j, ['salary'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'semibold', 'Attrs': ui_attrs(['data-testid', 'salary'])}, 'children': c_31}, with_context = false) }}
+        {%- endif %}
+        {%- set c_34 -%}
+          {%- set c_32 -%}
+            {{ ui_text(ui_first_of(ui_where(v_departments, 'id', ui_get(v_j, ['dept'])), 'name')) }}
+          {%- endset -%}
+          {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'default'}, 'children': c_32}, with_context = false) }}
+          {%- set c_33 -%}
+            {{ ui_text(ui_get(v_labels, ['apply'])) }}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_j, ['href']), 'className': ui_cnv(['inline-flex items-center gap-2 text-sm font-medium'])}, 'children': c_33}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'mt-auto'}, 'children': c_34}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_35}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-2', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_36}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/kanban-board.html.twig b/packages/twig/ui/blocks/kanban-board.html.twig
new file mode 100644
index 0000000..4e24d82
--- /dev/null
+++ b/packages/twig/ui/blocks/kanban-board.html.twig
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/kanban-board.json
+    Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card between lanes is a port contract.
+    Props (p): id, title, lanes, empty, cards, countLabel, card, cols, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lanes = (p.lanes ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_cards = (p.cards ?? null) -%}
+{%- set v_countLabel = (p.countLabel ?? null) -%}
+{%- set v_card = (p.card ?? 'detail') -%}
+{%- set v_cols = (p.cols ?? '3') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_len(v_lanes), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'kanban', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_11 -%}
+      {%- for v_lane in ui_l(v_lanes) %}
+        {%- set c_10 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_lane, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_tpl(v_countLabel, [ui_len(ui_where(v_cards, 'lane', ui_get(v_lane, ['key'])))])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'between'}, 'children': c_3}, with_context = false) }}
+          {%- set c_9 -%}
+            {%- for v_c in ui_l(ui_where(v_cards, 'lane', ui_get(v_lane, ['key']))) %}
+              {%- set c_8 -%}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_c, ['title'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+                {%- if ui_t(ui_eq(v_card, 'detail')) %}
+                  {%- set c_7 -%}
+                    {%- set c_5 -%}
+                      {{ ui_text(ui_get(v_c, ['tag'])) }}
+                    {%- endset -%}
+                    {{ include('blocks/pill.html.twig', {'p': {'tone': 'blue', 'icon': 'tag'}, 'children': c_5}, with_context = false) }}
+                    {%- set c_6 -%}
+                      {{ ui_text(ui_get(v_c, ['who'])) }}
+                    {%- endset -%}
+                    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+                  {%- endset -%}
+                  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_7}, with_context = false) }}
+                {%- endif %}
+              {%- endset -%}
+              {{ include('ui/list/list-item.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col rounded bg-card inset-ring inset-ring-border', (ui_t(ui_eq(v_density, 'compact')) ? 'gap-2 p-2' : 'gap-2 p-4')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}, with_context = false) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_9}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-muted p-4', 'Attrs': ui_attrs(['data-testid', 'lane'])}, 'children': c_10}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_cols, '2')) ? '1-2' : '1-3')), 'Class': 'items-start gap-4', 'Attrs': ui_attrs(['data-testid', 'lanes'])}, 'children': c_11}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_12}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/logo-cloud.html.twig b/packages/twig/ui/blocks/logo-cloud.html.twig
new file mode 100644
index 0000000..0bec7af
--- /dev/null
+++ b/packages/twig/ui/blocks/logo-cloud.html.twig
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/logo-cloud.json
+    A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row), columns (2, 3, 4), item (name, icon only, tile), density, tone.
+    Props (p): id, title, logos, empty, layout, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_logos = (p.logos ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_cols = (p.cols ?? '4') -%}
+{%- set v_item = (p.item ?? 'name') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_eq(ui_len(v_logos), 0)) %}
+  {%- set c_1 -%}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'building-2', 'title': v_empty}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_1}, with_context = false) }}
+{%- elseif ui_t(ui_eq(v_layout, 'row')) %}
+  {{ include('blocks/logo-ribbon.html.twig', {'p': {'id': v_id, 'title': v_title, 'logos': v_logos, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+{%- else %}
+  {%- set c_5 -%}
+    {%- set c_4 -%}
+      {%- for v_logo in ui_l(v_logos) %}
+        {%- set c_3 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_logo, ['icon'])), 'Size': 24}}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_logo, ['name'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': ui_s((ui_t(ui_eq(v_item, 'icon')) ? 'sr-only' : ''))}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'center', 'Class': ui_s(ui_cnv(['text-muted-foreground', (ui_t(ui_eq(v_item, 'tile')) ? 'flex-col rounded p-4 inset-ring inset-ring-border' : '')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_3}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_cols, '2')) ? '2' : (ui_t(ui_eq(v_cols, '3')) ? '2-3' : (ui_t(ui_eq(v_cols, '4')) ? '2-4' : '3-6')))), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_4}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_5}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/logo-ribbon.html.twig b/packages/twig/ui/blocks/logo-ribbon.html.twig
new file mode 100644
index 0000000..4e3d036
--- /dev/null
+++ b/packages/twig/ui/blocks/logo-ribbon.html.twig
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/logo-ribbon.json
+    A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset.
+    Props (p): id, title, logos, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_logos = (p.logos ?? null) -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': 'xl', 'Weight': 'semibold', 'Class': 'leading-7', 'Attrs': ui_attrs(['id', ui_add(v_id, '-title')])}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {%- for v_logo in ui_l(v_logos) %}
+        {{ include('blocks/logo-slot.html.twig', {'p': {'name': ui_get(v_logo, ['name']), 'icon': ui_get(v_logo, ['icon'])}}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '0', 'Justify': 'center', 'Align': 'start', 'Class': ui_s(ui_cnv(['flex w-full flex-wrap', ui_preset('blocks/presets/defaults.json', ['logos', 'row'])])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'logos-block'])}, 'children': c_3}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'tone': v_tone, 'density': v_density, 'measure': 'fill', 'align': 'center', 'className': ui_cnv(['py-0']), 'landmarkLabel': v_landmarkLabel}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/logo-sidebar.html.twig b/packages/twig/ui/blocks/logo-sidebar.html.twig
new file mode 100644
index 0000000..0070e1a
--- /dev/null
+++ b/packages/twig/ui/blocks/logo-sidebar.html.twig
@@ -0,0 +1,23 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/logo-sidebar.json
+    The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The variant picks the padding (recipe).
+    Props (p): variant, name, className, mark (slot), actions (slot). -#}
+{%- set v_variant = (p.variant ?? 'chat') -%}
+{%- set v_name = (p.name ?? null) -%}
+{%- set c_4 -%}
+  {%- set c_2 -%}
+    {{ (p.mark ?? '')|raw }}
+    {%- set c_1 -%}
+      {{ ui_text(v_name) }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'logo-sidebar-name'])}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex items-center gap-4', 'Attrs': ui_attrs(['data-slot', 'logo-sidebar-brand'])}, 'children': c_2}, with_context = false) }}
+  {%- if ui_t(((p.actions ?? null) is not null)) %}
+    {%- set c_3 -%}
+      {{ (p.actions ?? '')|raw }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex items-center gap-2 in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'logo-sidebar-actions'])}, 'children': c_3}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/logo-sidebar.variants.json', {'variant': v_variant}), 'in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0', (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'logo-sidebar'])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/logo-slot.html.twig b/packages/twig/ui/blocks/logo-slot.html.twig
new file mode 100644
index 0000000..ae4a62f
--- /dev/null
+++ b/packages/twig/ui/blocks/logo-slot.html.twig
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/logo-slot.json
+    One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only.
+    Props (p): name, icon. -#}
+{%- set v_name = (p.name ?? null) -%}
+{%- set v_icon = (p.icon ?? null) -%}
+{%- set c_2 -%}
+  {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(v_icon), 'Size': ui_i(ui_preset('blocks/presets/defaults.json', ['logos', 'glyph']))}}, with_context = false) }}
+  {%- set c_1 -%}
+    {{ ui_text(v_name) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex shrink-0 items-center justify-center text-muted-foreground', ui_preset('blocks/presets/defaults.json', ['logos', 'slot'])])), 'Attrs': ui_attrs(['data-testid', 'item', 'data-slot', 'logo-slot'])}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/media-contacts.html.twig b/packages/twig/ui/blocks/media-contacts.html.twig
new file mode 100644
index 0000000..d078bbd
--- /dev/null
+++ b/packages/twig/ui/blocks/media-contacts.html.twig
@@ -0,0 +1,47 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-contacts.json
+    The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card.
+    Props (p): extras, labels. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_9 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['list'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+    {%- for v_c in ui_l(ui_get(v_extras, ['channels'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- set c_2 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 16}}, with_context = false) }}
+        {{ ui_text(ui_get(v_c, ['title'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Href': ui_s(ui_get(v_c, ['href'])), 'Class': 'w-full gap-2', 'Attrs': ui_attrs(['data-testid', 'media-channel'])}, 'children': c_2}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch'}, 'children': c_3}, with_context = false) }}
+  {%- set c_8 -%}
+    {%- set c_4 -%}
+      {{ ui_text(ui_get(v_labels, ['figures'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+    {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 3)) %}
+        {%- set c_7 -%}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_6}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Attrs': ui_attrs(['data-testid', 'media-stat'])}, 'children': c_7}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4'}, 'children': c_8}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/media-figures.html.twig b/packages/twig/ui/blocks/media-figures.html.twig
new file mode 100644
index 0000000..5abf8ba
--- /dev/null
+++ b/packages/twig/ui/blocks/media-figures.html.twig
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-figures.json
+    The figures of MediaList: four in two columns, centered, or three in a row.
+    Props (p): extras, mode. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_mode = (p.mode ?? 'grid') -%}
+{%- set c_4 -%}
+  {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, (ui_t(ui_eq(v_mode, 'grid')) ? 4 : 3))) %}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_s, ['value'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_s, ['label'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': ui_s((ui_t(ui_eq(v_mode, 'grid')) ? 'center' : 'start')), 'Attrs': ui_attrs(['data-testid', 'media-stat'])}, 'children': c_3}, with_context = false) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_mode, 'grid')) ? 'grid grid-cols-2 gap-6 text-center' : 'grid grid-cols-3 gap-6'))}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/media-frame.html.twig b/packages/twig/ui/blocks/media-frame.html.twig
new file mode 100644
index 0000000..bab8384
--- /dev/null
+++ b/packages/twig/ui/blocks/media-frame.html.twig
@@ -0,0 +1,16 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/media-frame.json
+    A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the corners are the plain theme radius.
+    Props (p): alt, src, darkSrc, ratio, className. -#}
+{%- set k_PLACEHOLDER = {'light': 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNlMmU4ZjAiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjOTRhM2I4IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+', 'dark': 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxZTI5M2IiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjNDc1NTY5IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+'} -%}
+{%- set v_alt = (p.alt ?? null) -%}
+{%- set v_src = (p.src ?? null) -%}
+{%- set v_darkSrc = (p.darkSrc ?? null) -%}
+{%- set v_ratio = (p.ratio ?? '16/9') -%}
+{%- set v_lightSrc = ui_coalesce([v_src, ui_at(k_PLACEHOLDER, 'light')]) -%}
+{%- set v_nightSrc = ui_coalesce([v_darkSrc, v_src, ui_at(k_PLACEHOLDER, 'dark')]) -%}
+{%- set c_1 -%}
+  {{ include('ui/image/image.html.twig', {'p': {'Src': ui_s(v_lightSrc), 'Alt': ui_s(v_alt), 'Class': 'absolute inset-0 size-full object-cover dark:hidden', 'Attrs': ui_attrs(['data-theme-src', 'light'])}}, with_context = false) }}
+  {{ include('ui/image/image.html.twig', {'p': {'Src': ui_s(v_nightSrc), 'Alt': ui_s(v_alt), 'Class': 'absolute inset-0 hidden size-full object-cover dark:block', 'Attrs': ui_attrs(['data-theme-src', 'dark'])}}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/media-frame.variants.json', {'ratio': v_ratio}), (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'media-frame', 'data-placeholder', (ui_t(v_src) ? 'false' : 'true')])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/media-list.html.twig b/packages/twig/ui/blocks/media-list.html.twig
new file mode 100644
index 0000000..9d8c798
--- /dev/null
+++ b/packages/twig/ui/blocks/media-list.html.twig
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-list.json
+    A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts, contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.
+    Props (p): id, title, lead, badge, extras, labels, actions, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_layout = (p.layout ?? 'figures') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_1 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': (ui_t(ui_or([ui_eq(v_layout, 'steps'), ui_eq(v_layout, 'topics')])) ? '1/1' : '4/3')}}, with_context = false) }}
+{%- endset -%}
+{%- set c_2 -%}
+  {%- if ui_t(ui_or([ui_eq(v_layout, 'figures'), ui_eq(v_layout, 'proof')])) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['stats'])), 0)) %}
+      {{ include('blocks/media-figures.html.twig', {'p': {'extras': v_extras, 'mode': (ui_t(ui_eq(v_layout, 'proof')) ? 'row' : 'grid')}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'proof')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['reviews'])), 0)) %}
+      {{ include('blocks/media-review.html.twig', {'p': {'extras': v_extras, 'labels': v_labels}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'steps')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['steps'])), 0)) %}
+      {{ include('blocks/media-steps.html.twig', {'p': {'extras': v_extras, 'labels': v_labels}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'posts')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['posts'])), 0)) %}
+      {{ include('blocks/media-posts.html.twig', {'p': {'extras': v_extras, 'labels': v_labels}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'topics')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['topics'])), 0)) %}
+      {{ include('blocks/media-topics.html.twig', {'p': {'extras': v_extras, 'labels': v_labels}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_layout, 'contact')) %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['channels'])), 0)) %}
+      {{ include('blocks/media-contacts.html.twig', {'p': {'extras': v_extras, 'labels': v_labels}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- if ui_t(not (ui_eq(v_layout, 'contact'))) %}
+    {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_1}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/media-posts.html.twig b/packages/twig/ui/blocks/media-posts.html.twig
new file mode 100644
index 0000000..de82f4b
--- /dev/null
+++ b/packages/twig/ui/blocks/media-posts.html.twig
@@ -0,0 +1,33 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-posts.json
+    The latest posts of MediaList as rows: a dot, the title, the date and reading time.
+    Props (p): extras, labels. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_6 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_labels, ['list'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+  {%- for v_p in ui_l(ui_get(v_extras, ['posts'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 3)) %}
+      {%- set c_5 -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'mt-2 size-2 shrink-0 rounded-full bg-primary'}}, with_context = false) }}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_p, ['title'])) }}
+          {%- endset -%}
+          {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_p, ['href']), 'className': ui_cnv(['text-sm font-medium']), 'size': 'sm'}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_tpl('{0} · {1}', [ui_get(v_p, ['date']), ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_p, ['minutes'])])])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'media-post'])}, 'children': c_5}, with_context = false) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/media-review.html.twig b/packages/twig/ui/blocks/media-review.html.twig
new file mode 100644
index 0000000..7ed7b38
--- /dev/null
+++ b/packages/twig/ui/blocks/media-review.html.twig
@@ -0,0 +1,30 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-review.json
+    The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author.
+    Props (p): extras, labels. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- for v_r in ui_l(ui_get(v_extras, ['reviews'])) %}
+  {%- set v_i = loop.index0 -%}
+  {%- if ui_t(ui_lt(v_i, 1)) %}
+    {%- set c_5 -%}
+      {%- set c_2 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_labels, ['featured'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'medium'}, 'children': c_1}, with_context = false) }}
+        {{ include('blocks/rating.html.twig', {'p': {'value': ui_get(v_r, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['rating']), [ui_get(v_r, ['rating'])])}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_2}, with_context = false) }}
+      {%- set c_3 -%}
+        {{ ui_text(ui_tpl('“{0}”', [ui_get(v_r, ['text'])])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'base'}, 'children': c_3}, with_context = false) }}
+      {%- set c_4 -%}
+        {{ ui_text(ui_tpl('{0} · {1}', [ui_get(v_r, ['author']), ui_get(v_r, ['date'])])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-muted p-6', 'Attrs': ui_attrs(['data-testid', 'media-review'])}, 'children': c_5}, with_context = false) }}
+  {%- endif %}
+{%- endfor %}
diff --git a/packages/twig/ui/blocks/media-steps.html.twig b/packages/twig/ui/blocks/media-steps.html.twig
new file mode 100644
index 0000000..b2bfd2e
--- /dev/null
+++ b/packages/twig/ui/blocks/media-steps.html.twig
@@ -0,0 +1,38 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-steps.json
+    The steps of MediaList as numbered rows: the number, a glyph, the title and the text.
+    Props (p): extras, labels. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_8 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_labels, ['list'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+  {%- for v_s in ui_l(ui_get(v_extras, ['steps'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- set c_7 -%}
+      {%- set c_2 -%}
+        {{ ui_text(ui_tpl('0{0}', [ui_str(ui_add(v_i, 1))])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'w-6 shrink-0 text-primary'}, 'children': c_2}, with_context = false) }}
+      {%- set c_3 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_s, ['icon'])), 'Size': 16}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-6 shrink-0 items-center justify-center text-primary'}, 'children': c_3}, with_context = false) }}
+      {%- set c_6 -%}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_s, ['title'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_s, ['text'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_6}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'media-step'])}, 'children': c_7}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/media-topics.html.twig b/packages/twig/ui/blocks/media-topics.html.twig
new file mode 100644
index 0000000..0579bc0
--- /dev/null
+++ b/packages/twig/ui/blocks/media-topics.html.twig
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/media-topics.json
+    The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow.
+    Props (p): extras, labels. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_7 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_labels, ['list'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+  {%- for v_c in ui_l(ui_get(v_extras, ['topics'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 5)) %}
+      {%- set c_6 -%}
+        {%- set c_2 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- set c_5 -%}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_c, ['name'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_3}, with_context = false) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_tpl(ui_get(v_labels, ['count']), [ui_get(v_c, ['count'])])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'min-w-0 flex-1'}, 'children': c_5}, with_context = false) }}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_c, ['href']), 'className': ui_cnv(['rounded bg-card inset-ring inset-ring-border flex w-full items-center gap-4 p-4']), 'variant': 'block', 'testid': 'media-topic', 'block': true}, 'children': c_6}, with_context = false) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/mega-menu.html.twig b/packages/twig/ui/blocks/mega-menu.html.twig
new file mode 100644
index 0000000..4cd92e9
--- /dev/null
+++ b/packages/twig/ui/blocks/mega-menu.html.twig
@@ -0,0 +1,95 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/mega-menu.json
+    A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed), cols (2, 3), promo (none, card).
+    Props (p): label, brand, brandHref, trigger, links, groups, promoTitle, promoText, panel, cols, promo, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_brand = (p.brand ?? null) -%}
+{%- set v_brandHref = (p.brandHref ?? null) -%}
+{%- set v_trigger = (p.trigger ?? null) -%}
+{%- set v_links = (p.links ?? null) -%}
+{%- set v_groups = (p.groups ?? null) -%}
+{%- set v_promoTitle = (p.promoTitle ?? null) -%}
+{%- set v_promoText = (p.promoText ?? null) -%}
+{%- set v_panel = (p.panel ?? 'open') -%}
+{%- set v_cols = (p.cols ?? '3') -%}
+{%- set v_promo = (p.promo ?? 'none') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_7 -%}
+  {%- set c_6 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_brand) }}
+    {%- endset -%}
+    {{ include('blocks/menu-entry.html.twig', {'p': {'href': v_brandHref, 'className': ui_cnv(['text-lg font-medium']), 'testid': 'brand'}, 'children': c_1}, with_context = false) }}
+    {%- set c_5 -%}
+      {%- set c_4 -%}
+        {%- set c_2 -%}
+          {{ ui_text(v_trigger) }}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-down', 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/button-plain/button-plain.html.twig', {'p': {'Type': 'button', 'Class': 'inline-flex items-center gap-2 text-sm font-semibold', 'Attrs': ui_attrs(['aria-expanded', (ui_t(ui_eq(v_panel, 'open')) ? 'true' : 'false'), 'data-testid', 'mega-trigger'])}, 'children': c_2}, with_context = false) }}
+        {%- for v_l in ui_l(v_links) %}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_l, ['name'])) }}
+          {%- endset -%}
+          {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv(['text-sm']), 'current': ui_eq(ui_get(v_l, ['id']), ''), 'testid': 'nav-link'}, 'children': c_3}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_4}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) : v_label), 'className': ui_cnv(['flex-1'])}, 'children': c_5}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-wrap items-center gap-6 py-4'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_6}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'header', 'Class': 'relative border-b border-border bg-background', 'Attrs': ui_attrs(['data-testid', 'mega-menu', 'aria-label', v_landmarkLabel])}, 'children': c_7}, with_context = false) }}
+{%- if ui_t(ui_eq(v_panel, 'open')) %}
+  {%- set c_19 -%}
+    {%- set c_18 -%}
+      {%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+        {%- set c_14 -%}
+          {%- for v_g in ui_l(v_groups) %}
+            {%- set c_13 -%}
+              {%- set c_9 -%}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_g, ['icon'])), 'Size': 16}}, with_context = false) }}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_get(v_g, ['title'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_8}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_9}, with_context = false) }}
+              {%- set c_12 -%}
+                {%- for v_item in ui_l(ui_get(v_g, ['links'])) %}
+                  {%- set c_11 -%}
+                    {%- set c_10 -%}
+                      {{ ui_text(ui_get(v_item, ['name'])) }}
+                    {%- endset -%}
+                    {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_item, ['href']), 'className': ui_cnv(['text-sm text-muted-foreground'])}, 'children': c_10}, with_context = false) }}
+                  {%- endset -%}
+                  {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_11}, with_context = false) }}
+                {%- endfor %}
+              {%- endset -%}
+              {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_12}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_13}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_cols, '2')) ? '1-2' : '1-3')), 'Class': 'gap-6', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_14}, with_context = false) }}
+      {%- endif %}
+      {%- if ui_t(ui_eq(v_promo, 'card')) %}
+        {%- set c_17 -%}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_coalesce([v_promoTitle, '']), 'ratio': '4/3'}}, with_context = false) }}
+          {%- set c_15 -%}
+            {{ ui_text(v_promoTitle) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_15}, with_context = false) }}
+          {%- set c_16 -%}
+            {{ ui_text(v_promoText) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_16}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'promo'])}, 'children': c_17}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'grid gap-8 py-6', (ui_t(ui_eq(v_promo, 'card')) ? 'md:grid-cols-[1fr_16rem]' : '')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_18}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'border-t border-border bg-card', 'Attrs': ui_attrs(['data-testid', 'mega-panel'])}, 'children': c_19}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/member-row.html.twig b/packages/twig/ui/blocks/member-row.html.twig
new file mode 100644
index 0000000..3456f98
--- /dev/null
+++ b/packages/twig/ui/blocks/member-row.html.twig
@@ -0,0 +1,56 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/member-row.json
+    One member of TeamGrid beside a small portrait: the name, the role, then the department and the place (detailed, directory), the bio (detailed) and the skills (detailed, list).
+    Props (p): member, depts, layout. -#}
+{%- set v_member = (p.member ?? null) -%}
+{%- set v_depts = (p.depts ?? null) -%}
+{%- set v_layout = (p.layout ?? 'list') -%}
+{%- set c_11 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_member, ['name']), 'ratio': '1/1', 'className': ui_cnv([ui_cnv([(ui_t(ui_eq(v_layout, 'detailed')) ? 'size-16' : 'size-12'), 'shrink-0'])])}}, with_context = false) }}
+  {%- set c_10 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_member, ['name'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_member, ['role'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_3}, with_context = false) }}
+    {%- if ui_t(not (ui_eq(v_layout, 'list'))) %}
+      {%- set c_6 -%}
+        {%- set c_4 -%}
+          {{ ui_text(ui_at(v_depts, ui_get(v_member, ['dept']))) }}
+        {%- endset -%}
+        {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm'}, 'children': c_4}, with_context = false) }}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'map-pin', 'Size': 16}}, with_context = false) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_member, ['location'])) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_5}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'flex-wrap text-xs text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_layout, 'detailed')) %}
+      {%- set c_7 -%}
+        {{ ui_text(ui_get(v_member, ['bio'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(not (ui_eq(v_layout, 'directory'))) %}
+      {%- set c_9 -%}
+        {%- for v_k in ui_l(ui_get(v_member, ['skills'])) %}
+          {%- set c_8 -%}
+            {{ ui_text(v_k) }}
+          {%- endset -%}
+          {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_8}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_9}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'min-w-0 flex-1'}, 'children': c_10}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Class': ui_s((ui_t(ui_eq(v_layout, 'detailed')) ? 'rounded bg-card inset-ring inset-ring-border flex-col p-6' : (ui_t(ui_eq(v_layout, 'directory')) ? 'rounded bg-card inset-ring inset-ring-border p-4' : 'border-b border-border pb-4'))), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/menu-entry.html.twig b/packages/twig/ui/blocks/menu-entry.html.twig
new file mode 100644
index 0000000..89af944
--- /dev/null
+++ b/packages/twig/ui/blocks/menu-entry.html.twig
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/menu-entry.json
+    One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.
+    Props (p): href, current, variant, size, testid, block, className; children: markup. -#}
+{%- set v_href = (p.href ?? null) -%}
+{%- set v_current = (p.current ?? false) -%}
+{%- set v_variant = (p.variant ?? 'default') -%}
+{%- set v_size = (p.size ?? 'default') -%}
+{%- set v_testid = (p.testid ?? null) -%}
+{%- set v_block = (p.block ?? false) -%}
+{%- if ui_t(v_href) %}
+  {%- set c_1 -%}
+    {{ (children ?? '')|raw }}
+  {%- endset -%}
+  {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(v_href), 'Variant': ui_s(v_variant), 'Size': ui_s(v_size), 'AriaCurrent': ui_s((ui_t(v_current) ? 'page' : null)), 'Class': ui_s((p.className ?? '')), 'Attrs': ui_attrs(['data-testid', v_testid])}, 'children': c_1}, with_context = false) }}
+{%- elseif ui_t(v_block) %}
+  {%- set c_2 -%}
+    {{ (children ?? '')|raw }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((p.className ?? '')), 'Attrs': ui_attrs(['aria-current', (ui_t(v_current) ? 'page' : null), 'data-testid', v_testid])}, 'children': c_2}, with_context = false) }}
+{%- else %}
+  {%- set c_3 -%}
+    {{ (children ?? '')|raw }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s((p.className ?? '')), 'Attrs': ui_attrs(['aria-current', (ui_t(v_current) ? 'page' : null), 'data-testid', v_testid])}, 'children': c_3}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/meter-row.html.twig b/packages/twig/ui/blocks/meter-row.html.twig
new file mode 100644
index 0000000..9d6974c
--- /dev/null
+++ b/packages/twig/ui/blocks/meter-row.html.twig
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/meter-row.json
+    A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With `href` the whole row is a link.
+    Props (p): label, value, caption, hint, href, className. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_value = (p.value ?? null) -%}
+{%- set v_caption = (p.caption ?? null) -%}
+{%- set v_hint = (p.hint ?? null) -%}
+{%- set v_href = (p.href ?? null) -%}
+{%- set c_11 -%}
+  {%- if ui_t(v_href) %}
+    {%- set c_5 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(v_label) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 min-w-0 truncate text-sm font-bold text-foreground'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(v_caption) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex items-baseline justify-between gap-4'}, 'children': c_3}, with_context = false) }}
+      {{ include('ui/form/progress.html.twig', {'p': {'Value': ui_s(ui_str(v_value)), 'Max': '100', 'Attrs': ui_attrs(['aria-label', v_label])}}, with_context = false) }}
+      {%- if ui_t(v_hint) %}
+        {%- set c_4 -%}
+          {{ ui_text(v_hint) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(v_href), 'Variant': 'block', 'Class': 'flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted'}, 'children': c_5}, with_context = false) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- set c_8 -%}
+        {%- set c_6 -%}
+          {{ ui_text(v_label) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 min-w-0 truncate text-sm font-bold text-foreground'}, 'children': c_6}, with_context = false) }}
+        {%- set c_7 -%}
+          {{ ui_text(v_caption) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex items-baseline justify-between gap-4'}, 'children': c_8}, with_context = false) }}
+      {{ include('ui/form/progress.html.twig', {'p': {'Value': ui_s(ui_str(v_value)), 'Max': '100', 'Attrs': ui_attrs(['aria-label', v_label])}}, with_context = false) }}
+      {%- if ui_t(v_hint) %}
+        {%- set c_9 -%}
+          {{ ui_text(v_hint) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_9}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-w-0 flex-col gap-2 p-2'}, 'children': c_10}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['min-w-0', (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'meter-row'])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/metric-row.html.twig b/packages/twig/ui/blocks/metric-row.html.twig
new file mode 100644
index 0000000..9afe838
--- /dev/null
+++ b/packages/twig/ui/blocks/metric-row.html.twig
@@ -0,0 +1,51 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/metric-row.json
+    Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes: columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).
+    Props (p): id, title, metrics, empty, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_metrics = (p.metrics ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_cols = (p.cols ?? '4') -%}
+{%- set v_item = (p.item ?? 'tile') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_metrics), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'gauge', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_m in ui_l(v_metrics) %}
+        {%- if ui_t(ui_eq(v_item, 'tile')) %}
+          {%- set c_1 -%}
+            {{ include('blocks/stat-tile.html.twig', {'p': {'label': ui_get(v_m, ['label']), 'value': ui_get(v_m, ['value']), 'icon': ui_get(v_m, ['icon']), 'hint': ui_get(v_m, ['hint'])}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_1}, with_context = false) }}
+        {%- else %}
+          {%- set c_6 -%}
+            {%- set c_3 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_m, ['icon'])), 'Size': 16}}, with_context = false) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_m, ['label'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs'}, 'children': c_2}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_m, ['value'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': '2xl', 'Weight': 'bold'}, 'children': c_4}, with_context = false) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_m, ['hint'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'rounded bg-card p-4 inset-ring inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_cols, '2')) ? '1-2' : '1-4')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/milestone-timeline.html.twig b/packages/twig/ui/blocks/milestone-timeline.html.twig
new file mode 100644
index 0000000..c9a4b57
--- /dev/null
+++ b/packages/twig/ui/blocks/milestone-timeline.html.twig
@@ -0,0 +1,51 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/milestone-timeline.json
+    Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone, density.
+    Props (p): id, title, lead, milestones, empty, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_milestones = (p.milestones ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_layout = (p.layout ?? 'split') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_8 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4'}}, with_context = false) }}
+{%- endset -%}
+{%- set c_9 -%}
+  {%- if ui_t(ui_eq(ui_len(v_milestones), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'milestone', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_m in ui_l(v_milestones) %}
+        {%- set c_6 -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'row')) ? 'absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary' : 'absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary')), 'Attrs': ui_attrs(['aria-hidden', 'true'])}}, with_context = false) }}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_m, ['date'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_m, ['tag'])) }}
+            {%- endset -%}
+            {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}, with_context = false) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_m, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_4}, with_context = false) }}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_m, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/list/list-item.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'row')) ? 'relative flex flex-col gap-2 pt-6' : 'relative flex flex-col gap-2 pl-6')), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ol', 'Class': ui_s((ui_t(ui_eq(v_layout, 'row')) ? 'grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4' : 'flex flex-col gap-8 border-l border-border')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'layout': (ui_t(ui_eq(v_layout, 'split')) ? 'split' : 'stack'), 'media': {'show': ui_eq(v_layout, 'split'), 'side': 'start', 'align': 'start'}, 'measure': (ui_t(ui_eq(v_layout, 'stacked')) ? '2xl' : 'default'), 'landmarkLabel': v_landmarkLabel, 'aside': f_8}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/nav-actions.html.twig b/packages/twig/ui/blocks/nav-actions.html.twig
new file mode 100644
index 0000000..e32a8e0
--- /dev/null
+++ b/packages/twig/ui/blocks/nav-actions.html.twig
@@ -0,0 +1,29 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-actions.json
+    The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the press). No wrapper: they sit in the row of the bar.
+    Props (p): login, loginHref, cta, ctaHref, actions, tone, themeLabel. -#}
+{%- set v_login = (p.login ?? null) -%}
+{%- set v_loginHref = (p.loginHref ?? null) -%}
+{%- set v_cta = (p.cta ?? null) -%}
+{%- set v_ctaHref = (p.ctaHref ?? null) -%}
+{%- set v_actions = (p.actions ?? 'cta') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_themeLabel = (p.themeLabel ?? null) -%}
+{%- if ui_t(v_login) %}
+  {%- set c_1 -%}
+    {{ ui_text(v_login) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Href': ui_s(v_loginHref), 'Class': ui_s((ui_t(ui_eq(v_tone, 'inverse')) ? 'text-background hover:bg-background/10' : '')), 'Attrs': ui_attrs(['data-testid', 'nav-login'])}, 'children': c_1}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_actions, 'cta'), v_cta])) %}
+  {%- set c_2 -%}
+    {{ ui_text(v_cta) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': ui_s((ui_t(ui_eq(v_tone, 'inverse')) ? 'secondary' : 'default')), 'Size': 'sm', 'Href': ui_s(v_ctaHref), 'Attrs': ui_attrs(['data-testid', 'header-cta'])}, 'children': c_2}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(v_themeLabel) %}
+  {%- set c_3 -%}
+    {{ ui_text(v_themeLabel) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'theme-toggle'])}, 'children': c_3}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/nav-bar-menu.html.twig b/packages/twig/ui/blocks/nav-bar-menu.html.twig
new file mode 100644
index 0000000..5e15729
--- /dev/null
+++ b/packages/twig/ui/blocks/nav-bar-menu.html.twig
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-bar-menu.json
+    The links of NavBar in a nav landmark; left out when there are no links.
+    Props (p): label, links, current, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_links = (p.links ?? null) -%}
+{%- set v_current = (p.current ?? '') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(v_links), 0)) %}
+  {%- set c_1 -%}
+    {{ include('blocks/nav-links.html.twig', {'p': {'links': v_links, 'current': v_current}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/nav-block.html.twig', {'p': {'label': v_label, 'className': ui_cnv(['order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0']), 'testid': 'site-nav', 'landmarkLabel': v_landmarkLabel}, 'children': c_1}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/nav-bar.html.twig b/packages/twig/ui/blocks/nav-bar.html.twig
new file mode 100644
index 0000000..319b8c1
--- /dev/null
+++ b/packages/twig/ui/blocks/nav-bar.html.twig
@@ -0,0 +1,69 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-bar.json
+    A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the middle with the links on both sides; search: a search field with its shortcut in the middle), over (none, media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark hero band). Turning solid on scroll is a port contract.
+    Props (p): label, brand, brandHref, links, current, actions, search, tone, layout, over, skip, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_brand = (p.brand ?? null) -%}
+{%- set v_brandHref = (p.brandHref ?? null) -%}
+{%- set v_links = (p.links ?? null) -%}
+{%- set v_current = (p.current ?? '') -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_search = (p.search ?? null) -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_layout = (p.layout ?? 'inline') -%}
+{%- set v_over = (p.over ?? 'none') -%}
+{%- set v_skip = (p.skip ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_12 -%}
+  {{ include('blocks/over-media.html.twig', {'p': {'on': ui_eq(v_over, 'media'), 'alt': v_brand}}, with_context = false) }}
+  {%- if ui_t(v_skip) %}
+    {%- set c_1 -%}
+      {{ ui_text(v_skip) }}
+    {%- endset -%}
+    {{ include('ui/link-plain/link-plain.html.twig', {'p': {'Href': '#main-content', 'Class': 'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'skip-link'])}, 'children': c_1}, with_context = false) }}
+  {%- endif %}
+  {%- set c_11 -%}
+    {%- set c_10 -%}
+      {%- if ui_t(ui_eq(v_layout, 'split')) %}
+        {%- set c_8 -%}
+          {%- set c_7 -%}
+            {%- set c_2 -%}
+              {{ include('blocks/nav-links.html.twig', {'p': {'links': v_links, 'current': v_current, 'side': 'left'}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/box/box.html.twig', {'p': {'Class': 'md:justify-self-start'}, 'children': c_2}, with_context = false) }}
+            {%- set c_4 -%}
+              {%- set c_3 -%}
+                {{ ui_text(v_brand) }}
+              {%- endset -%}
+              {{ include('blocks/menu-entry.html.twig', {'p': {'href': v_brandHref, 'className': ui_cnv(['text-lg font-medium']), 'testid': 'brand'}, 'children': c_3}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/box/box.html.twig', {'p': {'Class': 'text-center'}, 'children': c_4}, with_context = false) }}
+            {%- set c_6 -%}
+              {%- set c_5 -%}
+                {{ include('blocks/nav-links.html.twig', {'p': {'links': v_links, 'current': v_current, 'side': 'right'}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/box/box.html.twig', {'p': {}, 'children': c_5}, with_context = false) }}
+              {{ include('blocks/nav-actions.html.twig', {'p': {'login': ui_get(v_actions, ['login']), 'loginHref': ui_get(v_actions, ['loginHref']), 'cta': ui_get(v_actions, ['cta']), 'ctaHref': ui_get(v_actions, ['href']), 'actions': ui_get(v_actions, ['mode']), 'tone': v_tone, 'themeLabel': ui_get(v_actions, ['themeLabel'])}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'end', 'Class': 'flex-wrap md:justify-self-end'}, 'children': c_6}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-3', 'Class': 'w-full items-center gap-4'}, 'children': c_7}, with_context = false) }}
+        {%- endset -%}
+        {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) : v_label), 'className': ui_cnv(['w-full']), 'testid': 'site-nav'}, 'children': c_8}, with_context = false) }}
+      {%- else %}
+        {%- set c_9 -%}
+          {{ ui_text(v_brand) }}
+        {%- endset -%}
+        {{ include('blocks/menu-entry.html.twig', {'p': {'href': v_brandHref, 'className': ui_cnv(['text-lg font-medium']), 'testid': 'brand'}, 'children': c_9}, with_context = false) }}
+        {%- if ui_t(ui_eq(v_layout, 'search')) %}
+          {{ include('blocks/search-palette.html.twig', {'p': {'label': ui_get(v_search, ['label']), 'shortcut': ui_get(v_search, ['shortcut'])}}, with_context = false) }}
+        {%- endif %}
+        {{ include('blocks/nav-bar-menu.html.twig', {'p': {'label': v_label, 'links': v_links, 'current': v_current, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+        {{ include('blocks/nav-actions.html.twig', {'p': {'login': ui_get(v_actions, ['login']), 'loginHref': ui_get(v_actions, ['loginHref']), 'cta': ui_get(v_actions, ['cta']), 'ctaHref': ui_get(v_actions, ['href']), 'actions': ui_get(v_actions, ['mode']), 'tone': v_tone, 'themeLabel': ui_get(v_actions, ['themeLabel'])}}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-wrap items-center justify-between gap-4', 'py-4']))}, 'children': c_10}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_11}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'header', 'Class': ui_s(ui_cnv(['relative', (ui_t(ui_eq(v_tone, 'inverse')) ? 'border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background' : 'border-b border-border bg-background'), (ui_t(ui_eq(v_over, 'media')) ? 'isolate overflow-hidden border-0 bg-transparent' : '')])), 'Attrs': ui_attrs(['data-testid', 'nav-bar', 'data-layout', v_layout, 'data-tone', v_tone, 'aria-label', v_landmarkLabel])}, 'children': c_12}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/nav-block.html.twig b/packages/twig/ui/blocks/nav-block.html.twig
new file mode 100644
index 0000000..3e854f8
--- /dev/null
+++ b/packages/twig/ui/blocks/nav-block.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-block.json
+    A navigation region in its own file: Block tag nav named by `label`.
+    Props (p): label, testid, landmarkLabel, className; children: markup. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_testid = (p.testid ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'nav', 'Class': ui_s(ui_cnv([(p.className ?? '')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', v_testid])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/nav-item-row.html.twig b/packages/twig/ui/blocks/nav-item-row.html.twig
new file mode 100644
index 0000000..04238b1
--- /dev/null
+++ b/packages/twig/ui/blocks/nav-item-row.html.twig
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/nav-item-row.json
+    The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the right.
+    Props (p): inner, reserveRight, icon (slot), right (slot); children: markup. -#}
+{%- set v_inner = (p.inner ?? null) -%}
+{%- set v_reserveRight = (p.reserveRight ?? false) -%}
+{%- set c_4 -%}
+  {%- set c_2 -%}
+    {{ (p.icon ?? '')|raw }}
+    {%- set c_1 -%}
+      {{ (children ?? '')|raw }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'nav-item-label'])}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center', 'Attrs': ui_attrs(['data-slot', 'nav-item-left'])}, 'children': c_2}, with_context = false) }}
+  {%- if ui_t(((p.right ?? null) is not null)) %}
+    {%- set c_3 -%}
+      {{ (p.right ?? '')|raw }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex items-center gap-2 in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'nav-item-right'])}, 'children': c_3}, with_context = false) }}
+  {%- elseif ui_t(v_reserveRight) %}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'size-5 shrink-0 in-data-[nav=collapsed]:hidden', 'Attrs': ui_attrs(['data-slot', 'nav-item-right'])}}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s(v_inner), 'Attrs': ui_attrs(['data-slot', 'nav-item-content'])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/nav-item.html.twig b/packages/twig/ui/blocks/nav-item.html.twig
new file mode 100644
index 0000000..1c3d1e5
--- /dev/null
+++ b/packages/twig/ui/blocks/nav-item.html.twig
@@ -0,0 +1,38 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/nav-item.json
+    A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a button, otherwise a static box.
+    Props (p): selected, level, href, interactive, reserveRight, contentClass, className, icon (slot), right (slot); children: markup. -#}
+{%- set v_selected = (p.selected ?? false) -%}
+{%- set v_level = (p.level ?? null) -%}
+{%- set v_href = (p.href ?? null) -%}
+{%- set v_interactive = (p.interactive ?? false) -%}
+{%- set v_reserveRight = (p.reserveRight ?? false) -%}
+{%- set v_contentClass = (p.contentClass ?? null) -%}
+{%- set v_state = (ui_t(v_selected) ? 'selected' : 'default') -%}
+{%- set v_outer = ui_cnv([ui_recipe('blocks/recipes/nav-item.variants.json', {'level': v_level, 'state': v_state}), 'group in-data-[nav=collapsed]:justify-center', (p.className ?? '')]) -%}
+{%- set v_inner = ui_cnv([ui_recipe('blocks/recipes/nav-item-content.variants.json', {'level': v_level, 'state': v_state}), ui_and([not (ui_t(v_selected)), 'group-hover:bg-muted']), 'in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0', v_contentClass]) -%}
+{%- if ui_t(v_href) %}
+  {%- set c_2 -%}
+    {%- set c_1 -%}
+      {{ (children ?? '')|raw }}
+    {%- endset -%}
+    {{ include('blocks/nav-item-row.html.twig', {'p': {'inner': v_inner, 'reserveRight': v_reserveRight, 'icon': (p.icon ?? null), 'right': (p.right ?? null)}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/link-plain/link-plain.html.twig', {'p': {'Href': ui_s(v_href), 'Class': ui_s(v_outer), 'AriaCurrent': ui_s((ui_t(v_selected) ? 'page' : null)), 'Attrs': ui_attrs(['data-slot', 'nav-item', 'data-state', v_state])}, 'children': c_2}, with_context = false) }}
+{%- elseif ui_t(v_interactive) %}
+  {%- set c_4 -%}
+    {%- set c_3 -%}
+      {{ (children ?? '')|raw }}
+    {%- endset -%}
+    {{ include('blocks/nav-item-row.html.twig', {'p': {'inner': v_inner, 'reserveRight': v_reserveRight, 'icon': (p.icon ?? null), 'right': (p.right ?? null)}, 'children': c_3}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/button-plain/button-plain.html.twig', {'p': {'Type': 'button', 'Class': ui_s(ui_cnv([v_outer, 'text-left'])), 'Attrs': ui_attrs(['aria-current', (ui_t(v_selected) ? 'page' : null), 'data-slot', 'nav-item', 'data-state', v_state])}, 'children': c_4}, with_context = false) }}
+{%- else %}
+  {%- set c_6 -%}
+    {%- set c_5 -%}
+      {{ (children ?? '')|raw }}
+    {%- endset -%}
+    {{ include('blocks/nav-item-row.html.twig', {'p': {'inner': v_inner, 'reserveRight': v_reserveRight, 'icon': (p.icon ?? null), 'right': (p.right ?? null)}, 'children': c_5}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(v_outer), 'Attrs': ui_attrs(['aria-current', (ui_t(v_selected) ? 'page' : null), 'data-slot', 'nav-item', 'data-state', v_state])}, 'children': c_6}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/nav-links.html.twig b/packages/twig/ui/blocks/nav-links.html.twig
new file mode 100644
index 0000000..543fb80
--- /dev/null
+++ b/packages/twig/ui/blocks/nav-links.html.twig
@@ -0,0 +1,22 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/nav-links.json
+    The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half of the list.
+    Props (p): links, current, side. -#}
+{%- set v_links = (p.links ?? null) -%}
+{%- set v_current = (p.current ?? '') -%}
+{%- set v_side = (p.side ?? 'all') -%}
+{%- set v_count = ui_len(v_links) -%}
+{%- if ui_t(ui_gt(ui_len(v_links), 0)) %}
+  {%- set c_2 -%}
+    {%- for v_l in ui_l(v_links) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_or([ui_eq(v_side, 'all'), ui_eq(ui_lt(ui_mul(v_i, 2), v_count), ui_eq(v_side, 'left'))])) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_l, ['name'])) }}
+        {%- endset -%}
+        {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv(['text-sm']), 'current': ui_eq(ui_get(v_l, ['id']), v_current), 'testid': 'nav-link'}, 'children': c_1}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_2}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/newsletter-form.html.twig b/packages/twig/ui/blocks/newsletter-form.html.twig
new file mode 100644
index 0000000..e29529e
--- /dev/null
+++ b/packages/twig/ui/blocks/newsletter-form.html.twig
@@ -0,0 +1,42 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/newsletter-form.json
+    An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start, center).
+    Props (p): id, title, text, label, submit, consent, layout, terms, tone, align, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_submit = (p.submit ?? null) -%}
+{%- set v_consent = (p.consent ?? null) -%}
+{%- set v_layout = (p.layout ?? 'inline') -%}
+{%- set v_terms = (p.terms ?? 'hide') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_align = (p.align ?? 'center') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_6 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+{%- endset -%}
+{%- set c_7 -%}
+  {%- set c_5 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_label) }}
+    {%- endset -%}
+    {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+    {%- set c_3 -%}
+      {{ include('ui/input/input.html.twig', {'p': {'Type': 'email', 'Name': 'email', 'Class': 'min-w-0 flex-1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ ui_text(v_submit) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': ui_s(ui_cnv(['w-full', (ui_t(ui_eq(v_layout, 'stacked')) ? 'flex-col items-stretch' : 'flex-wrap')]))}, 'children': c_3}, with_context = false) }}
+    {%- if ui_t(ui_and([ui_eq(v_terms, 'show'), v_consent])) %}
+      {%- set c_4 -%}
+        {{ ui_text(v_consent) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'consent'])}, 'children': c_4}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/form/form.html.twig', {'p': {'Method': 'dialog', 'Class': ui_s(ui_cnv(['w-full max-w-md', (ui_t(ui_eq(v_align, 'center')) ? 'mx-auto' : '')])), 'Attrs': ui_attrs(['data-testid', 'newsletter-form'])}, 'children': c_5}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'tone': v_tone, 'align': v_align, 'layout': (ui_t(ui_eq(v_layout, 'split')) ? 'split' : 'stack'), 'media': {'show': ui_eq(v_layout, 'split')}, 'landmarkLabel': v_landmarkLabel, 'aside': f_6}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/notice.html.twig b/packages/twig/ui/blocks/notice.html.twig
new file mode 100644
index 0000000..cfa13e5
--- /dev/null
+++ b/packages/twig/ui/blocks/notice.html.twig
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/notice.json
+    A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text renders nothing visible.
+    Props (p): text. -#}
+{%- set v_text = (p.text ?? null) -%}
+{%- set c_2 -%}
+  {%- if ui_t(v_text) %}
+    {%- set c_1 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'circle-check', 'Size': 16}}, with_context = false) }}
+      {{ ui_text(v_text) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Class': 'fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold text-background shadow-lg'}, 'children': c_1}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'contents', 'Attrs': ui_attrs(['role', 'status', 'data-testid', 'notice'])}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/number-field.html.twig b/packages/twig/ui/blocks/number-field.html.twig
new file mode 100644
index 0000000..cd8150f
--- /dev/null
+++ b/packages/twig/ui/blocks/number-field.html.twig
@@ -0,0 +1,22 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/number-field.json
+    A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its ring). Static markup: the buttons carry no logic; the page wires them.
+    Props (p): value, name, min, label, decrease, increase. -#}
+{%- set v_value = (p.value ?? '') -%}
+{%- set v_name = (p.name ?? '') -%}
+{%- set v_min = (p.min ?? '') -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_decrease = (p.decrease ?? null) -%}
+{%- set v_increase = (p.increase ?? null) -%}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'minus', 'Size': 16}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(v_decrease), 'Attrs': ui_attrs(['data-testid', 'decrease'])}, 'children': c_1}, with_context = false) }}
+  {{ include('ui/input/input.html.twig', {'p': {'Type': 'number', 'Name': ui_s(v_name), 'Value': ui_s(v_value), 'Min': ui_s(v_min), 'AriaLabel': ui_s(v_label), 'Size': 'sm', 'Class': 'number-bare w-8 bg-transparent px-0 text-center inset-ring-0'}}, with_context = false) }}
+  {%- set c_2 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'plus', 'Size': 16}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(v_increase), 'Attrs': ui_attrs(['data-testid', 'increase'])}, 'children': c_2}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input', 'Attrs': ui_attrs(['data-slot', 'number-field'])}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/offer-media.html.twig b/packages/twig/ui/blocks/offer-media.html.twig
new file mode 100644
index 0000000..6a10dae
--- /dev/null
+++ b/packages/twig/ui/blocks/offer-media.html.twig
@@ -0,0 +1,28 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/offer-media.json
+    The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats over the picture).
+    Props (p): alt, card. -#}
+{%- set v_alt = (p.alt ?? null) -%}
+{%- set v_card = (p.card ?? null) -%}
+{%- set c_6 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_alt, 'ratio': '4/3'}}, with_context = false) }}
+  {%- set c_5 -%}
+    {%- set c_1 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_card, ['icon'])), 'Size': 20}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_1}, with_context = false) }}
+    {%- set c_4 -%}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_card, ['title'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+      {%- set c_3 -%}
+        {{ ui_text(ui_get(v_card, ['text'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_4}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg', 'Attrs': ui_attrs(['data-testid', 'offer-card'])}, 'children': c_5}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'relative', 'Attrs': ui_attrs(['data-testid', 'hero-media'])}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/order-rows.html.twig b/packages/twig/ui/blocks/order-rows.html.twig
new file mode 100644
index 0000000..8308955
--- /dev/null
+++ b/packages/twig/ui/blocks/order-rows.html.twig
@@ -0,0 +1,75 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/order-rows.json
+    The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill.
+    Props (p): orders, statuses, labels, density. -#}
+{%- set v_orders = (p.orders ?? null) -%}
+{%- set v_statuses = (p.statuses ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set c_18 -%}
+  {%- set c_17 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['caption'])) }}
+    {%- endset -%}
+    {{ include('ui/table/table-caption.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+    {%- set c_8 -%}
+      {%- set c_7 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['number'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_2}, with_context = false) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['date'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_3}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['items'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_4}, with_context = false) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_labels, ['total'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_5}, with_context = false) }}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['status'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/table/table-row.html.twig', {'p': {}, 'children': c_7}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/table/table-head.html.twig', {'p': {}, 'children': c_8}, with_context = false) }}
+    {%- set c_16 -%}
+      {%- for v_o in ui_l(v_orders) %}
+        {%- set c_15 -%}
+          {%- set c_9 -%}
+            {{ ui_text(ui_get(v_o, ['number'])) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {'Class': ui_s(ui_cnv(['font-semibold', (ui_t(ui_eq(v_density, 'compact')) ? 'py-2' : 'py-4')]))}, 'children': c_9}, with_context = false) }}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_o, ['date'])) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {}, 'children': c_10}, with_context = false) }}
+          {%- set c_11 -%}
+            {{ ui_text(ui_tpl(ui_get(v_labels, ['itemsCount']), [ui_get(v_o, ['items'])])) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {}, 'children': c_11}, with_context = false) }}
+          {%- set c_12 -%}
+            {{ ui_text(ui_money(ui_get(v_o, ['total']), ui_get(v_o, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {}, 'children': c_12}, with_context = false) }}
+          {%- set c_14 -%}
+            {%- set c_13 -%}
+              {{ ui_text(ui_at(v_statuses, ui_get(v_o, ['status']))) }}
+            {%- endset -%}
+            {{ include('blocks/pill.html.twig', {'p': {'tone': (ui_t(ui_eq(ui_get(v_o, ['status']), 'paid')) ? 'green' : (ui_t(ui_eq(ui_get(v_o, ['status']), 'shipped')) ? 'blue' : (ui_t(ui_eq(ui_get(v_o, ['status']), 'pending')) ? 'amber' : 'gray')))}, 'children': c_13}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {}, 'children': c_14}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/table/table-row.html.twig', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_15}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/table/table-body.html.twig', {'p': {}, 'children': c_16}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/table/table.html.twig', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'order-table'])}, 'children': c_17}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'w-full overflow-x-auto'}, 'children': c_18}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/order-summary.html.twig b/packages/twig/ui/blocks/order-summary.html.twig
new file mode 100644
index 0000000..5368095
--- /dev/null
+++ b/packages/twig/ui/blocks/order-summary.html.twig
@@ -0,0 +1,56 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/order-summary.json
+    The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout (card, plain), cta (show, hide), note (show, hide), density, tone.
+    Props (p): id, title, rows, empty, labels, layout, cta, note, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_rows = (p.rows ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'card') -%}
+{%- set v_cta = (p.cta ?? 'show') -%}
+{%- set v_note = (p.note ?? 'show') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_9 -%}
+  {%- if ui_t(ui_eq(ui_len(v_rows), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'receipt', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_8 -%}
+      {%- set c_7 -%}
+        {%- set c_4 -%}
+          {%- for v_row in ui_l(v_rows) %}
+            {%- set c_3 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_row, ['label'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_1}, with_context = false) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_money(ui_get(v_row, ['amount']), ui_get(v_row, ['currency']))) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_2}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex items-center justify-between gap-4', (ui_t(ui_get(v_row, ['strong'])) ? 'border-t border-border pt-4 text-base font-bold' : 'text-sm text-muted-foreground')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_3}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-4'}, 'children': c_4}, with_context = false) }}
+        {%- if ui_t(ui_eq(v_cta, 'show')) %}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_labels, ['checkout'])) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'checkout'])}, 'children': c_5}, with_context = false) }}
+        {%- endif %}
+        {%- if ui_t(ui_eq(v_note, 'show')) %}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_labels, ['note'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_7}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv([(ui_t(ui_eq(v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')])), 'Attrs': ui_attrs(['data-testid', 'summary'])}, 'children': c_8}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': 'md', 'landmarkLabel': v_landmarkLabel}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/order-table.html.twig b/packages/twig/ui/blocks/order-table.html.twig
new file mode 100644
index 0000000..82fedbf
--- /dev/null
+++ b/packages/twig/ui/blocks/order-table.html.twig
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/order-table.json
+    The order history as a table or as cards: number, date, items, total and a status pill, with an optional pager. Axes: layout (table, cards), pager (show, hide), tone, density.
+    Props (p): id, title, orders, empty, statuses, labels, layout, pager, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_orders = (p.orders ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_statuses = (p.statuses ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'table') -%}
+{%- set v_pager = (p.pager ?? 'show') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(ui_len(v_orders), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'package', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- if ui_t(ui_eq(v_layout, 'table')) %}
+        {{ include('blocks/order-rows.html.twig', {'p': {'orders': v_orders, 'statuses': v_statuses, 'labels': v_labels, 'density': v_density}}, with_context = false) }}
+      {%- else %}
+        {%- set c_9 -%}
+          {%- for v_o in ui_l(v_orders) %}
+            {%- set c_8 -%}
+              {%- set c_7 -%}
+                {%- set c_3 -%}
+                  {%- set c_1 -%}
+                    {{ ui_text(ui_get(v_o, ['number'])) }}
+                  {%- endset -%}
+                  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+                  {%- set c_2 -%}
+                    {{ ui_text(ui_get(v_o, ['date'])) }}
+                  {%- endset -%}
+                  {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+                {%- endset -%}
+                {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_3}, with_context = false) }}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_tpl(ui_get(v_labels, ['itemsCount']), [ui_get(v_o, ['items'])])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_4}, with_context = false) }}
+                {%- set c_5 -%}
+                  {{ ui_text(ui_money(ui_get(v_o, ['total']), ui_get(v_o, ['currency']))) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'bold'}, 'children': c_5}, with_context = false) }}
+                {%- set c_6 -%}
+                  {{ ui_text(ui_at(v_statuses, ui_get(v_o, ['status']))) }}
+                {%- endset -%}
+                {{ include('blocks/pill.html.twig', {'p': {'tone': (ui_t(ui_eq(ui_get(v_o, ['status']), 'paid')) ? 'green' : (ui_t(ui_eq(ui_get(v_o, ['status']), 'shipped')) ? 'blue' : (ui_t(ui_eq(ui_get(v_o, ['status']), 'pending')) ? 'amber' : 'gray')))}, 'children': c_6}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/card/card-content.html.twig', {'p': {'Class': 'flex flex-wrap items-center justify-between gap-4'}, 'children': c_7}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/card/card.html.twig', {'p': {'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'order-cards'])}, 'children': c_9}, with_context = false) }}
+      {%- endif %}
+      {%- if ui_t(ui_eq(v_pager, 'show')) %}
+        {{ include('blocks/pager.html.twig', {'p': {'page': 1, 'pages': 3, 'summary': ui_tpl(ui_get(v_labels, ['summary']), [1, 4, 12]), 'previousLabel': ui_get(v_labels, ['previous']), 'nextLabel': ui_get(v_labels, ['next'])}}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_10}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/over-media.html.twig b/packages/twig/ui/blocks/over-media.html.twig
new file mode 100644
index 0000000..8d67c42
--- /dev/null
+++ b/packages/twig/ui/blocks/over-media.html.twig
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/over-media.json
+    A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing. It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the header stays the root of the block (rule 01).
+    Props (p): on, alt. -#}
+{%- set v_on = (p.on ?? false) -%}
+{%- set v_alt = (p.alt ?? null) -%}
+{%- if ui_t(v_on) %}
+  {%- set c_1 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_alt, 'ratio': '21/9', 'className': ui_cnv(['size-full rounded-none opacity-40'])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'pointer-events-none absolute inset-0 -z-10', 'Attrs': ui_attrs(['data-testid', 'over'])}, 'children': c_1}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/page-aside.html.twig b/packages/twig/ui/blocks/page-aside.html.twig
new file mode 100644
index 0000000..2100b6f
--- /dev/null
+++ b/packages/twig/ui/blocks/page-aside.html.twig
@@ -0,0 +1,65 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-aside.json
+    The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key facts as cards in two columns.
+    Props (p): extras, mode. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_mode = (p.mode ?? 'figure') -%}
+{%- if ui_t(ui_eq(v_mode, 'figure')) %}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_extras, ['value'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': '4xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_extras, ['caption'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': 'end', 'Class': 'text-end', 'Attrs': ui_attrs(['data-testid', 'page-figure'])}, 'children': c_3}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_eq(v_mode, 'note')) %}
+  {%- set c_8 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_extras, ['icon'])), 'Size': 20}}, with_context = false) }}
+    {%- set c_7 -%}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_extras, ['value'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'lg', 'Weight': 'bold'}, 'children': c_4}, with_context = false) }}
+      {%- set c_5 -%}
+        {{ ui_text(ui_get(v_extras, ['caption'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'medium'}, 'children': c_5}, with_context = false) }}
+      {%- set c_6 -%}
+        {{ ui_text(ui_get(v_extras, ['note'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_7}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'rounded bg-card inset-ring inset-ring-border max-w-xs p-4', 'Attrs': ui_attrs(['data-testid', 'page-note'])}, 'children': c_8}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_eq(v_mode, 'facts')) %}
+  {%- set c_13 -%}
+    {%- for v_s in ui_l(ui_get(v_extras, ['facts'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 4)) %}
+        {%- set c_12 -%}
+          {%- set c_9 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'lg', 'Weight': 'bold'}, 'children': c_9}, with_context = false) }}
+          {%- set c_10 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'medium'}, 'children': c_10}, with_context = false) }}
+          {%- set c_11 -%}
+            {{ ui_text(ui_get(v_s, ['hint'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'page-fact'])}, 'children': c_12}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-4'}, 'children': c_13}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/page-crumbs.html.twig b/packages/twig/ui/blocks/page-crumbs.html.twig
new file mode 100644
index 0000000..678e61d
--- /dev/null
+++ b/packages/twig/ui/blocks/page-crumbs.html.twig
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-crumbs.json
+    The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the last entry is the current page and is not a link.
+    Props (p): label, crumbs, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_crumbs = (p.crumbs ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_last = ui_sub(ui_len(v_crumbs), 1) -%}
+{%- set c_6 -%}
+  {%- set c_5 -%}
+    {%- for v_c in ui_l(v_crumbs) %}
+      {%- set v_i = loop.index0 -%}
+      {%- set c_4 -%}
+        {%- if ui_t(ui_lt(v_i, v_last)) %}
+          {%- if ui_t(ui_get(v_c, ['href'])) %}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_c, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_get(v_c, ['href'])), 'Variant': 'muted', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'crumb'])}, 'children': c_1}, with_context = false) }}
+          {%- else %}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_c, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {'Attrs': ui_attrs(['data-testid', 'crumb'])}, 'children': c_2}, with_context = false) }}
+          {%- endif %}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-right', 'Size': 16}}, with_context = false) }}
+        {%- else %}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_c, ['name'])) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'font-medium text-foreground', 'Attrs': ui_attrs(['aria-current', 'page'])}, 'children': c_3}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_4}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'nav', 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_label]), 'data-testid', 'crumbs'])}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/page-header.html.twig b/packages/twig/ui/blocks/page-header.html.twig
new file mode 100644
index 0000000..b9b4214
--- /dev/null
+++ b/packages/twig/ui/blocks/page-header.html.twig
@@ -0,0 +1,29 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/page-header.json
+    The page heading: a title, a one-line summary and the action buttons on the right (below on phones).
+    Props (p): title, summary, id, actions (slot). -#}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_summary = (p.summary ?? null) -%}
+{%- set v_id = (p.id ?? null) -%}
+{%- set c_5 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(1), 'Size': 'xl', 'Weight': 'bold', 'Class': 'm-0', 'Attrs': ui_attrs(['id', v_id])}, 'children': c_1}, with_context = false) }}
+    {%- if ui_t(v_summary) %}
+      {%- set c_2 -%}
+        {{ ui_text(v_summary) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-w-0 flex-col gap-2'}, 'children': c_3}, with_context = false) }}
+  {%- if ui_t(((p.actions ?? null) is not null)) %}
+    {%- set c_4 -%}
+      {{ (p.actions ?? '')|raw }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex flex-wrap items-center gap-2'}, 'children': c_4}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between'}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/page-intro.html.twig b/packages/twig/ui/blocks/page-intro.html.twig
new file mode 100644
index 0000000..448ebf0
--- /dev/null
+++ b/packages/twig/ui/blocks/page-intro.html.twig
@@ -0,0 +1,20 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-intro.json
+    The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action. Axes: align (start, center), tone, density.
+    Props (p): id, title, text, cta, href, level, align, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_cta = (p.cta ?? null) -%}
+{%- set v_href = (p.href ?? null) -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_align = (p.align ?? 'start') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_1 -%}
+  {%- if ui_t(v_cta) %}
+    {{ include('blocks/action-group.html.twig', {'p': {'primary': v_cta, 'primaryHref': v_href, 'align': v_align}}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'heading': {'level': v_level}, 'align': v_align, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/page-trail.html.twig b/packages/twig/ui/blocks/page-trail.html.twig
new file mode 100644
index 0000000..c4536fb
--- /dev/null
+++ b/packages/twig/ui/blocks/page-trail.html.twig
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/page-trail.json
+    The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts in two columns), tone.
+    Props (p): id, title, lead, badge, label, crumbs, extras, aside, level, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_crumbs = (p.crumbs ?? null) -%}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_aside = (p.aside ?? 'none') -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_titleId = ui_add(v_id, '-title') -%}
+{%- set c_4 -%}
+  {%- set c_3 -%}
+    {%- if ui_t(ui_gt(ui_len(v_crumbs), 0)) %}
+      {{ include('blocks/page-crumbs.html.twig', {'p': {'label': v_label, 'crumbs': v_crumbs, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+    {%- endif %}
+    {%- set c_2 -%}
+      {%- set c_1 -%}
+        {{ include('blocks/section-header.html.twig', {'p': {'titleId': v_titleId, 'title': v_title, 'heading': {'level': v_level, 'badge': v_badge}, 'lead': v_lead}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'min-w-0'}, 'children': c_1}, with_context = false) }}
+      {%- if ui_t(not (ui_eq(v_aside, 'none'))) %}
+        {{ include('blocks/page-aside.html.twig', {'p': {'extras': v_extras, 'mode': v_aside}}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_aside, 'facts')) ? 'grid grid-cols-1 items-center gap-8 lg:grid-cols-2' : 'flex flex-col gap-6 md:flex-row md:items-end md:justify-between'))}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-col gap-6'])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_3}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv(['py-8', (ui_t(ui_eq(v_tone, 'muted')) ? 'bg-muted' : '')])), 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : v_titleId), 'data-testid', 'section', 'data-tone', v_tone, 'data-aside', v_aside, 'aria-label', v_landmarkLabel])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/pager.html.twig b/packages/twig/ui/blocks/pager.html.twig
new file mode 100644
index 0000000..0b92b9e
--- /dev/null
+++ b/packages/twig/ui/blocks/pager.html.twig
@@ -0,0 +1,68 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/pager.json
+    The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4 5 6 … 21), with `moreLabel` a "Load more" button. The current page is a plain element marked aria-current="page"; the others are buttons. All text comes in through props.
+    Props (p): page, pages, summary, previousLabel, nextLabel, numbered, pageLabel, moreLabel. -#}
+{%- set v_page = (p.page ?? null) -%}
+{%- set v_pages = (p.pages ?? null) -%}
+{%- set v_summary = (p.summary ?? null) -%}
+{%- set v_previousLabel = (p.previousLabel ?? null) -%}
+{%- set v_nextLabel = (p.nextLabel ?? null) -%}
+{%- set v_numbered = (p.numbered ?? false) -%}
+{%- set v_pageLabel = (p.pageLabel ?? null) -%}
+{%- set v_moreLabel = (p.moreLabel ?? null) -%}
+{%- set v_numbers = ui_page_window(v_page, v_pages) -%}
+{%- set c_11 -%}
+  {%- set c_2 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_summary) }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex flex-wrap items-center gap-4'}, 'children': c_2}, with_context = false) }}
+  {%- set c_10 -%}
+    {%- if ui_t(ui_and([v_moreLabel, ui_lt(v_page, v_pages)])) %}
+      {%- set c_3 -%}
+        {{ ui_text(v_moreLabel) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'pager-more'])}, 'children': c_3}, with_context = false) }}
+    {%- endif %}
+    {%- set c_4 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-left', 'Size': 16}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(v_previousLabel), 'Disabled': ui_t(ui_le(v_page, 1))}, 'children': c_4}, with_context = false) }}
+    {%- if ui_t(v_numbered) %}
+      {%- for v_n in ui_l(v_numbers) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_eq(v_n, null)) %}
+          {%- set c_5 -%}
+            {{ ui_text('…') }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'w-8 text-center'}, 'children': c_5}, with_context = false) }}
+        {%- elseif ui_t(ui_eq(v_n, v_page)) %}
+          {%- set c_6 -%}
+            {{ ui_text(v_n) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background', 'Attrs': ui_attrs(['aria-current', 'page', 'data-testid', 'pager-current'])}, 'children': c_6}, with_context = false) }}
+        {%- else %}
+          {%- set c_7 -%}
+            {{ ui_text(v_n) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(ui_tpl(v_pageLabel, [v_n]))}, 'children': c_7}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- else %}
+      {%- set c_8 -%}
+        {{ ui_text(v_page) }}
+        {{ ui_text(' / ') }}
+        {{ ui_text(v_pages) }}
+      {%- endset -%}
+      {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'min-w-12 text-center font-bold text-foreground'}, 'children': c_8}, with_context = false) }}
+    {%- endif %}
+    {%- set c_9 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-right', 'Size': 16}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(v_nextLabel), 'Disabled': ui_t(ui_ge(v_page, v_pages))}, 'children': c_9}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex flex-wrap items-center gap-2'}, 'children': c_10}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'pager'])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/panel.html.twig b/packages/twig/ui/blocks/panel.html.twig
new file mode 100644
index 0000000..271de11
--- /dev/null
+++ b/packages/twig/ui/blocks/panel.html.twig
@@ -0,0 +1,32 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/panel.json
+    A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the Block of its block (rule 01).
+    Props (p): title, description, id, className, actions (slot); children: markup. -#}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_description = (p.description ?? null) -%}
+{%- set v_id = (p.id ?? null) -%}
+{%- set c_5 -%}
+  {%- if ui_t(ui_or([v_title, ((p.actions ?? null) is not null)])) %}
+    {%- set c_4 -%}
+      {%- set c_3 -%}
+        {%- if ui_t(v_title) %}
+          {%- set c_1 -%}
+            {{ ui_text(v_title) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': 'base', 'Class': 'm-0 text-foreground', 'Attrs': ui_attrs(['id', (ui_t(v_id) ? ui_tpl('{0}-t', [v_id]) : null)])}, 'children': c_1}, with_context = false) }}
+        {%- endif %}
+        {%- if ui_t(v_description) %}
+          {%- set c_2 -%}
+            {{ ui_text(v_description) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-w-0 flex-col gap-2'}, 'children': c_3}, with_context = false) }}
+      {{ (p.actions ?? '')|raw }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex items-start justify-between gap-4'}, 'children': c_4}, with_context = false) }}
+  {%- endif %}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'group', 'aria-labelledby', (ui_t(ui_and([v_title, v_id])) ? ui_tpl('{0}-t', [v_id]) : null)])}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/payment-options.html.twig b/packages/twig/ui/blocks/payment-options.html.twig
new file mode 100644
index 0000000..3959125
--- /dev/null
+++ b/packages/twig/ui/blocks/payment-options.html.twig
@@ -0,0 +1,28 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/payment-options.json
+    Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup.
+    Props (p): payments, name, checked. -#}
+{%- set v_payments = (p.payments ?? null) -%}
+{%- set v_name = (p.name ?? null) -%}
+{%- set v_checked = (p.checked ?? '') -%}
+{%- set c_5 -%}
+  {%- for v_p in ui_l(v_payments) %}
+    {%- set c_4 -%}
+      {{ include('ui/radio/radio.html.twig', {'p': {'Name': ui_s(v_name), 'Value': ui_s(ui_get(v_p, ['id'])), 'Checked': ui_t(ui_eq(ui_get(v_p, ['id']), v_checked))}}, with_context = false) }}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 20, 'Class': 'shrink-0'}}, with_context = false) }}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_p, ['title'])) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-sm font-semibold'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_p, ['text'])) }}
+        {%- endset -%}
+        {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-xs text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex flex-col items-start justify-start gap-0'}, 'children': c_3}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/label/label.html.twig', {'p': {'Class': 'flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground', 'Attrs': ui_attrs(['data-testid', 'payment'])}, 'children': c_4}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-2', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'payments'])}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/photo-gallery.html.twig b/packages/twig/ui/blocks/photo-gallery.html.twig
new file mode 100644
index 0000000..8fd3873
--- /dev/null
+++ b/packages/twig/ui/blocks/photo-gallery.html.twig
@@ -0,0 +1,88 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/photo-gallery.json
+    Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes: layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.
+    Props (p): id, title, lead, photos, empty, labels, layout, captions, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_photos = (p.photos ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_captions = (p.captions ?? 'show') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_16 -%}
+  {%- if ui_t(ui_eq(ui_len(v_photos), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'image', 'title': v_empty}}, with_context = false) }}
+  {%- elseif ui_t(ui_eq(v_layout, 'featured')) %}
+    {%- set c_9 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title}}, with_context = false) }}
+      {%- set c_7 -%}
+        {%- set c_3 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_first_of(v_photos, 'title')) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+          {%- set c_2 -%}
+            {{ ui_text(ui_tpl(ui_get(v_labels, ['counter']), [1, ui_len(v_photos)])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_3}, with_context = false) }}
+        {%- set c_6 -%}
+          {%- set c_4 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-left', 'Size': 16}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['previous']))}, 'children': c_4}, with_context = false) }}
+          {%- set c_5 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-right', 'Size': 16}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['next']))}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2'}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_7}, with_context = false) }}
+      {%- set c_8 -%}
+        {%- for v_p in ui_l(v_photos) %}
+          {%- set v_i = loop.index0 -%}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': '1/1', 'className': ui_cnv([(ui_t(ui_eq(v_i, 0)) ? 'ring-2 ring-foreground' : '')])}}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-3 gap-2 sm:grid-cols-9', 'Attrs': ui_attrs(['data-testid', 'thumbs'])}, 'children': c_8}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'featured'])}, 'children': c_9}, with_context = false) }}
+  {%- else %}
+    {%- set c_15 -%}
+      {%- for v_p in ui_l(v_photos) %}
+        {%- set v_i = loop.index0 -%}
+        {%- set c_14 -%}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': (ui_t(ui_eq(v_layout, 'masonry')) ? (ui_t(ui_eq(ui_get(v_p, ['size']), 'tall')) ? '3/4' : (ui_t(ui_eq(ui_get(v_p, ['size']), 'wide')) ? '16/9' : (ui_t(ui_eq(ui_get(v_p, ['size']), 'large')) ? '4/3' : '1/1'))) : (ui_t(ui_eq(v_layout, 'grid')) ? '4/3' : '1/1')), 'className': ui_cnv([(ui_t(ui_eq(v_layout, 'mosaic')) ? 'h-full' : '')])}}, with_context = false) }}
+          {%- if ui_t(ui_and([ui_eq(v_captions, 'show'), ui_eq(v_layout, 'cards')])) %}
+            {%- set c_12 -%}
+              {%- set c_10 -%}
+                {{ ui_text(ui_get(v_p, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_10}, with_context = false) }}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_p, ['tag'])) }}
+              {%- endset -%}
+              {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_11}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_12}, with_context = false) }}
+          {%- endif %}
+          {%- if ui_t(ui_and([ui_eq(v_captions, 'show'), ui_or([ui_eq(v_layout, 'grid'), ui_eq(v_layout, 'masonry')])])) %}
+            {%- set c_13 -%}
+              {{ ui_text(ui_get(v_p, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/box/box.html.twig', {'p': {'Class': 'text-sm text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'caption'])}, 'children': c_13}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('blocks/figure-block.html.twig', {'p': {'className': ui_cnv([ui_cnv(['flex flex-col gap-2', (ui_t(ui_eq(v_layout, 'masonry')) ? 'mb-4 break-inside-avoid' : ''), (ui_t(ui_and([ui_eq(v_layout, 'mosaic'), ui_eq(v_i, 0)])) ? 'col-span-2 row-span-2' : ''), (ui_t(ui_eq(v_layout, 'cards')) ? 'rounded bg-card inset-ring inset-ring-border p-4' : '')])]), 'testid': 'item'}, 'children': c_14}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'masonry')) ? 'columns-1 gap-4 sm:columns-2 lg:columns-3' : (ui_t(ui_eq(v_layout, 'mosaic')) ? 'grid grid-cols-2 gap-4 md:grid-cols-4' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'))), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_15}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_16}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/pill.html.twig b/packages/twig/ui/blocks/pill.html.twig
new file mode 100644
index 0000000..d518167
--- /dev/null
+++ b/packages/twig/ui/blocks/pill.html.twig
@@ -0,0 +1,17 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/pill.json
+    A status pill: a tinted label with an icon (published, draft, role, comment state).
+    Props (p): tone, icon, className; children: markup. -#}
+{%- set k_PILL = {'gray': 'bg-muted text-muted-foreground inset-ring-border', 'blue': 'bg-blue-50 text-blue-700 inset-ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:inset-ring-blue-900', 'amber': 'bg-amber-50 text-amber-700 inset-ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:inset-ring-amber-900', 'green': 'bg-green-50 text-green-700 inset-ring-green-200 dark:bg-green-950 dark:text-green-300 dark:inset-ring-green-900', 'red': 'bg-red-50 text-red-700 inset-ring-red-200 dark:bg-red-950 dark:text-red-300 dark:inset-ring-red-900', 'violet': 'bg-violet-50 text-violet-700 inset-ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:inset-ring-violet-900', 'pink': 'bg-pink-50 text-pink-700 inset-ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:inset-ring-pink-900', 'orange': 'bg-orange-50 text-orange-700 inset-ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:inset-ring-orange-900', 'cyan': 'bg-cyan-50 text-cyan-700 inset-ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:inset-ring-cyan-900'} -%}
+{%- set v_tone = (p.tone ?? 'gray') -%}
+{%- set v_icon = (p.icon ?? null) -%}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {%- if ui_t(v_icon) %}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(v_icon), 'Size': 12}}, with_context = false) }}
+    {%- endif %}
+    {{ (children ?? '')|raw }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s(ui_cnv(['inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring', ui_at(k_PILL, v_tone), (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'pill'])}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'contents'}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/post-actions.html.twig b/packages/twig/ui/blocks/post-actions.html.twig
new file mode 100644
index 0000000..9cd57cd
--- /dev/null
+++ b/packages/twig/ui/blocks/post-actions.html.twig
@@ -0,0 +1,40 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-actions.json
+    The calls to action of a post header: share and save side by side, one wide read button, or a wide read button with share and save as icons.
+    Props (p): labels, mode. -#}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_mode = (p.mode ?? 'pair') -%}
+{%- if ui_t(ui_eq(v_mode, 'pair')) %}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'share-2', 'Size': 16}}, with_context = false) }}
+      {{ ui_text(ui_get(v_labels, ['share'])) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'bookmark', 'Size': 16}}, with_context = false) }}
+      {{ ui_text(ui_get(v_labels, ['save'])) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'post-save'])}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_3}, with_context = false) }}
+{%- else %}
+  {%- set c_7 -%}
+    {%- set c_4 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'book-open', 'Size': 16}}, with_context = false) }}
+      {{ ui_text(ui_get(v_labels, ['read'])) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'gap-2 flex-1', 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_4}, with_context = false) }}
+    {%- if ui_t(ui_eq(v_mode, 'icons')) %}
+      {%- set c_5 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'share-2', 'Size': 16}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['share'])), 'Attrs': ui_attrs(['data-testid', 'post-share'])}, 'children': c_5}, with_context = false) }}
+      {%- set c_6 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'bookmark', 'Size': 16}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['save'])), 'Attrs': ui_attrs(['data-testid', 'post-save'])}, 'children': c_6}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2'}, 'children': c_7}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/post-author.html.twig b/packages/twig/ui/blocks/post-author.html.twig
new file mode 100644
index 0000000..0d3a7fb
--- /dev/null
+++ b/packages/twig/ui/blocks/post-author.html.twig
@@ -0,0 +1,60 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-author.json
+    The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line, a card, or a card with the bio.
+    Props (p): post, extras, labels, mode, share, className. -#}
+{%- set v_post = (p.post ?? null) -%}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_mode = (p.mode ?? 'line') -%}
+{%- set v_share = (p.share ?? false) -%}
+{%- set c_12 -%}
+  {%- set c_10 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_post, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}, with_context = false) }}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_post, ['author'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_extras, ['role'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': 'start', 'Class': 'min-w-0 flex-1 text-start'}, 'children': c_3}, with_context = false) }}
+    {%- if ui_t(v_share) %}
+      {%- set c_6 -%}
+        {%- set c_4 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'share-2', 'Size': 16}}, with_context = false) }}
+          {{ ui_text(ui_get(v_labels, ['share'])) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'default', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'post-share'])}, 'children': c_4}, with_context = false) }}
+        {%- set c_5 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'bookmark', 'Size': 16}}, with_context = false) }}
+          {{ ui_text(ui_get(v_labels, ['save'])) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'default', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'post-save'])}, 'children': c_5}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2'}, 'children': c_6}, with_context = false) }}
+    {%- else %}
+      {%- set c_9 -%}
+        {%- set c_8 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'calendar', 'Size': 16}}, with_context = false) }}
+          {%- set c_7 -%}
+            {{ ui_text(ui_get(v_post, ['date'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_7}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_8}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'text-muted-foreground'}, 'children': c_9}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_10}, with_context = false) }}
+  {%- if ui_t(ui_eq(v_mode, 'bio')) %}
+    {%- set c_11 -%}
+      {{ ui_text(ui_get(v_extras, ['bio'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv([(ui_t(ui_eq(v_mode, 'line')) ? '' : 'rounded bg-card inset-ring inset-ring-border p-4'), (p.className ?? '')])), 'Attrs': ui_attrs(['data-testid', 'post-author'])}, 'children': c_12}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/post-card.html.twig b/packages/twig/ui/blocks/post-card.html.twig
new file mode 100644
index 0000000..ad15600
--- /dev/null
+++ b/packages/twig/ui/blocks/post-card.html.twig
@@ -0,0 +1,97 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-card.json
+    A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only), density.
+    Props (p): post, labels, layout, media, meta, density. -#}
+{%- set v_post = (p.post ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'vertical') -%}
+{%- set v_media = (p.media ?? 'image') -%}
+{%- set v_meta = (p.meta ?? 'full') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- if ui_t(ui_eq(v_meta, 'news')) %}
+  {%- set c_6 -%}
+    {%- set c_2 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_post, ['title']), 'src': ui_get(v_post, ['image']), 'className': ui_cnv([ui_cnv(['size-full', ui_preset('blocks/presets/defaults.json', ['media', 'rounded'])])])}}, with_context = false) }}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_post, ['title'])) }}
+      {%- endset -%}
+      {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xs', 'Weight': 'semibold', 'Class': ui_s(ui_cnv(['pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground', ui_preset('blocks/presets/defaults.json', ['news', 'title'])])), 'Attrs': ui_attrs(['data-testid', 'news-title'])}, 'children': c_1}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['relative shrink-0 overflow-hidden', ui_preset('blocks/presets/defaults.json', ['news', 'cover'])])), 'Attrs': ui_attrs(['data-testid', 'news-cover'])}, 'children': c_2}, with_context = false) }}
+    {%- set c_5 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'calendar', 'Size': 16}}, with_context = false) }}
+      {%- set c_3 -%}
+        {{ ui_text(ui_get(v_post, ['date'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-4'}, 'children': c_3}, with_context = false) }}
+      {%- if ui_t(ui_get(v_post, ['category'])) %}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_post, ['category'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-4'}, 'children': c_4}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-full px-2 text-muted-foreground', ui_preset('blocks/presets/defaults.json', ['news', 'strip'])])), 'Attrs': ui_attrs(['data-testid', 'news-date'])}, 'children': c_5}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv(['flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border', ui_preset('blocks/presets/defaults.json', ['news', 'card'])])), 'Attrs': ui_attrs(['data-testid', 'item', 'data-layout', v_layout, 'data-meta', 'news'])}, 'children': c_6}, with_context = false) }}
+{%- else %}
+  {%- set c_18 -%}
+    {%- if ui_t(ui_eq(v_media, 'image')) %}
+      {%- set c_7 -%}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_post, ['title']), 'src': ui_get(v_post, ['image']), 'className': ui_cnv(['h-full'])}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['relative shrink-0', (ui_t(ui_eq(v_layout, 'horizontal')) ? 'sm:w-64' : '')]))}, 'children': c_7}, with_context = false) }}
+    {%- endif %}
+    {%- set c_17 -%}
+      {%- if ui_t(not (ui_eq(v_meta, 'news'))) %}
+        {%- set c_9 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_post, ['icon'])), 'Size': 16}}, with_context = false) }}
+          {%- set c_8 -%}
+            {{ ui_text(ui_get(v_post, ['category'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'uppercase tracking-wide text-muted-foreground'}, 'children': c_8}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_9}, with_context = false) }}
+      {%- endif %}
+      {%- set c_10 -%}
+        {{ ui_text(ui_get(v_post, ['title'])) }}
+      {%- endset -%}
+      {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_10}, with_context = false) }}
+      {%- if ui_t(ui_and([ui_eq(v_density, 'default'), not (ui_eq(v_meta, 'news'))])) %}
+        {%- set c_11 -%}
+          {{ ui_text(ui_get(v_post, ['excerpt'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+      {%- endif %}
+      {%- if ui_t(not (ui_eq(v_meta, 'news'))) %}
+        {%- set c_15 -%}
+          {%- if ui_t(ui_eq(v_meta, 'full')) %}
+            {%- set c_12 -%}
+              {{ ui_text(ui_tpl(ui_get(v_labels, ['by']), [ui_get(v_post, ['author'])])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs'}, 'children': c_12}, with_context = false) }}
+          {%- endif %}
+          {%- set c_13 -%}
+            {{ ui_text(ui_get(v_post, ['date'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs'}, 'children': c_13}, with_context = false) }}
+          {%- if ui_t(ui_eq(v_meta, 'full')) %}
+            {%- set c_14 -%}
+              {{ ui_text(ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_post, ['minutes'])])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs'}, 'children': c_14}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Class': 'mt-auto flex-wrap pt-2 text-muted-foreground'}, 'children': c_15}, with_context = false) }}
+      {%- endif %}
+      {%- if ui_t(ui_and([not (ui_eq(v_meta, 'news')), ui_get(v_post, ['href'])])) %}
+        {%- set c_16 -%}
+          {{ ui_text(ui_get(v_labels, ['read'])) }}
+        {%- endset -%}
+        {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_get(v_post, ['href'])), 'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'read'])}, 'children': c_16}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/card/card-content.html.twig', {'p': {'Class': 'flex flex-1 flex-col gap-2'}, 'children': c_17}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv(['flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded', 'h-full gap-4 overflow-hidden', (ui_t(ui_eq(v_layout, 'horizontal')) ? 'flex flex-col sm:flex-row' : 'flex flex-col')])), 'Attrs': ui_attrs(['data-slot', 'card', 'data-testid', 'item', 'data-layout', v_layout, 'data-meta', v_meta])}, 'children': c_18}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/post-feature.html.twig b/packages/twig/ui/blocks/post-feature.html.twig
new file mode 100644
index 0000000..860499a
--- /dev/null
+++ b/packages/twig/ui/blocks/post-feature.html.twig
@@ -0,0 +1,41 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-feature.json
+    The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading time, and a wide read button.
+    Props (p): p, labels. -#}
+{%- set v_p = (p.p ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_9 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_p, ['category'])) }}
+  {%- endset -%}
+  {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm', 'Class': 'w-fit'}, 'children': c_1}, with_context = false) }}
+  {%- set c_2 -%}
+    {{ ui_text(ui_get(v_p, ['title'])) }}
+  {%- endset -%}
+  {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+  {%- set c_3 -%}
+    {{ ui_text(ui_get(v_p, ['excerpt'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+  {%- set c_7 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_p, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}, with_context = false) }}
+    {%- set c_6 -%}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_p, ['author'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+      {%- set c_5 -%}
+        {{ ui_text(ui_tpl('{0} · {1}', [ui_get(v_p, ['date']), ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_p, ['minutes'])])])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_6}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_7}, with_context = false) }}
+  {%- set c_8 -%}
+    {{ ui_text(ui_get(v_labels, ['read'])) }}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Href': ui_s(ui_get(v_p, ['href'])), 'Class': 'w-full gap-2', 'Attrs': ui_attrs(['data-testid', 'action-primary'])}, 'children': c_8}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'border-t border-border pt-6', 'Attrs': ui_attrs(['data-testid', 'post-feature'])}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/post-grid.html.twig b/packages/twig/ui/blocks/post-grid.html.twig
new file mode 100644
index 0000000..76e452c
--- /dev/null
+++ b/packages/twig/ui/blocks/post-grid.html.twig
@@ -0,0 +1,60 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-grid.json
+    A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news), filter mode (none, topics), tone, density.
+    Props (p): id, title, posts, labels, action, filter, layout, cols, media, meta, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_posts = (p.posts ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_action = (p.action ?? null) -%}
+{%- set v_filter = (p.filter ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_cols = (p.cols ?? '1-3') -%}
+{%- set v_media = (p.media ?? 'image') -%}
+{%- set v_meta = (p.meta ?? 'full') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_6 -%}
+  {%- if ui_t(ui_eq(ui_get(v_filter, ['mode']), 'topics')) %}
+    {%- set c_2 -%}
+      {%- for v_tab in ui_l(ui_get(v_filter, ['topics'])) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_tab, ['title'])) }}
+        {%- endset -%}
+        {{ include('blocks/switcher-item.html.twig', {'p': {'active': ui_eq(ui_get(v_tab, ['value']), ui_get(v_filter, ['topic']))}, 'children': c_1}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('blocks/switcher.html.twig', {'p': {'label': ui_get(v_filter, ['label'])}, 'children': c_2}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_gt(ui_len(ui_where(v_posts, 'category', ui_get(v_filter, ['topic']))), 0)) %}
+    {%- if ui_t(ui_eq(v_layout, 'magazine')) %}
+      {%- set c_4 -%}
+        {%- for v_p in ui_l(ui_where(v_posts, 'category', ui_get(v_filter, ['topic']))) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_eq(v_i, 0)) %}
+            {{ include('blocks/post-card.html.twig', {'p': {'post': v_p, 'labels': v_labels, 'layout': 'horizontal', 'media': v_media, 'meta': v_meta, 'density': v_density}}, with_context = false) }}
+          {%- endif %}
+        {%- endfor %}
+        {%- set c_3 -%}
+          {%- for v_p in ui_l(ui_where(v_posts, 'category', ui_get(v_filter, ['topic']))) %}
+            {%- set v_i = loop.index0 -%}
+            {%- if ui_t(ui_gt(v_i, 0)) %}
+              {{ include('blocks/post-card.html.twig', {'p': {'post': v_p, 'labels': v_labels, 'media': v_media, 'meta': v_meta, 'density': v_density}}, with_context = false) }}
+            {%- endif %}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s(v_cols), 'Class': 'gap-6'}, 'children': c_3}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_4}, with_context = false) }}
+    {%- else %}
+      {%- set c_5 -%}
+        {%- for v_p in ui_l(ui_where(v_posts, 'category', ui_get(v_filter, ['topic']))) %}
+          {{ include('blocks/post-card.html.twig', {'p': {'post': v_p, 'labels': v_labels, 'layout': (ui_t(ui_eq(v_layout, 'list')) ? 'horizontal' : 'vertical'), 'media': v_media, 'meta': v_meta, 'density': v_density}}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'list')) ? '1' : ui_fit_cols(v_cols, ui_len(ui_where(v_posts, 'category', ui_get(v_filter, ['topic'])))))), 'Class': 'w-full gap-6', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_5}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'action': v_action, 'tone': v_tone, 'density': (ui_t(ui_eq(v_density, 'compact')) ? 'compact' : 'default'), 'measure': (ui_t(ui_eq(v_meta, 'news')) ? 'fill' : 'default'), 'className': ui_cnv([(ui_t(ui_eq(v_meta, 'news')) ? 'py-0' : '')]), 'landmarkLabel': v_landmarkLabel}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/post-header.html.twig b/packages/twig/ui/blocks/post-header.html.twig
new file mode 100644
index 0000000..6620f26
--- /dev/null
+++ b/packages/twig/ui/blocks/post-header.html.twig
@@ -0,0 +1,48 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-header.json
+    The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout (start, center), cover (show, hide), meta (full, short), tone.
+    Props (p): id, post, labels, level, layout, cover, meta, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_post = (p.post ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_layout = (p.layout ?? 'start') -%}
+{%- set v_cover = (p.cover ?? 'show') -%}
+{%- set v_meta = (p.meta ?? 'full') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(v_post) %}
+  {%- set f_6 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_post, ['title']), 'src': ui_get(v_post, ['image']), 'ratio': '21/9'}}, with_context = false) }}
+  {%- endset -%}
+  {%- set c_7 -%}
+    {%- set c_5 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_post, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}, with_context = false) }}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_post, ['author'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_post, ['date'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_meta, 'full')) %}
+        {%- set c_3 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_post, ['minutes'])])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_post, ['category'])) }}
+      {%- endset -%}
+      {{ include('blocks/pill.html.twig', {'p': {'tone': 'blue'}, 'children': c_4}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': ui_s((ui_t(ui_eq(v_layout, 'center')) ? 'center' : 'start')), 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-testid', 'post-meta'])}, 'children': c_5}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': ui_get(v_post, ['title']), 'lead': ui_get(v_post, ['excerpt']), 'heading': {'level': v_level}, 'align': v_layout, 'tone': v_tone, 'media': {'show': ui_eq(v_cover, 'show')}, 'landmarkLabel': v_landmarkLabel, 'aside': f_6}, 'children': c_7}, with_context = false) }}
+{%- else %}
+  {%- set c_8 -%}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'file-text', 'title': ui_get(v_labels, ['empty'])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'heading': {'level': v_level}, 'align': v_layout, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_8}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/post-mini-card.html.twig b/packages/twig/ui/blocks/post-mini-card.html.twig
new file mode 100644
index 0000000..97b228e
--- /dev/null
+++ b/packages/twig/ui/blocks/post-mini-card.html.twig
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-mini-card.json
+    A small post card of PostShowcase: the picture, the category, the title and the author with the reading time.
+    Props (p): p, labels. -#}
+{%- set v_p = (p.p ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_5 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_p, ['title'])}}, with_context = false) }}
+  {%- set c_4 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_p, ['category'])) }}
+    {%- endset -%}
+    {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_p, ['title'])) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+    {%- set c_3 -%}
+      {{ ui_text(ui_tpl('{0} · {1}', [ui_get(v_p, ['author']), ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_p, ['minutes'])])])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'p-2'}, 'children': c_4}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-2', 'Attrs': ui_attrs(['data-testid', 'post-mini'])}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/post-outline.html.twig b/packages/twig/ui/blocks/post-outline.html.twig
new file mode 100644
index 0000000..5a868e1
--- /dev/null
+++ b/packages/twig/ui/blocks/post-outline.html.twig
@@ -0,0 +1,59 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-outline.json
+    The facts of a post in a column (author, date, minutes, views), then the related reading as links.
+    Props (p): post, extras, labels. -#}
+{%- set v_post = (p.post ?? null) -%}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_13 -%}
+  {%- set c_9 -%}
+    {%- set c_2 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'user', 'Size': 16}}, with_context = false) }}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_post, ['author'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_1}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_2}, with_context = false) }}
+    {%- set c_4 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'calendar', 'Size': 16}}, with_context = false) }}
+      {%- set c_3 -%}
+        {{ ui_text(ui_get(v_post, ['date'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_3}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_4}, with_context = false) }}
+    {%- set c_6 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'clock', 'Size': 16}}, with_context = false) }}
+      {%- set c_5 -%}
+        {{ ui_text(ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_post, ['minutes'])])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_5}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_6}, with_context = false) }}
+    {%- set c_8 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'eye', 'Size': 16}}, with_context = false) }}
+      {%- set c_7 -%}
+        {{ ui_text(ui_tpl(ui_get(v_labels, ['views']), [ui_get(v_extras, ['views'])])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_7}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_8}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'text-muted-foreground'}, 'children': c_9}, with_context = false) }}
+  {%- set c_12 -%}
+    {%- set c_10 -%}
+      {{ ui_text(ui_get(v_labels, ['related'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'medium', 'Class': 'uppercase tracking-wide text-muted-foreground'}, 'children': c_10}, with_context = false) }}
+    {%- for v_l in ui_l(ui_get(v_extras, ['outline'])) %}
+      {%- set c_11 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-right', 'Size': 16}}, with_context = false) }}
+        {{ ui_text(ui_get(v_l, ['name'])) }}
+      {%- endset -%}
+      {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv(['text-sm font-medium']), 'size': 'sm', 'testid': 'post-link'}, 'children': c_11}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'border-t border-border pt-4'}, 'children': c_12}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'post-outline'])}, 'children': c_13}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/post-overlay-card.html.twig b/packages/twig/ui/blocks/post-overlay-card.html.twig
new file mode 100644
index 0000000..5b2035b
--- /dev/null
+++ b/packages/twig/ui/blocks/post-overlay-card.html.twig
@@ -0,0 +1,38 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-overlay-card.json
+    A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and date, the title, the excerpt and a read link.
+    Props (p): p, labels, ratio. -#}
+{%- set v_p = (p.p ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_ratio = (p.ratio ?? '4/3') -%}
+{%- set c_8 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': v_ratio, 'className': ui_cnv([(ui_t(ui_eq(v_ratio, '4/3')) ? 'min-h-80' : 'min-h-64')])}}, with_context = false) }}
+  {%- set c_7 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_p, ['category'])) }}
+      {%- endset -%}
+      {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_1}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_p, ['date'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}, with_context = false) }}
+    {%- set c_4 -%}
+      {{ ui_text(ui_get(v_p, ['title'])) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+    {%- set c_5 -%}
+      {{ ui_text(ui_get(v_p, ['excerpt'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': ui_s(ui_cnv(['text-muted-foreground', 'line-clamp-2']))}, 'children': c_5}, with_context = false) }}
+    {%- set c_6 -%}
+      {{ ui_text(ui_get(v_labels, ['read'])) }}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_p, ['href']), 'className': ui_cnv(['gap-2 text-sm font-medium']), 'size': 'sm', 'testid': 'read'}, 'children': c_6}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'absolute bottom-4 left-4 right-4 rounded bg-background p-4'}, 'children': c_7}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'relative overflow-hidden rounded', 'Attrs': ui_attrs(['data-testid', 'post-overlay'])}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/post-showcase.html.twig b/packages/twig/ui/blocks/post-showcase.html.twig
new file mode 100644
index 0000000..f5b5646
--- /dev/null
+++ b/packages/twig/ui/blocks/post-showcase.html.twig
@@ -0,0 +1,69 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-showcase.json
+    Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured: the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3: overlay columns), mediaSide, tone.
+    Props (p): id, title, lead, badge, posts, labels, action, layout, cols, mediaSide, tone, empty, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_posts = (p.posts ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_action = (p.action ?? null) -%}
+{%- set v_layout = (p.layout ?? 'intro') -%}
+{%- set v_cols = (p.cols ?? '3') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'start') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_eq(ui_len(v_posts), 0)) %}
+  {%- set c_1 -%}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'newspaper', 'title': v_empty}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}, with_context = false) }}
+{%- elseif ui_t(ui_eq(v_layout, 'intro')) %}
+  {%- set f_3 -%}
+    {%- set c_4 -%}
+      {%- for v_p in ui_l(v_posts) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 4)) %}
+          {{ include('blocks/post-mini-card.html.twig', {'p': {'p': v_p, 'labels': v_labels}}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 gap-4 sm:grid-cols-2'}, 'children': c_4}, with_context = false) }}
+  {%- endset -%}
+  {%- set c_5 -%}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_action, ['label'])) }}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_get(v_action, ['href'])), 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'section-action'])}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_3}, 'children': c_5}, with_context = false) }}
+{%- elseif ui_t(ui_eq(v_layout, 'featured')) %}
+  {%- set f_6 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+  {%- endset -%}
+  {%- set c_7 -%}
+    {%- for v_p in ui_l(v_posts) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 1)) %}
+        {{ include('blocks/post-feature.html.twig', {'p': {'p': v_p, 'labels': v_labels}}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_6}, 'children': c_7}, with_context = false) }}
+{%- else %}
+  {%- set c_9 -%}
+    {%- set c_8 -%}
+      {%- for v_p in ui_l(v_posts) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, (ui_t(ui_eq(v_cols, '2')) ? 2 : 3))) %}
+          {{ include('blocks/post-overlay-card.html.twig', {'p': {'p': v_p, 'labels': v_labels, 'ratio': (ui_t(ui_eq(v_cols, '2')) ? '16/9' : '4/3')}}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_cols, '2')) ? 'grid grid-cols-1 gap-6 md:grid-cols-2' : 'grid grid-cols-1 gap-6 md:grid-cols-3'))}, 'children': c_8}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_9}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/post-split.html.twig b/packages/twig/ui/blocks/post-split.html.twig
new file mode 100644
index 0000000..7590c14
--- /dev/null
+++ b/packages/twig/ui/blocks/post-split.html.twig
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-split.json
+    A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags, figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair, wide, icons), tone.
+    Props (p): id, post, labels, extras, level, layout, mediaSide, author, cover, actions, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_post = (p.post ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_layout = (p.layout ?? 'split') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_author = (p.author ?? 'line') -%}
+{%- set v_cover = (p.cover ?? 'wide') -%}
+{%- set v_actions = (p.actions ?? 'pair') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_eq(v_layout, 'center')) %}
+  {%- set f_1 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_post, ['title']), 'ratio': (ui_t(ui_eq(v_layout, 'center')) ? '21/9' : (ui_t(ui_eq(v_cover, 'square')) ? '1/1' : '4/3'))}}, with_context = false) }}
+  {%- endset -%}
+  {%- set c_2 -%}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['tags'])), 0)) %}
+      {{ include('blocks/post-tags.html.twig', {'p': {'tags': ui_get(v_extras, ['tags']), 'align': 'center'}}, with_context = false) }}
+    {%- endif %}
+    {{ include('blocks/post-stats.html.twig', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels, 'align': 'center'}}, with_context = false) }}
+    {{ include('blocks/post-author.html.twig', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels, 'mode': 'card', 'share': true, 'className': ui_cnv(['mx-auto w-full max-w-md'])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': ui_get(v_post, ['title']), 'lead': ui_get(v_post, ['excerpt']), 'heading': {'badge': ui_get(v_post, ['category']), 'level': v_level}, 'tone': v_tone, 'media': {'show': true}, 'align': 'center', 'landmarkLabel': v_landmarkLabel, 'aside': f_1}, 'children': c_2}, with_context = false) }}
+{%- else %}
+  {%- set f_3 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_post, ['title']), 'ratio': (ui_t(ui_eq(v_layout, 'center')) ? '21/9' : (ui_t(ui_eq(v_cover, 'square')) ? '1/1' : '4/3'))}}, with_context = false) }}
+  {%- endset -%}
+  {%- set c_4 -%}
+    {%- if ui_t(ui_eq(v_layout, 'outline')) %}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['outline'])), 0)) %}
+        {{ include('blocks/post-outline.html.twig', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels}}, with_context = false) }}
+      {%- endif %}
+    {%- else %}
+      {{ include('blocks/post-author.html.twig', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels, 'mode': v_author}}, with_context = false) }}
+      {%- if ui_t(not (ui_eq(v_author, 'line'))) %}
+        {{ include('blocks/post-stats.html.twig', {'p': {'post': v_post, 'extras': v_extras, 'labels': v_labels}}, with_context = false) }}
+      {%- endif %}
+      {%- if ui_t(ui_gt(ui_len(ui_get(v_extras, ['tags'])), 0)) %}
+        {{ include('blocks/post-tags.html.twig', {'p': {'tags': ui_get(v_extras, ['tags'])}}, with_context = false) }}
+      {%- endif %}
+    {%- endif %}
+    {{ include('blocks/post-actions.html.twig', {'p': {'labels': v_labels, 'mode': v_actions}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': ui_get(v_post, ['title']), 'lead': ui_get(v_post, ['excerpt']), 'heading': {'badge': ui_get(v_post, ['category']), 'level': v_level}, 'tone': v_tone, 'media': {'show': true, 'side': v_mediaSide}, 'layout': 'split', 'landmarkLabel': v_landmarkLabel, 'aside': f_3}, 'children': c_4}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/post-stats.html.twig b/packages/twig/ui/blocks/post-stats.html.twig
new file mode 100644
index 0000000..9fee522
--- /dev/null
+++ b/packages/twig/ui/blocks/post-stats.html.twig
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-stats.json
+    The reading figures of a post: minutes to read, views and likes, each with its glyph.
+    Props (p): post, extras, labels, align. -#}
+{%- set v_post = (p.post ?? null) -%}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_align = (p.align ?? 'start') -%}
+{%- set c_7 -%}
+  {%- set c_2 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'clock', 'Size': 16}}, with_context = false) }}
+    {%- set c_1 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['minutes']), [ui_get(v_post, ['minutes'])])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_2}, with_context = false) }}
+  {%- set c_4 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'eye', 'Size': 16}}, with_context = false) }}
+    {%- set c_3 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['views']), [ui_get(v_extras, ['views'])])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_3}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_4}, with_context = false) }}
+  {%- set c_6 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'heart', 'Size': 16}}, with_context = false) }}
+    {%- set c_5 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['likes']), [ui_get(v_extras, ['likes'])])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_5}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_6}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': ui_s(v_align), 'Class': 'flex-wrap text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'post-stats'])}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/post-tags.html.twig b/packages/twig/ui/blocks/post-tags.html.twig
new file mode 100644
index 0000000..456a96a
--- /dev/null
+++ b/packages/twig/ui/blocks/post-tags.html.twig
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/post-tags.json
+    The tags of a post as small badges in a wrapping row.
+    Props (p): tags, align. -#}
+{%- set v_tags = (p.tags ?? null) -%}
+{%- set v_align = (p.align ?? 'start') -%}
+{%- set c_2 -%}
+  {%- for v_tag in ui_l(v_tags) %}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_tag, ['name'])) }}
+    {%- endset -%}
+    {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'post-tag'])}, 'children': c_1}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Justify': ui_s(v_align), 'Class': 'flex-wrap'}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/presets/defaults.json b/packages/twig/ui/blocks/presets/defaults.json
new file mode 100644
index 0000000..b6af443
--- /dev/null
+++ b/packages/twig/ui/blocks/presets/defaults.json
@@ -0,0 +1,82 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "specVersion": 1,
+  "id": "preset.defaults",
+  "name": "defaults",
+  "docs": "Default layout preset: the sizes of the landing blocks as Tailwind classes.\nBlocks combine these with token classes; swap the preset to resize every block at once.",
+  "source": "ui8kit default sizes (Tailwind scale, no arbitrary values)",
+  "notes": {
+    "text": "small type steps for chips, badges and links",
+    "hero.band": "the inverse band: tall section, large bottom radius",
+    "hero.title": "display title",
+    "hero.titleWeights": "one font-weight class per title word",
+    "hero.composer": "the prompt box",
+    "logos.row": "one centered row of logo slots",
+    "logos.glyph": "the Lucide glyph inside a slot: half the slot"
+  },
+  "values": {
+    "text": {
+      "tiny": "text-xs",
+      "small": "text-sm"
+    },
+    "hero": {
+      "band": "min-h-160 rounded",
+      "container": "max-w-7xl",
+      "head": "gap-12",
+      "badge": "w-48",
+      "title": "text-5xl leading-tight",
+      "titleWeights": [
+        "font-normal",
+        "font-semibold",
+        "font-normal",
+        "font-semibold"
+      ],
+      "column": "max-w-xl gap-16",
+      "composer": "h-40 max-w-xl rounded",
+      "attach": "w-24",
+      "promptLine": "h-10",
+      "model": "w-24"
+    },
+    "section": {
+      "landing": "max-w-6xl"
+    },
+    "media": {
+      "rounded": "rounded"
+    },
+    "templates": {
+      "card": "h-60 w-64",
+      "image": "h-40 w-58 rounded",
+      "footer": "h-12 min-h-12"
+    },
+    "stats": {
+      "column": "min-h-28",
+      "figure": "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18",
+      "panel": "gap-24 rounded py-20"
+    },
+    "features": {
+      "cells": "rounded"
+    },
+    "news": {
+      "card": "h-56 w-64",
+      "cover": "h-40 w-64 rounded",
+      "title": "top-16",
+      "strip": "h-12 min-h-12"
+    },
+    "cta": {
+      "panel": "rounded py-20",
+      "title": "max-w-md",
+      "text": "max-w-2xl",
+      "button": "w-40"
+    },
+    "logos": {
+      "row": "h-28 max-w-4xl gap-12 pb-8",
+      "slot": "size-20",
+      "glyph": 40
+    },
+    "footer": {
+      "card": "h-72 gap-12 rounded",
+      "brand": "w-48",
+      "groups": "gap-x-16"
+    }
+  }
+}
diff --git a/packages/twig/ui/blocks/pricing-card.html.twig b/packages/twig/ui/blocks/pricing-card.html.twig
new file mode 100644
index 0000000..6a1e178
--- /dev/null
+++ b/packages/twig/ui/blocks/pricing-card.html.twig
@@ -0,0 +1,83 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/pricing-card.json
+    A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more actions. Text comes in through `labels`; the plan is data.
+    Props (p): plan, labels, current, emphasis, density, billing, footer (slot: plan). -#}
+{%- set v_plan = (p.plan ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_current = (p.current ?? null) -%}
+{%- set v_emphasis = (p.emphasis ?? 'auto') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_billing = (p.billing ?? 'monthly') -%}
+{%- set v_stand = ui_and([ui_get(v_plan, ['highlighted']), ui_eq(v_emphasis, 'auto')]) -%}
+{%- set v_yearlyOn = ui_and([ui_eq(v_billing, 'annual'), ui_gt(ui_get(v_plan, ['yearly']), 0)]) -%}
+{%- set v_amount = (ui_t(v_yearlyOn) ? ui_get(v_plan, ['yearly']) : ui_get(v_plan, ['price'])) -%}
+{%- set c_16 -%}
+  {%- set c_5 -%}
+    {%- set c_2 -%}
+      {%- if ui_t(v_stand) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_labels, ['popular'])) }}
+        {%- endset -%}
+        {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'default', 'Size': 'default'}, 'children': c_1}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-h-6 items-center', 'Attrs': ui_attrs(['data-slot', 'badge-slot'])}, 'children': c_2}, with_context = false) }}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_plan, ['name'])) }}
+    {%- endset -%}
+    {{ include('ui/card/card-title.html.twig', {'p': {'As': ui_i(3)}, 'children': c_3}, with_context = false) }}
+    {%- set c_4 -%}
+      {{ ui_text(ui_get(v_plan, ['tagline'])) }}
+    {%- endset -%}
+    {{ include('ui/card/card-description.html.twig', {'p': {}, 'children': c_4}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/card/card-header.html.twig', {'p': {'Class': 'flex flex-col gap-2'}, 'children': c_5}, with_context = false) }}
+  {%- set c_13 -%}
+    {%- set c_8 -%}
+      {%- set c_6 -%}
+        {%- if ui_t(ui_eq(v_amount, 0)) %}
+          {{ ui_text(ui_get(v_labels, ['free'])) }}
+        {%- else %}
+          {{ ui_text(ui_money(v_amount, ui_get(v_plan, ['currency']))) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': '4xl', 'Weight': 'bold'}, 'children': c_6}, with_context = false) }}
+      {%- if ui_t(ui_gt(v_amount, 0)) %}
+        {%- set c_7 -%}
+          {{ ui_text((ui_t(v_yearlyOn) ? ui_get(v_labels, ['perYear']) : ui_get(v_labels, ['perMonth']))) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'baseline'}, 'children': c_8}, with_context = false) }}
+    {%- set c_9 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['seats']), [ui_get(v_plan, ['seats'])])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'medium'}, 'children': c_9}, with_context = false) }}
+    {%- set c_10 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['storage']), [ui_get(v_plan, ['storage'])])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_10}, with_context = false) }}
+    {%- set c_12 -%}
+      {%- for v_feature in ui_l(ui_get(v_plan, ['features'])) %}
+        {%- set c_11 -%}
+          {{ ui_text(v_feature) }}
+        {%- endset -%}
+        {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex gap-2'}, 'children': c_11}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2 text-sm'}, 'children': c_12}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/card/card-content.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-1 flex-col', (ui_t(ui_eq(v_density, 'compact')) ? 'gap-2' : 'gap-4')]))}, 'children': c_13}, with_context = false) }}
+  {%- set c_15 -%}
+    {%- set c_14 -%}
+      {{ ui_text(ui_get(v_labels, ['cta'])) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': ui_s((ui_t(v_stand) ? 'default' : 'outline')), 'Size': 'default', 'Attrs': ui_attrs(['data-testid', 'plan-select'])}, 'children': c_14}, with_context = false) }}
+    {%- if (p.footer ?? null) is not null %}
+      {{ include(p.footer.t, p.footer.v|merge({'a0': v_plan}), with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/card/card-footer.html.twig', {'p': {'Class': 'flex flex-wrap items-center gap-2'}, 'children': c_15}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv(['flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded', 'flex h-full flex-col'])), 'Attrs': ui_attrs(['data-slot', 'card', 'data-highlighted', (ui_t(v_stand) ? 'true' : 'false'), 'data-current', (ui_t(v_current) ? 'true' : 'false')])}, 'children': c_16}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/pricing-tiers.html.twig b/packages/twig/ui/blocks/pricing-tiers.html.twig
new file mode 100644
index 0000000..4695e6c
--- /dev/null
+++ b/packages/twig/ui/blocks/pricing-tiers.html.twig
@@ -0,0 +1,49 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/pricing-tiers.json
+    A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid, stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and the prices of that period), density, tone.
+    Props (p): id, title, plans, labels, billingLabels, layout, cols, emphasis, billing, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_plans = (p.plans ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_billingLabels = (p.billingLabels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_cols = (p.cols ?? '1-3') -%}
+{%- set v_emphasis = (p.emphasis ?? 'auto') -%}
+{%- set v_billing = (p.billing ?? 'off') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_7 -%}
+  {%- if ui_t(not (ui_eq(v_billing, 'off'))) %}
+    {%- set c_5 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_billingLabels, ['monthly'])) }}
+        {%- endset -%}
+        {{ include('blocks/switcher-item.html.twig', {'p': {'active': ui_eq(v_billing, 'monthly')}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_billingLabels, ['annual'])) }}
+        {%- endset -%}
+        {{ include('blocks/switcher-item.html.twig', {'p': {'active': ui_eq(v_billing, 'annual')}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('blocks/switcher.html.twig', {'p': {'label': ui_get(v_billingLabels, ['label'])}, 'children': c_3}, with_context = false) }}
+      {%- set c_4 -%}
+        {{ ui_text(ui_get(v_billingLabels, ['save'])) }}
+      {%- endset -%}
+      {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'default', 'Size': 'default'}, 'children': c_4}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'center', 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-testid', 'billing'])}, 'children': c_5}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(ui_len(v_plans), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layers', 'title': ui_get(v_labels, ['empty'])}}, with_context = false) }}
+  {%- else %}
+    {%- set c_6 -%}
+      {%- for v_plan in ui_l(v_plans) %}
+        {{ include('blocks/pricing-card.html.twig', {'p': {'plan': v_plan, 'labels': v_labels, 'emphasis': v_emphasis, 'billing': (ui_t(ui_eq(v_billing, 'annual')) ? 'annual' : 'monthly'), 'density': (ui_t(ui_eq(v_density, 'compact')) ? 'compact' : 'default')}}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'stack')) ? '1' : ui_fit_cols(v_cols, ui_len(v_plans)))), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'tiers'])}, 'children': c_6}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': (ui_t(ui_eq(v_layout, 'stack')) ? 'md' : 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/product-card.html.twig b/packages/twig/ui/blocks/product-card.html.twig
new file mode 100644
index 0000000..7d5ea25
--- /dev/null
+++ b/packages/twig/ui/blocks/product-card.html.twig
@@ -0,0 +1,88 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-card.json
+    A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image, none), ratio, rating (show, hide), action (button, none), density.
+    Props (p): product, labels, badges, layout, media, ratio, rating, action, density. -#}
+{%- set v_product = (p.product ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_badges = (p.badges ?? null) -%}
+{%- set v_layout = (p.layout ?? 'vertical') -%}
+{%- set v_media = (p.media ?? 'image') -%}
+{%- set v_ratio = (p.ratio ?? '4/3') -%}
+{%- set v_rating = (p.rating ?? 'show') -%}
+{%- set v_action = (p.action ?? 'button') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set c_16 -%}
+  {%- if ui_t(ui_eq(v_media, 'image')) %}
+    {%- set c_2 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_product, ['name']), 'src': ui_get(v_product, ['image']), 'ratio': v_ratio, 'className': ui_cnv(['h-full'])}}, with_context = false) }}
+      {%- if ui_t(ui_get(v_product, ['badge'])) %}
+        {%- set c_1 -%}
+          {{ ui_text(ui_at(v_badges, ui_get(v_product, ['badge']))) }}
+        {%- endset -%}
+        {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'absolute left-4 top-4', 'Attrs': ui_attrs(['data-testid', 'badge'])}, 'children': c_1}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['relative shrink-0', (ui_t(ui_eq(v_layout, 'horizontal')) ? 'sm:w-48' : '')]))}, 'children': c_2}, with_context = false) }}
+  {%- endif %}
+  {%- set c_15 -%}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_product, ['category'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'uppercase tracking-wide text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+    {%- set c_5 -%}
+      {%- if ui_t(ui_get(v_product, ['href'])) %}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_product, ['name'])) }}
+        {%- endset -%}
+        {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_get(v_product, ['href'])), 'Variant': 'default', 'Attrs': ui_attrs(['data-testid', 'open'])}, 'children': c_4}, with_context = false) }}
+      {%- else %}
+        {{ ui_text(ui_get(v_product, ['name'])) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_5}, with_context = false) }}
+    {%- if ui_t(ui_eq(v_rating, 'show')) %}
+      {%- set c_7 -%}
+        {{ include('blocks/rating.html.twig', {'p': {'value': ui_get(v_product, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['ratingLabel']), [ui_get(v_product, ['rating'])])}}, with_context = false) }}
+        {%- set c_6 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['reviews']), [ui_get(v_product, ['reviews'])])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2'}, 'children': c_7}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_density, 'default')) %}
+      {%- set c_8 -%}
+        {{ ui_text(ui_get(v_product, ['summary'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_8}, with_context = false) }}
+    {%- endif %}
+    {%- set c_14 -%}
+      {%- set c_12 -%}
+        {%- set c_9 -%}
+          {{ ui_text(ui_money(ui_get(v_product, ['price']), ui_get(v_product, ['currency']))) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_9}, with_context = false) }}
+        {%- if ui_t(ui_and([ui_get(v_product, ['compareAt']), ui_gt(ui_get(v_product, ['compareAt']), ui_get(v_product, ['price']))])) %}
+          {%- set c_11 -%}
+            {%- set c_10 -%}
+              {{ ui_text(ui_get(v_labels, ['was'])) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_10}, with_context = false) }}
+            {{ ui_text(ui_money(ui_get(v_product, ['compareAt']), ui_get(v_product, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Tag': 'del', 'Size': 'sm', 'Class': 'relative text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'compare-at'])}, 'children': c_11}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'baseline', 'Class': 'flex-wrap'}, 'children': c_12}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_action, 'button')) %}
+        {%- set c_13 -%}
+          {{ ui_text((ui_t(ui_get(v_product, ['inStock'])) ? ui_get(v_labels, ['add']) : ui_get(v_labels, ['soldOut']))) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': ui_s((ui_t(ui_get(v_product, ['inStock'])) ? 'default' : 'outline')), 'Size': 'sm', 'Disabled': ui_t(not (ui_t(ui_get(v_product, ['inStock'])))), 'Attrs': ui_attrs(['data-testid', 'add'])}, 'children': c_13}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Justify': 'between', 'Class': 'mt-auto pt-2'}, 'children': c_14}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/card/card-content.html.twig', {'p': {'Class': 'flex flex-1 flex-col gap-2'}, 'children': c_15}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'article', 'Class': ui_s(ui_cnv(['flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded', 'h-full gap-4 overflow-hidden', (ui_t(ui_eq(v_layout, 'horizontal')) ? 'flex flex-col sm:flex-row' : 'flex flex-col')])), 'Attrs': ui_attrs(['data-slot', 'card', 'data-testid', 'item', 'data-layout', v_layout])}, 'children': c_16}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/product-detail.html.twig b/packages/twig/ui/blocks/product-detail.html.twig
new file mode 100644
index 0000000..faf168f
--- /dev/null
+++ b/packages/twig/ui/blocks/product-detail.html.twig
@@ -0,0 +1,82 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-detail.json
+    A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price, stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs (none, below), buy (full, compact), tone, density.
+    Props (p): id, product, labels, badges, level, layout, mediaSide, thumbs, buy, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_product = (p.product ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_badges = (p.badges ?? null) -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_layout = (p.layout ?? 'split') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'start') -%}
+{%- set v_thumbs = (p.thumbs ?? 'below') -%}
+{%- set v_buy = (p.buy ?? 'full') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(not (ui_t(v_product))) %}
+  {%- set c_1 -%}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'package', 'title': ui_get(v_labels, ['empty'])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}, with_context = false) }}
+{%- else %}
+  {%- set f_14 -%}
+    {{ include('blocks/product-gallery.html.twig', {'p': {'name': ui_get(v_product, ['name']), 'image': ui_get(v_product, ['image']), 'thumbs': v_thumbs}}, with_context = false) }}
+  {%- endset -%}
+  {%- set c_15 -%}
+    {%- set c_13 -%}
+      {%- if ui_t(ui_get(v_product, ['category'])) %}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_product, ['category'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'uppercase tracking-wide text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'category'])}, 'children': c_2}, with_context = false) }}
+      {%- endif %}
+      {{ include('blocks/product-price.html.twig', {'p': {'price': ui_get(v_product, ['price']), 'compareAt': ui_get(v_product, ['compareAt']), 'currency': ui_get(v_product, ['currency']), 'badge': (ui_t(ui_get(v_product, ['badge'])) ? ui_at(v_badges, ui_get(v_product, ['badge'])) : ''), 'was': ui_get(v_labels, ['was'])}}, with_context = false) }}
+      {%- set c_4 -%}
+        {{ include('blocks/rating.html.twig', {'p': {'value': ui_get(v_product, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['ratingLabel']), [ui_get(v_product, ['rating'])])}}, with_context = false) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['reviews']), [ui_get(v_product, ['reviews'])])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2'}, 'children': c_4}, with_context = false) }}
+      {%- set c_5 -%}
+        {{ ui_text((ui_t(ui_get(v_product, ['inStock'])) ? ui_get(v_labels, ['inStock']) : ui_get(v_labels, ['soldOut']))) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'medium', 'Class': ui_s((ui_t(ui_get(v_product, ['inStock'])) ? 'text-foreground' : 'text-destructive')), 'Attrs': ui_attrs(['data-testid', 'stock'])}, 'children': c_5}, with_context = false) }}
+      {%- set c_7 -%}
+        {%- if ui_t(ui_eq(v_buy, 'full')) %}
+          {{ include('blocks/number-field.html.twig', {'p': {'value': '1', 'name': ui_tpl('{0}-qty', [v_id]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}, with_context = false) }}
+        {%- endif %}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['add'])) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Disabled': ui_t(not (ui_t(ui_get(v_product, ['inStock'])))), 'Attrs': ui_attrs(['data-testid', 'add'])}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Class': 'flex-wrap'}, 'children': c_7}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_buy, 'full')) %}
+        {%- set c_12 -%}
+          {%- set c_9 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'truck', 'Size': 16}}, with_context = false) }}
+            {%- set c_8 -%}
+              {{ ui_text(ui_get(v_labels, ['shipping'])) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_8}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_9}, with_context = false) }}
+          {%- set c_11 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'shield-check', 'Size': 16}}, with_context = false) }}
+            {%- set c_10 -%}
+              {{ ui_text(ui_get(v_labels, ['returns'])) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_10}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_11}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2 text-sm text-muted-foreground'}, 'children': c_12}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'buy-box'])}, 'children': c_13}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': ui_get(v_product, ['name']), 'lead': ui_get(v_product, ['summary']), 'heading': {'level': v_level}, 'layout': (ui_t(ui_eq(v_layout, 'split')) ? 'split' : 'stack'), 'media': {'show': true, 'side': v_mediaSide, 'align': 'start'}, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel, 'aside': f_14}, 'children': c_15}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/product-gallery.html.twig b/packages/twig/ui/blocks/product-gallery.html.twig
new file mode 100644
index 0000000..cfd490c
--- /dev/null
+++ b/packages/twig/ui/blocks/product-gallery.html.twig
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-gallery.json
+    The gallery of a product page: the picture (the file of the product's featured media, a placeholder without one) and optional thumbnails below.
+    Props (p): name, image, thumbs. -#}
+{%- set v_name = (p.name ?? null) -%}
+{%- set v_image = (p.image ?? null) -%}
+{%- set v_thumbs = (p.thumbs ?? 'below') -%}
+{%- set c_2 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_name, 'src': v_image, 'ratio': '1/1'}}, with_context = false) }}
+  {%- if ui_t(ui_eq(v_thumbs, 'below')) %}
+    {%- set c_1 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_name, 'src': v_image, 'ratio': '1/1', 'className': ui_cnv(['ring-2 ring-foreground'])}}, with_context = false) }}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_name, 'ratio': '1/1'}}, with_context = false) }}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_name, 'ratio': '1/1'}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '3', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'thumbs'])}, 'children': c_1}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'gallery'])}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/product-grid.html.twig b/packages/twig/ui/blocks/product-grid.html.twig
new file mode 100644
index 0000000..f659de2
--- /dev/null
+++ b/packages/twig/ui/blocks/product-grid.html.twig
@@ -0,0 +1,40 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-grid.json
+    A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating, action, tone, density.
+    Props (p): id, title, products, labels, badges, layout, cols, ratio, rating, action, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_products = (p.products ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_badges = (p.badges ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_cols = (p.cols ?? '1-3') -%}
+{%- set v_ratio = (p.ratio ?? '4/3') -%}
+{%- set v_rating = (p.rating ?? 'show') -%}
+{%- set v_action = (p.action ?? 'button') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_4 -%}
+  {%- if ui_t(ui_eq(ui_len(v_products), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'package', 'title': ui_get(v_labels, ['empty'])}}, with_context = false) }}
+  {%- elseif ui_t(ui_eq(v_layout, 'rail')) %}
+    {%- set c_2 -%}
+      {%- for v_p in ui_l(v_products) %}
+        {%- set c_1 -%}
+          {{ include('blocks/product-card.html.twig', {'p': {'product': v_p, 'labels': v_labels, 'badges': v_badges, 'layout': (ui_t(ui_eq(v_layout, 'list')) ? 'horizontal' : 'vertical'), 'ratio': v_ratio, 'rating': v_rating, 'action': v_action, 'density': (ui_t(ui_eq(v_density, 'compact')) ? 'compact' : 'default')}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'w-64 shrink-0 snap-start'}, 'children': c_1}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex snap-x gap-4 overflow-x-auto pb-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}, with_context = false) }}
+  {%- else %}
+    {%- set c_3 -%}
+      {%- for v_p in ui_l(v_products) %}
+        {{ include('blocks/product-card.html.twig', {'p': {'product': v_p, 'labels': v_labels, 'badges': v_badges, 'layout': (ui_t(ui_eq(v_layout, 'list')) ? 'horizontal' : 'vertical'), 'ratio': v_ratio, 'rating': v_rating, 'action': v_action, 'density': (ui_t(ui_eq(v_density, 'compact')) ? 'compact' : 'default')}}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'list')) ? '1' : v_cols)), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_3}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/product-info.html.twig b/packages/twig/ui/blocks/product-info.html.twig
new file mode 100644
index 0000000..c5e8c14
--- /dev/null
+++ b/packages/twig/ui/blocks/product-info.html.twig
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-info.json
+    The details of a product under its buy box: texts in an accordion (native details) beside a card with the specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text open, none), tone.
+    Props (p): id, title, details, specs, labels, layout, expand, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_details = (p.details ?? null) -%}
+{%- set v_specs = (p.specs ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'split') -%}
+{%- set v_expand = (p.expand ?? 'first') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_13 -%}
+  {%- set c_12 -%}
+    {%- if ui_t(ui_gt(ui_len(v_details), 0)) %}
+      {%- set c_5 -%}
+        {%- for v_d in ui_l(v_details) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_4 -%}
+            {%- set c_2 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_d, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-base font-semibold'}, 'children': c_1}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/disclosure/summary.html.twig', {'p': {'Variant': 'item'}, 'children': c_2}, with_context = false) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_d, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'pb-4 text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/disclosure/disclosure.html.twig', {'p': {'Variant': 'item', 'Open': ui_t(ui_and([ui_eq(v_expand, 'first'), ui_eq(v_i, 0)])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_4}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': 'stretch', 'Class': ui_s((ui_t(ui_eq(v_layout, 'split')) ? 'lg:col-span-2' : '')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_5}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_gt(ui_len(v_specs), 0)) %}
+      {%- set c_11 -%}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['specs'])) }}
+        {%- endset -%}
+        {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_6}, with_context = false) }}
+        {%- set c_10 -%}
+          {%- for v_s in ui_l(v_specs) %}
+            {%- set c_9 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_s, ['label'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_s, ['value'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'font-medium'}, 'children': c_8}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0', 'Attrs': ui_attrs(['data-testid', 'spec'])}, 'children': c_9}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col'}, 'children': c_10}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'specs'])}, 'children': c_11}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'split')) ? 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3' : 'grid grid-cols-1 gap-8'))}, 'children': c_12}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_13}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/product-price.html.twig b/packages/twig/ui/blocks/product-price.html.twig
new file mode 100644
index 0000000..11a5ce3
--- /dev/null
+++ b/packages/twig/ui/blocks/product-price.html.twig
@@ -0,0 +1,32 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/product-price.json
+    The price line of a product page: the price (integer minor units in the currency), the old price (compare_at) struck through when higher, and the badge.
+    Props (p): price, compareAt, currency, badge, was. -#}
+{%- set v_price = (p.price ?? null) -%}
+{%- set v_compareAt = (p.compareAt ?? null) -%}
+{%- set v_currency = (p.currency ?? null) -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_was = (p.was ?? null) -%}
+{%- set c_5 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_money(v_price, v_currency)) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': '4xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+  {%- if ui_t(ui_and([v_compareAt, ui_gt(v_compareAt, v_price)])) %}
+    {%- set c_3 -%}
+      {%- set c_2 -%}
+        {{ ui_text(v_was) }}
+      {%- endset -%}
+      {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_2}, with_context = false) }}
+      {{ ui_text(ui_money(v_compareAt, v_currency)) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Tag': 'del', 'Size': 'lg', 'Class': 'relative text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'compare-at'])}, 'children': c_3}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(v_badge) %}
+    {%- set c_4 -%}
+      {{ ui_text(v_badge) }}
+    {%- endset -%}
+    {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'default', 'Size': 'default'}, 'children': c_4}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_5}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/profile-form.html.twig b/packages/twig/ui/blocks/profile-form.html.twig
new file mode 100644
index 0000000..7c6e156
--- /dev/null
+++ b/packages/twig/ui/blocks/profile-form.html.twig
@@ -0,0 +1,89 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/profile-form.json
+    An account settings form: a picture with a change button, name, email, bio and two notification switches, with save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default, muted).
+    Props (p): id, title, text, labels, layout, avatar, prefs, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'stacked') -%}
+{%- set v_avatar = (p.avatar ?? 'show') -%}
+{%- set v_prefs = (p.prefs ?? 'show') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_20 -%}
+  {%- set c_19 -%}
+    {%- set c_18 -%}
+      {%- set c_17 -%}
+        {%- set c_13 -%}
+          {%- set c_6 -%}
+            {%- if ui_t(ui_eq(v_avatar, 'show')) %}
+              {%- set c_2 -%}
+                {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_labels, ['picture']), 'ratio': '1/1', 'className': ui_cnv(['size-16 shrink-0 rounded-full'])}}, with_context = false) }}
+                {%- set c_1 -%}
+                  {{ ui_text(ui_get(v_labels, ['change'])) }}
+                {%- endset -%}
+                {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button'}, 'children': c_1}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'avatar'])}, 'children': c_2}, with_context = false) }}
+            {%- endif %}
+            {%- set c_3 -%}
+              {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': 'name', 'Autocomplete': 'name', 'Attrs': ui_attrs(['id', ui_tpl('{0}-name', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['name']), 'htmlFor': ui_tpl('{0}-name', [v_id])}, 'children': c_3}, with_context = false) }}
+            {%- set c_4 -%}
+              {{ include('ui/input/input.html.twig', {'p': {'Type': 'email', 'Name': 'email', 'Autocomplete': 'email', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['email']), 'htmlFor': ui_tpl('{0}-email', [v_id])}, 'children': c_4}, with_context = false) }}
+            {%- set c_5 -%}
+              {{ include('ui/textarea/textarea.html.twig', {'p': {'Rows': 4, 'Name': 'bio', 'Attrs': ui_attrs(['id', ui_tpl('{0}-bio', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['bio']), 'htmlFor': ui_tpl('{0}-bio', [v_id])}, 'children': c_5}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_6}, with_context = false) }}
+          {%- if ui_t(ui_eq(v_prefs, 'show')) %}
+            {%- set c_12 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_labels, ['prefs'])) }}
+              {%- endset -%}
+              {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_7}, with_context = false) }}
+              {%- set c_9 -%}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_get(v_labels, ['updates'])) }}
+                {%- endset -%}
+                {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-updates', [v_id])), 'Class': 'text-sm'}, 'children': c_8}, with_context = false) }}
+                {{ include('ui/switch/switch.html.twig', {'p': {'Name': 'updates', 'Attrs': ui_attrs(['id', ui_tpl('{0}-updates', [v_id])])}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_9}, with_context = false) }}
+              {%- set c_11 -%}
+                {%- set c_10 -%}
+                  {{ ui_text(ui_get(v_labels, ['alerts'])) }}
+                {%- endset -%}
+                {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-alerts', [v_id])), 'Class': 'text-sm'}, 'children': c_10}, with_context = false) }}
+                {{ include('ui/switch/switch.html.twig', {'p': {'Name': 'alerts', 'Attrs': ui_attrs(['id', ui_tpl('{0}-alerts', [v_id])])}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_11}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'prefs'])}, 'children': c_12}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'split')) ? '1-2' : '1')), 'Class': 'items-start gap-8'}, 'children': c_13}, with_context = false) }}
+        {%- set c_16 -%}
+          {%- set c_14 -%}
+            {{ ui_text(ui_get(v_labels, ['save'])) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_14}, with_context = false) }}
+          {%- set c_15 -%}
+            {{ ui_text(ui_get(v_labels, ['cancel'])) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button'}, 'children': c_15}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_16}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/form/form.html.twig', {'p': {'Method': 'dialog', 'Class': 'gap-6', 'Attrs': ui_attrs(['data-testid', 'profile-form'])}, 'children': c_17}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/panel.html.twig', {'p': {'title': v_title, 'description': v_text, 'id': v_id, 'className': ui_cnv([ui_cnv([(ui_t(ui_eq(v_tone, 'muted')) ? 'bg-muted' : '')])])}, 'children': c_18}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': 'mx-auto w-full max-w-6xl px-4 py-8', 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_19}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : (ui_t(ui_and([v_title, v_id])) ? ui_tpl('{0}-t', [v_id]) : null)), 'data-testid', 'panel-section', 'aria-label', v_landmarkLabel])}, 'children': c_20}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/project-grid.html.twig b/packages/twig/ui/blocks/project-grid.html.twig
new file mode 100644
index 0000000..887a2ba
--- /dev/null
+++ b/packages/twig/ui/blocks/project-grid.html.twig
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/project-grid.json
+    Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay, bento, list), tone, density.
+    Props (p): id, title, lead, projects, empty, labels, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_projects = (p.projects ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'cards') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_8 -%}
+  {%- set c_9 -%}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4'}}, with_context = false) }}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4', 'className': ui_cnv(['mt-8'])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-4', 'Attrs': ui_attrs(['data-testid', 'collage'])}, 'children': c_9}, with_context = false) }}
+{%- endset -%}
+{%- set c_10 -%}
+  {%- if ui_t(ui_eq(ui_len(v_projects), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'folder-open', 'title': v_empty}}, with_context = false) }}
+  {%- elseif ui_t(ui_eq(v_layout, 'list')) %}
+    {%- set c_7 -%}
+      {%- for v_p in ui_l(v_projects) %}
+        {%- set c_6 -%}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': '1/1', 'className': ui_cnv(['size-16 shrink-0'])}}, with_context = false) }}
+          {%- set c_5 -%}
+            {%- set c_3 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_p, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_p, ['year'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Justify': 'between'}, 'children': c_3}, with_context = false) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_p, ['summary'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': 'flex-1'}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Class': 'border-b border-border pb-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}, with_context = false) }}
+  {%- else %}
+    {{ include('blocks/project-tiles.html.twig', {'p': {'projects': v_projects, 'labels': v_labels, 'layout': v_layout}}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'layout': (ui_t(ui_eq(v_layout, 'list')) ? 'split' : 'stack'), 'media': {'show': ui_eq(v_layout, 'list'), 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_8}, 'children': c_10}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/project-tiles.html.twig b/packages/twig/ui/blocks/project-tiles.html.twig
new file mode 100644
index 0000000..886822e
--- /dev/null
+++ b/packages/twig/ui/blocks/project-tiles.html.twig
@@ -0,0 +1,68 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/project-tiles.json
+    The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags, two links), compact cards in four columns, captions over the pictures, or a bento where the first project takes a big tile.
+    Props (p): projects, labels, layout. -#}
+{%- set v_projects = (p.projects ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'cards') -%}
+{%- set v_over = (ui_t(ui_eq(v_layout, 'overlay')) ? true : ui_eq(v_layout, 'bento')) -%}
+{%- set c_13 -%}
+  {%- for v_p in ui_l(v_projects) %}
+    {%- set v_i = loop.index0 -%}
+    {%- set c_12 -%}
+      {%- set c_2 -%}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_p, ['title']), 'ratio': (ui_t(ui_eq(v_layout, 'compact')) ? '1/1' : (ui_t(v_over) ? '3/4' : '4/3')), 'className': ui_cnv([(ui_t(v_over) ? 'h-full' : '')])}}, with_context = false) }}
+        {%- if ui_t(ui_and([ui_get(v_p, ['featured']), not (ui_eq(v_layout, 'compact'))])) %}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_labels, ['featured'])) }}
+          {%- endset -%}
+          {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'absolute left-4 top-4', 'Attrs': ui_attrs(['data-testid', 'featured'])}, 'children': c_1}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(v_over) ? 'h-full' : 'relative'))}, 'children': c_2}, with_context = false) }}
+      {%- set c_11 -%}
+        {%- set c_3 -%}
+          {{ ui_text(ui_tpl('{0}, {1}', [ui_get(v_p, ['category']), ui_get(v_p, ['year'])])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_p, ['title'])) }}
+        {%- endset -%}
+        {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': ui_s((ui_t(ui_eq(v_layout, 'compact')) ? 'sm' : 'lg')), 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+        {%- if ui_t(not (ui_eq(v_layout, 'compact'))) %}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_p, ['summary'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+        {%- endif %}
+        {%- if ui_t(ui_eq(v_layout, 'cards')) %}
+          {%- set c_7 -%}
+            {%- for v_k in ui_l(ui_get(v_p, ['tags'])) %}
+              {%- set c_6 -%}
+                {{ ui_text(v_k) }}
+              {%- endset -%}
+              {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_6}, with_context = false) }}
+            {%- endfor %}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_7}, with_context = false) }}
+          {%- set c_10 -%}
+            {%- set c_8 -%}
+              {{ ui_text(ui_get(v_labels, ['case'])) }}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-right', 'Size': 16}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_p, ['href']), 'className': ui_cnv(['inline-flex items-center gap-2 text-sm font-medium'])}, 'children': c_8}, with_context = false) }}
+            {%- set c_9 -%}
+              {{ ui_text(ui_get(v_labels, ['view'])) }}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'external-link', 'Size': 16}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_p, ['href']), 'className': ui_cnv(['inline-flex items-center gap-2 text-sm font-medium'])}, 'children': c_9}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Class': 'pt-2'}, 'children': c_10}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'stretch', 'Class': ui_s((ui_t(v_over) ? 'absolute right-4 bottom-4 left-4 rounded bg-background p-4' : ''))}, 'children': c_11}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/article-block.html.twig', {'p': {'className': ui_cnv([ui_cnv(['flex flex-col gap-4', (ui_t(v_over) ? 'relative' : 'rounded bg-card inset-ring inset-ring-border p-4'), (ui_t(ui_and([ui_eq(v_layout, 'bento'), ui_eq(v_i, 0)])) ? 'sm:col-span-2 lg:row-span-2' : '')])]), 'testid': 'item'}, 'children': c_12}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'compact')) ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_13}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/prompt-composer.html.twig b/packages/twig/ui/blocks/prompt-composer.html.twig
new file mode 100644
index 0000000..5947ca4
--- /dev/null
+++ b/packages/twig/ui/blocks/prompt-composer.html.twig
@@ -0,0 +1,53 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/prompt-composer.json
+    A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send button. Static links only; a host adds behavior.
+    Props (p): label, attachLabel, modelLabel, send, href. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_attachLabel = (p.attachLabel ?? null) -%}
+{%- set v_modelLabel = (p.modelLabel ?? null) -%}
+{%- set v_send = (p.send ?? null) -%}
+{%- set v_href = (p.href ?? null) -%}
+{%- set c_10 -%}
+  {%- if ui_t(v_attachLabel) %}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'file-text', 'Size': 16}}, with_context = false) }}
+        {{ ui_text(v_attachLabel) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Class': ui_s(ui_cnv(['gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20', ui_preset('blocks/presets/defaults.json', ['hero', 'attach'])])), 'Attrs': ui_attrs(['data-testid', 'composer-attach'])}, 'children': c_1}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'paperclip', 'Size': 16}}, with_context = false) }}
+        {{ ui_text(v_attachLabel) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Class': ui_s(ui_cnv(['gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20', ui_preset('blocks/presets/defaults.json', ['hero', 'attach'])])), 'Attrs': ui_attrs(['data-testid', 'composer-attach'])}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'composer-attachments'])}, 'children': c_3}, with_context = false) }}
+  {%- endif %}
+  {%- set c_4 -%}
+    {{ ui_text(v_label) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'semibold', 'Class': ui_s(ui_cnv(['flex w-full items-center leading-5 text-background/80', ui_preset('blocks/presets/defaults.json', ['hero', 'promptLine'])])), 'Attrs': ui_attrs(['data-testid', 'field'])}, 'children': c_4}, with_context = false) }}
+  {%- set c_9 -%}
+    {%- set c_7 -%}
+      {%- set c_5 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'plus', 'Size': 16}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'Class': 'bg-background/10 text-background hover:bg-background/20', 'Attrs': ui_attrs(['data-testid', 'composer-plus', 'aria-label', ui_coalesce([v_attachLabel, 'Attach'])])}, 'children': c_5}, with_context = false) }}
+      {%- if ui_t(v_modelLabel) %}
+        {%- set c_6 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'sparkles', 'Size': 16}}, with_context = false) }}
+          {{ ui_text(v_modelLabel) }}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-down', 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Class': ui_s(ui_cnv(['gap-2 bg-background/10 text-background hover:bg-background/20', ui_preset('blocks/presets/defaults.json', ['hero', 'model'])])), 'Attrs': ui_attrs(['data-testid', 'composer-model'])}, 'children': c_6}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_7}, with_context = false) }}
+    {%- set c_8 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-up', 'Size': 16}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Href': ui_s(v_href), 'Variant': 'secondary', 'Size': 'sm', 'Layout': 'icon', 'Attrs': ui_attrs(['data-testid', 'submit', 'aria-label', ui_coalesce([v_send, 'Send'])])}, 'children': c_8}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'between', 'Class': 'h-8 w-full', 'Attrs': ui_attrs(['data-testid', 'composer-tools'])}, 'children': c_9}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30', ui_preset('blocks/presets/defaults.json', ['hero', 'composer'])])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_10}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/proof-band.html.twig b/packages/twig/ui/blocks/proof-band.html.twig
new file mode 100644
index 0000000..ce08e04
--- /dev/null
+++ b/packages/twig/ui/blocks/proof-band.html.twig
@@ -0,0 +1,53 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/proof-band.json
+    Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above, beside), logos (name, icon), tone, density.
+    Props (p): id, title, logos, empty, stats, layout, logoStyle, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_logos = (p.logos ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_stats = (p.stats ?? null) -%}
+{%- set v_layout = (p.layout ?? 'above') -%}
+{%- set v_logoStyle = (p.logoStyle ?? 'name') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_9 -%}
+  {%- if ui_t(ui_eq(ui_len(v_logos), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'building-2', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_8 -%}
+      {%- set c_3 -%}
+        {%- for v_logo in ui_l(v_logos) %}
+          {%- set c_2 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_logo, ['icon'])), 'Size': 24}}, with_context = false) }}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_logo, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': ui_s((ui_t(ui_eq(v_logoStyle, 'icon')) ? 'sr-only' : ''))}, 'children': c_1}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'logo'])}, 'children': c_2}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '6', 'Justify': 'center', 'Class': 'flex-wrap text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'logos'])}, 'children': c_3}, with_context = false) }}
+      {%- set c_7 -%}
+        {%- for v_stat in ui_l(v_stats) %}
+          {%- set c_6 -%}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_stat, ['value'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': '4xl', 'Weight': 'bold'}, 'children': c_4}, with_context = false) }}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_stat, ['label'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'stat'])}, 'children': c_6}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'beside')) ? '2' : '1-4')), 'Class': 'gap-6 text-center', 'Attrs': ui_attrs(['data-testid', 'stats'])}, 'children': c_7}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'beside')) ? '1-2' : '1')), 'Class': 'items-center gap-8'}, 'children': c_8}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/quote-card.html.twig b/packages/twig/ui/blocks/quote-card.html.twig
new file mode 100644
index 0000000..7ffe0a0
--- /dev/null
+++ b/packages/twig/ui/blocks/quote-card.html.twig
@@ -0,0 +1,66 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-card.json
+    One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the stars and a company glyph as `item` says.
+    Props (p): q, labels, item, layout. -#}
+{%- set v_q = (p.q ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_item = (p.item ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_get(v_item, ['kind']), 'social')) %}
+    {%- set c_4 -%}
+      {%- if ui_t(not (ui_eq(ui_get(v_item, ['avatar']), 'none'))) %}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_q, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-12 shrink-0 rounded-full'])}}, with_context = false) }}
+      {%- endif %}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_q, ['author'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['handleLine']), [ui_get(v_q, ['handle']), ui_get(v_q, ['time'])])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_3}, with_context = false) }}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'message-circle', 'Size': 16, 'Class': 'ml-auto text-muted-foreground'}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_4}, with_context = false) }}
+    {%- set c_5 -%}
+      {{ ui_text(ui_get(v_q, ['quote'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'base'}, 'children': c_5}, with_context = false) }}
+  {%- else %}
+    {%- if ui_t(not (ui_eq(ui_get(v_item, ['rating']), 'hide'))) %}
+      {{ include('blocks/rating.html.twig', {'p': {'value': ui_get(v_q, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['rating']), [ui_get(v_q, ['rating'])])}}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(ui_get(v_item, ['mark']), 'icon')) %}
+      {%- set c_6 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_q, ['mark'])), 'Size': 24}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'mark'])}, 'children': c_6}, with_context = false) }}
+    {%- endif %}
+    {%- set c_7 -%}
+      {{ ui_text(ui_get(v_q, ['quote'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': ui_s((ui_t(ui_eq(v_layout, 'single')) ? 'xl' : 'base'))}, 'children': c_7}, with_context = false) }}
+    {%- set c_11 -%}
+      {%- if ui_t(not (ui_eq(ui_get(v_item, ['avatar']), 'none'))) %}
+        {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_q, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-12 shrink-0 rounded-full'])}}, with_context = false) }}
+      {%- endif %}
+      {%- set c_10 -%}
+        {%- set c_8 -%}
+          {{ ui_text(ui_get(v_q, ['author'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_8}, with_context = false) }}
+        {%- set c_9 -%}
+          {{ ui_text(ui_tpl(ui_get(v_labels, ['byLine']), [ui_get(v_q, ['role']), ui_get(v_q, ['company'])])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_9}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_10}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_11}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/figure-block.html.twig', {'p': {'className': ui_cnv([ui_cnv(['m-0 flex flex-col gap-4', (ui_t(ui_eq(ui_get(v_item, ['kind']), 'plain')) ? '' : 'rounded p-6 inset-ring inset-ring-border bg-card'), (ui_t(ui_eq(v_layout, 'masonry')) ? 'mb-4 break-inside-avoid' : (ui_t(ui_eq(v_layout, 'strip')) ? 'w-80 shrink-0 snap-start' : 'h-full'))])]), 'testid': 'item'}, 'children': c_12}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/quote-figures.html.twig b/packages/twig/ui/blocks/quote-figures.html.twig
new file mode 100644
index 0000000..916f07c
--- /dev/null
+++ b/packages/twig/ui/blocks/quote-figures.html.twig
@@ -0,0 +1,24 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-figures.json
+    Three figures in a row above the quotes of QuoteSplit.
+    Props (p): extras. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set c_4 -%}
+  {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 3)) %}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_s, ['value'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_s, ['label'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Attrs': ui_attrs(['data-testid', 'quote-stat'])}, 'children': c_3}, with_context = false) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-3 gap-4 border-b border-border pb-8', 'Attrs': ui_attrs(['data-testid', 'quote-figures'])}, 'children': c_4}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/quote-logo-tiles.html.twig b/packages/twig/ui/blocks/quote-logo-tiles.html.twig
new file mode 100644
index 0000000..ad6da23
--- /dev/null
+++ b/packages/twig/ui/blocks/quote-logo-tiles.html.twig
@@ -0,0 +1,21 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-logo-tiles.json
+    Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit.
+    Props (p): extras. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set c_3 -%}
+  {%- for v_l in ui_l(ui_get(v_extras, ['logos'])) %}
+    {%- set v_i = loop.index0 -%}
+    {%- if ui_t(ui_lt(v_i, 4)) %}
+      {%- set c_2 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 20}}, with_context = false) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_l, ['name'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'center', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4 text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'quote-logo'])}, 'children': c_2}, with_context = false) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-4', 'Attrs': ui_attrs(['data-testid', 'quote-logos'])}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/quote-proof.html.twig b/packages/twig/ui/blocks/quote-proof.html.twig
new file mode 100644
index 0000000..507a8c1
--- /dev/null
+++ b/packages/twig/ui/blocks/quote-proof.html.twig
@@ -0,0 +1,18 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-proof.json
+    A customer quote and who said it, as a figure.
+    Props (p): quote, quoteBy, center. -#}
+{%- set v_quote = (p.quote ?? null) -%}
+{%- set v_quoteBy = (p.quoteBy ?? null) -%}
+{%- set v_center = (p.center ?? false) -%}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_quote) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'xl'}, 'children': c_1}, with_context = false) }}
+  {%- set c_2 -%}
+    {{ ui_text(v_quoteBy) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'figure', 'Class': ui_s(ui_cnv(['flex flex-col gap-2', (ui_t(v_center) ? 'items-center text-center' : '')])), 'Attrs': ui_attrs(['data-testid', 'proof'])}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/quote-rating-panel.html.twig b/packages/twig/ui/blocks/quote-rating-panel.html.twig
new file mode 100644
index 0000000..77e7ff8
--- /dev/null
+++ b/packages/twig/ui/blocks/quote-rating-panel.html.twig
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-rating-panel.json
+    The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures.
+    Props (p): extras, labels. -#}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_7 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_extras, ['score'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': '5xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+  {{ include('blocks/rating.html.twig', {'p': {'value': ui_get(v_extras, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['rating']), [ui_get(v_extras, ['rating'])]), 'size': 20}}, with_context = false) }}
+  {%- set c_2 -%}
+    {{ ui_text(ui_get(v_extras, ['reviews'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+  {%- set c_6 -%}
+    {%- for v_s in ui_l(ui_get(v_extras, ['stats'])) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_lt(v_i, 2)) %}
+        {%- set c_5 -%}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_s, ['value'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': '2xl', 'Weight': 'semibold'}, 'children': c_3}, with_context = false) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_get(v_s, ['label'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'quote-stat'])}, 'children': c_5}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid w-full grid-cols-2 gap-4 border-t border-border pt-6'}, 'children': c_6}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'center', 'Class': 'rounded bg-card inset-ring inset-ring-border p-8 text-center', 'Attrs': ui_attrs(['data-testid', 'quote-rating'])}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/quote-slot.html.twig b/packages/twig/ui/blocks/quote-slot.html.twig
new file mode 100644
index 0000000..0b5831d
--- /dev/null
+++ b/packages/twig/ui/blocks/quote-slot.html.twig
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-slot.json
+    One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in a box that can span grid rows.
+    Props (p): q, labels, kind, layout, className. -#}
+{%- set v_q = (p.q ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_kind = (p.kind ?? 'card') -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set c_1 -%}
+  {{ include('blocks/quote-card.html.twig', {'p': {'q': v_q, 'labels': v_labels, 'item': {'kind': v_kind, 'avatar': 'image', 'rating': 'show', 'mark': 'none'}, 'layout': v_layout}}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((p.className ?? '')), 'Attrs': ui_attrs(['data-testid', 'quote'])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/quote-split.html.twig b/packages/twig/ui/blocks/quote-split.html.twig
new file mode 100644
index 0000000..446ccd4
--- /dev/null
+++ b/packages/twig/ui/blocks/quote-split.html.twig
@@ -0,0 +1,73 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/quote-split.json
+    Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture, logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured quote beside a stack), mediaSide, tone.
+    Props (p): id, title, lead, badge, quotes, labels, extras, actions, layout, mediaSide, tone, empty, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_quotes = (p.quotes ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_extras = (p.extras ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_layout = (p.layout ?? 'media') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_eq(ui_len(v_quotes), 0)) %}
+  {%- set c_1 -%}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'quote', 'title': v_empty}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}, with_context = false) }}
+{%- elseif ui_t(ui_or([ui_eq(v_layout, 'compact'), ui_eq(v_layout, 'bento')])) %}
+  {%- set c_3 -%}
+    {%- if ui_t(ui_eq(v_layout, 'bento')) %}
+      {{ include('blocks/quote-figures.html.twig', {'p': {'extras': v_extras}}, with_context = false) }}
+    {%- endif %}
+    {%- set c_2 -%}
+      {%- for v_q in ui_l(v_quotes) %}
+        {%- set v_i = loop.index0 -%}
+        {{ include('blocks/quote-slot.html.twig', {'p': {'q': v_q, 'labels': v_labels, 'layout': (ui_t(ui_and([ui_eq(v_layout, 'bento'), ui_eq(v_i, 0)])) ? 'single' : 'grid'), 'className': ui_cnv([(ui_t(ui_and([ui_eq(v_layout, 'bento'), ui_eq(v_i, 0)])) ? 'lg:row-span-3' : '')])}}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'bento')) ? 'grid grid-cols-1 gap-4 lg:grid-cols-2' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'))}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_3}, with_context = false) }}
+{%- else %}
+  {%- set f_5 -%}
+    {%- if ui_t(ui_eq(v_layout, 'rating')) %}
+      {{ include('blocks/quote-rating-panel.html.twig', {'p': {'extras': v_extras, 'labels': v_labels}}, with_context = false) }}
+    {%- else %}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {%- set c_6 -%}
+    {%- if ui_t(ui_or([ui_eq(v_layout, 'media'), ui_eq(v_layout, 'logos'), ui_eq(v_layout, 'rating')])) %}
+      {%- for v_q in ui_l(v_quotes) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_lt(v_i, 1)) %}
+          {{ include('blocks/quote-slot.html.twig', {'p': {'q': v_q, 'labels': v_labels, 'kind': (ui_t(ui_eq(v_layout, 'media')) ? 'card' : 'plain'), 'layout': 'single', 'className': ui_cnv([''])}}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_layout, 'logos')) %}
+      {{ include('blocks/quote-logo-tiles.html.twig', {'p': {'extras': v_extras}}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_layout, 'stack')) %}
+      {%- set c_4 -%}
+        {%- for v_q in ui_l(v_quotes) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_lt(v_i, 3)) %}
+            {{ include('blocks/quote-slot.html.twig', {'p': {'q': v_q, 'labels': v_labels, 'layout': 'stack', 'className': ui_cnv([''])}}, with_context = false) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_4}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_or([ui_eq(v_layout, 'media'), ui_eq(v_layout, 'logos'), ui_eq(v_layout, 'rating')])) %}
+      {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'landmarkLabel': v_landmarkLabel, 'aside': f_5}, 'children': c_6}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/range-field.html.twig b/packages/twig/ui/blocks/range-field.html.twig
new file mode 100644
index 0000000..ace1903
--- /dev/null
+++ b/packages/twig/ui/blocks/range-field.html.twig
@@ -0,0 +1,27 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/range-field.json
+    A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.
+    Props (p): type, from, to, fromLabel, toLabel, min, max, className. -#}
+{%- set v_type = (p.type ?? null) -%}
+{%- set v_from = (p.from ?? null) -%}
+{%- set v_to = (p.to ?? null) -%}
+{%- set v_fromLabel = (p.fromLabel ?? null) -%}
+{%- set v_toLabel = (p.toLabel ?? null) -%}
+{%- set v_min = (p.min ?? null) -%}
+{%- set v_max = (p.max ?? null) -%}
+{%- set c_3 -%}
+  {%- if ui_t(ui_and([ui_eq(v_type, 'number'), ui_has(v_min), ui_has(v_max), ui_lt(v_min, v_max)])) %}
+    {{ include('ui/range/range.html.twig', {'p': {'Min': ui_i(v_min), 'Max': ui_i(v_max), 'AriaLabel': ui_s(v_fromLabel), 'Value': ui_s((ui_t(ui_eq(v_from, '')) ? ui_str(v_min) : v_from)), 'Attrs': ui_attrs(['data-testid', 'range-from'])}}, with_context = false) }}
+    {{ include('ui/range/range.html.twig', {'p': {'Min': ui_i(v_min), 'Max': ui_i(v_max), 'AriaLabel': ui_s(v_toLabel), 'Value': ui_s((ui_t(ui_eq(v_to, '')) ? ui_str(v_max) : v_to)), 'Attrs': ui_attrs(['data-testid', 'range-to'])}}, with_context = false) }}
+  {%- endif %}
+  {%- set c_2 -%}
+    {{ include('ui/input/input.html.twig', {'p': {'Type': ui_s(v_type), 'Size': 'sm', 'AriaLabel': ui_s(v_fromLabel), 'Value': ui_s(v_from), 'Min': ui_s(ui_str(v_min)), 'Max': ui_s(ui_str(v_max))}}, with_context = false) }}
+    {%- set c_1 -%}
+      {{ ui_text('–') }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-muted-foreground'}, 'children': c_1}, with_context = false) }}
+    {{ include('ui/input/input.html.twig', {'p': {'Type': ui_s(v_type), 'Size': 'sm', 'AriaLabel': ui_s(v_toLabel), 'Value': ui_s(v_to), 'Min': ui_s(ui_str(v_min)), 'Max': ui_s(ui_str(v_max))}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_2}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-2', (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'range-field'])}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/rating.html.twig b/packages/twig/ui/blocks/rating.html.twig
new file mode 100644
index 0000000..ca5def5
--- /dev/null
+++ b/packages/twig/ui/blocks/rating.html.twig
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/rating.json
+    One to five stars (a review's grade, the average of a product). The value is read as the label; the stars themselves are decoration.
+    Props (p): value, label, max, size, className. -#}
+{%- set v_value = (p.value ?? null) -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_max = (p.max ?? 5) -%}
+{%- set v_size = (p.size ?? 16) -%}
+{%- set v_full = ui_round(ui_min([v_max, ui_max([0, v_value])])) -%}
+{%- set c_1 -%}
+  {%- for v_i in ui_l(ui_range(v_max)) %}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'star', 'Size': ui_i(v_size), 'Class': ui_s((ui_t(ui_lt(v_i, v_full)) ? 'fill-foreground text-foreground' : 'text-border'))}}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['inline-flex items-center gap-0', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'img', 'aria-label', v_label, 'data-slot', 'rating', 'data-value', v_full])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/recipes/avatar.variants.json b/packages/twig/ui/blocks/recipes/avatar.variants.json
new file mode 100644
index 0000000..54d4895
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/avatar.variants.json
@@ -0,0 +1,22 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.avatar",
+  "base": "relative inline-flex shrink-0 overflow-hidden bg-muted rounded-full",
+  "byKey": {
+    "size": {
+      "xs": "size-6",
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12",
+      "xl": "size-16"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/packages/twig/ui/blocks/recipes/badge-square.variants.json b/packages/twig/ui/blocks/recipes/badge-square.variants.json
new file mode 100644
index 0000000..b8b52c5
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/badge-square.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.badge-square",
+  "base": "inline-flex shrink-0 items-center justify-center bg-card text-xs font-medium whitespace-nowrap text-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-4 min-w-4 px-1",
+      "default": "h-5 px-2"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/packages/twig/ui/blocks/recipes/file-tree-item.variants.json b/packages/twig/ui/blocks/recipes/file-tree-item.variants.json
new file mode 100644
index 0000000..489ce86
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/file-tree-item.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.file-tree-item",
+  "base": "flex h-6 w-full items-center gap-4 text-xs font-bold text-muted-foreground data-[state=selected]:bg-muted",
+  "byKey": {
+    "kind": {
+      "folder": "",
+      "file": "px-8"
+    }
+  },
+  "defaults": {
+    "kind": "file"
+  },
+  "keys": [
+    "kind"
+  ]
+}
diff --git a/packages/twig/ui/blocks/recipes/icon-tab.variants.json b/packages/twig/ui/blocks/recipes/icon-tab.variants.json
new file mode 100644
index 0000000..f4b0990
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/icon-tab.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.icon-tab",
+  "base": "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground inset-ring inset-ring-transparent [&>svg]:size-4 rounded",
+  "byKey": {
+    "state": {
+      "default": "",
+      "active": "bg-card text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "state": "default"
+  },
+  "keys": [
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/twig/ui/blocks/recipes/logo-sidebar.variants.json b/packages/twig/ui/blocks/recipes/logo-sidebar.variants.json
new file mode 100644
index 0000000..8759a84
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/logo-sidebar.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.logo-sidebar",
+  "base": "flex h-8 items-center justify-between",
+  "byKey": {
+    "variant": {
+      "chat": "px-2",
+      "creator": "pr-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/packages/twig/ui/blocks/recipes/media-frame.variants.json b/packages/twig/ui/blocks/recipes/media-frame.variants.json
new file mode 100644
index 0000000..2d0b526
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/media-frame.variants.json
@@ -0,0 +1,22 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.media-frame",
+  "base": "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "ratio": {
+      "16/9": "aspect-video",
+      "4/3": "aspect-4/3",
+      "1/1": "aspect-square",
+      "3/4": "aspect-3/4",
+      "21/9": "aspect-21/9"
+    }
+  },
+  "defaults": {
+    "ratio": "16/9"
+  },
+  "keys": [
+    "ratio"
+  ],
+  "compound": []
+}
diff --git a/packages/twig/ui/blocks/recipes/nav-item-content.variants.json b/packages/twig/ui/blocks/recipes/nav-item-content.variants.json
new file mode 100644
index 0000000..9d4e03a
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/nav-item-content.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item-content",
+  "base": "flex h-8 min-w-0 flex-1 items-center justify-between px-4 py-2 text-xs font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "px-2",
+      "4": "px-2"
+    },
+    "state": {
+      "default": "",
+      "selected": "bg-background text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/twig/ui/blocks/recipes/nav-item.variants.json b/packages/twig/ui/blocks/recipes/nav-item.variants.json
new file mode 100644
index 0000000..c8eba12
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/nav-item.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item",
+  "base": "flex w-full items-center p-2 rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "pr-2 pl-12",
+      "4": "pr-2 pl-20"
+    },
+    "state": {
+      "default": "",
+      "selected": ""
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/packages/twig/ui/blocks/recipes/section-column.variants.json b/packages/twig/ui/blocks/recipes/section-column.variants.json
new file mode 100644
index 0000000..b5637fc
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/section-column.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-column",
+  "base": "",
+  "defaults": {
+    "measure": "default"
+  },
+  "keys": [
+    "measure"
+  ],
+  "compound": [],
+  "byKey": {
+    "measure": {
+      "default": "",
+      "landing": "",
+      "fill": "",
+      "xs": "mx-auto w-full max-w-xs",
+      "sm": "mx-auto w-full max-w-sm",
+      "md": "mx-auto w-full max-w-md",
+      "lg": "mx-auto w-full max-w-lg",
+      "xl": "mx-auto w-full max-w-xl",
+      "2xl": "mx-auto w-full max-w-2xl",
+      "3xl": "mx-auto w-full max-w-3xl"
+    }
+  }
+}
diff --git a/packages/twig/ui/blocks/recipes/section-frame.variants.json b/packages/twig/ui/blocks/recipes/section-frame.variants.json
new file mode 100644
index 0000000..d141c90
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/section-frame.variants.json
@@ -0,0 +1,34 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-frame",
+  "base": "w-full",
+  "byKey": {
+    "tone": {
+      "default": "",
+      "muted": "bg-muted",
+      "inverse": "bg-foreground text-background [&_.text-muted-foreground]:text-background/70"
+    },
+    "density": {
+      "roomy": "py-16",
+      "default": "py-10",
+      "compact": "py-6",
+      "flush": "py-0"
+    },
+    "align": {
+      "start": "",
+      "center": "text-center"
+    }
+  },
+  "defaults": {
+    "tone": "default",
+    "density": "default",
+    "align": "start"
+  },
+  "keys": [
+    "tone",
+    "density",
+    "align"
+  ],
+  "compound": []
+}
diff --git a/packages/twig/ui/blocks/recipes/section-head.variants.json b/packages/twig/ui/blocks/recipes/section-head.variants.json
new file mode 100644
index 0000000..ff1cc80
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/section-head.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.section-head",
+  "base": "flex items-center justify-between pr-4 pl-4",
+  "byKey": {
+    "size": {
+      "default": "h-8 py-2 text-xs font-semibold",
+      "lg": "h-12 py-2 text-sm font-bold"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ]
+}
diff --git a/packages/twig/ui/blocks/recipes/sidebar-panel.variants.json b/packages/twig/ui/blocks/recipes/sidebar-panel.variants.json
new file mode 100644
index 0000000..5a7bb9c
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/sidebar-panel.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.sidebar-panel",
+  "base": "flex shrink-0 flex-col",
+  "byKey": {
+    "variant": {
+      "chat": "w-68 gap-2 pt-6 pr-4 pb-6 pl-4",
+      "creator": "w-62 justify-between gap-4 p-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/packages/twig/ui/blocks/recipes/switcher-item.variants.json b/packages/twig/ui/blocks/recipes/switcher-item.variants.json
new file mode 100644
index 0000000..58d88d5
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/switcher-item.variants.json
@@ -0,0 +1,48 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher-item",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-6 gap-1 px-3 text-xs",
+      "default": "h-8 gap-2 px-4 text-sm",
+      "lg": "h-10 gap-2 px-5 text-sm"
+    },
+    "state": {
+      "default": "",
+      "active": "bg-background text-foreground inset-ring-border"
+    },
+    "layout": {
+      "text": "",
+      "icon": "[&>svg]:size-4"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "state": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "state",
+    "layout"
+  ],
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "w-6 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "w-8 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "w-10 px-0"
+    }
+  ]
+}
diff --git a/packages/twig/ui/blocks/recipes/switcher.variants.json b/packages/twig/ui/blocks/recipes/switcher.variants.json
new file mode 100644
index 0000000..d0ef662
--- /dev/null
+++ b/packages/twig/ui/blocks/recipes/switcher.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher",
+  "base": "inline-flex max-w-full items-center gap-1 overflow-x-auto bg-muted inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-8 p-1",
+      "default": "h-10 p-1",
+      "lg": "h-12 p-1"
+    },
+    "layout": {
+      "text": "",
+      "icon": "gap-0"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "layout"
+  ],
+  "compound": []
+}
diff --git a/packages/twig/ui/blocks/region.html.twig b/packages/twig/ui/blocks/region.html.twig
new file mode 100644
index 0000000..0fbcff9
--- /dev/null
+++ b/packages/twig/ui/blocks/region.html.twig
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/region.json
+    A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never nested, so a nested landmark is its own component.
+    Props (p): tag, landmarkLabel, className; children: markup. -#}
+{%- set v_tag = (p.tag ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': ui_s(v_tag), 'Class': ui_s((p.className ?? '')), 'Attrs': ui_attrs(['aria-label', v_landmarkLabel])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/review-list.html.twig b/packages/twig/ui/blocks/review-list.html.twig
new file mode 100644
index 0000000..83cc57e
--- /dev/null
+++ b/packages/twig/ui/blocks/review-list.html.twig
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/review-list.json
+    Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid), columns, item (card, plain), avatar (none, image), tone, density.
+    Props (p): id, title, reviews, labels, layout, item, avatar, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_reviews = (p.reviews ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'list') -%}
+{%- set v_item = (p.item ?? 'card') -%}
+{%- set v_avatar = (p.avatar ?? 'none') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_9 -%}
+  {%- if ui_t(ui_eq(ui_len(v_reviews), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'message-square-quote', 'title': ui_get(v_labels, ['empty'])}}, with_context = false) }}
+  {%- endif %}
+  {%- set c_8 -%}
+    {%- for v_r in ui_l(v_reviews) %}
+      {%- set c_7 -%}
+        {{ include('blocks/rating.html.twig', {'p': {'value': ui_get(v_r, ['rating']), 'label': ui_tpl(ui_get(v_labels, ['ratingLabel']), [ui_get(v_r, ['rating'])])}}, with_context = false) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_r, ['title'])) }}
+        {%- endset -%}
+        {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_r, ['text'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+        {%- set c_6 -%}
+          {%- if ui_t(ui_eq(v_avatar, 'image')) %}
+            {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_r, ['author']), 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}, with_context = false) }}
+          {%- endif %}
+          {%- set c_5 -%}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_r, ['author'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_3}, with_context = false) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_r, ['date'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'mt-auto'}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('blocks/article-block.html.twig', {'p': {'className': ui_cnv([ui_cnv(['flex h-full flex-col gap-4', (ui_t(ui_eq(v_item, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : 'border-b border-border pb-4')])]), 'testid': 'item'}, 'children': c_7}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'grid')) ? '1-3' : '1')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_8}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'measure': (ui_t(ui_eq(v_layout, 'list')) ? '2xl' : 'default'), 'landmarkLabel': v_landmarkLabel}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/search-field.html.twig b/packages/twig/ui/blocks/search-field.html.twig
new file mode 100644
index 0000000..25ec268
--- /dev/null
+++ b/packages/twig/ui/blocks/search-field.html.twig
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/search-field.json
+    A search input with a magnifier. `value` fires on every keystroke with the new text.
+    Props (p): value, placeholder, label, className. -#}
+{%- set v_value = (p.value ?? null) -%}
+{%- set v_placeholder = (p.placeholder ?? null) -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set c_1 -%}
+  {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'search', 'Size': 16, 'Class': 'pointer-events-none absolute top-2 left-3 text-muted-foreground'}}, with_context = false) }}
+  {{ include('ui/input/input.html.twig', {'p': {'Size': 'sm', 'Type': 'search', 'Placeholder': ui_s(v_placeholder), 'AriaLabel': ui_s(v_label), 'Class': 'pr-3 pl-10', 'Value': ui_s(v_value)}}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['relative min-w-44 flex-1', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'search'])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/search-palette.html.twig b/packages/twig/ui/blocks/search-palette.html.twig
new file mode 100644
index 0000000..c15d867
--- /dev/null
+++ b/packages/twig/ui/blocks/search-palette.html.twig
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/search-palette.json
+    A search field with a search glyph and the keys that open it.
+    Props (p): label, shortcut. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_shortcut = (p.shortcut ?? null) -%}
+{%- set c_2 -%}
+  {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'search', 'Size': 16, 'Class': 'pointer-events-none absolute top-2 left-3 text-muted-foreground'}}, with_context = false) }}
+  {{ include('ui/input/input.html.twig', {'p': {'Type': 'search', 'Size': 'sm', 'Placeholder': ui_s(v_label), 'AriaLabel': ui_s(v_label), 'Class': 'pr-12 pl-10'}}, with_context = false) }}
+  {%- set c_1 -%}
+    {{ ui_text(v_shortcut) }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring inset-ring-border'}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'relative w-full max-w-sm', 'Attrs': ui_attrs(['data-testid', 'palette'])}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/section-box.html.twig b/packages/twig/ui/blocks/section-box.html.twig
new file mode 100644
index 0000000..82d9fe3
--- /dev/null
+++ b/packages/twig/ui/blocks/section-box.html.twig
@@ -0,0 +1,13 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-box.json
+    The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper).
+    Props (p): boxed; children: markup. -#}
+{%- set v_boxed = (p.boxed ?? false) -%}
+{%- if ui_t(v_boxed) %}
+  {%- set c_1 -%}
+    {{ (children ?? '')|raw }}
+  {%- endset -%}
+  {{ include('ui/card/card.html.twig', {'p': {'Variant': 'muted'}, 'children': c_1}, with_context = false) }}
+{%- else %}
+  {{ (children ?? '')|raw }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/section-column.html.twig b/packages/twig/ui/blocks/section-column.html.twig
new file mode 100644
index 0000000..f5e7927
--- /dev/null
+++ b/packages/twig/ui/blocks/section-column.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-column.json
+    The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure (xs to 3xl) holds the column at that width, centred.
+    Props (p): measure; children: markup. -#}
+{%- set v_measure = (p.measure ?? 'default') -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch', 'Class': ui_s(ui_recipe('blocks/recipes/section-column.variants.json', {'measure': v_measure}))}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/section-frame.html.twig b/packages/twig/ui/blocks/section-frame.html.twig
new file mode 100644
index 0000000..950de59
--- /dev/null
+++ b/packages/twig/ui/blocks/section-frame.html.twig
@@ -0,0 +1,63 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-frame.json
+    A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts the body in a card. Axes: layout, media side, tone, density, align.
+    Props (p): id, title, lead, heading, action, layout, media, boxed, tone, density, align, measure, landmarkLabel, className, aside (slot); children: markup. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? '') -%}
+{%- set v_lead = (p.lead ?? null) -%}
+{%- set v_heading = (p.heading ?? null) -%}
+{%- set v_action = (p.action ?? null) -%}
+{%- set v_layout = (p.layout ?? 'stack') -%}
+{%- set v_media = (p.media ?? null) -%}
+{%- set v_boxed = (p.boxed ?? false) -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_align = (p.align ?? 'start') -%}
+{%- set v_measure = (p.measure ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_titleId = ui_add(v_id, '-title') -%}
+{%- set v_sectionTone = (ui_t(v_boxed) ? 'default' : v_tone) -%}
+{%- set v_center = ui_eq(v_align, 'center') -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- set c_7 -%}
+      {%- if ui_t(ui_eq(v_layout, 'split')) %}
+        {%- set c_4 -%}
+          {%- if ui_t(ui_and([ui_get(v_media, ['show']), ui_eq(ui_get(v_media, ['side']), 'start')])) %}
+            {%- set c_1 -%}
+              {{ (p.aside ?? '')|raw }}
+            {%- endset -%}
+            {{ include('ui/box/box.html.twig', {'p': {'Class': 'w-full', 'Attrs': ui_attrs(['data-slot', 'media'])}, 'children': c_1}, with_context = false) }}
+          {%- endif %}
+          {%- set c_2 -%}
+            {{ include('blocks/section-header.html.twig', {'p': {'titleId': v_titleId, 'title': v_title, 'heading': v_heading, 'action': v_action, 'lead': v_lead, 'center': v_center}}, with_context = false) }}
+            {{ (children ?? '')|raw }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch'}, 'children': c_2}, with_context = false) }}
+          {%- if ui_t(ui_and([ui_get(v_media, ['show']), not (ui_eq(ui_get(v_media, ['side']), 'start'))])) %}
+            {%- set c_3 -%}
+              {{ (p.aside ?? '')|raw }}
+            {%- endset -%}
+            {{ include('ui/box/box.html.twig', {'p': {'Class': 'w-full', 'Attrs': ui_attrs(['data-slot', 'media'])}, 'children': c_3}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-2', 'Class': ui_s(ui_cnv(['gap-8', (ui_t(ui_eq(ui_get(v_media, ['align']), 'start')) ? 'items-start' : 'items-center')]))}, 'children': c_4}, with_context = false) }}
+      {%- else %}
+        {%- set c_6 -%}
+          {{ include('blocks/section-header.html.twig', {'p': {'titleId': v_titleId, 'title': v_title, 'heading': v_heading, 'action': v_action, 'lead': v_lead, 'center': v_center}}, with_context = false) }}
+          {{ (children ?? '')|raw }}
+          {%- if ui_t(ui_get(v_media, ['show'])) %}
+            {%- set c_5 -%}
+              {{ (p.aside ?? '')|raw }}
+            {%- endset -%}
+            {{ include('ui/box/box.html.twig', {'p': {'Class': 'w-full', 'Attrs': ui_attrs(['data-slot', 'media'])}, 'children': c_5}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('blocks/section-column.html.twig', {'p': {'measure': v_measure}, 'children': c_6}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('blocks/section-box.html.twig', {'p': {'boxed': v_boxed}, 'children': c_7}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_measure, 'landing')) ? ui_cnv(['mx-auto w-full px-4', ui_preset('blocks/presets/defaults.json', ['section', 'landing'])]) : (ui_t(ui_eq(v_measure, 'fill')) ? 'w-full' : 'mx-auto w-full max-w-6xl px-4'))), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_8}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/section-frame.variants.json', {'tone': v_sectionTone, 'density': v_density, 'align': v_align}), (p.className ?? '')])), 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : (ui_t(not (ui_eq(v_title, ''))) ? v_titleId : null)), 'aria-label', ui_coalesce([v_landmarkLabel, (ui_t(ui_eq(v_title, '')) ? v_id : null)]), 'data-testid', 'section', 'data-tone', v_tone, 'data-density', v_density])}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/section-head.html.twig b/packages/twig/ui/blocks/section-head.html.twig
new file mode 100644
index 0000000..95692dc
--- /dev/null
+++ b/packages/twig/ui/blocks/section-head.html.twig
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-head.json
+    A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button (aria-expanded, the toggle event).
+    Props (p): size, expanded, controls, className, right (slot); children: markup. -#}
+{%- set v_size = (p.size ?? 'default') -%}
+{%- set v_expanded = (p.expanded ?? null) -%}
+{%- set v_controls = (p.controls ?? null) -%}
+{%- set v_cls = ui_cnv([ui_recipe('blocks/recipes/section-head.variants.json', {'size': v_size}), 'rounded text-foreground in-data-[nav=collapsed]:hidden', (p.className ?? '')]) -%}
+{%- if ui_t(ui_has(v_expanded)) %}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ (children ?? '')|raw }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Attrs': ui_attrs(['data-slot', 'section-head-title'])}, 'children': c_1}, with_context = false) }}
+    {%- if ui_t(((p.right ?? null) is not null)) %}
+      {%- set c_2 -%}
+        {{ (p.right ?? '')|raw }}
+      {%- endset -%}
+      {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex items-center gap-2', 'Attrs': ui_attrs(['data-slot', 'section-head-right'])}, 'children': c_2}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/button-plain/button-plain.html.twig', {'p': {'Type': 'button', 'Class': ui_s(ui_cnv([v_cls, 'w-full text-left'])), 'Attrs': ui_attrs(['aria-expanded', v_expanded, 'aria-controls', v_controls, 'data-slot', 'section-head', 'data-expanded', v_expanded])}, 'children': c_3}, with_context = false) }}
+{%- else %}
+  {%- set c_6 -%}
+    {%- set c_4 -%}
+      {{ (children ?? '')|raw }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Attrs': ui_attrs(['data-slot', 'section-head-title'])}, 'children': c_4}, with_context = false) }}
+    {%- if ui_t(((p.right ?? null) is not null)) %}
+      {%- set c_5 -%}
+        {{ (p.right ?? '')|raw }}
+      {%- endset -%}
+      {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex items-center gap-2', 'Attrs': ui_attrs(['data-slot', 'section-head-right'])}, 'children': c_5}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(v_cls), 'Attrs': ui_attrs(['data-slot', 'section-head'])}, 'children': c_6}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/section-header.html.twig b/packages/twig/ui/blocks/section-header.html.twig
new file mode 100644
index 0000000..2e7173e
--- /dev/null
+++ b/packages/twig/ui/blocks/section-header.html.twig
@@ -0,0 +1,53 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/section-header.json
+    The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an optional lead. No wrapper: its parts are children of the section stack.
+    Props (p): titleId, title, heading, action, lead, center. -#}
+{%- set v_titleId = (p.titleId ?? null) -%}
+{%- set v_title = (p.title ?? '') -%}
+{%- set v_heading = (p.heading ?? null) -%}
+{%- set v_action = (p.action ?? null) -%}
+{%- set v_lead = (p.lead ?? null) -%}
+{%- set v_center = (p.center ?? false) -%}
+{%- set v_level = ui_coalesce([ui_get(v_heading, ['level']), 2]) -%}
+{%- set v_scale = ui_coalesce([ui_get(v_heading, ['scale']), 'default']) -%}
+{%- set v_hasAction = ui_and([ui_get(v_action, ['label']), ui_get(v_action, ['href'])]) -%}
+{%- if ui_t(ui_get(v_heading, ['badge'])) %}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_heading, ['badge'])) }}
+  {%- endset -%}
+  {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'outline', 'Size': 'lg', 'Class': ui_s((ui_t(v_center) ? 'mx-auto w-fit' : 'w-fit')), 'Attrs': ui_attrs(['data-testid', 'section-badge'])}, 'children': c_1}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([not (ui_eq(v_title, '')), v_hasAction])) %}
+  {%- set c_4 -%}
+    {%- set c_2 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(v_level), 'Size': ui_s((ui_t(ui_eq(v_level, 1)) ? '5xl' : 'xl')), 'Weight': 'semibold', 'Class': ui_s((ui_t(ui_eq(v_scale, 'display')) ? 'text-6xl tracking-tight md:text-8xl' : (ui_t(ui_eq(v_level, 1)) ? 'leading-tight' : 'leading-7'))), 'Attrs': ui_attrs(['id', v_titleId])}, 'children': c_2}, with_context = false) }}
+    {%- set c_3 -%}
+      {{ ui_text(ui_get(v_action, ['label'])) }}
+    {%- endset -%}
+    {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_get(v_action, ['href'])), 'Variant': 'default', 'Class': ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'tiny']), 'shrink-0 font-medium leading-5'])), 'Attrs': ui_attrs(['data-testid', 'section-action'])}, 'children': c_3}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'w-full flex-wrap'}, 'children': c_4}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([not (ui_eq(v_title, '')), not (ui_t(v_hasAction))])) %}
+  {%- set c_5 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(v_level), 'Size': ui_s((ui_t(ui_eq(v_level, 1)) ? '5xl' : 'xl')), 'Weight': 'semibold', 'Class': ui_s((ui_t(ui_eq(v_scale, 'display')) ? 'text-6xl tracking-tight md:text-8xl' : (ui_t(ui_eq(v_level, 1)) ? 'leading-tight' : 'leading-7'))), 'Attrs': ui_attrs(['id', v_titleId])}, 'children': c_5}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(ui_and([ui_eq(v_title, ''), v_hasAction])) %}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {{ ui_text(ui_get(v_action, ['label'])) }}
+    {%- endset -%}
+    {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_get(v_action, ['href'])), 'Variant': 'default', 'Class': ui_s(ui_cnv([ui_preset('blocks/presets/defaults.json', ['text', 'tiny']), 'shrink-0 font-medium leading-5'])), 'Attrs': ui_attrs(['data-testid', 'section-action'])}, 'children': c_6}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'end', 'Class': 'w-full'}, 'children': c_7}, with_context = false) }}
+{%- endif %}
+{%- if ui_t(v_lead) %}
+  {%- set c_8 -%}
+    {{ ui_text(v_lead) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Class': ui_s(ui_cnv(['max-w-2xl text-muted-foreground', (ui_t(v_center) ? 'mx-auto' : '')]))}, 'children': c_8}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/shell-content.html.twig b/packages/twig/ui/blocks/shell-content.html.twig
new file mode 100644
index 0000000..596da3a
--- /dev/null
+++ b/packages/twig/ui/blocks/shell-content.html.twig
@@ -0,0 +1,89 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-content.json
+    The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one), list (a toolbar over a card of rows). The cards are hidden from assistive technology.
+    Props (p): title, titleId, level, content. -#}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_titleId = (p.titleId ?? null) -%}
+{%- set v_level = (p.level ?? 2) -%}
+{%- set v_content = (p.content ?? 'grid') -%}
+{%- set c_16 -%}
+  {%- set c_2 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(v_level), 'Size': '2xl', 'Weight': 'semibold', 'Attrs': ui_attrs(['id', v_titleId])}, 'children': c_1}, with_context = false) }}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'h-10 w-32 rounded bg-muted', 'Attrs': ui_attrs(['aria-hidden', 'true'])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_2}, with_context = false) }}
+  {%- set c_15 -%}
+    {%- if ui_t(ui_eq(v_content, 'grid')) %}
+      {%- set c_7 -%}
+        {%- set c_3 -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}, with_context = false) }}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_3}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}, with_context = false) }}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_4}, with_context = false) }}
+        {%- set c_5 -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}, with_context = false) }}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_5}, with_context = false) }}
+        {%- set c_6 -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}, with_context = false) }}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-4 lg:grid-cols-4'}, 'children': c_7}, with_context = false) }}
+      {%- set c_8 -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'min-h-64 flex-1'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_8}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_content, 'split')) %}
+      {%- set c_11 -%}
+        {%- set c_9 -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}, with_context = false) }}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-64 lg:col-span-2'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_9}, with_context = false) }}
+        {%- set c_10 -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}, with_context = false) }}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-64'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_10}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 gap-4 lg:grid-cols-3'}, 'children': c_11}, with_context = false) }}
+      {%- set c_12 -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-4 w-1/3']))}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'flex-1']))}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'min-h-40 flex-1'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_12}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_content, 'list')) %}
+      {%- set c_13 -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-10 w-64']))}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-10 w-24']))}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'ml-auto h-10 w-32']))}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_13}, with_context = false) }}
+      {%- set c_14 -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}, with_context = false) }}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['rounded bg-muted', 'h-8']))}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'flex-1'])), 'Attrs': ui_attrs(['data-testid', 'panel'])}, 'children': c_14}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex flex-1 flex-col gap-4', 'Attrs': ui_attrs(['aria-hidden', 'true', 'data-testid', 'panels'])}, 'children': c_15}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch', 'Class': 'flex-1 p-6', 'Attrs': ui_attrs(['data-testid', 'content'])}, 'children': c_16}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/shell-footer.html.twig b/packages/twig/ui/blocks/shell-footer.html.twig
new file mode 100644
index 0000000..66eb442
--- /dev/null
+++ b/packages/twig/ui/blocks/shell-footer.html.twig
@@ -0,0 +1,31 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-footer.json
+    The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the whole shell (full).
+    Props (p): nav, place, landmarkLabel. -#}
+{%- set v_nav = (p.nav ?? null) -%}
+{%- set v_place = (p.place ?? 'full') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_6 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_nav, ['copyright'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_1}, with_context = false) }}
+  {%- if ui_t(ui_gt(ui_len(ui_get(v_nav, ['footer'])), 0)) %}
+    {%- set c_5 -%}
+      {%- set c_4 -%}
+        {%- for v_f in ui_l(ui_get(v_nav, ['footer'])) %}
+          {%- set c_3 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_f, ['name'])) }}
+            {%- endset -%}
+            {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_f, ['href']), 'className': ui_cnv(['text-xs text-muted-foreground']), 'variant': 'muted', 'size': 'sm'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_3}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none items-center gap-4 p-0'}, 'children': c_4}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_nav, ['footerLabel']), v_landmarkLabel])) : ui_get(v_nav, ['footerLabel']))}, 'children': c_5}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'footer', 'Class': ui_s(ui_cnv(['flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4', (ui_t(ui_eq(v_place, 'full')) ? 'bg-card' : '')])), 'Attrs': ui_attrs(['data-testid', 'footer', 'data-place', v_place, 'aria-label', v_landmarkLabel])}, 'children': c_6}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/shell-sidebar.html.twig b/packages/twig/ui/blocks/shell-sidebar.html.twig
new file mode 100644
index 0000000..3ebb15d
--- /dev/null
+++ b/packages/twig/ui/blocks/shell-sidebar.html.twig
@@ -0,0 +1,81 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-sidebar.json
+    The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read), collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a panel of the current section's links). side puts it at the start or the end.
+    Props (p): nav, mode, side, brand, landmarkLabel. -#}
+{%- set v_nav = (p.nav ?? null) -%}
+{%- set v_mode = (p.mode ?? 'wide') -%}
+{%- set v_side = (p.side ?? 'start') -%}
+{%- set v_brand = (p.brand ?? 'show') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set v_named = ui_eq(v_mode, 'wide') -%}
+{%- set c_17 -%}
+  {%- set c_9 -%}
+    {%- if ui_t(ui_eq(v_brand, 'show')) %}
+      {%- set c_2 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'layers', 'Size': 24}}, with_context = false) }}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_nav, ['brand'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'bold', 'Class': ui_s((ui_t(v_named) ? '' : 'sr-only'))}, 'children': c_1}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'shrink-0', 'Attrs': ui_attrs(['data-testid', 'brand'])}, 'children': c_2}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_gt(ui_len(ui_get(v_nav, ['links'])), 0)) %}
+      {%- set c_7 -%}
+        {%- set c_6 -%}
+          {%- for v_l in ui_l(ui_get(v_nav, ['links'])) %}
+            {%- set c_5 -%}
+              {%- set c_4 -%}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 16}}, with_context = false) }}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_get(v_l, ['name'])) }}
+                {%- endset -%}
+                {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s((ui_t(v_named) ? '' : 'sr-only'))}, 'children': c_3}, with_context = false) }}
+              {%- endset -%}
+              {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv([ui_cnv(['flex items-center gap-4 rounded py-2 text-sm', (ui_t(v_named) ? 'px-4' : 'justify-center px-2'), (ui_t(ui_eq(ui_get(v_l, ['id']), ui_get(v_nav, ['current']))) ? 'bg-muted font-medium' : '')])]), 'current': ui_eq(ui_get(v_l, ['id']), ui_get(v_nav, ['current'])), 'size': 'sm', 'testid': 'item'}, 'children': c_4}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_5}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_nav, ['label']), v_landmarkLabel])) : ui_get(v_nav, ['label'])), 'className': ui_cnv(['flex-1'])}, 'children': c_7}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_mode, 'collapsed')) %}
+      {%- set c_8 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'panel-left', 'Size': 20}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/button-plain/button-plain.html.twig', {'p': {'Type': 'button', 'Class': 'inline-flex size-10 items-center justify-center rounded text-muted-foreground', 'Attrs': ui_attrs(['aria-label', ui_get(v_nav, ['expand']), 'aria-expanded', (ui_t(ui_eq(v_mode, 'wide')) ? 'true' : 'false'), 'data-testid', 'toggle'])}, 'children': c_8}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-6 py-4', (ui_t(v_named) ? 'w-64 px-4' : 'w-16 items-center px-2')]))}, 'children': c_9}, with_context = false) }}
+  {%- if ui_t(ui_and([ui_eq(v_mode, 'twolevel'), ui_gt(ui_len(ui_get(v_nav, ['sub'])), 0)])) %}
+    {%- set c_16 -%}
+      {%- set c_10 -%}
+        {{ ui_text(ui_get(v_nav, ['subTitle'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'px-4'}, 'children': c_10}, with_context = false) }}
+      {%- set c_15 -%}
+        {%- set c_14 -%}
+          {%- for v_s in ui_l(ui_get(v_nav, ['sub'])) %}
+            {%- set c_13 -%}
+              {%- set c_12 -%}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_s, ['icon'])), 'Size': 16}}, with_context = false) }}
+                {%- set c_11 -%}
+                  {{ ui_text(ui_get(v_s, ['name'])) }}
+                {%- endset -%}
+                {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s((ui_t(true) ? '' : 'sr-only'))}, 'children': c_11}, with_context = false) }}
+              {%- endset -%}
+              {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_s, ['href']), 'className': ui_cnv([ui_cnv(['flex items-center gap-4 rounded py-2 text-sm', (ui_t(true) ? 'px-4' : 'justify-center px-2'), (ui_t(ui_eq(ui_get(v_s, ['id']), ui_get(v_nav, ['subCurrent']))) ? 'bg-muted font-medium' : '')])]), 'current': ui_eq(ui_get(v_s, ['id']), ui_get(v_nav, ['subCurrent'])), 'size': 'sm', 'testid': 'item'}, 'children': c_12}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_13}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_14}, with_context = false) }}
+      {%- endset -%}
+      {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_nav, ['subTitle']), v_landmarkLabel])) : ui_get(v_nav, ['subTitle']))}, 'children': c_15}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex w-56 flex-col gap-4 px-4 py-6', (ui_t(ui_eq(v_side, 'end')) ? 'border-r border-border' : 'border-l border-border')])), 'Attrs': ui_attrs(['data-testid', 'subnav'])}, 'children': c_16}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'aside', 'Class': ui_s(ui_cnv(['flex shrink-0 bg-card', (ui_t(ui_eq(v_side, 'end')) ? 'flex-row-reverse border-l border-border' : 'border-r border-border')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, ui_get(v_nav, ['label'])]), 'data-testid', 'sidebar', 'data-mode', v_mode])}, 'children': c_17}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/shell-topbar.html.twig b/packages/twig/ui/blocks/shell-topbar.html.twig
new file mode 100644
index 0000000..224712b
--- /dev/null
+++ b/packages/twig/ui/blocks/shell-topbar.html.twig
@@ -0,0 +1,58 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shell-topbar.json
+    The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar), an optional search field, and the signed-in person.
+    Props (p): nav, brand, links, search, landmarkLabel. -#}
+{%- set v_nav = (p.nav ?? null) -%}
+{%- set v_brand = (p.brand ?? 'show') -%}
+{%- set v_links = (p.links ?? 'hide') -%}
+{%- set v_search = (p.search ?? 'show') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_10 -%}
+  {%- if ui_t(ui_eq(v_brand, 'show')) %}
+    {%- set c_2 -%}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'layers', 'Size': 24}}, with_context = false) }}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_nav, ['brand'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'bold', 'Class': ui_s((ui_t(true) ? '' : 'sr-only'))}, 'children': c_1}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'shrink-0', 'Attrs': ui_attrs(['data-testid', 'brand'])}, 'children': c_2}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_and([ui_eq(v_links, 'show'), ui_gt(ui_len(ui_get(v_nav, ['links'])), 0)])) %}
+    {%- set c_7 -%}
+      {%- set c_6 -%}
+        {%- for v_l in ui_l(ui_get(v_nav, ['links'])) %}
+          {%- set c_5 -%}
+            {%- set c_4 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 16}}, with_context = false) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_l, ['name'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s((ui_t(true) ? '' : 'sr-only'))}, 'children': c_3}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv([ui_cnv(['flex items-center gap-4 rounded py-2 text-sm', (ui_t(true) ? 'px-4' : 'justify-center px-2'), (ui_t(ui_eq(ui_get(v_l, ['id']), ui_get(v_nav, ['current']))) ? 'bg-muted font-medium' : '')])]), 'current': ui_eq(ui_get(v_l, ['id']), ui_get(v_nav, ['current'])), 'size': 'sm', 'testid': 'item'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_5}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none items-center gap-2 p-0'}, 'children': c_6}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_nav, ['label']), v_landmarkLabel])) : ui_get(v_nav, ['label'])), 'className': ui_cnv(['hidden lg:block'])}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_search, 'show')) %}
+    {%- if ui_t(ui_eq(v_links, 'show')) %}
+      {%- set c_8 -%}
+        {{ include('blocks/search-palette.html.twig', {'p': {'label': ui_get(v_nav, ['search']), 'shortcut': ui_get(v_nav, ['shortcut'])}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'ml-auto hidden w-64 shrink-0 xl:block'}, 'children': c_8}, with_context = false) }}
+    {%- else %}
+      {{ include('blocks/search-palette.html.twig', {'p': {'label': ui_get(v_nav, ['search']), 'shortcut': ui_get(v_nav, ['shortcut'])}}, with_context = false) }}
+    {%- endif %}
+  {%- endif %}
+  {%- set c_9 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'bell', 'Size': 20, 'Class': 'text-muted-foreground'}}, with_context = false) }}
+    {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_nav, ['userName']), 'ratio': '1/1', 'className': ui_cnv(['size-8 shrink-0 rounded-full'])}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': ui_s((ui_t(ui_and([ui_eq(v_links, 'show'), ui_eq(v_search, 'show')])) ? 'shrink-0' : 'ml-auto shrink-0')), 'Attrs': ui_attrs(['data-testid', 'user'])}, 'children': c_9}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'header', 'Class': 'flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6', 'Attrs': ui_attrs(['data-testid', 'topbar', 'aria-label', v_landmarkLabel])}, 'children': c_10}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/shopping-cart.html.twig b/packages/twig/ui/blocks/shopping-cart.html.twig
new file mode 100644
index 0000000..d34730b
--- /dev/null
+++ b/packages/twig/ui/blocks/shopping-cart.html.twig
@@ -0,0 +1,75 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/shopping-cart.json
+    The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.
+    Props (p): id, title, lines, rows, promos, labels, totals, actions, layout, promo, progress, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lines = (p.lines ?? null) -%}
+{%- set v_rows = (p.rows ?? null) -%}
+{%- set v_promos = (p.promos ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_totals = (p.totals ?? null) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_layout = (p.layout ?? 'split') -%}
+{%- set v_promo = (p.promo ?? 'show') -%}
+{%- set v_progress = (p.progress ?? 'show') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_14 -%}
+  {%- set c_13 -%}
+    {%- set c_11 -%}
+      {%- if ui_t(ui_eq(ui_len(v_lines), 0)) %}
+        {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'shopping-cart', 'title': ui_get(v_actions, ['empty'])}}, with_context = false) }}
+      {%- endif %}
+      {%- for v_line in ui_l(v_lines) %}
+        {%- set c_7 -%}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_line, ['name']), 'ratio': '1/1', 'className': ui_cnv(['size-20 shrink-0'])}}, with_context = false) }}
+          {%- set c_4 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_line, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_line, ['variant'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_money(ui_get(v_line, ['price']), ui_get(v_line, ['currency']))) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm'}, 'children': c_3}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'min-w-40 flex-1'}, 'children': c_4}, with_context = false) }}
+          {{ include('blocks/number-field.html.twig', {'p': {'value': ui_str(ui_get(v_line, ['qty'])), 'name': ui_tpl('{0}-qty-{1}', [v_id, ui_get(v_line, ['id'])]), 'min': '1', 'label': ui_get(v_labels, ['qty']), 'decrease': ui_get(v_labels, ['decrease']), 'increase': ui_get(v_labels, ['increase'])}}, with_context = false) }}
+          {%- set c_5 -%}
+            {{ ui_text(ui_money(ui_mul(ui_get(v_line, ['price']), ui_get(v_line, ['qty'])), ui_get(v_line, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'bold', 'Class': 'w-24 text-right'}, 'children': c_5}, with_context = false) }}
+          {%- set c_6 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'trash', 'Size': 16}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Layout': 'icon', 'AriaLabel': ui_s(ui_get(v_labels, ['remove'])), 'Attrs': ui_attrs(['data-testid', 'remove'])}, 'children': c_6}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'rounded bg-card inset-ring inset-ring-border flex-wrap p-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_7}, with_context = false) }}
+      {%- endfor %}
+      {%- set c_10 -%}
+        {%- set c_8 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'arrow-left', 'Size': 16}}, with_context = false) }}
+          {{ ui_text(ui_get(v_actions, ['back'])) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default'}, 'children': c_8}, with_context = false) }}
+        {%- set c_9 -%}
+          {{ ui_text(ui_get(v_actions, ['clear'])) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'default'}, 'children': c_9}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_10}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s((ui_t(ui_eq(v_layout, 'split')) ? 'lg:col-span-2' : '')), 'Attrs': ui_attrs(['data-testid', 'lines'])}, 'children': c_11}, with_context = false) }}
+    {%- set c_12 -%}
+      {{ include('blocks/cart-summary-card.html.twig', {'p': {'field': ui_tpl('{0}-promo', [v_id]), 'lines': v_lines, 'rows': v_rows, 'promos': v_promos, 'labels': v_totals, 'promo': v_promo, 'progress': v_progress}}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'split')) ? 'lg:sticky lg:top-8' : '')), 'Attrs': ui_attrs(['data-testid', 'aside'])}, 'children': c_12}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'split')) ? 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3' : 'grid grid-cols-1 gap-8'))}, 'children': c_13}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_14}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/sidebar-nav.html.twig b/packages/twig/ui/blocks/sidebar-nav.html.twig
new file mode 100644
index 0000000..8b74223
--- /dev/null
+++ b/packages/twig/ui/blocks/sidebar-nav.html.twig
@@ -0,0 +1,63 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/sidebar-nav.json
+    A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full: icon and name, compact: icons only with the name hidden), user (show, hide), density.
+    Props (p): label, brand, links, current, userName, userEmail, width, user, density, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_brand = (p.brand ?? null) -%}
+{%- set v_links = (p.links ?? null) -%}
+{%- set v_current = (p.current ?? '') -%}
+{%- set v_userName = (p.userName ?? null) -%}
+{%- set v_userEmail = (p.userEmail ?? null) -%}
+{%- set v_width = (p.width ?? 'full') -%}
+{%- set v_user = (p.user ?? 'show') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_12 -%}
+  {%- set c_2 -%}
+    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'layers', 'Size': 24}}, with_context = false) }}
+    {%- set c_1 -%}
+      {{ ui_text(v_brand) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'bold', 'Class': ui_s((ui_t(ui_eq(v_width, 'compact')) ? 'sr-only' : ''))}, 'children': c_1}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_2}, with_context = false) }}
+  {%- if ui_t(ui_gt(ui_len(v_links), 0)) %}
+    {%- set c_7 -%}
+      {%- set c_6 -%}
+        {%- for v_l in ui_l(v_links) %}
+          {%- set c_5 -%}
+            {%- set c_4 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_l, ['icon'])), 'Size': 16}}, with_context = false) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_l, ['name'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_width, 'compact')) ? 'sr-only' : ''))}, 'children': c_3}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_l, ['href']), 'className': ui_cnv([ui_cnv(['flex items-center gap-4 rounded px-4 text-sm', 'py-2', (ui_t(ui_eq(ui_get(v_l, ['id']), v_current)) ? 'bg-muted font-semibold' : '')])]), 'current': ui_eq(ui_get(v_l, ['id']), v_current), 'testid': 'item'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {}, 'children': c_5}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/list/list.html.twig', {'p': {'Class': ui_s(ui_cnv(['m-0 flex list-none flex-col p-0', (ui_t(ui_eq(v_density, 'compact')) ? 'gap-0' : 'gap-2')])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) : v_label), 'className': ui_cnv(['flex-1'])}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+  {%- if ui_t(ui_eq(v_user, 'show')) %}
+    {%- set c_11 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_userName, 'ratio': '1/1', 'className': ui_cnv(['size-10 shrink-0 rounded-full'])}}, with_context = false) }}
+      {%- set c_10 -%}
+        {%- set c_8 -%}
+          {{ ui_text(v_userName) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_8}, with_context = false) }}
+        {%- set c_9 -%}
+          {{ ui_text(v_userEmail) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_9}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': ui_s((ui_t(ui_eq(v_width, 'compact')) ? 'sr-only' : 'min-w-0'))}, 'children': c_10}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'border-t border-border pt-4', 'Attrs': ui_attrs(['data-testid', 'user'])}, 'children': c_11}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'aside', 'Class': ui_s(ui_cnv(['flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border', (ui_t(ui_eq(v_width, 'compact')) ? 'w-20 items-center' : 'w-64')])), 'Attrs': ui_attrs(['aria-label', ui_coalesce([v_landmarkLabel, v_brand]), 'data-testid', 'sidebar', 'data-width', v_width])}, 'children': c_12}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/sidebar-panel.html.twig b/packages/twig/ui/blocks/sidebar-panel.html.twig
new file mode 100644
index 0000000..f61844e
--- /dev/null
+++ b/packages/twig/ui/blocks/sidebar-panel.html.twig
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/sidebar-panel.json
+    The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer.
+    Props (p): variant, landmarkLabel, className; children: markup. -#}
+{%- set v_variant = (p.variant ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'aside', 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/sidebar-panel.variants.json', {'variant': v_variant}), (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'sidebar-panel', 'data-variant', ui_coalesce([v_variant, 'chat']), 'aria-label', v_landmarkLabel])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/signup-wizard.html.twig b/packages/twig/ui/blocks/signup-wizard.html.twig
new file mode 100644
index 0000000..0c4c755
--- /dev/null
+++ b/packages/twig/ui/blocks/signup-wizard.html.twig
@@ -0,0 +1,80 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/signup-wizard.json
+    A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown, counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values between steps is the page's job.
+    Props (p): id, title, steps, labels, current, level, progress, layout, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_steps = (p.steps ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_current = (p.current ?? 1) -%}
+{%- set v_level = (p.level ?? 2) -%}
+{%- set v_progress = (p.progress ?? 'bar') -%}
+{%- set v_layout = (p.layout ?? 'card') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_gt(ui_len(v_steps), 0)) %}
+  {%- set c_14 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(v_level), 'Size': '2xl', 'Weight': 'bold', 'Attrs': ui_attrs(['id', ui_tpl('{0}-title', [v_id])])}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['stepOf']), [v_current, ui_len(v_steps)])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'step-of'])}, 'children': c_2}, with_context = false) }}
+    {%- if ui_t(ui_eq(v_progress, 'bar')) %}
+      {{ include('ui/form/progress.html.twig', {'p': {'Value': ui_s(ui_str(v_current)), 'Max': ui_s(ui_str(ui_len(v_steps))), 'Attrs': ui_attrs(['aria-label', ui_get(v_labels, ['steps'])])}}, with_context = false) }}
+    {%- endif %}
+    {%- if ui_t(ui_eq(v_progress, 'list')) %}
+      {%- set c_4 -%}
+        {%- for v_s in ui_l(v_steps) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_3 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s((ui_t(ui_lt(ui_add(v_i, 1), v_current)) ? 'circle-check' : ui_get(v_s, ['icon']))), 'Size': 16}}, with_context = false) }}
+            {{ ui_text(ui_get(v_s, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex items-center gap-4 text-sm', (ui_t(ui_eq(ui_add(v_i, 1), v_current)) ? 'font-semibold' : 'text-muted-foreground')])), 'Attrs': ui_attrs(['aria-current', (ui_t(ui_eq(ui_add(v_i, 1), v_current)) ? 'step' : null), 'data-testid', 'step-item'])}, 'children': c_3}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0', 'Attrs': ui_attrs(['aria-label', ui_get(v_labels, ['steps']), 'data-testid', 'step-list'])}, 'children': c_4}, with_context = false) }}
+    {%- endif %}
+    {%- for v_s in ui_l(v_steps) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_eq(ui_add(v_i, 1), v_current)) %}
+        {%- set c_10 -%}
+          {%- set c_5 -%}
+            {{ ui_text(ui_get(v_s, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_5}, with_context = false) }}
+          {%- set c_6 -%}
+            {{ ui_text(ui_get(v_s, ['text'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+          {%- set c_9 -%}
+            {%- set c_7 -%}
+              {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': ui_s(ui_tpl('{0}-a', [v_id])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-a', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_s, ['fieldA']), 'htmlFor': ui_tpl('{0}-a', [v_id])}, 'children': c_7}, with_context = false) }}
+            {%- set c_8 -%}
+              {{ include('ui/input/input.html.twig', {'p': {'Type': 'text', 'Name': ui_s(ui_tpl('{0}-b', [v_id])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-b', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_s, ['fieldB']), 'htmlFor': ui_tpl('{0}-b', [v_id])}, 'children': c_8}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid gap-4'}, 'children': c_9}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'step'])}, 'children': c_10}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+    {%- set c_13 -%}
+      {%- set c_11 -%}
+        {{ ui_text(ui_get(v_labels, ['back'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Disabled': ui_t(ui_lt(v_current, 2)), 'Attrs': ui_attrs(['data-testid', 'wizard-back'])}, 'children': c_11}, with_context = false) }}
+      {%- set c_12 -%}
+        {{ ui_text((ui_t(ui_ge(v_current, ui_len(v_steps))) ? ui_get(v_labels, ['finish']) : ui_get(v_labels, ['next']))) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'button', 'Attrs': ui_attrs(['data-testid', 'wizard-next'])}, 'children': c_12}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Justify': 'between'}, 'children': c_13}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'section', 'Class': ui_s(ui_cnv(['mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8', (ui_t(ui_eq(v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')])), 'Attrs': ui_attrs(['aria-labelledby', (ui_t(v_landmarkLabel) ? null : ui_tpl('{0}-title', [v_id])), 'data-testid', 'wizard', 'data-current', ui_str(v_current), 'aria-label', v_landmarkLabel])}, 'children': c_14}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/site-footer.html.twig b/packages/twig/ui/blocks/site-footer.html.twig
new file mode 100644
index 0000000..9e2dd93
--- /dev/null
+++ b/packages/twig/ui/blocks/site-footer.html.twig
@@ -0,0 +1,33 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/site-footer.json
+    The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density (default, compact).
+    Props (p): labels, routes, layout, density, landmarkLabel. -#}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_routes = (p.routes ?? null) -%}
+{%- set v_layout = (p.layout ?? 'minimal') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_7 -%}
+  {%- set c_6 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['copyright'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground', 'Attrs': ui_attrs(['data-testid', 'copyright'])}, 'children': c_1}, with_context = false) }}
+    {%- set c_5 -%}
+      {%- set c_4 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['home'])) }}
+        {%- endset -%}
+        {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_routes, ['home']), 'className': ui_cnv(['font-semibold'])}, 'children': c_2}, with_context = false) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['pricing'])) }}
+        {%- endset -%}
+        {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_routes, ['pricing']), 'className': ui_cnv(['font-semibold'])}, 'children': c_3}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4'}, 'children': c_4}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_labels, ['nav']), v_landmarkLabel])) : ui_get(v_labels, ['nav']))}, 'children': c_5}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-wrap items-center gap-4', (ui_t(ui_eq(v_density, 'compact')) ? 'py-4' : 'py-6'), (ui_t(ui_eq(v_layout, 'centered')) ? 'flex-col text-center' : 'justify-between')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_6}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'footer', 'Class': 'mt-12 border-t border-border', 'Attrs': ui_attrs(['data-testid', 'site-footer', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_7}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/site-header.html.twig b/packages/twig/ui/blocks/site-header.html.twig
new file mode 100644
index 0000000..fbdc956
--- /dev/null
+++ b/packages/twig/ui/blocks/site-header.html.twig
@@ -0,0 +1,54 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/site-header.json
+    The page header: a skip link to the main content, the brand, the two navigation links (the current one carries aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position (static, sticky), actions (none, cta).
+    Props (p): labels, routes, current, layout, position, actions, cta, ctaHref, landmarkLabel. -#}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_routes = (p.routes ?? null) -%}
+{%- set v_current = (p.current ?? null) -%}
+{%- set v_layout = (p.layout ?? 'inline') -%}
+{%- set v_position = (p.position ?? 'static') -%}
+{%- set v_actions = (p.actions ?? 'none') -%}
+{%- set v_cta = (p.cta ?? null) -%}
+{%- set v_ctaHref = (p.ctaHref ?? null) -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_11 -%}
+  {%- set c_1 -%}
+    {{ ui_text(ui_get(v_labels, ['skip'])) }}
+  {%- endset -%}
+  {{ include('ui/link-plain/link-plain.html.twig', {'p': {'Href': '#main-content', 'Class': 'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'skip-link'])}, 'children': c_1}, with_context = false) }}
+  {%- set c_10 -%}
+    {%- set c_2 -%}
+      {{ ui_text(ui_get(v_labels, ['brand'])) }}
+    {%- endset -%}
+    {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_routes, ['home']), 'className': ui_cnv(['text-lg font-medium']), 'testid': 'brand'}, 'children': c_2}, with_context = false) }}
+    {%- set c_6 -%}
+      {%- set c_5 -%}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['home'])) }}
+        {%- endset -%}
+        {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_routes, ['home']), 'className': ui_cnv(['font-semibold']), 'current': ui_eq(v_current, 'home'), 'testid': 'nav-link'}, 'children': c_3}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['pricing'])) }}
+        {%- endset -%}
+        {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_routes, ['pricing']), 'className': ui_cnv(['font-semibold']), 'current': ui_eq(v_current, 'pricing'), 'testid': 'nav-link'}, 'children': c_4}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_5}, with_context = false) }}
+    {%- endset -%}
+    {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [ui_get(v_labels, ['nav']), v_landmarkLabel])) : ui_get(v_labels, ['nav'])), 'testid': 'site-nav'}, 'children': c_6}, with_context = false) }}
+    {%- set c_9 -%}
+      {%- set c_7 -%}
+        {{ ui_text(ui_get(v_labels, ['theme'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'theme-toggle'])}, 'children': c_7}, with_context = false) }}
+      {%- if ui_t(ui_and([ui_eq(v_actions, 'cta'), v_cta])) %}
+        {%- set c_8 -%}
+          {{ ui_text(v_cta) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'sm', 'Href': ui_s(v_ctaHref), 'Attrs': ui_attrs(['data-testid', 'header-cta'])}, 'children': c_8}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center'}, 'children': c_9}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-wrap gap-4 py-4', (ui_t(ui_eq(v_layout, 'stacked')) ? 'flex-col items-center' : 'items-center justify-between')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_10}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'header', 'Class': ui_s(ui_cnv(['border-b border-border bg-background', (ui_t(ui_eq(v_position, 'sticky')) ? 'sticky top-0 z-40' : '')])), 'Attrs': ui_attrs(['data-testid', 'site-header', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/sitemap-footer.html.twig b/packages/twig/ui/blocks/sitemap-footer.html.twig
new file mode 100644
index 0000000..2bd0c4f
--- /dev/null
+++ b/packages/twig/ui/blocks/sitemap-footer.html.twig
@@ -0,0 +1,104 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/sitemap-footer.json
+    A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above, equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none, first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status itself is a port contract.
+    Props (p): label, brand, tagline, copyright, groups, signup, status, id, layout, density, landmarkLabel. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_brand = (p.brand ?? null) -%}
+{%- set v_tagline = (p.tagline ?? null) -%}
+{%- set v_copyright = (p.copyright ?? null) -%}
+{%- set v_groups = (p.groups ?? null) -%}
+{%- set v_signup = (p.signup ?? null) -%}
+{%- set v_status = (p.status ?? null) -%}
+{%- set v_id = (p.id ?? 'footer') -%}
+{%- set v_layout = (p.layout ?? 'columns') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_eq(v_layout, 'card')) %}
+  {{ include('blocks/footer-card.html.twig', {'p': {'label': v_label, 'brand': v_brand, 'groups': v_groups, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+{%- else %}
+  {%- set c_21 -%}
+    {%- set c_20 -%}
+      {%- if ui_t(ui_eq(ui_get(v_signup, ['mode']), 'first')) %}
+        {%- set c_6 -%}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_signup, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+          {%- set c_5 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_signup, ['label'])) }}
+            {%- endset -%}
+            {{ include('ui/label/label.html.twig', {'p': {'HTMLFor': ui_s(ui_tpl('{0}-email', [v_id])), 'Class': 'sr-only'}, 'children': c_2}, with_context = false) }}
+            {%- set c_4 -%}
+              {{ include('ui/input/input.html.twig', {'p': {'Type': 'email', 'Name': 'email', 'Class': 'min-w-0 flex-1', 'Attrs': ui_attrs(['id', ui_tpl('{0}-email', [v_id]), 'data-testid', 'field'])}}, with_context = false) }}
+              {%- set c_3 -%}
+                {{ ui_text(ui_get(v_signup, ['submit'])) }}
+              {%- endset -%}
+              {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'submit', 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_3}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'start', 'Class': 'w-full flex-wrap'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/form/form.html.twig', {'p': {'Method': 'dialog', 'Class': ui_s(ui_cnv(['w-full max-w-md', (ui_t(false) ? 'mx-auto' : '')])), 'Attrs': ui_attrs(['data-testid', 'email-form'])}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Class': 'max-w-md', 'Attrs': ui_attrs(['data-testid', 'signup'])}, 'children': c_6}, with_context = false) }}
+      {%- endif %}
+      {%- if ui_t(ui_eq(v_layout, 'columns')) %}
+        {%- set c_11 -%}
+          {%- set c_9 -%}
+            {%- set c_7 -%}
+              {{ ui_text(v_brand) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_7}, with_context = false) }}
+            {%- set c_8 -%}
+              {{ ui_text(v_tagline) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_8}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'md:w-64 md:shrink-0'}, 'children': c_9}, with_context = false) }}
+          {%- set c_10 -%}
+            {{ include('blocks/footer-columns.html.twig', {'p': {'label': v_label, 'groups': v_groups, 'landmarkLabel': v_landmarkLabel}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'min-w-0 flex-1'}, 'children': c_10}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex flex-col gap-8 md:flex-row md:items-start md:gap-12', 'Attrs': ui_attrs(['data-slot', 'footer-top'])}, 'children': c_11}, with_context = false) }}
+      {%- else %}
+        {%- set c_16 -%}
+          {%- set c_12 -%}
+            {{ ui_text(v_brand) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'bold'}, 'children': c_12}, with_context = false) }}
+          {%- if ui_t(ui_gt(ui_len(v_groups), 0)) %}
+            {%- set c_15 -%}
+              {%- set c_14 -%}
+                {%- for v_g in ui_l(v_groups) %}
+                  {%- set c_13 -%}
+                    {{ ui_text(ui_get(v_g, ['title'])) }}
+                  {%- endset -%}
+                  {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_g, ['href']), 'className': ui_cnv(['text-sm']), 'testid': 'group'}, 'children': c_13}, with_context = false) }}
+                {%- endfor %}
+              {%- endset -%}
+              {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Class': 'flex-wrap'}, 'children': c_14}, with_context = false) }}
+            {%- endset -%}
+            {{ include('blocks/nav-block.html.twig', {'p': {'label': (ui_t(v_landmarkLabel) ? ui_uniq(ui_tpl('{0}, {1}', [v_label, v_landmarkLabel])) : v_label)}, 'children': c_15}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '6', 'Align': 'center', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_16}, with_context = false) }}
+      {%- endif %}
+      {%- set c_19 -%}
+        {%- set c_17 -%}
+          {{ ui_text(v_copyright) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_17}, with_context = false) }}
+        {%- if ui_t(ui_eq(ui_get(v_status, ['mode']), 'show')) %}
+          {%- set c_18 -%}
+            {{ ui_text(ui_get(v_status, ['label'])) }}
+          {%- endset -%}
+          {{ include('blocks/pill.html.twig', {'p': {'tone': 'green', 'icon': 'circle-check'}, 'children': c_18}, with_context = false) }}
+        {%- endif %}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'flex-wrap border-t border-border pt-6'}, 'children': c_19}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/container/container.html.twig', {'p': {'Class': ui_s(ui_cnv(['mx-auto w-full max-w-6xl px-4', 'flex flex-col gap-8', (ui_t(ui_eq(v_density, 'compact')) ? 'py-6' : 'py-12')])), 'Attrs': ui_attrs(['data-slot', 'container'])}, 'children': c_20}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'footer', 'Class': 'mt-12 border-t border-border', 'Attrs': ui_attrs(['data-testid', 'site-footer', 'data-layout', v_layout, 'aria-label', v_landmarkLabel])}, 'children': c_21}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/skeleton-layout.html.twig b/packages/twig/ui/blocks/skeleton-layout.html.twig
new file mode 100644
index 0000000..c94bb7a
--- /dev/null
+++ b/packages/twig/ui/blocks/skeleton-layout.html.twig
@@ -0,0 +1,57 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/skeleton-layout.json
+    The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content is loading. The shimmer itself belongs to the Skeleton part.
+    Props (p): id, title, label, lines, shape, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_lines = (p.lines ?? null) -%}
+{%- set v_shape = (p.shape ?? 'cards') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- if ui_t(ui_eq(v_shape, 'cards')) %}
+      {%- set c_2 -%}
+        {%- for v_l in ui_l(v_lines) %}
+          {%- set c_1 -%}
+            {{ include('ui/skeleton/skeleton.html.twig', {'p': {'Class': 'aspect-video w-full'}}, with_context = false) }}
+            {{ include('ui/skeleton/skeleton.html.twig', {'p': {'Class': 'h-4 w-2/3'}}, with_context = false) }}
+            {{ include('ui/skeleton/skeleton.html.twig', {'p': {'Class': 'h-4 w-full'}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_1}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-3', 'Class': 'gap-4'}, 'children': c_2}, with_context = false) }}
+    {%- elseif ui_t(ui_eq(v_shape, 'list')) %}
+      {%- set c_5 -%}
+        {%- for v_l in ui_l(v_lines) %}
+          {%- set c_4 -%}
+            {{ include('ui/skeleton/skeleton.html.twig', {'p': {'Class': 'size-10 shrink-0 rounded-full'}}, with_context = false) }}
+            {%- set c_3 -%}
+              {{ include('ui/skeleton/skeleton.html.twig', {'p': {'Class': 'h-4 w-1/3'}}, with_context = false) }}
+              {{ include('ui/skeleton/skeleton.html.twig', {'p': {'Class': 'h-4 w-full'}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'flex-1'}, 'children': c_3}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_4}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_5}, with_context = false) }}
+    {%- else %}
+      {%- set c_7 -%}
+        {{ include('ui/skeleton/skeleton.html.twig', {'p': {'Class': 'h-8 w-3/4'}}, with_context = false) }}
+        {%- for v_l in ui_l(v_lines) %}
+          {%- set c_6 -%}
+            {{ include('ui/skeleton/skeleton.html.twig', {'p': {'Class': 'h-4 w-full'}}, with_context = false) }}
+            {{ include('ui/skeleton/skeleton.html.twig', {'p': {'Class': 'h-4 w-5/6'}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'mx-auto max-w-2xl'}, 'children': c_7}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'div', 'Class': 'w-full', 'Attrs': ui_attrs(['role', 'status', 'aria-label', v_label, 'data-testid', 'skeleton', 'data-shape', v_shape])}, 'children': c_8}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/slot-board.html.twig b/packages/twig/ui/blocks/slot-board.html.twig
new file mode 100644
index 0000000..b821e1d
--- /dev/null
+++ b/packages/twig/ui/blocks/slot-board.html.twig
@@ -0,0 +1,89 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/slot-board.json
+    Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item (card, plain), tone.
+    Props (p): id, title, lead, days, empty, zone, labels, layout, item, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_days = (p.days ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_zone = (p.zone ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'split') -%}
+{%- set v_item = (p.item ?? 'card') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_19 -%}
+  {%- if ui_t(ui_eq(ui_len(v_days), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'calendar', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_18 -%}
+      {%- set c_1 -%}
+        {{ include('blocks/slot-grid.html.twig', {'p': {'days': v_days, 'name': ui_tpl('{0}-slot', [v_id]), 'item': v_item}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'split')) ? 'lg:col-span-2' : 'lg:col-span-3'))}, 'children': c_1}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_layout, 'split')) %}
+        {%- set c_17 -%}
+          {%- set c_3 -%}
+            {%- set c_2 -%}
+              {{ include('ui/select/select-option.html.twig', {'p': {'Value': ui_s(ui_get(v_zone, ['id'])), 'Label': ui_s(ui_get(v_zone, ['name'])), 'Selected': true}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/select/select.html.twig', {'p': {'Name': ui_s(ui_tpl('{0}-zone', [v_id])), 'Attrs': ui_attrs(['id', ui_tpl('{0}-zone', [v_id])])}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('blocks/field.html.twig', {'p': {'label': ui_get(v_labels, ['zone']), 'htmlFor': ui_tpl('{0}-zone', [v_id])}, 'children': c_3}, with_context = false) }}
+          {%- set c_13 -%}
+            {%- set c_6 -%}
+              {%- set c_4 -%}
+                {{ ui_text(ui_get(v_labels, ['price'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+              {%- set c_5 -%}
+                {{ ui_text(ui_money(ui_get(v_zone, ['price']), ui_get(v_zone, ['currency']))) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'font-medium'}, 'children': c_5}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_6}, with_context = false) }}
+            {%- set c_9 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_labels, ['freeFrom'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+              {%- set c_8 -%}
+                {{ ui_text(ui_money(ui_get(v_zone, ['freeFrom']), ui_get(v_zone, ['currency']))) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'font-medium'}, 'children': c_8}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_9}, with_context = false) }}
+            {%- set c_12 -%}
+              {%- set c_10 -%}
+                {{ ui_text(ui_get(v_labels, ['time'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-muted-foreground'}, 'children': c_10}, with_context = false) }}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_zone, ['time'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'font-medium'}, 'children': c_11}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_12}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2'}, 'children': c_13}, with_context = false) }}
+          {%- set c_14 -%}
+            {{ ui_text(ui_get(v_labels, ['primary'])) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Class': 'w-full'}, 'children': c_14}, with_context = false) }}
+          {%- set c_15 -%}
+            {{ ui_text(ui_get(v_labels, ['secondary'])) }}
+          {%- endset -%}
+          {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Class': 'w-full'}, 'children': c_15}, with_context = false) }}
+          {%- set c_16 -%}
+            {{ ui_text(ui_get(v_labels, ['note'])) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_16}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'aside'])}, 'children': c_17}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3'}, 'children': c_18}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_19}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/slot-grid.html.twig b/packages/twig/ui/blocks/slot-grid.html.twig
new file mode 100644
index 0000000..2030f53
--- /dev/null
+++ b/packages/twig/ui/blocks/slot-grid.html.twig
@@ -0,0 +1,49 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/slot-grid.json
+    Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck through. One radio group (`name`) across all days. Static markup.
+    Props (p): days, name, item. -#}
+{%- set v_days = (p.days ?? null) -%}
+{%- set v_name = (p.name ?? null) -%}
+{%- set v_item = (p.item ?? 'card') -%}
+{%- set c_10 -%}
+  {%- for v_d in ui_l(v_days) %}
+    {%- set c_9 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(ui_get(v_d, ['title'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_d, ['note'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'baseline', 'Justify': 'between', 'Class': 'flex-wrap'}, 'children': c_3}, with_context = false) }}
+      {%- set c_8 -%}
+        {%- for v_s in ui_l(ui_get(v_d, ['slots'])) %}
+          {%- set c_5 -%}
+            {{ include('ui/radio/radio.html.twig', {'p': {'Name': ui_s(v_name), 'Value': ui_s(ui_tpl('{0} {1}', [ui_get(v_d, ['id']), v_s]))}}, with_context = false) }}
+            {%- set c_4 -%}
+              {{ ui_text(v_s) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/label/label.html.twig', {'p': {'Class': 'flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground'}, 'children': c_5}, with_context = false) }}
+        {%- endfor %}
+        {%- for v_s in ui_l(ui_get(v_d, ['closed'])) %}
+          {%- set c_7 -%}
+            {{ include('ui/radio/radio.html.twig', {'p': {'Name': ui_s(v_name), 'Value': ui_s(ui_tpl('{0} {1}', [ui_get(v_d, ['id']), v_s])), 'Disabled': true}}, with_context = false) }}
+            {%- set c_6 -%}
+              {{ ui_text(v_s) }}
+            {%- endset -%}
+            {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_6}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/label/label.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground', 'text-muted-foreground line-through']))}, 'children': c_7}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-2 sm:grid-cols-3'}, 'children': c_8}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Class': ui_s((ui_t(ui_eq(v_item, 'card')) ? 'rounded bg-card inset-ring inset-ring-border p-4' : 'border-b border-border pb-4')), 'Attrs': ui_attrs(['data-testid', 'day'])}, 'children': c_9}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'days'])}, 'children': c_10}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/stat-figure.html.twig b/packages/twig/ui/blocks/stat-figure.html.twig
new file mode 100644
index 0000000..634cda0
--- /dev/null
+++ b/packages/twig/ui/blocks/stat-figure.html.twig
@@ -0,0 +1,28 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/stat-figure.json
+    One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon.
+    Props (p): stat, item, align. -#}
+{%- set v_stat = (p.stat ?? null) -%}
+{%- set v_item = (p.item ?? 'plain') -%}
+{%- set v_align = (p.align ?? 'center') -%}
+{%- if ui_t(ui_eq(v_item, 'card')) %}
+  {{ include('blocks/stat-tile.html.twig', {'p': {'label': ui_get(v_stat, ['label']), 'value': ui_get(v_stat, ['value']), 'icon': ui_get(v_stat, ['icon']), 'hint': ui_get(v_stat, ['hint'])}}, with_context = false) }}
+{%- else %}
+  {%- set c_4 -%}
+    {%- if ui_t(ui_eq(v_item, 'icon')) %}
+      {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_stat, ['icon'])), 'Size': 24}}, with_context = false) }}
+    {%- endif %}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_get(v_stat, ['value'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': '5xl', 'Weight': 'medium', 'Class': ui_s(ui_cnv(['flex items-center', ui_preset('blocks/presets/defaults.json', ['stats', 'figure'])]))}, 'children': c_1}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_stat, ['label'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold', 'Class': 'leading-5 text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': ui_s((ui_t(ui_eq(v_align, 'center')) ? 'center' : 'start'))}, 'children': c_3}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': ui_s((ui_t(ui_eq(v_align, 'center')) ? 'center' : 'start')), 'Class': ui_s(ui_cnv([(ui_t(ui_eq(v_align, 'center')) ? 'text-center' : ''), ui_preset('blocks/presets/defaults.json', ['stats', 'column'])])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_4}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/stat-tile.html.twig b/packages/twig/ui/blocks/stat-tile.html.twig
new file mode 100644
index 0000000..80d6a51
--- /dev/null
+++ b/packages/twig/ui/blocks/stat-tile.html.twig
@@ -0,0 +1,63 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/stat-tile.json
+    A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the tile is a plain figure.
+    Props (p): label, value, icon, href, hint. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set v_value = (p.value ?? null) -%}
+{%- set v_icon = (p.icon ?? null) -%}
+{%- set v_href = (p.href ?? null) -%}
+{%- set v_hint = (p.hint ?? null) -%}
+{%- set c_13 -%}
+  {%- if ui_t(v_href) %}
+    {%- set c_6 -%}
+      {%- set c_3 -%}
+        {%- set c_1 -%}
+          {{ ui_text(v_label) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-bold text-muted-foreground'}, 'children': c_1}, with_context = false) }}
+        {%- set c_2 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(v_icon), 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/iconbadge/icon-badge.html.twig', {'p': {'Size': 'sm'}, 'children': c_2}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex items-center justify-between gap-2'}, 'children': c_3}, with_context = false) }}
+      {%- set c_4 -%}
+        {{ ui_text(v_value) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': '2xl', 'Weight': 'bold', 'Class': 'm-0 leading-8'}, 'children': c_4}, with_context = false) }}
+      {%- if ui_t(v_hint) %}
+        {%- set c_5 -%}
+          {{ ui_text(v_hint) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(v_href), 'Variant': 'block', 'Class': 'flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border hover:bg-muted'}, 'children': c_6}, with_context = false) }}
+  {%- else %}
+    {%- set c_12 -%}
+      {%- set c_9 -%}
+        {%- set c_7 -%}
+          {{ ui_text(v_label) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-bold text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+        {%- set c_8 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(v_icon), 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/iconbadge/icon-badge.html.twig', {'p': {'Size': 'sm'}, 'children': c_8}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex items-center justify-between gap-2'}, 'children': c_9}, with_context = false) }}
+      {%- set c_10 -%}
+        {{ ui_text(v_value) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': '2xl', 'Weight': 'bold', 'Class': 'm-0 leading-8'}, 'children': c_10}, with_context = false) }}
+      {%- if ui_t(v_hint) %}
+        {%- set c_11 -%}
+          {{ ui_text(v_hint) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border'}, 'children': c_12}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'min-w-0'}, 'children': c_13}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/stats-band.html.twig b/packages/twig/ui/blocks/stats-band.html.twig
new file mode 100644
index 0000000..419eedc
--- /dev/null
+++ b/packages/twig/ui/blocks/stats-band.html.twig
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/stats-band.json
+    Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3, 4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may be empty.
+    Props (p): id, title, stats, empty, cols, layout, surface, item, align, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? '') -%}
+{%- set v_stats = (p.stats ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_cols = (p.cols ?? '4') -%}
+{%- set v_layout = (p.layout ?? 'row') -%}
+{%- set v_surface = (p.surface ?? 'none') -%}
+{%- set v_item = (p.item ?? 'plain') -%}
+{%- set v_align = (p.align ?? 'center') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_3 -%}
+  {{ include('blocks/backdrop.html.twig', {'p': {'kind': (ui_t(ui_eq(v_surface, 'image')) ? 'image' : 'none'), 'alt': v_title}}, with_context = false) }}
+  {%- if ui_t(ui_eq(ui_len(v_stats), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'chart-column', 'title': v_empty}}, with_context = false) }}
+  {%- elseif ui_t(ui_eq(v_surface, 'panel')) %}
+    {%- set c_1 -%}
+      {%- for v_stat in ui_l(v_stats) %}
+        {{ include('blocks/stat-figure.html.twig', {'p': {'stat': v_stat, 'item': v_item, 'align': v_align}}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_cols, '2')) ? '2' : (ui_t(ui_eq(v_cols, '3')) ? '2-3' : (ui_t(ui_eq(v_cols, '4')) ? '2-4' : '3-6')))), 'Class': ui_s(ui_cnv(['w-full items-center bg-muted px-6', ui_preset('blocks/presets/defaults.json', ['stats', 'panel'])])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_1}, with_context = false) }}
+  {%- else %}
+    {%- set c_2 -%}
+      {%- for v_stat in ui_l(v_stats) %}
+        {{ include('blocks/stat-figure.html.twig', {'p': {'stat': v_stat, 'item': v_item, 'align': v_align}}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'stack')) ? '1' : (ui_t(ui_eq(v_cols, '2')) ? '2' : (ui_t(ui_eq(v_cols, '3')) ? '2-3' : (ui_t(ui_eq(v_cols, '4')) ? '2-4' : '3-6'))))), 'Class': 'gap-6', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': v_align, 'measure': (ui_t(ui_eq(v_surface, 'panel')) ? 'fill' : (ui_t(ui_eq(v_layout, 'stack')) ? 'xs' : 'default')), 'className': ui_cnv([ui_cnv([ui_cnv([(ui_t(ui_eq(v_surface, 'image')) ? 'bg-transparent' : ''), (ui_t(ui_eq(v_surface, 'panel')) ? 'py-0' : '')]), (ui_t(ui_eq((ui_t(ui_eq(v_surface, 'image')) ? 'image' : 'none'), 'image')) ? 'relative isolate overflow-hidden' : '')])]), 'landmarkLabel': v_landmarkLabel}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/stepper.html.twig b/packages/twig/ui/blocks/stepper.html.twig
new file mode 100644
index 0000000..ad83e0c
--- /dev/null
+++ b/packages/twig/ui/blocks/stepper.html.twig
@@ -0,0 +1,80 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/stepper.json
+    A multi-step form header: the steps with the current one marked (aria-current step), and the current step's text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show, hide).
+    Props (p): id, title, steps, current, stepLabel, back, next, layout, marker, summary, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_steps = (p.steps ?? null) -%}
+{%- set v_current = (p.current ?? 2) -%}
+{%- set v_stepLabel = (p.stepLabel ?? null) -%}
+{%- set v_back = (p.back ?? null) -%}
+{%- set v_next = (p.next ?? null) -%}
+{%- set v_layout = (p.layout ?? 'horizontal') -%}
+{%- set v_marker = (p.marker ?? 'number') -%}
+{%- set v_summary = (p.summary ?? 'show') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_14 -%}
+  {%- if ui_t(ui_gt(ui_len(v_steps), 0)) %}
+    {%- set c_13 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_tpl(v_stepLabel, [v_current, ui_len(v_steps)])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_1}, with_context = false) }}
+      {%- set c_6 -%}
+        {%- for v_s in ui_l(v_steps) %}
+          {%- set v_i = loop.index0 -%}
+          {%- set c_5 -%}
+            {%- set c_3 -%}
+              {%- if ui_t(ui_eq(v_marker, 'icon')) %}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_s, ['icon'])), 'Size': 16}}, with_context = false) }}
+              {%- else %}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_str(ui_add(v_i, 1))) }}
+                {%- endset -%}
+                {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-sm font-bold'}, 'children': c_2}, with_context = false) }}
+              {%- endif %}
+            {%- endset -%}
+            {{ include('ui/iconbadge/icon-badge.html.twig', {'p': {'Variant': ui_s((ui_t(ui_lt(ui_add(v_i, 1), ui_add(v_current, 1))) ? 'primary' : 'outline')), 'Size': 'sm', 'Class': ui_s((ui_t(ui_lt(ui_add(v_i, 1), ui_add(v_current, 1))) ? 'text-sm' : 'text-sm text-muted-foreground'))}, 'children': c_3}, with_context = false) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_s, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': ui_s((ui_t(ui_eq(ui_add(v_i, 1), v_current)) ? 'bold' : 'semibold'))}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex flex-1 items-center gap-4', 'Attrs': ui_attrs(['data-testid', 'item', 'aria-current', (ui_t(ui_eq(ui_add(v_i, 1), v_current)) ? 'step' : null)])}, 'children': c_5}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ol', 'Class': ui_s(ui_cnv(['m-0 flex list-none gap-4 p-0', (ui_t(ui_eq(v_layout, 'vertical')) ? 'flex-col' : 'flex-col sm:flex-row')])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_6}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_summary, 'show')) %}
+        {%- for v_s in ui_l(v_steps) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_eq(ui_add(v_i, 1), v_current)) %}
+            {%- set c_12 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_s, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_7}, with_context = false) }}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_s, ['text'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_8}, with_context = false) }}
+              {%- set c_11 -%}
+                {%- set c_9 -%}
+                  {{ ui_text(v_back) }}
+                {%- endset -%}
+                {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button'}, 'children': c_9}, with_context = false) }}
+                {%- set c_10 -%}
+                  {{ ui_text(v_next) }}
+                {%- endset -%}
+                {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'sm', 'Type': 'button'}, 'children': c_10}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Class': 'pt-2'}, 'children': c_11}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'rounded bg-card p-6 inset-ring inset-ring-border', 'Attrs': ui_attrs(['data-testid', 'step-summary'])}, 'children': c_12}, with_context = false) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '6', 'Align': 'stretch', 'Attrs': ui_attrs(['data-testid', 'stepper'])}, 'children': c_13}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'measure': '3xl', 'landmarkLabel': v_landmarkLabel}, 'children': c_14}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/steps-list.html.twig b/packages/twig/ui/blocks/steps-list.html.twig
new file mode 100644
index 0000000..cdc5cb8
--- /dev/null
+++ b/packages/twig/ui/blocks/steps-list.html.twig
@@ -0,0 +1,52 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/steps-list.json
+    How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon), align, density, tone.
+    Props (p): id, title, steps, empty, layout, marker, align, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_steps = (p.steps ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_layout = (p.layout ?? 'row') -%}
+{%- set v_marker = (p.marker ?? 'number') -%}
+{%- set v_align = (p.align ?? 'start') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_steps), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'list-ordered', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_step in ui_l(v_steps) %}
+        {%- set v_i = loop.index0 -%}
+        {%- set c_6 -%}
+          {%- set c_2 -%}
+            {%- if ui_t(ui_eq(v_marker, 'icon')) %}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_step, ['icon'])), 'Size': 20}}, with_context = false) }}
+            {%- else %}
+              {%- set c_1 -%}
+                {{ ui_text(ui_str(ui_add(v_i, 1))) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-base font-bold'}, 'children': c_1}, with_context = false) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ include('ui/iconbadge/icon-badge.html.twig', {'p': {'Variant': 'primary', 'Attrs': ui_attrs(['data-slot', 'marker'])}, 'children': c_2}, with_context = false) }}
+          {%- set c_5 -%}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_step, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'bold'}, 'children': c_3}, with_context = false) }}
+            {%- set c_4 -%}
+              {{ ui_text(ui_get(v_step, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': ui_s((ui_t(ui_eq(v_align, 'center')) ? 'center' : 'start'))}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/list/list-item.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex gap-4', (ui_t(ui_eq(v_layout, 'row')) ? 'flex-col' : ''), (ui_t(ui_eq(v_align, 'center')) ? 'items-center text-center' : '')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ol', 'Class': ui_s(ui_cnv(['grid gap-6', (ui_t(ui_eq(v_layout, 'row')) ? 'sm:grid-cols-2 md:grid-cols-4' : '')])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': v_align, 'measure': (ui_t(ui_eq(v_layout, 'row')) ? 'default' : '2xl'), 'landmarkLabel': v_landmarkLabel}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/store-hero.html.twig b/packages/twig/ui/blocks/store-hero.html.twig
new file mode 100644
index 0000000..5c1ff2c
--- /dev/null
+++ b/packages/twig/ui/blocks/store-hero.html.twig
@@ -0,0 +1,87 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/store-hero.json
+    The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.
+    Props (p): id, title, lead, badge, level, actions, perks, card, layout, mediaSide, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set v_actions = (p.actions ?? null) -%}
+{%- set v_perks = (p.perks ?? null) -%}
+{%- set v_card = (p.card ?? null) -%}
+{%- set v_layout = (p.layout ?? 'overlay') -%}
+{%- set v_mediaSide = (p.mediaSide ?? 'end') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_eq(v_layout, 'backdrop')) %}
+  {%- set c_7 -%}
+    {{ include('blocks/backdrop.html.twig', {'p': {'kind': 'image', 'alt': v_title}}, with_context = false) }}
+    {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}, with_context = false) }}
+    {%- if ui_t(ui_gt(ui_len(v_perks), 0)) %}
+      {%- set c_6 -%}
+        {%- for v_p in ui_l(v_perks) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_lt(v_i, 3)) %}
+            {%- set c_5 -%}
+              {%- set c_1 -%}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 20}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_1}, with_context = false) }}
+              {%- set c_4 -%}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_get(v_p, ['title'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_get(v_p, ['text'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_4}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'perk'])}, 'children': c_5}, with_context = false) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-3', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'perks'])}, 'children': c_6}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'tone': v_tone, 'density': 'roomy', 'measure': '3xl', 'className': ui_cnv([(ui_t(ui_eq('image', 'image')) ? 'relative isolate overflow-hidden' : '')]), 'landmarkLabel': v_landmarkLabel}, 'children': c_7}, with_context = false) }}
+{%- else %}
+  {%- set f_14 -%}
+    {{ include('blocks/offer-media.html.twig', {'p': {'alt': v_title, 'card': v_card}}, with_context = false) }}
+  {%- endset -%}
+  {%- set c_15 -%}
+    {{ include('blocks/action-group.html.twig', {'p': {'primary': ui_get(v_actions, ['cta']), 'primaryHref': ui_get(v_actions, ['href']), 'secondary': (ui_t(ui_eq(ui_get(v_actions, ['mode']), 'two')) ? ui_get(v_actions, ['secondary']) : null), 'secondaryHref': ui_get(v_actions, ['secondaryHref'])}}, with_context = false) }}
+    {%- if ui_t(ui_gt(ui_len(v_perks), 0)) %}
+      {%- set c_13 -%}
+        {%- for v_p in ui_l(v_perks) %}
+          {%- set v_i = loop.index0 -%}
+          {%- if ui_t(ui_lt(v_i, 3)) %}
+            {%- set c_12 -%}
+              {%- set c_8 -%}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 20}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_8}, with_context = false) }}
+              {%- set c_11 -%}
+                {%- set c_9 -%}
+                  {{ ui_text(ui_get(v_p, ['title'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_9}, with_context = false) }}
+                {%- set c_10 -%}
+                  {{ ui_text(ui_get(v_p, ['text'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_10}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_11}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'start', 'Attrs': ui_attrs(['data-testid', 'perk'])}, 'children': c_12}, with_context = false) }}
+          {%- endif %}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-3', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'perks'])}, 'children': c_13}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge, 'level': v_level}, 'layout': 'split', 'media': {'show': true, 'side': v_mediaSide}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel, 'aside': f_14}, 'children': c_15}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/store-locations.html.twig b/packages/twig/ui/blocks/store-locations.html.twig
new file mode 100644
index 0000000..9d74925
--- /dev/null
+++ b/packages/twig/ui/blocks/store-locations.html.twig
@@ -0,0 +1,91 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/store-locations.json
+    The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.
+    Props (p): id, title, lead, stores, empty, kinds, labels, layout, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_stores = (p.stores ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_kinds = (p.kinds ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'cards') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_18 -%}
+  {%- if ui_t(ui_eq(ui_len(v_stores), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'store', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_17 -%}
+      {%- set c_15 -%}
+        {%- for v_s in ui_l(v_stores) %}
+          {%- set c_14 -%}
+            {%- set c_3 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_at(v_kinds, ui_get(v_s, ['kind']))) }}
+              {%- endset -%}
+              {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Class': 'w-fit'}, 'children': c_1}, with_context = false) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_s, ['name'])) }}
+              {%- endset -%}
+              {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_2}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_3}, with_context = false) }}
+            {%- set c_10 -%}
+              {%- set c_5 -%}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'map-pin', 'Size': 16}}, with_context = false) }}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_s, ['address'])) }}
+                {%- endset -%}
+                {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_4}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_5}, with_context = false) }}
+              {%- set c_7 -%}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'clock', 'Size': 16}}, with_context = false) }}
+                {%- set c_6 -%}
+                  {{ ui_text(ui_get(v_s, ['hours'])) }}
+                {%- endset -%}
+                {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_6}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_7}, with_context = false) }}
+              {%- set c_9 -%}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'phone', 'Size': 16}}, with_context = false) }}
+                {%- set c_8 -%}
+                  {{ ui_text(ui_nbsp(ui_get(v_s, ['phone']))) }}
+                {%- endset -%}
+                {{ include('ui/link/link.html.twig', {'p': {'Href': ui_s(ui_tpl('tel:{0}', [ui_get(v_s, ['phone'])])), 'Variant': 'default'}, 'children': c_8}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center gap-2'}, 'children': c_9}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': ui_s((ui_t(ui_eq(v_layout, 'list')) ? 'flex flex-wrap gap-x-8 gap-y-2 text-sm' : 'flex flex-col gap-2 text-sm'))}, 'children': c_10}, with_context = false) }}
+            {%- if ui_t(ui_eq(v_layout, 'cards')) %}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_s, ['note'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+              {%- set c_13 -%}
+                {%- for v_v in ui_l(ui_get(v_s, ['services'])) %}
+                  {%- set c_12 -%}
+                    {{ ui_text(v_v) }}
+                  {%- endset -%}
+                  {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'default'}, 'children': c_12}, with_context = false) }}
+                {%- endfor %}
+              {%- endset -%}
+              {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Class': 'flex-wrap'}, 'children': c_13}, with_context = false) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Class': ui_s((ui_t(ui_eq(v_layout, 'list')) ? 'border-b border-border pb-4' : 'rounded bg-card inset-ring inset-ring-border p-6')), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_14}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'cards')) ? 'grid grid-cols-1 gap-4 md:grid-cols-2' : 'flex flex-col gap-4')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_15}, with_context = false) }}
+      {%- if ui_t(ui_eq(v_layout, 'map')) %}
+        {%- set c_16 -%}
+          {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_labels, ['map']), 'ratio': '1/1'}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'md:sticky md:top-8'}, 'children': c_16}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['grid grid-cols-1 gap-8', (ui_t(ui_eq(v_layout, 'map')) ? 'items-start md:grid-cols-2' : '')]))}, 'children': c_17}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_18}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/story-dots.html.twig b/packages/twig/ui/blocks/story-dots.html.twig
new file mode 100644
index 0000000..768eac4
--- /dev/null
+++ b/packages/twig/ui/blocks/story-dots.html.twig
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/story-dots.json
+    One dot per step of StoryTabs; the dot of the active step is filled.
+    Props (p): steps, active. -#}
+{%- set v_steps = (p.steps ?? null) -%}
+{%- set v_active = (p.active ?? null) -%}
+{%- set c_1 -%}
+  {%- for v_s in ui_l(v_steps) %}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s(ui_cnv(['size-2 rounded-full', (ui_t(ui_eq(ui_get(v_s, ['id']), v_active)) ? 'bg-primary' : 'bg-border')])), 'Attrs': ui_attrs(['data-testid', 'story-dot'])}}, with_context = false) }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/story-panel.html.twig b/packages/twig/ui/blocks/story-panel.html.twig
new file mode 100644
index 0000000..64bf8b7
--- /dev/null
+++ b/packages/twig/ui/blocks/story-panel.html.twig
@@ -0,0 +1,37 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/story-panel.json
+    The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag in a muted box.
+    Props (p): s, index, total, labels. -#}
+{%- set v_s = (p.s ?? null) -%}
+{%- set v_index = (p.index ?? null) -%}
+{%- set v_total = (p.total ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_8 -%}
+  {%- set c_3 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_s, ['date'])) }}
+    {%- endset -%}
+    {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'sm'}, 'children': c_1}, with_context = false) }}
+    {%- set c_2 -%}
+      {{ ui_text(ui_tpl(ui_get(v_labels, ['step']), [ui_str(ui_add(v_index, 1)), ui_str(v_total)])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_3}, with_context = false) }}
+  {%- set c_4 -%}
+    {{ ui_text(ui_get(v_s, ['title'])) }}
+  {%- endset -%}
+  {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'xl', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+  {%- set c_5 -%}
+    {{ ui_text(ui_get(v_s, ['text'])) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+  {%- set c_7 -%}
+    {%- set c_6 -%}
+      {{ ui_text(ui_get(v_s, ['tag'])) }}
+    {%- endset -%}
+    {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_6}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'rounded bg-muted p-4'}, 'children': c_7}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'story-panel'])}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/story-tabs.html.twig b/packages/twig/ui/blocks/story-tabs.html.twig
new file mode 100644
index 0000000..2cf32d1
--- /dev/null
+++ b/packages/twig/ui/blocks/story-tabs.html.twig
@@ -0,0 +1,67 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/story-tabs.json
+    A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next arrows and one dot per step), tone. Choosing a step emits `select`.
+    Props (p): id, title, lead, badge, steps, empty, active, labels, layout, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_badge = (p.badge ?? '') -%}
+{%- set v_steps = (p.steps ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_active = (p.active ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'years') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- if ui_t(ui_eq(ui_len(v_steps), 0)) %}
+  {%- set c_1 -%}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'milestone', 'title': v_empty}}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_1}, with_context = false) }}
+{%- elseif ui_t(ui_eq(v_layout, 'years')) %}
+  {%- set c_6 -%}
+    {%- set c_5 -%}
+      {%- for v_s in ui_l(v_steps) %}
+        {%- set c_4 -%}
+          {%- set c_2 -%}
+            {{ ui_text(ui_get(v_s, ['date'])) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-sm font-semibold'}, 'children': c_2}, with_context = false) }}
+          {%- set c_3 -%}
+            {{ ui_text(ui_get(v_s, ['tag'])) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-xs'}, 'children': c_3}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': ui_s((ui_t(ui_eq(ui_get(v_s, ['id']), v_active)) ? 'default' : 'outline')), 'Size': 'lg', 'Type': 'button', 'Class': 'h-auto flex-col items-start gap-0 py-2 text-start', 'Attrs': ui_attrs(['data-testid', 'story-tab', 'data-active', (ui_t(ui_eq(ui_get(v_s, ['id']), v_active)) ? 'true' : 'false')])}, 'children': c_4}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'grid grid-cols-2 gap-2 sm:grid-cols-4', 'Attrs': ui_attrs(['data-testid', 'story-tabs'])}, 'children': c_5}, with_context = false) }}
+    {%- for v_s in ui_l(v_steps) %}
+      {%- set v_i = loop.index0 -%}
+      {%- if ui_t(ui_eq(ui_get(v_s, ['id']), v_active)) %}
+        {{ include('blocks/story-panel.html.twig', {'p': {'s': v_s, 'index': v_i, 'total': ui_len(v_steps), 'labels': v_labels}}, with_context = false) }}
+      {%- endif %}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_6}, with_context = false) }}
+{%- else %}
+  {%- set f_7 -%}
+    {%- set c_11 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '4/3'}}, with_context = false) }}
+      {%- set c_10 -%}
+        {%- set c_8 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-left', 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(ui_get(v_labels, ['previous'])), 'Attrs': ui_attrs(['data-testid', 'story-arrow'])}, 'children': c_8}, with_context = false) }}
+        {{ include('blocks/story-dots.html.twig', {'p': {'steps': v_steps, 'active': v_active}}, with_context = false) }}
+        {%- set c_9 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'chevron-right', 'Size': 16}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Layout': 'icon', 'Type': 'button', 'AriaLabel': ui_s(ui_get(v_labels, ['next'])), 'Attrs': ui_attrs(['data-testid', 'story-arrow'])}, 'children': c_9}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between'}, 'children': c_10}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch'}, 'children': c_11}, with_context = false) }}
+  {%- endset -%}
+  {{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'heading': {'badge': v_badge}, 'tone': v_tone, 'layout': 'split', 'media': {'show': true}, 'landmarkLabel': v_landmarkLabel, 'aside': f_7}}, with_context = false) }}
+{%- endif %}
diff --git a/packages/twig/ui/blocks/support-channels.html.twig b/packages/twig/ui/blocks/support-channels.html.twig
new file mode 100644
index 0000000..36939a2
--- /dev/null
+++ b/packages/twig/ui/blocks/support-channels.html.twig
@@ -0,0 +1,50 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/support-channels.json
+    Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout (grid, list), columns, action (link, none), tone (default, muted).
+    Props (p): id, title, channels, empty, open, layout, cols, action, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_channels = (p.channels ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_open = (p.open ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_cols = (p.cols ?? '1-3') -%}
+{%- set v_action = (p.action ?? 'link') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_8 -%}
+  {%- if ui_t(ui_eq(ui_len(v_channels), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'life-buoy', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_7 -%}
+      {%- for v_c in ui_l(v_channels) %}
+        {%- set c_6 -%}
+          {%- set c_5 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_c, ['icon'])), 'Size': 24}}, with_context = false) }}
+            {%- set c_3 -%}
+              {%- set c_1 -%}
+                {{ ui_text(ui_get(v_c, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+              {%- set c_2 -%}
+                {{ ui_text(ui_get(v_c, ['text'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Class': 'flex-1'}, 'children': c_3}, with_context = false) }}
+            {%- if ui_t(ui_eq(v_action, 'link')) %}
+              {%- set c_4 -%}
+                {{ ui_text(v_open) }}
+              {%- endset -%}
+              {{ include('blocks/menu-entry.html.twig', {'p': {'href': ui_get(v_c, ['href']), 'className': ui_cnv(['font-semibold']), 'testid': 'open'}, 'children': c_4}, with_context = false) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ include('ui/card/card-content.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-1 gap-4', (ui_t(ui_eq(v_layout, 'list')) ? 'items-center' : 'flex-col')]))}, 'children': c_5}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/card/card.html.twig', {'p': {'Variant': 'default', 'Class': ui_s(ui_cnv(['h-full', (ui_t(ui_eq(v_layout, 'list')) ? 'flex-row items-center' : '')])), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_6}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'list')) ? '1' : v_cols)), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_7}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_8}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/switcher-item.html.twig b/packages/twig/ui/blocks/switcher-item.html.twig
new file mode 100644
index 0000000..e423aeb
--- /dev/null
+++ b/packages/twig/ui/blocks/switcher-item.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/switcher-item.json
+    One item of a Switcher (default or active). Pass the same size and layout as the Switcher.
+    Props (p): active, size, layout, className; children: markup. -#}
+{%- set v_active = (p.active ?? false) -%}
+{%- set v_size = (p.size ?? 'default') -%}
+{%- set v_layout = (p.layout ?? 'text') -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/button-plain/button-plain.html.twig', {'p': {'Type': 'button', 'Role': 'tab', 'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/switcher-item.variants.json', {'size': v_size, 'layout': v_layout, 'state': (ui_t(v_active) ? 'active' : 'default')}), (p.className ?? '')])), 'Attrs': ui_attrs(['aria-selected', v_active, 'tabindex', (ui_t(v_active) ? 0 : -1), 'data-slot', 'switcher-item', 'data-state', (ui_t(v_active) ? 'active' : 'default')])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/switcher.html.twig b/packages/twig/ui/blocks/switcher.html.twig
new file mode 100644
index 0000000..6db586d
--- /dev/null
+++ b/packages/twig/ui/blocks/switcher.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/patterns/switcher.json
+    A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown (horizontal, activate).
+    Props (p): size, layout, label, className; children: markup. -#}
+{%- set v_size = (p.size ?? 'default') -%}
+{%- set v_layout = (p.layout ?? 'text') -%}
+{%- set v_label = (p.label ?? null) -%}
+{%- set c_1 -%}
+  {{ (children ?? '')|raw }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv([ui_recipe('blocks/recipes/switcher.variants.json', {'size': v_size, 'layout': v_layout}), (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'tablist', 'aria-label', v_label, 'data-slot', 'switcher'])}, 'children': c_1}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/table-toolbar.html.twig b/packages/twig/ui/blocks/table-toolbar.html.twig
new file mode 100644
index 0000000..ee8bf67
--- /dev/null
+++ b/packages/twig/ui/blocks/table-toolbar.html.twig
@@ -0,0 +1,16 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/table-toolbar.json
+    The toolbar above a table: search and filter controls on the left (children), the actions on the right (`actions`). One tab stop group (role toolbar).
+    Props (p): label, className, actions (slot); children: markup. -#}
+{%- set v_label = (p.label ?? null) -%}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {{ (children ?? '')|raw }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex min-w-0 flex-wrap items-center gap-2'}, 'children': c_1}, with_context = false) }}
+  {%- set c_2 -%}
+    {{ (p.actions ?? '')|raw }}
+  {%- endset -%}
+  {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'flex flex-wrap items-center gap-2'}, 'children': c_2}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-wrap items-center justify-between gap-2', (p.className ?? '')])), 'Attrs': ui_attrs(['role', 'toolbar', 'aria-label', v_label, 'data-slot', 'table-toolbar'])}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/team-grid.html.twig b/packages/twig/ui/blocks/team-grid.html.twig
new file mode 100644
index 0000000..814624e
--- /dev/null
+++ b/packages/twig/ui/blocks/team-grid.html.twig
@@ -0,0 +1,69 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/team-grid.json
+    The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory), cols, tone, density.
+    Props (p): id, title, lead, members, empty, depts, layout, cols, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_members = (p.members ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_depts = (p.depts ?? null) -%}
+{%- set v_layout = (p.layout ?? 'cards') -%}
+{%- set v_cols = (p.cols ?? '1-4') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set f_11 -%}
+  {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title, 'ratio': '3/4'}}, with_context = false) }}
+{%- endset -%}
+{%- set c_12 -%}
+  {%- if ui_t(ui_eq(ui_len(v_members), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'users', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- for v_m in ui_l(v_members) %}
+        {%- if ui_t(ui_eq(v_layout, 'minimal')) %}
+          {%- set c_3 -%}
+            {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_m, ['name']), 'ratio': '1/1', 'className': ui_cnv([ui_cnv(['size-16', 'shrink-0'])])}}, with_context = false) }}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_m, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_m, ['role'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Class': 'text-center', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_3}, with_context = false) }}
+        {%- elseif ui_t(ui_eq(v_layout, 'cards')) %}
+          {%- set c_9 -%}
+            {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_m, ['name']), 'ratio': '1/1'}}, with_context = false) }}
+            {%- set c_8 -%}
+              {%- set c_6 -%}
+                {%- set c_4 -%}
+                  {{ ui_text(ui_get(v_m, ['name'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_4}, with_context = false) }}
+                {%- set c_5 -%}
+                  {{ ui_text(ui_get(v_m, ['role'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_6}, with_context = false) }}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_m, ['bio'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_8}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_9}, with_context = false) }}
+        {%- else %}
+          {{ include('blocks/member-row.html.twig', {'p': {'member': v_m, 'depts': v_depts, 'layout': v_layout}}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s((ui_t(ui_eq(v_layout, 'minimal')) ? 'grid grid-cols-2 gap-8 md:grid-cols-4' : (ui_t(ui_eq(v_layout, 'directory')) ? 'grid grid-cols-1 gap-4 md:grid-cols-2' : (ui_t(ui_eq(v_layout, 'list')) ? 'flex flex-col gap-4' : (ui_t(ui_eq(v_cols, '1-3')) ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3' : 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4'))))), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_10}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'layout': (ui_t(ui_eq(v_layout, 'list')) ? 'split' : 'stack'), 'media': {'show': ui_eq(v_layout, 'list'), 'side': 'start', 'align': 'start'}, 'landmarkLabel': v_landmarkLabel, 'aside': f_11}, 'children': c_12}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/template-grid.html.twig b/packages/twig/ui/blocks/template-grid.html.twig
new file mode 100644
index 0000000..78a6e13
--- /dev/null
+++ b/packages/twig/ui/blocks/template-grid.html.twig
@@ -0,0 +1,103 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/template-grid.json
+    Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all button.
+    Props (p): id, title, templates, filters, browseHref, labels, cols, tone, density, empty, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_templates = (p.templates ?? null) -%}
+{%- set v_filters = (p.filters ?? null) -%}
+{%- set v_browseHref = (p.browseHref ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_cols = (p.cols ?? '1-4') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'compact') -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_21 -%}
+  {%- set c_20 -%}
+    {%- set c_4 -%}
+      {%- set c_1 -%}
+        {{ ui_text(v_title) }}
+      {%- endset -%}
+      {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(2), 'Size': '2xl', 'Weight': 'semibold', 'Class': 'leading-9', 'Attrs': ui_attrs(['id', ui_add(v_id, '-title')])}, 'children': c_1}, with_context = false) }}
+      {%- if ui_t(ui_gt(ui_len(v_filters), 0)) %}
+        {%- set c_3 -%}
+          {%- for v_f in ui_l(v_filters) %}
+            {%- set c_2 -%}
+              {%- if ui_t(ui_get(v_f, ['icon'])) %}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_f, ['icon'])), 'Size': 16}}, with_context = false) }}
+              {%- endif %}
+              {{ ui_text(ui_get(v_f, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Type': 'button', 'Class': 'gap-2', 'Attrs': ui_attrs(['data-testid', 'template-filter'])}, 'children': c_2}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'flex-wrap', 'Attrs': ui_attrs(['role', 'group', 'aria-label', ui_get(v_labels, ['filters']), 'data-testid', 'template-filters'])}, 'children': c_3}, with_context = false) }}
+      {%- endif %}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Justify': 'between', 'Class': 'h-8 w-full flex-wrap'}, 'children': c_4}, with_context = false) }}
+    {%- if ui_t(ui_eq(ui_len(v_templates), 0)) %}
+      {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'layout-template', 'title': v_empty}}, with_context = false) }}
+    {%- else %}
+      {%- set c_18 -%}
+        {%- for v_t in ui_l(v_templates) %}
+          {%- set c_17 -%}
+            {%- set c_5 -%}
+              {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_t, ['title']), 'className': ui_cnv([ui_cnv(['size-full', ui_preset('blocks/presets/defaults.json', ['media', 'rounded'])])])}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['shrink-0 overflow-hidden', ui_preset('blocks/presets/defaults.json', ['templates', 'image'])]))}, 'children': c_5}, with_context = false) }}
+            {%- set c_16 -%}
+              {%- set c_6 -%}
+                {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'layout-template', 'Size': 16}}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/iconbadge/icon-badge.html.twig', {'p': {'Size': 'sm', 'Class': 'overflow-hidden', 'Attrs': ui_attrs(['data-testid', 'template-avatar'])}, 'children': c_6}, with_context = false) }}
+              {%- set c_15 -%}
+                {%- set c_7 -%}
+                  {{ ui_text(ui_get(v_t, ['title'])) }}
+                {%- endset -%}
+                {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'semibold', 'Class': 'truncate leading-6'}, 'children': c_7}, with_context = false) }}
+                {%- set c_14 -%}
+                  {%- set c_10 -%}
+                    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'eye', 'Size': 16}}, with_context = false) }}
+                    {%- set c_8 -%}
+                      {{ ui_text(ui_get(v_labels, ['views'])) }}
+                    {%- endset -%}
+                    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_8}, with_context = false) }}
+                    {%- set c_9 -%}
+                      {{ ui_text(ui_get(v_t, ['views'])) }}
+                    {%- endset -%}
+                    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-4'}, 'children': c_9}, with_context = false) }}
+                  {%- endset -%}
+                  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_10}, with_context = false) }}
+                  {%- set c_13 -%}
+                    {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'heart', 'Size': 16}}, with_context = false) }}
+                    {%- set c_11 -%}
+                      {{ ui_text(ui_get(v_labels, ['likes'])) }}
+                    {%- endset -%}
+                    {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_11}, with_context = false) }}
+                    {%- set c_12 -%}
+                      {{ ui_text(ui_get(v_t, ['likes'])) }}
+                    {%- endset -%}
+                    {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Weight': 'bold', 'Class': 'leading-4'}, 'children': c_12}, with_context = false) }}
+                  {%- endset -%}
+                  {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center'}, 'children': c_13}, with_context = false) }}
+                {%- endset -%}
+                {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': 'h-4 text-muted-foreground'}, 'children': c_14}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0', 'Class': 'min-w-0 flex-1'}, 'children': c_15}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/group/group.html.twig', {'p': {'Gap': '4', 'Align': 'center', 'Class': ui_s(ui_cnv(['w-full', ui_preset('blocks/presets/defaults.json', ['templates', 'footer'])])), 'Attrs': ui_attrs(['data-testid', 'template-footer'])}, 'children': c_16}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border', ui_preset('blocks/presets/defaults.json', ['templates', 'card'])])), 'Attrs': ui_attrs(['data-testid', 'template-card'])}, 'children': c_17}, with_context = false) }}
+        {%- endfor %}
+      {%- endset -%}
+      {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s(v_cols), 'Class': 'w-full gap-6', 'Attrs': ui_attrs(['data-testid', 'template-grid'])}, 'children': c_18}, with_context = false) }}
+    {%- endif %}
+    {%- set c_19 -%}
+      {{ ui_text(ui_get(v_labels, ['browse'])) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'sm', 'Href': ui_s(v_browseHref), 'Class': 'w-full', 'Attrs': ui_attrs(['data-testid', 'template-browse'])}, 'children': c_19}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '8', 'Align': 'stretch'}, 'children': c_20}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'tone': v_tone, 'density': v_density, 'measure': 'fill', 'className': ui_cnv(['py-0']), 'landmarkLabel': v_landmarkLabel}, 'children': c_21}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/testimonial-grid.html.twig b/packages/twig/ui/blocks/testimonial-grid.html.twig
new file mode 100644
index 0000000..24d10dd
--- /dev/null
+++ b/packages/twig/ui/blocks/testimonial-grid.html.twig
@@ -0,0 +1,38 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/testimonial-grid.json
+    Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card, plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the Carousel port contract around the single layout.
+    Props (p): id, title, quotes, empty, labels, layout, cols, item, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_quotes = (p.quotes ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'grid') -%}
+{%- set v_cols = (p.cols ?? '1-3') -%}
+{%- set v_item = (p.item ?? null) -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_3 -%}
+  {%- if ui_t(ui_eq(ui_len(v_quotes), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'message-square-quote', 'title': v_empty}}, with_context = false) }}
+  {%- elseif ui_t(ui_or([ui_eq(v_layout, 'masonry'), ui_eq(v_layout, 'strip')])) %}
+    {%- set c_1 -%}
+      {%- for v_q in ui_l(v_quotes) %}
+        {{ include('blocks/quote-card.html.twig', {'p': {'q': v_q, 'labels': v_labels, 'item': v_item, 'layout': v_layout}}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/block/block.html.twig', {'p': {'Tag': 'div', 'Class': ui_s((ui_t(ui_eq(v_layout, 'masonry')) ? 'columns-1 gap-4 md:columns-2 xl:columns-3' : 'flex snap-x gap-4 overflow-x-auto pb-2')), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_1}, with_context = false) }}
+  {%- else %}
+    {%- set c_2 -%}
+      {%- for v_q in ui_l(v_quotes) %}
+        {%- set v_i = loop.index0 -%}
+        {%- if ui_t(ui_or([not (ui_eq(v_layout, 'single')), ui_eq(v_i, 0)])) %}
+          {{ include('blocks/quote-card.html.twig', {'p': {'q': v_q, 'labels': v_labels, 'item': v_item, 'layout': v_layout}}, with_context = false) }}
+        {%- endif %}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s((ui_t(ui_eq(v_layout, 'grid')) ? v_cols : '1')), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_2}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'align': (ui_t(ui_eq(v_layout, 'single')) ? 'center' : 'start'), 'measure': (ui_t(ui_eq(v_layout, 'grid')) ? 'default' : '2xl'), 'landmarkLabel': v_landmarkLabel}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/timeline.html.twig b/packages/twig/ui/blocks/timeline.html.twig
new file mode 100644
index 0000000..ceabde1
--- /dev/null
+++ b/packages/twig/ui/blocks/timeline.html.twig
@@ -0,0 +1,45 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/parts/timeline.json
+    A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time. Newest first or oldest first is the caller's order.
+    Props (p): items, className. -#}
+{%- set k_TONE_DOT = {'gray': 'bg-muted-foreground', 'green': 'bg-emerald-500', 'blue': 'bg-blue-500', 'amber': 'bg-amber-500', 'red': 'bg-red-500'} -%}
+{%- set v_items = (p.items ?? null) -%}
+{%- set c_9 -%}
+  {%- set c_8 -%}
+    {%- for v_item in ui_l(v_items) %}
+      {%- set v_i = loop.index0 -%}
+      {%- set c_7 -%}
+        {%- set c_1 -%}
+          {%- if ui_t(ui_lt(v_i, ui_sub(ui_len(v_items), 1))) %}
+            {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'absolute top-4 -bottom-0 w-px bg-border'}}, with_context = false) }}
+          {%- endif %}
+          {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s(ui_cnv(['mt-2 size-2 rounded-full', ui_at(k_TONE_DOT, ui_coalesce([ui_get(v_item, ['tone']), 'gray']))]))}}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'relative flex w-2 shrink-0 justify-center'}, 'children': c_1}, with_context = false) }}
+        {%- set c_6 -%}
+          {%- set c_4 -%}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_item, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-sm font-bold text-foreground'}, 'children': c_2}, with_context = false) }}
+            {%- set c_3 -%}
+              {{ ui_text(ui_get(v_item, ['time'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 shrink-0 text-xs font-medium text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex flex-wrap items-baseline justify-between gap-x-4'}, 'children': c_4}, with_context = false) }}
+          {%- if ui_t(ui_get(v_item, ['text'])) %}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_item, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Class': 'm-0 text-xs font-medium text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex min-w-0 flex-1 flex-col gap-0'}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'relative flex min-w-0 gap-4 pb-4 last:pb-0', 'Attrs': ui_attrs(['data-event', ui_get(v_item, ['id'])])}, 'children': c_7}, with_context = false) }}
+    {%- endfor %}
+  {%- endset -%}
+  {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col p-0'}, 'children': c_8}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': ui_s(ui_cnv(['min-w-0', (p.className ?? '')])), 'Attrs': ui_attrs(['data-slot', 'timeline'])}, 'children': c_9}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/topic-chips.html.twig b/packages/twig/ui/blocks/topic-chips.html.twig
new file mode 100644
index 0000000..a4cca29
--- /dev/null
+++ b/packages/twig/ui/blocks/topic-chips.html.twig
@@ -0,0 +1,25 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/topic-chips.json
+    A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band with an icon per topic; default: outlined.
+    Props (p): topics, tone. -#}
+{%- set v_topics = (p.topics ?? null) -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set c_3 -%}
+  {%- for v_topic in ui_l(v_topics) %}
+    {%- if ui_t(ui_eq(v_tone, 'inverse')) %}
+      {%- set c_1 -%}
+        {%- if ui_t(ui_get(v_topic, ['icon'])) %}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_topic, ['icon'])), 'Size': 16}}, with_context = false) }}
+        {%- endif %}
+        {{ ui_text(ui_get(v_topic, ['name'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Href': ui_s(ui_get(v_topic, ['href'])), 'Variant': 'ghost', 'Size': 'sm', 'Class': 'gap-2 text-background inset-ring-background/30 hover:bg-background/10', 'Attrs': ui_attrs(['data-testid', 'hero-topic'])}, 'children': c_1}, with_context = false) }}
+    {%- else %}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_topic, ['name'])) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Href': ui_s(ui_get(v_topic, ['href'])), 'Variant': 'outline', 'Size': 'sm', 'Attrs': ui_attrs(['data-testid', 'hero-topic'])}, 'children': c_2}, with_context = false) }}
+    {%- endif %}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'center', 'Class': 'flex-wrap', 'Attrs': ui_attrs(['data-testid', 'hero-topics'])}, 'children': c_3}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/tour-callout.html.twig b/packages/twig/ui/blocks/tour-callout.html.twig
new file mode 100644
index 0000000..4618c96
--- /dev/null
+++ b/packages/twig/ui/blocks/tour-callout.html.twig
@@ -0,0 +1,51 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/tour-callout.json
+    One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target), tone, density.
+    Props (p): id, title, text, target, position, skip, next, placement, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_target = (p.target ?? null) -%}
+{%- set v_position = (p.position ?? null) -%}
+{%- set v_skip = (p.skip ?? null) -%}
+{%- set v_next = (p.next ?? null) -%}
+{%- set v_placement = (p.placement ?? 'below') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_10 -%}
+  {%- set c_9 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_target) }}
+    {%- endset -%}
+    {{ include('ui/button/button.html.twig', {'p': {'Variant': 'outline', 'Size': 'default', 'Type': 'button', 'Class': 'inset-ring-foreground', 'Attrs': ui_attrs(['data-testid', 'tour-target'])}, 'children': c_1}, with_context = false) }}
+    {%- set c_8 -%}
+      {%- set c_2 -%}
+        {{ ui_text(v_position) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+      {%- set c_3 -%}
+        {{ ui_text(v_title) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'base', 'Weight': 'semibold'}, 'children': c_3}, with_context = false) }}
+      {%- set c_4 -%}
+        {{ ui_text(v_text) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+      {%- set c_7 -%}
+        {%- set c_5 -%}
+          {{ ui_text(v_skip) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Type': 'button'}, 'children': c_5}, with_context = false) }}
+        {%- set c_6 -%}
+          {{ ui_text(v_next) }}
+        {%- endset -%}
+        {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'sm', 'Type': 'button'}, 'children': c_6}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Justify': 'end'}, 'children': c_7}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv(['w-full max-w-sm', 'rounded bg-card inset-ring inset-ring-border', 'p-4', 'shadow-md'])), 'Attrs': ui_attrs(['role', 'group', 'aria-label', v_title, 'data-testid', 'tour-callout'])}, 'children': c_8}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'div', 'Class': ui_s(ui_cnv(['flex gap-4', (ui_t(ui_eq(v_placement, 'end')) ? 'flex-col items-start md:flex-row md:items-center' : (ui_t(ui_eq(v_placement, 'above')) ? 'flex-col-reverse items-start' : 'flex-col items-start'))])), 'Attrs': ui_attrs(['data-testid', 'tour', 'data-placement', v_placement])}, 'children': c_9}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_10}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/usage-calculator.html.twig b/packages/twig/ui/blocks/usage-calculator.html.twig
new file mode 100644
index 0000000..333098f
--- /dev/null
+++ b/packages/twig/ui/blocks/usage-calculator.html.twig
@@ -0,0 +1,65 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/usage-calculator.json
+    A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the largest amount under the slider, hide), tone.
+    Props (p): id, title, text, usage, slider, price, cta, href, layout, ends, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_usage = (p.usage ?? null) -%}
+{%- set v_slider = (p.slider ?? null) -%}
+{%- set v_price = (p.price ?? null) -%}
+{%- set v_cta = (p.cta ?? null) -%}
+{%- set v_href = (p.href ?? null) -%}
+{%- set v_layout = (p.layout ?? 'card') -%}
+{%- set v_ends = (p.ends ?? 'show') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_13 -%}
+  {%- set c_12 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(ui_tpl(ui_get(v_slider, ['unit']), [v_usage])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'xl', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ ui_text(ui_get(v_slider, ['label'])) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Justify': 'between', 'Align': 'baseline'}, 'children': c_3}, with_context = false) }}
+    {{ include('ui/range/range.html.twig', {'p': {'Min': ui_i(ui_get(v_slider, ['min'])), 'Max': ui_i(ui_get(v_slider, ['max'])), 'Value': ui_s(v_usage), 'AriaLabel': ui_s(ui_get(v_slider, ['label'])), 'Attrs': ui_attrs(['data-testid', 'slider'])}}, with_context = false) }}
+    {%- if ui_t(ui_eq(v_ends, 'show')) %}
+      {%- set c_6 -%}
+        {%- set c_4 -%}
+          {{ ui_text(ui_tpl(ui_get(v_slider, ['unit']), [ui_get(v_slider, ['min'])])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_4}, with_context = false) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_tpl(ui_get(v_slider, ['unit']), [ui_get(v_slider, ['max'])])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/group/group.html.twig', {'p': {'Justify': 'between', 'Attrs': ui_attrs(['data-testid', 'ends'])}, 'children': c_6}, with_context = false) }}
+    {%- endif %}
+    {%- set c_11 -%}
+      {%- set c_9 -%}
+        {%- set c_7 -%}
+          {{ ui_text(ui_get(v_price, ['label'])) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+        {%- set c_8 -%}
+          {{ ui_text(ui_money(ui_mul(v_usage, ui_get(v_price, ['rate'])), ui_get(v_price, ['currency']))) }}
+        {%- endset -%}
+        {{ include('ui/text/text.html.twig', {'p': {'Size': '4xl', 'Weight': 'bold', 'Attrs': ui_attrs(['data-testid', 'estimate'])}, 'children': c_8}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_9}, with_context = false) }}
+      {%- set c_10 -%}
+        {{ ui_text(v_cta) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Href': ui_s(v_href), 'Attrs': ui_attrs(['data-testid', 'submit'])}, 'children': c_10}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Justify': 'between', 'Align': 'center', 'Class': 'flex-wrap'}, 'children': c_11}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv(['mx-auto w-full max-w-xl', (ui_t(ui_eq(v_layout, 'card')) ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')])), 'Attrs': ui_attrs(['data-testid', 'usage'])}, 'children': c_12}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_text, 'tone': v_tone, 'align': 'center', 'landmarkLabel': v_landmarkLabel}, 'children': c_13}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/usp-strip.html.twig b/packages/twig/ui/blocks/usp-strip.html.twig
new file mode 100644
index 0000000..1889a3e
--- /dev/null
+++ b/packages/twig/ui/blocks/usp-strip.html.twig
@@ -0,0 +1,56 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/usp-strip.json
+    The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted panel, cards: a card each, bar: a thin line of icons and titles), tone, density.
+    Props (p): id, title, perks, empty, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? '') -%}
+{%- set v_perks = (p.perks ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_layout = (p.layout ?? 'strip') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_10 -%}
+  {%- if ui_t(ui_eq(ui_len(v_perks), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'truck', 'title': v_empty}}, with_context = false) }}
+  {%- elseif ui_t(ui_eq(v_layout, 'bar')) %}
+    {%- set c_3 -%}
+      {%- for v_p in ui_l(v_perks) %}
+        {%- set c_2 -%}
+          {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 16}}, with_context = false) }}
+          {%- set c_1 -%}
+            {{ ui_text(ui_get(v_p, ['title'])) }}
+          {%- endset -%}
+          {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_1}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center gap-2 text-sm font-medium', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_2}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-wrap items-center justify-center gap-x-8 gap-y-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_3}, with_context = false) }}
+  {%- else %}
+    {%- set c_9 -%}
+      {%- for v_p in ui_l(v_perks) %}
+        {%- set c_8 -%}
+          {%- set c_4 -%}
+            {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': ui_s(ui_get(v_p, ['icon'])), 'Size': 20}}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'flex size-10 shrink-0 items-center justify-center rounded bg-muted'}, 'children': c_4}, with_context = false) }}
+          {%- set c_7 -%}
+            {%- set c_5 -%}
+              {{ ui_text(ui_get(v_p, ['title'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_5}, with_context = false) }}
+            {%- set c_6 -%}
+              {{ ui_text(ui_get(v_p, ['text'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_6}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_7}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Class': ui_s((ui_t(ui_eq(v_layout, 'cards')) ? 'rounded bg-card inset-ring inset-ring-border p-6' : '')), 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_8}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-4', 'Class': ui_s(ui_cnv(['gap-4', (ui_t(ui_eq(v_layout, 'strip')) ? 'rounded bg-muted p-6' : '')])), 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_9}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_10}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/video-grid.html.twig b/packages/twig/ui/blocks/video-grid.html.twig
new file mode 100644
index 0000000..b7870bd
--- /dev/null
+++ b/packages/twig/ui/blocks/video-grid.html.twig
@@ -0,0 +1,64 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/video-grid.json
+    Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone, density.
+    Props (p): id, title, quotes, empty, playLabel, byLine, cols, caption, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_quotes = (p.quotes ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_playLabel = (p.playLabel ?? null) -%}
+{%- set v_byLine = (p.byLine ?? null) -%}
+{%- set v_cols = (p.cols ?? '1-3') -%}
+{%- set v_caption = (p.caption ?? 'below') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_11 -%}
+  {%- if ui_t(ui_eq(ui_len(v_quotes), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'video', 'title': v_empty}}, with_context = false) }}
+  {%- else %}
+    {%- set c_10 -%}
+      {%- for v_q in ui_l(v_quotes) %}
+        {%- set c_9 -%}
+          {%- set c_5 -%}
+            {{ include('blocks/media-frame.html.twig', {'p': {'alt': ui_get(v_q, ['author'])}}, with_context = false) }}
+            {%- set c_1 -%}
+              {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'play', 'Size': 20}}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'button', 'Class': 'absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0', 'Attrs': ui_attrs(['aria-label', ui_tpl(v_playLabel, [ui_get(v_q, ['author'])]), 'data-testid', 'play'])}, 'children': c_1}, with_context = false) }}
+            {%- if ui_t(ui_eq(v_caption, 'overlay')) %}
+              {%- set c_4 -%}
+                {%- set c_2 -%}
+                  {{ ui_text(ui_get(v_q, ['author'])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_2}, with_context = false) }}
+                {%- set c_3 -%}
+                  {{ ui_text(ui_tpl(v_byLine, [ui_get(v_q, ['role']), ui_get(v_q, ['company'])])) }}
+                {%- endset -%}
+                {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_3}, with_context = false) }}
+              {%- endset -%}
+              {{ include('ui/box/box.html.twig', {'p': {'Class': 'absolute inset-x-0 bottom-0 rounded bg-background p-4', 'Attrs': ui_attrs(['data-testid', 'caption'])}, 'children': c_4}, with_context = false) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ include('ui/box/box.html.twig', {'p': {'Class': 'relative'}, 'children': c_5}, with_context = false) }}
+          {%- if ui_t(ui_eq(v_caption, 'below')) %}
+            {%- set c_8 -%}
+              {%- set c_6 -%}
+                {{ ui_text(ui_get(v_q, ['author'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_6}, with_context = false) }}
+              {%- set c_7 -%}
+                {{ ui_text(ui_tpl(v_byLine, [ui_get(v_q, ['role']), ui_get(v_q, ['company'])])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_7}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Tag': 'figcaption', 'Attrs': ui_attrs(['data-testid', 'caption'])}, 'children': c_8}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('blocks/figure-block.html.twig', {'p': {'className': ui_cnv(['m-0 flex flex-col gap-4']), 'testid': 'item'}, 'children': c_9}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': ui_s(v_cols), 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_10}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_11}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/video-modal.html.twig b/packages/twig/ui/blocks/video-modal.html.twig
new file mode 100644
index 0000000..d4415e3
--- /dev/null
+++ b/packages/twig/ui/blocks/video-modal.html.twig
@@ -0,0 +1,65 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/video-modal.json
+    A dialog with a walkthrough video: a title and a close button, the player area with a play button and, optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size (default, wide), outline (none, chapters: a list under the player), tone.
+    Props (p): id, title, text, close, play, chaptersTitle, chapters, size, outline, tone, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_text = (p.text ?? null) -%}
+{%- set v_close = (p.close ?? null) -%}
+{%- set v_play = (p.play ?? null) -%}
+{%- set v_chaptersTitle = (p.chaptersTitle ?? null) -%}
+{%- set v_chapters = (p.chapters ?? null) -%}
+{%- set v_size = (p.size ?? 'default') -%}
+{%- set v_outline = (p.outline ?? 'none') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_13 -%}
+  {%- set c_12 -%}
+    {%- set c_3 -%}
+      {%- set c_1 -%}
+        {{ ui_text(v_text) }}
+      {%- endset -%}
+      {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_1}, with_context = false) }}
+      {%- set c_2 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'x', 'Size': 16}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'ghost', 'Size': 'sm', 'Type': 'button', 'Class': 'shrink-0', 'Attrs': ui_attrs(['aria-label', v_close, 'data-testid', 'modal-close'])}, 'children': c_2}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/group/group.html.twig', {'p': {'Gap': '2', 'Align': 'center', 'Justify': 'between'}, 'children': c_3}, with_context = false) }}
+    {%- set c_5 -%}
+      {{ include('blocks/media-frame.html.twig', {'p': {'alt': v_title}}, with_context = false) }}
+      {%- set c_4 -%}
+        {{ include('ui/lucide-icon/lucide-icon.html.twig', {'p': {'Name': 'play', 'Size': 24}}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/button/button.html.twig', {'p': {'Variant': 'default', 'Size': 'default', 'Type': 'button', 'Class': 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded', 'Attrs': ui_attrs(['aria-label', v_play, 'data-testid', 'play'])}, 'children': c_4}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/box/box.html.twig', {'p': {'Class': 'relative', 'Attrs': ui_attrs(['data-testid', 'player'])}, 'children': c_5}, with_context = false) }}
+    {%- if ui_t(ui_and([ui_eq(v_outline, 'chapters'), ui_gt(ui_len(v_chapters), 0)])) %}
+      {%- set c_11 -%}
+        {%- set c_6 -%}
+          {{ ui_text(v_chaptersTitle) }}
+        {%- endset -%}
+        {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'base', 'Weight': 'bold'}, 'children': c_6}, with_context = false) }}
+        {%- set c_10 -%}
+          {%- for v_c in ui_l(v_chapters) %}
+            {%- set c_9 -%}
+              {%- set c_7 -%}
+                {{ ui_text(ui_get(v_c, ['title'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_7}, with_context = false) }}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_c, ['text'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_8}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-baseline gap-4', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_9}, with_context = false) }}
+          {%- endfor %}
+        {%- endset -%}
+        {{ include('ui/list/list.html.twig', {'p': {'Class': 'm-0 flex list-none flex-col gap-2 p-0'}, 'children': c_10}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2', 'Attrs': ui_attrs(['data-testid', 'chapters'])}, 'children': c_11}, with_context = false) }}
+    {%- endif %}
+  {%- endset -%}
+  {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Align': 'stretch', 'Class': ui_s(ui_cnv(['mx-auto w-full', (ui_t(ui_eq(v_size, 'wide')) ? 'max-w-4xl' : 'max-w-2xl'), 'rounded bg-card inset-ring inset-ring-border p-4 shadow-lg'])), 'Attrs': ui_attrs(['role', 'dialog', 'aria-label', v_title, 'data-testid', 'video-modal'])}, 'children': c_12}, with_context = false) }}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'tone': v_tone, 'landmarkLabel': v_landmarkLabel}, 'children': c_13}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/weighted-title.html.twig b/packages/twig/ui/blocks/weighted-title.html.twig
new file mode 100644
index 0000000..1501e33
--- /dev/null
+++ b/packages/twig/ui/blocks/weighted-title.html.twig
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/weighted-title.json
+    A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text.
+    Props (p): id, title, weights, level. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_weights = (p.weights ?? null) -%}
+{%- set v_level = (p.level ?? 1) -%}
+{%- set c_2 -%}
+  {%- for v_word in ui_l(ui_words(v_title)) %}
+    {%- set v_i = loop.index0 -%}
+    {%- set c_1 -%}
+      {{ ui_text(v_word) }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {'Class': ui_s(ui_nth(v_weights, v_i))}, 'children': c_1}, with_context = false) }}
+    {{ ui_text(' ') }}
+  {%- endfor %}
+{%- endset -%}
+{{ include('ui/title/title.html.twig', {'p': {'As': ui_i(v_level), 'Size': '5xl', 'Weight': 'semibold', 'Class': ui_s(ui_cnv(['text-center tracking-tight text-background', ui_preset('blocks/presets/defaults.json', ['hero', 'title'])])), 'Attrs': ui_attrs(['id', v_id])}, 'children': c_2}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/zone-rows.html.twig b/packages/twig/ui/blocks/zone-rows.html.twig
new file mode 100644
index 0000000..5b739fe
--- /dev/null
+++ b/packages/twig/ui/blocks/zone-rows.html.twig
@@ -0,0 +1,93 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/zone-rows.json
+    The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the minimum order, the time and an express badge.
+    Props (p): zones, labels. -#}
+{%- set v_zones = (p.zones ?? null) -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set c_23 -%}
+  {%- set c_22 -%}
+    {%- set c_1 -%}
+      {{ ui_text(ui_get(v_labels, ['caption'])) }}
+    {%- endset -%}
+    {{ include('ui/table/table-caption.html.twig', {'p': {'Class': 'sr-only'}, 'children': c_1}, with_context = false) }}
+    {%- set c_9 -%}
+      {%- set c_8 -%}
+        {%- set c_2 -%}
+          {{ ui_text(ui_get(v_labels, ['zone'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'px-4 py-2'}, 'children': c_2}, with_context = false) }}
+        {%- set c_3 -%}
+          {{ ui_text(ui_get(v_labels, ['price'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_3}, with_context = false) }}
+        {%- set c_4 -%}
+          {{ ui_text(ui_get(v_labels, ['freeFrom'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_4}, with_context = false) }}
+        {%- set c_5 -%}
+          {{ ui_text(ui_get(v_labels, ['minOrder'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'hidden py-2 md:table-cell'}, 'children': c_5}, with_context = false) }}
+        {%- set c_6 -%}
+          {{ ui_text(ui_get(v_labels, ['time'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'py-2'}, 'children': c_6}, with_context = false) }}
+        {%- set c_7 -%}
+          {{ ui_text(ui_get(v_labels, ['express'])) }}
+        {%- endset -%}
+        {{ include('ui/table/table-head-cell.html.twig', {'p': {'Scope': 'col', 'Class': 'hidden py-2 pr-4 sm:table-cell'}, 'children': c_7}, with_context = false) }}
+      {%- endset -%}
+      {{ include('ui/table/table-row.html.twig', {'p': {}, 'children': c_8}, with_context = false) }}
+    {%- endset -%}
+    {{ include('ui/table/table-head.html.twig', {'p': {'Class': 'bg-muted'}, 'children': c_9}, with_context = false) }}
+    {%- set c_21 -%}
+      {%- for v_z in ui_l(v_zones) %}
+        {%- set c_20 -%}
+          {%- set c_13 -%}
+            {%- set c_12 -%}
+              {%- set c_10 -%}
+                {{ ui_text(ui_get(v_z, ['name'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Weight': 'semibold'}, 'children': c_10}, with_context = false) }}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_z, ['area'])) }}
+              {%- endset -%}
+              {{ include('ui/text/text.html.twig', {'p': {'Size': 'xs', 'Class': 'text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '0'}, 'children': c_12}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'px-4 py-4'}, 'children': c_13}, with_context = false) }}
+          {%- set c_14 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['price']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'font-medium'}, 'children': c_14}, with_context = false) }}
+          {%- set c_15 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['freeFrom']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {}, 'children': c_15}, with_context = false) }}
+          {%- set c_16 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['minOrder']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'hidden md:table-cell'}, 'children': c_16}, with_context = false) }}
+          {%- set c_17 -%}
+            {{ ui_text(ui_get(v_z, ['time'])) }}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {}, 'children': c_17}, with_context = false) }}
+          {%- set c_19 -%}
+            {%- if ui_t(ui_get(v_z, ['express'])) %}
+              {%- set c_18 -%}
+                {{ ui_text(ui_get(v_z, ['express'])) }}
+              {%- endset -%}
+              {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'default'}, 'children': c_18}, with_context = false) }}
+            {%- endif %}
+          {%- endset -%}
+          {{ include('ui/table/table-cell.html.twig', {'p': {'Class': 'hidden pr-4 sm:table-cell'}, 'children': c_19}, with_context = false) }}
+        {%- endset -%}
+        {{ include('ui/table/table-row.html.twig', {'p': {'Class': 'border-t border-border', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_20}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/table/table-body.html.twig', {'p': {}, 'children': c_21}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/table/table.html.twig', {'p': {'Class': 'w-full text-left text-sm', 'Attrs': ui_attrs(['data-testid', 'zone-table'])}, 'children': c_22}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'w-full overflow-x-auto rounded inset-ring inset-ring-border'}, 'children': c_23}, with_context = false) }}
diff --git a/packages/twig/ui/blocks/zone-table.html.twig b/packages/twig/ui/blocks/zone-table.html.twig
new file mode 100644
index 0000000..0b7e4ee
--- /dev/null
+++ b/packages/twig/ui/blocks/zone-table.html.twig
@@ -0,0 +1,88 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/organisms/zone-table.json
+    Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.
+    Props (p): id, title, lead, zones, empty, labels, layout, tone, density, landmarkLabel. -#}
+{%- set v_id = (p.id ?? null) -%}
+{%- set v_title = (p.title ?? null) -%}
+{%- set v_lead = (p.lead ?? '') -%}
+{%- set v_zones = (p.zones ?? null) -%}
+{%- set v_empty = (p.empty ?? '') -%}
+{%- set v_labels = (p.labels ?? null) -%}
+{%- set v_layout = (p.layout ?? 'table') -%}
+{%- set v_tone = (p.tone ?? 'default') -%}
+{%- set v_density = (p.density ?? 'default') -%}
+{%- set v_landmarkLabel = (p.landmarkLabel ?? null) -%}
+{%- set c_18 -%}
+  {%- if ui_t(ui_eq(ui_len(v_zones), 0)) %}
+    {{ include('blocks/empty-state.html.twig', {'p': {'icon': 'map', 'title': v_empty}}, with_context = false) }}
+  {%- elseif ui_t(ui_eq(v_layout, 'table')) %}
+    {{ include('blocks/zone-rows.html.twig', {'p': {'zones': v_zones, 'labels': v_labels}}, with_context = false) }}
+  {%- else %}
+    {%- set c_17 -%}
+      {%- for v_z in ui_l(v_zones) %}
+        {%- set c_16 -%}
+          {%- set c_3 -%}
+            {%- set c_1 -%}
+              {{ ui_text(ui_get(v_z, ['name'])) }}
+            {%- endset -%}
+            {{ include('ui/title/title.html.twig', {'p': {'As': ui_i(3), 'Size': 'lg', 'Weight': 'bold'}, 'children': c_1}, with_context = false) }}
+            {%- set c_2 -%}
+              {{ ui_text(ui_get(v_z, ['area'])) }}
+            {%- endset -%}
+            {{ include('ui/text/text.html.twig', {'p': {'Size': 'sm', 'Class': 'text-muted-foreground'}, 'children': c_2}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '2'}, 'children': c_3}, with_context = false) }}
+          {%- set c_4 -%}
+            {{ ui_text(ui_money(ui_get(v_z, ['price']), ui_get(v_z, ['currency']))) }}
+          {%- endset -%}
+          {{ include('ui/text/text.html.twig', {'p': {'Size': '3xl', 'Weight': 'bold'}, 'children': c_4}, with_context = false) }}
+          {%- set c_14 -%}
+            {%- set c_7 -%}
+              {%- set c_5 -%}
+                {{ ui_text(ui_get(v_labels, ['freeFrom'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-muted-foreground'}, 'children': c_5}, with_context = false) }}
+              {%- set c_6 -%}
+                {{ ui_text(ui_money(ui_get(v_z, ['freeFrom']), ui_get(v_z, ['currency']))) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'font-medium'}, 'children': c_6}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_7}, with_context = false) }}
+            {%- set c_10 -%}
+              {%- set c_8 -%}
+                {{ ui_text(ui_get(v_labels, ['minOrder'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-muted-foreground'}, 'children': c_8}, with_context = false) }}
+              {%- set c_9 -%}
+                {{ ui_text(ui_money(ui_get(v_z, ['minOrder']), ui_get(v_z, ['currency']))) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'font-medium'}, 'children': c_9}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_10}, with_context = false) }}
+            {%- set c_13 -%}
+              {%- set c_11 -%}
+                {{ ui_text(ui_get(v_labels, ['time'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'text-muted-foreground'}, 'children': c_11}, with_context = false) }}
+              {%- set c_12 -%}
+                {{ ui_text(ui_get(v_z, ['time'])) }}
+              {%- endset -%}
+              {{ include('ui/inline/inline.html.twig', {'p': {'Class': 'font-medium'}, 'children': c_12}, with_context = false) }}
+            {%- endset -%}
+            {{ include('ui/list/list-item.html.twig', {'p': {'Class': 'flex items-center justify-between gap-4 text-sm'}, 'children': c_13}, with_context = false) }}
+          {%- endset -%}
+          {{ include('ui/list/list.html.twig', {'p': {'Tag': 'ul', 'Class': 'flex flex-col gap-2 border-t border-border pt-4'}, 'children': c_14}, with_context = false) }}
+          {%- if ui_t(ui_get(v_z, ['express'])) %}
+            {%- set c_15 -%}
+              {{ ui_text(ui_get(v_z, ['express'])) }}
+            {%- endset -%}
+            {{ include('ui/badge/badge.html.twig', {'p': {'Variant': 'secondary', 'Size': 'default', 'Class': 'w-fit'}, 'children': c_15}, with_context = false) }}
+          {%- endif %}
+        {%- endset -%}
+        {{ include('ui/stack/stack.html.twig', {'p': {'Gap': '4', 'Class': 'rounded bg-card inset-ring inset-ring-border p-6', 'Attrs': ui_attrs(['data-testid', 'item'])}, 'children': c_16}, with_context = false) }}
+      {%- endfor %}
+    {%- endset -%}
+    {{ include('ui/grid/grid.html.twig', {'p': {'Cols': '1-3', 'Class': 'gap-4', 'Attrs': ui_attrs(['data-testid', 'items'])}, 'children': c_17}, with_context = false) }}
+  {%- endif %}
+{%- endset -%}
+{{ include('blocks/section-frame.html.twig', {'p': {'id': v_id, 'title': v_title, 'lead': v_lead, 'tone': v_tone, 'density': v_density, 'landmarkLabel': v_landmarkLabel}, 'children': c_18}, with_context = false) }}
diff --git a/packages/twig/ui/composer.json b/packages/twig/ui/composer.json
new file mode 100644
index 0000000..605803e
--- /dev/null
+++ b/packages/twig/ui/composer.json
@@ -0,0 +1,15 @@
+{
+  "name": "ui8kit/twig-ui",
+  "description": "Twig templates of ui8kit (40 bricks, 72 parts) generated by xgen from xgen/specs. Code generated by xgen. DO NOT EDIT.",
+  "type": "library",
+  "license": "MIT",
+  "require": {
+    "php": ">=8.2",
+    "twig/twig": "^3.21"
+  },
+  "autoload": {
+    "psr-4": {
+      "UI8Kit\\Twig\\": "php/"
+    }
+  }
+}
diff --git a/packages/twig/ui/package.json b/packages/twig/ui/package.json
new file mode 100644
index 0000000..ae2837b
--- /dev/null
+++ b/packages/twig/ui/package.json
@@ -0,0 +1,126 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "@ui8kit/twig-ui",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Twig templates (40 bricks, 72 parts) generated by xgen from xgen/specs; PHP runtime in php/ (composer package ui8kit/twig-ui).",
+  "ui8kit": {
+    "runtime": "twig",
+    "generated": true,
+    "kit": [
+      "ui",
+      "php"
+    ],
+    "composition": [
+      "blocks"
+    ],
+    "blockRoot": [
+      "blocks/about-company.html.twig",
+      "blocks/about-me.html.twig",
+      "blocks/activity-feed.html.twig",
+      "blocks/announcement-bar.html.twig",
+      "blocks/app-shell.html.twig",
+      "blocks/article-body.html.twig",
+      "blocks/auth-card.html.twig",
+      "blocks/auth-layout.html.twig",
+      "blocks/before-after.html.twig",
+      "blocks/bento-grid.html.twig",
+      "blocks/bottom-nav.html.twig",
+      "blocks/cart-drawer.html.twig",
+      "blocks/cart-list.html.twig",
+      "blocks/category-nav.html.twig",
+      "blocks/chart-panel.html.twig",
+      "blocks/checklist.html.twig",
+      "blocks/checkout-form.html.twig",
+      "blocks/comparison-table.html.twig",
+      "blocks/contact-form.html.twig",
+      "blocks/cookie-banner.html.twig",
+      "blocks/credit-packs.html.twig",
+      "blocks/cta-band.html.twig",
+      "blocks/cta-banner.html.twig",
+      "blocks/cta-proof.html.twig",
+      "blocks/dashboard-overview.html.twig",
+      "blocks/dashboard-shell.html.twig",
+      "blocks/delivery-info.html.twig",
+      "blocks/empty-panel.html.twig",
+      "blocks/error-page.html.twig",
+      "blocks/faq-help.html.twig",
+      "blocks/faq-list.html.twig",
+      "blocks/faq-split.html.twig",
+      "blocks/feature-accordion.html.twig",
+      "blocks/feature-grid.html.twig",
+      "blocks/feature-showcase.html.twig",
+      "blocks/feature-split.html.twig",
+      "blocks/feature-sticky.html.twig",
+      "blocks/feature-tabs.html.twig",
+      "blocks/footer-card.html.twig",
+      "blocks/footer-split.html.twig",
+      "blocks/hero-classic.html.twig",
+      "blocks/hero-head.html.twig",
+      "blocks/hero-prompt.html.twig",
+      "blocks/hero-split.html.twig",
+      "blocks/icon-wall.html.twig",
+      "blocks/job-board.html.twig",
+      "blocks/kanban-board.html.twig",
+      "blocks/logo-cloud.html.twig",
+      "blocks/logo-ribbon.html.twig",
+      "blocks/media-list.html.twig",
+      "blocks/mega-menu.html.twig",
+      "blocks/metric-row.html.twig",
+      "blocks/milestone-timeline.html.twig",
+      "blocks/nav-bar.html.twig",
+      "blocks/newsletter-form.html.twig",
+      "blocks/order-summary.html.twig",
+      "blocks/order-table.html.twig",
+      "blocks/page-intro.html.twig",
+      "blocks/page-trail.html.twig",
+      "blocks/photo-gallery.html.twig",
+      "blocks/post-card.html.twig",
+      "blocks/post-grid.html.twig",
+      "blocks/post-header.html.twig",
+      "blocks/post-showcase.html.twig",
+      "blocks/post-split.html.twig",
+      "blocks/pricing-card.html.twig",
+      "blocks/pricing-tiers.html.twig",
+      "blocks/product-card.html.twig",
+      "blocks/product-detail.html.twig",
+      "blocks/product-grid.html.twig",
+      "blocks/product-info.html.twig",
+      "blocks/profile-form.html.twig",
+      "blocks/project-grid.html.twig",
+      "blocks/proof-band.html.twig",
+      "blocks/quote-split.html.twig",
+      "blocks/region.html.twig",
+      "blocks/review-list.html.twig",
+      "blocks/section-frame.html.twig",
+      "blocks/shell-footer.html.twig",
+      "blocks/shell-sidebar.html.twig",
+      "blocks/shell-topbar.html.twig",
+      "blocks/shopping-cart.html.twig",
+      "blocks/sidebar-nav.html.twig",
+      "blocks/sidebar-panel.html.twig",
+      "blocks/signup-wizard.html.twig",
+      "blocks/site-footer.html.twig",
+      "blocks/site-header.html.twig",
+      "blocks/sitemap-footer.html.twig",
+      "blocks/skeleton-layout.html.twig",
+      "blocks/slot-board.html.twig",
+      "blocks/stats-band.html.twig",
+      "blocks/stepper.html.twig",
+      "blocks/steps-list.html.twig",
+      "blocks/store-hero.html.twig",
+      "blocks/store-locations.html.twig",
+      "blocks/story-tabs.html.twig",
+      "blocks/support-channels.html.twig",
+      "blocks/team-grid.html.twig",
+      "blocks/template-grid.html.twig",
+      "blocks/testimonial-grid.html.twig",
+      "blocks/tour-callout.html.twig",
+      "blocks/usage-calculator.html.twig",
+      "blocks/usp-strip.html.twig",
+      "blocks/video-grid.html.twig",
+      "blocks/video-modal.html.twig",
+      "blocks/zone-table.html.twig"
+    ]
+  }
+}
diff --git a/packages/twig/ui/php/CnMerge.php b/packages/twig/ui/php/CnMerge.php
new file mode 100644
index 0000000..601cdb8
--- /dev/null
+++ b/packages/twig/ui/php/CnMerge.php
@@ -0,0 +1,235 @@
+<?php
+
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/twig/assets/php-shared/CnMerge.php
+
+declare(strict_types=1);
+
+namespace UI8Kit\Twig;
+
+/**
+ * cn: clsx-joined class fragments with tailwind-merge conflict resolution (the last class of a group wins, and a
+ * class removes the earlier classes of the groups it overrides: p-2 removes px-4, not the reverse). Port of cn_merge.go.
+ */
+final class CnMerge
+{
+    public static function merge(array $classes): string
+    {
+        $tokens = [];
+        foreach ($classes as $chunk) {
+            foreach (preg_split('/\s+/', trim((string) $chunk)) ?: [] as $t) {
+                if ($t !== '') {
+                    $tokens[] = $t;
+                }
+            }
+        }
+        $kept = [];
+        foreach ($tokens as $token) {
+            [$prefix, $key, $removes] = self::classKey($token);
+            if ($key !== '') {
+                $drop = [$key => true];
+                foreach ($removes as $g) {
+                    $drop[$prefix . $g] = true;
+                }
+                $kept = array_values(array_filter($kept, fn ($it) => !isset($drop[$it[1]])));
+            }
+            $kept[] = [$token, $key];
+        }
+        return implode(' ', array_map(fn ($it) => $it[0], $kept));
+    }
+
+    private static function classKey(string $token): array
+    {
+        [$prefix, $core] = self::splitVariant($token);
+        if ($core === '') {
+            return ['', '', []];
+        }
+        $groups = self::utilityGroups($core);
+        if (!$groups) {
+            return [$prefix, '=' . $token, []];
+        }
+        return [$prefix, $prefix . $groups[0], array_slice($groups, 1)];
+    }
+
+    private static function splitVariant(string $token): array
+    {
+        $depth = 0;
+        $cut = -1;
+        $n = strlen($token);
+        for ($i = 0; $i < $n; $i++) {
+            $c = $token[$i];
+            if ($c === '[') {
+                $depth++;
+            } elseif ($c === ']') {
+                if ($depth > 0) {
+                    $depth--;
+                }
+            } elseif ($c === ':' && $depth === 0) {
+                $cut = $i;
+            }
+        }
+        if ($cut === -1) {
+            return ['', self::noBang($token)];
+        }
+        return [substr($token, 0, $cut + 1), self::noBang(substr($token, $cut + 1))];
+    }
+
+    private static function noBang(string $s): string
+    {
+        return str_starts_with($s, '!') ? substr($s, 1) : $s;
+    }
+
+    private static function utilityGroups(string $core): array
+    {
+        switch ($core) {
+            case 'block': case 'inline': case 'inline-block': case 'inline-flex': case 'flex': case 'grid': case 'contents': case 'hidden':
+                return ['display'];
+            case 'flex-row': case 'flex-col': case 'flex-row-reverse': case 'flex-col-reverse':
+                return ['flex-direction'];
+            case 'static': case 'relative': case 'absolute': case 'fixed': case 'sticky':
+                return ['position'];
+            case 'isolate': case 'isolation-auto':
+                return ['isolation'];
+        }
+        foreach (['inset-ring', 'ring'] as $kind) {
+            if ($core === $kind) {
+                return [$kind . '-width'];
+            }
+            if (str_starts_with($core, $kind . '-')) {
+                $rest = substr($core, strlen($kind) + 1);
+                return [self::isNumber($rest) ? $kind . '-width' : $kind . '-color'];
+            }
+        }
+        $prefixes = [
+            ['gap-x-', 'gap-x'], ['gap-y-', 'gap-y'], ['items-', 'align-items'], ['justify-', 'justify-content'],
+            ['self-', 'align-self'], ['content-', 'align-content'], ['overflow-x-', 'overflow-x'], ['overflow-y-', 'overflow-y'],
+            ['inset-x-', 'inset-x'], ['inset-y-', 'inset-y'], ['min-w-', 'min-width'], ['min-h-', 'min-height'],
+            ['max-w-', 'max-width'], ['max-h-', 'max-height'], ['shadow-', 'shadow'], ['ring-', 'ring'], ['rounded-', 'rounded'],
+            ['leading-', 'leading'], ['tracking-', 'tracking'], ['opacity-', 'opacity'], ['z-', 'z'], ['top-', 'top'],
+            ['right-', 'right'], ['bottom-', 'bottom'], ['left-', 'left'],
+        ];
+        foreach ($prefixes as [$p, $g]) {
+            if (str_starts_with($core, $p)) {
+                return [$g];
+            }
+        }
+        if (str_starts_with($core, 'gap-')) {
+            return ['gap', 'gap-x', 'gap-y'];
+        }
+        if (str_starts_with($core, 'inset-')) {
+            return ['inset', 'inset-x', 'inset-y', 'top', 'right', 'bottom', 'left'];
+        }
+        if (str_starts_with($core, 'overflow-')) {
+            return ['overflow', 'overflow-x', 'overflow-y'];
+        }
+        if ($core === 'border' || (str_starts_with($core, 'border-') && self::isNumber(substr($core, 7)))) {
+            return ['border-width', 'border-w-x', 'border-w-y', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l', 'border-w-s', 'border-w-e'];
+        }
+        if (strlen($core) >= 8 && str_starts_with($core, 'border-') && str_contains('xytrblse', $core[7])
+            && (strlen($core) === 8 || ($core[8] === '-' && self::isNumber(substr($core, 9))))) {
+            $side = $core[7];
+            if ($side === 'x') {
+                return ['border-w-x', 'border-w-r', 'border-w-l', 'border-w-s', 'border-w-e'];
+            }
+            if ($side === 'y') {
+                return ['border-w-y', 'border-w-t', 'border-w-b'];
+            }
+            return ['border-w-' . $side];
+        }
+        if (in_array($core, ['text-left', 'text-center', 'text-right', 'text-justify', 'text-start', 'text-end'], true)) {
+            return ['text-align'];
+        }
+        if ($core === 'rounded') {
+            return ['rounded'];
+        }
+        if ($core === 'shadow' || $core === 'shadow-none') {
+            return ['shadow'];
+        }
+        if (in_array($core, ['flex-1', 'flex-auto', 'flex-none', 'flex-initial'], true)) {
+            return ['flex-size', 'flex-grow', 'flex-shrink', 'flex-basis'];
+        }
+        if ($core === 'grow' || str_starts_with($core, 'grow-')) {
+            return ['flex-grow'];
+        }
+        if ($core === 'shrink' || $core === 'shrink-0') {
+            return ['flex-shrink'];
+        }
+        if (str_starts_with($core, 'size-')) {
+            return ['size', 'width', 'height'];
+        }
+        if (str_starts_with($core, 'w-')) {
+            return ['width'];
+        }
+        if (str_starts_with($core, 'h-')) {
+            return ['height'];
+        }
+        foreach (['p' => 'padding', 'm' => 'margin'] as $kind => $name) {
+            if (str_starts_with($core, $kind . '-') && !self::hasDirectionPrefix($core, $kind)) {
+                return [$name, "$name-x", "$name-y", "$name-t", "$name-r", "$name-b", "$name-l", "$name-s", "$name-e"];
+            }
+            $axis = self::spaceAxis($core, $kind, $name);
+            if ($axis) {
+                return $axis;
+            }
+        }
+        if (str_starts_with($core, 'bg-')) {
+            return ['bg'];
+        }
+        if (self::isTextSize($core)) {
+            return ['text-size', 'leading'];
+        }
+        if (str_starts_with($core, 'text-')) {
+            return ['text-color'];
+        }
+        if (in_array($core, ['font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black'], true)) {
+            return ['font-weight'];
+        }
+        return [];
+    }
+
+    private static function hasDirectionPrefix(string $core, string $kind): bool
+    {
+        foreach (['x-', 'y-', 't-', 'r-', 'b-', 'l-', 's-', 'e-'] as $d) {
+            if (str_starts_with($core, $kind . $d)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private static function spaceAxis(string $core, string $kind, string $n): array
+    {
+        if (str_starts_with($core, $kind . 'x-')) {
+            return ["$n-x", "$n-r", "$n-l", "$n-s", "$n-e"];
+        }
+        if (str_starts_with($core, $kind . 'y-')) {
+            return ["$n-y", "$n-t", "$n-b"];
+        }
+        foreach (['t', 'r', 'b', 'l'] as $s) {
+            if (str_starts_with($core, $kind . $s . '-')) {
+                return ["$n-$s"];
+            }
+        }
+        return [];
+    }
+
+    private static function isTextSize(string $core): bool
+    {
+        if (in_array($core, ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl', 'text-6xl', 'text-7xl', 'text-8xl', 'text-9xl'], true)) {
+            return true;
+        }
+        if (str_starts_with($core, 'text-[')) {
+            $rest = substr($core, 6);
+            return $rest !== '' && (ctype_digit($rest[0]) || $rest[0] === '.');
+        }
+        return false;
+    }
+
+    private static function isNumber(string $s): bool
+    {
+        if (str_starts_with($s, '[')) {
+            return true;
+        }
+        return $s !== '' && strspn($s, '0123456789.') === strlen($s);
+    }
+}
diff --git a/packages/twig/ui/php/Extension.php b/packages/twig/ui/php/Extension.php
new file mode 100644
index 0000000..aeeb15b
--- /dev/null
+++ b/packages/twig/ui/php/Extension.php
@@ -0,0 +1,56 @@
+<?php
+
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/twig/assets/php/Extension.php
+
+declare(strict_types=1);
+
+namespace UI8Kit\Twig;
+
+use Twig\Environment;
+use Twig\Extension\AbstractExtension;
+use Twig\Loader\FilesystemLoader;
+use Twig\TwigFunction;
+
+/**
+ * The ui_* functions of the generated templates. Register it on an Environment whose loader has the package folder
+ * as a root (templates are included as ui/<brick>/<part>.html.twig and blocks/<organism>.html.twig).
+ */
+final class Extension extends AbstractExtension
+{
+    private Runtime $rt;
+
+    public function __construct(string $root)
+    {
+        $this->rt = new Runtime($root);
+    }
+
+    /** an Environment over the package folder with the extension registered (autoescape html, lenient variables) */
+    public static function environment(string $root, array $options = []): Environment
+    {
+        $env = new Environment(new FilesystemLoader([$root]), $options + ['autoescape' => 'html', 'strict_variables' => false, 'cache' => false]);
+        $env->addExtension(new self($root));
+        return $env;
+    }
+
+    public function getFunctions(): array
+    {
+        $static = [
+            'get', 'field', 's', 'text', 't', 'n', 'i', 'eq', 'lt', 'gt', 'le', 'ge', 'add', 'sub', 'mul', 'div', 'and', 'or',
+            'coalesce', 'def', 'l', 'len', 'spread', 'str', 'has', 'cnv', 'tpl', 'num', 'money', 'at', 'page_window',
+            'fit_cols', 'uniq', 'words', 'nbsp', 'nth', 'range', 'max', 'min', 'round', 'count', 'where', 'match', 'pick',
+            'sum_by', 'first_of', 'max_by', 'css', 'attrs', 'is_set_str', 'default_if_empty', 'map_or', 'int_map_or',
+            'bool_str', 'concat_trim', 'cn', 'resolve_tag', 'title_tag',
+        ];
+        $fns = [];
+        foreach ($static as $name) {
+            $fns[] = new TwigFunction('ui_' . $name, [Runtime::class, lcfirst(str_replace('_', '', ucwords($name, '_')))]);
+        }
+        $fns[] = new TwigFunction('ui_attr_html', [Runtime::class, 'attrHtml'], ['is_safe' => ['html']]);
+        $fns[] = new TwigFunction('ui_compose', [$this->rt, 'compose']);
+        $fns[] = new TwigFunction('ui_recipe', [$this->rt, 'recipe']);
+        $fns[] = new TwigFunction('ui_preset', [$this->rt, 'preset']);
+        $fns[] = new TwigFunction('ui_lucide', [$this->rt, 'lucide'], ['is_safe' => ['html']]);
+        return $fns;
+    }
+}
diff --git a/packages/twig/ui/php/Runtime.php b/packages/twig/ui/php/Runtime.php
new file mode 100644
index 0000000..5cb9b25
--- /dev/null
+++ b/packages/twig/ui/php/Runtime.php
@@ -0,0 +1,737 @@
+<?php
+
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/twig/assets/php-shared/Runtime.php
+
+declare(strict_types=1);
+
+namespace UI8Kit\Twig;
+
+/**
+ * The helpers of the generated templates. Values are the JSON shapes of the TypeScript props (string, int/float,
+ * bool, null, list, map) and are read with the rules of the TypeScript output: JS truthiness, strict equality,
+ * String(), clsx + tailwind-merge. Every helper is null-safe, like `?.`. Port of the Go runtime (dyn.go, expr.go,
+ * utils.go) so all static runtimes print the same DOM.
+ */
+final class Runtime
+{
+    /** @var array<string, mixed> parsed JSON files (recipes, presets, the Lucide registry) */
+    private array $json = [];
+
+    public function __construct(private readonly string $root)
+    {
+    }
+
+    public function json(string $path): mixed
+    {
+        if (!array_key_exists($path, $this->json)) {
+            $text = file_get_contents($this->root . '/' . $path);
+            if ($text === false) {
+                throw new \RuntimeException("ui8kit: cannot read $path");
+            }
+            $this->json[$path] = json_decode($text, true, 512, JSON_THROW_ON_ERROR);
+        }
+        return $this->json[$path];
+    }
+
+    // ---------------------------------------------------------------- values
+
+    private static function isNum(mixed $v): bool
+    {
+        return is_int($v) || is_float($v);
+    }
+
+    /** a path of fields: get(plan, ['price', 'amount']); `length` of a list or a text is its size */
+    public static function get(mixed $v, array $path): mixed
+    {
+        foreach ($path as $k) {
+            $k = (string) $k;
+            if (is_array($v)) {
+                if (array_is_list($v) && ($k === 'length' || ctype_digit($k))) {
+                    if ($k === 'length') {
+                        $v = count($v);
+                    } else {
+                        $v = $v[(int) $k] ?? null;
+                    }
+                } else {
+                    $v = $v[$k] ?? null;
+                }
+            } elseif (is_string($v) && $k === 'length') {
+                $v = mb_strlen($v);
+            } else {
+                return null;
+            }
+        }
+        return $v;
+    }
+
+    /** a field of a brick record (BreadcrumbItem): the JSON key matched without regard to case, as Go json does */
+    public static function field(mixed $item, string $name, mixed $zero): mixed
+    {
+        if (!is_array($item)) {
+            return $zero;
+        }
+        if (array_key_exists($name, $item)) {
+            return $item[$name] ?? $zero;
+        }
+        foreach ($item as $k => $v) {
+            if (strcasecmp((string) $k, $name) === 0) {
+                return $v ?? $zero;
+            }
+        }
+        return $zero;
+    }
+
+    /** String(n) of JavaScript for the numbers the views print: 3, 2.5, -1 */
+    public static function fmtNum(int|float $f): string
+    {
+        if (is_int($f)) {
+            return (string) $f;
+        }
+        if (is_nan($f)) {
+            return 'NaN';
+        }
+        if (is_infinite($f)) {
+            return $f > 0 ? 'Infinity' : '-Infinity';
+        }
+        if ($f == floor($f) && abs($f) < 1e21) {
+            return sprintf('%.0f', $f);
+        }
+        return json_encode($f);
+    }
+
+    public static function s(mixed $v): string
+    {
+        if ($v === null) {
+            return '';
+        }
+        if (is_string($v)) {
+            return $v;
+        }
+        if (is_bool($v)) {
+            return $v ? 'true' : 'false';
+        }
+        if (self::isNum($v)) {
+            return self::fmtNum($v);
+        }
+        if ($v instanceof \Stringable) {
+            return (string) $v;
+        }
+        return json_encode($v, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
+    }
+
+    /** what a text node shows: nothing for null and booleans */
+    public static function text(mixed $v): string
+    {
+        return is_bool($v) ? '' : self::s($v);
+    }
+
+    /** JS truthiness: null, false, 0, NaN and '' are false */
+    public static function t(mixed $v): bool
+    {
+        if ($v === null) {
+            return false;
+        }
+        if (is_bool($v)) {
+            return $v;
+        }
+        if (is_string($v)) {
+            return $v !== '';
+        }
+        if (self::isNum($v)) {
+            return $v != 0 && !is_nan((float) $v);
+        }
+        if ($v instanceof \Stringable) {
+            return (string) $v !== '';
+        }
+        return true;
+    }
+
+    /** Number(v) */
+    public static function n(mixed $v): float
+    {
+        if (self::isNum($v)) {
+            return (float) $v;
+        }
+        if (is_string($v) && is_numeric(trim($v))) {
+            return (float) trim($v);
+        }
+        if (is_bool($v)) {
+            return $v ? 1.0 : 0.0;
+        }
+        return 0.0;
+    }
+
+    /** an int for an int prop of a brick */
+    public static function i(mixed $v): int
+    {
+        return (int) round(self::n($v));
+    }
+
+    /** strict equality (===) */
+    public static function eq(mixed $a, mixed $b): bool
+    {
+        $na = self::isNum($a);
+        $nb = self::isNum($b);
+        if ($na || $nb) {
+            return $na && $nb && (float) $a == (float) $b;
+        }
+        if ($a === null || is_string($a) || is_bool($a)) {
+            return $a === $b;
+        }
+        return false;
+    }
+
+    private static function cmp(mixed $a, mixed $b): ?int
+    {
+        if (is_string($a) && is_string($b)) {
+            return strcmp($a, $b) <=> 0;
+        }
+        if ($a === null || $b === null) {
+            return null;
+        }
+        return self::n($a) <=> self::n($b);
+    }
+
+    public static function lt(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c < 0; }
+    public static function gt(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c > 0; }
+    public static function le(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c <= 0; }
+    public static function ge(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c >= 0; }
+
+    /** `a + b`: text when either side is text, else a sum */
+    public static function add(mixed $a, mixed $b): string|float
+    {
+        if (is_string($a) || is_string($b)) {
+            return self::s($a) . self::s($b);
+        }
+        return self::n($a) + self::n($b);
+    }
+    public static function sub(mixed $a, mixed $b): float { return self::n($a) - self::n($b); }
+    public static function mul(mixed $a, mixed $b): float { return self::n($a) * self::n($b); }
+    public static function div(mixed $a, mixed $b): float { return fdiv(self::n($a), self::n($b)); }
+
+    /** the first falsy operand, else the last (JS &&) */
+    public static function and(array $vs): mixed
+    {
+        $last = null;
+        foreach ($vs as $v) {
+            if (!self::t($v)) {
+                return $v;
+            }
+            $last = $v;
+        }
+        return $last;
+    }
+
+    /** the first truthy operand, else the last (JS ||) */
+    public static function or(array $vs): mixed
+    {
+        $last = null;
+        foreach ($vs as $v) {
+            if (self::t($v)) {
+                return $v;
+            }
+            $last = $v;
+        }
+        return $last;
+    }
+
+    public static function coalesce(array $vs): mixed
+    {
+        foreach ($vs as $v) {
+            if ($v !== null) {
+                return $v;
+            }
+        }
+        return null;
+    }
+
+    /** a prop with its default: the default when the prop is null */
+    public static function def(mixed $v, mixed $d): mixed
+    {
+        return $v ?? $d;
+    }
+
+    /** a list to loop over; null and other values are empty */
+    public static function l(mixed $v): array
+    {
+        return is_array($v) && array_is_list($v) ? $v : [];
+    }
+
+    public static function len(mixed $v): int
+    {
+        if (is_string($v)) {
+            return mb_strlen($v);
+        }
+        return count(self::l($v));
+    }
+
+    /** a literal group with the fields of a named group first (`{ ...BASE, mode: "two" }`) */
+    public static function spread(mixed $base, array $fields): array
+    {
+        $out = is_array($base) && !array_is_list($base) ? $base : [];
+        foreach ($fields as $k => $v) {
+            $out[$k] = $v;
+        }
+        return $out;
+    }
+
+    /** String(x) with undefined kept undefined */
+    public static function str(mixed $v): ?string
+    {
+        return $v === null ? null : self::s($v);
+    }
+
+    public static function has(mixed $v): bool
+    {
+        return $v !== null;
+    }
+
+    /** cn over values: clsx skips the falsy ones, tailwind-merge resolves conflicts */
+    public static function cnv(array $vs): string
+    {
+        $parts = [];
+        foreach ($vs as $v) {
+            if (self::t($v)) {
+                $parts[] = self::s($v);
+            }
+        }
+        return CnMerge::merge($parts);
+    }
+
+    /** {0}, {1}... of a content template */
+    public static function tpl(mixed $t, array $vals): string
+    {
+        return preg_replace_callback('/\{(\d+)\}/', fn ($m) => (int) $m[1] < count($vals) ? self::s($vals[(int) $m[1]]) : '', self::s($t));
+    }
+
+    private static function group(float $f, int $decimals): string
+    {
+        $s = number_format(abs($f), $decimals, '.', '');
+        [$int, $frac] = array_pad(explode('.', $s, 2), 2, '');
+        $out = '';
+        $n = strlen($int);
+        for ($i = 0; $i < $n; $i++) {
+            if ($i > 0 && ($n - $i) % 3 === 0) {
+                $out .= ',';
+            }
+            $out .= $int[$i];
+        }
+        $frac = rtrim($frac, '0');
+        if ($frac !== '') {
+            $out .= '.' . $frac;
+        }
+        if ($f < 0 && $out !== '0') {
+            $out = '-' . $out;
+        }
+        return $out;
+    }
+
+    /** Intl.NumberFormat("en-US"): grouped, up to 3 decimals */
+    public static function num(mixed $v): string
+    {
+        return self::group(self::n($v), 3);
+    }
+
+    private const CURRENCY = ['USD' => '$', 'EUR' => "\u{20AC}", 'GBP' => "\u{00A3}", 'JPY' => "\u{00A5}", 'INR' => "\u{20B9}", 'CAD' => 'CA$', 'AUD' => 'A$'];
+
+    /** digits of the minor unit (ISO 4217): 2, or 0 for JPY and KRW */
+    public static function minorDigits(string $c): int
+    {
+        return in_array($c, ['JPY', 'KRW'], true) ? 0 : 2;
+    }
+
+    /** integer minor units (Codex v0.4: 1250 = 12.50) -> "$12.50"; whole amounts without the fraction: 149900 -> "$1,499" */
+    public static function money(mixed $amount, mixed $currency): string
+    {
+        $c = self::s($currency);
+        $sym = self::CURRENCY[$c] ?? $c . "\u{00A0}";
+        $minor = (int) round(self::n($amount));
+        $sign = $minor < 0 ? '-' : '';
+        $minor = abs($minor);
+        $d = self::minorDigits($c);
+        $unit = 10 ** $d;
+        $whole = intdiv($minor, $unit);
+        $rest = $minor % $unit;
+        $out = $sign . $sym . self::group((float) $whole, 0);
+        return $d > 0 && $rest !== 0 ? $out . '.' . str_pad((string) $rest, $d, '0', STR_PAD_LEFT) : $out;
+    }
+
+    /** a content word by key, the key itself when the dictionary has no entry */
+    public static function at(mixed $dict, mixed $key): string
+    {
+        $v = self::get($dict, [self::s($key)]);
+        return $v !== null ? self::s($v) : self::s($key);
+    }
+
+    /** the pages a pager shows: the first, the last and the neighbours of the current one; null is a gap */
+    public static function pageWindow(mixed $pageV, mixed $pagesV): array
+    {
+        $page = (int) self::n($pageV);
+        $pages = (int) self::n($pagesV);
+        $keep = [];
+        foreach ([1, $pages, $page - 1, $page, $page + 1] as $n) {
+            if ($n >= 1 && $n <= $pages) {
+                $keep[$n] = true;
+            }
+        }
+        $out = [];
+        $prev = 0;
+        for ($n = 1; $n <= $pages; $n++) {
+            if (!isset($keep[$n])) {
+                continue;
+            }
+            if ($n - $prev > 1) {
+                $out[] = null;
+            }
+            $out[] = $n;
+            $prev = $n;
+        }
+        return $out;
+    }
+
+    /** a responsive column variant capped by the number of items: ("1-4", 3) -> "1-3" */
+    public static function fitCols(mixed $colsV, mixed $nV): string
+    {
+        $cols = self::s($colsV);
+        $n = (int) self::n($nV);
+        if (!preg_match('/^(-?\d+)-(-?\d+)$/', $cols, $m)) {
+            return $cols;
+        }
+        [$l, $h] = [(int) $m[1], (int) $m[2]];
+        if ($n >= $h) {
+            return $cols;
+        }
+        $top = max($l, $n);
+        $known = ['1-2', '1-3', '1-4', '2-3', '2-4', '2-6', '3-6'];
+        for ($k = $top; $k > $l; $k--) {
+            if (in_array("$l-$k", $known, true)) {
+                return "$l-$k";
+            }
+        }
+        return (string) min(max($n, 1), $l);
+    }
+
+    /** drops a segment of a ", " label equal (case-insensitive) to the one before it */
+    public static function uniq(mixed $v): string
+    {
+        $parts = explode(', ', self::s($v));
+        $out = [];
+        foreach ($parts as $i => $s) {
+            if ($i === 0 || strcasecmp($s, $parts[$i - 1]) !== 0) {
+                $out[] = $s;
+            }
+        }
+        return implode(', ', $out);
+    }
+
+    public static function words(mixed $v): array
+    {
+        return explode(' ', self::s($v));
+    }
+
+    public static function nbsp(mixed $v): string
+    {
+        return str_replace(' ', "\u{00A0}", self::s($v));
+    }
+
+    public static function nth(mixed $list, mixed $i): mixed
+    {
+        $l = self::l($list);
+        $n = (int) self::n($i);
+        return $n >= 0 && $n < count($l) ? $l[$n] : null;
+    }
+
+    public static function range(mixed $n): array
+    {
+        $c = (int) self::n($n);
+        return $c > 0 ? range(0, $c - 1) : [];
+    }
+
+    public static function max(array $vs): float
+    {
+        $m = -INF;
+        foreach ($vs as $v) {
+            $m = max($m, self::n($v));
+        }
+        return $m;
+    }
+
+    public static function min(array $vs): float
+    {
+        $m = INF;
+        foreach ($vs as $v) {
+            $m = min($m, self::n($v));
+        }
+        return $m;
+    }
+
+    /** Math.round (halves up) */
+    public static function round(mixed $v): float
+    {
+        return floor(self::n($v) + 0.5);
+    }
+
+    public static function count(mixed $items, mixed $field): int
+    {
+        $n = 0;
+        foreach (self::l($items) as $it) {
+            if (self::t(self::get($it, [self::s($field)]))) {
+                $n++;
+            }
+        }
+        return $n;
+    }
+
+    public static function where(mixed $items, mixed $field, mixed $value): array
+    {
+        if (!self::t($value)) {
+            return self::l($items);
+        }
+        return array_values(array_filter(self::l($items), fn ($it) => self::eq(self::get($it, [self::s($field)]), $value)));
+    }
+
+    public static function match(mixed $items, mixed $field, mixed $query): array
+    {
+        if (!self::t($query)) {
+            return self::l($items);
+        }
+        $q = mb_strtolower(self::s($query));
+        return array_values(array_filter(self::l($items), fn ($it) => str_contains(mb_strtolower(self::s(self::get($it, [self::s($field)]))), $q)));
+    }
+
+    public static function pick(mixed $items, mixed $id): mixed
+    {
+        foreach (self::l($items) as $it) {
+            if (self::eq(self::get($it, ['id']), $id)) {
+                return $it;
+            }
+        }
+        return null;
+    }
+
+    public static function sumBy(mixed $items, string $a, string $b): float
+    {
+        $s = 0.0;
+        foreach (self::l($items) as $it) {
+            $s += self::n(self::get($it, [$a])) * self::n(self::get($it, [$b]));
+        }
+        return $s;
+    }
+
+    public static function firstOf(mixed $items, string $field): mixed
+    {
+        $l = self::l($items);
+        return $l ? (self::get($l[0], [$field]) ?? '') : '';
+    }
+
+    public static function maxBy(mixed $items, string $field): float
+    {
+        $m = 0.0;
+        foreach (self::l($items) as $it) {
+            $m = max($m, self::n(self::get($it, [$field])));
+        }
+        return $m;
+    }
+
+    /** an inline style from (property, value, unit) triples */
+    public static function css(array $triples): string
+    {
+        $parts = [];
+        for ($i = 0; $i + 2 < count($triples); $i += 3) {
+            $parts[] = self::s($triples[$i]) . ':' . self::s($triples[$i + 1]) . self::s($triples[$i + 2]);
+        }
+        return implode(';', $parts);
+    }
+
+    /** the class string of a recipe table for a selection (organisms: base, each key, the matching compounds) */
+    public function recipe(string $path, array $sel): string
+    {
+        $r = $this->json($path);
+        $pick = function (string $k) use ($r, $sel): string {
+            $v = trim(self::s($sel[$k] ?? null));
+            return $v !== '' ? $v : trim((string) ($r['defaults'][$k] ?? ''));
+        };
+        $parts = [(string) ($r['base'] ?? '')];
+        foreach ($r['keys'] ?? [] as $k) {
+            $parts[] = (string) ($r['byKey'][$k][$pick($k)] ?? '');
+        }
+        foreach ($r['compound'] ?? [] as $c) {
+            if (self::compoundHits($c, $pick)) {
+                $parts[] = (string) ($c['class'] ?? '');
+            }
+        }
+        return CnMerge::merge(array_filter(array_map('trim', $parts), fn ($p) => $p !== ''));
+    }
+
+    private static function compoundHits(array $c, callable $pick): bool
+    {
+        foreach ($c as $k => $want) {
+            if ($k === 'class') {
+                continue;
+            }
+            if (!in_array($pick((string) $k), explode('|', (string) $want), true)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    /** a preset value of the kit */
+    public function preset(string $path, array $keys): mixed
+    {
+        return self::get(self::get($this->json($path), ['values']), $keys);
+    }
+
+    /** free DOM attributes from (name, value) pairs, as React prints them */
+    public static function attrs(array $kv): array
+    {
+        $out = [];
+        for ($i = 0; $i + 1 < count($kv); $i += 2) {
+            $k = self::s($kv[$i]);
+            $v = $kv[$i + 1];
+            if ($v === null) {
+                continue;
+            }
+            if (is_bool($v)) {
+                if (str_starts_with($k, 'data-') || str_starts_with($k, 'aria-')) {
+                    $out[$k] = self::s($v);
+                } elseif ($v) {
+                    $out[$k] = true;
+                }
+                continue;
+            }
+            $out[$k] = self::s($v);
+        }
+        return $out;
+    }
+
+    /** an attribute map as markup (` name="value"`, a bare name for true, nothing for null and false) */
+    public static function attrHtml(mixed $attrs): string
+    {
+        if (!is_array($attrs)) {
+            return '';
+        }
+        $out = '';
+        foreach ($attrs as $k => $v) {
+            if ($v === null || $v === false) {
+                continue;
+            }
+            $name = htmlspecialchars((string) $k, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
+            $out .= $v === true ? " $name" : " $name=\"" . htmlspecialchars(self::s($v), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') . '"';
+        }
+        return $out;
+    }
+
+    // ---------------------------------------------------------------- bricks (expr.go, utils.go, tags.go)
+
+    public static function isSetStr(mixed $v): bool
+    {
+        return trim(self::s($v)) !== '';
+    }
+
+    public static function defaultIfEmpty(mixed $v, string $fallback): string
+    {
+        $t = trim(self::s($v));
+        return $t === '' ? $fallback : $t;
+    }
+
+    /** a decision table over a trimmed text: mapping[trim(v)] or the fallback */
+    public static function mapOr(mixed $v, array $mapping, string $fallback, bool $lower = false): string
+    {
+        $t = trim(self::s($v));
+        if ($lower) {
+            $t = strtolower($t);
+        }
+        return array_key_exists($t, $mapping) ? (string) $mapping[$t] : $fallback;
+    }
+
+    public static function intMapOr(mixed $v, array $mapping, string $fallback): string
+    {
+        $n = self::i($v);
+        return array_key_exists($n, $mapping) ? (string) $mapping[$n] : $fallback;
+    }
+
+    public static function boolStr(mixed $v): string
+    {
+        return self::t($v) ? 'true' : 'false';
+    }
+
+    public static function concatTrim(array $parts): string
+    {
+        return implode('', array_map(fn ($p) => trim(self::s($p)), $parts));
+    }
+
+    /** class fragments merged with tailwind-merge (strings only, empty ones skipped) */
+    public static function cn(array $parts): string
+    {
+        return CnMerge::merge(array_map(fn ($p) => self::s($p), $parts));
+    }
+
+    /** the brick class contract: recipe base, the selected variants (defaults for empty), compounds, then the tail */
+    public function compose(string $path, array $selection, array $extra): string
+    {
+        $r = $this->json($path);
+        $parts = [];
+        if (trim((string) ($r['base'] ?? '')) !== '') {
+            $parts[] = trim((string) $r['base']);
+        }
+        $pick = function (string $k) use ($r, $selection): string {
+            $c = trim(self::s($selection[$k] ?? null));
+            return $c !== '' ? $c : trim((string) ($r['defaults'][$k] ?? ''));
+        };
+        foreach ($r['keys'] ?? [] as $key) {
+            $choices = $r['byKey'][$key] ?? null;
+            if ($choices === null) {
+                continue;
+            }
+            $choice = $pick($key);
+            if ($choice === '') {
+                if ($choices) {
+                    throw new \RuntimeException("[compose] missing default for key $key");
+                }
+                continue;
+            }
+            if (isset($choices[$choice]) && trim((string) $choices[$choice]) !== '') {
+                $parts[] = (string) $choices[$choice];
+            }
+        }
+        foreach ($r['compound'] ?? [] as $c) {
+            if (self::compoundHits($c, $pick) && trim((string) ($c['class'] ?? '')) !== '') {
+                $parts[] = (string) $c['class'];
+            }
+        }
+        return self::cn([...$parts, ...$extra]);
+    }
+
+    /** the tag of a primitive: the requested one when the allow-list has it, else the fallback */
+    public static function resolveTag(mixed $tag, string $fallback, array $allowed): string
+    {
+        $t = strtolower(trim(self::s($tag)));
+        return $t !== '' && in_array($t, $allowed, true) ? $t : $fallback;
+    }
+
+    /** h1-h6 from a level, h2 by default */
+    public static function titleTag(mixed $level): string
+    {
+        $n = self::i($level);
+        return $n >= 1 && $n <= 6 ? "h$n" : 'h2';
+    }
+
+    /** the inner markup of a Lucide glyph: its nodes with attributes in name order (circle for an unknown name) */
+    public function lucide(mixed $name): string
+    {
+        $icons = $this->json('ui/lucide-icon/lucide-icons.json')['icons'];
+        $nodes = $icons[self::s($name)] ?? $icons['circle'];
+        $out = '';
+        foreach ($nodes as [$tag, $attrs]) {
+            ksort($attrs, SORT_STRING);
+            $out .= '<' . $tag;
+            foreach ($attrs as $k => $v) {
+                $out .= ' ' . $k . '="' . htmlspecialchars((string) $v, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') . '"';
+            }
+            $out .= '></' . $tag . '>';
+        }
+        return $out;
+    }
+}
diff --git a/packages/twig/ui/ui/alert/alert.html.twig b/packages/twig/ui/ui/alert/alert.html.twig
new file mode 100644
index 0000000..daa8580
--- /dev/null
+++ b/packages/twig/ui/ui/alert/alert.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/alert.json
+    Alert: Alert renders a div with alert or status semantics.
+    Props (p): Class (string), Variant (string), Role (string), AriaLive (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/alert/alert.variants.json', {'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  data-slot="alert"
+  role="{{ ui_map_or((p.Role ?? ''), {'status': 'status', 'alert': 'alert'}, 'status') }}"
+  aria-live="{{ ui_default_if_empty((p.AriaLive ?? ''), 'polite') }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</div>
diff --git a/packages/twig/ui/ui/alert/alert.variants.json b/packages/twig/ui/ui/alert/alert.variants.json
new file mode 100644
index 0000000..29370d6
--- /dev/null
+++ b/packages/twig/ui/ui/alert/alert.variants.json
@@ -0,0 +1,20 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.alert",
+  "base": "flex min-h-8 items-center gap-2 px-2 text-xs font-semibold inset-ring rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-card text-card-foreground inset-ring-border",
+      "destructive": "bg-muted text-destructive inset-ring-destructive",
+      "success": "bg-muted text-foreground inset-ring-border",
+      "warning": "bg-muted text-foreground inset-ring-border"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/badge/badge.html.twig b/packages/twig/ui/ui/badge/badge.html.twig
new file mode 100644
index 0000000..faffd69
--- /dev/null
+++ b/packages/twig/ui/ui/badge/badge.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/badge.json
+    Badge: Badge renders label text in a div wrapper.
+    Props (p): Variant (string), Size (string), Class (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/badge/badge.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  data-slot="badge"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</div>
diff --git a/packages/twig/ui/ui/badge/badge.variants.json b/packages/twig/ui/ui/badge/badge.variants.json
new file mode 100644
index 0000000..adfac0c
--- /dev/null
+++ b/packages/twig/ui/ui/badge/badge.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.badge",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-5 px-2 text-xs",
+      "default": "h-6 px-3 text-xs",
+      "lg": "h-8 px-4 text-sm"
+    },
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "secondary": "bg-muted text-foreground inset-ring-transparent",
+      "outline": "bg-transparent text-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/block/block.html.twig b/packages/twig/ui/ui/block/block.html.twig
new file mode 100644
index 0000000..89c78d2
--- /dev/null
+++ b/packages/twig/ui/ui/block/block.html.twig
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/block.json
+    Block: Block renders a resolved landmark element with children.
+    Props (p): ID (string), Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag((p.Tag ?? ''), 'div', ['div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'figure', 'search', 'hgroup']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/block/block.variants.json', {}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/block/block.variants.json b/packages/twig/ui/ui/block/block.variants.json
new file mode 100644
index 0000000..430ecf7
--- /dev/null
+++ b/packages/twig/ui/ui/block/block.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.block",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/box/box.html.twig b/packages/twig/ui/ui/box/box.html.twig
new file mode 100644
index 0000000..59889b7
--- /dev/null
+++ b/packages/twig/ui/ui/box/box.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/box.json
+    Box: Box renders a div layout wrapper.
+    Props (p): Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag((p.Tag ?? ''), 'div', ['div']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/box/box.variants.json', {}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/box/box.variants.json b/packages/twig/ui/ui/box/box.variants.json
new file mode 100644
index 0000000..2ae4cf2
--- /dev/null
+++ b/packages/twig/ui/ui/box/box.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.box",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/breadcrumb/breadcrumb.html.twig b/packages/twig/ui/ui/breadcrumb/breadcrumb.html.twig
new file mode 100644
index 0000000..17e3343
--- /dev/null
+++ b/packages/twig/ui/ui/breadcrumb/breadcrumb.html.twig
@@ -0,0 +1,29 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/breadcrumb.json
+    Breadcrumb: Breadcrumb renders the full navigation trail.
+    Props (p): Class (string), Items (BreadcrumbItem[]), AriaLabel (string), DataUI8Kit (string), Attrs (attrs). -#}
+<nav
+  class="{{ ui_cn(['text-sm', (p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.DataUI8Kit ?? '')) %} data-ui8kit="{{ (p.DataUI8Kit ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
+  <ol class="flex flex-wrap items-center gap-2">
+    {%- for item in (p.Items ?? []) %}
+      <li class="inline-flex items-center">
+        {%- if (ui_is_set_str(ui_field(item, 'Href', '')) and not (ui_field(item, 'Disabled', false))) %}
+          <a
+            {%- if ui_is_set_str(ui_field(item, 'Href', '')) %} href="{{ ui_field(item, 'Href', '') }}"{%- endif %}
+            class="{{ ui_cn(['text-sm', (ui_field(item, 'Current', false) ? 'font-medium' : (ui_field(item, 'Disabled', false) ? 'text-muted-foreground' : 'text-primary underline-offset-4 hover:underline'))]) }}"
+            {%- if ui_field(item, 'Current', false) %} aria-current="page"{%- endif %}
+          >{{ ui_field(item, 'Label', '') }}</a>
+        {%- else %}
+          <span
+            class="{{ ui_cn(['text-sm', (ui_field(item, 'Current', false) ? 'font-medium' : (ui_field(item, 'Disabled', false) ? 'text-muted-foreground' : 'text-primary underline-offset-4 hover:underline'))]) }}"
+            {%- if ui_field(item, 'Current', false) %} aria-current="page"{%- endif %}
+          >{{ ui_field(item, 'Label', '') }}</span>
+        {%- endif %}
+      </li>
+    {%- endfor %}
+  </ol>
+</nav>
diff --git a/packages/twig/ui/ui/button-plain/button-plain.html.twig b/packages/twig/ui/ui/button-plain/button-plain.html.twig
new file mode 100644
index 0000000..efccc25
--- /dev/null
+++ b/packages/twig/ui/ui/button-plain/button-plain.html.twig
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/button-plain.json
+    ButtonPlain: ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it themselves.
+    Props (p): Class (string), Type (string), Disabled (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs); children: markup. -#}
+<button
+  type="{{ ui_map_or((p.Type ?? ''), {'submit': 'submit', 'reset': 'reset'}, 'button') }}"
+  class="{{ ui_compose('ui/button-plain/button-plain.variants.json', {}, [((p.Disabled ?? false) ? 'pointer-events-none opacity-50' : ''), (p.Class ?? '')]) }}"
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.TabIndex ?? '')) %} tabindex="{{ (p.TabIndex ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</button>
diff --git a/packages/twig/ui/ui/button-plain/button-plain.variants.json b/packages/twig/ui/ui/button-plain/button-plain.variants.json
new file mode 100644
index 0000000..0e844f8
--- /dev/null
+++ b/packages/twig/ui/ui/button-plain/button-plain.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.button-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/button/button.html.twig b/packages/twig/ui/ui/button/button.html.twig
new file mode 100644
index 0000000..b36cdf2
--- /dev/null
+++ b/packages/twig/ui/ui/button/button.html.twig
@@ -0,0 +1,35 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/button.json
+    Button: Button renders a button element, or an anchor when Href is set.
+    Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
+    Props (p): Variant (string), Size (string), Layout (string), Class (string), Type (string), Form (string), Href (string), Target (string), Rel (string), External (bool), Disabled (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs); children: markup. -#}
+{%- set d_target = (ui_is_set_str((p.Target ?? '')) ? (p.Target ?? '') : ((p.External ?? false) ? '_blank' : '')) -%}
+{%- set d_rel = (ui_is_set_str((p.Rel ?? '')) ? (p.Rel ?? '') : (((p.External ?? false) or ui_eq(d_target, '_blank')) ? 'noopener noreferrer' : '')) -%}
+{%- if ui_is_set_str((p.Href ?? '')) %}
+  <a
+    {%- if ui_is_set_str((p.Href ?? '')) %} href="{{ (p.Href ?? '') }}"{%- endif %}
+    class="{{ ui_compose('ui/button/button.variants.json', {'variant': (p.Variant ?? ''), 'size': (p.Size ?? ''), 'layout': (p.Layout ?? '')}, [((p.Disabled ?? false) ? 'pointer-events-none opacity-50' : ''), (p.Class ?? '')]) }}"
+    data-slot="button"
+    {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+    {%- if ui_is_set_str(d_target) %} target="{{ d_target }}"{%- endif %}
+    {%- if ui_is_set_str(d_rel) %} rel="{{ d_rel }}"{%- endif %}
+    {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+    {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+    {%- if (p.Disabled ?? false) %} aria-disabled="true"{%- endif %}
+    {%- if (p.Disabled ?? false) %} tabindex="-1"{%- endif %}
+    {{ ui_attr_html((p.Attrs ?? {})) }}
+  >{{ (children ?? '')|raw }}</a>
+{%- else %}
+  <button
+    type="{{ ui_map_or((p.Type ?? ''), {'submit': 'submit', 'reset': 'reset'}, 'button') }}"
+    class="{{ ui_compose('ui/button/button.variants.json', {'variant': (p.Variant ?? ''), 'size': (p.Size ?? ''), 'layout': (p.Layout ?? '')}, [((p.Disabled ?? false) ? 'pointer-events-none opacity-50' : ''), (p.Class ?? '')]) }}"
+    data-slot="button"
+    {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+    {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+    {%- if ui_is_set_str((p.Form ?? '')) %} form="{{ (p.Form ?? '') }}"{%- endif %}
+    {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+    {%- if ui_is_set_str((p.TabIndex ?? '')) %} tabindex="{{ (p.TabIndex ?? '') }}"{%- endif %}
+    {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+    {{ ui_attr_html((p.Attrs ?? {})) }}
+  >{{ (children ?? '')|raw }}</button>
+{%- endif %}
diff --git a/packages/twig/ui/ui/button/button.variants.json b/packages/twig/ui/ui/button/button.variants.json
new file mode 100644
index 0000000..6f6eed9
--- /dev/null
+++ b/packages/twig/ui/ui/button/button.variants.json
@@ -0,0 +1,61 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.button",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring transition-colors disabled:pointer-events-none disabled:opacity-50 rounded",
+  "keys": [
+    "variant",
+    "size",
+    "layout"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default",
+    "layout": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "outline": "bg-card text-foreground inset-ring-border",
+      "ghost": "bg-transparent text-foreground inset-ring-transparent",
+      "secondary": "bg-secondary text-secondary-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white hover:bg-destructive/90 inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      "link": "text-foreground inset-ring-transparent underline-offset-4 hover:underline"
+    },
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-4 text-sm",
+      "lg": "h-12 px-6 text-base"
+    },
+    "layout": {
+      "default": "",
+      "icon": ""
+    }
+  },
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "size-8 p-0 [&>svg]:size-4"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "size-10 p-0 [&>svg]:size-5"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "size-12 p-0 [&>svg]:size-6"
+    },
+    {
+      "variant": "outline",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    },
+    {
+      "variant": "ghost",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    }
+  ]
+}
diff --git a/packages/twig/ui/ui/card/card-content.html.twig b/packages/twig/ui/ui/card/card-content.html.twig
new file mode 100644
index 0000000..a216fcb
--- /dev/null
+++ b/packages/twig/ui/ui/card/card-content.html.twig
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardContent: CardContent renders the padded main body slot.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<div class="{{ ui_cn([(p.Class ?? '')]) }}"{{ ui_attr_html((p.Attrs ?? {})) }}>{{ (children ?? '')|raw }}</div>
diff --git a/packages/twig/ui/ui/card/card-description.html.twig b/packages/twig/ui/ui/card/card-description.html.twig
new file mode 100644
index 0000000..db59a40
--- /dev/null
+++ b/packages/twig/ui/ui/card/card-description.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardDescription: CardDescription renders a muted subtitle in a p element.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<p
+  class="{{ ui_cn(['text-sm text-muted-foreground', (p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</p>
diff --git a/packages/twig/ui/ui/card/card-footer.html.twig b/packages/twig/ui/ui/card/card-footer.html.twig
new file mode 100644
index 0000000..5f6c920
--- /dev/null
+++ b/packages/twig/ui/ui/card/card-footer.html.twig
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardFooter: CardFooter renders the bottom action slot.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<div class="{{ ui_cn(['flex items-center', (p.Class ?? '')]) }}"{{ ui_attr_html((p.Attrs ?? {})) }}>{{ (children ?? '')|raw }}</div>
diff --git a/packages/twig/ui/ui/card/card-header.html.twig b/packages/twig/ui/ui/card/card-header.html.twig
new file mode 100644
index 0000000..71b3b24
--- /dev/null
+++ b/packages/twig/ui/ui/card/card-header.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardHeader: CardHeader renders the top slot.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_cn(['grid auto-rows-min items-start gap-2', (p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</div>
diff --git a/packages/twig/ui/ui/card/card-title.html.twig b/packages/twig/ui/ui/card/card-title.html.twig
new file mode 100644
index 0000000..e7906bd
--- /dev/null
+++ b/packages/twig/ui/ui/card/card-title.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    CardTitle: CardTitle renders heading text at the As level (default h2).
+    Props (p): Class (string), As (int), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_title_tag((p.As ?? 0)) -%}
+<{{ tag1 }}
+  class="{{ ui_cn(['font-semibold leading-none', (p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/card/card.html.twig b/packages/twig/ui/ui/card/card.html.twig
new file mode 100644
index 0000000..afa8149
--- /dev/null
+++ b/packages/twig/ui/ui/card/card.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/card.json
+    Card: Card renders the bordered surface wrapper.
+    Props (p): Class (string), Variant (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/card/card.variants.json', {'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  data-slot="card"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</div>
diff --git a/packages/twig/ui/ui/card/card.variants.json b/packages/twig/ui/ui/card/card.variants.json
new file mode 100644
index 0000000..6740b57
--- /dev/null
+++ b/packages/twig/ui/ui/card/card.variants.json
@@ -0,0 +1,20 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.card",
+  "base": "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "",
+      "muted": "bg-muted",
+      "ghost": "bg-transparent",
+      "compact": "gap-4 p-4"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/checkbox/checkbox.html.twig b/packages/twig/ui/ui/checkbox/checkbox.html.twig
new file mode 100644
index 0000000..7297891
--- /dev/null
+++ b/packages/twig/ui/ui/checkbox/checkbox.html.twig
@@ -0,0 +1,18 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/checkbox.json
+    Checkbox: Checkbox renders a styled input[type=checkbox].
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Checked (bool), Disabled (bool), Required (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<input
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  type="checkbox"
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Value ?? '')) %} value="{{ (p.Value ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/checkbox/checkbox.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if (p.Checked ?? false) %} checked{%- endif %}
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {%- if (p.Required ?? false) %} required{%- endif %}
+  {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.TabIndex ?? '')) %} tabindex="{{ (p.TabIndex ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/checkbox/checkbox.variants.json b/packages/twig/ui/ui/checkbox/checkbox.variants.json
new file mode 100644
index 0000000..6b1dccc
--- /dev/null
+++ b/packages/twig/ui/ui/checkbox/checkbox.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.checkbox",
+  "base": "peer shrink-0 appearance-none bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary checkbox-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5",
+      "sm": "size-4"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/container/container.html.twig b/packages/twig/ui/ui/container/container.html.twig
new file mode 100644
index 0000000..664fa47
--- /dev/null
+++ b/packages/twig/ui/ui/container/container.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/container.json
+    Container: Container renders the outer content shell.
+    Props (p): Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag((p.Tag ?? ''), 'div', ['div', 'main', 'section']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/container/container.variants.json', {}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/container/container.variants.json b/packages/twig/ui/ui/container/container.variants.json
new file mode 100644
index 0000000..e2842e5
--- /dev/null
+++ b/packages/twig/ui/ui/container/container.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.container",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/dialog/dialog.html.twig b/packages/twig/ui/ui/dialog/dialog.html.twig
new file mode 100644
index 0000000..6eb2e57
--- /dev/null
+++ b/packages/twig/ui/ui/dialog/dialog.html.twig
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/dialog.json
+    Dialog: Dialog renders a native dialog element.
+    Props (p): Variant (string), Size (string), Class (string), ID (string), Open (bool), DataUI8Kit (string), AriaLabel (string), AriaLabelledBy (string), AriaDescribedBy (string), Attrs (attrs); children: markup. -#}
+<dialog
+  class="{{ ui_compose('ui/dialog/dialog.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if (p.Open ?? false) %} open{%- endif %}
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.DataUI8Kit ?? '')) %} data-ui8kit="{{ (p.DataUI8Kit ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabelledBy ?? '')) %} aria-labelledby="{{ (p.AriaLabelledBy ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaDescribedBy ?? '')) %} aria-describedby="{{ (p.AriaDescribedBy ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</dialog>
diff --git a/packages/twig/ui/ui/dialog/dialog.variants.json b/packages/twig/ui/ui/dialog/dialog.variants.json
new file mode 100644
index 0000000..1bb166d
--- /dev/null
+++ b/packages/twig/ui/ui/dialog/dialog.variants.json
@@ -0,0 +1,27 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.dialog",
+  "base": "m-auto flex flex-col bg-background text-foreground inset-ring inset-ring-border shadow-lg backdrop:bg-foreground/20 rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "w-70",
+      "full": "h-full w-full",
+      "lg": "w-100",
+      "xl": "w-140"
+    },
+    "variant": {
+      "card": "bg-card text-card-foreground",
+      "default": "",
+      "sheet": "min-h-screen rounded-none"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/disclosure/disclosure.html.twig b/packages/twig/ui/ui/disclosure/disclosure.html.twig
new file mode 100644
index 0000000..6bd87d3
--- /dev/null
+++ b/packages/twig/ui/ui/disclosure/disclosure.html.twig
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/disclosure.json
+    Disclosure: Disclosure renders native details.
+    Props (p): Variant (string), Class (string), Open (bool), Name (string), Attrs (attrs); children: markup. -#}
+<details
+  class="{{ ui_compose('ui/disclosure/disclosure.variants.json', {'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if (p.Open ?? false) %} open{%- endif %}
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</details>
diff --git a/packages/twig/ui/ui/disclosure/disclosure.variants.json b/packages/twig/ui/ui/disclosure/disclosure.variants.json
new file mode 100644
index 0000000..b3a254a
--- /dev/null
+++ b/packages/twig/ui/ui/disclosure/disclosure.variants.json
@@ -0,0 +1,19 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.disclosure",
+  "base": "group",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "card": "rounded bg-card inset-ring inset-ring-border",
+      "default": "rounded inset-ring inset-ring-border",
+      "ghost": "",
+      "item": "border-b border-border last:border-b-0"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/disclosure/summary.html.twig b/packages/twig/ui/ui/disclosure/summary.html.twig
new file mode 100644
index 0000000..bbcb948
--- /dev/null
+++ b/packages/twig/ui/ui/disclosure/summary.html.twig
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/disclosure.json
+    Summary: Summary renders native summary, followed by a Lucide chevron-down indicator that turns over when the details open (CSS only: group-open:rotate-180 on the Disclosure group).
+    Props (p): Variant (string), Class (string), Attrs (attrs); children: markup. -#}
+<summary
+  class="{{ ui_compose('ui/disclosure/summary.variants.json', {'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
+  {{ (children ?? '')|raw }}
+  <span
+    class="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+    aria-hidden="true"
+    data-slot="summary-indicator"
+  ></span>
+</summary>
diff --git a/packages/twig/ui/ui/disclosure/summary.variants.json b/packages/twig/ui/ui/disclosure/summary.variants.json
new file mode 100644
index 0000000..6502ca6
--- /dev/null
+++ b/packages/twig/ui/ui/disclosure/summary.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.summary",
+  "base": "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs font-semibold",
+      "default": "text-sm font-semibold",
+      "lg": "text-base font-semibold"
+    },
+    "variant": {
+      "card": "py-2 pr-4 pl-4",
+      "default": "py-2 pr-4 pl-4",
+      "ghost": "py-2",
+      "item": "py-4 text-muted-foreground hover:text-foreground group-open:text-foreground"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/form/data-list.html.twig b/packages/twig/ui/ui/form/data-list.html.twig
new file mode 100644
index 0000000..396029a
--- /dev/null
+++ b/packages/twig/ui/ui/form/data-list.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    DataList: DataList renders a native datalist.
+    Props (p): ID (string), Class (string), Attrs (attrs); children: markup. -#}
+<datalist
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  class="{{ ui_cn([(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</datalist>
diff --git a/packages/twig/ui/ui/form/data-option.html.twig b/packages/twig/ui/ui/form/data-option.html.twig
new file mode 100644
index 0000000..ec50131
--- /dev/null
+++ b/packages/twig/ui/ui/form/data-option.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    DataOption: DataOption renders an option inside a datalist.
+    Props (p): Value (string), Label (string), Attrs (attrs). -#}
+<option
+  {%- if ui_is_set_str((p.Value ?? '')) %} value="{{ (p.Value ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Label ?? '')) %} label="{{ (p.Label ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+></option>
diff --git a/packages/twig/ui/ui/form/fieldset.html.twig b/packages/twig/ui/ui/form/fieldset.html.twig
new file mode 100644
index 0000000..6b507f5
--- /dev/null
+++ b/packages/twig/ui/ui/form/fieldset.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Fieldset: Fieldset renders a native fieldset.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Form (string), Disabled (bool), Attrs (attrs); children: markup. -#}
+<fieldset
+  class="{{ ui_compose('ui/form/fieldset.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Form ?? '')) %} form="{{ (p.Form ?? '') }}"{%- endif %}
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</fieldset>
diff --git a/packages/twig/ui/ui/form/fieldset.variants.json b/packages/twig/ui/ui/form/fieldset.variants.json
new file mode 100644
index 0000000..963b29d
--- /dev/null
+++ b/packages/twig/ui/ui/form/fieldset.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.fieldset",
+  "base": "grid",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "gap-2",
+      "lg": "gap-4",
+      "sm": "gap-2"
+    },
+    "variant": {
+      "card": "rounded p-4 inset-ring inset-ring-border",
+      "default": "",
+      "inline": "flex flex-wrap items-start gap-4"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/form/form-description.html.twig b/packages/twig/ui/ui/form/form-description.html.twig
new file mode 100644
index 0000000..89ea34a
--- /dev/null
+++ b/packages/twig/ui/ui/form/form-description.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    FormDescription: FormDescription renders muted helper copy below a control.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<p
+  class="{{ ui_compose('ui/form/form-description.variants.json', {}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</p>
diff --git a/packages/twig/ui/ui/form/form-description.variants.json b/packages/twig/ui/ui/form/form-description.variants.json
new file mode 100644
index 0000000..82a749d
--- /dev/null
+++ b/packages/twig/ui/ui/form/form-description.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-description",
+  "base": "text-xs font-semibold text-muted-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/form/form-item.html.twig b/packages/twig/ui/ui/form/form-item.html.twig
new file mode 100644
index 0000000..84f35de
--- /dev/null
+++ b/packages/twig/ui/ui/form/form-item.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    FormItem: FormItem groups a single field with spacing for label and control.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/form/form-item.variants.json', {}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</div>
diff --git a/packages/twig/ui/ui/form/form-item.variants.json b/packages/twig/ui/ui/form/form-item.variants.json
new file mode 100644
index 0000000..e7da2d4
--- /dev/null
+++ b/packages/twig/ui/ui/form/form-item.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-item",
+  "base": "flex flex-col gap-2",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/form/form-message.html.twig b/packages/twig/ui/ui/form/form-message.html.twig
new file mode 100644
index 0000000..e6e7c62
--- /dev/null
+++ b/packages/twig/ui/ui/form/form-message.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    FormMessage: FormMessage renders destructive validation feedback.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<p
+  class="{{ ui_compose('ui/form/form-message.variants.json', {}, [(p.Class ?? '')]) }}"
+  role="alert"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</p>
diff --git a/packages/twig/ui/ui/form/form-message.variants.json b/packages/twig/ui/ui/form/form-message.variants.json
new file mode 100644
index 0000000..b58d5a8
--- /dev/null
+++ b/packages/twig/ui/ui/form/form-message.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form-message",
+  "base": "text-xs font-semibold text-destructive",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/form/form.html.twig b/packages/twig/ui/ui/form/form.html.twig
new file mode 100644
index 0000000..6c04200
--- /dev/null
+++ b/packages/twig/ui/ui/form/form.html.twig
@@ -0,0 +1,16 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/form.json
+    Form: Form renders a vertical grid form container.
+    Props (p): ID (string), Class (string), Action (string), Method (string), Enctype (string), Autocomplete (string), Name (string), Target (string), NoValidate (bool), Attrs (attrs); children: markup. -#}
+<form
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/form/form.variants.json', {}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.Action ?? '')) %} action="{{ (p.Action ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Method ?? '')) %} method="{{ (p.Method ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Enctype ?? '')) %} enctype="{{ (p.Enctype ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Autocomplete ?? '')) %} autocomplete="{{ (p.Autocomplete ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Target ?? '')) %} target="{{ (p.Target ?? '') }}"{%- endif %}
+  {%- if (p.NoValidate ?? false) %} novalidate{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</form>
diff --git a/packages/twig/ui/ui/form/form.variants.json b/packages/twig/ui/ui/form/form.variants.json
new file mode 100644
index 0000000..7a19129
--- /dev/null
+++ b/packages/twig/ui/ui/form/form.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.form",
+  "base": "grid gap-4",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/form/legend.html.twig b/packages/twig/ui/ui/form/legend.html.twig
new file mode 100644
index 0000000..a6fa931
--- /dev/null
+++ b/packages/twig/ui/ui/form/legend.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Legend: Legend renders a native legend.
+    Props (p): Variant (string), Size (string), Class (string), Attrs (attrs); children: markup. -#}
+<legend
+  class="{{ ui_compose('ui/form/legend.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</legend>
diff --git a/packages/twig/ui/ui/form/legend.variants.json b/packages/twig/ui/ui/form/legend.variants.json
new file mode 100644
index 0000000..7a2f0ab
--- /dev/null
+++ b/packages/twig/ui/ui/form/legend.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.legend",
+  "base": "font-bold",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs",
+      "default": "text-sm",
+      "lg": "text-base"
+    },
+    "variant": {
+      "default": "",
+      "muted": "text-muted-foreground"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/form/meter.html.twig b/packages/twig/ui/ui/form/meter.html.twig
new file mode 100644
index 0000000..ab7ced3
--- /dev/null
+++ b/packages/twig/ui/ui/form/meter.html.twig
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Meter: Meter renders a native meter.
+    Props (p): Variant (string), Size (string), ID (string), Class (string), Value (string), Min (string), Max (string), Low (string), High (string), Optimum (string), Attrs (attrs); children: markup. -#}
+<meter
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/form/meter.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.Value ?? '')) %} value="{{ (p.Value ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Min ?? '')) %} min="{{ (p.Min ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Max ?? '')) %} max="{{ (p.Max ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Low ?? '')) %} low="{{ (p.Low ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.High ?? '')) %} high="{{ (p.High ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Optimum ?? '')) %} optimum="{{ (p.Optimum ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</meter>
diff --git a/packages/twig/ui/ui/form/meter.variants.json b/packages/twig/ui/ui/form/meter.variants.json
new file mode 100644
index 0000000..b931112
--- /dev/null
+++ b/packages/twig/ui/ui/form/meter.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.meter",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/form/output.html.twig b/packages/twig/ui/ui/form/output.html.twig
new file mode 100644
index 0000000..a34176f
--- /dev/null
+++ b/packages/twig/ui/ui/form/output.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Output: Output renders a native output element.
+    Props (p): ID (string), Class (string), Name (string), For (string), Value (string), Attrs (attrs); children: markup. -#}
+<output
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  class="{{ ui_cn([(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.For ?? '')) %} for="{{ (p.For ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (p.Value ?? '') }}{{ (children ?? '')|raw }}</output>
diff --git a/packages/twig/ui/ui/form/progress.html.twig b/packages/twig/ui/ui/form/progress.html.twig
new file mode 100644
index 0000000..df8c951
--- /dev/null
+++ b/packages/twig/ui/ui/form/progress.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/controls.json
+    Progress: Progress renders a native progress element.
+    Props (p): Variant (string), Size (string), ID (string), Class (string), Value (string), Max (string), Attrs (attrs); children: markup. -#}
+<progress
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/form/progress.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.Value ?? '')) %} value="{{ (p.Value ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Max ?? '')) %} max="{{ (p.Max ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</progress>
diff --git a/packages/twig/ui/ui/form/progress.variants.json b/packages/twig/ui/ui/form/progress.variants.json
new file mode 100644
index 0000000..ac8c766
--- /dev/null
+++ b/packages/twig/ui/ui/form/progress.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.progress",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/grid/grid-col.html.twig b/packages/twig/ui/ui/grid/grid-col.html.twig
new file mode 100644
index 0000000..163f0cf
--- /dev/null
+++ b/packages/twig/ui/ui/grid/grid-col.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/grid.json
+    GridCol: GridCol renders one grid column child.
+    Props (p): Class (string), Span (int), Start (int), End (int), Order (int), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_cn([ui_int_map_or((p.Span ?? 0), {1: 'col-span-1', 2: 'col-span-2', 3: 'col-span-3', 4: 'col-span-4', 5: 'col-span-5', 6: 'col-span-6', 7: 'col-span-7', 8: 'col-span-8', 9: 'col-span-9', 10: 'col-span-10', 11: 'col-span-11', 12: 'col-span-12'}, ''), ui_int_map_or((p.Start ?? 0), {1: 'col-start-1', 2: 'col-start-2', 3: 'col-start-3', 4: 'col-start-4', 5: 'col-start-5', 6: 'col-start-6', 7: 'col-start-7', 8: 'col-start-8', 9: 'col-start-9', 10: 'col-start-10', 11: 'col-start-11', 12: 'col-start-12'}, ''), ui_int_map_or((p.End ?? 0), {1: 'col-end-1', 2: 'col-end-2', 3: 'col-end-3', 4: 'col-end-4', 5: 'col-end-5', 6: 'col-end-6', 7: 'col-end-7', 8: 'col-end-8', 9: 'col-end-9', 10: 'col-end-10', 11: 'col-end-11', 12: 'col-end-12'}, ''), ui_int_map_or((p.Order ?? 0), {1: 'order-1', 2: 'order-2', 3: 'order-3', 4: 'order-4', 5: 'order-5', 6: 'order-6', 7: 'order-7', 8: 'order-8', 9: 'order-9', 10: 'order-10', 11: 'order-11', 12: 'order-12'}, ''), (p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</div>
diff --git a/packages/twig/ui/ui/grid/grid.html.twig b/packages/twig/ui/ui/grid/grid.html.twig
new file mode 100644
index 0000000..37e4a4a
--- /dev/null
+++ b/packages/twig/ui/ui/grid/grid.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/grid.json
+    Grid: Grid renders a display:grid container.
+    Props (p): Class (string), Cols (string), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/grid/grid.variants.json', {}, [(('grid-cols-' in (p.Class ?? '')) ? '' : ui_map_or(ui_default_if_empty((p.Cols ?? ''), '1'), {'1': 'grid-cols-1', '2': 'grid-cols-2', '3': 'grid-cols-3', '4': 'grid-cols-4', '5': 'grid-cols-5', '6': 'grid-cols-6', '7': 'grid-cols-7', '8': 'grid-cols-8', '9': 'grid-cols-9', '10': 'grid-cols-10', '11': 'grid-cols-11', '12': 'grid-cols-12', '1-2': 'grid-cols-1 md:grid-cols-2', '1-3': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3', '1-4': 'grid-cols-1 sm:grid-cols-2 md:grid-cols-4', '2-3': 'grid-cols-2 md:grid-cols-3', '2-4': 'grid-cols-2 md:grid-cols-4', '2-6': 'grid-cols-2 md:grid-cols-6', '3-6': 'grid-cols-3 md:grid-cols-6'}, '')), (p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</div>
diff --git a/packages/twig/ui/ui/grid/grid.variants.json b/packages/twig/ui/ui/grid/grid.variants.json
new file mode 100644
index 0000000..7fccc0f
--- /dev/null
+++ b/packages/twig/ui/ui/grid/grid.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.grid",
+  "base": "grid",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/group/group.html.twig b/packages/twig/ui/ui/group/group.html.twig
new file mode 100644
index 0000000..f80d375
--- /dev/null
+++ b/packages/twig/ui/ui/group/group.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/group.json
+    Group: Group renders a horizontal flex container.
+    Props (p): Gap (string), Align (string), Justify (string), Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag((p.Tag ?? ''), 'div', ['div', 'fieldset', 'dl']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/group/group.variants.json', {'gap': (p.Gap ?? ''), 'align': (p.Align ?? ''), 'justify': (p.Justify ?? '')}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/group/group.variants.json b/packages/twig/ui/ui/group/group.variants.json
new file mode 100644
index 0000000..a2ef4f4
--- /dev/null
+++ b/packages/twig/ui/ui/group/group.variants.json
@@ -0,0 +1,40 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.group",
+  "base": "flex min-w-0",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "center",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/icon/icon.html.twig b/packages/twig/ui/ui/icon/icon.html.twig
new file mode 100644
index 0000000..916a059
--- /dev/null
+++ b/packages/twig/ui/ui/icon/icon.html.twig
@@ -0,0 +1,39 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/icon.json
+    Icon: Icon renders a class-based span, svg use, or text fallback host.
+    Props (p): Name (string), Type (string), BaseClass (string), Prefix (string), Size (string), Class (string), Href (string), Title (string), AriaLabel (string), Decorative (bool), Attrs (attrs); children: markup. -#}
+{%- set d_iconKind = ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class') -%}
+{%- set d_isDecorative = ((p.Decorative ?? false) or (not (ui_is_set_str((p.Title ?? ''))) and not (ui_is_set_str((p.AriaLabel ?? ''))))) -%}
+{%- if ui_eq(d_iconKind, 'svg') %}
+  <svg
+    class="{{ ui_compose('ui/icon/icon.variants.json', {'size': (p.Size ?? ''), 'type': ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class')}, [(ui_eq(ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') ? (p.BaseClass ?? '') : ''), ((ui_eq(ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') and ui_is_set_str((p.Name ?? ''))) ? ui_concat_trim([(p.Prefix ?? ''), (p.Name ?? '')]) : ''), (p.Class ?? '')]) }}"
+    {%- if d_isDecorative %} aria-hidden="true"{%- endif %}
+    {%- if not (d_isDecorative) %} role="img"{%- endif %}
+    {%- if (not (d_isDecorative) and ui_is_set_str((p.AriaLabel ?? ''))) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+    {{ ui_attr_html((p.Attrs ?? {})) }}
+  >
+    {%- if ui_is_set_str((p.Title ?? '')) %}
+      <title>{{ (p.Title ?? '') }}</title>
+    {%- endif %}
+    {%- if ui_is_set_str((p.Href ?? '')) %}
+      <use{%- if ui_is_set_str((p.Href ?? '')) %} href="{{ (p.Href ?? '') }}"{%- endif %}></use>
+    {%- endif %}
+    {{ (children ?? '')|raw }}
+  </svg>
+{%- elseif ui_eq(d_iconKind, 'text') %}
+  <span
+    class="{{ ui_compose('ui/icon/icon.variants.json', {'size': (p.Size ?? ''), 'type': ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class')}, [(ui_eq(ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') ? (p.BaseClass ?? '') : ''), ((ui_eq(ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') and ui_is_set_str((p.Name ?? ''))) ? ui_concat_trim([(p.Prefix ?? ''), (p.Name ?? '')]) : ''), (p.Class ?? '')]) }}"
+    {%- if d_isDecorative %} aria-hidden="true"{%- endif %}
+    {%- if not (d_isDecorative) %} role="img"{%- endif %}
+    {%- if (not (d_isDecorative) and ui_is_set_str((p.AriaLabel ?? ''))) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+    {{ ui_attr_html((p.Attrs ?? {})) }}
+  >{{ (children ?? '')|raw }}</span>
+{%- else %}
+  <span
+    class="{{ ui_compose('ui/icon/icon.variants.json', {'size': (p.Size ?? ''), 'type': ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class')}, [(ui_eq(ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') ? (p.BaseClass ?? '') : ''), ((ui_eq(ui_map_or((p.Type ?? ''), {'svg': 'svg', 'text': 'text'}, 'class'), 'class') and ui_is_set_str((p.Name ?? ''))) ? ui_concat_trim([(p.Prefix ?? ''), (p.Name ?? '')]) : ''), (p.Class ?? '')]) }}"
+    {%- if d_isDecorative %} aria-hidden="true"{%- endif %}
+    {%- if not (d_isDecorative) %} role="img"{%- endif %}
+    {%- if (not (d_isDecorative) and ui_is_set_str((p.AriaLabel ?? ''))) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+    {{ ui_attr_html((p.Attrs ?? {})) }}
+  ></span>
+{%- endif %}
diff --git a/packages/twig/ui/ui/icon/icon.variants.json b/packages/twig/ui/ui/icon/icon.variants.json
new file mode 100644
index 0000000..5f73b17
--- /dev/null
+++ b/packages/twig/ui/ui/icon/icon.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.icon",
+  "base": "inline-block shrink-0",
+  "keys": [
+    "size",
+    "type"
+  ],
+  "defaults": {
+    "size": "default",
+    "type": "class"
+  },
+  "byKey": {
+    "size": {
+      "xs": "size-3",
+      "default": "size-4",
+      "md": "size-5",
+      "lg": "size-6"
+    },
+    "type": {
+      "class": "",
+      "svg": "",
+      "text": ""
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/iconbadge/icon-badge.html.twig b/packages/twig/ui/ui/iconbadge/icon-badge.html.twig
new file mode 100644
index 0000000..11fe60a
--- /dev/null
+++ b/packages/twig/ui/ui/iconbadge/icon-badge.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/iconbadge.json
+    IconBadge: IconBadge renders children as the badge content.
+    Props (p): Variant (string), Size (string), Class (string), Attrs (attrs); children: markup. -#}
+<span
+  class="{{ ui_compose('ui/iconbadge/iconbadge.variants.json', {'variant': (p.Variant ?? ''), 'size': (p.Size ?? '')}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</span>
diff --git a/packages/twig/ui/ui/iconbadge/iconbadge.variants.json b/packages/twig/ui/ui/iconbadge/iconbadge.variants.json
new file mode 100644
index 0000000..1c2e331
--- /dev/null
+++ b/packages/twig/ui/ui/iconbadge/iconbadge.variants.json
@@ -0,0 +1,31 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.iconbadge",
+  "base": "inline-flex shrink-0 items-center justify-center font-bold rounded",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-muted-foreground",
+      "primary": "bg-primary text-primary-foreground",
+      "accent": "bg-accent text-accent-foreground",
+      "secondary": "bg-secondary text-secondary-foreground",
+      "outline": "text-foreground inset-ring inset-ring-border",
+      "destructive": "bg-destructive text-white dark:bg-destructive/60"
+    },
+    "size": {
+      "xs": "size-6 text-xs",
+      "sm": "size-8 text-xs",
+      "default": "size-10 text-xs",
+      "lg": "size-12 text-sm",
+      "xl": "size-20 text-base"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/image/image.html.twig b/packages/twig/ui/ui/image/image.html.twig
new file mode 100644
index 0000000..df13864
--- /dev/null
+++ b/packages/twig/ui/ui/image/image.html.twig
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/image.json
+    Image: Image renders an accessible img element.
+    Props (p): Variant (string), Size (string), Class (string), Src (string), SrcSet (string), Sizes (string), Alt (string), Width (string), Height (string), Fit (string), Position (string), Aspect (string), Loading (string), Decoding (string), FetchPriority (string), Decorative (bool), ID (string), Attrs (attrs). -#}
+<img
+  {%- if ui_is_set_str((p.Src ?? '')) %} src="{{ (p.Src ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.SrcSet ?? '')) %} srcset="{{ (p.SrcSet ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Sizes ?? '')) %} sizes="{{ (p.Sizes ?? '') }}"{%- endif %}
+  alt="{{ ((p.Decorative ?? false) ? '' : (p.Alt ?? '')) }}"
+  {%- if ui_is_set_str((p.Width ?? '')) %} width="{{ (p.Width ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Height ?? '')) %} height="{{ (p.Height ?? '') }}"{%- endif %}
+  loading="{{ ui_map_or((p.Loading ?? ''), {'eager': 'eager'}, 'lazy') }}"
+  decoding="{{ ui_map_or((p.Decoding ?? ''), {'sync': 'sync', 'auto': 'auto'}, 'async') }}"
+  {%- if ui_is_set_str((p.FetchPriority ?? '')) %} fetchpriority="{{ (p.FetchPriority ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/image/image.variants.json', {'aspect': (p.Aspect ?? ''), 'fit': (p.Fit ?? ''), 'position': (p.Position ?? ''), 'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  {%- if (p.Decorative ?? false) %} aria-hidden="true"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/image/image.variants.json b/packages/twig/ui/ui/image/image.variants.json
new file mode 100644
index 0000000..573b15b
--- /dev/null
+++ b/packages/twig/ui/ui/image/image.variants.json
@@ -0,0 +1,59 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.image",
+  "base": "block max-w-full",
+  "keys": [
+    "aspect",
+    "fit",
+    "position",
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "aspect": "auto",
+    "fit": "cover",
+    "position": "center",
+    "size": "auto",
+    "variant": "default"
+  },
+  "byKey": {
+    "aspect": {
+      "auto": "aspect-auto",
+      "square": "aspect-square",
+      "video": "aspect-video"
+    },
+    "fit": {
+      "contain": "object-contain",
+      "cover": "object-cover",
+      "fill": "object-fill",
+      "none": "object-none",
+      "scale-down": "object-scale-down"
+    },
+    "position": {
+      "bottom": "object-bottom",
+      "center": "object-center",
+      "left": "object-left",
+      "left-bottom": "object-left-bottom",
+      "left-top": "object-left-top",
+      "right": "object-right",
+      "right-bottom": "object-right-bottom",
+      "right-top": "object-right-top",
+      "top": "object-top"
+    },
+    "size": {
+      "auto": "",
+      "default": "",
+      "full": "h-full w-full",
+      "xs": "size-6",
+      "sm": "size-8",
+      "md": "size-12",
+      "lg": "size-16",
+      "xl": "size-20"
+    },
+    "variant": {
+      "default": "",
+      "logo": "object-contain"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/image/picture.html.twig b/packages/twig/ui/ui/image/picture.html.twig
new file mode 100644
index 0000000..0452702
--- /dev/null
+++ b/packages/twig/ui/ui/image/picture.html.twig
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/image.json
+    Picture: Picture renders a responsive image wrapper.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<picture class="{{ ui_cn([(p.Class ?? '')]) }}"{{ ui_attr_html((p.Attrs ?? {})) }}>{{ (children ?? '')|raw }}</picture>
diff --git a/packages/twig/ui/ui/image/source.html.twig b/packages/twig/ui/ui/image/source.html.twig
new file mode 100644
index 0000000..28aee38
--- /dev/null
+++ b/packages/twig/ui/ui/image/source.html.twig
@@ -0,0 +1,12 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/image.json
+    Source: Source renders a source candidate for picture, video, or audio.
+    Props (p): SrcSet (string), Src (string), Media (string), Type (string), Sizes (string), Attrs (attrs). -#}
+<source
+  {%- if ui_is_set_str((p.SrcSet ?? '')) %} srcset="{{ (p.SrcSet ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Src ?? '')) %} src="{{ (p.Src ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Media ?? '')) %} media="{{ (p.Media ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Type ?? '')) %} type="{{ (p.Type ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Sizes ?? '')) %} sizes="{{ (p.Sizes ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/inline/inline.html.twig b/packages/twig/ui/ui/inline/inline.html.twig
new file mode 100644
index 0000000..4efde3d
--- /dev/null
+++ b/packages/twig/ui/ui/inline/inline.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/inline.json
+    Inline: Inline renders a span element with inline copy classes.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<span
+  class="{{ ui_compose('ui/inline/inline.variants.json', {}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</span>
diff --git a/packages/twig/ui/ui/inline/inline.variants.json b/packages/twig/ui/ui/inline/inline.variants.json
new file mode 100644
index 0000000..8c11e25
--- /dev/null
+++ b/packages/twig/ui/ui/inline/inline.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.inline",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/input/input.html.twig b/packages/twig/ui/ui/input/input.html.twig
new file mode 100644
index 0000000..0068e2e
--- /dev/null
+++ b/packages/twig/ui/ui/input/input.html.twig
@@ -0,0 +1,21 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/input.json
+    Input: Input renders a styled single-line form control.
+    Props (p): Variant (string), Size (string), Class (string), Type (string), Name (string), Value (string), Placeholder (string), Disabled (bool), Required (bool), Autocomplete (string), Min (string), Max (string), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<input
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  type="{{ ui_default_if_empty((p.Type ?? ''), 'text') }}"
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Value ?? '')) %} value="{{ (p.Value ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Placeholder ?? '')) %} placeholder="{{ (p.Placeholder ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Autocomplete ?? '')) %} autocomplete="{{ (p.Autocomplete ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Min ?? '')) %} min="{{ (p.Min ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Max ?? '')) %} max="{{ (p.Max ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/input/input.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {%- if (p.Required ?? false) %} required{%- endif %}
+  {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.TabIndex ?? '')) %} tabindex="{{ (p.TabIndex ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/input/input.variants.json b/packages/twig/ui/ui/input/input.variants.json
new file mode 100644
index 0000000..43bf16e
--- /dev/null
+++ b/packages/twig/ui/ui/input/input.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.input",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-base md:text-sm",
+      "default": "h-10 px-3 text-base md:text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/label/label.html.twig b/packages/twig/ui/ui/label/label.html.twig
new file mode 100644
index 0000000..1720b91
--- /dev/null
+++ b/packages/twig/ui/ui/label/label.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/label.json
+    Label: Label renders accessible text linked to a control.
+    Props (p): Class (string), HTMLFor (string), Attrs (attrs); children: markup. -#}
+<label
+  class="{{ ui_compose('ui/label/label.variants.json', {}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.HTMLFor ?? '')) %} for="{{ (p.HTMLFor ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</label>
diff --git a/packages/twig/ui/ui/label/label.variants.json b/packages/twig/ui/ui/label/label.variants.json
new file mode 100644
index 0000000..bdebe07
--- /dev/null
+++ b/packages/twig/ui/ui/label/label.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.label",
+  "base": "text-xs font-bold text-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/linebreak/break.html.twig b/packages/twig/ui/ui/linebreak/break.html.twig
new file mode 100644
index 0000000..8dd205e
--- /dev/null
+++ b/packages/twig/ui/ui/linebreak/break.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/linebreak.json
+    Break: Break renders br by default, or wbr when Type is wbr/word.
+    Props (p): Type (string), Class (string), Attrs (attrs). -#}
+{%- set tag1 = ui_map_or(ui_map_or((p.Type ?? ''), {'wbr': 'wbr', 'word': 'wbr'}, 'br'), {'wbr': 'wbr', 'br': 'br'}, 'br') -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/linebreak/linebreak.variants.json', {}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/linebreak/linebreak.variants.json b/packages/twig/ui/ui/linebreak/linebreak.variants.json
new file mode 100644
index 0000000..eafffc3
--- /dev/null
+++ b/packages/twig/ui/ui/linebreak/linebreak.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.linebreak",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/link-plain/link-plain.html.twig b/packages/twig/ui/ui/link-plain/link-plain.html.twig
new file mode 100644
index 0000000..581ea68
--- /dev/null
+++ b/packages/twig/ui/ui/link-plain/link-plain.html.twig
@@ -0,0 +1,20 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/link-plain.json
+    LinkPlain: LinkPlain is a bare anchor: no styling beyond Class.
+    Props (p): Class (string), Href (string), Target (string), Rel (string), Download (string), External (bool), Disabled (bool), AriaCurrent (string), AriaLabel (string), ID (string), Role (string), Attrs (attrs); children: markup. -#}
+{%- set d_target = (ui_is_set_str((p.Target ?? '')) ? (p.Target ?? '') : ((p.External ?? false) ? '_blank' : '')) -%}
+{%- set d_rel = (ui_is_set_str((p.Rel ?? '')) ? (p.Rel ?? '') : (((p.External ?? false) or ui_eq(d_target, '_blank')) ? 'noopener noreferrer' : '')) -%}
+<a
+  {%- if ui_is_set_str((p.Href ?? '')) %} href="{{ (p.Href ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/link-plain/link-plain.variants.json', {}, [((p.Disabled ?? false) ? 'pointer-events-none opacity-50' : ''), (p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str(d_target) %} target="{{ d_target }}"{%- endif %}
+  {%- if ui_is_set_str(d_rel) %} rel="{{ d_rel }}"{%- endif %}
+  {%- if ui_is_set_str((p.Download ?? '')) %} download="{{ (p.Download ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaCurrent ?? '')) %} aria-current="{{ (p.AriaCurrent ?? '') }}"{%- endif %}
+  {%- if (p.Disabled ?? false) %} aria-disabled="true"{%- endif %}
+  {%- if (p.Disabled ?? false) %} tabindex="-1"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</a>
diff --git a/packages/twig/ui/ui/link-plain/link-plain.variants.json b/packages/twig/ui/ui/link-plain/link-plain.variants.json
new file mode 100644
index 0000000..9915f9b
--- /dev/null
+++ b/packages/twig/ui/ui/link-plain/link-plain.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.link-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/link/link.html.twig b/packages/twig/ui/ui/link/link.html.twig
new file mode 100644
index 0000000..f1168c6
--- /dev/null
+++ b/packages/twig/ui/ui/link/link.html.twig
@@ -0,0 +1,20 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/link.json
+    Link: Link renders a semantic anchor element.
+    Props (p): Variant (string), Size (string), Class (string), Href (string), Target (string), Rel (string), Download (string), External (bool), Disabled (bool), AriaCurrent (string), AriaLabel (string), ID (string), Role (string), Attrs (attrs); children: markup. -#}
+{%- set d_target = (ui_is_set_str((p.Target ?? '')) ? (p.Target ?? '') : ((p.External ?? false) ? '_blank' : '')) -%}
+{%- set d_rel = (ui_is_set_str((p.Rel ?? '')) ? (p.Rel ?? '') : (((p.External ?? false) or ui_eq(d_target, '_blank')) ? 'noopener noreferrer' : '')) -%}
+<a
+  {%- if ui_is_set_str((p.Href ?? '')) %} href="{{ (p.Href ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/link/link.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [((p.Disabled ?? false) ? 'pointer-events-none opacity-50' : ''), (p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str(d_target) %} target="{{ d_target }}"{%- endif %}
+  {%- if ui_is_set_str(d_rel) %} rel="{{ d_rel }}"{%- endif %}
+  {%- if ui_is_set_str((p.Download ?? '')) %} download="{{ (p.Download ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaCurrent ?? '')) %} aria-current="{{ (p.AriaCurrent ?? '') }}"{%- endif %}
+  {%- if (p.Disabled ?? false) %} aria-disabled="true"{%- endif %}
+  {%- if (p.Disabled ?? false) %} tabindex="-1"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</a>
diff --git a/packages/twig/ui/ui/link/link.variants.json b/packages/twig/ui/ui/link/link.variants.json
new file mode 100644
index 0000000..6478252
--- /dev/null
+++ b/packages/twig/ui/ui/link/link.variants.json
@@ -0,0 +1,28 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.link",
+  "base": "inline-flex items-center underline-offset-4",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "gap-2 text-sm font-medium",
+      "default": "gap-2 text-base font-semibold",
+      "md": "gap-2 text-xl font-semibold",
+      "lg": "gap-2 text-2xl font-semibold"
+    },
+    "variant": {
+      "block": "flex w-full text-foreground",
+      "default": "text-foreground hover:underline",
+      "external": "text-foreground hover:underline",
+      "muted": "text-muted-foreground hover:text-foreground",
+      "nav": "text-foreground"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/list/list-item.html.twig b/packages/twig/ui/ui/list/list-item.html.twig
new file mode 100644
index 0000000..8c075b1
--- /dev/null
+++ b/packages/twig/ui/ui/list/list-item.html.twig
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/list.json
+    ListItem: ListItem renders one li with optional value attribute.
+    Props (p): Class (string), Tag (string), Value (int), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag((p.Tag ?? ''), 'li', ['li', 'dt', 'dd']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/list/list.variants.json', {}, [(p.Class ?? '')]) }}"
+  {%- if (((p.Value ?? 0) > 0) and ui_eq(tag1, 'li')) %} value="{{ ui_s((p.Value ?? 0)) }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/list/list.html.twig b/packages/twig/ui/ui/list/list.html.twig
new file mode 100644
index 0000000..8e611be
--- /dev/null
+++ b/packages/twig/ui/ui/list/list.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/list.json
+    List: List renders a list container (ul, ol, dl, or menu).
+    Props (p): Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag((p.Tag ?? ''), 'ul', ['ul', 'ol', 'dl', 'menu']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/list/list.variants.json', {}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/list/list.variants.json b/packages/twig/ui/ui/list/list.variants.json
new file mode 100644
index 0000000..59bcd92
--- /dev/null
+++ b/packages/twig/ui/ui/list/list.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.list",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/lucide-icon/lucide-icon.html.twig b/packages/twig/ui/ui/lucide-icon/lucide-icon.html.twig
new file mode 100644
index 0000000..b8dac40
--- /dev/null
+++ b/packages/twig/ui/ui/lucide-icon/lucide-icon.html.twig
@@ -0,0 +1,14 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/runtimes/twig/assets/lucide-icon.html.twig
+    LucideIcon (asset). -#}
+{#- LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from lucide-icons.json next to this file.
+    Decorative (aria-hidden) unless a Label is given. Size and StrokeWidth default to 16 and 2. -#}
+{%- set size = (p.Size ?? 0) ?: 16 -%}
+{%- set label = p.Label ?? '' -%}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="{{ size }}" height="{{ size }}" fill="none" stroke="currentColor"
+  stroke-width="{{ (p.StrokeWidth ?? 0) ?: 2 }}" stroke-linecap="round" stroke-linejoin="round"
+  class="{{ ui_cn(['inline-block shrink-0', p.Class ?? '']) }}"
+  {%- if label == '' %} aria-hidden="true"{% else %} aria-label="{{ label }}" role="img"{% endif %} data-slot="icon"
+  {%- if (p.Name ?? '') != '' %} data-lucide="{{ p.Name }}"{% endif %}{{ ui_attr_html(p.Attrs ?? {}) }}>
+  {{- ui_lucide(p.Name ?? '') -}}
+</svg>
diff --git a/packages/twig/ui/ui/lucide-icon/lucide-icons.json b/packages/twig/ui/ui/lucide-icon/lucide-icons.json
new file mode 100644
index 0000000..7b47b1f
--- /dev/null
+++ b/packages/twig/ui/ui/lucide-icon/lucide-icons.json
@@ -0,0 +1,6625 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "source": "Lucide icons (ISC license, https://lucide.dev): the glyphs the canary registry names. Harvested by spec/tools/harvest-lucide.ts. Rendering: <svg viewBox=0 0 24 24> with these nodes.",
+  "icons": {
+    "accessibility": [
+      [
+        "circle",
+        {
+          "cx": "16",
+          "cy": "4",
+          "r": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m18 19 1-7-6 1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m5 8 3-3 5.5 3-2.36 3.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.24 14.5a5 5 0 0 0 6.88 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13.76 17.5a5 5 0 0 0-6.88-6"
+        }
+      ]
+    ],
+    "activity": [
+      [
+        "path",
+        {
+          "d": "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+        }
+      ]
+    ],
+    "anchor": [
+      [
+        "path",
+        {
+          "d": "M12 6v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 13 2-1a9 9 0 0 1-18 0l2 1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 11h6"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "4",
+          "r": "2"
+        }
+      ]
+    ],
+    "archive": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "5",
+          "x": "2",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 12h4"
+        }
+      ]
+    ],
+    "arrow-down": [
+      [
+        "path",
+        {
+          "d": "M12 5v14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 12-7 7-7-7"
+        }
+      ]
+    ],
+    "arrow-down-up": [
+      [
+        "path",
+        {
+          "d": "m3 16 4 4 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 20V4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 8-4-4-4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 4v16"
+        }
+      ]
+    ],
+    "arrow-left": [
+      [
+        "path",
+        {
+          "d": "m12 19-7-7 7-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 12H5"
+        }
+      ]
+    ],
+    "arrow-right": [
+      [
+        "path",
+        {
+          "d": "M5 12h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m12 5 7 7-7 7"
+        }
+      ]
+    ],
+    "arrow-up": [
+      [
+        "path",
+        {
+          "d": "m5 12 7-7 7 7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 19V5"
+        }
+      ]
+    ],
+    "arrow-up-right": [
+      [
+        "path",
+        {
+          "d": "M7 7h10v10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 17 17 7"
+        }
+      ]
+    ],
+    "at-sign": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"
+        }
+      ]
+    ],
+    "badge-check": [
+      [
+        "path",
+        {
+          "d": "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 9-5.5 5.5L8 12"
+        }
+      ]
+    ],
+    "badge-dollar-sign": [
+      [
+        "path",
+        {
+          "d": "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18V6"
+        }
+      ]
+    ],
+    "ban": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.929 4.929 19.07 19.071"
+        }
+      ]
+    ],
+    "banknote": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "12",
+          "x": "2",
+          "y": "6",
+          "rx": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 12h.01M18 12h.01"
+        }
+      ]
+    ],
+    "bell": [
+      [
+        "path",
+        {
+          "d": "M10.268 21a2 2 0 0 0 3.464 0"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+        }
+      ]
+    ],
+    "blocks": [
+      [
+        "path",
+        {
+          "d": "M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "14",
+          "y": "2",
+          "width": "8",
+          "height": "8",
+          "rx": "1"
+        }
+      ]
+    ],
+    "bold": [
+      [
+        "path",
+        {
+          "d": "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"
+        }
+      ]
+    ],
+    "bolt": [
+      [
+        "path",
+        {
+          "d": "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ]
+    ],
+    "book-open": [
+      [
+        "path",
+        {
+          "d": "M12 5v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"
+        }
+      ]
+    ],
+    "book-open-text": [
+      [
+        "path",
+        {
+          "d": "M12 5v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 9h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 9h2"
+        }
+      ]
+    ],
+    "book-x": [
+      [
+        "path",
+        {
+          "d": "m14.5 7.5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.5 7.5 5 5"
+        }
+      ]
+    ],
+    "bookmark": [
+      [
+        "path",
+        {
+          "d": "M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"
+        }
+      ]
+    ],
+    "bot": [
+      [
+        "path",
+        {
+          "d": "M12 8V4H8"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "16",
+          "height": "12",
+          "x": "4",
+          "y": "8",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 14h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 14h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 13v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 13v2"
+        }
+      ]
+    ],
+    "boxes": [
+      [
+        "path",
+        {
+          "d": "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 16.5-4.74-2.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 16.5 5-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 16.5v5.17"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 16.5-5-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 16.5 4.74-2.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 16.5v5.17"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8 7.26 5.15"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m12 8 4.74-2.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 13.5V8"
+        }
+      ]
+    ],
+    "brain": [
+      [
+        "path",
+        {
+          "d": "M12 18V5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.997 5.125a4 4 0 0 1 2.526 5.77"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 18a4 4 0 0 0 2-7.464"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 18a4 4 0 0 1-2-7.464"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6.003 5.125a4 4 0 0 0-2.526 5.77"
+        }
+      ]
+    ],
+    "briefcase": [
+      [
+        "path",
+        {
+          "d": "M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "6",
+          "rx": "2"
+        }
+      ]
+    ],
+    "brush": [
+      [
+        "path",
+        {
+          "d": "m11 10 3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"
+        }
+      ]
+    ],
+    "building": [
+      [
+        "path",
+        {
+          "d": "M12 10h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 6h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 10h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 6h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 10h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 6h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "4",
+          "y": "2",
+          "width": "16",
+          "height": "20",
+          "rx": "2"
+        }
+      ]
+    ],
+    "calendar": [
+      [
+        "path",
+        {
+          "d": "M8 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 2v3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "3",
+          "width": "18",
+          "height": "18",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ]
+    ],
+    "calendar-days": [
+      [
+        "path",
+        {
+          "d": "M8 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 2v3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "3",
+          "width": "18",
+          "height": "18",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 17h.01"
+        }
+      ]
+    ],
+    "calendar-range": [
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "3",
+          "width": "18",
+          "height": "18",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 13h-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 17H7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 13h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 17h.01"
+        }
+      ]
+    ],
+    "camera": [
+      [
+        "path",
+        {
+          "d": "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "13",
+          "r": "3"
+        }
+      ]
+    ],
+    "chart-area": [
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"
+        }
+      ]
+    ],
+    "chart-column": [
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 17V9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 17V5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 17v-3"
+        }
+      ]
+    ],
+    "chart-line": [
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 9-5 5-4-4-3 3"
+        }
+      ]
+    ],
+    "chart-pie": [
+      [
+        "path",
+        {
+          "d": "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.21 15.89A10 10 0 1 1 8 2.83"
+        }
+      ]
+    ],
+    "chart-scatter": [
+      [
+        "circle",
+        {
+          "cx": "7.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18.5",
+          "cy": "5.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11.5",
+          "cy": "11.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7.5",
+          "cy": "16.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17.5",
+          "cy": "14.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3v16a2 2 0 0 0 2 2h16"
+        }
+      ]
+    ],
+    "check": [
+      [
+        "path",
+        {
+          "d": "M20 6 9 17l-5-5"
+        }
+      ]
+    ],
+    "chevron-down": [
+      [
+        "path",
+        {
+          "d": "m6 9 6 6 6-6"
+        }
+      ]
+    ],
+    "chevron-left": [
+      [
+        "path",
+        {
+          "d": "m15 18-6-6 6-6"
+        }
+      ]
+    ],
+    "chevron-right": [
+      [
+        "path",
+        {
+          "d": "m9 18 6-6-6-6"
+        }
+      ]
+    ],
+    "chevron-up": [
+      [
+        "path",
+        {
+          "d": "m18 15-6-6-6 6"
+        }
+      ]
+    ],
+    "chevrons-down": [
+      [
+        "path",
+        {
+          "d": "m7 6 5 5 5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 13 5 5 5-5"
+        }
+      ]
+    ],
+    "chevrons-up": [
+      [
+        "path",
+        {
+          "d": "m17 11-5-5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 18-5-5-5 5"
+        }
+      ]
+    ],
+    "chevrons-up-down": [
+      [
+        "path",
+        {
+          "d": "m7 15 5 5 5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 9 5-5 5 5"
+        }
+      ]
+    ],
+    "circle": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ]
+    ],
+    "circle-alert": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12",
+          "y1": "8",
+          "y2": "12"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12.01",
+          "y1": "16",
+          "y2": "16"
+        }
+      ]
+    ],
+    "circle-check": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 9-5.5 5.5L8 12"
+        }
+      ]
+    ],
+    "circle-dollar-sign": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18V6"
+        }
+      ]
+    ],
+    "circle-dot": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ]
+    ],
+    "circle-play": [
+      [
+        "path",
+        {
+          "d": "M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ]
+    ],
+    "circle-plus": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8v8"
+        }
+      ]
+    ],
+    "circle-question-mark": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ]
+    ],
+    "circle-slash": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "9",
+          "x2": "15",
+          "y1": "15",
+          "y2": "9"
+        }
+      ]
+    ],
+    "circle-user": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "10",
+          "r": "3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"
+        }
+      ]
+    ],
+    "circle-x": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 9-6 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 9 6 6"
+        }
+      ]
+    ],
+    "clipboard-check": [
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "4",
+          "x": "8",
+          "y": "2",
+          "rx": "1",
+          "ry": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 14 2 2 4-4"
+        }
+      ]
+    ],
+    "clipboard-list": [
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "4",
+          "x": "8",
+          "y": "2",
+          "rx": "1",
+          "ry": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 11h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 11h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 16h.01"
+        }
+      ]
+    ],
+    "clock": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 6v6l4 2"
+        }
+      ]
+    ],
+    "cloud": [
+      [
+        "path",
+        {
+          "d": "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
+        }
+      ]
+    ],
+    "cloud-off": [
+      [
+        "path",
+        {
+          "d": "M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m2 2 20 20"
+        }
+      ]
+    ],
+    "cloud-upload": [
+      [
+        "path",
+        {
+          "d": "M12 13v8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m8 17 4-4 4 4"
+        }
+      ]
+    ],
+    "code-xml": [
+      [
+        "path",
+        {
+          "d": "m18 16 4-4-4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 8-4 4 4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.5 4-5 16"
+        }
+      ]
+    ],
+    "columns-3": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 3v18"
+        }
+      ]
+    ],
+    "command": [
+      [
+        "path",
+        {
+          "d": "M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
+        }
+      ]
+    ],
+    "compass": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"
+        }
+      ]
+    ],
+    "cookie": [
+      [
+        "path",
+        {
+          "d": "M11 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 12h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 16h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 3h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 4h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 8h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 14h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 8h.01"
+        }
+      ]
+    ],
+    "copy": [
+      [
+        "rect",
+        {
+          "width": "14",
+          "height": "14",
+          "x": "8",
+          "y": "8",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+        }
+      ]
+    ],
+    "credit-card": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "5",
+          "rx": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "2",
+          "x2": "22",
+          "y1": "10",
+          "y2": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 14h2"
+        }
+      ]
+    ],
+    "database": [
+      [
+        "ellipse",
+        {
+          "cx": "12",
+          "cy": "5",
+          "rx": "9",
+          "ry": "3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5V19A9 3 0 0 0 21 19V5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12A9 3 0 0 0 21 12"
+        }
+      ]
+    ],
+    "dollar-sign": [
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12",
+          "y1": "2",
+          "y2": "22"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
+        }
+      ]
+    ],
+    "dot": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ]
+    ],
+    "download": [
+      [
+        "path",
+        {
+          "d": "M12 15V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 10 5 5 5-5"
+        }
+      ]
+    ],
+    "ellipsis": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "19",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "5",
+          "cy": "12",
+          "r": "1"
+        }
+      ]
+    ],
+    "ellipsis-vertical": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "5",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "19",
+          "r": "1"
+        }
+      ]
+    ],
+    "external-link": [
+      [
+        "path",
+        {
+          "d": "M15 3h6v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 14 21 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+        }
+      ]
+    ],
+    "eye": [
+      [
+        "path",
+        {
+          "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "3"
+        }
+      ]
+    ],
+    "eye-off": [
+      [
+        "path",
+        {
+          "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m2 2 20 20"
+        }
+      ]
+    ],
+    "file": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ]
+    ],
+    "file-code": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 12.5 8 15l2 2.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14 12.5 2 2.5-2 2.5"
+        }
+      ]
+    ],
+    "file-down": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18v-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 15 3 3 3-3"
+        }
+      ]
+    ],
+    "file-image": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "12",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"
+        }
+      ]
+    ],
+    "file-pen": [
+      [
+        "path",
+        {
+          "d": "M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"
+        }
+      ]
+    ],
+    "file-pen-line": [
+      [
+        "path",
+        {
+          "d": "M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14.487 7.858A1 1 0 0 1 14 7V2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 18h1"
+        }
+      ]
+    ],
+    "file-plus": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 15h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18v-6"
+        }
+      ]
+    ],
+    "file-question-mark": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"
+        }
+      ]
+    ],
+    "file-search": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11.5",
+          "cy": "14.5",
+          "r": "2.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13.3 16.3 15 18"
+        }
+      ]
+    ],
+    "file-spreadsheet": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 13h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 17h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 17h2"
+        }
+      ]
+    ],
+    "file-text": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 9H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 13H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 17H8"
+        }
+      ]
+    ],
+    "file-up": [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 12v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 15-3-3-3 3"
+        }
+      ]
+    ],
+    "file-video-camera": [
+      [
+        "path",
+        {
+          "d": "M4 12V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 2v5a1 1 0 0 0 1 1h5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m10 17.843 3.033-1.755a.64.64 0 0 1 .967.56v4.704a.65.65 0 0 1-.967.56L10 20.157"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "6",
+          "x": "3",
+          "y": "16",
+          "rx": "1"
+        }
+      ]
+    ],
+    "files": [
+      [
+        "path",
+        {
+          "d": "M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1"
+        }
+      ]
+    ],
+    "film": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 7.5h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 16.5h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 7.5h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 16.5h4"
+        }
+      ]
+    ],
+    "fingerprint-pattern": [
+      [
+        "path",
+        {
+          "d": "M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 13.12c0 2.38 0 6.38-1 8.88"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.29 21.02c.12-.6.43-2.3.5-3.02"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12a10 10 0 0 1 18-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 16h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.8 16c.2-2 .131-5.354 0-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8.65 22c.21-.66.45-1.32.57-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 6.8a6 6 0 0 1 9 5.2v2"
+        }
+      ]
+    ],
+    "flag": [
+      [
+        "path",
+        {
+          "d": "M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"
+        }
+      ]
+    ],
+    "folder": [
+      [
+        "path",
+        {
+          "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+        }
+      ]
+    ],
+    "folder-archive": [
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "19",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 11v-1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 17v-2"
+        }
+      ]
+    ],
+    "folder-kanban": [
+      [
+        "path",
+        {
+          "d": "M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 10v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 10v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 10v6"
+        }
+      ]
+    ],
+    "folder-open": [
+      [
+        "path",
+        {
+          "d": "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
+        }
+      ]
+    ],
+    "folder-plus": [
+      [
+        "path",
+        {
+          "d": "M12 10v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 13h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+        }
+      ]
+    ],
+    "folder-tree": [
+      [
+        "path",
+        {
+          "d": "M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5a2 2 0 0 0 2 2h3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3v13a2 2 0 0 0 2 2h3"
+        }
+      ]
+    ],
+    "funnel": [
+      [
+        "path",
+        {
+          "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
+        }
+      ]
+    ],
+    "gift": [
+      [
+        "path",
+        {
+          "d": "M12 7v14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "7",
+          "width": "18",
+          "height": "4",
+          "rx": "1"
+        }
+      ]
+    ],
+    "git-compare": [
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "18",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6",
+          "cy": "6",
+          "r": "3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 6h3a2 2 0 0 1 2 2v7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 18H8a2 2 0 0 1-2-2V9"
+        }
+      ]
+    ],
+    "globe": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h20"
+        }
+      ]
+    ],
+    "globe-lock": [
+      [
+        "path",
+        {
+          "d": "M15.686 15A14.5 14.5 0 0 1 12 22a14.5 14.5 0 0 1 0-20 10 10 0 1 0 9.542 13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h8.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 6V4a2 2 0 1 0-4 0v2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "5",
+          "x": "14",
+          "y": "6",
+          "rx": "1"
+        }
+      ]
+    ],
+    "graduation-cap": [
+      [
+        "path",
+        {
+          "d": "M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 10v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 12.5V16a6 3 0 0 0 12 0v-3.5"
+        }
+      ]
+    ],
+    "grid-3x3": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 15h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 3v18"
+        }
+      ]
+    ],
+    "grip-vertical": [
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "5",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "19",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "12",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "5",
+          "r": "1"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15",
+          "cy": "19",
+          "r": "1"
+        }
+      ]
+    ],
+    "group": [
+      [
+        "path",
+        {
+          "d": "M3 7V5c0-1.1.9-2 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 3h2c1.1 0 2 .9 2 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 17v2c0 1.1-.9 2-2 2h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 21H5c-1.1 0-2-.9-2-2v-2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "7",
+          "y": "7",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "10",
+          "y": "12",
+          "rx": "1"
+        }
+      ]
+    ],
+    "handshake": [
+      [
+        "path",
+        {
+          "d": "m11 17 2 2a1 1 0 1 0 3-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 3 1 11h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 4h8"
+        }
+      ]
+    ],
+    "hash": [
+      [
+        "line",
+        {
+          "x1": "4",
+          "x2": "20",
+          "y1": "9",
+          "y2": "9"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "4",
+          "x2": "20",
+          "y1": "15",
+          "y2": "15"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "10",
+          "x2": "8",
+          "y1": "3",
+          "y2": "21"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "16",
+          "x2": "14",
+          "y1": "3",
+          "y2": "21"
+        }
+      ]
+    ],
+    "heading": [
+      [
+        "path",
+        {
+          "d": "M6 12h12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 20V4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 20V4"
+        }
+      ]
+    ],
+    "headphones": [
+      [
+        "path",
+        {
+          "d": "M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"
+        }
+      ]
+    ],
+    "heart": [
+      [
+        "path",
+        {
+          "d": "M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+        }
+      ]
+    ],
+    "heart-handshake": [
+      [
+        "path",
+        {
+          "d": "M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"
+        }
+      ]
+    ],
+    "hourglass": [
+      [
+        "path",
+        {
+          "d": "M5 22h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 2h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"
+        }
+      ]
+    ],
+    "house": [
+      [
+        "path",
+        {
+          "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+        }
+      ]
+    ],
+    "id-card": [
+      [
+        "path",
+        {
+          "d": "M13 19a4 4 0 00-8 0"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 10h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 14h2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "2",
+          "y": "5",
+          "width": "20",
+          "height": "14",
+          "rx": "2"
+        }
+      ]
+    ],
+    "image": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "9",
+          "r": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+        }
+      ]
+    ],
+    "image-off": [
+      [
+        "line",
+        {
+          "x1": "2",
+          "x2": "22",
+          "y1": "2",
+          "y2": "22"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10.41 10.41a2 2 0 1 1-2.83-2.83"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "13.5",
+          "x2": "6",
+          "y1": "13.5",
+          "y2": "21"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "18",
+          "x2": "21",
+          "y1": "12",
+          "y2": "15"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15V5a2 2 0 0 0-2-2H9"
+        }
+      ]
+    ],
+    "image-plus": [
+      [
+        "path",
+        {
+          "d": "M16 5h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 2v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "9",
+          "r": "2"
+        }
+      ]
+    ],
+    "images": [
+      [
+        "path",
+        {
+          "d": "m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "13",
+          "cy": "7",
+          "r": "1",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "8",
+          "y": "2",
+          "width": "14",
+          "height": "14",
+          "rx": "2"
+        }
+      ]
+    ],
+    "inbox": [
+      [
+        "polyline",
+        {
+          "points": "22 12 16 12 14 15 10 15 8 12 2 12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
+        }
+      ]
+    ],
+    "info": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16v-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8h.01"
+        }
+      ]
+    ],
+    "italic": [
+      [
+        "line",
+        {
+          "x1": "19",
+          "x2": "10",
+          "y1": "4",
+          "y2": "4"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "14",
+          "x2": "5",
+          "y1": "20",
+          "y2": "20"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "15",
+          "x2": "9",
+          "y1": "4",
+          "y2": "20"
+        }
+      ]
+    ],
+    "kanban": [
+      [
+        "path",
+        {
+          "d": "M5 3v14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 3v8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 3v18"
+        }
+      ]
+    ],
+    "key": [
+      [
+        "path",
+        {
+          "d": "m2 21 9.6-9.6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7.5 15.5 2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "15.5",
+          "cy": "7.5",
+          "r": "5.5"
+        }
+      ]
+    ],
+    "key-round": [
+      [
+        "path",
+        {
+          "d": "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "16.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "lamp-desk": [
+      [
+        "path",
+        {
+          "d": "M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.207 4.793-3.414 3.414"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18"
+        }
+      ]
+    ],
+    "landmark": [
+      [
+        "path",
+        {
+          "d": "M10 18v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 18v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 18v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 22h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 18v-7"
+        }
+      ]
+    ],
+    "languages": [
+      [
+        "path",
+        {
+          "d": "m5 8 6 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4 14 6-6 2-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 5h12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 22-5-10-5 10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 18h6"
+        }
+      ]
+    ],
+    "laptop": [
+      [
+        "path",
+        {
+          "d": "M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20.054 15.987H3.946"
+        }
+      ]
+    ],
+    "layers": [
+      [
+        "path",
+        {
+          "d": "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"
+        }
+      ]
+    ],
+    "layout-dashboard": [
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "9",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "14",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "9",
+          "x": "14",
+          "y": "12",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "5",
+          "x": "3",
+          "y": "16",
+          "rx": "1"
+        }
+      ]
+    ],
+    "layout-grid": [
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "14",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "14",
+          "y": "14",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "14",
+          "rx": "1"
+        }
+      ]
+    ],
+    "layout-list": [
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "7",
+          "height": "7",
+          "x": "3",
+          "y": "14",
+          "rx": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 4h7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 9h7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 15h7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 20h7"
+        }
+      ]
+    ],
+    "layout-template": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "7",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "9",
+          "height": "7",
+          "x": "3",
+          "y": "14",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "7",
+          "x": "16",
+          "y": "14",
+          "rx": "1"
+        }
+      ]
+    ],
+    "life-buoy": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.93 4.93 4.24 4.24"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.83 9.17 4.24-4.24"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.83 14.83 4.24 4.24"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.17 14.83-4.24 4.24"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ]
+    ],
+    "lightbulb": [
+      [
+        "path",
+        {
+          "d": "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 18h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 22h4"
+        }
+      ]
+    ],
+    "link": [
+      [
+        "path",
+        {
+          "d": "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+        }
+      ]
+    ],
+    "link-2": [
+      [
+        "path",
+        {
+          "d": "M9 17H7A5 5 0 0 1 7 7h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 7h2a5 5 0 1 1 0 10h-2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "8",
+          "x2": "16",
+          "y1": "12",
+          "y2": "12"
+        }
+      ]
+    ],
+    "list": [
+      [
+        "path",
+        {
+          "d": "M3 5h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 19h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 5h13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 12h13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 19h13"
+        }
+      ]
+    ],
+    "list-checks": [
+      [
+        "path",
+        {
+          "d": "M13 5h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m3 17 2 2 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m3 7 2 2 4-4"
+        }
+      ]
+    ],
+    "list-filter": [
+      [
+        "path",
+        {
+          "d": "M2 5h20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 12h12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 19h6"
+        }
+      ]
+    ],
+    "list-ordered": [
+      [
+        "path",
+        {
+          "d": "M11 5h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 12h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 19h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 4h1v5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 9h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"
+        }
+      ]
+    ],
+    "list-todo": [
+      [
+        "path",
+        {
+          "d": "M13 5h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m3 17 2 2 4-4"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "4",
+          "width": "6",
+          "height": "6",
+          "rx": "1"
+        }
+      ]
+    ],
+    "list-tree": [
+      [
+        "path",
+        {
+          "d": "M8 5h13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 12h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 10a2 2 0 0 0 2 2h3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5v12a2 2 0 0 0 2 2h3"
+        }
+      ]
+    ],
+    "loader": [
+      [
+        "path",
+        {
+          "d": "M12 2v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.2 7.8 2.9-2.9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 12h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.2 16.2 2.9 2.9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.9 19.1 2.9-2.9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.9 4.9 2.9 2.9"
+        }
+      ]
+    ],
+    "loader-circle": [
+      [
+        "path",
+        {
+          "d": "M21 12a9 9 0 1 1-6.219-8.56"
+        }
+      ]
+    ],
+    "lock": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "11",
+          "x": "3",
+          "y": "11",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 11V7a5 5 0 0 1 10 0v4"
+        }
+      ]
+    ],
+    "lock-keyhole": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "16",
+          "r": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "3",
+          "y": "10",
+          "width": "18",
+          "height": "12",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 10V7a5 5 0 0 1 10 0v3"
+        }
+      ]
+    ],
+    "log-in": [
+      [
+        "path",
+        {
+          "d": "m10 17 5-5-5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 12H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"
+        }
+      ]
+    ],
+    "log-out": [
+      [
+        "path",
+        {
+          "d": "m16 17 5-5-5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12H9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
+        }
+      ]
+    ],
+    "mail": [
+      [
+        "path",
+        {
+          "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "2",
+          "y": "4",
+          "width": "20",
+          "height": "16",
+          "rx": "2"
+        }
+      ]
+    ],
+    "mail-check": [
+      [
+        "path",
+        {
+          "d": "M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 19 2 2 4-4"
+        }
+      ]
+    ],
+    "mail-open": [
+      [
+        "path",
+        {
+          "d": "M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"
+        }
+      ]
+    ],
+    "map-pin": [
+      [
+        "path",
+        {
+          "d": "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "10",
+          "r": "3"
+        }
+      ]
+    ],
+    "megaphone": [
+      [
+        "path",
+        {
+          "d": "M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 6v8"
+        }
+      ]
+    ],
+    "menu": [
+      [
+        "path",
+        {
+          "d": "M4 5h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 12h16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 19h16"
+        }
+      ]
+    ],
+    "message-circle": [
+      [
+        "path",
+        {
+          "d": "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+        }
+      ]
+    ],
+    "message-circle-question-mark": [
+      [
+        "path",
+        {
+          "d": "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ]
+    ],
+    "message-square": [
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ]
+    ],
+    "message-square-more": [
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 11h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 11h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 11h.01"
+        }
+      ]
+    ],
+    "message-square-quote": [
+      [
+        "path",
+        {
+          "d": "M14 14a2 2 0 0 0 2-2V8h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 14a2 2 0 0 0 2-2V8H8"
+        }
+      ]
+    ],
+    "message-square-text": [
+      [
+        "path",
+        {
+          "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 11h10"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 15h6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 7h8"
+        }
+      ]
+    ],
+    "messages-square": [
+      [
+        "path",
+        {
+          "d": "M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"
+        }
+      ]
+    ],
+    "minus": [
+      [
+        "path",
+        {
+          "d": "M5 12h14"
+        }
+      ]
+    ],
+    "monitor": [
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "8",
+          "x2": "16",
+          "y1": "21",
+          "y2": "21"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12",
+          "y1": "17",
+          "y2": "21"
+        }
+      ]
+    ],
+    "monitor-smartphone": [
+      [
+        "path",
+        {
+          "d": "M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 19v-3.96 3.15"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 19h5"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "6",
+          "height": "10",
+          "x": "16",
+          "y": "12",
+          "rx": "2"
+        }
+      ]
+    ],
+    "moon": [
+      [
+        "path",
+        {
+          "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+        }
+      ]
+    ],
+    "mountain": [
+      [
+        "path",
+        {
+          "d": "m8 3 4 8 5-5 5 15H2L8 3z"
+        }
+      ]
+    ],
+    "mouse-pointer-click": [
+      [
+        "path",
+        {
+          "d": "M14 4.1 12 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m5.1 8-2.9-.8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 12-1.9 2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.2 2.2 8 5.1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"
+        }
+      ]
+    ],
+    "move-right": [
+      [
+        "path",
+        {
+          "d": "M18 8L22 12L18 16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12H22"
+        }
+      ]
+    ],
+    "music": [
+      [
+        "path",
+        {
+          "d": "M9 18V5l12-2v13"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6",
+          "cy": "18",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "16",
+          "r": "3"
+        }
+      ]
+    ],
+    "newspaper": [
+      [
+        "path",
+        {
+          "d": "M15 18h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18 14h-8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "8",
+          "height": "4",
+          "x": "10",
+          "y": "6",
+          "rx": "1"
+        }
+      ]
+    ],
+    "orbit": [
+      [
+        "path",
+        {
+          "d": "M20.341 6.484A10 10 0 0 1 10.266 21.85"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.659 17.516A10 10 0 0 1 13.74 2.152"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "19",
+          "cy": "5",
+          "r": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "5",
+          "cy": "19",
+          "r": "2"
+        }
+      ]
+    ],
+    "package": [
+      [
+        "path",
+        {
+          "d": "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 22V12"
+        }
+      ],
+      [
+        "polyline",
+        {
+          "points": "3.29 7 12 12 20.71 7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7.5 4.27 9 5.15"
+        }
+      ]
+    ],
+    "package-check": [
+      [
+        "path",
+        {
+          "d": "M12 22V12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 17 2 2 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.29 7 12 12l8.71-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7.5 4.27 8.997 5.148"
+        }
+      ]
+    ],
+    "package-open": [
+      [
+        "path",
+        {
+          "d": "M12 22v-9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"
+        }
+      ]
+    ],
+    "palette": [
+      [
+        "path",
+        {
+          "d": "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "13.5",
+          "cy": "6.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17.5",
+          "cy": "10.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6.5",
+          "cy": "12.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "8.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "panel-bottom": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 15h18"
+        }
+      ]
+    ],
+    "panel-left": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ]
+    ],
+    "panel-left-close": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 15-3-3 3-3"
+        }
+      ]
+    ],
+    "panel-top": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ]
+    ],
+    "paperclip": [
+      [
+        "path",
+        {
+          "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"
+        }
+      ]
+    ],
+    "pause": [
+      [
+        "rect",
+        {
+          "x": "14",
+          "y": "3",
+          "width": "5",
+          "height": "18",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "5",
+          "y": "3",
+          "width": "5",
+          "height": "18",
+          "rx": "1"
+        }
+      ]
+    ],
+    "pencil": [
+      [
+        "path",
+        {
+          "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 5 4 4"
+        }
+      ]
+    ],
+    "pencil-line": [
+      [
+        "path",
+        {
+          "d": "M13 21h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 5 4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
+        }
+      ]
+    ],
+    "percent": [
+      [
+        "line",
+        {
+          "x1": "19",
+          "x2": "5",
+          "y1": "5",
+          "y2": "19"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6.5",
+          "cy": "6.5",
+          "r": "2.5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17.5",
+          "cy": "17.5",
+          "r": "2.5"
+        }
+      ]
+    ],
+    "phone": [
+      [
+        "path",
+        {
+          "d": "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"
+        }
+      ]
+    ],
+    "pilcrow": [
+      [
+        "path",
+        {
+          "d": "M13 4v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 4v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 4H9.5a4.5 4.5 0 0 0 0 9H13"
+        }
+      ]
+    ],
+    "pin": [
+      [
+        "path",
+        {
+          "d": "M12 17v5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"
+        }
+      ]
+    ],
+    "play": [
+      [
+        "path",
+        {
+          "d": "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+        }
+      ]
+    ],
+    "plug": [
+      [
+        "path",
+        {
+          "d": "M12 22v-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 8V2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 8V2"
+        }
+      ]
+    ],
+    "plug-zap": [
+      [
+        "path",
+        {
+          "d": "M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m2 22 3-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7.5 13.5 10 11"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10.5 16.5 13 14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m18 3-4 4h6l-4 4"
+        }
+      ]
+    ],
+    "plus": [
+      [
+        "path",
+        {
+          "d": "M5 12h14"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 5v14"
+        }
+      ]
+    ],
+    "presentation": [
+      [
+        "path",
+        {
+          "d": "M2 3h20"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m7 21 5-5 5 5"
+        }
+      ]
+    ],
+    "printer": [
+      [
+        "path",
+        {
+          "d": "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "6",
+          "y": "14",
+          "width": "12",
+          "height": "8",
+          "rx": "1"
+        }
+      ]
+    ],
+    "puzzle": [
+      [
+        "path",
+        {
+          "d": "M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"
+        }
+      ]
+    ],
+    "qr-code": [
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "5",
+          "x": "3",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "5",
+          "x": "16",
+          "y": "3",
+          "rx": "1"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "5",
+          "height": "5",
+          "x": "3",
+          "y": "16",
+          "rx": "1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 16h-3a2 2 0 0 0-2 2v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 21v.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 7v3a2 2 0 0 1-2 2H7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 12h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 3h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16v.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 12h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12v.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 21v-1"
+        }
+      ]
+    ],
+    "quote": [
+      [
+        "path",
+        {
+          "d": "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
+        }
+      ]
+    ],
+    "receipt-text": [
+      [
+        "path",
+        {
+          "d": "M13 16H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 8H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 12H8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"
+        }
+      ]
+    ],
+    "redo-2": [
+      [
+        "path",
+        {
+          "d": "m15 14 5-5-5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"
+        }
+      ]
+    ],
+    "refresh-cw": [
+      [
+        "path",
+        {
+          "d": "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 3v5h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 16H3v5"
+        }
+      ]
+    ],
+    "rocket": [
+      [
+        "path",
+        {
+          "d": "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"
+        }
+      ]
+    ],
+    "rotate-ccw": [
+      [
+        "path",
+        {
+          "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 3v5h5"
+        }
+      ]
+    ],
+    "rotate-cw": [
+      [
+        "path",
+        {
+          "d": "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 3v5h-5"
+        }
+      ]
+    ],
+    "rows-3": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 9H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15H3"
+        }
+      ]
+    ],
+    "save": [
+      [
+        "path",
+        {
+          "d": "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 3v4a1 1 0 0 0 1 1h7"
+        }
+      ]
+    ],
+    "scale": [
+      [
+        "path",
+        {
+          "d": "M12 3v18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19 8 3 8a5 5 0 0 1-6 0zV7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m5 8 3 8a5 5 0 0 1-6 0zV7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 21h10"
+        }
+      ]
+    ],
+    "scan-face": [
+      [
+        "path",
+        {
+          "d": "M3 7V5a2 2 0 0 1 2-2h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 3h2a2 2 0 0 1 2 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 17v2a2 2 0 0 1-2 2h-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 21H5a2 2 0 0 1-2-2v-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 14s1.5 2 4 2 4-2 4-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 9h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 9h.01"
+        }
+      ]
+    ],
+    "scroll-text": [
+      [
+        "path",
+        {
+          "d": "M15 12h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 8h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 17V5a2 2 0 0 0-2-2H4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"
+        }
+      ]
+    ],
+    "search": [
+      [
+        "path",
+        {
+          "d": "m21 21-4.34-4.34"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11",
+          "cy": "11",
+          "r": "8"
+        }
+      ]
+    ],
+    "search-x": [
+      [
+        "path",
+        {
+          "d": "m13.5 8.5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m8.5 8.5 5 5"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "11",
+          "cy": "11",
+          "r": "8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21 21-4.3-4.3"
+        }
+      ]
+    ],
+    "send": [
+      [
+        "path",
+        {
+          "d": "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m21.854 2.147-10.94 10.939"
+        }
+      ]
+    ],
+    "settings": [
+      [
+        "path",
+        {
+          "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "3"
+        }
+      ]
+    ],
+    "settings-2": [
+      [
+        "path",
+        {
+          "d": "M14 17H5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 7h-9"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17",
+          "cy": "17",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7",
+          "cy": "7",
+          "r": "3"
+        }
+      ]
+    ],
+    "share": [
+      [
+        "path",
+        {
+          "d": "M12 2v13"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 6-4-4-4 4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"
+        }
+      ]
+    ],
+    "share-2": [
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "5",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "6",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "19",
+          "r": "3"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "8.59",
+          "x2": "15.42",
+          "y1": "13.51",
+          "y2": "17.49"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "15.41",
+          "x2": "8.59",
+          "y1": "6.51",
+          "y2": "10.49"
+        }
+      ]
+    ],
+    "shield": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ]
+    ],
+    "shield-alert": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 16h.01"
+        }
+      ]
+    ],
+    "shield-ban": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.243 5.21 14.39 12.472"
+        }
+      ]
+    ],
+    "shield-check": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9 12 2 2 4-4"
+        }
+      ]
+    ],
+    "shield-x": [
+      [
+        "path",
+        {
+          "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.5 9.5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m9.5 9.5 5 5"
+        }
+      ]
+    ],
+    "shopping-bag": [
+      [
+        "path",
+        {
+          "d": "M16 10a4 4 0 0 1-8 0"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.103 6.034h17.794"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"
+        }
+      ]
+    ],
+    "shopping-cart": [
+      [
+        "path",
+        {
+          "d": "m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "20",
+          "r": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "8",
+          "cy": "20",
+          "r": "2"
+        }
+      ]
+    ],
+    "sliders-horizontal": [
+      [
+        "path",
+        {
+          "d": "M10 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 19H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 3v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 17v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12h-9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 19h-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 5h-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 10v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 12H3"
+        }
+      ]
+    ],
+    "sliders-vertical": [
+      [
+        "path",
+        {
+          "d": "M10 8h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 21v-9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 8V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 16h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 12V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 21v-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 14h4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 10V3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 21v-7"
+        }
+      ]
+    ],
+    "smartphone": [
+      [
+        "rect",
+        {
+          "width": "14",
+          "height": "20",
+          "x": "5",
+          "y": "2",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 18h.01"
+        }
+      ]
+    ],
+    "sparkles": [
+      [
+        "path",
+        {
+          "d": "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 2v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 4h-4"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "4",
+          "cy": "20",
+          "r": "2"
+        }
+      ]
+    ],
+    "square": [
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ]
+    ],
+    "square-pen": [
+      [
+        "path",
+        {
+          "d": "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"
+        }
+      ]
+    ],
+    "star": [
+      [
+        "path",
+        {
+          "d": "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
+        }
+      ]
+    ],
+    "star-half": [
+      [
+        "path",
+        {
+          "d": "M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"
+        }
+      ]
+    ],
+    "store": [
+      [
+        "path",
+        {
+          "d": "M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"
+        }
+      ]
+    ],
+    "sun": [
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "12",
+          "r": "4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 20v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4.93 4.93 1.41 1.41"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17.66 17.66 1.41 1.41"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 12h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M20 12h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6.34 17.66-1.41 1.41"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19.07 4.93-1.41 1.41"
+        }
+      ]
+    ],
+    "table": [
+      [
+        "path",
+        {
+          "d": "M12 3v18"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 9h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 15h18"
+        }
+      ]
+    ],
+    "table-properties": [
+      [
+        "path",
+        {
+          "d": "M15 3v18"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "18",
+          "height": "18",
+          "x": "3",
+          "y": "3",
+          "rx": "2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 9H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15H3"
+        }
+      ]
+    ],
+    "tablet": [
+      [
+        "rect",
+        {
+          "width": "16",
+          "height": "20",
+          "x": "4",
+          "y": "2",
+          "rx": "2",
+          "ry": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "12.01",
+          "y1": "18",
+          "y2": "18"
+        }
+      ]
+    ],
+    "tag": [
+      [
+        "path",
+        {
+          "d": "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7.5",
+          "cy": "7.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "tags": [
+      [
+        "path",
+        {
+          "d": "M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10.5",
+          "cy": "6.5",
+          "r": ".5",
+          "fill": "currentColor"
+        }
+      ]
+    ],
+    "terminal": [
+      [
+        "path",
+        {
+          "d": "M12 19h8"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m4 17 6-6-6-6"
+        }
+      ]
+    ],
+    "text-align-center": [
+      [
+        "path",
+        {
+          "d": "M21 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 12H7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 19H5"
+        }
+      ]
+    ],
+    "text-align-end": [
+      [
+        "path",
+        {
+          "d": "M21 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12H9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 19H7"
+        }
+      ]
+    ],
+    "text-align-start": [
+      [
+        "path",
+        {
+          "d": "M21 5H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 12H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 19H3"
+        }
+      ]
+    ],
+    "text-cursor-input": [
+      [
+        "path",
+        {
+          "d": "M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 6v12"
+        }
+      ]
+    ],
+    "thumbs-down": [
+      [
+        "path",
+        {
+          "d": "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M17 14V2"
+        }
+      ]
+    ],
+    "thumbs-up": [
+      [
+        "path",
+        {
+          "d": "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 10v12"
+        }
+      ]
+    ],
+    "ticket-percent": [
+      [
+        "path",
+        {
+          "d": "M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 9h.01"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15 9-6 6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 15h.01"
+        }
+      ]
+    ],
+    "timer": [
+      [
+        "line",
+        {
+          "x1": "10",
+          "x2": "14",
+          "y1": "2",
+          "y2": "2"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "12",
+          "x2": "15",
+          "y1": "14",
+          "y2": "11"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "14",
+          "r": "8"
+        }
+      ]
+    ],
+    "toggle-left": [
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "12",
+          "r": "3"
+        }
+      ],
+      [
+        "rect",
+        {
+          "width": "20",
+          "height": "14",
+          "x": "2",
+          "y": "5",
+          "rx": "7"
+        }
+      ]
+    ],
+    "trash": [
+      [
+        "path",
+        {
+          "d": "M10 11v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M14 11v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 6h18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+        }
+      ]
+    ],
+    "trees": [
+      [
+        "path",
+        {
+          "d": "M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 16v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M13 19v3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"
+        }
+      ]
+    ],
+    "trending-down": [
+      [
+        "path",
+        {
+          "d": "M16 17h6v-6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 17-8.5-8.5-5 5L2 7"
+        }
+      ]
+    ],
+    "trending-up": [
+      [
+        "path",
+        {
+          "d": "M16 7h6v6"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m22 7-8.5 8.5-5-5L2 17"
+        }
+      ]
+    ],
+    "triangle-alert": [
+      [
+        "path",
+        {
+          "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 9v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M12 17h.01"
+        }
+      ]
+    ],
+    "truck": [
+      [
+        "path",
+        {
+          "d": "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M15 18H9"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "17",
+          "cy": "18",
+          "r": "2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "7",
+          "cy": "18",
+          "r": "2"
+        }
+      ]
+    ],
+    "type": [
+      [
+        "path",
+        {
+          "d": "M12 4v16"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M9 20h6"
+        }
+      ]
+    ],
+    "undo-2": [
+      [
+        "path",
+        {
+          "d": "M9 14 4 9l5-5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"
+        }
+      ]
+    ],
+    "upload": [
+      [
+        "path",
+        {
+          "d": "M12 3v12"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m17 8-5-5-5 5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+        }
+      ]
+    ],
+    "user": [
+      [
+        "path",
+        {
+          "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "12",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-check": [
+      [
+        "path",
+        {
+          "d": "m16 11 2 2 4-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-cog": [
+      [
+        "path",
+        {
+          "d": "M10 15H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14.305 16.53.923-.382"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m15.228 13.852-.923-.383"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.852 12.228-.383-.923"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16.852 17.772-.383.924"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19.148 12.228.383-.923"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m19.53 18.696-.382-.924"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m20.772 13.852.924-.383"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m20.772 16.148.924.383"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "18",
+          "cy": "15",
+          "r": "3"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-pen": [
+      [
+        "path",
+        {
+          "d": "M11.5 15H7a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "user-plus": [
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "19",
+          "x2": "19",
+          "y1": "8",
+          "y2": "14"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "22",
+          "x2": "16",
+          "y1": "11",
+          "y2": "11"
+        }
+      ]
+    ],
+    "user-round-check": [
+      [
+        "path",
+        {
+          "d": "M2 21a8 8 0 0 1 13.292-6"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "8",
+          "r": "5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m16 19 2 2 4-4"
+        }
+      ]
+    ],
+    "user-x": [
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "17",
+          "x2": "22",
+          "y1": "8",
+          "y2": "13"
+        }
+      ],
+      [
+        "line",
+        {
+          "x1": "22",
+          "x2": "17",
+          "y1": "8",
+          "y2": "13"
+        }
+      ]
+    ],
+    "users": [
+      [
+        "path",
+        {
+          "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M16 3.128a4 4 0 0 1 0 7.744"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 21v-2a4 4 0 0 0-3-3.87"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "9",
+          "cy": "7",
+          "r": "4"
+        }
+      ]
+    ],
+    "users-round": [
+      [
+        "path",
+        {
+          "d": "M18 21a8 8 0 0 0-16 0"
+        }
+      ],
+      [
+        "circle",
+        {
+          "cx": "10",
+          "cy": "8",
+          "r": "5"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"
+        }
+      ]
+    ],
+    "video": [
+      [
+        "path",
+        {
+          "d": "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"
+        }
+      ],
+      [
+        "rect",
+        {
+          "x": "2",
+          "y": "6",
+          "width": "14",
+          "height": "12",
+          "rx": "2"
+        }
+      ]
+    ],
+    "wallet": [
+      [
+        "path",
+        {
+          "d": "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"
+        }
+      ]
+    ],
+    "wand-sparkles": [
+      [
+        "path",
+        {
+          "d": "m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m14 7 3 3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M5 6v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M19 14v4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M10 2v2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M7 8H3"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 16h-4"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M11 3H9"
+        }
+      ]
+    ],
+    "webhook": [
+      [
+        "path",
+        {
+          "d": "M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"
+        }
+      ]
+    ],
+    "wrench": [
+      [
+        "path",
+        {
+          "d": "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"
+        }
+      ]
+    ],
+    "x": [
+      [
+        "path",
+        {
+          "d": "M18 6 6 18"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "m6 6 12 12"
+        }
+      ]
+    ],
+    "zap": [
+      [
+        "path",
+        {
+          "d": "M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"
+        }
+      ]
+    ]
+  }
+}
diff --git a/packages/twig/ui/ui/radio/radio.html.twig b/packages/twig/ui/ui/radio/radio.html.twig
new file mode 100644
index 0000000..090d604
--- /dev/null
+++ b/packages/twig/ui/ui/radio/radio.html.twig
@@ -0,0 +1,18 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/radio.json
+    Radio: Radio renders input[type=radio] with shared Name for grouping.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Checked (bool), Disabled (bool), Required (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<input
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  type="radio"
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Value ?? '')) %} value="{{ (p.Value ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/radio/radio.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if (p.Checked ?? false) %} checked{%- endif %}
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {%- if (p.Required ?? false) %} required{%- endif %}
+  {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.TabIndex ?? '')) %} tabindex="{{ (p.TabIndex ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/radio/radio.variants.json b/packages/twig/ui/ui/radio/radio.variants.json
new file mode 100644
index 0000000..48c72cb
--- /dev/null
+++ b/packages/twig/ui/ui/radio/radio.variants.json
@@ -0,0 +1,23 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.radio",
+  "base": "shrink-0 appearance-none rounded-full bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary radio-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5 [--dot:10px]",
+      "sm": "size-4 [--dot:8px]"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/range/range.html.twig b/packages/twig/ui/ui/range/range.html.twig
new file mode 100644
index 0000000..ce44302
--- /dev/null
+++ b/packages/twig/ui/ui/range/range.html.twig
@@ -0,0 +1,15 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/range.json
+    Range: Range renders input type=range.
+    Props (p): Value (string), Min (int), Max (int), Step (int), Disabled (bool), AriaLabel (string), Class (string), Attrs (attrs). -#}
+<input
+  type="range"
+  class="{{ ui_compose('ui/range/range.variants.json', {}, [(p.Class ?? '')]) }}"
+  min="{{ (((p.Min ?? 0) > 0) ? ui_s((p.Min ?? 0)) : '0') }}"
+  max="{{ (((p.Max ?? 0) > 0) ? ui_s((p.Max ?? 0)) : '100') }}"
+  step="{{ (((p.Step ?? 0) > 0) ? ui_s((p.Step ?? 0)) : '1') }}"
+  {%- if ui_is_set_str((p.Value ?? '')) %} value="{{ (p.Value ?? '') }}"{%- endif %}
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/range/range.variants.json b/packages/twig/ui/ui/range/range.variants.json
new file mode 100644
index 0000000..0f9b0de
--- /dev/null
+++ b/packages/twig/ui/ui/range/range.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.range",
+  "base": "h-5 w-full cursor-pointer appearance-none bg-transparent accent-primary disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded [&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/select/opt-group.html.twig b/packages/twig/ui/ui/select/opt-group.html.twig
new file mode 100644
index 0000000..a5b95c8
--- /dev/null
+++ b/packages/twig/ui/ui/select/opt-group.html.twig
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/select.json
+    OptGroup: OptGroup renders a native optgroup around option children.
+    Props (p): Class (string), Label (string), Disabled (bool), Attrs (attrs); children: markup. -#}
+<optgroup
+  class="{{ ui_cn([(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.Label ?? '')) %} label="{{ (p.Label ?? '') }}"{%- endif %}
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</optgroup>
diff --git a/packages/twig/ui/ui/select/select-option.html.twig b/packages/twig/ui/ui/select/select-option.html.twig
new file mode 100644
index 0000000..f3711a4
--- /dev/null
+++ b/packages/twig/ui/ui/select/select-option.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/select.json
+    SelectOption: SelectOption renders an option for custom Select children.
+    Props (p): Value (string), Label (string), Selected (bool), Disabled (bool), Attrs (attrs); children: markup. -#}
+<option
+  {%- if ui_is_set_str((p.Value ?? '')) %} value="{{ (p.Value ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Label ?? '')) %} label="{{ (p.Label ?? '') }}"{%- endif %}
+  {%- if (p.Selected ?? false) %} selected{%- endif %}
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</option>
diff --git a/packages/twig/ui/ui/select/select.html.twig b/packages/twig/ui/ui/select/select.html.twig
new file mode 100644
index 0000000..7ec96e2
--- /dev/null
+++ b/packages/twig/ui/ui/select/select.html.twig
@@ -0,0 +1,23 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/select.json
+    Select: Select renders option children from the Options list plus manual children.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Disabled (bool), Required (bool), Options (SelectOptionItem[]), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs); children: markup. -#}
+<select
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/select/select.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {%- if (p.Required ?? false) %} required{%- endif %}
+  {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.TabIndex ?? '')) %} tabindex="{{ (p.TabIndex ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
+  {%- for item in (p.Options ?? []) %}
+    <option
+      value="{{ ui_field(item, 'Value', '') }}"
+      {%- if ui_eq(ui_field(item, 'Value', ''), (p.Value ?? '')) %} selected{%- endif %}
+    >{{ ui_field(item, 'Label', '') }}</option>
+  {%- endfor %}
+  {{ (children ?? '')|raw }}
+</select>
diff --git a/packages/twig/ui/ui/select/select.variants.json b/packages/twig/ui/ui/select/select.variants.json
new file mode 100644
index 0000000..132d2e8
--- /dev/null
+++ b/packages/twig/ui/ui/select/select.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.select",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-3 text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/separator/separator.html.twig b/packages/twig/ui/ui/separator/separator.html.twig
new file mode 100644
index 0000000..8d90ccb
--- /dev/null
+++ b/packages/twig/ui/ui/separator/separator.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/separator.json
+    Separator: Separator renders hr with optional decorative semantics.
+    Props (p): Variant (string), Orientation (string), Class (string), Decorative (bool), Attrs (attrs). -#}
+<hr
+  class="{{ ui_compose('ui/separator/separator.variants.json', {'orientation': (p.Orientation ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if (p.Decorative ?? false) %} role="presentation"{%- endif %}
+  {%- if (p.Decorative ?? false) %} aria-hidden="true"{%- endif %}
+  {%- if ui_eq((p.Orientation ?? ''), 'vertical') %} aria-orientation="vertical"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/separator/separator.variants.json b/packages/twig/ui/ui/separator/separator.variants.json
new file mode 100644
index 0000000..909771e
--- /dev/null
+++ b/packages/twig/ui/ui/separator/separator.variants.json
@@ -0,0 +1,24 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.separator",
+  "base": "shrink-0 border-0 bg-border",
+  "keys": [
+    "orientation",
+    "variant"
+  ],
+  "defaults": {
+    "orientation": "horizontal",
+    "variant": "default"
+  },
+  "byKey": {
+    "orientation": {
+      "horizontal": "h-px w-full",
+      "vertical": "h-full w-px"
+    },
+    "variant": {
+      "default": "",
+      "spaced": "my-6"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/sheet/sheet-close.html.twig b/packages/twig/ui/ui/sheet/sheet-close.html.twig
new file mode 100644
index 0000000..5bf1af5
--- /dev/null
+++ b/packages/twig/ui/ui/sheet/sheet-close.html.twig
@@ -0,0 +1,26 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/sheet.json
+    SheetClose: SheetClose renders the close button (Lucide x) inside the panel.
+    Props (p): Variant (string), Size (string), Class (string), AriaLabel (string), Attrs (attrs). -#}
+<button
+  type="button"
+  class="{{ ui_compose('ui/sheet/sheettrigger.variants.json', {'variant': (p.Variant ?? ''), 'size': (p.Size ?? '')}, [(p.Class ?? '')]) }}"
+  data-ui8kit="sheet-close"
+  aria-label="{{ ui_default_if_empty((p.AriaLabel ?? ''), 'Close menu') }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
+  <svg
+    class="size-5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M18 6 6 18"></path>
+    <path d="m6 6 12 12"></path>
+  </svg>
+</button>
diff --git a/packages/twig/ui/ui/sheet/sheet-trigger.html.twig b/packages/twig/ui/ui/sheet/sheet-trigger.html.twig
new file mode 100644
index 0000000..131adf2
--- /dev/null
+++ b/packages/twig/ui/ui/sheet/sheet-trigger.html.twig
@@ -0,0 +1,59 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/sheet.json
+    SheetTrigger: SheetTrigger renders the menu button (aria-expanded, aria-controls, aria-haspopup=dialog) with Lucide menu/x icons.
+    Props (p): Variant (string), Size (string), Class (string), Controls (string), AriaLabel (string), Attrs (attrs). -#}
+<button
+  type="button"
+  class="{{ ui_compose('ui/sheet/sheettrigger.variants.json', {'variant': (p.Variant ?? ''), 'size': (p.Size ?? '')}, [(p.Class ?? '')]) }}"
+  data-ui8kit="sheet-trigger"
+  {%- if ui_is_set_str((p.Controls ?? '')) %} aria-controls="{{ (p.Controls ?? '') }}"{%- endif %}
+  aria-expanded="false"
+  aria-haspopup="dialog"
+  aria-label="{{ ui_default_if_empty((p.AriaLabel ?? ''), 'Open menu') }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
+  <svg
+    class="block size-5 in-aria-expanded:hidden"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <line
+      x1="4"
+      x2="20"
+      y1="12"
+      y2="12"
+    ></line>
+    <line
+      x1="4"
+      x2="20"
+      y1="6"
+      y2="6"
+    ></line>
+    <line
+      x1="4"
+      x2="20"
+      y1="18"
+      y2="18"
+    ></line>
+  </svg>
+  <svg
+    class="hidden size-5 in-aria-expanded:block"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M18 6 6 18"></path>
+    <path d="m6 6 12 12"></path>
+  </svg>
+</button>
diff --git a/packages/twig/ui/ui/sheet/sheet.html.twig b/packages/twig/ui/ui/sheet/sheet.html.twig
new file mode 100644
index 0000000..3cdfbb4
--- /dev/null
+++ b/packages/twig/ui/ui/sheet/sheet.html.twig
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/sheet.json
+    Sheet: Sheet renders the hidden dialog root: overlay + panel (children). ID is required for the trigger's aria-controls.
+    Props (p): Side (string), Class (string), ID (string), AriaLabel (string), Open (bool), Attrs (attrs); children: markup. -#}
+<div
+  class="{{ ui_compose('ui/sheet/sheet.variants.json', {'side': (p.Side ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  role="dialog"
+  aria-modal="true"
+  aria-label="{{ ui_default_if_empty((p.AriaLabel ?? ''), 'Menu') }}"
+  data-ui8kit="sheet"
+  {%- if not ((p.Open ?? false)) %} hidden{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
+  <div class="absolute inset-0 bg-foreground/40" data-ui8kit="sheet-overlay"></div>
+  <div
+    class="relative flex h-full w-80 max-w-full flex-col gap-6 overflow-auto bg-background p-6 text-foreground shadow-lg"
+  >{{ (children ?? '')|raw }}</div>
+</div>
diff --git a/packages/twig/ui/ui/sheet/sheet.variants.json b/packages/twig/ui/ui/sheet/sheet.variants.json
new file mode 100644
index 0000000..7f6e7ca
--- /dev/null
+++ b/packages/twig/ui/ui/sheet/sheet.variants.json
@@ -0,0 +1,17 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.sheet",
+  "base": "fixed inset-0 z-50 flex",
+  "keys": [
+    "side"
+  ],
+  "defaults": {
+    "side": "right"
+  },
+  "byKey": {
+    "side": {
+      "left": "flex-row justify-start",
+      "right": "flex-row justify-end"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/sheet/sheettrigger.variants.json b/packages/twig/ui/ui/sheet/sheettrigger.variants.json
new file mode 100644
index 0000000..e9d754b
--- /dev/null
+++ b/packages/twig/ui/ui/sheet/sheettrigger.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.sheettrigger",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/skeleton/skeleton.html.twig b/packages/twig/ui/ui/skeleton/skeleton.html.twig
new file mode 100644
index 0000000..f069eb6
--- /dev/null
+++ b/packages/twig/ui/ui/skeleton/skeleton.html.twig
@@ -0,0 +1,10 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/skeleton.json
+    Skeleton: Skeleton renders a decorative placeholder.
+    Props (p): Shape (string), Class (string), Attrs (attrs). -#}
+<div
+  class="{{ ui_compose('ui/skeleton/skeleton.variants.json', {'shape': (p.Shape ?? '')}, [(p.Class ?? '')]) }}"
+  aria-hidden="true"
+  data-slot="skeleton"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+></div>
diff --git a/packages/twig/ui/ui/skeleton/skeleton.variants.json b/packages/twig/ui/ui/skeleton/skeleton.variants.json
new file mode 100644
index 0000000..ad1e74f
--- /dev/null
+++ b/packages/twig/ui/ui/skeleton/skeleton.variants.json
@@ -0,0 +1,18 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.skeleton",
+  "base": "animate-pulse bg-muted motion-reduce:animate-none rounded",
+  "keys": [
+    "shape"
+  ],
+  "defaults": {
+    "shape": "line"
+  },
+  "byKey": {
+    "shape": {
+      "line": "h-4 w-full",
+      "block": "h-20 w-full"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/stack/stack.html.twig b/packages/twig/ui/ui/stack/stack.html.twig
new file mode 100644
index 0000000..2750a7a
--- /dev/null
+++ b/packages/twig/ui/ui/stack/stack.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/stack.json
+    Stack: Stack renders a vertical flex container.
+    Props (p): Gap (string), Align (string), Justify (string), Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag((p.Tag ?? ''), 'div', ['div', 'ul', 'ol']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/stack/stack.variants.json', {'gap': (p.Gap ?? ''), 'align': (p.Align ?? ''), 'justify': (p.Justify ?? '')}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/stack/stack.variants.json b/packages/twig/ui/ui/stack/stack.variants.json
new file mode 100644
index 0000000..c720342
--- /dev/null
+++ b/packages/twig/ui/ui/stack/stack.variants.json
@@ -0,0 +1,40 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.stack",
+  "base": "flex flex-col",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "start",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/switch/switch.html.twig b/packages/twig/ui/ui/switch/switch.html.twig
new file mode 100644
index 0000000..7d18e45
--- /dev/null
+++ b/packages/twig/ui/ui/switch/switch.html.twig
@@ -0,0 +1,19 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/switch.json
+    Switch: Switch renders input[type=checkbox] with switch role attrs.
+    Props (p): Size (string), Class (string), Name (string), Value (string), Checked (bool), Disabled (bool), Required (bool), ID (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<input
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  type="checkbox"
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Value ?? '')) %} value="{{ (p.Value ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/switch/switch.variants.json', {'size': (p.Size ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if (p.Checked ?? false) %} checked{%- endif %}
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {%- if (p.Required ?? false) %} required{%- endif %}
+  {%- if ui_is_set_str((p.TabIndex ?? '')) %} tabindex="{{ (p.TabIndex ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  role="switch"
+  aria-checked="{{ ui_bool_str((p.Checked ?? false)) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/switch/switch.variants.json b/packages/twig/ui/ui/switch/switch.variants.json
new file mode 100644
index 0000000..243eed4
--- /dev/null
+++ b/packages/twig/ui/ui/switch/switch.variants.json
@@ -0,0 +1,17 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.switch",
+  "base": "relative shrink-0 appearance-none bg-muted inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary switch-knob disabled:cursor-not-allowed disabled:opacity-50 rounded-full",
+  "keys": [
+    "size"
+  ],
+  "defaults": {
+    "size": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "h-5 w-9 [--knob:12px] [--pad:4px]",
+      "sm": "h-4 w-8 [--knob:12px] [--pad:2px]"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/table/table-body.html.twig b/packages/twig/ui/ui/table/table-body.html.twig
new file mode 100644
index 0000000..34d052e
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-body.html.twig
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableBody: TableBody renders the tbody section.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<tbody class="{{ ui_cn([(p.Class ?? '')]) }}"{{ ui_attr_html((p.Attrs ?? {})) }}>{{ (children ?? '')|raw }}</tbody>
diff --git a/packages/twig/ui/ui/table/table-caption.html.twig b/packages/twig/ui/ui/table/table-caption.html.twig
new file mode 100644
index 0000000..8a0b996
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-caption.html.twig
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableCaption: TableCaption renders the table caption.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<caption class="{{ ui_cn([(p.Class ?? '')]) }}"{{ ui_attr_html((p.Attrs ?? {})) }}>{{ (children ?? '')|raw }}</caption>
diff --git a/packages/twig/ui/ui/table/table-cell.html.twig b/packages/twig/ui/ui/table/table-cell.html.twig
new file mode 100644
index 0000000..0ab7017
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-cell.html.twig
@@ -0,0 +1,11 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableCell: TableCell renders td with colspan and rowspan.
+    Props (p): Class (string), Scope (string), ColSpan (int), RowSpan (int), Headers (string), Abbr (string), Attrs (attrs); children: markup. -#}
+<td
+  class="{{ ui_compose('ui/table/table-cell.variants.json', {}, [(p.Class ?? '')]) }}"
+  {%- if ((p.ColSpan ?? 0) > 0) %} colspan="{{ ui_s((p.ColSpan ?? 0)) }}"{%- endif %}
+  {%- if ((p.RowSpan ?? 0) > 0) %} rowspan="{{ ui_s((p.RowSpan ?? 0)) }}"{%- endif %}
+  {%- if ui_is_set_str((p.Headers ?? '')) %} headers="{{ (p.Headers ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</td>
diff --git a/packages/twig/ui/ui/table/table-cell.variants.json b/packages/twig/ui/ui/table/table-cell.variants.json
new file mode 100644
index 0000000..0725dbc
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-cell.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table-cell",
+  "base": "px-2 py-2 align-middle",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/table/table-col-group.html.twig b/packages/twig/ui/ui/table/table-col-group.html.twig
new file mode 100644
index 0000000..c15b202
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-col-group.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableColGroup: TableColGroup renders colgroup with optional span.
+    Props (p): Class (string), Span (int), Attrs (attrs); children: markup. -#}
+<colgroup
+  class="{{ ui_cn([(p.Class ?? '')]) }}"
+  {%- if ((p.Span ?? 0) > 0) %} span="{{ ui_s((p.Span ?? 0)) }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</colgroup>
diff --git a/packages/twig/ui/ui/table/table-col.html.twig b/packages/twig/ui/ui/table/table-col.html.twig
new file mode 100644
index 0000000..7e5fba1
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-col.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableCol: TableCol renders a single col definition.
+    Props (p): Class (string), Span (int), Attrs (attrs). -#}
+<col
+  class="{{ ui_cn([(p.Class ?? '')]) }}"
+  {%- if ((p.Span ?? 0) > 0) %} span="{{ ui_s((p.Span ?? 0)) }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
diff --git a/packages/twig/ui/ui/table/table-foot.html.twig b/packages/twig/ui/ui/table/table-foot.html.twig
new file mode 100644
index 0000000..dd124bf
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-foot.html.twig
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableFoot: TableFoot renders the tfoot section.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<tfoot class="{{ ui_cn([(p.Class ?? '')]) }}"{{ ui_attr_html((p.Attrs ?? {})) }}>{{ (children ?? '')|raw }}</tfoot>
diff --git a/packages/twig/ui/ui/table/table-head-cell.html.twig b/packages/twig/ui/ui/table/table-head-cell.html.twig
new file mode 100644
index 0000000..b211102
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-head-cell.html.twig
@@ -0,0 +1,13 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableHeadCell: TableHeadCell renders th with optional scope and abbr.
+    Props (p): Class (string), Scope (string), ColSpan (int), RowSpan (int), Headers (string), Abbr (string), Attrs (attrs); children: markup. -#}
+<th
+  class="{{ ui_compose('ui/table/table-head-cell.variants.json', {}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str(ui_map_or((p.Scope ?? ''), {'col': 'col', 'colgroup': 'colgroup', 'row': 'row', 'rowgroup': 'rowgroup'}, '', true)) %} scope="{{ ui_map_or((p.Scope ?? ''), {'col': 'col', 'colgroup': 'colgroup', 'row': 'row', 'rowgroup': 'rowgroup'}, '', true) }}"{%- endif %}
+  {%- if ui_is_set_str((p.Abbr ?? '')) %} abbr="{{ (p.Abbr ?? '') }}"{%- endif %}
+  {%- if ((p.ColSpan ?? 0) > 0) %} colspan="{{ ui_s((p.ColSpan ?? 0)) }}"{%- endif %}
+  {%- if ((p.RowSpan ?? 0) > 0) %} rowspan="{{ ui_s((p.RowSpan ?? 0)) }}"{%- endif %}
+  {%- if ui_is_set_str((p.Headers ?? '')) %} headers="{{ (p.Headers ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</th>
diff --git a/packages/twig/ui/ui/table/table-head-cell.variants.json b/packages/twig/ui/ui/table/table-head-cell.variants.json
new file mode 100644
index 0000000..d7d0d52
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-head-cell.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table-head-cell",
+  "base": "px-2 py-2 text-left align-middle font-semibold",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/table/table-head.html.twig b/packages/twig/ui/ui/table/table-head.html.twig
new file mode 100644
index 0000000..62a55e8
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-head.html.twig
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableHead: TableHead renders the thead section.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<thead class="{{ ui_cn([(p.Class ?? '')]) }}"{{ ui_attr_html((p.Attrs ?? {})) }}>{{ (children ?? '')|raw }}</thead>
diff --git a/packages/twig/ui/ui/table/table-row.html.twig b/packages/twig/ui/ui/table/table-row.html.twig
new file mode 100644
index 0000000..902b092
--- /dev/null
+++ b/packages/twig/ui/ui/table/table-row.html.twig
@@ -0,0 +1,5 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    TableRow: TableRow renders one tr row.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<tr class="{{ ui_cn([(p.Class ?? '')]) }}"{{ ui_attr_html((p.Attrs ?? {})) }}>{{ (children ?? '')|raw }}</tr>
diff --git a/packages/twig/ui/ui/table/table.html.twig b/packages/twig/ui/ui/table/table.html.twig
new file mode 100644
index 0000000..25b7bde
--- /dev/null
+++ b/packages/twig/ui/ui/table/table.html.twig
@@ -0,0 +1,8 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/table.json
+    Table: Table renders the root table element.
+    Props (p): Class (string), Attrs (attrs); children: markup. -#}
+<table
+  class="{{ ui_compose('ui/table/table.variants.json', {}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</table>
diff --git a/packages/twig/ui/ui/table/table.variants.json b/packages/twig/ui/ui/table/table.variants.json
new file mode 100644
index 0000000..7b2c2ad
--- /dev/null
+++ b/packages/twig/ui/ui/table/table.variants.json
@@ -0,0 +1,8 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.table",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/packages/twig/ui/ui/text/text.html.twig b/packages/twig/ui/ui/text/text.html.twig
new file mode 100644
index 0000000..9a6f1aa
--- /dev/null
+++ b/packages/twig/ui/ui/text/text.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/text.json
+    Text: Text renders a p element with body copy classes, or the block or inline text element of `Tag`.
+    Props (p): Size (string), Weight (string), Class (string), Tag (string), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_resolve_tag((p.Tag ?? ''), 'p', ['p', 'blockquote', 'figcaption', 'address', 'pre', 'span', 'em', 'strong', 'small', 'abbr', 'cite', 'code', 'kbd', 'mark', 'time', 'data', 'var', 'samp', 'sub', 'sup', 'b', 'i', 'u', 's', 'q', 'dfn', 'bdo', 'bdi', 'ins', 'del']) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/text/text.variants.json', {'size': (p.Size ?? ''), 'weight': (p.Weight ?? '')}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/text/text.variants.json b/packages/twig/ui/ui/text/text.variants.json
new file mode 100644
index 0000000..2869a4f
--- /dev/null
+++ b/packages/twig/ui/ui/text/text.variants.json
@@ -0,0 +1,34 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.text",
+  "base": "",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "inherit"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold",
+      "inherit": ""
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/textarea/textarea.html.twig b/packages/twig/ui/ui/textarea/textarea.html.twig
new file mode 100644
index 0000000..0f837b6
--- /dev/null
+++ b/packages/twig/ui/ui/textarea/textarea.html.twig
@@ -0,0 +1,17 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/textarea.json
+    Textarea: Textarea renders a styled multi-line form control.
+    Props (p): Variant (string), Size (string), Class (string), Name (string), Value (string), Placeholder (string), Rows (int), Disabled (bool), Required (bool), ID (string), Role (string), TabIndex (string), AriaLabel (string), Attrs (attrs). -#}
+<textarea
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.Name ?? '')) %} name="{{ (p.Name ?? '') }}"{%- endif %}
+  class="{{ ui_compose('ui/textarea/textarea.variants.json', {'size': (p.Size ?? ''), 'variant': (p.Variant ?? '')}, [(p.Class ?? '')]) }}"
+  rows="{{ (((p.Rows ?? 0) > 0) ? ui_s((p.Rows ?? 0)) : '4') }}"
+  {%- if ui_is_set_str((p.Placeholder ?? '')) %} placeholder="{{ (p.Placeholder ?? '') }}"{%- endif %}
+  {%- if (p.Disabled ?? false) %} disabled{%- endif %}
+  {%- if (p.Required ?? false) %} required{%- endif %}
+  {%- if ui_is_set_str((p.Role ?? '')) %} role="{{ (p.Role ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.TabIndex ?? '')) %} tabindex="{{ (p.TabIndex ?? '') }}"{%- endif %}
+  {%- if ui_is_set_str((p.AriaLabel ?? '')) %} aria-label="{{ (p.AriaLabel ?? '') }}"{%- endif %}
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (p.Value ?? '') }}</textarea>
diff --git a/packages/twig/ui/ui/textarea/textarea.variants.json b/packages/twig/ui/ui/textarea/textarea.variants.json
new file mode 100644
index 0000000..6480057
--- /dev/null
+++ b/packages/twig/ui/ui/textarea/textarea.variants.json
@@ -0,0 +1,25 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.textarea",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "min-h-16 px-3 py-2 text-base md:text-sm",
+      "default": "min-h-20 px-3 py-2 text-base md:text-sm",
+      "lg": "min-h-24 px-4 py-3 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/packages/twig/ui/ui/themetoggle/theme-toggle.html.twig b/packages/twig/ui/ui/themetoggle/theme-toggle.html.twig
new file mode 100644
index 0000000..c35fa2d
--- /dev/null
+++ b/packages/twig/ui/ui/themetoggle/theme-toggle.html.twig
@@ -0,0 +1,52 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/themetoggle.json
+    ThemeToggle: ThemeToggle renders a button with Lucide sun/moon icons; aria-pressed reflects dark mode.
+    Props (p): Variant (string), Size (string), Class (string), ID (string), AriaLabel (string), Attrs (attrs). -#}
+<button
+  type="button"
+  class="{{ ui_compose('ui/themetoggle/themetoggle.variants.json', {'variant': (p.Variant ?? ''), 'size': (p.Size ?? '')}, [(p.Class ?? '')]) }}"
+  {%- if ui_is_set_str((p.ID ?? '')) %} id="{{ (p.ID ?? '') }}"{%- endif %}
+  data-ui8kit="theme-toggle"
+  aria-label="{{ ui_default_if_empty((p.AriaLabel ?? ''), 'Dark mode') }}"
+  aria-pressed="false"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>
+  <svg
+    class="hidden size-5 dark:block"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="4"
+    ></circle>
+    <path d="M12 2v2"></path>
+    <path d="M12 20v2"></path>
+    <path d="m4.93 4.93 1.41 1.41"></path>
+    <path d="m17.66 17.66 1.41 1.41"></path>
+    <path d="M2 12h2"></path>
+    <path d="M20 12h2"></path>
+    <path d="m6.34 17.66-1.41 1.41"></path>
+    <path d="m19.07 4.93-1.41 1.41"></path>
+  </svg>
+  <svg
+    class="block size-5 dark:hidden"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+  </svg>
+</button>
diff --git a/packages/twig/ui/ui/themetoggle/themetoggle.variants.json b/packages/twig/ui/ui/themetoggle/themetoggle.variants.json
new file mode 100644
index 0000000..e373e79
--- /dev/null
+++ b/packages/twig/ui/ui/themetoggle/themetoggle.variants.json
@@ -0,0 +1,26 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.themetoggle",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/packages/twig/ui/ui/title/title.html.twig b/packages/twig/ui/ui/title/title.html.twig
new file mode 100644
index 0000000..92033d1
--- /dev/null
+++ b/packages/twig/ui/ui/title/title.html.twig
@@ -0,0 +1,9 @@
+{#- Code generated by xgen. DO NOT EDIT.
+    Source: xgen/specs/ui/title.json
+    Title: Title renders the resolved heading element.
+    Props (p): Size (string), Weight (string), Class (string), As (int), Attrs (attrs); children: markup. -#}
+{%- set tag1 = ui_title_tag((p.As ?? 0)) -%}
+<{{ tag1 }}
+  class="{{ ui_compose('ui/title/title.variants.json', {'size': (p.Size ?? ''), 'weight': (p.Weight ?? '')}, [(p.Class ?? '')]) }}"
+  {{ ui_attr_html((p.Attrs ?? {})) }}
+>{{ (children ?? '')|raw }}</{{ tag1 }}>
diff --git a/packages/twig/ui/ui/title/title.variants.json b/packages/twig/ui/ui/title/title.variants.json
new file mode 100644
index 0000000..aeb5034
--- /dev/null
+++ b/packages/twig/ui/ui/title/title.variants.json
@@ -0,0 +1,33 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "id": "ui.title",
+  "base": "text-foreground",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "semibold"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold"
+    }
+  }
+}
diff --git a/packages/vue/ui/.xgen-manifest.json b/packages/vue/ui/.xgen-manifest.json
new file mode 100644
index 0000000..aeda587
--- /dev/null
+++ b/packages/vue/ui/.xgen-manifest.json
@@ -0,0 +1,406 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "target": "packages/vue/ui",
+  "files": {
+    "package.json": "7e0f11c96b1457c48b83fb298e1c1e770387a6655619d4bdd029d5b8321bc007",
+    "README.md": "496e4771d18ce5b458b3b22ed9811e96620417550ede98b0bfc0e41a6f181654",
+    "src/blocks/about-company.vue": "ac21254a413af664b83b8c4cfeda48a6f8473968cdaaddb44a0270ee544bf19b",
+    "src/blocks/about-me.types.ts": "043615269f4a7e5beca54e53db472db980a007cce859659d7a868d8c0bba40ef",
+    "src/blocks/about-me.vue": "aaa2ef823f5f7538dd1575685f4590bf0040820046168951f98531e2bcd1a3c6",
+    "src/blocks/activity-feed.types.ts": "5f56124080084a1ff49293c65c40780d7f79a44f435b64afd0abcfa50b411026",
+    "src/blocks/activity-feed.vue": "f7070cf73bfb99b879ab29a10491a988ce9e16257b164d0832235c816eb83d28",
+    "src/blocks/announcement-bar.vue": "c2b65457bf8d3da7493c40a66461f0486e7d905ff42391155ec24153414738d3",
+    "src/blocks/app-shell.types.ts": "57d12077a5f31a4d3291fca1d52771735d53fd95cd0f3c19ca244a35ba8bd3bb",
+    "src/blocks/app-shell.vue": "867ad1b7d8720cece7f971f90601f7a94732cfcbd77a7664cb44581e1141ff09",
+    "src/blocks/article-body.types.ts": "082f005df03ec6d0774dfe0813bf984bc6fcadc924611c417b6dcef6e46c8c29",
+    "src/blocks/article-body.vue": "00195f84308965da6d4b0c1ab2246953ecd6fc0de6e40465944c3a4a3823820d",
+    "src/blocks/auth-card.types.ts": "8da7cf95a4994c41826f8958a760f4de110f0ae1592573fc3847f43e5a8051ac",
+    "src/blocks/auth-card.vue": "83b307c02368310d1247e3b5b171fb314d1865f7634c300c16839d5ad50ec163",
+    "src/blocks/auth-layout.types.ts": "decc4806964fc2e585e1cc914bf334bb0e809a7d2a6c1a93065052fdce47c811",
+    "src/blocks/auth-layout.vue": "aea5db66cd141eda5c5357ba0cd1b417a1147446b613c642498369707fbbd51b",
+    "src/blocks/before-after.types.ts": "ed999d646c9c383b1a327e47cf63fa3eb78acb381271b917122b4139fdc57841",
+    "src/blocks/before-after.vue": "07d87601f24995244a8ad899c618df9bdb732f74527ee780896d8e3ef3bb7d4a",
+    "src/blocks/bento-grid.types.ts": "6f6a81ac27f1735f3c2d59358bc808c65b04adde3b932860be3b56f70624f5d9",
+    "src/blocks/bento-grid.vue": "6859646c128ee4ab8c7f6f8efb3536466573953dfd825d2257a4ec1831782f98",
+    "src/blocks/bottom-nav.vue": "ff171c533f516141bb74e7d346aa76e7e25371ff837f21c4aaf5d6c02ad54f66",
+    "src/blocks/cart-drawer.types.ts": "2b0a648c59d430f994286e02fa55f2ad5a7fb0eb7e26ef7a4a72c88849968826",
+    "src/blocks/cart-drawer.vue": "7f0ce74c3dd7f821ef3e6a6a6c6699687c95bf6eed9d9721846b7d95dc6a717e",
+    "src/blocks/cart-list.types.ts": "67dac0812500df9da16211d8d2527c3a8a0838910d1ef7d1db2f8bdd72349bb2",
+    "src/blocks/cart-list.vue": "1980be69692f6224ac08b8ab6d7fbbcf237b448e070d0e6947fd323eee57fa50",
+    "src/blocks/category-nav.types.ts": "88c758911dc968d2e05c42c2db256e8d44b6898f581b9d8b3ac5f3142e1b944a",
+    "src/blocks/category-nav.vue": "2fc4bfb0a370ecb2e1018fe44c270b683123f2a422d0412a8673dd682c5671b1",
+    "src/blocks/chart-panel.types.ts": "3815109d2ab650e70c4faa038f64c3b31e4b6816266a97db707640acc1ab11dc",
+    "src/blocks/chart-panel.vue": "096cdb5a1411bf2217f111c80cae7d683f80ae46c64e680be76cea49bb8edbe7",
+    "src/blocks/checklist.types.ts": "cde2540d07d103bac3160f58689186f37775d8594c410b8a75838a4f34c08a72",
+    "src/blocks/checklist.vue": "5db55db151384a32d653a6ab32c5e4142b6765d8c9b94f051307963a84be66db",
+    "src/blocks/checkout-form.types.ts": "b72088e90cdf5a6c42de163de2d4b8f2499d490ebac738d89694752b02f97aba",
+    "src/blocks/checkout-form.vue": "bb4d1200b9a16c0b4dc88d9507e1954145f38840117b77d6602e4216386a65c0",
+    "src/blocks/comparison-table.types.ts": "edbee7a4289e384f16af68a9e0b700caf6d993408343338bbfd566791edc1b91",
+    "src/blocks/comparison-table.vue": "ddaa3e71f80ffe0eb613e2594103b73aa718aa539e61acf3aa60980384c8f985",
+    "src/blocks/contact-form.types.ts": "63b05d16b74cb8a30a43887f0f2fadcb3346230c81d0e81fd5a8f39446435e3e",
+    "src/blocks/contact-form.vue": "36ac34d21a909a502483113af8459979f2f3a7e20a89ec7403425e2b2bf2a7a2",
+    "src/blocks/cookie-banner.vue": "80499198e0ee9a9d8e7b1dd4d4d7600d242cf619fa04bb43e62792644d5fa961",
+    "src/blocks/credit-packs.types.ts": "be28fa1beccf2fba0789f5f572aee73c115cc24ae4cfa0736c8ae41e7cd1024e",
+    "src/blocks/credit-packs.vue": "7400e6db46ac1087728e60b2cd96eacc0b15f0878899a074b824084b4ae34f47",
+    "src/blocks/cta-band.types.ts": "6140ffcebd34b3d98d06bad1122416626b8f5801f09540185e5b591cb8ff6f1f",
+    "src/blocks/cta-band.vue": "f5f4f41c93ca953342bb6e77fa64bb0be802230381b09c5c1f5897da15983dd8",
+    "src/blocks/cta-banner.vue": "fb46e1efb3da24c20dd810694a85eed36c4ad2cabca4f2d3cfb276c3f4e2000e",
+    "src/blocks/cta-proof.types.ts": "1673af2abdc4ea6382a876efb270e6984f2fd7140a67130bd108291369f1a10d",
+    "src/blocks/cta-proof.vue": "493ba6bb4ac7a874c7a22e2605da931557030fb1f4abe587c8baf97fad2de524",
+    "src/blocks/dashboard-overview.types.ts": "05bd17982aa5d7b5cb940ff22700a0ef1c154f8a68ac1060a24ec2e67925a4b7",
+    "src/blocks/dashboard-overview.vue": "c98ed05dbf0bc96985d92c0e3815225aa3705617a8df263bfb693fea2e7f5e4d",
+    "src/blocks/dashboard-shell.types.ts": "37c3bba34d5681030b0ca37cb2cfdf65097a7bdbfae51c30931c33f816633895",
+    "src/blocks/dashboard-shell.vue": "0f79672479818a3f11a57b30babb0ac6e92c707ff7c0d40566ecf177a58d42e7",
+    "src/blocks/delivery-info.types.ts": "d68c3ac24bacfc04622e3dc8d49b8c40a913a66a0d5d7d456efbd370bebc396c",
+    "src/blocks/delivery-info.vue": "83672093786e7851eec8913d35ed55158f5b51b8040471a68b92695dad6ba556",
+    "src/blocks/empty-panel.vue": "971df28a7b85b171b7f8825e706f45a4a349c76db60f65da87b627eb92987873",
+    "src/blocks/error-page.types.ts": "dd8411dca18b74cd060609106f107ea8069af204aa926190bcffc9fb027f6d0c",
+    "src/blocks/error-page.vue": "73783ca8becf98a1752815478943d286516b8baf25eff22a4354e7e322c8610e",
+    "src/blocks/faq-list.types.ts": "eb74ae6e1c1e51c2b4721d348b87cd9d7b46716cd2ed549bf11aa43f25366c6d",
+    "src/blocks/faq-list.vue": "abf8a617a9caebee0267821c059290d4617a89856a14e89ac2846235a115e0f7",
+    "src/blocks/faq-split.types.ts": "fbe3f37c43647961ea2055834f0128fa228d9f7b1ad3e3963d628f383835edbf",
+    "src/blocks/faq-split.vue": "ad230f537fb6794434845c676191266ae885b10449cdcb4528e9fee7ae50509e",
+    "src/blocks/feature-accordion.vue": "349a242e317ab46a3292c7b1ed335fcfdbbbf19968841df6e5c25adfe0b66aa6",
+    "src/blocks/feature-grid.types.ts": "50ab48aa51787e269ffc1f096e082c5b0fbe4abfc31902497dd33fce5d93fb27",
+    "src/blocks/feature-grid.vue": "311449f48a231546ed65e070e19e76f87c576a187ca05a8900c2b07f1a99aafc",
+    "src/blocks/feature-showcase.vue": "4398833df8e6fd11279206ead19c055777bfca361622dae244a3f4f5fca6a706",
+    "src/blocks/feature-split.vue": "b8d9026f6a205bf7fa0be54e7ce366b451d38648cb91b890168bd89a860ce6e6",
+    "src/blocks/feature-sticky.vue": "da23acbb2b4c627f5b84c0d0ec36c778faa70382b30796d2f8490dffe6ff780d",
+    "src/blocks/feature-tabs.vue": "ce14cb3bb612bb26ae2bb320d936004b5551b66f0efd32cab3fd0c32f5799433",
+    "src/blocks/footer-split.types.ts": "bde2bb954a3eb6ad5383df4bedca2da1ac7c99724000c4c2d081c6cd864fc920",
+    "src/blocks/footer-split.vue": "11208452d8bddbe6fbcf86c8678e008684bfc8874a49d960d9670278805c269b",
+    "src/blocks/hero-classic.types.ts": "4724563cef568d2f316f37c3d9386f6fd54ba27d49b6d0f5ec228750bfd44ac3",
+    "src/blocks/hero-classic.vue": "3107b55422903c03222572cc279f56d3ad073642f08523083b5a73d855b44aca",
+    "src/blocks/hero-prompt.types.ts": "455da691d4fcc6dd8df6bced640f72b88a3fdc598efdd59ffb9c8b4fbc0142fe",
+    "src/blocks/hero-prompt.vue": "e6c0eea5314bd818f65e87096ab9d1a2bfe1edaa8950b1ffee3ced9f124e4c7c",
+    "src/blocks/hero-split.types.ts": "d5459ec93bd4a4096825a7c28e8cf4fdd8b3d151e67c60f738234951312e1456",
+    "src/blocks/hero-split.vue": "aa203440c6f2f20aba0596d00014b67ff71471a0fef739b4e5077b942ec6f874",
+    "src/blocks/icon-wall.vue": "3bf8e2fb3f3a30f47aa1224ceb9bf64b8250c1b1cb87d4ca7f3b457d259fb7f6",
+    "src/blocks/job-board.types.ts": "88ff24e5faf35fddc5a5edd2ca7f5c100fd27f45d6d003e4728c0ba34d268356",
+    "src/blocks/job-board.vue": "5ef83de180a325d018b90c52b826ad632e60b24157166237d15473392a839d94",
+    "src/blocks/kanban-board.types.ts": "b3fcee6b6bf2b2dfca143b5b2f84f76ed0280b24181f20607cc8515d89d286e4",
+    "src/blocks/kanban-board.vue": "bc1b89ac4cc30c557e153cf72cef8d402a38bd5fb4839231b1e9d1bcb5c3620b",
+    "src/blocks/logo-cloud.types.ts": "64e9e8cdc13d3b1dbf78894339377f8c654a704a16a6d09c6913b941321bf834",
+    "src/blocks/logo-cloud.vue": "48120108234fe9f55d38a7e89d3e9b610eed82875693df638c9a3c0e5e29d020",
+    "src/blocks/logo-ribbon.vue": "d8335c105c170b1d697be521ca6cb05baf275d5e8664d915031880c7d9cbdcde",
+    "src/blocks/media-list.types.ts": "30fdd46e926fecc640cd71aa55ca9a34155ecf77c67dc7a6aaf2cc6d4660a2c2",
+    "src/blocks/media-list.vue": "d3434655e2f0460ffd3497d7da3374b3877cbb9398326e0a099f01503e1b2f1d",
+    "src/blocks/mega-menu.types.ts": "056c81e1507dd1f5d81367831240d65ab35145bbed4c27783942ea38ae2b4930",
+    "src/blocks/mega-menu.vue": "797c5cd464ec65a4d29cc8ce3c4d4caff2f64a21a05f6d66c0782394a814d6cb",
+    "src/blocks/metric-row.types.ts": "c8a47f76f9f1b94b436b68895e586a30f34201967c91159ef4e145169c291453",
+    "src/blocks/metric-row.vue": "4668e72c3f96053471b6305b4f82392b97357221f2f39ddc80d2feedc24aa9cd",
+    "src/blocks/milestone-timeline.types.ts": "e7da0209b4575401be48da09eefcbd48108936ddbc7e9ec4a939668b5387cc5e",
+    "src/blocks/milestone-timeline.vue": "63f521055f361c48fc2dc29bd54cb83a7e501fd6c6105cc139dbd8c5beb01b85",
+    "src/blocks/nav-bar.types.ts": "c54bfbd53c3506a21507761b00fb5ba26e5a27339a8809c2a8a72277685392db",
+    "src/blocks/nav-bar.vue": "d30efdf851ed65c2c7b970d3c02c46a71a998af1c6b7b283f337b5559cc26f38",
+    "src/blocks/newsletter-form.vue": "d26bc404d69eb414ab1bc359f7a9368d0c9a381dd0ade703639a82eda968c36d",
+    "src/blocks/order-summary.types.ts": "74280d6614841969b7bf18cf17b4f2795a35204a2c46f9da5c9a6789fa3694f9",
+    "src/blocks/order-summary.vue": "cbe5906f60cc7f6fb5a55cb5d22047e23150b4018fc98bcefbcd5155cdb86040",
+    "src/blocks/order-table.types.ts": "efcdf8babc0e087fc5d1061a8e9a2cfb4d5eee5aa3105f1ad8050c49cd344a8a",
+    "src/blocks/order-table.vue": "fe01dad3d87ae4739ddbe8961be2e772144574b1670f8a2ae15a81dbba576c55",
+    "src/blocks/page-intro.vue": "489c01c34fb98075eb5e6c888ed08979c76c3169be4a94ce532d1418b008c071",
+    "src/blocks/page-trail.types.ts": "4e2a680642da4de46d56aa5ce55df4a8540d4338f24f400705239389051bd668",
+    "src/blocks/page-trail.vue": "7fe1875d93c5607eba565e9cc6756608edd697e4e6a8ae9259e8942c8967be33",
+    "src/blocks/photo-gallery.types.ts": "06a2f0c9e2a4d77d0c3c6a4bc7c3c797dcbe9cbe8e0017fdcac1a8f74aa35691",
+    "src/blocks/photo-gallery.vue": "df4f946b3cbe11f788585aa2044ffbf09a4b899242bb05ca10bea3dc1f5494ef",
+    "src/blocks/post-card.types.ts": "17585f000ffbfcb2ebb30cd4030899fc7dcd6a85f1d9a33f4c9646a9e8f369e8",
+    "src/blocks/post-card.vue": "a675cad143a6fb8d905fe76bc04ea17648f27934e28562bf88dd897510a3156f",
+    "src/blocks/post-grid.types.ts": "7dad1d7843814dfe72ad2a4f80f16614bdc787da85b942a351b8f15aad0aeac9",
+    "src/blocks/post-grid.vue": "3a17a0f67e5da845744fd88b57b05e16bf9b49622a5c78f16985d6ca11e812c3",
+    "src/blocks/post-header.vue": "636f142bc08ca94bc2ea59bb0b70e7ac4dc68eea4eef7b18a1071fdb9197e2f0",
+    "src/blocks/post-showcase.vue": "dc76aecfb71c8e216cce0fef1a192142179ba4d2d616c63b3959713b495296a7",
+    "src/blocks/post-split.types.ts": "1ef646f6acfd44b81113d9c95799b72886428adcdfdece02a67ded6cf0ec062e",
+    "src/blocks/post-split.vue": "a687fa6982fc2f15536ae6c1e4cae1b2f7b420bded2b1c583695e8768abaef38",
+    "src/blocks/pricing-card.types.ts": "6e0720cdd9a01ca9af210bd354adac7a32ee6ba76b36cb66f1c606562a97b724",
+    "src/blocks/pricing-card.vue": "34b5df35ee283ce1ea82f0d9627263db6959580eab10df0c0a1edcc713902df5",
+    "src/blocks/pricing-tiers.types.ts": "2324239330289603a8f69517dbe4ed428aad4d2c0e977e2baa6735fc8aa67fc6",
+    "src/blocks/pricing-tiers.vue": "48360a1d7331e87e55b845206b54434477acdb96413de0f00189f24105276e23",
+    "src/blocks/product-card.types.ts": "8ed73709c2c62c3ccbaf3cee633a95cff31e435a6a375ccab83e9ecdfe9a1288",
+    "src/blocks/product-card.vue": "3336dc4072f31a98e9bb90e3322e2f0df2f4db07ed7eb582509dc1fdd11f4617",
+    "src/blocks/product-detail.types.ts": "21523dab2a3ee82e5bf0dc3a5df1b68dd1b61bd0440dbc6da8b5b5ee530fea47",
+    "src/blocks/product-detail.vue": "6245d652f53a2755c63d58a57fc3661e38367839626bbcac7eeb1c4443051e86",
+    "src/blocks/product-grid.vue": "211fee1511b0b8ca6b5b4fa7950e5b238ae7d97ab2a58431336e9c02c3174ed2",
+    "src/blocks/product-info.types.ts": "4da7062abf71c18b01e41b430464c5a22660b97d14106dce7ddb4b217ca9a55e",
+    "src/blocks/product-info.vue": "f84d5336a449e27eedd17e5869097a5a10e983ebd5403f8e8569d359d1736cac",
+    "src/blocks/profile-form.types.ts": "b7d90d69db86b26ce9fecaf7f0c9f3df70ef45a59399afbeffca26a03d72adc2",
+    "src/blocks/profile-form.vue": "b881630ee5b52485e7b1935c85a7ceaf58d0f9b6a347bdfb4697cc0b90caba57",
+    "src/blocks/project-grid.types.ts": "6c8d59fe2a056fab97bcfb6ba3aeebc3b2c13a315e83c6e8b8dd05df25ec71d4",
+    "src/blocks/project-grid.vue": "c7f70b0b1819200b9eb76442464752fe036645572c41bdfd9f70bf308535b3bb",
+    "src/blocks/proof-band.vue": "2bb6e31733817be1de52dd2cdc4a3243b44df718ea2edba08ed03c6e76a6f758",
+    "src/blocks/quote-split.types.ts": "e611ebc9a576b69ae085e5d6203027dfefbbef21fa6f0e832e57247248285c17",
+    "src/blocks/quote-split.vue": "59d2d916f3378d96de86362890781db4736b2bda8e87223a74c1563cdee34eb2",
+    "src/blocks/review-list.types.ts": "a28ccf74c9890c239c529dfc565865ac5ea34169d62de056d9bfc7e23b444fe4",
+    "src/blocks/review-list.vue": "1a10e5430da6e4b8440a6b7151f123f67391f556590c58df49a78d8a7cac4bb2",
+    "src/blocks/shopping-cart.types.ts": "718d0b0ce29007dd7644fe2f2a9c6bba962829b308707c349712f2d9eb0457f6",
+    "src/blocks/shopping-cart.vue": "8d89aa33d9df3137831a188840e358a79acf4e2562a884cee55bb0a97c4299ac",
+    "src/blocks/sidebar-nav.vue": "826268966e4abaeb5a587798755774423190bf3c7957c46ce6b9eaa83803900d",
+    "src/blocks/signup-wizard.types.ts": "71456087f84eac60a95b460ed4e2b1ccf4572f5654a9dad8162ec2163aca635a",
+    "src/blocks/signup-wizard.vue": "85d7f4d35b0e514cec8309fc7dbd240a2c858e656835f4c7bc33660438a45071",
+    "src/blocks/site-footer.types.ts": "3e1c4727ab0cbd891dd743e0278d5980cc2259145569cbd52a0389fcc5f36118",
+    "src/blocks/site-footer.vue": "aca48d5257a70c76599164eb1d831f8d9e4dd2bd76215649322f3d209d93fef5",
+    "src/blocks/site-header.types.ts": "a8a9c8f7fd15951ab74c5ca467bc07f77adc3eadd0422c80ec53ef1139376dfb",
+    "src/blocks/site-header.vue": "f507be710b9a3b178e8be7ec6dcb85c4c8aa9197c7b6be8f4d1d13b28f5ac2e8",
+    "src/blocks/sitemap-footer.types.ts": "810cac7677786b3379073275c2823a147aba8f8a95531e4bf201ad4a1507d5be",
+    "src/blocks/sitemap-footer.vue": "7af55299c011cb027a1913b9defa22c3fbd00a32705549a63ef1417eecf94955",
+    "src/blocks/skeleton-layout.types.ts": "5d96e19b1711d3c8e1163ddc2a5ef2ff4f980d494da87e9809e89428394bd50c",
+    "src/blocks/skeleton-layout.vue": "d990ebb7c1a09330c75fc63390b488dbcce2271a61861789f5467360cb817dd6",
+    "src/blocks/slot-board.types.ts": "3542f55416cc63bcd15544d50021bc1a9401c02fd384479c6a38e2556499be20",
+    "src/blocks/slot-board.vue": "b45b556e870d20719e15bd1ff81a79253429b0c17c93db54b85565e95228828e",
+    "src/blocks/stats-band.types.ts": "47a7a6fb525314d9e1ba9d01d2f2bf59293f3902f79c07cb3773369e93a35f22",
+    "src/blocks/stats-band.vue": "850ebfe6fc6951caeac8f05e40efb6a83def5182482f90cc5221ee0c7ab998d3",
+    "src/blocks/stepper.vue": "465a2b126a6302118060ef012f6203108cd6012692ca8a7e7cc3376d00e13806",
+    "src/blocks/steps-list.types.ts": "911950b03bc28b244429c33f3628506c8270e97810c3a81f3305efeaf2221de2",
+    "src/blocks/steps-list.vue": "ad0e4f77034ead1f1ba96cec73f81f1a7d8c09c4a0690d9fa9a7e7e3e8cc42cc",
+    "src/blocks/store-hero.types.ts": "cd6a768d92420bcb4caf45611520829aefd27a254ac182a7c22c3e5902016bde",
+    "src/blocks/store-hero.vue": "12d37ff914480684c2bc456d9b7202666e36f6711c03e4d1dd5afd3e1576d50f",
+    "src/blocks/store-locations.types.ts": "3fe37417236992ca8bb8197431573805d1f625437b9568aedda65421fdb5fdbc",
+    "src/blocks/store-locations.vue": "7ceade4a42381d4a9f08e8e22828f30aeb0f9bfb4e8f723f7536b67cfdf4f465",
+    "src/blocks/story-tabs.types.ts": "4db25e3132fdf612777817e64e85821ae502041f19dc29ae0bcd8f36901d1fde",
+    "src/blocks/story-tabs.vue": "3e4cfe78b8d1cab1ada53a26706e1d702ea9426cfece6f6d60ddd43ec0c6c521",
+    "src/blocks/support-channels.vue": "f7de3106b7d85a37dee9e2cc1ea3095197f8d0b4373ee12155fddd1fb1cb4e7f",
+    "src/blocks/team-grid.types.ts": "fe4f0431e5c1408e1cc0a0efd2b7e23dd19f673870c03b2296b0a9cf07b0b402",
+    "src/blocks/team-grid.vue": "013adb57410c0f0ef76138795738b093969ea7b99d708d4cf2e32c264531942f",
+    "src/blocks/template-grid.types.ts": "74ba85f8930eeea9a528590f89c9b865ef761d38c4f59dcbd909ef2df44bfd36",
+    "src/blocks/template-grid.vue": "7b80f5fe70f82bf5b2ff81d74c1019da5d6e8e32971412dc1c7d5adfa917d17f",
+    "src/blocks/testimonial-grid.types.ts": "1cbc644c6de4f3887c0be522a2a2aab67bdbf3bd276647739342b02adf150ec5",
+    "src/blocks/testimonial-grid.vue": "ec2940530603d0ce5cfe6446d720174a3381feb2ad53f61773f160de32d567f8",
+    "src/blocks/tour-callout.vue": "99fa3ccb97e3e7374e7ed01a4f441b5d5188ac7e5548c9530cbaddd8aa3173d4",
+    "src/blocks/usage-calculator.types.ts": "d91f83ab20faba37f20698f41c85b0dce74b79ec0781fb405694969992b17959",
+    "src/blocks/usage-calculator.vue": "ba7f5c68647293a7242e0c4650c39d471946519ae7d21530acee7c2a1b5289c7",
+    "src/blocks/usp-strip.vue": "6258dd9c98e5e31b6efc4a86f439227756aec61457946ffa3226a842b87ec7ce",
+    "src/blocks/video-grid.vue": "14b9b35cf0cdad762352f0526578705fe869cad8656819f4c9d02dbaf3e3363f",
+    "src/blocks/video-modal.types.ts": "41b6aad69f119ffc067056ecfe57c599c039e10ea7c1e527a59dd7702ebfa1d8",
+    "src/blocks/video-modal.vue": "4ae0bb77f387d030af215812ea02c67a8bedd2ca136cf627bd60494b8ae0d5f1",
+    "src/blocks/zone-table.types.ts": "125c440eebe964662ad3468ef8101d7a186e650a003f72ee8318890e73da0433",
+    "src/blocks/zone-table.vue": "ec040962bb80aa0bf2e64be259813f2dd6cbbaeea0a290bbfeac213ada5c09ab",
+    "src/components/action-group.vue": "6c7897b59aa8d4ed1fabbe4ca124346cf61a3a4dad2098f57f0e28b5af638166",
+    "src/components/app-main.vue": "77eaf79d23a6e91058cdeaa8ddf0122bd0cea5d4ed893c4eda36e4fcdb243e9f",
+    "src/components/article-block.vue": "80aa963d777ccf3072762a69e02ec82c242659c2aaa39390b81772955a4f9e50",
+    "src/components/auth-form.vue": "93d3cd55f2e33926dcdc0ef6e0b0470b55a5fc0378f593ecc44a0d2379218090",
+    "src/components/avatar.vue": "89a4a399a493ce988c28b1e557b7c241a9b6eeb40a7b6343a5fd5ab68e23f783",
+    "src/components/backdrop.vue": "d986f4e1f9b790c0eb638871f8b8e8e3343df8c193d05943be81767af9f4326c",
+    "src/components/badge-square.vue": "0c2ded67017460f567b40fb2f4d98a846ea38fb94d1c2ce1675350a49a3fffeb",
+    "src/components/bar-chart.types.ts": "968416cb2b20a1101e3285ac5f534150482d02787c24680cbdf1d6bd31f20c84",
+    "src/components/bar-chart.vue": "86bb741d4e4a3d4956221d3e4596c487f0f9cfff04fe8e5102162d1f1a5ad844",
+    "src/components/bulk-bar.vue": "5ef87609c83ebe5be96a0a40936c960b2fb52ae6504b05e03610040b3c0b8154",
+    "src/components/cart-summary-card.types.ts": "5601fea020f5b34cdbd26b937dea1200da0a74817e5fb964789f19e2a5d3c0bf",
+    "src/components/cart-summary-card.vue": "46aea13b6abd9fa1d0b5eb5f12ae38c9c7b453eac782ba76403621f310701699",
+    "src/components/cart-table.vue": "f72ac2199686aa7c31d39aa0b40c13b62d10a2136dac329829d02050443facc7",
+    "src/components/checkout-step.vue": "cd48f1c733ac00b54c73064d01302895b14a04ca715abcbf60e2ac7987a2104d",
+    "src/components/checkout-submit.vue": "a85932e255371fc8eba240d80881b8ff7cf72e673254f1863654c3596dd16549",
+    "src/components/code-window.types.ts": "7ccd99c880b4b6335243f2a94d69984a0f70dff47a8c21750714ff09675187e3",
+    "src/components/code-window.vue": "d09f3da41ca0f0d7a12c8d9f3bc35f128b3095b27390274d68757bef93e52c84",
+    "src/components/compare-mark.vue": "2f63d44fb8f76132dcf2b0e0fa303e0f0170df2466ebe1a9ccd47ea7c2b800b5",
+    "src/components/cta-actions.types.ts": "46940268f998167e911b3f9e625d8cfa289aa47863e1ae5f45b64fa0292c1f5a",
+    "src/components/cta-actions.vue": "36ac7b2435a1a6dd6f86145d5550d96be7f3d6bbbf74f3b1b3bd9b1e1956dcdb",
+    "src/components/cta-proof-items.vue": "7a1832d8cc1c20e0386cb9a0385d2e9b651c151098ee63787a2c9c9389225519",
+    "src/components/drawer-lines.vue": "4f3546746a924fc5997dbbbe981df4dcc6b5d6b9721bf4518a177f4c91cb4d17",
+    "src/components/dropdown-item.vue": "9eb4829048af0c770bb18fb36a2d0466205abce562a81bc56e5829530a8564cf",
+    "src/components/editor-tab.vue": "1c57ea3afb5c2068287f41ebcbca405e40f6d5bbacc3f42791d37f5d2f06fa17",
+    "src/components/empty-state.vue": "30999bfa35905591d5ed3ebfbc3a8f9f46b976bc0ead704e2d758dd5ddc2f5a5",
+    "src/components/faq-cards.vue": "51ed8c7bc81d54c9770950177d4385022bb9f1dd05218878f0c190a6c068bae1",
+    "src/components/faq-disclosures.vue": "e4476faf29a2bf675db9bb19ff802879bc45a772e193840b079c5cea675d350d",
+    "src/components/faq-finder.vue": "398d742ef7d048d771c6fe363ee6e75f717710daaf8c7e8219017f1eb9a963ec",
+    "src/components/faq-help.vue": "0c556474429881843ab80b3c7c248e9a2d520db40cda673d994c9a8fdcf350d1",
+    "src/components/feature-cards.vue": "a14a858432fb832c3d0952315f6cecb8c65bfa739fd1bdca4743e2c943276202",
+    "src/components/feature-metric-cards.vue": "594306cdfbabf522d7029e88bcc8b84b0fd587bb1b961a34986bea81d2e7d308",
+    "src/components/feature-pairs.vue": "c6db9d9f90ed22246538a603f64fdd4f35f9b40ecfa1f504f52ae615bfcf87fd",
+    "src/components/feature-rows.vue": "5afb3abf7cb3e0c8e2e32511075e49cdab9acd2221d5c8a48db64c5826cc29c6",
+    "src/components/feature-stat-rows.vue": "a84c795e5d0e5b08cf3548519123d321f375071f2f537cd2ec34f9e374ff7cfd",
+    "src/components/field.vue": "ae89c7cad8c7a0708f221e47dec8ab67e3fe86d86b5d05ee4675552d5135eb56",
+    "src/components/figure-block.vue": "53b7124fa8b4a903928b37ee630c8898dad2c97c1a79372f361585e9e801bb5d",
+    "src/components/file-tree-item.vue": "735679d612576979efe9576047d4f600bd1c50f2c1055292dc2a25819b3d7eb5",
+    "src/components/file-tree.vue": "7bb57bb031b33054bf8c528831c0323f7649787b32d0b24af954ef75e584cdcb",
+    "src/components/footer-brand.vue": "381fbe2c8cd86383b73cd08ada8aad619bf59eba9bdd3742f1bd04da2d7aca0a",
+    "src/components/footer-card.vue": "999a70ebc64070bb1514affe4dc64d78de0fca9c21d347644666cef05be80b7e",
+    "src/components/footer-channels.vue": "e07c50ec36b6229e2c4b2d3028151fa37c803160d320b2876f0111e4a58d664a",
+    "src/components/footer-columns.vue": "3583769d9f018933dcfcdc4ea1c8009bc91284274d227473d8bc0bbb46f60aa0",
+    "src/components/footer-contacts.vue": "3cc78f83c776f7fa0e35e27c4fb12b76279b0ac3042500ef23e6689736353099",
+    "src/components/footer-figures.vue": "23058e9fbc0c2716987da69f7a8195af1ff0a2c1ca2212f52524f6f38472ed22",
+    "src/components/footer-group-cards.vue": "39616ce159458f35ec1f34ae01261ecf9f72f67221551b99f2dc3edd7b7bfb92",
+    "src/components/footer-link-columns.vue": "4b47f7dc389ddd4fae401ff9de7967dd34cc16dd031d4ab88e3a6d19989dccc0",
+    "src/components/footer-points.vue": "522949694c5b49654f94a97700b6aeb8121637eba561619380bca14f4aae0dc8",
+    "src/components/footer-signup-card.vue": "2e62e6054e4321b5ee5e9c6b254420df5c535ee6b90c02197d5329b0a05c3cb4",
+    "src/components/footer-sitemap.vue": "79f85817f7ebd619fa0501bf95ca328762317a1b1413bc41a06b2be1318ed1cb",
+    "src/components/hero-badge.vue": "d04f395a6e30b7ef011555f5d7a5c2e375ef8e1b46e0ef51bfd32415f00a9ac4",
+    "src/components/hero-head.vue": "68913152d57574cfeaa13f88ca5a8fe86772aefbe3961d78306caddc427dbd17",
+    "src/components/hero-split-extras.vue": "4de52e6fb33edfd659cadb783ca790d7651e849c29334639d1e40f7d69dc9dd9",
+    "src/components/hero-split-media.vue": "abd8e3f5fd5be2bb99729821d9f6eb78b077c68efb8dd2ff3f977cbde83d9a41",
+    "src/components/icon-tab.vue": "3c3e14dfb16bf95121a42399945e038179eae2a7adc973372cd719215095bc91",
+    "src/components/icon-tabs.vue": "2d1d6d0c6f3079426c7db5fedc07b92b4030900428282a1ac704dd69dea899e2",
+    "src/components/job-cards.vue": "20e25b03d1ec5e24b1686965b4f606580bc56c14027693fc9f6d0f8bc9d54d8f",
+    "src/components/logo-sidebar.vue": "40e3aca79929e16bf45c763abc9afda2ac58c1b7a79442c8a51b72e470ddd4f4",
+    "src/components/logo-slot.vue": "ca50faa206d256b52a0d86030ddf64e4708b9e4d75af2b99d17df9eb809f841c",
+    "src/components/media-contacts.vue": "9ad0c02126dcfab318e4e89c45d4c36dcad678276abd96c19a7b2edebf183593",
+    "src/components/media-figures.vue": "3ae60c24f0d37783feb159e934f94e58dbe6aebc40c2d1cd07dbe03808f47503",
+    "src/components/media-frame.assets.ts": "fe55210352e1184f2ef9109e52fae0e862a04d337c4abaa521c73b966d2cf7a1",
+    "src/components/media-frame.vue": "808955536d6368b0b2491a2fb33a1f674515188f3e1d91680211a829a92cfd54",
+    "src/components/media-posts.vue": "93bd2a233e2582f132544fe981458e279ba8cd2e2c2d781e0a6a0c14b368d97f",
+    "src/components/media-review.vue": "ea46447bbff8f269a5e54a376a67214ef061cdeaf61098087f85ebc79f13d054",
+    "src/components/media-steps.vue": "78f8df8793aceb55eefb7fb27abe471fbca8a8250dc52e11154c226ba3cabadc",
+    "src/components/media-topics.vue": "0becba817ffb1e0aad09646ad5385ffcc0cf5b5d2bdd21d6dfaa4e6391b17ae0",
+    "src/components/member-row.vue": "bdaab8d5f2255e61439f903aaa320e36061673838637852302de18484888d46d",
+    "src/components/menu-entry.vue": "b38953adf59a99bec4fb197f2b3203ea6c14fbc864ef7cc2cc7b37fd386e909f",
+    "src/components/meter-row.vue": "f94c2668c92c76c0957823192dcfe9a32a60cb2f8e784d91a47aabdec38e87bb",
+    "src/components/nav-actions.vue": "c411dbb2ab32c670b4bb9dde0a45fafd71945984dee1b489bb9e55e97b9e2e46",
+    "src/components/nav-bar-menu.vue": "11cdd7b60b45c6411e84717a47a58a3c92f65c9e24c2327e59e89289b52e3432",
+    "src/components/nav-block.vue": "a5c52177d61a8906476a9105a2ccf837fa704e94fb2f764bfcf9ceb5c094a822",
+    "src/components/nav-item-row.vue": "8a41bf9ed107bfdf9b86725a38491f23bd6d57b8d9a56999bf433802e0242db1",
+    "src/components/nav-item.vue": "4ed309fe3b17a6992c92ccfe7740358a734a7e5dc77e5394c86c041f91a06fa8",
+    "src/components/nav-links.vue": "e15922a64c44e0998c73ff85b8a2af38b9576f1b68916043406da8c5b03cc819",
+    "src/components/notice.vue": "39251620b83840a79055c290dfc7f4b1639dd28ee82e91fde09e1d21e974124f",
+    "src/components/number-field.vue": "79ee862d7cb09dfcaa41dd595d14c489f31237ef995db3a53ccee5d7a419f43c",
+    "src/components/offer-media.vue": "c853637571f1af76ed03242c3857b346d83527aca8827fd2d278f7e81c6f4a5f",
+    "src/components/order-rows.vue": "f1eb575091ff4ff1e7c47e72e3de30979e36b33122bc075d5623b62173146864",
+    "src/components/over-media.vue": "a0e5e2a8eef97253c02f1bbf32dff65eb77791180995e4c7ab8fe29b2355302e",
+    "src/components/page-aside.vue": "9243aaf164d17083f9e01a33ab69278a3ad28f0522b1e67550f8e1dd1fd2dea1",
+    "src/components/page-crumbs.vue": "2c98177e51980ff2111b5de2a78352d18fc198a4536de6ddfc222ae51b760e67",
+    "src/components/page-header.vue": "c0b74b63c76f8f1c6a5cebb52859c39a2d6cd462db3e2c46efc66e4ffb2168eb",
+    "src/components/pager.vue": "3b06c9a689840296d1609b0bb74f1cecc02a67f968ef58f754b065f9282ab7f6",
+    "src/components/panel.vue": "0c625ec7ede41d63ac9fb95e76b4079e240f4659080a0714b0fcda282066ad0d",
+    "src/components/payment-options.types.ts": "d73a1783fd536ff758a76642351532b0783a8e69e372d42e8be7200c5099d08a",
+    "src/components/payment-options.vue": "20f2a9b8816ced62dd9b83df2566f9a441b92f121e406d637eaf24818b3b894a",
+    "src/components/pill.vue": "0b292c0eca4ac857861866b82e7c5d95b7a3c82d49726fcba35638cb87eb30a6",
+    "src/components/post-actions.vue": "bba84884370740722a6e4c58f970c5bd88d26a77d9e8b1b85951f47873612c27",
+    "src/components/post-author.vue": "d7247858380b1d5f53a0b39fbe46ed4d5c137f39da875dde6e005320e262c8c4",
+    "src/components/post-feature.vue": "28568f46a380b212b534bbefd5e2383304fa8a00eb301a067371cd5b34e3fcb6",
+    "src/components/post-mini-card.vue": "f3093b525e99be93d4d7f97d06e7c083aa85b7edad672232b7fe8ba4bc301ca5",
+    "src/components/post-outline.vue": "573341919f1a89fc68ef4806094933b66d4718eb7b1094d3a7876ea755689af5",
+    "src/components/post-overlay-card.vue": "4d447cf21d29a9c2d1bdc571eaa27e238bca65172cb477df111c67639cf41f19",
+    "src/components/post-stats.vue": "a9f28b6babba180708a64a8f14d89c90e9189c430644d335b3dd55fd76078138",
+    "src/components/post-tags.vue": "0d70d57bf9ec93db10992c7b8e6b32fd73fff8ae4f8c856970ac1ca561cf6b49",
+    "src/components/product-gallery.vue": "388753191e838331f3ee17d8d5f4e1ac98b5d65189104dd640d99d2f9399b377",
+    "src/components/product-price.vue": "7ba7b8e226fde3cd3c93f37c5320a81c4c3c8ad5fa1ca6b1316c3ce909b2de4a",
+    "src/components/project-tiles.vue": "6ef52fa2be864601bee189ba834bd48f506a4f2914c5b0f9cd6957d7156c41e8",
+    "src/components/prompt-composer.vue": "97e67d982f3624f51a2b7884a09ff44f8c2d57b9547de7f47b6981e7f2b33eb4",
+    "src/components/quote-card.vue": "a9080a0e58166704c38b804237611249fdd66efb25c9795d707504e5b68220d5",
+    "src/components/quote-figures.vue": "c46f96cb85104b4f3ed560252dc3424065167b1b82cf184a0b659eea276441fe",
+    "src/components/quote-logo-tiles.vue": "e0e1c0fabfdb55352875851ceffb51612a4bfb633d88596aa1bc6ba17627d2ef",
+    "src/components/quote-proof.vue": "4d68fe982d2dec6004f45c1ecc709aadfcb8505bb3cb46bab40e528e505a8ea8",
+    "src/components/quote-rating-panel.vue": "d7b53915c8c1fad4358ae769f6527d9dde0faa9e1d943700ca825064326b5399",
+    "src/components/quote-slot.vue": "60552cc1bff2ce742e15f05b973d911b912f358b9c6e785f1f8a7fc34856b60e",
+    "src/components/range-field.vue": "f8540bc729c91732e5bb17a495909cf98faf1b67982ced936ce5a7ca03a15ff9",
+    "src/components/rating.vue": "7d2affe6ecc163a5ff75a31817c0a153c986c357b19f2ab6e06842105d4a2089",
+    "src/components/region.vue": "5e113d39b56644d082d24ce88292c0e19ef0054ea1e8a9ef6f4baf3f5cf1fbc5",
+    "src/components/search-field.vue": "f1c5ddac4f76845877a03585fea41f0d2f34f1d5891b75a2033a6b660f9e035f",
+    "src/components/search-palette.vue": "0cba4a1e5f0d4aab6e97e18b106525ddcc610faa8c0ba97f6119a8b7477249db",
+    "src/components/section-box.vue": "2eb9cbecb6bf954025caf54be647eff387751f1fb5c3b51353f800d5294a470b",
+    "src/components/section-column.vue": "2fea904febd8f5b3b1da4a476639a2707c28f9d12fd624a3f746f3bb3db5c9ea",
+    "src/components/section-frame.types.ts": "d65a75d32577bc988045d002342eb28412a47fe880cb85c0f9fca3806354f11c",
+    "src/components/section-frame.vue": "b904feb30176c28e219fcd94586819084f030d3ca49ebcba776d371256d1ef49",
+    "src/components/section-head.vue": "1a264b5387b255ab9d94fd3853bcdc8aeccea0cbdc7874e630e4004107bdb164",
+    "src/components/section-header.vue": "41c087858d34cd6dcfb99f82aeb0c31ace461a9433e454d3beea872574004785",
+    "src/components/shell-content.vue": "882986d37104e03639c72ba5a1b53d3d119fc6ad0eb70a1ebe660062fed87789",
+    "src/components/shell-footer.vue": "70ec7ba577052b882e7273f9cb31fcea7ee96092c68cca30bb36ce526469f0c3",
+    "src/components/shell-sidebar.vue": "1929eb0623967acfeeb94dce6faacbe4437a8045a40cc35a79e9f548c6549e1e",
+    "src/components/shell-topbar.vue": "590e034a2a7b7e4fe8b38b4c56ff7f0f5ef80919c3cb5ae86db167a4b83c4714",
+    "src/components/sidebar-panel.vue": "918cc84c8052f1f0926a0152bb5c96ed6d7cfb39ec3bfbafce07df6b58d4d049",
+    "src/components/slot-grid.types.ts": "dbfbdc87d0bb8b62513e901d0aefd48d554b0532fd683b34605b5b47e100d1a0",
+    "src/components/slot-grid.vue": "2b0dce8065d9986f5dd712dd0bed3e0e25d868f1fbbefd90debeaafed77dc45e",
+    "src/components/stat-figure.vue": "79a80bf5999948975afd7a1952846ea3751f29a536174563249e048e3dc89ad4",
+    "src/components/stat-tile.vue": "5b6dcd1e3a5189f603ea211d6443d21bd5841716b63119fa93844643068614db",
+    "src/components/story-dots.vue": "8eb3cd3e76b6f3ac9ebcefbca53735a3e05f5fa9a28da2a30eaaa45a2d0b49d6",
+    "src/components/story-panel.vue": "6723f4c58f5c668426b38d0011dcd7cb5dba2c456656ae248145c5159adbde9d",
+    "src/components/switcher-item.vue": "77f2bcd5cc1668890849826f65478f8b13e7e4f1e9766e1d453701f8cc30f356",
+    "src/components/switcher.vue": "22b9d858baf179d1a1ed032d861d77cddd0db0e5e2506cc4b81c64a7cca8f5ca",
+    "src/components/table-toolbar.vue": "ffb988ac3d6335ac9be91c5713f6f9d720c52c38582aa5874975d5c9e6343191",
+    "src/components/timeline.types.ts": "2f1b0a9d5471f486efc6a86921b52143867da2a4d36963d84c9cbf77332316b1",
+    "src/components/timeline.vue": "c263985dbf8cb84baac4be2e16183c43b4b9c05e8304648a728de1e519b87742",
+    "src/components/topic-chips.types.ts": "04d234613b49a81b216e8913c294ba6d11aec58f17bc49580793347d39149ec3",
+    "src/components/topic-chips.vue": "8eb6df62de7ccfd5b6beabdef7204feea3981cbabf6391fa4d4134c1b51fe6ce",
+    "src/components/weighted-title.vue": "49f035c0ed150ed745d4b9cf7cf18a56e6c817947d7144abf5591a7f5a88e32a",
+    "src/components/zone-rows.vue": "e462b8937dfc96d734fa41b63326c39810aae27c85e245d549bbb32629cd100e",
+    "src/index.ts": "5ca0fb4f3815e2fc7548ee36a0e908b1930d9b1b582c2be25acce4a1a0df7e3a",
+    "src/presets/defaults.ts": "0f8d491e02d5cbad4b3e324239b780ed1b8dd6acdfe1c3fdeb87295167a94f51",
+    "src/primitives/alert/alert.vue": "f0091a95926e6ce3856e87cb20f08142f1d16aaef8cd296d1217fe37d639d91e",
+    "src/primitives/badge/badge.vue": "49562afeb5d5b321c310a994e1ff30c32afecba3d0bc9f93628b6e00fc30059b",
+    "src/primitives/block/block.vue": "ee232e656a5f8ce7755cbaf0c5276ba5469be6e79aab62f17f4d8cae3d8c8f94",
+    "src/primitives/box/box.vue": "a6722581f8ceae155bb02304d33ca12cee2a0220f9cb8d6bd5dd05f05fc1bce9",
+    "src/primitives/breadcrumb/breadcrumb.vue": "133668dac255a59c9f336788807c9057bb83e00a65d980675c355be106c37587",
+    "src/primitives/button-plain/button-plain.vue": "6b26793925951e65602a28f296823f24b831211aceeed2422a31dfdee7716294",
+    "src/primitives/button/button.vue": "0fb4775d5e4d9765abd28d6a87e2065aaf56301f6fd15905eda4330f4119ed57",
+    "src/primitives/card/card-content.vue": "2c00ffed3ed15ea4a6da5f72224c52a7db6d1ab7c19e6f9dbb4dcadb636e5c36",
+    "src/primitives/card/card-description.vue": "3a47b688a6238c18b87e42b7f41a88334d336f2a1681329329dd938a8a6e7ed1",
+    "src/primitives/card/card-footer.vue": "d7aa519885f2fc15948979bac41ac0c5a6b078021300d3ca760d6670d349a091",
+    "src/primitives/card/card-header.vue": "73df513b89b80859b1adad291fe0b9897228f6d37f08b0cfc9e1076d63513928",
+    "src/primitives/card/card-title.vue": "2640195b2bddf8ad7e37fe7c4ebb4254666b3d82567332a04476d08d07e02bec",
+    "src/primitives/card/card.vue": "b722999ffc35e817b9e7c7d0d3046f06dec04d6df60cd4c362c5e558fc94a742",
+    "src/primitives/checkbox/checkbox.vue": "4bcc6e87bd3f4a01a7908b16794e6dce5c9f04424ed127ab4a9815ca958f6584",
+    "src/primitives/container/container.vue": "710403e226f16786a2b27f0ab79e991caceb22bfd0127860160947de44407234",
+    "src/primitives/dialog/dialog.vue": "bf036c05ee7d5c04c7d26deec13b57ae1a00bcff7b800ca54d5adb945f97f00e",
+    "src/primitives/disclosure/disclosure.vue": "c3e9b0eb0b046729f8c83b3180acdaa840dd9409111c4f81d694ca1690216024",
+    "src/primitives/disclosure/summary.vue": "eadd584039b0204eb2f0f7cbc2224b3b2b6925cefa486b032919ed029bb8ac9b",
+    "src/primitives/form/data-list.vue": "fe73bf77f14fbe63fab1a07857e827c94b2a91b7c576de3996784d5fe4f9e668",
+    "src/primitives/form/data-option.vue": "0be5b0985b8e7960c511b8477d20928fe102da5234df85c2228ce410a72196f9",
+    "src/primitives/form/fieldset.vue": "8bf9db78b3fa6d200e2183e26e0b514d34c582e82b0ed338cd0775c00452d630",
+    "src/primitives/form/form-description.vue": "f1fb3028d9648407880ffdde3d226c1fd1f8d5fc3e647d0bac854c3c4dd42fef",
+    "src/primitives/form/form-item.vue": "be032299eb6808e5720cf431b0e7d4538561092d3ff417215f3391ef851d600c",
+    "src/primitives/form/form-message.vue": "b850d75dd836c96b71a19c0200b8a0049a6eaf94d6e03bf0803f53ea2fb7ea23",
+    "src/primitives/form/form.vue": "038f06ee9b1a4443320fd0d9357f4b0d1aa1ef0eecc1a98858ea12872a2c9d00",
+    "src/primitives/form/legend.vue": "d1226ccf9164c64fd3578f46da6095ebfac4dc3580a4c7da8f4b70a2409752ff",
+    "src/primitives/form/meter.vue": "7cffc770592559a3afa313d4816f0fddbeac58c5c60cb32013566e4a951d7774",
+    "src/primitives/form/output.vue": "13ba51fae6b50af4f5ef5a6b3ba34977c7e241b61c7202e4b414056a76316f74",
+    "src/primitives/form/progress.vue": "80bb7e5440b7a5da098514ec7f784237475840106dca6bb66e3cd18f26865536",
+    "src/primitives/grid/grid-col.vue": "6eecb2029746891b80dbb11bc0bc31971cbdcc3b0196b5105cddb26adfd39fc2",
+    "src/primitives/grid/grid.vue": "bb1cbea1ee879ef0f6848e71e7b456e6a140c7bd38c4cd872cd967fe3b593a12",
+    "src/primitives/group/group.vue": "563793da57493c198bbaefce751ff98c5a319cb053a7687ef67e755523715539",
+    "src/primitives/icon/icon.vue": "cba02e5efe4543284ec0c2a2ac814d263d1a7ab00a7d78fd9127c210931e7e29",
+    "src/primitives/iconbadge/icon-badge.vue": "9c258f1f856f8764c61e986da292e1ae3a13a2e98417b97d5a39b248dbc0bd74",
+    "src/primitives/image/image.vue": "fe0702c183a019aea29af25054489d38d257361450dfd3feb8102632f09d50e8",
+    "src/primitives/image/picture.vue": "decb811cafeea20f68a84985dc27d99e6bfe3023b2ec36390bbb8d8611b4c995",
+    "src/primitives/image/source.vue": "8ed3f5e079b67093ef3e416cbeb01cc2117b5523e97181ccbfbcad276cddb3a6",
+    "src/primitives/inline/inline.vue": "b9ee5a9d090598cd0f7defb040e467ee38e88a73f8b937eba7fdb01a21979447",
+    "src/primitives/input/input.vue": "be2305764acd0ee647c60d3f28eeb3e13887fc01d583147289c9cee4bfc9da76",
+    "src/primitives/label/label.vue": "2bfcebf907f61f3f5e1b78f09c59c66ed143d28a556fe773f2457acec179bdb5",
+    "src/primitives/linebreak/break.vue": "7f9f14c67c3ca9fc850fff1a86d038b17a4f9fc8d2ac7c9d0b182ec17b533b69",
+    "src/primitives/link-plain/link-plain.vue": "693c621cae89a4c9ead4440948b2db1dda571154f6c864673f126b9f4da60592",
+    "src/primitives/link/link.vue": "ddee2c7f4e0cebda5ecf629d023662a201aa55edd77b116513d7dc21332c5592",
+    "src/primitives/list/list-item.vue": "322e2e17ed077337a6fc1f539642f62cc63a1a3281ce2f36cc011f0557b13897",
+    "src/primitives/list/list.vue": "36a8f7988fbee90755403a0dc0bdd3abf5a1ea1f2422a80fe6b4f398de991813",
+    "src/primitives/lucide-icon/lucide-icon.vue": "7380f37cb4222a3dcd709b83afcd17709428faaf00f2c54bcc97239ea45e1ab8",
+    "src/primitives/lucide-icon/lucide-icons.ts": "a05bb5050ccb7c015088a0c5061116aaa400a15b70f3c8a9f9ca2e4bdd2ddd84",
+    "src/primitives/radio/radio.vue": "3cefef8e1020fd8d8221d5a82e1e60a0331982d465a7a0bb530d560f14b3a6d4",
+    "src/primitives/range/range.vue": "1bab1d15c1fe75d0710335c6f5f7e7116eb86d6e8edbf81111d59646baee94ee",
+    "src/primitives/select/opt-group.vue": "95c1080d88c99081ff77bda57edbad38bb50e2c336a7e5be1a591e2efa43917c",
+    "src/primitives/select/select-option.vue": "70c15f952f85920e48bc01d1b1fa5491d78eb8a52ef1648475dcf7f4e13c1c22",
+    "src/primitives/select/select.vue": "f4559163c6a0c2d24942bc7af70430bc083b70a1089d3ee650fe73be345da565",
+    "src/primitives/separator/separator.vue": "e339dbd554c723cf54fa6547667fc69b7b44757f53e7dcf8e9b9686df5216ee1",
+    "src/primitives/sheet/sheet-close.vue": "9c67b13d7e827b113b78b0f01a2fc21bd133f4c48b301852871bdb9fc3fe3c43",
+    "src/primitives/sheet/sheet-trigger.vue": "167210cd603c58ae410070c693497e2654d190c66d6b24c71fbd98ca8a4c0ce7",
+    "src/primitives/sheet/sheet.vue": "fdd3a9a0eb9b0a5c27ec67ead965d6216319fa0bdfeddb0356977d2cfd700ac0",
+    "src/primitives/skeleton/skeleton.vue": "cb7b3c318731217091f08f01740d5b687790c632f62d6a7ae2084e40d429ec13",
+    "src/primitives/stack/stack.vue": "7e0ed2be8f726a24bbb0de1a5c128811c432f5799f12f378963947a8b70be319",
+    "src/primitives/switch/switch.vue": "6baf2066c6d52395927e2b83dbfac2a6b1d41568d999b52adfc02ece5c13c0c0",
+    "src/primitives/table/table-body.vue": "20f7a7cdc2964e9f9ea2d8f0017eb48ca8490c6a52e5a7387028a1cc433829fc",
+    "src/primitives/table/table-caption.vue": "e2f4d553aea7538b42bb6ef92fc6a21ae841bc6ceb46c2574c636258402fb3c6",
+    "src/primitives/table/table-cell.vue": "21b12ec3930cdc97e4151cb61cb3f48827f85b39f7b5bf2967da0a9e0df090db",
+    "src/primitives/table/table-col-group.vue": "b67a45aaf3c6c20854e1842e6f0eac02162bbc761944125d4988bb33d143cb9c",
+    "src/primitives/table/table-col.vue": "b4d35d2ee6a60efefec114e425ad6f36c146d461006ae741a7393feb3c377d62",
+    "src/primitives/table/table-foot.vue": "c3a09fe05f59b3dbd90ffce2bb6b402cfa198772c92ffa18aaebb16cc3f3b9a6",
+    "src/primitives/table/table-head-cell.vue": "2f11607d866b5e9c06bf927346ff81c41f250d115a6796bfd6eb10d85bd5f51b",
+    "src/primitives/table/table-head.vue": "349ded8ec1d3403a2609c4526c15a192d497a4916193c2a4a3871562b5440a70",
+    "src/primitives/table/table-row.vue": "44860baf34b63741535606e67a19c461ac2b559b815c79b5143003f4e6019767",
+    "src/primitives/table/table.vue": "d0494459840dc9a0a4e10d9738d6cc2b68cc74d0330bc4dd914e7a35505d98c7",
+    "src/primitives/text/text.vue": "3c240f9dd04712ef3ee6f7af44604814e5fbd06c104b86cd030fdda539f8aae4",
+    "src/primitives/textarea/textarea.vue": "b6e9637dfd4a60fa35feee61803628586c6372366eeef14a34f6909a4a4e5d5b",
+    "src/primitives/themetoggle/theme-toggle.vue": "ec7cd52d48111179dc8b5ad14ad837c293fd28d35b8e746809001f1523bae5c7",
+    "src/primitives/title/title.vue": "7f4e4effb1d65bb2418e4637256341038f4444b13b13dd8d214279108e975ad8",
+    "src/styles/index.css": "faab415882b268aae6efcee8a1db1660f9c0db83fdd1fdf23b0a9fd07eb18e93",
+    "src/styles/kit.css": "61a0fcb6630cf5e9811af1d16acc75066c440998b362d5dd6e576d6033d8aa91",
+    "src/styles/theme.css": "7c7c42d778a4ecc5ad87aeddf6fefa651f7164c4a24a4c78de2583a9fdfc2897",
+    "src/utils/a11y/dismiss.ts": "4857c8d86154e03cce8666a4bee9f169b1912eb37ea617a50e0313af198eb4cd",
+    "src/utils/a11y/focus-trap.ts": "48192cd0da3f0e36da6f6270565e86474e09d86dc4939512c5f70197312495b6",
+    "src/utils/a11y/focusable.ts": "1c198ba33a0a28cd3fc60b3d0cde564724a0c8a763010cf5d5b1c5749aeea039",
+    "src/utils/a11y/index.ts": "3f75625517661a016eca02d8be226e9422df2278c61f9c22bbc97e6047e82f9c",
+    "src/utils/a11y/roving.ts": "c01c19f7ea3be4aabfcbd64b0ea7c2657f5845cbdb5ad88fb1f8079937c6b60b",
+    "src/utils/a11y/scroll-lock.ts": "857cf3ffb53ce2fec202fa74f43d8d0c8e088a06a42daa60fa9e076f5f9dd3aa",
+    "src/utils/cn.ts": "9a07c604362da93936b2e5efae3bcef078d4f3c158e8aabe65856706768dec3f",
+    "src/utils/env.ts": "9e846ba9d690cb22d4fffeb4976200727854c2657845baababf5e1864ec916b1",
+    "src/utils/expr.ts": "d69a9fae5a2ebc126e0aabcf5d5c09697cc91c4df3ed453edeb14fba2376a28e",
+    "src/utils/format.ts": "e1bafdc1408e2a68b58d1b520878ddb87f7cb626c45b5ca65869729bd7dfdb51",
+    "src/utils/index.ts": "11aa42b5489421a050b39364edba13c4490f8a660d150c97ad8b95bef39050c9",
+    "src/utils/tags.ts": "e1406704ec4c738b4c395a2603de2f4313681504b84232f0fffa1d3d48cb2a4d",
+    "src/utils/variants.ts": "f027b4237cb7058efda6bd627d9db07b1e22b59f30bf3d8590f13702e1dd6415",
+    "tsconfig.json": "013c683e9ebea7a1b1232d9011d405e9108ce6d85320ba751ed6f28a4c495b47"
+  }
+}
diff --git a/packages/vue/ui/README.md b/packages/vue/ui/README.md
new file mode 100644
index 0000000..a9c1403
--- /dev/null
+++ b/packages/vue/ui/README.md
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/generator/src/readme.ts -->
+# @ui8kit/vue-ui
+
+Vue 3 package **generated** by xgen from `xgen/specs`: 40 bricks, 72 parts, 243 organism(s).
+
+Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`; `bun run check` fails when a file differs from what the specs produce.
+
+```ts
+import { Button, Card, PricingCard } from "@ui8kit/vue-ui";
+```
+
+Styles: `@import "@ui8kit/vue-ui/styles/index.css";` in the app CSS (Tailwind v4).
+
+The package has no build step. Text comes only through props; the organisms take their texts as `labels`.
+
+## Layout (shadcn style: three tiers, kebab-case files, PascalCase exports)
+
+```
+src/primitives/<name>/   one primitive per folder, the variant table at the top of the file (`buttonVariants = variants({...})`)
+src/components/          small compositions of primitives (media-frame.vue, nav-item.vue, ...)
+src/blocks/              page sections made of components (hero-section.vue, logo-cloud.vue, ...)
+src/presets/<kit>.ts     the only place for kit sizes (arbitrary Tailwind values)
+src/utils/               cn, variants (a cva clone), formatters
+src/index.ts             named re-exports, grouped by tier
+```
diff --git a/packages/vue/ui/package.json b/packages/vue/ui/package.json
new file mode 100644
index 0000000..b0eb76e
--- /dev/null
+++ b/packages/vue/ui/package.json
@@ -0,0 +1,60 @@
+{
+  "//": "Code generated by xgen. DO NOT EDIT.",
+  "name": "@ui8kit/vue-ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Vue 3 primitives (40 bricks, 72 parts) and organisms, generated by xgen from xgen/specs. Source only, no build step: the consumer's Vite compiles it.",
+  "sideEffects": [
+    "*.css"
+  ],
+  "ui8kit": {
+    "runtime": "vue",
+    "generated": true,
+    "kit": [
+      "src/primitives",
+      "src/utils",
+      "src/styles"
+    ],
+    "composition": [
+      "src/blocks",
+      "src/components"
+    ],
+    "blockRoot": [
+      "src/blocks",
+      "src/components/faq-help.vue",
+      "src/components/footer-card.vue",
+      "src/components/hero-head.vue",
+      "src/components/region.vue",
+      "src/components/section-frame.vue",
+      "src/components/shell-footer.vue",
+      "src/components/shell-sidebar.vue",
+      "src/components/shell-topbar.vue",
+      "src/components/sidebar-panel.vue"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles/*": "./src/styles/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "check": "vue-tsc --noEmit -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.43",
+    "tailwindcss": "^4.3.3"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "typescript": "~6.0.2",
+    "vue": "^3.5.43",
+    "vue-tsc": "^3.3.12"
+  }
+}
diff --git a/packages/vue/ui/src/blocks/about-company.vue b/packages/vue/ui/src/blocks/about-company.vue
new file mode 100644
index 0000000..17db4d3
--- /dev/null
+++ b/packages/vue/ui/src/blocks/about-company.vue
@@ -0,0 +1,100 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/people.ts -->
+<!--
+  The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout
+  (split: the pictures beside the text, stacked: the pictures under it), tone, density.
+-->
+<script lang="ts">
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type AboutCompanyProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  stats: Stat[];
+  values: Feature[];
+  layout?: "split" | "stacked";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  stats,
+  values,
+  layout = "split",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<AboutCompanyProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :tone="tone"
+    :density="density"
+    :layout="(((layout as string) === 'split') ? 'split' : 'stack')"
+    :media="{ show: true, side: 'start' }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Grid v-if="((stats?.length ?? 0) > 0)" cols="2-4" class="gap-4" data-testid="stats">
+      <Stack v-for="s in stats" :key="s.id" gap="0" data-testid="stat">
+        <Text size="3xl" weight="bold">
+          {{ s.value }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ s.label }}
+        </Text>
+      </Stack>
+    </Grid>
+    <Box v-if="((values?.length ?? 0) > 0)"
+      :class="cn('grid grid-cols-1 gap-4', (((layout as string) === 'stacked') ? 'md:grid-cols-3' : ''))"
+      data-testid="values"
+    >
+      <Group
+        v-for="v in values"
+        :key="v.id"
+        gap="4"
+        align="start"
+        class="border-t border-border pt-4"
+        data-testid="value"
+      >
+        <LucideIcon :name="v.icon" :size="20" />
+        <Stack gap="2">
+          <Text size="sm" weight="semibold">
+            {{ v.title }}
+          </Text>
+          <Text size="sm" class="text-muted-foreground">
+            {{ v.text }}
+          </Text>
+        </Stack>
+      </Group>
+    </Box>
+    <template #aside>
+      <Box class="grid grid-cols-3 gap-4" data-testid="strip">
+        <MediaFrame :alt="title" ratio="3/4" />
+        <MediaFrame :alt="title" ratio="3/4" class="mt-8" />
+        <MediaFrame :alt="title" ratio="3/4" />
+      </Box>
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/about-me.types.ts b/packages/vue/ui/src/blocks/about-me.types.ts
new file mode 100644
index 0000000..255f048
--- /dev/null
+++ b/packages/vue/ui/src/blocks/about-me.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Skill = {
+  id: string;
+  label: string;
+  level: number;
+};
+
+export type AboutMeLabels = {
+  level: string;
+};
diff --git a/packages/vue/ui/src/blocks/about-me.vue b/packages/vue/ui/src/blocks/about-me.vue
new file mode 100644
index 0000000..cd3b3ae
--- /dev/null
+++ b/packages/vue/ui/src/blocks/about-me.vue
@@ -0,0 +1,115 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/people.ts -->
+<!--
+  A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of
+  specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills),
+  mediaSide, tone.
+-->
+<script lang="ts">
+import type { Skill, AboutMeLabels } from "./about-me.types";
+import type { Spec } from "./product-info.types";
+import type { LinkActions } from "./error-page.types";
+
+export type AboutMeProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  facts: Spec[];
+  skills: Skill[];
+  labels: AboutMeLabels;
+  actions: LinkActions;
+  layout?: "facts" | "skills";
+  mediaSide?: "start" | "end";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Progress from "../primitives/form/progress.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import ActionGroup from "../components/action-group.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 1,
+  facts,
+  skills,
+  labels,
+  actions,
+  layout = "facts",
+  mediaSide = "start",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<AboutMeProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge, level }"
+    layout="split"
+    :media="{ show: true, side: mediaSide }"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <template v-if="((layout as string) === 'facts')">
+      <List
+        v-if="((facts?.length ?? 0) > 0)"
+        tag="ul"
+        class="grid grid-cols-1 gap-4 sm:grid-cols-2"
+        data-testid="facts"
+      >
+        <ListItem
+          v-for="f in facts"
+          :key="f.id"
+          class="rounded bg-card inset-ring inset-ring-border flex flex-col gap-0 p-4"
+          data-testid="fact"
+        >
+          <Text size="xs" class="text-muted-foreground">
+            {{ f.label }}
+          </Text>
+          <Text size="sm" weight="semibold">
+            {{ f.value }}
+          </Text>
+        </ListItem>
+      </List>
+    </template>
+    <Stack v-else-if="((skills?.length ?? 0) > 0)" gap="4" align="stretch" data-testid="skills">
+      <Stack v-for="s in skills" :key="s.id" gap="2" align="stretch" data-testid="skill">
+        <Group gap="4" justify="between">
+          <Text size="sm" weight="semibold">
+            {{ s.label }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ tpl(labels.level, s.level) }}
+          </Text>
+        </Group>
+        <Progress :value="(s.level == null ? undefined : String(s.level))" max="100" :aria-label="s.label" />
+      </Stack>
+    </Stack>
+    <ActionGroup
+      :primary="actions.cta"
+      :primaryHref="actions.href"
+      :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+      :secondaryHref="actions.secondaryHref"
+    />
+    <template #aside>
+      <MediaFrame :alt="title" ratio="3/4" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/activity-feed.types.ts b/packages/vue/ui/src/blocks/activity-feed.types.ts
new file mode 100644
index 0000000..8da30ee
--- /dev/null
+++ b/packages/vue/ui/src/blocks/activity-feed.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Event = {
+  id: string;
+  title: string;
+  text: string;
+  time: string;
+  tone: string;
+};
diff --git a/packages/vue/ui/src/blocks/activity-feed.vue b/packages/vue/ui/src/blocks/activity-feed.vue
new file mode 100644
index 0000000..827f3d4
--- /dev/null
+++ b/packages/vue/ui/src/blocks/activity-feed.vue
@@ -0,0 +1,83 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout
+  (timeline, list), density (default, compact), tone (default, muted).
+-->
+<script lang="ts">
+import type { Event } from "./activity-feed.types";
+
+export type ActivityFeedProps = {
+  id: string;
+  title: string;
+  text: string;
+  events: Event[];
+  empty?: string;
+  layout?: "timeline" | "list";
+  density?: "default" | "compact";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Container from "../primitives/container/container.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import Panel from "../components/panel.vue";
+import Timeline from "../components/timeline.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  events,
+  empty = "",
+  layout = "timeline",
+  density = "default",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<ActivityFeedProps>();
+</script>
+
+<template>
+  <Block
+    tag="section"
+    :aria-labelledby="(landmarkLabel ? undefined : ((title && id) ? tpl('{0}-t', id) : undefined))"
+    data-testid="panel-section"
+    :aria-label="landmarkLabel"
+  >
+    <Container class="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+      <Panel :title="title" :description="text" :id="id" :class="(((tone as string) === 'muted') ? 'bg-muted' : '')">
+        <EmptyState v-if="((events?.length ?? 0) === 0)" icon="activity" :title="empty" />
+        <Timeline v-else-if="((layout as string) === 'timeline')" :items="events" />
+        <List v-else class="m-0 flex list-none flex-col p-0" data-testid="items">
+          <ListItem v-for="e in events" :key="e.id"
+            :class="cn(
+              'flex items-start justify-between gap-4 border-b border-border last:border-0',
+              (((density as string) === 'compact') ? 'py-2' : 'py-4')
+            )"
+            data-testid="item"
+          >
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {{ e.title }}
+              </Text>
+              <Text v-if="((density as string) === 'default')" size="sm" class="text-muted-foreground">
+                {{ e.text }}
+              </Text>
+            </Stack>
+            <Text size="xs" class="shrink-0 text-muted-foreground">
+              {{ e.time }}
+            </Text>
+          </ListItem>
+        </List>
+      </Panel>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/announcement-bar.vue b/packages/vue/ui/src/blocks/announcement-bar.vue
new file mode 100644
index 0000000..2129972
--- /dev/null
+++ b/packages/vue/ui/src/blocks/announcement-bar.vue
@@ -0,0 +1,115 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default,
+  muted), layout (center, split), dismiss (show, hide).
+-->
+<script lang="ts">
+export type AnnouncementBarProps = {
+  label: string;
+  text: string;
+  cta?: string;
+  ctaHref?: string;
+  icon?: string;
+  dismissLabel: string;
+  tone?: "default" | "muted";
+  layout?: "center" | "split";
+  dismiss?: "show" | "hide";
+  badgeLabel?: string;
+  badge?: "none" | "show";
+  position?: "top" | "bottom";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Button from "../primitives/button/button.vue";
+import Container from "../primitives/container/container.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LinkPlain from "../primitives/link-plain/link-plain.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import { cn } from "../utils";
+
+const {
+  label,
+  text,
+  cta,
+  ctaHref,
+  icon = "megaphone",
+  dismissLabel,
+  tone = "default",
+  layout = "center",
+  dismiss = "hide",
+  badgeLabel,
+  badge = "none",
+  position = "top",
+  landmarkLabel,
+} = defineProps<AnnouncementBarProps>();
+</script>
+
+<template>
+  <Block
+    tag="aside"
+    :class="cn(
+      'w-full',
+      (((position as string) === 'bottom') ? 'sticky bottom-0 z-40 border-t border-border' : ''),
+      (
+        (tone as string) === 'muted' ? 'bg-muted text-foreground'
+        : 'bg-primary text-primary-foreground'
+      )
+    )"
+    :aria-label="(landmarkLabel ?? label)"
+    data-testid="announcement"
+    :data-layout="layout"
+  >
+    <Container
+      :class="cn(
+        'mx-auto w-full max-w-6xl px-4',
+        'flex items-center gap-4 py-2',
+        (((layout as string) === 'split') ? 'justify-between' : 'justify-center')
+      )"
+      data-slot="container"
+    >
+      <Group
+        gap="4"
+        align="center"
+        :class="cn(
+          'min-w-0 flex-wrap',
+          ((((layout as string) === 'center') && ((dismiss as string) === 'show')) ? 'ml-auto' : '')
+        )"
+      >
+        <LucideIcon :name="icon" :size="16" />
+        <Inline v-if="((badge as string) === 'show')"
+          class="rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current"
+          data-testid="announcement-badge"
+        >
+          {{ badgeLabel }}
+        </Inline>
+        <Text size="sm">
+          {{ text }}
+        </Text>
+        <LinkPlain v-if="cta"
+          :href="ctaHref"
+          class="inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4"
+          data-testid="announcement-cta"
+        >
+          {{ cta }}
+          <LucideIcon name="arrow-right" :size="16" />
+        </LinkPlain>
+      </Group>
+      <Button v-if="((dismiss as string) === 'show')"
+        variant="ghost"
+        size="sm"
+        class="ml-auto shrink-0 text-current"
+        type="button"
+        :aria-label="dismissLabel"
+        data-testid="dismiss"
+      >
+        <LucideIcon name="x" :size="16" />
+      </Button>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/app-shell.types.ts b/packages/vue/ui/src/blocks/app-shell.types.ts
new file mode 100644
index 0000000..51a8838
--- /dev/null
+++ b/packages/vue/ui/src/blocks/app-shell.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type AppNav = {
+  /** accessible name of the navigation */
+  label: string;
+  brand: string;
+  links: NavLink[];
+  /** id of the current link */
+  current?: string;
+};
+
+export type AppUser = {
+  name: string;
+  email: string;
+};
diff --git a/packages/vue/ui/src/blocks/app-shell.vue b/packages/vue/ui/src/blocks/app-shell.vue
new file mode 100644
index 0000000..8dcf1fd
--- /dev/null
+++ b/packages/vue/ui/src/blocks/app-shell.vue
@@ -0,0 +1,143 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/workspace.ts -->
+<!--
+  The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a
+  bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar
+  is a port contract.
+-->
+<script lang="ts">
+import type { AppNav, AppUser } from "./app-shell.types";
+import type { NavLink, NavSearch } from "./nav-bar.types";
+import type { Metric } from "./metric-row.types";
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+import type { OverviewChart, OverviewActivity } from "./dashboard-overview.types";
+
+export type AppShellProps = {
+  id: string;
+  title: string;
+  nav: AppNav;
+  user: AppUser;
+  search: NavSearch;
+  metrics: Metric[];
+  chart: OverviewChart;
+  activity: OverviewActivity;
+  layout?: "sidebar" | "top" | "panes";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Container from "../primitives/container/container.vue";
+import Grid from "../primitives/grid/grid.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import AppMain from "../components/app-main.vue";
+import NavBar from "../blocks/nav-bar.vue";
+import Panel from "../components/panel.vue";
+import SidebarNav from "../blocks/sidebar-nav.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  nav,
+  user,
+  search,
+  metrics,
+  chart,
+  activity,
+  layout = "sidebar",
+  density = "default",
+  landmarkLabel,
+} = defineProps<AppShellProps>();
+</script>
+
+<template>
+  <Block
+    tag="section"
+    class="bg-background"
+    :aria-labelledby="(landmarkLabel ? undefined : tpl('{0}-title', id))"
+    data-testid="app-shell"
+    :data-layout="layout"
+    :aria-label="landmarkLabel"
+  >
+    <Stack v-if="((layout as string) === 'top')" gap="6" align="stretch">
+      <NavBar
+        :label="nav.label"
+        :brand="nav.brand"
+        :links="nav.links"
+        :current="nav.current"
+        :search="search"
+        :actions="{ mode: 'none' }"
+        layout="search"
+        :landmarkLabel="landmarkLabel"
+      />
+      <Container :class="cn('mx-auto w-full max-w-6xl px-4', 'pb-8')" data-slot="container">
+        <AppMain
+          :id="id"
+          :title="title"
+          :metrics="metrics"
+          :chart="chart"
+          cols="1-4"
+          :activity="activity"
+          :density="density"
+        />
+      </Container>
+    </Stack>
+    <Container v-else :class="cn('mx-auto w-full max-w-6xl px-4', 'py-8')" data-slot="container">
+      <Grid
+        v-if="((layout as string) === 'sidebar')"
+        cols="1"
+        class="items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]"
+      >
+        <SidebarNav
+          :label="nav.label"
+          :brand="nav.brand"
+          :links="nav.links"
+          :current="nav.current"
+          :userName="user.name"
+          :userEmail="user.email"
+          :density="density"
+          :landmarkLabel="landmarkLabel"
+        />
+        <AppMain :id="id" :title="title" :metrics="metrics" :chart="chart" :activity="activity" :density="density" />
+      </Grid>
+      <Grid v-else cols="1-3" class="items-start gap-4">
+        <SidebarNav
+          :label="nav.label"
+          :brand="nav.brand"
+          :links="nav.links"
+          :current="nav.current"
+          :userName="user.name"
+          :userEmail="user.email"
+          width="compact"
+          :density="density"
+          :landmarkLabel="landmarkLabel"
+        />
+        <Panel
+          v-if="((activity.events?.length ?? 0) > 0)"
+          :title="activity.title"
+          :description="activity.text"
+          :id="tpl('{0}-list', id)"
+        >
+          <List class="m-0 flex list-none flex-col gap-4 p-0" data-testid="items">
+            <ListItem v-for="e in activity.events" :key="e.id" class="flex flex-col gap-2" data-testid="item">
+              <Text size="sm" weight="semibold">
+                {{ e.title }}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {{ e.time }}
+              </Text>
+            </ListItem>
+          </List>
+        </Panel>
+        <AppMain :id="id" :title="title" :metrics="metrics" :chart="chart" density="compact" />
+      </Grid>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/article-body.types.ts b/packages/vue/ui/src/blocks/article-body.types.ts
new file mode 100644
index 0000000..63a2648
--- /dev/null
+++ b/packages/vue/ui/src/blocks/article-body.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Section = {
+  id: string;
+  title: string;
+  text: string;
+  quote: string;
+};
diff --git a/packages/vue/ui/src/blocks/article-body.vue b/packages/vue/ui/src/blocks/article-body.vue
new file mode 100644
index 0000000..663b910
--- /dev/null
+++ b/packages/vue/ui/src/blocks/article-body.vue
@@ -0,0 +1,107 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table
+  of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting
+  the section being read is a port contract.
+-->
+<script lang="ts">
+import type { Section } from "./article-body.types";
+
+export type ArticleBodyProps = {
+  id: string;
+  title: string;
+  sections: Section[];
+  empty?: string;
+  tocTitle: string;
+  layout?: "column" | "toc";
+  quotes?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Link from "../primitives/link/link.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import NavBlock from "../components/nav-block.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  id,
+  title,
+  sections,
+  empty = "",
+  tocTitle,
+  layout = "column",
+  quotes = "show",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<ArticleBodyProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((sections?.length ?? 0) === 0)" icon="file-text" :title="empty" />
+    <Grid v-else
+      cols="1"
+      :class="cn(
+        'items-start gap-8',
+        (((layout as string) === 'toc') ? 'md:grid-cols-[14rem_minmax(0,1fr)]' : '')
+      )"
+    >
+      <NavBlock v-if="((layout as string) === 'toc')"
+        :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', tocTitle, landmarkLabel)) : tocTitle)"
+        class="md:sticky md:top-4"
+        testid="toc"
+      >
+        <Stack gap="2">
+          <Text size="sm" weight="semibold">
+            {{ tocTitle }}
+          </Text>
+          <List class="m-0 flex list-none flex-col gap-2 p-0">
+            <ListItem v-for="s in sections" :key="s.id">
+              <Link
+                :href="tpl('#{0}-{1}', id, s.id)"
+                variant="default"
+                class="text-sm text-muted-foreground"
+                data-testid="toc-link"
+              >
+                {{ s.title }}
+              </Link>
+            </ListItem>
+          </List>
+        </Stack>
+      </NavBlock>
+      <Stack gap="8" align="stretch" class="mx-auto w-full max-w-2xl min-w-0" data-testid="article">
+        <Box
+          v-for="s in sections"
+          :key="s.id"
+          class="flex flex-col gap-4"
+          :id="tpl('{0}-{1}', id, s.id)"
+          data-testid="item"
+        >
+          <Title :as="3" size="2xl" weight="bold">
+            {{ s.title }}
+          </Title>
+          <Text size="base">
+            {{ s.text }}
+          </Text>
+          <template v-if="((quotes as string) === 'show')">
+            <Text v-if="s.quote" tag="blockquote" class="m-0 border-l border-border pl-4 text-lg" data-testid="quote">
+              {{ s.quote }}
+            </Text>
+          </template>
+        </Box>
+      </Stack>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/auth-card.types.ts b/packages/vue/ui/src/blocks/auth-card.types.ts
new file mode 100644
index 0000000..dcd767e
--- /dev/null
+++ b/packages/vue/ui/src/blocks/auth-card.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+
+export type AuthLabels = {
+  name: string;
+  email: string;
+  password: string;
+  remember: string;
+  forgot: string;
+  terms: string;
+  divider: string;
+  passkey: string;
+  magic: string;
+};
diff --git a/packages/vue/ui/src/blocks/auth-card.vue b/packages/vue/ui/src/blocks/auth-card.vue
new file mode 100644
index 0000000..e91c02b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/auth-card.vue
@@ -0,0 +1,129 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/account.ts -->
+<!--
+  A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button,
+  optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout
+  (card, plain), social (none, show).
+-->
+<script lang="ts">
+import type { AuthLabels } from "./auth-card.types";
+
+export type AuthCardProps = {
+  id: string;
+  title: string;
+  text: string;
+  submit: string;
+  switchText: string;
+  switchLink: string;
+  switchHref?: string;
+  labels: AuthLabels;
+  mode?: "signin" | "signup" | "reset" | "magic";
+  layout?: "card" | "plain";
+  social?: "none" | "show" | "first";
+  level?: 1 | 2;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Link from "../primitives/link/link.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Separator from "../primitives/separator/separator.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import AuthForm from "../components/auth-form.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  submit,
+  switchText,
+  switchLink,
+  switchHref,
+  labels,
+  mode = "signin",
+  layout = "card",
+  social = "none",
+  level = 2,
+  landmarkLabel,
+} = defineProps<AuthCardProps>();
+</script>
+
+<template>
+  <Block
+    tag="section"
+    :class="cn(
+      'flex w-full flex-col gap-6',
+      (((layout as string) === 'card') ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')
+    )"
+    :aria-labelledby="(landmarkLabel ? undefined : tpl('{0}-title', id))"
+    data-testid="auth-card"
+    :data-mode="mode"
+    :aria-label="landmarkLabel"
+  >
+    <Stack gap="2">
+      <Title :as="level" size="2xl" weight="bold" :id="tpl('{0}-title', id)">
+        {{ title }}
+      </Title>
+      <Text size="sm" class="text-muted-foreground">
+        {{ text }}
+      </Text>
+    </Stack>
+    <Stack
+      v-if="(((social as string) === 'first') && ((social as string) !== 'none') && ((mode as string) !== 'reset') && ((mode as string) !== 'magic'))"
+      gap="4"
+      data-testid="social"
+    >
+      <Group gap="4" align="center">
+        <Separator class="flex-1" />
+        <Text size="xs" class="text-muted-foreground">
+          {{ labels.divider }}
+        </Text>
+        <Separator class="flex-1" />
+      </Group>
+      <Button variant="outline" size="default" type="button" class="w-full">
+        <LucideIcon name="key-round" :size="16" />
+        {{ labels.passkey }}
+      </Button>
+      <Button variant="outline" size="default" type="button" class="w-full">
+        <LucideIcon name="mail" :size="16" />
+        {{ labels.magic }}
+      </Button>
+    </Stack>
+    <AuthForm :id="id" :mode="mode" :labels="labels" :submit="submit" />
+    <Stack
+      v-if="(((social as string) !== 'first') && ((social as string) !== 'none') && ((mode as string) !== 'reset') && ((mode as string) !== 'magic'))"
+      gap="4"
+      data-testid="social"
+    >
+      <Group gap="4" align="center">
+        <Separator class="flex-1" />
+        <Text size="xs" class="text-muted-foreground">
+          {{ labels.divider }}
+        </Text>
+        <Separator class="flex-1" />
+      </Group>
+      <Button variant="outline" size="default" type="button" class="w-full">
+        <LucideIcon name="key-round" :size="16" />
+        {{ labels.passkey }}
+      </Button>
+      <Button variant="outline" size="default" type="button" class="w-full">
+        <LucideIcon name="mail" :size="16" />
+        {{ labels.magic }}
+      </Button>
+    </Stack>
+    <Text size="sm" class="text-center text-muted-foreground">
+      {{ switchText }}
+      {{ " " }}
+      <Link :href="switchHref" variant="default" data-testid="switch">
+        {{ switchLink }}
+      </Link>
+    </Text>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/auth-layout.types.ts b/packages/vue/ui/src/blocks/auth-layout.types.ts
new file mode 100644
index 0000000..59bd44b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/auth-layout.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+
+export type AuthSwitch = {
+  /** the sentence before the link */
+  text: string;
+  /** text of the link */
+  link: string;
+  href?: string;
+};
+
+export type AuthVisual = {
+  /** the line on the picture panel */
+  title: string;
+  text: string;
+};
diff --git a/packages/vue/ui/src/blocks/auth-layout.vue b/packages/vue/ui/src/blocks/auth-layout.vue
new file mode 100644
index 0000000..cde3812
--- /dev/null
+++ b/packages/vue/ui/src/blocks/auth-layout.vue
@@ -0,0 +1,132 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/signup.ts -->
+<!--
+  A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card,
+  centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side
+  of the picture), mode, social. The page's heading is the card's title.
+-->
+<script lang="ts">
+import type { AuthSwitch, AuthVisual } from "./auth-layout.types";
+import type { AuthLabels } from "./auth-card.types";
+
+export type AuthLayoutProps = {
+  id: string;
+  title: string;
+  text: string;
+  submit: string;
+  switchTo: AuthSwitch;
+  labels: AuthLabels;
+  visual: AuthVisual;
+  level?: 1 | 2;
+  layout?: "split" | "centered" | "minimal";
+  side?: "end" | "start";
+  mode?: "signin" | "signup" | "reset" | "magic";
+  social?: "none" | "show" | "first";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Container from "../primitives/container/container.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import AuthCard from "../blocks/auth-card.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  submit,
+  switchTo,
+  labels,
+  visual,
+  level = 1,
+  layout = "split",
+  side = "end",
+  mode = "signin",
+  social = "none",
+  landmarkLabel,
+} = defineProps<AuthLayoutProps>();
+</script>
+
+<template>
+  <Block tag="div" class="w-full" data-testid="auth-layout" :data-layout="layout">
+    <Container :class="cn('mx-auto w-full max-w-6xl px-4', 'py-12')" data-slot="container">
+      <Grid v-if="((layout as string) === 'split')" cols="1-2" class="items-stretch gap-8">
+        <Box class="mx-auto flex w-full max-w-sm items-center">
+          <AuthCard
+            :id="id"
+            :title="title"
+            :text="text"
+            :submit="submit"
+            :switchText="switchTo.text"
+            :switchLink="switchTo.link"
+            :switchHref="switchTo.href"
+            :labels="labels"
+            :mode="mode"
+            layout="plain"
+            :social="social"
+            :level="level"
+            :landmarkLabel="landmarkLabel"
+          />
+        </Box>
+        <Stack
+          gap="4"
+          align="stretch"
+          :class="cn(
+            'justify-end rounded bg-muted p-8',
+            (((side as string) === 'start') ? 'md:order-first' : 'md:order-last')
+          )"
+          data-testid="visual"
+        >
+          <MediaFrame :alt="visual.title" ratio="4/3" />
+          <Title :as="2" size="2xl" weight="bold">
+            {{ visual.title }}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {{ visual.text }}
+          </Text>
+        </Stack>
+      </Grid>
+      <Box v-else-if="((layout as string) === 'centered')" class="mx-auto w-full max-w-md rounded bg-muted p-6">
+        <AuthCard
+          :id="id"
+          :title="title"
+          :text="text"
+          :submit="submit"
+          :switchText="switchTo.text"
+          :switchLink="switchTo.link"
+          :switchHref="switchTo.href"
+          :labels="labels"
+          :mode="mode"
+          :social="social"
+          :level="level"
+          :landmarkLabel="landmarkLabel"
+        />
+      </Box>
+      <Box v-else class="mx-auto w-full max-w-sm">
+        <AuthCard
+          :id="id"
+          :title="title"
+          :text="text"
+          :submit="submit"
+          :switchText="switchTo.text"
+          :switchLink="switchTo.link"
+          :switchHref="switchTo.href"
+          :labels="labels"
+          :mode="mode"
+          layout="plain"
+          :social="social"
+          :level="level"
+          :landmarkLabel="landmarkLabel"
+        />
+      </Box>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/before-after.types.ts b/packages/vue/ui/src/blocks/before-after.types.ts
new file mode 100644
index 0000000..5783791
--- /dev/null
+++ b/packages/vue/ui/src/blocks/before-after.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+
+export type Contrast = {
+  id: string;
+  title: string;
+  before: string;
+  after: string;
+};
+
+export type BeforeAfterLabels = {
+  before: string;
+  after: string;
+};
diff --git a/packages/vue/ui/src/blocks/before-after.vue b/packages/vue/ui/src/blocks/before-after.vue
new file mode 100644
index 0000000..2904c59
--- /dev/null
+++ b/packages/vue/ui/src/blocks/before-after.vue
@@ -0,0 +1,132 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two
+  cards, rows: one row per point), icons (show, hide), tone, density.
+-->
+<script lang="ts">
+import type { Contrast, BeforeAfterLabels } from "./before-after.types";
+
+export type BeforeAfterProps = {
+  id: string;
+  title: string;
+  points: Contrast[];
+  empty?: string;
+  labels: BeforeAfterLabels;
+  layout?: "cards" | "rows";
+  icons?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Card from "../primitives/card/card.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  points,
+  empty = "",
+  labels,
+  layout = "cards",
+  icons = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<BeforeAfterProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((points?.length ?? 0) === 0)" icon="git-compare" :title="empty" />
+    <Grid v-else-if="((layout as string) === 'cards')" cols="1-2" class="items-stretch gap-4" data-testid="sides">
+      <Card
+        variant="muted"
+        :class="cn('h-full', (((density as string) === 'compact') ? 'gap-4 p-4' : ''))"
+        data-testid="side"
+        data-side="before"
+      >
+        <CardContent class="flex flex-col gap-4">
+          <Title :as="3" size="xl" weight="bold">
+            {{ labels.before }}
+          </Title>
+          <List class="m-0 flex list-none flex-col gap-4 p-0">
+            <ListItem v-for="p in points" :key="p.id" class="flex items-start gap-4" data-testid="item">
+              <LucideIcon v-if="((icons as string) === 'show')" name="x" :size="16" class="h-lh shrink-0 text-sm" />
+              <Text size="sm">
+                {{ p.before }}
+              </Text>
+            </ListItem>
+          </List>
+        </CardContent>
+      </Card>
+      <Card
+        variant="default"
+        :class="cn('h-full', (((density as string) === 'compact') ? 'gap-4 p-4' : ''))"
+        data-testid="side"
+        data-side="after"
+      >
+        <CardContent class="flex flex-col gap-4">
+          <Title :as="3" size="xl" weight="bold">
+            {{ labels.after }}
+          </Title>
+          <List class="m-0 flex list-none flex-col gap-4 p-0">
+            <ListItem v-for="p in points" :key="p.id" class="flex items-start gap-4" data-testid="item">
+              <LucideIcon v-if="((icons as string) === 'show')" name="check" :size="16" class="h-lh shrink-0 text-sm" />
+              <Text size="sm">
+                {{ p.after }}
+              </Text>
+            </ListItem>
+          </List>
+        </CardContent>
+      </Card>
+    </Grid>
+    <Stack v-else gap="2" align="stretch" data-testid="rows">
+      <Grid v-for="p in points" :key="p.id"
+        cols="1-3"
+        :class="cn('items-center gap-4', 'rounded bg-card inset-ring inset-ring-border p-4')"
+        data-testid="item"
+      >
+        <Text size="base" weight="semibold">
+          {{ p.title }}
+        </Text>
+        <Group gap="2" align="start">
+          <LucideIcon
+            v-if="((icons as string) === 'show')"
+            name="x"
+            :size="16"
+            class="h-lh shrink-0 text-sm text-muted-foreground"
+          />
+          <Text size="sm" class="text-muted-foreground">
+            {{ p.before }}
+          </Text>
+        </Group>
+        <Group gap="2" align="start">
+          <LucideIcon
+            v-if="((icons as string) === 'show')"
+            name="check"
+            :size="16"
+            class="h-lh shrink-0 text-sm text-primary"
+          />
+          <Text size="sm" weight="semibold">
+            {{ p.after }}
+          </Text>
+        </Group>
+      </Grid>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/bento-grid.types.ts b/packages/vue/ui/src/blocks/bento-grid.types.ts
new file mode 100644
index 0000000..c1a438e
--- /dev/null
+++ b/packages/vue/ui/src/blocks/bento-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/showcase.ts
+
+export type Tile = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  size: string;
+};
diff --git a/packages/vue/ui/src/blocks/bento-grid.vue b/packages/vue/ui/src/blocks/bento-grid.vue
new file mode 100644
index 0000000..00f0aab
--- /dev/null
+++ b/packages/vue/ui/src/blocks/bento-grid.vue
@@ -0,0 +1,86 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from
+  the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in
+  the large tiles), tone, density.
+-->
+<script lang="ts">
+import type { Tile } from "./bento-grid.types";
+
+export type BentoGridProps = {
+  id: string;
+  title: string;
+  tiles: Tile[];
+  empty?: string;
+  layout?: "bento" | "even";
+  media?: "none" | "image";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Card from "../primitives/card/card.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import Grid from "../primitives/grid/grid.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { at, cn } from "../utils";
+
+const SPAN: Record<string, string> = {
+  "large": "md:col-span-2 md:row-span-2",
+  "wide": "md:col-span-2",
+  "small": "",
+};
+const {
+  id,
+  title,
+  tiles,
+  empty = "",
+  layout = "bento",
+  media = "none",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<BentoGridProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((tiles?.length ?? 0) === 0)" icon="layout-dashboard" :title="empty" />
+    <Grid v-else cols="1-4" class="auto-rows-fr gap-4" data-testid="items">
+      <Card v-for="tile in tiles" :key="tile.id"
+        variant="default"
+        :class="cn(
+          'h-full overflow-hidden',
+          (((density as string) === 'compact') ? 'gap-4 p-4' : ''),
+          (((layout as string) === 'bento') ? at(SPAN, tile.size) : '')
+        )"
+        data-testid="item"
+        :data-size="(((layout as string) === 'bento') ? tile.size : 'even')"
+      >
+        <CardContent class="flex h-full flex-col gap-4">
+          <LucideIcon :name="tile.icon" :size="24" />
+          <Title :as="3" size="xl" weight="bold">
+            {{ tile.title }}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {{ tile.text }}
+          </Text>
+          <MediaFrame
+            v-if="(((media as string) === 'image') && ((tile.size === 'large') || ((layout as string) === 'even')))"
+            :alt="tile.title"
+            ratio="4/3"
+            class="mt-auto"
+          />
+        </CardContent>
+      </Card>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/bottom-nav.vue b/packages/vue/ui/src/blocks/bottom-nav.vue
new file mode 100644
index 0000000..9b122a0
--- /dev/null
+++ b/packages/vue/ui/src/blocks/bottom-nav.vue
@@ -0,0 +1,72 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show,
+  hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.
+-->
+<script lang="ts">
+import type { NavLink } from "./nav-bar.types";
+
+export type BottomNavProps = {
+  label: string;
+  tabs: NavLink[];
+  current?: string;
+  labels?: "show" | "hide";
+  position?: "static" | "sticky";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import { cn } from "../utils";
+
+const {
+  label,
+  tabs,
+  current = "",
+  labels = "show",
+  position = "static",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<BottomNavProps>();
+</script>
+
+<template>
+  <Block v-if="((tabs?.length ?? 0) > 0)"
+    tag="nav"
+    :class="cn(
+      'mx-auto w-full max-w-md border-t border-border',
+      (((tone as string) === 'muted') ? 'bg-muted' : 'bg-background'),
+      (((position as string) === 'sticky') ? 'sticky bottom-0 z-40' : '')
+    )"
+    :aria-label="(landmarkLabel ?? label)"
+    data-testid="bottom-nav"
+    :data-position="position"
+  >
+    <List class="m-0 grid list-none grid-flow-col auto-cols-fr p-0" data-testid="items">
+      <ListItem v-for="tab in tabs" :key="tab.id">
+        <MenuEntry
+          :href="tab.href"
+          :class="cn(
+            'flex flex-col items-center gap-2 py-2 text-xs',
+            ((tab.id === current) ? 'font-semibold text-primary' : 'text-muted-foreground')
+          )"
+          :current="(tab.id === current)"
+          testid="item"
+        >
+          <LucideIcon :name="tab.icon" :size="20" />
+          <Inline :class="(((labels as string) === 'hide') ? 'sr-only' : '')">
+            {{ tab.name }}
+          </Inline>
+        </MenuEntry>
+      </ListItem>
+    </List>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/cart-drawer.types.ts b/packages/vue/ui/src/blocks/cart-drawer.types.ts
new file mode 100644
index 0000000..8d66b9d
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cart-drawer.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type DrawerLabels = {
+  title: string;
+  close: string;
+  progress: string;
+  empty: string;
+  emptyText: string;
+  browse: string;
+};
diff --git a/packages/vue/ui/src/blocks/cart-drawer.vue b/packages/vue/ui/src/blocks/cart-drawer.vue
new file mode 100644
index 0000000..9f2299b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cart-drawer.vue
@@ -0,0 +1,97 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/checkout.ts -->
+<!--
+  The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity
+  field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way
+  back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).
+-->
+<script lang="ts">
+import type { DrawerLabels } from "./cart-drawer.types";
+import type { CartLine, CartLabels } from "./cart-list.types";
+import type { SummaryRow } from "./order-summary.types";
+
+export type CartDrawerProps = {
+  id: string;
+  lines: CartLine[];
+  rows: SummaryRow[];
+  labels: CartLabels;
+  drawer: DrawerLabels;
+  state?: "filled" | "empty";
+  media?: "image" | "none";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Container from "../primitives/container/container.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Title from "../primitives/title/title.vue";
+import DrawerLines from "../components/drawer-lines.vue";
+import EmptyState from "../components/empty-state.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  lines,
+  rows,
+  labels,
+  drawer,
+  state = "filled",
+  media = "image",
+  landmarkLabel,
+} = defineProps<CartDrawerProps>();
+</script>
+
+<template>
+  <Block tag="section" class="py-8" :aria-label="(landmarkLabel ?? drawer.title)" data-testid="section">
+    <Container class="mx-auto w-full max-w-6xl px-4" data-slot="container">
+      <Box class="flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border">
+        <Box class="hidden flex-1 flex-col gap-4 p-8 sm:flex" aria-hidden="true">
+          <Box class="h-8 w-48 rounded bg-background" />
+          <Box class="h-40 rounded bg-background" />
+          <Box class="h-40 rounded bg-background" />
+        </Box>
+        <Box
+          class="flex w-full flex-col bg-background shadow-lg sm:max-w-sm"
+          role="group"
+          :aria-label="drawer.title"
+          data-testid="drawer"
+        >
+          <Group gap="4" align="center" justify="between" class="border-b border-border p-4">
+            <Title :as="2" size="lg" weight="semibold">
+              {{ drawer.title }}
+            </Title>
+            <Button variant="ghost" size="sm" layout="icon" :aria-label="drawer.close">
+              <LucideIcon name="x" :size="16" />
+            </Button>
+          </Group>
+          <Box
+            v-if="(((state as string) === 'empty') || ((lines?.length ?? 0) === 0))"
+            class="flex flex-1 flex-col justify-center p-4"
+            data-testid="empty"
+          >
+            <EmptyState icon="shopping-bag" :title="drawer.empty" :text="drawer.emptyText">
+              <template #action>
+                <Button variant="outline" size="default">
+                  {{ drawer.browse }}
+                </Button>
+              </template>
+            </EmptyState>
+          </Box>
+          <DrawerLines v-else
+            :field="tpl('{0}-qty', id)"
+            :lines="lines"
+            :rows="rows"
+            :labels="labels"
+            :drawer="drawer"
+            :media="media"
+          />
+        </Box>
+      </Box>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/cart-list.types.ts b/packages/vue/ui/src/blocks/cart-list.types.ts
new file mode 100644
index 0000000..f5d7b14
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cart-list.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type CartLine = {
+  id: string;
+  name: string;
+  variant: string;
+  price: number;
+  currency: string;
+  qty: number;
+};
+
+export type CartLabels = {
+  caption: string;
+  product: string;
+  price: string;
+  qty: string;
+  total: string;
+  remove: string;
+  subtotal: string;
+  checkout: string;
+  decrease: string;
+  increase: string;
+};
diff --git a/packages/vue/ui/src/blocks/cart-list.vue b/packages/vue/ui/src/blocks/cart-list.vue
new file mode 100644
index 0000000..0211b9a
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cart-list.vue
@@ -0,0 +1,104 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button.
+  Axes: layout (table, cards), media (image, none), density, tone.
+-->
+<script lang="ts">
+import type { CartLine, CartLabels } from "./cart-list.types";
+
+export type CartListProps = {
+  id: string;
+  title: string;
+  lines: CartLine[];
+  empty?: string;
+  labels: CartLabels;
+  layout?: "table" | "cards";
+  media?: "image" | "none";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Card from "../primitives/card/card.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import CartTable from "../components/cart-table.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import NumberField from "../components/number-field.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { fmtMoney, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lines,
+  empty = "",
+  labels,
+  layout = "table",
+  media = "image",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<CartListProps>();
+const emit = defineEmits<{ remove: [id: string] }>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((lines?.length ?? 0) === 0)" icon="shopping-cart" :title="empty" />
+    <CartTable v-else-if="((layout as string) === 'table')"
+      :field="tpl('{0}-qty', id)"
+      :lines="lines"
+      :labels="labels"
+      :media="media"
+      :density="density"
+      @remove="(arg: string) => emit('remove', arg)"
+    />
+    <Stack v-else gap="4" align="stretch" data-testid="cart-cards">
+      <Card v-for="line in lines" :key="line.id" variant="default" data-testid="item">
+        <CardContent class="flex flex-wrap items-center gap-4">
+          <MediaFrame v-if="((media as string) === 'image')" :alt="line.name" ratio="1/1" class="size-16 shrink-0" />
+          <Stack gap="0" class="min-w-40 flex-1">
+            <Text size="sm" weight="semibold">
+              {{ line.name }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {{ line.variant }}
+            </Text>
+            <Text size="sm">
+              {{ fmtMoney(line.price, line.currency) }}
+            </Text>
+          </Stack>
+          <NumberField
+            :value="(line.qty == null ? undefined : String(line.qty))"
+            :name="tpl('{0}-qty-{1}', id, line.id)"
+            min="1"
+            :label="labels.qty"
+            :decrease="labels.decrease"
+            :increase="labels.increase"
+          />
+          <Text size="base" weight="bold">
+            {{ fmtMoney((line.price * line.qty), line.currency) }}
+          </Text>
+          <Button
+            variant="ghost"
+            size="sm"
+            layout="icon"
+            :aria-label="labels.remove"
+            data-testid="remove"
+            @click="() => emit('remove', line.id)"
+          >
+            <LucideIcon name="x" :size="16" />
+          </Button>
+        </CardContent>
+      </Card>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/category-nav.types.ts b/packages/vue/ui/src/blocks/category-nav.types.ts
new file mode 100644
index 0000000..4a88a78
--- /dev/null
+++ b/packages/vue/ui/src/blocks/category-nav.types.ts
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Category = {
+  id: string;
+  name: string;
+  icon: string;
+  count: number;
+  href?: string;
+};
+
+export type CategoryTools = {
+  /** label of the search field */
+  search?: string;
+  /** label of the sort select */
+  sort?: string;
+  /** the chosen sort */
+  sortValue?: string;
+  /** how many products are shown */
+  shown?: string;
+  /** the text in the search field */
+  query?: string;
+};
diff --git a/packages/vue/ui/src/blocks/category-nav.vue b/packages/vue/ui/src/blocks/category-nav.vue
new file mode 100644
index 0000000..cd9302d
--- /dev/null
+++ b/packages/vue/ui/src/blocks/category-nav.vue
@@ -0,0 +1,121 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon,
+  or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes:
+  layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.
+-->
+<script lang="ts">
+import type { Category, CategoryTools } from "./category-nav.types";
+
+export type CategoryNavProps = {
+  label: string;
+  categories: Category[];
+  current?: string;
+  layout?: "chips" | "bar" | "sidebar" | "tiles" | "toolbar";
+  count?: "show" | "hide";
+  icon?: "show" | "hide";
+  density?: "default" | "compact";
+  tools?: CategoryTools;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Block from "../primitives/block/block.vue";
+import Container from "../primitives/container/container.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Select from "../primitives/select/select.vue";
+import SelectOption from "../primitives/select/select-option.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import SearchField from "../components/search-field.vue";
+import { cn } from "../utils";
+
+const {
+  label,
+  categories,
+  current = "all",
+  layout = "chips",
+  count = "show",
+  icon = "show",
+  density = "default",
+  tools,
+  landmarkLabel,
+} = defineProps<CategoryNavProps>();
+const chipLike = computed(() => ((layout as string) === "chips") || ((layout as string) === "toolbar"));
+const tiles = computed(() => (layout as string) === "tiles");
+const linkShape = computed(() =>
+  chipLike.value ? "inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border"
+  : (layout as string) === "bar" ? "inline-flex items-center gap-2 -mb-px border-b px-1 py-2"
+  : tiles.value ? "flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border"
+  : "inline-flex w-full items-center gap-2 rounded px-3 py-2"
+);
+const currentLook = computed(() =>
+  chipLike.value ? "bg-primary text-primary-foreground"
+  : (layout as string) === "bar" ? "border-foreground font-semibold"
+  : tiles.value ? "inset-ring-foreground font-semibold"
+  : "bg-muted font-semibold"
+);
+const otherLook = computed(() => ((layout as string) === "bar") ? "border-transparent" : "");
+const listShape = computed(() =>
+  (layout as string) === "sidebar" ? "flex flex-col gap-2"
+  : (layout as string) === "bar" ? "flex flex-wrap gap-2 gap-x-4 border-b border-border"
+  : tiles.value ? "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6"
+  : "flex flex-wrap gap-2"
+);
+</script>
+
+<template>
+  <Block tag="nav" :aria-label="(landmarkLabel ?? label)" data-testid="category-nav" :data-layout="layout">
+    <Container
+      :class="cn('mx-auto w-full max-w-6xl px-4', (((density as string) === 'compact') ? 'py-2' : 'py-4'))"
+      data-slot="container"
+    >
+      <Group
+        v-if="((layout as string) === 'toolbar')"
+        gap="4"
+        align="center"
+        class="mb-4 flex-wrap"
+        data-testid="toolbar"
+      >
+        <SearchField :value="(tools?.query ?? '')" :label="(tools?.search ?? '')" :placeholder="tools?.search" />
+        <Select name="sort" size="sm" :aria-label="tools?.sort" class="w-48">
+          <SelectOption value="sort" :label="tools?.sortValue" :selected="true" />
+        </Select>
+        <Text size="sm" class="text-muted-foreground">
+          {{ tools?.shown }}
+        </Text>
+      </Group>
+      <List v-if="((categories?.length ?? 0) > 0)" tag="ul" :class="listShape" data-testid="items">
+        <ListItem v-for="c in categories" :key="c.id">
+          <MenuEntry
+            :href="c.href"
+            :class="cn('text-sm', linkShape, ((c.id === current) ? currentLook : otherLook))"
+            :current="(c.id === current)"
+            testid="item"
+            :block="true"
+          >
+            <template v-if="((icon as string) === 'show')">
+              <Inline v-if="tiles" class="flex size-10 items-center justify-center rounded bg-muted">
+                <LucideIcon :name="c.icon" :size="20" />
+              </Inline>
+              <LucideIcon v-else :name="c.icon" :size="16" />
+            </template>
+            <Inline>
+              {{ c.name }}
+            </Inline>
+            <Text v-if="((count as string) === 'show')" size="xs" class="text-muted-foreground">
+              {{ (c.count == null ? undefined : String(c.count)) }}
+            </Text>
+          </MenuEntry>
+        </ListItem>
+      </List>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/chart-panel.types.ts b/packages/vue/ui/src/blocks/chart-panel.types.ts
new file mode 100644
index 0000000..9f64516
--- /dev/null
+++ b/packages/vue/ui/src/blocks/chart-panel.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Point = {
+  id: string;
+  label: string;
+  value: number;
+};
diff --git a/packages/vue/ui/src/blocks/chart-panel.vue b/packages/vue/ui/src/blocks/chart-panel.vue
new file mode 100644
index 0000000..054bb34
--- /dev/null
+++ b/packages/vue/ui/src/blocks/chart-panel.vue
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart
+  (bars, meters), size (default, compact), tone (default, muted).
+-->
+<script lang="ts">
+import type { Point } from "./chart-panel.types";
+
+export type ChartPanelProps = {
+  id: string;
+  title: string;
+  text: string;
+  series: Point[];
+  empty?: string;
+  summary: string;
+  percent: string;
+  chart?: "bars" | "meters";
+  size?: "default" | "compact";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Container from "../primitives/container/container.vue";
+import Stack from "../primitives/stack/stack.vue";
+import BarChart from "../components/bar-chart.vue";
+import EmptyState from "../components/empty-state.vue";
+import MeterRow from "../components/meter-row.vue";
+import Panel from "../components/panel.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  series,
+  empty = "",
+  summary,
+  percent,
+  chart = "bars",
+  size = "default",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<ChartPanelProps>();
+</script>
+
+<template>
+  <Block
+    tag="section"
+    :aria-labelledby="(landmarkLabel ? undefined : ((title && id) ? tpl('{0}-t', id) : undefined))"
+    data-testid="panel-section"
+    :aria-label="landmarkLabel"
+  >
+    <Container class="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+      <Panel :title="title" :description="text" :id="id" :class="(((tone as string) === 'muted') ? 'bg-muted' : '')">
+        <EmptyState v-if="((series?.length ?? 0) === 0)" icon="chart-column" :title="empty" />
+        <BarChart
+          v-else-if="((chart as string) === 'bars')"
+          :bars="series"
+          :label="summary"
+          :height="(((size as string) === 'compact') ? 96 : 176)"
+        />
+        <Stack v-else :gap="(((size as string) === 'compact') ? '0' : '2')" align="stretch" data-testid="items">
+          <MeterRow
+            v-for="s in series"
+            :key="s.id"
+            :label="s.label"
+            :value="s.value"
+            :caption="tpl(percent, s.value)"
+          />
+        </Stack>
+      </Panel>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/checklist.types.ts b/packages/vue/ui/src/blocks/checklist.types.ts
new file mode 100644
index 0000000..54d9f32
--- /dev/null
+++ b/packages/vue/ui/src/blocks/checklist.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Task = {
+  id: string;
+  title: string;
+  text: string;
+  done: boolean;
+};
diff --git a/packages/vue/ui/src/blocks/checklist.vue b/packages/vue/ui/src/blocks/checklist.vue
new file mode 100644
index 0000000..77a51f2
--- /dev/null
+++ b/packages/vue/ui/src/blocks/checklist.vue
@@ -0,0 +1,113 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain),
+  progress (bar, text, none), marker (check, number), tone (default, muted).
+-->
+<script lang="ts">
+import type { Task } from "./checklist.types";
+
+export type ChecklistProps = {
+  id: string;
+  title: string;
+  tasks: Task[];
+  empty?: string;
+  progressLabel: string;
+  layout?: "card" | "plain";
+  progress?: "bar" | "text" | "none";
+  marker?: "check" | "number";
+  detail?: "always" | "expand";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Disclosure from "../primitives/disclosure/disclosure.vue";
+import IconBadge from "../primitives/iconbadge/icon-badge.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Progress from "../primitives/form/progress.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Summary from "../primitives/disclosure/summary.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  tasks,
+  empty = "",
+  progressLabel,
+  layout = "card",
+  progress = "bar",
+  marker = "check",
+  detail = "always",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<ChecklistProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" measure="2xl" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((tasks?.length ?? 0) === 0)" icon="list-checks" :title="empty" />
+    <Stack v-else
+      gap="4"
+      align="stretch"
+      :class="(((layout as string) === 'card') ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')"
+      data-testid="checklist"
+    >
+      <Progress v-if="((progress as string) === 'bar')"
+        :value="
+          Math.round(((tasks.filter((i) => i['done']).length * 100) / (tasks?.length ?? 0))) == null ? undefined
+          : String(Math.round(((tasks.filter((i) => i['done']).length * 100) / (tasks?.length ?? 0))))
+        "
+        max="100"
+        :aria-label="tpl(progressLabel, tasks.filter((i) => i['done']).length, (tasks?.length ?? 0))"
+      />
+      <Text
+        v-if="((progress as string) === 'text')"
+        size="sm"
+        class="text-muted-foreground"
+        data-testid="progress-text"
+      >
+        {{ tpl(progressLabel, tasks.filter((i) => i["done"]).length, (tasks?.length ?? 0)) }}
+      </Text>
+      <List class="m-0 flex list-none flex-col gap-4 p-0" data-testid="items">
+        <ListItem v-for="(task, i) in tasks" :key="task.id"
+          class="flex items-start gap-4"
+          data-testid="item"
+          :data-done="(task.done == null ? undefined : String(task.done))"
+        >
+          <IconBadge v-if="((marker as string) === 'number')" :variant="(task.done ? 'primary' : 'outline')" size="xs">
+            {{ ((i + 1) == null ? undefined : String((i + 1))) }}
+          </IconBadge>
+          <LucideIcon v-else
+            :name="(task.done ? 'circle-check' : 'circle')"
+            :size="24"
+            :class="(task.done ? 'shrink-0 text-primary' : 'shrink-0 text-muted-foreground')"
+          />
+          <Disclosure v-if="((detail as string) === 'expand')" variant="ghost" class="flex-1" data-testid="task-detail">
+            <Summary variant="ghost">
+              {{ task.title }}
+            </Summary>
+            <Text size="sm" class="pb-2 text-muted-foreground">
+              {{ task.text }}
+            </Text>
+          </Disclosure>
+          <Stack v-else gap="0">
+            <Text size="base" weight="semibold">
+              {{ task.title }}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {{ task.text }}
+            </Text>
+          </Stack>
+        </ListItem>
+      </List>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/checkout-form.types.ts b/packages/vue/ui/src/blocks/checkout-form.types.ts
new file mode 100644
index 0000000..204a76d
--- /dev/null
+++ b/packages/vue/ui/src/blocks/checkout-form.types.ts
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type CheckoutLabels = {
+  contacts: string;
+  contactsText: string;
+  name: string;
+  phone: string;
+  email: string;
+  address: string;
+  addressText: string;
+  street: string;
+  house: string;
+  flat: string;
+  entrance: string;
+  floor: string;
+  comment: string;
+  slot: string;
+  slotText: string;
+  payment: string;
+  paymentText: string;
+  consent: string;
+  submit: string;
+  legal: string;
+};
diff --git a/packages/vue/ui/src/blocks/checkout-form.vue b/packages/vue/ui/src/blocks/checkout-form.vue
new file mode 100644
index 0000000..29791b5
--- /dev/null
+++ b/packages/vue/ui/src/blocks/checkout-form.vue
@@ -0,0 +1,136 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/checkout.ts -->
+<!--
+  A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps,
+  beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards:
+  each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.
+-->
+<script lang="ts">
+import type { CheckoutLabels } from "./checkout-form.types";
+import type { Day } from "../components/slot-grid.types";
+import type { Payment } from "../components/payment-options.types";
+import type { CartLine } from "./cart-list.types";
+import type { SummaryRow } from "./order-summary.types";
+import type { Promo, CartSummaryLabels } from "../components/cart-summary-card.types";
+
+export type CheckoutFormProps = {
+  id: string;
+  title?: string;
+  days: Day[];
+  payments: Payment[];
+  lines: CartLine[];
+  rows: SummaryRow[];
+  promos: Promo[];
+  labels: CheckoutLabels;
+  totals: CartSummaryLabels;
+  layout?: "cards" | "numbered";
+  summary?: "aside" | "none";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Form from "../primitives/form/form.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Input from "../primitives/input/input.vue";
+import Textarea from "../primitives/textarea/textarea.vue";
+import CartSummaryCard from "../components/cart-summary-card.vue";
+import CheckoutStep from "../components/checkout-step.vue";
+import CheckoutSubmit from "../components/checkout-submit.vue";
+import Field from "../components/field.vue";
+import PaymentOptions from "../components/payment-options.vue";
+import SectionFrame from "../components/section-frame.vue";
+import SlotGrid from "../components/slot-grid.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title = "",
+  days,
+  payments,
+  lines,
+  rows,
+  promos,
+  labels,
+  totals,
+  layout = "cards",
+  summary = "aside",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<CheckoutFormProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :landmarkLabel="landmarkLabel">
+    <Box class="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+      <Form
+        method="dialog"
+        :class="
+          (summary as string) === 'aside' ? 'flex flex-col gap-6 lg:col-span-2'
+          : 'flex flex-col gap-6 lg:col-span-3'
+        "
+        data-testid="checkout-form"
+      >
+        <CheckoutStep number="1" :title="labels.contacts" :text="labels.contactsText" :layout="layout">
+          <Grid cols="1-2" class="gap-4">
+            <Field :label="labels.name" :htmlFor="tpl('{0}-name', id)">
+              <Input type="text" name="name" autocomplete="name" :id="tpl('{0}-name', id)" data-testid="field" />
+            </Field>
+            <Field :label="labels.phone" :htmlFor="tpl('{0}-phone', id)">
+              <Input type="tel" name="phone" autocomplete="tel" :id="tpl('{0}-phone', id)" data-testid="field" />
+            </Field>
+            <Field :label="labels.email" :htmlFor="tpl('{0}-email', id)">
+              <Input type="email" name="email" autocomplete="email" :id="tpl('{0}-email', id)" data-testid="field" />
+            </Field>
+          </Grid>
+        </CheckoutStep>
+        <CheckoutStep number="2" :title="labels.address" :text="labels.addressText" :layout="layout">
+          <Field :label="labels.street" :htmlFor="tpl('{0}-street', id)">
+            <Input type="text" name="street" autocomplete="address-line1" :id="tpl('{0}-street', id)" data-testid="field" />
+          </Field>
+          <Grid cols="2-4" class="gap-4">
+            <Field :label="labels.house" :htmlFor="tpl('{0}-house', id)">
+              <Input type="text" name="house" :id="tpl('{0}-house', id)" data-testid="field" />
+            </Field>
+            <Field :label="labels.flat" :htmlFor="tpl('{0}-flat', id)">
+              <Input type="text" name="flat" :id="tpl('{0}-flat', id)" data-testid="field" />
+            </Field>
+            <Field :label="labels.entrance" :htmlFor="tpl('{0}-entrance', id)">
+              <Input type="text" name="entrance" :id="tpl('{0}-entrance', id)" data-testid="field" />
+            </Field>
+            <Field :label="labels.floor" :htmlFor="tpl('{0}-floor', id)">
+              <Input type="text" name="floor" :id="tpl('{0}-floor', id)" data-testid="field" />
+            </Field>
+          </Grid>
+          <Field :label="labels.comment" :htmlFor="tpl('{0}-comment', id)">
+            <Textarea :rows="4" name="comment" :id="tpl('{0}-comment', id)" data-testid="field" />
+          </Field>
+        </CheckoutStep>
+        <CheckoutStep number="3" :title="labels.slot" :text="labels.slotText" :layout="layout">
+          <SlotGrid v-if="((days?.length ?? 0) > 0)" :days="days" :name="tpl('{0}-slot', id)" item="plain" />
+        </CheckoutStep>
+        <CheckoutStep number="4" :title="labels.payment" :text="labels.paymentText" :layout="layout">
+          <PaymentOptions
+            v-if="((payments?.length ?? 0) > 0)"
+            :payments="payments"
+            :name="tpl('{0}-payment', id)"
+            checked="payment-card"
+          />
+        </CheckoutStep>
+        <CheckoutSubmit :id="id" :consent="labels.consent" :submit="labels.submit" :legal="labels.legal" />
+      </Form>
+      <Box v-if="((summary as string) === 'aside')" class="lg:sticky lg:top-8" data-testid="aside">
+        <CartSummaryCard
+          :field="tpl('{0}-promo', id)"
+          :lines="lines"
+          :rows="rows"
+          :promos="promos"
+          :labels="totals"
+          items="show"
+        />
+      </Box>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/comparison-table.types.ts b/packages/vue/ui/src/blocks/comparison-table.types.ts
new file mode 100644
index 0000000..bb0984c
--- /dev/null
+++ b/packages/vue/ui/src/blocks/comparison-table.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type CompareRow = {
+  id: string;
+  label: string;
+  a: string;
+  b: string;
+  c: string;
+};
+
+export type CompareLabels = {
+  caption: string;
+  feature: string;
+  a: string;
+  b: string;
+  c: string;
+  yes: string;
+  no: string;
+};
diff --git a/packages/vue/ui/src/blocks/comparison-table.vue b/packages/vue/ui/src/blocks/comparison-table.vue
new file mode 100644
index 0000000..e48f0f1
--- /dev/null
+++ b/packages/vue/ui/src/blocks/comparison-table.vue
@@ -0,0 +1,103 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/pricing-more.ts -->
+<!--
+  Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a
+  check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle
+  column), tone, density.
+-->
+<script lang="ts">
+import type { CompareRow, CompareLabels } from "./comparison-table.types";
+
+export type ComparisonTableProps = {
+  id: string;
+  title: string;
+  rows: CompareRow[];
+  empty?: string;
+  labels: CompareLabels;
+  highlight?: "none" | "middle";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Table from "../primitives/table/table.vue";
+import TableBody from "../primitives/table/table-body.vue";
+import TableCaption from "../primitives/table/table-caption.vue";
+import TableCell from "../primitives/table/table-cell.vue";
+import TableHead from "../primitives/table/table-head.vue";
+import TableHeadCell from "../primitives/table/table-head-cell.vue";
+import TableRow from "../primitives/table/table-row.vue";
+import CompareMark from "../components/compare-mark.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  rows,
+  empty = "",
+  labels,
+  highlight = "none",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<ComparisonTableProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((rows?.length ?? 0) === 0)" icon="table" :title="empty" />
+    <Box v-else class="relative w-full overflow-x-auto">
+      <Table class="w-full text-left text-sm" data-testid="compare">
+        <TableCaption class="sr-only">
+          {{ labels.caption }}
+        </TableCaption>
+        <TableHead>
+          <TableRow>
+            <TableHeadCell scope="col" class="py-4">
+              {{ labels.feature }}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-4">
+              {{ labels.a }}
+            </TableHeadCell>
+            <TableHeadCell
+              scope="col"
+              :class="cn('py-4', (((highlight as string) === 'middle') ? 'bg-muted' : ''))"
+              :data-highlight="(((highlight as string) === 'middle') ? 'true' : 'false')"
+            >
+              {{ labels.b }}
+            </TableHeadCell>
+            <TableHeadCell scope="col" class="py-4">
+              {{ labels.c }}
+            </TableHeadCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow v-for="row in rows" :key="row.id" class="border-t border-border" data-testid="item">
+            <TableHeadCell scope="row" :class="cn('font-medium', (((density as string) === 'compact') ? 'py-2' : 'py-4'))">
+              {{ row.label }}
+            </TableHeadCell>
+            <TableCell :class="cn((((density as string) === 'compact') ? 'py-2' : 'py-4'))">
+              <CompareMark :value="row.a" :yes="labels.yes" :no="labels.no" />
+            </TableCell>
+            <TableCell
+              :class="cn(
+                (((density as string) === 'compact') ? 'py-2' : 'py-4'),
+                (((highlight as string) === 'middle') ? 'bg-muted font-semibold' : '')
+              )"
+            >
+              <CompareMark :value="row.b" :yes="labels.yes" :no="labels.no" />
+            </TableCell>
+            <TableCell :class="(((density as string) === 'compact') ? 'py-2' : 'py-4')">
+              <CompareMark :value="row.c" :yes="labels.yes" :no="labels.no" />
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/contact-form.types.ts b/packages/vue/ui/src/blocks/contact-form.types.ts
new file mode 100644
index 0000000..d8ed802
--- /dev/null
+++ b/packages/vue/ui/src/blocks/contact-form.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/promo.ts
+
+export type ContactLabels = {
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+  consent: string;
+  submit: string;
+};
diff --git a/packages/vue/ui/src/blocks/contact-form.vue b/packages/vue/ui/src/blocks/contact-form.vue
new file mode 100644
index 0000000..f81f824
--- /dev/null
+++ b/packages/vue/ui/src/blocks/contact-form.vue
@@ -0,0 +1,115 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach
+  us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone
+  (default, muted).
+-->
+<script lang="ts">
+import type { ContactLabels } from "./contact-form.types";
+import type { Feature } from "./feature-grid.types";
+
+export type ContactFormProps = {
+  id: string;
+  title: string;
+  text: string;
+  labels: ContactLabels;
+  details: Feature[];
+  layout?: "single" | "split";
+  fields?: "short" | "full";
+  terms?: "show" | "hide";
+  level?: 1 | 2;
+  page?: "section" | "full";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Checkbox from "../primitives/checkbox/checkbox.vue";
+import Form from "../primitives/form/form.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import Input from "../primitives/input/input.vue";
+import Label from "../primitives/label/label.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Textarea from "../primitives/textarea/textarea.vue";
+import Field from "../components/field.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  labels,
+  details,
+  layout = "single",
+  fields = "full",
+  terms = "hide",
+  level = 2,
+  page = "section",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<ContactFormProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="text"
+    :heading="{ level }"
+    :tone="tone"
+    :density="(((page as string) === 'full') ? 'roomy' : 'default')"
+    :align="(((page as string) === 'full') ? 'center' : 'start')"
+    :measure="(((layout as string) === 'single') ? 'xl' : 'default')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Grid :cols="(((layout as string) === 'split') ? '1-2' : '1')" class="items-start gap-8">
+      <Form method="dialog" class="w-full gap-4" data-testid="contact-form">
+        <Field v-if="((fields as string) === 'full')" :label="labels.name" :htmlFor="tpl('{0}-name', id)">
+          <Input type="text" name="name" autocomplete="name" :id="tpl('{0}-name', id)" data-testid="field" />
+        </Field>
+        <Field :label="labels.email" :htmlFor="tpl('{0}-email', id)">
+          <Input type="email" name="email" autocomplete="email" :id="tpl('{0}-email', id)" data-testid="field" />
+        </Field>
+        <Field v-if="((fields as string) === 'full')" :label="labels.subject" :htmlFor="tpl('{0}-subject', id)">
+          <Input type="text" name="subject" :id="tpl('{0}-subject', id)" data-testid="field" />
+        </Field>
+        <Field :label="labels.message" :htmlFor="tpl('{0}-message', id)">
+          <Textarea :rows="4" name="message" :id="tpl('{0}-message', id)" data-testid="field" />
+        </Field>
+        <Group v-if="((terms as string) === 'show')" gap="2" align="center" :class="cn('w-fit', '')">
+          <Checkbox name="consent" :id="tpl('{0}-consent', id)" />
+          <Label :for="tpl('{0}-consent', id)" class="text-sm">
+            {{ labels.consent }}
+          </Label>
+        </Group>
+        <Button variant="default" size="default" type="submit" class="w-fit" data-testid="submit">
+          {{ labels.submit }}
+        </Button>
+      </Form>
+      <Stack
+        v-if="(((layout as string) === 'split') && ((details?.length ?? 0) > 0))"
+        gap="4"
+        data-testid="details"
+      >
+        <Group v-for="d in details" :key="d.id" gap="4" align="start" data-testid="detail">
+          <LucideIcon :name="d.icon" :size="20" />
+          <Stack gap="0">
+            <Text size="base" weight="semibold">
+              {{ d.title }}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {{ d.text }}
+            </Text>
+          </Stack>
+        </Group>
+      </Stack>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/cookie-banner.vue b/packages/vue/ui/src/blocks/cookie-banner.vue
new file mode 100644
index 0000000..5f23efd
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cookie-banner.vue
@@ -0,0 +1,98 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings.
+  Axes: layout (bar, card), actions (two, three), tone (default, muted).
+-->
+<script lang="ts">
+export type CookieBannerProps = {
+  id: string;
+  title: string;
+  text: string;
+  accept: string;
+  decline: string;
+  settings?: string;
+  layout?: "bar" | "card";
+  actions?: "two" | "three";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Container from "../primitives/container/container.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  accept,
+  decline,
+  settings,
+  layout = "bar",
+  actions = "two",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<CookieBannerProps>();
+</script>
+
+<template>
+  <Block
+    tag="section"
+    :aria-labelledby="(landmarkLabel ? undefined : tpl('{0}-title', id))"
+    data-testid="cookie"
+    :data-layout="layout"
+    :aria-label="landmarkLabel"
+  >
+    <Container :class="cn('mx-auto w-full max-w-6xl px-4', 'py-4')" data-slot="container">
+      <Box
+        :class="cn(
+          'flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border',
+          (((tone as string) === 'muted') ? 'bg-muted' : 'bg-card'),
+          (
+            (layout as string) === 'bar' ? 'md:flex-row md:items-center md:justify-between'
+            : 'mx-auto w-full max-w-md'
+          )
+        )"
+      >
+        <Group gap="4" align="start" class="min-w-0">
+          <LucideIcon name="cookie" :size="24" />
+          <Stack gap="2">
+            <Title :as="2" size="base" weight="bold" :id="tpl('{0}-title', id)">
+              {{ title }}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {{ text }}
+            </Text>
+          </Stack>
+        </Group>
+        <Group gap="2" class="shrink-0 flex-wrap">
+          <Button
+            v-if="(((actions as string) === 'three') && settings)"
+            variant="ghost"
+            size="sm"
+            type="button"
+            data-testid="cookie-settings"
+          >
+            {{ settings }}
+          </Button>
+          <Button variant="outline" size="sm" type="button" data-testid="cookie-decline">
+            {{ decline }}
+          </Button>
+          <Button variant="default" size="sm" type="button" data-testid="cookie-accept">
+            {{ accept }}
+          </Button>
+        </Group>
+      </Box>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/credit-packs.types.ts b/packages/vue/ui/src/blocks/credit-packs.types.ts
new file mode 100644
index 0000000..d320871
--- /dev/null
+++ b/packages/vue/ui/src/blocks/credit-packs.types.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type Pack = {
+  id: string;
+  name: string;
+  credits: number;
+  price: number;
+  currency: string;
+  badge: string;
+};
diff --git a/packages/vue/ui/src/blocks/credit-packs.vue b/packages/vue/ui/src/blocks/credit-packs.vue
new file mode 100644
index 0000000..fecb9d8
--- /dev/null
+++ b/packages/vue/ui/src/blocks/credit-packs.vue
@@ -0,0 +1,123 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/pricing-more.ts -->
+<!--
+  Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile,
+  row), tone, density.
+-->
+<script lang="ts">
+import type { Pack } from "./credit-packs.types";
+
+export type CreditPacksProps = {
+  id: string;
+  title: string;
+  packs: Pack[];
+  empty?: string;
+  badges: Record<string, string>;
+  buy: string;
+  cols?: "2" | "4";
+  item?: "tile" | "row";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Card from "../primitives/card/card.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { at, cn, fitCols, fmtMoney } from "../utils";
+
+const {
+  id,
+  title,
+  packs,
+  empty = "",
+  badges,
+  buy,
+  cols = "4",
+  item = "tile",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<CreditPacksProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    :measure="(((item as string) === 'row') ? '2xl' : 'default')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((packs?.length ?? 0) === 0)" icon="coins" :title="empty" />
+    <Grid v-else
+      :cols="
+        (item as string) === 'row' ? '1'
+        : fitCols((((cols as string) === '2') ? '1-2' : '1-4'), (packs?.length ?? 0))
+      "
+      class="gap-4"
+      data-testid="items"
+    >
+      <Card v-for="pack in packs" :key="pack.id"
+        variant="default"
+        :class="cn(
+          'h-full',
+          (
+            (item as string) === 'row' ? 'gap-4 p-4'
+            : (density as string) === 'compact' ? 'gap-4 p-4'
+            : ''
+          )
+        )"
+        data-testid="item"
+        :data-badge="pack.badge"
+      >
+        <CardContent
+          :class="cn(
+            'flex h-full gap-4',
+            (((item as string) === 'row') ? 'flex-row flex-wrap items-center justify-between' : 'flex-col')
+          )"
+        >
+          <Stack gap="2" align="start" :class="cn('min-w-0', (((item as string) === 'row') ? 'flex-1' : ''))">
+            <Box
+              v-if="(pack.badge || (((item as string) !== 'row') && (packs.filter((i) => i['badge']).length > 0)))"
+              class="flex min-h-6 items-center"
+              data-slot="badge-slot"
+            >
+              <Badge v-if="pack.badge" variant="default" size="default" class="w-fit shrink-0" data-testid="badge">
+                {{ at(badges, pack.badge) }}
+              </Badge>
+            </Box>
+            <Stack gap="0" class="min-w-0">
+              <Title :as="3" size="xl" weight="bold">
+                {{ pack.name }}
+              </Title>
+              <Text size="2xl" weight="bold">
+                {{ fmtMoney(pack.price, pack.currency) }}
+              </Text>
+            </Stack>
+          </Stack>
+          <Button
+            :variant="((pack.badge === 'popular') ? 'default' : 'outline')"
+            size="sm"
+            type="button"
+            :class="cn('w-fit shrink-0', (((item as string) === 'row') ? '' : 'mt-auto'))"
+            data-testid="buy"
+          >
+            {{ buy }}
+          </Button>
+        </CardContent>
+      </Card>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/cta-band.types.ts b/packages/vue/ui/src/blocks/cta-band.types.ts
new file mode 100644
index 0000000..e12f8ec
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cta-band.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type CtaQuote = {
+  /** a customer quote, shown when `proof` is quote */
+  text?: string;
+  /** who said it */
+  by?: string;
+};
diff --git a/packages/vue/ui/src/blocks/cta-band.vue b/packages/vue/ui/src/blocks/cta-band.vue
new file mode 100644
index 0000000..852249b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cta-band.vue
@@ -0,0 +1,121 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing.ts -->
+<!--
+  A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split
+  picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof
+  (none, quote), density.
+-->
+<script lang="ts">
+import type { CtaQuote } from "./cta-band.types";
+import type { ActionSet } from "../components/cta-actions.types";
+
+export type CtaBandProps = {
+  id: string;
+  title: string;
+  text: string;
+  actions: ActionSet;
+  quote?: CtaQuote;
+  layout?: "card" | "band" | "split" | "row" | "banner";
+  tone?: "default" | "muted";
+  proof?: "none" | "quote";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Block from "../primitives/block/block.vue";
+import Card from "../primitives/card/card.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import Container from "../primitives/container/container.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import CtaActions from "../components/cta-actions.vue";
+import CtaBanner from "../blocks/cta-banner.vue";
+import MediaFrame from "../components/media-frame.vue";
+import QuoteProof from "../components/quote-proof.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  actions,
+  quote,
+  layout = "card",
+  tone = "muted",
+  proof = "none",
+  density = "default",
+  landmarkLabel,
+} = defineProps<CtaBandProps>();
+const center = computed(() => ((layout as string) === "band") || ((layout as string) === "banner"));
+</script>
+
+<template>
+  <CtaBanner v-if="((layout as string) === 'banner')"
+    :id="id"
+    :title="title"
+    :text="text"
+    :cta="actions.cta"
+    :href="actions.href"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  />
+  <Block v-else-if="((layout as string) === 'row')"
+    tag="section"
+    class="py-8"
+    :aria-labelledby="(landmarkLabel ? undefined : tpl('{0}-title', id))"
+    data-testid="section"
+    :data-tone="tone"
+    :data-density="density"
+    :aria-label="landmarkLabel"
+  >
+    <Container class="mx-auto w-full max-w-6xl px-4" data-slot="container">
+      <Card variant="muted">
+        <CardContent class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <Stack gap="2" class="min-w-0">
+            <Title :as="2" size="2xl" weight="bold" :id="tpl('{0}-title', id)">
+              {{ title }}
+            </Title>
+            <Text size="base" class="text-muted-foreground">
+              {{ text }}
+            </Text>
+          </Stack>
+          <QuoteProof
+            v-if="((proof as string) === 'quote')"
+            :quote="quote?.text"
+            :quoteBy="quote?.by"
+            :center="center"
+          />
+          <CtaActions :id="id" :actions="actions" :center="center" />
+        </CardContent>
+      </Card>
+    </Container>
+  </Block>
+  <SectionFrame v-else
+    :id="id"
+    :title="title"
+    :lead="text"
+    :layout="(((layout as string) === 'split') ? 'split' : 'stack')"
+    :align="(center ? 'center' : 'start')"
+    :boxed="((layout as string) === 'card')"
+    :media="{ show: ((layout as string) === 'split') }"
+    :tone="tone"
+    :density="density"
+    :landmarkLabel="landmarkLabel"
+  >
+    <QuoteProof
+      v-if="((proof as string) === 'quote')"
+      :quote="quote?.text"
+      :quoteBy="quote?.by"
+      :center="center"
+    />
+    <CtaActions :id="id" :actions="actions" :center="center" />
+    <template #aside>
+      <MediaFrame :alt="title" ratio="4/3" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/cta-banner.vue b/packages/vue/ui/src/blocks/cta-banner.vue
new file mode 100644
index 0000000..b319502
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cta-banner.vue
@@ -0,0 +1,59 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing.ts -->
+<!-- A centered closing card: heading, one sentence and a pill button. Sizes from the default preset. -->
+<script lang="ts">
+export type CtaBannerProps = {
+  id: string;
+  title: string;
+  text: string;
+  cta: string;
+  href?: string;
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import { defaults } from "../presets/defaults";
+import { cn, tpl } from "../utils";
+
+const { id, title, text, cta, href, tone = "muted", landmarkLabel } = defineProps<CtaBannerProps>();
+</script>
+
+<template>
+  <Block
+    tag="section"
+    class="w-full py-0"
+    :aria-labelledby="(landmarkLabel ? undefined : tpl('{0}-title', id))"
+    data-testid="section"
+    :data-tone="tone"
+    data-density="compact"
+    :aria-label="landmarkLabel"
+  >
+    <Box
+      :class="cn('flex w-full flex-col items-center gap-10 bg-muted px-6 text-center', defaults.cta.panel)"
+      data-testid="cta-banner"
+    >
+      <Title
+        :as="2"
+        size="3xl"
+        weight="semibold"
+        :class="cn(defaults.cta.title, 'leading-9')"
+        :id="tpl('{0}-title', id)"
+      >
+        {{ title }}
+      </Title>
+      <Text size="xs" weight="semibold" :class="cn('leading-5 text-muted-foreground', defaults.cta.text)">
+        {{ text }}
+      </Text>
+      <Button variant="default" size="lg" :href="href" :class="defaults.cta.button" data-testid="action-primary">
+        {{ cta }}
+      </Button>
+    </Box>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/cta-proof.types.ts b/packages/vue/ui/src/blocks/cta-proof.types.ts
new file mode 100644
index 0000000..4169967
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cta-proof.types.ts
@@ -0,0 +1,14 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/cta-proof.ts
+
+import type { Logo } from "./logo-cloud.types";
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Zone } from "./zone-table.types";
+
+export type CtaContent = {
+  logos: Logo[];
+  features: Feature[];
+  stats: Stat[];
+  zones: Zone[];
+};
diff --git a/packages/vue/ui/src/blocks/cta-proof.vue b/packages/vue/ui/src/blocks/cta-proof.vue
new file mode 100644
index 0000000..bc9f4e0
--- /dev/null
+++ b/packages/vue/ui/src/blocks/cta-proof.vue
@@ -0,0 +1,82 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/cta-proof.ts -->
+<!--
+  A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note.
+  Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos,
+  features, stats, rows, zones), mediaSide, tone.
+-->
+<script lang="ts">
+import type { CtaContent } from "./cta-proof.types";
+import type { Logo } from "./logo-cloud.types";
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Zone } from "./zone-table.types";
+import type { LinkActions } from "./error-page.types";
+
+export type CtaProofProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  actions: LinkActions;
+  content: CtaContent;
+  note?: string;
+  layout?: "center" | "split";
+  proof?: "logos" | "features" | "stats" | "rows" | "zones";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Text from "../primitives/text/text.vue";
+import ActionGroup from "../components/action-group.vue";
+import CtaProofItems from "../components/cta-proof-items.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  actions,
+  content,
+  note = "",
+  layout = "center",
+  proof = "stats",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<CtaProofProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    :align="(((layout as string) === 'center') ? 'center' : 'start')"
+    :layout="(((layout as string) === 'center') ? 'stack' : 'split')"
+    :media="{ show: ((layout as string) === 'split'), side: mediaSide }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <CtaProofItems :content="content" :proof="proof" :center="((layout as string) === 'center')" />
+    <ActionGroup
+      :primary="actions.cta"
+      :primaryHref="actions.href"
+      :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+      :secondaryHref="actions.secondaryHref"
+      :align="(((layout as string) === 'center') ? 'center' : 'start')"
+    />
+    <Text v-if="note" size="xs" class="text-muted-foreground" data-testid="cta-note">
+      {{ note }}
+    </Text>
+    <template #aside>
+      <MediaFrame :alt="title" ratio="4/3" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/dashboard-overview.types.ts b/packages/vue/ui/src/blocks/dashboard-overview.types.ts
new file mode 100644
index 0000000..f10bd5b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/dashboard-overview.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+
+export type OverviewChart = {
+  title: string;
+  text: string;
+  /** the chart's accessible summary */
+  summary: string;
+  /** the bars */
+  series: Point[];
+};
+
+export type OverviewActivity = {
+  title: string;
+  text: string;
+  events: Event[];
+};
diff --git a/packages/vue/ui/src/blocks/dashboard-overview.vue b/packages/vue/ui/src/blocks/dashboard-overview.vue
new file mode 100644
index 0000000..0583e7c
--- /dev/null
+++ b/packages/vue/ui/src/blocks/dashboard-overview.vue
@@ -0,0 +1,87 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/workspace.ts -->
+<!--
+  The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the
+  activity side by side, stacked: one below the other), cols (2, 4), tone, density.
+-->
+<script lang="ts">
+import type { OverviewChart, OverviewActivity } from "./dashboard-overview.types";
+import type { Metric } from "./metric-row.types";
+import type { Point } from "./chart-panel.types";
+import type { Event } from "./activity-feed.types";
+
+export type DashboardOverviewProps = {
+  id: string;
+  title: string;
+  metrics: Metric[];
+  chart: OverviewChart;
+  activity: OverviewActivity;
+  layout?: "split" | "stacked";
+  cols?: "2" | "4";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Stack from "../primitives/stack/stack.vue";
+import BarChart from "../components/bar-chart.vue";
+import Panel from "../components/panel.vue";
+import SectionFrame from "../components/section-frame.vue";
+import StatTile from "../components/stat-tile.vue";
+import Timeline from "../components/timeline.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  metrics,
+  chart,
+  activity,
+  layout = "split",
+  cols = "4",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<DashboardOverviewProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <Stack gap="6" align="stretch">
+      <Grid
+        v-if="((metrics?.length ?? 0) > 0)"
+        :cols="(((cols as string) === '2') ? '1-2' : '1-4')"
+        class="gap-4"
+        data-testid="items"
+      >
+        <Box v-for="m in metrics" :key="m.id" data-testid="item">
+          <StatTile :label="m.label" :value="m.value" :icon="m.icon" :hint="m.hint" />
+        </Box>
+      </Grid>
+      <Grid :cols="(((layout as string) === 'split') ? '1-2' : '1')" class="items-stretch gap-4" data-testid="panels">
+        <Panel
+          v-if="((chart.series?.length ?? 0) > 0)"
+          :title="chart.title"
+          :description="chart.text"
+          :id="tpl('{0}-chart', id)"
+          class="h-full"
+        >
+          <BarChart :bars="chart.series" :label="chart.summary" :height="144" />
+        </Panel>
+        <Panel
+          v-if="((activity.events?.length ?? 0) > 0)"
+          :title="activity.title"
+          :description="activity.text"
+          :id="tpl('{0}-feed', id)"
+          class="h-full"
+        >
+          <Timeline :items="activity.events" />
+        </Panel>
+      </Grid>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/dashboard-shell.types.ts b/packages/vue/ui/src/blocks/dashboard-shell.types.ts
new file mode 100644
index 0000000..1fbb633
--- /dev/null
+++ b/packages/vue/ui/src/blocks/dashboard-shell.types.ts
@@ -0,0 +1,21 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/shells.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type ShellNav = {
+  label: string;
+  brand: string;
+  links: NavLink[];
+  current: string;
+  subTitle: string;
+  sub: NavLink[];
+  subCurrent: string;
+  search: string;
+  shortcut: string;
+  expand: string;
+  userName: string;
+  copyright: string;
+  footerLabel: string;
+  footer: NavLink[];
+};
diff --git a/packages/vue/ui/src/blocks/dashboard-shell.vue b/packages/vue/ui/src/blocks/dashboard-shell.vue
new file mode 100644
index 0000000..4765906
--- /dev/null
+++ b/packages/vue/ui/src/blocks/dashboard-shell.vue
@@ -0,0 +1,112 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/shells.ts -->
+<!--
+  The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset:
+  over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide,
+  rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries
+  the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a
+  framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.
+-->
+<script lang="ts">
+import type { ShellNav } from "./dashboard-shell.types";
+import type { NavLink } from "./nav-bar.types";
+
+export type DashboardShellProps = {
+  id: string;
+  title: string;
+  level?: 1 | 2;
+  nav: ShellNav;
+  topbar?: "full" | "inset" | "none";
+  search?: "show" | "hide";
+  sidebar?: "wide" | "rail" | "collapsed" | "twolevel" | "none";
+  side?: "start" | "end";
+  footer?: "full" | "inset" | "none";
+  content?: "grid" | "split" | "list";
+  frame?: "window" | "page";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import ShellContent from "../components/shell-content.vue";
+import ShellFooter from "../components/shell-footer.vue";
+import ShellSidebar from "../components/shell-sidebar.vue";
+import ShellTopbar from "../components/shell-topbar.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  level = 2,
+  nav,
+  topbar = "full",
+  search = "show",
+  sidebar = "wide",
+  side = "start",
+  footer = "none",
+  content = "grid",
+  frame = "window",
+  landmarkLabel,
+} = defineProps<DashboardShellProps>();
+const titleId = computed(() => tpl("{0}-title", id));
+</script>
+
+<template>
+  <Block
+    tag="section"
+    :class="(((frame as string) === 'window') ? 'bg-background py-12' : 'bg-background')"
+    :id="id"
+    :aria-labelledby="(landmarkLabel ? undefined : titleId)"
+    data-testid="dashboard-shell"
+    :data-topbar="topbar"
+    :data-sidebar="sidebar"
+    :data-footer="footer"
+    :aria-label="landmarkLabel"
+  >
+    <Box :class="(((frame as string) === 'window') ? 'mx-auto w-full max-w-6xl px-4' : '')">
+      <Box
+        :class="cn(
+          'flex flex-col overflow-hidden bg-background',
+          (((frame as string) === 'window') ? 'min-h-160 rounded border border-border' : 'min-h-screen')
+        )"
+        data-testid="window"
+      >
+        <ShellTopbar v-if="((topbar as string) === 'full')"
+          :nav="nav"
+          :links="(((sidebar as string) === 'none') ? 'show' : 'hide')"
+          :search="search"
+          :landmarkLabel="landmarkLabel"
+        />
+        <Box :class="cn('flex min-h-0 flex-1', (((side as string) === 'end') ? 'flex-row-reverse' : ''))">
+          <ShellSidebar v-if="((sidebar as string) !== 'none')"
+            :nav="nav"
+            :mode="sidebar"
+            :side="side"
+            :brand="(((topbar as string) === 'full') ? 'hide' : 'show')"
+            :landmarkLabel="landmarkLabel"
+          />
+          <Box class="flex min-w-0 flex-1 flex-col">
+            <ShellTopbar v-if="((topbar as string) === 'inset')"
+              :nav="nav"
+              :brand="(((sidebar as string) === 'none') ? 'show' : 'hide')"
+              :links="(((sidebar as string) === 'none') ? 'show' : 'hide')"
+              :search="search"
+              :landmarkLabel="landmarkLabel"
+            />
+            <ShellContent :title="title" :titleId="titleId" :level="level" :content="content" />
+            <ShellFooter
+              v-if="((footer as string) === 'inset')"
+              :nav="nav"
+              place="inset"
+              :landmarkLabel="landmarkLabel"
+            />
+          </Box>
+        </Box>
+        <ShellFooter v-if="((footer as string) === 'full')" :nav="nav" :landmarkLabel="landmarkLabel" />
+      </Box>
+    </Box>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/delivery-info.types.ts b/packages/vue/ui/src/blocks/delivery-info.types.ts
new file mode 100644
index 0000000..ab50895
--- /dev/null
+++ b/packages/vue/ui/src/blocks/delivery-info.types.ts
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type DeliveryLabels = {
+  zones: string;
+  freeFrom: string;
+};
diff --git a/packages/vue/ui/src/blocks/delivery-info.vue b/packages/vue/ui/src/blocks/delivery-info.vue
new file mode 100644
index 0000000..d220993
--- /dev/null
+++ b/packages/vue/ui/src/blocks/delivery-info.vue
@@ -0,0 +1,131 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/delivery.ts -->
+<!--
+  How delivery works: the facts as icon cards, then the zones with their time and the order that ships free.
+  Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones),
+  tone, density.
+-->
+<script lang="ts">
+import type { DeliveryLabels } from "./delivery-info.types";
+import type { Feature } from "./feature-grid.types";
+import type { Zone } from "./zone-table.types";
+
+export type DeliveryInfoProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  facts: Feature[];
+  zones: Zone[];
+  labels: DeliveryLabels;
+  layout?: "full" | "facts" | "split";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, fmtMoney, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  facts,
+  zones,
+  labels,
+  layout = "full",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<DeliveryInfoProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :tone="tone"
+    :density="density"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Box
+      :class="cn(
+        'grid grid-cols-1 gap-8',
+        (((layout as string) === 'split') ? 'items-start md:grid-cols-2' : '')
+      )"
+    >
+      <Grid
+        v-if="((facts?.length ?? 0) > 0)"
+        :cols="(((layout as string) === 'split') ? '1-2' : '1-4')"
+        class="gap-4"
+        data-testid="facts"
+      >
+        <Stack
+          v-for="f in facts"
+          :key="f.id"
+          gap="4"
+          class="rounded bg-card inset-ring inset-ring-border p-6"
+          data-testid="fact"
+        >
+          <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+            <LucideIcon :name="f.icon" :size="20" />
+          </Box>
+          <Stack gap="2">
+            <Text size="sm" weight="semibold">
+              {{ f.title }}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {{ f.text }}
+            </Text>
+          </Stack>
+        </Stack>
+      </Grid>
+      <Stack v-if="(((layout as string) !== 'facts') && ((zones?.length ?? 0) > 0))" gap="4" align="stretch">
+        <Title :as="3" size="lg" weight="bold">
+          {{ labels.zones }}
+        </Title>
+        <Box
+          :class="
+            (layout as string) === 'split' ? 'flex flex-col gap-4'
+            : 'grid grid-cols-1 gap-4 md:grid-cols-3'
+          "
+        >
+          <Stack v-for="z in zones" :key="z.id"
+            gap="2"
+            :class="
+              (layout as string) === 'split' ? 'border-b border-border pb-4'
+              : 'rounded bg-card inset-ring inset-ring-border p-6'
+            "
+            data-testid="zone"
+          >
+            <Group gap="4" align="baseline" justify="between">
+              <Text size="sm" weight="semibold">
+                {{ z.name }}
+              </Text>
+              <Badge variant="secondary" size="default">
+                {{ z.time }}
+              </Badge>
+            </Group>
+            <Text size="sm" class="text-muted-foreground">
+              {{ z.area }}
+            </Text>
+            <Text size="sm" weight="medium">
+              {{ tpl(labels.freeFrom, fmtMoney(z.freeFrom, z.currency)) }}
+            </Text>
+          </Stack>
+        </Box>
+      </Stack>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/empty-panel.vue b/packages/vue/ui/src/blocks/empty-panel.vue
new file mode 100644
index 0000000..bf30054
--- /dev/null
+++ b/packages/vue/ui/src/blocks/empty-panel.vue
@@ -0,0 +1,103 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain.
+  Axes: layout (card, plain), actions (button, none), size (default, compact).
+-->
+<script lang="ts">
+export type EmptyPanelProps = {
+  id: string;
+  title: string;
+  text: string;
+  icon?: string;
+  cta?: string;
+  ctaHref?: string;
+  layout?: "card" | "plain";
+  actions?: "button" | "none";
+  visual?: "icon" | "image";
+  size?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Button from "../primitives/button/button.vue";
+import Container from "../primitives/container/container.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  icon = "inbox",
+  cta,
+  ctaHref,
+  layout = "card",
+  actions = "button",
+  visual = "icon",
+  size = "default",
+  landmarkLabel,
+} = defineProps<EmptyPanelProps>();
+</script>
+
+<template>
+  <Block tag="section" :aria-label="(landmarkLabel ?? title)" data-testid="empty">
+    <Container
+      :class="cn('mx-auto w-full max-w-6xl px-4', (((size as string) === 'compact') ? 'py-4' : 'py-8'))"
+      data-slot="container"
+    >
+      <Stack
+        v-if="((visual as string) === 'image')"
+        gap="4"
+        align="center"
+        class="mx-auto max-w-md text-center"
+        data-testid="empty-visual"
+      >
+        <MediaFrame :alt="title" ratio="4/3" class="w-full max-w-xs" />
+        <Title :as="2" size="2xl" weight="bold">
+          {{ title }}
+        </Title>
+        <Text size="sm" class="text-muted-foreground">
+          {{ text }}
+        </Text>
+        <Button
+          v-if="((actions as string) === 'button')"
+          variant="default"
+          size="sm"
+          :href="ctaHref"
+          data-testid="empty-action"
+        >
+          {{ cta }}
+        </Button>
+      </Stack>
+      <EmptyState v-else
+        :icon="icon"
+        :title="title"
+        :text="text"
+        :class="cn(
+          'mx-auto max-w-xl',
+          (((layout as string) === 'plain') ? 'bg-transparent inset-ring-0' : ''),
+          (((size as string) === 'compact') ? 'py-6' : '')
+        )"
+      >
+        <template #action>
+          <Button
+            v-if="((actions as string) === 'button')"
+            variant="default"
+            size="sm"
+            :href="ctaHref"
+            data-testid="empty-action"
+          >
+            {{ cta }}
+          </Button>
+        </template>
+      </EmptyState>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/error-page.types.ts b/packages/vue/ui/src/blocks/error-page.types.ts
new file mode 100644
index 0000000..e117bb4
--- /dev/null
+++ b/packages/vue/ui/src/blocks/error-page.types.ts
@@ -0,0 +1,13 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type LinkActions = {
+  /** one or two links */
+  mode?: "one" | "two";
+  /** primary action label */
+  cta: string;
+  /** the address of the primary action; none: a button, not a link */
+  href?: string;
+  secondary?: string;
+  secondaryHref?: string;
+};
diff --git a/packages/vue/ui/src/blocks/error-page.vue b/packages/vue/ui/src/blocks/error-page.vue
new file mode 100644
index 0000000..19559f6
--- /dev/null
+++ b/packages/vue/ui/src/blocks/error-page.vue
@@ -0,0 +1,81 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way
+  back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two),
+  tone.
+-->
+<script lang="ts">
+import type { LinkActions } from "./error-page.types";
+
+export type ErrorPageProps = {
+  id: string;
+  title: string;
+  text: string;
+  status: string;
+  actions: LinkActions;
+  level?: 1 | 2;
+  layout?: "centered" | "split";
+  code?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Text from "../primitives/text/text.vue";
+import ActionGroup from "../components/action-group.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  status,
+  actions,
+  level = 1,
+  layout = "centered",
+  code = "show",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<ErrorPageProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="text"
+    :heading="{ level }"
+    :layout="(((layout as string) === 'split') ? 'split' : 'stack')"
+    :media="{ show: ((layout as string) === 'split') }"
+    :align="(((layout as string) === 'split') ? 'start' : 'center')"
+    :tone="tone"
+    density="roomy"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Text v-if="((code as string) === 'show')"
+      size="4xl"
+      weight="bold"
+      :class="cn(
+        'text-8xl text-muted-foreground',
+        (((layout as string) === 'split') ? '' : 'text-center')
+      )"
+      data-testid="error-code"
+    >
+      {{ status }}
+    </Text>
+    <ActionGroup
+      :primary="actions.cta"
+      :primaryHref="actions.href"
+      :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+      :secondaryHref="actions.secondaryHref"
+      :align="(((layout as string) === 'split') ? 'start' : 'center')"
+    />
+    <template #aside>
+      <MediaFrame :alt="title" ratio="4/3" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/faq-list.types.ts b/packages/vue/ui/src/blocks/faq-list.types.ts
new file mode 100644
index 0000000..27fd513
--- /dev/null
+++ b/packages/vue/ui/src/blocks/faq-list.types.ts
@@ -0,0 +1,35 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type Faq = {
+  id: string;
+  question: string;
+  answer: string;
+  category?: string;
+};
+
+export type FaqTab = {
+  id: string;
+  title: string;
+  value: string;
+};
+
+export type FaqSearch = {
+  /** field: a search field above the questions */
+  mode?: "none" | "field";
+  /** accessible name and placeholder of the search field */
+  label?: string;
+  /** the text the questions are filtered by */
+  query?: string;
+};
+
+export type FaqFilter = {
+  /** categories: tabs above the questions */
+  mode?: "none" | "categories";
+  /** the category tabs */
+  tabs?: FaqTab[];
+  /** accessible name of the tabs */
+  label?: string;
+  /** the value of the chosen tab */
+  category?: string;
+};
diff --git a/packages/vue/ui/src/blocks/faq-list.vue b/packages/vue/ui/src/blocks/faq-list.vue
new file mode 100644
index 0000000..573974b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/faq-list.vue
@@ -0,0 +1,119 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing.ts -->
+<!--
+  A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without
+  script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search
+  field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters
+  by `filter.category`), density, tone.
+-->
+<script lang="ts">
+import type { Faq, FaqTab, FaqSearch, FaqFilter } from "./faq-list.types";
+
+export type FaqListProps = {
+  id: string;
+  title: string;
+  items: Faq[];
+  search?: FaqSearch;
+  filter?: FaqFilter;
+  layout?: "accordion" | "chat";
+  cols?: "1" | "2";
+  empty?: string;
+  multiple?: boolean;
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Box from "../primitives/box/box.vue";
+import Disclosure from "../primitives/disclosure/disclosure.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Summary from "../primitives/disclosure/summary.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import SearchField from "../components/search-field.vue";
+import SectionFrame from "../components/section-frame.vue";
+import Switcher from "../components/switcher.vue";
+import SwitcherItem from "../components/switcher-item.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  items,
+  search,
+  filter,
+  layout = "accordion",
+  cols = "1",
+  empty = "",
+  multiple = false,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<FaqListProps>();
+const emit = defineEmits<{ query: [text: string], category: [value: string] }>();
+const inCategory = computed(() => items.filter((i) => !filter?.category || i["category"] === filter?.category));
+const shown = computed(() =>
+  inCategory.value.filter((i) => !search?.query || String(i["question"]).toLowerCase().includes(String(search?.query).toLowerCase()))
+);
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    :measure="(((layout as string) === 'chat') ? '2xl' : 'default')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <SearchField v-if="(search?.mode === 'field')"
+      :label="(search?.label ?? '')"
+      :placeholder="search?.label"
+      :value="(search?.query ?? '')"
+      @value="(arg: string) => emit('query', arg)"
+    />
+    <Switcher v-if="(filter?.mode === 'categories')" :label="filter?.label">
+      <SwitcherItem
+        v-for="tab in filter?.tabs"
+        :key="tab.id"
+        :active="(tab.value === filter?.category)"
+        @click="() => emit('category', tab.value)"
+      >
+        {{ tab.title }}
+      </SwitcherItem>
+    </Switcher>
+    <EmptyState v-if="((shown?.length ?? 0) === 0)" icon="circle-question-mark" :title="empty" />
+    <Stack v-if="((layout as string) === 'chat')" gap="4" align="stretch" data-testid="faq">
+      <Stack v-for="item in shown" :key="item.id" gap="2" align="stretch" data-testid="faq-item">
+        <Box class="ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground">
+          <Text size="sm" weight="semibold">
+            {{ item.question }}
+          </Text>
+        </Box>
+        <Box class="mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4">
+          <Text size="sm">
+            {{ item.answer }}
+          </Text>
+        </Box>
+      </Stack>
+    </Stack>
+    <Grid v-else :cols="(((cols as string) === '2') ? '1-2' : '1')" class="items-start gap-x-8" data-testid="faq">
+      <Disclosure v-for="item in shown" :key="item.id"
+        variant="item"
+        :name="(multiple ? undefined : tpl('{0}-faq', (id ?? 'faq')))"
+        data-testid="faq-item"
+      >
+        <Summary variant="item">
+          {{ item.question }}
+        </Summary>
+        <Text size="sm" class="pb-4 text-muted-foreground">
+          {{ item.answer }}
+        </Text>
+      </Disclosure>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/faq-split.types.ts b/packages/vue/ui/src/blocks/faq-split.types.ts
new file mode 100644
index 0000000..626adfc
--- /dev/null
+++ b/packages/vue/ui/src/blocks/faq-split.types.ts
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/faq-split.ts
+
+export type Question = {
+  id: string;
+  question: string;
+  answer: string;
+  category: string;
+  icon: string;
+  href?: string;
+};
+
+export type FaqSplitLabels = {
+  cta: string;
+  more: string;
+  asideTitle: string;
+  asideText: string;
+  asideCta: string;
+  search: string;
+  popular: string;
+  query?: string;
+};
diff --git a/packages/vue/ui/src/blocks/faq-split.vue b/packages/vue/ui/src/blocks/faq-split.vue
new file mode 100644
index 0000000..d8a8c71
--- /dev/null
+++ b/packages/vue/ui/src/blocks/faq-split.vue
@@ -0,0 +1,140 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/faq-split.ts -->
+<!--
+  Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside:
+  the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder
+  beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.
+-->
+<script lang="ts">
+import type { Question, FaqSplitLabels } from "./faq-split.types";
+import type { Feature } from "./feature-grid.types";
+import type { FaqTab } from "./faq-list.types";
+
+export type FaqSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  items: Question[];
+  channels: Feature[];
+  topics: FaqTab[];
+  labels: FaqSplitLabels;
+  layout?: "head" | "aside" | "media" | "search" | "cards";
+  cards?: "grid3" | "grid4" | "icons";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import FaqCards from "../components/faq-cards.vue";
+import FaqDisclosures from "../components/faq-disclosures.vue";
+import FaqFinder from "../components/faq-finder.vue";
+import FaqHelp from "../components/faq-help.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  items,
+  channels,
+  topics,
+  labels,
+  layout = "head",
+  cards = "grid3",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<FaqSplitProps>();
+</script>
+
+<template>
+  <template v-if="((items?.length ?? 0) > 0)">
+    <SectionFrame v-if="((layout as string) === 'cards')"
+      :id="id"
+      :title="title"
+      :lead="lead"
+      :heading="{ badge }"
+      :tone="tone"
+      :landmarkLabel="landmarkLabel"
+    >
+      <FaqCards :items="items" :labels="labels" :cards="cards" />
+    </SectionFrame>
+    <SectionFrame v-if="((layout as string) === 'head')"
+      :id="id"
+      :title="title"
+      :lead="lead"
+      :heading="{ badge }"
+      :tone="tone"
+      layout="split"
+      :media="{ show: true, side: 'end', align: 'start' }"
+      :landmarkLabel="landmarkLabel"
+    >
+      <Box>
+        <Button variant="default" size="default" data-testid="faq-cta">
+          {{ labels.cta }}
+        </Button>
+      </Box>
+      <template #aside>
+        <FaqDisclosures :items="items" :name="tpl('{0}-faq', id)" />
+      </template>
+    </SectionFrame>
+    <SectionFrame v-if="((layout as string) === 'aside')"
+      :id="id"
+      :title="title"
+      :lead="lead"
+      :heading="{ badge }"
+      :tone="tone"
+      layout="split"
+      :media="{ show: true, side: 'end', align: 'start' }"
+      :landmarkLabel="landmarkLabel"
+    >
+      <FaqDisclosures :items="items" :name="tpl('{0}-faq', id)" />
+      <template #aside>
+        <FaqHelp :labels="labels" :channels="channels" :landmarkLabel="landmarkLabel" />
+      </template>
+    </SectionFrame>
+    <SectionFrame v-if="((layout as string) === 'media')"
+      :id="id"
+      :title="title"
+      :lead="lead"
+      :heading="{ badge }"
+      :tone="tone"
+      layout="split"
+      :media="{ show: true, side: mediaSide, align: 'start' }"
+      :landmarkLabel="landmarkLabel"
+    >
+      <FaqDisclosures :items="items" :name="tpl('{0}-faq', id)" />
+      <Box>
+        <Button variant="default" size="default" data-testid="faq-cta">
+          {{ labels.cta }}
+        </Button>
+      </Box>
+      <template #aside>
+        <MediaFrame :alt="title" ratio="4/3" />
+      </template>
+    </SectionFrame>
+    <SectionFrame v-if="((layout as string) === 'search')"
+      :id="id"
+      :title="title"
+      :lead="lead"
+      :heading="{ badge }"
+      :tone="tone"
+      layout="split"
+      :media="{ show: true, side: mediaSide }"
+      :landmarkLabel="landmarkLabel"
+    >
+      <FaqFinder :items="items" :labels="labels" :topics="topics" />
+      <template #aside>
+        <MediaFrame :alt="title" ratio="4/3" />
+      </template>
+    </SectionFrame>
+  </template>
+</template>
diff --git a/packages/vue/ui/src/blocks/feature-accordion.vue b/packages/vue/ui/src/blocks/feature-accordion.vue
new file mode 100644
index 0000000..eb428ad
--- /dev/null
+++ b/packages/vue/ui/src/blocks/feature-accordion.vue
@@ -0,0 +1,85 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the
+  first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.
+-->
+<script lang="ts">
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureAccordionProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  expand?: "first" | "none";
+  media?: "none" | "image";
+  multiple?: boolean;
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Disclosure from "../primitives/disclosure/disclosure.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Summary from "../primitives/disclosure/summary.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  features,
+  empty = "",
+  expand = "first",
+  media = "none",
+  multiple = false,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<FeatureAccordionProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    :layout="(((media as string) === 'image') ? 'split' : 'stack')"
+    :media="{ show: ((media as string) === 'image') }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((features?.length ?? 0) === 0)" icon="layout-grid" :title="empty" />
+    <Stack v-else gap="0" align="stretch" data-testid="items">
+      <Disclosure v-for="(f, i) in features" :key="f.id"
+        variant="item"
+        :name="(multiple ? undefined : tpl('{0}-accordion', (id ?? 'accordion')))"
+        :open="(((expand as string) === 'first') && (i === 0))"
+        data-testid="item"
+      >
+        <Summary variant="item">
+          <Inline class="flex min-w-0 items-center justify-start gap-4">
+            <LucideIcon :name="f.icon" :size="20" />
+            <Inline class="text-base font-semibold">
+              {{ f.title }}
+            </Inline>
+          </Inline>
+        </Summary>
+        <Text size="sm" class="pb-4 text-muted-foreground">
+          {{ f.text }}
+        </Text>
+      </Disclosure>
+    </Stack>
+    <template #aside>
+      <MediaFrame :alt="title" ratio="4/3" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/feature-grid.types.ts b/packages/vue/ui/src/blocks/feature-grid.types.ts
new file mode 100644
index 0000000..e60c78e
--- /dev/null
+++ b/packages/vue/ui/src/blocks/feature-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type Feature = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  href?: string;
+};
diff --git a/packages/vue/ui/src/blocks/feature-grid.vue b/packages/vue/ui/src/blocks/feature-grid.vue
new file mode 100644
index 0000000..40d7d47
--- /dev/null
+++ b/packages/vue/ui/src/blocks/feature-grid.vue
@@ -0,0 +1,92 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/site.ts -->
+<!--
+  A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are
+  Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon),
+  media side (rows), density, tone.
+-->
+<script lang="ts">
+import type { Feature } from "./feature-grid.types";
+import type { HeadLink } from "../components/section-frame.types";
+
+export type FeatureGridProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  action?: HeadLink;
+  layout?: "grid" | "rows";
+  cols?: "1-2" | "1-3" | "1-4";
+  item?: "card" | "tile" | "cell";
+  mediaSide?: "end" | "start" | "alternate";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Link from "../primitives/link/link.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import FeatureCards from "../components/feature-cards.vue";
+import FeatureRows from "../components/feature-rows.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  features,
+  empty = "",
+  action,
+  layout = "grid",
+  cols = "1-3",
+  item = "card",
+  mediaSide = "end",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<FeatureGridProps>();
+</script>
+
+<template>
+  <SectionFrame v-if="((item as string) === 'cell')"
+    :id="id"
+    :tone="tone"
+    :density="density"
+    measure="fill"
+    class="py-0"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Group gap="4" align="center" justify="between" class="w-full">
+      <Title :as="2" size="sm" weight="semibold" class="leading-7" :id="(id + '-title')">
+        {{ title }}
+      </Title>
+      <Link v-if="(action?.label && action?.href)"
+        :href="action?.href"
+        variant="default"
+        :class="cn(defaults.text.tiny, 'shrink-0 font-medium leading-5')"
+        data-testid="section-action"
+      >
+        {{ action?.label }}
+      </Link>
+    </Group>
+    <EmptyState v-if="((features?.length ?? 0) === 0)" icon="layout-grid" :title="empty" />
+    <FeatureCards v-else :features="features" :cols="cols" :item="item" />
+  </SectionFrame>
+  <SectionFrame v-else
+    :id="id"
+    :title="title"
+    :action="action"
+    :tone="tone"
+    :density="density"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((features?.length ?? 0) === 0)" icon="layout-grid" :title="empty" />
+    <FeatureRows v-else-if="((layout as string) === 'rows')" :features="features" :mediaSide="mediaSide" />
+    <FeatureCards v-else :features="features" :cols="cols" :item="item" />
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/feature-showcase.vue b/packages/vue/ui/src/blocks/feature-showcase.vue
new file mode 100644
index 0000000..81e2880
--- /dev/null
+++ b/packages/vue/ui/src/blocks/feature-showcase.vue
@@ -0,0 +1,95 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/feature-showcase.ts -->
+<!--
+  Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text
+  and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4),
+  tone.
+-->
+<script lang="ts">
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureShowcaseProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  features: Feature[];
+  empty?: string;
+  more: string;
+  item?: "picture" | "panel";
+  cols?: "3" | "4";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Card from "../primitives/card/card.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  features,
+  empty = "",
+  more,
+  item = "picture",
+  cols = "3",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<FeatureShowcaseProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :lead="lead" :tone="tone" align="center" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((features?.length ?? 0) === 0)" icon="layout-grid" :title="empty" />
+    <Box v-else
+      :class="
+        (cols as string) === '4' ? 'grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4'
+        : 'grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3'
+      "
+    >
+      <Card
+        v-for="f in features"
+        :key="f.id"
+        variant="default"
+        class="h-full gap-4 overflow-hidden"
+        data-testid="showcase-card"
+      >
+        <MediaFrame v-if="((item as string) === 'picture')" :alt="f.title" />
+        <Box v-else
+          class="flex aspect-video items-center justify-center rounded bg-muted text-foreground"
+          data-testid="showcase-panel"
+        >
+          <LucideIcon :name="f.icon" :size="32" />
+        </Box>
+        <CardContent class="flex flex-1 flex-col gap-2">
+          <Title :as="3" size="base" weight="semibold">
+            {{ f.title }}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {{ f.text }}
+          </Text>
+          <MenuEntry
+            v-if="((item as string) === 'picture')"
+            :href="f.href"
+            class="mt-auto gap-2 pt-2 text-sm font-medium"
+            size="sm"
+            testid="read"
+          >
+            {{ more }}
+            <LucideIcon name="arrow-right" :size="16" />
+          </MenuEntry>
+        </CardContent>
+      </Card>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/feature-split.vue b/packages/vue/ui/src/blocks/feature-split.vue
new file mode 100644
index 0000000..3a4acfe
--- /dev/null
+++ b/packages/vue/ui/src/blocks/feature-split.vue
@@ -0,0 +1,87 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/feature-split.ts -->
+<!--
+  Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as
+  cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four
+  metric cards and the actions), mediaSide, tone.
+-->
+<script lang="ts">
+import type { Feature } from "./feature-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { LinkActions } from "./error-page.types";
+
+export type FeatureSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  features: Feature[];
+  stats: Stat[];
+  actions: LinkActions;
+  layout?: "grid" | "cards" | "stats" | "metrics";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import ActionGroup from "../components/action-group.vue";
+import FeatureCards from "../components/feature-cards.vue";
+import FeatureMetricCards from "../components/feature-metric-cards.vue";
+import FeaturePairs from "../components/feature-pairs.vue";
+import FeatureStatRows from "../components/feature-stat-rows.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 2,
+  features,
+  stats,
+  actions,
+  layout = "grid",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<FeatureSplitProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge, level }"
+    :tone="tone"
+    layout="split"
+    :media="{ show: true, side: mediaSide }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <template v-if="((layout as string) === 'grid')">
+      <FeaturePairs v-if="((features?.length ?? 0) > 0)" :features="features" />
+    </template>
+    <template v-if="((layout as string) === 'cards')">
+      <FeatureCards v-if="((features?.length ?? 0) > 0)" :features="features" cols="1-2" item="tile" />
+    </template>
+    <template v-if="((layout as string) === 'stats')">
+      <FeatureStatRows v-if="((features?.length ?? 0) > 0)" :features="features" :stats="stats" />
+    </template>
+    <template v-if="((layout as string) === 'metrics')">
+      <FeatureMetricCards v-if="((stats?.length ?? 0) > 0)" :stats="stats" />
+    </template>
+    <ActionGroup v-if="(((layout as string) === 'cards') || ((layout as string) === 'metrics'))"
+      :primary="actions.cta"
+      :primaryHref="actions.href"
+      :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+      :secondaryHref="actions.secondaryHref"
+    />
+    <template #aside>
+      <MediaFrame :alt="title" :ratio="(((layout as string) === 'stats') ? '1/1' : '4/3')" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/feature-sticky.vue b/packages/vue/ui/src/blocks/feature-sticky.vue
new file mode 100644
index 0000000..7884d4d
--- /dev/null
+++ b/packages/vue/ui/src/blocks/feature-sticky.vue
@@ -0,0 +1,85 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description
+  that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item
+  (plain, card), tone, density.
+-->
+<script lang="ts">
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureStickyProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  active?: string;
+  mediaSide?: "end" | "start";
+  item?: "plain" | "card";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  features,
+  empty = "",
+  active = "",
+  mediaSide = "end",
+  item = "plain",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<FeatureStickyProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((features?.length ?? 0) === 0)" icon="layout-grid" :title="empty" />
+    <Grid v-else cols="1-2" class="items-start gap-8" data-testid="sticky">
+      <Box
+        :class="cn(
+          'md:sticky md:top-8',
+          (((mediaSide as string) === 'start') ? 'md:order-first' : 'md:order-last')
+        )"
+        data-testid="sticky-media"
+      >
+        <MediaFrame :alt="title" ratio="4/3" />
+      </Box>
+      <Stack :gap="(((density as string) === 'compact') ? '4' : '8')" align="stretch" data-testid="items">
+        <Stack v-for="f in features" :key="f.id"
+          gap="2"
+          :class="cn(
+            (((item as string) === 'card') ? 'rounded bg-card inset-ring inset-ring-border p-6' : 'py-4'),
+            ((f.id === active) ? 'inset-ring inset-ring-foreground' : '')
+          )"
+          data-testid="item"
+          :aria-current="((f.id === active) ? 'true' : undefined)"
+        >
+          <LucideIcon :name="f.icon" :size="24" />
+          <Title :as="3" size="2xl" weight="bold">
+            {{ f.title }}
+          </Title>
+          <Text size="base" class="text-muted-foreground">
+            {{ f.text }}
+          </Text>
+        </Stack>
+      </Stack>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/feature-tabs.vue b/packages/vue/ui/src/blocks/feature-tabs.vue
new file mode 100644
index 0000000..fdbd6ef
--- /dev/null
+++ b/packages/vue/ui/src/blocks/feature-tabs.vue
@@ -0,0 +1,85 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab
+  (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the
+  picture, stack: picture below), tone, density.
+-->
+<script lang="ts">
+import type { Feature } from "./feature-grid.types";
+
+export type FeatureTabsProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  tabsLabel: string;
+  active?: string;
+  panel?: "split" | "stack";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Grid from "../primitives/grid/grid.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import Switcher from "../components/switcher.vue";
+import SwitcherItem from "../components/switcher-item.vue";
+
+const {
+  id,
+  title,
+  features,
+  empty = "",
+  tabsLabel,
+  active = "",
+  panel = "split",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<FeatureTabsProps>();
+const emit = defineEmits<{ select: [id: string] }>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((features?.length ?? 0) === 0)" icon="layout-grid" :title="empty" />
+    <Stack v-else gap="6" align="stretch">
+      <Switcher :label="tabsLabel" class="w-fit max-w-full flex-wrap">
+        <SwitcherItem v-for="(f, i) in features" :key="f.id"
+          :active="((f.id === active) || (((active as string) === '') && (i === 0)))"
+          @click="() => emit('select', f.id)"
+        >
+          {{ f.title }}
+        </SwitcherItem>
+      </Switcher>
+      <template v-for="(f, i) in features" :key="f.id">
+        <Grid v-if="((f.id === active) || (((active as string) === '') && (i === 0)))"
+          :cols="(((panel as string) === 'split') ? '1-2' : '1')"
+          class="items-center gap-8"
+          data-testid="tab-panel"
+          role="tabpanel"
+        >
+          <Stack gap="4">
+            <LucideIcon :name="f.icon" :size="24" />
+            <Title :as="3" size="2xl" weight="bold">
+              {{ f.title }}
+            </Title>
+            <Text size="base" class="text-muted-foreground">
+              {{ f.text }}
+            </Text>
+          </Stack>
+          <MediaFrame :alt="f.title" ratio="4/3" />
+        </Grid>
+      </template>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/footer-split.types.ts b/packages/vue/ui/src/blocks/footer-split.types.ts
new file mode 100644
index 0000000..031f2fc
--- /dev/null
+++ b/packages/vue/ui/src/blocks/footer-split.types.ts
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/footer-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type FooterExtras = {
+  stats: Stat[];
+  points: Feature[];
+  contacts: Feature[];
+  channels: Feature[];
+  sitemapHref?: string;
+  ctaHref?: string;
+  secondaryHref?: string;
+};
+
+export type FooterSplitLabels = {
+  title: string;
+  text: string;
+  loopTitle: string;
+  loopText: string;
+  joinTitle: string;
+  joinText: string;
+  sitemap: string;
+  points: string;
+  signup: string;
+  email: string;
+  subscribe: string;
+  note: string;
+  cta: string;
+  secondary: string;
+};
diff --git a/packages/vue/ui/src/blocks/footer-split.vue b/packages/vue/ui/src/blocks/footer-split.vue
new file mode 100644
index 0000000..15fd100
--- /dev/null
+++ b/packages/vue/ui/src/blocks/footer-split.vue
@@ -0,0 +1,138 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/footer-split.ts -->
+<!--
+  A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the
+  link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand
+  and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two
+  actions, or the community channels and figures), mediaSide, tone.
+-->
+<script lang="ts">
+import type { FooterExtras, FooterSplitLabels } from "./footer-split.types";
+import type { MegaGroup } from "./mega-menu.types";
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+
+export type FooterSplitProps = {
+  id?: string;
+  label: string;
+  brand: string;
+  tagline: string;
+  copyright: string;
+  groups: MegaGroup[];
+  extras: FooterExtras;
+  labels: FooterSplitLabels;
+  layout?: "stats" | "points" | "links" | "newsletter" | "contacts" | "channels";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Container from "../primitives/container/container.vue";
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import ActionGroup from "../components/action-group.vue";
+import FooterBrand from "../components/footer-brand.vue";
+import FooterChannels from "../components/footer-channels.vue";
+import FooterContacts from "../components/footer-contacts.vue";
+import FooterFigures from "../components/footer-figures.vue";
+import FooterGroupCards from "../components/footer-group-cards.vue";
+import FooterLinkColumns from "../components/footer-link-columns.vue";
+import FooterPoints from "../components/footer-points.vue";
+import FooterSignupCard from "../components/footer-signup-card.vue";
+import FooterSitemap from "../components/footer-sitemap.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id = "footer",
+  label,
+  brand,
+  tagline,
+  copyright,
+  groups,
+  extras,
+  labels,
+  layout = "stats",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<FooterSplitProps>();
+</script>
+
+<template>
+  <Block
+    tag="footer"
+    :class="cn('border-t border-border', (((tone as string) === 'muted') ? 'bg-muted' : ''))"
+    data-testid="footer-split"
+    :data-layout="layout"
+    :aria-label="landmarkLabel"
+  >
+    <Container :class="cn('mx-auto w-full max-w-6xl px-4', 'py-12')" data-slot="container">
+      <Stack v-if="((layout as string) === 'stats')" gap="8" align="stretch">
+        <Group gap="6" align="start" justify="between" class="flex-wrap">
+          <Stack gap="6" align="start">
+            <FooterBrand :brand="brand" :tagline="tagline" />
+            <FooterFigures :extras="extras" />
+          </Stack>
+          <FooterSitemap :href="extras.sitemapHref" :label="labels.sitemap" />
+        </Group>
+        <FooterGroupCards :label="label" :groups="groups" :landmarkLabel="landmarkLabel" />
+        <Box class="border-t border-border pt-6">
+          <Text size="sm" class="text-muted-foreground">
+            {{ copyright }}
+          </Text>
+        </Box>
+      </Stack>
+      <Box v-else class="grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
+        <MediaFrame v-if="((mediaSide as string) === 'start')" :alt="brand" ratio="4/3" />
+        <Stack gap="8" align="stretch">
+          <FooterBrand
+            v-if="(((layout as string) === 'points') || ((layout as string) === 'links'))"
+            :brand="brand"
+            :tagline="tagline"
+          />
+          <Stack v-else gap="2" align="start">
+            <Text size="xl" weight="bold">
+              {{ (((layout as string) === "newsletter") ? labels.loopTitle : (((layout as string) === "channels") ? labels.joinTitle : labels.title)) }}
+            </Text>
+            <Text size="sm" class="text-muted-foreground">
+              {{ (((layout as string) === "newsletter") ? labels.loopText : (((layout as string) === "channels") ? labels.joinText : labels.text)) }}
+            </Text>
+          </Stack>
+          <FooterPoints v-if="((layout as string) === 'points')" :extras="extras" :title="labels.points" />
+          <FooterSignupCard v-if="((layout as string) === 'newsletter')" :id="id" :labels="labels" />
+          <FooterLinkColumns
+            v-if="(((layout as string) === 'links') || ((layout as string) === 'newsletter'))"
+            :label="label"
+            :groups="groups"
+            :landmarkLabel="landmarkLabel"
+          />
+          <template v-if="((layout as string) === 'contacts')">
+            <FooterContacts :extras="extras" />
+            <ActionGroup
+              :primary="labels.cta"
+              :primaryHref="extras.ctaHref"
+              :secondary="labels.secondary"
+              :secondaryHref="extras.secondaryHref"
+            />
+          </template>
+          <template v-if="((layout as string) === 'channels')">
+            <FooterChannels :extras="extras" />
+            <FooterFigures :extras="extras" />
+          </template>
+          <Box class="border-t border-border pt-6">
+            <Text size="sm" class="text-muted-foreground">
+              {{ copyright }}
+            </Text>
+          </Box>
+        </Stack>
+        <MediaFrame v-if="((mediaSide as string) !== 'start')" :alt="brand" ratio="4/3" />
+      </Box>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/hero-classic.types.ts b/packages/vue/ui/src/blocks/hero-classic.types.ts
new file mode 100644
index 0000000..dd95f46
--- /dev/null
+++ b/packages/vue/ui/src/blocks/hero-classic.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+
+import type { CodeLine } from "../components/code-window.types";
+
+export type HeroMedia = {
+  /** what the hero shows besides the text */
+  kind?: "none" | "image" | "backdrop" | "code" | "cluster";
+  /** side of the media in the split layout */
+  side?: "end" | "start";
+  /** title of the code window */
+  codeTitle?: string;
+  /** prompt line of the code window */
+  prompt?: string;
+  /** lines of the code window */
+  lines?: CodeLine[];
+};
diff --git a/packages/vue/ui/src/blocks/hero-classic.vue b/packages/vue/ui/src/blocks/hero-classic.vue
new file mode 100644
index 0000000..d548fe1
--- /dev/null
+++ b/packages/vue/ui/src/blocks/hero-classic.vue
@@ -0,0 +1,138 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing-hero.ts -->
+<!--
+  The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster).
+  Axes: layout, media kind and side, scale, tone, density, actions mode.
+-->
+<script lang="ts">
+import type { HeroMedia } from "./hero-classic.types";
+import type { ActionSet } from "../components/cta-actions.types";
+import type { CodeLine } from "../components/code-window.types";
+import type { Topic } from "../components/topic-chips.types";
+
+export type HeroClassicProps = {
+  id: string;
+  title: string;
+  text: string;
+  level?: 1 | 2;
+  badge?: string;
+  topics?: Topic[];
+  actions?: ActionSet;
+  media?: HeroMedia;
+  layout?: "centered" | "split";
+  scale?: "default" | "display";
+  tone?: "default" | "muted" | "inverse";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import Input from "../primitives/input/input.vue";
+import Label from "../primitives/label/label.vue";
+import ActionGroup from "../components/action-group.vue";
+import Backdrop from "../components/backdrop.vue";
+import CodeWindow from "../components/code-window.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import TopicChips from "../components/topic-chips.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  level = 1,
+  badge,
+  topics,
+  actions,
+  media,
+  layout = "centered",
+  scale = "default",
+  tone = "default",
+  density = "roomy",
+  landmarkLabel,
+} = defineProps<HeroClassicProps>();
+const mediaKind = computed(() => media?.kind ?? "none");
+const mediaSide = computed(() => media?.side ?? "end");
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="text"
+    :heading="{ level, scale, badge }"
+    :layout="(((layout as string) === 'split') ? 'split' : 'stack')"
+    :align="(((layout as string) === 'split') ? 'start' : 'center')"
+    :media="{
+      show: (((mediaKind as string) === 'image') || ((mediaKind as string) === 'code') || ((mediaKind as string) === 'cluster')),
+      side: mediaSide,
+    }"
+    :tone="tone"
+    :density="density"
+    :class="
+      (((mediaKind as string) === 'backdrop') ? 'image' : 'none') === 'image' ? 'relative isolate overflow-hidden'
+      : ''
+    "
+    :landmarkLabel="landmarkLabel"
+  >
+    <Backdrop :kind="(((mediaKind as string) === 'backdrop') ? 'image' : 'none')" :alt="title" />
+    <template v-if="actions?.cta">
+      <Box v-if="(actions?.mode === 'form')"
+        :class="cn('w-full max-w-xl', (((layout as string) === 'centered') ? 'mx-auto' : ''))"
+        data-testid="email-form"
+      >
+        <Label :for="tpl('{0}-email', id)" class="sr-only">
+          {{ actions?.emailLabel }}
+        </Label>
+        <Group gap="2" align="start" class="w-full flex-wrap">
+          <Input
+            type="text"
+            name="prompt"
+            class="min-w-0 flex-1"
+            :placeholder="actions?.emailLabel"
+            :id="tpl('{0}-email', id)"
+            data-testid="field"
+          />
+          <Button variant="default" size="default" :href="actions?.href" data-testid="submit">
+            {{ actions?.cta }}
+          </Button>
+        </Group>
+      </Box>
+      <ActionGroup v-else
+        :primary="actions?.cta"
+        :primaryHref="actions?.href"
+        :secondary="((actions?.mode === 'two') ? actions?.secondary : undefined)"
+        :secondaryHref="actions?.secondaryHref"
+        :align="(((layout as string) === 'centered') ? 'center' : 'start')"
+      />
+    </template>
+    <TopicChips v-if="(topics && ((topics?.length ?? 0) > 0))" :topics="topics" />
+    <template #aside>
+      <CodeWindow
+        v-if="(((mediaKind as string) === 'code') && media?.lines && ((media?.lines?.length ?? 0) > 0) && media?.codeTitle && media?.prompt)"
+        :title="media?.codeTitle"
+        :prompt="media?.prompt"
+        :lines="media?.lines"
+      />
+      <Grid v-if="((mediaKind as string) === 'cluster')" cols="3" class="items-end gap-4" data-testid="cluster">
+        <Box :class="cn('w-full', '')">
+          <MediaFrame :alt="title" ratio="3/4" />
+        </Box>
+        <Box :class="cn('w-full', '-translate-y-4')">
+          <MediaFrame :alt="title" ratio="4/3" />
+        </Box>
+        <Box :class="cn('w-full', '')">
+          <MediaFrame :alt="title" ratio="3/4" />
+        </Box>
+      </Grid>
+      <MediaFrame v-if="(((mediaKind as string) === 'image'))" :alt="title" ratio="4/3" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/hero-prompt.types.ts b/packages/vue/ui/src/blocks/hero-prompt.types.ts
new file mode 100644
index 0000000..816d54f
--- /dev/null
+++ b/packages/vue/ui/src/blocks/hero-prompt.types.ts
@@ -0,0 +1,26 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing-hero.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type HeroComposer = {
+  /** attachment chip label */
+  attachLabel?: string;
+  /** model pill label */
+  modelLabel?: string;
+};
+
+export type HeroNav = {
+  /** brand word of the head row */
+  brand?: string;
+  /** menu links of the head row */
+  links?: NavLink[];
+  /** id of the current link */
+  current?: string;
+  login?: string;
+  loginHref?: string;
+  /** skip link text */
+  skip?: string;
+  /** accessible name of the menu */
+  label?: string;
+};
diff --git a/packages/vue/ui/src/blocks/hero-prompt.vue b/packages/vue/ui/src/blocks/hero-prompt.vue
new file mode 100644
index 0000000..b2e15e9
--- /dev/null
+++ b/packages/vue/ui/src/blocks/hero-prompt.vue
@@ -0,0 +1,109 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing-hero.ts -->
+<!--
+  A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic
+  pills.
+-->
+<script lang="ts">
+import type { HeroComposer, HeroNav } from "./hero-prompt.types";
+import type { ActionSet } from "../components/cta-actions.types";
+import type { NavLink } from "./nav-bar.types";
+import type { Topic } from "../components/topic-chips.types";
+
+export type HeroPromptProps = {
+  title: string;
+  level?: 1 | 2;
+  badge?: string;
+  badgeMark?: string;
+  actions?: ActionSet;
+  composer?: HeroComposer;
+  nav?: HeroNav;
+  topics?: Topic[];
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Container from "../primitives/container/container.vue";
+import Stack from "../primitives/stack/stack.vue";
+import ActionGroup from "../components/action-group.vue";
+import HeroBadge from "../components/hero-badge.vue";
+import HeroHead from "../components/hero-head.vue";
+import PromptComposer from "../components/prompt-composer.vue";
+import TopicChips from "../components/topic-chips.vue";
+import WeightedTitle from "../components/weighted-title.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const {
+  title,
+  level = 1,
+  badge,
+  badgeMark,
+  actions,
+  composer,
+  nav,
+  topics,
+  density = "roomy",
+  landmarkLabel,
+} = defineProps<HeroPromptProps>();
+</script>
+
+<template>
+  <Block
+    tag="section"
+    :class="cn(
+      'flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70',
+      defaults.hero.band
+    )"
+    :aria-labelledby="(landmarkLabel ? undefined : 'home-hero-title')"
+    data-testid="section"
+    data-tone="inverse"
+    :data-density="density"
+    data-chrome="nav"
+    :aria-label="landmarkLabel"
+  >
+    <Container :class="cn('mx-auto w-full px-8', defaults.hero.container)" data-slot="container">
+      <Stack gap="0" align="stretch">
+        <HeroHead
+          :brand="nav?.brand"
+          :links="nav?.links"
+          :current="nav?.current"
+          :login="nav?.login"
+          :loginHref="nav?.loginHref"
+          :skip="nav?.skip"
+          :navLabel="nav?.label"
+          :cta="actions?.cta"
+          :href="actions?.href"
+          :landmarkLabel="landmarkLabel"
+        />
+        <Stack
+          gap="0"
+          align="center"
+          :class="cn('mx-auto w-full pt-24 pb-16', defaults.hero.column)"
+          data-testid="hero-column"
+        >
+          <HeroBadge v-if="badge" :label="badge" :mark="badgeMark" />
+          <WeightedTitle id="home-hero-title" :title="title" :weights="defaults.hero.titleWeights" :level="level" />
+          <PromptComposer v-if="(actions?.mode === 'form')"
+            :label="actions?.emailLabel"
+            :attachLabel="composer?.attachLabel"
+            :modelLabel="composer?.modelLabel"
+            :send="actions?.cta"
+            :href="actions?.href"
+          />
+          <ActionGroup v-else-if="actions?.cta"
+            :primary="actions?.cta"
+            :primaryHref="actions?.href"
+            :secondary="((actions?.mode === 'two') ? actions?.secondary : undefined)"
+            :secondaryHref="actions?.secondaryHref"
+            :align="(true ? 'center' : 'start')"
+          />
+          <TopicChips v-if="(topics && ((topics?.length ?? 0) > 0))" :topics="topics" tone="inverse" />
+        </Stack>
+      </Stack>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/hero-split.types.ts b/packages/vue/ui/src/blocks/hero-split.types.ts
new file mode 100644
index 0000000..6216eb8
--- /dev/null
+++ b/packages/vue/ui/src/blocks/hero-split.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/hero-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+import type { Quote } from "./testimonial-grid.types";
+import type { OfferCard } from "./store-hero.types";
+import type { Plan } from "./pricing-card.types";
+
+export type HeroContent = {
+  stats: Stat[];
+  features: Feature[];
+  people: Quote[];
+  plans: Plan[];
+  proof: string;
+  card: OfferCard;
+};
diff --git a/packages/vue/ui/src/blocks/hero-split.vue b/packages/vue/ui/src/blocks/hero-split.vue
new file mode 100644
index 0000000..f527814
--- /dev/null
+++ b/packages/vue/ui/src/blocks/hero-split.vue
@@ -0,0 +1,78 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/hero-split.ts -->
+<!--
+  A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes:
+  extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote
+  over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with
+  captions, plans: two plan cards on the picture), mediaSide, tone.
+-->
+<script lang="ts">
+import type { HeroContent } from "./hero-split.types";
+import type { Stat } from "./stats-band.types";
+import type { Feature } from "./feature-grid.types";
+import type { Quote } from "./testimonial-grid.types";
+import type { OfferCard } from "./store-hero.types";
+import type { Plan } from "./pricing-card.types";
+import type { LinkActions } from "./error-page.types";
+
+export type HeroSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  actions: LinkActions;
+  content: HeroContent;
+  extra?: "stats" | "avatars" | "minis" | "quote" | "none";
+  media?: "picture" | "card" | "grid" | "plans";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import ActionGroup from "../components/action-group.vue";
+import HeroSplitExtras from "../components/hero-split-extras.vue";
+import HeroSplitMedia from "../components/hero-split-media.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 1,
+  actions,
+  content,
+  extra = "stats",
+  media = "picture",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<HeroSplitProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge, level }"
+    layout="split"
+    :media="{ show: true, side: mediaSide }"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <HeroSplitExtras :content="content" :extra="extra" />
+    <ActionGroup
+      :primary="actions.cta"
+      :primaryHref="actions.href"
+      :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+      :secondaryHref="actions.secondaryHref"
+    />
+    <template #aside>
+      <HeroSplitMedia :content="content" :alt="title" :media="media" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/icon-wall.vue b/packages/vue/ui/src/blocks/icon-wall.vue
new file mode 100644
index 0000000..8f61a17
--- /dev/null
+++ b/packages/vue/ui/src/blocks/icon-wall.vue
@@ -0,0 +1,76 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the
+  label, chip: icon beside it), tone, density.
+-->
+<script lang="ts">
+import type { Feature } from "./feature-grid.types";
+
+export type IconWallProps = {
+  id: string;
+  title: string;
+  features: Feature[];
+  empty?: string;
+  cols?: "3" | "4" | "6";
+  item?: "tile" | "chip";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, fitCols } from "../utils";
+
+const {
+  id,
+  title,
+  features,
+  empty = "",
+  cols = "4",
+  item = "tile",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<IconWallProps>();
+const askedCols = computed(() =>
+  ((item as string) === "chip") && ((cols as string) === "6") ? "2-6"
+  : (cols as string) === "2" ? "2"
+  : (cols as string) === "3" ? "2-3"
+  : (cols as string) === "4" ? "2-4"
+  : "3-6"
+);
+const wallCols = computed(() => fitCols(askedCols.value, (features?.length ?? 0)));
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((features?.length ?? 0) === 0)" icon="layout-grid" :title="empty" />
+    <Grid v-else :cols="wallCols" class="gap-4" data-testid="items">
+      <Box v-for="f in features" :key="f.id"
+        :class="cn(
+          'flex items-center gap-2',
+          'rounded bg-card inset-ring inset-ring-border',
+          (
+            (item as string) === 'tile' ? cn('flex-col justify-center text-center', (((density as string) === 'compact') ? 'p-4' : 'p-6'))
+            : 'px-4 py-2'
+          )
+        )"
+        data-testid="item"
+      >
+        <LucideIcon :name="f.icon" :size="(((item as string) === 'tile') ? 24 : 16)" />
+        <Text size="sm" weight="semibold">
+          {{ f.title }}
+        </Text>
+      </Box>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/job-board.types.ts b/packages/vue/ui/src/blocks/job-board.types.ts
new file mode 100644
index 0000000..94f02f7
--- /dev/null
+++ b/packages/vue/ui/src/blocks/job-board.types.ts
@@ -0,0 +1,29 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Job = {
+  id: string;
+  title: string;
+  dept: string;
+  location: string;
+  type: string;
+  salary: string;
+  posted: string;
+  href?: string;
+};
+
+export type Department = {
+  id: string;
+  name: string;
+};
+
+export type JobLabels = {
+  apply: string;
+  caption: string;
+  role: string;
+  team: string;
+  location: string;
+  type: string;
+  salary: string;
+  count: string;
+};
diff --git a/packages/vue/ui/src/blocks/job-board.vue b/packages/vue/ui/src/blocks/job-board.vue
new file mode 100644
index 0000000..333d7b5
--- /dev/null
+++ b/packages/vue/ui/src/blocks/job-board.vue
@@ -0,0 +1,97 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/people.ts -->
+<!--
+  Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place,
+  the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide),
+  tone.
+-->
+<script lang="ts">
+import type { Job, Department, JobLabels } from "./job-board.types";
+
+export type JobBoardProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  jobs: Job[];
+  departments: Department[];
+  labels: JobLabels;
+  layout?: "grid" | "grouped" | "table";
+  salary?: "show" | "hide";
+  tone?: "default" | "muted";
+  empty?: string;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Group from "../primitives/group/group.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import JobCards from "../components/job-cards.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  jobs,
+  departments,
+  labels,
+  layout = "grid",
+  salary = "hide",
+  tone = "default",
+  empty = "",
+  landmarkLabel,
+} = defineProps<JobBoardProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :tone="tone"
+    :measure="(((layout as string) === 'grouped') ? '3xl' : 'default')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((jobs?.length ?? 0) === 0)" icon="briefcase" :title="empty" />
+    <Stack v-else-if="((layout as string) === 'grouped')" gap="8" align="stretch" data-testid="groups">
+      <Stack v-for="d in departments" :key="d.id" gap="2" align="stretch" data-testid="group">
+        <Group gap="4" align="baseline" justify="between">
+          <Title :as="3" size="lg" weight="bold">
+            {{ d.name }}
+          </Title>
+          <Text size="xs" class="text-muted-foreground">
+            {{ tpl(labels.count, (jobs.filter((i) => !d.id || i["dept"] === d.id)?.length ?? 0)) }}
+          </Text>
+        </Group>
+        <List tag="ul" class="flex flex-col">
+          <ListItem v-for="j in jobs.filter((i) => !d.id || i['dept'] === d.id)" :key="j.id"
+            class="flex flex-wrap items-center justify-between gap-4 border-b border-border py-4"
+            data-testid="item"
+          >
+            <Stack gap="0">
+              <MenuEntry :href="j.href" class="font-medium">
+                {{ j.title }}
+              </MenuEntry>
+              <Text size="xs" class="text-muted-foreground">
+                {{ tpl("{0}, {1}", j.location, j.type) }}
+              </Text>
+            </Stack>
+            <Badge variant="outline" size="default">
+              {{ j.type }}
+            </Badge>
+          </ListItem>
+        </List>
+      </Stack>
+    </Stack>
+    <JobCards v-else :jobs="jobs" :departments="departments" :labels="labels" :layout="layout" :salary="salary" />
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/kanban-board.types.ts b/packages/vue/ui/src/blocks/kanban-board.types.ts
new file mode 100644
index 0000000..ec9ee64
--- /dev/null
+++ b/packages/vue/ui/src/blocks/kanban-board.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/workspace.ts
+
+export type Lane = {
+  id: string;
+  key: string;
+  title: string;
+};
+
+export type BoardCard = {
+  id: string;
+  lane: string;
+  title: string;
+  tag: string;
+  who: string;
+};
diff --git a/packages/vue/ui/src/blocks/kanban-board.vue b/packages/vue/ui/src/blocks/kanban-board.vue
new file mode 100644
index 0000000..9edba21
--- /dev/null
+++ b/packages/vue/ui/src/blocks/kanban-board.vue
@@ -0,0 +1,103 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/workspace.ts -->
+<!--
+  Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the
+  person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card
+  between lanes is a port contract.
+-->
+<script lang="ts">
+import type { Lane, BoardCard } from "./kanban-board.types";
+
+export type KanbanBoardProps = {
+  id: string;
+  title: string;
+  lanes: Lane[];
+  empty?: string;
+  cards: BoardCard[];
+  countLabel: string;
+  card?: "simple" | "detail";
+  cols?: "2" | "3";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import Pill from "../components/pill.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lanes,
+  empty = "",
+  cards,
+  countLabel,
+  card = "detail",
+  cols = "3",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<KanbanBoardProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((lanes?.length ?? 0) === 0)" icon="kanban" :title="empty" />
+    <Grid
+      v-else
+      :cols="(((cols as string) === '2') ? '1-2' : '1-3')"
+      class="items-start gap-4"
+      data-testid="lanes"
+    >
+      <Stack
+        v-for="lane in lanes"
+        :key="lane.id"
+        gap="4"
+        align="stretch"
+        class="rounded bg-muted p-4"
+        data-testid="lane"
+      >
+        <Group gap="2" align="center" justify="between">
+          <Title :as="3" size="base" weight="bold">
+            {{ lane.title }}
+          </Title>
+          <Text size="xs" class="text-muted-foreground">
+            {{ tpl(countLabel, (cards.filter((i) => !lane.key || i["lane"] === lane.key)?.length ?? 0)) }}
+          </Text>
+        </Group>
+        <List class="m-0 flex list-none flex-col gap-2 p-0">
+          <ListItem v-for="c in cards.filter((i) => !lane.key || i['lane'] === lane.key)" :key="c.id"
+            :class="cn(
+              'flex flex-col rounded bg-card inset-ring inset-ring-border',
+              (((density as string) === 'compact') ? 'gap-2 p-2' : 'gap-2 p-4')
+            )"
+            data-testid="item"
+          >
+            <Text size="sm" weight="semibold">
+              {{ c.title }}
+            </Text>
+            <Group v-if="((card as string) === 'detail')" gap="2" align="center" justify="between" class="flex-wrap">
+              <Pill tone="blue" icon="tag">
+                {{ c.tag }}
+              </Pill>
+              <Text size="xs" class="text-muted-foreground">
+                {{ c.who }}
+              </Text>
+            </Group>
+          </ListItem>
+        </List>
+      </Stack>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/logo-cloud.types.ts b/packages/vue/ui/src/blocks/logo-cloud.types.ts
new file mode 100644
index 0000000..e2e2d33
--- /dev/null
+++ b/packages/vue/ui/src/blocks/logo-cloud.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Logo = {
+  id: string;
+  name: string;
+  icon: string;
+};
diff --git a/packages/vue/ui/src/blocks/logo-cloud.vue b/packages/vue/ui/src/blocks/logo-cloud.vue
new file mode 100644
index 0000000..abcc501
--- /dev/null
+++ b/packages/vue/ui/src/blocks/logo-cloud.vue
@@ -0,0 +1,102 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!--
+  A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row),
+  columns (2, 3, 4), item (name, icon only, tile), density, tone.
+-->
+<script lang="ts">
+import type { Logo } from "./logo-cloud.types";
+
+export type LogoCloudProps = {
+  id: string;
+  title: string;
+  logos: Logo[];
+  empty?: string;
+  layout?: "grid" | "row";
+  cols?: "2" | "3" | "4";
+  item?: "name" | "icon" | "tile";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import LogoRibbon from "../blocks/logo-ribbon.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  logos,
+  empty = "",
+  layout = "grid",
+  cols = "4",
+  item = "name",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<LogoCloudProps>();
+</script>
+
+<template>
+  <SectionFrame v-if="((logos?.length ?? 0) === 0)"
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    align="center"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState icon="building-2" :title="empty" />
+  </SectionFrame>
+  <LogoRibbon v-else-if="((layout as string) === 'row')"
+    :id="id"
+    :title="title"
+    :logos="logos"
+    :tone="tone"
+    :density="density"
+    :landmarkLabel="landmarkLabel"
+  />
+  <SectionFrame v-else
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    align="center"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Grid
+      :cols="
+        (cols as string) === '2' ? '2'
+        : (cols as string) === '3' ? '2-3'
+        : (cols as string) === '4' ? '2-4'
+        : '3-6'
+      "
+      class="gap-4"
+      data-testid="items"
+    >
+      <Group v-for="logo in logos" :key="logo.id"
+        gap="2"
+        align="center"
+        justify="center"
+        :class="cn(
+          'text-muted-foreground',
+          (((item as string) === 'tile') ? 'flex-col rounded p-4 inset-ring inset-ring-border' : '')
+        )"
+        data-testid="item"
+      >
+        <LucideIcon :name="logo.icon" :size="24" />
+        <Text size="sm" weight="semibold" :class="(((item as string) === 'icon') ? 'sr-only' : '')">
+          {{ logo.name }}
+        </Text>
+      </Group>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/logo-ribbon.vue b/packages/vue/ui/src/blocks/logo-ribbon.vue
new file mode 100644
index 0000000..c49f34b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/logo-ribbon.vue
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!-- A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset. -->
+<script lang="ts">
+import type { Logo } from "./logo-cloud.types";
+
+export type LogoRibbonProps = {
+  id: string;
+  title: string;
+  logos: Logo[];
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Title from "../primitives/title/title.vue";
+import LogoSlot from "../components/logo-slot.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  logos,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<LogoRibbonProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :tone="tone"
+    :density="density"
+    measure="fill"
+    align="center"
+    class="py-0"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Stack gap="6" align="center" data-testid="logos-block">
+      <Title :as="2" size="xl" weight="semibold" class="leading-7" :id="(id + '-title')">
+        {{ title }}
+      </Title>
+      <Group
+        gap="0"
+        justify="center"
+        align="start"
+        :class="cn('flex w-full flex-wrap', defaults.logos.row)"
+        data-testid="items"
+      >
+        <LogoSlot v-for="logo in logos" :key="logo.id" :name="logo.name" :icon="logo.icon" />
+      </Group>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/media-list.types.ts b/packages/vue/ui/src/blocks/media-list.types.ts
new file mode 100644
index 0000000..54863b7
--- /dev/null
+++ b/packages/vue/ui/src/blocks/media-list.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/media-list.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Step } from "./steps-list.types";
+import type { Post } from "./post-card.types";
+import type { Category } from "./category-nav.types";
+import type { Feature } from "./feature-grid.types";
+import type { Review } from "./review-list.types";
+
+export type MediaExtras = {
+  stats: Stat[];
+  steps: Step[];
+  posts: Post[];
+  topics: Category[];
+  channels: Feature[];
+  reviews: Review[];
+};
+
+export type MediaListLabels = {
+  list: string;
+  count: string;
+  minutes: string;
+  featured: string;
+  rating: string;
+  figures: string;
+};
diff --git a/packages/vue/ui/src/blocks/media-list.vue b/packages/vue/ui/src/blocks/media-list.vue
new file mode 100644
index 0000000..b6779c1
--- /dev/null
+++ b/packages/vue/ui/src/blocks/media-list.vue
@@ -0,0 +1,105 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/media-list.ts -->
+<!--
+  A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures
+  and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts,
+  contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.
+-->
+<script lang="ts">
+import type { MediaExtras, MediaListLabels } from "./media-list.types";
+import type { Stat } from "./stats-band.types";
+import type { Step } from "./steps-list.types";
+import type { Post } from "./post-card.types";
+import type { Category } from "./category-nav.types";
+import type { Feature } from "./feature-grid.types";
+import type { Review } from "./review-list.types";
+import type { LinkActions } from "./error-page.types";
+
+export type MediaListProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  extras: MediaExtras;
+  labels: MediaListLabels;
+  actions: LinkActions;
+  layout?: "figures" | "proof" | "steps" | "posts" | "topics" | "contact";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import ActionGroup from "../components/action-group.vue";
+import MediaContacts from "../components/media-contacts.vue";
+import MediaFigures from "../components/media-figures.vue";
+import MediaFrame from "../components/media-frame.vue";
+import MediaPosts from "../components/media-posts.vue";
+import MediaReview from "../components/media-review.vue";
+import MediaSteps from "../components/media-steps.vue";
+import MediaTopics from "../components/media-topics.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  extras,
+  labels,
+  actions,
+  layout = "figures",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<MediaListProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    layout="split"
+    :media="{ show: true, side: mediaSide }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <template v-if="(((layout as string) === 'figures') || ((layout as string) === 'proof'))">
+      <MediaFigures
+        v-if="((extras.stats?.length ?? 0) > 0)"
+        :extras="extras"
+        :mode="(((layout as string) === 'proof') ? 'row' : 'grid')"
+      />
+    </template>
+    <template v-if="((layout as string) === 'proof')">
+      <MediaReview v-if="((extras.reviews?.length ?? 0) > 0)" :extras="extras" :labels="labels" />
+    </template>
+    <template v-if="((layout as string) === 'steps')">
+      <MediaSteps v-if="((extras.steps?.length ?? 0) > 0)" :extras="extras" :labels="labels" />
+    </template>
+    <template v-if="((layout as string) === 'posts')">
+      <MediaPosts v-if="((extras.posts?.length ?? 0) > 0)" :extras="extras" :labels="labels" />
+    </template>
+    <template v-if="((layout as string) === 'topics')">
+      <MediaTopics v-if="((extras.topics?.length ?? 0) > 0)" :extras="extras" :labels="labels" />
+    </template>
+    <template v-if="((layout as string) === 'contact')">
+      <MediaContacts v-if="((extras.channels?.length ?? 0) > 0)" :extras="extras" :labels="labels" />
+    </template>
+    <ActionGroup v-if="((layout as string) !== 'contact')"
+      :primary="actions.cta"
+      :primaryHref="actions.href"
+      :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+      :secondaryHref="actions.secondaryHref"
+    />
+    <template #aside>
+      <MediaFrame
+        :alt="title"
+        :ratio="((((layout as string) === 'steps') || ((layout as string) === 'topics')) ? '1/1' : '4/3')"
+      />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/mega-menu.types.ts b/packages/vue/ui/src/blocks/mega-menu.types.ts
new file mode 100644
index 0000000..8177392
--- /dev/null
+++ b/packages/vue/ui/src/blocks/mega-menu.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type MegaGroup = {
+  id: string;
+  title: string;
+  icon: string;
+  links: NavLink[];
+  href?: string;
+};
diff --git a/packages/vue/ui/src/blocks/mega-menu.vue b/packages/vue/ui/src/blocks/mega-menu.vue
new file mode 100644
index 0000000..7f2c1fa
--- /dev/null
+++ b/packages/vue/ui/src/blocks/mega-menu.vue
@@ -0,0 +1,147 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional
+  promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed),
+  cols (2, 3), promo (none, card).
+-->
+<script lang="ts">
+import type { MegaGroup } from "./mega-menu.types";
+import type { NavLink } from "./nav-bar.types";
+
+export type MegaMenuProps = {
+  label: string;
+  brand: string;
+  brandHref?: string;
+  trigger: string;
+  links: NavLink[];
+  groups: MegaGroup[];
+  promoTitle?: string;
+  promoText?: string;
+  panel?: "open" | "closed";
+  cols?: "2" | "3";
+  promo?: "none" | "card";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import ButtonPlain from "../primitives/button-plain/button-plain.vue";
+import Container from "../primitives/container/container.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  label,
+  brand,
+  brandHref,
+  trigger,
+  links,
+  groups,
+  promoTitle,
+  promoText,
+  panel = "open",
+  cols = "3",
+  promo = "none",
+  landmarkLabel,
+} = defineProps<MegaMenuProps>();
+</script>
+
+<template>
+  <Block
+    tag="header"
+    class="relative border-b border-border bg-background"
+    data-testid="mega-menu"
+    :aria-label="landmarkLabel"
+  >
+    <Container
+      :class="cn('mx-auto w-full max-w-6xl px-4', 'flex flex-wrap items-center gap-6 py-4')"
+      data-slot="container"
+    >
+      <MenuEntry :href="brandHref" class="text-lg font-medium" testid="brand">
+        {{ brand }}
+      </MenuEntry>
+      <NavBlock :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', label, landmarkLabel)) : label)" class="flex-1">
+        <Group gap="4" align="center" class="flex-wrap">
+          <ButtonPlain
+            type="button"
+            class="inline-flex items-center gap-2 text-sm font-semibold"
+            :aria-expanded="(((panel as string) === 'open') ? 'true' : 'false')"
+            data-testid="mega-trigger"
+          >
+            {{ trigger }}
+            <LucideIcon name="chevron-down" :size="16" />
+          </ButtonPlain>
+          <MenuEntry
+            v-for="l in links"
+            :key="l.id"
+            :href="l.href"
+            class="text-sm"
+            :current="(l.id === '')"
+            testid="nav-link"
+          >
+            {{ l.name }}
+          </MenuEntry>
+        </Group>
+      </NavBlock>
+    </Container>
+  </Block>
+  <Box v-if="((panel as string) === 'open')" class="border-t border-border bg-card" data-testid="mega-panel">
+    <Container
+      :class="cn(
+        'mx-auto w-full max-w-6xl px-4',
+        'grid gap-8 py-6',
+        (((promo as string) === 'card') ? 'md:grid-cols-[1fr_16rem]' : '')
+      )"
+      data-slot="container"
+    >
+      <Grid
+        v-if="((groups?.length ?? 0) > 0)"
+        :cols="(((cols as string) === '2') ? '1-2' : '1-3')"
+        class="gap-6"
+        data-testid="items"
+      >
+        <Stack v-for="g in groups" :key="g.id" gap="2" data-testid="item">
+          <Group gap="2" align="center">
+            <LucideIcon :name="g.icon" :size="16" />
+            <Text size="sm" weight="semibold">
+              {{ g.title }}
+            </Text>
+          </Group>
+          <List class="m-0 flex list-none flex-col gap-2 p-0">
+            <ListItem v-for="item in g.links" :key="item.id">
+              <MenuEntry :href="item.href" class="text-sm text-muted-foreground">
+                {{ item.name }}
+              </MenuEntry>
+            </ListItem>
+          </List>
+        </Stack>
+      </Grid>
+      <Stack
+        v-if="((promo as string) === 'card')"
+        gap="2"
+        class="rounded bg-card inset-ring inset-ring-border p-4"
+        data-testid="promo"
+      >
+        <MediaFrame :alt="(promoTitle ?? '')" ratio="4/3" />
+        <Text size="base" weight="semibold">
+          {{ promoTitle }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ promoText }}
+        </Text>
+      </Stack>
+    </Container>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/blocks/metric-row.types.ts b/packages/vue/ui/src/blocks/metric-row.types.ts
new file mode 100644
index 0000000..3537e9f
--- /dev/null
+++ b/packages/vue/ui/src/blocks/metric-row.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/dashboard.ts
+
+export type Metric = {
+  id: string;
+  label: string;
+  value: string;
+  icon: string;
+  hint: string;
+};
diff --git a/packages/vue/ui/src/blocks/metric-row.vue b/packages/vue/ui/src/blocks/metric-row.vue
new file mode 100644
index 0000000..cd27dff
--- /dev/null
+++ b/packages/vue/ui/src/blocks/metric-row.vue
@@ -0,0 +1,72 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes:
+  columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).
+-->
+<script lang="ts">
+import type { Metric } from "./metric-row.types";
+
+export type MetricRowProps = {
+  id: string;
+  title: string;
+  metrics: Metric[];
+  empty?: string;
+  cols?: "2" | "4";
+  item?: "tile" | "compact";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import StatTile from "../components/stat-tile.vue";
+
+const {
+  id,
+  title,
+  metrics,
+  empty = "",
+  cols = "4",
+  item = "tile",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<MetricRowProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((metrics?.length ?? 0) === 0)" icon="gauge" :title="empty" />
+    <Grid v-else :cols="(((cols as string) === '2') ? '1-2' : '1-4')" class="gap-4" data-testid="items">
+      <template v-for="m in metrics" :key="m.id">
+        <Box v-if="((item as string) === 'tile')" data-testid="item">
+          <StatTile :label="m.label" :value="m.value" :icon="m.icon" :hint="m.hint" />
+        </Box>
+        <Stack v-else gap="0" class="rounded bg-card p-4 inset-ring inset-ring-border" data-testid="item">
+          <Group gap="2" align="center" class="text-muted-foreground">
+            <LucideIcon :name="m.icon" :size="16" />
+            <Text size="xs">
+              {{ m.label }}
+            </Text>
+          </Group>
+          <Text size="2xl" weight="bold">
+            {{ m.value }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ m.hint }}
+          </Text>
+        </Stack>
+      </template>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/milestone-timeline.types.ts b/packages/vue/ui/src/blocks/milestone-timeline.types.ts
new file mode 100644
index 0000000..76e6bea
--- /dev/null
+++ b/packages/vue/ui/src/blocks/milestone-timeline.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Milestone = {
+  id: string;
+  date: string;
+  title: string;
+  text: string;
+  tag: string;
+};
diff --git a/packages/vue/ui/src/blocks/milestone-timeline.vue b/packages/vue/ui/src/blocks/milestone-timeline.vue
new file mode 100644
index 0000000..95f0ea3
--- /dev/null
+++ b/packages/vue/ui/src/blocks/milestone-timeline.vue
@@ -0,0 +1,104 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/work.ts -->
+<!--
+  Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line
+  beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone,
+  density.
+-->
+<script lang="ts">
+import type { Milestone } from "./milestone-timeline.types";
+
+export type MilestoneTimelineProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  milestones: Milestone[];
+  empty?: string;
+  layout?: "split" | "stacked" | "row";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  milestones,
+  empty = "",
+  layout = "split",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<MilestoneTimelineProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :tone="tone"
+    :density="density"
+    :layout="(((layout as string) === 'split') ? 'split' : 'stack')"
+    :media="{ show: ((layout as string) === 'split'), side: 'start', align: 'start' }"
+    :measure="(((layout as string) === 'stacked') ? '2xl' : 'default')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((milestones?.length ?? 0) === 0)" icon="milestone" :title="empty" />
+    <List v-else
+      tag="ol"
+      :class="
+        (layout as string) === 'row' ? 'grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4'
+        : 'flex flex-col gap-8 border-l border-border'
+      "
+      data-testid="items"
+    >
+      <ListItem v-for="m in milestones" :key="m.id"
+        :class="
+          (layout as string) === 'row' ? 'relative flex flex-col gap-2 pt-6'
+          : 'relative flex flex-col gap-2 pl-6'
+        "
+        data-testid="item"
+      >
+        <Inline
+          :class="
+            (layout as string) === 'row' ? 'absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary'
+            : 'absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary'
+          "
+          aria-hidden="true"
+        />
+        <Group gap="2" align="center">
+          <Text size="sm" weight="semibold">
+            {{ m.date }}
+          </Text>
+          <Badge variant="outline" size="sm">
+            {{ m.tag }}
+          </Badge>
+        </Group>
+        <Title :as="3" size="lg" weight="bold">
+          {{ m.title }}
+        </Title>
+        <Text size="sm" class="text-muted-foreground">
+          {{ m.text }}
+        </Text>
+      </ListItem>
+    </List>
+    <template #aside>
+      <MediaFrame :alt="title" ratio="3/4" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/nav-bar.types.ts b/packages/vue/ui/src/blocks/nav-bar.types.ts
new file mode 100644
index 0000000..459db5a
--- /dev/null
+++ b/packages/vue/ui/src/blocks/nav-bar.types.ts
@@ -0,0 +1,31 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+export type NavLink = {
+  id: string;
+  name: string;
+  icon: string;
+  href?: string;
+};
+
+export type NavBarActions = {
+  /** cta: show the call to action */
+  mode?: "none" | "cta";
+  /** text of the call to action */
+  cta?: string;
+  /** href of the call to action */
+  href?: string;
+  /** text of the login link; none: no login */
+  login?: string;
+  /** href of the login link; none: a button with no address */
+  loginHref?: string;
+  /** text of the theme button; none: no button */
+  themeLabel?: string;
+};
+
+export type NavSearch = {
+  /** name and placeholder of the search field (layout search) */
+  label: string;
+  /** the keys that open the search, shown in the field */
+  shortcut: string;
+};
diff --git a/packages/vue/ui/src/blocks/nav-bar.vue b/packages/vue/ui/src/blocks/nav-bar.vue
new file mode 100644
index 0000000..a6e62d6
--- /dev/null
+++ b/packages/vue/ui/src/blocks/nav-bar.vue
@@ -0,0 +1,139 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the
+  middle with the links on both sides; search: a search field with its shortcut in the middle), over (none,
+  media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark
+  hero band). Turning solid on scroll is a port contract.
+-->
+<script lang="ts">
+import type { NavLink, NavBarActions, NavSearch } from "./nav-bar.types";
+
+export type NavBarProps = {
+  label: string;
+  brand: string;
+  brandHref?: string;
+  links: NavLink[];
+  current?: string;
+  actions?: NavBarActions;
+  search: NavSearch;
+  tone?: "default" | "inverse";
+  layout?: "inline" | "split" | "search";
+  over?: "none" | "media";
+  skip?: string;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Container from "../primitives/container/container.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import LinkPlain from "../primitives/link-plain/link-plain.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavActions from "../components/nav-actions.vue";
+import NavBarMenu from "../components/nav-bar-menu.vue";
+import NavBlock from "../components/nav-block.vue";
+import NavLinks from "../components/nav-links.vue";
+import OverMedia from "../components/over-media.vue";
+import SearchPalette from "../components/search-palette.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  label,
+  brand,
+  brandHref,
+  links,
+  current = "",
+  actions,
+  search,
+  tone = "default",
+  layout = "inline",
+  over = "none",
+  skip,
+  landmarkLabel,
+} = defineProps<NavBarProps>();
+const emit = defineEmits<{ theme: [] }>();
+</script>
+
+<template>
+  <Block
+    tag="header"
+    :class="cn(
+      'relative',
+      (
+        (tone as string) === 'inverse' ? 'border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background'
+        : 'border-b border-border bg-background'
+      ),
+      (((over as string) === 'media') ? 'isolate overflow-hidden border-0 bg-transparent' : '')
+    )"
+    data-testid="nav-bar"
+    :data-layout="layout"
+    :data-tone="tone"
+    :aria-label="landmarkLabel"
+  >
+    <OverMedia :on="((over as string) === 'media')" :alt="brand" />
+    <LinkPlain v-if="skip"
+      href="#main-content"
+      :class="'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background ' +
+        'focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border'"
+      data-testid="skip-link"
+    >
+      {{ skip }}
+    </LinkPlain>
+    <Container class="mx-auto w-full max-w-6xl px-4" data-slot="container">
+      <Box :class="cn('flex flex-wrap items-center justify-between gap-4', 'py-4')">
+        <NavBlock v-if="((layout as string) === 'split')"
+          :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', label, landmarkLabel)) : label)"
+          class="w-full"
+          testid="site-nav"
+        >
+          <Grid cols="1-3" class="w-full items-center gap-4">
+            <Box class="md:justify-self-start">
+              <NavLinks :links="links" :current="current" side="left" />
+            </Box>
+            <Box class="text-center">
+              <MenuEntry :href="brandHref" class="text-lg font-medium" testid="brand">
+                {{ brand }}
+              </MenuEntry>
+            </Box>
+            <Group gap="4" align="center" justify="end" class="flex-wrap md:justify-self-end">
+              <Box>
+                <NavLinks :links="links" :current="current" side="right" />
+              </Box>
+              <NavActions
+                :login="actions?.login"
+                :loginHref="actions?.loginHref"
+                :cta="actions?.cta"
+                :ctaHref="actions?.href"
+                :actions="actions?.mode"
+                :tone="tone"
+                :themeLabel="actions?.themeLabel"
+                @theme="() => emit('theme')"
+              />
+            </Group>
+          </Grid>
+        </NavBlock>
+        <template v-else>
+          <MenuEntry :href="brandHref" class="text-lg font-medium" testid="brand">
+            {{ brand }}
+          </MenuEntry>
+          <SearchPalette v-if="((layout as string) === 'search')" :label="search.label" :shortcut="search.shortcut" />
+          <NavBarMenu :label="label" :links="links" :current="current" :landmarkLabel="landmarkLabel" />
+          <NavActions
+            :login="actions?.login"
+            :loginHref="actions?.loginHref"
+            :cta="actions?.cta"
+            :ctaHref="actions?.href"
+            :actions="actions?.mode"
+            :tone="tone"
+            :themeLabel="actions?.themeLabel"
+            @theme="() => emit('theme')"
+          />
+        </template>
+      </Box>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/newsletter-form.vue b/packages/vue/ui/src/blocks/newsletter-form.vue
new file mode 100644
index 0000000..54a39a1
--- /dev/null
+++ b/packages/vue/ui/src/blocks/newsletter-form.vue
@@ -0,0 +1,92 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and
+  picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start,
+  center).
+-->
+<script lang="ts">
+export type NewsletterFormProps = {
+  id: string;
+  title: string;
+  text: string;
+  label: string;
+  submit: string;
+  consent?: string;
+  layout?: "inline" | "stacked" | "split";
+  terms?: "show" | "hide";
+  tone?: "default" | "muted";
+  align?: "start" | "center";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Form from "../primitives/form/form.vue";
+import Group from "../primitives/group/group.vue";
+import Input from "../primitives/input/input.vue";
+import Label from "../primitives/label/label.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  label,
+  submit,
+  consent,
+  layout = "inline",
+  terms = "hide",
+  tone = "default",
+  align = "center",
+  landmarkLabel,
+} = defineProps<NewsletterFormProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="text"
+    :tone="tone"
+    :align="align"
+    :layout="(((layout as string) === 'split') ? 'split' : 'stack')"
+    :media="{ show: ((layout as string) === 'split') }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Form
+      method="dialog"
+      :class="cn('w-full max-w-md', (((align as string) === 'center') ? 'mx-auto' : ''))"
+      data-testid="newsletter-form"
+    >
+      <Label :for="tpl('{0}-email', id)" class="sr-only">
+        {{ label }}
+      </Label>
+      <Group
+        gap="2"
+        align="start"
+        :class="cn('w-full', (((layout as string) === 'stacked') ? 'flex-col items-stretch' : 'flex-wrap'))"
+      >
+        <Input type="email" name="email" class="min-w-0 flex-1" :id="tpl('{0}-email', id)" data-testid="field" />
+        <Button variant="default" size="default" type="submit" data-testid="submit">
+          {{ submit }}
+        </Button>
+      </Group>
+      <Text
+        v-if="(((terms as string) === 'show') && consent)"
+        size="xs"
+        class="text-muted-foreground"
+        data-testid="consent"
+      >
+        {{ consent }}
+      </Text>
+    </Form>
+    <template #aside>
+      <MediaFrame :alt="title" ratio="4/3" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/order-summary.types.ts b/packages/vue/ui/src/blocks/order-summary.types.ts
new file mode 100644
index 0000000..5fdaf66
--- /dev/null
+++ b/packages/vue/ui/src/blocks/order-summary.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type SummaryRow = {
+  id: string;
+  label: string;
+  amount: number;
+  currency: string;
+  strong: boolean;
+};
+
+export type SummaryLabels = {
+  checkout: string;
+  note: string;
+};
diff --git a/packages/vue/ui/src/blocks/order-summary.vue b/packages/vue/ui/src/blocks/order-summary.vue
new file mode 100644
index 0000000..08015bd
--- /dev/null
+++ b/packages/vue/ui/src/blocks/order-summary.vue
@@ -0,0 +1,103 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout
+  (card, plain), cta (show, hide), note (show, hide), density, tone.
+-->
+<script lang="ts">
+import type { SummaryRow, SummaryLabels } from "./order-summary.types";
+
+export type OrderSummaryProps = {
+  id: string;
+  title: string;
+  rows: SummaryRow[];
+  empty?: string;
+  labels: SummaryLabels;
+  layout?: "card" | "plain";
+  cta?: "show" | "hide";
+  note?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, fmtMoney } from "../utils";
+
+const {
+  id,
+  title,
+  rows,
+  empty = "",
+  labels,
+  layout = "card",
+  cta = "show",
+  note = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<OrderSummaryProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    measure="md"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((rows?.length ?? 0) === 0)" icon="receipt" :title="empty" />
+    <Box v-else
+      :class="cn(
+        (((layout as string) === 'card') ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')
+      )"
+      data-testid="summary"
+    >
+      <Stack gap="4" align="stretch">
+        <List tag="ul" class="flex flex-col gap-4">
+          <ListItem v-for="row in rows" :key="row.id"
+            :class="cn(
+              'flex items-center justify-between gap-4',
+              (
+                row.strong ? 'border-t border-border pt-4 text-base font-bold'
+                : 'text-sm text-muted-foreground'
+              )
+            )"
+            data-testid="item"
+          >
+            <Inline>
+              {{ row.label }}
+            </Inline>
+            <Inline>
+              {{ fmtMoney(row.amount, row.currency) }}
+            </Inline>
+          </ListItem>
+        </List>
+        <Button
+          v-if="((cta as string) === 'show')"
+          variant="default"
+          size="default"
+          class="w-full"
+          data-testid="checkout"
+        >
+          {{ labels.checkout }}
+        </Button>
+        <Text v-if="((note as string) === 'show')" size="xs" class="text-muted-foreground">
+          {{ labels.note }}
+        </Text>
+      </Stack>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/order-table.types.ts b/packages/vue/ui/src/blocks/order-table.types.ts
new file mode 100644
index 0000000..19b90e6
--- /dev/null
+++ b/packages/vue/ui/src/blocks/order-table.types.ts
@@ -0,0 +1,25 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Order = {
+  id: string;
+  number: string;
+  date: string;
+  total: number;
+  currency: string;
+  status: string;
+  items: number;
+};
+
+export type OrderLabels = {
+  caption: string;
+  number: string;
+  date: string;
+  items: string;
+  total: string;
+  status: string;
+  itemsCount: string;
+  summary: string;
+  previous: string;
+  next: string;
+};
diff --git a/packages/vue/ui/src/blocks/order-table.vue b/packages/vue/ui/src/blocks/order-table.vue
new file mode 100644
index 0000000..8400e54
--- /dev/null
+++ b/packages/vue/ui/src/blocks/order-table.vue
@@ -0,0 +1,102 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  The order history as a table or as cards: number, date, items, total and a status pill, with an optional
+  pager. Axes: layout (table, cards), pager (show, hide), tone, density.
+-->
+<script lang="ts">
+import type { Order, OrderLabels } from "./order-table.types";
+
+export type OrderTableProps = {
+  id: string;
+  title: string;
+  orders: Order[];
+  empty?: string;
+  statuses: Record<string, string>;
+  labels: OrderLabels;
+  layout?: "table" | "cards";
+  pager?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Card from "../primitives/card/card.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import OrderRows from "../components/order-rows.vue";
+import Pager from "../components/pager.vue";
+import Pill from "../components/pill.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { at, fmtMoney, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  orders,
+  empty = "",
+  statuses,
+  labels,
+  layout = "table",
+  pager = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<OrderTableProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((orders?.length ?? 0) === 0)" icon="package" :title="empty" />
+    <Stack v-else gap="4" align="stretch">
+      <OrderRows
+        v-if="((layout as string) === 'table')"
+        :orders="orders"
+        :statuses="statuses"
+        :labels="labels"
+        :density="density"
+      />
+      <Stack v-else gap="4" align="stretch" data-testid="order-cards">
+        <Card v-for="o in orders" :key="o.id" variant="default" data-testid="item">
+          <CardContent class="flex flex-wrap items-center justify-between gap-4">
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {{ o.number }}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {{ o.date }}
+              </Text>
+            </Stack>
+            <Text size="sm">
+              {{ tpl(labels.itemsCount, o.items) }}
+            </Text>
+            <Text size="sm" weight="bold">
+              {{ fmtMoney(o.total, o.currency) }}
+            </Text>
+            <Pill
+              :tone="
+                o.status === 'paid' ? 'green'
+                : o.status === 'shipped' ? 'blue'
+                : o.status === 'pending' ? 'amber'
+                : 'gray'
+              "
+            >
+              {{ at(statuses, o.status) }}
+            </Pill>
+          </CardContent>
+        </Card>
+      </Stack>
+      <Pager v-if="((pager as string) === 'show')"
+        :page="1"
+        :pages="3"
+        :summary="tpl(labels.summary, 1, 4, 12)"
+        :previousLabel="labels.previous"
+        :nextLabel="labels.next"
+      />
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/page-intro.vue b/packages/vue/ui/src/blocks/page-intro.vue
new file mode 100644
index 0000000..503d075
--- /dev/null
+++ b/packages/vue/ui/src/blocks/page-intro.vue
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action.
+  Axes: align (start, center), tone, density.
+-->
+<script lang="ts">
+export type PageIntroProps = {
+  id: string;
+  title: string;
+  text: string;
+  cta?: string;
+  href?: string;
+  level?: 1 | 2;
+  align?: "start" | "center";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import ActionGroup from "../components/action-group.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  text,
+  cta,
+  href,
+  level = 1,
+  align = "start",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<PageIntroProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="text"
+    :heading="{ level }"
+    :align="align"
+    :tone="tone"
+    :density="density"
+    :landmarkLabel="landmarkLabel"
+  >
+    <ActionGroup v-if="cta" :primary="cta" :primaryHref="href" :align="align" />
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/page-trail.types.ts b/packages/vue/ui/src/blocks/page-trail.types.ts
new file mode 100644
index 0000000..bb966d6
--- /dev/null
+++ b/packages/vue/ui/src/blocks/page-trail.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/page-trail.ts
+
+import type { Stat } from "./stats-band.types";
+
+export type PageExtras = {
+  value: string;
+  caption: string;
+  note: string;
+  icon: string;
+  facts: Stat[];
+};
diff --git a/packages/vue/ui/src/blocks/page-trail.vue b/packages/vue/ui/src/blocks/page-trail.vue
new file mode 100644
index 0000000..dd3a316
--- /dev/null
+++ b/packages/vue/ui/src/blocks/page-trail.vue
@@ -0,0 +1,85 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/page-trail.ts -->
+<!--
+  The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a
+  total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts
+  in two columns), tone.
+-->
+<script lang="ts">
+import type { PageExtras } from "./page-trail.types";
+import type { NavLink } from "./nav-bar.types";
+import type { Stat } from "./stats-band.types";
+
+export type PageTrailProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  label: string;
+  crumbs: NavLink[];
+  extras: PageExtras;
+  aside?: "none" | "figure" | "note" | "facts";
+  level?: 1 | 2;
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Container from "../primitives/container/container.vue";
+import Stack from "../primitives/stack/stack.vue";
+import PageAside from "../components/page-aside.vue";
+import PageCrumbs from "../components/page-crumbs.vue";
+import SectionHeader from "../components/section-header.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  label,
+  crumbs,
+  extras,
+  aside = "none",
+  level = 1,
+  tone = "default",
+  landmarkLabel,
+} = defineProps<PageTrailProps>();
+const titleId = computed(() => id + "-title");
+</script>
+
+<template>
+  <Block
+    tag="section"
+    :class="cn('py-8', (((tone as string) === 'muted') ? 'bg-muted' : ''))"
+    :aria-labelledby="(landmarkLabel ? undefined : titleId)"
+    data-testid="section"
+    :data-tone="tone"
+    :data-aside="aside"
+    :aria-label="landmarkLabel"
+  >
+    <Container :class="cn('mx-auto w-full max-w-6xl px-4', 'flex flex-col gap-6')" data-slot="container">
+      <PageCrumbs
+        v-if="((crumbs?.length ?? 0) > 0)"
+        :label="label"
+        :crumbs="crumbs"
+        :landmarkLabel="landmarkLabel"
+      />
+      <Box
+        :class="
+          (aside as string) === 'facts' ? 'grid grid-cols-1 items-center gap-8 lg:grid-cols-2'
+          : 'flex flex-col gap-6 md:flex-row md:items-end md:justify-between'
+        "
+      >
+        <Stack gap="4" align="start" class="min-w-0">
+          <SectionHeader :titleId="titleId" :title="title" :heading="{ level, badge }" :lead="lead" />
+        </Stack>
+        <PageAside v-if="((aside as string) !== 'none')" :extras="extras" :mode="aside" />
+      </Box>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/photo-gallery.types.ts b/packages/vue/ui/src/blocks/photo-gallery.types.ts
new file mode 100644
index 0000000..d0b8e7c
--- /dev/null
+++ b/packages/vue/ui/src/blocks/photo-gallery.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Photo = {
+  id: string;
+  title: string;
+  tag: string;
+  size: string;
+};
+
+export type PhotoLabels = {
+  previous: string;
+  next: string;
+  counter: string;
+};
diff --git a/packages/vue/ui/src/blocks/photo-gallery.vue b/packages/vue/ui/src/blocks/photo-gallery.vue
new file mode 100644
index 0000000..e521aef
--- /dev/null
+++ b/packages/vue/ui/src/blocks/photo-gallery.vue
@@ -0,0 +1,144 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/work.ts -->
+<!--
+  Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of
+  thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes:
+  layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.
+-->
+<script lang="ts">
+import type { Photo, PhotoLabels } from "./photo-gallery.types";
+
+export type PhotoGalleryProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  photos: Photo[];
+  empty?: string;
+  labels: PhotoLabels;
+  layout?: "grid" | "masonry" | "mosaic" | "featured" | "cards";
+  captions?: "show" | "hide";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import FigureBlock from "../components/figure-block.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  photos,
+  empty = "",
+  labels,
+  layout = "grid",
+  captions = "show",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<PhotoGalleryProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :tone="tone"
+    :density="density"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((photos?.length ?? 0) === 0)" icon="image" :title="empty" />
+    <Stack v-else-if="((layout as string) === 'featured')" gap="4" align="stretch" data-testid="featured">
+      <MediaFrame :alt="title" />
+      <Group gap="4" align="center" justify="between">
+        <Stack gap="0">
+          <Text size="base" weight="semibold">
+            {{ photos[0]?.title ?? "" }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ tpl(labels.counter, 1, (photos?.length ?? 0)) }}
+          </Text>
+        </Stack>
+        <Group gap="2">
+          <Button variant="outline" size="sm" layout="icon" :aria-label="labels.previous">
+            <LucideIcon name="chevron-left" :size="16" />
+          </Button>
+          <Button variant="outline" size="sm" layout="icon" :aria-label="labels.next">
+            <LucideIcon name="chevron-right" :size="16" />
+          </Button>
+        </Group>
+      </Group>
+      <Box class="grid grid-cols-3 gap-2 sm:grid-cols-9" data-testid="thumbs">
+        <MediaFrame
+          v-for="(p, i) in photos"
+          :key="p.id"
+          :alt="p.title"
+          ratio="1/1"
+          :class="((i === 0) ? 'ring-2 ring-foreground' : '')"
+        />
+      </Box>
+    </Stack>
+    <Box v-else
+      :class="
+        (layout as string) === 'masonry' ? 'columns-1 gap-4 sm:columns-2 lg:columns-3'
+        : (layout as string) === 'mosaic' ? 'grid grid-cols-2 gap-4 md:grid-cols-4'
+        : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'
+      "
+      data-testid="items"
+    >
+      <FigureBlock v-for="(p, i) in photos" :key="p.id"
+        :class="cn(
+          'flex flex-col gap-2',
+          (((layout as string) === 'masonry') ? 'mb-4 break-inside-avoid' : ''),
+          ((((layout as string) === 'mosaic') && (i === 0)) ? 'col-span-2 row-span-2' : ''),
+          (((layout as string) === 'cards') ? 'rounded bg-card inset-ring inset-ring-border p-4' : '')
+        )"
+        testid="item"
+      >
+        <MediaFrame
+          :alt="p.title"
+          :ratio="
+            (layout as string) === 'masonry' ? ((p.size === 'tall') ? '3/4' : ((p.size === 'wide') ? '16/9' : ((p.size === 'large') ? '4/3' : '1/1')))
+            : (layout as string) === 'grid' ? '4/3'
+            : '1/1'
+          "
+          :class="(((layout as string) === 'mosaic') ? 'h-full' : '')"
+        />
+        <Group
+          v-if="(((captions as string) === 'show') && ((layout as string) === 'cards'))"
+          gap="4"
+          align="center"
+          justify="between"
+        >
+          <Text size="sm" weight="semibold">
+            {{ p.title }}
+          </Text>
+          <Badge variant="secondary" size="sm">
+            {{ p.tag }}
+          </Badge>
+        </Group>
+        <Box
+          v-if="(((captions as string) === 'show') && (((layout as string) === 'grid') || ((layout as string) === 'masonry')))"
+          class="text-sm text-muted-foreground"
+          data-testid="caption"
+        >
+          {{ p.title }}
+        </Box>
+      </FigureBlock>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/post-card.types.ts b/packages/vue/ui/src/blocks/post-card.types.ts
new file mode 100644
index 0000000..ae8d4ce
--- /dev/null
+++ b/packages/vue/ui/src/blocks/post-card.types.ts
@@ -0,0 +1,22 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+
+export type Post = {
+  id: string;
+  title: string;
+  excerpt: string;
+  category: string;
+  author: string;
+  date: string;
+  minutes: number;
+  icon: string;
+  href?: string;
+  image?: string;
+};
+
+export type PostLabels = {
+  minutes: string;
+  by: string;
+  read: string;
+  empty: string;
+};
diff --git a/packages/vue/ui/src/blocks/post-card.vue b/packages/vue/ui/src/blocks/post-card.vue
new file mode 100644
index 0000000..aedd77c
--- /dev/null
+++ b/packages/vue/ui/src/blocks/post-card.vue
@@ -0,0 +1,141 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/content.ts -->
+<!--
+  A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout
+  (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only),
+  density.
+-->
+<script lang="ts">
+import type { Post, PostLabels } from "./post-card.types";
+
+export type PostCardProps = {
+  post: Post;
+  labels: PostLabels;
+  layout?: "vertical" | "horizontal";
+  media?: "image" | "none";
+  meta?: "full" | "short" | "news";
+  density?: "default" | "compact";
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import Group from "../primitives/group/group.vue";
+import Link from "../primitives/link/link.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { defaults } from "../presets/defaults";
+import { cn, tpl } from "../utils";
+
+const {
+  post,
+  labels,
+  layout = "vertical",
+  media = "image",
+  meta = "full",
+  density = "default",
+} = defineProps<PostCardProps>();
+</script>
+
+<template>
+  <Block v-if="((meta as string) === 'news')"
+    tag="article"
+    :class="cn(
+      'flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border',
+      defaults.news.card
+    )"
+    data-testid="item"
+    :data-layout="layout"
+    data-meta="news"
+  >
+    <Box :class="cn('relative shrink-0 overflow-hidden', defaults.news.cover)" data-testid="news-cover">
+      <MediaFrame :alt="post.title" :src="post.image" :class="cn('size-full', defaults.media.rounded)" />
+      <Title
+        :as="3"
+        size="xs"
+        weight="semibold"
+        :class="cn(
+          'pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground',
+          defaults.news.title
+        )"
+        data-testid="news-title"
+      >
+        {{ post.title }}
+      </Title>
+    </Box>
+    <Group
+      gap="2"
+      align="center"
+      :class="cn('w-full px-2 text-muted-foreground', defaults.news.strip)"
+      data-testid="news-date"
+    >
+      <LucideIcon name="calendar" :size="16" />
+      <Text size="xs" weight="bold" class="leading-4">
+        {{ post.date }}
+      </Text>
+      <Text v-if="post.category" size="xs" weight="bold" class="leading-4">
+        {{ post.category }}
+      </Text>
+    </Group>
+  </Block>
+  <Block v-else
+    tag="article"
+    :class="cn(
+      'flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded',
+      'h-full gap-4 overflow-hidden',
+      (((layout as string) === 'horizontal') ? 'flex flex-col sm:flex-row' : 'flex flex-col')
+    )"
+    data-slot="card"
+    data-testid="item"
+    :data-layout="layout"
+    :data-meta="meta"
+  >
+    <Box
+      v-if="((media as string) === 'image')"
+      :class="cn('relative shrink-0', (((layout as string) === 'horizontal') ? 'sm:w-64' : ''))"
+    >
+      <MediaFrame :alt="post.title" :src="post.image" class="h-full" />
+    </Box>
+    <CardContent class="flex flex-1 flex-col gap-2">
+      <Group v-if="((meta as string) !== 'news')" gap="2" align="center">
+        <LucideIcon :name="post.icon" :size="16" />
+        <Text size="xs" class="uppercase tracking-wide text-muted-foreground">
+          {{ post.category }}
+        </Text>
+      </Group>
+      <Title :as="3" size="xl" weight="bold">
+        {{ post.title }}
+      </Title>
+      <Text
+        v-if="(((density as string) === 'default') && ((meta as string) !== 'news'))"
+        size="sm"
+        class="text-muted-foreground"
+      >
+        {{ post.excerpt }}
+      </Text>
+      <Group v-if="((meta as string) !== 'news')" gap="2" class="mt-auto flex-wrap pt-2 text-muted-foreground">
+        <Text v-if="((meta as string) === 'full')" size="xs">
+          {{ tpl(labels.by, post.author) }}
+        </Text>
+        <Text size="xs">
+          {{ post.date }}
+        </Text>
+        <Text v-if="((meta as string) === 'full')" size="xs">
+          {{ tpl(labels.minutes, post.minutes) }}
+        </Text>
+      </Group>
+      <Link
+        v-if="(((meta as string) !== 'news') && post.href)"
+        :href="post.href"
+        variant="default"
+        data-testid="read"
+      >
+        {{ labels.read }}
+      </Link>
+    </CardContent>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/post-grid.types.ts b/packages/vue/ui/src/blocks/post-grid.types.ts
new file mode 100644
index 0000000..73de7d6
--- /dev/null
+++ b/packages/vue/ui/src/blocks/post-grid.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/content.ts
+
+export type PostTopic = {
+  id: string;
+  title: string;
+  value: string;
+};
+
+export type PostFilter = {
+  /** topics: tabs above the posts; the page filters by `topic` */
+  mode?: "none" | "topics";
+  /** the topic tabs */
+  topics?: PostTopic[];
+  /** accessible name of the topic tabs */
+  label?: string;
+  /** the value of the chosen topic; empty: all posts */
+  topic?: string;
+};
diff --git a/packages/vue/ui/src/blocks/post-grid.vue b/packages/vue/ui/src/blocks/post-grid.vue
new file mode 100644
index 0000000..6bbbe35
--- /dev/null
+++ b/packages/vue/ui/src/blocks/post-grid.vue
@@ -0,0 +1,116 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/content.ts -->
+<!--
+  A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first
+  post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news),
+  filter mode (none, topics), tone, density.
+-->
+<script lang="ts">
+import type { PostTopic, PostFilter } from "./post-grid.types";
+import type { Post, PostLabels } from "./post-card.types";
+import type { HeadLink } from "../components/section-frame.types";
+
+export type PostGridProps = {
+  id: string;
+  title: string;
+  posts: Post[];
+  labels: PostLabels;
+  action?: HeadLink;
+  filter?: PostFilter;
+  layout?: "grid" | "list" | "magazine";
+  cols?: "1-2" | "1-3" | "1-4";
+  media?: "image" | "none";
+  meta?: "full" | "short" | "news";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Grid from "../primitives/grid/grid.vue";
+import Stack from "../primitives/stack/stack.vue";
+import PostCard from "../blocks/post-card.vue";
+import SectionFrame from "../components/section-frame.vue";
+import Switcher from "../components/switcher.vue";
+import SwitcherItem from "../components/switcher-item.vue";
+import { fitCols } from "../utils";
+
+const {
+  id,
+  title,
+  posts,
+  labels,
+  action,
+  filter,
+  layout = "grid",
+  cols = "1-3",
+  media = "image",
+  meta = "full",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<PostGridProps>();
+const emit = defineEmits<{ topic: [value: string] }>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :action="action"
+    :tone="tone"
+    :density="(((density as string) === 'compact') ? 'compact' : 'default')"
+    :measure="(((meta as string) === 'news') ? 'fill' : 'default')"
+    :class="(((meta as string) === 'news') ? 'py-0' : '')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Switcher v-if="(filter?.mode === 'topics')" :label="filter?.label">
+      <SwitcherItem
+        v-for="tab in filter?.topics"
+        :key="tab.id"
+        :active="(tab.value === filter?.topic)"
+        @click="() => emit('topic', tab.value)"
+      >
+        {{ tab.title }}
+      </SwitcherItem>
+    </Switcher>
+    <template v-if="((posts.filter((i) => !filter?.topic || i['category'] === filter?.topic)?.length ?? 0) > 0)">
+      <Stack v-if="((layout as string) === 'magazine')" gap="6" align="stretch" data-testid="items">
+        <template v-for="(p, i) in posts.filter((i) => !filter?.topic || i['category'] === filter?.topic)" :key="p.id">
+          <PostCard
+            v-if="(i === 0)"
+            :post="p"
+            :labels="labels"
+            layout="horizontal"
+            :media="media"
+            :meta="meta"
+            :density="density"
+          />
+        </template>
+        <Grid :cols="cols" class="gap-6">
+          <template v-for="(p, i) in posts.filter((i) => !filter?.topic || i['category'] === filter?.topic)" :key="p.id">
+            <PostCard v-if="(i > 0)" :post="p" :labels="labels" :media="media" :meta="meta" :density="density" />
+          </template>
+        </Grid>
+      </Stack>
+      <Grid v-else
+        :cols="
+          (layout as string) === 'list' ? '1'
+          : fitCols(cols, (posts.filter((i) => !filter?.topic || i['category'] === filter?.topic)?.length ?? 0))
+        "
+        class="w-full gap-6"
+        data-testid="items"
+      >
+        <PostCard v-for="p in posts.filter((i) => !filter?.topic || i['category'] === filter?.topic)" :key="p.id"
+          :post="p"
+          :labels="labels"
+          :layout="(((layout as string) === 'list') ? 'horizontal' : 'vertical')"
+          :media="media"
+          :meta="meta"
+          :density="density"
+        />
+      </Grid>
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/post-header.vue b/packages/vue/ui/src/blocks/post-header.vue
new file mode 100644
index 0000000..175cd18
--- /dev/null
+++ b/packages/vue/ui/src/blocks/post-header.vue
@@ -0,0 +1,91 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/content.ts -->
+<!--
+  The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout
+  (start, center), cover (show, hide), meta (full, short), tone.
+-->
+<script lang="ts">
+import type { Post, PostLabels } from "./post-card.types";
+
+export type PostHeaderProps = {
+  id: string;
+  post?: Post;
+  labels: PostLabels;
+  level?: 1 | 2;
+  layout?: "start" | "center";
+  cover?: "show" | "hide";
+  meta?: "full" | "short";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import Pill from "../components/pill.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  post,
+  labels,
+  level = 1,
+  layout = "start",
+  cover = "show",
+  meta = "full",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<PostHeaderProps>();
+</script>
+
+<template>
+  <SectionFrame v-if="post"
+    :id="id"
+    :title="post?.title"
+    :lead="post?.excerpt"
+    :heading="{ level }"
+    :align="layout"
+    :tone="tone"
+    :media="{ show: ((cover as string) === 'show') }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Group
+      gap="4"
+      align="center"
+      :justify="(((layout as string) === 'center') ? 'center' : 'start')"
+      class="flex-wrap"
+      data-testid="post-meta"
+    >
+      <MediaFrame :alt="post?.author" ratio="1/1" class="size-10 shrink-0 rounded-full" />
+      <Text size="sm" weight="semibold">
+        {{ post?.author }}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {{ post?.date }}
+      </Text>
+      <Text v-if="((meta as string) === 'full')" size="sm" class="text-muted-foreground">
+        {{ tpl(labels.minutes, post?.minutes) }}
+      </Text>
+      <Pill tone="blue">
+        {{ post?.category }}
+      </Pill>
+    </Group>
+    <template #aside>
+      <MediaFrame :alt="post?.title" :src="post?.image" ratio="21/9" />
+    </template>
+  </SectionFrame>
+  <SectionFrame
+    v-else
+    :id="id"
+    :heading="{ level }"
+    :align="layout"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState icon="file-text" :title="labels.empty" />
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/post-showcase.vue b/packages/vue/ui/src/blocks/post-showcase.vue
new file mode 100644
index 0000000..4512ce1
--- /dev/null
+++ b/packages/vue/ui/src/blocks/post-showcase.vue
@@ -0,0 +1,131 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/post-showcase.ts -->
+<!--
+  Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured:
+  the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3:
+  overlay columns), mediaSide, tone.
+-->
+<script lang="ts">
+import type { Post, PostLabels } from "./post-card.types";
+import type { HeadLink } from "../components/section-frame.types";
+
+export type PostShowcaseProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  posts: Post[];
+  labels: PostLabels;
+  action: HeadLink;
+  layout?: "intro" | "featured" | "overlay";
+  cols?: "2" | "3";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  empty?: string;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Link from "../primitives/link/link.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import PostFeature from "../components/post-feature.vue";
+import PostMiniCard from "../components/post-mini-card.vue";
+import PostOverlayCard from "../components/post-overlay-card.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  posts,
+  labels,
+  action,
+  layout = "intro",
+  cols = "3",
+  mediaSide = "start",
+  tone = "default",
+  empty = "",
+  landmarkLabel,
+} = defineProps<PostShowcaseProps>();
+</script>
+
+<template>
+  <SectionFrame v-if="((posts?.length ?? 0) === 0)"
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState icon="newspaper" :title="empty" />
+  </SectionFrame>
+  <SectionFrame v-else-if="((layout as string) === 'intro')"
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    layout="split"
+    :media="{ show: true, side: mediaSide }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Link :href="action.href" size="sm" data-testid="section-action">
+      {{ action.label }}
+      <LucideIcon name="arrow-right" :size="16" />
+    </Link>
+    <template #aside>
+      <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <template v-for="(p, i) in posts" :key="p.id">
+          <PostMiniCard v-if="(i < 4)" :p="p" :labels="labels" />
+        </template>
+      </Box>
+    </template>
+  </SectionFrame>
+  <SectionFrame v-else-if="((layout as string) === 'featured')"
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    layout="split"
+    :media="{ show: true, side: mediaSide }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <template v-for="(p, i) in posts" :key="p.id">
+      <PostFeature v-if="(i < 1)" :p="p" :labels="labels" />
+    </template>
+    <template #aside>
+      <MediaFrame :alt="title" ratio="4/3" />
+    </template>
+  </SectionFrame>
+  <SectionFrame v-else
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Box
+      :class="
+        (cols as string) === '2' ? 'grid grid-cols-1 gap-6 md:grid-cols-2'
+        : 'grid grid-cols-1 gap-6 md:grid-cols-3'
+      "
+    >
+      <template v-for="(p, i) in posts" :key="p.id">
+        <PostOverlayCard
+          v-if="(i < (((cols as string) === '2') ? 2 : 3))"
+          :p="p"
+          :labels="labels"
+          :ratio="(((cols as string) === '2') ? '16/9' : '4/3')"
+        />
+      </template>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/post-split.types.ts b/packages/vue/ui/src/blocks/post-split.types.ts
new file mode 100644
index 0000000..8878db0
--- /dev/null
+++ b/packages/vue/ui/src/blocks/post-split.types.ts
@@ -0,0 +1,23 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/post-split.ts
+
+import type { NavLink } from "./nav-bar.types";
+
+export type PostExtras = {
+  role: string;
+  bio: string;
+  views: string;
+  likes: string;
+  tags: NavLink[];
+  outline: NavLink[];
+};
+
+export type PostSplitLabels = {
+  minutes: string;
+  views: string;
+  likes: string;
+  share: string;
+  save: string;
+  read: string;
+  related: string;
+};
diff --git a/packages/vue/ui/src/blocks/post-split.vue b/packages/vue/ui/src/blocks/post-split.vue
new file mode 100644
index 0000000..d980630
--- /dev/null
+++ b/packages/vue/ui/src/blocks/post-split.vue
@@ -0,0 +1,117 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/post-split.ts -->
+<!--
+  A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags,
+  figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and
+  related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair,
+  wide, icons), tone.
+-->
+<script lang="ts">
+import type { PostExtras, PostSplitLabels } from "./post-split.types";
+import type { Post } from "./post-card.types";
+import type { NavLink } from "./nav-bar.types";
+
+export type PostSplitProps = {
+  id: string;
+  post: Post;
+  labels: PostSplitLabels;
+  extras: PostExtras;
+  level?: 1 | 2;
+  layout?: "center" | "split" | "outline";
+  mediaSide?: "end" | "start";
+  author?: "line" | "card" | "bio";
+  cover?: "wide" | "square";
+  actions?: "pair" | "wide" | "icons";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import MediaFrame from "../components/media-frame.vue";
+import PostActions from "../components/post-actions.vue";
+import PostAuthor from "../components/post-author.vue";
+import PostOutline from "../components/post-outline.vue";
+import PostStats from "../components/post-stats.vue";
+import PostTags from "../components/post-tags.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  post,
+  labels,
+  extras,
+  level = 1,
+  layout = "split",
+  mediaSide = "end",
+  author = "line",
+  cover = "wide",
+  actions = "pair",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<PostSplitProps>();
+</script>
+
+<template>
+  <SectionFrame v-if="((layout as string) === 'center')"
+    :id="id"
+    :title="post.title"
+    :lead="post.excerpt"
+    :heading="{ badge: post.category, level }"
+    :tone="tone"
+    :media="{ show: true }"
+    align="center"
+    :landmarkLabel="landmarkLabel"
+  >
+    <PostTags v-if="((extras.tags?.length ?? 0) > 0)" :tags="extras.tags" align="center" />
+    <PostStats :post="post" :extras="extras" :labels="labels" align="center" />
+    <PostAuthor
+      :post="post"
+      :extras="extras"
+      :labels="labels"
+      mode="card"
+      :share="true"
+      class="mx-auto w-full max-w-md"
+    />
+    <template #aside>
+      <MediaFrame
+        :alt="post.title"
+        :ratio="
+          (layout as string) === 'center' ? '21/9'
+          : (cover as string) === 'square' ? '1/1'
+          : '4/3'
+        "
+      />
+    </template>
+  </SectionFrame>
+  <SectionFrame v-else
+    :id="id"
+    :title="post.title"
+    :lead="post.excerpt"
+    :heading="{ badge: post.category, level }"
+    :tone="tone"
+    :media="{ show: true, side: mediaSide }"
+    layout="split"
+    :landmarkLabel="landmarkLabel"
+  >
+    <template v-if="((layout as string) === 'outline')">
+      <PostOutline v-if="((extras.outline?.length ?? 0) > 0)" :post="post" :extras="extras" :labels="labels" />
+    </template>
+    <template v-else>
+      <PostAuthor :post="post" :extras="extras" :labels="labels" :mode="author" />
+      <PostStats v-if="((author as string) !== 'line')" :post="post" :extras="extras" :labels="labels" />
+      <PostTags v-if="((extras.tags?.length ?? 0) > 0)" :tags="extras.tags" />
+    </template>
+    <PostActions :labels="labels" :mode="actions" />
+    <template #aside>
+      <MediaFrame
+        :alt="post.title"
+        :ratio="
+          (layout as string) === 'center' ? '21/9'
+          : (cover as string) === 'square' ? '1/1'
+          : '4/3'
+        "
+      />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/pricing-card.types.ts b/packages/vue/ui/src/blocks/pricing-card.types.ts
new file mode 100644
index 0000000..4394b1c
--- /dev/null
+++ b/packages/vue/ui/src/blocks/pricing-card.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-card.ts
+
+export type Plan = {
+  id: string;
+  name: string;
+  tagline: string;
+  price: number;
+  currency: string;
+  seats: number;
+  storage: number;
+  highlighted: boolean;
+  status?: string;
+  features: string[];
+  yearly: number;
+};
+
+export type PricingCardLabels = {
+  popular: string;
+  perMonth: string;
+  seats: string;
+  storage: string;
+  cta: string;
+  free: string;
+  perYear: string;
+  empty: string;
+};
diff --git a/packages/vue/ui/src/blocks/pricing-card.vue b/packages/vue/ui/src/blocks/pricing-card.vue
new file mode 100644
index 0000000..1c502cd
--- /dev/null
+++ b/packages/vue/ui/src/blocks/pricing-card.vue
@@ -0,0 +1,115 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/pricing-card.ts -->
+<!--
+  A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more
+  actions. Text comes in through `labels`; the plan is data.
+-->
+<script lang="ts">
+import type { Plan, PricingCardLabels } from "./pricing-card.types";
+
+export type PricingCardProps = {
+  plan: Plan;
+  labels: PricingCardLabels;
+  current?: boolean;
+  emphasis?: "auto" | "off";
+  density?: "default" | "compact";
+  billing?: "monthly" | "annual";
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Badge from "../primitives/badge/badge.vue";
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import CardDescription from "../primitives/card/card-description.vue";
+import CardFooter from "../primitives/card/card-footer.vue";
+import CardHeader from "../primitives/card/card-header.vue";
+import CardTitle from "../primitives/card/card-title.vue";
+import Group from "../primitives/group/group.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import { cn, fmtMoney, tpl } from "../utils";
+
+const {
+  plan,
+  labels,
+  current,
+  emphasis = "auto",
+  density = "default",
+  billing = "monthly",
+} = defineProps<PricingCardProps>();
+const emit = defineEmits<{ select: [id: string] }>();
+defineSlots<{ footer?(props: { plan: Plan }): unknown }>();
+const stand = computed(() => plan.highlighted && ((emphasis as string) === "auto"));
+const yearlyOn = computed(() => ((billing as string) === "annual") && (plan.yearly > 0));
+const amount = computed(() => yearlyOn.value ? plan.yearly : plan.price);
+</script>
+
+<template>
+  <Block
+    tag="article"
+    :class="cn(
+      'flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded',
+      'flex h-full flex-col'
+    )"
+    data-slot="card"
+    :data-highlighted="(stand ? 'true' : 'false')"
+    :data-current="(current ? 'true' : 'false')"
+  >
+    <CardHeader class="flex flex-col gap-2">
+      <Box class="flex min-h-6 items-center" data-slot="badge-slot">
+        <Badge v-if="stand" variant="default" size="default">
+          {{ labels.popular }}
+        </Badge>
+      </Box>
+      <CardTitle :as="3">
+        {{ plan.name }}
+      </CardTitle>
+      <CardDescription>
+        {{ plan.tagline }}
+      </CardDescription>
+    </CardHeader>
+    <CardContent :class="cn('flex flex-1 flex-col', (((density as string) === 'compact') ? 'gap-2' : 'gap-4'))">
+      <Group gap="2" align="baseline">
+        <Title :as="2" size="4xl" weight="bold">
+          <template v-if="(amount === 0)">
+            {{ labels.free }}
+          </template>
+          <template v-else>
+            {{ fmtMoney(amount, plan.currency) }}
+          </template>
+        </Title>
+        <Text v-if="(amount > 0)" size="sm" class="text-muted-foreground">
+          {{ (yearlyOn ? labels.perYear : labels.perMonth) }}
+        </Text>
+      </Group>
+      <Text size="sm" weight="medium">
+        {{ tpl(labels.seats, plan.seats) }}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {{ tpl(labels.storage, plan.storage) }}
+      </Text>
+      <List tag="ul" class="flex flex-col gap-2 text-sm">
+        <ListItem v-for="feature in plan.features" :key="feature" class="flex gap-2">
+          {{ feature }}
+        </ListItem>
+      </List>
+    </CardContent>
+    <CardFooter class="flex flex-wrap items-center gap-2">
+      <Button
+        :variant="(stand ? 'default' : 'outline')"
+        size="default"
+        data-testid="plan-select"
+        @click="() => emit('select', plan.id)"
+      >
+        {{ labels.cta }}
+      </Button>
+      <slot name="footer" :plan="plan" />
+    </CardFooter>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/pricing-tiers.types.ts b/packages/vue/ui/src/blocks/pricing-tiers.types.ts
new file mode 100644
index 0000000..9e260af
--- /dev/null
+++ b/packages/vue/ui/src/blocks/pricing-tiers.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/landing.ts
+
+export type BillingLabels = {
+  label: string;
+  monthly: string;
+  annual: string;
+  save: string;
+};
diff --git a/packages/vue/ui/src/blocks/pricing-tiers.vue b/packages/vue/ui/src/blocks/pricing-tiers.vue
new file mode 100644
index 0000000..e90d1db
--- /dev/null
+++ b/packages/vue/ui/src/blocks/pricing-tiers.vue
@@ -0,0 +1,101 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/landing.ts -->
+<!--
+  A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid,
+  stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and
+  the prices of that period), density, tone.
+-->
+<script lang="ts">
+import type { BillingLabels } from "./pricing-tiers.types";
+import type { Plan, PricingCardLabels } from "./pricing-card.types";
+
+export type PricingTiersProps = {
+  id: string;
+  title: string;
+  plans: Plan[];
+  labels: PricingCardLabels;
+  billingLabels: BillingLabels;
+  layout?: "grid" | "stack";
+  cols?: "1-2" | "1-3" | "1-4";
+  emphasis?: "auto" | "off";
+  billing?: "off" | "monthly" | "annual";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import EmptyState from "../components/empty-state.vue";
+import PricingCard from "../blocks/pricing-card.vue";
+import SectionFrame from "../components/section-frame.vue";
+import Switcher from "../components/switcher.vue";
+import SwitcherItem from "../components/switcher-item.vue";
+import { fitCols } from "../utils";
+
+const {
+  id,
+  title,
+  plans,
+  labels,
+  billingLabels,
+  layout = "grid",
+  cols = "1-3",
+  emphasis = "auto",
+  billing = "off",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<PricingTiersProps>();
+const emit = defineEmits<{ select: [id: string], billing: [period: string] }>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    :measure="(((layout as string) === 'stack') ? 'md' : 'default')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Group
+      v-if="((billing as string) !== 'off')"
+      gap="4"
+      align="center"
+      justify="center"
+      class="flex-wrap"
+      data-testid="billing"
+    >
+      <Switcher :label="billingLabels.label">
+        <SwitcherItem :active="((billing as string) === 'monthly')" @click="() => emit('billing', 'monthly')">
+          {{ billingLabels.monthly }}
+        </SwitcherItem>
+        <SwitcherItem :active="((billing as string) === 'annual')" @click="() => emit('billing', 'annual')">
+          {{ billingLabels.annual }}
+        </SwitcherItem>
+      </Switcher>
+      <Badge variant="default" size="default">
+        {{ billingLabels.save }}
+      </Badge>
+    </Group>
+    <EmptyState v-if="((plans?.length ?? 0) === 0)" icon="layers" :title="labels.empty" />
+    <Grid v-else
+      :cols="(((layout as string) === 'stack') ? '1' : fitCols(cols, (plans?.length ?? 0)))"
+      class="gap-4"
+      data-testid="tiers"
+    >
+      <PricingCard v-for="plan in plans" :key="plan.id"
+        :plan="plan"
+        :labels="labels"
+        :emphasis="emphasis"
+        :billing="(((billing as string) === 'annual') ? 'annual' : 'monthly')"
+        :density="(((density as string) === 'compact') ? 'compact' : 'default')"
+        @select="() => emit('select', plan.id)"
+      />
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/product-card.types.ts b/packages/vue/ui/src/blocks/product-card.types.ts
new file mode 100644
index 0000000..6faac52
--- /dev/null
+++ b/packages/vue/ui/src/blocks/product-card.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Product = {
+  id: string;
+  name: string;
+  summary: string;
+  price: number;
+  currency: string;
+  rating: number;
+  reviews: number;
+  badge?: string;
+  category: string;
+  inStock: boolean;
+  compareAt?: number;
+  href?: string;
+  image?: string;
+};
+
+export type ProductLabels = {
+  add: string;
+  soldOut: string;
+  reviews: string;
+  ratingLabel: string;
+  was: string;
+  empty: string;
+};
diff --git a/packages/vue/ui/src/blocks/product-card.vue b/packages/vue/ui/src/blocks/product-card.vue
new file mode 100644
index 0000000..ec0b738
--- /dev/null
+++ b/packages/vue/ui/src/blocks/product-card.vue
@@ -0,0 +1,131 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck
+  through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image,
+  none), ratio, rating (show, hide), action (button, none), density.
+-->
+<script lang="ts">
+import type { Product, ProductLabels } from "./product-card.types";
+
+export type ProductCardProps = {
+  product: Product;
+  labels: ProductLabels;
+  badges: Record<string, string>;
+  layout?: "vertical" | "horizontal";
+  media?: "image" | "none";
+  ratio?: "4/3" | "1/1" | "3/4";
+  rating?: "show" | "hide";
+  action?: "button" | "none";
+  density?: "default" | "compact";
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Link from "../primitives/link/link.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import MediaFrame from "../components/media-frame.vue";
+import Rating from "../components/rating.vue";
+import { at, cn, fmtMoney, tpl } from "../utils";
+
+const {
+  product,
+  labels,
+  badges,
+  layout = "vertical",
+  media = "image",
+  ratio = "4/3",
+  rating = "show",
+  action = "button",
+  density = "default",
+} = defineProps<ProductCardProps>();
+const emit = defineEmits<{ add: [id: string] }>();
+</script>
+
+<template>
+  <Block
+    tag="article"
+    :class="cn(
+      'flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded',
+      'h-full gap-4 overflow-hidden',
+      (((layout as string) === 'horizontal') ? 'flex flex-col sm:flex-row' : 'flex flex-col')
+    )"
+    data-slot="card"
+    data-testid="item"
+    :data-layout="layout"
+  >
+    <Box
+      v-if="((media as string) === 'image')"
+      :class="cn('relative shrink-0', (((layout as string) === 'horizontal') ? 'sm:w-48' : ''))"
+    >
+      <MediaFrame :alt="product.name" :src="product.image" :ratio="ratio" class="h-full" />
+      <Badge
+        v-if="product.badge"
+        variant="default"
+        size="default"
+        class="absolute left-4 top-4"
+        data-testid="badge"
+      >
+        {{ at(badges, product.badge) }}
+      </Badge>
+    </Box>
+    <CardContent class="flex flex-1 flex-col gap-2">
+      <Text size="xs" class="uppercase tracking-wide text-muted-foreground">
+        {{ product.category }}
+      </Text>
+      <Title :as="3" size="base" weight="bold">
+        <Link v-if="product.href" :href="product.href" variant="default" data-testid="open">
+          {{ product.name }}
+        </Link>
+        <template v-else>
+          {{ product.name }}
+        </template>
+      </Title>
+      <Group v-if="((rating as string) === 'show')" gap="2">
+        <Rating :value="product.rating" :label="tpl(labels.ratingLabel, product.rating)" />
+        <Text size="xs" class="text-muted-foreground">
+          {{ tpl(labels.reviews, product.reviews) }}
+        </Text>
+      </Group>
+      <Text v-if="((density as string) === 'default')" size="sm" class="text-muted-foreground">
+        {{ product.summary }}
+      </Text>
+      <Group gap="4" justify="between" class="mt-auto pt-2">
+        <Group gap="2" align="baseline" class="flex-wrap">
+          <Text size="xl" weight="bold">
+            {{ fmtMoney(product.price, product.currency) }}
+          </Text>
+          <Text
+            v-if="(product.compareAt && (product.compareAt > product.price))"
+            tag="del"
+            size="sm"
+            class="relative text-muted-foreground"
+            data-testid="compare-at"
+          >
+            <Inline class="sr-only">
+              {{ labels.was }}
+            </Inline>
+            {{ fmtMoney(product.compareAt, product.currency) }}
+          </Text>
+        </Group>
+        <Button v-if="((action as string) === 'button')"
+          :variant="(product.inStock ? 'default' : 'outline')"
+          size="sm"
+          :disabled="!product.inStock"
+          data-testid="add"
+          @click="() => emit('add', product.id)"
+        >
+          {{ (product.inStock ? labels.add : labels.soldOut) }}
+        </Button>
+      </Group>
+    </CardContent>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/product-detail.types.ts b/packages/vue/ui/src/blocks/product-detail.types.ts
new file mode 100644
index 0000000..ccba2ea
--- /dev/null
+++ b/packages/vue/ui/src/blocks/product-detail.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type ProductDetailLabels = {
+  add: string;
+  soldOut: string;
+  inStock: string;
+  qty: string;
+  decrease: string;
+  increase: string;
+  reviews: string;
+  ratingLabel: string;
+  shipping: string;
+  returns: string;
+  was: string;
+  empty: string;
+};
diff --git a/packages/vue/ui/src/blocks/product-detail.vue b/packages/vue/ui/src/blocks/product-detail.vue
new file mode 100644
index 0000000..a4193c0
--- /dev/null
+++ b/packages/vue/ui/src/blocks/product-detail.vue
@@ -0,0 +1,139 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price,
+  stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs
+  (none, below), buy (full, compact), tone, density.
+-->
+<script lang="ts">
+import type { ProductDetailLabels } from "./product-detail.types";
+import type { Product } from "./product-card.types";
+
+export type ProductDetailProps = {
+  id: string;
+  product?: Product;
+  labels: ProductDetailLabels;
+  badges: Record<string, string>;
+  level?: 1 | 2;
+  layout?: "split" | "stacked";
+  mediaSide?: "start" | "end";
+  thumbs?: "none" | "below";
+  buy?: "full" | "compact";
+  tone?: "default" | "muted";
+  density?: "default" | "roomy";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import NumberField from "../components/number-field.vue";
+import ProductGallery from "../components/product-gallery.vue";
+import ProductPrice from "../components/product-price.vue";
+import Rating from "../components/rating.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { at, tpl } from "../utils";
+
+const {
+  id,
+  product,
+  labels,
+  badges,
+  level = 1,
+  layout = "split",
+  mediaSide = "start",
+  thumbs = "below",
+  buy = "full",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<ProductDetailProps>();
+const emit = defineEmits<{ add: [id: string] }>();
+</script>
+
+<template>
+  <SectionFrame v-if="!product" :id="id" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState icon="package" :title="labels.empty" />
+  </SectionFrame>
+  <SectionFrame v-else
+    :id="id"
+    :title="product?.name"
+    :lead="product?.summary"
+    :heading="{ level }"
+    :layout="(((layout as string) === 'split') ? 'split' : 'stack')"
+    :media="{ show: true, side: mediaSide, align: 'start' }"
+    :tone="tone"
+    :density="density"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Stack gap="4" align="stretch" data-testid="buy-box">
+      <Text
+        v-if="product?.category"
+        size="xs"
+        class="uppercase tracking-wide text-muted-foreground"
+        data-testid="category"
+      >
+        {{ product?.category }}
+      </Text>
+      <ProductPrice
+        :price="product?.price"
+        :compareAt="product?.compareAt"
+        :currency="product?.currency"
+        :badge="(product?.badge ? at(badges, product?.badge) : '')"
+        :was="labels.was"
+      />
+      <Group gap="2">
+        <Rating :value="product?.rating" :label="tpl(labels.ratingLabel, product?.rating)" />
+        <Text size="sm" class="text-muted-foreground">
+          {{ tpl(labels.reviews, product?.reviews) }}
+        </Text>
+      </Group>
+      <Text
+        size="sm"
+        weight="medium"
+        :class="(product?.inStock ? 'text-foreground' : 'text-destructive')"
+        data-testid="stock"
+      >
+        {{ (product?.inStock ? labels.inStock : labels.soldOut) }}
+      </Text>
+      <Group gap="4" class="flex-wrap">
+        <NumberField v-if="((buy as string) === 'full')"
+          value="1"
+          :name="tpl('{0}-qty', id)"
+          min="1"
+          :label="labels.qty"
+          :decrease="labels.decrease"
+          :increase="labels.increase"
+        />
+        <Button :disabled="!product?.inStock" data-testid="add" @click="() => emit('add', product?.id)">
+          {{ labels.add }}
+        </Button>
+      </Group>
+      <List v-if="((buy as string) === 'full')" tag="ul" class="flex flex-col gap-2 text-sm text-muted-foreground">
+        <ListItem class="flex items-center gap-2">
+          <LucideIcon name="truck" :size="16" />
+          <Inline>
+            {{ labels.shipping }}
+          </Inline>
+        </ListItem>
+        <ListItem class="flex items-center gap-2">
+          <LucideIcon name="shield-check" :size="16" />
+          <Inline>
+            {{ labels.returns }}
+          </Inline>
+        </ListItem>
+      </List>
+    </Stack>
+    <template #aside>
+      <ProductGallery :name="product?.name" :image="product?.image" :thumbs="thumbs" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/product-grid.vue b/packages/vue/ui/src/blocks/product-grid.vue
new file mode 100644
index 0000000..4715daa
--- /dev/null
+++ b/packages/vue/ui/src/blocks/product-grid.vue
@@ -0,0 +1,89 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that
+  scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating,
+  action, tone, density.
+-->
+<script lang="ts">
+import type { Product, ProductLabels } from "./product-card.types";
+
+export type ProductGridProps = {
+  id: string;
+  title: string;
+  products: Product[];
+  labels: ProductLabels;
+  badges: Record<string, string>;
+  layout?: "grid" | "list" | "rail";
+  cols?: "1-2" | "1-3" | "1-4";
+  ratio?: "4/3" | "1/1" | "3/4";
+  rating?: "show" | "hide";
+  action?: "button" | "none";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import EmptyState from "../components/empty-state.vue";
+import ProductCard from "../blocks/product-card.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  products,
+  labels,
+  badges,
+  layout = "grid",
+  cols = "1-3",
+  ratio = "4/3",
+  rating = "show",
+  action = "button",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<ProductGridProps>();
+const emit = defineEmits<{ add: [id: string] }>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((products?.length ?? 0) === 0)" icon="package" :title="labels.empty" />
+    <Box
+      v-else-if="((layout as string) === 'rail')"
+      class="flex snap-x gap-4 overflow-x-auto pb-4"
+      data-testid="items"
+    >
+      <Box v-for="p in products" :key="p.id" class="w-64 shrink-0 snap-start">
+        <ProductCard
+          :product="p"
+          :labels="labels"
+          :badges="badges"
+          :layout="(((layout as string) === 'list') ? 'horizontal' : 'vertical')"
+          :ratio="ratio"
+          :rating="rating"
+          :action="action"
+          :density="(((density as string) === 'compact') ? 'compact' : 'default')"
+          @add="() => emit('add', p.id)"
+        />
+      </Box>
+    </Box>
+    <Grid v-else :cols="(((layout as string) === 'list') ? '1' : cols)" class="gap-4" data-testid="items">
+      <ProductCard v-for="p in products" :key="p.id"
+        :product="p"
+        :labels="labels"
+        :badges="badges"
+        :layout="(((layout as string) === 'list') ? 'horizontal' : 'vertical')"
+        :ratio="ratio"
+        :rating="rating"
+        :action="action"
+        :density="(((density as string) === 'compact') ? 'compact' : 'default')"
+        @add="() => emit('add', p.id)"
+      />
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/product-info.types.ts b/packages/vue/ui/src/blocks/product-info.types.ts
new file mode 100644
index 0000000..f315d66
--- /dev/null
+++ b/packages/vue/ui/src/blocks/product-info.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type Detail = {
+  id: string;
+  title: string;
+  text: string;
+};
+
+export type Spec = {
+  id: string;
+  label: string;
+  value: string;
+};
+
+export type ProductInfoLabels = {
+  specs: string;
+};
diff --git a/packages/vue/ui/src/blocks/product-info.vue b/packages/vue/ui/src/blocks/product-info.vue
new file mode 100644
index 0000000..9e1b6b0
--- /dev/null
+++ b/packages/vue/ui/src/blocks/product-info.vue
@@ -0,0 +1,106 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/checkout.ts -->
+<!--
+  The details of a product under its buy box: texts in an accordion (native details) beside a card with the
+  specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text
+  open, none), tone.
+-->
+<script lang="ts">
+import type { Detail, Spec, ProductInfoLabels } from "./product-info.types";
+
+export type ProductInfoProps = {
+  id: string;
+  title: string;
+  details: Detail[];
+  specs: Spec[];
+  labels: ProductInfoLabels;
+  layout?: "split" | "stacked";
+  expand?: "first" | "none";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Disclosure from "../primitives/disclosure/disclosure.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Summary from "../primitives/disclosure/summary.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  details,
+  specs,
+  labels,
+  layout = "split",
+  expand = "first",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<ProductInfoProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :landmarkLabel="landmarkLabel">
+    <Box
+      :class="
+        (layout as string) === 'split' ? 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3'
+        : 'grid grid-cols-1 gap-8'
+      "
+    >
+      <Stack v-if="((details?.length ?? 0) > 0)"
+        gap="0"
+        align="stretch"
+        :class="(((layout as string) === 'split') ? 'lg:col-span-2' : '')"
+        data-testid="items"
+      >
+        <Disclosure
+          v-for="(d, i) in details"
+          :key="d.id"
+          variant="item"
+          :open="(((expand as string) === 'first') && (i === 0))"
+          data-testid="item"
+        >
+          <Summary variant="item">
+            <Inline class="text-base font-semibold">
+              {{ d.title }}
+            </Inline>
+          </Summary>
+          <Text size="sm" class="pb-4 text-muted-foreground">
+            {{ d.text }}
+          </Text>
+        </Disclosure>
+      </Stack>
+      <Stack
+        v-if="((specs?.length ?? 0) > 0)"
+        gap="4"
+        align="stretch"
+        class="rounded bg-card inset-ring inset-ring-border p-6"
+        data-testid="specs"
+      >
+        <Title :as="3" size="lg" weight="bold">
+          {{ labels.specs }}
+        </Title>
+        <List tag="ul" class="flex flex-col">
+          <ListItem v-for="s in specs" :key="s.id"
+            class="flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0"
+            data-testid="spec"
+          >
+            <Inline class="text-muted-foreground">
+              {{ s.label }}
+            </Inline>
+            <Inline class="font-medium">
+              {{ s.value }}
+            </Inline>
+          </ListItem>
+        </List>
+      </Stack>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/profile-form.types.ts b/packages/vue/ui/src/blocks/profile-form.types.ts
new file mode 100644
index 0000000..3ac275b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/profile-form.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/account.ts
+
+export type ProfileLabels = {
+  picture: string;
+  change: string;
+  name: string;
+  email: string;
+  bio: string;
+  prefs: string;
+  updates: string;
+  alerts: string;
+  save: string;
+  cancel: string;
+};
diff --git a/packages/vue/ui/src/blocks/profile-form.vue b/packages/vue/ui/src/blocks/profile-form.vue
new file mode 100644
index 0000000..861d01b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/profile-form.vue
@@ -0,0 +1,118 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/account.ts -->
+<!--
+  An account settings form: a picture with a change button, name, email, bio and two notification switches, with
+  save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default,
+  muted).
+-->
+<script lang="ts">
+import type { ProfileLabels } from "./profile-form.types";
+
+export type ProfileFormProps = {
+  id: string;
+  title: string;
+  text: string;
+  labels: ProfileLabels;
+  layout?: "stacked" | "split";
+  avatar?: "show" | "hide";
+  prefs?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Button from "../primitives/button/button.vue";
+import Container from "../primitives/container/container.vue";
+import Form from "../primitives/form/form.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import Input from "../primitives/input/input.vue";
+import Label from "../primitives/label/label.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Switch from "../primitives/switch/switch.vue";
+import Textarea from "../primitives/textarea/textarea.vue";
+import Title from "../primitives/title/title.vue";
+import Field from "../components/field.vue";
+import MediaFrame from "../components/media-frame.vue";
+import Panel from "../components/panel.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  labels,
+  layout = "stacked",
+  avatar = "show",
+  prefs = "show",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<ProfileFormProps>();
+</script>
+
+<template>
+  <Block
+    tag="section"
+    :aria-labelledby="(landmarkLabel ? undefined : ((title && id) ? tpl('{0}-t', id) : undefined))"
+    data-testid="panel-section"
+    :aria-label="landmarkLabel"
+  >
+    <Container class="mx-auto w-full max-w-6xl px-4 py-8" data-slot="container">
+      <Panel
+        :title="title"
+        :description="text"
+        :id="id"
+        :class="cn((((tone as string) === 'muted') ? 'bg-muted' : ''))"
+      >
+        <Form method="dialog" class="gap-6" data-testid="profile-form">
+          <Grid :cols="(((layout as string) === 'split') ? '1-2' : '1')" class="items-start gap-8">
+            <Stack gap="4" align="stretch">
+              <Group v-if="((avatar as string) === 'show')" gap="4" align="center" data-testid="avatar">
+                <MediaFrame :alt="labels.picture" ratio="1/1" class="size-16 shrink-0 rounded-full" />
+                <Button variant="outline" size="sm" type="button">
+                  {{ labels.change }}
+                </Button>
+              </Group>
+              <Field :label="labels.name" :htmlFor="tpl('{0}-name', id)">
+                <Input type="text" name="name" autocomplete="name" :id="tpl('{0}-name', id)" data-testid="field" />
+              </Field>
+              <Field :label="labels.email" :htmlFor="tpl('{0}-email', id)">
+                <Input type="email" name="email" autocomplete="email" :id="tpl('{0}-email', id)" data-testid="field" />
+              </Field>
+              <Field :label="labels.bio" :htmlFor="tpl('{0}-bio', id)">
+                <Textarea :rows="4" name="bio" :id="tpl('{0}-bio', id)" data-testid="field" />
+              </Field>
+            </Stack>
+            <Stack v-if="((prefs as string) === 'show')" gap="4" align="stretch" data-testid="prefs">
+              <Title :as="3" size="base" weight="bold">
+                {{ labels.prefs }}
+              </Title>
+              <Group gap="4" align="center" justify="between">
+                <Label :for="tpl('{0}-updates', id)" class="text-sm">
+                  {{ labels.updates }}
+                </Label>
+                <Switch name="updates" :id="tpl('{0}-updates', id)" />
+              </Group>
+              <Group gap="4" align="center" justify="between">
+                <Label :for="tpl('{0}-alerts', id)" class="text-sm">
+                  {{ labels.alerts }}
+                </Label>
+                <Switch name="alerts" :id="tpl('{0}-alerts', id)" />
+              </Group>
+            </Stack>
+          </Grid>
+          <Group gap="2" class="flex-wrap">
+            <Button variant="default" size="default" type="submit" data-testid="submit">
+              {{ labels.save }}
+            </Button>
+            <Button variant="outline" size="default" type="button">
+              {{ labels.cancel }}
+            </Button>
+          </Group>
+        </Form>
+      </Panel>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/project-grid.types.ts b/packages/vue/ui/src/blocks/project-grid.types.ts
new file mode 100644
index 0000000..1075407
--- /dev/null
+++ b/packages/vue/ui/src/blocks/project-grid.types.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/work.ts
+
+export type Project = {
+  id: string;
+  title: string;
+  category: string;
+  year: number;
+  summary: string;
+  tags: string[];
+  featured: boolean;
+  client: string;
+  href?: string;
+};
+
+export type ProjectLabels = {
+  featured: string;
+  view: string;
+  case: string;
+};
diff --git a/packages/vue/ui/src/blocks/project-grid.vue b/packages/vue/ui/src/blocks/project-grid.vue
new file mode 100644
index 0000000..8b23479
--- /dev/null
+++ b/packages/vue/ui/src/blocks/project-grid.vue
@@ -0,0 +1,94 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/work.ts -->
+<!--
+  Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the
+  picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay,
+  bento, list), tone, density.
+-->
+<script lang="ts">
+import type { Project, ProjectLabels } from "./project-grid.types";
+
+export type ProjectGridProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  projects: Project[];
+  empty?: string;
+  labels: ProjectLabels;
+  layout?: "cards" | "compact" | "overlay" | "bento" | "list";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import ProjectTiles from "../components/project-tiles.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  projects,
+  empty = "",
+  labels,
+  layout = "cards",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<ProjectGridProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :tone="tone"
+    :density="density"
+    :layout="(((layout as string) === 'list') ? 'split' : 'stack')"
+    :media="{ show: ((layout as string) === 'list'), align: 'start' }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((projects?.length ?? 0) === 0)" icon="folder-open" :title="empty" />
+    <Stack v-else-if="((layout as string) === 'list')" gap="4" align="stretch" data-testid="items">
+      <Group
+        v-for="p in projects"
+        :key="p.id"
+        gap="4"
+        align="start"
+        class="border-b border-border pb-4"
+        data-testid="item"
+      >
+        <MediaFrame :alt="p.title" ratio="1/1" class="size-16 shrink-0" />
+        <Stack gap="2" align="stretch" class="flex-1">
+          <Group gap="4" justify="between">
+            <Text size="sm" weight="semibold">
+              {{ p.title }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {{ p.year }}
+            </Text>
+          </Group>
+          <Text size="sm" class="text-muted-foreground">
+            {{ p.summary }}
+          </Text>
+        </Stack>
+      </Group>
+    </Stack>
+    <ProjectTiles v-else :projects="projects" :labels="labels" :layout="layout" />
+    <template #aside>
+      <Box class="grid grid-cols-2 gap-4" data-testid="collage">
+        <MediaFrame :alt="title" ratio="3/4" />
+        <MediaFrame :alt="title" ratio="3/4" class="mt-8" />
+      </Box>
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/proof-band.vue b/packages/vue/ui/src/blocks/proof-band.vue
new file mode 100644
index 0000000..7b60771
--- /dev/null
+++ b/packages/vue/ui/src/blocks/proof-band.vue
@@ -0,0 +1,79 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above,
+  beside), logos (name, icon), tone, density.
+-->
+<script lang="ts">
+import type { Logo } from "./logo-cloud.types";
+import type { Stat } from "./stats-band.types";
+
+export type ProofBandProps = {
+  id: string;
+  title: string;
+  logos: Logo[];
+  empty?: string;
+  stats: Stat[];
+  layout?: "above" | "beside";
+  logoStyle?: "name" | "icon";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  logos,
+  empty = "",
+  stats,
+  layout = "above",
+  logoStyle = "name",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<ProofBandProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    align="center"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((logos?.length ?? 0) === 0)" icon="building-2" :title="empty" />
+    <Grid v-else :cols="(((layout as string) === 'beside') ? '1-2' : '1')" class="items-center gap-8">
+      <Group gap="6" justify="center" class="flex-wrap text-muted-foreground" data-testid="logos">
+        <Group v-for="logo in logos" :key="logo.id" gap="2" align="center" data-testid="logo">
+          <LucideIcon :name="logo.icon" :size="24" />
+          <Text size="sm" weight="semibold" :class="(((logoStyle as string) === 'icon') ? 'sr-only' : '')">
+            {{ logo.name }}
+          </Text>
+        </Group>
+      </Group>
+      <Grid :cols="(((layout as string) === 'beside') ? '2' : '1-4')" class="gap-6 text-center" data-testid="stats">
+        <Stack v-for="stat in stats" :key="stat.id" gap="0" align="center" data-testid="stat">
+          <Text size="4xl" weight="bold">
+            {{ stat.value }}
+          </Text>
+          <Text size="sm" class="text-muted-foreground">
+            {{ stat.label }}
+          </Text>
+        </Stack>
+      </Grid>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/quote-split.types.ts b/packages/vue/ui/src/blocks/quote-split.types.ts
new file mode 100644
index 0000000..2f2e305
--- /dev/null
+++ b/packages/vue/ui/src/blocks/quote-split.types.ts
@@ -0,0 +1,13 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/quote-split.ts
+
+import type { Stat } from "./stats-band.types";
+import type { Logo } from "./logo-cloud.types";
+
+export type QuoteExtras = {
+  stats: Stat[];
+  logos: Logo[];
+  rating: number;
+  score: string;
+  reviews: string;
+};
diff --git a/packages/vue/ui/src/blocks/quote-split.vue b/packages/vue/ui/src/blocks/quote-split.vue
new file mode 100644
index 0000000..223e227
--- /dev/null
+++ b/packages/vue/ui/src/blocks/quote-split.vue
@@ -0,0 +1,134 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/quote-split.ts -->
+<!--
+  Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture,
+  logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three
+  stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured
+  quote beside a stack), mediaSide, tone.
+-->
+<script lang="ts">
+import type { QuoteExtras } from "./quote-split.types";
+import type { Quote, QuoteLabels } from "./testimonial-grid.types";
+import type { Stat } from "./stats-band.types";
+import type { Logo } from "./logo-cloud.types";
+import type { LinkActions } from "./error-page.types";
+
+export type QuoteSplitProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  quotes: Quote[];
+  labels: QuoteLabels;
+  extras: QuoteExtras;
+  actions: LinkActions;
+  layout?: "media" | "logos" | "rating" | "stack" | "compact" | "bento";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  empty?: string;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Stack from "../primitives/stack/stack.vue";
+import ActionGroup from "../components/action-group.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import QuoteFigures from "../components/quote-figures.vue";
+import QuoteLogoTiles from "../components/quote-logo-tiles.vue";
+import QuoteRatingPanel from "../components/quote-rating-panel.vue";
+import QuoteSlot from "../components/quote-slot.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  quotes,
+  labels,
+  extras,
+  actions,
+  layout = "media",
+  mediaSide = "end",
+  tone = "default",
+  empty = "",
+  landmarkLabel,
+} = defineProps<QuoteSplitProps>();
+</script>
+
+<template>
+  <SectionFrame v-if="((quotes?.length ?? 0) === 0)"
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState icon="quote" :title="empty" />
+  </SectionFrame>
+  <SectionFrame v-else-if="(((layout as string) === 'compact') || ((layout as string) === 'bento'))"
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <QuoteFigures v-if="((layout as string) === 'bento')" :extras="extras" />
+    <Box
+      :class="
+        (layout as string) === 'bento' ? 'grid grid-cols-1 gap-4 lg:grid-cols-2'
+        : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'
+      "
+    >
+      <QuoteSlot v-for="(q, i) in quotes" :key="q.id"
+        :q="q"
+        :labels="labels"
+        :layout="((((layout as string) === 'bento') && (i === 0)) ? 'single' : 'grid')"
+        :class="((((layout as string) === 'bento') && (i === 0)) ? 'lg:row-span-3' : '')"
+      />
+    </Box>
+  </SectionFrame>
+  <SectionFrame v-else
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    layout="split"
+    :media="{ show: true, side: mediaSide }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <template v-if="(((layout as string) === 'media') || ((layout as string) === 'logos') || ((layout as string) === 'rating'))">
+      <template v-for="(q, i) in quotes" :key="q.id">
+        <QuoteSlot v-if="(i < 1)"
+          :q="q"
+          :labels="labels"
+          :kind="(((layout as string) === 'media') ? 'card' : 'plain')"
+          layout="single"
+          class=""
+        />
+      </template>
+    </template>
+    <QuoteLogoTiles v-if="((layout as string) === 'logos')" :extras="extras" />
+    <Stack v-if="((layout as string) === 'stack')" gap="4" align="stretch">
+      <template v-for="(q, i) in quotes" :key="q.id">
+        <QuoteSlot v-if="(i < 3)" :q="q" :labels="labels" layout="stack" class="" />
+      </template>
+    </Stack>
+    <ActionGroup v-if="(((layout as string) === 'media') || ((layout as string) === 'logos') || ((layout as string) === 'rating'))"
+      :primary="actions.cta"
+      :primaryHref="actions.href"
+      :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+      :secondaryHref="actions.secondaryHref"
+    />
+    <template #aside>
+      <QuoteRatingPanel v-if="((layout as string) === 'rating')" :extras="extras" :labels="labels" />
+      <MediaFrame v-else :alt="title" ratio="4/3" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/review-list.types.ts b/packages/vue/ui/src/blocks/review-list.types.ts
new file mode 100644
index 0000000..f4aac17
--- /dev/null
+++ b/packages/vue/ui/src/blocks/review-list.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/commerce.ts
+
+export type Review = {
+  id: string;
+  title: string;
+  author: string;
+  rating: number;
+  text: string;
+  date: string;
+};
+
+export type ReviewLabels = {
+  ratingLabel: string;
+  empty: string;
+};
diff --git a/packages/vue/ui/src/blocks/review-list.vue b/packages/vue/ui/src/blocks/review-list.vue
new file mode 100644
index 0000000..77de1a2
--- /dev/null
+++ b/packages/vue/ui/src/blocks/review-list.vue
@@ -0,0 +1,98 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/commerce.ts -->
+<!--
+  Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid),
+  columns, item (card, plain), avatar (none, image), tone, density.
+-->
+<script lang="ts">
+import type { Review, ReviewLabels } from "./review-list.types";
+
+export type ReviewListProps = {
+  id: string;
+  title: string;
+  reviews: Review[];
+  labels: ReviewLabels;
+  layout?: "list" | "grid";
+  item?: "card" | "plain";
+  avatar?: "none" | "image";
+  tone?: "default" | "muted";
+  density?: "default" | "roomy";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import ArticleBlock from "../components/article-block.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import Rating from "../components/rating.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  reviews,
+  labels,
+  layout = "list",
+  item = "card",
+  avatar = "none",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<ReviewListProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    :measure="(((layout as string) === 'list') ? '2xl' : 'default')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((reviews?.length ?? 0) === 0)" icon="message-square-quote" :title="labels.empty" />
+    <Grid :cols="(((layout as string) === 'grid') ? '1-3' : '1')" class="gap-4" data-testid="items">
+      <ArticleBlock v-for="r in reviews" :key="r.id"
+        :class="cn(
+          'flex h-full flex-col gap-4',
+          (
+            (item as string) === 'card' ? 'rounded bg-card p-6 inset-ring inset-ring-border'
+            : 'border-b border-border pb-4'
+          )
+        )"
+        testid="item"
+      >
+        <Rating :value="r.rating" :label="tpl(labels.ratingLabel, r.rating)" />
+        <Title :as="3" size="base" weight="bold">
+          {{ r.title }}
+        </Title>
+        <Text size="sm" class="text-muted-foreground">
+          {{ r.text }}
+        </Text>
+        <Group gap="4" align="center" class="mt-auto">
+          <MediaFrame
+            v-if="((avatar as string) === 'image')"
+            :alt="r.author"
+            ratio="1/1"
+            class="size-10 shrink-0 rounded-full"
+          />
+          <Stack gap="0">
+            <Text size="sm" weight="semibold">
+              {{ r.author }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {{ r.date }}
+            </Text>
+          </Stack>
+        </Group>
+      </ArticleBlock>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/shopping-cart.types.ts b/packages/vue/ui/src/blocks/shopping-cart.types.ts
new file mode 100644
index 0000000..9e785e9
--- /dev/null
+++ b/packages/vue/ui/src/blocks/shopping-cart.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/checkout.ts
+
+export type ShoppingCartLabels = {
+  back: string;
+  clear: string;
+  empty: string;
+};
diff --git a/packages/vue/ui/src/blocks/shopping-cart.vue b/packages/vue/ui/src/blocks/shopping-cart.vue
new file mode 100644
index 0000000..25fe28e
--- /dev/null
+++ b/packages/vue/ui/src/blocks/shopping-cart.vue
@@ -0,0 +1,133 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/checkout.ts -->
+<!--
+  The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the
+  way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout
+  (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.
+-->
+<script lang="ts">
+import type { ShoppingCartLabels } from "./shopping-cart.types";
+import type { CartLine, CartLabels } from "./cart-list.types";
+import type { SummaryRow } from "./order-summary.types";
+import type { Promo, CartSummaryLabels } from "../components/cart-summary-card.types";
+
+export type ShoppingCartProps = {
+  id: string;
+  title: string;
+  lines: CartLine[];
+  rows: SummaryRow[];
+  promos: Promo[];
+  labels: CartLabels;
+  totals: CartSummaryLabels;
+  actions: ShoppingCartLabels;
+  layout?: "split" | "stacked";
+  promo?: "show" | "hide";
+  progress?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import CartSummaryCard from "../components/cart-summary-card.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import NumberField from "../components/number-field.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { fmtMoney, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lines,
+  rows,
+  promos,
+  labels,
+  totals,
+  actions,
+  layout = "split",
+  promo = "show",
+  progress = "show",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<ShoppingCartProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :landmarkLabel="landmarkLabel">
+    <Box
+      :class="
+        (layout as string) === 'split' ? 'grid grid-cols-1 items-start gap-8 lg:grid-cols-3'
+        : 'grid grid-cols-1 gap-8'
+      "
+    >
+      <Stack
+        gap="4"
+        align="stretch"
+        :class="(((layout as string) === 'split') ? 'lg:col-span-2' : '')"
+        data-testid="lines"
+      >
+        <EmptyState v-if="((lines?.length ?? 0) === 0)" icon="shopping-cart" :title="actions.empty" />
+        <Group v-for="line in lines" :key="line.id"
+          gap="4"
+          align="center"
+          class="rounded bg-card inset-ring inset-ring-border flex-wrap p-4"
+          data-testid="item"
+        >
+          <MediaFrame :alt="line.name" ratio="1/1" class="size-20 shrink-0" />
+          <Stack gap="0" class="min-w-40 flex-1">
+            <Text size="sm" weight="semibold">
+              {{ line.name }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {{ line.variant }}
+            </Text>
+            <Text size="sm">
+              {{ fmtMoney(line.price, line.currency) }}
+            </Text>
+          </Stack>
+          <NumberField
+            :value="(line.qty == null ? undefined : String(line.qty))"
+            :name="tpl('{0}-qty-{1}', id, line.id)"
+            min="1"
+            :label="labels.qty"
+            :decrease="labels.decrease"
+            :increase="labels.increase"
+          />
+          <Text size="base" weight="bold" class="w-24 text-right">
+            {{ fmtMoney((line.price * line.qty), line.currency) }}
+          </Text>
+          <Button variant="ghost" size="sm" layout="icon" :aria-label="labels.remove" data-testid="remove">
+            <LucideIcon name="trash" :size="16" />
+          </Button>
+        </Group>
+        <Group gap="4" justify="between" class="flex-wrap">
+          <Button variant="outline" size="default">
+            <LucideIcon name="arrow-left" :size="16" />
+            {{ actions.back }}
+          </Button>
+          <Button variant="ghost" size="default">
+            {{ actions.clear }}
+          </Button>
+        </Group>
+      </Stack>
+      <Box :class="(((layout as string) === 'split') ? 'lg:sticky lg:top-8' : '')" data-testid="aside">
+        <CartSummaryCard
+          :field="tpl('{0}-promo', id)"
+          :lines="lines"
+          :rows="rows"
+          :promos="promos"
+          :labels="totals"
+          :promo="promo"
+          :progress="progress"
+        />
+      </Box>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/sidebar-nav.vue b/packages/vue/ui/src/blocks/sidebar-nav.vue
new file mode 100644
index 0000000..9794ab4
--- /dev/null
+++ b/packages/vue/ui/src/blocks/sidebar-nav.vue
@@ -0,0 +1,118 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full:
+  icon and name, compact: icons only with the name hidden), user (show, hide), density.
+-->
+<script lang="ts">
+import type { NavLink } from "./nav-bar.types";
+
+export type SidebarNavProps = {
+  label: string;
+  brand: string;
+  links: NavLink[];
+  current?: string;
+  userName: string;
+  userEmail: string;
+  width?: "full" | "compact";
+  user?: "show" | "hide";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  label,
+  brand,
+  links,
+  current = "",
+  userName,
+  userEmail,
+  width = "full",
+  user = "show",
+  density = "default",
+  landmarkLabel,
+} = defineProps<SidebarNavProps>();
+</script>
+
+<template>
+  <Block
+    tag="aside"
+    :class="cn(
+      'flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border',
+      (((width as string) === 'compact') ? 'w-20 items-center' : 'w-64')
+    )"
+    :aria-label="(landmarkLabel ?? brand)"
+    data-testid="sidebar"
+    :data-width="width"
+  >
+    <Group gap="2" align="center">
+      <LucideIcon name="layers" :size="24" />
+      <Text size="base" weight="bold" :class="(((width as string) === 'compact') ? 'sr-only' : '')">
+        {{ brand }}
+      </Text>
+    </Group>
+    <NavBlock
+      v-if="((links?.length ?? 0) > 0)"
+      :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', label, landmarkLabel)) : label)"
+      class="flex-1"
+    >
+      <List
+        :class="cn(
+          'm-0 flex list-none flex-col p-0',
+          (((density as string) === 'compact') ? 'gap-0' : 'gap-2')
+        )"
+        data-testid="items"
+      >
+        <ListItem v-for="l in links" :key="l.id">
+          <MenuEntry
+            :href="l.href"
+            :class="cn(
+              'flex items-center gap-4 rounded px-4 text-sm',
+              'py-2',
+              ((l.id === current) ? 'bg-muted font-semibold' : '')
+            )"
+            :current="(l.id === current)"
+            testid="item"
+          >
+            <LucideIcon :name="l.icon" :size="16" />
+            <Inline :class="(((width as string) === 'compact') ? 'sr-only' : '')">
+              {{ l.name }}
+            </Inline>
+          </MenuEntry>
+        </ListItem>
+      </List>
+    </NavBlock>
+    <Group
+      v-if="((user as string) === 'show')"
+      gap="4"
+      align="center"
+      class="border-t border-border pt-4"
+      data-testid="user"
+    >
+      <MediaFrame :alt="userName" ratio="1/1" class="size-10 shrink-0 rounded-full" />
+      <Stack gap="0" :class="(((width as string) === 'compact') ? 'sr-only' : 'min-w-0')">
+        <Text size="sm" weight="semibold">
+          {{ userName }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ userEmail }}
+        </Text>
+      </Stack>
+    </Group>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/signup-wizard.types.ts b/packages/vue/ui/src/blocks/signup-wizard.types.ts
new file mode 100644
index 0000000..bfaf060
--- /dev/null
+++ b/packages/vue/ui/src/blocks/signup-wizard.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/signup.ts
+
+export type WizardStep = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+  fieldA: string;
+  fieldB: string;
+};
+
+export type WizardLabels = {
+  stepOf: string;
+  steps: string;
+  back: string;
+  next: string;
+  finish: string;
+};
diff --git a/packages/vue/ui/src/blocks/signup-wizard.vue b/packages/vue/ui/src/blocks/signup-wizard.vue
new file mode 100644
index 0000000..c428c9c
--- /dev/null
+++ b/packages/vue/ui/src/blocks/signup-wizard.vue
@@ -0,0 +1,135 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/signup.ts -->
+<!--
+  A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown,
+  counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values
+  between steps is the page's job.
+-->
+<script lang="ts">
+import type { WizardStep, WizardLabels } from "./signup-wizard.types";
+
+export type SignupWizardProps = {
+  id: string;
+  title: string;
+  steps: WizardStep[];
+  labels: WizardLabels;
+  current?: number;
+  level?: 1 | 2;
+  progress?: "bar" | "list";
+  layout?: "card" | "plain";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Input from "../primitives/input/input.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Progress from "../primitives/form/progress.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import Field from "../components/field.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  steps,
+  labels,
+  current = 1,
+  level = 2,
+  progress = "bar",
+  layout = "card",
+  landmarkLabel,
+} = defineProps<SignupWizardProps>();
+const emit = defineEmits<{ go: [step: number] }>();
+</script>
+
+<template>
+  <Block v-if="((steps?.length ?? 0) > 0)"
+    tag="section"
+    :class="cn(
+      'mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8',
+      (((layout as string) === 'card') ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')
+    )"
+    :aria-labelledby="(landmarkLabel ? undefined : tpl('{0}-title', id))"
+    data-testid="wizard"
+    :data-current="(current == null ? undefined : String(current))"
+    :aria-label="landmarkLabel"
+  >
+    <Title :as="level" size="2xl" weight="bold" :id="tpl('{0}-title', id)">
+      {{ title }}
+    </Title>
+    <Text size="sm" class="text-muted-foreground" data-testid="step-of">
+      {{ tpl(labels.stepOf, current, (steps?.length ?? 0)) }}
+    </Text>
+    <Progress v-if="((progress as string) === 'bar')"
+      :value="(current == null ? undefined : String(current))"
+      :max="((steps?.length ?? 0) == null ? undefined : String((steps?.length ?? 0)))"
+      :aria-label="labels.steps"
+    />
+    <List
+      v-if="((progress as string) === 'list')"
+      class="m-0 flex list-none flex-col gap-2 p-0"
+      :aria-label="labels.steps"
+      data-testid="step-list"
+    >
+      <ListItem v-for="(s, i) in steps" :key="s.id"
+        :class="cn(
+          'flex items-center gap-4 text-sm',
+          (((i + 1) === current) ? 'font-semibold' : 'text-muted-foreground')
+        )"
+        :aria-current="(((i + 1) === current) ? 'step' : undefined)"
+        data-testid="step-item"
+      >
+        <LucideIcon :name="(((i + 1) < current) ? 'circle-check' : s.icon)" :size="16" />
+        {{ s.title }}
+      </ListItem>
+    </List>
+    <template v-for="(s, i) in steps" :key="s.id">
+      <Stack v-if="((i + 1) === current)" gap="4" align="stretch" data-testid="step">
+        <Title :as="3" size="xl" weight="bold">
+          {{ s.title }}
+        </Title>
+        <Text size="sm" class="text-muted-foreground">
+          {{ s.text }}
+        </Text>
+        <Box class="grid gap-4">
+          <Field :label="s.fieldA" :htmlFor="tpl('{0}-a', id)">
+            <Input type="text" :name="tpl('{0}-a', id)" :id="tpl('{0}-a', id)" data-testid="field" />
+          </Field>
+          <Field :label="s.fieldB" :htmlFor="tpl('{0}-b', id)">
+            <Input type="text" :name="tpl('{0}-b', id)" :id="tpl('{0}-b', id)" data-testid="field" />
+          </Field>
+        </Box>
+      </Stack>
+    </template>
+    <Group gap="2" justify="between">
+      <Button
+        variant="outline"
+        size="default"
+        type="button"
+        :disabled="(current < 2)"
+        data-testid="wizard-back"
+        @click="() => emit('go', (current - 1))"
+      >
+        {{ labels.back }}
+      </Button>
+      <Button
+        variant="default"
+        size="default"
+        type="button"
+        data-testid="wizard-next"
+        @click="() => emit('go', (current + 1))"
+      >
+        {{ ((current >= (steps?.length ?? 0)) ? labels.finish : labels.next) }}
+      </Button>
+    </Group>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/site-footer.types.ts b/packages/vue/ui/src/blocks/site-footer.types.ts
new file mode 100644
index 0000000..be44645
--- /dev/null
+++ b/packages/vue/ui/src/blocks/site-footer.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type SiteFooterLabels = {
+  copyright: string;
+  nav: string;
+  home: string;
+  pricing: string;
+};
diff --git a/packages/vue/ui/src/blocks/site-footer.vue b/packages/vue/ui/src/blocks/site-footer.vue
new file mode 100644
index 0000000..184b8a8
--- /dev/null
+++ b/packages/vue/ui/src/blocks/site-footer.vue
@@ -0,0 +1,70 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/site.ts -->
+<!--
+  The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density
+  (default, compact).
+-->
+<script lang="ts">
+import type { SiteFooterLabels } from "./site-footer.types";
+import type { SiteRoutes } from "./site-header.types";
+
+export type SiteFooterProps = {
+  labels: SiteFooterLabels;
+  routes?: SiteRoutes;
+  layout?: "minimal" | "centered";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Container from "../primitives/container/container.vue";
+import Group from "../primitives/group/group.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  labels,
+  routes,
+  layout = "minimal",
+  density = "default",
+  landmarkLabel,
+} = defineProps<SiteFooterProps>();
+</script>
+
+<template>
+  <Block
+    tag="footer"
+    class="mt-12 border-t border-border"
+    data-testid="site-footer"
+    :data-layout="layout"
+    :aria-label="landmarkLabel"
+  >
+    <Container
+      :class="cn(
+        'mx-auto w-full max-w-6xl px-4',
+        'flex flex-wrap items-center gap-4',
+        (((density as string) === 'compact') ? 'py-4' : 'py-6'),
+        (((layout as string) === 'centered') ? 'flex-col text-center' : 'justify-between')
+      )"
+      data-slot="container"
+    >
+      <Text size="sm" class="text-muted-foreground" data-testid="copyright">
+        {{ labels.copyright }}
+      </Text>
+      <NavBlock :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', labels.nav, landmarkLabel)) : labels.nav)">
+        <Group gap="4">
+          <MenuEntry :href="routes?.home" class="font-semibold">
+            {{ labels.home }}
+          </MenuEntry>
+          <MenuEntry :href="routes?.pricing" class="font-semibold">
+            {{ labels.pricing }}
+          </MenuEntry>
+        </Group>
+      </NavBlock>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/site-header.types.ts b/packages/vue/ui/src/blocks/site-header.types.ts
new file mode 100644
index 0000000..0ef0ca2
--- /dev/null
+++ b/packages/vue/ui/src/blocks/site-header.types.ts
@@ -0,0 +1,16 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/site.ts
+
+export type SiteHeaderLabels = {
+  skip: string;
+  brand: string;
+  nav: string;
+  home: string;
+  pricing: string;
+  theme: string;
+};
+
+export type SiteRoutes = {
+  home?: string;
+  pricing?: string;
+};
diff --git a/packages/vue/ui/src/blocks/site-header.vue b/packages/vue/ui/src/blocks/site-header.vue
new file mode 100644
index 0000000..c1900a1
--- /dev/null
+++ b/packages/vue/ui/src/blocks/site-header.vue
@@ -0,0 +1,117 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/site.ts -->
+<!--
+  The page header: a skip link to the main content, the brand, the two navigation links (the current one carries
+  aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position
+  (static, sticky), actions (none, cta).
+-->
+<script lang="ts">
+import type { SiteHeaderLabels, SiteRoutes } from "./site-header.types";
+
+export type SiteHeaderProps = {
+  labels: SiteHeaderLabels;
+  routes?: SiteRoutes;
+  current: string;
+  layout?: "inline" | "stacked";
+  position?: "static" | "sticky";
+  actions?: "none" | "cta";
+  cta?: string;
+  ctaHref?: string;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Button from "../primitives/button/button.vue";
+import Container from "../primitives/container/container.vue";
+import Group from "../primitives/group/group.vue";
+import LinkPlain from "../primitives/link-plain/link-plain.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  labels,
+  routes,
+  current,
+  layout = "inline",
+  position = "static",
+  actions = "none",
+  cta,
+  ctaHref,
+  landmarkLabel,
+} = defineProps<SiteHeaderProps>();
+const emit = defineEmits<{ theme: [] }>();
+</script>
+
+<template>
+  <Block
+    tag="header"
+    :class="cn(
+      'border-b border-border bg-background',
+      (((position as string) === 'sticky') ? 'sticky top-0 z-40' : '')
+    )"
+    data-testid="site-header"
+    :data-layout="layout"
+    :aria-label="landmarkLabel"
+  >
+    <LinkPlain
+      href="#main-content"
+      :class="'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background ' +
+        'focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border'"
+      data-testid="skip-link"
+    >
+      {{ labels.skip }}
+    </LinkPlain>
+    <Container
+      :class="cn(
+        'mx-auto w-full max-w-6xl px-4',
+        'flex flex-wrap gap-4 py-4',
+        (((layout as string) === 'stacked') ? 'flex-col items-center' : 'items-center justify-between')
+      )"
+      data-slot="container"
+    >
+      <MenuEntry :href="routes?.home" class="text-lg font-medium" testid="brand">
+        {{ labels.brand }}
+      </MenuEntry>
+      <NavBlock
+        :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', labels.nav, landmarkLabel)) : labels.nav)"
+        testid="site-nav"
+      >
+        <Group gap="4" align="center">
+          <MenuEntry
+            :href="routes?.home"
+            class="font-semibold"
+            :current="((current as string) === 'home')"
+            testid="nav-link"
+          >
+            {{ labels.home }}
+          </MenuEntry>
+          <MenuEntry
+            :href="routes?.pricing"
+            class="font-semibold"
+            :current="((current as string) === 'pricing')"
+            testid="nav-link"
+          >
+            {{ labels.pricing }}
+          </MenuEntry>
+        </Group>
+      </NavBlock>
+      <Group gap="4" align="center">
+        <Button variant="outline" size="sm" data-testid="theme-toggle" @click="() => emit('theme')">
+          {{ labels.theme }}
+        </Button>
+        <Button
+          v-if="(((actions as string) === 'cta') && cta)"
+          variant="default"
+          size="sm"
+          :href="ctaHref"
+          data-testid="header-cta"
+        >
+          {{ cta }}
+        </Button>
+      </Group>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/sitemap-footer.types.ts b/packages/vue/ui/src/blocks/sitemap-footer.types.ts
new file mode 100644
index 0000000..ca75815
--- /dev/null
+++ b/packages/vue/ui/src/blocks/sitemap-footer.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/navigation.ts
+
+export type FooterSignup = {
+  /** first: the sign-up comes before the links */
+  mode?: "none" | "first";
+  title?: string;
+  /** accessible name of the email field */
+  label?: string;
+  submit?: string;
+};
+
+export type FooterStatus = {
+  /** show: the status pill is drawn */
+  mode?: "none" | "show";
+  /** text of the pill */
+  label?: string;
+};
diff --git a/packages/vue/ui/src/blocks/sitemap-footer.vue b/packages/vue/ui/src/blocks/sitemap-footer.vue
new file mode 100644
index 0000000..2a27e75
--- /dev/null
+++ b/packages/vue/ui/src/blocks/sitemap-footer.vue
@@ -0,0 +1,143 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/navigation.ts -->
+<!--
+  A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above,
+  equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none,
+  first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status
+  itself is a port contract.
+-->
+<script lang="ts">
+import type { FooterSignup, FooterStatus } from "./sitemap-footer.types";
+import type { MegaGroup } from "./mega-menu.types";
+
+export type SitemapFooterProps = {
+  label: string;
+  brand: string;
+  tagline: string;
+  copyright: string;
+  groups: MegaGroup[];
+  signup?: FooterSignup;
+  status?: FooterStatus;
+  id?: string;
+  layout?: "columns" | "row" | "card";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Container from "../primitives/container/container.vue";
+import Form from "../primitives/form/form.vue";
+import Group from "../primitives/group/group.vue";
+import Input from "../primitives/input/input.vue";
+import Label from "../primitives/label/label.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import FooterCard from "../components/footer-card.vue";
+import FooterColumns from "../components/footer-columns.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import Pill from "../components/pill.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  label,
+  brand,
+  tagline,
+  copyright,
+  groups,
+  signup,
+  status,
+  id = "footer",
+  layout = "columns",
+  density = "default",
+  landmarkLabel,
+} = defineProps<SitemapFooterProps>();
+</script>
+
+<template>
+  <FooterCard
+    v-if="((layout as string) === 'card')"
+    :label="label"
+    :brand="brand"
+    :groups="groups"
+    :landmarkLabel="landmarkLabel"
+  />
+  <Block v-else
+    tag="footer"
+    class="mt-12 border-t border-border"
+    data-testid="site-footer"
+    :data-layout="layout"
+    :aria-label="landmarkLabel"
+  >
+    <Container
+      :class="cn(
+        'mx-auto w-full max-w-6xl px-4',
+        'flex flex-col gap-8',
+        (((density as string) === 'compact') ? 'py-6' : 'py-12')
+      )"
+      data-slot="container"
+    >
+      <Stack v-if="(signup?.mode === 'first')" gap="4" class="max-w-md" data-testid="signup">
+        <Title :as="3" size="xl" weight="bold">
+          {{ signup?.title }}
+        </Title>
+        <Form method="dialog" :class="cn('w-full max-w-md', (false ? 'mx-auto' : ''))" data-testid="email-form">
+          <Label :for="tpl('{0}-email', id)" class="sr-only">
+            {{ signup?.label }}
+          </Label>
+          <Group gap="2" align="start" class="w-full flex-wrap">
+            <Input type="email" name="email" class="min-w-0 flex-1" :id="tpl('{0}-email', id)" data-testid="field" />
+            <Button variant="default" size="default" type="submit" data-testid="submit">
+              {{ signup?.submit }}
+            </Button>
+          </Group>
+        </Form>
+      </Stack>
+      <Box
+        v-if="((layout as string) === 'columns')"
+        class="flex flex-col gap-8 md:flex-row md:items-start md:gap-12"
+        data-slot="footer-top"
+      >
+        <Stack gap="2" class="md:w-64 md:shrink-0">
+          <Text size="xl" weight="bold">
+            {{ brand }}
+          </Text>
+          <Text size="sm" class="text-muted-foreground">
+            {{ tagline }}
+          </Text>
+        </Stack>
+        <Box class="min-w-0 flex-1">
+          <FooterColumns :label="label" :groups="groups" :landmarkLabel="landmarkLabel" />
+        </Box>
+      </Box>
+      <Group v-else gap="6" align="center" justify="between" class="flex-wrap">
+        <Text size="base" weight="bold">
+          {{ brand }}
+        </Text>
+        <NavBlock
+          v-if="((groups?.length ?? 0) > 0)"
+          :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', label, landmarkLabel)) : label)"
+        >
+          <Group gap="4" class="flex-wrap">
+            <MenuEntry v-for="g in groups" :key="g.id" :href="g.href" class="text-sm" testid="group">
+              {{ g.title }}
+            </MenuEntry>
+          </Group>
+        </NavBlock>
+      </Group>
+      <Group gap="4" align="center" justify="between" class="flex-wrap border-t border-border pt-6">
+        <Text size="sm" class="text-muted-foreground">
+          {{ copyright }}
+        </Text>
+        <Pill v-if="(status?.mode === 'show')" tone="green" icon="circle-check">
+          {{ status?.label }}
+        </Pill>
+      </Group>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/blocks/skeleton-layout.types.ts b/packages/vue/ui/src/blocks/skeleton-layout.types.ts
new file mode 100644
index 0000000..b2c05ba
--- /dev/null
+++ b/packages/vue/ui/src/blocks/skeleton-layout.types.ts
@@ -0,0 +1,6 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Line = {
+  id: string;
+};
diff --git a/packages/vue/ui/src/blocks/skeleton-layout.vue b/packages/vue/ui/src/blocks/skeleton-layout.vue
new file mode 100644
index 0000000..275f0a6
--- /dev/null
+++ b/packages/vue/ui/src/blocks/skeleton-layout.vue
@@ -0,0 +1,75 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or
+  an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content
+  is loading. The shimmer itself belongs to the Skeleton part.
+-->
+<script lang="ts">
+import type { Line } from "./skeleton-layout.types";
+
+export type SkeletonLayoutProps = {
+  id: string;
+  title: string;
+  label: string;
+  lines: Line[];
+  shape?: "cards" | "list" | "article";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import Skeleton from "../primitives/skeleton/skeleton.vue";
+import Stack from "../primitives/stack/stack.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  label,
+  lines,
+  shape = "cards",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<SkeletonLayoutProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :landmarkLabel="landmarkLabel">
+    <Block tag="div" class="w-full" role="status" :aria-label="label" data-testid="skeleton" :data-shape="shape">
+      <Grid v-if="((shape as string) === 'cards')" cols="1-3" class="gap-4">
+        <Stack
+          v-for="l in lines"
+          :key="l.id"
+          gap="4"
+          class="rounded bg-card inset-ring inset-ring-border p-4"
+          data-testid="item"
+        >
+          <Skeleton class="aspect-video w-full" />
+          <Skeleton class="h-4 w-2/3" />
+          <Skeleton class="h-4 w-full" />
+        </Stack>
+      </Grid>
+      <Stack v-else-if="((shape as string) === 'list')" gap="4" align="stretch">
+        <Group v-for="l in lines" :key="l.id" gap="4" align="center" data-testid="item">
+          <Skeleton class="size-10 shrink-0 rounded-full" />
+          <Stack gap="2" class="flex-1">
+            <Skeleton class="h-4 w-1/3" />
+            <Skeleton class="h-4 w-full" />
+          </Stack>
+        </Group>
+      </Stack>
+      <Stack v-else gap="4" align="stretch" class="mx-auto max-w-2xl">
+        <Skeleton class="h-8 w-3/4" />
+        <Stack v-for="l in lines" :key="l.id" gap="2" data-testid="item">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-5/6" />
+        </Stack>
+      </Stack>
+    </Block>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/slot-board.types.ts b/packages/vue/ui/src/blocks/slot-board.types.ts
new file mode 100644
index 0000000..a128b0b
--- /dev/null
+++ b/packages/vue/ui/src/blocks/slot-board.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type SlotLabels = {
+  zone: string;
+  price: string;
+  freeFrom: string;
+  time: string;
+  primary: string;
+  secondary: string;
+  note: string;
+};
diff --git a/packages/vue/ui/src/blocks/slot-board.vue b/packages/vue/ui/src/blocks/slot-board.vue
new file mode 100644
index 0000000..7af5486
--- /dev/null
+++ b/packages/vue/ui/src/blocks/slot-board.vue
@@ -0,0 +1,116 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/delivery.ts -->
+<!--
+  Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and
+  the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item
+  (card, plain), tone.
+-->
+<script lang="ts">
+import type { SlotLabels } from "./slot-board.types";
+import type { Day } from "../components/slot-grid.types";
+import type { Zone } from "./zone-table.types";
+
+export type SlotBoardProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  days: Day[];
+  empty?: string;
+  zone: Zone;
+  labels: SlotLabels;
+  layout?: "split" | "stacked";
+  item?: "card" | "plain";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Select from "../primitives/select/select.vue";
+import SelectOption from "../primitives/select/select-option.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import Field from "../components/field.vue";
+import SectionFrame from "../components/section-frame.vue";
+import SlotGrid from "../components/slot-grid.vue";
+import { fmtMoney, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  days,
+  empty = "",
+  zone,
+  labels,
+  layout = "split",
+  item = "card",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<SlotBoardProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :lead="lead" :tone="tone" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((days?.length ?? 0) === 0)" icon="calendar" :title="empty" />
+    <Box v-else class="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+      <Box :class="(((layout as string) === 'split') ? 'lg:col-span-2' : 'lg:col-span-3')">
+        <SlotGrid :days="days" :name="tpl('{0}-slot', id)" :item="item" />
+      </Box>
+      <Stack
+        v-if="((layout as string) === 'split')"
+        gap="4"
+        align="stretch"
+        class="rounded bg-card inset-ring inset-ring-border p-6"
+        data-testid="aside"
+      >
+        <Field :label="labels.zone" :htmlFor="tpl('{0}-zone', id)">
+          <Select :name="tpl('{0}-zone', id)" :id="tpl('{0}-zone', id)">
+            <SelectOption :value="zone.id" :label="zone.name" :selected="true" />
+          </Select>
+        </Field>
+        <List tag="ul" class="flex flex-col gap-2">
+          <ListItem class="flex items-center justify-between gap-4 text-sm">
+            <Inline class="text-muted-foreground">
+              {{ labels.price }}
+            </Inline>
+            <Inline class="font-medium">
+              {{ fmtMoney(zone.price, zone.currency) }}
+            </Inline>
+          </ListItem>
+          <ListItem class="flex items-center justify-between gap-4 text-sm">
+            <Inline class="text-muted-foreground">
+              {{ labels.freeFrom }}
+            </Inline>
+            <Inline class="font-medium">
+              {{ fmtMoney(zone.freeFrom, zone.currency) }}
+            </Inline>
+          </ListItem>
+          <ListItem class="flex items-center justify-between gap-4 text-sm">
+            <Inline class="text-muted-foreground">
+              {{ labels.time }}
+            </Inline>
+            <Inline class="font-medium">
+              {{ zone.time }}
+            </Inline>
+          </ListItem>
+        </List>
+        <Button variant="default" size="default" class="w-full">
+          {{ labels.primary }}
+        </Button>
+        <Button variant="outline" size="default" class="w-full">
+          {{ labels.secondary }}
+        </Button>
+        <Text size="xs" class="text-muted-foreground">
+          {{ labels.note }}
+        </Text>
+      </Stack>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/stats-band.types.ts b/packages/vue/ui/src/blocks/stats-band.types.ts
new file mode 100644
index 0000000..5e5e229
--- /dev/null
+++ b/packages/vue/ui/src/blocks/stats-band.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Stat = {
+  id: string;
+  label: string;
+  value: string;
+  icon: string;
+  hint: string;
+};
diff --git a/packages/vue/ui/src/blocks/stats-band.vue b/packages/vue/ui/src/blocks/stats-band.vue
new file mode 100644
index 0000000..303e0f4
--- /dev/null
+++ b/packages/vue/ui/src/blocks/stats-band.vue
@@ -0,0 +1,101 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!--
+  Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3,
+  4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may
+  be empty.
+-->
+<script lang="ts">
+import type { Stat } from "./stats-band.types";
+
+export type StatsBandProps = {
+  id: string;
+  title?: string;
+  stats: Stat[];
+  empty?: string;
+  cols?: "2" | "3" | "4";
+  layout?: "row" | "stack";
+  surface?: "none" | "image" | "panel";
+  item?: "plain" | "card" | "icon";
+  align?: "start" | "center";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Grid from "../primitives/grid/grid.vue";
+import Backdrop from "../components/backdrop.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import StatFigure from "../components/stat-figure.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const {
+  id,
+  title = "",
+  stats,
+  empty = "",
+  cols = "4",
+  layout = "row",
+  surface = "none",
+  item = "plain",
+  align = "center",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<StatsBandProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    :align="align"
+    :measure="
+      (surface as string) === 'panel' ? 'fill'
+      : (layout as string) === 'stack' ? 'xs'
+      : 'default'
+    "
+    :class="cn(
+      cn((((surface as string) === 'image') ? 'bg-transparent' : ''), (((surface as string) === 'panel') ? 'py-0' : '')),
+      (
+        (((surface as string) === 'image') ? 'image' : 'none') === 'image' ? 'relative isolate overflow-hidden'
+        : ''
+      )
+    )"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Backdrop :kind="(((surface as string) === 'image') ? 'image' : 'none')" :alt="title" />
+    <EmptyState v-if="((stats?.length ?? 0) === 0)" icon="chart-column" :title="empty" />
+    <Grid v-else-if="((surface as string) === 'panel')"
+      :cols="
+        (cols as string) === '2' ? '2'
+        : (cols as string) === '3' ? '2-3'
+        : (cols as string) === '4' ? '2-4'
+        : '3-6'
+      "
+      :class="cn('w-full items-center bg-muted px-6', defaults.stats.panel)"
+      data-testid="items"
+    >
+      <StatFigure v-for="stat in stats" :key="stat.id" :stat="stat" :item="item" :align="align" />
+    </Grid>
+    <Grid v-else
+      :cols="
+        (layout as string) === 'stack' ? '1'
+        : (cols as string) === '2' ? '2'
+        : (cols as string) === '3' ? '2-3'
+        : (cols as string) === '4' ? '2-4'
+        : '3-6'
+      "
+      class="gap-6"
+      data-testid="items"
+    >
+      <StatFigure v-for="stat in stats" :key="stat.id" :stat="stat" :item="item" :align="align" />
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/stepper.vue b/packages/vue/ui/src/blocks/stepper.vue
new file mode 100644
index 0000000..7effdf5
--- /dev/null
+++ b/packages/vue/ui/src/blocks/stepper.vue
@@ -0,0 +1,116 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/dashboard.ts -->
+<!--
+  A multi-step form header: the steps with the current one marked (aria-current step), and the current step's
+  text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show,
+  hide).
+-->
+<script lang="ts">
+import type { Step } from "./steps-list.types";
+
+export type StepperProps = {
+  id: string;
+  title: string;
+  steps: Step[];
+  current?: number;
+  stepLabel: string;
+  back: string;
+  next: string;
+  layout?: "horizontal" | "vertical";
+  marker?: "number" | "icon";
+  summary?: "show" | "hide";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import IconBadge from "../primitives/iconbadge/icon-badge.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  steps,
+  current = 2,
+  stepLabel,
+  back,
+  next,
+  layout = "horizontal",
+  marker = "number",
+  summary = "show",
+  landmarkLabel,
+} = defineProps<StepperProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" measure="3xl" :landmarkLabel="landmarkLabel">
+    <Stack v-if="((steps?.length ?? 0) > 0)" gap="6" align="stretch" data-testid="stepper">
+      <Text size="sm" class="text-muted-foreground">
+        {{ tpl(stepLabel, current, (steps?.length ?? 0)) }}
+      </Text>
+      <List
+        tag="ol"
+        :class="cn(
+          'm-0 flex list-none gap-4 p-0',
+          (((layout as string) === 'vertical') ? 'flex-col' : 'flex-col sm:flex-row')
+        )"
+        data-testid="items"
+      >
+        <ListItem v-for="(s, i) in steps" :key="s.id"
+          class="flex flex-1 items-center gap-4"
+          data-testid="item"
+          :aria-current="(((i + 1) === current) ? 'step' : undefined)"
+        >
+          <IconBadge
+            :variant="(((i + 1) < (current + 1)) ? 'primary' : 'outline')"
+            size="sm"
+            :class="(((i + 1) < (current + 1)) ? 'text-sm' : 'text-sm text-muted-foreground')"
+          >
+            <LucideIcon v-if="((marker as string) === 'icon')" :name="s.icon" :size="16" />
+            <Inline v-else class="text-sm font-bold">
+              {{ ((i + 1) == null ? undefined : String((i + 1))) }}
+            </Inline>
+          </IconBadge>
+          <Text size="sm" :weight="(((i + 1) === current) ? 'bold' : 'semibold')">
+            {{ s.title }}
+          </Text>
+        </ListItem>
+      </List>
+      <template v-if="((summary as string) === 'show')">
+        <template v-for="(s, i) in steps" :key="s.id">
+          <Stack
+            v-if="((i + 1) === current)"
+            gap="2"
+            class="rounded bg-card p-6 inset-ring inset-ring-border"
+            data-testid="step-summary"
+          >
+            <Title :as="3" size="xl" weight="bold">
+              {{ s.title }}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {{ s.text }}
+            </Text>
+            <Group gap="2" class="pt-2">
+              <Button variant="outline" size="sm" type="button">
+                {{ back }}
+              </Button>
+              <Button variant="default" size="sm" type="button">
+                {{ next }}
+              </Button>
+            </Group>
+          </Stack>
+        </template>
+      </template>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/steps-list.types.ts b/packages/vue/ui/src/blocks/steps-list.types.ts
new file mode 100644
index 0000000..f2bb96f
--- /dev/null
+++ b/packages/vue/ui/src/blocks/steps-list.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Step = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/vue/ui/src/blocks/steps-list.vue b/packages/vue/ui/src/blocks/steps-list.vue
new file mode 100644
index 0000000..1b053c0
--- /dev/null
+++ b/packages/vue/ui/src/blocks/steps-list.vue
@@ -0,0 +1,92 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!--
+  How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon),
+  align, density, tone.
+-->
+<script lang="ts">
+import type { Step } from "./steps-list.types";
+
+export type StepsListProps = {
+  id: string;
+  title: string;
+  steps: Step[];
+  empty?: string;
+  layout?: "row" | "column";
+  marker?: "number" | "icon";
+  align?: "start" | "center";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import IconBadge from "../primitives/iconbadge/icon-badge.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  steps,
+  empty = "",
+  layout = "row",
+  marker = "number",
+  align = "start",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<StepsListProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    :align="align"
+    :measure="(((layout as string) === 'row') ? 'default' : '2xl')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((steps?.length ?? 0) === 0)" icon="list-ordered" :title="empty" />
+    <List v-else
+      tag="ol"
+      :class="cn('grid gap-6', (((layout as string) === 'row') ? 'sm:grid-cols-2 md:grid-cols-4' : ''))"
+      data-testid="items"
+    >
+      <ListItem v-for="(step, i) in steps" :key="step.id"
+        :class="cn(
+          'flex gap-4',
+          (((layout as string) === 'row') ? 'flex-col' : ''),
+          (((align as string) === 'center') ? 'items-center text-center' : '')
+        )"
+        data-testid="item"
+      >
+        <IconBadge variant="primary" data-slot="marker">
+          <LucideIcon v-if="((marker as string) === 'icon')" :name="step.icon" :size="20" />
+          <Inline v-else class="text-base font-bold">
+            {{ ((i + 1) == null ? undefined : String((i + 1))) }}
+          </Inline>
+        </IconBadge>
+        <Stack gap="2" :align="(((align as string) === 'center') ? 'center' : 'start')">
+          <Title :as="3" size="xl" weight="bold">
+            {{ step.title }}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {{ step.text }}
+          </Text>
+        </Stack>
+      </ListItem>
+    </List>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/store-hero.types.ts b/packages/vue/ui/src/blocks/store-hero.types.ts
new file mode 100644
index 0000000..3ded713
--- /dev/null
+++ b/packages/vue/ui/src/blocks/store-hero.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/storefront.ts
+
+export type OfferCard = {
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/vue/ui/src/blocks/store-hero.vue b/packages/vue/ui/src/blocks/store-hero.vue
new file mode 100644
index 0000000..a0abc3d
--- /dev/null
+++ b/packages/vue/ui/src/blocks/store-hero.vue
@@ -0,0 +1,131 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/storefront.ts -->
+<!--
+  The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay
+  layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text
+  over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.
+-->
+<script lang="ts">
+import type { OfferCard } from "./store-hero.types";
+import type { Feature } from "./feature-grid.types";
+import type { LinkActions } from "./error-page.types";
+
+export type StoreHeroProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  level?: 1 | 2;
+  actions: LinkActions;
+  perks: Feature[];
+  card: OfferCard;
+  layout?: "overlay" | "backdrop";
+  mediaSide?: "end" | "start";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import ActionGroup from "../components/action-group.vue";
+import Backdrop from "../components/backdrop.vue";
+import OfferMedia from "../components/offer-media.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  level = 1,
+  actions,
+  perks,
+  card,
+  layout = "overlay",
+  mediaSide = "end",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<StoreHeroProps>();
+</script>
+
+<template>
+  <SectionFrame v-if="((layout as string) === 'backdrop')"
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge, level }"
+    :tone="tone"
+    density="roomy"
+    measure="3xl"
+    :class="(('image' === 'image') ? 'relative isolate overflow-hidden' : '')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Backdrop kind="image" :alt="title" />
+    <ActionGroup
+      :primary="actions.cta"
+      :primaryHref="actions.href"
+      :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+      :secondaryHref="actions.secondaryHref"
+    />
+    <Grid v-if="((perks?.length ?? 0) > 0)" cols="1-3" class="gap-4" data-testid="perks">
+      <template v-for="(p, i) in perks" :key="p.id">
+        <Group v-if="(i < 3)" gap="4" align="start" data-testid="perk">
+          <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+            <LucideIcon :name="p.icon" :size="20" />
+          </Box>
+          <Stack gap="0">
+            <Text size="sm" weight="semibold">
+              {{ p.title }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {{ p.text }}
+            </Text>
+          </Stack>
+        </Group>
+      </template>
+    </Grid>
+  </SectionFrame>
+  <SectionFrame v-else
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge, level }"
+    layout="split"
+    :media="{ show: true, side: mediaSide }"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <ActionGroup
+      :primary="actions.cta"
+      :primaryHref="actions.href"
+      :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+      :secondaryHref="actions.secondaryHref"
+    />
+    <Grid v-if="((perks?.length ?? 0) > 0)" cols="1-3" class="gap-4" data-testid="perks">
+      <template v-for="(p, i) in perks" :key="p.id">
+        <Group v-if="(i < 3)" gap="4" align="start" data-testid="perk">
+          <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+            <LucideIcon :name="p.icon" :size="20" />
+          </Box>
+          <Stack gap="0">
+            <Text size="sm" weight="semibold">
+              {{ p.title }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {{ p.text }}
+            </Text>
+          </Stack>
+        </Group>
+      </template>
+    </Grid>
+    <template #aside>
+      <OfferMedia :alt="title" :card="card" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/store-locations.types.ts b/packages/vue/ui/src/blocks/store-locations.types.ts
new file mode 100644
index 0000000..8d88fff
--- /dev/null
+++ b/packages/vue/ui/src/blocks/store-locations.types.ts
@@ -0,0 +1,17 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type Store = {
+  id: string;
+  name: string;
+  kind: string;
+  address: string;
+  hours: string;
+  phone: string;
+  note: string;
+  services: string[];
+};
+
+export type StoreLabels = {
+  map: string;
+};
diff --git a/packages/vue/ui/src/blocks/store-locations.vue b/packages/vue/ui/src/blocks/store-locations.vue
new file mode 100644
index 0000000..ac4bd46
--- /dev/null
+++ b/packages/vue/ui/src/blocks/store-locations.vue
@@ -0,0 +1,130 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/delivery.ts -->
+<!--
+  The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the
+  services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.
+-->
+<script lang="ts">
+import type { Store, StoreLabels } from "./store-locations.types";
+
+export type StoreLocationsProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  stores: Store[];
+  empty?: string;
+  kinds: Record<string, string>;
+  labels: StoreLabels;
+  layout?: "cards" | "list" | "map";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Link from "../primitives/link/link.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { at, cn, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  stores,
+  empty = "",
+  kinds,
+  labels,
+  layout = "cards",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<StoreLocationsProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :lead="lead" :tone="tone" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((stores?.length ?? 0) === 0)" icon="store" :title="empty" />
+    <Box v-else
+      :class="cn(
+        'grid grid-cols-1 gap-8',
+        (((layout as string) === 'map') ? 'items-start md:grid-cols-2' : '')
+      )"
+    >
+      <Box
+        :class="
+          (layout as string) === 'cards' ? 'grid grid-cols-1 gap-4 md:grid-cols-2'
+          : 'flex flex-col gap-4'
+        "
+        data-testid="items"
+      >
+        <Stack v-for="s in stores" :key="s.id"
+          gap="4"
+          :class="
+            (layout as string) === 'list' ? 'border-b border-border pb-4'
+            : 'rounded bg-card inset-ring inset-ring-border p-6'
+          "
+          data-testid="item"
+        >
+          <Stack gap="2">
+            <Badge variant="outline" size="default" class="w-fit">
+              {{ at(kinds, s.kind) }}
+            </Badge>
+            <Title :as="3" size="lg" weight="bold">
+              {{ s.name }}
+            </Title>
+          </Stack>
+          <List
+            tag="ul"
+            :class="
+              (layout as string) === 'list' ? 'flex flex-wrap gap-x-8 gap-y-2 text-sm'
+              : 'flex flex-col gap-2 text-sm'
+            "
+          >
+            <ListItem class="flex items-center gap-2">
+              <LucideIcon name="map-pin" :size="16" />
+              <Inline>
+                {{ s.address }}
+              </Inline>
+            </ListItem>
+            <ListItem class="flex items-center gap-2">
+              <LucideIcon name="clock" :size="16" />
+              <Inline>
+                {{ s.hours }}
+              </Inline>
+            </ListItem>
+            <ListItem class="flex items-center gap-2">
+              <LucideIcon name="phone" :size="16" />
+              <Link :href="tpl('tel:{0}', s.phone)" variant="default">
+                {{ (s.phone ?? "").replaceAll(" ", "\u00a0") }}
+              </Link>
+            </ListItem>
+          </List>
+          <template v-if="((layout as string) === 'cards')">
+            <Text size="sm" class="text-muted-foreground">
+              {{ s.note }}
+            </Text>
+            <Group gap="2" class="flex-wrap">
+              <Badge v-for="v in s.services" :key="v" variant="secondary" size="default">
+                {{ v }}
+              </Badge>
+            </Group>
+          </template>
+        </Stack>
+      </Box>
+      <Box v-if="((layout as string) === 'map')" class="md:sticky md:top-8">
+        <MediaFrame :alt="labels.map" ratio="1/1" />
+      </Box>
+    </Box>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/story-tabs.types.ts b/packages/vue/ui/src/blocks/story-tabs.types.ts
new file mode 100644
index 0000000..04d1dc0
--- /dev/null
+++ b/packages/vue/ui/src/blocks/story-tabs.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/story-tabs.ts
+
+export type StoryLabels = {
+  step: string;
+  previous: string;
+  next: string;
+};
diff --git a/packages/vue/ui/src/blocks/story-tabs.vue b/packages/vue/ui/src/blocks/story-tabs.vue
new file mode 100644
index 0000000..03772b2
--- /dev/null
+++ b/packages/vue/ui/src/blocks/story-tabs.vue
@@ -0,0 +1,136 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/story-tabs.ts -->
+<!--
+  A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year
+  with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next
+  arrows and one dot per step), tone. Choosing a step emits `select`.
+-->
+<script lang="ts">
+import type { StoryLabels } from "./story-tabs.types";
+import type { Milestone } from "./milestone-timeline.types";
+
+export type StoryTabsProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  badge?: string;
+  steps: Milestone[];
+  empty?: string;
+  active: string;
+  labels: StoryLabels;
+  layout?: "years" | "carousel";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import StoryDots from "../components/story-dots.vue";
+import StoryPanel from "../components/story-panel.vue";
+
+const {
+  id,
+  title,
+  lead = "",
+  badge = "",
+  steps,
+  empty = "",
+  active,
+  labels,
+  layout = "years",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<StoryTabsProps>();
+const emit = defineEmits<{ select: [id: string] }>();
+</script>
+
+<template>
+  <SectionFrame v-if="((steps?.length ?? 0) === 0)"
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState icon="milestone" :title="empty" />
+  </SectionFrame>
+  <SectionFrame v-else-if="((layout as string) === 'years')"
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Box class="grid grid-cols-2 gap-2 sm:grid-cols-4" data-testid="story-tabs">
+      <Button v-for="s in steps" :key="s.id"
+        :variant="((s.id === active) ? 'default' : 'outline')"
+        size="lg"
+        type="button"
+        class="h-auto flex-col items-start gap-0 py-2 text-start"
+        data-testid="story-tab"
+        :data-active="((s.id === active) ? 'true' : 'false')"
+        @click="() => emit('select', s.id)"
+      >
+        <Inline class="text-sm font-semibold">
+          {{ s.date }}
+        </Inline>
+        <Inline class="text-xs">
+          {{ s.tag }}
+        </Inline>
+      </Button>
+    </Box>
+    <template v-for="(s, i) in steps" :key="s.id">
+      <StoryPanel v-if="(s.id === active)" :s="s" :index="i" :total="(steps?.length ?? 0)" :labels="labels" />
+    </template>
+  </SectionFrame>
+  <SectionFrame v-else
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :heading="{ badge }"
+    :tone="tone"
+    layout="split"
+    :media="{ show: true }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <template #aside>
+      <Stack gap="4" align="stretch">
+        <MediaFrame :alt="title" ratio="4/3" />
+        <Group gap="4" align="center" justify="between">
+          <Button
+            variant="outline"
+            size="sm"
+            layout="icon"
+            type="button"
+            :aria-label="labels.previous"
+            data-testid="story-arrow"
+          >
+            <LucideIcon name="chevron-left" :size="16" />
+          </Button>
+          <StoryDots :steps="steps" :active="active" />
+          <Button
+            variant="outline"
+            size="sm"
+            layout="icon"
+            type="button"
+            :aria-label="labels.next"
+            data-testid="story-arrow"
+          >
+            <LucideIcon name="chevron-right" :size="16" />
+          </Button>
+        </Group>
+      </Stack>
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/support-channels.vue b/packages/vue/ui/src/blocks/support-channels.vue
new file mode 100644
index 0000000..fb229cd
--- /dev/null
+++ b/packages/vue/ui/src/blocks/support-channels.vue
@@ -0,0 +1,77 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/promo.ts -->
+<!--
+  Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout
+  (grid, list), columns, action (link, none), tone (default, muted).
+-->
+<script lang="ts">
+import type { Feature } from "./feature-grid.types";
+
+export type SupportChannelsProps = {
+  id: string;
+  title: string;
+  channels: Feature[];
+  empty?: string;
+  open: string;
+  layout?: "grid" | "list";
+  cols?: "1-2" | "1-3";
+  action?: "link" | "none";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Card from "../primitives/card/card.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import Grid from "../primitives/grid/grid.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  channels,
+  empty = "",
+  open,
+  layout = "grid",
+  cols = "1-3",
+  action = "link",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<SupportChannelsProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((channels?.length ?? 0) === 0)" icon="life-buoy" :title="empty" />
+    <Grid v-else :cols="(((layout as string) === 'list') ? '1' : cols)" class="gap-4" data-testid="items">
+      <Card v-for="c in channels" :key="c.id"
+        variant="default"
+        :class="cn('h-full', (((layout as string) === 'list') ? 'flex-row items-center' : ''))"
+        data-testid="item"
+      >
+        <CardContent :class="cn('flex flex-1 gap-4', (((layout as string) === 'list') ? 'items-center' : 'flex-col'))">
+          <LucideIcon :name="c.icon" :size="24" />
+          <Stack gap="2" class="flex-1">
+            <Title :as="3" size="base" weight="bold">
+              {{ c.title }}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {{ c.text }}
+            </Text>
+          </Stack>
+          <MenuEntry v-if="((action as string) === 'link')" :href="c.href" class="font-semibold" testid="open">
+            {{ open }}
+          </MenuEntry>
+        </CardContent>
+      </Card>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/team-grid.types.ts b/packages/vue/ui/src/blocks/team-grid.types.ts
new file mode 100644
index 0000000..fefd4c8
--- /dev/null
+++ b/packages/vue/ui/src/blocks/team-grid.types.ts
@@ -0,0 +1,12 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/people.ts
+
+export type Member = {
+  id: string;
+  name: string;
+  role: string;
+  dept: string;
+  location: string;
+  bio: string;
+  skills: string[];
+};
diff --git a/packages/vue/ui/src/blocks/team-grid.vue b/packages/vue/ui/src/blocks/team-grid.vue
new file mode 100644
index 0000000..5916165
--- /dev/null
+++ b/packages/vue/ui/src/blocks/team-grid.vue
@@ -0,0 +1,117 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/people.ts -->
+<!--
+  The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows
+  beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory),
+  cols, tone, density.
+-->
+<script lang="ts">
+import type { Member } from "./team-grid.types";
+
+export type TeamGridProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  members: Member[];
+  empty?: string;
+  depts: Record<string, string>;
+  layout?: "cards" | "minimal" | "detailed" | "list" | "directory";
+  cols?: "1-3" | "1-4";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import MemberRow from "../components/member-row.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  members,
+  empty = "",
+  depts,
+  layout = "cards",
+  cols = "1-4",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<TeamGridProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :tone="tone"
+    :density="density"
+    :layout="(((layout as string) === 'list') ? 'split' : 'stack')"
+    :media="{ show: ((layout as string) === 'list'), side: 'start', align: 'start' }"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((members?.length ?? 0) === 0)" icon="users" :title="empty" />
+    <Box v-else
+      :class="
+        (layout as string) === 'minimal' ? 'grid grid-cols-2 gap-8 md:grid-cols-4'
+        : (layout as string) === 'directory' ? 'grid grid-cols-1 gap-4 md:grid-cols-2'
+        : (layout as string) === 'list' ? 'flex flex-col gap-4'
+        : (cols as string) === '1-3' ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'
+        : 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4'
+      "
+      data-testid="items"
+    >
+      <template v-for="m in members" :key="m.id">
+        <Stack
+          v-if="((layout as string) === 'minimal')"
+          gap="2"
+          align="center"
+          class="text-center"
+          data-testid="item"
+        >
+          <MediaFrame :alt="m.name" ratio="1/1" :class="cn('size-16', 'shrink-0')" />
+          <Text size="sm" weight="semibold">
+            {{ m.name }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ m.role }}
+          </Text>
+        </Stack>
+        <Stack
+          v-else-if="((layout as string) === 'cards')"
+          gap="4"
+          class="rounded bg-card inset-ring inset-ring-border p-4"
+          data-testid="item"
+        >
+          <MediaFrame :alt="m.name" ratio="1/1" />
+          <Stack gap="2">
+            <Stack gap="0">
+              <Text size="base" weight="semibold">
+                {{ m.name }}
+              </Text>
+              <Text size="sm" class="text-muted-foreground">
+                {{ m.role }}
+              </Text>
+            </Stack>
+            <Text size="sm" class="text-muted-foreground">
+              {{ m.bio }}
+            </Text>
+          </Stack>
+        </Stack>
+        <MemberRow v-else :member="m" :depts="depts" :layout="layout" />
+      </template>
+    </Box>
+    <template #aside>
+      <MediaFrame :alt="title" ratio="3/4" />
+    </template>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/template-grid.types.ts b/packages/vue/ui/src/blocks/template-grid.types.ts
new file mode 100644
index 0000000..3a51f9a
--- /dev/null
+++ b/packages/vue/ui/src/blocks/template-grid.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/templates.ts
+
+export type Template = {
+  id: string;
+  title: string;
+  views: string;
+  likes: string;
+  topic: string;
+};
+
+export type Filter = {
+  id: string;
+  title: string;
+  value: string;
+  icon?: string;
+};
+
+export type TemplateLabels = {
+  filters: string;
+  browse: string;
+  views: string;
+  likes: string;
+};
diff --git a/packages/vue/ui/src/blocks/template-grid.vue b/packages/vue/ui/src/blocks/template-grid.vue
new file mode 100644
index 0000000..272430e
--- /dev/null
+++ b/packages/vue/ui/src/blocks/template-grid.vue
@@ -0,0 +1,142 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/templates.ts -->
+<!--
+  Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all
+  button.
+-->
+<script lang="ts">
+import type { Template, Filter, TemplateLabels } from "./template-grid.types";
+
+export type TemplateGridProps = {
+  id: string;
+  title: string;
+  templates: Template[];
+  filters: Filter[];
+  browseHref?: string;
+  labels: TemplateLabels;
+  cols?: "1-3" | "1-4";
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  empty?: string;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import IconBadge from "../primitives/iconbadge/icon-badge.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  templates,
+  filters,
+  browseHref,
+  labels,
+  cols = "1-4",
+  tone = "default",
+  density = "compact",
+  empty = "",
+  landmarkLabel,
+} = defineProps<TemplateGridProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :tone="tone"
+    :density="density"
+    measure="fill"
+    class="py-0"
+    :landmarkLabel="landmarkLabel"
+  >
+    <Stack gap="8" align="stretch">
+      <Group gap="4" align="center" justify="between" class="h-8 w-full flex-wrap">
+        <Title :as="2" size="2xl" weight="semibold" class="leading-9" :id="(id + '-title')">
+          {{ title }}
+        </Title>
+        <Group v-if="((filters?.length ?? 0) > 0)"
+          gap="4"
+          align="center"
+          class="flex-wrap"
+          role="group"
+          :aria-label="labels.filters"
+          data-testid="template-filters"
+        >
+          <Button
+            v-for="f in filters"
+            :key="f.id"
+            variant="outline"
+            size="sm"
+            type="button"
+            class="gap-2"
+            data-testid="template-filter"
+          >
+            <LucideIcon v-if="f.icon" :name="f.icon" :size="16" />
+            {{ f.title }}
+          </Button>
+        </Group>
+      </Group>
+      <EmptyState v-if="((templates?.length ?? 0) === 0)" icon="layout-template" :title="empty" />
+      <Grid v-else :cols="cols" class="w-full gap-6" data-testid="template-grid">
+        <Box v-for="t in templates" :key="t.id"
+          :class="cn(
+            'flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border',
+            defaults.templates.card
+          )"
+          data-testid="template-card"
+        >
+          <Box :class="cn('shrink-0 overflow-hidden', defaults.templates.image)">
+            <MediaFrame :alt="t.title" :class="cn('size-full', defaults.media.rounded)" />
+          </Box>
+          <Group gap="4" align="center" :class="cn('w-full', defaults.templates.footer)" data-testid="template-footer">
+            <IconBadge size="sm" class="overflow-hidden" data-testid="template-avatar">
+              <LucideIcon name="layout-template" :size="16" />
+            </IconBadge>
+            <Stack gap="0" class="min-w-0 flex-1">
+              <Title :as="3" size="base" weight="semibold" class="truncate leading-6">
+                {{ t.title }}
+              </Title>
+              <Group gap="4" align="center" class="h-4 text-muted-foreground">
+                <Group gap="2" align="center">
+                  <LucideIcon name="eye" :size="16" />
+                  <Inline class="sr-only">
+                    {{ labels.views }}
+                  </Inline>
+                  <Text size="xs" weight="bold" class="leading-4">
+                    {{ t.views }}
+                  </Text>
+                </Group>
+                <Group gap="2" align="center">
+                  <LucideIcon name="heart" :size="16" />
+                  <Inline class="sr-only">
+                    {{ labels.likes }}
+                  </Inline>
+                  <Text size="xs" weight="bold" class="leading-4">
+                    {{ t.likes }}
+                  </Text>
+                </Group>
+              </Group>
+            </Stack>
+          </Group>
+        </Box>
+      </Grid>
+      <Button variant="outline" size="sm" :href="browseHref" class="w-full" data-testid="template-browse">
+        {{ labels.browse }}
+      </Button>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/testimonial-grid.types.ts b/packages/vue/ui/src/blocks/testimonial-grid.types.ts
new file mode 100644
index 0000000..cff2f47
--- /dev/null
+++ b/packages/vue/ui/src/blocks/testimonial-grid.types.ts
@@ -0,0 +1,34 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/marketing.ts
+
+export type Quote = {
+  id: string;
+  author: string;
+  role: string;
+  company: string;
+  quote: string;
+  rating: number;
+  handle: string;
+  time: string;
+  mark: string;
+};
+
+export type QuoteLabels = {
+  /** template of the rating's accessible name, e.g. `{0} out of 5` */
+  rating: string;
+  /** template of the line under the author, e.g. `{0}, {1}` (role, company) */
+  byLine: string;
+  /** template of the line under a social author, e.g. `{0} / {1}` (handle, time) */
+  handleLine: string;
+};
+
+export type QuoteItem = {
+  /** card: boxed; plain: a bare figure; social: a post of a social wall */
+  kind?: "card" | "plain" | "social";
+  /** a round picture of the author */
+  avatar?: "none" | "image";
+  /** the stars (not on social posts) */
+  rating?: "show" | "hide";
+  /** a company glyph above the quote */
+  mark?: "none" | "icon";
+};
diff --git a/packages/vue/ui/src/blocks/testimonial-grid.vue b/packages/vue/ui/src/blocks/testimonial-grid.vue
new file mode 100644
index 0000000..0dfd167
--- /dev/null
+++ b/packages/vue/ui/src/blocks/testimonial-grid.vue
@@ -0,0 +1,82 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/marketing.ts -->
+<!--
+  Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured
+  quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card,
+  plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the
+  Carousel port contract around the single layout.
+-->
+<script lang="ts">
+import type { Quote, QuoteLabels, QuoteItem } from "./testimonial-grid.types";
+
+export type TestimonialGridProps = {
+  id: string;
+  title: string;
+  quotes: Quote[];
+  empty?: string;
+  labels: QuoteLabels;
+  layout?: "grid" | "single" | "stack" | "masonry" | "strip";
+  cols?: "1-2" | "1-3";
+  item?: QuoteItem;
+  tone?: "default" | "muted";
+  density?: "roomy" | "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Grid from "../primitives/grid/grid.vue";
+import EmptyState from "../components/empty-state.vue";
+import QuoteCard from "../components/quote-card.vue";
+import SectionFrame from "../components/section-frame.vue";
+
+const {
+  id,
+  title,
+  quotes,
+  empty = "",
+  labels,
+  layout = "grid",
+  cols = "1-3",
+  item,
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<TestimonialGridProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :tone="tone"
+    :density="density"
+    :align="(((layout as string) === 'single') ? 'center' : 'start')"
+    :measure="(((layout as string) === 'grid') ? 'default' : '2xl')"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((quotes?.length ?? 0) === 0)" icon="message-square-quote" :title="empty" />
+    <Block v-else-if="(((layout as string) === 'masonry') || ((layout as string) === 'strip'))"
+      tag="div"
+      :class="
+        (layout as string) === 'masonry' ? 'columns-1 gap-4 md:columns-2 xl:columns-3'
+        : 'flex snap-x gap-4 overflow-x-auto pb-2'
+      "
+      data-testid="items"
+    >
+      <QuoteCard v-for="q in quotes" :key="q.id" :q="q" :labels="labels" :item="item" :layout="layout" />
+    </Block>
+    <Grid v-else :cols="(((layout as string) === 'grid') ? cols : '1')" class="gap-4" data-testid="items">
+      <template v-for="(q, i) in quotes" :key="q.id">
+        <QuoteCard
+          v-if="(((layout as string) !== 'single') || (i === 0))"
+          :q="q"
+          :labels="labels"
+          :item="item"
+          :layout="layout"
+        />
+      </template>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/tour-callout.vue b/packages/vue/ui/src/blocks/tour-callout.vue
new file mode 100644
index 0000000..5054d77
--- /dev/null
+++ b/packages/vue/ui/src/blocks/tour-callout.vue
@@ -0,0 +1,94 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the
+  position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target),
+  tone, density.
+-->
+<script lang="ts">
+export type TourCalloutProps = {
+  id: string;
+  title: string;
+  text: string;
+  target: string;
+  position: string;
+  skip: string;
+  next: string;
+  placement?: "below" | "above" | "end";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  target,
+  position,
+  skip,
+  next,
+  placement = "below",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<TourCalloutProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <Block
+      tag="div"
+      :class="cn(
+        'flex gap-4',
+        (
+          (placement as string) === 'end' ? 'flex-col items-start md:flex-row md:items-center'
+          : (placement as string) === 'above' ? 'flex-col-reverse items-start'
+          : 'flex-col items-start'
+        )
+      )"
+      data-testid="tour"
+      :data-placement="placement"
+    >
+      <Button variant="outline" size="default" type="button" class="inset-ring-foreground" data-testid="tour-target">
+        {{ target }}
+      </Button>
+      <Stack
+        gap="4"
+        align="stretch"
+        :class="cn('w-full max-w-sm', 'rounded bg-card inset-ring inset-ring-border', 'p-4', 'shadow-md')"
+        role="group"
+        :aria-label="title"
+        data-testid="tour-callout"
+      >
+        <Text size="xs" class="text-muted-foreground">
+          {{ position }}
+        </Text>
+        <Text size="base" weight="semibold">
+          {{ title }}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {{ text }}
+        </Text>
+        <Group gap="2" justify="end">
+          <Button variant="ghost" size="sm" type="button">
+            {{ skip }}
+          </Button>
+          <Button variant="default" size="sm" type="button">
+            {{ next }}
+          </Button>
+        </Group>
+      </Stack>
+    </Block>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/usage-calculator.types.ts b/packages/vue/ui/src/blocks/usage-calculator.types.ts
new file mode 100644
index 0000000..6577d8d
--- /dev/null
+++ b/packages/vue/ui/src/blocks/usage-calculator.types.ts
@@ -0,0 +1,19 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/pricing-more.ts
+
+export type UsageSlider = {
+  min: number;
+  max: number;
+  /** accessible name of the slider */
+  label: string;
+  /** template of an amount, e.g. `{0} credits` */
+  unit: string;
+};
+
+export type UsagePrice = {
+  /** price of one unit in minor units (cents) */
+  rate: number;
+  currency: string;
+  /** name of the estimate */
+  label: string;
+};
diff --git a/packages/vue/ui/src/blocks/usage-calculator.vue b/packages/vue/ui/src/blocks/usage-calculator.vue
new file mode 100644
index 0000000..2584722
--- /dev/null
+++ b/packages/vue/ui/src/blocks/usage-calculator.vue
@@ -0,0 +1,103 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/pricing-more.ts -->
+<!--
+  A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps
+  the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the
+  largest amount under the slider, hide), tone.
+-->
+<script lang="ts">
+import type { UsageSlider, UsagePrice } from "./usage-calculator.types";
+
+export type UsageCalculatorProps = {
+  id: string;
+  title: string;
+  text: string;
+  usage: number;
+  slider: UsageSlider;
+  price: UsagePrice;
+  cta: string;
+  href?: string;
+  layout?: "card" | "plain";
+  ends?: "show" | "hide";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Range from "../primitives/range/range.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn, fmtMoney, tpl } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  usage,
+  slider,
+  price,
+  cta,
+  href,
+  layout = "card",
+  ends = "show",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<UsageCalculatorProps>();
+const emit = defineEmits<{ usage: [value: string] }>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :lead="text" :tone="tone" align="center" :landmarkLabel="landmarkLabel">
+    <Stack
+      gap="4"
+      align="stretch"
+      :class="cn(
+        'mx-auto w-full max-w-xl',
+        (((layout as string) === 'card') ? 'rounded bg-card p-6 inset-ring inset-ring-border' : '')
+      )"
+      data-testid="usage"
+    >
+      <Group justify="between" align="baseline">
+        <Text size="xl" weight="bold">
+          {{ tpl(slider.unit, usage) }}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {{ slider.label }}
+        </Text>
+      </Group>
+      <Range
+        :min="slider.min"
+        :max="slider.max"
+        :value="usage"
+        :aria-label="slider.label"
+        data-testid="slider"
+        @input="(event: Event & { currentTarget: HTMLInputElement }) => emit('usage', event.currentTarget.value)"
+      />
+      <Group v-if="((ends as string) === 'show')" justify="between" data-testid="ends">
+        <Text size="xs" class="text-muted-foreground">
+          {{ tpl(slider.unit, slider.min) }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ tpl(slider.unit, slider.max) }}
+        </Text>
+      </Group>
+      <Group justify="between" align="center" class="flex-wrap">
+        <Stack gap="0">
+          <Text size="xs" class="text-muted-foreground">
+            {{ price.label }}
+          </Text>
+          <Text size="4xl" weight="bold" data-testid="estimate">
+            {{ fmtMoney((usage * price.rate), price.currency) }}
+          </Text>
+        </Stack>
+        <Button variant="default" size="default" :href="href" data-testid="submit">
+          {{ cta }}
+        </Button>
+      </Group>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/usp-strip.vue b/packages/vue/ui/src/blocks/usp-strip.vue
new file mode 100644
index 0000000..8900406
--- /dev/null
+++ b/packages/vue/ui/src/blocks/usp-strip.vue
@@ -0,0 +1,92 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/storefront.ts -->
+<!--
+  The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted
+  panel, cards: a card each, bar: a thin line of icons and titles), tone, density.
+-->
+<script lang="ts">
+import type { Feature } from "./feature-grid.types";
+
+export type UspStripProps = {
+  id: string;
+  title?: string;
+  perks: Feature[];
+  empty?: string;
+  layout?: "strip" | "cards" | "bar";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title = "",
+  perks,
+  empty = "",
+  layout = "strip",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<UspStripProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((perks?.length ?? 0) === 0)" icon="truck" :title="empty" />
+    <List
+      v-else-if="((layout as string) === 'bar')"
+      tag="ul"
+      class="flex flex-wrap items-center justify-center gap-x-8 gap-y-4"
+      data-testid="items"
+    >
+      <ListItem
+        v-for="p in perks"
+        :key="p.id"
+        class="flex items-center gap-2 text-sm font-medium"
+        data-testid="item"
+      >
+        <LucideIcon :name="p.icon" :size="16" />
+        <Inline>
+          {{ p.title }}
+        </Inline>
+      </ListItem>
+    </List>
+    <Grid v-else
+      cols="1-4"
+      :class="cn('gap-4', (((layout as string) === 'strip') ? 'rounded bg-muted p-6' : ''))"
+      data-testid="items"
+    >
+      <Stack v-for="p in perks" :key="p.id"
+        gap="4"
+        :class="(((layout as string) === 'cards') ? 'rounded bg-card inset-ring inset-ring-border p-6' : '')"
+        data-testid="item"
+      >
+        <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+          <LucideIcon :name="p.icon" :size="20" />
+        </Box>
+        <Stack gap="2">
+          <Text size="sm" weight="semibold">
+            {{ p.title }}
+          </Text>
+          <Text size="sm" class="text-muted-foreground">
+            {{ p.text }}
+          </Text>
+        </Stack>
+      </Stack>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/video-grid.vue b/packages/vue/ui/src/blocks/video-grid.vue
new file mode 100644
index 0000000..bd39b43
--- /dev/null
+++ b/packages/vue/ui/src/blocks/video-grid.vue
@@ -0,0 +1,96 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/showcase.ts -->
+<!--
+  Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port
+  contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone,
+  density.
+-->
+<script lang="ts">
+import type { Quote } from "./testimonial-grid.types";
+
+export type VideoGridProps = {
+  id: string;
+  title: string;
+  quotes: Quote[];
+  empty?: string;
+  playLabel: string;
+  byLine: string;
+  cols?: "1-2" | "1-3";
+  caption?: "below" | "overlay";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Grid from "../primitives/grid/grid.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import EmptyState from "../components/empty-state.vue";
+import FigureBlock from "../components/figure-block.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  quotes,
+  empty = "",
+  playLabel,
+  byLine,
+  cols = "1-3",
+  caption = "below",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<VideoGridProps>();
+const emit = defineEmits<{ play: [id: string] }>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :density="density" :landmarkLabel="landmarkLabel">
+    <EmptyState v-if="((quotes?.length ?? 0) === 0)" icon="video" :title="empty" />
+    <Grid v-else :cols="cols" class="gap-4" data-testid="items">
+      <FigureBlock v-for="q in quotes" :key="q.id" class="m-0 flex flex-col gap-4" testid="item">
+        <Box class="relative">
+          <MediaFrame :alt="q.author" />
+          <Button
+            variant="default"
+            size="default"
+            type="button"
+            class="absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0"
+            :aria-label="tpl(playLabel, q.author)"
+            data-testid="play"
+            @click="() => emit('play', q.id)"
+          >
+            <LucideIcon name="play" :size="20" />
+          </Button>
+          <Box
+            v-if="((caption as string) === 'overlay')"
+            class="absolute inset-x-0 bottom-0 rounded bg-background p-4"
+            data-testid="caption"
+          >
+            <Text size="sm" weight="semibold">
+              {{ q.author }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {{ tpl(byLine, q.role, q.company) }}
+            </Text>
+          </Box>
+        </Box>
+        <Text v-if="((caption as string) === 'below')" tag="figcaption" data-testid="caption">
+          <Text size="sm" weight="semibold">
+            {{ q.author }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ tpl(byLine, q.role, q.company) }}
+          </Text>
+        </Text>
+      </FigureBlock>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/video-modal.types.ts b/packages/vue/ui/src/blocks/video-modal.types.ts
new file mode 100644
index 0000000..42259ea
--- /dev/null
+++ b/packages/vue/ui/src/blocks/video-modal.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/guide.ts
+
+export type Chapter = {
+  id: string;
+  title: string;
+  text: string;
+};
diff --git a/packages/vue/ui/src/blocks/video-modal.vue b/packages/vue/ui/src/blocks/video-modal.vue
new file mode 100644
index 0000000..c1b3d49
--- /dev/null
+++ b/packages/vue/ui/src/blocks/video-modal.vue
@@ -0,0 +1,111 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/guide.ts -->
+<!--
+  A dialog with a walkthrough video: a title and a close button, the player area with a play button and,
+  optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size
+  (default, wide), outline (none, chapters: a list under the player), tone.
+-->
+<script lang="ts">
+import type { Chapter } from "./video-modal.types";
+
+export type VideoModalProps = {
+  id: string;
+  title: string;
+  text: string;
+  close: string;
+  play: string;
+  chaptersTitle: string;
+  chapters: Chapter[];
+  size?: "default" | "wide";
+  outline?: "none" | "chapters";
+  tone?: "default" | "muted";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import MediaFrame from "../components/media-frame.vue";
+import SectionFrame from "../components/section-frame.vue";
+import { cn } from "../utils";
+
+const {
+  id,
+  title,
+  text,
+  close,
+  play,
+  chaptersTitle,
+  chapters,
+  size = "default",
+  outline = "none",
+  tone = "default",
+  landmarkLabel,
+} = defineProps<VideoModalProps>();
+</script>
+
+<template>
+  <SectionFrame :id="id" :title="title" :tone="tone" :landmarkLabel="landmarkLabel">
+    <Stack
+      gap="4"
+      align="stretch"
+      :class="cn(
+        'mx-auto w-full',
+        (((size as string) === 'wide') ? 'max-w-4xl' : 'max-w-2xl'),
+        'rounded bg-card inset-ring inset-ring-border p-4 shadow-lg'
+      )"
+      role="dialog"
+      :aria-label="title"
+      data-testid="video-modal"
+    >
+      <Group gap="2" align="center" justify="between">
+        <Text size="sm" class="text-muted-foreground">
+          {{ text }}
+        </Text>
+        <Button variant="ghost" size="sm" type="button" class="shrink-0" :aria-label="close" data-testid="modal-close">
+          <LucideIcon name="x" :size="16" />
+        </Button>
+      </Group>
+      <Box class="relative" data-testid="player">
+        <MediaFrame :alt="title" />
+        <Button
+          variant="default"
+          size="default"
+          type="button"
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded"
+          :aria-label="play"
+          data-testid="play"
+        >
+          <LucideIcon name="play" :size="24" />
+        </Button>
+      </Box>
+      <Stack
+        v-if="(((outline as string) === 'chapters') && ((chapters?.length ?? 0) > 0))"
+        gap="2"
+        data-testid="chapters"
+      >
+        <Title :as="3" size="base" weight="bold">
+          {{ chaptersTitle }}
+        </Title>
+        <List class="m-0 flex list-none flex-col gap-2 p-0">
+          <ListItem v-for="c in chapters" :key="c.id" class="flex items-baseline gap-4" data-testid="item">
+            <Text size="sm" weight="semibold">
+              {{ c.title }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {{ c.text }}
+            </Text>
+          </ListItem>
+        </List>
+      </Stack>
+    </Stack>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/blocks/zone-table.types.ts b/packages/vue/ui/src/blocks/zone-table.types.ts
new file mode 100644
index 0000000..6b8a1b2
--- /dev/null
+++ b/packages/vue/ui/src/blocks/zone-table.types.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/blocks/delivery.ts
+
+export type Zone = {
+  id: string;
+  name: string;
+  area: string;
+  price: number;
+  freeFrom: number;
+  minOrder: number;
+  time: string;
+  express: string;
+  currency: string;
+};
+
+export type ZoneLabels = {
+  caption: string;
+  zone: string;
+  price: string;
+  freeFrom: string;
+  minOrder: string;
+  time: string;
+  express: string;
+};
diff --git a/packages/vue/ui/src/blocks/zone-table.vue b/packages/vue/ui/src/blocks/zone-table.vue
new file mode 100644
index 0000000..0fab689
--- /dev/null
+++ b/packages/vue/ui/src/blocks/zone-table.vue
@@ -0,0 +1,114 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/blocks/delivery.ts -->
+<!--
+  Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that
+  ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.
+-->
+<script lang="ts">
+import type { Zone, ZoneLabels } from "./zone-table.types";
+
+export type ZoneTableProps = {
+  id: string;
+  title: string;
+  lead?: string;
+  zones: Zone[];
+  empty?: string;
+  labels: ZoneLabels;
+  layout?: "table" | "cards";
+  tone?: "default" | "muted";
+  density?: "default" | "compact";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import EmptyState from "../components/empty-state.vue";
+import SectionFrame from "../components/section-frame.vue";
+import ZoneRows from "../components/zone-rows.vue";
+import { fmtMoney } from "../utils";
+
+const {
+  id,
+  title,
+  lead = "",
+  zones,
+  empty = "",
+  labels,
+  layout = "table",
+  tone = "default",
+  density = "default",
+  landmarkLabel,
+} = defineProps<ZoneTableProps>();
+</script>
+
+<template>
+  <SectionFrame
+    :id="id"
+    :title="title"
+    :lead="lead"
+    :tone="tone"
+    :density="density"
+    :landmarkLabel="landmarkLabel"
+  >
+    <EmptyState v-if="((zones?.length ?? 0) === 0)" icon="map" :title="empty" />
+    <ZoneRows v-else-if="((layout as string) === 'table')" :zones="zones" :labels="labels" />
+    <Grid v-else cols="1-3" class="gap-4" data-testid="items">
+      <Stack
+        v-for="z in zones"
+        :key="z.id"
+        gap="4"
+        class="rounded bg-card inset-ring inset-ring-border p-6"
+        data-testid="item"
+      >
+        <Stack gap="2">
+          <Title :as="3" size="lg" weight="bold">
+            {{ z.name }}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {{ z.area }}
+          </Text>
+        </Stack>
+        <Text size="3xl" weight="bold">
+          {{ fmtMoney(z.price, z.currency) }}
+        </Text>
+        <List tag="ul" class="flex flex-col gap-2 border-t border-border pt-4">
+          <ListItem class="flex items-center justify-between gap-4 text-sm">
+            <Inline class="text-muted-foreground">
+              {{ labels.freeFrom }}
+            </Inline>
+            <Inline class="font-medium">
+              {{ fmtMoney(z.freeFrom, z.currency) }}
+            </Inline>
+          </ListItem>
+          <ListItem class="flex items-center justify-between gap-4 text-sm">
+            <Inline class="text-muted-foreground">
+              {{ labels.minOrder }}
+            </Inline>
+            <Inline class="font-medium">
+              {{ fmtMoney(z.minOrder, z.currency) }}
+            </Inline>
+          </ListItem>
+          <ListItem class="flex items-center justify-between gap-4 text-sm">
+            <Inline class="text-muted-foreground">
+              {{ labels.time }}
+            </Inline>
+            <Inline class="font-medium">
+              {{ z.time }}
+            </Inline>
+          </ListItem>
+        </List>
+        <Badge v-if="z.express" variant="secondary" size="default" class="w-fit">
+          {{ z.express }}
+        </Badge>
+      </Stack>
+    </Grid>
+  </SectionFrame>
+</template>
diff --git a/packages/vue/ui/src/components/action-group.vue b/packages/vue/ui/src/components/action-group.vue
new file mode 100644
index 0000000..033a5a4
--- /dev/null
+++ b/packages/vue/ui/src/components/action-group.vue
@@ -0,0 +1,45 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not
+  handlers: the page decides what they open.
+-->
+<script lang="ts">
+export type ActionGroupProps = {
+  primary: string;
+  primaryHref?: string;
+  secondary?: string;
+  secondaryHref?: string;
+  align?: "start" | "center";
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+
+const { primary, primaryHref, secondary, secondaryHref, align = "start" } = defineProps<ActionGroupProps>();
+</script>
+
+<template>
+  <Group
+    gap="4"
+    align="center"
+    :justify="(((align as string) === 'center') ? 'center' : 'start')"
+    class="flex-wrap"
+    data-slot="action-group"
+  >
+    <Button variant="default" size="default" :href="primaryHref" data-testid="action-primary">
+      {{ primary }}
+    </Button>
+    <Button
+      v-if="secondary"
+      variant="outline"
+      size="default"
+      :href="secondaryHref"
+      data-testid="action-secondary"
+    >
+      {{ secondary }}
+    </Button>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/app-main.vue b/packages/vue/ui/src/components/app-main.vue
new file mode 100644
index 0000000..39632d7
--- /dev/null
+++ b/packages/vue/ui/src/components/app-main.vue
@@ -0,0 +1,91 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/app-main.ts -->
+<!--
+  The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel
+  when `activity` is given).
+-->
+<script lang="ts">
+import type { Metric } from "../blocks/metric-row.types";
+import type { Point } from "../blocks/chart-panel.types";
+import type { Event } from "../blocks/activity-feed.types";
+import type { OverviewChart, OverviewActivity } from "../blocks/dashboard-overview.types";
+
+export type AppMainProps = {
+  id: string;
+  title: string;
+  metrics: Metric[];
+  chart: OverviewChart;
+  activity?: OverviewActivity;
+  cols?: "1-2" | "1-4";
+  density?: "default" | "compact";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Title from "../primitives/title/title.vue";
+import BarChart from "../components/bar-chart.vue";
+import Panel from "../components/panel.vue";
+import StatTile from "../components/stat-tile.vue";
+import Timeline from "../components/timeline.vue";
+import { tpl } from "../utils";
+
+const {
+  id,
+  title,
+  metrics,
+  chart,
+  activity,
+  cols = "1-2",
+  density = "default",
+} = defineProps<AppMainProps>();
+</script>
+
+<template>
+  <Stack
+    :gap="(((density as string) === 'compact') ? '4' : '6')"
+    align="stretch"
+    class="min-w-0"
+    data-testid="app-main"
+  >
+    <Title :as="2" size="2xl" weight="bold" :id="tpl('{0}-title', id)">
+      {{ title }}
+    </Title>
+    <Grid v-if="((metrics?.length ?? 0) > 0)" :cols="cols" class="gap-4" data-testid="items">
+      <Box v-for="m in metrics" :key="m.id" data-testid="item">
+        <StatTile :label="m.label" :value="m.value" :icon="m.icon" :hint="m.hint" />
+      </Box>
+    </Grid>
+    <Grid v-if="activity" cols="1-2" class="items-stretch gap-4">
+      <Panel
+        v-if="((chart.series?.length ?? 0) > 0)"
+        :title="chart.title"
+        :description="chart.text"
+        :id="tpl('{0}-chart', id)"
+        class="h-full"
+      >
+        <BarChart :bars="chart.series" :label="chart.summary" :height="144" />
+      </Panel>
+      <Panel
+        v-if="((activity?.events?.length ?? 0) > 0)"
+        :title="activity?.title"
+        :description="activity?.text"
+        :id="tpl('{0}-feed', id)"
+        class="h-full"
+      >
+        <Timeline :items="activity?.events" />
+      </Panel>
+    </Grid>
+    <Panel
+      v-else-if="((chart.series?.length ?? 0) > 0)"
+      :title="chart.title"
+      :description="chart.text"
+      :id="tpl('{0}-chart', id)"
+      class="h-full"
+    >
+      <BarChart :bars="chart.series" :label="chart.summary" :height="144" />
+    </Panel>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/article-block.vue b/packages/vue/ui/src/components/article-block.vue
new file mode 100644
index 0000000..88dd7bc
--- /dev/null
+++ b/packages/vue/ui/src/components/article-block.vue
@@ -0,0 +1,23 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/landmarks.ts -->
+<!-- A self-contained item (a review, a card, a project) in its own file: Block tag article. -->
+<script lang="ts">
+export type ArticleBlockProps = {
+  testid?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import { cn } from "../utils";
+
+const { testid, class: className } = defineProps<ArticleBlockProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Block tag="article" :class="cn(className)" :data-testid="testid">
+    <slot />
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/auth-form.vue b/packages/vue/ui/src/components/auth-form.vue
new file mode 100644
index 0000000..5652650
--- /dev/null
+++ b/packages/vue/ui/src/components/auth-form.vue
@@ -0,0 +1,73 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/auth.ts -->
+<!--
+  The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot
+  link, the terms, the submit button.
+-->
+<script lang="ts">
+import type { AuthLabels } from "../blocks/auth-card.types";
+
+export type AuthFormProps = {
+  id: string;
+  mode?: "signin" | "signup" | "reset" | "magic";
+  labels: AuthLabels;
+  submit: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Checkbox from "../primitives/checkbox/checkbox.vue";
+import Form from "../primitives/form/form.vue";
+import Group from "../primitives/group/group.vue";
+import Input from "../primitives/input/input.vue";
+import Label from "../primitives/label/label.vue";
+import Field from "../components/field.vue";
+import { cn, tpl } from "../utils";
+
+const { id, mode = "signin", labels, submit } = defineProps<AuthFormProps>();
+</script>
+
+<template>
+  <Form method="dialog" class="gap-4" data-testid="auth-form">
+    <Field v-if="((mode as string) === 'signup')" :label="labels.name" :htmlFor="tpl('{0}-name', id)">
+      <Input type="text" name="name" autocomplete="name" :id="tpl('{0}-name', id)" data-testid="field" />
+    </Field>
+    <Field :label="labels.email" :htmlFor="tpl('{0}-email', id)">
+      <Input type="email" name="email" autocomplete="email" :id="tpl('{0}-email', id)" data-testid="field" />
+    </Field>
+    <Field
+      v-if="(((mode as string) !== 'reset') && ((mode as string) !== 'magic'))"
+      :label="labels.password"
+      :htmlFor="tpl('{0}-password', id)"
+    >
+      <Input
+        type="password"
+        name="password"
+        :autocomplete="(((mode as string) === 'signup') ? 'new-password' : 'current-password')"
+        :id="tpl('{0}-password', id)"
+        data-testid="field"
+      />
+    </Field>
+    <Group v-if="((mode as string) === 'signin')" justify="between" align="center" class="flex-wrap gap-2">
+      <Group gap="2" align="center" :class="cn('w-fit', '')">
+        <Checkbox name="remember" :id="tpl('{0}-remember', id)" />
+        <Label :for="tpl('{0}-remember', id)" class="text-sm">
+          {{ labels.remember }}
+        </Label>
+      </Group>
+      <Button variant="link" size="sm" class="px-0">
+        {{ labels.forgot }}
+      </Button>
+    </Group>
+    <Group v-if="((mode as string) === 'signup')" gap="2" align="center" :class="cn('w-fit', '')">
+      <Checkbox name="terms" :id="tpl('{0}-terms', id)" />
+      <Label :for="tpl('{0}-terms', id)" class="text-sm">
+        {{ labels.terms }}
+      </Label>
+    </Group>
+    <Button variant="default" size="default" type="submit" class="w-full" data-testid="submit">
+      {{ submit }}
+    </Button>
+  </Form>
+</template>
diff --git a/packages/vue/ui/src/components/avatar.vue b/packages/vue/ui/src/components/avatar.vue
new file mode 100644
index 0000000..053afd9
--- /dev/null
+++ b/packages/vue/ui/src/components/avatar.vue
@@ -0,0 +1,51 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round. -->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** Avatar: the classes of each value (shadcn/cva style). */
+export const avatarVariants = variants({
+  base: "relative inline-flex shrink-0 overflow-hidden bg-muted rounded-full",
+  variants: {
+    size: {
+      xs: "size-6",
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12",
+      xl: "size-16",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type AvatarProps = {
+  src: string;
+  alt?: string;
+  size?: "xs" | "sm" | "default" | "lg" | "xl";
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Image from "../primitives/image/image.vue";
+import Inline from "../primitives/inline/inline.vue";
+import { cn } from "../utils";
+
+const { src, alt = "", size = "default", class: className } = defineProps<AvatarProps>();
+</script>
+
+<template>
+  <Inline :class="cn(avatarVariants({ size: size }), className)" data-slot="avatar">
+    <Image
+      :src="src"
+      :alt="alt"
+      class="size-full object-cover"
+      fit="cover"
+      size="auto"
+      loading="eager"
+      decoding="auto"
+      draggable="false"
+    />
+  </Inline>
+</template>
diff --git a/packages/vue/ui/src/components/backdrop.vue b/packages/vue/ui/src/components/backdrop.vue
new file mode 100644
index 0000000..c1d8672
--- /dev/null
+++ b/packages/vue/ui/src/components/backdrop.vue
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the
+  Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of
+  the block (rule 01).
+-->
+<script lang="ts">
+export type BackdropProps = {
+  kind?: "none" | "image";
+  alt?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import MediaFrame from "../components/media-frame.vue";
+
+const { kind = "none", alt = "" } = defineProps<BackdropProps>();
+</script>
+
+<template>
+  <Box
+    v-if="((kind as string) === 'image')"
+    class="pointer-events-none absolute inset-0 -z-10"
+    data-testid="backdrop"
+  >
+    <MediaFrame :alt="alt" ratio="21/9" class="size-full rounded-none opacity-30" />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/badge-square.vue b/packages/vue/ui/src/components/badge-square.vue
new file mode 100644
index 0000000..02d7afc
--- /dev/null
+++ b/packages/vue/ui/src/components/badge-square.vue
@@ -0,0 +1,39 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd). -->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** BadgeSquare: the classes of each value (shadcn/cva style). */
+export const badgeSquareVariants = variants({
+  base:
+    "inline-flex shrink-0 items-center justify-center bg-card text-xs font-medium whitespace-nowrap text-foreground " +
+    "inset-ring inset-ring-border rounded",
+  variants: {
+    size: {
+      sm: "h-4 min-w-4 px-1",
+      default: "h-5 px-2",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type BadgeSquareProps = {
+  size?: "sm" | "default";
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Inline from "../primitives/inline/inline.vue";
+import { cn } from "../utils";
+
+const { size = "default", class: className } = defineProps<BadgeSquareProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Inline :class="cn(badgeSquareVariants({ size: size }), className)" data-slot="badge-square">
+    <slot />
+  </Inline>
+</template>
diff --git a/packages/vue/ui/src/components/bar-chart.types.ts b/packages/vue/ui/src/components/bar-chart.types.ts
new file mode 100644
index 0000000..7125a60
--- /dev/null
+++ b/packages/vue/ui/src/components/bar-chart.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+
+export type Bar = {
+  id: string;
+  label: string;
+  value: number;
+  title?: string;
+  muted?: boolean;
+};
diff --git a/packages/vue/ui/src/components/bar-chart.vue b/packages/vue/ui/src/components/bar-chart.vue
new file mode 100644
index 0000000..3592189
--- /dev/null
+++ b/packages/vue/ui/src/components/bar-chart.vue
@@ -0,0 +1,48 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image
+  for assistive technology: `label` carries the summary, the bar values are in the captions and titles.
+-->
+<script lang="ts">
+import type { Bar } from "./bar-chart.types";
+
+export type BarChartProps = {
+  bars: Bar[];
+  label: string;
+  max?: number;
+  height?: number;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Box from "../primitives/box/box.vue";
+import Text from "../primitives/text/text.vue";
+import { cn } from "../utils";
+
+const { bars, label, max, height = 160, class: className } = defineProps<BarChartProps>();
+const top = computed(() => Math.max(1, (max ?? bars.reduce((m, i) => Math.max(m, i.value), 0))));
+</script>
+
+<template>
+  <Box :class="cn('min-w-0', className)" data-slot="bar-chart">
+    <Box class="flex min-w-0 items-end gap-2" role="img" :aria-label="label" :style="`height:${height}px`">
+      <Box v-for="b in bars" :key="b.id" class="flex h-full min-w-0 flex-1 items-end" :title="(b.title ?? b.label)">
+        <Box
+          :class="cn('w-full rounded', (b.muted ? 'bg-muted-foreground' : 'bg-primary'))"
+          :style="`height:${Math.max(2, Math.round(((b.value / top) * 100)))}%`"
+          :data-bar="b.id"
+        />
+      </Box>
+    </Box>
+    <Box class="mt-2 flex min-w-0 gap-2" aria-hidden="true">
+      <Box v-for="b in bars" :key="b.id" class="relative h-4 min-w-0 flex-1">
+        <Text :class="'absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground'">
+          {{ b.label }}
+        </Text>
+      </Box>
+    </Box>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/bulk-bar.vue b/packages/vue/ui/src/components/bulk-bar.vue
new file mode 100644
index 0000000..a780f24
--- /dev/null
+++ b/packages/vue/ui/src/components/bulk-bar.vue
@@ -0,0 +1,57 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  The "N selected" bar of a list: a count, a clear button and the bulk actions (children). All text comes in
+  through props.
+-->
+<script lang="ts">
+export type BulkBarProps = {
+  label: string;
+  clearLabel: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import { cn } from "../utils";
+
+const { label, clearLabel, class: className } = defineProps<BulkBarProps>();
+const emit = defineEmits<{ clear: [] }>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Box
+    :class="cn(
+      'flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background',
+      className
+    )"
+    role="region"
+    :aria-label="label"
+    aria-live="polite"
+    data-slot="bulk-bar"
+    data-testid="bulk-bar"
+  >
+    <Button
+      variant="ghost"
+      size="sm"
+      layout="icon"
+      type="button"
+      :aria-label="clearLabel"
+      class="text-background hover:bg-background/15 hover:text-background"
+      @click="() => emit('clear')"
+    >
+      <LucideIcon name="x" :size="16" />
+    </Button>
+    <Inline data-testid="bulk-count">
+      {{ label }}
+    </Inline>
+    <Inline class="ml-auto flex flex-wrap items-center gap-2">
+      <slot />
+    </Inline>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/cart-summary-card.types.ts b/packages/vue/ui/src/components/cart-summary-card.types.ts
new file mode 100644
index 0000000..9e5a5f5
--- /dev/null
+++ b/packages/vue/ui/src/components/cart-summary-card.types.ts
@@ -0,0 +1,18 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Promo = {
+  id: string;
+  code: string;
+};
+
+export type CartSummaryLabels = {
+  title: string;
+  items: string;
+  promo: string;
+  apply: string;
+  codes: string;
+  progress: string;
+  checkout: string;
+  note: string;
+};
diff --git a/packages/vue/ui/src/components/cart-summary-card.vue b/packages/vue/ui/src/components/cart-summary-card.vue
new file mode 100644
index 0000000..ffb4afc
--- /dev/null
+++ b/packages/vue/ui/src/components/cart-summary-card.vue
@@ -0,0 +1,138 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!--
+  The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field
+  with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.
+-->
+<script lang="ts">
+import type { Promo, CartSummaryLabels } from "./cart-summary-card.types";
+import type { CartLine } from "../blocks/cart-list.types";
+import type { SummaryRow } from "../blocks/order-summary.types";
+
+export type CartSummaryCardProps = {
+  lines: CartLine[];
+  rows: SummaryRow[];
+  promos: Promo[];
+  labels: CartSummaryLabels;
+  items?: "show" | "hide";
+  promo?: "show" | "hide";
+  field?: string;
+  progress?: "show" | "hide";
+  value?: number;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Input from "../primitives/input/input.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Progress from "../primitives/form/progress.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { cn, fmtMoney, tpl } from "../utils";
+
+const {
+  lines,
+  rows,
+  promos,
+  labels,
+  items = "hide",
+  promo = "show",
+  field = "promo",
+  progress = "show",
+  value = 70,
+} = defineProps<CartSummaryCardProps>();
+</script>
+
+<template>
+  <Stack gap="6" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="summary">
+    <Group gap="4" align="baseline" justify="between">
+      <Title :as="2" size="lg" weight="semibold">
+        {{ labels.title }}
+      </Title>
+      <Text size="xs" class="text-muted-foreground">
+        {{ tpl(labels.items, ((lines?.length ?? 0) == null ? undefined : String((lines?.length ?? 0)))) }}
+      </Text>
+    </Group>
+    <List
+      v-if="(((items as string) === 'show') && ((lines?.length ?? 0) > 0))"
+      tag="ul"
+      class="flex flex-col gap-4"
+      data-testid="summary-lines"
+    >
+      <ListItem v-for="line in lines" :key="line.id" class="flex items-center gap-4 text-sm">
+        <MediaFrame :alt="line.name" ratio="1/1" class="size-12 shrink-0" />
+        <Stack gap="0" class="flex-1">
+          <Text size="sm" weight="semibold">
+            {{ line.name }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ tpl("{0} x {1}", line.qty, fmtMoney(line.price, line.currency)) }}
+          </Text>
+        </Stack>
+        <Inline class="font-medium">
+          {{ fmtMoney((line.price * line.qty), line.currency) }}
+        </Inline>
+      </ListItem>
+    </List>
+    <Stack v-if="((promo as string) === 'show')" gap="2" align="stretch" data-testid="promo">
+      <Group gap="2" align="center">
+        <Input type="text" :name="field" :aria-label="labels.promo" :placeholder="labels.promo" class="min-w-0 flex-1" />
+        <Button variant="outline" size="default" type="button">
+          {{ labels.apply }}
+        </Button>
+      </Group>
+      <Group v-if="((promos?.length ?? 0) > 0)" gap="2" align="center" class="flex-wrap">
+        <Text size="xs" class="text-muted-foreground">
+          {{ labels.codes }}
+        </Text>
+        <Badge v-for="c in promos" :key="c.id" variant="outline" size="sm" data-testid="code">
+          {{ c.code }}
+        </Badge>
+      </Group>
+    </Stack>
+    <Stack
+      v-if="((progress as string) === 'show')"
+      gap="2"
+      align="stretch"
+      class="rounded bg-muted p-4"
+      data-testid="progress"
+    >
+      <Text size="sm">
+        {{ labels.progress }}
+      </Text>
+      <Progress :value="(value == null ? undefined : String(value))" max="100" :aria-label="labels.progress" />
+    </Stack>
+    <List v-if="((rows?.length ?? 0) > 0)" tag="ul" class="flex flex-col gap-2">
+      <ListItem v-for="row in rows" :key="row.id"
+        :class="cn(
+          'flex items-center justify-between gap-4',
+          (
+            row.strong ? 'border-t border-border pt-4 text-base font-bold'
+            : 'text-sm text-muted-foreground'
+          )
+        )"
+        data-testid="row"
+      >
+        <Inline>
+          {{ row.label }}
+        </Inline>
+        <Inline>
+          {{ fmtMoney(row.amount, row.currency) }}
+        </Inline>
+      </ListItem>
+    </List>
+    <Button variant="default" size="lg" class="w-full" data-testid="checkout">
+      {{ labels.checkout }}
+    </Button>
+    <Text size="xs" class="text-muted-foreground">
+      {{ labels.note }}
+    </Text>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/cart-table.vue b/packages/vue/ui/src/components/cart-table.vue
new file mode 100644
index 0000000..7c6f521
--- /dev/null
+++ b/packages/vue/ui/src/components/cart-table.vue
@@ -0,0 +1,137 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/cart-table.ts -->
+<!--
+  The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a
+  remove button.
+-->
+<script lang="ts">
+import type { CartLine, CartLabels } from "../blocks/cart-list.types";
+
+export type CartTableProps = {
+  lines: CartLine[];
+  labels: CartLabels;
+  media?: "image" | "none";
+  density?: "default" | "compact";
+  field?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Table from "../primitives/table/table.vue";
+import TableBody from "../primitives/table/table-body.vue";
+import TableCaption from "../primitives/table/table-caption.vue";
+import TableCell from "../primitives/table/table-cell.vue";
+import TableHead from "../primitives/table/table-head.vue";
+import TableHeadCell from "../primitives/table/table-head-cell.vue";
+import TableRow from "../primitives/table/table-row.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+import NumberField from "../components/number-field.vue";
+import { cn, fmtMoney, tpl } from "../utils";
+
+const { lines, labels, media = "image", density = "default", field = "qty" } = defineProps<CartTableProps>();
+const emit = defineEmits<{ remove: [id: string] }>();
+</script>
+
+<template>
+  <Box class="w-full overflow-x-auto">
+    <Table class="w-full text-left text-sm" data-testid="cart-table">
+      <TableCaption class="sr-only">
+        {{ labels.caption }}
+      </TableCaption>
+      <TableHead>
+        <TableRow>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.product }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="hidden py-2 sm:table-cell">
+            {{ labels.price }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.qty }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.total }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            <Inline class="sr-only">
+              {{ labels.remove }}
+            </Inline>
+          </TableHeadCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow v-for="line in lines" :key="line.id" class="border-t border-border" data-testid="item">
+          <TableCell :class="cn((((density as string) === 'compact') ? 'py-2' : 'py-4'))">
+            <Group gap="4" align="center">
+              <MediaFrame
+                v-if="((media as string) === 'image')"
+                :alt="line.name"
+                ratio="1/1"
+                class="hidden size-14 shrink-0 sm:block"
+              />
+              <Stack gap="0">
+                <Text size="sm" weight="semibold">
+                  {{ line.name }}
+                </Text>
+                <Text size="xs" class="text-muted-foreground">
+                  {{ line.variant }}
+                </Text>
+              </Stack>
+            </Group>
+          </TableCell>
+          <TableCell class="hidden sm:table-cell">
+            {{ fmtMoney(line.price, line.currency) }}
+          </TableCell>
+          <TableCell>
+            <NumberField
+              :value="(line.qty == null ? undefined : String(line.qty))"
+              :name="tpl('{0}-{1}', field, line.id)"
+              min="1"
+              :label="labels.qty"
+              :decrease="labels.decrease"
+              :increase="labels.increase"
+            />
+          </TableCell>
+          <TableCell class="font-semibold">
+            {{ fmtMoney((line.price * line.qty), line.currency) }}
+          </TableCell>
+          <TableCell class="text-right">
+            <Button
+              variant="ghost"
+              size="sm"
+              layout="icon"
+              :aria-label="labels.remove"
+              data-testid="remove"
+              @click="() => emit('remove', line.id)"
+            >
+              <LucideIcon name="x" :size="16" />
+            </Button>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </Box>
+  <Group v-if="((lines?.length ?? 0) > 0)"
+    gap="4"
+    align="center"
+    justify="between"
+    class="mt-4 flex-wrap border-t border-border pt-4"
+    data-testid="cart-footer"
+  >
+    <Text size="base" weight="bold" data-testid="subtotal">
+      {{ labels.subtotal }}
+      {{ " " }}
+      {{ fmtMoney(lines.reduce((s, i) => s + i.price * i.qty, 0), lines[0]?.currency ?? "") }}
+    </Text>
+    <Button variant="default" size="default" data-testid="checkout">
+      {{ labels.checkout }}
+    </Button>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/checkout-step.vue b/packages/vue/ui/src/components/checkout-step.vue
new file mode 100644
index 0000000..0420e39
--- /dev/null
+++ b/packages/vue/ui/src/components/checkout-step.vue
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!--
+  One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`).
+  Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).
+-->
+<script lang="ts">
+export type CheckoutStepProps = {
+  number: string;
+  title: string;
+  text?: string;
+  layout?: "cards" | "numbered";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+
+const { number, title, text = "", layout = "cards" } = defineProps<CheckoutStepProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Stack
+    gap="6"
+    align="stretch"
+    :class="
+      (layout as string) === 'cards' ? 'rounded bg-card inset-ring inset-ring-border p-6'
+      : 'border-t border-border pt-6'
+    "
+    data-testid="step"
+  >
+    <Group gap="4" align="start">
+      <Box
+        v-if="((layout as string) === 'numbered')"
+        :class="'flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground'"
+      >
+        {{ number }}
+      </Box>
+      <Stack gap="0">
+        <Title :as="2" size="lg" weight="semibold">
+          {{ title }}
+        </Title>
+        <Text v-if="text" size="sm" class="text-muted-foreground">
+          {{ text }}
+        </Text>
+      </Stack>
+    </Group>
+    <slot />
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/checkout-submit.vue b/packages/vue/ui/src/components/checkout-submit.vue
new file mode 100644
index 0000000..3d4b9bc
--- /dev/null
+++ b/packages/vue/ui/src/components/checkout-submit.vue
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!-- The end of the checkout form: the consent checkbox, the submit button and the legal line. -->
+<script lang="ts">
+export type CheckoutSubmitProps = {
+  id: string;
+  consent: string;
+  submit: string;
+  legal: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Checkbox from "../primitives/checkbox/checkbox.vue";
+import Group from "../primitives/group/group.vue";
+import Label from "../primitives/label/label.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import { cn, tpl } from "../utils";
+
+const { id, consent, submit, legal } = defineProps<CheckoutSubmitProps>();
+</script>
+
+<template>
+  <Stack gap="4" align="start">
+    <Group gap="2" align="center" :class="cn('w-fit', '')">
+      <Checkbox name="consent" :id="tpl('{0}-consent', id)" />
+      <Label :for="tpl('{0}-consent', id)" class="text-sm">
+        {{ consent }}
+      </Label>
+    </Group>
+    <Button variant="default" size="lg" type="submit" data-testid="submit">
+      {{ submit }}
+    </Button>
+    <Text size="xs" class="text-muted-foreground">
+      {{ legal }}
+    </Text>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/code-window.types.ts b/packages/vue/ui/src/components/code-window.types.ts
new file mode 100644
index 0000000..351eaab
--- /dev/null
+++ b/packages/vue/ui/src/components/code-window.types.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/visuals.ts
+
+export type CodeLine = {
+  id: string;
+  text: string;
+  kind: string;
+};
diff --git a/packages/vue/ui/src/components/code-window.vue b/packages/vue/ui/src/components/code-window.vue
new file mode 100644
index 0000000..259fbe9
--- /dev/null
+++ b/packages/vue/ui/src/components/code-window.vue
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/visuals.ts -->
+<!--
+  A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with
+  the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).
+-->
+<script lang="ts">
+import type { CodeLine } from "./code-window.types";
+
+export type CodeWindowProps = {
+  title: string;
+  prompt: string;
+  lines: CodeLine[];
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Text from "../primitives/text/text.vue";
+import { cn } from "../utils";
+
+const { title, prompt, lines, class: className } = defineProps<CodeWindowProps>();
+</script>
+
+<template>
+  <Box
+    :class="cn(
+      'w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border',
+      className
+    )"
+    role="group"
+    :aria-label="title"
+    data-slot="code-window"
+  >
+    <Box class="flex items-center border-b border-border px-4 py-2">
+      <Text size="xs" class="text-muted-foreground">
+        {{ title }}
+      </Text>
+    </Box>
+    <List class="m-0 flex list-none flex-col gap-2 p-4 font-mono text-sm">
+      <ListItem v-for="line in lines" :key="line.id"
+        :class="cn('flex gap-2', ((line.kind === 'command') ? 'text-foreground' : 'text-muted-foreground'))"
+        :data-kind="line.kind"
+      >
+        <Inline v-if="(line.kind === 'command')" class="select-none text-muted-foreground">
+          {{ prompt }}
+        </Inline>
+        <Inline>
+          {{ line.text }}
+        </Inline>
+      </ListItem>
+    </List>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/compare-mark.vue b/packages/vue/ui/src/components/compare-mark.vue
new file mode 100644
index 0000000..aafe641
--- /dev/null
+++ b/packages/vue/ui/src/components/compare-mark.vue
@@ -0,0 +1,42 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/compare.ts -->
+<!--
+  One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen
+  readers), any other value is shown as text.
+-->
+<script lang="ts">
+export type CompareMarkProps = {
+  value: string;
+  yes: string;
+  no: string;
+};
+</script>
+
+<script setup lang="ts">
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+
+const { value, yes, no } = defineProps<CompareMarkProps>();
+</script>
+
+<template>
+  <Inline v-if="((value as string) === 'yes')" class="inline-flex items-center gap-2" data-mark="yes">
+    <LucideIcon name="check" :size="16" class="text-foreground" />
+    <Inline class="sr-only">
+      {{ yes }}
+    </Inline>
+  </Inline>
+  <Inline
+    v-if="((value as string) === 'no')"
+    class="inline-flex items-center gap-2 text-muted-foreground"
+    data-mark="no"
+  >
+    <LucideIcon name="minus" :size="16" />
+    <Inline class="sr-only">
+      {{ no }}
+    </Inline>
+  </Inline>
+  <Inline v-if="(((value as string) !== 'yes') && ((value as string) !== 'no'))">
+    {{ value }}
+  </Inline>
+</template>
diff --git a/packages/vue/ui/src/components/cta-actions.types.ts b/packages/vue/ui/src/components/cta-actions.types.ts
new file mode 100644
index 0000000..a82d453
--- /dev/null
+++ b/packages/vue/ui/src/components/cta-actions.types.ts
@@ -0,0 +1,15 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/cta.ts
+
+export type ActionSet = {
+  /** one or two links, or a form */
+  mode?: "one" | "two" | "form";
+  /** primary action label */
+  cta: string;
+  /** the address of the primary action; none: a button, not a link */
+  href?: string;
+  secondary?: string;
+  secondaryHref?: string;
+  /** label of the form field (the email field, or the prompt line of HeroPrompt) */
+  emailLabel?: string;
+};
diff --git a/packages/vue/ui/src/components/cta-actions.vue b/packages/vue/ui/src/components/cta-actions.vue
new file mode 100644
index 0000000..c974d87
--- /dev/null
+++ b/packages/vue/ui/src/components/cta-actions.vue
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/cta.ts -->
+<!--
+  The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions
+  form).
+-->
+<script lang="ts">
+import type { ActionSet } from "./cta-actions.types";
+
+export type CtaActionsProps = {
+  id: string;
+  actions: ActionSet;
+  center?: boolean;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Form from "../primitives/form/form.vue";
+import Group from "../primitives/group/group.vue";
+import Input from "../primitives/input/input.vue";
+import Label from "../primitives/label/label.vue";
+import ActionGroup from "../components/action-group.vue";
+import { cn, tpl } from "../utils";
+
+const { id, actions, center = false } = defineProps<CtaActionsProps>();
+</script>
+
+<template>
+  <Form
+    v-if="(actions.mode === 'form')"
+    method="dialog"
+    :class="cn('w-full max-w-md', (center ? 'mx-auto' : ''))"
+    data-testid="email-form"
+  >
+    <Label :for="tpl('{0}-email', id)" class="sr-only">
+      {{ actions.emailLabel }}
+    </Label>
+    <Group gap="2" align="start" class="w-full flex-wrap">
+      <Input type="email" name="email" class="min-w-0 flex-1" :id="tpl('{0}-email', id)" data-testid="field" />
+      <Button variant="default" size="default" type="submit" data-testid="submit">
+        {{ actions.cta }}
+      </Button>
+    </Group>
+  </Form>
+  <ActionGroup v-else
+    :primary="actions.cta"
+    :primaryHref="actions.href"
+    :secondary="((actions.mode === 'two') ? actions.secondary : undefined)"
+    :secondaryHref="actions.secondaryHref"
+    :align="(center ? 'center' : 'start')"
+  />
+</template>
diff --git a/packages/vue/ui/src/components/cta-proof-items.vue b/packages/vue/ui/src/components/cta-proof-items.vue
new file mode 100644
index 0000000..ce1d069
--- /dev/null
+++ b/packages/vue/ui/src/components/cta-proof-items.vue
@@ -0,0 +1,141 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/cta-proof-parts.ts -->
+<!--
+  The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats
+  (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).
+-->
+<script lang="ts">
+import type { CtaContent } from "../blocks/cta-proof.types";
+
+export type CtaProofItemsProps = {
+  content: CtaContent;
+  proof?: "logos" | "features" | "stats" | "rows" | "zones";
+  center?: boolean;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import { fmtMoney } from "../utils";
+
+const { content, proof = "stats", center = false } = defineProps<CtaProofItemsProps>();
+</script>
+
+<template>
+  <Box
+    v-if="(((proof as string) === 'logos') && ((content.logos?.length ?? 0) > 0))"
+    class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6"
+    data-testid="cta-proof"
+  >
+    <Group
+      v-for="l in content.logos"
+      :key="l.id"
+      gap="2"
+      align="center"
+      justify="center"
+      class="text-muted-foreground"
+      data-testid="cta-item"
+    >
+      <LucideIcon :name="l.icon" :size="20" />
+      <Text size="sm" weight="semibold">
+        {{ l.name }}
+      </Text>
+    </Group>
+  </Box>
+  <Box
+    v-if="(((proof as string) === 'features') && ((content.features?.length ?? 0) > 0))"
+    class="grid grid-cols-1 gap-4 text-left sm:grid-cols-2"
+    data-testid="cta-proof"
+  >
+    <Group
+      v-for="f in content.features"
+      :key="f.id"
+      gap="4"
+      align="start"
+      class="rounded bg-card inset-ring inset-ring-border p-4"
+      data-testid="cta-item"
+    >
+      <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+        <LucideIcon :name="f.icon" :size="20" />
+      </Box>
+      <Stack gap="0">
+        <Text size="sm" weight="semibold">
+          {{ f.title }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ f.text }}
+        </Text>
+      </Stack>
+    </Group>
+  </Box>
+  <Box
+    v-if="(((proof as string) === 'stats') && ((content.stats?.length ?? 0) > 0))"
+    class="grid grid-cols-3 gap-4"
+    data-testid="cta-proof"
+  >
+    <template v-for="(s, i) in content.stats" :key="s.id">
+      <Stack v-if="(i < 3)" gap="0" :class="(center ? 'items-center text-center' : '')" data-testid="cta-item">
+        <Text size="3xl" weight="bold">
+          {{ s.value }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ s.label }}
+        </Text>
+      </Stack>
+    </template>
+  </Box>
+  <List
+    v-if="(((proof as string) === 'rows') && ((content.features?.length ?? 0) > 0))"
+    class="m-0 flex list-none flex-col gap-4 p-0"
+    data-testid="cta-proof"
+  >
+    <ListItem v-for="f in content.features" :key="f.id" class="flex items-start gap-4" data-testid="cta-item">
+      <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+        <LucideIcon :name="f.icon" :size="20" />
+      </Box>
+      <Stack gap="0">
+        <Text size="sm" weight="semibold">
+          {{ f.title }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ f.text }}
+        </Text>
+      </Stack>
+    </ListItem>
+  </List>
+  <List
+    v-if="(((proof as string) === 'zones') && ((content.zones?.length ?? 0) > 0))"
+    class="m-0 flex list-none flex-col p-0"
+    data-testid="cta-proof"
+  >
+    <ListItem
+      v-for="z in content.zones"
+      :key="z.id"
+      class="flex items-start justify-between gap-4 border-b border-border py-4"
+      data-testid="cta-item"
+    >
+      <Stack gap="0" class="min-w-0">
+        <Text size="sm" weight="semibold">
+          {{ z.name }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ z.area }}
+        </Text>
+      </Stack>
+      <Stack gap="0" class="shrink-0 text-right">
+        <Text size="sm" weight="semibold">
+          {{ fmtMoney(z.price, z.currency) }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ z.time }}
+        </Text>
+      </Stack>
+    </ListItem>
+  </List>
+</template>
diff --git a/packages/vue/ui/src/components/drawer-lines.vue b/packages/vue/ui/src/components/drawer-lines.vue
new file mode 100644
index 0000000..85a7ee9
--- /dev/null
+++ b/packages/vue/ui/src/components/drawer-lines.vue
@@ -0,0 +1,93 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shop-parts.ts -->
+<!--
+  The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal
+  and total and the button.
+-->
+<script lang="ts">
+import type { CartLine, CartLabels } from "../blocks/cart-list.types";
+import type { SummaryRow } from "../blocks/order-summary.types";
+import type { DrawerLabels } from "../blocks/cart-drawer.types";
+
+export type DrawerLinesProps = {
+  lines: CartLine[];
+  rows: SummaryRow[];
+  labels: CartLabels;
+  drawer: DrawerLabels;
+  media?: "image" | "none";
+  field?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Progress from "../primitives/form/progress.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+import NumberField from "../components/number-field.vue";
+import { fmtMoney, tpl } from "../utils";
+
+const { lines, rows, labels, drawer, media = "image", field = "qty" } = defineProps<DrawerLinesProps>();
+</script>
+
+<template>
+  <Stack gap="4" align="stretch" class="flex-1 p-4" data-testid="lines">
+    <Group v-for="line in lines" :key="line.id" gap="4" align="start" data-testid="item">
+      <MediaFrame v-if="((media as string) === 'image')" :alt="line.name" ratio="1/1" class="size-16 shrink-0" />
+      <Stack gap="2" align="stretch" class="flex-1">
+        <Group gap="2" justify="between" align="start">
+          <Text size="sm" weight="semibold">
+            {{ line.name }}
+          </Text>
+          <Inline class="text-sm font-medium">
+            {{ fmtMoney((line.price * line.qty), line.currency) }}
+          </Inline>
+        </Group>
+        <Text size="xs" class="text-muted-foreground">
+          {{ line.variant }}
+        </Text>
+        <NumberField
+          :value="(line.qty == null ? undefined : String(line.qty))"
+          :name="tpl('{0}-{1}', field, line.id)"
+          min="1"
+          :label="labels.qty"
+          :decrease="labels.decrease"
+          :increase="labels.increase"
+        />
+      </Stack>
+    </Group>
+  </Stack>
+  <Stack gap="4" align="stretch" class="border-t border-border p-4">
+    <Stack gap="2" align="stretch" class="rounded bg-muted p-4" data-testid="progress">
+      <Text size="sm">
+        {{ drawer.progress }}
+      </Text>
+      <Progress value="96" max="100" :aria-label="drawer.progress" />
+    </Stack>
+    <List tag="ul" class="flex flex-col gap-2">
+      <template v-for="(row, i) in rows" :key="row.id">
+        <ListItem v-if="(row.strong ? true : (i === 0))"
+          :class="
+            row.strong ? 'flex justify-between text-base font-bold'
+            : 'flex justify-between text-sm text-muted-foreground'
+          "
+        >
+          <Inline>
+            {{ row.label }}
+          </Inline>
+          <Inline>
+            {{ fmtMoney(row.amount, row.currency) }}
+          </Inline>
+        </ListItem>
+      </template>
+    </List>
+    <Button variant="default" size="lg" class="w-full" data-testid="checkout">
+      {{ labels.checkout }}
+    </Button>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/dropdown-item.vue b/packages/vue/ui/src/components/dropdown-item.vue
new file mode 100644
index 0000000..bb70471
--- /dev/null
+++ b/packages/vue/ui/src/components/dropdown-item.vue
@@ -0,0 +1,50 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex
+  -1: the menu moves focus with the arrow keys.
+-->
+<script lang="ts">
+export type DropdownItemProps = {
+  selected?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import ButtonPlain from "../primitives/button-plain/button-plain.vue";
+import Inline from "../primitives/inline/inline.vue";
+import { cn } from "../utils";
+
+const { selected = false, class: className } = defineProps<DropdownItemProps>();
+const emit = defineEmits<{ click: [] }>();
+defineSlots<{ default?(): unknown, icon?(): unknown, right?(): unknown }>();
+</script>
+
+<template>
+  <ButtonPlain
+    type="button"
+    role="menuitem"
+    :class="cn('group flex h-9 w-full items-center px-2 text-left text-foreground', className)"
+    :tabindex="-1"
+    data-slot="dropdown-item"
+    :data-state="(selected ? 'selected' : 'default')"
+    @click="() => emit('click')"
+  >
+    <Inline
+      :class="'flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted ' +
+        'group-data-[state=selected]:bg-muted'"
+      data-slot="dropdown-item-content"
+    >
+      <Inline v-if="$slots.icon" class="flex w-7 shrink-0 items-center pr-2" data-slot="dropdown-item-icon">
+        <slot name="icon" />
+      </Inline>
+      <Inline :class="cn('text-xs', 'min-w-0 flex-1 truncate px-1 font-bold')" data-slot="dropdown-item-label">
+        <slot />
+      </Inline>
+      <Inline v-if="$slots.right" class="flex shrink-0 items-center pr-1" data-slot="dropdown-item-right">
+        <slot name="right" />
+      </Inline>
+    </Inline>
+  </ButtonPlain>
+</template>
diff --git a/packages/vue/ui/src/components/editor-tab.vue b/packages/vue/ui/src/components/editor-tab.vue
new file mode 100644
index 0000000..061f947
--- /dev/null
+++ b/packages/vue/ui/src/components/editor-tab.vue
@@ -0,0 +1,73 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not
+  pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close
+  events.
+-->
+<script lang="ts">
+export type EditorTabProps = {
+  label: string;
+  closeLabel: string;
+  active?: boolean;
+  preview?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import { cn } from "../utils";
+
+const {
+  label,
+  closeLabel,
+  active = false,
+  preview = false,
+  class: className,
+} = defineProps<EditorTabProps>();
+const emit = defineEmits<{ click: [], close: [] }>();
+defineSlots<{ icon?(): unknown }>();
+</script>
+
+<template>
+  <Box
+    :class="cn(
+      'flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card ' +
+        '[&_svg]:text-muted-foreground',
+      'border-r border-border',
+      className
+    )"
+    role="tab"
+    :aria-selected="active"
+    :tabindex="(active ? 0 : -1)"
+    data-slot="editor-tab"
+    :data-state="(active ? 'active' : 'default')"
+    @click="() => emit('click')"
+  >
+    <Inline class="flex h-10 items-center gap-2 px-3" data-slot="editor-tab-content">
+      <slot name="icon" />
+      <Inline
+        :class="cn('text-xs text-foreground', (preview ? 'font-semibold italic' : 'font-bold'))"
+        data-slot="editor-tab-label"
+      >
+        {{ label }}
+      </Inline>
+      <Button
+        variant="ghost"
+        size="sm"
+        layout="icon"
+        :class="'p-0 [&>svg]:size-4'"
+        :aria-label="closeLabel"
+        :tabindex="-1"
+        data-slot="editor-tab-close"
+        @click="() => emit('close')"
+      >
+        <LucideIcon name="x" :size="16" />
+      </Button>
+    </Inline>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/empty-state.vue b/packages/vue/ui/src/components/empty-state.vue
new file mode 100644
index 0000000..d413a34
--- /dev/null
+++ b/packages/vue/ui/src/components/empty-state.vue
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- Empty list or nothing found: a round icon, a title, a hint and an optional action. -->
+<script lang="ts">
+export type EmptyStateProps = {
+  icon?: string;
+  title: string;
+  text?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import IconBadge from "../primitives/iconbadge/icon-badge.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import { cn } from "../utils";
+
+const { icon = "inbox", title, text, class: className } = defineProps<EmptyStateProps>();
+defineSlots<{ action?(): unknown }>();
+</script>
+
+<template>
+  <Box
+    :class="cn(
+      'flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border',
+      className
+    )"
+    role="status"
+  >
+    <IconBadge size="lg">
+      <LucideIcon :name="icon" :size="20" />
+    </IconBadge>
+    <Text class="m-0 text-sm font-bold text-foreground">
+      {{ title }}
+    </Text>
+    <Text v-if="text" class="m-0 max-w-80 text-xs font-medium text-muted-foreground">
+      {{ text }}
+    </Text>
+    <slot name="action" />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/faq-cards.vue b/packages/vue/ui/src/components/faq-cards.vue
new file mode 100644
index 0000000..7be2735
--- /dev/null
+++ b/packages/vue/ui/src/components/faq-cards.vue
@@ -0,0 +1,69 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/faq-parts.ts -->
+<!--
+  The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon
+  square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).
+-->
+<script lang="ts">
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+
+export type FaqCardsProps = {
+  items: Question[];
+  labels: FaqSplitLabels;
+  cards?: "grid3" | "grid4" | "icons";
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import ArticleBlock from "../components/article-block.vue";
+
+const { items, labels, cards = "grid3" } = defineProps<FaqCardsProps>();
+</script>
+
+<template>
+  <Box
+    :class="
+      (cards as string) === 'grid4' ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'
+      : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'
+    "
+    data-testid="faq"
+  >
+    <ArticleBlock
+      v-for="q in items"
+      :key="q.id"
+      class="rounded bg-card inset-ring inset-ring-border flex flex-col gap-4 p-6"
+      testid="faq-card"
+    >
+      <Box
+        v-if="((cards as string) === 'icons')"
+        class="flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+      >
+        <LucideIcon :name="q.icon" :size="20" />
+      </Box>
+      <Stack gap="2">
+        <Badge variant="secondary" size="sm" class="w-fit">
+          {{ q.category }}
+        </Badge>
+        <Title :as="3" size="base" weight="semibold">
+          {{ q.question }}
+        </Title>
+        <Text size="sm" class="text-muted-foreground">
+          {{ q.answer }}
+        </Text>
+      </Stack>
+      <Box class="mt-auto">
+        <Button variant="link" size="sm" class="gap-2 px-0 font-medium">
+          {{ labels.more }}
+          <LucideIcon name="arrow-right" :size="16" />
+        </Button>
+      </Box>
+    </ArticleBlock>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/faq-disclosures.vue b/packages/vue/ui/src/components/faq-disclosures.vue
new file mode 100644
index 0000000..2fa643c
--- /dev/null
+++ b/packages/vue/ui/src/components/faq-disclosures.vue
@@ -0,0 +1,33 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/faq-parts.ts -->
+<!-- The questions of FaqSplit as native disclosures, one open at a time. -->
+<script lang="ts">
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+
+export type FaqDisclosuresProps = {
+  items: Question[];
+  name: string;
+};
+</script>
+
+<script setup lang="ts">
+import Disclosure from "../primitives/disclosure/disclosure.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Summary from "../primitives/disclosure/summary.vue";
+import Text from "../primitives/text/text.vue";
+
+const { items, name } = defineProps<FaqDisclosuresProps>();
+</script>
+
+<template>
+  <Stack gap="0" align="stretch" data-testid="faq">
+    <Disclosure v-for="q in items" :key="q.id" variant="item" :name="name" data-testid="faq-item">
+      <Summary variant="item">
+        {{ q.question }}
+      </Summary>
+      <Text size="sm" class="pb-4 text-muted-foreground">
+        {{ q.answer }}
+      </Text>
+    </Disclosure>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/faq-finder.vue b/packages/vue/ui/src/components/faq-finder.vue
new file mode 100644
index 0000000..7c724ca
--- /dev/null
+++ b/packages/vue/ui/src/components/faq-finder.vue
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/faq-parts.ts -->
+<!--
+  The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as
+  popular links.
+-->
+<script lang="ts">
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+import type { FaqTab } from "../blocks/faq-list.types";
+
+export type FaqFinderProps = {
+  items: Question[];
+  labels: FaqSplitLabels;
+  topics: FaqTab[];
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import SearchField from "../components/search-field.vue";
+
+const { items, labels, topics } = defineProps<FaqFinderProps>();
+</script>
+
+<template>
+  <Stack gap="6" align="stretch" data-testid="faq-finder">
+    <SearchField :label="labels.search" :placeholder="labels.search" :value="(labels.query ?? '')" />
+    <Group gap="2" class="flex-wrap">
+      <Button
+        v-for="t in topics"
+        :key="t.id"
+        variant="outline"
+        size="sm"
+        data-testid="faq-topic"
+        :data-value="t.value"
+      >
+        {{ t.title }}
+      </Button>
+    </Group>
+    <Stack gap="2">
+      <Text size="sm" weight="semibold">
+        {{ labels.popular }}
+      </Text>
+      <List class="m-0 flex list-none flex-col gap-2 p-0">
+        <template v-for="(q, i) in items" :key="q.id">
+          <ListItem v-if="(i < 3)" data-testid="faq-popular">
+            <MenuEntry :href="q.href" class="text-sm font-medium" size="sm">
+              {{ q.question }}
+            </MenuEntry>
+          </ListItem>
+        </template>
+      </List>
+    </Stack>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/faq-help.vue b/packages/vue/ui/src/components/faq-help.vue
new file mode 100644
index 0000000..03e4e76
--- /dev/null
+++ b/packages/vue/ui/src/components/faq-help.vue
@@ -0,0 +1,66 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/faq-parts.ts -->
+<!--
+  The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon,
+  name, one line) and a link.
+-->
+<script lang="ts">
+import type { Question, FaqSplitLabels } from "../blocks/faq-split.types";
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FaqHelpProps = {
+  labels: FaqSplitLabels;
+  channels: Feature[];
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { labels, channels, landmarkLabel } = defineProps<FaqHelpProps>();
+</script>
+
+<template>
+  <Block
+    tag="aside"
+    class="rounded bg-card inset-ring inset-ring-border flex flex-col gap-6 p-6"
+    :aria-label="(landmarkLabel ?? labels.asideTitle)"
+    data-testid="faq-help"
+  >
+    <Stack gap="2">
+      <Text size="lg" weight="semibold">
+        {{ labels.asideTitle }}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {{ labels.asideText }}
+      </Text>
+    </Stack>
+    <List class="m-0 flex list-none flex-col gap-4 p-0">
+      <ListItem v-for="c in channels" :key="c.id" class="flex items-start gap-4" data-testid="faq-channel">
+        <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+          <LucideIcon :name="c.icon" :size="20" />
+        </Box>
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {{ c.title }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ c.text }}
+          </Text>
+        </Stack>
+      </ListItem>
+    </List>
+    <Button variant="link" size="sm" class="gap-2 px-0 font-medium">
+      {{ labels.asideCta }}
+      <LucideIcon name="arrow-right" :size="16" />
+    </Button>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/feature-cards.vue b/packages/vue/ui/src/components/feature-cards.vue
new file mode 100644
index 0000000..7e6ebc3
--- /dev/null
+++ b/packages/vue/ui/src/components/feature-cards.vue
@@ -0,0 +1,86 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/features.ts -->
+<!-- The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names. -->
+<script lang="ts">
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FeatureCardsProps = {
+  features: Feature[];
+  cols?: "1-2" | "1-3" | "1-4";
+  item?: "card" | "tile" | "cell";
+};
+</script>
+
+<script setup lang="ts">
+import Card from "../primitives/card/card.vue";
+import CardContent from "../primitives/card/card-content.vue";
+import CardHeader from "../primitives/card/card-header.vue";
+import CardTitle from "../primitives/card/card-title.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import IconBadge from "../primitives/iconbadge/icon-badge.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const { features, cols = "1-3", item = "card" } = defineProps<FeatureCardsProps>();
+</script>
+
+<template>
+  <Grid
+    :cols="cols"
+    :class="
+      (item as string) === 'cell' ? cn('w-full gap-px overflow-hidden bg-border p-px', defaults.features.cells)
+      : 'gap-6'
+    "
+    data-testid="feature-grid"
+  >
+    <template v-for="feature in features" :key="feature.id">
+      <Card v-if="((item as string) === 'tile')" variant="compact" data-testid="feature-card">
+        <Group gap="4" align="start">
+          <LucideIcon :name="feature.icon" :size="20" />
+          <Stack gap="2">
+            <Title :as="3" size="base" weight="bold">
+              {{ feature.title }}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {{ feature.text }}
+            </Text>
+          </Stack>
+        </Group>
+      </Card>
+      <Stack v-else-if="((item as string) === 'cell')"
+        gap="2"
+        align="center"
+        class="h-full gap-8 bg-background px-6 py-12 text-center"
+        data-testid="feature-card"
+      >
+        <IconBadge variant="primary" size="xl" data-testid="feature-icon">
+          <LucideIcon :name="feature.icon" :size="24" />
+        </IconBadge>
+        <Title :as="3" size="xl" weight="semibold" class="leading-6">
+          {{ feature.title }}
+        </Title>
+        <Text size="sm" weight="semibold" class="leading-5 text-muted-foreground">
+          {{ feature.text }}
+        </Text>
+      </Stack>
+      <Card v-else variant="default" data-testid="feature-card">
+        <CardHeader class="flex flex-col gap-4">
+          <LucideIcon :name="feature.icon" :size="24" />
+          <CardTitle :as="3">
+            {{ feature.title }}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Text size="sm" class="text-muted-foreground">
+            {{ feature.text }}
+          </Text>
+        </CardContent>
+      </Card>
+    </template>
+  </Grid>
+</template>
diff --git a/packages/vue/ui/src/components/feature-metric-cards.vue b/packages/vue/ui/src/components/feature-metric-cards.vue
new file mode 100644
index 0000000..c87b2fb
--- /dev/null
+++ b/packages/vue/ui/src/components/feature-metric-cards.vue
@@ -0,0 +1,52 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/feature-split-parts.ts -->
+<!--
+  Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the
+  label.
+-->
+<script lang="ts">
+import type { Stat } from "../blocks/stats-band.types";
+
+export type FeatureMetricCardsProps = {
+  stats: Stat[];
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { stats } = defineProps<FeatureMetricCardsProps>();
+</script>
+
+<template>
+  <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+    <template v-for="(s, i) in stats" :key="s.id">
+      <Group v-if="(i < 4)"
+        gap="4"
+        align="center"
+        class="rounded bg-card inset-ring inset-ring-border p-4"
+        data-testid="feature-stat"
+      >
+        <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+          <LucideIcon :name="s.icon" :size="20" />
+        </Inline>
+        <Stack gap="0" class="min-w-0">
+          <Text size="lg" weight="bold">
+            {{ s.value }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ s.label }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ s.hint }}
+          </Text>
+        </Stack>
+      </Group>
+    </template>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/feature-pairs.vue b/packages/vue/ui/src/components/feature-pairs.vue
new file mode 100644
index 0000000..2e0cada
--- /dev/null
+++ b/packages/vue/ui/src/components/feature-pairs.vue
@@ -0,0 +1,42 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/feature-split-parts.ts -->
+<!-- Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards. -->
+<script lang="ts">
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FeaturePairsProps = {
+  features: Feature[];
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+
+const { features } = defineProps<FeaturePairsProps>();
+</script>
+
+<template>
+  <Box class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+    <template v-for="(f, i) in features" :key="f.id">
+      <Group v-if="(i < 4)" gap="4" align="start" data-testid="feature-item">
+        <Inline class="flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground">
+          <LucideIcon :name="f.icon" :size="16" />
+        </Inline>
+        <Stack gap="2" class="min-w-0">
+          <Title :as="3" size="sm" weight="semibold">
+            {{ f.title }}
+          </Title>
+          <Text size="sm" class="text-muted-foreground">
+            {{ f.text }}
+          </Text>
+        </Stack>
+      </Group>
+    </template>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/feature-rows.vue b/packages/vue/ui/src/components/feature-rows.vue
new file mode 100644
index 0000000..1e2c5b9
--- /dev/null
+++ b/packages/vue/ui/src/components/feature-rows.vue
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/features.ts -->
+<!-- The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names. -->
+<script lang="ts">
+import type { Feature } from "../blocks/feature-grid.types";
+
+export type FeatureRowsProps = {
+  features: Feature[];
+  mediaSide?: "end" | "start" | "alternate";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { cn } from "../utils";
+
+const { features, mediaSide = "end" } = defineProps<FeatureRowsProps>();
+</script>
+
+<template>
+  <Stack gap="8" align="stretch" data-testid="feature-rows">
+    <Grid
+      v-for="feature in features"
+      :key="feature.id"
+      cols="1-2"
+      class="group items-center gap-8"
+      data-testid="feature-card"
+    >
+      <Stack gap="2" class="min-w-0">
+        <LucideIcon :name="feature.icon" :size="24" />
+        <Title :as="3" size="xl" weight="bold">
+          {{ feature.title }}
+        </Title>
+        <Text size="base" class="text-muted-foreground">
+          {{ feature.text }}
+        </Text>
+      </Stack>
+      <Box
+        :class="cn(
+          'w-full min-w-0',
+          (
+            (mediaSide as string) === 'start' ? 'md:order-first'
+            : (mediaSide as string) === 'alternate' ? 'md:group-even:order-first'
+            : ''
+          )
+        )"
+      >
+        <MediaFrame :alt="feature.title" ratio="4/3" />
+      </Box>
+    </Grid>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/feature-stat-rows.vue b/packages/vue/ui/src/components/feature-stat-rows.vue
new file mode 100644
index 0000000..3fc086c
--- /dev/null
+++ b/packages/vue/ui/src/components/feature-stat-rows.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/feature-split-parts.ts -->
+<!-- Two figures of FeatureSplit as cards, then three features as checked rows. -->
+<script lang="ts">
+import type { Feature } from "../blocks/feature-grid.types";
+import type { Stat } from "../blocks/stats-band.types";
+
+export type FeatureStatRowsProps = {
+  features: Feature[];
+  stats: Stat[];
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+
+const { features, stats } = defineProps<FeatureStatRowsProps>();
+</script>
+
+<template>
+  <Stack gap="6" align="stretch">
+    <Box class="grid grid-cols-2 gap-4">
+      <template v-for="(s, i) in stats" :key="s.id">
+        <Stack
+          v-if="(i < 2)"
+          gap="0"
+          class="rounded bg-card inset-ring inset-ring-border p-4"
+          data-testid="feature-stat"
+        >
+          <Text size="2xl" weight="bold">
+            {{ s.value }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ s.label }}
+          </Text>
+        </Stack>
+      </template>
+    </Box>
+    <Stack gap="4" align="stretch">
+      <template v-for="(f, i) in features" :key="f.id">
+        <Group v-if="(i < 3)" gap="4" align="start" data-testid="feature-item">
+          <Inline class="flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground">
+            <LucideIcon name="check" :size="16" />
+          </Inline>
+          <Stack gap="2" class="min-w-0">
+            <Title :as="3" size="sm" weight="semibold">
+              {{ f.title }}
+            </Title>
+            <Text size="sm" class="text-muted-foreground">
+              {{ f.text }}
+            </Text>
+          </Stack>
+        </Group>
+      </template>
+    </Stack>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/field.vue b/packages/vue/ui/src/components/field.vue
new file mode 100644
index 0000000..2a5e3e3
--- /dev/null
+++ b/packages/vue/ui/src/components/field.vue
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the
+  control.
+-->
+<script lang="ts">
+export type FieldProps = {
+  label: string;
+  htmlFor: string;
+  hint?: string;
+  error?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Label from "../primitives/label/label.vue";
+import Text from "../primitives/text/text.vue";
+import { cn } from "../utils";
+
+const { label, htmlFor, hint, error, class: className } = defineProps<FieldProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Box :class="cn('flex min-w-0 flex-col gap-2', className)">
+    <Label class="text-xs font-bold text-foreground" :for="htmlFor">
+      {{ label }}
+    </Label>
+    <slot />
+    <Text v-if="error" class="m-0 text-xs font-semibold text-destructive" role="alert">
+      {{ error }}
+    </Text>
+    <Text v-else-if="hint" class="m-0 text-xs font-medium text-muted-foreground">
+      {{ hint }}
+    </Text>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/figure-block.vue b/packages/vue/ui/src/components/figure-block.vue
new file mode 100644
index 0000000..b8c1fbd
--- /dev/null
+++ b/packages/vue/ui/src/components/figure-block.vue
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/landmarks.ts -->
+<!--
+  Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag
+  figure.
+-->
+<script lang="ts">
+export type FigureBlockProps = {
+  testid?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import { cn } from "../utils";
+
+const { testid, class: className } = defineProps<FigureBlockProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Block tag="figure" :class="cn(className)" :data-testid="testid">
+    <slot />
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/file-tree-item.vue b/packages/vue/ui/src/components/file-tree-item.vue
new file mode 100644
index 0000000..024d7d9
--- /dev/null
+++ b/packages/vue/ui/src/components/file-tree-item.vue
@@ -0,0 +1,66 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!-- A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide. -->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** FileTreeItem: the classes of each value (shadcn/cva style). */
+export const fileTreeItemVariants = variants({
+  base: "flex h-6 w-full items-center gap-4 text-xs font-bold text-muted-foreground data-[state=selected]:bg-muted",
+  variants: {
+    kind: {
+      folder: "",
+      file: "px-8",
+    },
+  },
+  defaultVariants: { kind: "file" },
+});
+
+export type FileTreeItemProps = {
+  kind?: "folder" | "file";
+  label: string;
+  selected?: boolean;
+  expanded?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import ButtonPlain from "../primitives/button-plain/button-plain.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import { cn } from "../utils";
+
+const {
+  kind = "file",
+  label,
+  selected = false,
+  expanded = false,
+  class: className,
+} = defineProps<FileTreeItemProps>();
+const emit = defineEmits<{ click: [] }>();
+</script>
+
+<template>
+  <ButtonPlain
+    type="button"
+    role="treeitem"
+    :class="cn(fileTreeItemVariants({ kind: kind }), className)"
+    :aria-selected="selected"
+    :tabindex="(selected ? 0 : -1)"
+    :aria-expanded="(((kind as string) === 'folder') ? expanded : undefined)"
+    data-slot="file-tree-item"
+    :data-kind="kind"
+    :data-state="(selected ? 'selected' : 'default')"
+    @click="() => emit('click')"
+  >
+    <template v-if="((kind as string) === 'folder')">
+      <LucideIcon :name="(expanded ? 'chevron-down' : 'chevron-right')" :size="16" />
+      <LucideIcon name="folder-open" :size="16" />
+    </template>
+    <LucideIcon v-else name="file" :size="16" />
+    <Inline class="whitespace-nowrap" data-slot="file-tree-label">
+      {{ label }}
+    </Inline>
+  </ButtonPlain>
+</template>
diff --git a/packages/vue/ui/src/components/file-tree.vue b/packages/vue/ui/src/components/file-tree.vue
new file mode 100644
index 0000000..830ed2e
--- /dev/null
+++ b/packages/vue/ui/src/components/file-tree.vue
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead`
+  from the utils to the keydown (vertical, no loop).
+-->
+<script lang="ts">
+export type FileTreeProps = {
+  label?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import { cn } from "../utils";
+
+const { label, class: className } = defineProps<FileTreeProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Box :class="cn('flex flex-col gap-2 p-2', className)" role="tree" :aria-label="label" data-slot="file-tree">
+    <slot />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/footer-brand.vue b/packages/vue/ui/src/components/footer-brand.vue
new file mode 100644
index 0000000..03f7bb8
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-brand.vue
@@ -0,0 +1,35 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The brand of FooterSplit: a mark and the brand word over the tagline. -->
+<script lang="ts">
+export type FooterBrandProps = {
+  brand: string;
+  tagline: string;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { brand, tagline } = defineProps<FooterBrandProps>();
+</script>
+
+<template>
+  <Stack gap="2" align="start" data-testid="footer-brand">
+    <Group gap="2" align="center">
+      <Inline class="flex size-8 items-center justify-center rounded bg-foreground text-background">
+        <LucideIcon name="layers" :size="16" />
+      </Inline>
+      <Text size="xl" weight="bold">
+        {{ brand }}
+      </Text>
+    </Group>
+    <Text size="sm" class="text-muted-foreground">
+      {{ tagline }}
+    </Text>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/footer-card.vue b/packages/vue/ui/src/components/footer-card.vue
new file mode 100644
index 0000000..919bdbe
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-card.vue
@@ -0,0 +1,76 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer.ts -->
+<!-- The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card. -->
+<script lang="ts">
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterCardProps = {
+  label: string;
+  brand: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Container from "../primitives/container/container.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import { defaults } from "../presets/defaults";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const { label, brand, groups, landmarkLabel } = defineProps<FooterCardProps>();
+</script>
+
+<template>
+  <Block tag="footer" class="py-8" data-testid="site-footer" data-layout="card" :aria-label="landmarkLabel">
+    <Container :class="cn(cn('mx-auto w-full px-4', defaults.section.landing), 'px-0')" data-slot="container">
+      <Box
+        :class="cn('flex w-full flex-row items-start overflow-hidden bg-muted p-10', defaults.footer.card)"
+        data-testid="footer-card"
+      >
+        <Group gap="4" align="center" :class="cn('h-8 shrink-0', defaults.footer.brand)" data-testid="footer-brand">
+          <Inline class="flex size-8 items-center justify-center rounded bg-foreground text-background">
+            <LucideIcon name="hexagon" :size="16" />
+          </Inline>
+          <Text size="base" weight="bold">
+            {{ brand }}
+          </Text>
+        </Group>
+        <NavBlock v-if="((groups?.length ?? 0) > 0)"
+          :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', label, landmarkLabel)) : label)"
+          class="min-w-0 flex-1"
+        >
+          <Group
+            gap="0"
+            align="start"
+            :class="cn('flex w-full flex-nowrap justify-between', defaults.footer.groups)"
+            data-testid="footer-groups"
+          >
+            <Stack v-for="g in groups" :key="g.id" gap="4" data-testid="group">
+              <Text size="xs" weight="semibold" class="leading-5">
+                {{ g.title }}
+              </Text>
+              <List class="m-0 flex list-none flex-col gap-4 p-0">
+                <ListItem v-for="item in g.links" :key="item.id">
+                  <MenuEntry :href="item.href" class="text-xs leading-5 text-muted-foreground">
+                    {{ item.name }}
+                  </MenuEntry>
+                </ListItem>
+              </List>
+            </Stack>
+          </Group>
+        </NavBlock>
+      </Box>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/footer-channels.vue b/packages/vue/ui/src/components/footer-channels.vue
new file mode 100644
index 0000000..cb98999
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-channels.vue
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The channels of the community as three cards: a glyph over the name and one line. -->
+<script lang="ts">
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterChannelsProps = {
+  extras: FooterExtras;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { extras } = defineProps<FooterChannelsProps>();
+</script>
+
+<template>
+  <Box v-if="((extras.channels?.length ?? 0) > 0)" class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+    <template v-for="(c, i) in extras.channels" :key="c.id">
+      <Stack v-if="(i < 3)"
+        gap="2"
+        align="start"
+        class="rounded bg-card inset-ring inset-ring-border p-4"
+        data-testid="footer-channel"
+      >
+        <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+          <LucideIcon :name="c.icon" :size="20" />
+        </Inline>
+        <Text size="sm" weight="semibold">
+          {{ c.title }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ c.text }}
+        </Text>
+      </Stack>
+    </template>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/footer-columns.vue b/packages/vue/ui/src/components/footer-columns.vue
new file mode 100644
index 0000000..5be5f7d
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-columns.vue
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer.ts -->
+<!-- The link groups of SitemapFooter as columns: a group title over its links, up to five columns. -->
+<script lang="ts">
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterColumnsProps = {
+  label: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Grid from "../primitives/grid/grid.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+
+const { label, groups, landmarkLabel } = defineProps<FooterColumnsProps>();
+</script>
+
+<template>
+  <Block v-if="((groups?.length ?? 0) > 0)" tag="nav" :aria-label="(landmarkLabel ?? label)">
+    <Grid cols="1" class="grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5" data-testid="footer-groups">
+      <Stack v-for="g in groups" :key="g.id" gap="2" data-testid="group">
+        <Text size="sm" weight="semibold">
+          {{ g.title }}
+        </Text>
+        <List class="m-0 flex list-none flex-col gap-2 p-0">
+          <ListItem v-for="item in g.links" :key="item.id">
+            <MenuEntry :href="item.href" class="text-sm text-muted-foreground">
+              {{ item.name }}
+            </MenuEntry>
+          </ListItem>
+        </List>
+      </Stack>
+    </Grid>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/footer-contacts.vue b/packages/vue/ui/src/components/footer-contacts.vue
new file mode 100644
index 0000000..1350cb8
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-contacts.vue
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value. -->
+<script lang="ts">
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterContactsProps = {
+  extras: FooterExtras;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { extras } = defineProps<FooterContactsProps>();
+</script>
+
+<template>
+  <Stack v-if="((extras.contacts?.length ?? 0) > 0)" gap="4" align="stretch">
+    <Group v-for="c in extras.contacts" :key="c.id" gap="4" align="center" data-testid="footer-contact">
+      <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+        <LucideIcon :name="c.icon" :size="20" />
+      </Inline>
+      <Stack gap="0">
+        <Text size="sm" weight="semibold">
+          {{ c.title }}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {{ c.text }}
+        </Text>
+      </Stack>
+    </Group>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/footer-figures.vue b/packages/vue/ui/src/components/footer-figures.vue
new file mode 100644
index 0000000..11e737d
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-figures.vue
@@ -0,0 +1,33 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- Three figures in a row under the brand of FooterSplit. -->
+<script lang="ts">
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterFiguresProps = {
+  extras: FooterExtras;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { extras } = defineProps<FooterFiguresProps>();
+</script>
+
+<template>
+  <Group v-if="((extras.stats?.length ?? 0) > 0)" gap="8" class="flex-wrap">
+    <template v-for="(s, i) in extras.stats" :key="s.id">
+      <Stack v-if="(i < 3)" gap="0" data-testid="footer-stat">
+        <Text size="xl" weight="bold">
+          {{ s.value }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ s.label }}
+        </Text>
+      </Stack>
+    </template>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/footer-group-cards.vue b/packages/vue/ui/src/components/footer-group-cards.vue
new file mode 100644
index 0000000..f239232
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-group-cards.vue
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!--
+  The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide
+  screens.
+-->
+<script lang="ts">
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterGroupCardsProps = {
+  label: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+
+const { label, groups, landmarkLabel } = defineProps<FooterGroupCardsProps>();
+</script>
+
+<template>
+  <Block v-if="((groups?.length ?? 0) > 0)" tag="nav" :aria-label="(landmarkLabel ?? label)">
+    <Box class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <Stack
+        v-for="g in groups"
+        :key="g.id"
+        gap="4"
+        align="stretch"
+        class="rounded bg-card inset-ring inset-ring-border p-6"
+        data-testid="group"
+      >
+        <Group gap="2" align="center">
+          <Inline class="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground">
+            <LucideIcon :name="g.icon" :size="20" />
+          </Inline>
+          <Text size="sm" weight="semibold">
+            {{ g.title }}
+          </Text>
+        </Group>
+        <List class="m-0 flex list-none flex-col gap-2 p-0">
+          <ListItem v-for="item in g.links" :key="item.id">
+            <MenuEntry :href="item.href" class="text-sm text-muted-foreground" variant="muted" size="sm">
+              {{ item.name }}
+            </MenuEntry>
+          </ListItem>
+        </List>
+      </Stack>
+    </Box>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/footer-link-columns.vue b/packages/vue/ui/src/components/footer-link-columns.vue
new file mode 100644
index 0000000..c21d61c
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-link-columns.vue
@@ -0,0 +1,45 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The first three link groups of FooterSplit as small columns beside each other. -->
+<script lang="ts">
+import type { MegaGroup } from "../blocks/mega-menu.types";
+
+export type FooterLinkColumnsProps = {
+  label: string;
+  groups: MegaGroup[];
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+
+const { label, groups, landmarkLabel } = defineProps<FooterLinkColumnsProps>();
+</script>
+
+<template>
+  <Block v-if="((groups?.length ?? 0) > 0)" tag="nav" :aria-label="(landmarkLabel ?? label)">
+    <Box class="grid grid-cols-2 gap-8 sm:grid-cols-3">
+      <template v-for="(g, i) in groups" :key="g.id">
+        <Stack v-if="(i < 3)" gap="2" data-testid="group">
+          <Text size="sm" weight="semibold">
+            {{ g.title }}
+          </Text>
+          <List class="m-0 flex list-none flex-col gap-2 p-0">
+            <ListItem v-for="item in g.links" :key="item.id">
+              <MenuEntry :href="item.href" class="text-sm text-muted-foreground" variant="muted" size="sm">
+                {{ item.name }}
+              </MenuEntry>
+            </ListItem>
+          </List>
+        </Stack>
+      </template>
+    </Box>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/footer-points.vue b/packages/vue/ui/src/components/footer-points.vue
new file mode 100644
index 0000000..5a80ba4
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-points.vue
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- Four points with their glyphs in a column, under the tagline of FooterSplit. -->
+<script lang="ts">
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterPointsProps = {
+  extras: FooterExtras;
+  title: string;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { extras, title } = defineProps<FooterPointsProps>();
+</script>
+
+<template>
+  <Stack v-if="((extras.points?.length ?? 0) > 0)" gap="4" align="start">
+    <Text size="sm" weight="semibold">
+      {{ title }}
+    </Text>
+    <template v-for="(p, i) in extras.points" :key="p.id">
+      <Group v-if="(i < 4)" gap="2" align="center" data-testid="footer-point">
+        <LucideIcon :name="p.icon" :size="16" />
+        <Text size="sm">
+          {{ p.title }}
+        </Text>
+      </Group>
+    </template>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/footer-signup-card.vue b/packages/vue/ui/src/components/footer-signup-card.vue
new file mode 100644
index 0000000..fa7c7d8
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-signup-card.vue
@@ -0,0 +1,50 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!-- The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note. -->
+<script lang="ts">
+import type { FooterExtras, FooterSplitLabels } from "../blocks/footer-split.types";
+
+export type FooterSignupCardProps = {
+  id: string;
+  labels: FooterSplitLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Form from "../primitives/form/form.vue";
+import Group from "../primitives/group/group.vue";
+import Input from "../primitives/input/input.vue";
+import Label from "../primitives/label/label.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import { cn, tpl } from "../utils";
+
+const { id, labels } = defineProps<FooterSignupCardProps>();
+</script>
+
+<template>
+  <Stack gap="4" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-6" data-testid="signup">
+    <Group gap="2" align="center">
+      <LucideIcon name="mail" :size="16" />
+      <Text size="sm" weight="semibold">
+        {{ labels.signup }}
+      </Text>
+    </Group>
+    <Form method="dialog" :class="cn('w-full max-w-md', (false ? 'mx-auto' : ''))" data-testid="email-form">
+      <Label :for="tpl('{0}-email', id)" class="sr-only">
+        {{ labels.email }}
+      </Label>
+      <Group gap="2" align="start" class="w-full flex-wrap">
+        <Input type="email" name="email" class="min-w-0 flex-1" :id="tpl('{0}-email', id)" data-testid="field" />
+        <Button variant="default" size="default" type="submit" data-testid="submit">
+          {{ labels.subscribe }}
+        </Button>
+      </Group>
+    </Form>
+    <Text size="xs" class="text-muted-foreground">
+      {{ labels.note }}
+    </Text>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/footer-sitemap.vue b/packages/vue/ui/src/components/footer-sitemap.vue
new file mode 100644
index 0000000..611989c
--- /dev/null
+++ b/packages/vue/ui/src/components/footer-sitemap.vue
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/footer-split-parts.ts -->
+<!--
+  The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no
+  link).
+-->
+<script lang="ts">
+export type FooterSitemapProps = {
+  href?: string;
+  label: string;
+};
+</script>
+
+<script setup lang="ts">
+import Link from "../primitives/link/link.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+
+const { href, label } = defineProps<FooterSitemapProps>();
+</script>
+
+<template>
+  <Link v-if="href" :href="href" size="sm" data-testid="footer-sitemap">
+    <LucideIcon name="arrow-right" :size="16" />
+    {{ label }}
+  </Link>
+</template>
diff --git a/packages/vue/ui/src/components/hero-badge.vue b/packages/vue/ui/src/components/hero-badge.vue
new file mode 100644
index 0000000..c4ae417
--- /dev/null
+++ b/packages/vue/ui/src/components/hero-badge.vue
@@ -0,0 +1,38 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!-- A composite badge on a dark band: an optional small mark beside a label. -->
+<script lang="ts">
+export type HeroBadgeProps = {
+  label: string;
+  mark?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Group from "../primitives/group/group.vue";
+import Text from "../primitives/text/text.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const { label, mark } = defineProps<HeroBadgeProps>();
+</script>
+
+<template>
+  <Group
+    gap="2"
+    align="center"
+    :class="cn(
+      'h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30',
+      defaults.hero.badge
+    )"
+    data-testid="section-badge"
+  >
+    <Badge v-if="mark" variant="secondary" size="sm" data-testid="badge-mark">
+      {{ mark }}
+    </Badge>
+    <Text size="xs" weight="bold" class="leading-5 text-background">
+      {{ label }}
+    </Text>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/hero-head.vue b/packages/vue/ui/src/components/hero-head.vue
new file mode 100644
index 0000000..bdbcf25
--- /dev/null
+++ b/packages/vue/ui/src/components/hero-head.vue
@@ -0,0 +1,110 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!--
+  The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a
+  call to action.
+-->
+<script lang="ts">
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type HeroHeadProps = {
+  brand?: string;
+  brandHref?: string;
+  links?: NavLink[];
+  current?: string;
+  login?: string;
+  loginHref?: string;
+  cta?: string;
+  href?: string;
+  skip?: string;
+  navLabel?: string;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Link from "../primitives/link/link.vue";
+import LinkPlain from "../primitives/link-plain/link-plain.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import { defaults } from "../presets/defaults";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  brand,
+  brandHref,
+  links,
+  current = "",
+  login,
+  loginHref,
+  cta,
+  href,
+  skip,
+  navLabel,
+  landmarkLabel,
+} = defineProps<HeroHeadProps>();
+</script>
+
+<template>
+  <Block
+    tag="header"
+    :class="cn('flex w-full flex-wrap items-center justify-between pr-4', defaults.hero.head)"
+    data-testid="hero-head"
+    :aria-label="landmarkLabel"
+  >
+    <LinkPlain v-if="skip"
+      href="#main-content"
+      :class="'sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background ' +
+        'focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border'"
+      data-testid="skip-link"
+    >
+      {{ skip }}
+    </LinkPlain>
+    <MenuEntry
+      :href="brandHref"
+      :class="cn(defaults.text.small, 'font-medium leading-6 text-background')"
+      testid="brand"
+    >
+      {{ brand }}
+    </MenuEntry>
+    <NavBlock v-if="(links && ((links?.length ?? 0) > 0))"
+      :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', navLabel, landmarkLabel)) : navLabel)"
+      testid="site-nav"
+    >
+      <Group gap="8" align="center" class="flex-wrap">
+        <template v-for="l in links" :key="l.id">
+          <Link v-if="l.href"
+            :href="l.href"
+            variant="default"
+            :aria-current="((l.id === current) ? 'page' : undefined)"
+            class="text-xs font-medium leading-5 text-background"
+            data-testid="nav-link"
+          >
+            {{ l.name }}
+          </Link>
+          <Inline v-else class="text-xs font-medium leading-5 text-background" data-testid="nav-link">
+            {{ l.name }}
+          </Inline>
+        </template>
+      </Group>
+    </NavBlock>
+    <Group gap="2" align="center">
+      <Button v-if="login"
+        :href="loginHref"
+        variant="ghost"
+        size="sm"
+        class="text-background hover:bg-background/10"
+        data-testid="nav-login"
+      >
+        {{ login }}
+      </Button>
+      <Button v-if="cta" :href="href" variant="secondary" size="sm" data-testid="header-cta">
+        {{ cta }}
+      </Button>
+    </Group>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/hero-split-extras.vue b/packages/vue/ui/src/components/hero-split-extras.vue
new file mode 100644
index 0000000..7f82084
--- /dev/null
+++ b/packages/vue/ui/src/components/hero-split-extras.vue
@@ -0,0 +1,134 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-split-parts.ts -->
+<!--
+  What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small
+  feature cards, or a quote with its author over three figures.
+-->
+<script lang="ts">
+import type { HeroContent } from "../blocks/hero-split.types";
+
+export type HeroSplitExtrasProps = {
+  content: HeroContent;
+  extra?: "stats" | "avatars" | "minis" | "quote" | "none";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import FigureBlock from "../components/figure-block.vue";
+import MediaFrame from "../components/media-frame.vue";
+
+const { content, extra = "none" } = defineProps<HeroSplitExtrasProps>();
+</script>
+
+<template>
+  <Box
+    v-if="(((extra as string) === 'stats') && ((content.stats?.length ?? 0) > 0))"
+    class="grid grid-cols-3 gap-4"
+    data-testid="hero-stats"
+  >
+    <template v-for="(s, i) in content.stats" :key="s.id">
+      <Stack
+        v-if="(i < 3)"
+        gap="0"
+        class="rounded bg-card inset-ring inset-ring-border p-4"
+        data-testid="hero-stat"
+      >
+        <Text size="2xl" weight="semibold">
+          {{ s.value }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ s.label }}
+        </Text>
+      </Stack>
+    </template>
+  </Box>
+  <Group
+    v-if="(((extra as string) === 'avatars') && ((content.people?.length ?? 0) > 0))"
+    gap="4"
+    align="center"
+    class="flex-wrap"
+    data-testid="hero-proof"
+  >
+    <Group gap="2" align="center">
+      <template v-for="(p, i) in content.people" :key="p.id">
+        <MediaFrame v-if="(i < 4)" :alt="p.author" ratio="1/1" class="size-10 shrink-0 rounded-full" />
+      </template>
+    </Group>
+    <Text size="sm" class="text-muted-foreground">
+      {{ content.proof }}
+    </Text>
+  </Group>
+  <Box
+    v-if="(((extra as string) === 'minis') && ((content.features?.length ?? 0) > 0))"
+    class="grid grid-cols-1 gap-4 sm:grid-cols-2"
+    data-testid="hero-minis"
+  >
+    <template v-for="(f, i) in content.features" :key="f.id">
+      <Group
+        v-if="(i < 2)"
+        gap="4"
+        align="start"
+        class="rounded bg-card inset-ring inset-ring-border p-4"
+        data-testid="hero-mini"
+      >
+        <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+          <LucideIcon :name="f.icon" :size="20" />
+        </Box>
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {{ f.title }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ f.text }}
+          </Text>
+        </Stack>
+      </Group>
+    </template>
+  </Box>
+  <Stack
+    v-if="(((extra as string) === 'quote') && ((content.people?.length ?? 0) > 0))"
+    gap="6"
+    align="stretch"
+  >
+    <template v-for="(p, i) in content.people" :key="p.id">
+      <FigureBlock v-if="(i < 1)" class="flex flex-col gap-4" testid="hero-quote">
+        <Text tag="blockquote" class="text-lg font-medium">
+          {{ p.quote }}
+        </Text>
+        <Group gap="4" align="center">
+          <MediaFrame :alt="p.author" ratio="1/1" class="size-10 shrink-0 rounded-full" />
+          <Stack gap="0">
+            <Text size="sm" weight="semibold">
+              {{ p.author }}
+            </Text>
+            <Text size="xs" class="text-muted-foreground">
+              {{ p.role }}
+            </Text>
+          </Stack>
+        </Group>
+      </FigureBlock>
+    </template>
+    <Box class="grid grid-cols-3 gap-4" data-testid="hero-stats">
+      <template v-for="(s, i) in content.stats" :key="s.id">
+        <Stack
+          v-if="(i < 3)"
+          gap="0"
+          class="rounded bg-card inset-ring inset-ring-border p-4"
+          data-testid="hero-stat"
+        >
+          <Text size="2xl" weight="semibold">
+            {{ s.value }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ s.label }}
+          </Text>
+        </Stack>
+      </template>
+    </Box>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/hero-split-media.vue b/packages/vue/ui/src/components/hero-split-media.vue
new file mode 100644
index 0000000..5dc2d52
--- /dev/null
+++ b/packages/vue/ui/src/components/hero-split-media.vue
@@ -0,0 +1,75 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-split-parts.ts -->
+<!--
+  What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with
+  captions, or a picture with two plan cards floating over it.
+-->
+<script lang="ts">
+import type { HeroContent } from "../blocks/hero-split.types";
+
+export type HeroSplitMediaProps = {
+  content: HeroContent;
+  alt: string;
+  media?: "picture" | "card" | "grid" | "plans";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import FigureBlock from "../components/figure-block.vue";
+import MediaFrame from "../components/media-frame.vue";
+import OfferMedia from "../components/offer-media.vue";
+import { cn } from "../utils";
+
+const { content, alt, media = "picture" } = defineProps<HeroSplitMediaProps>();
+</script>
+
+<template>
+  <MediaFrame v-if="((media as string) === 'picture')" :alt="alt" ratio="4/3" />
+  <OfferMedia v-if="((media as string) === 'card')" :alt="alt" :card="content.card" />
+  <Box
+    v-if="(((media as string) === 'grid') && ((content.features?.length ?? 0) > 0))"
+    class="grid grid-cols-2 gap-4"
+    data-testid="hero-grid"
+  >
+    <template v-for="(f, i) in content.features" :key="f.id">
+      <FigureBlock v-if="(i < 4)" class="flex flex-col gap-2" testid="hero-tile">
+        <MediaFrame :alt="f.title" ratio="1/1" />
+        <Text size="xs" class="text-muted-foreground">
+          {{ f.title }}
+        </Text>
+      </FigureBlock>
+    </template>
+  </Box>
+  <Box
+    v-if="(((media as string) === 'plans') && ((content.plans?.length ?? 0) > 0))"
+    class="relative"
+    data-testid="hero-media"
+  >
+    <MediaFrame :alt="alt" ratio="4/3" />
+    <template v-for="(p, i) in content.plans" :key="p.id">
+      <Stack v-if="(i < 2)"
+        gap="2"
+        :class="cn(
+          'absolute w-48 rounded bg-card p-4 shadow-lg',
+          ((i === 0) ? 'top-8 left-4' : 'right-4 bottom-8')
+        )"
+        data-testid="hero-plan"
+      >
+        <Text size="sm" weight="semibold">
+          {{ p.name }}
+        </Text>
+        <Group gap="2" align="center">
+          <LucideIcon name="check" :size="16" />
+          <Text size="xs" class="text-muted-foreground">
+            {{ p.tagline }}
+          </Text>
+        </Group>
+      </Stack>
+    </template>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/icon-tab.vue b/packages/vue/ui/src/components/icon-tab.vue
new file mode 100644
index 0000000..ebb9f50
--- /dev/null
+++ b/packages/vue/ui/src/components/icon-tab.vue
@@ -0,0 +1,54 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key
+  movement between tabs is the job of IconTabs (see roving).
+-->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** IconTab: the classes of each value (shadcn/cva style). */
+export const iconTabVariants = variants({
+  base:
+    "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground inset-ring " +
+    "inset-ring-transparent [&>svg]:size-4 rounded",
+  variants: {
+    state: {
+      default: "",
+      active: "bg-card text-foreground inset-ring-border",
+    },
+  },
+  defaultVariants: { state: "default" },
+});
+
+export type IconTabProps = {
+  active?: boolean;
+  label: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import ButtonPlain from "../primitives/button-plain/button-plain.vue";
+import { cn } from "../utils";
+
+const { active = false, label, class: className } = defineProps<IconTabProps>();
+const emit = defineEmits<{ click: [] }>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <ButtonPlain
+    type="button"
+    role="tab"
+    :aria-label="label"
+    :class="cn(iconTabVariants({ state: (active ? 'active' : 'default') }), className)"
+    :aria-selected="active"
+    :tabindex="(active ? 0 : -1)"
+    data-slot="icon-tab"
+    :data-state="(active ? 'active' : 'default')"
+    @click="() => emit('click')"
+  >
+    <slot />
+  </ButtonPlain>
+</template>
diff --git a/packages/vue/ui/src/components/icon-tabs.vue b/packages/vue/ui/src/components/icon-tabs.vue
new file mode 100644
index 0000000..4baa58c
--- /dev/null
+++ b/packages/vue/ui/src/components/icon-tabs.vue
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach
+  `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).
+-->
+<script lang="ts">
+export type IconTabsProps = {
+  label?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import { cn } from "../utils";
+
+const { label, class: className } = defineProps<IconTabsProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Box :class="cn('flex items-center gap-2', className)" role="tablist" :aria-label="label" data-slot="icon-tabs">
+    <slot />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/job-cards.vue b/packages/vue/ui/src/components/job-cards.vue
new file mode 100644
index 0000000..475d280
--- /dev/null
+++ b/packages/vue/ui/src/components/job-cards.vue
@@ -0,0 +1,146 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/people-parts.ts -->
+<!--
+  The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply)
+  or as a table.
+-->
+<script lang="ts">
+import type { Job, Department, JobLabels } from "../blocks/job-board.types";
+
+export type JobCardsProps = {
+  jobs: Job[];
+  departments: Department[];
+  labels: JobLabels;
+  layout?: "grid" | "grouped" | "table";
+  salary?: "show" | "hide";
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Table from "../primitives/table/table.vue";
+import TableBody from "../primitives/table/table-body.vue";
+import TableCaption from "../primitives/table/table-caption.vue";
+import TableCell from "../primitives/table/table-cell.vue";
+import TableHead from "../primitives/table/table-head.vue";
+import TableHeadCell from "../primitives/table/table-head-cell.vue";
+import TableRow from "../primitives/table/table-row.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+
+const { jobs, departments, labels, layout = "grid", salary = "hide" } = defineProps<JobCardsProps>();
+</script>
+
+<template>
+  <Box
+    v-if="((layout as string) === 'table')"
+    class="w-full overflow-x-auto rounded inset-ring inset-ring-border"
+  >
+    <Table class="w-full text-left text-sm" data-testid="job-table">
+      <TableCaption class="sr-only">
+        {{ labels.caption }}
+      </TableCaption>
+      <TableHead class="bg-muted">
+        <TableRow>
+          <TableHeadCell scope="col" class="px-4 py-2">
+            {{ labels.role }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="hidden py-2 md:table-cell">
+            {{ labels.team }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="hidden py-2 sm:table-cell">
+            {{ labels.location }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.type }}
+          </TableHeadCell>
+          <TableHeadCell v-if="((salary as string) === 'show')" scope="col" class="hidden py-2 md:table-cell">
+            {{ labels.salary }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2 pr-4">
+            <Inline class="sr-only">
+              {{ labels.apply }}
+            </Inline>
+          </TableHeadCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow v-for="j in jobs" :key="j.id" class="border-t border-border" data-testid="item">
+          <TableCell class="px-4 py-4 font-medium">
+            {{ j.title }}
+          </TableCell>
+          <TableCell class="hidden md:table-cell">
+            {{ departments.filter((i) => !j.dept || i["id"] === j.dept)[0]?.name ?? "" }}
+          </TableCell>
+          <TableCell class="hidden sm:table-cell">
+            {{ j.location }}
+          </TableCell>
+          <TableCell>
+            {{ j.type }}
+          </TableCell>
+          <TableCell v-if="((salary as string) === 'show')" class="hidden md:table-cell">
+            {{ j.salary }}
+          </TableCell>
+          <TableCell class="pr-4 text-right">
+            <MenuEntry :href="j.href" class="font-medium">
+              {{ labels.apply }}
+            </MenuEntry>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </Box>
+  <Grid v-else cols="1-2" class="gap-4" data-testid="items">
+    <Stack
+      v-for="j in jobs"
+      :key="j.id"
+      gap="4"
+      class="rounded bg-card inset-ring inset-ring-border p-6"
+      data-testid="item"
+    >
+      <Stack gap="2">
+        <Text size="lg" weight="semibold">
+          {{ j.title }}
+        </Text>
+        <Group gap="4" class="flex-wrap text-sm text-muted-foreground">
+          <Group gap="2" align="center">
+            <LucideIcon name="briefcase" :size="16" />
+            <Inline>
+              {{ j.type }}
+            </Inline>
+          </Group>
+          <Group gap="2" align="center">
+            <LucideIcon name="map-pin" :size="16" />
+            <Inline>
+              {{ j.location }}
+            </Inline>
+          </Group>
+          <Group gap="2" align="center">
+            <LucideIcon name="calendar" :size="16" />
+            <Inline>
+              {{ j.posted }}
+            </Inline>
+          </Group>
+        </Group>
+      </Stack>
+      <Text v-if="((salary as string) === 'show')" size="base" weight="semibold" data-testid="salary">
+        {{ j.salary }}
+      </Text>
+      <Group gap="4" align="center" justify="between" class="mt-auto">
+        <Badge variant="secondary" size="default">
+          {{ departments.filter((i) => !j.dept || i["id"] === j.dept)[0]?.name ?? "" }}
+        </Badge>
+        <MenuEntry :href="j.href" class="inline-flex items-center gap-2 text-sm font-medium">
+          {{ labels.apply }}
+          <LucideIcon name="arrow-right" :size="16" />
+        </MenuEntry>
+      </Group>
+    </Stack>
+  </Grid>
+</template>
diff --git a/packages/vue/ui/src/components/logo-sidebar.vue b/packages/vue/ui/src/components/logo-sidebar.vue
new file mode 100644
index 0000000..48dd2a2
--- /dev/null
+++ b/packages/vue/ui/src/components/logo-sidebar.vue
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The
+  variant picks the padding (recipe).
+-->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** LogoSidebar: the classes of each value (shadcn/cva style). */
+export const logoSidebarVariants = variants({
+  base: "flex h-8 items-center justify-between",
+  variants: {
+    variant: {
+      chat: "px-2",
+      creator: "pr-4",
+    },
+  },
+  defaultVariants: { variant: "chat" },
+});
+
+export type LogoSidebarProps = {
+  variant?: "chat" | "creator";
+  name: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Inline from "../primitives/inline/inline.vue";
+import { cn } from "../utils";
+
+const { variant = "chat", name, class: className } = defineProps<LogoSidebarProps>();
+defineSlots<{ mark?(): unknown, actions?(): unknown }>();
+</script>
+
+<template>
+  <Box
+    :class="cn(
+      logoSidebarVariants({ variant: variant }),
+      'in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0',
+      className
+    )"
+    data-slot="logo-sidebar"
+  >
+    <Inline class="flex items-center gap-4" data-slot="logo-sidebar-brand">
+      <slot name="mark" />
+      <Inline class="text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden" data-slot="logo-sidebar-name">
+        {{ name }}
+      </Inline>
+    </Inline>
+    <Inline
+      v-if="$slots.actions"
+      class="flex items-center gap-2 in-data-[nav=collapsed]:hidden"
+      data-slot="logo-sidebar-actions"
+    >
+      <slot name="actions" />
+    </Inline>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/logo-slot.vue b/packages/vue/ui/src/components/logo-slot.vue
new file mode 100644
index 0000000..1ef7b61
--- /dev/null
+++ b/packages/vue/ui/src/components/logo-slot.vue
@@ -0,0 +1,32 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/marketing.ts -->
+<!-- One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only. -->
+<script lang="ts">
+export type LogoSlotProps = {
+  name: string;
+  icon: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const { name, icon } = defineProps<LogoSlotProps>();
+</script>
+
+<template>
+  <Box
+    :class="cn('flex shrink-0 items-center justify-center text-muted-foreground', defaults.logos.slot)"
+    data-testid="item"
+    data-slot="logo-slot"
+  >
+    <LucideIcon :name="icon" :size="defaults.logos.glyph" />
+    <Text size="sm" weight="semibold" class="sr-only">
+      {{ name }}
+    </Text>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/media-contacts.vue b/packages/vue/ui/src/components/media-contacts.vue
new file mode 100644
index 0000000..42d2bdf
--- /dev/null
+++ b/packages/vue/ui/src/components/media-contacts.vue
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card. -->
+<script lang="ts">
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaContactsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { extras, labels } = defineProps<MediaContactsProps>();
+</script>
+
+<template>
+  <Stack gap="6" align="stretch">
+    <Stack gap="2" align="stretch">
+      <Text size="sm" weight="semibold">
+        {{ labels.list }}
+      </Text>
+      <Button
+        v-for="(c, i) in extras.channels"
+        :key="c.id"
+        variant="outline"
+        size="default"
+        :href="c.href"
+        class="w-full gap-2"
+        data-testid="media-channel"
+      >
+        <LucideIcon :name="c.icon" :size="16" />
+        {{ c.title }}
+      </Button>
+    </Stack>
+    <Stack gap="2" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-4">
+      <Text size="sm" weight="semibold">
+        {{ labels.figures }}
+      </Text>
+      <template v-for="(s, i) in extras.stats" :key="s.id">
+        <Group v-if="(i < 3)" gap="4" align="center" justify="between" data-testid="media-stat">
+          <Text size="sm" class="text-muted-foreground">
+            {{ s.label }}
+          </Text>
+          <Text size="sm" weight="semibold">
+            {{ s.value }}
+          </Text>
+        </Group>
+      </template>
+    </Stack>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/media-figures.vue b/packages/vue/ui/src/components/media-figures.vue
new file mode 100644
index 0000000..3e0bfb6
--- /dev/null
+++ b/packages/vue/ui/src/components/media-figures.vue
@@ -0,0 +1,44 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The figures of MediaList: four in two columns, centered, or three in a row. -->
+<script lang="ts">
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaFiguresProps = {
+  extras: MediaExtras;
+  mode?: "grid" | "row";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { extras, mode = "grid" } = defineProps<MediaFiguresProps>();
+</script>
+
+<template>
+  <Box
+    :class="
+      (mode as string) === 'grid' ? 'grid grid-cols-2 gap-6 text-center'
+      : 'grid grid-cols-3 gap-6'
+    "
+  >
+    <template v-for="(s, i) in extras.stats" :key="s.id">
+      <Stack
+        v-if="(i < (((mode as string) === 'grid') ? 4 : 3))"
+        gap="0"
+        :align="(((mode as string) === 'grid') ? 'center' : 'start')"
+        data-testid="media-stat"
+      >
+        <Text size="3xl" weight="bold">
+          {{ s.value }}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {{ s.label }}
+        </Text>
+      </Stack>
+    </template>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/media-frame.assets.ts b/packages/vue/ui/src/components/media-frame.assets.ts
new file mode 100644
index 0000000..fe14339
--- /dev/null
+++ b/packages/vue/ui/src/components/media-frame.assets.ts
@@ -0,0 +1,8 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+// Data of MediaFrame: long values (pictures as data URIs) kept out of the component file.
+
+export const PLACEHOLDER: Record<string, string> = {
+  "light": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNlMmU4ZjAiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjOTRhM2I4IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+  "dark": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxZTI5M2IiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjNDc1NTY5IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+};
diff --git a/packages/vue/ui/src/components/media-frame.vue b/packages/vue/ui/src/components/media-frame.vue
new file mode 100644
index 0000000..6b2eab9
--- /dev/null
+++ b/packages/vue/ui/src/components/media-frame.vue
@@ -0,0 +1,68 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one
+  of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral
+  placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the
+  placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the
+  corners are the plain theme radius.
+-->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** MediaFrame: the classes of each value (shadcn/cva style). */
+export const mediaFrameVariants = variants({
+  base: "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border rounded",
+  variants: {
+    ratio: {
+      "16/9": "aspect-video",
+      "4/3": "aspect-4/3",
+      "1/1": "aspect-square",
+      "3/4": "aspect-3/4",
+      "21/9": "aspect-21/9",
+    },
+  },
+  defaultVariants: { ratio: "16/9" },
+});
+
+export type MediaFrameProps = {
+  alt: string;
+  src?: string;
+  darkSrc?: string;
+  ratio?: "16/9" | "4/3" | "1/1" | "3/4" | "21/9";
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Box from "../primitives/box/box.vue";
+import Image from "../primitives/image/image.vue";
+import { at, cn } from "../utils";
+import { PLACEHOLDER } from "./media-frame.assets";
+
+const { alt, src, darkSrc, ratio = "16/9", class: className } = defineProps<MediaFrameProps>();
+const lightSrc = computed(() => src ?? at(PLACEHOLDER, "light"));
+const nightSrc = computed(() => darkSrc ?? src ?? at(PLACEHOLDER, "dark"));
+</script>
+
+<template>
+  <Box
+    :class="cn(mediaFrameVariants({ ratio: ratio }), className)"
+    data-slot="media-frame"
+    :data-placeholder="(src ? 'false' : 'true')"
+  >
+    <Image
+      :src="lightSrc"
+      :alt="alt"
+      class="absolute inset-0 size-full object-cover dark:hidden"
+      data-theme-src="light"
+    />
+    <Image
+      :src="nightSrc"
+      :alt="alt"
+      class="absolute inset-0 hidden size-full object-cover dark:block"
+      data-theme-src="dark"
+    />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/media-posts.vue b/packages/vue/ui/src/components/media-posts.vue
new file mode 100644
index 0000000..da999d1
--- /dev/null
+++ b/packages/vue/ui/src/components/media-posts.vue
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The latest posts of MediaList as rows: a dot, the title, the date and reading time. -->
+<script lang="ts">
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaPostsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import { tpl } from "../utils";
+
+const { extras, labels } = defineProps<MediaPostsProps>();
+</script>
+
+<template>
+  <Stack gap="4" align="stretch">
+    <Text size="sm" weight="semibold">
+      {{ labels.list }}
+    </Text>
+    <template v-for="(p, i) in extras.posts" :key="p.id">
+      <Group v-if="(i < 3)" gap="4" align="start" data-testid="media-post">
+        <Inline class="mt-2 size-2 shrink-0 rounded-full bg-primary" />
+        <Stack gap="0">
+          <MenuEntry :href="p.href" class="text-sm font-medium" size="sm">
+            {{ p.title }}
+          </MenuEntry>
+          <Text size="xs" class="text-muted-foreground">
+            {{ tpl("{0} · {1}", p.date, tpl(labels.minutes, p.minutes)) }}
+          </Text>
+        </Stack>
+      </Group>
+    </template>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/media-review.vue b/packages/vue/ui/src/components/media-review.vue
new file mode 100644
index 0000000..1bb67f9
--- /dev/null
+++ b/packages/vue/ui/src/components/media-review.vue
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author. -->
+<script lang="ts">
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaReviewProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Rating from "../components/rating.vue";
+import { tpl } from "../utils";
+
+const { extras, labels } = defineProps<MediaReviewProps>();
+</script>
+
+<template>
+  <template v-for="(r, i) in extras.reviews" :key="r.id">
+    <Stack v-if="(i < 1)" gap="4" align="stretch" class="rounded bg-muted p-6" data-testid="media-review">
+      <Group gap="4" align="center" justify="between" class="flex-wrap">
+        <Text size="sm" weight="medium">
+          {{ labels.featured }}
+        </Text>
+        <Rating :value="r.rating" :label="tpl(labels.rating, r.rating)" />
+      </Group>
+      <Text size="base">
+        {{ tpl("“{0}”", r.text) }}
+      </Text>
+      <Text size="sm" class="text-muted-foreground">
+        {{ tpl("{0} · {1}", r.author, r.date) }}
+      </Text>
+    </Stack>
+  </template>
+</template>
diff --git a/packages/vue/ui/src/components/media-steps.vue b/packages/vue/ui/src/components/media-steps.vue
new file mode 100644
index 0000000..d5759cc
--- /dev/null
+++ b/packages/vue/ui/src/components/media-steps.vue
@@ -0,0 +1,46 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The steps of MediaList as numbered rows: the number, a glyph, the title and the text. -->
+<script lang="ts">
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaStepsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import { tpl } from "../utils";
+
+const { extras, labels } = defineProps<MediaStepsProps>();
+</script>
+
+<template>
+  <Stack gap="4" align="stretch">
+    <Text size="sm" weight="semibold">
+      {{ labels.list }}
+    </Text>
+    <Group v-for="(s, i) in extras.steps" :key="s.id" gap="4" align="start" data-testid="media-step">
+      <Text size="sm" weight="semibold" class="w-6 shrink-0 text-primary">
+        {{ tpl("0{0}", ((i + 1) == null ? undefined : String((i + 1)))) }}
+      </Text>
+      <Inline class="flex size-6 shrink-0 items-center justify-center text-primary">
+        <LucideIcon :name="s.icon" :size="16" />
+      </Inline>
+      <Stack gap="0">
+        <Text size="sm" weight="semibold">
+          {{ s.title }}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {{ s.text }}
+        </Text>
+      </Stack>
+    </Group>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/media-topics.vue b/packages/vue/ui/src/components/media-topics.vue
new file mode 100644
index 0000000..a77df36
--- /dev/null
+++ b/packages/vue/ui/src/components/media-topics.vue
@@ -0,0 +1,52 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/media-list-parts.ts -->
+<!-- The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow. -->
+<script lang="ts">
+import type { MediaExtras, MediaListLabels } from "../blocks/media-list.types";
+
+export type MediaTopicsProps = {
+  extras: MediaExtras;
+  labels: MediaListLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import { tpl } from "../utils";
+
+const { extras, labels } = defineProps<MediaTopicsProps>();
+</script>
+
+<template>
+  <Stack gap="4" align="stretch">
+    <Text size="sm" weight="semibold">
+      {{ labels.list }}
+    </Text>
+    <template v-for="(c, i) in extras.topics" :key="c.id">
+      <MenuEntry v-if="(i < 5)"
+        :href="c.href"
+        class="rounded bg-card inset-ring inset-ring-border flex w-full items-center gap-4 p-4"
+        variant="block"
+        testid="media-topic"
+        :block="true"
+      >
+        <Inline class="flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground">
+          <LucideIcon :name="c.icon" :size="16" />
+        </Inline>
+        <Stack gap="0" class="min-w-0 flex-1">
+          <Text size="sm" weight="semibold">
+            {{ c.name }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ tpl(labels.count, c.count) }}
+          </Text>
+        </Stack>
+        <LucideIcon name="arrow-right" :size="16" />
+      </MenuEntry>
+    </template>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/member-row.vue b/packages/vue/ui/src/components/member-row.vue
new file mode 100644
index 0000000..eb24a48
--- /dev/null
+++ b/packages/vue/ui/src/components/member-row.vue
@@ -0,0 +1,79 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/people-parts.ts -->
+<!--
+  One member of TeamGrid beside a small portrait: the name, the role, then the department and the place
+  (detailed, directory), the bio (detailed) and the skills (detailed, list).
+-->
+<script lang="ts">
+import type { Member } from "../blocks/team-grid.types";
+
+export type MemberRowProps = {
+  member: Member;
+  depts: Record<string, string>;
+  layout?: "cards" | "minimal" | "detailed" | "list" | "directory";
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { at, cn } from "../utils";
+
+const { member, depts, layout = "list" } = defineProps<MemberRowProps>();
+</script>
+
+<template>
+  <Group
+    gap="4"
+    align="start"
+    :class="
+      (layout as string) === 'detailed' ? 'rounded bg-card inset-ring inset-ring-border flex-col p-6'
+      : (layout as string) === 'directory' ? 'rounded bg-card inset-ring inset-ring-border p-4'
+      : 'border-b border-border pb-4'
+    "
+    data-testid="item"
+  >
+    <MediaFrame
+      :alt="member.name"
+      ratio="1/1"
+      :class="cn((((layout as string) === 'detailed') ? 'size-16' : 'size-12'), 'shrink-0')"
+    />
+    <Stack gap="2" class="min-w-0 flex-1">
+      <Stack gap="0">
+        <Text size="base" weight="semibold">
+          {{ member.name }}
+        </Text>
+        <Text size="sm" class="text-muted-foreground">
+          {{ member.role }}
+        </Text>
+      </Stack>
+      <Group
+        v-if="((layout as string) !== 'list')"
+        gap="2"
+        align="center"
+        class="flex-wrap text-xs text-muted-foreground"
+      >
+        <Badge variant="outline" size="sm">
+          {{ at(depts, member.dept) }}
+        </Badge>
+        <LucideIcon name="map-pin" :size="16" />
+        <Inline>
+          {{ member.location }}
+        </Inline>
+      </Group>
+      <Text v-if="((layout as string) === 'detailed')" size="sm" class="text-muted-foreground">
+        {{ member.bio }}
+      </Text>
+      <Group v-if="((layout as string) !== 'directory')" gap="2" class="flex-wrap">
+        <Badge v-for="k in member.skills" :key="k" variant="secondary" size="sm">
+          {{ k }}
+        </Badge>
+      </Group>
+    </Stack>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/menu-entry.vue b/packages/vue/ui/src/components/menu-entry.vue
new file mode 100644
index 0000000..fdeb15a
--- /dev/null
+++ b/packages/vue/ui/src/components/menu-entry.vue
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!--
+  One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine
+  routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.
+-->
+<script lang="ts">
+export type MenuEntryProps = {
+  href?: string;
+  current?: boolean;
+  variant?: "default" | "muted" | "block";
+  size?: "default" | "sm";
+  testid?: string;
+  block?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Link from "../primitives/link/link.vue";
+
+const {
+  href,
+  current = false,
+  variant = "default",
+  size = "default",
+  testid,
+  block = false,
+  class: className,
+} = defineProps<MenuEntryProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Link v-if="href"
+    :href="href"
+    :variant="variant"
+    :size="size"
+    :aria-current="(current ? 'page' : undefined)"
+    :class="className"
+    :data-testid="testid"
+  >
+    <slot />
+  </Link>
+  <Box
+    v-else-if="block"
+    :class="className"
+    :aria-current="(current ? 'page' : undefined)"
+    :data-testid="testid"
+  >
+    <slot />
+  </Box>
+  <Inline v-else :class="className" :aria-current="(current ? 'page' : undefined)" :data-testid="testid">
+    <slot />
+  </Inline>
+</template>
diff --git a/packages/vue/ui/src/components/meter-row.vue b/packages/vue/ui/src/components/meter-row.vue
new file mode 100644
index 0000000..9e95027
--- /dev/null
+++ b/packages/vue/ui/src/components/meter-row.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With
+  `href` the whole row is a link.
+-->
+<script lang="ts">
+export type MeterRowProps = {
+  label: string;
+  value: number;
+  caption: string;
+  hint?: string;
+  href?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Link from "../primitives/link/link.vue";
+import Progress from "../primitives/form/progress.vue";
+import Text from "../primitives/text/text.vue";
+import { cn } from "../utils";
+
+const { label, value, caption, hint, href, class: className } = defineProps<MeterRowProps>();
+</script>
+
+<template>
+  <Box :class="cn('min-w-0', className)" data-slot="meter-row">
+    <Link v-if="href"
+      :href="href"
+      variant="block"
+      class="flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted"
+    >
+      <Box class="flex items-baseline justify-between gap-4">
+        <Text class="m-0 min-w-0 truncate text-sm font-bold text-foreground">
+          {{ label }}
+        </Text>
+        <Text class="m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground">
+          {{ caption }}
+        </Text>
+      </Box>
+      <Progress :value="(value == null ? undefined : String(value))" max="100" :aria-label="label" />
+      <Text v-if="hint" class="m-0 text-xs font-medium text-muted-foreground">
+        {{ hint }}
+      </Text>
+    </Link>
+    <Box v-else class="flex min-w-0 flex-col gap-2 p-2">
+      <Box class="flex items-baseline justify-between gap-4">
+        <Text class="m-0 min-w-0 truncate text-sm font-bold text-foreground">
+          {{ label }}
+        </Text>
+        <Text class="m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground">
+          {{ caption }}
+        </Text>
+      </Box>
+      <Progress :value="(value == null ? undefined : String(value))" max="100" :aria-label="label" />
+      <Text v-if="hint" class="m-0 text-xs font-medium text-muted-foreground">
+        {{ hint }}
+      </Text>
+    </Box>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/nav-actions.vue b/packages/vue/ui/src/components/nav-actions.vue
new file mode 100644
index 0000000..c2a7690
--- /dev/null
+++ b/packages/vue/ui/src/components/nav-actions.vue
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!--
+  The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the
+  press). No wrapper: they sit in the row of the bar.
+-->
+<script lang="ts">
+export type NavActionsProps = {
+  login?: string;
+  loginHref?: string;
+  cta?: string;
+  ctaHref?: string;
+  actions?: "none" | "cta";
+  tone?: "default" | "inverse";
+  themeLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+
+const {
+  login,
+  loginHref,
+  cta,
+  ctaHref,
+  actions = "cta",
+  tone = "default",
+  themeLabel,
+} = defineProps<NavActionsProps>();
+const emit = defineEmits<{ theme: [] }>();
+</script>
+
+<template>
+  <Button v-if="login"
+    variant="ghost"
+    size="sm"
+    :href="loginHref"
+    :class="(((tone as string) === 'inverse') ? 'text-background hover:bg-background/10' : '')"
+    data-testid="nav-login"
+  >
+    {{ login }}
+  </Button>
+  <Button v-if="(((actions as string) === 'cta') && cta)"
+    :variant="(((tone as string) === 'inverse') ? 'secondary' : 'default')"
+    size="sm"
+    :href="ctaHref"
+    data-testid="header-cta"
+  >
+    {{ cta }}
+  </Button>
+  <Button v-if="themeLabel" variant="outline" size="sm" data-testid="theme-toggle" @click="() => emit('theme')">
+    {{ themeLabel }}
+  </Button>
+</template>
diff --git a/packages/vue/ui/src/components/nav-bar-menu.vue b/packages/vue/ui/src/components/nav-bar-menu.vue
new file mode 100644
index 0000000..44fff2b
--- /dev/null
+++ b/packages/vue/ui/src/components/nav-bar-menu.vue
@@ -0,0 +1,31 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!-- The links of NavBar in a nav landmark; left out when there are no links. -->
+<script lang="ts">
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type NavBarMenuProps = {
+  label: string;
+  links: NavLink[];
+  current?: string;
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import NavBlock from "../components/nav-block.vue";
+import NavLinks from "../components/nav-links.vue";
+
+const { label, links, current = "", landmarkLabel } = defineProps<NavBarMenuProps>();
+</script>
+
+<template>
+  <NavBlock v-if="((links?.length ?? 0) > 0)"
+    :label="label"
+    :class="'order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0'"
+    testid="site-nav"
+    :landmarkLabel="landmarkLabel"
+  >
+    <NavLinks :links="links" :current="current" />
+  </NavBlock>
+</template>
diff --git a/packages/vue/ui/src/components/nav-block.vue b/packages/vue/ui/src/components/nav-block.vue
new file mode 100644
index 0000000..8051927
--- /dev/null
+++ b/packages/vue/ui/src/components/nav-block.vue
@@ -0,0 +1,25 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/landmarks.ts -->
+<!-- A navigation region in its own file: Block tag nav named by `label`. -->
+<script lang="ts">
+export type NavBlockProps = {
+  label?: string;
+  testid?: string;
+  landmarkLabel?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import { cn } from "../utils";
+
+const { label, testid, landmarkLabel, class: className } = defineProps<NavBlockProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Block tag="nav" :class="cn(className)" :aria-label="(landmarkLabel ?? label)" :data-testid="testid">
+    <slot />
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/nav-item-row.vue b/packages/vue/ui/src/components/nav-item-row.vue
new file mode 100644
index 0000000..126e31a
--- /dev/null
+++ b/packages/vue/ui/src/components/nav-item-row.vue
@@ -0,0 +1,45 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the
+  right.
+-->
+<script lang="ts">
+export type NavItemRowProps = {
+  inner?: string;
+  reserveRight?: boolean;
+};
+</script>
+
+<script setup lang="ts">
+import Inline from "../primitives/inline/inline.vue";
+
+const { inner, reserveRight = false } = defineProps<NavItemRowProps>();
+defineSlots<{ default?(): unknown, icon?(): unknown, right?(): unknown }>();
+</script>
+
+<template>
+  <Inline :class="inner" data-slot="nav-item-content">
+    <Inline
+      :class="'flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center'"
+      data-slot="nav-item-left"
+    >
+      <slot name="icon" />
+      <Inline class="min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden" data-slot="nav-item-label">
+        <slot />
+      </Inline>
+    </Inline>
+    <Inline
+      v-if="$slots.right"
+      class="flex items-center gap-2 in-data-[nav=collapsed]:hidden"
+      data-slot="nav-item-right"
+    >
+      <slot name="right" />
+    </Inline>
+    <Inline
+      v-else-if="reserveRight"
+      class="size-5 shrink-0 in-data-[nav=collapsed]:hidden"
+      data-slot="nav-item-right"
+    />
+  </Inline>
+</template>
diff --git a/packages/vue/ui/src/components/nav-item.vue b/packages/vue/ui/src/components/nav-item.vue
new file mode 100644
index 0000000..d4c364c
--- /dev/null
+++ b/packages/vue/ui/src/components/nav-item.vue
@@ -0,0 +1,137 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a
+  button, otherwise a static box.
+-->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** NavItem: the classes of each value (shadcn/cva style). */
+export const navItemVariants = variants({
+  base: "flex w-full items-center p-2 rounded",
+  variants: {
+    level: {
+      "1": "",
+      "2": "",
+      "3": "pr-2 pl-12",
+      "4": "pr-2 pl-20",
+    },
+    state: {
+      default: "",
+      selected: "",
+    },
+  },
+  defaultVariants: { level: "1", state: "default" },
+});
+/** NavItem: the classes of each value (shadcn/cva style). */
+export const navItemContentVariants = variants({
+  base:
+    "flex h-8 min-w-0 flex-1 items-center justify-between px-4 py-2 text-xs font-bold text-muted-foreground " +
+    "inset-ring inset-ring-transparent rounded",
+  variants: {
+    level: {
+      "1": "",
+      "2": "",
+      "3": "px-2",
+      "4": "px-2",
+    },
+    state: {
+      default: "",
+      selected: "bg-background text-foreground inset-ring-border",
+    },
+  },
+  defaultVariants: { level: "1", state: "default" },
+});
+
+export type NavItemProps = {
+  selected?: boolean;
+  level?: "1" | "2" | "3" | "4";
+  href?: string;
+  interactive?: boolean;
+  reserveRight?: boolean;
+  contentClass?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Box from "../primitives/box/box.vue";
+import ButtonPlain from "../primitives/button-plain/button-plain.vue";
+import LinkPlain from "../primitives/link-plain/link-plain.vue";
+import NavItemRow from "../components/nav-item-row.vue";
+import { cn } from "../utils";
+
+const {
+  selected = false,
+  level,
+  href,
+  interactive = false,
+  reserveRight = false,
+  contentClass,
+  class: className,
+} = defineProps<NavItemProps>();
+const emit = defineEmits<{ click: [] }>();
+defineSlots<{ default?(): unknown, icon?(): unknown, right?(): unknown }>();
+const state = computed(() => selected ? "selected" : "default");
+const outer = computed(() =>
+  cn(
+    navItemVariants({ level: level, state: state.value }),
+    "group in-data-[nav=collapsed]:justify-center",
+    className,
+  )
+);
+const inner = computed(() =>
+  cn(
+    navItemContentVariants({ level: level, state: state.value }),
+    (!selected && "group-hover:bg-muted"),
+    "in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0",
+    contentClass,
+  )
+);
+</script>
+
+<template>
+  <LinkPlain v-if="href"
+    :href="href"
+    :class="outer"
+    :aria-current="(selected ? 'page' : undefined)"
+    data-slot="nav-item"
+    :data-state="state"
+    @click="() => emit('click')"
+  >
+    <NavItemRow :inner="inner" :reserveRight="reserveRight">
+      <template v-if="$slots.icon" #icon><slot name="icon" /></template>
+      <template v-if="$slots.right" #right><slot name="right" /></template>
+      <template v-if="$slots.default" #default><slot /></template>
+    </NavItemRow>
+  </LinkPlain>
+  <ButtonPlain v-else-if="interactive"
+    type="button"
+    :class="cn(outer, 'text-left')"
+    :aria-current="(selected ? 'page' : undefined)"
+    data-slot="nav-item"
+    :data-state="state"
+    @click="() => emit('click')"
+  >
+    <NavItemRow :inner="inner" :reserveRight="reserveRight">
+      <template v-if="$slots.icon" #icon><slot name="icon" /></template>
+      <template v-if="$slots.right" #right><slot name="right" /></template>
+      <template v-if="$slots.default" #default><slot /></template>
+    </NavItemRow>
+  </ButtonPlain>
+  <Box
+    v-else
+    :class="outer"
+    :aria-current="(selected ? 'page' : undefined)"
+    data-slot="nav-item"
+    :data-state="state"
+  >
+    <NavItemRow :inner="inner" :reserveRight="reserveRight">
+      <template v-if="$slots.icon" #icon><slot name="icon" /></template>
+      <template v-if="$slots.right" #right><slot name="right" /></template>
+      <template v-if="$slots.default" #default><slot /></template>
+    </NavItemRow>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/nav-links.vue b/packages/vue/ui/src/components/nav-links.vue
new file mode 100644
index 0000000..3803e7c
--- /dev/null
+++ b/packages/vue/ui/src/components/nav-links.vue
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!--
+  The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half
+  of the list.
+-->
+<script lang="ts">
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type NavLinksProps = {
+  links: NavLink[];
+  current?: string;
+  side?: "all" | "left" | "right";
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Group from "../primitives/group/group.vue";
+import MenuEntry from "../components/menu-entry.vue";
+
+const { links, current = "", side = "all" } = defineProps<NavLinksProps>();
+const count = computed(() => links?.length ?? 0);
+</script>
+
+<template>
+  <Group v-if="((links?.length ?? 0) > 0)" gap="4" align="center" class="flex-wrap">
+    <template v-for="(l, i) in links" :key="l.id">
+      <MenuEntry
+        v-if="(((side as string) === 'all') || (((i * 2) < count) === ((side as string) === 'left')))"
+        :href="l.href"
+        class="text-sm"
+        :current="(l.id === current)"
+        testid="nav-link"
+      >
+        {{ l.name }}
+      </MenuEntry>
+    </template>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/notice.vue b/packages/vue/ui/src/components/notice.vue
new file mode 100644
index 0000000..88fe791
--- /dev/null
+++ b/packages/vue/ui/src/components/notice.vue
@@ -0,0 +1,31 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text
+  renders nothing visible.
+-->
+<script lang="ts">
+export type NoticeProps = {
+  text: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+
+const { text } = defineProps<NoticeProps>();
+</script>
+
+<template>
+  <Box class="contents" role="status" data-testid="notice">
+    <Text v-if="text"
+      :class="'fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold ' +
+        'text-background shadow-lg'"
+    >
+      <LucideIcon name="circle-check" :size="16" />
+      {{ text }}
+    </Text>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/number-field.vue b/packages/vue/ui/src/components/number-field.vue
new file mode 100644
index 0000000..82b9705
--- /dev/null
+++ b/packages/vue/ui/src/components/number-field.vue
@@ -0,0 +1,48 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/number-field.ts -->
+<!--
+  A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its
+  ring). Static markup: the buttons carry no logic; the page wires them.
+-->
+<script lang="ts">
+export type NumberFieldProps = {
+  value?: string;
+  name?: string;
+  min?: string;
+  label: string;
+  decrease: string;
+  increase: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Input from "../primitives/input/input.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+
+const { value = "", name = "", min = "", label, decrease, increase } = defineProps<NumberFieldProps>();
+</script>
+
+<template>
+  <Box
+    class="inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input"
+    data-slot="number-field"
+  >
+    <Button variant="ghost" size="sm" layout="icon" type="button" :aria-label="decrease" data-testid="decrease">
+      <LucideIcon name="minus" :size="16" />
+    </Button>
+    <Input
+      type="number"
+      :name="name"
+      :value="value"
+      :min="min"
+      :aria-label="label"
+      size="sm"
+      class="number-bare w-8 bg-transparent px-0 text-center inset-ring-0"
+    />
+    <Button variant="ghost" size="sm" layout="icon" type="button" :aria-label="increase" data-testid="increase">
+      <LucideIcon name="plus" :size="16" />
+    </Button>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/offer-media.vue b/packages/vue/ui/src/components/offer-media.vue
new file mode 100644
index 0000000..a5f6f8c
--- /dev/null
+++ b/packages/vue/ui/src/components/offer-media.vue
@@ -0,0 +1,49 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shop-parts.ts -->
+<!--
+  The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats
+  over the picture).
+-->
+<script lang="ts">
+import type { OfferCard } from "../blocks/store-hero.types";
+
+export type OfferMediaProps = {
+  alt: string;
+  card: OfferCard;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+
+const { alt, card } = defineProps<OfferMediaProps>();
+</script>
+
+<template>
+  <Box class="relative" data-testid="hero-media">
+    <MediaFrame :alt="alt" ratio="4/3" />
+    <Group
+      gap="4"
+      align="start"
+      class="absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg"
+      data-testid="offer-card"
+    >
+      <Box class="flex size-10 shrink-0 items-center justify-center rounded bg-muted">
+        <LucideIcon :name="card.icon" :size="20" />
+      </Box>
+      <Stack gap="0">
+        <Text size="sm" weight="semibold">
+          {{ card.title }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ card.text }}
+        </Text>
+      </Stack>
+    </Group>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/order-rows.vue b/packages/vue/ui/src/components/order-rows.vue
new file mode 100644
index 0000000..a55cfab
--- /dev/null
+++ b/packages/vue/ui/src/components/order-rows.vue
@@ -0,0 +1,85 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/orders.ts -->
+<!-- The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill. -->
+<script lang="ts">
+import type { Order, OrderLabels } from "../blocks/order-table.types";
+
+export type OrderRowsProps = {
+  orders: Order[];
+  statuses: Record<string, string>;
+  labels: OrderLabels;
+  density?: "default" | "compact";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Table from "../primitives/table/table.vue";
+import TableBody from "../primitives/table/table-body.vue";
+import TableCaption from "../primitives/table/table-caption.vue";
+import TableCell from "../primitives/table/table-cell.vue";
+import TableHead from "../primitives/table/table-head.vue";
+import TableHeadCell from "../primitives/table/table-head-cell.vue";
+import TableRow from "../primitives/table/table-row.vue";
+import Pill from "../components/pill.vue";
+import { at, cn, fmtMoney, tpl } from "../utils";
+
+const { orders, statuses, labels, density = "default" } = defineProps<OrderRowsProps>();
+</script>
+
+<template>
+  <Box class="w-full overflow-x-auto">
+    <Table class="w-full text-left text-sm" data-testid="order-table">
+      <TableCaption class="sr-only">
+        {{ labels.caption }}
+      </TableCaption>
+      <TableHead>
+        <TableRow>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.number }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.date }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.items }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.total }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.status }}
+          </TableHeadCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow v-for="o in orders" :key="o.id" class="border-t border-border" data-testid="item">
+          <TableCell :class="cn('font-semibold', (((density as string) === 'compact') ? 'py-2' : 'py-4'))">
+            {{ o.number }}
+          </TableCell>
+          <TableCell>
+            {{ o.date }}
+          </TableCell>
+          <TableCell>
+            {{ tpl(labels.itemsCount, o.items) }}
+          </TableCell>
+          <TableCell>
+            {{ fmtMoney(o.total, o.currency) }}
+          </TableCell>
+          <TableCell>
+            <Pill
+              :tone="
+                o.status === 'paid' ? 'green'
+                : o.status === 'shipped' ? 'blue'
+                : o.status === 'pending' ? 'amber'
+                : 'gray'
+              "
+            >
+              {{ at(statuses, o.status) }}
+            </Pill>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/over-media.vue b/packages/vue/ui/src/components/over-media.vue
new file mode 100644
index 0000000..0a64b2f
--- /dev/null
+++ b/packages/vue/ui/src/components/over-media.vue
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!--
+  A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing.
+  It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the
+  header stays the root of the block (rule 01).
+-->
+<script lang="ts">
+export type OverMediaProps = {
+  on?: boolean;
+  alt: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import MediaFrame from "../components/media-frame.vue";
+
+const { on = false, alt } = defineProps<OverMediaProps>();
+</script>
+
+<template>
+  <Box v-if="on" class="pointer-events-none absolute inset-0 -z-10" data-testid="over">
+    <MediaFrame :alt="alt" ratio="21/9" class="size-full rounded-none opacity-40" />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/page-aside.vue b/packages/vue/ui/src/components/page-aside.vue
new file mode 100644
index 0000000..0bdbf10
--- /dev/null
+++ b/packages/vue/ui/src/components/page-aside.vue
@@ -0,0 +1,74 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/page-trail-parts.ts -->
+<!--
+  The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key
+  facts as cards in two columns.
+-->
+<script lang="ts">
+import type { PageExtras } from "../blocks/page-trail.types";
+
+export type PageAsideProps = {
+  extras: PageExtras;
+  mode?: "none" | "figure" | "note" | "facts";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { extras, mode = "figure" } = defineProps<PageAsideProps>();
+</script>
+
+<template>
+  <Stack v-if="((mode as string) === 'figure')" gap="0" align="end" class="text-end" data-testid="page-figure">
+    <Text size="4xl" weight="bold">
+      {{ extras.value }}
+    </Text>
+    <Text size="xs" class="text-muted-foreground">
+      {{ extras.caption }}
+    </Text>
+  </Stack>
+  <Group v-if="((mode as string) === 'note')"
+    gap="4"
+    align="start"
+    class="rounded bg-card inset-ring inset-ring-border max-w-xs p-4"
+    data-testid="page-note"
+  >
+    <LucideIcon :name="extras.icon" :size="20" />
+    <Stack gap="0">
+      <Text size="lg" weight="bold">
+        {{ extras.value }}
+      </Text>
+      <Text size="sm" weight="medium">
+        {{ extras.caption }}
+      </Text>
+      <Text size="xs" class="text-muted-foreground">
+        {{ extras.note }}
+      </Text>
+    </Stack>
+  </Group>
+  <Box v-if="((mode as string) === 'facts')" class="grid grid-cols-2 gap-4">
+    <template v-for="(s, i) in extras.facts" :key="s.id">
+      <Stack
+        v-if="(i < 4)"
+        gap="0"
+        class="rounded bg-card inset-ring inset-ring-border p-4"
+        data-testid="page-fact"
+      >
+        <Text size="lg" weight="bold">
+          {{ s.value }}
+        </Text>
+        <Text size="xs" weight="medium">
+          {{ s.label }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ s.hint }}
+        </Text>
+      </Stack>
+    </template>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/page-crumbs.vue b/packages/vue/ui/src/components/page-crumbs.vue
new file mode 100644
index 0000000..adef446
--- /dev/null
+++ b/packages/vue/ui/src/components/page-crumbs.vue
@@ -0,0 +1,49 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/page-trail-parts.ts -->
+<!--
+  The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the
+  last entry is the current page and is not a link.
+-->
+<script lang="ts">
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type PageCrumbsProps = {
+  label: string;
+  crumbs: NavLink[];
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Block from "../primitives/block/block.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Link from "../primitives/link/link.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+
+const { label, crumbs, landmarkLabel } = defineProps<PageCrumbsProps>();
+const last = computed(() => (crumbs?.length ?? 0) - 1);
+</script>
+
+<template>
+  <Block tag="nav" :aria-label="(landmarkLabel ?? label)" data-testid="crumbs">
+    <List class="m-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground">
+      <ListItem v-for="(c, i) in crumbs" :key="c.id" class="flex items-center gap-2">
+        <template v-if="(i < last)">
+          <Link v-if="c.href" :href="c.href" variant="muted" size="sm" data-testid="crumb">
+            {{ c.name }}
+          </Link>
+          <Inline v-else data-testid="crumb">
+            {{ c.name }}
+          </Inline>
+          <LucideIcon name="chevron-right" :size="16" />
+        </template>
+        <Inline v-else class="font-medium text-foreground" aria-current="page">
+          {{ c.name }}
+        </Inline>
+      </ListItem>
+    </List>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/page-header.vue b/packages/vue/ui/src/components/page-header.vue
new file mode 100644
index 0000000..2b73662
--- /dev/null
+++ b/packages/vue/ui/src/components/page-header.vue
@@ -0,0 +1,35 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- The page heading: a title, a one-line summary and the action buttons on the right (below on phones). -->
+<script lang="ts">
+export type PageHeaderProps = {
+  title: string;
+  summary?: string;
+  id?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+
+const { title, summary, id } = defineProps<PageHeaderProps>();
+defineSlots<{ actions?(): unknown }>();
+</script>
+
+<template>
+  <Box class="flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between">
+    <Box class="flex min-w-0 flex-col gap-2">
+      <Title :as="1" size="xl" weight="bold" class="m-0" :id="id">
+        {{ title }}
+      </Title>
+      <Text v-if="summary" class="m-0 text-xs font-medium text-muted-foreground">
+        {{ summary }}
+      </Text>
+    </Box>
+    <Box v-if="$slots.actions" class="flex flex-wrap items-center gap-2">
+      <slot name="actions" />
+    </Box>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/pager.vue b/packages/vue/ui/src/components/pager.vue
new file mode 100644
index 0000000..2b67a2c
--- /dev/null
+++ b/packages/vue/ui/src/components/pager.vue
@@ -0,0 +1,115 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4
+  5 6 … 21), with `moreLabel` a "Load more" button. The current page is a plain element marked
+  aria-current="page"; the others are buttons. All text comes in through props.
+-->
+<script lang="ts">
+export type PagerProps = {
+  page: number;
+  pages: number;
+  summary: string;
+  previousLabel: string;
+  nextLabel: string;
+  numbered?: boolean;
+  pageLabel?: string;
+  moreLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import { pageWindow, tpl } from "../utils";
+
+const {
+  page,
+  pages,
+  summary,
+  previousLabel,
+  nextLabel,
+  numbered = false,
+  pageLabel,
+  moreLabel,
+} = defineProps<PagerProps>();
+const emit = defineEmits<{ page: [page: number], more: [] }>();
+const numbers = computed(() => pageWindow(page, pages));
+</script>
+
+<template>
+  <Box
+    :class="'flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground'"
+    data-testid="pager"
+  >
+    <Inline class="flex flex-wrap items-center gap-4">
+      <Inline>
+        {{ summary }}
+      </Inline>
+    </Inline>
+    <Inline class="flex flex-wrap items-center gap-2">
+      <Button
+        v-if="(moreLabel && (page < pages))"
+        variant="outline"
+        size="sm"
+        type="button"
+        data-testid="pager-more"
+        @click="() => emit('more')"
+      >
+        {{ moreLabel }}
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        layout="icon"
+        :aria-label="previousLabel"
+        :disabled="(page <= 1)"
+        @click="() => emit('page', (page - 1))"
+      >
+        <LucideIcon name="chevron-left" :size="16" />
+      </Button>
+      <template v-if="numbered">
+        <template v-for="(n, i) in numbers" :key="(n || tpl('gap{0}', i))">
+          <Inline v-if="(n === null)" class="w-8 text-center">
+            {{ "…" }}
+          </Inline>
+          <Inline v-else-if="(n === page)"
+            :class="'flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background'"
+            aria-current="page"
+            data-testid="pager-current"
+          >
+            {{ n }}
+          </Inline>
+          <Button v-else
+            variant="ghost"
+            size="sm"
+            layout="icon"
+            type="button"
+            :aria-label="tpl(pageLabel, n)"
+            @click="() => emit('page', n)"
+          >
+            {{ n }}
+          </Button>
+        </template>
+      </template>
+      <Inline v-else class="min-w-12 text-center font-bold text-foreground">
+        {{ page }}
+        {{ " / " }}
+        {{ pages }}
+      </Inline>
+      <Button
+        variant="outline"
+        size="sm"
+        layout="icon"
+        :aria-label="nextLabel"
+        :disabled="(page >= pages)"
+        @click="() => emit('page', (page + 1))"
+      >
+        <LucideIcon name="chevron-right" :size="16" />
+      </Button>
+    </Inline>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/panel.vue b/packages/vue/ui/src/components/panel.vue
new file mode 100644
index 0000000..814909f
--- /dev/null
+++ b/packages/vue/ui/src/components/panel.vue
@@ -0,0 +1,49 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description
+  and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the
+  Block of its block (rule 01).
+-->
+<script lang="ts">
+export type PanelProps = {
+  title?: string;
+  description?: string;
+  id?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import { cn, tpl } from "../utils";
+
+const { title, description, id, class: className } = defineProps<PanelProps>();
+defineSlots<{ default?(): unknown, actions?(): unknown }>();
+</script>
+
+<template>
+  <Box
+    :class="cn(
+      'flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border',
+      className
+    )"
+    role="group"
+    :aria-labelledby="((title && id) ? tpl('{0}-t', id) : undefined)"
+  >
+    <Box v-if="(title || $slots.actions)" class="flex items-start justify-between gap-4">
+      <Box class="flex min-w-0 flex-col gap-2">
+        <Title v-if="title" :as="2" size="base" class="m-0 text-foreground" :id="(id ? tpl('{0}-t', id) : undefined)">
+          {{ title }}
+        </Title>
+        <Text v-if="description" class="m-0 text-xs font-medium text-muted-foreground">
+          {{ description }}
+        </Text>
+      </Box>
+      <slot name="actions" />
+    </Box>
+    <slot />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/payment-options.types.ts b/packages/vue/ui/src/components/payment-options.types.ts
new file mode 100644
index 0000000..a38ead1
--- /dev/null
+++ b/packages/vue/ui/src/components/payment-options.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Payment = {
+  id: string;
+  title: string;
+  text: string;
+  icon: string;
+};
diff --git a/packages/vue/ui/src/components/payment-options.vue b/packages/vue/ui/src/components/payment-options.vue
new file mode 100644
index 0000000..a87e027
--- /dev/null
+++ b/packages/vue/ui/src/components/payment-options.vue
@@ -0,0 +1,42 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!-- Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup. -->
+<script lang="ts">
+import type { Payment } from "./payment-options.types";
+
+export type PaymentOptionsProps = {
+  payments: Payment[];
+  name: string;
+  checked?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Grid from "../primitives/grid/grid.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Label from "../primitives/label/label.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Radio from "../primitives/radio/radio.vue";
+
+const { payments, name, checked = "" } = defineProps<PaymentOptionsProps>();
+</script>
+
+<template>
+  <Grid cols="1-2" class="gap-4" data-testid="payments">
+    <Label v-for="p in payments" :key="p.id"
+      :class="'flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground'"
+      data-testid="payment"
+    >
+      <Radio :name="name" :value="p.id" :checked="(p.id === checked)" />
+      <LucideIcon :name="p.icon" :size="20" class="shrink-0" />
+      <Inline class="flex flex-col items-start justify-start gap-0">
+        <Inline class="text-sm font-semibold">
+          {{ p.title }}
+        </Inline>
+        <Inline class="text-xs text-muted-foreground">
+          {{ p.text }}
+        </Inline>
+      </Inline>
+    </Label>
+  </Grid>
+</template>
diff --git a/packages/vue/ui/src/components/pill.vue b/packages/vue/ui/src/components/pill.vue
new file mode 100644
index 0000000..8750861
--- /dev/null
+++ b/packages/vue/ui/src/components/pill.vue
@@ -0,0 +1,47 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- A status pill: a tinted label with an icon (published, draft, role, comment state). -->
+<script lang="ts">
+export type PillProps = {
+  tone?: "gray" | "blue" | "amber" | "green" | "red" | "violet" | "pink" | "orange" | "cyan";
+  icon?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import { at, cn } from "../utils";
+
+const PILL: Record<string, string> = {
+  "gray": "bg-muted text-muted-foreground inset-ring-border",
+  "blue": "bg-blue-50 text-blue-700 inset-ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:inset-ring-blue-900",
+  "amber": "bg-amber-50 text-amber-700 inset-ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:inset-ring-amber-900",
+  "green": "bg-green-50 text-green-700 inset-ring-green-200 dark:bg-green-950 dark:text-green-300 dark:inset-ring-green-900",
+  "red": "bg-red-50 text-red-700 inset-ring-red-200 dark:bg-red-950 dark:text-red-300 dark:inset-ring-red-900",
+  "violet": "bg-violet-50 text-violet-700 inset-ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:inset-ring-violet-900",
+  "pink": "bg-pink-50 text-pink-700 inset-ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:inset-ring-pink-900",
+  "orange": "bg-orange-50 text-orange-700 inset-ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:inset-ring-orange-900",
+  "cyan": "bg-cyan-50 text-cyan-700 inset-ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:inset-ring-cyan-900",
+};
+const { tone = "gray", icon, class: className } = defineProps<PillProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Box class="contents">
+    <Inline
+      :class="cn(
+        'inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring',
+        at(PILL, tone),
+        className
+      )"
+      data-slot="pill"
+    >
+      <LucideIcon v-if="icon" :name="icon" :size="12" />
+      <slot />
+    </Inline>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/post-actions.vue b/packages/vue/ui/src/components/post-actions.vue
new file mode 100644
index 0000000..58e6e2b
--- /dev/null
+++ b/packages/vue/ui/src/components/post-actions.vue
@@ -0,0 +1,50 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!--
+  The calls to action of a post header: share and save side by side, one wide read button, or a wide read button
+  with share and save as icons.
+-->
+<script lang="ts">
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostActionsProps = {
+  labels: PostSplitLabels;
+  mode?: "pair" | "wide" | "icons";
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+
+const { labels, mode = "pair" } = defineProps<PostActionsProps>();
+</script>
+
+<template>
+  <Group v-if="((mode as string) === 'pair')" gap="2" class="flex-wrap">
+    <Button variant="default" size="default" class="gap-2" data-testid="action-primary">
+      <LucideIcon name="share-2" :size="16" />
+      {{ labels.share }}
+    </Button>
+    <Button variant="outline" size="default" class="gap-2" data-testid="post-save">
+      <LucideIcon name="bookmark" :size="16" />
+      {{ labels.save }}
+    </Button>
+  </Group>
+  <Group v-else gap="2">
+    <Button variant="default" size="default" class="gap-2 flex-1" data-testid="action-primary">
+      <LucideIcon name="book-open" :size="16" />
+      {{ labels.read }}
+    </Button>
+    <template v-if="((mode as string) === 'icons')">
+      <Button variant="outline" size="default" layout="icon" :aria-label="labels.share" data-testid="post-share">
+        <LucideIcon name="share-2" :size="16" />
+      </Button>
+      <Button variant="outline" size="default" layout="icon" :aria-label="labels.save" data-testid="post-save">
+        <LucideIcon name="bookmark" :size="16" />
+      </Button>
+    </template>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/post-author.vue b/packages/vue/ui/src/components/post-author.vue
new file mode 100644
index 0000000..52fef67
--- /dev/null
+++ b/packages/vue/ui/src/components/post-author.vue
@@ -0,0 +1,84 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!--
+  The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line,
+  a card, or a card with the bio.
+-->
+<script lang="ts">
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostAuthorProps = {
+  post: Post;
+  extras: PostExtras;
+  labels: PostSplitLabels;
+  mode?: "line" | "card" | "bio";
+  share?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { cn } from "../utils";
+
+const {
+  post,
+  extras,
+  labels,
+  mode = "line",
+  share = false,
+  class: className,
+} = defineProps<PostAuthorProps>();
+</script>
+
+<template>
+  <Stack
+    gap="4"
+    align="stretch"
+    :class="cn(
+      (((mode as string) === 'line') ? '' : 'rounded bg-card inset-ring inset-ring-border p-4'),
+      className
+    )"
+    data-testid="post-author"
+  >
+    <Group gap="4" align="center">
+      <MediaFrame :alt="post.author" ratio="1/1" class="size-10 shrink-0 rounded-full" />
+      <Stack gap="0" align="start" class="min-w-0 flex-1 text-start">
+        <Text size="sm" weight="semibold">
+          {{ post.author }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ extras.role }}
+        </Text>
+      </Stack>
+      <Group v-if="share" gap="2">
+        <Button variant="ghost" size="default" class="gap-2" data-testid="post-share">
+          <LucideIcon name="share-2" :size="16" />
+          {{ labels.share }}
+        </Button>
+        <Button variant="ghost" size="default" class="gap-2" data-testid="post-save">
+          <LucideIcon name="bookmark" :size="16" />
+          {{ labels.save }}
+        </Button>
+      </Group>
+      <Box v-else class="text-muted-foreground">
+        <Group gap="2" align="center">
+          <LucideIcon name="calendar" :size="16" />
+          <Text size="sm">
+            {{ post.date }}
+          </Text>
+        </Group>
+      </Box>
+    </Group>
+    <Text v-if="((mode as string) === 'bio')" size="sm" class="text-muted-foreground">
+      {{ extras.bio }}
+    </Text>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/post-feature.vue b/packages/vue/ui/src/components/post-feature.vue
new file mode 100644
index 0000000..adc78f9
--- /dev/null
+++ b/packages/vue/ui/src/components/post-feature.vue
@@ -0,0 +1,57 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-showcase-parts.ts -->
+<!--
+  The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading
+  time, and a wide read button.
+-->
+<script lang="ts">
+import type { Post, PostLabels } from "../blocks/post-card.types";
+
+export type PostFeatureProps = {
+  p: Post;
+  labels: PostLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { tpl } from "../utils";
+
+const { p, labels } = defineProps<PostFeatureProps>();
+</script>
+
+<template>
+  <Stack gap="4" align="stretch" class="border-t border-border pt-6" data-testid="post-feature">
+    <Badge variant="secondary" size="sm" class="w-fit">
+      {{ p.category }}
+    </Badge>
+    <Title :as="3" size="xl" weight="semibold">
+      {{ p.title }}
+    </Title>
+    <Text size="sm" class="text-muted-foreground">
+      {{ p.excerpt }}
+    </Text>
+    <Group gap="4" align="center">
+      <MediaFrame :alt="p.author" ratio="1/1" class="size-10 shrink-0 rounded-full" />
+      <Stack gap="0">
+        <Text size="sm" weight="semibold">
+          {{ p.author }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ tpl("{0} · {1}", p.date, tpl(labels.minutes, p.minutes)) }}
+        </Text>
+      </Stack>
+    </Group>
+    <Button variant="default" size="default" :href="p.href" class="w-full gap-2" data-testid="action-primary">
+      {{ labels.read }}
+      <LucideIcon name="arrow-right" :size="16" />
+    </Button>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/post-mini-card.vue b/packages/vue/ui/src/components/post-mini-card.vue
new file mode 100644
index 0000000..4a7f1ed
--- /dev/null
+++ b/packages/vue/ui/src/components/post-mini-card.vue
@@ -0,0 +1,39 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-showcase-parts.ts -->
+<!-- A small post card of PostShowcase: the picture, the category, the title and the author with the reading time. -->
+<script lang="ts">
+import type { Post, PostLabels } from "../blocks/post-card.types";
+
+export type PostMiniCardProps = {
+  p: Post;
+  labels: PostLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import MediaFrame from "../components/media-frame.vue";
+import { tpl } from "../utils";
+
+const { p, labels } = defineProps<PostMiniCardProps>();
+</script>
+
+<template>
+  <Stack gap="2" align="stretch" class="rounded bg-card inset-ring inset-ring-border p-2" data-testid="post-mini">
+    <MediaFrame :alt="p.title" />
+    <Stack gap="2" align="start" class="p-2">
+      <Badge variant="secondary" size="sm">
+        {{ p.category }}
+      </Badge>
+      <Title :as="3" size="sm" weight="semibold">
+        {{ p.title }}
+      </Title>
+      <Text size="xs" class="text-muted-foreground">
+        {{ tpl("{0} · {1}", p.author, tpl(labels.minutes, p.minutes)) }}
+      </Text>
+    </Stack>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/post-outline.vue b/packages/vue/ui/src/components/post-outline.vue
new file mode 100644
index 0000000..cfab19a
--- /dev/null
+++ b/packages/vue/ui/src/components/post-outline.vue
@@ -0,0 +1,71 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!-- The facts of a post in a column (author, date, minutes, views), then the related reading as links. -->
+<script lang="ts">
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostOutlineProps = {
+  post: Post;
+  extras: PostExtras;
+  labels: PostSplitLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import { tpl } from "../utils";
+
+const { post, extras, labels } = defineProps<PostOutlineProps>();
+</script>
+
+<template>
+  <Stack gap="6" align="stretch" data-testid="post-outline">
+    <Stack gap="2" align="start" class="text-muted-foreground">
+      <Group gap="2" align="center">
+        <LucideIcon name="user" :size="16" />
+        <Text size="sm">
+          {{ post.author }}
+        </Text>
+      </Group>
+      <Group gap="2" align="center">
+        <LucideIcon name="calendar" :size="16" />
+        <Text size="sm">
+          {{ post.date }}
+        </Text>
+      </Group>
+      <Group gap="2" align="center">
+        <LucideIcon name="clock" :size="16" />
+        <Text size="sm">
+          {{ tpl(labels.minutes, post.minutes) }}
+        </Text>
+      </Group>
+      <Group gap="2" align="center">
+        <LucideIcon name="eye" :size="16" />
+        <Text size="sm">
+          {{ tpl(labels.views, extras.views) }}
+        </Text>
+      </Group>
+    </Stack>
+    <Stack gap="2" align="stretch" class="border-t border-border pt-4">
+      <Text size="xs" weight="medium" class="uppercase tracking-wide text-muted-foreground">
+        {{ labels.related }}
+      </Text>
+      <MenuEntry
+        v-for="l in extras.outline"
+        :key="l.id"
+        :href="l.href"
+        class="text-sm font-medium"
+        size="sm"
+        testid="post-link"
+      >
+        <LucideIcon name="chevron-right" :size="16" />
+        {{ l.name }}
+      </MenuEntry>
+    </Stack>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/post-overlay-card.vue b/packages/vue/ui/src/components/post-overlay-card.vue
new file mode 100644
index 0000000..1798f86
--- /dev/null
+++ b/packages/vue/ui/src/components/post-overlay-card.vue
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-showcase-parts.ts -->
+<!--
+  A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and
+  date, the title, the excerpt and a read link.
+-->
+<script lang="ts">
+import type { Post, PostLabels } from "../blocks/post-card.types";
+
+export type PostOverlayCardProps = {
+  p: Post;
+  labels: PostLabels;
+  ratio?: "4/3" | "16/9";
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import MediaFrame from "../components/media-frame.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import { cn } from "../utils";
+
+const { p, labels, ratio = "4/3" } = defineProps<PostOverlayCardProps>();
+</script>
+
+<template>
+  <Box class="relative overflow-hidden rounded" data-testid="post-overlay">
+    <MediaFrame :alt="p.title" :ratio="ratio" :class="(((ratio as string) === '4/3') ? 'min-h-80' : 'min-h-64')" />
+    <Stack gap="2" align="start" class="absolute bottom-4 left-4 right-4 rounded bg-background p-4">
+      <Group gap="2" align="center">
+        <Badge variant="secondary" size="sm">
+          {{ p.category }}
+        </Badge>
+        <Text size="xs" class="text-muted-foreground">
+          {{ p.date }}
+        </Text>
+      </Group>
+      <Title :as="3" size="base" weight="semibold">
+        {{ p.title }}
+      </Title>
+      <Text size="sm" :class="cn('text-muted-foreground', 'line-clamp-2')">
+        {{ p.excerpt }}
+      </Text>
+      <MenuEntry :href="p.href" class="gap-2 text-sm font-medium" size="sm" testid="read">
+        {{ labels.read }}
+        <LucideIcon name="arrow-right" :size="16" />
+      </MenuEntry>
+    </Stack>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/post-stats.vue b/packages/vue/ui/src/components/post-stats.vue
new file mode 100644
index 0000000..592cabe
--- /dev/null
+++ b/packages/vue/ui/src/components/post-stats.vue
@@ -0,0 +1,46 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!-- The reading figures of a post: minutes to read, views and likes, each with its glyph. -->
+<script lang="ts">
+import type { Post } from "../blocks/post-card.types";
+import type { PostExtras, PostSplitLabels } from "../blocks/post-split.types";
+
+export type PostStatsProps = {
+  post: Post;
+  extras: PostExtras;
+  labels: PostSplitLabels;
+  align?: "start" | "center";
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import { tpl } from "../utils";
+
+const { post, extras, labels, align = "start" } = defineProps<PostStatsProps>();
+</script>
+
+<template>
+  <Group gap="4" align="center" :justify="align" class="flex-wrap text-muted-foreground" data-testid="post-stats">
+    <Group gap="2" align="center">
+      <LucideIcon name="clock" :size="16" />
+      <Text size="sm">
+        {{ tpl(labels.minutes, post.minutes) }}
+      </Text>
+    </Group>
+    <Group gap="2" align="center">
+      <LucideIcon name="eye" :size="16" />
+      <Text size="sm">
+        {{ tpl(labels.views, extras.views) }}
+      </Text>
+    </Group>
+    <Group gap="2" align="center">
+      <LucideIcon name="heart" :size="16" />
+      <Text size="sm">
+        {{ tpl(labels.likes, extras.likes) }}
+      </Text>
+    </Group>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/post-tags.vue b/packages/vue/ui/src/components/post-tags.vue
new file mode 100644
index 0000000..7b83112
--- /dev/null
+++ b/packages/vue/ui/src/components/post-tags.vue
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/post-split-parts.ts -->
+<!-- The tags of a post as small badges in a wrapping row. -->
+<script lang="ts">
+import type { NavLink } from "../blocks/nav-bar.types";
+
+export type PostTagsProps = {
+  tags: NavLink[];
+  align?: "start" | "center";
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Group from "../primitives/group/group.vue";
+
+const { tags, align = "start" } = defineProps<PostTagsProps>();
+</script>
+
+<template>
+  <Group gap="2" :justify="align" class="flex-wrap">
+    <Badge v-for="tag in tags" :key="tag.id" variant="secondary" size="sm" data-testid="post-tag">
+      {{ tag.name }}
+    </Badge>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/product-gallery.vue b/packages/vue/ui/src/components/product-gallery.vue
new file mode 100644
index 0000000..9460c65
--- /dev/null
+++ b/packages/vue/ui/src/components/product-gallery.vue
@@ -0,0 +1,32 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/product-parts.ts -->
+<!--
+  The gallery of a product page: the picture (the file of the product's featured media, a placeholder without
+  one) and optional thumbnails below.
+-->
+<script lang="ts">
+export type ProductGalleryProps = {
+  name: string;
+  image?: string;
+  thumbs?: "none" | "below";
+};
+</script>
+
+<script setup lang="ts">
+import Grid from "../primitives/grid/grid.vue";
+import Stack from "../primitives/stack/stack.vue";
+import MediaFrame from "../components/media-frame.vue";
+
+const { name, image, thumbs = "below" } = defineProps<ProductGalleryProps>();
+</script>
+
+<template>
+  <Stack gap="4" align="stretch" data-testid="gallery">
+    <MediaFrame :alt="name" :src="image" ratio="1/1" />
+    <Grid v-if="((thumbs as string) === 'below')" cols="3" class="gap-4" data-testid="thumbs">
+      <MediaFrame :alt="name" :src="image" ratio="1/1" class="ring-2 ring-foreground" />
+      <MediaFrame :alt="name" ratio="1/1" />
+      <MediaFrame :alt="name" ratio="1/1" />
+    </Grid>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/product-price.vue b/packages/vue/ui/src/components/product-price.vue
new file mode 100644
index 0000000..b961c16
--- /dev/null
+++ b/packages/vue/ui/src/components/product-price.vue
@@ -0,0 +1,48 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/product-parts.ts -->
+<!--
+  The price line of a product page: the price (integer minor units in the currency), the old price (compare_at)
+  struck through when higher, and the badge.
+-->
+<script lang="ts">
+export type ProductPriceProps = {
+  price: number;
+  compareAt?: number;
+  currency: string;
+  badge?: string;
+  was: string;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Text from "../primitives/text/text.vue";
+import { fmtMoney } from "../utils";
+
+const { price, compareAt, currency, badge = "", was } = defineProps<ProductPriceProps>();
+</script>
+
+<template>
+  <Group gap="4" align="center" class="flex-wrap">
+    <Text size="4xl" weight="bold">
+      {{ fmtMoney(price, currency) }}
+    </Text>
+    <Text
+      v-if="(compareAt && (compareAt > price))"
+      tag="del"
+      size="lg"
+      class="relative text-muted-foreground"
+      data-testid="compare-at"
+    >
+      <Inline class="sr-only">
+        {{ was }}
+      </Inline>
+      {{ fmtMoney(compareAt, currency) }}
+    </Text>
+    <Badge v-if="badge" variant="default" size="default">
+      {{ badge }}
+    </Badge>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/project-tiles.vue b/packages/vue/ui/src/components/project-tiles.vue
new file mode 100644
index 0000000..f4a6bd4
--- /dev/null
+++ b/packages/vue/ui/src/components/project-tiles.vue
@@ -0,0 +1,105 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/work-parts.ts -->
+<!--
+  The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags,
+  two links), compact cards in four columns, captions over the pictures, or a bento where the first project
+  takes a big tile.
+-->
+<script lang="ts">
+import type { Project, ProjectLabels } from "../blocks/project-grid.types";
+
+export type ProjectTilesProps = {
+  projects: Project[];
+  labels: ProjectLabels;
+  layout?: "cards" | "compact" | "overlay" | "bento" | "list";
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import ArticleBlock from "../components/article-block.vue";
+import MediaFrame from "../components/media-frame.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import { cn, tpl } from "../utils";
+
+const { projects, labels, layout = "cards" } = defineProps<ProjectTilesProps>();
+const over = computed(() =>
+  (layout as string) === "overlay" ? true
+  : ((layout as string) === "bento")
+);
+</script>
+
+<template>
+  <Box
+    :class="
+      (layout as string) === 'compact' ? 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'
+      : 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'
+    "
+    data-testid="items"
+  >
+    <ArticleBlock v-for="(p, i) in projects" :key="p.id"
+      :class="cn(
+        'flex flex-col gap-4',
+        (over ? 'relative' : 'rounded bg-card inset-ring inset-ring-border p-4'),
+        ((((layout as string) === 'bento') && (i === 0)) ? 'sm:col-span-2 lg:row-span-2' : '')
+      )"
+      testid="item"
+    >
+      <Box :class="(over ? 'h-full' : 'relative')">
+        <MediaFrame
+          :alt="p.title"
+          :ratio="(((layout as string) === 'compact') ? '1/1' : (over ? '3/4' : '4/3'))"
+          :class="(over ? 'h-full' : '')"
+        />
+        <Badge
+          v-if="(p.featured && ((layout as string) !== 'compact'))"
+          variant="default"
+          size="default"
+          class="absolute left-4 top-4"
+          data-testid="featured"
+        >
+          {{ labels.featured }}
+        </Badge>
+      </Box>
+      <Stack
+        gap="2"
+        align="stretch"
+        :class="(over ? 'absolute right-4 bottom-4 left-4 rounded bg-background p-4' : '')"
+      >
+        <Text size="xs" class="text-muted-foreground">
+          {{ tpl("{0}, {1}", p.category, p.year) }}
+        </Text>
+        <Title :as="3" :size="(((layout as string) === 'compact') ? 'sm' : 'lg')" weight="semibold">
+          {{ p.title }}
+        </Title>
+        <Text v-if="((layout as string) !== 'compact')" size="sm" class="text-muted-foreground">
+          {{ p.summary }}
+        </Text>
+        <template v-if="((layout as string) === 'cards')">
+          <Group gap="2" class="flex-wrap">
+            <Badge v-for="k in p.tags" :key="k" variant="secondary" size="sm">
+              {{ k }}
+            </Badge>
+          </Group>
+          <Group gap="4" class="pt-2">
+            <MenuEntry :href="p.href" class="inline-flex items-center gap-2 text-sm font-medium">
+              {{ labels.case }}
+              <LucideIcon name="arrow-right" :size="16" />
+            </MenuEntry>
+            <MenuEntry :href="p.href" class="inline-flex items-center gap-2 text-sm font-medium">
+              {{ labels.view }}
+              <LucideIcon name="external-link" :size="16" />
+            </MenuEntry>
+          </Group>
+        </template>
+      </Stack>
+    </ArticleBlock>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/prompt-composer.vue b/packages/vue/ui/src/components/prompt-composer.vue
new file mode 100644
index 0000000..04b7728
--- /dev/null
+++ b/packages/vue/ui/src/components/prompt-composer.vue
@@ -0,0 +1,106 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!--
+  A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send
+  button. Static links only; a host adds behavior.
+-->
+<script lang="ts">
+export type PromptComposerProps = {
+  label?: string;
+  attachLabel?: string;
+  modelLabel?: string;
+  send?: string;
+  href?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const { label, attachLabel, modelLabel, send, href } = defineProps<PromptComposerProps>();
+</script>
+
+<template>
+  <Box
+    :class="cn(
+      'mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30',
+      defaults.hero.composer
+    )"
+    data-testid="email-form"
+  >
+    <Group v-if="attachLabel" gap="2" align="center" data-testid="composer-attachments">
+      <Button
+        variant="ghost"
+        size="sm"
+        :class="cn(
+          'gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20',
+          defaults.hero.attach
+        )"
+        data-testid="composer-attach"
+      >
+        <LucideIcon name="file-text" :size="16" />
+        {{ attachLabel }}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        :class="cn(
+          'gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20',
+          defaults.hero.attach
+        )"
+        data-testid="composer-attach"
+      >
+        <LucideIcon name="paperclip" :size="16" />
+        {{ attachLabel }}
+      </Button>
+    </Group>
+    <Text
+      size="xs"
+      weight="semibold"
+      :class="cn('flex w-full items-center leading-5 text-background/80', defaults.hero.promptLine)"
+      data-testid="field"
+    >
+      {{ label }}
+    </Text>
+    <Group gap="2" align="center" justify="between" class="h-8 w-full" data-testid="composer-tools">
+      <Group gap="2" align="center">
+        <Button
+          variant="ghost"
+          size="sm"
+          layout="icon"
+          class="bg-background/10 text-background hover:bg-background/20"
+          data-testid="composer-plus"
+          :aria-label="(attachLabel ?? 'Attach')"
+        >
+          <LucideIcon name="plus" :size="16" />
+        </Button>
+        <Button v-if="modelLabel"
+          variant="ghost"
+          size="sm"
+          :class="cn('gap-2 bg-background/10 text-background hover:bg-background/20', defaults.hero.model)"
+          data-testid="composer-model"
+        >
+          <LucideIcon name="sparkles" :size="16" />
+          {{ modelLabel }}
+          <LucideIcon name="chevron-down" :size="16" />
+        </Button>
+      </Group>
+      <Button
+        :href="href"
+        variant="secondary"
+        size="sm"
+        layout="icon"
+        data-testid="submit"
+        :aria-label="(send ?? 'Send')"
+      >
+        <LucideIcon name="arrow-up" :size="16" />
+      </Button>
+    </Group>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/quote-card.vue b/packages/vue/ui/src/components/quote-card.vue
new file mode 100644
index 0000000..6067154
--- /dev/null
+++ b/packages/vue/ui/src/components/quote-card.vue
@@ -0,0 +1,93 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/marketing.ts -->
+<!--
+  One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the
+  stars and a company glyph as `item` says.
+-->
+<script lang="ts">
+import type { Quote, QuoteLabels, QuoteItem } from "../blocks/testimonial-grid.types";
+
+export type QuoteCardProps = {
+  q: Quote;
+  labels: QuoteLabels;
+  item?: QuoteItem;
+  layout?: "grid" | "single" | "stack" | "masonry" | "strip";
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import FigureBlock from "../components/figure-block.vue";
+import MediaFrame from "../components/media-frame.vue";
+import Rating from "../components/rating.vue";
+import { cn, tpl } from "../utils";
+
+const { q, labels, item, layout = "grid" } = defineProps<QuoteCardProps>();
+</script>
+
+<template>
+  <FigureBlock
+    :class="cn(
+      'm-0 flex flex-col gap-4',
+      ((item?.kind === 'plain') ? '' : 'rounded p-6 inset-ring inset-ring-border bg-card'),
+      (
+        (layout as string) === 'masonry' ? 'mb-4 break-inside-avoid'
+        : (layout as string) === 'strip' ? 'w-80 shrink-0 snap-start'
+        : 'h-full'
+      )
+    )"
+    testid="item"
+  >
+    <template v-if="(item?.kind === 'social')">
+      <Group gap="4" align="center">
+        <MediaFrame
+          v-if="(item?.avatar !== 'none')"
+          :alt="q.author"
+          ratio="1/1"
+          class="size-12 shrink-0 rounded-full"
+        />
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {{ q.author }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ tpl(labels.handleLine, q.handle, q.time) }}
+          </Text>
+        </Stack>
+        <LucideIcon name="message-circle" :size="16" class="ml-auto text-muted-foreground" />
+      </Group>
+      <Text size="base">
+        {{ q.quote }}
+      </Text>
+    </template>
+    <template v-else>
+      <Rating v-if="(item?.rating !== 'hide')" :value="q.rating" :label="tpl(labels.rating, q.rating)" />
+      <Inline v-if="(item?.mark === 'icon')" class="text-muted-foreground" data-testid="mark">
+        <LucideIcon :name="q.mark" :size="24" />
+      </Inline>
+      <Text :size="(((layout as string) === 'single') ? 'xl' : 'base')">
+        {{ q.quote }}
+      </Text>
+      <Group gap="4" align="center">
+        <MediaFrame
+          v-if="(item?.avatar !== 'none')"
+          :alt="q.author"
+          ratio="1/1"
+          class="size-12 shrink-0 rounded-full"
+        />
+        <Stack gap="0">
+          <Text size="sm" weight="semibold">
+            {{ q.author }}
+          </Text>
+          <Text size="sm" class="text-muted-foreground">
+            {{ tpl(labels.byLine, q.role, q.company) }}
+          </Text>
+        </Stack>
+      </Group>
+    </template>
+  </FigureBlock>
+</template>
diff --git a/packages/vue/ui/src/components/quote-figures.vue b/packages/vue/ui/src/components/quote-figures.vue
new file mode 100644
index 0000000..e77f7fb
--- /dev/null
+++ b/packages/vue/ui/src/components/quote-figures.vue
@@ -0,0 +1,34 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/quote-split-parts.ts -->
+<!-- Three figures in a row above the quotes of QuoteSplit. -->
+<script lang="ts">
+import type { QuoteExtras } from "../blocks/quote-split.types";
+import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteFiguresProps = {
+  extras: QuoteExtras;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+
+const { extras } = defineProps<QuoteFiguresProps>();
+</script>
+
+<template>
+  <Box class="grid grid-cols-3 gap-4 border-b border-border pb-8" data-testid="quote-figures">
+    <template v-for="(s, i) in extras.stats" :key="s.id">
+      <Stack v-if="(i < 3)" gap="0" data-testid="quote-stat">
+        <Text size="3xl" weight="bold">
+          {{ s.value }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ s.label }}
+        </Text>
+      </Stack>
+    </template>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/quote-logo-tiles.vue b/packages/vue/ui/src/components/quote-logo-tiles.vue
new file mode 100644
index 0000000..df5d994
--- /dev/null
+++ b/packages/vue/ui/src/components/quote-logo-tiles.vue
@@ -0,0 +1,39 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/quote-split-parts.ts -->
+<!-- Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit. -->
+<script lang="ts">
+import type { QuoteExtras } from "../blocks/quote-split.types";
+import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteLogoTilesProps = {
+  extras: QuoteExtras;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+
+const { extras } = defineProps<QuoteLogoTilesProps>();
+</script>
+
+<template>
+  <Box class="grid grid-cols-2 gap-4" data-testid="quote-logos">
+    <template v-for="(l, i) in extras.logos" :key="l.id">
+      <Group v-if="(i < 4)"
+        gap="2"
+        align="center"
+        justify="center"
+        class="rounded bg-card inset-ring inset-ring-border p-4 text-muted-foreground"
+        data-testid="quote-logo"
+      >
+        <LucideIcon :name="l.icon" :size="20" />
+        <Text size="sm" weight="semibold">
+          {{ l.name }}
+        </Text>
+      </Group>
+    </template>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/quote-proof.vue b/packages/vue/ui/src/components/quote-proof.vue
new file mode 100644
index 0000000..a571876
--- /dev/null
+++ b/packages/vue/ui/src/components/quote-proof.vue
@@ -0,0 +1,33 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/cta.ts -->
+<!-- A customer quote and who said it, as a figure. -->
+<script lang="ts">
+export type QuoteProofProps = {
+  quote?: string;
+  quoteBy?: string;
+  center?: boolean;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Text from "../primitives/text/text.vue";
+import { cn } from "../utils";
+
+const { quote, quoteBy, center = false } = defineProps<QuoteProofProps>();
+</script>
+
+<template>
+  <Block
+    tag="figure"
+    :class="cn('flex flex-col gap-2', (center ? 'items-center text-center' : ''))"
+    data-testid="proof"
+  >
+    <Text size="xl">
+      {{ quote }}
+    </Text>
+    <Text size="sm" class="text-muted-foreground">
+      {{ quoteBy }}
+    </Text>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/quote-rating-panel.vue b/packages/vue/ui/src/components/quote-rating-panel.vue
new file mode 100644
index 0000000..0552fe2
--- /dev/null
+++ b/packages/vue/ui/src/components/quote-rating-panel.vue
@@ -0,0 +1,51 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/quote-split-parts.ts -->
+<!-- The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures. -->
+<script lang="ts">
+import type { QuoteExtras } from "../blocks/quote-split.types";
+import type { QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteRatingPanelProps = {
+  extras: QuoteExtras;
+  labels: QuoteLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Rating from "../components/rating.vue";
+import { tpl } from "../utils";
+
+const { extras, labels } = defineProps<QuoteRatingPanelProps>();
+</script>
+
+<template>
+  <Stack
+    gap="6"
+    align="center"
+    class="rounded bg-card inset-ring inset-ring-border p-8 text-center"
+    data-testid="quote-rating"
+  >
+    <Text size="5xl" weight="bold">
+      {{ extras.score }}
+    </Text>
+    <Rating :value="extras.rating" :label="tpl(labels.rating, extras.rating)" :size="20" />
+    <Text size="sm" class="text-muted-foreground">
+      {{ extras.reviews }}
+    </Text>
+    <Box class="grid w-full grid-cols-2 gap-4 border-t border-border pt-6">
+      <template v-for="(s, i) in extras.stats" :key="s.id">
+        <Stack v-if="(i < 2)" gap="0" align="center" data-testid="quote-stat">
+          <Text size="2xl" weight="semibold">
+            {{ s.value }}
+          </Text>
+          <Text size="xs" class="text-muted-foreground">
+            {{ s.label }}
+          </Text>
+        </Stack>
+      </template>
+    </Box>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/quote-slot.vue b/packages/vue/ui/src/components/quote-slot.vue
new file mode 100644
index 0000000..f61cb6b
--- /dev/null
+++ b/packages/vue/ui/src/components/quote-slot.vue
@@ -0,0 +1,35 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/quote-split-parts.ts -->
+<!--
+  One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in
+  a box that can span grid rows.
+-->
+<script lang="ts">
+import type { Quote, QuoteLabels } from "../blocks/testimonial-grid.types";
+
+export type QuoteSlotProps = {
+  q: Quote;
+  labels: QuoteLabels;
+  kind?: "card" | "plain";
+  layout?: "grid" | "single" | "stack";
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import QuoteCard from "../components/quote-card.vue";
+
+const { q, labels, kind = "card", layout = "grid", class: className } = defineProps<QuoteSlotProps>();
+</script>
+
+<template>
+  <Box :class="className" data-testid="quote">
+    <QuoteCard
+      :q="q"
+      :labels="labels"
+      :item="{ kind, avatar: 'image', rating: 'show', mark: 'none' }"
+      :layout="layout"
+    />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/range-field.vue b/packages/vue/ui/src/components/range-field.vue
new file mode 100644
index 0000000..fd5aee4
--- /dev/null
+++ b/packages/vue/ui/src/components/range-field.vue
@@ -0,0 +1,75 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two
+  sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.
+-->
+<script lang="ts">
+export type RangeFieldProps = {
+  type: "number" | "date";
+  from: string;
+  to: string;
+  fromLabel: string;
+  toLabel: string;
+  min?: number;
+  max?: number;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Input from "../primitives/input/input.vue";
+import Range from "../primitives/range/range.vue";
+import { cn } from "../utils";
+
+const { type, from, to, fromLabel, toLabel, min, max, class: className } = defineProps<RangeFieldProps>();
+const emit = defineEmits<{ change: [from: string, to: string] }>();
+</script>
+
+<template>
+  <Box :class="cn('flex flex-col gap-2', className)" data-slot="range-field">
+    <template v-if="(((type as string) === 'number') && (min != null) && (max != null) && (min < max))">
+      <Range
+        :min="min"
+        :max="max"
+        :aria-label="fromLabel"
+        :value="(((from as string) === '') ? (min == null ? undefined : String(min)) : from)"
+        data-testid="range-from"
+        @input="(event: Event & { currentTarget: HTMLInputElement }) => emit('change', event.currentTarget.value, to)"
+      />
+      <Range
+        :min="min"
+        :max="max"
+        :aria-label="toLabel"
+        :value="(((to as string) === '') ? (max == null ? undefined : String(max)) : to)"
+        data-testid="range-to"
+        @input="(event: Event & { currentTarget: HTMLInputElement }) => emit('change', from, event.currentTarget.value)"
+      />
+    </template>
+    <Inline class="flex items-center gap-2">
+      <Input
+        :type="type"
+        size="sm"
+        :aria-label="fromLabel"
+        :value="from"
+        :min="(min == null ? undefined : String(min))"
+        :max="(max == null ? undefined : String(max))"
+        @input="(event: Event & { currentTarget: HTMLInputElement }) => emit('change', event.currentTarget.value, to)"
+      />
+      <Inline class="text-muted-foreground">
+        {{ "–" }}
+      </Inline>
+      <Input
+        :type="type"
+        size="sm"
+        :aria-label="toLabel"
+        :value="to"
+        :min="(min == null ? undefined : String(min))"
+        :max="(max == null ? undefined : String(max))"
+        @input="(event: Event & { currentTarget: HTMLInputElement }) => emit('change', from, event.currentTarget.value)"
+      />
+    </Inline>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/rating.vue b/packages/vue/ui/src/components/rating.vue
new file mode 100644
index 0000000..b5fb03b
--- /dev/null
+++ b/packages/vue/ui/src/components/rating.vue
@@ -0,0 +1,43 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  One to five stars (a review's grade, the average of a product). The value is read as the label; the stars
+  themselves are decoration.
+-->
+<script lang="ts">
+export type RatingProps = {
+  value: number;
+  label: string;
+  max?: number;
+  size?: number;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Box from "../primitives/box/box.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import { cn } from "../utils";
+
+const { value, label, max = 5, size = 16, class: className } = defineProps<RatingProps>();
+const full = computed(() => Math.round(Math.min(max, Math.max(0, value))));
+</script>
+
+<template>
+  <Box
+    :class="cn('inline-flex items-center gap-0', className)"
+    role="img"
+    :aria-label="label"
+    data-slot="rating"
+    :data-value="full"
+  >
+    <LucideIcon
+      v-for="i in Array.from({ length: max }, (_, i) => i)"
+      :key="i"
+      name="star"
+      :size="size"
+      :class="((i < full) ? 'fill-foreground text-foreground' : 'text-border')"
+    />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/region.vue b/packages/vue/ui/src/components/region.vue
new file mode 100644
index 0000000..7d96406
--- /dev/null
+++ b/packages/vue/ui/src/components/region.vue
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never
+  nested, so a nested landmark is its own component.
+-->
+<script lang="ts">
+export type RegionProps = {
+  tag: "header" | "nav" | "section" | "aside" | "footer" | "article" | "figure" | "main" | "search" | "div";
+  landmarkLabel?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+
+const { tag, landmarkLabel, class: className } = defineProps<RegionProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Block :tag="tag" :class="className" :aria-label="landmarkLabel">
+    <slot />
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/search-field.vue b/packages/vue/ui/src/components/search-field.vue
new file mode 100644
index 0000000..6edb58d
--- /dev/null
+++ b/packages/vue/ui/src/components/search-field.vue
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!-- A search input with a magnifier. `value` fires on every keystroke with the new text. -->
+<script lang="ts">
+export type SearchFieldProps = {
+  value: string;
+  placeholder?: string;
+  label: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Input from "../primitives/input/input.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import { cn } from "../utils";
+
+const { value, placeholder, label, class: className } = defineProps<SearchFieldProps>();
+const emit = defineEmits<{ value: [value: string] }>();
+</script>
+
+<template>
+  <Box :class="cn('relative min-w-44 flex-1', className)" role="search">
+    <LucideIcon name="search" :size="16" class="pointer-events-none absolute top-2 left-3 text-muted-foreground" />
+    <Input
+      size="sm"
+      type="search"
+      :placeholder="placeholder"
+      :aria-label="label"
+      class="pr-3 pl-10"
+      :value="value"
+      @input="(event: Event & { currentTarget: HTMLInputElement }) => emit('value', event.currentTarget.value)"
+    />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/search-palette.vue b/packages/vue/ui/src/components/search-palette.vue
new file mode 100644
index 0000000..2f1e410
--- /dev/null
+++ b/packages/vue/ui/src/components/search-palette.vue
@@ -0,0 +1,31 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/nav.ts -->
+<!-- A search field with a search glyph and the keys that open it. -->
+<script lang="ts">
+export type SearchPaletteProps = {
+  label: string;
+  shortcut: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Input from "../primitives/input/input.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+
+const { label, shortcut } = defineProps<SearchPaletteProps>();
+</script>
+
+<template>
+  <Box class="relative w-full max-w-sm" data-testid="palette">
+    <LucideIcon name="search" :size="16" class="pointer-events-none absolute top-2 left-3 text-muted-foreground" />
+    <Input type="search" size="sm" :placeholder="label" :aria-label="label" class="pr-12 pl-10" />
+    <Inline
+      :class="'pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring ' +
+        'inset-ring-border'"
+    >
+      {{ shortcut }}
+    </Inline>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/section-box.vue b/packages/vue/ui/src/components/section-box.vue
new file mode 100644
index 0000000..4200e59
--- /dev/null
+++ b/packages/vue/ui/src/components/section-box.vue
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!-- The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper). -->
+<script lang="ts">
+export type SectionBoxProps = {
+  boxed?: boolean;
+};
+</script>
+
+<script setup lang="ts">
+import Card from "../primitives/card/card.vue";
+
+const { boxed = false } = defineProps<SectionBoxProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Card v-if="boxed" variant="muted">
+    <slot />
+  </Card>
+  <slot v-else />
+</template>
diff --git a/packages/vue/ui/src/components/section-column.vue b/packages/vue/ui/src/components/section-column.vue
new file mode 100644
index 0000000..2b75aa0
--- /dev/null
+++ b/packages/vue/ui/src/components/section-column.vue
@@ -0,0 +1,45 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure
+  (xs to 3xl) holds the column at that width, centred.
+-->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** SectionColumn: the classes of each value (shadcn/cva style). */
+export const sectionColumnVariants = variants({
+  variants: {
+    measure: {
+      default: "",
+      landing: "",
+      fill: "",
+      xs: "mx-auto w-full max-w-xs",
+      sm: "mx-auto w-full max-w-sm",
+      md: "mx-auto w-full max-w-md",
+      lg: "mx-auto w-full max-w-lg",
+      xl: "mx-auto w-full max-w-xl",
+      "2xl": "mx-auto w-full max-w-2xl",
+      "3xl": "mx-auto w-full max-w-3xl",
+    },
+  },
+  defaultVariants: { measure: "default" },
+});
+
+export type SectionColumnProps = {
+  measure?: "default" | "landing" | "fill" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+};
+</script>
+
+<script setup lang="ts">
+import Stack from "../primitives/stack/stack.vue";
+
+const { measure = "default" } = defineProps<SectionColumnProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Stack gap="6" align="stretch" :class="sectionColumnVariants({ measure: measure })">
+    <slot />
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/section-frame.types.ts b/packages/vue/ui/src/components/section-frame.types.ts
new file mode 100644
index 0000000..3502204
--- /dev/null
+++ b/packages/vue/ui/src/components/section-frame.types.ts
@@ -0,0 +1,27 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/frames.ts
+
+export type SectionHeading = {
+  /** heading level */
+  level?: 1 | 2;
+  /** display: an oversized heading */
+  scale?: "default" | "display";
+  /** a short pill above the heading (e.g. New) */
+  badge?: string;
+};
+
+export type HeadLink = {
+  /** text of the link (View all, Browse all); none: no link */
+  label?: string;
+  /** href of the link; none: no link */
+  href?: string;
+};
+
+export type SectionMedia = {
+  /** the `aside` slot is shown */
+  show?: boolean;
+  /** side of the media in the split layout */
+  side?: "end" | "start";
+  /** split layout: the body and the media centred on each other, or both from the top */
+  align?: "center" | "start";
+};
diff --git a/packages/vue/ui/src/components/section-frame.vue b/packages/vue/ui/src/components/section-frame.vue
new file mode 100644
index 0000000..5c94577
--- /dev/null
+++ b/packages/vue/ui/src/components/section-frame.vue
@@ -0,0 +1,147 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body
+  (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts
+  the body in a card. Axes: layout, media side, tone, density, align.
+-->
+<script lang="ts">
+import type { SectionHeading, HeadLink, SectionMedia } from "./section-frame.types";
+import { variants } from "../utils";
+
+/** SectionFrame: the classes of each value (shadcn/cva style). */
+export const sectionFrameVariants = variants({
+  base: "w-full",
+  variants: {
+    tone: {
+      default: "",
+      muted: "bg-muted",
+      inverse: "bg-foreground text-background [&_.text-muted-foreground]:text-background/70",
+    },
+    density: {
+      roomy: "py-16",
+      default: "py-10",
+      compact: "py-6",
+      flush: "py-0",
+    },
+    align: {
+      start: "",
+      center: "text-center",
+    },
+  },
+  defaultVariants: { tone: "default", density: "default", align: "start" },
+});
+
+export type SectionFrameProps = {
+  id: string;
+  title?: string;
+  lead?: string;
+  heading?: SectionHeading;
+  action?: HeadLink;
+  layout?: "stack" | "split";
+  media?: SectionMedia;
+  boxed?: boolean;
+  tone?: "default" | "muted" | "inverse";
+  density?: "roomy" | "default" | "compact" | "flush";
+  align?: "start" | "center";
+  measure?: "default" | "landing" | "fill" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  landmarkLabel?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Container from "../primitives/container/container.vue";
+import Grid from "../primitives/grid/grid.vue";
+import Stack from "../primitives/stack/stack.vue";
+import SectionBox from "../components/section-box.vue";
+import SectionColumn from "../components/section-column.vue";
+import SectionHeader from "../components/section-header.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const {
+  id,
+  title = "",
+  lead,
+  heading,
+  action,
+  layout = "stack",
+  media,
+  boxed = false,
+  tone = "default",
+  density = "default",
+  align = "start",
+  measure = "default",
+  landmarkLabel,
+  class: className,
+} = defineProps<SectionFrameProps>();
+defineSlots<{ default?(): unknown, aside?(): unknown }>();
+const titleId = computed(() => id + "-title");
+const sectionTone = computed(() => boxed ? "default" : tone);
+const center = computed(() => (align as string) === "center");
+</script>
+
+<template>
+  <Block
+    tag="section"
+    :class="cn(sectionFrameVariants({ tone: sectionTone, density: density, align: align }), className)"
+    :aria-labelledby="(landmarkLabel ? undefined : (((title as string) !== '') ? titleId : undefined))"
+    :aria-label="(landmarkLabel ?? (((title as string) === '') ? id : undefined))"
+    data-testid="section"
+    :data-tone="tone"
+    :data-density="density"
+  >
+    <Container
+      :class="
+        (measure as string) === 'landing' ? cn('mx-auto w-full px-4', defaults.section.landing)
+        : (measure as string) === 'fill' ? 'w-full'
+        : 'mx-auto w-full max-w-6xl px-4'
+      "
+      data-slot="container"
+    >
+      <SectionBox :boxed="boxed">
+        <Grid
+          v-if="((layout as string) === 'split')"
+          cols="1-2"
+          :class="cn('gap-8', ((media?.align === 'start') ? 'items-start' : 'items-center'))"
+        >
+          <Box v-if="(media?.show && (media?.side === 'start'))" class="w-full" data-slot="media">
+            <slot name="aside" />
+          </Box>
+          <Stack gap="6" align="stretch">
+            <SectionHeader
+              :titleId="titleId"
+              :title="title"
+              :heading="heading"
+              :action="action"
+              :lead="lead"
+              :center="center"
+            />
+            <slot />
+          </Stack>
+          <Box v-if="(media?.show && (media?.side !== 'start'))" class="w-full" data-slot="media">
+            <slot name="aside" />
+          </Box>
+        </Grid>
+        <SectionColumn v-else :measure="measure">
+          <SectionHeader
+            :titleId="titleId"
+            :title="title"
+            :heading="heading"
+            :action="action"
+            :lead="lead"
+            :center="center"
+          />
+          <slot />
+          <Box v-if="media?.show" class="w-full" data-slot="media">
+            <slot name="aside" />
+          </Box>
+        </SectionColumn>
+      </SectionBox>
+    </Container>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/section-head.vue b/packages/vue/ui/src/components/section-head.vue
new file mode 100644
index 0000000..b9c0367
--- /dev/null
+++ b/packages/vue/ui/src/components/section-head.vue
@@ -0,0 +1,74 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button
+  (aria-expanded, the toggle event).
+-->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** SectionHead: the classes of each value (shadcn/cva style). */
+export const sectionHeadVariants = variants({
+  base: "flex items-center justify-between pr-4 pl-4",
+  variants: {
+    size: {
+      default: "h-8 py-2 text-xs font-semibold",
+      lg: "h-12 py-2 text-sm font-bold",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type SectionHeadProps = {
+  size?: "default" | "lg";
+  expanded?: boolean;
+  controls?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Box from "../primitives/box/box.vue";
+import ButtonPlain from "../primitives/button-plain/button-plain.vue";
+import Inline from "../primitives/inline/inline.vue";
+import { cn } from "../utils";
+
+const { size = "default", expanded, controls, class: className } = defineProps<SectionHeadProps>();
+const emit = defineEmits<{ toggle: [] }>();
+defineSlots<{ default?(): unknown, right?(): unknown }>();
+const cls = computed(() =>
+  cn(
+    sectionHeadVariants({ size: size }),
+    "rounded text-foreground in-data-[nav=collapsed]:hidden",
+    className,
+  )
+);
+</script>
+
+<template>
+  <ButtonPlain v-if="(expanded != null)"
+    type="button"
+    :class="cn(cls, 'w-full text-left')"
+    :aria-expanded="expanded"
+    :aria-controls="controls"
+    data-slot="section-head"
+    :data-expanded="expanded"
+    @click="() => emit('toggle')"
+  >
+    <Inline data-slot="section-head-title">
+      <slot />
+    </Inline>
+    <Inline v-if="$slots.right" class="flex items-center gap-2" data-slot="section-head-right">
+      <slot name="right" />
+    </Inline>
+  </ButtonPlain>
+  <Box v-else :class="cls" data-slot="section-head">
+    <Inline data-slot="section-head-title">
+      <slot />
+    </Inline>
+    <Inline v-if="$slots.right" class="flex items-center gap-2" data-slot="section-head-right">
+      <slot name="right" />
+    </Inline>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/section-header.vue b/packages/vue/ui/src/components/section-header.vue
new file mode 100644
index 0000000..5630c92
--- /dev/null
+++ b/packages/vue/ui/src/components/section-header.vue
@@ -0,0 +1,101 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/frames.ts -->
+<!--
+  The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an
+  optional lead. No wrapper: its parts are children of the section stack.
+-->
+<script lang="ts">
+import type { SectionHeading, HeadLink } from "./section-frame.types";
+
+export type SectionHeaderProps = {
+  titleId: string;
+  title?: string;
+  heading?: SectionHeading;
+  action?: HeadLink;
+  lead?: string;
+  center?: boolean;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Badge from "../primitives/badge/badge.vue";
+import Group from "../primitives/group/group.vue";
+import Link from "../primitives/link/link.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const { titleId, title = "", heading, action, lead, center = false } = defineProps<SectionHeaderProps>();
+const level = computed(() => heading?.level ?? 2);
+const scale = computed(() => heading?.scale ?? "default");
+const hasAction = computed(() => action?.label && action?.href);
+</script>
+
+<template>
+  <Badge
+    v-if="heading?.badge"
+    variant="outline"
+    size="lg"
+    :class="(center ? 'mx-auto w-fit' : 'w-fit')"
+    data-testid="section-badge"
+  >
+    {{ heading?.badge }}
+  </Badge>
+  <Group
+    v-if="(((title as string) !== '') && hasAction)"
+    gap="4"
+    align="center"
+    justify="between"
+    class="w-full flex-wrap"
+  >
+    <Title
+      :as="level"
+      :size="((level === 1) ? '5xl' : 'xl')"
+      weight="semibold"
+      :class="
+        (scale as string) === 'display' ? 'text-6xl tracking-tight md:text-8xl'
+        : level === 1 ? 'leading-tight'
+        : 'leading-7'
+      "
+      :id="titleId"
+    >
+      {{ title }}
+    </Title>
+    <Link
+      :href="action?.href"
+      variant="default"
+      :class="cn(defaults.text.tiny, 'shrink-0 font-medium leading-5')"
+      data-testid="section-action"
+    >
+      {{ action?.label }}
+    </Link>
+  </Group>
+  <Title v-if="(((title as string) !== '') && !hasAction)"
+    :as="level"
+    :size="((level === 1) ? '5xl' : 'xl')"
+    weight="semibold"
+    :class="
+      (scale as string) === 'display' ? 'text-6xl tracking-tight md:text-8xl'
+      : level === 1 ? 'leading-tight'
+      : 'leading-7'
+    "
+    :id="titleId"
+  >
+    {{ title }}
+  </Title>
+  <Group v-if="(((title as string) === '') && hasAction)" gap="4" align="center" justify="end" class="w-full">
+    <Link
+      :href="action?.href"
+      variant="default"
+      :class="cn(defaults.text.tiny, 'shrink-0 font-medium leading-5')"
+      data-testid="section-action"
+    >
+      {{ action?.label }}
+    </Link>
+  </Group>
+  <Text v-if="lead" size="base" :class="cn('max-w-2xl text-muted-foreground', (center ? 'mx-auto' : ''))">
+    {{ lead }}
+  </Text>
+</template>
diff --git a/packages/vue/ui/src/components/shell-content.vue b/packages/vue/ui/src/components/shell-content.vue
new file mode 100644
index 0000000..f82c131
--- /dev/null
+++ b/packages/vue/ui/src/components/shell-content.vue
@@ -0,0 +1,129 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shell-parts.ts -->
+<!--
+  The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px
+  grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one),
+  list (a toolbar over a card of rows). The cards are hidden from assistive technology.
+-->
+<script lang="ts">
+export type ShellContentProps = {
+  title: string;
+  titleId: string;
+  level?: 1 | 2;
+  content?: "grid" | "split" | "list";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Title from "../primitives/title/title.vue";
+import { cn } from "../utils";
+
+const { title, titleId, level = 2, content = "grid" } = defineProps<ShellContentProps>();
+</script>
+
+<template>
+  <Stack gap="6" align="stretch" class="flex-1 p-6" data-testid="content">
+    <Group gap="4" align="center" justify="between">
+      <Title :as="level" size="2xl" weight="semibold" :id="titleId">
+        {{ title }}
+      </Title>
+      <Box class="h-10 w-32 rounded bg-muted" aria-hidden="true" />
+    </Group>
+    <Box class="flex flex-1 flex-col gap-4" aria-hidden="true" data-testid="panels">
+      <template v-if="((content as string) === 'grid')">
+        <Box class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+          <Box
+            :class="cn('flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24')"
+            data-testid="panel"
+          >
+            <Box :class="cn('rounded bg-muted', 'h-4 w-1/3')" />
+            <Box :class="cn('rounded bg-muted', 'flex-1')" />
+          </Box>
+          <Box
+            :class="cn('flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24')"
+            data-testid="panel"
+          >
+            <Box :class="cn('rounded bg-muted', 'h-4 w-1/3')" />
+            <Box :class="cn('rounded bg-muted', 'flex-1')" />
+          </Box>
+          <Box
+            :class="cn('flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24')"
+            data-testid="panel"
+          >
+            <Box :class="cn('rounded bg-muted', 'h-4 w-1/3')" />
+            <Box :class="cn('rounded bg-muted', 'flex-1')" />
+          </Box>
+          <Box
+            :class="cn('flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-24')"
+            data-testid="panel"
+          >
+            <Box :class="cn('rounded bg-muted', 'h-4 w-1/3')" />
+            <Box :class="cn('rounded bg-muted', 'flex-1')" />
+          </Box>
+        </Box>
+        <Box
+          :class="cn(
+            'flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border',
+            'min-h-64 flex-1'
+          )"
+          data-testid="panel"
+        >
+          <Box :class="cn('rounded bg-muted', 'h-4 w-1/3')" />
+          <Box :class="cn('rounded bg-muted', 'flex-1')" />
+        </Box>
+      </template>
+      <template v-if="((content as string) === 'split')">
+        <Box class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          <Box
+            :class="cn(
+              'flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border',
+              'h-64 lg:col-span-2'
+            )"
+            data-testid="panel"
+          >
+            <Box :class="cn('rounded bg-muted', 'h-4 w-1/3')" />
+            <Box :class="cn('rounded bg-muted', 'flex-1')" />
+          </Box>
+          <Box
+            :class="cn('flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'h-64')"
+            data-testid="panel"
+          >
+            <Box :class="cn('rounded bg-muted', 'h-4 w-1/3')" />
+            <Box :class="cn('rounded bg-muted', 'flex-1')" />
+          </Box>
+        </Box>
+        <Box
+          :class="cn(
+            'flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border',
+            'min-h-40 flex-1'
+          )"
+          data-testid="panel"
+        >
+          <Box :class="cn('rounded bg-muted', 'h-4 w-1/3')" />
+          <Box :class="cn('rounded bg-muted', 'flex-1')" />
+        </Box>
+      </template>
+      <template v-if="((content as string) === 'list')">
+        <Group gap="4" align="center">
+          <Box :class="cn('rounded bg-muted', 'h-10 w-64')" />
+          <Box :class="cn('rounded bg-muted', 'h-10 w-24')" />
+          <Box :class="cn('rounded bg-muted', 'ml-auto h-10 w-32')" />
+        </Group>
+        <Box
+          :class="cn('flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border', 'flex-1')"
+          data-testid="panel"
+        >
+          <Box :class="cn('rounded bg-muted', 'h-8')" />
+          <Box :class="cn('rounded bg-muted', 'h-8')" />
+          <Box :class="cn('rounded bg-muted', 'h-8')" />
+          <Box :class="cn('rounded bg-muted', 'h-8')" />
+          <Box :class="cn('rounded bg-muted', 'h-8')" />
+          <Box :class="cn('rounded bg-muted', 'h-8')" />
+        </Box>
+      </template>
+    </Box>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/shell-footer.vue b/packages/vue/ui/src/components/shell-footer.vue
new file mode 100644
index 0000000..d164656
--- /dev/null
+++ b/packages/vue/ui/src/components/shell-footer.vue
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shell-parts.ts -->
+<!--
+  The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the
+  whole shell (full).
+-->
+<script lang="ts">
+import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+export type ShellFooterProps = {
+  nav: ShellNav;
+  place?: "full" | "inset";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const { nav, place = "full", landmarkLabel } = defineProps<ShellFooterProps>();
+</script>
+
+<template>
+  <Block
+    tag="footer"
+    :class="cn(
+      'flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4',
+      (((place as string) === 'full') ? 'bg-card' : '')
+    )"
+    data-testid="footer"
+    :data-place="place"
+    :aria-label="landmarkLabel"
+  >
+    <Text size="xs" class="text-muted-foreground">
+      {{ nav.copyright }}
+    </Text>
+    <NavBlock v-if="((nav.footer?.length ?? 0) > 0)"
+      :label="
+        landmarkLabel ? uniqLabel(tpl('{0}, {1}', nav.footerLabel, landmarkLabel))
+        : nav.footerLabel
+      "
+    >
+      <List class="m-0 flex list-none items-center gap-4 p-0">
+        <ListItem v-for="f in nav.footer" :key="f.id">
+          <MenuEntry :href="f.href" class="text-xs text-muted-foreground" variant="muted" size="sm">
+            {{ f.name }}
+          </MenuEntry>
+        </ListItem>
+      </List>
+    </NavBlock>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/shell-sidebar.vue b/packages/vue/ui/src/components/shell-sidebar.vue
new file mode 100644
index 0000000..101d6eb
--- /dev/null
+++ b/packages/vue/ui/src/components/shell-sidebar.vue
@@ -0,0 +1,137 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shell-parts.ts -->
+<!--
+  The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read),
+  collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a
+  panel of the current section's links). side puts it at the start or the end.
+-->
+<script lang="ts">
+import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+export type ShellSidebarProps = {
+  nav: ShellNav;
+  mode?: "wide" | "rail" | "collapsed" | "twolevel" | "none";
+  side?: "start" | "end";
+  brand?: "show" | "hide";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import ButtonPlain from "../primitives/button-plain/button-plain.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  nav,
+  mode = "wide",
+  side = "start",
+  brand = "show",
+  landmarkLabel,
+} = defineProps<ShellSidebarProps>();
+const emit = defineEmits<{ toggle: [] }>();
+const named = computed(() => (mode as string) === "wide");
+</script>
+
+<template>
+  <Block
+    tag="aside"
+    :class="cn(
+      'flex shrink-0 bg-card',
+      (
+        (side as string) === 'end' ? 'flex-row-reverse border-l border-border'
+        : 'border-r border-border'
+      )
+    )"
+    :aria-label="(landmarkLabel ?? nav.label)"
+    data-testid="sidebar"
+    :data-mode="mode"
+  >
+    <Box :class="cn('flex flex-col gap-6 py-4', (named ? 'w-64 px-4' : 'w-16 items-center px-2'))">
+      <Group v-if="((brand as string) === 'show')" gap="2" align="center" class="shrink-0" data-testid="brand">
+        <LucideIcon name="layers" :size="24" />
+        <Text size="base" weight="bold" :class="(named ? '' : 'sr-only')">
+          {{ nav.brand }}
+        </Text>
+      </Group>
+      <NavBlock v-if="((nav.links?.length ?? 0) > 0)"
+        :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', nav.label, landmarkLabel)) : nav.label)"
+        class="flex-1"
+      >
+        <List class="m-0 flex list-none flex-col gap-2 p-0" data-testid="items">
+          <ListItem v-for="l in nav.links" :key="l.id">
+            <MenuEntry
+              :href="l.href"
+              :class="cn(
+                'flex items-center gap-4 rounded py-2 text-sm',
+                (named ? 'px-4' : 'justify-center px-2'),
+                ((l.id === nav.current) ? 'bg-muted font-medium' : '')
+              )"
+              :current="(l.id === nav.current)"
+              size="sm"
+              testid="item"
+            >
+              <LucideIcon :name="l.icon" :size="16" />
+              <Inline :class="(named ? '' : 'sr-only')">
+                {{ l.name }}
+              </Inline>
+            </MenuEntry>
+          </ListItem>
+        </List>
+      </NavBlock>
+      <ButtonPlain v-if="((mode as string) === 'collapsed')"
+        type="button"
+        class="inline-flex size-10 items-center justify-center rounded text-muted-foreground"
+        :aria-label="nav.expand"
+        :aria-expanded="(((mode as string) === 'wide') ? 'true' : 'false')"
+        data-testid="toggle"
+        @click="() => emit('toggle')"
+      >
+        <LucideIcon name="panel-left" :size="20" />
+      </ButtonPlain>
+    </Box>
+    <Box v-if="(((mode as string) === 'twolevel') && ((nav.sub?.length ?? 0) > 0))"
+      :class="cn(
+        'flex w-56 flex-col gap-4 px-4 py-6',
+        (((side as string) === 'end') ? 'border-r border-border' : 'border-l border-border')
+      )"
+      data-testid="subnav"
+    >
+      <Text size="sm" weight="semibold" class="px-4">
+        {{ nav.subTitle }}
+      </Text>
+      <NavBlock :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', nav.subTitle, landmarkLabel)) : nav.subTitle)">
+        <List class="m-0 flex list-none flex-col gap-2 p-0">
+          <ListItem v-for="s in nav.sub" :key="s.id">
+            <MenuEntry
+              :href="s.href"
+              :class="cn(
+                'flex items-center gap-4 rounded py-2 text-sm',
+                (true ? 'px-4' : 'justify-center px-2'),
+                ((s.id === nav.subCurrent) ? 'bg-muted font-medium' : '')
+              )"
+              :current="(s.id === nav.subCurrent)"
+              size="sm"
+              testid="item"
+            >
+              <LucideIcon :name="s.icon" :size="16" />
+              <Inline :class="(true ? '' : 'sr-only')">
+                {{ s.name }}
+              </Inline>
+            </MenuEntry>
+          </ListItem>
+        </List>
+      </NavBlock>
+    </Box>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/shell-topbar.vue b/packages/vue/ui/src/components/shell-topbar.vue
new file mode 100644
index 0000000..46837d3
--- /dev/null
+++ b/packages/vue/ui/src/components/shell-topbar.vue
@@ -0,0 +1,100 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shell-parts.ts -->
+<!--
+  The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar),
+  an optional search field, and the signed-in person.
+-->
+<script lang="ts">
+import type { ShellNav } from "../blocks/dashboard-shell.types";
+
+export type ShellTopbarProps = {
+  nav: ShellNav;
+  brand?: "show" | "hide";
+  links?: "show" | "hide";
+  search?: "show" | "hide";
+  landmarkLabel?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+import MediaFrame from "../components/media-frame.vue";
+import MenuEntry from "../components/menu-entry.vue";
+import NavBlock from "../components/nav-block.vue";
+import SearchPalette from "../components/search-palette.vue";
+import { cn, tpl, uniqLabel } from "../utils";
+
+const {
+  nav,
+  brand = "show",
+  links = "hide",
+  search = "show",
+  landmarkLabel,
+} = defineProps<ShellTopbarProps>();
+</script>
+
+<template>
+  <Block
+    tag="header"
+    class="flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6"
+    data-testid="topbar"
+    :aria-label="landmarkLabel"
+  >
+    <Group v-if="((brand as string) === 'show')" gap="2" align="center" class="shrink-0" data-testid="brand">
+      <LucideIcon name="layers" :size="24" />
+      <Text size="base" weight="bold" :class="(true ? '' : 'sr-only')">
+        {{ nav.brand }}
+      </Text>
+    </Group>
+    <NavBlock v-if="(((links as string) === 'show') && ((nav.links?.length ?? 0) > 0))"
+      :label="(landmarkLabel ? uniqLabel(tpl('{0}, {1}', nav.label, landmarkLabel)) : nav.label)"
+      class="hidden lg:block"
+    >
+      <List class="m-0 flex list-none items-center gap-2 p-0">
+        <ListItem v-for="l in nav.links" :key="l.id">
+          <MenuEntry
+            :href="l.href"
+            :class="cn(
+              'flex items-center gap-4 rounded py-2 text-sm',
+              (true ? 'px-4' : 'justify-center px-2'),
+              ((l.id === nav.current) ? 'bg-muted font-medium' : '')
+            )"
+            :current="(l.id === nav.current)"
+            size="sm"
+            testid="item"
+          >
+            <LucideIcon :name="l.icon" :size="16" />
+            <Inline :class="(true ? '' : 'sr-only')">
+              {{ l.name }}
+            </Inline>
+          </MenuEntry>
+        </ListItem>
+      </List>
+    </NavBlock>
+    <template v-if="((search as string) === 'show')">
+      <Box v-if="((links as string) === 'show')" class="ml-auto hidden w-64 shrink-0 xl:block">
+        <SearchPalette :label="nav.search" :shortcut="nav.shortcut" />
+      </Box>
+      <SearchPalette v-else :label="nav.search" :shortcut="nav.shortcut" />
+    </template>
+    <Group
+      gap="4"
+      align="center"
+      :class="
+        ((links as string) === 'show') && ((search as string) === 'show') ? 'shrink-0'
+        : 'ml-auto shrink-0'
+      "
+      data-testid="user"
+    >
+      <LucideIcon name="bell" :size="20" class="text-muted-foreground" />
+      <MediaFrame :alt="nav.userName" ratio="1/1" class="size-8 shrink-0 rounded-full" />
+    </Group>
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/sidebar-panel.vue b/packages/vue/ui/src/components/sidebar-panel.vue
new file mode 100644
index 0000000..0946ec1
--- /dev/null
+++ b/packages/vue/ui/src/components/sidebar-panel.vue
@@ -0,0 +1,44 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!-- The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer. -->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** SidebarPanel: the classes of each value (shadcn/cva style). */
+export const sidebarPanelVariants = variants({
+  base: "flex shrink-0 flex-col",
+  variants: {
+    variant: {
+      chat: "w-68 gap-2 pt-6 pr-4 pb-6 pl-4",
+      creator: "w-62 justify-between gap-4 p-4",
+    },
+  },
+  defaultVariants: { variant: "chat" },
+});
+
+export type SidebarPanelProps = {
+  variant?: "chat" | "creator";
+  landmarkLabel?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Block from "../primitives/block/block.vue";
+import { cn } from "../utils";
+
+const { variant, landmarkLabel, class: className } = defineProps<SidebarPanelProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Block
+    tag="aside"
+    :class="cn(sidebarPanelVariants({ variant: variant }), className)"
+    data-slot="sidebar-panel"
+    :data-variant="(variant ?? 'chat')"
+    :aria-label="landmarkLabel"
+  >
+    <slot />
+  </Block>
+</template>
diff --git a/packages/vue/ui/src/components/slot-grid.types.ts b/packages/vue/ui/src/components/slot-grid.types.ts
new file mode 100644
index 0000000..b369480
--- /dev/null
+++ b/packages/vue/ui/src/components/slot-grid.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/checkout-parts.ts
+
+export type Day = {
+  id: string;
+  title: string;
+  note: string;
+  slots: string[];
+  closed: string[];
+};
diff --git a/packages/vue/ui/src/components/slot-grid.vue b/packages/vue/ui/src/components/slot-grid.vue
new file mode 100644
index 0000000..7394db3
--- /dev/null
+++ b/packages/vue/ui/src/components/slot-grid.vue
@@ -0,0 +1,73 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/checkout-parts.ts -->
+<!--
+  Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck
+  through. One radio group (`name`) across all days. Static markup.
+-->
+<script lang="ts">
+import type { Day } from "./slot-grid.types";
+
+export type SlotGridProps = {
+  days: Day[];
+  name: string;
+  item?: "card" | "plain";
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import Label from "../primitives/label/label.vue";
+import Radio from "../primitives/radio/radio.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import { cn, tpl } from "../utils";
+
+const { days, name, item = "card" } = defineProps<SlotGridProps>();
+</script>
+
+<template>
+  <Stack gap="4" align="stretch" data-testid="days">
+    <Stack v-for="d in days" :key="d.id"
+      gap="4"
+      :class="
+        (item as string) === 'card' ? 'rounded bg-card inset-ring inset-ring-border p-4'
+        : 'border-b border-border pb-4'
+      "
+      data-testid="day"
+    >
+      <Group gap="4" align="baseline" justify="between" class="flex-wrap">
+        <Text size="sm" weight="semibold">
+          {{ d.title }}
+        </Text>
+        <Text size="xs" class="text-muted-foreground">
+          {{ d.note }}
+        </Text>
+      </Group>
+      <Box class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+        <Label v-for="s in d.slots" :key="s"
+          :class="'flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted ' +
+            'has-checked:inset-ring-foreground'"
+        >
+          <Radio :name="name" :value="tpl('{0} {1}', d.id, s)" />
+          <Inline>
+            {{ s }}
+          </Inline>
+        </Label>
+        <Label v-for="s in d.closed" :key="s"
+          :class="cn(
+            'flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted ' +
+              'has-checked:inset-ring-foreground',
+            'text-muted-foreground line-through'
+          )"
+        >
+          <Radio :name="name" :value="tpl('{0} {1}', d.id, s)" :disabled="true" />
+          <Inline>
+            {{ s }}
+          </Inline>
+        </Label>
+      </Box>
+    </Stack>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/stat-figure.vue b/packages/vue/ui/src/components/stat-figure.vue
new file mode 100644
index 0000000..7c02cd7
--- /dev/null
+++ b/packages/vue/ui/src/components/stat-figure.vue
@@ -0,0 +1,49 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/marketing.ts -->
+<!-- One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon. -->
+<script lang="ts">
+import type { Stat } from "../blocks/stats-band.types";
+
+export type StatFigureProps = {
+  stat: Stat;
+  item?: "plain" | "card" | "icon";
+  align?: "start" | "center";
+};
+</script>
+
+<script setup lang="ts">
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import StatTile from "../components/stat-tile.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const { stat, item = "plain", align = "center" } = defineProps<StatFigureProps>();
+</script>
+
+<template>
+  <StatTile
+    v-if="((item as string) === 'card')"
+    :label="stat.label"
+    :value="stat.value"
+    :icon="stat.icon"
+    :hint="stat.hint"
+  />
+  <Stack v-else
+    gap="6"
+    :align="(((align as string) === 'center') ? 'center' : 'start')"
+    :class="cn((((align as string) === 'center') ? 'text-center' : ''), defaults.stats.column)"
+    data-testid="item"
+  >
+    <LucideIcon v-if="((item as string) === 'icon')" :name="stat.icon" :size="24" />
+    <Stack gap="2" :align="(((align as string) === 'center') ? 'center' : 'start')">
+      <Text size="5xl" weight="medium" :class="cn('flex items-center', defaults.stats.figure)">
+        {{ stat.value }}
+      </Text>
+      <Text size="sm" weight="semibold" class="leading-5 text-muted-foreground">
+        {{ stat.label }}
+      </Text>
+    </Stack>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/stat-tile.vue b/packages/vue/ui/src/components/stat-tile.vue
new file mode 100644
index 0000000..b7beb16
--- /dev/null
+++ b/packages/vue/ui/src/components/stat-tile.vue
@@ -0,0 +1,70 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the
+  tile is a plain figure.
+-->
+<script lang="ts">
+export type StatTileProps = {
+  label: string;
+  value: string | number;
+  icon: string;
+  href?: string;
+  hint?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import IconBadge from "../primitives/iconbadge/icon-badge.vue";
+import Link from "../primitives/link/link.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+import Text from "../primitives/text/text.vue";
+
+const { label, value, icon, href, hint } = defineProps<StatTileProps>();
+</script>
+
+<template>
+  <Box class="min-w-0">
+    <Link v-if="href"
+      :href="href"
+      variant="block"
+      :class="'flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border ' +
+        'hover:bg-muted'"
+    >
+      <Box class="flex items-center justify-between gap-2">
+        <Text class="m-0 text-xs font-bold text-muted-foreground">
+          {{ label }}
+        </Text>
+        <IconBadge size="sm">
+          <LucideIcon :name="icon" :size="16" />
+        </IconBadge>
+      </Box>
+      <Text size="2xl" weight="bold" class="m-0 leading-8">
+        {{ value }}
+      </Text>
+      <Text v-if="hint" class="m-0 text-xs font-medium text-muted-foreground">
+        {{ hint }}
+      </Text>
+    </Link>
+    <Box
+      v-else
+      class="flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border"
+    >
+      <Box class="flex items-center justify-between gap-2">
+        <Text class="m-0 text-xs font-bold text-muted-foreground">
+          {{ label }}
+        </Text>
+        <IconBadge size="sm">
+          <LucideIcon :name="icon" :size="16" />
+        </IconBadge>
+      </Box>
+      <Text size="2xl" weight="bold" class="m-0 leading-8">
+        {{ value }}
+      </Text>
+      <Text v-if="hint" class="m-0 text-xs font-medium text-muted-foreground">
+        {{ hint }}
+      </Text>
+    </Box>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/story-dots.vue b/packages/vue/ui/src/components/story-dots.vue
new file mode 100644
index 0000000..fab1e06
--- /dev/null
+++ b/packages/vue/ui/src/components/story-dots.vue
@@ -0,0 +1,29 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/story-tabs-parts.ts -->
+<!-- One dot per step of StoryTabs; the dot of the active step is filled. -->
+<script lang="ts">
+import type { Milestone } from "../blocks/milestone-timeline.types";
+import type { StoryLabels } from "../blocks/story-tabs.types";
+
+export type StoryDotsProps = {
+  steps: Milestone[];
+  active: string;
+};
+</script>
+
+<script setup lang="ts">
+import Group from "../primitives/group/group.vue";
+import Inline from "../primitives/inline/inline.vue";
+import { cn } from "../utils";
+
+const { steps, active } = defineProps<StoryDotsProps>();
+</script>
+
+<template>
+  <Group gap="2" align="center">
+    <Inline v-for="s in steps" :key="s.id"
+      :class="cn('size-2 rounded-full', ((s.id === active) ? 'bg-primary' : 'bg-border'))"
+      data-testid="story-dot"
+    />
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/story-panel.vue b/packages/vue/ui/src/components/story-panel.vue
new file mode 100644
index 0000000..28f9c99
--- /dev/null
+++ b/packages/vue/ui/src/components/story-panel.vue
@@ -0,0 +1,58 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/story-tabs-parts.ts -->
+<!--
+  The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag
+  in a muted box.
+-->
+<script lang="ts">
+import type { Milestone } from "../blocks/milestone-timeline.types";
+import type { StoryLabels } from "../blocks/story-tabs.types";
+
+export type StoryPanelProps = {
+  s: Milestone;
+  index: number;
+  total: number;
+  labels: StoryLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Group from "../primitives/group/group.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Text from "../primitives/text/text.vue";
+import Title from "../primitives/title/title.vue";
+import { tpl } from "../utils";
+
+const { s, index, total, labels } = defineProps<StoryPanelProps>();
+</script>
+
+<template>
+  <Stack
+    gap="4"
+    align="stretch"
+    class="rounded bg-card inset-ring inset-ring-border p-6"
+    data-testid="story-panel"
+  >
+    <Group gap="2" align="center">
+      <Badge variant="secondary" size="sm">
+        {{ s.date }}
+      </Badge>
+      <Text size="xs" class="text-muted-foreground">
+        {{ tpl(labels.step, ((index + 1) == null ? undefined : String((index + 1))), (total == null ? undefined : String(total))) }}
+      </Text>
+    </Group>
+    <Title :as="3" size="xl" weight="semibold">
+      {{ s.title }}
+    </Title>
+    <Text size="sm" class="text-muted-foreground">
+      {{ s.text }}
+    </Text>
+    <Box class="rounded bg-muted p-4">
+      <Text size="sm" weight="semibold">
+        {{ s.tag }}
+      </Text>
+    </Box>
+  </Stack>
+</template>
diff --git a/packages/vue/ui/src/components/switcher-item.vue b/packages/vue/ui/src/components/switcher-item.vue
new file mode 100644
index 0000000..68b3e83
--- /dev/null
+++ b/packages/vue/ui/src/components/switcher-item.vue
@@ -0,0 +1,73 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!-- One item of a Switcher (default or active). Pass the same size and layout as the Switcher. -->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** SwitcherItem: the classes of each value (shadcn/cva style). */
+export const switcherItemVariants = variants({
+  base:
+    "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-bold text-muted-foreground inset-ring " +
+    "inset-ring-transparent rounded",
+  variants: {
+    size: {
+      sm: "h-6 gap-1 px-3 text-xs",
+      default: "h-8 gap-2 px-4 text-sm",
+      lg: "h-10 gap-2 px-5 text-sm",
+    },
+    state: {
+      default: "",
+      active: "bg-background text-foreground inset-ring-border",
+    },
+    layout: {
+      text: "",
+      icon: "[&>svg]:size-4",
+    },
+  },
+  defaultVariants: { size: "default", state: "default", layout: "text" },
+  compoundVariants: [
+    { layout: "icon", size: "sm", class: "w-6 px-0" },
+    { layout: "icon", size: "default", class: "w-8 px-0" },
+    { layout: "icon", size: "lg", class: "w-10 px-0" },
+  ],
+});
+
+export type SwitcherItemProps = {
+  active?: boolean;
+  size?: "sm" | "default" | "lg";
+  layout?: "text" | "icon";
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import ButtonPlain from "../primitives/button-plain/button-plain.vue";
+import { cn } from "../utils";
+
+const {
+  active = false,
+  size = "default",
+  layout = "text",
+  class: className,
+} = defineProps<SwitcherItemProps>();
+const emit = defineEmits<{ click: [] }>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <ButtonPlain
+    type="button"
+    role="tab"
+    :class="cn(
+      switcherItemVariants({ size: size, layout: layout, state: (active ? 'active' : 'default') }),
+      className
+    )"
+    :aria-selected="active"
+    :tabindex="(active ? 0 : -1)"
+    data-slot="switcher-item"
+    :data-state="(active ? 'active' : 'default')"
+    @click="() => emit('click')"
+  >
+    <slot />
+  </ButtonPlain>
+</template>
diff --git a/packages/vue/ui/src/components/switcher.vue b/packages/vue/ui/src/components/switcher.vue
new file mode 100644
index 0000000..e856c24
--- /dev/null
+++ b/packages/vue/ui/src/components/switcher.vue
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/patterns.ts -->
+<!--
+  A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down
+  through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown
+  (horizontal, activate).
+-->
+<script lang="ts">
+import { variants } from "../utils";
+
+/** Switcher: the classes of each value (shadcn/cva style). */
+export const switcherVariants = variants({
+  base: "inline-flex max-w-full items-center gap-1 overflow-x-auto bg-muted inset-ring inset-ring-border rounded",
+  variants: {
+    size: {
+      sm: "h-8 p-1",
+      default: "h-10 p-1",
+      lg: "h-12 p-1",
+    },
+    layout: {
+      text: "",
+      icon: "gap-0",
+    },
+  },
+  defaultVariants: { size: "default", layout: "text" },
+});
+
+export type SwitcherProps = {
+  size?: "sm" | "default" | "lg";
+  layout?: "text" | "icon";
+  label?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import { cn } from "../utils";
+
+const { size = "default", layout = "text", label, class: className } = defineProps<SwitcherProps>();
+defineSlots<{ default?(): unknown }>();
+</script>
+
+<template>
+  <Box
+    :class="cn(switcherVariants({ size: size, layout: layout }), className)"
+    role="tablist"
+    :aria-label="label"
+    data-slot="switcher"
+  >
+    <slot />
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/table-toolbar.vue b/packages/vue/ui/src/components/table-toolbar.vue
new file mode 100644
index 0000000..a0b6f65
--- /dev/null
+++ b/packages/vue/ui/src/components/table-toolbar.vue
@@ -0,0 +1,37 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  The toolbar above a table: search and filter controls on the left (children), the actions on the right
+  (`actions`). One tab stop group (role toolbar).
+-->
+<script lang="ts">
+export type TableToolbarProps = {
+  label: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Inline from "../primitives/inline/inline.vue";
+import { cn } from "../utils";
+
+const { label, class: className } = defineProps<TableToolbarProps>();
+defineSlots<{ default?(): unknown, actions?(): unknown }>();
+</script>
+
+<template>
+  <Box
+    :class="cn('flex flex-wrap items-center justify-between gap-2', className)"
+    role="toolbar"
+    :aria-label="label"
+    data-slot="table-toolbar"
+  >
+    <Inline class="flex min-w-0 flex-wrap items-center gap-2">
+      <slot />
+    </Inline>
+    <Inline class="flex flex-wrap items-center gap-2">
+      <slot name="actions" />
+    </Inline>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/timeline.types.ts b/packages/vue/ui/src/components/timeline.types.ts
new file mode 100644
index 0000000..9474daa
--- /dev/null
+++ b/packages/vue/ui/src/components/timeline.types.ts
@@ -0,0 +1,10 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/parts.ts
+
+export type TimelineItem = {
+  id: string;
+  title: string;
+  text?: string;
+  time: string;
+  tone?: string;
+};
diff --git a/packages/vue/ui/src/components/timeline.vue b/packages/vue/ui/src/components/timeline.vue
new file mode 100644
index 0000000..6c4c67f
--- /dev/null
+++ b/packages/vue/ui/src/components/timeline.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/parts.ts -->
+<!--
+  A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time.
+  Newest first or oldest first is the caller's order.
+-->
+<script lang="ts">
+import type { TimelineItem } from "./timeline.types";
+
+export type TimelineProps = {
+  items: TimelineItem[];
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import Box from "../primitives/box/box.vue";
+import Inline from "../primitives/inline/inline.vue";
+import List from "../primitives/list/list.vue";
+import ListItem from "../primitives/list/list-item.vue";
+import Text from "../primitives/text/text.vue";
+import { at, cn } from "../utils";
+
+const TONE_DOT: Record<string, string> = {
+  "gray": "bg-muted-foreground",
+  "green": "bg-emerald-500",
+  "blue": "bg-blue-500",
+  "amber": "bg-amber-500",
+  "red": "bg-red-500",
+};
+const { items, class: className } = defineProps<TimelineProps>();
+</script>
+
+<template>
+  <Box :class="cn('min-w-0', className)" data-slot="timeline">
+    <List class="m-0 flex list-none flex-col p-0">
+      <ListItem
+        v-for="(item, i) in items"
+        :key="item.id"
+        class="relative flex min-w-0 gap-4 pb-4 last:pb-0"
+        :data-event="item.id"
+      >
+        <Box class="relative flex w-2 shrink-0 justify-center">
+          <Inline v-if="(i < ((items?.length ?? 0) - 1))" class="absolute top-4 -bottom-0 w-px bg-border" />
+          <Inline :class="cn('mt-2 size-2 rounded-full', at(TONE_DOT, (item.tone ?? 'gray')))" />
+        </Box>
+        <Box class="flex min-w-0 flex-1 flex-col gap-0">
+          <Box class="flex flex-wrap items-baseline justify-between gap-x-4">
+            <Text class="m-0 text-sm font-bold text-foreground">
+              {{ item.title }}
+            </Text>
+            <Text class="m-0 shrink-0 text-xs font-medium text-muted-foreground">
+              {{ item.time }}
+            </Text>
+          </Box>
+          <Text v-if="item.text" class="m-0 text-xs font-medium text-muted-foreground">
+            {{ item.text }}
+          </Text>
+        </Box>
+      </ListItem>
+    </List>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/components/topic-chips.types.ts b/packages/vue/ui/src/components/topic-chips.types.ts
new file mode 100644
index 0000000..9275c96
--- /dev/null
+++ b/packages/vue/ui/src/components/topic-chips.types.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/components/hero-components.ts
+
+export type Topic = {
+  id: string;
+  name: string;
+  icon: string;
+  href?: string;
+};
diff --git a/packages/vue/ui/src/components/topic-chips.vue b/packages/vue/ui/src/components/topic-chips.vue
new file mode 100644
index 0000000..b33d21e
--- /dev/null
+++ b/packages/vue/ui/src/components/topic-chips.vue
@@ -0,0 +1,42 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!--
+  A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band
+  with an icon per topic; default: outlined.
+-->
+<script lang="ts">
+import type { Topic } from "./topic-chips.types";
+
+export type TopicChipsProps = {
+  topics: Topic[];
+  tone?: "default" | "inverse";
+};
+</script>
+
+<script setup lang="ts">
+import Button from "../primitives/button/button.vue";
+import Group from "../primitives/group/group.vue";
+import LucideIcon from "../primitives/lucide-icon/lucide-icon.vue";
+
+const { topics, tone = "default" } = defineProps<TopicChipsProps>();
+</script>
+
+<template>
+  <Group gap="2" align="center" justify="center" class="flex-wrap" data-testid="hero-topics">
+    <template v-for="topic in topics" :key="topic.id">
+      <Button v-if="((tone as string) === 'inverse')"
+        :href="topic.href"
+        variant="ghost"
+        size="sm"
+        class="gap-2 text-background inset-ring-background/30 hover:bg-background/10"
+        data-testid="hero-topic"
+      >
+        <LucideIcon v-if="topic.icon" :name="topic.icon" :size="16" />
+        {{ topic.name }}
+      </Button>
+      <Button v-else :href="topic.href" variant="outline" size="sm" data-testid="hero-topic">
+        {{ topic.name }}
+      </Button>
+    </template>
+  </Group>
+</template>
diff --git a/packages/vue/ui/src/components/weighted-title.vue b/packages/vue/ui/src/components/weighted-title.vue
new file mode 100644
index 0000000..7935474
--- /dev/null
+++ b/packages/vue/ui/src/components/weighted-title.vue
@@ -0,0 +1,37 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/hero-components.ts -->
+<!-- A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text. -->
+<script lang="ts">
+export type WeightedTitleProps = {
+  id: string;
+  title: string;
+  weights?: readonly string[];
+  level?: 1 | 2;
+};
+</script>
+
+<script setup lang="ts">
+import Inline from "../primitives/inline/inline.vue";
+import Title from "../primitives/title/title.vue";
+import { defaults } from "../presets/defaults";
+import { cn } from "../utils";
+
+const { id, title, weights, level = 1 } = defineProps<WeightedTitleProps>();
+</script>
+
+<template>
+  <Title
+    :as="level"
+    size="5xl"
+    weight="semibold"
+    :class="cn('text-center tracking-tight text-background', defaults.hero.title)"
+    :id="id"
+  >
+    <template v-for="(word, i) in (title ?? '').split(' ')" :key="i">
+      <Inline :class="weights?.[i]">
+        {{ word }}
+      </Inline>
+      {{ " " }}
+    </template>
+  </Title>
+</template>
diff --git a/packages/vue/ui/src/components/zone-rows.vue b/packages/vue/ui/src/components/zone-rows.vue
new file mode 100644
index 0000000..5257954
--- /dev/null
+++ b/packages/vue/ui/src/components/zone-rows.vue
@@ -0,0 +1,94 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/screens/src/authoring/components/shop-parts.ts -->
+<!--
+  The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the
+  minimum order, the time and an express badge.
+-->
+<script lang="ts">
+import type { Zone, ZoneLabels } from "../blocks/zone-table.types";
+
+export type ZoneRowsProps = {
+  zones: Zone[];
+  labels: ZoneLabels;
+};
+</script>
+
+<script setup lang="ts">
+import Badge from "../primitives/badge/badge.vue";
+import Box from "../primitives/box/box.vue";
+import Stack from "../primitives/stack/stack.vue";
+import Table from "../primitives/table/table.vue";
+import TableBody from "../primitives/table/table-body.vue";
+import TableCaption from "../primitives/table/table-caption.vue";
+import TableCell from "../primitives/table/table-cell.vue";
+import TableHead from "../primitives/table/table-head.vue";
+import TableHeadCell from "../primitives/table/table-head-cell.vue";
+import TableRow from "../primitives/table/table-row.vue";
+import Text from "../primitives/text/text.vue";
+import { fmtMoney } from "../utils";
+
+const { zones, labels } = defineProps<ZoneRowsProps>();
+</script>
+
+<template>
+  <Box class="w-full overflow-x-auto rounded inset-ring inset-ring-border">
+    <Table class="w-full text-left text-sm" data-testid="zone-table">
+      <TableCaption class="sr-only">
+        {{ labels.caption }}
+      </TableCaption>
+      <TableHead class="bg-muted">
+        <TableRow>
+          <TableHeadCell scope="col" class="px-4 py-2">
+            {{ labels.zone }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.price }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.freeFrom }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="hidden py-2 md:table-cell">
+            {{ labels.minOrder }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="py-2">
+            {{ labels.time }}
+          </TableHeadCell>
+          <TableHeadCell scope="col" class="hidden py-2 pr-4 sm:table-cell">
+            {{ labels.express }}
+          </TableHeadCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow v-for="z in zones" :key="z.id" class="border-t border-border" data-testid="item">
+          <TableCell class="px-4 py-4">
+            <Stack gap="0">
+              <Text size="sm" weight="semibold">
+                {{ z.name }}
+              </Text>
+              <Text size="xs" class="text-muted-foreground">
+                {{ z.area }}
+              </Text>
+            </Stack>
+          </TableCell>
+          <TableCell class="font-medium">
+            {{ fmtMoney(z.price, z.currency) }}
+          </TableCell>
+          <TableCell>
+            {{ fmtMoney(z.freeFrom, z.currency) }}
+          </TableCell>
+          <TableCell class="hidden md:table-cell">
+            {{ fmtMoney(z.minOrder, z.currency) }}
+          </TableCell>
+          <TableCell>
+            {{ z.time }}
+          </TableCell>
+          <TableCell class="hidden pr-4 sm:table-cell">
+            <Badge v-if="z.express" variant="secondary" size="default">
+              {{ z.express }}
+            </Badge>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </Box>
+</template>
diff --git a/packages/vue/ui/src/index.ts b/packages/vue/ui/src/index.ts
new file mode 100644
index 0000000..12c2611
--- /dev/null
+++ b/packages/vue/ui/src/index.ts
@@ -0,0 +1,726 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/plan.ts (the barrel lists every spec)
+
+// primitives
+export { default as Alert } from "./primitives/alert/alert.vue";
+export type { AlertProps } from "./primitives/alert/alert.vue";
+export { alertVariants } from "./primitives/alert/alert.vue";
+export { default as Badge } from "./primitives/badge/badge.vue";
+export type { BadgeProps } from "./primitives/badge/badge.vue";
+export { badgeVariants } from "./primitives/badge/badge.vue";
+export { default as Block } from "./primitives/block/block.vue";
+export type { BlockProps } from "./primitives/block/block.vue";
+export { default as Box } from "./primitives/box/box.vue";
+export type { BoxProps } from "./primitives/box/box.vue";
+export { default as Breadcrumb } from "./primitives/breadcrumb/breadcrumb.vue";
+export type { BreadcrumbProps } from "./primitives/breadcrumb/breadcrumb.vue";
+export { default as ButtonPlain } from "./primitives/button-plain/button-plain.vue";
+export type { ButtonPlainProps } from "./primitives/button-plain/button-plain.vue";
+export { default as Button } from "./primitives/button/button.vue";
+export type { ButtonProps } from "./primitives/button/button.vue";
+export { buttonVariants } from "./primitives/button/button.vue";
+export { default as Card } from "./primitives/card/card.vue";
+export type { CardProps } from "./primitives/card/card.vue";
+export { cardVariants } from "./primitives/card/card.vue";
+export { default as CardHeader } from "./primitives/card/card-header.vue";
+export type { CardHeaderProps } from "./primitives/card/card-header.vue";
+export { default as CardTitle } from "./primitives/card/card-title.vue";
+export type { CardTitleProps } from "./primitives/card/card-title.vue";
+export { default as CardDescription } from "./primitives/card/card-description.vue";
+export type { CardDescriptionProps } from "./primitives/card/card-description.vue";
+export { default as CardContent } from "./primitives/card/card-content.vue";
+export type { CardContentProps } from "./primitives/card/card-content.vue";
+export { default as CardFooter } from "./primitives/card/card-footer.vue";
+export type { CardFooterProps } from "./primitives/card/card-footer.vue";
+export { default as Checkbox } from "./primitives/checkbox/checkbox.vue";
+export type { CheckboxProps } from "./primitives/checkbox/checkbox.vue";
+export { checkboxVariants } from "./primitives/checkbox/checkbox.vue";
+export { default as Container } from "./primitives/container/container.vue";
+export type { ContainerProps } from "./primitives/container/container.vue";
+export { default as Fieldset } from "./primitives/form/fieldset.vue";
+export type { FieldsetProps } from "./primitives/form/fieldset.vue";
+export { fieldsetVariants } from "./primitives/form/fieldset.vue";
+export { default as Legend } from "./primitives/form/legend.vue";
+export type { LegendProps } from "./primitives/form/legend.vue";
+export { legendVariants } from "./primitives/form/legend.vue";
+export { default as DataList } from "./primitives/form/data-list.vue";
+export type { DataListProps } from "./primitives/form/data-list.vue";
+export { default as DataOption } from "./primitives/form/data-option.vue";
+export type { DataOptionProps } from "./primitives/form/data-option.vue";
+export { default as Output } from "./primitives/form/output.vue";
+export type { OutputProps } from "./primitives/form/output.vue";
+export { default as Meter } from "./primitives/form/meter.vue";
+export type { MeterProps } from "./primitives/form/meter.vue";
+export { meterVariants } from "./primitives/form/meter.vue";
+export { default as Progress } from "./primitives/form/progress.vue";
+export type { ProgressProps } from "./primitives/form/progress.vue";
+export { progressVariants } from "./primitives/form/progress.vue";
+export { default as Dialog } from "./primitives/dialog/dialog.vue";
+export type { DialogProps } from "./primitives/dialog/dialog.vue";
+export { dialogVariants } from "./primitives/dialog/dialog.vue";
+export { default as Disclosure } from "./primitives/disclosure/disclosure.vue";
+export type { DisclosureProps } from "./primitives/disclosure/disclosure.vue";
+export { disclosureVariants } from "./primitives/disclosure/disclosure.vue";
+export { default as Summary } from "./primitives/disclosure/summary.vue";
+export type { SummaryProps } from "./primitives/disclosure/summary.vue";
+export { summaryVariants } from "./primitives/disclosure/summary.vue";
+export { default as Form } from "./primitives/form/form.vue";
+export type { FormProps } from "./primitives/form/form.vue";
+export { formVariants } from "./primitives/form/form.vue";
+export { default as FormItem } from "./primitives/form/form-item.vue";
+export type { FormItemProps } from "./primitives/form/form-item.vue";
+export { formItemVariants } from "./primitives/form/form-item.vue";
+export { default as FormDescription } from "./primitives/form/form-description.vue";
+export type { FormDescriptionProps } from "./primitives/form/form-description.vue";
+export { formDescriptionVariants } from "./primitives/form/form-description.vue";
+export { default as FormMessage } from "./primitives/form/form-message.vue";
+export type { FormMessageProps } from "./primitives/form/form-message.vue";
+export { formMessageVariants } from "./primitives/form/form-message.vue";
+export { default as Grid } from "./primitives/grid/grid.vue";
+export type { GridProps } from "./primitives/grid/grid.vue";
+export { gridVariants } from "./primitives/grid/grid.vue";
+export { default as GridCol } from "./primitives/grid/grid-col.vue";
+export type { GridColProps } from "./primitives/grid/grid-col.vue";
+export { default as Group } from "./primitives/group/group.vue";
+export type { GroupProps } from "./primitives/group/group.vue";
+export { groupVariants } from "./primitives/group/group.vue";
+export { default as Icon } from "./primitives/icon/icon.vue";
+export type { IconProps } from "./primitives/icon/icon.vue";
+export { iconVariants } from "./primitives/icon/icon.vue";
+export { default as IconBadge } from "./primitives/iconbadge/icon-badge.vue";
+export type { IconBadgeProps } from "./primitives/iconbadge/icon-badge.vue";
+export { iconbadgeVariants } from "./primitives/iconbadge/icon-badge.vue";
+export { default as Image } from "./primitives/image/image.vue";
+export type { ImageProps } from "./primitives/image/image.vue";
+export { imageVariants } from "./primitives/image/image.vue";
+export { default as Picture } from "./primitives/image/picture.vue";
+export type { PictureProps } from "./primitives/image/picture.vue";
+export { default as Source } from "./primitives/image/source.vue";
+export type { SourceProps } from "./primitives/image/source.vue";
+export { default as Inline } from "./primitives/inline/inline.vue";
+export type { InlineProps } from "./primitives/inline/inline.vue";
+export { default as Input } from "./primitives/input/input.vue";
+export type { InputProps } from "./primitives/input/input.vue";
+export { inputVariants } from "./primitives/input/input.vue";
+export { default as Label } from "./primitives/label/label.vue";
+export type { LabelProps } from "./primitives/label/label.vue";
+export { labelVariants } from "./primitives/label/label.vue";
+export { default as Break } from "./primitives/linebreak/break.vue";
+export type { BreakProps } from "./primitives/linebreak/break.vue";
+export { default as LinkPlain } from "./primitives/link-plain/link-plain.vue";
+export type { LinkPlainProps } from "./primitives/link-plain/link-plain.vue";
+export { default as Link } from "./primitives/link/link.vue";
+export type { LinkProps } from "./primitives/link/link.vue";
+export { linkVariants } from "./primitives/link/link.vue";
+export { default as List } from "./primitives/list/list.vue";
+export type { ListProps } from "./primitives/list/list.vue";
+export { default as ListItem } from "./primitives/list/list-item.vue";
+export type { ListItemProps } from "./primitives/list/list-item.vue";
+export { default as LucideIcon } from "./primitives/lucide-icon/lucide-icon.vue";
+export type { LucideIconProps } from "./primitives/lucide-icon/lucide-icon.vue";
+export { default as Radio } from "./primitives/radio/radio.vue";
+export type { RadioProps } from "./primitives/radio/radio.vue";
+export { radioVariants } from "./primitives/radio/radio.vue";
+export { default as Range } from "./primitives/range/range.vue";
+export type { RangeProps } from "./primitives/range/range.vue";
+export { rangeVariants } from "./primitives/range/range.vue";
+export { default as Select } from "./primitives/select/select.vue";
+export type { SelectProps } from "./primitives/select/select.vue";
+export { selectVariants } from "./primitives/select/select.vue";
+export { default as SelectOption } from "./primitives/select/select-option.vue";
+export type { SelectOptionProps } from "./primitives/select/select-option.vue";
+export { default as OptGroup } from "./primitives/select/opt-group.vue";
+export type { OptGroupProps } from "./primitives/select/opt-group.vue";
+export { default as Separator } from "./primitives/separator/separator.vue";
+export type { SeparatorProps } from "./primitives/separator/separator.vue";
+export { separatorVariants } from "./primitives/separator/separator.vue";
+export { default as Sheet } from "./primitives/sheet/sheet.vue";
+export type { SheetProps } from "./primitives/sheet/sheet.vue";
+export { sheetVariants } from "./primitives/sheet/sheet.vue";
+export { default as SheetTrigger } from "./primitives/sheet/sheet-trigger.vue";
+export type { SheetTriggerProps } from "./primitives/sheet/sheet-trigger.vue";
+export { sheettriggerVariants } from "./primitives/sheet/sheet-trigger.vue";
+export { default as SheetClose } from "./primitives/sheet/sheet-close.vue";
+export type { SheetCloseProps } from "./primitives/sheet/sheet-close.vue";
+export { default as Skeleton } from "./primitives/skeleton/skeleton.vue";
+export type { SkeletonProps } from "./primitives/skeleton/skeleton.vue";
+export { skeletonVariants } from "./primitives/skeleton/skeleton.vue";
+export { default as Stack } from "./primitives/stack/stack.vue";
+export type { StackProps } from "./primitives/stack/stack.vue";
+export { stackVariants } from "./primitives/stack/stack.vue";
+export { default as Switch } from "./primitives/switch/switch.vue";
+export type { SwitchProps } from "./primitives/switch/switch.vue";
+export { switchVariants } from "./primitives/switch/switch.vue";
+export { default as Table } from "./primitives/table/table.vue";
+export type { TableProps } from "./primitives/table/table.vue";
+export { default as TableCaption } from "./primitives/table/table-caption.vue";
+export type { TableCaptionProps } from "./primitives/table/table-caption.vue";
+export { default as TableHead } from "./primitives/table/table-head.vue";
+export type { TableHeadProps } from "./primitives/table/table-head.vue";
+export { default as TableBody } from "./primitives/table/table-body.vue";
+export type { TableBodyProps } from "./primitives/table/table-body.vue";
+export { default as TableFoot } from "./primitives/table/table-foot.vue";
+export type { TableFootProps } from "./primitives/table/table-foot.vue";
+export { default as TableRow } from "./primitives/table/table-row.vue";
+export type { TableRowProps } from "./primitives/table/table-row.vue";
+export { default as TableHeadCell } from "./primitives/table/table-head-cell.vue";
+export type { TableHeadCellProps } from "./primitives/table/table-head-cell.vue";
+export { tableHeadCellVariants } from "./primitives/table/table-head-cell.vue";
+export { default as TableCell } from "./primitives/table/table-cell.vue";
+export type { TableCellProps } from "./primitives/table/table-cell.vue";
+export { tableCellVariants } from "./primitives/table/table-cell.vue";
+export { default as TableColGroup } from "./primitives/table/table-col-group.vue";
+export type { TableColGroupProps } from "./primitives/table/table-col-group.vue";
+export { default as TableCol } from "./primitives/table/table-col.vue";
+export type { TableColProps } from "./primitives/table/table-col.vue";
+export { default as Text } from "./primitives/text/text.vue";
+export type { TextProps } from "./primitives/text/text.vue";
+export { textVariants } from "./primitives/text/text.vue";
+export { default as Textarea } from "./primitives/textarea/textarea.vue";
+export type { TextareaProps } from "./primitives/textarea/textarea.vue";
+export { textareaVariants } from "./primitives/textarea/textarea.vue";
+export { default as ThemeToggle } from "./primitives/themetoggle/theme-toggle.vue";
+export type { ThemeToggleProps } from "./primitives/themetoggle/theme-toggle.vue";
+export { themetoggleVariants } from "./primitives/themetoggle/theme-toggle.vue";
+export { default as Title } from "./primitives/title/title.vue";
+export type { TitleProps } from "./primitives/title/title.vue";
+export { titleVariants } from "./primitives/title/title.vue";
+
+// components
+export { default as AppMain } from "./components/app-main.vue";
+export type { AppMainProps } from "./components/app-main.vue";
+export { default as ArticleBlock } from "./components/article-block.vue";
+export type { ArticleBlockProps } from "./components/article-block.vue";
+export { default as AuthForm } from "./components/auth-form.vue";
+export type { AuthFormProps } from "./components/auth-form.vue";
+export { default as CartSummaryCard } from "./components/cart-summary-card.vue";
+export type { CartSummaryCardProps } from "./components/cart-summary-card.vue";
+export type * from "./components/cart-summary-card.types";
+export { default as CartTable } from "./components/cart-table.vue";
+export type { CartTableProps } from "./components/cart-table.vue";
+export { default as CheckoutStep } from "./components/checkout-step.vue";
+export type { CheckoutStepProps } from "./components/checkout-step.vue";
+export { default as CheckoutSubmit } from "./components/checkout-submit.vue";
+export type { CheckoutSubmitProps } from "./components/checkout-submit.vue";
+export { default as CompareMark } from "./components/compare-mark.vue";
+export type { CompareMarkProps } from "./components/compare-mark.vue";
+export { default as CtaActions } from "./components/cta-actions.vue";
+export type { CtaActionsProps } from "./components/cta-actions.vue";
+export type * from "./components/cta-actions.types";
+export { default as CtaProofItems } from "./components/cta-proof-items.vue";
+export type { CtaProofItemsProps } from "./components/cta-proof-items.vue";
+export { default as DrawerLines } from "./components/drawer-lines.vue";
+export type { DrawerLinesProps } from "./components/drawer-lines.vue";
+export { default as FaqCards } from "./components/faq-cards.vue";
+export type { FaqCardsProps } from "./components/faq-cards.vue";
+export { default as FaqDisclosures } from "./components/faq-disclosures.vue";
+export type { FaqDisclosuresProps } from "./components/faq-disclosures.vue";
+export { default as FaqFinder } from "./components/faq-finder.vue";
+export type { FaqFinderProps } from "./components/faq-finder.vue";
+export { default as FaqHelp } from "./components/faq-help.vue";
+export type { FaqHelpProps } from "./components/faq-help.vue";
+export { default as FeatureCards } from "./components/feature-cards.vue";
+export type { FeatureCardsProps } from "./components/feature-cards.vue";
+export { default as FeatureMetricCards } from "./components/feature-metric-cards.vue";
+export type { FeatureMetricCardsProps } from "./components/feature-metric-cards.vue";
+export { default as FeaturePairs } from "./components/feature-pairs.vue";
+export type { FeaturePairsProps } from "./components/feature-pairs.vue";
+export { default as FeatureRows } from "./components/feature-rows.vue";
+export type { FeatureRowsProps } from "./components/feature-rows.vue";
+export { default as FeatureStatRows } from "./components/feature-stat-rows.vue";
+export type { FeatureStatRowsProps } from "./components/feature-stat-rows.vue";
+export { default as FigureBlock } from "./components/figure-block.vue";
+export type { FigureBlockProps } from "./components/figure-block.vue";
+export { default as FooterBrand } from "./components/footer-brand.vue";
+export type { FooterBrandProps } from "./components/footer-brand.vue";
+export { default as FooterCard } from "./components/footer-card.vue";
+export type { FooterCardProps } from "./components/footer-card.vue";
+export { default as FooterChannels } from "./components/footer-channels.vue";
+export type { FooterChannelsProps } from "./components/footer-channels.vue";
+export { default as FooterColumns } from "./components/footer-columns.vue";
+export type { FooterColumnsProps } from "./components/footer-columns.vue";
+export { default as FooterContacts } from "./components/footer-contacts.vue";
+export type { FooterContactsProps } from "./components/footer-contacts.vue";
+export { default as FooterFigures } from "./components/footer-figures.vue";
+export type { FooterFiguresProps } from "./components/footer-figures.vue";
+export { default as FooterGroupCards } from "./components/footer-group-cards.vue";
+export type { FooterGroupCardsProps } from "./components/footer-group-cards.vue";
+export { default as FooterLinkColumns } from "./components/footer-link-columns.vue";
+export type { FooterLinkColumnsProps } from "./components/footer-link-columns.vue";
+export { default as FooterPoints } from "./components/footer-points.vue";
+export type { FooterPointsProps } from "./components/footer-points.vue";
+export { default as FooterSignupCard } from "./components/footer-signup-card.vue";
+export type { FooterSignupCardProps } from "./components/footer-signup-card.vue";
+export { default as FooterSitemap } from "./components/footer-sitemap.vue";
+export type { FooterSitemapProps } from "./components/footer-sitemap.vue";
+export { default as HeroBadge } from "./components/hero-badge.vue";
+export type { HeroBadgeProps } from "./components/hero-badge.vue";
+export { default as HeroHead } from "./components/hero-head.vue";
+export type { HeroHeadProps } from "./components/hero-head.vue";
+export { default as HeroSplitExtras } from "./components/hero-split-extras.vue";
+export type { HeroSplitExtrasProps } from "./components/hero-split-extras.vue";
+export { default as HeroSplitMedia } from "./components/hero-split-media.vue";
+export type { HeroSplitMediaProps } from "./components/hero-split-media.vue";
+export { default as JobCards } from "./components/job-cards.vue";
+export type { JobCardsProps } from "./components/job-cards.vue";
+export { default as LogoSlot } from "./components/logo-slot.vue";
+export type { LogoSlotProps } from "./components/logo-slot.vue";
+export { default as MediaContacts } from "./components/media-contacts.vue";
+export type { MediaContactsProps } from "./components/media-contacts.vue";
+export { default as MediaFigures } from "./components/media-figures.vue";
+export type { MediaFiguresProps } from "./components/media-figures.vue";
+export { default as MediaPosts } from "./components/media-posts.vue";
+export type { MediaPostsProps } from "./components/media-posts.vue";
+export { default as MediaReview } from "./components/media-review.vue";
+export type { MediaReviewProps } from "./components/media-review.vue";
+export { default as MediaSteps } from "./components/media-steps.vue";
+export type { MediaStepsProps } from "./components/media-steps.vue";
+export { default as MediaTopics } from "./components/media-topics.vue";
+export type { MediaTopicsProps } from "./components/media-topics.vue";
+export { default as MemberRow } from "./components/member-row.vue";
+export type { MemberRowProps } from "./components/member-row.vue";
+export { default as MenuEntry } from "./components/menu-entry.vue";
+export type { MenuEntryProps } from "./components/menu-entry.vue";
+export { default as NavActions } from "./components/nav-actions.vue";
+export type { NavActionsProps } from "./components/nav-actions.vue";
+export { default as NavBarMenu } from "./components/nav-bar-menu.vue";
+export type { NavBarMenuProps } from "./components/nav-bar-menu.vue";
+export { default as NavBlock } from "./components/nav-block.vue";
+export type { NavBlockProps } from "./components/nav-block.vue";
+export { default as NavLinks } from "./components/nav-links.vue";
+export type { NavLinksProps } from "./components/nav-links.vue";
+export { default as NumberField } from "./components/number-field.vue";
+export type { NumberFieldProps } from "./components/number-field.vue";
+export { default as OfferMedia } from "./components/offer-media.vue";
+export type { OfferMediaProps } from "./components/offer-media.vue";
+export { default as OrderRows } from "./components/order-rows.vue";
+export type { OrderRowsProps } from "./components/order-rows.vue";
+export { default as OverMedia } from "./components/over-media.vue";
+export type { OverMediaProps } from "./components/over-media.vue";
+export { default as PageAside } from "./components/page-aside.vue";
+export type { PageAsideProps } from "./components/page-aside.vue";
+export { default as PageCrumbs } from "./components/page-crumbs.vue";
+export type { PageCrumbsProps } from "./components/page-crumbs.vue";
+export { default as PaymentOptions } from "./components/payment-options.vue";
+export type { PaymentOptionsProps } from "./components/payment-options.vue";
+export type * from "./components/payment-options.types";
+export { default as PostActions } from "./components/post-actions.vue";
+export type { PostActionsProps } from "./components/post-actions.vue";
+export { default as PostAuthor } from "./components/post-author.vue";
+export type { PostAuthorProps } from "./components/post-author.vue";
+export { default as PostFeature } from "./components/post-feature.vue";
+export type { PostFeatureProps } from "./components/post-feature.vue";
+export { default as PostMiniCard } from "./components/post-mini-card.vue";
+export type { PostMiniCardProps } from "./components/post-mini-card.vue";
+export { default as PostOutline } from "./components/post-outline.vue";
+export type { PostOutlineProps } from "./components/post-outline.vue";
+export { default as PostOverlayCard } from "./components/post-overlay-card.vue";
+export type { PostOverlayCardProps } from "./components/post-overlay-card.vue";
+export { default as PostStats } from "./components/post-stats.vue";
+export type { PostStatsProps } from "./components/post-stats.vue";
+export { default as PostTags } from "./components/post-tags.vue";
+export type { PostTagsProps } from "./components/post-tags.vue";
+export { default as ProductGallery } from "./components/product-gallery.vue";
+export type { ProductGalleryProps } from "./components/product-gallery.vue";
+export { default as ProductPrice } from "./components/product-price.vue";
+export type { ProductPriceProps } from "./components/product-price.vue";
+export { default as ProjectTiles } from "./components/project-tiles.vue";
+export type { ProjectTilesProps } from "./components/project-tiles.vue";
+export { default as PromptComposer } from "./components/prompt-composer.vue";
+export type { PromptComposerProps } from "./components/prompt-composer.vue";
+export { default as QuoteCard } from "./components/quote-card.vue";
+export type { QuoteCardProps } from "./components/quote-card.vue";
+export { default as QuoteFigures } from "./components/quote-figures.vue";
+export type { QuoteFiguresProps } from "./components/quote-figures.vue";
+export { default as QuoteLogoTiles } from "./components/quote-logo-tiles.vue";
+export type { QuoteLogoTilesProps } from "./components/quote-logo-tiles.vue";
+export { default as QuoteProof } from "./components/quote-proof.vue";
+export type { QuoteProofProps } from "./components/quote-proof.vue";
+export { default as QuoteRatingPanel } from "./components/quote-rating-panel.vue";
+export type { QuoteRatingPanelProps } from "./components/quote-rating-panel.vue";
+export { default as QuoteSlot } from "./components/quote-slot.vue";
+export type { QuoteSlotProps } from "./components/quote-slot.vue";
+export { default as SearchPalette } from "./components/search-palette.vue";
+export type { SearchPaletteProps } from "./components/search-palette.vue";
+export { default as ShellContent } from "./components/shell-content.vue";
+export type { ShellContentProps } from "./components/shell-content.vue";
+export { default as ShellFooter } from "./components/shell-footer.vue";
+export type { ShellFooterProps } from "./components/shell-footer.vue";
+export { default as ShellSidebar } from "./components/shell-sidebar.vue";
+export type { ShellSidebarProps } from "./components/shell-sidebar.vue";
+export { default as ShellTopbar } from "./components/shell-topbar.vue";
+export type { ShellTopbarProps } from "./components/shell-topbar.vue";
+export { default as SlotGrid } from "./components/slot-grid.vue";
+export type { SlotGridProps } from "./components/slot-grid.vue";
+export type * from "./components/slot-grid.types";
+export { default as StatFigure } from "./components/stat-figure.vue";
+export type { StatFigureProps } from "./components/stat-figure.vue";
+export { default as StoryDots } from "./components/story-dots.vue";
+export type { StoryDotsProps } from "./components/story-dots.vue";
+export { default as StoryPanel } from "./components/story-panel.vue";
+export type { StoryPanelProps } from "./components/story-panel.vue";
+export { default as TopicChips } from "./components/topic-chips.vue";
+export type { TopicChipsProps } from "./components/topic-chips.vue";
+export type * from "./components/topic-chips.types";
+export { default as WeightedTitle } from "./components/weighted-title.vue";
+export type { WeightedTitleProps } from "./components/weighted-title.vue";
+export { default as ZoneRows } from "./components/zone-rows.vue";
+export type { ZoneRowsProps } from "./components/zone-rows.vue";
+export { default as Avatar } from "./components/avatar.vue";
+export type { AvatarProps } from "./components/avatar.vue";
+export { default as BadgeSquare } from "./components/badge-square.vue";
+export type { BadgeSquareProps } from "./components/badge-square.vue";
+export { default as BarChart } from "./components/bar-chart.vue";
+export type { BarChartProps } from "./components/bar-chart.vue";
+export type * from "./components/bar-chart.types";
+export { default as BulkBar } from "./components/bulk-bar.vue";
+export type { BulkBarProps } from "./components/bulk-bar.vue";
+export { default as EmptyState } from "./components/empty-state.vue";
+export type { EmptyStateProps } from "./components/empty-state.vue";
+export { default as Field } from "./components/field.vue";
+export type { FieldProps } from "./components/field.vue";
+export { default as LogoSidebar } from "./components/logo-sidebar.vue";
+export type { LogoSidebarProps } from "./components/logo-sidebar.vue";
+export { default as MeterRow } from "./components/meter-row.vue";
+export type { MeterRowProps } from "./components/meter-row.vue";
+export { default as Notice } from "./components/notice.vue";
+export type { NoticeProps } from "./components/notice.vue";
+export { default as PageHeader } from "./components/page-header.vue";
+export type { PageHeaderProps } from "./components/page-header.vue";
+export { default as Pager } from "./components/pager.vue";
+export type { PagerProps } from "./components/pager.vue";
+export { default as Panel } from "./components/panel.vue";
+export type { PanelProps } from "./components/panel.vue";
+export { default as Pill } from "./components/pill.vue";
+export type { PillProps } from "./components/pill.vue";
+export { default as RangeField } from "./components/range-field.vue";
+export type { RangeFieldProps } from "./components/range-field.vue";
+export { default as Rating } from "./components/rating.vue";
+export type { RatingProps } from "./components/rating.vue";
+export { default as Region } from "./components/region.vue";
+export type { RegionProps } from "./components/region.vue";
+export { default as SearchField } from "./components/search-field.vue";
+export type { SearchFieldProps } from "./components/search-field.vue";
+export { default as StatTile } from "./components/stat-tile.vue";
+export type { StatTileProps } from "./components/stat-tile.vue";
+export { default as TableToolbar } from "./components/table-toolbar.vue";
+export type { TableToolbarProps } from "./components/table-toolbar.vue";
+export { default as Timeline } from "./components/timeline.vue";
+export type { TimelineProps } from "./components/timeline.vue";
+export type * from "./components/timeline.types";
+export { default as ActionGroup } from "./components/action-group.vue";
+export type { ActionGroupProps } from "./components/action-group.vue";
+export { default as Backdrop } from "./components/backdrop.vue";
+export type { BackdropProps } from "./components/backdrop.vue";
+export { default as CodeWindow } from "./components/code-window.vue";
+export type { CodeWindowProps } from "./components/code-window.vue";
+export type * from "./components/code-window.types";
+export { default as DropdownItem } from "./components/dropdown-item.vue";
+export type { DropdownItemProps } from "./components/dropdown-item.vue";
+export { default as EditorTab } from "./components/editor-tab.vue";
+export type { EditorTabProps } from "./components/editor-tab.vue";
+export { default as FileTreeItem } from "./components/file-tree-item.vue";
+export type { FileTreeItemProps } from "./components/file-tree-item.vue";
+export { default as FileTree } from "./components/file-tree.vue";
+export type { FileTreeProps } from "./components/file-tree.vue";
+export { default as IconTab } from "./components/icon-tab.vue";
+export type { IconTabProps } from "./components/icon-tab.vue";
+export { default as IconTabs } from "./components/icon-tabs.vue";
+export type { IconTabsProps } from "./components/icon-tabs.vue";
+export { default as MediaFrame } from "./components/media-frame.vue";
+export type { MediaFrameProps } from "./components/media-frame.vue";
+export { default as NavItemRow } from "./components/nav-item-row.vue";
+export type { NavItemRowProps } from "./components/nav-item-row.vue";
+export { default as NavItem } from "./components/nav-item.vue";
+export type { NavItemProps } from "./components/nav-item.vue";
+export { default as SectionBox } from "./components/section-box.vue";
+export type { SectionBoxProps } from "./components/section-box.vue";
+export { default as SectionColumn } from "./components/section-column.vue";
+export type { SectionColumnProps } from "./components/section-column.vue";
+export { default as SectionFrame } from "./components/section-frame.vue";
+export type { SectionFrameProps } from "./components/section-frame.vue";
+export type * from "./components/section-frame.types";
+export { default as SectionHead } from "./components/section-head.vue";
+export type { SectionHeadProps } from "./components/section-head.vue";
+export { default as SectionHeader } from "./components/section-header.vue";
+export type { SectionHeaderProps } from "./components/section-header.vue";
+export { default as SidebarPanel } from "./components/sidebar-panel.vue";
+export type { SidebarPanelProps } from "./components/sidebar-panel.vue";
+export { default as SwitcherItem } from "./components/switcher-item.vue";
+export type { SwitcherItemProps } from "./components/switcher-item.vue";
+export { default as Switcher } from "./components/switcher.vue";
+export type { SwitcherProps } from "./components/switcher.vue";
+
+// blocks
+export { default as AboutCompany } from "./blocks/about-company.vue";
+export type { AboutCompanyProps } from "./blocks/about-company.vue";
+export { default as AboutMe } from "./blocks/about-me.vue";
+export type { AboutMeProps } from "./blocks/about-me.vue";
+export type * from "./blocks/about-me.types";
+export { default as ActivityFeed } from "./blocks/activity-feed.vue";
+export type { ActivityFeedProps } from "./blocks/activity-feed.vue";
+export type * from "./blocks/activity-feed.types";
+export { default as AnnouncementBar } from "./blocks/announcement-bar.vue";
+export type { AnnouncementBarProps } from "./blocks/announcement-bar.vue";
+export { default as AppShell } from "./blocks/app-shell.vue";
+export type { AppShellProps } from "./blocks/app-shell.vue";
+export type * from "./blocks/app-shell.types";
+export { default as ArticleBody } from "./blocks/article-body.vue";
+export type { ArticleBodyProps } from "./blocks/article-body.vue";
+export type * from "./blocks/article-body.types";
+export { default as AuthCard } from "./blocks/auth-card.vue";
+export type { AuthCardProps } from "./blocks/auth-card.vue";
+export type * from "./blocks/auth-card.types";
+export { default as AuthLayout } from "./blocks/auth-layout.vue";
+export type { AuthLayoutProps } from "./blocks/auth-layout.vue";
+export type * from "./blocks/auth-layout.types";
+export { default as BeforeAfter } from "./blocks/before-after.vue";
+export type { BeforeAfterProps } from "./blocks/before-after.vue";
+export type * from "./blocks/before-after.types";
+export { default as BentoGrid } from "./blocks/bento-grid.vue";
+export type { BentoGridProps } from "./blocks/bento-grid.vue";
+export type * from "./blocks/bento-grid.types";
+export { default as BottomNav } from "./blocks/bottom-nav.vue";
+export type { BottomNavProps } from "./blocks/bottom-nav.vue";
+export { default as CartDrawer } from "./blocks/cart-drawer.vue";
+export type { CartDrawerProps } from "./blocks/cart-drawer.vue";
+export type * from "./blocks/cart-drawer.types";
+export { default as CartList } from "./blocks/cart-list.vue";
+export type { CartListProps } from "./blocks/cart-list.vue";
+export type * from "./blocks/cart-list.types";
+export { default as CategoryNav } from "./blocks/category-nav.vue";
+export type { CategoryNavProps } from "./blocks/category-nav.vue";
+export type * from "./blocks/category-nav.types";
+export { default as ChartPanel } from "./blocks/chart-panel.vue";
+export type { ChartPanelProps } from "./blocks/chart-panel.vue";
+export type * from "./blocks/chart-panel.types";
+export { default as Checklist } from "./blocks/checklist.vue";
+export type { ChecklistProps } from "./blocks/checklist.vue";
+export type * from "./blocks/checklist.types";
+export { default as CheckoutForm } from "./blocks/checkout-form.vue";
+export type { CheckoutFormProps } from "./blocks/checkout-form.vue";
+export type * from "./blocks/checkout-form.types";
+export { default as ComparisonTable } from "./blocks/comparison-table.vue";
+export type { ComparisonTableProps } from "./blocks/comparison-table.vue";
+export type * from "./blocks/comparison-table.types";
+export { default as ContactForm } from "./blocks/contact-form.vue";
+export type { ContactFormProps } from "./blocks/contact-form.vue";
+export type * from "./blocks/contact-form.types";
+export { default as CookieBanner } from "./blocks/cookie-banner.vue";
+export type { CookieBannerProps } from "./blocks/cookie-banner.vue";
+export { default as CreditPacks } from "./blocks/credit-packs.vue";
+export type { CreditPacksProps } from "./blocks/credit-packs.vue";
+export type * from "./blocks/credit-packs.types";
+export { default as CtaBand } from "./blocks/cta-band.vue";
+export type { CtaBandProps } from "./blocks/cta-band.vue";
+export type * from "./blocks/cta-band.types";
+export { default as CtaBanner } from "./blocks/cta-banner.vue";
+export type { CtaBannerProps } from "./blocks/cta-banner.vue";
+export { default as CtaProof } from "./blocks/cta-proof.vue";
+export type { CtaProofProps } from "./blocks/cta-proof.vue";
+export type * from "./blocks/cta-proof.types";
+export { default as DashboardOverview } from "./blocks/dashboard-overview.vue";
+export type { DashboardOverviewProps } from "./blocks/dashboard-overview.vue";
+export type * from "./blocks/dashboard-overview.types";
+export { default as DashboardShell } from "./blocks/dashboard-shell.vue";
+export type { DashboardShellProps } from "./blocks/dashboard-shell.vue";
+export type * from "./blocks/dashboard-shell.types";
+export { default as DeliveryInfo } from "./blocks/delivery-info.vue";
+export type { DeliveryInfoProps } from "./blocks/delivery-info.vue";
+export type * from "./blocks/delivery-info.types";
+export { default as EmptyPanel } from "./blocks/empty-panel.vue";
+export type { EmptyPanelProps } from "./blocks/empty-panel.vue";
+export { default as ErrorPage } from "./blocks/error-page.vue";
+export type { ErrorPageProps } from "./blocks/error-page.vue";
+export type * from "./blocks/error-page.types";
+export { default as FaqList } from "./blocks/faq-list.vue";
+export type { FaqListProps } from "./blocks/faq-list.vue";
+export type * from "./blocks/faq-list.types";
+export { default as FaqSplit } from "./blocks/faq-split.vue";
+export type { FaqSplitProps } from "./blocks/faq-split.vue";
+export type * from "./blocks/faq-split.types";
+export { default as FeatureAccordion } from "./blocks/feature-accordion.vue";
+export type { FeatureAccordionProps } from "./blocks/feature-accordion.vue";
+export { default as FeatureGrid } from "./blocks/feature-grid.vue";
+export type { FeatureGridProps } from "./blocks/feature-grid.vue";
+export type * from "./blocks/feature-grid.types";
+export { default as FeatureShowcase } from "./blocks/feature-showcase.vue";
+export type { FeatureShowcaseProps } from "./blocks/feature-showcase.vue";
+export { default as FeatureSplit } from "./blocks/feature-split.vue";
+export type { FeatureSplitProps } from "./blocks/feature-split.vue";
+export { default as FeatureSticky } from "./blocks/feature-sticky.vue";
+export type { FeatureStickyProps } from "./blocks/feature-sticky.vue";
+export { default as FeatureTabs } from "./blocks/feature-tabs.vue";
+export type { FeatureTabsProps } from "./blocks/feature-tabs.vue";
+export { default as FooterSplit } from "./blocks/footer-split.vue";
+export type { FooterSplitProps } from "./blocks/footer-split.vue";
+export type * from "./blocks/footer-split.types";
+export { default as HeroClassic } from "./blocks/hero-classic.vue";
+export type { HeroClassicProps } from "./blocks/hero-classic.vue";
+export type * from "./blocks/hero-classic.types";
+export { default as HeroPrompt } from "./blocks/hero-prompt.vue";
+export type { HeroPromptProps } from "./blocks/hero-prompt.vue";
+export type * from "./blocks/hero-prompt.types";
+export { default as HeroSplit } from "./blocks/hero-split.vue";
+export type { HeroSplitProps } from "./blocks/hero-split.vue";
+export type * from "./blocks/hero-split.types";
+export { default as IconWall } from "./blocks/icon-wall.vue";
+export type { IconWallProps } from "./blocks/icon-wall.vue";
+export { default as JobBoard } from "./blocks/job-board.vue";
+export type { JobBoardProps } from "./blocks/job-board.vue";
+export type * from "./blocks/job-board.types";
+export { default as KanbanBoard } from "./blocks/kanban-board.vue";
+export type { KanbanBoardProps } from "./blocks/kanban-board.vue";
+export type * from "./blocks/kanban-board.types";
+export { default as LogoCloud } from "./blocks/logo-cloud.vue";
+export type { LogoCloudProps } from "./blocks/logo-cloud.vue";
+export type * from "./blocks/logo-cloud.types";
+export { default as LogoRibbon } from "./blocks/logo-ribbon.vue";
+export type { LogoRibbonProps } from "./blocks/logo-ribbon.vue";
+export { default as MediaList } from "./blocks/media-list.vue";
+export type { MediaListProps } from "./blocks/media-list.vue";
+export type * from "./blocks/media-list.types";
+export { default as MegaMenu } from "./blocks/mega-menu.vue";
+export type { MegaMenuProps } from "./blocks/mega-menu.vue";
+export type * from "./blocks/mega-menu.types";
+export { default as MetricRow } from "./blocks/metric-row.vue";
+export type { MetricRowProps } from "./blocks/metric-row.vue";
+export type * from "./blocks/metric-row.types";
+export { default as MilestoneTimeline } from "./blocks/milestone-timeline.vue";
+export type { MilestoneTimelineProps } from "./blocks/milestone-timeline.vue";
+export type * from "./blocks/milestone-timeline.types";
+export { default as NavBar } from "./blocks/nav-bar.vue";
+export type { NavBarProps } from "./blocks/nav-bar.vue";
+export type * from "./blocks/nav-bar.types";
+export { default as NewsletterForm } from "./blocks/newsletter-form.vue";
+export type { NewsletterFormProps } from "./blocks/newsletter-form.vue";
+export { default as OrderSummary } from "./blocks/order-summary.vue";
+export type { OrderSummaryProps } from "./blocks/order-summary.vue";
+export type * from "./blocks/order-summary.types";
+export { default as OrderTable } from "./blocks/order-table.vue";
+export type { OrderTableProps } from "./blocks/order-table.vue";
+export type * from "./blocks/order-table.types";
+export { default as PageIntro } from "./blocks/page-intro.vue";
+export type { PageIntroProps } from "./blocks/page-intro.vue";
+export { default as PageTrail } from "./blocks/page-trail.vue";
+export type { PageTrailProps } from "./blocks/page-trail.vue";
+export type * from "./blocks/page-trail.types";
+export { default as PhotoGallery } from "./blocks/photo-gallery.vue";
+export type { PhotoGalleryProps } from "./blocks/photo-gallery.vue";
+export type * from "./blocks/photo-gallery.types";
+export { default as PostCard } from "./blocks/post-card.vue";
+export type { PostCardProps } from "./blocks/post-card.vue";
+export type * from "./blocks/post-card.types";
+export { default as PostGrid } from "./blocks/post-grid.vue";
+export type { PostGridProps } from "./blocks/post-grid.vue";
+export type * from "./blocks/post-grid.types";
+export { default as PostHeader } from "./blocks/post-header.vue";
+export type { PostHeaderProps } from "./blocks/post-header.vue";
+export { default as PostShowcase } from "./blocks/post-showcase.vue";
+export type { PostShowcaseProps } from "./blocks/post-showcase.vue";
+export { default as PostSplit } from "./blocks/post-split.vue";
+export type { PostSplitProps } from "./blocks/post-split.vue";
+export type * from "./blocks/post-split.types";
+export { default as PricingCard } from "./blocks/pricing-card.vue";
+export type { PricingCardProps } from "./blocks/pricing-card.vue";
+export type * from "./blocks/pricing-card.types";
+export { default as PricingTiers } from "./blocks/pricing-tiers.vue";
+export type { PricingTiersProps } from "./blocks/pricing-tiers.vue";
+export type * from "./blocks/pricing-tiers.types";
+export { default as ProductCard } from "./blocks/product-card.vue";
+export type { ProductCardProps } from "./blocks/product-card.vue";
+export type * from "./blocks/product-card.types";
+export { default as ProductDetail } from "./blocks/product-detail.vue";
+export type { ProductDetailProps } from "./blocks/product-detail.vue";
+export type * from "./blocks/product-detail.types";
+export { default as ProductGrid } from "./blocks/product-grid.vue";
+export type { ProductGridProps } from "./blocks/product-grid.vue";
+export { default as ProductInfo } from "./blocks/product-info.vue";
+export type { ProductInfoProps } from "./blocks/product-info.vue";
+export type * from "./blocks/product-info.types";
+export { default as ProfileForm } from "./blocks/profile-form.vue";
+export type { ProfileFormProps } from "./blocks/profile-form.vue";
+export type * from "./blocks/profile-form.types";
+export { default as ProjectGrid } from "./blocks/project-grid.vue";
+export type { ProjectGridProps } from "./blocks/project-grid.vue";
+export type * from "./blocks/project-grid.types";
+export { default as ProofBand } from "./blocks/proof-band.vue";
+export type { ProofBandProps } from "./blocks/proof-band.vue";
+export { default as QuoteSplit } from "./blocks/quote-split.vue";
+export type { QuoteSplitProps } from "./blocks/quote-split.vue";
+export type * from "./blocks/quote-split.types";
+export { default as ReviewList } from "./blocks/review-list.vue";
+export type { ReviewListProps } from "./blocks/review-list.vue";
+export type * from "./blocks/review-list.types";
+export { default as ShoppingCart } from "./blocks/shopping-cart.vue";
+export type { ShoppingCartProps } from "./blocks/shopping-cart.vue";
+export type * from "./blocks/shopping-cart.types";
+export { default as SidebarNav } from "./blocks/sidebar-nav.vue";
+export type { SidebarNavProps } from "./blocks/sidebar-nav.vue";
+export { default as SignupWizard } from "./blocks/signup-wizard.vue";
+export type { SignupWizardProps } from "./blocks/signup-wizard.vue";
+export type * from "./blocks/signup-wizard.types";
+export { default as SiteFooter } from "./blocks/site-footer.vue";
+export type { SiteFooterProps } from "./blocks/site-footer.vue";
+export type * from "./blocks/site-footer.types";
+export { default as SiteHeader } from "./blocks/site-header.vue";
+export type { SiteHeaderProps } from "./blocks/site-header.vue";
+export type * from "./blocks/site-header.types";
+export { default as SitemapFooter } from "./blocks/sitemap-footer.vue";
+export type { SitemapFooterProps } from "./blocks/sitemap-footer.vue";
+export type * from "./blocks/sitemap-footer.types";
+export { default as SkeletonLayout } from "./blocks/skeleton-layout.vue";
+export type { SkeletonLayoutProps } from "./blocks/skeleton-layout.vue";
+export type * from "./blocks/skeleton-layout.types";
+export { default as SlotBoard } from "./blocks/slot-board.vue";
+export type { SlotBoardProps } from "./blocks/slot-board.vue";
+export type * from "./blocks/slot-board.types";
+export { default as StatsBand } from "./blocks/stats-band.vue";
+export type { StatsBandProps } from "./blocks/stats-band.vue";
+export type * from "./blocks/stats-band.types";
+export { default as Stepper } from "./blocks/stepper.vue";
+export type { StepperProps } from "./blocks/stepper.vue";
+export { default as StepsList } from "./blocks/steps-list.vue";
+export type { StepsListProps } from "./blocks/steps-list.vue";
+export type * from "./blocks/steps-list.types";
+export { default as StoreHero } from "./blocks/store-hero.vue";
+export type { StoreHeroProps } from "./blocks/store-hero.vue";
+export type * from "./blocks/store-hero.types";
+export { default as StoreLocations } from "./blocks/store-locations.vue";
+export type { StoreLocationsProps } from "./blocks/store-locations.vue";
+export type * from "./blocks/store-locations.types";
+export { default as StoryTabs } from "./blocks/story-tabs.vue";
+export type { StoryTabsProps } from "./blocks/story-tabs.vue";
+export type * from "./blocks/story-tabs.types";
+export { default as SupportChannels } from "./blocks/support-channels.vue";
+export type { SupportChannelsProps } from "./blocks/support-channels.vue";
+export { default as TeamGrid } from "./blocks/team-grid.vue";
+export type { TeamGridProps } from "./blocks/team-grid.vue";
+export type * from "./blocks/team-grid.types";
+export { default as TemplateGrid } from "./blocks/template-grid.vue";
+export type { TemplateGridProps } from "./blocks/template-grid.vue";
+export type * from "./blocks/template-grid.types";
+export { default as TestimonialGrid } from "./blocks/testimonial-grid.vue";
+export type { TestimonialGridProps } from "./blocks/testimonial-grid.vue";
+export type * from "./blocks/testimonial-grid.types";
+export { default as TourCallout } from "./blocks/tour-callout.vue";
+export type { TourCalloutProps } from "./blocks/tour-callout.vue";
+export { default as UsageCalculator } from "./blocks/usage-calculator.vue";
+export type { UsageCalculatorProps } from "./blocks/usage-calculator.vue";
+export type * from "./blocks/usage-calculator.types";
+export { default as UspStrip } from "./blocks/usp-strip.vue";
+export type { UspStripProps } from "./blocks/usp-strip.vue";
+export { default as VideoGrid } from "./blocks/video-grid.vue";
+export type { VideoGridProps } from "./blocks/video-grid.vue";
+export { default as VideoModal } from "./blocks/video-modal.vue";
+export type { VideoModalProps } from "./blocks/video-modal.vue";
+export type * from "./blocks/video-modal.types";
+export { default as ZoneTable } from "./blocks/zone-table.vue";
+export type { ZoneTableProps } from "./blocks/zone-table.vue";
+export type * from "./blocks/zone-table.types";
+
+// presets
+export { defaults } from "./presets/defaults";
+
+// utils
+export { cn, variants, tpl, fmtNumber, fmtMoney, at, pageWindow, fitCols, uniqLabel } from "./utils";
diff --git a/packages/vue/ui/src/presets/defaults.ts b/packages/vue/ui/src/presets/defaults.ts
new file mode 100644
index 0000000..995f05b
--- /dev/null
+++ b/packages/vue/ui/src/presets/defaults.ts
@@ -0,0 +1,76 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/screens/src/authoring/presets/defaults.ts
+
+/**
+ * Default layout preset: the sizes of the landing blocks as Tailwind classes.
+ * Blocks combine these with token classes; swap the preset to resize every block at once.
+ *
+ * Numbers: ui8kit default sizes (Tailwind scale, no arbitrary values)
+ */
+export const defaults = {
+  /** small type steps for chips, badges and links */
+  text: {
+    tiny: "text-xs",
+    small: "text-sm",
+  },
+  hero: {
+    /** the inverse band: tall section, large bottom radius */
+    band: "min-h-160 rounded",
+    container: "max-w-7xl",
+    head: "gap-12",
+    badge: "w-48",
+    /** display title */
+    title: "text-5xl leading-tight",
+    /** one font-weight class per title word */
+    titleWeights: ["font-normal", "font-semibold", "font-normal", "font-semibold"],
+    column: "max-w-xl gap-16",
+    /** the prompt box */
+    composer: "h-40 max-w-xl rounded",
+    attach: "w-24",
+    promptLine: "h-10",
+    model: "w-24",
+  },
+  section: {
+    landing: "max-w-6xl",
+  },
+  media: {
+    rounded: "rounded",
+  },
+  templates: {
+    card: "h-60 w-64",
+    image: "h-40 w-58 rounded",
+    footer: "h-12 min-h-12",
+  },
+  stats: {
+    column: "min-h-28",
+    figure: "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18",
+    panel: "gap-24 rounded py-20",
+  },
+  features: {
+    cells: "rounded",
+  },
+  news: {
+    card: "h-56 w-64",
+    cover: "h-40 w-64 rounded",
+    title: "top-16",
+    strip: "h-12 min-h-12",
+  },
+  cta: {
+    panel: "rounded py-20",
+    title: "max-w-md",
+    text: "max-w-2xl",
+    button: "w-40",
+  },
+  logos: {
+    /** one centered row of logo slots */
+    row: "h-28 max-w-4xl gap-12 pb-8",
+    slot: "size-20",
+    /** the Lucide glyph inside a slot: half the slot */
+    glyph: 40,
+  },
+  footer: {
+    card: "h-72 gap-12 rounded",
+    brand: "w-48",
+    groups: "gap-x-16",
+  },
+} as const;
diff --git a/packages/vue/ui/src/primitives/alert/alert.vue b/packages/vue/ui/src/primitives/alert/alert.vue
new file mode 100644
index 0000000..6a2b6f0
--- /dev/null
+++ b/packages/vue/ui/src/primitives/alert/alert.vue
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/alert.json -->
+<!--
+  Alert renders a div with alert or status semantics.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Alert: the classes of each value of each prop (shadcn/cva style). */
+export const alertVariants = variants({
+  base: "flex min-h-8 items-center gap-2 px-2 text-xs font-semibold inset-ring rounded",
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground inset-ring-border",
+      destructive: "bg-muted text-destructive inset-ring-destructive",
+      success: "bg-muted text-foreground inset-ring-border",
+      warning: "bg-muted text-foreground inset-ring-border",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export type AlertVariant = VariantKey<typeof alertVariants, "variant">;
+
+export type AlertProps = {
+  variant?: AlertVariant;
+  role?: "status" | "alert";
+  ariaLive?: "off" | "polite" | "assertive";
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { defaultIfEmpty, oneOfOr } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, role, ariaLive, class: className } = defineProps<AlertProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(alertVariants({ variant }), className));
+</script>
+
+<template>
+  <div
+    :class="cls || undefined"
+    data-slot="alert"
+    :role="oneOfOr(role, 'status', 'status', 'alert')"
+    :aria-live="defaultIfEmpty(ariaLive, 'polite')"
+    v-bind="attrs"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/badge/badge.vue b/packages/vue/ui/src/primitives/badge/badge.vue
new file mode 100644
index 0000000..efcf149
--- /dev/null
+++ b/packages/vue/ui/src/primitives/badge/badge.vue
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/badge.json -->
+<!--
+  Badge renders label text in a div wrapper.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Badge: the classes of each value of each prop (shadcn/cva style). */
+export const badgeVariants = variants({
+  base: "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+  variants: {
+    size: {
+      sm: "h-5 px-2 text-xs",
+      default: "h-6 px-3 text-xs",
+      lg: "h-8 px-4 text-sm",
+    },
+    variant: {
+      default: "bg-primary text-primary-foreground inset-ring-primary",
+      secondary: "bg-muted text-foreground inset-ring-transparent",
+      outline: "bg-transparent text-foreground inset-ring-border",
+      destructive:
+        "bg-destructive text-white inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 " +
+        "dark:focus-visible:ring-destructive/40",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type BadgeVariant = VariantKey<typeof badgeVariants, "variant">;
+export type BadgeSize = VariantKey<typeof badgeVariants, "size">;
+
+export type BadgeProps = {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, size, class: className } = defineProps<BadgeProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(badgeVariants({ size, variant }), className));
+</script>
+
+<template>
+  <div :class="cls || undefined" data-slot="badge" v-bind="attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/block/block.vue b/packages/vue/ui/src/primitives/block/block.vue
new file mode 100644
index 0000000..df9a175
--- /dev/null
+++ b/packages/vue/ui/src/primitives/block/block.vue
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/block.json -->
+<!--
+  Block renders a resolved landmark element with children.
+-->
+<script lang="ts">
+export type BlockProps = {
+  tag?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { tag, class: className } = defineProps<BlockProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+const resolvedTagValue = computed(() => resolveTag(tag, "div", TagGroup.Layout));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/primitives/box/box.vue b/packages/vue/ui/src/primitives/box/box.vue
new file mode 100644
index 0000000..8ea21b1
--- /dev/null
+++ b/packages/vue/ui/src/primitives/box/box.vue
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/box.json -->
+<!--
+  Box renders a div layout wrapper.
+-->
+<script lang="ts">
+export type BoxProps = {
+  tag?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { tag, class: className } = defineProps<BoxProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+const resolvedTagValue = computed(() => resolveTag(tag, "div", TagGroup.BoxAllowed));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/primitives/breadcrumb/breadcrumb.vue b/packages/vue/ui/src/primitives/breadcrumb/breadcrumb.vue
new file mode 100644
index 0000000..a52fe2a
--- /dev/null
+++ b/packages/vue/ui/src/primitives/breadcrumb/breadcrumb.vue
@@ -0,0 +1,65 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/breadcrumb.json -->
+<!--
+  Breadcrumb renders the full navigation trail.
+-->
+<script lang="ts">
+export type BreadcrumbItem = {
+  label?: string;
+  href?: string;
+  current?: boolean;
+  disabled?: boolean;
+};
+
+export type BreadcrumbProps = {
+  items?: BreadcrumbItem[];
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { isSetStr, orUndef } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { items, class: className } = defineProps<BreadcrumbProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn("text-sm", className));
+</script>
+
+<template>
+  <nav :class="cls || undefined" v-bind="attrs">
+    <ol class="flex flex-wrap items-center gap-2">
+      <li v-for="(item, i) in items ?? []" :key="i" class="inline-flex items-center">
+        <template v-if="(isSetStr(item.href) && !(item.disabled))">
+          <a
+            :href="orUndef(item.href)"
+            :class="cn(
+              'text-sm',
+              (
+                item.current ? 'font-medium'
+                : item.disabled ? 'text-muted-foreground'
+                : 'text-primary underline-offset-4 hover:underline'
+              )
+            )"
+            :aria-current="item.current ? 'page' : undefined"
+          >{{ item.label }}</a>
+        </template>
+        <template v-else>
+          <span
+            :class="cn(
+              'text-sm',
+              (
+                item.current ? 'font-medium'
+                : item.disabled ? 'text-muted-foreground'
+                : 'text-primary underline-offset-4 hover:underline'
+              )
+            )"
+            :aria-current="item.current ? 'page' : undefined"
+          >{{ item.label }}</span>
+        </template>
+      </li>
+    </ol>
+  </nav>
+</template>
diff --git a/packages/vue/ui/src/primitives/button-plain/button-plain.vue b/packages/vue/ui/src/primitives/button-plain/button-plain.vue
new file mode 100644
index 0000000..b83db7b
--- /dev/null
+++ b/packages/vue/ui/src/primitives/button-plain/button-plain.vue
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/button-plain.json -->
+<!--
+  ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it
+  themselves.
+-->
+<script lang="ts">
+export type ButtonPlainProps = {
+  type?: string;
+  disabled?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { oneOfOr } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { type, disabled, class: className } = defineProps<ButtonPlainProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn((disabled ? "pointer-events-none opacity-50" : ""), className));
+</script>
+
+<template>
+  <button
+    :type="oneOfOr(type, 'button', 'submit', 'reset')"
+    :class="cls || undefined"
+    :disabled="disabled || undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/packages/vue/ui/src/primitives/button/button.vue b/packages/vue/ui/src/primitives/button/button.vue
new file mode 100644
index 0000000..fb02db9
--- /dev/null
+++ b/packages/vue/ui/src/primitives/button/button.vue
@@ -0,0 +1,115 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/button.json -->
+<!--
+  Button renders a button element, or an anchor when Href is set.
+  Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Button: the classes of each value of each prop (shadcn/cva style). */
+export const buttonVariants = variants({
+  base:
+    "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring transition-colors " +
+    "disabled:pointer-events-none disabled:opacity-50 rounded",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground inset-ring-primary",
+      outline: "bg-card text-foreground inset-ring-border",
+      ghost: "bg-transparent text-foreground inset-ring-transparent",
+      secondary: "bg-secondary text-secondary-foreground inset-ring-border",
+      destructive:
+        "bg-destructive text-white hover:bg-destructive/90 inset-ring-transparent focus-visible:ring-destructive/20 " +
+        "dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      link: "text-foreground inset-ring-transparent underline-offset-4 hover:underline",
+    },
+    size: {
+      sm: "h-8 px-3 text-sm",
+      default: "h-10 px-4 text-sm",
+      lg: "h-12 px-6 text-base",
+    },
+    layout: {
+      default: "",
+      icon: "",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default", layout: "default" },
+  compoundVariants: [
+    { layout: "icon", size: "sm", class: "size-8 p-0 [&>svg]:size-4" },
+    { layout: "icon", size: "default", class: "size-10 p-0 [&>svg]:size-5" },
+    { layout: "icon", size: "lg", class: "size-12 p-0 [&>svg]:size-6" },
+    { variant: "outline", layout: "icon", class: "text-muted-foreground" },
+    { variant: "ghost", layout: "icon", class: "text-muted-foreground" },
+  ],
+});
+
+export type ButtonVariant = VariantKey<typeof buttonVariants, "variant">;
+export type ButtonSize = VariantKey<typeof buttonVariants, "size">;
+export type ButtonLayout = VariantKey<typeof buttonVariants, "layout">;
+
+export type ButtonProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  layout?: ButtonLayout;
+  type?: string;
+  href?: string;
+  target?: string;
+  rel?: string;
+  external?: boolean;
+  disabled?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const {
+  variant,
+  size,
+  layout,
+  type,
+  href,
+  target,
+  rel,
+  external,
+  disabled,
+  class: className,
+} = defineProps<ButtonProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(
+  buttonVariants({ variant, size, layout }),
+  (disabled ? "pointer-events-none opacity-50" : ""),
+  className
+));
+const targetValue = computed(() => (isSetStr(target) ? target : (external ? "_blank" : "")));
+const relValue = computed(() => (isSetStr(rel) ? rel : ((external || eqStr(targetValue.value, "_blank")) ? "noopener noreferrer" : "")));
+</script>
+
+<template>
+  <a v-if="isSetStr(href)"
+    :href="orUndef(href)"
+    :class="cls || undefined"
+    data-slot="button"
+    :target="orUndef(targetValue)"
+    :rel="orUndef(relValue)"
+    :aria-disabled="disabled ? 'true' : undefined"
+    :tabindex="disabled ? -1 : undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </a>
+  <button v-else
+    :type="oneOfOr(type, 'button', 'submit', 'reset')"
+    :class="cls || undefined"
+    data-slot="button"
+    :disabled="disabled || undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/packages/vue/ui/src/primitives/card/card-content.vue b/packages/vue/ui/src/primitives/card/card-content.vue
new file mode 100644
index 0000000..362eaac
--- /dev/null
+++ b/packages/vue/ui/src/primitives/card/card-content.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardContent renders the padded main body slot.
+-->
+<script lang="ts">
+export type CardContentProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<CardContentProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <div :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/card/card-description.vue b/packages/vue/ui/src/primitives/card/card-description.vue
new file mode 100644
index 0000000..a527c8a
--- /dev/null
+++ b/packages/vue/ui/src/primitives/card/card-description.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardDescription renders a muted subtitle in a p element.
+-->
+<script lang="ts">
+export type CardDescriptionProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<CardDescriptionProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn("text-sm text-muted-foreground", className));
+</script>
+
+<template>
+  <p :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </p>
+</template>
diff --git a/packages/vue/ui/src/primitives/card/card-footer.vue b/packages/vue/ui/src/primitives/card/card-footer.vue
new file mode 100644
index 0000000..16d9f9a
--- /dev/null
+++ b/packages/vue/ui/src/primitives/card/card-footer.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardFooter renders the bottom action slot.
+-->
+<script lang="ts">
+export type CardFooterProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<CardFooterProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn("flex items-center", className));
+</script>
+
+<template>
+  <div :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/card/card-header.vue b/packages/vue/ui/src/primitives/card/card-header.vue
new file mode 100644
index 0000000..e77328b
--- /dev/null
+++ b/packages/vue/ui/src/primitives/card/card-header.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardHeader renders the top slot.
+-->
+<script lang="ts">
+export type CardHeaderProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<CardHeaderProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn("grid auto-rows-min items-start gap-2", className));
+</script>
+
+<template>
+  <div :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/card/card-title.vue b/packages/vue/ui/src/primitives/card/card-title.vue
new file mode 100644
index 0000000..339bd0e
--- /dev/null
+++ b/packages/vue/ui/src/primitives/card/card-title.vue
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  CardTitle renders heading text at the As level (default h2).
+-->
+<script lang="ts">
+export type CardTitleProps = {
+  as?: 1 | 2 | 3 | 4 | 5 | 6;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { titleTag } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { as, class: className } = defineProps<CardTitleProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn("font-semibold leading-none", className));
+const resolvedTagValue = computed(() => titleTag(as));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/primitives/card/card.vue b/packages/vue/ui/src/primitives/card/card.vue
new file mode 100644
index 0000000..68e51e4
--- /dev/null
+++ b/packages/vue/ui/src/primitives/card/card.vue
@@ -0,0 +1,46 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/card.json -->
+<!--
+  Card renders the bordered surface wrapper.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Card: the classes of each value of each prop (shadcn/cva style). */
+export const cardVariants = variants({
+  base: "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+  variants: {
+    variant: {
+      default: "",
+      muted: "bg-muted",
+      ghost: "bg-transparent",
+      compact: "gap-4 p-4",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export type CardVariant = VariantKey<typeof cardVariants, "variant">;
+
+export type CardProps = {
+  variant?: CardVariant;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, class: className } = defineProps<CardProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(cardVariants({ variant }), className));
+</script>
+
+<template>
+  <div :class="cls || undefined" data-slot="card" v-bind="attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/checkbox/checkbox.vue b/packages/vue/ui/src/primitives/checkbox/checkbox.vue
new file mode 100644
index 0000000..dded7cf
--- /dev/null
+++ b/packages/vue/ui/src/primitives/checkbox/checkbox.vue
@@ -0,0 +1,59 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/checkbox.json -->
+<!--
+  Checkbox renders a styled input[type=checkbox].
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Checkbox: the classes of each value of each prop (shadcn/cva style). */
+export const checkboxVariants = variants({
+  base:
+    "peer shrink-0 appearance-none bg-background inset-ring inset-ring-input checked:bg-primary " +
+    "checked:inset-ring-primary checkbox-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      default: "size-5",
+      sm: "size-4",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type CheckboxVariant = VariantKey<typeof checkboxVariants, "variant">;
+export type CheckboxSize = VariantKey<typeof checkboxVariants, "size">;
+
+export type CheckboxProps = {
+  variant?: CheckboxVariant;
+  size?: CheckboxSize;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+const { variant, size, checked, disabled, required, class: className } = defineProps<CheckboxProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(checkboxVariants({ size, variant }), className));
+</script>
+
+<template>
+  <input
+    type="checkbox"
+    :class="cls || undefined"
+    :checked="checked || undefined"
+    :disabled="disabled || undefined"
+    :required="required || undefined"
+    v-bind="attrs"
+  />
+</template>
diff --git a/packages/vue/ui/src/primitives/container/container.vue b/packages/vue/ui/src/primitives/container/container.vue
new file mode 100644
index 0000000..68efcb9
--- /dev/null
+++ b/packages/vue/ui/src/primitives/container/container.vue
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/container.json -->
+<!--
+  Container renders the outer content shell.
+-->
+<script lang="ts">
+export type ContainerProps = {
+  tag?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { tag, class: className } = defineProps<ContainerProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+const resolvedTagValue = computed(() => resolveTag(tag, "div", TagGroup.Container));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/primitives/dialog/dialog.vue b/packages/vue/ui/src/primitives/dialog/dialog.vue
new file mode 100644
index 0000000..5712878
--- /dev/null
+++ b/packages/vue/ui/src/primitives/dialog/dialog.vue
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/dialog.json -->
+<!--
+  Dialog renders a native dialog element.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Dialog: the classes of each value of each prop (shadcn/cva style). */
+export const dialogVariants = variants({
+  base:
+    "m-auto flex flex-col bg-background text-foreground inset-ring inset-ring-border shadow-lg " +
+    "backdrop:bg-foreground/20 rounded",
+  variants: {
+    size: {
+      default: "w-70",
+      full: "h-full w-full",
+      lg: "w-100",
+      xl: "w-140",
+    },
+    variant: {
+      card: "bg-card text-card-foreground",
+      default: "",
+      sheet: "min-h-screen rounded-none",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type DialogVariant = VariantKey<typeof dialogVariants, "variant">;
+export type DialogSize = VariantKey<typeof dialogVariants, "size">;
+
+export type DialogProps = {
+  variant?: DialogVariant;
+  size?: DialogSize;
+  open?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, size, open, class: className } = defineProps<DialogProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(dialogVariants({ size, variant }), className));
+</script>
+
+<template>
+  <dialog :class="cls || undefined" :open="open || undefined" v-bind="attrs">
+    <slot />
+  </dialog>
+</template>
diff --git a/packages/vue/ui/src/primitives/disclosure/disclosure.vue b/packages/vue/ui/src/primitives/disclosure/disclosure.vue
new file mode 100644
index 0000000..9059662
--- /dev/null
+++ b/packages/vue/ui/src/primitives/disclosure/disclosure.vue
@@ -0,0 +1,47 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/disclosure.json -->
+<!--
+  Disclosure renders native details.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Disclosure: the classes of each value of each prop (shadcn/cva style). */
+export const disclosureVariants = variants({
+  base: "group",
+  variants: {
+    variant: {
+      card: "rounded bg-card inset-ring inset-ring-border",
+      default: "rounded inset-ring inset-ring-border",
+      ghost: "",
+      item: "border-b border-border last:border-b-0",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+export type DisclosureVariant = VariantKey<typeof disclosureVariants, "variant">;
+
+export type DisclosureProps = {
+  variant?: DisclosureVariant;
+  open?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, open, class: className } = defineProps<DisclosureProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(disclosureVariants({ variant }), className));
+</script>
+
+<template>
+  <details :class="cls || undefined" :open="open || undefined" v-bind="attrs">
+    <slot />
+  </details>
+</template>
diff --git a/packages/vue/ui/src/primitives/disclosure/summary.vue b/packages/vue/ui/src/primitives/disclosure/summary.vue
new file mode 100644
index 0000000..ac5866c
--- /dev/null
+++ b/packages/vue/ui/src/primitives/disclosure/summary.vue
@@ -0,0 +1,57 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/disclosure.json -->
+<!--
+  Summary renders native summary, followed by a Lucide chevron-down indicator that turns over when the details
+  open (CSS only: group-open:rotate-180 on the Disclosure group).
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Summary: the classes of each value of each prop (shadcn/cva style). */
+export const summaryVariants = variants({
+  base: "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
+  variants: {
+    size: {
+      sm: "text-xs font-semibold",
+      default: "text-sm font-semibold",
+      lg: "text-base font-semibold",
+    },
+    variant: {
+      card: "py-2 pr-4 pl-4",
+      default: "py-2 pr-4 pl-4",
+      ghost: "py-2",
+      item: "py-4 text-muted-foreground hover:text-foreground group-open:text-foreground",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type SummaryVariant = VariantKey<typeof summaryVariants, "variant">;
+
+export type SummaryProps = {
+  variant?: SummaryVariant;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, class: className } = defineProps<SummaryProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(summaryVariants({ variant }), className));
+</script>
+
+<template>
+  <summary :class="cls || undefined" v-bind="attrs">
+    <slot />
+    <span
+      class="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+      aria-hidden="true"
+      data-slot="summary-indicator"
+    ></span>
+  </summary>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/data-list.vue b/packages/vue/ui/src/primitives/form/data-list.vue
new file mode 100644
index 0000000..54ac495
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/data-list.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  DataList renders a native datalist.
+-->
+<script lang="ts">
+export type DataListProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<DataListProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <datalist :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </datalist>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/data-option.vue b/packages/vue/ui/src/primitives/form/data-option.vue
new file mode 100644
index 0000000..67946a8
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/data-option.vue
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  DataOption renders an option inside a datalist.
+-->
+<script lang="ts">
+export type DataOptionProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+const { class: className } = defineProps<DataOptionProps>();
+const attrs = useAttrs();
+</script>
+
+<template>
+  <option v-bind="attrs"></option>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/fieldset.vue b/packages/vue/ui/src/primitives/form/fieldset.vue
new file mode 100644
index 0000000..54263b8
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/fieldset.vue
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Fieldset renders a native fieldset.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Fieldset: the classes of each value of each prop (shadcn/cva style). */
+export const fieldsetVariants = variants({
+  base: "grid",
+  variants: {
+    size: {
+      default: "gap-2",
+      lg: "gap-4",
+      sm: "gap-2",
+    },
+    variant: {
+      card: "rounded p-4 inset-ring inset-ring-border",
+      default: "",
+      inline: "flex flex-wrap items-start gap-4",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type FieldsetVariant = VariantKey<typeof fieldsetVariants, "variant">;
+export type FieldsetSize = VariantKey<typeof fieldsetVariants, "size">;
+
+export type FieldsetProps = {
+  variant?: FieldsetVariant;
+  size?: FieldsetSize;
+  disabled?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, size, disabled, class: className } = defineProps<FieldsetProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(fieldsetVariants({ size, variant }), className));
+</script>
+
+<template>
+  <fieldset :class="cls || undefined" :disabled="disabled || undefined" v-bind="attrs">
+    <slot />
+  </fieldset>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/form-description.vue b/packages/vue/ui/src/primitives/form/form-description.vue
new file mode 100644
index 0000000..4a00701
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/form-description.vue
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  FormDescription renders muted helper copy below a control.
+-->
+<script lang="ts">
+import { variants } from "../../utils";
+
+/** FormDescription: the classes of each value of each prop (shadcn/cva style). */
+export const formDescriptionVariants = variants({
+  base: "text-xs font-semibold text-muted-foreground",
+  variants: {},
+  defaultVariants: {},
+});
+
+export type FormDescriptionProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<FormDescriptionProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(formDescriptionVariants(), className));
+</script>
+
+<template>
+  <p :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </p>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/form-item.vue b/packages/vue/ui/src/primitives/form/form-item.vue
new file mode 100644
index 0000000..2d5c9fb
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/form-item.vue
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  FormItem groups a single field with spacing for label and control.
+-->
+<script lang="ts">
+import { variants } from "../../utils";
+
+/** FormItem: the classes of each value of each prop (shadcn/cva style). */
+export const formItemVariants = variants({
+  base: "flex flex-col gap-2",
+  variants: {},
+  defaultVariants: {},
+});
+
+export type FormItemProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<FormItemProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(formItemVariants(), className));
+</script>
+
+<template>
+  <div :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/form-message.vue b/packages/vue/ui/src/primitives/form/form-message.vue
new file mode 100644
index 0000000..3a964d0
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/form-message.vue
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  FormMessage renders destructive validation feedback.
+-->
+<script lang="ts">
+import { variants } from "../../utils";
+
+/** FormMessage: the classes of each value of each prop (shadcn/cva style). */
+export const formMessageVariants = variants({
+  base: "text-xs font-semibold text-destructive",
+  variants: {},
+  defaultVariants: {},
+});
+
+export type FormMessageProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<FormMessageProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(formMessageVariants(), className));
+</script>
+
+<template>
+  <p :class="cls || undefined" role="alert" v-bind="attrs">
+    <slot />
+  </p>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/form.vue b/packages/vue/ui/src/primitives/form/form.vue
new file mode 100644
index 0000000..66833ee
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/form.vue
@@ -0,0 +1,37 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Form renders a vertical grid form container.
+-->
+<script lang="ts">
+import { variants } from "../../utils";
+
+/** Form: the classes of each value of each prop (shadcn/cva style). */
+export const formVariants = variants({
+  base: "grid gap-4",
+  variants: {},
+  defaultVariants: {},
+});
+
+export type FormProps = {
+  novalidate?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { novalidate: noValidate, class: className } = defineProps<FormProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(formVariants(), className));
+</script>
+
+<template>
+  <form :class="cls || undefined" :novalidate="noValidate || undefined" v-bind="attrs">
+    <slot />
+  </form>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/legend.vue b/packages/vue/ui/src/primitives/form/legend.vue
new file mode 100644
index 0000000..828c6d5
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/legend.vue
@@ -0,0 +1,51 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Legend renders a native legend.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Legend: the classes of each value of each prop (shadcn/cva style). */
+export const legendVariants = variants({
+  base: "font-bold",
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base",
+    },
+    variant: {
+      default: "",
+      muted: "text-muted-foreground",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type LegendVariant = VariantKey<typeof legendVariants, "variant">;
+export type LegendSize = VariantKey<typeof legendVariants, "size">;
+
+export type LegendProps = {
+  variant?: LegendVariant;
+  size?: LegendSize;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, size, class: className } = defineProps<LegendProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(legendVariants({ size, variant }), className));
+</script>
+
+<template>
+  <legend :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </legend>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/meter.vue b/packages/vue/ui/src/primitives/form/meter.vue
new file mode 100644
index 0000000..71dea26
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/meter.vue
@@ -0,0 +1,51 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Meter renders a native meter.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Meter: the classes of each value of each prop (shadcn/cva style). */
+export const meterVariants = variants({
+  base: "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  variants: {
+    size: {
+      sm: "h-1",
+      default: "h-2",
+      lg: "h-3",
+    },
+    variant: {
+      default: "[--bar:var(--color-primary)]",
+      muted: "[--bar:var(--color-muted-foreground)]",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type MeterVariant = VariantKey<typeof meterVariants, "variant">;
+export type MeterSize = VariantKey<typeof meterVariants, "size">;
+
+export type MeterProps = {
+  variant?: MeterVariant;
+  size?: MeterSize;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, size, class: className } = defineProps<MeterProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(meterVariants({ size, variant }), className));
+</script>
+
+<template>
+  <meter :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </meter>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/output.vue b/packages/vue/ui/src/primitives/form/output.vue
new file mode 100644
index 0000000..3531bdb
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/output.vue
@@ -0,0 +1,26 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Output renders a native output element.
+-->
+<script lang="ts">
+export type OutputProps = {
+  value?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { value, class: className } = defineProps<OutputProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <output :class="cls || undefined" v-bind="attrs">{{ value }}<slot /></output>
+</template>
diff --git a/packages/vue/ui/src/primitives/form/progress.vue b/packages/vue/ui/src/primitives/form/progress.vue
new file mode 100644
index 0000000..a9c932b
--- /dev/null
+++ b/packages/vue/ui/src/primitives/form/progress.vue
@@ -0,0 +1,51 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/controls.json -->
+<!--
+  Progress renders a native progress element.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Progress: the classes of each value of each prop (shadcn/cva style). */
+export const progressVariants = variants({
+  base: "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  variants: {
+    size: {
+      sm: "h-1",
+      default: "h-2",
+      lg: "h-3",
+    },
+    variant: {
+      default: "[--bar:var(--color-primary)]",
+      muted: "[--bar:var(--color-muted-foreground)]",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type ProgressVariant = VariantKey<typeof progressVariants, "variant">;
+export type ProgressSize = VariantKey<typeof progressVariants, "size">;
+
+export type ProgressProps = {
+  variant?: ProgressVariant;
+  size?: ProgressSize;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, size, class: className } = defineProps<ProgressProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(progressVariants({ size, variant }), className));
+</script>
+
+<template>
+  <progress :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </progress>
+</template>
diff --git a/packages/vue/ui/src/primitives/grid/grid-col.vue b/packages/vue/ui/src/primitives/grid/grid-col.vue
new file mode 100644
index 0000000..b457bee
--- /dev/null
+++ b/packages/vue/ui/src/primitives/grid/grid-col.vue
@@ -0,0 +1,53 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/grid.json -->
+<!--
+  GridCol renders one grid column child.
+-->
+<script lang="ts">
+export type GridColProps = {
+  span?: number;
+  start?: number;
+  end?: number;
+  order?: number;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { intMapOr } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { span, start, end, order, class: className } = defineProps<GridColProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(
+  intMapOr(span, {
+    1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4", 5: "col-span-5",
+    6: "col-span-6", 7: "col-span-7", 8: "col-span-8", 9: "col-span-9", 10: "col-span-10",
+    11: "col-span-11", 12: "col-span-12",
+  }, ""),
+  intMapOr(start, {
+    1: "col-start-1", 2: "col-start-2", 3: "col-start-3", 4: "col-start-4", 5: "col-start-5",
+    6: "col-start-6", 7: "col-start-7", 8: "col-start-8", 9: "col-start-9", 10: "col-start-10",
+    11: "col-start-11", 12: "col-start-12",
+  }, ""),
+  intMapOr(end, {
+    1: "col-end-1", 2: "col-end-2", 3: "col-end-3", 4: "col-end-4", 5: "col-end-5", 6: "col-end-6",
+    7: "col-end-7", 8: "col-end-8", 9: "col-end-9", 10: "col-end-10", 11: "col-end-11",
+    12: "col-end-12",
+  }, ""),
+  intMapOr(order, {
+    1: "order-1", 2: "order-2", 3: "order-3", 4: "order-4", 5: "order-5", 6: "order-6", 7: "order-7",
+    8: "order-8", 9: "order-9", 10: "order-10", 11: "order-11", 12: "order-12",
+  }, ""),
+  className
+));
+</script>
+
+<template>
+  <div :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/grid/grid.vue b/packages/vue/ui/src/primitives/grid/grid.vue
new file mode 100644
index 0000000..771d609
--- /dev/null
+++ b/packages/vue/ui/src/primitives/grid/grid.vue
@@ -0,0 +1,50 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/grid.json -->
+<!--
+  Grid renders a display:grid container.
+-->
+<script lang="ts">
+import { variants } from "../../utils";
+
+/** Grid: the classes of each value of each prop (shadcn/cva style). */
+export const gridVariants = variants({
+  base: "grid",
+  variants: {},
+  defaultVariants: {},
+});
+
+export type GridProps = {
+  cols?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { defaultIfEmpty, mapOr } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { cols, class: className } = defineProps<GridProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(
+  gridVariants(),
+  ((className ?? "").includes("grid-cols-") ? "" : mapOr(defaultIfEmpty(cols, "1"), {
+    "1": "grid-cols-1", "2": "grid-cols-2", "3": "grid-cols-3", "4": "grid-cols-4", "5": "grid-cols-5",
+    "6": "grid-cols-6", "7": "grid-cols-7", "8": "grid-cols-8", "9": "grid-cols-9",
+    "10": "grid-cols-10", "11": "grid-cols-11", "12": "grid-cols-12",
+    "1-2": "grid-cols-1 md:grid-cols-2", "1-3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    "1-4": "grid-cols-1 sm:grid-cols-2 md:grid-cols-4", "2-3": "grid-cols-2 md:grid-cols-3",
+    "2-4": "grid-cols-2 md:grid-cols-4", "2-6": "grid-cols-2 md:grid-cols-6",
+    "3-6": "grid-cols-3 md:grid-cols-6",
+  }, "")),
+  className
+));
+</script>
+
+<template>
+  <div :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/group/group.vue b/packages/vue/ui/src/primitives/group/group.vue
new file mode 100644
index 0000000..72e454f
--- /dev/null
+++ b/packages/vue/ui/src/primitives/group/group.vue
@@ -0,0 +1,70 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/group.json -->
+<!--
+  Group renders a horizontal flex container.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Group: the classes of each value of each prop (shadcn/cva style). */
+export const groupVariants = variants({
+  base: "flex min-w-0",
+  variants: {
+    gap: {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      auto: "",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline",
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+    },
+  },
+  defaultVariants: { gap: "auto", align: "center", justify: "start" },
+});
+
+export type GroupGap = VariantKey<typeof groupVariants, "gap">;
+export type GroupAlign = VariantKey<typeof groupVariants, "align">;
+export type GroupJustify = VariantKey<typeof groupVariants, "justify">;
+
+export type GroupProps = {
+  gap?: GroupGap;
+  align?: GroupAlign;
+  justify?: GroupJustify;
+  tag?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { gap, align, justify, tag, class: className } = defineProps<GroupProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(groupVariants({ gap, align, justify }), className));
+const resolvedTagValue = computed(() => resolveTag(tag, "div", TagGroup.Group));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/primitives/icon/icon.vue b/packages/vue/ui/src/primitives/icon/icon.vue
new file mode 100644
index 0000000..51b548e
--- /dev/null
+++ b/packages/vue/ui/src/primitives/icon/icon.vue
@@ -0,0 +1,104 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/icon.json -->
+<!--
+  Icon renders a class-based span, svg use, or text fallback host.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Icon: the classes of each value of each prop (shadcn/cva style). */
+export const iconVariants = variants({
+  base: "inline-block shrink-0",
+  variants: {
+    size: {
+      xs: "size-3",
+      default: "size-4",
+      md: "size-5",
+      lg: "size-6",
+    },
+    type: {
+      class: "",
+      svg: "",
+      text: "",
+    },
+  },
+  defaultVariants: { size: "default", type: "class" },
+});
+
+export type IconSize = VariantKey<typeof iconVariants, "size">;
+
+export type IconProps = {
+  name?: string;
+  type?: string;
+  baseClass?: string;
+  prefix?: string;
+  size?: IconSize;
+  href?: string;
+  title?: string;
+  ariaLabel?: string;
+  decorative?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { concatTrim, eqStr, isSetStr, oneOfOr, orUndef } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const {
+  name,
+  type,
+  baseClass,
+  prefix,
+  size,
+  href,
+  title,
+  ariaLabel,
+  decorative,
+  class: className,
+} = defineProps<IconProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(
+  iconVariants({ size, type: oneOfOr(type, "class", "svg", "text") as VariantKey<typeof iconVariants, "type"> }),
+  (eqStr(oneOfOr(type, "class", "svg", "text"), "class") ? baseClass : ""),
+  ((eqStr(oneOfOr(type, "class", "svg", "text"), "class") && isSetStr(name)) ? concatTrim(prefix, name) : ""),
+  className
+));
+const iconKindValue = computed(() => oneOfOr(type, "class", "svg", "text"));
+const isDecorativeValue = computed(() => (decorative || (!(isSetStr(title)) && !(isSetStr(ariaLabel)))));
+</script>
+
+<template>
+  <svg v-if="eqStr(iconKindValue, 'svg')"
+    :class="cls || undefined"
+    :aria-hidden="isDecorativeValue ? 'true' : undefined"
+    :role="!(isDecorativeValue) ? 'img' : undefined"
+    :aria-label="(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined"
+    v-bind="attrs"
+  >
+    <title v-if="isSetStr(title)">{{ title }}</title>
+    <use v-if="isSetStr(href)" :href="orUndef(href)"></use>
+    <slot />
+  </svg>
+  <span v-else-if="eqStr(iconKindValue, 'text')"
+    :class="cls || undefined"
+    :aria-hidden="isDecorativeValue ? 'true' : undefined"
+    :role="!(isDecorativeValue) ? 'img' : undefined"
+    :aria-label="(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </span>
+  <template v-else>
+    <span
+      :class="cls || undefined"
+      :aria-hidden="isDecorativeValue ? 'true' : undefined"
+      :role="!(isDecorativeValue) ? 'img' : undefined"
+      :aria-label="(!(isDecorativeValue) && isSetStr(ariaLabel)) ? ariaLabel : undefined"
+      v-bind="attrs"
+    ></span>
+  </template>
+</template>
diff --git a/packages/vue/ui/src/primitives/iconbadge/icon-badge.vue b/packages/vue/ui/src/primitives/iconbadge/icon-badge.vue
new file mode 100644
index 0000000..093ce67
--- /dev/null
+++ b/packages/vue/ui/src/primitives/iconbadge/icon-badge.vue
@@ -0,0 +1,57 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/iconbadge.json -->
+<!--
+  IconBadge renders children as the badge content.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** IconBadge: the classes of each value of each prop (shadcn/cva style). */
+export const iconbadgeVariants = variants({
+  base: "inline-flex shrink-0 items-center justify-center font-bold rounded",
+  variants: {
+    variant: {
+      default: "bg-muted text-muted-foreground",
+      primary: "bg-primary text-primary-foreground",
+      accent: "bg-accent text-accent-foreground",
+      secondary: "bg-secondary text-secondary-foreground",
+      outline: "text-foreground inset-ring inset-ring-border",
+      destructive: "bg-destructive text-white dark:bg-destructive/60",
+    },
+    size: {
+      xs: "size-6 text-xs",
+      sm: "size-8 text-xs",
+      default: "size-10 text-xs",
+      lg: "size-12 text-sm",
+      xl: "size-20 text-base",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type IconBadgeVariant = VariantKey<typeof iconbadgeVariants, "variant">;
+export type IconBadgeSize = VariantKey<typeof iconbadgeVariants, "size">;
+
+export type IconBadgeProps = {
+  variant?: IconBadgeVariant;
+  size?: IconBadgeSize;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, size, class: className } = defineProps<IconBadgeProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(iconbadgeVariants({ variant, size }), className));
+</script>
+
+<template>
+  <span :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </span>
+</template>
diff --git a/packages/vue/ui/src/primitives/image/image.vue b/packages/vue/ui/src/primitives/image/image.vue
new file mode 100644
index 0000000..076bf30
--- /dev/null
+++ b/packages/vue/ui/src/primitives/image/image.vue
@@ -0,0 +1,105 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/image.json -->
+<!--
+  Image renders an accessible img element.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Image: the classes of each value of each prop (shadcn/cva style). */
+export const imageVariants = variants({
+  base: "block max-w-full",
+  variants: {
+    aspect: {
+      auto: "aspect-auto",
+      square: "aspect-square",
+      video: "aspect-video",
+    },
+    fit: {
+      contain: "object-contain",
+      cover: "object-cover",
+      fill: "object-fill",
+      none: "object-none",
+      "scale-down": "object-scale-down",
+    },
+    position: {
+      bottom: "object-bottom",
+      center: "object-center",
+      left: "object-left",
+      "left-bottom": "object-left-bottom",
+      "left-top": "object-left-top",
+      right: "object-right",
+      "right-bottom": "object-right-bottom",
+      "right-top": "object-right-top",
+      top: "object-top",
+    },
+    size: {
+      auto: "",
+      default: "",
+      full: "h-full w-full",
+      xs: "size-6",
+      sm: "size-8",
+      md: "size-12",
+      lg: "size-16",
+      xl: "size-20",
+    },
+    variant: {
+      default: "",
+      logo: "object-contain",
+    },
+  },
+  defaultVariants: { aspect: "auto", fit: "cover", position: "center", size: "auto", variant: "default" },
+});
+
+export type ImageVariant = VariantKey<typeof imageVariants, "variant">;
+export type ImageSize = VariantKey<typeof imageVariants, "size">;
+export type ImageFit = VariantKey<typeof imageVariants, "fit">;
+export type ImagePosition = VariantKey<typeof imageVariants, "position">;
+export type ImageAspect = VariantKey<typeof imageVariants, "aspect">;
+
+export type ImageProps = {
+  variant?: ImageVariant;
+  size?: ImageSize;
+  alt?: string;
+  fit?: ImageFit;
+  position?: ImagePosition;
+  aspect?: ImageAspect;
+  loading?: string;
+  decoding?: string;
+  decorative?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { oneOfOr } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const {
+  variant,
+  size,
+  alt,
+  fit,
+  position,
+  aspect,
+  loading,
+  decoding,
+  decorative,
+  class: className,
+} = defineProps<ImageProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(imageVariants({ aspect, fit, position, size, variant }), className));
+</script>
+
+<template>
+  <img
+    :alt="((decorative ? '' : alt)) ?? ''"
+    :loading="oneOfOr(loading, 'lazy', 'eager')"
+    :decoding="oneOfOr(decoding, 'async', 'sync', 'auto')"
+    :class="cls || undefined"
+    :aria-hidden="decorative ? 'true' : undefined"
+    v-bind="attrs"
+  />
+</template>
diff --git a/packages/vue/ui/src/primitives/image/picture.vue b/packages/vue/ui/src/primitives/image/picture.vue
new file mode 100644
index 0000000..53ef3e2
--- /dev/null
+++ b/packages/vue/ui/src/primitives/image/picture.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/image.json -->
+<!--
+  Picture renders a responsive image wrapper.
+-->
+<script lang="ts">
+export type PictureProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<PictureProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <picture :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </picture>
+</template>
diff --git a/packages/vue/ui/src/primitives/image/source.vue b/packages/vue/ui/src/primitives/image/source.vue
new file mode 100644
index 0000000..bd5c0ee
--- /dev/null
+++ b/packages/vue/ui/src/primitives/image/source.vue
@@ -0,0 +1,22 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/image.json -->
+<!--
+  Source renders a source candidate for picture, video, or audio.
+-->
+<script lang="ts">
+export type SourceProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+const { class: className } = defineProps<SourceProps>();
+const attrs = useAttrs();
+</script>
+
+<template>
+  <source v-bind="attrs" />
+</template>
diff --git a/packages/vue/ui/src/primitives/inline/inline.vue b/packages/vue/ui/src/primitives/inline/inline.vue
new file mode 100644
index 0000000..087786d
--- /dev/null
+++ b/packages/vue/ui/src/primitives/inline/inline.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/inline.json -->
+<!--
+  Inline renders a span element with inline copy classes.
+-->
+<script lang="ts">
+export type InlineProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<InlineProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <span :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </span>
+</template>
diff --git a/packages/vue/ui/src/primitives/input/input.vue b/packages/vue/ui/src/primitives/input/input.vue
new file mode 100644
index 0000000..9601ec8
--- /dev/null
+++ b/packages/vue/ui/src/primitives/input/input.vue
@@ -0,0 +1,61 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/input.json -->
+<!--
+  Input renders a styled single-line form control.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Input: the classes of each value of each prop (shadcn/cva style). */
+export const inputVariants = variants({
+  base:
+    "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+    "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+    "focus-visible:inset-ring-ring rounded",
+  variants: {
+    size: {
+      sm: "h-8 px-3 text-base md:text-sm",
+      default: "h-10 px-3 text-base md:text-sm",
+      lg: "h-12 px-4 text-base",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted inset-ring-transparent",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type InputVariant = VariantKey<typeof inputVariants, "variant">;
+export type InputSize = VariantKey<typeof inputVariants, "size">;
+
+export type InputProps = {
+  variant?: InputVariant;
+  size?: InputSize;
+  type?: string;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { defaultIfEmpty } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { variant, size, type, disabled, required, class: className } = defineProps<InputProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(inputVariants({ size, variant }), className));
+</script>
+
+<template>
+  <input
+    :type="defaultIfEmpty(type, 'text')"
+    :class="cls || undefined"
+    :disabled="disabled || undefined"
+    :required="required || undefined"
+    v-bind="attrs"
+  />
+</template>
diff --git a/packages/vue/ui/src/primitives/label/label.vue b/packages/vue/ui/src/primitives/label/label.vue
new file mode 100644
index 0000000..142c2ef
--- /dev/null
+++ b/packages/vue/ui/src/primitives/label/label.vue
@@ -0,0 +1,36 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/label.json -->
+<!--
+  Label renders accessible text linked to a control.
+-->
+<script lang="ts">
+import { variants } from "../../utils";
+
+/** Label: the classes of each value of each prop (shadcn/cva style). */
+export const labelVariants = variants({
+  base: "text-xs font-bold text-foreground",
+  variants: {},
+  defaultVariants: {},
+});
+
+export type LabelProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<LabelProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(labelVariants(), className));
+</script>
+
+<template>
+  <label :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </label>
+</template>
diff --git a/packages/vue/ui/src/primitives/linebreak/break.vue b/packages/vue/ui/src/primitives/linebreak/break.vue
new file mode 100644
index 0000000..4517548
--- /dev/null
+++ b/packages/vue/ui/src/primitives/linebreak/break.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/linebreak.json -->
+<!--
+  Break renders br by default, or wbr when Type is wbr/word.
+-->
+<script lang="ts">
+export type BreakProps = {
+  type?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { mapOr } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { type, class: className } = defineProps<BreakProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+const resolvedTagValue = computed(() => mapOr(type, { "wbr": "wbr", "word": "wbr" }, "br"));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs" />
+</template>
diff --git a/packages/vue/ui/src/primitives/link-plain/link-plain.vue b/packages/vue/ui/src/primitives/link-plain/link-plain.vue
new file mode 100644
index 0000000..6a4a270
--- /dev/null
+++ b/packages/vue/ui/src/primitives/link-plain/link-plain.vue
@@ -0,0 +1,41 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/link-plain.json -->
+<!--
+  LinkPlain is a bare anchor: no styling beyond Class.
+-->
+<script lang="ts">
+export type LinkPlainProps = {
+  target?: string;
+  rel?: string;
+  external?: boolean;
+  disabled?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { eqStr, isSetStr, orUndef } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { target, rel, external, disabled, class: className } = defineProps<LinkPlainProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn((disabled ? "pointer-events-none opacity-50" : ""), className));
+const targetValue = computed(() => (isSetStr(target) ? target : (external ? "_blank" : "")));
+const relValue = computed(() => (isSetStr(rel) ? rel : ((external || eqStr(targetValue.value, "_blank")) ? "noopener noreferrer" : "")));
+</script>
+
+<template>
+  <a
+    :class="cls || undefined"
+    :target="orUndef(targetValue)"
+    :rel="orUndef(relValue)"
+    :aria-disabled="disabled ? 'true' : undefined"
+    :tabindex="disabled ? -1 : undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </a>
+</template>
diff --git a/packages/vue/ui/src/primitives/link/link.vue b/packages/vue/ui/src/primitives/link/link.vue
new file mode 100644
index 0000000..38d8c11
--- /dev/null
+++ b/packages/vue/ui/src/primitives/link/link.vue
@@ -0,0 +1,69 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/link.json -->
+<!--
+  Link renders a semantic anchor element.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Link: the classes of each value of each prop (shadcn/cva style). */
+export const linkVariants = variants({
+  base: "inline-flex items-center underline-offset-4",
+  variants: {
+    size: {
+      sm: "gap-2 text-sm font-medium",
+      default: "gap-2 text-base font-semibold",
+      md: "gap-2 text-xl font-semibold",
+      lg: "gap-2 text-2xl font-semibold",
+    },
+    variant: {
+      block: "flex w-full text-foreground",
+      default: "text-foreground hover:underline",
+      external: "text-foreground hover:underline",
+      muted: "text-muted-foreground hover:text-foreground",
+      nav: "text-foreground",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type LinkVariant = VariantKey<typeof linkVariants, "variant">;
+export type LinkSize = VariantKey<typeof linkVariants, "size">;
+
+export type LinkProps = {
+  variant?: LinkVariant;
+  size?: LinkSize;
+  target?: string;
+  rel?: string;
+  external?: boolean;
+  disabled?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { eqStr, isSetStr, orUndef } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, size, target, rel, external, disabled, class: className } = defineProps<LinkProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(linkVariants({ size, variant }), (disabled ? "pointer-events-none opacity-50" : ""), className));
+const targetValue = computed(() => (isSetStr(target) ? target : (external ? "_blank" : "")));
+const relValue = computed(() => (isSetStr(rel) ? rel : ((external || eqStr(targetValue.value, "_blank")) ? "noopener noreferrer" : "")));
+</script>
+
+<template>
+  <a
+    :class="cls || undefined"
+    :target="orUndef(targetValue)"
+    :rel="orUndef(relValue)"
+    :aria-disabled="disabled ? 'true' : undefined"
+    :tabindex="disabled ? -1 : undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </a>
+</template>
diff --git a/packages/vue/ui/src/primitives/list/list-item.vue b/packages/vue/ui/src/primitives/list/list-item.vue
new file mode 100644
index 0000000..cf377f5
--- /dev/null
+++ b/packages/vue/ui/src/primitives/list/list-item.vue
@@ -0,0 +1,37 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/list.json -->
+<!--
+  ListItem renders one li with optional value attribute.
+-->
+<script lang="ts">
+export type ListItemProps = {
+  tag?: string;
+  value?: number;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { eqStr, isSetNum } from "../../utils/expr";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { tag, value, class: className } = defineProps<ListItemProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+const resolvedTagValue = computed(() => resolveTag(tag, "li", TagGroup.ListItem));
+</script>
+
+<template>
+  <component
+    :is="resolvedTagValue"
+    :class="cls || undefined"
+    :value="(isSetNum(value) && eqStr(resolvedTagValue, 'li')) ? String(value ?? 0) : undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/primitives/list/list.vue b/packages/vue/ui/src/primitives/list/list.vue
new file mode 100644
index 0000000..f2049e1
--- /dev/null
+++ b/packages/vue/ui/src/primitives/list/list.vue
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/list.json -->
+<!--
+  List renders a list container (ul, ol, dl, or menu).
+-->
+<script lang="ts">
+export type ListProps = {
+  tag?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { tag, class: className } = defineProps<ListProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+const resolvedTagValue = computed(() => resolveTag(tag, "ul", TagGroup.List));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/primitives/lucide-icon/lucide-icon.vue b/packages/vue/ui/src/primitives/lucide-icon/lucide-icon.vue
new file mode 100644
index 0000000..9fcb763
--- /dev/null
+++ b/packages/vue/ui/src/primitives/lucide-icon/lucide-icon.vue
@@ -0,0 +1,40 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/lucide-icon.json -->
+<!--
+  LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file.
+  Decorative (aria-hidden) unless a `label` is given.
+-->
+<script lang="ts">
+export type LucideIconProps = { name: string; size?: number; strokeWidth?: number; label?: string; class?: string };
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { cn } from "../../utils";
+import { LUCIDE } from "./lucide-icons";
+
+const { name, size = 16, strokeWidth = 2, label, class: className } = defineProps<LucideIconProps>();
+const nodes = computed(() => LUCIDE[name] ?? LUCIDE["circle"] ?? []);
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    :width="size"
+    :height="size"
+    fill="none"
+    stroke="currentColor"
+    :stroke-width="strokeWidth"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :class="cn('inline-block shrink-0', className)"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label"
+    :role="label ? 'img' : undefined"
+    data-slot="icon"
+    :data-lucide="name"
+  >
+    <component :is="tag" v-for="([tag, attrs], i) in nodes" :key="i" v-bind="attrs" />
+  </svg>
+</template>
diff --git a/packages/vue/ui/src/primitives/lucide-icon/lucide-icons.ts b/packages/vue/ui/src/primitives/lucide-icon/lucide-icons.ts
new file mode 100644
index 0000000..46edfe4
--- /dev/null
+++ b/packages/vue/ui/src/primitives/lucide-icon/lucide-icons.ts
@@ -0,0 +1,283 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/specs/assets/lucide-icons.json
+// Lucide icons (ISC license, https://lucide.dev), harvested into xgen/specs/assets/lucide-icons.json.
+export const LUCIDE: Record<string, Array<[string, Record<string, string>]>> = {
+  "accessibility": [["circle",{"cx":"16","cy":"4","r":"1"}],["path",{"d":"m18 19 1-7-6 1"}],["path",{"d":"m5 8 3-3 5.5 3-2.36 3.5"}],["path",{"d":"M4.24 14.5a5 5 0 0 0 6.88 6"}],["path",{"d":"M13.76 17.5a5 5 0 0 0-6.88-6"}]],
+  "activity": [["path",{"d":"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"}]],
+  "anchor": [["path",{"d":"M12 6v16"}],["path",{"d":"m19 13 2-1a9 9 0 0 1-18 0l2 1"}],["path",{"d":"M9 11h6"}],["circle",{"cx":"12","cy":"4","r":"2"}]],
+  "archive": [["rect",{"width":"20","height":"5","x":"2","y":"3","rx":"1"}],["path",{"d":"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"}],["path",{"d":"M10 12h4"}]],
+  "arrow-down": [["path",{"d":"M12 5v14"}],["path",{"d":"m19 12-7 7-7-7"}]],
+  "arrow-down-up": [["path",{"d":"m3 16 4 4 4-4"}],["path",{"d":"M7 20V4"}],["path",{"d":"m21 8-4-4-4 4"}],["path",{"d":"M17 4v16"}]],
+  "arrow-left": [["path",{"d":"m12 19-7-7 7-7"}],["path",{"d":"M19 12H5"}]],
+  "arrow-right": [["path",{"d":"M5 12h14"}],["path",{"d":"m12 5 7 7-7 7"}]],
+  "arrow-up": [["path",{"d":"m5 12 7-7 7 7"}],["path",{"d":"M12 19V5"}]],
+  "arrow-up-right": [["path",{"d":"M7 7h10v10"}],["path",{"d":"M7 17 17 7"}]],
+  "at-sign": [["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"}]],
+  "badge-check": [["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],
+  "badge-dollar-sign": [["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],
+  "ban": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M4.929 4.929 19.07 19.071"}]],
+  "banknote": [["rect",{"width":"20","height":"12","x":"2","y":"6","rx":"2"}],["circle",{"cx":"12","cy":"12","r":"2"}],["path",{"d":"M6 12h.01M18 12h.01"}]],
+  "bell": [["path",{"d":"M10.268 21a2 2 0 0 0 3.464 0"}],["path",{"d":"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"}]],
+  "blocks": [["path",{"d":"M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"}],["rect",{"x":"14","y":"2","width":"8","height":"8","rx":"1"}]],
+  "bold": [["path",{"d":"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"}]],
+  "bolt": [["path",{"d":"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"}],["circle",{"cx":"12","cy":"12","r":"4"}]],
+  "book-open": [["path",{"d":"M12 5v16"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}]],
+  "book-open-text": [["path",{"d":"M12 5v16"}],["path",{"d":"M16 13h2"}],["path",{"d":"M16 9h2"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}],["path",{"d":"M6 13h2"}],["path",{"d":"M6 9h2"}]],
+  "book-x": [["path",{"d":"m14.5 7.5-5 5"}],["path",{"d":"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"}],["path",{"d":"m9.5 7.5 5 5"}]],
+  "bookmark": [["path",{"d":"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"}]],
+  "bot": [["path",{"d":"M12 8V4H8"}],["rect",{"width":"16","height":"12","x":"4","y":"8","rx":"2"}],["path",{"d":"M2 14h2"}],["path",{"d":"M20 14h2"}],["path",{"d":"M15 13v2"}],["path",{"d":"M9 13v2"}]],
+  "boxes": [["path",{"d":"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"}],["path",{"d":"m7 16.5-4.74-2.85"}],["path",{"d":"m7 16.5 5-3"}],["path",{"d":"M7 16.5v5.17"}],["path",{"d":"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"}],["path",{"d":"m17 16.5-5-3"}],["path",{"d":"m17 16.5 4.74-2.85"}],["path",{"d":"M17 16.5v5.17"}],["path",{"d":"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"}],["path",{"d":"M12 8 7.26 5.15"}],["path",{"d":"m12 8 4.74-2.85"}],["path",{"d":"M12 13.5V8"}]],
+  "brain": [["path",{"d":"M12 18V5"}],["path",{"d":"M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"}],["path",{"d":"M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"}],["path",{"d":"M17.997 5.125a4 4 0 0 1 2.526 5.77"}],["path",{"d":"M18 18a4 4 0 0 0 2-7.464"}],["path",{"d":"M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"}],["path",{"d":"M6 18a4 4 0 0 1-2-7.464"}],["path",{"d":"M6.003 5.125a4 4 0 0 0-2.526 5.77"}]],
+  "briefcase": [["path",{"d":"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"}],["rect",{"width":"20","height":"14","x":"2","y":"6","rx":"2"}]],
+  "brush": [["path",{"d":"m11 10 3 3"}],["path",{"d":"M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"}],["path",{"d":"M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"}]],
+  "building": [["path",{"d":"M12 10h.01"}],["path",{"d":"M12 14h.01"}],["path",{"d":"M12 6h.01"}],["path",{"d":"M16 10h.01"}],["path",{"d":"M16 14h.01"}],["path",{"d":"M16 6h.01"}],["path",{"d":"M8 10h.01"}],["path",{"d":"M8 14h.01"}],["path",{"d":"M8 6h.01"}],["path",{"d":"M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"}],["rect",{"x":"4","y":"2","width":"16","height":"20","rx":"2"}]],
+  "calendar": [["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "calendar-days": [["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 13h.01"}],["path",{"d":"M12 13h.01"}],["path",{"d":"M16 13h.01"}],["path",{"d":"M8 17h.01"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M16 17h.01"}]],
+  "calendar-range": [["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M16 2v3"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 2v3"}],["path",{"d":"M17 13h-6"}],["path",{"d":"M13 17H7"}],["path",{"d":"M7 13h.01"}],["path",{"d":"M17 17h.01"}]],
+  "camera": [["path",{"d":"M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"}],["circle",{"cx":"12","cy":"13","r":"3"}]],
+  "chart-area": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"}]],
+  "chart-column": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M18 17V9"}],["path",{"d":"M13 17V5"}],["path",{"d":"M8 17v-3"}]],
+  "chart-line": [["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"m19 9-5 5-4-4-3 3"}]],
+  "chart-pie": [["path",{"d":"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"}],["path",{"d":"M21.21 15.89A10 10 0 1 1 8 2.83"}]],
+  "chart-scatter": [["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],["circle",{"cx":"18.5","cy":"5.5","r":".5","fill":"currentColor"}],["circle",{"cx":"11.5","cy":"11.5","r":".5","fill":"currentColor"}],["circle",{"cx":"7.5","cy":"16.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"14.5","r":".5","fill":"currentColor"}],["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}]],
+  "check": [["path",{"d":"M20 6 9 17l-5-5"}]],
+  "chevron-down": [["path",{"d":"m6 9 6 6 6-6"}]],
+  "chevron-left": [["path",{"d":"m15 18-6-6 6-6"}]],
+  "chevron-right": [["path",{"d":"m9 18 6-6-6-6"}]],
+  "chevron-up": [["path",{"d":"m18 15-6-6-6 6"}]],
+  "chevrons-down": [["path",{"d":"m7 6 5 5 5-5"}],["path",{"d":"m7 13 5 5 5-5"}]],
+  "chevrons-up": [["path",{"d":"m17 11-5-5-5 5"}],["path",{"d":"m17 18-5-5-5 5"}]],
+  "chevrons-up-down": [["path",{"d":"m7 15 5 5 5-5"}],["path",{"d":"m7 9 5-5 5 5"}]],
+  "circle": [["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-alert": [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"12","x2":"12","y1":"8","y2":"12"}],["line",{"x1":"12","x2":"12.01","y1":"16","y2":"16"}]],
+  "circle-check": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],
+  "circle-dollar-sign": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],
+  "circle-dot": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-play": [["path",{"d":"M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"}],["circle",{"cx":"12","cy":"12","r":"10"}]],
+  "circle-plus": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M8 12h8"}],["path",{"d":"M12 8v8"}]],
+  "circle-question-mark": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
+  "circle-slash": [["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"9","x2":"15","y1":"15","y2":"9"}]],
+  "circle-user": [["circle",{"cx":"12","cy":"12","r":"10"}],["circle",{"cx":"12","cy":"10","r":"3"}],["path",{"d":"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"}]],
+  "circle-x": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"m9 9 6 6"}]],
+  "clipboard-check": [["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"m9 14 2 2 4-4"}]],
+  "clipboard-list": [["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"M12 11h4"}],["path",{"d":"M12 16h4"}],["path",{"d":"M8 11h.01"}],["path",{"d":"M8 16h.01"}]],
+  "clock": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 6v6l4 2"}]],
+  "cloud": [["path",{"d":"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"}]],
+  "cloud-off": [["path",{"d":"M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057"}],["path",{"d":"M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78"}],["path",{"d":"m2 2 20 20"}]],
+  "cloud-upload": [["path",{"d":"M12 13v8"}],["path",{"d":"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"}],["path",{"d":"m8 17 4-4 4 4"}]],
+  "code-xml": [["path",{"d":"m18 16 4-4-4-4"}],["path",{"d":"m6 8-4 4 4 4"}],["path",{"d":"m14.5 4-5 16"}]],
+  "columns-3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "command": [["path",{"d":"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"}]],
+  "compass": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"}]],
+  "cookie": [["path",{"d":"M11 17h.01"}],["path",{"d":"M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2"}],["path",{"d":"M12 12h.01"}],["path",{"d":"M16 16h.01"}],["path",{"d":"M16 3h.01"}],["path",{"d":"M21 4h.01"}],["path",{"d":"M21 8h.01"}],["path",{"d":"M7 14h.01"}],["path",{"d":"M9 8h.01"}]],
+  "copy": [["rect",{"width":"14","height":"14","x":"8","y":"8","rx":"2","ry":"2"}],["path",{"d":"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]],
+  "credit-card": [["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"2"}],["line",{"x1":"2","x2":"22","y1":"10","y2":"10"}],["path",{"d":"M6 14h2"}]],
+  "database": [["ellipse",{"cx":"12","cy":"5","rx":"9","ry":"3"}],["path",{"d":"M3 5V19A9 3 0 0 0 21 19V5"}],["path",{"d":"M3 12A9 3 0 0 0 21 12"}]],
+  "dollar-sign": [["line",{"x1":"12","x2":"12","y1":"2","y2":"22"}],["path",{"d":"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"}]],
+  "dot": [["circle",{"cx":"12","cy":"12","r":"1"}]],
+  "download": [["path",{"d":"M12 15V3"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["path",{"d":"m7 10 5 5 5-5"}]],
+  "ellipsis": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"19","cy":"12","r":"1"}],["circle",{"cx":"5","cy":"12","r":"1"}]],
+  "ellipsis-vertical": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"5","r":"1"}],["circle",{"cx":"12","cy":"19","r":"1"}]],
+  "external-link": [["path",{"d":"M15 3h6v6"}],["path",{"d":"M10 14 21 3"}],["path",{"d":"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]],
+  "eye": [["path",{"d":"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
+  "eye-off": [["path",{"d":"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"}],["path",{"d":"M14.084 14.158a3 3 0 0 1-4.242-4.242"}],["path",{"d":"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"}],["path",{"d":"m2 2 20 20"}]],
+  "file": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}]],
+  "file-code": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 12.5 8 15l2 2.5"}],["path",{"d":"m14 12.5 2 2.5-2 2.5"}]],
+  "file-down": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 18v-6"}],["path",{"d":"m9 15 3 3 3-3"}]],
+  "file-image": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"10","cy":"12","r":"2"}],["path",{"d":"m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"}]],
+  "file-pen": [["path",{"d":"M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"}]],
+  "file-pen-line": [["path",{"d":"M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"}],["path",{"d":"M14.487 7.858A1 1 0 0 1 14 7V2"}],["path",{"d":"M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"}],["path",{"d":"M8 18h1"}]],
+  "file-plus": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M9 15h6"}],["path",{"d":"M12 18v-6"}]],
+  "file-question-mark": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"}]],
+  "file-search": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"11.5","cy":"14.5","r":"2.5"}],["path",{"d":"M13.3 16.3 15 18"}]],
+  "file-spreadsheet": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M8 13h2"}],["path",{"d":"M14 13h2"}],["path",{"d":"M8 17h2"}],["path",{"d":"M14 17h2"}]],
+  "file-text": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 9H8"}],["path",{"d":"M16 13H8"}],["path",{"d":"M16 17H8"}]],
+  "file-up": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 12v6"}],["path",{"d":"m15 15-3-3-3 3"}]],
+  "file-video-camera": [["path",{"d":"M4 12V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"m10 17.843 3.033-1.755a.64.64 0 0 1 .967.56v4.704a.65.65 0 0 1-.967.56L10 20.157"}],["rect",{"width":"7","height":"6","x":"3","y":"16","rx":"1"}]],
+  "files": [["path",{"d":"M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"}],["path",{"d":"M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z"}],["path",{"d":"M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1"}]],
+  "film": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M7 3v18"}],["path",{"d":"M3 7.5h4"}],["path",{"d":"M3 12h18"}],["path",{"d":"M3 16.5h4"}],["path",{"d":"M17 3v18"}],["path",{"d":"M17 7.5h4"}],["path",{"d":"M17 16.5h4"}]],
+  "fingerprint-pattern": [["path",{"d":"M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"}],["path",{"d":"M14 13.12c0 2.38 0 6.38-1 8.88"}],["path",{"d":"M17.29 21.02c.12-.6.43-2.3.5-3.02"}],["path",{"d":"M2 12a10 10 0 0 1 18-6"}],["path",{"d":"M2 16h.01"}],["path",{"d":"M21.8 16c.2-2 .131-5.354 0-6"}],["path",{"d":"M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"}],["path",{"d":"M8.65 22c.21-.66.45-1.32.57-2"}],["path",{"d":"M9 6.8a6 6 0 0 1 9 5.2v2"}]],
+  "flag": [["path",{"d":"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"}]],
+  "folder": [["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
+  "folder-archive": [["circle",{"cx":"15","cy":"19","r":"2"}],["path",{"d":"M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"}],["path",{"d":"M15 11v-1"}],["path",{"d":"M15 17v-2"}]],
+  "folder-kanban": [["path",{"d":"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"}],["path",{"d":"M8 10v4"}],["path",{"d":"M12 10v2"}],["path",{"d":"M16 10v6"}]],
+  "folder-open": [["path",{"d":"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}]],
+  "folder-plus": [["path",{"d":"M12 10v6"}],["path",{"d":"M9 13h6"}],["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
+  "folder-tree": [["path",{"d":"M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M3 5a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 3v13a2 2 0 0 0 2 2h3"}]],
+  "funnel": [["path",{"d":"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"}]],
+  "gift": [["path",{"d":"M12 7v14"}],["path",{"d":"M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"}],["path",{"d":"M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"}],["rect",{"x":"3","y":"7","width":"18","height":"4","rx":"1"}]],
+  "git-compare": [["circle",{"cx":"18","cy":"18","r":"3"}],["circle",{"cx":"6","cy":"6","r":"3"}],["path",{"d":"M13 6h3a2 2 0 0 1 2 2v7"}],["path",{"d":"M11 18H8a2 2 0 0 1-2-2V9"}]],
+  "globe": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}],["path",{"d":"M2 12h20"}]],
+  "globe-lock": [["path",{"d":"M15.686 15A14.5 14.5 0 0 1 12 22a14.5 14.5 0 0 1 0-20 10 10 0 1 0 9.542 13"}],["path",{"d":"M2 12h8.5"}],["path",{"d":"M20 6V4a2 2 0 1 0-4 0v2"}],["rect",{"width":"8","height":"5","x":"14","y":"6","rx":"1"}]],
+  "graduation-cap": [["path",{"d":"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"}],["path",{"d":"M22 10v6"}],["path",{"d":"M6 12.5V16a6 3 0 0 0 12 0v-3.5"}]],
+  "grid-3x3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],
+  "grip-vertical": [["circle",{"cx":"9","cy":"12","r":"1"}],["circle",{"cx":"9","cy":"5","r":"1"}],["circle",{"cx":"9","cy":"19","r":"1"}],["circle",{"cx":"15","cy":"12","r":"1"}],["circle",{"cx":"15","cy":"5","r":"1"}],["circle",{"cx":"15","cy":"19","r":"1"}]],
+  "group": [["path",{"d":"M3 7V5c0-1.1.9-2 2-2h2"}],["path",{"d":"M17 3h2c1.1 0 2 .9 2 2v2"}],["path",{"d":"M21 17v2c0 1.1-.9 2-2 2h-2"}],["path",{"d":"M7 21H5c-1.1 0-2-.9-2-2v-2"}],["rect",{"width":"7","height":"5","x":"7","y":"7","rx":"1"}],["rect",{"width":"7","height":"5","x":"10","y":"12","rx":"1"}]],
+  "handshake": [["path",{"d":"m11 17 2 2a1 1 0 1 0 3-3"}],["path",{"d":"m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"}],["path",{"d":"m21 3 1 11h-2"}],["path",{"d":"M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"}],["path",{"d":"M3 4h8"}]],
+  "hash": [["line",{"x1":"4","x2":"20","y1":"9","y2":"9"}],["line",{"x1":"4","x2":"20","y1":"15","y2":"15"}],["line",{"x1":"10","x2":"8","y1":"3","y2":"21"}],["line",{"x1":"16","x2":"14","y1":"3","y2":"21"}]],
+  "heading": [["path",{"d":"M6 12h12"}],["path",{"d":"M6 20V4"}],["path",{"d":"M18 20V4"}]],
+  "headphones": [["path",{"d":"M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"}]],
+  "heart": [["path",{"d":"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"}]],
+  "heart-handshake": [["path",{"d":"M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"}]],
+  "hourglass": [["path",{"d":"M5 22h14"}],["path",{"d":"M5 2h14"}],["path",{"d":"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"}],["path",{"d":"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"}]],
+  "house": [["path",{"d":"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["path",{"d":"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}]],
+  "id-card": [["path",{"d":"M13 19a4 4 0 00-8 0"}],["path",{"d":"M16 10h2"}],["path",{"d":"M16 14h2"}],["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"x":"2","y":"5","width":"20","height":"14","rx":"2"}]],
+  "image": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2","ry":"2"}],["circle",{"cx":"9","cy":"9","r":"2"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]],
+  "image-off": [["line",{"x1":"2","x2":"22","y1":"2","y2":"22"}],["path",{"d":"M10.41 10.41a2 2 0 1 1-2.83-2.83"}],["line",{"x1":"13.5","x2":"6","y1":"13.5","y2":"21"}],["line",{"x1":"18","x2":"21","y1":"12","y2":"15"}],["path",{"d":"M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"}],["path",{"d":"M21 15V5a2 2 0 0 0-2-2H9"}]],
+  "image-plus": [["path",{"d":"M16 5h6"}],["path",{"d":"M19 2v6"}],["path",{"d":"M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}],["circle",{"cx":"9","cy":"9","r":"2"}]],
+  "images": [["path",{"d":"m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"}],["path",{"d":"M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"}],["circle",{"cx":"13","cy":"7","r":"1","fill":"currentColor"}],["rect",{"x":"8","y":"2","width":"14","height":"14","rx":"2"}]],
+  "inbox": [["polyline",{"points":"22 12 16 12 14 15 10 15 8 12 2 12"}],["path",{"d":"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"}]],
+  "info": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 16v-4"}],["path",{"d":"M12 8h.01"}]],
+  "italic": [["line",{"x1":"19","x2":"10","y1":"4","y2":"4"}],["line",{"x1":"14","x2":"5","y1":"20","y2":"20"}],["line",{"x1":"15","x2":"9","y1":"4","y2":"20"}]],
+  "kanban": [["path",{"d":"M5 3v14"}],["path",{"d":"M12 3v8"}],["path",{"d":"M19 3v18"}]],
+  "key": [["path",{"d":"m2 21 9.6-9.6"}],["path",{"d":"m7.5 15.5 2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19"}],["circle",{"cx":"15.5","cy":"7.5","r":"5.5"}]],
+  "key-round": [["path",{"d":"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"}],["circle",{"cx":"16.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "lamp-desk": [["path",{"d":"M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z"}],["path",{"d":"m14.207 4.793-3.414 3.414"}],["path",{"d":"M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"}],["path",{"d":"m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18"}]],
+  "landmark": [["path",{"d":"M10 18v-7"}],["path",{"d":"M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"}],["path",{"d":"M14 18v-7"}],["path",{"d":"M18 18v-7"}],["path",{"d":"M3 22h18"}],["path",{"d":"M6 18v-7"}]],
+  "languages": [["path",{"d":"m5 8 6 6"}],["path",{"d":"m4 14 6-6 2-3"}],["path",{"d":"M2 5h12"}],["path",{"d":"M7 2h1"}],["path",{"d":"m22 22-5-10-5 10"}],["path",{"d":"M14 18h6"}]],
+  "laptop": [["path",{"d":"M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z"}],["path",{"d":"M20.054 15.987H3.946"}]],
+  "layers": [["path",{"d":"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{"d":"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{"d":"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]],
+  "layout-dashboard": [["rect",{"width":"7","height":"9","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"5","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"9","x":"14","y":"12","rx":"1"}],["rect",{"width":"7","height":"5","x":"3","y":"16","rx":"1"}]],
+  "layout-grid": [["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"14","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}]],
+  "layout-list": [["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}],["path",{"d":"M14 4h7"}],["path",{"d":"M14 9h7"}],["path",{"d":"M14 15h7"}],["path",{"d":"M14 20h7"}]],
+  "layout-template": [["rect",{"width":"18","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"9","height":"7","x":"3","y":"14","rx":"1"}],["rect",{"width":"5","height":"7","x":"16","y":"14","rx":"1"}]],
+  "life-buoy": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m4.93 4.93 4.24 4.24"}],["path",{"d":"m14.83 9.17 4.24-4.24"}],["path",{"d":"m14.83 14.83 4.24 4.24"}],["path",{"d":"m9.17 14.83-4.24 4.24"}],["circle",{"cx":"12","cy":"12","r":"4"}]],
+  "lightbulb": [["path",{"d":"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"}],["path",{"d":"M9 18h6"}],["path",{"d":"M10 22h4"}]],
+  "link": [["path",{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["path",{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]],
+  "link-2": [["path",{"d":"M9 17H7A5 5 0 0 1 7 7h2"}],["path",{"d":"M15 7h2a5 5 0 1 1 0 10h-2"}],["line",{"x1":"8","x2":"16","y1":"12","y2":"12"}]],
+  "list": [["path",{"d":"M3 5h.01"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M3 19h.01"}],["path",{"d":"M8 5h13"}],["path",{"d":"M8 12h13"}],["path",{"d":"M8 19h13"}]],
+  "list-checks": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["path",{"d":"m3 7 2 2 4-4"}]],
+  "list-filter": [["path",{"d":"M2 5h20"}],["path",{"d":"M6 12h12"}],["path",{"d":"M9 19h6"}]],
+  "list-ordered": [["path",{"d":"M11 5h10"}],["path",{"d":"M11 12h10"}],["path",{"d":"M11 19h10"}],["path",{"d":"M4 4h1v5"}],["path",{"d":"M4 9h2"}],["path",{"d":"M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"}]],
+  "list-todo": [["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["rect",{"x":"3","y":"4","width":"6","height":"6","rx":"1"}]],
+  "list-tree": [["path",{"d":"M8 5h13"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"M3 10a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 5v12a2 2 0 0 0 2 2h3"}]],
+  "loader": [["path",{"d":"M12 2v4"}],["path",{"d":"m16.2 7.8 2.9-2.9"}],["path",{"d":"M18 12h4"}],["path",{"d":"m16.2 16.2 2.9 2.9"}],["path",{"d":"M12 18v4"}],["path",{"d":"m4.9 19.1 2.9-2.9"}],["path",{"d":"M2 12h4"}],["path",{"d":"m4.9 4.9 2.9 2.9"}]],
+  "loader-circle": [["path",{"d":"M21 12a9 9 0 1 1-6.219-8.56"}]],
+  "lock": [["rect",{"width":"18","height":"11","x":"3","y":"11","rx":"2","ry":"2"}],["path",{"d":"M7 11V7a5 5 0 0 1 10 0v4"}]],
+  "lock-keyhole": [["circle",{"cx":"12","cy":"16","r":"1"}],["rect",{"x":"3","y":"10","width":"18","height":"12","rx":"2"}],["path",{"d":"M7 10V7a5 5 0 0 1 10 0v3"}]],
+  "log-in": [["path",{"d":"m10 17 5-5-5-5"}],["path",{"d":"M15 12H3"}],["path",{"d":"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"}]],
+  "log-out": [["path",{"d":"m16 17 5-5-5-5"}],["path",{"d":"M21 12H9"}],["path",{"d":"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"}]],
+  "mail": [["path",{"d":"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"}],["rect",{"x":"2","y":"4","width":"20","height":"16","rx":"2"}]],
+  "mail-check": [["path",{"d":"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"}],["path",{"d":"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"}],["path",{"d":"m16 19 2 2 4-4"}]],
+  "mail-open": [["path",{"d":"M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"}],["path",{"d":"m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"}]],
+  "map-pin": [["path",{"d":"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}],["circle",{"cx":"12","cy":"10","r":"3"}]],
+  "megaphone": [["path",{"d":"M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"}],["path",{"d":"M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"}],["path",{"d":"M8 6v8"}]],
+  "menu": [["path",{"d":"M4 5h16"}],["path",{"d":"M4 12h16"}],["path",{"d":"M4 19h16"}]],
+  "message-circle": [["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}]],
+  "message-circle-question-mark": [["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
+  "message-square": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}]],
+  "message-square-more": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M12 11h.01"}],["path",{"d":"M16 11h.01"}],["path",{"d":"M8 11h.01"}]],
+  "message-square-quote": [["path",{"d":"M14 14a2 2 0 0 0 2-2V8h-2"}],["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M8 14a2 2 0 0 0 2-2V8H8"}]],
+  "message-square-text": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M7 11h10"}],["path",{"d":"M7 15h6"}],["path",{"d":"M7 7h8"}]],
+  "messages-square": [["path",{"d":"M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"}],["path",{"d":"M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"}]],
+  "minus": [["path",{"d":"M5 12h14"}]],
+  "monitor": [["rect",{"width":"20","height":"14","x":"2","y":"3","rx":"2"}],["line",{"x1":"8","x2":"16","y1":"21","y2":"21"}],["line",{"x1":"12","x2":"12","y1":"17","y2":"21"}]],
+  "monitor-smartphone": [["path",{"d":"M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"}],["path",{"d":"M10 19v-3.96 3.15"}],["path",{"d":"M7 19h5"}],["rect",{"width":"6","height":"10","x":"16","y":"12","rx":"2"}]],
+  "moon": [["path",{"d":"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"}]],
+  "mountain": [["path",{"d":"m8 3 4 8 5-5 5 15H2L8 3z"}]],
+  "mouse-pointer-click": [["path",{"d":"M14 4.1 12 6"}],["path",{"d":"m5.1 8-2.9-.8"}],["path",{"d":"m6 12-1.9 2"}],["path",{"d":"M7.2 2.2 8 5.1"}],["path",{"d":"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"}]],
+  "move-right": [["path",{"d":"M18 8L22 12L18 16"}],["path",{"d":"M2 12H22"}]],
+  "music": [["path",{"d":"M9 18V5l12-2v13"}],["circle",{"cx":"6","cy":"18","r":"3"}],["circle",{"cx":"18","cy":"16","r":"3"}]],
+  "newspaper": [["path",{"d":"M15 18h-5"}],["path",{"d":"M18 14h-8"}],["path",{"d":"M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"}],["rect",{"width":"8","height":"4","x":"10","y":"6","rx":"1"}]],
+  "orbit": [["path",{"d":"M20.341 6.484A10 10 0 0 1 10.266 21.85"}],["path",{"d":"M3.659 17.516A10 10 0 0 1 13.74 2.152"}],["circle",{"cx":"12","cy":"12","r":"3"}],["circle",{"cx":"19","cy":"5","r":"2"}],["circle",{"cx":"5","cy":"19","r":"2"}]],
+  "package": [["path",{"d":"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}],["path",{"d":"M12 22V12"}],["polyline",{"points":"3.29 7 12 12 20.71 7"}],["path",{"d":"m7.5 4.27 9 5.15"}]],
+  "package-check": [["path",{"d":"M12 22V12"}],["path",{"d":"m16 17 2 2 4-4"}],["path",{"d":"M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"}],["path",{"d":"M3.29 7 12 12l8.71-5"}],["path",{"d":"m7.5 4.27 8.997 5.148"}]],
+  "package-open": [["path",{"d":"M12 22v-9"}],["path",{"d":"M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"}],["path",{"d":"M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"}],["path",{"d":"M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"}]],
+  "palette": [["path",{"d":"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"}],["circle",{"cx":"13.5","cy":"6.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"10.5","r":".5","fill":"currentColor"}],["circle",{"cx":"6.5","cy":"12.5","r":".5","fill":"currentColor"}],["circle",{"cx":"8.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "panel-bottom": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 15h18"}]],
+  "panel-left": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}]],
+  "panel-left-close": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"m16 15-3-3 3-3"}]],
+  "panel-top": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "paperclip": [["path",{"d":"m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"}]],
+  "pause": [["rect",{"x":"14","y":"3","width":"5","height":"18","rx":"1"}],["rect",{"x":"5","y":"3","width":"5","height":"18","rx":"1"}]],
+  "pencil": [["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}],["path",{"d":"m15 5 4 4"}]],
+  "pencil-line": [["path",{"d":"M13 21h8"}],["path",{"d":"m15 5 4 4"}],["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}]],
+  "percent": [["line",{"x1":"19","x2":"5","y1":"5","y2":"19"}],["circle",{"cx":"6.5","cy":"6.5","r":"2.5"}],["circle",{"cx":"17.5","cy":"17.5","r":"2.5"}]],
+  "phone": [["path",{"d":"M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"}]],
+  "pilcrow": [["path",{"d":"M13 4v16"}],["path",{"d":"M17 4v16"}],["path",{"d":"M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}]],
+  "pin": [["path",{"d":"M12 17v5"}],["path",{"d":"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"}]],
+  "play": [["path",{"d":"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"}]],
+  "plug": [["path",{"d":"M12 22v-5"}],["path",{"d":"M15 8V2"}],["path",{"d":"M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"}],["path",{"d":"M9 8V2"}]],
+  "plug-zap": [["path",{"d":"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"}],["path",{"d":"m2 22 3-3"}],["path",{"d":"M7.5 13.5 10 11"}],["path",{"d":"M10.5 16.5 13 14"}],["path",{"d":"m18 3-4 4h6l-4 4"}]],
+  "plus": [["path",{"d":"M5 12h14"}],["path",{"d":"M12 5v14"}]],
+  "presentation": [["path",{"d":"M2 3h20"}],["path",{"d":"M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"}],["path",{"d":"m7 21 5-5 5 5"}]],
+  "printer": [["path",{"d":"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"}],["path",{"d":"M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"}],["rect",{"x":"6","y":"14","width":"12","height":"8","rx":"1"}]],
+  "puzzle": [["path",{"d":"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}]],
+  "qr-code": [["rect",{"width":"5","height":"5","x":"3","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"16","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"3","y":"16","rx":"1"}],["path",{"d":"M21 16h-3a2 2 0 0 0-2 2v3"}],["path",{"d":"M21 21v.01"}],["path",{"d":"M12 7v3a2 2 0 0 1-2 2H7"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M12 3h.01"}],["path",{"d":"M12 16v.01"}],["path",{"d":"M16 12h1"}],["path",{"d":"M21 12v.01"}],["path",{"d":"M12 21v-1"}]],
+  "quote": [["path",{"d":"M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}],["path",{"d":"M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}]],
+  "receipt-text": [["path",{"d":"M13 16H8"}],["path",{"d":"M14 8H8"}],["path",{"d":"M16 12H8"}],["path",{"d":"M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"}]],
+  "redo-2": [["path",{"d":"m15 14 5-5-5-5"}],["path",{"d":"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]],
+  "refresh-cw": [["path",{"d":"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}],["path",{"d":"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{"d":"M8 16H3v5"}]],
+  "rocket": [["path",{"d":"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"}],["path",{"d":"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"}],["path",{"d":"M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"}],["path",{"d":"M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"}]],
+  "rotate-ccw": [["path",{"d":"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}],["path",{"d":"M3 3v5h5"}]],
+  "rotate-cw": [["path",{"d":"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}]],
+  "rows-3": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "save": [["path",{"d":"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}],["path",{"d":"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}],["path",{"d":"M7 3v4a1 1 0 0 0 1 1h7"}]],
+  "scale": [["path",{"d":"M12 3v18"}],["path",{"d":"m19 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"}],["path",{"d":"m5 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M7 21h10"}]],
+  "scan-face": [["path",{"d":"M3 7V5a2 2 0 0 1 2-2h2"}],["path",{"d":"M17 3h2a2 2 0 0 1 2 2v2"}],["path",{"d":"M21 17v2a2 2 0 0 1-2 2h-2"}],["path",{"d":"M7 21H5a2 2 0 0 1-2-2v-2"}],["path",{"d":"M8 14s1.5 2 4 2 4-2 4-2"}],["path",{"d":"M9 9h.01"}],["path",{"d":"M15 9h.01"}]],
+  "scroll-text": [["path",{"d":"M15 12h-5"}],["path",{"d":"M15 8h-5"}],["path",{"d":"M19 17V5a2 2 0 0 0-2-2H4"}],["path",{"d":"M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"}]],
+  "search": [["path",{"d":"m21 21-4.34-4.34"}],["circle",{"cx":"11","cy":"11","r":"8"}]],
+  "search-x": [["path",{"d":"m13.5 8.5-5 5"}],["path",{"d":"m8.5 8.5 5 5"}],["circle",{"cx":"11","cy":"11","r":"8"}],["path",{"d":"m21 21-4.3-4.3"}]],
+  "send": [["path",{"d":"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"}],["path",{"d":"m21.854 2.147-10.94 10.939"}]],
+  "settings": [["path",{"d":"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
+  "settings-2": [["path",{"d":"M14 17H5"}],["path",{"d":"M19 7h-9"}],["circle",{"cx":"17","cy":"17","r":"3"}],["circle",{"cx":"7","cy":"7","r":"3"}]],
+  "share": [["path",{"d":"M12 2v13"}],["path",{"d":"m16 6-4-4-4 4"}],["path",{"d":"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"}]],
+  "share-2": [["circle",{"cx":"18","cy":"5","r":"3"}],["circle",{"cx":"6","cy":"12","r":"3"}],["circle",{"cx":"18","cy":"19","r":"3"}],["line",{"x1":"8.59","x2":"15.42","y1":"13.51","y2":"17.49"}],["line",{"x1":"15.41","x2":"8.59","y1":"6.51","y2":"10.49"}]],
+  "shield": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}]],
+  "shield-alert": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"M12 8v4"}],["path",{"d":"M12 16h.01"}]],
+  "shield-ban": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m4.243 5.21 14.39 12.472"}]],
+  "shield-check": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m9 12 2 2 4-4"}]],
+  "shield-x": [["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m14.5 9.5-5 5"}],["path",{"d":"m9.5 9.5 5 5"}]],
+  "shopping-bag": [["path",{"d":"M16 10a4 4 0 0 1-8 0"}],["path",{"d":"M3.103 6.034h17.794"}],["path",{"d":"M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"}]],
+  "shopping-cart": [["path",{"d":"m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"}],["path",{"d":"M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"}],["circle",{"cx":"18","cy":"20","r":"2"}],["circle",{"cx":"8","cy":"20","r":"2"}]],
+  "sliders-horizontal": [["path",{"d":"M10 5H3"}],["path",{"d":"M12 19H3"}],["path",{"d":"M14 3v4"}],["path",{"d":"M16 17v4"}],["path",{"d":"M21 12h-9"}],["path",{"d":"M21 19h-5"}],["path",{"d":"M21 5h-7"}],["path",{"d":"M8 10v4"}],["path",{"d":"M8 12H3"}]],
+  "sliders-vertical": [["path",{"d":"M10 8h4"}],["path",{"d":"M12 21v-9"}],["path",{"d":"M12 8V3"}],["path",{"d":"M17 16h4"}],["path",{"d":"M19 12V3"}],["path",{"d":"M19 21v-5"}],["path",{"d":"M3 14h4"}],["path",{"d":"M5 10V3"}],["path",{"d":"M5 21v-7"}]],
+  "smartphone": [["rect",{"width":"14","height":"20","x":"5","y":"2","rx":"2","ry":"2"}],["path",{"d":"M12 18h.01"}]],
+  "sparkles": [["path",{"d":"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"}],["path",{"d":"M20 2v4"}],["path",{"d":"M22 4h-4"}],["circle",{"cx":"4","cy":"20","r":"2"}]],
+  "square": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}]],
+  "square-pen": [["path",{"d":"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}],["path",{"d":"M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"}]],
+  "star": [["path",{"d":"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"}]],
+  "star-half": [["path",{"d":"M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"}]],
+  "store": [["path",{"d":"M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"}],["path",{"d":"M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"}],["path",{"d":"M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"}]],
+  "sun": [["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M12 2v2"}],["path",{"d":"M12 20v2"}],["path",{"d":"m4.93 4.93 1.41 1.41"}],["path",{"d":"m17.66 17.66 1.41 1.41"}],["path",{"d":"M2 12h2"}],["path",{"d":"M20 12h2"}],["path",{"d":"m6.34 17.66-1.41 1.41"}],["path",{"d":"m19.07 4.93-1.41 1.41"}]],
+  "table": [["path",{"d":"M12 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}]],
+  "table-properties": [["path",{"d":"M15 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "tablet": [["rect",{"width":"16","height":"20","x":"4","y":"2","rx":"2","ry":"2"}],["line",{"x1":"12","x2":"12.01","y1":"18","y2":"18"}]],
+  "tag": [["path",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}]],
+  "tags": [["path",{"d":"M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"}],["path",{"d":"M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"}],["circle",{"cx":"10.5","cy":"6.5","r":".5","fill":"currentColor"}]],
+  "terminal": [["path",{"d":"M12 19h8"}],["path",{"d":"m4 17 6-6-6-6"}]],
+  "text-align-center": [["path",{"d":"M21 5H3"}],["path",{"d":"M17 12H7"}],["path",{"d":"M19 19H5"}]],
+  "text-align-end": [["path",{"d":"M21 5H3"}],["path",{"d":"M21 12H9"}],["path",{"d":"M21 19H7"}]],
+  "text-align-start": [["path",{"d":"M21 5H3"}],["path",{"d":"M15 12H3"}],["path",{"d":"M17 19H3"}]],
+  "text-cursor-input": [["path",{"d":"M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"}],["path",{"d":"M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"}],["path",{"d":"M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"}],["path",{"d":"M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"}],["path",{"d":"M9 6v12"}]],
+  "thumbs-down": [["path",{"d":"M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"}],["path",{"d":"M17 14V2"}]],
+  "thumbs-up": [["path",{"d":"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"}],["path",{"d":"M7 10v12"}]],
+  "ticket-percent": [["path",{"d":"M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"}],["path",{"d":"M9 9h.01"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"M15 15h.01"}]],
+  "timer": [["line",{"x1":"10","x2":"14","y1":"2","y2":"2"}],["line",{"x1":"12","x2":"15","y1":"14","y2":"11"}],["circle",{"cx":"12","cy":"14","r":"8"}]],
+  "toggle-left": [["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"7"}]],
+  "trash": [["path",{"d":"M10 11v6"}],["path",{"d":"M14 11v6"}],["path",{"d":"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{"d":"M3 6h18"}],["path",{"d":"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]],
+  "trees": [["path",{"d":"M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"}],["path",{"d":"M7 16v6"}],["path",{"d":"M13 19v3"}],["path",{"d":"M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"}]],
+  "trending-down": [["path",{"d":"M16 17h6v-6"}],["path",{"d":"m22 17-8.5-8.5-5 5L2 7"}]],
+  "trending-up": [["path",{"d":"M16 7h6v6"}],["path",{"d":"m22 7-8.5 8.5-5-5L2 17"}]],
+  "triangle-alert": [["path",{"d":"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}],["path",{"d":"M12 9v4"}],["path",{"d":"M12 17h.01"}]],
+  "truck": [["path",{"d":"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}],["path",{"d":"M15 18H9"}],["path",{"d":"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"}],["circle",{"cx":"17","cy":"18","r":"2"}],["circle",{"cx":"7","cy":"18","r":"2"}]],
+  "type": [["path",{"d":"M12 4v16"}],["path",{"d":"M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"}],["path",{"d":"M9 20h6"}]],
+  "undo-2": [["path",{"d":"M9 14 4 9l5-5"}],["path",{"d":"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]],
+  "upload": [["path",{"d":"M12 3v12"}],["path",{"d":"m17 8-5-5-5 5"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}]],
+  "user": [["path",{"d":"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}],["circle",{"cx":"12","cy":"7","r":"4"}]],
+  "user-check": [["path",{"d":"m16 11 2 2 4-4"}],["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "user-cog": [["path",{"d":"M10 15H6a4 4 0 0 0-4 4v2"}],["path",{"d":"m14.305 16.53.923-.382"}],["path",{"d":"m15.228 13.852-.923-.383"}],["path",{"d":"m16.852 12.228-.383-.923"}],["path",{"d":"m16.852 17.772-.383.924"}],["path",{"d":"m19.148 12.228.383-.923"}],["path",{"d":"m19.53 18.696-.382-.924"}],["path",{"d":"m20.772 13.852.924-.383"}],["path",{"d":"m20.772 16.148.924.383"}],["circle",{"cx":"18","cy":"15","r":"3"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "user-pen": [["path",{"d":"M11.5 15H7a4 4 0 0 0-4 4v2"}],["path",{"d":"M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"}],["circle",{"cx":"10","cy":"7","r":"4"}]],
+  "user-plus": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"19","x2":"19","y1":"8","y2":"14"}],["line",{"x1":"22","x2":"16","y1":"11","y2":"11"}]],
+  "user-round-check": [["path",{"d":"M2 21a8 8 0 0 1 13.292-6"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"m16 19 2 2 4-4"}]],
+  "user-x": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"17","x2":"22","y1":"8","y2":"13"}],["line",{"x1":"22","x2":"17","y1":"8","y2":"13"}]],
+  "users": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["path",{"d":"M16 3.128a4 4 0 0 1 0 7.744"}],["path",{"d":"M22 21v-2a4 4 0 0 0-3-3.87"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
+  "users-round": [["path",{"d":"M18 21a8 8 0 0 0-16 0"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"}]],
+  "video": [["path",{"d":"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"}],["rect",{"x":"2","y":"6","width":"14","height":"12","rx":"2"}]],
+  "wallet": [["path",{"d":"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"}],["path",{"d":"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"}]],
+  "wand-sparkles": [["path",{"d":"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"}],["path",{"d":"m14 7 3 3"}],["path",{"d":"M5 6v4"}],["path",{"d":"M19 14v4"}],["path",{"d":"M10 2v2"}],["path",{"d":"M7 8H3"}],["path",{"d":"M21 16h-4"}],["path",{"d":"M11 3H9"}]],
+  "webhook": [["path",{"d":"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"}],["path",{"d":"m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"}],["path",{"d":"m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"}]],
+  "wrench": [["path",{"d":"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"}]],
+  "x": [["path",{"d":"M18 6 6 18"}],["path",{"d":"m6 6 12 12"}]],
+  "zap": [["path",{"d":"M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"}]],
+};
diff --git a/packages/vue/ui/src/primitives/radio/radio.vue b/packages/vue/ui/src/primitives/radio/radio.vue
new file mode 100644
index 0000000..c1c33fa
--- /dev/null
+++ b/packages/vue/ui/src/primitives/radio/radio.vue
@@ -0,0 +1,59 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/radio.json -->
+<!--
+  Radio renders input[type=radio] with shared Name for grouping.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Radio: the classes of each value of each prop (shadcn/cva style). */
+export const radioVariants = variants({
+  base:
+    "shrink-0 appearance-none rounded-full bg-background inset-ring inset-ring-input checked:bg-primary " +
+    "checked:inset-ring-primary radio-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      default: "size-5 [--dot:10px]",
+      sm: "size-4 [--dot:8px]",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type RadioVariant = VariantKey<typeof radioVariants, "variant">;
+export type RadioSize = VariantKey<typeof radioVariants, "size">;
+
+export type RadioProps = {
+  variant?: RadioVariant;
+  size?: RadioSize;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+const { variant, size, checked, disabled, required, class: className } = defineProps<RadioProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(radioVariants({ size, variant }), className));
+</script>
+
+<template>
+  <input
+    type="radio"
+    :class="cls || undefined"
+    :checked="checked || undefined"
+    :disabled="disabled || undefined"
+    :required="required || undefined"
+    v-bind="attrs"
+  />
+</template>
diff --git a/packages/vue/ui/src/primitives/range/range.vue b/packages/vue/ui/src/primitives/range/range.vue
new file mode 100644
index 0000000..f3029a7
--- /dev/null
+++ b/packages/vue/ui/src/primitives/range/range.vue
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/range.json -->
+<!--
+  Range renders input type=range.
+-->
+<script lang="ts">
+import { variants } from "../../utils";
+
+/** Range: the classes of each value of each prop (shadcn/cva style). */
+export const rangeVariants = variants({
+  base:
+    "h-5 w-full cursor-pointer appearance-none bg-transparent accent-primary disabled:cursor-not-allowed " +
+    "disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded " +
+    "[&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 " +
+    "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded " +
+    "[&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded " +
+    "[&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded " +
+    "[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+  variants: {},
+  defaultVariants: {},
+});
+
+export type RangeProps = {
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  ariaLabel?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { isSetNum, orUndef } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { min, max, step, disabled, ariaLabel, class: className } = defineProps<RangeProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(rangeVariants(), className));
+</script>
+
+<template>
+  <input
+    type="range"
+    :class="cls || undefined"
+    :min="(isSetNum(min) ? String(min ?? 0) : '0')"
+    :max="(isSetNum(max) ? String(max ?? 0) : '100')"
+    :step="(isSetNum(step) ? String(step ?? 0) : '1')"
+    :disabled="disabled || undefined"
+    :aria-label="orUndef(ariaLabel)"
+    v-bind="attrs"
+  />
+</template>
diff --git a/packages/vue/ui/src/primitives/select/opt-group.vue b/packages/vue/ui/src/primitives/select/opt-group.vue
new file mode 100644
index 0000000..1b3328e
--- /dev/null
+++ b/packages/vue/ui/src/primitives/select/opt-group.vue
@@ -0,0 +1,28 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/select.json -->
+<!--
+  OptGroup renders a native optgroup around option children.
+-->
+<script lang="ts">
+export type OptGroupProps = {
+  disabled?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { disabled, class: className } = defineProps<OptGroupProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <optgroup :class="cls || undefined" :disabled="disabled || undefined" v-bind="attrs">
+    <slot />
+  </optgroup>
+</template>
diff --git a/packages/vue/ui/src/primitives/select/select-option.vue b/packages/vue/ui/src/primitives/select/select-option.vue
new file mode 100644
index 0000000..bed2b57
--- /dev/null
+++ b/packages/vue/ui/src/primitives/select/select-option.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/select.json -->
+<!--
+  SelectOption renders an option for custom Select children.
+-->
+<script lang="ts">
+export type SelectOptionProps = {
+  selected?: boolean;
+  disabled?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { selected, disabled, class: className } = defineProps<SelectOptionProps>();
+const attrs = useAttrs();
+</script>
+
+<template>
+  <option :selected="selected || undefined" :disabled="disabled || undefined" v-bind="attrs">
+    <slot />
+  </option>
+</template>
diff --git a/packages/vue/ui/src/primitives/select/select.vue b/packages/vue/ui/src/primitives/select/select.vue
new file mode 100644
index 0000000..c57ab15
--- /dev/null
+++ b/packages/vue/ui/src/primitives/select/select.vue
@@ -0,0 +1,77 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/select.json -->
+<!--
+  Select renders option children from the Options list plus manual children.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Select: the classes of each value of each prop (shadcn/cva style). */
+export const selectVariants = variants({
+  base:
+    "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+    "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+    "focus-visible:inset-ring-ring rounded",
+  variants: {
+    size: {
+      sm: "h-8 px-3 text-sm",
+      default: "h-10 px-3 text-sm",
+      lg: "h-12 px-4 text-base",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted inset-ring-transparent",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type SelectOptionItem = {
+  value?: string;
+  label?: string;
+};
+
+export type SelectVariant = VariantKey<typeof selectVariants, "variant">;
+export type SelectSize = VariantKey<typeof selectVariants, "size">;
+
+export type SelectProps = {
+  variant?: SelectVariant;
+  size?: SelectSize;
+  value?: string;
+  disabled?: boolean;
+  required?: boolean;
+  options?: SelectOptionItem[];
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { eqStr } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { variant, size, value, disabled, required, options, class: className } = defineProps<SelectProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(selectVariants({ size, variant }), className));
+</script>
+
+<template>
+  <select
+    :class="cls || undefined"
+    :disabled="disabled || undefined"
+    :required="required || undefined"
+    v-bind="attrs"
+  >
+    <option
+      v-for="(item, i) in options ?? []"
+      :key="i"
+      :value="(item.value) ?? ''"
+      :selected="eqStr(item.value, value) || undefined">{{
+      item.label
+      }}</option
+    >
+    <slot />
+  </select>
+</template>
diff --git a/packages/vue/ui/src/primitives/separator/separator.vue b/packages/vue/ui/src/primitives/separator/separator.vue
new file mode 100644
index 0000000..8546155
--- /dev/null
+++ b/packages/vue/ui/src/primitives/separator/separator.vue
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/separator.json -->
+<!--
+  Separator renders hr with optional decorative semantics.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Separator: the classes of each value of each prop (shadcn/cva style). */
+export const separatorVariants = variants({
+  base: "shrink-0 border-0 bg-border",
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "h-full w-px",
+    },
+    variant: {
+      default: "",
+      spaced: "my-6",
+    },
+  },
+  defaultVariants: { orientation: "horizontal", variant: "default" },
+});
+
+export type SeparatorVariant = VariantKey<typeof separatorVariants, "variant">;
+export type SeparatorOrientation = VariantKey<typeof separatorVariants, "orientation">;
+
+export type SeparatorProps = {
+  variant?: SeparatorVariant;
+  orientation?: SeparatorOrientation;
+  decorative?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { eqStr } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { variant, orientation, decorative, class: className } = defineProps<SeparatorProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(separatorVariants({ orientation, variant }), className));
+</script>
+
+<template>
+  <hr
+    :class="cls || undefined"
+    :role="decorative ? 'presentation' : undefined"
+    :aria-hidden="decorative ? 'true' : undefined"
+    :aria-orientation="eqStr(orientation, 'vertical') ? 'vertical' : undefined"
+    v-bind="attrs"
+  />
+</template>
diff --git a/packages/vue/ui/src/primitives/sheet/sheet-close.vue b/packages/vue/ui/src/primitives/sheet/sheet-close.vue
new file mode 100644
index 0000000..841ad03
--- /dev/null
+++ b/packages/vue/ui/src/primitives/sheet/sheet-close.vue
@@ -0,0 +1,55 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/sheet.json -->
+<!--
+  SheetClose renders the close button (Lucide x) inside the panel.
+-->
+<script lang="ts">
+import { type VariantKey } from "../../utils";
+import { sheettriggerVariants } from "./sheet-trigger.vue";
+
+export type SheetCloseVariant = VariantKey<typeof sheettriggerVariants, "variant">;
+export type SheetCloseSize = VariantKey<typeof sheettriggerVariants, "size">;
+
+export type SheetCloseProps = {
+  variant?: SheetCloseVariant;
+  size?: SheetCloseSize;
+  ariaLabel?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { defaultIfEmpty } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { variant, size, ariaLabel, class: className } = defineProps<SheetCloseProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(sheettriggerVariants({ variant, size }), className));
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="cls || undefined"
+    data-ui8kit="sheet-close"
+    :aria-label="defaultIfEmpty(ariaLabel, 'Close menu')"
+    v-bind="attrs"
+  >
+    <svg
+      class="size-5"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M18 6 6 18"></path>
+      <path d="m6 6 12 12"></path>
+    </svg>
+  </button>
+</template>
diff --git a/packages/vue/ui/src/primitives/sheet/sheet-trigger.vue b/packages/vue/ui/src/primitives/sheet/sheet-trigger.vue
new file mode 100644
index 0000000..220ce5d
--- /dev/null
+++ b/packages/vue/ui/src/primitives/sheet/sheet-trigger.vue
@@ -0,0 +1,95 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/sheet.json -->
+<!--
+  SheetTrigger renders the menu button (aria-expanded, aria-controls, aria-haspopup=dialog) with Lucide menu/x
+  icons.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** SheetTrigger: the classes of each value of each prop (shadcn/cva style). */
+export const sheettriggerVariants = variants({
+  base:
+    "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  variants: {
+    variant: {
+      default: "bg-muted text-foreground hover:bg-accent",
+      ghost: "bg-transparent text-foreground hover:bg-muted",
+      contrast: "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      current: "bg-transparent text-current hover:bg-current/10",
+    },
+    size: {
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type SheetTriggerVariant = VariantKey<typeof sheettriggerVariants, "variant">;
+export type SheetTriggerSize = VariantKey<typeof sheettriggerVariants, "size">;
+
+export type SheetTriggerProps = {
+  variant?: SheetTriggerVariant;
+  size?: SheetTriggerSize;
+  controls?: string;
+  ariaLabel?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { defaultIfEmpty, orUndef } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { variant, size, controls, ariaLabel, class: className } = defineProps<SheetTriggerProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(sheettriggerVariants({ variant, size }), className));
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="cls || undefined"
+    data-ui8kit="sheet-trigger"
+    :aria-controls="orUndef(controls)"
+    aria-expanded="false"
+    aria-haspopup="dialog"
+    :aria-label="defaultIfEmpty(ariaLabel, 'Open menu')"
+    v-bind="attrs"
+  >
+    <svg
+      class="block size-5 in-aria-expanded:hidden"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <line x1="4" x2="20" y1="12" y2="12"></line>
+      <line x1="4" x2="20" y1="6" y2="6"></line>
+      <line x1="4" x2="20" y1="18" y2="18"></line>
+    </svg>
+    <svg
+      class="hidden size-5 in-aria-expanded:block"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M18 6 6 18"></path>
+      <path d="m6 6 12 12"></path>
+    </svg>
+  </button>
+</template>
diff --git a/packages/vue/ui/src/primitives/sheet/sheet.vue b/packages/vue/ui/src/primitives/sheet/sheet.vue
new file mode 100644
index 0000000..1a13df4
--- /dev/null
+++ b/packages/vue/ui/src/primitives/sheet/sheet.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/sheet.json -->
+<!--
+  Sheet renders the hidden dialog root: overlay + panel (children). ID is required for the trigger's
+  aria-controls.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Sheet: the classes of each value of each prop (shadcn/cva style). */
+export const sheetVariants = variants({
+  base: "fixed inset-0 z-50 flex",
+  variants: {
+    side: {
+      left: "flex-row justify-start",
+      right: "flex-row justify-end",
+    },
+  },
+  defaultVariants: { side: "right" },
+});
+
+export type SheetSide = VariantKey<typeof sheetVariants, "side">;
+
+export type SheetProps = {
+  side?: SheetSide;
+  id?: string;
+  ariaLabel?: string;
+  open?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { defaultIfEmpty, orUndef } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { side, id: iD, ariaLabel, open, class: className } = defineProps<SheetProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(sheetVariants({ side }), className));
+</script>
+
+<template>
+  <div
+    :class="cls || undefined"
+    :id="orUndef(iD)"
+    role="dialog"
+    aria-modal="true"
+    :aria-label="defaultIfEmpty(ariaLabel, 'Menu')"
+    data-ui8kit="sheet"
+    :hidden="!(open) || undefined"
+    v-bind="attrs"
+  >
+    <div class="absolute inset-0 bg-foreground/40" data-ui8kit="sheet-overlay"></div>
+    <div
+      class="relative flex h-full w-80 max-w-full flex-col gap-6 overflow-auto bg-background p-6 text-foreground shadow-lg"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/packages/vue/ui/src/primitives/skeleton/skeleton.vue b/packages/vue/ui/src/primitives/skeleton/skeleton.vue
new file mode 100644
index 0000000..8b44ff5
--- /dev/null
+++ b/packages/vue/ui/src/primitives/skeleton/skeleton.vue
@@ -0,0 +1,41 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/skeleton.json -->
+<!--
+  Skeleton renders a decorative placeholder.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Skeleton: the classes of each value of each prop (shadcn/cva style). */
+export const skeletonVariants = variants({
+  base: "animate-pulse bg-muted motion-reduce:animate-none rounded",
+  variants: {
+    shape: {
+      line: "h-4 w-full",
+      block: "h-20 w-full",
+    },
+  },
+  defaultVariants: { shape: "line" },
+});
+
+export type SkeletonShape = VariantKey<typeof skeletonVariants, "shape">;
+
+export type SkeletonProps = {
+  shape?: SkeletonShape;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+const { shape, class: className } = defineProps<SkeletonProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(skeletonVariants({ shape }), className));
+</script>
+
+<template>
+  <div :class="cls || undefined" aria-hidden="true" data-slot="skeleton" v-bind="attrs"></div>
+</template>
diff --git a/packages/vue/ui/src/primitives/stack/stack.vue b/packages/vue/ui/src/primitives/stack/stack.vue
new file mode 100644
index 0000000..887d478
--- /dev/null
+++ b/packages/vue/ui/src/primitives/stack/stack.vue
@@ -0,0 +1,70 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/stack.json -->
+<!--
+  Stack renders a vertical flex container.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Stack: the classes of each value of each prop (shadcn/cva style). */
+export const stackVariants = variants({
+  base: "flex flex-col",
+  variants: {
+    gap: {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      auto: "",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline",
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+    },
+  },
+  defaultVariants: { gap: "auto", align: "start", justify: "start" },
+});
+
+export type StackGap = VariantKey<typeof stackVariants, "gap">;
+export type StackAlign = VariantKey<typeof stackVariants, "align">;
+export type StackJustify = VariantKey<typeof stackVariants, "justify">;
+
+export type StackProps = {
+  gap?: StackGap;
+  align?: StackAlign;
+  justify?: StackJustify;
+  tag?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { gap, align, justify, tag, class: className } = defineProps<StackProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(stackVariants({ gap, align, justify }), className));
+const resolvedTagValue = computed(() => resolveTag(tag, "div", TagGroup.Stack));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/primitives/switch/switch.vue b/packages/vue/ui/src/primitives/switch/switch.vue
new file mode 100644
index 0000000..bc00208
--- /dev/null
+++ b/packages/vue/ui/src/primitives/switch/switch.vue
@@ -0,0 +1,56 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/switch.json -->
+<!--
+  Switch renders input[type=checkbox] with switch role attrs.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Switch: the classes of each value of each prop (shadcn/cva style). */
+export const switchVariants = variants({
+  base:
+    "relative shrink-0 appearance-none bg-muted inset-ring inset-ring-input checked:bg-primary " +
+    "checked:inset-ring-primary switch-knob disabled:cursor-not-allowed disabled:opacity-50 rounded-full",
+  variants: {
+    size: {
+      default: "h-5 w-9 [--knob:12px] [--pad:4px]",
+      sm: "h-4 w-8 [--knob:12px] [--pad:2px]",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+export type SwitchSize = VariantKey<typeof switchVariants, "size">;
+
+export type SwitchProps = {
+  size?: SwitchSize;
+  checked?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { boolStr } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { size, checked, disabled, required, class: className } = defineProps<SwitchProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(switchVariants({ size }), className));
+</script>
+
+<template>
+  <input
+    type="checkbox"
+    :class="cls || undefined"
+    :checked="checked || undefined"
+    :disabled="disabled || undefined"
+    :required="required || undefined"
+    role="switch"
+    :aria-checked="boolStr(checked)"
+    v-bind="attrs"
+  />
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table-body.vue b/packages/vue/ui/src/primitives/table/table-body.vue
new file mode 100644
index 0000000..27a52b1
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table-body.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableBody renders the tbody section.
+-->
+<script lang="ts">
+export type TableBodyProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<TableBodyProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <tbody :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </tbody>
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table-caption.vue b/packages/vue/ui/src/primitives/table/table-caption.vue
new file mode 100644
index 0000000..a5ef115
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table-caption.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableCaption renders the table caption.
+-->
+<script lang="ts">
+export type TableCaptionProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<TableCaptionProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <caption :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </caption>
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table-cell.vue b/packages/vue/ui/src/primitives/table/table-cell.vue
new file mode 100644
index 0000000..7d6b39d
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table-cell.vue
@@ -0,0 +1,46 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableCell renders td with colspan and rowspan.
+-->
+<script lang="ts">
+import { variants } from "../../utils";
+
+/** TableCell: the classes of each value of each prop (shadcn/cva style). */
+export const tableCellVariants = variants({
+  base: "px-2 py-2 align-middle",
+  variants: {},
+  defaultVariants: {},
+});
+
+export type TableCellProps = {
+  scope?: string;
+  colspan?: number;
+  rowspan?: number;
+  abbr?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { scope, colspan: colSpan, rowspan: rowSpan, abbr, class: className } = defineProps<TableCellProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(tableCellVariants(), className));
+</script>
+
+<template>
+  <td
+    :class="cls || undefined"
+    :colspan="isSetNum(colSpan) ? String(colSpan ?? 0) : undefined"
+    :rowspan="isSetNum(rowSpan) ? String(rowSpan ?? 0) : undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </td>
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table-col-group.vue b/packages/vue/ui/src/primitives/table/table-col-group.vue
new file mode 100644
index 0000000..91ef8b2
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table-col-group.vue
@@ -0,0 +1,33 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableColGroup renders colgroup with optional span.
+-->
+<script lang="ts">
+export type TableColGroupProps = {
+  span?: number;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { span, class: className } = defineProps<TableColGroupProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <colgroup
+    :class="cls || undefined"
+    :span="isSetNum(span) ? String(span ?? 0) : undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </colgroup>
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table-col.vue b/packages/vue/ui/src/primitives/table/table-col.vue
new file mode 100644
index 0000000..8fca8c5
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table-col.vue
@@ -0,0 +1,30 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableCol renders a single col definition.
+-->
+<script lang="ts">
+export type TableColProps = {
+  span?: number;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { span, class: className } = defineProps<TableColProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <col
+    :class="cls || undefined"
+    :span="isSetNum(span) ? String(span ?? 0) : undefined"
+    v-bind="attrs"
+  />
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table-foot.vue b/packages/vue/ui/src/primitives/table/table-foot.vue
new file mode 100644
index 0000000..7388b06
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table-foot.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableFoot renders the tfoot section.
+-->
+<script lang="ts">
+export type TableFootProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<TableFootProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <tfoot :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </tfoot>
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table-head-cell.vue b/packages/vue/ui/src/primitives/table/table-head-cell.vue
new file mode 100644
index 0000000..95f0f25
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table-head-cell.vue
@@ -0,0 +1,54 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableHeadCell renders th with optional scope and abbr.
+-->
+<script lang="ts">
+import { variants } from "../../utils";
+
+/** TableHeadCell: the classes of each value of each prop (shadcn/cva style). */
+export const tableHeadCellVariants = variants({
+  base: "px-2 py-2 text-left align-middle font-semibold",
+  variants: {},
+  defaultVariants: {},
+});
+
+export type TableHeadCellProps = {
+  scope?: string;
+  colspan?: number;
+  rowspan?: number;
+  abbr?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { isSetNum, oneOfOrLower, orUndef } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const {
+  scope,
+  colspan: colSpan,
+  rowspan: rowSpan,
+  abbr,
+  class: className,
+} = defineProps<TableHeadCellProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(tableHeadCellVariants(), className));
+</script>
+
+<template>
+  <th
+    :class="cls || undefined"
+    :scope="orUndef(oneOfOrLower(scope, '', 'col', 'colgroup', 'row', 'rowgroup'))"
+    :abbr="orUndef(abbr)"
+    :colspan="isSetNum(colSpan) ? String(colSpan ?? 0) : undefined"
+    :rowspan="isSetNum(rowSpan) ? String(rowSpan ?? 0) : undefined"
+    v-bind="attrs"
+  >
+    <slot />
+  </th>
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table-head.vue b/packages/vue/ui/src/primitives/table/table-head.vue
new file mode 100644
index 0000000..ad2b64c
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table-head.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableHead renders the thead section.
+-->
+<script lang="ts">
+export type TableHeadProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<TableHeadProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <thead :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </thead>
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table-row.vue b/packages/vue/ui/src/primitives/table/table-row.vue
new file mode 100644
index 0000000..fe012a4
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table-row.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  TableRow renders one tr row.
+-->
+<script lang="ts">
+export type TableRowProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<TableRowProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <tr :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </tr>
+</template>
diff --git a/packages/vue/ui/src/primitives/table/table.vue b/packages/vue/ui/src/primitives/table/table.vue
new file mode 100644
index 0000000..788ccf3
--- /dev/null
+++ b/packages/vue/ui/src/primitives/table/table.vue
@@ -0,0 +1,27 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/table.json -->
+<!--
+  Table renders the root table element.
+-->
+<script lang="ts">
+export type TableProps = {
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { class: className } = defineProps<TableProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(className));
+</script>
+
+<template>
+  <table :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </table>
+</template>
diff --git a/packages/vue/ui/src/primitives/text/text.vue b/packages/vue/ui/src/primitives/text/text.vue
new file mode 100644
index 0000000..b7d0abf
--- /dev/null
+++ b/packages/vue/ui/src/primitives/text/text.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/text.json -->
+<!--
+  Text renders a p element with body copy classes, or the block or inline text element of `Tag`.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Text: the classes of each value of each prop (shadcn/cva style). */
+export const textVariants = variants({
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      inherit: "",
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      inherit: "",
+    },
+  },
+  defaultVariants: { size: "inherit", weight: "inherit" },
+});
+
+export type TextSize = VariantKey<typeof textVariants, "size">;
+export type TextWeight = VariantKey<typeof textVariants, "weight">;
+
+export type TextProps = {
+  size?: TextSize;
+  weight?: TextWeight;
+  tag?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { resolveTag, TagGroup } from "../../utils/tags";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { size, weight, tag, class: className } = defineProps<TextProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(textVariants({ size, weight }), className));
+const resolvedTagValue = computed(() => resolveTag(tag, "p", TagGroup.Text));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/primitives/textarea/textarea.vue b/packages/vue/ui/src/primitives/textarea/textarea.vue
new file mode 100644
index 0000000..cc526c6
--- /dev/null
+++ b/packages/vue/ui/src/primitives/textarea/textarea.vue
@@ -0,0 +1,62 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/textarea.json -->
+<!--
+  Textarea renders a styled multi-line form control.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Textarea: the classes of each value of each prop (shadcn/cva style). */
+export const textareaVariants = variants({
+  base:
+    "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none " +
+    "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 " +
+    "focus-visible:inset-ring-ring rounded",
+  variants: {
+    size: {
+      sm: "min-h-16 px-3 py-2 text-base md:text-sm",
+      default: "min-h-20 px-3 py-2 text-base md:text-sm",
+      lg: "min-h-24 px-4 py-3 text-base",
+    },
+    variant: {
+      default: "",
+      ghost: "bg-muted inset-ring-transparent",
+    },
+  },
+  defaultVariants: { size: "default", variant: "default" },
+});
+
+export type TextareaVariant = VariantKey<typeof textareaVariants, "variant">;
+export type TextareaSize = VariantKey<typeof textareaVariants, "size">;
+
+export type TextareaProps = {
+  variant?: TextareaVariant;
+  size?: TextareaSize;
+  value?: string;
+  rows?: number;
+  disabled?: boolean;
+  required?: boolean;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { isSetNum } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { variant, size, value, rows, disabled, required, class: className } = defineProps<TextareaProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(textareaVariants({ size, variant }), className));
+</script>
+
+<template>
+  <textarea
+    :class="cls || undefined"
+    :rows="(isSetNum(rows) ? String(rows ?? 0) : '4')"
+    :disabled="disabled || undefined"
+    :required="required || undefined"
+    v-bind="attrs"
+  >{{ value }}</textarea>
+</template>
diff --git a/packages/vue/ui/src/primitives/themetoggle/theme-toggle.vue b/packages/vue/ui/src/primitives/themetoggle/theme-toggle.vue
new file mode 100644
index 0000000..ae95cf0
--- /dev/null
+++ b/packages/vue/ui/src/primitives/themetoggle/theme-toggle.vue
@@ -0,0 +1,96 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/themetoggle.json -->
+<!--
+  ThemeToggle renders a button with Lucide sun/moon icons; aria-pressed reflects dark mode.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** ThemeToggle: the classes of each value of each prop (shadcn/cva style). */
+export const themetoggleVariants = variants({
+  base:
+    "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  variants: {
+    variant: {
+      default: "bg-muted text-foreground hover:bg-accent",
+      ghost: "bg-transparent text-foreground hover:bg-muted",
+      contrast: "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      current: "bg-transparent text-current hover:bg-current/10",
+    },
+    size: {
+      sm: "size-8",
+      default: "size-10",
+      lg: "size-12",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type ThemeToggleVariant = VariantKey<typeof themetoggleVariants, "variant">;
+export type ThemeToggleSize = VariantKey<typeof themetoggleVariants, "size">;
+
+export type ThemeToggleProps = {
+  variant?: ThemeToggleVariant;
+  size?: ThemeToggleSize;
+  ariaLabel?: string;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { defaultIfEmpty } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+const { variant, size, ariaLabel, class: className } = defineProps<ThemeToggleProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(themetoggleVariants({ variant, size }), className));
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="cls || undefined"
+    data-ui8kit="theme-toggle"
+    :aria-label="defaultIfEmpty(ariaLabel, 'Dark mode')"
+    aria-pressed="false"
+    v-bind="attrs"
+  >
+    <svg
+      class="hidden size-5 dark:block"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="4"></circle>
+      <path d="M12 2v2"></path>
+      <path d="M12 20v2"></path>
+      <path d="m4.93 4.93 1.41 1.41"></path>
+      <path d="m17.66 17.66 1.41 1.41"></path>
+      <path d="M2 12h2"></path>
+      <path d="M20 12h2"></path>
+      <path d="m6.34 17.66-1.41 1.41"></path>
+      <path d="m19.07 4.93-1.41 1.41"></path>
+    </svg>
+    <svg
+      class="block size-5 dark:hidden"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+    </svg>
+  </button>
+</template>
diff --git a/packages/vue/ui/src/primitives/title/title.vue b/packages/vue/ui/src/primitives/title/title.vue
new file mode 100644
index 0000000..22fc4c1
--- /dev/null
+++ b/packages/vue/ui/src/primitives/title/title.vue
@@ -0,0 +1,63 @@
+<!-- Code generated by xgen. DO NOT EDIT. -->
+<!-- Source: xgen/specs/ui/title.json -->
+<!--
+  Title renders the resolved heading element.
+-->
+<script lang="ts">
+import { variants, type VariantKey } from "../../utils";
+
+/** Title: the classes of each value of each prop (shadcn/cva style). */
+export const titleVariants = variants({
+  base: "text-foreground",
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      inherit: "",
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+    },
+  },
+  defaultVariants: { size: "inherit", weight: "semibold" },
+});
+
+export type TitleSize = VariantKey<typeof titleVariants, "size">;
+export type TitleWeight = VariantKey<typeof titleVariants, "weight">;
+
+export type TitleProps = {
+  size?: TitleSize;
+  weight?: TitleWeight;
+  as?: 1 | 2 | 3 | 4 | 5 | 6;
+  class?: string;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../utils";
+import { titleTag } from "../../utils/expr";
+
+defineOptions({ inheritAttrs: false });
+defineSlots<{ default?(): unknown }>();
+const { size, weight, as, class: className } = defineProps<TitleProps>();
+const attrs = useAttrs();
+const cls = computed(() => cn(titleVariants({ size, weight }), className));
+const resolvedTagValue = computed(() => titleTag(as));
+</script>
+
+<template>
+  <component :is="resolvedTagValue" :class="cls || undefined" v-bind="attrs">
+    <slot />
+  </component>
+</template>
diff --git a/packages/vue/ui/src/styles/index.css b/packages/vue/ui/src/styles/index.css
new file mode 100644
index 0000000..cb56ae7
--- /dev/null
+++ b/packages/vue/ui/src/styles/index.css
@@ -0,0 +1,7 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/generator/src/plan.ts (uiPackage) */
+/* Entry of the styles: theme tokens and the kit. @source makes Tailwind v4 scan this package for class names. */
+@import "./theme.css";
+@import "./kit.css";
+
+@source "../";
diff --git a/packages/vue/ui/src/styles/kit.css b/packages/vue/ui/src/styles/kit.css
new file mode 100644
index 0000000..f18dcc2
--- /dev/null
+++ b/packages/vue/ui/src/styles/kit.css
@@ -0,0 +1,95 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/core/assets/styles/kit.css */
+/* Kit-wide CSS: base layer, input glyph utilities, focus ring. Colors and the one corner token (--radius) come from theme.css (shadcn neutral);
+   shadows: only floating layers have one (shadow-md, shadow-lg), set in their specs; nothing here draws one. */
+@layer base {
+  html, body { margin: 0; background: var(--color-background); color: var(--color-foreground); }
+  body { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; overflow-x: hidden; }
+  button { cursor: pointer; }
+  html { -webkit-text-size-adjust: 100%; color-scheme: light; }
+}
+
+/* the box of a checkbox: its corner is the theme radius scaled to the 16-20px box (0.4 x 10px = 4px), so it never reads as a radio */
+@utility checkbox-glyph {
+  display: inline-grid; place-content: center; border-radius: calc(var(--radius) * 0.4);
+  &::before { content: ""; width: 8px; height: 6px; opacity: 0; background: currentColor;
+    clip-path: polygon(0 55%, 14% 40%, 38% 64%, 86% 0, 100% 15%, 38% 95%); }
+  &:checked { color: var(--color-primary-foreground); }
+  &:checked::before { opacity: 1; }
+}
+/* a number field without the browser spin buttons (NumberField draws its own minus and plus) */
+@utility number-bare {
+  appearance: textfield; -moz-appearance: textfield;
+  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+}
+@utility radio-glyph {
+  display: inline-grid; place-content: center;
+  &::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 9999px; background: var(--color-primary-foreground); opacity: 0; }
+  &:checked::before { opacity: 1; }
+}
+@utility switch-knob {
+  &::before { content: ""; position: absolute; top: 50%; left: var(--pad); width: var(--knob); height: var(--knob); border-radius: 9999px;
+    background: var(--color-background); translate: 0 -50%; transition: left .15s; }
+  &:checked::before { left: calc(100% - var(--pad) - var(--knob)); }
+}
+@utility progress-bar {
+  &::-webkit-progress-bar { background: transparent; }
+  &::-webkit-progress-value { background: var(--bar); border-radius: var(--radius); }
+  &::-moz-progress-bar { background: var(--bar); border-radius: var(--radius); }
+  &::-webkit-meter-bar { background: transparent; border: 0; }
+  &::-webkit-meter-optimum-value { background: var(--bar); }
+}
+
+/* Focus ring sits above utility shadows. Keyboard only. The 4px halo is gray unless the element sets a ring colour
+   (shadcn style, e.g. focus-visible:ring-destructive/20 on the destructive variants); --tw-ring-color does not inherit. */
+:where(a, button, input, select, textarea, summary, [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="option"], [role="treeitem"], [role="radio"], [role="switch"], [tabindex]):focus-visible {
+  outline: none;
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), 0 0 0 4px var(--tw-ring-color, rgb(128 128 128 / 0.15)), var(--tw-shadow, 0 0 #0000);
+}
+[data-slot="prompt-input"]:focus-within, [data-slot="smartbox"]:focus-within { box-shadow: 0 0 0 4px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-border); }
+[data-slot="prompt-input"] textarea:focus-visible, [data-slot="smartbox"] input:focus-visible { box-shadow: none; }
+[data-slot="file-tree-item"]:focus-visible, [data-slot="editor-tab"]:focus-visible, [data-slot="icon-tab"]:focus-visible, [data-slot="dropdown-item"]:focus-visible {
+  box-shadow: inset 0 0 0 2px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-muted-foreground);
+}
+:where([data-screen]) :focus:not(:focus-visible) { outline: none; }
+::selection { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
+
+/* The disclosure indicator: the Lucide chevron-down drawn in the text colour; the Summary brick turns it over when its
+   details open (group-open:rotate-180), so an accordion needs no script. */
+[data-slot="summary-indicator"] {
+  display: inline-block;
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+/* Per-element tokens (UI8KIT-2.0 §11): badge, button, card, alert, media. An unset token falls back to the value of the utility class the
+   rule matches (p-6, px-4 h-10, ...), stated explicitly: a revert-layer fallback inside var() is not supported by every
+   browser (there the property became unset: buttons and badges lost their padding and height).
+   A skin or a scope (a wrapper, the magazine specimen) sets only the ones it wants.
+   Radius:  --radius-badge|button|card|alert|media   (unset: var(--radius); the badge unset: the pill). Only elements that carry plain `rounded` follow it.
+   Shadow:  --shadow-card|alert|media                (unset: the spec's own: none). A full box-shadow layer, e.g. var(--shadow-sm) or 0 0 #0000.
+   Density: data-density-badge|button|card|alert = compact | default | comfortable, on the element or any ancestor, sets --pad-*:
+            card 16/24/32 (padding of a default card), alert inline 8/8/16 with --min-alert 24/32/40,
+            button inline 12/16/20 and height 32/40/48 (default size), badge inline 8/12/16 and height 20/24/28 (default size).
+            4px steps only inside controls (button, badge); card and alert stay on the 8px step. */
+[data-slot="button"].rounded { border-radius: var(--radius-button, var(--radius)); }
+[data-slot="card"].rounded { border-radius: var(--radius-card, var(--radius)); }
+[data-slot="alert"].rounded { border-radius: var(--radius-alert, var(--radius)); }
+[data-slot="media-frame"].rounded { border-radius: var(--radius-media, var(--radius)); }
+[data-slot="badge"].rounded-full { border-radius: var(--radius-badge, calc(infinity * 1px)); }
+[data-slot="card"] { --tw-shadow: var(--shadow-card, 0 0 #0000); }
+[data-slot="alert"] { --tw-shadow: var(--shadow-alert, 0 0 #0000); }
+[data-slot="media-frame"] { --tw-shadow: var(--shadow-media, 0 0 #0000); }
+[data-slot="card"].p-6 { padding: var(--pad-card, calc(var(--spacing) * 6)); }
+[data-slot="alert"].px-2 { padding-inline: var(--pad-alert, calc(var(--spacing) * 2)); }
+[data-slot="alert"].min-h-8 { min-height: var(--min-alert, calc(var(--spacing) * 8)); }
+[data-slot="button"].px-4.h-10 { padding-inline: var(--pad-button, calc(var(--spacing) * 4)); height: var(--h-button, calc(var(--spacing) * 10)); }
+[data-slot="badge"].px-3.h-6 { padding-inline: var(--pad-badge, calc(var(--spacing) * 3)); height: var(--h-badge, calc(var(--spacing) * 6)); }
+[data-density-card="compact"] { --pad-card: 16px; }
+[data-density-card="comfortable"] { --pad-card: 32px; }
+[data-density-alert="compact"] { --pad-alert: 8px; --min-alert: 24px; }
+[data-density-alert="comfortable"] { --pad-alert: 16px; --min-alert: 40px; }
+[data-density-button="compact"] { --pad-button: 12px; --h-button: 32px; }
+[data-density-button="comfortable"] { --pad-button: 20px; --h-button: 48px; }
+[data-density-badge="compact"] { --pad-badge: 8px; --h-badge: 20px; }
+[data-density-badge="comfortable"] { --pad-badge: 16px; --h-badge: 28px; }
diff --git a/packages/vue/ui/src/styles/theme.css b/packages/vue/ui/src/styles/theme.css
new file mode 100644
index 0000000..4b05103
--- /dev/null
+++ b/packages/vue/ui/src/styles/theme.css
@@ -0,0 +1,131 @@
+/* Code generated by xgen. DO NOT EDIT. */
+/* Source: xgen/runtimes/core/assets/styles/theme.css */
+@import "tailwindcss";
+
+/* shadcn/ui neutral theme (Tailwind v4, written as hsl() for old browsers; same colours as the oklch values published at https://ui.shadcn.com/docs/theming
+   ("Default Theme CSS", base color neutral). Dark mode: the .dark class or data-theme="dark" on an ancestor. */
+@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
+
+/* The one corner token. Plain `rounded` reads the bare --radius theme key, so every corner of the kit follows it
+   (shadcn keeps --radius in :root; here it sits in @theme so that `rounded` resolves to it; same value, 0.625rem). */
+@theme {
+  --radius: 0.625rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 4%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 4%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 4%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 43.5%);
+  --accent: hsl(0 0% 96%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0.6 88.4% 52.5%);
+  --border: hsl(0 0% 90%);
+  --input: hsl(0 0% 90%);
+  --ring: hsl(0 0% 63%);
+  --chart-1: hsl(18 100% 48%);
+  --chart-2: hsl(174.7 100% 29.5%);
+  --chart-3: hsl(196 72% 23%);
+  --chart-4: hsl(43.6 100% 50%);
+  --chart-5: hsl(36.3 100% 49.7%);
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(0 0% 4%);
+  --sidebar-primary: hsl(0 0% 9%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 96%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(0 0% 90%);
+  --sidebar-ring: hsl(0 0% 63%);
+}
+
+:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 4%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 90%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 15%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(0 0% 15%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(356.1 62.4% 52%);
+  --border: hsl(0 0% 100% / 10%);
+  --input: hsl(0 0% 100% / 15%);
+  --ring: hsl(0 0% 45%);
+  --chart-1: hsl(225.3 84.1% 49%);
+  --chart-2: hsl(160 100% 37%);
+  --chart-3: hsl(36.3 100% 49.7%);
+  --chart-4: hsl(273.3 100% 63.8%);
+  --chart-5: hsl(345 100% 56%);
+  --sidebar: hsl(0 0% 9%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(225.3 84.1% 49%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 15%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 100% / 10%);
+  --sidebar-ring: hsl(0 0% 45%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/packages/vue/ui/src/utils/a11y/dismiss.ts b/packages/vue/ui/src/utils/a11y/dismiss.ts
new file mode 100644
index 0000000..0f672de
--- /dev/null
+++ b/packages/vue/ui/src/utils/a11y/dismiss.ts
@@ -0,0 +1,32 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/dismiss.ts
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+export type DismissReason = "escape" | "outside";
+const stack: object[] = [];   // topmost dismissable layer handles Escape first (menu inside off-canvas sidebar, …)
+
+/** Escape and pointer-down outside the node call onDismiss. Returns the cleanup. */
+export function dismissable(node: HTMLElement, opts: () => { onDismiss: (reason: DismissReason) => void; ignore?: () => (Element | null | undefined)[]; outside?: boolean }): () => void {
+  {
+    const layer = {};
+    stack.push(layer);
+    const { onDismiss, ignore = () => [], outside = true } = opts();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || e.defaultPrevented || stack[stack.length - 1] !== layer) return;
+      e.preventDefault(); e.stopPropagation();
+      onDismiss("escape");
+    };
+    const onDown = (e: PointerEvent) => {
+      if (!outside || stack[stack.length - 1] !== layer) return;
+      const t = e.target as Node | null;
+      if (!t || node.contains(t) || ignore().some((el) => el?.contains(t))) return;
+      onDismiss("outside");
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onDown, true);
+      const i = stack.indexOf(layer); if (i >= 0) stack.splice(i, 1);
+    };
+  }
+}
diff --git a/packages/vue/ui/src/utils/a11y/focus-trap.ts b/packages/vue/ui/src/utils/a11y/focus-trap.ts
new file mode 100644
index 0000000..33606fa
--- /dev/null
+++ b/packages/vue/ui/src/utils/a11y/focus-trap.ts
@@ -0,0 +1,20 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/focus-trap.ts
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+import { focusables } from "./focusable";
+
+/** Tab/Shift+Tab cycle inside `node`; on cleanup focus returns to the element focused before. */
+export function trapFocus(node: HTMLElement): () => void {
+  const previous = document.activeElement as HTMLElement | null;
+  if (!node.contains(previous)) queueMicrotask(() => focusables(node)[0]?.focus());
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key !== "Tab") return;
+    const items = focusables(node);
+    if (!items.length) { e.preventDefault(); return; }
+    const first = items[0], last = items[items.length - 1], cur = document.activeElement;
+    if (e.shiftKey && (cur === first || !node.contains(cur))) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && (cur === last || !node.contains(cur))) { e.preventDefault(); first.focus(); }
+  };
+  node.addEventListener("keydown", onKey);
+  return () => { node.removeEventListener("keydown", onKey); /* after the page is no longer inert */ requestAnimationFrame(() => { if (previous?.isConnected) previous.focus(); }); };
+}
diff --git a/packages/vue/ui/src/utils/a11y/focusable.ts b/packages/vue/ui/src/utils/a11y/focusable.ts
new file mode 100644
index 0000000..6b2897a
--- /dev/null
+++ b/packages/vue/ui/src/utils/a11y/focusable.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/focusable.ts
+// Small headless helpers shared by the interactive primitives (menus, dialogs, tabs, off-canvas sidebar).
+export const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+/** visible, tabbable descendants of `root` in DOM order */
+export function focusables(root: HTMLElement): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((el) => !el.closest("[inert]") && el.getClientRects().length > 0 && getComputedStyle(el).visibility !== "hidden");
+}
diff --git a/packages/vue/ui/src/utils/a11y/index.ts b/packages/vue/ui/src/utils/a11y/index.ts
new file mode 100644
index 0000000..3487525
--- /dev/null
+++ b/packages/vue/ui/src/utils/a11y/index.ts
@@ -0,0 +1,7 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/index.ts
+export { FOCUSABLE, focusables } from "./focusable";
+export { moveFocus, typeahead, type RovingOptions } from "./roving";
+export { lockScroll } from "./scroll-lock";
+export { dismissable, type DismissReason } from "./dismiss";
+export { trapFocus } from "./focus-trap";
diff --git a/packages/vue/ui/src/utils/a11y/roving.ts b/packages/vue/ui/src/utils/a11y/roving.ts
new file mode 100644
index 0000000..b9f5246
--- /dev/null
+++ b/packages/vue/ui/src/utils/a11y/roving.ts
@@ -0,0 +1,41 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/roving.ts
+// Arrow-key navigation over a list of focusable items (menus, listboxes, tab lists, trees).
+export type RovingOptions = { orientation?: "vertical" | "horizontal" | "both"; loop?: boolean; activate?: boolean };
+
+/** Handles ArrowUp/Down/Left/Right, Home, End. Returns true when the key was consumed. */
+export function moveFocus(e: KeyboardEvent, items: HTMLElement[], { orientation = "vertical", loop = true, activate = false }: RovingOptions = {}): boolean {
+  if (!items.length || e.altKey || e.ctrlKey || e.metaKey) return false;
+  const prev = orientation !== "horizontal" ? ["ArrowUp"] : [];
+  const next = orientation !== "horizontal" ? ["ArrowDown"] : [];
+  if (orientation !== "vertical") { prev.push("ArrowLeft"); next.push("ArrowRight"); }
+  const cur = items.indexOf(document.activeElement as HTMLElement);
+  let idx = -1;
+  if (next.includes(e.key)) idx = cur < 0 ? 0 : cur + 1;
+  else if (prev.includes(e.key)) idx = cur < 0 ? items.length - 1 : cur - 1;
+  else if (e.key === "Home") idx = 0;
+  else if (e.key === "End") idx = items.length - 1;
+  else return false;
+  if (idx >= items.length) idx = loop ? 0 : items.length - 1;
+  if (idx < 0) idx = loop ? items.length - 1 : 0;
+  e.preventDefault();
+  const el = items[idx];
+  el.focus();
+  if (activate) el.click();
+  return true;
+}
+
+/** type-ahead: focus the next item whose text starts with the typed characters (reset after 600 ms) */
+export function typeahead() {
+  let buf = "", t: ReturnType<typeof setTimeout> | undefined;
+  return (e: KeyboardEvent, items: HTMLElement[]): boolean => {
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey || e.key === " ") return false;
+    buf += e.key.toLowerCase();
+    clearTimeout(t); t = setTimeout(() => (buf = ""), 600);
+    const start = Math.max(0, items.indexOf(document.activeElement as HTMLElement) + (buf.length === 1 ? 1 : 0));
+    const ordered = [...items.slice(start), ...items.slice(0, start)];
+    const hit = ordered.find((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(buf));
+    if (hit) { hit.focus(); e.preventDefault(); return true; }
+    return false;
+  };
+}
diff --git a/packages/vue/ui/src/utils/a11y/scroll-lock.ts b/packages/vue/ui/src/utils/a11y/scroll-lock.ts
new file mode 100644
index 0000000..f0bbd14
--- /dev/null
+++ b/packages/vue/ui/src/utils/a11y/scroll-lock.ts
@@ -0,0 +1,24 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/a11y/scroll-lock.ts
+// Reference-counted page scroll lock (off-canvas sidebar, modal dialog). Compensates the scrollbar width on desktop.
+let count = 0;
+let saved = { overflow: "", paddingRight: "" };
+
+export function lockScroll(): () => void {
+  const root = document.documentElement;
+  if (count++ === 0) {
+    const sw = window.innerWidth - root.clientWidth;
+    saved = { overflow: root.style.overflow, paddingRight: root.style.paddingRight };
+    root.style.overflow = "hidden";
+    if (sw > 0) root.style.paddingRight = `${sw}px`;
+    root.setAttribute("data-scroll-locked", "");
+  }
+  let released = false;
+  return () => {
+    if (released) return; released = true;
+    if (--count === 0) {
+      root.style.overflow = saved.overflow; root.style.paddingRight = saved.paddingRight;
+      root.removeAttribute("data-scroll-locked");
+    }
+  };
+}
diff --git a/packages/vue/ui/src/utils/cn.ts b/packages/vue/ui/src/utils/cn.ts
new file mode 100644
index 0000000..0d98839
--- /dev/null
+++ b/packages/vue/ui/src/utils/cn.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/cn.ts
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge class values. Caller-supplied classes win over recipe classes. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/vue/ui/src/utils/env.ts b/packages/vue/ui/src/utils/env.ts
new file mode 100644
index 0000000..762068d
--- /dev/null
+++ b/packages/vue/ui/src/utils/env.ts
@@ -0,0 +1,11 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/env.ts
+export function isDevEnv(): boolean {
+  try {
+    const env = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
+    if (env && typeof env.DEV === "boolean") return env.DEV;
+  } catch {
+    // import.meta may be unavailable in some contexts
+  }
+  return false;
+}
diff --git a/packages/vue/ui/src/utils/expr.ts b/packages/vue/ui/src/utils/expr.ts
new file mode 100644
index 0000000..10e671e
--- /dev/null
+++ b/packages/vue/ui/src/utils/expr.ts
@@ -0,0 +1,100 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/expr.ts
+/**
+ * Tiny attribute-logic helpers used by generated components. One
+ * implementation per runtime family keeps every default-resolution decision
+ * table byte-identical across React, Svelte, and Vue (mirrors `expr.go`).
+ */
+
+export const trimStr = (v: string | number | null | undefined): string =>
+  v === null || v === undefined ? "" : String(v).trim();
+
+export const isSetStr = (v: string | null | undefined): boolean => trimStr(v) !== "";
+
+export const isSetNum = (v: number | null | undefined): boolean => (v ?? 0) > 0;
+
+/**
+ * `trim(v) === "" ? fallback : trim(v)` — DefaultInputType-style defaults.
+ * Generic so enum-typed props keep their literal union through the default.
+ */
+export const defaultIfEmpty = <T extends string>(v: T | null | undefined, fallback: T): T => {
+  const t = trimStr(v) as T;
+  return t === "" ? fallback : t;
+};
+
+/** Whitelist: returns `trim(v)` when in `allowed`, otherwise `fallback`. */
+export const oneOfOr = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v) as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+export const oneOfOrLower = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v).toLowerCase() as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+/** Decision table: `mapping[trim(v)] ?? fallback`. */
+export const mapOr = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v)] ?? fallback;
+
+export const mapOrLower = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v).toLowerCase()] ?? fallback;
+
+/** Integer decision table: `mapping[v] ?? fallback`. */
+export const intMapOr = <T extends string>(
+  v: number | null | undefined,
+  mapping: Record<number, T>,
+  fallback: T
+): T => mapping[v ?? 0] ?? fallback;
+
+/** Null-safe string equality (both sides normalized to ""). */
+export const eqStr = (a: string | null | undefined, b: string | null | undefined): boolean =>
+  (a ?? "") === (b ?? "");
+
+/** ARIA state stringification: always "true"/"false", never omitted. */
+export const boolStr = (v: boolean | null | undefined): "true" | "false" =>
+  v ? "true" : "false";
+
+/** Concatenation of trimmed parts (icon `Prefix + Name`). */
+export const concatTrim = (...parts: (string | null | undefined)[]): string =>
+  parts.map(trimStr).join("");
+
+/** Omit-if-empty attribute value: `""` → `undefined` so the attr is dropped. */
+export const orUndef = (v: string | null | undefined): string | undefined => {
+  const t = trimStr(v);
+  return t === "" ? undefined : String(v);
+};
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** h1–h6 from a heading level; 0/undefined/out-of-range default to h2. */
+export const titleTag = (order: HeadingLevel | number | null | undefined): string => {
+  switch (order) {
+    case 1:
+      return "h1";
+    case 3:
+      return "h3";
+    case 4:
+      return "h4";
+    case 5:
+      return "h5";
+    case 6:
+      return "h6";
+    default:
+      return "h2";
+  }
+};
diff --git a/packages/vue/ui/src/utils/format.ts b/packages/vue/ui/src/utils/format.ts
new file mode 100644
index 0000000..05a0355
--- /dev/null
+++ b/packages/vue/ui/src/utils/format.ts
@@ -0,0 +1,70 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/format.ts
+// Text and number formatting shared by every generated organism and screen. Pure functions, no runtime dependency.
+
+/** fills {0}, {1}... of a content template */
+export function tpl(template: string | undefined, ...values: Array<string | number | undefined>): string {
+  return (template ?? "").replace(/\{(\d+)\}/g, (_m, i: string) => String(values[Number(i)] ?? ""));
+}
+
+const nf = new Intl.NumberFormat("en-US");
+export function fmtNumber(n: number): string {
+  return nf.format(n);
+}
+
+/** digits of the minor unit (ISO 4217): cents for most currencies, none for JPY and KRW */
+export function minorDigits(currency: string): number {
+  return currency === "JPY" || currency === "KRW" ? 0 : 2;
+}
+
+const moneyCache = new Map<string, Intl.NumberFormat>();
+/** money in integer minor units (Codex v0.4: 1250 = 12.50 USD) -> "$12.50"; whole amounts drop the fraction: 1499_00 -> "$1,499" */
+export function fmtMoney(minor: number, currency: string): string {
+  const d = minorDigits(currency);
+  const cents = Math.round(minor);
+  const frac = d > 0 && cents % 10 ** d !== 0 ? d : 0;
+  const key = `${currency}:${frac}`;
+  let f = moneyCache.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: frac, maximumFractionDigits: frac });
+    moneyCache.set(key, f);
+  }
+  return f.format(cents / 10 ** d);
+}
+
+/** a content word by key (the status of a record -> its label); the key itself when the dictionary has no entry */
+export function at(dict: Record<string, string> | undefined, key: string): string {
+  return dict?.[key] ?? key;
+}
+
+/** the page numbers a pager shows: the first, the last and the neighbours of the current page; null is a gap */
+export function pageWindow(page: number, pages: number): (number | null)[] {
+  const keep = new Set([1, pages, page - 1, page, page + 1].filter((n) => n >= 1 && n <= pages));
+  const out: (number | null)[] = [];
+  let prev = 0;
+  for (const n of [...keep].sort((a, b) => a - b)) {
+    if (n - prev > 1) out.push(null);
+    out.push(n);
+    prev = n;
+  }
+  return out;
+}
+
+/** a responsive column variant of Grid capped by the number of items, so no column stays empty: ("1-4", 3) -> "1-3", ("2-6", 4) -> "2-4" */
+export function fitCols(cols: string, n: number): string {
+  const m = /^(\d+)-(\d+)$/.exec(cols);
+  if (!m) return cols;
+  const lo = Number(m[1]), hi = Number(m[2]);
+  if (n >= hi) return cols;
+  const top = Math.max(lo, n);
+  const known = ["1-2", "1-3", "1-4", "2-3", "2-4", "2-6", "3-6"];
+  for (let h = top; h > lo; h--) if (known.includes(`${lo}-${h}`)) return `${lo}-${h}`;
+  return String(Math.min(lo, Math.max(n, 1)));
+}
+
+/** a label of segments joined by ", " without a segment equal (case-insensitive) to the one before it:
+ *  "Footer, Footer, Centered" -> "Footer, Centered" */
+export function uniqLabel(label: string | undefined): string {
+  const parts = (label ?? "").split(", ");
+  return parts.filter((s, i) => i === 0 || s.toLowerCase() !== (parts[i - 1] ?? "").toLowerCase()).join(", ");
+}
diff --git a/packages/vue/ui/src/utils/index.ts b/packages/vue/ui/src/utils/index.ts
new file mode 100644
index 0000000..725a2fa
--- /dev/null
+++ b/packages/vue/ui/src/utils/index.ts
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/index.ts
+export { cn } from "./cn";
+export { isDevEnv } from "./env";
+export { variants, type VariantFn, type VariantKey, type VariantSelection, type VariantTable } from "./variants";
+export { TagGroup, isAllowedTag, resolveTag } from "./tags";
+export * from "./expr";
+export { tpl, fmtNumber, fmtMoney, minorDigits, at, pageWindow, fitCols, uniqLabel } from "./format";
+export * from "./a11y";
diff --git a/packages/vue/ui/src/utils/tags.ts b/packages/vue/ui/src/utils/tags.ts
new file mode 100644
index 0000000..115a7d0
--- /dev/null
+++ b/packages/vue/ui/src/utils/tags.ts
@@ -0,0 +1,124 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/tags.ts
+// Code generated by tagsgen. DO NOT EDIT.
+
+import { isDevEnv } from "./env";
+
+export const TagGroup = {
+  Layout: "Layout",
+  BoxAllowed: "BoxAllowed",
+  BlockText: "BlockText",
+  Inline: "Inline",
+  Heading: "Heading",
+  List: "List",
+  ListItem: "ListItem",
+  Form: "Form",
+  FormControl: "FormControl",
+  FormLabel: "FormLabel",
+  Table: "Table",
+  TableSection: "TableSection",
+  TableRow: "TableRow",
+  TableCell: "TableCell",
+  TableColumn: "TableColumn",
+  Media: "Media",
+  Disclosure: "Disclosure",
+  Container: "Container",
+  Stack: "Stack",
+  Group: "Group",
+  Text: "Text",
+} as const;
+
+export type TagGroup = (typeof TagGroup)[keyof typeof TagGroup];
+
+const layoutTags = new Set(["div", "section", "article", "aside", "header", "footer", "main", "nav", "figure", "search", "hgroup"]);
+const boxAllowedTags = new Set(["div"]);
+const blockTextTags = new Set(["p", "blockquote", "figcaption", "address", "pre"]);
+const inlineTags = new Set(["span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"]);
+const headingTags = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+const listTags = new Set(["ul", "ol", "dl", "menu"]);
+const listItemTags = new Set(["li", "dt", "dd"]);
+const formTags = new Set(["form", "fieldset"]);
+const formControlTags = new Set(["input", "textarea", "select", "button", "option", "optgroup", "datalist", "output", "meter", "progress"]);
+const formLabelTags = new Set(["label", "legend"]);
+const tableTags = new Set(["table"]);
+const tableSectionTags = new Set(["thead", "tbody", "tfoot"]);
+const tableRowTags = new Set(["tr"]);
+const tableCellTags = new Set(["th", "td"]);
+const tableColumnTags = new Set(["colgroup", "col"]);
+const mediaTags = new Set(["img", "picture", "source"]);
+const disclosureTags = new Set(["details", "summary"]);
+const containerTags = new Set(["div", "main", "section"]);
+const stackTags = new Set(["div", "ul", "ol"]);
+const groupTags = new Set(["div", "fieldset", "dl"]);
+
+function oneOf(tag: string, options: Set<string>): boolean {
+  return options.has(tag);
+}
+
+const warnedTagFallbacks = new Set<string>();
+
+function warnTagFallback(tag: string, fallback: string, group: TagGroup): void {
+  if (!isDevEnv()) return;
+  const key = `${group}:${tag}:${fallback}`;
+  if (warnedTagFallbacks.has(key)) return;
+  warnedTagFallbacks.add(key);
+  console.warn(`[resolveTag] disallowed tag "${tag}" for group "${group}", fallback "${fallback}" used.`);
+}
+
+export function isAllowedTag(tag: string, group: TagGroup): boolean {
+  const t = tag.trim().toLowerCase();
+  switch (group) {
+    case TagGroup.Layout:
+      return oneOf(t, layoutTags);
+    case TagGroup.BoxAllowed:
+      return oneOf(t, boxAllowedTags);
+    case TagGroup.BlockText:
+      return oneOf(t, blockTextTags);
+    case TagGroup.Inline:
+      return oneOf(t, inlineTags);
+    case TagGroup.Heading:
+      return oneOf(t, headingTags);
+    case TagGroup.List:
+      return oneOf(t, listTags);
+    case TagGroup.ListItem:
+      return oneOf(t, listItemTags);
+    case TagGroup.Form:
+      return oneOf(t, formTags);
+    case TagGroup.FormControl:
+      return oneOf(t, formControlTags);
+    case TagGroup.FormLabel:
+      return oneOf(t, formLabelTags);
+    case TagGroup.Table:
+      return oneOf(t, tableTags);
+    case TagGroup.TableSection:
+      return oneOf(t, tableSectionTags);
+    case TagGroup.TableRow:
+      return oneOf(t, tableRowTags);
+    case TagGroup.TableCell:
+      return oneOf(t, tableCellTags);
+    case TagGroup.TableColumn:
+      return oneOf(t, tableColumnTags);
+    case TagGroup.Media:
+      return oneOf(t, mediaTags);
+    case TagGroup.Disclosure:
+      return oneOf(t, disclosureTags);
+    case TagGroup.Container:
+      return oneOf(t, containerTags);
+    case TagGroup.Stack:
+      return oneOf(t, stackTags);
+    case TagGroup.Group:
+      return oneOf(t, groupTags);
+    case TagGroup.Text:
+      return blockTextTags.has(t) || inlineTags.has(t);
+    default:
+      return false;
+  }
+}
+
+export function resolveTag(tag: string | undefined, fallback: string, group: TagGroup): string {
+  const t = tag?.trim().toLowerCase() ?? "";
+  if (!t) return fallback;
+  if (isAllowedTag(t, group)) return t;
+  warnTagFallback(t, fallback, group);
+  return fallback;
+}
diff --git a/packages/vue/ui/src/utils/variants.ts b/packages/vue/ui/src/utils/variants.ts
new file mode 100644
index 0000000..1c00c17
--- /dev/null
+++ b/packages/vue/ui/src/utils/variants.ts
@@ -0,0 +1,61 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/runtimes/core/assets/ts/variants.ts
+import { cn } from "./cn";
+import { isDevEnv } from "./env";
+
+/**
+ * A shadcn/cva-style variant table, without the dependency (same idea as `cva` from class-variance-authority).
+ *
+ *   const badgeVariants = variants({
+ *     base: "inline-flex items-center",
+ *     variants: { size: { sm: "h-5 px-2", lg: "h-8 px-3" } },
+ *     defaultVariants: { size: "sm" },
+ *     compoundVariants: [{ size: "lg", shape: "rounded", class: "rounded-lg" }],
+ *   });
+ *   badgeVariants({ size: "lg" }); // "inline-flex items-center h-8 px-3"
+ *
+ * Classes come in this order: base, each variant in table order, then the matching compound variants.
+ * tailwind-merge (`cn`) resolves conflicts, the later class wins. A compound value may list alternatives: "32|lg".
+ */
+export type VariantTable = {
+  base?: string;
+  variants: Record<string, Record<string, string>>;
+  defaultVariants: Record<string, string>;
+  compoundVariants?: Array<{ class: string } & Record<string, string>>;
+};
+
+/** the props a table accepts: one optional value per variant */
+export type VariantSelection<T extends VariantTable> = {
+  [K in keyof T["variants"]]?: (keyof T["variants"][K] & string) | undefined;
+};
+
+/** a variant function: call it with the selected values, read `.table` for the types */
+export type VariantFn<T extends VariantTable> = ((selection?: VariantSelection<T>) => string) & { table: T };
+
+/** the values of one variant of a table: `VariantKey<typeof badgeVariants, "size">` is `"sm" | "lg"` */
+export type VariantKey<F extends { table: VariantTable }, K extends keyof F["table"]["variants"]> = Exclude<
+  keyof F["table"]["variants"][K] & string,
+  ""
+>;
+
+export function variants<T extends VariantTable>(table: T): VariantFn<T> {
+  const pick = (selection: Record<string, string | undefined>, key: string): string =>
+    (selection[key] ?? "").trim() || (table.defaultVariants[key] ?? "").trim();
+  const fn = (selection: VariantSelection<T> = {}): string => {
+    const sel = selection as Record<string, string | undefined>;
+    const parts: string[] = [table.base ?? ""];
+    for (const [key, choices] of Object.entries(table.variants)) {
+      const choice = pick(sel, key);
+      const cls = choices[choice];
+      // a typo in development is an error; in production the unknown value is dropped
+      if (cls === undefined && isDevEnv()) throw new Error(`[variants] unknown value "${choice}" for "${key}"`);
+      parts.push(cls ?? "");
+    }
+    for (const compound of table.compoundVariants ?? []) {
+      const matches = Object.entries(compound).every(([k, want]) => k === "class" || want.split("|").includes(pick(sel, k)));
+      if (matches) parts.push(compound.class);
+    }
+    return cn(...parts.map((p) => p.trim()).filter(Boolean));
+  };
+  return Object.assign(fn, { table });
+}
diff --git a/packages/vue/ui/tsconfig.json b/packages/vue/ui/tsconfig.json
new file mode 100644
index 0000000..3b35cd6
--- /dev/null
+++ b/packages/vue/ui/tsconfig.json
@@ -0,0 +1,9 @@
+// Code generated by xgen. DO NOT EDIT.
+// Source: xgen/generator/src/plan.ts (uiPackage)
+{
+  "compilerOptions": {
+    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "preserve",
+    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}
diff --git a/rules/baselines/discovery.json b/rules/baselines/discovery.json
new file mode 100644
index 0000000..72f31e9
--- /dev/null
+++ b/rules/baselines/discovery.json
@@ -0,0 +1,20 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "apps/discovery",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 0,
+    "literal-text": 0
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {},
+    "literal-text": {}
+  }
+}
diff --git a/rules/baselines/host-react.json b/rules/baselines/host-react.json
new file mode 100644
index 0000000..665e5af
--- /dev/null
+++ b/rules/baselines/host-react.json
@@ -0,0 +1,20 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "apps/host-react",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 0,
+    "literal-text": 0
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {},
+    "literal-text": {}
+  }
+}
diff --git a/rules/baselines/host-solid.json b/rules/baselines/host-solid.json
new file mode 100644
index 0000000..5fe3afe
--- /dev/null
+++ b/rules/baselines/host-solid.json
@@ -0,0 +1,20 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "apps/host-solid",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 0,
+    "literal-text": 0
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {},
+    "literal-text": {}
+  }
+}
diff --git a/rules/baselines/host-svelte.json b/rules/baselines/host-svelte.json
new file mode 100644
index 0000000..0fd9d46
--- /dev/null
+++ b/rules/baselines/host-svelte.json
@@ -0,0 +1,20 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "apps/host-svelte",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 0,
+    "literal-text": 0
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {},
+    "literal-text": {}
+  }
+}
diff --git a/rules/baselines/host-vue.json b/rules/baselines/host-vue.json
new file mode 100644
index 0000000..c59b9a3
--- /dev/null
+++ b/rules/baselines/host-vue.json
@@ -0,0 +1,20 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "apps/host-vue",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 0,
+    "literal-text": 0
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {},
+    "literal-text": {}
+  }
+}
diff --git a/rules/baselines/jinja2-ui.json b/rules/baselines/jinja2-ui.json
new file mode 100644
index 0000000..6391b94
--- /dev/null
+++ b/rules/baselines/jinja2-ui.json
@@ -0,0 +1,36 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "packages/jinja2/ui",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 19,
+    "literal-text": 2
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {
+      "blocks/editor-tab.html.j2": 1,
+      "blocks/feature-sticky.html.j2": 1,
+      "blocks/file-tree-item.html.j2": 2,
+      "blocks/hero-head.html.j2": 1,
+      "blocks/icon-tab.html.j2": 1,
+      "blocks/mega-menu.html.j2": 1,
+      "blocks/menu-entry.html.j2": 3,
+      "blocks/nav-item.html.j2": 3,
+      "blocks/section-head.html.j2": 2,
+      "blocks/shell-sidebar.html.j2": 1,
+      "blocks/signup-wizard.html.j2": 1,
+      "blocks/stepper.html.j2": 1,
+      "blocks/switcher-item.html.j2": 1
+    },
+    "literal-text": {
+      "blocks/prompt-composer.html.j2": 2
+    }
+  }
+}
diff --git a/rules/baselines/latte-ui.json b/rules/baselines/latte-ui.json
new file mode 100644
index 0000000..8f0f1ab
--- /dev/null
+++ b/rules/baselines/latte-ui.json
@@ -0,0 +1,36 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "packages/latte/ui",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 19,
+    "literal-text": 2
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {
+      "blocks/editor-tab.latte": 1,
+      "blocks/feature-sticky.latte": 1,
+      "blocks/file-tree-item.latte": 2,
+      "blocks/hero-head.latte": 1,
+      "blocks/icon-tab.latte": 1,
+      "blocks/mega-menu.latte": 1,
+      "blocks/menu-entry.latte": 3,
+      "blocks/nav-item.latte": 3,
+      "blocks/section-head.latte": 2,
+      "blocks/shell-sidebar.latte": 1,
+      "blocks/signup-wizard.latte": 1,
+      "blocks/stepper.latte": 1,
+      "blocks/switcher-item.latte": 1
+    },
+    "literal-text": {
+      "blocks/prompt-composer.latte": 2
+    }
+  }
+}
diff --git a/rules/baselines/magazine.json b/rules/baselines/magazine.json
new file mode 100644
index 0000000..650c1ea
--- /dev/null
+++ b/rules/baselines/magazine.json
@@ -0,0 +1,50 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "apps/magazine",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 230,
+    "reactive-aria": 11,
+    "literal-text": 6
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {
+      "src/App.svelte": 16,
+      "src/parts/card.svelte": 7,
+      "src/parts/collection-header.svelte": 12,
+      "src/parts/collection.svelte": 8,
+      "src/parts/design-system.svelte": 30,
+      "src/parts/heart.svelte": 3,
+      "src/parts/home.svelte": 4,
+      "src/parts/packs.svelte": 13,
+      "src/parts/presets.svelte": 11,
+      "src/parts/row.svelte": 3,
+      "src/parts/search.svelte": 49,
+      "src/parts/sphere.svelte": 6,
+      "src/parts/style-page.svelte": 39,
+      "src/parts/template-stage.svelte": 2,
+      "src/reference/App.svelte": 1,
+      "src/templates/docs.svelte": 6,
+      "src/templates/sidebar.svelte": 2,
+      "src/templates/three-column.svelte": 10,
+      "src/templates/two-column.svelte": 8
+    },
+    "reactive-aria": {
+      "src/parts/design-system.svelte": 3,
+      "src/parts/heart.svelte": 1,
+      "src/parts/search.svelte": 4,
+      "src/parts/style-page.svelte": 3
+    },
+    "literal-text": {
+      "src/App.svelte": 1,
+      "src/parts/card.svelte": 2,
+      "src/parts/design-system.svelte": 2,
+      "src/reference/App.svelte": 1
+    }
+  }
+}
diff --git a/rules/baselines/react-ui.json b/rules/baselines/react-ui.json
new file mode 100644
index 0000000..3625ba8
--- /dev/null
+++ b/rules/baselines/react-ui.json
@@ -0,0 +1,36 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "packages/react/ui",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 19,
+    "literal-text": 2
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {
+      "src/blocks/feature-sticky.tsx": 1,
+      "src/blocks/mega-menu.tsx": 1,
+      "src/blocks/signup-wizard.tsx": 1,
+      "src/blocks/stepper.tsx": 1,
+      "src/components/editor-tab.tsx": 1,
+      "src/components/file-tree-item.tsx": 2,
+      "src/components/hero-head.tsx": 1,
+      "src/components/icon-tab.tsx": 1,
+      "src/components/menu-entry.tsx": 3,
+      "src/components/nav-item.tsx": 3,
+      "src/components/section-head.tsx": 2,
+      "src/components/shell-sidebar.tsx": 1,
+      "src/components/switcher-item.tsx": 1
+    },
+    "literal-text": {
+      "src/components/prompt-composer.tsx": 2
+    }
+  }
+}
diff --git a/rules/baselines/solid-ui.json b/rules/baselines/solid-ui.json
new file mode 100644
index 0000000..876ffa0
--- /dev/null
+++ b/rules/baselines/solid-ui.json
@@ -0,0 +1,36 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "packages/solid/ui",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 19,
+    "literal-text": 2
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {
+      "src/blocks/feature-sticky.tsx": 1,
+      "src/blocks/mega-menu.tsx": 1,
+      "src/blocks/signup-wizard.tsx": 1,
+      "src/blocks/stepper.tsx": 1,
+      "src/components/editor-tab.tsx": 1,
+      "src/components/file-tree-item.tsx": 2,
+      "src/components/hero-head.tsx": 1,
+      "src/components/icon-tab.tsx": 1,
+      "src/components/menu-entry.tsx": 3,
+      "src/components/nav-item.tsx": 3,
+      "src/components/section-head.tsx": 2,
+      "src/components/shell-sidebar.tsx": 1,
+      "src/components/switcher-item.tsx": 1
+    },
+    "literal-text": {
+      "src/components/prompt-composer.tsx": 2
+    }
+  }
+}
diff --git a/rules/baselines/svelte-ui.json b/rules/baselines/svelte-ui.json
new file mode 100644
index 0000000..cce19ef
--- /dev/null
+++ b/rules/baselines/svelte-ui.json
@@ -0,0 +1,36 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "packages/svelte/ui",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 19,
+    "literal-text": 2
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {
+      "src/blocks/feature-sticky.svelte": 1,
+      "src/blocks/mega-menu.svelte": 1,
+      "src/blocks/signup-wizard.svelte": 1,
+      "src/blocks/stepper.svelte": 1,
+      "src/components/editor-tab.svelte": 1,
+      "src/components/file-tree-item.svelte": 2,
+      "src/components/hero-head.svelte": 1,
+      "src/components/icon-tab.svelte": 1,
+      "src/components/menu-entry.svelte": 3,
+      "src/components/nav-item.svelte": 3,
+      "src/components/section-head.svelte": 2,
+      "src/components/shell-sidebar.svelte": 1,
+      "src/components/switcher-item.svelte": 1
+    },
+    "literal-text": {
+      "src/components/prompt-composer.svelte": 2
+    }
+  }
+}
diff --git a/rules/baselines/taste-screens.json b/rules/baselines/taste-screens.json
new file mode 100644
index 0000000..ed48f74
--- /dev/null
+++ b/rules/baselines/taste-screens.json
@@ -0,0 +1,27 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "packages/taste-screens",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 0,
+    "literal-text": 14
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {},
+    "literal-text": {
+      "src/screens/t124-split-mesh.svelte": 3,
+      "src/screens/t126-frame-rings.svelte": 3,
+      "src/screens/t130-fullbleed-mesh.svelte": 2,
+      "src/screens/t131-ribbon-flat.svelte": 3,
+      "src/screens/t132-editorial-grain.svelte": 2,
+      "src/screens/t140-dense-flat.svelte": 1
+    }
+  }
+}
diff --git a/rules/baselines/templ-ui.json b/rules/baselines/templ-ui.json
new file mode 100644
index 0000000..a5e352f
--- /dev/null
+++ b/rules/baselines/templ-ui.json
@@ -0,0 +1,36 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "packages/templ/ui",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 19,
+    "literal-text": 2
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {
+      "blocks/editor-tab.templ": 1,
+      "blocks/feature-sticky.templ": 1,
+      "blocks/file-tree-item.templ": 2,
+      "blocks/hero-head.templ": 1,
+      "blocks/icon-tab.templ": 1,
+      "blocks/mega-menu.templ": 1,
+      "blocks/menu-entry.templ": 3,
+      "blocks/nav-item.templ": 3,
+      "blocks/section-head.templ": 2,
+      "blocks/shell-sidebar.templ": 1,
+      "blocks/signup-wizard.templ": 1,
+      "blocks/stepper.templ": 1,
+      "blocks/switcher-item.templ": 1
+    },
+    "literal-text": {
+      "blocks/prompt-composer.templ": 2
+    }
+  }
+}
diff --git a/rules/baselines/twig-ui.json b/rules/baselines/twig-ui.json
new file mode 100644
index 0000000..982925b
--- /dev/null
+++ b/rules/baselines/twig-ui.json
@@ -0,0 +1,36 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "packages/twig/ui",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 19,
+    "literal-text": 2
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {
+      "blocks/editor-tab.html.twig": 1,
+      "blocks/feature-sticky.html.twig": 1,
+      "blocks/file-tree-item.html.twig": 2,
+      "blocks/hero-head.html.twig": 1,
+      "blocks/icon-tab.html.twig": 1,
+      "blocks/mega-menu.html.twig": 1,
+      "blocks/menu-entry.html.twig": 3,
+      "blocks/nav-item.html.twig": 3,
+      "blocks/section-head.html.twig": 2,
+      "blocks/shell-sidebar.html.twig": 1,
+      "blocks/signup-wizard.html.twig": 1,
+      "blocks/stepper.html.twig": 1,
+      "blocks/switcher-item.html.twig": 1
+    },
+    "literal-text": {
+      "blocks/prompt-composer.html.twig": 2
+    }
+  }
+}
diff --git a/rules/baselines/vue-ui.json b/rules/baselines/vue-ui.json
new file mode 100644
index 0000000..8ae0ec6
--- /dev/null
+++ b/rules/baselines/vue-ui.json
@@ -0,0 +1,36 @@
+{
+  "$comment": "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline",
+  "package": "packages/vue/ui",
+  "totals": {
+    "block-root": 0,
+    "raw-html": 0,
+    "dynamic-tag": 0,
+    "raw-native-tag": 0,
+    "reactive-aria": 19,
+    "literal-text": 2
+  },
+  "counts": {
+    "block-root": {},
+    "raw-html": {},
+    "dynamic-tag": {},
+    "raw-native-tag": {},
+    "reactive-aria": {
+      "src/blocks/feature-sticky.vue": 1,
+      "src/blocks/mega-menu.vue": 1,
+      "src/blocks/signup-wizard.vue": 1,
+      "src/blocks/stepper.vue": 1,
+      "src/components/editor-tab.vue": 1,
+      "src/components/file-tree-item.vue": 2,
+      "src/components/hero-head.vue": 1,
+      "src/components/icon-tab.vue": 1,
+      "src/components/menu-entry.vue": 3,
+      "src/components/nav-item.vue": 3,
+      "src/components/section-head.vue": 2,
+      "src/components/shell-sidebar.vue": 1,
+      "src/components/switcher-item.vue": 1
+    },
+    "literal-text": {
+      "src/components/prompt-composer.vue": 2
+    }
+  }
+}
diff --git a/rules/fixtures/jinja2/block-root.bad.html.j2 b/rules/fixtures/jinja2/block-root.bad.html.j2
new file mode 100644
index 0000000..b910464
--- /dev/null
+++ b/rules/fixtures/jinja2/block-root.bad.html.j2
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector block-root (violating). -#}
+{%- set c_1 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'p-4'}, 'children': c_1}) }}
diff --git a/rules/fixtures/jinja2/block-root.branches.ok.html.j2 b/rules/fixtures/jinja2/block-root.branches.ok.html.j2
new file mode 100644
index 0000000..21c2994
--- /dev/null
+++ b/rules/fixtures/jinja2/block-root.branches.ok.html.j2
@@ -0,0 +1,17 @@
+{#- Self-test fixture of the rules group, detector block-root (clean). -#}
+{%- if ui_t(v_open) %}
+{%- set c_1 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_1}) }}
+{%- elif ui_t(ui_len(v_items)) %}
+{%- set c_2 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'aside'}, 'children': c_2}) }}
+{%- else %}
+{%- set c_3 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_3}) }}
+{%- endif %}
diff --git a/rules/fixtures/jinja2/block-root.loop.bad.html.j2 b/rules/fixtures/jinja2/block-root.loop.bad.html.j2
new file mode 100644
index 0000000..9fe3923
--- /dev/null
+++ b/rules/fixtures/jinja2/block-root.loop.bad.html.j2
@@ -0,0 +1,7 @@
+{#- Self-test fixture of the rules group, detector block-root (violating). -#}
+{%- for v_item in ui_l(v_items) %}
+{%- set c_1 -%}
+  {{ ui_text(v_item) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_1}) }}
+{%- endfor %}
diff --git a/rules/fixtures/jinja2/block-root.nested.bad.html.j2 b/rules/fixtures/jinja2/block-root.nested.bad.html.j2
new file mode 100644
index 0000000..027788e
--- /dev/null
+++ b/rules/fixtures/jinja2/block-root.nested.bad.html.j2
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector block-root (violating). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'aside'}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_2}) }}
diff --git a/rules/fixtures/jinja2/block-root.ok.html.j2 b/rules/fixtures/jinja2/block-root.ok.html.j2
new file mode 100644
index 0000000..7d7a545
--- /dev/null
+++ b/rules/fixtures/jinja2/block-root.ok.html.j2
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector block-root (clean): a macro imported with from and used with call is a component. -#}
+{%- from 'ui/block/block.html.j2' import block -%}
+{%- call block({'Tag': 'section'}) -%}
+  {{ ui_text(v_title) }}
+{%- endcall -%}
diff --git a/rules/fixtures/jinja2/block-root.siblings.bad.html.j2 b/rules/fixtures/jinja2/block-root.siblings.bad.html.j2
new file mode 100644
index 0000000..eb11b9b
--- /dev/null
+++ b/rules/fixtures/jinja2/block-root.siblings.bad.html.j2
@@ -0,0 +1,9 @@
+{#- Self-test fixture of the rules group, detector block-root (violating). -#}
+{%- set c_1 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_1}) }}
+{%- set c_2 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'aside'}, 'children': c_2}) }}
diff --git a/rules/fixtures/jinja2/dynamic-tag.bad.html.j2 b/rules/fixtures/jinja2/dynamic-tag.bad.html.j2
new file mode 100644
index 0000000..717cc70
--- /dev/null
+++ b/rules/fixtures/jinja2/dynamic-tag.bad.html.j2
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector dynamic-tag (violating). -#}
+{%- set c_9 -%}
+  <{{ v_tag }}>{{ ui_text(v_title) }}</{{ v_tag }}>
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_9}) }}
diff --git a/rules/fixtures/jinja2/dynamic-tag.ok.html.j2 b/rules/fixtures/jinja2/dynamic-tag.ok.html.j2
new file mode 100644
index 0000000..69d0dbe
--- /dev/null
+++ b/rules/fixtures/jinja2/dynamic-tag.ok.html.j2
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector dynamic-tag (clean). -#}
+{%- set c_9 -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Tag': 'div'}}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_9}) }}
diff --git a/rules/fixtures/jinja2/literal-text.bad.html.j2 b/rules/fixtures/jinja2/literal-text.bad.html.j2
new file mode 100644
index 0000000..eb1878b
--- /dev/null
+++ b/rules/fixtures/jinja2/literal-text.bad.html.j2
@@ -0,0 +1,13 @@
+{#- Self-test fixture of the rules group, detector literal-text (violating). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    Save changes
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {}, 'children': c_1}) }}
+  {{ ui_include('ui/input/input.html.j2', {'p': {'Placeholder': 'Your name'}}) }}
+  {%- set c_3 -%}
+    {{ 'Yes' if ui_t(v_ok) else 'No' }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {}, 'children': c_3}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_2}) }}
diff --git a/rules/fixtures/jinja2/literal-text.ok.html.j2 b/rules/fixtures/jinja2/literal-text.ok.html.j2
new file mode 100644
index 0000000..eac04f8
--- /dev/null
+++ b/rules/fixtures/jinja2/literal-text.ok.html.j2
@@ -0,0 +1,9 @@
+{#- Self-test fixture of the rules group, detector literal-text (clean). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {}, 'children': c_1}) }}
+  {{ ui_include('ui/input/input.html.j2', {'p': {'Placeholder': ui_text(v_hint)}}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_2}) }}
diff --git a/rules/fixtures/jinja2/raw-html.bad.html.j2 b/rules/fixtures/jinja2/raw-html.bad.html.j2
new file mode 100644
index 0000000..ec9f28f
--- /dev/null
+++ b/rules/fixtures/jinja2/raw-html.bad.html.j2
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector raw-html (violating). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ v_body|safe }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_2}) }}
diff --git a/rules/fixtures/jinja2/raw-html.ok.html.j2 b/rules/fixtures/jinja2/raw-html.ok.html.j2
new file mode 100644
index 0000000..371ce44
--- /dev/null
+++ b/rules/fixtures/jinja2/raw-html.ok.html.j2
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector raw-html (clean). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ ui_include('ui/text/text.html.j2', {'p': {}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_2}) }}
diff --git a/rules/fixtures/jinja2/raw-native-tag.bad.html.j2 b/rules/fixtures/jinja2/raw-native-tag.bad.html.j2
new file mode 100644
index 0000000..eb4c020
--- /dev/null
+++ b/rules/fixtures/jinja2/raw-native-tag.bad.html.j2
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector raw-native-tag (violating). -#}
+{%- set c_9 -%}
+  <div class="p-4">{{ ui_text(v_title) }}</div>
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_9}) }}
diff --git a/rules/fixtures/jinja2/raw-native-tag.ok.html.j2 b/rules/fixtures/jinja2/raw-native-tag.ok.html.j2
new file mode 100644
index 0000000..3f0fcec
--- /dev/null
+++ b/rules/fixtures/jinja2/raw-native-tag.ok.html.j2
@@ -0,0 +1,11 @@
+{#- Self-test fixture of the rules group, detector raw-native-tag (clean). -#}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {%- set c_2 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ ui_include('ui/inline/inline.html.j2', {'p': {}, 'children': c_2}) }}
+  {%- endset -%}
+  {{ ui_include('ui/box/box.html.j2', {'p': {'Class': 'p-4'}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_3}) }}
diff --git a/rules/fixtures/jinja2/reactive-aria.bad.html.j2 b/rules/fixtures/jinja2/reactive-aria.bad.html.j2
new file mode 100644
index 0000000..074cb7e
--- /dev/null
+++ b/rules/fixtures/jinja2/reactive-aria.bad.html.j2
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector reactive-aria (violating). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_more) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'Attrs': ui_attrs(['aria-expanded', v_open])}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_2}) }}
diff --git a/rules/fixtures/jinja2/reactive-aria.ok.html.j2 b/rules/fixtures/jinja2/reactive-aria.ok.html.j2
new file mode 100644
index 0000000..d3bece1
--- /dev/null
+++ b/rules/fixtures/jinja2/reactive-aria.ok.html.j2
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector reactive-aria (clean). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_more) }}
+  {%- endset -%}
+  {{ ui_include('ui/button/button.html.j2', {'p': {'AriaLabel': v_label, 'Attrs': ui_attrs(['aria-controls', 'menu'])}, 'children': c_1}) }}
+{%- endset -%}
+{{ ui_include('ui/block/block.html.j2', {'p': {'Tag': 'section'}, 'children': c_2}) }}
diff --git a/rules/fixtures/latte/block-root.bad.latte b/rules/fixtures/latte/block-root.bad.latte
new file mode 100644
index 0000000..af4d2e0
--- /dev/null
+++ b/rules/fixtures/latte/block-root.bad.latte
@@ -0,0 +1,5 @@
+{* Self-test fixture of the rules group, detector block-root (violating). *}
+{capture $c_1}
+  {=ui_text($v_title)}
+{/capture}
+{=ui_include('ui/box/box.latte', ['p' => ['Class' => 'p-4'], 'children' => $c_1])|noescape}
diff --git a/rules/fixtures/latte/block-root.branches.ok.latte b/rules/fixtures/latte/block-root.branches.ok.latte
new file mode 100644
index 0000000..5150dde
--- /dev/null
+++ b/rules/fixtures/latte/block-root.branches.ok.latte
@@ -0,0 +1,17 @@
+{* Self-test fixture of the rules group, detector block-root (clean). *}
+{if ui_t($v_open)}
+{capture $c_1}
+  {=ui_text($v_title)}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_1])|noescape}
+{elseif ui_t(ui_len($v_items))}
+{capture $c_2}
+  {=ui_text($v_title)}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'aside'], 'children' => $c_2])|noescape}
+{else}
+{capture $c_3}
+  {=ui_text($v_title)}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_3])|noescape}
+{/if}
diff --git a/rules/fixtures/latte/block-root.loop.bad.latte b/rules/fixtures/latte/block-root.loop.bad.latte
new file mode 100644
index 0000000..8c5e5da
--- /dev/null
+++ b/rules/fixtures/latte/block-root.loop.bad.latte
@@ -0,0 +1,7 @@
+{* Self-test fixture of the rules group, detector block-root (violating). *}
+{foreach ui_l($v_items) as $v_item}
+{capture $c_1}
+  {=ui_text($v_item)}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_1])|noescape}
+{/foreach}
diff --git a/rules/fixtures/latte/block-root.nested.bad.latte b/rules/fixtures/latte/block-root.nested.bad.latte
new file mode 100644
index 0000000..f6fa5df
--- /dev/null
+++ b/rules/fixtures/latte/block-root.nested.bad.latte
@@ -0,0 +1,8 @@
+{* Self-test fixture of the rules group, detector block-root (violating). *}
+{capture $c_2}
+  {capture $c_1}
+    {=ui_text($v_title)}
+  {/capture}
+  {=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'aside'], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_2])|noescape}
diff --git a/rules/fixtures/latte/block-root.ok.latte b/rules/fixtures/latte/block-root.ok.latte
new file mode 100644
index 0000000..ba22408
--- /dev/null
+++ b/rules/fixtures/latte/block-root.ok.latte
@@ -0,0 +1,4 @@
+{* Self-test fixture of the rules group, detector block-root (clean): an embed of the Block template is a component. *}
+{embed 'ui/block/block.latte', p: ['Tag' => 'section']}
+  {=ui_text($v_title)}
+{/embed}
diff --git a/rules/fixtures/latte/block-root.siblings.bad.latte b/rules/fixtures/latte/block-root.siblings.bad.latte
new file mode 100644
index 0000000..fbb3eb1
--- /dev/null
+++ b/rules/fixtures/latte/block-root.siblings.bad.latte
@@ -0,0 +1,9 @@
+{* Self-test fixture of the rules group, detector block-root (violating). *}
+{capture $c_1}
+  {=ui_text($v_title)}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_1])|noescape}
+{capture $c_2}
+  {=ui_text($v_title)}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'aside'], 'children' => $c_2])|noescape}
diff --git a/rules/fixtures/latte/dynamic-tag.bad.latte b/rules/fixtures/latte/dynamic-tag.bad.latte
new file mode 100644
index 0000000..ce31180
--- /dev/null
+++ b/rules/fixtures/latte/dynamic-tag.bad.latte
@@ -0,0 +1,5 @@
+{* Self-test fixture of the rules group, detector dynamic-tag (violating). *}
+{capture $c_9}
+  <div n:tag="$v_tag">{=ui_text($v_title)}</div>
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_9])|noescape}
diff --git a/rules/fixtures/latte/dynamic-tag.ok.latte b/rules/fixtures/latte/dynamic-tag.ok.latte
new file mode 100644
index 0000000..8482710
--- /dev/null
+++ b/rules/fixtures/latte/dynamic-tag.ok.latte
@@ -0,0 +1,5 @@
+{* Self-test fixture of the rules group, detector dynamic-tag (clean). *}
+{capture $c_9}
+  {=ui_include('ui/box/box.latte', ['p' => ['Tag' => 'div']])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_9])|noescape}
diff --git a/rules/fixtures/latte/literal-text.bad.latte b/rules/fixtures/latte/literal-text.bad.latte
new file mode 100644
index 0000000..79b82a4
--- /dev/null
+++ b/rules/fixtures/latte/literal-text.bad.latte
@@ -0,0 +1,13 @@
+{* Self-test fixture of the rules group, detector literal-text (violating). *}
+{capture $c_2}
+  {capture $c_1}
+    Save changes
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => [], 'children' => $c_1])|noescape}
+  {=ui_include('ui/input/input.latte', ['p' => ['Placeholder' => 'Your name']])|noescape}
+  {capture $c_3}
+    {=ui_t($v_ok) ? 'Yes' : 'No'}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => [], 'children' => $c_3])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_2])|noescape}
diff --git a/rules/fixtures/latte/literal-text.ok.latte b/rules/fixtures/latte/literal-text.ok.latte
new file mode 100644
index 0000000..594e16e
--- /dev/null
+++ b/rules/fixtures/latte/literal-text.ok.latte
@@ -0,0 +1,9 @@
+{* Self-test fixture of the rules group, detector literal-text (clean). *}
+{capture $c_2}
+  {capture $c_1}
+    {=ui_text($v_title)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => [], 'children' => $c_1])|noescape}
+  {=ui_include('ui/input/input.latte', ['p' => ['Placeholder' => ui_text($v_hint)]])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_2])|noescape}
diff --git a/rules/fixtures/latte/raw-html.bad.latte b/rules/fixtures/latte/raw-html.bad.latte
new file mode 100644
index 0000000..398aba1
--- /dev/null
+++ b/rules/fixtures/latte/raw-html.bad.latte
@@ -0,0 +1,8 @@
+{* Self-test fixture of the rules group, detector raw-html (violating). *}
+{capture $c_2}
+  {capture $c_1}
+    {=$v_body|noescape}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => [], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_2])|noescape}
diff --git a/rules/fixtures/latte/raw-html.ok.latte b/rules/fixtures/latte/raw-html.ok.latte
new file mode 100644
index 0000000..d2f379b
--- /dev/null
+++ b/rules/fixtures/latte/raw-html.ok.latte
@@ -0,0 +1,8 @@
+{* Self-test fixture of the rules group, detector raw-html (clean). *}
+{capture $c_2}
+  {capture $c_1}
+    {=ui_text($v_title)}
+  {/capture}
+  {=ui_include('ui/text/text.latte', ['p' => [], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_2])|noescape}
diff --git a/rules/fixtures/latte/raw-native-tag.bad.latte b/rules/fixtures/latte/raw-native-tag.bad.latte
new file mode 100644
index 0000000..fee66c3
--- /dev/null
+++ b/rules/fixtures/latte/raw-native-tag.bad.latte
@@ -0,0 +1,5 @@
+{* Self-test fixture of the rules group, detector raw-native-tag (violating). *}
+{capture $c_9}
+  <div class="p-4">{=ui_text($v_title)}</div>
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_9])|noescape}
diff --git a/rules/fixtures/latte/raw-native-tag.ok.latte b/rules/fixtures/latte/raw-native-tag.ok.latte
new file mode 100644
index 0000000..afd17f3
--- /dev/null
+++ b/rules/fixtures/latte/raw-native-tag.ok.latte
@@ -0,0 +1,11 @@
+{* Self-test fixture of the rules group, detector raw-native-tag (clean). *}
+{capture $c_3}
+  {capture $c_1}
+    {capture $c_2}
+      {=ui_text($v_title)}
+    {/capture}
+    {=ui_include('ui/inline/inline.latte', ['p' => [], 'children' => $c_2])|noescape}
+  {/capture}
+  {=ui_include('ui/box/box.latte', ['p' => ['Class' => 'p-4'], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_3])|noescape}
diff --git a/rules/fixtures/latte/reactive-aria.bad.latte b/rules/fixtures/latte/reactive-aria.bad.latte
new file mode 100644
index 0000000..8588db6
--- /dev/null
+++ b/rules/fixtures/latte/reactive-aria.bad.latte
@@ -0,0 +1,8 @@
+{* Self-test fixture of the rules group, detector reactive-aria (violating). *}
+{capture $c_2}
+  {capture $c_1}
+    {=ui_text($v_more)}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['Attrs' => ui_attrs(['aria-expanded', $v_open])], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_2])|noescape}
diff --git a/rules/fixtures/latte/reactive-aria.ok.latte b/rules/fixtures/latte/reactive-aria.ok.latte
new file mode 100644
index 0000000..6492832
--- /dev/null
+++ b/rules/fixtures/latte/reactive-aria.ok.latte
@@ -0,0 +1,8 @@
+{* Self-test fixture of the rules group, detector reactive-aria (clean). *}
+{capture $c_2}
+  {capture $c_1}
+    {=ui_text($v_more)}
+  {/capture}
+  {=ui_include('ui/button/button.latte', ['p' => ['AriaLabel' => $v_label, 'Attrs' => ui_attrs(['aria-controls', 'menu'])], 'children' => $c_1])|noescape}
+{/capture}
+{=ui_include('ui/block/block.latte', ['p' => ['Tag' => 'section'], 'children' => $c_2])|noescape}
diff --git a/rules/fixtures/react/block-root.bad.tsx b/rules/fixtures/react/block-root.bad.tsx
new file mode 100644
index 0000000..d364f18
--- /dev/null
+++ b/rules/fixtures/react/block-root.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector block-root (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Box>
+      <Text>{ui.title}</Text>
+    </Box>
+  );
+}
diff --git a/rules/fixtures/react/block-root.branches.ok.tsx b/rules/fixtures/react/block-root.branches.ok.tsx
new file mode 100644
index 0000000..8a7cccf
--- /dev/null
+++ b/rules/fixtures/react/block-root.branches.ok.tsx
@@ -0,0 +1,16 @@
+// Self-test fixture of the rules group, detector block-root, case branches (clean).
+import { Block, Stack, Text } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, items = [] as string[] }) {
+  if (!items.length) return <Block tag="aside"><Text>{ui.title}</Text></Block>;
+  return open ? (
+    <Block tag="section">
+      <Text>{ui.title}</Text>
+    </Block>
+  ) : (
+    <Block tag="aside">
+      <Text>{ui.title}</Text>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/block-root.loop.bad.tsx b/rules/fixtures/react/block-root.loop.bad.tsx
new file mode 100644
index 0000000..994a4a1
--- /dev/null
+++ b/rules/fixtures/react/block-root.loop.bad.tsx
@@ -0,0 +1,15 @@
+// Self-test fixture of the rules group, detector block-root, case loop (violating).
+import { Block, Stack, Text } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, items = [] as string[] }) {
+  return (
+    <>
+      {items.map((item) => (
+        <Block key={item} tag="section">
+          <Text>{item}</Text>
+        </Block>
+      ))}
+    </>
+  );
+}
diff --git a/rules/fixtures/react/block-root.nested.bad.tsx b/rules/fixtures/react/block-root.nested.bad.tsx
new file mode 100644
index 0000000..4e0c4c1
--- /dev/null
+++ b/rules/fixtures/react/block-root.nested.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector block-root, case nested (violating).
+import { Block, Stack, Text } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, items = [] as string[] }) {
+  return (
+    <Block tag="section">
+      <Block tag="aside">
+        <Text>{ui.title}</Text>
+      </Block>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/block-root.ok.tsx b/rules/fixtures/react/block-root.ok.tsx
new file mode 100644
index 0000000..92264bf
--- /dev/null
+++ b/rules/fixtures/react/block-root.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector block-root (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text>{ui.title}</Text>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/block-root.siblings.bad.tsx b/rules/fixtures/react/block-root.siblings.bad.tsx
new file mode 100644
index 0000000..46e1600
--- /dev/null
+++ b/rules/fixtures/react/block-root.siblings.bad.tsx
@@ -0,0 +1,18 @@
+// Self-test fixture of the rules group, detector block-root, case siblings (violating).
+import { Block, Stack, Text } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, items = [] as string[] }) {
+  return (
+    <>
+      <Block tag="section">
+        <Text>{ui.title}</Text>
+      </Block>
+      {open && (
+        <Block tag="aside">
+          <Text>{ui.title}</Text>
+        </Block>
+      )}
+    </>
+  );
+}
diff --git a/rules/fixtures/react/dynamic-tag.bad.tsx b/rules/fixtures/react/dynamic-tag.bad.tsx
new file mode 100644
index 0000000..fb98a6d
--- /dev/null
+++ b/rules/fixtures/react/dynamic-tag.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector dynamic-tag (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Tag>{ui.title}</Tag>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/dynamic-tag.ok.tsx b/rules/fixtures/react/dynamic-tag.ok.tsx
new file mode 100644
index 0000000..bab1e69
--- /dev/null
+++ b/rules/fixtures/react/dynamic-tag.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector dynamic-tag (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Title level={level}>{ui.title}</Title>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/literal-text.bad.tsx b/rules/fixtures/react/literal-text.bad.tsx
new file mode 100644
index 0000000..a916b31
--- /dev/null
+++ b/rules/fixtures/react/literal-text.bad.tsx
@@ -0,0 +1,15 @@
+// Self-test fixture of the rules group, detector literal-text (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text>Save changes</Text>
+      <Input placeholder="Your name" />
+      <Text>{ok ? "Yes" : "No"}</Text>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/literal-text.ok.tsx b/rules/fixtures/react/literal-text.ok.tsx
new file mode 100644
index 0000000..d2f92d7
--- /dev/null
+++ b/rules/fixtures/react/literal-text.ok.tsx
@@ -0,0 +1,15 @@
+// Self-test fixture of the rules group, detector literal-text (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text>{ui.save}</Text>
+      <Input placeholder={ui.name} />
+      <Text>{ok ? ui.yes : ui.no}</Text>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/raw-html.bad.tsx b/rules/fixtures/react/raw-html.bad.tsx
new file mode 100644
index 0000000..056995c
--- /dev/null
+++ b/rules/fixtures/react/raw-html.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector raw-html (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text dangerouslySetInnerHTML={{ __html: ui.body }} />
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/raw-html.ok.tsx b/rules/fixtures/react/raw-html.ok.tsx
new file mode 100644
index 0000000..776ba66
--- /dev/null
+++ b/rules/fixtures/react/raw-html.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector raw-html (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text>{ui.body}</Text>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/raw-native-tag.bad.tsx b/rules/fixtures/react/raw-native-tag.bad.tsx
new file mode 100644
index 0000000..c3aafae
--- /dev/null
+++ b/rules/fixtures/react/raw-native-tag.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector raw-native-tag (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <div className="p-4"><span>{ui.title}</span></div>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/raw-native-tag.ok.tsx b/rules/fixtures/react/raw-native-tag.ok.tsx
new file mode 100644
index 0000000..59d402b
--- /dev/null
+++ b/rules/fixtures/react/raw-native-tag.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector raw-native-tag (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Box className="p-4"><Inline>{ui.title}</Inline></Box>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/reactive-aria.bad.tsx b/rules/fixtures/react/reactive-aria.bad.tsx
new file mode 100644
index 0000000..9f33a8b
--- /dev/null
+++ b/rules/fixtures/react/reactive-aria.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector reactive-aria (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Button aria-expanded={open} onClick={toggle}>{ui.more}</Button>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/react/reactive-aria.ok.tsx b/rules/fixtures/react/reactive-aria.ok.tsx
new file mode 100644
index 0000000..7a5759f
--- /dev/null
+++ b/rules/fixtures/react/reactive-aria.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector reactive-aria (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/react-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Button expanded={open} aria-label={ui.more} onClick={toggle}>{ui.more}</Button>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/block-root.bad.tsx b/rules/fixtures/solid/block-root.bad.tsx
new file mode 100644
index 0000000..2a2beac
--- /dev/null
+++ b/rules/fixtures/solid/block-root.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector block-root (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Box>
+      <Text>{ui.title}</Text>
+    </Box>
+  );
+}
diff --git a/rules/fixtures/solid/block-root.branches.ok.tsx b/rules/fixtures/solid/block-root.branches.ok.tsx
new file mode 100644
index 0000000..005a095
--- /dev/null
+++ b/rules/fixtures/solid/block-root.branches.ok.tsx
@@ -0,0 +1,30 @@
+// Self-test fixture of the rules group, detector block-root, case branches (clean): Show and Switch/Match are exclusive branches.
+import { Match, Show, Switch } from "solid-js";
+import { Block, Text } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, wide = false, items = [] as string[] }) {
+  return (
+    <Show
+      when={items.length}
+      fallback={
+        <Block tag="aside">
+          <Text>{ui.title}</Text>
+        </Block>
+      }
+    >
+      <Switch fallback={<Block tag="div"><Text>{ui.title}</Text></Block>}>
+        <Match when={open}>
+          <Block tag="section">
+            <Text>{ui.title}</Text>
+          </Block>
+        </Match>
+        <Match when={wide}>
+          <Block tag="aside">
+            <Text>{ui.title}</Text>
+          </Block>
+        </Match>
+      </Switch>
+    </Show>
+  );
+}
diff --git a/rules/fixtures/solid/block-root.loop.bad.tsx b/rules/fixtures/solid/block-root.loop.bad.tsx
new file mode 100644
index 0000000..e865be9
--- /dev/null
+++ b/rules/fixtures/solid/block-root.loop.bad.tsx
@@ -0,0 +1,15 @@
+// Self-test fixture of the rules group, detector block-root, case loop (violating): a Block per item of For.
+import { For } from "solid-js";
+import { Block, Text } from "@ui8kit/solid-ui";
+
+export function Fixture({ items = [] as string[] }) {
+  return (
+    <For each={items}>
+      {(item) => (
+        <Block tag="section">
+          <Text>{item}</Text>
+        </Block>
+      )}
+    </For>
+  );
+}
diff --git a/rules/fixtures/solid/block-root.nested.bad.tsx b/rules/fixtures/solid/block-root.nested.bad.tsx
new file mode 100644
index 0000000..120876b
--- /dev/null
+++ b/rules/fixtures/solid/block-root.nested.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector block-root, case nested (violating).
+import { Block, Stack, Text } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, items = [] as string[] }) {
+  return (
+    <Block tag="section">
+      <Block tag="aside">
+        <Text>{ui.title}</Text>
+      </Block>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/block-root.ok.tsx b/rules/fixtures/solid/block-root.ok.tsx
new file mode 100644
index 0000000..e2e255c
--- /dev/null
+++ b/rules/fixtures/solid/block-root.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector block-root (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text>{ui.title}</Text>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/block-root.siblings.bad.tsx b/rules/fixtures/solid/block-root.siblings.bad.tsx
new file mode 100644
index 0000000..8bea849
--- /dev/null
+++ b/rules/fixtures/solid/block-root.siblings.bad.tsx
@@ -0,0 +1,19 @@
+// Self-test fixture of the rules group, detector block-root, case siblings (violating): a Block beside a Show with another Block.
+import { Show } from "solid-js";
+import { Block, Text } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false }) {
+  return (
+    <>
+      <Block tag="section">
+        <Text>{ui.title}</Text>
+      </Block>
+      <Show when={open}>
+        <Block tag="aside">
+          <Text>{ui.title}</Text>
+        </Block>
+      </Show>
+    </>
+  );
+}
diff --git a/rules/fixtures/solid/dynamic-tag.bad.tsx b/rules/fixtures/solid/dynamic-tag.bad.tsx
new file mode 100644
index 0000000..51676d5
--- /dev/null
+++ b/rules/fixtures/solid/dynamic-tag.bad.tsx
@@ -0,0 +1,12 @@
+// Self-test fixture of the rules group, detector dynamic-tag (violating): Solid's Dynamic picks the tag at run time.
+import { Dynamic } from "solid-js/web";
+import { Block } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ level = 2 }) {
+  return (
+    <Block tag="section">
+      <Dynamic component={level === 1 ? "h1" : "h2"}>{ui.title}</Dynamic>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/dynamic-tag.ok.tsx b/rules/fixtures/solid/dynamic-tag.ok.tsx
new file mode 100644
index 0000000..5aafaf3
--- /dev/null
+++ b/rules/fixtures/solid/dynamic-tag.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector dynamic-tag (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Title level={level}>{ui.title}</Title>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/literal-text.bad.tsx b/rules/fixtures/solid/literal-text.bad.tsx
new file mode 100644
index 0000000..fddaf12
--- /dev/null
+++ b/rules/fixtures/solid/literal-text.bad.tsx
@@ -0,0 +1,15 @@
+// Self-test fixture of the rules group, detector literal-text (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text>Save changes</Text>
+      <Input placeholder="Your name" />
+      <Text>{ok ? "Yes" : "No"}</Text>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/literal-text.ok.tsx b/rules/fixtures/solid/literal-text.ok.tsx
new file mode 100644
index 0000000..bca8de2
--- /dev/null
+++ b/rules/fixtures/solid/literal-text.ok.tsx
@@ -0,0 +1,15 @@
+// Self-test fixture of the rules group, detector literal-text (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text>{ui.save}</Text>
+      <Input placeholder={ui.name} />
+      <Text>{ok ? ui.yes : ui.no}</Text>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/raw-html.bad.tsx b/rules/fixtures/solid/raw-html.bad.tsx
new file mode 100644
index 0000000..c3477b5
--- /dev/null
+++ b/rules/fixtures/solid/raw-html.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector raw-html (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text dangerouslySetInnerHTML={{ __html: ui.body }} />
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/raw-html.ok.tsx b/rules/fixtures/solid/raw-html.ok.tsx
new file mode 100644
index 0000000..8a10f71
--- /dev/null
+++ b/rules/fixtures/solid/raw-html.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector raw-html (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Text>{ui.body}</Text>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/raw-native-tag.bad.tsx b/rules/fixtures/solid/raw-native-tag.bad.tsx
new file mode 100644
index 0000000..53d0cc6
--- /dev/null
+++ b/rules/fixtures/solid/raw-native-tag.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector raw-native-tag (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <div class="p-4"><span>{ui.title}</span></div>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/raw-native-tag.ok.tsx b/rules/fixtures/solid/raw-native-tag.ok.tsx
new file mode 100644
index 0000000..ede9e1a
--- /dev/null
+++ b/rules/fixtures/solid/raw-native-tag.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector raw-native-tag (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Box class="p-4"><Inline>{ui.title}</Inline></Box>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/reactive-aria.bad.tsx b/rules/fixtures/solid/reactive-aria.bad.tsx
new file mode 100644
index 0000000..d9ab2b4
--- /dev/null
+++ b/rules/fixtures/solid/reactive-aria.bad.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector reactive-aria (violating).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Button aria-expanded={open} onClick={toggle}>{ui.more}</Button>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/solid/reactive-aria.ok.tsx b/rules/fixtures/solid/reactive-aria.ok.tsx
new file mode 100644
index 0000000..bbc6fbb
--- /dev/null
+++ b/rules/fixtures/solid/reactive-aria.ok.tsx
@@ -0,0 +1,13 @@
+// Self-test fixture of the rules group, detector reactive-aria (clean).
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/solid-ui";
+import { ui } from "@ui8kit/app-shared/content";
+
+export function Fixture({ open = false, ok = true, level = 2, toggle = () => {} }) {
+  const Tag = level === 1 ? "h1" : "h2";
+  void Tag;
+  return (
+    <Block tag="section">
+      <Button expanded={open} aria-label={ui.more} onClick={toggle}>{ui.more}</Button>
+    </Block>
+  );
+}
diff --git a/rules/fixtures/svelte/block-root.bad.svelte b/rules/fixtures/svelte/block-root.bad.svelte
new file mode 100644
index 0000000..5cd6ef4
--- /dev/null
+++ b/rules/fixtures/svelte/block-root.bad.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector block-root (violating).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Box>
+  <Text>{ui.title}</Text>
+</Box>
diff --git a/rules/fixtures/svelte/block-root.branches.ok.svelte b/rules/fixtures/svelte/block-root.branches.ok.svelte
new file mode 100644
index 0000000..516341f
--- /dev/null
+++ b/rules/fixtures/svelte/block-root.branches.ok.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector block-root, case branches (clean).
+  import { Block, Stack, Text } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, items = [] as string[] } = $props();
+</script>
+
+{#if open}
+  <Block tag="section">
+    <Text>{ui.title}</Text>
+  </Block>
+{:else if items.length}
+  <Block tag="aside">
+    <Text>{ui.title}</Text>
+  </Block>
+{:else}
+  <Block tag="section">
+    <Text>{ui.title}</Text>
+  </Block>
+{/if}
diff --git a/rules/fixtures/svelte/block-root.loop.bad.svelte b/rules/fixtures/svelte/block-root.loop.bad.svelte
new file mode 100644
index 0000000..3913328
--- /dev/null
+++ b/rules/fixtures/svelte/block-root.loop.bad.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector block-root, case loop (violating).
+  import { Block, Stack, Text } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, items = [] as string[] } = $props();
+</script>
+
+{#each items as item (item)}
+  <Block tag="section">
+    <Text>{item}</Text>
+  </Block>
+{/each}
diff --git a/rules/fixtures/svelte/block-root.nested.bad.svelte b/rules/fixtures/svelte/block-root.nested.bad.svelte
new file mode 100644
index 0000000..5aa852a
--- /dev/null
+++ b/rules/fixtures/svelte/block-root.nested.bad.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector block-root, case nested (violating).
+  import { Block, Stack, Text } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, items = [] as string[] } = $props();
+</script>
+
+<Block tag="section">
+  <Block tag="aside">
+    <Text>{ui.title}</Text>
+  </Block>
+</Block>
diff --git a/rules/fixtures/svelte/block-root.ok.svelte b/rules/fixtures/svelte/block-root.ok.svelte
new file mode 100644
index 0000000..3501aa1
--- /dev/null
+++ b/rules/fixtures/svelte/block-root.ok.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector block-root (clean).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <Text>{ui.title}</Text>
+</Block>
diff --git a/rules/fixtures/svelte/block-root.siblings.bad.svelte b/rules/fixtures/svelte/block-root.siblings.bad.svelte
new file mode 100644
index 0000000..9f38ce1
--- /dev/null
+++ b/rules/fixtures/svelte/block-root.siblings.bad.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector block-root, case siblings (violating).
+  import { Block, Stack, Text } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, items = [] as string[] } = $props();
+</script>
+
+<Block tag="section">
+  <Text>{ui.title}</Text>
+</Block>
+<Block tag="aside">
+  <Text>{ui.title}</Text>
+</Block>
diff --git a/rules/fixtures/svelte/dynamic-tag.bad.svelte b/rules/fixtures/svelte/dynamic-tag.bad.svelte
new file mode 100644
index 0000000..a997e71
--- /dev/null
+++ b/rules/fixtures/svelte/dynamic-tag.bad.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector dynamic-tag (violating).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <svelte:element this={tag}>{ui.title}</svelte:element>
+</Block>
diff --git a/rules/fixtures/svelte/dynamic-tag.ok.svelte b/rules/fixtures/svelte/dynamic-tag.ok.svelte
new file mode 100644
index 0000000..db48ce8
--- /dev/null
+++ b/rules/fixtures/svelte/dynamic-tag.ok.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector dynamic-tag (clean).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <Title level={level}>{ui.title}</Title>
+</Block>
diff --git a/rules/fixtures/svelte/literal-text.bad.svelte b/rules/fixtures/svelte/literal-text.bad.svelte
new file mode 100644
index 0000000..af0cce2
--- /dev/null
+++ b/rules/fixtures/svelte/literal-text.bad.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector literal-text (violating).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <Text>Save changes</Text>
+  <Input placeholder="Your name" />
+  <Text>{ok ? "Yes" : "No"}</Text>
+</Block>
diff --git a/rules/fixtures/svelte/literal-text.ok.svelte b/rules/fixtures/svelte/literal-text.ok.svelte
new file mode 100644
index 0000000..0966f41
--- /dev/null
+++ b/rules/fixtures/svelte/literal-text.ok.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector literal-text (clean).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <Text>{ui.save}</Text>
+  <Input placeholder={ui.name} />
+  <Text>{ok ? ui.yes : ui.no}</Text>
+</Block>
diff --git a/rules/fixtures/svelte/raw-html.bad.svelte b/rules/fixtures/svelte/raw-html.bad.svelte
new file mode 100644
index 0000000..a185f68
--- /dev/null
+++ b/rules/fixtures/svelte/raw-html.bad.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector raw-html (violating).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <Text>{@html ui.body}</Text>
+</Block>
diff --git a/rules/fixtures/svelte/raw-html.ok.svelte b/rules/fixtures/svelte/raw-html.ok.svelte
new file mode 100644
index 0000000..a4a97ae
--- /dev/null
+++ b/rules/fixtures/svelte/raw-html.ok.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector raw-html (clean).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <Text>{ui.body}</Text>
+</Block>
diff --git a/rules/fixtures/svelte/raw-native-tag.bad.svelte b/rules/fixtures/svelte/raw-native-tag.bad.svelte
new file mode 100644
index 0000000..7d92dd6
--- /dev/null
+++ b/rules/fixtures/svelte/raw-native-tag.bad.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector raw-native-tag (violating).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <div class="p-4"><span>{ui.title}</span></div>
+</Block>
diff --git a/rules/fixtures/svelte/raw-native-tag.ok.svelte b/rules/fixtures/svelte/raw-native-tag.ok.svelte
new file mode 100644
index 0000000..6b4405e
--- /dev/null
+++ b/rules/fixtures/svelte/raw-native-tag.ok.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector raw-native-tag (clean).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <Box class="p-4"><Inline>{ui.title}</Inline></Box>
+</Block>
diff --git a/rules/fixtures/svelte/reactive-aria.bad.svelte b/rules/fixtures/svelte/reactive-aria.bad.svelte
new file mode 100644
index 0000000..183f9a0
--- /dev/null
+++ b/rules/fixtures/svelte/reactive-aria.bad.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector reactive-aria (violating).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <Button aria-expanded={open} onclick={toggle}>{ui.more}</Button>
+</Block>
diff --git a/rules/fixtures/svelte/reactive-aria.ok.svelte b/rules/fixtures/svelte/reactive-aria.ok.svelte
new file mode 100644
index 0000000..032becd
--- /dev/null
+++ b/rules/fixtures/svelte/reactive-aria.ok.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  // Self-test fixture of the rules group, detector reactive-aria (clean).
+  import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/svelte-ui";
+  import { ui } from "@ui8kit/app-shared/content";
+  let { open = false, ok = true, level = 2, tag = "h2", toggle = () => {} } = $props();
+</script>
+
+<Block tag="section">
+  <Button expanded={open} aria-label={ui.more} onclick={toggle}>{ui.more}</Button>
+</Block>
diff --git a/rules/fixtures/templ/block-root.bad.templ b/rules/fixtures/templ/block-root.bad.templ
new file mode 100644
index 0000000..22ab7a5
--- /dev/null
+++ b/rules/fixtures/templ/block-root.bad.templ
@@ -0,0 +1,21 @@
+// Self-test fixture of the rules group, detector block-root (violating).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@box.Box(box.BoxProps{}) {
+		@text.Text(text.TextProps{}) {
+			{ uiutils.Text(p.Title) }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/block-root.branches.ok.templ b/rules/fixtures/templ/block-root.branches.ok.templ
new file mode 100644
index 0000000..23c26bf
--- /dev/null
+++ b/rules/fixtures/templ/block-root.branches.ok.templ
@@ -0,0 +1,29 @@
+// Self-test fixture of the rules group, detector block-root (clean).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	if p.Open {
+		@block.Block(block.BlockProps{Tag: "section"}) {
+			{ uiutils.Text(p.Title) }
+		}
+	} else if len(p.Items) > 0 {
+		@block.Block(block.BlockProps{Tag: "aside"}) {
+			{ uiutils.Text(p.Title) }
+		}
+	} else {
+		@block.Block(block.BlockProps{Tag: "section"}) {
+			{ uiutils.Text(p.Title) }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/block-root.loop.bad.templ b/rules/fixtures/templ/block-root.loop.bad.templ
new file mode 100644
index 0000000..5db6dc8
--- /dev/null
+++ b/rules/fixtures/templ/block-root.loop.bad.templ
@@ -0,0 +1,21 @@
+// Self-test fixture of the rules group, detector block-root (violating).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	for _, item := range p.Items {
+		@block.Block(block.BlockProps{Tag: "section"}) {
+			{ uiutils.Text(item) }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/block-root.nested.bad.templ b/rules/fixtures/templ/block-root.nested.bad.templ
new file mode 100644
index 0000000..a9c783a
--- /dev/null
+++ b/rules/fixtures/templ/block-root.nested.bad.templ
@@ -0,0 +1,21 @@
+// Self-test fixture of the rules group, detector block-root (violating).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@block.Block(block.BlockProps{Tag: "aside"}) {
+			{ uiutils.Text(p.Title) }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/block-root.ok.templ b/rules/fixtures/templ/block-root.ok.templ
new file mode 100644
index 0000000..18de01e
--- /dev/null
+++ b/rules/fixtures/templ/block-root.ok.templ
@@ -0,0 +1,21 @@
+// Self-test fixture of the rules group, detector block-root (clean).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@text.Text(text.TextProps{}) {
+			{ uiutils.Text(p.Title) }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/block-root.siblings.bad.templ b/rules/fixtures/templ/block-root.siblings.bad.templ
new file mode 100644
index 0000000..bcaa7a3
--- /dev/null
+++ b/rules/fixtures/templ/block-root.siblings.bad.templ
@@ -0,0 +1,22 @@
+// Self-test fixture of the rules group, detector block-root (violating).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		{ uiutils.Text(p.Title) }
+	}
+	@block.Block(block.BlockProps{Tag: "aside"}) {
+		{ uiutils.Text(p.Title) }
+	}
+}
diff --git a/rules/fixtures/templ/dynamic-tag.bad.templ b/rules/fixtures/templ/dynamic-tag.bad.templ
new file mode 100644
index 0000000..50b19a0
--- /dev/null
+++ b/rules/fixtures/templ/dynamic-tag.bad.templ
@@ -0,0 +1,19 @@
+// Self-test fixture of the rules group, detector dynamic-tag (violating).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@tag
+	}
+}
diff --git a/rules/fixtures/templ/dynamic-tag.ok.templ b/rules/fixtures/templ/dynamic-tag.ok.templ
new file mode 100644
index 0000000..1438e98
--- /dev/null
+++ b/rules/fixtures/templ/dynamic-tag.ok.templ
@@ -0,0 +1,21 @@
+// Self-test fixture of the rules group, detector dynamic-tag (clean).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@title.Title(title.TitleProps{Level: p.Level}) {
+			{ uiutils.Text(p.Title) }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/literal-text.bad.templ b/rules/fixtures/templ/literal-text.bad.templ
new file mode 100644
index 0000000..d62c083
--- /dev/null
+++ b/rules/fixtures/templ/literal-text.bad.templ
@@ -0,0 +1,25 @@
+// Self-test fixture of the rules group, detector literal-text (violating).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@text.Text(text.TextProps{}) {
+			Save changes
+		}
+		@input.Input(input.InputProps{Placeholder: "Your name"})
+		@text.Text(text.TextProps{}) {
+			{ uiutils.If(p.Ok, "Yes", "No") }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/literal-text.ok.templ b/rules/fixtures/templ/literal-text.ok.templ
new file mode 100644
index 0000000..2b03945
--- /dev/null
+++ b/rules/fixtures/templ/literal-text.ok.templ
@@ -0,0 +1,25 @@
+// Self-test fixture of the rules group, detector literal-text (clean).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@text.Text(text.TextProps{}) {
+			{ uiutils.Text(p.Save) }
+		}
+		@input.Input(input.InputProps{Placeholder: p.Name})
+		@text.Text(text.TextProps{}) {
+			{ uiutils.If(p.Ok, p.Yes, p.No) }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/raw-html.bad.templ b/rules/fixtures/templ/raw-html.bad.templ
new file mode 100644
index 0000000..5139423
--- /dev/null
+++ b/rules/fixtures/templ/raw-html.bad.templ
@@ -0,0 +1,21 @@
+// Self-test fixture of the rules group, detector raw-html (violating).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@text.Text(text.TextProps{}) {
+			@templ.Raw(p.Body)
+		}
+	}
+}
diff --git a/rules/fixtures/templ/raw-html.ok.templ b/rules/fixtures/templ/raw-html.ok.templ
new file mode 100644
index 0000000..02ac2a9
--- /dev/null
+++ b/rules/fixtures/templ/raw-html.ok.templ
@@ -0,0 +1,21 @@
+// Self-test fixture of the rules group, detector raw-html (clean).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@text.Text(text.TextProps{}) {
+			{ uiutils.Text(p.Body) }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/raw-native-tag.bad.templ b/rules/fixtures/templ/raw-native-tag.bad.templ
new file mode 100644
index 0000000..a41e5b0
--- /dev/null
+++ b/rules/fixtures/templ/raw-native-tag.bad.templ
@@ -0,0 +1,19 @@
+// Self-test fixture of the rules group, detector raw-native-tag (violating).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		<div class="p-4"><span>{ uiutils.Text(p.Title) }</span></div>
+	}
+}
diff --git a/rules/fixtures/templ/raw-native-tag.ok.templ b/rules/fixtures/templ/raw-native-tag.ok.templ
new file mode 100644
index 0000000..60d614f
--- /dev/null
+++ b/rules/fixtures/templ/raw-native-tag.ok.templ
@@ -0,0 +1,23 @@
+// Self-test fixture of the rules group, detector raw-native-tag (clean).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@box.Box(box.BoxProps{Class: "p-4"}) {
+			@inline.Inline(inline.InlineProps{}) {
+				{ uiutils.Text(p.Title) }
+			}
+		}
+	}
+}
diff --git a/rules/fixtures/templ/reactive-aria.bad.templ b/rules/fixtures/templ/reactive-aria.bad.templ
new file mode 100644
index 0000000..a3e044e
--- /dev/null
+++ b/rules/fixtures/templ/reactive-aria.bad.templ
@@ -0,0 +1,21 @@
+// Self-test fixture of the rules group, detector reactive-aria (violating).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@button.Button(button.ButtonProps{Attrs: uiutils.Attrs("aria-expanded", p.Open)}) {
+			{ uiutils.Text(p.More) }
+		}
+	}
+}
diff --git a/rules/fixtures/templ/reactive-aria.ok.templ b/rules/fixtures/templ/reactive-aria.ok.templ
new file mode 100644
index 0000000..373a911
--- /dev/null
+++ b/rules/fixtures/templ/reactive-aria.ok.templ
@@ -0,0 +1,21 @@
+// Self-test fixture of the rules group, detector reactive-aria (clean).
+package fixtures
+
+import (
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/block"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/box"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/button"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/inline"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/input"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/text"
+	"github.com/ui8kit/codegen/packages/templ/ui/ui/title"
+	uiutils "github.com/ui8kit/codegen/packages/templ/ui/utils"
+)
+
+templ Fixture(p FixtureProps) {
+	@block.Block(block.BlockProps{Tag: "section"}) {
+		@button.Button(button.ButtonProps{Expanded: p.Open, AriaLabel: p.More}) {
+			{ uiutils.Text(p.More) }
+		}
+	}
+}
diff --git a/rules/fixtures/twig/block-root.bad.html.twig b/rules/fixtures/twig/block-root.bad.html.twig
new file mode 100644
index 0000000..b49603b
--- /dev/null
+++ b/rules/fixtures/twig/block-root.bad.html.twig
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector block-root (violating). -#}
+{%- set c_1 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ include('ui/box/box.html.twig', {'p': {'Class': 'p-4'}, 'children': c_1}, with_context = false) }}
diff --git a/rules/fixtures/twig/block-root.branches.ok.html.twig b/rules/fixtures/twig/block-root.branches.ok.html.twig
new file mode 100644
index 0000000..1523b69
--- /dev/null
+++ b/rules/fixtures/twig/block-root.branches.ok.html.twig
@@ -0,0 +1,17 @@
+{#- Self-test fixture of the rules group, detector block-root (clean). -#}
+{%- if ui_t(v_open) %}
+{%- set c_1 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_1}, with_context = false) }}
+{%- elseif ui_t(ui_len(v_items)) %}
+{%- set c_2 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'aside'}, 'children': c_2}, with_context = false) }}
+{%- else %}
+{%- set c_3 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_3}, with_context = false) }}
+{%- endif %}
diff --git a/rules/fixtures/twig/block-root.loop.bad.html.twig b/rules/fixtures/twig/block-root.loop.bad.html.twig
new file mode 100644
index 0000000..0c62a0f
--- /dev/null
+++ b/rules/fixtures/twig/block-root.loop.bad.html.twig
@@ -0,0 +1,7 @@
+{#- Self-test fixture of the rules group, detector block-root (violating). -#}
+{%- for v_item in ui_l(v_items) %}
+{%- set c_1 -%}
+  {{ ui_text(v_item) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_1}, with_context = false) }}
+{%- endfor %}
diff --git a/rules/fixtures/twig/block-root.nested.bad.html.twig b/rules/fixtures/twig/block-root.nested.bad.html.twig
new file mode 100644
index 0000000..26e800e
--- /dev/null
+++ b/rules/fixtures/twig/block-root.nested.bad.html.twig
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector block-root (violating). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ include('ui/block/block.html.twig', {'p': {'Tag': 'aside'}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_2}, with_context = false) }}
diff --git a/rules/fixtures/twig/block-root.ok.html.twig b/rules/fixtures/twig/block-root.ok.html.twig
new file mode 100644
index 0000000..f3460d2
--- /dev/null
+++ b/rules/fixtures/twig/block-root.ok.html.twig
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector block-root (clean). -#}
+{%- set c_9 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_9}, with_context = false) }}
diff --git a/rules/fixtures/twig/block-root.siblings.bad.html.twig b/rules/fixtures/twig/block-root.siblings.bad.html.twig
new file mode 100644
index 0000000..5567e70
--- /dev/null
+++ b/rules/fixtures/twig/block-root.siblings.bad.html.twig
@@ -0,0 +1,9 @@
+{#- Self-test fixture of the rules group, detector block-root (violating). -#}
+{%- set c_1 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_1}, with_context = false) }}
+{%- set c_2 -%}
+  {{ ui_text(v_title) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'aside'}, 'children': c_2}, with_context = false) }}
diff --git a/rules/fixtures/twig/dynamic-tag.bad.html.twig b/rules/fixtures/twig/dynamic-tag.bad.html.twig
new file mode 100644
index 0000000..556e0dc
--- /dev/null
+++ b/rules/fixtures/twig/dynamic-tag.bad.html.twig
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector dynamic-tag (violating). -#}
+{%- set c_9 -%}
+  <{{ v_tag }}>{{ ui_text(v_title) }}</{{ v_tag }}>
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_9}, with_context = false) }}
diff --git a/rules/fixtures/twig/dynamic-tag.ok.html.twig b/rules/fixtures/twig/dynamic-tag.ok.html.twig
new file mode 100644
index 0000000..5171e06
--- /dev/null
+++ b/rules/fixtures/twig/dynamic-tag.ok.html.twig
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector dynamic-tag (clean). -#}
+{%- set c_9 -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Tag': 'div'}}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_9}, with_context = false) }}
diff --git a/rules/fixtures/twig/literal-text.bad.html.twig b/rules/fixtures/twig/literal-text.bad.html.twig
new file mode 100644
index 0000000..c2fe3ed
--- /dev/null
+++ b/rules/fixtures/twig/literal-text.bad.html.twig
@@ -0,0 +1,13 @@
+{#- Self-test fixture of the rules group, detector literal-text (violating). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    Save changes
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {}, 'children': c_1}, with_context = false) }}
+  {{ include('ui/input/input.html.twig', {'p': {'Placeholder': 'Your name'}}, with_context = false) }}
+  {%- set c_3 -%}
+    {{ ui_t(v_ok) ? 'Yes' : 'No' }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {}, 'children': c_3}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_2}, with_context = false) }}
diff --git a/rules/fixtures/twig/literal-text.ok.html.twig b/rules/fixtures/twig/literal-text.ok.html.twig
new file mode 100644
index 0000000..5bab7fb
--- /dev/null
+++ b/rules/fixtures/twig/literal-text.ok.html.twig
@@ -0,0 +1,9 @@
+{#- Self-test fixture of the rules group, detector literal-text (clean). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {}, 'children': c_1}, with_context = false) }}
+  {{ include('ui/input/input.html.twig', {'p': {'Placeholder': ui_text(v_hint)}}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_2}, with_context = false) }}
diff --git a/rules/fixtures/twig/raw-html.bad.html.twig b/rules/fixtures/twig/raw-html.bad.html.twig
new file mode 100644
index 0000000..be91fab
--- /dev/null
+++ b/rules/fixtures/twig/raw-html.bad.html.twig
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector raw-html (violating). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ v_body|raw }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_2}, with_context = false) }}
diff --git a/rules/fixtures/twig/raw-html.ok.html.twig b/rules/fixtures/twig/raw-html.ok.html.twig
new file mode 100644
index 0000000..76a99b0
--- /dev/null
+++ b/rules/fixtures/twig/raw-html.ok.html.twig
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector raw-html (clean). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_title) }}
+  {%- endset -%}
+  {{ include('ui/text/text.html.twig', {'p': {}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_2}, with_context = false) }}
diff --git a/rules/fixtures/twig/raw-native-tag.bad.html.twig b/rules/fixtures/twig/raw-native-tag.bad.html.twig
new file mode 100644
index 0000000..9ad10b5
--- /dev/null
+++ b/rules/fixtures/twig/raw-native-tag.bad.html.twig
@@ -0,0 +1,5 @@
+{#- Self-test fixture of the rules group, detector raw-native-tag (violating). -#}
+{%- set c_9 -%}
+  <div class="p-4">{{ ui_text(v_title) }}</div>
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_9}, with_context = false) }}
diff --git a/rules/fixtures/twig/raw-native-tag.ok.html.twig b/rules/fixtures/twig/raw-native-tag.ok.html.twig
new file mode 100644
index 0000000..4f30496
--- /dev/null
+++ b/rules/fixtures/twig/raw-native-tag.ok.html.twig
@@ -0,0 +1,11 @@
+{#- Self-test fixture of the rules group, detector raw-native-tag (clean). -#}
+{%- set c_3 -%}
+  {%- set c_1 -%}
+    {%- set c_2 -%}
+      {{ ui_text(v_title) }}
+    {%- endset -%}
+    {{ include('ui/inline/inline.html.twig', {'p': {}, 'children': c_2}, with_context = false) }}
+  {%- endset -%}
+  {{ include('ui/box/box.html.twig', {'p': {'Class': 'p-4'}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_3}, with_context = false) }}
diff --git a/rules/fixtures/twig/reactive-aria.bad.html.twig b/rules/fixtures/twig/reactive-aria.bad.html.twig
new file mode 100644
index 0000000..4ca5243
--- /dev/null
+++ b/rules/fixtures/twig/reactive-aria.bad.html.twig
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector reactive-aria (violating). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_more) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'Attrs': ui_attrs(['aria-expanded', v_open])}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_2}, with_context = false) }}
diff --git a/rules/fixtures/twig/reactive-aria.ok.html.twig b/rules/fixtures/twig/reactive-aria.ok.html.twig
new file mode 100644
index 0000000..47a9e0f
--- /dev/null
+++ b/rules/fixtures/twig/reactive-aria.ok.html.twig
@@ -0,0 +1,8 @@
+{#- Self-test fixture of the rules group, detector reactive-aria (clean). -#}
+{%- set c_2 -%}
+  {%- set c_1 -%}
+    {{ ui_text(v_more) }}
+  {%- endset -%}
+  {{ include('ui/button/button.html.twig', {'p': {'AriaLabel': v_label, 'Attrs': ui_attrs(['aria-controls', 'menu'])}, 'children': c_1}, with_context = false) }}
+{%- endset -%}
+{{ include('ui/block/block.html.twig', {'p': {'Tag': 'section'}, 'children': c_2}, with_context = false) }}
diff --git a/rules/fixtures/vue/block-root.bad.vue b/rules/fixtures/vue/block-root.bad.vue
new file mode 100644
index 0000000..c8754b9
--- /dev/null
+++ b/rules/fixtures/vue/block-root.bad.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector block-root (violating). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Box>
+    <Text>{{ ui.title }}</Text>
+  </Box>
+</template>
diff --git a/rules/fixtures/vue/block-root.branches.ok.vue b/rules/fixtures/vue/block-root.branches.ok.vue
new file mode 100644
index 0000000..5f6a213
--- /dev/null
+++ b/rules/fixtures/vue/block-root.branches.ok.vue
@@ -0,0 +1,20 @@
+<!-- Self-test fixture of the rules group, detector block-root, case branches (clean). -->
+<script setup lang="ts">
+import { Block, Stack, Text } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; items: string[] }>();
+void props;
+</script>
+
+<template>
+  <Block v-if="open" tag="section">
+    <Text>{{ ui.title }}</Text>
+  </Block>
+  <!-- a comment does not break the chain -->
+  <Block v-else-if="items.length" tag="aside">
+    <Text>{{ ui.title }}</Text>
+  </Block>
+  <Block v-else tag="section">
+    <Text>{{ ui.title }}</Text>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/block-root.loop.bad.vue b/rules/fixtures/vue/block-root.loop.bad.vue
new file mode 100644
index 0000000..8b154bc
--- /dev/null
+++ b/rules/fixtures/vue/block-root.loop.bad.vue
@@ -0,0 +1,13 @@
+<!-- Self-test fixture of the rules group, detector block-root, case loop (violating). -->
+<script setup lang="ts">
+import { Block, Stack, Text } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; items: string[] }>();
+void props;
+</script>
+
+<template>
+  <Block v-for="item in items" :key="item" tag="section">
+    <Text>{{ item }}</Text>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/block-root.nested.bad.vue b/rules/fixtures/vue/block-root.nested.bad.vue
new file mode 100644
index 0000000..85a1ee1
--- /dev/null
+++ b/rules/fixtures/vue/block-root.nested.bad.vue
@@ -0,0 +1,15 @@
+<!-- Self-test fixture of the rules group, detector block-root, case nested (violating). -->
+<script setup lang="ts">
+import { Block, Stack, Text } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; items: string[] }>();
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Block tag="aside">
+      <Text>{{ ui.title }}</Text>
+    </Block>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/block-root.ok.vue b/rules/fixtures/vue/block-root.ok.vue
new file mode 100644
index 0000000..f3c9d2b
--- /dev/null
+++ b/rules/fixtures/vue/block-root.ok.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector block-root (clean). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Text>{{ ui.title }}</Text>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/block-root.siblings.bad.vue b/rules/fixtures/vue/block-root.siblings.bad.vue
new file mode 100644
index 0000000..15d8af6
--- /dev/null
+++ b/rules/fixtures/vue/block-root.siblings.bad.vue
@@ -0,0 +1,16 @@
+<!-- Self-test fixture of the rules group, detector block-root, case siblings (violating). -->
+<script setup lang="ts">
+import { Block, Stack, Text } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; items: string[] }>();
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Text>{{ ui.title }}</Text>
+  </Block>
+  <Block tag="aside">
+    <Text>{{ ui.title }}</Text>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/dynamic-tag.bad.vue b/rules/fixtures/vue/dynamic-tag.bad.vue
new file mode 100644
index 0000000..322659e
--- /dev/null
+++ b/rules/fixtures/vue/dynamic-tag.bad.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector dynamic-tag (violating). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <component :is="tag">{{ ui.title }}</component>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/dynamic-tag.ok.vue b/rules/fixtures/vue/dynamic-tag.ok.vue
new file mode 100644
index 0000000..506514e
--- /dev/null
+++ b/rules/fixtures/vue/dynamic-tag.ok.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector dynamic-tag (clean). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Title :level="level">{{ ui.title }}</Title>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/literal-text.bad.vue b/rules/fixtures/vue/literal-text.bad.vue
new file mode 100644
index 0000000..c0da0bc
--- /dev/null
+++ b/rules/fixtures/vue/literal-text.bad.vue
@@ -0,0 +1,16 @@
+<!-- Self-test fixture of the rules group, detector literal-text (violating). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Text>Save changes</Text>
+    <Input placeholder="Your name" />
+    <Text>{{ ok ? "Yes" : "No" }}</Text>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/literal-text.ok.vue b/rules/fixtures/vue/literal-text.ok.vue
new file mode 100644
index 0000000..4798989
--- /dev/null
+++ b/rules/fixtures/vue/literal-text.ok.vue
@@ -0,0 +1,16 @@
+<!-- Self-test fixture of the rules group, detector literal-text (clean). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Text>{{ ui.save }}</Text>
+    <Input :placeholder="ui.name" />
+    <Text>{{ ok ? ui.yes : ui.no }}</Text>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/raw-html.bad.vue b/rules/fixtures/vue/raw-html.bad.vue
new file mode 100644
index 0000000..c434cab
--- /dev/null
+++ b/rules/fixtures/vue/raw-html.bad.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector raw-html (violating). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Text v-html="ui.body" />
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/raw-html.ok.vue b/rules/fixtures/vue/raw-html.ok.vue
new file mode 100644
index 0000000..ab20d8b
--- /dev/null
+++ b/rules/fixtures/vue/raw-html.ok.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector raw-html (clean). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Text>{{ ui.body }}</Text>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/raw-native-tag.bad.vue b/rules/fixtures/vue/raw-native-tag.bad.vue
new file mode 100644
index 0000000..21ad2b1
--- /dev/null
+++ b/rules/fixtures/vue/raw-native-tag.bad.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector raw-native-tag (violating). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <div class="p-4"><span>{{ ui.title }}</span></div>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/raw-native-tag.ok.vue b/rules/fixtures/vue/raw-native-tag.ok.vue
new file mode 100644
index 0000000..5d02bd9
--- /dev/null
+++ b/rules/fixtures/vue/raw-native-tag.ok.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector raw-native-tag (clean). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Box class="p-4"><Inline>{{ ui.title }}</Inline></Box>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/reactive-aria.bad.vue b/rules/fixtures/vue/reactive-aria.bad.vue
new file mode 100644
index 0000000..6192bea
--- /dev/null
+++ b/rules/fixtures/vue/reactive-aria.bad.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector reactive-aria (violating). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Button :aria-expanded="open" @click="toggle">{{ ui.more }}</Button>
+  </Block>
+</template>
diff --git a/rules/fixtures/vue/reactive-aria.ok.vue b/rules/fixtures/vue/reactive-aria.ok.vue
new file mode 100644
index 0000000..a5b9523
--- /dev/null
+++ b/rules/fixtures/vue/reactive-aria.ok.vue
@@ -0,0 +1,14 @@
+<!-- Self-test fixture of the rules group, detector reactive-aria (clean). -->
+<script setup lang="ts">
+import { Block, Box, Button, Inline, Input, Text, Title } from "@ui8kit/vue-ui";
+import { ui } from "@ui8kit/app-shared/content";
+const props = defineProps<{ open?: boolean; ok?: boolean; level?: 1 | 2; tag?: string }>();
+const toggle = (): void => {};
+void props;
+</script>
+
+<template>
+  <Block tag="section">
+    <Button :expanded="open" :aria-label="ui.more" @click="toggle">{{ ui.more }}</Button>
+  </Block>
+</template>
diff --git a/rules/html-validate.json b/rules/html-validate.json
new file mode 100644
index 0000000..9d986e5
--- /dev/null
+++ b/rules/html-validate.json
@@ -0,0 +1,15 @@
+{
+  "$comment": "HTML5 validity of every rendered e2e state (xgen e2e, group html). The recommended preset of html-validate; only the markup-style rules that say nothing about structure are off (quoting and casing of attributes, inline style variables of the runtimes, whitespace, doctype casing). Target: 0. unique-landmark is a warning (reported, not failing): the gallery, the catalog and the theme showcase pages show the same block in several variants on one page, so the same section, nav or aside name repeats; making it unique needs a landmark-name prop on every block (see plan/BLOCK-ROOT.md, open item).",
+  "extends": [
+    "html-validate:recommended"
+  ],
+  "rules": {
+    "attribute-empty-style": "off",
+    "attribute-boolean-style": "off",
+    "no-inline-style": "off",
+    "no-trailing-whitespace": "off",
+    "doctype-style": "off",
+    "void-style": "off",
+    "unique-landmark": "error"
+  }
+}
diff --git a/rules/zones.json b/rules/zones.json
new file mode 100644
index 0000000..ca79bf4
--- /dev/null
+++ b/rules/zones.json
@@ -0,0 +1,665 @@
+{
+  "version": 1,
+  "packages": [
+    {
+      "name": "host-react",
+      "dir": "apps/host-react",
+      "runtime": "react",
+      "generated": true,
+      "kit": [
+        "xgen/runtime"
+      ],
+      "composition": [
+        "xgen/App.tsx",
+        "xgen/screens"
+      ],
+      "blockRoot": [
+        "xgen/App.tsx",
+        "xgen/screens"
+      ]
+    },
+    {
+      "name": "host-solid",
+      "dir": "apps/host-solid",
+      "runtime": "solid",
+      "generated": true,
+      "kit": [
+        "xgen/runtime"
+      ],
+      "composition": [
+        "xgen/App.tsx",
+        "xgen/screens"
+      ],
+      "blockRoot": [
+        "xgen/App.tsx",
+        "xgen/screens"
+      ]
+    },
+    {
+      "name": "host-svelte",
+      "dir": "apps/host-svelte",
+      "runtime": "svelte",
+      "generated": true,
+      "kit": [
+        "xgen/runtime"
+      ],
+      "composition": [
+        "xgen/App.svelte",
+        "xgen/screens"
+      ],
+      "blockRoot": [
+        "xgen/App.svelte",
+        "xgen/screens"
+      ]
+    },
+    {
+      "name": "host-vue",
+      "dir": "apps/host-vue",
+      "runtime": "vue",
+      "generated": true,
+      "kit": [
+        "xgen/runtime"
+      ],
+      "composition": [
+        "xgen/App.vue",
+        "xgen/screens"
+      ],
+      "blockRoot": [
+        "xgen/App.vue",
+        "xgen/screens"
+      ]
+    },
+    {
+      "name": "@ui8kit/jinja2-ui",
+      "dir": "packages/jinja2/ui",
+      "runtime": "jinja2",
+      "generated": true,
+      "kit": [
+        "ui",
+        "py"
+      ],
+      "composition": [
+        "blocks"
+      ],
+      "blockRoot": [
+        "blocks/about-company.html.j2",
+        "blocks/about-me.html.j2",
+        "blocks/activity-feed.html.j2",
+        "blocks/announcement-bar.html.j2",
+        "blocks/app-shell.html.j2",
+        "blocks/article-body.html.j2",
+        "blocks/auth-card.html.j2",
+        "blocks/auth-layout.html.j2",
+        "blocks/before-after.html.j2",
+        "blocks/bento-grid.html.j2",
+        "blocks/bottom-nav.html.j2",
+        "blocks/cart-drawer.html.j2",
+        "blocks/cart-list.html.j2",
+        "blocks/category-nav.html.j2",
+        "blocks/chart-panel.html.j2",
+        "blocks/checklist.html.j2",
+        "blocks/checkout-form.html.j2",
+        "blocks/comparison-table.html.j2",
+        "blocks/contact-form.html.j2",
+        "blocks/cookie-banner.html.j2",
+        "blocks/credit-packs.html.j2",
+        "blocks/cta-band.html.j2",
+        "blocks/cta-banner.html.j2",
+        "blocks/cta-proof.html.j2",
+        "blocks/dashboard-overview.html.j2",
+        "blocks/dashboard-shell.html.j2",
+        "blocks/delivery-info.html.j2",
+        "blocks/empty-panel.html.j2",
+        "blocks/error-page.html.j2",
+        "blocks/faq-help.html.j2",
+        "blocks/faq-list.html.j2",
+        "blocks/faq-split.html.j2",
+        "blocks/feature-accordion.html.j2",
+        "blocks/feature-grid.html.j2",
+        "blocks/feature-showcase.html.j2",
+        "blocks/feature-split.html.j2",
+        "blocks/feature-sticky.html.j2",
+        "blocks/feature-tabs.html.j2",
+        "blocks/footer-card.html.j2",
+        "blocks/footer-split.html.j2",
+        "blocks/hero-classic.html.j2",
+        "blocks/hero-head.html.j2",
+        "blocks/hero-prompt.html.j2",
+        "blocks/hero-split.html.j2",
+        "blocks/icon-wall.html.j2",
+        "blocks/job-board.html.j2",
+        "blocks/kanban-board.html.j2",
+        "blocks/logo-cloud.html.j2",
+        "blocks/logo-ribbon.html.j2",
+        "blocks/media-list.html.j2",
+        "blocks/mega-menu.html.j2",
+        "blocks/metric-row.html.j2",
+        "blocks/milestone-timeline.html.j2",
+        "blocks/nav-bar.html.j2",
+        "blocks/newsletter-form.html.j2",
+        "blocks/order-summary.html.j2",
+        "blocks/order-table.html.j2",
+        "blocks/page-intro.html.j2",
+        "blocks/page-trail.html.j2",
+        "blocks/photo-gallery.html.j2",
+        "blocks/post-card.html.j2",
+        "blocks/post-grid.html.j2",
+        "blocks/post-header.html.j2",
+        "blocks/post-showcase.html.j2",
+        "blocks/post-split.html.j2",
+        "blocks/pricing-card.html.j2",
+        "blocks/pricing-tiers.html.j2",
+        "blocks/product-card.html.j2",
+        "blocks/product-detail.html.j2",
+        "blocks/product-grid.html.j2",
+        "blocks/product-info.html.j2",
+        "blocks/profile-form.html.j2",
+        "blocks/project-grid.html.j2",
+        "blocks/proof-band.html.j2",
+        "blocks/quote-split.html.j2",
+        "blocks/region.html.j2",
+        "blocks/review-list.html.j2",
+        "blocks/section-frame.html.j2",
+        "blocks/shell-footer.html.j2",
+        "blocks/shell-sidebar.html.j2",
+        "blocks/shell-topbar.html.j2",
+        "blocks/shopping-cart.html.j2",
+        "blocks/sidebar-nav.html.j2",
+        "blocks/sidebar-panel.html.j2",
+        "blocks/signup-wizard.html.j2",
+        "blocks/site-footer.html.j2",
+        "blocks/site-header.html.j2",
+        "blocks/sitemap-footer.html.j2",
+        "blocks/skeleton-layout.html.j2",
+        "blocks/slot-board.html.j2",
+        "blocks/stats-band.html.j2",
+        "blocks/stepper.html.j2",
+        "blocks/steps-list.html.j2",
+        "blocks/store-hero.html.j2",
+        "blocks/store-locations.html.j2",
+        "blocks/story-tabs.html.j2",
+        "blocks/support-channels.html.j2",
+        "blocks/team-grid.html.j2",
+        "blocks/template-grid.html.j2",
+        "blocks/testimonial-grid.html.j2",
+        "blocks/tour-callout.html.j2",
+        "blocks/usage-calculator.html.j2",
+        "blocks/usp-strip.html.j2",
+        "blocks/video-grid.html.j2",
+        "blocks/video-modal.html.j2",
+        "blocks/zone-table.html.j2"
+      ]
+    },
+    {
+      "name": "@ui8kit/latte-ui",
+      "dir": "packages/latte/ui",
+      "runtime": "latte",
+      "generated": true,
+      "kit": [
+        "ui",
+        "php"
+      ],
+      "composition": [
+        "blocks"
+      ],
+      "blockRoot": [
+        "blocks/about-company.latte",
+        "blocks/about-me.latte",
+        "blocks/activity-feed.latte",
+        "blocks/announcement-bar.latte",
+        "blocks/app-shell.latte",
+        "blocks/article-body.latte",
+        "blocks/auth-card.latte",
+        "blocks/auth-layout.latte",
+        "blocks/before-after.latte",
+        "blocks/bento-grid.latte",
+        "blocks/bottom-nav.latte",
+        "blocks/cart-drawer.latte",
+        "blocks/cart-list.latte",
+        "blocks/category-nav.latte",
+        "blocks/chart-panel.latte",
+        "blocks/checklist.latte",
+        "blocks/checkout-form.latte",
+        "blocks/comparison-table.latte",
+        "blocks/contact-form.latte",
+        "blocks/cookie-banner.latte",
+        "blocks/credit-packs.latte",
+        "blocks/cta-band.latte",
+        "blocks/cta-banner.latte",
+        "blocks/cta-proof.latte",
+        "blocks/dashboard-overview.latte",
+        "blocks/dashboard-shell.latte",
+        "blocks/delivery-info.latte",
+        "blocks/empty-panel.latte",
+        "blocks/error-page.latte",
+        "blocks/faq-help.latte",
+        "blocks/faq-list.latte",
+        "blocks/faq-split.latte",
+        "blocks/feature-accordion.latte",
+        "blocks/feature-grid.latte",
+        "blocks/feature-showcase.latte",
+        "blocks/feature-split.latte",
+        "blocks/feature-sticky.latte",
+        "blocks/feature-tabs.latte",
+        "blocks/footer-card.latte",
+        "blocks/footer-split.latte",
+        "blocks/hero-classic.latte",
+        "blocks/hero-head.latte",
+        "blocks/hero-prompt.latte",
+        "blocks/hero-split.latte",
+        "blocks/icon-wall.latte",
+        "blocks/job-board.latte",
+        "blocks/kanban-board.latte",
+        "blocks/logo-cloud.latte",
+        "blocks/logo-ribbon.latte",
+        "blocks/media-list.latte",
+        "blocks/mega-menu.latte",
+        "blocks/metric-row.latte",
+        "blocks/milestone-timeline.latte",
+        "blocks/nav-bar.latte",
+        "blocks/newsletter-form.latte",
+        "blocks/order-summary.latte",
+        "blocks/order-table.latte",
+        "blocks/page-intro.latte",
+        "blocks/page-trail.latte",
+        "blocks/photo-gallery.latte",
+        "blocks/post-card.latte",
+        "blocks/post-grid.latte",
+        "blocks/post-header.latte",
+        "blocks/post-showcase.latte",
+        "blocks/post-split.latte",
+        "blocks/pricing-card.latte",
+        "blocks/pricing-tiers.latte",
+        "blocks/product-card.latte",
+        "blocks/product-detail.latte",
+        "blocks/product-grid.latte",
+        "blocks/product-info.latte",
+        "blocks/profile-form.latte",
+        "blocks/project-grid.latte",
+        "blocks/proof-band.latte",
+        "blocks/quote-split.latte",
+        "blocks/region.latte",
+        "blocks/review-list.latte",
+        "blocks/section-frame.latte",
+        "blocks/shell-footer.latte",
+        "blocks/shell-sidebar.latte",
+        "blocks/shell-topbar.latte",
+        "blocks/shopping-cart.latte",
+        "blocks/sidebar-nav.latte",
+        "blocks/sidebar-panel.latte",
+        "blocks/signup-wizard.latte",
+        "blocks/site-footer.latte",
+        "blocks/site-header.latte",
+        "blocks/sitemap-footer.latte",
+        "blocks/skeleton-layout.latte",
+        "blocks/slot-board.latte",
+        "blocks/stats-band.latte",
+        "blocks/stepper.latte",
+        "blocks/steps-list.latte",
+        "blocks/store-hero.latte",
+        "blocks/store-locations.latte",
+        "blocks/story-tabs.latte",
+        "blocks/support-channels.latte",
+        "blocks/team-grid.latte",
+        "blocks/template-grid.latte",
+        "blocks/testimonial-grid.latte",
+        "blocks/tour-callout.latte",
+        "blocks/usage-calculator.latte",
+        "blocks/usp-strip.latte",
+        "blocks/video-grid.latte",
+        "blocks/video-modal.latte",
+        "blocks/zone-table.latte"
+      ]
+    },
+    {
+      "name": "@ui8kit/react-ui",
+      "dir": "packages/react/ui",
+      "runtime": "react",
+      "generated": true,
+      "kit": [
+        "src/primitives",
+        "src/utils",
+        "src/styles"
+      ],
+      "composition": [
+        "src/blocks",
+        "src/components"
+      ],
+      "blockRoot": [
+        "src/blocks",
+        "src/components/faq-help.tsx",
+        "src/components/footer-card.tsx",
+        "src/components/hero-head.tsx",
+        "src/components/region.tsx",
+        "src/components/section-frame.tsx",
+        "src/components/shell-footer.tsx",
+        "src/components/shell-sidebar.tsx",
+        "src/components/shell-topbar.tsx",
+        "src/components/sidebar-panel.tsx"
+      ]
+    },
+    {
+      "name": "@ui8kit/solid-ui",
+      "dir": "packages/solid/ui",
+      "runtime": "solid",
+      "generated": true,
+      "kit": [
+        "src/primitives",
+        "src/utils",
+        "src/styles"
+      ],
+      "composition": [
+        "src/blocks",
+        "src/components"
+      ],
+      "blockRoot": [
+        "src/blocks",
+        "src/components/faq-help.tsx",
+        "src/components/footer-card.tsx",
+        "src/components/hero-head.tsx",
+        "src/components/region.tsx",
+        "src/components/section-frame.tsx",
+        "src/components/shell-footer.tsx",
+        "src/components/shell-sidebar.tsx",
+        "src/components/shell-topbar.tsx",
+        "src/components/sidebar-panel.tsx"
+      ]
+    },
+    {
+      "name": "@ui8kit/svelte-ui",
+      "dir": "packages/svelte/ui",
+      "runtime": "svelte",
+      "generated": true,
+      "kit": [
+        "src/primitives",
+        "src/utils",
+        "src/styles"
+      ],
+      "composition": [
+        "src/blocks",
+        "src/components"
+      ],
+      "blockRoot": [
+        "src/blocks",
+        "src/components/faq-help.svelte",
+        "src/components/footer-card.svelte",
+        "src/components/hero-head.svelte",
+        "src/components/region.svelte",
+        "src/components/section-frame.svelte",
+        "src/components/shell-footer.svelte",
+        "src/components/shell-sidebar.svelte",
+        "src/components/shell-topbar.svelte",
+        "src/components/sidebar-panel.svelte"
+      ]
+    },
+    {
+      "name": "@ui8kit/templ-ui",
+      "dir": "packages/templ/ui",
+      "runtime": "templ",
+      "generated": true,
+      "kit": [
+        "ui",
+        "utils"
+      ],
+      "composition": [
+        "blocks"
+      ],
+      "blockRoot": [
+        "blocks/about-company.templ",
+        "blocks/about-me.templ",
+        "blocks/activity-feed.templ",
+        "blocks/announcement-bar.templ",
+        "blocks/app-shell.templ",
+        "blocks/article-body.templ",
+        "blocks/auth-card.templ",
+        "blocks/auth-layout.templ",
+        "blocks/before-after.templ",
+        "blocks/bento-grid.templ",
+        "blocks/bottom-nav.templ",
+        "blocks/cart-drawer.templ",
+        "blocks/cart-list.templ",
+        "blocks/category-nav.templ",
+        "blocks/chart-panel.templ",
+        "blocks/checklist.templ",
+        "blocks/checkout-form.templ",
+        "blocks/comparison-table.templ",
+        "blocks/contact-form.templ",
+        "blocks/cookie-banner.templ",
+        "blocks/credit-packs.templ",
+        "blocks/cta-band.templ",
+        "blocks/cta-banner.templ",
+        "blocks/cta-proof.templ",
+        "blocks/dashboard-overview.templ",
+        "blocks/dashboard-shell.templ",
+        "blocks/delivery-info.templ",
+        "blocks/empty-panel.templ",
+        "blocks/error-page.templ",
+        "blocks/faq-help.templ",
+        "blocks/faq-list.templ",
+        "blocks/faq-split.templ",
+        "blocks/feature-accordion.templ",
+        "blocks/feature-grid.templ",
+        "blocks/feature-showcase.templ",
+        "blocks/feature-split.templ",
+        "blocks/feature-sticky.templ",
+        "blocks/feature-tabs.templ",
+        "blocks/footer-card.templ",
+        "blocks/footer-split.templ",
+        "blocks/hero-classic.templ",
+        "blocks/hero-head.templ",
+        "blocks/hero-prompt.templ",
+        "blocks/hero-split.templ",
+        "blocks/icon-wall.templ",
+        "blocks/job-board.templ",
+        "blocks/kanban-board.templ",
+        "blocks/logo-cloud.templ",
+        "blocks/logo-ribbon.templ",
+        "blocks/media-list.templ",
+        "blocks/mega-menu.templ",
+        "blocks/metric-row.templ",
+        "blocks/milestone-timeline.templ",
+        "blocks/nav-bar.templ",
+        "blocks/newsletter-form.templ",
+        "blocks/order-summary.templ",
+        "blocks/order-table.templ",
+        "blocks/page-intro.templ",
+        "blocks/page-trail.templ",
+        "blocks/photo-gallery.templ",
+        "blocks/post-card.templ",
+        "blocks/post-grid.templ",
+        "blocks/post-header.templ",
+        "blocks/post-showcase.templ",
+        "blocks/post-split.templ",
+        "blocks/pricing-card.templ",
+        "blocks/pricing-tiers.templ",
+        "blocks/product-card.templ",
+        "blocks/product-detail.templ",
+        "blocks/product-grid.templ",
+        "blocks/product-info.templ",
+        "blocks/profile-form.templ",
+        "blocks/project-grid.templ",
+        "blocks/proof-band.templ",
+        "blocks/quote-split.templ",
+        "blocks/region.templ",
+        "blocks/review-list.templ",
+        "blocks/section-frame.templ",
+        "blocks/shell-footer.templ",
+        "blocks/shell-sidebar.templ",
+        "blocks/shell-topbar.templ",
+        "blocks/shopping-cart.templ",
+        "blocks/sidebar-nav.templ",
+        "blocks/sidebar-panel.templ",
+        "blocks/signup-wizard.templ",
+        "blocks/site-footer.templ",
+        "blocks/site-header.templ",
+        "blocks/sitemap-footer.templ",
+        "blocks/skeleton-layout.templ",
+        "blocks/slot-board.templ",
+        "blocks/stats-band.templ",
+        "blocks/stepper.templ",
+        "blocks/steps-list.templ",
+        "blocks/store-hero.templ",
+        "blocks/store-locations.templ",
+        "blocks/story-tabs.templ",
+        "blocks/support-channels.templ",
+        "blocks/team-grid.templ",
+        "blocks/template-grid.templ",
+        "blocks/testimonial-grid.templ",
+        "blocks/tour-callout.templ",
+        "blocks/usage-calculator.templ",
+        "blocks/usp-strip.templ",
+        "blocks/video-grid.templ",
+        "blocks/video-modal.templ",
+        "blocks/zone-table.templ"
+      ]
+    },
+    {
+      "name": "@ui8kit/twig-ui",
+      "dir": "packages/twig/ui",
+      "runtime": "twig",
+      "generated": true,
+      "kit": [
+        "ui",
+        "php"
+      ],
+      "composition": [
+        "blocks"
+      ],
+      "blockRoot": [
+        "blocks/about-company.html.twig",
+        "blocks/about-me.html.twig",
+        "blocks/activity-feed.html.twig",
+        "blocks/announcement-bar.html.twig",
+        "blocks/app-shell.html.twig",
+        "blocks/article-body.html.twig",
+        "blocks/auth-card.html.twig",
+        "blocks/auth-layout.html.twig",
+        "blocks/before-after.html.twig",
+        "blocks/bento-grid.html.twig",
+        "blocks/bottom-nav.html.twig",
+        "blocks/cart-drawer.html.twig",
+        "blocks/cart-list.html.twig",
+        "blocks/category-nav.html.twig",
+        "blocks/chart-panel.html.twig",
+        "blocks/checklist.html.twig",
+        "blocks/checkout-form.html.twig",
+        "blocks/comparison-table.html.twig",
+        "blocks/contact-form.html.twig",
+        "blocks/cookie-banner.html.twig",
+        "blocks/credit-packs.html.twig",
+        "blocks/cta-band.html.twig",
+        "blocks/cta-banner.html.twig",
+        "blocks/cta-proof.html.twig",
+        "blocks/dashboard-overview.html.twig",
+        "blocks/dashboard-shell.html.twig",
+        "blocks/delivery-info.html.twig",
+        "blocks/empty-panel.html.twig",
+        "blocks/error-page.html.twig",
+        "blocks/faq-help.html.twig",
+        "blocks/faq-list.html.twig",
+        "blocks/faq-split.html.twig",
+        "blocks/feature-accordion.html.twig",
+        "blocks/feature-grid.html.twig",
+        "blocks/feature-showcase.html.twig",
+        "blocks/feature-split.html.twig",
+        "blocks/feature-sticky.html.twig",
+        "blocks/feature-tabs.html.twig",
+        "blocks/footer-card.html.twig",
+        "blocks/footer-split.html.twig",
+        "blocks/hero-classic.html.twig",
+        "blocks/hero-head.html.twig",
+        "blocks/hero-prompt.html.twig",
+        "blocks/hero-split.html.twig",
+        "blocks/icon-wall.html.twig",
+        "blocks/job-board.html.twig",
+        "blocks/kanban-board.html.twig",
+        "blocks/logo-cloud.html.twig",
+        "blocks/logo-ribbon.html.twig",
+        "blocks/media-list.html.twig",
+        "blocks/mega-menu.html.twig",
+        "blocks/metric-row.html.twig",
+        "blocks/milestone-timeline.html.twig",
+        "blocks/nav-bar.html.twig",
+        "blocks/newsletter-form.html.twig",
+        "blocks/order-summary.html.twig",
+        "blocks/order-table.html.twig",
+        "blocks/page-intro.html.twig",
+        "blocks/page-trail.html.twig",
+        "blocks/photo-gallery.html.twig",
+        "blocks/post-card.html.twig",
+        "blocks/post-grid.html.twig",
+        "blocks/post-header.html.twig",
+        "blocks/post-showcase.html.twig",
+        "blocks/post-split.html.twig",
+        "blocks/pricing-card.html.twig",
+        "blocks/pricing-tiers.html.twig",
+        "blocks/product-card.html.twig",
+        "blocks/product-detail.html.twig",
+        "blocks/product-grid.html.twig",
+        "blocks/product-info.html.twig",
+        "blocks/profile-form.html.twig",
+        "blocks/project-grid.html.twig",
+        "blocks/proof-band.html.twig",
+        "blocks/quote-split.html.twig",
+        "blocks/region.html.twig",
+        "blocks/review-list.html.twig",
+        "blocks/section-frame.html.twig",
+        "blocks/shell-footer.html.twig",
+        "blocks/shell-sidebar.html.twig",
+        "blocks/shell-topbar.html.twig",
+        "blocks/shopping-cart.html.twig",
+        "blocks/sidebar-nav.html.twig",
+        "blocks/sidebar-panel.html.twig",
+        "blocks/signup-wizard.html.twig",
+        "blocks/site-footer.html.twig",
+        "blocks/site-header.html.twig",
+        "blocks/sitemap-footer.html.twig",
+        "blocks/skeleton-layout.html.twig",
+        "blocks/slot-board.html.twig",
+        "blocks/stats-band.html.twig",
+        "blocks/stepper.html.twig",
+        "blocks/steps-list.html.twig",
+        "blocks/store-hero.html.twig",
+        "blocks/store-locations.html.twig",
+        "blocks/story-tabs.html.twig",
+        "blocks/support-channels.html.twig",
+        "blocks/team-grid.html.twig",
+        "blocks/template-grid.html.twig",
+        "blocks/testimonial-grid.html.twig",
+        "blocks/tour-callout.html.twig",
+        "blocks/usage-calculator.html.twig",
+        "blocks/usp-strip.html.twig",
+        "blocks/video-grid.html.twig",
+        "blocks/video-modal.html.twig",
+        "blocks/zone-table.html.twig"
+      ]
+    },
+    {
+      "name": "@ui8kit/vue-ui",
+      "dir": "packages/vue/ui",
+      "runtime": "vue",
+      "generated": true,
+      "kit": [
+        "src/primitives",
+        "src/utils",
+        "src/styles"
+      ],
+      "composition": [
+        "src/blocks",
+        "src/components"
+      ],
+      "blockRoot": [
+        "src/blocks",
+        "src/components/faq-help.vue",
+        "src/components/footer-card.vue",
+        "src/components/hero-head.vue",
+        "src/components/region.vue",
+        "src/components/section-frame.vue",
+        "src/components/shell-footer.vue",
+        "src/components/shell-sidebar.vue",
+        "src/components/shell-topbar.vue",
+        "src/components/sidebar-panel.vue"
+      ]
+    }
+  ]
+}
diff --git a/runtime/go/cn_merge.go b/runtime/go/cn_merge.go
deleted file mode 100644
index 33d4cf2..0000000
--- a/runtime/go/cn_merge.go
+++ /dev/null
@@ -1,266 +0,0 @@
-package uiutils
-
-import (
-	"strings"
-	"unicode"
-)
-
-func mergeTailwind(classes ...string) string {
-	var tokens []string
-	for _, chunk := range classes {
-		for _, part := range strings.Fields(chunk) {
-			tokens = append(tokens, part)
-		}
-	}
-	if len(tokens) == 0 {
-		return ""
-	}
-
-	type item struct {
-		token string
-		keys  []string
-	}
-	kept := make([]item, 0, len(tokens))
-	indexByKey := map[string]int{}
-
-	for _, token := range tokens {
-		keys := conflictKeys(token)
-		if len(keys) > 0 {
-			seen := map[int]struct{}{}
-			for _, key := range keys {
-				if i, ok := indexByKey[key]; ok {
-					seen[i] = struct{}{}
-				}
-			}
-			if len(seen) > 0 {
-				next := kept[:0]
-				remap := map[int]int{}
-				for i, it := range kept {
-					if _, drop := seen[i]; drop {
-						continue
-					}
-					remap[i] = len(next)
-					next = append(next, it)
-				}
-				kept = next
-				for key, i := range indexByKey {
-					if ni, ok := remap[i]; ok {
-						indexByKey[key] = ni
-					} else {
-						delete(indexByKey, key)
-					}
-				}
-			}
-		}
-		pos := len(kept)
-		kept = append(kept, item{token: token, keys: keys})
-		for _, key := range keys {
-			indexByKey[key] = pos
-		}
-	}
-
-	out := make([]string, 0, len(kept))
-	for _, it := range kept {
-		out = append(out, it.token)
-	}
-	return strings.Join(out, " ")
-}
-
-func conflictKeys(token string) []string {
-	prefix, core := splitVariant(token)
-	if core == "" {
-		return nil
-	}
-	groups := utilityGroups(core)
-	if len(groups) == 0 {
-		return nil
-	}
-	keys := make([]string, 0, len(groups))
-	for _, group := range groups {
-		keys = append(keys, prefix+group)
-	}
-	return keys
-}
-
-func splitVariant(token string) (prefix, core string) {
-	depth := 0
-	cut := -1
-	for i, r := range token {
-		switch r {
-		case '[':
-			depth++
-		case ']':
-			if depth > 0 {
-				depth--
-			}
-		case ':':
-			if depth == 0 {
-				cut = i
-			}
-		}
-	}
-	if cut == -1 {
-		return "", strings.TrimPrefix(token, "!")
-	}
-	return token[:cut+1], strings.TrimPrefix(token[cut+1:], "!")
-}
-
-func utilityGroups(core string) []string {
-	switch core {
-	case "block", "inline", "inline-block", "inline-flex", "flex", "grid", "contents", "hidden":
-		return []string{"display"}
-	case "flex-row", "flex-col", "flex-row-reverse", "flex-col-reverse":
-		return []string{"flex-direction"}
-	case "static", "relative", "absolute", "fixed", "sticky":
-		return []string{"position"}
-	case "isolate", "isolation-auto":
-		return []string{"isolation"}
-	}
-
-	if group, ok := prefixGroup(core, [][2]string{
-		{"gap-x-", "gap-x"},
-		{"gap-y-", "gap-y"},
-		{"gap-", "gap"},
-		{"items-", "align-items"},
-		{"justify-", "justify-content"},
-		{"self-", "align-self"},
-		{"content-", "align-content"},
-		{"overflow-", "overflow"},
-		{"inset-x-", "inset-x"},
-		{"inset-y-", "inset-y"},
-		{"inset-", "inset"},
-		{"min-w-", "min-width"},
-		{"min-h-", "min-height"},
-		{"max-w-", "max-width"},
-		{"max-h-", "max-height"},
-		{"shadow-", "shadow"},
-		{"ring-", "ring"},
-		{"rounded-", "rounded"},
-		{"leading-", "leading"},
-		{"tracking-", "tracking"},
-		{"opacity-", "opacity"},
-		{"z-", "z"},
-		{"top-", "top"},
-		{"right-", "right"},
-		{"bottom-", "bottom"},
-		{"left-", "left"},
-	}); ok {
-		return []string{group}
-	}
-
-	switch {
-	case core == "border":
-		return []string{"border-width"}
-	case core == "rounded":
-		return []string{"rounded"}
-	case core == "shadow" || core == "shadow-none":
-		return []string{"shadow"}
-	case core == "grow" || strings.HasPrefix(core, "grow-") || core == "flex-1" || core == "flex-auto" || core == "flex-none" || core == "flex-initial":
-		return []string{"flex-size"}
-	case core == "shrink" || core == "shrink-0":
-		return []string{"flex-shrink"}
-	}
-
-	if strings.HasPrefix(core, "size-") {
-		return []string{"width", "height"}
-	}
-	if strings.HasPrefix(core, "w-") {
-		return []string{"width"}
-	}
-	if strings.HasPrefix(core, "h-") {
-		return []string{"height"}
-	}
-
-	if strings.HasPrefix(core, "p-") && !hasDirectionPrefix(core, "p") {
-		return []string{"padding", "padding-x", "padding-y", "padding-t", "padding-r", "padding-b", "padding-l"}
-	}
-	if g, ok := spaceAxis(core, "p"); ok {
-		return g
-	}
-	if strings.HasPrefix(core, "m-") && !hasDirectionPrefix(core, "m") {
-		return []string{"margin", "margin-x", "margin-y", "margin-t", "margin-r", "margin-b", "margin-l"}
-	}
-	if g, ok := spaceAxis(core, "m"); ok {
-		return g
-	}
-
-	if strings.HasPrefix(core, "bg-") {
-		return []string{"bg"}
-	}
-	if isTextSize(core) {
-		return []string{"text-size"}
-	}
-	if strings.HasPrefix(core, "text-") {
-		return []string{"text-color"}
-	}
-	if strings.HasPrefix(core, "font-") && isFontWeight(core) {
-		return []string{"font-weight"}
-	}
-	return nil
-}
-
-func prefixGroup(core string, prefixes [][2]string) (string, bool) {
-	for _, pair := range prefixes {
-		if strings.HasPrefix(core, pair[0]) {
-			return pair[1], true
-		}
-	}
-	return "", false
-}
-
-func hasDirectionPrefix(core, kind string) bool {
-	for _, dir := range []string{"x-", "y-", "t-", "r-", "b-", "l-", "s-", "e-"} {
-		if strings.HasPrefix(core, kind+dir) {
-			return true
-		}
-	}
-	return false
-}
-
-func spaceAxis(core, kind string) ([]string, bool) {
-	switch {
-	case strings.HasPrefix(core, kind+"x-"):
-		return []string{kindName(kind) + "-x"}, true
-	case strings.HasPrefix(core, kind+"y-"):
-		return []string{kindName(kind) + "-y"}, true
-	case strings.HasPrefix(core, kind+"t-"):
-		return []string{kindName(kind) + "-t"}, true
-	case strings.HasPrefix(core, kind+"r-"):
-		return []string{kindName(kind) + "-r"}, true
-	case strings.HasPrefix(core, kind+"b-"):
-		return []string{kindName(kind) + "-b"}, true
-	case strings.HasPrefix(core, kind+"l-"):
-		return []string{kindName(kind) + "-l"}, true
-	}
-	return nil, false
-}
-
-func kindName(kind string) string {
-	if kind == "p" {
-		return "padding"
-	}
-	return "margin"
-}
-
-func isTextSize(core string) bool {
-	switch core {
-	case "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "text-3xl", "text-4xl", "text-5xl", "text-6xl", "text-7xl", "text-8xl", "text-9xl":
-		return true
-	}
-	if strings.HasPrefix(core, "text-[") {
-		rest := strings.TrimPrefix(core, "text-[")
-		if rest == "" {
-			return false
-		}
-		return unicode.IsDigit(rune(rest[0])) || rest[0] == '.'
-	}
-	return false
-}
-
-func isFontWeight(core string) bool {
-	switch core {
-	case "font-thin", "font-extralight", "font-light", "font-normal", "font-medium", "font-semibold", "font-bold", "font-extrabold", "font-black":
-		return true
-	}
-	return false
-}
diff --git a/runtime/go/utils.go b/runtime/go/utils.go
deleted file mode 100644
index 56a7844..0000000
--- a/runtime/go/utils.go
+++ /dev/null
@@ -1,67 +0,0 @@
-// Package uiutils holds shared Go helpers for generated UI8Kit bricks.
-package uiutils
-
-import (
-	"fmt"
-	"strings"
-
-	"github.com/a-h/templ"
-)
-
-// Variants groups a base utility chain and keyed variant maps (cva-style).
-type Variants struct {
-	Base     string
-	Keys     []string
-	ByKey    map[string]map[string]string
-	Defaults map[string]string
-}
-
-// Compose merges Base, variant selections, and optional tail classes.
-func Compose(v Variants, selection map[string]string, extra ...string) string {
-	var parts []string
-	if strings.TrimSpace(v.Base) != "" {
-		parts = append(parts, strings.TrimSpace(v.Base))
-	}
-	for _, key := range v.Keys {
-		choices, ok := v.ByKey[key]
-		if !ok {
-			continue
-		}
-		choice := strings.TrimSpace(selection[key])
-		if choice == "" {
-			choice = strings.TrimSpace(v.Defaults[key])
-		}
-		if choice == "" {
-			if len(choices) > 0 {
-				panic(fmt.Sprintf("[Compose] missing default for key %q", key))
-			}
-			continue
-		}
-		if cls, ok2 := choices[choice]; ok2 {
-			if strings.TrimSpace(cls) != "" {
-				parts = append(parts, cls)
-			}
-		}
-		// Unknown choices are silently dropped to avoid leaking typos into
-		// the DOM as literal class names.
-	}
-	parts = append(parts, extra...)
-	return Cn(parts...)
-}
-
-// Cn joins class fragments and resolves Tailwind conflicts (last class wins),
-// matching the JS `cn` = clsx + tailwind-merge used by HostingPanel kit.
-func Cn(classes ...string) string {
-	return mergeTailwind(classes...)
-}
-
-// MergeAttrs merges attribute maps left to right.
-func MergeAttrs(parts ...templ.Attributes) templ.Attributes {
-	out := templ.Attributes{}
-	for _, attrs := range parts {
-		for k, v := range attrs {
-			out[k] = v
-		}
-	}
-	return out
-}
diff --git a/runtime/go/variants_json.go b/runtime/go/variants_json.go
deleted file mode 100644
index a027bc3..0000000
--- a/runtime/go/variants_json.go
+++ /dev/null
@@ -1,47 +0,0 @@
-package uiutils
-
-import (
-	"encoding/json"
-	"fmt"
-)
-
-// VariantRecipe is the JSON shape for *.variants.json (shared with React CVA recipes).
-type VariantRecipe struct {
-	ID       string                       `json:"id"`
-	Base     string                       `json:"base"`
-	Keys     []string                     `json:"keys"`
-	Defaults map[string]string            `json:"defaults"`
-	ByKey    map[string]map[string]string `json:"byKey"`
-	Meta     map[string]string            `json:"meta,omitempty"`
-}
-
-// ToVariants converts a recipe into the in-memory CVA map used by Compose.
-func (r VariantRecipe) ToVariants() Variants {
-	return Variants{
-		Base:     r.Base,
-		Keys:     r.Keys,
-		ByKey:    r.ByKey,
-		Defaults: r.Defaults,
-	}
-}
-
-// ParseVariantRecipe unmarshals *.variants.json bytes.
-func ParseVariantRecipe(data []byte) (VariantRecipe, error) {
-	var recipe VariantRecipe
-	if err := json.Unmarshal(data, &recipe); err != nil {
-		return VariantRecipe{}, fmt.Errorf("variants JSON: %w", err)
-	}
-	if recipe.ByKey == nil {
-		return VariantRecipe{}, fmt.Errorf("variants JSON: missing byKey")
-	}
-	return recipe, nil
-}
-
-// MustParseVariantRecipe parses recipe JSON or panics (for generated init blocks).
-func MustParseVariantRecipe(data []byte) VariantRecipe {
-	recipe, err := ParseVariantRecipe(data)
-	if err != nil {
-		panic(err)
-	}
-	return recipe
-}
diff --git a/runtime/php/Rt.php b/runtime/php/Rt.php
deleted file mode 100644
index 432b3a1..0000000
--- a/runtime/php/Rt.php
+++ /dev/null
@@ -1,190 +0,0 @@
-<?php
-
-/**
- * UI8Kit PHP runtime helpers — one implementation of every decision-table
- * primitive used by generated Latte and Twig templates. Mirrors utils/expr.go
- * and utils/expr.ts so all runtimes resolve defaults identically.
- */
-
-declare(strict_types=1);
-
-namespace UI8Kit;
-
-final class Rt
-{
-    /** Allowed root tags per semantic group (mirrors src/domain/tags.ts). */
-    public const GROUPS = [
-        'Layout' => ['div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'figure', 'search', 'hgroup'],
-        'BoxAllowed' => ['div'],
-        'BlockText' => ['p', 'blockquote', 'figcaption', 'address', 'pre'],
-        'Inline' => ['span', 'em', 'strong', 'small', 'abbr', 'cite', 'code', 'kbd', 'mark', 'time', 'data', 'var', 'samp', 'sub', 'sup', 'b', 'i', 'u', 's', 'q', 'dfn', 'bdo', 'bdi', 'ins', 'del'],
-        'Heading' => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-        'List' => ['ul', 'ol', 'dl', 'menu'],
-        'ListItem' => ['li', 'dt', 'dd'],
-        'Form' => ['form', 'fieldset'],
-        'FormControl' => ['input', 'textarea', 'select', 'button', 'option', 'optgroup', 'datalist', 'output', 'meter', 'progress'],
-        'FormLabel' => ['label', 'legend'],
-        'Table' => ['table'],
-        'TableSection' => ['thead', 'tbody', 'tfoot'],
-        'TableRow' => ['tr'],
-        'TableCell' => ['th', 'td'],
-        'TableColumn' => ['colgroup', 'col'],
-        'Media' => ['img', 'picture', 'source'],
-        'Disclosure' => ['details', 'summary'],
-        'Container' => ['div', 'main', 'section'],
-        'Stack' => ['div', 'ul', 'ol'],
-        'Group' => ['div', 'fieldset', 'dl'],
-    ];
-
-    /** Join non-empty class fragments with a single space (Go Cn). */
-    public static function cn(?string ...$classes): string
-    {
-        $parts = [];
-        foreach ($classes as $c) {
-            $t = trim((string) ($c ?? ''));
-            if ($t !== '') {
-                $parts[] = $t;
-            }
-        }
-        return implode(' ', $parts);
-    }
-
-    /** Omit-if-empty attribute value: '' → null so the attribute is dropped. */
-    public static function orNull(?string $v): ?string
-    {
-        return trim((string) ($v ?? '')) === '' ? null : $v;
-    }
-
-    public static function isSetStr(?string $v): bool
-    {
-        return trim((string) ($v ?? '')) !== '';
-    }
-
-    public static function defaultIfEmpty(?string $v, string $fallback): string
-    {
-        $t = trim((string) ($v ?? ''));
-        return $t === '' ? $fallback : $t;
-    }
-
-    public static function oneOfOr(?string $v, string $fallback, string ...$allowed): string
-    {
-        $t = trim((string) ($v ?? ''));
-        return in_array($t, $allowed, true) ? $t : $fallback;
-    }
-
-    public static function oneOfOrLower(?string $v, string $fallback, string ...$allowed): string
-    {
-        return self::oneOfOr(strtolower(trim((string) ($v ?? ''))), $fallback, ...$allowed);
-    }
-
-    /** Decision table: mapping[trim(v)] ?? fallback. */
-    public static function mapOr(?string $v, array $mapping, string $fallback): string
-    {
-        return $mapping[trim((string) ($v ?? ''))] ?? $fallback;
-    }
-
-    public static function mapOrLower(?string $v, array $mapping, string $fallback): string
-    {
-        return $mapping[strtolower(trim((string) ($v ?? '')))] ?? $fallback;
-    }
-
-    /** Integer decision table: mapping[v] ?? fallback. */
-    public static function intMapOr(int $v, array $mapping, string $fallback): string
-    {
-        return $mapping[$v] ?? $fallback;
-    }
-
-    /** ARIA state stringification: always 'true'/'false', never omitted. */
-    public static function boolStr(bool $v): string
-    {
-        return $v ? 'true' : 'false';
-    }
-
-    /** Concatenation of trimmed parts (icon Prefix + Name). */
-    public static function concatTrim(?string ...$parts): string
-    {
-        $out = '';
-        foreach ($parts as $p) {
-            $out .= trim((string) ($p ?? ''));
-        }
-        return $out;
-    }
-
-    /** Returns tag when allowed for the group, otherwise fallback. */
-    public static function resolveTag(?string $tag, string $fallback, string $group): string
-    {
-        $t = strtolower(trim((string) ($tag ?? '')));
-        if ($t === '') {
-            return $fallback;
-        }
-        return in_array($t, self::GROUPS[$group] ?? [], true) ? $t : $fallback;
-    }
-
-    /** h1–h6 from a heading level; 0/out-of-range default to h2. */
-    public static function titleTag(int $order): string
-    {
-        return match ($order) {
-            1 => 'h1',
-            3 => 'h3',
-            4 => 'h4',
-            5 => 'h5',
-            6 => 'h6',
-            default => 'h2',
-        };
-    }
-
-    /**
-     * Merge recipe base, keyed variant selections, and extra fragments.
-     * Recipe shape mirrors *.variants.json: base, keys, defaults, byKey.
-     * Unknown choices are silently dropped (Go Compose behavior).
-     */
-    public static function compose(array $recipe, array $selection, ?string ...$extra): string
-    {
-        $parts = [];
-        $base = trim((string) ($recipe['base'] ?? ''));
-        if ($base !== '') {
-            $parts[] = $base;
-        }
-        foreach (($recipe['keys'] ?? []) as $key) {
-            $choices = $recipe['byKey'][$key] ?? null;
-            if ($choices === null) {
-                continue;
-            }
-            $choice = trim((string) ($selection[$key] ?? ''));
-            if ($choice === '') {
-                $choice = trim((string) ($recipe['defaults'][$key] ?? ''));
-            }
-            if ($choice === '') {
-                continue;
-            }
-            $cls = $choices[$choice] ?? null;
-            if ($cls !== null && trim($cls) !== '') {
-                $parts[] = $cls;
-            }
-        }
-        return self::cn(...$parts, ...$extra);
-    }
-
-    /**
-     * Print an attribute string for Twig templates. Computed attrs first,
-     * rest (caller) attrs merged last so the caller wins. Semantics match
-     * the canonical renderer: null/false omit, true prints a bare boolean
-     * attribute, everything else stringifies and escapes.
-     */
-    public static function attrStr(array $attrs, array $rest = []): string
-    {
-        $merged = array_merge($attrs, $rest);
-        $out = '';
-        foreach ($merged as $name => $value) {
-            if ($value === null || $value === false) {
-                continue;
-            }
-            if ($value === true) {
-                $out .= ' ' . $name;
-                continue;
-            }
-            $out .= ' ' . $name . '="' . htmlspecialchars((string) $value, ENT_QUOTES) . '"';
-        }
-        return $out;
-    }
-}
diff --git a/runtime/php/TwigExtension.php b/runtime/php/TwigExtension.php
deleted file mode 100644
index 070b1b9..0000000
--- a/runtime/php/TwigExtension.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php
-
-/**
- * Twig bindings for the UI8Kit runtime — thin delegates to UI8Kit\Rt and the
- * generated UI8Kit\Classes helpers. Register once per Twig environment:
- *
- *   $twig->addExtension(new \UI8Kit\TwigExtension());
- */
-
-declare(strict_types=1);
-
-namespace UI8Kit;
-
-use Twig\Extension\AbstractExtension;
-use Twig\TwigFunction;
-
-final class TwigExtension extends AbstractExtension
-{
-    public function getFunctions(): array
-    {
-        return [
-            new TwigFunction('ui8kit_attr_str', [Rt::class, 'attrStr'], ['is_safe' => ['html']]),
-            new TwigFunction('ui8kit_or_null', [Rt::class, 'orNull']),
-            new TwigFunction('ui8kit_is_set_str', [Rt::class, 'isSetStr']),
-            new TwigFunction('ui8kit_default_if_empty', [Rt::class, 'defaultIfEmpty']),
-            new TwigFunction('ui8kit_map_or', static fn ($v, array $mapping, string $fallback, bool $lower = false): string => $lower ? Rt::mapOrLower(self::str($v), $mapping, $fallback) : Rt::mapOr(self::str($v), $mapping, $fallback)),
-            new TwigFunction('ui8kit_one_of_or', static fn ($v, string $fallback, array $allowed, bool $lower = false): string => $lower ? Rt::oneOfOrLower(self::str($v), $fallback, ...$allowed) : Rt::oneOfOr(self::str($v), $fallback, ...$allowed)),
-            new TwigFunction('ui8kit_int_map_or', static fn ($v, array $mapping, string $fallback): string => Rt::intMapOr((int) ($v ?? 0), $mapping, $fallback)),
-            new TwigFunction('ui8kit_concat_trim', static fn (array $parts): string => Rt::concatTrim(...array_map(static fn ($p) => (string) ($p ?? ''), $parts))),
-            new TwigFunction('ui8kit_cn', static fn (array $parts): string => Rt::cn(...array_map(static fn ($p) => (string) ($p ?? ''), $parts))),
-            new TwigFunction('ui8kit_resolve_tag', static fn ($tag, string $fallback, string $group): string => Rt::resolveTag(self::str($tag), $fallback, $group)),
-            new TwigFunction('ui8kit_title_tag', static fn ($order): string => Rt::titleTag((int) ($order ?? 0))),
-            new TwigFunction('ui8kit_classes', static fn (string $method, array $input = []): string => \call_user_func([Classes::class, $method], $input)),
-        ];
-    }
-
-    private static function str(mixed $v): string
-    {
-        return (string) ($v ?? '');
-    }
-}
diff --git a/runtime/ts/cn.ts b/runtime/ts/cn.ts
deleted file mode 100644
index 02aa0e6..0000000
--- a/runtime/ts/cn.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-/**
- * Merge class values with Tailwind conflict resolution.
- * Mirrors shadcn's `cn` = clsx + tailwind-merge.
- * Caller-supplied classes win over recipe classes.
- */
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}
diff --git a/runtime/ts/env.ts b/runtime/ts/env.ts
deleted file mode 100644
index 3f0dd9a..0000000
--- a/runtime/ts/env.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export function isDevEnv(): boolean {
-  try {
-    const env = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
-    if (env && typeof env.DEV === "boolean") return env.DEV;
-  } catch {
-    // import.meta may be unavailable in some contexts
-  }
-  return false;
-}
diff --git a/runtime/ts/expr.ts b/runtime/ts/expr.ts
deleted file mode 100644
index d4f4a05..0000000
--- a/runtime/ts/expr.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Tiny attribute-logic helpers used by generated components. One
- * implementation per runtime family keeps every default-resolution decision
- * table byte-identical across React, Svelte, and Vue (mirrors `expr.go`).
- */
-
-export const trimStr = (v: string | number | null | undefined): string =>
-  v === null || v === undefined ? "" : String(v).trim();
-
-export const isSetStr = (v: string | null | undefined): boolean => trimStr(v) !== "";
-
-export const isSetNum = (v: number | null | undefined): boolean => (v ?? 0) > 0;
-
-/**
- * `trim(v) === "" ? fallback : trim(v)` — DefaultInputType-style defaults.
- * Generic so enum-typed props keep their literal union through the default.
- */
-export const defaultIfEmpty = <T extends string>(v: T | null | undefined, fallback: T): T => {
-  const t = trimStr(v) as T;
-  return t === "" ? fallback : t;
-};
-
-/** Whitelist: returns `trim(v)` when in `allowed`, otherwise `fallback`. */
-export const oneOfOr = <T extends string>(
-  v: string | null | undefined,
-  fallback: T,
-  ...allowed: T[]
-): T => {
-  const t = trimStr(v) as T;
-  return allowed.includes(t) ? t : fallback;
-};
-
-export const oneOfOrLower = <T extends string>(
-  v: string | null | undefined,
-  fallback: T,
-  ...allowed: T[]
-): T => {
-  const t = trimStr(v).toLowerCase() as T;
-  return allowed.includes(t) ? t : fallback;
-};
-
-/** Decision table: `mapping[trim(v)] ?? fallback`. */
-export const mapOr = <T extends string>(
-  v: string | null | undefined,
-  mapping: Record<string, T>,
-  fallback: T
-): T => mapping[trimStr(v)] ?? fallback;
-
-export const mapOrLower = <T extends string>(
-  v: string | null | undefined,
-  mapping: Record<string, T>,
-  fallback: T
-): T => mapping[trimStr(v).toLowerCase()] ?? fallback;
-
-/** Integer decision table: `mapping[v] ?? fallback`. */
-export const intMapOr = <T extends string>(
-  v: number | null | undefined,
-  mapping: Record<number, T>,
-  fallback: T
-): T => mapping[v ?? 0] ?? fallback;
-
-/** Null-safe string equality (both sides normalized to ""). */
-export const eqStr = (a: string | null | undefined, b: string | null | undefined): boolean =>
-  (a ?? "") === (b ?? "");
-
-/** ARIA state stringification: always "true"/"false", never omitted. */
-export const boolStr = (v: boolean | null | undefined): "true" | "false" =>
-  v ? "true" : "false";
-
-/** Concatenation of trimmed parts (icon `Prefix + Name`). */
-export const concatTrim = (...parts: (string | null | undefined)[]): string =>
-  parts.map(trimStr).join("");
-
-/** Omit-if-empty attribute value: `""` → `undefined` so the attr is dropped. */
-export const orUndef = (v: string | null | undefined): string | undefined => {
-  const t = trimStr(v);
-  return t === "" ? undefined : String(v);
-};
-
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-
-/** h1–h6 from a heading level; 0/undefined/out-of-range default to h2. */
-export const titleTag = (order: HeadingLevel | number | null | undefined): string => {
-  switch (order) {
-    case 1:
-      return "h1";
-    case 3:
-      return "h3";
-    case 4:
-      return "h4";
-    case 5:
-      return "h5";
-    case 6:
-      return "h6";
-    default:
-      return "h2";
-  }
-};
diff --git a/runtime/ts/index.ts b/runtime/ts/index.ts
deleted file mode 100644
index 7744b0e..0000000
--- a/runtime/ts/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export { cn } from "./cn";
-export { isDevEnv } from "./env";
-export type { RecipeKey, VariantRecipe } from "./recipe-types";
-export {
-  compose,
-  composeRecipe,
-  recipeToVariants,
-  type RecipeSelection,
-  type Variants,
-} from "./variants";
-export { TagGroup, isAllowedTag, resolveTag } from "./tags";
-export * from "./expr";
diff --git a/runtime/ts/recipe-types.ts b/runtime/ts/recipe-types.ts
deleted file mode 100644
index 4c06863..0000000
--- a/runtime/ts/recipe-types.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Type helpers to derive literal unions from `*.variants.json` recipes.
- * Usage:
- *   import buttonRecipe from "./button.variants.json";
- *   type ButtonVariant = RecipeKey<typeof buttonRecipe, "variant">;
- *   // ^? "default" | "destructive" | "ghost" | ...
- */
-
-export type VariantRecipe = {
-  id: string;
-  base: string;
-  keys: string[];
-  defaults: Record<string, string>;
-  byKey: Record<string, Record<string, string>>;
-};
-
-/**
- * Extract the literal union of variant keys for a given recipe dimension.
- * Empty string (used as a fallback in some JSON recipes) is excluded so
- * consumers get only meaningful values in autocomplete.
- */
-export type RecipeKey<
-  R extends VariantRecipe,
-  K extends keyof R["byKey"] & string,
-> = Exclude<keyof R["byKey"][K] & string, "">;
diff --git a/runtime/ts/tags.ts b/runtime/ts/tags.ts
deleted file mode 100644
index 174c0c4..0000000
--- a/runtime/ts/tags.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-// Code generated by tagsgen. DO NOT EDIT.
-
-import { isDevEnv } from "./env";
-
-export const TagGroup = {
-  Layout: "Layout",
-  BoxAllowed: "BoxAllowed",
-  BlockText: "BlockText",
-  Inline: "Inline",
-  Heading: "Heading",
-  List: "List",
-  ListItem: "ListItem",
-  Form: "Form",
-  FormControl: "FormControl",
-  FormLabel: "FormLabel",
-  Table: "Table",
-  TableSection: "TableSection",
-  TableRow: "TableRow",
-  TableCell: "TableCell",
-  TableColumn: "TableColumn",
-  Media: "Media",
-  Disclosure: "Disclosure",
-  Container: "Container",
-  Stack: "Stack",
-  Group: "Group",
-  Text: "Text",
-} as const;
-
-export type TagGroup = (typeof TagGroup)[keyof typeof TagGroup];
-
-const layoutTags = new Set(["div", "section", "article", "aside", "header", "footer", "main", "nav", "figure", "search", "hgroup"]);
-const boxAllowedTags = new Set(["div"]);
-const blockTextTags = new Set(["p", "blockquote", "figcaption", "address", "pre"]);
-const inlineTags = new Set(["span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"]);
-const headingTags = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
-const listTags = new Set(["ul", "ol", "dl", "menu"]);
-const listItemTags = new Set(["li", "dt", "dd"]);
-const formTags = new Set(["form", "fieldset"]);
-const formControlTags = new Set(["input", "textarea", "select", "button", "option", "optgroup", "datalist", "output", "meter", "progress"]);
-const formLabelTags = new Set(["label", "legend"]);
-const tableTags = new Set(["table"]);
-const tableSectionTags = new Set(["thead", "tbody", "tfoot"]);
-const tableRowTags = new Set(["tr"]);
-const tableCellTags = new Set(["th", "td"]);
-const tableColumnTags = new Set(["colgroup", "col"]);
-const mediaTags = new Set(["img", "picture", "source"]);
-const disclosureTags = new Set(["details", "summary"]);
-const containerTags = new Set(["div", "main", "section"]);
-const stackTags = new Set(["div", "ul", "ol"]);
-const groupTags = new Set(["div", "fieldset", "dl"]);
-
-function oneOf(tag: string, options: Set<string>): boolean {
-  return options.has(tag);
-}
-
-const warnedTagFallbacks = new Set<string>();
-
-function warnTagFallback(tag: string, fallback: string, group: TagGroup): void {
-  if (!isDevEnv()) return;
-  const key = `${group}:${tag}:${fallback}`;
-  if (warnedTagFallbacks.has(key)) return;
-  warnedTagFallbacks.add(key);
-  console.warn(`[resolveTag] disallowed tag "${tag}" for group "${group}", fallback "${fallback}" used.`);
-}
-
-export function isAllowedTag(tag: string, group: TagGroup): boolean {
-  const t = tag.trim().toLowerCase();
-  switch (group) {
-    case TagGroup.Layout:
-      return oneOf(t, layoutTags);
-    case TagGroup.BoxAllowed:
-      return oneOf(t, boxAllowedTags);
-    case TagGroup.BlockText:
-      return oneOf(t, blockTextTags);
-    case TagGroup.Inline:
-      return oneOf(t, inlineTags);
-    case TagGroup.Heading:
-      return oneOf(t, headingTags);
-    case TagGroup.List:
-      return oneOf(t, listTags);
-    case TagGroup.ListItem:
-      return oneOf(t, listItemTags);
-    case TagGroup.Form:
-      return oneOf(t, formTags);
-    case TagGroup.FormControl:
-      return oneOf(t, formControlTags);
-    case TagGroup.FormLabel:
-      return oneOf(t, formLabelTags);
-    case TagGroup.Table:
-      return oneOf(t, tableTags);
-    case TagGroup.TableSection:
-      return oneOf(t, tableSectionTags);
-    case TagGroup.TableRow:
-      return oneOf(t, tableRowTags);
-    case TagGroup.TableCell:
-      return oneOf(t, tableCellTags);
-    case TagGroup.TableColumn:
-      return oneOf(t, tableColumnTags);
-    case TagGroup.Media:
-      return oneOf(t, mediaTags);
-    case TagGroup.Disclosure:
-      return oneOf(t, disclosureTags);
-    case TagGroup.Container:
-      return oneOf(t, containerTags);
-    case TagGroup.Stack:
-      return oneOf(t, stackTags);
-    case TagGroup.Group:
-      return oneOf(t, groupTags);
-    case TagGroup.Text:
-      return blockTextTags.has(t) || inlineTags.has(t);
-    default:
-      return false;
-  }
-}
-
-export function resolveTag(tag: string | undefined, fallback: string, group: TagGroup): string {
-  const t = tag?.trim().toLowerCase() ?? "";
-  if (!t) return fallback;
-  if (isAllowedTag(t, group)) return t;
-  warnTagFallback(t, fallback, group);
-  return fallback;
-}
diff --git a/runtime/ts/variants.ts b/runtime/ts/variants.ts
deleted file mode 100644
index 51921c0..0000000
--- a/runtime/ts/variants.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { cn } from "./cn";
-import { isDevEnv } from "./env";
-import type { RecipeKey, VariantRecipe } from "./recipe-types";
-
-export type { RecipeKey, VariantRecipe };
-
-export type Variants = {
-  id?: string;
-  base: string;
-  keys: string[];
-  defaults: Record<string, string>;
-  byKey: Record<string, Record<string, string>>;
-};
-
-export function recipeToVariants<R extends VariantRecipe>(recipe: R): Variants {
-  return {
-    id: recipe.id,
-    base: recipe.base,
-    keys: recipe.keys,
-    defaults: recipe.defaults ?? {},
-    byKey: recipe.byKey,
-  };
-}
-
-/**
- * Merge base, variant selections, and optional tail classes.
- * Mirrors Go `uiutils.Compose`.
- */
-export function compose(
-  v: Variants,
-  selection: Record<string, string>,
-  ...extra: (string | undefined | null | false)[]
-): string {
-  const parts: string[] = [];
-  if (v.base.trim() !== "") {
-    parts.push(v.base.trim());
-  }
-  for (const key of v.keys) {
-    const choices = v.byKey[key];
-    if (!choices) continue;
-    const selected = (selection[key] ?? "").trim();
-    const fallback = (v.defaults[key] ?? "").trim();
-    const choice = selected || fallback;
-    if (!choice) {
-      if (isDevEnv() && Object.keys(choices).length > 0) {
-        throw new Error(
-          `[compose] missing default for key "${key}" (recipe id: ${String(v.id ?? "?")})`
-        );
-      }
-      continue;
-    }
-    const cls = choices[choice];
-    if (cls !== undefined) {
-      if (cls.trim() !== "") parts.push(cls.trim());
-    } else if (isDevEnv()) {
-      throw new Error(
-        `[compose] unknown variant "${choice}" for key "${key}" (recipe id: ${String(v.id ?? "?")})`
-      );
-    }
-    // Unknown choices are silently dropped in production to avoid leaking
-    // typos into the DOM as literal class names.
-  }
-  return cn(...parts, ...extra);
-}
-
-/** Selection type for `composeRecipe`. */
-export type RecipeSelection<R extends VariantRecipe> = {
-  [K in keyof R["byKey"] & string]?: RecipeKey<R, K> | undefined;
-};
-
-/** Compose classes from a typed recipe. */
-export function composeRecipe<R extends VariantRecipe>(
-  recipe: R,
-  selection: RecipeSelection<R>,
-  ...extra: (string | undefined | null | false)[]
-): string {
-  return compose(recipeToVariants(recipe), selection as Record<string, string>, ...extra);
-}
diff --git a/src/application/generate-latte-bundle.ts b/src/application/generate-latte-bundle.ts
deleted file mode 100644
index 6844db9..0000000
--- a/src/application/generate-latte-bundle.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Latte theme bundle — emit only Latte templates + PHP runtime into a
- * consumer directory (e.g. wp-fasty `.workspaces/ui8kit-latte`).
- *
- * Unlike `generate --runtimes latte`, this profile:
- * - skips parity harnesses (`cmd/parity-latte`)
- * - emits a Latte-only `composer.json` (no Twig)
- * - writes `manifest.json` with coverage / skip summary
- *
- * Usage:
- *   bun src/application/generate-latte-bundle.ts [--out <dir>]
- */
-
-import { bricks } from "../../bricks/index";
-import { emitLatteBundleComposerJson } from "../emitters/php-harness";
-import { BANNER } from "../emitters/common";
-import { generateFiles, phpSkippedParts, writeFiles } from "./generate";
-
-function parseOut(args: string[]): string {
-  for (let i = 0; i < args.length; i++) {
-    if (args[i] === "--out" && args[i + 1]) return args[++i]!;
-  }
-  return "generated/latte-bundle";
-}
-
-function emitManifest(): { path: string; contents: string } {
-  const skipped = phpSkippedParts(bricks);
-  const total = bricks.reduce((n, b) => n + b.parts.length, 0);
-  const manifest = {
-    generator: "@ui8kit/codegen",
-    runtime: "latte",
-    banner: BANNER,
-    bricks: bricks.length,
-    parts: {
-      total,
-      generated: total - skipped.length,
-      skipped: skipped.length,
-    },
-    skipped: skipped.map((s) => ({
-      brick: s.brick,
-      part: s.part,
-      reason: s.reason,
-    })),
-    generatedAt: new Date().toISOString(),
-  };
-  return { path: "manifest.json", contents: JSON.stringify(manifest, null, 2) + "\n" };
-}
-
-function emitReadme(): { path: string; contents: string } {
-  const contents = `# UI8Kit Latte primitives
-
-Generated by \`@ui8kit/codegen\` — **do not edit by hand**.
-
-\`\`\`bash
-# From ui8kit/codegen:
-bun run generate:latte-bundle -- --out <path>
-
-# From wp-fasty (after submodule / packages/ui8kit-codegen):
-bun run ui:primitives
-\`\`\`
-
-## Layout
-
-| Path | Role |
-|------|------|
-| \`ui/<brick>/<Part>.latte\` | Template primitives (60 of 63 parts) |
-| \`ui/<brick>/*.variants.json\` | Shared CVA recipes (also embedded in Classes.php) |
-| \`php/UI8Kit/Rt.php\` | Expression / tag helpers |
-| \`php/UI8Kit/Classes.php\` | Class helpers for **all** parts (escape hatch) |
-| \`composer.json\` | \`ui8kit/latte-primitives\` — Latte only |
-| \`manifest.json\` | Coverage + skip reasons |
-
-## Install
-
-\`\`\`bash
-composer install
-\`\`\`
-
-Point Latte \`FileLoader\` at \`ui/\` and autoload \`UI8Kit\\\\\` from \`php/UI8Kit/\`.
-
-Skipped parts (\`Breadcrumb\`, \`Select\`, \`Icon\`) — use \`Classes::*\` helpers; see codegen docs \`docs/php-complex-parts.md\`.
-`;
-  return { path: "README.md", contents };
-}
-
-async function main(): Promise<void> {
-  const out = parseOut(process.argv.slice(2));
-  const files = await generateFiles(bricks, { runtimes: ["latte"] });
-
-  // Drop parity harness + default dual-runtime composer; keep ui/ + php/UI8Kit/.
-  const filtered = files.filter(
-    (f) => !f.path.startsWith("cmd/") && f.path !== "composer.json"
-  );
-
-  filtered.push(emitLatteBundleComposerJson());
-  filtered.push(emitManifest());
-  filtered.push(emitReadme());
-
-  await writeFiles(filtered, out);
-
-  const skipped = phpSkippedParts(bricks);
-  const total = bricks.reduce((n, b) => n + b.parts.length, 0);
-  console.log(`Latte bundle: ${filtered.length} files → ${out}/`);
-  console.log(`PHP parts: ${total - skipped.length}/${total} generated.`);
-  for (const s of skipped) {
-    console.log(`  skipped ${s.brick}/${s.part}: ${s.reason}`);
-  }
-}
-
-main().catch((err) => {
-  console.error(err instanceof Error ? err.message : err);
-  process.exitCode = 1;
-});
diff --git a/src/application/generate.ts b/src/application/generate.ts
deleted file mode 100644
index 3315a48..0000000
--- a/src/application/generate.ts
+++ /dev/null
@@ -1,212 +0,0 @@
-/**
- * Generation pipeline: validate the brick registry, run every requested
- * emitter, add barrels and the runtime support layer, and return (or write)
- * the full generated tree.
- */
-
-import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-
-import { fileStem, type BrickDef } from "../domain/model";
-import { phpSupported } from "../domain/php-support";
-import { validateRegistry } from "../domain/validate";
-import { BANNER, type Emitter, type GeneratedFile } from "../emitters/common";
-import { LatteEmitter } from "../emitters/latte";
-import { ReactEmitter } from "../emitters/react";
-import { SolidEmitter } from "../emitters/solid";
-import { SvelteEmitter } from "../emitters/svelte";
-import { TemplEmitter } from "../emitters/templ";
-import { TwigEmitter } from "../emitters/twig";
-import { VueEmitter } from "../emitters/vue";
-
-export type RuntimeName = "templ" | "react" | "svelte" | "vue" | "solid" | "latte" | "twig";
-
-export interface GenerateOptions {
-  goModule?: string;
-  runtimes?: RuntimeName[];
-}
-
-const PACKAGE_ROOT = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
-export const DEFAULT_GO_MODULE = "github.com/ui8kit/ui";
-export const ALL_RUNTIMES: RuntimeName[] = ["templ", "react", "svelte", "vue", "solid", "latte", "twig"];
-
-/** Parts the PHP template emitters skip, with reasons (for the CLI summary). */
-export function phpSkippedParts(bricks: BrickDef[]): Array<{ brick: string; part: string; reason: string }> {
-  const out: Array<{ brick: string; part: string; reason: string }> = [];
-  for (const brick of bricks) {
-    for (const part of brick.parts) {
-      const support = phpSupported(part);
-      if (!support.ok) out.push({ brick: brick.dir, part: part.name, reason: support.reason });
-    }
-  }
-  return out;
-}
-
-export async function generateFiles(
-  bricks: BrickDef[],
-  options: GenerateOptions = {}
-): Promise<GeneratedFile[]> {
-  validateRegistry(bricks);
-  const runtimes = options.runtimes ?? ALL_RUNTIMES;
-  const goModule = options.goModule ?? DEFAULT_GO_MODULE;
-
-  const emitters: Emitter[] = [];
-  if (runtimes.includes("templ")) emitters.push(new TemplEmitter({ goModule }));
-  if (runtimes.includes("react")) emitters.push(new ReactEmitter());
-  if (runtimes.includes("svelte")) emitters.push(new SvelteEmitter());
-  if (runtimes.includes("vue")) emitters.push(new VueEmitter());
-  if (runtimes.includes("solid")) emitters.push(new SolidEmitter());
-  if (runtimes.includes("latte")) emitters.push(new LatteEmitter());
-  if (runtimes.includes("twig")) emitters.push(new TwigEmitter());
-
-  const files: GeneratedFile[] = [];
-  const emitTs = runtimes.some(
-    (r) => r === "react" || r === "svelte" || r === "vue" || r === "solid"
-  );
-
-  for (const brick of bricks) {
-    // Colocate the shared recipes next to every runtime file.
-    for (const [id, file] of Object.entries(brick.recipeFiles)) {
-      const recipe = brick.recipes[id]!;
-      files.push({
-        path: `ui/${brick.dir}/${file}`,
-        contents: JSON.stringify(recipe, null, 2) + "\n",
-      });
-    }
-    if (emitTs) {
-      const { emitSharedModule } = await import("../emitters/ts-common");
-      files.push(emitSharedModule(brick, "../../utils"));
-    }
-    for (const emitter of emitters) {
-      files.push(...emitter.emit(brick));
-    }
-  }
-
-  files.push(...(await runtimeSupportFiles(runtimes)));
-  files.push(...barrels(bricks, runtimes));
-
-  if (runtimes.includes("templ")) {
-    const { emitGoParityHarness, emitGoMod } = await import("../emitters/go-harness");
-    files.push(emitGoMod(goModule));
-    files.push(emitGoParityHarness(bricks, goModule));
-  }
-
-  if (runtimes.includes("latte") || runtimes.includes("twig")) {
-    const { emitPhpClasses } = await import("../emitters/php-classes");
-    const { emitComposerJson, emitLatteParityHarness, emitTwigParityHarness } = await import(
-      "../emitters/php-harness"
-    );
-    files.push(emitPhpClasses(bricks));
-    files.push(emitComposerJson());
-    if (runtimes.includes("latte")) files.push(emitLatteParityHarness());
-    if (runtimes.includes("twig")) files.push(emitTwigParityHarness());
-  }
-
-  // Fail loudly on path collisions — one brick must never overwrite another.
-  const seen = new Set<string>();
-  for (const f of files) {
-    if (seen.has(f.path)) throw new Error(`duplicate generated path: ${f.path}`);
-    seen.add(f.path);
-  }
-  return files;
-}
-
-export async function writeFiles(files: GeneratedFile[], outDir: string): Promise<void> {
-  for (const file of files) {
-    const full = join(outDir, file.path);
-    await mkdir(dirname(full), { recursive: true });
-    await writeFile(full, file.contents, "utf8");
-  }
-}
-
-async function runtimeSupportFiles(runtimes: RuntimeName[]): Promise<GeneratedFile[]> {
-  const files: GeneratedFile[] = [];
-  const emitTs = runtimes.some(
-    (r) => r === "react" || r === "svelte" || r === "vue" || r === "solid"
-  );
-  if (emitTs) {
-    const tsDir = join(PACKAGE_ROOT, "runtime", "ts");
-    for (const name of await readdir(tsDir)) {
-      files.push({ path: `utils/${name}`, contents: await readFile(join(tsDir, name), "utf8") });
-    }
-  }
-  if (runtimes.includes("templ")) {
-    const goDir = join(PACKAGE_ROOT, "runtime", "go");
-    for (const name of await readdir(goDir)) {
-      if (name.endsWith("_test.go")) continue;
-      files.push({ path: `utils/${name}`, contents: await readFile(join(goDir, name), "utf8") });
-    }
-  }
-  if (runtimes.includes("react")) {
-    const slot = await readFile(join(PACKAGE_ROOT, "runtime", "react", "slot.tsx"), "utf8");
-    files.push({ path: "ui/slot/slot.tsx", contents: slot });
-  }
-  if (runtimes.includes("latte") || runtimes.includes("twig")) {
-    const phpDir = join(PACKAGE_ROOT, "runtime", "php");
-    for (const name of await readdir(phpDir)) {
-      if (name === "TwigExtension.php" && !runtimes.includes("twig")) continue;
-      files.push({
-        path: `php/UI8Kit/${name}`,
-        contents: await readFile(join(phpDir, name), "utf8"),
-      });
-    }
-  }
-  return files;
-}
-
-function barrels(bricks: BrickDef[], runtimes: RuntimeName[]): GeneratedFile[] {
-  const files: GeneratedFile[] = [];
-
-  if (runtimes.some((r) => r === "react" || r === "svelte" || r === "vue" || r === "solid")) {
-    const lines = [`// ${BANNER}`, `// Shared per-brick contracts (types + classes helpers).`, ``];
-    for (const brick of bricks) {
-      lines.push(`export * from "./${brick.dir}/${fileStem(brick)}.shared";`);
-    }
-    files.push({ path: "ui/shared.ts", contents: lines.join("\n") + "\n" });
-  }
-
-  if (runtimes.includes("react")) {
-    const lines = [`// ${BANNER}`, `// React barrel.`, ``];
-    for (const brick of bricks) {
-      lines.push(`export * from "./${brick.dir}/${fileStem(brick)}";`);
-    }
-    lines.push(`export * from "./slot/slot";`);
-    lines.push(`export * from "./shared";`);
-    files.push({ path: "ui/index.ts", contents: lines.join("\n") + "\n" });
-  }
-
-  if (runtimes.includes("svelte")) {
-    const lines = [`// ${BANNER}`, `// Svelte 5 barrel.`, ``];
-    for (const brick of bricks) {
-      for (const part of brick.parts) {
-        lines.push(`export { default as ${part.name} } from "./${brick.dir}/${part.name}.svelte";`);
-        lines.push(`export type { ${part.name}Props } from "./${brick.dir}/${part.name}.svelte";`);
-      }
-    }
-    lines.push(`export * from "./shared";`);
-    files.push({ path: "ui/index.svelte.ts", contents: lines.join("\n") + "\n" });
-  }
-
-  if (runtimes.includes("vue")) {
-    const lines = [`// ${BANNER}`, `// Vue 3 barrel.`, ``];
-    for (const brick of bricks) {
-      for (const part of brick.parts) {
-        lines.push(`export { default as ${part.name} } from "./${brick.dir}/${part.name}.vue";`);
-      }
-    }
-    lines.push(`export * from "./shared";`);
-    files.push({ path: "ui/index.vue.ts", contents: lines.join("\n") + "\n" });
-  }
-
-  if (runtimes.includes("solid")) {
-    const lines = [`// ${BANNER}`, `// SolidJS barrel.`, ``];
-    for (const brick of bricks) {
-      lines.push(`export * from "./${brick.dir}/${fileStem(brick)}.solid";`);
-    }
-    lines.push(`export * from "./shared";`);
-    files.push({ path: "ui/index.solid.ts", contents: lines.join("\n") + "\n" });
-  }
-
-  return files;
-}
diff --git a/src/domain/cn.ts b/src/domain/cn.ts
deleted file mode 100644
index 879359e..0000000
--- a/src/domain/cn.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-/**
- * Merge class values with Tailwind conflict resolution (clsx + tailwind-merge).
- * Caller-supplied classes win over recipe classes. This is the canonical
- * merge used by the reference renderer and all TS runtimes.
- */
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}
diff --git a/src/domain/php-support.ts b/src/domain/php-support.ts
deleted file mode 100644
index 0a1b87d..0000000
--- a/src/domain/php-support.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * PHP runtime support predicate — decides mechanically which parts the Latte
- * and Twig emitters generate. There is no hand-maintained tier list: a part
- * is supported when its render tree fits the template-engine composition
- * model (single linear children chain, no loops, element root). Everything
- * else is skipped and reported by the CLI summary.
- */
-
-import type { Node, PartDef } from "./model";
-
-export type PhpSupport = { ok: true } | { ok: false; reason: string };
-
-function hasForEach(node: Node): boolean {
-  switch (node.kind) {
-    case "forEach":
-      return true;
-    case "element":
-      return node.children.some(hasForEach);
-    case "when":
-      return node.then.some(hasForEach) || (node.else ?? []).some(hasForEach);
-    default:
-      return false;
-  }
-}
-
-function hasSlot(node: Node): boolean {
-  switch (node.kind) {
-    case "slot":
-      return true;
-    case "element":
-      return node.children.some(hasSlot);
-    case "when":
-      return node.then.some(hasSlot) || (node.else ?? []).some(hasSlot);
-    case "forEach":
-      return node.body.some(hasSlot);
-    default:
-      return false;
-  }
-}
-
-/** True when any `when` node carries a slot inside its branches. */
-function hasBranchedSlot(node: Node): boolean {
-  switch (node.kind) {
-    case "when":
-      return node.then.some(hasSlot) || (node.else ?? []).some(hasSlot);
-    case "element":
-      return node.children.some(hasBranchedSlot);
-    case "forEach":
-      return node.body.some(hasBranchedSlot);
-    default:
-      return false;
-  }
-}
-
-/**
- * Supported ⇔ the part renders an element root, without loops, and without
- * `when` branches that contain the children slot (Latte/Twig cannot declare
- * the same slot twice across exclusive branches).
- */
-export function phpSupported(part: PartDef): PhpSupport {
-  if (part.render.kind !== "element") {
-    return { ok: false, reason: "root is not a single element (branched roots need per-branch slots)" };
-  }
-  if (hasForEach(part.render)) {
-    return { ok: false, reason: "forEach over typed items" };
-  }
-  if (hasBranchedSlot(part.render)) {
-    return { ok: false, reason: "slot inside when branches" };
-  }
-  return { ok: true };
-}
-
-/** Parts of a brick the PHP emitters generate. */
-export function phpSupportedParts(parts: PartDef[]): PartDef[] {
-  return parts.filter((p) => phpSupported(p).ok);
-}
diff --git a/src/domain/tags.ts b/src/domain/tags.ts
deleted file mode 100644
index f9d8933..0000000
--- a/src/domain/tags.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Tag groups — the cross-runtime SSOT for allowed root tags per primitive
- * group. Mirrors ui8kit `utils/tags.json` / `utils/tags.go` / `utils/tags.ts`.
- */
-
-export const TAG_GROUPS = {
-  Layout: ["div", "section", "article", "aside", "header", "footer", "main", "nav", "figure", "search", "hgroup"],
-  BoxAllowed: ["div"],
-  BlockText: ["p", "blockquote", "figcaption", "address", "pre"],
-  Inline: ["span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"],
-  Heading: ["h1", "h2", "h3", "h4", "h5", "h6"],
-  List: ["ul", "ol", "dl", "menu"],
-  ListItem: ["li", "dt", "dd"],
-  Form: ["form", "fieldset"],
-  FormControl: ["input", "textarea", "select", "button", "option", "optgroup", "datalist", "output", "meter", "progress"],
-  FormLabel: ["label", "legend"],
-  Table: ["table"],
-  TableSection: ["thead", "tbody", "tfoot"],
-  TableRow: ["tr"],
-  TableCell: ["th", "td"],
-  TableColumn: ["colgroup", "col"],
-  Media: ["img", "picture", "source"],
-  Disclosure: ["details", "summary"],
-  Container: ["div", "main", "section"],
-  Stack: ["div", "ul", "ol"],
-  Group: ["div", "fieldset", "dl"],
-} as const;
-
-export type TagGroupName = keyof typeof TAG_GROUPS;
-
-export function allowedTags(group: TagGroupName): readonly string[] {
-  return TAG_GROUPS[group];
-}
-
-export function isAllowedTag(tag: string, group: TagGroupName): boolean {
-  return (TAG_GROUPS[group] as readonly string[]).includes(tag.trim().toLowerCase());
-}
-
-/** Returns `tag` when allowed for `group`, otherwise `fallback`. */
-export function resolveTag(tag: string | undefined, fallback: string, group: TagGroupName): string {
-  const t = (tag ?? "").trim().toLowerCase();
-  if (t === "") return fallback;
-  return isAllowedTag(t, group) ? t : fallback;
-}
-
-/** h1–h6 from a heading level; 0/out-of-range default to h2 (mirrors TitleTag). */
-export function titleTag(order: number | undefined): string {
-  switch (order) {
-    case 1:
-      return "h1";
-    case 3:
-      return "h3";
-    case 4:
-      return "h4";
-    case 5:
-      return "h5";
-    case 6:
-      return "h6";
-    default:
-      return "h2";
-  }
-}
-
-export const VOID_TAGS = new Set([
-  "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta",
-  "param", "source", "track", "wbr",
-]);
diff --git a/src/emitters/common.ts b/src/emitters/common.ts
deleted file mode 100644
index 4b783b2..0000000
--- a/src/emitters/common.ts
+++ /dev/null
@@ -1,258 +0,0 @@
-/**
- * Shared emitter infrastructure: generated-file shape, expression typing,
- * constant folding, and small text utilities.
- */
-
-import type { Expr } from "../domain/expr";
-import type { BrickDef, PartDef, PropDef, RecordTypeDef } from "../domain/model";
-
-export interface GeneratedFile {
-  /** Path relative to the output root, e.g. `ui/button/button.tsx`. */
-  path: string;
-  contents: string;
-}
-
-export type EmitterRuntime = "templ" | "react" | "svelte" | "vue" | "solid" | "latte" | "twig";
-
-export interface Emitter {
-  readonly runtime: EmitterRuntime;
-  emit(brick: BrickDef): GeneratedFile[];
-}
-
-export const BANNER = "Code generated by @ui8kit/codegen. DO NOT EDIT.";
-
-// ---------------------------------------------------------------------------
-// Expression typing
-// ---------------------------------------------------------------------------
-
-export type ExprType = "string" | "bool" | "int";
-
-export interface TypeEnv {
-  part: PartDef;
-  records: RecordTypeDef[];
-  /** Record type of the enclosing forEach, when inside one. */
-  itemRecord?: RecordTypeDef;
-}
-
-export function propDef(part: PartDef, name: string): PropDef {
-  const p = part.props.find((x) => x.name === name);
-  if (!p) throw new Error(`${part.name}: unknown prop ${name}`);
-  return p;
-}
-
-/**
- * Build the typing environment for a part. Parts have at most one `items`
- * prop, so its record doubles as the loop-item record for expression typing.
- */
-export function makeEnv(brick: { recordTypes?: RecordTypeDef[] }, part: PartDef): TypeEnv {
-  const records = brick.recordTypes ?? [];
-  const itemsProp = part.props.find((p) => p.type === "items");
-  const itemRecord = itemsProp ? records.find((r) => r.name === itemsProp.itemsOf) : undefined;
-  return { part, records, itemRecord };
-}
-
-export function exprType(expr: Expr, env: TypeEnv): ExprType {
-  switch (expr.kind) {
-    case "lit":
-      return typeof expr.value === "boolean" ? "bool" : typeof expr.value === "number" ? "int" : "string";
-    case "prop": {
-      const p = propDef(env.part, expr.name);
-      if (p.type === "string" || p.type === "bool" || p.type === "int") return p.type;
-      throw new Error(`${env.part.name}: prop ${expr.name} of type ${p.type} not usable in expressions`);
-    }
-    case "item": {
-      const record = env.itemRecord;
-      if (!record) throw new Error(`${env.part.name}: item ref outside forEach`);
-      const f = record.fields.find((x) => x.name === expr.field);
-      if (!f) throw new Error(`${env.part.name}: record ${record.name} has no field ${expr.field}`);
-      return f.type;
-    }
-    case "derivedRef": {
-      const d = env.part.derived?.[expr.name];
-      if (!d) throw new Error(`${env.part.name}: unknown derived ${expr.name}`);
-      return exprType(d, env);
-    }
-    case "resolvedTag":
-    case "defaultIfEmpty":
-    case "mapOr":
-    case "intMapOr":
-    case "concat":
-    case "boolToString":
-    case "intToString":
-      return "string";
-    case "cond":
-      return exprType(expr.then, env);
-    case "eq":
-    case "and":
-    case "or":
-    case "not":
-    case "isSet":
-    case "contains":
-      return "bool";
-  }
-}
-
-/** True when the expression (transitively) references the loop item. */
-export function usesItem(expr: Expr, env: TypeEnv): boolean {
-  switch (expr.kind) {
-    case "item":
-      return true;
-    case "derivedRef": {
-      const d = env.part.derived?.[expr.name];
-      return d ? usesItem(d, env) : false;
-    }
-    default:
-      break;
-  }
-  const children = childListOf(expr);
-  return children.some((c) => usesItem(c, env));
-}
-
-/** True when the expression (transitively) references a component prop. */
-export function usesProps(expr: Expr, env: TypeEnv): boolean {
-  switch (expr.kind) {
-    case "prop":
-      return true;
-    case "derivedRef": {
-      const d = env.part.derived?.[expr.name];
-      return d ? usesProps(d, env) : false;
-    }
-    default:
-      break;
-  }
-  return childListOf(expr).some((c) => usesProps(c, env));
-}
-
-function childListOf(expr: Expr): Expr[] {
-  switch (expr.kind) {
-    case "lit":
-    case "prop":
-    case "item":
-    case "derivedRef":
-    case "resolvedTag":
-      return [];
-    case "defaultIfEmpty":
-    case "mapOr":
-    case "intMapOr":
-    case "not":
-    case "isSet":
-    case "contains":
-    case "boolToString":
-    case "intToString":
-      return [expr.expr];
-    case "cond":
-      return [expr.test, expr.then, expr.else];
-    case "eq":
-      return [expr.left, expr.right];
-    case "and":
-    case "or":
-      return expr.exprs;
-    case "concat":
-      return expr.parts;
-  }
-}
-
-/**
- * Replace `resolvedTag` with a literal and fold trivially-constant boolean
- * algebra. Used by the Templ emitter inside tag-switch cases, where the
- * resolved tag is a known literal per case.
- */
-export function foldResolvedTag(expr: Expr, tag: string): Expr {
-  const fold = (e: Expr): Expr => {
-    switch (e.kind) {
-      case "resolvedTag":
-        return { kind: "lit", value: tag };
-      case "eq": {
-        const left = fold(e.left);
-        const right = fold(e.right);
-        if (left.kind === "lit" && right.kind === "lit") {
-          return { kind: "lit", value: left.value === right.value };
-        }
-        return { ...e, left, right };
-      }
-      case "and": {
-        const exprs = e.exprs.map(fold);
-        if (exprs.some((x) => x.kind === "lit" && x.value === false)) return { kind: "lit", value: false };
-        const rest = exprs.filter((x) => !(x.kind === "lit" && x.value === true));
-        if (rest.length === 0) return { kind: "lit", value: true };
-        if (rest.length === 1) return rest[0]!;
-        return { ...e, exprs: rest };
-      }
-      case "or": {
-        const exprs = e.exprs.map(fold);
-        if (exprs.some((x) => x.kind === "lit" && x.value === true)) return { kind: "lit", value: true };
-        const rest = exprs.filter((x) => !(x.kind === "lit" && x.value === false));
-        if (rest.length === 0) return { kind: "lit", value: false };
-        if (rest.length === 1) return rest[0]!;
-        return { ...e, exprs: rest };
-      }
-      case "not": {
-        const inner = fold(e.expr);
-        if (inner.kind === "lit" && typeof inner.value === "boolean") {
-          return { kind: "lit", value: !inner.value };
-        }
-        return { ...e, expr: inner };
-      }
-      case "cond": {
-        const test = fold(e.test);
-        if (test.kind === "lit" && typeof test.value === "boolean") {
-          return test.value ? fold(e.then) : fold(e.else);
-        }
-        return { ...e, test, then: fold(e.then), else: fold(e.else) };
-      }
-      case "defaultIfEmpty":
-        return { ...e, expr: fold(e.expr) };
-      case "mapOr":
-        return { ...e, expr: fold(e.expr) };
-      case "intMapOr":
-        return { ...e, expr: fold(e.expr) };
-      case "isSet":
-        return { ...e, expr: fold(e.expr) };
-      case "contains":
-        return { ...e, expr: fold(e.expr) };
-      case "boolToString":
-        return { ...e, expr: fold(e.expr) };
-      case "intToString":
-        return { ...e, expr: fold(e.expr) };
-      case "concat":
-        return { ...e, parts: e.parts.map(fold) };
-      default:
-        return e;
-    }
-  };
-  return fold(expr);
-}
-
-// ---------------------------------------------------------------------------
-// Text utilities
-// ---------------------------------------------------------------------------
-
-export function indent(text: string, level: number, unit = "  "): string {
-  const pad = unit.repeat(level);
-  return text
-    .split("\n")
-    .map((line) => (line.trim() === "" ? line : pad + line))
-    .join("\n");
-}
-
-export function pascalCase(kebab: string): string {
-  return kebab
-    .split(/[-_.]/)
-    .filter(Boolean)
-    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
-    .join("");
-}
-
-export function lowerFirst(name: string): string {
-  return name.charAt(0).toLowerCase() + name.slice(1);
-}
-
-export function jsString(value: string): string {
-  return JSON.stringify(value);
-}
-
-/** Recipe variable/const name from the variants.json file stem. */
-export function recipeVarName(recipeFile: string): string {
-  const stem = recipeFile.replace(/\.variants\.json$/, "");
-  return pascalCase(stem) + "Variants";
-}
diff --git a/src/emitters/latte.ts b/src/emitters/latte.ts
deleted file mode 100644
index 1c7f84c..0000000
--- a/src/emitters/latte.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-/**
- * Latte emitter — one `<Part>.latte` per supported part. Typed
- * `{parameters}` signature, `{var}` preamble for derived values and dynamic
- * tags, and a single `n:attr` map per element (computed attrs first, caller
- * `...$attrs` spread last so the caller wins). Unsupported parts (forEach,
- * branched slots) are skipped — see src/domain/php-support.ts.
- */
-
-import type { Expr } from "../domain/expr";
-import {
-  type AttrSpec,
-  type BrickDef,
-  type ClassSpec,
-  type ElementNode,
-  type Node,
-  type PartDef,
-} from "../domain/model";
-import { phpPropName } from "../domain/naming";
-import { phpSupported } from "../domain/php-support";
-import { allowedTags, VOID_TAGS } from "../domain/tags";
-import {
-  BANNER,
-  exprType,
-  indent,
-  makeEnv,
-  type Emitter,
-  type GeneratedFile,
-  type TypeEnv,
-} from "./common";
-import { phpClassesMethod, phpParams, hasAttrsProp, hasChildrenProp } from "./php-common";
-import { printPhpExpr, phpString, type PhpPrintCtx } from "./php-expr";
-import { classSpecProps, neverEmptyString } from "./ts-common";
-
-export class LatteEmitter implements Emitter {
-  readonly runtime = "latte" as const;
-
-  emit(brick: BrickDef): GeneratedFile[] {
-    return brick.parts
-      .filter((part) => phpSupported(part).ok)
-      .map((part) => this.emitPart(brick, part));
-  }
-
-  private emitPart(brick: BrickDef, part: PartDef): GeneratedFile {
-    const env = makeEnv(brick, part);
-    const ctx: PhpPrintCtx = {
-      env,
-      propCode: (name) => {
-        const p = part.props.find((x) => x.name === name);
-        if (!p) throw new Error(`${brick.id}/${part.name}: unknown prop ${name}`);
-        return "$" + phpPropName(p);
-      },
-      resolvedTagCode: () => "$uiTag",
-      // Prefixed so derived values never shadow same-named props ($target).
-      derivedCode: (name) => "$ui" + name.charAt(0).toUpperCase() + name.slice(1),
-    };
-
-    const lines: string[] = [];
-    lines.push(`{* ${BANNER} *}`);
-    lines.push(`{* ${brick.id} — ${part.docs.split("\n")[0]} *}`);
-    lines.push(this.parametersBlock(part));
-
-    const preamble = this.preamble(part, env, ctx);
-    if (preamble.length > 0) lines.push(...preamble);
-
-    lines.push(this.printNode(part.render, brick, part, env, ctx));
-
-    return {
-      path: `ui/${brick.dir}/${part.name}.latte`,
-      contents: lines.join("\n") + "\n",
-    };
-  }
-
-  private parametersBlock(part: PartDef): string {
-    const entries: string[] = [];
-    for (const p of phpParams(part)) {
-      const type = p.type === "string" ? "string" : p.type === "bool" ? "bool" : "int";
-      const def = p.type === "string" ? "''" : p.type === "bool" ? "false" : "0";
-      entries.push(`${type} $${p.name} = ${def}`);
-    }
-    if (hasAttrsProp(part)) entries.push(`array $attrs = []`);
-    if (hasChildrenProp(part)) entries.push(`string $children = ''`);
-    if (entries.length === 0) return `{parameters}`;
-    return `{parameters\n${entries.map((e) => `  ${e},`).join("\n")}\n}`;
-  }
-
-  private preamble(part: PartDef, env: TypeEnv, ctx: PhpPrintCtx): string[] {
-    const out: string[] = [];
-    const root = part.render;
-    if (root.kind === "element" && root.tag.kind !== "static") {
-      const tag = root.tag;
-      if (tag.kind === "resolved") {
-        out.push(
-          `{var $uiTag = \\UI8Kit\\Rt::resolveTag(${ctx.propCode(tag.fromProp)}, ${phpString(tag.fallback)}, ${phpString(tag.group)})}`
-        );
-      } else if (tag.kind === "heading") {
-        out.push(`{var $uiTag = \\UI8Kit\\Rt::titleTag(${ctx.propCode(tag.fromProp)})}`);
-      } else {
-        out.push(`{var $uiTag = ${printPhpExpr(tag.expr, ctx)}}`);
-      }
-    }
-    for (const [name, expr] of Object.entries(part.derived ?? {})) {
-      out.push(`{var ${ctx.derivedCode(name)} = ${printPhpExpr(expr, ctx)}}`);
-    }
-    return out;
-  }
-
-  private printNode(node: Node, brick: BrickDef, part: PartDef, env: TypeEnv, ctx: PhpPrintCtx): string {
-    switch (node.kind) {
-      case "element":
-        return this.printElement(node, brick, part, env, ctx);
-      case "slot":
-        return `{$children|noescape}`;
-      case "text":
-        return `{${printPhpExpr(node.expr, ctx)}}`;
-      case "when": {
-        const test = printPhpExpr(node.test, ctx);
-        const thenCode = node.then.map((c) => this.printNode(c, brick, part, env, ctx)).join("");
-        if (!node.else || node.else.length === 0) {
-          return `{if ${test}}${thenCode}{/if}`;
-        }
-        const elseCode = node.else.map((c) => this.printNode(c, brick, part, env, ctx)).join("");
-        return `{if ${test}}${thenCode}{else}${elseCode}{/if}`;
-      }
-      case "forEach":
-        throw new Error(`${brick.id}/${part.name}: forEach reached the Latte emitter (must be skipped)`);
-    }
-  }
-
-  private printElement(
-    node: ElementNode,
-    brick: BrickDef,
-    part: PartDef,
-    env: TypeEnv,
-    ctx: PhpPrintCtx
-  ): string {
-    const attrMap = this.attrEntries(node.attrs, brick, part, env, ctx);
-    const tag = node.tag;
-
-    if (tag.kind === "static") {
-      return this.elementMarkup(tag.tag, undefined, attrMap, node, brick, part, env, ctx);
-    }
-    if (tag.kind === "mapped") {
-      // n:tag breaks on void/self-closing elements — print an explicit
-      // if/else chain over the closed tag set instead (br|wbr today).
-      const cases = tag.tags;
-      const chunks: string[] = [];
-      for (let i = 0; i < cases.length - 1; i++) {
-        const kw = i === 0 ? "if" : "elseif";
-        chunks.push(`{${kw} $uiTag === ${phpString(cases[i]!)}}`);
-        chunks.push(this.elementMarkup(cases[i]!, undefined, attrMap, node, brick, part, env, ctx));
-      }
-      chunks.push(`{else}`);
-      chunks.push(this.elementMarkup(cases[cases.length - 1]!, undefined, attrMap, node, brick, part, env, ctx));
-      chunks.push(`{/if}`);
-      return chunks.join("\n");
-    }
-    // resolved / heading — non-void groups, n:tag swaps the tag at runtime.
-    const base = tag.kind === "resolved" ? tag.fallback : "h2";
-    if (tag.kind === "resolved") {
-      const voidCase = allowedTags(tag.group).find((t) => VOID_TAGS.has(t));
-      if (voidCase) {
-        throw new Error(`${brick.id}/${part.name}: resolved group ${tag.group} contains void tag ${voidCase} (n:tag unsupported)`);
-      }
-    }
-    return this.elementMarkup(base, `$uiTag`, attrMap, node, brick, part, env, ctx);
-  }
-
-  private elementMarkup(
-    tag: string,
-    nTag: string | undefined,
-    attrMap: string[],
-    node: ElementNode,
-    brick: BrickDef,
-    part: PartDef,
-    env: TypeEnv,
-    ctx: PhpPrintCtx
-  ): string {
-    const isVoid = node.void || VOID_TAGS.has(tag);
-    const nTagAttr = nTag ? ` n:tag="${nTag}"` : "";
-    const nAttr =
-      attrMap.length === 0
-        ? ""
-        : attrMap.length === 1 && attrMap[0] === "...$attrs"
-          ? ` n:attr="[...$attrs]"`
-          : ` n:attr="[\n${indent(attrMap.map((e) => `${e},`).join("\n"), 1)}\n]"`;
-    const open = `<${tag}${nTagAttr}${nAttr}>`;
-    if (isVoid) return open;
-    const children = node.children
-      .map((c) => this.printNode(c, brick, part, env, ctx))
-      .join("");
-    return `${open}${children}</${tag}>`;
-  }
-
-  private attrEntries(
-    attrs: AttrSpec[],
-    brick: BrickDef,
-    part: PartDef,
-    env: TypeEnv,
-    ctx: PhpPrintCtx
-  ): string[] {
-    const out: string[] = [];
-    for (const attr of attrs) {
-      switch (attr.kind) {
-        case "static":
-          out.push(`${phpString(attr.name)} => ${phpString(attr.value)}`);
-          break;
-        case "expr": {
-          const t = exprType(attr.expr, env);
-          const value = printPhpExpr(attr.expr, ctx);
-          const strValue = t === "string" ? value : `(string) (${value})`;
-          if (attr.when) {
-            const test = printPhpExpr(attr.when, ctx);
-            out.push(`${phpString(attr.name)} => ((${test}) ? ${strValue} : null)`);
-          } else if (attr.keepEmpty || t !== "string" || neverEmptyString(attr.expr, env)) {
-            out.push(`${phpString(attr.name)} => ${strValue}`);
-          } else {
-            out.push(`${phpString(attr.name)} => \\UI8Kit\\Rt::orNull(${value})`);
-          }
-          break;
-        }
-        case "bool":
-          out.push(`${phpString(attr.name)} => ${printPhpExpr(attr.expr, ctx)}`);
-          break;
-        case "class": {
-          const call = attr.spec
-            ? this.inlineClassCall(attr.spec, part, ctx)
-            : this.partClassCall(part, ctx);
-          out.push(`'class' => \\UI8Kit\\Rt::orNull(${call})`);
-          break;
-        }
-        case "rest":
-          out.push(`...$attrs`);
-          break;
-      }
-    }
-    return out;
-  }
-
-  /** `\UI8Kit\Classes::buttonClasses(['variant' => $variant, 'class' => $class])` */
-  private partClassCall(part: PartDef, ctx: PhpPrintCtx): string {
-    const spec = part.classes;
-    if (!spec) throw new Error(`${part.name}: attrClass() without classes contract`);
-    const inputs: string[] = [];
-    for (const name of classSpecProps(spec)) {
-      const p = part.props.find((x) => x.name === name)!;
-      inputs.push(`${phpString(phpPropName(p))} => ${ctx.propCode(name)}`);
-    }
-    if (spec.includeClassProp !== false && part.props.some((p) => p.name === "Class")) {
-      inputs.push(`'class' => ${ctx.propCode("Class")}`);
-    }
-    return `\\UI8Kit\\Classes::${phpClassesMethod(part)}([${inputs.join(", ")}])`;
-  }
-
-  /** Inline (non-recipe) class specs print as a direct Rt::cn call. */
-  private inlineClassCall(spec: ClassSpec, part: PartDef, ctx: PhpPrintCtx): string {
-    if (spec.recipe) {
-      throw new Error(`${part.name}: inline class specs with recipes are not supported`);
-    }
-    const args: string[] = [];
-    if (spec.staticBase) args.push(phpString(spec.staticBase));
-    for (const e of spec.extra ?? []) args.push(printPhpExpr(e, ctx));
-    for (const st of spec.state ?? []) {
-      args.push(`((${printPhpExpr(st.test, ctx)}) ? ${phpString(st.classes)} : '')`);
-    }
-    if (spec.includeClassProp !== false && part.props.some((p) => p.name === "Class")) {
-      args.push(ctx.propCode("Class"));
-    }
-    return `\\UI8Kit\\Rt::cn(${args.join(", ")})`;
-  }
-}
-
-/** Guard: generated PHP inside `n:attr="..."` must not contain double quotes. */
-export function assertAttrSafe(code: string, where: string): void {
-  if (code.includes('"')) {
-    throw new Error(`${where}: generated n:attr expression contains a double quote`);
-  }
-}
diff --git a/src/emitters/php-classes.ts b/src/emitters/php-classes.ts
deleted file mode 100644
index d9eb312..0000000
--- a/src/emitters/php-classes.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * Emits `php/UI8Kit/Classes.php` — one static `<part>Classes(array $in)`
- * helper per part with a classes contract, plus the embedded variant recipes
- * (PHP array constants generated from the shared `*.variants.json`, the
- * PHP equivalent of Go's `//go:embed`). Helpers are emitted for every part —
- * including parts the template emitters skip — because class composition is
- * the documented app-level escape hatch.
- */
-
-import type { Expr } from "../domain/expr";
-import { fileStem, type BrickDef, type ClassSpec, type PartDef } from "../domain/model";
-import { phpPropName } from "../domain/naming";
-import type { VariantRecipe } from "../domain/recipe";
-import { BANNER, makeEnv, type GeneratedFile } from "./common";
-import { phpClassesMethod } from "./php-common";
-import { printPhpExpr, phpString, type PhpPrintCtx } from "./php-expr";
-import { classSpecProps } from "./ts-common";
-
-function phpValue(value: unknown): string {
-  if (typeof value === "string") return phpString(value);
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  if (Array.isArray(value)) return `[${value.map(phpValue).join(", ")}]`;
-  if (value && typeof value === "object") {
-    const entries = Object.entries(value as Record<string, unknown>)
-      .map(([k, v]) => `${phpString(k)} => ${phpValue(v)}`)
-      .join(", ");
-    return `[${entries}]`;
-  }
-  return "null";
-}
-
-function recipeConstName(brick: BrickDef, recipeId: string): string {
-  return `${fileStem(brick)}_${recipeId}`.replace(/[^A-Za-z0-9]/g, "_").toUpperCase();
-}
-
-function recipeConst(brick: BrickDef, recipeId: string, recipe: VariantRecipe): string {
-  const value = phpValue({
-    base: recipe.base,
-    keys: recipe.keys,
-    defaults: recipe.defaults ?? {},
-    byKey: recipe.byKey,
-  });
-  return `    private const ${recipeConstName(brick, recipeId)} = ${value};`;
-}
-
-function inputCode(part: PartDef, name: string): string {
-  const p = part.props.find((x) => x.name === name);
-  if (!p) throw new Error(`${part.name}: classes spec references undeclared prop ${name}`);
-  const key = p.name === "Class" ? "class" : phpPropName(p);
-  switch (p.type) {
-    case "bool":
-      return `(bool) ($in[${phpString(key)}] ?? false)`;
-    case "int":
-      return `(int) ($in[${phpString(key)}] ?? 0)`;
-    default:
-      return `(string) ($in[${phpString(key)}] ?? '')`;
-  }
-}
-
-function classesMethod(brick: BrickDef, part: PartDef, spec: ClassSpec): string {
-  const ctx: PhpPrintCtx = {
-    env: makeEnv(brick, part),
-    propCode: (name) => inputCode(part, name),
-    resolvedTagCode: () => {
-      throw new Error(`${part.name}: classes helpers cannot reference the resolved tag`);
-    },
-    derivedCode: () => {
-      throw new Error(`${part.name}: classes helpers cannot reference derived values`);
-    },
-  };
-
-  const tail: string[] = [];
-  if (spec.staticBase) tail.push(phpString(spec.staticBase));
-  for (const e of spec.extra ?? []) tail.push(printPhpExpr(e, ctx));
-  for (const st of spec.state ?? []) {
-    tail.push(`((${printPhpExpr(st.test, ctx)}) ? ${phpString(st.classes)} : '')`);
-  }
-  if (spec.includeClassProp !== false && part.props.some((p) => p.name === "Class")) {
-    tail.push(`(string) ($in['class'] ?? '')`);
-  }
-
-  let body: string;
-  if (spec.recipe) {
-    const recipeId = spec.recipeId ?? part.recipeId;
-    if (!recipeId) throw new Error(`${part.name}: recipe class spec without recipeId`);
-    const selection = Object.entries(spec.recipe)
-      .map(([key, source]) => {
-        const value = typeof source === "string" ? inputCode(part, source) : printPhpExpr(source, ctx);
-        return `${phpString(key)} => ${value}`;
-      })
-      .join(", ");
-    const tailStr = tail.length > 0 ? `, ${tail.join(", ")}` : "";
-    body = `Rt::compose(self::${recipeConstName(brick, recipeId)}, [${selection}]${tailStr})`;
-  } else {
-    body = `Rt::cn(${tail.join(", ")})`;
-  }
-
-  return [
-    `    /** ${part.name} class composition — the server-side asChild substitute. */`,
-    `    public static function ${phpClassesMethod(part)}(array $in = []): string`,
-    `    {`,
-    `        return ${body};`,
-    `    }`,
-  ].join("\n");
-}
-
-export function emitPhpClasses(bricks: BrickDef[]): GeneratedFile {
-  const consts: string[] = [];
-  const methods: string[] = [];
-  const seen = new Set<string>();
-
-  for (const brick of bricks) {
-    for (const [id, recipe] of Object.entries(brick.recipes)) {
-      consts.push(recipeConst(brick, id, recipe));
-    }
-    for (const part of brick.parts) {
-      if (!part.classes) continue;
-      const method = phpClassesMethod(part);
-      if (seen.has(method)) throw new Error(`duplicate PHP classes method: ${method}`);
-      seen.add(method);
-      methods.push(classesMethod(brick, part, part.classes));
-    }
-  }
-
-  const contents = [
-    `<?php`,
-    ``,
-    `// ${BANNER}`,
-    ``,
-    `declare(strict_types=1);`,
-    ``,
-    `namespace UI8Kit;`,
-    ``,
-    `final class Classes`,
-    `{`,
-    consts.join("\n"),
-    ``,
-    methods.join("\n\n"),
-    `}`,
-    ``,
-  ].join("\n");
-
-  return { path: "php/UI8Kit/Classes.php", contents };
-}
diff --git a/src/emitters/php-common.ts b/src/emitters/php-common.ts
deleted file mode 100644
index cb92026..0000000
--- a/src/emitters/php-common.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Shared analysis for the two PHP template emitters (Latte, Twig): parameter
- * model, class-helper naming, and the attribute-entry classification that
- * mirrors the canonical renderer's omit/keep semantics.
- */
-
-import type { Expr } from "../domain/expr";
-import type { PartDef, PropDef } from "../domain/model";
-import { phpPropName } from "../domain/naming";
-import { lowerFirst } from "./common";
-
-export interface PhpParam {
-  def: PropDef;
-  /** Template variable name without the sigil (`variant`, `class`, `ariaLabel`). */
-  name: string;
-  type: "string" | "bool" | "int";
-}
-
-/** Declared + passthrough props that become template parameters, in order. */
-export function phpParams(part: PartDef): PhpParam[] {
-  const out: PhpParam[] = [];
-  for (const p of part.props) {
-    if (p.type === "attrs" || p.type === "children") continue;
-    if (p.type === "items") {
-      throw new Error(`${part.name}.${p.name}: items props are not supported by PHP emitters`);
-    }
-    out.push({ def: p, name: phpPropName(p), type: p.type });
-  }
-  return out;
-}
-
-export function hasAttrsProp(part: PartDef): boolean {
-  return part.props.some((p) => p.type === "attrs");
-}
-
-export function hasChildrenProp(part: PartDef): boolean {
-  return part.props.some((p) => p.type === "children");
-}
-
-/** `\UI8Kit\Classes` method name for a part's classes helper. */
-export function phpClassesMethod(part: PartDef): string {
-  return lowerFirst(part.name) + "Classes";
-}
-
-/**
- * How one AttrSpec value prints, independent of dialect. The canonical
- * renderer's rules: `when` gates unconditionally keep the value (even
- * empty); `keepEmpty` keeps empty strings; plain string attrs are omitted
- * when trimmed-empty; ints and booleans always print.
- */
-export type AttrValuePlan =
-  | { kind: "always"; expr: Expr; type: "string" | "int" | "bool" }
-  | { kind: "whenGate"; when: Expr; expr: Expr; type: "string" | "int" | "bool" }
-  | { kind: "omitIfEmpty"; expr: Expr };
diff --git a/src/emitters/php-expr.ts b/src/emitters/php-expr.ts
deleted file mode 100644
index 1fec749..0000000
--- a/src/emitters/php-expr.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Prints IR expressions as PHP — the expression dialect embedded by the
- * Latte emitter ({var ...}, n:attr arrays, {if ...}). Non-trivial
- * combinators delegate to the shared `\UI8Kit\Rt` runtime so every decision
- * table stays byte-identical with the Go/TS implementations.
- */
-
-import type { Expr } from "../domain/expr";
-import { exprType, type TypeEnv } from "./common";
-
-export interface PhpPrintCtx {
-  env: TypeEnv;
-  /** `$variant`, `$class`, ... (phpPropName with $). */
-  propCode: (name: string) => string;
-  /** `$uiTag` for dynamic-tag roots. */
-  resolvedTagCode: () => string;
-  /** `$target`, `$rel`, ... ({var} preamble assignments). */
-  derivedCode: (name: string) => string;
-}
-
-/** PHP single-quoted string literal. */
-export function phpString(value: string): string {
-  return `'${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
-}
-
-function phpArrayStr(mapping: Record<string, string>): string {
-  const entries = Object.entries(mapping)
-    .map(([k, v]) => `${phpString(k)} => ${phpString(v)}`)
-    .join(", ");
-  return `[${entries}]`;
-}
-
-function isIdentityMapping(mapping: Record<string, string>): boolean {
-  return Object.entries(mapping).every(([k, v]) => k === v);
-}
-
-export function printPhpExpr(expr: Expr, ctx: PhpPrintCtx): string {
-  const p = (e: Expr) => printPhpExpr(e, ctx);
-  switch (expr.kind) {
-    case "lit":
-      return typeof expr.value === "string" ? phpString(expr.value) : String(expr.value);
-    case "prop":
-      return ctx.propCode(expr.name);
-    case "item":
-      throw new Error("item refs are not supported by the PHP emitters (forEach parts are skipped)");
-    case "derivedRef":
-      return ctx.derivedCode(expr.name);
-    case "resolvedTag":
-      return ctx.resolvedTagCode();
-    case "defaultIfEmpty":
-      return `\\UI8Kit\\Rt::defaultIfEmpty(${p(expr.expr)}, ${phpString(expr.fallback)})`;
-    case "mapOr": {
-      if (isIdentityMapping(expr.mapping)) {
-        const fn = expr.lower ? "oneOfOrLower" : "oneOfOr";
-        const allowed = Object.keys(expr.mapping).map(phpString).join(", ");
-        return `\\UI8Kit\\Rt::${fn}(${p(expr.expr)}, ${phpString(expr.fallback)}, ${allowed})`;
-      }
-      const fn = expr.lower ? "mapOrLower" : "mapOr";
-      return `\\UI8Kit\\Rt::${fn}(${p(expr.expr)}, ${phpArrayStr(expr.mapping)}, ${phpString(expr.fallback)})`;
-    }
-    case "intMapOr": {
-      const entries = Object.entries(expr.mapping)
-        .map(([k, v]) => `${k} => ${phpString(v)}`)
-        .join(", ");
-      return `\\UI8Kit\\Rt::intMapOr(${p(expr.expr)}, [${entries}], ${phpString(expr.fallback)})`;
-    }
-    case "cond":
-      return `((${p(expr.test)}) ? ${p(expr.then)} : ${p(expr.else)})`;
-    case "eq":
-      return `(${p(expr.left)} === ${p(expr.right)})`;
-    case "and":
-      return `(${expr.exprs.map(p).join(" && ")})`;
-    case "or":
-      return `(${expr.exprs.map(p).join(" || ")})`;
-    case "not":
-      return `!(${p(expr.expr)})`;
-    case "isSet": {
-      const t = exprType(expr.expr, ctx.env);
-      if (t === "string") return `\\UI8Kit\\Rt::isSetStr(${p(expr.expr)})`;
-      if (t === "int") return `(${p(expr.expr)} > 0)`;
-      return p(expr.expr);
-    }
-    case "contains":
-      return `str_contains(${p(expr.expr)}, ${phpString(expr.substring)})`;
-    case "concat":
-      return `\\UI8Kit\\Rt::concatTrim(${expr.parts.map(p).join(", ")})`;
-    case "boolToString":
-      return `(${p(expr.expr)} ? 'true' : 'false')`;
-    case "intToString":
-      return `(string) (${p(expr.expr)})`;
-  }
-}
diff --git a/src/emitters/php-harness.ts b/src/emitters/php-harness.ts
deleted file mode 100644
index 5b8f071..0000000
--- a/src/emitters/php-harness.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Emits the PHP side of the parity toolchain: `composer.json` (Latte + Twig
- * + the UI8Kit autoload) and two batch render harnesses mirroring
- * `cmd/parity/main.go` — stdin JSON cases in, stdout JSON HTML out.
- */
-
-import { BANNER, type GeneratedFile } from "./common";
-
-export function emitComposerJson(): GeneratedFile {
-  const composer = {
-    description: "Generated UI8Kit PHP runtimes (Latte + Twig). Do not edit.",
-    // vendor-dir lives under php/ so Go tooling never mistakes it for Go
-    // vendoring (generated/ also hosts the Templ module).
-    config: { "vendor-dir": "php/vendor" },
-    require: {
-      php: ">=8.1",
-      "latte/latte": "^3.0",
-      "twig/twig": "^3.0",
-    },
-    autoload: {
-      "psr-4": { "UI8Kit\\": "php/UI8Kit/" },
-    },
-  };
-  return { path: "composer.json", contents: JSON.stringify(composer, null, 2) + "\n" };
-}
-
-/** Latte-only composer.json for theme bundles (no Twig, no parity harness). */
-export function emitLatteBundleComposerJson(): GeneratedFile {
-  const composer = {
-    name: "ui8kit/latte-primitives",
-    description: "Generated UI8Kit Latte primitives. Do not edit — regenerate via @ui8kit/codegen.",
-    type: "library",
-    license: "MIT",
-    config: { "vendor-dir": "php/vendor" },
-    require: {
-      php: ">=8.1",
-      "latte/latte": "^3.0",
-    },
-    autoload: {
-      "psr-4": { "UI8Kit\\": "php/UI8Kit/" },
-    },
-  };
-  return { path: "composer.json", contents: JSON.stringify(composer, null, 2) + "\n" };
-}
-
-export function emitLatteParityHarness(): GeneratedFile {
-  const contents = `<?php
-
-// ${BANNER}
-//
-// Command parity-latte renders generated .latte parts from canonical JSON.
-// stdin:  [{"template":"button/Button.latte","props":{...},"attrs":{},"children":"x"}]
-// stdout: ["<button ...>...</button>", ...]
-
-declare(strict_types=1);
-
-require __DIR__ . '/../../php/vendor/autoload.php';
-
-$engine = new Latte\\Engine();
-$tmp = sys_get_temp_dir() . '/ui8kit-latte-' . md5(__DIR__);
-if (!is_dir($tmp)) {
-    mkdir($tmp, 0777, true);
-}
-$engine->setTempDirectory($tmp);
-$engine->setLoader(new Latte\\Loaders\\FileLoader(__DIR__ . '/../../ui'));
-
-$cases = json_decode(stream_get_contents(STDIN), true, 512, JSON_THROW_ON_ERROR);
-$out = [];
-foreach ($cases as $case) {
-    $params = (array) ($case['props'] ?? []);
-    $params['attrs'] = (array) ($case['attrs'] ?? []);
-    $params['children'] = (string) ($case['children'] ?? '');
-    $out[] = $engine->renderToString($case['template'], $params);
-}
-echo json_encode($out, JSON_THROW_ON_ERROR);
-`;
-  return { path: "cmd/parity-latte/main.php", contents };
-}
-
-export function emitTwigParityHarness(): GeneratedFile {
-  const contents = `<?php
-
-// ${BANNER}
-//
-// Command parity-twig renders generated .html.twig parts from canonical JSON.
-// stdin:  [{"template":"button/Button.html.twig","props":{...},"attrs":{},"children":"x"}]
-// stdout: ["<button ...>...</button>", ...]
-
-declare(strict_types=1);
-
-require __DIR__ . '/../../php/vendor/autoload.php';
-
-$twig = new Twig\\Environment(
-    new Twig\\Loader\\FilesystemLoader(__DIR__ . '/../../ui'),
-    ['autoescape' => 'html', 'strict_variables' => false, 'cache' => false]
-);
-$twig->addExtension(new UI8Kit\\TwigExtension());
-
-$cases = json_decode(stream_get_contents(STDIN), true, 512, JSON_THROW_ON_ERROR);
-$out = [];
-foreach ($cases as $case) {
-    $params = (array) ($case['props'] ?? []);
-    $params['attrs'] = (array) ($case['attrs'] ?? []);
-    $params['children'] = (string) ($case['children'] ?? '');
-    $out[] = $twig->render($case['template'], $params);
-}
-echo json_encode($out, JSON_THROW_ON_ERROR);
-`;
-  return { path: "cmd/parity-twig/main.php", contents };
-}
diff --git a/src/emitters/react.ts b/src/emitters/react.ts
deleted file mode 100644
index f960fd0..0000000
--- a/src/emitters/react.ts
+++ /dev/null
@@ -1,548 +0,0 @@
-/**
- * React emitter — one `<stem>.tsx` per brick, forwardRef components, shared
- * classes helpers, Radix-style `asChild` via Slot where the contract allows.
- */
-
-import type { Expr } from "../domain/expr";
-import {
-  fileStem,
-  type AttrSpec,
-  type BrickDef,
-  type ElementNode,
-  type Node,
-  type PartDef,
-  type TagSpec,
-} from "../domain/model";
-import { localIdent } from "../domain/naming";
-import {
-  BANNER,
-  exprType,
-  indent,
-  makeEnv,
-  usesItem,
-  type Emitter,
-  type GeneratedFile,
-  type TypeEnv,
-} from "./common";
-import { printTsExpr, type TsPrintCtx } from "./ts-expr";
-import {
-  classesHelperName,
-  classSpecProps,
-  declaredProps,
-  neverEmptyString,
-  printInlineClassSpec,
-  isPassthroughForward,
-  variantTypeName,
-  type DeclaredProp,
-} from "./ts-common";
-
-const REACT_ATTR_TYPES: Record<string, [string, string]> = {
-  a: ["AnchorHTMLAttributes", "HTMLAnchorElement"],
-  button: ["ButtonHTMLAttributes", "HTMLButtonElement"],
-  input: ["InputHTMLAttributes", "HTMLInputElement"],
-  textarea: ["TextareaHTMLAttributes", "HTMLTextAreaElement"],
-  select: ["SelectHTMLAttributes", "HTMLSelectElement"],
-  option: ["OptionHTMLAttributes", "HTMLOptionElement"],
-  optgroup: ["OptgroupHTMLAttributes", "HTMLOptGroupElement"],
-  label: ["LabelHTMLAttributes", "HTMLLabelElement"],
-  form: ["FormHTMLAttributes", "HTMLFormElement"],
-  fieldset: ["FieldsetHTMLAttributes", "HTMLFieldSetElement"],
-  legend: ["HTMLAttributes", "HTMLLegendElement"],
-  img: ["ImgHTMLAttributes", "HTMLImageElement"],
-  source: ["SourceHTMLAttributes", "HTMLSourceElement"],
-  picture: ["HTMLAttributes", "HTMLElement"],
-  dialog: ["DialogHTMLAttributes", "HTMLDialogElement"],
-  details: ["DetailsHTMLAttributes", "HTMLDetailsElement"],
-  summary: ["HTMLAttributes", "HTMLElement"],
-  table: ["TableHTMLAttributes", "HTMLTableElement"],
-  caption: ["HTMLAttributes", "HTMLTableCaptionElement"],
-  thead: ["HTMLAttributes", "HTMLTableSectionElement"],
-  tbody: ["HTMLAttributes", "HTMLTableSectionElement"],
-  tfoot: ["HTMLAttributes", "HTMLTableSectionElement"],
-  tr: ["HTMLAttributes", "HTMLTableRowElement"],
-  th: ["ThHTMLAttributes", "HTMLTableCellElement"],
-  td: ["TdHTMLAttributes", "HTMLTableCellElement"],
-  colgroup: ["ColgroupHTMLAttributes", "HTMLTableColElement"],
-  col: ["ColHTMLAttributes", "HTMLTableColElement"],
-  meter: ["MeterHTMLAttributes", "HTMLMeterElement"],
-  progress: ["ProgressHTMLAttributes", "HTMLProgressElement"],
-  output: ["OutputHTMLAttributes", "HTMLOutputElement"],
-  datalist: ["HTMLAttributes", "HTMLDataListElement"],
-  hr: ["HTMLAttributes", "HTMLHRElement"],
-  br: ["HTMLAttributes", "HTMLBRElement"],
-  wbr: ["HTMLAttributes", "HTMLElement"],
-  p: ["HTMLAttributes", "HTMLParagraphElement"],
-  span: ["HTMLAttributes", "HTMLSpanElement"],
-  div: ["HTMLAttributes", "HTMLDivElement"],
-  li: ["LiHTMLAttributes", "HTMLLIElement"],
-  ul: ["HTMLAttributes", "HTMLUListElement"],
-  ol: ["OlHTMLAttributes", "HTMLOListElement"],
-  nav: ["HTMLAttributes", "HTMLElement"],
-  h1: ["HTMLAttributes", "HTMLHeadingElement"],
-  h2: ["HTMLAttributes", "HTMLHeadingElement"],
-  h3: ["HTMLAttributes", "HTMLHeadingElement"],
-  h4: ["HTMLAttributes", "HTMLHeadingElement"],
-  h5: ["HTMLAttributes", "HTMLHeadingElement"],
-  h6: ["HTMLAttributes", "HTMLHeadingElement"],
-};
-
-/** DOM attributes that React types as numbers; printed as number expressions. */
-const NUMERIC_DOM_ATTRS = new Set(["colspan", "rowspan", "span", "rows", "cols"]);
-
-/**
- * Rewrite a string-typed expression into its numeric counterpart when it is a
- * stringified integer (React numeric DOM props render identically).
- */
-function asNumberExpr(expr: Expr): Expr | undefined {
-  switch (expr.kind) {
-    case "intToString":
-      return expr.expr;
-    case "lit":
-      if (typeof expr.value === "string" && /^\d+$/.test(expr.value)) {
-        return { kind: "lit", value: Number(expr.value) };
-      }
-      return typeof expr.value === "number" ? expr : undefined;
-    case "cond": {
-      const thenExpr = asNumberExpr(expr.then);
-      const elseExpr = asNumberExpr(expr.else);
-      if (!thenExpr || !elseExpr) return undefined;
-      return { ...expr, then: thenExpr, else: elseExpr };
-    }
-    default:
-      return undefined;
-  }
-}
-
-/** DOM attribute → React JSX prop name. */
-function reactAttrName(name: string): string {
-  const special: Record<string, string> = {
-    class: "className",
-    for: "htmlFor",
-    tabindex: "tabIndex",
-    srcset: "srcSet",
-    colspan: "colSpan",
-    rowspan: "rowSpan",
-    fetchpriority: "fetchPriority",
-    autocomplete: "autoComplete",
-    enctype: "encType",
-    novalidate: "noValidate",
-    datetime: "dateTime",
-  };
-  return special[name] ?? name;
-}
-
-interface PartEmit {
-  code: string;
-  helperImports: Set<string>;
-  usesResolveTag: boolean;
-  usesTitleTag: boolean;
-  usesCn: boolean;
-  sharedImports: Set<string>;
-  reactTypeImports: Set<string>;
-  usesSlot: boolean;
-  usesElementType: boolean;
-  usesRefCast: boolean;
-  usesSvgProps: boolean;
-}
-
-function rootElements(node: Node): ElementNode[] {
-  switch (node.kind) {
-    case "element":
-      return [node];
-    case "when":
-      return [...node.then.flatMap(rootElements), ...(node.else ?? []).flatMap(rootElements)];
-    default:
-      return [];
-  }
-}
-
-function staticTagOf(tag: TagSpec): string | undefined {
-  return tag.kind === "static" ? tag.tag : undefined;
-}
-
-export class ReactEmitter implements Emitter {
-  readonly runtime = "react" as const;
-
-  constructor(private readonly utilsPath = "../../utils") {}
-
-  emit(brick: BrickDef): GeneratedFile[] {
-    const parts = brick.parts.map((part) => this.emitPart(brick, part));
-
-    const helperImports = new Set<string>(parts.flatMap((p) => [...p.helperImports]));
-    const sharedImports = new Set<string>(parts.flatMap((p) => [...p.sharedImports]));
-    const reactTypeImports = new Set<string>(parts.flatMap((p) => [...p.reactTypeImports]));
-    const usesResolveTag = parts.some((p) => p.usesResolveTag);
-    const usesTitleTag = parts.some((p) => p.usesTitleTag);
-    const usesCn = parts.some((p) => p.usesCn);
-    const usesSlot = parts.some((p) => p.usesSlot);
-    const usesElementType = parts.some((p) => p.usesElementType);
-    const usesRefCast = parts.some((p) => p.usesRefCast);
-    const usesSvgProps = parts.some((p) => p.usesSvgProps);
-    if (usesTitleTag) helperImports.add("titleTag");
-
-    const lines: string[] = [];
-    lines.push(`// ${BANNER}`);
-    lines.push(`/**`);
-    for (const line of brick.docs.split("\n")) lines.push(` * ${line}`.trimEnd());
-    lines.push(` */`);
-    lines.push(``);
-
-    const reactValueImports = ["forwardRef"];
-    const reactTypes = ["type ReactNode", ...[...reactTypeImports].sort().map((t) => `type ${t}`)];
-    if (usesElementType) reactTypes.push("type ElementType");
-    if (usesRefCast) reactTypes.push("type Ref");
-    if (usesSvgProps) reactTypes.push("type SVGProps");
-    lines.push(`import { ${[...reactValueImports, ...reactTypes].join(", ")} } from "react";`);
-    if (sharedImports.size > 0) {
-      lines.push(
-        `import { ${[...sharedImports].sort().join(", ")} } from "./${fileStem(brick)}.shared";`
-      );
-    }
-    if (usesCn) lines.push(`import { cn } from "${this.utilsPath}";`);
-    if (helperImports.size > 0) {
-      lines.push(`import { ${[...helperImports].sort().join(", ")} } from "${this.utilsPath}/expr";`);
-    }
-    if (usesResolveTag) lines.push(`import { resolveTag, TagGroup } from "${this.utilsPath}/tags";`);
-    if (usesSlot) lines.push(`import { Slot } from "../slot/slot";`);
-    lines.push(``);
-
-    for (const p of parts) {
-      lines.push(p.code);
-      lines.push(``);
-    }
-
-    return [
-      {
-        path: `ui/${brick.dir}/${fileStem(brick)}.tsx`,
-        contents: lines.join("\n").replace(/\n{3,}/g, "\n\n").trimEnd() + "\n",
-      },
-    ];
-  }
-
-  private emitPart(brick: BrickDef, part: PartDef): PartEmit {
-    const env: TypeEnv = makeEnv(brick, part);
-    const decls = declaredProps(brick, part);
-    const helperImports = new Set<string>();
-    const sharedImports = new Set<string>();
-    const reactTypeImports = new Set<string>();
-    const state = {
-      usesResolveTag: false,
-      usesTitleTag: false,
-      usesCn: false,
-      usesSlot: false,
-      usesElementType: false,
-      usesRefCast: false,
-      usesSvgProps: false,
-    };
-
-    const hasChildren = part.props.some((p) => p.type === "children");
-
-    // Root typing.
-    const roots = rootElements(part.render);
-    const rootTags = roots.map((r) => staticTagOf(r.tag));
-    const multiRoot = roots.length > 1;
-    const hasSvgRoot = rootTags.includes("svg");
-    const singleStaticTag =
-      !multiRoot && rootTags.length === 1 && rootTags[0] !== undefined ? rootTags[0] : undefined;
-    const isSvgRoot = singleStaticTag === "svg";
-    const [attrType, elemType] =
-      singleStaticTag && !isSvgRoot
-        ? REACT_ATTR_TYPES[singleStaticTag] ?? ["HTMLAttributes", "HTMLElement"]
-        : ["HTMLAttributes", "HTMLElement"];
-    reactTypeImports.add(attrType);
-    const refType = isSvgRoot
-      ? "SVGSVGElement"
-      : multiRoot && hasSvgRoot
-        ? "HTMLElement | SVGSVGElement"
-        : singleStaticTag
-          ? elemType
-          : "HTMLElement";
-    // Casts are needed when the forwardRef generic is wider than one element.
-    const needsRefCast = multiRoot || singleStaticTag === undefined || isSvgRoot;
-    if (needsRefCast) state.usesRefCast = true;
-
-    // Props type.
-    for (const d of decls) {
-      if (d.def.cva) sharedImports.add(`type ${variantTypeName(part, d.def.cvaKey ?? d.def.name.toLowerCase())}`);
-      if (d.def.type === "items") sharedImports.add(`type ${d.def.itemsOf}`);
-    }
-    const omitKeys = new Set<string>(["className", "children"]);
-    for (const d of decls) omitKeys.add(d.reactName);
-    const propsFields: string[] = decls.map((d) => {
-      const key = /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(d.reactName) ? d.reactName : JSON.stringify(d.reactName);
-      return `  ${key}?: ${d.tsType};`;
-    });
-    propsFields.push(`  className?: string;`);
-    if (hasChildren) propsFields.push(`  children?: ReactNode;`);
-    if (part.asChild) propsFields.push(`  asChild?: boolean;`);
-
-    const genericAttr = attrType === "HTMLAttributes" ? `HTMLAttributes<${elemType}>` : `${attrType}<${elemType}>`;
-    const omit = [...omitKeys].map((k) => JSON.stringify(k)).join(" | ");
-    const propsTypeName = `${part.name}Props`;
-    const propsType =
-      `export type ${propsTypeName} = Omit<${genericAttr}, ${omit}> & {\n` +
-      propsFields.join("\n") +
-      `\n};`;
-
-    // Destructure list.
-    const destructure: string[] = decls.map((d) =>
-      d.reactName === d.local || !/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(d.reactName)
-        ? /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(d.reactName)
-          ? d.reactName
-          : `${JSON.stringify(d.reactName)}: ${d.local}`
-        : `${d.reactName}: ${d.local}`
-    );
-    destructure.push("className");
-    if (hasChildren) destructure.push("children");
-    if (part.asChild) destructure.push("asChild");
-    destructure.push("...rest");
-
-    // Print context.
-    const ctx: TsPrintCtx = {
-      env,
-      propCode: (name) => {
-        if (name === "Class") return "className";
-        const d = decls.find((x) => x.def.name === name);
-        if (!d) throw new Error(`${brick.id}/${part.name}: prop ${name} not declared for React`);
-        return d.local;
-      },
-      itemCode: (field) => `item.${localIdent(field)}`,
-      derivedCode: (name) => `${name}Value`,
-      resolvedTagCode: () => "resolvedTagValue",
-      helpers: helperImports,
-    };
-
-    // Body statements.
-    const body: string[] = [];
-    if (part.classes) {
-      sharedImports.add(classesHelperName(part));
-      const inputs = classSpecProps(part.classes).map((n) => ctx.propCode(n));
-      const args = [...inputs, "className"];
-      body.push(`const cls = ${classesHelperName(part)}({ ${args.map((a) => (a === "className" ? "className" : a)).join(", ")} });`);
-    }
-    for (const [name, expr] of Object.entries(part.derived ?? {})) {
-      if (usesItem(expr, env)) throw new Error(`${brick.id}/${part.name}: derived ${name} uses loop item`);
-      body.push(`const ${name}Value = ${printTsExpr(expr, ctx)};`);
-    }
-
-    // Tag resolution for dynamic roots.
-    const root = part.render;
-    if (root.kind === "element" && root.tag.kind !== "static") {
-      state.usesElementType = true;
-      if (root.tag.kind === "resolved") {
-        state.usesResolveTag = true;
-        const t = root.tag;
-        body.push(
-          `const resolvedTagValue = resolveTag(${ctx.propCode(t.fromProp)}, ${JSON.stringify(t.fallback)}, TagGroup.${t.group});`
-        );
-      } else if (root.tag.kind === "heading") {
-        state.usesTitleTag = true;
-        body.push(`const resolvedTagValue = titleTag(${ctx.propCode(root.tag.fromProp)});`);
-      } else {
-        body.push(`const resolvedTagValue = ${printTsExpr(root.tag.expr, ctx)};`);
-      }
-      body.push(`const Tag = resolvedTagValue as ElementType;`);
-    }
-
-    // asChild branch.
-    const asChildBranch = part.asChild
-      ? `if (asChild) {\n` +
-        `  return (\n` +
-        `    <Slot ref={ref} className={${part.classes ? "cls" : "className"}} {...rest}>\n` +
-        `      {children}\n` +
-        `    </Slot>\n` +
-        `  );\n` +
-        `}\n`
-      : "";
-    if (part.asChild) state.usesSlot = true;
-
-    // JSX.
-    const jsx = this.printNode(root, ctx, part, state, { isRoot: true, needsRefCast });
-
-    const fn =
-      `export const ${part.name} = forwardRef<${refType}, ${propsTypeName}>(function ${part.name}(\n` +
-      `  { ${destructure.join(", ")} },\n` +
-      `  ref\n` +
-      `) {\n` +
-      indent([...body, ""].join("\n"), 1) +
-      (asChildBranch ? indent(asChildBranch, 1) : "") +
-      indent(`return (\n${indent(jsx, 1)}\n);`, 1) +
-      `\n});\n${part.name}.displayName = ${JSON.stringify(part.name)};`;
-
-    const docs = `/**\n${part.docs
-      .split("\n")
-      .map((l) => ` * ${l}`.trimEnd())
-      .join("\n")}\n */`;
-
-    return {
-      code: [docs, propsType, "", fn].join("\n"),
-      helperImports,
-      sharedImports,
-      reactTypeImports,
-      usesResolveTag: state.usesResolveTag,
-      usesTitleTag: state.usesTitleTag,
-      usesCn: state.usesCn,
-      usesSlot: state.usesSlot,
-      usesElementType: state.usesElementType,
-      usesRefCast: state.usesRefCast,
-      usesSvgProps: state.usesSvgProps,
-    };
-  }
-
-  private printAttrs(
-    node: ElementNode,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesCn: boolean; usesSvgProps: boolean },
-    opts: { withRef: boolean; refCast?: string; svgCast?: boolean; inLoop: boolean }
-  ): string {
-    const out: string[] = [];
-    if (opts.withRef) {
-      out.push(opts.refCast ? `ref={ref as Ref<${opts.refCast}>}` : `ref={ref}`);
-    }
-    for (const attr of node.attrs) {
-      out.push(this.printAttr(attr, ctx, part, state, opts));
-    }
-    return out.filter(Boolean).join(" ");
-  }
-
-  private printAttr(
-    attr: AttrSpec,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesCn: boolean; usesSvgProps: boolean },
-    opts: { svgCast?: boolean; inLoop: boolean }
-  ): string {
-    switch (attr.kind) {
-      case "static":
-        return `${reactAttrName(attr.name)}=${JSON.stringify(attr.value)}`;
-      case "expr": {
-        if (isPassthroughForward(attr, part)) return "";
-        const name = reactAttrName(attr.name);
-        let exprToPrint = attr.expr;
-        if (NUMERIC_DOM_ATTRS.has(attr.name)) {
-          exprToPrint = asNumberExpr(attr.expr) ?? attr.expr;
-        }
-        const value = printTsExpr(exprToPrint, ctx);
-        const t = exprType(exprToPrint, ctx.env);
-        if (attr.when) {
-          return `${name}={${printTsExpr(attr.when, ctx)} ? ${value} : undefined}`;
-        }
-        if (attr.keepEmpty && t === "string") {
-          return `${name}={(${value}) ?? ""}`;
-        }
-        if (t !== "string" || neverEmptyString(attr.expr, ctx.env)) {
-          return `${name}={${value}}`;
-        }
-        ctx.helpers.add("orUndef");
-        return `${name}={orUndef(${value})}`;
-      }
-      case "bool":
-        return `${reactAttrName(attr.name)}={${printTsExpr(attr.expr, ctx)} || undefined}`;
-      case "class": {
-        if (!attr.spec) return `className={cls || undefined}`;
-        state.usesCn = true;
-        const inline = printInlineClassSpec(attr.spec, ctx, () =>
-          part.props.some((p) => p.name === "Class") && !opts.inLoop ? "className" : undefined
-        );
-        return `className={${inline} || undefined}`;
-      }
-      case "rest":
-        if (opts.svgCast) {
-          state.usesSvgProps = true;
-          return `{...(rest as SVGProps<SVGSVGElement>)}`;
-        }
-        return `{...rest}`;
-    }
-  }
-
-  private printNode(
-    node: Node,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: {
-      usesResolveTag: boolean;
-      usesTitleTag: boolean;
-      usesCn: boolean;
-      usesSlot: boolean;
-      usesElementType: boolean;
-      usesRefCast: boolean;
-      usesSvgProps: boolean;
-    },
-    opts: { isRoot?: boolean; needsRefCast?: boolean; inLoop?: boolean } = {}
-  ): string {
-    switch (node.kind) {
-      case "element": {
-        const tagCode =
-          node.tag.kind === "static"
-            ? node.tag.tag
-            : opts.isRoot
-              ? "Tag"
-              : (() => {
-                  throw new Error(`${part.name}: dynamic tags only supported at part root`);
-                })();
-        const isSvg = node.tag.kind === "static" && node.tag.tag === "svg";
-        const refCast = opts.needsRefCast
-          ? isSvg
-            ? "SVGSVGElement"
-            : "HTMLElement"
-          : undefined;
-        const attrs = this.printAttrs(node, ctx, part, state, {
-          withRef: opts.isRoot === true,
-          refCast,
-          svgCast: isSvg,
-          inLoop: opts.inLoop === true,
-        });
-        let open = attrs.length > 0 ? `<${tagCode} ${attrs}` : `<${tagCode}`;
-        // React forbids children on <textarea>; the content contract maps to
-        // defaultValue (uncontrolled initial value, same SSR output).
-        if (tagCode === "textarea" && node.children.length === 1 && node.children[0]!.kind === "text") {
-          const value = printTsExpr((node.children[0] as { expr: Expr }).expr, ctx);
-          open += ` defaultValue={(${value}) ?? ""}`;
-          return `${open} />`;
-        }
-        if (node.void || node.children.length === 0) return `${open} />`;
-        const children = node.children
-          .map((c) => this.printNode(c, ctx, part, state, { inLoop: opts.inLoop }))
-          .join("\n");
-        return `${open}>\n${indent(children, 1)}\n</${tagCode}>`;
-      }
-      case "slot":
-        return `{children}`;
-      case "text":
-        return `{${printTsExpr(node.expr, ctx)}}`;
-      case "when": {
-        const test = printTsExpr(node.test, ctx);
-        const inner = { ...opts, isRoot: opts.isRoot };
-        const thenCode = this.wrapFragment(
-          node.then.map((c) => this.printNode(c, ctx, part, state, inner))
-        );
-        const elseCode =
-          node.else && node.else.length > 0
-            ? this.wrapFragment(node.else.map((c) => this.printNode(c, ctx, part, state, inner)))
-            : "null";
-        const ternary = `${test} ? (\n${indent(thenCode, 1)}\n) : ${
-          elseCode === "null" ? "null" : `(\n${indent(elseCode, 1)}\n)`
-        }`;
-        // At part root the ternary is the returned expression itself; as a
-        // child it must be wrapped in JSX braces.
-        return opts.isRoot ? ternary : `{${ternary}}`;
-      }
-      case "forEach": {
-        const itemsProp = part.props.find((p) => p.name === node.itemsProp)!;
-        const itemsCode = ctx.propCode(itemsProp.name);
-        const body = node.body.map((c) =>
-          this.printNode(c, ctx, part, state, { inLoop: true })
-        );
-        // Attach key to the outermost element of the loop body.
-        const bodyCode = this.wrapFragment(body).replace(/^<([a-zA-Z0-9]+)(\s|>)/, `<$1 key={index}$2`);
-        return `{(${itemsCode} ?? []).map((item, index) => (\n${indent(bodyCode, 1)}\n))}`;
-      }
-    }
-  }
-
-  private wrapFragment(parts: string[]): string {
-    if (parts.length === 1) return parts[0]!;
-    return `<>\n${indent(parts.join("\n"), 1)}\n</>`;
-  }
-}
diff --git a/src/emitters/solid.ts b/src/emitters/solid.ts
deleted file mode 100644
index 067966a..0000000
--- a/src/emitters/solid.ts
+++ /dev/null
@@ -1,538 +0,0 @@
-/**
- * SolidJS emitter — one `<stem>.solid.tsx` per brick (avoids colliding with
- * React's `<stem>.tsx`). Presentation-only components using `splitProps`,
- * `Dynamic` for polymorphic roots, and the shared classes helpers.
- *
- * Composition: no Radix-style `asChild` (React-only). Callers style another
- * element via `buttonClasses()` / `*Classes()` — same substitute as Svelte/Vue.
- */
-
-import type { Expr } from "../domain/expr";
-import {
-  fileStem,
-  type AttrSpec,
-  type BrickDef,
-  type ElementNode,
-  type Node,
-  type PartDef,
-  type TagSpec,
-} from "../domain/model";
-import { localIdent } from "../domain/naming";
-import {
-  BANNER,
-  exprType,
-  indent,
-  makeEnv,
-  usesItem,
-  type Emitter,
-  type GeneratedFile,
-  type TypeEnv,
-} from "./common";
-import { printTsExpr, type TsPrintCtx } from "./ts-expr";
-import {
-  classesHelperName,
-  classSpecProps,
-  declaredProps,
-  neverEmptyString,
-  printInlineClassSpec,
-  isPassthroughForward,
-  variantTypeName,
-} from "./ts-common";
-
-/** Solid JSX attribute types for common roots (from solid-js JSX namespace). */
-const SOLID_ATTR_TYPES: Record<string, [string, string]> = {
-  a: ["AnchorHTMLAttributes", "HTMLAnchorElement"],
-  button: ["ButtonHTMLAttributes", "HTMLButtonElement"],
-  input: ["InputHTMLAttributes", "HTMLInputElement"],
-  textarea: ["TextareaHTMLAttributes", "HTMLTextAreaElement"],
-  select: ["SelectHTMLAttributes", "HTMLSelectElement"],
-  option: ["OptionHTMLAttributes", "HTMLOptionElement"],
-  optgroup: ["OptgroupHTMLAttributes", "HTMLOptGroupElement"],
-  label: ["LabelHTMLAttributes", "HTMLLabelElement"],
-  form: ["FormHTMLAttributes", "HTMLFormElement"],
-  fieldset: ["FieldsetHTMLAttributes", "HTMLFieldSetElement"],
-  legend: ["HTMLAttributes", "HTMLLegendElement"],
-  img: ["ImgHTMLAttributes", "HTMLImageElement"],
-  source: ["SourceHTMLAttributes", "HTMLSourceElement"],
-  picture: ["HTMLAttributes", "HTMLElement"],
-  dialog: ["DialogHtmlAttributes", "HTMLDialogElement"],
-  details: ["DetailsHtmlAttributes", "HTMLDetailsElement"],
-  summary: ["HTMLAttributes", "HTMLElement"],
-  table: ["HTMLAttributes", "HTMLTableElement"],
-  caption: ["HTMLAttributes", "HTMLTableCaptionElement"],
-  thead: ["HTMLAttributes", "HTMLTableSectionElement"],
-  tbody: ["HTMLAttributes", "HTMLTableSectionElement"],
-  tfoot: ["HTMLAttributes", "HTMLTableSectionElement"],
-  tr: ["HTMLAttributes", "HTMLTableRowElement"],
-  th: ["ThHTMLAttributes", "HTMLTableCellElement"],
-  td: ["TdHTMLAttributes", "HTMLTableCellElement"],
-  colgroup: ["ColgroupHTMLAttributes", "HTMLTableColElement"],
-  col: ["ColHTMLAttributes", "HTMLTableColElement"],
-  meter: ["MeterHTMLAttributes", "HTMLMeterElement"],
-  progress: ["ProgressHTMLAttributes", "HTMLProgressElement"],
-  output: ["OutputHTMLAttributes", "HTMLOutputElement"],
-  datalist: ["HTMLAttributes", "HTMLDataListElement"],
-  hr: ["HTMLAttributes", "HTMLHRElement"],
-  br: ["HTMLAttributes", "HTMLBRElement"],
-  wbr: ["HTMLAttributes", "HTMLElement"],
-  p: ["HTMLAttributes", "HTMLParagraphElement"],
-  span: ["HTMLAttributes", "HTMLSpanElement"],
-  div: ["HTMLAttributes", "HTMLDivElement"],
-  li: ["LiHTMLAttributes", "HTMLLIElement"],
-  ul: ["HTMLAttributes", "HTMLUListElement"],
-  ol: ["OlHTMLAttributes", "HTMLOListElement"],
-  nav: ["HTMLAttributes", "HTMLElement"],
-  h1: ["HTMLAttributes", "HTMLHeadingElement"],
-  h2: ["HTMLAttributes", "HTMLHeadingElement"],
-  h3: ["HTMLAttributes", "HTMLHeadingElement"],
-  h4: ["HTMLAttributes", "HTMLHeadingElement"],
-  h5: ["HTMLAttributes", "HTMLHeadingElement"],
-  h6: ["HTMLAttributes", "HTMLHeadingElement"],
-};
-
-const NUMERIC_DOM_ATTRS = new Set(["colspan", "rowspan", "span", "rows", "cols"]);
-
-function asNumberExpr(expr: Expr): Expr | undefined {
-  switch (expr.kind) {
-    case "intToString":
-      return expr.expr;
-    case "lit":
-      if (typeof expr.value === "string" && /^\d+$/.test(expr.value)) {
-        return { kind: "lit", value: Number(expr.value) };
-      }
-      return typeof expr.value === "number" ? expr : undefined;
-    case "cond": {
-      const thenExpr = asNumberExpr(expr.then);
-      const elseExpr = asNumberExpr(expr.else);
-      if (!thenExpr || !elseExpr) return undefined;
-      return { ...expr, then: thenExpr, else: elseExpr };
-    }
-    default:
-      return undefined;
-  }
-}
-
-/**
- * DOM attribute → Solid JSX prop. Prefer HTML-native `class` / `for`; keep
- * React-style camelCase for the rest (Solid's JSX namespace accepts both).
- */
-function solidAttrName(name: string): string {
-  const special: Record<string, string> = {
-    class: "class",
-    for: "for",
-    tabindex: "tabIndex",
-    srcset: "srcSet",
-    colspan: "colSpan",
-    rowspan: "rowSpan",
-    fetchpriority: "fetchPriority",
-    autocomplete: "autoComplete",
-    enctype: "encType",
-    novalidate: "noValidate",
-    datetime: "dateTime",
-  };
-  return special[name] ?? name;
-}
-
-interface PartEmit {
-  code: string;
-  helperImports: Set<string>;
-  sharedImports: Set<string>;
-  jsxAttrImports: Set<string>;
-  usesResolveTag: boolean;
-  usesTitleTag: boolean;
-  usesCn: boolean;
-  usesDynamic: boolean;
-}
-
-function rootElements(node: Node): ElementNode[] {
-  switch (node.kind) {
-    case "element":
-      return [node];
-    case "when":
-      return [...node.then.flatMap(rootElements), ...(node.else ?? []).flatMap(rootElements)];
-    default:
-      return [];
-  }
-}
-
-function staticTagOf(tag: TagSpec): string | undefined {
-  return tag.kind === "static" ? tag.tag : undefined;
-}
-
-export class SolidEmitter implements Emitter {
-  readonly runtime = "solid" as const;
-
-  constructor(private readonly utilsPath = "../../utils") {}
-
-  emit(brick: BrickDef): GeneratedFile[] {
-    const parts = brick.parts.map((part) => this.emitPart(brick, part));
-
-    const helperImports = new Set<string>(parts.flatMap((p) => [...p.helperImports]));
-    const sharedImports = new Set<string>(parts.flatMap((p) => [...p.sharedImports]));
-    const jsxAttrImports = new Set<string>(parts.flatMap((p) => [...p.jsxAttrImports]));
-    const usesResolveTag = parts.some((p) => p.usesResolveTag);
-    const usesTitleTag = parts.some((p) => p.usesTitleTag);
-    const usesCn = parts.some((p) => p.usesCn);
-    const usesDynamic = parts.some((p) => p.usesDynamic);
-    if (usesTitleTag) helperImports.add("titleTag");
-
-    const lines: string[] = [];
-    lines.push(`// ${BANNER}`);
-    lines.push(`/**`);
-    for (const line of brick.docs.split("\n")) lines.push(` * ${line}`.trimEnd());
-    lines.push(` */`);
-    lines.push(``);
-
-    lines.push(`import { splitProps, type JSX, type Component } from "solid-js";`);
-    if (usesDynamic) {
-      lines.push(`import { Dynamic } from "solid-js/web";`);
-    }
-    if (jsxAttrImports.size > 0) {
-      // Types come from solid-js JSX namespace — reference via JSX.* below.
-    }
-    if (sharedImports.size > 0) {
-      lines.push(
-        `import { ${[...sharedImports].sort().join(", ")} } from "./${fileStem(brick)}.shared";`
-      );
-    }
-    if (usesCn) lines.push(`import { cn } from "${this.utilsPath}";`);
-    if (helperImports.size > 0) {
-      lines.push(`import { ${[...helperImports].sort().join(", ")} } from "${this.utilsPath}/expr";`);
-    }
-    if (usesResolveTag) lines.push(`import { resolveTag, TagGroup } from "${this.utilsPath}/tags";`);
-    lines.push(``);
-
-    for (const p of parts) {
-      lines.push(p.code);
-      lines.push(``);
-    }
-
-    return [
-      {
-        path: `ui/${brick.dir}/${fileStem(brick)}.solid.tsx`,
-        contents: lines.join("\n").replace(/\n{3,}/g, "\n\n").trimEnd() + "\n",
-      },
-    ];
-  }
-
-  private emitPart(brick: BrickDef, part: PartDef): PartEmit {
-    const env: TypeEnv = makeEnv(brick, part);
-    const decls = declaredProps(brick, part);
-    const helperImports = new Set<string>();
-    const sharedImports = new Set<string>();
-    const jsxAttrImports = new Set<string>();
-    const state = {
-      usesResolveTag: false,
-      usesTitleTag: false,
-      usesCn: false,
-      usesDynamic: false,
-    };
-
-    const hasChildren = part.props.some((p) => p.type === "children");
-
-    const roots = rootElements(part.render);
-    const rootTags = roots.map((r) => staticTagOf(r.tag));
-    const multiRoot = roots.length > 1;
-    const singleStaticTag =
-      !multiRoot && rootTags.length === 1 && rootTags[0] !== undefined ? rootTags[0] : undefined;
-    const isSvgRoot = singleStaticTag === "svg";
-    const [attrType] =
-      singleStaticTag && !isSvgRoot
-        ? SOLID_ATTR_TYPES[singleStaticTag] ?? ["HTMLAttributes", "HTMLElement"]
-        : ["HTMLAttributes", "HTMLElement"];
-    jsxAttrImports.add(attrType);
-
-    for (const d of decls) {
-      if (d.def.cva) {
-        sharedImports.add(
-          `type ${variantTypeName(part, d.def.cvaKey ?? d.def.name.toLowerCase())}`
-        );
-      }
-      if (d.def.type === "items") sharedImports.add(`type ${d.def.itemsOf}`);
-    }
-
-    // Prop API: camelCase like React for variants; `class` (HTML-native) primary,
-    // `className` accepted as alias for React migrants.
-    const omitKeys = new Set<string>(["class", "className", "children"]);
-    for (const d of decls) omitKeys.add(d.reactName);
-
-    const propsFields: string[] = decls.map((d) => {
-      const key = /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(d.reactName)
-        ? d.reactName
-        : JSON.stringify(d.reactName);
-      return `  ${key}?: ${d.tsType};`;
-    });
-    propsFields.push(`  class?: string;`);
-    propsFields.push(`  className?: string;`);
-    if (hasChildren) propsFields.push(`  children?: JSX.Element;`);
-
-    const genericAttr =
-      attrType === "HTMLAttributes"
-        ? `JSX.HTMLAttributes<HTMLElement>`
-        : isSvgRoot
-          ? `JSX.SvgSVGAttributes<SVGSVGElement>`
-          : `JSX.${attrType}<HTMLElement>`;
-    // Narrower element generics are hard across polymorphic roots; HTMLElement is safe.
-    const elemGeneric =
-      singleStaticTag && SOLID_ATTR_TYPES[singleStaticTag] && !isSvgRoot
-        ? SOLID_ATTR_TYPES[singleStaticTag]![1]
-        : isSvgRoot
-          ? "SVGSVGElement"
-          : "HTMLElement";
-    const attrGeneric =
-      attrType === "HTMLAttributes"
-        ? `JSX.HTMLAttributes<${elemGeneric}>`
-        : isSvgRoot
-          ? `JSX.SvgSVGAttributes<SVGSVGElement>`
-          : `JSX.${attrType}<${elemGeneric}>`;
-
-    void genericAttr; // kept for clarity; attrGeneric is the real one
-
-    const omit = [...omitKeys].map((k) => JSON.stringify(k)).join(" | ");
-    const propsTypeName = `${part.name}Props`;
-    const propsType =
-      `export type ${propsTypeName} = Omit<${attrGeneric}, ${omit}> & {\n` +
-      propsFields.join("\n") +
-      `\n};`;
-
-    const splitKeys: string[] = decls.map((d) => JSON.stringify(d.reactName));
-    splitKeys.push(`"class"`, `"className"`);
-    if (hasChildren) splitKeys.push(`"children"`);
-
-    const localAccess = (reactName: string, local: string): string => {
-      // Hyphenated / reserved names need bracket access on the split local object.
-      if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(reactName) && reactName === local) {
-        return `local.${local}`;
-      }
-      return `local[${JSON.stringify(reactName)}]`;
-    };
-
-    const ctx: TsPrintCtx = {
-      env,
-      propCode: (name) => {
-        if (name === "Class") return `(local.class ?? local.className)`;
-        const d = decls.find((x) => x.def.name === name);
-        if (!d) throw new Error(`${brick.id}/${part.name}: prop ${name} not declared for Solid`);
-        return localAccess(d.reactName, d.local);
-      },
-      itemCode: (field) => `item.${localIdent(field)}`,
-      derivedCode: (name) => `${name}Value()`,
-      resolvedTagCode: () => "resolvedTagValue()",
-      helpers: helperImports,
-    };
-
-    const body: string[] = [];
-    // Derived values as accessors so they stay reactive under Solid.
-    for (const [name, expr] of Object.entries(part.derived ?? {})) {
-      if (usesItem(expr, env)) throw new Error(`${brick.id}/${part.name}: derived ${name} uses loop item`);
-      body.push(`const ${name}Value = () => ${printTsExpr(expr, ctx)};`);
-    }
-
-    const root = part.render;
-    if (root.kind === "element" && root.tag.kind !== "static") {
-      state.usesDynamic = true;
-      if (root.tag.kind === "resolved") {
-        state.usesResolveTag = true;
-        const t = root.tag;
-        body.push(
-          `const resolvedTagValue = () => resolveTag(${ctx.propCode(t.fromProp)}, ${JSON.stringify(t.fallback)}, TagGroup.${t.group});`
-        );
-      } else if (root.tag.kind === "heading") {
-        state.usesTitleTag = true;
-        body.push(`const resolvedTagValue = () => titleTag(${ctx.propCode(root.tag.fromProp)});`);
-      } else {
-        body.push(`const resolvedTagValue = () => ${printTsExpr(root.tag.expr, ctx)};`);
-      }
-    }
-
-    if (part.classes) {
-      sharedImports.add(classesHelperName(part));
-      const inputs = classSpecProps(part.classes).map((n) => ctx.propCode(n));
-      const argList = [
-        ...inputs.map((a, i) => {
-          const propName = classSpecProps(part.classes!)[i]!;
-          const d = decls.find((x) => x.def.name === propName);
-          const key = d?.local ?? localIdent(propName);
-          return `${key}: ${a}`;
-        }),
-        `className: local.class ?? local.className`,
-      ];
-      body.push(`const cls = () => ${classesHelperName(part)}({ ${argList.join(", ")} });`);
-    }
-
-    const jsx = this.printNode(root, ctx, part, state, { isRoot: true });
-
-    const fn =
-      `export const ${part.name}: Component<${propsTypeName}> = (props) => {\n` +
-      indent(`const [local, rest] = splitProps(props, [${splitKeys.join(", ")}]);`, 1) +
-      "\n" +
-      indent([...body, ""].join("\n"), 1) +
-      indent(`return (\n${indent(jsx, 1)}\n);`, 1) +
-      `\n};`;
-
-    const docs = `/**\n${part.docs
-      .split("\n")
-      .map((l) => ` * ${l}`.trimEnd())
-      .join("\n")}\n */`;
-
-    return {
-      code: [docs, propsType, "", fn].join("\n"),
-      helperImports,
-      sharedImports,
-      jsxAttrImports,
-      usesResolveTag: state.usesResolveTag,
-      usesTitleTag: state.usesTitleTag,
-      usesCn: state.usesCn,
-      usesDynamic: state.usesDynamic,
-    };
-  }
-
-  private printAttrs(
-    node: ElementNode,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesCn: boolean },
-    opts: { withRest: boolean; dynamicComponent?: boolean; inLoop: boolean }
-  ): string {
-    const out: string[] = [];
-    if (opts.dynamicComponent) {
-      out.push(`component={resolvedTagValue()}`);
-    }
-    for (const attr of node.attrs) {
-      out.push(this.printAttr(attr, ctx, part, state, opts));
-    }
-    return out.filter(Boolean).join(" ");
-  }
-
-  private printAttr(
-    attr: AttrSpec,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesCn: boolean },
-    opts: { withRest: boolean; inLoop: boolean }
-  ): string {
-    switch (attr.kind) {
-      case "static":
-        return `${solidAttrName(attr.name)}=${JSON.stringify(attr.value)}`;
-      case "expr": {
-        if (isPassthroughForward(attr, part)) return "";
-        const name = solidAttrName(attr.name);
-        let exprToPrint = attr.expr;
-        if (NUMERIC_DOM_ATTRS.has(attr.name)) {
-          exprToPrint = asNumberExpr(attr.expr) ?? attr.expr;
-        }
-        const value = printTsExpr(exprToPrint, ctx);
-        const t = exprType(exprToPrint, ctx.env);
-        if (attr.when) {
-          return `${name}={${printTsExpr(attr.when, ctx)} ? ${value} : undefined}`;
-        }
-        if (attr.keepEmpty && t === "string") {
-          return `${name}={(${value}) ?? ""}`;
-        }
-        if (t !== "string" || neverEmptyString(attr.expr, ctx.env)) {
-          return `${name}={${value}}`;
-        }
-        ctx.helpers.add("orUndef");
-        return `${name}={orUndef(${value})}`;
-      }
-      case "bool":
-        return `${solidAttrName(attr.name)}={${printTsExpr(attr.expr, ctx)} || undefined}`;
-      case "class": {
-        if (!attr.spec) return `class={cls() || undefined}`;
-        state.usesCn = true;
-        const inline = printInlineClassSpec(attr.spec, ctx, () =>
-          part.props.some((p) => p.name === "Class") && !opts.inLoop
-            ? `(local.class ?? local.className)`
-            : undefined
-        );
-        return `class={${inline} || undefined}`;
-      }
-      case "rest":
-        return opts.withRest ? `{...rest}` : "";
-    }
-  }
-
-  private printNode(
-    node: Node,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: {
-      usesResolveTag: boolean;
-      usesTitleTag: boolean;
-      usesCn: boolean;
-      usesDynamic: boolean;
-    },
-    opts: { isRoot?: boolean; inLoop?: boolean } = {}
-  ): string {
-    switch (node.kind) {
-      case "element": {
-        const isDynamic = node.tag.kind !== "static";
-        if (isDynamic && !opts.isRoot) {
-          throw new Error(`${part.name}: dynamic tags only supported at part root`);
-        }
-        const tagCode = node.tag.kind === "static" ? node.tag.tag : "Dynamic";
-        if (isDynamic) state.usesDynamic = true;
-
-        const attrs = this.printAttrs(node, ctx, part, state, {
-          withRest: opts.isRoot === true,
-          dynamicComponent: isDynamic,
-          inLoop: opts.inLoop === true,
-        });
-        let open = attrs.length > 0 ? `<${tagCode} ${attrs}` : `<${tagCode}`;
-
-        // Controlled `value` for client updates; empty string is stripped in
-        // parity normalizeHtml so SSR DOM matches runtimes that use children.
-        if (
-          !isDynamic &&
-          tagCode === "textarea" &&
-          node.children.length === 1 &&
-          node.children[0]!.kind === "text"
-        ) {
-          const value = printTsExpr((node.children[0] as { expr: Expr }).expr, ctx);
-          open += ` value={(${value}) ?? ""}`;
-          return `${open} />`;
-        }
-        if (node.void || node.children.length === 0) return `${open} />`;
-        const children = node.children
-          .map((c) => this.printNode(c, ctx, part, state, { inLoop: opts.inLoop }))
-          .join("\n");
-        const close = isDynamic ? "Dynamic" : tagCode;
-        return `${open}>\n${indent(children, 1)}\n</${close}>`;
-      }
-      case "slot":
-        return `{local.children}`;
-      case "text":
-        return `{${printTsExpr(node.expr, ctx)}}`;
-      case "when": {
-        const test = printTsExpr(node.test, ctx);
-        const inner = { ...opts, isRoot: opts.isRoot };
-        const thenCode = this.wrapFragment(
-          node.then.map((c) => this.printNode(c, ctx, part, state, inner))
-        );
-        const elseCode =
-          node.else && node.else.length > 0
-            ? this.wrapFragment(node.else.map((c) => this.printNode(c, ctx, part, state, inner)))
-            : "null";
-        const ternary = `${test} ? (\n${indent(thenCode, 1)}\n) : ${
-          elseCode === "null" ? "null" : `(\n${indent(elseCode, 1)}\n)`
-        }`;
-        return opts.isRoot ? ternary : `{${ternary}}`;
-      }
-      case "forEach": {
-        const itemsProp = part.props.find((p) => p.name === node.itemsProp)!;
-        const itemsCode = ctx.propCode(itemsProp.name);
-        const body = node.body.map((c) =>
-          this.printNode(c, ctx, part, state, { inLoop: true })
-        );
-        const bodyCode = this.wrapFragment(body);
-        // Solid: .map is fine for SSR parity; keys help reconciliation on client.
-        return `{(${itemsCode} ?? []).map((item, index) => (\n${indent(bodyCode, 1)}\n))}`;
-      }
-    }
-  }
-
-  private wrapFragment(parts: string[]): string {
-    if (parts.length === 1) return parts[0]!;
-    return `<>\n${indent(parts.join("\n"), 1)}\n</>`;
-  }
-}
diff --git a/src/emitters/svelte.ts b/src/emitters/svelte.ts
deleted file mode 100644
index 3deedc4..0000000
--- a/src/emitters/svelte.ts
+++ /dev/null
@@ -1,306 +0,0 @@
-/**
- * Svelte 5 emitter — one PascalCase `.svelte` file per part (runes mode,
- * snippets for children, `<svelte:element>` for resolved tags, HTML-native
- * prop names: `class`, `for`, `aria-label`).
- */
-
-import {
-  fileStem,
-  type AttrSpec,
-  type BrickDef,
-  type ElementNode,
-  type Node,
-  type PartDef,
-} from "../domain/model";
-import { localIdent } from "../domain/naming";
-import {
-  BANNER,
-  exprType,
-  indent,
-  makeEnv,
-  usesItem,
-  type Emitter,
-  type GeneratedFile,
-  type TypeEnv,
-} from "./common";
-import { printTsExpr, type TsPrintCtx } from "./ts-expr";
-import {
-  classesHelperName,
-  classSpecProps,
-  declaredProps,
-  neverEmptyString,
-  printInlineClassSpec,
-  isPassthroughForward,
-  variantTypeName,
-} from "./ts-common";
-
-const IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
-
-export class SvelteEmitter implements Emitter {
-  readonly runtime = "svelte" as const;
-
-  constructor(private readonly utilsPath = "../../utils") {}
-
-  emit(brick: BrickDef): GeneratedFile[] {
-    return brick.parts.map((part) => this.emitPart(brick, part));
-  }
-
-  private emitPart(brick: BrickDef, part: PartDef): GeneratedFile {
-    const env: TypeEnv = makeEnv(brick, part);
-    const decls = declaredProps(brick, part);
-    const helperImports = new Set<string>();
-    const sharedValueImports = new Set<string>();
-    const sharedTypeImports = new Set<string>();
-    const state = { usesResolveTag: false, usesTitleTag: false, usesCn: false };
-    const hasChildren = part.props.some((p) => p.type === "children");
-
-    for (const d of decls) {
-      if (d.def.cva) sharedTypeImports.add(variantTypeName(part, d.def.cvaKey ?? d.def.name.toLowerCase()));
-      if (d.def.type === "items") sharedTypeImports.add(d.def.itemsOf!);
-    }
-
-    // Props type (module script).
-    const typeFields: string[] = decls.map((d) => {
-      const key = IDENT_RE.test(d.htmlName) ? d.htmlName : JSON.stringify(d.htmlName);
-      return `  ${key}?: ${d.tsType};`;
-    });
-    typeFields.push(`  class?: string;`);
-    if (hasChildren) typeFields.push(`  children?: Snippet;`);
-    typeFields.push(`  [key: string]: unknown;`);
-
-    // Destructure.
-    const destructure: string[] = decls.map((d) => {
-      if (!IDENT_RE.test(d.htmlName)) return `${JSON.stringify(d.htmlName)}: ${d.local}`;
-      return d.htmlName === d.local ? d.htmlName : `${d.htmlName}: ${d.local}`;
-    });
-    destructure.push(`class: className`);
-    if (hasChildren) destructure.push("children");
-    destructure.push("...rest");
-
-    const ctx: TsPrintCtx = {
-      env,
-      propCode: (name) => {
-        if (name === "Class") return "className";
-        const d = decls.find((x) => x.def.name === name);
-        if (!d) throw new Error(`${brick.id}/${part.name}: prop ${name} not declared for Svelte`);
-        return d.local;
-      },
-      itemCode: (field) => `item.${localIdent(field)}`,
-      derivedCode: (name) => `${name}Value`,
-      resolvedTagCode: () => "resolvedTagValue",
-      helpers: helperImports,
-    };
-
-    const body: string[] = [];
-    if (part.classes) {
-      sharedValueImports.add(classesHelperName(part));
-      const inputs = classSpecProps(part.classes).map((n) => ctx.propCode(n));
-      body.push(
-        `const cls = $derived(${classesHelperName(part)}({ ${[...inputs, "className"].join(", ")} }));`
-      );
-    }
-    for (const [name, expr] of Object.entries(part.derived ?? {})) {
-      if (usesItem(expr, env)) throw new Error(`${brick.id}/${part.name}: derived ${name} uses loop item`);
-      body.push(`const ${name}Value = $derived(${printTsExpr(expr, ctx)});`);
-    }
-
-    const root = part.render;
-    if (root.kind === "element" && root.tag.kind !== "static") {
-      if (root.tag.kind === "resolved") {
-        state.usesResolveTag = true;
-        body.push(
-          `const resolvedTagValue = $derived(resolveTag(${ctx.propCode(root.tag.fromProp)}, ${JSON.stringify(root.tag.fallback)}, TagGroup.${root.tag.group}));`
-        );
-      } else if (root.tag.kind === "heading") {
-        state.usesTitleTag = true;
-        helperImports.add("titleTag");
-        body.push(`const resolvedTagValue = $derived(titleTag(${ctx.propCode(root.tag.fromProp)}));`);
-      } else {
-        body.push(`const resolvedTagValue = $derived(${printTsExpr(root.tag.expr, ctx)});`);
-      }
-    }
-
-    const markup = this.printNode(root, ctx, part, state, { isRoot: true });
-
-    // Assemble file.
-    const moduleImports: string[] = [];
-    if (hasChildren) moduleImports.push(`import type { Snippet } from "svelte";`);
-    if (sharedTypeImports.size > 0) {
-      moduleImports.push(
-        `import type { ${[...sharedTypeImports].sort().join(", ")} } from "./${fileStem(brick)}.shared";`
-      );
-    }
-
-    const scriptImports: string[] = [];
-    if (sharedValueImports.size > 0) {
-      scriptImports.push(
-        `import { ${[...sharedValueImports].sort().join(", ")} } from "./${fileStem(brick)}.shared";`
-      );
-    }
-    if (state.usesCn) scriptImports.push(`import { cn } from "${this.utilsPath}";`);
-    if (helperImports.size > 0) {
-      scriptImports.push(
-        `import { ${[...helperImports].sort().join(", ")} } from "${this.utilsPath}/expr";`
-      );
-    }
-    if (state.usesResolveTag) {
-      scriptImports.push(`import { resolveTag, TagGroup } from "${this.utilsPath}/tags";`);
-    }
-
-    const docs = part.docs
-      .split("\n")
-      .map((l) => `  ${l}`.trimEnd())
-      .join("\n");
-
-    const lines: string[] = [];
-    lines.push(`<!-- ${BANNER} -->`);
-    lines.push(`<!--\n${docs}\n-->`);
-    lines.push(`<script lang="ts" module>`);
-    for (const imp of moduleImports) lines.push(indent(imp, 1));
-    lines.push(``);
-    lines.push(indent(`export type ${part.name}Props = {\n${typeFields.join("\n")}\n};`, 1));
-    lines.push(`</script>`);
-    lines.push(``);
-    lines.push(`<script lang="ts">`);
-    for (const imp of scriptImports) lines.push(indent(imp, 1));
-    if (scriptImports.length > 0) lines.push(``);
-    lines.push(
-      indent(
-        `let {\n${destructure.map((d) => `  ${d}`).join(",\n")}\n}: ${part.name}Props = $props();`,
-        1
-      )
-    );
-    if (body.length > 0) {
-      lines.push(``);
-      for (const stmt of body) lines.push(indent(stmt, 1));
-    }
-    lines.push(`</script>`);
-    lines.push(``);
-    lines.push(markup);
-
-    return {
-      path: `ui/${brick.dir}/${part.name}.svelte`,
-      contents: lines.join("\n").replace(/\n{3,}/g, "\n\n").trimEnd() + "\n",
-    };
-  }
-
-  private printAttrs(
-    node: ElementNode,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesCn: boolean },
-    opts: { inLoop: boolean }
-  ): string {
-    const out: string[] = [];
-    for (const attr of node.attrs) {
-      out.push(this.printAttr(attr, ctx, part, state, opts));
-    }
-    return out.filter(Boolean).join(" ");
-  }
-
-  private printAttr(
-    attr: AttrSpec,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesCn: boolean },
-    opts: { inLoop: boolean }
-  ): string {
-    switch (attr.kind) {
-      case "static":
-        return `${attr.name}=${JSON.stringify(attr.value)}`;
-      case "expr": {
-        if (isPassthroughForward(attr, part)) return "";
-        const value = printTsExpr(attr.expr, ctx);
-        const t = exprType(attr.expr, ctx.env);
-        if (attr.when) {
-          return `${attr.name}={${printTsExpr(attr.when, ctx)} ? ${value} : undefined}`;
-        }
-        if (attr.keepEmpty && t === "string") {
-          return `${attr.name}={(${value}) ?? ""}`;
-        }
-        if (t !== "string" || neverEmptyString(attr.expr, ctx.env)) {
-          return `${attr.name}={${value}}`;
-        }
-        ctx.helpers.add("orUndef");
-        return `${attr.name}={orUndef(${value})}`;
-      }
-      case "bool":
-        return `${attr.name}={${printTsExpr(attr.expr, ctx)} || undefined}`;
-      case "class": {
-        // With spread attributes Svelte SSR prints `class=""` even for
-        // undefined; a conditional spread omits the attr entirely.
-        if (!attr.spec) return `{...(cls ? { class: cls } : {})}`;
-        state.usesCn = true;
-        const inline = printInlineClassSpec(attr.spec, ctx, () =>
-          part.props.some((p) => p.name === "Class") && !opts.inLoop ? "className" : undefined
-        );
-        return `{...((${inline}) ? { class: ${inline} } : {})}`;
-      }
-      case "rest":
-        return `{...rest}`;
-    }
-  }
-
-  private printNode(
-    node: Node,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesResolveTag: boolean; usesTitleTag: boolean; usesCn: boolean },
-    opts: { isRoot?: boolean; inLoop?: boolean } = {}
-  ): string {
-    switch (node.kind) {
-      case "element": {
-        const dynamic = node.tag.kind !== "static";
-        if (dynamic && !opts.isRoot) {
-          throw new Error(`${part.name}: dynamic tags only supported at part root`);
-        }
-        const tagCode = dynamic ? "svelte:element" : node.tag.kind === "static" ? node.tag.tag : "";
-        const attrs = this.printAttrs(node, ctx, part, state, { inLoop: opts.inLoop === true });
-        const thisAttr = dynamic ? `this={resolvedTagValue}` : "";
-        const openParts = [tagCode, thisAttr, attrs].filter(Boolean).join(" ");
-        if (node.void || node.children.length === 0) {
-          return node.void ? `<${openParts} />` : `<${openParts}></${tagCode}>`;
-        }
-        const rendered = node.children.map((c) =>
-          this.printNode(c, ctx, part, state, { inLoop: opts.inLoop })
-        );
-        // Mixed inline content (text + slot) must not gain whitespace text
-        // nodes — join on one line to keep the DOM contract byte-equal.
-        if (node.children.some((c) => c.kind === "text")) {
-          return `<${openParts}>${rendered.join("")}</${tagCode}>`;
-        }
-        return `<${openParts}>\n${indent(rendered.join("\n"), 1)}\n</${tagCode}>`;
-      }
-      case "slot":
-        return `{@render children?.()}`;
-      case "text":
-        return `{${printTsExpr(node.expr, ctx)}}`;
-      case "when": {
-        const test = printTsExpr(node.test, ctx);
-        const thenCode = node.then
-          .map((c) => this.printNode(c, ctx, part, state, opts))
-          .join("\n");
-        if (!node.else || node.else.length === 0) {
-          return `{#if ${test}}\n${indent(thenCode, 1)}\n{/if}`;
-        }
-        // Collapse else-if chains for readability.
-        if (node.else.length === 1 && node.else[0]!.kind === "when") {
-          const elseWhen = this.printNode(node.else[0]!, ctx, part, state, opts);
-          const chained = elseWhen.replace(/^\{#if /, "{:else if ").replace(/\n\{\/if\}$/, "\n{/if}");
-          return `{#if ${test}}\n${indent(thenCode, 1)}\n${chained}`;
-        }
-        const elseCode = node.else
-          .map((c) => this.printNode(c, ctx, part, state, opts))
-          .join("\n");
-        return `{#if ${test}}\n${indent(thenCode, 1)}\n{:else}\n${indent(elseCode, 1)}\n{/if}`;
-      }
-      case "forEach": {
-        const itemsCode = ctx.propCode(node.itemsProp);
-        const body = node.body
-          .map((c) => this.printNode(c, ctx, part, state, { inLoop: true }))
-          .join("\n");
-        return `{#each ${itemsCode} ?? [] as item}\n${indent(body, 1)}\n{/each}`;
-      }
-    }
-  }
-}
diff --git a/src/emitters/templ.ts b/src/emitters/templ.ts
deleted file mode 100644
index 6ac0a8d..0000000
--- a/src/emitters/templ.ts
+++ /dev/null
@@ -1,435 +0,0 @@
-/**
- * Go Templ emitter — one `<stem>.templ` per brick (props structs, exported
- * `<Part>Classes` helpers, templ components) plus `<stem>_gen.go` embedding
- * the shared `*.variants.json` recipes.
- */
-
-import { walkExpr, type Expr } from "../domain/expr";
-import {
-  fileStem,
-  walkNodes,
-  type AttrSpec,
-  type BrickDef,
-  type ClassSpec,
-  type ElementNode,
-  type Node,
-  type PartDef,
-} from "../domain/model";
-import { allowedTags } from "../domain/tags";
-import {
-  BANNER,
-  exprType,
-  foldResolvedTag,
-  indent,
-  makeEnv,
-  lowerFirst,
-  pascalCase,
-  type Emitter,
-  type GeneratedFile,
-  type TypeEnv,
-} from "./common";
-import { goImportsFor, printGoExpr, type GoPrintCtx } from "./go-expr";
-import { classSpecProps, neverEmptyString } from "./ts-common";
-
-const HEADING_TAGS = ["h1", "h3", "h4", "h5", "h6"]; // h2 is the default case
-
-export interface TemplOptions {
-  /** Go module root for generated imports. */
-  goModule: string;
-}
-
-export class TemplEmitter implements Emitter {
-  readonly runtime = "templ" as const;
-
-  constructor(private readonly options: TemplOptions) {}
-
-  emit(brick: BrickDef): GeneratedFile[] {
-    const stem = fileStem(brick);
-    const pkg = brick.goPackage ?? brick.dir;
-
-    const bodyParts: string[] = [];
-    const extraImports = new Set<string>();
-
-    // Record types.
-    for (const record of brick.recordTypes ?? []) {
-      const fields = record.fields.map((f) => {
-        const doc = f.docs ? `\t// ${f.docs}\n` : "";
-        return `${doc}\t${f.name} ${f.type === "string" ? "string" : "bool"}`;
-      });
-      bodyParts.push(`// ${record.name} is one ${record.name} entry.\ntype ${record.name} struct {\n${fields.join("\n")}\n}`);
-    }
-
-    for (const part of brick.parts) {
-      const env: TypeEnv = makeEnv(brick, part);
-      collectGoImports(brick, part, extraImports);
-      bodyParts.push(this.emitPropsStruct(part));
-      if (part.classes) bodyParts.push(this.emitClassesFunc(brick, part, env));
-      for (const [name, expr] of Object.entries(part.derived ?? {})) {
-        bodyParts.push(this.emitDerivedFunc(brick, part, env, name, expr));
-      }
-      bodyParts.push(this.emitComponent(brick, part, env));
-    }
-
-    const header: string[] = [];
-    header.push(`// ${BANNER}`);
-    header.push(``);
-    header.push(`/*`);
-    for (const line of brick.docs.split("\n")) header.push(line);
-    header.push(`*/`);
-    header.push(``);
-    header.push(`package ${pkg}`);
-    header.push(``);
-    const imports = [...extraImports].sort().map((i) => `\t"${i}"`);
-    header.push(`import (`);
-    for (const imp of imports) header.push(imp);
-    if (imports.length > 0) header.push(``);
-    header.push(`\tuiutils "${this.options.goModule}/utils"`);
-    header.push(`)`);
-
-    const templFile: GeneratedFile = {
-      path: `ui/${brick.dir}/${stem}.templ`,
-      contents: [header.join("\n"), "", bodyParts.join("\n\n"), ""].join("\n"),
-    };
-
-    if (Object.keys(brick.recipeFiles).length === 0) return [templFile];
-    return [templFile, this.emitGenFile(brick, pkg, stem)];
-  }
-
-  // -------------------------------------------------------------------------
-  // Go declarations
-  // -------------------------------------------------------------------------
-
-  private goType(part: PartDef, propName: string): string {
-    const p = part.props.find((x) => x.name === propName)!;
-    if (p.goType) return p.goType;
-    switch (p.type) {
-      case "string":
-        return "string";
-      case "bool":
-        return "bool";
-      case "int":
-        return "int";
-      case "items":
-        return `[]${p.itemsOf}`;
-      case "attrs":
-        return "templ.Attributes";
-      default:
-        throw new Error(`${part.name}.${propName}: no Go type`);
-    }
-  }
-
-  private emitPropsStruct(part: PartDef): string {
-    const fields: string[] = [];
-    for (const p of part.props) {
-      if (p.type === "children") continue;
-      const doc = p.docs ? `\t// ${p.name} — ${p.docs}\n` : "";
-      fields.push(`${doc}\t${p.name} ${this.goType(part, p.name)}`);
-    }
-    return `// ${part.name}Props configures ${part.name}.\ntype ${part.name}Props struct {\n${fields.join("\n")}\n}`;
-  }
-
-  private goCtx(brick: BrickDef, part: PartDef, env: TypeEnv): GoPrintCtx {
-    return {
-      env,
-      propCode: (name) => `p.${name}`,
-      itemCode: (field) => `item.${field}`,
-      derivedCode: (name) => `${lowerFirst(part.name)}${pascalCase(name)}(p)`,
-      resolvedTagCode: () => {
-        throw new Error(`${part.name}: resolvedTag must be folded before Go printing`);
-      },
-    };
-  }
-
-  private classArgs(brick: BrickDef, part: PartDef, spec: ClassSpec, ctx: GoPrintCtx): string {
-    const tail: string[] = [];
-    if (spec.staticBase) tail.push(JSON.stringify(spec.staticBase));
-    for (const e of spec.extra ?? []) tail.push(printGoExpr(e, ctx));
-    for (const st of spec.state ?? []) {
-      tail.push(`uiutils.If(${printGoExpr(st.test, ctx)}, ${JSON.stringify(st.classes)}, "")`);
-    }
-    if (spec.includeClassProp !== false && part.props.some((p) => p.name === "Class")) {
-      tail.push("p.Class");
-    }
-
-    if (spec.recipe) {
-      const recipeId = spec.recipeId ?? part.recipeId!;
-      const recipeVar = pascalCase(recipeId) + "Variants";
-      const selection = Object.entries(spec.recipe)
-        .map(([key, source]) => {
-          const value = typeof source === "string" ? `p.${source}` : printGoExpr(source, ctx);
-          return `\t\t${JSON.stringify(key)}: ${value},`;
-        })
-        .join("\n");
-      const sel = selection ? `map[string]string{\n${selection}\n\t}` : `map[string]string{}`;
-      const tailStr = tail.length > 0 ? `, ${tail.join(", ")}` : "";
-      return `uiutils.Compose(${recipeVar}, ${sel}${tailStr})`;
-    }
-    return `uiutils.Cn(${tail.join(", ")})`;
-  }
-
-  private emitClassesFunc(brick: BrickDef, part: PartDef, env: TypeEnv): string {
-    const ctx = this.goCtx(brick, part, env);
-    const call = this.classArgs(brick, part, part.classes!, ctx);
-    return (
-      `// ${part.name}Classes composes ${part.name} classes without rendering —\n` +
-      `// the server-composition escape hatch for custom root elements.\n` +
-      `func ${part.name}Classes(p ${part.name}Props) string {\n\treturn ${call}\n}`
-    );
-  }
-
-  private emitDerivedFunc(
-    brick: BrickDef,
-    part: PartDef,
-    env: TypeEnv,
-    name: string,
-    expr: Expr
-  ): string {
-    const ctx = this.goCtx(brick, part, env);
-    const t = exprType(expr, env);
-    const goT = t === "string" ? "string" : t === "bool" ? "bool" : "int";
-    return `func ${lowerFirst(part.name)}${pascalCase(name)}(p ${part.name}Props) ${goT} {\n\treturn ${printGoExpr(expr, ctx)}\n}`;
-  }
-
-  // -------------------------------------------------------------------------
-  // templ component
-  // -------------------------------------------------------------------------
-
-  private emitComponent(brick: BrickDef, part: PartDef, env: TypeEnv): string {
-    const ctx = this.goCtx(brick, part, env);
-    const body = this.printNode(part.render, brick, part, env, ctx, undefined);
-    return `// ${part.name} renders the ${part.name} contract.\ntempl ${part.name}(p ${part.name}Props) {\n${indent(body, 1, "\t")}\n}`;
-  }
-
-  private printNode(
-    node: Node,
-    brick: BrickDef,
-    part: PartDef,
-    env: TypeEnv,
-    ctx: GoPrintCtx,
-    currentTag: string | undefined
-  ): string {
-    switch (node.kind) {
-      case "element":
-        return this.printElement(node, brick, part, env, ctx);
-      case "slot":
-        return `{ children... }`;
-      case "text":
-        return `{ ${printGoExpr(fold(node.expr, currentTag), ctx)} }`;
-      case "when": {
-        const test = printGoExpr(fold(node.test, currentTag), ctx);
-        const thenCode = node.then
-          .map((c) => this.printNode(c, brick, part, env, ctx, currentTag))
-          .join("\n");
-        if (!node.else || node.else.length === 0) {
-          return `if ${test} {\n${indent(thenCode, 1, "\t")}\n}`;
-        }
-        // else-if chain
-        if (node.else.length === 1 && node.else[0]!.kind === "when") {
-          const chained = this.printNode(node.else[0]!, brick, part, env, ctx, currentTag);
-          return `if ${test} {\n${indent(thenCode, 1, "\t")}\n} else ${chained}`;
-        }
-        const elseCode = node.else
-          .map((c) => this.printNode(c, brick, part, env, ctx, currentTag))
-          .join("\n");
-        return `if ${test} {\n${indent(thenCode, 1, "\t")}\n} else {\n${indent(elseCode, 1, "\t")}\n}`;
-      }
-      case "forEach": {
-        const body = node.body
-          .map((c) => this.printNode(c, brick, part, env, ctx, currentTag))
-          .join("\n");
-        return `for _, item := range p.${node.itemsProp} {\n${indent(body, 1, "\t")}\n}`;
-      }
-    }
-  }
-
-  private printElement(
-    node: ElementNode,
-    brick: BrickDef,
-    part: PartDef,
-    env: TypeEnv,
-    ctx: GoPrintCtx
-  ): string {
-    const tag = node.tag;
-    if (tag.kind === "static") {
-      return this.printStaticElement(node, tag.tag, brick, part, env, ctx);
-    }
-
-    // Dynamic tags: a switch with one case per allowed tag; fallback last.
-    let switchExpr: string;
-    let cases: string[];
-    let fallback: string;
-    if (tag.kind === "resolved") {
-      switchExpr = `uiutils.ResolveTag(p.${tag.fromProp}, ${JSON.stringify(tag.fallback)}, uiutils.TagGroup${tag.group})`;
-      cases = allowedTags(tag.group).filter((t) => t !== tag.fallback);
-      fallback = tag.fallback;
-    } else if (tag.kind === "heading") {
-      switchExpr = `uiutils.TitleTag(p.${tag.fromProp})`;
-      cases = HEADING_TAGS;
-      fallback = "h2";
-    } else {
-      switchExpr = printGoExpr(tag.expr, ctx);
-      cases = tag.tags.slice(0, -1);
-      fallback = tag.tags[tag.tags.length - 1]!;
-    }
-
-    const caseBlocks = cases.map((t) => {
-      const el = this.printStaticElement(node, t, brick, part, env, ctx);
-      return `case ${JSON.stringify(t)}:\n${indent(el, 1, "\t")}`;
-    });
-    const defaultBlock = `default:\n${indent(
-      this.printStaticElement(node, fallback, brick, part, env, ctx),
-      1,
-      "\t"
-    )}`;
-    return `switch ${switchExpr} {\n${indent([...caseBlocks, defaultBlock].join("\n"), 1, "\t")}\n}`;
-  }
-
-  private printStaticElement(
-    node: ElementNode,
-    tag: string,
-    brick: BrickDef,
-    part: PartDef,
-    env: TypeEnv,
-    ctx: GoPrintCtx
-  ): string {
-    const attrLines: string[] = [];
-    for (const attr of node.attrs) {
-      attrLines.push(this.printAttr(attr, tag, brick, part, env, ctx));
-    }
-    const attrs = attrLines.filter(Boolean);
-
-    const children = node.children
-      .map((c) => this.printNode(c, brick, part, env, ctx, tag))
-      .join("\n");
-
-    const compact = attrs.length <= 2 && attrs.every((a) => !a.includes("\n"));
-    if (compact && (node.void || node.children.length === 0)) {
-      const inline = attrs.length > 0 ? ` ${attrs.join(" ")}` : "";
-      if (node.void) return `<${tag}${inline}/>`;
-      return `<${tag}${inline}></${tag}>`;
-    }
-
-    if (attrs.length === 0) {
-      if (node.void) return `<${tag}/>`;
-      if (node.children.length === 0) return `<${tag}></${tag}>`;
-      return `<${tag}>\n${indent(children, 1, "\t")}\n</${tag}>`;
-    }
-    const open = `<${tag}\n${indent(attrs.join("\n"), 1, "\t")}\n`;
-    if (node.void) return `${open}/>`;
-    if (node.children.length === 0) return `${open}></${tag}>`;
-    return `${open}>\n${indent(children, 1, "\t")}\n</${tag}>`;
-  }
-
-  private printAttr(
-    attr: AttrSpec,
-    tag: string,
-    brick: BrickDef,
-    part: PartDef,
-    env: TypeEnv,
-    ctx: GoPrintCtx
-  ): string {
-    switch (attr.kind) {
-      case "static":
-        return `${attr.name}=${JSON.stringify(attr.value)}`;
-      case "expr": {
-        const expr = fold(attr.expr, tag);
-        const value = printGoExpr(expr, ctx);
-        const t = exprType(expr, env);
-        const valueCode = t === "string" ? value : t === "int" ? `strconv.Itoa(${value})` : value;
-        if (attr.when) {
-          const when = fold(attr.when, tag);
-          if (when.kind === "lit") {
-            // Constant-folded per tag-switch case: drop or emit unconditionally.
-            return when.value === false ? "" : `${attr.name}={ ${valueCode} }`;
-          }
-          const test = printGoExpr(when, ctx);
-          return `if ${test} {\n\t${attr.name}={ ${valueCode} }\n}`;
-        }
-        if (attr.keepEmpty || t !== "string" || neverEmptyString(expr, env)) {
-          return `${attr.name}={ ${valueCode} }`;
-        }
-        return `if uiutils.IsSetStr(${value}) {\n\t${attr.name}={ ${value} }\n}`;
-      }
-      case "bool":
-        return `${attr.name}?={ ${printGoExpr(fold(attr.expr, tag), ctx)} }`;
-      case "class": {
-        if (!attr.spec) return `class={ ${part.name}Classes(p) }`;
-        const call = this.classArgs(brick, part, { ...attr.spec, includeClassProp: false }, ctx);
-        return `class={ ${call} }`;
-      }
-      case "rest":
-        return `{ p.Attrs... }`;
-    }
-  }
-
-  // -------------------------------------------------------------------------
-  // _gen.go
-  // -------------------------------------------------------------------------
-
-  private emitGenFile(brick: BrickDef, pkg: string, stem: string): GeneratedFile {
-    const lines: string[] = [];
-    lines.push(`// ${BANNER}`);
-    lines.push(``);
-    lines.push(`package ${pkg}`);
-    lines.push(``);
-    lines.push(`import (`);
-    lines.push(`\t_ "embed"`);
-    lines.push(``);
-    lines.push(`\tuiutils "${this.options.goModule}/utils"`);
-    lines.push(`)`);
-    for (const [id, file] of Object.entries(brick.recipeFiles)) {
-      const varName = pascalCase(id) + "Variants";
-      const jsonVar = lowerFirst(pascalCase(id)) + "VariantsJSON";
-      lines.push(``);
-      lines.push(`//go:embed ${file}`);
-      lines.push(`var ${jsonVar} []byte`);
-      lines.push(``);
-      lines.push(`// ${varName} is the CVA recipe shared verbatim by all runtimes.`);
-      lines.push(`var ${varName} = uiutils.MustParseVariantRecipe(${jsonVar}).ToVariants()`);
-    }
-    lines.push(``);
-    return { path: `ui/${brick.dir}/${stem}_gen.go`, contents: lines.join("\n") };
-  }
-}
-
-function fold(expr: Expr, tag: string | undefined): Expr {
-  return tag === undefined ? expr : foldResolvedTag(expr, tag);
-}
-
-/** Collect Go stdlib imports needed by a part's expressions. */
-function collectGoImports(brick: BrickDef, part: PartDef, out: Set<string>): void {
-  const exprs: Expr[] = [];
-  const pushSpec = (spec: ClassSpec | undefined) => {
-    if (!spec) return;
-    exprs.push(...(spec.extra ?? []));
-    for (const st of spec.state ?? []) exprs.push(st.test);
-    for (const source of Object.values(spec.recipe ?? {})) {
-      if (typeof source !== "string") exprs.push(source);
-    }
-  };
-  pushSpec(part.classes);
-  for (const d of Object.values(part.derived ?? {})) exprs.push(d);
-  walkNodes(part.render, (node) => {
-    if (node.kind === "element") {
-      for (const attr of node.attrs) {
-        if (attr.kind === "expr") {
-          exprs.push(attr.expr);
-          if (attr.when) exprs.push(attr.when);
-          // int-valued attrs stringify via strconv
-          const env: TypeEnv = makeEnv(brick, part);
-          try {
-            if (exprType(attr.expr, env) === "int") out.add("strconv");
-          } catch {
-            // item refs outside env context — resolved during printing
-          }
-        }
-        if (attr.kind === "bool") exprs.push(attr.expr);
-        if (attr.kind === "class") pushSpec(attr.spec);
-      }
-      if (node.tag.kind === "mapped") exprs.push(node.tag.expr);
-    }
-    if (node.kind === "text") exprs.push(node.expr);
-    if (node.kind === "when") exprs.push(node.test);
-  });
-  for (const imp of goImportsFor(exprs)) out.add(imp);
-}
diff --git a/src/emitters/ts-common.ts b/src/emitters/ts-common.ts
deleted file mode 100644
index 247f569..0000000
--- a/src/emitters/ts-common.ts
+++ /dev/null
@@ -1,330 +0,0 @@
-/**
- * Shared analysis for the three TypeScript runtimes (React, Svelte, Vue) and
- * the emitter for the per-brick shared contract module
- * (`<stem>.shared.ts`): recipe literal-union types, record types, base prop
- * types, and the classes helpers every runtime calls.
- */
-
-import { walkExpr, type Expr } from "../domain/expr";
-import {
-  fileStem,
-  type BrickDef,
-  type ClassSpec,
-  type PartDef,
-  type PropDef,
-} from "../domain/model";
-import { htmlPropName, localIdent, reactPropName } from "../domain/naming";
-import { BANNER, exprType, lowerFirst, makeEnv, pascalCase, type GeneratedFile, type TypeEnv } from "./common";
-import { printTsExpr, type TsPrintCtx } from "./ts-expr";
-
-// ---------------------------------------------------------------------------
-// Declared props
-// ---------------------------------------------------------------------------
-
-export interface DeclaredProp {
-  def: PropDef;
-  /** React prop name (camelCase / className / aria-*). */
-  reactName: string;
-  /** Svelte/Vue prop name (HTML-native). */
-  htmlName: string;
-  /** Safe local identifier in generated code. */
-  local: string;
-  /** TS type reference. */
-  tsType: string;
-}
-
-/**
- * Props that appear in TS runtime signatures (passthrough flows via rest;
- * `Class` is handled uniformly by each runtime: `className` in React,
- * `class` in Svelte, the class attr in Vue).
- */
-export function declaredProps(brick: BrickDef, part: PartDef): DeclaredProp[] {
-  return part.props
-    .filter(
-      (p) => p.type !== "attrs" && p.type !== "children" && !p.passthrough && p.name !== "Class"
-    )
-    .map((p) => ({
-      def: p,
-      reactName: reactPropName(p),
-      htmlName: htmlPropName(p),
-      local: localIdent(p.name),
-      tsType: tsTypeOf(brick, part, p),
-    }));
-}
-
-export function variantTypeName(part: PartDef, cvaKey: string): string {
-  return part.name + pascalCase(cvaKey);
-}
-
-export function tsTypeOf(brick: BrickDef, part: PartDef, p: PropDef): string {
-  if (p.cva) return variantTypeName(part, p.cvaKey ?? p.name.toLowerCase());
-  switch (p.type) {
-    case "string":
-      return p.enumValues ? p.enumValues.map((v) => JSON.stringify(v)).join(" | ") : "string";
-    case "bool":
-      return "boolean";
-    case "int":
-      return p.enumValues ? p.enumValues.join(" | ") : "number";
-    case "items":
-      return `${p.itemsOf}[]`;
-    default:
-      throw new Error(`${part.name}.${p.name}: type ${p.type} has no TS representation`);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Classes helpers
-// ---------------------------------------------------------------------------
-
-export function classesHelperName(part: PartDef): string {
-  return lowerFirst(part.name) + "Classes";
-}
-
-export function classesInputTypeName(part: PartDef): string {
-  return part.name + "ClassesInput";
-}
-
-/** Canonical prop names referenced by a class spec (excluding Class). */
-export function classSpecProps(spec: ClassSpec): string[] {
-  const names = new Set<string>();
-  const fromExpr = (e: Expr) =>
-    walkExpr(e, (x) => {
-      if (x.kind === "prop") names.add(x.name);
-    });
-  for (const source of Object.values(spec.recipe ?? {})) {
-    if (typeof source === "string") names.add(source);
-    else fromExpr(source);
-  }
-  for (const e of spec.extra ?? []) fromExpr(e);
-  for (const st of spec.state ?? []) fromExpr(st.test);
-  names.delete("Class");
-  return [...names];
-}
-
-export function recipeVarFor(recipeId: string): string {
-  return lowerFirst(pascalCase(recipeId)) + "Recipe";
-}
-
-/**
- * Print an inline ClassSpec as a `cn(...)` expression (used for non-root
- * class attrs, e.g. per-item classes inside loops).
- */
-export function printInlineClassSpec(
-  spec: ClassSpec,
-  ctx: TsPrintCtx,
-  classPropCode: () => string | undefined
-): string {
-  const args: string[] = [];
-  if (spec.recipe) {
-    throw new Error("inline class specs with recipes are not supported; use the part classes contract");
-  }
-  if (spec.staticBase) args.push(JSON.stringify(spec.staticBase));
-  for (const e of spec.extra ?? []) args.push(printTsExpr(e, ctx));
-  for (const st of spec.state ?? []) {
-    args.push(`(${printTsExpr(st.test, ctx)} ? ${JSON.stringify(st.classes)} : "")`);
-  }
-  if (spec.includeClassProp !== false) {
-    const cp = classPropCode();
-    if (cp) args.push(cp);
-  }
-  return `cn(${args.join(", ")})`;
-}
-
-// ---------------------------------------------------------------------------
-// Shared module emitter (`<stem>.shared.ts`)
-// ---------------------------------------------------------------------------
-
-export function sharedModulePath(brick: BrickDef): string {
-  return `ui/${brick.dir}/${fileStem(brick)}.shared.ts`;
-}
-
-export function sharedModuleName(brick: BrickDef): string {
-  return `./${fileStem(brick)}.shared`;
-}
-
-export function basePropsTypeName(part: PartDef): string {
-  return part.name + "BaseProps";
-}
-
-export function emitSharedModule(brick: BrickDef, utilsPath: string): GeneratedFile {
-  const lines: string[] = [];
-  lines.push(`// ${BANNER}`);
-  lines.push(`// ${brick.id} — shared TypeScript contract (types + classes helpers)`);
-  lines.push(``);
-
-  const helperImports = new Set<string>();
-  const bodies: string[] = [];
-
-  // Recipe imports.
-  const recipeIds = Object.keys(brick.recipes);
-  for (const id of recipeIds) {
-    const file = brick.recipeFiles[id];
-    bodies.push(`import ${recipeVarFor(id)}Json from "./${file}";`);
-  }
-  if (recipeIds.length > 0) {
-    bodies.push(``);
-    for (const id of recipeIds) {
-      bodies.push(`export const ${recipeVarFor(id)} = ${recipeVarFor(id)}Json;`);
-    }
-  }
-  bodies.push(``);
-
-  // Record types.
-  for (const record of brick.recordTypes ?? []) {
-    const fields = record.fields
-      .map((f) => `  ${localIdent(f.name)}${f.type === "string" ? "?: string" : "?: boolean"};`)
-      .join("\n");
-    bodies.push(`export type ${record.name} = {\n${fields}\n};`);
-    bodies.push(``);
-  }
-
-  // Variant literal-union types + base props types + classes helpers.
-  const emittedTypes = new Set<string>();
-  let usesRecipeKey = false;
-  let usesComposeRecipe = false;
-  let usesCn = false;
-
-  for (const part of brick.parts) {
-    const decls = declaredProps(brick, part);
-
-    for (const d of decls) {
-      if (!d.def.cva) continue;
-      const key = d.def.cvaKey ?? d.def.name.toLowerCase();
-      const typeName = variantTypeName(part, key);
-      if (emittedTypes.has(typeName)) continue;
-      emittedTypes.add(typeName);
-      usesRecipeKey = true;
-      const recipeId = part.recipeId!;
-      bodies.push(
-        `export type ${typeName} = RecipeKey<typeof ${recipeVarFor(recipeId)}, ${JSON.stringify(key)}>;`
-      );
-    }
-
-    // Base props type (framework-neutral; class/children/rest added per runtime).
-    const fields = decls.map((d) => `  ${quoteIfNeeded(d.local)}?: ${d.tsType};`);
-    bodies.push(``);
-    bodies.push(`/** ${part.docs.split("\n")[0]} */`);
-    bodies.push(`export type ${basePropsTypeName(part)} = {\n${fields.join("\n")}\n};`);
-
-    // Classes helper.
-    if (part.classes) {
-      const spec = part.classes;
-      const inputProps = classSpecProps(spec);
-      const inputFields: string[] = [];
-      for (const name of inputProps) {
-        const d = decls.find((x) => x.def.name === name);
-        if (!d) throw new Error(`${brick.id}/${part.name}: classes spec references undeclared prop ${name}`);
-        inputFields.push(`  ${quoteIfNeeded(d.local)}?: ${d.tsType};`);
-      }
-      inputFields.push(`  className?: string;`);
-
-      const env: TypeEnv = makeEnv(brick, part);
-      const ctx: TsPrintCtx = {
-        env,
-        propCode: (name) => (name === "Class" ? "input.className" : `input.${localIdent(name)}`),
-        itemCode: () => {
-          throw new Error("classes helpers cannot reference loop items");
-        },
-        derivedCode: () => {
-          throw new Error("classes helpers cannot reference derived values");
-        },
-        resolvedTagCode: () => {
-          throw new Error("classes helpers cannot reference the resolved tag");
-        },
-        helpers: helperImports,
-      };
-
-      const args: string[] = [];
-      if (spec.recipe) {
-        usesComposeRecipe = true;
-        const recipeId = spec.recipeId ?? part.recipeId!;
-        const selection = Object.entries(spec.recipe)
-          .map(([key, source]) => {
-            if (typeof source === "string") {
-              return `${quoteIfNeeded(key)}: ${source === "Class" ? "input.className" : `input.${localIdent(source)}`}`;
-            }
-            usesRecipeKey = true;
-            return `${quoteIfNeeded(key)}: ${printTsExpr(source, ctx)} as RecipeKey<typeof ${recipeVarFor(recipeId)}, ${JSON.stringify(key)}>`;
-          })
-          .join(", ");
-        args.push(`composeRecipe(${recipeVarFor(recipeId)}, { ${selection} })`);
-      }
-      if (spec.staticBase) args.push(JSON.stringify(spec.staticBase));
-      for (const e of spec.extra ?? []) args.push(printTsExpr(e, ctx));
-      for (const st of spec.state ?? []) {
-        args.push(`(${printTsExpr(st.test, ctx)} ? ${JSON.stringify(st.classes)} : "")`);
-      }
-      if (spec.includeClassProp !== false) args.push("input.className");
-      usesCn = true;
-
-      bodies.push(``);
-      bodies.push(`export type ${classesInputTypeName(part)} = {\n${inputFields.join("\n")}\n};`);
-      bodies.push(``);
-      bodies.push(
-        `/** Compose ${part.name} classes without rendering — the cross-runtime \`asChild\` substitute. */`
-      );
-      bodies.push(
-        `export function ${classesHelperName(part)}(input: ${classesInputTypeName(part)} = {}): string {\n` +
-          `  return ${args.length === 1 && args[0]!.startsWith("cn(") ? args[0] : `cn(${args.join(", ")})`};\n` +
-          `}`
-      );
-    }
-    bodies.push(``);
-  }
-
-  // Header imports (after analysis so we know what is used).
-  const utilImports: string[] = [];
-  if (usesCn) utilImports.push("cn");
-  if (usesComposeRecipe) utilImports.push("composeRecipe");
-  const typeImports: string[] = [];
-  if (usesRecipeKey) typeImports.push("type RecipeKey");
-  if (utilImports.length + typeImports.length > 0) {
-    lines.push(`import { ${[...utilImports, ...typeImports].join(", ")} } from "${utilsPath}";`);
-  }
-  if (helperImports.size > 0) {
-    lines.push(`import { ${[...helperImports].sort().join(", ")} } from "${utilsPath}/expr";`);
-  }
-
-  const contents = [...lines, ...bodies].join("\n").replace(/\n{3,}/g, "\n\n").trimEnd() + "\n";
-  return { path: sharedModulePath(brick), contents };
-}
-
-/**
- * True when an attr is a plain conditional forward of a passthrough prop —
- * TS runtimes skip it because rest props deliver the identical attribute.
- */
-export function isPassthroughForward(
-  attr: { kind: string; expr?: Expr; when?: Expr },
-  part: PartDef
-): boolean {
-  if (attr.kind !== "expr" || !attr.expr || attr.when) return false;
-  if (attr.expr.kind !== "prop") return false;
-  const p = part.props.find((x) => x.name === (attr.expr as { name: string }).name);
-  return p?.passthrough === true;
-}
-
-export function quoteIfNeeded(name: string): string {
-  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name) ? name : JSON.stringify(name);
-}
-
-/** True when a string-typed expression can never print empty (attr always kept). */
-export function neverEmptyString(expr: Expr, env: TypeEnv): boolean {
-  switch (expr.kind) {
-    case "lit":
-      return typeof expr.value === "string" ? expr.value !== "" : true;
-    case "defaultIfEmpty":
-      return expr.fallback !== "";
-    case "mapOr":
-      return expr.fallback !== "" && Object.values(expr.mapping).every((v) => v !== "");
-    case "intMapOr":
-      return expr.fallback !== "" && Object.values(expr.mapping).every((v) => v !== "");
-    case "boolToString":
-    case "intToString":
-    case "resolvedTag":
-      return true;
-    case "cond":
-      return neverEmptyString(expr.then, env) && neverEmptyString(expr.else, env);
-    default:
-      return exprType(expr, env) === "bool" || exprType(expr, env) === "int" ? false : false;
-  }
-}
diff --git a/src/emitters/twig-expr.ts b/src/emitters/twig-expr.ts
deleted file mode 100644
index 6bddcdc..0000000
--- a/src/emitters/twig-expr.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Prints IR expressions as Twig. Decision tables delegate to the ui8kit_*
- * functions registered by `UI8Kit\TwigExtension` (thin wrappers over
- * `\UI8Kit\Rt`), so the semantics are shared with the Latte/PHP printer.
- */
-
-import type { Expr } from "../domain/expr";
-import { exprType, type TypeEnv } from "./common";
-import { phpString } from "./php-expr";
-
-export interface TwigPrintCtx {
-  env: TypeEnv;
-  /** `variant`, `class`, ... — already `|default(...)`-wrapped by the emitter. */
-  propCode: (name: string) => string;
-  resolvedTagCode: () => string;
-  derivedCode: (name: string) => string;
-}
-
-function twigHash(mapping: Record<string, string>): string {
-  const entries = Object.entries(mapping)
-    .map(([k, v]) => `${phpString(k)}: ${phpString(v)}`)
-    .join(", ");
-  return `{${entries}}`;
-}
-
-function isIdentityMapping(mapping: Record<string, string>): boolean {
-  return Object.entries(mapping).every(([k, v]) => k === v);
-}
-
-export function printTwigExpr(expr: Expr, ctx: TwigPrintCtx): string {
-  const p = (e: Expr) => printTwigExpr(e, ctx);
-  switch (expr.kind) {
-    case "lit":
-      return typeof expr.value === "string" ? phpString(expr.value) : String(expr.value);
-    case "prop":
-      return ctx.propCode(expr.name);
-    case "item":
-      throw new Error("item refs are not supported by the PHP emitters (forEach parts are skipped)");
-    case "derivedRef":
-      return ctx.derivedCode(expr.name);
-    case "resolvedTag":
-      return ctx.resolvedTagCode();
-    case "defaultIfEmpty":
-      return `ui8kit_default_if_empty(${p(expr.expr)}, ${phpString(expr.fallback)})`;
-    case "mapOr": {
-      const lower = expr.lower ? ", true" : "";
-      if (isIdentityMapping(expr.mapping)) {
-        const allowed = Object.keys(expr.mapping).map(phpString).join(", ");
-        return `ui8kit_one_of_or(${p(expr.expr)}, ${phpString(expr.fallback)}, [${allowed}]${lower})`;
-      }
-      return `ui8kit_map_or(${p(expr.expr)}, ${twigHash(expr.mapping)}, ${phpString(expr.fallback)}${lower})`;
-    }
-    case "intMapOr": {
-      const entries = Object.entries(expr.mapping)
-        .map(([k, v]) => `${k}: ${phpString(v)}`)
-        .join(", ");
-      return `ui8kit_int_map_or(${p(expr.expr)}, {${entries}}, ${phpString(expr.fallback)})`;
-    }
-    case "cond":
-      return `((${p(expr.test)}) ? ${p(expr.then)} : ${p(expr.else)})`;
-    case "eq":
-      return `(${p(expr.left)} == ${p(expr.right)})`;
-    case "and":
-      return `(${expr.exprs.map(p).join(" and ")})`;
-    case "or":
-      return `(${expr.exprs.map(p).join(" or ")})`;
-    case "not":
-      return `(not (${p(expr.expr)}))`;
-    case "isSet": {
-      const t = exprType(expr.expr, ctx.env);
-      if (t === "string") return `ui8kit_is_set_str(${p(expr.expr)})`;
-      if (t === "int") return `(${p(expr.expr)} > 0)`;
-      return p(expr.expr);
-    }
-    case "contains":
-      return `(${phpString(expr.substring)} in ${p(expr.expr)})`;
-    case "concat":
-      return `ui8kit_concat_trim([${expr.parts.map(p).join(", ")}])`;
-    case "boolToString":
-      return `((${p(expr.expr)}) ? 'true' : 'false')`;
-    case "intToString":
-      return `((${p(expr.expr)}) ~ '')`;
-  }
-}
diff --git a/src/emitters/twig.ts b/src/emitters/twig.ts
deleted file mode 100644
index 0979fa5..0000000
--- a/src/emitters/twig.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-/**
- * Twig emitter — one `<Part>.html.twig` per supported part. Attributes print
- * through `ui8kit_attr_str(computed, attrs)` (registered by
- * `UI8Kit\TwigExtension`): computed entries first, caller attrs merged last
- * so the caller wins. Dynamic tags use `{% set uiTag %}` interpolation, which
- * Twig supports for void and non-void elements alike. Unsupported parts are
- * skipped — see src/domain/php-support.ts.
- */
-
-import {
-  type AttrSpec,
-  type BrickDef,
-  type ClassSpec,
-  type ElementNode,
-  type Node,
-  type PartDef,
-} from "../domain/model";
-import { phpPropName } from "../domain/naming";
-import { phpSupported } from "../domain/php-support";
-import { VOID_TAGS } from "../domain/tags";
-import {
-  BANNER,
-  exprType,
-  makeEnv,
-  type Emitter,
-  type GeneratedFile,
-  type TypeEnv,
-} from "./common";
-import { phpClassesMethod } from "./php-common";
-import { phpString } from "./php-expr";
-import { printTwigExpr, type TwigPrintCtx } from "./twig-expr";
-import { classSpecProps, neverEmptyString } from "./ts-common";
-
-export class TwigEmitter implements Emitter {
-  readonly runtime = "twig" as const;
-
-  emit(brick: BrickDef): GeneratedFile[] {
-    return brick.parts
-      .filter((part) => phpSupported(part).ok)
-      .map((part) => this.emitPart(brick, part));
-  }
-
-  private emitPart(brick: BrickDef, part: PartDef): GeneratedFile {
-    const env = makeEnv(brick, part);
-    const ctx: TwigPrintCtx = {
-      env,
-      propCode: (name) => {
-        const p = part.props.find((x) => x.name === name);
-        if (!p) throw new Error(`${brick.id}/${part.name}: unknown prop ${name}`);
-        const v = phpPropName(p);
-        const def = p.type === "bool" ? "false" : p.type === "int" ? "0" : "''";
-        return `(${v}|default(${def}))`;
-      },
-      resolvedTagCode: () => "uiTag",
-      // Prefixed so derived values never shadow same-named props (target).
-      derivedCode: (name) => "ui" + name.charAt(0).toUpperCase() + name.slice(1),
-    };
-
-    const lines: string[] = [];
-    lines.push(`{# ${BANNER} #}`);
-    lines.push(`{# ${brick.id} — ${part.docs.split("\n")[0]} #}`);
-
-    const root = part.render;
-    if (root.kind === "element" && root.tag.kind !== "static") {
-      const tag = root.tag;
-      if (tag.kind === "resolved") {
-        lines.push(
-          `{% set uiTag = ui8kit_resolve_tag(${ctx.propCode(tag.fromProp)}, ${phpString(tag.fallback)}, ${phpString(tag.group)}) %}`
-        );
-      } else if (tag.kind === "heading") {
-        lines.push(`{% set uiTag = ui8kit_title_tag(${ctx.propCode(tag.fromProp)}) %}`);
-      } else {
-        lines.push(`{% set uiTag = ${printTwigExpr(tag.expr, ctx)} %}`);
-      }
-    }
-    for (const [name, expr] of Object.entries(part.derived ?? {})) {
-      lines.push(`{% set ${ctx.derivedCode(name)} = ${printTwigExpr(expr, ctx)} %}`);
-    }
-
-    lines.push(this.printNode(part.render, brick, part, env, ctx));
-
-    return {
-      path: `ui/${brick.dir}/${part.name}.html.twig`,
-      contents: lines.join("\n") + "\n",
-    };
-  }
-
-  private printNode(node: Node, brick: BrickDef, part: PartDef, env: TypeEnv, ctx: TwigPrintCtx): string {
-    switch (node.kind) {
-      case "element":
-        return this.printElement(node, brick, part, env, ctx);
-      case "slot":
-        return `{{ children|default('')|raw }}`;
-      case "text":
-        return `{{ ${printTwigExpr(node.expr, ctx)} }}`;
-      case "when": {
-        const test = printTwigExpr(node.test, ctx);
-        const thenCode = node.then.map((c) => this.printNode(c, brick, part, env, ctx)).join("");
-        if (!node.else || node.else.length === 0) {
-          return `{% if ${test} %}${thenCode}{% endif %}`;
-        }
-        const elseCode = node.else.map((c) => this.printNode(c, brick, part, env, ctx)).join("");
-        return `{% if ${test} %}${thenCode}{% else %}${elseCode}{% endif %}`;
-      }
-      case "forEach":
-        throw new Error(`${brick.id}/${part.name}: forEach reached the Twig emitter (must be skipped)`);
-    }
-  }
-
-  private printElement(
-    node: ElementNode,
-    brick: BrickDef,
-    part: PartDef,
-    env: TypeEnv,
-    ctx: TwigPrintCtx
-  ): string {
-    const entries = this.attrEntries(node.attrs, part, env, ctx);
-    const hasRest = node.attrs.some((a) => a.kind === "rest");
-    const attrCall =
-      entries.length === 0 && !hasRest
-        ? ""
-        : `{{ ui8kit_attr_str({ ${entries.join(", ")} }, ${hasRest ? "attrs|default({})" : "{}"}) }}`;
-
-    const tag = node.tag;
-    const dynamic = tag.kind !== "static";
-    const openTag = dynamic ? `{{ uiTag }}` : tag.tag;
-    const isVoid =
-      node.void || (tag.kind === "static" && VOID_TAGS.has(tag.tag));
-
-    const open = `<${openTag}${attrCall}>`;
-    if (isVoid) return open;
-    const children = node.children
-      .map((c) => this.printNode(c, brick, part, env, ctx))
-      .join("");
-    return `${open}${children}</${openTag}>`;
-  }
-
-  private attrEntries(
-    attrs: AttrSpec[],
-    part: PartDef,
-    env: TypeEnv,
-    ctx: TwigPrintCtx
-  ): string[] {
-    const out: string[] = [];
-    for (const attr of attrs) {
-      switch (attr.kind) {
-        case "static":
-          out.push(`${phpString(attr.name)}: ${phpString(attr.value)}`);
-          break;
-        case "expr": {
-          const t = exprType(attr.expr, env);
-          const value = printTwigExpr(attr.expr, ctx);
-          const strValue = t === "string" ? value : `((${value}) ~ '')`;
-          if (attr.when) {
-            const test = printTwigExpr(attr.when, ctx);
-            out.push(`${phpString(attr.name)}: ((${test}) ? ${strValue} : null)`);
-          } else if (attr.keepEmpty || t !== "string" || neverEmptyString(attr.expr, env)) {
-            out.push(`${phpString(attr.name)}: ${strValue}`);
-          } else {
-            out.push(`${phpString(attr.name)}: ui8kit_or_null(${value})`);
-          }
-          break;
-        }
-        case "bool":
-          out.push(`${phpString(attr.name)}: ${printTwigExpr(attr.expr, ctx)}`);
-          break;
-        case "class": {
-          const call = attr.spec
-            ? this.inlineClassCall(attr.spec, part, ctx)
-            : this.partClassCall(part, ctx);
-          out.push(`'class': ui8kit_or_null(${call})`);
-          break;
-        }
-        case "rest":
-          // Handled by the second ui8kit_attr_str argument.
-          break;
-      }
-    }
-    return out;
-  }
-
-  private partClassCall(part: PartDef, ctx: TwigPrintCtx): string {
-    const spec = part.classes;
-    if (!spec) throw new Error(`${part.name}: attrClass() without classes contract`);
-    const inputs: string[] = [];
-    for (const name of classSpecProps(spec)) {
-      const p = part.props.find((x) => x.name === name)!;
-      inputs.push(`${phpString(phpPropName(p))}: ${ctx.propCode(name)}`);
-    }
-    if (spec.includeClassProp !== false && part.props.some((p) => p.name === "Class")) {
-      inputs.push(`'class': ${ctx.propCode("Class")}`);
-    }
-    return `ui8kit_classes(${phpString(phpClassesMethod(part))}, { ${inputs.join(", ")} })`;
-  }
-
-  private inlineClassCall(spec: ClassSpec, part: PartDef, ctx: TwigPrintCtx): string {
-    if (spec.recipe) {
-      throw new Error(`${part.name}: inline class specs with recipes are not supported`);
-    }
-    const args: string[] = [];
-    if (spec.staticBase) args.push(phpString(spec.staticBase));
-    for (const e of spec.extra ?? []) args.push(printTwigExpr(e, ctx));
-    for (const st of spec.state ?? []) {
-      args.push(`((${printTwigExpr(st.test, ctx)}) ? ${phpString(st.classes)} : '')`);
-    }
-    if (spec.includeClassProp !== false && part.props.some((p) => p.name === "Class")) {
-      args.push(ctx.propCode("Class"));
-    }
-    return `ui8kit_cn([${args.join(", ")}])`;
-  }
-}
diff --git a/src/emitters/vue.ts b/src/emitters/vue.ts
deleted file mode 100644
index bb591ae..0000000
--- a/src/emitters/vue.ts
+++ /dev/null
@@ -1,326 +0,0 @@
-/**
- * Vue 3 emitter — one PascalCase `.vue` SFC per part (`<script setup lang="ts">`,
- * default slot, `<component :is>` for resolved tags). Caller classes arrive
- * via the `class` attribute and are merged Tailwind-aware through `cn`
- * (inheritAttrs is disabled so merge order stays deterministic).
- */
-
-import type { Expr } from "../domain/expr";
-import {
-  fileStem,
-  type AttrSpec,
-  type BrickDef,
-  type ElementNode,
-  type Node,
-  type PartDef,
-} from "../domain/model";
-import { localIdent } from "../domain/naming";
-import {
-  BANNER,
-  exprType,
-  indent,
-  makeEnv,
-  usesItem,
-  type Emitter,
-  type GeneratedFile,
-  type TypeEnv,
-} from "./common";
-import { printTsExpr, type TsPrintCtx } from "./ts-expr";
-import {
-  classesHelperName,
-  classSpecProps,
-  declaredProps,
-  neverEmptyString,
-  printInlineClassSpec,
-  isPassthroughForward,
-  variantTypeName,
-} from "./ts-common";
-
-export class VueEmitter implements Emitter {
-  readonly runtime = "vue" as const;
-
-  constructor(private readonly utilsPath = "../../utils") {}
-
-  emit(brick: BrickDef): GeneratedFile[] {
-    return brick.parts.map((part) => this.emitPart(brick, part));
-  }
-
-  private emitPart(brick: BrickDef, part: PartDef): GeneratedFile {
-    const env: TypeEnv = makeEnv(brick, part);
-    const decls = declaredProps(brick, part);
-    const helperImports = new Set<string>();
-    const sharedValueImports = new Set<string>();
-    const sharedTypeImports = new Set<string>();
-    const state = { usesResolveTag: false, usesCn: false };
-    const hasChildren = part.props.some((p) => p.type === "children");
-
-    for (const d of decls) {
-      if (d.def.cva) sharedTypeImports.add(variantTypeName(part, d.def.cvaKey ?? d.def.name.toLowerCase()));
-      if (d.def.type === "items") sharedTypeImports.add(d.def.itemsOf!);
-    }
-
-    // Script-context print ctx (computed refs need `.value`).
-    const scriptCtx: TsPrintCtx = {
-      env,
-      propCode: (name) => {
-        if (name === "Class") return "callerClass.value";
-        const d = decls.find((x) => x.def.name === name);
-        if (!d) throw new Error(`${brick.id}/${part.name}: prop ${name} not declared for Vue`);
-        return `props.${d.local}`;
-      },
-      itemCode: () => {
-        throw new Error(`${part.name}: loop items are template-scope only`);
-      },
-      derivedCode: (name) => `${name}Value.value`,
-      resolvedTagCode: () => "resolvedTagValue.value",
-      helpers: helperImports,
-    };
-    // Template-context print ctx (computed refs auto-unwrap).
-    const templateCtx: TsPrintCtx = {
-      env,
-      propCode: (name) => {
-        if (name === "Class") return "callerClass";
-        const d = decls.find((x) => x.def.name === name);
-        if (!d) throw new Error(`${brick.id}/${part.name}: prop ${name} not declared for Vue`);
-        return `props.${d.local}`;
-      },
-      itemCode: (field) => `item.${localIdent(field)}`,
-      derivedCode: (name) => `${name}Value`,
-      resolvedTagCode: () => "resolvedTagValue",
-      helpers: helperImports,
-    };
-
-    // Props declaration.
-    const propsFields = decls.map((d) => `  ${d.local}?: ${d.tsType};`);
-
-    const body: string[] = [];
-    body.push(`const attrs = useAttrs();`);
-    body.push(`const callerClass = computed(() => attrs.class as string | undefined);`);
-    body.push(`const restAttrs = computed(() => {`);
-    body.push(`  const { class: _class, ...restEntries } = attrs;`);
-    body.push(`  return restEntries;`);
-    body.push(`});`);
-
-    if (part.classes) {
-      sharedValueImports.add(classesHelperName(part));
-      const inputs = classSpecProps(part.classes).map((n) => {
-        const d = decls.find((x) => x.def.name === n)!;
-        return `${d.local}: props.${d.local}`;
-      });
-      body.push(
-        `const cls = computed(() => ${classesHelperName(part)}({ ${[...inputs, "className: callerClass.value"].join(", ")} }));`
-      );
-    }
-    for (const [name, expr] of Object.entries(part.derived ?? {})) {
-      if (usesItem(expr, env)) throw new Error(`${brick.id}/${part.name}: derived ${name} uses loop item`);
-      body.push(`const ${name}Value = computed(() => ${printTsExpr(expr, scriptCtx)});`);
-    }
-
-    const root = part.render;
-    if (root.kind === "element" && root.tag.kind !== "static") {
-      if (root.tag.kind === "resolved") {
-        state.usesResolveTag = true;
-        const t = root.tag;
-        body.push(
-          `const resolvedTagValue = computed(() => resolveTag(props.${localIdent(t.fromProp)}, ${JSON.stringify(t.fallback)}, TagGroup.${t.group}));`
-        );
-      } else if (root.tag.kind === "heading") {
-        helperImports.add("titleTag");
-        body.push(
-          `const resolvedTagValue = computed(() => titleTag(props.${localIdent(root.tag.fromProp)}));`
-        );
-      } else {
-        body.push(`const resolvedTagValue = computed(() => ${printTsExpr(root.tag.expr, scriptCtx)});`);
-      }
-    }
-
-    const markup = this.printNode(root, templateCtx, part, state, { isRoot: true });
-
-    // Assemble imports.
-    const imports: string[] = [`import { computed, useAttrs } from "vue";`];
-    const sharedBits: string[] = [
-      ...[...sharedValueImports].sort(),
-      ...[...sharedTypeImports].sort().map((t) => `type ${t}`),
-    ];
-    if (sharedBits.length > 0) {
-      imports.push(`import { ${sharedBits.join(", ")} } from "./${fileStem(brick)}.shared";`);
-    }
-    if (state.usesCn) imports.push(`import { cn } from "${this.utilsPath}";`);
-    if (helperImports.size > 0) {
-      imports.push(`import { ${[...helperImports].sort().join(", ")} } from "${this.utilsPath}/expr";`);
-    }
-    if (state.usesResolveTag) {
-      imports.push(`import { resolveTag, TagGroup } from "${this.utilsPath}/tags";`);
-    }
-
-    const docs = part.docs
-      .split("\n")
-      .map((l) => `  ${l}`.trimEnd())
-      .join("\n");
-
-    const lines: string[] = [];
-    lines.push(`<!-- ${BANNER} -->`);
-    lines.push(`<!--\n${docs}\n-->`);
-    lines.push(`<script setup lang="ts">`);
-    for (const imp of imports) lines.push(imp);
-    lines.push(``);
-    lines.push(`defineOptions({ name: ${JSON.stringify(part.name)}, inheritAttrs: false });`);
-    lines.push(``);
-    if (propsFields.length > 0) {
-      lines.push(`const props = defineProps<{\n${propsFields.join("\n")}\n}>();`);
-      lines.push(``);
-    }
-    for (const stmt of body) lines.push(stmt);
-    lines.push(`</script>`);
-    lines.push(``);
-    lines.push(`<template>`);
-    lines.push(indent(markup, 1));
-    lines.push(`</template>`);
-
-    return {
-      path: `ui/${brick.dir}/${part.name}.vue`,
-      contents: lines.join("\n").replace(/\n{3,}/g, "\n\n").trimEnd() + "\n",
-    };
-  }
-
-  private printAttrs(
-    node: ElementNode,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesCn: boolean },
-    opts: { inLoop: boolean }
-  ): string[] {
-    return node.attrs.map((attr) => this.printAttr(attr, ctx, part, state, opts)).filter(Boolean);
-  }
-
-  private printAttr(
-    attr: AttrSpec,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesCn: boolean },
-    opts: { inLoop: boolean }
-  ): string {
-    switch (attr.kind) {
-      case "static":
-        return `${attr.name}=${JSON.stringify(attr.value)}`;
-      case "expr": {
-        if (isPassthroughForward(attr, part)) return "";
-        const value = printTsExpr(attr.expr, ctx);
-        const t = exprType(attr.expr, ctx.env);
-        if (attr.when) {
-          return `:${attr.name}="${escapeVue(`${printTsExpr(attr.when, ctx)} ? ${value} : undefined`)}"`;
-        }
-        if (attr.keepEmpty && t === "string") {
-          return `:${attr.name}="${escapeVue(`(${value}) ?? ''`)}"`;
-        }
-        if (t !== "string" || neverEmptyString(attr.expr, ctx.env)) {
-          return `:${attr.name}="${escapeVue(value)}"`;
-        }
-        ctx.helpers.add("orUndef");
-        return `:${attr.name}="${escapeVue(`orUndef(${value})`)}"`;
-      }
-      case "bool":
-        return `:${attr.name}="${escapeVue(`${printTsExpr(attr.expr, ctx)} || undefined`)}"`;
-      case "class": {
-        if (!attr.spec) return `:class="cls || undefined"`;
-        state.usesCn = true;
-        const inline = printInlineClassSpec(attr.spec, ctx, () =>
-          part.props.some((p) => p.name === "Class") && !opts.inLoop ? "callerClass" : undefined
-        );
-        return `:class="${escapeVue(`${inline} || undefined`)}"`;
-      }
-      case "rest":
-        return `v-bind="restAttrs"`;
-    }
-  }
-
-  private printNode(
-    node: Node,
-    ctx: TsPrintCtx,
-    part: PartDef,
-    state: { usesResolveTag: boolean; usesCn: boolean },
-    opts: { isRoot?: boolean; inLoop?: boolean; extraDirectives?: string[] } = {}
-  ): string {
-    switch (node.kind) {
-      case "element": {
-        const dynamic = node.tag.kind !== "static";
-        if (dynamic && !opts.isRoot) {
-          throw new Error(`${part.name}: dynamic tags only supported at part root`);
-        }
-        const tagCode = dynamic ? "component" : node.tag.kind === "static" ? node.tag.tag : "";
-        const attrs = this.printAttrs(node, ctx, part, state, { inLoop: opts.inLoop === true });
-        const openBits = [
-          tagCode,
-          ...(dynamic ? [`:is="resolvedTagValue"`] : []),
-          ...(opts.extraDirectives ?? []),
-          ...attrs,
-        ].join(" ");
-        // Vue ignores interpolation children on <textarea>; the content
-        // contract maps to :value (rendered as content during SSR).
-        if (tagCode === "textarea" && node.children.length === 1 && node.children[0]!.kind === "text") {
-          const value = printTsExpr((node.children[0] as { expr: Expr }).expr, ctx);
-          return `<${openBits} :value="${escapeVue(`(${value}) ?? ''`)}" />`;
-        }
-        if (node.void || node.children.length === 0) {
-          return `<${openBits} />`;
-        }
-        const children = node.children
-          .map((c) => this.printNode(c, ctx, part, state, { inLoop: opts.inLoop }))
-          .join("\n");
-        return `<${openBits}>\n${indent(children, 1)}\n</${dynamic ? "component" : tagCode}>`;
-      }
-      case "slot":
-        return `<slot />`;
-      case "text":
-        return `{{ ${printTsExpr(node.expr, ctx)} }}`;
-      case "when": {
-        const test = escapeVue(printTsExpr(node.test, ctx));
-        const printBranch = (nodes: Node[], directive: string): string => {
-          if (nodes.length === 1 && nodes[0]!.kind === "element") {
-            return this.printNode(nodes[0]!, ctx, part, state, {
-              ...opts,
-              extraDirectives: [directive],
-            });
-          }
-          const inner = nodes.map((c) => this.printNode(c, ctx, part, state, opts)).join("\n");
-          const dirName = directive.split("=")[0];
-          const attr = directive.includes("=") ? directive : dirName;
-          return `<template ${attr}>\n${indent(inner, 1)}\n</template>`;
-        };
-        const parts: string[] = [printBranch(node.then, `v-if="${test}"`)];
-        if (node.else && node.else.length === 1 && node.else[0]!.kind === "when") {
-          // else-if chain
-          const chained = this.printNode(node.else[0]!, ctx, part, state, opts)
-            .replace(/v-if="/, `v-else-if="`);
-          parts.push(chained);
-        } else if (node.else && node.else.length > 0) {
-          parts.push(printBranch(node.else, `v-else`));
-        }
-        return parts.join("\n");
-      }
-      case "forEach": {
-        const itemsCode = ctx.propCode(node.itemsProp);
-        const loop = `v-for="(item, index) in (${itemsCode} ?? [])"`;
-        if (node.body.length === 1 && node.body[0]!.kind === "element") {
-          return this.printNode(node.body[0]!, ctx, part, state, {
-            inLoop: true,
-            extraDirectives: [escapeVueAttr(loop), `:key="index"`],
-          });
-        }
-        const inner = node.body
-          .map((c) => this.printNode(c, ctx, part, state, { inLoop: true }))
-          .join("\n");
-        return `<template ${escapeVueAttr(loop)}>\n${indent(inner, 1)}\n</template>`;
-      }
-    }
-  }
-}
-
-/** Escape a JS expression for use inside a double-quoted Vue directive. */
-function escapeVue(code: string): string {
-  return code.replace(/"/g, "'");
-}
-
-function escapeVueAttr(code: string): string {
-  return code;
-}
diff --git a/src/infrastructure/cli.ts b/src/infrastructure/cli.ts
deleted file mode 100644
index acc9568..0000000
--- a/src/infrastructure/cli.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-#!/usr/bin/env node
-/**
- * ui8kit-codegen CLI.
- *
- *   generate [--out <dir>] [--go-module <module>] [--runtimes templ,react,svelte,vue,solid]
- *   check                                  validate all brick definitions
- *   list                                   list bricks and parts
- */
-
-import { bricks } from "../../bricks/index";
-import { fileStem } from "../domain/model";
-import { validateRegistry } from "../domain/validate";
-import {
-  ALL_RUNTIMES,
-  DEFAULT_GO_MODULE,
-  generateFiles,
-  phpSkippedParts,
-  writeFiles,
-  type RuntimeName,
-} from "../application/generate";
-
-function parseFlags(args: string[]): Record<string, string> {
-  const flags: Record<string, string> = {};
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i]!;
-    if (arg.startsWith("--")) {
-      flags[arg.slice(2)] = args[i + 1] && !args[i + 1]!.startsWith("--") ? args[++i]! : "true";
-    }
-  }
-  return flags;
-}
-
-async function main(): Promise<void> {
-  const [command, ...rest] = process.argv.slice(2);
-  const flags = parseFlags(rest);
-
-  switch (command) {
-    case "check": {
-      validateRegistry(bricks);
-      const parts = bricks.reduce((n, b) => n + b.parts.length, 0);
-      console.log(`OK: ${bricks.length} bricks, ${parts} parts validated.`);
-      return;
-    }
-    case "list": {
-      for (const brick of bricks) {
-        console.log(`${brick.id}  (ui/${brick.dir}/${fileStem(brick)}.*)`);
-        for (const part of brick.parts) console.log(`  - ${part.name}`);
-      }
-      return;
-    }
-    case "generate": {
-      const out = flags["out"] ?? "generated";
-      const goModule = flags["go-module"] ?? DEFAULT_GO_MODULE;
-      const runtimes = flags["runtimes"]
-        ? (flags["runtimes"].split(",") as RuntimeName[])
-        : ALL_RUNTIMES;
-      for (const r of runtimes) {
-        if (!ALL_RUNTIMES.includes(r)) throw new Error(`unknown runtime: ${r}`);
-      }
-      const files = await generateFiles(bricks, { goModule, runtimes });
-      await writeFiles(files, out);
-      console.log(
-        `Generated ${files.length} files for ${runtimes.join(", ")} into ${out}/ (${bricks.length} bricks).`
-      );
-      if (runtimes.includes("latte") || runtimes.includes("twig")) {
-        const skipped = phpSkippedParts(bricks);
-        const total = bricks.reduce((n, b) => n + b.parts.length, 0);
-        console.log(`PHP runtimes (latte/twig): ${total - skipped.length}/${total} parts.`);
-        for (const s of skipped) console.log(`  skipped ${s.brick}/${s.part}: ${s.reason}`);
-      }
-      return;
-    }
-    default:
-      console.error("Usage: ui8kit-codegen <generate|check|list> [flags]");
-      process.exitCode = 1;
-  }
-}
-
-main().catch((err) => {
-  console.error(err instanceof Error ? err.message : err);
-  process.exitCode = 1;
-});
diff --git a/tests/domain.test.ts b/tests/domain.test.ts
deleted file mode 100644
index da6a362..0000000
--- a/tests/domain.test.ts
+++ /dev/null
@@ -1,248 +0,0 @@
-/**
- * Domain unit tests: recipe composition, tag resolution, expression
- * evaluation, naming conventions, and definition validation.
- */
-
-import { describe, expect, it } from "vitest";
-
-import {
-  and,
-  boolToString,
-  concat,
-  cond,
-  defaultIfEmpty,
-  eq,
-  intMapOr,
-  isSet,
-  lit,
-  mapOr,
-  not,
-  oneOfOr,
-  or,
-  prop,
-} from "../src/domain/expr";
-import {
-  attrBool,
-  attrClass,
-  attrExpr,
-  attrRest,
-  el,
-  fwd,
-  slot,
-  type BrickDef,
-} from "../src/domain/model";
-import { htmlPropName, reactPropName } from "../src/domain/naming";
-import { composeRecipe, RecipeError, validateRecipe, type VariantRecipe } from "../src/domain/recipe";
-import { renderPart } from "../src/domain/render";
-import { resolveTag, titleTag } from "../src/domain/tags";
-import { DefinitionError, validateBrick } from "../src/domain/validate";
-
-const recipe: VariantRecipe = {
-  id: "test.button",
-  base: "inline-flex px-2",
-  keys: ["variant", "size"],
-  defaults: { variant: "default", size: "default" },
-  byKey: {
-    variant: { default: "bg-primary", ghost: "bg-transparent" },
-    size: { default: "h-10", sm: "h-8" },
-  },
-};
-
-describe("recipe", () => {
-  it("composes base, defaults, and extras in order", () => {
-    expect(composeRecipe(recipe, {})).toBe("inline-flex px-2 bg-primary h-10");
-    expect(composeRecipe(recipe, { variant: "ghost", size: "sm" }, "extra")).toBe(
-      "inline-flex px-2 bg-transparent h-8 extra"
-    );
-  });
-
-  it("caller classes win via tailwind-merge", () => {
-    expect(composeRecipe(recipe, {}, "px-8")).toContain("px-8");
-    expect(composeRecipe(recipe, {}, "px-8")).not.toContain("px-2");
-  });
-
-  it("throws on unknown variants (dev-strict, mirrors TS runtime)", () => {
-    expect(() => composeRecipe(recipe, { variant: "nope" })).toThrow(RecipeError);
-  });
-
-  it("rejects empty-string keys and dangling defaults", () => {
-    expect(() =>
-      validateRecipe({ ...recipe, byKey: { ...recipe.byKey, variant: { "": "x" } } })
-    ).toThrow(RecipeError);
-    expect(() => validateRecipe({ ...recipe, defaults: { variant: "missing" } })).toThrow(
-      RecipeError
-    );
-  });
-});
-
-describe("tags", () => {
-  it("resolves allowed tags and falls back otherwise", () => {
-    expect(resolveTag("ul", "div", "Stack")).toBe("ul");
-    expect(resolveTag("nav", "div", "Stack")).toBe("div");
-    expect(resolveTag("", "div", "Stack")).toBe("div");
-    expect(resolveTag("SECTION", "div", "Layout")).toBe("section");
-  });
-
-  it("titleTag defaults to h2", () => {
-    expect(titleTag(1)).toBe("h1");
-    expect(titleTag(0)).toBe("h2");
-    expect(titleTag(undefined)).toBe("h2");
-    expect(titleTag(6)).toBe("h6");
-  });
-});
-
-function testBrick(): BrickDef {
-  return {
-    id: "ui.test",
-    dir: "test",
-    docs: "Test brick.",
-    recipes: { test: recipe },
-    recipeFiles: { test: "test.variants.json" },
-    parts: [
-      {
-        name: "Test",
-        docs: "Test part.",
-        recipeId: "test",
-        classes: {
-          recipe: { variant: "Variant", size: "Size" },
-          state: [{ test: prop("Disabled"), classes: "opacity-50" }],
-        },
-        props: [
-          { name: "Variant", type: "string", cva: true },
-          { name: "Size", type: "string", cva: true },
-          { name: "Class", type: "string" },
-          { name: "Type", type: "string" },
-          { name: "Disabled", type: "bool" },
-          { name: "ID", type: "string", passthrough: true },
-          { name: "Attrs", type: "attrs" },
-          { name: "Children", type: "children" },
-        ],
-        render: el(
-          "button",
-          [
-            attrExpr("type", oneOfOr(prop("Type"), ["submit", "reset"], "button")),
-            attrClass(),
-            attrBool("disabled", prop("Disabled")),
-            fwd("id", "ID"),
-            attrExpr("aria-checked", boolToString(prop("Disabled"))),
-            attrRest(),
-          ],
-          [slot()]
-        ),
-      },
-    ],
-  };
-}
-
-describe("canonical renderer", () => {
-  const brick = testBrick();
-
-  it("renders the full attribute contract", () => {
-    const html = renderPart(brick, "Test", { Variant: "ghost" }, { children: "Hi" });
-    expect(html).toBe(
-      '<button type="button" class="inline-flex px-2 bg-transparent h-10" aria-checked="false">Hi</button>'
-    );
-  });
-
-  it("boolean attrs are present/absent; ARIA states always stringified", () => {
-    const on = renderPart(brick, "Test", { Disabled: true });
-    expect(on).toContain(" disabled");
-    expect(on).toContain('aria-checked="true"');
-    expect(on).toContain("opacity-50");
-    const off = renderPart(brick, "Test", {});
-    expect(off).not.toContain("disabled");
-    expect(off).toContain('aria-checked="false"');
-  });
-
-  it("omits empty string attrs, keeps rest-spread last (caller wins)", () => {
-    const html = renderPart(brick, "Test", { ID: "x" }, { rest: { id: "y", "data-a": "1" } });
-    expect(html).toContain('id="y"');
-    expect(html).toContain('data-a="1"');
-    expect(renderPart(brick, "Test", {})).not.toContain("id=");
-  });
-
-  it("escapes text children and attribute values", () => {
-    const html = renderPart(brick, "Test", { ID: "a<b" }, { children: undefined });
-    expect(html).toContain("a&lt;b");
-  });
-});
-
-describe("expressions", () => {
-  const brick = testBrick();
-  const cases: Array<[string, unknown, string]> = [
-    ["defaultIfEmpty", defaultIfEmpty(lit("  "), "text"), "text"],
-    ["mapOr", mapOr(lit("q"), { a: "b" }, "z"), "z"],
-    ["intMapOr fallback", intMapOr(lit(99), { 1: "one" }, "none"), "none"],
-    ["concat trims", concat(lit(" a "), lit(" b ")), "ab"],
-    ["cond", cond(lit(true), lit("x"), lit("y")), "x"],
-    ["bool algebra", cond(and(lit(true), or(lit(false), not(lit(false)))), lit("t"), lit("f")), "t"],
-    ["eq", cond(eq(lit("a"), lit("a")), lit("t"), lit("f")), "t"],
-    ["isSet blank", cond(isSet(lit("  ")), lit("t"), lit("f")), "f"],
-  ];
-  for (const [name, expr, expected] of cases) {
-    it(name, () => {
-      const html = renderPart(
-        {
-          ...brick,
-          parts: [
-            {
-              name: "E",
-              docs: "expr",
-              props: [],
-              render: el("i", [attrExpr("data-x", expr as never, { keepEmpty: true })], []),
-            },
-          ],
-        },
-        "E"
-      );
-      expect(html).toBe(`<i data-x="${expected}"></i>`);
-    });
-  }
-});
-
-describe("naming", () => {
-  it("maps canonical names per runtime family", () => {
-    expect(reactPropName({ name: "Class", type: "string" })).toBe("className");
-    expect(reactPropName({ name: "HTMLFor", type: "string" })).toBe("htmlFor");
-    expect(reactPropName({ name: "AriaLabel", type: "string" })).toBe("aria-label");
-    expect(htmlPropName({ name: "Class", type: "string" })).toBe("class");
-    expect(htmlPropName({ name: "HTMLFor", type: "string" })).toBe("for");
-    expect(htmlPropName({ name: "AriaLabel", type: "string" })).toBe("aria-label");
-    expect(htmlPropName({ name: "DataUI8Kit", type: "string" })).toBe("data-ui8kit");
-  });
-});
-
-describe("validation", () => {
-  it("accepts the reference brick", () => {
-    expect(() => validateBrick(testBrick())).not.toThrow();
-  });
-
-  it("rejects passthrough props referenced by expressions", () => {
-    const brick = testBrick();
-    brick.parts[0]!.props.find((p) => p.name === "Type")!.passthrough = true;
-    expect(() => validateBrick(brick)).toThrow(DefinitionError);
-  });
-
-  it("rejects passthrough forwards with mismatched attribute names", () => {
-    const brick = testBrick();
-    const render = brick.parts[0]!.render;
-    if (render.kind === "element") {
-      render.attrs = render.attrs.map((a) =>
-        a.kind === "expr" && a.name === "id" ? { ...a, name: "data-id" } : a
-      );
-    }
-    expect(() => validateBrick(brick)).toThrow(/native attribute/);
-  });
-
-  it("rejects cva props without a recipe key", () => {
-    const brick = testBrick();
-    brick.parts[0]!.props.push({ name: "Tone", type: "string", cva: true });
-    expect(() => validateBrick(brick)).toThrow(DefinitionError);
-  });
-
-  it("rejects slot usage without a children prop", () => {
-    const brick = testBrick();
-    brick.parts[0]!.props = brick.parts[0]!.props.filter((p) => p.type !== "children");
-    expect(() => validateBrick(brick)).toThrow(/children/);
-  });
-});
diff --git a/tests/emitters.test.ts b/tests/emitters.test.ts
deleted file mode 100644
index 48c3958..0000000
--- a/tests/emitters.test.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-/**
- * Emitter convention tests — structural properties of the generated code
- * that DOM parity alone cannot see (idioms, imports, escape hatches).
- */
-
-import { describe, expect, it } from "vitest";
-
-import { bricks } from "../bricks/index";
-import { generateFiles } from "../src/application/generate";
-import type { GeneratedFile } from "../src/emitters/common";
-
-const files: GeneratedFile[] = await generateFiles(bricks);
-
-function file(path: string): string {
-  const f = files.find((x) => x.path === path);
-  if (!f) throw new Error(`missing generated file: ${path}`);
-  return f.contents;
-}
-
-describe("templ emitter", () => {
-  const button = file("ui/button/button.templ");
-
-  it("uses boolean attribute syntax and the Attrs spread", () => {
-    expect(button).toContain("disabled?={ p.Disabled }");
-    expect(button).toContain("{ p.Attrs... }");
-    expect(button).toContain("{ children... }");
-  });
-
-  it("exports the Classes escape hatch", () => {
-    expect(button).toContain("func ButtonClasses(p ButtonProps) string");
-  });
-
-  it("embeds the shared recipe verbatim", () => {
-    const gen = file("ui/button/button_gen.go");
-    expect(gen).toContain("//go:embed button.variants.json");
-    expect(gen).toContain("uiutils.MustParseVariantRecipe");
-  });
-
-  it("resolves Tier-B tags through a local switch over the allow-list", () => {
-    const stack = file("ui/stack/stack.templ");
-    expect(stack).toContain('switch uiutils.ResolveTag(p.Tag, "div", uiutils.TagGroupStack)');
-    expect(stack).toContain('case "ul":');
-    expect(stack).toContain("default:");
-  });
-});
-
-describe("react emitter", () => {
-  const button = file("ui/button/button.tsx");
-
-  it("forwards refs and supports asChild via Slot", () => {
-    // Multi-root (button | a when href is set) widens the ref to HTMLElement.
-    expect(button).toContain("forwardRef<HTMLElement, ButtonProps>");
-    expect(button).toContain("if (asChild) {");
-    expect(button).toContain('import { Slot } from "../slot/slot"');
-  });
-
-  it("derives variant types from the shared contract module", () => {
-    expect(button).toContain('from "./button.shared"');
-    expect(file("ui/button/button.shared.ts")).toContain(
-      'export type ButtonVariant = RecipeKey<typeof buttonRecipe, "variant">'
-    );
-  });
-
-  it("maps the textarea content contract to defaultValue", () => {
-    expect(file("ui/textarea/textarea.tsx")).toContain("defaultValue={");
-  });
-});
-
-describe("svelte emitter", () => {
-  const button = file("ui/button/Button.svelte");
-
-  it("uses runes mode with snippets, not deprecated slots", () => {
-    expect(button).toContain("$props()");
-    expect(button).toContain("{@render children?.()}");
-    expect(button).not.toContain("<slot");
-  });
-
-  it("exports the props type from the module script", () => {
-    expect(button).toContain('<script lang="ts" module>');
-    expect(button).toContain("export type ButtonProps");
-  });
-
-  it("uses svelte:element for resolved tags", () => {
-    expect(file("ui/stack/Stack.svelte")).toContain("<svelte:element this={resolvedTagValue}");
-  });
-});
-
-describe("vue emitter", () => {
-  const button = file("ui/button/Button.vue");
-
-  it("disables inheritAttrs and merges caller class through cn", () => {
-    expect(button).toContain("inheritAttrs: false");
-    expect(button).toContain("callerClass");
-    expect(button).toContain('v-bind="restAttrs"');
-  });
-
-  it("uses component :is for resolved tags", () => {
-    expect(file("ui/stack/Stack.vue")).toContain('<component :is="resolvedTagValue"');
-  });
-});
-
-describe("solid emitter", () => {
-  const button = file("ui/button/button.solid.tsx");
-
-  it("uses splitProps and accepts class + className", () => {
-    expect(button).toContain("splitProps(props,");
-    expect(button).toContain("class?: string;");
-    expect(button).toContain("className?: string;");
-    expect(button).toContain("local.class ?? local.className");
-  });
-
-  it("uses Dynamic for resolved tags", () => {
-    expect(file("ui/stack/stack.solid.tsx")).toContain("<Dynamic component={resolvedTagValue()}");
-  });
-
-  it("maps the textarea content contract to a controlled value prop", () => {
-    expect(file("ui/textarea/textarea.solid.tsx")).toContain("value={(");
-  });
-});
-
-describe("behavior hooks", () => {
-  it("data-ui8kit defaults off in every runtime", () => {
-    for (const path of [
-      "ui/dialog/dialog.templ",
-      "ui/dialog/dialog.tsx",
-      "ui/dialog/Dialog.svelte",
-      "ui/dialog/Dialog.vue",
-      "ui/dialog/dialog.solid.tsx",
-    ]) {
-      expect(file(path), path).not.toContain('data-ui8kit="');
-    }
-  });
-});
-
-describe("barrels", () => {
-  it("cover every part per runtime", () => {
-    const react = file("ui/index.ts");
-    const svelte = file("ui/index.svelte.ts");
-    const vue = file("ui/index.vue.ts");
-    const solid = file("ui/index.solid.ts");
-    for (const brick of bricks) {
-      for (const part of brick.parts) {
-        expect(svelte).toContain(`export { default as ${part.name} }`);
-        expect(vue).toContain(`export { default as ${part.name} }`);
-      }
-      expect(solid).toContain(`export * from "./${brick.dir}/`);
-    }
-    expect(react).toContain('export * from "./slot/slot"');
-    expect(solid).toContain('export * from "./shared"');
-    expect(solid).toContain(".solid");
-  });
-});
diff --git a/tests/global-setup.ts b/tests/global-setup.ts
deleted file mode 100644
index 629d207..0000000
--- a/tests/global-setup.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Regenerates `generated/` before the test run so parity tests always
- * exercise the current emitters.
- */
-
-import { ensureGenerated } from "./support/ensure-generated";
-
-export default async function setup(): Promise<void> {
-  await ensureGenerated();
-}
diff --git a/tests/parity.latte.test.ts b/tests/parity.latte.test.ts
deleted file mode 100644
index ce7bf53..0000000
--- a/tests/parity.latte.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Latte runtime parity — renders every generated .latte part through the PHP
- * harness (`cmd/parity-latte`) and asserts the normalized DOM equals the
- * canonical renderer's output. Requires a PHP toolchain; skipped otherwise.
- * Parts outside the PHP support predicate are not generated (see
- * src/domain/php-support.ts) and are excluded here symmetrically.
- */
-
-import { describe, it } from "vitest";
-
-import { phpParityAvailable, runPhpParity } from "./support/php";
-
-describe.skipIf(!phpParityAvailable())("latte runtime parity", () => {
-  it("renders all supported parts identically to the canonical renderer", { timeout: 120_000 }, () => {
-    runPhpParity("parity-latte", "latte");
-  });
-});
diff --git a/tests/parity.templ.test.ts b/tests/parity.templ.test.ts
deleted file mode 100644
index 90ee6e4..0000000
--- a/tests/parity.templ.test.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Templ runtime parity — renders every generated .templ part through a Go
- * harness (`cmd/parity`) and asserts the normalized DOM equals the canonical
- * renderer's output. Requires a Go toolchain; the suite is skipped when
- * `go` is not installed.
- */
-
-import { execFileSync, spawnSync } from "node:child_process";
-import { join, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-import { describe, expect, it } from "vitest";
-
-import { bricks } from "../bricks/index";
-import { fileStem } from "../src/domain/model";
-import { renderPart } from "../src/domain/render";
-import { showcaseCases } from "./support/fixtures";
-import { normalizeHtml } from "./support/normalize";
-import { hasChildren, knownCanonicalProps, type CanonicalProps } from "./support/props";
-
-const GENERATED = join(dirname(fileURLToPath(import.meta.url)), "..", "generated");
-const CHILD_TEXT = "Content";
-
-function goAvailable(): boolean {
-  return spawnSync("go", ["version"], { stdio: "ignore" }).status === 0;
-}
-
-interface Case {
-  name: string;
-  props: CanonicalProps;
-  children: string;
-  expected: string;
-  label: string;
-}
-
-const available = goAvailable();
-
-describe.skipIf(!available)("templ runtime parity", () => {
-  const casesList: Case[] = [];
-  for (const brick of bricks) {
-    const showcases = showcaseCases(brick);
-    for (const part of brick.parts) {
-      const partCases: Array<{ id: string; props: CanonicalProps }> = [
-        { id: "defaults", props: {} },
-        ...showcases
-          .map((c) => ({ id: c.id, props: knownCanonicalProps(brick, part, c.props) }))
-          .filter((c): c is { id: string; props: CanonicalProps } =>
-            c.props !== undefined && Object.keys(c.props).length > 0
-          ),
-      ];
-      for (const testCase of partCases) {
-        const children = hasChildren(part) ? CHILD_TEXT : "";
-        casesList.push({
-          name: `${brick.dir}/${fileStem(brick)}/${part.name}`,
-          props: testCase.props,
-          children,
-          expected: renderPart(brick, part.name, testCase.props, {
-            children: children || undefined,
-          }),
-          label: `${brick.id} ${part.name} · ${testCase.id}`,
-        });
-      }
-    }
-  }
-
-  it("renders all parts identically to the canonical renderer", { timeout: 300_000 }, () => {
-    execFileSync("go", ["run", "github.com/a-h/templ/cmd/templ@v0.3.1001", "generate"], {
-      cwd: GENERATED,
-      stdio: ["ignore", "ignore", "inherit"],
-    });
-    execFileSync("go", ["mod", "tidy"], {
-      cwd: GENERATED,
-      stdio: ["ignore", "ignore", "inherit"],
-    });
-    const stdout = execFileSync("go", ["run", "./cmd/parity"], {
-      cwd: GENERATED,
-      input: JSON.stringify(
-        casesList.map((c) => ({ name: c.name, props: c.props, children: c.children }))
-      ),
-      encoding: "utf8",
-      maxBuffer: 64 * 1024 * 1024,
-    });
-    const results = JSON.parse(stdout) as string[];
-    expect(results).toHaveLength(casesList.length);
-    for (let i = 0; i < casesList.length; i++) {
-      const c = casesList[i]!;
-      expect(normalizeHtml(results[i]!), `templ ≠ canonical: ${c.label}`).toEqual(
-        normalizeHtml(c.expected)
-      );
-    }
-  });
-});
diff --git a/tests/parity.test.ts b/tests/parity.test.ts
deleted file mode 100644
index c039a0c..0000000
--- a/tests/parity.test.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * Runtime parity — the core guarantee of the engine.
- *
- * For every brick, every part, and every showcase fixture, the generated
- * React, Svelte 5, Vue 3, and SolidJS components are server-rendered and their
- * normalized DOM must equal the canonical renderer's output (the executable
- * specification derived from the same IR the Templ emitter prints).
- */
-
-import { describe, expect, it } from "vitest";
-import { createElement, type ComponentType } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { render as svelteRender } from "svelte/server";
-import { createRawSnippet, type Component } from "svelte";
-import { createSSRApp, h, type Component as VueComponent } from "vue";
-import { renderToString as vueRenderToString } from "@vue/server-renderer";
-import { createComponent, type Component as SolidComponent } from "solid-js";
-import { renderToString as solidRenderToString } from "solid-js/web";
-
-import { bricks } from "../bricks/index";
-import { fileStem, type BrickDef, type PartDef } from "../src/domain/model";
-import { renderPart } from "../src/domain/render";
-import { ensureGenerated } from "./support/ensure-generated";
-import { loadGeneratedUiModules } from "./support/generated-ui";
-import { showcaseCases } from "./support/fixtures";
-import { normalizeHtml } from "./support/normalize";
-import {
-  hasChildren,
-  htmlRuntimeProps,
-  knownCanonicalProps,
-  reactProps,
-  solidProps,
-  vueProps,
-  type CanonicalProps,
-} from "./support/props";
-
-await ensureGenerated();
-const { reactModules, svelteModules, vueModules, solidModules } = await loadGeneratedUiModules();
-
-const CHILD_TEXT = "Content";
-
-type ReactModule = Record<string, ComponentType<Record<string, unknown>>>;
-type SolidModule = Record<string, SolidComponent<Record<string, unknown>>>;
-
-function reactComponent(brick: BrickDef, part: PartDef) {
-  const mod = reactModules[`../generated/ui/${brick.dir}/${fileStem(brick)}.tsx`] as ReactModule;
-  const comp = mod?.[part.name];
-  if (!comp) throw new Error(`React component ${part.name} not found for ${brick.id}`);
-  return comp;
-}
-
-function svelteComponent(brick: BrickDef, part: PartDef): Component {
-  const mod = svelteModules[`../generated/ui/${brick.dir}/${part.name}.svelte`] as {
-    default: Component;
-  };
-  if (!mod?.default) throw new Error(`Svelte component ${part.name} not found for ${brick.id}`);
-  return mod.default;
-}
-
-function vueComponent(brick: BrickDef, part: PartDef): VueComponent {
-  const mod = vueModules[`../generated/ui/${brick.dir}/${part.name}.vue`] as {
-    default: VueComponent;
-  };
-  if (!mod?.default) throw new Error(`Vue component ${part.name} not found for ${brick.id}`);
-  return mod.default;
-}
-
-function solidComponent(brick: BrickDef, part: PartDef): SolidComponent<Record<string, unknown>> {
-  const mod = solidModules[`../generated/ui/${brick.dir}/${fileStem(brick)}.solid.tsx`] as SolidModule;
-  const comp = mod?.[part.name];
-  if (!comp) throw new Error(`Solid component ${part.name} not found for ${brick.id}`);
-  return comp;
-}
-
-async function renderAllRuntimes(
-  brick: BrickDef,
-  part: PartDef,
-  canonical: CanonicalProps
-): Promise<{ canonical: string; react: string; svelte: string; vue: string; solid: string }> {
-  const withChildren = hasChildren(part);
-
-  const canonicalHtml = renderPart(brick, part.name, canonical, {
-    children: withChildren ? CHILD_TEXT : undefined,
-  });
-
-  const reactHtml = renderToStaticMarkup(
-    createElement(
-      reactComponent(brick, part),
-      reactProps(part, canonical),
-      withChildren ? CHILD_TEXT : undefined
-    )
-  );
-
-  const svelteProps = htmlRuntimeProps(part, canonical);
-  if (withChildren) {
-    svelteProps["children"] = createRawSnippet(() => ({ render: () => CHILD_TEXT }));
-  }
-  const svelteHtml = svelteRender(svelteComponent(brick, part), {
-    props: svelteProps as Record<string, unknown>,
-  }).body;
-
-  const app = createSSRApp({
-    render: () =>
-      h(
-        vueComponent(brick, part),
-        vueProps(part, canonical),
-        withChildren ? { default: () => CHILD_TEXT } : undefined
-      ),
-  });
-  const vueHtml = await vueRenderToString(app);
-
-  const solidHtml = solidRenderToString(() =>
-    createComponent(solidComponent(brick, part), {
-      ...solidProps(part, canonical),
-      ...(withChildren ? { children: CHILD_TEXT } : {}),
-    })
-  );
-
-  return {
-    canonical: canonicalHtml,
-    react: reactHtml,
-    svelte: svelteHtml,
-    vue: vueHtml,
-    solid: solidHtml,
-  };
-}
-
-for (const brick of bricks) {
-  describe(brick.id.replace(/\./g, "/"), () => {
-    const cases = showcaseCases(brick);
-
-    for (const part of brick.parts) {
-      const partCases: Array<{ id: string; props: CanonicalProps }> = [
-        { id: "defaults", props: {} },
-        ...cases
-          .map((c) => ({ id: c.id, props: knownCanonicalProps(brick, part, c.props) }))
-          .filter((c): c is { id: string; props: CanonicalProps } =>
-            c.props !== undefined && Object.keys(c.props).length > 0
-          ),
-      ];
-
-      for (const testCase of partCases) {
-        it(`${part.name} · ${testCase.id}`, async () => {
-          const out = await renderAllRuntimes(brick, part, testCase.props);
-          const expected = normalizeHtml(out.canonical);
-          expect(normalizeHtml(out.react), "react ≠ canonical").toEqual(expected);
-          expect(normalizeHtml(out.svelte), "svelte ≠ canonical").toEqual(expected);
-          expect(normalizeHtml(out.vue), "vue ≠ canonical").toEqual(expected);
-          expect(normalizeHtml(out.solid), "solid ≠ canonical").toEqual(expected);
-        });
-      }
-    }
-  });
-}
diff --git a/tests/parity.twig.test.ts b/tests/parity.twig.test.ts
deleted file mode 100644
index e809f8f..0000000
--- a/tests/parity.twig.test.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Twig runtime parity — same contract as parity.latte.test.ts, rendered
- * through `cmd/parity-twig` with the UI8Kit Twig extension.
- */
-
-import { describe, it } from "vitest";
-
-import { phpParityAvailable, runPhpParity } from "./support/php";
-
-describe.skipIf(!phpParityAvailable())("twig runtime parity", () => {
-  it("renders all supported parts identically to the canonical renderer", { timeout: 120_000 }, () => {
-    runPhpParity("parity-twig", "html.twig");
-  });
-});
diff --git a/tests/preload-bun.ts b/tests/preload-bun.ts
deleted file mode 100644
index 7e83009..0000000
--- a/tests/preload-bun.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Bun test preload: compile generated .svelte (SSR), .vue SFCs, and
- * `.solid.tsx` (Solid SSR via babel-preset-solid) before parity tests import
- * them. React `.tsx` files (not `*.solid.tsx`) are handled natively by Bun.
- */
-
-import { readFileSync } from "node:fs";
-import { transformSync } from "@babel/core";
-import { plugin } from "bun";
-import solid from "babel-preset-solid";
-import typescript from "@babel/preset-typescript";
-import { compile } from "svelte/compiler";
-import { compileScript, parse } from "@vue/compiler-sfc";
-
-await plugin({
-  name: "ui8kit svelte ssr loader",
-  setup(builder) {
-    builder.onLoad({ filter: /\.svelte(\?[^.]+)?$/ }, ({ path }) => {
-      const filePath = path.includes("?") ? path.slice(0, path.indexOf("?")) : path;
-      const source = readFileSync(filePath, "utf-8");
-      const result = compile(source, {
-        filename: filePath,
-        generate: "server",
-        dev: false,
-      });
-      return { contents: result.js.code, loader: "js" };
-    });
-  },
-});
-
-await plugin({
-  name: "ui8kit vue sfc loader",
-  setup(builder) {
-    builder.onLoad({ filter: /\.vue(\?[^.]+)?$/ }, ({ path }) => {
-      const filePath = path.includes("?") ? path.slice(0, path.indexOf("?")) : path;
-      const source = readFileSync(filePath, "utf-8");
-      const { descriptor, errors } = parse(source, { filename: filePath });
-      if (errors.length) {
-        throw new AggregateError(errors, `Failed to parse ${filePath}`);
-      }
-      const script = compileScript(descriptor, {
-        id: filePath,
-        inlineTemplate: true,
-      });
-      return { contents: script.content, loader: "ts" };
-    });
-  },
-});
-
-await plugin({
-  name: "ui8kit solid ssr loader",
-  setup(builder) {
-    builder.onLoad({ filter: /\.solid\.tsx$/ }, ({ path }) => {
-      const source = readFileSync(path, "utf-8");
-      const result = transformSync(source, {
-        filename: path,
-        presets: [
-          [typescript, { isTSX: true, allExtensions: true }],
-          [solid, { generate: "ssr", hydratable: false }],
-        ],
-        babelrc: false,
-        configFile: false,
-        sourceMaps: "inline",
-      });
-      if (!result?.code) throw new Error(`Solid SSR transform failed for ${path}`);
-      return { contents: result.code, loader: "js" };
-    });
-  },
-});
diff --git a/tests/shims.d.ts b/tests/shims.d.ts
deleted file mode 100644
index 8396a8a..0000000
--- a/tests/shims.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare module "babel-preset-solid";
-declare module "@babel/preset-typescript";
diff --git a/tests/support/ensure-generated.ts b/tests/support/ensure-generated.ts
deleted file mode 100644
index 8677274..0000000
--- a/tests/support/ensure-generated.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Write `generated/` before parity tests. Vitest runs this via global-setup;
- * `bun test` has no global hook, so importers call it at module load.
- */
-
-import { bricks } from "../../bricks/index";
-import { generateFiles, writeFiles } from "../../src/application/generate";
-
-let done = false;
-
-export async function ensureGenerated(): Promise<void> {
-  if (done) return;
-  await writeFiles(await generateFiles(bricks), "generated");
-  done = true;
-}
diff --git a/tests/support/fixtures.ts b/tests/support/fixtures.ts
deleted file mode 100644
index ea5ab41..0000000
--- a/tests/support/fixtures.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Showcase fixtures: canonical prop payloads per brick, sourced from the
- * colocated `*.data.json` files (same fixtures the upstream registry uses).
- */
-
-import { readdirSync, readFileSync, existsSync } from "node:fs";
-import { join, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
-import type { BrickDef } from "../../src/domain/model";
-import { fileStem } from "../../src/domain/model";
-
-const BRICKS_ROOT = join(dirname(fileURLToPath(import.meta.url)), "..", "..", "bricks");
-
-export interface ShowcaseCase {
-  id: string;
-  props: Record<string, unknown>;
-}
-
-export function showcaseCases(brick: BrickDef): ShowcaseCase[] {
-  const file = join(BRICKS_ROOT, brick.dir, `${fileStem(brick)}.data.json`);
-  if (!existsSync(file)) return [];
-  const data = JSON.parse(readFileSync(file, "utf8")) as {
-    showcase?: Record<string, { props?: Record<string, unknown> }>;
-  };
-  return Object.entries(data.showcase ?? {}).map(([id, entry]) => ({
-    id,
-    props: entry.props ?? {},
-  }));
-}
-
-export function allDataFiles(): string[] {
-  return readdirSync(BRICKS_ROOT, { recursive: true, encoding: "utf8" }).filter((f) =>
-    f.endsWith(".data.json")
-  );
-}
diff --git a/tests/support/generated-ui.ts b/tests/support/generated-ui.ts
deleted file mode 100644
index 029208b..0000000
--- a/tests/support/generated-ui.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Load generated React/Svelte/Vue/Solid modules without Vite's import.meta.glob so
- * parity tests run under `bun test` as well as Vitest.
- */
-
-import { existsSync, readdirSync, statSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath, pathToFileURL } from "node:url";
-
-const GENERATED_UI = join(dirname(fileURLToPath(import.meta.url)), "..", "..", "generated", "ui");
-
-export interface GeneratedUiModules {
-  reactModules: Record<string, Record<string, unknown>>;
-  svelteModules: Record<string, { default: unknown }>;
-  vueModules: Record<string, { default: unknown }>;
-  solidModules: Record<string, Record<string, unknown>>;
-}
-
-function partitionTsx(
-  all: Record<string, unknown>
-): {
-  reactModules: Record<string, Record<string, unknown>>;
-  solidModules: Record<string, Record<string, unknown>>;
-} {
-  const reactModules: Record<string, Record<string, unknown>> = {};
-  const solidModules: Record<string, Record<string, unknown>> = {};
-  for (const [key, mod] of Object.entries(all)) {
-    if (key.endsWith(".solid.tsx")) solidModules[key] = mod as Record<string, unknown>;
-    else reactModules[key] = mod as Record<string, unknown>;
-  }
-  return { reactModules, solidModules };
-}
-
-/** Eager-load every generated ui component module (tsx, solid.tsx, svelte, vue). */
-export async function loadGeneratedUiModules(): Promise<GeneratedUiModules> {
-  const globFn = (
-    import.meta as ImportMeta & {
-      glob?: (pattern: string, options: { eager: true }) => Record<string, unknown>;
-    }
-  ).glob;
-
-  if (typeof globFn === "function") {
-    const { reactModules, solidModules } = partitionTsx(
-      globFn("../generated/ui/*/*.tsx", { eager: true })
-    );
-    return {
-      reactModules,
-      solidModules,
-      svelteModules: globFn("../generated/ui/*/*.svelte", { eager: true }) as GeneratedUiModules["svelteModules"],
-      vueModules: globFn("../generated/ui/*/*.vue", { eager: true }) as GeneratedUiModules["vueModules"],
-    };
-  }
-
-  const reactModules: Record<string, Record<string, unknown>> = {};
-  const svelteModules: Record<string, { default: unknown }> = {};
-  const vueModules: Record<string, { default: unknown }> = {};
-  const solidModules: Record<string, Record<string, unknown>> = {};
-
-  if (!existsSync(GENERATED_UI)) {
-    return { reactModules, svelteModules, vueModules, solidModules };
-  }
-
-  for (const dir of readdirSync(GENERATED_UI)) {
-    const dirPath = join(GENERATED_UI, dir);
-    if (!statSync(dirPath).isDirectory()) continue;
-
-    for (const file of readdirSync(dirPath)) {
-      const relKey = `../generated/ui/${dir}/${file}`;
-      const url = pathToFileURL(join(dirPath, file)).href;
-
-      if (file.endsWith(".solid.tsx")) {
-        solidModules[relKey] = (await import(url)) as Record<string, unknown>;
-      } else if (file.endsWith(".tsx")) {
-        reactModules[relKey] = (await import(url)) as Record<string, unknown>;
-      } else if (file.endsWith(".svelte")) {
-        svelteModules[relKey] = (await import(url)) as { default: unknown };
-      } else if (file.endsWith(".vue")) {
-        vueModules[relKey] = (await import(url)) as { default: unknown };
-      }
-    }
-  }
-
-  return { reactModules, svelteModules, vueModules, solidModules };
-}
diff --git a/tests/support/normalize.ts b/tests/support/normalize.ts
deleted file mode 100644
index 8635778..0000000
--- a/tests/support/normalize.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * DOM normalization for cross-runtime parity assertions. Renders differ in
- * incidental ways (attribute order, self-closing syntax, framework SSR
- * comment markers); the *contract* is the normalized node tree.
- */
-
-import { parseFragment } from "parse5";
-import { twMerge } from "tailwind-merge";
-
-type P5Node = {
-  nodeName: string;
-  tagName?: string;
-  value?: string;
-  attrs?: Array<{ name: string; value: string }>;
-  childNodes?: P5Node[];
-};
-
-export interface NormalizedNode {
-  tag: string;
-  attrs: Record<string, string>;
-  children: (NormalizedNode | string)[];
-}
-
-function normalizeClass(value: string): string {
-  // Class parity is the *effective* utility set: Go's Cn concatenates while
-  // cn() tailwind-merges, so conflicts are resolved (last wins — the same
-  // outcome Tailwind's own CSS ordering produces) before the set comparison.
-  return [...new Set(twMerge(value).trim().split(/\s+/).filter(Boolean))].sort().join(" ");
-}
-
-function normalizeNode(node: P5Node): NormalizedNode | string | null {
-  if (node.nodeName === "#text") {
-    const text = (node.value ?? "").trim();
-    return text === "" ? null : text;
-  }
-  if (node.nodeName === "#comment") return null; // framework SSR markers
-  if (!node.tagName) return null;
-
-  const attrs: Record<string, string> = {};
-  let textareaValue: string | undefined;
-  for (const attr of node.attrs ?? []) {
-    // Svelte SSR adds event-replay shims on media elements; not part of the
-    // DOM contract.
-    if ((attr.name === "onload" || attr.name === "onerror") && attr.value === "this.__e=event") {
-      continue;
-    }
-    if (attr.name === "class") {
-      const cls = normalizeClass(attr.value);
-      // `class=""` is inert; runtimes differ on emitting vs omitting it.
-      if (cls !== "") attrs["class"] = cls;
-      continue;
-    }
-    // Solid SSR (`Dynamic` / hydratable markers) — not part of the DOM contract.
-    if (attr.name === "data-hk") continue;
-    // Solid controlled textarea uses value=; other runtimes put text as children.
-    if (attr.name === "value" && node.tagName === "textarea") {
-      textareaValue = attr.value;
-      continue;
-    }
-    attrs[attr.name] = attr.value;
-  }
-  let children = mergeText(
-    (node.childNodes ?? [])
-      .map(normalizeNode)
-      .filter((c): c is NormalizedNode | string => c !== null)
-  );
-  if (textareaValue !== undefined && children.length === 0 && textareaValue !== "") {
-    children = [textareaValue];
-  }
-  return { tag: node.tagName, attrs, children };
-}
-
-/** SSR comment markers split text nodes; adjacent text is one logical node. */
-function mergeText(children: (NormalizedNode | string)[]): (NormalizedNode | string)[] {
-  const out: (NormalizedNode | string)[] = [];
-  for (const child of children) {
-    const last = out[out.length - 1];
-    if (typeof child === "string" && typeof last === "string") {
-      out[out.length - 1] = last + child;
-    } else {
-      out.push(child);
-    }
-  }
-  return out;
-}
-
-export function normalizeHtml(html: string): (NormalizedNode | string)[] {
-  const fragment = parseFragment(html) as unknown as { childNodes: P5Node[] };
-  return mergeText(
-    fragment.childNodes
-      .map(normalizeNode)
-      .filter((c): c is NormalizedNode | string => c !== null)
-  );
-}
diff --git a/tests/support/php.ts b/tests/support/php.ts
deleted file mode 100644
index a59b2f6..0000000
--- a/tests/support/php.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * PHP parity support: toolchain detection and the shared batch runner for
- * the generated Latte/Twig harnesses (`cmd/parity-latte`, `cmd/parity-twig`).
- * Suites are skipped when php is not installed — same policy as Go Templ.
- */
-
-import { execFileSync, spawnSync } from "node:child_process";
-import { existsSync } from "node:fs";
-import { join, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-import { expect } from "vitest";
-
-import { bricks } from "../../bricks/index";
-import { phpSupported } from "../../src/domain/php-support";
-import { renderPart } from "../../src/domain/render";
-import { showcaseCases } from "./fixtures";
-import { normalizeHtml } from "./normalize";
-import { hasChildren, knownCanonicalProps, phpProps, type CanonicalProps } from "./props";
-
-export const GENERATED = join(dirname(fileURLToPath(import.meta.url)), "..", "..", "generated");
-
-export function phpAvailable(): boolean {
-  return spawnSync("php", ["-v"], { stdio: "ignore" }).status === 0;
-}
-
-/** PHP parity needs vendor deps; skip when composer is missing and vendor is not installed. */
-export function phpParityAvailable(): boolean {
-  if (!phpAvailable()) return false;
-  if (existsSync(join(GENERATED, "php", "vendor", "autoload.php"))) return true;
-  return spawnSync("composer", ["--version"], { stdio: "ignore" }).status === 0;
-}
-
-/** Install Latte/Twig into generated/php/vendor once per checkout. */
-export function ensureComposerInstall(): void {
-  if (existsSync(join(GENERATED, "php", "vendor", "autoload.php"))) return;
-  execFileSync("composer", ["install", "--no-interaction", "--quiet"], {
-    cwd: GENERATED,
-    stdio: ["ignore", "ignore", "inherit"],
-  });
-}
-
-export interface PhpCase {
-  template: string;
-  props: Record<string, unknown>;
-  attrs: Record<string, unknown>;
-  children: string;
-}
-
-export function runPhpHarness(harness: "parity-latte" | "parity-twig", cases: PhpCase[]): string[] {
-  const stdout = execFileSync("php", [join("cmd", harness, "main.php")], {
-    cwd: GENERATED,
-    input: JSON.stringify(cases),
-    encoding: "utf8",
-    maxBuffer: 64 * 1024 * 1024,
-  });
-  return JSON.parse(stdout) as string[];
-}
-
-const CHILD_TEXT = "Content";
-
-interface ParityCase extends PhpCase {
-  expected: string;
-  label: string;
-}
-
-function buildCases(ext: string): ParityCase[] {
-  const out: ParityCase[] = [];
-  for (const brick of bricks) {
-    const showcases = showcaseCases(brick);
-    for (const part of brick.parts) {
-      if (!phpSupported(part).ok) continue;
-      const partCases: Array<{ id: string; props: CanonicalProps }> = [
-        { id: "defaults", props: {} },
-        ...showcases
-          .map((c) => ({ id: c.id, props: knownCanonicalProps(brick, part, c.props) }))
-          .filter((c): c is { id: string; props: CanonicalProps } =>
-            c.props !== undefined && Object.keys(c.props).length > 0
-          ),
-      ];
-      for (const testCase of partCases) {
-        const children = hasChildren(part) ? CHILD_TEXT : "";
-        out.push({
-          template: `${brick.dir}/${part.name}.${ext}`,
-          props: phpProps(part, testCase.props),
-          attrs: {},
-          children,
-          expected: renderPart(brick, part.name, testCase.props, {
-            children: children || undefined,
-          }),
-          label: `${brick.id} ${part.name} · ${testCase.id}`,
-        });
-      }
-    }
-  }
-  return out;
-}
-
-/** Render every supported part × fixture and assert DOM parity. */
-export function runPhpParity(harness: "parity-latte" | "parity-twig", ext: string): void {
-  const cases = buildCases(ext);
-  ensureComposerInstall();
-  const results = runPhpHarness(
-    harness,
-    cases.map(({ template, props, attrs, children }) => ({ template, props, attrs, children }))
-  );
-  expect(results).toHaveLength(cases.length);
-  for (let i = 0; i < cases.length; i++) {
-    const c = cases[i]!;
-    expect(normalizeHtml(results[i]!), `${harness} ≠ canonical: ${c.label}`).toEqual(
-      normalizeHtml(c.expected)
-    );
-  }
-}
diff --git a/tests/support/props.ts b/tests/support/props.ts
deleted file mode 100644
index d4ef44d..0000000
--- a/tests/support/props.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Test support: translate canonical (PascalCase) showcase props into each
- * runtime's prop shape, mirroring the documented naming conventions.
- */
-
-import type { BrickDef, PartDef, PropDef } from "../../src/domain/model";
-export type { BrickDef };
-import { htmlPropName, localIdent, phpPropName, reactPropName } from "../../src/domain/naming";
-
-export type CanonicalProps = Record<string, unknown>;
-
-function itemsToRuntime(value: unknown): unknown {
-  if (!Array.isArray(value)) return value;
-  return value.map((entry) => {
-    const out: Record<string, unknown> = {};
-    for (const [k, v] of Object.entries(entry as Record<string, unknown>)) {
-      out[localIdent(k)] = v;
-    }
-    return out;
-  });
-}
-
-function splitProps(part: PartDef, canonical: CanonicalProps) {
-  const declared: Array<[PropDef, unknown]> = [];
-  const passthrough: Array<[PropDef, unknown]> = [];
-  for (const [name, value] of Object.entries(canonical)) {
-    const def = part.props.find((p) => p.name === name);
-    if (!def) continue; // unknown/deprecated showcase props are dropped
-    if (def.passthrough) passthrough.push([def, value]);
-    else declared.push([def, value]);
-  }
-  return { declared, passthrough };
-}
-
-/**
- * Filter canonical props down to the ones the part actually declares.
- * Showcase fixtures are brick-wide; multi-part bricks share one fixture file,
- * so cva values that don't exist in this part's recipe mark the case as not
- * applicable (returns undefined).
- */
-export function knownCanonicalProps(
-  brick: BrickDef,
-  part: PartDef,
-  canonical: CanonicalProps
-): CanonicalProps | undefined {
-  const out: CanonicalProps = {};
-  for (const [name, value] of Object.entries(canonical)) {
-    const def = part.props.find((p) => p.name === name);
-    if (!def) continue;
-    if (def.cva) {
-      const recipe = part.recipeId ? brick.recipes[part.recipeId] : undefined;
-      const key = def.cvaKey ?? def.name.toLowerCase();
-      const choices = recipe?.byKey[key] ?? {};
-      if (typeof value === "string" && value !== "" && choices[value] === undefined) {
-        return undefined;
-      }
-    }
-    out[name] = value;
-  }
-  return out;
-}
-
-export function reactProps(part: PartDef, canonical: CanonicalProps): Record<string, unknown> {
-  const { declared, passthrough } = splitProps(part, canonical);
-  const out: Record<string, unknown> = {};
-  for (const [def, value] of declared) {
-    if (def.name === "Class") out["className"] = value;
-    else if (def.type === "items") out[reactPropName(def)] = itemsToRuntime(value);
-    else out[reactPropName(def)] = value;
-  }
-  // Passthrough props arrive as native DOM attributes through rest.
-  for (const [def, value] of passthrough) out[htmlPropName(def)] = value;
-  return out;
-}
-
-/**
- * Solid: camelCase declared props (like React), HTML-native `class` primary.
- * `className` is also accepted by generated components as an alias.
- */
-export function solidProps(part: PartDef, canonical: CanonicalProps): Record<string, unknown> {
-  const { declared, passthrough } = splitProps(part, canonical);
-  const out: Record<string, unknown> = {};
-  for (const [def, value] of declared) {
-    if (def.name === "Class") out["class"] = value;
-    else if (def.type === "items") out[reactPropName(def)] = itemsToRuntime(value);
-    else out[reactPropName(def)] = value;
-  }
-  for (const [def, value] of passthrough) out[htmlPropName(def)] = value;
-  return out;
-}
-
-/** Svelte and Vue share HTML-native prop naming. */
-export function htmlRuntimeProps(part: PartDef, canonical: CanonicalProps): Record<string, unknown> {
-  const { declared, passthrough } = splitProps(part, canonical);
-  const out: Record<string, unknown> = {};
-  for (const [def, value] of declared) {
-    if (def.name === "Class") out["class"] = value;
-    else if (def.type === "items") out[htmlPropName(def)] = itemsToRuntime(value);
-    else out[htmlPropName(def)] = value;
-  }
-  for (const [def, value] of passthrough) out[htmlPropName(def)] = value;
-  return out;
-}
-
-/** Vue converts kebab-case attrs to camelCase declared props automatically,
- * so declared props use camelCase while passthrough stays kebab. */
-export function vueProps(part: PartDef, canonical: CanonicalProps): Record<string, unknown> {
-  const { declared, passthrough } = splitProps(part, canonical);
-  const out: Record<string, unknown> = {};
-  for (const [def, value] of declared) {
-    if (def.name === "Class") out["class"] = value;
-    else if (def.type === "items") out[localIdent(def.name)] = itemsToRuntime(value);
-    else out[localIdent(def.name)] = value;
-  }
-  for (const [def, value] of passthrough) out[htmlPropName(def)] = value;
-  return out;
-}
-
-/**
- * Latte/Twig template parameters. Every declared and passthrough prop is a
- * typed template parameter (phpPropName), so values are coerced to the
- * parameter type — Latte enforces `{parameters}` types at render time.
- */
-export function phpProps(part: PartDef, canonical: CanonicalProps): Record<string, unknown> {
-  const out: Record<string, unknown> = {};
-  for (const [name, value] of Object.entries(canonical)) {
-    const def = part.props.find((p) => p.name === name);
-    if (!def) continue;
-    if (def.type === "attrs" || def.type === "children" || def.type === "items") continue;
-    const coerced =
-      def.type === "bool" ? Boolean(value) : def.type === "int" ? Number(value) : String(value);
-    out[phpPropName(def)] = coerced;
-  }
-  return out;
-}
-
-export function hasChildren(part: PartDef): boolean {
-  return part.props.some((p) => p.type === "children");
-}
-
-export function mainPart(brick: BrickDef): PartDef {
-  return brick.parts[0]!;
-}
diff --git a/tmp-alert-comp.js b/tmp-alert-comp.js
deleted file mode 100644
index 9204357..0000000
--- a/tmp-alert-comp.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { defineComponent as _defineComponent } from 'vue'
-import { unref as _unref, renderSlot as _renderSlot, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
-
-const _hoisted_1 = ["role", "aria-live"]
-
-import { computed, useAttrs } from "vue";
-import { alertClasses, type AlertVariant } from "./alert.shared";
-import { defaultIfEmpty, oneOfOr } from "../../utils/expr";
-
-
-export default /*@__PURE__*/_defineComponent({
-  ...{ name: "Alert", inheritAttrs: false },
-  __name: 'Alert',
-  props: {
-    variant: { type: null, required: false },
-    role: { type: String, required: false },
-    ariaLive: { type: String, required: false }
-  },
-  setup(__props: any) {
-
-
-
-const props = __props;
-
-const attrs = useAttrs();
-const callerClass = computed(() => attrs.class as string | undefined);
-const restAttrs = computed(() => {
-  const { class: _class, ...restEntries } = attrs;
-  return restEntries;
-});
-const cls = computed(() => alertClasses({ variant: props.variant, className: callerClass.value }));
-
-return (_ctx: any,_cache: any) => {
-  return (_openBlock(), _createElementBlock("div", _mergeProps({
-    class: cls.value || undefined,
-    role: _unref(oneOfOr)(props.role, 'status', 'status', 'alert'),
-    "aria-live": _unref(defaultIfEmpty)(props.ariaLive, 'polite')
-  }, restAttrs.value), [
-    _renderSlot(_ctx.$slots, "default")
-  ], 16 /* FULL_PROPS */, _hoisted_1))
-}
-}
-
-})
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 0000000..ea91b8d
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "moduleDetection": "force",
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  }
+}
diff --git a/tsconfig.generated.json b/tsconfig.generated.json
deleted file mode 100644
index eea6783..0000000
--- a/tsconfig.generated.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "lib": ["ES2022", "DOM"],
-    "jsx": "react-jsx",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "noEmit": true,
-    "isolatedModules": true
-  },
-  "include": ["generated/ui/**/*.ts", "generated/ui/**/*.tsx", "generated/utils/**/*.ts"],
-  "exclude": [
-    "generated/ui/index.svelte.ts",
-    "generated/ui/index.vue.ts",
-    "generated/ui/index.solid.ts",
-    "generated/ui/**/*.solid.tsx"
-  ]
-}
diff --git a/tsconfig.json b/tsconfig.json
index 41e67eb..e54a7c0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,21 +1,5 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "lib": ["ES2022"],
-    "types": ["node", "bun-types", "vite/client"],
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "noImplicitOverride": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
-    "isolatedModules": true
-  },
-  "include": ["src/**/*.ts", "bricks/**/*.ts", "tests/**/*.ts", "vitest.config.ts"],
-  "exclude": ["node_modules", "generated", "runtime"]
+  "extends": "./tsconfig.base.json",
+  "files": [],
+  "references": []
 }
diff --git a/vitest.config.ts b/vitest.config.ts
deleted file mode 100644
index aa6e37c..0000000
--- a/vitest.config.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { defineConfig } from "vitest/config";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
-import vue from "@vitejs/plugin-vue";
-import solid from "vite-plugin-solid";
-
-export default defineConfig({
-  plugins: [
-    svelte({ compilerOptions: { runes: true } }),
-    vue(),
-    // Only transform codegen Solid outputs — React keeps esbuild JSX.
-    solid({ ssr: true, include: /\.solid\.tsx$/ }),
-  ],
-  resolve: {
-    // Vue SSR needs the node build; svelte needs server-side exports.
-    conditions: ["node"],
-  },
-  test: {
-    environment: "node",
-    include: ["tests/**/*.test.ts", "tests/**/*.test.tsx"],
-    globalSetup: ["tests/global-setup.ts"],
-  },
-  esbuild: {
-    jsx: "automatic",
-  },
-});
diff --git a/xgen/README.md b/xgen/README.md
new file mode 100644
index 0000000..5ce3249
--- /dev/null
+++ b/xgen/README.md
@@ -0,0 +1,71 @@
+# xgen
+
+A generation layer for the intersection of UI runtimes. It lives in the monorepo as a **set of packages that depend only on each other**
+(never on `apps/` or `packages/`), so the folder can move to a repository of its own without changes.
+
+## Flow
+
+```
+xgen/specs/ui/*.json ──────────┐                                  ┌─► packages/svelte/ui  (@ui8kit/svelte-ui)
+xgen/specs/_nonportable.json   │   @ui8kit/xgen-spec    ┐                │
+xgen/fixtures/*.json ──────────┼─► @ui8kit/xgen-screens ┼─► @ui8kit/xgen-generator ─► packages/react/ui   (@ui8kit/react-ui)
+xgen/content/ui/en.json ───────┤   runtime-*     ┘                │
+apps/host-*/xgen.app.json ─────┘                                  ├─► packages/shared/app (@ui8kit/app-shared: dictionary, data, menus, runtime core)
+                                                                   └─► apps/host-svelte, apps/host-react (one host per runtime, a screen per lazy chunk)
+xgen/screens/src/authoring ──► xgen/specs/organisms, xgen/specs/screens   (JSON, stored and checked)
+```
+
+The drawing shows the first two targets. Today the generator writes eight packages (`packages/{svelte,react,vue,solid}/ui`,
+`packages/{templ,twig,jinja2,latte}/ui`), the shared app and four host apps (`apps/host-{svelte,react,vue,solid}`).
+For authors: [../docs/specs-guide.md](../docs/specs-guide.md).
+
+## What people write
+
+| input | where | schema |
+|---|---|---|
+| brick spec: props, variants, slots, events, a11y, data attributes, tokens, examples, `portable` | `specs/ui/<brick>.json`, `<brick>.variants.json` | `schema/schemas/spec`, `variants` |
+| organism, part, pattern, block, preset and screen: built from primitives with the builder | `screens/src/authoring/*.ts` -> `specs/{organisms,parts,patterns,blocks,presets,screens}` | `organism`, `block`, `screen` |
+| data | `fixtures/<collection>.json` (Codex entries) | `collection` |
+| text | `content/ui/en.json` | `dictionary` |
+| a host app | `apps/host-<runtime>/xgen.app.json` (name, runtime, screens (`["*"]` = every portable screen), title, port, locale, theme, hand) | `app` |
+| a menu | `menu` of a screen spec (`[{path, label, screen}]`), written by the builder | `screen` |
+
+The one-time importer of the first 33 bricks from `ui8kit/codegen` is `spec/tools/import-codegen.ts`; after it the specs belong to xgen.
+
+## The view IR (`@ui8kit/xgen-screens`)
+
+An organism or a screen is a tree. Nodes: `use` (a primitive by its canonical name with `props`, `attrs`, `on` handlers, children),
+`text`, `when`, `each`, `slot` (a render prop with arguments), `organism`, `outlet`. Values are a literal, a reference `{"$":"plan.name"}`
+or an op (`eq ne not and or gt lt add cond len at tpl money num`). The validator rejects: an unknown part or prop, a value that is not a
+variant of the recipe, a literal text, a text-bearing prop (`AriaLabel`, `Placeholder`, `Alt`, `Title`) that is not a reference,
+a computed ARIA state, a reference out of scope, a wrong op arity, an unknown handler.
+
+## Checks (`xgen check`)
+
+`schema` (all JSON against the schemas, contract metadata equals the render tree) - `props` (examples, tokens, views) - `a11y` -
+`authored` (stored JSON equals the builder) - `coverage` (every spec generated for every runtime or `portable:false` with a reason) -
+`nonportable` (no `setContext`, `$bindable`, `{@attach` in Svelte, no `createContext` in React) - `text` (no Cyrillic, every content key exists) -
+the catalog, style and rule groups (`dictionary`, `blocks`, `registry`, `themes`, `routes`, `structure`, `hardcode`, `corners`, `shadows`,
+`spacing`, `readability`, `dead`, `duplicates`, `versions`, `tests`, `rules`) -
+`drift` (the disk equals the regeneration; no hand-written file in a generated package or app; the header is on every file) -
+real-engine parity of `templ`, `solid`, `twig`, `jinja2` and `latte` (every brick and block case renders the same DOM as React; html-validate).
+The output of `bun run check` lists every group with its one-line summary.
+
+`xgen e2e` serves the built hosts and runs the scenario of every screen at `/<screen>/` (plans: sort, search, pager, record, history, theme; site; themes; gallery),
+takes light and dark screenshots into `shots/` and compares the DOM of the svelte, react, vue and solid hosts state by state. `xgen shot <screen>` takes one full-page screenshot.
+
+## Moving out
+
+This folder is self-contained: it reads only the workspace root (where `packages/` and `apps/` are written) and `bun`
+workspaces, and nothing in xgen imports from `apps/` or `packages/`. It lives in two places with the same layout:
+ui8kit/codegen (public, standalone) and the codegen-x/ui8kit monorepo, where hand-written apps (the magazine, the taste
+screens) also consume it. The monorepo-only targets and gates (the taste copy decks, the magazine style zone, the
+magazine and taste surfaces of `codex/blocks.json`) switch on only when those packages exist in the workspace.
+
+## Host apps
+
+A landing, a theme, the gallery: each is a **screen spec** (`specs/screens/*.json`), never an app.
+There is one host app per TypeScript runtime (`apps/host-svelte`, `apps/host-react`, `apps/host-vue`, `apps/host-solid`); the template runtimes have none. The host front controller (`src/`) reads the screen key
+from the path (`/<screen>/#/<route>` or `?screen=<key>`), sets the skin and title, and lazy-loads the screen chunk from `xgen/screens/`.
+The shared outputs (dictionary, data, menus, runtime core, skins) are emitted once into `packages/shared/app`. Every generated file says DO NOT EDIT.
+To add a screen: write it in `screens/src/authoring`, run `bun run build`; every host serves it, no app directory appears.
diff --git a/xgen/check/README.md b/xgen/check/README.md
new file mode 100644
index 0000000..c9876ed
--- /dev/null
+++ b/xgen/check/README.md
@@ -0,0 +1,28 @@
+# @ui8kit/xgen-check
+
+Checks: schema, props, variants, a11y, drift (packages and apps), coverage, portability contract, text and Cyrillic, the rules group, and real-engine parity of the template runtimes.
+
+Part of xgen (see `../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
+
+## API
+
+`runChecks(workspace)` runs: `schema`, `props`, `a11y`, `authored`, `coverage`, `recipes`, `nonportable`, `text`, `blocks`, `registry` (the 92 layouts of the reference catalog), `themes`, `structure` (file and line limits, import cycles, package order, the core names no app), `hardcode` (no arbitrary size, hex or palette color in organisms), `dead` (fixtures, organisms, dictionary keys, untested blocks), `duplicates`, `versions`, `tests`, `rules`, `drift` (and the CLI adds `templ`, `solid`, `twig`, `jinja2`, `latte`: `templCheck`, `solidCheck`, `twigCheck`, `jinja2Check`, `latteCheck`, each rendering every brick and block case and comparing the DOM with React); each returns `{ name, what, problems }`. The limits are in `src/audit-rules.ts`.
+`runE2e(workspace)` serves the built host apps, runs one scenario in Chrome (playwright-core, `CHROME` env or `/usr/bin/google-chrome`), writes screenshots to `shots/` and compares the DOM. `XGEN_E2E_ONLY=<prefix>,<prefix>` limits it to the apps whose names start with one.
+
+## Group `rules`
+
+Rules 01, 02, 03 and 06 of `.cursor/rules` on the composition zone (`src/rules`). Zones come from the `ui8kit` field of every
+workspace `package.json` (`kit`, `composition`, `blockRoot`, `runtime`); the committed catalog is `rules/zones.json`, and the
+kit zone is never scanned. An adapter per runtime (`svelte.ts`: svelte/compiler, `react.ts`: the TypeScript parser, also for Solid, `vue.ts`:
+@vue/compiler-sfc, `templ.ts`, and `twig.ts` for Twig, Jinja2 and Latte) turns a file into one small tree (`ir.ts`); the shared detectors (`detectors.ts`) report `block-root`,
+`raw-html`, `dynamic-tag`, `raw-native-tag`, `reactive-aria` and `literal-text`.
+
+- Baselines: `rules/baselines/<package>.json`, counts per detector and file. More fails; fewer asks for a new baseline.
+- Style baselines: the `corners`, `shadows`, `hardcode` and `spacing` groups also scan the style text of hand-written apps when the workspace has them (`apps/magazine/src` in the codegen-x monorepo; none in ui8kit/codegen)
+  (`src/style-zones.ts`; `packages/panorama`, Three.js and canvas code, is outside every rule zone) against `rules/style-baselines/<package>.json`, written by the same
+  `bun run rules:baseline`.
+- Self-test: `rules/fixtures/<runtime>/<detector>.{bad,ok}.<ext>`, run inside the group and in `test/rules.test.ts`.
+- `bun run rules` counts the findings (`--list` prints them), `bun run rules:baseline` writes the catalog and the baselines,
+  `xgen-rules` (packages/tooling) gates one workspace.
+- Pre-push: `.githooks/pre-push` runs `bun run check` and `packages/tooling/bin/audit.sh`; enable it with
+  `git config core.hooksPath .githooks` (`bun run hooks:install`).
diff --git a/xgen/check/package.json b/xgen/check/package.json
new file mode 100644
index 0000000..0f4ddb6
--- /dev/null
+++ b/xgen/check/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@ui8kit/xgen-check",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Checks: schema, props, variants, a11y, drift (packages and apps), coverage, portability contract, text and Cyrillic, and the rules group (rules 01/02/03/06 on the composition zone of every runtime: svelte, react, vue, solid, templ, twig, jinja2, latte), and the real-engine parity gates of the template runtimes.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-schema": "workspace:*",
+    "@ui8kit/xgen-spec": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*",
+    "@ui8kit/xgen-generator": "workspace:*",
+    "playwright-core": "^1.63.0",
+    "@ui8kit/xgen-runtime-core": "workspace:*",
+    "@ui8kit/xgen-runtime-jinja2": "workspace:*",
+    "@ui8kit/xgen-runtime-twig": "workspace:*",
+    "@vue/compiler-sfc": "^3.5.43",
+    "svelte": "^5.57.0",
+    "typescript": "~6.0.2"
+  },
+  "scripts": {
+    "test": "bun test"
+  },
+  "devDependencies": {
+    "@babel/core": "^7",
+    "@babel/preset-typescript": "^7",
+    "babel-preset-solid": "^1.9",
+    "parse5": "7",
+    "solid-js": "^1.9"
+  }
+}
diff --git a/xgen/check/src/aria.ts b/xgen/check/src/aria.ts
new file mode 100644
index 0000000..f04a148
--- /dev/null
+++ b/xgen/check/src/aria.ts
@@ -0,0 +1,52 @@
+// The ARIA attributes a part may bind to an expression (the state attributes are static or mapped from a prop; these are text or ids).
+export const KNOWN_ARIA: ReadonlySet<string> = new Set([
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-disabled",
+  "aria-current",
+  "aria-invalid",
+  "aria-required",
+  "aria-expanded",
+  "aria-hidden",
+  "aria-checked",
+  "aria-pressed",
+  "aria-selected",
+  "aria-busy",
+  "aria-live",
+  "aria-controls",
+  "aria-haspopup",
+  "aria-level",
+  "aria-valuenow",
+  "aria-valuemin",
+  "aria-valuemax",
+  "aria-orientation",
+  "aria-modal",
+  "aria-sort",
+  "aria-autocomplete",
+  "aria-atomic",
+  "aria-relevant",
+  "aria-errormessage",
+  "aria-readonly",
+  "aria-multiselectable",
+  "aria-posinset",
+  "aria-setsize",
+  "aria-valuetext",
+  "aria-description",
+  "aria-roledescription",
+  "aria-keyshortcuts",
+  "aria-colcount",
+  "aria-rowcount",
+  "aria-colindex",
+  "aria-rowindex",
+  "aria-colspan",
+  "aria-rowspan",
+  "aria-flowto",
+  "aria-owns",
+  "aria-activedescendant",
+  "aria-details",
+  "aria-placeholder",
+  "aria-dropeffect",
+  "aria-grabbed",
+  "aria-multiline",
+]);
diff --git a/xgen/check/src/audit-rules.ts b/xgen/check/src/audit-rules.ts
new file mode 100644
index 0000000..06b1006
--- /dev/null
+++ b/xgen/check/src/audit-rules.ts
@@ -0,0 +1,109 @@
+// The numbers and patterns the audit rules of `xgen check` stand on. One place, so a rule can be read and changed without searching the code.
+
+/** the longest source file of a package, in lines; a longer file is split by concern */
+export const MAX_FILE_LINES = 350;
+/** the longest line of a source file, in characters (the authoring tables are wide on purpose, not without end) */
+export const MAX_LINE_CHARS = 600;
+
+/** limits of the generated code (the `readability` group): what a junior can read in one sitting */
+export const READABILITY = {
+  /** lines of a generated component file (primitive, component or block) */
+  fileLines: 150,
+  /** lines of a generated screen of a host app */
+  screenLines: 600,
+  /** size of a generated component file */
+  fileBytes: 8000,
+  /** characters of a line of generated code */
+  lineChars: 160,
+  /** props of a component (variant props included) */
+  props: 12,
+};
+
+/** the spec folders the `corners` group reads */
+export const CORNER_DIRS = ["ui", "recipes", "parts", "patterns", "organisms", "blocks", "screens", "presets"] as const;
+/** the only files that may hold rounded-full or rounded-none, how many, and why; everything else is plain `rounded` (the theme radius) */
+export const CORNER_ALLOW: Record<string, { full?: number; none?: number; why: string }> = {
+  "specs/ui/radio.variants.json": { full: 1, why: "the radio control is a circle: the shape says one of many" },
+  "specs/ui/badge.variants.json": { full: 1, why: "a badge is a pill: a short status or count label, never a control" },
+  "specs/parts/pill.json": { full: 1, why: "the status pill (a tinted badge with an icon)" },
+  "specs/organisms/hero-badge.json": { full: 1, why: "a composite badge on a dark band: a pill around a Badge mark" },
+  "specs/ui/switch.variants.json": { full: 1, why: "the switch track is a pill around its round knob" },
+  "specs/recipes/avatar.variants.json": { full: 1, why: "an avatar is always round" },
+  "specs/parts/timeline.json": { full: 1, why: "the status dot of a timeline entry" },
+  "specs/organisms/skeleton-layout.json": { full: 1, why: "the skeleton of an avatar keeps the avatar's circle" },
+  "specs/organisms/quote-card.json": { full: 2, why: "the author's avatar picture (a MediaFrame in an avatar's circle), card and plain forms" },
+  "specs/organisms/review-list.json": { full: 1, why: "the reviewer's avatar picture" },
+  "specs/organisms/profile-form.json": { full: 1, why: "the profile's avatar picture" },
+  "specs/organisms/post-header.json": { full: 1, why: "the author's avatar picture" },
+  "specs/organisms/post-author.json": { full: 1, why: "the author's avatar picture" },
+  "specs/organisms/post-feature.json": { full: 1, why: "the author's avatar picture" },
+  "specs/organisms/media-posts.json": { full: 1, why: "the dot before each post (a list marker)" },
+  "specs/organisms/story-dots.json": { full: 1, why: "the step dots under the carousel picture" },
+  "specs/organisms/sidebar-nav.json": { full: 1, why: "the signed-in user's avatar picture" },
+  "specs/organisms/hero-split-extras.json": { full: 2, why: "the faces of the proof row and the quote author (avatar pictures)" },
+  "specs/organisms/shell-topbar.json": { full: 1, why: "the signed-in user's avatar picture in the top bar" },
+  "specs/ui/dialog.variants.json": { none: 1, why: "the sheet fills the screen; a corner would show the page behind it" },
+  "specs/patterns/backdrop.json": { none: 1, why: "the backdrop picture fills its section edge to edge (not a framed picture)" },
+  "specs/organisms/over-media.json": { none: 1, why: "the picture under a transparent bar fills the band edge to edge" },
+};
+/** the shadow classes a spec may use: one per floating layer, from the shadcn scale (flat surfaces use the border edge only) */
+export const SHADOWS = ["shadow-md", "shadow-lg"] as const;
+/** the only files that may hold a shadow, which one, how many, and why */
+export const SHADOW_ALLOW: Record<string, { shadow: (typeof SHADOWS)[number]; n: number; why: string }> = {
+  "specs/organisms/hero-split-media.json": { shadow: "shadow-lg", n: 1, why: "the plan cards float over the hero picture" },
+  "specs/ui/dialog.variants.json": { shadow: "shadow-lg", n: 1, why: "a dialog or sheet floats over the page" },
+  "specs/ui/sheet.json": { shadow: "shadow-lg", n: 1, why: "the sheet panel is a side drawer over the page (fixed overlay)" },
+  "specs/organisms/video-modal.json": { shadow: "shadow-lg", n: 1, why: "a modal dialog over the page" },
+  "specs/parts/notice.json": { shadow: "shadow-lg", n: 1, why: "the toast is fixed to the corner of the screen, over the page" },
+  "specs/recipes/dropdown-menu.variants.json": { shadow: "shadow-md", n: 1, why: "a menu panel floats at its trigger" },
+  "specs/organisms/tour-callout.json": { shadow: "shadow-md", n: 1, why: "a popover callout pointing at its target" },
+  "specs/organisms/cart-drawer.json": { shadow: "shadow-lg", n: 1, why: "the cart drawer is a sheet over the page (drawn in its open state)" },
+  "specs/organisms/offer-media.json": { shadow: "shadow-lg", n: 1, why: "the offer card floats over the hero picture" },
+};
+/** kit.css utilities whose radius is not derived from --radius, with the only value they may use */
+export const KIT_RADIUS_ALLOW: Record<string, string> = {
+  "radio-glyph": "9999px",
+  "switch-knob": "9999px",
+};
+
+/** packages of the generation layer, lowest first: a package may import only the ones before it and must declare them in its package.json */
+export const LAYERS: ReadonlyArray<{ dir: string; name: string }> = [
+  { dir: "schema", name: "@ui8kit/xgen-schema" },
+  { dir: "spec", name: "@ui8kit/xgen-spec" },
+  { dir: "screens", name: "@ui8kit/xgen-screens" },
+  { dir: "runtimes/core", name: "@ui8kit/xgen-runtime-core" },
+  { dir: "runtimes/svelte", name: "@ui8kit/xgen-runtime-svelte" },
+  { dir: "runtimes/react", name: "@ui8kit/xgen-runtime-react" },
+  { dir: "runtimes/vue", name: "@ui8kit/xgen-runtime-vue" },
+  { dir: "generator", name: "@ui8kit/xgen-generator" },
+  { dir: "check", name: "@ui8kit/xgen-check" },
+  { dir: "cli", name: "@ui8kit/xgen" },
+];
+/** packages that do not know each other, whatever their order above */
+export const SIBLINGS: ReadonlyArray<readonly [string, string]> = [
+  ["@ui8kit/xgen-runtime-svelte", "@ui8kit/xgen-runtime-react"],
+  ["@ui8kit/xgen-runtime-svelte", "@ui8kit/xgen-runtime-vue"],
+  ["@ui8kit/xgen-runtime-react", "@ui8kit/xgen-runtime-vue"],
+];
+/** the packages below the apps: they must not name an app, a screen or a theme */
+export const CORE_DIRS = ["schema", "spec", "runtimes/core", "runtimes/svelte", "runtimes/react", "runtimes/vue", "generator"];
+export const APP_SPECIFIC = /screen\.(site|blocks|plans|theme)|Northwind|\b(blocks|demo|landing|marketing|commerce|promo|content|account|dashboard|onboarding|support)-(svelte|react|vue|landing|product|pricing|shop|campaign|blog|portal|console|flow|center)\b/;
+
+/** what an organism, a pattern or a part may not carry in a class string: sizes and colors outside the scale and the shadcn tokens (a grid template such as grid-cols-[16rem_1fr] is a layout, not a size, and passes) */
+export const HARDCODE = {
+  arbitrary: /(?<!grid-cols|grid-rows)-\[[^\]]*(\d(px|rem|em|%|vh|vw|ch)|#[0-9a-fA-F]{3,8}|rgb|hsl|oklch)[^\]]*\]/g,
+  hex: /#[0-9a-fA-F]{6}\b/g,
+  palette: /\b(?:bg|text|border|ring|fill|stroke|inset-ring|divide|outline|shadow)-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone)-\d{2,3}\b/g,
+  stringified: /\[object /g,
+};
+/** specs that keep values the rules forbid: how many (exactly) and why. A file with more fails (a new hardcoded value);
+ * a file with fewer fails until its number here is lowered, so the list only shrinks. Every other file must hold none. */
+export const HARDCODE_ALLOW: Record<string, { n: number; why: string }> = {
+  "specs/parts/pill.json": { n: 48, why: "tones of a status chip are the palette on purpose; shadcn has no tokens for them" },
+  "specs/parts/timeline.json": { n: 4, why: "the dots of a timeline are data colors (success, info, warning, danger)" },
+};
+
+/** every rounded-* class of a text (with or without a variant prefix such as `open:` or `[&::-webkit-slider-thumb]:`) */
+export const cornerClasses = (text: string): string[] => [...text.matchAll(/(?<![\w-])rounded-(\[[^\]\s"]*\]|[a-z0-9]+(?:-[a-z0-9]+)*)/g)].map((m) => m[0]);
+/** every shadow class of a text (shadow, shadow-*, drop-shadow-*, inset-shadow-*, with or without a variant prefix) */
+export const shadowClasses = (text: string): string[] => [...text.matchAll(/(?<![\w-])(?:drop-|inset-)?shadow(?:-(?:\[[^\]\s"]*\]|[a-z0-9]+(?:-[a-z0-9]+)*))?(?![\w-])/g)].map((m) => m[0]);
diff --git a/xgen/check/src/audit.ts b/xgen/check/src/audit.ts
new file mode 100644
index 0000000..c15f423
--- /dev/null
+++ b/xgen/check/src/audit.ts
@@ -0,0 +1,204 @@
+// The `structure`, `hardcode` and `dead` groups of `xgen check`: classes of problems the audit found, kept out by a rule so they do not come back.
+import { styleProblems } from "./style-zones";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { organismsIn } from "@ui8kit/xgen-screens";
+import { DECK_COLLECTIONS } from "@ui8kit/xgen-runtime-core";
+import { versionProblem, xgenPaths } from "@ui8kit/xgen-schema";
+import { leavesOf } from "./dictionary";
+import type { Plan } from "@ui8kit/xgen-generator";
+import type { CheckResult } from "./result";
+import { APP_SPECIFIC, CORE_DIRS, HARDCODE, HARDCODE_ALLOW, LAYERS, MAX_FILE_LINES, MAX_LINE_CHARS, SIBLINGS } from "./audit-rules";
+
+const SKIP = new Set(["node_modules", "dist", "assets"]);
+const walk = (dir: string): string[] => (existsSync(dir) ? readdirSync(dir).flatMap((n) => (SKIP.has(n) ? [] : statSync(join(dir, n)).isDirectory() ? walk(join(dir, n)) : [join(dir, n)])) : []);
+
+/** the source files of the generation layer: src and tools of every package, no tests */
+export function sourceFiles(xgenRoot: string): string[] {
+  return LAYERS.flatMap((l) => ["src", "tools"].flatMap((d) => walk(join(xgenRoot, l.dir, d)))).filter((f) => f.endsWith(".ts")).sort();
+}
+
+const IMPORT = /(?:^|\n)\s*(?:import|export)\s[^;]*?from\s+"(\.{1,2}\/[^"]+)"/g;
+/** the files a file imports, as absolute paths of existing files */
+function importsOf(file: string, text: string): string[] {
+  const out: string[] = [];
+  for (const m of text.matchAll(IMPORT)) {
+    const base = resolve(dirname(file), m[1]!);
+    const hit = [`${base}.ts`, join(base, "index.ts"), base].find((p) => existsSync(p) && statSync(p).isFile());
+    if (hit) out.push(hit);
+  }
+  return out;
+}
+
+/** strongly connected groups of more than one file (Tarjan) */
+export function cycles(graph: Map<string, string[]>): string[][] {
+  let index = 0;
+  const idx = new Map<string, number>(), low = new Map<string, number>(), stack: string[] = [], on = new Set<string>(), out: string[][] = [];
+  const visit = (v: string): void => {
+    idx.set(v, index); low.set(v, index); index++; stack.push(v); on.add(v);
+    for (const w of graph.get(v) ?? []) {
+      if (!idx.has(w)) { visit(w); low.set(v, Math.min(low.get(v)!, low.get(w)!)); }
+      else if (on.has(w)) low.set(v, Math.min(low.get(v)!, idx.get(w)!));
+    }
+    if (low.get(v) === idx.get(v)) {
+      const group: string[] = [];
+      let w: string;
+      do { w = stack.pop()!; on.delete(w); group.push(w); } while (w !== v);
+      if (group.length > 1) out.push(group.sort());
+    }
+  };
+  for (const v of [...graph.keys()].sort()) if (!idx.has(v)) visit(v);
+  return out;
+}
+
+export function checkStructure(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const root = plan.xgenRoot;
+  const rel = (f: string): string => `xgen/${relative(root, f)}`;
+  const files = sourceFiles(root);
+  const graph = new Map<string, string[]>();
+  for (const f of files) {
+    const text = readFileSync(f, "utf8");
+    const lines = text.split("\n");
+    if (lines.length > MAX_FILE_LINES) problems.push(`${rel(f)}: ${lines.length} lines, the limit is ${MAX_FILE_LINES}; split it by concern`);
+    lines.forEach((l, i) => { if (l.length > MAX_LINE_CHARS) problems.push(`${rel(f)}:${i + 1}: a line of ${l.length} characters, the limit is ${MAX_LINE_CHARS}; break the table`); });
+    graph.set(f, importsOf(f, text));
+    // the layout of the xgen folder is spelled once, in schema/src/paths.ts; no path of this machine is written in a source
+    if (!f.endsWith("schema/src/paths.ts") && /join\([^)]*"(specs|fixtures|content)"/.test(text)) problems.push(`${rel(f)}: spells a folder of the xgen layout; take it from xgenPaths`);
+    if (/["'`]\/(workspace|home|tmp|usr)\//.test(text.replace(/process\.env\.CHROME \?\? "[^"]*"/g, ""))) problems.push(`${rel(f)}: an absolute path of this machine; take it from the environment`);
+  }
+  for (const g of cycles(graph)) problems.push(`import cycle: ${g.map(rel).join(" <-> ")}`);
+  // packages: what a package imports must be declared, lower in the order, and not a sibling
+  const order = LAYERS.map((l) => l.name);
+  for (const l of LAYERS) {
+    const pkg = JSON.parse(readFileSync(join(root, l.dir, "package.json"), "utf8")) as { dependencies?: Record<string, string> };
+    const declared = Object.keys(pkg.dependencies ?? {});
+    const used = new Set<string>();
+    for (const f of files.filter((x) => x.startsWith(join(root, l.dir) + "/"))) for (const m of readFileSync(f, "utf8").matchAll(/from\s+"(@ui8kit\/xgen[a-z-]*)"/g)) used.add(m[1]!);
+    for (const u of used) {
+      if (order.indexOf(u) < 0) continue;
+      if (order.indexOf(u) >= order.indexOf(l.name)) problems.push(`xgen/${l.dir}: imports ${u}, which is not below it; the order is ${order.map((n) => n.replace("@ui8kit/", "")).join(" < ")}`);
+      else if (!declared.includes(u)) problems.push(`xgen/${l.dir}/package.json: imports ${u} but does not declare it`);
+      if (SIBLINGS.some(([a, b]) => (a === l.name && b === u) || (b === l.name && a === u))) problems.push(`xgen/${l.dir}: imports its sibling runtime ${u}`);
+    }
+    for (const d of declared) if (order.includes(d) && !used.has(d)) problems.push(`xgen/${l.dir}/package.json: declares ${d} but no source imports it`);
+  }
+  // the core does not know the apps
+  for (const f of files.filter((x) => CORE_DIRS.some((d) => x.startsWith(join(root, d, "src") + "/")))) {
+    readFileSync(f, "utf8").split("\n").forEach((l, i) => { const m = l.match(APP_SPECIFIC); if (m) problems.push(`${rel(f)}:${i + 1}: names "${m[0]}", a detail of an app, in the core; pass it in as data`); });
+  }
+  return { name: "structure", what: `source files up to ${MAX_FILE_LINES} lines and ${MAX_LINE_CHARS} characters per line, no import cycles, packages import only lower declared packages, the core names no app`, problems };
+}
+
+export function checkHardcode(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const root = plan.xgenRoot;
+  const label = (what: string): string => (what === "arbitrary" ? "a size or color outside the scale" : what === "palette" ? "a palette color, use a token" : what === "hex" ? "a hex color" : "a value printed as [object]");
+  for (const dir of ["organisms", "patterns", "parts", "ui", "recipes"]) {
+    for (const f of walk(xgenPaths(root).specs(dir)).filter((x) => x.endsWith(".json")).sort()) {
+      const key = `specs/${dir}/${f.split("/").pop()}`;
+      const found: string[] = [];
+      readFileSync(f, "utf8").split("\n").forEach((l, i) => {
+        for (const [what, re] of Object.entries(HARDCODE)) for (const m of l.matchAll(re)) found.push(`xgen/${key}:${i + 1}: ${label(what)}: ${m[0]}`);
+      });
+      const allowed = HARDCODE_ALLOW[key]?.n ?? 0;
+      if (found.length > allowed) problems.push(...(allowed ? [`xgen/${key}: ${found.length} hardcoded values, ${allowed} allowed; move the new ones to a preset (specs/presets) or a token`] : []), ...found);
+      else if (found.length < allowed) problems.push(`xgen/check/src/audit-rules.ts: ${key} now holds ${found.length} hardcoded values; lower its allowance from ${allowed} to ${found.length}`);
+    }
+  }
+  problems.push(...styleProblems(plan.workspace, "hardcode"));
+  return { name: "hardcode", what: "components and primitives hold no arbitrary size or color, no palette color and no stringified value beyond the counted allowlist", problems };
+}
+
+export function checkDead(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const root = plan.xgenRoot;
+  // fixtures: a collection that no screen reads
+  const read = new Set(plan.inputs.screens.flatMap((s) => (s.value.sources ?? []).map((x) => x.collection)).concat(plan.inputs.screens.map((s) => s.value.source?.collection ?? "")));
+  // the copy decks of the taste screens: read by the generated packages/taste-data/content/copy.json
+  for (const c of Object.values(DECK_COLLECTIONS)) read.add(c);
+  // a collection of media or users is reached through the featured_media_id / author_id of the entries of a collection a screen reads
+  const referenced = new Set(plan.inputs.collections.filter((c) => read.has(c.value.collection)).flatMap((c) => c.value.entries.flatMap((e) => {
+    const r = e as { featured_media_id?: string; author_id?: string };
+    return [r.featured_media_id ?? "", r.author_id ?? ""];
+  })));
+  for (const c of plan.inputs.collections) if (c.value.entries.length && c.value.entries.every((e) => (e.kind === "media" || e.kind === "user") && referenced.has(e.id))) read.add(c.value.collection);
+  // the items under a menu item (kind menu_item with a parent_id) are reached through `id|menu` of the menu a screen reads
+  const readIds = new Set(plan.inputs.collections.filter((c) => read.has(c.value.collection)).flatMap((c) => c.value.entries.map((e) => e.id)));
+  for (const c of plan.inputs.collections) if (c.value.entries.length && c.value.entries.every((e) => e.kind === "menu_item" && readIds.has((e as { parent_id?: string }).parent_id ?? ""))) read.add(c.value.collection);
+  for (const c of plan.inputs.collections) if (!read.has(c.value.collection)) problems.push(`xgen/fixtures/${c.value.collection}.json: no screen reads the collection ${c.value.collection}`);
+  // organisms: one that no screen draws, directly or inside another
+  const byName = new Map(plan.inputs.organisms.map((o) => [o.value.name, o.value]));
+  const used = new Set<string>();
+  const add = (n: string): void => { if (used.has(n)) return; used.add(n); const o = byName.get(n); if (o) for (const m of organismsIn(o.view)) add(m); };
+  for (const s of plan.inputs.screens) for (const n of s.value.organisms) add(n);
+  for (const o of plan.inputs.organisms) if (o.value.id.startsWith("organism.") && !used.has(o.value.name)) problems.push(`${relative(join(root, ".."), o.file)}: organism ${o.value.name} is drawn by no screen and no other organism`);
+  // dictionary: a block text without its block, a status word no fixture uses (whether a key is read at all is the `dictionary` group)
+  const dict = plan.inputs.dictionary.value as Record<string, unknown>;
+  const leaves = leavesOf(dict);
+  const statuses = new Set(plan.inputs.collections.flatMap((c) => c.value.entries.flatMap((e) => Object.values((e as { metadata?: Record<string, { value?: unknown }> }).metadata ?? {}).map((m) => String(m.value)))));
+  for (const k of leaves) if (k.startsWith("status.") && !statuses.has(k.slice("status.".length))) problems.push(`xgen/content/ui/en.json: ${k} is a status word no fixture uses`);
+  const blocks = plan.inputs.blocks.map((b) => b.value);
+  const bd = (dict["blocks"] ?? {}) as Record<string, Record<string, unknown>>;
+  for (const part of ["names", "docs", "variants"]) for (const k of Object.keys(bd[part] ?? {})) if (!blocks.some((b) => b.id === `block.${k}`)) problems.push(`xgen/content/ui/en.json: blocks.${part}.${k} belongs to no block`);
+  for (const b of blocks) {
+    const k = b.id.slice("block.".length);
+    for (const key of Object.keys((bd["variants"]?.[k] ?? {}) as object)) if (!b.variants.some((v) => v.id === key)) problems.push(`xgen/content/ui/en.json: blocks.variants.${k}.${key} belongs to no variant`);
+  }
+  // e2e: a block without facts is checked by its own branch of the legacy checks; a block with neither is not tested
+  const legacy = ["generic.ts", "blocks.ts"].map((f) => readFileSync(join(root, "check", "src", "e2e", f), "utf8")).join("\n");
+  for (const b of blocks) {
+    const k = b.id.slice("block.".length);
+    if (!(b.facts?.length) && !legacy.includes(`case "${k}"`) && !legacy.includes(`key === "${k}"`)) problems.push(`xgen/specs/blocks/${k}.json: no facts and no branch in xgen/check/src/e2e/generic.ts or blocks.ts; the e2e does not test its variants`);
+  }
+  return { name: "dead", what: "no fixture or organism that nothing reaches, no block text without its block, no status word without a fixture; every block is tested by facts or by a branch of the e2e", problems };
+}
+
+/** a value with the identity of an entry taken out, so two entries with the same content compare equal */
+const withoutIdentity = (v: unknown): unknown => (Array.isArray(v) ? v.map(withoutIdentity) : v && typeof v === "object" ? Object.fromEntries(Object.entries(v).filter(([k]) => !["id", "collection", "slug", "created_at", "updated_at", "published_at"].includes(k)).map(([k, x]) => [k, withoutIdentity(x)])) : v);
+/** a view shorter than this many characters of JSON may coincide by chance */
+const MIN_VIEW_CHARS = 200;
+
+export function checkDuplicates(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const root = join(plan.xgenRoot, "..");
+  const group = (items: Array<{ key: string; file: string }>, what: string): void => {
+    const by = new Map<string, string[]>();
+    for (const i of items) by.set(i.key, [...(by.get(i.key) ?? []), relative(root, i.file)]);
+    for (const files of by.values()) if (files.length > 1) problems.push(`${what}: ${files.join(" and ")} are the same; keep one`);
+  };
+  group(plan.inputs.organisms.map((o) => ({ key: JSON.stringify(o.value.view), file: o.file })).filter((x) => x.key.length > MIN_VIEW_CHARS), "views");
+  group(plan.inputs.collections.map((c) => ({ key: JSON.stringify(withoutIdentity(c.value.entries)), file: c.file })), "fixtures");
+  // a record type of one name has one shape
+  const shapes = new Map<string, Map<string, string[]>>();
+  for (const o of plan.inputs.organisms) for (const [name, fields] of Object.entries((o.value as { records?: Record<string, unknown> }).records ?? {})) {
+    const m = shapes.get(name) ?? new Map<string, string[]>();
+    m.set(JSON.stringify(fields), [...(m.get(JSON.stringify(fields)) ?? []), relative(root, o.file)]);
+    shapes.set(name, m);
+  }
+  for (const [name, m] of shapes) {
+    const all = [...m.values()].flat();
+    if (m.size > 1) problems.push(`record ${name}: ${m.size} different shapes in ${all.join(", ")}`);
+    else if (all.length > 1) problems.push(`record ${name}: declared in ${all.join(", ")}; declare it once and import the type`);
+  }
+  return { name: "duplicates", what: "no two organisms with the same view, no two fixtures with the same entries, every record type declared once", problems };
+}
+
+export function checkVersions(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const root = join(plan.xgenRoot, "..");
+  const specs: Array<{ file: string; value: { specVersion?: unknown } }> = [
+    ...plan.inputs.organisms, ...plan.inputs.screens, ...plan.inputs.blocks,
+    ...plan.apps.map((a) => ({ file: join(a.dir, "xgen.app.json"), value: a.app as { specVersion?: unknown } })),
+  ];
+  for (const s of specs) { const why = versionProblem(s.value); if (why) problems.push(`${relative(root, s.file)}: ${why}`); }
+  if (!existsSync(join(xgenPaths(plan.xgenRoot).docs, "migrations.md"))) problems.push("xgen/docs/migrations.md: missing; it holds the log of the versions");
+  return { name: "versions", what: "every spec is on the current specVersion, and the migrations are documented", problems };
+}
+
+/** every package keeps tests of its own */
+export function checkTests(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  for (const l of LAYERS) if (!walk(join(plan.xgenRoot, l.dir, "test")).some((f) => f.endsWith(".test.ts"))) problems.push(`xgen/${l.dir}: no tests; add xgen/${l.dir}/test/*.test.ts`);
+  return { name: "tests", what: "every package of the generation layer has tests", problems };
+}
diff --git a/xgen/check/src/blocks.ts b/xgen/check/src/blocks.ts
new file mode 100644
index 0000000..9b7a1ce
--- /dev/null
+++ b/xgen/check/src/blocks.ts
@@ -0,0 +1,182 @@
+// The `blocks` group of `xgen check`: a block is data, so the check reads the data against the organism it names, the fixtures and the dictionary.
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { basename } from "node:path";
+import { validate } from "@ui8kit/xgen-schema";
+import { axisField, blockKey, drawnBy, expandComposed, isGroup, literalsOf, organismsIn, THEMES, type BlockSpec, type OrganismSpec, type Value } from "@ui8kit/xgen-screens";
+import type { Plan } from "@ui8kit/xgen-generator";
+import type { CheckResult } from "./result";
+
+const CYRILLIC = /[\u0400-\u04FF]/;
+/** actions a page may call (the only one is the theme button) */
+const ACTIONS = new Set(["toggleTheme"]);
+
+function refsIn(v: unknown, acc: string[] = []): string[] {
+  if (Array.isArray(v)) v.forEach((x) => refsIn(x, acc));
+  else if (v && typeof v === "object") {
+    const o = v as Record<string, unknown>;
+    if (typeof o["$"] === "string") acc.push(o["$"]);
+    Object.values(o).forEach((x) => refsIn(x, acc));
+  }
+  return acc;
+}
+
+export function checkBlocks(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const dict = plan.inputs.dictionary.value as Record<string, unknown>;
+  const has = (path: string): unknown => path.split(".").reduce<unknown>((o, k) => (o && typeof o === "object" ? (o as Record<string, unknown>)[k] : undefined), dict);
+  const byName = new Map(plan.inputs.organisms.map((o) => [o.value.name, o.value as OrganismSpec]));
+  const patterns = new Set(plan.inputs.organisms.filter((o) => /^(pattern|part)\./.test(o.value.id)).map((o) => o.value.name));
+  let variantCount = 0;
+  const icons = new Set(Object.keys((JSON.parse(readFileSync(xgenPaths(plan.xgenRoot).lucide, "utf8")) as { icons: Record<string, unknown> }).icons));
+  for (const t of THEMES) for (const k of ["title", "text"]) if (typeof has(`blocks.themes.${t}.${k}`) !== "string") problems.push(`theme ${t}: no text ui.blocks.themes.${t}.${k}`);
+
+  for (const loaded of plan.inputs.blocks) {
+    const b: BlockSpec = loaded.value;
+    const key = blockKey(b);
+    const at = `block ${key}`;
+    const text = readFileSync(loaded.file, "utf8");
+    // schema, name of the file, no markup, no gradient, no Cyrillic
+    for (const e of validate("block", b)) problems.push(`${at}: ${e}`);
+    if (basename(loaded.file) !== `${key}.json`) problems.push(`${at}: the file is ${basename(loaded.file)}, expected ${key}.json`);
+    if (["view", "layout", "areas", "use", "children"].some((k) => k in b)) problems.push(`${at}: holds markup; a block is data`);
+    if (/gradient/i.test(text)) problems.push(`${at}: has a gradient`);
+    if (CYRILLIC.test(text)) problems.push(`${at}: Cyrillic text`);
+
+    if (!(THEMES as readonly string[]).includes(b.theme)) problems.push(`${at}: theme ${b.theme} is not one of ${THEMES.join(", ")}`);
+    // the organism and its axes
+    const org = byName.get(b.organism);
+    if (!org) { problems.push(`${at}: no organism ${b.organism}`); continue; }
+    const orgsAll = Object.fromEntries(byName);
+    const alt = b.alt ? byName.get(b.alt.organism) : undefined;
+    if (b.alt && !alt) problems.push(`${at}: no organism ${b.alt.organism} (alt)`);
+    /** the organisms the block draws: its own and the alt one */
+    const drawn = [org, ...(alt ? [alt] : [])];
+    for (const [axis, values] of Object.entries(b.axes)) {
+      if (b.alt?.axis === axis) {
+        if (JSON.stringify(values) !== JSON.stringify(b.alt.values)) problems.push(`${at}: the alt axis ${axis} takes ${b.alt.values.join(", ")}`);
+        if (b.defaults[axis] !== b.alt.values[0]) problems.push(`${at}: the alt axis ${axis} starts from ${b.alt.values[0]}`);
+        continue;
+      }
+      const field = axisField(org, axis, orgsAll);
+      if (!field) { problems.push(`${at}: axis ${axis} is not a prop (or a field of a grouped prop) of ${org.name}`); continue; }
+      const union = literalsOf(field.ts);
+      if (!union) { problems.push(`${at}: axis ${axis}: ${org.name}.${axis} is not a union of literals`); continue; }
+      const missing = union.filter((v) => !values.includes(v));
+      const extra = values.filter((v) => !union.includes(v));
+      if (extra.length) problems.push(`${at}: axis ${axis} has values the organism does not know: ${extra.join(", ")}`);
+      if (missing.length) problems.push(`${at}: axis ${axis} leaves out ${missing.join(", ")} of ${org.name}.${axis}`);
+      const d = b.defaults[axis];
+      if (d === undefined || !values.includes(d)) problems.push(`${at}: axis ${axis} has no valid default`);
+      else if (field.default !== undefined && String(field.default) !== d) problems.push(`${at}: default of ${axis} is ${d}, the organism says ${String(field.default)}`);
+    }
+    /** a grouped prop sets an axis when it carries the field of a dotted axis */
+    const setsAxis = (props: Record<string, Value>): string[] => Object.keys(b.axes).filter((axis) => {
+      const [k, f] = axis.split(".");
+      const v = props[k!];
+      return v !== undefined && (f === undefined || (isGroup(v) && f in v));
+    });
+    for (const k of Object.keys(b.defaults)) if (!(k in b.axes)) problems.push(`${at}: default for ${k}, which is not an axis`);
+
+    // variants resolve: only declared axes and values, distinct rows, every axis value shown
+    const seen = new Map<string, string>();
+    const used = new Map<string, Set<string>>(Object.entries(b.axes).map(([a]) => [a, new Set([b.defaults[a] ?? ""])]));
+    if (new Set(b.variants.map((v) => v.id)).size !== b.variants.length) problems.push(`${at}: variant ids are not unique`);
+    for (const v of b.variants) {
+      variantCount++;
+      for (const [axis, value] of Object.entries(v.set)) {
+        if (!(axis in b.axes)) { problems.push(`${at}.${v.id}: ${axis} is not an axis`); continue; }
+        if (!b.axes[axis]!.includes(value)) problems.push(`${at}.${v.id}: ${axis}="${value}" is not one of ${b.axes[axis]!.join(", ")}`);
+        used.get(axis)?.add(value);
+      }
+      const vorg = byName.get(drawnBy(b, v)) ?? org;
+      for (const axis of setsAxis(v.props ?? {})) problems.push(`${at}.${v.id}: ${axis} is an axis; set it in "set"`);
+      for (const [k, val] of Object.entries(v.props ?? {})) {
+        if (!vorg.props.some((p) => p.name === k)) problems.push(`${at}.${v.id}: prop ${k} is not a prop of ${vorg.name}`);
+        for (const r of refsIn(val)) if (r.startsWith("ui.") ? has(r.slice(3)) === undefined : !b.data.some((x) => x.as === r.split(".")[0])) problems.push(`${at}.${v.id}: ${r} is not in the content or the data`);
+      }
+      const row = JSON.stringify(Object.keys(b.axes).map((a) => v.set[a] ?? b.defaults[a]));
+      const twin = seen.get(row);
+      if (twin) problems.push(`${at}.${v.id}: same row as ${twin}`);
+      seen.set(row, v.id);
+      if (typeof has(`blocks.variants.${key}.${v.id}`) !== "string") problems.push(`${at}.${v.id}: no label ui.blocks.variants.${key}.${v.id}`);
+    }
+    for (const [axis, values] of Object.entries(b.axes)) for (const value of values) if (!used.get(axis)?.has(value)) problems.push(`${at}: no variant shows ${axis}="${value}"`);
+    const labels = has(`blocks.variants.${key}`);
+    if (labels && typeof labels === "object") for (const id of Object.keys(labels)) if (!b.variants.some((v) => v.id === id)) problems.push(`${at}: content has a label for the missing variant ${id}`);
+    for (const k of ["names", "docs"]) if (typeof has(`blocks.${k}.${key}`) !== "string") problems.push(`${at}: no text ui.blocks.${k}.${key}`);
+
+    // slots: the patterns the organism is made of
+    const made = [...organismsIn(drawn.map((o) => o.view))].filter((n) => patterns.has(n)).sort();
+    if (JSON.stringify(made) !== JSON.stringify([...b.slots].sort())) problems.push(`${at}: slots ${JSON.stringify(b.slots)} differ from the parts and patterns of ${org.name}: ${JSON.stringify(made)}`);
+    for (const s of b.slots) if (!patterns.has(s)) problems.push(`${at}: ${s} is not a part or pattern`);
+
+    // events
+    for (const [ev, action] of Object.entries(b.events ?? {})) {
+      if (!drawn.every((o) => o.events?.some((e) => e.name === ev))) problems.push(`${at}: ${org.name} has no event ${ev}`);
+      if (!ACTIONS.has(action)) problems.push(`${at}: action ${action} is not one a page may call`);
+    }
+
+    // data: the fixtures exist and carry every field
+    for (const d of b.data) {
+      const col = plan.inputs.collections.find((c) => c.value.collection === d.collection);
+      if (!col) { problems.push(`${at}: no fixture ${d.collection}`); continue; }
+      if (col.value.kind !== d.kind) problems.push(`${at}: fixture ${d.collection} is of kind ${col.value.kind}, the block says ${d.kind}`);
+      if (!col.value.entries.length) problems.push(`${at}: fixture ${d.collection} is empty`);
+      if (!org.records[d.record]) { if (!(plan.inputs.organisms.some((o) => o.value.records[d.record]))) problems.push(`${at}: no record ${d.record}`); }
+      // a field the record marks optional (an old price, an image) may be missing from an entry
+      const rec = (org.records[d.record] ?? plan.inputs.organisms.find((o) => o.value.records[d.record])?.value.records[d.record]) as { name: string; optional?: boolean }[] | undefined;
+      const optional = new Set((rec ?? []).filter((f) => f.optional).map((f) => f.name));
+      for (const [field, path] of Object.entries(d.fields)) for (const e of col.value.entries) {
+        const v = path.split("|")[0]!.split(".").reduce<unknown>((x, k) => (x as Record<string, unknown> | undefined)?.[k], e);
+        if (v === undefined && !optional.has(field)) problems.push(`${at}: ${d.collection}/${e.id} has no ${path} (field ${field})`);
+        if (field === "icon" && typeof v === "string" && !icons.has(v)) problems.push(`${at}: ${d.collection}/${e.id}: icon ${v} is not a Lucide glyph of the registry`);
+      }
+    }
+
+    // sample: props of the organism, required ones present, texts from the dictionary, data from the block
+    const sample = b.sample.props;
+    for (const k of Object.keys(sample)) if (!drawn.some((o) => o.props.some((p) => p.name === k))) problems.push(`${at}: sample prop ${k} is not a prop of ${drawn.map((o) => o.name).join(" or ")}`);
+    for (const o of drawn) for (const p of o.props) if (p.required && !(p.name in sample)) problems.push(`${at}: sample lacks the required prop ${o.name}.${p.name}`);
+    for (const axis of setsAxis(sample)) problems.push(`${at}: sample sets the axis ${axis}; a variant does that`);
+    for (const r of refsIn(sample)) {
+      if (r.startsWith("ui.")) { if (has(r.slice(3)) === undefined) problems.push(`${at}: ${r} is not in content/ui/en.json`); }
+      else if (!b.data.some((d) => d.as === r.split(".")[0])) problems.push(`${at}: sample reads ${r}, which no data entry provides`);
+    }
+    // a record of labels handed over by a dictionary reference carries every field of the record
+    for (const [name, val] of Object.entries(sample)) {
+      const prop = org.props.find((p) => p.name === name);
+      const r = prop && typeof prop.type === "object" && "record" in prop.type ? prop.type.record : null;
+      const ref = (val as { $?: string }).$;
+      if (r && ref?.startsWith("ui.")) {
+        const sub = has(ref.slice(3)) as Record<string, unknown> | undefined;
+        for (const f of org.records[r] ?? []) if (!f.optional && typeof sub?.[f.name] !== "string") problems.push(`${at}: ${ref}.${f.name} is missing (record ${r})`);
+      }
+    }
+    // a Plan picked by id must exist in the fixture
+    const pick = JSON.stringify(sample).match(/"op":"pick","args":\[\{"\$":"(\w+)"\},"([^"]+)"\]/);
+    if (pick) {
+      const d = b.data.find((x) => x.as === pick[1]);
+      const col = d && plan.inputs.collections.find((c) => c.value.collection === d.collection);
+      if (!col?.value.entries.some((e) => e.id === pick[2])) problems.push(`${at}: sample picks ${pick[2]}, which is not in the fixture`);
+    }
+  }
+
+  // the composed screens: every use names a block and one of its variants; the gallery shows every variant
+  const blocks = plan.inputs.blocks.map((b) => b.value);
+  const orgs = Object.fromEntries([...byName.entries()]);
+  for (const s of plan.inputs.screens) {
+    if (!s.composed) continue;
+    const r = expandComposed(s.composed, blocks, orgs);
+    for (const m of r.problems) problems.push(`composed ${m}`);
+    if (s.composed.gallery) {
+      const dump = JSON.stringify(s.value.areas);
+      for (const b of blocks) for (const v of b.variants) if (!dump.includes(`"data-variant":"${v.id}"`) || !dump.includes(`"data-block":"${blockKey(b)}"`)) problems.push(`gallery ${s.value.name}: no section for ${blockKey(b)}.${v.id}`);
+    }
+  }
+  for (const f of plan.inputs.organisms.filter((o) => byName.get(o.value.name) && ["SectionFrame", "MediaFrame", "ActionGroup", ...plan.inputs.blocks.flatMap((b) => [b.value.organism, ...(b.value.alt ? [b.value.alt.organism] : [])])].includes(o.value.name))) {
+    if (/gradient/i.test(JSON.stringify(f.value))) problems.push(`${f.value.name}: has a gradient`);
+  }
+  return { name: "blocks", what: `${plan.inputs.blocks.length} blocks, ${variantCount} variants: schema, organism and axes, variants resolve and show every axis value, fixtures, text from the dictionary, no Cyrillic, no gradients; composed screens use real blocks and variants`, problems };
+}
diff --git a/xgen/check/src/corners.ts b/xgen/check/src/corners.ts
new file mode 100644
index 0000000..e6a6bed
--- /dev/null
+++ b/xgen/check/src/corners.ts
@@ -0,0 +1,55 @@
+// The `corners` group of `xgen check`: one corner token. Plain `rounded` reads --radius (theme.css), so a theme changes every corner at once.
+// No other rounded-* class is allowed in the specs; `rounded-full` and `rounded-none` only where CORNER_ALLOW names the file, the count and why.
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import type { Plan } from "@ui8kit/xgen-generator";
+import { CORNER_ALLOW, CORNER_DIRS, KIT_RADIUS_ALLOW, cornerClasses } from "./audit-rules";
+export { cornerClasses };
+import { styleProblems } from "./style-zones";
+import { result, type CheckResult } from "./result";
+
+const walk = (dir: string): string[] => (existsSync(dir) ? readdirSync(dir).flatMap((n) => (statSync(join(dir, n)).isDirectory() ? walk(join(dir, n)) : [join(dir, n)])) : []);
+
+
+/** the problems of one file: a class other than rounded, rounded-full and rounded-none, or a full/none count that is not the allowed one */
+export function cornerProblems(key: string, text: string): string[] {
+  const problems: string[] = [];
+  const found = cornerClasses(text);
+  for (const c of found) if (c !== "rounded-full" && c !== "rounded-none") problems.push(`xgen/${key}: ${c}; use plain \`rounded\` (the theme radius)`);
+  const allow = CORNER_ALLOW[key];
+  for (const kind of ["full", "none"] as const) {
+    const n = found.filter((c) => c === `rounded-${kind}`).length;
+    const allowed = allow?.[kind] ?? 0;
+    if (n > allowed) problems.push(`xgen/${key}: ${n} rounded-${kind}, ${allowed} allowed; corners are plain \`rounded\` (exceptions: radio, avatar, switch, timeline dots, badges, functional resets)`);
+    else if (n < allowed) problems.push(`xgen/check/src/audit-rules.ts: ${key} now holds ${n} rounded-${kind}; lower its allowance from ${allowed} to ${n}`);
+  }
+  return problems;
+}
+
+export function checkCorners(plan: Plan): CheckResult {
+  const root = plan.xgenRoot;
+  const problems: string[] = [];
+  const seen = new Set<string>();
+  for (const dir of CORNER_DIRS) {
+    for (const f of walk(xgenPaths(root).specs(dir)).filter((x) => x.endsWith(".json")).sort()) {
+      const key = `specs/${dir}/${f.slice(xgenPaths(root).specs(dir).length + 1)}`;
+      seen.add(key);
+      problems.push(...cornerProblems(key, readFileSync(f, "utf8")));
+    }
+  }
+  for (const key of Object.keys(CORNER_ALLOW)) if (!seen.has(key)) problems.push(`xgen/check/src/audit-rules.ts: CORNER_ALLOW names ${key}, which does not exist`);
+  // kit.css: a border-radius is the token (var(--radius), scaled or not), a per-element token that falls back to it (var(--radius-card, var(--radius))) or an allowed exception
+  const kit = join(root, "runtimes", "core", "assets", "styles", "kit.css");
+  let utility = "";
+  readFileSync(kit, "utf8").split("\n").forEach((l, i) => {
+    utility = /@utility\s+([\w-]+)/.exec(l)?.[1] ?? (l.startsWith("}") ? "" : utility);
+    for (const m of l.matchAll(/border-radius:\s*([^;}]+)/g)) {
+      const v = m[1]!.trim();
+      if (v.includes("var(--radius)") || /^var\(--radius-(badge|button|card|alert|media),/.test(v) || v === "inherit" || KIT_RADIUS_ALLOW[utility] === v) continue;
+      problems.push(`xgen/runtimes/core/assets/styles/kit.css:${i + 1}: border-radius ${v}; derive it from var(--radius)`);
+    }
+  });
+  problems.push(...styleProblems(plan.workspace, "corners"));
+  return result("corners", "one corner token: plain `rounded` (var(--radius)) everywhere; rounded-full and rounded-none only in the allowlist, each with its reason", problems);
+}
diff --git a/xgen/check/src/dictionary.ts b/xgen/check/src/dictionary.ts
new file mode 100644
index 0000000..3aa121f
--- /dev/null
+++ b/xgen/check/src/dictionary.ts
@@ -0,0 +1,107 @@
+// The `dictionary` group of `xgen check`: the keys the apps read equal the keys of xgen/content/ui/en.json, exactly.
+// A key is read when a view shows it (`ui.a.b` in a screen, a block use or an organism), when an app menu names it (routes[].titleKey),
+// or when a subtree is handed to an organism prop and the organism reads that leaf (`labels` = ui.content.labels, the view reads `labels.home`).
+// Only a dynamic index (`at(labels, status)`) reads a whole subtree; such subtrees are listed so that the rule stays visible.
+import { relative, join } from "node:path";
+import type { Plan } from "@ui8kit/xgen-generator";
+import { isGroup, isOp, type OrganismSpec, type Value, type ViewNode } from "@ui8kit/xgen-screens";
+import type { CheckResult } from "./result";
+
+type Tree = Record<string, unknown>;
+const isTree = (v: unknown): v is Tree => !!v && typeof v === "object" && !Array.isArray(v);
+const getAt = (d: Tree, key: string): unknown => key.split(".").reduce<unknown>((o, k) => (isTree(o) ? o[k] : undefined), d);
+export function leavesOf(d: unknown, prefix = ""): string[] {
+  if (!isTree(d)) return [prefix];
+  return Object.entries(d).flatMap(([k, v]) => leavesOf(v, prefix ? `${prefix}.${k}` : k));
+}
+
+export interface DictionaryUse {
+  /** leaf keys that something reads */
+  used: Set<string>;
+  /** keys that are read but are not in the dictionary, with where */
+  missing: Array<{ key: string; where: string }>;
+  /** subtrees read through a dynamic index */
+  dynamic: Set<string>;
+}
+
+/** what the screens (expanded), the organisms they draw and the app menus read from the dictionary */
+export function dictionaryUse(plan: Plan): DictionaryUse {
+  const dict = plan.inputs.dictionary.value as Tree;
+  const orgs = new Map(plan.inputs.organisms.map((o) => [o.value.name, o]));
+  const out: DictionaryUse = { used: new Set(), missing: [], dynamic: new Set() };
+  const seen = new Set<string>();
+  const rel = (f: string): string => relative(join(plan.xgenRoot, ".."), f);
+
+  /** the dictionary key a ref names in this scope, or null when it is not a dictionary ref */
+  const keyOf = (v: Value, env: Map<string, string>): string | null => {
+    if (!isTree(v) || typeof (v as { $?: unknown }).$ !== "string") return null;
+    const path = (v as { $: string }).$;
+    if (path.startsWith("ui.")) return path.slice(3);
+    const [head, ...rest] = path.split(".");
+    const base = env.get(head!);
+    return base === undefined ? null : [base, ...rest].join(".");
+  };
+  const whole = (key: string): void => { for (const l of leavesOf(getAt(dict, key), key)) out.used.add(l); };
+  /** read a key: a leaf counts; a subtree in a place other than an organism prop counts as a whole */
+  const read = (key: string, where: string): void => {
+    const v = getAt(dict, key);
+    if (v === undefined) out.missing.push({ key, where });
+    else if (isTree(v)) whole(key);
+    else out.used.add(key);
+  };
+  const value = (v: Value | undefined, env: Map<string, string>, where: string): void => {
+    if (v === undefined || v === null || typeof v !== "object") return;
+    const k = keyOf(v, env);
+    if (k !== null) { read(k, where); return; }
+    if (isOp(v)) {
+      const [a, ...rest] = v.args;
+      const sub = v.op === "at" && a !== undefined ? keyOf(a, env) : null;
+      if (sub !== null && isTree(getAt(dict, sub))) { out.dynamic.add(sub); whole(sub); rest.forEach((x) => value(x, env, where)); return; }
+      v.args.forEach((x) => value(x, env, where));
+    } else if (isGroup(v)) Object.values(v).forEach((x) => value(x, env, where));
+  };
+  const organismUse = (name: string, props: Record<string, Value>, env: Map<string, string>, where: string): void => {
+    const o = orgs.get(name);
+    const inner = new Map<string, string>();
+    for (const [p, v] of Object.entries(props)) {
+      const k = keyOf(v, env);
+      if (k !== null && isTree(getAt(dict, k)) && o) inner.set(p, k);
+      else value(v, env, where);
+    }
+    if (!o || inner.size === 0) return;
+    const memo = `${name}|${[...inner].map(([a, b]) => `${a}=${b}`).sort().join(",")}`;
+    if (seen.has(memo)) return;
+    seen.add(memo);
+    nodes((o.value as OrganismSpec).view, inner, rel(o.file));
+  };
+  const nodes = (list: ViewNode[] | undefined, env: Map<string, string>, where: string): void => {
+    for (const n of list ?? []) {
+      if ("use" in n) { Object.values(n.props ?? {}).forEach((x) => value(x, env, where)); Object.values(n.attrs ?? {}).forEach((x) => value(x, env, where)); Object.values(n.on ?? {}).forEach((h) => (h.args ?? []).forEach((x) => value(x, env, where))); nodes(n.children, env, where); }
+      else if ("text" in n) value(n.text, env, where);
+      else if ("when" in n) { value(n.when, env, where); nodes(n.then, env, where); nodes(n.else, env, where); }
+      else if ("each" in n) { value(n.each, env, where); const e = new Map(env); e.delete(n.as); if (n.index) e.delete(n.index); value(n.key, e, where); nodes(n.do, e, where); }
+      else if ("slot" in n) (n.args ?? []).forEach((x) => value(x, env, where));
+      else if ("organism" in n) {
+        organismUse(n.organism, n.props ?? {}, env, where);
+        Object.values(n.on ?? {}).forEach((h) => (h.args ?? []).forEach((x) => value(x, env, where)));
+        for (const s of Object.values(n.slots ?? {})) { const e = new Map(env); s.args.forEach((a) => e.delete(a)); nodes(s.do, e, where); }
+      }
+    }
+  };
+  for (const s of plan.inputs.screens) {
+    nodes(s.value.layout, new Map(), rel(s.file));
+    for (const p of Object.values(s.value.parts ?? {})) nodes(p, new Map(), rel(s.file));
+    for (const a of Object.values(s.value.areas)) nodes(a, new Map(), rel(s.file));
+    for (const v of Object.values(s.value.consts ?? {})) value(v, new Map(), rel(s.file));
+  }
+  for (const s of plan.inputs.screens) for (const r of s.value.menu ?? []) read(r.titleKey, rel(s.file));
+  return out;
+}
+
+export function checkDictionary(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const use = dictionaryUse(plan);
+  for (const m of use.missing) problems.push(`${m.where}: reads ui.${m.key}, which is not in xgen/content/ui/en.json`);
+  for (const k of leavesOf(plan.inputs.dictionary.value)) if (!use.used.has(k)) problems.push(`xgen/content/ui/en.json: ${k} is read by no view and no screen menu`);
+  return { name: "dictionary", what: `the keys the views and the screen menus read equal the keys of the dictionary, leaf by leaf (subtrees read by a dynamic index: ${[...use.dynamic].sort().join(", ") || "none"})`, problems };
+}
diff --git a/xgen/check/src/e2e/blocks.ts b/xgen/check/src/e2e/blocks.ts
new file mode 100644
index 0000000..b746079
--- /dev/null
+++ b/xgen/check/src/e2e/blocks.ts
@@ -0,0 +1,251 @@
+// The gallery: an index of the blocks, a page per block with every variant, the facts each variant promises, containers, dark theme, an unknown block.
+import type { Page } from "playwright-core";
+import { galleryOf, THEMES, type BlockSpec } from "@ui8kit/xgen-screens";
+import type { E2eResult, Expect, Shot, Snap } from "./common";
+import { legacyChecks } from "./generic";
+import { factsChecks } from "./facts";
+import { pageChecks } from "./page-checks";
+
+/** collection sizes, plus each block data alias (`as`) under its own name */
+const withAliases = (b: BlockSpec, counts: Record<string, number>): Record<string, number> => ({ ...counts, ...Object.fromEntries((b.data ?? []).filter((d) => counts[d.collection] !== undefined).map((d) => [d.as, counts[d.collection]!])) });
+
+export interface BlocksData { dict: any; blocks: BlockSpec[]; features: number; faq: number; tiers: Array<{ highlighted: boolean }>; counts: Record<string, number>; done: number }
+const keyOf = (b: BlockSpec): string => b.id.slice("block.".length);
+const colsOf = (v: string): number => Number(v.replace("1-", ""));
+
+/** the gallery: an index of the blocks, a page per block with every variant, the facts each variant promises (counts, sides, columns, tones), theme, no gradients */
+export async function blocksScenario(page: Page, base: string, data: BlocksData, shot: (label: string, full?: boolean) => Promise<void>, snap: (label: string) => Promise<void>): Promise<E2eResult> {
+  const failures: string[] = [];
+  let steps = 0;
+  const expect = (what: string, ok: boolean, got?: unknown): void => { steps++; if (!ok) failures.push(`${what}${got !== undefined ? ` (got ${JSON.stringify(got)})` : ""}`); };
+  const d = data.dict.blocks;
+  const sorted = galleryOf(data.blocks);
+  const h1 = (): Promise<string> => page.locator("h1").first().innerText();
+  const theme = (): Promise<string | undefined> => page.evaluate(() => document.documentElement.dataset.theme);
+  const xs = (sel: string): Promise<number[]> => page.locator(sel).evaluateAll((els) => [...new Set(els.map((e) => Math.round(e.getBoundingClientRect().left)))].sort((a, b) => a - b));
+  const general = (where: string): Promise<void> => pageChecks(page, expect, where);
+
+  // 1. the index
+  await page.goto(base + "/");
+  await page.waitForSelector('[data-testid="block-list"]');
+  expect("index h1 is the gallery title", (await h1()) === d.title, await h1());
+  await general("index");
+  const links = await page.$$eval('[data-testid="block-link"]', (els) => els.map((e) => `${e.getAttribute("data-block")}=${(e.textContent ?? "").trim()}`));
+  expect("one link per block, with its name", JSON.stringify(links) === JSON.stringify(sorted.map((b) => `${keyOf(b)}=${d.names[keyOf(b)]}`)), links);
+  const sections = await page.$$eval('[data-testid="theme-section"]', (els) => els.map((e) => ({ id: e.getAttribute("data-theme-id"), h2: e.querySelector("h2")?.textContent?.trim() ?? "", blocks: [...e.querySelectorAll('[data-testid="block-link"]')].map((a) => a.getAttribute("data-block")) })));
+  const themesUsed = THEMES.filter((t) => data.blocks.some((b) => b.theme === t));
+  expect("the index has one section per theme, in the order of the themes", JSON.stringify(sections.map((x) => x.id)) === JSON.stringify(themesUsed), sections.map((x) => x.id));
+  expect("every theme section has its title and lists its blocks", sections.every((x) => x.h2 === data.dict.blocks.themes[x.id!].title && JSON.stringify(x.blocks) === JSON.stringify(sorted.filter((b) => b.theme === x.id).map(keyOf))), sections);
+  expect("the gallery has at least 60 blocks and 300 variants", sorted.length >= 60 && sorted.reduce((n, b) => n + b.variants.length, 0) >= 300, [sorted.length, sorted.reduce((n, b) => n + b.variants.length, 0)]);
+  await snap("index");
+  await shot("index-light", true);
+
+  // 2. a page per block: every variant is there, in order, with its label, and keeps the facts of its row
+  for (const b of sorted) {
+    const key = keyOf(b);
+    await page.getByTestId("block-link").and(page.locator(`[data-block="${key}"]`)).click().catch(async () => { await page.goto(base + `/#/${key}`); });
+    await page.waitForFunction((k) => location.hash === `#/${k}`, key);
+    await page.waitForSelector('[data-testid="block-title"]');
+    expect(`${key}: h1 is the block name`, (await h1()) === d.names[key], await h1());
+    expect(`${key}: the page names its theme`, (await page.getByTestId("block-theme").innerText()) === data.dict.blocks.themes[b.theme].title, await page.getByTestId("block-theme").innerText());
+    await general(key);
+    const sections = await page.$$eval('[data-testid="variant"]', (els) => els.map((e) => e.getAttribute("data-variant")));
+    expect(`${key}: one section per variant, in order`, JSON.stringify(sections) === JSON.stringify(b.variants.map((v) => v.id)), sections);
+    const labels = await page.$$eval('[data-testid="variant-label"]', (els) => els.map((e) => (e.textContent ?? "").trim()));
+    expect(`${key}: every variant has its label`, JSON.stringify(labels) === JSON.stringify(b.variants.map((v) => d.variants[key][v.id])), labels);
+    for (const v of b.variants) {
+      const row: Record<string, string> = { ...b.defaults, ...v.set };
+      const at = (sel: string) => page.locator(`[data-testid="variant"][data-variant="${v.id}"] ${sel}`);
+      const where = `${key}.${v.id}`;
+      const n = async (sel: string): Promise<number> => at(sel).count();
+      if ("tone" in row && (await n('[data-testid="section"]')) > 0) {
+        expect(`${where}: the section carries its tone and density`, (await at('[data-testid="section"]').first().getAttribute("data-tone")) === row["tone"] && (!("density" in b.axes) || (await at('[data-testid="section"]').first().getAttribute("data-density")) === (row["density"] ?? "default")), [await at('[data-testid="section"]').first().getAttribute("data-tone"), row["tone"]]);
+      }
+      if (b.facts) {
+        await factsChecks(b.facts, row, where, n, (sel) => xs(`[data-testid="variant"][data-variant="${v.id}"] ${sel}`), withAliases(b, data.counts), expect);
+      } else if (key === "header") {
+        expect(`${where}: layout is on the header`, (await at('[data-testid="site-header"]').getAttribute("data-layout")) === row["layout"]);
+        expect(`${where}: sticky only when asked`, (await at('[data-testid="site-header"]').evaluate((e) => getComputedStyle(e).position)) === (row["position"] === "sticky" ? "sticky" : "static"));
+        expect(`${where}: two links, only Home is current`, (await n('[data-testid="nav-link"]')) === 2 && (await n('[data-testid="nav-link"][aria-current="page"]')) === 1);
+        const brand = await at('[data-testid="brand"]').boundingBox(), nav = await at('[data-testid="site-nav"]').boundingBox();
+        expect(`${where}: ${row["layout"] === "stacked" ? "brand above the links" : "brand and links in a row"}`, !!brand && !!nav && (row["layout"] === "stacked" ? nav.y > brand.y + brand.height - 1 : Math.abs(nav.y - brand.y) < 40), [brand?.y, nav?.y]);
+      } else if (key === "footer") {
+        expect(`${where}: copyright and layout`, (await at('[data-testid="copyright"]').innerText()) === data.dict.site.footer.copyright && (await at('[data-testid="site-footer"]').getAttribute("data-layout")) === row["layout"]);
+      } else if (key === "hero") {
+        const own = (v.props?.["title"] as { $?: string } | undefined)?.$, wantTitle = own ? own.split(".").slice(1).reduce((o: any, k) => o[k], data.dict) : data.dict.site.home.title;
+        expect(`${where}: the title is an h2 in the gallery${own ? ", from the case copy" : ""}`, (await at('h2[id$="-title"]').innerText()) === wantTitle, await at('h2[id$="-title"]').innerText());
+        expect(`${where}: actions: ${row["actions.mode"] === "form" ? "an email form instead of links" : `one primary${row["actions.mode"] === "two" ? " and one secondary" : ""}`}`, (await n('[data-testid="action-primary"]')) === (row["actions.mode"] === "form" ? 0 : 1) && (await n('[data-testid="action-secondary"]')) === (row["actions.mode"] === "two" ? 1 : 0) && (await n('[data-testid="email-form"]')) === (row["actions.mode"] === "form" ? 1 : 0));
+        const media = ({ none: 0, image: 1, backdrop: 1, code: 0, cluster: 3 } as Record<string, number>)[row["media.kind"]!]!;
+        expect(`${where}: media only when asked (${row["media.kind"]})`, (await n('[data-slot="media-frame"]')) === media, await n('[data-slot="media-frame"]'));
+        expect(`${where}: the terminal window only when asked`, (await n('[data-slot="code-window"], [data-testid="code-window"]')) === (row["media.kind"] === "code" ? 1 : 0));
+        if (row["media.kind"] === "image" && row["layout"] === "split") {
+          const m = await at('[data-slot="media-frame"]').boundingBox(), h = await at('h2[id$="-title"]').boundingBox();
+          expect(`${where}: media at the ${row["media.side"]}`, !!m && !!h && (row["media.side"] === "start" ? m.x < h.x : m.x > h.x), [m?.x, h?.x]);
+        }
+      } else if (key === "features") {
+        expect(`${where}: one card per feature`, (await n('[data-testid="feature-card"]')) === data.features, await n('[data-testid="feature-card"]'));
+        expect(`${where}: every card has an icon`, (await n('[data-testid="feature-card"] svg')) >= data.features);
+        if (row["layout"] === "rows") {
+          expect(`${where}: rows, one media per feature`, (await n('[data-testid="feature-rows"]')) === 1 && (await n('[data-slot="media-frame"]')) === data.features);
+          const sides: string[] = [];
+          for (let i = 0; i < data.features; i++) {
+            const card = at('[data-testid="feature-card"]').nth(i);
+            const m = await card.locator('[data-slot="media-frame"]').boundingBox(), h = await card.locator("h3").boundingBox();
+            sides.push(m && h ? (m.x > h.x ? "end" : "start") : "?");
+          }
+          const want = Array.from({ length: data.features }, (_, i) => row["mediaSide"] === "alternate" ? (i % 2 ? "start" : "end") : row["mediaSide"]!);
+          expect(`${where}: media side ${row["mediaSide"]}`, JSON.stringify(sides) === JSON.stringify(want), sides);
+        } else {
+          expect(`${where}: a grid of ${colsOf(row["cols"]!)} columns`, (await xs(`[data-testid="variant"][data-variant="${v.id}"] [data-testid="feature-card"]`)).length === Math.min(colsOf(row["cols"]!), data.features), await xs(`[data-testid="variant"][data-variant="${v.id}"] [data-testid="feature-card"]`));
+        }
+      } else if (key === "pricing") {
+        const want = row["emphasis"] === "auto" ? data.tiers.filter((x) => x.highlighted).length : 0;
+        const plans = v.props?.["plans"] ? data.counts["duo"]! : data.tiers.length;
+        expect(`${where}: one card per tier`, (await n('[data-testid="tiers"] [data-highlighted]')) === plans);
+        expect(`${where}: emphasis on ${v.props?.["plans"] ? 0 : want} card(s)`, (await n('[data-highlighted="true"]')) === (v.props?.["plans"] ? 0 : want), await n('[data-highlighted="true"]'));
+        expect(`${where}: a billing toggle only when asked`, (await n('[data-testid="billing"]')) === (row["billing"] === "off" ? 0 : 1));
+        if (row["billing"] !== "off") {
+          const shown = await at('[data-highlighted] h2').allInnerTexts();
+          expect(`${where}: prices follow the period (${row["billing"]})`, shown.length === plans, shown);
+        }
+        const cols = row["layout"] === "stack" ? 1 : Math.min(colsOf(row["cols"]!), plans);
+        expect(`${where}: ${cols} column(s)`, (await xs(`[data-testid="variant"][data-variant="${v.id}"] [data-highlighted]`)).length === cols, await xs(`[data-testid="variant"][data-variant="${v.id}"] [data-highlighted]`));
+      } else if (key === "plan") {
+        expect(`${where}: one plan card`, (await n("[data-highlighted]")) === 1);
+        expect(`${where}: emphasis ${row["emphasis"]}`, (await at("[data-highlighted]").getAttribute("data-highlighted")) === (row["emphasis"] === "auto" ? "true" : "false"));
+      } else if (key === "faq") {
+        const shown = row["filter.mode"] === "categories" ? data.counts["faq:billing"]! : data.faq;
+        expect(`${where}: one ${row["layout"] === "chat" ? "bubble pair" : "disclosure"} per question${row["filter.mode"] === "categories" ? " of the chosen category" : ""}`, (await n('[data-testid="faq-item"]')) === shown, await n('[data-testid="faq-item"]'));
+        expect(`${where}: a search field only when asked`, (await n('[role="search"]')) === (row["search.mode"] === "field" ? 1 : 0));
+        expect(`${where}: category tabs only when asked`, (await n('[data-slot="switcher"]')) === (row["filter.mode"] === "categories" ? 1 : 0));
+        const cols = row["layout"] === "chat" ? 1 : Math.min(Number(row["cols"]), shown);
+        expect(`${where}: ${cols} column(s)`, (await xs(`[data-testid="variant"][data-variant="${v.id}"] [data-testid="faq-item"]`)).length === cols, await xs(`[data-testid="variant"][data-variant="${v.id}"] [data-testid="faq-item"]`));
+      } else if (key === "cta") {
+        const mode = row["actions.mode"];
+        const shape = mode === "form" ? "an email form instead of links" : `one primary${mode === "two" ? " and one secondary" : ""}`;
+        const primary = (await n('[data-testid="action-primary"]')) === (mode === "form" ? 0 : 1);
+        const secondary = (await n('[data-testid="action-secondary"]')) === (mode === "two" ? 1 : 0);
+        expect(`${where}: actions: ${shape}`, primary && secondary && (await n('[data-testid="email-form"]')) === (mode === "form" ? 1 : 0));
+        expect(`${where}: a customer quote only when asked`, (await n('[data-testid="proof"]')) === (row["proof"] === "quote" ? 1 : 0));
+        expect(`${where}: media only in the split layout`, (await n('[data-slot="media-frame"]')) === (row["layout"] === "split" ? 1 : 0));
+      } else {
+        // a variant that passes a short list of its own (e.g. three of the four stats) is counted by that list
+        const own = Object.fromEntries(Object.entries(v.props ?? {}).flatMap(([k, x]) => (x as { op?: string; args?: unknown[] } | null)?.op === "list" ? [[k, (x as { args: unknown[] }).args.length]] : []));
+        await legacyChecks(key, row, where, n, (sel) => xs(`[data-testid="variant"][data-variant="${v.id}"] ${sel}`), { ...data.counts, ...own }, data.done, expect);
+      }
+    }
+    if (key === "faq") {
+      const first = page.locator('[data-testid="faq-item"]').first();
+      await first.locator("summary").click();
+      expect("faq: a click opens a disclosure", (await first.getAttribute("open")) !== null);
+      await first.locator("summary").click();
+      expect("faq: a second click closes it", (await first.getAttribute("open")) === null);
+    }
+    if (key === "header") {
+      await page.getByTestId("theme-toggle").first().click();
+      expect("header: the theme button of a variant toggles the theme", (await theme()) === "dark");
+      await page.getByTestId("theme-toggle").first().click();
+      expect("header: and back", (await theme()) === "light");
+    }
+    await snap(`block-${key}`);
+    await shot(`${key}-light`, true);
+    await page.getByTestId("back").click();
+    await page.waitForSelector('[data-testid="block-list"]');
+  }
+
+  // 2b. containers: at 1400 and 390 px every block sits in a body of one width, centered; the inner container is centered in it and as wide as its max-width allows; no sideways scroll
+  for (const w of [1400, 390]) {
+    await page.setViewportSize({ width: w, height: 900 });
+    let ref: { left: number; width: number } | null = null;
+    for (const b of sorted) {
+      const key = keyOf(b);
+      await page.goto(base + `/#/${key}`);
+      await page.waitForSelector('[data-testid="block-title"]');
+      const m = await page.evaluate(() => ({
+        scroll: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+        vw: document.documentElement.clientWidth,
+        rows: [...document.querySelectorAll('[data-testid="variant"]')].map((v) => {
+          const body = v.querySelector('[data-testid="variant-body"]')!.getBoundingClientRect();
+          const c = v.querySelector('[data-slot="container"]');
+          const cr = c?.getBoundingClientRect();
+          const max = c ? parseFloat(getComputedStyle(c).maxWidth) : NaN;
+          return { id: v.getAttribute("data-variant")!, body: { left: body.left, width: body.width }, container: cr ? { left: cr.left, width: cr.width, max: Number.isFinite(max) ? max : Infinity } : null };
+        }),
+      }));
+      expect(`${key} at ${w}: no sideways scroll`, m.scroll <= 0, m.scroll);
+      for (const r of m.rows) {
+        ref ??= r.body;
+        expect(`${key}.${r.id} at ${w}: the body has the width and place of the reference`, Math.abs(r.body.left - ref.left) <= 1 && Math.abs(r.body.width - ref.width) <= 1, [r.body, ref]);
+        expect(`${key}.${r.id} at ${w}: the body is centered in the page`, Math.abs(r.body.left - (m.vw - r.body.left - r.body.width)) <= 18, [r.body.left, m.vw - r.body.left - r.body.width]);
+        if (r.container) {
+          const c = r.container;
+          expect(`${key}.${r.id} at ${w}: the container is centered in the body`, Math.abs((c.left - r.body.left) - (r.body.left + r.body.width - c.left - c.width)) <= 2, [c, r.body]);
+          expect(`${key}.${r.id} at ${w}: the container is as wide as its max-width allows`, Math.abs(c.width - Math.min(r.body.width, c.max)) <= 2, [c.width, r.body.width, c.max]);
+        }
+      }
+    }
+  }
+  // 2c. narrow columns: an element held narrower than its parent by a max-width, when it is the parent's only laid-out child (besides the heading),
+  // sits centered in it (equal gaps left and right) at 1600, 1024 and 768 px; a side column has siblings and is not checked
+  for (const w of [1600, 1024, 768]) {
+    await page.setViewportSize({ width: w, height: 900 });
+    for (const b of sorted) {
+      const key = keyOf(b);
+      await page.goto(base + `/#/${key}`);
+      await page.waitForSelector('[data-testid="block-title"]');
+      const off = await page.evaluate(() => {
+        const out: { variant: string; el: string; gaps: [number, number] }[] = [];
+        const shown = (e: Element) => {
+          const cs = getComputedStyle(e);
+          const r = e.getBoundingClientRect();
+          return cs.display !== "none" && cs.position !== "absolute" && cs.position !== "fixed" && r.width > 0 && r.height > 0;
+        };
+        for (const v of document.querySelectorAll('[data-testid="variant-body"]')) {
+          for (const el of v.querySelectorAll("*")) {
+            const max = parseFloat(getComputedStyle(el).maxWidth);
+            const parent = el.parentElement;
+            if (!Number.isFinite(max) || !parent || !shown(el)) continue;
+            // the main column: the only laid-out child, next to at most the section heading (a heading or a box led by one)
+            const heading = (e: Element) => /^H[1-3]$/.test(e.tagName) || /^H[1-3]$/.test(e.firstElementChild?.tagName ?? "");
+            const rest = [...parent.children].filter((e) => e !== el && shown(e));
+            if (heading(el) || rest.some((e) => !heading(e))) continue;
+            const ps = getComputedStyle(parent);
+            const pr = parent.getBoundingClientRect();
+            const inner = { left: pr.left + parseFloat(ps.paddingLeft) + parseFloat(ps.borderLeftWidth), right: pr.right - parseFloat(ps.paddingRight) - parseFloat(ps.borderRightWidth) };
+            const r = el.getBoundingClientRect();
+            if (r.width >= inner.right - inner.left - 2) continue;
+            const gaps: [number, number] = [r.left - inner.left, inner.right - r.right];
+            if (Math.abs(gaps[0] - gaps[1]) > 2) {
+              const id = el.getAttribute("data-testid") ?? el.getAttribute("data-slot") ?? el.tagName.toLowerCase();
+              out.push({ variant: v.closest('[data-testid="variant"]')?.getAttribute("data-variant") ?? "?", el: id, gaps: [Math.round(gaps[0]), Math.round(gaps[1])] });
+            }
+          }
+        }
+        return out;
+      });
+      expect(`${key} at ${w}: every narrow only-child column is centered in its parent`, off.length === 0, off);
+    }
+  }
+  await page.setViewportSize({ width: 1400, height: 900 });
+
+  // 3. dark: the same pages, kept theme across routes
+  await page.getByTestId("theme-toggle").click();
+  expect("the theme toggle sets dark", (await theme()) === "dark");
+  for (const b of sorted) {
+    const key = keyOf(b);
+    await page.goto(base + `/#/${key}`);
+    await page.waitForSelector('[data-testid="block-title"]');
+    await general(`${key} (dark)`);
+    await shot(`${key}-dark`, true);
+  }
+  expect("dark survives navigation", (await theme()) === "dark");
+  await page.getByTestId("theme-toggle").click();
+  expect("the theme toggles back to light", (await theme()) === "light");
+
+  // 4. an unknown block
+  await page.goto(base + "/#/nope");
+  await page.waitForFunction((title) => document.querySelector("h1")?.textContent === title, data.dict.site.notFound.title);
+  expect("unknown block shows the not-found page", (await h1()) === data.dict.site.notFound.title);
+  await snap("notfound");
+  return { name: "", steps, failures };
+}
diff --git a/xgen/check/src/e2e/catalog.ts b/xgen/check/src/e2e/catalog.ts
new file mode 100644
index 0000000..f14fdc7
--- /dev/null
+++ b/xgen/check/src/e2e/catalog.ts
@@ -0,0 +1,89 @@
+// The catalog: the index of sections and categories with their counts, a page per category with its blocks and variants in order,
+// the pages index and every composed page (one h1, the blocks of the page in order), no sideways scroll at 390, the theme, the page rules on every page.
+import type { Page } from "playwright-core";
+import type { BlockSpec, CatalogTree } from "@ui8kit/xgen-screens";
+import type { E2eResult, Shot, Snap } from "./common";
+import { pageChecks } from "./page-checks";
+
+export interface CatalogData { dict: any; blocks: BlockSpec[]; tree: CatalogTree }
+const keyOf = (b: BlockSpec): string => b.id.slice("block.".length);
+const dk = (id: string): string => id.replace(/-([a-z0-9])/g, (_m, c: string) => c.toUpperCase());
+const fill = (t: string, ...v: Array<string | number>): string => t.replace(/\{(\d+)\}/g, (_m, i: string) => String(v[Number(i)] ?? ""));
+
+export async function catalogScenario(page: Page, base: string, data: CatalogData, shot: Shot, snap: Snap): Promise<E2eResult> {
+  const failures: string[] = [];
+  let steps = 0;
+  const expect = (what: string, ok: boolean, got?: unknown): void => { steps++; if (!ok) failures.push(`${what}${got !== undefined ? ` (got ${JSON.stringify(got)})` : ""}`); };
+  const d = data.dict.catalog;
+  const byKey = new Map(data.blocks.map((b) => [keyOf(b), b]));
+  const h1 = (): Promise<string> => page.locator("h1").first().innerText();
+  const variantsOf = (e: { block: string; variants?: string[] }): string[] => (byKey.get(e.block)?.variants ?? []).map((v) => v.id).filter((v) => !e.variants || e.variants.includes(v));
+
+  // 1. the index: one section per catalog section, its categories in order with the counts, then the pages
+  await page.goto(base + "/");
+  await page.waitForSelector('[data-testid="category-list"]');
+  expect("index h1 is the catalog title", (await h1()) === d.title, await h1());
+  await pageChecks(page, expect, "catalog index");
+  const sections = await page.$$eval('[data-testid="catalog-section"]', (els) => els.map((e) => ({ id: e.getAttribute("data-section"), cats: [...e.querySelectorAll('[data-testid="category-link"]')].map((a) => a.getAttribute("data-category")) })));
+  expect("one index section per catalog section, categories in order", JSON.stringify(sections) === JSON.stringify(data.tree.sections.map((s) => ({ id: s.id, cats: s.categories.map((c) => c.id) }))), sections);
+  const counts = await page.$$eval('[data-testid="category-count"]', (els) => els.map((e) => (e.textContent ?? "").trim()));
+  const want = data.tree.sections.flatMap((s) => s.categories.map((c) => fill(d.count, c.entries.length, c.entries.reduce((n, e) => n + variantsOf(e).length, 0))));
+  expect("every category card counts its blocks and variants", JSON.stringify(counts) === JSON.stringify(want), counts);
+  const pageLinks = await page.$$eval('[data-testid="page-link"]', (els) => els.map((e) => e.getAttribute("data-page")));
+  expect("the index lists every page", JSON.stringify(pageLinks) === JSON.stringify(data.tree.pages.map((p) => p.id)), pageLinks);
+  const listed = new Set(data.tree.sections.flatMap((s) => s.categories.flatMap((c) => c.entries.flatMap((e) => variantsOf(e).map((v) => `${e.block}.${v}`)))));
+  expect("every variant of the kit is in a category", data.blocks.every((b) => b.variants.every((v) => listed.has(`${keyOf(b)}.${v.id}`))), data.blocks.flatMap((b) => b.variants.filter((v) => !listed.has(`${keyOf(b)}.${v.id}`)).map((v) => `${keyOf(b)}.${v.id}`)));
+  await snap("index");
+  await shot("index-light", true);
+
+  // 2. a page per category: its title, the section it belongs to, every block with its variants in order
+  for (const s of data.tree.sections) for (const c of s.categories) {
+    await page.goto(base + `/#/${c.id}`);
+    await page.waitForSelector('[data-testid="category-title"]');
+    expect(`${c.id}: h1 is the category name`, (await h1()) === d.categories[dk(c.id)], await h1());
+    expect(`${c.id}: names its section`, (await page.getByTestId("catalog-eyebrow").innerText()) === d.sections[s.id].title);
+    await pageChecks(page, expect, c.id);
+    const shown = await page.$$eval('[data-testid="catalog-block"]', (els) => els.map((e) => ({ block: e.getAttribute("data-block"), variants: [...e.querySelectorAll('[data-testid="variant"]')].map((v) => v.getAttribute("data-variant")) })));
+    expect(`${c.id}: every block with its variants, in order`, JSON.stringify(shown) === JSON.stringify(c.entries.map((e) => ({ block: e.block, variants: variantsOf(e) }))), shown);
+    const labels = await page.$$eval('[data-testid="variant-label"]', (els) => els.map((e) => (e.textContent ?? "").trim()));
+    expect(`${c.id}: every variant has its label`, JSON.stringify(labels) === JSON.stringify(c.entries.flatMap((e) => variantsOf(e).map((v) => data.dict.blocks.variants[e.block][v]))), labels);
+    if (c === data.tree.sections[0]!.categories[0]) await snap(`category-${c.id}`);
+  }
+
+  // 3. the pages: the index of pages, then every page with one h1 and the blocks of the page
+  await page.goto(base + "/#/pages");
+  await page.waitForSelector('[data-testid="pages-title"]');
+  expect("pages: h1 is the pages title", (await h1()) === d.pagesTitle, await h1());
+  await pageChecks(page, expect, "pages");
+  for (const p of data.tree.pages) {
+    await page.goto(base + `/#/page-${p.id}`);
+    await page.waitForSelector(`[data-testid="page-body"][data-page="${p.id}"]`);
+    await pageChecks(page, expect, `page ${p.id}`);
+    expect(`page ${p.id}: the bar names the page`, (await page.getByTestId("page-name").innerText()) === d.pages[dk(p.id)].title);
+    const kids = await page.locator('[data-testid="page-body"] > *').count();
+    expect(`page ${p.id}: at least one element per block`, kids >= p.uses.length, [kids, p.uses.length]);
+    await snap(`page-${p.id}`);
+    await shot(`page-${p.id}-light`, true);
+  }
+
+  // 3b. at 390 px no category page and no composed page scrolls sideways (the blocks gallery checks each block; this checks the catalog chrome around them)
+  const desk = page.viewportSize();
+  await page.setViewportSize({ width: 390, height: 900 });
+  const sideways = (): Promise<number> => page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+  for (const route of ["/", "/#/pages", ...data.tree.sections.flatMap((s) => s.categories.map((c) => `/#/${c.id}`)), ...data.tree.pages.map((p) => `/#/page-${p.id}`)]) {
+    await page.goto(base + route);
+    await page.waitForSelector("h1");
+    await page.waitForTimeout(50);
+    const over = await sideways();
+    expect(`${route} at 390: the page does not scroll sideways`, over <= 1, over);
+  }
+  if (desk) await page.setViewportSize(desk);
+
+  // 4. the theme button of the bar, and back
+  const theme = (): Promise<string | undefined> => page.evaluate(() => document.documentElement.dataset.theme);
+  await page.getByTestId("theme-toggle").first().click();
+  expect("the theme button sets dark", (await theme()) === "dark");
+  await page.getByTestId("theme-toggle").first().click();
+  expect("and back to light", (await theme()) === "light");
+  return { name: "", steps, failures };
+}
diff --git a/xgen/check/src/e2e/common.ts b/xgen/check/src/e2e/common.ts
new file mode 100644
index 0000000..2d6e10f
--- /dev/null
+++ b/xgen/check/src/e2e/common.ts
@@ -0,0 +1,47 @@
+// What every scenario shares: waiting for a server, serving an app, the DOM structure the pair test compares, a counter of expectations.
+import { spawn, type ChildProcess } from "node:child_process";
+import { join } from "node:path";
+import type { Page } from "playwright-core";
+
+export interface E2eResult { name: string; steps: number; failures: string[] }
+export type Expect = (what: string, ok: boolean, got?: unknown) => void;
+export type Shot = (label: string, full?: boolean) => Promise<void>;
+export type Snap = (label: string) => Promise<void>;
+
+const sleep = (ms: number): Promise<void> => new Promise((r) => setTimeout(r, ms));
+
+export async function waitPort(url: string, ms = 20000): Promise<void> {
+  const end = Date.now() + ms;
+  while (Date.now() < end) {
+    try { if ((await fetch(url)).ok) return; } catch { /* not yet */ }
+    await sleep(150);
+  }
+  throw new Error(`no server at ${url}`);
+}
+
+export function serve(dir: string): ChildProcess {
+  return spawn(join(dir, "..", "..", "node_modules", ".bin", "vite"), ["preview"], { cwd: dir, stdio: "ignore" });
+}
+
+/** the DOM of the page, reduced to what the specs decide: tag, class set, ARIA, data attributes, type, scope, text */
+export async function structure(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const out: string[] = [];
+    const keep = (n: Element): string => {
+      const attrs = [...n.attributes]
+        // data-v-app: the mark Vue puts on the mount point, bookkeeping of the runtime rather than output of a spec
+        .filter((a) => a.name !== "data-v-app")
+        .filter((a) => a.name.startsWith("aria-") || a.name.startsWith("data-") || ["type", "scope", "role", "href", "placeholder", "disabled"].includes(a.name))
+        .map((a) => `${a.name}=${a.value}`).sort();
+      const cls = [...n.classList].sort().join(".");
+      return `${n.tagName.toLowerCase()}${cls ? "." + cls : ""}${attrs.length ? "[" + attrs.join(",") + "]" : ""}`;
+    };
+    const walk = (n: Element, depth: number): void => {
+      const own = [...n.childNodes].filter((c) => c.nodeType === 3).map((c) => (c.textContent ?? "").replace(/\s+/g, " ").trim()).filter(Boolean).join(" ").replace(/\s+/g, " ");
+      out.push(`${"  ".repeat(depth)}${keep(n)}${own ? " " + JSON.stringify(own) : ""}`);
+      for (const c of n.children) walk(c, depth + 1);
+    };
+    walk(document.getElementById("app")!, 0);
+    return out;
+  });
+}
diff --git a/xgen/check/src/e2e/facts.ts b/xgen/check/src/e2e/facts.ts
new file mode 100644
index 0000000..fa4ba33
--- /dev/null
+++ b/xgen/check/src/e2e/facts.ts
@@ -0,0 +1,36 @@
+// The facts of a block (`facts` in its spec): a selector inside the variant, how many elements it must match and how many columns they form,
+// for the variants whose row matches `when`. The numbers can name data: `@collection` (or a block data alias such as `@templateFilters`), `@collection*2`, `@collection-1`, or an axis: `$cols`.
+import type { BlockFact } from "@ui8kit/xgen-screens";
+import type { Expect } from "./common";
+
+type Count = number | string;
+
+/** a number, or the size of a collection, or the number an axis value names */
+export function resolveCount(c: Count, row: Record<string, string>, counts: Record<string, number>): number {
+  if (typeof c === "number") return c;
+  if (c.startsWith("$")) return Number(String(row[c.slice(1)]).replace("1-", ""));
+  const m = c.match(/^@([a-zA-Z]+)(?:([*-])(\d+))?$/);
+  if (!m) throw new Error(`fact count "${c}" is not a number, @collection or $axis`);
+  const size = counts[m[1]!];
+  if (size === undefined) throw new Error(`fact count "${c}": no collection ${m[1]}`);
+  return m[2] === "*" ? size * Number(m[3]) : m[2] === "-" ? size - Number(m[3]) : size;
+}
+
+const holds = (f: BlockFact, row: Record<string, string>): boolean =>
+  Object.entries(f.when ?? {}).every(([axis, want]) => (Array.isArray(want) ? want : [want]).includes(row[axis] ?? ""));
+
+export async function factsChecks(facts: BlockFact[], row: Record<string, string>, where: string, n: (sel: string) => Promise<number>, xsOf: (sel: string) => Promise<number[]>, counts: Record<string, number>, expect: Expect): Promise<void> {
+  for (const f of facts) {
+    if (!holds(f, row)) continue;
+    const count = await n(f.sel);
+    if (f.n !== undefined) {
+      const want = resolveCount(f.n, row, counts);
+      expect(`${where}: ${want} x ${f.sel}`, count === want, count);
+    }
+    if (f.cols !== undefined) {
+      const want = Math.min(resolveCount(f.cols, row, counts), count);
+      const xs = await xsOf(f.sel);
+      expect(`${where}: ${f.sel} in ${want} column(s)`, xs.length === want, xs);
+    }
+  }
+}
diff --git a/xgen/check/src/e2e/generic.ts b/xgen/check/src/e2e/generic.ts
new file mode 100644
index 0000000..be99cc6
--- /dev/null
+++ b/xgen/check/src/e2e/generic.ts
@@ -0,0 +1,47 @@
+// What the first block catalog promises about a variant, one case per block: counts of the parts it must show and the columns of its grid.
+// New blocks do not add cases here: they carry `facts` in their spec and facts.ts checks those.
+import type { Expect } from "./common";
+
+/** what each of the other blocks promises about a variant: counts of the parts it must show and the columns of its grid */
+export async function legacyChecks(key: string, row: Record<string, string>, where: string, n: (sel: string) => Promise<number>, xsOf: (sel: string) => Promise<number[]>, counts: Record<string, number>, done: number, expect: (what: string, ok: boolean, got?: unknown) => void): Promise<void> {
+  const I = '[data-testid="item"]';
+  const items = async (collection: string, sel = I, want = counts[collection]): Promise<void> => expect(`${where}: one item per ${collection} entry`, (await n(sel)) === want, [await n(sel), want]);
+  const columns = async (want: number, sel = I): Promise<void> => expect(`${where}: ${want} column(s)`, (await xsOf(sel)).length === want, await xsOf(sel));
+  const flag = async (what: string, sel: string, on: boolean, count = 1): Promise<void> => expect(`${where}: ${what}`, (await n(sel)) === (on ? count : 0), await n(sel));
+  const min = Math.min;
+  switch (key) {
+    case "logos": await items("logos"); if (row["layout"] === "grid") await columns(min(Number(row["cols"]), counts["logos"]!)); break;
+    case "stats": await items("stats", '[data-testid="items"] > *'); await columns(row["layout"] === "stack" ? 1 : min(Number(row["cols"]), counts["stats"]!), '[data-testid="items"] > *'); await flag("a picture behind the figures only when asked", '[data-testid="backdrop"]', row["surface"] === "image"); break;
+    case "testimonials": expect(`${where}: one quote per entry, one in the single layout`, (await n(I)) === (row["layout"] === "single" ? 1 : counts["testimonials"]), await n(I))
+      await flag("a rating only when asked", '[data-slot="rating"]', row["item.rating"] === "show" && row["item.kind"] !== "social", row["layout"] === "single" ? 1 : counts["testimonials"])
+      await flag("a mark only when asked", '[data-testid="mark"]', row["item.mark"] === "icon" && row["item.kind"] !== "social")
+      await flag("a masonry or a strip holds the quotes", '[data-testid="items"]', true); break;
+    case "steps": await items("steps"); await columns(row["layout"] === "row" ? min(4, counts["steps"]!) : 1); break;
+    case "categories": await items("categories"); await flag("one current category", '[aria-current="page"]', true); await flag("icons only when asked", `${I} svg`, row["icon"] === "show", counts["categories"]); break;
+    case "products": await items("products"); await columns(row["layout"] === "list" ? 1 : row["layout"] === "rail" ? counts["products"]! : min(Number(String(row["cols"]).replace("1-", "")), counts["products"]!)); await flag("add buttons only when asked", '[data-testid="add"]', row["action"] === "button", counts["products"]); break;
+    case "product": await flag("a gallery", '[data-testid="gallery"]', true); await flag("a buy box", '[data-testid="buy-box"]', true); await flag("thumbnails only when asked", '[data-testid="thumbs"]', row["thumbs"] !== "none"); break;
+    case "reviews": await items("reviews"); break;
+    case "cart": await items("cart"); await flag("pictures only when asked", `${I} [data-slot="media-frame"]`, row["media"] !== "none", counts["cart"]); break;
+    case "summary": await flag("the summary", '[data-testid="summary"]', true); await flag("a checkout button only when asked", '[data-testid="checkout"]', row["cta"] !== "hide"); break;
+    case "orders": await items("orders"); break;
+    case "announcement": await flag("the strip", '[data-testid="announcement"]', true); await flag("a close button only when asked", '[data-testid="dismiss"]', row["dismiss"] === "show"); await flag("a tag only when asked", '[data-testid="announcement-badge"]', row["badge"] === "show"); expect(`${where}: the strip stays at the bottom only when asked`, (await n('[data-testid="announcement"][class*="sticky"]')) === (row["position"] === "bottom" ? 1 : 0)); await flag("the link", '[data-testid="announcement-cta"]', true); break;
+    case "cookie": await flag("accept", '[data-testid="cookie-accept"]', true); await flag("decline", '[data-testid="cookie-decline"]', true); await flag("settings only when asked", '[data-testid="cookie-settings"]', row["actions"] === "three"); break;
+    case "newsletter": await flag("an email field", '[data-testid="field"]', true); await flag("a button", '[data-testid="submit"]', true); await flag("a consent line only when asked", '[data-testid="consent"]', row["terms"] === "show"); await flag("a picture only in the split layout", '[data-slot="media-frame"]', row["layout"] === "split"); break;
+    case "posts": await items("posts", I, row["filter.mode"] === "topics" ? counts["posts:Design"] : counts["posts"]); await flag("topic tabs only when asked", '[data-slot="switcher"]', row["filter.mode"] === "topics"); const shown = row["filter.mode"] === "topics" ? counts["posts:Design"]! : counts["posts"]!; await flag("pictures only when asked", `${I} [data-slot="media-frame"]`, row["media"] === "image", shown); if (row["layout"] === "grid") await columns(min(Number(String(row["cols"]).replace("1-", "")), shown)); if (row["layout"] === "list") await columns(1); break;
+    case "postheader": await flag("the author line", '[data-testid="post-meta"]', true); await flag("a cover only when asked", '[data-slot="media-frame"]', true, row["cover"] === "show" ? 2 : 1); break;
+    case "auth": expect(`${where}: the card carries its mode`, (await n(`[data-testid="auth-card"][data-mode="${row["mode"]}"]`)) === 1)
+      await flag("the fields of the mode", '[data-testid="field"]', true, row["mode"] === "signup" ? 3 : row["mode"] === "signin" ? 2 : 1)
+      expect(`${where}: other sign-in buttons come ${row["social"] === "first" ? "before" : "after"} the form`, row["social"] === "none" || row["mode"] === "reset" || row["mode"] === "magic" || ((await n('[data-testid="social"] ~ [data-testid="auth-form"]')) === (row["social"] === "first" ? 1 : 0)))
+      await flag("other sign-in buttons only when asked", '[data-testid="social"]', row["social"] !== "none" && row["mode"] !== "reset" && row["mode"] !== "magic"); break;
+    case "profile": await flag("the form", '[data-testid="profile-form"]', true); await flag("the picture only when asked", '[data-testid="avatar"]', row["avatar"] === "show"); await flag("the notifications only when asked", '[data-testid="prefs"]', row["prefs"] === "show"); break;
+    case "metrics": await items("metrics"); await columns(row["cols"] === "2" ? 2 : 4); break;
+    case "chart": if (row["chart"] === "bars") await flag("one bar chart", '[data-slot="bar-chart"]', true); else await flag("a meter per point", '[data-slot="meter-row"]', true, counts["series"]); break;
+    case "activity": if (row["layout"] === "timeline") await flag("a timeline", '[data-slot="timeline"]', true); else await items("activity"); break;
+    case "empty": await flag("the empty state", '[data-testid="empty"]', true); await flag("an action only when asked", '[data-testid="empty-action"]', row["actions"] !== "none"); await flag("a picture only when asked", '[data-slot="media-frame"]', row["visual"] === "image"); break;
+    case "checklist": await items("checklist"); await flag("the done tasks", '[data-done="true"]', true, done); await flag("a progress bar only when asked", "progress", row["progress"] === "bar"); await flag("a count only when asked", '[data-testid="progress-text"]', row["progress"] === "text"); await flag("openers only when asked", '[data-testid="task-detail"]', row["detail"] === "expand", counts["checklist"]); break;
+    case "stepper": await items("steps"); await flag("one current step", '[aria-current="step"]', true); await flag("the step text only when asked", '[data-testid="step-summary"]', row["summary"] === "show"); break;
+    case "contact": await flag("the form", '[data-testid="contact-form"]', true); await flag("the fields of the form", '[data-testid="field"]', true, row["fields"] === "full" ? 4 : 2); await flag("the ways to reach us only in the split layout", '[data-testid="detail"]', row["layout"] === "split", counts["channels"]); break;
+    case "channels": await items("channels"); await flag("links only when asked", '[data-testid="open"]', row["action"] === "link", counts["channels"]); break;
+    default: expect(`${where}: the e2e knows this block`, false, key);
+  }
+}
diff --git a/xgen/check/src/e2e/html.ts b/xgen/check/src/e2e/html.ts
new file mode 100644
index 0000000..b6d81e0
--- /dev/null
+++ b/xgen/check/src/e2e/html.ts
@@ -0,0 +1,33 @@
+// HTML5 validity of the rendered DOM: every state the scenarios read (the same states as the pair test, in every runtime) is validated with
+// html-validate and the rules in rules/html-validate.json (landmarks, one main, heading order, permitted content, ARIA, forms). Target: 0.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import type { Page } from "playwright-core";
+import { HtmlValidate, type ConfigData } from "html-validate";
+
+export type HtmlStates = Map<string, string[]>;
+
+/** the whole document of the page as it is now */
+export async function documentHtml(page: Page): Promise<string> {
+  return "<!DOCTYPE html>\n" + (await page.evaluate(() => document.documentElement.outerHTML));
+}
+
+/** validate the collected states; identical documents are validated once. Each message: `rule: message (state, selector)` */
+export async function validateStates(workspace: string, states: HtmlStates): Promise<{ documents: number; problems: string[]; warnings: Record<string, number> }> {
+  const config = JSON.parse(readFileSync(join(workspace, "rules/html-validate.json"), "utf8")) as ConfigData & { $comment?: string };
+  delete config.$comment;
+  const hv = new HtmlValidate(config);
+  const problems: string[] = [];
+  const seen = new Set<string>();
+  const warnings: Record<string, number> = {};
+  for (const [html, names] of states) {
+    const report = await hv.validateString(html, names[0]!);
+    for (const r of report.results) for (const m of r.messages) {
+      if (m.severity < 2) { warnings[m.ruleId] = (warnings[m.ruleId] ?? 0) + names.length; continue; }
+      const line = `${m.ruleId}: ${m.message} (${names[0]}${names.length > 1 ? ` +${names.length - 1}` : ""}, ${m.selector ?? `line ${m.line}`})`;
+      const key = `${m.ruleId}|${m.message}|${m.selector}`;
+      if (!seen.has(key)) { seen.add(key); problems.push(line); }
+    }
+  }
+  return { documents: states.size, problems, warnings };
+}
diff --git a/xgen/check/src/e2e/index.ts b/xgen/check/src/e2e/index.ts
new file mode 100644
index 0000000..1315ca9
--- /dev/null
+++ b/xgen/check/src/e2e/index.ts
@@ -0,0 +1,109 @@
+// One scenario per screen, one host per runtime: the same steps run against the Svelte, the React and the Vue host at /<screen>/, built from the
+// same screen spec and fixtures. Then the DOM of every host is read in the same states and compared with the first (tags, classes, ARIA, data, text).
+import { mkdirSync } from "node:fs";
+import { join } from "node:path";
+import { chromium } from "playwright-core";
+import { hostedScreens, planBuild } from "@ui8kit/xgen-generator";
+import { screenKey } from "@ui8kit/xgen-runtime-core";
+import { serve, structure, waitPort, type E2eResult } from "./common";
+import { scenario } from "./plans";
+import { siteScenario, type SiteData } from "./site";
+import { blocksScenario, type BlocksData } from "./blocks";
+import { catalogScenario } from "./catalog";
+import { skinsScenario } from "./skins";
+import type { CatalogTree, SkinsBoard } from "@ui8kit/xgen-screens";
+import { THEME_SCREEN, themeScenario } from "./theme";
+import type { ChildProcess } from "node:child_process";
+import { documentHtml, validateStates, type HtmlStates } from "./html";
+
+export type { E2eResult } from "./common";
+
+type ScenarioKind = "site" | "blocks" | "catalog" | "skins" | "theme" | "plans";
+/** which scenario runs on a screen */
+const scenarioKind = (screen: string): ScenarioKind => (screen === "screen.site" ? "site" : screen === "screen.blocks" ? "blocks" : screen === "screen.catalog" ? "catalog" : screen === "screen.skins" ? "skins" : THEME_SCREEN.test(screen) ? "theme" : "plans");
+/** the width of the window per scenario, in px: the gallery is wider because its responsive grids reach their widest column count from 1280 px */
+const VIEWPORT: Record<ScenarioKind, number> = { site: 1100, blocks: 1400, catalog: 1400, skins: 1400, theme: 1100, plans: 1100 };
+const VIEWPORT_HEIGHT = 900;
+export interface E2eReport { results: E2eResult[]; pair: { states: number; differences: string[] }; html: { states: number; documents: number; problems: string[]; warnings: Record<string, number> }; shots: string[] }
+
+export async function runE2e(workspace: string, shotsDir = join(workspace, "shots")): Promise<E2eReport> {
+  const plan = planBuild(workspace);
+  mkdirSync(shotsDir, { recursive: true });
+  const procs: ChildProcess[] = [];
+  const browser = await chromium.launch({ executablePath: process.env.CHROME ?? "/usr/bin/google-chrome", args: ["--no-sandbox"] });
+  const results: E2eResult[] = [];
+  const shots: string[] = [];
+  const snaps: Record<string, Record<string, string[]>> = {};
+  const screenOf: Record<string, string> = {};
+  const html: HtmlStates = new Map();
+  let htmlStates = 0;
+  const coll = (name: string): any[] => (plan.inputs.collections.find((c) => c.value.collection === name)?.value.entries ?? []) as any[];
+  const siteData: SiteData = {
+    dict: plan.inputs.dictionary.value,
+    features: coll("features").length,
+    faq: coll("faq").length,
+    tiers: coll("tiers").map((e) => ({ price: e.metadata.price.value as number, currency: e.metadata.currency.value as string, highlighted: e.metadata.highlighted.value as boolean })),
+  };
+  // the Design topic of the posts: the term category-design of the taxonomy category
+  const inDesign = (e: any): boolean => (e.terms ?? []).some((t: { taxonomy: string; term_id: string }) => t.taxonomy === "category" && t.term_id === "category-design");
+  // the billing topic of the questions: the term faq-category-billing of the taxonomy faq_category
+  const inBilling = (e: any): boolean => (e.terms ?? []).some((t: { taxonomy: string; term_id: string }) => t.taxonomy === "faq_category" && t.term_id === "faq-category-billing");
+  const blocksData: BlocksData = { dict: siteData.dict, blocks: plan.inputs.blocks.map((b) => b.value), features: siteData.features, faq: siteData.faq, tiers: siteData.tiers, counts: { ...Object.fromEntries(plan.inputs.collections.map((c) => [c.value.collection, (c.value.entries ?? []).length])), "faq:billing": coll("faq").filter(inBilling).length, "posts:Design": coll("posts").filter(inDesign).length }, done: coll("checklist").filter((e) => e.metadata.done.value).length };
+  const tree = plan.inputs.screens.find((s) => s.composed?.catalog)?.composed?.catalog as CatalogTree | undefined;
+  const board = plan.inputs.screens.find((s) => s.composed?.skins)?.composed?.skins as SkinsBoard | undefined;
+  try {
+    // XGEN_E2E_ONLY=site,plans (screen keys) or host-svelte (a host) narrows the run
+    const only = process.env["XGEN_E2E_ONLY"]?.split(",").filter(Boolean);
+    const all = plan.inputs.screens.map((s) => s.value);
+    for (const { app, dir } of plan.apps) {
+      const screens = hostedScreens(app, all).screens.filter((s) => !only || only.some((o) => o === app.name || screenKey(s.id).startsWith(o)));
+      if (!screens.length) continue;
+      procs.push(serve(dir));
+      const origin = `http://127.0.0.1:${app.port}`;
+      await waitPort(origin);
+      for (const s of screens) {
+        const key = screenKey(s.id);
+        const name = `${key}-${app.runtime}`;
+        const base = `${origin}/${key}`;
+        const kind = scenarioKind(s.id);
+        const ctx = await browser.newContext({ viewport: { width: VIEWPORT[kind], height: VIEWPORT_HEIGHT } });
+        const page = await ctx.newPage();
+        const errors: string[] = [];
+        page.on("pageerror", (e) => errors.push(e.message));
+        page.on("console", (m) => { if (m.type() === "error") errors.push(m.text()); });
+        snaps[name] = {};
+        screenOf[name] = s.id;
+        const shot = async (label: string, full = false): Promise<void> => { const f = join(shotsDir, `${name}-${label}.png`); await page.screenshot({ path: f, fullPage: full }); shots.push(f); };
+        const snap = async (label: string): Promise<void> => { snaps[name]![label] = await structure(page); const doc = await documentHtml(page); htmlStates++; html.set(doc, [...(html.get(doc) ?? []), `${name} ${label}`]); };
+        const r = kind === "site" ? await siteScenario(page, base, siteData, shot, snap)
+          : kind === "blocks" ? await blocksScenario(page, base, blocksData, shot, snap)
+          : kind === "catalog" ? await catalogScenario(page, base, { dict: siteData.dict, blocks: blocksData.blocks, tree: tree! }, shot, snap)
+          : kind === "skins" ? await skinsScenario(page, base, { dict: siteData.dict, board: board! }, shot, snap)
+          : kind === "theme" ? await themeScenario(page, base, s.id, shot, snap)
+          : await scenario(page, base, shot, snap);
+        r.name = name;
+        for (const e of errors) r.failures.push(`browser console: ${e}`);
+        results.push(r);
+        await ctx.close();
+      }
+    }
+  } finally {
+    await browser.close();
+    for (const p of procs) p.kill();
+  }
+  // the pair test: the DOM of every runtime of one screen, in the same states, matches the DOM of the first runtime within the spec
+  const differences: string[] = [];
+  let states = 0;
+  for (const id of new Set(Object.values(screenOf))) {
+    const [a = "", ...others] = Object.keys(snaps).filter((n) => screenOf[n] === id);
+    for (const b of others) for (const label of Object.keys(snaps[a]!)) {
+      states++;
+      const x = snaps[a]![label]!, y = snaps[b]![label] ?? [];
+      const n = Math.max(x.length, y.length);
+      let shown = 0;
+      for (let i = 0; i < n && shown < 6; i++) if (x[i] !== y[i]) { differences.push(`${id} ${label} line ${i + 1}:\n    ${a}: ${x[i] ?? "(none)"}\n    ${b}: ${y[i] ?? "(none)"}`); shown++; }
+    }
+  }
+  const checked = await validateStates(workspace, html);
+  return { results, pair: { states, differences }, html: { states: htmlStates, ...checked }, shots };
+}
diff --git a/xgen/check/src/e2e/page-checks.ts b/xgen/check/src/e2e/page-checks.ts
new file mode 100644
index 0000000..cc7846d
--- /dev/null
+++ b/xgen/check/src/e2e/page-checks.ts
@@ -0,0 +1,42 @@
+// Checks every page of every app must pass: landmarks, headings, ids, no gradients, pictures embedded and themed.
+import type { Page } from "playwright-core";
+import type { Expect } from "./common";
+
+/** the page-level rules; `where` names the page in the messages */
+export async function pageChecks(page: Page, expect: Expect, where: string): Promise<void> {
+  expect(`${where}: one h1`, (await page.locator("h1").count()) === 1, await page.locator("h1").count());
+  expect(`${where}: one main, with id main-content`, (await page.locator("main#main-content").count()) === 1);
+  const levels = await page.$$eval("h1,h2,h3,h4,h5,h6", (els) => els.map((e) => Number(e.tagName[1])));
+  expect(`${where}: heading levels never skip down`, levels.every((l, i) => i === 0 ? l === 1 : l <= levels[i - 1]! + 1), levels);
+  const ids = await page.$$eval("[id]", (els) => els.map((e) => e.id));
+  expect(`${where}: ids are unique`, new Set(ids).size === ids.length, ids);
+  const grad = await page.evaluate(() => [...document.querySelectorAll("*")].filter((e) => getComputedStyle(e).backgroundImage.includes("gradient")).length);
+  expect(`${where}: no gradients`, grad === 0, grad);
+  const outside = await page.$$eval("img", (els) => els.filter((e) => !(e.getAttribute("src") ?? "").startsWith("data:image/")).length);
+  expect(`${where}: every picture is an embedded data URI, none from outside`, outside === 0, outside);
+  const both = await page.$$eval('[data-slot="media-frame"]', (els) => els.filter((e) => e.querySelectorAll('img[data-theme-src="light"]').length !== 1 || e.querySelectorAll('img[data-theme-src="dark"]').length !== 1).length);
+  expect(`${where}: every picture has a light and a dark image`, both === 0, both);
+  const theme = await page.evaluate(() => document.documentElement.dataset.theme ?? "light");
+  const shown = await page.$$eval('[data-slot="media-frame"]', (els) => els.map((e) => ["light", "dark"].filter((t) => getComputedStyle(e.querySelector(`img[data-theme-src="${t}"]`)!).display !== "none").join("+")));
+  expect(`${where}: the ${theme} theme shows only the ${theme} image`, shown.every((x) => x === theme), shown);
+  const unnamed = await page.$$eval("section", (els) => els.filter((e) => {
+    const by = e.getAttribute("aria-labelledby");
+    return !(e.getAttribute("aria-label") || (by && document.getElementById(by)?.textContent?.trim()));
+  }).length);
+  expect(`${where}: every section is named by a heading or a label`, unnamed === 0, unnamed);
+  // layout guards: no sideways scroll, one page container centered at one width, an indicator on every disclosure
+  const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+  expect(`${where}: the page does not scroll sideways`, overflow <= 1, overflow);
+  const containers = await page.$$eval('[data-slot="container"]', (els) => els.filter((e) => (e as HTMLElement).offsetWidth > 0).flatMap((e) => {
+    const p = e.parentElement!.getBoundingClientRect(), r = e.getBoundingClientRect(), cls = e.getAttribute("class") ?? "";
+    // the page width, or a narrow centered column (an auth card, a plan card: max-w-xs to max-w-md); never in between
+    const width = !/\bmax-w-(lg|xl|2xl|3xl|4xl|5xl)\b/.test(cls);
+    const centered = Math.abs((r.left - p.left) - (p.right - r.right)) <= 2;
+    return width && centered ? [] : [`${cls.match(/max-w-\S+/)?.[0] ?? "no max-w"} ${Math.round(r.left - p.left)}/${Math.round(p.right - r.right)}`];
+  }));
+  expect(`${where}: every page container is the shared one (max-w-6xl; a narrow card column up to max-w-md) and centered`, containers.length === 0, containers);
+  const bare = await page.$$eval("details > summary", (els) => els.filter((e) => !e.querySelector('[data-slot="summary-indicator"]')).length);
+  expect(`${where}: every disclosure shows its open/close indicator`, bare === 0, bare);
+  const unlabelled = await page.$$eval("nav, aside", (els) => els.filter((e) => !(e.getAttribute("aria-label") || e.getAttribute("aria-labelledby"))).length);
+  expect(`${where}: every navigation and aside has a label`, unlabelled === 0, unlabelled);
+}
diff --git a/xgen/check/src/e2e/plans.ts b/xgen/check/src/e2e/plans.ts
new file mode 100644
index 0000000..98de639
--- /dev/null
+++ b/xgen/check/src/e2e/plans.ts
@@ -0,0 +1,105 @@
+// The plans app: sort, open a record, URL state, the same steps in both runtimes.
+import type { Page } from "playwright-core";
+import type { E2eResult } from "./common";
+
+const rowNames = (page: Page): Promise<string[]> => page.$$eval('[data-testid="plan-row"] [data-testid="open-record"]', (els) => els.map((e) => (e.textContent ?? "").trim()));
+
+export async function scenario(page: Page, base: string, shot: (label: string) => Promise<void>, snap: (label: string) => Promise<void>): Promise<E2eResult> {
+  const failures: string[] = [];
+  let steps = 0;
+  const expect = (what: string, ok: boolean, got?: unknown): void => { steps++; if (!ok) failures.push(`${what}${got !== undefined ? ` (got ${JSON.stringify(got)})` : ""}`); };
+  const hash = (): Promise<string> => page.evaluate(() => location.hash);
+  const text = (id: string): Promise<string> => page.locator(`[data-testid="${id}"]`).first().innerText();
+
+  await page.goto(base + "/");
+  await page.waitForSelector('[data-testid="plans-table"]');
+  // 1. the list: default sort price ascending, first page
+  let names = await rowNames(page);
+  expect("first page has 5 rows", names.length === 5, names);
+  expect("default sort price ascending starts with Free", names[0] === "Free", names);
+  expect("count says 12 plans", (await text("count")) === "12 plans", await text("count"));
+  expect("price header is aria-sort ascending", (await page.locator('th[aria-sort="ascending"]').count()) === 1);
+  await snap("list");
+  await shot("list-light");
+  // 2. sort: click Price -> descending, the URL carries it
+  await page.getByRole("button", { name: "Price" }).click();
+  names = await rowNames(page);
+  expect("price descending starts with Enterprise", names[0] === "Enterprise", names);
+  expect("URL has sort=price:desc", (await hash()).includes("sort=price:desc"), await hash());
+  expect("price header is aria-sort descending", (await page.locator('th[aria-sort="descending"]').innerText()).includes("Price"));
+  // 3. sort by name
+  await page.getByRole("button", { name: "Plan", exact: true }).click();
+  names = await rowNames(page);
+  expect("name ascending starts with Basic", names[0] === "Basic", names);
+  expect("URL has sort=name:asc", (await hash()).includes("sort=name:asc"), await hash());
+  // 4. search
+  await page.getByRole("searchbox", { name: "Search plans" }).fill("legacy");
+  await page.waitForFunction(() => document.querySelector('[data-testid="count"]')?.textContent === "2 plans");
+  names = await rowNames(page);
+  expect("search legacy finds the two legacy plans", names.length === 2 && names.includes("Legacy Starter") && names.includes("Legacy Team"), names);
+  expect("URL has q=legacy", (await hash()).includes("q=legacy"), await hash());
+  await page.getByRole("searchbox", { name: "Search plans" }).fill("zzz");
+  await page.waitForSelector('[data-testid="empty"]');
+  await snap("empty");
+  expect("empty search shows the empty text", (await text("empty")).length > 0);
+  await page.getByRole("searchbox", { name: "Search plans" }).fill("");
+  await page.waitForFunction(() => document.querySelector('[data-testid="count"]')?.textContent === "12 plans");
+  // 5. pager and reload keeps the state
+  const page1 = await rowNames(page);
+  await page.getByTestId("next").click();
+  expect("URL has page=2", (await hash()).includes("page=2"), await hash());
+  expect("page 2 shows 5 other rows", (await rowNames(page)).length === 5 && !(await rowNames(page)).some((n) => page1.includes(n)), await rowNames(page));
+  const page2 = await rowNames(page);
+  await snap("page-2");
+  await page.reload();
+  await page.waitForSelector('[data-testid="plans-table"]');
+  expect("reload keeps sort and page", JSON.stringify(await rowNames(page)) === JSON.stringify(page2), await rowNames(page));
+  await page.getByTestId("next").click();
+  expect("last page has 2 rows", (await rowNames(page)).length === 2, await rowNames(page));
+  expect("next is disabled on the last page", await page.getByTestId("next").isDisabled());
+  await page.getByTestId("prev").click();
+  await page.waitForFunction(() => document.querySelectorAll('[data-testid="plan-row"]').length === 5);
+  // 6. open a record, the card, back keeps the list state
+  const before = await hash();
+  const first = (await rowNames(page))[0]!;
+  await page.getByTestId("open-record").first().click();
+  await page.waitForSelector('[data-testid="record-id"]');
+  expect("URL is the record route", /^#\/plans\/plan-/.test(await hash()), await hash());
+  expect("record route keeps the list query", (await hash()).includes("sort=name:asc"), await hash());
+  expect("the card shows the plan name", (await page.getByRole("heading", { name: first, level: 3 }).count()) === 1);
+  expect("the footer slot gets the plan", (await text("record-id")).startsWith("Plan id: plan-"));
+  await snap("record");
+  await shot("record-light");
+  await page.getByTestId("back").click();
+  await page.waitForSelector('[data-testid="plans-table"]');
+  expect("back returns to the list state", (await hash()) === before, [before, await hash()]);
+  // 7. history: browser back goes to the record, forward to the list
+  await page.goBack();
+  await page.waitForSelector('[data-testid="record-id"]');
+  expect("history back shows the record", /^#\/plans\/plan-/.test(await hash()));
+  await page.goForward();
+  await page.waitForSelector('[data-testid="plans-table"]');
+  // 8. an unknown record
+  await page.goto(base + "/#/plans/nope");
+  await page.waitForSelector('[data-testid="missing"]');
+  expect("unknown record says so", (await text("missing")).length > 0);
+  await snap("missing");
+  // 9. a direct link to a record
+  await page.goto(base + "/#/plans/plan-team");
+  await page.waitForSelector('[data-testid="record-id"]');
+  expect("direct link opens the Team card", (await page.getByRole("heading", { name: "Team", level: 3 }).count()) === 1);
+  expect("the highlighted plan shows its badge", (await page.getByText("Popular").count()) === 1);
+  await snap("record-highlighted");
+  // 10. theme
+  await page.getByTestId("theme-toggle").click();
+  expect("theme toggle sets data-theme=dark", (await page.evaluate(() => document.documentElement.dataset.theme)) === "dark");
+  await shot("record-dark");
+  await page.goto(base + "/#/");
+  await page.waitForSelector('[data-testid="plans-table"]');
+  expect("theme survives navigation", (await page.evaluate(() => document.documentElement.dataset.theme)) === "dark");
+  await shot("list-dark");
+  await page.getByTestId("theme-toggle").click();
+  expect("theme toggles back to light", (await page.evaluate(() => document.documentElement.dataset.theme)) === "light");
+  return { name: "", steps, failures };
+}
+
diff --git a/xgen/check/src/e2e/site.ts b/xgen/check/src/e2e/site.ts
new file mode 100644
index 0000000..239c5e5
--- /dev/null
+++ b/xgen/check/src/e2e/site.ts
@@ -0,0 +1,105 @@
+// The marketing site: header, routes, pricing, theme toggle.
+import type { Page } from "playwright-core";
+import type { E2eResult } from "./common";
+import { fmtMoney } from "../../../runtimes/core/assets/ts/format";
+
+/** the landing: two routes, landmarks, skip link, current link, fixtures on the page, FAQ disclosures, theme, no gradients; each check is one canary-style e2e step */
+export interface SiteData { dict: any; features: number; faq: number; tiers: Array<{ price: number; currency: string; highlighted: boolean }> }
+
+export async function siteScenario(page: Page, base: string, data: SiteData, shot: (label: string) => Promise<void>, snap: (label: string) => Promise<void>): Promise<E2eResult> {
+  const failures: string[] = [];
+  let steps = 0;
+  const expect = (what: string, ok: boolean, got?: unknown): void => { steps++; if (!ok) failures.push(`${what}${got !== undefined ? ` (got ${JSON.stringify(got)})` : ""}`); };
+  const t = data.dict.site;
+  const hash = (): Promise<string> => page.evaluate(() => location.hash);
+  const count = (sel: string): Promise<number> => page.locator(sel).count();
+  const h1 = (): Promise<string> => page.locator("h1").first().innerText();
+  const current = (): Promise<string[]> => page.$$eval('[data-testid="nav-link"][aria-current]', (els) => els.map((e) => `${(e.textContent ?? "").trim()}=${e.getAttribute("aria-current")}`));
+  const landmarks = async (where: string): Promise<void> => {
+    expect(`${where}: one h1`, (await count("h1")) === 1, await count("h1"));
+    expect(`${where}: one main, with id main-content`, (await count("main")) === 1 && (await count("main#main-content")) === 1);
+    expect(`${where}: one header and one footer`, (await count("header")) === 1 && (await count("footer")) === 1);
+    expect(`${where}: two named navigations`, (await count("nav[aria-label]")) === 2, await count("nav[aria-label]"));
+    const levels = await page.$$eval("h1,h2,h3,h4,h5,h6", (els) => els.map((e) => Number(e.tagName[1])));
+    expect(`${where}: heading levels never skip down`, levels.every((l, i) => i === 0 ? l === 1 : l <= levels[i - 1]! + 1), levels);
+    const ids = await page.$$eval("[id]", (els) => els.map((e) => e.id));
+    expect(`${where}: ids are unique`, new Set(ids).size === ids.length, ids);
+    const bad = await page.$$eval("main section[aria-labelledby]", (els) => els.filter((e) => !document.getElementById(e.getAttribute("aria-labelledby")!)).length);
+    expect(`${where}: every section is named by its heading`, bad === 0);
+    const grad = await page.evaluate(() => [...document.querySelectorAll("*")].filter((e) => getComputedStyle(e).backgroundImage.includes("gradient")).length);
+    expect(`${where}: no gradients`, grad === 0, grad);
+  };
+
+  // 1. home
+  await page.goto(base + "/");
+  await page.waitForSelector('[data-testid="feature-grid"]');
+  expect("home h1", (await h1()) === t.home.title, await h1());
+  await landmarks("home");
+  expect("home: three sections", (await count("main section[aria-labelledby]")) === 3, await count("main section[aria-labelledby]"));
+  expect("two nav links, only Home is current", (await count('[data-testid="nav-link"]')) === 2 && JSON.stringify(await current()) === JSON.stringify([`${t.header.home}=page`]), await current());
+  expect("one card per feature of the fixture", (await count('[data-testid="feature-card"]')) === data.features, await count('[data-testid="feature-card"]'));
+  expect("every feature card has an icon", (await count('[data-testid="feature-card"] svg')) === data.features);
+  expect("footer shows the copyright", (await page.getByTestId("copyright").innerText()) === t.footer.copyright);
+  await snap("home");
+  await shot("home-light");
+  // 2. keyboard: the first Tab lands on the skip link, Enter moves focus to main and keeps the route
+  await page.reload();
+  await page.waitForSelector('[data-testid="feature-grid"]');
+  await page.keyboard.press("Tab");
+  expect("first Tab lands on the skip link", await page.evaluate(() => document.activeElement?.getAttribute("data-testid") === "skip-link"));
+  await page.keyboard.press("Enter");
+  expect("skip link moves focus to main", await page.evaluate(() => document.activeElement?.id === "main-content"));
+  expect("skip link keeps the route", (await h1()) === t.home.title);
+  // 3. home -> pricing by the call to action
+  await page.getByTestId("action-primary").first().click();
+  await page.waitForSelector('[data-testid="tiers"]');
+  expect("URL is #/pricing", (await hash()) === "#/pricing", await hash());
+  expect("pricing h1", (await h1()) === t.pricing.title, await h1());
+  await landmarks("pricing");
+  expect("only Pricing is current", JSON.stringify(await current()) === JSON.stringify([`${t.header.pricing}=page`]), await current());
+  expect("one plan card per tier", (await count('[data-testid="tiers"] [data-highlighted]')) === data.tiers.length, await count('[data-testid="tiers"] [data-highlighted]'));
+  const prices = await page.$$eval('[data-testid="tiers"] [data-highlighted] h2', (els) => els.map((e) => (e.textContent ?? "").trim()));
+  // the expected display from the fixture through the formatter the blocks use: integer minor units + currency -> fmtMoney
+  const shown = data.tiers.map((tier) => (tier.price === 0 ? data.dict.pricing.free : fmtMoney(tier.price, tier.currency)));
+  expect("prices come from the fixture", JSON.stringify(prices) === JSON.stringify(shown), { prices, shown });
+  const want = data.tiers.filter((x) => x.highlighted).length;
+  expect("the highlighted tier is marked and has the badge", (await count('[data-testid="tiers"] [data-highlighted="true"]')) === want && (await page.getByText("Popular", { exact: true }).count()) === want);
+  // 4. FAQ: native disclosures
+  expect("one disclosure per question", (await count('[data-testid="faq-item"]')) === data.faq, await count('[data-testid="faq-item"]'));
+  const first = page.locator('[data-testid="faq-item"]').first();
+  expect("disclosures start closed", (await first.getAttribute("open")) === null);
+  await first.locator("summary").click();
+  expect("click opens a disclosure", (await first.getAttribute("open")) !== null);
+  await first.locator("summary").click();
+  expect("click closes it again", (await first.getAttribute("open")) === null);
+  await snap("pricing");
+  await shot("pricing-light");
+  // 5. pricing -> home by the navigation, history
+  await page.getByTestId("brand").click();
+  await page.waitForSelector('[data-testid="feature-grid"]');
+  expect("brand link goes home", (await hash()) === "#/" && (await h1()) === t.home.title, await hash());
+  await page.goBack();
+  await page.waitForSelector('[data-testid="tiers"]');
+  expect("history back returns to pricing", (await hash()) === "#/pricing");
+  await page.reload();
+  await page.waitForSelector('[data-testid="tiers"]');
+  expect("reload keeps the route", (await h1()) === t.pricing.title);
+  // 6. theme, kept across routes
+  await page.getByTestId("theme-toggle").click();
+  expect("theme toggle sets dark", (await page.evaluate(() => document.documentElement.dataset.theme)) === "dark");
+  await shot("pricing-dark");
+  await page.getByTestId("nav-link").first().click();
+  await page.waitForSelector('[data-testid="feature-grid"]');
+  expect("dark theme survives navigation", (await page.evaluate(() => document.documentElement.dataset.theme)) === "dark");
+  await shot("home-dark");
+  await page.getByTestId("theme-toggle").click();
+  expect("theme toggles back to light", (await page.evaluate(() => document.documentElement.dataset.theme)) === "light");
+  // 7. an unknown address
+  await page.goto(base + "/#/nope");
+  await page.waitForFunction((title) => document.querySelector("h1")?.textContent === title, t.notFound.title);
+  expect("unknown address shows the not-found page", (await h1()) === t.notFound.title, await h1());
+  expect("not-found: the way back is a link home", (await page.getByTestId("action-primary").getAttribute("href")) === "#/");
+  expect("not-found: one h1, one main, no current link", (await count("h1")) === 1 && (await count("main")) === 1 && (await current()).length === 0);
+  await snap("notfound");
+  return { name: "", steps, failures };
+}
diff --git a/xgen/check/src/e2e/skins.ts b/xgen/check/src/e2e/skins.ts
new file mode 100644
index 0000000..14b84b2
--- /dev/null
+++ b/xgen/check/src/e2e/skins.ts
@@ -0,0 +1,113 @@
+// The Skins screen: three rows of tiles (skins, fonts, radii) in the order of the board, each skin tile drawn in its own skin;
+// a skin tile puts data-skin on <html>, a font tile changes the computed --font-sans, a radius tile the computed --radius;
+// the choice survives a reload and reaches the other screens; `?skin=` still wins; a second click and the reset buttons undo it;
+// no sideways scroll at 390; the page rules and the theme button.
+import type { Page } from "playwright-core";
+import type { SkinsBoard } from "@ui8kit/xgen-screens";
+import type { E2eResult, Shot, Snap } from "./common";
+import { pageChecks } from "./page-checks";
+
+export interface SkinsData { dict: any; board: SkinsBoard }
+
+export async function skinsScenario(page: Page, base: string, data: SkinsData, shot: Shot, snap: Snap): Promise<E2eResult> {
+  const failures: string[] = [];
+  let steps = 0;
+  const expect = (what: string, ok: boolean, got?: unknown): void => { steps++; if (!ok) failures.push(`${what}${got !== undefined ? ` (got ${JSON.stringify(got)})` : ""}`); };
+  const d = data.dict.skins;
+  const { skins, fonts, radii } = data.board;
+  const skin = (): Promise<string | undefined> => page.evaluate(() => document.documentElement.dataset.skin);
+  const rootVar = (name: string): Promise<string> => page.evaluate((n) => getComputedStyle(document.documentElement).getPropertyValue(n).trim(), name);
+  const pressed = (sel: string, attr: string): Promise<string[]> => page.$$eval(sel, (els, a) => els.filter((e) => e.getAttribute("aria-pressed") === "true").map((e) => e.getAttribute(a) ?? ""), attr);
+  const ready = async (): Promise<void> => { await page.waitForSelector('[data-testid="radius-list"]'); await page.waitForTimeout(50); };
+
+  // 1. the board: three rows, every tile in the order of the spec; nothing stored, so the build skin (default) is on and pressed
+  await page.goto(base + "/");
+  await ready();
+  expect("h1 is the skins title", (await page.locator("h1").first().innerText()) === d.title);
+  await pageChecks(page, expect, "skins");
+  const rows = await page.$$eval('[data-testid="skins-row"]', (els) => els.map((e) => e.getAttribute("data-row")));
+  expect("three rows: skins, fonts, radius", JSON.stringify(rows) === JSON.stringify(["skins", "fonts", "radius"]), rows);
+  const ids = (sel: string, attr: string): Promise<string[]> => page.$$eval(sel, (els, a) => els.map((e) => e.getAttribute(a) ?? ""), attr);
+  expect("15 skin tiles in order, default first", skins.length === 15 && JSON.stringify(await ids('[data-testid="skin-tile"]', "data-skin-pick")) === JSON.stringify(skins), await ids('[data-testid="skin-tile"]', "data-skin-pick"));
+  expect("10 font tiles in order", fonts.length === 10 && JSON.stringify(await ids('[data-testid="font-tile"]', "data-font-family")) === JSON.stringify(fonts.map((f) => f.family)));
+  expect("5 radius tiles in order", radii.length === 5 && JSON.stringify(await ids('[data-testid="radius-tile"]', "data-radius")) === JSON.stringify(radii.map((r) => r.value)));
+  const names = await page.$$eval('[data-testid="skin-tile"]', (els) => els.map((e) => (e.textContent ?? "").trim()));
+  expect("every skin tile names its skin", skins.every((s, i) => names[i]!.endsWith(d.skins.names[s.replace(/-([a-z0-9])/g, (_m, c: string) => c.toUpperCase())])), names);
+  const primaries = await page.$$eval('[data-testid="skin-preview"]', (els) => els.map((e) => getComputedStyle(e).getPropertyValue("--primary").trim()));
+  expect("every skin tile is drawn in its own skin (15 different primaries)", new Set(primaries).size === skins.length, primaries);
+  const fontsShown = await page.$$eval('[data-testid="font-tile"]', (els) => els.map((e) => getComputedStyle(e).fontFamily));
+  expect("every font tile is drawn in its font", fontsShown.every((f, i) => f.includes(fonts[i]!.family)), fontsShown);
+  const radiiShown = await page.$$eval("[data-radius-sample]", (els) => els.map((e) => getComputedStyle(e).borderTopLeftRadius));
+  expect("every radius sample shows its radius", JSON.stringify(radiiShown) === JSON.stringify(radii.map((r) => r.value)), radiiShown);
+  expect("nothing stored: the build skin is on", (await skin()) === "default", await skin());
+  expect("the default tile is the pressed one", JSON.stringify(await pressed('[data-testid="skin-tile"]', "data-skin-pick")) === JSON.stringify(["default"]));
+  const own = { font: await rootVar("--font-sans"), radius: await rootVar("--radius") };
+  await snap("index");
+  await shot("index-light", true);
+
+  // 2. a skin, a font and a radius
+  const pick = skins.find((s) => s === "claude") ?? skins[1]!;
+  const font = fonts.find((f) => f.family === "Golos Text") ?? fonts[0]!;
+  const radius = radii[radii.length - 1]!;
+  await page.locator(`[data-skin-pick="${pick}"]`).click();
+  expect("a skin tile sets data-skin on <html>", (await skin()) === pick, await skin());
+  const tilePrimary = await page.locator(`[data-skin-pick="${pick}"] [data-testid="skin-preview"]`).evaluate((e) => getComputedStyle(e).getPropertyValue("--primary").trim());
+  expect("the page takes the colours of the tile", (await rootVar("--primary")) === tilePrimary, [await rootVar("--primary"), tilePrimary]);
+  expect("the picked skin tile is the pressed one", JSON.stringify(await pressed('[data-testid="skin-tile"]', "data-skin-pick")) === JSON.stringify([pick]));
+  const skinFont = await rootVar("--font-sans");
+  await page.locator(`[data-font-pick="${font.id}"]`).click();
+  expect("a font tile changes the computed --font-sans", (await rootVar("--font-sans")).includes(font.family) && (await rootVar("--font-sans")) !== skinFont, await rootVar("--font-sans"));
+  expect("the body is set in that font", (await page.evaluate(() => getComputedStyle(document.body).fontFamily)).includes(font.family));
+  const skinRadius = await rootVar("--radius");
+  await page.locator(`[data-radius-pick="${radius.id}"]`).click();
+  expect("a radius tile changes the computed --radius", (await rootVar("--radius")) === radius.value && skinRadius !== radius.value, [skinRadius, await rootVar("--radius")]);
+  expect("the font and radius tiles are pressed", JSON.stringify([await pressed('[data-testid="font-tile"]', "data-font-pick"), await pressed('[data-testid="radius-tile"]', "data-radius-pick")]) === JSON.stringify([[font.id], [radius.id]]));
+  await snap("picked");
+
+  // 3. the choice survives a reload and reaches another screen
+  await page.reload();
+  await ready();
+  expect("after a reload: the skin", (await skin()) === pick, await skin());
+  expect("after a reload: the font", (await rootVar("--font-sans")).includes(font.family), await rootVar("--font-sans"));
+  expect("after a reload: the radius", (await rootVar("--radius")) === radius.value, await rootVar("--radius"));
+  expect("after a reload: the tiles are pressed", JSON.stringify(await pressed("[aria-pressed]", "data-testid")) === JSON.stringify(["skin-tile", "font-tile", "radius-tile"]));
+  await page.goto(base.replace(/\/skins$/, "/catalog") + "/");
+  await page.waitForSelector("h1");
+  expect("another screen wears the picked skin, font and radius", (await skin()) === pick && (await rootVar("--font-sans")).includes(font.family) && (await rootVar("--radius")) === radius.value);
+
+  // 4. ?skin= wins over the stored skin; picking a tile drops it from the address
+  await page.goto(base + "/?skin=default#/");
+  await ready();
+  expect("?skin= wins over the stored skin", (await skin()) === "default", await skin());
+  await page.locator(`[data-skin-pick="${pick}"]`).click();
+  expect("a picked skin drops ?skin= from the address", !page.url().includes("skin=") && (await skin()) === pick, page.url());
+
+  // 5. back: a second click drops the font and the radius, the reset buttons go back to the skin and the build
+  await page.locator(`[data-radius-pick="${radius.id}"]`).click();
+  expect("a second click on the radius tile gives the skin's radius back", (await rootVar("--radius")) === skinRadius, await rootVar("--radius"));
+  await page.getByTestId("reset-fonts").click();
+  expect("the font reset gives the skin's font back", (await rootVar("--font-sans")) === skinFont, await rootVar("--font-sans"));
+  await page.getByTestId("reset-skins").click();
+  expect("the skin reset gives the build skin back", (await skin()) === "default", await skin());
+  expect("and the look of the start", (await rootVar("--font-sans")) === own.font && (await rootVar("--radius")) === own.radius);
+  const stored = await page.evaluate(() => ["xgen-skin", "xgen-font", "xgen-radius"].map((k) => localStorage.getItem(k)));
+  expect("nothing is stored after the resets", stored.every((v) => v === null), stored);
+
+  // 6. at 390 px the page does not scroll sideways
+  const desk = page.viewportSize();
+  await page.setViewportSize({ width: 390, height: 900 });
+  await page.waitForTimeout(50);
+  const over = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+  expect("at 390: the page does not scroll sideways", over <= 1, over);
+  if (desk) await page.setViewportSize(desk);
+
+  // 7. the theme button of the bar, and back
+  const theme = (): Promise<string | undefined> => page.evaluate(() => document.documentElement.dataset.theme);
+  await page.getByTestId("theme-toggle").first().click();
+  expect("the theme button sets dark", (await theme()) === "dark");
+  const darkPrimaries = await page.$$eval('[data-testid="skin-preview"]', (els) => els.map((e) => getComputedStyle(e).getPropertyValue("--primary").trim()));
+  expect("in dark every tile shows the dark side of its skin", darkPrimaries.some((p, i) => p !== primaries[i]), darkPrimaries);
+  await page.getByTestId("theme-toggle").first().click();
+  expect("and back to light", (await theme()) === "light");
+  return { name: "", steps, failures };
+}
diff --git a/xgen/check/src/e2e/theme.ts b/xgen/check/src/e2e/theme.ts
new file mode 100644
index 0000000..a489c09
--- /dev/null
+++ b/xgen/check/src/e2e/theme.ts
@@ -0,0 +1,99 @@
+// A theme app: composed pages made of the blocks of one theme. Every route passes the page rules in light and dark, keeps its h1 from the dictionary,
+// has no sideways scroll at 390 px, keeps its containers centered, and the skip link, the header and the footer of the frame are there.
+import type { Page } from "playwright-core";
+import { areaOf, keyOf, themeApps, themeTexts } from "@ui8kit/xgen-screens";
+import type { E2eResult, Shot, Snap } from "./common";
+import { pageChecks } from "./page-checks";
+
+export const THEME_SCREEN = /^screen\.theme-/;
+const PHONE = 390;
+const DESKTOP = 1100;
+/** the slack, in px, of the rounding of boxes */
+const SLACK = 2;
+
+export async function themeScenario(page: Page, base: string, screen: string, shot: Shot, snap: Snap): Promise<E2eResult> {
+  const failures: string[] = [];
+  let steps = 0;
+  const expect = (what: string, ok: boolean, got?: unknown): void => { steps++; if (!ok) failures.push(`${what}${got !== undefined ? ` (got ${JSON.stringify(got)})` : ""}`); };
+  const app = themeApps.find((a) => `screen.theme-${a.name}` === screen);
+  if (!app) return { name: "", steps: 1, failures: [`${screen}: no theme app of that name in xgen/screens/src/authoring/screens/themes.ts`] };
+  const texts = themeTexts()[keyOf(app.name)] ?? {};
+  const theme = (): Promise<string | undefined> => page.evaluate(() => document.documentElement.dataset.theme);
+  const visit = async (path: string): Promise<void> => { await page.goto(`${base}/#/${path}`); await page.waitForSelector("main#main-content h1"); };
+  const sideways = (): Promise<number> => page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+  const containers = (): Promise<Array<{ left: number; right: number; width: number }>> => page.$$eval('main [data-slot="container"]', (els) => els.map((e) => { const r = e.getBoundingClientRect(); return { left: r.left, right: document.documentElement.clientWidth - r.right, width: r.width }; }));
+
+  for (const mode of ["light", "dark"] as const) {
+    if (mode === "dark") {
+      await page.getByTestId("theme-toggle").first().click();
+      expect("the theme button sets dark", (await theme()) === "dark", await theme());
+    }
+    for (const p of app.pages) {
+      const area = areaOf(p.path);
+      const where = `${area}${mode === "dark" ? " (dark)" : ""}`;
+      await visit(p.path);
+      if (mode === "dark" && (await theme()) !== "dark") await page.getByTestId("theme-toggle").first().click();
+      await pageChecks(page, expect, where);
+      const want = texts[area]?.title;
+      if (want !== undefined) expect(`${where}: the h1 is the title of the page`, (await page.locator("h1").first().innerText()) === want, [want, await page.locator("h1").first().innerText()]);
+      expect(`${where}: the frame has a header with the skip link, and a footer`, (await page.locator("header").count()) >= 1 && (await page.getByTestId("skip-link").count()) >= 1 && (await page.locator("footer").count()) >= 1);
+      expect(`${where}: the page has at least one block besides the lead`, p.rest.length === 0 || (await page.locator("main section, main aside, main nav").count()) > 1, p.rest.length);
+      for (const w of [DESKTOP, PHONE]) {
+        await page.setViewportSize({ width: w, height: 900 });
+        expect(`${where} at ${w}: no sideways scroll`, (await sideways()) <= 0, await sideways());
+        const bad = (await containers()).filter((c) => Math.abs(c.left - c.right) > SLACK || c.width > w);
+        expect(`${where} at ${w}: every container is centered and inside the screen`, bad.length === 0, bad.slice(0, 2));
+      }
+      await page.setViewportSize({ width: DESKTOP, height: 900 });
+      if (mode === "light") await snap(area);
+      await shot(`${area}-${mode}`, true);
+    }
+    expect(`${mode}: the theme stays across routes`, (await theme()) === mode, await theme());
+  }
+  await page.getByTestId("theme-toggle").first().click();
+  expect("the theme toggles back to light", (await theme()) === "light", await theme());
+
+  // keyboard: the first Tab lands on the skip link; Enter keeps the route and moves to main
+  await visit(app.pages[0]!.path);
+  await page.reload();
+  await page.waitForSelector("main#main-content h1");
+  await page.keyboard.press("Tab");
+  expect("the first Tab lands on the skip link", (await page.evaluate(() => document.activeElement?.getAttribute("data-testid"))) === "skip-link");
+  await page.keyboard.press("Enter");
+  expect("the skip link moves focus to main", (await page.evaluate(() => document.activeElement?.id)) === "main-content");
+
+  // the menu of the app: every link of the bar leads to its page (the h1 of that page), and the current one is marked
+  await visit(app.pages[0]!.path);
+  // the frame menu sits outside main; pages that demo other bars also draw nav-link nodes inside main, so ignore those
+  const menuLinks = (): Promise<Array<{ text: string; href: string; current: boolean }>> => page.evaluate(() => {
+    const main = document.querySelector("main");
+    const roots = [...document.querySelectorAll("header")].filter((h) => !main?.contains(h));
+    return roots.flatMap((h) => [...h.querySelectorAll<HTMLAnchorElement>('[data-testid="nav-link"]')].map((a) => ({ text: a.innerText.trim(), href: a.getAttribute("href") ?? "", current: a.getAttribute("aria-current") === "page" })));
+  });
+  const labels = await menuLinks();
+  expect("the menu of the bar has one link per page, in order", labels.length === app.pages.length && labels.every((l, i) => l.href === (app.pages[i]!.path === "" ? "#/" : `#/${app.pages[i]!.path}`)), labels);
+  for (let i = 0; i < app.pages.length; i++) {
+    const p = app.pages[i]!;
+    const area = areaOf(p.path);
+    const href = p.path === "" ? "#/" : `#/${p.path}`;
+    const clicked = await page.evaluate((n) => {
+      const main = document.querySelector("main");
+      const roots = [...document.querySelectorAll("header")].filter((h) => !main?.contains(h));
+      const a = roots.flatMap((h) => [...h.querySelectorAll<HTMLAnchorElement>('[data-testid="nav-link"]')])[n];
+      if (!a) return null;
+      a.click();
+      return a.getAttribute("href");
+    }, i);
+    expect(`nav ${area}: the link is in the bar`, clicked === href, clicked);
+    const reached = await page.waitForFunction((h) => location.hash === h, href, { timeout: 5000 }).then(() => true).catch(() => false);
+    expect(`nav ${area}: the link changes the hash`, reached, await page.evaluate(() => location.hash));
+    if (!reached) continue;
+    await page.waitForSelector("main#main-content h1");
+    const want = texts[area]?.title;
+    if (want !== undefined) expect(`nav ${area}: the link opens the page (h1)`, (await page.locator("h1").first().innerText()) === want, [want, await page.locator("h1").first().innerText()]);
+    else expect(`nav ${area}: the link opens the area`, (await page.evaluate(() => location.hash)) === href, await page.evaluate(() => location.hash));
+    const current = (await menuLinks()).filter((l) => l.current).map((l) => l.href);
+    expect(`nav ${area}: the current link is marked`, current.length === 1 && current[0] === href, current);
+  }
+  return { name: "", steps, failures };
+}
diff --git a/xgen/check/src/index.ts b/xgen/check/src/index.ts
new file mode 100644
index 0000000..ccd5cfa
--- /dev/null
+++ b/xgen/check/src/index.ts
@@ -0,0 +1,296 @@
+// `xgen check`: every check returns a list of problems; the check passes when the lists are empty.
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { execFileSync } from "node:child_process";
+import { validateRegistry, deriveA11y, deriveData, deriveSlots, portableTo, UI_RUNTIMES, type LoadedBrick, type SpecFile, type UiRuntime } from "@ui8kit/xgen-spec";
+import { authored, authoredDirs, screenContentRefs, indexParts, sourcesOf, stringify, fileName, tierDir, validateOrganism, validateScreen, type OrganismSpec } from "@ui8kit/xgen-screens";
+import { drift, planBuild, type Plan } from "@ui8kit/xgen-generator";
+import { checkBlocks } from "./blocks";
+import { blockSources, blocksDrift } from "@ui8kit/xgen-schema/codex-blocks";
+import { checkRegistry, checkThemes } from "./registry";
+import { checkDictionary } from "./dictionary";
+import { checkRoutes } from "./routes";
+import { checkDead, checkDuplicates, checkHardcode, checkStructure, checkTests, checkVersions } from "./audit";
+import { checkCorners } from "./corners";
+import { checkShadows } from "./shadows";
+import { checkSpacing } from "./spacing";
+import { checkReadability } from "./readability";
+import { checkRules } from "./rules";
+
+import { result, type CheckResult } from "./result";
+import { KNOWN_ARIA } from "./aria";
+export type { CheckResult } from "./result";
+export { checkDictionary, dictionaryUse, leavesOf } from "./dictionary";
+export { checkRoutes } from "./routes";
+export { runVisual } from "./visual";
+export { measure as measureReadability } from "./readability";
+
+const CYRILLIC = /[\u0400-\u04FF]/;
+
+/** every file under dir except tool output */
+function files(dir: string, skip = new Set(["node_modules", "dist", "shots", ".git"])): string[] {
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).flatMap((n) => {
+    if (skip.has(n)) return [];
+    const p = join(dir, n);
+    return statSync(p).isDirectory() ? files(p, skip) : [p];
+  });
+}
+
+export function checkSchema(plan: Plan): CheckResult {
+  const problems = [...plan.problems];
+  try { validateRegistry(plan.bricks.map((b) => b.brick)); } catch (e) { problems.push(`registry: ${(e as Error).message}`); }
+  for (const b of plan.bricks) {
+    const derivedOk = (a: unknown, b2: unknown): boolean => JSON.stringify(a) === JSON.stringify(b2);
+    for (const p of b.spec.parts) {
+      if (!derivedOk(p.slots, deriveSlots(p))) problems.push(`${b.brick.id}/${p.name}: slots differ from the render tree`);
+      if (!derivedOk(p.a11y, deriveA11y(p))) problems.push(`${b.brick.id}/${p.name}: a11y differs from the render tree`);
+      if (!derivedOk(p.data, deriveData(p))) problems.push(`${b.brick.id}/${p.name}: data attributes differ from the render tree`);
+    }
+  }
+  return result("schema", "specs, variants, organisms, screens, apps, fixtures and content match their JSON Schemas; contract metadata equals the render tree", problems);
+}
+
+/** props and variants: examples of every brick and every view use only props and variant values the specs have */
+export function checkProps(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const parts = indexParts(plan.bricks);
+  const theme = readFileSync(join(plan.xgenRoot, "runtimes", "core", "assets", "styles", "theme.css"), "utf8");
+  for (const b of plan.bricks) {
+    for (const ex of b.spec.examples) {
+      for (const [k, v] of Object.entries(ex.props)) {
+        const owner = b.spec.parts.find((p) => p.props.some((x) => x.name === k));
+        if (!owner) {
+          if (k === "AsChild" && b.spec.parts.some((p) => p.asChild)) continue;
+          problems.push(`${b.brick.id} example ${ex.id}: unknown prop ${k}`);
+          continue;
+        }
+        const def = owner.props.find((x) => x.name === k)!;
+        if (def.cva) {
+          const recipe = owner.recipeId ? b.brick.recipes[owner.recipeId] : undefined;
+          const allowed = Object.keys(recipe?.byKey[def.cvaKey ?? def.name.toLowerCase()] ?? {});
+          if (!allowed.includes(String(v))) problems.push(`${b.brick.id} example ${ex.id}: ${k}="${v}" is not a variant (${allowed.join(", ")})`);
+        }
+      }
+    }
+    for (const p of b.spec.parts) for (const t of p.tokens) if (!theme.includes(`${t}:`)) problems.push(`${b.brick.id}/${p.name}: token ${t} is not in theme.css`);
+  }
+  const orgs = Object.fromEntries(plan.inputs.organisms.map((o) => [o.value.name, o.value]));
+  const recipes = Object.fromEntries(plan.inputs.recipes.map((r) => [r.name, r.value]));
+  const at = (file: string): string => relative(join(plan.xgenRoot, ".."), file);
+  for (const o of plan.inputs.organisms) problems.push(...validateOrganism(o.value, parts, orgs, recipes, plan.inputs.presets.map((x) => x.value)).map((m) => `${at(o.file)}: ${m}`));
+  for (const s of plan.inputs.screens) problems.push(...validateScreen(s.value, parts, orgs).map((m) => `${at(s.file)}: ${m}`));
+  return result("props", "props, variant values and tokens exist; views use only parts, props and variants of the specs; no literal text, static ARIA state", problems);
+}
+
+export function checkA11y(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  for (const b of plan.bricks) for (const p of b.spec.parts) {
+    if (!p.a11y || !Array.isArray(p.a11y.roots) || !p.a11y.roots.length) problems.push(`${b.brick.id}/${p.name}: a11y.roots is empty`);
+    const roots = p.a11y.roots;
+    if (roots.includes("img") && !p.props.some((x) => x.name === "Alt")) problems.push(`${b.brick.id}/${p.name}: an img part without an Alt prop`);
+    if (roots.length === 1 && roots[0] === "input" && !p.props.some((x) => x.name === "AriaLabel") && !p.props.some((x) => x.name === "ID")) problems.push(`${b.brick.id}/${p.name}: an input part with no AriaLabel and no ID to bind a label`);
+    if (p.a11y.aria.some((a) => a.name.startsWith("aria-") && a.kind === "expr" && !KNOWN_ARIA.has(a.name))) problems.push(`${b.brick.id}/${p.name}: unknown ARIA attribute`);
+  }
+  // the screens: a table has a caption and column headers with a scope; an input has an accessible name
+  for (const s of plan.inputs.screens) {
+    const text = JSON.stringify(s.value.areas);
+    if (text.includes('"use":"Table"') && !text.includes('"use":"TableCaption"')) problems.push(`${s.value.name}: a Table without a TableCaption`);
+    if (text.includes('"use":"TableHeadCell"') && !text.includes('"Scope":"col"')) problems.push(`${s.value.name}: header cells without scope`);
+    if (text.includes('"use":"Input"') && !text.includes('"AriaLabel"')) problems.push(`${s.value.name}: an Input without AriaLabel`);
+    if (text.includes('aria-sort') && !(text.includes('"ascending"') && text.includes('"descending"') && text.includes('"none"'))) problems.push(`${s.value.name}: aria-sort needs all three static states`);
+  }
+  return result("a11y", "roots and ARIA of every part; tables, inputs and sortable headers of the screens", problems);
+}
+
+export function checkAuthored(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  for (const [dir, list] of authoredDirs()) {
+    for (const spec of list) {
+      const file = join(xgenPaths(plan.xgenRoot).specs(dir), `${spec.id.split(".")[1]}.json`);
+      if (!existsSync(file)) problems.push(`specs/${dir}/${spec.id.split(".")[1]}.json: missing (run: bun run build)`);
+      else if (readFileSync(file, "utf8") !== stringify(spec)) problems.push(`specs/${dir}/${spec.id.split(".")[1]}.json: differs from the builder (xgen/screens/src/authoring); run: bun run build`);
+    }
+  }
+  const known = new Set<string>(authoredDirs().flatMap(([, list]) => list.map((o) => o.id)));
+  for (const o of plan.inputs.organisms) if (!known.has(o.value.id)) problems.push(`${o.file}: not produced by the builder`);
+  for (const s of plan.inputs.screens) if (!known.has(s.value.id)) problems.push(`${s.file}: not produced by the builder`);
+  for (const b of plan.inputs.blocks) if (!known.has(b.value.id)) problems.push(`${b.file}: not produced by the builder`);
+  return result("authored", "organism, block and screen JSON equals what the builder in xgen/screens produces", problems);
+}
+
+/** recipes of the parts and patterns: valid, used, and shown in an example for every value */
+export function checkRecipes(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const used = new Map<string, string[]>();
+  for (const o of plan.inputs.organisms) for (const file of Object.values(o.value.recipes ?? {})) used.set(file, [...(used.get(file) ?? []), o.value.name]);
+  for (const r of plan.inputs.recipes) {
+    if (JSON.stringify(r.value).includes("gradient")) problems.push(`recipes/${r.name}: has a gradient`);
+    for (const [key, table] of Object.entries(r.value.byKey)) if ("plain" in table) problems.push(`recipes/${r.name}: key ${key} has a plain variant`);
+    for (const key of r.value.keys) if (!(key in r.value.byKey)) problems.push(`recipes/${r.name}: key ${key} has no table`);
+    if (!used.has(r.name)) problems.push(`recipes/${r.name}: no part or pattern uses it`);
+  }
+  for (const o of plan.inputs.organisms) {
+    const spec = o.value;
+    const propNames = new Set(spec.props.map((p) => p.name));
+    for (const ex of spec.examples ?? []) for (const k of Object.keys(ex.props)) if (!propNames.has(k)) problems.push(`${spec.name} example ${ex.id}: unknown prop ${k}`);
+    for (const file of Object.values(spec.recipes ?? {})) {
+      const recipe = plan.inputs.recipes.find((r) => r.name === file)?.value;
+      if (!recipe) continue;
+      for (const key of recipe.keys) {
+        if (!propNames.has(key)) continue;
+        for (const value of Object.keys(recipe.byKey[key] ?? {})) if (!(spec.examples ?? []).some((e) => String(e.props[key]) === value)) problems.push(`${spec.name}: no example for ${key}="${value}" of recipe ${file}`);
+      }
+    }
+    for (const ex of spec.examples ?? []) for (const [k, v] of Object.entries(ex.props)) {
+      const file = Object.values(spec.recipes ?? {}).find((f) => plan.inputs.recipes.find((r) => r.name === f)?.value.keys.includes(k));
+      const recipe = file ? plan.inputs.recipes.find((r) => r.name === file)?.value : undefined;
+      if (recipe && !(String(v) in (recipe.byKey[k] ?? {}))) problems.push(`${spec.name} example ${ex.id}: ${k}="${v}" is not a value of recipe ${file}`);
+    }
+  }
+  return result("recipes", `${plan.inputs.recipes.length} recipes of parts and patterns (parts, patterns and block frames): valid, used, every value of every key shown in an example`, problems);
+}
+
+/** the block data manifest (xgen/schema/codex/blocks.json) equals what `bun run codex:blocks` generates from the specs, templates and screens */
+export function checkCodex(plan: Plan): CheckResult {
+  return result("codex", "the block data manifest (xgen/schema/codex/blocks.json) is generated from the block and screen specs, the magazine templates and the taste screens: no block missing, no stale binding or source", blocksDrift(blockSources(plan.xgenRoot)));
+}
+
+export function checkDrift(plan: Plan): CheckResult {
+  return result("drift", "packages and apps equal what the specs generate: no hand edits, no extra files, every file has the DO NOT EDIT header", drift(plan));
+}
+
+export function checkCoverage(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const generated = (runtime: UiRuntime): Set<string> => new Set(plan.targets.find((t) => t.dir === `packages/${runtime}/ui`)!.files.map((f) => f.path));
+  const have = { svelte: generated("svelte"), react: generated("react"), vue: generated("vue"), solid: generated("solid") };
+  const EXT = { svelte: "svelte", react: "tsx", vue: "vue", solid: "tsx" } as const;
+  const all = [
+    ...plan.bricks.map((b) => ({ id: b.brick.id, portable: b.spec.portable, parts: b.brick.parts.map((p) => p.name), dir: b.brick.dir, file: b.brick.file ?? b.brick.dir })),
+    ...plan.inputs.organisms.map((o) => ({ id: o.value.id, portable: o.value.portable, parts: [o.value.name], dir: "", file: o.value.name })),
+    ...plan.inputs.screens.map((s) => ({ id: s.value.id, portable: s.value.portable, parts: [s.value.name], dir: "", file: s.value.name })),
+  ];
+  for (const e of all) {
+    for (const rt of UI_RUNTIMES) {
+      const flag = portableTo(e.portable, rt);
+      if (flag === true) {
+        const isScreen = e.id.startsWith("screen.");
+        if (isScreen) {
+          const apps = plan.targets.filter((t) => t.kind === "app" && t.runtime === rt);
+          const ext = EXT[rt];
+          if (apps.length && !apps.some((a) => a.files.some((f) => f.path === `xgen/screens/${e.parts[0]}.${ext}`))) problems.push(`${e.id}: marked portable for ${rt} but the host of that runtime has no ${e.parts[0]}`);
+        } else if (/^(organism|part|pattern)\./.test(e.id)) {
+          if (!have[rt].has(`src/${tierDir(e.id)}/${fileName(e.parts[0]!)}.${EXT[rt]}`)) problems.push(`${e.id}: marked portable for ${rt} but not generated`);
+        } else {
+          // one file per part (Svelte, Vue, and React for a brick of several parts), else one React file per brick
+          const ok = (rt !== "react" && rt !== "solid") || e.parts.length > 1
+            ? e.parts.every((p) => have[rt].has(`src/primitives/${e.dir}/${fileName(p)}.${EXT[rt]}`))
+            : have[rt].has(`src/primitives/${e.dir}/${e.file}.tsx`);
+          if (!ok) problems.push(`${e.id}: marked portable for ${rt} but not generated`);
+        }
+      } else if (!flag || flag.portable !== false || !flag.reason || flag.reason.length < 8) problems.push(`${e.id}: ${rt} is neither generated nor marked { "portable": false, "reason": "..." }`);
+    }
+  }
+  return result("coverage", `every spec is generated for every runtime (${UI_RUNTIMES.join(", ")}), or says why not`, problems);
+}
+
+export function checkNonportable(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const doc = JSON.parse(readFileSync(xgenPaths(plan.xgenRoot).nonportable, "utf8")) as { features: Array<{ id: string; runtime: string; markers: string[]; replacement: string }> };
+  for (const f of doc.features) if (!f.replacement || f.replacement.length < 20) problems.push(`_nonportable.json ${f.id}: no replacement contract`);
+  for (const t of plan.targets) for (const f of t.files) {
+    if (!/\.(svelte|vue|tsx?)$/.test(f.path)) continue;
+    // a `//` comment before the markup of a .svelte file is rendered as text
+    if (f.path.endsWith(".svelte") && /^\s*\/\//.test(f.contents)) problems.push(`${t.dir}/${f.path}: starts with a // comment, which a Svelte template shows as text`);
+    for (const feature of doc.features) {
+      if (feature.runtime !== "both" && feature.runtime !== t.runtime) continue;
+      for (const m of feature.markers) if (f.contents.includes(m)) problems.push(`${t.dir}/${f.path}: uses ${m} (${feature.id}); the contract is: ${feature.replacement}`);
+    }
+  }
+  return result("nonportable", "generated code uses none of the features that do not carry over (context, $bindable, attach, raw HTML, v-model); the replacements are documented", problems);
+}
+
+/** Genuine locale resources that may hold Cyrillic (repo-relative paths). Empty: the repository is English-only. */
+export const CYRILLIC_ALLOW: readonly string[] = [];
+
+/** every tracked file (git ls-files); outside a git checkout, the source roots on disk */
+function trackedFiles(workspace: string): string[] {
+  try {
+    const out = execFileSync("git", ["ls-files", "-z"], { cwd: workspace, encoding: "utf8", stdio: ["ignore", "pipe", "ignore"] });
+    return out.split("\0").filter(Boolean).map((f) => join(workspace, f)).filter((f) => existsSync(f));
+  } catch {
+    const skip = new Set(["node_modules", "dist", "shots", ".git", "bun.lock"]);
+    return ["xgen", "packages", "apps", "plan", "docs", "README.md"].map((r) => join(workspace, r)).filter(existsSync).flatMap((r) => (statSync(r).isDirectory() ? files(r, skip) : [r]));
+  }
+}
+
+/** text: no Cyrillic in any tracked file (sources, generated code, content, docs, plans) outside CYRILLIC_ALLOW; every content key a view reads exists */
+export function checkText(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const allow = new Set(CYRILLIC_ALLOW);
+  for (const f of trackedFiles(plan.workspace)) {
+    const rel = relative(plan.workspace, f).split("\\").join("/");
+    if (allow.has(rel)) continue;
+    const buf = readFileSync(f);
+    if (buf.includes(0)) continue; // binary
+    const lines = buf.toString("utf8").split("\n");
+    const i = lines.findIndex((l) => CYRILLIC.test(l));
+    if (i >= 0) problems.push(`${rel}:${i + 1}: Cyrillic text (the repository is English-only; genuine locale files go in CYRILLIC_ALLOW)`);
+  }
+  const dict = plan.inputs.dictionary.value as Record<string, unknown>;
+  const has = (path: string): unknown => path.split(".").reduce<unknown>((o, k) => (o && typeof o === "object" ? (o as Record<string, unknown>)[k] : undefined), dict);
+  const orgs = Object.fromEntries(plan.inputs.organisms.map((o) => [o.value.name, o.value as OrganismSpec]));
+  for (const s of plan.inputs.screens) {
+    const refs = screenContentRefs(s.value);
+    for (const k of refs) if (has(k) === undefined) problems.push(`${s.value.name}: content key ui.${k} is not in content/ui/en.json`);
+    for (const c of s.value.list?.columns ?? []) if (typeof has(c.label) !== "string") problems.push(`${s.value.name}: column ${c.id} label ui.${c.label} is not in content`);
+    // labels handed to organisms must carry every field of the labels record
+    const walk = (n: unknown): void => {
+      if (!n || typeof n !== "object") return;
+      const o = n as Record<string, unknown>;
+      if (typeof o.organism === "string") {
+        const org = orgs[o.organism];
+        const labels = (o.props as Record<string, { $?: string }> | undefined)?.labels;
+        const rec = org?.records["PricingCardLabels"] ?? [];
+        if (labels?.$?.startsWith("ui.")) {
+          const sub = has(labels.$.slice(3)) as Record<string, unknown> | undefined;
+          for (const f of rec) if (typeof sub?.[f.name] !== "string") problems.push(`${s.value.name}: ${labels.$}.${f.name} is missing (labels of ${o.organism})`);
+        }
+      }
+      for (const v of Object.values(o)) Array.isArray(v) ? v.forEach(walk) : walk(v);
+    };
+    walk(s.value.layout);
+    walk(s.value.parts ?? {});
+    walk(s.value.areas);
+    // a badge column shows ui.status.<value>: every value in the fixture has a word
+    for (const src of sourcesOf(s.value)) {
+    const col = plan.inputs.collections.find((c) => c.value.collection === src.collection);
+    const statusPath = src.fields["status"];
+    if (col && statusPath) {
+      for (const e of col.value.entries) {
+        const v = statusPath.split(".").reduce<unknown>((x, k) => (x as Record<string, unknown> | undefined)?.[k], e);
+        if (typeof v === "string" && typeof has(`status.${v}`) !== "string") problems.push(`fixture ${col.value.collection}: status "${v}" has no word in ui.status`);
+      }
+    }
+    }
+  }
+  return result("text", "no Cyrillic in tracked files; every text of a view is a key that exists in content/ui/en.json", problems);
+}
+
+export function runChecks(workspace: string): { results: CheckResult[]; plan: Plan } {
+  const plan = planBuild(workspace);
+  const results = [checkSchema(plan), checkProps(plan), checkA11y(plan), checkAuthored(plan), checkCoverage(plan), checkRecipes(plan), checkNonportable(plan), checkText(plan), checkDictionary(plan), checkBlocks(plan), checkRegistry(plan), checkThemes(plan), checkRoutes(plan), checkStructure(plan), checkHardcode(plan), checkCorners(plan), checkShadows(plan), checkSpacing(plan), checkReadability(plan), checkDead(plan), checkDuplicates(plan), checkVersions(plan), checkTests(plan), checkRules(plan.workspace), checkCodex(plan), checkDrift(plan)];
+  return { results, plan };
+}
+
+export type { LoadedBrick, SpecFile };
+
+export { checkBlocks } from "./blocks";
+export { runE2e, type E2eReport } from "./e2e";
+export { templCheck, type TemplResult } from "./templ";
+export { solidCheck, type SolidResult } from "./solid";
+export { runShot, type ShotOptions } from "./shots";
+export { twigCheck, type TwigResult } from "./twig";
+export { jinja2Check, type Jinja2Result } from "./jinja2";
+export { latteCheck } from "./latte";
diff --git a/xgen/check/src/jinja2/index.ts b/xgen/check/src/jinja2/index.ts
new file mode 100644
index 0000000..8a388fa
--- /dev/null
+++ b/xgen/check/src/jinja2/index.ts
@@ -0,0 +1,32 @@
+// The Jinja2 gate: a Python virtual environment with the generated requirements (Jinja2), then every brick case and every
+// block case rendered with real Jinja2 through bin/parity.py, DOM parity with React and html-validate of every block case
+// (the same harness as the Twig gate). Skips when Python, venv or the Jinja2 install is unavailable.
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import type { Inputs } from "@ui8kit/xgen-screens";
+import { jinja } from "@ui8kit/xgen-runtime-jinja2";
+import { run, templateParity, type TwigResult } from "../twig";
+
+export const JINJA2_DIR = "packages/jinja2/ui";
+export type Jinja2Result = TwigResult & { python?: string; jinja2?: string };
+
+export async function jinja2Check(workspace: string, bricks: LoadedBrick[], inputs: Inputs): Promise<Jinja2Result> {
+  const dir = join(workspace, JINJA2_DIR);
+  const none = { cases: 0, blocks: 0, organisms: 0 };
+  const py = run("python3", ["-c", "import sys; print('%d.%d.%d' % sys.version_info[:3])"], ".");
+  if (!py.ok) return { ok: true, problems: [], ...none, skipped: "no Python" };
+  const bin = join(dir, ".venv", "bin", "python");
+  if (!existsSync(bin) && !run("python3", ["-m", "venv", ".venv"], dir).ok) return { ok: true, problems: [], ...none, skipped: "no Python venv" };
+  let version = run(bin, ["-c", "import jinja2; print(jinja2.__version__)"], dir);
+  if (!version.ok) {
+    if (!run(bin, ["-m", "pip", "install", "-q", "-r", "requirements.txt"], dir).ok) return { ok: true, problems: [], ...none, skipped: "Jinja2 could not be installed (pip)" };
+    version = run(bin, ["-c", "import jinja2; print(jinja2.__version__)"], dir);
+  }
+  const render = (reqs: Array<{ template: string; vars: Record<string, unknown> }>): string[] | string => {
+    const r = run(bin, ["bin/parity.py"], dir, JSON.stringify(reqs));
+    if (!r.ok) return `python bin/parity.py: ${r.err.trim().split("\n").slice(-12).join("\n")}`;
+    return JSON.parse(r.out) as string[];
+  };
+  return { ...(await templateParity(workspace, dir, bricks, inputs, jinja, render)), python: py.out.trim(), jinja2: version.out.trim() };
+}
diff --git a/xgen/check/src/latte/index.ts b/xgen/check/src/latte/index.ts
new file mode 100644
index 0000000..caf146e
--- /dev/null
+++ b/xgen/check/src/latte/index.ts
@@ -0,0 +1,12 @@
+// The Latte gate: the same as Twig's (composer install, php -l, every brick and block case rendered with real Latte
+// through bin/parity.php against React, html-validate of every block case), over packages/latte/ui. Skips without PHP.
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import type { Inputs } from "@ui8kit/xgen-screens";
+import { latte } from "@ui8kit/xgen-runtime-twig";
+import { phpTemplateCheck, type TwigResult } from "../twig";
+
+export const LATTE_DIR = "packages/latte/ui";
+
+export function latteCheck(workspace: string, bricks: LoadedBrick[], inputs: Inputs): Promise<TwigResult> {
+  return phpTemplateCheck(workspace, LATTE_DIR, bricks, inputs, latte);
+}
diff --git a/xgen/check/src/readability-allow.ts b/xgen/check/src/readability-allow.ts
new file mode 100644
index 0000000..26466be
--- /dev/null
+++ b/xgen/check/src/readability-allow.ts
@@ -0,0 +1,12 @@
+// Files that still exceed the readability limits (audit-rules.ts READABILITY), with their numbers today. Lower an entry when a file
+// gets better and delete it when the file is within the limits; `bun xgen/check/tools/readability-allow.ts` prints the current table.
+export interface Measure { lines?: number; long?: number; bytes?: number; props?: number }
+/** an allowance names its reason: a file that is only waiting for a split has no place here */
+export type Allowance = Measure & { why: string };
+export const HTML_ATTRS = "an HTML-attribute primitive: its props mirror the attributes of the native element, so grouping them would hide the platform API";
+
+export const READABILITY_ALLOW: Record<string, Allowance> = {
+  "button": { props: 14, why: HTML_ATTRS },
+  "image": { props: 16, why: HTML_ATTRS },
+  "input": { props: 15, why: HTML_ATTRS },
+};
diff --git a/xgen/check/src/readability.ts b/xgen/check/src/readability.ts
new file mode 100644
index 0000000..886f9f5
--- /dev/null
+++ b/xgen/check/src/readability.ts
@@ -0,0 +1,64 @@
+// The `readability` group of `xgen check`: generated components stay short enough for a junior to read in one sitting.
+// Limits live in audit-rules.ts; the files that still exceed them are listed, with their current numbers, in readability-allow.ts.
+// The allowlist is a ratchet: a file may not get worse, and once it gets better its entry must be lowered (or removed).
+import type { Plan } from "@ui8kit/xgen-generator";
+import type { CheckResult } from "./result";
+import { READABILITY } from "./audit-rules";
+import { READABILITY_ALLOW, type Measure } from "./readability-allow";
+
+/** HeroSection.svelte, hero-section.tsx, hero-section.vue -> hero-section: one key for every runtime and naming style */
+export const kebab = (stem: string): string => stem.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+
+const SKIP = [/\/utils\//, /\/styles\//, /lucide-icons\.ts$/, /\/index\.ts$/, /\.types\.ts$/, /\.assets\.ts$/, /\.json$/, /\.md$/, /\.css$/];
+
+/** what the check measures, per component key (the worst of the runtimes) */
+export function measure(plan: Plan): Record<string, Measure> {
+  const out: Record<string, Measure> = {};
+  const put = (key: string, m: Measure): void => {
+    const o = (out[key] ??= {});
+    for (const [k, v] of Object.entries(m) as Array<[keyof Measure, number]>) o[k] = Math.max(o[k] ?? 0, v);
+  };
+  for (const t of plan.targets) {
+    const screens = t.kind === "app";
+    for (const f of t.files) {
+      const inPkg = t.kind === "package" && t.runtime !== "core" && f.path.startsWith("src/");
+      // a screen, or one page of a chunked screen (screens/BlocksScreen/HeroPage.svelte -> screen:blocks-screen/hero-page)
+      const inHost = screens && /\/screens\/(?:[^/]+\/)?[^/]+\.(svelte|vue|tsx)$/.test(f.path);
+      if (!(inPkg || inHost) || SKIP.some((r) => r.test(f.path))) continue;
+      const lines = f.contents.split("\n");
+      const stem = f.path.split("/").pop()!.replace(/\.(svelte|vue|tsx|ts)$/, "");
+      const limit = inHost ? READABILITY.screenLines : READABILITY.fileLines;
+      const key = inHost ? `screen:${f.path.split("/screens/")[1]!.replace(/\.(svelte|vue|tsx)$/, "").split("/").map(kebab).join("/")}` : kebab(stem);
+      const m: Measure = {};
+      if (lines.length > limit) m.lines = lines.length;
+      const long = lines.filter((l) => l.length > READABILITY.lineChars).length;
+      if (long) m.long = long;
+      if (f.contents.length > READABILITY.fileBytes && !inHost) m.bytes = f.contents.length;
+      put(key, m);
+    }
+  }
+  for (const o of plan.inputs.organisms) { const n = o.value.props.filter((p) => p.name !== "landmarkLabel").length; if (n > READABILITY.props) put(kebab(o.value.name), { props: n }); }
+  for (const { brick } of plan.bricks) for (const p of brick.parts) {
+    const n = p.props.filter((x) => !["Class", "Attrs", "Children"].includes(x.name)).length;
+    if (n > READABILITY.props) put(kebab(p.name), { props: n });
+  }
+  for (const k of Object.keys(out)) if (!Object.keys(out[k]!).length) delete out[k];
+  return out;
+}
+
+const WHAT: Record<keyof Measure, string> = { lines: "lines", long: `lines over ${READABILITY.lineChars} characters`, bytes: "bytes", props: "props" };
+
+export function checkReadability(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const now = measure(plan);
+  for (const key of new Set([...Object.keys(now), ...Object.keys(READABILITY_ALLOW)])) {
+    const m = now[key] ?? {}, a = READABILITY_ALLOW[key] ?? {};
+    for (const k of Object.keys(WHAT) as Array<keyof Measure>) {
+      const got = m[k] ?? 0, allowed = a[k] ?? 0;
+      if (got > allowed) problems.push(`${key}: ${got} ${WHAT[k]}${allowed ? ` (allowed ${allowed} while migrating)` : ""}; the limit is ${k === "long" ? 0 : k === "lines" ? (key.startsWith("screen:") ? READABILITY.screenLines : READABILITY.fileLines) : k === "bytes" ? READABILITY.fileBytes : READABILITY.props}: split it into smaller components`);
+      else if (got < allowed) problems.push(`xgen/check/src/readability-allow.ts: ${key} ${k} is now ${got || "within the limit"}; lower the allowance from ${allowed}`);
+    }
+  }
+  const l = READABILITY;
+  return { name: "readability", what: `generated files up to ${l.fileLines} lines (screens ${l.screenLines}), ${l.fileBytes} bytes, lines up to ${l.lineChars} characters, components up to ${l.props} props (ratchet: readability-allow.ts)`, problems };
+}
diff --git a/xgen/check/src/registry.ts b/xgen/check/src/registry.ts
new file mode 100644
index 0000000..af34df3
--- /dev/null
+++ b/xgen/check/src/registry.ts
@@ -0,0 +1,37 @@
+// The `registry` group of `xgen check`: the 92 layouts of the reference catalog are all mapped, every reference exists, the document is the one the registry writes.
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { blockKey, CONTRACT_PATTERNS, coverageMarkdown, coverageProblems, themeApps, themeTexts } from "@ui8kit/xgen-screens";
+import type { Plan } from "@ui8kit/xgen-generator";
+import type { CheckResult } from "./result";
+
+export const COVERAGE_DOC = "docs/vibeui-coverage.md";
+
+export function checkRegistry(plan: Plan): CheckResult {
+  const blocks = plan.inputs.blocks.map((b) => b.value);
+  const patterns = new Set(plan.inputs.organisms.filter((o) => o.value.id.startsWith("pattern.")).map((o) => o.value.id.slice("pattern.".length)));
+  const problems = coverageProblems(blocks, patterns, new Set(CONTRACT_PATTERNS));
+  const file = join(plan.xgenRoot, COVERAGE_DOC);
+  if (!existsSync(file)) problems.push(`${COVERAGE_DOC}: missing; run bun xgen/screens/tools/author-coverage.ts`);
+  else if (readFileSync(file, "utf8") !== coverageMarkdown(blocks)) problems.push(`${COVERAGE_DOC}: differs from the registry in screens/src/authoring/gallery/coverage.ts; run bun xgen/screens/tools/author-coverage.ts`);
+  return { name: "registry", what: "the 92 layouts of the reference catalog map to existing blocks, variants and contracts; the coverage document is the one the registry writes", problems };
+}
+
+/** the theme screens: each is a screen spec the hosts serve, every block of the catalog appears in at least one, the page texts in the dictionary are the ones the pages declare */
+export function checkThemes(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const ids = new Set(plan.inputs.screens.map((s) => s.value.id));
+  const used = new Set<string>(["navbar"]);
+  for (const app of themeApps) {
+    if (!ids.has(`screen.theme-${app.name}`)) problems.push(`theme ${app.name}: no screen spec screen.theme-${app.name}`);
+    used.add(app.footer.split(".")[0]!);
+    for (const p of app.pages) for (const r of [p.lead, ...p.rest]) used.add(r.split(".")[0]!);
+  }
+  for (const b of plan.inputs.blocks) { const k = blockKey(b.value); if (!used.has(k)) problems.push(`block ${k}: not used by any theme screen; add it to a page in screens/src/authoring/screens/themes.ts`); }
+  const dict = (plan.inputs.dictionary.value as { pages?: unknown }).pages;
+  const want = { ...themeTexts() };
+  if (JSON.stringify(dict) !== JSON.stringify(want)) problems.push("content/ui/en.json: `pages` differs from themeTexts(); run author-theme-texts.ts");
+  const ports = plan.apps.map((a) => a.app.port);
+  for (const p of ports) if (ports.filter((x) => x === p).length > 1) problems.push(`port ${p} is used by more than one host app`);
+  return { name: "themes", what: "every theme is a screen spec, every block is used by a theme, page texts match the dictionary, host ports are unique", problems: [...new Set(problems)] };
+}
diff --git a/xgen/check/src/result.ts b/xgen/check/src/result.ts
new file mode 100644
index 0000000..d7704af
--- /dev/null
+++ b/xgen/check/src/result.ts
@@ -0,0 +1,3 @@
+// What every group of `xgen check` returns: a name, what it holds, and the list of problems (empty when it passes).
+export interface CheckResult { name: string; what: string; problems: string[] }
+export const result = (name: string, what: string, problems: string[]): CheckResult => ({ name, what, problems });
diff --git a/xgen/check/src/routes.ts b/xgen/check/src/routes.ts
new file mode 100644
index 0000000..a47c0e9
--- /dev/null
+++ b/xgen/check/src/routes.ts
@@ -0,0 +1,37 @@
+// The `routes` group of `xgen check`: the menu of every screen leads to routes of that screen and names dictionary texts,
+// a screen that reads the menu has one, and the hosts serve every screen in both runtimes.
+import { relative } from "node:path";
+import { hostedScreens, type Plan } from "@ui8kit/xgen-generator";
+import { portableTo, UI_RUNTIMES } from "@ui8kit/xgen-spec";
+import type { CheckResult } from "./result";
+
+export function checkRoutes(plan: Plan): CheckResult {
+  const problems: string[] = [];
+  const dict = plan.inputs.dictionary.value as Record<string, unknown>;
+  const leaf = (key: string): boolean => typeof key.split(".").reduce<unknown>((o, k) => (o && typeof o === "object" ? (o as Record<string, unknown>)[k] : undefined), dict) === "string";
+  for (const { file, value: s } of plan.inputs.screens) {
+    const at0 = relative(plan.workspace, file);
+    const menu = s.menu ?? [];
+    if (s.nav && menu.length === 0) problems.push(`${at0}: the screen reads the menu (nav) but has no "menu"`);
+    if (menu.length && !s.nav) problems.push(`${at0}: a "menu", but the screen shows no menu (nav)`);
+    const paths = new Set(s.routes.map((r) => r.path));
+    const seen = { id: new Set<string>(), path: new Set<string>() };
+    menu.forEach((r, i) => {
+      const at = `${at0}: menu[${i}] (${r.id})`;
+      if (seen.id.has(r.id)) problems.push(`${at}: the id is used twice`);
+      if (seen.path.has(r.path)) problems.push(`${at}: the path "${r.path}" is used twice`);
+      seen.id.add(r.id); seen.path.add(r.path);
+      if (!paths.has(r.path)) problems.push(`${at}: the screen has no route "${r.path}"`);
+      if (!leaf(r.titleKey)) problems.push(`${at}: titleKey ${r.titleKey} is not a text of xgen/content/ui/en.json`);
+    });
+  }
+  // every screen portable to a runtime is served by a host of that runtime
+  const all = plan.inputs.screens.map((s) => s.value);
+  for (const rt of UI_RUNTIMES) {
+    const hosts = plan.apps.filter((a) => a.app.runtime === rt);
+    if (!hosts.length) { problems.push(`no host app for ${rt} (apps/host-${rt}/xgen.app.json)`); continue; }
+    const served = new Set(hosts.flatMap((h) => hostedScreens(h.app, all).screens.map((s) => s.id)));
+    for (const s of all) if (portableTo(s.portable, rt) === true && !served.has(s.id)) problems.push(`${s.id}: portable to ${rt} but no ${rt} host serves it`);
+  }
+  return { name: "routes", what: "every screen menu leads to routes of its screen and names texts of the dictionary, a screen with nav has a menu, and the hosts serve every screen in every runtime", problems };
+}
diff --git a/xgen/check/src/rules/detectors.ts b/xgen/check/src/rules/detectors.ts
new file mode 100644
index 0000000..530eabf
--- /dev/null
+++ b/xgen/check/src/rules/detectors.ts
@@ -0,0 +1,99 @@
+// The shared detectors of the `rules` group. They read the common tree only (ir.ts), so one detector covers every runtime (Svelte, React, Vue, Solid, templ, Twig, Jinja2, Latte).
+import type { IrAttr, IrFile, IrNode } from "./ir";
+
+export const DETECTORS = ["block-root", "raw-html", "dynamic-tag", "raw-native-tag", "reactive-aria", "literal-text"] as const;
+export type Detector = (typeof DETECTORS)[number];
+export interface Finding { detector: Detector; line: number; message: string }
+
+/** what a detector needs to know about the file besides its tree */
+export interface FileContext {
+  /** the file is in the blockRoot part of the composition (a block, a screen, a template, the app frame) */
+  blockRoot: boolean;
+  /** does the component of this name (as imported by the file) open on Block? undefined when it cannot be resolved */
+  rootsOnBlock: (name: string) => boolean | undefined;
+}
+
+/** naming attributes: not state, may come from an expression (rule 03 §4) */
+const ARIA_NAMING = new Set(["aria-label", "aria-labelledby", "aria-describedby", "aria-haspopup", "aria-roledescription", "aria-description", "aria-placeholder", "aria-valuetext"]);
+/** attributes and props that carry visible or announced text (rule 06) */
+const TEXT_NAMES = new Set(["label", "title", "text", "description", "placeholder", "hint", "caption", "heading", "subtitle", "message", "summary", "tooltip", "alt", "note", "lead", "legend", "eyebrow", "aria-label", "aria-description", "aria-placeholder", "aria-roledescription", "aria-valuetext"]);
+const LETTER = /\p{L}/u;
+const BLOCK = "Block";
+
+/** AriaLabel -> aria-label, ariaLabel -> aria-label, label -> label */
+export const kebab = (name: string): string => name.replace(/^[A-Z]/, (c) => c.toLowerCase()).replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+
+/** every node of the tree, detached markup included */
+export function* walk(nodes: IrNode[]): Generator<IrNode> {
+  for (const n of nodes) {
+    yield n;
+    if ("children" in n) yield* walk(n.children);
+  }
+}
+
+/** the first rendered node of a file: groups are looked through, detached markup is skipped */
+export function rootOf(nodes: IrNode[]): IrNode | undefined {
+  for (const n of nodes) {
+    if (n.kind === "detached") continue;
+    if (n.kind === "group" || n.kind === "choice" || n.kind === "loop") { const r = rootOf(n.children); if (r) return r; continue; }
+    return n;
+  }
+  return undefined;
+}
+
+const attrsOf = (n: IrNode): IrAttr[] => ("attrs" in n ? n.attrs : []);
+const textValue = (s: string): boolean => LETTER.test(s) && !/^[a-z0-9]+([.-][a-z0-9]+)*$/.test(s.trim());
+const where = (n: IrNode): string => ("name" in n ? `<${n.name}>` : n.kind);
+
+/**
+ * Block count of rule 01: the Blocks of one render path. Exclusive branches (choice) are alternatives, so a path takes the branch
+ * with the most Blocks; everything else (siblings, groups, detached markup such as a second component or a snippet) adds up.
+ * A Block inside a loop or inside another Block is reported on its own and not counted on the path.
+ */
+function blockCount(nodes: IrNode[]): Finding[] {
+  const out: Finding[] = [];
+  const path = (list: IrNode[], inLoop: boolean, inBlock: boolean): IrNode[] => {
+    const acc: IrNode[] = [];
+    for (const n of list) {
+      if (n.kind === "component" && n.name === BLOCK) {
+        if (inBlock) out.push({ detector: "block-root", line: n.line, message: "Block nested inside Block" });
+        else if (inLoop) out.push({ detector: "block-root", line: n.line, message: "Block inside a loop renders one Block per item; extract the item into its own file" });
+        else acc.push(n);
+        path(n.children, inLoop, true);
+      } else if (n.kind === "choice") {
+        let best: IrNode[] = [];
+        for (const b of n.branches) { const x = path(b, inLoop, inBlock); if (x.length > best.length) best = x; }
+        acc.push(...best);
+      } else if (n.kind === "loop") path(n.children, true, inBlock);
+      else if ("children" in n) acc.push(...path(n.children, inLoop, inBlock));
+    }
+    return acc;
+  };
+  const top = path(nodes, false, false);
+  if (top.length > 1) out.unshift({ detector: "block-root", line: top[1]!.line, message: `${top.length} Block in one render path (exclusive if/else branches may each have one); extract the second into its own file` });
+  return out;
+}
+
+export function detect(file: IrFile, ctx: FileContext): Finding[] {
+  const out: Finding[] = [];
+  const all = [...walk(file.nodes)];
+  // block-root
+  const root = rootOf(file.nodes);
+  const blockLike = (n: IrNode | undefined): boolean => !!n && n.kind === "component" && (n.name === BLOCK || ctx.rootsOnBlock(n.name) === true);
+  if (ctx.blockRoot && root && !blockLike(root)) out.push({ detector: "block-root", line: root.line, message: `root is ${where(root)}, not Block` });
+  // any other file (a composite, a part) may open on one Block with a semantic tag: no finding for its root (rule 01 §2)
+  out.push(...blockCount(file.nodes));
+  for (const n of all) {
+    if (n.kind === "raw-html") out.push({ detector: "raw-html", line: n.line, message: `raw HTML injection (${n.name})` });
+    if (n.kind === "dynamic") out.push({ detector: "dynamic-tag", line: n.line, message: `dynamic tag ${n.name}` });
+    if (n.kind === "element") out.push({ detector: "raw-native-tag", line: n.line, message: `raw <${n.name}>` });
+    for (const a of attrsOf(n)) {
+      const name = kebab(a.name);
+      if (name.startsWith("aria-") && !a.static && !ARIA_NAMING.has(name)) out.push({ detector: "reactive-aria", line: a.line, message: `${a.name} on ${where(n)} is an expression; pass the state through a primitive prop` });
+      if (TEXT_NAMES.has(name) && a.strings.some(textValue)) out.push({ detector: "literal-text", line: a.line, message: `literal text in ${a.name}: ${JSON.stringify(a.strings.find(textValue)!.slice(0, 40))}` });
+    }
+    if (n.kind === "text" && LETTER.test(n.text)) out.push({ detector: "literal-text", line: n.line, message: `text node ${JSON.stringify(n.text.trim().slice(0, 40))}` });
+    if (n.kind === "expr" && n.strings.some((s) => LETTER.test(s))) out.push({ detector: "literal-text", line: n.line, message: `literal text in an expression: ${JSON.stringify(n.strings.find((s) => LETTER.test(s))!.slice(0, 40))}` });
+  }
+  return out;
+}
diff --git a/xgen/check/src/rules/index.ts b/xgen/check/src/rules/index.ts
new file mode 100644
index 0000000..ad1bc08
--- /dev/null
+++ b/xgen/check/src/rules/index.ts
@@ -0,0 +1,172 @@
+// `xgen check`, group `rules`: rules 01, 02, 03 and 06 (.cursor/rules) on the composition zone of every package that declares zones.
+// Zones come from the "ui8kit" field of each package.json (zones.ts); the kit zone is never scanned. An adapter per runtime turns a file
+// into the common tree (ir.ts) and the shared detectors (detectors.ts) report on it. Existing violations are counted per file in
+// rules/baselines/<package>.json: more fails, fewer asks for `bun run rules:baseline`. rules/fixtures/<runtime> proves every detector.
+import { existsSync, readdirSync, readFileSync, statSync, writeFileSync, mkdirSync } from "node:fs";
+import { basename, dirname, extname, join, relative, resolve } from "node:path";
+import { result, type CheckResult } from "../result";
+import { detect, DETECTORS, rootOf, type Detector, type Finding } from "./detectors";
+import type { IrFile, Runtime } from "./ir";
+import { reactToIr } from "./react";
+import { svelteToIr } from "./svelte";
+import { vueToIr } from "./vue";
+import { templToIr } from "./templ";
+import { solidToIr } from "./solid";
+import { jinjaToIr, twigToIr } from "./twig";
+import { latteToIr } from "./latte";
+import { inBlockRoot, inKit, readZones, ZONES_FILE, zonesText, type Zone } from "./zones";
+
+export { DETECTORS } from "./detectors";
+export const EXT: Record<Runtime, string> = { svelte: ".svelte", react: ".tsx", vue: ".vue", templ: ".templ", solid: ".tsx", twig: ".html.twig", jinja2: ".html.j2", latte: ".latte" };
+const ADAPTER: Record<Runtime, (src: string, file?: string) => IrFile> = { svelte: svelteToIr, react: reactToIr, vue: vueToIr, templ: templToIr, solid: solidToIr, twig: twigToIr, jinja2: jinjaToIr, latte: latteToIr };
+export const toIr = (runtime: Runtime, src: string, file = ""): IrFile => ADAPTER[runtime](src, file);
+const pascal = (file: string): string => basename(file).replace(/\.html\.(twig|j2)$/, "").replace(/\.[^.]*$/, "").split(/[-_.]/).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+
+type Counts = Record<string, Record<string, number>>;
+export interface PackageReport { zone: Zone; files: number; findings: Map<string, Finding[]>; errors: string[] }
+
+function filesUnder(abs: string, ext: string): string[] {
+  if (!existsSync(abs)) return [];
+  if (!statSync(abs).isDirectory()) return abs.endsWith(ext) ? [abs] : [];
+  return readdirSync(abs).sort().flatMap((n) => (n === "node_modules" ? [] : filesUnder(join(abs, n), ext)));
+}
+
+/** resolves a component name used by a file to the file that defines it, and tells whether that file opens on Block */
+function makeResolver(repo: string, zones: Zone[]) {
+  const ir = new Map<string, IrFile>();
+  const irOf = (abs: string, rt: Runtime): IrFile => { let x = ir.get(abs); if (!x) { x = toIr(rt, readFileSync(abs, "utf8"), abs); ir.set(abs, x); } return x; };
+  const composite = new Set<string>();
+  const byName = new Map<string, string>(); // `${runtime}:${Name}` -> file of a composite of a ui package
+  for (const z of zones) for (const c of z.composition) for (const f of filesUnder(join(repo, z.dir, c), EXT[z.runtime])) {
+    composite.add(f);
+    if (!z.generated || !z.dir.startsWith("packages/")) continue;
+    const names = z.runtime === "react" || z.runtime === "solid" ? [...readFileSync(f, "utf8").matchAll(/export function ([A-Z]\w*)/g)].map((m) => m[1]!) : z.runtime === "templ" ? [...readFileSync(f, "utf8").matchAll(/^templ ([A-Z]\w*)\(/gm)].map((m) => m[1]!) : [pascal(f)];
+    for (const n of names) byName.set(`${z.runtime}:${n}`, f);
+  }
+  const memo = new Map<string, boolean>();
+  const opensOnBlock = (abs: string, rt: Runtime, stack: Set<string>): boolean => {
+    if (memo.has(abs)) return memo.get(abs)!;
+    if (stack.has(abs) || !composite.has(abs)) return false;
+    stack.add(abs);
+    const file = irOf(abs, rt);
+    const root = rootOfFile(file);
+    const ok = !!root && root.kind === "component" && (root.name === "Block" || resolveIn(abs, rt, file, root.name, stack) === true);
+    memo.set(abs, ok);
+    return ok;
+  };
+  const resolveIn = (from: string, rt: Runtime, file: IrFile, name: string, stack: Set<string>): boolean | undefined => {
+    const spec = file.imports.get(name);
+    let target: string | undefined;
+    if (spec?.startsWith(".")) {
+      const base = resolve(dirname(from), spec);
+      target = [base, base + EXT[rt]].find((p) => existsSync(p) && statSync(p).isFile());
+    } else if (spec) target = byName.get(`${rt}:${name}`);
+    else if (rt === "react" || rt === "solid" || rt === "templ") target = byName.get(`${rt}:${name}`);
+    return target ? opensOnBlock(target, rt, stack) : undefined;
+  };
+  return { irOf, rootsOnBlock: (from: string, rt: Runtime, file: IrFile) => (name: string) => resolveIn(from, rt, file, name, new Set([from])) };
+}
+
+const rootOfFile = (f: IrFile) => rootOf(f.nodes);
+
+export function scanRepo(repo: string): PackageReport[] {
+  const zones = readZones(repo).packages;
+  const r = makeResolver(repo, zones);
+  return zones.map((zone) => {
+    const findings = new Map<string, Finding[]>();
+    const errors: string[] = [];
+    let files = 0;
+    for (const c of zone.composition) {
+      if (!existsSync(join(repo, zone.dir, c))) { errors.push(`${zone.dir}: composition path ${c} does not exist`); continue; }
+      for (const abs of filesUnder(join(repo, zone.dir, c), EXT[zone.runtime])) {
+        const rel = relative(join(repo, zone.dir), abs);
+        if (inKit(zone, rel)) continue;
+        files++;
+        const ir = r.irOf(abs, zone.runtime);
+        if (ir.error) errors.push(`${zone.dir}/${rel}: parse error ${ir.error}`);
+        const f = detect(ir, { blockRoot: inBlockRoot(zone, rel), rootsOnBlock: r.rootsOnBlock(abs, zone.runtime, ir) });
+        if (f.length) findings.set(rel, f);
+      }
+    }
+    return { zone, files, findings, errors };
+  });
+}
+
+export const baselineFile = (zone: Zone): string => `rules/baselines/${zone.name.replace(/^@[^/]+\//, "")}.json`;
+export function countsOf(rep: PackageReport): Counts {
+  const c: Counts = Object.fromEntries(DETECTORS.map((d) => [d, {}]));
+  for (const [file, list] of [...rep.findings].sort(([a], [b]) => a.localeCompare(b))) for (const f of list) c[f.detector]![file] = (c[f.detector]![file] ?? 0) + 1;
+  return c;
+}
+const total = (c: Record<string, number>): number => Object.values(c).reduce((a, b) => a + b, 0);
+
+export function writeBaselines(repo: string): string[] {
+  mkdirSync(join(repo, "rules", "baselines"), { recursive: true });
+  writeFileSync(join(repo, ZONES_FILE), zonesText(repo));
+  return scanRepo(repo).map((rep) => {
+    const counts = countsOf(rep);
+    const doc = { $comment: "Recorded violations of the rules group (xgen check) in the composition zone, per detector and file. New ones fail; regenerate with: bun run rules:baseline", package: rep.zone.dir, totals: Object.fromEntries(DETECTORS.map((d) => [d, total(counts[d]!)])), counts };
+    writeFileSync(join(repo, baselineFile(rep.zone)), JSON.stringify(doc, null, 2) + "\n");
+    return `${baselineFile(rep.zone)}: ${DETECTORS.map((d) => `${d} ${doc.totals[d]}`).join(", ")}`;
+  });
+}
+
+/** named cases of a detector: rules/fixtures/<runtime>/<detector>.<case>.<ok|bad>.<ext>; a violating case must report this message, and only it */
+export const FIXTURE_CASES: Partial<Record<Detector, Record<string, string>>> = {
+  "block-root": { branches: "", siblings: "Block in one render path", nested: "Block nested inside Block", loop: "Block inside a loop" },
+};
+
+/** every detector on one violating and one clean fixture per runtime, plus the named cases of FIXTURE_CASES */
+export function selfTest(repo: string): string[] {
+  const problems: string[] = [];
+  for (const rt of ["svelte", "react", "vue", "templ", "solid", "twig", "jinja2", "latte"] as Runtime[]) for (const d of DETECTORS) {
+    const named = Object.entries(FIXTURE_CASES[d] ?? {});
+    const files: [string, "ok" | "bad", string | undefined][] = [[`${d}.bad`, "bad", undefined], [`${d}.ok`, "ok", undefined], ...named.map(([c, msg]): [string, "ok" | "bad", string] => [`${d}.${c}.${msg ? "bad" : "ok"}`, msg ? "bad" : "ok", msg])];
+    for (const [name, kind, msg] of files) {
+      const rel = `rules/fixtures/${rt}/${name}${EXT[rt]}`;
+      const abs = join(repo, rel);
+      if (!existsSync(abs)) { problems.push(`${rel}: missing self-test fixture`); continue; }
+      const ir = toIr(rt, readFileSync(abs, "utf8"), abs);
+      if (ir.error) { problems.push(`${rel}: parse error ${ir.error}`); continue; }
+      const found = detect(ir, { blockRoot: true, rootsOnBlock: () => undefined }).filter((f) => f.detector === d);
+      if (kind === "bad" && found.length === 0) problems.push(`${rel}: detector ${d} found nothing in its violating fixture`);
+      if (kind === "bad" && msg && !found.every((f) => f.message.includes(msg))) problems.push(`${rel}: expected only "${msg}", got ${found.map((f) => JSON.stringify(f.message)).join(", ")}`);
+      if (kind === "ok" && found.length > 0) problems.push(`${rel}: detector ${d} reports ${found.length} in its clean fixture: ${found.map((f) => f.message).join("; ")}`);
+    }
+  }
+  return problems;
+}
+
+/** new findings and stale baseline entries of the scanned packages (all of them, or the one whose dir is `only`) */
+export function gate(repo: string, only?: string): { problems: string[]; files: number; recorded: number } {
+  const problems: string[] = [];
+  let files = 0, recorded = 0;
+  for (const rep of scanRepo(repo)) {
+    if (only && rep.zone.dir !== only) continue;
+    files += rep.files;
+    problems.push(...rep.errors);
+    const path = join(repo, baselineFile(rep.zone));
+    const base: Counts = existsSync(path) ? (JSON.parse(readFileSync(path, "utf8")) as { counts: Counts }).counts : {};
+    const now = countsOf(rep);
+    for (const d of DETECTORS as readonly Detector[]) {
+      const b = base[d] ?? {}, c = now[d]!;
+      recorded += total(b);
+      for (const file of new Set([...Object.keys(b), ...Object.keys(c)])) {
+        const have = c[file] ?? 0, allowed = b[file] ?? 0;
+        if (have > allowed) for (const f of rep.findings.get(file)!.filter((x) => x.detector === d)) problems.push(`${rep.zone.dir}/${file}:${f.line}  ${d}  ${f.message}${allowed ? ` (${have} found, ${allowed} recorded)` : ""}`);
+        if (have < allowed) problems.push(`${baselineFile(rep.zone)}: ${d} in ${file} went down from ${allowed} to ${have}; record it: bun run rules:baseline`);
+      }
+    }
+  }
+  return { problems, files, recorded };
+}
+
+export function checkRules(repo: string): CheckResult {
+  const problems: string[] = [];
+  const zonesPath = join(repo, ZONES_FILE);
+  if (!existsSync(zonesPath) || readFileSync(zonesPath, "utf8") !== zonesText(repo)) problems.push(`${ZONES_FILE}: differs from the "ui8kit" fields of the package.json files; run: bun run rules:baseline`);
+  problems.push(...selfTest(repo));
+  const g = gate(repo);
+  problems.push(...g.problems);
+  return result("rules", `rules 01/02/03/06 on the composition zone (${g.files} files, kit never scanned): block-root, raw-html, dynamic-tag, raw-native-tag, reactive-aria, literal-text; ${g.recorded} recorded in rules/baselines, none new; self-test fixtures for svelte, react, vue, templ, solid, twig, jinja2, latte`, problems);
+}
diff --git a/xgen/check/src/rules/ir.ts b/xgen/check/src/rules/ir.ts
new file mode 100644
index 0000000..82ee25c
--- /dev/null
+++ b/xgen/check/src/rules/ir.ts
@@ -0,0 +1,85 @@
+// The common tree of the `rules` group: every runtime adapter (svelte.ts, react.ts, vue.ts, templ.ts, solid.ts, twig.ts: twig, jinja2 and latte) turns one composition file into it,
+// and the detectors (detectors.ts) read only this tree, never a runtime AST.
+import ts from "typescript";
+
+export type Runtime = "svelte" | "react" | "vue" | "templ" | "solid" | "twig" | "jinja2" | "latte";
+
+/** an attribute or a prop: static (a literal string or a bare flag) or an expression with the string literals it can evaluate to */
+export interface IrAttr { name: string; line: number; static: boolean; value?: string; strings: string[] }
+
+export type IrNode =
+  /** a lowercase host element: <div>, <svg> */
+  | { kind: "element"; name: string; line: number; attrs: IrAttr[]; children: IrNode[] }
+  /** a component: <Block>, <Text> */
+  | { kind: "component"; name: string; line: number; attrs: IrAttr[]; children: IrNode[] }
+  /** a host tag chosen from a value: svelte:element, <component :is>, <Tag/> of a variable, createElement(tag) */
+  | { kind: "dynamic"; name: string; line: number; attrs: IrAttr[]; children: IrNode[] }
+  /** raw HTML injection: {@html}, v-html, dangerouslySetInnerHTML */
+  | { kind: "raw-html"; name: string; line: number }
+  /** a text node */
+  | { kind: "text"; text: string; line: number }
+  /** a template expression with the string literals it can render */
+  | { kind: "expr"; strings: string[]; line: number }
+  /** control flow, fragments, slots: transparent for the root, its children are rendered in place */
+  | { kind: "group"; line: number; children: IrNode[] }
+  /** mutually exclusive branches ({#if}/{:else}, a ternary or `&&`, early returns, v-if/v-else): `branches` holds each branch,
+   *  `children` all of them in source order (so a walk still sees every node); an absent branch is an empty list */
+  | { kind: "choice"; line: number; children: IrNode[]; branches: IrNode[][] }
+  /** markup repeated per item ({#each}, .map, v-for) */
+  | { kind: "loop"; line: number; children: IrNode[] }
+  /** content rendered from a slot or a snippet: unknown markup, ends the search for a root */
+  | { kind: "render"; line: number }
+  /** markup that is declared but not rendered at its place (a snippet body, a render function): scanned, never a root */
+  | { kind: "detached"; line: number; children: IrNode[] };
+
+export interface IrFile {
+  runtime: Runtime;
+  /** the rendered top level of the file, in order */
+  nodes: IrNode[];
+  /** local component name -> import specifier */
+  imports: Map<string, string>;
+  /** parse error, when the adapter could not read the file */
+  error?: string;
+}
+
+/** line of an offset in a source (line starts are computed once per source) */
+let lastSrc = "", starts: number[] = [];
+export function lineOf(src: string, pos: number): number {
+  if (src !== lastSrc) { lastSrc = src; starts = [0]; for (let i = 0; i < src.length; i++) if (src.charCodeAt(i) === 10) starts.push(i + 1); }
+  let lo = 0, hi = starts.length - 1;
+  while (lo < hi) { const mid = (lo + hi + 1) >> 1; if (starts[mid]! <= pos) lo = mid; else hi = mid - 1; }
+  return lo + 1;
+}
+
+/** the string literals an expression can evaluate to (results only: not call arguments, not comparison operands, not keys) */
+export function resultStringsOf(node: ts.Node): string[] {
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) return [node.text];
+  if (ts.isTemplateExpression(node)) return [[node.head.text, ...node.templateSpans.map((s) => s.literal.text)].join(" ")];
+  if (ts.isParenthesizedExpression(node) || ts.isAsExpression(node) || ts.isNonNullExpression(node) || ts.isSatisfiesExpression(node)) return resultStringsOf(node.expression);
+  if (ts.isConditionalExpression(node)) return [...resultStringsOf(node.whenTrue), ...resultStringsOf(node.whenFalse)];
+  if (ts.isBinaryExpression(node)) {
+    const k = node.operatorToken.kind;
+    if (k === ts.SyntaxKind.BarBarToken || k === ts.SyntaxKind.QuestionQuestionToken) return [...resultStringsOf(node.left), ...resultStringsOf(node.right)];
+    if (k === ts.SyntaxKind.AmpersandAmpersandToken) return resultStringsOf(node.right);
+    if (k === ts.SyntaxKind.PlusToken) return [...resultStringsOf(node.left), ...resultStringsOf(node.right)];
+  }
+  return [];
+}
+
+/** parse one expression of a template (Svelte or Vue) and return its result strings */
+export function exprStrings(code: string): string[] {
+  if (!/["'`]/.test(code)) return [];
+  const sf = ts.createSourceFile("x.ts", `(${code});`, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+  const st = sf.statements[0];
+  return st && ts.isExpressionStatement(st) ? resultStringsOf(st.expression) : [];
+}
+
+/** a static attribute value */
+export const staticAttr = (name: string, line: number, value?: string): IrAttr => ({ name, line, static: true, value, strings: value === undefined ? [] : [value] });
+/** an expression attribute value */
+export const exprAttr = (name: string, line: number, code: string): IrAttr => ({ name, line, static: LITERAL.test(code.trim()), strings: exprStrings(code) });
+/** an expression that is a constant: {false}, {"true"}, {2} */
+const LITERAL = /^(true|false|null|-?\d+(\.\d+)?|"[^"]*"|'[^']*'|`[^`$]*`)$/;
+
+/** exclusive branches as one node */
+export const choice = (line: number, branches: IrNode[][]): IrNode => ({ kind: "choice", line, branches, children: branches.flat() });
diff --git a/xgen/check/src/rules/latte.ts b/xgen/check/src/rules/latte.ts
new file mode 100644
index 0000000..a8c2b88
--- /dev/null
+++ b/xgen/check/src/rules/latte.ts
@@ -0,0 +1,66 @@
+// The Latte adapter of the rules group: a .latte file is rewritten to the Twig form (outputs, control flow, captures,
+// comments, includes; braces that do not open a tag, {l}/{r} and syntax off stay text), then read by the Twig adapter,
+// which also knows the Latte n: attributes (n:tag, n:if, n:foreach, n:inner-foreach). Lines are kept.
+import type { IrFile } from "./ir";
+import { templateToIr } from "./twig";
+
+/** Latte reads as Twig once its tags are rewritten ({=e} and {$x} outputs, {if}/{/if}, {foreach}, {capture $x}, {var}, {* *}); lines are kept */
+export const latteToIr = (src: string, file = ""): IrFile => templateToIr(latteAsTwig(src), file, "latte");
+
+const LATTE_END: Record<string, string> = { if: "endif", foreach: "endfor", for: "endfor", capture: "endset", embed: "endembed", define: "endmacro", block: "endblock" };
+
+export function latteAsTwig(s: string): string {
+  let out = "";
+  let i = 0;
+  while (i < s.length) {
+    const c = s[i]!;
+    const off = c === "<" ? /^<([\w-]+)\b[^>]*\sn:syntax="off"[^>]*>/.exec(s.slice(i, i + 2000)) : null;
+    if (off) {
+      const close = s.indexOf(`</${off[1]}>`, i + off[0].length);
+      const end = close < 0 ? s.length : close;
+      out += off[0].replace(/\sn:syntax="off"/, "") + s.slice(i + off[0].length, end);
+      i = end; continue;
+    }
+    // Latte opens a tag only on a brace followed by a name, a variable, `=`, `/` or `*` (JSON and `{ x }` are text)
+    if (c !== "{" || !/[A-Za-z_$=/*]/.test(s[i + 1] ?? " ")) { out += c; i++; continue; }
+    if (s.startsWith("{l}", i) || s.startsWith("{r}", i)) { out += s[i + 1] === "l" ? "{" : "}"; i += 3; continue; }
+    // syntax off: the content is text up to {/syntax}; n:syntax="off": up to the close of that element
+    if (/^\{syntax\s+off\}/.test(s.slice(i, i + 20))) {
+      const open = s.indexOf("}", i) + 1, e = s.indexOf("{/syntax}", open);
+      out += s.slice(open, e < 0 ? s.length : e); i = e < 0 ? s.length : e + 9; continue;
+    }
+    if (s[i + 1] === "*") { const e = s.indexOf("*}", i + 2); const end = e < 0 ? s.length : e + 2; out += `{#${s.slice(i + 2, end - 2)}#}`; i = end; continue; }
+    // the matching } outside strings and brackets
+    let k = i + 1, depth = 0, q = "";
+    for (; k < s.length; k++) {
+      const ch = s[k]!;
+      if (q) { if (ch === "\\") { k++; continue; } if (ch === q) q = ""; continue; }
+      if (ch === "'" || ch === '"') { q = ch; continue; }
+      if (depth === 0 && ch === "}") break;
+      if ("([{".includes(ch)) depth++;
+      else if (")]}".includes(ch)) depth--;
+    }
+    const body = s.slice(i + 1, k);
+    i = k + 1;
+    if (body.startsWith("=")) { out += `{{ ${body.slice(1)} }}`; continue; }
+    if (body.startsWith("$")) { out += `{{ ${body} }}`; continue; }
+    if (body.startsWith("/")) { const kw = body.slice(1).trim().split(/\s+/)[0]!; out += `{% ${LATTE_END[kw] ?? `end${kw}`} %}`; continue; }
+    const [kw = "", ...rest] = body.split(/\s+/);
+    const arg = body.slice(kw.length).trim();
+    void rest;
+    switch (kw) {
+      case "foreach": out += `{% for ${arg} %}`; break;
+      case "capture": out += `{% set ${arg.replace(/^\$/, "")} %}`; break;
+      case "var": case "default": out += `{% set ${arg.replace(/^\$/, "")} %}`; break;
+      case "include": case "embed": {
+        const m = /^('[^']*'|"[^"]*")\s*(?:,\s*([\s\S]*))?$/.exec(arg);
+        const vars = m?.[2]?.trim();
+        out += m ? `{% ${kw} ${m[1]}${vars ? ` with ${vars.startsWith("[") ? vars : `[${vars}]`}` : ""} %}` : `{% ${kw} %}`;
+        break;
+      }
+      case "define": out += `{% macro ${arg} %}`; break;
+      default: out += `{% ${body} %}`;
+    }
+  }
+  return out;
+}
diff --git a/xgen/check/src/rules/react.ts b/xgen/check/src/rules/react.ts
new file mode 100644
index 0000000..48fa9cd
--- /dev/null
+++ b/xgen/check/src/rules/react.ts
@@ -0,0 +1,155 @@
+// React (TSX) adapter of the `rules` group: the TypeScript parser -> the common tree.
+// The rendered top level is the returned JSX of the first exported PascalCase function; every other JSX of the file is scanned as detached markup.
+import ts from "typescript";
+import { choice, lineOf, resultStringsOf, type IrAttr, type IrFile, type IrNode } from "./ir";
+
+export function reactToIr(src: string): IrFile {
+  return jsxToIr(src, "react");
+}
+
+/** the TSX adapter of React and Solid; Solid adds its control flow (Show, Switch/Match: choices; For, Index: loops; Dynamic: a dynamic tag) */
+export function jsxToIr(src: string, runtime: "react" | "solid"): IrFile {
+  const sf = ts.createSourceFile("x.tsx", src, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+  const line = (n: ts.Node): number => lineOf(src, n.getStart(sf));
+  const imports = new Map<string, string>();
+  /** names bound to a value that is not a component (const Tag = cond ? "a" : "span"): a JSX tag of that name is a dynamic tag */
+  const valueVars = new Set<string>();
+  for (const st of sf.statements) if (ts.isImportDeclaration(st) && st.importClause && ts.isStringLiteral(st.moduleSpecifier)) {
+    const from = st.moduleSpecifier.text; const c = st.importClause;
+    if (c.name) imports.set(c.name.text, from);
+    if (c.namedBindings && ts.isNamedImports(c.namedBindings)) for (const e of c.namedBindings.elements) imports.set(e.name.text, from);
+  }
+  (function vars(n: ts.Node): void {
+    if (ts.isVariableDeclaration(n) && ts.isIdentifier(n.name) && n.initializer && !ts.isArrowFunction(n.initializer) && !ts.isFunctionExpression(n.initializer)) {
+      const i = n.initializer;
+      const call = ts.isCallExpression(i) ? i.expression.getText(sf) : "";
+      if (!/^(memo|forwardRef|lazy|React\.)/.test(call)) valueVars.add(n.name.text);
+    }
+    ts.forEachChild(n, vars);
+  })(sf);
+  const seen = new Set<ts.Node>();
+
+  const attrs = (els: ts.JsxAttributes): IrAttr[] => els.properties.flatMap((p): IrAttr[] => {
+    if (!ts.isJsxAttribute(p)) return [];
+    const name = p.name.getText(sf);
+    const i = p.initializer;
+    if (!i) return [{ name, line: line(p), static: true, strings: [] }];
+    if (ts.isStringLiteral(i)) return [{ name, line: line(p), static: true, value: i.text, strings: [i.text] }];
+    if (ts.isJsxExpression(i) && i.expression) {
+      const e = i.expression;
+      if (ts.isStringLiteral(e) || ts.isNoSubstitutionTemplateLiteral(e) || ts.isNumericLiteral(e) || e.kind === ts.SyntaxKind.TrueKeyword || e.kind === ts.SyntaxKind.FalseKeyword) return [{ name, line: line(p), static: true, value: e.getText(sf), strings: resultStringsOf(e) }];
+      return [{ name, line: line(p), static: false, strings: resultStringsOf(e) }];
+    }
+    return [{ name, line: line(p), static: false, strings: [] }];
+  });
+  const tagNode = (tag: ts.JsxTagNameExpression, at: ts.Node, a: ts.JsxAttributes, children: IrNode[]): IrNode => {
+    const name = tag.getText(sf);
+    const list = attrs(a);
+    const raw: IrNode[] = list.some((x) => x.name === "dangerouslySetInnerHTML") ? [{ kind: "raw-html", name: "dangerouslySetInnerHTML", line: line(at) }] : [];
+    const kids = [...raw, ...children];
+    if (/^[a-z]/.test(name) && !name.includes(".")) return { kind: "element", name, line: line(at), attrs: list, children: kids };
+    if (ts.isIdentifier(tag) && valueVars.has(name) && !imports.has(name)) return { kind: "dynamic", name, line: line(at), attrs: list, children: kids };
+    return { kind: "component", name, line: line(at), attrs: list, children: kids };
+  };
+  /** JSX reachable from an expression without crossing into another JSX element; callbacks (map) stay in place */
+  function fromExpr(e: ts.Node): IrNode[] {
+    if (ts.isJsxElement(e) || ts.isJsxSelfClosingElement(e) || ts.isJsxFragment(e)) return jsx(e);
+    if (ts.isCallExpression(e) && /(^|\.)createElement$/.test(e.expression.getText(sf))) {
+      seen.add(e);
+      const a = e.arguments[0];
+      const kids = e.arguments.slice(2).flatMap(fromExpr);
+      if (a && ts.isStringLiteral(a)) return [{ kind: "element", name: a.text, line: line(e), attrs: [], children: kids }];
+      if (a && ts.isIdentifier(a) && /^[A-Z]/.test(a.text) && !valueVars.has(a.text)) return [{ kind: "component", name: a.text, line: line(e), attrs: [], children: kids }];
+      return [{ kind: "dynamic", name: a ? a.getText(sf) : "?", line: line(e), attrs: [], children: kids }];
+    }
+    // exclusive alternatives: a ? x : y, a && x, a || x, a ?? x
+    const alt = (branches: IrNode[][]): IrNode[] => (branches.some((b) => b.length) ? [choice(line(e), branches)] : []);
+    if (ts.isConditionalExpression(e)) return [...fromExpr(e.condition), ...alt([fromExpr(e.whenTrue), fromExpr(e.whenFalse)])];
+    if (ts.isBinaryExpression(e)) {
+      const k = e.operatorToken.kind;
+      if (k === ts.SyntaxKind.AmpersandAmpersandToken) return [...fromExpr(e.left), ...alt([fromExpr(e.right), []])];
+      if (k === ts.SyntaxKind.BarBarToken || k === ts.SyntaxKind.QuestionQuestionToken) return alt([fromExpr(e.left), fromExpr(e.right)]);
+    }
+    // markup per item: xs.map(...), xs.flatMap(...), Array.from(xs, ...)
+    if (ts.isCallExpression(e) && /(\.(map|flatMap)|^Array\.from)$/.test(e.expression.getText(sf))) {
+      const inner = [...fromExpr(e.expression), ...e.arguments.flatMap(fromExpr)];
+      return inner.length ? [{ kind: "loop", line: line(e), children: inner }] : [];
+    }
+    const out: IrNode[] = [];
+    ts.forEachChild(e, (c) => { out.push(...fromExpr(c)); });
+    return out;
+  }
+  function children(list: ts.NodeArray<ts.JsxChild>): IrNode[] {
+    return list.flatMap((c): IrNode[] => {
+      if (ts.isJsxText(c)) return c.text.trim() ? [{ kind: "text", text: c.text, line: line(c) }] : [];
+      if (ts.isJsxExpression(c)) {
+        if (!c.expression) return [];
+        const strings = resultStringsOf(c.expression);
+        const inner = fromExpr(c.expression);
+        if ((ts.isIdentifier(c.expression) && c.expression.text === "children") || (runtime === "solid" && /^(local|props)\.children$/.test(c.expression.getText(sf)))) return [{ kind: "render", line: line(c) }];
+        return [...(strings.length ? [{ kind: "expr" as const, strings, line: line(c) }] : []), ...(inner.length ? [{ kind: "group" as const, line: line(c), children: inner }] : [{ kind: "render" as const, line: line(c) }])];
+      }
+      return jsx(c);
+    });
+  }
+  const fromSolid = (name: string): boolean => runtime === "solid" && imports.get(name)?.startsWith("solid-js") === true;
+  /** the expression of a JSX attribute (`fallback={...}`, `when={...}`) */
+  const attrExpr = (a: ts.JsxAttributes, name: string): ts.Expression | undefined => {
+    for (const p of a.properties) if (ts.isJsxAttribute(p) && p.name.getText(sf) === name && p.initializer && ts.isJsxExpression(p.initializer)) return p.initializer.expression;
+    return undefined;
+  };
+  /** a Solid control-flow element as the common tree, or undefined for any other tag */
+  function solidFlow(n: ts.JsxElement | ts.JsxSelfClosingElement): IrNode[] | undefined {
+    const open = ts.isJsxElement(n) ? n.openingElement : n;
+    const name = open.tagName.getText(sf);
+    if (!fromSolid(name)) return undefined;
+    const kids = ts.isJsxElement(n) ? children(n.children) : [];
+    const fb = attrExpr(open.attributes, "fallback");
+    const fallback = fb ? fromExpr(fb) : [];
+    if (name === "Show") return [...(attrExpr(open.attributes, "when") ? fromExpr(attrExpr(open.attributes, "when")!) : []), choice(line(n), [kids, fallback])];
+    if (name === "Switch") {
+      const matches = ts.isJsxElement(n) ? n.children.filter((c): c is ts.JsxElement | ts.JsxSelfClosingElement => ts.isJsxElement(c) || ts.isJsxSelfClosingElement(c)) : [];
+      const branches = matches.map((m) => { seen.add(m); return ts.isJsxElement(m) ? children(m.children) : []; });
+      return [choice(line(n), [...branches, fallback])];
+    }
+    if (name === "Match") return [choice(line(n), [kids, []])];
+    if (name === "For" || name === "Index") return kids.length ? [{ kind: "loop", line: line(n), children: kids }] : [];
+    if (name === "Dynamic") return [{ kind: "dynamic", name, line: line(n), attrs: attrs(open.attributes), children: kids }];
+    return undefined;
+  }
+  function jsx(n: ts.Node): IrNode[] {
+    seen.add(n);
+    if (ts.isJsxElement(n) || ts.isJsxSelfClosingElement(n)) { const flow = solidFlow(n); if (flow) return flow; }
+    if (ts.isJsxFragment(n)) return [{ kind: "group", line: line(n), children: children(n.children) }];
+    if (ts.isJsxSelfClosingElement(n)) return [tagNode(n.tagName, n, n.attributes, [])];
+    if (ts.isJsxElement(n)) {
+      const t = n.openingElement.tagName.getText(sf);
+      if (t === "Fragment" || t === "React.Fragment") return [{ kind: "group", line: line(n), children: children(n.children) }];
+      return [tagNode(n.openingElement.tagName, n, n.openingElement.attributes, children(n.children))];
+    }
+    return [];
+  }
+  // the root: the returned JSX of the first exported PascalCase function
+  let rootNodes: IrNode[] = [];
+  const isExported = (s: ts.Statement): boolean => !!ts.getModifiers(s as ts.HasModifiers)?.some((m) => m.kind === ts.SyntaxKind.ExportKeyword);
+  for (const st of sf.statements) {
+    let body: ts.Node | undefined;
+    if (ts.isFunctionDeclaration(st) && st.name && /^[A-Z]/.test(st.name.text) && isExported(st)) body = st.body;
+    if (ts.isVariableStatement(st) && isExported(st)) for (const d of st.declarationList.declarations) if (ts.isIdentifier(d.name) && /^[A-Z]/.test(d.name.text) && d.initializer && (ts.isArrowFunction(d.initializer) || ts.isFunctionExpression(d.initializer))) body = d.initializer.body;
+    if (!body) continue;
+    const ret: ts.Node[] = [];
+    if (!ts.isBlock(body)) ret.push(body);
+    else (function find(n: ts.Node): void { if (ts.isReturnStatement(n) && n.expression) ret.push(n.expression); if (ts.isFunctionLike(n)) return; ts.forEachChild(n, find); })(body);
+    // several returns of the same component (early returns) are exclusive alternatives; the final return stays the root, as before
+    if (ret.length === 1) { rootNodes = fromExpr(ret[0]!); break; }
+    if (ret.length > 1) { const bs = [ret[ret.length - 1]!, ...ret.slice(0, -1)].map(fromExpr); rootNodes = bs.some((b) => b.length) ? [choice(line(ret[0]!), bs)] : []; break; }
+  }
+  // the rest of the JSX in the file
+  const detached: IrNode[] = [];
+  (function rest(n: ts.Node): void {
+    if (seen.has(n)) return;
+    if (ts.isJsxElement(n) || ts.isJsxSelfClosingElement(n) || ts.isJsxFragment(n) || (ts.isCallExpression(n) && /(^|\.)createElement$/.test(n.expression.getText(sf)))) { const x = fromExpr(n); if (x.length) detached.push({ kind: "detached", line: line(n), children: x }); return; }
+    ts.forEachChild(n, rest);
+  })(sf);
+  return { runtime, nodes: [...rootNodes, ...detached], imports };
+}
diff --git a/xgen/check/src/rules/solid.ts b/xgen/check/src/rules/solid.ts
new file mode 100644
index 0000000..3c2e76f
--- /dev/null
+++ b/xgen/check/src/rules/solid.ts
@@ -0,0 +1,6 @@
+// Solid (TSX) adapter of the `rules` group: the React adapter plus Solid control flow. `<Show>`, `<Switch>`/`<Match>` are choices,
+// `<For>`/`<Index>` loops, `<Dynamic>` a dynamic tag, `{local.children}` a render of the children (only when imported from solid-js).
+import { jsxToIr } from "./react";
+import type { IrFile } from "./ir";
+
+export const solidToIr = (src: string): IrFile => jsxToIr(src, "solid");
diff --git a/xgen/check/src/rules/svelte.ts b/xgen/check/src/rules/svelte.ts
new file mode 100644
index 0000000..5726d20
--- /dev/null
+++ b/xgen/check/src/rules/svelte.ts
@@ -0,0 +1,52 @@
+// Svelte 5 adapter of the `rules` group: svelte/compiler (modern AST) -> the common tree.
+import { parse } from "svelte/compiler";
+import { choice, exprAttr, lineOf, staticAttr, type IrAttr, type IrFile, type IrNode } from "./ir";
+
+type AnyNode = { type: string; start: number; end: number; name?: string; data?: string; [k: string]: unknown };
+type Frag = { nodes: AnyNode[] } | null | undefined;
+
+/** special elements that do not choose a host tag and render nothing in place */
+const SKIP = new Set(["SvelteWindow", "SvelteDocument", "SvelteBody", "SvelteHead", "SvelteOptions", "Comment", "ConstTag", "DebugTag", "AttachTag"]);
+
+export function svelteToIr(src: string): IrFile {
+  const imports = new Map<string, string>();
+  for (const m of src.matchAll(/import\s+([A-Z]\w*)\s+from\s+["']([^"']+)["']/g)) imports.set(m[1]!, m[2]!);
+  for (const m of src.matchAll(/import\s*\{([^}]*)\}\s*from\s*["']([^"']+)["']/g)) for (const n of m[1]!.split(",")) {
+    const name = n.replace(/^\s*type\s+/, "").split(/\s+as\s+/).pop()!.trim();
+    if (/^[A-Z]/.test(name)) imports.set(name, m[2]!);
+  }
+  let ast: { fragment: { nodes: AnyNode[] } };
+  try { ast = parse(src, { modern: true }) as unknown as typeof ast; } catch (e) { return { runtime: "svelte", nodes: [], imports, error: (e as Error).message.split("\n")[0] }; }
+  const line = (n: { start: number }): number => lineOf(src, n.start);
+  const code = (n: AnyNode): string => src.slice(n.start, n.end);
+
+  const attrs = (n: AnyNode): IrAttr[] => ((n.attributes as AnyNode[] | undefined) ?? []).flatMap((a): IrAttr[] => {
+    if (a.type !== "Attribute") return [];
+    const v = a.value as true | AnyNode | AnyNode[];
+    if (v === true) return [staticAttr(a.name!, line(a))];
+    const parts = Array.isArray(v) ? v : [v];
+    if (parts.every((p) => p.type === "Text")) return [staticAttr(a.name!, line(a), parts.map((p) => p.data).join(""))];
+    if (parts.length === 1) return [exprAttr(a.name!, line(a), code(parts[0]!.expression as AnyNode))];
+    const strings = parts.flatMap((p) => (p.type === "Text" ? [String(p.data)] : exprAttr("", 0, code(p.expression as AnyNode)).strings));
+    return [{ name: a.name!, line: line(a), static: false, strings }];
+  });
+  const frag = (f: Frag): IrNode[] => (f?.nodes ?? []).flatMap(conv);
+  function conv(n: AnyNode): IrNode[] {
+    if (SKIP.has(n.type)) return [];
+    switch (n.type) {
+      case "Text": return n.data!.trim() ? [{ kind: "text", text: n.data!, line: line(n) }] : [];
+      case "ExpressionTag": return [{ kind: "expr", strings: exprAttr("", 0, code(n.expression as AnyNode)).strings, line: line(n) }];
+      case "HtmlTag": return [{ kind: "raw-html", name: "{@html}", line: line(n) }];
+      case "RenderTag": return [{ kind: "render", line: line(n) }];
+      case "RegularElement": return [{ kind: "element", name: n.name!, line: line(n), attrs: attrs(n), children: frag(n.fragment as Frag) }];
+      case "Component": case "SvelteSelf": return [{ kind: "component", name: n.name!, line: line(n), attrs: attrs(n), children: frag(n.fragment as Frag) }];
+      case "SvelteElement": case "SvelteComponent": return [{ kind: "dynamic", name: n.name!, line: line(n), attrs: attrs(n), children: frag(n.fragment as Frag) }];
+      case "SnippetBlock": return [{ kind: "detached", line: line(n), children: frag(n.body as Frag) }];
+      case "IfBlock": return [choice(line(n), [frag(n.consequent as Frag), frag(n.alternate as Frag)])];
+      case "EachBlock": return [choice(line(n), [[{ kind: "loop", line: line(n), children: frag(n.body as Frag) }], frag(n.fallback as Frag)])];
+      case "AwaitBlock": return [choice(line(n), [frag(n.pending as Frag), frag(n.then as Frag), frag(n.catch as Frag)])];
+      default: return [{ kind: "group", line: line(n), children: frag(n.fragment as Frag) }];
+    }
+  }
+  return { runtime: "svelte", nodes: frag(ast.fragment), imports };
+}
diff --git a/xgen/check/src/rules/templ.ts b/xgen/check/src/rules/templ.ts
new file mode 100644
index 0000000..22d3585
--- /dev/null
+++ b/xgen/check/src/rules/templ.ts
@@ -0,0 +1,214 @@
+// templ adapter of the `rules` group: a .templ file -> the common tree. templ has no public AST for TypeScript, so this reads the
+// statement grammar of a templ body (markup, `@Component(...) { }`, `if/else`, `for`, `switch/case`, `{ expr }`, `{{ go }}`).
+// The rendered templ of a file is the one named after the file (pager.templ -> Pager), else the first; the others (slot fills,
+// helpers) are detached. Props of a component are the fields of its props literal (`AriaLabel: ...`), and the pairs of an
+// `Attrs: uiutils.Attrs("k", v, ...)` field are attributes. `@templ.Raw` is raw HTML; `@` of a slot (`@p.Actions`, `{ children... }`)
+// renders unknown markup; `@` of a local variable is a component chosen from a value (dynamic-tag).
+import { basename, extname } from "node:path";
+import { choice, type IrAttr, type IrFile, type IrNode } from "./ir";
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"]);
+const STR = /^"(?:[^"\\]|\\.)*"$|^`[^`]*`$/;
+const LIT = /^("(?:[^"\\]|\\.)*"|`[^`]*`|true|false|nil|-?\d+(\.\d+)?|float64\(-?\d+(\.\d+)?\))$/;
+const unq = (s: string): string => (s.startsWith("`") ? s.slice(1, -1) : JSON.parse(s) as string);
+
+/** split at top-level commas (outside (), {}, [], strings) */
+function splitTop(s: string, sep = ","): string[] {
+  const out: string[] = [];
+  let depth = 0, cur = "", q = "";
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i]!;
+    if (q) { cur += c; if (c === "\\" && q === '"') { cur += s[++i] ?? ""; continue; } if (c === q) q = ""; continue; }
+    if (c === '"' || c === "`") { q = c; cur += c; continue; }
+    if ("({[".includes(c)) depth++;
+    if (")}]".includes(c)) depth--;
+    if (c === sep && depth === 0) { out.push(cur); cur = ""; continue; }
+    cur += c;
+  }
+  if (cur.trim()) out.push(cur);
+  return out.map((x) => x.trim()).filter(Boolean);
+}
+
+/** the string literals a Go value can evaluate to: a literal, the branches of uiutils.If / Cond, the arguments of S / Text / Coalesce */
+function goStrings(v: string): string[] {
+  v = v.trim();
+  if (STR.test(v)) return [unq(v)];
+  const m = /^uiutils\.(If|Cond|S|Text|Str|Coalesce|Def)\((.*)\)$/s.exec(v);
+  if (!m) return [];
+  const args = splitTop(m[2]!);
+  const results = m[1] === "If" || m[1] === "Cond" ? args.slice(1) : m[1] === "Def" ? args : args;
+  return results.flatMap(goStrings);
+}
+
+/** the props of a component call: fields of the props literal, plus the pairs of uiutils.Attrs */
+function propsOf(args: string, line: number): IrAttr[] {
+  const lit = /^[\w.]*\{(.*)\}$/s.exec(args.trim());
+  if (!lit) return [];
+  return splitTop(lit[1]!).flatMap((field): IrAttr[] => {
+    const i = field.indexOf(":");
+    if (i < 0) return [];
+    const name = field.slice(0, i).trim(), value = field.slice(i + 1).trim();
+    if (name === "Attrs") return attrsCall(value, line);
+    return [{ name, line, static: LIT.test(value), value: STR.test(value) ? unq(value) : undefined, strings: goStrings(value) }];
+  });
+}
+function attrsCall(value: string, line: number): IrAttr[] {
+  const m = /^uiutils\.Attrs\((.*)\)$/s.exec(value);
+  if (!m) return [];
+  const a = splitTop(m[1]!);
+  const out: IrAttr[] = [];
+  for (let k = 0; k + 1 < a.length; k += 2) if (STR.test(a[k]!)) out.push({ name: unq(a[k]!), line, static: LIT.test(a[k + 1]!), value: STR.test(a[k + 1]!) ? unq(a[k + 1]!) : undefined, strings: goStrings(a[k + 1]!) });
+  return out;
+}
+
+/** read up to the matching close of an opening bracket at s[i] */
+function balanced(s: string, i: number, open: string, close: string): number {
+  let depth = 0, q = "";
+  for (let k = i; k < s.length; k++) {
+    const c = s[k]!;
+    if (q) { if (c === "\\" && q === '"') { k++; continue; } if (c === q) q = ""; continue; }
+    if (c === '"' || c === "`") { q = c; continue; }
+    if (c === open) depth++;
+    else if (c === close && --depth === 0) return k;
+  }
+  return -1;
+}
+
+type Frame = { kind: "root" | "element" | "component" | "loop" | "branch" | "case" | "switch" | "plain"; node?: IrNode; list: IrNode[]; tag?: string; choice?: IrNode & { kind: "choice" } };
+
+export function templToIr(src: string, file = ""): IrFile {
+  const imports = new Map<string, string>();
+  for (const m of src.matchAll(/^\s*(?:import\s+)?(?:(\w+)\s+)?"([^"]+)"\s*$/gm)) { const alias = m[1] ?? m[2]!.split("/").pop()!.replace(/-/g, ""); imports.set(alias, m[2]!); }
+  const want = basename(file, extname(file)).split(/[-_.]/).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+  const comps: Array<{ name: string; nodes: IrNode[] }> = [];
+  let error: string | undefined;
+  const lineAt = (pos: number): number => src.slice(0, pos).split("\n").length;
+  for (const m of src.matchAll(/^templ\s+(\w+)\s*\(/gm)) {
+    const open = src.indexOf("{", balanced(src, m.index! + m[0].length - 1, "(", ")"));
+    const close = balanced(src, open, "{", "}");
+    if (open < 0 || close < 0) { error = `templ ${m[1]}: unbalanced braces`; break; }
+    try { comps.push({ name: m[1]!, nodes: body(src, open + 1, close, lineAt) }); } catch (e) { error = `templ ${m[1]}: ${(e as Error).message}`; }
+  }
+  const main = comps.find((c) => c.name === want) ?? comps[0];
+  const nodes: IrNode[] = main ? [...main.nodes] : [];
+  for (const c of comps) if (c !== main) nodes.push({ kind: "detached", line: 0, children: c.nodes });
+  return { runtime: "templ", nodes, imports, error };
+
+  function body(s: string, from: number, to: number, lineAt: (p: number) => number): IrNode[] {
+    const root: Frame = { kind: "root", list: [] };
+    const stack: Frame[] = [root];
+    const top = (): Frame => stack[stack.length - 1]!;
+    const push = (n: IrNode): void => { top().list.push(n); };
+    const openChild = (kind: Frame["kind"], node: IrNode & { children: IrNode[] }, tag?: string): void => { push(node); stack.push({ kind, node, list: node.children, tag }); };
+    const newBranch = (ch: IrNode & { kind: "choice" }, kind: "branch" | "case"): void => { const b: IrNode[] = []; ch.branches.push(b); stack.push({ kind, list: b, choice: ch }); };
+    const closeBrace = (): void => {
+      const f = stack.pop();
+      if (!f || f.kind === "root" || f.kind === "element") throw new Error(`unexpected } at line ${lineAt(i)}`);
+      if (f.kind === "case") { const sw = stack.pop(); if (sw?.kind !== "switch") throw new Error(`switch close at line ${lineAt(i)}`); finish(f.choice!); }
+      if (f.kind === "branch") finish(f.choice!);
+    };
+    const finish = (ch: IrNode & { kind: "choice" }): void => { if (ch.branches.length === 1) ch.branches.push([]); ch.children = ch.branches.flat(); };
+    let i = from;
+    let lineStart = true;
+    while (i < to) {
+      const c = s[i]!;
+      if (c === "\n") { lineStart = true; i++; continue; }
+      if (c === " " || c === "\t" || c === "\r") { i++; continue; }
+      const line = lineAt(i);
+      const eol = (): number => { const e = s.indexOf("\n", i); return e < 0 || e > to ? to : e; };
+      const rest = s.slice(i, eol());
+      if (lineStart) {
+        lineStart = false;
+        let m: RegExpExecArray | null;
+        if (rest.startsWith("//")) { i = eol(); continue; }
+        if (rest.startsWith("{{")) { const e = s.indexOf("}}", i); i = e + 2; continue; }
+        if ((m = /^\}\s*else\s+if\b.*\{\s*$/.exec(rest)) || (m = /^\}\s*else\s*\{\s*$/.exec(rest))) {
+          const f = stack.pop();
+          if (f?.kind !== "branch") throw new Error(`else without if at line ${line}`);
+          newBranch(f.choice!, "branch"); i = eol(); continue;
+        }
+        if (/^if\b.*\{\s*$/.test(rest)) { const ch = choice(line, []) as IrNode & { kind: "choice" }; ch.branches.length = 0; push(ch); newBranch(ch, "branch"); i = eol(); continue; }
+        if (/^for\b.*\{\s*$/.test(rest)) { openChild("loop", { kind: "loop", line, children: [] }); i = eol(); continue; }
+        if (/^switch\b.*\{\s*$/.test(rest)) { const ch = choice(line, []) as IrNode & { kind: "choice" }; ch.branches.length = 0; push(ch); stack.push({ kind: "switch", list: [], choice: ch }); i = eol(); continue; }
+        if (/^(case\b.*|default\s*):\s*$/.test(rest)) {
+          if (top().kind === "case") stack.pop();
+          const sw = top();
+          if (sw.kind !== "switch") throw new Error(`case outside switch at line ${line}`);
+          newBranch(sw.choice!, "case"); i = eol(); continue;
+        }
+        if (/^\}\s*$/.test(rest)) { closeBrace(); i = eol(); continue; }
+        if (rest.startsWith("@")) {
+          const m2 = /^@([\w.]+)/.exec(rest)!;
+          const callee = m2[1]!;
+          let k = i + 1 + callee.length;
+          let args = "";
+          if (s[k] === "(") { const e = balanced(s, k, "(", ")"); args = s.slice(k + 1, e); k = e + 1; }
+          while (s[k] === " ") k++;
+          const hasBody = s[k] === "{" && /^\{\s*$/.test(s.slice(k, s.indexOf("\n", k)));
+          const parts = callee.split(".");
+          const name = parts[parts.length - 1]!;
+          let node: IrNode & { children?: IrNode[] };
+          if (callee === "templ.Raw") node = { kind: "raw-html", name: "@templ.Raw", line };
+          else if (parts.length === 2 && imports.has(parts[0]!) && /^[A-Z]/.test(name)) node = { kind: "component", name, line, attrs: propsOf(args, line), children: [] };
+          else if (parts.length === 1 && /^[A-Z]/.test(name)) node = { kind: "component", name, line, attrs: propsOf(args, line), children: [] };
+          else if (parts.length === 1) node = { kind: "dynamic", name: callee, line, attrs: [], children: [] };
+          else node = { kind: "render", line };
+          if (hasBody) {
+            if (!("children" in node) || !node.children) { const g = { kind: "group" as const, line, children: [] as IrNode[] }; push(node); openChild("plain", g); }
+            else openChild("component", node as IrNode & { children: IrNode[] });
+            i = k + 1;
+          } else { push(node); i = k; }
+          continue;
+        }
+      }
+      // markup on the line
+      if (c === "{") {
+        const e = balanced(s, i, "{", "}");
+        const code = s.slice(i + 1, e).trim();
+        if (/^\w+\.\.\.$/.test(code)) push({ kind: "render", line });
+        else push({ kind: "expr", strings: goStrings(code), line });
+        i = e + 1; continue;
+      }
+      if (c === "<" && s[i + 1] === "!") { i = s.indexOf(">", i) + 1; continue; } // <!doctype html>, <!-- comment -->
+      if (c === "<" && s[i + 1] === "/") {
+        const e = s.indexOf(">", i);
+        const tag = s.slice(i + 2, e).trim();
+        const f = stack.pop();
+        if (f?.kind !== "element" || f.tag !== tag) throw new Error(`</${tag}> does not close the open element at line ${line}`);
+        i = e + 1; continue;
+      }
+      if (c === "<" && /[a-zA-Z]/.test(s[i + 1] ?? "")) {
+        const tag = /^<([\w-]+)/.exec(s.slice(i, i + 64))![1]!;
+        let k = i + 1 + tag.length;
+        const attrs: IrAttr[] = [];
+        for (;;) {
+          while (/\s/.test(s[k]!)) k++;
+          if (s[k] === ">" || (s[k] === "/" && s[k + 1] === ">")) break;
+          if (s[k] === "{") { k = balanced(s, k, "{", "}") + 1; continue; } // spread or a conditional attribute block
+          const am = /^([\w:@.-]+)(\??=)?/.exec(s.slice(k, k + 200));
+          if (!am) throw new Error(`bad attribute at line ${lineAt(k)}`);
+          k += am[0].length;
+          const name = am[1]!, al = lineAt(k);
+          if (!am[2]) { attrs.push({ name, line: al, static: true, strings: [] }); continue; }
+          if (s[k] === '"') { const e = s.indexOf('"', k + 1); const v = s.slice(k + 1, e); attrs.push({ name, line: al, static: true, value: v, strings: [v] }); k = e + 1; continue; }
+          if (s[k] === "{") { const e = balanced(s, k, "{", "}"); const v = s.slice(k + 1, e).trim(); attrs.push({ name, line: al, static: LIT.test(v), value: STR.test(v) ? unq(v) : undefined, strings: goStrings(v) }); k = e + 1; continue; }
+          throw new Error(`bad attribute value at line ${lineAt(k)}`);
+        }
+        const self = s[k] === "/";
+        const node = { kind: "element" as const, name: tag, line, attrs, children: [] as IrNode[] };
+        if (self || VOID.has(tag)) { push(node); i = k + (self ? 2 : 1); }
+        else { openChild("element", node, tag); i = k + 1; }
+        continue;
+      }
+      // text up to the next markup
+      let e = i;
+      while (e < to && !"<{\n".includes(s[e]!)) e++;
+      if (e === i) e++; // a lone "<" that opens no tag is text
+      const text = s.slice(i, e);
+      if (text.trim()) push({ kind: "text", text, line });
+      i = e;
+    }
+    if (stack.length !== 1) throw new Error(`${stack.length - 1} unclosed block(s) at the end`);
+    return root.list;
+  }
+}
diff --git a/xgen/check/src/rules/twig.ts b/xgen/check/src/rules/twig.ts
new file mode 100644
index 0000000..f136b71
--- /dev/null
+++ b/xgen/check/src/rules/twig.ts
@@ -0,0 +1,292 @@
+// Twig adapter of the `rules` group: a .html.twig file -> the common tree. It reads the tag grammar of Twig over the HTML:
+// `{% if %}/{% elseif %}/{% else %}` are exclusive branches (choice), `{% for %}` is a loop, `{{ include('ui/x/part.html.twig',
+// {p: {...}, children: c}) }}`, `{% include 'x' with {...} %}` and `{% embed 'x' with {...} %}...{% endembed %}` are components
+// named after the template file (card-header -> CardHeader); a captured `{% set c %}...{% endset %}` is the children of the include
+// that passes it as `children`, else detached markup (a slot fill handed to another component). `|raw` of children or of a slot
+// prop renders unknown markup; `|raw` of anything else is raw HTML; `<{{ tag }}` is a dynamic tag. Props are the keys of `p`, and
+// the pairs of `Attrs: ui_attrs([...])` are attributes.
+import { basename } from "node:path";
+import { choice, type IrAttr, type IrFile, type IrNode } from "./ir";
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"]);
+const STR = /^'(?:[^'\\]|\\.)*'$|^"(?:[^"\\]|\\.)*"$/;
+const LIT = /^('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|true|false|null|none|None|True|False|-?\d+(\.\d+)?)$/;
+const unq = (s: string): string => s.slice(1, -1).replace(/\\(.)/g, "$1");
+const pascal = (path: string): string => basename(path).replace(/\..*$/, "").split(/[-_]/).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+
+/** split at top-level separators (outside (), {}, [], strings) */
+function splitTop(s: string, sep: string): string[] {
+  const out: string[] = [];
+  let depth = 0, cur = "", q = "";
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i]!;
+    if (q) { cur += c; if (c === "\\") { cur += s[++i] ?? ""; continue; } if (c === q) q = ""; continue; }
+    if (c === "'" || c === '"') { q = c; cur += c; continue; }
+    if ("({[".includes(c)) depth++;
+    if (")}]".includes(c)) depth--;
+    if (depth === 0 && s.startsWith(sep, i)) { out.push(cur); cur = ""; i += sep.length - 1; continue; }
+    cur += c;
+  }
+  out.push(cur);
+  return out.map((x) => x.trim()).filter(Boolean);
+}
+const strip = (e: string): string => { e = e.trim(); while (e.startsWith("(") && balanced(e, 0) === e.length - 1) e = e.slice(1, -1).trim(); return e; };
+function balanced(s: string, i: number): number {
+  const open = s[i]!, close = open === "(" ? ")" : open === "{" ? "}" : "]";
+  let depth = 0, q = "";
+  for (let k = i; k < s.length; k++) {
+    const c = s[k]!;
+    if (q) { if (c === "\\") { k++; continue; } if (c === q) q = ""; continue; }
+    if (c === "'" || c === '"') { q = c; continue; }
+    if (c === open) depth++;
+    else if (c === close && --depth === 0) return k;
+  }
+  return -1;
+}
+
+/** the string literals a Twig value can evaluate to: a literal, the branches of `?:` and `??`, the arguments of the text helpers */
+function twigStrings(v: string): string[] {
+  v = strip(v);
+  if (STR.test(v)) return [unq(v)];
+  const tern = splitTop(v, "?");
+  if (tern.length === 2) { const ab = splitTop(tern[1]!, ":"); return ab.flatMap(twigStrings); }
+  const ifElse = /^(.*?)\s+if\s+(.*?)\s+else\s+(.*)$/s.exec(v);
+  if (ifElse && splitTop(v, " if ").length === 2) return [...twigStrings(ifElse[1]!), ...twigStrings(ifElse[3]!)];
+  const co = splitTop(v, "??");
+  if (co.length > 1) return co.flatMap(twigStrings);
+  const m = /^ui_(text|s|str|def|coalesce|or)\((.*)\)$/s.exec(v);
+  if (!m) return [];
+  return splitTop(m[2]!.replace(/^\[(.*)\]$/s, "$1"), ",").flatMap(twigStrings);
+}
+
+/** the entries of a hash literal {'k': v, k: v} */
+function hashEntries(code: string): Array<[string, string]> {
+  const s = strip(code);
+  // Latte (PHP) arrays: ['k' => v], named arguments k: v
+  if (!s.startsWith("{") && !s.startsWith("[")) return [];
+  return splitTop(s.slice(1, -1), ",").flatMap((e): Array<[string, string]> => {
+    const arrow = splitTop(e, "=>");
+    const kv = arrow.length > 1 ? arrow : splitTop(e, ":");
+    if (kv.length < 2) return [];
+    const k = kv[0]!.trim();
+    return [[STR.test(k) ? unq(k) : k, e.slice(e.indexOf(kv[1]!))]];
+  });
+}
+
+const attr = (name: string, line: number, value: string): IrAttr => ({ name, line, static: LIT.test(strip(value)), value: STR.test(strip(value)) ? unq(strip(value)) : undefined, strings: twigStrings(value) });
+
+/** the props of an include: the keys of `p` (or of the vars when there is no `p`), plus the pairs of ui_attrs */
+function propsOf(vars: string, line: number): { attrs: IrAttr[]; children?: string } {
+  const top = hashEntries(vars);
+  const p = top.find(([k]) => k === "p");
+  const children = top.find(([k]) => k === "children")?.[1].trim();
+  const fields = p ? hashEntries(p[1]) : top.filter(([k]) => k !== "children");
+  const attrs = fields.flatMap(([name, value]): IrAttr[] => {
+    const m = /^ui_attrs\(\[(.*)\]\)$/s.exec(strip(value));
+    if (!m) return [attr(name, line, value)];
+    const a = splitTop(m[1]!, ",");
+    const out: IrAttr[] = [];
+    for (let k = 0; k + 1 < a.length; k += 2) if (STR.test(a[k]!)) out.push(attr(unq(a[k]!), line, a[k + 1]!));
+    return out;
+  });
+  return { attrs, children };
+}
+
+/** the position of the close (`}}`, `%}`) of a Twig tag opened at i, outside strings and brackets */
+function closeOf(s: string, i: number, close: string): number {
+  let depth = 0, q = "";
+  for (let k = i + 2; k < s.length; k++) {
+    const c = s[k]!;
+    if (q) { if (c === "\\") { k++; continue; } if (c === q) q = ""; continue; }
+    if (c === "'" || c === '"') { q = c; continue; }
+    if (depth === 0 && s.startsWith(close, k)) return k;
+    if ("({[".includes(c)) depth++;
+    else if (")}]".includes(c)) depth--;
+  }
+  return s.length;
+}
+
+type Frame = { kind: "root" | "element" | "loop" | "branch" | "capture" | "embed" | "block" | "detached"; list: IrNode[]; node?: IrNode; tag?: string; choice?: IrNode & { kind: "choice" }; name?: string };
+
+export const twigToIr = (src: string, file = ""): IrFile => templateToIr(src, file, "twig");
+/** Jinja2 reads the same: `elif`, `|safe`, `ui_include(...)`, `p['x']`, `x if c else y`; `{% call m(...) %}` and a macro imported with `{% from %}` are components */
+export const jinjaToIr = (src: string, file = ""): IrFile => templateToIr(src, file, "jinja2");
+
+export function templateToIr(src: string, _file: string, runtime: "twig" | "jinja2" | "latte"): IrFile {
+  const macros = new Map<string, string>();
+  const imports = new Map<string, string>();
+  let error: string | undefined;
+  const lineAt = (pos: number): number => src.slice(0, pos).split("\n").length;
+  const captures = new Map<string, IrNode[]>();
+  const used = new Set<string>();
+  const root: Frame = { kind: "root", list: [] };
+  const stack: Frame[] = [root];
+  const top = (): Frame => stack[stack.length - 1]!;
+  const push = (n: IrNode): void => { top().list.push(n); };
+  const component = (path: string, vars: string, line: number): IrNode => {
+    const name = pascal(path);
+    imports.set(name, path);
+    const { attrs, children } = propsOf(vars, line);
+    const node: IrNode = { kind: "component", name, line, attrs, children: [] };
+    const cap = children?.replace(/^\$/, "");
+    if (cap && /^\w+$/.test(cap) && cap !== "children") { used.add(cap); node.children.push(...(captures.get(cap) ?? [{ kind: "render", line }])); }
+    else if (children) node.children.push({ kind: "render", line });
+    return node;
+  };
+  /** an output tag {{ ... }} at a position */
+  const output = (code: string, line: number): void => {
+    const e0 = code.trim().replace(/\|\s*nocheck$/, "");
+    // Latte prints an included template's markup with |noescape
+    const e = /^(?:ui_)?include\(/.test(e0) ? e0.replace(/\|\s*noescape$/, "") : e0;
+    const inc = /^(?:ui_)?include\(\s*('[^']*'|"[^"]*")\s*(?:,\s*([\s\S]*?))?(?:,\s*with_context\s*=\s*\w+)?\s*\)$/.exec(e);
+    if (inc) { push(component(unq(inc[1]!), inc[2] ?? "{}", line)); return; }
+    if (/^(ui_)?include\(/.test(e)) { push({ kind: "render", line }); return; }
+    const mac = /^(\w+)\(([\s\S]*)\)$/.exec(e);
+    if (mac && macros.has(mac[1]!)) { push(component(macros.get(mac[1]!)!, splitTop(mac[2]!, ",")[0] ?? "{}", line)); return; }
+    const raw = /^([\s\S]*)\|\s*(raw|safe|noescape)$/.exec(e);
+    if (raw) {
+      const x = strip(raw[1]!);
+      const def = /^ui_def\(([\s\S]*)\)$/.exec(x);
+      const operand = strip(def ? splitTop(def[1]!, ",")[0]! : splitTop(x, "??")[0] ?? x).replace(/^\$/, "");
+      if (/^(children|p\.\w+|p\['\w+'\])$/.test(operand)) push({ kind: "render", line });
+      else if (/^\w+$/.test(operand) && captures.has(operand)) { used.add(operand); push(...[{ kind: "group" as const, line, children: captures.get(operand)! }]); }
+      else push({ kind: "raw-html", name: "|raw", line });
+      return;
+    }
+    if (/^ui_lucide\(/.test(e)) { push({ kind: "raw-html", name: "ui_lucide", line }); return; }
+    push({ kind: "expr", strings: twigStrings(e), line });
+  };
+  const statement = (code: string, line: number, at: number): void => {
+    const [kw = "", ...rest] = code.trim().split(/\s+/);
+    const arg = code.trim().slice(kw.length).trim();
+    switch (kw) {
+      case "if": { const c = choice(line, [[]]) as IrNode & { kind: "choice" }; push(c); stack.push({ kind: "branch", list: c.branches[0]!, choice: c }); return; }
+      case "elseif": case "elif": case "else": {
+        const f = stack.pop();
+        if (f?.kind !== "branch") throw new Error(`{% ${kw} %} outside if at line ${line}`);
+        const list: IrNode[] = [];
+        f.choice!.branches.push(list);
+        stack.push({ kind: "branch", list, choice: f.choice });
+        return;
+      }
+      case "endif": {
+        const f = stack.pop();
+        if (f?.kind !== "branch") throw new Error(`{% endif %} without if at line ${line}`);
+        const c = f.choice!;
+        if (c.branches.length === 1) c.branches.push([]);
+        c.children.splice(0, c.children.length, ...c.branches.flat());
+        return;
+      }
+      case "for": { const n: IrNode = { kind: "loop", line, children: [] }; push(n); stack.push({ kind: "loop", list: n.children, node: n }); return; }
+      case "endfor": if (stack.pop()?.kind !== "loop") throw new Error(`{% endfor %} without for at line ${line}`); return;
+      case "set": {
+        if (arg.includes("=")) return; // a value
+        const list: IrNode[] = [];
+        captures.set(arg, list);
+        stack.push({ kind: "capture", list, name: arg });
+        return;
+      }
+      case "endset": if (stack.pop()?.kind !== "capture") throw new Error(`{% endset %} without set at line ${line}`); return;
+      case "include": {
+        const m = /^('[^']*'|"[^"]*")(?:\s+with\s+([\s\S]*?))?(?:\s+only)?$/.exec(arg);
+        if (!m) { push({ kind: "render", line }); return; }
+        push(component(unq(m[1]!), m[2] ?? "{}", line));
+        return;
+      }
+      case "embed": {
+        const m = /^('[^']*'|"[^"]*")(?:\s+with\s+([\s\S]*?))?(?:\s+only)?$/.exec(arg);
+        const n = m ? component(unq(m[1]!), m[2] ?? "{}", line) : ({ kind: "dynamic", name: "embed", line, attrs: [], children: [] } as IrNode);
+        push(n);
+        stack.push({ kind: "embed", list: (n as { children: IrNode[] }).children, node: n });
+        return;
+      }
+      case "call": {
+        const m = /^(?:\([^)]*\)\s*)?(\w+)\(([\s\S]*)\)$/.exec(arg);
+        const n: IrNode = m ? component(macros.get(m[1]!) ?? m[1]!, splitTop(m[2]!, ",")[0] ?? "{}", line) : { kind: "render", line };
+        push(n);
+        stack.push({ kind: "embed", list: "children" in n ? n.children : [], node: n });
+        return;
+      }
+      case "endcall": if (stack.pop()?.kind !== "embed") throw new Error(`{% endcall %} without call at line ${line}`); return;
+      case "from": {
+        const m = /^('[^']*'|"[^"]*")\s+import\s+(.*)$/.exec(arg);
+        if (m) for (const name of m[2]!.split(",").map((x) => x.trim().split(/\s+as\s+/).pop()!)) macros.set(name, unq(m[1]!));
+        return;
+      }
+      case "endembed": if (stack.pop()?.kind !== "embed") throw new Error(`{% endembed %} without embed at line ${line}`); return;
+      case "block": stack.push({ kind: "block", list: top().list }); return;
+      case "endblock": stack.pop(); return;
+      case "macro": { const n: IrNode = { kind: "detached", line, children: [] }; push(n); stack.push({ kind: "detached", list: n.children }); return; }
+      case "endmacro": stack.pop(); return;
+      case "apply": case "endapply": case "do": case "extends": case "import": case "use": case "with": case "endwith": return;
+    }
+    void at;
+  };
+
+  try {
+    const s = src;
+    let i = 0;
+    while (i < s.length) {
+      const line = lineAt(i);
+      if (s.startsWith("{#", i)) { const e = s.indexOf("#}", i); i = e < 0 ? s.length : e + 2; continue; }
+      if (s.startsWith("{%", i)) { const e = closeOf(s, i, "%}"); statement(s.slice(i + 2, e).replace(/^-|-$/g, ""), line, i); i = e + 2; continue; }
+      if (s.startsWith("{{", i)) { const e = closeOf(s, i, "}}"); output(s.slice(i + 2, e).replace(/^-|-$/g, ""), line); i = e + 2; continue; }
+      if (s.startsWith("<!", i)) { i = s.indexOf(">", i) + 1; continue; }
+      if (s.startsWith("</", i)) {
+        const e = s.indexOf(">", i);
+        const f = stack.pop();
+        if (f?.kind !== "element") throw new Error(`${s.slice(i, e + 1)} does not close an open element at line ${line}`);
+        i = e + 1; continue;
+      }
+      if (s[i] === "<" && /[a-zA-Z{]/.test(s[i + 1] ?? "")) {
+        // the open tag up to its `>` outside Twig tags and quotes
+        let k = i + 1, q = "";
+        for (; k < s.length; k++) {
+          if (s.startsWith("{{", k)) { k = closeOf(s, k, "}}") + 1; continue; }
+          if (s.startsWith("{%", k)) { k = closeOf(s, k, "%}") + 1; continue; }
+          const c = s[k]!;
+          if (q) { if (c === q) q = ""; continue; }
+          if (c === '"' || c === "'") { q = c; continue; }
+          if (c === ">") break;
+        }
+        const open = s.slice(i + 1, k).replace(/\{%-?[\s\S]*?-?%\}/g, " ");
+        const dyn = /^\{\{([\s\S]*?)\}\}/.exec(open);
+        const tag = dyn ? dyn[1]!.trim() : /^[\w-]+/.exec(open)![0];
+        const body = open.slice(dyn ? dyn[0].length : tag.length);
+        const attrs: IrAttr[] = [];
+        for (const m of body.matchAll(/([\w:@.-]+)(?:="([^"]*)"|='([^']*)')?|\{\{[\s\S]*?\}\}/g)) {
+          if (!m[1]) continue;
+          const v = m[2] ?? m[3];
+          if (v === undefined) attrs.push({ name: m[1], line, static: true, strings: [] });
+          else if (!v.includes("{{")) attrs.push({ name: m[1], line, static: true, value: v, strings: [v] });
+          else { const x = /^\{\{([\s\S]*)\}\}$/.exec(v.trim()); attrs.push(x ? attr(m[1], line, x[1]!) : { name: m[1], line, static: false, strings: [] }); }
+        }
+        const self = s[k - 1] === "/";
+        // Latte n: attributes: n:tag renames the element at render (a dynamic tag); n:if and n:foreach wrap the element in a
+        // choice or a loop, n:inner-foreach repeats its content; the others (n:class, n:attr, ...) are not host attributes
+        const n = Object.fromEntries(attrs.filter((a) => a.name.startsWith("n:")).map((a) => [a.name, a.value ?? ""]));
+        const host = attrs.filter((a) => !a.name.startsWith("n:"));
+        const node = { kind: (dyn || "n:tag" in n ? "dynamic" : "element") as "element", name: "n:tag" in n ? n["n:tag"]! : tag, line, attrs: host, children: [] as IrNode[] };
+        let outer: IrNode = node;
+        if ("n:foreach" in n) outer = { kind: "loop", line, children: [outer] };
+        if ("n:if" in n || "n:ifcontent" in n) outer = choice(line, [[outer], []]);
+        push(outer);
+        let inner = node.children;
+        if ("n:inner-foreach" in n) { const l: IrNode = { kind: "loop", line, children: [] }; node.children.push(l); inner = l.children; }
+        if (!self && !VOID.has(tag)) stack.push({ kind: "element", list: inner, node, tag });
+        i = k + 1; continue;
+      }
+      let e = i;
+      while (e < s.length && s[e] !== "<" && !s.startsWith("{{", e) && !s.startsWith("{%", e) && !s.startsWith("{#", e)) e++;
+      if (e === i) e++;
+      const text = s.slice(i, e);
+      if (text.trim()) push({ kind: "text", text, line });
+      i = e;
+    }
+    if (stack.length !== 1) throw new Error(`${stack.length - 1} unclosed block(s) at the end`);
+  } catch (e) { error = (e as Error).message; }
+  // captured markup is rendered where it is passed as children; a capture passed anywhere else (a slot fill) is detached
+  const nodes = root.list;
+  for (const [name, list] of captures) if (!used.has(name) && list.length) nodes.push({ kind: "detached", line: list[0]!.line, children: list });
+  return { runtime, nodes, imports, ...(error ? { error } : {}) };
+}
diff --git a/xgen/check/src/rules/vue.ts b/xgen/check/src/rules/vue.ts
new file mode 100644
index 0000000..93b8ee6
--- /dev/null
+++ b/xgen/check/src/rules/vue.ts
@@ -0,0 +1,75 @@
+// Vue 3 SFC adapter of the `rules` group: @vue/compiler-sfc (the untransformed template AST) -> the common tree.
+import { parse } from "@vue/compiler-sfc";
+import ts from "typescript";
+import { choice, exprAttr, exprStrings, lineOf, staticAttr, type IrAttr, type IrFile, type IrNode } from "./ir";
+
+// NodeTypes and ElementTypes of @vue/compiler-core
+const ELEMENT = 1, TEXT = 2, INTERPOLATION = 5, ATTRIBUTE = 6, DIRECTIVE = 7;
+const TAG_ELEMENT = 0, TAG_SLOT = 2, TAG_TEMPLATE = 3;
+/** built-in components that render their children in place */
+const BUILTIN = new Set(["Transition", "TransitionGroup", "KeepAlive", "Teleport", "Suspense", "transition", "transition-group", "keep-alive", "teleport", "suspense"]);
+
+type VNode = { type: number; tag?: string; tagType?: number; content?: string | { content: string }; props?: VProp[]; children?: VNode[]; loc: { start: { line: number } } };
+type VProp = { type: number; name: string; rawName?: string; arg?: { content: string }; exp?: { content: string }; value?: { content: string }; loc: { start: { line: number } } };
+
+export function vueToIr(src: string): IrFile {
+  const imports = new Map<string, string>();
+  const { descriptor, errors } = parse(src, { filename: "x.vue", sourceMap: false });
+  const script = [descriptor.script?.content, descriptor.scriptSetup?.content].filter(Boolean).join("\n");
+  const sf = ts.createSourceFile("x.ts", script, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+  const nodes: IrNode[] = [];
+  for (const st of sf.statements) if (ts.isImportDeclaration(st) && st.importClause && ts.isStringLiteral(st.moduleSpecifier)) {
+    const c = st.importClause;
+    if (c.name) imports.set(c.name.text, st.moduleSpecifier.text);
+    if (c.namedBindings && ts.isNamedImports(c.namedBindings)) for (const e of c.namedBindings.elements) imports.set(e.name.text, st.moduleSpecifier.text);
+  }
+  // h(tag, ...) in a render function: a variable tag is a dynamic tag
+  const scriptLine = (descriptor.scriptSetup ?? descriptor.script)?.loc.start.line ?? 1;
+  (function h(n: ts.Node): void {
+    if (ts.isCallExpression(n) && ts.isIdentifier(n.expression) && n.expression.text === "h" && n.arguments[0] && !ts.isStringLiteral(n.arguments[0]) && !(ts.isIdentifier(n.arguments[0]) && imports.has(n.arguments[0].text))) {
+      nodes.push({ kind: "detached", line: 0, children: [{ kind: "dynamic", name: `h(${n.arguments[0].getText(sf)})`, line: scriptLine + lineOf(script, n.getStart(sf)) - 1, attrs: [], children: [] }] });
+    }
+    ts.forEachChild(n, h);
+  })(sf);
+  if (errors.length) return { runtime: "vue", nodes, imports, error: String((errors[0] as Error).message ?? errors[0]) };
+  const tpl = descriptor.template?.ast as unknown as { children: VNode[] } | undefined;
+  const attrs = (n: VNode): IrAttr[] => (n.props ?? []).flatMap((p): IrAttr[] => {
+    const line = p.loc.start.line;
+    if (p.type === ATTRIBUTE) return [staticAttr(p.name, line, p.value?.content)];
+    if (p.type === DIRECTIVE && p.name === "bind" && p.arg) return [p.exp ? exprAttr(p.arg.content, line, p.exp.content) : { name: p.arg.content, line, static: false, strings: [] }];
+    return [];
+  });
+  const dir = (n: VNode, name: string): VProp | undefined => (n.props ?? []).find((p) => p.type === DIRECTIVE && p.name === name);
+  /** a list of siblings: a v-if / v-else-if / v-else chain becomes one choice, v-for a loop */
+  function list(nodes: VNode[]): IrNode[] {
+    const out: IrNode[] = [];
+    let chain: IrNode[][] | undefined, at = 0;
+    const close = (): void => { if (chain) { out.push(choice(at, chain.length === 1 ? [...chain, []] : chain)); chain = undefined; } };
+    for (const n of nodes) {
+      if (n.type === 3 || (n.type === TEXT && !String(n.content).trim())) continue; // comments and blank text do not break a chain
+      const one = (): IrNode[] => (n.type === ELEMENT && dir(n, "for") ? [{ kind: "loop", line: n.loc.start.line, children: conv(n) }] : conv(n));
+      if (n.type === ELEMENT && dir(n, "if")) { close(); chain = [one()]; at = n.loc.start.line; continue; }
+      if (n.type === ELEMENT && chain && (dir(n, "else-if") || dir(n, "else"))) { chain.push(one()); if (dir(n, "else")) close(); continue; }
+      close();
+      out.push(...one());
+    }
+    close();
+    return out;
+  }
+  function conv(n: VNode): IrNode[] {
+    const line = n.loc.start.line;
+    if (n.type === TEXT) return String(n.content).trim() ? [{ kind: "text", text: String(n.content), line }] : [];
+    if (n.type === INTERPOLATION) return [{ kind: "expr", strings: exprStrings((n.content as { content: string }).content), line }];
+    if (n.type !== ELEMENT) return [];
+    const kids = list(n.children ?? []);
+    const raw: IrNode[] = dir(n, "html") ? [{ kind: "raw-html", name: "v-html", line }] : [];
+    if (n.tagType === TAG_TEMPLATE || n.tagType === TAG_SLOT || BUILTIN.has(n.tag!)) {
+      const slotted = n.tagType === TAG_SLOT ? [{ kind: "render" as const, line }] : [];
+      return [{ kind: "group", line, children: [...slotted, ...kids] }];
+    }
+    if (n.tag === "component" && (n.props ?? []).some((p) => p.name === "is" || p.arg?.content === "is")) return [{ kind: "dynamic", name: "component :is", line, attrs: attrs(n), children: [...raw, ...kids] }];
+    if (n.tagType === TAG_ELEMENT) return [{ kind: "element", name: n.tag!, line, attrs: attrs(n), children: [...raw, ...kids] }];
+    return [{ kind: "component", name: n.tag!, line, attrs: attrs(n), children: [...raw, ...kids] }];
+  }
+  return { runtime: "vue", nodes: [...list(tpl?.children ?? []), ...nodes], imports };
+}
diff --git a/xgen/check/src/rules/zones.ts b/xgen/check/src/rules/zones.ts
new file mode 100644
index 0000000..589d4fa
--- /dev/null
+++ b/xgen/check/src/rules/zones.ts
@@ -0,0 +1,35 @@
+// The zones catalog, read live from the "ui8kit" field of every workspace package.json (the same walk as packages/tooling/src/zones.mjs).
+// rules/zones.json is the committed copy; the `rules` group fails when it differs from the live catalog.
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import type { Runtime } from "./ir";
+
+export interface Zone { name: string; dir: string; runtime: Runtime; generated: boolean; kit: string[]; composition: string[]; blockRoot: string[] }
+export interface Zones { version: 1; packages: Zone[] }
+export const ZONES_FILE = "rules/zones.json";
+
+function workspaces(repo: string): string[] {
+  const root = JSON.parse(readFileSync(join(repo, "package.json"), "utf8")) as { workspaces: string[] };
+  return root.workspaces.flatMap((w) => {
+    if (!w.endsWith("/*")) return [w];
+    const base = w.slice(0, -2);
+    if (!existsSync(join(repo, base))) return [];
+    return readdirSync(join(repo, base), { withFileTypes: true }).filter((e) => e.isDirectory()).map((e) => `${base}/${e.name}`);
+  }).filter((d) => existsSync(join(repo, d, "package.json"))).sort();
+}
+
+export function readZones(repo: string): Zones {
+  const packages: Zone[] = [];
+  for (const dir of workspaces(repo)) {
+    const pkg = JSON.parse(readFileSync(join(repo, dir, "package.json"), "utf8")) as { name: string; ui8kit?: Partial<Zone> };
+    const z = pkg.ui8kit;
+    if (!z) continue;
+    packages.push({ name: pkg.name, dir, runtime: z.runtime as Runtime, generated: z.generated === true, kit: z.kit ?? [], composition: z.composition ?? [], blockRoot: z.blockRoot ?? [] });
+  }
+  return { version: 1, packages };
+}
+
+export const zonesText = (repo: string): string => JSON.stringify(readZones(repo), null, 2) + "\n";
+const under = (rel: string, p: string): boolean => rel === p || rel.startsWith(`${p}/`);
+export const inKit = (z: Zone, rel: string): boolean => z.kit.some((p) => under(rel, p));
+export const inBlockRoot = (z: Zone, rel: string): boolean => z.blockRoot.some((p) => under(rel, p));
diff --git a/xgen/check/src/shadows.ts b/xgen/check/src/shadows.ts
new file mode 100644
index 0000000..d0e1360
--- /dev/null
+++ b/xgen/check/src/shadows.ts
@@ -0,0 +1,55 @@
+// The `shadows` group of `xgen check`: flat surfaces have no shadow, only their border edge; a floating layer has exactly one,
+// shadow-md (menu, popover, tooltip) or shadow-lg (dialog, sheet, floating toast), and only where SHADOW_ALLOW names the file.
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import type { Plan } from "@ui8kit/xgen-generator";
+import { CORNER_DIRS, SHADOW_ALLOW, shadowClasses } from "./audit-rules";
+export { shadowClasses };
+import { styleProblems } from "./style-zones";
+import { result, type CheckResult } from "./result";
+
+const walk = (dir: string): string[] => (existsSync(dir) ? readdirSync(dir).flatMap((n) => (statSync(join(dir, n)).isDirectory() ? walk(join(dir, n)) : [join(dir, n)])) : []);
+
+
+/** the problems of one spec file against the allowlist */
+export function shadowProblems(key: string, text: string): string[] {
+  const found = shadowClasses(text);
+  const allow = SHADOW_ALLOW[key];
+  const problems = found.filter((c) => c !== allow?.shadow).map((c) => `xgen/${key}: ${c}; a flat surface has no shadow (only a floating layer in SHADOW_ALLOW has shadow-md or shadow-lg)`);
+  const n = found.filter((c) => c === allow?.shadow).length;
+  if (allow && n > allow.n) problems.push(`xgen/${key}: ${n} ${allow.shadow}, ${allow.n} allowed; a floating layer has one shadow`);
+  if (allow && n < allow.n) problems.push(`xgen/check/src/audit-rules.ts: ${key} now holds ${n} ${allow.shadow}; lower its allowance from ${allow.n} to ${n}`);
+  return problems;
+}
+
+/** a box-shadow value of kit.css that draws a shadow (not a ring: a ring has no offset and no blur) */
+const isDrop = (part: string): boolean => !/^(inset\s+)?0 0 0 /.test(part.trim()) && !/^var\(--tw-[\w-]+(, ?0 0 #0000)?\)$/.test(part.trim()) && part.trim() !== "none";
+
+export function checkShadows(plan: Plan): CheckResult {
+  const root = plan.xgenRoot;
+  const problems: string[] = [];
+  const seen = new Set<string>();
+  for (const dir of CORNER_DIRS) {
+    const base = xgenPaths(root).specs(dir);
+    for (const f of walk(base).filter((x) => x.endsWith(".json")).sort()) {
+      const key = `specs/${dir}/${f.slice(base.length + 1)}`;
+      seen.add(key);
+      problems.push(...shadowProblems(key, readFileSync(f, "utf8")));
+    }
+  }
+  for (const key of Object.keys(SHADOW_ALLOW)) if (!seen.has(key)) problems.push(`xgen/check/src/audit-rules.ts: SHADOW_ALLOW names ${key}, which does not exist`);
+  const kit = join(root, "runtimes", "core", "assets", "styles", "kit.css");
+  readFileSync(kit, "utf8").split("\n").forEach((l, i) => {
+    for (const m of l.matchAll(/box-shadow:\s*([^;}]+)/g)) {
+      const v = m[1]!.trim();
+      // split on the commas between shadows, not inside var(...) or rgb(...)
+      const parts: string[] = []; let depth = 0, cur = "";
+      for (const ch of v) { if (ch === "(") depth++; if (ch === ")") depth--; if (ch === "," && depth === 0) { parts.push(cur); cur = ""; } else cur += ch; }
+      parts.push(cur);
+      if (parts.some(isDrop)) problems.push(`xgen/runtimes/core/assets/styles/kit.css:${i + 1}: box-shadow ${v}; kit.css draws rings (0 0 0 ...), never a drop shadow`);
+    }
+  });
+  problems.push(...styleProblems(plan.workspace, "shadows"));
+  return result("shadows", "flat surfaces have no shadow; a floating layer has one (shadow-md or shadow-lg), only in the allowlist, each with its reason", problems);
+}
diff --git a/xgen/check/src/shots.ts b/xgen/check/src/shots.ts
new file mode 100644
index 0000000..3edff95
--- /dev/null
+++ b/xgen/check/src/shots.ts
@@ -0,0 +1,36 @@
+// `xgen shot`: one full-page screenshot of a screen served by a host app (/<screen>/#/<route>), for local visual compares.
+import { mkdirSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { chromium } from "playwright-core";
+import { hostedScreens, planBuild } from "@ui8kit/xgen-generator";
+import { screenKey } from "@ui8kit/xgen-runtime-core";
+import { serve, waitPort } from "./e2e/common";
+
+export interface ShotOptions { screen: string; runtime: "svelte" | "react" | "vue"; width: number; theme: "light" | "dark"; route: string; out?: string }
+
+export async function runShot(workspace: string, o: ShotOptions): Promise<{ file: string; errors: string[] }> {
+  const plan = planBuild(workspace);
+  const host = plan.apps.find((a) => a.app.runtime === o.runtime && hostedScreens(a.app, plan.inputs.screens.map((s) => s.value)).screens.some((s) => screenKey(s.id) === o.screen));
+  if (!host) throw new Error(`no ${o.runtime} host serves the screen "${o.screen}"`);
+  const file = resolve(workspace, o.out ?? join("shots", `${o.screen}-${o.runtime}-${o.theme}-${o.width}.png`));
+  mkdirSync(dirname(file), { recursive: true });
+  const proc = serve(host.dir);
+  const errors: string[] = [];
+  const browser = await chromium.launch({ executablePath: process.env.CHROME ?? "/usr/bin/google-chrome", args: ["--no-sandbox"] });
+  try {
+    const origin = `http://127.0.0.1:${host.app.port}`;
+    await waitPort(origin);
+    const page = await browser.newPage({ viewport: { width: o.width, height: 900 } });
+    page.on("pageerror", (e) => errors.push(e.message));
+    page.on("console", (m) => { if (m.type() === "error") errors.push(m.text()); });
+    // the saved choice wins over the host default (see runtime/theme.ts)
+    await page.addInitScript((mode) => { localStorage.setItem("xgen-theme", mode); }, o.theme);
+    await page.goto(`${origin}/${o.screen}/#/${o.route}`, { waitUntil: "networkidle" });
+    await page.waitForSelector("main#main-content");
+    await page.screenshot({ path: file, fullPage: true });
+  } finally {
+    await browser.close();
+    proc.kill();
+  }
+  return { file, errors };
+}
diff --git a/xgen/check/src/solid/index.ts b/xgen/check/src/solid/index.ts
new file mode 100644
index 0000000..6a6e61e
--- /dev/null
+++ b/xgen/check/src/solid/index.ts
@@ -0,0 +1,110 @@
+// The Solid gate: DOM parity of every brick case and every gallery block case with the React package (the reference of the
+// TypeScript runtimes), rendered on the server (babel-preset-solid, generate: "ssr", then solid-js/web renderToString), and
+// html-validate over the Solid output of every block case. The package itself is typechecked by `bun run typecheck`.
+import { transformAsync } from "@babel/core";
+import { mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { createElement, type ComponentType } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import { reactPropName, htmlPropName } from "@ui8kit/xgen-spec";
+import type { Inputs } from "@ui8kit/xgen-screens";
+import { validateStates, type HtmlStates } from "../e2e/html";
+import { blockCases } from "../templ/blocks";
+import { brickCases, reactProps } from "../templ/bricks";
+import { normalizeHtml } from "../templ/normalize";
+
+export const SOLID_DIR = "packages/solid/ui";
+
+export interface SolidResult { ok: boolean; problems: string[]; cases: number; blocks: number; organisms: number; documents?: number }
+
+const files = (dir: string): string[] => readdirSync(dir, { withFileTypes: true }).flatMap((e) => (e.isDirectory() ? files(join(dir, e.name)) : [join(dir, e.name)]));
+
+/** the package compiled for the server into node_modules/.cache (so it resolves the workspace dependencies), JSX files through babel-preset-solid */
+async function compileForServer(workspace: string): Promise<string> {
+  const src = join(workspace, SOLID_DIR, "src");
+  const out = join(workspace, "node_modules", ".cache", "xgen-solid-ssr", String(process.pid));
+  rmSync(out, { recursive: true, force: true });
+  for (const f of files(src)) {
+    const to = join(out, relative(src, f));
+    mkdirSync(dirname(to), { recursive: true });
+    const text = readFileSync(f, "utf8");
+    if (!f.endsWith(".tsx")) { writeFileSync(to, text); continue; }
+    const r = await transformAsync(text, {
+      filename: f, babelrc: false, configFile: false,
+      presets: [[require.resolve("babel-preset-solid"), { generate: "ssr", hydratable: false }], [require.resolve("@babel/preset-typescript"), { isTSX: true, allExtensions: true, onlyRemoveTypeImports: true }]],
+    });
+    writeFileSync(to, r!.code!);
+  }
+  return out;
+}
+
+/** canonical props -> the props of the Solid component (React names; `class`; passthrough attributes by their HTML name) */
+function solidProps(part: Parameters<typeof reactProps>[0], props: Record<string, unknown>): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(props)) {
+    const d = part.props.find((p) => p.name === k);
+    if (d) out[k === "Class" ? "class" : d.passthrough ? htmlPropName(d) : reactPropName(d)] = v;
+  }
+  return out;
+}
+
+export async function solidCheck(workspace: string, bricks: LoadedBrick[], inputs: Inputs): Promise<SolidResult> {
+  const problems: string[] = [];
+  const out = await compileForServer(workspace);
+  try {
+    const web = (await import(join(workspace, "node_modules", "solid-js", "web", "dist", "server.js"))) as { renderToString: (f: () => unknown) => string; createComponent: (c: unknown, p: unknown) => unknown };
+    const solid = (await import(join(out, "index.ts"))) as Record<string, unknown>;
+    const react = (await import(join(workspace, "packages/react/ui/src/index.ts"))) as Record<string, ComponentType<Record<string, unknown>>>;
+    // `Dynamic` writes hydration keys (data-hk) even without hydration: SSR bookkeeping, not markup
+    const render = (name: string, props: Record<string, unknown>): string => web.renderToString(() => web.createComponent(solid[name], props)).replace(/ data-hk="[^"]*"/g, "");
+    const parts = new Map(bricks.flatMap((b) => b.brick.parts.map((p) => [p.name, p] as const)));
+    const cases = brickCases(bricks);
+    for (const c of cases) {
+      if (!solid[c.part]) { problems.push(`${c.label}: no Solid component ${c.part}`); continue; }
+      const part = parts.get(c.part)!;
+      let want: string, got: string;
+      try { want = quiet(() => renderToStaticMarkup(createElement(react[c.part]!, reactProps(part, c.props), c.children || undefined))); }
+      catch (e) { problems.push(`${c.label}: React render failed: ${(e as Error).message}`); continue; }
+      try { got = render(c.part, { ...solidProps(part, c.props), ...(c.children ? { children: c.children } : {}) }); }
+      catch (e) { problems.push(`${c.label}: Solid render failed: ${(e as Error).message}`); continue; }
+      const a = normalizeHtml(want), b = normalizeHtml(got);
+      if (a !== b) problems.push(`${c.label}: DOM differs\n${firstDiff(a, b)}`);
+    }
+    // the organisms: every variant of every gallery block
+    const emitted = new Set(Object.keys(solid).filter((k) => typeof solid[k] === "function" && inputs.organisms.some((o) => o.value.name === k)));
+    const { cases: orgCases } = blockCases(inputs, emitted);
+    const states: HtmlStates = new Map();
+    for (const c of orgCases) {
+      let want: string, got: string;
+      try { want = quiet(() => renderToStaticMarkup(createElement(react[c.organism]!, c.props))); }
+      catch (e) { problems.push(`${c.label}: React render failed: ${(e as Error).message}`); continue; }
+      const { className, ...rest } = c.props as { className?: string };
+      try { got = render(c.organism, className === undefined ? rest : { ...rest, class: className }); }
+      catch (e) { problems.push(`${c.label}: Solid render failed: ${(e as Error).message}`); continue; }
+      const a = normalizeHtml(want), b = normalizeHtml(got);
+      if (a !== b) problems.push(`${c.label}: DOM differs\n${firstDiff(a, b)}`);
+      const main = /<main[\s>]/.test(got) ? got : /^\s*<(header|footer|nav)[\s>]/.test(got) ? got : `<main>${got}</main>`;
+      const doc = `<!DOCTYPE html>\n<html lang="en"><head><meta charset="utf-8"><title>${c.label}</title></head><body>${main}</body></html>`;
+      states.set(doc, [...(states.get(doc) ?? []), `solid ${c.label}`]);
+    }
+    const html = await validateStates(workspace, states);
+    problems.push(...html.problems.map((p) => `html: ${p}`));
+    return { ok: problems.length === 0, problems, cases: cases.length, blocks: orgCases.length, organisms: emitted.size, documents: html.documents };
+  } finally {
+    rmSync(out, { recursive: true, force: true });
+  }
+}
+
+function quiet<T>(f: () => T): T {
+  const err = console.error;
+  console.error = () => {};
+  try { return f(); } finally { console.error = err; }
+}
+
+function firstDiff(a: string, b: string): string {
+  let i = 0;
+  while (i < a.length && a[i] === b[i]) i++;
+  const from = Math.max(0, i - 160);
+  return `    react: ...${a.slice(from, i + 240)}\n    solid: ...${b.slice(from, i + 240)}`;
+}
diff --git a/xgen/check/src/spacing.ts b/xgen/check/src/spacing.ts
new file mode 100644
index 0000000..dcaef23
--- /dev/null
+++ b/xgen/check/src/spacing.ts
@@ -0,0 +1,57 @@
+// The `spacing` group of `xgen check`: a layout spacing option (an axis named gap, padding, margin, space or inset in a
+// ui or recipe variant table) names its values by the Tailwind step they set (Gap "4" = gap-4), never by pixels (Gap "16").
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import type { Plan } from "@ui8kit/xgen-generator";
+import { styleProblems } from "./style-zones";
+import { result, type CheckResult } from "./result";
+
+/** axes that hold spacing; their numeric keys must be the Tailwind step of the class */
+export const SPACING_AXES = /^(gap|gap-x|gap-y|padding|pad|margin|space|spacing|inset)$/;
+const STEP = /(?<![\w-])-?(?:gap(?:-[xy])?|p[xytrbl]?|m[xytrbl]?|space-[xy]|inset(?:-[xy])?)-(\d+(?:\.\d+)?)(?![\w.-])/g;
+
+/** the problems of one variant table: a numeric key of a spacing axis whose classes set another step */
+export function spacingKeyProblems(key: string, table: { byKey?: Record<string, Record<string, string>> }): string[] {
+  const problems: string[] = [];
+  for (const [axis, values] of Object.entries(table.byKey ?? {})) {
+    if (!SPACING_AXES.test(axis)) continue;
+    for (const [k, cls] of Object.entries(values)) {
+      if (!/^\d+(\.\d+)?$/.test(k)) continue;
+      const steps = [...cls.matchAll(STEP)].map((m) => m[1]!);
+      if (steps.length === 0 || steps.some((s) => s !== k)) problems.push(`xgen/${key}: ${axis} "${k}" sets ${steps.length ? steps.map((s) => `step ${s}`).join(", ") : "no spacing step"}; name a spacing value by its Tailwind step, not by pixels`);
+    }
+  }
+  return problems;
+}
+
+/** a fractional step (gap-1.5, px-2.5, size-3.5, top-0.5): 2 or 6 px, off the 8 + 4 grid; never in a spec, a builder or a kit asset */
+export const HALF_STEP = /(?<![\w-])-?(?:[a-z0-9-]+:)*(?:gap(?:-[xy])?|p[xytrbl]?|m[xytrbl]?|space-[xy]|inset(?:-[xy])?|top|right|bottom|left|start|end|size|w|h|min-[wh]|max-[wh]|translate-[xy]|scroll-[mp][xytrbl]?)-\d+\.\d+(?![\w.-])/g;
+
+/** the half steps of one file's text */
+export const halfSteps = (text: string): string[] => [...text.matchAll(HALF_STEP)].map((m) => m[0]);
+
+const walkFiles = (dir: string, ext: RegExp): string[] => (existsSync(dir) ? readdirSync(dir, { withFileTypes: true }).flatMap((e) => (e.isDirectory() ? walkFiles(join(dir, e.name), ext) : ext.test(e.name) ? [join(dir, e.name)] : [])) : []);
+
+/** every half step in the inputs people write: specs, the builder (screens/src/authoring) and the runtime assets copied into packages */
+export function halfStepProblems(xgenRoot: string): string[] {
+  const files = [
+    ...walkFiles(dirname(xgenPaths(xgenRoot).specs("ui")), /\.json$/),
+    ...walkFiles(join(xgenRoot, "screens", "src"), /\.ts$/),
+    ...walkFiles(join(xgenRoot, "runtimes"), /\.(ts|tsx|svelte|vue|css|templ|twig|latte|j2)$/).filter((f) => f.includes("/assets/")),
+  ].sort();
+  return files.flatMap((f) => halfSteps(readFileSync(f, "utf8")).map((c) => `xgen/${f.slice(xgenRoot.length + 1)}: ${c} is a half step (off the 8 + 4 grid); use the whole step above or below`));
+}
+
+export function checkSpacing(plan: Plan): CheckResult {
+  const problems: string[] = [...halfStepProblems(plan.xgenRoot)];
+  for (const dir of ["ui", "recipes"]) {
+    const base = xgenPaths(plan.xgenRoot).specs(dir);
+    if (!existsSync(base)) continue;
+    for (const f of readdirSync(base).filter((n) => n.endsWith(".variants.json")).sort()) {
+      problems.push(...spacingKeyProblems(`specs/${dir}/${f}`, JSON.parse(readFileSync(join(base, f), "utf8"))));
+    }
+  }
+  problems.push(...styleProblems(plan.workspace, "spacing"));
+  return result("spacing", "layout spacing options (gap, padding, margin, space, inset) are named by their Tailwind step, never by pixels; no half step (x.5) in any spec, builder or kit asset", problems);
+}
diff --git a/xgen/check/src/style-zones.ts b/xgen/check/src/style-zones.ts
new file mode 100644
index 0000000..9f96e1c
--- /dev/null
+++ b/xgen/check/src/style-zones.ts
@@ -0,0 +1,127 @@
+// The style rules of the corners, shadows, hardcode and spacing groups, applied to hand-written app code outside the specs:
+// apps/magazine/src. Only style text is read: the markup and <style> of .svelte files, .css files, and the string literals of
+// .ts files (class strings). Three.js / canvas engine code (packages/panorama) is outside every rule zone (rule 00) and never scanned.
+// Existing violations are recorded per file in rules/style-baselines/<package>.json: more fails, fewer asks for
+// `bun run rules:baseline`, so the list only shrinks.
+import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import ts from "typescript";
+import { cornerClasses, HARDCODE, shadowClasses } from "./audit-rules";
+
+export const STYLE_GROUPS = ["corners", "shadows", "hardcode", "spacing"] as const;
+export type StyleGroup = (typeof STYLE_GROUPS)[number];
+/** the hand-written packages under the style rules: name (the baseline file), package dir, scanned dir */
+export const STYLE_PACKAGES = [
+  { name: "magazine", dir: "apps/magazine", src: "src" },
+] as const;
+const BASELINE_DIR = join("rules", "style-baselines");
+/** the style packages present in this workspace: a standalone checkout (ui8kit/codegen) carries none of the hand-written apps */
+const present = (repo: string) => STYLE_PACKAGES.filter((p) => existsSync(join(repo, p.dir)));
+
+const walk = (dir: string): string[] => (existsSync(dir) ? readdirSync(dir).flatMap((n) => (statSync(join(dir, n)).isDirectory() ? walk(join(dir, n)) : [join(dir, n)])) : []);
+const scanned = (f: string): boolean => /\.(svelte|css|ts)$/.test(f) && !/\.test\.ts$/.test(f) && !f.endsWith(".d.ts");
+
+/** spacing steps of the 8px grid are even (step 2 = 8px); an odd or fractional step is 4px-grained, allowed only inside controls */
+const STEP = /(?<![\w-])-?(?:gap(?:-[xy])?|p[xytrbl]?|m[xytrbl]?|space-[xy]|inset(?:-[xy])?)-(\d+(?:\.\d+)?)(?![\w.-])/g;
+const GRADIENT_CLASS = /(?<![\w-])bg-(?:gradient|linear|radial|conic)-[\w-[\]]+/g;
+const GRADIENT_CSS = /(?:repeating-)?(?:linear|radial|conic)-gradient\(/g;
+const HEX = /#[0-9a-fA-F]{3,8}\b/g;
+
+/** what each group finds in class text (markup, class strings) */
+function classFindings(t: string): Record<StyleGroup, string[]> {
+  const all = (re: RegExp): string[] => [...t.matchAll(re)].map((m) => m[0]);
+  return {
+    corners: cornerClasses(t),
+    shadows: shadowClasses(t),
+    hardcode: [...all(HARDCODE.arbitrary), ...all(HARDCODE.palette), ...all(GRADIENT_CLASS)],
+    spacing: [...t.matchAll(STEP)].filter((m) => Number(m[1]) % 2 !== 0).map((m) => m[0]),
+  };
+}
+
+/** what each group finds in CSS (declarations only) */
+function cssFindings(t: string): Record<StyleGroup, string[]> {
+  const decl = (prop: RegExp): Array<[string, string]> => [...t.matchAll(/([\w-]+)\s*:\s*([^;{}]+)/g)].filter((m) => prop.test(m[1]!)).map((m) => [m[1]!, m[2]!.trim()]);
+  const px = (v: string): number[] => [...v.matchAll(/(-?\d+(?:\.\d+)?)px/g)].map((m) => Math.abs(Number(m[1])));
+  return {
+    corners: decl(/^border(-[a-z]+)*-radius$/).filter(([, v]) => !v.includes("var(--radius") && !/^(0|inherit)$/.test(v)).map(([p, v]) => `${p}: ${v}`),
+    shadows: decl(/^(box-shadow|filter)$/).filter(([p, v]) => (p === "filter" ? v.includes("drop-shadow") : v !== "none" && !/^(inset\s+)?0 0 0 /.test(v))).map(([p, v]) => `${p}: ${v}`),
+    hardcode: [...[...t.matchAll(GRADIENT_CSS)].map((m) => m[0]), ...decl(/./).flatMap(([p, v]) => [...v.matchAll(HEX)].map((m) => `${p}: ${m[0]}`))],
+    spacing: decl(/^(margin|padding|gap|row-gap|column-gap|inset)(-[a-z]+)*$/).filter(([, v]) => px(v).some((n) => n % 8 !== 0)).map(([p, v]) => `${p}: ${v}`),
+  };
+}
+
+const merge = (a: Record<StyleGroup, string[]>, b: Record<StyleGroup, string[]>): Record<StyleGroup, string[]> =>
+  Object.fromEntries(STYLE_GROUPS.map((g) => [g, [...a[g], ...b[g]]])) as Record<StyleGroup, string[]>;
+const none = (): Record<StyleGroup, string[]> => ({ corners: [], shadows: [], hardcode: [], spacing: [] });
+
+/** the string literals of a TS source (class strings); template literal chunks included */
+function tsStrings(src: string): string {
+  const sf = ts.createSourceFile("x.ts", src, ts.ScriptTarget.Latest, true);
+  const out: string[] = [];
+  (function visit(n: ts.Node): void {
+    const lit = ts.isStringLiteral(n) || ts.isNoSubstitutionTemplateLiteral(n) || ts.isTemplateHead(n) || ts.isTemplateMiddle(n) || ts.isTemplateTail(n);
+    // a class string: not code (a shader, a CSS block), not a bare word (a key such as "shadow")
+    if (lit && !/[\n;{]/.test(n.text) && !/^[a-z]+$/.test(n.text)) out.push(n.text);
+    else if (ts.isImportDeclaration(n) || ts.isExportDeclaration(n)) return;
+    ts.forEachChild(n, visit);
+  })(sf);
+  return out.join("\n");
+}
+
+/** the findings of one file, by group */
+export function styleFindings(file: string, text: string): Record<StyleGroup, string[]> {
+  if (file.endsWith(".css")) return cssFindings(text);
+  if (file.endsWith(".ts")) return classFindings(tsStrings(text));
+  const styles = [...text.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)].map((m) => m[1]!).join("\n");
+  const markup = text.replace(/<script[^>]*>[\s\S]*?<\/script>/g, "").replace(/<style[^>]*>[\s\S]*?<\/style>/g, "");
+  // class text of the markup: class="..." values, the string literals of class={...}, class:name directives
+  const classes = [
+    ...[...markup.matchAll(/\bclass="([^"]*)"/g)].map((m) => m[1]!),
+    ...[...markup.matchAll(/\bclass=\{([^}]*)\}/g)].map((m) => tsStrings(m[1]!)),
+    ...[...markup.matchAll(/\bclass:([\w-]+)/g)].map((m) => m[1]!),
+  ].join("\n");
+  return merge(classFindings(classes), styles ? cssFindings(styles) : none());
+}
+
+type Counts = Record<StyleGroup, Record<string, number>>;
+function scanPackage(repo: string, p: (typeof STYLE_PACKAGES)[number]): { counts: Counts; found: Record<StyleGroup, Record<string, string[]>> } {
+  const base = join(repo, p.dir);
+  const counts = Object.fromEntries(STYLE_GROUPS.map((g) => [g, {}])) as Counts;
+  const found = Object.fromEntries(STYLE_GROUPS.map((g) => [g, {}])) as Record<StyleGroup, Record<string, string[]>>;
+  for (const f of walk(join(base, p.src)).filter(scanned).sort()) {
+    const rel = relative(base, f);
+    const r = styleFindings(f, readFileSync(f, "utf8"));
+    for (const g of STYLE_GROUPS) if (r[g].length) { counts[g][rel] = r[g].length; found[g][rel] = r[g]; }
+  }
+  return { counts, found };
+}
+
+const baselinePath = (repo: string, name: string): string => join(repo, BASELINE_DIR, `${name}.json`);
+
+/** the problems of one group over every style package against its baseline */
+export function styleProblems(repo: string, group: StyleGroup): string[] {
+  const problems: string[] = [];
+  for (const p of present(repo)) {
+    const { counts, found } = scanPackage(repo, p);
+    const file = baselinePath(repo, p.name);
+    const recorded: Record<string, number> = existsSync(file) ? (JSON.parse(readFileSync(file, "utf8")).counts?.[group] ?? {}) : {};
+    for (const f of new Set([...Object.keys(counts[group]), ...Object.keys(recorded)])) {
+      const n = counts[group][f] ?? 0, allowed = recorded[f] ?? 0;
+      if (n > allowed) problems.push(`${p.dir}/${f}: ${n} ${group} finding(s), ${allowed} recorded: ${found[group][f]!.slice(0, 6).join(", ")}`);
+      else if (n < allowed) problems.push(`${relative(repo, file)}: ${p.dir}/${f} now holds ${n} ${group} finding(s), ${allowed} recorded; run bun run rules:baseline`);
+    }
+  }
+  return problems;
+}
+
+/** write rules/style-baselines/<package>.json (part of `bun run rules:baseline`) */
+export function writeStyleBaselines(repo: string): string[] {
+  mkdirSync(join(repo, BASELINE_DIR), { recursive: true });
+  return present(repo).map((p) => {
+    const { counts } = scanPackage(repo, p);
+    const totals = Object.fromEntries(STYLE_GROUPS.map((g) => [g, Object.values(counts[g]).reduce((a, b) => a + b, 0)]));
+    const doc = { $comment: "Recorded style violations (groups corners, shadows, hardcode, spacing of xgen check) of hand-written code, per group and file. New ones fail; regenerate with: bun run rules:baseline", package: p.dir, totals, counts };
+    writeFileSync(baselinePath(repo, p.name), JSON.stringify(doc, null, 2) + "\n");
+    return `${relative(repo, baselinePath(repo, p.name))}: ${STYLE_GROUPS.map((g) => `${g} ${totals[g]}`).join(", ")}`;
+  });
+}
diff --git a/xgen/check/src/templ/blocks.ts b/xgen/check/src/templ/blocks.ts
new file mode 100644
index 0000000..b670236
--- /dev/null
+++ b/xgen/check/src/templ/blocks.ts
@@ -0,0 +1,87 @@
+// Parity cases of the organisms: every variant of every gallery block, with the props the gallery gives it
+// (blockNode: sample, variant axes, case copy, id, level 2, landmark label), evaluated to JSON over the dictionary
+// and the fixtures. Both runtimes get the same JSON; event handlers are left out (the templ output is static).
+import { blockKey, blockNode, galleryOf, isGroup, isOp, isRef, type Inputs, type OrganismSpec, type Value } from "@ui8kit/xgen-screens";
+import { readPath, type ReadOptions } from "../../../runtimes/core/assets/app/core";
+import { tpl, fmtMoney, fmtNumber, at, pageWindow, fitCols, uniqLabel } from "../../../runtimes/core/assets/ts/format";
+
+export interface OrgCase { label: string; organism: string; props: Record<string, unknown> }
+
+type Scope = Record<string, unknown>;
+const get = (v: unknown, path: string[]): unknown => path.reduce<unknown>((o, k) => (o == null ? undefined : (o as Record<string, unknown>)[k]), v);
+
+/** a Value read the way the TypeScript output reads it */
+export function evaluate(v: Value, scope: Scope, presets: Scope): unknown {
+  if (v === null || typeof v !== "object") return v;
+  if (isRef(v)) { const [h, ...rest] = v.$.split("."); return get(scope[h!], rest); }
+  if (isGroup(v)) {
+    const out: Record<string, unknown> = { ...((v["..."] !== undefined ? evaluate(v["..."]!, scope, presets) : {}) as object) };
+    for (const [k, x] of Object.entries(v)) if (k !== "...") out[k] = evaluate(x, scope, presets);
+    return out;
+  }
+  if (!isOp(v)) return undefined;
+  const a = v.args.map((x) => evaluate(x, scope, presets)) as any[];
+  switch (v.op) {
+    case "list": return a;
+    case "tpl": return tpl(a[0], ...a.slice(1));
+    case "uniq": return uniqLabel(a[0]);
+    case "money": return fmtMoney(a[0], a[1]);
+    case "num": return fmtNumber(a[0]);
+    case "at": return at(a[0], a[1]);
+    case "pageWindow": return pageWindow(a[0], a[1]);
+    case "fitCols": return fitCols(a[0], a[1]);
+    case "preset": return get(presets[String(v.args[0])], String(v.args[1]).split("."));
+    case "undef": return undefined;
+    case "cond": return a[0] ? a[1] : a[2];
+    case "eq": return a[0] === a[1];
+    case "str": return a[0] == null ? undefined : String(a[0]);
+    case "coalesce": return a.find((x) => x != null);
+    case "len": return a[0]?.length ?? 0;
+    case "range": return Array.from({ length: a[0] }, (_, i) => i);
+    case "pick": return (a[0] ?? []).find((i: any) => i.id === a[1]);
+    case "where": return (a[0] ?? []).filter((i: any) => !a[2] || i[a[1]] === a[2]);
+    case "count": return (a[0] ?? []).filter((i: any) => i[a[1]]).length;
+    case "firstOf": return a[0]?.[0]?.[String(v.args[1])] ?? "";
+    case "nth": return a[0]?.[a[1]];
+    case "words": return String(a[0] ?? "").split(" ");
+    case "and": return a.reduce((x, y) => x && y);
+    case "or": return a.reduce((x, y) => x || y);
+    case "not": return !a[0];
+    case "ne": return a[0] !== a[1];
+    case "add": return a[0] + a[1];
+    case "sub": return a[0] - a[1];
+    case "mul": return a[0] * a[1];
+    case "has": return a[0] != null;
+    case "nbsp": return String(a[0] ?? "").replaceAll(" ", "\u00a0");
+  }
+  throw new Error(`templ parity: op ${v.op} in block props`);
+}
+
+export function blockCases(inputs: Inputs, emitted: Set<string>): { cases: OrgCase[]; skipped: string[] } {
+  const organisms = Object.fromEntries(inputs.organisms.map((o) => [o.value.name, o.value as OrganismSpec]));
+  const presets = Object.fromEntries(inputs.presets.map((p) => [p.value.name, (p.value as unknown as { values: unknown }).values]));
+  const collections = new Map(inputs.collections.map((c) => [c.value.collection, c.value.entries as unknown[]]));
+  // the lookups the hosts pass as CODEX (runtime/codex): media, users and the taxonomy terms
+  const all = inputs.collections.flatMap((c) => c.value.entries as { kind: string }[]);
+  const codex: ReadOptions = { media: all.filter((e) => e.kind === "media"), users: all.filter((e) => e.kind === "user"), terms: inputs.taxonomies.flatMap((t) => t.value.terms) };
+  const cases: OrgCase[] = [], skipped: string[] = [];
+  for (const b of galleryOf(inputs.blocks.map((x) => x.value))) {
+    const scope: Scope = { ui: inputs.dictionary.value };
+    for (const d of b.data) scope[d.as] = (collections.get(d.collection) ?? []).map((e) => Object.fromEntries(Object.entries(d.fields).map(([n, p]) => [n, readPath(e, p, codex)])));
+    for (const v of b.variants) {
+      const key = blockKey(b);
+      const extra: Record<string, Value> = { id: `${key}-${v.id}`, level: 2, landmarkLabel: `${key} ${v.id}` };
+      const node = blockNode(b, v, extra, organisms) as { organism: string; props?: Record<string, Value> };
+      const o = organisms[node.organism]!;
+      if (!emitted.has(node.organism)) { skipped.push(`${key}.${v.id}: ${node.organism} has no templ output`); continue; }
+      const props: Record<string, unknown> = {};
+      for (const [k, x] of Object.entries(node.props ?? {})) {
+        if (!o.props.some((p) => p.name === k) && k !== "className") continue;
+        const val = evaluate(x, scope, presets);
+        if (val !== undefined) props[k] = val;
+      }
+      cases.push({ label: `${key}.${v.id} (${node.organism})`, organism: node.organism, props });
+    }
+  }
+  return { cases, skipped };
+}
diff --git a/xgen/check/src/templ/bricks.ts b/xgen/check/src/templ/bricks.ts
new file mode 100644
index 0000000..86e9068
--- /dev/null
+++ b/xgen/check/src/templ/bricks.ts
@@ -0,0 +1,35 @@
+// Parity cases of the bricks: every part with its defaults, each enum value of each prop and each boolean prop set,
+// rendered by the generated React package (react-dom/server) as the reference of the TypeScript runtimes.
+import type { LoadedBrick, PartDef, PropDef } from "@ui8kit/xgen-spec";
+import { reactPropName } from "@ui8kit/xgen-spec";
+import { goPackageOf } from "@ui8kit/xgen-runtime-templ";
+
+export interface ParityCase { name: string; label: string; part: string; props: Record<string, unknown>; children: string }
+export const CHILD_TEXT = "Content";
+
+const settable = (p: PropDef): boolean => !p.passthrough && p.type !== "children" && p.type !== "items" && p.type !== "attrs" && p.name !== "Class";
+
+export function brickCases(bricks: LoadedBrick[]): ParityCase[] {
+  const out: ParityCase[] = [];
+  for (const { brick } of bricks) for (const part of brick.parts) {
+    const children = part.props.some((p) => p.type === "children") ? CHILD_TEXT : "";
+    const name = `${brick.dir}/${brick.file ?? brick.dir}/${part.name}`;
+    const add = (id: string, props: Record<string, unknown>) => out.push({ name, label: `${goPackageOf(brick)}.${part.name} ${id}`, part: part.name, props, children });
+    add("defaults", {});
+    for (const p of part.props.filter(settable)) {
+      if (p.enumValues?.length) for (const v of p.enumValues) add(`${p.name}=${v}`, { [p.name]: p.type === "int" ? Number(v) : v });
+      else if (p.type === "bool") add(`${p.name}`, { [p.name]: true });
+    }
+  }
+  return out;
+}
+
+/** canonical props (Go field names) -> the props of the React component */
+export function reactProps(part: PartDef, props: Record<string, unknown>): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(props)) {
+    const d = part.props.find((p) => p.name === k);
+    if (d) out[k === "Class" ? "className" : reactPropName(d)] = v;
+  }
+  return out;
+}
diff --git a/xgen/check/src/templ/index.ts b/xgen/check/src/templ/index.ts
new file mode 100644
index 0000000..b24b3b5
--- /dev/null
+++ b/xgen/check/src/templ/index.ts
@@ -0,0 +1,101 @@
+// The templ gate: templ generate, go vet and go build of the generated Go package, then DOM parity of every brick case
+// with the React package (the reference of the TypeScript runtimes, which the e2e pair test already holds equal).
+import { validateStates, type HtmlStates } from "../e2e/html";
+import { spawnSync } from "node:child_process";
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { createElement, type ComponentType } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import type { Inputs } from "@ui8kit/xgen-screens";
+import { blockCases } from "./blocks";
+import { TEMPL_VERSION } from "@ui8kit/xgen-runtime-templ";
+import { brickCases, reactProps, type ParityCase } from "./bricks";
+import { normalizeHtml } from "./normalize";
+
+export const TEMPL_DIR = "packages/templ/ui";
+
+export interface TemplResult { ok: boolean; problems: string[]; cases: number; blocks: number; organisms: number; skipped?: string; notCovered?: string[]; documents?: number }
+
+function run(cmd: string, args: string[], cwd: string, input?: string): { ok: boolean; out: string; err: string } {
+  const r = spawnSync(cmd, args, { cwd, input, encoding: "utf8", maxBuffer: 256 * 1024 * 1024 });
+  return { ok: r.status === 0, out: r.stdout ?? "", err: (r.stderr ?? "") + (r.error ? String(r.error) : "") };
+}
+
+/** the templ CLI: on the PATH, in ~/go/bin, or through go run at the pinned version */
+function templCmd(): [string, string[]] {
+  if (run("templ", ["version"], ".").ok) return ["templ", []];
+  const local = join(homedir(), "go", "bin", "templ");
+  if (existsSync(local)) return [local, []];
+  return ["go", ["run", `github.com/a-h/templ/cmd/templ@${TEMPL_VERSION}`]];
+}
+
+export async function templCheck(workspace: string, bricks: LoadedBrick[], inputs: Inputs): Promise<TemplResult> {
+  const dir = join(workspace, TEMPL_DIR);
+  if (!run("go", ["version"], ".").ok) return { ok: true, problems: [], cases: 0, blocks: 0, organisms: 0, skipped: "no Go toolchain" };
+  const problems: string[] = [];
+  const [cmd, pre] = templCmd();
+  const steps: Array<[string, string, string[]]> = [["templ generate", cmd, [...pre, "generate"]], ["go mod tidy", "go", ["mod", "tidy"]], ["go vet", "go", ["vet", "./..."]], ["go build", "go", ["build", "./..."]]];
+  for (const [what, c, args] of steps) {
+    const r = run(c, args, dir);
+    if (!r.ok) return { ok: false, problems: [`${what}: ${r.err.trim().split("\n").slice(-12).join("\n")}`], cases: 0, blocks: 0, organisms: 0 };
+  }
+  const cases: ParityCase[] = brickCases(bricks);
+  const go = run("go", ["run", "./cmd/parity"], dir, JSON.stringify(cases.map((c) => ({ name: c.name, props: c.props, children: c.children }))));
+  if (!go.ok) return { ok: false, problems: [`go run ./cmd/parity: ${go.err.trim().split("\n").slice(-12).join("\n")}`], cases: cases.length, blocks: 0, organisms: 0 };
+  const got = JSON.parse(go.out) as string[];
+  const ui = (await import(join(workspace, "packages/react/ui/src/index.ts"))) as Record<string, ComponentType<Record<string, unknown>>>;
+  const parts = new Map(bricks.flatMap((b) => b.brick.parts.map((p) => [p.name, p] as const)));
+  cases.forEach((c, i) => {
+    const Comp = ui[c.part];
+    if (!Comp) { problems.push(`${c.label}: no React component ${c.part}`); return; }
+    const props = reactProps(parts.get(c.part)!, c.props);
+    let want: string;
+    try { want = quiet(() => renderToStaticMarkup(createElement(Comp, props, c.children || undefined))); }
+    catch (e) { problems.push(`${c.label}: React render failed: ${(e as Error).message}`); return; }
+    const a = normalizeHtml(want), b = normalizeHtml(got[i] ?? "");
+    if (a !== b) problems.push(`${c.label}: DOM differs\n    react: ${a.slice(0, 600)}\n    templ: ${b.slice(0, 600)}`);
+  });
+  // the organisms: every variant of every gallery block
+  const emitted = new Set(readdirSync(join(dir, "blocks")).filter((f) => f.endsWith(".templ")).map((f) => /templ (\w+)\(p \w+Props\)/.exec(readFileSync(join(dir, "blocks", f), "utf8"))?.[1]).filter((x): x is string => !!x));
+  const { cases: orgCases, skipped } = blockCases(inputs, emitted);
+  const gob = run("go", ["run", "./cmd/parity-blocks"], dir, JSON.stringify(orgCases.map((c) => ({ name: c.organism, props: c.props }))));
+  if (!gob.ok) return { ok: false, problems: [...problems, `go run ./cmd/parity-blocks: ${gob.err.trim().split("\n").slice(-12).join("\n")}`], cases: cases.length, blocks: 0, organisms: emitted.size };
+  const gotB = JSON.parse(gob.out) as string[];
+  orgCases.forEach((c, i) => {
+    const Comp = ui[c.organism];
+    if (!Comp) { problems.push(`${c.label}: no React component`); return; }
+    let want: string;
+    try { want = quiet(() => renderToStaticMarkup(createElement(Comp, c.props))); }
+    catch (e) { problems.push(`${c.label}: React render failed: ${(e as Error).message}`); return; }
+    const a = normalizeHtml(want), b = normalizeHtml(gotB[i] ?? "");
+    if (a !== b) problems.push(`${c.label}: DOM differs\n${firstDiff(a, b)}`);
+  });
+  // html-validate over the templ output of every block case, each in a document of its own (identical documents once)
+  const states: HtmlStates = new Map();
+  orgCases.forEach((c, i) => {
+    const body = gotB[i] ?? "";
+    const main = /<main[\s>]/.test(body) ? body : /^\s*<(header|footer|nav)[\s>]/.test(body) ? body : `<main>${body}</main>`;
+    const doc = `<!DOCTYPE html>\n<html lang="en"><head><meta charset="utf-8"><title>${c.label}</title></head><body>${main}</body></html>`;
+    states.set(doc, [...(states.get(doc) ?? []), `templ ${c.label}`]);
+  });
+  const html = await validateStates(workspace, states);
+  problems.push(...html.problems.map((p) => `html: ${p}`));
+  return { ok: problems.length === 0, problems, cases: cases.length, blocks: orgCases.length, organisms: emitted.size, notCovered: skipped, documents: html.documents };
+}
+
+/** React's development warnings (a controlled field without onChange) are not findings here */
+function quiet<T>(f: () => T): T {
+  const err = console.error;
+  console.error = () => {};
+  try { return f(); } finally { console.error = err; }
+}
+
+/** the two texts around their first difference */
+export function firstDiff(a: string, b: string): string {
+  let i = 0;
+  while (i < a.length && a[i] === b[i]) i++;
+  const from = Math.max(0, i - 160);
+  return `    react: ...${a.slice(from, i + 240)}\n    templ: ...${b.slice(from, i + 240)}`;
+}
diff --git a/xgen/check/src/templ/normalize.ts b/xgen/check/src/templ/normalize.ts
new file mode 100644
index 0000000..6aa39ea
--- /dev/null
+++ b/xgen/check/src/templ/normalize.ts
@@ -0,0 +1,24 @@
+// DOM normalisation for the templ parity: the node tree with attributes by name, class tokens sorted and merged, text trimmed.
+// Runtimes differ in incidental ways (attribute order, self-closing syntax, `class=""`, SSR comments); the contract is the tree.
+import { parseFragment } from "parse5";
+
+type P5 = { nodeName: string; tagName?: string; value?: string; attrs?: Array<{ name: string; value: string }>; childNodes?: P5[]; content?: P5 };
+
+function node(n: P5): string | null {
+  if (n.nodeName === "#text") { const t = (n.value ?? "").replace(/\s+/g, " ").trim(); return t || null; }
+  if (!n.tagName) return null;
+  const attrs = (n.attrs ?? [])
+    .map((a) => (a.name === "class" ? { name: a.name, value: a.value.split(/\s+/).filter(Boolean).sort().join(" ") } : a))
+    .filter((a) => !(a.name === "class" && a.value === ""))
+    // an empty text-field value is the same as none (React writes value="" for a controlled empty field; Go strings cannot tell them apart)
+    .filter((a) => !(a.name === "value" && a.value === "" && n.tagName === "input"))
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .map((a) => ` ${a.name}="${a.value}"`)
+    .join("");
+  const kids = (n.content ?? n).childNodes?.map(node).filter((x): x is string => x !== null) ?? [];
+  return `<${n.tagName}${attrs}>${kids.join("")}</${n.tagName}>`;
+}
+
+export function normalizeHtml(html: string): string {
+  return (parseFragment(html) as unknown as P5).childNodes!.map(node).filter(Boolean).join("");
+}
diff --git a/xgen/check/src/twig/index.ts b/xgen/check/src/twig/index.ts
new file mode 100644
index 0000000..dc3c166
--- /dev/null
+++ b/xgen/check/src/twig/index.ts
@@ -0,0 +1,109 @@
+// The Twig gate: composer install of the generated package, then every brick case and every block case rendered with
+// real Twig (PHP + twig/twig) through bin/parity.php, DOM parity with the React package (the reference of the
+// TypeScript runtimes) and html-validate of every block case. Skips when PHP or composer is missing, like templ without Go.
+import { validateStates, type HtmlStates } from "../e2e/html";
+import { spawnSync } from "node:child_process";
+import { existsSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { createElement, type ComponentType } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import type { Inputs } from "@ui8kit/xgen-screens";
+import { organismTemplate, partTemplate, twig, type Dialect } from "@ui8kit/xgen-runtime-twig";
+import { blockCases } from "../templ/blocks";
+import { brickCases, reactProps } from "../templ/bricks";
+import { normalizeHtml } from "../templ/normalize";
+import { firstDiff } from "../templ";
+
+export const TWIG_DIR = "packages/twig/ui";
+
+export interface TwigResult { ok: boolean; problems: string[]; cases: number; blocks: number; organisms: number; skipped?: string; php?: string; documents?: number }
+
+export function run(cmd: string, args: string[], cwd: string, input?: string): { ok: boolean; out: string; err: string } {
+  const r = spawnSync(cmd, args, { cwd, input, encoding: "utf8", maxBuffer: 256 * 1024 * 1024 });
+  return { ok: r.status === 0, out: r.stdout ?? "", err: (r.stderr ?? "") + (r.error ? String(r.error) : "") };
+}
+
+function quiet<T>(f: () => T): T {
+  const err = console.error;
+  console.error = () => {};
+  try { return f(); } finally { console.error = err; }
+}
+
+const differs = (label: string, a: string, b: string, rt: string): string => `${label}: DOM differs\n${firstDiff(a, b).replace("    templ:", `    ${rt}: `)}`;
+
+export async function twigCheck(workspace: string, bricks: LoadedBrick[], inputs: Inputs): Promise<TwigResult> {
+  return phpTemplateCheck(workspace, TWIG_DIR, bricks, inputs, twig);
+}
+
+/** a PHP template package (Twig, Latte): composer install, php -l of its helpers, then parity through its bin/parity.php */
+export async function phpTemplateCheck(workspace: string, pkgDir: string, bricks: LoadedBrick[], inputs: Inputs, d: Dialect): Promise<TwigResult> {
+  const dir = join(workspace, pkgDir);
+  const none = { cases: 0, blocks: 0, organisms: 0 };
+  const php = run("php", ["-r", "echo PHP_VERSION;"], ".");
+  if (!php.ok) return { ok: true, problems: [], ...none, skipped: "no PHP" };
+  const composer = run("composer", ["--version"], ".");
+  if (!composer.ok && !existsSync(join(dir, "vendor", "autoload.php"))) return { ok: true, problems: [], ...none, skipped: "no composer" };
+  if (composer.ok) {
+    const r = run("composer", ["install", "--no-interaction", "--quiet", "--no-progress"], dir);
+    if (!r.ok) return { ok: false, problems: [`composer install: ${r.err.trim().split("\n").slice(-12).join("\n")}`], ...none };
+  }
+  const lint = readdirSync(join(dir, "php")).filter((f) => f.endsWith(".php")).map((f) => run("php", ["-l", join("php", f)], dir)).filter((r) => !r.ok);
+  if (lint.length) return { ok: false, problems: lint.map((r) => `php -l: ${r.out.trim()}`), ...none };
+  const render = (reqs: Array<{ template: string; vars: Record<string, unknown> }>): string[] | string => {
+    const r = run("php", ["bin/parity.php"], dir, JSON.stringify(reqs));
+    if (!r.ok) return `php bin/parity.php: ${r.err.trim().split("\n").slice(-12).join("\n")}`;
+    return JSON.parse(r.out) as string[];
+  };
+  return { ...(await templateParity(workspace, dir, bricks, inputs, d, render)), php: php.out.trim() };
+}
+
+/** every brick and block case rendered by a template runtime (render: requests -> HTML, or an error text), DOM parity with React, html-validate of the block cases */
+export async function templateParity(workspace: string, dir: string, bricks: LoadedBrick[], inputs: Inputs, d: Dialect, render: (reqs: Array<{ template: string; vars: Record<string, unknown> }>) => string[] | string): Promise<TwigResult> {
+  const none = { cases: 0, blocks: 0, organisms: 0 };
+  const rt = d.name;
+  const problems: string[] = [];
+  const ui = (await import(join(workspace, "packages/react/ui/src/index.ts"))) as Record<string, ComponentType<Record<string, unknown>>>;
+  const parts = new Map(bricks.flatMap((b) => b.brick.parts.map((p) => [p.name, { brick: b.brick, part: p }] as const)));
+  // the bricks: every part with its defaults, each enum value and each boolean prop
+  const cases = brickCases(bricks);
+  const got = render(cases.map((c) => ({ template: partTemplate(parts.get(c.part)!.brick, parts.get(c.part)!.part, d), vars: { p: c.props, children: c.children } })));
+  if (typeof got === "string") return { ok: false, problems: [got], ...none, cases: cases.length };
+  cases.forEach((c, i) => {
+    const Comp = ui[c.part];
+    if (!Comp) { problems.push(`${c.label}: no React component ${c.part}`); return; }
+    if (got[i]!.startsWith("ERROR: ")) { problems.push(`${c.label}: ${got[i]!.slice(0, 400)}`); return; }
+    let want: string;
+    try { want = quiet(() => renderToStaticMarkup(createElement(Comp, reactProps(parts.get(c.part)!.part, c.props), c.children || undefined))); }
+    catch (e) { problems.push(`${c.label}: React render failed: ${(e as Error).message}`); return; }
+    const a = normalizeHtml(want), b = normalizeHtml(got[i]!);
+    if (a !== b) problems.push(differs(c.label, a, b, rt));
+  });
+  // the organisms: every variant of every gallery block
+  const files = new Set(readdirSync(join(dir, "blocks")).map((f) => `blocks/${f}`));
+  const names = new Set(inputs.organisms.map((o) => o.value.name).filter((n) => files.has(organismTemplate(n, d))));
+  const { cases: orgCases } = blockCases(inputs, names);
+  const gotB = render(orgCases.map((c) => ({ template: organismTemplate(c.organism, d), vars: { p: c.props } })));
+  if (typeof gotB === "string") return { ok: false, problems: [...problems, gotB], cases: cases.length, blocks: orgCases.length, organisms: names.size };
+  orgCases.forEach((c, i) => {
+    const Comp = ui[c.organism];
+    if (!Comp) { problems.push(`${c.label}: no React component`); return; }
+    if (gotB[i]!.startsWith("ERROR: ")) { problems.push(`${c.label}: ${gotB[i]!.slice(0, 400)}`); return; }
+    let want: string;
+    try { want = quiet(() => renderToStaticMarkup(createElement(Comp, c.props))); }
+    catch (e) { problems.push(`${c.label}: React render failed: ${(e as Error).message}`); return; }
+    const a = normalizeHtml(want), b = normalizeHtml(gotB[i]!);
+    if (a !== b) problems.push(differs(c.label, a, b, rt));
+  });
+  // html-validate over the template output of every block case, each in a document of its own (identical documents once)
+  const states: HtmlStates = new Map();
+  orgCases.forEach((c, i) => {
+    const body = gotB[i] ?? "";
+    const main = /<main[\s>]/.test(body) ? body : /^\s*<(header|footer|nav)[\s>]/.test(body) ? body : `<main>${body}</main>`;
+    const doc = `<!DOCTYPE html>\n<html lang="en"><head><meta charset="utf-8"><title>${c.label}</title></head><body>${main}</body></html>`;
+    states.set(doc, [...(states.get(doc) ?? []), `${rt} ${c.label}`]);
+  });
+  const html = await validateStates(workspace, states);
+  problems.push(...html.problems.map((p) => `html: ${p}`));
+  return { ok: problems.length === 0, problems, cases: cases.length, blocks: orgCases.length, organisms: names.size, documents: html.documents };
+}
diff --git a/xgen/check/src/visual.ts b/xgen/check/src/visual.ts
new file mode 100644
index 0000000..dd693f5
--- /dev/null
+++ b/xgen/check/src/visual.ts
@@ -0,0 +1,145 @@
+// `xgen visual`: the pixel gate of a refactor. Shoots every route of every screen in every host, in the light and the dark
+// theme (1600 wide, full page; the first route of every screen also at 390), and writes a manifest of PNG hashes; a dark state
+// is named like its light twin plus `__dark`. `--against <dir>` compares with a saved run;
+// a state the saved run has for another runtime only (a host added since) must give the same pixels as that runtime did.
+import { createHash } from "node:crypto";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { chromium, type Browser, type BrowserContext } from "playwright-core";
+import { hostedScreens, planBuild } from "@ui8kit/xgen-generator";
+import { screenKey } from "@ui8kit/xgen-runtime-core";
+import { serve, waitPort } from "./e2e/common";
+
+export interface VisualReport { dir: string; states: number; changed: string[]; missing: string[]; errors: string[] }
+
+type Theme = "light" | "dark";
+type State = { name: string; url: string; width: number; theme: Theme };
+const THEMES: Theme[] = ["light", "dark"];
+
+/** the routes a screen answers: its routes table, the gallery index and pages, a sample record for a list */
+async function routesOf(browser: Browser, origin: string, key: string, spec: { routes?: Array<{ path: string }>; gallery?: boolean }): Promise<string[]> {
+  if (spec.gallery) {
+    const page = await browser.newPage();
+    await page.goto(`${origin}/${key}/#/`, { waitUntil: "networkidle" });
+    const blocks = await page.$$eval('[data-testid="block-link"]', (as) => as.map((a) => a.getAttribute("data-block") ?? ""));
+    await page.close();
+    return ["", ...blocks.filter(Boolean)];
+  }
+  const routes = (spec.routes ?? [{ path: "" }]).map((r) => r.path.replace(/:id$/, "plan-team"));
+  // the catalog: its index and its composed pages; a category page shows the same variants as the gallery, which is shot already
+  return key === "catalog" ? routes.filter((r) => r === "" || r === "pages" || r.startsWith("page-")) : routes;
+}
+
+/** Google Fonts answers one CSS URL in two ways: per-subset woff2 files, or now and then `font?kit=` files whose glyphs
+ * raster a shade apart. The gate takes the woff2 answer (asked again up to 10 times) and keeps it for the whole run, in
+ * every context. */
+async function pinGoogleFonts(ctx: BrowserContext, css: Map<string, Promise<string>>): Promise<void> {
+  await ctx.route("https://fonts.googleapis.com/**", async (route) => {
+    const url = route.request().url();
+    const headers = { "user-agent": route.request().headers()["user-agent"] ?? "" };
+    if (!css.has(url)) {
+      css.set(url, (async () => {
+        let body = "";
+        for (let i = 0; i < 10; i++) {
+          body = await (await fetch(url, { headers })).text();
+          if (!body.includes("font?kit=")) break;
+        }
+        return body;
+      })());
+    }
+    const body = await css.get(url)!.catch(() => undefined);
+    if (body === undefined) return route.continue();
+    await route.fulfill({ status: 200, contentType: "text/css; charset=utf-8", headers: { "access-control-allow-origin": "*" }, body });
+  });
+}
+
+export async function runVisual(workspace: string, o: { out: string; against?: string; only?: string[] }): Promise<VisualReport> {
+  const plan = planBuild(workspace);
+  const dir = resolve(workspace, o.out);
+  mkdirSync(dir, { recursive: true });
+  const browser = await chromium.launch({ executablePath: process.env.CHROME ?? "/usr/bin/google-chrome", args: ["--no-sandbox"] });
+  const manifest: Record<string, string> = {};
+  const fontCss = new Map<string, Promise<string>>();
+  const errors: string[] = [];
+  const procs = [];
+  try {
+    for (const { app, dir: appDir } of plan.apps) {
+      procs.push(serve(appDir));
+      const origin = `http://127.0.0.1:${app.port}`;
+      await waitPort(origin);
+      const states: State[] = [];
+      for (const s of hostedScreens(app, plan.inputs.screens.map((x) => x.value)).screens) {
+        const key = screenKey(s.id);
+        if (o.only && !o.only.some((p) => key.startsWith(p))) continue;
+        const routes = await routesOf(browser, origin, key, s as never);
+        routes.forEach((r, i) => {
+          const url = `${origin}/${key}/#/${r}`;
+          const label = `${app.runtime}__${key}__${r.replace(/\//g, "~") || "index"}`;
+          for (const theme of THEMES) {
+            const tag = theme === "light" ? "" : `__${theme}`;
+            states.push({ name: `${label}__1600${tag}`, url, width: 1600, theme });
+            if (i === 0) states.push({ name: `${label}__390${tag}`, url, width: 390, theme });
+          }
+        });
+      }
+      for (const theme of THEMES) {
+        const queue = states.filter((st) => st.theme === theme);
+        const worker = async (): Promise<void> => {
+          const ctx = await browser.newContext({ viewport: { width: 1600, height: 900 } });
+          await pinGoogleFonts(ctx, fontCss);
+          await ctx.addInitScript((t) => { try { localStorage.setItem("xgen-theme", t); } catch { /* about:blank */ } }, theme);
+          const page = await ctx.newPage();
+          page.on("pageerror", (e) => errors.push(`${page.url()}: ${e.message}`));
+          for (let st = queue.shift(); st; st = queue.shift()) {
+            await page.setViewportSize({ width: st.width, height: 900 });
+            // a load that asked Google for a font stylesheet the run had not pinned yet waited on the network for it, so its
+            // fonts landed at another moment than in every later load: that page is loaded once more
+            for (let pinned = -1; pinned !== fontCss.size; ) {
+              pinned = fontCss.size;
+              await page.goto("about:blank");
+              await page.goto(st.url, { waitUntil: "networkidle" });
+            }
+            await page.waitForFunction(() => (document.querySelector("#app")?.children.length ?? 0) > 0, undefined, { timeout: 10000 }).catch(() => errors.push(`${st!.name}: nothing rendered`));
+            // fonts and every picture decoded, so two runs of the same DOM give the same pixels
+            await page.evaluate(async () => {
+              for (const i of document.images) i.loading = "eager";
+              const settle = (i: HTMLImageElement): Promise<unknown> => Promise.race([i.decode().catch(() => undefined), new Promise((r) => setTimeout(r, 3000))]);
+              await document.fonts.ready;
+              await Promise.all([...document.images].map(settle));
+            });
+            const png = await page.screenshot({ fullPage: true, animations: "disabled", caret: "hide" });
+            writeFileSync(join(dir, `${st.name}.png`), png);
+            manifest[st.name] = createHash("sha256").update(png).digest("hex");
+          }
+          await ctx.close();
+        };
+        await Promise.all([worker(), worker(), worker(), worker()]);
+      }
+    }
+  } finally {
+    await browser.close();
+    for (const p of procs) p.kill();
+  }
+  const sorted = Object.fromEntries(Object.entries(manifest).sort(([a], [b]) => a.localeCompare(b)));
+  writeFileSync(join(dir, "manifest.json"), JSON.stringify(sorted, null, 2) + "\n");
+  const changed: string[] = [];
+  const missing: string[] = [];
+  if (o.against) {
+    const base = JSON.parse(readFileSync(join(resolve(workspace, o.against), "manifest.json"), "utf8")) as Record<string, string>;
+    for (const [name, sha] of Object.entries(base)) {
+      if (o.only && !o.only.some((p) => name.split("__")[1]!.startsWith(p))) continue;
+      if (!(name in sorted)) missing.push(name);
+      else if (sorted[name] !== sha) changed.push(name);
+    }
+    for (const name of Object.keys(sorted)) {
+      if (name in base) continue;
+      const [, ...rest] = name.split("__");
+      const twin = Object.keys(base).find((b) => b.split("__").slice(1).join("__") === rest.join("__"));
+      if (!twin) missing.push(`new: ${name}`);
+      else if (base[twin] !== sorted[name]) changed.push(`${name} (differs from ${twin})`);
+    }
+  }
+  return { dir, states: Object.keys(sorted).length, changed, missing, errors };
+}
+
+export const visualExists = (workspace: string, d: string): boolean => existsSync(join(resolve(workspace, d), "manifest.json"));
diff --git a/xgen/check/test/audit.test.ts b/xgen/check/test/audit.test.ts
new file mode 100644
index 0000000..820cbbf
--- /dev/null
+++ b/xgen/check/test/audit.test.ts
@@ -0,0 +1,79 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { CATEGORY_SIZES, coverageProblems, vibeCoverage, blocks } from "@ui8kit/xgen-screens";
+import { planBuild, sha } from "@ui8kit/xgen-generator";
+import { cycles } from "../src/audit";
+import { cornerClasses, cornerProblems } from "../src/corners";
+import { shadowClasses, shadowProblems } from "../src/shadows";
+import { spacingKeyProblems } from "../src/spacing";
+import { HARDCODE, MAX_FILE_LINES } from "../src/audit-rules";
+
+const repo = join(import.meta.dir, "..", "..", "..");
+
+test("a cycle of imports is found, a chain is not", () => {
+  const chain = new Map([["a", ["b"]], ["b", ["c"]], ["c", []]]);
+  expect(cycles(chain)).toEqual([]);
+  const loop = new Map([["a", ["b"]], ["b", ["c"]], ["c", ["a"]], ["d", ["a"]]]);
+  expect(cycles(loop)).toEqual([["a", "b", "c"]]);
+});
+
+test("the corner guard allows plain rounded, and rounded-full or rounded-none only where the allowlist says", () => {
+  expect(cornerClasses("rounded p-4 open:rounded-2xl [&::-webkit-slider-thumb]:rounded-full rounded-t-lg rounded-[20px]")).toEqual(["rounded-2xl", "rounded-full", "rounded-t-lg", "rounded-[20px]"]);
+  expect(cornerProblems("specs/ui/card.variants.json", "\"base\": \"rounded bg-card\"")).toEqual([]);
+  expect(cornerProblems("specs/ui/card.variants.json", "\"base\": \"rounded-lg\"").length).toBe(1);
+  expect(cornerProblems("specs/ui/card.variants.json", "\"base\": \"rounded-full\"").length).toBe(1);
+  expect(cornerProblems("specs/ui/radio.variants.json", "\"base\": \"rounded-full\"")).toEqual([]);
+  expect(cornerProblems("specs/ui/radio.variants.json", "\"base\": \"rounded\"")[0]).toContain("lower its allowance");
+});
+
+test("the shadow guard: no shadow on a flat surface, one listed shadow on a floating layer", () => {
+  expect(shadowClasses("p-4 shadow-xs hover:shadow-md shadow drop-shadow-sm shadow-[0_1px_0_red] inset-ring")).toEqual(["shadow-xs", "shadow-md", "shadow", "drop-shadow-sm", "shadow-[0_1px_0_red]"]);
+  expect(shadowProblems("specs/ui/card.variants.json", "\"base\": \"rounded bg-card\"")).toEqual([]);
+  expect(shadowProblems("specs/ui/card.variants.json", "\"base\": \"shadow-xs\"").length).toBe(1);
+  expect(shadowProblems("specs/ui/dialog.variants.json", "\"base\": \"shadow-lg\"")).toEqual([]);
+  expect(shadowProblems("specs/ui/dialog.variants.json", "\"base\": \"shadow-md\"").length).toBe(2);
+});
+
+test("the spacing guard: a gap, padding or margin option is named by its Tailwind step, not by pixels", () => {
+  expect(spacingKeyProblems("specs/ui/stack.variants.json", { byKey: { gap: { "0": "gap-0", "4": "gap-4", "12": "gap-12", auto: "" } } })).toEqual([]);
+  expect(spacingKeyProblems("specs/ui/stack.variants.json", { byKey: { gap: { "16": "gap-4" } } }).length).toBe(1);
+  expect(spacingKeyProblems("specs/ui/box.variants.json", { byKey: { padding: { "24": "p-6" } } }).length).toBe(1);
+  expect(spacingKeyProblems("specs/recipes/nav-item.variants.json", { byKey: { level: { "3": "pl-12" } } })).toEqual([]);
+});
+
+test("the hardcode patterns catch sizes, hex colors, palette colors and stringified values, and let tokens and grid templates pass", () => {
+  const hit = (s: string): boolean => Object.values(HARDCODE).some((re) => (s.match(re) ?? []).length > 0);
+  for (const bad of ["rounded-[20px]", "text-[13px]", "bg-[#ff0000]", "bg-blue-500", "text-red-700", "[object Object]", "max-w-[85%]"]) expect(hit(bad)).toBe(true);
+  for (const ok of ["rounded-xl", "bg-card text-muted-foreground", "grid-cols-[16rem_minmax(0,1fr)]", "in-data-[nav=collapsed]:hidden", "size-12", "inset-ring-border"]) expect(hit(ok)).toBe(false);
+});
+
+test("the registry of 92 layouts: a missing block, variant or contract is reported", () => {
+  expect(vibeCoverage.length).toBe(CATEGORY_SIZES.reduce((n, x) => n + x, 0));
+  const patterns = new Set(["marquee"]);
+  const bad = coverageProblems(blocks, patterns, new Set(["marquee", "carousel"]));
+  expect(bad.some((m) => m.includes("pattern.carousel is not used") || m.includes("no pattern"))).toBe(true);
+  const none = coverageProblems(blocks.slice(0, 3), new Set(), new Set());
+  expect(none.some((m) => m.includes("no block"))).toBe(true);
+});
+
+test("the source files stay under the limit (the same rule as xgen check, as a plain number)", () => {
+  expect(MAX_FILE_LINES).toBe(350);
+});
+
+test("the build is deterministic: two plans give the same files in the same order with the same content", () => {
+  const a = planBuild(repo), b = planBuild(repo);
+  const rows = (p: typeof a): string[] => p.targets.flatMap((t) => t.files.map((f) => `${t.dir}/${f.path} ${sha(f.contents)}`));
+  const x = rows(a), y = rows(b);
+  expect(x.length).toBeGreaterThan(500);
+  expect(x).toEqual(y);
+  const sortedWithin = a.targets.every((t) => t.files.every((f, i) => i === 0 || t.files[i - 1]!.path <= f.path));
+  expect(sortedWithin).toBe(true);
+});
+
+test("build and check take seconds, not minutes: the budget leaves room for three times the catalog", () => {
+  const t0 = performance.now();
+  const plan = planBuild(repo);
+  const ms = performance.now() - t0;
+  expect(plan.inputs.blocks.length).toBeGreaterThanOrEqual(60);
+  expect(ms).toBeLessThan(10000);
+});
diff --git a/xgen/check/test/check.test.ts b/xgen/check/test/check.test.ts
new file mode 100644
index 0000000..ffbbc0e
--- /dev/null
+++ b/xgen/check/test/check.test.ts
@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { runChecks, checkBlocks } from "../src";
+
+const repo = join(import.meta.dir, "..", "..", "..");
+
+test("xgen check passes on the workspace", () => {
+  const { results } = runChecks(repo);
+  expect(results.map((r) => [r.name, r.problems])).toEqual(results.map((r) => [r.name, []]));
+  expect(results.map((r) => r.name)).toEqual(["schema", "props", "a11y", "authored", "coverage", "recipes", "nonportable", "text", "dictionary", "blocks", "registry", "themes", "routes", "structure", "hardcode", "corners", "shadows", "spacing", "readability", "dead", "duplicates", "versions", "tests", "rules", "codex", "drift"]);
+});
+
+test("the blocks check finds a broken block", () => {
+  const { plan } = runChecks(repo);
+  const blocks = plan.inputs.blocks;
+  const hero = blocks.find((b) => b.value.id === "block.hero")!.value;
+  const saved = JSON.stringify(hero);
+  const reset = (): void => { Object.assign(hero, JSON.parse(saved)); };
+  const problems = (): string[] => checkBlocks(plan).problems;
+  expect(problems()).toEqual([]);
+  hero.variants.push({ id: "bad", set: { layout: "diagonal" } });
+  expect(problems().some((m) => m.includes('layout="diagonal"'))).toBe(true);
+  reset();
+  hero.axes["layout"] = ["centered"];
+  hero.axes["columns"] = ["1", "2"];
+  expect(problems().some((m) => m.includes("axis columns is not a prop"))).toBe(true);
+  reset();
+  hero.variants = hero.variants.filter((v) => v.set?.["tone"] !== "muted");
+  expect(problems().some((m) => m.includes('no variant shows tone="muted"'))).toBe(true);
+  reset();
+  hero.sample.props["title"] = { $: "ui.site.missing" };
+  expect(problems().some((m) => m.includes("ui.site.missing"))).toBe(true);
+  reset();
+  const feat = blocks.find((b) => b.value.id === "block.features")!.value;
+  feat.data[0]!.collection = "nothing";
+  expect(problems().some((m) => m.includes("no fixture nothing"))).toBe(true);
+});
diff --git a/xgen/check/test/dictionary.test.ts b/xgen/check/test/dictionary.test.ts
new file mode 100644
index 0000000..2ddec73
--- /dev/null
+++ b/xgen/check/test/dictionary.test.ts
@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { checkDictionary, checkRoutes, dictionaryUse, runChecks } from "../src";
+
+const repo = join(import.meta.dir, "..", "..", "..");
+
+test("the dictionary check is exact: a leaf under a subtree handed to an organism is unused when the organism does not read it", () => {
+  const { plan } = runChecks(repo);
+  const dict = plan.inputs.dictionary.value as Record<string, Record<string, Record<string, string>>>;
+  expect(checkDictionary(plan).problems).toEqual([]);
+  // content.labels is handed to PostGrid and others as `labels`; they read some leaves, not a new one
+  dict["content"]!["labels"]!["neverRead"] = "x";
+  expect(checkDictionary(plan).problems).toEqual(["xgen/content/ui/en.json: content.labels.neverRead is read by no view and no screen menu"]);
+  delete dict["content"]!["labels"]!["neverRead"];
+  // a leaf a view reads, taken out of the dictionary, is reported where it is read
+  const saved = dict["site"]!["header"]!["skip"]!;
+  delete dict["site"]!["header"]!["skip"];
+  const problems = checkDictionary(plan).problems;
+  expect(problems.length).toBeGreaterThan(0);
+  expect(problems.every((p) => /^xgen\/specs\/(screens|organisms)\/[a-z0-9-]+\.json: reads ui\.site\.header\.skip, /.test(p))).toBe(true);
+  dict["site"]!["header"]!["skip"] = saved;
+  // the subtrees read by a dynamic index are named
+  expect([...dictionaryUse(plan).dynamic]).toContain("status");
+}, 30_000);
+
+test("the routes check finds a broken menu", () => {
+  const { plan } = runChecks(repo);
+  const s = plan.inputs.screens.find((x) => x.value.id === "screen.theme-content-blog")!.value;
+  const saved = JSON.stringify(s.menu);
+  expect(checkRoutes(plan).problems).toEqual([]);
+  s.menu![1] = { id: "articles", path: "nowhere", titleKey: "pages.contentBlog.none.nav" };
+  const p = checkRoutes(plan).problems;
+  expect(p).toContain('xgen/specs/screens/theme-content-blog.json: menu[1] (articles): the screen has no route "nowhere"');
+  expect(p).toContain("xgen/specs/screens/theme-content-blog.json: menu[1] (articles): titleKey pages.contentBlog.none.nav is not a text of xgen/content/ui/en.json");
+  s.menu = JSON.parse(saved);
+  expect(checkRoutes(plan).problems).toEqual([]);
+}, 30_000);
diff --git a/xgen/check/test/half-steps.test.ts b/xgen/check/test/half-steps.test.ts
new file mode 100644
index 0000000..a62bb23
--- /dev/null
+++ b/xgen/check/test/half-steps.test.ts
@@ -0,0 +1,13 @@
+// The 8 + 4 grid: no fractional Tailwind step (gap-1.5, px-2.5, size-3.5) in the specs, the builder or the kit assets.
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { halfStepProblems, halfSteps } from "../src/spacing";
+
+test("half steps are found in class text, whole steps and other numbers are not", () => {
+  expect(halfSteps(`"h-8 gap-1.5 rounded px-3" md:px-2.5 -mt-0.5 size-3.5 opacity-50 leading-1.5 w-1/2`)).toEqual(["gap-1.5", "md:px-2.5", "-mt-0.5", "size-3.5"]);
+  expect(halfSteps("gap-2 px-3 size-4 top-1 hover:p-6")).toEqual([]);
+});
+
+test("the specs, the builder and the kit assets hold no half step", () => {
+  expect(halfStepProblems(join(import.meta.dir, "..", ".."))).toEqual([]);
+});
diff --git a/xgen/check/test/readability.test.ts b/xgen/check/test/readability.test.ts
new file mode 100644
index 0000000..271c8a7
--- /dev/null
+++ b/xgen/check/test/readability.test.ts
@@ -0,0 +1,20 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { checkHardcode } from "../src/audit";
+import { checkReadability, kebab } from "../src/readability";
+
+const repo = join(import.meta.dir, "..", "..", "..");
+
+test("one key per component for both runtimes and both naming styles", () => {
+  expect(kebab("HeroSection")).toBe("hero-section");
+  expect(kebab("hero-section")).toBe("hero-section");
+  expect(kebab("BlocksScreen")).toBe("blocks-screen");
+  expect(kebab("CTABand")).toBe("cta-band");
+});
+
+test("the readability and hardcode ratchets hold on the workspace", () => {
+  const plan = planBuild(repo);
+  expect(checkReadability(plan).problems).toEqual([]);
+  expect(checkHardcode(plan).problems).toEqual([]);
+});
diff --git a/xgen/check/test/rules-latte.test.ts b/xgen/check/test/rules-latte.test.ts
new file mode 100644
index 0000000..f6873cb
--- /dev/null
+++ b/xgen/check/test/rules-latte.test.ts
@@ -0,0 +1,83 @@
+import { expect, test } from "bun:test";
+import { latteAsTwig, latteToIr } from "../src/rules/latte";
+import { detect } from "../src/rules/detectors";
+import type { IrNode } from "../src/rules/ir";
+
+const ctx = { blockRoot: true, rootsOnBlock: () => undefined };
+const block = (tag: string, children = "$c"): string => `{=ui_include('ui/block/block.latte', ['p' => ['Tag' => '${tag}'], 'children' => ${children}])|noescape}`;
+const kinds = (ns: IrNode[]): string[] => ns.map((n) => n.kind);
+const found = (src: string): string[] => detect(latteToIr(src), { ...ctx, blockRoot: false }).map((f) => f.detector).sort();
+
+test("latte: a brace that does not open a tag stays text: JSON and spaced braces in attributes, {l} and {r}", () => {
+  const ir = latteToIr(`<div data-x='{"a":1}' data-y="{ a }">{l}x{r}</div>`);
+  expect(ir.error).toBeUndefined();
+  const div = ir.nodes[0] as IrNode & { kind: "element" };
+  expect(div.kind).toBe("element");
+  expect(div.attrs.map((a) => [a.name, a.value])).toEqual([["data-x", '{"a":1}'], ["data-y", "{ a }"]]);
+  expect(div.children.map((c) => (c.kind === "text" ? c.text : c.kind)).join("")).toBe("{x}");
+});
+
+test("latte: comments are skipped, even when they hold tags", () => {
+  const ir = latteToIr(`{* {if $a} <div> {/if} *}${block("section")}`);
+  expect(ir.error).toBeUndefined();
+  expect(kinds(ir.nodes)).toEqual(["component"]);
+});
+
+test("latte: if / elseif / else is one choice of three branches; foreach is a loop; {iterator} reads", () => {
+  const ir = latteToIr(`{if $a}${block("section")}{elseif $b}${block("aside")}{else}x{/if}{foreach $items as $i}{=$iterator->counter0}{/foreach}`);
+  expect(ir.error).toBeUndefined();
+  expect(kinds(ir.nodes)).toEqual(["choice", "loop"]);
+  expect((ir.nodes[0] as { branches: unknown[] }).branches.length).toBe(3);
+  expect(found(`{if $a}${block("section")}{elseif $b}${block("aside")}{else}${block("section")}{/if}`)).toEqual([]);
+});
+
+test("latte: nested captures: a Block passed into a Block is nested, a Block in a foreach is in a loop", () => {
+  const nested = `{capture $c_1}{=ui_text($v)}{/capture}{capture $c_2}${block("aside", "$c_1")}{/capture}${block("section", "$c_2")}`;
+  expect(detect(latteToIr(nested), ctx).map((f) => f.message)).toEqual(["Block nested inside Block"]);
+  const loop = `{foreach $xs as $x}{capture $c_1}{=ui_text($x)}{/capture}${block("section", "$c_1")}{/foreach}`;
+  expect(detect(latteToIr(loop), ctx).some((f) => f.message.includes("Block inside a loop"))).toBe(true);
+});
+
+test("latte: n:tag makes a dynamic element; n:if wraps it in a choice; n:foreach and n:inner-foreach are loops", () => {
+  const dyn = latteToIr(`<div n:tag="$t" class="a">x</div>`);
+  expect(dyn.nodes[0]!.kind).toBe("dynamic");
+  expect((dyn.nodes[0] as { attrs: Array<{ name: string }> }).attrs.map((a) => a.name)).toEqual(["class"]);
+  const cond = latteToIr(`<p n:if="$a > 1">x</p>`);
+  expect(cond.error).toBeUndefined();
+  expect(kinds(cond.nodes)).toEqual(["choice"]);
+  const each = latteToIr(`<li n:foreach="$xs as $x">{$x}</li>`);
+  expect(kinds(each.nodes)).toEqual(["loop"]);
+  const inner = latteToIr(`<ul n:inner-foreach="$xs as $x"><li>{$x}</li></ul>`);
+  const ul = inner.nodes[0] as IrNode & { kind: "element" };
+  expect(ul.kind).toBe("element");
+  expect(kinds(ul.children)).toEqual(["loop"]);
+  expect(ul.attrs).toEqual([]);
+});
+
+test("latte: n:syntax=off and {syntax off} keep their braces as text", () => {
+  const a = latteToIr(`<p n:syntax="off">{a} {if}</p>`);
+  expect(a.error).toBeUndefined();
+  const p = a.nodes[0] as IrNode & { kind: "element" };
+  expect(p.children.map((c) => (c.kind === "text" ? c.text : c.kind)).join("")).toBe("{a} {if}");
+  const b = latteToIr(`{syntax off}<b>{x}</b>{/syntax}`);
+  expect(b.error).toBeUndefined();
+});
+
+test("latte: raw output: |noescape of children or a prop renders, of anything else is raw HTML; ui_attrs pairs are attributes", () => {
+  expect(found(`{=$children|noescape}{=$p['body']|noescape}`)).toEqual([]);
+  expect(found(`{=$html|noescape}`)).toEqual(["raw-html"]);
+  expect(found(`{=ui_include('ui/button/button.latte', ['p' => ['Attrs' => ui_attrs(['aria-expanded', $v_open])]])|noescape}`)).toEqual(["reactive-aria"]);
+});
+
+test("latte: include and embed with named arguments are components", () => {
+  const ir = latteToIr(`{include 'ui/text/text.latte', p: ['Size' => 'sm']}{embed 'ui/block/block.latte', p: ['Tag' => 'section']}x{/embed}`);
+  expect(ir.error).toBeUndefined();
+  expect(ir.nodes.map((n) => (n.kind === "component" ? n.name : n.kind))).toEqual(["Text", "Block"]);
+});
+
+test("latte: the rewrite keeps line numbers", () => {
+  const src = `{* a\nb *}\n{if $a}\n<p>{=$x}</p>\n{/if}`;
+  expect(latteAsTwig(src).split("\n").length).toBe(src.split("\n").length);
+  const ir = latteToIr(src);
+  expect(ir.nodes[0]!.line).toBe(3);
+});
diff --git a/xgen/check/test/rules-solid.test.ts b/xgen/check/test/rules-solid.test.ts
new file mode 100644
index 0000000..7e6ff13
--- /dev/null
+++ b/xgen/check/test/rules-solid.test.ts
@@ -0,0 +1,34 @@
+import { expect, test } from "bun:test";
+import { toIr } from "../src/rules/index";
+
+const kinds = (nodes: Array<{ kind: string; children?: unknown[] }>): string[] =>
+  nodes.flatMap((n) => [n.kind, ...kinds((n.children ?? []) as Array<{ kind: string; children?: unknown[] }>)]);
+
+test("solid: Show and Switch/Match are choices, For and Index are loops, Dynamic is a dynamic tag", () => {
+  const src = `import { For, Index, Match, Show, Switch } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { Block, Text } from "@ui8kit/solid-ui";
+export function X(props: { a: boolean; xs: string[] }) {
+  return (
+    <Block>
+      <Show when={props.a} fallback={<Text>b</Text>}><Text>a</Text></Show>
+      <Switch><Match when={props.a}><Text>c</Text></Match></Switch>
+      <For each={props.xs}>{(x) => <Text>{x}</Text>}</For>
+      <Index each={props.xs}>{(x) => <Text>{x()}</Text>}</Index>
+      <Dynamic component="h2">t</Dynamic>
+    </Block>
+  );
+}`;
+  const k = kinds(toIr("solid", src).nodes as never);
+  expect(k.filter((x) => x === "choice").length).toBe(2);
+  expect(k.filter((x) => x === "loop").length).toBe(2);
+  expect(k).toContain("dynamic");
+});
+
+test("solid: a Switch brick of the kit (not from solid-js) stays a component", () => {
+  const src = `import { Block, Switch } from "@ui8kit/solid-ui";
+export function X() { return <Block><Switch name="n" /></Block>; }`;
+  const k = kinds(toIr("solid", src).nodes as never);
+  expect(k).not.toContain("choice");
+  expect(k.filter((x) => x === "component").length).toBe(2);
+});
diff --git a/xgen/check/test/rules-templ.test.ts b/xgen/check/test/rules-templ.test.ts
new file mode 100644
index 0000000..8ce6f75
--- /dev/null
+++ b/xgen/check/test/rules-templ.test.ts
@@ -0,0 +1,43 @@
+import { expect, test } from "bun:test";
+import { templToIr } from "../src/rules/templ";
+import { detect } from "../src/rules/detectors";
+
+const file = (body: string, extra = ""): string => `package blocks\n\nimport (\n\t"x/ui/block"\n\t"x/ui/text"\n)\n\ntempl Card(p CardProps) {\n${body}\n}\n${extra}`;
+const ctx = { blockRoot: true, rootsOnBlock: () => undefined };
+
+test("templ: if / else if / else is one choice of three branches, a for is a loop", () => {
+  const ir = templToIr(file(`\tif p.A {\n\t\t@block.Block(block.BlockProps{}) {\n\t\t}\n\t} else if p.B {\n\t\t<p>{ p.X }</p>\n\t} else {\n\t}\n\tfor _, x := range p.Items {\n\t\t@text.Text(text.TextProps{}) {\n\t\t\t{ x }\n\t\t}\n\t}`));
+  expect(ir.error).toBeUndefined();
+  expect(ir.nodes[0]!.kind).toBe("choice");
+  expect((ir.nodes[0] as { branches: unknown[] }).branches.length).toBe(3);
+  expect(ir.nodes[1]!.kind).toBe("loop");
+});
+
+test("templ: switch cases are branches; slots render; templ.Raw is raw HTML; Attrs pairs are attributes", () => {
+  const ir = templToIr(file(`\t@block.Block(block.BlockProps{Attrs: uiutils.Attrs("aria-expanded", p.Open)}) {\n\t\tswitch p.Tone {\n\t\tcase "a":\n\t\t\t@p.Actions\n\t\tdefault:\n\t\t\t@templ.Raw(p.Html)\n\t\t}\n\t}`));
+  const found = detect(ir, ctx).map((f) => f.detector).sort();
+  expect(found).toEqual(["raw-html", "reactive-aria"]);
+});
+
+test("templ: the templ named after the file is rendered, the other templs are detached", () => {
+  const ir = templToIr(file(`\t@CardFill1(p)`, `\ntempl CardFill1(p CardProps) {\n\t<div></div>\n}\n`), "/x/card.templ");
+  expect(ir.nodes[0]!.kind).toBe("component");
+  expect(ir.nodes[1]!.kind).toBe("detached");
+  expect(detect(ir, ctx).map((f) => f.message)).toEqual(["root is <CardFill1>, not Block", "raw <div>"]);
+});
+
+test("templ: literal text in markup and in a props literal is found", () => {
+  const ir = templToIr(file(`\t@block.Block(block.BlockProps{AriaLabel: "Main card"}) {\n\t\tSave\n\t}`));
+  expect(detect(ir, ctx).filter((f) => f.detector === "literal-text").length).toBe(2);
+});
+
+test("templ: a doctype and a lone < do not stop the reader", () => {
+  const ir = templToIr("package x\n\ntempl Page() {\n\t<!doctype html>\n\t<html lang=\"en\"><body>a < b</body></html>\n}\n");
+  expect(ir.error).toBeUndefined();
+  expect(ir.nodes[0]!.kind).toBe("element");
+});
+
+test("templ: a single-line import names its package", () => {
+  const ir = templToIr("package x\n\nimport \"m/ui/block\"\n\ntempl Page() {\n\t@block.Block(block.BlockProps{}) {\n\t}\n}\n");
+  expect(ir.nodes[0]!.kind).toBe("component");
+});
diff --git a/xgen/check/test/rules.test.ts b/xgen/check/test/rules.test.ts
new file mode 100644
index 0000000..a8760fa
--- /dev/null
+++ b/xgen/check/test/rules.test.ts
@@ -0,0 +1,46 @@
+// The rules group: every detector is proven on its fixtures in svelte, react and vue, and the committed baselines hold.
+import { describe, expect, test } from "bun:test";
+import { join } from "node:path";
+import { detect } from "../src/rules/detectors";
+import { gate, selfTest, toIr } from "../src/rules";
+
+const repo = join(import.meta.dir, "..", "..", "..");
+const ctx = { blockRoot: true, rootsOnBlock: () => undefined };
+
+describe("rules", () => {
+  test("self-test fixtures: one violating and one clean file per detector and runtime", () => expect(selfTest(repo)).toEqual([]));
+  test("the baselines hold", () => expect(gate(repo).problems).toEqual([]));
+  test("the same violation is found in every runtime", () => {
+    const svelte = detect(toIr("svelte", `<Block tag="section"><div aria-expanded={open}>Save</div></Block>`), ctx);
+    const react = detect(toIr("react", `export function X() { return <Block tag="section"><div aria-expanded={open}>Save</div></Block>; }`), ctx);
+    const vue = detect(toIr("vue", `<template><Block tag="section"><div :aria-expanded="open">Save</div></Block></template>`), ctx);
+    const kinds = (f: { detector: string }[]): string[] => f.map((x) => x.detector).sort();
+    expect(kinds(svelte)).toEqual(["literal-text", "raw-native-tag", "reactive-aria"]);
+    expect(kinds(react)).toEqual(kinds(svelte));
+    expect(kinds(vue)).toEqual(kinds(svelte));
+  });
+  test("a static ARIA value and a naming expression are allowed", () => {
+    expect(detect(toIr("svelte", `<Block tag="section"><Button aria-pressed={false} aria-label={ui.save} /></Block>`), ctx)).toEqual([]);
+  });
+  test("block-root: exclusive branches may each hold one Block, a second Block on the same path fails in every runtime", () => {
+    const msgs = (rt: "svelte" | "react" | "vue", src: string): string[] => detect(toIr(rt, src), ctx).filter((f) => f.detector === "block-root").map((f) => f.message.split(" (")[0]!);
+    const clean = [
+      msgs("svelte", `{#if a}<Block tag="section" />{:else}<Block tag="aside" />{/if}`),
+      msgs("react", `export function X() { if (a) return <Block tag="aside" />; return b ? <Block tag="section" /> : <Block tag="aside" />; }`),
+      msgs("vue", `<template><Block v-if="a" tag="section" /><Block v-else tag="aside" /></template>`),
+    ];
+    expect(clean).toEqual([[], [], []]);
+    const twoInBranch = [
+      msgs("svelte", `{#if a}<Block tag="section" /><Block tag="aside" />{:else}<Block tag="aside" />{/if}`),
+      msgs("react", `export function X() { return a ? <><Block tag="section" /><Block tag="aside" /></> : <Block tag="aside" />; }`),
+      msgs("vue", `<template><template v-if="a"><Block tag="section" /><Block tag="aside" /></template><Block v-else tag="aside" /></template>`),
+    ];
+    for (const m of twoInBranch) expect(m).toEqual(["2 Block in one render path"]);
+    const afterIf = [
+      msgs("svelte", `<Block tag="section" />{#if a}<Block tag="aside" />{/if}`),
+      msgs("react", `export function X() { return <><Block tag="section" />{a && <Block tag="aside" />}</>; }`),
+      msgs("vue", `<template><Block tag="section" /><Block v-if="a" tag="aside" /></template>`),
+    ];
+    for (const m of afterIf) expect(m).toEqual(["2 Block in one render path"]);
+  });
+});
diff --git a/xgen/check/test/style-zones.test.ts b/xgen/check/test/style-zones.test.ts
new file mode 100644
index 0000000..6700e21
--- /dev/null
+++ b/xgen/check/test/style-zones.test.ts
@@ -0,0 +1,32 @@
+// The style rules on hand-written code (apps/magazine in the codegen-x monorepo; none in a standalone checkout): class text and CSS only, and the committed style baselines hold.
+import { describe, expect, test } from "bun:test";
+import { join } from "node:path";
+import { styleFindings, styleProblems, STYLE_GROUPS } from "../src/style-zones";
+
+const repo = join(import.meta.dir, "..", "..", "..");
+
+describe("style rules on hand-written code", () => {
+  test("svelte markup: class text only, script and prose ignored", () => {
+    const r = styleFindings("a.svelte", `<script>const shadow = "rounded-lg";</script><div class="rounded-lg shadow-md p-3" class:rounded-full={x}><b class={x ? "bg-red-500 w-[3px]" : "p-2"}>shadow</b></div>`);
+    expect(r.corners).toEqual(["rounded-lg", "rounded-full"]);
+    expect(r.shadows).toEqual(["shadow-md"]);
+    expect(r.hardcode).toEqual(["-[3px]", "bg-red-500"]);
+    expect(r.spacing).toEqual(["p-3"]);
+  });
+  test("css: radius off the token, drop shadow, gradient and hex, off-grid spacing", () => {
+    const r = styleFindings("a.css", `.a{border-radius:6px;box-shadow:0 0 0 1px red;padding:8px 16px} .b{border-radius:var(--radius);box-shadow:0 2px 4px #000;gap:12px;background:linear-gradient(red,blue)}`);
+    expect(r.corners).toEqual(["border-radius: 6px"]);
+    expect(r.shadows).toEqual(["box-shadow: 0 2px 4px #000"]);
+    expect(r.hardcode).toEqual(["linear-gradient(", "box-shadow: #000"]);
+    expect(r.spacing).toEqual(["gap: 12px"]);
+  });
+  test("ts: class strings only, never shader code or numbers", () => {
+    const r = styleFindings("a.ts", "const k = 'shadow'; const n = 13; const glsl = `uniform float shadow;\\nfloat r = 3.0;`; el.className = 'rounded-md p-1';");
+    expect(r.corners).toEqual(["rounded-md"]);
+    expect(r.shadows).toEqual([]);
+    expect(r.spacing).toEqual(["p-1"]);
+  });
+  test("the hand-written style packages present match their baselines", () => {
+    for (const g of STYLE_GROUPS) expect(styleProblems(repo, g)).toEqual([]);
+  });
+});
diff --git a/xgen/check/tools/readability-allow.ts b/xgen/check/tools/readability-allow.ts
new file mode 100644
index 0000000..5d08f2a
--- /dev/null
+++ b/xgen/check/tools/readability-allow.ts
@@ -0,0 +1,12 @@
+// Prints the readability allowlist as it stands (to paste into src/readability-allow.ts after a file got better).
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { measure } from "../src/readability";
+import { HTML_ATTRS, READABILITY_ALLOW } from "../src/readability-allow";
+
+const plan = planBuild(join(import.meta.dir, "..", "..", ".."));
+const rows = Object.entries(measure(plan)).sort(([a], [b]) => a.localeCompare(b));
+// the reason of an entry is kept; a new entry gets a placeholder that a person must replace
+const why = (k: string): string => { const w = READABILITY_ALLOW[k]?.why; return w === HTML_ATTRS ? "HTML_ATTRS" : JSON.stringify(w ?? "TODO: why"); };
+console.log(rows.map(([k, m]) => `  ${JSON.stringify(k)}: { ${Object.entries(m).map(([a, b]) => `${a}: ${b}`).join(", ")}, why: ${why(k)} },`).join("\n"));
+console.log(`// ${rows.length} entries`);
diff --git a/xgen/check/tools/rules.ts b/xgen/check/tools/rules.ts
new file mode 100644
index 0000000..2d6e88d
--- /dev/null
+++ b/xgen/check/tools/rules.ts
@@ -0,0 +1,24 @@
+// The `rules` group outside `xgen check`:
+//   bun xgen/check/tools/rules.ts                 count the findings per package (baselines ignored); --list prints every finding
+//   bun xgen/check/tools/rules.ts --gate [dir]    the gate of `xgen check` for every package, or for one (apps/discovery); exit 1 on a new finding
+//   bun xgen/check/tools/rules.ts --write         write rules/zones.json and rules/baselines/<package>.json (root script: bun run rules:baseline)
+import { join } from "node:path";
+import { writeStyleBaselines } from "../src/style-zones";
+import { countsOf, DETECTORS, gate, scanRepo, selfTest, writeBaselines } from "../src/rules";
+
+const repo = join(import.meta.dir, "..", "..", "..");
+const args = process.argv.slice(2);
+if (args.includes("--write")) for (const l of [...writeBaselines(repo), ...writeStyleBaselines(repo)]) console.log(l);
+else if (args.includes("--gate")) {
+  const only = args.find((a) => !a.startsWith("--"));
+  const g = gate(repo, only);
+  const problems = [...selfTest(repo), ...g.problems];
+  for (const p of problems) console.log(`  ${p}`);
+  console.log(`rules: ${only ?? "all packages"}, ${g.files} files, ${g.recorded} recorded, ${problems.length} problem(s)`);
+  process.exit(problems.length ? 1 : 0);
+} else for (const rep of scanRepo(repo)) {
+  const c = countsOf(rep);
+  console.log(`${rep.zone.dir} (${rep.zone.runtime}, ${rep.files} files): ${DETECTORS.map((d) => `${d} ${Object.values(c[d]!).reduce((a, b) => a + b, 0)}`).join(", ")}`);
+  if (args.includes("--list")) for (const [f, list] of rep.findings) for (const x of list) console.log(`  ${f}:${x.line}  ${x.detector}  ${x.message}`);
+  for (const e of rep.errors) console.log(`  ${e}`);
+}
diff --git a/xgen/cli/README.md b/xgen/cli/README.md
new file mode 100644
index 0000000..3830d49
--- /dev/null
+++ b/xgen/cli/README.md
@@ -0,0 +1,22 @@
+# xgen
+
+The xgen command: build, check, e2e, shot, visual, list.
+
+Part of xgen (see `../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
+
+## Usage
+
+```
+xgen build   # regenerate packages and apps
+xgen check   # fail on any problem, including drift
+xgen e2e     # every host app (svelte, react, vue, solid), same scenario, screenshots, DOM pair test
+xgen shot    # one full-page screenshot of a screen
+xgen visual  # pixel gate: every state of every host, light and dark
+xgen list    # counts, targets, hand-written files per app
+```
+
+`xgen check` also runs the real-engine parity groups `templ`, `solid`, `twig`, `jinja2` and `latte`; each skips without its
+toolchain (Go, PHP + composer, Python). With `UI8KIT_REQUIRE_ALL_RUNTIMES=1` a skipped group fails (meant for CI).
+
+```
+```
diff --git a/xgen/cli/package.json b/xgen/cli/package.json
new file mode 100644
index 0000000..12e4e21
--- /dev/null
+++ b/xgen/cli/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@ui8kit/xgen",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "The xgen command: build, check, e2e, shot, visual, list.",
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-generator": "workspace:*",
+    "@ui8kit/xgen-check": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*",
+    "@ui8kit/xgen-schema": "workspace:*"
+  },
+  "bin": {
+    "xgen": "./src/cli.ts"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/cli/src/cli.ts b/xgen/cli/src/cli.ts
new file mode 100755
index 0000000..b4bb7af
--- /dev/null
+++ b/xgen/cli/src/cli.ts
@@ -0,0 +1,124 @@
+#!/usr/bin/env bun
+// xgen: build | check | e2e | shot | visual | list
+import { existsSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import { planBuild, write } from "@ui8kit/xgen-generator";
+import { runChecks, runE2e, runShot, runVisual, solidCheck, templCheck, twigCheck, jinja2Check, latteCheck } from "@ui8kit/xgen-check";
+import { writeSpecs } from "@ui8kit/xgen-screens";
+
+/** the workspace is the nearest parent that has an xgen/ folder with specs */
+function findWorkspace(from: string): string {
+  let dir = resolve(from);
+  for (;;) {
+    if (existsSync(xgenPaths(join(dir, "xgen")).specs("ui"))) return dir;
+    const up = dirname(dir);
+    if (up === dir) throw new Error("no xgen/specs/ui above " + from);
+    dir = up;
+  }
+}
+
+async function main(argv: string[]): Promise<number> {
+  const [cmd = "help", ...rest] = argv;
+  const wsFlag = rest.indexOf("--root");
+  const workspace = wsFlag >= 0 ? resolve(rest[wsFlag + 1]!) : findWorkspace(process.cwd());
+  if (cmd === "build") {
+    const specs = writeSpecs(join(workspace, "xgen"));
+    const plan = planBuild(workspace);
+    if (plan.problems.length) { console.error(plan.problems.map((p) => `  ${p}`).join("\n")); console.error(`xgen build: ${plan.problems.length} problem(s) in the inputs, nothing written`); return 1; }
+    const w = write(plan);
+    console.log(`xgen build: ${specs.length} organism/screen specs, ${plan.targets.length} targets, ${w.files} files written, ${w.removed} stale removed`);
+    for (const t of plan.targets) console.log(`  ${t.dir}  ${t.files.length} files`);
+    return 0;
+  }
+  if (cmd === "check") {
+    const { results, plan } = runChecks(workspace);
+    // the Go runtime: templ generate, go vet, go build, DOM parity with React, html-validate of every block case
+    const t = await templCheck(workspace, plan.bricks, plan.inputs);
+    results.push({ name: "templ", what: t.skipped ? `skipped: ${t.skipped}` : `templ generate, go vet, go build; ${t.cases} brick cases and ${t.blocks} block cases (${t.organisms} organisms) render the same DOM as React; ${t.documents ?? 0} documents pass html-validate`, problems: t.problems });
+    // the Solid runtime: server render of every brick and block case against React, html-validate of every block case
+    const so = await solidCheck(workspace, plan.bricks, plan.inputs);
+    results.push({ name: "solid", what: `${so.cases} brick cases and ${so.blocks} block cases (${so.organisms} organisms) render the same DOM as React on the server; ${so.documents ?? 0} documents pass html-validate`, problems: so.problems });
+    // the Twig runtime: real Twig (PHP + twig/twig via composer) renders every brick and block case against React, html-validate of every block case
+    const tw = await twigCheck(workspace, plan.bricks, plan.inputs);
+    results.push({ name: "twig", what: tw.skipped ? `skipped: ${tw.skipped}` : `PHP ${tw.php} + twig/twig: ${tw.cases} brick cases and ${tw.blocks} block cases (${tw.organisms} organisms) render the same DOM as React; ${tw.documents ?? 0} documents pass html-validate`, problems: tw.problems });
+    // the Jinja2 runtime: real Jinja2 (a Python venv) renders every brick and block case against React, html-validate of every block case
+    const jj = await jinja2Check(workspace, plan.bricks, plan.inputs);
+    results.push({ name: "jinja2", what: jj.skipped ? `skipped: ${jj.skipped}` : `Python ${jj.python} + Jinja2 ${jj.jinja2}: ${jj.cases} brick cases and ${jj.blocks} block cases (${jj.organisms} organisms) render the same DOM as React; ${jj.documents ?? 0} documents pass html-validate`, problems: jj.problems });
+    // the Latte runtime: real Latte (PHP + latte/latte via composer), the same parity and html-validate gates as Twig
+    const lt = await latteCheck(workspace, plan.bricks, plan.inputs);
+    results.push({ name: "latte", what: lt.skipped ? `skipped: ${lt.skipped}` : `PHP ${lt.php} + latte/latte: ${lt.cases} brick cases and ${lt.blocks} block cases (${lt.organisms} organisms) render the same DOM as React; ${lt.documents ?? 0} documents pass html-validate`, problems: lt.problems });
+    // CI sets UI8KIT_REQUIRE_ALL_RUNTIMES=1: a runtime group that skipped (no Go, PHP or Python there) is a failure, not a pass
+    if (process.env.UI8KIT_REQUIRE_ALL_RUNTIMES === "1") {
+      for (const r of results) if (r.what.startsWith("skipped:")) r.problems.push(`${r.name} skipped (${r.what.slice(9).trim()}) but UI8KIT_REQUIRE_ALL_RUNTIMES=1 requires it`);
+    }
+    let bad = 0;
+    for (const r of results) {
+      console.log(`${r.problems.length ? "FAIL" : "ok  "}  ${r.name.padEnd(12)} ${r.what}`);
+      for (const p of r.problems.slice(0, 25)) console.log(`        ${p}`);
+      if (r.problems.length > 25) console.log(`        ... and ${r.problems.length - 25} more`);
+      bad += r.problems.length;
+    }
+    console.log(bad ? `xgen check: ${bad} problem(s)` : "xgen check: ok");
+    return bad ? 1 : 0;
+  }
+  if (cmd === "list") {
+    const plan = planBuild(workspace);
+    const parts = plan.bricks.reduce((n, b) => n + b.brick.parts.length, 0);
+    const portable = plan.bricks.filter((b) => b.spec.portable.svelte === true && b.spec.portable.react === true).length;
+    console.log(`bricks ${plan.bricks.length}, parts ${parts}, portable to both runtimes ${portable}/${plan.bricks.length}`);
+    console.log(`organisms ${plan.inputs.organisms.length}, screens ${plan.inputs.screens.length}, host apps ${plan.apps.length}`);
+    for (const t of plan.targets) console.log(`  ${t.dir}  ${t.kind}  ${t.runtime}  ${t.files.length} generated files${t.handwritten.length ? `, by hand: ${t.handwritten.join(", ")}` : ", by hand: nothing"}`);
+    return 0;
+  }
+  if (cmd === "shot") {
+    const flag = (name: string, fallback: string): string => { const i = rest.indexOf(`--${name}`); return i >= 0 ? rest[i + 1]! : fallback; };
+    const screen = rest.find((a, i) => !a.startsWith("--") && !rest[i - 1]?.startsWith("--"));
+    if (!screen) { console.error("usage: xgen shot <screen> [--runtime svelte|react|vue] [--width 1600] [--theme light|dark] [--route path] [--out file]"); return 2; }
+    const r = await runShot(workspace, { screen, runtime: flag("runtime", "svelte") as "svelte" | "react" | "vue", width: Number(flag("width", "1600")), theme: flag("theme", "light") as "light" | "dark", route: flag("route", ""), out: rest.includes("--out") ? flag("out", "") : undefined });
+    console.log(`shot ${r.file}`);
+    for (const e of r.errors) console.log(`  browser console: ${e}`);
+    return r.errors.length ? 1 : 0;
+  }
+  if (cmd === "visual") {
+    const flag = (name: string): string | undefined => { const i = rest.indexOf(`--${name}`); return i >= 0 ? rest[i + 1] : undefined; };
+    const r = await runVisual(workspace, { out: flag("out") ?? "shots/visual", against: flag("against"), only: flag("only")?.split(",") });
+    console.log(`xgen visual: ${r.states} states in ${r.dir}`);
+    for (const e of r.errors) console.log(`  browser: ${e}`);
+    for (const m of r.missing) console.log(`  missing ${m}`);
+    for (const c of r.changed) console.log(`  CHANGED ${c}`);
+    if (flag("against")) console.log(r.changed.length || r.missing.length ? `xgen visual: ${r.changed.length} changed, ${r.missing.length} missing` : "xgen visual: pixel-identical");
+    return r.changed.length || r.missing.length || r.errors.length ? 1 : 0;
+  }
+  if (cmd === "e2e") {
+    const report = await runE2e(workspace);
+    let bad = 0;
+    for (const r of report.results) {
+      console.log(`${r.failures.length ? "FAIL" : "ok  "}  ${r.name.padEnd(12)} ${r.steps} steps`);
+      for (const f of r.failures) console.log(`        ${f}`);
+      bad += r.failures.length;
+    }
+    console.log(`${report.pair.differences.length ? "FAIL" : "ok  "}  pair         DOM of the svelte, react, vue and solid hosts compared in ${report.pair.states} states`);
+    for (const d of report.pair.differences) console.log(`        ${d}`);
+    bad += report.pair.differences.length;
+    console.log(`${report.html.problems.length ? "FAIL" : "ok  "}  html         HTML5 validity (rules/html-validate.json) of ${report.html.states} states, ${report.html.documents} distinct documents`);
+    for (const d of report.html.problems) console.log(`        ${d}`);
+    for (const [rule, n] of Object.entries(report.html.warnings)) console.log(`  warn  html         ${rule}: ${n} (in states, rules/html-validate.json)`);
+    bad += report.html.problems.length;
+    for (const s of report.shots) console.log(`  shot ${s}`);
+    console.log(bad ? `xgen e2e: ${bad} problem(s)` : "xgen e2e: ok");
+    return bad ? 1 : 0;
+  }
+  console.log([
+    "usage: xgen build | check | e2e | shot | list   [--root <workspace>]",
+    "  build  regenerate the packages, the shared app package and the host apps from xgen/specs, fixtures and content",
+    "  check  schema, props, variants, a11y, authored specs, coverage, portability, text, drift (fails on hand edits)",
+    "  e2e    every screen in every host (/<screen>/): its scenario, screenshots, DOM compare of the hosts, HTML5 validity of every state",
+    "  shot   one full-page screenshot of a screen: xgen shot site --runtime svelte --width 1600 --out shots/x.png",
+    "  visual every route of every screen in both hosts, light 1600 (+390): xgen visual --out shots/visual-base, then --out shots/visual-now --against shots/visual-base",
+    "  list   what there is",
+  ].join("\n"));
+  return cmd === "help" ? 0 : 2;
+}
+
+process.exit(await main(process.argv.slice(2)));
diff --git a/xgen/cli/test/cli.test.ts b/xgen/cli/test/cli.test.ts
new file mode 100644
index 0000000..5c77270
--- /dev/null
+++ b/xgen/cli/test/cli.test.ts
@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+
+const cli = join(import.meta.dir, "..", "src", "cli.ts");
+const run = (...args: string[]) => Bun.spawnSync(["bun", cli, ...args], { cwd: join(import.meta.dir, "..", "..", "..") });
+
+test("check passes on the workspace and prints one line per group", () => {
+  const p = run("check");
+  const out = p.stdout.toString();
+  expect(p.exitCode).toBe(0);
+  expect(out).toContain("xgen check: ok");
+  expect(out.split("\n").filter((l) => l.startsWith("ok ")).length).toBeGreaterThanOrEqual(15);
+}, 120_000); // every group: the rules group parses about 2600 component files, the templ, twig and jinja2 groups render every case
+
+test("an unknown command prints the usage and fails", () => {
+  const p = run("nothing");
+  expect(p.exitCode).not.toBe(0);
+});
diff --git a/xgen/content/ui/en.json b/xgen/content/ui/en.json
new file mode 100644
index 0000000..f2b6121
--- /dev/null
+++ b/xgen/content/ui/en.json
@@ -0,0 +1,2480 @@
+{
+  "app": {
+    "title": "Plans"
+  },
+  "theme": {
+    "toggle": "Light or dark"
+  },
+  "plans": {
+    "search": "Search plans",
+    "caption": "Plans: sort by a column header",
+    "count": "{0} plans",
+    "empty": "No plans match the search.",
+    "col": {
+      "name": "Plan",
+      "price": "Price",
+      "seats": "Seats",
+      "storage": "Storage, GB",
+      "status": "Status"
+    }
+  },
+  "pager": {
+    "showing": "Showing {0}-{1} of {2}",
+    "previous": "Previous",
+    "next": "Next"
+  },
+  "record": {
+    "back": "All plans",
+    "missing": "This plan does not exist.",
+    "id": "Plan id: {0}"
+  },
+  "status": {
+    "active": "Active",
+    "legacy": "Legacy",
+    "paid": "Paid",
+    "shipped": "Shipped",
+    "pending": "Pending",
+    "refunded": "Refunded"
+  },
+  "pricing": {
+    "popular": "Popular",
+    "perMonth": "/ month",
+    "seats": "{0} seats",
+    "storage": "{0} GB storage",
+    "cta": "Choose plan",
+    "free": "Free",
+    "perYear": "/ year",
+    "empty": "No plans to show yet"
+  },
+  "site": {
+    "header": {
+      "skip": "Skip to main content",
+      "brand": "Northwind",
+      "nav": "Main",
+      "home": "Home",
+      "pricing": "Pricing",
+      "theme": "Light or dark",
+      "cta": "Get Started",
+      "login": "Log In"
+    },
+    "footer": {
+      "copyright": "\u00a9 2026 Northwind. All rights reserved.",
+      "nav": "Footer",
+      "home": "Home",
+      "pricing": "Pricing"
+    },
+    "home": {
+      "title": "Websites that stay simple",
+      "text": "A small toolkit for pages that load fast, read well and work for everyone.",
+      "cta": "See pricing",
+      "featuresTitle": "Features of our service",
+      "ctaTitle": "AI-powered website builder with ready-to-use templates",
+      "ctaText": "Generate complete HTML, CSS, and JavaScript projects in minutes \u2014 just pick a template and share your idea.",
+      "ctaButton": "Get Started",
+      "secondary": "How it works",
+      "ctaSecondary": "Talk to us",
+      "featuresAction": "View All"
+    },
+    "pricing": {
+      "title": "Pricing",
+      "text": "Three plans, one price per month, no hidden fees.",
+      "tiersTitle": "Plans",
+      "faqTitle": "Questions"
+    },
+    "notFound": {
+      "title": "Page not found",
+      "text": "The address does not lead anywhere on this site.",
+      "back": "Back to the home page"
+    }
+  },
+  "blocks": {
+    "title": "Block gallery",
+    "intro": "Every block of the catalog by topic, with all its variants, drawn from the same data. Pick a block to see the variants side by side.",
+    "back": "Back to all blocks",
+    "names": {
+      "header": "Header",
+      "hero": "Hero",
+      "logos": "Logo cloud",
+      "features": "Features",
+      "stats": "Stats",
+      "testimonials": "Testimonials",
+      "steps": "How it works",
+      "pricing": "Pricing",
+      "plan": "Plan",
+      "faq": "FAQ",
+      "cta": "Call to action",
+      "footer": "Footer",
+      "categories": "Category navigation",
+      "products": "Product grid",
+      "product": "Product page",
+      "reviews": "Reviews",
+      "cart": "Cart",
+      "summary": "Order summary",
+      "orders": "Order history",
+      "storehero": "Store hero",
+      "usp": "Store promises",
+      "zones": "Delivery zones",
+      "slots": "Delivery window",
+      "delivery": "Delivery info",
+      "locations": "Store locations",
+      "productinfo": "Product details",
+      "cartpage": "Cart page",
+      "cartdrawer": "Cart drawer",
+      "checkout": "Checkout",
+      "announcement": "Announcement bar",
+      "cookie": "Cookie notice",
+      "newsletter": "Newsletter sign-up",
+      "posts": "Blog posts",
+      "postheader": "Post header",
+      "auth": "Auth card",
+      "profile": "Profile form",
+      "metrics": "Metric tiles",
+      "chart": "Chart panel",
+      "activity": "Activity feed",
+      "empty": "Empty state",
+      "checklist": "Setup checklist",
+      "stepper": "Stepper",
+      "contact": "Contact form",
+      "channels": "Support channels",
+      "templates": "Template gallery",
+      "navbar": "Navigation bar",
+      "megamenu": "Mega menu",
+      "sitemap": "Sitemap footer",
+      "bento": "Bento grid",
+      "featuretabs": "Feature tabs",
+      "accordion": "Feature accordion",
+      "sticky": "Sticky feature list",
+      "iconwall": "Icon wall",
+      "beforeafter": "Before and after",
+      "proof": "Logos and stats",
+      "videos": "Video testimonials",
+      "compare": "Comparison table",
+      "usage": "Usage calculator",
+      "credits": "Credit packs",
+      "pagehead": "Page heading",
+      "authpage": "Sign-in page",
+      "wizard": "Sign-up wizard",
+      "shell": "App shell",
+      "overview": "Dashboard overview",
+      "kanban": "Kanban board",
+      "sidenav": "Sidebar navigation",
+      "bottomnav": "Bottom tab bar",
+      "skeleton": "Loading state",
+      "tour": "Tour callout",
+      "videomodal": "Video walkthrough",
+      "errorpage": "Error page",
+      "article": "Article",
+      "team": "Team",
+      "photos": "Photo gallery",
+      "projects": "Projects",
+      "jobs": "Careers",
+      "aboutme": "About me",
+      "about": "About the company",
+      "timeline": "Timeline",
+      "dashshell": "Dashboard shell",
+      "herosplit": "Hero, split",
+      "faqsplit": "FAQ, split",
+      "ctaproof": "Call to action, with proof",
+      "quotesplit": "Testimonials, split",
+      "postsplit": "Post header, split",
+      "footersplit": "Footer, split",
+      "featuresplit": "Features, split",
+      "pagetrail": "Page heading with breadcrumbs",
+      "postshowcase": "Post showcase",
+      "medialist": "List beside a picture",
+      "featureshowcase": "Feature cards with a picture",
+      "storytabs": "Story in steps"
+    },
+    "docs": {
+      "header": "Skip link, brand, navigation, theme button and an optional call to action.",
+      "hero": "Heading, lead, one or two actions and optional media.",
+      "logos": "Customers and partners as glyphs with names.",
+      "features": "Features as cards, tiles or rows with a picture.",
+      "stats": "Key numbers as figures, cards or figures with icons.",
+      "testimonials": "Customer quotes as cards or plain figures.",
+      "steps": "Numbered or icon steps in a row or a column.",
+      "pricing": "Plans as a grid or a stack of cards.",
+      "plan": "One plan as a card.",
+      "faq": "Questions as native disclosures.",
+      "cta": "A closing call to action.",
+      "footer": "Copyright and links.",
+      "categories": "Categories as chips, a bar, a side list, tiles, or chips under a toolbar.",
+      "products": "Products as cards in a grid, a list or a rail that scrolls sideways.",
+      "product": "The gallery and the buy box of one product.",
+      "reviews": "Customer reviews with ratings.",
+      "cart": "The lines of a cart as a table or as cards.",
+      "summary": "Subtotal, shipping, tax and the total.",
+      "orders": "Past orders with status.",
+      "storehero": "The hero of a store with promises under the actions, beside a picture with an offer card or over a faint picture.",
+      "usp": "Free delivery, returns, warranty and help in one band.",
+      "zones": "Delivery zones and their prices as a table or as cards.",
+      "slots": "Days with their delivery windows as radio chips, beside the zone card.",
+      "delivery": "How delivery works: the facts, then the zones.",
+      "locations": "The stores with address, hours, phone and services.",
+      "productinfo": "Texts in an accordion beside a card of specs.",
+      "cartpage": "The cart lines beside a summary with a promo code and a free-delivery bar.",
+      "cartdrawer": "The cart drawer in its open state, filled or empty.",
+      "checkout": "Contacts, address, a window and the payment beside a sticky order summary.",
+      "announcement": "A thin strip above the page with one sentence and a link.",
+      "cookie": "A consent notice with accept and decline buttons.",
+      "newsletter": "An email field and a button, inline, stacked or beside a picture.",
+      "posts": "Posts as a grid, a list or a magazine.",
+      "postheader": "Category, title, excerpt, author line and a wide cover.",
+      "auth": "Sign in, sign up and reset password.",
+      "profile": "Account settings: picture, name, email, bio and notifications.",
+      "metrics": "Key counters of a dashboard.",
+      "chart": "Orders per day as bars or meters.",
+      "activity": "Recent events as a timeline or a list.",
+      "empty": "A list with nothing in it, with an optional action.",
+      "checklist": "Tasks to finish after sign-up, with progress.",
+      "stepper": "A multi-step form header with the current step.",
+      "contact": "A message form, alone or beside the ways to reach us.",
+      "channels": "Ways to get help: email, chat, docs.",
+      "templates": "Template gallery: filters, a browse-all button and an 8-card MediaFrame grid.",
+      "navbar": "A top bar in four shapes: inline, split around the brand, with a search field, and transparent over a picture.",
+      "megamenu": "A top bar whose first item opens a wide panel of link groups, with an optional promo card.",
+      "sitemap": "A footer with the brand, groups of links and the copyright; a single row, a sign-up first or a status pill.",
+      "bento": "Tiles of different sizes in one grid; the large tiles hold the main features.",
+      "featuretabs": "Features as tabs; the chosen one fills the panel beside or below the tab list.",
+      "accordion": "Features as a list of disclosures, the first one open, with an optional picture.",
+      "sticky": "A picture that stays in view beside a list of features. Following the section being read is a port contract (ScrollSpy).",
+      "iconwall": "Many small features as icons with a name: tiles or chips in three to six columns.",
+      "beforeafter": "Two sides of the same points: how it was and how it is, as two cards or as rows.",
+      "proof": "A bar of customer logos and a row of key figures together.",
+      "videos": "Customer videos as thumbnails with a play button. Playing is a port contract (VideoEmbed).",
+      "compare": "Plans, or a product and its rivals, in columns, and the features in rows; yes and no as marks.",
+      "usage": "A slider for how much is used and the price it gives. The estimate follows the slider; the page keeps the value.",
+      "credits": "One-off packs of credits with a price: tiles in two or four columns, or rows.",
+      "pagehead": "The head of an inner page: the heading, one sentence and an optional action.",
+      "authpage": "A whole sign-in page: the card beside a picture panel, on a tinted page, or alone; with any mode of the card.",
+      "wizard": "A sign-up in steps with a progress bar or a list of steps; back and next move between them.",
+      "shell": "The frame of a signed-in app with a first screen: a sidebar, a top bar, or three panes.",
+      "overview": "Counters, a chart and recent activity in one section.",
+      "kanban": "Work items in lanes with a count; cards with a tag and a person. Moving cards is a port contract (SortableList).",
+      "sidenav": "A vertical navigation with the brand on top and the user at the bottom: full, or icons only.",
+      "bottomnav": "An app-style tab bar for a phone: an icon over a name, the current tab marked.",
+      "skeleton": "Grey blocks in the shape of what is coming: cards, a list or an article.",
+      "tour": "One stop of a product tour: the explained element and a callout with the step, a sentence and buttons. Placing it on the real element is a port contract.",
+      "videomodal": "A dialog with a walkthrough video and an optional list of chapters. Opening and playing are port contracts.",
+      "errorpage": "A page for something that went wrong, such as a missing page: a code, a heading, a sentence and the way back.",
+      "article": "A long read in one reading column, or beside a table of contents that links to the sections.",
+      "team": "The people of a team as cards, a minimal grid, detailed cards, rows beside a picture or a directory.",
+      "photos": "Photos in a grid, a masonry, a mosaic, a featured picture with thumbnails, or cards.",
+      "projects": "Projects as cards, a compact grid, captions over pictures, a bento or a list beside a collage.",
+      "jobs": "Open jobs as cards, grouped by department, or as a table.",
+      "aboutme": "A personal about section beside a portrait: key facts or skills.",
+      "about": "The culture: a strip of pictures, figures and values.",
+      "timeline": "Milestones on a vertical line beside a picture, in a narrow column, or in a row.",
+      "dashshell": "Twelve frames of a signed-in app around empty cards: a top bar across the shell or over the content, with or without search; a wide, rail, collapsed, two-level or no sidebar, at the start or the end; a footer across the shell, under the content or none.",
+      "herosplit": "A split hero with figures, faces, small cards or a quote under the lead, beside a picture, a floating card, a picture grid or plan cards.",
+      "faqsplit": "Questions beside the heading, a help card, a picture or a finder, or as cards in three or four columns.",
+      "ctaproof": "A call to action with logos, features, figures, icon rows or delivery zones; centered or beside a picture.",
+      "quotesplit": "One quote beside a picture, a rating panel or over logo tiles; stacked quotes beside a picture; four compact quotes; figures over a featured quote and a stack.",
+      "postsplit": "Tags, reading figures and an author card with share and save over a wide cover; the author, figures, tags and actions beside the cover; or the facts and related reading beside it.",
+      "footersplit": "The brand with figures and a sitemap link over link-group cards; or a split beside a picture with points, link columns, a newsletter card, the contacts or the community channels.",
+      "featuresplit": "Features beside a picture: plain in two columns, as cards with actions, two figures over checked rows, or four metric cards with actions.",
+      "pagetrail": "Breadcrumbs over the badge, the heading and the lead; with one large figure, a note card or four key facts at the end.",
+      "postshowcase": "Four small post cards beside an intro with a view-all link; the first post in detail beside its picture; or cards with the text on a panel over the picture, in two or three columns.",
+      "medialist": "Four figures, figures with a featured review, numbered steps, the latest posts, topic rows, or contact buttons with support figures, beside a picture.",
+      "featureshowcase": "Cards with a picture on top and a read link, or with a muted glyph panel on top like an index of categories, in three or four columns.",
+      "storytabs": "Year tabs over the panel of the chosen year, or the heading beside a picture with arrows and one dot per step. Choosing a step is an event."
+    },
+    "variants": {
+      "header": {
+        "inline": "Inline",
+        "stacked": "Stacked",
+        "sticky": "Sticky",
+        "withCta": "Inline with a call to action"
+      },
+      "hero": {
+        "centered": "Centered",
+        "screenshot": "Centered with a screenshot below",
+        "backdrop": "Centered over a picture",
+        "code": "Split with a terminal window",
+        "cluster": "Split with a cluster of cards",
+        "display": "Oversized heading",
+        "form": "Centered with an email field",
+        "prompt": "Nav inside the hero, badge, display title, composer and topic pills",
+        "twoActions": "Centered, two actions",
+        "split": "Split, media at the end",
+        "splitStart": "Split, media at the start",
+        "muted": "Muted tone",
+        "saas": "SaaS product: split with a picture",
+        "shop": "Shop: picture first, muted",
+        "blog": "Blog: centered, compact"
+      },
+      "logos": {
+        "grid4": "Grid, four columns",
+        "grid3": "Grid, three columns, tiles",
+        "row": "Logo ribbon: one row of large marks",
+        "icons": "Icons only, muted",
+        "grid2": "Grid, two columns, roomy",
+        "tiles4": "Tiles, four columns"
+      },
+      "features": {
+        "grid": "Grid, three columns",
+        "grid2": "Grid, two columns, roomy",
+        "tiles4": "Tiles, four columns",
+        "cells4": "Hairline 4x2 cells with icon tiles",
+        "rows": "Rows",
+        "rowsStart": "Rows, media at the start, compact",
+        "rowsAlternate": "Rows, alternating media, muted",
+        "tilesMuted": "Tiles, three columns, muted"
+      },
+      "stats": {
+        "plain4": "Plain figures, four columns",
+        "panel": "One panel card, four figures, no heading",
+        "stack": "Figures stacked in one column",
+        "image": "Figures over a picture",
+        "cards": "Cards, three columns, three figures",
+        "icons": "Figures with icons, left aligned",
+        "muted2": "Plain, two columns, muted",
+        "cardsCompact": "Cards, four columns, compact"
+      },
+      "testimonials": {
+        "grid3": "Cards, three columns",
+        "masonry": "Masonry of cards",
+        "strip": "Strip that scrolls sideways",
+        "social": "Posts of a social wall",
+        "featured": "One featured quote with a mark",
+        "grid2": "Cards, two columns",
+        "single": "Single quote, wide",
+        "stack": "Narrow stack",
+        "plain": "Plain quotes, no avatars",
+        "noRating": "Cards, no rating, roomy"
+      },
+      "steps": {
+        "row": "Row with numbers",
+        "rowIcons": "Row with icons",
+        "column": "Column",
+        "centered": "Row, centered, muted",
+        "columnIcons": "Column with icons, roomy",
+        "compact": "Row, compact"
+      },
+      "pricing": {
+        "grid": "Grid, three columns",
+        "monthly": "With a billing toggle, monthly",
+        "annual": "With a billing toggle, annual",
+        "duo": "Free and Pro side by side",
+        "grid2": "Grid, two columns",
+        "grid4": "Grid, four columns",
+        "stack": "Stack",
+        "flat": "No emphasis",
+        "compactMuted": "Muted, compact",
+        "roomy": "Roomy"
+      },
+      "plan": {
+        "standard": "Standard",
+        "flat": "No emphasis",
+        "compact": "Compact"
+      },
+      "faq": {
+        "list": "List",
+        "chat": "Chat bubbles",
+        "search": "With a search field",
+        "tabs": "Category tabs",
+        "twoColumns": "Two columns",
+        "muted": "Muted, compact",
+        "roomy": "Roomy"
+      },
+      "cta": {
+        "card": "Card",
+        "banner": "Centered muted card",
+        "row": "Heading and button in one row",
+        "form": "With an email field",
+        "quote": "With a customer quote",
+        "band": "Band, roomy",
+        "split": "Split, two actions",
+        "compact": "Compact card",
+        "saas": "SaaS: band, two actions",
+        "shop": "Shop: split with a picture",
+        "agency": "Agency: card, two actions"
+      },
+      "footer": {
+        "minimal": "Minimal",
+        "centered": "Centered",
+        "compact": "Compact"
+      },
+      "categories": {
+        "chips": "Chips",
+        "bar": "Bar with an underline",
+        "sidebar": "Side list",
+        "chipsPlain": "Chips, names only",
+        "barCompact": "Bar, compact, no icons",
+        "tiles": "Tiles with a big icon",
+        "toolbar": "Chips under a toolbar"
+      },
+      "products": {
+        "grid3": "Grid, three columns",
+        "grid4": "Grid, four columns, square pictures",
+        "grid2": "Grid, two columns, tall pictures",
+        "list": "List of horizontal cards",
+        "catalog": "Compact catalog, no rating",
+        "browse": "Browse only, muted",
+        "showcase": "Showcase, tall pictures, roomy",
+        "rail": "Rail that scrolls sideways",
+        "railCompact": "Rail, square pictures, compact"
+      },
+      "product": {
+        "split": "Gallery at the start, thumbnails",
+        "splitEnd": "Gallery at the end",
+        "stacked": "Stacked, no thumbnails",
+        "compact": "Compact buy box",
+        "muted": "Muted, roomy"
+      },
+      "reviews": {
+        "list": "List of cards",
+        "grid": "Grid of cards",
+        "plain": "Plain entries",
+        "avatars": "With avatars",
+        "mutedGrid": "Muted grid with avatars"
+      },
+      "cart": {
+        "table": "Table",
+        "cards": "Cards",
+        "tableCompact": "Compact table, no pictures",
+        "cardsPlain": "Cards, no pictures, muted"
+      },
+      "summary": {
+        "card": "Card with a checkout button",
+        "plain": "Plain, without a note",
+        "noCta": "Card without a button",
+        "muted": "Muted"
+      },
+      "orders": {
+        "table": "Table with a pager",
+        "cards": "Cards",
+        "noPager": "Table without a pager",
+        "compactMuted": "Compact, muted"
+      },
+      "storehero": {
+        "overlay": "Picture with an offer card",
+        "overlayStart": "Picture at the start",
+        "backdrop": "Text over a faint picture",
+        "muted": "Muted, one action"
+      },
+      "usp": {
+        "strip": "Muted strip",
+        "cards": "Cards under a heading",
+        "stripCompact": "Muted strip, compact",
+        "bar": "Thin bar of icons",
+        "barMuted": "Thin bar, muted"
+      },
+      "zones": {
+        "table": "Table",
+        "cards": "Cards",
+        "tableMuted": "Table, muted, compact"
+      },
+      "slots": {
+        "split": "Days beside the zone card",
+        "plain": "Plain days",
+        "stacked": "Days only, muted"
+      },
+      "delivery": {
+        "full": "Facts over zone cards",
+        "split": "Facts beside a list of zones",
+        "facts": "Facts only, muted, compact"
+      },
+      "locations": {
+        "cards": "Cards",
+        "list": "One row per store, muted",
+        "map": "Beside a map"
+      },
+      "productinfo": {
+        "split": "Specs beside the texts",
+        "stacked": "Specs below",
+        "closed": "All closed, muted"
+      },
+      "cartpage": {
+        "split": "Summary beside the lines",
+        "stacked": "Summary below",
+        "plain": "No promo code, no bar, muted"
+      },
+      "cartdrawer": {
+        "filled": "Open, with lines",
+        "compact": "No pictures",
+        "empty": "Empty"
+      },
+      "checkout": {
+        "cards": "Steps in cards",
+        "numbered": "Numbered steps",
+        "noSummary": "Without the summary, muted"
+      },
+      "announcement": {
+        "bar": "Primary strip",
+        "badge": "With a tag: New",
+        "bottom": "Stays at the bottom edge",
+        "muted": "Muted strip",
+        "split": "Split, text left and link right",
+        "dismissible": "With a close button",
+        "shop": "Shop: free shipping, muted",
+        "agency": "Agency: open slots, split"
+      },
+      "cookie": {
+        "bar": "Bar",
+        "card": "Card",
+        "settings": "Bar with a settings button",
+        "muted": "Muted card with settings"
+      },
+      "newsletter": {
+        "inline": "Inline, centered",
+        "stacked": "Stacked",
+        "split": "Split with a picture",
+        "consent": "With a consent line",
+        "muted": "Muted, consent"
+      },
+      "posts": {
+        "grid": "Grid, three columns",
+        "filters": "Grid with topic filters",
+        "twoUp": "Grid, two columns",
+        "row4": "Grid, four columns in one row",
+        "news4": "Four news cards, title on image, date strip",
+        "list": "List of horizontal cards",
+        "magazine": "Magazine: first post wide",
+        "textOnly": "Text only",
+        "digest": "Digest: short meta, compact, muted"
+      },
+      "postheader": {
+        "start": "Left aligned with a cover",
+        "center": "Centered",
+        "noCover": "Without a cover",
+        "minimal": "Minimal: short meta, muted"
+      },
+      "auth": {
+        "signin": "Sign in",
+        "magic": "Magic link only",
+        "socialFirst": "Other sign-in options first",
+        "signup": "Sign up",
+        "reset": "Reset password",
+        "plain": "Sign in without a card",
+        "social": "Sign in with other options",
+        "signupSocial": "Sign up with other options, plain"
+      },
+      "profile": {
+        "stacked": "Stacked",
+        "split": "Fields beside notifications",
+        "minimal": "Fields only",
+        "muted": "Muted split"
+      },
+      "metrics": {
+        "tiles": "Four tiles",
+        "twoUp": "Two by two",
+        "compact": "Compact figures",
+        "muted": "Muted, compact"
+      },
+      "chart": {
+        "bars": "Bars",
+        "short": "Short bars",
+        "meters": "Meters",
+        "muted": "Muted compact meters"
+      },
+      "activity": {
+        "timeline": "Timeline",
+        "list": "List",
+        "compact": "Compact list",
+        "muted": "Muted timeline"
+      },
+      "empty": {
+        "illustrated": "With a picture and an action",
+        "orders": "No orders yet",
+        "results": "Nothing found, plain",
+        "inbox": "Inbox is empty, no action",
+        "compact": "Compact",
+        "plainNoAction": "Plain, compact, no action"
+      },
+      "checklist": {
+        "card": "Card with a progress bar",
+        "expand": "Tasks that open",
+        "plain": "Plain",
+        "text": "Count as text",
+        "none": "No progress",
+        "numbered": "Numbered",
+        "muted": "Muted, numbered, count"
+      },
+      "stepper": {
+        "horizontal": "Horizontal",
+        "vertical": "Vertical",
+        "icons": "Icon markers",
+        "bare": "Without the step text"
+      },
+      "contact": {
+        "single": "Single column, all fields",
+        "page": "A page of its own: a short form",
+        "short": "Email and message only",
+        "split": "Beside the ways to reach us",
+        "consent": "With a consent line",
+        "muted": "Muted split, short"
+      },
+      "channels": {
+        "grid": "Cards in a row",
+        "twoUp": "Two columns",
+        "list": "List",
+        "plain": "Muted, without links"
+      },
+      "templates": {
+        "grid4": "Four columns, eight cards",
+        "grid3": "Three columns",
+        "muted": "Muted, compact",
+        "roomy": "Roomy"
+      },
+      "navbar": {
+        "inline": "Brand, links and a button",
+        "split": "Brand in the middle",
+        "search": "With a search field",
+        "media": "Transparent over a picture",
+        "plain": "Without a button",
+        "inverse": "On a dark hero band with Log In"
+      },
+      "megamenu": {
+        "open": "Panel open, three columns",
+        "closed": "Panel closed",
+        "twoCols": "Two columns",
+        "promo": "With a promo card"
+      },
+      "sitemap": {
+        "columns": "One column per group",
+        "card": "Groups in one rounded card",
+        "row": "Single row",
+        "newsletter": "Sign-up first",
+        "status": "With a status pill",
+        "compact": "Compact"
+      },
+      "bento": {
+        "bento": "Mixed sizes",
+        "even": "Even tiles",
+        "images": "With pictures",
+        "muted": "Muted, compact"
+      },
+      "featuretabs": {
+        "split": "Panel beside the tabs",
+        "stack": "Panel below the tabs",
+        "muted": "Muted, compact"
+      },
+      "accordion": {
+        "first": "First open",
+        "closed": "All closed",
+        "media": "With a picture",
+        "muted": "Muted, compact"
+      },
+      "sticky": {
+        "end": "Picture at the end",
+        "start": "Picture at the start",
+        "card": "Features as cards",
+        "muted": "Muted, compact"
+      },
+      "iconwall": {
+        "tiles4": "Tiles, four columns",
+        "tiles3": "Tiles, three columns",
+        "chips6": "Chips, six columns",
+        "chips4": "Chips, four columns",
+        "muted": "Muted, compact"
+      },
+      "beforeafter": {
+        "cards": "Two cards",
+        "rows": "One row per point",
+        "plain": "Without icons",
+        "muted": "Muted, compact"
+      },
+      "proof": {
+        "above": "Logos above the figures",
+        "beside": "Logos beside the figures",
+        "icons": "Icons only",
+        "muted": "Muted, compact"
+      },
+      "videos": {
+        "grid3": "Three columns",
+        "grid2": "Two columns",
+        "overlay": "Caption over the picture",
+        "muted": "Muted, compact"
+      },
+      "compare": {
+        "plans": "Plans",
+        "highlight": "Middle column stands out",
+        "rivals": "Us and the rivals",
+        "muted": "Muted, compact"
+      },
+      "usage": {
+        "card": "Card",
+        "plain": "Plain",
+        "noEnds": "Without the end labels",
+        "muted": "Muted"
+      },
+      "credits": {
+        "tiles4": "Tiles, four columns",
+        "tiles2": "Tiles, two columns",
+        "rows": "Rows",
+        "muted": "Muted, compact"
+      },
+      "pagehead": {
+        "start": "Left aligned",
+        "center": "Centered",
+        "muted": "Muted, compact"
+      },
+      "authpage": {
+        "split": "Card beside a picture",
+        "splitStart": "Picture at the start",
+        "centered": "Card on a tinted page",
+        "minimal": "Card alone",
+        "signup": "Sign up",
+        "reset": "Reset password",
+        "magic": "Magic link only",
+        "social": "With other sign-in options",
+        "socialFirst": "Other options first"
+      },
+      "wizard": {
+        "bar": "Progress bar",
+        "list": "List of steps",
+        "plain": "Without a card",
+        "second": "Second step, list of steps, no card"
+      },
+      "shell": {
+        "sidebar": "Sidebar and content",
+        "top": "Top bar and content",
+        "panes": "Three panes",
+        "dense": "Sidebar, compact"
+      },
+      "overview": {
+        "split": "Chart beside the activity",
+        "stacked": "Chart above the activity",
+        "twoCols": "Two counters per row",
+        "muted": "Muted, compact"
+      },
+      "kanban": {
+        "detail": "Cards with a tag and a person",
+        "simple": "Titles only",
+        "twoCols": "Two lanes per row",
+        "muted": "Muted, compact"
+      },
+      "sidenav": {
+        "full": "Icons and names",
+        "compact": "Icons only",
+        "noUser": "Without the user",
+        "dense": "Dense rows"
+      },
+      "bottomnav": {
+        "labels": "Icons with names",
+        "icons": "Icons only",
+        "sticky": "Stays at the bottom",
+        "muted": "Muted"
+      },
+      "skeleton": {
+        "cards": "Cards",
+        "list": "List",
+        "article": "Article",
+        "muted": "Muted cards"
+      },
+      "tour": {
+        "below": "Callout below",
+        "above": "Callout above",
+        "end": "Callout beside",
+        "muted": "Muted, compact"
+      },
+      "videomodal": {
+        "default": "Standard size",
+        "wide": "Wide",
+        "chapters": "With chapters",
+        "muted": "Muted"
+      },
+      "errorpage": {
+        "centered": "Centered",
+        "split": "Split with a picture",
+        "noCode": "Without the code",
+        "two": "Two actions",
+        "muted": "Muted"
+      },
+      "article": {
+        "column": "Reading column",
+        "toc": "With a table of contents",
+        "plain": "Without pull quotes",
+        "muted": "Muted"
+      },
+      "team": {
+        "cards4": "Portrait cards, four columns",
+        "cards3": "Portrait cards, three columns, muted",
+        "minimal": "Small portraits, names only",
+        "detailed": "Detailed cards with skills",
+        "list": "Rows beside a picture",
+        "directory": "Directory, two columns, compact"
+      },
+      "photos": {
+        "grid": "Grid with captions",
+        "gridPlain": "Grid without captions, muted",
+        "masonry": "Masonry of mixed heights",
+        "mosaic": "Mosaic with one big tile",
+        "featured": "Featured picture over thumbnails",
+        "cards": "Cards with a tag, compact"
+      },
+      "projects": {
+        "cards": "Cards with tags and links",
+        "compact": "Compact, four columns",
+        "overlay": "Captions over the pictures",
+        "bento": "Bento with one big project",
+        "list": "List beside a collage",
+        "cardsMuted": "Cards, muted, compact"
+      },
+      "jobs": {
+        "grid": "Cards in two columns",
+        "salary": "Cards with the salary",
+        "grouped": "Grouped by department",
+        "table": "Table with the salary, muted"
+      },
+      "aboutme": {
+        "facts": "Portrait first, key facts",
+        "factsEnd": "Portrait at the end",
+        "skills": "Skills with bars",
+        "skillsMuted": "Skills, portrait at the end, muted"
+      },
+      "about": {
+        "split": "Pictures beside the text",
+        "stacked": "Pictures below, values in a row",
+        "muted": "Muted, compact"
+      },
+      "timeline": {
+        "split": "Beside a picture",
+        "stacked": "Narrow column",
+        "row": "A row of columns",
+        "rowMuted": "Row, muted, compact"
+      },
+      "dashshell": {
+        "classic": "Top bar across, wide sidebar",
+        "inset": "Top bar over the content, footer under it",
+        "rail": "Top bar across, icon rail, no search",
+        "railFooter": "Icon rail, top bar over the content, footer across",
+        "collapsed": "Collapsed sidebar, top bar over the content",
+        "twoLevel": "Two-level sidebar, footer under the content",
+        "twoLevelFull": "Two-level sidebar under a top bar, footer across",
+        "end": "Wide sidebar at the end, footer across",
+        "railEnd": "Icon rail at the end, top bar over the content",
+        "topOnly": "Top bar with the links, no sidebar",
+        "sideOnly": "Wide sidebar, no top bar",
+        "collapsedEnd": "Collapsed sidebar at the end, no top bar"
+      },
+      "herosplit": {
+        "statsCards": "Figures in cards beside a picture",
+        "avatars": "Faces and a proof line",
+        "miniCards": "Two small cards, floating card, muted",
+        "quoteStats": "Quote and figures beside a floating card",
+        "planCards": "Plan cards on the picture, picture first",
+        "pictureGrid": "Figures beside a grid of four pictures",
+        "pictureGridStart": "Grid of four pictures first, faces"
+      },
+      "faqsplit": {
+        "headSplit": "Heading and action beside the questions",
+        "helpCard": "Questions beside a help card",
+        "picture": "Questions and action beside a picture",
+        "finder": "Picture first, search, topics and popular questions",
+        "cards3": "Cards in three columns",
+        "cards4": "Cards in four columns",
+        "cardsIcons": "Cards with icons, muted"
+      },
+      "ctaproof": {
+        "centerLogos": "Centered over a row of logos",
+        "centerFeatures": "Centered with small features",
+        "centerStats": "Centered with three figures, muted",
+        "splitStats": "Figures beside a picture",
+        "splitStatsStart": "Picture first, figures and a note",
+        "splitRows": "Icon rows beside a picture",
+        "splitZones": "Delivery zones beside a picture, muted"
+      },
+      "quotesplit": {
+        "quoteCard": "One quote card beside a picture",
+        "logoTiles": "Picture first, a quote over logo tiles",
+        "ratingPanel": "A quote beside a rating panel, muted",
+        "stackedCards": "Picture first, three stacked quotes",
+        "compact4": "Four compact quotes in a row",
+        "bentoFigures": "Figures over a featured quote and a stack"
+      },
+      "postsplit": {
+        "centerShare": "Centered: tags, figures and a share card over a wide cover",
+        "splitTags": "Author line, tags, share and save beside the cover",
+        "splitBioStart": "Cover first, an author card with the bio and one wide action",
+        "splitSquare": "A square cover, a wide action with share and save as icons",
+        "outlineStart": "Cover first, the facts and related reading",
+        "splitStats": "An author card and figures beside the cover, muted"
+      },
+      "footersplit": {
+        "statsCards": "The brand with figures over link-group cards",
+        "splitPoints": "The brand and four points beside a picture",
+        "splitLinks": "The brand and small link columns beside a picture, muted",
+        "newsletterStart": "Picture first, a newsletter card and link columns",
+        "splitContacts": "The contacts and two actions beside a picture",
+        "channelsStart": "Picture first, the community channels and figures"
+      },
+      "featuresplit": {
+        "gridStart": "Picture first, four plain features in two columns",
+        "statsStart": "A square picture first, two figures over checked rows",
+        "gridMuted": "Four plain features beside a picture, muted",
+        "metricCards": "Four metric cards and actions beside a picture",
+        "featureCards": "Four feature cards and actions beside a picture"
+      },
+      "pagetrail": {
+        "crumbs": "Breadcrumbs, badge, heading and lead",
+        "crumbsFigure": "With one large figure at the end",
+        "crumbsNote": "With a note card at the end",
+        "keyFacts": "With four key facts beside it, muted"
+      },
+      "postshowcase": {
+        "introCards": "Four small post cards first, the intro and a view-all link",
+        "featuredEnd": "The featured post beside its picture, muted",
+        "overlay3": "Three cards with the text over the picture",
+        "overlay2": "Two wide cards with the text over the picture"
+      },
+      "medialist": {
+        "figuresStart": "Picture first, four figures and an action",
+        "proofReview": "Three figures and a featured review",
+        "stepsRows": "Numbered steps beside a square picture",
+        "latestPosts": "The latest posts and a subscribe action, muted",
+        "topicRows": "Topic rows with counts beside a square picture",
+        "contactStart": "Picture first, contact buttons and support figures"
+      },
+      "featureshowcase": {
+        "pictureCards3": "Three cards with a picture on top",
+        "panelCards4": "Four cards with a glyph panel on top",
+        "pictureCards4": "Four cards with a picture on top, muted",
+        "panelCards3": "Three cards with a glyph panel on top"
+      },
+      "storytabs": {
+        "yearTabs": "Year tabs over the panel of the chosen year",
+        "carouselSplit": "The heading beside a picture with arrows and dots",
+        "yearTabsMuted": "Year tabs, muted"
+      }
+    },
+    "landmark": "{0}, {1}",
+    "themes": {
+      "marketing": {
+        "title": "Marketing",
+        "text": "Landing page sections: header, hero, proof, features, pricing, FAQ, call to action, footer."
+      },
+      "commerce": {
+        "title": "Commerce",
+        "text": "A storefront: categories, products, product page, reviews, cart, summary and orders."
+      },
+      "promo": {
+        "title": "Promo",
+        "text": "Announcements, cookie notice and newsletter sign-up."
+      },
+      "content": {
+        "title": "Content",
+        "text": "A blog: posts, the article header and the author."
+      },
+      "account": {
+        "title": "Account",
+        "text": "Sign in, sign up and profile."
+      },
+      "dashboard": {
+        "title": "Dashboard",
+        "text": "Metric cards, charts, activity and empty states."
+      },
+      "onboarding": {
+        "title": "Onboarding",
+        "text": "A checklist and a stepper for first-time users."
+      },
+      "support": {
+        "title": "Support",
+        "text": "A contact form and the ways to reach us."
+      }
+    }
+  },
+  "testimonials": {
+    "rating": "{0} out of 5",
+    "byLine": "{0}, {1}",
+    "handleLine": "{0} / {1}"
+  },
+  "marketing": {
+    "logos": {
+      "title": "Best Companies Use Our Service"
+    },
+    "stats": {
+      "title": "",
+      "empty": "No figures to show yet"
+    },
+    "testimonials": {
+      "title": "What customers say"
+    },
+    "steps": {
+      "title": "How it works"
+    },
+    "heroSplit": {
+      "title": "Ship pages your team can trust",
+      "lead": "Plain blocks, one dictionary of texts and eight runtimes from the same specs.",
+      "badge": "New in 2.0",
+      "cta": "Start free",
+      "secondary": "See the features",
+      "proof": "Loved by 3,200 teams",
+      "cardTitle": "Built in a day",
+      "cardText": "Most teams publish their first page before lunch."
+    },
+    "faqSplit": {
+      "title": "Questions, answered",
+      "lead": "The short version of what people ask us most.",
+      "badge": "Help",
+      "cta": "Ask a question",
+      "more": "Read more",
+      "asideTitle": "Still stuck?",
+      "asideText": "A person answers every message.",
+      "asideCta": "Contact the team",
+      "search": "Search the answers",
+      "popular": "Popular questions"
+    },
+    "ctaProof": {
+      "title": "Start building today",
+      "lead": "Join the teams that publish faster with fewer moving parts.",
+      "badge": "Free for 14 days",
+      "cta": "Start free",
+      "secondary": "Talk to sales",
+      "note": "No card needed. Cancel at any time.",
+      "zonesTitle": "Free delivery from your zone",
+      "zonesLead": "Order before 20:00 and pick a two-hour window."
+    },
+    "quoteSplit": {
+      "title": "Teams that switched",
+      "lead": "What people say after their first month.",
+      "badge": "Customers",
+      "score": "4.9 out of 5",
+      "reviews": "From 2,400 reviews",
+      "cta": "Read the stories",
+      "secondary": "Talk to us"
+    },
+    "footerSplit": {
+      "tagline": "Sites from one set of blocks, in every runtime.",
+      "copyright": "\u00a9 2026 Northwind. All rights reserved.",
+      "labels": {
+        "title": "Get in touch",
+        "text": "Ready to start a project? Write to us and we answer within a day.",
+        "loopTitle": "Stay in the loop",
+        "loopText": "News, guides and new blocks, once a month in your inbox.",
+        "joinTitle": "Join the community",
+        "joinText": "Learn from other builders and share what you make.",
+        "sitemap": "View the sitemap",
+        "points": "Why teams pick us",
+        "signup": "Newsletter",
+        "email": "Email address",
+        "subscribe": "Subscribe",
+        "note": "No spam. Leave at any time.",
+        "cta": "Start a project",
+        "secondary": "See our work"
+      }
+    },
+    "featureSplit": {
+      "title": "Built for teams that ship",
+      "lead": "Everything you need to plan, build and publish, in one place.",
+      "badge": "Features",
+      "cta": "Start free",
+      "secondary": "See it in action"
+    },
+    "pageTrail": {
+      "title": "The catalog",
+      "lead": "Everything in stock, filtered and sorted in one place. Search works as you type.",
+      "badge": "Shop",
+      "label": "Breadcrumbs",
+      "value": "48",
+      "caption": "products in stock",
+      "note": "Order before 18:00 for delivery tomorrow."
+    },
+    "mediaList": {
+      "count": "{0} items",
+      "featured": "Featured review",
+      "supportFigures": "Support in numbers",
+      "figures": {
+        "title": "Results you can measure",
+        "lead": "Teams of every size publish faster and keep their pages fast.",
+        "badge": "Results",
+        "list": "Our numbers",
+        "cta": "See the results"
+      },
+      "proof": {
+        "title": "Proven by the people who use it",
+        "lead": "Customers rate us highly and see the change within weeks.",
+        "badge": "Reviews",
+        "list": "What customers say",
+        "cta": "Start free",
+        "secondary": "Read all reviews"
+      },
+      "steps": {
+        "title": "How a project runs",
+        "lead": "Four steps from the first call to a live site, with no surprises.",
+        "badge": "Process",
+        "list": "The process",
+        "cta": "Start a project"
+      },
+      "posts": {
+        "title": "Get the newsletter",
+        "lead": "The best guides and news, once a week in your inbox.",
+        "badge": "Weekly digest",
+        "list": "Latest posts",
+        "cta": "Subscribe"
+      },
+      "topics": {
+        "title": "Browse by category",
+        "lead": "Every category with its count, so you know where to look.",
+        "badge": "Categories",
+        "list": "All categories",
+        "cta": "View all categories"
+      },
+      "contact": {
+        "title": "Help when you need it",
+        "lead": "Chat, email or the docs: pick the way that suits you.",
+        "badge": "Support",
+        "list": "Get help",
+        "cta": "Contact us"
+      }
+    },
+    "featureShowcase": {
+      "title": "Everything in one place",
+      "lead": "Each part does one job well, and they all work together.",
+      "more": "Learn more"
+    }
+  },
+  "cases": {
+    "saas": {
+      "hero": {
+        "title": "Ship your product site in a day",
+        "text": "Connect your data, pick the blocks and publish to every runtime.",
+        "cta": "Start free",
+        "secondary": "Book a demo"
+      },
+      "cta": {
+        "title": "Build your next release on solid ground",
+        "text": "Free for small teams, simple pricing when you grow.",
+        "cta": "Start free",
+        "secondary": "See pricing"
+      }
+    },
+    "shop": {
+      "hero": {
+        "title": "Desk gear that lasts",
+        "text": "Lamps, bags and audio picked by people who work at a desk all day.",
+        "cta": "Shop the collection",
+        "secondary": "See what is new"
+      },
+      "cta": {
+        "title": "Free shipping on orders over 75 dollars",
+        "text": "Thirty-day returns, no questions asked.",
+        "cta": "Start shopping",
+        "secondary": "Delivery details"
+      },
+      "announcement": {
+        "text": "Free shipping on orders over 75 dollars.",
+        "cta": "Shop now"
+      }
+    },
+    "agency": {
+      "cta": {
+        "title": "Have a project in mind?",
+        "text": "Tell us about it and we will reply within two days.",
+        "cta": "Start a project",
+        "secondary": "See case studies"
+      },
+      "announcement": {
+        "text": "Two slots are open for spring projects.",
+        "cta": "Book a call"
+      }
+    },
+    "blog": {
+      "hero": {
+        "title": "Notes from the team",
+        "text": "Short, practical writing about building for the web.",
+        "cta": "Read the latest",
+        "secondary": "Subscribe"
+      }
+    }
+  },
+  "commerce": {
+    "nav": {
+      "label": "Product categories"
+    },
+    "products": {
+      "title": "Popular right now"
+    },
+    "productLabels": {
+      "add": "Add to cart",
+      "soldOut": "Sold out",
+      "reviews": "{0} reviews",
+      "ratingLabel": "{0} out of 5",
+      "was": "Was",
+      "empty": "No products to show yet"
+    },
+    "badges": {
+      "new": "New",
+      "sale": "Sale"
+    },
+    "detail": {
+      "add": "Add to cart",
+      "soldOut": "Sold out",
+      "inStock": "In stock",
+      "qty": "Quantity",
+      "reviews": "{0} reviews",
+      "ratingLabel": "{0} out of 5",
+      "shipping": "Free shipping over 75 dollars",
+      "returns": "Thirty-day returns",
+      "decrease": "Decrease quantity",
+      "increase": "Increase quantity",
+      "was": "Was",
+      "empty": "No product to show"
+    },
+    "reviews": {
+      "title": "What buyers say"
+    },
+    "reviewLabels": {
+      "ratingLabel": "{0} out of 5",
+      "empty": "No reviews yet"
+    },
+    "cart": {
+      "title": "Your cart",
+      "caption": "Items in your cart",
+      "product": "Product",
+      "price": "Price",
+      "qty": "Quantity",
+      "total": "Total",
+      "remove": "Remove",
+      "subtotal": "Subtotal",
+      "checkout": "Go to checkout",
+      "decrease": "Decrease quantity",
+      "increase": "Increase quantity"
+    },
+    "summary": {
+      "title": "Order summary",
+      "checkout": "Go to checkout",
+      "note": "Taxes are calculated at checkout."
+    },
+    "orders": {
+      "title": "Your orders",
+      "caption": "Past orders",
+      "number": "Order",
+      "date": "Date",
+      "items": "Items",
+      "total": "Total",
+      "status": "Status",
+      "itemsCount": "{0} items",
+      "summary": "Showing {0}-{1} of {2}",
+      "previous": "Previous",
+      "next": "Next"
+    },
+    "storeHero": {
+      "title": "Everything for a calm desk, delivered in two hours",
+      "lead": "Lamps, bags and desk goods from small workshops. Order before 20:00 and pick a window that suits you.",
+      "badge": "New season",
+      "cta": "Shop the catalog",
+      "secondary": "Delivery and pickup",
+      "card": {
+        "title": "Minus 15% on lighting",
+        "text": "With the code DESK15 until Sunday.",
+        "icon": "percent"
+      }
+    },
+    "usp": {
+      "title": "Why order here"
+    },
+    "tools": {
+      "search": "Search the catalog",
+      "sort": "Sort",
+      "sortValue": "Popular first",
+      "shown": "Showing 6 of 48",
+      "query": ""
+    },
+    "rail": {
+      "title": "Deals of the week"
+    },
+    "zones": {
+      "title": "Delivery zones and prices",
+      "lead": "The price depends on the zone of your address. Large orders ship free.",
+      "caption": "Delivery price by zone",
+      "zone": "Zone",
+      "price": "Delivery",
+      "freeFrom": "Free from",
+      "minOrder": "Minimum order",
+      "time": "Time",
+      "express": "Express"
+    },
+    "slots": {
+      "title": "Pick a delivery window",
+      "lead": "Windows close two hours before they start.",
+      "zone": "Delivery zone",
+      "price": "Delivery",
+      "freeFrom": "Free from",
+      "time": "Time",
+      "primary": "Go to checkout",
+      "secondary": "Back to the cart",
+      "note": "The courier calls ten minutes before arriving."
+    },
+    "delivery": {
+      "title": "Delivery",
+      "lead": "How we pack, when we come and what it costs.",
+      "zones": "Zones",
+      "freeFrom": "Free from {0}"
+    },
+    "stores": {
+      "title": "Stores and pickup",
+      "lead": "Pick up an order in thirty minutes or visit a showroom.",
+      "map": "Map of the stores",
+      "kinds": {
+        "pickup": "Pickup",
+        "store": "Store only"
+      }
+    },
+    "info": {
+      "title": "Product details",
+      "specs": "Specifications"
+    },
+    "totals": {
+      "title": "Order summary",
+      "items": "{0} products",
+      "promo": "Promo code",
+      "apply": "Apply",
+      "codes": "Try:",
+      "progress": "Add $12 more for free express delivery",
+      "checkout": "Go to checkout",
+      "note": "Taxes are calculated at checkout."
+    },
+    "cartPage": {
+      "title": "Your cart",
+      "back": "Continue shopping",
+      "clear": "Clear the cart",
+      "empty": "Your cart is empty"
+    },
+    "drawer": {
+      "title": "Cart",
+      "close": "Close the cart",
+      "progress": "Add $12 more for free express delivery",
+      "empty": "Your cart is empty",
+      "emptyText": "Add something from the catalog and it will show up here.",
+      "browse": "Browse the catalog"
+    },
+    "checkout": {
+      "title": "Checkout",
+      "submit": "Place the order",
+      "contacts": "Contacts",
+      "contactsText": "We send the order status to this phone and email.",
+      "name": "Full name",
+      "phone": "Phone",
+      "email": "Email",
+      "address": "Address",
+      "addressText": "Where the courier brings the order.",
+      "street": "Street",
+      "house": "House",
+      "flat": "Flat",
+      "entrance": "Entrance",
+      "floor": "Floor",
+      "comment": "Comment for the courier",
+      "slot": "Delivery window",
+      "slotText": "Pick a two-hour window.",
+      "payment": "Payment",
+      "paymentText": "You pay after we confirm the order.",
+      "consent": "I agree to the terms of sale and the privacy policy",
+      "legal": "By placing the order you confirm the address and the window."
+    },
+    "pages": {
+      "catalogTitle": "Catalog",
+      "catalogLead": "Lamps, bags and desk goods, sorted by what people buy most.",
+      "cartLead": "Check the lines, add a promo code and go to checkout.",
+      "checkoutLead": "Four short steps and the order is on its way.",
+      "related": "You may also like",
+      "bestsellers": "Bestsellers"
+    }
+  },
+  "promo": {
+    "announcement": {
+      "label": "Announcement",
+      "text": "New: dark mode for every block.",
+      "cta": "See what is new",
+      "dismiss": "Dismiss the announcement",
+      "badge": "New"
+    },
+    "cookie": {
+      "title": "We use cookies",
+      "text": "Cookies keep the site working and show us what to improve. You can change your choice at any time.",
+      "accept": "Accept all",
+      "decline": "Decline",
+      "settings": "Settings"
+    },
+    "newsletter": {
+      "title": "Get the monthly digest",
+      "text": "One short email a month with new blocks, guides and releases.",
+      "label": "Email address",
+      "submit": "Subscribe",
+      "consent": "One email a month. You can unsubscribe at any time."
+    }
+  },
+  "content": {
+    "posts": {
+      "title": "Latest News",
+      "action": "All Posts"
+    },
+    "labels": {
+      "minutes": "{0} min read",
+      "by": "By {0}",
+      "read": "Read the post",
+      "empty": "This post is not available"
+    },
+    "postSplit": {
+      "role": "Head of Growth",
+      "bio": "Mara writes about fast pages and the habits that keep them fast. She has shipped sites for teams of every size.",
+      "views": "12.8K",
+      "likes": "892",
+      "labels": {
+        "minutes": "{0} min read",
+        "views": "{0} views",
+        "likes": "{0} likes",
+        "share": "Share",
+        "save": "Save",
+        "read": "Start reading",
+        "related": "Related"
+      }
+    },
+    "postShowcase": {
+      "title": "Worth reading this week",
+      "lead": "The posts our readers shared most, picked by the editors.",
+      "badge": "Editors' picks",
+      "action": "View all posts"
+    }
+  },
+  "auth": {
+    "labels": {
+      "name": "Full name",
+      "email": "Email",
+      "password": "Password",
+      "remember": "Remember me",
+      "forgot": "Forgot password?",
+      "terms": "I agree to the terms of service",
+      "divider": "or",
+      "passkey": "Continue with a passkey",
+      "magic": "Email me a sign-in link"
+    },
+    "signin": {
+      "title": "Welcome back",
+      "text": "Sign in to continue to your workspace.",
+      "submit": "Sign in",
+      "switchText": "New here?",
+      "switchLink": "Create an account"
+    },
+    "signup": {
+      "title": "Create your account",
+      "text": "Start free. No card required.",
+      "submit": "Create account",
+      "switchText": "Already have an account?",
+      "switchLink": "Sign in"
+    },
+    "reset": {
+      "title": "Reset your password",
+      "text": "Enter your email and we will send you a link.",
+      "submit": "Send the link",
+      "switchText": "Remembered it?",
+      "switchLink": "Back to sign in"
+    },
+    "magic": {
+      "title": "Sign in with a link",
+      "text": "We email you a link. No password needed.",
+      "submit": "Email me a link",
+      "switchText": "Prefer a password?",
+      "switchLink": "Sign in"
+    }
+  },
+  "account": {
+    "profile": {
+      "title": "Profile",
+      "text": "Your name and email appear on invoices and in comments.",
+      "labels": {
+        "picture": "Profile picture",
+        "change": "Change picture",
+        "name": "Full name",
+        "email": "Email",
+        "bio": "Short bio",
+        "prefs": "Notifications",
+        "updates": "Product updates",
+        "alerts": "Security alerts",
+        "save": "Save changes",
+        "cancel": "Cancel"
+      }
+    }
+  },
+  "dashboard": {
+    "metrics": {
+      "title": "Overview"
+    },
+    "chart": {
+      "title": "Orders this week",
+      "text": "Orders per day over the last seven days.",
+      "summary": "Bar chart of orders per day, Monday to Sunday",
+      "percent": "{0}%"
+    },
+    "activity": {
+      "title": "Recent activity",
+      "text": "What happened in your workspace."
+    },
+    "empty": {
+      "orders": {
+        "title": "No orders yet",
+        "text": "When a customer buys something, the order shows up here.",
+        "cta": "Add a product"
+      },
+      "results": {
+        "title": "Nothing found",
+        "text": "Try another word or clear the filters.",
+        "cta": "Clear filters"
+      },
+      "inbox": {
+        "title": "You are all caught up",
+        "text": "New messages will appear here.",
+        "cta": "Refresh"
+      },
+      "tour": {
+        "title": "Take a quick tour",
+        "text": "A few short stops show you where everything is.",
+        "cta": "Start the tour"
+      }
+    },
+    "shells": {
+      "title": "Orders",
+      "label": "App navigation",
+      "subTitle": "Orders",
+      "search": "Search orders",
+      "shortcut": "Ctrl K",
+      "expand": "Expand the sidebar",
+      "userName": "Mara Quinn",
+      "copyright": "2026 Northwind. All rights reserved.",
+      "footerLabel": "Help links"
+    }
+  },
+  "onboarding": {
+    "checklist": {
+      "title": "Get started",
+      "progress": "{0} of {1} done"
+    },
+    "stepper": {
+      "title": "Set up your workspace",
+      "stepLabel": "Step {0} of {1}",
+      "back": "Back",
+      "next": "Continue"
+    }
+  },
+  "support": {
+    "contact": {
+      "title": "Contact us",
+      "text": "Tell us what you need and a person will answer within one working day.",
+      "labels": {
+        "name": "Your name",
+        "email": "Email",
+        "subject": "Subject",
+        "message": "Message",
+        "consent": "I agree to be contacted about this request",
+        "submit": "Send message"
+      }
+    },
+    "channels": {
+      "title": "Other ways to reach us",
+      "open": "Open"
+    }
+  },
+  "vibe": {
+    "nav": {
+      "label": "Main navigation",
+      "search": "Search the site",
+      "shortcut": "Ctrl K"
+    },
+    "mega": {
+      "trigger": "Product",
+      "promoTitle": "What is new",
+      "promoText": "Read the notes of this month's release."
+    },
+    "sitemap": {
+      "label": "Footer links",
+      "tagline": "Build pages from blocks that follow your data.",
+      "copyright": "2026 Northwind. All rights reserved.",
+      "status": "All systems operational",
+      "signupTitle": "Get product news",
+      "signupLabel": "Email address",
+      "signupSubmit": "Subscribe"
+    },
+    "bento": {
+      "title": "Everything in one place"
+    },
+    "tabs": {
+      "title": "One product, many jobs",
+      "label": "Features"
+    },
+    "accordion": {
+      "title": "Questions about the features"
+    },
+    "sticky": {
+      "title": "Follow the story"
+    },
+    "wall": {
+      "title": "And much more"
+    },
+    "beforeafter": {
+      "title": "Before and after",
+      "labels": {
+        "before": "Before",
+        "after": "After"
+      }
+    },
+    "proof": {
+      "title": "Trusted by teams everywhere"
+    },
+    "videos": {
+      "title": "Hear it from customers",
+      "play": "Play video"
+    },
+    "compare": {
+      "title": "Compare the plans",
+      "labels": {
+        "caption": "Features by plan",
+        "feature": "Feature",
+        "a": "Free",
+        "b": "Pro",
+        "c": "Team",
+        "yes": "Included",
+        "no": "Not included"
+      }
+    },
+    "rivals": {
+      "title": "How we compare",
+      "labels": {
+        "caption": "Features compared with other tools",
+        "feature": "Feature",
+        "a": "Us",
+        "b": "Tool B",
+        "c": "Tool C",
+        "yes": "Included",
+        "no": "Not included"
+      }
+    },
+    "usage": {
+      "title": "Estimate your bill",
+      "text": "Move the slider to the number of requests you expect each month.",
+      "currency": "USD",
+      "slider": "Requests per month",
+      "unit": "requests",
+      "estimate": "Estimated monthly price",
+      "cta": "Start for free"
+    },
+    "credits": {
+      "title": "Buy credits",
+      "badges": {
+        "popular": "Popular",
+        "best": "Best value"
+      },
+      "buy": "Buy now"
+    },
+    "pagehead": {
+      "title": "A page title",
+      "text": "One sentence that says what this page is for.",
+      "cta": "Take the next step"
+    },
+    "authpage": {
+      "visualTitle": "Ship pages faster",
+      "visualText": "Blocks, data and checks in one place, so a page is ready when the idea is."
+    },
+    "wizard": {
+      "title": "Create your account",
+      "labels": {
+        "stepOf": "Step {0} of {1}",
+        "steps": "Sign-up steps",
+        "back": "Back",
+        "next": "Continue",
+        "finish": "Finish"
+      }
+    },
+    "shell": {
+      "title": "Overview"
+    },
+    "overview": {
+      "title": "This week at a glance"
+    },
+    "kanban": {
+      "title": "Launch board",
+      "count": "{0} cards"
+    },
+    "sidebar": {
+      "label": "App navigation",
+      "userName": "Mara Quinn",
+      "userEmail": "mara@example.com"
+    },
+    "bottom": {
+      "label": "App tabs"
+    },
+    "skeleton": {
+      "title": "Loading the page",
+      "label": "Loading"
+    },
+    "tour": {
+      "title": "Add your first block",
+      "text": "Pick a block from the list and it appears on the page.",
+      "target": "Add block",
+      "position": "Step 2 of 4",
+      "skip": "Skip the tour",
+      "next": "Next"
+    },
+    "modal": {
+      "title": "Watch the walkthrough",
+      "text": "A three-minute tour of the editor.",
+      "close": "Close the video",
+      "play": "Play the video",
+      "chapters": "Chapters"
+    },
+    "error": {
+      "title": "This page could not be found",
+      "text": "The link may be old, or the page may have moved.",
+      "status": "404",
+      "cta": "Back to the home page",
+      "secondary": "Contact support"
+    },
+    "article": {
+      "title": "Why pages should start from data",
+      "toc": "On this page"
+    },
+    "billing": {
+      "label": "Billing period",
+      "monthly": "Monthly",
+      "annual": "Annual",
+      "save": "Save 2 months"
+    },
+    "faq": {
+      "tabs": "Question topics",
+      "search": "Search the questions",
+      "empty": "No questions to show"
+    },
+    "cta": {
+      "quote": "We shipped our site in a week.",
+      "quoteBy": "Mara Quinn, Northwind"
+    },
+    "code": {
+      "title": "Terminal",
+      "prompt": "$"
+    },
+    "posts": {
+      "topics": "Topics"
+    },
+    "hero": {
+      "promptLabel": "Describe your page",
+      "attach": "brief.md",
+      "model": "Model",
+      "badgeMark": "NEW",
+      "badgeLabel": "Version 2.0 is out",
+      "title": "Build your next page"
+    },
+    "templates": {
+      "title": "Browse templates",
+      "browse": "Browse All",
+      "filters": "Template topics",
+      "views": "Views",
+      "likes": "Likes"
+    }
+  },
+  "pages": {
+    "marketingLanding": {
+      "home": {
+        "nav": "Home",
+        "title": "Ship pages that stay simple",
+        "text": "One toolkit for the page, the proof and the call to action.",
+        "cta": "See the launch page"
+      },
+      "launch": {
+        "nav": "Launch",
+        "title": "Be first in line",
+        "text": "Leave an address and get the first invitation.",
+        "cta": "Read the developer page"
+      },
+      "developers": {
+        "nav": "Developers",
+        "title": "Built for developers",
+        "text": "Install, run and read the output in one terminal.",
+        "cta": "Meet the studio"
+      },
+      "studio": {
+        "nav": "Studio",
+        "title": "Big words, small page",
+        "text": "Type first, picture second, one button.",
+        "cta": "See the events page"
+      },
+      "events": {
+        "nav": "Events",
+        "title": "Join us on stage",
+        "text": "Talks, workshops and a room full of builders.",
+        "cta": "Back to the start"
+      },
+      "company": {
+        "nav": "Company",
+        "title": "About us",
+        "text": "How we work, where we came from and who we are.",
+        "cta": "See the work"
+      },
+      "work": {
+        "nav": "Work"
+      },
+      "teams": {
+        "nav": "Teams"
+      }
+    },
+    "marketingProduct": {
+      "home": {
+        "nav": "Home",
+        "title": "One product, many jobs",
+        "text": "See what it does and how the parts fit together.",
+        "cta": "Take the tour"
+      },
+      "tour": {
+        "nav": "Tour",
+        "title": "Take the tour",
+        "text": "Four stops: the list, the steps, the film and the menu.",
+        "cta": "See the capabilities"
+      },
+      "capabilities": {
+        "nav": "Capabilities",
+        "title": "Capabilities",
+        "text": "Every feature in a shape that suits it.",
+        "cta": "See the navigation"
+      },
+      "navigation": {
+        "nav": "Navigation",
+        "title": "Navigation patterns",
+        "text": "Bars, menus and footers in each shape.",
+        "cta": "Back to the start"
+      }
+    },
+    "marketingPricing": {
+      "home": {
+        "nav": "Home",
+        "title": "Plans for every team",
+        "text": "Pick a plan, change it when the team grows.",
+        "cta": "Compare the plans"
+      },
+      "plans": {
+        "nav": "Plans",
+        "title": "Free or pro",
+        "text": "Start free; the pro plan adds the rest.",
+        "cta": "See the usage page"
+      },
+      "usage": {
+        "nav": "Usage",
+        "title": "Pay for what you use",
+        "text": "Slide to your volume or buy a pack of credits.",
+        "cta": "See how we compare"
+      },
+      "compare": {
+        "nav": "Compare",
+        "title": "Why teams switch",
+        "text": "Us against the others, line by line.",
+        "cta": "Back to the plans"
+      }
+    },
+    "commerceShop": {
+      "home": {
+        "nav": "Home",
+        "title": "Good things for your desk",
+        "text": "New arrivals, picked by hand and shipped in two days.",
+        "cta": "Browse the catalog"
+      },
+      "catalog": {
+        "nav": "Catalog"
+      },
+      "browse": {
+        "nav": "Browse",
+        "title": "Browse by mood",
+        "text": "Three ways to look at the same shelf.",
+        "cta": "Open a product"
+      },
+      "offers": {
+        "nav": "Offers"
+      },
+      "product": {
+        "nav": "Product"
+      },
+      "cart": {
+        "nav": "Cart",
+        "title": "Your cart",
+        "text": "Check the lines and the total, then pay.",
+        "cta": "Go to checkout"
+      },
+      "checkout": {
+        "nav": "Checkout",
+        "title": "Place your order",
+        "text": "Four short steps and the order is on its way.",
+        "cta": "See the delivery options"
+      },
+      "delivery": {
+        "nav": "Delivery",
+        "title": "Delivery and pickup",
+        "text": "Zones, windows and the stores near you.",
+        "cta": "See your orders"
+      },
+      "orders": {
+        "nav": "Orders",
+        "title": "Your orders",
+        "text": "Every order, with its status.",
+        "cta": "Back to the shop"
+      }
+    },
+    "promoCampaign": {
+      "home": {
+        "nav": "Home",
+        "title": "Spring campaign",
+        "text": "A week of offers with a sign-up for early access.",
+        "cta": "See the launch"
+      },
+      "launch": {
+        "nav": "Launch",
+        "title": "The launch is live",
+        "text": "Everything new in one place.",
+        "cta": "See the offer"
+      },
+      "offer": {
+        "nav": "Offer",
+        "title": "Limited offer",
+        "text": "Three banners, one deadline.",
+        "cta": "See the notices"
+      },
+      "notices": {
+        "nav": "Notices",
+        "title": "Notices",
+        "text": "The bottom bar, the dismissible bar and the cookie choices.",
+        "cta": "Back to the start"
+      }
+    },
+    "contentBlog": {
+      "home": {
+        "nav": "Home",
+        "title": "The journal",
+        "text": "Notes on design, engineering and the work in between.",
+        "cta": "Read the articles"
+      },
+      "articles": {
+        "nav": "Articles",
+        "title": "All articles",
+        "text": "Filter by topic.",
+        "cta": "Open the archive"
+      },
+      "archive": {
+        "nav": "Archive",
+        "title": "Archive",
+        "text": "Older posts as a list, a digest and plain titles.",
+        "cta": "Read a post"
+      },
+      "post": {
+        "nav": "Post"
+      },
+      "story": {
+        "nav": "Story"
+      },
+      "essay": {
+        "nav": "Essay"
+      },
+      "plain": {
+        "nav": "Plain"
+      }
+    },
+    "accountPortal": {
+      "home": {
+        "nav": "Home",
+        "title": "Welcome back",
+        "text": "Sign in to pick up where you left off.",
+        "cta": "Sign in"
+      },
+      "start": {
+        "nav": "Start",
+        "title": "Good to see you",
+        "text": "Your workspace is one step away.",
+        "cta": "Sign in"
+      },
+      "signup": {
+        "nav": "Sign up",
+        "title": "Create your account",
+        "text": "Two minutes and you are in.",
+        "cta": "Create account"
+      },
+      "welcome": {
+        "nav": "Welcome",
+        "title": "Choose how to sign in",
+        "text": "Use an account you already have.",
+        "cta": "Continue"
+      },
+      "reset": {
+        "nav": "Reset",
+        "title": "Reset your password",
+        "text": "We send a link to your address.",
+        "cta": "Send the link"
+      },
+      "magic": {
+        "nav": "Magic link",
+        "title": "Sign in with a link",
+        "text": "No password, only your inbox.",
+        "cta": "Send the link"
+      },
+      "minimal": {
+        "nav": "Minimal",
+        "title": "Sign in",
+        "text": "Enter your address and password.",
+        "cta": "Sign in"
+      },
+      "options": {
+        "nav": "Options",
+        "title": "More ways to sign in",
+        "text": "Use a provider or your address.",
+        "cta": "Sign in"
+      },
+      "join": {
+        "nav": "Join",
+        "title": "Join in three steps",
+        "text": "Tell us about you, your team and your plan.",
+        "cta": "Back to sign in"
+      },
+      "cards": {
+        "nav": "Cards",
+        "title": "Sign-in cards",
+        "text": "The card on its own, in three modes.",
+        "cta": "Back to sign in"
+      },
+      "profile": {
+        "nav": "Profile",
+        "title": "Your profile",
+        "text": "Name, address and the way we reach you.",
+        "cta": "Back to sign in"
+      }
+    },
+    "dashboardConsole": {
+      "home": {
+        "nav": "Home",
+        "title": "Overview",
+        "text": "Counters, a chart and what happened last.",
+        "cta": "Open the board"
+      },
+      "board": {
+        "nav": "Board",
+        "title": "Work board",
+        "text": "Cards in lanes; the port adds moving.",
+        "cta": "Open the workspace"
+      },
+      "workspace": {
+        "nav": "Workspace",
+        "title": "Workspace shells",
+        "text": "The frame of a signed-in app in three shapes.",
+        "cta": "See the layouts"
+      },
+      "shells": {
+        "nav": "Shells",
+        "title": "Dashboard shells",
+        "text": "Top bars, sidebars and footers around empty cards.",
+        "cta": "See the layout parts"
+      },
+      "layouts": {
+        "nav": "Layouts",
+        "title": "Layout parts",
+        "text": "The sidebar, the bottom bar and the small widgets.",
+        "cta": "See the states"
+      },
+      "states": {
+        "nav": "States",
+        "title": "Empty and loading",
+        "text": "What the app shows before there is anything to show.",
+        "cta": "Back to the overview"
+      }
+    },
+    "onboardingFlow": {
+      "home": {
+        "nav": "Home",
+        "title": "Get started",
+        "text": "Three steps to a working account.",
+        "cta": "Watch the welcome"
+      },
+      "welcome": {
+        "nav": "Welcome",
+        "title": "Welcome aboard",
+        "text": "A short film, then the checklist.",
+        "cta": "Set up"
+      },
+      "setup": {
+        "nav": "Setup",
+        "title": "Set up your workspace",
+        "text": "Tick the tasks as you go.",
+        "cta": "Take the tour"
+      },
+      "tour": {
+        "nav": "Tour",
+        "title": "Product tour",
+        "text": "Callouts that point at the thing they explain.",
+        "cta": "Back to the start"
+      }
+    },
+    "supportCenter": {
+      "home": {
+        "nav": "Home",
+        "title": "How can we help?",
+        "text": "Pick a channel, read the answers or write to us.",
+        "cta": "Open the FAQ"
+      },
+      "faq": {
+        "nav": "FAQ",
+        "title": "Questions and answers",
+        "text": "Search, or ask the chat.",
+        "cta": "Contact us"
+      },
+      "contact": {
+        "nav": "Contact",
+        "title": "Contact us",
+        "text": "We answer within one working day.",
+        "cta": "Back to the help center"
+      },
+      "missing": {
+        "nav": "Missing",
+        "title": "This page is gone",
+        "text": "The address is wrong or the page moved.",
+        "cta": "Back to the help center"
+      },
+      "moved": {
+        "nav": "Moved",
+        "title": "This page moved",
+        "text": "Try the search, or go back.",
+        "cta": "Back to the help center"
+      }
+    }
+  },
+  "catalog": {
+    "title": "Catalog",
+    "intro": "The blocks of the kit by section and category, with all their variants, and whole pages built from them. Pick a category to see its blocks.",
+    "back": "Back to the catalog",
+    "backPages": "All pages",
+    "navLabel": "Catalog",
+    "categoriesTab": "Categories",
+    "count": "Blocks: {0}, variants: {1}",
+    "pagesTitle": "Pages",
+    "pagesText": "Whole pages composed of catalog blocks, top to bottom, on the same data.",
+    "pageCount": "Blocks: {0}",
+    "sections": {
+      "marketing": {
+        "title": "Marketing",
+        "text": "Landing page sections: navigation, hero, features, proof, pricing, FAQ, calls to action, footers, team and company pages."
+      },
+      "content": {
+        "title": "Content",
+        "text": "A blog and documents: post lists, post headers and long reading pages."
+      },
+      "promo": {
+        "title": "Promo",
+        "text": "Announcements, the cookie notice and newsletter sign-ups."
+      },
+      "support": {
+        "title": "Support",
+        "text": "Contact forms, the ways to reach a person and error pages."
+      },
+      "commerce": {
+        "title": "Commerce",
+        "text": "A whole store: storefront, categories, products, product page, cart, checkout and order history."
+      },
+      "app": {
+        "title": "App and dashboard",
+        "text": "The inside of a product: shells and navigation, dashboard widgets, states, sign-in, settings and onboarding."
+      }
+    },
+    "categories": {
+      "marketingNavigation": "Navigation",
+      "marketingHero": "Hero",
+      "marketingHeroSplit": "Split heroes",
+      "marketingPageHead": "Page head",
+      "marketingPageTrail": "Page headings with breadcrumbs",
+      "marketingFeatures": "Feature grids",
+      "marketingFeaturesSplit": "Features beside a picture",
+      "marketingFeatureCards": "Feature cards with a picture",
+      "marketingMediaList": "Lists beside a picture",
+      "marketingShowcases": "Feature showcases",
+      "marketingHowItWorks": "How it works",
+      "marketingProof": "Logos and proof",
+      "marketingStats": "Stats",
+      "marketingTestimonials": "Testimonials",
+      "marketingTestimonialsSplit": "Split testimonials",
+      "marketingPricing": "Pricing plans",
+      "marketingPricingTools": "Pricing tools",
+      "marketingFaq": "FAQ",
+      "marketingCta": "Call to action",
+      "marketingCtaProof": "Calls to action with proof",
+      "marketingTeam": "Team",
+      "marketingAbout": "About",
+      "marketingPortfolio": "Portfolio",
+      "marketingCareers": "Careers",
+      "marketingGallery": "Galleries",
+      "marketingFooter": "Footer",
+      "marketingFooterSplit": "Footers with more",
+      "contentBlog": "Blog",
+      "contentPostShowcase": "Post showcase",
+      "contentPostHeader": "Post header",
+      "contentPostHeaderSplit": "Post headers with more",
+      "contentArticle": "Article and legal",
+      "contentTimeline": "Timeline",
+      "contentStoryTabs": "Story in steps",
+      "promoBanners": "Banners",
+      "promoNewsletter": "Newsletter",
+      "supportContact": "Contact",
+      "supportStates": "Error pages",
+      "commerceStorefront": "Storefront",
+      "commerceCategories": "Categories and filters",
+      "commerceProducts": "Product grids and rails",
+      "commerceProduct": "Product page",
+      "commerceCart": "Cart",
+      "commerceCheckout": "Checkout",
+      "commerceDelivery": "Delivery and pickup",
+      "commerceOrders": "Orders",
+      "appShell": "Shells and navigation",
+      "appDashboardShells": "Dashboard shells",
+      "appWidgets": "Dashboard widgets",
+      "appBoards": "Dashboard boards",
+      "appStates": "Empty and loading states",
+      "appAuth": "Sign in and sign up",
+      "appAuthPages": "Sign-in pages",
+      "appSettings": "Settings",
+      "appOnboarding": "Onboarding",
+      "appGuidance": "Guidance"
+    },
+    "pages": {
+      "saasLanding": {
+        "title": "SaaS landing",
+        "text": "Split hero, logos, features, a sticky list, figures, quotes, plans, questions and a closing call to action."
+      },
+      "company": {
+        "title": "Company",
+        "text": "The page head, the culture, the story, the team, a mosaic of photos, the open roles and a call to action."
+      },
+      "portfolio": {
+        "title": "Portfolio",
+        "text": "A personal about section, selected projects, a masonry of photos, quotes and a call to action."
+      },
+      "storeHome": {
+        "title": "Store home",
+        "text": "An offer bar, a hero with an offer card, category tiles, bestsellers, a rail of deals, the store promises and a closing offer."
+      },
+      "storeHome2": {
+        "title": "Store home, picture hero",
+        "text": "Text over a faint picture, a strip of promises, the products, the delivery facts and the stores."
+      },
+      "storeCatalog": {
+        "title": "Catalog",
+        "text": "The page head, chips under a toolbar and a compact grid of products."
+      },
+      "productDetail": {
+        "title": "Product page",
+        "text": "The gallery and the buy box, the details and specs, reviews and a rail of related products."
+      },
+      "cart": {
+        "title": "Cart",
+        "text": "The cart lines beside the summary with a promo code, then a rail of products."
+      },
+      "checkout": {
+        "title": "Checkout",
+        "text": "The page head and the checkout steps beside a sticky order summary."
+      },
+      "shellClassic": {
+        "title": "Shell: top bar and sidebar",
+        "text": "A top bar with search across the app over a wide sidebar."
+      },
+      "shellInset": {
+        "title": "Shell: top bar over the content",
+        "text": "A wide sidebar beside a column with its own top bar and footer."
+      },
+      "shellRail": {
+        "title": "Shell: icon rail",
+        "text": "A top bar without search over a rail of icons and a list."
+      },
+      "shellRailFooter": {
+        "title": "Shell: rail with a footer",
+        "text": "An icon rail, a top bar over the content and a footer across."
+      },
+      "shellCollapsed": {
+        "title": "Shell: collapsed sidebar",
+        "text": "The static collapsed state of a sidebar with its expand button."
+      },
+      "shellTwoLevel": {
+        "title": "Shell: two-level sidebar",
+        "text": "A rail beside the links of the current section."
+      },
+      "shellTwoLevelFull": {
+        "title": "Shell: two levels under a top bar",
+        "text": "A top bar across, a two-level sidebar and a footer across."
+      },
+      "shellEnd": {
+        "title": "Shell: sidebar at the end",
+        "text": "A wide sidebar on the end side and a footer across."
+      },
+      "shellRailEnd": {
+        "title": "Shell: rail at the end",
+        "text": "An icon rail on the end side with a footer under the content."
+      },
+      "shellTopOnly": {
+        "title": "Shell: top bar only",
+        "text": "The links in the top bar and no sidebar."
+      },
+      "shellSideOnly": {
+        "title": "Shell: sidebar only",
+        "text": "A wide sidebar with the brand and no top bar."
+      },
+      "shellCollapsedEnd": {
+        "title": "Shell: collapsed at the end",
+        "text": "A collapsed sidebar on the end side, no top bar, a footer across."
+      }
+    }
+  },
+  "company": {
+    "team": {
+      "title": "The people behind the product",
+      "lead": "A small team in six cities, working in the open."
+    },
+    "depts": {
+      "leadership": "Leadership",
+      "engineering": "Engineering",
+      "design": "Design",
+      "product": "Product",
+      "support": "Support"
+    },
+    "photos": {
+      "title": "From the road",
+      "lead": "Places we worked from this year.",
+      "previous": "Previous photo",
+      "next": "Next photo",
+      "counter": "{0} of {1}"
+    },
+    "projects": {
+      "title": "Selected work",
+      "lead": "Products, brands and sites we shipped with our clients.",
+      "featured": "Featured",
+      "view": "Live site",
+      "case": "Read the case"
+    },
+    "jobs": {
+      "title": "Open roles",
+      "lead": "Remote-friendly roles across three teams.",
+      "apply": "Apply",
+      "caption": "Open roles",
+      "role": "Role",
+      "team": "Team",
+      "location": "Location",
+      "type": "Type",
+      "salary": "Salary",
+      "count": "{0} open roles"
+    },
+    "aboutMe": {
+      "title": "Hi, I design calm software",
+      "lead": "Nine years of product design for teams that ship every week. I like systems, plain words and short feedback loops.",
+      "badge": "Available for projects",
+      "level": "{0}%",
+      "cta": "See my work",
+      "more": "Get in touch"
+    },
+    "about": {
+      "title": "How we work",
+      "lead": "A few numbers and the three rules we hire and plan by."
+    },
+    "timeline": {
+      "title": "Our story so far",
+      "lead": "From a list of blocks to a kit in eight runtimes."
+    },
+    "pages": {
+      "companyTitle": "About the company",
+      "companyLead": "How we work, where we came from and who builds it."
+    },
+    "storyTabs": {
+      "title": "Five years in four steps",
+      "lead": "Pick a year to see what changed for the people who use the kit.",
+      "badge": "Our story",
+      "labels": {
+        "step": "Step {0} of {1}",
+        "previous": "Previous step",
+        "next": "Next step"
+      }
+    }
+  },
+  "skins": {
+    "title": "Skins",
+    "intro": "Change the look of the whole preview: pick a skin, then a font or a corner radius on top of it. The choice applies to every screen and stays after a reload.",
+    "navLabel": "Skins",
+    "back": "Back to the skins",
+    "sample": {
+      "card": "Card title",
+      "text": "Muted text on a card",
+      "button": "Button"
+    },
+    "skins": {
+      "title": "Skins",
+      "text": "The default theme and 14 presets from tweakcn. Each tile is drawn in its own skin.",
+      "reset": "Back to the build skin",
+      "names": {
+        "default": "Default",
+        "modernMinimal": "Modern Minimal",
+        "violetBloom": "Violet Bloom",
+        "t3Chat": "T3 Chat",
+        "bubblegum": "Bubblegum",
+        "doom64": "Doom 64",
+        "amberMinimal": "Amber Minimal",
+        "supabase": "Supabase",
+        "kodamaGrove": "Kodama Grove",
+        "perpetuity": "Perpetuity",
+        "cosmicNight": "Cosmic Night",
+        "claude": "Claude",
+        "mochaMousse": "Mocha Mousse",
+        "neoBrutalism": "Neo Brutalism",
+        "notebook": "Notebook"
+      }
+    },
+    "fonts": {
+      "title": "Fonts",
+      "text": "Google fonts with Latin and Cyrillic letters. A font replaces the font of the skin; click it again to go back.",
+      "reset": "Back to the skin font",
+      "specimen": "Aa \u0411\u0431 \u042f\u044f",
+      "pangram": "The quick brown fox jumps over the lazy dog",
+      "names": {
+        "inter": "Inter",
+        "roboto": "Roboto",
+        "manrope": "Manrope",
+        "montserrat": "Montserrat",
+        "rubik": "Rubik",
+        "nunito": "Nunito",
+        "ibmPlexSans": "IBM Plex Sans",
+        "golosText": "Golos Text",
+        "onest": "Onest",
+        "openSans": "Open Sans"
+      }
+    },
+    "radius": {
+      "title": "Corner radius",
+      "text": "A radius replaces the radius of the skin on every plain rounded corner; click it again to go back.",
+      "reset": "Back to the skin radius",
+      "names": {
+        "r0": "0",
+        "r4": "4 px",
+        "r8": "8 px",
+        "r12": "12 px",
+        "r16": "16 px"
+      }
+    }
+  },
+  "discovery": {
+    "title": "Discovery"
+  },
+  "empty": {
+    "logos": "No logos to show yet",
+    "features": "No features to show yet",
+    "steps": "No steps to show yet",
+    "quotes": "No quotes to show yet",
+    "members": "No people to show yet",
+    "perks": "No promises to show yet",
+    "metrics": "No figures to show yet",
+    "series": "No data to chart yet",
+    "activity": "No activity yet",
+    "tasks": "No tasks yet",
+    "cart": "Your cart is empty",
+    "summary": "Nothing to total yet",
+    "orders": "No orders yet",
+    "photos": "No photos yet",
+    "projects": "No projects yet",
+    "milestones": "No milestones yet",
+    "tiles": "No features to show yet",
+    "points": "No points to compare yet",
+    "channels": "No ways to reach us yet",
+    "packs": "No packs on sale yet",
+    "zones": "No delivery zones yet",
+    "stores": "No stores yet",
+    "sections": "Nothing to read yet",
+    "lanes": "No lanes yet",
+    "rows": "Nothing to compare yet",
+    "days": "No delivery windows yet",
+    "posts": "No posts yet",
+    "jobs": "No open jobs right now",
+    "templates": "No templates yet"
+  }
+}
diff --git a/xgen/docs/audit-2026-10-05.md b/xgen/docs/audit-2026-10-05.md
new file mode 100644
index 0000000..fa282e0
--- /dev/null
+++ b/xgen/docs/audit-2026-10-05.md
@@ -0,0 +1,79 @@
+# Audit of xgen, 2026-10-05
+
+Scope: the generation layer (`xgen/*`), the specs, the fixtures, the dictionary, the generated packages and the 26 generated apps.
+Every class of problem found has a rule in `xgen check`, so it cannot come back unnoticed. The check has 18 groups; this audit added `structure`, `hardcode`, `dead`, `duplicates`, `versions`, `tests`, `registry`, `themes`.
+
+## Numbers
+
+| What | Value |
+| --- | --- |
+| Blocks / variants | 61 / 325 |
+| Organisms, parts, patterns (specs) | 118 |
+| Generated apps | 26 (gallery and demo apps, plus 10 theme apps in Svelte and React) |
+| vibeui layouts covered | 92 of 92 (`docs/vibeui-coverage.md`) |
+| Blocks used by a theme page | 61 of 61; variants used by theme pages: 183 of 325 (the rest are shown in the gallery) |
+| `xgen build` | 0.9 s |
+| `xgen check` (18 groups) | 1.0 s |
+| `bun run test` | 56 tests in 12 files, 4.8 s |
+| Build of the 20 theme apps with vite | about 28 s; all demos about 37 s |
+| E2E of all apps on both runtimes with the pair DOM test | about 140 s; pair test: 126 states |
+| Steps per theme app | from 142 to 380 |
+
+Headroom: the build is linear in the number of specs, there is no cache and none is needed. At 3x (about 180 blocks, 1000 variants) the build is about 3 s and the check about 3 s. A test fails if `planBuild` takes over 10 s, so growth is noticed. Vite build and e2e grow with the number of apps, not with the number of specs; this is the part to cache first if apps triple (build only apps whose files changed in git).
+
+Determinism: target files are sorted by path (`byPath`), two plans are equal (test), `xgen build` twice gives no diff, `drift` compares every generated file.
+
+## Found and fixed
+
+| # | Problem | Fix | Guard |
+| --- | --- | --- | --- |
+| 1 | The xgen code was never type-checked: 15 type errors, among them a real bug (`[object Object]` in the class of the tour callout) and an unused `autocomplete` parameter of the input field | all fixed; `xgen/tsconfig.json`, script `typecheck:xgen`, `@types/bun` | `bun run typecheck:xgen` |
+| 2 | Layout grids with fixed column counts overflowed on a phone (hidden in the gallery by `overflow-hidden`) | grid tokens `2-3`, `2-4`, `3-6`, helper `fluidCols`, wrap in the mega menu | theme e2e: no sideways scroll at 390 px |
+| 3 | Gallery sections had no accessible names; sr-only text caused overflow; test id `back` collided | named sections, sr-only fixed, ids made unique | gallery and theme e2e |
+| 4 | `spec` imported from `screens` (reverse dependency) | the four screen tools moved to `screens/tools` | `structure`: layer order |
+| 5 | Import cycle in `check` (index and blocks) | `check/src/result.ts` | `structure`: no import cycles (Tarjan) |
+| 6 | Files over 350 lines: the React emitter (550), `e2e.ts` (541), the readme template | split into `dom.ts`, `jsx.ts`, `e2e/*`, `generator/src/readme.ts` | `structure`: 350 lines per file |
+| 7 | Lines of 600+ characters in tables | broken | `structure`: 600 characters per line |
+| 8 | Arbitrary sizes in specs: `rounded-[20px]`, `max-w-[85%]`, `text-[10px]` | scale tokens | `hardcode` (allow-list with a reason for each exception) |
+| 9 | File order of the plan depended on the file system | sorted | test `plan.test.ts` |
+| 10 | Packages `schema`, `generator`, `cli`, both runtimes had no tests | 5 test files, 20 new tests | `tests` |
+| 11 | The e2e index held a hard-coded table of scenarios and viewport sizes | `scenarioKind` and `VIEWPORT` in one place | the e2e itself |
+| 12 | Error messages of the check had no file path | every problem names the file | `check.test.ts` |
+| 13 | No version or migration mechanism for specs | `specVersion`, `versionProblem`, `docs/migrations.md` | `versions` |
+| 14 | A wrong `active` id in samples of feature tabs and sticky blocks (`feature-ready`) | ids taken from the data | gallery e2e |
+| 15 | Dependencies between xgen packages were not declared or not used (`cli` declared `xgen-spec` and did not use it; `generator` used `schema` and did not declare it) | declarations fixed | `structure`: declared and used |
+| 16 | The layout of the xgen folder (`specs/…`, `fixtures`, dictionary, icons) was spelled in 12 places; one-time import tools had paths of this machine as defaults | `schema/src/paths.ts` (`xgenPaths`); tools read the folder from the environment (`CODEGEN_DIR`, `RECIPES_DIR`) and stop with a clear message | `structure`: no `join(..., "specs")` and no absolute path in sources |
+| 17 | Dead data: fixtures nobody reads, organisms nobody draws, dictionary keys nothing reaches, stale `blocks.*` keys, status words without a fixture, blocks tested by neither facts nor e2e | none left after the audit | `dead` |
+| 18 | Duplicates: same view in two organisms, same fixture, a record type declared twice (it was 41 type errors earlier) | none left | `duplicates` |
+| 19 | The core knew details of the apps | passed in as data | `structure`: the core names no app |
+
+## Checked, nothing to fix
+
+- Svelte and React divergence: pair DOM test over 126 states (gallery and themes), no difference.
+- A11y: roles and ARIA of parts (`a11y` group, `KNOWN_ARIA`), one h1 per theme page (`requireH1`), skip link and focus to `main` (theme e2e), every id reference resolves, labels of tables, inputs and sortable headers.
+- Dictionary: no Cyrillic in any source, doc, spec or key; every text of a view is a key.
+- Drift: all generated files equal what the specs give; no manual edit in `apps/*` except `xgen.app.json`.
+
+## Left, with reasons
+
+1. Palette colors in `pill`, `rating`, `timeline` and text sizes in three canary parts (logo-sidebar, editor-tab, dropdown-item): they copy canary one-to-one; each is in the allow-list with its reason. Change them together with the canary recipes.
+2. Lines of 450 to 600 characters in the authoring tables: under the limit; breaking them would make the tables unreadable.
+3. ~~Links of the navigation bar~~ Done: the routes table of `xgen.app.json` drives the menu; the e2e clicks every link.
+4. The site screen reads sources that block-level `data` could cover; harmless, not cleaned up.
+5. ~~The dictionary check is prefix-based~~ Done: the `dictionary` group is leaf-exact; dynamic indexes (`status`, badges) are named.
+6. No build cache for apps (see headroom above).
+7. 142 of 325 variants appear only in the gallery, not in a theme page: this is by design (a page shows a good choice, the gallery shows all).
+8. `bun run typecheck` of all apps takes about 2 min 15 s; a faster check would need project references.
+
+## Checks run
+
+`bun run build`, `bun run check` (18 of 18 ok), `bun run test` (56 pass), `bun run typecheck:xgen` (0 errors), `bun run typecheck` (0 errors), `bun run build:demos`, `bun run e2e` (all apps on both runtimes, pair test): ok.
+Screenshots (not in git): `shots/<app>-<page>-<light|dark>.png`, for example `shots/account-portal-react-home-light.png`; gallery: `shots/blocks-<runtime>-<block>-<light|dark>.png`.
+
+## Typecheck of the apps (2026-10-05 follow-up)
+
+`bun run typecheck` takes about 2 min 15 s. The time is the sum of independent `tsc`/`svelte-check` runs, one per package and per app (the script chains them with `&&`). The packages share no project references, so each run re-parses `@ui8kit/svelte-ui` / `@ui8kit/react-ui`. Speeding it up means either:
+1. TypeScript project references (`composite: true`, one `tsc -b` at the root), or
+2. Running the independent checks in parallel (a tool such as `bun run --parallel`).
+
+`bun run typecheck` now runs the package and app checks in parallel (`bun run --filter … --parallel check`) after `typecheck:xgen`; wall time drops from about 2 min 15 s to the slowest single check (around 30–60 s). The generation layer itself is checked in under 2 s by `typecheck:xgen`. Leave the palette colors and canary text sizes alone (see "Left, with reasons" above).
diff --git a/xgen/docs/block-data.md b/xgen/docs/block-data.md
new file mode 100644
index 0000000..4440ce4
--- /dev/null
+++ b/xgen/docs/block-data.md
@@ -0,0 +1,291 @@
+# Block data vs the Codex v0.4 contract (inventory; step 2: the pilot blocks fixed; step 3: lookups, terms, author_id; step 4: five more blocks; step 5: blocks.json generated; step 6: menus; steps 7-9: kit blocks in groups)
+
+> Working log ported from the codegen-x/ui8kit monorepo. The magazine templates, taste screens and panorama it mentions
+> are surfaces of that monorepo, not of ui8kit/codegen; the kit blocks and screens are the same here.
+
+Goal: every block, screen, template and data structure of the kit reads Codex v0.4 entries (`@ui8kit/contract` ^0.2.0;
+manifest `xgen/schema/codex/manifest.json`, 62 kinds) by the rules: money = integer minor units + `currency`; dates RFC 3339,
+formatted by the UI per locale; text = plain string + entry `locale`; links built from `slug` / `parent_id` (no `href` in data);
+media via `featured_media_id` (kind `media`); UI labels from the dictionary of the locale, never from entries; an empty state in every block.
+
+**The contract wins.** On any conflict the block (or its prop) changes; where data is missing it goes into a kind/metadata field
+declared in `manifest.json` (an extension point), never into the core schema. Fix column: `block` (preferred) or `manifest` (kind/field).
+
+Machine-readable twin: `xgen/schema/codex/blocks.json` (schema `blocks.schema.json`, test `xgen/schema/test/blocks.test.ts`),
+**generated** by `bun run codex:blocks` (`xgen/schema/src/codex-blocks.ts`); `xgen check` (group `codex`) fails when it is behind
+the sources. See section 6.
+Central field maps: `xgen/runtimes/core/assets/app/fields.ts` -> generated `@ui8kit/app-shared/runtime/fields` (`CODEX_FIELDS`).
+Lookups: generated `@ui8kit/app-shared/runtime/codex` (`CODEX`: media, users, taxonomy terms) is the third argument of every
+`fromCodex` in the hosts and the magazine; `routes` are added only for kinds an app has a page for (today none: no link).
+
+## 1. Surfaces
+
+| Surface | Where | Data source | Kinds | Status |
+|---|---|---|---|---|
+| kit blocks (92) | `xgen/specs/blocks/*.json` (authoring `xgen/screens/src/authoring/blocks`, gallery) -> 8 runtimes | `data[].fields` per spec (product, post, plan: `CODEX_FIELDS` in `gallery/blocks-data.ts`), fixtures | 50+ kinds, see blocks.json | 92/92 done (steps 7-20) |
+| kit organisms/components (179) | `xgen/specs/organisms`, `authoring/components` | props from the blocks above | (via blocks) | todo (listed in step 2) |
+| presets | `xgen/screens/src/authoring/presets`, `xgen/specs/presets`, `packages/taste-data/src/preset.ts`, magazine `#/presets` | style only (class strings, skin/font/radius keys) | none | outside the data contract, checked (step 25, see 7e) |
+| xgen screens (15) | `xgen/specs/screens/*.json` -> `apps/host-*/xgen/screens/*` | `{ "$": "ui.*" }` dictionary refs + block data | via blocks | 15/15 done (step 20) |
+| magazine templates (10 + header/footer) | `apps/magazine/src/templates/*.svelte`, Templates tab `#/style/<key>/templates` | `data.ts` (fromCodex over `@ui8kit/app-shared/data/*`) + the copy deck `c` | 25 collections | 10/10 + 2/2 done (step 16-17) |
+| taste screens (146) | `packages/taste-screens/src/screens` (style detail preview; panorama excluded) | `Deck` from `@ui8kit/taste-data/content/copy.json`, generated from the deck entries | deck, deck_* | 146/146 done (steps 21-24) |
+| fixtures (317 entries, 2 taxonomies / 10 terms) | `xgen/fixtures/*.json`, `xgen/fixtures/taxonomies/*.json` -> `packages/shared/app/src/data` | v0.4 entries, taxonomy bundles | 62 (`media`, `user`) | valid (0 errors; term refs checked) |
+| taste-data content | `copy.json` (generated, step 21), `reference-*.json` | deck entries / own shapes | deck_* | copy.json done; reference-* excluded (step 26) |
+| panorama, illustrations | `packages/panorama` | - | - | excluded |
+| reference renderer (research) | `apps/magazine/src/reference`, `packages/taste-data/content/reference-copy.v0.1.json`, `reference-catalog.v0.1.json`, `packages/taste-data/scripts/reference-*` | own shapes | - | excluded (user decision, step 26) |
+
+## 2. The 15 magazine blocks
+
+| Block | Template(s) | Data props | data.ts collection | Kind | Labels | Status |
+|---|---|---|---|---|---|---|
+| ProductGrid | ecommerce | products | products (CODEX_FIELDS.product) | product | commerce.productLabels, commerce.badges | **done** |
+| PostHeader | two-column, three-column | post | posts[i] (CODEX_FIELDS.post) | post | content.labels | **done** |
+| PricingTiers | saas | plans | tiers (CODEX_FIELDS.plan) | plan | pricing, vibe.billing | **done** |
+| ProductDetail | ecommerce | product | products[0] | product | commerce.detail, commerce.badges | todo |
+| ReviewList | ecommerce | reviews | reviews | review | commerce.reviewLabels | todo |
+| ProjectGrid | portfolio | projects | projects | project | company.projects | todo |
+| PhotoGallery | portfolio | photos | photos | photo | company.photos | todo |
+| ArticleBody | docs, two/three-column | sections | article | section | vibe.article | todo |
+| FaqList | saas, sidebar | items | faq | faq | site.pricing.faqTitle | todo |
+| FeatureGrid | classic, saas, sidebar | features | features | feature | site.home.featuresTitle | todo |
+| StatsBand | classic, saas | stats | stats | stat | marketing.stats | todo |
+| PageTrail | docs | crumbs, extras.facts | crumbs, stats | crumb, stat | marketing.pageTrail | todo |
+| PageIntro | blog, sidebar | none (text props) | - (deck / dictionary) | - | pages.contentBlog.home | todo |
+| CtaBand | classic, saas, ecommerce, portfolio | none | - (deck) | - | deck | todo |
+| NewsletterForm | blog | none | - | - | promo.newsletter | todo |
+
+Templates also compose HeroClassic, HeroSplit, PostGrid, AppShell, SidebarNav, CategoryNav, AboutMe, NavBar, SitemapFooter
+(listed as kit blocks, todo).
+
+| Template | Blocks | Collections |
+|---|---|---|
+| classic | HeroClassic, FeatureGrid, StatsBand, CtaBand | features, stats |
+| two-column | PostHeader, ArticleBody | posts, article, topics |
+| three-column | SidebarNav, PostHeader, ArticleBody | sidenav, posts, article, activity |
+| sidebar | CategoryNav, PageIntro, FeatureGrid, FaqList | categories, features, faq |
+| dashboard | AppShell | sidenav, metrics, series, activity |
+| blog | PageIntro, PostGrid, NewsletterForm | posts, topics |
+| ecommerce | CategoryNav, ProductDetail, ProductGrid, ReviewList, CtaBand | categories, products, reviews |
+| portfolio | AboutMe, ProjectGrid, PhotoGallery, CtaBand | facts, skills, projects, photos |
+| saas | HeroSplit, StatsBand, FeatureGrid, PricingTiers, FaqList, CtaBand | stats, features, tiers, testimonials, faq |
+| docs | SidebarNav, PageTrail, ArticleBody | outline, helplinks, crumbs, article, stats |
+
+## 3. Pilot field maps
+
+**ProductGrid** (`Product`, kind `product`, map `CODEX_FIELDS.product`)
+
+| Prop | Entry path | Manifest | Note |
+|---|---|---|---|
+| id | id | core | |
+| name | title | core | plain string + locale |
+| summary | metadata.summary.value | string, req | |
+| price | metadata.price.value | number, money | minor units, `fmtMoney(minor, currency)` |
+| compareAt (optional) | metadata.compare_at.value | number, money, optional | old price, same currency; struck through (`del`, "Was" for screen readers) when higher than price |
+| currency | metadata.currency.value | string, req | ISO 4217 |
+| rating / reviews | metadata.rating / reviews.value | number / integer | |
+| badge (optional) | metadata.badge.value | string, optional | a key into the `badges` dictionary |
+| category | terms\|term:product_category | core `terms` -> taxonomy `product_category` | the term name ("Light"), by the entry's locale |
+| inStock | metadata.inStock.value | boolean | |
+| href (optional) | slug\|route | core | built from the slug by `opts.routes[kind]`; no route: no link |
+| image (optional) | featured_media_id\|media | core -> kind `media` (`metadata.file`) | the file of a *published* media entry (CODEX.media); in the fixtures a base64 data URI placeholder (no external or file URLs); a real app resolves its own through opts.media / its adapter |
+| labels | dictionary `commerce.productLabels` | | add, soldOut, reviews, ratingLabel, was, empty |
+
+**PostHeader** (`Post`, kind `post`, map `CODEX_FIELDS.post`): id, title, excerpt (core), category<-terms|term:category (term name),
+author<-author_id|author (`display_name` of the kind `user`), date<-metadata.date|date (RFC 3339 -> the locale of the entry or the app, Intl), minutes (integer,
+`labels.minutes`), icon, href<-slug|route, image<-featured_media_id|media (the cover; placeholder without). `post` is optional: without it
+the empty state (`content.labels.empty`).
+
+**PricingTiers** (`Plan`, kind `plan`, map `CODEX_FIELDS.plan`): id, name<-title, tagline, price / yearly (money, minor units; 0 -> `labels.free`),
+currency, seats / storage (integers, units in labels), highlighted, features (string[]). `status` is no longer read (optional on the record,
+the plans list screen keeps its own column). No plans: the empty state (`pricing.empty`).
+
+## 4. Mismatches (fix direction)
+
+| # | Where | Mismatch | Fix |
+|---|---|---|---|
+| 1 | Product/Post `href` (**fixed**: `slug\|route`), CtaBand/PageIntro/PageTrail `href="#"`, sitemap `links` strings | links not built from slug/parent_id | block: derive the link from `slug` by a route helper; drop `href` from data |
+| 2 | Product `image`, PostHeader cover (**fixed**: kind `media`, `featured_media_id\|media`), PhotoGallery, ProjectGrid | no media field; MediaFrame placeholders | block reads `featured_media_id` -> media entry; fixtures add kind `media` (manifest kind) |
+| 3 | ProductGrid (**fixed**), ProductDetail (todo) | no old (compare-at) price | manifest field `product.compare_at` (money) + block prop |
+| 4 | Product `category`, Post `category` (**fixed**: `terms`, taxonomies `product_category`, `category`), Faq `category`, Photo `tag`, Project `tags` | taxonomy as free text / raw keys printed | block: read `terms` (taxonomy + term entries with locale), show term name |
+| 5 | Post/Review `author` (**fixed**: `author_id` -> kind `user`, map `CODEX_FIELDS.review`) | a name string, not a reference | block: read `author_id` (kind user) display_name |
+| 6 | `fmtDate`, `fmtAgo` in core.ts (**fixed**: Intl by the entry's or the app's locale; en output unchanged, the compact en units "min", "h", "d" kept) | fixed en-US format and English "2 min ago", "Yesterday" | block/runtime: Intl by locale + dictionary words |
+| 7 | stats `value` (**fixed**: number + `metadata.unit`, `\|number` formats in the locale), metrics `value` ("$48,200"), templates `views`/`likes` ("1.2K"), dictionary `marketing.pageTrail.value` ("48") | preformatted numbers as strings | manifest: number fields; formatted with Intl |
+| 8 | Product `badge` / Plan `status` (**fixed**: optional; `status` not mapped for the pricing blocks) | record vs manifest | block: make the prop optional / drop `status` |
+| 9 | ProductGrid, PricingTiers, PostHeader (**fixed**: EmptyState, `labels.empty`), most other lists | no empty state | block: empty state with a dictionary label |
+| 10 | magazine templates / taste screens | text from the English copy deck `c` (not entries, not dictionary) | block props from dictionary; deck becomes entries or a dictionary per locale |
+| 11 | (**fixed**, section 7) sitemap `links`, footer groups, side navs, category nav, brand (hardcoded `"#/"` in the components), Plan `features` | string arrays / no href per item; menus are not `menu` records | features ok as content of the entry; menus -> the contract `menu` schema, a link only where it has an address |
+| 12 | Project `year` string, ProjectGrid `client` "Northwind" rebranded at runtime | types / data | manifest: integer year; block drops runtime rebrand when data is neutral |
+
+## 5. Status per block
+
+done: ProductGrid, PostHeader, PricingTiers. Step 2 fixed: empty states, links from slug, image from `featured_media_id` (kind `media`),
+optional badge, no status, dates by locale, `compare_at`; the xgen specs read `CODEX_FIELDS` (`gallery/blocks-data.ts`, `screens/plans-screen.ts`).
+Step 3: category from `terms`, author from `author_id` (kind `user`), lookups `CODEX` passed by the hosts and the magazine;
+PostCard renders its read link only with a route. Open: real media assets (none in the repo), routes once the apps have product/post pages.
+Step 4 done: ProductDetail (old price, featured media, category term; split into ProductPrice and ProductGallery), ReviewList
+(author_id, dates by locale, empty state), StatsBand (numeric `value` + `unit`, `|number` by locale, prop `empty`), PageTrail (crumbs = kind `page`
+chained by `parent_id`, `trail()` orders them, a crumb links only with a route; no crumbs: no nav), FaqList (category = slug of the
+`faq_category` term, tabs filter by it; prop `empty`). Fallback `"#/"` links removed from SectionHead, FeatureGrid cell head, HeroPrompt,
+HeroHead and NavBar links: no address, no link (a button stays a button). Media fixtures: published, base64 data URIs.
+The magazine is a showcase: no routes and no links by design; its templates pass no `href`. Left: the hardcoded `"#/"` of footer
+groups, side navs, the category nav, the brand and the in-page table of contents (#11): done in step 6 (section 7), except the
+in-page table of contents (section 8).
+todo: everything else in blocks.json (kind listed from the spec).
+
+## 6. Generation of blocks.json (step 5)
+
+`bun run codex:blocks` writes `xgen/schema/codex/blocks.json` from the sources; `xgen check` group `codex` (and the test
+`xgen/schema/test/codex-blocks.test.ts`) fails on drift, like the `authored` and `drift` groups for specs and generated code.
+
+| Field | Source |
+|---|---|
+| id, spec, source | kit block: the organism name, the spec id, `xgen/specs/blocks/<key>.json`; screen: `xgen/specs/screens/*.json`; magazine: `apps/magazine/src/templates/*.svelte` (`header`, `footer` = `magazine-part`); taste: `packages/taste-screens/src/screens/*.svelte` |
+| data[] | one binding per `data[]` of the spec: `collection`, `kind`, `record` as written; `prop` = the organism prop the sample or a variant hands the collection to (dotted for a field of a grouped prop: `filter.tabs`, `extras.facts`); `list` = false when picked (`pick`, `nth`); `map` = the key of `CODEX_FIELDS` whose map equals the spec's `fields` |
+| labels[] | every `{ "$": "ui.<path>" }` of the sample and the variants: the prop (dotted when nested) and the dictionary path; `keys` = the fields of the prop's record type found as strings in the dictionary (else the string keys of the dictionary object; `[]` for one string) |
+| settings | the organism props that carry neither data nor dictionary text |
+| emptyState | the block lists the `EmptyState` slot (or `emptyMode: omit`) |
+| uses, collections | screen: every `{ "block": key }` (`block.<key>`), a list screen's `source.collection`; magazine: the kit blocks imported from `@ui8kit/svelte-ui`, every `d.<collection>` read; taste: the kit blocks imported |
+| **by hand** | `status` (todo/done), `required` / `optional` of a binding (kept by its collection), `note`, `emptyMode` (kept by id) |
+
+A block new in the specs appears as `todo` with its bindings; a moved or renamed source is followed (the id stays). The bindings of
+the done blocks now name the real organism prop (FaqList `items`, `filter.tabs`; PageTrail `extras.facts`; PricingTiers lists the
+`duo` collection of its variant too).
+
+## 7. Menus (step 6)
+
+The contract's `Menu` is a core record (`{id, location, locale, items[{id, label, url, parent_id?, order?, target?}]}`), not an entry
+kind. The kit keeps its menus as **entries of kind `menu_item`** (manifest kind, field `location`, `icon`, `count`): `title` = the label,
+`slug` -> the address through the app's routes (`slug|route`), `parent_id` + `order` = nesting, `metadata.location` = the menu
+(`main`, `sidebar`, `subnav`, `outline`, `help`, `footer`, `mega`, `categories`). Collections: navlinks, sidenav, subnav, outline,
+helplinks, sitemap, megagroups, categories (the top items) and `menulinks` (the 28 items under the footer and mega groups, which
+replace the string arrays `links`).
+
+- `bun run codex:validate` builds the core `Menu` records from these entries (one per location and locale: `url` = `"/" + slug`,
+  `target` = `{kind: "menu_item", id}`) and validates them with the entries (`menus` of `validateCollectionV04`): 8 menus, 63 items, 0 errors.
+- Field maps: `CODEX_FIELDS.menuItem` (NavLink), `menuGroup` (MegaGroup: `links` = `id|menu`, the children by `order`),
+  `menuCategory` (Category). Lookup: `CODEX.menus` = the child collections (generated `runtime/codex`); the shared package and
+  `xgen check` (dead) count a child collection as read when its parents are read.
+- Blocks: one pattern, `MenuEntry` (`pattern.menu-entry`): a `Link` where the entry has an address, else its content as text in the
+  same box (`Inline`, or `Box` with `block` when the content holds block elements); `current` -> `aria-current="page"` in both. Used by
+  NavBar, NavLinks, MegaMenu, SidebarNav, BottomNav, SitemapFooter, FooterColumns, FooterCard, FooterSplit, ShellSidebar, ShellFooter,
+  CategoryNav, SiteHeader, HeroHead, PostSplit outline, PostShowcase, MediaList, ProjectGrid, JobCards, FAQ blocks. The aria
+  expressions now sit in that one file (rules baseline: reactive-aria 26 -> 19 per runtime).
+- Brand: a link only with `brandHref` (NavBar, MegaMenu, HeroHead) or `routes.home` (SiteHeader/SiteFooter); else text.
+  FooterSplit: the sitemap link only with `extras.sitemapHref` (pattern `FooterSitemap`); the contact actions take `extras.ctaHref` / `secondaryHref`.
+- Screens: the site screen passes its routes (`SITE_ROUTES` = home, pricing), the theme screens their own `brandHref` and nav links.
+  The gallery passes no menu routes: entries render as text (the DashboardShell footer test counts items, not anchors).
+- Magazine: no routes, so no links; the template stage has 0 `<a>` except the in-page table of contents of the docs template
+  (was 158: brand, sitemap groups, side navs, categories, nav links).
+
+## 7a. Kit blocks in groups (steps 7-15)
+
+- Every fixture kind has a central map (`KIT_FIELDS` in fields.ts, part of `CODEX_FIELDS`); `codex:blocks` picks the map named
+  after the binding's kind when two maps are equal (feature/value/perk/... share one shape).
+- Empty state: a list block takes `empty` (text from `ui.empty.*`) and draws EmptyState when its list has no records
+  (`orEmpty` in authoring/props.ts). Blocks whose lists are secondary parts (AboutMe, AboutCompany, ProductInfo, Stepper,
+  StoreHero, the navigation blocks) use `emptyMode: omit`: `ifAny` leaves the empty part, and its landmark, out.
+- Blocks that read no collection (AuthCard, CtaBand, ErrorPage, PageIntro, ...) are done with their dictionary labels; nothing to be empty.
+- `done.py`-style bookkeeping: `required`/`optional` of a binding come from the fixtures (a field every entry has is required).
+- Data fixes: metrics are numbers (money in minor units + `currency`, `|number` formats it), projects carry an integer year and
+  the term of `project_category`, questions the term of `faq_category`.
+- Step 10: FeatureShowcase, ComparisonTable, SlotBoard draw EmptyState; FeatureSplit (features/stats), VideoModal (chapters),
+  ContactForm (details), DeliveryInfo (facts/zones), SkeletonLayout use omit. `slug|route` may be undefined by design (no route, no link).
+
+- Step 11: PostShowcase, QuoteSplit draw EmptyState; PostGrid (12 props already: omit), MediaList (extras), PostSplit (tags/outline) use omit.
+- Step 12: CtaProof, HeroSplit, HeroClassic use omit: each proof/extra/media shape draws only when its list has records; HeroHead
+  leaves its nav landmark out without links; topics and terminal lines check the length, not only presence (an empty array is truthy in JS).
+- Step 13 (omit): FooterSplit (the guards sit in its parts, the block stays under 150 lines), DashboardShell (ShellTopbar/Sidebar/
+  Footer leave a landmark out without links), SignupWizard (no steps: no wizard), PricingCard (one record; the empty list is PricingTable's job).
+- Step 14: CartDrawer draws EmptyState (with its browse action) for the empty axis and for a cart with no lines; ShoppingCart draws
+  EmptyState titled by `actions.empty` (a field of its own labels record: the block already has 12 props). DashboardOverview and AppShell
+  use omit: no metrics, no tiles; no series or events, no panel (app-main helpers).
+- Step 15: CheckoutForm uses omit (no days or payments: the step keeps its heading, the radios are left out; CartSummaryCard leaves
+  out empty lines, promo codes and rows). Magazine templates pass the `empty` labels of FeatureGrid, ArticleBody, ProjectGrid and
+  PhotoGallery (ui.empty.*); a magazine test checks the template data has no href and only data-URI media.
+## 7b. Magazine templates (step 16)
+
+- `codex:blocks` gives every template and part its bindings (from `apps/magazine/src/templates/data.ts`: key, record, fixture
+  collection, central map; kind and required/optional from the fixtures), its dictionary labels (`d.ui.*`), its settings (the deck
+  copy `c` and the layout props of a part) and `emptyState` (true when every block it composes that reads data has one).
+- A template or part is done when every block it uses is done (blocks test); the magazine test checks no href and data-URI media.
+- Done: the 10 templates, the footer and (step 17) the header.
+- The deck copy (`c.title`, `c.lead`, `c.cta`) is the per-deck text of the taste decks, not dictionary labels: kept as a setting.
+
+- Step 17: NavBar uses omit: its inline/search links sit in NavBarMenu (NavBlock + NavLinks), left out with no links; the
+  landmark label passes through (landmarks.ts). The split layout keeps its nav (brand and buttons are inside it).
+
+- Step 20: the last kit blocks. FaqSplit uses omit: a FAQ section without questions is left out whole (an `empty` prop would
+  break the prop and line limits). JobBoard draws EmptyState (ui.empty.jobs); its salary range stays text (open question 7).
+  TemplateGrid: filtersLabel/browse/viewsLabel/likesLabel became one `labels` record (TemplateLabels), which leaves room for
+  `empty` (ui.empty.templates); no filters, no filter row. Template views and likes are numbers in the fixture, shown by the new
+  pipe `|compact` (1200 -> "1.2K"; "5.0K" now reads "5K"). The blocks test validates a collection together with the others,
+  so a relation (jobs -> departments) resolves.
+
+## 7c. xgen screens (step 18)
+
+- `codex:blocks` gives every screen its data (a list screen's own `source`, and the bindings of the blocks it composes, one per
+  collection), labels (`{ "$": "ui.*" }` refs and the dictionary keys of menus and columns: `titleKey`, `label`), settings (routes,
+  URL state, nav/menu/frame switches) and `emptyState` (every composed block with data has one).
+- The route menus of the theme screens are app routes with dictionary titles, not Codex menu content.
+- screen.plans reads kind `plan` through the central map `planRow` (KIT_FIELDS: the plan with its status).
+- Done: 15 of 15 (step 20: blocks, catalog and theme-marketing-landing once FaqSplit, JobBoard, TemplateGrid were done).
+
+## 7d. Taste screens (step 19-)
+
+- Step 19: no links: the menu words of TopBar and t043 are text (`Inline`), not `Link href="#/"` (the magazine shows the taste
+  screens and has no routes).
+- The screens read a copy deck (`c`, packages/taste-data/content/copy.json) and kit-data adapters (stats, features, logos, topics,
+  bars) built from it. Plan: the deck becomes Codex entries (a `deck` kind with metadata, stat/feature/plan/testimonial/faq
+  entries), the adapters map them through CODEX_FIELDS; then each screen gets bindings and is set done.
+- Step 21: the decks are Codex entries in xgen/fixtures, next to the other collections (so codex:manifest and codex:validate
+  see them): `decks` (kind `deck`: title = brand, metadata nav, eyebrow, headline, accent, lead, cta, secondary, input, note,
+  tags) and the parts `deckstats`, `deckitems`, `deckplans`, `deckquotes`, `deckfaq` (kinds `deck_stat`, `deck_item`,
+  `deck_plan`, `deck_quote`, `deck_faq`), each with the relation `metadata.deck` and its place `metadata.position`. The
+  plan price is `cost` (not a money field: poster copy such as "$0" / "Custom" stays text); the deck title is `headline`
+  because `title` is the entry's own core field (the brand).
+- The field maps are CODEX_FIELDS.deck, deckStat, deckItem, deckPlan, deckQuote, deckFaq (xgen/runtimes/core/assets/app/fields.ts),
+  read by `buildDecks` (xgen/runtimes/core/src/decks.ts, through fromCodex). The generator writes
+  packages/taste-data/content/copy.json from them (target `packages/taste-data/content`, the hand-kept reference-*.json are
+  ignored); copy.ts reads `copy.decks`. taste-data has no new dependency (it reads generated JSON), the layering stays as it
+  is. The generated decks are equal to the old hand-kept file, deck by deck and key by key.
+- dead check: the deck collections count as read by that generated file (DECK_COLLECTIONS in audit.ts), not by a screen.
+- Step 22-24: the taste screens in blocks.json (codex-blocks `tasteScreen`). data = the deck the screen reads (`c`), found from
+  the `c.x` it and its parts (TopBar, Avatars, Field) read and from the kit-data adapters (logos/topics -> tags, features ->
+  items): one binding `c` (kind deck, map deck, required = the deck fields read) plus one per part list (`c.stats` -> deckstats,
+  deckStat, ...). labels = [] (a taste screen has no dictionary text, the poster copy is deck data). settings = the attributes
+  given to a part (`TopBar.layout`, `TopBar.tone`, `Avatars.n`, ...). No taste screen composes a kit block (only bricks), so
+  `uses` is empty and no kit link can reach one.
+- Empty state: every deck has stats and items (tested in xgen/runtimes/core/test/decks.test.ts); plans, quotes and faq are
+  read as `c.x ?? []`, so a deck without them leaves the list out: t146 has emptyMode omit. The other screens' emptyState is
+  true (no list that can be empty).
+- The old note "text from a copy deck, not Codex entries" is removed from the taste entries: the decks are Codex entries now.
+- blocks.test runs one set of binding tests per distinct binding (the 146 screens share a few deck bindings).
+
+## 7e. Presets (step 25)
+
+- A preset is style, not content: `xgen/specs/presets/defaults.json` (authoring `presets/default-preset.ts`) holds named
+  Tailwind class strings for block sizes; `packages/taste-data/src/preset.ts` builds `{ screen, skin, font, fonts, radius,
+  pattern, style }` from a style key. Neither carries text, a link, media or an entry, so nothing maps to Codex: they are
+  settings of the blocks and screens (the `settings` side of blocks.json), not data. No change.
+- The magazine page `#/presets` lists the saved styles: its words come from the magazine dictionary (content/ui.json), its
+  one link has a real href (`#/style/<key>`), its empty state is `ui.presets.empty`. It meets the rules as it is.
+
+## 8. Open questions (decided for now, review later)
+
+- (resolved, step 26: an exception, user decision) The research renderer (`apps/magazine/src/reference`) with
+  `reference-copy.v0.1.json`, `reference-catalog.v0.1.json` and the capture scripts stays outside the contract, like panorama and
+  illustrations: own shapes, not Codex entries, not in blocks.json; the kit, magazine templates and taste screens never read them.
+
+1. Docs template table of contents: in-page anchors (`#tp-docs-body-section-*`) stay links; they address the page itself, not an app route.
+2. Gallery samples (`gallery/blocks-*.ts`) keep `"#/pricing"`-style hrefs as screen data the app hands over (not fixtures).
+3. CTAs with no address source (FAQ arrow link, auth "forgot", composer buttons) became link-style buttons (`<button type="button">`).
+4. (resolved, step 27: the chip is `h-8 px-3`, 32 px like Button sm, no half step) CategoryNav kept the chip classes `px-3 py-1.5` (a half step; inside a control, lint:px does not block it); to revisit with the control sizes.
+5. The magazine header shows the fixture menu labels (`navlinks`) instead of the deck's nav words; the deck words will go with #10.
+6. Menu items' `url` in the core Menu is `"/" + slug` (a neutral path); the real address is still the app's route.
+7. (resolved, step 20: JobBoard done, salary kept as text with an empty state) JobBoard stayed todo: salaries are text ("$120k to $150k", "$60 an hour"); they need min/max minor units, currency and a period
+   word from the dictionary (a range formatter), so the block changes with them.
+8. (resolved, step 20: TemplateGrid done, labels record + `empty`, views/likes numbers with `|compact`) TemplateGrid stayed todo: it already has 12 props (the readability limit), so `empty` needs a grouped labels prop first; views/likes
+   are preformatted ("1.2K") and become numbers with compact formatting then.
+9. Table cells of ComparisonTable (`compare`, `rivals`: "Unlimited", "0.8 s"), delivery windows (`days.slots`), zone times and chapter
+   offsets ("0:00") stay plain text for now: they read as copy, not as figures the UI computes with.
+10. Milestone `date` is a year string ("2021"); kept as text until a `|year` formatter is needed.
+- (resolved, step 20: FaqSplit done with emptyMode omit, the whole section left out without items) FaqSplit stayed todo: an `empty` prop makes 13 props and the generated faq-split 154 lines; needs a split (FaqSplit by layout) or the text in its labels record.
diff --git a/xgen/docs/blocks.md b/xgen/docs/blocks.md
new file mode 100644
index 0000000..2c62ceb
--- /dev/null
+++ b/xgen/docs/blocks.md
@@ -0,0 +1,101 @@
+# Blocks
+
+A **block** is an organism of the site, the axes it varies on, named variants and the data it reads. It holds **no markup**.
+The organism draws it. A variant is a row of data (axis -> value), never a copy of code.
+
+```
+xgen/specs/blocks/<key>.json     the block      (schema: xgen/schema/schemas/block.schema.json)
+xgen/specs/screens/*.json        "kind": "composed": a page that is a list of block uses (composed.schema.json)
+xgen/specs/patterns/             SectionFrame, MediaFrame, ActionGroup: the frames every site organism is made of
+```
+
+## A block
+
+| field | meaning |
+|---|---|
+| `organism` | the organism that draws it (SiteHeader, HeroSection, FeatureGrid, ...) |
+| `axes` | axis -> values. An axis is a prop of the organism whose type is a union of literals; the values equal the union |
+| `defaults` | the value of each axis when a variant does not set it (equal to the organism default) |
+| `variants` | `{ id, set }`: the named rows. A row sets axes only |
+| `slots` | the patterns the organism is made of (checked against its view) |
+| `events` | organism event -> page action (the only action is `toggleTheme`) |
+| `data` | the fixtures the props read; a page gets one source per entry |
+| `sample.props` | props every use gets for free: dictionary references and fixture data |
+| `theme` | the topic of the gallery section: marketing, commerce, promo, content, account, dashboard, onboarding, support (`blocks.themes.<theme>.title/text` in the dictionary) |
+| `fit` | `section` (default): the block spans the page; `card`: a narrow block (an auth card, a plan) the gallery centers in a `max-w-sm` container |
+| `variants[].props` | case copy of a variant (a SaaS hero, a shop banner): dictionary references that replace the sample for this row only |
+
+Axes in use: layout, columns, item, media, media side, density, tone, emphasis, position, actions, and the block's own (mode, chart, progress, marker, terms, fields, social, ...).
+Props merge as sample < axis defaults < `variant.set` < `variant.props` < the use. The variants of a block are chosen so that every value of every axis is shown by some row.
+
+## The catalog
+
+61 blocks and 325 variants in 8 themes. The gallery index has a section per theme. The 92 layouts of the reference catalog are mapped to blocks and variants in [vibeui-coverage.md](vibeui-coverage.md).
+
+| theme | blocks (variants) |
+|---|---|
+| marketing | accordion 4, beforeafter 4, bento 4, compare 4, credits 4, cta 11, faq 7, features 8, featuretabs 3, footer 3, header 4, hero 16, iconwall 5, logos 6, megamenu 4, navbar 6, pagehead 3, plan 3, pricing 10, proof 4, sitemap 6, stats 7, steps 6, sticky 4, testimonials 11, usage 4, videos 4 |
+| commerce | cart 4, categories 5, orders 4, product 5, products 7, reviews 5, summary 4 |
+| promo | announcement 9, cookie 4, newsletter 6 |
+| content | article 4, postheader 4, posts 7 |
+| account | auth 8, authpage 9, profile 4, wizard 5 |
+| dashboard | activity 4, bottomnav 4, chart 4, empty 6, kanban 4, metrics 4, overview 4, shell 4, sidenav 4, skeleton 4 |
+| onboarding | checklist 7, stepper 4, tour 4, videomodal 4 |
+| support | channels 4, contact 6, errorpage 5 |
+
+Source: `xgen/screens/src/authoring/gallery/blocks.ts` (marketing), `blocks-commerce.ts`, `blocks-more.ts`, `blocks-vibe.ts` (the blocks added for the reference catalog); the organisms in `site.ts`, `marketing.ts`, `commerce.ts`, `content.ts`, `promo.ts`, `account.ts`, `dashboard.ts`.
+Product cases (SaaS, shop, agency, blog) are variants with case copy. The fixtures are Codex-style collections in `xgen/fixtures`.
+After a change to blocks or variants run `bun xgen/screens/tools/author-block-texts.ts` (names, docs and labels into the dictionary); new Lucide names are merged with
+`bun xgen/spec/tools/add-lucide.ts <canary-root> <name>...`.
+
+## Pictures and the container
+
+**MediaFrame** is the only way a block shows a picture. Props: `alt`, `src` (the light theme), `darkSrc` (the dark theme; without it `src`), `ratio`, `shape`.
+Without `src` it shows built-in neutral placeholders as base64 data URIs (one light, one dark, no external files): two `img` (`data-theme-src="light"` with `dark:hidden`,
+`"dark"` with `hidden dark:block`), the right one is shown by the theme tokens.
+
+**SectionFrame** keeps every block in one container (`data-slot="container"`, `max-w-5xl`, centered) and stacks its parts with `align: stretch`;
+a `Stack` without it shrinks its children to their content and the block sits at the left. The gallery e2e measures the container at 1400 and 390 px.
+
+## A composed screen
+
+A page is `routes`, a `frame` (blocks before and after the routed area) and `areas` (lists of `{ block, variant, props }`).
+The loader expands it into an ordinary page screen: props merge as sample < axis defaults < variant < the use.
+An axis cannot be set in a use; choose another variant. The site (`screen.site`) is a composed screen.
+
+The **gallery** (`screen.blocks`, `"gallery": true`) is built from the whole catalog: an index, and a page per block with every variant on the fixtures.
+Both host apps serve it at `/blocks/#/` (Svelte on 5180, React on 5181); there is no gallery app.
+
+## Theme screens
+
+Each theme of the catalog (plus a split of marketing into landing, product and pricing) is a composed screen served by both hosts at `/theme-<name>/#/<page>`
+(no app per theme). The pages are composed screens (`screen.theme-<name>`) written in `xgen/screens/src/authoring/screens/themes.ts`:
+a lead block with the h1 (`pagehead`, `hero`, `authpage`, `errorpage`, `postheader` or `product`), the blocks of the page, and a frame of the `navbar` block (skip link, theme button) and a `sitemap` footer.
+The head texts of the pages live in the dictionary under `pages.<appKey>.<page>`; write them with `bun xgen/screens/tools/author-theme-texts.ts`. The menu of each theme screen is its `menu` field, written by the builder.
+The links of the bar are the sample data of the block (they all lead to the first page); pages link to each other through the call to action of the lead block.
+
+| screen (`theme-<name>`) | pages |
+|---|---|
+| marketing-landing | home, launch, developers, studio, events |
+| marketing-product | home, tour, capabilities, navigation |
+| marketing-pricing | home, plans, usage, compare |
+| commerce-shop | home, catalog, browse, product, cart, orders |
+| promo-campaign | home, launch, offer, notices |
+| content-blog | home, articles, archive, post, essay, plain |
+| account-portal | sign-in in eight shapes, join, cards, profile |
+| dashboard-console | overview, board, workspace, layouts, states |
+| onboarding-flow | home, welcome, setup, tour |
+| support-center | home, faq, contact, missing, moved |
+
+Every block of the catalog appears in at least one theme screen (`xgen check`, group `themes`). `xgen e2e` runs the theme scenario on each route in light and dark:
+one h1 (equal to the title of the page), one main, heading order, unique ids, named sections and landmarks, no gradients, data-URI pictures, centered containers and no sideways scroll at 1100 and 390 px, the skip link, and screenshots `shots/<app>-<page>-<light|dark>.png`.
+`XGEN_E2E_ONLY=blocks,theme-marketing` runs only the screens (or hosts) whose keys start with one of the prefixes.
+
+## Checks
+
+`xgen check` has a `blocks` group (the audit groups are in [audit-2026-10-05.md](audit-2026-10-05.md)): the schema, the organism and its axes (equal to the union of the prop), defaults, variants that resolve and are distinct,
+every axis value shown by some variant, slots equal to the patterns of the organism, events and actions, fixtures and their fields, the picked plan,
+texts and labels present in `content/ui/en.json`, no Cyrillic, no gradients, composed uses that name real blocks and variants, a gallery section for every variant.
+
+`xgen e2e` runs one gallery scenario in every host runtime (the index by theme; the facts of every variant: counts, columns, media side, tone, sticky header, disclosures, theme; the container of every block at 1400 and 390 px: centered, one width, no sideways scroll; only data-URI pictures),
+compares the DOM of the hosts in the same states and writes light and dark screenshots to `shots/blocks-<runtime>-<block>-<light|dark>.png`.
diff --git a/xgen/docs/canary-coverage.md b/xgen/docs/canary-coverage.md
new file mode 100644
index 0000000..883f672
--- /dev/null
+++ b/xgen/docs/canary-coverage.md
@@ -0,0 +1,139 @@
+# Canary coverage: what xgen generates, what is a contract, what is left
+
+The canary (a private Svelte app) is a guide, not a target for a 100% copy. This page answers three questions: **which canary
+packages can be generated and how**, **what is already covered** and **what the rest costs**. Numbers are from the checkout on 2026-10-04.
+
+## The four ways a canary file is produced
+
+| mode | what it is | where it lives | used for |
+|---|---|---|---|
+| **A. spec -> component** | a JSON spec (brick, part, pattern, organism, screen) is turned into a Svelte and a React file by the emitters. Pure markup: no state, no effects, no fixtures. Text comes through props or the dictionary | `xgen/specs/**`, builder in `xgen/screens/src/authoring` | everything presentational |
+| **B. contract** | a spec with `portable: false` and a reason, `view: []`. Props, slots and events are fixed, nothing is generated; the programmer writes the behaviour with the a11y helpers (`moveFocus`, `typeahead`, `focusables`, `lockScroll`, `dismissable`, `trapFocus`) | same | overlays, editors, anything with focus or timers |
+| **C. portable runtime asset** | framework-free TypeScript (no runes, no hooks) copied into the generated package with the DO NOT EDIT header, plus a thin adapter per framework (runes in Svelte, `useSyncExternalStore` in React) | `xgen/runtimes/core/assets` | logic: URL state, query/sort/filter, csv, codex, validation, formatting |
+| **D. hand-written** | the application: ports (props, slots, events, URL port, stores) and the business rules | the app, outside `packages/*` and `apps/*/src/generated` | state, fetching, forms, auth flows |
+
+Checks keep the line between them: `xgen check` fails when a generated file was edited, when generated code uses `setContext`, `$bindable` or
+attachments (their replacement is a documented port), when a view has literal text, or when a recipe value has no example.
+
+## Packages of the canary
+
+Line counts are of `src`; effort is in person-days for one person at the pace of this work (a spec with checks about 0.3 day, an asset with tests about 0.5 day).
+
+### shell (20 files, 814 lines)
+
+| canary file(s) | mode | how | effort |
+|---|---|---|---|
+| PageFrame, PageBody, AppMain, SidebarFrame, SidebarToggle | A | organism specs with slots (`children`, `sidebar`); a toggle emits `toggle` | 0.5 |
+| AppTopNav, AppSidebar (140) | A | organisms over the existing `NavItem`, `LogoSidebar`, `SidebarPanel`; items are a record array, the current item comes from the route | 1 |
+| Modal, ConfirmDialog, SettingsDialog, RowMenu, ThemeMenu, MenuButton | A + B | the dialog frame is the `dialog` brick; open state, focus trap and outside click are the contract (`trapFocus`, `dismissable`) | 1.5 |
+| theme.svelte.ts, router.svelte.ts | C | theme (`toggleTheme`) and the hash router (`createHashStore`, `matchRoute`, `UrlPort`) **exist** as assets with both adapters | 0 |
+| layout.svelte.ts (sidebar state) | C | a store with `persist`, same two adapters | 0.5 |
+| query.ts, labels.ts | C / dictionary | `buildHash`/`parseHash` already cover query.ts; labels become `content/ui/en.json` keys | 0.3 |
+| context.ts (`setContext`) | D | not portable: explicit props / a port object (documented in `_nonportable.json`) | 0.2 |
+| **total** | | | **about 4** |
+
+### data-table (8 files, 550 lines)
+
+| canary file(s) | mode | how | effort |
+|---|---|---|---|
+| types.ts, state.ts, query.ts, csv.ts | C | `collectionView` (search, sort, pager, URL keys) **exists**; missing: filters, multi-sort, column visibility, selection, csv export | 2 |
+| DataTable, DataCell (248) | A + B | the plans screen already builds the table from a column list (types text, money, number, badge, `aria-sort`, caption, scope); an organism `DataTable` takes `columns` + `rows`; row selection and editing are events | 2 |
+| **total** | | | **about 4** |
+
+### list-kit (19 files, 667 lines)
+
+| canary file(s) | mode | how | effort |
+|---|---|---|---|
+| Fact, MiniTable, StatusTabs, PageTabs, NumberField, ListTools, FacetPanel, DataList | A | organisms over parts (`Pager`, `SearchField`, `TableToolbar`, `Pill`, `IconTabs`) | 2.5 |
+| FormDialog, SavedViews | A + B | frames are specs; submit, validation and storage are events/ports | 1.5 |
+| list-ctx.svelte.ts, shell-url.ts, env.ts | D | context replaced by explicit props and the URL port | 1 |
+| facets.ts, filter-fields.ts, csv-io.ts, labels.ts | C | pure functions | 1 |
+| **total** | | | **about 6** |
+
+### content (9 files, 569 lines)
+
+| canary file(s) | mode | how | effort |
+|---|---|---|---|
+| codex.ts, library.ts, access.ts | C | `fromCodex` and the collection JSON Schema **exist**; the rest is plain data access | 0.5 |
+| validate.ts (268) | C | entry validation by kind; the schema layer of xgen is the base | 1 |
+| i18n.svelte.ts, format.svelte.ts | C | a locale store and `t()` with `{0}` placeholders (`tpl`, `at`, `money` exist; one locale today) | 1.5 |
+| persist.ts, collection.svelte.ts | C | localStorage store, collection store + adapters | 1 |
+| **total** | | | **about 4** |
+
+### auth-kit (12 files, 458 lines)
+
+| canary file(s) | mode | how | effort |
+|---|---|---|---|
+| AuthCard, SecretField, OtpCells, ProviderButtons | A | organisms; OtpCells needs focus moves (`moveFocus`) | 1.5 |
+| AuthWidget (117) | B + C | contract for the flow, a state machine as a portable asset | 1.5 |
+| registry.ts, brand.ts, types.ts, fill.ts, snippet.ts | C | data and types; provider logos must be checked for licence before they go public | 1 |
+| **total** | | | **about 4** |
+
+### tooling and the rest of ui
+
+| item | mode | effort |
+|---|---|---|
+| tooling `retag`, `rules`, `i18n`, `content`, `fix-root` | project specific; xgen has its own `audit.sh` and `check` | 2, optional |
+| ui: eleven contracts (CodeEditor, PromptInput, Smartbox, Drawer, DropdownMenu, Popover, SelectMenu, Toaster, DropZone, FilterBuilder, LogoMark) as full behaviour | C + B | 12 for all, 1 to 3 each; nothing is needed to use the contracts |
+| ui: `toasts.svelte.ts` | C | 0.3 |
+| ui: kit icon set | **never**: glyph data is private kit data (Lucide is the public replacement) | - |
+
+Packages total: about **22 person-days** for shell, data-table, list-kit, content and auth-kit; about **14** more for the full behaviour of the overlays and tooling.
+
+## Coverage map (2026-10-04)
+
+### Components of `packages/ui` (110 names)
+
+| | count | share |
+|---|---|---|
+| generated for Svelte and React | 98 | 89% |
+| contract only (props/slots/events fixed, behaviour is the programmer's) | 11 | 10% |
+| not covered (kit icon set) | 1 | 1% |
+
+By tier: 68 ui bricks/parts (all generated, plus ButtonPlain, LinkPlain, Range, Skeleton, LucideIcon; ButtonLabel was folded into Button in ui8kit 2.0), 23 parts (20 generated, 3 contracts), 19 patterns (11 generated, 8 contracts).
+
+### Packages (7 in canary)
+
+| package | state |
+|---|---|
+| ui | covered (above) |
+| shell | not generated; theme, router and URL port exist as assets (about 10% of the work) |
+| data-table | not generated; `collectionView` and the table of the plans screen cover the core (about 25%) |
+| list-kit | not generated; Pager, SearchField, TableToolbar exist as parts (about 15%) |
+| content | not generated; `fromCodex`, the collection schema and the dictionary exist (about 25%) |
+| auth-kit | not generated |
+| tooling | replaced by `bun run audit:push` and `xgen check` |
+
+Whole packages: 1 of 7 (14%); with the partial ones about 2.3 of 7.
+
+### Apps (7 in canary, 224 Svelte files)
+
+| app | files | state |
+|---|---|---|
+| landing | 32 | **partial**: home and pricing in Svelte and React (SiteHeader, SiteFooter, HeroSection, FeatureGrid, PricingTiers, FaqList, CtaBand, not-found = 8 of 32 files, 25%). Not ported: blog (PostPage, PostCard, PostMore, Prose), forms (Lead, Newsletter), Compare, Steps, Stats, Logos, Team, Testimonials, Contact, Split, Document, AppearanceMenu, the monthly/yearly toggle, ru locale, per-route document title |
+| table | 25 | not ported; the list -> record demo (plans: search, sort, pager, record card, URL state) is a small relative |
+| crm | 18 | not ported |
+| cms | 31 | not ported |
+| commerce | 28 | not ported |
+| pim | 36 | not ported |
+| auth | 54 | not ported |
+
+Apps: 0 of 7 whole, 1 partial; files 8 of 224 (4%).
+
+Effort for the rest of the apps after the packages above: landing 4, table 3, crm 2.5, cms 4, commerce 4, pim 5, auth 7 = **about 30 person-days**, each with its e2e scenario.
+
+### e2e
+
+Canary has 745 assertions in 7 scripts (landing 84, auth 163, commerce 132, pim 126, table 109, crm 70, cms 61; English and Russian). xgen runs per runtime: plans 29 steps, landing 43 steps, plus the DOM pair test (Svelte vs React) in 9 states. Landing: 43 of 84 (51%) of the canary assertions have an equivalent (landmarks, one h1, skip link, current link, fixtures on the page, FAQ, theme, no gradients, 404); the Russian run, forms and the blog have none.
+
+## Deviations from the canary (all deliberate)
+
+- **Field**: the `for` attribute is the prop `htmlFor`; **Panel**: an `id` prop instead of `$props.id()`; **Region**: no rest spread.
+- **Pager**: no page-size select; `pageLabel` is a template string (`{0}`); `moreLabel` is a prop.
+- **Switcher / SwitcherItem**: the context is replaced by explicit `size`, `shape`, `layout` props.
+- **FileTreeItem, EditorTab**: Lucide glyphs instead of kit icons (open question: keep or replace).
+- **Range**: controlled `value`; **Progress**: exists as the `Progress` part of `ui.form.controls`, without a Label.
+- No `$bindable`, no `setContext`, no attachments: the replacement is a prop plus an event or a port (`_nonportable.json`).
+- LogoMark and the kit icon set: private glyph data, never in git; LogoMark is a contract.
+- A `.svelte` file can not start with a `//` comment (it renders as text): the header is `<!-- ... -->` (the pair test found this, a check now guards it).
+- In-page anchors (`#main-content`) do not change the route of the hash router (`isRouteHash`).
diff --git a/xgen/docs/migrations.md b/xgen/docs/migrations.md
new file mode 100644
index 0000000..1271901
--- /dev/null
+++ b/xgen/docs/migrations.md
@@ -0,0 +1,19 @@
+# Versions of the specs and migrations
+
+Every JSON file under `xgen/specs` and every `xgen.app.json` carries `specVersion`. The schemas in `xgen/schema/schemas` describe the current version, `SPEC_VERSION` in `xgen/schema/src/versions.ts` (now 1).
+
+## When a shape changes
+
+1. Raise `SPEC_VERSION`.
+2. Add the step to `MIGRATIONS` in `xgen/schema/src/versions.ts`: a function that turns a spec of version *n* into version *n + 1*.
+3. Describe the change here, with the date, the old shape and the new one.
+4. Run `bun run build`; the authored specs are written on the new version, and `xgen check` (group `versions`) names every other file that is still on the old one.
+
+Files the authoring code writes (`organisms`, `parts`, `patterns`, `blocks`, composed `screens`) are rewritten by `bun run build`. Files written by hand (`xgen.app.json`, fixtures) are changed with `migrate()` and committed.
+
+## Log
+
+| Version | Date | Change |
+| --- | --- | --- |
+| 1 | 2026-10-05 | The first version. Blocks carry `facts`, composed screens carry `requireH1`; both are optional fields of version 1. |
+| 1 | 2026-10-06 | Screens as data: screen and composed specs carry an optional `menu` (`[{path, label, screen}]`); `xgen.app.json` describes a host (`screens: ["*"]` allowed) and loses `routes` and `layout`. Kept on version 1 because the 28 per-composition apps were removed in the same change, so no file on the old app shape remains. |
diff --git a/xgen/docs/vibeui-coverage.md b/xgen/docs/vibeui-coverage.md
new file mode 100644
index 0000000..361d7f7
--- /dev/null
+++ b/xgen/docs/vibeui-coverage.md
@@ -0,0 +1,184 @@
+# Coverage of the reference catalog
+
+<!-- Written by screens/tools/author-coverage.ts from xgen/screens/src/authoring/gallery/coverage.ts. `xgen check` compares this file with the registry; do not edit it by hand. -->
+
+The reference catalog holds 92 layouts in 15 categories. Each one is mapped to a block and a variant of ours (a variant is a row of data: axes and case copy), or to a block plus a contract for the motion that a port must supply. Only the composition and the layout are recorded here: no words and no markup of the source are copied. The source of truth is our own primitives, patterns and organisms with their specs.
+
+| Kind | Layouts |
+| --- | --- |
+| A variant of a block that existed | 45 |
+| A new block | 38 |
+| A variant, plus a contract for motion | 6 |
+| A new block, plus a contract for motion | 3 |
+| **All** | **92** |
+
+9 layouts need a contract (8 patterns: marquee, carousel, count-up, typing text, video embed, animated backdrop, scroll spy, sortable list). A contract is a pattern with a props interface and slots, generated for every runtime as a typed port; it has no animation of its own, and the static variant named next to it is what the page shows without the port.
+
+Rules every row obeys: no gradients, no animation variants, icons from Lucide, pictures as embedded placeholders, tokens of shadcn, text from the English dictionary.
+
+## Auth
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 1 | Form beside a picture panel | `authpage.split` | AuthLayout | new block |
+| 2 | Card centered on a tinted page | `authpage.centered` | AuthLayout | new block |
+| 3 | Bare form, no chrome | `authpage.minimal` | AuthLayout | new block |
+| 4 | Social providers first, address second | `authpage.socialFirst`, `auth.socialFirst` | AuthLayout | new block |
+| 5 | Passwordless link by address | `authpage.magic`, `auth.magic` | AuthLayout | new block |
+| 6 | Sign-up in steps with progress | `wizard.bar`, `wizard.list`, `wizard.second` | SignupWizard | new block |
+
+## Pricing
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 7 | Three tiers side by side, one highlighted | `pricing.grid` | PricingTiers | variant |
+| 8 | Tiers with a monthly or yearly switch | `pricing.monthly`, `pricing.annual` | PricingTiers | variant |
+| 9 | Feature comparison table across plans | `compare.plans`, `compare.highlight` | ComparisonTable | new block |
+| 10 | One plan, one price, one list | `plan.standard` | PricingCard | variant |
+| 11 | Price follows a usage slider | `usage.card` | UsageCalculator | new block |
+| 12 | Packs of credits to buy | `credits.tiles4` | CreditPacks | new block |
+| 13 | Free plan against the paid plan | `pricing.duo` | PricingTiers | variant |
+| 14 | Plans stacked in one column | `pricing.stack` | PricingTiers | variant |
+
+## Features
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 15 | Icon, title and text in a grid | `features.grid` | FeatureGrid | variant |
+| 16 | Bento: tiles of different sizes | `bento.bento` | BentoGrid | new block |
+| 17 | Rows of text and picture, sides alternate | `features.rowsAlternate` | FeatureGrid | variant |
+| 18 | Features behind tabs | `featuretabs.split` | FeatureTabs | new block |
+| 19 | Features as an accordion beside a picture | `accordion.media` | FeatureAccordion | new block |
+| 20 | List that follows the scroll beside a sticky picture | `sticky.end`, `pattern.scroll-spy` | FeatureSticky | new block + contract |
+| 21 | Wall of icons with short labels | `iconwall.tiles4` | IconWall | new block |
+| 22 | Before and after, side by side | `beforeafter.cards` | BeforeAfter | new block |
+
+## Hero
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 23 | Centered text above a product screenshot | `hero.screenshot` | HeroClassic | variant |
+| 24 | Text on one side, picture on the other | `hero.split` | HeroClassic | variant |
+| 25 | Text over a full-width background clip | `hero.backdrop`, `pattern.video-embed` | HeroClassic | variant + contract |
+| 26 | Text over a moving mesh background | `hero.muted`, `pattern.animated-backdrop` | HeroClassic | variant + contract |
+| 27 | Terminal window with typed lines | `hero.code`, `pattern.typing-text` | HeroClassic | variant + contract |
+| 28 | Cluster of floating interface cards | `hero.cluster` | HeroClassic | variant |
+| 29 | Oversized type, almost no picture | `hero.display` | HeroClassic | variant |
+| 30 | Headline with an inline address form | `hero.form` | HeroClassic | variant |
+
+## CTA
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 31 | Full-width band with one button | `cta.band` | CtaBand | variant |
+| 32 | Card split into text and action | `cta.split`, `cta.row` | CtaBand | variant |
+| 33 | Bar fixed to the bottom of the screen | `announcement.bottom` | AnnouncementBar | variant |
+| 34 | Band over a quiet pattern | `cta.band` | CtaBand | variant |
+| 35 | Two actions for two audiences | `cta.saas`, `cta.agency` | CtaBand | variant |
+| 36 | Address field and a button inline | `cta.form` | CtaBand | variant |
+| 37 | Customer quote above the action | `cta.quote` | CtaBand | variant |
+
+## Stats
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 38 | Four figures in a row | `stats.plain4` | StatsBand | variant |
+| 39 | Figures that count up on view | `stats.plain4`, `pattern.count-up` | StatsBand | variant + contract |
+| 40 | Icon beside each figure | `stats.icons` | StatsBand | variant |
+| 41 | Customer logos above the figures | `proof.above` | ProofBand | new block |
+| 42 | Figures stacked in one column | `stats.stack` | StatsBand | variant |
+| 43 | Figures over a picture | `stats.image` | StatsBand | variant |
+| 44 | Each figure in its own card | `stats.cards` | StatsBand | variant |
+
+## Navigation
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 45 | Brand, links and one button | `navbar.inline` | NavBar | new block |
+| 46 | Brand in the middle, links on both sides | `navbar.split` | NavBar | new block |
+| 47 | Wide panel of grouped links under a menu | `megamenu.open` | MegaMenu | new block |
+| 48 | Vertical sidebar with icons and the user | `sidenav.full` | SidebarNav | new block |
+| 49 | Floating rounded bar | `navbar.inline` | NavBar | new block |
+| 50 | Transparent bar over a picture | `navbar.media` | NavBar | new block |
+| 51 | Bar with a search field and its shortcut | `navbar.search` | NavBar | new block |
+| 52 | Tab bar at the bottom for phones | `bottomnav.labels` | BottomNav | new block |
+
+## Testimonials
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 53 | Three quote cards in a row | `testimonials.grid3` | TestimonialGrid | variant |
+| 54 | Endless strip of quotes | `testimonials.strip`, `pattern.marquee` | TestimonialGrid | variant + contract |
+| 55 | Masonry of quotes of different height | `testimonials.masonry` | TestimonialGrid | variant |
+| 56 | One large featured quote | `testimonials.featured` | TestimonialGrid | variant |
+| 57 | Grid of customer videos | `videos.grid3` | VideoGrid | new block |
+| 58 | Wall of short social posts | `testimonials.social` | TestimonialGrid | variant |
+| 59 | Cloud of customer logos | `logos.grid4` | LogoCloud | variant |
+| 60 | Quotes one at a time with arrows | `testimonials.single`, `pattern.carousel` | TestimonialGrid | variant + contract |
+
+## Footer
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 61 | Brand and several columns of links | `sitemap.columns` | SitemapFooter | new block |
+| 62 | Single line: brand, links, copyright | `footer.minimal`, `sitemap.row` | SiteFooter | variant |
+| 63 | Giant brand word across the bottom | `sitemap.columns` | SitemapFooter | new block |
+| 64 | Sign-up form first, links after | `sitemap.newsletter` | SitemapFooter | new block |
+| 65 | Links with a service status pill | `sitemap.status` | SitemapFooter | new block |
+
+## FAQ
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 66 | Questions as an accordion | `faq.list` | FaqList | variant |
+| 67 | Questions in two columns | `faq.twoColumns` | FaqList | variant |
+| 68 | Questions as a chat | `faq.chat` | FaqList | variant |
+| 69 | Questions with a search field | `faq.search` | FaqList | variant |
+| 70 | Questions grouped under tabs | `faq.tabs` | FaqList | variant |
+
+## Dashboards
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 71 | Sidebar and a main area | `shell.sidebar` | AppShell | new block |
+| 72 | Top bar and a main area | `shell.top` | AppShell | new block |
+| 73 | Three panes: list, detail, side | `shell.panes` | AppShell | new block |
+| 74 | Kanban lanes with cards | `kanban.detail`, `pattern.sortable-list` | KanbanBoard | new block + contract |
+| 75 | Counters, a chart and the activity | `overview.split` | DashboardOverview | new block |
+| 76 | Empty state with one action | `empty.orders` | EmptyPanel | variant |
+
+## Onboarding
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 77 | Checklist whose tasks expand | `checklist.expand` | Checklist | variant |
+| 78 | Tour: callouts that point at the interface | `tour.below` | TourCallout | new block |
+| 79 | Welcome video in a dialog | `videomodal.default`, `pattern.video-embed` | VideoModal | new block + contract |
+| 80 | Empty state with an illustration | `empty.illustrated` | EmptyPanel | variant |
+
+## Blog
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 81 | Magazine front: one lead post and a grid | `posts.magazine` | PostGrid | variant |
+| 82 | Single reading column | `article.column` | ArticleBody | new block |
+| 83 | Article with a table of contents beside it | `article.toc` | ArticleBody | new block |
+| 84 | Card grid with topic filters | `posts.filters` | PostGrid | variant |
+
+## Contact
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 85 | Form beside the contact details | `contact.split` | ContactForm | variant |
+| 86 | Channels: chat, mail, phone as cards | `channels.grid` | SupportChannels | variant |
+| 87 | Whole page for the form, nothing else | `contact.page` | ContactForm | variant |
+
+## Bonus
+
+| # | Layout | Ours | Organism | Kind |
+| --- | --- | --- | --- | --- |
+| 88 | Us against the competitors | `compare.rivals` | ComparisonTable | new block |
+| 89 | Announcement of a new feature | `announcement.badge` | AnnouncementBar | variant |
+| 90 | Cookie notice as a card | `cookie.card` | CookieBanner | variant |
+| 91 | Page not found | `errorpage.centered` | ErrorPage | new block |
+| 92 | Loading skeleton of a page | `skeleton.cards` | SkeletonLayout | new block |
diff --git a/xgen/fixtures/activity.json b/xgen/fixtures/activity.json
new file mode 100644
index 0000000..5e4ba06
--- /dev/null
+++ b/xgen/fixtures/activity.json
@@ -0,0 +1,102 @@
+{
+  "collection": "activity",
+  "kind": "event",
+  "entries": [
+    {
+      "id": "event-a1",
+      "locale": "en",
+      "kind": "event",
+      "status": "published",
+      "visibility": "public",
+      "slug": "a1",
+      "title": "Plan upgraded to Team",
+      "metadata": {
+        "text": {
+          "value": "Billing changed by Dana Pierce."
+        },
+        "time": {
+          "value": "2026-03-30T11:58:00Z"
+        },
+        "tone": {
+          "value": "green"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "event-a2",
+      "locale": "en",
+      "kind": "event",
+      "status": "published",
+      "visibility": "public",
+      "slug": "a2",
+      "title": "New member joined",
+      "metadata": {
+        "text": {
+          "value": "Ravi Menon accepted the invitation."
+        },
+        "time": {
+          "value": "2026-03-30T11:00:00Z"
+        },
+        "tone": {
+          "value": "blue"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "event-a3",
+      "locale": "en",
+      "kind": "event",
+      "status": "published",
+      "visibility": "public",
+      "slug": "a3",
+      "title": "Export finished",
+      "metadata": {
+        "text": {
+          "value": "Customers.csv is ready to download."
+        },
+        "time": {
+          "value": "2026-03-29T12:00:00Z"
+        },
+        "tone": {
+          "value": "gray"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "event-a4",
+      "locale": "en",
+      "kind": "event",
+      "status": "published",
+      "visibility": "public",
+      "slug": "a4",
+      "title": "Payment failed",
+      "metadata": {
+        "text": {
+          "value": "The card ending 4242 was declined."
+        },
+        "time": {
+          "value": "2026-03-28T12:00:00Z"
+        },
+        "tone": {
+          "value": "red"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/article.json b/xgen/fixtures/article.json
new file mode 100644
index 0000000..d27f4be
--- /dev/null
+++ b/xgen/fixtures/article.json
@@ -0,0 +1,90 @@
+{
+  "collection": "article",
+  "kind": "section",
+  "entries": [
+    {
+      "id": "section-why",
+      "locale": "en",
+      "kind": "section",
+      "status": "published",
+      "visibility": "public",
+      "slug": "why",
+      "title": "Why start with the data",
+      "metadata": {
+        "text": {
+          "value": "A page that reads one source stays correct when the source changes. Everything else is layout, and layout is cheap to change."
+        },
+        "quote": {
+          "value": ""
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "section-blocks",
+      "locale": "en",
+      "kind": "section",
+      "status": "published",
+      "visibility": "public",
+      "slug": "blocks",
+      "title": "Compose from blocks",
+      "metadata": {
+        "text": {
+          "value": "Each block names its axes and its variants. A page is a list of blocks, so a new page is a few lines of data."
+        },
+        "quote": {
+          "value": "Pages are lists, not copies."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "section-check",
+      "locale": "en",
+      "kind": "section",
+      "status": "published",
+      "visibility": "public",
+      "slug": "check",
+      "title": "Check what you ship",
+      "metadata": {
+        "text": {
+          "value": "Checks read the same specs as the generator, so a page cannot drift from its source without failing the build."
+        },
+        "quote": {
+          "value": ""
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "section-next",
+      "locale": "en",
+      "kind": "section",
+      "status": "published",
+      "visibility": "public",
+      "slug": "next",
+      "title": "Where to go next",
+      "metadata": {
+        "text": {
+          "value": "Open the gallery, pick a variant and put it on a page. The guides cover themes, data and deployment."
+        },
+        "quote": {
+          "value": ""
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/beforeafter.json b/xgen/fixtures/beforeafter.json
new file mode 100644
index 0000000..832e113
--- /dev/null
+++ b/xgen/fixtures/beforeafter.json
@@ -0,0 +1,90 @@
+{
+  "collection": "beforeafter",
+  "kind": "point",
+  "entries": [
+    {
+      "id": "point-setup",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "setup",
+      "title": "Setup",
+      "metadata": {
+        "before": {
+          "value": "Weeks of wiring"
+        },
+        "after": {
+          "value": "One command"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "point-pages",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "pages",
+      "title": "Pages",
+      "metadata": {
+        "before": {
+          "value": "Copied by hand"
+        },
+        "after": {
+          "value": "Composed from blocks"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "point-themes",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "themes",
+      "title": "Themes",
+      "metadata": {
+        "before": {
+          "value": "Colors set one by one"
+        },
+        "after": {
+          "value": "Tokens shared by every block"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "point-checks",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "checks",
+      "title": "Checks",
+      "metadata": {
+        "before": {
+          "value": "Review by eye"
+        },
+        "after": {
+          "value": "Automatic on every build"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/bento.json b/xgen/fixtures/bento.json
new file mode 100644
index 0000000..8c454cf
--- /dev/null
+++ b/xgen/fixtures/bento.json
@@ -0,0 +1,174 @@
+{
+  "collection": "bento",
+  "kind": "tile",
+  "entries": [
+    {
+      "id": "tile-speed",
+      "locale": "en",
+      "kind": "tile",
+      "status": "published",
+      "visibility": "public",
+      "slug": "speed",
+      "title": "Fast by default",
+      "metadata": {
+        "text": {
+          "value": "Pages ship little script and load in under a second."
+        },
+        "icon": {
+          "value": "zap"
+        },
+        "size": {
+          "value": "large"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "tile-blocks",
+      "locale": "en",
+      "kind": "tile",
+      "status": "published",
+      "visibility": "public",
+      "slug": "blocks",
+      "title": "Ready blocks",
+      "metadata": {
+        "text": {
+          "value": "Compose a page from tested blocks and variants."
+        },
+        "icon": {
+          "value": "layout-grid"
+        },
+        "size": {
+          "value": "wide"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "tile-access",
+      "locale": "en",
+      "kind": "tile",
+      "status": "published",
+      "visibility": "public",
+      "slug": "access",
+      "title": "Accessible",
+      "metadata": {
+        "text": {
+          "value": "Landmarks, labels and focus order are checked."
+        },
+        "icon": {
+          "value": "accessibility"
+        },
+        "size": {
+          "value": "small"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "tile-themes",
+      "locale": "en",
+      "kind": "tile",
+      "status": "published",
+      "visibility": "public",
+      "slug": "themes",
+      "title": "Light and dark",
+      "metadata": {
+        "text": {
+          "value": "Every block follows the theme tokens."
+        },
+        "icon": {
+          "value": "moon"
+        },
+        "size": {
+          "value": "small"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "tile-data",
+      "locale": "en",
+      "kind": "tile",
+      "status": "published",
+      "visibility": "public",
+      "slug": "data",
+      "title": "One source of data",
+      "metadata": {
+        "text": {
+          "value": "Pages read collections, never copies."
+        },
+        "icon": {
+          "value": "database"
+        },
+        "size": {
+          "value": "wide"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    },
+    {
+      "id": "tile-secure",
+      "locale": "en",
+      "kind": "tile",
+      "status": "published",
+      "visibility": "public",
+      "slug": "secure",
+      "title": "Private by default",
+      "metadata": {
+        "text": {
+          "value": "Your data stays in your collections."
+        },
+        "icon": {
+          "value": "lock"
+        },
+        "size": {
+          "value": "small"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "tile-export",
+      "locale": "en",
+      "kind": "tile",
+      "status": "published",
+      "visibility": "public",
+      "slug": "export",
+      "title": "Export anywhere",
+      "metadata": {
+        "text": {
+          "value": "Take pages and data with you."
+        },
+        "icon": {
+          "value": "download"
+        },
+        "size": {
+          "value": "small"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/cards.json b/xgen/fixtures/cards.json
new file mode 100644
index 0000000..fea3099
--- /dev/null
+++ b/xgen/fixtures/cards.json
@@ -0,0 +1,150 @@
+{
+  "collection": "cards",
+  "kind": "card",
+  "entries": [
+    {
+      "id": "card-c1",
+      "locale": "en",
+      "kind": "card",
+      "status": "published",
+      "visibility": "public",
+      "slug": "c1",
+      "title": "Write the launch post",
+      "metadata": {
+        "lane": {
+          "value": "todo"
+        },
+        "tag": {
+          "value": "Content"
+        },
+        "who": {
+          "value": "Mara Quinn"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "card-c2",
+      "locale": "en",
+      "kind": "card",
+      "status": "published",
+      "visibility": "public",
+      "slug": "c2",
+      "title": "Review pricing copy",
+      "metadata": {
+        "lane": {
+          "value": "todo"
+        },
+        "tag": {
+          "value": "Growth"
+        },
+        "who": {
+          "value": "Jon Ellis"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "card-c3",
+      "locale": "en",
+      "kind": "card",
+      "status": "published",
+      "visibility": "public",
+      "slug": "c3",
+      "title": "Build the signup flow",
+      "metadata": {
+        "lane": {
+          "value": "doing"
+        },
+        "tag": {
+          "value": "Product"
+        },
+        "who": {
+          "value": "Aya Tanaka"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "card-c4",
+      "locale": "en",
+      "kind": "card",
+      "status": "published",
+      "visibility": "public",
+      "slug": "c4",
+      "title": "Fix the cart total",
+      "metadata": {
+        "lane": {
+          "value": "doing"
+        },
+        "tag": {
+          "value": "Bug"
+        },
+        "who": {
+          "value": "Luis Ortega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "card-c5",
+      "locale": "en",
+      "kind": "card",
+      "status": "published",
+      "visibility": "public",
+      "slug": "c5",
+      "title": "Publish the docs",
+      "metadata": {
+        "lane": {
+          "value": "done"
+        },
+        "tag": {
+          "value": "Docs"
+        },
+        "who": {
+          "value": "Mara Quinn"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    },
+    {
+      "id": "card-c6",
+      "locale": "en",
+      "kind": "card",
+      "status": "published",
+      "visibility": "public",
+      "slug": "c6",
+      "title": "Ship dark mode",
+      "metadata": {
+        "lane": {
+          "value": "done"
+        },
+        "tag": {
+          "value": "Design"
+        },
+        "who": {
+          "value": "Aya Tanaka"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-11T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/cart.json b/xgen/fixtures/cart.json
new file mode 100644
index 0000000..5dc9b35
--- /dev/null
+++ b/xgen/fixtures/cart.json
@@ -0,0 +1,87 @@
+{
+  "collection": "cart",
+  "kind": "cartline",
+  "entries": [
+    {
+      "id": "cartline-lamp",
+      "locale": "en",
+      "kind": "cartline",
+      "status": "published",
+      "visibility": "public",
+      "slug": "lamp",
+      "title": "Arc desk lamp",
+      "metadata": {
+        "variant": {
+          "value": "Brass"
+        },
+        "price": {
+          "value": 8900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "qty": {
+          "value": 1
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "cartline-bag",
+      "locale": "en",
+      "kind": "cartline",
+      "status": "published",
+      "visibility": "public",
+      "slug": "bag",
+      "title": "Field backpack",
+      "metadata": {
+        "variant": {
+          "value": "Olive"
+        },
+        "price": {
+          "value": 12900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "qty": {
+          "value": 1
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "cartline-mat",
+      "locale": "en",
+      "kind": "cartline",
+      "status": "published",
+      "visibility": "public",
+      "slug": "mat",
+      "title": "Desk mat",
+      "metadata": {
+        "variant": {
+          "value": "Charcoal"
+        },
+        "price": {
+          "value": 3500
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "qty": {
+          "value": 2
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/categories.json b/xgen/fixtures/categories.json
new file mode 100644
index 0000000..68201dd
--- /dev/null
+++ b/xgen/fixtures/categories.json
@@ -0,0 +1,150 @@
+{
+  "collection": "categories",
+  "kind": "menu_item",
+  "entries": [
+    {
+      "id": "category-all",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "all",
+      "title": "All products",
+      "metadata": {
+        "location": {
+          "value": "categories"
+        },
+        "icon": {
+          "value": "layout-grid"
+        },
+        "count": {
+          "value": 48
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "category-desk",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "desk",
+      "title": "Desk",
+      "metadata": {
+        "location": {
+          "value": "categories"
+        },
+        "icon": {
+          "value": "lamp-desk"
+        },
+        "count": {
+          "value": 12
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "category-bags",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "bags",
+      "title": "Bags",
+      "metadata": {
+        "location": {
+          "value": "categories"
+        },
+        "icon": {
+          "value": "briefcase"
+        },
+        "count": {
+          "value": 9
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "category-audio",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "audio",
+      "title": "Audio",
+      "metadata": {
+        "location": {
+          "value": "categories"
+        },
+        "icon": {
+          "value": "headphones"
+        },
+        "count": {
+          "value": 11
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "category-light",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "light",
+      "title": "Lighting",
+      "metadata": {
+        "location": {
+          "value": "categories"
+        },
+        "icon": {
+          "value": "lightbulb"
+        },
+        "count": {
+          "value": 7
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    },
+    {
+      "id": "category-gifts",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "gifts",
+      "title": "Gifts",
+      "metadata": {
+        "location": {
+          "value": "categories"
+        },
+        "icon": {
+          "value": "gift"
+        },
+        "count": {
+          "value": 9
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-11T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/channels.json b/xgen/fixtures/channels.json
new file mode 100644
index 0000000..941799f
--- /dev/null
+++ b/xgen/fixtures/channels.json
@@ -0,0 +1,69 @@
+{
+  "collection": "channels",
+  "kind": "channel",
+  "entries": [
+    {
+      "id": "channel-email",
+      "locale": "en",
+      "kind": "channel",
+      "status": "published",
+      "visibility": "public",
+      "slug": "email",
+      "title": "Email us",
+      "metadata": {
+        "text": {
+          "value": "Answers within one working day."
+        },
+        "icon": {
+          "value": "mail"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "channel-chat",
+      "locale": "en",
+      "kind": "channel",
+      "status": "published",
+      "visibility": "public",
+      "slug": "chat",
+      "title": "Live chat",
+      "metadata": {
+        "text": {
+          "value": "Talk to a person, weekdays 9 to 18."
+        },
+        "icon": {
+          "value": "message-circle"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "channel-docs",
+      "locale": "en",
+      "kind": "channel",
+      "status": "published",
+      "visibility": "public",
+      "slug": "docs",
+      "title": "Read the docs",
+      "metadata": {
+        "text": {
+          "value": "Guides and examples for every block."
+        },
+        "icon": {
+          "value": "book-open"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/chapters.json b/xgen/fixtures/chapters.json
new file mode 100644
index 0000000..d815251
--- /dev/null
+++ b/xgen/fixtures/chapters.json
@@ -0,0 +1,60 @@
+{
+  "collection": "chapters",
+  "kind": "chapter",
+  "entries": [
+    {
+      "id": "chapter-intro",
+      "locale": "en",
+      "kind": "chapter",
+      "status": "published",
+      "visibility": "public",
+      "slug": "intro",
+      "title": "Welcome",
+      "metadata": {
+        "text": {
+          "value": "0:00"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-01T10:00:00Z",
+      "published_at": "2026-03-01T11:00:00Z"
+    },
+    {
+      "id": "chapter-blocks",
+      "locale": "en",
+      "kind": "chapter",
+      "status": "published",
+      "visibility": "public",
+      "slug": "blocks",
+      "title": "Add a block",
+      "metadata": {
+        "text": {
+          "value": "1:10"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-02T10:00:00Z",
+      "published_at": "2026-03-02T11:00:00Z"
+    },
+    {
+      "id": "chapter-publish",
+      "locale": "en",
+      "kind": "chapter",
+      "status": "published",
+      "visibility": "public",
+      "slug": "publish",
+      "title": "Publish the page",
+      "metadata": {
+        "text": {
+          "value": "3:45"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-03T10:00:00Z",
+      "published_at": "2026-03-03T11:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/checklist.json b/xgen/fixtures/checklist.json
new file mode 100644
index 0000000..e53072a
--- /dev/null
+++ b/xgen/fixtures/checklist.json
@@ -0,0 +1,111 @@
+{
+  "collection": "checklist",
+  "kind": "task",
+  "entries": [
+    {
+      "id": "task-profile",
+      "locale": "en",
+      "kind": "task",
+      "status": "published",
+      "visibility": "public",
+      "slug": "profile",
+      "title": "Complete your profile",
+      "metadata": {
+        "text": {
+          "value": "Add a name and a picture."
+        },
+        "done": {
+          "value": true
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "task-invite",
+      "locale": "en",
+      "kind": "task",
+      "status": "published",
+      "visibility": "public",
+      "slug": "invite",
+      "title": "Invite your team",
+      "metadata": {
+        "text": {
+          "value": "Teammates get access to every page."
+        },
+        "done": {
+          "value": true
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "task-connect",
+      "locale": "en",
+      "kind": "task",
+      "status": "published",
+      "visibility": "public",
+      "slug": "connect",
+      "title": "Connect your data",
+      "metadata": {
+        "text": {
+          "value": "Link a collection or upload a file."
+        },
+        "done": {
+          "value": false
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "task-publish",
+      "locale": "en",
+      "kind": "task",
+      "status": "published",
+      "visibility": "public",
+      "slug": "publish",
+      "title": "Publish your first page",
+      "metadata": {
+        "text": {
+          "value": "Pick a block and press publish."
+        },
+        "done": {
+          "value": false
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "task-domain",
+      "locale": "en",
+      "kind": "task",
+      "status": "published",
+      "visibility": "public",
+      "slug": "domain",
+      "title": "Add a custom domain",
+      "metadata": {
+        "text": {
+          "value": "Point your own address at the site."
+        },
+        "done": {
+          "value": false
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/community.json b/xgen/fixtures/community.json
new file mode 100644
index 0000000..37e7851
--- /dev/null
+++ b/xgen/fixtures/community.json
@@ -0,0 +1,69 @@
+{
+  "collection": "community",
+  "kind": "channel",
+  "entries": [
+    {
+      "id": "channel-forum",
+      "locale": "en",
+      "kind": "channel",
+      "status": "published",
+      "visibility": "public",
+      "slug": "forum",
+      "title": "Community forum",
+      "metadata": {
+        "text": {
+          "value": "Ask and answer questions"
+        },
+        "icon": {
+          "value": "users"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "channel-videos",
+      "locale": "en",
+      "kind": "channel",
+      "status": "published",
+      "visibility": "public",
+      "slug": "videos",
+      "title": "Video lessons",
+      "metadata": {
+        "text": {
+          "value": "Short walkthroughs every week"
+        },
+        "icon": {
+          "value": "video"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "community-channel-chat",
+      "locale": "en",
+      "kind": "channel",
+      "status": "published",
+      "visibility": "public",
+      "slug": "community-channel-chat",
+      "title": "Group chat",
+      "metadata": {
+        "text": {
+          "value": "Talk with other builders"
+        },
+        "icon": {
+          "value": "messages-square"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/compare.json b/xgen/fixtures/compare.json
new file mode 100644
index 0000000..f8b7982
--- /dev/null
+++ b/xgen/fixtures/compare.json
@@ -0,0 +1,126 @@
+{
+  "collection": "compare",
+  "kind": "row",
+  "entries": [
+    {
+      "id": "row-seats",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "seats",
+      "title": "Team seats",
+      "metadata": {
+        "a": {
+          "value": "1"
+        },
+        "b": {
+          "value": "10"
+        },
+        "c": {
+          "value": "Unlimited"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "row-storage",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "storage",
+      "title": "Storage",
+      "metadata": {
+        "a": {
+          "value": "1 GB"
+        },
+        "b": {
+          "value": "50 GB"
+        },
+        "c": {
+          "value": "1 TB"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "row-sso",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "sso",
+      "title": "Single sign-on",
+      "metadata": {
+        "a": {
+          "value": "no"
+        },
+        "b": {
+          "value": "no"
+        },
+        "c": {
+          "value": "yes"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "row-support",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "support",
+      "title": "Priority support",
+      "metadata": {
+        "a": {
+          "value": "no"
+        },
+        "b": {
+          "value": "yes"
+        },
+        "c": {
+          "value": "yes"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "row-export",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "export",
+      "title": "Data export",
+      "metadata": {
+        "a": {
+          "value": "yes"
+        },
+        "b": {
+          "value": "yes"
+        },
+        "c": {
+          "value": "yes"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/contacts.json b/xgen/fixtures/contacts.json
new file mode 100644
index 0000000..428e3be
--- /dev/null
+++ b/xgen/fixtures/contacts.json
@@ -0,0 +1,90 @@
+{
+  "collection": "contacts",
+  "kind": "contact",
+  "entries": [
+    {
+      "id": "contact-email",
+      "locale": "en",
+      "kind": "contact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "email",
+      "title": "Email",
+      "metadata": {
+        "text": {
+          "value": "hello@northwind.example"
+        },
+        "icon": {
+          "value": "mail"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "contact-phone",
+      "locale": "en",
+      "kind": "contact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "phone",
+      "title": "Phone",
+      "metadata": {
+        "text": {
+          "value": "+1 555 0100"
+        },
+        "icon": {
+          "value": "phone"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "contact-office",
+      "locale": "en",
+      "kind": "contact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "office",
+      "title": "Office",
+      "metadata": {
+        "text": {
+          "value": "12 Harbor Street, Portland"
+        },
+        "icon": {
+          "value": "map-pin"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "contact-web",
+      "locale": "en",
+      "kind": "contact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "web",
+      "title": "Website",
+      "metadata": {
+        "text": {
+          "value": "northwind.example"
+        },
+        "icon": {
+          "value": "globe"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/credits.json b/xgen/fixtures/credits.json
new file mode 100644
index 0000000..36068c5
--- /dev/null
+++ b/xgen/fixtures/credits.json
@@ -0,0 +1,114 @@
+{
+  "collection": "credits",
+  "kind": "pack",
+  "entries": [
+    {
+      "id": "pack-s",
+      "locale": "en",
+      "kind": "pack",
+      "status": "published",
+      "visibility": "public",
+      "slug": "s",
+      "title": "100 credits",
+      "metadata": {
+        "credits": {
+          "value": 100
+        },
+        "price": {
+          "value": 900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "badge": {
+          "value": ""
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "pack-m",
+      "locale": "en",
+      "kind": "pack",
+      "status": "published",
+      "visibility": "public",
+      "slug": "m",
+      "title": "500 credits",
+      "metadata": {
+        "credits": {
+          "value": 500
+        },
+        "price": {
+          "value": 3900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "badge": {
+          "value": "popular"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "pack-l",
+      "locale": "en",
+      "kind": "pack",
+      "status": "published",
+      "visibility": "public",
+      "slug": "l",
+      "title": "2,000 credits",
+      "metadata": {
+        "credits": {
+          "value": 2000
+        },
+        "price": {
+          "value": 12900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "badge": {
+          "value": "best"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "pack-xl",
+      "locale": "en",
+      "kind": "pack",
+      "status": "published",
+      "visibility": "public",
+      "slug": "xl",
+      "title": "10,000 credits",
+      "metadata": {
+        "credits": {
+          "value": 10000
+        },
+        "price": {
+          "value": 54900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "badge": {
+          "value": ""
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/crumbs.json b/xgen/fixtures/crumbs.json
new file mode 100644
index 0000000..0ccd31d
--- /dev/null
+++ b/xgen/fixtures/crumbs.json
@@ -0,0 +1,62 @@
+{
+  "collection": "crumbs",
+  "kind": "page",
+  "entries": [
+    {
+      "id": "page-home",
+      "locale": "en",
+      "kind": "page",
+      "status": "published",
+      "visibility": "public",
+      "slug": "home",
+      "title": "Home",
+      "metadata": {
+        "icon": {
+          "value": "house"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "page-shop",
+      "locale": "en",
+      "kind": "page",
+      "status": "published",
+      "visibility": "public",
+      "slug": "shop",
+      "title": "Shop",
+      "parent_id": "page-home",
+      "metadata": {
+        "icon": {
+          "value": "store"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "page-catalog",
+      "locale": "en",
+      "kind": "page",
+      "status": "published",
+      "visibility": "public",
+      "slug": "catalog",
+      "title": "Catalog",
+      "parent_id": "page-shop",
+      "metadata": {
+        "icon": {
+          "value": "layers"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/days.json b/xgen/fixtures/days.json
new file mode 100644
index 0000000..96a92e6
--- /dev/null
+++ b/xgen/fixtures/days.json
@@ -0,0 +1,69 @@
+{
+  "collection": "days",
+  "kind": "day",
+  "entries": [
+    {
+      "id": "day-today",
+      "locale": "en",
+      "kind": "day",
+      "status": "published",
+      "visibility": "public",
+      "slug": "today",
+      "title": "Today, 8 October",
+      "metadata": {
+        "note": {
+          "value": "2 windows left"
+        },
+        "slots": {
+          "value": [
+            "18:00 to 20:00",
+            "20:00 to 22:00"
+          ]
+        },
+        "closed": {
+          "value": [
+            "10:00 to 12:00",
+            "12:00 to 14:00",
+            "14:00 to 16:00",
+            "16:00 to 18:00"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "day-tomorrow",
+      "locale": "en",
+      "kind": "day",
+      "status": "published",
+      "visibility": "public",
+      "slug": "tomorrow",
+      "title": "Tomorrow, 9 October",
+      "metadata": {
+        "note": {
+          "value": "6 windows"
+        },
+        "slots": {
+          "value": [
+            "10:00 to 12:00",
+            "12:00 to 14:00",
+            "14:00 to 16:00",
+            "16:00 to 18:00",
+            "18:00 to 20:00",
+            "20:00 to 22:00"
+          ]
+        },
+        "closed": {
+          "value": []
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/deckfaq.json b/xgen/fixtures/deckfaq.json
new file mode 100644
index 0000000..3e0b806
--- /dev/null
+++ b/xgen/fixtures/deckfaq.json
@@ -0,0 +1,126 @@
+{
+  "collection": "deckfaq",
+  "kind": "deck_faq",
+  "entries": [
+    {
+      "id": "deck-51-faq-1",
+      "locale": "en",
+      "kind": "deck_faq",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-faq-1",
+      "title": "How do I create an account?",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 1
+        },
+        "answer": {
+          "value": "Sign up with your email and confirm it in a minute."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-faq-2",
+      "locale": "en",
+      "kind": "deck_faq",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-faq-2",
+      "title": "Is my money and personal data secure?",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 2
+        },
+        "answer": {
+          "value": "Yes. Everything is encrypted and monitored around the clock."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-faq-3",
+      "locale": "en",
+      "kind": "deck_faq",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-faq-3",
+      "title": "How long do transfers take?",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 3
+        },
+        "answer": {
+          "value": "Most transfers arrive within seconds."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-faq-4",
+      "locale": "en",
+      "kind": "deck_faq",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-faq-4",
+      "title": "Can I send money internationally?",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 4
+        },
+        "answer": {
+          "value": "Yes, to more than 150 countries."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-faq-5",
+      "locale": "en",
+      "kind": "deck_faq",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-faq-5",
+      "title": "What payment methods do you support?",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 5
+        },
+        "answer": {
+          "value": "Cards, bank transfers and wallets."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/deckitems.json b/xgen/fixtures/deckitems.json
new file mode 100644
index 0000000..3d8e7d5
--- /dev/null
+++ b/xgen/fixtures/deckitems.json
@@ -0,0 +1,3990 @@
+{
+  "collection": "deckitems",
+  "kind": "deck_item",
+  "entries": [
+    {
+      "id": "deck-01-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-01-item-1",
+      "title": "Plan",
+      "metadata": {
+        "deck": {
+          "value": "deck-01"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Map the moments that matter."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-01-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-01-item-2",
+      "title": "Shape",
+      "metadata": {
+        "deck": {
+          "value": "deck-01"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Turn sketches into parts."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-01-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-01-item-3",
+      "title": "Ship",
+      "metadata": {
+        "deck": {
+          "value": "deck-01"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Release in small, sure steps."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-02-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-02-item-1",
+      "title": "Focus",
+      "metadata": {
+        "deck": {
+          "value": "deck-02"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "One screen for one task."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-02-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-02-item-2",
+      "title": "Flow",
+      "metadata": {
+        "deck": {
+          "value": "deck-02"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Hand work over without friction."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-02-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-02-item-3",
+      "title": "Finish",
+      "metadata": {
+        "deck": {
+          "value": "deck-02"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Close loops, not tabs."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-03-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-03-item-1",
+      "title": "Collect",
+      "metadata": {
+        "deck": {
+          "value": "deck-03"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Catch every thought."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-03-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-03-item-2",
+      "title": "Connect",
+      "metadata": {
+        "deck": {
+          "value": "deck-03"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Link what belongs together."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-03-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-03-item-3",
+      "title": "Grow",
+      "metadata": {
+        "deck": {
+          "value": "deck-03"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Let good ideas compound."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-04-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-04-item-1",
+      "title": "Sketch",
+      "metadata": {
+        "deck": {
+          "value": "deck-04"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Start from a blank grid."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-04-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-04-item-2",
+      "title": "Assemble",
+      "metadata": {
+        "deck": {
+          "value": "deck-04"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Snap parts into place."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-04-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-04-item-3",
+      "title": "Launch",
+      "metadata": {
+        "deck": {
+          "value": "deck-04"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Share a link in seconds."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-05-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-05-item-1",
+      "title": "Material",
+      "metadata": {
+        "deck": {
+          "value": "deck-05"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Chosen to age well."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-05-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-05-item-2",
+      "title": "Hand",
+      "metadata": {
+        "deck": {
+          "value": "deck-05"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Finished by a person."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-05-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-05-item-3",
+      "title": "Care",
+      "metadata": {
+        "deck": {
+          "value": "deck-05"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Repaired for life."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-06-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-06-item-1",
+      "title": "Watch",
+      "metadata": {
+        "deck": {
+          "value": "deck-06"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "See changes as they land."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-06-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-06-item-2",
+      "title": "Alert",
+      "metadata": {
+        "deck": {
+          "value": "deck-06"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Know before others ask."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-06-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-06-item-3",
+      "title": "Explain",
+      "metadata": {
+        "deck": {
+          "value": "deck-06"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Find the why in a click."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-07-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-07-item-1",
+      "title": "Sow",
+      "metadata": {
+        "deck": {
+          "value": "deck-07"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Know when to start."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-07-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-07-item-2",
+      "title": "Tend",
+      "metadata": {
+        "deck": {
+          "value": "deck-07"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Water with a plan."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-07-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-07-item-3",
+      "title": "Harvest",
+      "metadata": {
+        "deck": {
+          "value": "deck-07"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Pick at the peak."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-08-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-08-item-1",
+      "title": "Measure",
+      "metadata": {
+        "deck": {
+          "value": "deck-08"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Pick the numbers that matter."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-08-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-08-item-2",
+      "title": "Share",
+      "metadata": {
+        "deck": {
+          "value": "deck-08"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Send one link, not ten files."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-08-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-08-item-3",
+      "title": "Decide",
+      "metadata": {
+        "deck": {
+          "value": "deck-08"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Agree on what the data says."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-09-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-09-item-1",
+      "title": "Private",
+      "metadata": {
+        "deck": {
+          "value": "deck-09"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Only you hold the keys."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-09-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-09-item-2",
+      "title": "Simple",
+      "metadata": {
+        "deck": {
+          "value": "deck-09"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Share with a single tap."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-09-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-09-item-3",
+      "title": "Lasting",
+      "metadata": {
+        "deck": {
+          "value": "deck-09"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Files outlive formats."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-10-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-10-item-1",
+      "title": "Meet",
+      "metadata": {
+        "deck": {
+          "value": "deck-10"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Find people near you."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-10-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-10-item-2",
+      "title": "Plan",
+      "metadata": {
+        "deck": {
+          "value": "deck-10"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Pick a time that works."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-10-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-10-item-3",
+      "title": "Show up",
+      "metadata": {
+        "deck": {
+          "value": "deck-10"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Small groups, real faces."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-11-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-11-item-1",
+      "title": "Clear",
+      "metadata": {
+        "deck": {
+          "value": "deck-11"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Every action in reach."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-11-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-11-item-2",
+      "title": "Quick",
+      "metadata": {
+        "deck": {
+          "value": "deck-11"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Keyboard first, mouse friendly."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-11-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-11-item-3",
+      "title": "Quiet",
+      "metadata": {
+        "deck": {
+          "value": "deck-11"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "No noise, no nags."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-12-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-12-item-1",
+      "title": "Pair",
+      "metadata": {
+        "deck": {
+          "value": "deck-12"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Plan side by side."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-12-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-12-item-2",
+      "title": "Note",
+      "metadata": {
+        "deck": {
+          "value": "deck-12"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Leave short, clear trails."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-12-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-12-item-3",
+      "title": "Sync",
+      "metadata": {
+        "deck": {
+          "value": "deck-12"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Meet less, align more."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-13-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-13-item-1",
+      "title": "Steady",
+      "metadata": {
+        "deck": {
+          "value": "deck-13"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Boring in the best way."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-13-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-13-item-2",
+      "title": "Scaled",
+      "metadata": {
+        "deck": {
+          "value": "deck-13"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Grows when you do."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-13-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-13-item-3",
+      "title": "Visible",
+      "metadata": {
+        "deck": {
+          "value": "deck-13"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Every request on record."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-14-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-14-item-1",
+      "title": "Mix",
+      "metadata": {
+        "deck": {
+          "value": "deck-14"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Blend colours by feel."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-14-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-14-item-2",
+      "title": "Match",
+      "metadata": {
+        "deck": {
+          "value": "deck-14"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Find pairs that sing."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-14-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-14-item-3",
+      "title": "Make",
+      "metadata": {
+        "deck": {
+          "value": "deck-14"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Export to any tool."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-15-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-15-item-1",
+      "title": "Draw",
+      "metadata": {
+        "deck": {
+          "value": "deck-15"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Lines that land where meant."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-15-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-15-item-2",
+      "title": "Snap",
+      "metadata": {
+        "deck": {
+          "value": "deck-15"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "A grid that helps, never fights."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-15-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-15-item-3",
+      "title": "Export",
+      "metadata": {
+        "deck": {
+          "value": "deck-15"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Clean files every time."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-16-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-16-item-1",
+      "title": "Listen",
+      "metadata": {
+        "deck": {
+          "value": "deck-16"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Hear the real problem."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-16-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-16-item-2",
+      "title": "Make",
+      "metadata": {
+        "deck": {
+          "value": "deck-16"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Prototype early and often."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-16-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-16-item-3",
+      "title": "Care",
+      "metadata": {
+        "deck": {
+          "value": "deck-16"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Stay after launch."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-17-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-17-item-1",
+      "title": "Sync",
+      "metadata": {
+        "deck": {
+          "value": "deck-17"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Changes everywhere in seconds."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-17-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-17-item-2",
+      "title": "Offline",
+      "metadata": {
+        "deck": {
+          "value": "deck-17"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Keep working without signal."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-17-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-17-item-3",
+      "title": "Restore",
+      "metadata": {
+        "deck": {
+          "value": "deck-17"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Go back to any day."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-18-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-18-item-1",
+      "title": "Brief",
+      "metadata": {
+        "deck": {
+          "value": "deck-18"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Agree on the goal first."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-18-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-18-item-2",
+      "title": "Review",
+      "metadata": {
+        "deck": {
+          "value": "deck-18"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Comments that point at pixels."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-18-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-18-item-3",
+      "title": "Deliver",
+      "metadata": {
+        "deck": {
+          "value": "deck-18"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Final files, no hunting."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-19-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-19-item-1",
+      "title": "Batch",
+      "metadata": {
+        "deck": {
+          "value": "deck-19"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Updates arrive together."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-19-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-19-item-2",
+      "title": "Focus",
+      "metadata": {
+        "deck": {
+          "value": "deck-19"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Deep work by default."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-19-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-19-item-3",
+      "title": "Review",
+      "metadata": {
+        "deck": {
+          "value": "deck-19"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Catch up in minutes."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-20-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-20-item-1",
+      "title": "Split",
+      "metadata": {
+        "deck": {
+          "value": "deck-20"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Fork an idea in one move."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-20-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-20-item-2",
+      "title": "Compare",
+      "metadata": {
+        "deck": {
+          "value": "deck-20"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Place versions side by side."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-20-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-20-item-3",
+      "title": "Choose",
+      "metadata": {
+        "deck": {
+          "value": "deck-20"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Keep the best, archive the rest."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-21-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-21-item-1",
+      "title": "Outline",
+      "metadata": {
+        "deck": {
+          "value": "deck-21"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Structure before sentences."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-21-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-21-item-2",
+      "title": "Cite",
+      "metadata": {
+        "deck": {
+          "value": "deck-21"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "References that stay linked."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-21-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-21-item-3",
+      "title": "Export",
+      "metadata": {
+        "deck": {
+          "value": "deck-21"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Print ready in one step."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-22-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-22-item-1",
+      "title": "Pick",
+      "metadata": {
+        "deck": {
+          "value": "deck-22"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Choose by mood and time."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-22-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-22-item-2",
+      "title": "Shop",
+      "metadata": {
+        "deck": {
+          "value": "deck-22"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "A list sorted by aisle."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-22-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-22-item-3",
+      "title": "Cook",
+      "metadata": {
+        "deck": {
+          "value": "deck-22"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Steps that fit on one screen."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-23-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-23-item-1",
+      "title": "One",
+      "metadata": {
+        "deck": {
+          "value": "deck-23"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "A single clear job."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-23-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-23-item-2",
+      "title": "Done",
+      "metadata": {
+        "deck": {
+          "value": "deck-23"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Finished, not sprawling."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-23-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-23-item-3",
+      "title": "Kept",
+      "metadata": {
+        "deck": {
+          "value": "deck-23"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Maintained for years."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-24-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-24-item-1",
+      "title": "Route",
+      "metadata": {
+        "deck": {
+          "value": "deck-24"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "The best way, not the fastest."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-24-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-24-item-2",
+      "title": "Share",
+      "metadata": {
+        "deck": {
+          "value": "deck-24"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Seats for friends and neighbours."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-24-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-24-item-3",
+      "title": "Arrive",
+      "metadata": {
+        "deck": {
+          "value": "deck-24"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Live updates for everyone."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-25-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-25-item-1",
+      "title": "Write",
+      "metadata": {
+        "deck": {
+          "value": "deck-25"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Draft in a quiet room."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-25-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-25-item-2",
+      "title": "Publish",
+      "metadata": {
+        "deck": {
+          "value": "deck-25"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Every channel in one click."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-25-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-25-item-3",
+      "title": "Grow",
+      "metadata": {
+        "deck": {
+          "value": "deck-25"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Readers who stay."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-26-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-26-item-1",
+      "title": "Desk",
+      "metadata": {
+        "deck": {
+          "value": "deck-26"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "A place that is yours."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-26-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-26-item-2",
+      "title": "Studio",
+      "metadata": {
+        "deck": {
+          "value": "deck-26"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Doors that close."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-26-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-26-item-3",
+      "title": "Commons",
+      "metadata": {
+        "deck": {
+          "value": "deck-26"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Coffee and good company."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-27-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-27-item-1",
+      "title": "Cache",
+      "metadata": {
+        "deck": {
+          "value": "deck-27"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Close to every visitor."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-27-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-27-item-2",
+      "title": "Trim",
+      "metadata": {
+        "deck": {
+          "value": "deck-27"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Ship only what is used."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-27-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-27-item-3",
+      "title": "Watch",
+      "metadata": {
+        "deck": {
+          "value": "deck-27"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Speed tracked per page."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-28-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-28-item-1",
+      "title": "Explore",
+      "metadata": {
+        "deck": {
+          "value": "deck-28"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Try before you commit."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-28-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-28-item-2",
+      "title": "Learn",
+      "metadata": {
+        "deck": {
+          "value": "deck-28"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Short lessons, real projects."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-28-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-28-item-3",
+      "title": "Grow",
+      "metadata": {
+        "deck": {
+          "value": "deck-28"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Mentors who have done it."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-29-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-29-item-1",
+      "title": "Gather",
+      "metadata": {
+        "deck": {
+          "value": "deck-29"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Pull in every thread."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-29-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-29-item-2",
+      "title": "Weave",
+      "metadata": {
+        "deck": {
+          "value": "deck-29"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "See how parts connect."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-29-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-29-item-3",
+      "title": "Finish",
+      "metadata": {
+        "deck": {
+          "value": "deck-29"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Tie off loose ends."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-30-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-30-item-1",
+      "title": "Wake",
+      "metadata": {
+        "deck": {
+          "value": "deck-30"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Gentle light at sunrise."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-30-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-30-item-2",
+      "title": "Focus",
+      "metadata": {
+        "deck": {
+          "value": "deck-30"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Cool light for deep work."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-30-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-30-item-3",
+      "title": "Rest",
+      "metadata": {
+        "deck": {
+          "value": "deck-30"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Warm light at night."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-31-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-31-item-1",
+      "title": "Tokens",
+      "metadata": {
+        "deck": {
+          "value": "deck-31"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "One set of decisions."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-31-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-31-item-2",
+      "title": "Parts",
+      "metadata": {
+        "deck": {
+          "value": "deck-31"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Built once, used everywhere."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-31-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-31-item-3",
+      "title": "Rules",
+      "metadata": {
+        "deck": {
+          "value": "deck-31"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Patterns that scale."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-32-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-32-item-1",
+      "title": "Arrive",
+      "metadata": {
+        "deck": {
+          "value": "deck-32"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Settle in, no rush."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-32-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-32-item-2",
+      "title": "Wander",
+      "metadata": {
+        "deck": {
+          "value": "deck-32"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Paths only locals know."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-32-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-32-item-3",
+      "title": "Return",
+      "metadata": {
+        "deck": {
+          "value": "deck-32"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Leave a little changed."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-33-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-33-item-1",
+      "title": "Play",
+      "metadata": {
+        "deck": {
+          "value": "deck-33"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Short sessions, big smiles."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-33-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-33-item-2",
+      "title": "Learn",
+      "metadata": {
+        "deck": {
+          "value": "deck-33"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Ideas hidden in play."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-33-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-33-item-3",
+      "title": "Make",
+      "metadata": {
+        "deck": {
+          "value": "deck-33"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Tools to build your own."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-34-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-34-item-1",
+      "title": "Pause",
+      "metadata": {
+        "deck": {
+          "value": "deck-34"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Ten quiet minutes."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-34-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-34-item-2",
+      "title": "Notice",
+      "metadata": {
+        "deck": {
+          "value": "deck-34"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Feel the day settle."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-34-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-34-item-3",
+      "title": "Return",
+      "metadata": {
+        "deck": {
+          "value": "deck-34"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Back with a clear head."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-35-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-35-item-1",
+      "title": "Invoice",
+      "metadata": {
+        "deck": {
+          "value": "deck-35"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Send and get paid faster."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-35-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-35-item-2",
+      "title": "Track",
+      "metadata": {
+        "deck": {
+          "value": "deck-35"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Every cost in its place."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-35-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-35-item-3",
+      "title": "File",
+      "metadata": {
+        "deck": {
+          "value": "deck-35"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Taxes ready on time."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-36-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-36-item-1",
+      "title": "Write",
+      "metadata": {
+        "deck": {
+          "value": "deck-36"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Docs that stay current."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-36-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-36-item-2",
+      "title": "Plan",
+      "metadata": {
+        "deck": {
+          "value": "deck-36"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Goals everyone can see."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-36-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-36-item-3",
+      "title": "Decide",
+      "metadata": {
+        "deck": {
+          "value": "deck-36"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Choices with context."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-37-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-37-item-1",
+      "title": "Watch",
+      "metadata": {
+        "deck": {
+          "value": "deck-37"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Live cams and charts."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-37-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-37-item-2",
+      "title": "Plan",
+      "metadata": {
+        "deck": {
+          "value": "deck-37"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "The best window this week."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-37-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-37-item-3",
+      "title": "Go",
+      "metadata": {
+        "deck": {
+          "value": "deck-37"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Know before you leave."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-38-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-38-item-1",
+      "title": "Upload",
+      "metadata": {
+        "deck": {
+          "value": "deck-38"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Drop in your work."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-38-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-38-item-2",
+      "title": "Arrange",
+      "metadata": {
+        "deck": {
+          "value": "deck-38"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "A grid that adapts."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-38-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-38-item-3",
+      "title": "Share",
+      "metadata": {
+        "deck": {
+          "value": "deck-38"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "One link to send."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-39-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-39-item-1",
+      "title": "Store",
+      "metadata": {
+        "deck": {
+          "value": "deck-39"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Any shape of data."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-39-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-39-item-2",
+      "title": "Query",
+      "metadata": {
+        "deck": {
+          "value": "deck-39"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Plain and fast."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-39-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-39-item-3",
+      "title": "Scale",
+      "metadata": {
+        "deck": {
+          "value": "deck-39"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Without a migration."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-40-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-40-item-1",
+      "title": "Read",
+      "metadata": {
+        "deck": {
+          "value": "deck-40"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Short and thoughtful."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-40-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-40-item-2",
+      "title": "Think",
+      "metadata": {
+        "deck": {
+          "value": "deck-40"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "One idea per issue."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-40-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-40-item-3",
+      "title": "Reply",
+      "metadata": {
+        "deck": {
+          "value": "deck-40"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Letters get answers."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-41-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-41-item-1",
+      "title": "Free shipping",
+      "metadata": {
+        "deck": {
+          "value": "deck-41"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "On orders over 50"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-41-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-41-item-2",
+      "title": "Quality promise",
+      "metadata": {
+        "deck": {
+          "value": "deck-41"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "30-day return policy"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-41-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-41-item-3",
+      "title": "Secure payments",
+      "metadata": {
+        "deck": {
+          "value": "deck-41"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Fully protected"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-41-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-41-item-4",
+      "title": "Friendly support",
+      "metadata": {
+        "deck": {
+          "value": "deck-41"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "We are here to help"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-42-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-42-item-1",
+      "title": "Wide choice",
+      "metadata": {
+        "deck": {
+          "value": "deck-42"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "From compact to roomy"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-42-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-42-item-2",
+      "title": "Fair prices",
+      "metadata": {
+        "deck": {
+          "value": "deck-42"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Clear rates, no extras"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-42-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-42-item-3",
+      "title": "Safe and secure",
+      "metadata": {
+        "deck": {
+          "value": "deck-42"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Insured on every trip"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-42-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-42-item-4",
+      "title": "Flexible plans",
+      "metadata": {
+        "deck": {
+          "value": "deck-42"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "By the hour, day or week"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-43-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-43-item-1",
+      "title": "Choose",
+      "metadata": {
+        "deck": {
+          "value": "deck-43"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Pick from the daily menu"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-43-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-43-item-2",
+      "title": "Confirm",
+      "metadata": {
+        "deck": {
+          "value": "deck-43"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Review your basket"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-43-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-43-item-3",
+      "title": "Enjoy",
+      "metadata": {
+        "deck": {
+          "value": "deck-43"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Hot at your door"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-43-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-43-item-4",
+      "title": "Rate",
+      "metadata": {
+        "deck": {
+          "value": "deck-43"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "Tell us how it went"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-44-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-44-item-1",
+      "title": "Enter the number",
+      "metadata": {
+        "deck": {
+          "value": "deck-44"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Find it on the dashboard or the door frame."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-44-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-44-item-2",
+      "title": "Run the check",
+      "metadata": {
+        "deck": {
+          "value": "deck-44"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "We compare every public record."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-44-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-44-item-3",
+      "title": "Read the report",
+      "metadata": {
+        "deck": {
+          "value": "deck-44"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Get the full history at once."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-44-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-44-item-4",
+      "title": "Decide",
+      "metadata": {
+        "deck": {
+          "value": "deck-44"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "Buy with confidence."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-45-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-45-item-1",
+      "title": "Buy",
+      "metadata": {
+        "deck": {
+          "value": "deck-45"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Find a place to stay for good"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-45-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-45-item-2",
+      "title": "Rent",
+      "metadata": {
+        "deck": {
+          "value": "deck-45"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Flexible terms, clear costs"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-45-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-45-item-3",
+      "title": "Sell",
+      "metadata": {
+        "deck": {
+          "value": "deck-45"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "A fair price, handled well"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-45-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-45-item-4",
+      "title": "Invest",
+      "metadata": {
+        "deck": {
+          "value": "deck-45"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "Grow with steady returns"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-46-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-46-item-1",
+      "title": "Safe and secure",
+      "metadata": {
+        "deck": {
+          "value": "deck-46"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Certified guides and careful planning"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-46-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-46-item-2",
+      "title": "Expert guides",
+      "metadata": {
+        "deck": {
+          "value": "deck-46"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Local people who know the trail"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-46-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-46-item-3",
+      "title": "Mindful travel",
+      "metadata": {
+        "deck": {
+          "value": "deck-46"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Light on the places we visit"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-46-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-46-item-4",
+      "title": "Made for you",
+      "metadata": {
+        "deck": {
+          "value": "deck-46"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "Trips shaped around your pace"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-47-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-47-item-1",
+      "title": "Free shipping",
+      "metadata": {
+        "deck": {
+          "value": "deck-47"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "On orders over 50"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-47-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-47-item-2",
+      "title": "Easy returns",
+      "metadata": {
+        "deck": {
+          "value": "deck-47"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Hassle-free exchange"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-47-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-47-item-3",
+      "title": "Premium quality",
+      "metadata": {
+        "deck": {
+          "value": "deck-47"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Made to last"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-47-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-47-item-4",
+      "title": "Secure payment",
+      "metadata": {
+        "deck": {
+          "value": "deck-47"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "Safe and protected"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-48-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-48-item-1",
+      "title": "Grand touring",
+      "metadata": {
+        "deck": {
+          "value": "deck-48"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Refined comfort for long journeys"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-48-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-48-item-2",
+      "title": "Executive SUV",
+      "metadata": {
+        "deck": {
+          "value": "deck-48"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Space and presence for every day"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-48-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-48-item-3",
+      "title": "Electric performance",
+      "metadata": {
+        "deck": {
+          "value": "deck-48"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Quiet power for a cleaner tomorrow"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-48-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-48-item-4",
+      "title": "City compact",
+      "metadata": {
+        "deck": {
+          "value": "deck-48"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "Easy to park, easy to love"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-49-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-49-item-1",
+      "title": "Effortless elegance",
+      "metadata": {
+        "deck": {
+          "value": "deck-49"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Everyday styles for a brighter you."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-49-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-49-item-2",
+      "title": "Modern essentials",
+      "metadata": {
+        "deck": {
+          "value": "deck-49"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Premium pieces for every occasion."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-49-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-49-item-3",
+      "title": "Free shipping",
+      "metadata": {
+        "deck": {
+          "value": "deck-49"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "On all orders over 99"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-49-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-49-item-4",
+      "title": "Easy returns",
+      "metadata": {
+        "deck": {
+          "value": "deck-49"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "Hassle-free shopping"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-50-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-50-item-1",
+      "title": "Air one",
+      "metadata": {
+        "deck": {
+          "value": "deck-50"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "$149"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-50-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-50-item-2",
+      "title": "Air two",
+      "metadata": {
+        "deck": {
+          "value": "deck-50"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "$129"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-50-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-50-item-3",
+      "title": "Air three",
+      "metadata": {
+        "deck": {
+          "value": "deck-50"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "$135"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-50-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-50-item-4",
+      "title": "Air four",
+      "metadata": {
+        "deck": {
+          "value": "deck-50"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "$119"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-item-1",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-item-1",
+      "title": "Real-time conversion",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 1
+        },
+        "text": {
+          "value": "Live exchange rates, instantly."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-item-2",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-item-2",
+      "title": "Worldwide users",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 2
+        },
+        "text": {
+          "value": "Join people in every region."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-item-3",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-item-3",
+      "title": "Instant transfers",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 3
+        },
+        "text": {
+          "value": "Real-time payments with zero delay."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-item-4",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-item-4",
+      "title": "Smart wallet",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 4
+        },
+        "text": {
+          "value": "Track every transaction in one place."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-item-5",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-item-5",
+      "title": "Virtual cards",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 5
+        },
+        "text": {
+          "value": "Pay bills securely with a few taps."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-item-6",
+      "locale": "en",
+      "kind": "deck_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-item-6",
+      "title": "Clear insights",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 6
+        },
+        "text": {
+          "value": "See where your money goes."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/deckplans.json b/xgen/fixtures/deckplans.json
new file mode 100644
index 0000000..1822644
--- /dev/null
+++ b/xgen/fixtures/deckplans.json
@@ -0,0 +1,111 @@
+{
+  "collection": "deckplans",
+  "kind": "deck_plan",
+  "entries": [
+    {
+      "id": "deck-51-plan-1",
+      "locale": "en",
+      "kind": "deck_plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-plan-1",
+      "title": "Free plan",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 1
+        },
+        "cost": {
+          "value": "Free"
+        },
+        "note": {
+          "value": "For getting started"
+        },
+        "perks": {
+          "value": [
+            "Personal digital wallet",
+            "Virtual debit card",
+            "Basic spending insights",
+            "Email support"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-plan-2",
+      "locale": "en",
+      "kind": "deck_plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-plan-2",
+      "title": "Professional plan",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 2
+        },
+        "cost": {
+          "value": "$299"
+        },
+        "note": {
+          "value": "For growing teams"
+        },
+        "perks": {
+          "value": [
+            "Everything in Free",
+            "Unlimited transfers",
+            "Priority support",
+            "Team accounts"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-plan-3",
+      "locale": "en",
+      "kind": "deck_plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-plan-3",
+      "title": "Enterprise plan",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 3
+        },
+        "cost": {
+          "value": "$149"
+        },
+        "note": {
+          "value": "For large companies"
+        },
+        "perks": {
+          "value": [
+            "Everything in Professional",
+            "Advanced security controls",
+            "Dedicated manager",
+            "Custom limits"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/deckquotes.json b/xgen/fixtures/deckquotes.json
new file mode 100644
index 0000000..1aa6fed
--- /dev/null
+++ b/xgen/fixtures/deckquotes.json
@@ -0,0 +1,87 @@
+{
+  "collection": "deckquotes",
+  "kind": "deck_quote",
+  "entries": [
+    {
+      "id": "deck-51-quote-1",
+      "locale": "en",
+      "kind": "deck_quote",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-quote-1",
+      "title": "Lian Chen",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 1
+        },
+        "quote": {
+          "value": "Managing my finances has never been easier. The app is fast, secure and gives me complete control."
+        },
+        "role": {
+          "value": "Creative lead"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-quote-2",
+      "locale": "en",
+      "kind": "deck_quote",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-quote-2",
+      "title": "Sophia Martinez",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 2
+        },
+        "quote": {
+          "value": "This platform has completely changed how I manage my money, from transfers to bill payments."
+        },
+        "role": {
+          "value": "Product designer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-quote-3",
+      "locale": "en",
+      "kind": "deck_quote",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-quote-3",
+      "title": "Ethan Brooks",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 3
+        },
+        "quote": {
+          "value": "The virtual cards and spending insights have transformed how we manage business expenses."
+        },
+        "role": {
+          "value": "Marketing director"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/decks.json b/xgen/fixtures/decks.json
new file mode 100644
index 0000000..f4f7189
--- /dev/null
+++ b/xgen/fixtures/decks.json
@@ -0,0 +1,2782 @@
+{
+  "collection": "decks",
+  "kind": "deck",
+  "entries": [
+    {
+      "id": "deck-01",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "fernwick-01",
+      "title": "Fernwick",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Work",
+            "Method",
+            "Notes",
+            "About"
+          ]
+        },
+        "eyebrow": {
+          "value": "New season"
+        },
+        "headline": {
+          "value": "Design moves the world"
+        },
+        "accent": {
+          "value": "one decision at a time"
+        },
+        "lead": {
+          "value": "A calm place to shape ideas into systems that people trust and enjoy."
+        },
+        "cta": {
+          "value": "Start building"
+        },
+        "secondary": {
+          "value": "See how it works"
+        },
+        "input": {
+          "value": "Your email"
+        },
+        "note": {
+          "value": "Free for small teams"
+        },
+        "tags": {
+          "value": [
+            "Calm",
+            "Clear",
+            "Kind"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-02",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "lumaro-02",
+      "title": "Lumaro",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Product",
+            "Teams",
+            "Stories",
+            "Pricing"
+          ]
+        },
+        "eyebrow": {
+          "value": "Now open"
+        },
+        "headline": {
+          "value": "Make the quiet parts loud"
+        },
+        "accent": {
+          "value": "so the rest can breathe"
+        },
+        "lead": {
+          "value": "Tools for teams who care about the details nobody notices until they are gone."
+        },
+        "cta": {
+          "value": "Get started"
+        },
+        "secondary": {
+          "value": "Watch the tour"
+        },
+        "input": {
+          "value": "Work email"
+        },
+        "note": {
+          "value": "No card needed"
+        },
+        "tags": {
+          "value": [
+            "Focus",
+            "Flow",
+            "Finish"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-03",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "corvale-03",
+      "title": "Corvale",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Spaces",
+            "Guides",
+            "Events",
+            "Login"
+          ]
+        },
+        "eyebrow": {
+          "value": "Version 2"
+        },
+        "headline": {
+          "value": "Ideas deserve a better home"
+        },
+        "accent": {
+          "value": "than a folder of drafts"
+        },
+        "lead": {
+          "value": "Collect, connect and grow the thinking of your whole team in one shared space."
+        },
+        "cta": {
+          "value": "Create a space"
+        },
+        "secondary": {
+          "value": "Explore spaces"
+        },
+        "input": {
+          "value": "Search ideas"
+        },
+        "note": {
+          "value": "Takes a minute"
+        },
+        "tags": {
+          "value": [
+            "Notes",
+            "Links",
+            "Maps"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-04",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "northvy-04",
+      "title": "Northvy",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Kit",
+            "Examples",
+            "Docs",
+            "Community"
+          ]
+        },
+        "eyebrow": {
+          "value": "Weekend build"
+        },
+        "headline": {
+          "value": "Build the thing you wish existed"
+        },
+        "accent": {
+          "value": "then share it"
+        },
+        "lead": {
+          "value": "A simple kit for turning a rough idea into a working first version in a weekend."
+        },
+        "cta": {
+          "value": "Start a project"
+        },
+        "secondary": {
+          "value": "Browse examples"
+        },
+        "input": {
+          "value": "Name your project"
+        },
+        "note": {
+          "value": "Open source core"
+        },
+        "tags": {
+          "value": [
+            "Fast",
+            "Small",
+            "Open"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-05",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "atelvo-05",
+      "title": "Atelvo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Edit",
+            "Makers",
+            "Journal",
+            "Visit"
+          ]
+        },
+        "eyebrow": {
+          "value": "Autumn edit"
+        },
+        "headline": {
+          "value": "Crafted slowly, used daily"
+        },
+        "accent": {
+          "value": "objects with intent"
+        },
+        "lead": {
+          "value": "Considered goods made in small batches by people who sign their work."
+        },
+        "cta": {
+          "value": "Shop the edit"
+        },
+        "secondary": {
+          "value": "Our process"
+        },
+        "input": {
+          "value": "Sign up for letters"
+        },
+        "note": {
+          "value": "Ships in two days"
+        },
+        "tags": {
+          "value": [
+            "Wood",
+            "Wool",
+            "Clay"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-06",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "orbelle-06",
+      "title": "Orbelle",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Overview",
+            "Features",
+            "Customers",
+            "Pricing"
+          ]
+        },
+        "eyebrow": {
+          "value": "Live now"
+        },
+        "headline": {
+          "value": "Everything in motion"
+        },
+        "accent": {
+          "value": "nothing out of place"
+        },
+        "lead": {
+          "value": "Track the moving parts of your work and see the whole picture at a glance."
+        },
+        "cta": {
+          "value": "Try it free"
+        },
+        "secondary": {
+          "value": "Book a demo"
+        },
+        "input": {
+          "value": "Enter your email"
+        },
+        "note": {
+          "value": "Fourteen days free"
+        },
+        "tags": {
+          "value": [
+            "Live",
+            "Rich",
+            "Exact"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-07",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "meadley-07",
+      "title": "Meadley",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Plants",
+            "Seasons",
+            "Tools",
+            "Shop"
+          ]
+        },
+        "eyebrow": {
+          "value": "Spring guide"
+        },
+        "headline": {
+          "value": "Grow something good"
+        },
+        "accent": {
+          "value": "season after season"
+        },
+        "lead": {
+          "value": "Practical guides and gentle tools for gardens of every size, from balcony to field."
+        },
+        "cta": {
+          "value": "Plan my garden"
+        },
+        "secondary": {
+          "value": "Read the guide"
+        },
+        "input": {
+          "value": "Your postcode"
+        },
+        "note": {
+          "value": "Local tips weekly"
+        },
+        "tags": {
+          "value": [
+            "Sow",
+            "Tend",
+            "Harvest"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-08",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "sigmor-08",
+      "title": "Sigmor",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Metrics",
+            "Reports",
+            "Sharing",
+            "Docs"
+          ]
+        },
+        "eyebrow": {
+          "value": "Fresh data"
+        },
+        "headline": {
+          "value": "Clarity at every scale"
+        },
+        "accent": {
+          "value": "from one to a million"
+        },
+        "lead": {
+          "value": "Measure what matters, share it plainly, and decide with the whole team in the room."
+        },
+        "cta": {
+          "value": "Start measuring"
+        },
+        "secondary": {
+          "value": "View a sample"
+        },
+        "input": {
+          "value": "Company email"
+        },
+        "note": {
+          "value": "Setup in minutes"
+        },
+        "tags": {
+          "value": [
+            "Clear",
+            "Shared",
+            "Honest"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-09",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "havenly-09",
+      "title": "Havenly",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Security",
+            "Sharing",
+            "Archive",
+            "Help"
+          ]
+        },
+        "eyebrow": {
+          "value": "Private beta"
+        },
+        "headline": {
+          "value": "A safe place for your work"
+        },
+        "accent": {
+          "value": "and the people behind it"
+        },
+        "lead": {
+          "value": "Private by default, simple to share, and built to last for decades, not quarters."
+        },
+        "cta": {
+          "value": "Open an account"
+        },
+        "secondary": {
+          "value": "How we protect"
+        },
+        "input": {
+          "value": "Email address"
+        },
+        "note": {
+          "value": "Encrypted end to end"
+        },
+        "tags": {
+          "value": [
+            "Safe",
+            "Plain",
+            "Lasting"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-10",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "kindrel-10",
+      "title": "Kindrel",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Circles",
+            "Events",
+            "Stories",
+            "Join"
+          ]
+        },
+        "eyebrow": {
+          "value": "This week"
+        },
+        "headline": {
+          "value": "Better together"
+        },
+        "accent": {
+          "value": "than alone"
+        },
+        "lead": {
+          "value": "Find your people, start small groups, and make plans that actually happen."
+        },
+        "cta": {
+          "value": "Join a circle"
+        },
+        "secondary": {
+          "value": "Start your own"
+        },
+        "input": {
+          "value": "Your city"
+        },
+        "note": {
+          "value": "Always free to join"
+        },
+        "tags": {
+          "value": [
+            "Local",
+            "Small",
+            "Warm"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-11",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "lumora-11",
+      "title": "Lumora",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Product",
+            "Design",
+            "Changelog",
+            "Sign in"
+          ]
+        },
+        "eyebrow": {
+          "value": "Release 4.0"
+        },
+        "headline": {
+          "value": "Light the way forward"
+        },
+        "accent": {
+          "value": "with fewer clicks"
+        },
+        "lead": {
+          "value": "An interface for complex work that feels as simple as turning on a lamp."
+        },
+        "cta": {
+          "value": "Switch it on"
+        },
+        "secondary": {
+          "value": "See the interface"
+        },
+        "input": {
+          "value": "Work email"
+        },
+        "note": {
+          "value": "Works on every screen"
+        },
+        "tags": {
+          "value": [
+            "Clear",
+            "Quick",
+            "Quiet"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-12",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "tandro-12",
+      "title": "Tandro",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Boards",
+            "Notes",
+            "Rituals",
+            "Pricing"
+          ]
+        },
+        "eyebrow": {
+          "value": "New rituals"
+        },
+        "headline": {
+          "value": "Two minds, one rhythm"
+        },
+        "accent": {
+          "value": "work that keeps pace"
+        },
+        "lead": {
+          "value": "Pair up across time zones with shared boards, short notes and a calm daily beat."
+        },
+        "cta": {
+          "value": "Start pairing"
+        },
+        "secondary": {
+          "value": "Learn the rhythm"
+        },
+        "input": {
+          "value": "Teammate email"
+        },
+        "note": {
+          "value": "Free for two"
+        },
+        "tags": {
+          "value": [
+            "Pair",
+            "Note",
+            "Sync"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-13",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "granvik-13",
+      "title": "Granvik",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Platform",
+            "Pricing",
+            "Status",
+            "Docs"
+          ]
+        },
+        "eyebrow": {
+          "value": "Generally available"
+        },
+        "headline": {
+          "value": "Built to carry weight"
+        },
+        "accent": {
+          "value": "and never creak"
+        },
+        "lead": {
+          "value": "Infrastructure for teams that need things to just keep working, every single day."
+        },
+        "cta": {
+          "value": "Deploy now"
+        },
+        "secondary": {
+          "value": "Read the docs"
+        },
+        "input": {
+          "value": "Project name"
+        },
+        "note": {
+          "value": "Pay as you grow"
+        },
+        "tags": {
+          "value": [
+            "Steady",
+            "Scaled",
+            "Visible"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-14",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "pastelo-14",
+      "title": "Pastelo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Studio",
+            "Palettes",
+            "Patterns",
+            "Shop"
+          ]
+        },
+        "eyebrow": {
+          "value": "Fresh drop"
+        },
+        "headline": {
+          "value": "Soft colours, strong ideas"
+        },
+        "accent": {
+          "value": "for playful brands"
+        },
+        "lead": {
+          "value": "A palette and pattern studio for people who like their work bright and kind."
+        },
+        "cta": {
+          "value": "Mix a palette"
+        },
+        "secondary": {
+          "value": "Browse patterns"
+        },
+        "input": {
+          "value": "Name your palette"
+        },
+        "note": {
+          "value": "Export anywhere"
+        },
+        "tags": {
+          "value": [
+            "Soft",
+            "Bright",
+            "Kind"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-15",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "vectory-15",
+      "title": "Vectory",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Tools",
+            "Learn",
+            "Gallery",
+            "Download"
+          ]
+        },
+        "eyebrow": {
+          "value": "Version 7"
+        },
+        "headline": {
+          "value": "Precision you can feel"
+        },
+        "accent": {
+          "value": "down to the pixel"
+        },
+        "lead": {
+          "value": "A drawing tool that respects your hand and your grid at the same time."
+        },
+        "cta": {
+          "value": "Start drawing"
+        },
+        "secondary": {
+          "value": "See the tools"
+        },
+        "input": {
+          "value": "Your email"
+        },
+        "note": {
+          "value": "Runs offline"
+        },
+        "tags": {
+          "value": [
+            "Exact",
+            "Fluid",
+            "Clean"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-16",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "emberlo-16",
+      "title": "Emberlo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Work",
+            "Studio",
+            "Journal",
+            "Contact"
+          ]
+        },
+        "eyebrow": {
+          "value": "Booking spring"
+        },
+        "headline": {
+          "value": "Warm by design"
+        },
+        "accent": {
+          "value": "welcoming by default"
+        },
+        "lead": {
+          "value": "A small studio making digital spaces that feel like a good kitchen on a cold day."
+        },
+        "cta": {
+          "value": "Work with us"
+        },
+        "secondary": {
+          "value": "See our work"
+        },
+        "input": {
+          "value": "Say hello"
+        },
+        "note": {
+          "value": "Replies within a day"
+        },
+        "tags": {
+          "value": [
+            "Warm",
+            "Small",
+            "Honest"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-17",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "nimbaro-17",
+      "title": "Nimbaro",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Apps",
+            "Plans",
+            "Teams",
+            "Sign in"
+          ]
+        },
+        "eyebrow": {
+          "value": "Now on desktop"
+        },
+        "headline": {
+          "value": "Your work, in the clouds"
+        },
+        "accent": {
+          "value": "and on your desk"
+        },
+        "lead": {
+          "value": "Files that follow you between devices, offline when you need, synced when you are back."
+        },
+        "cta": {
+          "value": "Get the app"
+        },
+        "secondary": {
+          "value": "Compare plans"
+        },
+        "input": {
+          "value": "Email to start"
+        },
+        "note": {
+          "value": "Two devices free"
+        },
+        "tags": {
+          "value": [
+            "Sync",
+            "Offline",
+            "Restore"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-18",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "quarvo-18",
+      "title": "Quarvo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Briefs",
+            "Reviews",
+            "Delivery",
+            "Pricing"
+          ]
+        },
+        "eyebrow": {
+          "value": "Early access"
+        },
+        "headline": {
+          "value": "Raw ideas, finished work"
+        },
+        "accent": {
+          "value": "the whole way through"
+        },
+        "lead": {
+          "value": "A workflow for creative teams from the first scribble to the final file."
+        },
+        "cta": {
+          "value": "Start a brief"
+        },
+        "secondary": {
+          "value": "Tour the workflow"
+        },
+        "input": {
+          "value": "Studio email"
+        },
+        "note": {
+          "value": "Invite your team"
+        },
+        "tags": {
+          "value": [
+            "Brief",
+            "Review",
+            "Deliver"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-19",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "halvia-19",
+      "title": "Halvia",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Calm",
+            "Digest",
+            "Focus",
+            "Login"
+          ]
+        },
+        "eyebrow": {
+          "value": "Quiet launch"
+        },
+        "headline": {
+          "value": "Calm is a feature"
+        },
+        "accent": {
+          "value": "and we ship it"
+        },
+        "lead": {
+          "value": "A notification-free workspace that brings you what matters when you are ready."
+        },
+        "cta": {
+          "value": "Find your calm"
+        },
+        "secondary": {
+          "value": "How it works"
+        },
+        "input": {
+          "value": "Your email"
+        },
+        "note": {
+          "value": "Unsubscribe anytime"
+        },
+        "tags": {
+          "value": [
+            "Calm",
+            "Batch",
+            "Focus"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-20",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "prismo-20",
+      "title": "Prismo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Boards",
+            "Variations",
+            "Share",
+            "Pricing"
+          ]
+        },
+        "eyebrow": {
+          "value": "Fresh angle"
+        },
+        "headline": {
+          "value": "One idea, many angles"
+        },
+        "accent": {
+          "value": "see them all"
+        },
+        "lead": {
+          "value": "Explore a concept from every side with boards that show variations next to each other."
+        },
+        "cta": {
+          "value": "Open a board"
+        },
+        "secondary": {
+          "value": "See examples"
+        },
+        "input": {
+          "value": "Board name"
+        },
+        "note": {
+          "value": "Free to explore"
+        },
+        "tags": {
+          "value": [
+            "Split",
+            "Compare",
+            "Choose"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-21",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "cobala-21",
+      "title": "Cobala",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Editor",
+            "Library",
+            "Export",
+            "Sign in"
+          ]
+        },
+        "eyebrow": {
+          "value": "New editor"
+        },
+        "headline": {
+          "value": "Deep work, done right"
+        },
+        "accent": {
+          "value": "with tools that stay out of the way"
+        },
+        "lead": {
+          "value": "An editor for long documents with structure, references and a distraction-free mode."
+        },
+        "cta": {
+          "value": "Start writing"
+        },
+        "secondary": {
+          "value": "Read a sample"
+        },
+        "input": {
+          "value": "Document title"
+        },
+        "note": {
+          "value": "Your words stay yours"
+        },
+        "tags": {
+          "value": [
+            "Write",
+            "Cite",
+            "Export"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-22",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "saffra-22",
+      "title": "Saffra",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Recipes",
+            "Plans",
+            "Pantry",
+            "Shop"
+          ]
+        },
+        "eyebrow": {
+          "value": "Weekly menu"
+        },
+        "headline": {
+          "value": "Flavour first"
+        },
+        "accent": {
+          "value": "everything else follows"
+        },
+        "lead": {
+          "value": "Recipes tested in real kitchens, with shopping lists that build themselves."
+        },
+        "cta": {
+          "value": "Cook tonight"
+        },
+        "secondary": {
+          "value": "Browse recipes"
+        },
+        "input": {
+          "value": "Your diet"
+        },
+        "note": {
+          "value": "New dishes every Friday"
+        },
+        "tags": {
+          "value": [
+            "Fresh",
+            "Quick",
+            "Tested"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-23",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "monola-23",
+      "title": "Monola",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Tool",
+            "Manifesto",
+            "Updates",
+            "Download"
+          ]
+        },
+        "eyebrow": {
+          "value": "Version 1"
+        },
+        "headline": {
+          "value": "Less, but better"
+        },
+        "accent": {
+          "value": "one thing done well"
+        },
+        "lead": {
+          "value": "A single-purpose tool that does its job and then gets out of your way."
+        },
+        "cta": {
+          "value": "Use it now"
+        },
+        "secondary": {
+          "value": "Why so simple"
+        },
+        "input": {
+          "value": "Your email"
+        },
+        "note": {
+          "value": "One price, forever"
+        },
+        "tags": {
+          "value": [
+            "One",
+            "Done",
+            "Kept"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-24",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "rivenly-24",
+      "title": "Rivenly",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Trips",
+            "Routes",
+            "Groups",
+            "Get the app"
+          ]
+        },
+        "eyebrow": {
+          "value": "Summer routes"
+        },
+        "headline": {
+          "value": "Go with the flow"
+        },
+        "accent": {
+          "value": "and arrive on time"
+        },
+        "lead": {
+          "value": "Plan routes, share rides and get there together, without a single group chat."
+        },
+        "cta": {
+          "value": "Plan a trip"
+        },
+        "secondary": {
+          "value": "See routes"
+        },
+        "input": {
+          "value": "Where to?"
+        },
+        "note": {
+          "value": "Free for groups of four"
+        },
+        "tags": {
+          "value": [
+            "Route",
+            "Share",
+            "Arrive"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-25",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "papervo-25",
+      "title": "Papervo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Write",
+            "Publish",
+            "Grow",
+            "Pricing"
+          ]
+        },
+        "eyebrow": {
+          "value": "Just shipped"
+        },
+        "headline": {
+          "value": "Send ideas further"
+        },
+        "accent": {
+          "value": "with less effort"
+        },
+        "lead": {
+          "value": "Write once, publish everywhere: newsletters, posts and pages from one calm editor."
+        },
+        "cta": {
+          "value": "Start publishing"
+        },
+        "secondary": {
+          "value": "See a sample"
+        },
+        "input": {
+          "value": "Your newsletter name"
+        },
+        "note": {
+          "value": "Free up to 1k readers"
+        },
+        "tags": {
+          "value": [
+            "Write",
+            "Publish",
+            "Grow"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-26",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "terrava-26",
+      "title": "Terrava",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Spaces",
+            "Members",
+            "Events",
+            "Contact"
+          ]
+        },
+        "eyebrow": {
+          "value": "Now open"
+        },
+        "headline": {
+          "value": "Space to think"
+        },
+        "accent": {
+          "value": "room to grow"
+        },
+        "lead": {
+          "value": "Flexible studios and shared desks for people who build things with their hands and heads."
+        },
+        "cta": {
+          "value": "Book a tour"
+        },
+        "secondary": {
+          "value": "View spaces"
+        },
+        "input": {
+          "value": "Pick a date"
+        },
+        "note": {
+          "value": "First day on us"
+        },
+        "tags": {
+          "value": [
+            "Desk",
+            "Studio",
+            "Commons"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-27",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "swiftel-27",
+      "title": "Swiftel",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Platform",
+            "Benchmarks",
+            "Docs",
+            "Login"
+          ]
+        },
+        "eyebrow": {
+          "value": "Edge release"
+        },
+        "headline": {
+          "value": "Fast feels better"
+        },
+        "accent": {
+          "value": "so we made it faster"
+        },
+        "lead": {
+          "value": "Pages that load before you finish blinking, on every network and every device."
+        },
+        "cta": {
+          "value": "Speed it up"
+        },
+        "secondary": {
+          "value": "Run a test"
+        },
+        "input": {
+          "value": "Your site address"
+        },
+        "note": {
+          "value": "Free test in seconds"
+        },
+        "tags": {
+          "value": [
+            "Fast",
+            "Light",
+            "Near"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-28",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "compana-28",
+      "title": "Compana",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Paths",
+            "Courses",
+            "Mentors",
+            "Join"
+          ]
+        },
+        "eyebrow": {
+          "value": "New cohort"
+        },
+        "headline": {
+          "value": "Find your direction"
+        },
+        "accent": {
+          "value": "then take the first step"
+        },
+        "lead": {
+          "value": "Career guidance and short courses that turn curiosity into a craft you can live on."
+        },
+        "cta": {
+          "value": "Find a path"
+        },
+        "secondary": {
+          "value": "Browse courses"
+        },
+        "input": {
+          "value": "What do you enjoy?"
+        },
+        "note": {
+          "value": "Start free"
+        },
+        "tags": {
+          "value": [
+            "Explore",
+            "Learn",
+            "Grow"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-29",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "weavly-29",
+      "title": "Weavly",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Projects",
+            "Views",
+            "Integrations",
+            "Pricing"
+          ]
+        },
+        "eyebrow": {
+          "value": "Fresh view"
+        },
+        "headline": {
+          "value": "Weave it together"
+        },
+        "accent": {
+          "value": "threads into fabric"
+        },
+        "lead": {
+          "value": "Bring scattered tasks, docs and chats into one woven view of your project."
+        },
+        "cta": {
+          "value": "Weave a project"
+        },
+        "secondary": {
+          "value": "See the view"
+        },
+        "input": {
+          "value": "Project name"
+        },
+        "note": {
+          "value": "Connect in a minute"
+        },
+        "tags": {
+          "value": [
+            "Gather",
+            "Weave",
+            "Finish"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-30",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "aurelo-30",
+      "title": "Aurelo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Scenes",
+            "Rooms",
+            "Routines",
+            "Shop"
+          ]
+        },
+        "eyebrow": {
+          "value": "Night mode"
+        },
+        "headline": {
+          "value": "Colour the night"
+        },
+        "accent": {
+          "value": "with light that listens"
+        },
+        "lead": {
+          "value": "Smart lighting scenes that follow your day, from bright morning focus to soft evening rest."
+        },
+        "cta": {
+          "value": "Set a scene"
+        },
+        "secondary": {
+          "value": "Explore scenes"
+        },
+        "input": {
+          "value": "Your room"
+        },
+        "note": {
+          "value": "Works with any bulb"
+        },
+        "tags": {
+          "value": [
+            "Wake",
+            "Focus",
+            "Rest"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-31",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "keystra-31",
+      "title": "Keystra",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Foundations",
+            "Components",
+            "Patterns",
+            "Docs"
+          ]
+        },
+        "eyebrow": {
+          "value": "Release 3"
+        },
+        "headline": {
+          "value": "Hold it all together"
+        },
+        "accent": {
+          "value": "the part everything rests on"
+        },
+        "lead": {
+          "value": "A shared design system for products that need to look and behave as one."
+        },
+        "cta": {
+          "value": "Adopt the system"
+        },
+        "secondary": {
+          "value": "Read the guide"
+        },
+        "input": {
+          "value": "Search components"
+        },
+        "note": {
+          "value": "Free and open"
+        },
+        "tags": {
+          "value": [
+            "Tokens",
+            "Parts",
+            "Rules"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-32",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "driftova-32",
+      "title": "Driftova",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Stays",
+            "Hosts",
+            "Stories",
+            "Sign in"
+          ]
+        },
+        "eyebrow": {
+          "value": "Off season"
+        },
+        "headline": {
+          "value": "Slow travel, deep stays"
+        },
+        "accent": {
+          "value": "places that change you"
+        },
+        "lead": {
+          "value": "Stays of a week or more in quiet places, with hosts who know every path."
+        },
+        "cta": {
+          "value": "Find a stay"
+        },
+        "secondary": {
+          "value": "See places"
+        },
+        "input": {
+          "value": "Where to?"
+        },
+        "note": {
+          "value": "Free cancellation"
+        },
+        "tags": {
+          "value": [
+            "Slow",
+            "Deep",
+            "Quiet"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-33",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "playvo-33",
+      "title": "Playvo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Games",
+            "Studio",
+            "Lab",
+            "Press"
+          ]
+        },
+        "eyebrow": {
+          "value": "New game"
+        },
+        "headline": {
+          "value": "Play, then make"
+        },
+        "accent": {
+          "value": "games for curious minds"
+        },
+        "lead": {
+          "value": "A playful studio for interactive stories, small games and toys that teach."
+        },
+        "cta": {
+          "value": "Play now"
+        },
+        "secondary": {
+          "value": "Meet the studio"
+        },
+        "input": {
+          "value": "Your email"
+        },
+        "note": {
+          "value": "Free to play"
+        },
+        "tags": {
+          "value": [
+            "Play",
+            "Learn",
+            "Make"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-34",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "stillmo-34",
+      "title": "Stillmo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Pauses",
+            "Courses",
+            "Sleep",
+            "Sign in"
+          ]
+        },
+        "eyebrow": {
+          "value": "Daily pause"
+        },
+        "headline": {
+          "value": "Breathe in, slow down"
+        },
+        "accent": {
+          "value": "ten minutes is enough"
+        },
+        "lead": {
+          "value": "Guided pauses for busy days, short enough to fit between two meetings."
+        },
+        "cta": {
+          "value": "Take a pause"
+        },
+        "secondary": {
+          "value": "Hear a sample"
+        },
+        "input": {
+          "value": "Your email"
+        },
+        "note": {
+          "value": "First month free"
+        },
+        "tags": {
+          "value": [
+            "Pause",
+            "Notice",
+            "Return"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-35",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "tallyo-35",
+      "title": "Tallyo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Accounts",
+            "Invoices",
+            "Taxes",
+            "Login"
+          ]
+        },
+        "eyebrow": {
+          "value": "New invoices"
+        },
+        "headline": {
+          "value": "Money, made plain"
+        },
+        "accent": {
+          "value": "no jargon, no surprises"
+        },
+        "lead": {
+          "value": "Simple accounts for freelancers and small studios, with taxes worked out as you go."
+        },
+        "cta": {
+          "value": "Open an account"
+        },
+        "secondary": {
+          "value": "See pricing"
+        },
+        "input": {
+          "value": "Business email"
+        },
+        "note": {
+          "value": "No monthly fee"
+        },
+        "tags": {
+          "value": [
+            "Plain",
+            "Fair",
+            "Ready"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-36",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "canopo-36",
+      "title": "Canopo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Home",
+            "Docs",
+            "Plans",
+            "Pricing"
+          ]
+        },
+        "eyebrow": {
+          "value": "Fresh start"
+        },
+        "headline": {
+          "value": "Shelter for big ideas"
+        },
+        "accent": {
+          "value": "and small teams"
+        },
+        "lead": {
+          "value": "A home base for early teams: docs, plans and decisions under one roof."
+        },
+        "cta": {
+          "value": "Set up a home"
+        },
+        "secondary": {
+          "value": "Take a look"
+        },
+        "input": {
+          "value": "Team name"
+        },
+        "note": {
+          "value": "Free for five"
+        },
+        "tags": {
+          "value": [
+            "Write",
+            "Plan",
+            "Decide"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-37",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "tidara-37",
+      "title": "Tidara",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Forecast",
+            "Spots",
+            "Guides",
+            "App"
+          ]
+        },
+        "eyebrow": {
+          "value": "Swell alert"
+        },
+        "headline": {
+          "value": "Ride the next wave"
+        },
+        "accent": {
+          "value": "without losing the shore"
+        },
+        "lead": {
+          "value": "Forecasts, guides and live conditions for people who follow the water."
+        },
+        "cta": {
+          "value": "Check today"
+        },
+        "secondary": {
+          "value": "Open the map"
+        },
+        "input": {
+          "value": "Your spot"
+        },
+        "note": {
+          "value": "Live every hour"
+        },
+        "tags": {
+          "value": [
+            "Watch",
+            "Plan",
+            "Go"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-38",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "folivo-38",
+      "title": "Folivo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Folios",
+            "Examples",
+            "Pricing",
+            "Sign in"
+          ]
+        },
+        "eyebrow": {
+          "value": "Fresh folios"
+        },
+        "headline": {
+          "value": "Show your best work"
+        },
+        "accent": {
+          "value": "nothing else"
+        },
+        "lead": {
+          "value": "Portfolio pages that let your projects speak, with no themes to fight."
+        },
+        "cta": {
+          "value": "Make a folio"
+        },
+        "secondary": {
+          "value": "See folios"
+        },
+        "input": {
+          "value": "Your name"
+        },
+        "note": {
+          "value": "Free forever plan"
+        },
+        "tags": {
+          "value": [
+            "Upload",
+            "Arrange",
+            "Share"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-39",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "basalto-39",
+      "title": "Basalto",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Database",
+            "Pricing",
+            "Docs",
+            "Status"
+          ]
+        },
+        "eyebrow": {
+          "value": "Now serverless"
+        },
+        "headline": {
+          "value": "Solid ground for data"
+        },
+        "accent": {
+          "value": "rock steady, always on"
+        },
+        "lead": {
+          "value": "A database that stays fast as you grow and stays boring when things get busy."
+        },
+        "cta": {
+          "value": "Create a database"
+        },
+        "secondary": {
+          "value": "Read benchmarks"
+        },
+        "input": {
+          "value": "Database name"
+        },
+        "note": {
+          "value": "Free tier forever"
+        },
+        "tags": {
+          "value": [
+            "Store",
+            "Query",
+            "Scale"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-40",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "junipo-40",
+      "title": "Junipo",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Issues",
+            "Archive",
+            "About",
+            "Support"
+          ]
+        },
+        "eyebrow": {
+          "value": "Issue 120"
+        },
+        "headline": {
+          "value": "Fresh air for your inbox"
+        },
+        "accent": {
+          "value": "a newsletter worth opening"
+        },
+        "lead": {
+          "value": "Short weekly letters on design, craft and the joy of making things slowly."
+        },
+        "cta": {
+          "value": "Subscribe"
+        },
+        "secondary": {
+          "value": "Read an issue"
+        },
+        "input": {
+          "value": "Your email"
+        },
+        "note": {
+          "value": "Every Sunday"
+        },
+        "tags": {
+          "value": [
+            "Weekly",
+            "Short",
+            "Kind"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-41",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "oakline-41",
+      "title": "Oakline",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Shop",
+            "Categories",
+            "New in",
+            "Deals"
+          ]
+        },
+        "eyebrow": {
+          "value": "New season"
+        },
+        "headline": {
+          "value": "Find what you will love"
+        },
+        "accent": {
+          "value": "Everyday things, chosen with care."
+        },
+        "lead": {
+          "value": "Explore handpicked collections for home, style and daily life, made to last."
+        },
+        "cta": {
+          "value": "Shop collection"
+        },
+        "secondary": {
+          "value": "See all"
+        },
+        "input": {
+          "value": "Search products"
+        },
+        "note": {
+          "value": "Free returns within 30 days"
+        },
+        "tags": {
+          "value": [
+            "Women",
+            "Men",
+            "Home",
+            "Sale"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-42",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "wayline-42",
+      "title": "Wayline",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Home",
+            "Vehicles",
+            "Locations",
+            "Deals"
+          ]
+        },
+        "eyebrow": {
+          "value": "Rent a car"
+        },
+        "headline": {
+          "value": "Your trip, your way"
+        },
+        "accent": {
+          "value": "Pick it up in minutes."
+        },
+        "lead": {
+          "value": "Clean vehicles, flexible plans and clear prices for every kind of journey."
+        },
+        "cta": {
+          "value": "Browse vehicles"
+        },
+        "secondary": {
+          "value": "How it works"
+        },
+        "input": {
+          "value": "Select location"
+        },
+        "note": {
+          "value": "No hidden charges"
+        },
+        "tags": {
+          "value": [
+            "City",
+            "Family",
+            "Open road",
+            "Weekend"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-43",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "plateau-43",
+      "title": "Plateau",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Home",
+            "Menu",
+            "Services",
+            "Reviews"
+          ]
+        },
+        "eyebrow": {
+          "value": "Welcome"
+        },
+        "headline": {
+          "value": "Enjoy every good meal"
+        },
+        "accent": {
+          "value": "Fresh, warm and on time."
+        },
+        "lead": {
+          "value": "The only thing we love more than food is sharing it. Something for everyone, every day."
+        },
+        "cta": {
+          "value": "Order now"
+        },
+        "secondary": {
+          "value": "Order process"
+        },
+        "input": {
+          "value": "Search dishes"
+        },
+        "note": {
+          "value": "Delivery in about 30 minutes"
+        },
+        "tags": {
+          "value": [
+            "Starters",
+            "Mains",
+            "Sides",
+            "Sweets"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-44",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "autolane-44",
+      "title": "Autolane",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Vehicles",
+            "Energy",
+            "Charging",
+            "Shop"
+          ]
+        },
+        "eyebrow": {
+          "value": "New arrivals"
+        },
+        "headline": {
+          "value": "A remarkable car, ready for you"
+        },
+        "accent": {
+          "value": "Instant, accurate and reliable reports."
+        },
+        "lead": {
+          "value": "Check the history of any vehicle you want to buy, right at your fingertips."
+        },
+        "cta": {
+          "value": "Shop now"
+        },
+        "secondary": {
+          "value": "Learn more"
+        },
+        "input": {
+          "value": "Enter the number"
+        },
+        "note": {
+          "value": "Reports in under a minute"
+        },
+        "tags": {
+          "value": [
+            "Sedan",
+            "Coupe",
+            "Wagon",
+            "Roadster"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-45",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "housemark-45",
+      "title": "Housemark",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Home",
+            "About",
+            "Collection",
+            "Contact"
+          ]
+        },
+        "eyebrow": {
+          "value": "Explore premium listings"
+        },
+        "headline": {
+          "value": "Discover the best homes and turn a vision into reality"
+        },
+        "accent": {
+          "value": "Our story"
+        },
+        "lead": {
+          "value": "Elevate your lifestyle with residences designed for comfort and calm."
+        },
+        "cta": {
+          "value": "Search"
+        },
+        "secondary": {
+          "value": "Talk to an agent"
+        },
+        "input": {
+          "value": "Search by city"
+        },
+        "note": {
+          "value": "Updated every day"
+        },
+        "tags": {
+          "value": [
+            "Rent or buy",
+            "New York",
+            "Property",
+            "Per month"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-46",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "trailhead-46",
+      "title": "Trailhead",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Home",
+            "Adventures",
+            "Places",
+            "About"
+          ]
+        },
+        "eyebrow": {
+          "value": "Explore · Discover · Belong"
+        },
+        "headline": {
+          "value": "Adventures beyond limits"
+        },
+        "accent": {
+          "value": "Guided treks and mountain trips."
+        },
+        "lead": {
+          "value": "Guided treks, mountain expeditions and unforgettable experiences for every adventurer."
+        },
+        "cta": {
+          "value": "Plan your adventure"
+        },
+        "secondary": {
+          "value": "Watch our story"
+        },
+        "input": {
+          "value": "Where to?"
+        },
+        "note": {
+          "value": "Small groups, local guides"
+        },
+        "tags": {
+          "value": [
+            "Trekking",
+            "Camping",
+            "Highlands",
+            "Lakes"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-47",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "velora-47",
+      "title": "Velora",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Home",
+            "Women",
+            "Men",
+            "Collections"
+          ]
+        },
+        "eyebrow": {
+          "value": "New collection"
+        },
+        "headline": {
+          "value": "Fashion plus"
+        },
+        "accent": {
+          "value": "in every style"
+        },
+        "lead": {
+          "value": "Modern essentials for a confident you. Quality fabrics and timeless cuts."
+        },
+        "cta": {
+          "value": "Shop collection"
+        },
+        "secondary": {
+          "value": "Watch our story"
+        },
+        "input": {
+          "value": "Search styles"
+        },
+        "note": {
+          "value": "Free returns"
+        },
+        "tags": {
+          "value": [
+            "All",
+            "Dresses",
+            "Tops",
+            "Jackets",
+            "Coats"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-48",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "roadhaus-48",
+      "title": "Roadhaus",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Fleet",
+            "Locations",
+            "Membership",
+            "About"
+          ]
+        },
+        "eyebrow": {
+          "value": "Premium rental"
+        },
+        "headline": {
+          "value": "Drive beyond the ordinary"
+        },
+        "accent": {
+          "value": "Every journey, precisely considered"
+        },
+        "lead": {
+          "value": "Premium vehicles, flexible plans and easy pick-up wherever the road takes you."
+        },
+        "cta": {
+          "value": "Explore fleet"
+        },
+        "secondary": {
+          "value": "Reserve your drive"
+        },
+        "input": {
+          "value": "Search vehicles or locations"
+        },
+        "note": {
+          "value": "Available in 18 cities"
+        },
+        "tags": {
+          "value": [
+            "Luxury",
+            "SUV",
+            "Electric",
+            "Sport",
+            "Business",
+            "Weekend",
+            "Long-term"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-49",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "maison-49",
+      "title": "Maison",
+      "metadata": {
+        "nav": {
+          "value": [
+            "New in",
+            "Women",
+            "Dresses",
+            "Sale"
+          ]
+        },
+        "eyebrow": {
+          "value": "New collection"
+        },
+        "headline": {
+          "value": "Fashion"
+        },
+        "accent": {
+          "value": "Express your style"
+        },
+        "lead": {
+          "value": "Fashion for a brighter you. Premium quality and everyday confidence."
+        },
+        "cta": {
+          "value": "Shop new collection"
+        },
+        "secondary": {
+          "value": "View all"
+        },
+        "input": {
+          "value": "Search for dresses, tops, bags"
+        },
+        "note": {
+          "value": "10K+ happy customers"
+        },
+        "tags": {
+          "value": [
+            "Dresses",
+            "Tops",
+            "Bottoms",
+            "Bags",
+            "Glasses",
+            "Jewelry",
+            "Beauty",
+            "Shoes"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-50",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "stockly-50",
+      "title": "Stockly",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Home",
+            "Products",
+            "Customers",
+            "Shop"
+          ]
+        },
+        "eyebrow": {
+          "value": "Recent products"
+        },
+        "headline": {
+          "value": "Explore new"
+        },
+        "accent": {
+          "value": "Fresh arrivals this week"
+        },
+        "lead": {
+          "value": "Browse the newest products and track how they perform."
+        },
+        "cta": {
+          "value": "Create"
+        },
+        "secondary": {
+          "value": "New post"
+        },
+        "input": {
+          "value": "Search or type a command"
+        },
+        "note": {
+          "value": "Last 7 days"
+        },
+        "tags": {
+          "value": [
+            "Home",
+            "Products",
+            "Customers",
+            "Shop",
+            "Promote"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51",
+      "locale": "en",
+      "kind": "deck",
+      "status": "published",
+      "visibility": "public",
+      "slug": "paylane-51",
+      "title": "Paylane",
+      "metadata": {
+        "nav": {
+          "value": [
+            "Features",
+            "Solutions",
+            "Pricing",
+            "Resources"
+          ]
+        },
+        "eyebrow": {
+          "value": "Secure · Fast · No hidden fees"
+        },
+        "headline": {
+          "value": "The modern way to save, spend and grow your money"
+        },
+        "accent": {
+          "value": "Everything for smarter banking"
+        },
+        "lead": {
+          "value": "Take control of your finances with one secure platform. Send money, track spending and manage cards."
+        },
+        "cta": {
+          "value": "Get started free"
+        },
+        "secondary": {
+          "value": "See how it works"
+        },
+        "input": {
+          "value": "Your email"
+        },
+        "note": {
+          "value": "Free to start"
+        },
+        "tags": {
+          "value": [
+            "Northly",
+            "Brightbox",
+            "Lumen",
+            "Quarry",
+            "Tidewell",
+            "Fieldnote"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/deckstats.json b/xgen/fixtures/deckstats.json
new file mode 100644
index 0000000..83daa97
--- /dev/null
+++ b/xgen/fixtures/deckstats.json
@@ -0,0 +1,3846 @@
+{
+  "collection": "deckstats",
+  "kind": "deck_stat",
+  "entries": [
+    {
+      "id": "deck-01-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-01-stat-1",
+      "title": "makers",
+      "metadata": {
+        "deck": {
+          "value": "deck-01"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "48k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-01-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-01-stat-2",
+      "title": "countries",
+      "metadata": {
+        "deck": {
+          "value": "deck-01"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "120"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-01-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-01-stat-3",
+      "title": "rating",
+      "metadata": {
+        "deck": {
+          "value": "deck-01"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "4.9"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-02-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-02-stat-1",
+      "title": "faster reviews",
+      "metadata": {
+        "deck": {
+          "value": "deck-02"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "3x"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-02-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-02-stat-2",
+      "title": "fewer handoffs",
+      "metadata": {
+        "deck": {
+          "value": "deck-02"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "92%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-02-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-02-stat-3",
+      "title": "support",
+      "metadata": {
+        "deck": {
+          "value": "deck-02"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "24/7"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-03-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-03-stat-1",
+      "title": "notes",
+      "metadata": {
+        "deck": {
+          "value": "deck-03"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "1.2M"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-03-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-03-stat-2",
+      "title": "teams",
+      "metadata": {
+        "deck": {
+          "value": "deck-03"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "8k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-03-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-03-stat-3",
+      "title": "uptime",
+      "metadata": {
+        "deck": {
+          "value": "deck-03"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "99.9%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-04-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-04-stat-1",
+      "title": "templates",
+      "metadata": {
+        "deck": {
+          "value": "deck-04"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "15"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-04-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-04-stat-2",
+      "title": "parts",
+      "metadata": {
+        "deck": {
+          "value": "deck-04"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "200+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-04-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-04-stat-3",
+      "title": "command",
+      "metadata": {
+        "deck": {
+          "value": "deck-04"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-05-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-05-stat-1",
+      "title": "makers",
+      "metadata": {
+        "deck": {
+          "value": "deck-05"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "12"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-05-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-05-stat-2",
+      "title": "objects",
+      "metadata": {
+        "deck": {
+          "value": "deck-05"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "36"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-05-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-05-stat-3",
+      "title": "promise",
+      "metadata": {
+        "deck": {
+          "value": "deck-05"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-06-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-06-stat-1",
+      "title": "events",
+      "metadata": {
+        "deck": {
+          "value": "deck-06"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "2.4B"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-06-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-06-stat-2",
+      "title": "median",
+      "metadata": {
+        "deck": {
+          "value": "deck-06"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "40ms"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-06-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-06-stat-3",
+      "title": "regions",
+      "metadata": {
+        "deck": {
+          "value": "deck-06"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "150"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-07-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-07-stat-1",
+      "title": "plants",
+      "metadata": {
+        "deck": {
+          "value": "deck-07"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "900"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-07-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-07-stat-2",
+      "title": "guides",
+      "metadata": {
+        "deck": {
+          "value": "deck-07"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "52"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-07-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-07-stat-3",
+      "title": "climates",
+      "metadata": {
+        "deck": {
+          "value": "deck-07"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "6"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-08-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-08-stat-1",
+      "title": "clearer reports",
+      "metadata": {
+        "deck": {
+          "value": "deck-08"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "10x"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-08-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-08-stat-2",
+      "title": "to first chart",
+      "metadata": {
+        "deck": {
+          "value": "deck-08"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "30s"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-08-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-08-stat-3",
+      "title": "spreadsheets",
+      "metadata": {
+        "deck": {
+          "value": "deck-08"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-09-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-09-stat-1",
+      "title": "data sold",
+      "metadata": {
+        "deck": {
+          "value": "deck-09"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-09-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-09-stat-2",
+      "title": "bit keys",
+      "metadata": {
+        "deck": {
+          "value": "deck-09"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "256"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-09-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-09-stat-3",
+      "title": "archive",
+      "metadata": {
+        "deck": {
+          "value": "deck-09"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "30y"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-10-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-10-stat-1",
+      "title": "circles",
+      "metadata": {
+        "deck": {
+          "value": "deck-10"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "3k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-10-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-10-stat-2",
+      "title": "members",
+      "metadata": {
+        "deck": {
+          "value": "deck-10"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "40k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-10-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-10-stat-3",
+      "title": "events a week",
+      "metadata": {
+        "deck": {
+          "value": "deck-10"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "600"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-11-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-11-stat-1",
+      "title": "shortcut",
+      "metadata": {
+        "deck": {
+          "value": "deck-11"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-11-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-11-stat-2",
+      "title": "everywhere",
+      "metadata": {
+        "deck": {
+          "value": "deck-11"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "60fps"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-11-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-11-stat-3",
+      "title": "manuals",
+      "metadata": {
+        "deck": {
+          "value": "deck-11"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-12-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-12-stat-1",
+      "title": "people",
+      "metadata": {
+        "deck": {
+          "value": "deck-12"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "2"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-12-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-12-stat-2",
+      "title": "board",
+      "metadata": {
+        "deck": {
+          "value": "deck-12"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-12-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-12-stat-3",
+      "title": "a day",
+      "metadata": {
+        "deck": {
+          "value": "deck-12"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "15m"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-13-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-13-stat-1",
+      "title": "uptime",
+      "metadata": {
+        "deck": {
+          "value": "deck-13"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "99.99%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-13-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-13-stat-2",
+      "title": "regions",
+      "metadata": {
+        "deck": {
+          "value": "deck-13"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "12"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-13-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-13-stat-3",
+      "title": "to deploy",
+      "metadata": {
+        "deck": {
+          "value": "deck-13"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "5m"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-14-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-14-stat-1",
+      "title": "palettes",
+      "metadata": {
+        "deck": {
+          "value": "deck-14"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "4k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-14-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-14-stat-2",
+      "title": "patterns",
+      "metadata": {
+        "deck": {
+          "value": "deck-14"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "800"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-14-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-14-stat-3",
+      "title": "click export",
+      "metadata": {
+        "deck": {
+          "value": "deck-14"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-15-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-15-stat-1",
+      "title": "precision",
+      "metadata": {
+        "deck": {
+          "value": "deck-15"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "0.01px"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-15-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-15-stat-2",
+      "title": "tools",
+      "metadata": {
+        "deck": {
+          "value": "deck-15"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "64"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-15-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-15-stat-3",
+      "title": "grid",
+      "metadata": {
+        "deck": {
+          "value": "deck-15"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-16-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-16-stat-1",
+      "title": "years",
+      "metadata": {
+        "deck": {
+          "value": "deck-16"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "14"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-16-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-16-stat-2",
+      "title": "projects",
+      "metadata": {
+        "deck": {
+          "value": "deck-16"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "90"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-16-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-16-stat-3",
+      "title": "people",
+      "metadata": {
+        "deck": {
+          "value": "deck-16"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "6"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-17-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-17-stat-1",
+      "title": "devices",
+      "metadata": {
+        "deck": {
+          "value": "deck-17"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "5"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-17-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-17-stat-2",
+      "title": "space",
+      "metadata": {
+        "deck": {
+          "value": "deck-17"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "1TB"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-17-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-17-stat-3",
+      "title": "lost files",
+      "metadata": {
+        "deck": {
+          "value": "deck-17"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-18-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-18-stat-1",
+      "title": "fewer rounds",
+      "metadata": {
+        "deck": {
+          "value": "deck-18"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "40%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-18-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-18-stat-2",
+      "title": "source of truth",
+      "metadata": {
+        "deck": {
+          "value": "deck-18"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-18-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-18-stat-3",
+      "title": "file types",
+      "metadata": {
+        "deck": {
+          "value": "deck-18"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "8"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-19-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-19-stat-1",
+      "title": "pings",
+      "metadata": {
+        "deck": {
+          "value": "deck-19"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-19-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-19-stat-2",
+      "title": "digests a day",
+      "metadata": {
+        "deck": {
+          "value": "deck-19"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "2"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-19-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-19-stat-3",
+      "title": "saved weekly",
+      "metadata": {
+        "deck": {
+          "value": "deck-19"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "3h"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-20-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-20-stat-1",
+      "title": "angles",
+      "metadata": {
+        "deck": {
+          "value": "deck-20"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "12"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-20-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-20-stat-2",
+      "title": "board",
+      "metadata": {
+        "deck": {
+          "value": "deck-20"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-20-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-20-stat-3",
+      "title": "variations",
+      "metadata": {
+        "deck": {
+          "value": "deck-20"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "∞"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-21-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-21-stat-1",
+      "title": "words per doc",
+      "metadata": {
+        "deck": {
+          "value": "deck-21"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "200k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-21-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-21-stat-2",
+      "title": "focus mode",
+      "metadata": {
+        "deck": {
+          "value": "deck-21"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-21-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-21-stat-3",
+      "title": "export formats",
+      "metadata": {
+        "deck": {
+          "value": "deck-21"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "12"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-22-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-22-stat-1",
+      "title": "recipes",
+      "metadata": {
+        "deck": {
+          "value": "deck-22"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "1.8k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-22-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-22-stat-2",
+      "title": "average cook",
+      "metadata": {
+        "deck": {
+          "value": "deck-22"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "30m"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-22-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-22-stat-3",
+      "title": "ingredients or fewer",
+      "metadata": {
+        "deck": {
+          "value": "deck-22"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "5"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-23-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-23-stat-1",
+      "title": "feature",
+      "metadata": {
+        "deck": {
+          "value": "deck-23"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-23-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-23-stat-2",
+      "title": "settings",
+      "metadata": {
+        "deck": {
+          "value": "deck-23"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-23-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-23-stat-3",
+      "title": "focus",
+      "metadata": {
+        "deck": {
+          "value": "deck-23"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "100%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-24-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-24-stat-1",
+      "title": "trips",
+      "metadata": {
+        "deck": {
+          "value": "deck-24"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "2M"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-24-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-24-stat-2",
+      "title": "less driving",
+      "metadata": {
+        "deck": {
+          "value": "deck-24"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "18%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-24-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-24-stat-3",
+      "title": "stars",
+      "metadata": {
+        "deck": {
+          "value": "deck-24"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "4.8"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-25-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-25-stat-1",
+      "title": "editor",
+      "metadata": {
+        "deck": {
+          "value": "deck-25"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-25-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-25-stat-2",
+      "title": "channels",
+      "metadata": {
+        "deck": {
+          "value": "deck-25"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "6"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-25-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-25-stat-3",
+      "title": "writers",
+      "metadata": {
+        "deck": {
+          "value": "deck-25"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "12k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-26-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-26-stat-1",
+      "title": "floors",
+      "metadata": {
+        "deck": {
+          "value": "deck-26"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "3"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-26-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-26-stat-2",
+      "title": "desks",
+      "metadata": {
+        "deck": {
+          "value": "deck-26"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "120"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-26-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-26-stat-3",
+      "title": "studios",
+      "metadata": {
+        "deck": {
+          "value": "deck-26"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "40"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-27-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-27-stat-1",
+      "title": "load time",
+      "metadata": {
+        "deck": {
+          "value": "deck-27"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "0.4s"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-27-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-27-stat-2",
+      "title": "score",
+      "metadata": {
+        "deck": {
+          "value": "deck-27"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "100"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-27-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-27-stat-3",
+      "title": "cities",
+      "metadata": {
+        "deck": {
+          "value": "deck-27"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "300"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-28-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-28-stat-1",
+      "title": "courses",
+      "metadata": {
+        "deck": {
+          "value": "deck-28"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "80"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-28-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-28-stat-2",
+      "title": "mentors",
+      "metadata": {
+        "deck": {
+          "value": "deck-28"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "400"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-28-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-28-stat-3",
+      "title": "average path",
+      "metadata": {
+        "deck": {
+          "value": "deck-28"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "6w"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-29-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-29-stat-1",
+      "title": "integrations",
+      "metadata": {
+        "deck": {
+          "value": "deck-29"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "30"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-29-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-29-stat-2",
+      "title": "view",
+      "metadata": {
+        "deck": {
+          "value": "deck-29"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-29-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-29-stat-3",
+      "title": "saved daily",
+      "metadata": {
+        "deck": {
+          "value": "deck-29"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "2h"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-30-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-30-stat-1",
+      "title": "colours",
+      "metadata": {
+        "deck": {
+          "value": "deck-30"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "16M"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-30-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-30-stat-2",
+      "title": "scenes",
+      "metadata": {
+        "deck": {
+          "value": "deck-30"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "24"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-30-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-30-stat-3",
+      "title": "tap",
+      "metadata": {
+        "deck": {
+          "value": "deck-30"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-31-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-31-stat-1",
+      "title": "components",
+      "metadata": {
+        "deck": {
+          "value": "deck-31"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "90"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-31-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-31-stat-2",
+      "title": "themes",
+      "metadata": {
+        "deck": {
+          "value": "deck-31"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "12"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-31-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-31-stat-3",
+      "title": "source",
+      "metadata": {
+        "deck": {
+          "value": "deck-31"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-32-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-32-stat-1",
+      "title": "stays",
+      "metadata": {
+        "deck": {
+          "value": "deck-32"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "300"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-32-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-32-stat-2",
+      "title": "nights minimum",
+      "metadata": {
+        "deck": {
+          "value": "deck-32"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "7"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-32-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-32-stat-3",
+      "title": "regions",
+      "metadata": {
+        "deck": {
+          "value": "deck-32"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "40"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-33-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-33-stat-1",
+      "title": "games",
+      "metadata": {
+        "deck": {
+          "value": "deck-33"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "22"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-33-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-33-stat-2",
+      "title": "plays",
+      "metadata": {
+        "deck": {
+          "value": "deck-33"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "5M"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-33-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-33-stat-3",
+      "title": "awards",
+      "metadata": {
+        "deck": {
+          "value": "deck-33"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "8"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-34-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-34-stat-1",
+      "title": "a day",
+      "metadata": {
+        "deck": {
+          "value": "deck-34"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "10m"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-34-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-34-stat-2",
+      "title": "pauses",
+      "metadata": {
+        "deck": {
+          "value": "deck-34"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "300"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-34-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-34-stat-3",
+      "title": "listeners",
+      "metadata": {
+        "deck": {
+          "value": "deck-34"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "1M"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-35-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-35-stat-1",
+      "title": "to invoice",
+      "metadata": {
+        "deck": {
+          "value": "deck-35"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "2m"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-35-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-35-stat-2",
+      "title": "hidden fees",
+      "metadata": {
+        "deck": {
+          "value": "deck-35"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-35-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-35-stat-3",
+      "title": "dashboard",
+      "metadata": {
+        "deck": {
+          "value": "deck-35"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-36-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-36-stat-1",
+      "title": "seats free",
+      "metadata": {
+        "deck": {
+          "value": "deck-36"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "5"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-36-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-36-stat-2",
+      "title": "home",
+      "metadata": {
+        "deck": {
+          "value": "deck-36"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-36-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-36-stat-3",
+      "title": "setup",
+      "metadata": {
+        "deck": {
+          "value": "deck-36"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-37-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-37-stat-1",
+      "title": "spots",
+      "metadata": {
+        "deck": {
+          "value": "deck-37"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "1.2k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-37-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-37-stat-2",
+      "title": "forecast",
+      "metadata": {
+        "deck": {
+          "value": "deck-37"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "7d"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-37-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-37-stat-3",
+      "title": "updates",
+      "metadata": {
+        "deck": {
+          "value": "deck-37"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "15m"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-38-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-38-stat-1",
+      "title": "folios",
+      "metadata": {
+        "deck": {
+          "value": "deck-38"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "60k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-38-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-38-stat-2",
+      "title": "layout engine",
+      "metadata": {
+        "deck": {
+          "value": "deck-38"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "1"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-38-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-38-stat-3",
+      "title": "to publish",
+      "metadata": {
+        "deck": {
+          "value": "deck-38"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "3m"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-39-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-39-stat-1",
+      "title": "reads",
+      "metadata": {
+        "deck": {
+          "value": "deck-39"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "1ms"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-39-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-39-stat-2",
+      "title": "per cluster",
+      "metadata": {
+        "deck": {
+          "value": "deck-39"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "10TB"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-39-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-39-stat-3",
+      "title": "downtime",
+      "metadata": {
+        "deck": {
+          "value": "deck-39"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-40-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-40-stat-1",
+      "title": "issues",
+      "metadata": {
+        "deck": {
+          "value": "deck-40"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "120"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-40-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-40-stat-2",
+      "title": "readers",
+      "metadata": {
+        "deck": {
+          "value": "deck-40"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "30k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-40-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-40-stat-3",
+      "title": "read",
+      "metadata": {
+        "deck": {
+          "value": "deck-40"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "5m"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-41-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-41-stat-1",
+      "title": "happy customers",
+      "metadata": {
+        "deck": {
+          "value": "deck-41"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "25K+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-41-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-41-stat-2",
+      "title": "average rating",
+      "metadata": {
+        "deck": {
+          "value": "deck-41"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "4.8"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-41-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-41-stat-3",
+      "title": "new this week",
+      "metadata": {
+        "deck": {
+          "value": "deck-41"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "120"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-41-stat-4",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-41-stat-4",
+      "title": "support",
+      "metadata": {
+        "deck": {
+          "value": "deck-41"
+        },
+        "position": {
+          "value": 4
+        },
+        "value": {
+          "value": "24/7"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-42-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-42-stat-1",
+      "title": "happy drivers",
+      "metadata": {
+        "deck": {
+          "value": "deck-42"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "25K+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-42-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-42-stat-2",
+      "title": "trips booked",
+      "metadata": {
+        "deck": {
+          "value": "deck-42"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "12K+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-42-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-42-stat-3",
+      "title": "pick-up points",
+      "metadata": {
+        "deck": {
+          "value": "deck-42"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "90+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-42-stat-4",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-42-stat-4",
+      "title": "average rating",
+      "metadata": {
+        "deck": {
+          "value": "deck-42"
+        },
+        "position": {
+          "value": 4
+        },
+        "value": {
+          "value": "4.9"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-43-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-43-stat-1",
+      "title": "meals served",
+      "metadata": {
+        "deck": {
+          "value": "deck-43"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "500K+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-43-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-43-stat-2",
+      "title": "average rating",
+      "metadata": {
+        "deck": {
+          "value": "deck-43"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "4.9/5"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-43-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-43-stat-3",
+      "title": "recipes",
+      "metadata": {
+        "deck": {
+          "value": "deck-43"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "200+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-43-stat-4",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-43-stat-4",
+      "title": "happy guests",
+      "metadata": {
+        "deck": {
+          "value": "deck-43"
+        },
+        "position": {
+          "value": 4
+        },
+        "value": {
+          "value": "98%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-44-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-44-stat-1",
+      "title": "average saving",
+      "metadata": {
+        "deck": {
+          "value": "deck-44"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "18%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-44-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-44-stat-2",
+      "title": "reports run",
+      "metadata": {
+        "deck": {
+          "value": "deck-44"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "40K"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-44-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-44-stat-3",
+      "title": "simple steps",
+      "metadata": {
+        "deck": {
+          "value": "deck-44"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "3"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-44-stat-4",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-44-stat-4",
+      "title": "match rate",
+      "metadata": {
+        "deck": {
+          "value": "deck-44"
+        },
+        "position": {
+          "value": 4
+        },
+        "value": {
+          "value": "99%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-45-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-45-stat-1",
+      "title": "projects finished",
+      "metadata": {
+        "deck": {
+          "value": "deck-45"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "1500+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-45-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-45-stat-2",
+      "title": "global clients",
+      "metadata": {
+        "deck": {
+          "value": "deck-45"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "950+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-45-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-45-stat-3",
+      "title": "ready units",
+      "metadata": {
+        "deck": {
+          "value": "deck-45"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "235+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-45-stat-4",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-45-stat-4",
+      "title": "in value",
+      "metadata": {
+        "deck": {
+          "value": "deck-45"
+        },
+        "position": {
+          "value": 4
+        },
+        "value": {
+          "value": "$50M+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-46-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-46-stat-1",
+      "title": "destinations",
+      "metadata": {
+        "deck": {
+          "value": "deck-46"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "50+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-46-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-46-stat-2",
+      "title": "happy travellers",
+      "metadata": {
+        "deck": {
+          "value": "deck-46"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "2M"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-46-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-46-stat-3",
+      "title": "satisfaction",
+      "metadata": {
+        "deck": {
+          "value": "deck-46"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "85%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-46-stat-4",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-46-stat-4",
+      "title": "repeat trips",
+      "metadata": {
+        "deck": {
+          "value": "deck-46"
+        },
+        "position": {
+          "value": 4
+        },
+        "value": {
+          "value": "90%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-47-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-47-stat-1",
+      "title": "happy customers",
+      "metadata": {
+        "deck": {
+          "value": "deck-47"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "200K+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-47-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-47-stat-2",
+      "title": "premium styles",
+      "metadata": {
+        "deck": {
+          "value": "deck-47"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "500+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-47-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-47-stat-3",
+      "title": "average rating",
+      "metadata": {
+        "deck": {
+          "value": "deck-47"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "4.8"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-48-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-48-stat-1",
+      "title": "premium vehicles",
+      "metadata": {
+        "deck": {
+          "value": "deck-48"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "120+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-48-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-48-stat-2",
+      "title": "city locations",
+      "metadata": {
+        "deck": {
+          "value": "deck-48"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "18"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-48-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-48-stat-3",
+      "title": "personal support",
+      "metadata": {
+        "deck": {
+          "value": "deck-48"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "24/7"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-49-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-49-stat-1",
+      "title": "happy customers",
+      "metadata": {
+        "deck": {
+          "value": "deck-49"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "10K+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-49-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-49-stat-2",
+      "title": "average rating",
+      "metadata": {
+        "deck": {
+          "value": "deck-49"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "4.9"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-49-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-49-stat-3",
+      "title": "delivery",
+      "metadata": {
+        "deck": {
+          "value": "deck-49"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "48h"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-50-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-50-stat-1",
+      "title": "people reached",
+      "metadata": {
+        "deck": {
+          "value": "deck-50"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "256k"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-50-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-50-stat-2",
+      "title": "engagement",
+      "metadata": {
+        "deck": {
+          "value": "deck-50"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "1.2x"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-50-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-50-stat-3",
+      "title": "units sold",
+      "metadata": {
+        "deck": {
+          "value": "deck-50"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "10k+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-stat-1",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-stat-1",
+      "title": "users worldwide",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 1
+        },
+        "value": {
+          "value": "30M+"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-stat-2",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-stat-2",
+      "title": "uptime",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 2
+        },
+        "value": {
+          "value": "99%"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-stat-3",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-stat-3",
+      "title": "countries",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 3
+        },
+        "value": {
+          "value": "150"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "deck-51-stat-4",
+      "locale": "en",
+      "kind": "deck_stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "deck-51-stat-4",
+      "title": "average rating",
+      "metadata": {
+        "deck": {
+          "value": "deck-51"
+        },
+        "position": {
+          "value": 4
+        },
+        "value": {
+          "value": "5.0"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/deliveryfacts.json b/xgen/fixtures/deliveryfacts.json
new file mode 100644
index 0000000..3ff6c42
--- /dev/null
+++ b/xgen/fixtures/deliveryfacts.json
@@ -0,0 +1,90 @@
+{
+  "collection": "deliveryfacts",
+  "kind": "fact",
+  "entries": [
+    {
+      "id": "fact-windows",
+      "locale": "en",
+      "kind": "fact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "windows",
+      "title": "Two-hour windows",
+      "metadata": {
+        "text": {
+          "value": "Pick a window when you check out; the courier calls ten minutes before."
+        },
+        "icon": {
+          "value": "clock"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "fact-packing",
+      "locale": "en",
+      "kind": "fact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "packing",
+      "title": "Careful packing",
+      "metadata": {
+        "text": {
+          "value": "Fragile items travel in padded boxes, one order per box."
+        },
+        "icon": {
+          "value": "package"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "fact-price",
+      "locale": "en",
+      "kind": "fact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "price",
+      "title": "Delivery from $12",
+      "metadata": {
+        "text": {
+          "value": "Free from $75 in the central zone."
+        },
+        "icon": {
+          "value": "truck"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "fact-hub",
+      "locale": "en",
+      "kind": "fact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "hub",
+      "title": "The nearest hub",
+      "metadata": {
+        "text": {
+          "value": "Orders leave from the hub closest to your address."
+        },
+        "icon": {
+          "value": "map-pin"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/departments.json b/xgen/fixtures/departments.json
new file mode 100644
index 0000000..41f724f
--- /dev/null
+++ b/xgen/fixtures/departments.json
@@ -0,0 +1,48 @@
+{
+  "collection": "departments",
+  "kind": "department",
+  "entries": [
+    {
+      "id": "department-engineering",
+      "locale": "en",
+      "kind": "department",
+      "status": "published",
+      "visibility": "public",
+      "slug": "engineering",
+      "title": "Engineering",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "department-design",
+      "locale": "en",
+      "kind": "department",
+      "status": "published",
+      "visibility": "public",
+      "slug": "design",
+      "title": "Design",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "department-support",
+      "locale": "en",
+      "kind": "department",
+      "status": "published",
+      "visibility": "public",
+      "slug": "support",
+      "title": "Support",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/details.json b/xgen/fixtures/details.json
new file mode 100644
index 0000000..5e5b066
--- /dev/null
+++ b/xgen/fixtures/details.json
@@ -0,0 +1,78 @@
+{
+  "collection": "details",
+  "kind": "detail",
+  "entries": [
+    {
+      "id": "detail-description",
+      "locale": "en",
+      "kind": "detail",
+      "status": "published",
+      "visibility": "public",
+      "slug": "description",
+      "title": "Description",
+      "metadata": {
+        "text": {
+          "value": "A desk lamp with a long reach and a heavy base. The arm moves in three joints and stays where you leave it."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "detail-materials",
+      "locale": "en",
+      "kind": "detail",
+      "status": "published",
+      "visibility": "public",
+      "slug": "materials",
+      "title": "Materials",
+      "metadata": {
+        "text": {
+          "value": "Powder-coated aluminium arm, steel base, linen-wrapped cable."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "detail-care",
+      "locale": "en",
+      "kind": "detail",
+      "status": "published",
+      "visibility": "public",
+      "slug": "care",
+      "title": "Care",
+      "metadata": {
+        "text": {
+          "value": "Wipe with a dry cloth. The LED module lasts about 25,000 hours and can be replaced."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "detail-shipping",
+      "locale": "en",
+      "kind": "detail",
+      "status": "published",
+      "visibility": "public",
+      "slug": "shipping",
+      "title": "Shipping and returns",
+      "metadata": {
+        "text": {
+          "value": "Ships within one working day. Thirty days to return it in the original box."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/duo.json b/xgen/fixtures/duo.json
new file mode 100644
index 0000000..56a9b17
--- /dev/null
+++ b/xgen/fixtures/duo.json
@@ -0,0 +1,99 @@
+{
+  "collection": "duo",
+  "kind": "plan",
+  "entries": [
+    {
+      "id": "duo-plan-free",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "duo-plan-free",
+      "title": "Free",
+      "metadata": {
+        "tagline": {
+          "value": "One person, one site"
+        },
+        "price": {
+          "value": 0
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 1
+        },
+        "storage": {
+          "value": 2
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "1 site",
+            "Community support",
+            "Basic analytics"
+          ]
+        },
+        "yearly": {
+          "value": 0
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    },
+    {
+      "id": "duo-plan-pro",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "duo-plan-pro",
+      "title": "Pro",
+      "metadata": {
+        "tagline": {
+          "value": "For a small team"
+        },
+        "price": {
+          "value": 2900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 10
+        },
+        "storage": {
+          "value": 50
+        },
+        "highlighted": {
+          "value": true
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "10 sites",
+            "Priority support",
+            "Advanced analytics",
+            "Custom domains"
+          ]
+        },
+        "yearly": {
+          "value": 29000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/faq.json b/xgen/fixtures/faq.json
new file mode 100644
index 0000000..38d4343
--- /dev/null
+++ b/xgen/fixtures/faq.json
@@ -0,0 +1,102 @@
+{
+  "collection": "faq",
+  "kind": "faq",
+  "entries": [
+    {
+      "id": "faq-trial",
+      "locale": "en",
+      "kind": "faq",
+      "status": "published",
+      "visibility": "public",
+      "slug": "trial",
+      "title": "Is there a free plan?",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-billing"
+        }
+      ],
+      "metadata": {
+        "answer": {
+          "value": "Yes. Solo is free and has no time limit."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    },
+    {
+      "id": "faq-switch",
+      "locale": "en",
+      "kind": "faq",
+      "status": "published",
+      "visibility": "public",
+      "slug": "switch",
+      "title": "Can I change plans later?",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-account"
+        }
+      ],
+      "metadata": {
+        "answer": {
+          "value": "You can move up or down at any time; the change applies to the next month."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    },
+    {
+      "id": "faq-export",
+      "locale": "en",
+      "kind": "faq",
+      "status": "published",
+      "visibility": "public",
+      "slug": "export",
+      "title": "Can I export my data?",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-account"
+        }
+      ],
+      "metadata": {
+        "answer": {
+          "value": "Every plan can export all content as files."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-13T09:00:00Z",
+      "published_at": "2026-03-13T10:00:00Z"
+    },
+    {
+      "id": "faq-support",
+      "locale": "en",
+      "kind": "faq",
+      "status": "published",
+      "visibility": "public",
+      "slug": "support",
+      "title": "How fast is support?",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-billing"
+        }
+      ],
+      "metadata": {
+        "answer": {
+          "value": "Team answers within one working day, Scale within four hours."
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-14T09:00:00Z",
+      "published_at": "2026-03-14T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/faqtabs.json b/xgen/fixtures/faqtabs.json
new file mode 100644
index 0000000..8a2fbeb
--- /dev/null
+++ b/xgen/fixtures/faqtabs.json
@@ -0,0 +1,60 @@
+{
+  "collection": "faqtabs",
+  "kind": "tab",
+  "entries": [
+    {
+      "id": "tab-all",
+      "locale": "en",
+      "kind": "tab",
+      "status": "published",
+      "visibility": "public",
+      "slug": "all",
+      "title": "All",
+      "metadata": {
+        "value": {
+          "value": ""
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "tab-billing",
+      "locale": "en",
+      "kind": "tab",
+      "status": "published",
+      "visibility": "public",
+      "slug": "billing",
+      "title": "Billing",
+      "metadata": {
+        "value": {
+          "value": "billing"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "faqtab-account",
+      "locale": "en",
+      "kind": "tab",
+      "status": "published",
+      "visibility": "public",
+      "slug": "faqtab-account",
+      "title": "Account",
+      "metadata": {
+        "value": {
+          "value": "account"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/features.json b/xgen/fixtures/features.json
new file mode 100644
index 0000000..edc9c6f
--- /dev/null
+++ b/xgen/fixtures/features.json
@@ -0,0 +1,90 @@
+{
+  "collection": "features",
+  "kind": "feature",
+  "entries": [
+    {
+      "id": "feature-fast",
+      "locale": "en",
+      "kind": "feature",
+      "status": "published",
+      "visibility": "public",
+      "slug": "fast",
+      "title": "Fast by default",
+      "metadata": {
+        "text": {
+          "value": "Pages render from static data and ship little script."
+        },
+        "icon": {
+          "value": "zap"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    },
+    {
+      "id": "feature-clear",
+      "locale": "en",
+      "kind": "feature",
+      "status": "published",
+      "visibility": "public",
+      "slug": "clear",
+      "title": "Clear structure",
+      "metadata": {
+        "text": {
+          "value": "One heading per page, landmarks and a skip link come built in."
+        },
+        "icon": {
+          "value": "layers"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    },
+    {
+      "id": "feature-safe",
+      "locale": "en",
+      "kind": "feature",
+      "status": "published",
+      "visibility": "public",
+      "slug": "safe",
+      "title": "Safe forms",
+      "metadata": {
+        "text": {
+          "value": "Inputs carry labels and errors are announced to assistive tools."
+        },
+        "icon": {
+          "value": "shield-check"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-13T09:00:00Z",
+      "published_at": "2026-03-13T10:00:00Z"
+    },
+    {
+      "id": "feature-global",
+      "locale": "en",
+      "kind": "feature",
+      "status": "published",
+      "visibility": "public",
+      "slug": "global",
+      "title": "Ready for any language",
+      "metadata": {
+        "text": {
+          "value": "Every text lives in a dictionary, so a new language is one more file."
+        },
+        "icon": {
+          "value": "globe"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-14T09:00:00Z",
+      "published_at": "2026-03-14T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/helplinks.json b/xgen/fixtures/helplinks.json
new file mode 100644
index 0000000..112ac73
--- /dev/null
+++ b/xgen/fixtures/helplinks.json
@@ -0,0 +1,90 @@
+{
+  "collection": "helplinks",
+  "kind": "menu_item",
+  "entries": [
+    {
+      "id": "helplink-help",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "help",
+      "title": "Help center",
+      "metadata": {
+        "location": {
+          "value": "help"
+        },
+        "icon": {
+          "value": "circle-question-mark"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "helplink-status",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "status",
+      "title": "System status",
+      "metadata": {
+        "location": {
+          "value": "help"
+        },
+        "icon": {
+          "value": "circle-check"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "helplink-privacy",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "privacy",
+      "title": "Privacy",
+      "metadata": {
+        "location": {
+          "value": "help"
+        },
+        "icon": {
+          "value": "lock"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "helplink-terms",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "terms",
+      "title": "Terms",
+      "metadata": {
+        "location": {
+          "value": "help"
+        },
+        "icon": {
+          "value": "file-text"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/jobs.json b/xgen/fixtures/jobs.json
new file mode 100644
index 0000000..2a65f83
--- /dev/null
+++ b/xgen/fixtures/jobs.json
@@ -0,0 +1,186 @@
+{
+  "collection": "jobs",
+  "kind": "job",
+  "entries": [
+    {
+      "id": "job-frontend",
+      "locale": "en",
+      "kind": "job",
+      "status": "published",
+      "visibility": "public",
+      "slug": "frontend",
+      "title": "Senior Frontend Engineer",
+      "metadata": {
+        "dept": {
+          "value": "department-engineering"
+        },
+        "location": {
+          "value": "Remote"
+        },
+        "type": {
+          "value": "Full time"
+        },
+        "salary": {
+          "value": "$120k to $150k"
+        },
+        "posted": {
+          "value": "2026-03-28T12:00:00Z"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "job-platform",
+      "locale": "en",
+      "kind": "job",
+      "status": "published",
+      "visibility": "public",
+      "slug": "platform",
+      "title": "Platform Engineer",
+      "metadata": {
+        "dept": {
+          "value": "department-engineering"
+        },
+        "location": {
+          "value": "Berlin"
+        },
+        "type": {
+          "value": "Full time"
+        },
+        "salary": {
+          "value": "$110k to $140k"
+        },
+        "posted": {
+          "value": "2026-03-23T12:00:00Z"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "job-designer",
+      "locale": "en",
+      "kind": "job",
+      "status": "published",
+      "visibility": "public",
+      "slug": "designer",
+      "title": "Product Designer",
+      "metadata": {
+        "dept": {
+          "value": "department-design"
+        },
+        "location": {
+          "value": "Paris"
+        },
+        "type": {
+          "value": "Full time"
+        },
+        "salary": {
+          "value": "$95k to $120k"
+        },
+        "posted": {
+          "value": "2026-03-27T12:00:00Z"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "job-brand",
+      "locale": "en",
+      "kind": "job",
+      "status": "published",
+      "visibility": "public",
+      "slug": "brand",
+      "title": "Brand Designer",
+      "metadata": {
+        "dept": {
+          "value": "department-design"
+        },
+        "location": {
+          "value": "Remote"
+        },
+        "type": {
+          "value": "Contract"
+        },
+        "salary": {
+          "value": "$60 an hour"
+        },
+        "posted": {
+          "value": "2026-03-16T12:00:00Z"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    },
+    {
+      "id": "job-success",
+      "locale": "en",
+      "kind": "job",
+      "status": "published",
+      "visibility": "public",
+      "slug": "success",
+      "title": "Customer Success Lead",
+      "metadata": {
+        "dept": {
+          "value": "department-support"
+        },
+        "location": {
+          "value": "Toronto"
+        },
+        "type": {
+          "value": "Full time"
+        },
+        "salary": {
+          "value": "$80k to $95k"
+        },
+        "posted": {
+          "value": "2026-03-25T12:00:00Z"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-10T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    },
+    {
+      "id": "job-writer",
+      "locale": "en",
+      "kind": "job",
+      "status": "published",
+      "visibility": "public",
+      "slug": "writer",
+      "title": "Technical Writer",
+      "metadata": {
+        "dept": {
+          "value": "department-support"
+        },
+        "location": {
+          "value": "Remote"
+        },
+        "type": {
+          "value": "Part time"
+        },
+        "salary": {
+          "value": "$50 an hour"
+        },
+        "posted": {
+          "value": "2026-03-29T12:00:00Z"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-12T09:00:00Z",
+      "updated_at": "2026-03-13T09:00:00Z",
+      "published_at": "2026-03-13T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/lanes.json b/xgen/fixtures/lanes.json
new file mode 100644
index 0000000..cf7ab6d
--- /dev/null
+++ b/xgen/fixtures/lanes.json
@@ -0,0 +1,48 @@
+{
+  "collection": "lanes",
+  "kind": "lane",
+  "entries": [
+    {
+      "id": "lane-todo",
+      "locale": "en",
+      "kind": "lane",
+      "status": "published",
+      "visibility": "public",
+      "slug": "todo",
+      "title": "To do",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "lane-doing",
+      "locale": "en",
+      "kind": "lane",
+      "status": "published",
+      "visibility": "public",
+      "slug": "doing",
+      "title": "In progress",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "lane-done",
+      "locale": "en",
+      "kind": "lane",
+      "status": "published",
+      "visibility": "public",
+      "slug": "done",
+      "title": "Done",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/logos.json b/xgen/fixtures/logos.json
new file mode 100644
index 0000000..59a886e
--- /dev/null
+++ b/xgen/fixtures/logos.json
@@ -0,0 +1,114 @@
+{
+  "collection": "logos",
+  "kind": "logo",
+  "entries": [
+    {
+      "id": "logo-northwind",
+      "locale": "en",
+      "kind": "logo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "northwind",
+      "title": "Northwind",
+      "metadata": {
+        "icon": {
+          "value": "compass"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "logo-lumen",
+      "locale": "en",
+      "kind": "logo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "lumen",
+      "title": "Lumen",
+      "metadata": {
+        "icon": {
+          "value": "sun"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "logo-harbor",
+      "locale": "en",
+      "kind": "logo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "harbor",
+      "title": "Harbor",
+      "metadata": {
+        "icon": {
+          "value": "anchor"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "logo-summit",
+      "locale": "en",
+      "kind": "logo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "summit",
+      "title": "Summit",
+      "metadata": {
+        "icon": {
+          "value": "mountain"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "logo-orbit",
+      "locale": "en",
+      "kind": "logo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "orbit",
+      "title": "Orbit",
+      "metadata": {
+        "icon": {
+          "value": "orbit"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    },
+    {
+      "id": "logo-grove",
+      "locale": "en",
+      "kind": "logo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "grove",
+      "title": "Grove",
+      "metadata": {
+        "icon": {
+          "value": "trees"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-11T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/media.json b/xgen/fixtures/media.json
new file mode 100644
index 0000000..59d662a
--- /dev/null
+++ b/xgen/fixtures/media.json
@@ -0,0 +1,126 @@
+{
+  "collection": "media",
+  "kind": "media",
+  "entries": [
+    {
+      "id": "media-lamp",
+      "locale": "en",
+      "kind": "media",
+      "status": "published",
+      "visibility": "public",
+      "slug": "arc-desk-lamp",
+      "title": "Arc desk lamp",
+      "metadata": {
+        "file": {
+          "value": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMDAiIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiPjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4xNiIvPjxjaXJjbGUgY3g9Ijg2NCIgY3k9IjM2MCIgcj0iMTIwIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNMCA4NjQgTDM2MCA1NDAgTDY2MCA4MTYgTDkwMCA2MjQgTDEyMDAgOTAwIFYxMjAwIEgwIFoiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4yOCIvPjxwYXRoIGQ9Ik0wIDEwMjAgTDQ4MCA3OTIgTDEyMDAgMTA4MCBWMTIwMCBIMCBaIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzYiLz48L3N2Zz4="
+        },
+        "mime": {
+          "value": "image/svg+xml"
+        },
+        "width": {
+          "value": 1200
+        },
+        "height": {
+          "value": 1200
+        },
+        "alt": {
+          "value": "A curved desk lamp on a wooden desk"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "media-phones",
+      "locale": "en",
+      "kind": "media",
+      "status": "published",
+      "visibility": "public",
+      "slug": "studio-headphones",
+      "title": "Studio headphones",
+      "metadata": {
+        "file": {
+          "value": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMDAiIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiPjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4xNiIvPjxjaXJjbGUgY3g9Ijg2NCIgY3k9IjM2MCIgcj0iMTIwIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNMCA4NjQgTDM2MCA1NDAgTDY2MCA4MTYgTDkwMCA2MjQgTDEyMDAgOTAwIFYxMjAwIEgwIFoiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4yOCIvPjxwYXRoIGQ9Ik0wIDEwMjAgTDQ4MCA3OTIgTDEyMDAgMTA4MCBWMTIwMCBIMCBaIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzYiLz48L3N2Zz4="
+        },
+        "mime": {
+          "value": "image/svg+xml"
+        },
+        "width": {
+          "value": 1200
+        },
+        "height": {
+          "value": 1200
+        },
+        "alt": {
+          "value": "Closed-back headphones on a stand"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "media-bag",
+      "locale": "en",
+      "kind": "media",
+      "status": "published",
+      "visibility": "public",
+      "slug": "field-backpack",
+      "title": "Field backpack",
+      "metadata": {
+        "file": {
+          "value": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMDAiIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiPjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjEyMDAiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4xNiIvPjxjaXJjbGUgY3g9Ijg2NCIgY3k9IjM2MCIgcj0iMTIwIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNMCA4NjQgTDM2MCA1NDAgTDY2MCA4MTYgTDkwMCA2MjQgTDEyMDAgOTAwIFYxMjAwIEgwIFoiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4yOCIvPjxwYXRoIGQ9Ik0wIDEwMjAgTDQ4MCA3OTIgTDEyMDAgMTA4MCBWMTIwMCBIMCBaIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzYiLz48L3N2Zz4="
+        },
+        "mime": {
+          "value": "image/svg+xml"
+        },
+        "width": {
+          "value": 1200
+        },
+        "height": {
+          "value": 1200
+        },
+        "alt": {
+          "value": "A grey backpack against a wall"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "media-static-first",
+      "locale": "en",
+      "kind": "media",
+      "status": "published",
+      "visibility": "public",
+      "slug": "static-first-cover",
+      "title": "Static-first cover",
+      "metadata": {
+        "file": {
+          "value": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMTAwIDkwMCIgd2lkdGg9IjIxMDAiIGhlaWdodD0iOTAwIj48cmVjdCB3aWR0aD0iMjEwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiM4MDgwODAiIGZpbGwtb3BhY2l0eT0iMC4xNiIvPjxjaXJjbGUgY3g9IjE1MTIiIGN5PSIyNzAiIHI9IjkwIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMzIiLz48cGF0aCBkPSJNMCA2NDggTDYzMCA0MDUgTDExNTUgNjEyIEwxNTc1IDQ2OCBMMjEwMCA2NzUgVjkwMCBIMCBaIiBmaWxsPSIjODA4MDgwIiBmaWxsLW9wYWNpdHk9IjAuMjgiLz48cGF0aCBkPSJNMCA3NjUgTDg0MCA1OTQgTDIxMDAgODEwIFY5MDAgSDAgWiIgZmlsbD0iIzgwODA4MCIgZmlsbC1vcGFjaXR5PSIwLjM2Ii8+PC9zdmc+"
+        },
+        "mime": {
+          "value": "image/svg+xml"
+        },
+        "width": {
+          "value": 2100
+        },
+        "height": {
+          "value": 900
+        },
+        "alt": {
+          "value": "Abstract shapes in muted colors"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/megagroups.json b/xgen/fixtures/megagroups.json
new file mode 100644
index 0000000..b1c2570
--- /dev/null
+++ b/xgen/fixtures/megagroups.json
@@ -0,0 +1,69 @@
+{
+  "collection": "megagroups",
+  "kind": "menu_item",
+  "entries": [
+    {
+      "id": "megagroup-product",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "megagroup-product",
+      "title": "Product",
+      "metadata": {
+        "location": {
+          "value": "mega"
+        },
+        "icon": {
+          "value": "layers"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "megagroup-resources",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "megagroup-resources",
+      "title": "Resources",
+      "metadata": {
+        "location": {
+          "value": "mega"
+        },
+        "icon": {
+          "value": "book-open"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "megagroup-company",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "megagroup-company",
+      "title": "Company",
+      "metadata": {
+        "location": {
+          "value": "mega"
+        },
+        "icon": {
+          "value": "building"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/members.json b/xgen/fixtures/members.json
new file mode 100644
index 0000000..eaa35a6
--- /dev/null
+++ b/xgen/fixtures/members.json
@@ -0,0 +1,278 @@
+{
+  "collection": "members",
+  "kind": "member",
+  "entries": [
+    {
+      "id": "member-ava",
+      "locale": "en",
+      "kind": "member",
+      "status": "published",
+      "visibility": "public",
+      "slug": "ava",
+      "title": "Ava Moreno",
+      "metadata": {
+        "role": {
+          "value": "Founder and CEO"
+        },
+        "dept": {
+          "value": "leadership"
+        },
+        "location": {
+          "value": "Lisbon"
+        },
+        "bio": {
+          "value": "Started the company after ten years of building tools for other teams."
+        },
+        "skills": {
+          "value": [
+            "Strategy",
+            "Hiring",
+            "Sales"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "member-noah",
+      "locale": "en",
+      "kind": "member",
+      "status": "published",
+      "visibility": "public",
+      "slug": "noah",
+      "title": "Noah Becker",
+      "metadata": {
+        "role": {
+          "value": "Head of Engineering"
+        },
+        "dept": {
+          "value": "engineering"
+        },
+        "location": {
+          "value": "Berlin"
+        },
+        "bio": {
+          "value": "Keeps the build fast and the releases boring."
+        },
+        "skills": {
+          "value": [
+            "Platform",
+            "TypeScript",
+            "Reviews"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "member-mia",
+      "locale": "en",
+      "kind": "member",
+      "status": "published",
+      "visibility": "public",
+      "slug": "mia",
+      "title": "Mia Laurent",
+      "metadata": {
+        "role": {
+          "value": "Design Lead"
+        },
+        "dept": {
+          "value": "design"
+        },
+        "location": {
+          "value": "Paris"
+        },
+        "bio": {
+          "value": "Draws the system before anyone writes a line of code."
+        },
+        "skills": {
+          "value": [
+            "Design systems",
+            "Research",
+            "Motion"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "member-liam",
+      "locale": "en",
+      "kind": "member",
+      "status": "published",
+      "visibility": "public",
+      "slug": "liam",
+      "title": "Liam Okafor",
+      "metadata": {
+        "role": {
+          "value": "Product Manager"
+        },
+        "dept": {
+          "value": "product"
+        },
+        "location": {
+          "value": "London"
+        },
+        "bio": {
+          "value": "Talks to customers every week and writes it all down."
+        },
+        "skills": {
+          "value": [
+            "Roadmaps",
+            "Interviews",
+            "Analytics"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    },
+    {
+      "id": "member-zoe",
+      "locale": "en",
+      "kind": "member",
+      "status": "published",
+      "visibility": "public",
+      "slug": "zoe",
+      "title": "Zoe Tanaka",
+      "metadata": {
+        "role": {
+          "value": "Frontend Engineer"
+        },
+        "dept": {
+          "value": "engineering"
+        },
+        "location": {
+          "value": "Remote"
+        },
+        "bio": {
+          "value": "Owns the component library and its tests."
+        },
+        "skills": {
+          "value": [
+            "Svelte",
+            "React",
+            "Accessibility"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-10T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    },
+    {
+      "id": "member-omar",
+      "locale": "en",
+      "kind": "member",
+      "status": "published",
+      "visibility": "public",
+      "slug": "omar",
+      "title": "Omar Haddad",
+      "metadata": {
+        "role": {
+          "value": "Customer Success"
+        },
+        "dept": {
+          "value": "support"
+        },
+        "location": {
+          "value": "Toronto"
+        },
+        "bio": {
+          "value": "Turns tricky tickets into fixes and guides."
+        },
+        "skills": {
+          "value": [
+            "Onboarding",
+            "Docs",
+            "Training"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-12T09:00:00Z",
+      "updated_at": "2026-03-13T09:00:00Z",
+      "published_at": "2026-03-13T10:00:00Z"
+    },
+    {
+      "id": "member-elena",
+      "locale": "en",
+      "kind": "member",
+      "status": "published",
+      "visibility": "public",
+      "slug": "elena",
+      "title": "Elena Rossi",
+      "metadata": {
+        "role": {
+          "value": "Brand Designer"
+        },
+        "dept": {
+          "value": "design"
+        },
+        "location": {
+          "value": "Milan"
+        },
+        "bio": {
+          "value": "Makes the pages, the slides and the swag look like one brand."
+        },
+        "skills": {
+          "value": [
+            "Branding",
+            "Illustration",
+            "Type"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-14T09:00:00Z",
+      "updated_at": "2026-03-15T09:00:00Z",
+      "published_at": "2026-03-15T10:00:00Z"
+    },
+    {
+      "id": "member-sam",
+      "locale": "en",
+      "kind": "member",
+      "status": "published",
+      "visibility": "public",
+      "slug": "sam",
+      "title": "Sam Carter",
+      "metadata": {
+        "role": {
+          "value": "Backend Engineer"
+        },
+        "dept": {
+          "value": "engineering"
+        },
+        "location": {
+          "value": "Austin"
+        },
+        "bio": {
+          "value": "Builds the APIs and keeps the database happy."
+        },
+        "skills": {
+          "value": [
+            "Go",
+            "Postgres",
+            "Queues"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-16T09:00:00Z",
+      "updated_at": "2026-03-17T09:00:00Z",
+      "published_at": "2026-03-17T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/menulinks.json b/xgen/fixtures/menulinks.json
new file mode 100644
index 0000000..2cb771a
--- /dev/null
+++ b/xgen/fixtures/menulinks.json
@@ -0,0 +1,566 @@
+{
+  "collection": "menulinks",
+  "kind": "menu_item",
+  "entries": [
+    {
+      "id": "menulink-footer-product-blocks",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "blocks",
+      "title": "Blocks",
+      "parent_id": "group-product",
+      "order": 1,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-product-templates",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "templates",
+      "title": "Templates",
+      "parent_id": "group-product",
+      "order": 2,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-product-themes",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "themes",
+      "title": "Themes",
+      "parent_id": "group-product",
+      "order": 3,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-product-pricing",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "pricing",
+      "title": "Pricing",
+      "parent_id": "group-product",
+      "order": 4,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-company-about",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "about",
+      "title": "About",
+      "parent_id": "group-company",
+      "order": 1,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-company-careers",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "careers",
+      "title": "Careers",
+      "parent_id": "group-company",
+      "order": 2,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-company-contact",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "contact",
+      "title": "Contact",
+      "parent_id": "group-company",
+      "order": 3,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-company-press",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "press",
+      "title": "Press",
+      "parent_id": "group-company",
+      "order": 4,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-resources-guides",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "guides",
+      "title": "Guides",
+      "parent_id": "group-resources",
+      "order": 1,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-resources-changelog",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "changelog",
+      "title": "Changelog",
+      "parent_id": "group-resources",
+      "order": 2,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-resources-community",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "community",
+      "title": "Community",
+      "parent_id": "group-resources",
+      "order": 3,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-resources-support",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "support",
+      "title": "Support",
+      "parent_id": "group-resources",
+      "order": 4,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-legal-terms",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "terms",
+      "title": "Terms",
+      "parent_id": "group-legal",
+      "order": 1,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-legal-privacy",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "privacy",
+      "title": "Privacy",
+      "parent_id": "group-legal",
+      "order": 2,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-legal-cookies",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "cookies",
+      "title": "Cookies",
+      "parent_id": "group-legal",
+      "order": 3,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "menulink-footer-legal-security",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "security",
+      "title": "Security",
+      "parent_id": "group-legal",
+      "order": 4,
+      "metadata": {
+        "location": {
+          "value": "footer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-product-blocks",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "blocks",
+      "title": "Blocks",
+      "parent_id": "megagroup-product",
+      "order": 1,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-product-templates",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "templates",
+      "title": "Templates",
+      "parent_id": "megagroup-product",
+      "order": 2,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-product-themes",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "themes",
+      "title": "Themes",
+      "parent_id": "megagroup-product",
+      "order": 3,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-product-integrations",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "integrations",
+      "title": "Integrations",
+      "parent_id": "megagroup-product",
+      "order": 4,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-resources-guides",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "guides",
+      "title": "Guides",
+      "parent_id": "megagroup-resources",
+      "order": 1,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-resources-changelog",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "changelog",
+      "title": "Changelog",
+      "parent_id": "megagroup-resources",
+      "order": 2,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-resources-community",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "community",
+      "title": "Community",
+      "parent_id": "megagroup-resources",
+      "order": 3,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-resources-support",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "support",
+      "title": "Support",
+      "parent_id": "megagroup-resources",
+      "order": 4,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-company-about",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "about",
+      "title": "About",
+      "parent_id": "megagroup-company",
+      "order": 1,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-company-careers",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "careers",
+      "title": "Careers",
+      "parent_id": "megagroup-company",
+      "order": 2,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-company-contact",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "contact",
+      "title": "Contact",
+      "parent_id": "megagroup-company",
+      "order": 3,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "menulink-mega-company-press",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "press",
+      "title": "Press",
+      "parent_id": "megagroup-company",
+      "order": 4,
+      "metadata": {
+        "location": {
+          "value": "mega"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/metrics.json b/xgen/fixtures/metrics.json
new file mode 100644
index 0000000..19881f7
--- /dev/null
+++ b/xgen/fixtures/metrics.json
@@ -0,0 +1,108 @@
+{
+  "collection": "metrics",
+  "kind": "metric",
+  "entries": [
+    {
+      "id": "metric-revenue",
+      "locale": "en",
+      "kind": "metric",
+      "status": "published",
+      "visibility": "public",
+      "slug": "revenue",
+      "title": "Revenue",
+      "metadata": {
+        "value": {
+          "value": 4820000
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "icon": {
+          "value": "badge-dollar-sign"
+        },
+        "hint": {
+          "value": "+8% this month"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "metric-orders",
+      "locale": "en",
+      "kind": "metric",
+      "status": "published",
+      "visibility": "public",
+      "slug": "orders",
+      "title": "Orders",
+      "metadata": {
+        "value": {
+          "value": 1284
+        },
+        "icon": {
+          "value": "shopping-cart"
+        },
+        "hint": {
+          "value": "+3% this month"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "metric-visitors",
+      "locale": "en",
+      "kind": "metric",
+      "status": "published",
+      "visibility": "public",
+      "slug": "visitors",
+      "title": "Visitors",
+      "metadata": {
+        "value": {
+          "value": 92410
+        },
+        "icon": {
+          "value": "eye"
+        },
+        "hint": {
+          "value": "+12% this month"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "metric-churn",
+      "locale": "en",
+      "kind": "metric",
+      "status": "published",
+      "visibility": "public",
+      "slug": "churn",
+      "title": "Churn",
+      "metadata": {
+        "value": {
+          "value": 1.9
+        },
+        "unit": {
+          "value": "percent"
+        },
+        "icon": {
+          "value": "trending-down"
+        },
+        "hint": {
+          "value": "-0.2% this month"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/milestones.json b/xgen/fixtures/milestones.json
new file mode 100644
index 0000000..5c9b27d
--- /dev/null
+++ b/xgen/fixtures/milestones.json
@@ -0,0 +1,102 @@
+{
+  "collection": "milestones",
+  "kind": "milestone",
+  "entries": [
+    {
+      "id": "milestone-founded",
+      "locale": "en",
+      "kind": "milestone",
+      "status": "published",
+      "visibility": "public",
+      "slug": "founded",
+      "title": "The first commit",
+      "metadata": {
+        "date": {
+          "value": "2021"
+        },
+        "text": {
+          "value": "Two people, one laptop and a list of blocks they kept rebuilding."
+        },
+        "tag": {
+          "value": "Start"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "milestone-launch",
+      "locale": "en",
+      "kind": "milestone",
+      "status": "published",
+      "visibility": "public",
+      "slug": "launch",
+      "title": "Public launch",
+      "metadata": {
+        "date": {
+          "value": "2022"
+        },
+        "text": {
+          "value": "The kit goes public with forty blocks and one runtime."
+        },
+        "tag": {
+          "value": "Release"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "milestone-runtimes",
+      "locale": "en",
+      "kind": "milestone",
+      "status": "published",
+      "visibility": "public",
+      "slug": "runtimes",
+      "title": "Three runtimes",
+      "metadata": {
+        "date": {
+          "value": "2024"
+        },
+        "text": {
+          "value": "Svelte, React and Vue from the same specs, file for file."
+        },
+        "tag": {
+          "value": "Release"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "milestone-team",
+      "locale": "en",
+      "kind": "milestone",
+      "status": "published",
+      "visibility": "public",
+      "slug": "team",
+      "title": "A team of twenty",
+      "metadata": {
+        "date": {
+          "value": "2026"
+        },
+        "text": {
+          "value": "Offices in three cities and a support desk that answers within the hour."
+        },
+        "tag": {
+          "value": "Team"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/navlinks.json b/xgen/fixtures/navlinks.json
new file mode 100644
index 0000000..b83d059
--- /dev/null
+++ b/xgen/fixtures/navlinks.json
@@ -0,0 +1,111 @@
+{
+  "collection": "navlinks",
+  "kind": "menu_item",
+  "entries": [
+    {
+      "id": "link-product",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "product",
+      "title": "Product",
+      "metadata": {
+        "location": {
+          "value": "main"
+        },
+        "icon": {
+          "value": "package"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "link-solutions",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "solutions",
+      "title": "Solutions",
+      "metadata": {
+        "location": {
+          "value": "main"
+        },
+        "icon": {
+          "value": "layers"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "link-pricing",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "pricing",
+      "title": "Pricing",
+      "metadata": {
+        "location": {
+          "value": "main"
+        },
+        "icon": {
+          "value": "tag"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "link-docs",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "docs",
+      "title": "Docs",
+      "metadata": {
+        "location": {
+          "value": "main"
+        },
+        "icon": {
+          "value": "book-open"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "link-company",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "company",
+      "title": "Company",
+      "metadata": {
+        "location": {
+          "value": "main"
+        },
+        "icon": {
+          "value": "building"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/orders.json b/xgen/fixtures/orders.json
new file mode 100644
index 0000000..2d6faba
--- /dev/null
+++ b/xgen/fixtures/orders.json
@@ -0,0 +1,126 @@
+{
+  "collection": "orders",
+  "kind": "order",
+  "entries": [
+    {
+      "id": "order-o1042",
+      "locale": "en",
+      "kind": "order",
+      "status": "published",
+      "visibility": "public",
+      "slug": "o1042",
+      "title": "Order 1042",
+      "metadata": {
+        "date": {
+          "value": "2026-03-28T10:00:00Z"
+        },
+        "total": {
+          "value": 32400
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "order_status": {
+          "value": "shipped"
+        },
+        "items": {
+          "value": 4
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "order-o1041",
+      "locale": "en",
+      "kind": "order",
+      "status": "published",
+      "visibility": "public",
+      "slug": "o1041",
+      "title": "Order 1041",
+      "metadata": {
+        "date": {
+          "value": "2026-03-21T10:00:00Z"
+        },
+        "total": {
+          "value": 8900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "order_status": {
+          "value": "paid"
+        },
+        "items": {
+          "value": 1
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "order-o1038",
+      "locale": "en",
+      "kind": "order",
+      "status": "published",
+      "visibility": "public",
+      "slug": "o1038",
+      "title": "Order 1038",
+      "metadata": {
+        "date": {
+          "value": "2026-03-09T10:00:00Z"
+        },
+        "total": {
+          "value": 19900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "order_status": {
+          "value": "pending"
+        },
+        "items": {
+          "value": 1
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "order-o1031",
+      "locale": "en",
+      "kind": "order",
+      "status": "published",
+      "visibility": "public",
+      "slug": "o1031",
+      "title": "Order 1031",
+      "metadata": {
+        "date": {
+          "value": "2026-02-24T10:00:00Z"
+        },
+        "total": {
+          "value": 5000
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "order_status": {
+          "value": "refunded"
+        },
+        "items": {
+          "value": 1
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/outline.json b/xgen/fixtures/outline.json
new file mode 100644
index 0000000..59c7bd5
--- /dev/null
+++ b/xgen/fixtures/outline.json
@@ -0,0 +1,69 @@
+{
+  "collection": "outline",
+  "kind": "menu_item",
+  "entries": [
+    {
+      "id": "outlineitem-budget",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "budget",
+      "title": "Set a page weight budget",
+      "metadata": {
+        "location": {
+          "value": "outline"
+        },
+        "icon": {
+          "value": "chevron-right"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "outlineitem-images",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "images",
+      "title": "Ship smaller pictures",
+      "metadata": {
+        "location": {
+          "value": "outline"
+        },
+        "icon": {
+          "value": "chevron-right"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "outlineitem-cache",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "cache",
+      "title": "Cache what does not change",
+      "metadata": {
+        "location": {
+          "value": "outline"
+        },
+        "icon": {
+          "value": "chevron-right"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/payments.json b/xgen/fixtures/payments.json
new file mode 100644
index 0000000..5e81b9c
--- /dev/null
+++ b/xgen/fixtures/payments.json
@@ -0,0 +1,90 @@
+{
+  "collection": "payments",
+  "kind": "payment",
+  "entries": [
+    {
+      "id": "payment-card",
+      "locale": "en",
+      "kind": "payment",
+      "status": "published",
+      "visibility": "public",
+      "slug": "card",
+      "title": "Card online",
+      "metadata": {
+        "text": {
+          "value": "Pay on a secure page after you confirm the order."
+        },
+        "icon": {
+          "value": "credit-card"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "payment-wallet",
+      "locale": "en",
+      "kind": "payment",
+      "status": "published",
+      "visibility": "public",
+      "slug": "wallet",
+      "title": "Phone wallet",
+      "metadata": {
+        "text": {
+          "value": "Confirm in the wallet on your phone, no card details to type."
+        },
+        "icon": {
+          "value": "smartphone"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "payment-courier",
+      "locale": "en",
+      "kind": "payment",
+      "status": "published",
+      "visibility": "public",
+      "slug": "courier",
+      "title": "Card on delivery",
+      "metadata": {
+        "text": {
+          "value": "The courier brings a card terminal."
+        },
+        "icon": {
+          "value": "wallet"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "payment-cash",
+      "locale": "en",
+      "kind": "payment",
+      "status": "published",
+      "visibility": "public",
+      "slug": "cash",
+      "title": "Cash on delivery",
+      "metadata": {
+        "text": {
+          "value": "Tell us the note you will pay with in the comment."
+        },
+        "icon": {
+          "value": "banknote"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/perks.json b/xgen/fixtures/perks.json
new file mode 100644
index 0000000..799d6c4
--- /dev/null
+++ b/xgen/fixtures/perks.json
@@ -0,0 +1,90 @@
+{
+  "collection": "perks",
+  "kind": "perk",
+  "entries": [
+    {
+      "id": "perk-shipping",
+      "locale": "en",
+      "kind": "perk",
+      "status": "published",
+      "visibility": "public",
+      "slug": "shipping",
+      "title": "Free shipping over $75",
+      "metadata": {
+        "text": {
+          "value": "Two-hour windows, seven days a week."
+        },
+        "icon": {
+          "value": "truck"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "perk-returns",
+      "locale": "en",
+      "kind": "perk",
+      "status": "published",
+      "visibility": "public",
+      "slug": "returns",
+      "title": "Thirty-day returns",
+      "metadata": {
+        "text": {
+          "value": "Send it back for free if it does not fit your desk."
+        },
+        "icon": {
+          "value": "rotate-ccw"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "perk-warranty",
+      "locale": "en",
+      "kind": "perk",
+      "status": "published",
+      "visibility": "public",
+      "slug": "warranty",
+      "title": "Two-year warranty",
+      "metadata": {
+        "text": {
+          "value": "Repairs or a new one, whichever is faster."
+        },
+        "icon": {
+          "value": "shield-check"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "perk-support",
+      "locale": "en",
+      "kind": "perk",
+      "status": "published",
+      "visibility": "public",
+      "slug": "support",
+      "title": "Help seven days a week",
+      "metadata": {
+        "text": {
+          "value": "A person answers within the hour."
+        },
+        "icon": {
+          "value": "headphones"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/photos.json b/xgen/fixtures/photos.json
new file mode 100644
index 0000000..744af16
--- /dev/null
+++ b/xgen/fixtures/photos.json
@@ -0,0 +1,195 @@
+{
+  "collection": "photos",
+  "kind": "photo",
+  "entries": [
+    {
+      "id": "photo-harbor",
+      "locale": "en",
+      "kind": "photo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "harbor",
+      "title": "Harbor at dawn",
+      "metadata": {
+        "tag": {
+          "value": "Travel"
+        },
+        "size": {
+          "value": "large"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "photo-studio",
+      "locale": "en",
+      "kind": "photo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "studio",
+      "title": "Studio corner",
+      "metadata": {
+        "tag": {
+          "value": "Interior"
+        },
+        "size": {
+          "value": "small"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "photo-market",
+      "locale": "en",
+      "kind": "photo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "market",
+      "title": "Morning market",
+      "metadata": {
+        "tag": {
+          "value": "Street"
+        },
+        "size": {
+          "value": "tall"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "photo-ridge",
+      "locale": "en",
+      "kind": "photo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "ridge",
+      "title": "Ridge trail",
+      "metadata": {
+        "tag": {
+          "value": "Nature"
+        },
+        "size": {
+          "value": "wide"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    },
+    {
+      "id": "photo-cafe",
+      "locale": "en",
+      "kind": "photo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "cafe",
+      "title": "Corner cafe",
+      "metadata": {
+        "tag": {
+          "value": "Street"
+        },
+        "size": {
+          "value": "small"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-10T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    },
+    {
+      "id": "photo-dunes",
+      "locale": "en",
+      "kind": "photo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "dunes",
+      "title": "Dunes at noon",
+      "metadata": {
+        "tag": {
+          "value": "Nature"
+        },
+        "size": {
+          "value": "tall"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-12T09:00:00Z",
+      "updated_at": "2026-03-13T09:00:00Z",
+      "published_at": "2026-03-13T10:00:00Z"
+    },
+    {
+      "id": "photo-library",
+      "locale": "en",
+      "kind": "photo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "library",
+      "title": "Old library",
+      "metadata": {
+        "tag": {
+          "value": "Interior"
+        },
+        "size": {
+          "value": "small"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-14T09:00:00Z",
+      "updated_at": "2026-03-15T09:00:00Z",
+      "published_at": "2026-03-15T10:00:00Z"
+    },
+    {
+      "id": "photo-bridge",
+      "locale": "en",
+      "kind": "photo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "bridge",
+      "title": "Iron bridge",
+      "metadata": {
+        "tag": {
+          "value": "Travel"
+        },
+        "size": {
+          "value": "wide"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-16T09:00:00Z",
+      "updated_at": "2026-03-17T09:00:00Z",
+      "published_at": "2026-03-17T10:00:00Z"
+    },
+    {
+      "id": "photo-orchard",
+      "locale": "en",
+      "kind": "photo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "orchard",
+      "title": "Orchard rows",
+      "metadata": {
+        "tag": {
+          "value": "Nature"
+        },
+        "size": {
+          "value": "small"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-18T09:00:00Z",
+      "updated_at": "2026-03-19T09:00:00Z",
+      "published_at": "2026-03-19T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/placeholders.json b/xgen/fixtures/placeholders.json
new file mode 100644
index 0000000..9ee2c7d
--- /dev/null
+++ b/xgen/fixtures/placeholders.json
@@ -0,0 +1,62 @@
+{
+  "collection": "placeholders",
+  "kind": "placeholder",
+  "entries": [
+    {
+      "id": "placeholder-p1",
+      "locale": "en",
+      "kind": "placeholder",
+      "status": "published",
+      "visibility": "public",
+      "slug": "p1",
+      "title": "Placeholder 1",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-01T10:00:00Z",
+      "published_at": "2026-03-01T11:00:00Z"
+    },
+    {
+      "id": "placeholder-p2",
+      "locale": "en",
+      "kind": "placeholder",
+      "status": "published",
+      "visibility": "public",
+      "slug": "p2",
+      "title": "Placeholder 2",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-02T10:00:00Z",
+      "published_at": "2026-03-02T11:00:00Z"
+    },
+    {
+      "id": "placeholder-p3",
+      "locale": "en",
+      "kind": "placeholder",
+      "status": "published",
+      "visibility": "public",
+      "slug": "p3",
+      "title": "Placeholder 3",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-03T10:00:00Z",
+      "published_at": "2026-03-03T11:00:00Z"
+    },
+    {
+      "id": "placeholder-p4",
+      "locale": "en",
+      "kind": "placeholder",
+      "status": "published",
+      "visibility": "public",
+      "slug": "p4",
+      "title": "Placeholder 4",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-04T10:00:00Z",
+      "published_at": "2026-03-04T11:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/plans.json b/xgen/fixtures/plans.json
new file mode 100644
index 0000000..b2c1fe0
--- /dev/null
+++ b/xgen/fixtures/plans.json
@@ -0,0 +1,565 @@
+{
+  "collection": "plans",
+  "kind": "plan",
+  "entries": [
+    {
+      "id": "plan-free",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "free",
+      "title": "Free",
+      "metadata": {
+        "tagline": {
+          "value": "For trying things out"
+        },
+        "price": {
+          "value": 0
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 1
+        },
+        "storage": {
+          "value": 1
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "1 project",
+            "Community support",
+            "Basic reports"
+          ]
+        },
+        "yearly": {
+          "value": 0
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-01T09:00:00Z",
+      "updated_at": "2026-02-01T09:00:00Z",
+      "published_at": "2026-02-01T10:00:00Z"
+    },
+    {
+      "id": "plan-starter",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "starter",
+      "title": "Starter",
+      "metadata": {
+        "tagline": {
+          "value": "For a single maker"
+        },
+        "price": {
+          "value": 900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 3
+        },
+        "storage": {
+          "value": 10
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "3 projects",
+            "Email support",
+            "Basic reports",
+            "Export to CSV"
+          ]
+        },
+        "yearly": {
+          "value": 9000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-02T09:00:00Z",
+      "updated_at": "2026-02-02T09:00:00Z",
+      "published_at": "2026-02-02T10:00:00Z"
+    },
+    {
+      "id": "plan-basic",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "basic",
+      "title": "Basic",
+      "metadata": {
+        "tagline": {
+          "value": "For small teams"
+        },
+        "price": {
+          "value": 1900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 5
+        },
+        "storage": {
+          "value": 50
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "10 projects",
+            "Email support",
+            "Shared dashboards"
+          ]
+        },
+        "yearly": {
+          "value": 19000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-03T09:00:00Z",
+      "updated_at": "2026-02-03T09:00:00Z",
+      "published_at": "2026-02-03T10:00:00Z"
+    },
+    {
+      "id": "plan-team",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "team",
+      "title": "Team",
+      "metadata": {
+        "tagline": {
+          "value": "For growing teams"
+        },
+        "price": {
+          "value": 3900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 15
+        },
+        "storage": {
+          "value": 200
+        },
+        "highlighted": {
+          "value": true
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "Unlimited projects",
+            "Priority support",
+            "Shared dashboards",
+            "Audit log"
+          ]
+        },
+        "yearly": {
+          "value": 39000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-04T09:00:00Z",
+      "updated_at": "2026-02-04T09:00:00Z",
+      "published_at": "2026-02-04T10:00:00Z"
+    },
+    {
+      "id": "plan-growth",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "growth",
+      "title": "Growth",
+      "metadata": {
+        "tagline": {
+          "value": "For teams that ship weekly"
+        },
+        "price": {
+          "value": 5900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 25
+        },
+        "storage": {
+          "value": 500
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "Unlimited projects",
+            "Priority support",
+            "Roles and permissions",
+            "Audit log"
+          ]
+        },
+        "yearly": {
+          "value": 59000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-05T09:00:00Z",
+      "updated_at": "2026-02-05T09:00:00Z",
+      "published_at": "2026-02-05T10:00:00Z"
+    },
+    {
+      "id": "plan-business",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "business",
+      "title": "Business",
+      "metadata": {
+        "tagline": {
+          "value": "For departments"
+        },
+        "price": {
+          "value": 9900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 50
+        },
+        "storage": {
+          "value": 1000
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "Unlimited projects",
+            "Single sign-on",
+            "Roles and permissions",
+            "Audit log",
+            "Custom domains"
+          ]
+        },
+        "yearly": {
+          "value": 99000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-06T09:00:00Z",
+      "updated_at": "2026-02-06T09:00:00Z",
+      "published_at": "2026-02-06T10:00:00Z"
+    },
+    {
+      "id": "plan-pro",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "pro",
+      "title": "Pro",
+      "metadata": {
+        "tagline": {
+          "value": "For power users"
+        },
+        "price": {
+          "value": 2900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 5
+        },
+        "storage": {
+          "value": 250
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "Unlimited projects",
+            "Priority support",
+            "API access"
+          ]
+        },
+        "yearly": {
+          "value": 29000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-07T09:00:00Z",
+      "updated_at": "2026-02-07T09:00:00Z",
+      "published_at": "2026-02-07T10:00:00Z"
+    },
+    {
+      "id": "plan-scale",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "scale",
+      "title": "Scale",
+      "metadata": {
+        "tagline": {
+          "value": "For high traffic"
+        },
+        "price": {
+          "value": 19900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 100
+        },
+        "storage": {
+          "value": 2000
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "Unlimited projects",
+            "Single sign-on",
+            "API access",
+            "Dedicated support"
+          ]
+        },
+        "yearly": {
+          "value": 199000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-08T09:00:00Z",
+      "updated_at": "2026-02-08T09:00:00Z",
+      "published_at": "2026-02-08T10:00:00Z"
+    },
+    {
+      "id": "plan-studio",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "studio",
+      "title": "Studio",
+      "metadata": {
+        "tagline": {
+          "value": "For agencies"
+        },
+        "price": {
+          "value": 14900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 40
+        },
+        "storage": {
+          "value": 1500
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "Client workspaces",
+            "White label",
+            "Roles and permissions",
+            "API access"
+          ]
+        },
+        "yearly": {
+          "value": 149000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-09T09:00:00Z",
+      "updated_at": "2026-02-09T09:00:00Z",
+      "published_at": "2026-02-09T10:00:00Z"
+    },
+    {
+      "id": "plan-enterprise",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "enterprise",
+      "title": "Enterprise",
+      "metadata": {
+        "tagline": {
+          "value": "For large companies"
+        },
+        "price": {
+          "value": 49900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 500
+        },
+        "storage": {
+          "value": 10000
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "Unlimited everything",
+            "Single sign-on",
+            "Dedicated manager",
+            "Service level agreement"
+          ]
+        },
+        "yearly": {
+          "value": 499000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-10T09:00:00Z",
+      "updated_at": "2026-02-10T09:00:00Z",
+      "published_at": "2026-02-10T10:00:00Z"
+    },
+    {
+      "id": "plan-legacy-starter",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "legacy-starter",
+      "title": "Legacy Starter",
+      "metadata": {
+        "tagline": {
+          "value": "Kept for old accounts"
+        },
+        "price": {
+          "value": 500
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 2
+        },
+        "storage": {
+          "value": 5
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "legacy"
+        },
+        "features": {
+          "value": [
+            "2 projects",
+            "Email support"
+          ]
+        },
+        "yearly": {
+          "value": 5000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-11T09:00:00Z",
+      "updated_at": "2026-02-11T09:00:00Z",
+      "published_at": "2026-02-11T10:00:00Z"
+    },
+    {
+      "id": "plan-legacy-team",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "legacy-team",
+      "title": "Legacy Team",
+      "metadata": {
+        "tagline": {
+          "value": "Kept for old accounts"
+        },
+        "price": {
+          "value": 2500
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 10
+        },
+        "storage": {
+          "value": 100
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "legacy"
+        },
+        "features": {
+          "value": [
+            "10 projects",
+            "Email support",
+            "Basic reports"
+          ]
+        },
+        "yearly": {
+          "value": 25000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-01-12T09:00:00Z",
+      "updated_at": "2026-02-12T09:00:00Z",
+      "published_at": "2026-02-12T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/posts.json b/xgen/fixtures/posts.json
new file mode 100644
index 0000000..6212b74
--- /dev/null
+++ b/xgen/fixtures/posts.json
@@ -0,0 +1,199 @@
+{
+  "collection": "posts",
+  "kind": "post",
+  "entries": [
+    {
+      "id": "post-static-first",
+      "locale": "en",
+      "kind": "post",
+      "status": "published",
+      "visibility": "public",
+      "slug": "static-first",
+      "title": "Why static-first pages still win",
+      "excerpt": "Less script, less waiting, and pages that keep working offline.",
+      "author_id": "user-mara-quinn",
+      "featured_media_id": "media-static-first",
+      "terms": [
+        {
+          "taxonomy": "category",
+          "term_id": "category-engineering"
+        }
+      ],
+      "metadata": {
+        "date": {
+          "value": "2026-03-18T10:00:00Z"
+        },
+        "minutes": {
+          "value": 6
+        },
+        "icon": {
+          "value": "zap"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "post-design-tokens",
+      "locale": "en",
+      "kind": "post",
+      "status": "published",
+      "visibility": "public",
+      "slug": "design-tokens",
+      "title": "Design tokens without the drift",
+      "excerpt": "How one list of tokens feeds every runtime and every theme.",
+      "author_id": "user-aya-tanaka",
+      "terms": [
+        {
+          "taxonomy": "category",
+          "term_id": "category-design"
+        }
+      ],
+      "metadata": {
+        "date": {
+          "value": "2026-03-11T10:00:00Z"
+        },
+        "minutes": {
+          "value": 5
+        },
+        "icon": {
+          "value": "palette"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "post-launch-notes",
+      "locale": "en",
+      "kind": "post",
+      "status": "published",
+      "visibility": "public",
+      "slug": "launch-notes",
+      "title": "Launch notes for spring",
+      "excerpt": "New blocks, faster builds and a calmer dashboard.",
+      "author_id": "user-jon-ellis",
+      "terms": [
+        {
+          "taxonomy": "category",
+          "term_id": "category-product"
+        }
+      ],
+      "metadata": {
+        "date": {
+          "value": "2026-03-04T10:00:00Z"
+        },
+        "minutes": {
+          "value": 3
+        },
+        "icon": {
+          "value": "megaphone"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "post-small-teams",
+      "locale": "en",
+      "kind": "post",
+      "status": "published",
+      "visibility": "public",
+      "slug": "small-teams",
+      "title": "Shipping with a small team",
+      "excerpt": "A short checklist that keeps a team of four on track.",
+      "author_id": "user-luis-ortega",
+      "terms": [
+        {
+          "taxonomy": "category",
+          "term_id": "category-company"
+        }
+      ],
+      "metadata": {
+        "date": {
+          "value": "2026-02-25T10:00:00Z"
+        },
+        "minutes": {
+          "value": 4
+        },
+        "icon": {
+          "value": "users"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "post-accessible-forms",
+      "locale": "en",
+      "kind": "post",
+      "status": "published",
+      "visibility": "public",
+      "slug": "accessible-forms",
+      "title": "Accessible forms in an afternoon",
+      "excerpt": "Labels, errors and focus: the three things that matter most.",
+      "author_id": "user-mara-quinn",
+      "terms": [
+        {
+          "taxonomy": "category",
+          "term_id": "category-engineering"
+        }
+      ],
+      "metadata": {
+        "date": {
+          "value": "2026-02-14T10:00:00Z"
+        },
+        "minutes": {
+          "value": 7
+        },
+        "icon": {
+          "value": "text-cursor-input"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    },
+    {
+      "id": "post-pricing-page",
+      "locale": "en",
+      "kind": "post",
+      "status": "published",
+      "visibility": "public",
+      "slug": "pricing-page",
+      "title": "What a good pricing page shows",
+      "excerpt": "Plans, limits and answers, in that order.",
+      "author_id": "user-jon-ellis",
+      "terms": [
+        {
+          "taxonomy": "category",
+          "term_id": "category-growth"
+        }
+      ],
+      "metadata": {
+        "date": {
+          "value": "2026-02-02T10:00:00Z"
+        },
+        "minutes": {
+          "value": 5
+        },
+        "icon": {
+          "value": "badge-dollar-sign"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-11T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/posttags.json b/xgen/fixtures/posttags.json
new file mode 100644
index 0000000..2b96af9
--- /dev/null
+++ b/xgen/fixtures/posttags.json
@@ -0,0 +1,78 @@
+{
+  "collection": "posttags",
+  "kind": "posttag",
+  "entries": [
+    {
+      "id": "posttag-performance",
+      "locale": "en",
+      "kind": "posttag",
+      "status": "published",
+      "visibility": "public",
+      "slug": "performance",
+      "title": "Performance",
+      "metadata": {
+        "icon": {
+          "value": "zap"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "posttag-static",
+      "locale": "en",
+      "kind": "posttag",
+      "status": "published",
+      "visibility": "public",
+      "slug": "static",
+      "title": "Static sites",
+      "metadata": {
+        "icon": {
+          "value": "layers"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "posttag-caching",
+      "locale": "en",
+      "kind": "posttag",
+      "status": "published",
+      "visibility": "public",
+      "slug": "caching",
+      "title": "Caching",
+      "metadata": {
+        "icon": {
+          "value": "rotate-ccw"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "posttag-offline",
+      "locale": "en",
+      "kind": "posttag",
+      "status": "published",
+      "visibility": "public",
+      "slug": "offline",
+      "title": "Offline",
+      "metadata": {
+        "icon": {
+          "value": "globe"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/products.json b/xgen/fixtures/products.json
new file mode 100644
index 0000000..f34c3d4
--- /dev/null
+++ b/xgen/fixtures/products.json
@@ -0,0 +1,270 @@
+{
+  "collection": "products",
+  "kind": "product",
+  "entries": [
+    {
+      "id": "product-lamp",
+      "locale": "en",
+      "kind": "product",
+      "status": "published",
+      "visibility": "public",
+      "slug": "lamp",
+      "title": "Arc desk lamp",
+      "featured_media_id": "media-lamp",
+      "terms": [
+        {
+          "taxonomy": "product_category",
+          "term_id": "product-category-light"
+        }
+      ],
+      "metadata": {
+        "summary": {
+          "value": "Warm, dimmable light with a weighted base."
+        },
+        "price": {
+          "value": 8900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "rating": {
+          "value": 4.5
+        },
+        "reviews": {
+          "value": 128
+        },
+        "badge": {
+          "value": "new"
+        },
+        "inStock": {
+          "value": true
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "product-bag",
+      "locale": "en",
+      "kind": "product",
+      "status": "published",
+      "visibility": "public",
+      "slug": "bag",
+      "title": "Field backpack",
+      "featured_media_id": "media-bag",
+      "terms": [
+        {
+          "taxonomy": "product_category",
+          "term_id": "product-category-bags"
+        }
+      ],
+      "metadata": {
+        "summary": {
+          "value": "Water-resistant, 22 litres, fits a 16 inch laptop."
+        },
+        "price": {
+          "value": 12900
+        },
+        "compare_at": {
+          "value": 15900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "rating": {
+          "value": 4.8
+        },
+        "reviews": {
+          "value": 342
+        },
+        "badge": {
+          "value": ""
+        },
+        "inStock": {
+          "value": true
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "product-phones",
+      "locale": "en",
+      "kind": "product",
+      "status": "published",
+      "visibility": "public",
+      "slug": "phones",
+      "title": "Studio headphones",
+      "featured_media_id": "media-phones",
+      "terms": [
+        {
+          "taxonomy": "product_category",
+          "term_id": "product-category-audio"
+        }
+      ],
+      "metadata": {
+        "summary": {
+          "value": "Closed-back, 40 hour battery, wired and wireless."
+        },
+        "price": {
+          "value": 19900
+        },
+        "compare_at": {
+          "value": 24900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "rating": {
+          "value": 4.6
+        },
+        "reviews": {
+          "value": 87
+        },
+        "badge": {
+          "value": "sale"
+        },
+        "inStock": {
+          "value": true
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "product-stand",
+      "locale": "en",
+      "kind": "product",
+      "status": "published",
+      "visibility": "public",
+      "slug": "stand",
+      "title": "Laptop stand",
+      "terms": [
+        {
+          "taxonomy": "product_category",
+          "term_id": "product-category-desk"
+        }
+      ],
+      "metadata": {
+        "summary": {
+          "value": "Aluminium, folds flat, six heights."
+        },
+        "price": {
+          "value": 4900
+        },
+        "compare_at": {
+          "value": 5900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "rating": {
+          "value": 4.3
+        },
+        "reviews": {
+          "value": 210
+        },
+        "badge": {
+          "value": ""
+        },
+        "inStock": {
+          "value": false
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "product-mat",
+      "locale": "en",
+      "kind": "product",
+      "status": "published",
+      "visibility": "public",
+      "slug": "mat",
+      "title": "Desk mat",
+      "terms": [
+        {
+          "taxonomy": "product_category",
+          "term_id": "product-category-desk"
+        }
+      ],
+      "metadata": {
+        "summary": {
+          "value": "Felt top with a non-slip base, 90 by 40 cm."
+        },
+        "price": {
+          "value": 3500
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "rating": {
+          "value": 4.4
+        },
+        "reviews": {
+          "value": 64
+        },
+        "badge": {
+          "value": "new"
+        },
+        "inStock": {
+          "value": true
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    },
+    {
+      "id": "product-card",
+      "locale": "en",
+      "kind": "product",
+      "status": "published",
+      "visibility": "public",
+      "slug": "card",
+      "title": "Gift card",
+      "terms": [
+        {
+          "taxonomy": "product_category",
+          "term_id": "product-category-gifts"
+        }
+      ],
+      "metadata": {
+        "summary": {
+          "value": "Delivered by email, never expires."
+        },
+        "price": {
+          "value": 5000
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "rating": {
+          "value": 5
+        },
+        "reviews": {
+          "value": 19
+        },
+        "badge": {
+          "value": ""
+        },
+        "inStock": {
+          "value": true
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-11T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/profilefacts.json b/xgen/fixtures/profilefacts.json
new file mode 100644
index 0000000..fd67dcb
--- /dev/null
+++ b/xgen/fixtures/profilefacts.json
@@ -0,0 +1,78 @@
+{
+  "collection": "profilefacts",
+  "kind": "profilefact",
+  "entries": [
+    {
+      "id": "profilefact-role",
+      "locale": "en",
+      "kind": "profilefact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "role",
+      "title": "Role",
+      "metadata": {
+        "value": {
+          "value": "Product designer"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "profilefact-based",
+      "locale": "en",
+      "kind": "profilefact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "based",
+      "title": "Based in",
+      "metadata": {
+        "value": {
+          "value": "Lisbon"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "profilefact-years",
+      "locale": "en",
+      "kind": "profilefact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "years",
+      "title": "Experience",
+      "metadata": {
+        "value": {
+          "value": "9 years"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "profilefact-status",
+      "locale": "en",
+      "kind": "profilefact",
+      "status": "published",
+      "visibility": "public",
+      "slug": "status",
+      "title": "Status",
+      "metadata": {
+        "value": {
+          "value": "Open to projects"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/projects.json b/xgen/fixtures/projects.json
new file mode 100644
index 0000000..4da01bb
--- /dev/null
+++ b/xgen/fixtures/projects.json
@@ -0,0 +1,241 @@
+{
+  "collection": "projects",
+  "kind": "project",
+  "entries": [
+    {
+      "id": "project-atlas",
+      "locale": "en",
+      "kind": "project",
+      "status": "published",
+      "visibility": "public",
+      "slug": "atlas",
+      "title": "Atlas dashboard",
+      "metadata": {
+        "year": {
+          "value": 2026
+        },
+        "summary": {
+          "value": "An analytics dashboard for a logistics team: one screen for the whole fleet."
+        },
+        "tags": {
+          "value": [
+            "Svelte",
+            "Charts",
+            "Design system"
+          ]
+        },
+        "featured": {
+          "value": true
+        },
+        "client": {
+          "value": "Northwind Freight"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "project_category",
+          "term_id": "project-category-product-design"
+        }
+      ]
+    },
+    {
+      "id": "project-harbor",
+      "locale": "en",
+      "kind": "project",
+      "status": "published",
+      "visibility": "public",
+      "slug": "harbor",
+      "title": "Harbor booking",
+      "metadata": {
+        "year": {
+          "value": 2025
+        },
+        "summary": {
+          "value": "Booking flow for a chain of marinas, from the map to the receipt."
+        },
+        "tags": {
+          "value": [
+            "React",
+            "Payments"
+          ]
+        },
+        "featured": {
+          "value": false
+        },
+        "client": {
+          "value": "Bluewater"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "project_category",
+          "term_id": "project-category-web-app"
+        }
+      ]
+    },
+    {
+      "id": "project-lumen",
+      "locale": "en",
+      "kind": "project",
+      "status": "published",
+      "visibility": "public",
+      "slug": "lumen",
+      "title": "Lumen brand",
+      "metadata": {
+        "year": {
+          "value": 2025
+        },
+        "summary": {
+          "value": "Identity, type and a site for a lighting studio."
+        },
+        "tags": {
+          "value": [
+            "Brand",
+            "Website"
+          ]
+        },
+        "featured": {
+          "value": false
+        },
+        "client": {
+          "value": "Lumen Studio"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "project_category",
+          "term_id": "project-category-branding"
+        }
+      ]
+    },
+    {
+      "id": "project-orbit",
+      "locale": "en",
+      "kind": "project",
+      "status": "published",
+      "visibility": "public",
+      "slug": "orbit",
+      "title": "Orbit mobile",
+      "metadata": {
+        "year": {
+          "value": 2024
+        },
+        "summary": {
+          "value": "A habit tracker that fits on the lock screen."
+        },
+        "tags": {
+          "value": [
+            "iOS",
+            "Android"
+          ]
+        },
+        "featured": {
+          "value": true
+        },
+        "client": {
+          "value": "Orbit Labs"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "project_category",
+          "term_id": "project-category-mobile"
+        }
+      ]
+    },
+    {
+      "id": "project-field",
+      "locale": "en",
+      "kind": "project",
+      "status": "published",
+      "visibility": "public",
+      "slug": "field",
+      "title": "Field notes",
+      "metadata": {
+        "year": {
+          "value": 2024
+        },
+        "summary": {
+          "value": "A long-read magazine with a reading mode and offline issues."
+        },
+        "tags": {
+          "value": [
+            "Vue",
+            "Content"
+          ]
+        },
+        "featured": {
+          "value": false
+        },
+        "client": {
+          "value": "Field Press"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-10T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "project_category",
+          "term_id": "project-category-editorial"
+        }
+      ]
+    },
+    {
+      "id": "project-cedar",
+      "locale": "en",
+      "kind": "project",
+      "status": "published",
+      "visibility": "public",
+      "slug": "cedar",
+      "title": "Cedar store",
+      "metadata": {
+        "year": {
+          "value": 2023
+        },
+        "summary": {
+          "value": "A small furniture store with a configurator and same-day delivery."
+        },
+        "tags": {
+          "value": [
+            "Commerce",
+            "3D"
+          ]
+        },
+        "featured": {
+          "value": false
+        },
+        "client": {
+          "value": "Cedar and Co"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-12T09:00:00Z",
+      "updated_at": "2026-03-13T09:00:00Z",
+      "published_at": "2026-03-13T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "project_category",
+          "term_id": "project-category-commerce"
+        }
+      ]
+    }
+  ]
+}
diff --git a/xgen/fixtures/promos.json b/xgen/fixtures/promos.json
new file mode 100644
index 0000000..b9a0938
--- /dev/null
+++ b/xgen/fixtures/promos.json
@@ -0,0 +1,48 @@
+{
+  "collection": "promos",
+  "kind": "promo",
+  "entries": [
+    {
+      "id": "promo-welcome",
+      "locale": "en",
+      "kind": "promo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "welcome",
+      "title": "WELCOME10",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "promo-freeship",
+      "locale": "en",
+      "kind": "promo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "freeship",
+      "title": "FREESHIP",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "promo-desk",
+      "locale": "en",
+      "kind": "promo",
+      "status": "published",
+      "visibility": "public",
+      "slug": "desk",
+      "title": "DESK15",
+      "metadata": {},
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/prompts.json b/xgen/fixtures/prompts.json
new file mode 100644
index 0000000..79d3ccd
--- /dev/null
+++ b/xgen/fixtures/prompts.json
@@ -0,0 +1,111 @@
+{
+  "collection": "prompts",
+  "kind": "prompt",
+  "entries": [
+    {
+      "id": "prompt-code",
+      "locale": "en",
+      "kind": "prompt",
+      "status": "published",
+      "visibility": "public",
+      "slug": "code",
+      "title": "Code",
+      "metadata": {
+        "icon": {
+          "value": "code-xml"
+        },
+        "value": {
+          "value": "code"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "prompt-landing",
+      "locale": "en",
+      "kind": "prompt",
+      "status": "published",
+      "visibility": "public",
+      "slug": "landing",
+      "title": "Landing",
+      "metadata": {
+        "icon": {
+          "value": "layout-grid"
+        },
+        "value": {
+          "value": "landing"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "prompt-dashboard",
+      "locale": "en",
+      "kind": "prompt",
+      "status": "published",
+      "visibility": "public",
+      "slug": "dashboard",
+      "title": "Dashboard",
+      "metadata": {
+        "icon": {
+          "value": "activity"
+        },
+        "value": {
+          "value": "dashboard"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "prompt-mini-game",
+      "locale": "en",
+      "kind": "prompt",
+      "status": "published",
+      "visibility": "public",
+      "slug": "mini-game",
+      "title": "Mini Game",
+      "metadata": {
+        "icon": {
+          "value": "puzzle"
+        },
+        "value": {
+          "value": "mini-game"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "prompt-data",
+      "locale": "en",
+      "kind": "prompt",
+      "status": "published",
+      "visibility": "public",
+      "slug": "data",
+      "title": "Data",
+      "metadata": {
+        "icon": {
+          "value": "blocks"
+        },
+        "value": {
+          "value": "data"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/questions.json b/xgen/fixtures/questions.json
new file mode 100644
index 0000000..928bfc3
--- /dev/null
+++ b/xgen/fixtures/questions.json
@@ -0,0 +1,168 @@
+{
+  "collection": "questions",
+  "kind": "question",
+  "entries": [
+    {
+      "id": "question-start",
+      "locale": "en",
+      "kind": "question",
+      "status": "published",
+      "visibility": "public",
+      "slug": "start",
+      "title": "How do I start a new site?",
+      "metadata": {
+        "answer": {
+          "value": "Pick a template, change the texts in one dictionary and publish. Most sites are live in an hour."
+        },
+        "icon": {
+          "value": "rocket"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-getting-started"
+        }
+      ]
+    },
+    {
+      "id": "question-domain",
+      "locale": "en",
+      "kind": "question",
+      "status": "published",
+      "visibility": "public",
+      "slug": "domain",
+      "title": "Can I use my own domain?",
+      "metadata": {
+        "answer": {
+          "value": "Yes. Point your domain at the site and we issue the certificate for you."
+        },
+        "icon": {
+          "value": "globe"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-getting-started"
+        }
+      ]
+    },
+    {
+      "id": "question-billing",
+      "locale": "en",
+      "kind": "question",
+      "status": "published",
+      "visibility": "public",
+      "slug": "billing",
+      "title": "When am I billed?",
+      "metadata": {
+        "answer": {
+          "value": "On the same day each month. You can switch to yearly billing and save two months."
+        },
+        "icon": {
+          "value": "credit-card"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-billing"
+        }
+      ]
+    },
+    {
+      "id": "question-refund",
+      "locale": "en",
+      "kind": "question",
+      "status": "published",
+      "visibility": "public",
+      "slug": "refund",
+      "title": "Do you give refunds?",
+      "metadata": {
+        "answer": {
+          "value": "Within 30 days of a payment, no questions asked."
+        },
+        "icon": {
+          "value": "rotate-ccw"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-billing"
+        }
+      ]
+    },
+    {
+      "id": "question-team",
+      "locale": "en",
+      "kind": "question",
+      "status": "published",
+      "visibility": "public",
+      "slug": "team",
+      "title": "How do I invite my team?",
+      "metadata": {
+        "answer": {
+          "value": "Open the settings, add their addresses and choose what each person can edit."
+        },
+        "icon": {
+          "value": "users"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-10T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-account"
+        }
+      ]
+    },
+    {
+      "id": "question-export",
+      "locale": "en",
+      "kind": "question",
+      "status": "published",
+      "visibility": "public",
+      "slug": "export",
+      "title": "Can I take my content with me?",
+      "metadata": {
+        "answer": {
+          "value": "Every plan exports all pages and texts as plain files at any time."
+        },
+        "icon": {
+          "value": "download"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-12T09:00:00Z",
+      "updated_at": "2026-03-13T09:00:00Z",
+      "published_at": "2026-03-13T10:00:00Z",
+      "terms": [
+        {
+          "taxonomy": "faq_category",
+          "term_id": "faq-category-account"
+        }
+      ]
+    }
+  ]
+}
diff --git a/xgen/fixtures/reviews.json b/xgen/fixtures/reviews.json
new file mode 100644
index 0000000..0b7538e
--- /dev/null
+++ b/xgen/fixtures/reviews.json
@@ -0,0 +1,81 @@
+{
+  "collection": "reviews",
+  "kind": "review",
+  "entries": [
+    {
+      "id": "review-r1",
+      "locale": "en",
+      "kind": "review",
+      "status": "published",
+      "visibility": "public",
+      "slug": "r1",
+      "title": "Great light for late work",
+      "author_id": "user-dana-pierce",
+      "metadata": {
+        "rating": {
+          "value": 5
+        },
+        "text": {
+          "value": "Bright enough to read, soft enough to relax. The base stays put."
+        },
+        "date": {
+          "value": "2026-03-12T10:00:00Z"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "review-r2",
+      "locale": "en",
+      "kind": "review",
+      "status": "published",
+      "visibility": "public",
+      "slug": "r2",
+      "title": "Solid and simple",
+      "author_id": "user-ravi-menon",
+      "metadata": {
+        "rating": {
+          "value": 4
+        },
+        "text": {
+          "value": "Build quality is better than the price suggests."
+        },
+        "date": {
+          "value": "2026-03-03T10:00:00Z"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "review-r3",
+      "locale": "en",
+      "kind": "review",
+      "status": "published",
+      "visibility": "public",
+      "slug": "r3",
+      "title": "Does the job",
+      "author_id": "user-elena-brandt",
+      "metadata": {
+        "rating": {
+          "value": 4
+        },
+        "text": {
+          "value": "Easy setup. I would like one more color."
+        },
+        "date": {
+          "value": "2026-02-19T10:00:00Z"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/rivals.json b/xgen/fixtures/rivals.json
new file mode 100644
index 0000000..6e0b197
--- /dev/null
+++ b/xgen/fixtures/rivals.json
@@ -0,0 +1,126 @@
+{
+  "collection": "rivals",
+  "kind": "row",
+  "entries": [
+    {
+      "id": "row-speed",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "speed",
+      "title": "Median load time",
+      "metadata": {
+        "a": {
+          "value": "0.8 s"
+        },
+        "b": {
+          "value": "2.4 s"
+        },
+        "c": {
+          "value": "3.1 s"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "row-runtimes",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "runtimes",
+      "title": "Svelte and React",
+      "metadata": {
+        "a": {
+          "value": "yes"
+        },
+        "b": {
+          "value": "no"
+        },
+        "c": {
+          "value": "no"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "row-a11y",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "a11y",
+      "title": "Accessibility checks",
+      "metadata": {
+        "a": {
+          "value": "yes"
+        },
+        "b": {
+          "value": "yes"
+        },
+        "c": {
+          "value": "no"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "row-drift",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "drift",
+      "title": "Drift check",
+      "metadata": {
+        "a": {
+          "value": "yes"
+        },
+        "b": {
+          "value": "no"
+        },
+        "c": {
+          "value": "no"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "row-free",
+      "locale": "en",
+      "kind": "row",
+      "status": "published",
+      "visibility": "public",
+      "slug": "free",
+      "title": "Free tier",
+      "metadata": {
+        "a": {
+          "value": "yes"
+        },
+        "b": {
+          "value": "yes"
+        },
+        "c": {
+          "value": "no"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/series.json b/xgen/fixtures/series.json
new file mode 100644
index 0000000..3738adf
--- /dev/null
+++ b/xgen/fixtures/series.json
@@ -0,0 +1,132 @@
+{
+  "collection": "series",
+  "kind": "point",
+  "entries": [
+    {
+      "id": "point-mon",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "mon",
+      "title": "Mon",
+      "metadata": {
+        "value": {
+          "value": 42
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "point-tue",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "tue",
+      "title": "Tue",
+      "metadata": {
+        "value": {
+          "value": 58
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "point-wed",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "wed",
+      "title": "Wed",
+      "metadata": {
+        "value": {
+          "value": 51
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "point-thu",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "thu",
+      "title": "Thu",
+      "metadata": {
+        "value": {
+          "value": 74
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "point-fri",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "fri",
+      "title": "Fri",
+      "metadata": {
+        "value": {
+          "value": 66
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    },
+    {
+      "id": "point-sat",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "sat",
+      "title": "Sat",
+      "metadata": {
+        "value": {
+          "value": 31
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-11T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    },
+    {
+      "id": "point-sun",
+      "locale": "en",
+      "kind": "point",
+      "status": "published",
+      "visibility": "public",
+      "slug": "sun",
+      "title": "Sun",
+      "metadata": {
+        "value": {
+          "value": 24
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-13T09:00:00Z",
+      "updated_at": "2026-03-14T09:00:00Z",
+      "published_at": "2026-03-14T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/sidenav.json b/xgen/fixtures/sidenav.json
new file mode 100644
index 0000000..428c723
--- /dev/null
+++ b/xgen/fixtures/sidenav.json
@@ -0,0 +1,111 @@
+{
+  "collection": "sidenav",
+  "kind": "menu_item",
+  "entries": [
+    {
+      "id": "item-overview",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "overview",
+      "title": "Overview",
+      "metadata": {
+        "location": {
+          "value": "sidebar"
+        },
+        "icon": {
+          "value": "layout-dashboard"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "item-orders",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "orders",
+      "title": "Orders",
+      "metadata": {
+        "location": {
+          "value": "sidebar"
+        },
+        "icon": {
+          "value": "shopping-bag"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "item-customers",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "customers",
+      "title": "Customers",
+      "metadata": {
+        "location": {
+          "value": "sidebar"
+        },
+        "icon": {
+          "value": "users"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "item-reports",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "reports",
+      "title": "Reports",
+      "metadata": {
+        "location": {
+          "value": "sidebar"
+        },
+        "icon": {
+          "value": "file-text"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "item-settings",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "settings",
+      "title": "Settings",
+      "metadata": {
+        "location": {
+          "value": "sidebar"
+        },
+        "icon": {
+          "value": "settings"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/sitemap.json b/xgen/fixtures/sitemap.json
new file mode 100644
index 0000000..0f89e86
--- /dev/null
+++ b/xgen/fixtures/sitemap.json
@@ -0,0 +1,90 @@
+{
+  "collection": "sitemap",
+  "kind": "menu_item",
+  "entries": [
+    {
+      "id": "group-product",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "footer-product",
+      "title": "Product",
+      "metadata": {
+        "location": {
+          "value": "footer"
+        },
+        "icon": {
+          "value": "layers"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "group-company",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "footer-company",
+      "title": "Company",
+      "metadata": {
+        "location": {
+          "value": "footer"
+        },
+        "icon": {
+          "value": "building"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "group-resources",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "footer-resources",
+      "title": "Resources",
+      "metadata": {
+        "location": {
+          "value": "footer"
+        },
+        "icon": {
+          "value": "book-open"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "group-legal",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "footer-legal",
+      "title": "Legal",
+      "metadata": {
+        "location": {
+          "value": "footer"
+        },
+        "icon": {
+          "value": "shield"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/skills.json b/xgen/fixtures/skills.json
new file mode 100644
index 0000000..8666792
--- /dev/null
+++ b/xgen/fixtures/skills.json
@@ -0,0 +1,96 @@
+{
+  "collection": "skills",
+  "kind": "skill",
+  "entries": [
+    {
+      "id": "skill-systems",
+      "locale": "en",
+      "kind": "skill",
+      "status": "published",
+      "visibility": "public",
+      "slug": "systems",
+      "title": "Design systems",
+      "metadata": {
+        "level": {
+          "value": 95
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "skill-research",
+      "locale": "en",
+      "kind": "skill",
+      "status": "published",
+      "visibility": "public",
+      "slug": "research",
+      "title": "User research",
+      "metadata": {
+        "level": {
+          "value": 85
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "skill-prototyping",
+      "locale": "en",
+      "kind": "skill",
+      "status": "published",
+      "visibility": "public",
+      "slug": "prototyping",
+      "title": "Prototyping",
+      "metadata": {
+        "level": {
+          "value": 90
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "skill-frontend",
+      "locale": "en",
+      "kind": "skill",
+      "status": "published",
+      "visibility": "public",
+      "slug": "frontend",
+      "title": "Frontend code",
+      "metadata": {
+        "level": {
+          "value": 70
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    },
+    {
+      "id": "skill-writing",
+      "locale": "en",
+      "kind": "skill",
+      "status": "published",
+      "visibility": "public",
+      "slug": "writing",
+      "title": "Product writing",
+      "metadata": {
+        "level": {
+          "value": 80
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-10T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/specs.json b/xgen/fixtures/specs.json
new file mode 100644
index 0000000..dae753f
--- /dev/null
+++ b/xgen/fixtures/specs.json
@@ -0,0 +1,96 @@
+{
+  "collection": "specs",
+  "kind": "spec",
+  "entries": [
+    {
+      "id": "spec-category",
+      "locale": "en",
+      "kind": "spec",
+      "status": "published",
+      "visibility": "public",
+      "slug": "category",
+      "title": "Category",
+      "metadata": {
+        "value": {
+          "value": "Lighting"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "spec-weight",
+      "locale": "en",
+      "kind": "spec",
+      "status": "published",
+      "visibility": "public",
+      "slug": "weight",
+      "title": "Weight",
+      "metadata": {
+        "value": {
+          "value": "1.2 kg"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "spec-size",
+      "locale": "en",
+      "kind": "spec",
+      "status": "published",
+      "visibility": "public",
+      "slug": "size",
+      "title": "Size",
+      "metadata": {
+        "value": {
+          "value": "42 x 18 cm"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "spec-material",
+      "locale": "en",
+      "kind": "spec",
+      "status": "published",
+      "visibility": "public",
+      "slug": "material",
+      "title": "Material",
+      "metadata": {
+        "value": {
+          "value": "Aluminium"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    },
+    {
+      "id": "spec-warranty",
+      "locale": "en",
+      "kind": "spec",
+      "status": "published",
+      "visibility": "public",
+      "slug": "warranty",
+      "title": "Warranty",
+      "metadata": {
+        "value": {
+          "value": "2 years"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-10T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/stats.json b/xgen/fixtures/stats.json
new file mode 100644
index 0000000..47396ae
--- /dev/null
+++ b/xgen/fixtures/stats.json
@@ -0,0 +1,108 @@
+{
+  "collection": "stats",
+  "kind": "stat",
+  "entries": [
+    {
+      "id": "stat-sites",
+      "locale": "en",
+      "kind": "stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "sites",
+      "title": "Sites published",
+      "metadata": {
+        "value": {
+          "value": 12400
+        },
+        "icon": {
+          "value": "globe"
+        },
+        "hint": {
+          "value": "since launch"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "stat-uptime",
+      "locale": "en",
+      "kind": "stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "uptime",
+      "title": "Uptime",
+      "metadata": {
+        "value": {
+          "value": 99.99
+        },
+        "unit": {
+          "value": "percent"
+        },
+        "icon": {
+          "value": "activity"
+        },
+        "hint": {
+          "value": "last 12 months"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "stat-teams",
+      "locale": "en",
+      "kind": "stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "teams",
+      "title": "Teams",
+      "metadata": {
+        "value": {
+          "value": 3200
+        },
+        "icon": {
+          "value": "users"
+        },
+        "hint": {
+          "value": "in 60 countries"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "stat-speed",
+      "locale": "en",
+      "kind": "stat",
+      "status": "published",
+      "visibility": "public",
+      "slug": "speed",
+      "title": "Median load",
+      "metadata": {
+        "value": {
+          "value": 0.8
+        },
+        "unit": {
+          "value": "second"
+        },
+        "icon": {
+          "value": "zap"
+        },
+        "hint": {
+          "value": "on a mobile network"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/steps.json b/xgen/fixtures/steps.json
new file mode 100644
index 0000000..e68df73
--- /dev/null
+++ b/xgen/fixtures/steps.json
@@ -0,0 +1,90 @@
+{
+  "collection": "steps",
+  "kind": "step",
+  "entries": [
+    {
+      "id": "step-plan",
+      "locale": "en",
+      "kind": "step",
+      "status": "published",
+      "visibility": "public",
+      "slug": "plan",
+      "title": "Pick a plan",
+      "metadata": {
+        "text": {
+          "value": "Start free and upgrade when the team grows."
+        },
+        "icon": {
+          "value": "clipboard-list"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "step-connect",
+      "locale": "en",
+      "kind": "step",
+      "status": "published",
+      "visibility": "public",
+      "slug": "connect",
+      "title": "Connect your data",
+      "metadata": {
+        "text": {
+          "value": "Point the site at your collections and content."
+        },
+        "icon": {
+          "value": "database"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "step-design",
+      "locale": "en",
+      "kind": "step",
+      "status": "published",
+      "visibility": "public",
+      "slug": "design",
+      "title": "Choose the blocks",
+      "metadata": {
+        "text": {
+          "value": "Compose pages from ready blocks and variants."
+        },
+        "icon": {
+          "value": "layout-grid"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "step-launch",
+      "locale": "en",
+      "kind": "step",
+      "status": "published",
+      "visibility": "public",
+      "slug": "launch",
+      "title": "Publish",
+      "metadata": {
+        "text": {
+          "value": "Ship to every runtime with one command."
+        },
+        "icon": {
+          "value": "rocket"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/stores.json b/xgen/fixtures/stores.json
new file mode 100644
index 0000000..4423351
--- /dev/null
+++ b/xgen/fixtures/stores.json
@@ -0,0 +1,151 @@
+{
+  "collection": "stores",
+  "kind": "store",
+  "entries": [
+    {
+      "id": "store-market",
+      "locale": "en",
+      "kind": "store",
+      "status": "published",
+      "visibility": "public",
+      "slug": "market",
+      "title": "Market Street",
+      "metadata": {
+        "store_kind": {
+          "value": "pickup"
+        },
+        "address": {
+          "value": "18 Market Street"
+        },
+        "hours": {
+          "value": "Daily, 8:00 to 23:00"
+        },
+        "phone": {
+          "value": "+1 555 0145"
+        },
+        "note": {
+          "value": "Five minutes from Central station"
+        },
+        "services": {
+          "value": [
+            "Pickup in 30 minutes",
+            "Gift wrapping",
+            "Repairs"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "store-harbour",
+      "locale": "en",
+      "kind": "store",
+      "status": "published",
+      "visibility": "public",
+      "slug": "harbour",
+      "title": "Harbour Road",
+      "metadata": {
+        "store_kind": {
+          "value": "pickup"
+        },
+        "address": {
+          "value": "71 Harbour Road"
+        },
+        "hours": {
+          "value": "Daily, 8:00 to 22:00"
+        },
+        "phone": {
+          "value": "+1 555 0146"
+        },
+        "note": {
+          "value": "Parking at the back"
+        },
+        "services": {
+          "value": [
+            "Pickup in 30 minutes",
+            "Parking"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "store-hillside",
+      "locale": "en",
+      "kind": "store",
+      "status": "published",
+      "visibility": "public",
+      "slug": "hillside",
+      "title": "Hillside Mall",
+      "metadata": {
+        "store_kind": {
+          "value": "store"
+        },
+        "address": {
+          "value": "75 Hillside Avenue, level 2"
+        },
+        "hours": {
+          "value": "Daily, 9:00 to 22:00"
+        },
+        "phone": {
+          "value": "+1 555 0147"
+        },
+        "note": {
+          "value": "Inside the mall, next to the food court"
+        },
+        "services": {
+          "value": [
+            "Showroom",
+            "Parking"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "store-depot",
+      "locale": "en",
+      "kind": "store",
+      "status": "published",
+      "visibility": "public",
+      "slug": "depot",
+      "title": "North Depot",
+      "metadata": {
+        "store_kind": {
+          "value": "pickup"
+        },
+        "address": {
+          "value": "6 Depot Lane"
+        },
+        "hours": {
+          "value": "Daily, 9:00 to 23:00"
+        },
+        "phone": {
+          "value": "+1 555 0148"
+        },
+        "note": {
+          "value": "Delivery hub with a pickup desk"
+        },
+        "services": {
+          "value": [
+            "Delivery hub",
+            "Returns desk"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/subnav.json b/xgen/fixtures/subnav.json
new file mode 100644
index 0000000..b42f520
--- /dev/null
+++ b/xgen/fixtures/subnav.json
@@ -0,0 +1,111 @@
+{
+  "collection": "subnav",
+  "kind": "menu_item",
+  "entries": [
+    {
+      "id": "subitem-all",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "orders-all",
+      "title": "All orders",
+      "metadata": {
+        "location": {
+          "value": "subnav"
+        },
+        "icon": {
+          "value": "inbox"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "subitem-drafts",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "drafts",
+      "title": "Drafts",
+      "metadata": {
+        "location": {
+          "value": "subnav"
+        },
+        "icon": {
+          "value": "file-text"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "subitem-shipping",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "shipping",
+      "title": "Shipping",
+      "metadata": {
+        "location": {
+          "value": "subnav"
+        },
+        "icon": {
+          "value": "truck"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    },
+    {
+      "id": "subitem-returns",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "returns",
+      "title": "Returns",
+      "metadata": {
+        "location": {
+          "value": "subnav"
+        },
+        "icon": {
+          "value": "rotate-ccw"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-08T09:00:00Z",
+      "updated_at": "2026-03-09T09:00:00Z",
+      "published_at": "2026-03-09T10:00:00Z"
+    },
+    {
+      "id": "subitem-archive",
+      "locale": "en",
+      "kind": "menu_item",
+      "status": "published",
+      "visibility": "public",
+      "slug": "archive",
+      "title": "Archive",
+      "metadata": {
+        "location": {
+          "value": "subnav"
+        },
+        "icon": {
+          "value": "package"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-10T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/summary.json b/xgen/fixtures/summary.json
new file mode 100644
index 0000000..ee68ed0
--- /dev/null
+++ b/xgen/fixtures/summary.json
@@ -0,0 +1,102 @@
+{
+  "collection": "summary",
+  "kind": "summaryrow",
+  "entries": [
+    {
+      "id": "summaryrow-subtotal",
+      "locale": "en",
+      "kind": "summaryrow",
+      "status": "published",
+      "visibility": "public",
+      "slug": "subtotal",
+      "title": "Subtotal",
+      "metadata": {
+        "amount": {
+          "value": 28800
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "strong": {
+          "value": false
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "summaryrow-shipping",
+      "locale": "en",
+      "kind": "summaryrow",
+      "status": "published",
+      "visibility": "public",
+      "slug": "shipping",
+      "title": "Shipping",
+      "metadata": {
+        "amount": {
+          "value": 1200
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "strong": {
+          "value": false
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "summaryrow-tax",
+      "locale": "en",
+      "kind": "summaryrow",
+      "status": "published",
+      "visibility": "public",
+      "slug": "tax",
+      "title": "Tax",
+      "metadata": {
+        "amount": {
+          "value": 2400
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "strong": {
+          "value": false
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "summaryrow-total",
+      "locale": "en",
+      "kind": "summaryrow",
+      "status": "published",
+      "visibility": "public",
+      "slug": "total",
+      "title": "Total",
+      "metadata": {
+        "amount": {
+          "value": 32400
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "strong": {
+          "value": true
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/tabs.json b/xgen/fixtures/tabs.json
new file mode 100644
index 0000000..aec9bcd
--- /dev/null
+++ b/xgen/fixtures/tabs.json
@@ -0,0 +1,78 @@
+{
+  "collection": "tabs",
+  "kind": "tab",
+  "entries": [
+    {
+      "id": "tab-home",
+      "locale": "en",
+      "kind": "tab",
+      "status": "published",
+      "visibility": "public",
+      "slug": "home",
+      "title": "Home",
+      "metadata": {
+        "icon": {
+          "value": "house"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "tab-explore",
+      "locale": "en",
+      "kind": "tab",
+      "status": "published",
+      "visibility": "public",
+      "slug": "explore",
+      "title": "Explore",
+      "metadata": {
+        "icon": {
+          "value": "compass"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "tab-alerts",
+      "locale": "en",
+      "kind": "tab",
+      "status": "published",
+      "visibility": "public",
+      "slug": "alerts",
+      "title": "Alerts",
+      "metadata": {
+        "icon": {
+          "value": "bell"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "tab-account",
+      "locale": "en",
+      "kind": "tab",
+      "status": "published",
+      "visibility": "public",
+      "slug": "account",
+      "title": "Account",
+      "metadata": {
+        "icon": {
+          "value": "user"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/taxonomies/category.json b/xgen/fixtures/taxonomies/category.json
new file mode 100644
index 0000000..f3b09c1
--- /dev/null
+++ b/xgen/fixtures/taxonomies/category.json
@@ -0,0 +1,65 @@
+{
+  "definition": {
+    "id": "category",
+    "locale": "en",
+    "label": "Category",
+    "mode": "flat",
+    "assigned_to_kinds": [
+      "post"
+    ],
+    "public": true,
+    "version": 1
+  },
+  "terms": [
+    {
+      "id": "category-engineering",
+      "locale": "en",
+      "taxonomy_id": "category",
+      "name": "Engineering",
+      "slug": "engineering",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "category-design",
+      "locale": "en",
+      "taxonomy_id": "category",
+      "name": "Design",
+      "slug": "design",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "category-product",
+      "locale": "en",
+      "taxonomy_id": "category",
+      "name": "Product",
+      "slug": "product",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "category-company",
+      "locale": "en",
+      "taxonomy_id": "category",
+      "name": "Company",
+      "slug": "company",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "category-growth",
+      "locale": "en",
+      "taxonomy_id": "category",
+      "name": "Growth",
+      "slug": "growth",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/taxonomies/faq_category.json b/xgen/fixtures/taxonomies/faq_category.json
new file mode 100644
index 0000000..2ac3472
--- /dev/null
+++ b/xgen/fixtures/taxonomies/faq_category.json
@@ -0,0 +1,46 @@
+{
+  "definition": {
+    "id": "faq_category",
+    "locale": "en",
+    "label": "Question topic",
+    "mode": "flat",
+    "assigned_to_kinds": [
+      "faq",
+      "question"
+    ],
+    "public": true,
+    "version": 1
+  },
+  "terms": [
+    {
+      "id": "faq-category-getting-started",
+      "locale": "en",
+      "taxonomy_id": "faq_category",
+      "name": "Getting started",
+      "slug": "getting-started",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "faq-category-billing",
+      "locale": "en",
+      "taxonomy_id": "faq_category",
+      "name": "Billing",
+      "slug": "billing",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "faq-category-account",
+      "locale": "en",
+      "taxonomy_id": "faq_category",
+      "name": "Account",
+      "slug": "account",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/taxonomies/product_category.json b/xgen/fixtures/taxonomies/product_category.json
new file mode 100644
index 0000000..8063db9
--- /dev/null
+++ b/xgen/fixtures/taxonomies/product_category.json
@@ -0,0 +1,65 @@
+{
+  "definition": {
+    "id": "product_category",
+    "locale": "en",
+    "label": "Product category",
+    "mode": "flat",
+    "assigned_to_kinds": [
+      "product"
+    ],
+    "public": true,
+    "version": 1
+  },
+  "terms": [
+    {
+      "id": "product-category-light",
+      "locale": "en",
+      "taxonomy_id": "product_category",
+      "name": "Light",
+      "slug": "light",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "product-category-bags",
+      "locale": "en",
+      "taxonomy_id": "product_category",
+      "name": "Bags",
+      "slug": "bags",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "product-category-audio",
+      "locale": "en",
+      "taxonomy_id": "product_category",
+      "name": "Audio",
+      "slug": "audio",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "product-category-desk",
+      "locale": "en",
+      "taxonomy_id": "product_category",
+      "name": "Desk",
+      "slug": "desk",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "product-category-gifts",
+      "locale": "en",
+      "taxonomy_id": "product_category",
+      "name": "Gifts",
+      "slug": "gifts",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/taxonomies/project_category.json b/xgen/fixtures/taxonomies/project_category.json
new file mode 100644
index 0000000..2a83fb3
--- /dev/null
+++ b/xgen/fixtures/taxonomies/project_category.json
@@ -0,0 +1,75 @@
+{
+  "definition": {
+    "id": "project_category",
+    "locale": "en",
+    "label": "Project type",
+    "mode": "flat",
+    "assigned_to_kinds": [
+      "project"
+    ],
+    "public": true,
+    "version": 1
+  },
+  "terms": [
+    {
+      "id": "project-category-product-design",
+      "locale": "en",
+      "taxonomy_id": "project_category",
+      "name": "Product design",
+      "slug": "product-design",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "project-category-web-app",
+      "locale": "en",
+      "taxonomy_id": "project_category",
+      "name": "Web app",
+      "slug": "web-app",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "project-category-branding",
+      "locale": "en",
+      "taxonomy_id": "project_category",
+      "name": "Branding",
+      "slug": "branding",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "project-category-mobile",
+      "locale": "en",
+      "taxonomy_id": "project_category",
+      "name": "Mobile",
+      "slug": "mobile",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "project-category-editorial",
+      "locale": "en",
+      "taxonomy_id": "project_category",
+      "name": "Editorial",
+      "slug": "editorial",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    },
+    {
+      "id": "project-category-commerce",
+      "locale": "en",
+      "taxonomy_id": "project_category",
+      "name": "Commerce",
+      "slug": "commerce",
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/templates.json b/xgen/fixtures/templates.json
new file mode 100644
index 0000000..cb9b11f
--- /dev/null
+++ b/xgen/fixtures/templates.json
@@ -0,0 +1,198 @@
+{
+  "collection": "templates",
+  "kind": "template",
+  "entries": [
+    {
+      "id": "template-store-front",
+      "locale": "en",
+      "kind": "template",
+      "status": "published",
+      "visibility": "public",
+      "slug": "store-front",
+      "title": "Store Front",
+      "metadata": {
+        "views": {
+          "value": 1200
+        },
+        "likes": {
+          "value": 96
+        },
+        "topic": {
+          "value": "landing"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "template-event-page",
+      "locale": "en",
+      "kind": "template",
+      "status": "published",
+      "visibility": "public",
+      "slug": "event-page",
+      "title": "Event Page",
+      "metadata": {
+        "views": {
+          "value": 3400
+        },
+        "likes": {
+          "value": 210
+        },
+        "topic": {
+          "value": "landing"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "template-team-dashboard",
+      "locale": "en",
+      "kind": "template",
+      "status": "published",
+      "visibility": "public",
+      "slug": "team-dashboard",
+      "title": "Team Dashboard",
+      "metadata": {
+        "views": {
+          "value": 860
+        },
+        "likes": {
+          "value": 48
+        },
+        "topic": {
+          "value": "dashboard"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "template-docs-site",
+      "locale": "en",
+      "kind": "template",
+      "status": "published",
+      "visibility": "public",
+      "slug": "docs-site",
+      "title": "Docs Site",
+      "metadata": {
+        "views": {
+          "value": 2100
+        },
+        "likes": {
+          "value": 133
+        },
+        "topic": {
+          "value": "code"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "template-portfolio",
+      "locale": "en",
+      "kind": "template",
+      "status": "published",
+      "visibility": "public",
+      "slug": "portfolio",
+      "title": "Portfolio",
+      "metadata": {
+        "views": {
+          "value": 5000
+        },
+        "likes": {
+          "value": 402
+        },
+        "topic": {
+          "value": "landing"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "template-course-page",
+      "locale": "en",
+      "kind": "template",
+      "status": "published",
+      "visibility": "public",
+      "slug": "course-page",
+      "title": "Course Page",
+      "metadata": {
+        "views": {
+          "value": 740
+        },
+        "likes": {
+          "value": 35
+        },
+        "topic": {
+          "value": "dashboard"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "template-status-board",
+      "locale": "en",
+      "kind": "template",
+      "status": "published",
+      "visibility": "public",
+      "slug": "status-board",
+      "title": "Status Board",
+      "metadata": {
+        "views": {
+          "value": 1800
+        },
+        "likes": {
+          "value": 120
+        },
+        "topic": {
+          "value": "bots"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "template-recipe-blog",
+      "locale": "en",
+      "kind": "template",
+      "status": "published",
+      "visibility": "public",
+      "slug": "recipe-blog",
+      "title": "Recipe Blog",
+      "metadata": {
+        "views": {
+          "value": 2600
+        },
+        "likes": {
+          "value": 188
+        },
+        "topic": {
+          "value": "data"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/terminal.json b/xgen/fixtures/terminal.json
new file mode 100644
index 0000000..d7ccbd1
--- /dev/null
+++ b/xgen/fixtures/terminal.json
@@ -0,0 +1,96 @@
+{
+  "collection": "terminal",
+  "kind": "line",
+  "entries": [
+    {
+      "id": "line-l1",
+      "locale": "en",
+      "kind": "line",
+      "status": "published",
+      "visibility": "public",
+      "slug": "l1",
+      "title": "bun add @ui8kit/xgen",
+      "metadata": {
+        "line_kind": {
+          "value": "command"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "line-l2",
+      "locale": "en",
+      "kind": "line",
+      "status": "published",
+      "visibility": "public",
+      "slug": "l2",
+      "title": "xgen build",
+      "metadata": {
+        "line_kind": {
+          "value": "command"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "line-l3",
+      "locale": "en",
+      "kind": "line",
+      "status": "published",
+      "visibility": "public",
+      "slug": "l3",
+      "title": "8 targets, 664 files written",
+      "metadata": {
+        "line_kind": {
+          "value": "output"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "line-l4",
+      "locale": "en",
+      "kind": "line",
+      "status": "published",
+      "visibility": "public",
+      "slug": "l4",
+      "title": "xgen check",
+      "metadata": {
+        "line_kind": {
+          "value": "command"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "line-l5",
+      "locale": "en",
+      "kind": "line",
+      "status": "published",
+      "visibility": "public",
+      "slug": "l5",
+      "title": "all checks passed",
+      "metadata": {
+        "line_kind": {
+          "value": "output"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/testimonials.json b/xgen/fixtures/testimonials.json
new file mode 100644
index 0000000..7cfa02b
--- /dev/null
+++ b/xgen/fixtures/testimonials.json
@@ -0,0 +1,150 @@
+{
+  "collection": "testimonials",
+  "kind": "testimonial",
+  "entries": [
+    {
+      "id": "testimonial-mara",
+      "locale": "en",
+      "kind": "testimonial",
+      "status": "published",
+      "visibility": "public",
+      "slug": "mara",
+      "title": "Mara Quinn",
+      "metadata": {
+        "quote": {
+          "value": "We moved our marketing site in a week and the pages got faster."
+        },
+        "role": {
+          "value": "Head of Growth"
+        },
+        "company": {
+          "value": "Lumen"
+        },
+        "rating": {
+          "value": 5
+        },
+        "handle": {
+          "value": "@maraquinn"
+        },
+        "time": {
+          "value": "2026-03-30T10:00:00Z"
+        },
+        "mark": {
+          "value": "compass"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "testimonial-jon",
+      "locale": "en",
+      "kind": "testimonial",
+      "status": "published",
+      "visibility": "public",
+      "slug": "jon",
+      "title": "Jon Ellis",
+      "metadata": {
+        "quote": {
+          "value": "Every page reads the same data, so nothing drifts between teams."
+        },
+        "role": {
+          "value": "Engineering Lead"
+        },
+        "company": {
+          "value": "Harbor"
+        },
+        "rating": {
+          "value": 5
+        },
+        "handle": {
+          "value": "@jonellis"
+        },
+        "time": {
+          "value": "2026-03-30T07:00:00Z"
+        },
+        "mark": {
+          "value": "anchor"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "testimonial-aya",
+      "locale": "en",
+      "kind": "testimonial",
+      "status": "published",
+      "visibility": "public",
+      "slug": "aya",
+      "title": "Aya Tanaka",
+      "metadata": {
+        "quote": {
+          "value": "The structure is clear, so new people ship on their first day."
+        },
+        "role": {
+          "value": "Product Designer"
+        },
+        "company": {
+          "value": "Summit"
+        },
+        "rating": {
+          "value": 4
+        },
+        "handle": {
+          "value": "@ayatanaka"
+        },
+        "time": {
+          "value": "2026-03-29T12:00:00Z"
+        },
+        "mark": {
+          "value": "mountain"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "testimonial-luis",
+      "locale": "en",
+      "kind": "testimonial",
+      "status": "published",
+      "visibility": "public",
+      "slug": "luis",
+      "title": "Luis Ortega",
+      "metadata": {
+        "quote": {
+          "value": "Support answers in minutes and the docs are short and exact."
+        },
+        "role": {
+          "value": "Operations"
+        },
+        "company": {
+          "value": "Orbit"
+        },
+        "rating": {
+          "value": 5
+        },
+        "handle": {
+          "value": "@luisortega"
+        },
+        "time": {
+          "value": "2026-03-27T12:00:00Z"
+        },
+        "mark": {
+          "value": "orbit"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/tiers.json b/xgen/fixtures/tiers.json
new file mode 100644
index 0000000..fcfe89c
--- /dev/null
+++ b/xgen/fixtures/tiers.json
@@ -0,0 +1,146 @@
+{
+  "collection": "tiers",
+  "kind": "plan",
+  "entries": [
+    {
+      "id": "plan-solo",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "solo",
+      "title": "Solo",
+      "metadata": {
+        "tagline": {
+          "value": "One person, one site"
+        },
+        "price": {
+          "value": 0
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 1
+        },
+        "storage": {
+          "value": 2
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "1 site",
+            "Community support",
+            "Basic analytics"
+          ]
+        },
+        "yearly": {
+          "value": 0
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-11T09:00:00Z",
+      "published_at": "2026-03-11T10:00:00Z"
+    },
+    {
+      "id": "tier-team",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "tier-team",
+      "title": "Team",
+      "metadata": {
+        "tagline": {
+          "value": "For a small team"
+        },
+        "price": {
+          "value": 2900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 10
+        },
+        "storage": {
+          "value": 50
+        },
+        "highlighted": {
+          "value": true
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "10 sites",
+            "Priority support",
+            "Advanced analytics",
+            "Custom domains"
+          ]
+        },
+        "yearly": {
+          "value": 29000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-12T09:00:00Z",
+      "published_at": "2026-03-12T10:00:00Z"
+    },
+    {
+      "id": "tier-scale",
+      "locale": "en",
+      "kind": "plan",
+      "status": "published",
+      "visibility": "public",
+      "slug": "tier-scale",
+      "title": "Scale",
+      "metadata": {
+        "tagline": {
+          "value": "For many sites and editors"
+        },
+        "price": {
+          "value": 9900
+        },
+        "currency": {
+          "value": "USD"
+        },
+        "seats": {
+          "value": 50
+        },
+        "storage": {
+          "value": 500
+        },
+        "highlighted": {
+          "value": false
+        },
+        "plan_status": {
+          "value": "active"
+        },
+        "features": {
+          "value": [
+            "Unlimited sites",
+            "Dedicated support",
+            "Audit log",
+            "Single sign-on"
+          ]
+        },
+        "yearly": {
+          "value": 99000
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-13T09:00:00Z",
+      "published_at": "2026-03-13T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/topics.json b/xgen/fixtures/topics.json
new file mode 100644
index 0000000..8693dc5
--- /dev/null
+++ b/xgen/fixtures/topics.json
@@ -0,0 +1,96 @@
+{
+  "collection": "topics",
+  "kind": "topic",
+  "entries": [
+    {
+      "id": "topic-all",
+      "locale": "en",
+      "kind": "topic",
+      "status": "published",
+      "visibility": "public",
+      "slug": "all",
+      "title": "All",
+      "metadata": {
+        "value": {
+          "value": ""
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "topic-engineering",
+      "locale": "en",
+      "kind": "topic",
+      "status": "published",
+      "visibility": "public",
+      "slug": "engineering",
+      "title": "Engineering",
+      "metadata": {
+        "value": {
+          "value": "Engineering"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "topic-design",
+      "locale": "en",
+      "kind": "topic",
+      "status": "published",
+      "visibility": "public",
+      "slug": "design",
+      "title": "Design",
+      "metadata": {
+        "value": {
+          "value": "Design"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    },
+    {
+      "id": "topic-product",
+      "locale": "en",
+      "kind": "topic",
+      "status": "published",
+      "visibility": "public",
+      "slug": "product",
+      "title": "Product",
+      "metadata": {
+        "value": {
+          "value": "Product"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-07T09:00:00Z",
+      "updated_at": "2026-03-08T09:00:00Z",
+      "published_at": "2026-03-08T10:00:00Z"
+    },
+    {
+      "id": "topic-growth",
+      "locale": "en",
+      "kind": "topic",
+      "status": "published",
+      "visibility": "public",
+      "slug": "growth",
+      "title": "Growth",
+      "metadata": {
+        "value": {
+          "value": "Growth"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-09T09:00:00Z",
+      "updated_at": "2026-03-10T09:00:00Z",
+      "published_at": "2026-03-10T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/users.json b/xgen/fixtures/users.json
new file mode 100644
index 0000000..e6e5ae5
--- /dev/null
+++ b/xgen/fixtures/users.json
@@ -0,0 +1,167 @@
+{
+  "collection": "users",
+  "kind": "user",
+  "entries": [
+    {
+      "id": "user-mara-quinn",
+      "locale": "en",
+      "kind": "user",
+      "status": "published",
+      "visibility": "public",
+      "slug": "mara-quinn",
+      "title": "Mara Quinn",
+      "metadata": {
+        "display_name": {
+          "value": "Mara Quinn"
+        },
+        "roles": {
+          "value": [
+            "author"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "user-aya-tanaka",
+      "locale": "en",
+      "kind": "user",
+      "status": "published",
+      "visibility": "public",
+      "slug": "aya-tanaka",
+      "title": "Aya Tanaka",
+      "metadata": {
+        "display_name": {
+          "value": "Aya Tanaka"
+        },
+        "roles": {
+          "value": [
+            "author"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "user-jon-ellis",
+      "locale": "en",
+      "kind": "user",
+      "status": "published",
+      "visibility": "public",
+      "slug": "jon-ellis",
+      "title": "Jon Ellis",
+      "metadata": {
+        "display_name": {
+          "value": "Jon Ellis"
+        },
+        "roles": {
+          "value": [
+            "author"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "user-luis-ortega",
+      "locale": "en",
+      "kind": "user",
+      "status": "published",
+      "visibility": "public",
+      "slug": "luis-ortega",
+      "title": "Luis Ortega",
+      "metadata": {
+        "display_name": {
+          "value": "Luis Ortega"
+        },
+        "roles": {
+          "value": [
+            "author"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "user-dana-pierce",
+      "locale": "en",
+      "kind": "user",
+      "status": "published",
+      "visibility": "public",
+      "slug": "dana-pierce",
+      "title": "Dana Pierce",
+      "metadata": {
+        "display_name": {
+          "value": "Dana Pierce"
+        },
+        "roles": {
+          "value": [
+            "customer"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "user-ravi-menon",
+      "locale": "en",
+      "kind": "user",
+      "status": "published",
+      "visibility": "public",
+      "slug": "ravi-menon",
+      "title": "Ravi Menon",
+      "metadata": {
+        "display_name": {
+          "value": "Ravi Menon"
+        },
+        "roles": {
+          "value": [
+            "customer"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "user-elena-brandt",
+      "locale": "en",
+      "kind": "user",
+      "status": "published",
+      "visibility": "public",
+      "slug": "elena-brandt",
+      "title": "Elena Brandt",
+      "metadata": {
+        "display_name": {
+          "value": "Elena Brandt"
+        },
+        "roles": {
+          "value": [
+            "customer"
+          ]
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/values.json b/xgen/fixtures/values.json
new file mode 100644
index 0000000..58559f3
--- /dev/null
+++ b/xgen/fixtures/values.json
@@ -0,0 +1,69 @@
+{
+  "collection": "values",
+  "kind": "value",
+  "entries": [
+    {
+      "id": "value-craft",
+      "locale": "en",
+      "kind": "value",
+      "status": "published",
+      "visibility": "public",
+      "slug": "craft",
+      "title": "Craft over speed",
+      "metadata": {
+        "text": {
+          "value": "We ship when it is right, then we ship often."
+        },
+        "icon": {
+          "value": "wrench"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "value-open",
+      "locale": "en",
+      "kind": "value",
+      "status": "published",
+      "visibility": "public",
+      "slug": "open",
+      "title": "Work in the open",
+      "metadata": {
+        "text": {
+          "value": "Plans, notes and numbers are shared with the whole team."
+        },
+        "icon": {
+          "value": "eye"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "value-care",
+      "locale": "en",
+      "kind": "value",
+      "status": "published",
+      "visibility": "public",
+      "slug": "care",
+      "title": "Care for the reader",
+      "metadata": {
+        "text": {
+          "value": "Every page is written for the person who has to use it."
+        },
+        "icon": {
+          "value": "heart"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/wizard.json b/xgen/fixtures/wizard.json
new file mode 100644
index 0000000..001dd9e
--- /dev/null
+++ b/xgen/fixtures/wizard.json
@@ -0,0 +1,87 @@
+{
+  "collection": "wizard",
+  "kind": "step",
+  "entries": [
+    {
+      "id": "step-account",
+      "locale": "en",
+      "kind": "step",
+      "status": "published",
+      "visibility": "public",
+      "slug": "account",
+      "title": "Create your account",
+      "metadata": {
+        "text": {
+          "value": "Use your work email."
+        },
+        "icon": {
+          "value": "user"
+        },
+        "fieldA": {
+          "value": "Email"
+        },
+        "fieldB": {
+          "value": "Password"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-01T09:00:00Z",
+      "updated_at": "2026-03-02T09:00:00Z",
+      "published_at": "2026-03-02T10:00:00Z"
+    },
+    {
+      "id": "step-team",
+      "locale": "en",
+      "kind": "step",
+      "status": "published",
+      "visibility": "public",
+      "slug": "team",
+      "title": "Tell us about your team",
+      "metadata": {
+        "text": {
+          "value": "We tailor the workspace to its size."
+        },
+        "icon": {
+          "value": "users"
+        },
+        "fieldA": {
+          "value": "Company name"
+        },
+        "fieldB": {
+          "value": "Team size"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-03T09:00:00Z",
+      "updated_at": "2026-03-04T09:00:00Z",
+      "published_at": "2026-03-04T10:00:00Z"
+    },
+    {
+      "id": "wizard-step-plan",
+      "locale": "en",
+      "kind": "step",
+      "status": "published",
+      "visibility": "public",
+      "slug": "wizard-step-plan",
+      "title": "Choose a plan",
+      "metadata": {
+        "text": {
+          "value": "You can change it at any time."
+        },
+        "icon": {
+          "value": "tag"
+        },
+        "fieldA": {
+          "value": "Plan"
+        },
+        "fieldB": {
+          "value": "Billing email"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-05T09:00:00Z",
+      "updated_at": "2026-03-06T09:00:00Z",
+      "published_at": "2026-03-06T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/fixtures/zones.json b/xgen/fixtures/zones.json
new file mode 100644
index 0000000..11629e5
--- /dev/null
+++ b/xgen/fixtures/zones.json
@@ -0,0 +1,114 @@
+{
+  "collection": "zones",
+  "kind": "zone",
+  "entries": [
+    {
+      "id": "zone-central",
+      "locale": "en",
+      "kind": "zone",
+      "status": "published",
+      "visibility": "public",
+      "slug": "central",
+      "title": "Central zone",
+      "metadata": {
+        "area": {
+          "value": "Old Town, Riverside, Market Square"
+        },
+        "price": {
+          "value": 1200
+        },
+        "freeFrom": {
+          "value": 7500
+        },
+        "minOrder": {
+          "value": 2000
+        },
+        "time": {
+          "value": "90 minutes"
+        },
+        "express": {
+          "value": "Express in 60 minutes"
+        },
+        "currency": {
+          "value": "USD"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-02T09:00:00Z",
+      "updated_at": "2026-03-03T09:00:00Z",
+      "published_at": "2026-03-03T10:00:00Z"
+    },
+    {
+      "id": "zone-inner",
+      "locale": "en",
+      "kind": "zone",
+      "status": "published",
+      "visibility": "public",
+      "slug": "inner",
+      "title": "Inner suburbs",
+      "metadata": {
+        "area": {
+          "value": "Northfield, Elm Park, Harbour"
+        },
+        "price": {
+          "value": 1500
+        },
+        "freeFrom": {
+          "value": 10000
+        },
+        "minOrder": {
+          "value": 3000
+        },
+        "time": {
+          "value": "2 hours"
+        },
+        "express": {
+          "value": ""
+        },
+        "currency": {
+          "value": "USD"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-04T09:00:00Z",
+      "updated_at": "2026-03-05T09:00:00Z",
+      "published_at": "2026-03-05T10:00:00Z"
+    },
+    {
+      "id": "zone-outer",
+      "locale": "en",
+      "kind": "zone",
+      "status": "published",
+      "visibility": "public",
+      "slug": "outer",
+      "title": "Outer towns",
+      "metadata": {
+        "area": {
+          "value": "Westbrook, Hillside, Lakeview"
+        },
+        "price": {
+          "value": 1900
+        },
+        "freeFrom": {
+          "value": 15000
+        },
+        "minOrder": {
+          "value": 5000
+        },
+        "time": {
+          "value": "Same day"
+        },
+        "express": {
+          "value": ""
+        },
+        "currency": {
+          "value": "USD"
+        }
+      },
+      "version": 1,
+      "created_at": "2026-03-06T09:00:00Z",
+      "updated_at": "2026-03-07T09:00:00Z",
+      "published_at": "2026-03-07T10:00:00Z"
+    }
+  ]
+}
diff --git a/xgen/generator/README.md b/xgen/generator/README.md
new file mode 100644
index 0000000..15e994e
--- /dev/null
+++ b/xgen/generator/README.md
@@ -0,0 +1,11 @@
+# @ui8kit/xgen-generator
+
+Build orchestrator: plans every generated file of the packages and apps, writes them with a manifest of hashes.
+
+Part of xgen (see `../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
+
+## API
+
+`planBuild(workspace)` returns a `Plan`: for every target (`packages/{svelte,react,vue,solid,templ,twig,jinja2,latte}/ui`, `packages/shared/app`, `apps/host-*`) the list of `{ path, contents }`, in memory.
+`write(plan)` writes the files and a `.xgen-manifest.json` (sha-256 per file) and removes files a previous build wrote and this one does not.
+`drift(plan)` compares the plan with the disk and returns the problems.
diff --git a/xgen/generator/package.json b/xgen/generator/package.json
new file mode 100644
index 0000000..e99b59d
--- /dev/null
+++ b/xgen/generator/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@ui8kit/xgen-generator",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Build orchestrator: plans every generated file of the packages and apps, writes them with a manifest of hashes.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-spec": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*",
+    "@ui8kit/xgen-runtime-core": "workspace:*",
+    "@ui8kit/xgen-runtime-svelte": "workspace:*",
+    "@ui8kit/xgen-runtime-react": "workspace:*",
+    "@ui8kit/xgen-runtime-solid": "workspace:*",
+    "@ui8kit/xgen-runtime-vue": "workspace:*",
+    "@ui8kit/xgen-schema": "workspace:*",
+    "@ui8kit/xgen-runtime-templ": "workspace:*",
+    "@ui8kit/xgen-runtime-jinja2": "workspace:*",
+    "@ui8kit/xgen-runtime-latte": "workspace:*",
+    "@ui8kit/xgen-runtime-twig": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/generator/src/index.ts b/xgen/generator/src/index.ts
new file mode 100644
index 0000000..fe7a052
--- /dev/null
+++ b/xgen/generator/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./plan";
+export * from "./write";
diff --git a/xgen/generator/src/jinja2.ts b/xgen/generator/src/jinja2.ts
new file mode 100644
index 0000000..0999fbc
--- /dev/null
+++ b/xgen/generator/src/jinja2.ts
@@ -0,0 +1,58 @@
+// The Jinja2 package: the bricks and organisms printed by the Twig emitters through the jinja dialect (one include
+// template per part, organisms in blocks/), the Python port of the ui_* helpers (py/ui8kit_jinja), the LucideIcon asset
+// with its glyph registry, a parity harness (bin/parity.py), pyproject.toml and requirements.txt with Jinja2.
+import { readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import type { Inputs } from "@ui8kit/xgen-screens";
+import { BANNER, jsonFile, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+import { blockRootOf, dialectOrganismFiles } from "./organisms";
+import { header } from "@ui8kit/xgen-runtime-twig";
+import { emitJinjaBrick, jinja, JINJA2_PACKAGE, JINJA2_REQUIREMENT } from "@ui8kit/xgen-runtime-jinja2";
+
+export const JINJA2_DIR = "packages/jinja2/ui";
+const ASSETS = join(import.meta.dir, "..", "..", "runtimes", "jinja2", "assets");
+const asset = (name: string): string => readFileSync(join(ASSETS, name), "utf8");
+const py = (src: string, source: string): string => `# ${BANNER}\n# Source: ${source}\n${src}`;
+const json = (path: string, value: unknown): GeneratedFile => ({ path, contents: JSON.stringify({ "//": BANNER, ...(value as object) }, null, 2) + "\n" });
+
+export function jinja2Files(bricks: LoadedBrick[], inputs: Inputs, xgenRoot: string, problems: string[] = []): GeneratedFile[] {
+  const files: GeneratedFile[] = [];
+  for (const b of bricks) {
+    const source = `xgen/specs/ui/${b.specPath.split("/").pop()}`;
+    if (b.brick.id === "ui.lucide-icon") {
+      files.push({ path: `ui/${b.brick.dir}/lucide-icon${jinja.ext}`, contents: `${header(jinja, "xgen/runtimes/jinja2/assets/lucide-icon.html.j2", "LucideIcon (asset).")}\n${asset("lucide-icon.html.j2")}` });
+      const { "//": note, ...icons } = JSON.parse(readFileSync(xgenPaths(xgenRoot).lucide, "utf8")) as Record<string, unknown>;
+      files.push(json(`ui/${b.brick.dir}/lucide-icons.json`, { source: note, ...icons }));
+      continue;
+    }
+    try { files.push(...emitJinjaBrick(b.brick, source, jinja)); } catch (e) { problems.push(`jinja2: ${(e as Error).message}`); }
+  }
+  for (const name of readdirSync(join(ASSETS, "py", "ui8kit_jinja")).filter((n) => n.endsWith(".py")).sort()) {
+    files.push({ path: `py/ui8kit_jinja/${name}`, contents: py(asset(`py/ui8kit_jinja/${name}`), `xgen/runtimes/jinja2/assets/py/ui8kit_jinja/${name}`) });
+  }
+  files.push({ path: "bin/parity.py", contents: py(asset("parity.py"), "xgen/runtimes/jinja2/assets/parity.py") });
+  files.push(...dialectOrganismFiles(bricks, inputs, problems, jinja, "jinja2"));
+  const parts = bricks.reduce((n, b) => n + b.brick.parts.length, 0);
+  files.push({ path: "requirements.txt", contents: `# ${BANNER}\n# Source: xgen/generator/src/jinja2.ts\n${JINJA2_REQUIREMENT}\n` });
+  files.push({ path: "pyproject.toml", contents: [`# ${BANNER}`, `# Source: xgen/generator/src/jinja2.ts`, `[project]`, `name = "${JINJA2_PACKAGE}"`, `version = "0.0.0"`,
+    `description = "Jinja2 templates of ui8kit (${bricks.length} bricks, ${parts} parts) generated by xgen from xgen/specs"`, `requires-python = ">=3.10"`, `dependencies = ["${JINJA2_REQUIREMENT}"]`, ``,
+    `[build-system]`, `requires = ["setuptools>=68"]`, `build-backend = "setuptools.build_meta"`, ``, `[tool.setuptools.packages.find]`, `where = ["py"]`, ``].join("\n") });
+  files.push({ path: ".gitignore", contents: `# ${BANNER}\n# the virtual environment of bun run check, and Python caches\n.venv/\n__pycache__/\n` });
+  files.push(jsonFile("package.json", {
+    name: "@ui8kit/jinja2-ui", version: "0.0.0", private: true,
+    description: `Jinja2 templates (${bricks.length} bricks, ${parts} parts) generated by xgen from xgen/specs; Python helpers in py/ui8kit_jinja.`,
+    // the organisms share one folder, so the block-root zone lists the files the TypeScript packages keep in src/blocks plus their frame components
+    ui8kit: { runtime: "jinja2", generated: true, kit: ["ui", "py"], composition: ["blocks"], blockRoot: blockRootOf(inputs, files, jinja.ext) },
+  }));
+  files.push({ path: "README.md", contents: [`<!-- ${BANNER} -->`, `# ${JINJA2_PACKAGE}`, ``,
+    `[Jinja2](https://jinja.palletsprojects.com) templates **generated** by xgen from \`xgen/specs\`: ${bricks.length} bricks, ${parts} parts, and the blocks.`, ``,
+    "Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`.", ``,
+    "```python", `import sys; sys.path.insert(0, "/path/to/packages/jinja2/ui/py")`, `from ui8kit_jinja import environment`, `env = environment("/path/to/packages/jinja2/ui")`,
+    `print(env.get_template("ui/button/button.html.j2").render(p={"Variant": "outline"}, children="Save"))`, "```", ``,
+    "In a template: `{{ ui_include('ui/button/button.html.j2', {'p': {'Variant': 'outline'}, 'children': label}) }}`. Brick props use the canonical",
+    "names (`Variant`, `Class`, `Attrs`), block props the JSON names of the TypeScript props (`title`, `className`); `children` is markup.", ``,
+    "The classes are the same Tailwind v4 utilities as the Svelte, React, Vue and Solid packages: import their `styles/index.css` in the app CSS and add `@source` for this folder.", ``].join("\n") });
+  return files.sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0));
+}
diff --git a/xgen/generator/src/latte.ts b/xgen/generator/src/latte.ts
new file mode 100644
index 0000000..d1e8c44
--- /dev/null
+++ b/xgen/generator/src/latte.ts
@@ -0,0 +1,59 @@
+// The Latte package: the bricks and organisms printed by the Twig emitters through the latte dialect (one template per
+// part, organisms in blocks/), the Twig PHP helpers under the UI8Kit\Latte namespace with a Latte extension that
+// registers them, the LucideIcon asset with its glyph registry, a parity harness (bin/parity.php) and composer.json
+// requiring latte/latte.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import type { Inputs } from "@ui8kit/xgen-screens";
+import { BANNER, jsonFile, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+import { blockRootOf, dialectOrganismFiles } from "./organisms";
+import { header, phpHelpers, PHP_SHARED_SOURCE } from "@ui8kit/xgen-runtime-twig";
+import { emitLatteBrick, latte, LATTE_PACKAGE, LATTE_VERSION } from "@ui8kit/xgen-runtime-latte";
+
+export const LATTE_DIR = "packages/latte/ui";
+const ASSETS = join(import.meta.dir, "..", "..", "runtimes", "latte", "assets");
+const asset = (name: string): string => readFileSync(join(ASSETS, name), "utf8");
+/** a PHP file with the banner after the open tag */
+const php = (src: string, source: string): string => src.replace(/^<\?php\n/, `<?php\n\n// ${BANNER}\n// Source: ${source}\n`);
+const json = (path: string, value: unknown): GeneratedFile => ({ path, contents: JSON.stringify({ "//": BANNER, ...(value as object) }, null, 2) + "\n" });
+
+export function latteFiles(bricks: LoadedBrick[], inputs: Inputs, xgenRoot: string, problems: string[] = []): GeneratedFile[] {
+  const files: GeneratedFile[] = [];
+  for (const b of bricks) {
+    const source = `xgen/specs/ui/${b.specPath.split("/").pop()}`;
+    if (b.brick.id === "ui.lucide-icon") {
+      files.push({ path: `ui/${b.brick.dir}/lucide-icon${latte.ext}`, contents: `${header(latte, "xgen/runtimes/latte/assets/lucide-icon.latte", "LucideIcon (asset).")}\n${asset("lucide-icon.latte")}` });
+      const { "//": note, ...icons } = JSON.parse(readFileSync(xgenPaths(xgenRoot).lucide, "utf8")) as Record<string, unknown>;
+      files.push(json(`ui/${b.brick.dir}/lucide-icons.json`, { source: note, ...icons }));
+      continue;
+    }
+    try { files.push(...emitLatteBrick(b.brick, source, latte)); } catch (e) { problems.push(`latte: ${(e as Error).message}`); }
+  }
+  // the helpers are shared with the Twig package, in this package's namespace; the extension is Latte's own
+  for (const [name, src] of phpHelpers("Latte")) files.push({ path: `php/${name}`, contents: php(src, `${PHP_SHARED_SOURCE}/${name}`) });
+  files.push({ path: "php/Extension.php", contents: php(asset("php/Extension.php"), "xgen/runtimes/latte/assets/php/Extension.php") });
+  files.push({ path: "bin/parity.php", contents: php(asset("parity.php"), "xgen/runtimes/latte/assets/parity.php") });
+  files.push(...dialectOrganismFiles(bricks, inputs, problems, latte, "latte"));
+  const parts = bricks.reduce((n, b) => n + b.brick.parts.length, 0);
+  files.push({ path: "composer.json", contents: JSON.stringify({
+    name: LATTE_PACKAGE, description: `Latte templates of ui8kit (${bricks.length} bricks, ${parts} parts) generated by xgen from xgen/specs. ${BANNER}`,
+    type: "library", license: "MIT", require: { php: ">=8.2", "latte/latte": LATTE_VERSION }, autoload: { "psr-4": { "UI8Kit\\Latte\\": "php/" } },
+  }, null, 2) + "\n" });
+  files.push({ path: ".gitignore", contents: `# ${BANNER}\n# composer install output: rebuilt by bun run check\nvendor/\ncomposer.lock\n` });
+  files.push(jsonFile("package.json", {
+    name: "@ui8kit/latte-ui", version: "0.0.0", private: true,
+    description: `Latte templates (${bricks.length} bricks, ${parts} parts) generated by xgen from xgen/specs; PHP runtime in php/ (composer package ${LATTE_PACKAGE}).`,
+    // the organisms share one folder, so the block-root zone lists the files the TypeScript packages keep in src/blocks plus their frame components
+    ui8kit: { runtime: "latte", generated: true, kit: ["ui", "php"], composition: ["blocks"], blockRoot: blockRootOf(inputs, files, latte.ext) },
+  }));
+  files.push({ path: "README.md", contents: [`<!-- ${BANNER} -->`, `# ${LATTE_PACKAGE}`, ``,
+    `[Latte](https://latte.nette.org) templates **generated** by xgen from \`xgen/specs\`: ${bricks.length} bricks, ${parts} parts, and the blocks.`, ``,
+    "Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`.", ``,
+    "```php", `$latte = \\UI8Kit\\Latte\\Extension::engine('/path/to/packages/latte/ui');`, `echo $latte->renderToString('ui/button/button.latte', ['p' => ['Variant' => 'outline'], 'children' => 'Save']);`, "```", ``,
+    "In a template: `{=ui_include('ui/button/button.latte', ['p' => ['Variant' => 'outline'], 'children' => $label])|noescape}`. Brick props use the canonical",
+    "names (`Variant`, `Class`, `Attrs`), block props the JSON names of the TypeScript props (`title`, `className`); `children` is markup.", ``,
+    "The classes are the same Tailwind v4 utilities as the Svelte, React, Vue and Solid packages: import their `styles/index.css` in the app CSS and add `@source` for this folder.", ``].join("\n") });
+  return files.sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0));
+}
diff --git a/xgen/generator/src/organisms.ts b/xgen/generator/src/organisms.ts
new file mode 100644
index 0000000..430a04b
--- /dev/null
+++ b/xgen/generator/src/organisms.ts
@@ -0,0 +1,55 @@
+// What the static template generators (templ, Twig, Jinja2, Latte) share about organisms: the portable organisms emitted
+// one by one, the recipes and presets they read collected and resolved, and the block-root zone of the package.json.
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import { portableTo } from "@ui8kit/xgen-spec";
+import type { Inputs, OrganismSpec } from "@ui8kit/xgen-screens";
+import { fileName, indexParts, tierDir } from "@ui8kit/xgen-screens";
+import { BANNER, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+import { emitTwigOrganism, type Dialect } from "@ui8kit/xgen-runtime-twig";
+
+export interface Emitted { files: GeneratedFile[]; recipes: Iterable<string>; presets: Iterable<string> }
+export interface Collected { files: GeneratedFile[]; recipes: Array<{ name: string; value: unknown }>; presets: Array<{ name: string; value: unknown }> }
+
+/** every organism portable to the TypeScript runtimes through `emit` (label prefixes the problems), with the recipes and presets they read, sorted and resolved */
+export function collectOrganisms(inputs: Inputs, problems: string[], label: string, emit: (org: OrganismSpec, source: string) => Emitted): Collected {
+  const files: GeneratedFile[] = [];
+  const recipes = new Set<string>(), presets = new Set<string>();
+  for (const o of inputs.organisms) {
+    const org = o.value as OrganismSpec;
+    if (portableTo(org.portable, "svelte") !== true) continue;
+    try {
+      const out = emit(org, o.file.slice(o.file.indexOf("xgen/")));
+      files.push(...out.files);
+      for (const r of out.recipes) recipes.add(r);
+      for (const p of out.presets) presets.add(p);
+    } catch (e) { problems.push(`${label}: ${(e as Error).message}`); }
+  }
+  const out: Collected = { files, recipes: [], presets: [] };
+  for (const name of [...recipes].sort()) {
+    const r = inputs.recipes.find((x) => x.name === name);
+    if (!r) problems.push(`${label}: recipe ${name} not found`);
+    else out.recipes.push({ name, value: r.value });
+  }
+  for (const name of [...presets].sort()) {
+    const p = inputs.presets.find((x) => x.value.name === name);
+    if (!p) problems.push(`${label}: preset ${name} not found`);
+    else out.presets.push({ name, value: p.value });
+  }
+  return out;
+}
+
+/** a JSON file with the banner as its first key */
+export const bannerJson = (path: string, value: unknown): GeneratedFile => ({ path, contents: JSON.stringify({ "//": BANNER, ...(value as object) }, null, 2) + "\n" });
+
+/** the organisms of a dialect package (Twig, Jinja2, Latte): templates in blocks/, the recipes and presets they read next to them */
+export function dialectOrganismFiles(bricks: LoadedBrick[], inputs: Inputs, problems: string[], d: Dialect, label: string): GeneratedFile[] {
+  const organisms = Object.fromEntries(inputs.organisms.map((o) => [o.value.name, o.value as OrganismSpec]));
+  const deps = { parts: indexParts(bricks), organisms, recipePath: (f: string) => `blocks/recipes/${f}.variants.json`, presetPath: (n: string) => `blocks/presets/${n}.json` };
+  const c = collectOrganisms(inputs, problems, label, (org, source) => emitTwigOrganism(org, deps, source, d));
+  return [...c.files, ...c.recipes.map((r) => bannerJson(deps.recipePath(r.name), r.value)), ...c.presets.map((p) => bannerJson(deps.presetPath(p.name), p.value))];
+}
+
+/** the block-root zone of a template package: the files the TypeScript packages keep in src/blocks plus their frame components, as generated */
+export const blockRootOf = (inputs: Inputs, files: GeneratedFile[], ext: string): string[] =>
+  inputs.organisms.map((o) => o.value).filter((o) => tierDir(o.id) === "blocks" || (o.frame && tierDir(o.id) === "components"))
+    .map((o) => `blocks/${fileName(o.name)}${ext}`).filter((p) => files.some((f) => f.path === p)).sort();
diff --git a/xgen/generator/src/plan.ts b/xgen/generator/src/plan.ts
new file mode 100644
index 0000000..49f3ff6
--- /dev/null
+++ b/xgen/generator/src/plan.ts
@@ -0,0 +1,286 @@
+// The plan of a build: every file of every generated target, in memory. `write` puts it on disk, `xgen check` compares it with the disk.
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import { basename, join, relative } from "node:path";
+import { createHash } from "node:crypto";
+import { loadSpecs, portableTo, UI_RUNTIMES, type LoadedBrick, type UiRuntime } from "@ui8kit/xgen-spec";
+import { BANNER, decksFile, emitPreset, isEmptyRecipe, readAsset, recipeOwner, variantsName, type GeneratedFile, type PartRef } from "@ui8kit/xgen-runtime-core";
+import { SvelteEmitter, appScaffold as svelteApp, emitOrganism as svelteOrganism, emitScreen as svelteScreen, emitChunks as svelteChunks } from "@ui8kit/xgen-runtime-svelte";
+import { ReactEmitter, appScaffold as reactApp, emitOrganism as reactOrganism, emitScreen as reactScreen, emitChunks as reactChunks } from "@ui8kit/xgen-runtime-react";
+import { SolidEmitter, appScaffold as solidApp, emitOrganism as solidOrganism, emitScreen as solidScreen, emitChunks as solidChunks } from "@ui8kit/xgen-runtime-solid";
+import { VueEmitter, appScaffold as vueApp, emitOrganism as vueOrganism, emitScreen as vueScreen, emitChunks as vueChunks } from "@ui8kit/xgen-runtime-vue";
+import { fileName, findApps, indexParts, loadApp, loadInputs, sourcesOf, tierDir, type AppSpec, type Inputs, type OrganismSpec, type ScreenSpec } from "@ui8kit/xgen-screens";
+import { HOST_GEN, SHARED, SHARED_DIR, jsonFile, sharedPackage } from "@ui8kit/xgen-runtime-core";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+
+export type Runtime = UiRuntime;
+
+/** what each runtime contributes: its emitters and the extension of its component files */
+const RUNTIME = {
+  svelte: { emitter: () => new SvelteEmitter(), organism: svelteOrganism, screen: svelteScreen, chunks: svelteChunks, app: svelteApp, ext: "svelte" },
+  react: { emitter: () => new ReactEmitter(), organism: reactOrganism, screen: reactScreen, chunks: reactChunks, app: reactApp, ext: "tsx" },
+  vue: { emitter: () => new VueEmitter(), organism: vueOrganism, screen: vueScreen, chunks: vueChunks, app: vueApp, ext: "vue" },
+  solid: { emitter: () => new SolidEmitter(), organism: solidOrganism, screen: solidScreen, chunks: solidChunks, app: solidApp, ext: "tsx" },
+} as const;
+export const MANIFEST = ".xgen-manifest.json";
+
+export interface Target {
+  /** directory relative to the workspace root */
+  dir: string;
+  kind: "package" | "app";
+  /** "core": the shared package, runtime neutral */
+  runtime: Runtime | "core" | "templ" | "twig" | "jinja2" | "latte";
+  /** build outputs of the target's own tools that the drift check leaves alone (templ generate: *_templ.go) */
+  ignore?: RegExp;
+  files: GeneratedFile[];
+  /** files in the directory that people write (xgen.app.json) */
+  handwritten: string[];
+  /** path of the manifest inside the target, relative to the target dir */
+  manifest: string;
+}
+
+export interface Plan { workspace: string; xgenRoot: string; targets: Target[]; problems: string[]; inputs: Inputs; bricks: LoadedBrick[]; apps: Array<{ dir: string; app: AppSpec }> }
+
+export const sha = (s: string): string => createHash("sha256").update(s).digest("hex");
+/** files in the order of their paths, so two builds list them the same way whatever the order of the work */
+const byPath = (files: GeneratedFile[]): GeneratedFile[] => [...files].sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0));
+const withPrefix = (prefix: string, files: GeneratedFile[]): GeneratedFile[] => files.map((f) => ({ ...f, path: prefix + f.path }));
+
+function banner(path: string, src: string): string {
+  if (src.includes(BANNER)) return src;
+  if (path.endsWith(".css")) return `/* ${BANNER} */\n${src}`;
+  if (path.endsWith(".svelte") || path.endsWith(".vue")) return `<!-- ${BANNER} -->\n${src}`;
+  return `// ${BANNER}\n${src}`;
+}
+
+import { packageReadme } from "./readme";
+import { templFiles, TEMPL_DIR } from "./templ";
+import { twigFiles, TWIG_DIR } from "./twig";
+import { jinja2Files, JINJA2_DIR } from "./jinja2";
+import { latteFiles, LATTE_DIR } from "./latte";
+import { authoringIndex, withSource } from "./source";
+const pkgName = (r: Runtime): string => `@ui8kit/${r}-ui`;
+
+function lucideRegistry(xgenRoot: string): string {
+  const { icons } = JSON.parse(readFileSync(xgenPaths(xgenRoot).lucide, "utf8")) as { icons: Record<string, Array<[string, Record<string, string>]>> };
+  const rows = Object.entries(icons).map(([name, nodes]) => `  ${JSON.stringify(name)}: ${JSON.stringify(nodes)},`);
+  return [`// ${BANNER}`, `// Lucide icons (ISC license, https://lucide.dev), harvested into xgen/specs/assets/lucide-icons.json.`, `export const LUCIDE: Record<string, Array<[string, Record<string, string>]>> = {`, ...rows, `};`, ``].join("\n");
+}
+
+function uiPackage(r: Runtime, bricks: LoadedBrick[], inputs: Inputs, parts: Record<string, PartRef>, xgenRoot: string): GeneratedFile[] {
+  const authoring = authoringIndex(xgenRoot);
+  const emitter = RUNTIME[r].emitter();
+  const ext = RUNTIME[r].ext;
+  /** React and Solid: TSX files exporting named components (`export *`); Svelte and Vue: one default export per file */
+  const jsx = r === "react" || r === "solid";
+  const files: GeneratedFile[] = [];
+  const partFile: Record<string, string> = {};
+  // the barrel: named re-exports grouped by tier, so the index reads like the folder tree
+  const tier: Record<"primitives" | "components" | "blocks" | "presets" | "utils", string[]> = { primitives: [], components: [], blocks: [], presets: [], utils: [] };
+  for (const { brick } of bricks) {
+    const emitted = emitter.emit(brick);
+    // asset parts: the frame comes from the spec, the glyph nodes from the registry of specs/assets
+    if (brick.id === "ui.lucide-icon") {
+      const asset = join(import.meta.dir, "..", "..", "runtimes", r, "assets", `LucideIcon.${ext}`);
+      emitted[0] = { path: emitted[0]!.path, contents: banner(asset, readFileSync(asset, "utf8")) };
+      emitted.push({ path: `primitives/${brick.dir}/lucide-icons.ts`, contents: lucideRegistry(xgenRoot) });
+    }
+    files.push(...withPrefix("src/", emitted));
+    if (!jsx) {
+      brick.parts.forEach((p, i) => {
+        partFile[p.name] = `../${emitted[i]!.path}`;
+        tier.primitives.push(`export { default as ${p.name} } from "./${emitted[i]!.path}";`, `export type { ${p.name}Props } from "./${emitted[i]!.path}";`);
+        // the variant tables live in the module script (Svelte) or the plain script (Vue) of their part, exported like the React file exports them
+        const owned = Object.keys(brick.recipes).filter((id) => recipeOwner(brick, id) === p && !isEmptyRecipe(brick.recipes[id]!)).map(variantsName);
+        if (owned.length && brick.id !== "ui.lucide-icon") tier.primitives.push(`export { ${owned.join(", ")} } from "./${emitted[i]!.path}";`);
+      });
+    } else {
+      // one file per brick, or one per part; a long variant table sits in <stem>-variants.ts next to its part
+      const own = (p: { name: string }) => emitted.find((f) => f.path.endsWith(`/${fileName(p.name)}.tsx`)) ?? emitted[0]!;
+      for (const p of brick.parts) partFile[p.name] = `../${(brick.parts.length > 1 ? own(p) : emitted[0]!).path.replace(/\.tsx$/, "")}`;
+      for (const f of emitted.filter((f) => /(\.tsx|-variants\.ts)$/.test(f.path))) tier.primitives.push(`export * from "./${f.path.replace(/\.tsx?$/, "")}";`);
+    }
+  }
+  if (r === "react") files.push({ path: "src/primitives/slot/slot.tsx", contents: banner("slot.tsx", readFileSync(join(import.meta.dir, "..", "..", "runtimes", "react", "assets", "slot.tsx"), "utf8")) });
+  const org = inputs.organisms.map((o) => o.value);
+  const recipes = Object.fromEntries(inputs.recipes.map((r2) => [r2.name, r2.value]));
+  const deps = { parts, organisms: Object.fromEntries(org.map((o) => [o.name, o])), partPath: (n: string) => partFile[n]!, recipes };
+  for (const o of org) {
+    // a spec that is not portable to this runtime is a contract only: nothing is generated for it
+    if (portableTo(o.portable, r) !== true) continue;
+    const dir = tierDir(o.id);
+    files.push(...withPrefix("src/", RUNTIME[r].organism(o, deps)));
+    if (!jsx) tier[dir as "blocks" | "components"].push(`export { default as ${o.name} } from "./${dir}/${fileName(o.name)}.${ext}";`, `export type { ${o.name}Props } from "./${dir}/${fileName(o.name)}.${ext}";`);
+    else tier[dir as "blocks" | "components"].push(`export * from "./${dir}/${fileName(o.name)}";`);
+    if (Object.keys(o.records).length) tier[dir as "blocks" | "components"].push(`export type * from "./${dir}/${fileName(o.name)}.types";`);
+  }
+  // kit presets: the frame geometry of a kit, read by the components with the `preset` op
+  for (const p of inputs.presets) {
+    const f = emitPreset(p.value, `xgen/screens/src/authoring/presets/${basename(p.file, ".json")}.ts`);
+    files.push({ path: `src/${f.path}`, contents: f.contents });
+    tier.presets.push(`export { ${p.value.name} } from "./${f.path.replace(/\.ts$/, "")}";`);
+  }
+  tier.utils.push(`export { cn, variants, tpl, fmtNumber, fmtMoney, at, pageWindow, fitCols, uniqLabel } from "./utils";`);
+  const barrel = [`// ${BANNER}`, ...Object.entries(tier).flatMap(([name, rows]) => ["", `// ${name}`, ...rows])];
+  files.push({ path: "src/index.ts", contents: barrel.join("\n") + "\n" });
+
+  const utilsDir = join(import.meta.dir, "..", "..", "runtimes", "core", "assets", "ts");
+  const walk = (rel: string): string[] => readdirSync(join(utilsDir, rel), { withFileTypes: true }).sort((a, b) => a.name.localeCompare(b.name)).flatMap((e) => (e.isDirectory() ? walk(join(rel, e.name)) : [join(rel, e.name)]));
+  for (const f of walk("")) files.push({ path: `src/utils/${f}`, contents: banner(f, readFileSync(join(utilsDir, f), "utf8")) });
+  for (const f of ["theme.css", "kit.css"]) files.push({ path: `src/styles/${f}`, contents: banner(f, readAsset("styles", f)) });
+  files.push({ path: "src/styles/index.css", contents: `/* ${BANNER} */\n/* Entry of the styles: theme tokens and the kit. @source makes Tailwind v4 scan this package for class names. */\n@import "./theme.css";\n@import "./kit.css";\n\n@source "../";\n` });
+
+  const name = pkgName(r);
+  files.push(jsonFile("package.json", {
+    name, version: "0.0.0", private: true, type: "module",
+    description: `${{ svelte: "Svelte 5", react: "React 19", vue: "Vue 3", solid: "SolidJS 1.9" }[r]} primitives (${bricks.length} bricks, ${bricks.reduce((n, b) => n + b.brick.parts.length, 0)} parts) and organisms, generated by xgen from xgen/specs. Source only, no build step: the consumer's Vite compiles it.`,
+    sideEffects: ["*.css"],
+    // a frame (a component whose whole job is the landmark of a region: the section frame, the shell header, sidebar and footer) is
+    // checked as a block file: it opens on its one Block (rule 01)
+    ui8kit: { runtime: r, generated: true, kit: ["src/primitives", "src/utils", "src/styles"], composition: ["src/blocks", "src/components"], blockRoot: ["src/blocks", ...inputs.organisms.map((o) => o.value).filter((o) => o.frame && tierDir(o.id) === "components").map((o) => `src/components/${fileName(o.name)}.${{ svelte: "svelte", react: "tsx", vue: "vue", solid: "tsx" }[r]}`).sort()] },
+    exports: { ".": { ...(r === "svelte" ? { svelte: "./src/index.ts" } : {}), types: "./src/index.ts", default: "./src/index.ts" }, "./styles/*": "./src/styles/*", "./package.json": "./package.json" },
+    scripts: { check: { svelte: "svelte-check --tsconfig ./tsconfig.json", react: "tsc --noEmit -p tsconfig.json", solid: "tsc --noEmit -p tsconfig.json", vue: "vue-tsc --noEmit -p tsconfig.json" }[r] },
+    peerDependencies: { ...{ svelte: { svelte: "^5.57.0" }, react: { react: "^19.2.0" }, vue: { vue: "^3.5.43" }, solid: { "solid-js": "^1.9.0" } }[r], tailwindcss: "^4.3.3" },
+    dependencies: { clsx: "^2.1.1", "tailwind-merge": "^3.7.0" },
+    devDependencies: {
+      svelte: { "@tsconfig/svelte": "^5.0.8", svelte: "^5.57.0", "svelte-check": "^4.7.6", typescript: "~6.0.2" },
+      react: { "@types/react": "^19.2.0", "@types/react-dom": "^19.2.0", react: "^19.2.0", "react-dom": "^19.2.0", typescript: "~6.0.2" },
+      vue: { typescript: "~6.0.2", vue: "^3.5.43", "vue-tsc": "^3.3.12" },
+      solid: { "solid-js": "^1.9.0", typescript: "~6.0.2" },
+    }[r],
+  }));
+  files.push({
+    path: "tsconfig.json",
+    contents: r === "svelte"
+      ? `// ${BANNER}\n{\n  "extends": "@tsconfig/svelte/tsconfig.json",\n  "compilerOptions": { "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "types": ["svelte"], "allowArbitraryExtensions": true, "resolveJsonModule": true, "noEmit": true },\n  "include": ["src/**/*.ts", "src/**/*.svelte"]\n}\n`
+      : r === "vue"
+      ? `// ${BANNER}\n{\n  "compilerOptions": {\n    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "preserve",\n    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true\n  },\n  "include": ["src/**/*.ts", "src/**/*.vue"]\n}\n`
+      : r === "solid"
+      ? `// ${BANNER}\n{\n  "compilerOptions": {\n    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "preserve", "jsxImportSource": "solid-js",\n    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true\n  },\n  "include": ["src"]\n}\n`
+      : `// ${BANNER}\n{\n  "compilerOptions": {\n    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "react-jsx",\n    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true\n  },\n  "include": ["src"]\n}\n`,
+  });
+  const nParts = bricks.reduce((n, b) => n + b.brick.parts.length, 0);
+  files.push({
+    path: "README.md",
+    contents: packageReadme(name, r, bricks.length, nParts, org.length),
+  });
+  return files.map((f) => withSource(f, sourceOf(f.path)));
+
+  /** the file a person changes instead of a generated one */
+  function sourceOf(path: string): string | undefined {
+    const rel = (p: string): string => relative(join(xgenRoot, ".."), p);
+    const prim = /^src\/primitives\/([^/]+)\//.exec(path);
+    if (prim) {
+      if (path.endsWith("lucide-icons.ts")) return "xgen/specs/assets/lucide-icons.json";
+      if (path === "src/primitives/slot/slot.tsx") return "xgen/runtimes/react/assets/slot.tsx";
+      const b = bricks.find((x) => x.brick.dir === prim[1]);
+      return b ? rel(b.specPath) : undefined;
+    }
+    const comp = /^src\/(?:components|blocks)\/([a-z0-9-]+)(?:\.types|\.assets)?\.(?:svelte|vue|tsx|ts)$/.exec(path);
+    if (comp) { const f = inputs.organisms.map((o) => o.file).find((x) => x.endsWith(`/${comp[1]}.json`)); return authoring.get(comp[1]!) ?? (f ? rel(f) : undefined); }
+    const asset = /^src\/(utils|styles)\/(.+)$/.exec(path);
+    if (asset) return asset[1] === "utils" ? `xgen/runtimes/core/assets/ts/${asset[2]}` : path.endsWith("index.css") ? "xgen/generator/src/plan.ts (uiPackage)" : `xgen/runtimes/core/assets/styles/${asset[2]}`;
+    if (path === "src/index.ts") return "xgen/generator/src/plan.ts (the barrel lists every spec)";
+    if (path === "tsconfig.json") return "xgen/generator/src/plan.ts (uiPackage)";
+    if (path === "README.md") return "xgen/generator/src/readme.ts";
+    return undefined;
+  }
+}
+
+/** the screens a host serves: its list, or every screen portable to its runtime for ["*"] */
+export function hostedScreens(app: AppSpec, all: ScreenSpec[]): { screens: ScreenSpec[]; missing: string[] } {
+  if (app.screens.includes("*")) return { screens: all.filter((s) => portableTo(s.portable, app.runtime) === true), missing: [] };
+  const screens: ScreenSpec[] = [], missing: string[] = [];
+  for (const id of app.screens) { const s = all.find((x) => x.id === id); if (s) screens.push(s); else missing.push(id); }
+  return { screens, missing };
+}
+
+export function planBuild(workspace: string, xgenRoot = join(workspace, "xgen")): Plan {
+  const problems: string[] = [];
+  const specs = loadSpecs(xgenRoot);
+  problems.push(...specs.problems);
+  const inputs = loadInputs(xgenRoot);
+  problems.push(...inputs.problems);
+  const parts = indexParts(specs.bricks);
+  const targets: Target[] = [];
+  const orgs = Object.fromEntries(inputs.organisms.map((o) => [o.value.name, o.value as OrganismSpec]));
+  for (const r of UI_RUNTIMES) {
+    targets.push({ dir: `packages/${r}/ui`, kind: "package", runtime: r, files: byPath(uiPackage(r, specs.bricks, inputs, parts, xgenRoot)), handwritten: [], manifest: MANIFEST });
+  }
+  // the Go templ package; templ generate output (*_templ.go) and go.sum are build outputs the drift check leaves alone
+  const templ = templFiles(specs.bricks, inputs, xgenRoot, problems).sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0));
+  targets.push({ dir: TEMPL_DIR, kind: "package", runtime: "templ", files: templ, handwritten: [], manifest: ".xgen-manifest.json", ignore: /(_templ\.go|^go\.sum)$/ });
+  // the Twig package; composer install output (vendor/, composer.lock) is a build output the drift check leaves alone
+  targets.push({ dir: TWIG_DIR, kind: "package", runtime: "twig", files: twigFiles(specs.bricks, inputs, xgenRoot, problems), handwritten: [], manifest: ".xgen-manifest.json", ignore: /^(vendor\/|composer\.lock$)/ });
+  // the Jinja2 package; the virtual environment of the check (.venv/) and Python caches are build outputs the drift check leaves alone
+  targets.push({ dir: JINJA2_DIR, kind: "package", runtime: "jinja2", files: jinja2Files(specs.bricks, inputs, xgenRoot, problems), handwritten: [], manifest: ".xgen-manifest.json", ignore: /(^\.venv\/|__pycache__\/)/ });
+  targets.push({ dir: LATTE_DIR, kind: "package", runtime: "latte", files: latteFiles(specs.bricks, inputs, xgenRoot, problems), handwritten: [], manifest: ".xgen-manifest.json", ignore: /^(vendor\/|composer\.lock$)/ });
+  const all = inputs.screens.map((s) => s.value);
+  const apps: Plan["apps"] = [];
+  const hosted = new Map<string, ScreenSpec>();
+  const hostTargets: Target[] = [];
+  for (const dir of findApps(workspace)) {
+    const loaded = loadApp(join(dir, "xgen.app.json"));
+    problems.push(...loaded.problems);
+    const app = loaded.app;
+    const { screens, missing } = hostedScreens(app, all);
+    for (const id of missing) problems.push(`${basename(dir)}: screen ${id} does not exist`);
+    apps.push({ dir, app });
+    if (app.name !== basename(dir)) problems.push(`${basename(dir)}: "name" in xgen.app.json is ${app.name}`);
+    for (const s of screens) {
+      hosted.set(s.id, s);
+      if (s.nav && !s.menu?.length) problems.push(`${s.id}: the screen reads the menu (nav) but its spec has no "menu"`);
+    }
+    const rt = RUNTIME[app.runtime];
+    const files = rt.app(app, screens).map((f) => withSource(f, appSourceOf(f.path, app.runtime, basename(dir))));
+    for (const s of screens) {
+      const deps = { parts, organisms: orgs, partPath: () => "", ui: pkgName(app.runtime), shared: SHARED, recordType: s.source?.record ?? "" };
+      const f = rt.screen(s, deps);
+      const specFile = inputs.screens.find((x) => x.value.id === s.id)?.file;
+      const chunks = rt.chunks(s, deps);
+      for (const c of [f, ...chunks]) files.push(withSource({ path: `${HOST_GEN}/${c.path}`, contents: c.contents }, specFile ? relative(join(xgenRoot, ".."), specFile) : undefined));
+    }
+    hostTargets.push({ dir: `apps/${basename(dir)}`, kind: "app", runtime: app.runtime, files: byPath(files), handwritten: ["xgen.app.json", ...(app.hand ?? [])], manifest: `${HOST_GEN}/${MANIFEST}` });
+  }
+  // what every host reads, emitted once: the dictionary, the fixtures of the hosted screens, their menus, the registry, the url core
+  const shared = [...hosted.values()].sort((a, b) => a.id.localeCompare(b.id));
+  const cols = new Set(shared.flatMap((s) => sourcesOf(s).map((x) => x.collection)));
+  // and the lookups of the entries they read: media (featured_media_id), users (author_id) and the taxonomy terms (terms)
+  const LOOKUP_KINDS = ["media", "user"];
+  const picked = inputs.collections.map((c) => c.value).filter((c) => cols.has(c.collection) || c.entries.every((e) => LOOKUP_KINDS.includes(e.kind)) && c.entries.length > 0);
+  // and the items under the menu items they read (kind menu_item, parent_id): the lookup of `id|menu`
+  const pickedIds = new Set(picked.flatMap((c) => c.entries.map((e) => e.id)));
+  const collections = inputs.collections.map((c) => c.value).filter((c) => picked.includes(c) || c.entries.length > 0 && c.entries.every((e) => e.kind === "menu_item" && pickedIds.has((e as { parent_id?: string }).parent_id ?? "")));
+  const screenFile = (name: string): string | undefined => { const f = inputs.screens.find((x) => x.value.name === name)?.file; return f ? relative(join(xgenRoot, ".."), f) : undefined; };
+  const sharedFiles = sharedPackage(inputs.dictionary.value, collections, shared, inputs.taxonomies.map((t) => t.value)).map((f) => withSource(f, sharedSourceOf(f.path, screenFile)));
+  if (hostTargets.length) targets.push({ dir: SHARED_DIR, kind: "package", runtime: "core", files: byPath(sharedFiles), handwritten: [], manifest: MANIFEST });
+  targets.push(...hostTargets);
+  // the copy decks of the taste screens, from their Codex entries (xgen/fixtures/deck*.json); the rest of the folder is hand-kept.
+  // Only where a workspace carries the taste-data package (the codegen-x monorepo); a standalone checkout has no such consumer.
+  if (existsSync(join(workspace, "packages", "taste-data", "package.json"))) targets.push({ dir: "packages/taste-data/content", kind: "package", runtime: "core", files: [decksFile(inputs.collections.map((c) => c.value))], handwritten: [], manifest: MANIFEST, ignore: /^reference-/ });
+  return { workspace, xgenRoot, targets, problems, inputs, bricks: specs.bricks, apps };
+}
+
+/** the file a person changes instead of a generated file of the shared package (dictionary, fixtures, menus, registry, url core) */
+export function sharedSourceOf(path: string, screenFile: (name: string) => string | undefined): string | undefined {
+  if (path === "src/content.ts") return "xgen/content/ui/en.json";
+  if (path === "src/data/taxonomies.ts") return "xgen/fixtures/taxonomies/*.json";
+  if (path === "src/runtime/codex.ts") return "xgen/runtimes/core/src/app-common.ts (codexFile: the lookups of the entries)";
+  const data = /^src\/data\/([a-z0-9-]+)\.ts$/.exec(path);
+  if (data) return `xgen/fixtures/${data[1]}.json`;
+  const nav = /^src\/nav\/(\w+)\.ts$/.exec(path);
+  if (nav) return screenFile(nav[1]!);
+  const runtime = /^src\/runtime\/(\w+)\.ts$/.exec(path);
+  if (runtime) return `xgen/runtimes/core/assets/app/${runtime[1]}.ts`;
+  if (path === "src/styles/skins.css") return "xgen/runtimes/core/assets/styles/skins.css";
+  if (path === "src/screens.ts") return "xgen/runtimes/core/src/app-common.ts (registryFile lists every hosted screen)";
+  if (path === "tsconfig.json" || path === "README.md") return "xgen/runtimes/core/src/app-common.ts (sharedPackage)";
+  return undefined;
+}
+
+/** the file a person changes instead of a generated scaffold file of a host app: its xgen.app.json for what it serves, the runtime template for the rest */
+export function appSourceOf(path: string, runtime: Runtime, dir: string): string | undefined {
+  if (path === `${HOST_GEN}/runtime/url.svelte.ts`) return "xgen/runtimes/svelte/assets/url.svelte.ts";
+  if (path === `${HOST_GEN}/runtime/url.ts`) return `xgen/runtimes/${runtime}/assets/url.ts`;
+  if (path.endsWith("package.json")) return undefined;
+  return `xgen/runtimes/${runtime}/src/app.ts (settings: apps/${dir}/xgen.app.json)`;
+}
diff --git a/xgen/generator/src/readme.ts b/xgen/generator/src/readme.ts
new file mode 100644
index 0000000..b12f580
--- /dev/null
+++ b/xgen/generator/src/readme.ts
@@ -0,0 +1,35 @@
+// The README of a generated UI package.
+import { BANNER } from "@ui8kit/xgen-runtime-core";
+
+const EXT = { svelte: "svelte", react: "tsx", vue: "vue", solid: "tsx" } as const;
+
+export function packageReadme(name: string, runtime: "svelte" | "react" | "vue" | "solid", bricks: number, parts: number, organisms: number): string {
+  return [
+    `<!-- ${BANNER} -->`,
+    `# ${name}`,
+    "",
+    `${{ svelte: "Svelte 5", react: "React 19", vue: "Vue 3", solid: "SolidJS 1.9" }[runtime]} package **generated** by xgen from \`xgen/specs\`: ${bricks} bricks, ${parts} parts, ${organisms} organism(s).`,
+    "",
+    "Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`; `bun run check` fails when a file differs from what the specs produce.",
+    "",
+    "```ts",
+    `import { Button, Card, PricingCard } from "${name}";`,
+    "```",
+    "",
+    `Styles: \`@import "${name}/styles/index.css";\` in the app CSS (Tailwind v4).`,
+    "",
+    "The package has no build step. Text comes only through props; the organisms take their texts as `labels`.",
+    "",
+    "## Layout (shadcn style: three tiers, kebab-case files, PascalCase exports)",
+    "",
+    "```",
+    `src/primitives/<name>/   one primitive per folder, the variant table at the top of the file (\`buttonVariants = variants({...})\`)`,
+    `src/components/          small compositions of primitives (media-frame.${EXT[runtime]}, nav-item.${EXT[runtime]}, ...)`,
+    `src/blocks/              page sections made of components (hero-section.${EXT[runtime]}, logo-cloud.${EXT[runtime]}, ...)`,
+    "src/presets/<kit>.ts     the only place for kit sizes (arbitrary Tailwind values)",
+    "src/utils/               cn, variants (a cva clone), formatters",
+    "src/index.ts             named re-exports, grouped by tier",
+    "```",
+    "",
+  ].join("\n");
+}
diff --git a/xgen/generator/src/source.ts b/xgen/generator/src/source.ts
new file mode 100644
index 0000000..048bffe
--- /dev/null
+++ b/xgen/generator/src/source.ts
@@ -0,0 +1,32 @@
+// Source pointers: the second line of a generated file names the file a person changes instead of it.
+import { readdirSync, readFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import { BANNER, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+
+/** kebab name of an organism, part or pattern -> the authoring file that defines it (`spec(\`${O}hero-section\`, ...)` or `spec("pattern.feature-cards", ...)`) */
+export function authoringIndex(xgenRoot: string): Map<string, string> {
+  const dir = join(xgenRoot, "screens", "src", "authoring");
+  const out = new Map<string, string>();
+  const walk = (d: string): void => {
+    for (const e of readdirSync(d, { withFileTypes: true })) {
+      const p = join(d, e.name);
+      if (e.isDirectory()) walk(p);
+      else if (e.name.endsWith(".ts")) {
+        const text = readFileSync(p, "utf8");
+        const named = /(?:(?:spec|contract)\(\s*|\bid:\s*)(?:`\$\{\w+\}|["`](?:part|pattern|organism)\.)([a-z0-9-]+)["`]/g;
+        for (const m of text.matchAll(named)) if (!out.has(m[1]!)) out.set(m[1]!, relative(join(xgenRoot, ".."), p));
+      }
+    }
+  };
+  walk(dir);
+  return out;
+}
+
+/** the file with `Source: <path>` as its second line, in the comment style of its first line */
+export function withSource(file: GeneratedFile, source: string | undefined): GeneratedFile {
+  if (!source) return file;
+  const [first, ...rest] = file.contents.split("\n");
+  if (!first?.includes(BANNER) || rest[0]?.includes("Source:")) return file;
+  const line = first.startsWith("<!--") ? `<!-- Source: ${source} -->` : first.startsWith("/*") ? `/* Source: ${source} */` : `// Source: ${source}`;
+  return { ...file, contents: [first, line, ...rest].join("\n") };
+}
diff --git a/xgen/generator/src/templ.ts b/xgen/generator/src/templ.ts
new file mode 100644
index 0000000..8c1407e
--- /dev/null
+++ b/xgen/generator/src/templ.ts
@@ -0,0 +1,98 @@
+// The Go templ package: the bricks as .templ components (typed props structs, recipes embedded as JSON), the Go runtime helpers,
+// the LucideIcon asset with its glyph registry, the parity harness (cmd/parity) and the organisms (blocks/).
+import { readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import type { Inputs } from "@ui8kit/xgen-screens";
+import { BANNER, jsonFile, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+import { TemplEmitter, emitGoParityHarness, emitTemplOrganism, presetVar, recipeVar, TEMPL_MODULE, TEMPL_VERSION } from "@ui8kit/xgen-runtime-templ";
+import { indexParts, type OrganismSpec } from "@ui8kit/xgen-screens";
+import { withSource } from "./source";
+import { bannerJson, blockRootOf, collectOrganisms } from "./organisms";
+
+export const TEMPL_DIR = "packages/templ/ui";
+const ASSETS = join(import.meta.dir, "..", "..", "runtimes", "templ", "assets");
+const header = (src: string): string => (src.includes(BANNER) ? src : `// ${BANNER}\n${src}`);
+
+/** the Lucide registry as a Go map literal (tag + attributes per node) */
+function lucideGo(xgenRoot: string): string {
+  const { icons } = JSON.parse(readFileSync(xgenPaths(xgenRoot).lucide, "utf8")) as { icons: Record<string, Array<[string, Record<string, string>]>> };
+  const node = ([tag, attrs]: [string, Record<string, string>]): string =>
+    `{${JSON.stringify(tag)}, map[string]string{${Object.entries(attrs).map(([k, v]) => `${JSON.stringify(k)}: ${JSON.stringify(v)}`).join(", ")}}}`;
+  const rows = Object.entries(icons).map(([name, nodes]) => `\t${JSON.stringify(name)}: {\n${nodes.map((n) => `\t\t${node(n)},`).join("\n")}\n\t},`);
+  return [`// ${BANNER}`, `// Lucide icons (ISC license, https://lucide.dev), harvested into xgen/specs/assets/lucide-icons.json.`, ``, `package lucideicon`, ``,
+    `type glyphNode struct {\n\tTag   string\n\tAttrs map[string]string\n}`, ``, `var lucide = map[string][]glyphNode{`, ...rows, `}`, ``].join("\n");
+}
+
+export function templFiles(bricks: LoadedBrick[], inputs: Inputs, xgenRoot: string, problems: string[] = []): GeneratedFile[] {
+  const emitter = new TemplEmitter({ goModule: TEMPL_MODULE });
+  const files: GeneratedFile[] = [];
+  const spec = (b: LoadedBrick): string => `xgen/specs/ui/${b.specPath.split("/").pop()}`;
+  for (const b of bricks) {
+    if (b.brick.id === "ui.lucide-icon") {
+      files.push({ path: `ui/${b.brick.dir}/lucide-icon.templ`, contents: withSource({ path: "", contents: header(readFileSync(join(ASSETS, "LucideIcon.templ"), "utf8").replaceAll("{{MODULE}}", TEMPL_MODULE)) }, "xgen/runtimes/templ/assets/LucideIcon.templ").contents });
+      files.push({ path: `ui/${b.brick.dir}/lucide_icons.go`, contents: withSource({ path: "", contents: lucideGo(xgenRoot) }, "xgen/specs/assets/lucide-icons.json").contents });
+      continue;
+    }
+    for (const f of emitter.emit(b.brick)) {
+      if (f.path.endsWith(".json")) files.push({ path: f.path, contents: JSON.stringify({ "//": BANNER, ...JSON.parse(f.contents) }, null, 2) + "\n" });
+      else files.push(withSource(f, spec(b)));
+    }
+  }
+  for (const name of readdirSync(join(ASSETS, "go")).filter((n) => n.endsWith(".go")).sort()) {
+    files.push(withSource({ path: `utils/${name}`, contents: header(readFileSync(join(ASSETS, "go", name), "utf8")) }, `xgen/runtimes/templ/assets/go/${name}`));
+  }
+  files.push(...organismFiles(bricks, inputs, problems));
+  files.push(withSource(emitGoParityHarness(bricks.map((b) => b.brick), TEMPL_MODULE), "xgen/runtimes/templ/src/go-harness.ts"));
+  files.push({ path: "go.mod", contents: `// ${BANNER}\n// Source: xgen/generator/src/templ.ts\nmodule ${TEMPL_MODULE}\n\ngo 1.26.0\n\nrequire github.com/a-h/templ ${TEMPL_VERSION}\n` });
+  files.push({ path: ".gitignore", contents: `# ${BANNER}\n# templ generate output: rebuilt by bun run check (templ generate, go vet, go build)\n*_templ.go\n` });
+  const parts = bricks.reduce((n, b) => n + b.brick.parts.length, 0);
+  files.push(jsonFile("package.json", {
+    name: "@ui8kit/templ-ui", version: "0.0.0", private: true,
+    description: `Go templ primitives (${bricks.length} bricks, ${parts} parts) generated by xgen from xgen/specs. Go module ${TEMPL_MODULE}; run templ generate before go build.`,
+    // one Go package holds every organism, so the block-root zone lists the files the TypeScript packages keep in src/blocks plus their frame components
+    ui8kit: { runtime: "templ", generated: true, kit: ["ui", "utils"], composition: ["blocks"], blockRoot: blockRootOf(inputs, files, ".templ") },
+  }));
+  files.push({ path: "README.md", contents: [`<!-- ${BANNER} -->`, `# ${TEMPL_MODULE}`, ``,
+    `Go [templ](https://templ.guide) package **generated** by xgen from \`xgen/specs\`: ${bricks.length} bricks, ${parts} parts.`, ``,
+    "Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`.", ``,
+    "```sh", "templ generate && go vet ./... && go build ./...", "```", ``,
+    "```go", `import "${TEMPL_MODULE}/ui/button"`, ``, `@button.Button(button.ButtonProps{Variant: "outline"}) { Save }`, "```", ``,
+    "The classes are the same Tailwind v4 utilities as the Svelte, React, Vue and Solid packages: import their `styles/index.css` (theme and kit) in the app CSS and add `@source` for this folder.", ``].join("\n") });
+  return files;
+}
+
+/** the organisms portable to the static runtimes, with the recipes and presets they read embedded next to them */
+function organismFiles(bricks: LoadedBrick[], inputs: Inputs, problems: string[]): GeneratedFile[] {
+  const organisms = Object.fromEntries(inputs.organisms.map((o) => [o.value.name, o.value as OrganismSpec]));
+  const deps = { parts: indexParts(bricks), organisms, goModule: TEMPL_MODULE };
+  const c = collectOrganisms(inputs, problems, "templ", (org, source) => {
+    const out = emitTemplOrganism(org, deps);
+    return { files: [withSource(out.file, source)], recipes: out.recipes, presets: out.presets };
+  });
+  const files = c.files;
+  const embeds: string[] = [];
+  for (const { name: file, value } of c.recipes) {
+    files.push(bannerJson(`blocks/recipes/${file}.variants.json`, value));
+    embeds.push(`//go:embed recipes/${file}.variants.json`, `var ${recipeVar(file)}JSON []byte`, `var ${recipeVar(file)} = uiutils.MustRecipe(${recipeVar(file)}JSON)`, ``);
+  }
+  for (const { name, value } of c.presets) {
+    files.push(bannerJson(`blocks/presets/${name}.json`, value));
+    embeds.push(`//go:embed presets/${name}.json`, `var ${presetVar(name)}JSON []byte`, `var ${presetVar(name)} = uiutils.Get(uiutils.MustJSON(${presetVar(name)}JSON), "values")`, ``);
+  }
+  const names = files.filter((f) => f.path.startsWith("blocks/") && f.path.endsWith(".templ")).map((f) => /templ (\w+)\(p \w+Props\)/.exec(f.contents)![1]!).sort();
+  files.push({ path: "cmd/parity-blocks/main.go", contents: [`// ${BANNER}`, `// Source: xgen/generator/src/templ.ts`, ``,
+    `// Command parity-blocks renders organisms from JSON props: stdin [{"name":"HeroSection","props":{...}}], stdout the HTML of each.`,
+    `package main`, ``, `import (`, `\t"bufio"`, `\t"context"`, `\t"encoding/json"`, `\t"fmt"`, `\t"os"`, `\t"strings"`, ``, `\t"github.com/a-h/templ"`, ``, `\t"${TEMPL_MODULE}/blocks"`, `)`, ``,
+    `type request struct {\n\tName  string          \`json:"name"\`\n\tProps json.RawMessage \`json:"props"\`\n}`, ``,
+    `func component(name string, props []byte) (templ.Component, error) {`, `\tswitch name {`,
+    ...names.flatMap((n) => [`\tcase ${JSON.stringify(n)}:`, `\t\tvar p blocks.${n}Props`, `\t\tif err := json.Unmarshal(props, &p); err != nil {`, `\t\t\treturn nil, err`, `\t\t}`, `\t\treturn blocks.${n}(p), nil`]),
+    `\t}`, `\treturn nil, fmt.Errorf("unknown organism %s", name)`, `}`, ``,
+    `func main() {`, `\tvar reqs []request`, `\tif err := json.NewDecoder(bufio.NewReader(os.Stdin)).Decode(&reqs); err != nil {`, `\t\tpanic(err)`, `\t}`,
+    `\tout := make([]string, len(reqs))`, `\tfor i, r := range reqs {`, `\t\tc, err := component(r.Name, r.Props)`, `\t\tif err != nil {`, `\t\t\tout[i] = "ERROR: " + err.Error()`, `\t\t\tcontinue`, `\t\t}`,
+    `\t\tvar b strings.Builder`, `\t\tif err := c.Render(context.Background(), &b); err != nil {`, `\t\t\tout[i] = "ERROR: " + err.Error()`, `\t\t\tcontinue`, `\t\t}`, `\t\tout[i] = b.String()`, `\t}`,
+    `\t_ = json.NewEncoder(os.Stdout).Encode(out)`, `}`, ``].join("\n") });
+  files.push({ path: "blocks/embed.go", contents: [`// ${BANNER}`, `// Source: xgen/generator/src/templ.ts`, ``, `package blocks`, ``, `import (`, `\t_ "embed"`, ``, `\tuiutils "${TEMPL_MODULE}/utils"`, `)`, ``, ...embeds].join("\n") });
+  return files;
+}
diff --git a/xgen/generator/src/twig.ts b/xgen/generator/src/twig.ts
new file mode 100644
index 0000000..dd38588
--- /dev/null
+++ b/xgen/generator/src/twig.ts
@@ -0,0 +1,57 @@
+// The Twig package: the bricks as include templates (one per part, recipes next to them), the PHP runtime (the ui_*
+// functions: the Go helpers ported), the LucideIcon asset with its glyph registry, the organisms (blocks/), a parity
+// harness (bin/parity.php) and composer.json requiring twig/twig. The emitters print through a Jinja-family dialect,
+// so a Jinja2 package can reuse them.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import type { Inputs } from "@ui8kit/xgen-screens";
+import { BANNER, jsonFile, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+import { blockRootOf, dialectOrganismFiles } from "./organisms";
+import { emitTwigBrick, header, phpHelpers, PHP_SHARED_SOURCE, twig, TWIG_PACKAGE, TWIG_VERSION } from "@ui8kit/xgen-runtime-twig";
+
+export const TWIG_DIR = "packages/twig/ui";
+const ASSETS = join(import.meta.dir, "..", "..", "runtimes", "twig", "assets");
+const asset = (name: string): string => readFileSync(join(ASSETS, name), "utf8");
+/** a PHP file with the banner after the open tag */
+const php = (src: string, source: string): string => src.replace(/^<\?php\n/, `<?php\n\n// ${BANNER}\n// Source: ${source}\n`);
+const json = (path: string, value: unknown): GeneratedFile => ({ path, contents: JSON.stringify({ "//": BANNER, ...(value as object) }, null, 2) + "\n" });
+
+export function twigFiles(bricks: LoadedBrick[], inputs: Inputs, xgenRoot: string, problems: string[] = []): GeneratedFile[] {
+  const files: GeneratedFile[] = [];
+  for (const b of bricks) {
+    const source = `xgen/specs/ui/${b.specPath.split("/").pop()}`;
+    if (b.brick.id === "ui.lucide-icon") {
+      files.push({ path: `ui/${b.brick.dir}/lucide-icon${twig.ext}`, contents: `${header(twig, "xgen/runtimes/twig/assets/lucide-icon.html.twig", "LucideIcon (asset).")}\n${asset("lucide-icon.html.twig")}` });
+      const { "//": note, ...icons } = JSON.parse(readFileSync(xgenPaths(xgenRoot).lucide, "utf8")) as Record<string, unknown>;
+      files.push(json(`ui/${b.brick.dir}/lucide-icons.json`, { source: note, ...icons }));
+      continue;
+    }
+    try { files.push(...emitTwigBrick(b.brick, source)); } catch (e) { problems.push(`twig: ${(e as Error).message}`); }
+  }
+  for (const [name, src] of phpHelpers("Twig")) files.push({ path: `php/${name}`, contents: php(src, `${PHP_SHARED_SOURCE}/${name}`) });
+  files.push({ path: "php/Extension.php", contents: php(asset("php/Extension.php"), "xgen/runtimes/twig/assets/php/Extension.php") });
+  files.push({ path: "bin/parity.php", contents: php(asset("parity.php"), "xgen/runtimes/twig/assets/parity.php") });
+  files.push(...dialectOrganismFiles(bricks, inputs, problems, twig, "twig"));
+  const parts = bricks.reduce((n, b) => n + b.brick.parts.length, 0);
+  files.push({ path: "composer.json", contents: JSON.stringify({
+    name: TWIG_PACKAGE, description: `Twig templates of ui8kit (${bricks.length} bricks, ${parts} parts) generated by xgen from xgen/specs. ${BANNER}`,
+    type: "library", license: "MIT", require: { php: ">=8.2", "twig/twig": TWIG_VERSION }, autoload: { "psr-4": { "UI8Kit\\Twig\\": "php/" } },
+  }, null, 2) + "\n" });
+  files.push({ path: ".gitignore", contents: `# ${BANNER}\n# composer install output: rebuilt by bun run check\nvendor/\ncomposer.lock\n` });
+  files.push(jsonFile("package.json", {
+    name: "@ui8kit/twig-ui", version: "0.0.0", private: true,
+    description: `Twig templates (${bricks.length} bricks, ${parts} parts) generated by xgen from xgen/specs; PHP runtime in php/ (composer package ${TWIG_PACKAGE}).`,
+    // the organisms share one folder, so the block-root zone lists the files the TypeScript packages keep in src/blocks plus their frame components
+    ui8kit: { runtime: "twig", generated: true, kit: ["ui", "php"], composition: ["blocks"], blockRoot: blockRootOf(inputs, files, twig.ext) },
+  }));
+  files.push({ path: "README.md", contents: [`<!-- ${BANNER} -->`, `# ${TWIG_PACKAGE}`, ``,
+    `[Twig](https://twig.symfony.com) templates **generated** by xgen from \`xgen/specs\`: ${bricks.length} bricks, ${parts} parts, and the blocks.`, ``,
+    "Every file here starts with `Code generated by xgen. DO NOT EDIT.` Change the spec in `xgen/specs` and run `bun run build`.", ``,
+    "```php", `$twig = \\UI8Kit\\Twig\\Extension::environment('/path/to/packages/twig/ui');`, `echo $twig->render('ui/button/button.html.twig', ['p' => ['Variant' => 'outline'], 'children' => 'Save']);`, "```", ``,
+    "In a template: `{{ include('ui/button/button.html.twig', {p: {Variant: 'outline'}, children: label}, with_context = false) }}`. Brick props use the canonical",
+    "names (`Variant`, `Class`, `Attrs`), block props the JSON names of the TypeScript props (`title`, `className`); `children` is markup.", ``,
+    "The classes are the same Tailwind v4 utilities as the Svelte, React, Vue and Solid packages: import their `styles/index.css` in the app CSS and add `@source` for this folder.", ``].join("\n") });
+  return files.sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0));
+}
diff --git a/xgen/generator/src/write.ts b/xgen/generator/src/write.ts
new file mode 100644
index 0000000..ada5639
--- /dev/null
+++ b/xgen/generator/src/write.ts
@@ -0,0 +1,66 @@
+// Writes a plan to disk with a manifest of hashes per target, and compares a plan with the disk (drift).
+import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { BANNER } from "@ui8kit/xgen-runtime-core";
+import { MANIFEST, sha, type Plan, type Target } from "./plan";
+
+/** directories that belong to tools, not to the source of a target */
+const IGNORED = new Set(["node_modules", "dist", "shots", ".svelte-kit", ".vite", ".turbo"]);
+
+export function manifestOf(t: Target): string {
+  const files = Object.fromEntries(t.files.map((f) => [f.path, sha(f.contents)]).sort(([a], [b]) => String(a).localeCompare(String(b))));
+  return JSON.stringify({ "//": BANNER, target: t.dir, files }, null, 2) + "\n";
+}
+
+function walk(dir: string, base = dir): string[] {
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).flatMap((name) => {
+    if (IGNORED.has(name)) return [];
+    const p = join(dir, name);
+    return statSync(p).isDirectory() ? walk(p, base) : [relative(base, p)];
+  });
+}
+
+export function write(plan: Plan): { files: number; removed: number } {
+  let files = 0, removed = 0;
+  for (const t of plan.targets) {
+    const dir = join(plan.workspace, t.dir);
+    const keep = new Set([...t.files.map((f) => f.path), t.manifest, ...t.handwritten]);
+    // everything a previous build wrote and this one does not: removed. Anything else in the dir is not ours to delete.
+    const manifestPath = join(dir, t.manifest);
+    if (existsSync(manifestPath)) {
+      const prev = JSON.parse(readFileSync(manifestPath, "utf8")) as { files: Record<string, string> };
+      for (const f of Object.keys(prev.files)) if (!keep.has(f)) { rmSync(join(dir, f), { force: true }); removed++; }
+    }
+    for (const f of t.files) {
+      const p = join(dir, f.path);
+      mkdirSync(dirname(p), { recursive: true });
+      if (!existsSync(p) || readFileSync(p, "utf8") !== f.contents) writeFileSync(p, f.contents);
+      files++;
+    }
+    writeFileSync(manifestPath, manifestOf(t));
+  }
+  return { files, removed };
+}
+
+/** problems when the disk is not what the specs produce: a hand edit, a missing file, a stale file, a file nobody generated */
+export function drift(plan: Plan): string[] {
+  const out: string[] = [];
+  for (const t of plan.targets) {
+    const dir = join(plan.workspace, t.dir);
+    const expected = new Map(t.files.map((f) => [f.path, f.contents]));
+    for (const [path, contents] of expected) {
+      const p = join(dir, path);
+      if (!existsSync(p)) { out.push(`${t.dir}/${path}: missing (run: bun run build)`); continue; }
+      if (readFileSync(p, "utf8") !== contents) out.push(`${t.dir}/${path}: differs from the generated file (hand edit or stale; run: bun run build)`);
+      if (!contents.includes("DO NOT EDIT")) out.push(`${t.dir}/${path}: generated file without the DO NOT EDIT header`);
+    }
+    const mp = join(dir, t.manifest);
+    if (!existsSync(mp)) out.push(`${t.dir}/${t.manifest}: missing`);
+    else if (readFileSync(mp, "utf8") !== manifestOf(t)) out.push(`${t.dir}/${t.manifest}: differs from the plan`);
+    const allowed = new Set([...expected.keys(), t.manifest, ...t.handwritten]);
+    for (const f of walk(dir)) if (!allowed.has(f) && !t.ignore?.test(f)) out.push(`${t.dir}/${f}: not generated and not an input (hand-written file in a generated ${t.kind}; delete it or move the logic into a spec)`);
+    for (const h of t.handwritten) if (!existsSync(join(dir, h))) out.push(`${t.dir}/${h}: missing input`);
+  }
+  return out;
+}
diff --git a/xgen/generator/test/generator.test.ts b/xgen/generator/test/generator.test.ts
new file mode 100644
index 0000000..b6b137a
--- /dev/null
+++ b/xgen/generator/test/generator.test.ts
@@ -0,0 +1,65 @@
+import { afterAll, expect, test } from "bun:test";
+import { cpSync, mkdtempSync, readFileSync, rmSync, writeFileSync, mkdirSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { drift, planBuild, write } from "../src";
+
+const repo = join(import.meta.dir, "..", "..", "..");
+const tmp = mkdtempSync(join(tmpdir(), "xgen-"));
+afterAll(() => rmSync(tmp, { recursive: true, force: true }));
+
+// a scratch workspace: the real xgen folder is read, targets are written under tmp
+for (const app of ["host-svelte", "host-react", "host-vue"]) {
+  mkdirSync(join(tmp, "apps", app), { recursive: true });
+  cpSync(join(repo, "apps", app, "xgen.app.json"), join(tmp, "apps", app, "xgen.app.json"));
+}
+const plan = () => planBuild(tmp, join(repo, "xgen"));
+
+test("the plan is deterministic", () => {
+  const a = plan(), b = plan();
+  expect(a.problems).toEqual([]);
+  expect(a.targets.map((t) => t.files.map((f) => f.path + f.contents))).toEqual(b.targets.map((t) => t.files.map((f) => f.path + f.contents)));
+});
+
+test("every generated text file carries DO NOT EDIT", () => {
+  for (const t of plan().targets) for (const f of t.files) expect(f.contents.slice(0, 300)).toContain("DO NOT EDIT");
+});
+
+test("a fresh write has no drift; hand edits, extra and missing files are found", () => {
+  const p = plan();
+  write(p);
+  expect(drift(p)).toEqual([]);
+  const app = join(tmp, "apps", "host-svelte");
+  const screen = join(app, "xgen/screens/PlansScreen.svelte");
+  writeFileSync(screen, readFileSync(screen, "utf8") + "\n<!-- hand edit -->\n");
+  writeFileSync(join(app, "src/Extra.svelte"), "<p>by hand</p>");
+  rmSync(join(tmp, "apps", "host-react", "xgen/App.tsx"));
+  const found = drift(p).join("\n");
+  expect(found).toContain("host-svelte/xgen/screens/PlansScreen.svelte: differs");
+  expect(found).toContain("host-svelte/src/Extra.svelte: not generated and not an input");
+  expect(found).toContain("host-react/xgen/App.tsx: missing");
+  write(p);
+  expect(drift(p).join("\n")).toContain("Extra.svelte"); // build does not delete what it did not write
+  rmSync(join(app, "src/Extra.svelte"));
+  expect(drift(p)).toEqual([]);
+});
+
+test("one host per runtime serves every screen; content, data and menus live once in the shared package", () => {
+  const p = plan();
+  const hosts = p.targets.filter((x) => x.kind === "app");
+  expect(hosts.map((h) => h.dir).sort()).toEqual(["apps/host-react", "apps/host-svelte", "apps/host-vue"]);
+  for (const h of hosts) {
+    // one file per screen, plus one per page of a chunked screen (the gallery: xgen/screens/BlocksScreen/<Area>Page)
+    expect(h.files.filter((f) => /^xgen\/screens\/[^/]+$/.test(f.path)).length).toBe(p.inputs.screens.length);
+    const pages = h.files.filter((f) => f.path.startsWith("xgen/screens/BlocksScreen/")).length;
+    expect(pages).toBe(p.inputs.blocks.length + 3); // every block, the index, notfound and the ScreenHeader part
+    expect(h.files.some((f) => /content\.ts$|\/data\/|\/nav\/|runtime\/core\.ts$/.test(f.path))).toBe(false);
+  }
+  const shared = p.targets.find((x) => x.dir === "packages/shared/app")!;
+  expect(shared.files.filter((f) => f.path === "src/content.ts").length).toBe(1);
+});
+
+test("the apps hold nothing but generated files and xgen.app.json", () => {
+  const p = plan();
+  for (const t of p.targets.filter((x) => x.kind === "app")) expect(t.handwritten).toEqual(["xgen.app.json"]);
+});
diff --git a/xgen/generator/test/plan.test.ts b/xgen/generator/test/plan.test.ts
new file mode 100644
index 0000000..6ec4dc8
--- /dev/null
+++ b/xgen/generator/test/plan.test.ts
@@ -0,0 +1,34 @@
+import { expect, test } from "bun:test";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { drift, planBuild } from "../src/index";
+import { packageReadme } from "../src/readme";
+
+const repo = join(import.meta.dir, "..", "..", "..");
+
+test("the plan has the four UI packages, the Go templ package, the Twig package, the Jinja2 package, the shared app package, the taste copy decks (only in the codegen-x monorepo) and one host per runtime, and no problem", () => {
+  const plan = planBuild(repo);
+  expect(plan.problems).toEqual([]);
+  expect(plan.targets.filter((t) => t.kind === "package").map((t) => t.dir)).toEqual(["packages/svelte/ui", "packages/react/ui", "packages/vue/ui", "packages/solid/ui", "packages/templ/ui", "packages/twig/ui", "packages/jinja2/ui", "packages/latte/ui", "packages/shared/app", ...(existsSync(join(repo, "packages/taste-data/package.json")) ? ["packages/taste-data/content"] : [])]);
+  expect(plan.targets.filter((t) => t.kind === "app").length).toBe(plan.apps.length);
+  expect(plan.apps.map((a) => a.app.runtime).sort()).toEqual(["react", "solid", "svelte", "vue"]);
+});
+
+test("the files of a target are listed in the order of their paths, none twice", () => {
+  for (const t of planBuild(repo).targets) {
+    const paths = t.files.map((f) => f.path);
+    expect(paths).toEqual([...paths].sort());
+    expect(new Set(paths).size).toBe(paths.length);
+  }
+});
+
+test("what is on disk is what the plan generates", () => {
+  expect(drift(planBuild(repo))).toEqual([]);
+});
+
+test("the README names the package, the runtime and the counts", () => {
+  const text = packageReadme("@ui8kit/svelte-ui", "svelte", 39, 69, 3);
+  expect(text).toContain("Svelte 5");
+  expect(text).toContain("39 bricks, 69 parts, 3 organism(s)");
+  expect(text).toContain("DO NOT EDIT");
+});
diff --git a/xgen/generator/test/source.test.ts b/xgen/generator/test/source.test.ts
new file mode 100644
index 0000000..05c837b
--- /dev/null
+++ b/xgen/generator/test/source.test.ts
@@ -0,0 +1,55 @@
+import { expect, test } from "bun:test";
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { BANNER } from "@ui8kit/xgen-runtime-core";
+import { authoringIndex, withSource } from "../src/source";
+import { appSourceOf, sharedSourceOf } from "../src/plan";
+
+test("withSource adds the pointer as line 2 in the comment style of line 1", () => {
+  const svelte = withSource({ path: "a.svelte", contents: `<!-- ${BANNER} -->\n<div></div>` }, "x/a.ts");
+  expect(svelte.contents.split("\n")[1]).toBe("<!-- Source: x/a.ts -->");
+  const ts = withSource({ path: "a.ts", contents: `// ${BANNER}\nexport {};` }, "x/a.ts");
+  expect(ts.contents.split("\n")[1]).toBe("// Source: x/a.ts");
+  const css = withSource({ path: "a.css", contents: `/* ${BANNER} */\n` }, "x/a.css");
+  expect(css.contents.split("\n")[1]).toBe("/* Source: x/a.css */");
+  expect(withSource(ts, "again").contents).toBe(ts.contents);
+  expect(withSource({ path: "b.ts", contents: "no banner" }, "x").contents).toBe("no banner");
+});
+
+test("authoringIndex finds the authoring file of every organism", () => {
+  const idx = authoringIndex(join(import.meta.dir, "..", ".."));
+  expect(idx.get("hero-classic")).toBe("xgen/screens/src/authoring/blocks/landing-hero.ts");
+  expect(idx.get("nav-links")).toBe("xgen/screens/src/authoring/components/nav.ts");
+});
+
+test("shared and host scaffold files point at the file a person changes, and every pointer exists", () => {
+  const root = join(import.meta.dir, "..", "..", "..");
+  const screen = (name: string): string | undefined => (name === "SiteScreen" ? "xgen/specs/screens/site.json" : undefined);
+  const shared = ["src/content.ts", "src/data/features.ts", "src/nav/SiteScreen.ts", "src/runtime/core.ts", "src/runtime/theme.ts", "src/styles/skins.css", "src/screens.ts", "tsconfig.json"];
+  for (const p of shared) {
+    const src = sharedSourceOf(p, screen);
+    expect(src, p).toBeDefined();
+    expect(existsSync(join(root, src!.split(" ")[0]!)), `${p} -> ${src}`).toBe(true);
+  }
+  expect(appSourceOf("vite.config.ts", "svelte", "host-svelte")).toBe("xgen/runtimes/svelte/src/app.ts (settings: apps/host-svelte/xgen.app.json)");
+  expect(appSourceOf("xgen/runtime/url.ts", "react", "host-react")).toBe("xgen/runtimes/react/assets/url.ts");
+  expect(appSourceOf("xgen/runtime/url.ts", "vue", "host-vue")).toBe("xgen/runtimes/vue/assets/url.ts");
+  expect(appSourceOf("package.json", "react", "host-react")).toBeUndefined();
+});
+
+test("authoringIndex also finds specs named with a literal prefix", () => {
+  const idx = authoringIndex(join(import.meta.dir, "..", ".."));
+  expect(idx.get("feature-cards")).toBe("xgen/screens/src/authoring/components/features.ts");
+  expect(idx.get("cart-table")).toBe("xgen/screens/src/authoring/components/cart-table.ts");
+});
+
+test("authoring follows the tiers: components/ writes parts and patterns, blocks/ writes organisms", () => {
+  const dir = join(import.meta.dir, "..", "..", "screens", "src", "authoring");
+  const ids = (tier: string): string[] => readdirSync(join(dir, tier)).filter((f) => f.endsWith(".ts")).flatMap((f) => {
+    const text = readFileSync(join(dir, tier, f), "utf8");
+    const prefix = Object.fromEntries([...text.matchAll(/const (\w+) = "(organism|pattern|part)\.";/g)].map((m) => [m[1]!, m[2]!]));
+    return [...text.matchAll(/(?:spec|contract)\(\s*(?:`\$\{(\w+)\}|["`](organism|pattern|part)\.)([a-z0-9-]+)/g)].map((m) => `${f}: ${m[2] ?? prefix[m[1]!]}.${m[3]}`);
+  });
+  expect(ids("blocks").filter((x) => !x.includes(": organism."))).toEqual([]);
+  expect(ids("components").filter((x) => x.includes(": organism."))).toEqual([]);
+});
diff --git a/xgen/runtimes/core/README.md b/xgen/runtimes/core/README.md
new file mode 100644
index 0000000..940f8ae
--- /dev/null
+++ b/xgen/runtimes/core/README.md
@@ -0,0 +1,10 @@
+# @ui8kit/xgen-runtime-core
+
+Shared emitter helpers (types, shared module, expression printer) and the TypeScript runtime support files copied into generated packages.
+
+Part of xgen (see `../README.md` and `../../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
+
+## Assets
+
+`assets/ts` (the `utils` of every generated package: `cn`, variants/compound, expressions, tags, `format`), `assets/styles` (`theme.css`, `kit.css`),
+`assets/app` (`core.ts`: Codex mapping, search/sort/page, routes, the URL as a port, screen actions; `fields.ts`: the central Codex field maps by kind (product, post, plan), listed per block in `xgen/schema/codex/blocks.json`; `theme.ts`). All pure TypeScript, shared by every TypeScript runtime.
diff --git a/xgen/runtimes/core/assets/app/core.ts b/xgen/runtimes/core/assets/app/core.ts
new file mode 100644
index 0000000..d5b5b31
--- /dev/null
+++ b/xgen/runtimes/core/assets/app/core.ts
@@ -0,0 +1,314 @@
+// The portable runtime of a generated app: pure TypeScript, shared by the Svelte and the React runtime.
+// It holds everything a screen does that is not markup: the Codex mapping, search/sort/page, routes and the URL as a port.
+
+export type SortDir = "asc" | "desc";
+export interface ListConfig { searchFields: readonly string[]; pageSize: number; defaultSort: string }
+export interface ListState { q?: string; sort?: string; page?: string }
+export interface ListView<T> {
+  rows: T[];
+  total: number;
+  page: number;
+  pages: number;
+  sort: { field: string; dir: SortDir };
+  q: string;
+  /** 1-based position of the first and the last row on the page (0 when empty) */
+  from: number;
+  to: number;
+  /** the query string of the current list state ("?sort=price:desc&page=2" or ""), appended to links so a record keeps the list state */
+  qs: string;
+}
+
+/**
+ * The clock of relative dates. Fixtures are static, so the kit renders them against a fixed instant: every screen,
+ * runtime and screenshot shows the same "2 min ago". A live app passes its own `now` to `fromCodex`.
+ */
+export const DEMO_NOW = "2026-03-30T12:00:00Z";
+
+/** the locale of the kit's fixtures and of an entry that names none */
+export const DEFAULT_LOCALE = "en";
+
+const dateFmts = new Map<string, Intl.DateTimeFormat>();
+/** an RFC 3339 date-time -> a short date in the locale, UTC ("Mar 09, 2026" in en); a value that is not a date stays as it is */
+export function fmtDate(iso: unknown, locale: string = DEFAULT_LOCALE): unknown {
+  const t = typeof iso === "string" ? Date.parse(iso) : NaN;
+  if (Number.isNaN(t)) return iso;
+  let f = dateFmts.get(locale);
+  if (!f) { f = new Intl.DateTimeFormat(locale, { month: "short", day: "2-digit", year: "numeric", timeZone: "UTC" }); dateFmts.set(locale, f); }
+  return f.format(t);
+}
+
+export type AgoStyle = "ago" | "ago-days" | "ago-short";
+const isEnglish = (locale: string): boolean => /^en(-|$)/i.test(locale);
+const upperFirst = (s: string, locale: string): string => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
+/** n units before now in the locale: Intl.RelativeTimeFormat (long; numeric auto, so 1 day is "yesterday" in the "ago" style) */
+function relative(n: number, unit: "minute" | "hour" | "day" | "week", locale: string, style: AgoStyle): string {
+  // the kit's compact English units ("2 min ago", "1 h ago", "3 d ago") stay as they were; every other form comes from Intl
+  if (isEnglish(locale) && (unit === "minute" || unit === "hour" || (unit === "day" && style === "ago-short"))) return `${n} ${unit === "minute" ? "min" : unit === "hour" ? "h" : "d"} ago`;
+  const numeric = style === "ago" ? "auto" : "always";
+  return upperFirst(new Intl.RelativeTimeFormat(locale, { numeric, style: style === "ago-short" ? "short" : "long" }).format(-n, unit), locale);
+}
+/**
+ * an RFC 3339 date-time -> time before `now`, in the locale (en shown):
+ *   ago        "2 min ago", "1 h ago", "Yesterday", "3 days ago", "2 weeks ago"   (activity feeds)
+ *   ago-days   "1 day ago", "5 days ago", "1 week ago", "2 weeks ago"            (postings)
+ *   ago-short  "2 min ago", "5 h ago", "3 d ago"                                  (compact cards)
+ */
+export function fmtAgo(iso: unknown, now: string | number = DEMO_NOW, style: AgoStyle = "ago", locale: string = DEFAULT_LOCALE): unknown {
+  const t = typeof iso === "string" ? Date.parse(iso) : NaN;
+  const ref = typeof now === "number" ? now : Date.parse(now);
+  if (Number.isNaN(t) || Number.isNaN(ref)) return iso;
+  const min = Math.max(0, Math.round((ref - t) / 60000));
+  const h = Math.floor(min / 60), d = Math.floor(min / 1440), w = Math.floor(d / 7);
+  if (style === "ago-days") return d < 7 ? relative(Math.max(d, 1), "day", locale, style) : relative(w, "week", locale, style);
+  if (min < 60) return relative(min, "minute", locale, style);
+  if (h < 24) return relative(h, "hour", locale, style);
+  if (style === "ago-short") return relative(d, "day", locale, style);
+  return d < 7 ? relative(d, "day", locale, style) : relative(w, "week", locale, style);
+}
+
+/** the units a figure may carry (`metadata.unit` of the entry), as Intl unit identifiers */
+const FIGURE_UNITS = ["percent", "second", "millisecond", "minute", "hour", "day", "kilobyte", "megabyte", "gigabyte"] as const;
+
+/** a number of an entry in the locale (Intl), with its unit: (12400) -> "12,400", (99.99, percent) -> "99.99%", (0.8, second) -> "0.8s" */
+export function fmtFigure(value: unknown, unit: unknown, locale: string = DEFAULT_LOCALE): string | undefined {
+  if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
+  const known = typeof unit === "string" && (FIGURE_UNITS as readonly string[]).includes(unit);
+  return new Intl.NumberFormat(locale, known ? { style: "unit", unit: unit as string, unitDisplay: "narrow", maximumFractionDigits: 2 } : { maximumFractionDigits: 2 }).format(value);
+}
+
+/** a count in short form, in the locale (1200 -> "1.2K", 96 -> "96"): views, likes, followers */
+export function fmtCompact(value: unknown, locale: string = DEFAULT_LOCALE): string | undefined {
+  if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
+  return new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(value);
+}
+
+/** an amount of money in integer minor units ("4820000", "USD" -> "$48,200"), in the locale; whole amounts show no cents */
+export function fmtCurrency(minor: unknown, currency: string, locale: string = DEFAULT_LOCALE): string | undefined {
+  if (typeof minor !== "number" || !Number.isFinite(minor)) return undefined;
+  const digits = new Intl.NumberFormat(locale, { style: "currency", currency }).resolvedOptions().maximumFractionDigits ?? 2;
+  const value = minor / 10 ** digits;
+  return new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: Number.isInteger(value) ? 0 : digits }).format(value);
+}
+
+export interface ReadOptions {
+  now?: string | number;
+  /** the locale of the app; without it a date is formatted in the `locale` of its entry (then DEFAULT_LOCALE) */
+  locale?: string;
+  /** the entries of kind `media`: `featured_media_id|media` resolves to the `file` of the published one with that id; without it: undefined (the placeholder) */
+  media?: readonly unknown[];
+  /** the entries of kind `user`: `author_id|author` resolves to the `display_name` of the one with that id; without it: undefined */
+  users?: readonly unknown[];
+  /** the Codex terms (of every taxonomy): `terms|term:<taxonomy>` resolves to the `name` of the entry's first term of that taxonomy; without it: undefined */
+  terms?: readonly unknown[];
+  /** the entries of kind `menu_item` that sit under another (parent_id): `id|menu` lists the children of an item as NavLink
+   *  records { id, name, icon, href } in their `order`; without it: [] */
+  menus?: readonly unknown[];
+  /** the address of an entry by its kind, with `{slug}`: `{ product: "#/product/{slug}" }`; `slug|route` builds it; without a route: undefined (no link) */
+  routes?: Readonly<Record<string, string>>;
+}
+
+const field = (o: unknown, k: string): unknown => (o !== null && typeof o === "object" ? (o as Record<string, unknown>)[k] : undefined);
+
+/** a record is keyed by (id, locale): of the records with one id, the one in the locale, else the first */
+const byLocale = (records: readonly unknown[], locale: string): unknown => records.find((r) => field(r, "locale") === locale) ?? records[0];
+
+/**
+ * a value by a dotted path, with an optional formatter after a pipe:
+ *   "metadata.date.value|date"  -> fmtDate      "metadata.time.value|ago" (or ago-days, ago-short) -> fmtAgo   (in the locale)
+ *   "featured_media_id|media"   -> the file of that media entry      "slug|route" -> the address from the route of the entry's kind
+ *   "author_id|author"          -> the display name of that user     "terms|term:category" -> the name of the entry's term of that taxonomy
+ *   "terms|term-slug:faq_category" -> the slug of that term (a filter key)
+ *   "metadata.value.value|number" -> the number in the locale, with the entry's `metadata.unit` (percent, second): 12400 -> "12,400"
+ *   "metadata.views.value|compact" -> the count in short form: 1200 -> "1.2K"
+ *   "id|menu"                   -> the menu items under this one (parent_id), as { id, name, icon, href } (href only with a route)
+ */
+export function readPath(source: unknown, path: string, opts: ReadOptions = {}): unknown {
+  const [dotted, pipe] = path.split("|") as [string, string | undefined];
+  let cur: unknown = source;
+  for (const part of dotted.split(".")) {
+    if (cur === null || typeof cur !== "object") return undefined;
+    cur = (cur as Record<string, unknown>)[part];
+  }
+  if (pipe === undefined || cur === undefined) return cur;
+  const own = field(source, "locale");
+  const locale = opts.locale ?? (typeof own === "string" ? own : DEFAULT_LOCALE);
+  if (pipe === "date") return fmtDate(cur, locale);
+  if (pipe === "ago" || pipe === "ago-days" || pipe === "ago-short") return fmtAgo(cur, opts.now ?? DEMO_NOW, pipe, locale);
+  // a media entry with no uploaded asset is a draft: no file, the block shows its placeholder
+  if (pipe === "media") return field(field(field((opts.media ?? []).find((m) => field(m, "id") === cur && field(m, "status") === "published"), "metadata"), "file"), "value");
+  if (pipe === "author") {
+    const user = byLocale((opts.users ?? []).filter((u) => field(u, "id") === cur), locale);
+    return field(field(field(user, "metadata"), "display_name"), "value") ?? field(user, "title");
+  }
+  if (pipe === "number") {
+    const currency = field(field(field(source, "metadata"), "currency"), "value");
+    return typeof currency === "string" ? fmtCurrency(cur, currency, locale) : fmtFigure(cur, field(field(field(source, "metadata"), "unit"), "value"), locale);
+  }
+  if (pipe === "compact") return fmtCompact(cur, locale);
+  if (pipe.startsWith("term:") || pipe.startsWith("term-slug:")) {
+    const taxonomy = pipe.slice(pipe.indexOf(":") + 1);
+    const ref = Array.isArray(cur) ? cur.find((r) => field(r, "taxonomy") === taxonomy) : undefined;
+    if (ref === undefined) return undefined;
+    const term = byLocale((opts.terms ?? []).filter((t) => field(t, "taxonomy_id") === taxonomy && field(t, "id") === field(ref, "term_id")), locale);
+    return field(term, pipe.startsWith("term-slug:") ? "slug" : "name");
+  }
+  if (pipe === "menu") {
+    const kids = (opts.menus ?? []).filter((m) => field(m, "parent_id") === cur);
+    const order = (m: unknown): number => { const o = field(m, "order"); return typeof o === "number" ? o : 0; };
+    return [...kids].sort((a, b) => order(a) - order(b)).map((m) => ({
+      id: field(m, "id"), name: field(m, "title"), icon: field(field(field(m, "metadata"), "icon"), "value"), href: readPath(m, "slug|route", opts),
+    }));
+  }
+  if (pipe === "route") {
+    const kind = field(source, "kind"), route = typeof kind === "string" ? opts.routes?.[kind] : undefined;
+    return route === undefined ? undefined : route.replace("{slug}", encodeURIComponent(String(cur)));
+  }
+  throw new Error(`readPath: unknown formatter "${pipe}" in "${path}"`);
+}
+
+/** the trail of pages from the root to `leaf` by their parent_id chain (breadcrumbs); without `leaf`, the one no other names as parent */
+export function trail<T>(entries: readonly T[], leaf?: string): T[] {
+  const byId = new Map(entries.map((e) => [field(e, "id"), e] as const));
+  const parents = new Set(entries.map((e) => field(e, "parent_id")));
+  let cur: T | undefined = leaf !== undefined ? byId.get(leaf) : entries.find((e) => !parents.has(field(e, "id")));
+  const out: T[] = [];
+  while (cur !== undefined && !out.includes(cur)) { out.unshift(cur); cur = byId.get(field(cur, "parent_id")); }
+  return out;
+}
+
+/** Codex entries -> flat records by the `fields` mapping of the screen ("title", "metadata.price.value", "metadata.date.value|date") */
+export function fromCodex<T>(entries: readonly unknown[], fields: Record<string, string>, opts: ReadOptions = {}): T[] {
+  return entries.map((e) => Object.fromEntries(Object.entries(fields).map(([name, path]) => [name, readPath(e, path, opts)])) as T);
+}
+
+export function parseSort(sort: string | undefined, fallback: string): { field: string; dir: SortDir } {
+  const [field, dir] = (sort || fallback).split(":");
+  return { field: field || fallback.split(":")[0]!, dir: dir === "desc" ? "desc" : "asc" };
+}
+
+const compare = (a: unknown, b: unknown): number => {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
+  return String(a ?? "").localeCompare(String(b ?? ""), "en", { numeric: true, sensitivity: "base" });
+};
+
+export function listQuery(state: { q: string; sort: string; page: number }, cfg: ListConfig): string {
+  const p = new URLSearchParams();
+  if (state.q) p.set("q", state.q);
+  if (state.sort && state.sort !== cfg.defaultSort) p.set("sort", state.sort);
+  if (state.page > 1) p.set("page", String(state.page));
+  const s = p.toString().replace(/%3A/gi, ":");
+  return s ? `?${s}` : "";
+}
+
+export function collectionView<T extends object>(all: readonly T[], cfg: ListConfig, state: ListState): ListView<T> {
+  const q = (state.q ?? "").trim();
+  const sort = parseSort(state.sort, cfg.defaultSort);
+  const needle = q.toLowerCase();
+  const found = needle ? all.filter((r) => cfg.searchFields.some((f) => String((r as Record<string, unknown>)[f] ?? "").toLowerCase().includes(needle))) : [...all];
+  const sign = sort.dir === "desc" ? -1 : 1;
+  found.sort((a, b) => sign * compare((a as Record<string, unknown>)[sort.field], (b as Record<string, unknown>)[sort.field]));
+  const total = found.length;
+  const pages = Math.max(1, Math.ceil(total / cfg.pageSize));
+  const page = Math.min(Math.max(1, Math.floor(Number(state.page)) || 1), pages);
+  const start = (page - 1) * cfg.pageSize;
+  const rows = found.slice(start, start + cfg.pageSize);
+  return {
+    rows, total, page, pages, sort, q,
+    from: total ? start + 1 : 0,
+    to: start + rows.length,
+    qs: listQuery({ q, sort: `${sort.field}:${sort.dir}`, page }, cfg),
+  };
+}
+
+// ---- routes -----------------------------------------------------------------------------------------------
+
+export interface RouteDef { path: string; area: string }
+export interface RouteMatch { area: string; params: Record<string, string> }
+
+export function matchRoute(routes: readonly RouteDef[], path: string): RouteMatch | null {
+  const parts = path.split("/").filter(Boolean);
+  for (const r of routes) {
+    const pat = r.path.split("/").filter(Boolean);
+    if (pat.length !== parts.length) continue;
+    const params: Record<string, string> = {};
+    if (pat.every((seg, i) => (seg.startsWith(":") ? ((params[seg.slice(1)] = decodeURIComponent(parts[i]!)), true) : seg === parts[i]))) return { area: r.area, params };
+  }
+  return null;
+}
+
+/** does a route of this list own the path (decides which screen of an app shows) */
+export const ownsPath = (routes: readonly RouteDef[], path: string): boolean => matchRoute(routes, path) !== null;
+
+// ---- the URL as a port --------------------------------------------------------------------------------------
+// A screen never touches window.location. It gets a UrlPort: Svelte wraps the store in runes, React in useSyncExternalStore.
+
+export interface UrlState { path: string; query: Record<string, string> }
+export interface UrlPort extends UrlState { go(path: string, query?: Record<string, string | undefined>): void }
+
+/** `#/pricing` and the empty hash are routes; `#main-content` is an in-page anchor (the skip link) and leaves the route alone */
+export const isRouteHash = (hash: string): boolean => hash === "" || hash === "#" || hash.startsWith("#/");
+
+export function parseHash(hash: string): UrlState {
+  const raw = hash.replace(/^#\/?/, "");
+  const [path = "", search = ""] = raw.split("?");
+  const query: Record<string, string> = {};
+  for (const [k, v] of new URLSearchParams(search)) query[k] = v;
+  return { path: path.replace(/\/+$/, ""), query };
+}
+
+export function buildHash(path: string, query: Record<string, string | undefined> = {}): string {
+  const p = new URLSearchParams();
+  for (const [k, v] of Object.entries(query)) if (v !== undefined && v !== "") p.set(k, v);
+  const s = p.toString().replace(/%3A/gi, ":");
+  return `#/${path}${s ? `?${s}` : ""}`;
+}
+
+export interface HashStore { getSnapshot(): UrlState; subscribe(fn: () => void): () => void; go: UrlPort["go"] }
+
+/** the URL state in location.hash; the snapshot object changes only when the hash changes (useSyncExternalStore needs that) */
+export function createHashStore(win: Window = window): HashStore {
+  let hash = win.location.hash;
+  let snap = parseHash(isRouteHash(hash) ? hash : "");
+  const subs = new Set<() => void>();
+  const read = (): void => {
+    if (win.location.hash === hash) return;
+    hash = win.location.hash;
+    if (!isRouteHash(hash)) return;
+    snap = parseHash(hash);
+    subs.forEach((f) => f());
+  };
+  win.addEventListener("hashchange", read);
+  return {
+    getSnapshot: () => snap,
+    subscribe(fn) { subs.add(fn); return () => subs.delete(fn); },
+    go(path, query) { win.location.hash = buildHash(path, query); read(); },
+  };
+}
+
+// ---- screen actions ---------------------------------------------------------------------------------------
+
+export interface ScreenActions {
+  sort(field: string): void;
+  search(q: string): void;
+  page(n: number): void;
+  open(id: string): void;
+  back(): void;
+  toggleTheme(): void;
+}
+
+/** the actions of a collection screen; every one of them only changes the URL */
+export function screenActions(url: UrlPort, view: ListView<object>, listPath: string, recordPath: (id: string) => string, toggleTheme: () => void): ScreenActions {
+  const q = (extra: Record<string, string | undefined>): Record<string, string | undefined> => ({ ...url.query, ...extra });
+  return {
+    sort(field) {
+      const dir: SortDir = view.sort.field === field && view.sort.dir === "asc" ? "desc" : "asc";
+      url.go(listPath, q({ sort: `${field}:${dir}`, page: undefined }));
+    },
+    search(text) { url.go(listPath, q({ q: text || undefined, page: undefined })); },
+    page(n) { url.go(listPath, q({ page: n > 1 ? String(n) : undefined })); },
+    open(id) { url.go(recordPath(id), url.query); },
+    back() { url.go(listPath, url.query); },
+    toggleTheme,
+  };
+}
diff --git a/xgen/runtimes/core/assets/app/fields.ts b/xgen/runtimes/core/assets/app/fields.ts
new file mode 100644
index 0000000..5554820
--- /dev/null
+++ b/xgen/runtimes/core/assets/app/fields.ts
@@ -0,0 +1,193 @@
+// The central Codex field maps: one map per entry kind, from a v0.4 entry to the record a kit block reads
+// (`fromCodex(entries, CODEX_FIELDS.product)`). Every runtime and every hand-written app reads the same map, so a
+// block's data contract lives in one place (xgen/schema/codex/blocks.json lists which block reads which map).
+// Paths: top-level entry fields ("title", "excerpt") or "metadata.<field>.value" of a field declared for the kind in
+// xgen/schema/codex/manifest.json; a pipe names a formatter of readPath: "|date" and "|ago" format in the locale, "|route" builds
+// the address from the slug (no href in data), "|media" takes the file of the `media` entry of featured_media_id,
+// "|author" the display name of the `user` entry of author_id, "|term:<taxonomy>" the name of the entry's term of that taxonomy
+// ("|term-slug:<taxonomy>" its slug), "|number" the number in the locale with the entry's `metadata.unit`.
+
+/** kind `product` -> Product (ProductGrid, ProductDetail, ProductCard) */
+export const productFields = {
+  id: "id",
+  name: "title",
+  summary: "metadata.summary.value",
+  price: "metadata.price.value",
+  currency: "metadata.currency.value",
+  rating: "metadata.rating.value",
+  reviews: "metadata.reviews.value",
+  badge: "metadata.badge.value",
+  category: "terms|term:product_category",
+  inStock: "metadata.inStock.value",
+  compareAt: "metadata.compare_at.value",
+  href: "slug|route",
+  image: "featured_media_id|media",
+} as const;
+
+/** kind `post` -> Post (PostHeader, PostGrid, PostCard) */
+export const postFields = {
+  id: "id",
+  title: "title",
+  excerpt: "excerpt",
+  category: "terms|term:category",
+  author: "author_id|author",
+  date: "metadata.date.value|date",
+  minutes: "metadata.minutes.value",
+  icon: "metadata.icon.value",
+  href: "slug|route",
+  image: "featured_media_id|media",
+} as const;
+
+/** kind `plan` -> Plan (PricingTiers, PricingCard) */
+export const planFields = {
+  id: "id",
+  name: "title",
+  tagline: "metadata.tagline.value",
+  price: "metadata.price.value",
+  currency: "metadata.currency.value",
+  seats: "metadata.seats.value",
+  storage: "metadata.storage.value",
+  highlighted: "metadata.highlighted.value",
+  features: "metadata.features.value",
+  yearly: "metadata.yearly.value",
+} as const;
+
+/** kind `review` -> Review (ProductReviews, Reviews) */
+export const reviewFields = {
+  id: "id",
+  title: "title",
+  author: "author_id|author",
+  rating: "metadata.rating.value",
+  text: "metadata.text.value",
+  date: "metadata.date.value|date",
+} as const;
+
+/** kind `stat` -> Stat (StatsBand, PageTrail facts, StatTile): `value` is a number with an optional `unit`, formatted in the locale */
+export const statFields = {
+  id: "id",
+  label: "title",
+  value: "metadata.value.value|number",
+  icon: "metadata.icon.value",
+  hint: "metadata.hint.value",
+} as const;
+
+/** kind `faq` -> Faq (FaqList): `category` is the slug of the entry's term of the taxonomy faq_category (the key the tabs filter by) */
+export const faqFields = {
+  id: "id",
+  question: "title",
+  answer: "metadata.answer.value",
+  category: "terms|term-slug:faq_category",
+} as const;
+
+/** kind `tab` -> FaqTab (FaqList category tabs): `value` is the slug of a faq_category term ("" = all) */
+export const faqTabFields = {
+  id: "id",
+  title: "title",
+  value: "metadata.value.value",
+} as const;
+
+/** kind `page` -> NavLink of a breadcrumb trail (PageTrail): the pages of a parent_id chain; `href` only where the app routes pages */
+export const pageFields = {
+  id: "id",
+  name: "title",
+  icon: "metadata.icon.value",
+  href: "slug|route",
+} as const;
+
+/** kind `menu_item` -> NavLink (NavBar, SidebarNav, BottomNav, ShellSidebar, the sub nav, outlines and help links): a menu entry
+ *  (Codex v0.4 Menu item: label = title, the address from the slug); `href` only where the app routes menu items, else no link */
+export const menuItemFields = {
+  id: "id",
+  name: "title",
+  icon: "metadata.icon.value",
+  href: "slug|route",
+} as const;
+
+/** kind `menu_item` with children -> MegaGroup (SitemapFooter, FooterColumns, FooterCard, MegaMenu, FooterSplit): a group of a
+ *  menu and the items under it (parent_id), resolved through the lookup CODEX.menus */
+export const menuGroupFields = {
+  id: "id",
+  title: "title",
+  icon: "metadata.icon.value",
+  links: "id|menu",
+  href: "slug|route",
+} as const;
+
+/** kind `menu_item` (location categories) -> Category (CategoryNav): a menu entry with the number of products under it */
+export const menuCategoryFields = {
+  id: "id",
+  name: "title",
+  icon: "metadata.icon.value",
+  count: "metadata.count.value",
+  href: "slug|route",
+} as const;
+
+
+// The other kinds of the kit fixtures, one map per kind (or per record where one kind feeds two records). `m.x` below reads
+// "metadata.x.value". Plain text fields; numbers stay numbers; money is integer minor units + `currency`.
+const m = (k: string) => `metadata.${k}.value` as const;
+/** id + title + text + icon: features, values, perks, delivery facts, payments, support channels, contacts (Feature) */
+const card = { id: "id", title: "title", text: m("text"), icon: m("icon") } as const;
+export const KIT_FIELDS = {
+  feature: card, value: card, perk: card, fact: card, payment: card, channel: card, contact: card, step: card,
+  logo: { id: "id", name: "title", icon: m("icon") },
+  testimonial: { id: "id", author: "title", role: m("role"), company: m("company"), quote: m("quote"), rating: m("rating"), handle: m("handle"), time: `${m("time")}|ago-short`, mark: m("mark") },
+  cartline: { id: "id", name: "title", variant: m("variant"), price: m("price"), currency: m("currency"), qty: m("qty") },
+  summaryrow: { id: "id", label: "title", amount: m("amount"), currency: m("currency"), strong: m("strong") },
+  order: { id: "id", number: "title", date: `${m("date")}|date`, total: m("total"), currency: m("currency"), status: m("order_status"), items: m("items") },
+  event: { id: "id", title: "title", text: m("text"), time: `${m("time")}|ago`, tone: m("tone") },
+  point: { id: "id", label: "title", value: m("value") },
+  metric: { id: "id", label: "title", value: `${m("value")}|number`, icon: m("icon"), hint: m("hint") },
+  task: { id: "id", title: "title", text: m("text"), done: m("done") },
+  prompt: { id: "id", name: "title", icon: m("icon") },
+  promptFilter: { id: "id", title: "title", value: m("value"), icon: m("icon") },
+  template: { id: "id", title: "title", views: `${m("views")}|compact`, likes: `${m("likes")}|compact`, topic: m("topic") },
+  tab: { id: "id", name: "title", icon: m("icon") },
+  posttag: { id: "id", name: "title", icon: m("icon") },
+  row: { id: "id", label: "title", a: m("a"), b: m("b"), c: m("c") },
+  pack: { id: "id", name: "title", credits: m("credits"), price: m("price"), currency: m("currency"), badge: m("badge") },
+  tile: { id: "id", title: "title", text: m("text"), icon: m("icon"), size: m("size") },
+  line: { id: "id", text: "title", kind: m("line_kind") },
+  wizardStep: { id: "id", title: "title", text: m("text"), icon: m("icon"), fieldA: m("fieldA"), fieldB: m("fieldB") },
+  lane: { id: "id", key: "slug", title: "title" },
+  card: { id: "id", lane: m("lane"), title: "title", tag: m("tag"), who: m("who") },
+  topic: { id: "id", title: "title", value: m("value") },
+  section: { id: "id", title: "title", text: m("text"), quote: m("quote") },
+  contrast: { id: "id", title: "title", before: m("before"), after: m("after") },
+  placeholder: { id: "id" },
+  chapter: { id: "id", title: "title", text: m("text") },
+  zone: { id: "id", name: "title", area: m("area"), price: m("price"), freeFrom: m("freeFrom"), minOrder: m("minOrder"), time: m("time"), express: m("express"), currency: m("currency") },
+  day: { id: "id", title: "title", note: m("note"), slots: m("slots"), closed: m("closed") },
+  store: { id: "id", name: "title", kind: m("store_kind"), address: m("address"), hours: m("hours"), phone: m("phone"), note: m("note"), services: m("services") },
+  detail: { id: "id", title: "title", text: m("text") },
+  spec: { id: "id", label: "title", value: m("value") },
+  profilefact: { id: "id", label: "title", value: m("value") },
+  promo: { id: "id", code: "title" },
+  member: { id: "id", name: "title", role: m("role"), dept: m("dept"), location: m("location"), bio: m("bio"), skills: m("skills") },
+  photo: { id: "id", title: "title", tag: m("tag"), size: m("size") },
+  project: { id: "id", title: "title", category: "terms|term:project_category", year: m("year"), summary: m("summary"), tags: m("tags"), featured: m("featured"), client: m("client") },
+  job: { id: "id", title: "title", dept: m("dept"), location: m("location"), type: m("type"), salary: m("salary"), posted: `${m("posted")}|ago-days` },
+  department: { id: "id", name: "title" },
+  milestone: { id: "id", date: m("date"), title: "title", text: m("text"), tag: m("tag") },
+  skill: { id: "id", label: "title", level: m("level") },
+  question: { id: "id", question: "title", answer: m("answer"), category: "terms|term:faq_category", icon: m("icon") },
+  // the copy decks of the taste screens (xgen/fixtures/deck*.json -> packages/taste-data/content/copy.json): kind `deck` and
+  // its parts, which name their deck (`deck`) and their place in it (`position`); figures and prices are poster copy, text
+  deck: { brand: "title", nav: m("nav"), eyebrow: m("eyebrow"), title: m("headline"), accent: m("accent"), lead: m("lead"), cta: m("cta"),
+    secondary: m("secondary"), input: m("input"), note: m("note"), tags: m("tags") },
+  deckStat: { value: m("value"), label: "title" },
+  deckItem: { title: "title", text: m("text") },
+  deckPlan: { name: "title", price: m("cost"), note: m("note"), perks: m("perks") },
+  deckQuote: { text: m("quote"), name: "title", role: m("role") },
+  deckFaq: { title: "title", text: m("answer") },
+  // kind `plan` as a row of the plans screen (screen.plans: list and record, with the plan status)
+  planRow: { id: "id", name: "title", tagline: m("tagline"), price: m("price"), currency: m("currency"), seats: m("seats"), storage: m("storage"),
+    highlighted: m("highlighted"), features: m("features"), yearly: m("yearly"), status: m("plan_status") },
+} as const;
+
+/** the field maps by entry kind */
+export const CODEX_FIELDS = {
+  product: productFields, post: postFields, plan: planFields, review: reviewFields, stat: statFields, faq: faqFields, faqtab: faqTabFields, page: pageFields,
+  menuItem: menuItemFields, menuGroup: menuGroupFields, menuCategory: menuCategoryFields, ...KIT_FIELDS,
+} as const;
+export type CodexFieldKind = keyof typeof CODEX_FIELDS;
diff --git a/xgen/runtimes/core/assets/app/inspect.ts b/xgen/runtimes/core/assets/app/inspect.ts
new file mode 100644
index 0000000..c53ec25
--- /dev/null
+++ b/xgen/runtimes/core/assets/app/inspect.ts
@@ -0,0 +1,152 @@
+// Preview tooling, not kit output: the "Ins" button of the preview (VITE_INSPECT=1 builds only).
+// Ins -> pick mode (crosshair, hover outline; click or tap captures, Esc cancels) -> POST /__inspect with two PNGs
+// (the element with 16px around it, the viewport with a red frame) and where the element sits. Nothing is fixed here.
+import { domToCanvas } from "modern-screenshot";
+
+const PAD = 16;
+const MARK = "data-inspect-ui";
+let picking = false;
+let hovered: Element | null = null;
+
+function toast(text: string): void {
+  const t = Object.assign(document.createElement("div"), { textContent: text });
+  t.setAttribute(MARK, "");
+  Object.assign(t.style, { position: "fixed", left: "50%", bottom: "24px", transform: "translateX(-50%)", zIndex: "2147483647", padding: "8px 16px",
+    borderRadius: "8px", background: "#111", color: "#fff", font: "500 14px system-ui, sans-serif", pointerEvents: "none" });
+  document.body.append(t);
+  setTimeout(() => t.remove(), 2000);
+}
+
+function outline(el: Element | null): void {
+  if (hovered) (hovered as HTMLElement).style.removeProperty("outline");
+  hovered = el;
+  if (el) { (el as HTMLElement).style.setProperty("outline", "2px solid #ef4444"); (el as HTMLElement).style.setProperty("outline-offset", "-2px"); }
+}
+
+function selectorOf(el: Element): string {
+  const parts: string[] = [];
+  for (let e: Element | null = el; e && e !== document.documentElement; e = e.parentElement) {
+    let s = e.tagName.toLowerCase();
+    const id = e.getAttribute("id"), tid = e.getAttribute("data-testid");
+    if (id) { parts.unshift(`${s}#${id}`); break; }
+    if (tid) s += `[data-testid="${tid}"]`;
+    else if (e.parentElement) {
+      const same = [...e.parentElement.children].filter((c) => c.tagName === e!.tagName);
+      if (same.length > 1) s += `:nth-of-type(${same.indexOf(e) + 1})`;
+    }
+    parts.unshift(s);
+  }
+  return parts.join(" > ");
+}
+
+const brief = (e: Element) => ({ tag: e.tagName.toLowerCase(), classes: e.getAttribute("class") ?? "", testid: e.getAttribute("data-testid") ?? undefined, slot: e.getAttribute("data-slot") ?? undefined });
+
+function metaOf(el: Element) {
+  const r = el.getBoundingClientRect();
+  const parent = el.parentElement;
+  const pr = parent?.getBoundingClientRect();
+  const cs = getComputedStyle(el);
+  const block = el.closest("[data-block]");
+  const section = el.closest('[data-testid="section"], section[aria-labelledby]');
+  const ancestors: ReturnType<typeof brief>[] = [];
+  for (let e = el.parentElement; e && ancestors.length < 3; e = e.parentElement) ancestors.push(brief(e));
+  const root = document.documentElement;
+  return {
+    time: new Date().toISOString(),
+    url: location.href,
+    screen: location.pathname.split("/").filter(Boolean)[0] ?? "",
+    route: location.hash.replace(/^#/, "") || "/",
+    block: block?.getAttribute("data-block") ?? (location.pathname.includes("/blocks") ? location.hash.replace(/^#\//, "").split(/[/?]/)[0] : undefined),
+    category: location.pathname.includes("/catalog") ? location.hash.replace(/^#\//, "").split(/[/?]/)[0] || undefined : undefined,
+    variant: block?.getAttribute("data-variant") ?? undefined,
+    section: section?.getAttribute("aria-labelledby") ?? section?.getAttribute("id") ?? undefined,
+    selector: selectorOf(el),
+    element: { ...brief(el), text: (el.textContent ?? "").trim().slice(0, 80) },
+    ancestors,
+    rect: { x: Math.round(r.left + scrollX), y: Math.round(r.top + scrollY), width: Math.round(r.width), height: Math.round(r.height), viewportX: Math.round(r.left), viewportY: Math.round(r.top) },
+    box: {
+      width: cs.width, marginLeft: cs.marginLeft, marginRight: cs.marginRight,
+      parentWidth: pr ? Math.round(pr.width) : undefined,
+      leftInParent: pr ? Math.round(r.left - pr.left) : undefined,
+      rightInParent: pr ? Math.round(pr.right - r.right) : undefined,
+      overflowsParent: pr ? r.left < pr.left - 0.5 || r.right > pr.right + 0.5 : undefined,
+    },
+    viewport: { width: innerWidth, height: innerHeight, dpr: devicePixelRatio, scrollX: Math.round(scrollX), scrollY: Math.round(scrollY) },
+    skin: root.dataset.skin ?? "default",
+    theme: root.classList.contains("dark") || root.dataset.theme === "dark" ? "dark" : "light",
+    userAgent: navigator.userAgent,
+  };
+}
+
+async function capture(el: Element): Promise<void> {
+  outline(null);
+  const r = el.getBoundingClientRect();
+  const scale = Math.min(devicePixelRatio || 1, 2);
+  const t0 = performance.now();
+  const page = await domToCanvas(document.documentElement, { scale, timeout: 2000, filter: (n) => !(n instanceof Element && n.hasAttribute(MARK)) });
+  console.debug(`inspect: page drawn in ${Math.round(performance.now() - t0)} ms`);
+  // the page canvas covers the whole document: cut the viewport out of it
+  const vw = innerWidth, vh = innerHeight;
+  const view = document.createElement("canvas");
+  view.width = Math.round(vw * scale); view.height = Math.round(vh * scale);
+  const v = view.getContext("2d")!;
+  v.drawImage(page, scrollX * scale, scrollY * scale, vw * scale, vh * scale, 0, 0, vw * scale, vh * scale);
+  const x0 = Math.max(0, r.left - PAD), y0 = Math.max(0, r.top - PAD), x1 = Math.min(vw, r.right + PAD), y1 = Math.min(vh, r.bottom + PAD);
+  const crop = document.createElement("canvas");
+  crop.width = Math.max(1, Math.round((x1 - x0) * scale)); crop.height = Math.max(1, Math.round((y1 - y0) * scale));
+  crop.getContext("2d")!.drawImage(view, x0 * scale, y0 * scale, crop.width, crop.height, 0, 0, crop.width, crop.height);
+  v.strokeStyle = "#ef4444"; v.lineWidth = 3 * scale;
+  v.strokeRect(r.left * scale, r.top * scale, r.width * scale, r.height * scale);
+  const body = JSON.stringify({ meta: metaOf(el), element: crop.toDataURL("image/png"), viewport: view.toDataURL("image/png") });
+  const res = await fetch("/__inspect", { method: "POST", headers: { "content-type": "application/json" }, credentials: "same-origin", body });
+  const out = (await res.json().catch(() => ({}))) as { n?: number; error?: string };
+  toast(res.ok && out.n ? `Saved #${out.n}` : `Not saved: ${out.error ?? res.status}`);
+}
+
+function stop(): void {
+  picking = false;
+  outline(null);
+  document.documentElement.style.removeProperty("cursor");
+  document.removeEventListener("pointermove", onMove, true);
+  document.removeEventListener("click", onClick, true);
+  document.removeEventListener("keydown", onKey, true);
+}
+
+const target = (e: Event) => { const t = e.target as Element | null; return t && !t.closest(`[${MARK}]`) ? t : null; };
+function onMove(e: PointerEvent): void { const t = document.elementFromPoint(e.clientX, e.clientY); outline(t && !t.closest(`[${MARK}]`) ? t : null); }
+function onKey(e: KeyboardEvent): void { if (e.key === "Escape") { e.preventDefault(); stop(); toast("Cancelled"); } }
+function onClick(e: MouseEvent): void {
+  // an icon reports its owner (the button, the link), not a path inside the svg
+  const hit = target(e);
+  const t = hit?.closest("svg")?.parentElement ?? hit;
+  if (!t) return;
+  e.preventDefault(); e.stopPropagation();
+  stop();
+  capture(t).catch((err) => toast(`Not saved: ${String(err).slice(0, 60)}`));
+}
+
+function start(): void {
+  if (picking) { stop(); return; }
+  picking = true;
+  document.documentElement.style.setProperty("cursor", "crosshair");
+  document.addEventListener("pointermove", onMove, true);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("keydown", onKey, true);
+}
+
+/** keep an Ins button right after every theme toggle, styled like it but ghost */
+export function mountInspect(): void {
+  const place = () => {
+    for (const tg of document.querySelectorAll<HTMLElement>('[data-testid="theme-toggle"]')) {
+      if (tg.nextElementSibling?.hasAttribute(MARK)) continue;
+      const b = document.createElement("button");
+      b.type = "button"; b.textContent = "Ins"; b.className = tg.className; b.title = "Inspect: pick an element to report";
+      b.setAttribute(MARK, ""); b.setAttribute("aria-label", "Inspect an element");
+      Object.assign(b.style, { background: "transparent", boxShadow: "none", marginInlineStart: "4px" });
+      b.addEventListener("click", (e) => { e.stopPropagation(); start(); });
+      tg.after(b);
+    }
+  };
+  place();
+  new MutationObserver(place).observe(document.body, { childList: true, subtree: true });
+}
diff --git a/xgen/runtimes/core/assets/app/skins.ts b/xgen/runtimes/core/assets/app/skins.ts
new file mode 100644
index 0000000..cbf686f
--- /dev/null
+++ b/xgen/runtimes/core/assets/app/skins.ts
@@ -0,0 +1,153 @@
+// Preview tooling, not kit output: the look picked on the Skins screen (/skins/), kept for every screen and every reload.
+// Three choices, each in localStorage:
+//   xgen-skin    the skin: data-skin on <html> (the skin CSS switches on it)
+//   xgen-font    a Google font over the skin's own: --font-sans on <html>
+//   xgen-radius  a corner radius over the skin's own: --radius on <html>
+// Order: the `?skin=` query parameter beats the stored skin, which beats the build skin (VITE_SKIN, else the screen's own).
+// The font and the radius sit on top of whatever skin is on: they are inline on <html>, so they beat every skin rule.
+// Nothing stored means nothing changes.
+// The tiles of /skins/ are static markup; this file wires them by their data attributes:
+//   data-skin-pick="<skin>"                          a skin tile
+//   data-font-pick="<id>" data-font-family="<name>"  a font tile (shown in its font; clicking the chosen one again drops it)
+//   data-radius-pick="<id>" data-radius="<length>"   a radius tile (its [data-radius-sample] box shows the radius)
+//   data-look-reset="skin|font|radius"               back to the build skin, the skin's font, the skin's radius
+// The tile of the current choice gets aria-pressed="true".
+import { SKIN_FONTS } from "./skin-fonts";
+
+const KEYS = { skin: "xgen-skin", font: "xgen-font", radius: "xgen-radius" } as const;
+type Choice = keyof typeof KEYS;
+
+function read(choice: Choice): string | null {
+  try { return localStorage.getItem(KEYS[choice]); } catch { return null; }
+}
+
+function write(choice: Choice, value: string | null): void {
+  try {
+    if (value === null) localStorage.removeItem(KEYS[choice]);
+    else localStorage.setItem(KEYS[choice], value);
+  } catch { /* storage is blocked: the choice lasts until the next reload */ }
+}
+
+const html = (): HTMLElement => document.documentElement;
+
+// ---- fonts ----
+
+const linked = new Set<string>();
+
+/** add a Google Fonts stylesheet once. `spec` is "Inter:wght@400;500;600;700". The css2 API splits every face by script
+ *  (latin, cyrillic, ...) with unicode-range, so the browser downloads the cyrillic part as soon as the page shows Cyrillic. */
+function loadFont(spec: string): void {
+  const href = `https://fonts.googleapis.com/css2?family=${spec}&display=swap`;
+  if (linked.has(href)) return;
+  linked.add(href);
+  document.head.append(Object.assign(document.createElement("link"), { rel: "stylesheet", href, crossOrigin: "anonymous" }));
+}
+
+/** every font of the Fonts row has the 400 to 700 faces */
+const fontSpec = (family: string): string => `${family.replace(/ /g, "+")}:wght@400;500;600;700`;
+const fontStack = (family: string): string => `"${family}", ui-sans-serif, system-ui, sans-serif`;
+
+// ---- applying a choice ----
+
+/** the skin picked on /skins/, or null */
+export const storedSkin = (): string | null => read("skin");
+
+/** put a skin on the page and load the fonts it needs */
+export function applySkin(skin: string): void {
+  html().dataset.skin = skin;
+  for (const spec of SKIN_FONTS[skin] ?? []) loadFont(spec);
+}
+
+/** put the stored font and radius on top of the skin, or take them off */
+export function applyOverrides(): void {
+  const style = html().style;
+  const family = read("font");
+  if (family) {
+    loadFont(fontSpec(family));
+    style.setProperty("--font-sans", fontStack(family));
+    // a skin may map medium and semibold onto other faces (sky, notebook); the chosen font has them all
+    style.setProperty("--font-weight-medium", "500");
+    style.setProperty("--font-weight-semibold", "600");
+  } else {
+    style.removeProperty("--font-sans");
+    style.removeProperty("--font-weight-medium");
+    style.removeProperty("--font-weight-semibold");
+  }
+  const radius = read("radius");
+  if (radius) style.setProperty("--radius", radius);
+  else style.removeProperty("--radius");
+}
+
+/** a picked skin replaces a `?skin=` of the address, or the next reload would bring that one back */
+function dropSkinQuery(): void {
+  const url = new URL(location.href);
+  if (!url.searchParams.has("skin")) return;
+  url.searchParams.delete("skin");
+  history.replaceState(history.state, "", url);
+}
+
+// ---- the tiles ----
+
+function press(el: HTMLElement, on: boolean): void {
+  if (el.getAttribute("aria-pressed") !== String(on)) el.setAttribute("aria-pressed", String(on));
+}
+
+/** mark the current choices, show every font tile in its font and every radius sample with its radius */
+function paint(): void {
+  const skin = html().dataset.skin ?? "";
+  const font = read("font") ?? "";
+  const radius = read("radius") ?? "";
+  for (const tile of document.querySelectorAll<HTMLElement>("[data-skin-pick]")) {
+    press(tile, tile.dataset.skinPick === skin);
+    for (const spec of SKIN_FONTS[tile.dataset.skinPick ?? ""] ?? []) loadFont(spec);
+  }
+  for (const tile of document.querySelectorAll<HTMLElement>("[data-font-pick]")) {
+    const family = tile.dataset.fontFamily ?? "";
+    press(tile, family === font);
+    if (family && !tile.style.fontFamily) {
+      loadFont(fontSpec(family));
+      tile.style.fontFamily = fontStack(family);
+    }
+  }
+  for (const tile of document.querySelectorAll<HTMLElement>("[data-radius-pick]")) {
+    press(tile, tile.dataset.radius === radius);
+    tile.querySelector<HTMLElement>("[data-radius-sample]")?.style.setProperty("--radius", tile.dataset.radius ?? "");
+  }
+}
+
+/** after the first paint of the app: wire the tiles (one click listener for the page) and keep them marked as the app renders */
+export function mountLook(buildSkin: string): void {
+  document.addEventListener("click", (event) => {
+    const el = (event.target as Element | null)?.closest<HTMLElement>("[data-skin-pick], [data-font-pick], [data-radius-pick], [data-look-reset]");
+    if (!el) return;
+    const d = el.dataset;
+    if (d.skinPick) {
+      write("skin", d.skinPick);
+      dropSkinQuery();
+      applySkin(d.skinPick);
+    } else if (d.fontPick) {
+      const family = d.fontFamily ?? "";
+      write("font", read("font") === family ? null : family);
+      applyOverrides();
+    } else if (d.radiusPick) {
+      const radius = d.radius ?? "";
+      write("radius", read("radius") === radius ? null : radius);
+      applyOverrides();
+    } else if (d.lookReset === "skin") {
+      write("skin", null);
+      dropSkinQuery();
+      applySkin(buildSkin);
+    } else if (d.lookReset === "font" || d.lookReset === "radius") {
+      write(d.lookReset, null);
+      applyOverrides();
+    }
+    paint();
+  });
+  paint();
+  let queued = false;
+  new MutationObserver(() => {
+    if (queued) return;
+    queued = true;
+    requestAnimationFrame(() => { queued = false; paint(); });
+  }).observe(document.body, { childList: true, subtree: true });
+}
diff --git a/xgen/runtimes/core/assets/app/theme.ts b/xgen/runtimes/core/assets/app/theme.ts
new file mode 100644
index 0000000..480ccd9
--- /dev/null
+++ b/xgen/runtimes/core/assets/app/theme.ts
@@ -0,0 +1,33 @@
+// Light/dark mode of an app: the choice lives in <html data-theme> (the theme tokens switch on it) and in localStorage.
+export type ThemeMode = "light" | "dark" | "system";
+const KEY = "xgen-theme";
+
+const systemDark = (): boolean => typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
+
+export function resolveTheme(mode: ThemeMode): "light" | "dark" {
+  return mode === "system" ? (systemDark() ? "dark" : "light") : mode;
+}
+
+export function applyTheme(mode: ThemeMode): void {
+  const r = resolveTheme(mode);
+  const root = document.documentElement;
+  root.dataset.theme = r;
+  root.classList.toggle("dark", r === "dark");
+  root.style.colorScheme = r;
+}
+
+/** the mode of the visit: the saved choice, else the app default */
+export function initTheme(fallback: ThemeMode): void {
+  let mode: ThemeMode = fallback;
+  try {
+    const saved = localStorage.getItem(KEY);
+    if (saved === "light" || saved === "dark") mode = saved;
+  } catch { /* storage is blocked: keep the default */ }
+  applyTheme(mode);
+}
+
+export function toggleTheme(): void {
+  const next = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
+  try { localStorage.setItem(KEY, next); } catch { /* ignore */ }
+  applyTheme(next);
+}
diff --git a/xgen/runtimes/core/assets/app/visited.ts b/xgen/runtimes/core/assets/app/visited.ts
new file mode 100644
index 0000000..87b2a6d
--- /dev/null
+++ b/xgen/runtimes/core/assets/app/visited.ts
@@ -0,0 +1,66 @@
+// Preview tooling, not kit output: the block gallery and the catalog remember the pages you opened (VITE_INSPECT=1 builds only).
+// Opening /blocks/#/<block> (or /catalog/#/<category>) stores the id in localStorage, one list per screen; the index outlines
+// those cards, adds a check, and shows "Viewed N of M" with a Reset button.
+const SCREENS = ["blocks", "catalog"];
+const screen = (): string => location.pathname.split("/").filter(Boolean)[0] ?? "";
+const KEY_OF = (s: string): string => `xgen-preview:visited-${s}`;
+const MARK = "data-visited-ui";
+const CHECK = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+
+const read = (): Set<string> => { try { return new Set(JSON.parse(localStorage.getItem(KEY_OF(screen())) ?? "[]") as string[]); } catch { return new Set(); } };
+const write = (s: Set<string>) => localStorage.setItem(KEY_OF(screen()), JSON.stringify([...s].sort()));
+/** the id a card stands for: the block of a gallery card, the route of a catalog card */
+const idOf = (a: HTMLElement): string => a.dataset.block ?? a.dataset.visit ?? "";
+
+function remember(): void {
+  const id = location.hash.replace(/^#\/?/, "").split(/[/?]/)[0];
+  if (!id) return;
+  const s = read();
+  if (!s.has(id)) { s.add(id); write(s); }
+}
+
+function paint(): void {
+  const links = [...document.querySelectorAll<HTMLElement>('[data-testid="block-link"][data-block], [data-visit]')];
+  if (!links.length) return;
+  const seen = read();
+  for (const a of links) {
+    const card = (a.closest("li") ?? a) as HTMLElement;
+    const on = seen.has(idOf(a));
+    // a 2px inset ring in the primary colour at half strength: drawn over the card's own 1px ring, no layout shift
+    card.style.boxShadow = on ? "inset 0 0 0 2px color-mix(in oklab, var(--primary) 50%, transparent)" : "";
+    const icon = a.querySelector(`[${MARK}]`);
+    if (on && !icon) { const i = document.createElement("span"); i.setAttribute(MARK, ""); i.setAttribute("title", "Viewed"); i.style.color = "var(--primary)"; i.style.display = "inline-flex"; i.innerHTML = CHECK; a.append(i); }
+    if (!on && icon) icon.remove();
+  }
+  const head = document.querySelector('[data-testid="gallery-title"], [data-testid="catalog-title"]')?.parentElement;
+  if (!head) return;
+  let bar = head.querySelector<HTMLElement>(`[${MARK}="bar"]`);
+  if (!bar) {
+    bar = document.createElement("div");
+    bar.setAttribute(MARK, "bar");
+    Object.assign(bar.style, { display: "flex", alignItems: "center", gap: "8px" });
+    const count = document.createElement("span");
+    count.className = "text-sm text-muted-foreground";
+    count.setAttribute("data-testid", "visited-count");
+    const reset = document.createElement("button");
+    reset.type = "button"; reset.textContent = "Reset";
+    reset.className = document.querySelector('[data-testid="theme-toggle"]')?.className ?? "";
+    Object.assign(reset.style, { background: "transparent", boxShadow: "none" });
+    reset.addEventListener("click", () => { localStorage.removeItem(KEY_OF(screen())); paint(); });
+    bar.append(count, reset);
+    head.append(bar);
+  }
+  const n = links.filter((a) => seen.has(idOf(a))).length;
+  const label = `Viewed ${n} of ${links.length}`;
+  const count = bar.querySelector("span")!;
+  if (count.textContent !== label) count.textContent = label;
+}
+
+export function mountVisited(): void {
+  if (!SCREENS.includes(screen())) return;
+  const tick = () => { remember(); paint(); };
+  tick();
+  addEventListener("hashchange", tick);
+  let queued = false;
+  new MutationObserver(() => { if (queued) return; queued = true; requestAnimationFrame(() => { queued = false; paint(); }); }).observe(document.body, { childList: true, subtree: true });
+}
diff --git a/xgen/runtimes/core/assets/styles/kit.css b/xgen/runtimes/core/assets/styles/kit.css
new file mode 100644
index 0000000..46d00a5
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/kit.css
@@ -0,0 +1,93 @@
+/* Kit-wide CSS: base layer, input glyph utilities, focus ring. Colors and the one corner token (--radius) come from theme.css (shadcn neutral);
+   shadows: only floating layers have one (shadow-md, shadow-lg), set in their specs; nothing here draws one. */
+@layer base {
+  html, body { margin: 0; background: var(--color-background); color: var(--color-foreground); }
+  body { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; overflow-x: hidden; }
+  button { cursor: pointer; }
+  html { -webkit-text-size-adjust: 100%; color-scheme: light; }
+}
+
+/* the box of a checkbox: its corner is the theme radius scaled to the 16-20px box (0.4 x 10px = 4px), so it never reads as a radio */
+@utility checkbox-glyph {
+  display: inline-grid; place-content: center; border-radius: calc(var(--radius) * 0.4);
+  &::before { content: ""; width: 8px; height: 6px; opacity: 0; background: currentColor;
+    clip-path: polygon(0 55%, 14% 40%, 38% 64%, 86% 0, 100% 15%, 38% 95%); }
+  &:checked { color: var(--color-primary-foreground); }
+  &:checked::before { opacity: 1; }
+}
+/* a number field without the browser spin buttons (NumberField draws its own minus and plus) */
+@utility number-bare {
+  appearance: textfield; -moz-appearance: textfield;
+  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+}
+@utility radio-glyph {
+  display: inline-grid; place-content: center;
+  &::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 9999px; background: var(--color-primary-foreground); opacity: 0; }
+  &:checked::before { opacity: 1; }
+}
+@utility switch-knob {
+  &::before { content: ""; position: absolute; top: 50%; left: var(--pad); width: var(--knob); height: var(--knob); border-radius: 9999px;
+    background: var(--color-background); translate: 0 -50%; transition: left .15s; }
+  &:checked::before { left: calc(100% - var(--pad) - var(--knob)); }
+}
+@utility progress-bar {
+  &::-webkit-progress-bar { background: transparent; }
+  &::-webkit-progress-value { background: var(--bar); border-radius: var(--radius); }
+  &::-moz-progress-bar { background: var(--bar); border-radius: var(--radius); }
+  &::-webkit-meter-bar { background: transparent; border: 0; }
+  &::-webkit-meter-optimum-value { background: var(--bar); }
+}
+
+/* Focus ring sits above utility shadows. Keyboard only. The 4px halo is gray unless the element sets a ring colour
+   (shadcn style, e.g. focus-visible:ring-destructive/20 on the destructive variants); --tw-ring-color does not inherit. */
+:where(a, button, input, select, textarea, summary, [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="option"], [role="treeitem"], [role="radio"], [role="switch"], [tabindex]):focus-visible {
+  outline: none;
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), 0 0 0 4px var(--tw-ring-color, rgb(128 128 128 / 0.15)), var(--tw-shadow, 0 0 #0000);
+}
+[data-slot="prompt-input"]:focus-within, [data-slot="smartbox"]:focus-within { box-shadow: 0 0 0 4px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-border); }
+[data-slot="prompt-input"] textarea:focus-visible, [data-slot="smartbox"] input:focus-visible { box-shadow: none; }
+[data-slot="file-tree-item"]:focus-visible, [data-slot="editor-tab"]:focus-visible, [data-slot="icon-tab"]:focus-visible, [data-slot="dropdown-item"]:focus-visible {
+  box-shadow: inset 0 0 0 2px rgb(128 128 128 / 0.15), inset 0 0 0 1px var(--color-muted-foreground);
+}
+:where([data-screen]) :focus:not(:focus-visible) { outline: none; }
+::selection { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
+
+/* The disclosure indicator: the Lucide chevron-down drawn in the text colour; the Summary brick turns it over when its
+   details open (group-open:rotate-180), so an accordion needs no script. */
+[data-slot="summary-indicator"] {
+  display: inline-block;
+  background-color: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+/* Per-element tokens (UI8KIT-2.0 §11): badge, button, card, alert, media. An unset token falls back to the value of the utility class the
+   rule matches (p-6, px-4 h-10, ...), stated explicitly: a revert-layer fallback inside var() is not supported by every
+   browser (there the property became unset: buttons and badges lost their padding and height).
+   A skin or a scope (a wrapper, the magazine specimen) sets only the ones it wants.
+   Radius:  --radius-badge|button|card|alert|media   (unset: var(--radius); the badge unset: the pill). Only elements that carry plain `rounded` follow it.
+   Shadow:  --shadow-card|alert|media                (unset: the spec's own: none). A full box-shadow layer, e.g. var(--shadow-sm) or 0 0 #0000.
+   Density: data-density-badge|button|card|alert = compact | default | comfortable, on the element or any ancestor, sets --pad-*:
+            card 16/24/32 (padding of a default card), alert inline 8/8/16 with --min-alert 24/32/40,
+            button inline 12/16/20 and height 32/40/48 (default size), badge inline 8/12/16 and height 20/24/28 (default size).
+            4px steps only inside controls (button, badge); card and alert stay on the 8px step. */
+[data-slot="button"].rounded { border-radius: var(--radius-button, var(--radius)); }
+[data-slot="card"].rounded { border-radius: var(--radius-card, var(--radius)); }
+[data-slot="alert"].rounded { border-radius: var(--radius-alert, var(--radius)); }
+[data-slot="media-frame"].rounded { border-radius: var(--radius-media, var(--radius)); }
+[data-slot="badge"].rounded-full { border-radius: var(--radius-badge, calc(infinity * 1px)); }
+[data-slot="card"] { --tw-shadow: var(--shadow-card, 0 0 #0000); }
+[data-slot="alert"] { --tw-shadow: var(--shadow-alert, 0 0 #0000); }
+[data-slot="media-frame"] { --tw-shadow: var(--shadow-media, 0 0 #0000); }
+[data-slot="card"].p-6 { padding: var(--pad-card, calc(var(--spacing) * 6)); }
+[data-slot="alert"].px-2 { padding-inline: var(--pad-alert, calc(var(--spacing) * 2)); }
+[data-slot="alert"].min-h-8 { min-height: var(--min-alert, calc(var(--spacing) * 8)); }
+[data-slot="button"].px-4.h-10 { padding-inline: var(--pad-button, calc(var(--spacing) * 4)); height: var(--h-button, calc(var(--spacing) * 10)); }
+[data-slot="badge"].px-3.h-6 { padding-inline: var(--pad-badge, calc(var(--spacing) * 3)); height: var(--h-badge, calc(var(--spacing) * 6)); }
+[data-density-card="compact"] { --pad-card: 16px; }
+[data-density-card="comfortable"] { --pad-card: 32px; }
+[data-density-alert="compact"] { --pad-alert: 8px; --min-alert: 24px; }
+[data-density-alert="comfortable"] { --pad-alert: 16px; --min-alert: 40px; }
+[data-density-button="compact"] { --pad-button: 12px; --h-button: 32px; }
+[data-density-button="comfortable"] { --pad-button: 20px; --h-button: 48px; }
+[data-density-badge="compact"] { --pad-badge: 8px; --h-badge: 20px; }
+[data-density-badge="comfortable"] { --pad-badge: 16px; --h-badge: 28px; }
diff --git a/xgen/runtimes/core/assets/styles/skins.css b/xgen/runtimes/core/assets/styles/skins.css
new file mode 100644
index 0000000..951f3af
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins.css
@@ -0,0 +1,22 @@
+/* Skins of the screens: data-skin on <html>. The default is the shadcn neutral theme (theme.css); a skin overrides the shadcn
+   tokens under [data-skin="<name>"] (and its dark twin under .dark / data-theme="dark"). The same rule works on any element,
+   so a tile of the Skins screen (/skins/) previews a skin inside a page that wears another one (base.css resets such a tile first).
+   The skin of a visit: the `?skin=` query parameter, else the one picked on /skins/ (localStorage), else the VITE_SKIN build
+   variable, else the screen's own ("default"); see runtime/skins.ts. One file per skin in skins/ (sources and licences: skins/NOTICE.md). */
+@import "./skins/base.css";
+@import "./skins/default.css";
+@import "./skins/sky.css";
+@import "./skins/modern-minimal.css";
+@import "./skins/violet-bloom.css";
+@import "./skins/t3-chat.css";
+@import "./skins/bubblegum.css";
+@import "./skins/doom-64.css";
+@import "./skins/amber-minimal.css";
+@import "./skins/supabase.css";
+@import "./skins/kodama-grove.css";
+@import "./skins/perpetuity.css";
+@import "./skins/cosmic-night.css";
+@import "./skins/claude.css";
+@import "./skins/mocha-mousse.css";
+@import "./skins/neo-brutalism.css";
+@import "./skins/notebook.css";
diff --git a/xgen/runtimes/core/assets/styles/skins/NOTICE.md b/xgen/runtimes/core/assets/styles/skins/NOTICE.md
new file mode 100644
index 0000000..4d448da
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/NOTICE.md
@@ -0,0 +1,11 @@
+# Skins: sources and licences
+
+- `sky.css`, `base.css`, `default.css`: ui8kit (this repository).
+- Every other `.css` file here is a built-in theme preset of **tweakcn** by Sahaj Jain and contributors
+  (<https://github.com/jnsahaj/tweakcn>, `utils/theme-presets.ts` at commit `a3b47b37cba97dd637de517aab52c45ec0f83456`),
+  used under the **Apache License, Version 2.0** (<https://www.apache.org/licenses/LICENSE-2.0>). tweakcn ships no NOTICE file.
+- Changes made to the tweakcn presets: merged with tweakcn's defaults and converted to CSS by
+  `xgen/runtimes/core/tools/tweakcn-skins.ts` (the colours, radius, fonts, shadows and letter spacing are tweakcn's values);
+  the selectors are ours (`data-skin` on `<html>` or on an element); a preset's `spacing` is not taken (the kit keeps 0.25rem);
+  fonts without medium or semibold faces have those weights mapped onto the faces that exist.
+- `skins.json` lists every skin, where it comes from and the Google Fonts it loads when it is on.
diff --git a/xgen/runtimes/core/assets/styles/skins/amber-minimal.css b/xgen/runtimes/core/assets/styles/skins/amber-minimal.css
new file mode 100644
index 0000000..86569d6
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/amber-minimal.css
@@ -0,0 +1,100 @@
+/* Skin "amber-minimal" (Amber Minimal): the tweakcn preset "amber-minimal" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="amber-minimal" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Inter (Google Fonts, loaded when the skin is on). */
+[data-skin="amber-minimal"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 15%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 15%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 15%);
+  --primary: hsl(37.7 92.1% 50.2%);
+  --primary-foreground: hsl(0 0% 0%);
+  --secondary: hsl(220 14% 96%);
+  --secondary-foreground: hsl(215 14% 34%);
+  --muted: hsl(210 20% 98%);
+  --muted-foreground: hsl(220 9% 46%);
+  --accent: hsl(48 100% 96%);
+  --accent-foreground: hsl(22.7 82.5% 31.4%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(220 13% 91%);
+  --input: hsl(220 13% 91%);
+  --ring: hsl(37.7 92.1% 50.2%);
+  --chart-1: hsl(37.7 92.1% 50.2%);
+  --chart-2: hsl(32.1 94.6% 43.7%);
+  --chart-3: hsl(26 90% 37%);
+  --chart-4: hsl(22.7 82.5% 31.4%);
+  --chart-5: hsl(21.7 77.8% 26.5%);
+  --sidebar: hsl(210 20% 98%);
+  --sidebar-foreground: hsl(0 0% 15%);
+  --sidebar-primary: hsl(37.7 92.1% 50.2%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(48 100% 96%);
+  --sidebar-accent-foreground: hsl(22.7 82.5% 31.4%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(37.7 92.1% 50.2%);
+  --font-sans: Inter, sans-serif;
+  --font-serif: Source Serif 4, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.375rem;
+  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="amber-minimal"],
+[data-skin="amber-minimal"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 9%);
+  --foreground: hsl(0 0% 90%);
+  --card: hsl(0 0% 15%);
+  --card-foreground: hsl(0 0% 90%);
+  --popover: hsl(0 0% 15%);
+  --popover-foreground: hsl(0 0% 90%);
+  --primary: hsl(37.7 92.1% 50.2%);
+  --primary-foreground: hsl(0 0% 0%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 90%);
+  --muted: hsl(0 0% 12%);
+  --muted-foreground: hsl(0 0% 64%);
+  --accent: hsl(22.7 82.5% 31.4%);
+  --accent-foreground: hsl(48 96.6% 76.7%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 0% 25%);
+  --input: hsl(0 0% 25%);
+  --ring: hsl(37.7 92.1% 50.2%);
+  --chart-1: hsl(43.3 96.4% 56.3%);
+  --chart-2: hsl(32.1 94.6% 43.7%);
+  --chart-3: hsl(22.7 82.5% 31.4%);
+  --chart-4: hsl(26 90% 37%);
+  --chart-5: hsl(22.7 82.5% 31.4%);
+  --sidebar: hsl(0 0% 6%);
+  --sidebar-foreground: hsl(0 0% 90%);
+  --sidebar-primary: hsl(37.7 92.1% 50.2%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(22.7 82.5% 31.4%);
+  --sidebar-accent-foreground: hsl(48 96.6% 76.7%);
+  --sidebar-border: hsl(0 0% 25%);
+  --sidebar-ring: hsl(37.7 92.1% 50.2%);
+  --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+}
+
+[data-skin="amber-minimal"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="amber-minimal"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="amber-minimal"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="amber-minimal"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="amber-minimal"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="amber-minimal"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/base.css b/xgen/runtimes/core/assets/styles/skins/base.css
new file mode 100644
index 0000000..f49bc93
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/base.css
@@ -0,0 +1,22 @@
+/* What a skin scoped on an element inside the page starts from (a tile of /skins/ carries data-skin="<name>"): the kit's
+   default font, weights, tracking, radius and shadows, so a tile shows its own skin and nothing of the skin of the page.
+   :where() keeps this rule at zero specificity, so the skin's own rule always wins. <html> itself is never matched here. */
+:where([data-skin]:not(:root)) {
+  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --tracking-normal: 0em;
+  --radius: 0.625rem;
+  --shadow-2xs: 0 1px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.1), 0 8px 10px -6px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
+  font-family: var(--font-sans);
+  letter-spacing: var(--tracking-normal);
+  background-color: var(--background);
+  color: var(--foreground);
+}
diff --git a/xgen/runtimes/core/assets/styles/skins/bubblegum.css b/xgen/runtimes/core/assets/styles/skins/bubblegum.css
new file mode 100644
index 0000000..e965fe7
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/bubblegum.css
@@ -0,0 +1,100 @@
+/* Skin "bubblegum" (Bubblegum): the tweakcn preset "bubblegum" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="bubblegum" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Poppins (Google Fonts, loaded when the skin is on). */
+[data-skin="bubblegum"] {
+  --background: hsl(330 47.1% 93.3%);
+  --foreground: hsl(0 0% 36%);
+  --card: hsl(42 93% 89%);
+  --card-foreground: hsl(0 0% 36%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 36%);
+  --primary: hsl(325.3 52% 51.8%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(182 44% 68%);
+  --secondary-foreground: hsl(0 0% 20%);
+  --muted: hsl(191 59% 81%);
+  --muted-foreground: hsl(0 0% 36.5%);
+  --accent: hsl(42 91% 82%);
+  --accent-foreground: hsl(0 0% 20%);
+  --destructive: hsl(357.8 56.8% 53.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(325.6 57.8% 56.3%);
+  --input: hsl(0 0% 89%);
+  --ring: hsl(330 70% 67%);
+  --chart-1: hsl(330 70% 67%);
+  --chart-2: hsl(190 62% 70%);
+  --chart-3: hsl(42 91% 82%);
+  --chart-4: hsl(330 78% 79%);
+  --chart-5: hsl(330.6 64.1% 56.3%);
+  --sidebar: hsl(326 70% 91%);
+  --sidebar-foreground: hsl(0 0% 20%);
+  --sidebar-primary: hsl(330.4 81.2% 60.4%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(327.4 87.1% 81.8%);
+  --sidebar-accent-foreground: hsl(0 0% 20%);
+  --sidebar-border: hsl(268.7 100% 95.5%);
+  --sidebar-ring: hsl(330.4 81.2% 60.4%);
+  --font-sans: Poppins, sans-serif;
+  --font-serif: Lora, serif;
+  --font-mono: Fira Code, monospace;
+  --radius: 0.4rem;
+  --shadow-2xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
+  --shadow-xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
+  --shadow-sm: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow-md: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 2px 4px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow-lg: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 4px 6px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow-xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 8px 10px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
+  --shadow-2xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 2.50);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="bubblegum"],
+[data-skin="bubblegum"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(201.4 43.8% 12.5%);
+  --foreground: hsl(334 40% 92%);
+  --card: hsl(201.4 33.3% 16.5%);
+  --card-foreground: hsl(334 40% 92%);
+  --popover: hsl(201.4 33.3% 16.5%);
+  --popover-foreground: hsl(334 40% 92%);
+  --primary: hsl(42 91% 82%);
+  --primary-foreground: hsl(201.4 43.8% 12.5%);
+  --secondary: hsl(346.4 55% 76.5%);
+  --secondary-foreground: hsl(201.4 43.8% 12.5%);
+  --muted: hsl(214.3 8.9% 15.5%);
+  --muted-foreground: hsl(346.4 55% 76.5%);
+  --accent: hsl(337.2 30.7% 45.3%);
+  --accent-foreground: hsl(334 40% 92%);
+  --destructive: hsl(328.4 70.4% 62.9%);
+  --destructive-foreground: hsl(201.4 43.8% 12.5%);
+  --border: hsl(206 28% 27%);
+  --input: hsl(201 31% 18%);
+  --ring: hsl(184 41% 51%);
+  --chart-1: hsl(184 41% 51%);
+  --chart-2: hsl(346.4 55% 76.5%);
+  --chart-3: hsl(338 40% 63%);
+  --chart-4: hsl(191.3 64.9% 25.7%);
+  --chart-5: hsl(214.3 8.9% 15.5%);
+  --sidebar: hsl(203 43% 11%);
+  --sidebar-foreground: hsl(220 14% 96%);
+  --sidebar-primary: hsl(330.4 81.2% 60.4%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(327.4 87.1% 81.8%);
+  --sidebar-accent-foreground: hsl(215 28% 17%);
+  --sidebar-border: hsl(217 19% 27%);
+  --sidebar-ring: hsl(330.4 81.2% 60.4%);
+  --shadow-2xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
+  --shadow-xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
+  --shadow-sm: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow-md: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 2px 4px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow-lg: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 4px 6px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow-xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 8px 10px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
+  --shadow-2xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 2.50);
+}
+
+[data-skin="bubblegum"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="bubblegum"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="bubblegum"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="bubblegum"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="bubblegum"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="bubblegum"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/claude.css b/xgen/runtimes/core/assets/styles/skins/claude.css
new file mode 100644
index 0000000..4f5501f
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/claude.css
@@ -0,0 +1,100 @@
+/* Skin "claude" (Claude): the tweakcn preset "claude" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="claude" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: system. */
+[data-skin="claude"] {
+  --background: hsl(48 33% 97%);
+  --foreground: hsl(48 20% 20%);
+  --card: hsl(48 33% 97%);
+  --card-foreground: hsl(60 3% 8%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(51 19% 13%);
+  --primary: hsl(15.3 55.2% 47.3%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(46 23% 89%);
+  --secondary-foreground: hsl(51 8% 30%);
+  --muted: hsl(44 29% 90%);
+  --muted-foreground: hsl(50 3% 40%);
+  --accent: hsl(46 23% 89%);
+  --accent-foreground: hsl(51 19% 13%);
+  --destructive: hsl(60 3% 8%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(50 7% 84%);
+  --input: hsl(51 8% 68%);
+  --ring: hsl(15.1 55.6% 52.4%);
+  --chart-1: hsl(18 57% 44%);
+  --chart-2: hsl(251.5 84.6% 74.5%);
+  --chart-3: hsl(46 28% 82%);
+  --chart-4: hsl(256.6 49.2% 88.4%);
+  --chart-5: hsl(18 60% 44%);
+  --sidebar: hsl(51 26% 95%);
+  --sidebar-foreground: hsl(60 3% 23%);
+  --sidebar-primary: hsl(15.1 55.6% 52.4%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(46 23% 89%);
+  --sidebar-accent-foreground: hsl(0 0% 20%);
+  --sidebar-border: hsl(0 0% 92%);
+  --sidebar-ring: hsl(0 0% 71%);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="claude"],
+[data-skin="claude"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(60 2.7% 14.5%);
+  --foreground: hsl(46 10% 74%);
+  --card: hsl(60 2.7% 14.5%);
+  --card-foreground: hsl(48 33% 97%);
+  --popover: hsl(60 2.1% 18.4%);
+  --popover-foreground: hsl(60 5% 89%);
+  --primary: hsl(14.8 52.1% 47.5%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(48 33% 97%);
+  --secondary-foreground: hsl(60 2.1% 18.4%);
+  --muted: hsl(60 4% 10%);
+  --muted-foreground: hsl(51 9% 69%);
+  --accent: hsl(48 11% 9%);
+  --accent-foreground: hsl(51 26% 95%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(60 5% 23%);
+  --input: hsl(52 5% 31%);
+  --ring: hsl(14.8 63.1% 59.6%);
+  --chart-1: hsl(18 57% 44%);
+  --chart-2: hsl(251.5 84.6% 74.5%);
+  --chart-3: hsl(48 11% 9%);
+  --chart-4: hsl(248 25% 23%);
+  --chart-5: hsl(18 60% 44%);
+  --sidebar: hsl(30 3% 12%);
+  --sidebar-foreground: hsl(46 10% 74%);
+  --sidebar-primary: hsl(0 0% 20%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(60 3% 6%);
+  --sidebar-accent-foreground: hsl(46 10% 74%);
+  --sidebar-border: hsl(0 0% 92%);
+  --sidebar-ring: hsl(0 0% 71%);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+[data-skin="claude"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="claude"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="claude"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="claude"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="claude"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="claude"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/cosmic-night.css b/xgen/runtimes/core/assets/styles/skins/cosmic-night.css
new file mode 100644
index 0000000..5a4781f
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/cosmic-night.css
@@ -0,0 +1,100 @@
+/* Skin "cosmic-night" (Cosmic Night): the tweakcn preset "cosmic-night" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="cosmic-night" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Inter (Google Fonts, loaded when the skin is on). */
+[data-skin="cosmic-night"] {
+  --background: hsl(240 100% 98%);
+  --foreground: hsl(240 27.6% 22.7%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 27.6% 22.7%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(240 27.6% 22.7%);
+  --primary: hsl(251.9 55.8% 57.5%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(249.4 100% 93.7%);
+  --secondary-foreground: hsl(249 33% 38%);
+  --muted: hsl(240 50% 96%);
+  --muted-foreground: hsl(240 12.4% 47.5%);
+  --accent: hsl(218.5 100% 92.4%);
+  --accent-foreground: hsl(240 27.6% 22.7%);
+  --destructive: hsl(347.1 70.5% 52.2%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(240 35% 91%);
+  --input: hsl(240 35% 91%);
+  --ring: hsl(251.9 55.8% 57.5%);
+  --chart-1: hsl(251.9 55.8% 57.5%);
+  --chart-2: hsl(250 95% 77%);
+  --chart-3: hsl(239 82% 65%);
+  --chart-4: hsl(243 93% 72%);
+  --chart-5: hsl(244 47% 48%);
+  --sidebar: hsl(240 50% 96%);
+  --sidebar-foreground: hsl(240 27.6% 22.7%);
+  --sidebar-primary: hsl(251.9 55.8% 57.5%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(218.5 100% 92.4%);
+  --sidebar-accent-foreground: hsl(240 27.6% 22.7%);
+  --sidebar-border: hsl(240 35% 91%);
+  --sidebar-ring: hsl(251.9 55.8% 57.5%);
+  --font-sans: Inter, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
+  --shadow-xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
+  --shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+  --shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+  --shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
+  --shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
+  --shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
+  --shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.30);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="cosmic-night"],
+[data-skin="cosmic-night"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(240 27% 8%);
+  --foreground: hsl(240 48.7% 92.4%);
+  --card: hsl(240 28% 14%);
+  --card-foreground: hsl(240 48.7% 92.4%);
+  --popover: hsl(240 28% 14%);
+  --popover-foreground: hsl(240 48.7% 92.4%);
+  --primary: hsl(251 100% 78%);
+  --primary-foreground: hsl(240 27% 8%);
+  --secondary: hsl(243 33% 25%);
+  --secondary-foreground: hsl(242 100% 88%);
+  --muted: hsl(240 33% 20%);
+  --muted-foreground: hsl(240 20% 69%);
+  --accent: hsl(240 33.3% 28.2%);
+  --accent-foreground: hsl(240 48.7% 92.4%);
+  --destructive: hsl(347.1 70.5% 52.2%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(240 26.2% 25.5%);
+  --input: hsl(240 26.2% 25.5%);
+  --ring: hsl(251 100% 78%);
+  --chart-1: hsl(251 100% 78%);
+  --chart-2: hsl(230.5 44.1% 63.5%);
+  --chart-3: hsl(207 89% 68%);
+  --chart-4: hsl(174 42% 51%);
+  --chart-5: hsl(325.5 100% 73.7%);
+  --sidebar: hsl(240 28% 14%);
+  --sidebar-foreground: hsl(240 48.7% 92.4%);
+  --sidebar-primary: hsl(251 100% 78%);
+  --sidebar-primary-foreground: hsl(240 27% 8%);
+  --sidebar-accent: hsl(240 33.3% 28.2%);
+  --sidebar-accent-foreground: hsl(240 48.7% 92.4%);
+  --sidebar-border: hsl(240 26.2% 25.5%);
+  --sidebar-ring: hsl(251 100% 78%);
+  --shadow-2xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
+  --shadow-xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
+  --shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+  --shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
+  --shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
+  --shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
+  --shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
+  --shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.30);
+}
+
+[data-skin="cosmic-night"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="cosmic-night"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="cosmic-night"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="cosmic-night"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="cosmic-night"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="cosmic-night"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/default.css b/xgen/runtimes/core/assets/styles/skins/default.css
new file mode 100644
index 0000000..3f85c2a
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/default.css
@@ -0,0 +1,69 @@
+/* The default skin (the shadcn neutral theme of theme.css) scoped on an element: the Default tile of /skins/ shows it even when
+   the page wears another skin. On <html>, data-skin="default" needs nothing: theme.css is the default. Same values as theme.css. */
+:where([data-skin="default"]:not(:root)) {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 4%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 4%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 4%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 43.5%);
+  --accent: hsl(0 0% 96%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0.6 88.4% 52.5%);
+  --border: hsl(0 0% 90%);
+  --input: hsl(0 0% 90%);
+  --ring: hsl(0 0% 63%);
+  --chart-1: hsl(18 100% 48%);
+  --chart-2: hsl(174.7 100% 29.5%);
+  --chart-3: hsl(196 72% 23%);
+  --chart-4: hsl(43.6 100% 50%);
+  --chart-5: hsl(36.3 100% 49.7%);
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(0 0% 4%);
+  --sidebar-primary: hsl(0 0% 9%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 96%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(0 0% 90%);
+  --sidebar-ring: hsl(0 0% 63%);
+}
+
+:where(.dark, [data-theme="dark"]) :where([data-skin="default"]:not(:root)) {
+  --background: hsl(0 0% 4%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 90%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 15%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(0 0% 15%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(356.1 62.4% 52%);
+  --border: hsl(0 0% 100% / 10%);
+  --input: hsl(0 0% 100% / 15%);
+  --ring: hsl(0 0% 45%);
+  --chart-1: hsl(225.3 84.1% 49%);
+  --chart-2: hsl(160 100% 37%);
+  --chart-3: hsl(36.3 100% 49.7%);
+  --chart-4: hsl(273.3 100% 63.8%);
+  --chart-5: hsl(345 100% 56%);
+  --sidebar: hsl(0 0% 9%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(225.3 84.1% 49%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 15%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 100% / 10%);
+  --sidebar-ring: hsl(0 0% 45%);
+}
diff --git a/xgen/runtimes/core/assets/styles/skins/doom-64.css b/xgen/runtimes/core/assets/styles/skins/doom-64.css
new file mode 100644
index 0000000..9a2576e
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/doom-64.css
@@ -0,0 +1,100 @@
+/* Skin "doom-64" (Doom 64): the tweakcn preset "doom-64" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="doom-64" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Oxanium (Google Fonts, loaded when the skin is on). */
+[data-skin="doom-64"] {
+  --background: hsl(0 0% 80%);
+  --foreground: hsl(0 0% 12%);
+  --card: hsl(0 0% 69%);
+  --card-foreground: hsl(0 0% 12%);
+  --popover: hsl(0 0% 69%);
+  --popover-foreground: hsl(0 0% 12%);
+  --primary: hsl(0 73.5% 41.4%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(82 39% 30%);
+  --secondary-foreground: hsl(0 0% 100%);
+  --muted: hsl(0 0% 72%);
+  --muted-foreground: hsl(0 0% 26%);
+  --accent: hsl(207 47.2% 45.3%);
+  --accent-foreground: hsl(0 0% 100%);
+  --destructive: hsl(26 100% 50%);
+  --destructive-foreground: hsl(0 0% 0%);
+  --border: hsl(0 0% 31%);
+  --input: hsl(0 0% 31%);
+  --ring: hsl(0 73.5% 41.4%);
+  --chart-1: hsl(0 73.5% 41.4%);
+  --chart-2: hsl(82 39% 30%);
+  --chart-3: hsl(207 44% 49%);
+  --chart-4: hsl(26 100% 50%);
+  --chart-5: hsl(16 18% 47%);
+  --sidebar: hsl(0 0% 69%);
+  --sidebar-foreground: hsl(0 0% 12%);
+  --sidebar-primary: hsl(0 73.5% 41.4%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(207 44% 49%);
+  --sidebar-accent-foreground: hsl(0 0% 100%);
+  --sidebar-border: hsl(0 0% 31%);
+  --sidebar-ring: hsl(0 73.5% 41.4%);
+  --font-sans: "Oxanium", sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "Source Code Pro", monospace;
+  --radius: 0px;
+  --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
+  --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
+  --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
+  --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
+  --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
+  --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
+  --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 1.00);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="doom-64"],
+[data-skin="doom-64"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 10%);
+  --foreground: hsl(0 0% 88%);
+  --card: hsl(0 0% 16.5%);
+  --card-foreground: hsl(0 0% 88%);
+  --popover: hsl(0 0% 16.5%);
+  --popover-foreground: hsl(0 0% 88%);
+  --primary: hsl(0.7 72% 52.4%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(92 48% 42%);
+  --secondary-foreground: hsl(0 0% 0%);
+  --muted: hsl(0 0% 14.5%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(207 89% 68%);
+  --accent-foreground: hsl(0 0% 0%);
+  --destructive: hsl(37.6 100% 50%);
+  --destructive-foreground: hsl(0 0% 0%);
+  --border: hsl(0 0% 29%);
+  --input: hsl(0 0% 29%);
+  --ring: hsl(1.4 77.2% 55.3%);
+  --chart-1: hsl(1.4 77.2% 55.3%);
+  --chart-2: hsl(92 48% 42%);
+  --chart-3: hsl(207 89% 68%);
+  --chart-4: hsl(37.6 100% 50%);
+  --chart-5: hsl(16 15% 56%);
+  --sidebar: hsl(0 0% 8%);
+  --sidebar-foreground: hsl(0 0% 88%);
+  --sidebar-primary: hsl(1.4 77.2% 55.3%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(207 89% 68%);
+  --sidebar-accent-foreground: hsl(0 0% 0%);
+  --sidebar-border: hsl(0 0% 29%);
+  --sidebar-ring: hsl(1.4 77.2% 55.3%);
+  --shadow-2xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
+  --shadow-xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
+  --shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
+  --shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
+  --shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 2px 4px -1px hsl(0 0% 0% / 0.60);
+  --shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 4px 6px -1px hsl(0 0% 0% / 0.60);
+  --shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.60);
+  --shadow-2xl: 0px 2px 5px 0px hsl(0 0% 0% / 1.50);
+}
+
+[data-skin="doom-64"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="doom-64"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="doom-64"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="doom-64"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="doom-64"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="doom-64"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/kodama-grove.css b/xgen/runtimes/core/assets/styles/skins/kodama-grove.css
new file mode 100644
index 0000000..98badbe
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/kodama-grove.css
@@ -0,0 +1,100 @@
+/* Skin "kodama-grove" (Kodama Grove): the tweakcn preset "kodama-grove" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="kodama-grove" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Merriweather (Google Fonts, loaded when the skin is on). */
+[data-skin="kodama-grove"] {
+  --background: hsl(45 49% 79%);
+  --foreground: hsl(26 19% 30%);
+  --card: hsl(42 45% 83%);
+  --card-foreground: hsl(26 19% 30%);
+  --popover: hsl(44 58% 89%);
+  --popover-foreground: hsl(26 19% 30%);
+  --primary: hsl(70.6 48.5% 32%);
+  --primary-foreground: hsl(43 64% 98%);
+  --secondary: hsl(45 48% 75%);
+  --secondary-foreground: hsl(26 19% 30%);
+  --muted: hsl(45 48% 75%);
+  --muted-foreground: hsl(26.4 14.6% 33.5%);
+  --accent: hsl(44 50% 72%);
+  --accent-foreground: hsl(26 19% 30%);
+  --destructive: hsl(8.5 34.7% 48%);
+  --destructive-foreground: hsl(45 44.4% 96.5%);
+  --border: hsl(26 24% 60%);
+  --input: hsl(44 50% 72%);
+  --ring: hsl(92 19% 62%);
+  --chart-1: hsl(92 19% 62%);
+  --chart-2: hsl(95 16% 55%);
+  --chart-3: hsl(103 16% 75%);
+  --chart-4: hsl(104 11% 47%);
+  --chart-5: hsl(104 11% 39%);
+  --sidebar: hsl(44 52% 76%);
+  --sidebar-foreground: hsl(26 19% 30%);
+  --sidebar-primary: hsl(92 19% 62%);
+  --sidebar-primary-foreground: hsl(43 64% 98%);
+  --sidebar-accent: hsl(42 29% 88%);
+  --sidebar-accent-foreground: hsl(26 19% 30%);
+  --sidebar-border: hsl(42 25% 86%);
+  --sidebar-ring: hsl(92 19% 62%);
+  --font-sans: Merriweather, serif;
+  --font-serif: Source Serif 4, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.425rem;
+  --shadow-2xs: 3px 3px 2px 0px hsl(88 22% 35% / 0.07);
+  --shadow-xs: 3px 3px 2px 0px hsl(88 22% 35% / 0.07);
+  --shadow-sm: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15);
+  --shadow: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15);
+  --shadow-md: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 2px 4px -1px hsl(88 22% 35% / 0.15);
+  --shadow-lg: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 4px 6px -1px hsl(88 22% 35% / 0.15);
+  --shadow-xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 8px 10px -1px hsl(88 22% 35% / 0.15);
+  --shadow-2xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.38);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="kodama-grove"],
+[data-skin="kodama-grove"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(42.4 17.2% 19.4%);
+  --foreground: hsl(38 41% 88%);
+  --card: hsl(39 12% 23%);
+  --card-foreground: hsl(38 41% 88%);
+  --popover: hsl(39 12% 23%);
+  --popover-foreground: hsl(38 41% 88%);
+  --primary: hsl(95 16% 55%);
+  --primary-foreground: hsl(27 12% 15%);
+  --secondary: hsl(40 13% 31%);
+  --secondary-foreground: hsl(38 41% 88%);
+  --muted: hsl(39 13% 26%);
+  --muted-foreground: hsl(33.3 11.5% 69.4%);
+  --accent: hsl(44 27% 50%);
+  --accent-foreground: hsl(27 12% 15%);
+  --destructive: hsl(9.3 31.6% 44.1%);
+  --destructive-foreground: hsl(40 41% 90%);
+  --border: hsl(40 13% 31%);
+  --input: hsl(40 13% 31%);
+  --ring: hsl(95 16% 55%);
+  --chart-1: hsl(95 16% 55%);
+  --chart-2: hsl(92 19% 62%);
+  --chart-3: hsl(104 11% 47%);
+  --chart-4: hsl(44 27% 50%);
+  --chart-5: hsl(104 11% 39%);
+  --sidebar: hsl(42.4 17.2% 19.4%);
+  --sidebar-foreground: hsl(38 41% 88%);
+  --sidebar-primary: hsl(95 16% 55%);
+  --sidebar-primary-foreground: hsl(27 12% 15%);
+  --sidebar-accent: hsl(44 27% 50%);
+  --sidebar-accent-foreground: hsl(27 12% 15%);
+  --sidebar-border: hsl(40 13% 31%);
+  --sidebar-ring: hsl(95 16% 55%);
+  --shadow-2xs: 3px 3px 2px 0px hsl(88 22% 35% / 0.07);
+  --shadow-xs: 3px 3px 2px 0px hsl(88 22% 35% / 0.07);
+  --shadow-sm: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15);
+  --shadow: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15);
+  --shadow-md: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 2px 4px -1px hsl(88 22% 35% / 0.15);
+  --shadow-lg: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 4px 6px -1px hsl(88 22% 35% / 0.15);
+  --shadow-xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 8px 10px -1px hsl(88 22% 35% / 0.15);
+  --shadow-2xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.38);
+}
+
+[data-skin="kodama-grove"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="kodama-grove"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="kodama-grove"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="kodama-grove"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="kodama-grove"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="kodama-grove"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/mocha-mousse.css b/xgen/runtimes/core/assets/styles/skins/mocha-mousse.css
new file mode 100644
index 0000000..d1caa7b
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/mocha-mousse.css
@@ -0,0 +1,100 @@
+/* Skin "mocha-mousse" (Mocha Mousse): the tweakcn preset "mocha-mousse" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="mocha-mousse" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: DM Sans (Google Fonts, loaded when the skin is on). */
+[data-skin="mocha-mousse"] {
+  --background: hsl(55 30% 92%);
+  --foreground: hsl(16 15% 29%);
+  --card: hsl(55 30% 92%);
+  --card-foreground: hsl(16 15% 29%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(16 15% 29%);
+  --primary: hsl(17.7 25.5% 46.9%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(37.3 16.7% 43.3%);
+  --secondary-foreground: hsl(0 0% 100%);
+  --muted: hsl(20 45% 81%);
+  --muted-foreground: hsl(13.3 25.1% 35.1%);
+  --accent: hsl(20 45% 81%);
+  --accent-foreground: hsl(16 15% 29%);
+  --destructive: hsl(22.5 14.8% 10.6%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(37 22% 65%);
+  --input: hsl(37 22% 65%);
+  --ring: hsl(18 26% 52%);
+  --chart-1: hsl(18 26% 52%);
+  --chart-2: hsl(14 21% 45%);
+  --chart-3: hsl(22 33% 65%);
+  --chart-4: hsl(37 22% 65%);
+  --chart-5: hsl(22 19% 55%);
+  --sidebar: hsl(21 44% 86%);
+  --sidebar-foreground: hsl(16 15% 29%);
+  --sidebar-primary: hsl(18 26% 52%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(22 33% 65%);
+  --sidebar-accent-foreground: hsl(0 0% 100%);
+  --sidebar-border: hsl(22 19% 55%);
+  --sidebar-ring: hsl(18 26% 52%);
+  --font-sans: DM Sans, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: Menlo, monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 2px 2px 0px 0px hsl(20 18% 51% / 0.06);
+  --shadow-xs: 2px 2px 0px 0px hsl(20 18% 51% / 0.06);
+  --shadow-sm: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 1px 2px -1px hsl(20 18% 51% / 0.11);
+  --shadow: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 1px 2px -1px hsl(20 18% 51% / 0.11);
+  --shadow-md: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 2px 4px -1px hsl(20 18% 51% / 0.11);
+  --shadow-lg: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 4px 6px -1px hsl(20 18% 51% / 0.11);
+  --shadow-xl: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 8px 10px -1px hsl(20 18% 51% / 0.11);
+  --shadow-2xl: 2px 2px 0px 0px hsl(20 18% 51% / 0.28);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="mocha-mousse"],
+[data-skin="mocha-mousse"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(20 15% 15%);
+  --foreground: hsl(55 30% 92%);
+  --card: hsl(21 13% 21%);
+  --card-foreground: hsl(55 30% 92%);
+  --popover: hsl(21 13% 21%);
+  --popover-foreground: hsl(55 30% 92%);
+  --primary: hsl(22 33% 65%);
+  --primary-foreground: hsl(20 15% 15%);
+  --secondary: hsl(13.8 21.4% 43.9%);
+  --secondary-foreground: hsl(55 30% 92%);
+  --muted: hsl(16 15% 29%);
+  --muted-foreground: hsl(21 31% 73%);
+  --accent: hsl(37 22% 65%);
+  --accent-foreground: hsl(20 15% 15%);
+  --destructive: hsl(0 68.7% 67.5%);
+  --destructive-foreground: hsl(20 15% 15%);
+  --border: hsl(16 15% 29%);
+  --input: hsl(16 15% 29%);
+  --ring: hsl(22 33% 65%);
+  --chart-1: hsl(22 33% 65%);
+  --chart-2: hsl(37 22% 65%);
+  --chart-3: hsl(18 26% 52%);
+  --chart-4: hsl(14 21% 45%);
+  --chart-5: hsl(22 19% 55%);
+  --sidebar: hsl(22.5 14.8% 10.6%);
+  --sidebar-foreground: hsl(55 30% 92%);
+  --sidebar-primary: hsl(22 33% 65%);
+  --sidebar-primary-foreground: hsl(22.5 14.8% 10.6%);
+  --sidebar-accent: hsl(37 22% 65%);
+  --sidebar-accent-foreground: hsl(22.5 14.8% 10.6%);
+  --sidebar-border: hsl(16 15% 29%);
+  --sidebar-ring: hsl(22 33% 65%);
+  --shadow-2xs: 2px 2px 0px 0px hsl(20 18% 30% / 0.06);
+  --shadow-xs: 2px 2px 0px 0px hsl(20 18% 30% / 0.06);
+  --shadow-sm: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 1px 2px -1px hsl(20 18% 30% / 0.11);
+  --shadow: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 1px 2px -1px hsl(20 18% 30% / 0.11);
+  --shadow-md: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 2px 4px -1px hsl(20 18% 30% / 0.11);
+  --shadow-lg: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 4px 6px -1px hsl(20 18% 30% / 0.11);
+  --shadow-xl: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 8px 10px -1px hsl(20 18% 30% / 0.11);
+  --shadow-2xl: 2px 2px 0px 0px hsl(20 18% 30% / 0.28);
+}
+
+[data-skin="mocha-mousse"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="mocha-mousse"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="mocha-mousse"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="mocha-mousse"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="mocha-mousse"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="mocha-mousse"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/modern-minimal.css b/xgen/runtimes/core/assets/styles/skins/modern-minimal.css
new file mode 100644
index 0000000..c2e6f7b
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/modern-minimal.css
@@ -0,0 +1,100 @@
+/* Skin "modern-minimal" (Modern Minimal): the tweakcn preset "modern-minimal" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="modern-minimal" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Inter (Google Fonts, loaded when the skin is on). */
+[data-skin="modern-minimal"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 20%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 20%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 20%);
+  --primary: hsl(217.3 76.8% 52.7%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(220 14% 96%);
+  --secondary-foreground: hsl(215 14% 34%);
+  --muted: hsl(210 20% 98%);
+  --muted-foreground: hsl(220 9% 46%);
+  --accent: hsl(204 94% 94%);
+  --accent-foreground: hsl(224.4 64.3% 32.9%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(220 13% 91%);
+  --input: hsl(220 13% 91%);
+  --ring: hsl(217.2 91.2% 59.8%);
+  --chart-1: hsl(217.2 91.2% 59.8%);
+  --chart-2: hsl(221 83% 53%);
+  --chart-3: hsl(224.3 76.3% 48%);
+  --chart-4: hsl(226 71% 40%);
+  --chart-5: hsl(224.4 64.3% 32.9%);
+  --sidebar: hsl(210 20% 98%);
+  --sidebar-foreground: hsl(0 0% 20%);
+  --sidebar-primary: hsl(217.2 91.2% 59.8%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(204 94% 94%);
+  --sidebar-accent-foreground: hsl(224.4 64.3% 32.9%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --font-sans: Inter, sans-serif;
+  --font-serif: Source Serif 4, serif;
+  --font-mono: JetBrains Mono, monospace;
+  --radius: 0.375rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="modern-minimal"],
+[data-skin="modern-minimal"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 9%);
+  --foreground: hsl(0 0% 90%);
+  --card: hsl(0 0% 15%);
+  --card-foreground: hsl(0 0% 90%);
+  --popover: hsl(0 0% 15%);
+  --popover-foreground: hsl(0 0% 90%);
+  --primary: hsl(217.3 76.8% 52.7%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 90%);
+  --muted: hsl(0 0% 12%);
+  --muted-foreground: hsl(0 0% 64%);
+  --accent: hsl(224.4 64.3% 32.9%);
+  --accent-foreground: hsl(213 97% 87%);
+  --destructive: hsl(358.3 71.8% 52.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 0% 25%);
+  --input: hsl(0 0% 25%);
+  --ring: hsl(217.2 91.2% 59.8%);
+  --chart-1: hsl(213 94% 68%);
+  --chart-2: hsl(217.2 91.2% 59.8%);
+  --chart-3: hsl(221 83% 53%);
+  --chart-4: hsl(224.3 76.3% 48%);
+  --chart-5: hsl(226 71% 40%);
+  --sidebar: hsl(0 0% 9%);
+  --sidebar-foreground: hsl(0 0% 90%);
+  --sidebar-primary: hsl(217.2 91.2% 59.8%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(224.4 64.3% 32.9%);
+  --sidebar-accent-foreground: hsl(213 97% 87%);
+  --sidebar-border: hsl(0 0% 25%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+[data-skin="modern-minimal"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="modern-minimal"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="modern-minimal"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="modern-minimal"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="modern-minimal"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="modern-minimal"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/neo-brutalism.css b/xgen/runtimes/core/assets/styles/skins/neo-brutalism.css
new file mode 100644
index 0000000..e8ec8dd
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/neo-brutalism.css
@@ -0,0 +1,100 @@
+/* Skin "neo-brutalism" (Neo Brutalism): the tweakcn preset "neo-brutalism" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="neo-brutalism" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: DM Sans (Google Fonts, loaded when the skin is on). */
+[data-skin="neo-brutalism"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 0%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 0%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 0%);
+  --primary: hsl(354.9 91.8% 47.6%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(60 100% 50%);
+  --secondary-foreground: hsl(0 0% 0%);
+  --muted: hsl(0 0% 94%);
+  --muted-foreground: hsl(0 0% 20%);
+  --accent: hsl(216 100% 50%);
+  --accent-foreground: hsl(0 0% 100%);
+  --destructive: hsl(0 0% 0%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 0% 0%);
+  --input: hsl(0 0% 0%);
+  --ring: hsl(0 100% 60%);
+  --chart-1: hsl(0 100% 60%);
+  --chart-2: hsl(60 100% 50%);
+  --chart-3: hsl(216 100% 50%);
+  --chart-4: hsl(120 100% 40%);
+  --chart-5: hsl(300 100% 40%);
+  --sidebar: hsl(0 0% 94%);
+  --sidebar-foreground: hsl(0 0% 0%);
+  --sidebar-primary: hsl(0 100% 60%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(216 100% 50%);
+  --sidebar-accent-foreground: hsl(0 0% 100%);
+  --sidebar-border: hsl(0 0% 0%);
+  --sidebar-ring: hsl(0 100% 60%);
+  --font-sans: DM Sans, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: Space Mono, monospace;
+  --radius: 0px;
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="neo-brutalism"],
+[data-skin="neo-brutalism"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 0%);
+  --foreground: hsl(0 0% 100%);
+  --card: hsl(0 0% 20%);
+  --card-foreground: hsl(0 0% 100%);
+  --popover: hsl(0 0% 20%);
+  --popover-foreground: hsl(0 0% 100%);
+  --primary: hsl(0 100% 70%);
+  --primary-foreground: hsl(0 0% 0%);
+  --secondary: hsl(60 100% 60%);
+  --secondary-foreground: hsl(0 0% 0%);
+  --muted: hsl(0 0% 10%);
+  --muted-foreground: hsl(0 0% 80%);
+  --accent: hsl(210 100% 60%);
+  --accent-foreground: hsl(0 0% 0%);
+  --destructive: hsl(0 0% 100%);
+  --destructive-foreground: hsl(0 0% 0%);
+  --border: hsl(0 0% 100%);
+  --input: hsl(0 0% 100%);
+  --ring: hsl(0 100% 70%);
+  --chart-1: hsl(0 100% 70%);
+  --chart-2: hsl(60 100% 60%);
+  --chart-3: hsl(210 100% 60%);
+  --chart-4: hsl(120 60% 50%);
+  --chart-5: hsl(300 60% 50%);
+  --sidebar: hsl(0 0% 0%);
+  --sidebar-foreground: hsl(0 0% 100%);
+  --sidebar-primary: hsl(0 100% 70%);
+  --sidebar-primary-foreground: hsl(0 0% 0%);
+  --sidebar-accent: hsl(210 100% 60%);
+  --sidebar-accent-foreground: hsl(0 0% 0%);
+  --sidebar-border: hsl(0 0% 100%);
+  --sidebar-ring: hsl(0 100% 70%);
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
+}
+
+[data-skin="neo-brutalism"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="neo-brutalism"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="neo-brutalism"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="neo-brutalism"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="neo-brutalism"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="neo-brutalism"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/notebook.css b/xgen/runtimes/core/assets/styles/skins/notebook.css
new file mode 100644
index 0000000..f972fad
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/notebook.css
@@ -0,0 +1,111 @@
+/* Skin "notebook" (Notebook): the tweakcn preset "notebook" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="notebook" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Architects Daughter (Google Fonts, loaded when the skin is on). */
+[data-skin="notebook"] {
+  --background: hsl(0 0% 98%);
+  --foreground: hsl(0 0% 23%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 23%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 23%);
+  --primary: hsl(0 0% 38%);
+  --primary-foreground: hsl(0 0% 94%);
+  --secondary: hsl(0 0% 87%);
+  --secondary-foreground: hsl(0 0% 23%);
+  --muted: hsl(0 0% 89%);
+  --muted-foreground: hsl(0 0% 31%);
+  --accent: hsl(47 64% 87%);
+  --accent-foreground: hsl(14 26% 29%);
+  --destructive: hsl(359.2 30.6% 52%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(0 1% 45%);
+  --input: hsl(0 0% 100%);
+  --ring: hsl(0 0% 63%);
+  --chart-1: hsl(0 0% 20%);
+  --chart-2: hsl(0 0% 33%);
+  --chart-3: hsl(0 0% 47%);
+  --chart-4: hsl(0 0% 60%);
+  --chart-5: hsl(0 0% 73%);
+  --sidebar: hsl(0 0% 94%);
+  --sidebar-foreground: hsl(0 0% 23%);
+  --sidebar-primary: hsl(0 0% 38%);
+  --sidebar-primary-foreground: hsl(0 0% 94%);
+  --sidebar-accent: hsl(47 64% 87%);
+  --sidebar-accent-foreground: hsl(14 26% 29%);
+  --sidebar-border: hsl(0 0% 75%);
+  --sidebar-ring: hsl(0 0% 63%);
+  --font-sans: Architects Daughter, sans-serif;
+  --font-serif: "Times New Roman", Times, serif;
+  --font-mono: "Courier New", Courier, monospace;
+  --font-weight-medium: 400;
+  --font-weight-semibold: 400;
+  --radius: 0.625rem;
+  --shadow-2xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
+  --shadow-xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
+  --shadow-sm: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
+  --shadow: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
+  --shadow-md: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 2px 4px -1px hsl(0 0% 0% / 0.03);
+  --shadow-lg: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 4px 6px -1px hsl(0 0% 0% / 0.03);
+  --shadow-xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 8px 10px -1px hsl(0 0% 0% / 0.03);
+  --shadow-2xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.07);
+  --tracking-normal: 0.5px;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="notebook"],
+[data-skin="notebook"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 17%);
+  --foreground: hsl(0 0% 86%);
+  --card: hsl(0 0% 20%);
+  --card-foreground: hsl(0 0% 86%);
+  --popover: hsl(0 0% 20%);
+  --popover-foreground: hsl(0 0% 86%);
+  --primary: hsl(0 0% 69%);
+  --primary-foreground: hsl(0 0% 17%);
+  --secondary: hsl(0 0% 30%);
+  --secondary-foreground: hsl(0 0% 75%);
+  --muted: hsl(0 0% 27%);
+  --muted-foreground: hsl(0 0% 70.6%);
+  --accent: hsl(0 0% 88%);
+  --accent-foreground: hsl(0 0% 20%);
+  --destructive: hsl(0 36% 77%);
+  --destructive-foreground: hsl(0 0% 17%);
+  --border: hsl(0 0% 31%);
+  --input: hsl(0 0% 20%);
+  --ring: hsl(0 0% 75%);
+  --chart-1: hsl(0 0% 94%);
+  --chart-2: hsl(0 0% 82%);
+  --chart-3: hsl(0 0% 69%);
+  --chart-4: hsl(0 0% 56%);
+  --chart-5: hsl(0 0% 44%);
+  --sidebar: hsl(0 0% 13%);
+  --sidebar-foreground: hsl(0 0% 86%);
+  --sidebar-primary: hsl(0 0% 69%);
+  --sidebar-primary-foreground: hsl(0 0% 13%);
+  --sidebar-accent: hsl(0 0% 88%);
+  --sidebar-accent-foreground: hsl(0 0% 20%);
+  --sidebar-border: hsl(0 0% 31%);
+  --sidebar-ring: hsl(0 0% 75%);
+  --font-serif: Georgia, serif;
+  --font-mono: "Fira Code", "Courier New", monospace;
+  --shadow-2xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
+  --shadow-xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
+  --shadow-sm: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
+  --shadow: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
+  --shadow-md: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 2px 4px -1px hsl(0 0% 0% / 0.03);
+  --shadow-lg: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 4px 6px -1px hsl(0 0% 0% / 0.03);
+  --shadow-xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 8px 10px -1px hsl(0 0% 0% / 0.03);
+  --shadow-2xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.07);
+}
+
+:root[data-skin="notebook"] body { letter-spacing: var(--tracking-normal); }
+[data-skin="notebook"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="notebook"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="notebook"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="notebook"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="notebook"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="notebook"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/perpetuity.css b/xgen/runtimes/core/assets/styles/skins/perpetuity.css
new file mode 100644
index 0000000..62b4936
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/perpetuity.css
@@ -0,0 +1,103 @@
+/* Skin "perpetuity" (Perpetuity): the tweakcn preset "perpetuity" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="perpetuity" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Source Code Pro (Google Fonts, loaded when the skin is on). */
+[data-skin="perpetuity"] {
+  --background: hsl(180 21% 93%);
+  --foreground: hsl(188.8 78.9% 18.6%);
+  --card: hsl(180 24% 96%);
+  --card-foreground: hsl(188.8 78.9% 18.6%);
+  --popover: hsl(180 24% 96%);
+  --popover-foreground: hsl(188.8 78.9% 18.6%);
+  --primary: hsl(184 100% 27%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(180 29% 88%);
+  --secondary-foreground: hsl(188.8 78.9% 18.6%);
+  --muted: hsl(180 19% 90%);
+  --muted-foreground: hsl(184 35.3% 33.3%);
+  --accent: hsl(184 38% 85%);
+  --accent-foreground: hsl(188.8 78.9% 18.6%);
+  --destructive: hsl(0 62.4% 52%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(186 27% 85%);
+  --input: hsl(180 29% 88%);
+  --ring: hsl(184 92% 29%);
+  --chart-1: hsl(184 92% 29%);
+  --chart-2: hsl(183.5 69.4% 38.4%);
+  --chart-3: hsl(183.6 55.1% 48%);
+  --chart-4: hsl(184 54% 59%);
+  --chart-5: hsl(183.6 55% 70.4%);
+  --sidebar: hsl(186 35% 89%);
+  --sidebar-foreground: hsl(188.8 78.9% 18.6%);
+  --sidebar-primary: hsl(184 92% 29%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(184 38% 85%);
+  --sidebar-accent-foreground: hsl(188.8 78.9% 18.6%);
+  --sidebar-border: hsl(186 27% 85%);
+  --sidebar-ring: hsl(184 92% 29%);
+  --font-sans: Courier New, monospace;
+  --font-serif: Courier New, monospace;
+  --font-mono: Courier New, monospace;
+  --radius: 0.125rem;
+  --shadow-2xs: 1px 1px 2px 0px hsl(185 70% 30% / 0.07);
+  --shadow-xs: 1px 1px 2px 0px hsl(185 70% 30% / 0.07);
+  --shadow-sm: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15);
+  --shadow: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15);
+  --shadow-md: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 2px 4px -1px hsl(185 70% 30% / 0.15);
+  --shadow-lg: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 4px 6px -1px hsl(185 70% 30% / 0.15);
+  --shadow-xl: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 8px 10px -1px hsl(185 70% 30% / 0.15);
+  --shadow-2xl: 1px 1px 2px 0px hsl(185 70% 30% / 0.38);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="perpetuity"],
+[data-skin="perpetuity"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(196 52% 8%);
+  --foreground: hsl(180 77% 61%);
+  --card: hsl(192 51% 9.6%);
+  --card-foreground: hsl(180 77% 61%);
+  --popover: hsl(192 51% 9.6%);
+  --popover-foreground: hsl(180 77% 61%);
+  --primary: hsl(180 77% 61%);
+  --primary-foreground: hsl(196 52% 8%);
+  --secondary: hsl(191 59% 21%);
+  --secondary-foreground: hsl(180 77% 61%);
+  --muted: hsl(193 58% 14%);
+  --muted-foreground: hsl(180 51% 43%);
+  --accent: hsl(191 59% 21%);
+  --accent-foreground: hsl(180 77% 61%);
+  --destructive: hsl(357.6 71.5% 48.2%);
+  --destructive-foreground: hsl(0 0% 95%);
+  --border: hsl(191 59% 21%);
+  --input: hsl(191 59% 21%);
+  --ring: hsl(180 77% 61%);
+  --chart-1: hsl(180 77% 61%);
+  --chart-2: hsl(180 51% 43%);
+  --chart-3: hsl(180 51% 36%);
+  --chart-4: hsl(184 58% 23%);
+  --chart-5: hsl(185.2 62.2% 14.5%);
+  --sidebar: hsl(196 52% 8%);
+  --sidebar-foreground: hsl(180 77% 61%);
+  --sidebar-primary: hsl(180 77% 61%);
+  --sidebar-primary-foreground: hsl(196 52% 8%);
+  --sidebar-accent: hsl(191 59% 21%);
+  --sidebar-accent-foreground: hsl(180 77% 61%);
+  --sidebar-border: hsl(191 59% 21%);
+  --sidebar-ring: hsl(180 77% 61%);
+  --font-sans: Source Code Pro, monospace;
+  --font-serif: Source Code Pro, monospace;
+  --font-mono: Source Code Pro, monospace;
+  --shadow-2xs: 1px 1px 2px 0px hsl(180 70% 60% / 0.10);
+  --shadow-xs: 1px 1px 2px 0px hsl(180 70% 60% / 0.10);
+  --shadow-sm: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20);
+  --shadow: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20);
+  --shadow-md: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 2px 4px -1px hsl(180 70% 60% / 0.20);
+  --shadow-lg: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 4px 6px -1px hsl(180 70% 60% / 0.20);
+  --shadow-xl: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 8px 10px -1px hsl(180 70% 60% / 0.20);
+  --shadow-2xl: 1px 1px 2px 0px hsl(180 70% 60% / 0.50);
+}
+
+[data-skin="perpetuity"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="perpetuity"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="perpetuity"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="perpetuity"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="perpetuity"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="perpetuity"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/skins.json b/xgen/runtimes/core/assets/styles/skins/skins.json
new file mode 100644
index 0000000..de4e7f8
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/skins.json
@@ -0,0 +1,103 @@
+{
+  "sky": {
+    "label": "Sky",
+    "source": "ui8kit",
+    "fonts": [
+      "Istok+Web:ital,wght@0,400;0,700;1,400;1,700"
+    ]
+  },
+  "modern-minimal": {
+    "label": "Modern Minimal",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Inter:wght@400;500;600;700"
+    ]
+  },
+  "violet-bloom": {
+    "label": "Violet Bloom",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Plus+Jakarta+Sans:wght@400;500;600;700"
+    ]
+  },
+  "t3-chat": {
+    "label": "T3 Chat",
+    "source": "tweakcn a3b47b3",
+    "fonts": []
+  },
+  "bubblegum": {
+    "label": "Bubblegum",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Poppins:wght@400;500;600;700"
+    ]
+  },
+  "doom-64": {
+    "label": "Doom 64",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Oxanium:wght@400;500;600;700"
+    ]
+  },
+  "amber-minimal": {
+    "label": "Amber Minimal",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Inter:wght@400;500;600;700"
+    ]
+  },
+  "supabase": {
+    "label": "Supabase",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Outfit:wght@400;500;600;700"
+    ]
+  },
+  "kodama-grove": {
+    "label": "Kodama Grove",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Merriweather:wght@400;500;600;700"
+    ]
+  },
+  "perpetuity": {
+    "label": "Perpetuity",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Source+Code+Pro:wght@400;500;600;700"
+    ]
+  },
+  "cosmic-night": {
+    "label": "Cosmic Night",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Inter:wght@400;500;600;700"
+    ]
+  },
+  "claude": {
+    "label": "Claude",
+    "source": "tweakcn a3b47b3",
+    "fonts": []
+  },
+  "mocha-mousse": {
+    "label": "Mocha Mousse",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "DM+Sans:wght@400;500;600;700"
+    ]
+  },
+  "neo-brutalism": {
+    "label": "Neo Brutalism",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "DM+Sans:wght@400;500;600;700"
+    ]
+  },
+  "notebook": {
+    "label": "Notebook",
+    "source": "tweakcn a3b47b3",
+    "fonts": [
+      "Architects+Daughter:wght@400"
+    ]
+  }
+}
diff --git a/xgen/runtimes/core/assets/styles/skins/sky.css b/xgen/runtimes/core/assets/styles/skins/sky.css
new file mode 100644
index 0000000..438d5c2
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/sky.css
@@ -0,0 +1,116 @@
+/* Skin "sky": white and navy with an orange primary, Istok Web, 0.5rem (8px) corners, soft shadows.
+   On when <html data-skin="sky"> (see skins.css); the font is loaded by bootScreen only for this skin.
+   Only the shadcn tokens change: plain `rounded` reads --radius, the body font reads --font-sans, the tracking
+   utilities read --tracking-*; the shadow utilities print literal values, so the few the kit uses are pointed at the
+   skin's --shadow-* below. */
+:root[data-skin="sky"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(214.4262 100% 11.9608%);
+  --card: hsl(210 16.6667% 97.6471%);
+  --card-foreground: hsl(214.4262 100% 11.9608%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(214.4262 100% 11.9608%);
+  --primary: hsl(23.4 100% 39.2%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(209.0323 100% 93.9216%);
+  --secondary-foreground: hsl(214.4262 100% 11.9608%);
+  --muted: hsl(210 100% 98.0392%);
+  --muted-foreground: hsl(215.2941 39.0805% 34.1176%);
+  --accent: hsl(209.0323 100% 93.9216%);
+  --accent-foreground: hsl(214.4262 100% 11.9608%);
+  --destructive: hsl(358 69% 51%);
+  --destructive-foreground: hsl(210 40% 98.0392%);
+  /* a barely visible hairline: just darker than the card fill (97.6%), so card edges stay faintly readable on white;
+     fields keep the stronger line (--input, inset-ring-input in the kit) so they read as fields */
+  --border: hsl(214 32% 94%);
+  --input: hsl(214.2857 31.8182% 91.3725%);
+  --ring: hsl(214.4262 100% 11.9608%);
+  --chart-1: hsl(219.8684 90.4762% 67.0588%);
+  --chart-2: hsl(24.8908 100% 55.098%);
+  --chart-3: hsl(215.2941 25% 26.6667%);
+  --chart-4: hsl(32.2059 91.8919% 70.9804%);
+  --chart-5: hsl(213.4884 84.3137% 90%);
+  --sidebar: hsl(0 0% 100%);
+  --sidebar-foreground: hsl(214.4262 100% 11.9608%);
+  --sidebar-primary: hsl(29.1429 100% 51.9608%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(209.0323 100% 93.9216%);
+  --sidebar-accent-foreground: hsl(214.4262 100% 11.9608%);
+  --sidebar-border: hsl(214.2857 31.8182% 91.3725%);
+  --sidebar-ring: hsl(214.4262 100% 11.9608%);
+  --font-sans: "Istok Web", system-ui, sans-serif;
+  /* Istok Web ships 400 and 700 only: medium (500) and semibold (600) would ask for faces that do not exist,
+     and some engines (WebKit) then draw that text in the fallback system font; map them onto real faces */
+  --font-weight-medium: 400;
+  --font-weight-semibold: 700;
+  --font-serif: Georgia, serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
+  --shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.03);
+  --shadow-sm: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+  --shadow: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
+  --shadow-md: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
+  --shadow-lg: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
+  --shadow-xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
+  --shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.13);
+  /* the tracking scale follows --tracking-normal */
+  --tracking-normal: -0.01em;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+  --spacing: 0.25rem;
+}
+
+:root[data-skin="sky"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(220 23.0769% 5.098%);
+  --foreground: hsl(210 16.6667% 97.6471%);
+  --card: hsl(220 18.3673% 9.6078%);
+  --card-foreground: hsl(210 16.6667% 97.6471%);
+  --popover: hsl(220 23.0769% 5.098%);
+  --popover-foreground: hsl(210 16.6667% 97.6471%);
+  --primary: hsl(21.8 100% 40%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(217.2414 32.5843% 17.451%);
+  --secondary-foreground: hsl(210 16.6667% 97.6471%);
+  --muted: hsl(217.2414 32.5843% 17.451%);
+  --muted-foreground: hsl(215 20.2247% 65.098%);
+  --accent: hsl(214.4262 100% 11.9608%);
+  --accent-foreground: hsl(0 0% 100%);
+  --destructive: hsl(0 62.8205% 30.5882%);
+  --destructive-foreground: hsl(210 40% 98.0392%);
+  --border: hsl(217.2414 32.5843% 17.451%);
+  --input: hsl(217.2414 32.5843% 17.451%);
+  --ring: hsl(24.8908 100% 55.098%);
+  --chart-1: hsl(24.8908 100% 55.098%);
+  --chart-2: hsl(217.2193 91.2195% 59.8039%);
+  --chart-3: hsl(160.1183 84.0796% 39.4118%);
+  --chart-4: hsl(37.6923 92.126% 50.1961%);
+  --chart-5: hsl(238.7324 83.5294% 66.6667%);
+  --sidebar: hsl(220 23.0769% 5.098%);
+  --sidebar-foreground: hsl(210 16.6667% 97.6471%);
+  --sidebar-primary: hsl(24.8908 100% 55.098%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(0 0% 100%);
+  --sidebar-accent-foreground: hsl(210 23.7288% 23.1373%);
+  --sidebar-border: hsl(217.2414 32.5843% 17.451%);
+  --sidebar-ring: hsl(24.8908 100% 55.098%);
+  --shadow-2xs: 0px 4px 15px 0px hsl(0 0% 0% / 0.2);
+  --shadow-xs: 0px 4px 15px 0px hsl(0 0% 0% / 0.2);
+  --shadow-sm: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
+  --shadow: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
+  --shadow-md: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
+  --shadow-lg: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
+  --shadow-xl: 0px 4px 15px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
+  --shadow-2xl: 0px 4px 15px 0px hsl(0 0% 0% / 1);
+}
+
+:root[data-skin="sky"] body { letter-spacing: var(--tracking-normal); }
+:root[data-skin="sky"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+:root[data-skin="sky"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+:root[data-skin="sky"] .shadow { --tw-shadow: var(--shadow); }
+:root[data-skin="sky"] .shadow-md { --tw-shadow: var(--shadow-md); }
+:root[data-skin="sky"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+:root[data-skin="sky"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/supabase.css b/xgen/runtimes/core/assets/styles/skins/supabase.css
new file mode 100644
index 0000000..85dd4a7
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/supabase.css
@@ -0,0 +1,107 @@
+/* Skin "supabase" (Supabase): the tweakcn preset "supabase" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="supabase" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Outfit (Google Fonts, loaded when the skin is on). */
+[data-skin="supabase"] {
+  --background: hsl(0 0% 99%);
+  --foreground: hsl(0 0% 9%);
+  --card: hsl(0 0% 99%);
+  --card-foreground: hsl(0 0% 9%);
+  --popover: hsl(0 0% 99%);
+  --popover-foreground: hsl(0 0% 32%);
+  --primary: hsl(151 67% 67%);
+  --primary-foreground: hsl(153.3 13% 13.5%);
+  --secondary: hsl(0 0% 99%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 93%);
+  --muted-foreground: hsl(0 0% 12.5%);
+  --accent: hsl(0 0% 93%);
+  --accent-foreground: hsl(0 0% 12.5%);
+  --destructive: hsl(9.9 82% 43.5%);
+  --destructive-foreground: hsl(0 100% 99.4%);
+  --border: hsl(0 0% 87%);
+  --input: hsl(0 0% 96%);
+  --ring: hsl(151 67% 67%);
+  --chart-1: hsl(151 67% 67%);
+  --chart-2: hsl(217.2 91.2% 59.8%);
+  --chart-3: hsl(258.3 89.5% 66.3%);
+  --chart-4: hsl(37.7 92.1% 50.2%);
+  --chart-5: hsl(160.1 84.1% 39.4%);
+  --sidebar: hsl(0 0% 99%);
+  --sidebar-foreground: hsl(0 0% 44%);
+  --sidebar-primary: hsl(151 67% 67%);
+  --sidebar-primary-foreground: hsl(153.3 13% 13.5%);
+  --sidebar-accent: hsl(0 0% 93%);
+  --sidebar-accent-foreground: hsl(0 0% 12.5%);
+  --sidebar-border: hsl(0 0% 87%);
+  --sidebar-ring: hsl(151 67% 67%);
+  --font-sans: Outfit, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+  --tracking-normal: 0.025em;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="supabase"],
+[data-skin="supabase"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 7%);
+  --foreground: hsl(214 32% 91%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(214 32% 91%);
+  --popover: hsl(0 0% 14%);
+  --popover-foreground: hsl(0 0% 66%);
+  --primary: hsl(154.9 100% 19.2%);
+  --primary-foreground: hsl(153 19% 89%);
+  --secondary: hsl(0 0% 14%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 12%);
+  --muted-foreground: hsl(0 0% 64%);
+  --accent: hsl(0 0% 19%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(6.7 60% 20.6%);
+  --destructive-foreground: hsl(12 12% 92%);
+  --border: hsl(0 0% 16%);
+  --input: hsl(0 0% 14%);
+  --ring: hsl(142 69% 58%);
+  --chart-1: hsl(142 69% 58%);
+  --chart-2: hsl(213 94% 68%);
+  --chart-3: hsl(255.1 91.7% 76.3%);
+  --chart-4: hsl(43.3 96.4% 56.3%);
+  --chart-5: hsl(172.5 66% 50.4%);
+  --sidebar: hsl(0 0% 7%);
+  --sidebar-foreground: hsl(0 0% 54%);
+  --sidebar-primary: hsl(154.9 100% 19.2%);
+  --sidebar-primary-foreground: hsl(153 19% 89%);
+  --sidebar-accent: hsl(0 0% 19%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 16%);
+  --sidebar-ring: hsl(142 69% 58%);
+  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
+  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
+  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
+  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
+  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
+}
+
+:root[data-skin="supabase"] body { letter-spacing: var(--tracking-normal); }
+[data-skin="supabase"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="supabase"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="supabase"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="supabase"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="supabase"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="supabase"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/t3-chat.css b/xgen/runtimes/core/assets/styles/skins/t3-chat.css
new file mode 100644
index 0000000..d576806
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/t3-chat.css
@@ -0,0 +1,100 @@
+/* Skin "t3-chat" (T3 Chat): the tweakcn preset "t3-chat" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="t3-chat" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: system. */
+[data-skin="t3-chat"] {
+  --background: hsl(300 33% 97%);
+  --foreground: hsl(296 56% 21%);
+  --card: hsl(300 33% 97%);
+  --card-foreground: hsl(296 56% 21%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(296 56% 21%);
+  --primary: hsl(333 43% 46%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(314.7 61.6% 85.7%);
+  --secondary-foreground: hsl(295.8 40.9% 34.5%);
+  --muted: hsl(311 49% 93%);
+  --muted-foreground: hsl(296 33% 40%);
+  --accent: hsl(314.7 61.6% 85.7%);
+  --accent-foreground: hsl(295.8 40.9% 34.5%);
+  --destructive: hsl(357.7 43.7% 46.7%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(305 61% 84%);
+  --input: hsl(317 44% 83%);
+  --ring: hsl(333.3 71.4% 50.6%);
+  --chart-1: hsl(318.4 70.2% 50%);
+  --chart-2: hsl(272 82% 40%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+  --sidebar: hsl(290 50% 93%);
+  --sidebar-foreground: hsl(327 77% 38%);
+  --sidebar-primary: hsl(240 10% 30%);
+  --sidebar-primary-foreground: hsl(320 47% 96%);
+  --sidebar-accent: hsl(60 7% 97%);
+  --sidebar-accent-foreground: hsl(240 10% 30%);
+  --sidebar-border: hsl(20 7% 92%);
+  --sidebar-ring: hsl(333.3 71.4% 50.6%);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="t3-chat"],
+[data-skin="t3-chat"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(270 15% 13%);
+  --foreground: hsl(272 28% 82%);
+  --card: hsl(270 14% 17%);
+  --card-foreground: hsl(324.5 23.4% 81.6%);
+  --popover: hsl(320 23% 5%);
+  --popover-foreground: hsl(326 33% 96%);
+  --primary: hsl(332 100% 32%);
+  --primary-foreground: hsl(329.4 59.5% 84.5%);
+  --secondary: hsl(274 15% 21%);
+  --secondary-foreground: hsl(270 30% 83%);
+  --muted: hsl(272.7 13.9% 15.5%);
+  --muted-foreground: hsl(268.8 20.7% 76.3%);
+  --accent: hsl(272 20% 27%);
+  --accent-foreground: hsl(326 33% 96%);
+  --destructive: hsl(350.6 50% 12.5%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(327 8% 21%);
+  --input: hsl(312 9% 22%);
+  --ring: hsl(333.3 71.4% 50.6%);
+  --chart-1: hsl(333 43% 46%);
+  --chart-2: hsl(273 55% 55%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar: hsl(309 17% 8%);
+  --sidebar-foreground: hsl(327.3 26.2% 83.5%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(318 21% 12%);
+  --sidebar-accent-foreground: hsl(240 5% 96%);
+  --sidebar-border: hsl(0 0% 0%);
+  --sidebar-ring: hsl(333.3 71.4% 50.6%);
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+[data-skin="t3-chat"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="t3-chat"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="t3-chat"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="t3-chat"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="t3-chat"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="t3-chat"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/skins/violet-bloom.css b/xgen/runtimes/core/assets/styles/skins/violet-bloom.css
new file mode 100644
index 0000000..0eda31f
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/skins/violet-bloom.css
@@ -0,0 +1,107 @@
+/* Skin "violet-bloom" (Violet Bloom): the tweakcn preset "violet-bloom" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.
+   On when data-skin="violet-bloom" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;
+   the spacing scale stays the kit's 0.25rem. Fonts: Plus Jakarta Sans (Google Fonts, loaded when the skin is on). */
+[data-skin="violet-bloom"] {
+  --background: hsl(0 0% 99%);
+  --foreground: hsl(0 0% 0%);
+  --card: hsl(0 0% 99%);
+  --card-foreground: hsl(0 0% 0%);
+  --popover: hsl(0 0% 99%);
+  --popover-foreground: hsl(0 0% 0%);
+  --primary: hsl(258 100% 60%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(214 24% 94%);
+  --secondary-foreground: hsl(0 0% 3%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 32%);
+  --accent: hsl(213 100% 96%);
+  --accent-foreground: hsl(216.3 76% 49%);
+  --destructive: hsl(357.3 64.7% 53.3%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(240 17% 92%);
+  --input: hsl(0 0% 92%);
+  --ring: hsl(0 0% 0%);
+  --chart-1: hsl(148.1 53.4% 53.7%);
+  --chart-2: hsl(258 100% 60%);
+  --chart-3: hsl(25 98% 58%);
+  --chart-4: hsl(217.1 76.7% 54.5%);
+  --chart-5: hsl(0 0% 45%);
+  --sidebar: hsl(210 43% 97%);
+  --sidebar-foreground: hsl(0 0% 0%);
+  --sidebar-primary: hsl(0 0% 0%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(0 0% 92%);
+  --sidebar-accent-foreground: hsl(0 0% 0%);
+  --sidebar-border: hsl(0 0% 92%);
+  --sidebar-ring: hsl(0 0% 0%);
+  --font-sans: Plus Jakarta Sans, sans-serif;
+  --font-serif: Lora, serif;
+  --font-mono: IBM Plex Mono, monospace;
+  --radius: 1.4rem;
+  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
+  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
+  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
+  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
+  --tracking-normal: -0.025em;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}
+
+:is(.dark, [data-theme="dark"]) [data-skin="violet-bloom"],
+[data-skin="violet-bloom"]:is(.dark, [data-theme="dark"]) {
+  --background: hsl(225 7% 11%);
+  --foreground: hsl(0 0% 94%);
+  --card: hsl(228 7% 14%);
+  --card-foreground: hsl(0 0% 94%);
+  --popover: hsl(228 7% 14%);
+  --popover-foreground: hsl(0 0% 94%);
+  --primary: hsl(258.1 89% 64.3%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(227 10% 18%);
+  --secondary-foreground: hsl(0 0% 94%);
+  --muted: hsl(227 10% 18%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(217.2 32.6% 17.5%);
+  --accent-foreground: hsl(208.2 100% 73.7%);
+  --destructive: hsl(358.2 55.3% 53.5%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(223 6% 21%);
+  --input: hsl(223 6% 21%);
+  --ring: hsl(258 100% 68%);
+  --chart-1: hsl(142 69% 58%);
+  --chart-2: hsl(258 100% 68%);
+  --chart-3: hsl(0 94% 82%);
+  --chart-4: hsl(217.5 87.6% 65.3%);
+  --chart-5: hsl(0 0% 63%);
+  --sidebar: hsl(240 4% 9%);
+  --sidebar-foreground: hsl(0 0% 94%);
+  --sidebar-primary: hsl(258 100% 68%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(227 10% 18%);
+  --sidebar-accent-foreground: hsl(258 100% 68%);
+  --sidebar-border: hsl(223 6% 21%);
+  --sidebar-ring: hsl(258 100% 68%);
+  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
+  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
+  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
+  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
+}
+
+:root[data-skin="violet-bloom"] body { letter-spacing: var(--tracking-normal); }
+[data-skin="violet-bloom"] .shadow-xs { --tw-shadow: var(--shadow-xs); }
+[data-skin="violet-bloom"] .shadow-sm { --tw-shadow: var(--shadow-sm); }
+[data-skin="violet-bloom"] .shadow { --tw-shadow: var(--shadow); }
+[data-skin="violet-bloom"] .shadow-md { --tw-shadow: var(--shadow-md); }
+[data-skin="violet-bloom"] .shadow-lg { --tw-shadow: var(--shadow-lg); }
+[data-skin="violet-bloom"] .shadow-xl { --tw-shadow: var(--shadow-xl); }
diff --git a/xgen/runtimes/core/assets/styles/theme.css b/xgen/runtimes/core/assets/styles/theme.css
new file mode 100644
index 0000000..3276e7c
--- /dev/null
+++ b/xgen/runtimes/core/assets/styles/theme.css
@@ -0,0 +1,129 @@
+@import "tailwindcss";
+
+/* shadcn/ui neutral theme (Tailwind v4, written as hsl() for old browsers; same colours as the oklch values published at https://ui.shadcn.com/docs/theming
+   ("Default Theme CSS", base color neutral). Dark mode: the .dark class or data-theme="dark" on an ancestor. */
+@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
+
+/* The one corner token. Plain `rounded` reads the bare --radius theme key, so every corner of the kit follows it
+   (shadcn keeps --radius in :root; here it sits in @theme so that `rounded` resolves to it; same value, 0.625rem). */
+@theme {
+  --radius: 0.625rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 4%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 4%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 4%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 43.5%);
+  --accent: hsl(0 0% 96%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0.6 88.4% 52.5%);
+  --border: hsl(0 0% 90%);
+  --input: hsl(0 0% 90%);
+  --ring: hsl(0 0% 63%);
+  --chart-1: hsl(18 100% 48%);
+  --chart-2: hsl(174.7 100% 29.5%);
+  --chart-3: hsl(196 72% 23%);
+  --chart-4: hsl(43.6 100% 50%);
+  --chart-5: hsl(36.3 100% 49.7%);
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(0 0% 4%);
+  --sidebar-primary: hsl(0 0% 9%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 96%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(0 0% 90%);
+  --sidebar-ring: hsl(0 0% 63%);
+}
+
+:is(.dark, [data-theme="dark"]) {
+  --background: hsl(0 0% 4%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(0 0% 9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 90%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 15%);
+  --muted-foreground: hsl(0 0% 63%);
+  --accent: hsl(0 0% 15%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(356.1 62.4% 52%);
+  --border: hsl(0 0% 100% / 10%);
+  --input: hsl(0 0% 100% / 15%);
+  --ring: hsl(0 0% 45%);
+  --chart-1: hsl(225.3 84.1% 49%);
+  --chart-2: hsl(160 100% 37%);
+  --chart-3: hsl(36.3 100% 49.7%);
+  --chart-4: hsl(273.3 100% 63.8%);
+  --chart-5: hsl(345 100% 56%);
+  --sidebar: hsl(0 0% 9%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(225.3 84.1% 49%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 15%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 100% / 10%);
+  --sidebar-ring: hsl(0 0% 45%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/xgen/runtimes/core/assets/ts/a11y/dismiss.ts b/xgen/runtimes/core/assets/ts/a11y/dismiss.ts
new file mode 100644
index 0000000..d40fa0c
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/a11y/dismiss.ts
@@ -0,0 +1,30 @@
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+export type DismissReason = "escape" | "outside";
+const stack: object[] = [];   // topmost dismissable layer handles Escape first (menu inside off-canvas sidebar, …)
+
+/** Escape and pointer-down outside the node call onDismiss. Returns the cleanup. */
+export function dismissable(node: HTMLElement, opts: () => { onDismiss: (reason: DismissReason) => void; ignore?: () => (Element | null | undefined)[]; outside?: boolean }): () => void {
+  {
+    const layer = {};
+    stack.push(layer);
+    const { onDismiss, ignore = () => [], outside = true } = opts();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || e.defaultPrevented || stack[stack.length - 1] !== layer) return;
+      e.preventDefault(); e.stopPropagation();
+      onDismiss("escape");
+    };
+    const onDown = (e: PointerEvent) => {
+      if (!outside || stack[stack.length - 1] !== layer) return;
+      const t = e.target as Node | null;
+      if (!t || node.contains(t) || ignore().some((el) => el?.contains(t))) return;
+      onDismiss("outside");
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onDown, true);
+      const i = stack.indexOf(layer); if (i >= 0) stack.splice(i, 1);
+    };
+  }
+}
diff --git a/xgen/runtimes/core/assets/ts/a11y/focus-trap.ts b/xgen/runtimes/core/assets/ts/a11y/focus-trap.ts
new file mode 100644
index 0000000..3d87a1a
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/a11y/focus-trap.ts
@@ -0,0 +1,18 @@
+// Framework-free: the function takes the node and returns the cleanup. Svelte: call it from an action or an effect; React: call it in an effect.
+import { focusables } from "./focusable";
+
+/** Tab/Shift+Tab cycle inside `node`; on cleanup focus returns to the element focused before. */
+export function trapFocus(node: HTMLElement): () => void {
+  const previous = document.activeElement as HTMLElement | null;
+  if (!node.contains(previous)) queueMicrotask(() => focusables(node)[0]?.focus());
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key !== "Tab") return;
+    const items = focusables(node);
+    if (!items.length) { e.preventDefault(); return; }
+    const first = items[0], last = items[items.length - 1], cur = document.activeElement;
+    if (e.shiftKey && (cur === first || !node.contains(cur))) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && (cur === last || !node.contains(cur))) { e.preventDefault(); first.focus(); }
+  };
+  node.addEventListener("keydown", onKey);
+  return () => { node.removeEventListener("keydown", onKey); /* after the page is no longer inert */ requestAnimationFrame(() => { if (previous?.isConnected) previous.focus(); }); };
+}
diff --git a/xgen/runtimes/core/assets/ts/a11y/focusable.ts b/xgen/runtimes/core/assets/ts/a11y/focusable.ts
new file mode 100644
index 0000000..dcd3e60
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/a11y/focusable.ts
@@ -0,0 +1,7 @@
+// Small headless helpers shared by the interactive primitives (menus, dialogs, tabs, off-canvas sidebar).
+export const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+/** visible, tabbable descendants of `root` in DOM order */
+export function focusables(root: HTMLElement): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((el) => !el.closest("[inert]") && el.getClientRects().length > 0 && getComputedStyle(el).visibility !== "hidden");
+}
diff --git a/xgen/runtimes/core/assets/ts/a11y/index.ts b/xgen/runtimes/core/assets/ts/a11y/index.ts
new file mode 100644
index 0000000..c3f5c07
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/a11y/index.ts
@@ -0,0 +1,5 @@
+export { FOCUSABLE, focusables } from "./focusable";
+export { moveFocus, typeahead, type RovingOptions } from "./roving";
+export { lockScroll } from "./scroll-lock";
+export { dismissable, type DismissReason } from "./dismiss";
+export { trapFocus } from "./focus-trap";
diff --git a/xgen/runtimes/core/assets/ts/a11y/roving.ts b/xgen/runtimes/core/assets/ts/a11y/roving.ts
new file mode 100644
index 0000000..915e7a6
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/a11y/roving.ts
@@ -0,0 +1,39 @@
+// Arrow-key navigation over a list of focusable items (menus, listboxes, tab lists, trees).
+export type RovingOptions = { orientation?: "vertical" | "horizontal" | "both"; loop?: boolean; activate?: boolean };
+
+/** Handles ArrowUp/Down/Left/Right, Home, End. Returns true when the key was consumed. */
+export function moveFocus(e: KeyboardEvent, items: HTMLElement[], { orientation = "vertical", loop = true, activate = false }: RovingOptions = {}): boolean {
+  if (!items.length || e.altKey || e.ctrlKey || e.metaKey) return false;
+  const prev = orientation !== "horizontal" ? ["ArrowUp"] : [];
+  const next = orientation !== "horizontal" ? ["ArrowDown"] : [];
+  if (orientation !== "vertical") { prev.push("ArrowLeft"); next.push("ArrowRight"); }
+  const cur = items.indexOf(document.activeElement as HTMLElement);
+  let idx = -1;
+  if (next.includes(e.key)) idx = cur < 0 ? 0 : cur + 1;
+  else if (prev.includes(e.key)) idx = cur < 0 ? items.length - 1 : cur - 1;
+  else if (e.key === "Home") idx = 0;
+  else if (e.key === "End") idx = items.length - 1;
+  else return false;
+  if (idx >= items.length) idx = loop ? 0 : items.length - 1;
+  if (idx < 0) idx = loop ? items.length - 1 : 0;
+  e.preventDefault();
+  const el = items[idx];
+  el.focus();
+  if (activate) el.click();
+  return true;
+}
+
+/** type-ahead: focus the next item whose text starts with the typed characters (reset after 600 ms) */
+export function typeahead() {
+  let buf = "", t: ReturnType<typeof setTimeout> | undefined;
+  return (e: KeyboardEvent, items: HTMLElement[]): boolean => {
+    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey || e.key === " ") return false;
+    buf += e.key.toLowerCase();
+    clearTimeout(t); t = setTimeout(() => (buf = ""), 600);
+    const start = Math.max(0, items.indexOf(document.activeElement as HTMLElement) + (buf.length === 1 ? 1 : 0));
+    const ordered = [...items.slice(start), ...items.slice(0, start)];
+    const hit = ordered.find((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(buf));
+    if (hit) { hit.focus(); e.preventDefault(); return true; }
+    return false;
+  };
+}
diff --git a/xgen/runtimes/core/assets/ts/a11y/scroll-lock.ts b/xgen/runtimes/core/assets/ts/a11y/scroll-lock.ts
new file mode 100644
index 0000000..8f22544
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/a11y/scroll-lock.ts
@@ -0,0 +1,22 @@
+// Reference-counted page scroll lock (off-canvas sidebar, modal dialog). Compensates the scrollbar width on desktop.
+let count = 0;
+let saved = { overflow: "", paddingRight: "" };
+
+export function lockScroll(): () => void {
+  const root = document.documentElement;
+  if (count++ === 0) {
+    const sw = window.innerWidth - root.clientWidth;
+    saved = { overflow: root.style.overflow, paddingRight: root.style.paddingRight };
+    root.style.overflow = "hidden";
+    if (sw > 0) root.style.paddingRight = `${sw}px`;
+    root.setAttribute("data-scroll-locked", "");
+  }
+  let released = false;
+  return () => {
+    if (released) return; released = true;
+    if (--count === 0) {
+      root.style.overflow = saved.overflow; root.style.paddingRight = saved.paddingRight;
+      root.removeAttribute("data-scroll-locked");
+    }
+  };
+}
diff --git a/xgen/runtimes/core/assets/ts/cn.ts b/xgen/runtimes/core/assets/ts/cn.ts
new file mode 100644
index 0000000..173c2fd
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/cn.ts
@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge class values. Caller-supplied classes win over recipe classes. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/xgen/runtimes/core/assets/ts/env.ts b/xgen/runtimes/core/assets/ts/env.ts
new file mode 100644
index 0000000..edee7c9
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/env.ts
@@ -0,0 +1,9 @@
+export function isDevEnv(): boolean {
+  try {
+    const env = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
+    if (env && typeof env.DEV === "boolean") return env.DEV;
+  } catch {
+    // import.meta may be unavailable in some contexts
+  }
+  return false;
+}
diff --git a/xgen/runtimes/core/assets/ts/expr.ts b/xgen/runtimes/core/assets/ts/expr.ts
new file mode 100644
index 0000000..51f0391
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/expr.ts
@@ -0,0 +1,98 @@
+/**
+ * Tiny attribute-logic helpers used by generated components. One
+ * implementation per runtime family keeps every default-resolution decision
+ * table byte-identical across React, Svelte, and Vue (mirrors `expr.go`).
+ */
+
+export const trimStr = (v: string | number | null | undefined): string =>
+  v === null || v === undefined ? "" : String(v).trim();
+
+export const isSetStr = (v: string | null | undefined): boolean => trimStr(v) !== "";
+
+export const isSetNum = (v: number | null | undefined): boolean => (v ?? 0) > 0;
+
+/**
+ * `trim(v) === "" ? fallback : trim(v)` — DefaultInputType-style defaults.
+ * Generic so enum-typed props keep their literal union through the default.
+ */
+export const defaultIfEmpty = <T extends string>(v: T | null | undefined, fallback: T): T => {
+  const t = trimStr(v) as T;
+  return t === "" ? fallback : t;
+};
+
+/** Whitelist: returns `trim(v)` when in `allowed`, otherwise `fallback`. */
+export const oneOfOr = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v) as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+export const oneOfOrLower = <T extends string>(
+  v: string | null | undefined,
+  fallback: T,
+  ...allowed: T[]
+): T => {
+  const t = trimStr(v).toLowerCase() as T;
+  return allowed.includes(t) ? t : fallback;
+};
+
+/** Decision table: `mapping[trim(v)] ?? fallback`. */
+export const mapOr = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v)] ?? fallback;
+
+export const mapOrLower = <T extends string>(
+  v: string | null | undefined,
+  mapping: Record<string, T>,
+  fallback: T
+): T => mapping[trimStr(v).toLowerCase()] ?? fallback;
+
+/** Integer decision table: `mapping[v] ?? fallback`. */
+export const intMapOr = <T extends string>(
+  v: number | null | undefined,
+  mapping: Record<number, T>,
+  fallback: T
+): T => mapping[v ?? 0] ?? fallback;
+
+/** Null-safe string equality (both sides normalized to ""). */
+export const eqStr = (a: string | null | undefined, b: string | null | undefined): boolean =>
+  (a ?? "") === (b ?? "");
+
+/** ARIA state stringification: always "true"/"false", never omitted. */
+export const boolStr = (v: boolean | null | undefined): "true" | "false" =>
+  v ? "true" : "false";
+
+/** Concatenation of trimmed parts (icon `Prefix + Name`). */
+export const concatTrim = (...parts: (string | null | undefined)[]): string =>
+  parts.map(trimStr).join("");
+
+/** Omit-if-empty attribute value: `""` → `undefined` so the attr is dropped. */
+export const orUndef = (v: string | null | undefined): string | undefined => {
+  const t = trimStr(v);
+  return t === "" ? undefined : String(v);
+};
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+/** h1–h6 from a heading level; 0/undefined/out-of-range default to h2. */
+export const titleTag = (order: HeadingLevel | number | null | undefined): string => {
+  switch (order) {
+    case 1:
+      return "h1";
+    case 3:
+      return "h3";
+    case 4:
+      return "h4";
+    case 5:
+      return "h5";
+    case 6:
+      return "h6";
+    default:
+      return "h2";
+  }
+};
diff --git a/xgen/runtimes/core/assets/ts/format.ts b/xgen/runtimes/core/assets/ts/format.ts
new file mode 100644
index 0000000..8456922
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/format.ts
@@ -0,0 +1,68 @@
+// Text and number formatting shared by every generated organism and screen. Pure functions, no runtime dependency.
+
+/** fills {0}, {1}... of a content template */
+export function tpl(template: string | undefined, ...values: Array<string | number | undefined>): string {
+  return (template ?? "").replace(/\{(\d+)\}/g, (_m, i: string) => String(values[Number(i)] ?? ""));
+}
+
+const nf = new Intl.NumberFormat("en-US");
+export function fmtNumber(n: number): string {
+  return nf.format(n);
+}
+
+/** digits of the minor unit (ISO 4217): cents for most currencies, none for JPY and KRW */
+export function minorDigits(currency: string): number {
+  return currency === "JPY" || currency === "KRW" ? 0 : 2;
+}
+
+const moneyCache = new Map<string, Intl.NumberFormat>();
+/** money in integer minor units (Codex v0.4: 1250 = 12.50 USD) -> "$12.50"; whole amounts drop the fraction: 1499_00 -> "$1,499" */
+export function fmtMoney(minor: number, currency: string): string {
+  const d = minorDigits(currency);
+  const cents = Math.round(minor);
+  const frac = d > 0 && cents % 10 ** d !== 0 ? d : 0;
+  const key = `${currency}:${frac}`;
+  let f = moneyCache.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: frac, maximumFractionDigits: frac });
+    moneyCache.set(key, f);
+  }
+  return f.format(cents / 10 ** d);
+}
+
+/** a content word by key (the status of a record -> its label); the key itself when the dictionary has no entry */
+export function at(dict: Record<string, string> | undefined, key: string): string {
+  return dict?.[key] ?? key;
+}
+
+/** the page numbers a pager shows: the first, the last and the neighbours of the current page; null is a gap */
+export function pageWindow(page: number, pages: number): (number | null)[] {
+  const keep = new Set([1, pages, page - 1, page, page + 1].filter((n) => n >= 1 && n <= pages));
+  const out: (number | null)[] = [];
+  let prev = 0;
+  for (const n of [...keep].sort((a, b) => a - b)) {
+    if (n - prev > 1) out.push(null);
+    out.push(n);
+    prev = n;
+  }
+  return out;
+}
+
+/** a responsive column variant of Grid capped by the number of items, so no column stays empty: ("1-4", 3) -> "1-3", ("2-6", 4) -> "2-4" */
+export function fitCols(cols: string, n: number): string {
+  const m = /^(\d+)-(\d+)$/.exec(cols);
+  if (!m) return cols;
+  const lo = Number(m[1]), hi = Number(m[2]);
+  if (n >= hi) return cols;
+  const top = Math.max(lo, n);
+  const known = ["1-2", "1-3", "1-4", "2-3", "2-4", "2-6", "3-6"];
+  for (let h = top; h > lo; h--) if (known.includes(`${lo}-${h}`)) return `${lo}-${h}`;
+  return String(Math.min(lo, Math.max(n, 1)));
+}
+
+/** a label of segments joined by ", " without a segment equal (case-insensitive) to the one before it:
+ *  "Footer, Footer, Centered" -> "Footer, Centered" */
+export function uniqLabel(label: string | undefined): string {
+  const parts = (label ?? "").split(", ");
+  return parts.filter((s, i) => i === 0 || s.toLowerCase() !== (parts[i - 1] ?? "").toLowerCase()).join(", ");
+}
diff --git a/xgen/runtimes/core/assets/ts/index.ts b/xgen/runtimes/core/assets/ts/index.ts
new file mode 100644
index 0000000..04e7ced
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/index.ts
@@ -0,0 +1,7 @@
+export { cn } from "./cn";
+export { isDevEnv } from "./env";
+export { variants, type VariantFn, type VariantKey, type VariantSelection, type VariantTable } from "./variants";
+export { TagGroup, isAllowedTag, resolveTag } from "./tags";
+export * from "./expr";
+export { tpl, fmtNumber, fmtMoney, minorDigits, at, pageWindow, fitCols, uniqLabel } from "./format";
+export * from "./a11y";
diff --git a/xgen/runtimes/core/assets/ts/tags.ts b/xgen/runtimes/core/assets/ts/tags.ts
new file mode 100644
index 0000000..dc0ce25
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/tags.ts
@@ -0,0 +1,122 @@
+// Code generated by tagsgen. DO NOT EDIT.
+
+import { isDevEnv } from "./env";
+
+export const TagGroup = {
+  Layout: "Layout",
+  BoxAllowed: "BoxAllowed",
+  BlockText: "BlockText",
+  Inline: "Inline",
+  Heading: "Heading",
+  List: "List",
+  ListItem: "ListItem",
+  Form: "Form",
+  FormControl: "FormControl",
+  FormLabel: "FormLabel",
+  Table: "Table",
+  TableSection: "TableSection",
+  TableRow: "TableRow",
+  TableCell: "TableCell",
+  TableColumn: "TableColumn",
+  Media: "Media",
+  Disclosure: "Disclosure",
+  Container: "Container",
+  Stack: "Stack",
+  Group: "Group",
+  Text: "Text",
+} as const;
+
+export type TagGroup = (typeof TagGroup)[keyof typeof TagGroup];
+
+const layoutTags = new Set(["div", "section", "article", "aside", "header", "footer", "main", "nav", "figure", "search", "hgroup"]);
+const boxAllowedTags = new Set(["div"]);
+const blockTextTags = new Set(["p", "blockquote", "figcaption", "address", "pre"]);
+const inlineTags = new Set(["span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"]);
+const headingTags = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+const listTags = new Set(["ul", "ol", "dl", "menu"]);
+const listItemTags = new Set(["li", "dt", "dd"]);
+const formTags = new Set(["form", "fieldset"]);
+const formControlTags = new Set(["input", "textarea", "select", "button", "option", "optgroup", "datalist", "output", "meter", "progress"]);
+const formLabelTags = new Set(["label", "legend"]);
+const tableTags = new Set(["table"]);
+const tableSectionTags = new Set(["thead", "tbody", "tfoot"]);
+const tableRowTags = new Set(["tr"]);
+const tableCellTags = new Set(["th", "td"]);
+const tableColumnTags = new Set(["colgroup", "col"]);
+const mediaTags = new Set(["img", "picture", "source"]);
+const disclosureTags = new Set(["details", "summary"]);
+const containerTags = new Set(["div", "main", "section"]);
+const stackTags = new Set(["div", "ul", "ol"]);
+const groupTags = new Set(["div", "fieldset", "dl"]);
+
+function oneOf(tag: string, options: Set<string>): boolean {
+  return options.has(tag);
+}
+
+const warnedTagFallbacks = new Set<string>();
+
+function warnTagFallback(tag: string, fallback: string, group: TagGroup): void {
+  if (!isDevEnv()) return;
+  const key = `${group}:${tag}:${fallback}`;
+  if (warnedTagFallbacks.has(key)) return;
+  warnedTagFallbacks.add(key);
+  console.warn(`[resolveTag] disallowed tag "${tag}" for group "${group}", fallback "${fallback}" used.`);
+}
+
+export function isAllowedTag(tag: string, group: TagGroup): boolean {
+  const t = tag.trim().toLowerCase();
+  switch (group) {
+    case TagGroup.Layout:
+      return oneOf(t, layoutTags);
+    case TagGroup.BoxAllowed:
+      return oneOf(t, boxAllowedTags);
+    case TagGroup.BlockText:
+      return oneOf(t, blockTextTags);
+    case TagGroup.Inline:
+      return oneOf(t, inlineTags);
+    case TagGroup.Heading:
+      return oneOf(t, headingTags);
+    case TagGroup.List:
+      return oneOf(t, listTags);
+    case TagGroup.ListItem:
+      return oneOf(t, listItemTags);
+    case TagGroup.Form:
+      return oneOf(t, formTags);
+    case TagGroup.FormControl:
+      return oneOf(t, formControlTags);
+    case TagGroup.FormLabel:
+      return oneOf(t, formLabelTags);
+    case TagGroup.Table:
+      return oneOf(t, tableTags);
+    case TagGroup.TableSection:
+      return oneOf(t, tableSectionTags);
+    case TagGroup.TableRow:
+      return oneOf(t, tableRowTags);
+    case TagGroup.TableCell:
+      return oneOf(t, tableCellTags);
+    case TagGroup.TableColumn:
+      return oneOf(t, tableColumnTags);
+    case TagGroup.Media:
+      return oneOf(t, mediaTags);
+    case TagGroup.Disclosure:
+      return oneOf(t, disclosureTags);
+    case TagGroup.Container:
+      return oneOf(t, containerTags);
+    case TagGroup.Stack:
+      return oneOf(t, stackTags);
+    case TagGroup.Group:
+      return oneOf(t, groupTags);
+    case TagGroup.Text:
+      return blockTextTags.has(t) || inlineTags.has(t);
+    default:
+      return false;
+  }
+}
+
+export function resolveTag(tag: string | undefined, fallback: string, group: TagGroup): string {
+  const t = tag?.trim().toLowerCase() ?? "";
+  if (!t) return fallback;
+  if (isAllowedTag(t, group)) return t;
+  warnTagFallback(t, fallback, group);
+  return fallback;
+}
diff --git a/xgen/runtimes/core/assets/ts/variants.ts b/xgen/runtimes/core/assets/ts/variants.ts
new file mode 100644
index 0000000..a003a58
--- /dev/null
+++ b/xgen/runtimes/core/assets/ts/variants.ts
@@ -0,0 +1,59 @@
+import { cn } from "./cn";
+import { isDevEnv } from "./env";
+
+/**
+ * A shadcn/cva-style variant table, without the dependency (same idea as `cva` from class-variance-authority).
+ *
+ *   const badgeVariants = variants({
+ *     base: "inline-flex items-center",
+ *     variants: { size: { sm: "h-5 px-2", lg: "h-8 px-3" } },
+ *     defaultVariants: { size: "sm" },
+ *     compoundVariants: [{ size: "lg", shape: "rounded", class: "rounded-lg" }],
+ *   });
+ *   badgeVariants({ size: "lg" }); // "inline-flex items-center h-8 px-3"
+ *
+ * Classes come in this order: base, each variant in table order, then the matching compound variants.
+ * tailwind-merge (`cn`) resolves conflicts, the later class wins. A compound value may list alternatives: "32|lg".
+ */
+export type VariantTable = {
+  base?: string;
+  variants: Record<string, Record<string, string>>;
+  defaultVariants: Record<string, string>;
+  compoundVariants?: Array<{ class: string } & Record<string, string>>;
+};
+
+/** the props a table accepts: one optional value per variant */
+export type VariantSelection<T extends VariantTable> = {
+  [K in keyof T["variants"]]?: (keyof T["variants"][K] & string) | undefined;
+};
+
+/** a variant function: call it with the selected values, read `.table` for the types */
+export type VariantFn<T extends VariantTable> = ((selection?: VariantSelection<T>) => string) & { table: T };
+
+/** the values of one variant of a table: `VariantKey<typeof badgeVariants, "size">` is `"sm" | "lg"` */
+export type VariantKey<F extends { table: VariantTable }, K extends keyof F["table"]["variants"]> = Exclude<
+  keyof F["table"]["variants"][K] & string,
+  ""
+>;
+
+export function variants<T extends VariantTable>(table: T): VariantFn<T> {
+  const pick = (selection: Record<string, string | undefined>, key: string): string =>
+    (selection[key] ?? "").trim() || (table.defaultVariants[key] ?? "").trim();
+  const fn = (selection: VariantSelection<T> = {}): string => {
+    const sel = selection as Record<string, string | undefined>;
+    const parts: string[] = [table.base ?? ""];
+    for (const [key, choices] of Object.entries(table.variants)) {
+      const choice = pick(sel, key);
+      const cls = choices[choice];
+      // a typo in development is an error; in production the unknown value is dropped
+      if (cls === undefined && isDevEnv()) throw new Error(`[variants] unknown value "${choice}" for "${key}"`);
+      parts.push(cls ?? "");
+    }
+    for (const compound of table.compoundVariants ?? []) {
+      const matches = Object.entries(compound).every(([k, want]) => k === "class" || want.split("|").includes(pick(sel, k)));
+      if (matches) parts.push(compound.class);
+    }
+    return cn(...parts.map((p) => p.trim()).filter(Boolean));
+  };
+  return Object.assign(fn, { table });
+}
diff --git a/xgen/runtimes/core/package.json b/xgen/runtimes/core/package.json
new file mode 100644
index 0000000..77ce737
--- /dev/null
+++ b/xgen/runtimes/core/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@ui8kit/xgen-runtime-core",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Shared emitter helpers (types, shared module, expression printer) and the TypeScript runtime support files copied into generated packages.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-spec": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/runtimes/core/src/app-common.ts b/xgen/runtimes/core/src/app-common.ts
new file mode 100644
index 0000000..becf69a
--- /dev/null
+++ b/xgen/runtimes/core/src/app-common.ts
@@ -0,0 +1,253 @@
+// Pieces of the host apps and of the shared app package that do not depend on the runtime.
+// A landing is data: a screen spec. Two host apps (one per runtime) serve every screen by name: /<key>/#/<route>.
+// What both hosts read (dictionary, fixtures, menus, url core, theme, skins, the screen registry) is emitted once, in SHARED_DIR.
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import type { AppSpec, CollectionFile, Dictionary, ScreenSpec, TaxonomyFile } from "@ui8kit/xgen-screens";
+import { BANNER, type GeneratedFile } from "./common";
+
+/** the package every host imports content, data, menus and the url core from */
+export const SHARED = "@ui8kit/app-shared";
+export const SHARED_DIR = "packages/shared/app";
+/** folder of generated sources inside a host app (DO NOT EDIT); src/ is the front controller */
+export const HOST_GEN = "xgen";
+/** the name of a screen in a URL: its id without `screen.` */
+export const screenKey = (id: string): string => id.replace(/^screen\./, "");
+/** the look of a screen: every screen uses the default skin (the shadcn neutral theme); skins.css holds no extra skins */
+export const screenSkin = (_id: string): "default" => "default";
+
+export const assetsDir = join(import.meta.dir, "..", "assets");
+export const readAsset = (...p: string[]): string => readFileSync(join(assetsDir, ...p), "utf8");
+
+export const withBanner = (src: string): string => `// ${BANNER}\n${src}`;
+
+export const jsonFile = (path: string, data: Record<string, unknown>): GeneratedFile => ({ path, contents: JSON.stringify({ "//": BANNER, ...data }, null, 2) + "\n" });
+
+export function indexHtml(app: AppSpec): string {
+  return `<!doctype html>
+<!-- ${BANNER} -->
+<html lang="${app.locale}" data-theme="${app.theme === "dark" ? "dark" : "light"}">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="data:," />
+    <title>${app.title}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.${"__EXT__"}"></script>
+  </body>
+</html>
+`;
+}
+
+export const appCss = (uiPackage: string): GeneratedFile => ({
+  path: "src/app.css",
+  contents: `/* ${BANNER} */\n@import "${uiPackage}/styles/index.css";\n@import "${SHARED}/styles/skins.css";\n`,
+});
+
+export const viteConfig = (imports: string[], plugins: string, app: AppSpec): GeneratedFile => ({
+  path: "vite.config.ts",
+  contents: withBanner(`import tailwindcss from "@tailwindcss/vite";\n${imports.join("\n")}\nimport { defineConfig } from "vite";\n\nexport default defineConfig({\n  plugins: [tailwindcss(), ${plugins}],\n  server: { host: "127.0.0.1", port: ${app.port}, strictPort: true, proxy: { "/__inspect": "http://127.0.0.1:5190" } },\n  preview: { host: "127.0.0.1", port: ${app.port}, strictPort: true },\n});\n`),
+});
+
+/** the url runtime of a host (runtime specific), reading the shared core */
+export const hostUrlAsset = (file: string, contents: string): GeneratedFile => ({
+  path: `${HOST_GEN}/runtime/${file}`,
+  contents: withBanner(contents.replace(/from "\.\/core"/g, `from "${SHARED}/runtime/core"`)),
+});
+
+/** the dictionary path `a.b-c.d` as a TS member chain of `ui` */
+const uiPath = (key: string): string => "ui" + key.split(".").map((k) => (/^[A-Za-z_$][\w$]*$/.test(k) ? `.${k}` : `[${JSON.stringify(k)}]`)).join("");
+
+/** the menu of one screen, from `menu` of its spec: the links (id, label, href, area of the route) and the current one per area */
+export function navFile(s: ScreenSpec): GeneratedFile {
+  const lines = (s.menu ?? []).map((r) => {
+    const area = s.routes.find((x) => x.path === r.path)?.area ?? r.id;
+    return `  { id: ${JSON.stringify(r.id)}, name: ${uiPath(r.titleKey)}, icon: ${JSON.stringify(r.icon ?? "link")}, href: ${JSON.stringify(r.path === "" ? "#/" : `#/${r.path}`)}, area: ${JSON.stringify(area)} },`;
+  });
+  return {
+    path: `src/nav/${s.name}.ts`,
+    contents: withBanner([
+      `// The menu of ${s.id}, from "menu" of its screen spec`,
+      `import { ui } from "../content";`,
+      ``,
+      `export const NAV = [`,
+      ...lines,
+      `];`,
+      ``,
+      `/** the links of the menu and the id of the one that leads to the area on screen ("" when none does) */`,
+      `export const navOf = (area: string): { links: typeof NAV; current: string } => ({ links: NAV, current: NAV.find((l) => l.area === area)?.id ?? "" });`,
+      ``,
+    ].join("\n")),
+  };
+}
+
+/** the files of the skins folder: one CSS file per skin, the tile reset (base.css), the scoped default, and NOTICE.md (sources and licences) */
+const skinFiles = (): string[] => readdirSync(join(assetsDir, "styles", "skins")).filter((f) => f.endsWith(".css") || f === "NOTICE.md").sort();
+
+/** the Google fonts each skin loads when it is on, from skins/skins.json (the tweakcn import tool writes it; sky is ours) */
+function skinFontsFile(): GeneratedFile {
+  const skins = JSON.parse(readAsset("styles", "skins", "skins.json")) as Record<string, { fonts: string[] }>;
+  const rows = Object.entries(skins).filter(([, v]) => v.fonts.length).map(([k, v]) => `  ${JSON.stringify(k)}: ${JSON.stringify(v.fonts)},`);
+  return {
+    path: "src/runtime/skin-fonts.ts",
+    contents: withBanner([
+      `// The Google fonts a skin needs (family:axes for the css2 API), loaded only while that skin is on; the default skin uses the system font.`,
+      `// From xgen/runtimes/core/assets/styles/skins/skins.json.`,
+      `export const SKIN_FONTS: Record<string, readonly string[]> = {`,
+      ...rows,
+      `};`,
+      ``,
+    ].join("\n")),
+  };
+}
+
+function registryFile(screens: ScreenSpec[]): GeneratedFile {
+  const rows = screens.map((s) => `  { key: ${JSON.stringify(screenKey(s.id))}, id: ${JSON.stringify(s.id)}, name: ${JSON.stringify(s.name)}, skin: ${JSON.stringify(screenSkin(s.id))} },`);
+  return {
+    path: "src/screens.ts",
+    contents: withBanner([
+      `// The screens the host apps serve: /<key>/#/<route> (or ?screen=<key>). One entry per screen spec of xgen/specs/screens.`,
+      `import { initTheme, type ThemeMode } from "./runtime/theme";`,
+      `import { applyOverrides, applySkin, mountLook, storedSkin } from "./runtime/skins";`,
+      ``,
+      `export interface ScreenEntry { key: string; id: string; name: string; skin: "default" }`,
+      ``,
+      `export const SCREENS: readonly ScreenEntry[] = [`,
+      ...rows,
+      `];`,
+      ``,
+      `/** the screen a visit asks for: the first segment of the path, else the \`screen\` query parameter; "" (the index) when there is no such screen */`,
+      `export function screenKeyOf(loc: { pathname: string; search: string }): string {`,
+      `  const key = loc.pathname.split("/").filter(Boolean)[0] || new URLSearchParams(loc.search).get("screen") || "";`,
+      `  return SCREENS.some((s) => s.key === key) ? key : "";`,
+      `}`,
+      ``,
+      `/** the skin of a build: the VITE_SKIN build variable, else the screen's own */`,
+      `const buildSkin = (own: string): string => (import.meta as { env?: Record<string, string | undefined> }).env?.VITE_SKIN || own;`,
+      ``,
+      `/** the skin of a visit: the \`skin\` query parameter, else the one picked on /skins/ (stored), else the build skin */`,
+      `export function skinOf(search: string, own: string): string {`,
+      `  return new URLSearchParams(search).get("skin") || storedSkin() || buildSkin(own);`,
+      `}`,
+      ``,
+      `/** before the first paint: the skin of the screen (and its fonts), the font and radius picked on /skins/, the title of the tab and the theme of the host */`,
+      `export function bootScreen(key: string, theme: ThemeMode, title: string): void {`,
+      `  const s = SCREENS.find((x) => x.key === key);`,
+      `  const own = s?.skin ?? "default";`,
+      `  applySkin(skinOf(location.search, own));`,
+      `  applyOverrides();`,
+      `  document.title = s ? \`\${s.key} · \${title}\` : title;`,
+      `  initTheme(theme);`,
+      `  // the tiles of /skins/ (static markup) are wired by their data attributes`,
+      `  mountLook(buildSkin(own));`,
+      `  // preview tooling only: the Ins button (VITE_INSPECT=1 builds); other builds drop this branch and its chunk`,
+      `  // @ts-ignore import.meta.env is Vite's`,
+      `  if (import.meta.env.VITE_INSPECT === "1") void import("./runtime/inspect").then((m) => m.mountInspect());`,
+      `  // @ts-ignore import.meta.env is Vite's`,
+      `  if (import.meta.env.VITE_INSPECT === "1") void import("./runtime/visited").then((m) => m.mountVisited());`,
+      `}`,
+      ``,
+    ].join("\n")),
+  };
+}
+
+/** Cyrillic letters as \u escapes: the one Cyrillic text of the dictionary is a specimen of letters (the font tiles of /skins/),
+ *  and the sources and the generated code stay free of Cyrillic text (xgen check, group text) */
+const escapeCyrillic = (s: string): string => s.replace(/[\u0400-\u04FF]/g, (c) => `\\u${c.charCodeAt(0).toString(16).padStart(4, "0")}`);
+
+/** the shared package: one copy of what every host reads, whatever its runtime */
+/** runtime/codex: the lookups `fromCodex` resolves the references of an entry with (ReadOptions of runtime/core): the
+ *  media entries (featured_media_id|media), the users (author_id|author), the terms of every taxonomy (terms|term:<id>) and
+ *  the child menu items (id|menu) */
+function codexFile(collections: CollectionFile[]): GeneratedFile {
+  const of = (kind: string) => collections.filter((c) => c.entries.length > 0 && c.entries.every((e) => e.kind === kind)).map((c) => c.collection).sort();
+  const media = of("media"), users = of("user");
+  // the links under a menu item (kind menu_item with a parent_id): `id|menu` lists the children of an item
+  const menus = collections.filter((c) => c.entries.length > 0 && c.entries.every((e) => e.kind === "menu_item" && typeof (e as { parent_id?: unknown }).parent_id === "string")).map((c) => c.collection).sort();
+  const imports = [...media, ...users, ...menus].map((c) => `import { ${c} } from "../data/${c}";`);
+  const list = (cs: string[]) => (cs.length ? `[${cs.map((c) => `...${c}`).join(", ")}]` : "[]");
+  return {
+    path: "src/runtime/codex.ts",
+    contents: withBanner([
+      `// The lookups of the Codex entries: pass CODEX as the options of fromCodex so that featured_media_id, author_id and terms`,
+      `// resolve (media file, author name, term label, the links under a menu item). Add \`routes\` for the kinds an app has a page for: without one, no link.`,
+      `import type { ReadOptions } from "./core";`,
+      ...imports,
+      `import { taxonomies } from "../data/taxonomies";`,
+      ``,
+      `export const CODEX: ReadOptions = {`,
+      `  media: ${list(media)},`,
+      `  users: ${list(users)},`,
+      `  menus: ${list(menus)},`,
+      `  terms: (taxonomies as readonly { terms: readonly unknown[] }[]).flatMap((t) => t.terms),`,
+      `};`,
+      ``,
+    ].join("\n")),
+  };
+}
+
+export function sharedPackage(dictionary: Dictionary, collections: CollectionFile[], screens: ScreenSpec[], taxonomies: TaxonomyFile[] = []): GeneratedFile[] {
+  const files: GeneratedFile[] = [
+    { path: "src/content.ts", contents: withBanner(`// The content dictionary (xgen/content/ui/en.json): every text of every screen\nexport const ui = ${escapeCyrillic(JSON.stringify(dictionary, null, 2))} as const;\n`) },
+    { path: "src/runtime/core.ts", contents: withBanner(readAsset("app", "core.ts")) },
+    { path: "src/runtime/fields.ts", contents: withBanner(readAsset("app", "fields.ts")) },
+    { path: "src/runtime/theme.ts", contents: withBanner(readAsset("app", "theme.ts")) },
+    { path: "src/runtime/inspect.ts", contents: withBanner(readAsset("app", "inspect.ts")) },
+    { path: "src/runtime/visited.ts", contents: withBanner(readAsset("app", "visited.ts")) },
+    { path: "src/runtime/skins.ts", contents: withBanner(readAsset("app", "skins.ts")) },
+    skinFontsFile(),
+    { path: "src/styles/skins.css", contents: `/* ${BANNER} */\n${readAsset("styles", "skins.css")}` },
+    ...skinFiles().map((f) => ({ path: `src/styles/skins/${f}`, contents: f.endsWith(".md") ? `<!-- ${BANNER} -->\n${readAsset("styles", "skins", f)}` : `/* ${BANNER} */\n${readAsset("styles", "skins", f)}` })),
+    registryFile(screens),
+    ...collections.map((c) => ({
+      path: `src/data/${c.collection}.ts`,
+      contents: withBanner(`// Fixture of the Codex collection "${c.collection}" (xgen/fixtures/${c.collection}.json)\nexport const ${c.collection} = ${JSON.stringify(c.entries, null, 2)} as const;\n`),
+    })),
+    {
+      path: "src/data/taxonomies.ts",
+      contents: withBanner(`// The Codex taxonomy bundles (xgen/fixtures/taxonomies/*.json): the terms that entries name in \`terms\`\nexport const taxonomies = ${JSON.stringify(taxonomies, null, 2)} as const;\n`),
+    },
+    codexFile(collections),
+    ...screens.filter((s) => s.nav).map(navFile),
+  ];
+  files.push(jsonFile("package.json", {
+    name: SHARED, version: "0.0.0", private: true, type: "module",
+    description: "What the host apps share, generated by xgen once for every screen: the dictionary, the fixtures, the menus, the screen registry, the url core, the theme and the skins. Runtime neutral TypeScript; no build step.",
+    sideEffects: ["*.css"],
+    exports: {
+      "./content": "./src/content.ts",
+      "./screens": "./src/screens.ts",
+      "./runtime/*": "./src/runtime/*.ts",
+      "./data/*": "./src/data/*.ts",
+      "./nav/*": "./src/nav/*.ts",
+      "./styles/*": "./src/styles/*",
+      "./package.json": "./package.json",
+    },
+    scripts: { check: "tsc --noEmit -p tsconfig.json" },
+    dependencies: { "modern-screenshot": "^4.6.0" },
+    devDependencies: { typescript: "~6.0.2" },
+  }));
+  files.push({ path: "tsconfig.json", contents: `// ${BANNER}\n{\n  "compilerOptions": {\n    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler",\n    "strict": true, "noEmit": true, "skipLibCheck": true, "isolatedModules": true, "verbatimModuleSyntax": true\n  },\n  "include": ["src"]\n}\n` });
+  files.push({
+    path: "README.md",
+    contents: [
+      `<!-- ${BANNER} -->`,
+      `# ${SHARED}`,
+      ``,
+      `Generated by xgen (\`bun run build\`). One copy of what the host apps (\`apps/host-svelte\`, \`apps/host-react\`) read for every screen:`,
+      ``,
+      `- \`content\`: the dictionary (\`xgen/content/ui/en.json\`)`,
+      `- \`data/<collection>\`: the fixtures the screens read`,
+      `- \`nav/<Screen>\`: the menu of a screen (\`menu\` of its spec)`,
+      `- \`screens\`: the registry of screens (key, id, skin) and the boot of a visit`,
+      `- \`runtime/core\`, \`runtime/theme\`: url state and light/dark, runtime neutral; \`runtime/fields\`: the Codex field maps by kind; \`runtime/codex\`: the lookups (media, users, terms) of fromCodex`,
+      `- \`styles/skins.css\`: skins switched by \`data-skin\` on \`<html>\``,
+      ``,
+      `${screens.length} screens. A dictionary edit changes \`src/content.ts\` here and nothing in the hosts.`,
+      ``,
+    ].join("\n"),
+  });
+  return files;
+}
diff --git a/xgen/runtimes/core/src/common.ts b/xgen/runtimes/core/src/common.ts
new file mode 100644
index 0000000..3b8b310
--- /dev/null
+++ b/xgen/runtimes/core/src/common.ts
@@ -0,0 +1,276 @@
+/**
+ * Shared emitter infrastructure: generated-file shape, expression typing,
+ * constant folding, and small text utilities.
+ */
+
+import type { Expr } from "@ui8kit/xgen-spec";
+import type { BrickDef, PartDef, PropDef, RecordTypeDef } from "@ui8kit/xgen-spec";
+
+export interface GeneratedFile {
+  /** Path relative to the output root, e.g. `ui/button/button.tsx`. */
+  path: string;
+  contents: string;
+}
+
+export type EmitterRuntime = "templ" | "react" | "svelte" | "vue" | "solid" | "latte" | "twig";
+
+export interface Emitter {
+  readonly runtime: EmitterRuntime;
+  emit(brick: BrickDef): GeneratedFile[];
+}
+
+export const BANNER = "Code generated by xgen. DO NOT EDIT.";
+
+// ---------------------------------------------------------------------------
+// Expression typing
+// ---------------------------------------------------------------------------
+
+export type ExprType = "string" | "bool" | "int";
+
+export interface TypeEnv {
+  part: PartDef;
+  records: RecordTypeDef[];
+  /** Record type of the enclosing forEach, when inside one. */
+  itemRecord?: RecordTypeDef;
+}
+
+export function propDef(part: PartDef, name: string): PropDef {
+  const p = part.props.find((x) => x.name === name);
+  if (!p) throw new Error(`${part.name}: unknown prop ${name}`);
+  return p;
+}
+
+/**
+ * Build the typing environment for a part. Parts have at most one `items`
+ * prop, so its record doubles as the loop-item record for expression typing.
+ */
+export function makeEnv(brick: { recordTypes?: RecordTypeDef[] }, part: PartDef): TypeEnv {
+  const records = brick.recordTypes ?? [];
+  const itemsProp = part.props.find((p) => p.type === "items");
+  const itemRecord = itemsProp ? records.find((r) => r.name === itemsProp.itemsOf) : undefined;
+  return { part, records, itemRecord };
+}
+
+export function exprType(expr: Expr, env: TypeEnv): ExprType {
+  switch (expr.kind) {
+    case "lit":
+      return typeof expr.value === "boolean" ? "bool" : typeof expr.value === "number" ? "int" : "string";
+    case "prop": {
+      const p = propDef(env.part, expr.name);
+      if (p.type === "string" || p.type === "bool" || p.type === "int") return p.type;
+      throw new Error(`${env.part.name}: prop ${expr.name} of type ${p.type} not usable in expressions`);
+    }
+    case "item": {
+      const record = env.itemRecord;
+      if (!record) throw new Error(`${env.part.name}: item ref outside forEach`);
+      const f = record.fields.find((x) => x.name === expr.field);
+      if (!f) throw new Error(`${env.part.name}: record ${record.name} has no field ${expr.field}`);
+      return f.type;
+    }
+    case "derivedRef": {
+      const d = env.part.derived?.[expr.name];
+      if (!d) throw new Error(`${env.part.name}: unknown derived ${expr.name}`);
+      return exprType(d, env);
+    }
+    case "resolvedTag":
+    case "defaultIfEmpty":
+    case "mapOr":
+    case "intMapOr":
+    case "concat":
+    case "boolToString":
+    case "intToString":
+      return "string";
+    case "cond":
+      return exprType(expr.then, env);
+    case "eq":
+    case "and":
+    case "or":
+    case "not":
+    case "isSet":
+    case "contains":
+      return "bool";
+  }
+}
+
+/** True when the expression (transitively) references the loop item. */
+export function usesItem(expr: Expr, env: TypeEnv): boolean {
+  switch (expr.kind) {
+    case "item":
+      return true;
+    case "derivedRef": {
+      const d = env.part.derived?.[expr.name];
+      return d ? usesItem(d, env) : false;
+    }
+    default:
+      break;
+  }
+  const children = childListOf(expr);
+  return children.some((c) => usesItem(c, env));
+}
+
+/** True when the expression (transitively) references a component prop. */
+export function usesProps(expr: Expr, env: TypeEnv): boolean {
+  switch (expr.kind) {
+    case "prop":
+      return true;
+    case "derivedRef": {
+      const d = env.part.derived?.[expr.name];
+      return d ? usesProps(d, env) : false;
+    }
+    default:
+      break;
+  }
+  return childListOf(expr).some((c) => usesProps(c, env));
+}
+
+function childListOf(expr: Expr): Expr[] {
+  switch (expr.kind) {
+    case "lit":
+    case "prop":
+    case "item":
+    case "derivedRef":
+    case "resolvedTag":
+      return [];
+    case "defaultIfEmpty":
+    case "mapOr":
+    case "intMapOr":
+    case "not":
+    case "isSet":
+    case "contains":
+    case "boolToString":
+    case "intToString":
+      return [expr.expr];
+    case "cond":
+      return [expr.test, expr.then, expr.else];
+    case "eq":
+      return [expr.left, expr.right];
+    case "and":
+    case "or":
+      return expr.exprs;
+    case "concat":
+      return expr.parts;
+  }
+}
+
+/**
+ * Replace `resolvedTag` with a literal and fold trivially-constant boolean
+ * algebra. Used by the Templ emitter inside tag-switch cases, where the
+ * resolved tag is a known literal per case.
+ */
+export function foldResolvedTag(expr: Expr, tag: string): Expr {
+  const fold = (e: Expr): Expr => {
+    switch (e.kind) {
+      case "resolvedTag":
+        return { kind: "lit", value: tag };
+      case "eq": {
+        const left = fold(e.left);
+        const right = fold(e.right);
+        if (left.kind === "lit" && right.kind === "lit") {
+          return { kind: "lit", value: left.value === right.value };
+        }
+        return { ...e, left, right };
+      }
+      case "and": {
+        const exprs = e.exprs.map(fold);
+        if (exprs.some((x) => x.kind === "lit" && x.value === false)) return { kind: "lit", value: false };
+        const rest = exprs.filter((x) => !(x.kind === "lit" && x.value === true));
+        if (rest.length === 0) return { kind: "lit", value: true };
+        if (rest.length === 1) return rest[0]!;
+        return { ...e, exprs: rest };
+      }
+      case "or": {
+        const exprs = e.exprs.map(fold);
+        if (exprs.some((x) => x.kind === "lit" && x.value === true)) return { kind: "lit", value: true };
+        const rest = exprs.filter((x) => !(x.kind === "lit" && x.value === false));
+        if (rest.length === 0) return { kind: "lit", value: false };
+        if (rest.length === 1) return rest[0]!;
+        return { ...e, exprs: rest };
+      }
+      case "not": {
+        const inner = fold(e.expr);
+        if (inner.kind === "lit" && typeof inner.value === "boolean") {
+          return { kind: "lit", value: !inner.value };
+        }
+        return { ...e, expr: inner };
+      }
+      case "cond": {
+        const test = fold(e.test);
+        if (test.kind === "lit" && typeof test.value === "boolean") {
+          return test.value ? fold(e.then) : fold(e.else);
+        }
+        return { ...e, test, then: fold(e.then), else: fold(e.else) };
+      }
+      case "defaultIfEmpty":
+        return { ...e, expr: fold(e.expr) };
+      case "mapOr":
+        return { ...e, expr: fold(e.expr) };
+      case "intMapOr":
+        return { ...e, expr: fold(e.expr) };
+      case "isSet":
+        return { ...e, expr: fold(e.expr) };
+      case "contains":
+        return { ...e, expr: fold(e.expr) };
+      case "boolToString":
+        return { ...e, expr: fold(e.expr) };
+      case "intToString":
+        return { ...e, expr: fold(e.expr) };
+      case "concat":
+        return { ...e, parts: e.parts.map(fold) };
+      default:
+        return e;
+    }
+  };
+  return fold(expr);
+}
+
+// ---------------------------------------------------------------------------
+// Text utilities
+// ---------------------------------------------------------------------------
+
+export function indent(text: string, level: number, unit = "  "): string {
+  const pad = unit.repeat(level);
+  return text
+    .split("\n")
+    .map((line) => (line.trim() === "" ? line : pad + line))
+    .join("\n");
+}
+
+export function pascalCase(kebab: string): string {
+  return kebab
+    .split(/[-_.]/)
+    .filter(Boolean)
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join("");
+}
+
+export function lowerFirst(name: string): string {
+  return name.charAt(0).toLowerCase() + name.slice(1);
+}
+
+export function jsString(value: string): string {
+  return JSON.stringify(value);
+}
+
+/** Recipe variable/const name from the variants.json file stem. */
+export function recipeVarName(recipeFile: string): string {
+  const stem = recipeFile.replace(/\.variants\.json$/, "");
+  return pascalCase(stem) + "Variants";
+}
+
+/** `import { a, b } from "x";` on one line when it fits in `width` characters, else one name per line */
+export function importLine(names: string[], from: string, width = 100): string {
+  const one = `import { ${names.join(", ")} } from "${from}";`;
+  return one.length <= width ? one : `import {\n${names.map((n) => `  ${n},`).join("\n")}\n} from "${from}";`;
+}
+
+/** the members of a union (`"a" | "b"`) in lines of at most `width` characters, each line led by `| ` after `pad` */
+export function wrapUnion(members: string[], pad: string, width = 100): string[] {
+  const lines: string[] = [];
+  let line = "";
+  for (const m of members) {
+    if (line && pad.length + line.length + m.length + 3 > width) { lines.push(`${pad}| ${line}`); line = ""; }
+    line = line ? `${line} | ${m}` : m;
+  }
+  if (line) lines.push(`${pad}| ${line}`);
+  return lines;
+}
diff --git a/xgen/runtimes/core/src/decks.ts b/xgen/runtimes/core/src/decks.ts
new file mode 100644
index 0000000..c5a6611
--- /dev/null
+++ b/xgen/runtimes/core/src/decks.ts
@@ -0,0 +1,37 @@
+// The copy decks of the taste screens, built from their Codex entries (xgen/fixtures/deck*.json) through the central field maps
+// (CODEX_FIELDS.deck, deckStat, ...): the generator writes them to packages/taste-data/content/copy.json, the file taste-data
+// reads. A part names its deck (metadata.deck) and its place in it (metadata.position).
+import { fromCodex } from "../assets/app/core";
+import { CODEX_FIELDS } from "../assets/app/fields";
+import { BANNER, type GeneratedFile } from "./common";
+
+/** the fixture collections of the decks: the deck entries, then their parts by the deck key they fill */
+export const DECK_COLLECTIONS = { deck: "decks", stats: "deckstats", items: "deckitems", plans: "deckplans", quotes: "deckquotes", faq: "deckfaq" } as const;
+const PART_MAP = { stats: CODEX_FIELDS.deckStat, items: CODEX_FIELDS.deckItem, plans: CODEX_FIELDS.deckPlan, quotes: CODEX_FIELDS.deckQuote, faq: CODEX_FIELDS.deckFaq } as const;
+/** the parts every deck has; the others appear only on the decks that carry them */
+const ALWAYS = new Set(["stats", "items"]);
+
+type Entry = { id: string; metadata?: Record<string, { value: unknown }> };
+type Collection = { collection: string; entries: Entry[] };
+const meta = (e: Entry, k: string): unknown => e.metadata?.[k]?.value;
+
+/** the decks in the order of their fixture, each part in its position; the keys in the order of the Deck type */
+export function buildDecks(collections: readonly Collection[]): Record<string, unknown>[] {
+  const of = (c: string): Entry[] => collections.find((x) => x.collection === c)?.entries ?? [];
+  return of(DECK_COLLECTIONS.deck).map((d) => {
+    const { tags, ...head } = fromCodex<Record<string, unknown>>([d], CODEX_FIELDS.deck)[0]!;
+    const parts = Object.fromEntries(Object.entries(PART_MAP).map(([key, map]) => {
+      const mine = of(DECK_COLLECTIONS[key as keyof typeof PART_MAP]).filter((e) => meta(e, "deck") === d.id)
+        .sort((a, b) => Number(meta(a, "position")) - Number(meta(b, "position")));
+      return [key, mine.length || ALWAYS.has(key) ? fromCodex(mine, map) : undefined];
+    }).filter(([, v]) => v !== undefined));
+    const { stats, items, ...extras } = parts;
+    return { ...head, stats, items, tags, ...extras };
+  });
+}
+
+/** packages/taste-data/content/copy.json */
+export const decksFile = (collections: readonly Collection[]): GeneratedFile => ({
+  path: "copy.json",
+  contents: JSON.stringify({ "//": BANNER, source: "xgen/fixtures/deck*.json (change the entries there, then bun run build)", decks: buildDecks(collections) }, null, 2) + "\n",
+});
diff --git a/xgen/runtimes/core/src/index.ts b/xgen/runtimes/core/src/index.ts
new file mode 100644
index 0000000..670029f
--- /dev/null
+++ b/xgen/runtimes/core/src/index.ts
@@ -0,0 +1,9 @@
+export * from "./common";
+export * from "./ts-common";
+export * from "./ts-expr";
+export * from "./view";
+export * from "./screen-model";
+export * from "./app-common";
+export * from "./preset";
+export * from "./variant-table";
+export * from "./decks";
diff --git a/xgen/runtimes/core/src/preset.ts b/xgen/runtimes/core/src/preset.ts
new file mode 100644
index 0000000..aea4e98
--- /dev/null
+++ b/xgen/runtimes/core/src/preset.ts
@@ -0,0 +1,43 @@
+// A layout preset as a TypeScript module, the same text for every runtime: `export const defaults = { hero: { band: "..." } } as const;`
+import { presetFile, type PresetGroup, type PresetSpec, type PresetValue } from "@ui8kit/xgen-screens";
+import { BANNER } from "./common";
+import type { GeneratedFile } from "./common";
+
+const KEY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+
+function printGroup(g: PresetGroup, notes: Record<string, string>, path: string, depth: number): string[] {
+  const pad = "  ".repeat(depth);
+  const out: string[] = [];
+  for (const [k, v] of Object.entries(g)) {
+    const at = path ? `${path}.${k}` : k;
+    const note = notes[at];
+    if (note) out.push(`${pad}/** ${note} */`);
+    const key = KEY.test(k) ? k : JSON.stringify(k);
+    out.push(...printValue(key, v, notes, at, depth, pad));
+  }
+  return out;
+}
+
+function printValue(key: string, v: PresetValue, notes: Record<string, string>, at: string, depth: number, pad: string): string[] {
+  if (typeof v === "string" || typeof v === "number") return [`${pad}${key}: ${JSON.stringify(v)},`];
+  if (Array.isArray(v)) return [`${pad}${key}: [${v.map((x) => JSON.stringify(x)).join(", ")}],`];
+  return [`${pad}${key}: {`, ...printGroup(v, notes, at, depth + 1), `${pad}},`];
+}
+
+/** src/presets/<kit>.ts */
+export function emitPreset(p: PresetSpec, source: string): GeneratedFile {
+  const lines = [
+    `// ${BANNER}`,
+    `// Source: ${source}`,
+    ``,
+    `/**`,
+    ...p.docs.split("\n").map((l) => ` * ${l}`.trimEnd()),
+    ...(p.source ? [` *`, ` * Numbers: ${p.source}`] : []),
+    ` */`,
+    `export const ${p.name} = {`,
+    ...printGroup(p.values, p.notes ?? {}, "", 1),
+    `} as const;`,
+    ``,
+  ];
+  return { path: `presets/${presetFile(p.name)}.ts`, contents: lines.join("\n") };
+}
diff --git a/xgen/runtimes/core/src/screen-model.ts b/xgen/runtimes/core/src/screen-model.ts
new file mode 100644
index 0000000..48a3e07
--- /dev/null
+++ b/xgen/runtimes/core/src/screen-model.ts
@@ -0,0 +1,138 @@
+// What a collection screen needs besides markup: the constants of its list, routes and Codex mapping, and the route plan.
+import { printPretty, sourcesOf, type ScreenSpec, type SourceSpec, type Value, type ViewNode } from "@ui8kit/xgen-screens";
+
+/** the roots a view tree reads: `{"$":"TOPICS"}` -> TOPICS */
+const rootsOf = (nodes: unknown): Set<string> => new Set([...JSON.stringify(nodes).matchAll(/"\$":"([A-Za-z0-9_]+)/g)].map((m) => m[1]!));
+
+/** the sources the screen file itself reads: all of them, or with chunks only those of the frame (the pages read their own) */
+export const pageSources = (s: ScreenSpec): Array<SourceSpec & { as: string }> =>
+  s.chunks ? sourcesOf(s).filter((x) => rootsOf(s.layout).has(x.as)) : sourcesOf(s);
+
+/** the named values of the screen a view tree reads */
+const constsRead = (s: ScreenSpec, nodes: unknown): Array<[string, Value]> => {
+  const roots = rootsOf(nodes);
+  return Object.entries(s.consts ?? {}).filter(([k]) => roots.has(k));
+};
+
+/** `const TOPICS = [...] as const;` for each named value of the screen the view reads; printed after the sources, which they may read */
+export function namedConsts(s: ScreenSpec, nodes: unknown): string[] {
+  const ctx = { emit: () => "", helpers: new Set<string>(), optional: new Set<string>() };
+  return constsRead(s, nodes).map(([k, v]) => `const ${k} = ${printPretty(v, ctx, "", 136)} as const;`);
+}
+
+export function printConst(name: string, v: unknown, width = 150): string {
+  const one = `const ${name} = ${JSON.stringify(v)} as const;`;
+  if (one.length <= width || !v || typeof v !== "object") return one;
+  const arr = Array.isArray(v);
+  const items = arr ? (v as unknown[]).map((x) => JSON.stringify(x)) : Object.entries(v).map(([k, x]) => `${JSON.stringify(k)}: ${JSON.stringify(x)}`);
+  return [`const ${name} = ${arr ? "[" : "{"}`, ...items.map((i) => `  ${i},`), `${arr ? "]" : "}"} as const;`].join("\n");
+}
+
+export interface ScreenModel {
+  listPath: string;
+  listArea: string;
+  recordArea: string | null;
+  recordParam: string | null;
+  /** `plans/${id}` as a TS template literal body */
+  recordPathTemplate: string | null;
+  /** areas other than the default one, in order */
+  otherAreas: string[];
+  constsTs: string;
+  /** the named values the screen file reads (`const TOPICS = ...`), after its sources */
+  namedTs: string;
+  file: string;
+}
+
+export function screenModel(s: ScreenSpec): ScreenModel {
+  const list = s.routes.find((r) => !r.path.includes(":"))!;
+  if (s.kind === "page") {
+    // a page: the routes table and one field map per source; unknown addresses go to the `notfound` area when there is one, else to the first route
+    const q = (v: unknown): string => JSON.stringify(v);
+    const fallback = s.areas["notfound"] ? "notfound" : list.area;
+    return {
+      listPath: list.path, listArea: fallback, recordArea: null, recordParam: null, recordPathTemplate: null,
+      otherAreas: [...new Set(s.routes.map((r) => r.area))].filter((a) => a !== fallback),
+      constsTs: [
+        printConst("ROUTES", s.routes),
+        ...pageSources(s).map((x) => printConst(`${x.as.toUpperCase()}_FIELDS`, x.fields)),
+      ].join("\n"),
+      namedTs: namedConsts(s, s.chunks ? s.layout : [s.layout, s.areas]).join("\n"),
+      file: s.name,
+    };
+  }
+  if (!s.list || !s.source) throw new Error(`${s.name}: a collection screen needs source and list`);
+  const rec = s.routes.find((r) => r.path.includes(":")) ?? null;
+  const param = rec?.path.match(/:([A-Za-z0-9_]+)/)?.[1] ?? null;
+  const q = (v: unknown): string => JSON.stringify(v);
+  const constsTs = [
+    `const LIST = { searchFields: ${q(s.list.searchFields)}, pageSize: ${s.list.pageSize}, defaultSort: ${q(s.list.defaultSort)} } as const;`,
+    printConst("ROUTES", s.routes),
+    printConst("FIELDS", s.source.fields),
+  ].join("\n");
+  return {
+    listPath: list.path,
+    listArea: list.area,
+    recordArea: rec?.area ?? null,
+    recordParam: param,
+    recordPathTemplate: rec && param ? rec.path.replace(`:${param}`, "${id}") : null,
+    otherAreas: s.routes.filter((r) => r !== list).map((r) => r.area),
+    constsTs,
+    namedTs: "",
+    file: s.name,
+  };
+}
+
+/** an area of a page screen emitted as its own component file: what it reads, so the file imports only that */
+export interface ChunkModel {
+  area: string;
+  /** the nodes of the file: the area, or the part */
+  nodes: ViewNode[];
+  /** the comment line of the file: `The index page of BlocksScreen.` */
+  doc: string;
+  /** component name: `AccordionPage` */
+  name: string;
+  /** folder of the chunk files, next to the screen: `BlocksScreen` */
+  dir: string;
+  sources: Array<SourceSpec & { as: string }>;
+  actions: boolean;
+  /** `const X_FIELDS = ...` of its sources */
+  constsTs: string;
+  /** the named values it reads (`const HERO_ACTIONS = ...`), after its sources */
+  namedTs: string;
+}
+
+const pascal = (s: string): string => s.split(/[^A-Za-z0-9]+/).filter(Boolean).map((w) => w[0]!.toUpperCase() + w.slice(1)).join("");
+
+/** the chunks of a screen with `chunks`: one per area; an area that reads the route, the menu or the url state cannot leave the screen */
+export function chunksOf(s: ScreenSpec): ChunkModel[] {
+  if (!s.chunks || s.kind !== "page") return [];
+  const all = sourcesOf(s);
+  return Object.entries(s.areas).map(([area, nodes]) => {
+    const json = JSON.stringify(nodes);
+    const roots = rootsOf([nodes, constsRead(s, nodes)]);
+    for (const r of ["route", "nav", "url", "record", "view"]) if (roots.has(r)) throw new Error(`${s.name}.${area}: the area reads ${r}, so it cannot be its own file`);
+    const sources = all.filter((x) => roots.has(x.as));
+    return {
+      area, nodes, doc: `The ${area} page of ${s.name}.`, name: `${pascal(area)}Page`, dir: s.name, sources, actions: json.includes('"call":"actions.'),
+      constsTs: sources.map((x) => printConst(`${x.as.toUpperCase()}_FIELDS`, x.fields)).join("\n"),
+      namedTs: namedConsts(s, nodes).join("\n"),
+    };
+  });
+}
+
+/** the parts of a page screen (`ScreenSpec.parts`): one file each next to the screen, placed by a `{ part }` node of the layout */
+export function partsOf(s: ScreenSpec): ChunkModel[] {
+  if (s.kind !== "page") return [];
+  const all = sourcesOf(s);
+  return Object.entries(s.parts ?? {}).map(([name, nodes]) => {
+    const roots = rootsOf([nodes, constsRead(s, nodes)]);
+    for (const r of ["route", "nav", "url", "record", "view"]) if (roots.has(r)) throw new Error(`${s.name}.parts.${name}: a part reads ${r}; only the screen reads it`);
+    const sources = all.filter((x) => roots.has(x.as));
+    return {
+      area: name, nodes, doc: `The ${name} part of ${s.name}: its own file, so each file of the screen opens on one Block.`, name, dir: s.name, sources,
+      actions: JSON.stringify(nodes).includes('"call":"actions.'),
+      constsTs: sources.map((x) => printConst(`${x.as.toUpperCase()}_FIELDS`, x.fields)).join("\n"),
+      namedTs: namedConsts(s, nodes).join("\n"),
+    };
+  });
+}
diff --git a/xgen/runtimes/core/src/ts-common.ts b/xgen/runtimes/core/src/ts-common.ts
new file mode 100644
index 0000000..6ec3d87
--- /dev/null
+++ b/xgen/runtimes/core/src/ts-common.ts
@@ -0,0 +1,282 @@
+/**
+ * Shared analysis for the TypeScript runtimes (React, Svelte): declared props, the variant tables printed at the top
+ * of each component (shadcn style) and the inline classes expression of a part.
+ */
+
+import { walkExpr, type Expr } from "@ui8kit/xgen-spec";
+import {
+  type BrickDef,
+  type ClassSpec,
+  type PartDef,
+  type PropDef,
+} from "@ui8kit/xgen-spec";
+import { htmlPropName, localIdent, reactPropName } from "@ui8kit/xgen-spec";
+import { exprType, indent, pascalCase, type TypeEnv } from "./common";
+import { printTsExpr, type TsPrintCtx } from "./ts-expr";
+import { isEmptyRecipe, printClassString, printVariantTable, variantsName } from "./variant-table";
+
+// ---------------------------------------------------------------------------
+// Declared props
+// ---------------------------------------------------------------------------
+
+export interface DeclaredProp {
+  def: PropDef;
+  /** React prop name (camelCase / className / aria-*). */
+  reactName: string;
+  /** Svelte/Vue prop name (HTML-native). */
+  htmlName: string;
+  /** Safe local identifier in generated code. */
+  local: string;
+  /** TS type reference. */
+  tsType: string;
+}
+
+/**
+ * Props that appear in TS runtime signatures (passthrough flows via rest;
+ * `Class` is handled uniformly by each runtime: `className` in React,
+ * `class` in Svelte, the class attr in Vue).
+ */
+export function declaredProps(brick: BrickDef, part: PartDef): DeclaredProp[] {
+  return part.props
+    .filter(
+      (p) => p.type !== "attrs" && p.type !== "children" && !p.passthrough && p.name !== "Class"
+    )
+    .map((p) => ({
+      def: p,
+      reactName: reactPropName(p),
+      htmlName: htmlPropName(p),
+      local: localIdent(p.name),
+      tsType: tsTypeOf(brick, part, p),
+    }));
+}
+
+export function variantTypeName(part: PartDef, cvaKey: string): string {
+  return part.name + pascalCase(cvaKey);
+}
+
+export function tsTypeOf(brick: BrickDef, part: PartDef, p: PropDef): string {
+  if (p.cva) return variantTypeName(part, p.cvaKey ?? p.name.toLowerCase());
+  switch (p.type) {
+    case "string":
+      return p.enumValues ? p.enumValues.map((v) => JSON.stringify(v)).join(" | ") : "string";
+    case "bool":
+      return "boolean";
+    case "int":
+      return p.enumValues ? p.enumValues.join(" | ") : "number";
+    case "items":
+      return `${p.itemsOf}[]`;
+    default:
+      throw new Error(`${part.name}.${p.name}: type ${p.type} has no TS representation`);
+  }
+}
+
+/** Canonical prop names referenced by a class spec (excluding Class). */
+export function classSpecProps(spec: ClassSpec): string[] {
+  const names = new Set<string>();
+  const fromExpr = (e: Expr) =>
+    walkExpr(e, (x) => {
+      if (x.kind === "prop") names.add(x.name);
+    });
+  for (const source of Object.values(spec.recipe ?? {})) {
+    if (typeof source === "string") names.add(source);
+    else fromExpr(source);
+  }
+  for (const e of spec.extra ?? []) fromExpr(e);
+  for (const st of spec.state ?? []) fromExpr(st.test);
+  names.delete("Class");
+  return [...names];
+}
+
+/**
+ * Print an inline ClassSpec as a `cn(...)` expression (used for non-root
+ * class attrs, e.g. per-item classes inside loops).
+ */
+export function printInlineClassSpec(
+  spec: ClassSpec,
+  ctx: TsPrintCtx,
+  classPropCode: () => string | undefined
+): string {
+  const args: string[] = [];
+  if (spec.recipe) {
+    throw new Error("inline class specs with recipes are not supported; use the part classes contract");
+  }
+  if (spec.staticBase) args.push(JSON.stringify(spec.staticBase));
+  for (const e of spec.extra ?? []) args.push(printTsExpr(e, ctx));
+  for (const st of spec.state ?? []) {
+    args.push(`(${printTsExpr(st.test, ctx)} ? ${JSON.stringify(st.classes)} : "")`);
+  }
+  if (spec.includeClassProp !== false) {
+    const cp = classPropCode();
+    if (cp) args.push(cp);
+  }
+  return `cn(${args.join(", ")})`;
+}
+
+// ---------------------------------------------------------------------------
+// Variant tables at the top of a component (shadcn style)
+// ---------------------------------------------------------------------------
+
+/** the part whose file holds the variant table of a recipe: the first part that uses it */
+export function recipeOwner(brick: BrickDef, recipeId: string): PartDef {
+  return brick.parts.find((p) => p.recipeId === recipeId || p.classes?.recipeId === recipeId) ?? brick.parts[0]!;
+}
+
+/** recipes a part reads (for its prop types and its classes) */
+function recipesOf(part: PartDef): string[] {
+  const ids = new Set<string>();
+  if (part.recipeId && (part.props.some((p) => p.cva) || part.classes?.recipe)) ids.add(part.recipeId);
+  if (part.classes?.recipe) ids.add(part.classes.recipeId ?? part.recipeId!);
+  return [...ids];
+}
+
+export type PartHead = {
+  /** code at the top of the part: owned variant tables, record types, variant value types */
+  code: string[];
+  /** names to import from a sibling part of the same brick: part name -> names */
+  fromSibling: Map<string, { values: Set<string>; types: Set<string> }>;
+  /** utils the head needs */
+  usesVariants: boolean;
+  usesVariantKey: boolean;
+};
+
+/**
+ * The top of one part: the variant tables it owns, the record types (first part of the brick), and the value types
+ * of its variant props (`type BadgeSize = VariantKey<typeof badgeVariants, "size">`).
+ */
+export function partHead(brick: BrickDef, part: PartDef): PartHead {
+  const head: PartHead = { code: [], fromSibling: new Map(), usesVariants: false, usesVariantKey: false };
+  const sibling = (owner: PartDef) => {
+    if (!head.fromSibling.has(owner.name)) head.fromSibling.set(owner.name, { values: new Set(), types: new Set() });
+    return head.fromSibling.get(owner.name)!;
+  };
+  for (const id of Object.keys(brick.recipes)) {
+    if (recipeOwner(brick, id) !== part || isEmptyRecipe(brick.recipes[id]!)) continue;
+    head.usesVariants = true;
+    head.code.push(`/** ${part.name}: the classes of each value of each prop (shadcn/cva style). */`);
+    head.code.push(printVariantTable(variantsName(id), brick.recipes[id]!), ``);
+  }
+  for (const id of recipesOf(part)) if (recipeOwner(brick, id) !== part && !isEmptyRecipe(brick.recipes[id]!)) sibling(recipeOwner(brick, id)).values.add(variantsName(id));
+  const first = brick.parts[0]!;
+  for (const record of brick.recordTypes ?? []) {
+    if (part === first) {
+      const fields = record.fields.map((f) => `  ${localIdent(f.name)}${f.type === "string" ? "?: string" : "?: boolean"};`);
+      head.code.push(`export type ${record.name} = {\n${fields.join("\n")}\n};`, ``);
+    } else if (part.props.some((p) => p.type === "items" && p.itemsOf === record.name)) sibling(first).types.add(record.name);
+  }
+  const seen = new Set<string>();
+  for (const d of declaredProps(brick, part)) {
+    if (!d.def.cva) continue;
+    const k = d.def.cvaKey ?? d.def.name.toLowerCase();
+    const typeName = variantTypeName(part, k);
+    if (seen.has(typeName)) continue;
+    seen.add(typeName);
+    head.usesVariantKey = true;
+    head.code.push(`export type ${typeName} = VariantKey<typeof ${variantsName(part.recipeId!)}, ${JSON.stringify(k)}>;`);
+  }
+  if (seen.size) head.code.push(``);
+  return head;
+}
+
+/**
+ * The classes of a part as one inline expression:
+ * `cn(badgeVariants({ size, variant }), "static classes", state ? "on" : "", className)`.
+ */
+export function classesExpr(brick: BrickDef, part: PartDef, ctx: TsPrintCtx): { expr: string; usesVariantKey: boolean } {
+  const spec = part.classes!;
+  const args: string[] = [];
+  let usesVariantKey = false;
+  const recipeId = spec.recipeId ?? part.recipeId;
+  if (spec.recipe && recipeId && !isEmptyRecipe(brick.recipes[recipeId]!)) {
+    const fn = variantsName(spec.recipeId ?? part.recipeId!);
+    const selection = Object.entries(spec.recipe).map(([k, source]) => {
+      if (typeof source === "string") {
+        const local = ctx.propCode(source);
+        return local === k ? k : `${quoteIfNeeded(k)}: ${local}`;
+      }
+      usesVariantKey = true;
+      return `${quoteIfNeeded(k)}: ${printTsExpr(source, ctx)} as VariantKey<typeof ${fn}, ${JSON.stringify(k)}>`;
+    });
+    args.push(selection.length ? `${fn}({ ${selection.join(", ")} })` : `${fn}()`);
+  }
+  if (spec.staticBase) args.push(printClassString(spec.staticBase, "  "));
+  for (const e of spec.extra ?? []) args.push(wrapLookup(printTsExpr(e, ctx)));
+  for (const st of spec.state ?? []) args.push(`(${printTsExpr(st.test, ctx)} ? ${JSON.stringify(st.classes)} : "")`);
+  if (spec.includeClassProp !== false) args.push(ctx.propCode("Class"));
+  const one = `cn(${args.join(", ")})`;
+  // a long expression: one argument per line, like a formatter would print it
+  if (one.length <= 100 && !one.includes("\n")) return { expr: one, usesVariantKey };
+  return { expr: `cn(\n${args.map((a) => indent(a, 1)).join(",\n")}\n)`, usesVariantKey };
+}
+
+/**
+ * True when an attr is a plain conditional forward of a passthrough prop —
+ * TS runtimes skip it because rest props deliver the identical attribute.
+ */
+export function isPassthroughForward(
+  attr: { kind: string; expr?: Expr; when?: Expr },
+  part: PartDef
+): boolean {
+  if (attr.kind !== "expr" || !attr.expr || attr.when) return false;
+  if (attr.expr.kind !== "prop") return false;
+  const p = part.props.find((x) => x.name === (attr.expr as { name: string }).name);
+  return p?.passthrough === true;
+}
+
+/**
+ * A long lookup expression (`mapOr(cols, { "1": "grid-cols-1", ... }, "")`): the entries of its object literal go
+ * on their own lines, a few per line, so no line runs past the readability width.
+ */
+export function wrapLookup(code: string, width = 110): string {
+  if (code.length <= width) return code;
+  const open = code.indexOf("{ ");
+  if (open < 0) return code;
+  let depth = 0;
+  let quoted = false;
+  const cuts: number[] = [];
+  let close = -1;
+  for (let i = open; i < code.length; i++) {
+    const c = code[i]!;
+    if (c === '"' && code[i - 1] !== "\\") quoted = !quoted;
+    if (quoted) continue;
+    if (c === "{") depth++;
+    if (c === "}" && --depth === 0) { close = i; break; }
+    if (c === "," && depth === 1) cuts.push(i);
+  }
+  if (close < 0) return code;
+  const entries: string[] = [];
+  let from = open + 1;
+  for (const cut of [...cuts, close]) { entries.push(code.slice(from, cut).trim()); from = cut + 1; }
+  const rows: string[] = [];
+  for (const e of entries.filter(Boolean)) {
+    const last = rows[rows.length - 1];
+    if (last !== undefined && last.length + e.length + 2 <= width - 10) rows[rows.length - 1] = `${last} ${e},`;
+    else rows.push(`${e},`);
+  }
+  return `${code.slice(0, open)}{\n${rows.map((r) => `  ${r}`).join("\n")}\n}${code.slice(close + 1)}`;
+}
+
+export function quoteIfNeeded(name: string): string {
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name) ? name : JSON.stringify(name);
+}
+
+/** True when a string-typed expression can never print empty (attr always kept). */
+export function neverEmptyString(expr: Expr, env: TypeEnv): boolean {
+  switch (expr.kind) {
+    case "lit":
+      return typeof expr.value === "string" ? expr.value !== "" : true;
+    case "defaultIfEmpty":
+      return expr.fallback !== "";
+    case "mapOr":
+      return expr.fallback !== "" && Object.values(expr.mapping).every((v) => v !== "");
+    case "intMapOr":
+      return expr.fallback !== "" && Object.values(expr.mapping).every((v) => v !== "");
+    case "boolToString":
+    case "intToString":
+    case "resolvedTag":
+      return true;
+    case "cond":
+      return neverEmptyString(expr.then, env) && neverEmptyString(expr.else, env);
+    default:
+      return exprType(expr, env) === "bool" || exprType(expr, env) === "int" ? false : false;
+  }
+}
diff --git a/src/emitters/ts-expr.ts b/xgen/runtimes/core/src/ts-expr.ts
similarity index 98%
rename from src/emitters/ts-expr.ts
rename to xgen/runtimes/core/src/ts-expr.ts
index 28963be..634bd04 100644
--- a/src/emitters/ts-expr.ts
+++ b/xgen/runtimes/core/src/ts-expr.ts
@@ -7,7 +7,7 @@
  * `utils/expr.ts` (one implementation per runtime family, DRY).
  */
 
-import type { Expr } from "../domain/expr";
+import type { Expr } from "@ui8kit/xgen-spec";
 import { exprType, type TypeEnv } from "./common";
 
 export interface TsPrintCtx {
diff --git a/xgen/runtimes/core/src/variant-table.ts b/xgen/runtimes/core/src/variant-table.ts
new file mode 100644
index 0000000..3ad4d94
--- /dev/null
+++ b/xgen/runtimes/core/src/variant-table.ts
@@ -0,0 +1,89 @@
+// Prints a variant table (shadcn/cva style) at the top of a generated component, from a `*.variants.json` spec.
+// The spec stays the source of truth; the generated file reads like a hand-written shadcn component.
+
+import { lowerFirst, pascalCase } from "./common";
+
+/** the shape of a `*.variants.json` spec (bricks and recipes) */
+export type RecipeLike = {
+  base: string;
+  keys: string[];
+  defaults: Record<string, string>;
+  byKey: Record<string, Record<string, string>>;
+  compound?: Array<Record<string, string>>;
+};
+
+const IDENT = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+const key = (k: string) => (IDENT.test(k) ? k : JSON.stringify(k));
+
+/** `ui.badge` / `section-frame` -> `badgeVariants` / `sectionFrameVariants` */
+export function variantsName(recipeId: string): string {
+  return lowerFirst(pascalCase(recipeId.replace(/^ui\./, ""))) + "Variants";
+}
+
+/** a table with no base, no variants and no compounds adds no class: the component skips it */
+export function isEmptyRecipe(recipe: RecipeLike): boolean {
+  return !recipe.base.trim() && recipe.keys.length === 0 && !recipe.compound?.length;
+}
+
+/** generated lines stay short enough to read without scrolling (the readability check allows 160 characters) */
+const WIDTH = 120;
+
+/**
+ * A class string as code. A long one is cut at spaces into `"a b " +` lines, each under the width, so the reader
+ * never scrolls sideways; `pad` is the indentation of the continuation lines.
+ */
+export function printClassString(value: string, pad: string): string {
+  const whole = JSON.stringify(value);
+  if (whole.length <= WIDTH - pad.length) return whole;
+  const chunks: string[] = [];
+  let line = "";
+  for (const word of value.split(" ")) {
+    if (line && line.length + word.length + 1 > WIDTH - pad.length - 6) {
+      chunks.push(line + " ");
+      line = word;
+    } else line = line ? `${line} ${word}` : word;
+  }
+  chunks.push(line);
+  return chunks.map((c) => JSON.stringify(c)).join(` +\n${pad}`);
+}
+
+/** `key: value` at an indentation; a long value moves to its own lines */
+function entry(pad: string, k: string, value: string): string {
+  const one = `${pad}${key(k)}: ${JSON.stringify(value)},`;
+  if (one.length <= WIDTH) return one;
+  return `${pad}${key(k)}:\n${pad}  ${printClassString(value, pad + "  ")},`;
+}
+
+/** one object on one line: `{ size: "24", variant: "default" }`, or one entry per line when it is long */
+function inline(obj: Record<string, string>, pad = ""): string {
+  const pairs = Object.entries(obj).map(([k, v]) => `${key(k)}: ${JSON.stringify(v)}`);
+  if (!pairs.length) return "{}";
+  const one = `{ ${pairs.join(", ")} }`;
+  if (pad.length + one.length <= WIDTH) return one;
+  return `{\n${Object.entries(obj).map(([k, v]) => entry(pad + "  ", k, v)).join("\n")}\n${pad}}`;
+}
+
+/** `const <name> = variants({ base, variants, defaultVariants, compoundVariants })`, one value per line */
+export function printVariantTable(name: string, recipe: RecipeLike, exported = true): string {
+  const lines = [`${exported ? "export " : ""}const ${name} = variants({`];
+  if (recipe.base.trim()) lines.push(entry("  ", "base", recipe.base));
+  lines.push(recipe.keys.length ? `  variants: {` : `  variants: {},`);
+  for (const k of recipe.keys) {
+    lines.push(`    ${key(k)}: {`);
+    for (const [value, cls] of Object.entries(recipe.byKey[k] ?? {})) lines.push(entry("      ", value, cls));
+    lines.push(`    },`);
+  }
+  if (recipe.keys.length) lines.push(`  },`);
+  const defaults = Object.fromEntries(recipe.keys.filter((k) => recipe.defaults[k] !== undefined).map((k) => [k, recipe.defaults[k]!]));
+  lines.push(`  defaultVariants: ${inline(defaults)},`);
+  if (recipe.compound?.length) {
+    lines.push(`  compoundVariants: [`);
+    for (const c of recipe.compound) {
+      const { class: cls = "", ...when } = c;
+      lines.push(`    ${inline({ ...when, class: cls }, "    ")},`);
+    }
+    lines.push(`  ],`);
+  }
+  lines.push(`});`);
+  return lines.join("\n");
+}
diff --git a/xgen/runtimes/core/src/view.ts b/xgen/runtimes/core/src/view.ts
new file mode 100644
index 0000000..31e2df4
--- /dev/null
+++ b/xgen/runtimes/core/src/view.ts
@@ -0,0 +1,303 @@
+// Turns a view tree (organism or screen) into markup. The walk is shared; what differs between Svelte, React, Vue and Solid is a `Syntax`:
+// blocks (`{#if}`, a ternary, `v-if`), loops, render-prop slots, event and prop names. Everything else is the same text.
+import type { Handler, OrganismSpec, PropType, Value, ViewNode } from "@ui8kit/xgen-screens";
+import { handlerUsesEvent, printCall, printValue, typesPath, type PrintCtx } from "@ui8kit/xgen-screens";
+import type { BrickDef, PartDef } from "@ui8kit/xgen-spec";
+import { printClassString } from "./variant-table";
+
+export interface PartRef { brick: BrickDef; part: PartDef }
+
+export interface Syntax {
+  runtime: "svelte" | "react" | "vue" | "solid";
+  /** name of a prop of a part in this runtime, from its canonical name */
+  propName(part: PartRef, canonical: string): string;
+  eventProp(event: string): string;
+  /** name of a free DOM attribute in this runtime (tabindex -> tabIndex in React) */
+  attrName(name: string): string;
+  /** callback prop of an organism / emit call: onselect | onSelect */
+  callbackName(event: string): string;
+  eventType: string;
+  /** the name of the class prop of an organism: class | className */
+  classProp: string;
+  /** a block `if` / `else if` chain; `branches` are [condition, lines]; `rest` is the final else (may be empty) */
+  ifChain(branches: Array<[string, string[]]>, rest: string[]): string[];
+  each(items: string, as: string, key: string, body: string[], index?: string): string[];
+  /** a slot the component receives; `fn` is true for a render prop with arguments, false for plain content (Snippet / ReactNode) */
+  slot(name: string, args: string[], fn: boolean, argNames?: string[]): string[];
+  /** organism children / props for render-prop slots; `fn` as in `slot`; `argNames` are the declared names of the arguments, `locals` the names the fill reads */
+  slotProp(name: string, params: string, body: string[], fn: boolean, argNames?: string[], locals?: string[]): { attr?: string[]; child?: string[] };
+  /** a slot of the organism passed on to an organism it renders (default: the same prop, `name={from}`) */
+  forward?(name: string, from: string): { attr?: string[]; child?: string[] };
+  /** an attribute in the text of this runtime, from the brace form (`name={expr}`, `name="text"`, `{...rest}`); default: unchanged */
+  attr?(text: string): string;
+  /** a text node from its expression; default `{expr}` */
+  text?(expr: string): string;
+  /** wrap several top-level nodes */
+  fragment(lines: string[]): string[];
+}
+
+export interface WalkEnv {
+  syntax: Syntax;
+  parts: Record<string, PartRef>;
+  organisms: Record<string, OrganismSpec>;
+  print: PrintCtx;
+  /** parts and organisms used (for the imports) */
+  usedParts: Set<string>;
+  usedOrganisms: Set<string>;
+  usesEach: { value: boolean };
+  /** arguments each slot of the organism being emitted takes (`children` is 0) */
+  slotArity?: Record<string, number>;
+  /** the declared names of the arguments of each slot (Vue scoped slots pass them by name) */
+  slotArgs?: Record<string, string[]>;
+  /** lines for the screen outlet */
+  outlet?: () => string[];
+  /** lines for a part of the screen layout (its component tag) */
+  part?: (name: string) => string[];
+}
+
+const pad = (lines: string[], n = 1): string[] => lines.map((l) => (l ? "  ".repeat(n) + l : l));
+export const typeName = (t: PropType): string => (typeof t === "string" ? t : "record" in t ? t.record : t.ts);
+
+const safeAttr = /^[^"{}<>&\\\n]*$/;
+function attrText(name: string, v: Value, env: WalkEnv): string {
+  if (typeof v === "string") return safeAttr.test(v) ? `${name}="${v}"` : `${name}={${JSON.stringify(v)}}`;
+  return `${name}={${printValue(v, env.print)}}`;
+}
+
+/** the TypeScript text of a prop type */
+const typeText = (t: PropType): string => (typeof t === "string" ? t : "ts" in t ? t.ts : t.record);
+
+/** the parameter list of a handler on an organism event: `arg` is the first argument the event carries (typed by the event), `event` the DOM event of a native element */
+function paramsOf(ev: string, h: Handler, org: Pick<OrganismSpec, "events">, eventType: string): string {
+  if (JSON.stringify(h.args ?? []).includes('"$":"arg"')) {
+    const a = org.events.find((e) => e.name === ev)?.args[0];
+    return `(arg: ${a ? typeText(a.type) : "unknown"})`;
+  }
+  return handlerUsesEvent(h) ? `(event: ${eventType})` : "()";
+}
+
+function handlerText(ev: string, h: Handler, env: WalkEnv): string {
+  const s = env.syntax;
+  const call = printCall(h, env.print);
+  return `${s.eventProp(ev)}={${handlerUsesEvent(h) ? `(event: ${s.eventType}) => ${call}` : `() => ${call}`}}`;
+}
+
+/** the top-level arguments of a call text: `"a, b", f(x, y), c` -> three parts (quotes and brackets respected) */
+export function splitArgs(text: string): string[] {
+  const out: string[] = [];
+  let depth = 0;
+  let quote = "";
+  let from = 0;
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i]!;
+    if (quote) { if (c === quote && text[i - 1] !== "\\") quote = ""; continue; }
+    if (c === '"' || c === "'" || c === "`") quote = c;
+    else if ("([{".includes(c)) depth++;
+    else if (")]}".includes(c)) depth--;
+    else if (c === "," && depth === 0) { out.push(text.slice(from, i).trim()); from = i + 1; }
+  }
+  out.push(text.slice(from).trim());
+  return out.filter(Boolean);
+}
+
+/** `(test ? then : else)` split at its top-level `?` and `:`; undefined when the text is not one parenthesized conditional */
+export function splitTernary(text: string): { test: string; then: string; else: string } | undefined {
+  if (!text.startsWith("(") || !text.endsWith(")")) return undefined;
+  const inner = text.slice(1, -1);
+  let depth = 0, quote = "", q = -1;
+  for (let i = 0; i < inner.length; i++) {
+    const c = inner[i]!;
+    if (quote) { if (c === quote && inner[i - 1] !== "\\") quote = ""; continue; }
+    if (c === '"' || c === "'" || c === "`") quote = c;
+    else if ("([{".includes(c)) depth++;
+    else if (")]}".includes(c)) { depth--; if (depth < 0) return undefined; }
+    else if (depth === 0 && inner.startsWith(" ? ", i) && q < 0) q = i;
+    else if (depth === 0 && inner.startsWith(" : ", i) && q >= 0) return { test: inner.slice(0, q), then: inner.slice(q + 3, i), else: inner.slice(i + 3) };
+  }
+  return undefined;
+}
+
+/** one pair of parentheses around the whole text dropped: `(a === b)` -> `a === b` */
+const unwrap = (text: string): string => (text.startsWith("(") && text.endsWith(")") && splitArgs(text.slice(1, -1)).length === 1 && balanced(text.slice(1, -1)) ? text.slice(1, -1) : text);
+const balanced = (text: string): boolean => {
+  let depth = 0;
+  for (const c of text.replace(/"[^"]*"/g, "")) { if (c === "(") depth++; else if (c === ")" && --depth < 0) return false; }
+  return depth === 0;
+};
+
+/** a chain of conditionals as one choice per line (`a ? x` / `: b ? y` / `: z`); undefined when the text is not a conditional */
+export function chainLines(text: string): string[] | undefined {
+  const lines: string[] = [];
+  let rest = text;
+  for (let t = splitTernary(rest); t; t = splitTernary(rest)) {
+    lines.push(`${lines.length ? ": " : ""}${unwrap(t.test)} ? ${t.then}`);
+    rest = t.else;
+  }
+  return lines.length ? [...lines, `: ${rest}`] : undefined;
+}
+
+/** a `cn(...)` call as one argument per line (`cn(` / `  a,` / `)`); undefined when the text is not one cn call */
+export function cnLines(text: string): string[] | undefined {
+  const m = /^cn\((.*)\)$/.exec(text);
+  if (!m || !balanced(m[1]!)) return undefined;
+  return ["cn(", ...splitArgs(m[1]!).map((a) => `  ${a},`), ")"];
+}
+
+/** a long attribute on its own lines: class strings cut at spaces, `cn(...)` with one argument per line */
+export function formatAttr(attr: string, width = 100): string {
+  if (attr.length <= width || attr.includes("\n")) return attr;
+  const str = /^([\w:-]+)="([^"]*)"$/.exec(attr);
+  if (str) return `${str[1]}={${printClassString(str[2]!, "  ")}}`;
+  // a grouped prop: one field per line
+  const group = /^([\w:-]+)=\{\{ (.*) \}\}$/.exec(attr);
+  if (group) return `${group[1]}={{\n${splitArgs(group[2]!).map((f) => `  ${f},`).join("\n")}\n}}`;
+  // a chain of conditionals: one choice per line
+  const expr = /^([\w:-]+)=\{(\(.*\))\}$/.exec(attr);
+  const chain = expr ? chainLines(expr[2]!) : undefined;
+  if (expr && chain) return `${expr[1]}={\n${chain.map((l) => `  ${l}`).join("\n")}\n}`;
+  const call = /^([\w:-]+)=\{cn\((.*)\)\}$/.exec(attr);
+  if (call) {
+    const args = splitArgs(call[2]!).map((a) => {
+      if (/^"[^"]*"$/.test(a)) return printClassString(JSON.parse(a) as string, "    ");
+      const chain = a.length > width - 4 ? chainLines(a) : undefined;
+      return chain ? `(\n${chain.map((l) => `    ${l}`).join("\n")}\n  )` : a;
+    });
+    return `${call[1]}={cn(\n${args.map((a) => `  ${a}`).join(",\n")}\n)}`;
+  }
+  return attr;
+}
+
+/** an opening tag on one line when it fits, else one attribute per line: `<a x y>` / `<a\n  x\n  y\n>`; `end` is ">" or "/>" */
+export function tagHead(tag: string, attrs: string[], end: ">" | "/>", width = 100): string {
+  const close = end === "/>" ? " />" : ">";
+  const one = `<${[tag, ...attrs].join(" ")}${close}`;
+  if (one.length <= width || !attrs.length) return one;
+  return `<${tag}\n${attrs.map((a) => a.split("\n").map((l) => `  ${l}`).join("\n")).join("\n")}\n${end}`;
+}
+
+/** a list in one line when it fits, else one item per line: `let { a, b }` / `let {\n  a,\n  b\n}` */
+export function wrapList(open: string, items: string[], close: string, width = 110, indent = ""): string {
+  const one = `${indent}${open} ${items.join(", ")} ${close}`;
+  if (one.length <= width) return one;
+  return `${indent}${open}\n${items.map((x) => `${indent}  ${x},`).join("\n")}\n${indent}${close}`;
+}
+
+/** a comment cut into lines under the width (its own line breaks are kept) */
+export function wrapText(text: string, width = 110): string[] {
+  const lines: string[] = [];
+  for (const para of text.split("\n")) {
+    let line = "";
+    for (const word of para.split(" ")) {
+      if (line && line.length + word.length + 1 > width) { lines.push(line); line = word; } else line = line ? `${line} ${word}` : word;
+    }
+    if (line || !para) lines.push(line);
+  }
+  return lines;
+}
+
+function openTag(tag: string, rawAttrs: string[], children: string[], fix: (attr: string) => string = (a) => a): string[] {
+  const attrs = rawAttrs.map((a) => fix(formatAttr(a)));
+  const head = [tag, ...attrs].join(" ");
+  const multi = attrs.some((a) => a.includes("\n"));
+  if (!children.length && !multi && (head.length <= 110 || attrs.length < 2)) return [`<${head} />`];
+  if (multi || (head.length > 110 && attrs.length > 1)) {
+    const a = pad(attrs.flatMap((x) => x.split("\n")));
+    return children.length ? [`<${tag}`, ...a, ">", ...pad(children), `</${tag}>`] : [`<${tag}`, ...a, "/>"];
+  }
+  return [`<${head}>`, ...pad(children), `</${tag}>`];
+}
+
+export function walkNodes(nodes: ViewNode[], env: WalkEnv): string[] {
+  return nodes.flatMap((n) => walkNode(n, env));
+}
+
+function walkNode(n: ViewNode, env: WalkEnv): string[] {
+  const s = env.syntax;
+  if ("use" in n) {
+    const ref = env.parts[n.use]!;
+    env.usedParts.add(n.use);
+    const attrs: string[] = [];
+    for (const [k, v] of Object.entries(n.props ?? {})) if (!(k === "Class" && v === "")) attrs.push(attrText(s.propName(ref, k), v, env));
+    for (const [k, v] of Object.entries(n.attrs ?? {})) attrs.push(attrText(s.attrName(k), v, env));
+    for (const [ev, h] of Object.entries(n.on ?? {})) attrs.push(handlerText(ev, h, env));
+    return openTag(n.use, attrs, walkNodes(n.children ?? [], env), s.attr);
+  }
+  if ("text" in n) return [s.text ? s.text(printValue(n.text, env.print)) : `{${printValue(n.text, env.print)}}`];
+  if ("when" in n) {
+    // an else that is one more test continues the chain: `a ? x : b ? y : z`, `{:else if b}`
+    const branches: Array<[string, string[]]> = [];
+    let at: ViewNode | undefined = n;
+    let rest: ViewNode[] = [];
+    while (at && "when" in at) {
+      branches.push([printValue(at.when, env.print), walkNodes(at.then, env)]);
+      const other: ViewNode[] = at.else ?? [];
+      if (other.length === 1 && "when" in other[0]!) at = other[0];
+      else { rest = other; at = undefined; }
+    }
+    return s.ifChain(branches, walkNodes(rest, env));
+  }
+  if ("each" in n) {
+    env.usesEach.value = true;
+    return s.each(printValue(n.each, env.print), n.as, printValue(n.key, env.print), walkNodes(n.do, env), n.index);
+  }
+  if ("slot" in n) return s.slot(n.slot, (n.args ?? []).map((a) => printValue(a, env.print)), (env.slotArity?.[n.slot] ?? (n.args ?? []).length) > 0, env.slotArgs?.[n.slot]);
+  if ("organism" in n) {
+    const org = env.organisms[n.organism]!;
+    env.usedOrganisms.add(n.organism);
+    const attrs: string[] = [];
+    for (const [k, v] of Object.entries(n.props ?? {})) attrs.push(attrText(k === "className" ? s.classProp : k, v, env));
+    for (const [ev, h] of Object.entries(n.on ?? {})) attrs.push(`${s.callbackName(ev)}={${paramsOf(ev, h, org, s.eventType)} => ${printCall(h, env.print)}}`);
+    const children: string[] = [];
+    for (const [name, sl] of Object.entries(n.slots ?? {})) {
+      // a forwarded slot is the same prop in both runtimes: a snippet (Svelte) or a node / render function (React)
+      if (sl.forward !== undefined) {
+        const out = s.forward ? s.forward(name, sl.forward) : { attr: [`${name}={${sl.forward}}`] };
+        if (out.attr) attrs.push(...out.attr);
+        if (out.child) children.push(...out.child);
+        continue;
+      }
+      if (name === "children") { children.push(...walkNodes(sl.do, env)); continue; }
+      const decl = org.slots.find((x) => x.name === name)!;
+      const params = sl.args.map((a, i) => `${a}: ${typeName(decl.args[i]!.type)}`).join(", ");
+      const out = s.slotProp(name, params, walkNodes(sl.do, env), decl.args.length > 0, decl.args.map((a) => a.name), sl.args);
+      if (out.attr) attrs.push(...out.attr);
+      if (out.child) children.push(...out.child);
+    }
+    return openTag(n.organism, attrs, children, s.attr);
+  }
+  if ("outlet" in n) return env.outlet ? env.outlet() : [];
+  if ("part" in n) return env.part ? env.part(n.part) : [];
+  return [];
+}
+
+/** the records of an organism as TypeScript types (one file, shared by the Svelte and React packages) */
+/** optional props that hold a group of fields (a record type): their fields are read with `?.` (`actions?.cta`) */
+export function optionalGroups(org: OrganismSpec): string[] {
+  return org.props.filter((p) => !p.required && typeof p.type === "object" && ("record" in p.type || /^[A-Z]\w*$/.test(p.type.ts))).map((p) => p.name);
+}
+
+export function recordTypes(org: OrganismSpec, organisms: Record<string, OrganismSpec> = {}): string {
+  const types = Object.entries(org.records)
+    .map(([name, fields]) => `export type ${name} = {\n${fields.map((f) => `${f.docs ? `  /** ${f.docs} */\n` : ""}  ${f.name}${f.optional ? "?" : ""}: ${f.type};`).join("\n")}\n};`)
+    .join("\n\n");
+  // the record types of other components a grouped prop reads (`links: NavLink[]`)
+  const imports = (org.typeImports ?? []).flatMap((t) => {
+    const used = t.names.filter((n) => new RegExp(`\\b${n}\\b`).test(types));
+    const other = organisms[t.from];
+    return used.length && other ? [`import type { ${used.join(", ")} } from "${typesPath(org.id, other)}";`] : [];
+  });
+  return imports.length ? `${imports.join("\n")}\n\n${types}` : types;
+}
+
+
+/** the const tables of an organism that hold pictures as data URIs: they go to a `<name>.assets.ts` file next to the component */
+export const assetTables = (org: OrganismSpec): string[] =>
+  Object.entries(org.consts ?? {}).filter(([, table]) => Object.values(table).some((v) => v.includes("data:image/"))).map(([name]) => name);
+
+/** the `<name>.assets.ts` file of an organism: its long const tables, exported */
+export function assetFile(org: OrganismSpec, header: string): string {
+  const names = new Set(assetTables(org));
+  const tables = Object.entries(org.consts ?? {}).filter(([name]) => names.has(name));
+  const body = tables.flatMap(([name, table]) => [`export const ${name}: Record<string, string> = {`, ...Object.entries(table).map(([k, v]) => `  ${JSON.stringify(k)}: ${JSON.stringify(v)},`), `};`]);
+  return `${header}\n// Data of ${org.name}: long values (pictures as data URIs) kept out of the component file.\n\n${body.join("\n")}\n`;
+}
diff --git a/xgen/runtimes/core/test/decks.test.ts b/xgen/runtimes/core/test/decks.test.ts
new file mode 100644
index 0000000..49977aa
--- /dev/null
+++ b/xgen/runtimes/core/test/decks.test.ts
@@ -0,0 +1,38 @@
+import { expect, test } from "bun:test";
+import { buildDecks, decksFile, DECK_COLLECTIONS } from "../src/decks";
+import { BANNER } from "../src/common";
+
+const e = (id: string, title: string, metadata: Record<string, unknown>) => ({ id, title, metadata: Object.fromEntries(Object.entries(metadata).map(([k, v]) => [k, { value: v }])) });
+const cols = [
+  { collection: DECK_COLLECTIONS.deck, entries: [e("d1", "Fernwick", { nav: ["A"], eyebrow: "E", headline: "T", accent: "Ac", lead: "L", cta: "C", secondary: "S", input: "I", note: "N", tags: ["x"] })] },
+  { collection: DECK_COLLECTIONS.stats, entries: [e("s2", "Later", { deck: "d1", position: 2, value: "4.9/5" }), e("s1", "First", { deck: "d1", position: 1, value: "24/7" }), e("s3", "Other", { deck: "d9", position: 1, value: "1" })] },
+  { collection: DECK_COLLECTIONS.items, entries: [] },
+  { collection: DECK_COLLECTIONS.faq, entries: [e("f1", "Q", { deck: "d1", position: 1, answer: "A" })] },
+];
+
+test("a deck is built from its entry and its parts, each part in its position, in the key order of the Deck type", () => {
+  const [d] = buildDecks(cols);
+  expect(Object.keys(d!)).toEqual(["brand", "nav", "eyebrow", "title", "accent", "lead", "cta", "secondary", "input", "note", "stats", "items", "tags", "faq"]);
+  expect(d!.stats).toEqual([{ value: "24/7", label: "First" }, { value: "4.9/5", label: "Later" }]);
+  expect(d!.items).toEqual([]);
+  expect(d!.faq).toEqual([{ title: "Q", text: "A" }]);
+  expect("plans" in d!).toBe(false);
+});
+
+test("the decks file carries the banner and the decks", () => {
+  const f = decksFile(cols);
+  expect(f.path).toBe("copy.json");
+  const json = JSON.parse(f.contents);
+  expect(json["//"]).toBe(BANNER);
+  expect(json.decks).toHaveLength(1);
+});
+
+test("the deck fixtures: every deck has stats and items (screens read them with no fallback), every part names a deck", async () => {
+  const { readFileSync } = await import("node:fs");
+  const { join } = await import("node:path");
+  const load = (c: string) => JSON.parse(readFileSync(join(import.meta.dir, "..", "..", "..", "fixtures", `${c}.json`), "utf8"));
+  const all = Object.values(DECK_COLLECTIONS).map(load);
+  const ids = new Set(all[0].entries.map((x: { id: string }) => x.id));
+  for (const c of all.slice(1)) for (const x of c.entries) expect([x.id, ids.has(x.metadata.deck.value)]).toEqual([x.id, true]);
+  for (const d of buildDecks(all)) expect([d.brand, (d.stats as unknown[]).length > 0, (d.items as unknown[]).length > 0]).toEqual([d.brand, true, true]);
+});
diff --git a/xgen/runtimes/core/test/format.test.ts b/xgen/runtimes/core/test/format.test.ts
new file mode 100644
index 0000000..9296853
--- /dev/null
+++ b/xgen/runtimes/core/test/format.test.ts
@@ -0,0 +1,15 @@
+import { expect, test } from "bun:test";
+import { at, pageWindow, tpl } from "../assets/ts/format";
+
+test("pageWindow keeps the first, the last and the neighbours of the current page", () => {
+  expect(pageWindow(1, 1)).toEqual([1]);
+  expect(pageWindow(1, 3)).toEqual([1, 2, 3]);
+  expect(pageWindow(5, 21)).toEqual([1, null, 4, 5, 6, null, 21]);
+  expect(pageWindow(2, 21)).toEqual([1, 2, 3, null, 21]);
+  expect(pageWindow(21, 21)).toEqual([1, null, 20, 21]);
+});
+
+test("tpl and at", () => {
+  expect(tpl("Page {0} of {1}", 2, 9)).toBe("Page 2 of 9");
+  expect(at({ a: "A" }, "b")).toBe("b");
+});
diff --git a/xgen/runtimes/core/test/runtime.test.ts b/xgen/runtimes/core/test/runtime.test.ts
new file mode 100644
index 0000000..ad3f315
--- /dev/null
+++ b/xgen/runtimes/core/test/runtime.test.ts
@@ -0,0 +1,170 @@
+import { expect, test } from "bun:test";
+import { isRouteHash, buildHash, collectionView, fromCodex, matchRoute, parseHash, parseSort, screenActions, type UrlPort } from "../assets/app/core";
+import { at, fmtMoney, fmtNumber, tpl } from "../assets/ts/format";
+
+const rows = [
+  { name: "Beta", price: 20, tagline: "second" },
+  { name: "Alpha", price: 30, tagline: "first" },
+  { name: "Gamma", price: 10, tagline: "third" },
+  { name: "Delta", price: 5, tagline: "alpha again" },
+];
+const cfg = { searchFields: ["name", "tagline"], pageSize: 3, defaultSort: "price:asc" } as const;
+
+test("collectionView sorts, searches and pages", () => {
+  const v = collectionView(rows, cfg, {});
+  expect(v.rows.map((r) => r.name)).toEqual(["Delta", "Gamma", "Beta"]);
+  expect([v.total, v.page, v.pages, v.from, v.to]).toEqual([4, 1, 2, 1, 3]);
+  expect(collectionView(rows, cfg, { sort: "name:desc" }).rows.map((r) => r.name)).toEqual(["Gamma", "Delta", "Beta"]);
+  expect(collectionView(rows, cfg, { q: "ALPHA" }).rows.map((r) => r.name)).toEqual(["Delta", "Alpha"]);
+  const p2 = collectionView(rows, cfg, { page: "2" });
+  expect(p2.rows.map((r) => r.name)).toEqual(["Alpha"]);
+  expect(p2.qs).toBe("?page=2");
+  expect(collectionView(rows, cfg, { page: "99" }).page).toBe(2);
+  expect(collectionView(rows, cfg, { q: "zzz" })).toMatchObject({ total: 0, from: 0, to: 0, pages: 1 });
+});
+
+test("the query string keeps only what differs from the defaults", () => {
+  expect(collectionView(rows, cfg, { sort: "price:asc" }).qs).toBe("");
+  expect(collectionView(rows, cfg, { sort: "name:desc", q: "a" }).qs).toBe("?q=a&sort=name:desc");
+  expect(parseSort(undefined, "price:asc")).toEqual({ field: "price", dir: "asc" });
+});
+
+test("fromCodex flattens entries by path", () => {
+  const out = fromCodex<{ title: string; price: number }>([{ title: "X", locale: "en", metadata: { price: { value: 7 } } }], { title: "title", price: "metadata.price.value" });
+  expect(out).toEqual([{ title: "X", price: 7 }]);
+});
+
+test("routes match with params", () => {
+  const routes = [{ path: "plans", area: "list" }, { path: "plans/:id", area: "record" }];
+  expect(matchRoute(routes, "plans")).toEqual({ area: "list", params: {} });
+  expect(matchRoute(routes, "plans/a%20b")).toEqual({ area: "record", params: { id: "a b" } });
+  expect(matchRoute(routes, "other")).toBeNull();
+});
+
+test("hash parse and build round-trip", () => {
+  const h = buildHash("plans", { sort: "price:desc", page: undefined, q: "a b" });
+  expect(h).toBe("#/plans?sort=price:desc&q=a+b");
+  expect(parseHash(h)).toEqual({ path: "plans", query: { sort: "price:desc", q: "a b" } });
+  expect(parseHash("")).toEqual({ path: "", query: {} });
+  expect([isRouteHash(""), isRouteHash("#/pricing"), isRouteHash("#main-content")]).toEqual([true, true, false]);
+});
+
+test("screen actions only change the URL and keep the list state", () => {
+  const calls: Array<[string, Record<string, string | undefined> | undefined]> = [];
+  const url: UrlPort = { path: "plans", query: { sort: "name:asc" }, go: (p, q) => calls.push([p, q]) };
+  const view = collectionView(rows, cfg, { sort: "name:asc" });
+  const a = screenActions(url, view, "plans", (id) => `plans/${id}`, () => {});
+  a.sort("name");
+  a.search("x");
+  a.page(2);
+  a.open("p1");
+  a.back();
+  expect(calls).toEqual([
+    ["plans", { sort: "name:desc", page: undefined }],
+    ["plans", { sort: "name:asc", q: "x", page: undefined }],
+    ["plans", { sort: "name:asc", page: "2" }],
+    ["plans/p1", { sort: "name:asc" }],
+    ["plans", { sort: "name:asc" }],
+  ]);
+});
+
+test("formatters", () => {
+  expect(tpl("{0} of {1}", 2, 5)).toBe("2 of 5");
+  expect(fmtMoney(149900, "USD")).toBe("$1,499");
+  expect(fmtMoney(1250, "USD")).toBe("$12.50");
+  expect(fmtMoney(5, "EUR")).toBe("€0.05");
+  expect(fmtMoney(-2500, "USD")).toBe("-$25");
+  expect(fmtMoney(1500, "JPY")).toBe("¥1,500");
+  expect(fmtNumber(12000)).toBe("12,000");
+  expect(at({ a: "A" }, "a")).toBe("A");
+  expect(at({ a: "A" }, "b")).toBe("b");
+});
+
+test("uniqLabel drops a segment equal to the one before it", async () => {
+  const { uniqLabel } = await import("../assets/ts/format");
+  expect(uniqLabel("Footer, Footer, Centered")).toBe("Footer, Centered");
+  expect(uniqLabel("Main navigation, main navigation, Bar")).toBe("Main navigation, Bar");
+  expect(uniqLabel("Footer, Centered, Footer")).toBe("Footer, Centered, Footer");
+  expect(uniqLabel(undefined)).toBe("");
+});
+
+test("dates: absolute, relative against the demo clock, pipes in field paths", async () => {
+  const { fmtDate, fmtAgo, readPath, DEMO_NOW } = await import("../assets/app/core");
+  expect(fmtDate("2026-03-09T10:00:00Z")).toBe("Mar 09, 2026");
+  expect(fmtDate("not a date")).toBe("not a date");
+  const before = (min: number) => new Date(Date.parse(DEMO_NOW) - min * 60000).toISOString();
+  expect([2, 60, 1440, 2880, 20160].map((m) => fmtAgo(before(m)))).toEqual(["2 min ago", "1 h ago", "Yesterday", "2 days ago", "2 weeks ago"]);
+  expect([1440, 7200, 10080].map((m) => fmtAgo(before(m), DEMO_NOW, "ago-days"))).toEqual(["1 day ago", "5 days ago", "1 week ago"]);
+  expect([300, 4320].map((m) => fmtAgo(before(m), DEMO_NOW, "ago-short"))).toEqual(["5 h ago", "3 d ago"]);
+  const e = { metadata: { date: { value: "2026-03-18T10:00:00Z" } } };
+  expect(readPath(e, "metadata.date.value|date")).toBe("Mar 18, 2026");
+  expect(readPath(e, "metadata.date.value|ago", { now: "2026-03-18T10:05:00Z" })).toBe("5 min ago");
+  expect(readPath(e, "metadata.nope.value|date")).toBeUndefined();
+  expect(() => readPath(e, "metadata.date.value|weird")).toThrow();
+});
+
+test("locale: dates and relative times follow the entry's locale (or the app's), en stays as it was", async () => {
+  const { fmtDate, fmtAgo, readPath, DEMO_NOW } = await import("../assets/app/core");
+  const iso = "2026-03-09T10:00:00Z";
+  expect(fmtDate(iso, "de")).toBe(new Intl.DateTimeFormat("de", { month: "short", day: "2-digit", year: "numeric", timeZone: "UTC" }).format(Date.parse(iso)));
+  expect(fmtDate(iso, "en-US")).toBe("Mar 09, 2026");
+  const before = (min: number) => new Date(Date.parse(DEMO_NOW) - min * 60000).toISOString();
+  const rt = (loc: string, n: number, u: Intl.RelativeTimeFormatUnit, numeric: "auto" | "always" = "auto") => { const s = new Intl.RelativeTimeFormat(loc, { numeric }).format(-n, u); return s.charAt(0).toLocaleUpperCase(loc) + s.slice(1); };
+  expect(fmtAgo(before(2), DEMO_NOW, "ago", "de")).toBe(rt("de", 2, "minute"));
+  expect(fmtAgo(before(1440), DEMO_NOW, "ago", "de")).toBe(rt("de", 1, "day"));
+  expect(fmtAgo(before(7200), DEMO_NOW, "ago-days", "fr")).toBe(rt("fr", 5, "day", "always"));
+  const e = { locale: "de", metadata: { date: { value: "2026-03-18T10:00:00Z" } } };
+  expect(readPath(e, "metadata.date.value|date")).toBe(fmtDate("2026-03-18T10:00:00Z", "de"));
+  expect(readPath(e, "metadata.date.value|date", { locale: "en" })).toBe("Mar 18, 2026");
+});
+
+test("media and routes: an image from featured_media_id, a link from the slug, nothing without them", async () => {
+  const { readPath, fromCodex } = await import("../assets/app/core");
+  const media = [{ id: "media-a", kind: "media", status: "published", metadata: { file: { value: "/media/a.webp" } } }];
+  const e = { id: "p", kind: "product", slug: "arc lamp", featured_media_id: "media-a" };
+  expect(readPath(e, "featured_media_id|media", { media })).toBe("/media/a.webp");
+  expect(readPath(e, "featured_media_id|media")).toBeUndefined();
+  expect(readPath({ ...e, featured_media_id: "media-x" }, "featured_media_id|media", { media })).toBeUndefined();
+  expect(readPath(e, "slug|route", { routes: { product: "#/product/{slug}" } })).toBe("#/product/arc%20lamp");
+  expect(readPath(e, "slug|route", { routes: { post: "#/post/{slug}" } })).toBeUndefined();
+  expect(fromCodex([e], { href: "slug|route", image: "featured_media_id|media" })).toEqual([{ href: undefined, image: undefined }]);
+  // a draft media entry (no uploaded asset) gives no file: the placeholder
+  expect(readPath(e, "featured_media_id|media", { media: [{ ...media[0], status: "draft" }] })).toBeUndefined();
+});
+
+test("authors and terms: author_id prints the user's display name, terms|term:<taxonomy> the name of the term, by locale", async () => {
+  const { readPath } = await import("../assets/app/core");
+  const users = [{ id: "user-a", locale: "en", kind: "user", title: "a", metadata: { display_name: { value: "Ann Lee" } } }];
+  const terms = [
+    { id: "category-design", locale: "en", taxonomy_id: "category", name: "Design", slug: "design" },
+    { id: "category-design", locale: "de", taxonomy_id: "category", name: "Gestaltung", slug: "gestaltung" },
+    { id: "tag-x", locale: "en", taxonomy_id: "tag", name: "X", slug: "x" },
+  ];
+  const e = { id: "p", locale: "en", kind: "post", author_id: "user-a", terms: [{ taxonomy: "tag", term_id: "tag-x" }, { taxonomy: "category", term_id: "category-design" }] };
+  expect(readPath(e, "author_id|author", { users })).toBe("Ann Lee");
+  expect(readPath(e, "author_id|author", { users: [{ ...users[0], metadata: {} }] })).toBe("a");
+  expect(readPath(e, "author_id|author")).toBeUndefined();
+  expect(readPath(e, "terms|term:category", { terms })).toBe("Design");
+  expect(readPath({ ...e, locale: "de" }, "terms|term:category", { terms })).toBe("Gestaltung");
+  expect(readPath(e, "terms|term:tag", { terms })).toBe("X");
+  expect(readPath(e, "terms|term:brand", { terms })).toBeUndefined();
+  expect(readPath(e, "terms|term:category")).toBeUndefined();
+});
+
+test("figures, term slugs and trails: |number formats by locale with the unit, |term-slug: gives the slug, trail() follows parent_id", async () => {
+  const { readPath, trail } = await import("../assets/app/core");
+  const stat = (value: unknown, unit?: string) => ({ id: "s", locale: "en", kind: "stat", metadata: { value: { value }, ...(unit ? { unit: { value: unit } } : {}) } });
+  expect(readPath(stat(12400), "metadata.value.value|number")).toBe("12,400");
+  expect(readPath(stat(99.99, "percent"), "metadata.value.value|number")).toBe("99.99%");
+  expect(readPath(stat(0.8, "second"), "metadata.value.value|number")).toBe("0.8s");
+  expect(readPath(stat(12400), "metadata.value.value|number", { locale: "de" })).toBe("12.400");
+  // |compact: a count in short form (template views and likes)
+  expect(readPath({ metadata: { views: { value: 1200 } } }, "metadata.views.value|compact")).toBe("1.2K");
+  expect(readPath({ metadata: { views: { value: 96 } } }, "metadata.views.value|compact")).toBe("96");
+  expect(readPath(stat("12,400"), "metadata.value.value|number")).toBeUndefined();
+  const terms = [{ id: "faq-category-billing", locale: "en", taxonomy_id: "faq_category", name: "Billing", slug: "billing" }];
+  expect(readPath({ id: "f", locale: "en", terms: [{ taxonomy: "faq_category", term_id: "faq-category-billing" }] }, "terms|term-slug:faq_category", { terms })).toBe("billing");
+  const pages = [{ id: "c", parent_id: "b" }, { id: "a" }, { id: "b", parent_id: "a" }, { id: "x", parent_id: "a" }];
+  expect(trail(pages, "c").map((p) => p.id)).toEqual(["a", "b", "c"]);
+  expect(trail(pages.slice(0, 3)).map((p) => p.id)).toEqual(["a", "b", "c"]);
+});
diff --git a/xgen/runtimes/core/test/screen-model.test.ts b/xgen/runtimes/core/test/screen-model.test.ts
new file mode 100644
index 0000000..6a628ba
--- /dev/null
+++ b/xgen/runtimes/core/test/screen-model.test.ts
@@ -0,0 +1,25 @@
+import { expect, test } from "bun:test";
+import type { ScreenSpec } from "@ui8kit/xgen-screens";
+import { chunksOf, printConst } from "../src/screen-model";
+
+test("printConst keeps short tables on one line and wraps wide ones", () => {
+  expect(printConst("A", { a: "b" })).toBe('const A = {"a":"b"} as const;');
+  expect(printConst("R", [{ path: "" }, { path: "x" }], 20)).toBe('const R = [\n  {"path":""},\n  {"path":"x"},\n] as const;');
+});
+
+const src = { collection: "faq", kind: "faq", record: "Faq", fields: { id: "id" } };
+const page = (areas: ScreenSpec["areas"], chunks = true): ScreenSpec => ({
+  specVersion: 1, id: "screen.t", name: "TScreen", docs: "", kind: "page", sources: [{ ...src, as: "faq" }, { ...src, as: "other" }],
+  routes: Object.keys(areas).map((a) => ({ path: a, area: a })), organisms: [], layout: [], areas, ...(chunks ? { chunks } : {}), portable: { svelte: true, react: true },
+});
+
+test("chunksOf: one file per area, reading only its own sources and actions", () => {
+  const s = page({ index: [{ $: "ui.x" } as never], "before-after": [{ props: { a: { $: "faq" } }, on: { click: { call: "actions.toggleTheme", args: [] } } } as never] });
+  const [index, ba] = chunksOf(s);
+  expect(index).toMatchObject({ area: "index", name: "IndexPage", dir: "TScreen", sources: [], actions: false, constsTs: "" });
+  expect(ba!.name).toBe("BeforeAfterPage");
+  expect(ba!.sources.map((x) => x.as)).toEqual(["faq"]);
+  expect(ba!.actions).toBe(true);
+  expect(chunksOf(page({ a: [] }, false))).toEqual([]);
+  expect(() => chunksOf(page({ a: [{ $: "route.area" } as never] }))).toThrow("reads route");
+});
diff --git a/xgen/runtimes/core/test/skins.test.ts b/xgen/runtimes/core/test/skins.test.ts
new file mode 100644
index 0000000..62357a5
--- /dev/null
+++ b/xgen/runtimes/core/test/skins.test.ts
@@ -0,0 +1,64 @@
+import { expect, test } from "bun:test";
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { authored, type ComposedSpec } from "@ui8kit/xgen-screens";
+import { hslOf, PICK, shadowsOf } from "../tools/tweakcn-skins";
+
+const dir = join(import.meta.dir, "..", "assets", "styles");
+const registry = JSON.parse(readFileSync(join(dir, "skins", "skins.json"), "utf8")) as Record<string, { label: string; fonts: string[] }>;
+const imports = [...readFileSync(join(dir, "skins.css"), "utf8").matchAll(/@import "\.\/skins\/([a-z0-9-]+)\.css";/g)].map((m) => m[1]);
+
+test("every skin of skins.json has its CSS file, imported by skins.css, with a light and a dark rule", () => {
+  for (const slug of Object.keys(registry)) {
+    const file = join(dir, "skins", `${slug}.css`);
+    expect(existsSync(file)).toBe(true);
+    expect(imports).toContain(slug);
+    const css = readFileSync(file, "utf8");
+    expect(css).toContain("--primary:");
+    expect(css).toContain(`[data-skin="${slug}"]`);
+    expect(css).toMatch(/\.dark, \[data-theme="dark"\]/);
+  }
+  // the tile reset and the scoped default come first, so a skin's own rule follows them
+  expect(imports.slice(0, 2)).toEqual(["base", "default"]);
+});
+
+test("the tweakcn import lists 14 presets, all in skins.json", () => {
+  expect(PICK.length).toBe(14);
+  for (const slug of PICK) expect(registry[slug]).toBeDefined();
+});
+
+test("the Skins screen shows default first, then skins that exist", () => {
+  const screen = authored.screens.find((s) => s.id === "screen.skins") as ComposedSpec | undefined;
+  const board = screen?.skins;
+  expect(board?.skins[0]).toBe("default");
+  expect(board?.skins.length).toBe(15);
+  for (const s of board?.skins.slice(1) ?? []) expect(registry[s]).toBeDefined();
+  expect(board?.fonts.length).toBe(10);
+  expect(board?.radii.map((r) => r.value)).toEqual(["0px", "4px", "8px", "12px", "16px"]);
+});
+
+test("shadow colours are printed the way tweakcn prints them", () => {
+  expect(hslOf("#000000")).toBe("0 0% 0%");
+  expect(hslOf("oklch(0 0 0)")).toBe("0 0% 0%");
+  expect(hslOf("hsl(325.78 58.18% 56.86% / 0.5)")).toBe("325.7800 58.1800% 56.8600%");
+  expect(hslOf("hsl(0 0% 0%)")).toBe("0 0% 0%");
+  const shadows = Object.fromEntries(shadowsOf({ "shadow-color": "hsl(0 0% 0%)", "shadow-opacity": "1", "shadow-blur": "0px", "shadow-spread": "0px", "shadow-offset-x": "4px", "shadow-offset-y": "4px" }));
+  expect(shadows["shadow-xs"]).toBe("4px 4px 0px 0px hsl(0 0% 0% / 0.50)");
+  expect(shadows["shadow-md"]).toBe("4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00)");
+});
+
+test("skin colours are hsl() (old browsers) and the contrast fixes hold", async () => {
+  const { readdirSync, readFileSync } = await import("node:fs");
+  const { contrast, FIXES, parseColor, toHslCss } = await import("../tools/skin-colors");
+  const dir = new URL("../assets/styles/skins/", import.meta.url).pathname;
+  for (const f of readdirSync(dir).filter((x) => x.endsWith(".css"))) {
+    const css = readFileSync(dir + f, "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
+    expect(css, f).not.toMatch(/oklch\(|rgba?\(|#[0-9a-fA-F]{3,8}\b/);
+  }
+  expect(toHslCss("#ffffff")).toBe("hsl(0 0% 100%)");
+  expect(toHslCss("oklch(1 0 0 / 10%)")).toBe("hsl(0 0% 100% / 10%)");
+  // a fixed surface token reaches 4.5:1 under its foreground, rounded hsl included
+  const c = (hex: string) => parseColor(toHslCss(hex, 0.25))!.rgb;
+  expect(contrast(c(FIXES["modern-minimal"]!.light.primary!), c("#ffffff"))).toBeGreaterThanOrEqual(4.5);
+  expect(contrast(c(FIXES["kodama-grove"]!.light["muted-foreground"]!), c("#ffffff"))).toBeGreaterThan(3);
+});
diff --git a/xgen/runtimes/core/test/variant-table.test.ts b/xgen/runtimes/core/test/variant-table.test.ts
new file mode 100644
index 0000000..87f3c36
--- /dev/null
+++ b/xgen/runtimes/core/test/variant-table.test.ts
@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import { printVariantTable, variantsName } from "../src/variant-table";
+import { variants } from "../assets/ts/variants";
+
+const recipe = {
+  base: "inline-flex",
+  keys: ["size", "shape"],
+  defaults: { size: "sm", shape: "pill" },
+  byKey: { size: { sm: "h-5 px-2", lg: "h-8 px-3" }, shape: { pill: "rounded-full", box: "" } },
+  compound: [{ size: "lg|xl", shape: "box", class: "rounded-lg px-4" }],
+};
+
+test("a variant table prints like a shadcn component and composes like the recipe", () => {
+  expect(variantsName("ui.badge")).toBe("badgeVariants");
+  expect(variantsName("section-frame")).toBe("sectionFrameVariants");
+  const code = printVariantTable("badgeVariants", recipe);
+  expect(code.split("\n")[0]).toBe("export const badgeVariants = variants({");
+  expect(code).toContain(`defaultVariants: { size: "sm", shape: "pill" },`);
+  const badge = variants({ base: recipe.base, variants: recipe.byKey, defaultVariants: recipe.defaults, compoundVariants: recipe.compound });
+  expect(badge()).toBe("inline-flex h-5 px-2 rounded-full");
+  // base, then each variant in table order, then the matching compounds; tailwind-merge keeps the later class
+  expect(badge({ size: "lg", shape: "box" })).toBe("inline-flex h-8 rounded-lg px-4");
+});
+
+test("long class strings wrap under the readability width", () => {
+  const long = Array.from({ length: 40 }, (_, i) => `class-${i}`).join(" ");
+  const code = printVariantTable("x", { base: long, keys: [], defaults: {}, byKey: {} });
+  for (const line of code.split("\n")) expect(line.length).toBeLessThanOrEqual(120);
+});
diff --git a/xgen/runtimes/core/tools/skin-colors.ts b/xgen/runtimes/core/tools/skin-colors.ts
new file mode 100644
index 0000000..f8d0cc0
--- /dev/null
+++ b/xgen/runtimes/core/tools/skin-colors.ts
@@ -0,0 +1,104 @@
+// Colour helpers for the skin CSS: every colour of a skin is written as hsl() (old browsers read hsl, not oklch), and the
+// contrast fixes of shots/discovery/contrast-report.md section 4 (OKLCH lightness only, >= 4.6:1) live in FIXES.
+// Used by tweakcn-skins.ts (the importer) and by skins-hsl.ts (the one-off converter of the existing files).
+
+export type Rgb = [number, number, number];
+
+const gammaOut = (x: number): number => Math.min(1, Math.max(0, x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055));
+const gammaIn = (x: number): number => (x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4);
+
+/** oklch (l 0-1, c, h degrees) to sRGB 0-1, clamped */
+export function oklchToRgb(l: number, c: number, h: number): Rgb {
+  const a = c * Math.cos((h * Math.PI) / 180), b = c * Math.sin((h * Math.PI) / 180);
+  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3, m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3, s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    gammaOut(4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_),
+    gammaOut(-1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_),
+    gammaOut(-0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_),
+  ];
+}
+
+/** a colour string (#rgb, #rrggbb, rgb(), hsl(), oklch(); alpha apart) to sRGB 0-1 and its alpha text ("" when opaque) */
+export function parseColor(c: string): { rgb: Rgb; alpha: string } | null {
+  const s = c.trim();
+  let m: RegExpMatchArray | null;
+  if ((m = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i))) {
+    const hex = m[1]!.length === 3 ? m[1]!.replace(/./g, (x) => x + x) : m[1]!;
+    const v = parseInt(hex, 16);
+    return { rgb: [((v >> 16) & 255) / 255, ((v >> 8) & 255) / 255, (v & 255) / 255], alpha: "" };
+  }
+  const alphaOf = (a: string | undefined): string => (a ? a.trim() : "");
+  if ((m = s.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[\/,]\s*([\d.]+%?))?\s*\)$/i))) {
+    return { rgb: [Number(m[1]) / 255, Number(m[2]) / 255, Number(m[3]) / 255], alpha: alphaOf(m[4]) };
+  }
+  if ((m = s.match(/^oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)(?:deg)?\s*(?:\/\s*([\d.]+%?))?\s*\)$/i))) {
+    const l = m[1]!.endsWith("%") ? parseFloat(m[1]!) / 100 : Number(m[1]);
+    return { rgb: oklchToRgb(l, Number(m[2]), Number(m[3])), alpha: alphaOf(m[4]) };
+  }
+  if ((m = s.match(/^hsl\(\s*([\d.]+)(?:deg)?\s+([\d.]+)%\s+([\d.]+)%\s*(?:\/\s*([\d.]+%?))?\s*\)$/i))) {
+    const [h, sat, l] = [Number(m[1]), Number(m[2]) / 100, Number(m[3]) / 100];
+    const k = (n: number): number => (n + h / 30) % 12, a = sat * Math.min(l, 1 - l);
+    const f = (n: number): number => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+    return { rgb: [f(0), f(8), f(4)], alpha: alphaOf(m[4]) };
+  }
+  return null;
+}
+
+export function rgbToHsl([r, g, b]: Rgb): [number, number, number] {
+  const max = Math.max(r, g, b), min = Math.min(r, g, b), l = (max + min) / 2, d = max - min;
+  if (d < 1e-9) return [0, 0, l * 100];
+  const s = d / (1 - Math.abs(2 * l - 1));
+  const h = max === r ? 60 * (((g - b) / d) % 6) : max === g ? 60 * ((b - r) / d + 2) : 60 * ((r - g) / d + 4);
+  return [h < 0 ? h + 360 : h, s * 100, l * 100];
+}
+
+export const luminance = ([r, g, b]: Rgb): number => 0.2126 * gammaIn(r) + 0.7152 * gammaIn(g) + 0.0722 * gammaIn(b);
+export function contrast(a: Rgb, b: Rgb): number {
+  const [x, y] = [luminance(a), luminance(b)];
+  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+
+/** CIE76 delta E between two sRGB colours (D65) */
+export function deltaE(a: Rgb, b: Rgb): number {
+  const lab = (c: Rgb): number[] => {
+    const [r, g, bl] = c.map(gammaIn) as Rgb;
+    const f = (t: number): number => (t > 216 / 24389 ? Math.cbrt(t) : (24389 / 27 * t + 16) / 116);
+    const x = f((0.4124564 * r + 0.3575761 * g + 0.1804375 * bl) / 0.95047), y = f(0.2126729 * r + 0.7151522 * g + 0.072175 * bl), z = f((0.0193339 * r + 0.119192 * g + 0.9503041 * bl) / 1.08883);
+    return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+  };
+  const [p, q] = [lab(a), lab(b)];
+  return Math.hypot(p[0]! - q[0]!, p[1]! - q[1]!, p[2]! - q[2]!);
+}
+
+const fmt = (n: number, d: number): string => String(Number(n.toFixed(d)));
+
+/** hsl() with the fewest decimals (0, 1, 2, 4) that stay within `maxDE` of the source colour; the alpha is kept as written */
+export function toHslCss(color: string, maxDE = 0.5): string {
+  const p = parseColor(color);
+  if (!p) throw new Error(`skin-colors: cannot read ${color}`);
+  const [h, s, l] = rgbToHsl(p.rgb);
+  for (const d of [0, 1, 2, 4]) {
+    const out = [Number(fmt(h, d)), Number(fmt(s, d)), Number(fmt(l, d))] as const;
+    const back = parseColor(`hsl(${out[0]} ${out[1]}% ${out[2]}%)`)!.rgb;
+    if (deltaE(back, p.rgb) <= maxDE || d === 4) return `hsl(${out[0]} ${out[1]}% ${out[2]}%${p.alpha ? ` / ${p.alpha}` : ""})`;
+  }
+  return "";
+}
+
+/** contrast fixes (report section 4, OKLCH lightness only): skin -> theme -> token -> sRGB hex of the fixed value */
+export const FIXES: Record<string, Record<"light" | "dark", Record<string, string>>> = {
+  default: { light: { "muted-foreground": "#6f6f6f", destructive: "#f11d1b" }, dark: { destructive: "#d13842" } },
+  "modern-minimal": { light: { primary: "#2a70e3", destructive: "#dd3035" }, dark: { primary: "#2a70e3", destructive: "#dd3035" } },
+  "violet-bloom": { light: { accent: "#ebf4ff", destructive: "#d53b42" }, dark: { primary: "#8453f5", destructive: "#ca474b" } },
+  bubblegum: { light: { "muted-foreground": "#5d5d5d", primary: "#c4448e", destructive: "#cc464b" }, dark: { accent: "#97506b" } },
+  "doom-64": { light: { "muted-foreground": "#424242", accent: "#3d79aa" }, dark: { primary: "#dd302e" } },
+  "amber-minimal": { light: { destructive: "#dd3035" }, dark: { destructive: "#dd3035" } },
+  "kodama-grove": { light: { "muted-foreground": "#625449", primary: "#6b792a", destructive: "#a55c50" }, dark: { "muted-foreground": "#bab2a8", destructive: "#94584d" } },
+  perpetuity: { light: { "muted-foreground": "#376f73", primary: "#00818a" }, dark: { destructive: "#d3232a" } },
+  "cosmic-night": { light: { "muted-foreground": "#6a6a88", destructive: "#db2f54" }, dark: { destructive: "#db2f54" } },
+  claude: { light: { "muted-foreground": "#696863", primary: "#bb5836" }, dark: { primary: "#b8593a", destructive: "#dd3035" } },
+  "mocha-mousse": { light: { "muted-foreground": "#704d43", primary: "#966b59", secondary: "#81735c" }, dark: { "muted-foreground": "#d0b4a5", secondary: "#886358" } },
+  "neo-brutalism": { light: { primary: "#e90a1d" }, dark: {} },
+  notebook: { light: { destructive: "#aa5f60" }, dark: { "muted-foreground": "#b4b4b4", secondary: "#4d4d4d" } },
+  sky: { light: { primary: "#c84e00", destructive: "#d92c32" }, dark: { primary: "#cc4a00" } },
+};
diff --git a/xgen/runtimes/core/tools/skins-hsl.ts b/xgen/runtimes/core/tools/skins-hsl.ts
new file mode 100644
index 0000000..ad0b0de
--- /dev/null
+++ b/xgen/runtimes/core/tools/skins-hsl.ts
@@ -0,0 +1,37 @@
+// One-off converter: rewrites every colour of the skin CSS files (hex, rgb(), oklch()) as hsl() and applies FIXES.
+// Run from the workspace root: bun xgen/runtimes/core/tools/skins-hsl.ts [file.css ...]   (default: skins/*.css and theme.css)
+import { readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { FIXES, toHslCss } from "./skin-colors";
+
+const STYLES = join(import.meta.dir, "..", "assets", "styles");
+const COLOR = /#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{3}\b|oklch\([^)]*\)|rgba?\([^)]*\)/g;
+
+export function convert(css: string, skin: string): string {
+  let theme: "light" | "dark" = "light";
+  const fixes = FIXES[skin];
+  // comments stay as they are; everything else is read line by line
+  return css.split(/(\/\*[\s\S]*?\*\/)/).map((part) => {
+    if (part.startsWith("/*")) return part;
+    return part.split("\n").map((line) => {
+      if (/\{\s*$/.test(line) && !line.startsWith(" ")) theme = /\.dark|data-theme="dark"/.test(line) ? "dark" : "light";
+      const token = line.match(/^\s*--([a-z0-9-]+):/)?.[1];
+      const fixed = token ? fixes?.[theme]?.[token] : undefined;
+      if (fixed) return line.replace(/^(\s*--[a-z0-9-]+:\s*)[^;]+;/, `$1${toHslCss(fixed, 0.25)};`);
+      return line.replace(COLOR, (c) => toHslCss(c));
+    }).join("\n");
+  }).join("");
+}
+
+if (import.meta.main) {
+  const files = process.argv.slice(2).length ? process.argv.slice(2)
+    : [...readdirSync(join(STYLES, "skins")).filter((f) => f.endsWith(".css")).map((f) => join(STYLES, "skins", f)), join(STYLES, "theme.css")];
+  for (const f of files) {
+    const name = f.split("/").pop()!.replace(/\.css$/, "");
+    const skin = name === "theme" ? "default" : name;
+    const src = readFileSync(f, "utf8");
+    const out = convert(src, skin);
+    if (out !== src) writeFileSync(f, out);
+    console.log(`${name}: ${out !== src ? "rewritten" : "unchanged"}`);
+  }
+}
diff --git a/xgen/runtimes/core/tools/tweakcn-skins.ts b/xgen/runtimes/core/tools/tweakcn-skins.ts
new file mode 100644
index 0000000..da7c91a
--- /dev/null
+++ b/xgen/runtimes/core/tools/tweakcn-skins.ts
@@ -0,0 +1,214 @@
+// Imports skins from the tweakcn presets (github.com/jnsahaj/tweakcn, Apache-2.0; see assets/styles/skins/NOTICE.md).
+// For each preset in PICK it writes assets/styles/skins/<slug>.css (the light and dark tokens, the font, the radius, the shadows
+// and the tracking, as tweakcn exports them), records the Google fonts of the skin in skins.json and lists the files in skins.css.
+// The values are tweakcn's; only the selectors are ours: data-skin on <html> (the whole page) or on any element (a tile of /skins/).
+// Run from the workspace root: bun xgen/runtimes/core/tools/tweakcn-skins.ts   (needs the network: GitHub and Google Fonts)
+import { mkdtempSync, readFileSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { FIXES, toHslCss } from "./skin-colors";
+
+/** the tweakcn commit the presets are read from */
+const COMMIT = "a3b47b37cba97dd637de517aab52c45ec0f83456";
+const PRESETS_URL = `https://raw.githubusercontent.com/jnsahaj/tweakcn/${COMMIT}/utils/theme-presets.ts`;
+const SKINS_DIR = join(import.meta.dir, "..", "assets", "styles", "skins");
+
+/** the presets we take, in the order of the Skins screen: 14 that look different from each other */
+export const PICK = [
+  "modern-minimal", "violet-bloom", "t3-chat", "bubblegum", "doom-64", "amber-minimal", "supabase",
+  "kodama-grove", "perpetuity", "cosmic-night", "claude", "mocha-mousse", "neo-brutalism", "notebook",
+];
+
+type Styles = Record<string, string>;
+interface Preset { label: string; styles: { light: Styles; dark: Styles } }
+
+// tweakcn's defaults (config/theme.ts): a preset only lists what differs from them
+const DEFAULT_LIGHT: Styles = {
+  background: "oklch(1 0 0)", foreground: "oklch(0.145 0 0)", card: "oklch(1 0 0)", "card-foreground": "oklch(0.145 0 0)",
+  popover: "oklch(1 0 0)", "popover-foreground": "oklch(0.145 0 0)", primary: "oklch(0.205 0 0)", "primary-foreground": "oklch(0.985 0 0)",
+  secondary: "oklch(0.97 0 0)", "secondary-foreground": "oklch(0.205 0 0)", muted: "oklch(0.97 0 0)", "muted-foreground": "oklch(0.556 0 0)",
+  accent: "oklch(0.97 0 0)", "accent-foreground": "oklch(0.205 0 0)", destructive: "oklch(0.577 0.245 27.325)", "destructive-foreground": "oklch(1 0 0)",
+  border: "oklch(0.922 0 0)", input: "oklch(0.922 0 0)", ring: "oklch(0.708 0 0)",
+  "chart-1": "oklch(0.81 0.10 252)", "chart-2": "oklch(0.62 0.19 260)", "chart-3": "oklch(0.55 0.22 263)", "chart-4": "oklch(0.49 0.22 264)", "chart-5": "oklch(0.42 0.18 266)",
+  radius: "0.625rem",
+  sidebar: "oklch(0.985 0 0)", "sidebar-foreground": "oklch(0.145 0 0)", "sidebar-primary": "oklch(0.205 0 0)", "sidebar-primary-foreground": "oklch(0.985 0 0)",
+  "sidebar-accent": "oklch(0.97 0 0)", "sidebar-accent-foreground": "oklch(0.205 0 0)", "sidebar-border": "oklch(0.922 0 0)", "sidebar-ring": "oklch(0.708 0 0)",
+  "font-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+  "font-serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  "font-mono": 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  "shadow-color": "oklch(0 0 0)", "shadow-opacity": "0.1", "shadow-blur": "3px", "shadow-spread": "0px", "shadow-offset-x": "0", "shadow-offset-y": "1px",
+  "letter-spacing": "0em",
+};
+const DEFAULT_DARK: Styles = {
+  ...DEFAULT_LIGHT,
+  background: "oklch(0.145 0 0)", foreground: "oklch(0.985 0 0)", card: "oklch(0.205 0 0)", "card-foreground": "oklch(0.985 0 0)",
+  popover: "oklch(0.269 0 0)", "popover-foreground": "oklch(0.985 0 0)", primary: "oklch(0.922 0 0)", "primary-foreground": "oklch(0.205 0 0)",
+  secondary: "oklch(0.269 0 0)", "secondary-foreground": "oklch(0.985 0 0)", muted: "oklch(0.269 0 0)", "muted-foreground": "oklch(0.708 0 0)",
+  accent: "oklch(0.371 0 0)", "accent-foreground": "oklch(0.985 0 0)", destructive: "oklch(0.704 0.191 22.216)", "destructive-foreground": "oklch(0.985 0 0)",
+  border: "oklch(0.275 0 0)", input: "oklch(0.325 0 0)", ring: "oklch(0.556 0 0)",
+  sidebar: "oklch(0.205 0 0)", "sidebar-foreground": "oklch(0.985 0 0)", "sidebar-primary": "oklch(0.488 0.243 264.376)", "sidebar-primary-foreground": "oklch(0.985 0 0)",
+  "sidebar-accent": "oklch(0.269 0 0)", "sidebar-accent-foreground": "oklch(0.985 0 0)", "sidebar-border": "oklch(0.275 0 0)", "sidebar-ring": "oklch(0.439 0 0)",
+};
+
+const COLORS = [
+  "background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground",
+  "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground",
+  "border", "input", "ring", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5",
+  "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring",
+];
+
+/** a preset merged with the defaults the way tweakcn does it: dark = defaults, then the light values, then the dark ones */
+const merged = (p: Preset): { light: Styles; dark: Styles } => ({
+  light: { ...DEFAULT_LIGHT, ...p.styles.light },
+  dark: { ...DEFAULT_DARK, ...p.styles.light, ...p.styles.dark },
+});
+
+// ---- the shadow colour as "h s% l%", the way tweakcn prints it (utils/color-converter.ts) ----
+
+/** tweakcn's number format: whole numbers as they are, others with 4 decimals, 0 for nothing */
+const num = (n: number | undefined): string => (!n ? "0" : n % 1 === 0 ? String(n) : n.toFixed(4));
+
+function rgbToHsl(r: number, g: number, b: number): [number | undefined, number, number] {
+  const max = Math.max(r, g, b), min = Math.min(r, g, b), l = (max + min) / 2, d = max - min;
+  if (d === 0) return [undefined, 0, l];
+  const s = d / (1 - Math.abs(2 * l - 1));
+  const h = max === r ? 60 * (((g - b) / d) % 6) : max === g ? 60 * ((b - r) / d + 2) : 60 * ((r - g) / d + 4);
+  return [h < 0 ? h + 360 : h, s, l];
+}
+
+/** oklch (l 0-1, c, h in degrees) to sRGB 0-1 */
+function oklchToRgb(l: number, c: number, h: number): [number, number, number] {
+  const a = c * Math.cos((h * Math.PI) / 180), b = c * Math.sin((h * Math.PI) / 180);
+  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3, m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3, s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const lin = [4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_, -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_, -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_];
+  const gamma = (x: number): number => Math.min(1, Math.max(0, x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055));
+  return [gamma(lin[0]!), gamma(lin[1]!), gamma(lin[2]!)];
+}
+
+/** a colour of a preset (hex, hsl() or oklch()) as tweakcn's "h s% l%" (alpha dropped: the shadow opacity carries it) */
+export function hslOf(color: string): string {
+  const c = color.trim();
+  let h: number | undefined, s: number, l: number;
+  const hex = c.match(/^#([0-9a-f]{6})$/i);
+  const hsl = c.match(/^hsl\(\s*([\d.]+)\s+([\d.]+)%\s+([\d.]+)%/i);
+  const ok = c.match(/^oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/i);
+  if (hex) {
+    const v = parseInt(hex[1]!, 16);
+    [h, s, l] = rgbToHsl(((v >> 16) & 255) / 255, ((v >> 8) & 255) / 255, (v & 255) / 255);
+  } else if (hsl) {
+    [h, s, l] = [Number(hsl[1]), Number(hsl[2]) / 100, Number(hsl[3]) / 100];
+  } else if (ok) {
+    [h, s, l] = rgbToHsl(...oklchToRgb(Number(ok[1]), Number(ok[2]), Number(ok[3])));
+  } else throw new Error(`tweakcn-skins: cannot read the colour ${color}`);
+  return `${num(h)} ${num(s * 100)}% ${num(l * 100)}%`;
+}
+
+/** the shadow scale of one mode, as tweakcn builds it (utils/shadows.ts) */
+export function shadowsOf(st: Styles): Array<[string, string]> {
+  const hsl = hslOf(st["shadow-color"]!);
+  const [x, y, blur, spread] = [st["shadow-offset-x"], st["shadow-offset-y"], st["shadow-blur"], st["shadow-spread"]];
+  const opacity = parseFloat(st["shadow-opacity"]!);
+  const color = (times: number): string => `hsl(${hsl} / ${(opacity * times).toFixed(2)})`;
+  const first = (times: number): string => `${x} ${y} ${blur} ${spread} ${color(times)}`;
+  const second = (y2: string, blur2: string): string => `${x} ${y2} ${blur2} ${parseFloat(spread ?? "0") - 1}px ${color(1)}`;
+  return [
+    ["shadow-2xs", first(0.5)], ["shadow-xs", first(0.5)],
+    ["shadow-sm", `${first(1)}, ${second("1px", "2px")}`], ["shadow", `${first(1)}, ${second("1px", "2px")}`],
+    ["shadow-md", `${first(1)}, ${second("2px", "4px")}`], ["shadow-lg", `${first(1)}, ${second("4px", "6px")}`],
+    ["shadow-xl", `${first(1)}, ${second("8px", "10px")}`], ["shadow-2xl", first(2.5)],
+  ];
+}
+
+// ---- fonts ----
+
+/** families every system has (or the generic ones): never fetched, even when Google Fonts happens to answer for the name */
+const SYSTEM = new Set(["sans-serif", "serif", "monospace", "system-ui", "cursive", "Courier New", "Courier", "Georgia", "Times New Roman", "Times", "Arial", "Helvetica", "Menlo"]);
+/** the first family of a font stack, without quotes: "\"Oxanium\", sans-serif" is Oxanium */
+const familyOf = (stack: string): string => stack.split(",")[0]!.trim().replace(/^["']|["']$/g, "");
+
+/** the weights Google Fonts serves for a family (400-700 asked), or null when it is not a Google font */
+async function googleWeights(family: string): Promise<number[] | null> {
+  if (SYSTEM.has(family) || family.startsWith("ui-")) return null;
+  const url = `https://fonts.googleapis.com/css2?family=${family.replace(/ /g, "+")}:wght@400;500;600;700&display=swap`;
+  const res = await fetch(url, { headers: { "user-agent": "Mozilla/5.0 (X11; Linux x86_64) Chrome/130.0 Safari/537.36" } });
+  if (!res.ok) return null;
+  return [...new Set([...(await res.text()).matchAll(/font-weight: (\d+)/g)].map((m) => Number(m[1])))].sort();
+}
+
+// ---- the CSS of one skin ----
+
+const block = (selector: string, lines: string[]): string => `${selector} {\n${lines.map((l) => `  ${l}`).join("\n")}\n}\n`;
+const DARK = (slug: string): string => `:is(.dark, [data-theme="dark"]) [data-skin="${slug}"],\n[data-skin="${slug}"]:is(.dark, [data-theme="dark"])`;
+
+/** a token as hsl() (old browsers read hsl, not oklch), with the contrast fix of skin-colors.ts FIXES when the token has one */
+const colorOf = (slug: string, theme: "light" | "dark", token: string, value: string): string =>
+  toHslCss(FIXES[slug]?.[theme]?.[token] ?? value, FIXES[slug]?.[theme]?.[token] ? 0.25 : 0.5);
+
+async function skinCss(slug: string, p: Preset): Promise<{ css: string; fonts: string[] }> {
+  const { light, dark } = merged(p);
+  const fonts: string[] = [];
+  const weightLines: string[] = [];
+  for (const stack of new Set([light["font-sans"]!, dark["font-sans"]!])) {
+    const family = familyOf(stack);
+    const weights = await googleWeights(family);
+    if (!weights) continue;
+    fonts.push(`${family.replace(/ /g, "+")}:wght@${weights.join(";")}`);
+    // a family without medium or semibold faces: point those weights at real faces (as sky does for Istok Web)
+    if (stack === light["font-sans"] && !weights.includes(500)) weightLines.push(`--font-weight-medium: ${weights.includes(400) ? 400 : weights[0]};`);
+    if (stack === light["font-sans"] && !weights.includes(600)) weightLines.push(`--font-weight-semibold: ${weights.includes(700) ? 700 : weights[weights.length - 1]};`);
+  }
+  const tracking = light["letter-spacing"] !== "0em";
+  const lightLines = [
+    ...COLORS.map((k) => `--${k}: ${colorOf(slug, "light", k, light[k]!)};`),
+    `--font-sans: ${light["font-sans"]};`, `--font-serif: ${light["font-serif"]};`, `--font-mono: ${light["font-mono"]};`,
+    ...weightLines,
+    `--radius: ${light.radius};`,
+    ...shadowsOf(light).map(([k, v]) => `--${k}: ${v};`),
+    ...(tracking ? [
+      `--tracking-normal: ${light["letter-spacing"]};`,
+      "--tracking-tighter: calc(var(--tracking-normal) - 0.05em);", "--tracking-tight: calc(var(--tracking-normal) - 0.025em);",
+      "--tracking-wide: calc(var(--tracking-normal) + 0.025em);", "--tracking-wider: calc(var(--tracking-normal) + 0.05em);", "--tracking-widest: calc(var(--tracking-normal) + 0.1em);",
+    ] : []),
+  ];
+  const darkLines = [
+    ...COLORS.map((k) => `--${k}: ${colorOf(slug, "dark", k, dark[k]!)};`),
+    ...(["font-sans", "font-serif", "font-mono", "radius"] as const).filter((k) => dark[k] !== light[k]).map((k) => `--${k}: ${dark[k]};`),
+    ...shadowsOf(dark).map(([k, v]) => `--${k}: ${v};`),
+  ];
+  const head = [
+    `/* Skin "${slug}" (${p.label}): the tweakcn preset "${slug}" (Apache-2.0, see NOTICE.md), written by xgen/runtimes/core/tools/tweakcn-skins.ts.`,
+    `   On when data-skin="${slug}" is on <html> (the page) or on any element (a tile of /skins/). Values as tweakcn exports them;`,
+    `   the spacing scale stays the kit's 0.25rem. Fonts: ${fonts.length ? fonts.map((f) => f.split(":")[0]!.replace(/\+/g, " ")).join(", ") + " (Google Fonts, loaded when the skin is on)" : "system"}. */`,
+  ].join("\n");
+  const shadowUse = ["shadow-xs", "shadow-sm", "shadow", "shadow-md", "shadow-lg", "shadow-xl"].map((k) => `[data-skin="${slug}"] .${k} { --tw-shadow: var(--${k}); }`).join("\n");
+  const css = [
+    head,
+    block(`[data-skin="${slug}"]`, lightLines),
+    block(DARK(slug), darkLines),
+    ...(tracking ? [`:root[data-skin="${slug}"] body { letter-spacing: var(--tracking-normal); }`] : []),
+    shadowUse,
+    "",
+  ].join("\n");
+  return { css, fonts };
+}
+
+async function main(): Promise<void> {
+  // the presets file is TypeScript with one type import: drop the types, then import it
+  const source = await (await fetch(PRESETS_URL)).text();
+  const dir = mkdtempSync(join(tmpdir(), "tweakcn-"));
+  const file = join(dir, "presets.ts");
+  writeFileSync(file, source.replace(/^import .*$/m, "").replace(": Record<string, ThemePreset>", ""));
+  const { defaultPresets } = (await import(file)) as { defaultPresets: Record<string, Preset> };
+  const registry = JSON.parse(readFileSync(join(SKINS_DIR, "skins.json"), "utf8")) as Record<string, { label: string; source: string; fonts: string[] }>;
+  for (const slug of PICK) {
+    const p = defaultPresets[slug];
+    if (!p) throw new Error(`tweakcn-skins: no preset ${slug}`);
+    const { css, fonts } = await skinCss(slug, p);
+    writeFileSync(join(SKINS_DIR, `${slug}.css`), css);
+    registry[slug] = { label: p.label, source: `tweakcn ${COMMIT.slice(0, 7)}`, fonts };
+    console.log(`${slug}: ${p.label}${fonts.length ? `, ${fonts.join(" ")}` : ""}`);
+  }
+  writeFileSync(join(SKINS_DIR, "skins.json"), JSON.stringify(registry, null, 2) + "\n");
+}
+
+if (import.meta.main) await main();
diff --git a/xgen/runtimes/jinja2/.gitignore b/xgen/runtimes/jinja2/.gitignore
new file mode 100644
index 0000000..c18dd8d
--- /dev/null
+++ b/xgen/runtimes/jinja2/.gitignore
@@ -0,0 +1 @@
+__pycache__/
diff --git a/xgen/runtimes/jinja2/README.md b/xgen/runtimes/jinja2/README.md
new file mode 100644
index 0000000..ed5cd6e
--- /dev/null
+++ b/xgen/runtimes/jinja2/README.md
@@ -0,0 +1,29 @@
+# @ui8kit/xgen-runtime-jinja2
+
+[Jinja2](https://jinja.palletsprojects.com) runtime. It has no emitter of its own: the Twig emitters print the same trees through
+the `jinja` dialect (`xgen/runtimes/twig/src/dialect.ts`). Output: `packages/jinja2/ui` (Python package `ui8kit-jinja2-ui`,
+requires `Jinja2>=3.1,<4`).
+
+Part of xgen (see `../README.md` and the author guide `../../../docs/specs-guide.md`). Tests: `bun test`.
+
+## The dialect
+
+Templates end in `.html.j2`. Differences from Twig: `x if c else y` for the ternary, `|safe` for `|raw`, `is not none`,
+`p['Key']` for field access (a dot would find dict methods such as `items`), `elif`, and includes through
+`ui_include(name, vars)` (a template rendered with only the given variables).
+
+## Helpers
+
+`assets/py/ui8kit_jinja/`: `runtime.py` (the `ui_*` functions, a port of the Go and PHP helpers), `cn_merge.py`
+(tailwind-merge) and `__init__.py` (`environment(root)`, a Jinja2 `Environment` over the package folder with the functions). Copied into `packages/jinja2/ui/py/ui8kit_jinja`.
+`assets/parity.py` is the parity harness; `assets/lucide-icon.html.j2` the icon asset. Generator: `xgen/generator/src/jinja2.ts`.
+
+## Check group `jinja2`
+
+Creates `packages/jinja2/ui/.venv`, installs `requirements.txt`, then `bin/parity.py` renders every brick case (118) and block
+case (474) with real Jinja2; DOM parity with React and html-validate of every block case (`xgen/check/src/jinja2`).
+
+## Prerequisites
+
+Python 3.10 or newer with `venv` (and network access for the first `pip install`). Without Python the group prints
+`skipped: no Python`; with `UI8KIT_REQUIRE_ALL_RUNTIMES=1` a skip is a failure.
diff --git a/xgen/runtimes/jinja2/assets/lucide-icon.html.j2 b/xgen/runtimes/jinja2/assets/lucide-icon.html.j2
new file mode 100644
index 0000000..d010747
--- /dev/null
+++ b/xgen/runtimes/jinja2/assets/lucide-icon.html.j2
@@ -0,0 +1,11 @@
+{#- LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from lucide-icons.json next to this file.
+    Decorative (aria-hidden) unless a Label is given. Size and StrokeWidth default to 16 and 2. -#}
+{%- set size = ui_def(p['Size'], 0) or 16 -%}
+{%- set label = ui_def(p['Label'], '') -%}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="{{ size }}" height="{{ size }}" fill="none" stroke="currentColor"
+  stroke-width="{{ ui_def(p['StrokeWidth'], 0) or 2 }}" stroke-linecap="round" stroke-linejoin="round"
+  class="{{ ui_cn(['inline-block shrink-0', ui_def(p['Class'], '')]) }}"
+  {%- if label == '' %} aria-hidden="true"{% else %} aria-label="{{ label }}" role="img"{% endif %} data-slot="icon"
+  {%- if ui_def(p['Name'], '') != '' %} data-lucide="{{ p['Name'] }}"{% endif %}{{ ui_attr_html(ui_def(p['Attrs'], {})) }}>
+  {{- ui_lucide(ui_def(p['Name'], '')) -}}
+</svg>
diff --git a/xgen/runtimes/jinja2/assets/parity.py b/xgen/runtimes/jinja2/assets/parity.py
new file mode 100644
index 0000000..4cc7e33
--- /dev/null
+++ b/xgen/runtimes/jinja2/assets/parity.py
@@ -0,0 +1,20 @@
+"""Renders generated templates from JSON: stdin [{"template": "ui/button/button.html.j2", "vars": {"p": {...}, "children": "x"}}],
+stdout the HTML of each (a failure is "ERROR: <message>"). Used by the parity check of xgen."""
+
+import json
+import os
+import sys
+
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+sys.path.insert(0, os.path.join(ROOT, "py"))
+
+from ui8kit_jinja import environment  # noqa: E402
+
+env = environment(ROOT)
+out = []
+for r in json.load(sys.stdin):
+    try:
+        out.append(env.get_template(r["template"]).render(r.get("vars") or {}))
+    except Exception as e:  # noqa: BLE001
+        out.append(f"ERROR: {type(e).__name__}: {e}")
+sys.stdout.write(json.dumps(out, ensure_ascii=False) + "\n")
diff --git a/xgen/runtimes/jinja2/assets/py/ui8kit_jinja/__init__.py b/xgen/runtimes/jinja2/assets/py/ui8kit_jinja/__init__.py
new file mode 100644
index 0000000..0b1e95b
--- /dev/null
+++ b/xgen/runtimes/jinja2/assets/py/ui8kit_jinja/__init__.py
@@ -0,0 +1,62 @@
+"""ui8kit templates for Jinja2: `environment(root)` gives an Environment over the package folder with the ui_* helpers.
+Templates are included as ui/<brick>/<part>.html.j2 and blocks/<organism>.html.j2, with `p` (props) and `children` (markup)."""
+
+from __future__ import annotations
+
+import functools
+from typing import Any
+
+from jinja2 import ChainableUndefined, Environment, FileSystemLoader, pass_environment
+from jinja2.runtime import Undefined
+from markupsafe import Markup
+
+from . import runtime as rt
+
+
+def _plain(v: Any) -> Any:
+    if isinstance(v, Undefined):
+        return None
+    if isinstance(v, list):
+        return [_plain(x) for x in v]
+    return v
+
+
+def _wrap(f: Any, safe: bool = False) -> Any:
+    @functools.wraps(f)
+    def call(*args: Any) -> Any:
+        out = f(*[_plain(a) for a in args])
+        return Markup(out) if safe else out
+    return call
+
+
+@pass_environment
+def _include(env: Environment, name: Any, vars: Any) -> Markup:
+    return Markup(env.get_template(str(name)).render(_plain(vars) or {}))
+
+
+def _merge(a: Any, b: Any) -> dict:
+    return {**(_plain(a) or {}), **(_plain(b) or {})}
+
+
+_NAMES = {
+    "and": "and_", "or": "or_", "def": "def_", "len": "len_", "str": "str_", "range": "range_", "max": "max_", "min": "min_", "round": "round_",
+}
+_PLAIN = [
+    "get", "field", "s", "text", "t", "n", "i", "eq", "lt", "gt", "le", "ge", "add", "sub", "mul", "div", "and", "or", "coalesce", "def", "l",
+    "len", "spread", "str", "has", "cnv", "tpl", "num", "money", "at", "page_window", "fit_cols", "uniq", "words", "nbsp", "nth", "range",
+    "max", "min", "round", "count", "where", "match", "pick", "sum_by", "first_of", "max_by", "css", "attrs", "is_set_str", "default_if_empty",
+    "map_or", "int_map_or", "bool_str", "concat_trim", "cn", "resolve_tag", "title_tag", "compose", "recipe", "preset",
+]
+
+
+def environment(root: str, **options: Any) -> Environment:
+    """an Environment over the package folder with the helpers registered (autoescape on, chainable undefined)"""
+    rt.set_root(root)
+    env = Environment(loader=FileSystemLoader(root), autoescape=True, undefined=ChainableUndefined, **options)
+    for name in _PLAIN:
+        env.globals["ui_" + name] = _wrap(getattr(rt, _NAMES.get(name, name)))
+    env.globals["ui_attr_html"] = _wrap(rt.attr_html, safe=True)
+    env.globals["ui_lucide"] = _wrap(rt.lucide, safe=True)
+    env.globals["ui_include"] = _include
+    env.globals["ui_merge"] = _merge
+    return env
diff --git a/xgen/runtimes/jinja2/assets/py/ui8kit_jinja/cn_merge.py b/xgen/runtimes/jinja2/assets/py/ui8kit_jinja/cn_merge.py
new file mode 100644
index 0000000..9854f6d
--- /dev/null
+++ b/xgen/runtimes/jinja2/assets/py/ui8kit_jinja/cn_merge.py
@@ -0,0 +1,138 @@
+"""cn: class fragments joined with tailwind-merge conflict resolution (the last class of a group wins, and a class removes
+the earlier classes of the groups it overrides: p-2 removes px-4, not the reverse). Port of cn_merge.go."""
+
+from __future__ import annotations
+
+_DISPLAY = {"block", "inline", "inline-block", "inline-flex", "flex", "grid", "contents", "hidden"}
+_PREFIXES = [
+    ("gap-x-", "gap-x"), ("gap-y-", "gap-y"), ("items-", "align-items"), ("justify-", "justify-content"),
+    ("self-", "align-self"), ("content-", "align-content"), ("overflow-x-", "overflow-x"), ("overflow-y-", "overflow-y"),
+    ("inset-x-", "inset-x"), ("inset-y-", "inset-y"), ("min-w-", "min-width"), ("min-h-", "min-height"),
+    ("max-w-", "max-width"), ("max-h-", "max-height"), ("shadow-", "shadow"), ("ring-", "ring"), ("rounded-", "rounded"),
+    ("leading-", "leading"), ("tracking-", "tracking"), ("opacity-", "opacity"), ("z-", "z"), ("top-", "top"),
+    ("right-", "right"), ("bottom-", "bottom"), ("left-", "left"),
+]
+_TEXT_SIZES = {"text-xs", "text-sm", "text-base", "text-lg", "text-xl"} | {f"text-{n}xl" for n in range(2, 10)}
+_WEIGHTS = {f"font-{w}" for w in ("thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black")}
+
+
+def _is_number(s: str) -> bool:
+    if s.startswith("["):
+        return True
+    return s != "" and all(c in "0123456789." for c in s)
+
+
+def _split_variant(token: str) -> tuple[str, str]:
+    depth, cut = 0, -1
+    for i, c in enumerate(token):
+        if c == "[":
+            depth += 1
+        elif c == "]":
+            depth = max(0, depth - 1)
+        elif c == ":" and depth == 0:
+            cut = i
+    core = token if cut == -1 else token[cut + 1:]
+    core = core[1:] if core.startswith("!") else core
+    return ("" if cut == -1 else token[:cut + 1]), core
+
+
+def _has_direction(core: str, kind: str) -> bool:
+    return any(core.startswith(kind + d) for d in ("x-", "y-", "t-", "r-", "b-", "l-", "s-", "e-"))
+
+
+def _space_axis(core: str, kind: str, n: str) -> list[str]:
+    if core.startswith(kind + "x-"):
+        return [f"{n}-x", f"{n}-r", f"{n}-l", f"{n}-s", f"{n}-e"]
+    if core.startswith(kind + "y-"):
+        return [f"{n}-y", f"{n}-t", f"{n}-b"]
+    for s in "trbl":
+        if core.startswith(kind + s + "-"):
+            return [f"{n}-{s}"]
+    return []
+
+
+def _groups(core: str) -> list[str]:
+    if core in _DISPLAY:
+        return ["display"]
+    if core in ("flex-row", "flex-col", "flex-row-reverse", "flex-col-reverse"):
+        return ["flex-direction"]
+    if core in ("static", "relative", "absolute", "fixed", "sticky"):
+        return ["position"]
+    if core in ("isolate", "isolation-auto"):
+        return ["isolation"]
+    for kind in ("inset-ring", "ring"):
+        if core == kind:
+            return [kind + "-width"]
+        if core.startswith(kind + "-"):
+            return [kind + ("-width" if _is_number(core[len(kind) + 1:]) else "-color")]
+    for p, g in _PREFIXES:
+        if core.startswith(p):
+            return [g]
+    if core.startswith("gap-"):
+        return ["gap", "gap-x", "gap-y"]
+    if core.startswith("inset-"):
+        return ["inset", "inset-x", "inset-y", "top", "right", "bottom", "left"]
+    if core.startswith("overflow-"):
+        return ["overflow", "overflow-x", "overflow-y"]
+    if core == "border" or (core.startswith("border-") and _is_number(core[7:])):
+        return ["border-width"] + [f"border-w-{s}" for s in "xytrblse"]
+    if len(core) >= 8 and core.startswith("border-") and core[7] in "xytrblse" and (len(core) == 8 or (core[8] == "-" and _is_number(core[9:]))):
+        side = core[7]
+        if side == "x":
+            return ["border-w-x", "border-w-r", "border-w-l", "border-w-s", "border-w-e"]
+        if side == "y":
+            return ["border-w-y", "border-w-t", "border-w-b"]
+        return ["border-w-" + side]
+    if core in ("text-left", "text-center", "text-right", "text-justify", "text-start", "text-end"):
+        return ["text-align"]
+    if core == "rounded":
+        return ["rounded"]
+    if core in ("shadow", "shadow-none"):
+        return ["shadow"]
+    if core in ("flex-1", "flex-auto", "flex-none", "flex-initial"):
+        return ["flex-size", "flex-grow", "flex-shrink", "flex-basis"]
+    if core == "grow" or core.startswith("grow-"):
+        return ["flex-grow"]
+    if core in ("shrink", "shrink-0"):
+        return ["flex-shrink"]
+    if core.startswith("size-"):
+        return ["size", "width", "height"]
+    if core.startswith("w-"):
+        return ["width"]
+    if core.startswith("h-"):
+        return ["height"]
+    for kind, n in (("p", "padding"), ("m", "margin")):
+        if core.startswith(kind + "-") and not _has_direction(core, kind):
+            return [n] + [f"{n}-{s}" for s in "xytrblse"]
+        axis = _space_axis(core, kind, n)
+        if axis:
+            return axis
+    if core.startswith("bg-"):
+        return ["bg"]
+    if core in _TEXT_SIZES or (core.startswith("text-[") and len(core) > 6 and (core[6].isdigit() or core[6] == ".")):
+        return ["text-size", "leading"]
+    if core.startswith("text-"):
+        return ["text-color"]
+    if core in _WEIGHTS:
+        return ["font-weight"]
+    return []
+
+
+def merge(classes: list[str]) -> str:
+    kept: list[tuple[str, str]] = []
+    for chunk in classes:
+        for token in str(chunk).split():
+            prefix, core = _split_variant(token)
+            key = ""
+            removes: list[str] = []
+            if core:
+                g = _groups(core)
+                if g:
+                    key, removes = prefix + g[0], g[1:]
+                else:
+                    key = "=" + token
+            if key:
+                drop = {key} | {prefix + r for r in removes}
+                kept = [it for it in kept if it[1] not in drop]
+            kept.append((token, key))
+    return " ".join(t for t, _ in kept)
diff --git a/xgen/runtimes/jinja2/assets/py/ui8kit_jinja/runtime.py b/xgen/runtimes/jinja2/assets/py/ui8kit_jinja/runtime.py
new file mode 100644
index 0000000..4113a71
--- /dev/null
+++ b/xgen/runtimes/jinja2/assets/py/ui8kit_jinja/runtime.py
@@ -0,0 +1,493 @@
+"""The helpers of the generated templates. Values are the JSON shapes of the TypeScript props (str, int/float, bool,
+None, list, dict) read with the rules of the TypeScript output: JS truthiness, strict equality, String(), clsx +
+tailwind-merge. Every helper is None-safe, like `?.`. Port of the Go runtime (dyn.go, expr.go, utils.go) and of the PHP
+runtime of the Twig package, so every static runtime prints the same DOM."""
+
+from __future__ import annotations
+
+import html
+import json
+import math
+import os
+import re
+from typing import Any
+
+from .cn_merge import merge
+
+_ROOT = ""
+_JSON: dict[str, Any] = {}
+
+
+def set_root(root: str) -> None:
+    global _ROOT
+    _ROOT = root
+
+
+def load_json(path: str) -> Any:
+    if path not in _JSON:
+        with open(os.path.join(_ROOT, path), encoding="utf-8") as f:
+            _JSON[path] = json.load(f)
+    return _JSON[path]
+
+
+# ------------------------------------------------------------------ values
+
+def _num(v: Any) -> bool:
+    return isinstance(v, (int, float)) and not isinstance(v, bool)
+
+
+def get(v: Any, path: list) -> Any:
+    """a path of fields: get(plan, ['price', 'amount']); `length` of a list or a text is its size"""
+    for k in path:
+        k = str(k)
+        if isinstance(v, list):
+            if k == "length":
+                v = len(v)
+            elif k.isdigit() and int(k) < len(v):
+                v = v[int(k)]
+            else:
+                return None
+        elif isinstance(v, dict):
+            v = v.get(k)
+        elif isinstance(v, str) and k == "length":
+            v = len(v)
+        else:
+            return None
+    return v
+
+
+def field(item: Any, name: str, zero: Any) -> Any:
+    """a field of a brick record: the JSON key matched without regard to case, as Go json does"""
+    if not isinstance(item, dict):
+        return zero
+    if name in item:
+        return zero if item[name] is None else item[name]
+    for k, v in item.items():
+        if str(k).lower() == name.lower():
+            return zero if v is None else v
+    return zero
+
+
+def fmt_num(f: Any) -> str:
+    """String(n) of JavaScript for the numbers the views print"""
+    if isinstance(f, int):
+        return str(f)
+    if math.isnan(f):
+        return "NaN"
+    if math.isinf(f):
+        return "Infinity" if f > 0 else "-Infinity"
+    if f == math.floor(f) and abs(f) < 1e21:
+        return "%d" % int(f)
+    return repr(f)
+
+
+def s(v: Any) -> str:
+    if v is None:
+        return ""
+    if isinstance(v, str):
+        return v
+    if isinstance(v, bool):
+        return "true" if v else "false"
+    if _num(v):
+        return fmt_num(v)
+    return json.dumps(v, separators=(",", ":"), ensure_ascii=False)
+
+
+def text(v: Any) -> str:
+    """what a text node shows: nothing for None and booleans"""
+    return "" if isinstance(v, bool) else s(v)
+
+
+def t(v: Any) -> bool:
+    """JS truthiness: None, False, 0, NaN and '' are false"""
+    if v is None:
+        return False
+    if isinstance(v, bool):
+        return v
+    if isinstance(v, str):
+        return v != ""
+    if _num(v):
+        return v != 0 and not math.isnan(v)
+    return True
+
+
+def n(v: Any) -> float:
+    if _num(v):
+        return float(v)
+    if isinstance(v, bool):
+        return 1.0 if v else 0.0
+    if isinstance(v, str):
+        try:
+            return float(v.strip())
+        except ValueError:
+            return 0.0
+    return 0.0
+
+
+def _round_half_away(f: float) -> float:
+    return math.copysign(math.floor(abs(f) + 0.5), f)
+
+
+def i(v: Any) -> int:
+    return int(_round_half_away(n(v)))
+
+
+def eq(a: Any, b: Any) -> bool:
+    """strict equality (===)"""
+    if _num(a) or _num(b):
+        return _num(a) and _num(b) and float(a) == float(b)
+    if a is None:
+        return b is None
+    if isinstance(a, bool) or isinstance(b, bool):
+        return isinstance(a, bool) and isinstance(b, bool) and a == b
+    if isinstance(a, str):
+        return isinstance(b, str) and a == b
+    return False
+
+
+def _cmp(a: Any, b: Any) -> int | None:
+    if isinstance(a, str) and isinstance(b, str):
+        return (a > b) - (a < b)
+    if a is None or b is None:
+        return None
+    x, y = n(a), n(b)
+    return (x > y) - (x < y)
+
+
+def lt(a, b): c = _cmp(a, b); return c is not None and c < 0
+def gt(a, b): c = _cmp(a, b); return c is not None and c > 0
+def le(a, b): c = _cmp(a, b); return c is not None and c <= 0
+def ge(a, b): c = _cmp(a, b); return c is not None and c >= 0
+
+
+def add(a: Any, b: Any) -> Any:
+    if isinstance(a, str) or isinstance(b, str):
+        return s(a) + s(b)
+    return n(a) + n(b)
+
+
+def sub(a, b): return n(a) - n(b)
+def mul(a, b): return n(a) * n(b)
+
+
+def div(a: Any, b: Any) -> float:
+    x, y = n(a), n(b)
+    if y == 0:
+        return math.nan if x == 0 or math.isnan(x) else math.copysign(math.inf, x) * math.copysign(1, y)
+    return x / y
+
+
+def and_(vs: list) -> Any:
+    last = None
+    for v in vs:
+        if not t(v):
+            return v
+        last = v
+    return last
+
+
+def or_(vs: list) -> Any:
+    last = None
+    for v in vs:
+        if t(v):
+            return v
+        last = v
+    return last
+
+
+def coalesce(vs: list) -> Any:
+    return next((v for v in vs if v is not None), None)
+
+
+def def_(v: Any, d: Any) -> Any:
+    """a prop with its default: the default when the prop is None or missing"""
+    return d if v is None else v
+
+
+def l(v: Any) -> list:
+    return v if isinstance(v, list) else []
+
+
+def len_(v: Any) -> int:
+    return len(v) if isinstance(v, str) else len(l(v))
+
+
+def spread(base: Any, fields: dict) -> dict:
+    out = dict(base) if isinstance(base, dict) else {}
+    out.update(fields)
+    return out
+
+
+def str_(v: Any) -> Any:
+    return None if v is None else s(v)
+
+
+def has(v: Any) -> bool:
+    return v is not None
+
+
+def cnv(vs: list) -> str:
+    return merge([s(v) for v in vs if t(v)])
+
+
+def tpl(tmpl: Any, vals: list) -> str:
+    return re.sub(r"\{(\d+)\}", lambda m: s(vals[int(m.group(1))]) if int(m.group(1)) < len(vals) else "", s(tmpl))
+
+
+def _group(f: float, decimals: int) -> str:
+    whole, _, frac = f"{abs(f):.{decimals}f}".partition(".")
+    out = f"{int(whole):,}"
+    frac = frac.rstrip("0")
+    if frac:
+        out += "." + frac
+    if f < 0 and out != "0":
+        out = "-" + out
+    return out
+
+
+def num(v: Any) -> str:
+    return _group(n(v), 3)
+
+
+_CURRENCY = {"USD": "$", "EUR": "\u20ac", "GBP": "\u00a3", "JPY": "\u00a5", "INR": "\u20b9", "CAD": "CA$", "AUD": "A$"}
+
+
+def minor_digits(c: str) -> int:
+    return 0 if c in ("JPY", "KRW") else 2
+
+
+def money(amount: Any, currency: Any) -> str:
+    """integer minor units (Codex v0.4: 1250 = 12.50) -> "$12.50"; whole amounts without the fraction"""
+    c = s(currency)
+    sym = _CURRENCY.get(c, c + "\u00a0")
+    minor = int(_round_half_away(n(amount)))
+    sign = "-" if minor < 0 else ""
+    minor = abs(minor)
+    d = minor_digits(c)
+    whole, rest = divmod(minor, 10 ** d)
+    out = sign + sym + _group(float(whole), 0)
+    if d and rest:
+        out += "." + str(rest).zfill(d)
+    return out
+
+
+def at(d: Any, key: Any) -> str:
+    v = get(d, [s(key)])
+    return s(v) if v is not None else s(key)
+
+
+def page_window(page_v: Any, pages_v: Any) -> list:
+    page, pages = int(n(page_v)), int(n(pages_v))
+    keep = {x for x in (1, pages, page - 1, page, page + 1) if 1 <= x <= pages}
+    out: list = []
+    prev = 0
+    for x in range(1, pages + 1):
+        if x not in keep:
+            continue
+        if x - prev > 1:
+            out.append(None)
+        out.append(x)
+        prev = x
+    return out
+
+
+def fit_cols(cols_v: Any, n_v: Any) -> str:
+    cols, cnt = s(cols_v), int(n(n_v))
+    m = re.fullmatch(r"(-?\d+)-(-?\d+)", cols)
+    if not m:
+        return cols
+    lo, hi = int(m.group(1)), int(m.group(2))
+    if cnt >= hi:
+        return cols
+    known = {"1-2", "1-3", "1-4", "2-3", "2-4", "2-6", "3-6"}
+    for k in range(max(lo, cnt), lo, -1):
+        if f"{lo}-{k}" in known:
+            return f"{lo}-{k}"
+    return str(min(max(cnt, 1), lo))
+
+
+def uniq(v: Any) -> str:
+    parts = s(v).split(", ")
+    return ", ".join(p for idx, p in enumerate(parts) if idx == 0 or p.lower() != parts[idx - 1].lower())
+
+
+def words(v: Any) -> list: return s(v).split(" ")
+def nbsp(v: Any) -> str: return s(v).replace(" ", "\u00a0")
+
+
+def nth(lst: Any, idx: Any) -> Any:
+    xs, k = l(lst), int(n(idx))
+    return xs[k] if 0 <= k < len(xs) else None
+
+
+def range_(c: Any) -> list: return list(range(max(0, int(n(c)))))
+def max_(vs: list) -> float: return max([-math.inf] + [n(v) for v in vs])
+def min_(vs: list) -> float: return min([math.inf] + [n(v) for v in vs])
+def round_(v: Any) -> float: return float(math.floor(n(v) + 0.5))
+
+
+def count(items: Any, f: Any) -> int:
+    return sum(1 for it in l(items) if t(get(it, [s(f)])))
+
+
+def where(items: Any, f: Any, value: Any) -> list:
+    if not t(value):
+        return l(items)
+    return [it for it in l(items) if eq(get(it, [s(f)]), value)]
+
+
+def match(items: Any, f: Any, query: Any) -> list:
+    if not t(query):
+        return l(items)
+    q = s(query).lower()
+    return [it for it in l(items) if q in s(get(it, [s(f)])).lower()]
+
+
+def pick(items: Any, ident: Any) -> Any:
+    return next((it for it in l(items) if eq(get(it, ["id"]), ident)), None)
+
+
+def sum_by(items: Any, a: str, b: str) -> float:
+    return sum((n(get(it, [a])) * n(get(it, [b])) for it in l(items)), 0.0)
+
+
+def first_of(items: Any, f: str) -> Any:
+    xs = l(items)
+    if not xs:
+        return ""
+    v = get(xs[0], [f])
+    return "" if v is None else v
+
+
+def max_by(items: Any, f: str) -> float:
+    return max([0.0] + [n(get(it, [f])) for it in l(items)])
+
+
+def css(triples: list) -> str:
+    return ";".join(s(triples[k]) + ":" + s(triples[k + 1]) + s(triples[k + 2]) for k in range(0, len(triples) - 2, 3))
+
+
+def _compound_hits(c: dict, pick_: Any) -> bool:
+    return all(pick_(k) in str(w).split("|") for k, w in c.items() if k != "class")
+
+
+def recipe(path: str, sel: dict) -> str:
+    """the class string of a recipe table for a selection (organisms: base, each key, the matching compounds)"""
+    r = load_json(path)
+
+    def pick_(k: str) -> str:
+        v = s(sel.get(k)).strip()
+        return v or str((r.get("defaults") or {}).get(k, "")).strip()
+
+    parts = [str(r.get("base", ""))]
+    parts += [str((r.get("byKey") or {}).get(k, {}).get(pick_(k), "")) for k in r.get("keys", [])]
+    parts += [str(c.get("class", "")) for c in r.get("compound", []) or [] if _compound_hits(c, pick_)]
+    return merge([p.strip() for p in parts if p.strip()])
+
+
+def preset(path: str, keys: list) -> Any:
+    return get(get(load_json(path), ["values"]), keys)
+
+
+def attrs(kv: list) -> dict:
+    """free DOM attributes from (name, value) pairs, as React prints them"""
+    out: dict = {}
+    for k in range(0, len(kv) - 1, 2):
+        name, v = s(kv[k]), kv[k + 1]
+        if v is None:
+            continue
+        if isinstance(v, bool):
+            if name.startswith("data-") or name.startswith("aria-"):
+                out[name] = s(v)
+            elif v:
+                out[name] = True
+            continue
+        out[name] = s(v)
+    return out
+
+
+def attr_html(a: Any) -> str:
+    """an attribute map as markup: ` name="value"`, a bare name for True, nothing for None and False"""
+    if not isinstance(a, dict):
+        return ""
+    out = ""
+    for k, v in a.items():
+        if v is None or v is False:
+            continue
+        name = html.escape(str(k), quote=True)
+        out += f" {name}" if v is True else f' {name}="{html.escape(s(v), quote=True)}"'
+    return out
+
+
+# ------------------------------------------------------------------ bricks (expr.go, utils.go, tags.go)
+
+def is_set_str(v: Any) -> bool: return s(v).strip() != ""
+
+
+def default_if_empty(v: Any, fallback: str) -> str:
+    x = s(v).strip()
+    return x or fallback
+
+
+def map_or(v: Any, mapping: dict, fallback: str, lower: bool = False) -> str:
+    x = s(v).strip()
+    if lower:
+        x = x.lower()
+    return str(mapping[x]) if x in mapping else fallback
+
+
+def int_map_or(v: Any, mapping: dict, fallback: str) -> str:
+    k = i(v)
+    return str(mapping[k]) if k in mapping else fallback
+
+
+def bool_str(v: Any) -> str: return "true" if t(v) else "false"
+def concat_trim(parts: list) -> str: return "".join(s(p).strip() for p in parts)
+def cn(parts: list) -> str: return merge([s(p) for p in parts])
+
+
+def compose(path: str, selection: dict, extra: list) -> str:
+    """the brick class contract: recipe base, the selected variants (defaults for empty), compounds, then the tail"""
+    r = load_json(path)
+    defaults = r.get("defaults") or {}
+
+    def pick_(k: str) -> str:
+        c = s(selection.get(k)).strip()
+        return c or str(defaults.get(k, "")).strip()
+
+    parts = [str(r["base"]).strip()] if str(r.get("base", "")).strip() else []
+    for key in r.get("keys", []):
+        choices = (r.get("byKey") or {}).get(key)
+        if choices is None:
+            continue
+        choice = pick_(key)
+        if not choice:
+            if choices:
+                raise ValueError(f"[compose] missing default for key {key}")
+            continue
+        if str(choices.get(choice, "")).strip():
+            parts.append(str(choices[choice]))
+    for c in r.get("compound", []) or []:
+        if _compound_hits(c, pick_) and str(c.get("class", "")).strip():
+            parts.append(str(c["class"]))
+    return cn(parts + list(extra))
+
+
+def resolve_tag(tag: Any, fallback: str, allowed: list) -> str:
+    x = s(tag).strip().lower()
+    return x if x and x in allowed else fallback
+
+
+def title_tag(level: Any) -> str:
+    k = i(level)
+    return f"h{k}" if 1 <= k <= 6 else "h2"
+
+
+def lucide(name: Any) -> str:
+    """the inner markup of a Lucide glyph: its nodes with attributes in name order (circle for an unknown name)"""
+    icons = load_json("ui/lucide-icon/lucide-icons.json")["icons"]
+    nodes = icons.get(s(name)) or icons["circle"]
+    out = ""
+    for tag, a in nodes:
+        out += "<" + tag + "".join(f' {k}="{html.escape(str(a[k]), quote=True)}"' for k in sorted(a)) + "></" + tag + ">"
+    return out
diff --git a/xgen/runtimes/jinja2/package.json b/xgen/runtimes/jinja2/package.json
new file mode 100644
index 0000000..78cacf1
--- /dev/null
+++ b/xgen/runtimes/jinja2/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@ui8kit/xgen-runtime-jinja2",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Jinja2 runtime: the Twig brick and organism emitters printed through the jinja dialect, plus the Python port of the ui_* helpers (assets/py).",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-runtime-twig": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/runtimes/jinja2/src/index.ts b/xgen/runtimes/jinja2/src/index.ts
new file mode 100644
index 0000000..d0f79f5
--- /dev/null
+++ b/xgen/runtimes/jinja2/src/index.ts
@@ -0,0 +1,5 @@
+// The Jinja2 runtime has no emitter of its own: the Twig emitters print the same trees through the jinja dialect.
+export { jinja, emitTwigBrick as emitJinjaBrick, emitTwigOrganism as emitJinjaOrganism } from "@ui8kit/xgen-runtime-twig";
+/** the generated Python package and the Jinja2 version it requires */
+export const JINJA2_PACKAGE = "ui8kit-jinja2-ui";
+export const JINJA2_REQUIREMENT = "Jinja2>=3.1,<4";
diff --git a/xgen/runtimes/jinja2/test/emit.test.ts b/xgen/runtimes/jinja2/test/emit.test.ts
new file mode 100644
index 0000000..d0fdeec
--- /dev/null
+++ b/xgen/runtimes/jinja2/test/emit.test.ts
@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { emitJinjaBrick, jinja } from "../src/index";
+
+const plan = planBuild(join(import.meta.dir, "..", "..", "..", ".."));
+
+test("every brick makes Jinja templates with the banner and no Twig-only syntax, the same twice", () => {
+  for (const { brick } of plan.bricks) {
+    if (brick.id === "ui.lucide-icon") continue; // an asset, not emitted
+    const a = emitJinjaBrick(brick, "x", jinja), b = emitJinjaBrick(brick, "x", jinja);
+    expect(a.map((f) => f.contents)).toEqual(b.map((f) => f.contents));
+    for (const f of a.filter((x) => x.path.endsWith(".html.j2"))) {
+      expect(f.contents.startsWith("{#- Code generated by xgen. DO NOT EDIT.")).toBe(true);
+      expect(f.contents).not.toMatch(/\?\?|\|raw|with_context|\{%-? elseif| is not null|\bp\.[A-Z]/);
+    }
+  }
+});
+
+test("the jinja2 package is a target of the plan with organisms, the Python helpers and the ui8kit zones", () => {
+  const t = plan.targets.find((x) => x.runtime === "jinja2")!;
+  expect(t.files.some((f) => f.path === "blocks/pager.html.j2")).toBe(true);
+  expect(t.files.some((f) => f.path === "py/ui8kit_jinja/runtime.py")).toBe(true);
+  expect(t.files.find((f) => f.path === "requirements.txt")!.contents).toContain("Jinja2");
+  const pkg = JSON.parse(t.files.find((f) => f.path === "package.json")!.contents) as { ui8kit: { kit: string[]; composition: string[]; blockRoot: string[] } };
+  expect(pkg.ui8kit.kit).toEqual(["ui", "py"]);
+  expect(pkg.ui8kit.composition).toEqual(["blocks"]);
+  expect(pkg.ui8kit.blockRoot.length).toBeGreaterThan(0);
+});
diff --git a/xgen/runtimes/latte/README.md b/xgen/runtimes/latte/README.md
new file mode 100644
index 0000000..5a5ab81
--- /dev/null
+++ b/xgen/runtimes/latte/README.md
@@ -0,0 +1,38 @@
+# @ui8kit/xgen-runtime-latte
+
+[Latte 3](https://latte.nette.org) runtime. It has no emitter of its own: the Twig emitters print the same trees through the
+`latte` dialect (`xgen/runtimes/twig/src/dialect.ts`). Output: `packages/latte/ui` (composer package `ui8kit/latte-ui`, requires
+`latte/latte` `^3.0`).
+
+Part of xgen (see `../README.md` and the author guide `../../../docs/specs-guide.md`). Tests: `bun test`.
+
+## The dialect
+
+Templates end in `.latte`. Variables carry `$`; output is `{=expr}` (`|noescape` for markup); control flow is `{if}` /
+`{elseif}` / `{else}` / `{/if}` and `{foreach $list as $item}` (index `$iterator->counter0`); captures are
+`{capture $x}...{/capture}`; values are PHP (`['k' => v]`, `??`, `&&`, `str_contains`). Three Latte specifics:
+
+- an element whose name is a variable is written `<div n:tag="$tag1" ...>`: Latte cannot read a printed name followed by a line
+  break, and `n:tag` keeps void elements right;
+- URL attributes (`URL_ATTRS`: `href`, `src`, ...) print with `|nocheck`, or Latte would blank the `data:` URIs React keeps;
+- the markup helpers (`MARKUP_HELPERS`: `ui_attr_html`, `ui_lucide`, `ui_include`) print with `|noescape`, since Latte escapes
+  inside a tag even an `Html` value.
+
+## Helpers
+
+The PHP helpers are the Twig runtime's (`phpHelpers("Latte")` from `@ui8kit/xgen-runtime-twig`: `Runtime.php`, `CnMerge.php` in the
+namespace `UI8Kit\Latte`). `assets/php/Extension.php` is the Latte extension that registers them as functions and adds
+`ui_include` (renders another template with only the given variables); `Extension::engine($root)` builds the `Engine`.
+`assets/parity.php` is the parity harness; `assets/lucide-icon.latte` the icon asset. Generator: `xgen/generator/src/latte.ts`.
+
+## Check group `latte`
+
+The same gate as Twig (`phpTemplateCheck`): `composer install`, `php -l`, every brick case (118) and block case (474) rendered with
+real Latte against React, html-validate of every block case (`xgen/check/src/latte`). The rules group reads `.latte` files by
+rewriting them to the Twig form (`latteAsTwig` in `xgen/check/src/rules/twig.ts`), including `n:if`, `n:foreach`,
+`n:inner-foreach`, `n:tag` and `n:syntax="off"`.
+
+## Prerequisites
+
+PHP 8.2 or newer and composer. Without PHP the group prints `skipped: no PHP`; with `UI8KIT_REQUIRE_ALL_RUNTIMES=1` a skip is a
+failure.
diff --git a/xgen/runtimes/latte/assets/lucide-icon.latte b/xgen/runtimes/latte/assets/lucide-icon.latte
new file mode 100644
index 0000000..7b05067
--- /dev/null
+++ b/xgen/runtimes/latte/assets/lucide-icon.latte
@@ -0,0 +1,9 @@
+{* LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from lucide-icons.json next to this file.
+   Decorative (aria-hidden) unless a Label is given. Size and StrokeWidth default to 16 and 2. *}
+{var $size = ($p['Size'] ?? 0) ?: 16}
+{var $label = $p['Label'] ?? ''}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="{=$size}" height="{=$size}" fill="none" stroke="currentColor"
+  stroke-width="{=($p['StrokeWidth'] ?? 0) ?: 2}" stroke-linecap="round" stroke-linejoin="round"
+  class="{=ui_cn(['inline-block shrink-0', $p['Class'] ?? ''])}"
+  {if $label === ''} aria-hidden="true"{else} aria-label="{=$label}" role="img"{/if} data-slot="icon"
+  {if ($p['Name'] ?? '') !== ''} data-lucide="{=$p['Name']}"{/if}{=ui_attr_html($p['Attrs'] ?? [])|noescape}>{=ui_lucide($p['Name'] ?? '')|noescape}</svg>
diff --git a/xgen/runtimes/latte/assets/parity.php b/xgen/runtimes/latte/assets/parity.php
new file mode 100644
index 0000000..0016d29
--- /dev/null
+++ b/xgen/runtimes/latte/assets/parity.php
@@ -0,0 +1,22 @@
+<?php
+
+// Renders generated templates from JSON: stdin [{"template":"ui/button/button.latte","vars":{"p":{...},"children":"x"}}],
+// stdout the HTML of each (a failure is "ERROR: <message>"). Used by the parity check of xgen.
+
+declare(strict_types=1);
+
+require __DIR__ . '/../vendor/autoload.php';
+
+use UI8Kit\Latte\Extension;
+
+$env = Extension::engine(dirname(__DIR__));
+$requests = json_decode(stream_get_contents(STDIN), true, 512, JSON_THROW_ON_ERROR);
+$out = [];
+foreach ($requests as $r) {
+    try {
+        $out[] = $env->renderToString($r['template'], $r['vars'] ?? []);
+    } catch (\Throwable $e) {
+        $out[] = 'ERROR: ' . $e->getMessage();
+    }
+}
+echo json_encode($out, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_INVALID_UTF8_SUBSTITUTE), "\n";
diff --git a/xgen/runtimes/latte/assets/php/Extension.php b/xgen/runtimes/latte/assets/php/Extension.php
new file mode 100644
index 0000000..b3a8981
--- /dev/null
+++ b/xgen/runtimes/latte/assets/php/Extension.php
@@ -0,0 +1,56 @@
+<?php
+
+declare(strict_types=1);
+
+namespace UI8Kit\Latte;
+
+use Latte\Engine;
+use Latte\Loaders\FileLoader;
+use Latte\Runtime\Html;
+
+/**
+ * The ui_* functions of the generated templates. engine() makes a Latte Engine over the package folder (templates are
+ * rendered as ui/<brick>/<part>.latte and blocks/<organism>.latte) with the functions registered. ui_include renders
+ * another template with only the given variables and returns its markup.
+ */
+final class Extension extends \Latte\Extension
+{
+    private Runtime $rt;
+
+    public function __construct(string $root, private readonly Engine $engine)
+    {
+        $this->rt = new Runtime($root);
+    }
+
+    /** an Engine over the package folder with the extension added; templates compile to $tempDir when given, else in memory */
+    public static function engine(string $root, ?string $tempDir = null): Engine
+    {
+        $latte = new Engine();
+        $latte->setLoader(new FileLoader($root));
+        $latte->setTempDirectory($tempDir);
+        $latte->addExtension(new self($root, $latte));
+        return $latte;
+    }
+
+    public function getFunctions(): array
+    {
+        $static = [
+            'get', 'field', 's', 'text', 't', 'n', 'i', 'eq', 'lt', 'gt', 'le', 'ge', 'add', 'sub', 'mul', 'div', 'and', 'or',
+            'coalesce', 'def', 'l', 'len', 'spread', 'str', 'has', 'cnv', 'tpl', 'num', 'money', 'at', 'page_window',
+            'fit_cols', 'uniq', 'words', 'nbsp', 'nth', 'range', 'max', 'min', 'round', 'count', 'where', 'match', 'pick',
+            'sum_by', 'first_of', 'max_by', 'css', 'attrs', 'is_set_str', 'default_if_empty', 'map_or', 'int_map_or',
+            'bool_str', 'concat_trim', 'cn', 'resolve_tag', 'title_tag',
+        ];
+        $fns = [];
+        foreach ($static as $name) {
+            $fns['ui_' . $name] = [Runtime::class, lcfirst(str_replace('_', '', ucwords($name, '_')))];
+        }
+        $fns['ui_attr_html'] = fn (mixed $a): Html => new Html(Runtime::attrHtml($a));
+        $fns['ui_compose'] = [$this->rt, 'compose'];
+        $fns['ui_recipe'] = [$this->rt, 'recipe'];
+        $fns['ui_preset'] = [$this->rt, 'preset'];
+        $fns['ui_lucide'] = fn (mixed $name): Html => new Html($this->rt->lucide($name));
+        $fns['ui_include'] = fn (string $template, array $vars = []): Html => new Html($this->engine->renderToString($template, $vars));
+        return $fns;
+    }
+}
diff --git a/xgen/runtimes/latte/package.json b/xgen/runtimes/latte/package.json
new file mode 100644
index 0000000..652496e
--- /dev/null
+++ b/xgen/runtimes/latte/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@ui8kit/xgen-runtime-latte",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Latte runtime: the Twig brick and organism emitters printed through the latte dialect; the PHP helpers are the Twig ones (assets/php has the Latte extension).",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-runtime-twig": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/runtimes/latte/src/index.ts b/xgen/runtimes/latte/src/index.ts
new file mode 100644
index 0000000..2705be8
--- /dev/null
+++ b/xgen/runtimes/latte/src/index.ts
@@ -0,0 +1,6 @@
+// The Latte runtime has no emitter of its own: the Twig emitters print the same trees through the latte dialect, and the
+// PHP helpers are the Twig runtime's (assets/php holds only the Latte extension that registers them).
+export { latte, emitTwigBrick as emitLatteBrick, emitTwigOrganism as emitLatteOrganism } from "@ui8kit/xgen-runtime-twig";
+/** the generated composer package and the latte/latte version it requires */
+export const LATTE_PACKAGE = "ui8kit/latte-ui";
+export const LATTE_VERSION = "^3.0";
diff --git a/xgen/runtimes/latte/test/emit.test.ts b/xgen/runtimes/latte/test/emit.test.ts
new file mode 100644
index 0000000..ad86b21
--- /dev/null
+++ b/xgen/runtimes/latte/test/emit.test.ts
@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { emitLatteBrick, latte } from "../src/index";
+
+const plan = planBuild(join(import.meta.dir, "..", "..", "..", ".."));
+
+test("every brick makes Latte templates with the banner and no Twig syntax, the same twice", () => {
+  for (const { brick } of plan.bricks) {
+    if (brick.id === "ui.lucide-icon") continue; // an asset, not emitted
+    const a = emitLatteBrick(brick, "x", latte), b = emitLatteBrick(brick, "x", latte);
+    expect(a.map((f) => f.contents)).toEqual(b.map((f) => f.contents));
+    for (const f of a.filter((x) => x.path.endsWith(".latte"))) {
+      expect(f.contents.startsWith("{* Code generated by xgen. DO NOT EDIT.")).toBe(true);
+      expect(f.contents).not.toMatch(/\{\{|\{%|\|raw|\bp\.[A-Z]|<\{=/);
+    }
+  }
+});
+
+test("the latte package is a target of the plan with organisms, the PHP helpers and the ui8kit zones", () => {
+  const t = plan.targets.find((x) => x.runtime === "latte")!;
+  expect(t.files.some((f) => f.path === "blocks/pager.latte")).toBe(true);
+  expect(t.files.find((f) => f.path === "php/Runtime.php")!.contents).toContain("namespace UI8Kit\\Latte;");
+  expect(t.files.find((f) => f.path === "composer.json")!.contents).toContain("latte/latte");
+  const pkg = JSON.parse(t.files.find((f) => f.path === "package.json")!.contents) as { ui8kit: { kit: string[]; composition: string[]; blockRoot: string[] } };
+  expect(pkg.ui8kit.kit).toEqual(["ui", "php"]);
+  expect(pkg.ui8kit.composition).toEqual(["blocks"]);
+  expect(pkg.ui8kit.blockRoot.length).toBeGreaterThan(0);
+});
diff --git a/xgen/runtimes/react/README.md b/xgen/runtimes/react/README.md
new file mode 100644
index 0000000..0a0155c
--- /dev/null
+++ b/xgen/runtimes/react/README.md
@@ -0,0 +1,5 @@
+# @ui8kit/xgen-runtime-react
+
+React 19 emitter: bricks, organisms, screens, app scaffold.
+
+Part of xgen (see `../README.md` and `../../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
diff --git a/xgen/runtimes/react/assets/LucideIcon.tsx b/xgen/runtimes/react/assets/LucideIcon.tsx
new file mode 100644
index 0000000..d5cb003
--- /dev/null
+++ b/xgen/runtimes/react/assets/LucideIcon.tsx
@@ -0,0 +1,34 @@
+/**
+ * LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file.
+ * Decorative (aria-hidden) unless a `label` is given.
+ */
+import { createElement } from "react";
+import { cn } from "../../utils";
+import { LUCIDE } from "./lucide-icons";
+
+export type LucideIconProps = { name: string; size?: number; strokeWidth?: number; label?: string; className?: string };
+
+export function LucideIcon({ name, size = 16, strokeWidth = 2, label, className }: LucideIconProps) {
+  const nodes = LUCIDE[name] ?? LUCIDE["circle"] ?? [];
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("inline-block shrink-0", className)}
+      aria-hidden={label ? undefined : true}
+      aria-label={label}
+      role={label ? "img" : undefined}
+      data-slot="icon"
+      data-lucide={name}
+    >
+      {nodes.map(([tag, attrs], i) => createElement(tag, { key: i, ...attrs }))}
+    </svg>
+  );
+}
diff --git a/xgen/runtimes/react/assets/ScreenOutlet.tsx b/xgen/runtimes/react/assets/ScreenOutlet.tsx
new file mode 100644
index 0000000..ce8cb7c
--- /dev/null
+++ b/xgen/runtimes/react/assets/ScreenOutlet.tsx
@@ -0,0 +1,14 @@
+// The outlet of the host frame: renders the screen chunk behind a loader (one lazy component per loader, cached).
+import { lazy, Suspense, type ComponentType, type LazyExoticComponent } from "react";
+import type { UrlPort } from "./core";
+
+export type ScreenModule = { default: ComponentType<{ url: UrlPort }> };
+type Loader = () => Promise<ScreenModule>;
+
+const cache = new Map<Loader, LazyExoticComponent<ComponentType<{ url: UrlPort }>>>();
+
+export function ScreenOutlet({ load, url }: { load: Loader; url: UrlPort }) {
+  let Screen = cache.get(load);
+  if (!Screen) { Screen = lazy(load); cache.set(load, Screen); }
+  return <Suspense fallback={null}><Screen url={url} /></Suspense>;
+}
diff --git a/generated/ui/slot/slot.tsx b/xgen/runtimes/react/assets/slot.tsx
similarity index 100%
rename from generated/ui/slot/slot.tsx
rename to xgen/runtimes/react/assets/slot.tsx
diff --git a/xgen/runtimes/react/assets/url.ts b/xgen/runtimes/react/assets/url.ts
new file mode 100644
index 0000000..035bf45
--- /dev/null
+++ b/xgen/runtimes/react/assets/url.ts
@@ -0,0 +1,10 @@
+// The URL as a port for React: the hash store of the app runtime read through useSyncExternalStore.
+import { useMemo, useSyncExternalStore } from "react";
+import { createHashStore, type UrlPort } from "./core";
+
+const store = createHashStore();
+
+export function useUrl(): UrlPort {
+  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot);
+  return useMemo(() => ({ ...snapshot, go: store.go }), [snapshot]);
+}
diff --git a/xgen/runtimes/react/package.json b/xgen/runtimes/react/package.json
new file mode 100644
index 0000000..d37328a
--- /dev/null
+++ b/xgen/runtimes/react/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ui8kit/xgen-runtime-react",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "React 19 emitter: bricks, organisms, screens, app scaffold.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-spec": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*",
+    "@ui8kit/xgen-runtime-core": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/runtimes/react/src/app.ts b/xgen/runtimes/react/src/app.ts
new file mode 100644
index 0000000..91b0e59
--- /dev/null
+++ b/xgen/runtimes/react/src/app.ts
@@ -0,0 +1,58 @@
+// Scaffold of the React host app: config, entry, and the App that renders the screen named by the URL (/<key>/#/<route>).
+// Screens load on demand (one chunk each); content, data and menus come from the shared package, emitted once.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import type { AppSpec, ScreenSpec } from "@ui8kit/xgen-screens";
+import { BANNER, HOST_GEN, SHARED, appCss, hostUrlAsset, indexHtml, jsonFile, screenKey, viteConfig, withBanner, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+
+const UI = "@ui8kit/react-ui";
+
+export function appScaffold(app: AppSpec, screens: ScreenSpec[]): GeneratedFile[] {
+  const loaders = screens.map((s) => `  ${JSON.stringify(screenKey(s.id))}: () => import("./screens/${s.name}").then((m) => ({ default: m.${s.name} })),`);
+  const appTsx = [
+    `// ${BANNER}`,
+    `import { Block, Link, List, ListItem, Title } from "${UI}";`,
+    `import { SCREENS } from "${SHARED}/screens";`,
+    `import { useUrl } from "./runtime/url";`,
+    `import { ScreenOutlet, type ScreenModule } from "./runtime/ScreenOutlet";`,
+    ``,
+    `/** one chunk per screen: a landing is a screen spec, not an app */`,
+    `const LOADERS: Record<string, () => Promise<ScreenModule>> = {`,
+    ...loaders,
+    `};`,
+    ``,
+    `export function App({ screen, title }: { screen: string; title: string }) {`,
+    `  const url = useUrl();`,
+    `  const load = LOADERS[screen];`,
+    `  if (load) return <ScreenOutlet load={load} url={url} />;`,
+    `  return (`,
+    `    <Block tag="main" id="main-content" className="mx-auto w-full max-w-3xl px-4 py-12" data-testid="host-index">`,
+    `      <Title as={1} size="2xl" weight="semibold">{title}</Title>`,
+    `      <List className="mt-6 grid gap-2">`,
+    `        {SCREENS.map((s) => <ListItem key={s.key}><Link className="underline" href={\`/\${s.key}/\`} data-testid="host-screen">{s.key}</Link></ListItem>)}`,
+    `      </List>`,
+    `    </Block>`,
+    `  );`,
+    `}`,
+    ``,
+  ].join("\n");
+  const assets = join(import.meta.dir, "..", "assets");
+  return [
+    jsonFile("package.json", {
+      name: app.name, private: true, version: "0.0.0", type: "module",
+      description: `Generated by xgen from xgen.app.json: the React 19 host of ${screens.length} screens (/<screen>/#/<route>). Generated under ${HOST_GEN}/; src/ is the front controller.`,
+      ui8kit: { runtime: "react", generated: true, kit: [`${HOST_GEN}/runtime`], composition: [`${HOST_GEN}/App.tsx`, `${HOST_GEN}/screens`], blockRoot: [`${HOST_GEN}/App.tsx`, `${HOST_GEN}/screens`] },
+      scripts: { dev: "vite", build: "vite build", preview: "vite preview", check: "tsc --noEmit -p tsconfig.json" },
+      dependencies: { [SHARED]: "workspace:*", [UI]: "workspace:*", react: "^19.2.0", "react-dom": "^19.2.0" },
+      devDependencies: { "@tailwindcss/vite": "^4.3.3", "@types/react": "^19.2.0", "@types/react-dom": "^19.2.0", "@vitejs/plugin-react": "^6.1.0", tailwindcss: "^4.3.3", typescript: "~6.0.2", vite: "^8.3.0" },
+    }),
+    { path: "index.html", contents: indexHtml(app).replace("__EXT__", "tsx") },
+    viteConfig([`import react from "@vitejs/plugin-react";`], "react()", app),
+    { path: "tsconfig.json", contents: `// ${BANNER}\n{\n  "compilerOptions": {\n    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "react-jsx",\n    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true,\n    "allowImportingTsExtensions": true, "types": ["vite/client"]\n  },\n  "include": ["src", "${HOST_GEN}"]\n}\n` },
+    appCss(UI),
+    { path: "src/main.tsx", contents: withBanner(`import { StrictMode } from "react";\nimport { createRoot } from "react-dom/client";\nimport "./app.css";\nimport { bootScreen, screenKeyOf } from "${SHARED}/screens";\nimport { App } from "../${HOST_GEN}/App";\n\nconst screen = screenKeyOf(location);\nconst title = ${JSON.stringify(app.title)};\nbootScreen(screen, ${JSON.stringify(app.theme)}, title);\ncreateRoot(document.getElementById("app")!).render(\n  <StrictMode>\n    <App screen={screen} title={title} />\n  </StrictMode>,\n);\n`) },
+    { path: `${HOST_GEN}/App.tsx`, contents: appTsx },
+    hostUrlAsset("url.ts", readFileSync(join(assets, "url.ts"), "utf8")),
+    hostUrlAsset("ScreenOutlet.tsx", readFileSync(join(assets, "ScreenOutlet.tsx"), "utf8")),
+  ];
+}
diff --git a/xgen/runtimes/react/src/dom.ts b/xgen/runtimes/react/src/dom.ts
new file mode 100644
index 0000000..ef98a6b
--- /dev/null
+++ b/xgen/runtimes/react/src/dom.ts
@@ -0,0 +1,146 @@
+// DOM helpers of the React emitter: the attribute types of each tag, numeric attributes, React names of attributes, root elements.
+import type { Expr } from "@ui8kit/xgen-spec";
+import {
+  type ElementNode,
+  type Node,
+  type TagSpec,
+} from "@ui8kit/xgen-spec";
+import { localIdent } from "@ui8kit/xgen-spec";
+import { printTsExpr, type TsPrintCtx } from "@ui8kit/xgen-runtime-core";
+
+export const REACT_ATTR_TYPES: Record<string, [string, string]> = {
+  a: ["AnchorHTMLAttributes", "HTMLAnchorElement"],
+  button: ["ButtonHTMLAttributes", "HTMLButtonElement"],
+  input: ["InputHTMLAttributes", "HTMLInputElement"],
+  textarea: ["TextareaHTMLAttributes", "HTMLTextAreaElement"],
+  select: ["SelectHTMLAttributes", "HTMLSelectElement"],
+  option: ["OptionHTMLAttributes", "HTMLOptionElement"],
+  optgroup: ["OptgroupHTMLAttributes", "HTMLOptGroupElement"],
+  label: ["LabelHTMLAttributes", "HTMLLabelElement"],
+  form: ["FormHTMLAttributes", "HTMLFormElement"],
+  fieldset: ["FieldsetHTMLAttributes", "HTMLFieldSetElement"],
+  legend: ["HTMLAttributes", "HTMLLegendElement"],
+  img: ["ImgHTMLAttributes", "HTMLImageElement"],
+  source: ["SourceHTMLAttributes", "HTMLSourceElement"],
+  picture: ["HTMLAttributes", "HTMLElement"],
+  dialog: ["DialogHTMLAttributes", "HTMLDialogElement"],
+  details: ["DetailsHTMLAttributes", "HTMLDetailsElement"],
+  summary: ["HTMLAttributes", "HTMLElement"],
+  table: ["TableHTMLAttributes", "HTMLTableElement"],
+  caption: ["HTMLAttributes", "HTMLTableCaptionElement"],
+  thead: ["HTMLAttributes", "HTMLTableSectionElement"],
+  tbody: ["HTMLAttributes", "HTMLTableSectionElement"],
+  tfoot: ["HTMLAttributes", "HTMLTableSectionElement"],
+  tr: ["HTMLAttributes", "HTMLTableRowElement"],
+  th: ["ThHTMLAttributes", "HTMLTableCellElement"],
+  td: ["TdHTMLAttributes", "HTMLTableCellElement"],
+  colgroup: ["ColgroupHTMLAttributes", "HTMLTableColElement"],
+  col: ["ColHTMLAttributes", "HTMLTableColElement"],
+  meter: ["MeterHTMLAttributes", "HTMLMeterElement"],
+  progress: ["ProgressHTMLAttributes", "HTMLProgressElement"],
+  output: ["OutputHTMLAttributes", "HTMLOutputElement"],
+  datalist: ["HTMLAttributes", "HTMLDataListElement"],
+  hr: ["HTMLAttributes", "HTMLHRElement"],
+  br: ["HTMLAttributes", "HTMLBRElement"],
+  wbr: ["HTMLAttributes", "HTMLElement"],
+  p: ["HTMLAttributes", "HTMLParagraphElement"],
+  span: ["HTMLAttributes", "HTMLSpanElement"],
+  div: ["HTMLAttributes", "HTMLDivElement"],
+  li: ["LiHTMLAttributes", "HTMLLIElement"],
+  ul: ["HTMLAttributes", "HTMLUListElement"],
+  ol: ["OlHTMLAttributes", "HTMLOListElement"],
+  nav: ["HTMLAttributes", "HTMLElement"],
+  header: ["HTMLAttributes", "HTMLElement"],
+  footer: ["HTMLAttributes", "HTMLElement"],
+  article: ["HTMLAttributes", "HTMLElement"],
+  figure: ["HTMLAttributes", "HTMLElement"],
+  figcaption: ["HTMLAttributes", "HTMLElement"],
+  blockquote: ["BlockquoteHTMLAttributes", "HTMLQuoteElement"],
+  h1: ["HTMLAttributes", "HTMLHeadingElement"],
+  h2: ["HTMLAttributes", "HTMLHeadingElement"],
+  h3: ["HTMLAttributes", "HTMLHeadingElement"],
+  h4: ["HTMLAttributes", "HTMLHeadingElement"],
+  h5: ["HTMLAttributes", "HTMLHeadingElement"],
+  h6: ["HTMLAttributes", "HTMLHeadingElement"],
+};
+
+/** DOM attributes that React types as numbers; printed as number expressions. */
+export const NUMERIC_DOM_ATTRS = new Set(["colspan", "rowspan", "span", "rows", "cols"]);
+
+/**
+ * Rewrite a string-typed expression into its numeric counterpart when it is a
+ * stringified integer (React numeric DOM props render identically).
+ */
+export function asNumberExpr(expr: Expr): Expr | undefined {
+  switch (expr.kind) {
+    case "intToString":
+      return expr.expr;
+    case "lit":
+      if (typeof expr.value === "string" && /^\d+$/.test(expr.value)) {
+        return { kind: "lit", value: Number(expr.value) };
+      }
+      return typeof expr.value === "number" ? expr : undefined;
+    case "cond": {
+      const thenExpr = asNumberExpr(expr.then);
+      const elseExpr = asNumberExpr(expr.else);
+      if (!thenExpr || !elseExpr) return undefined;
+      return { ...expr, then: thenExpr, else: elseExpr };
+    }
+    default:
+      return undefined;
+  }
+}
+
+/** DOM attribute → React JSX prop name. */
+export function reactAttrName(name: string): string {
+  const special: Record<string, string> = {
+    class: "className",
+    for: "htmlFor",
+    tabindex: "tabIndex",
+    srcset: "srcSet",
+    colspan: "colSpan",
+    rowspan: "rowSpan",
+    fetchpriority: "fetchPriority",
+    autocomplete: "autoComplete",
+    enctype: "encType",
+    novalidate: "noValidate",
+    datetime: "dateTime",
+  };
+  return special[name] ?? name;
+}
+
+export interface PartEmit {
+  code: string;
+  /** the top of the part (variant tables, record and variant value types), also inside code */
+  headCode: string[];
+  /** utils the head needs (variants, type VariantKey) */
+  headUtils: string[];
+  helperImports: Set<string>;
+  usesResolveTag: boolean;
+  usesTitleTag: boolean;
+  usesCn: boolean;
+  utilImports: Set<string>;
+  reactTypeImports: Set<string>;
+  usesSlot: boolean;
+  usesElementType: boolean;
+  usesRefCast: boolean;
+  usesSvgProps: boolean;
+  /** names this part imports from a sibling part of its brick: part name -> values and types */
+  fromSibling: Map<string, { values: Set<string>; types: Set<string> }>;
+}
+
+export function rootElements(node: Node): ElementNode[] {
+  switch (node.kind) {
+    case "element":
+      return [node];
+    case "when":
+      return [...node.then.flatMap(rootElements), ...(node.else ?? []).flatMap(rootElements)];
+    default:
+      return [];
+  }
+}
+
+export function staticTagOf(tag: TagSpec): string | undefined {
+  return tag.kind === "static" ? tag.tag : undefined;
+}
+
diff --git a/xgen/runtimes/react/src/emit.ts b/xgen/runtimes/react/src/emit.ts
new file mode 100644
index 0000000..1614334
--- /dev/null
+++ b/xgen/runtimes/react/src/emit.ts
@@ -0,0 +1,284 @@
+/**
+ * React emitter — one `<stem>.tsx` per one-part brick, one `<part>.tsx` per part otherwise: the variant table at the top (shadcn style), forwardRef components,
+ * Radix-style `asChild` via Slot where the contract allows.
+ */
+
+import type { Expr } from "@ui8kit/xgen-spec";
+import {
+  fileStem,
+  type BrickDef,
+  type PartDef,
+} from "@ui8kit/xgen-spec";
+import { localIdent } from "@ui8kit/xgen-spec";
+import {
+  BANNER,
+  importLine,
+  indent,
+  wrapText,
+  wrapUnion,
+  makeEnv,
+  usesItem,
+  type Emitter,
+  type GeneratedFile,
+  type TypeEnv,
+} from "@ui8kit/xgen-runtime-core";
+import { printTsExpr, type TsPrintCtx } from "@ui8kit/xgen-runtime-core";
+import { classesExpr, declaredProps, partHead } from "@ui8kit/xgen-runtime-core";
+
+import { REACT_ATTR_TYPES, NUMERIC_DOM_ATTRS, asNumberExpr, reactAttrName, rootElements, staticTagOf } from "./dom";
+import { printNode } from "./jsx";
+import type { PartEmit } from "./dom";
+import { fileName } from "@ui8kit/xgen-screens";
+
+export class ReactEmitter implements Emitter {
+  readonly runtime = "react" as const;
+
+  constructor(private readonly utilsPath = "../../utils") {}
+
+  emit(brick: BrickDef): GeneratedFile[] {
+    const parts = brick.parts.map((part) => this.emitPart(brick, part));
+    // one part: one file named after the brick; several parts: one file per part (like the Svelte package),
+    // the parts import what they share (variant tables, record types) from the sibling that owns it
+    if (parts.length === 1) return this.fit(`primitives/${brick.dir}/${fileStem(brick)}`, brick.docs, parts[0]!);
+    return brick.parts.flatMap((part, i) =>
+      this.fit(`primitives/${brick.dir}/${fileName(part.name)}`, i === 0 ? brick.docs : `${part.name}: one part of ${brick.parts[0]!.name} (one file per part, as in the Svelte package).`, parts[i]!));
+  }
+
+  /** the file of one part; when it would pass the readability limit (150 by the check's count, which includes the line after the final newline), its variant tables and value types move to `<stem>-variants.ts` */
+  private fit(stem: string, docs: string, part: PartEmit): GeneratedFile[] {
+    const whole = this.file(docs, [part]);
+    if (whole.split("\n").length <= 150 || part.headCode.length === 0) return [{ path: `${stem}.tsx`, contents: whole }];
+    const head = part.headCode.join("\n");
+    const names = [...head.matchAll(/^export (const|type) (\w+)/gm)].map((m) => (m[1] === "type" ? `type ${m[2]}` : m[2]!));
+    const base = stem.split("/").pop()!;
+    const table = [`// ${BANNER}`, `/** The variant tables of ${docs.split(/[ .:]/)[0]} and the value types of its props, kept out of ${base}.tsx. */`,
+      `import { ${part.headUtils.join(", ")} } from "${this.utilsPath}";`, ``, head.trimEnd(), ``].join("\n");
+    const slim: PartEmit = { ...part, code: part.code.slice(head.length).replace(/^\n+/, ""), headCode: [], utilImports: new Set([...part.utilImports].filter((u) => !part.headUtils.includes(u))) };
+    const contents = this.file(docs, [slim], [importLine(names, `./${base}-variants`)]);
+    return [{ path: `${stem}.tsx`, contents }, { path: `${stem}-variants.ts`, contents: table }];
+  }
+
+  /** a file of parts: banner, docs, the imports its parts need, then the parts */
+  private file(docs: string, parts: PartEmit[], extraImports: string[] = []): string {
+    const helperImports = new Set<string>(parts.flatMap((p) => [...p.helperImports]));
+    const utilImports = new Set<string>(parts.flatMap((p) => [...p.utilImports]));
+    const reactTypeImports = new Set<string>(parts.flatMap((p) => [...p.reactTypeImports]));
+    const usesResolveTag = parts.some((p) => p.usesResolveTag);
+    const usesTitleTag = parts.some((p) => p.usesTitleTag);
+    const usesCn = parts.some((p) => p.usesCn);
+    const usesSlot = parts.some((p) => p.usesSlot);
+    const usesElementType = parts.some((p) => p.usesElementType);
+    const usesRefCast = parts.some((p) => p.usesRefCast);
+    const usesSvgProps = parts.some((p) => p.usesSvgProps);
+    if (usesTitleTag) helperImports.add("titleTag");
+
+    const lines: string[] = [];
+    lines.push(`// ${BANNER}`);
+    lines.push(`/**`);
+    for (const line of wrapText(docs)) lines.push(` * ${line}`.trimEnd());
+    lines.push(` */`);
+    lines.push(``);
+
+    const reactValueImports = ["forwardRef"];
+    const reactTypes = ["type ReactNode", ...[...reactTypeImports].sort().map((t) => `type ${t}`)];
+    if (usesElementType) reactTypes.push("type ElementType");
+    if (usesRefCast) reactTypes.push("type Ref");
+    if (usesSvgProps) reactTypes.push("type SVGProps");
+    lines.push(importLine([...reactValueImports, ...reactTypes], "react"));
+    if (usesCn) utilImports.add("cn");
+    const utils = ["cn", "variants", "type VariantKey"].filter((u) => utilImports.has(u));
+    if (utils.length > 0) lines.push(`import { ${utils.join(", ")} } from "${this.utilsPath}";`);
+    if (helperImports.size > 0) {
+      lines.push(`import { ${[...helperImports].sort().join(", ")} } from "${this.utilsPath}/expr";`);
+    }
+    if (usesResolveTag) lines.push(`import { resolveTag, TagGroup } from "${this.utilsPath}/tags";`);
+    if (usesSlot) lines.push(`import { Slot } from "../slot/slot";`);
+    lines.push(...extraImports);
+    if (parts.length === 1) {
+      for (const [owner, names] of parts[0]!.fromSibling) {
+        const list = [...[...names.values].sort(), ...[...names.types].sort().map((t) => `type ${t}`)];
+        lines.push(importLine(list, `./${fileName(owner)}`));
+      }
+    }
+    lines.push(``);
+
+    for (const p of parts) {
+      lines.push(p.code);
+      lines.push(``);
+    }
+    return lines.join("\n").replace(/\n{3,}/g, "\n\n").trimEnd() + "\n";
+  }
+
+  private emitPart(brick: BrickDef, part: PartDef): PartEmit {
+    const env: TypeEnv = makeEnv(brick, part);
+    const decls = declaredProps(brick, part);
+    const helperImports = new Set<string>();
+    const head = partHead(brick, part);
+    const utilImports = new Set<string>();
+    const reactTypeImports = new Set<string>();
+    const state = {
+      usesResolveTag: false,
+      usesTitleTag: false,
+      usesCn: false,
+      usesSlot: false,
+      usesElementType: false,
+      usesRefCast: false,
+      usesSvgProps: false,
+    };
+
+    const hasChildren = part.props.some((p) => p.type === "children");
+
+    // Root typing.
+    const roots = rootElements(part.render);
+    const rootTags = roots.map((r) => staticTagOf(r.tag));
+    const multiRoot = roots.length > 1;
+    const hasSvgRoot = rootTags.includes("svg");
+    const singleStaticTag =
+      !multiRoot && rootTags.length === 1 && rootTags[0] !== undefined ? rootTags[0] : undefined;
+    const isSvgRoot = singleStaticTag === "svg";
+    const [attrType, elemType] =
+      singleStaticTag && !isSvgRoot
+        ? REACT_ATTR_TYPES[singleStaticTag] ?? ["HTMLAttributes", "HTMLElement"]
+        : ["HTMLAttributes", "HTMLElement"];
+    reactTypeImports.add(attrType);
+    const refType = isSvgRoot
+      ? "SVGSVGElement"
+      : multiRoot && hasSvgRoot
+        ? "HTMLElement | SVGSVGElement"
+        : singleStaticTag
+          ? elemType
+          : "HTMLElement";
+    // Casts are needed when the forwardRef generic is wider than one element.
+    const needsRefCast = multiRoot || singleStaticTag === undefined || isSvgRoot;
+    if (needsRefCast) state.usesRefCast = true;
+
+    // Props type.
+    const omitKeys = new Set<string>(["className", "children"]);
+    for (const d of decls) omitKeys.add(d.reactName);
+    const propsFields: string[] = decls.map((d) => {
+      const key = /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(d.reactName) ? d.reactName : JSON.stringify(d.reactName);
+      return `  ${key}?: ${d.tsType};`;
+    });
+    propsFields.push(`  className?: string;`);
+    if (hasChildren) propsFields.push(`  children?: ReactNode;`);
+    if (part.asChild) propsFields.push(`  asChild?: boolean;`);
+
+    const genericAttr = attrType === "HTMLAttributes" ? `HTMLAttributes<${elemType}>` : `${attrType}<${elemType}>`;
+    const omit = [...omitKeys].map((k) => JSON.stringify(k)).join(" | ");
+    const propsTypeName = `${part.name}Props`;
+    const typeLine = `export type ${propsTypeName} = Omit<${genericAttr}, ${omit}> & {`;
+    const typeHead = typeLine.length <= 100
+      ? typeLine
+      : `export type ${propsTypeName} = Omit<\n  ${genericAttr},\n${wrapUnion([...omitKeys].map((k) => JSON.stringify(k)), "  ").join("\n")}\n> & {`;
+    const propsType = `${typeHead}\n${propsFields.join("\n")}\n};`;
+
+    // Destructure list.
+    const destructure: string[] = decls.map((d) =>
+      d.reactName === d.local || !/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(d.reactName)
+        ? /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(d.reactName)
+          ? d.reactName
+          : `${JSON.stringify(d.reactName)}: ${d.local}`
+        : `${d.reactName}: ${d.local}`
+    );
+    destructure.push("className");
+    if (hasChildren) destructure.push("children");
+    if (part.asChild) destructure.push("asChild");
+    destructure.push("...rest");
+
+    // Print context.
+    const ctx: TsPrintCtx = {
+      env,
+      propCode: (name) => {
+        if (name === "Class") return "className";
+        const d = decls.find((x) => x.def.name === name);
+        if (!d) throw new Error(`${brick.id}/${part.name}: prop ${name} not declared for React`);
+        return d.local;
+      },
+      itemCode: (field) => `item.${localIdent(field)}`,
+      derivedCode: (name) => `${name}Value`,
+      resolvedTagCode: () => "resolvedTagValue",
+      helpers: helperImports,
+    };
+
+    // Body statements.
+    const body: string[] = [];
+    if (part.classes) {
+      const classes = classesExpr(brick, part, ctx);
+      if (classes.usesVariantKey) head.usesVariantKey = true;
+      state.usesCn = true;
+      body.push(`const cls = ${classes.expr};`);
+    }
+    for (const [name, expr] of Object.entries(part.derived ?? {})) {
+      if (usesItem(expr, env)) throw new Error(`${brick.id}/${part.name}: derived ${name} uses loop item`);
+      body.push(`const ${name}Value = ${printTsExpr(expr, ctx)};`);
+    }
+
+    // Tag resolution for dynamic roots.
+    const root = part.render;
+    if (root.kind === "element" && root.tag.kind !== "static") {
+      state.usesElementType = true;
+      if (root.tag.kind === "resolved") {
+        state.usesResolveTag = true;
+        const t = root.tag;
+        body.push(
+          `const resolvedTagValue = resolveTag(${ctx.propCode(t.fromProp)}, ${JSON.stringify(t.fallback)}, TagGroup.${t.group});`
+        );
+      } else if (root.tag.kind === "heading") {
+        state.usesTitleTag = true;
+        body.push(`const resolvedTagValue = titleTag(${ctx.propCode(root.tag.fromProp)});`);
+      } else {
+        body.push(`const resolvedTagValue = ${printTsExpr(root.tag.expr, ctx)};`);
+      }
+      body.push(`const Tag = resolvedTagValue as ElementType;`);
+    }
+
+    // asChild branch.
+    const asChildBranch = part.asChild
+      ? `if (asChild) {\n` +
+        `  return (\n` +
+        `    <Slot ref={ref} className={${part.classes ? "cls" : "className"}} {...rest}>\n` +
+        `      {children}\n` +
+        `    </Slot>\n` +
+        `  );\n` +
+        `}\n`
+      : "";
+    if (part.asChild) state.usesSlot = true;
+
+    // JSX.
+    const jsx = printNode(root, ctx, part, state, { isRoot: true, needsRefCast });
+
+    const fn =
+      `export const ${part.name} = forwardRef<${refType}, ${propsTypeName}>(function ${part.name}(\n` +
+      `  { ${destructure.join(", ")} },\n` +
+      `  ref\n` +
+      `) {\n` +
+      indent([...body, ""].join("\n"), 1) +
+      (asChildBranch ? indent(asChildBranch, 1) : "") +
+      indent(`return (\n${indent(jsx, 1)}\n);`, 1) +
+      `\n});\n${part.name}.displayName = ${JSON.stringify(part.name)};`;
+
+    const docs = `/**\n${wrapText(part.docs)
+      .map((l) => ` * ${l}`.trimEnd())
+      .join("\n")}\n */`;
+
+    if (head.usesVariants) utilImports.add("variants");
+    if (head.usesVariantKey) utilImports.add("type VariantKey");
+    return {
+      code: [...head.code, docs, propsType, "", fn].join("\n"),
+      headCode: head.code,
+      headUtils: [...(head.usesVariants ? ["variants"] : []), ...(head.usesVariantKey ? ["type VariantKey"] : [])],
+      helperImports,
+      utilImports,
+      reactTypeImports,
+      usesResolveTag: state.usesResolveTag,
+      usesTitleTag: state.usesTitleTag,
+      usesCn: state.usesCn,
+      usesSlot: state.usesSlot,
+      usesElementType: state.usesElementType,
+      usesRefCast: state.usesRefCast,
+      usesSvgProps: state.usesSvgProps,
+      fromSibling: head.fromSibling,
+    };
+  }
+
+}
diff --git a/xgen/runtimes/react/src/index.ts b/xgen/runtimes/react/src/index.ts
new file mode 100644
index 0000000..82d9471
--- /dev/null
+++ b/xgen/runtimes/react/src/index.ts
@@ -0,0 +1,3 @@
+export { ReactEmitter } from "./emit";
+export * from "./view";
+export * from "./app";
diff --git a/xgen/runtimes/react/src/jsx.ts b/xgen/runtimes/react/src/jsx.ts
new file mode 100644
index 0000000..3de259e
--- /dev/null
+++ b/xgen/runtimes/react/src/jsx.ts
@@ -0,0 +1,181 @@
+// JSX printing of the React emitter: the nodes and attributes of one part as JSX text.
+import type { Expr } from "@ui8kit/xgen-spec";
+import {
+  type AttrSpec,
+  type ElementNode,
+  type Node,
+  type PartDef,
+} from "@ui8kit/xgen-spec";
+import { localIdent } from "@ui8kit/xgen-spec";
+import {
+  exprType,
+  indent,
+} from "@ui8kit/xgen-runtime-core";
+import { formatAttr, printTsExpr, tagHead, type TsPrintCtx } from "@ui8kit/xgen-runtime-core";
+import {
+  neverEmptyString,
+  printInlineClassSpec,
+  isPassthroughForward,
+} from "@ui8kit/xgen-runtime-core";
+
+import { NUMERIC_DOM_ATTRS, asNumberExpr, reactAttrName, rootElements, staticTagOf, REACT_ATTR_TYPES } from "./dom";
+
+export function printAttrs(
+  node: ElementNode,
+  ctx: TsPrintCtx,
+  part: PartDef,
+  state: { usesCn: boolean; usesSvgProps: boolean },
+  opts: { withRef: boolean; refCast?: string; svgCast?: boolean; inLoop: boolean }
+): string[] {
+  const out: string[] = [];
+  if (opts.withRef) {
+    out.push(opts.refCast ? `ref={ref as Ref<${opts.refCast}>}` : `ref={ref}`);
+  }
+  for (const attr of node.attrs) {
+    out.push(printAttr(attr, ctx, part, state, opts));
+  }
+  return out.filter(Boolean);
+}
+
+export function printAttr(
+  attr: AttrSpec,
+  ctx: TsPrintCtx,
+  part: PartDef,
+  state: { usesCn: boolean; usesSvgProps: boolean },
+  opts: { svgCast?: boolean; inLoop: boolean }
+): string {
+  switch (attr.kind) {
+    case "static":
+      return `${reactAttrName(attr.name)}=${JSON.stringify(attr.value)}`;
+    case "expr": {
+      if (isPassthroughForward(attr, part)) return "";
+      const name = reactAttrName(attr.name);
+      let exprToPrint = attr.expr;
+      if (NUMERIC_DOM_ATTRS.has(attr.name)) {
+        exprToPrint = asNumberExpr(attr.expr) ?? attr.expr;
+      }
+      const value = printTsExpr(exprToPrint, ctx);
+      const t = exprType(exprToPrint, ctx.env);
+      if (attr.when) {
+        return `${name}={${printTsExpr(attr.when, ctx)} ? ${value} : undefined}`;
+      }
+      if (attr.keepEmpty && t === "string") {
+        return `${name}={(${value}) ?? ""}`;
+      }
+      if (t !== "string" || neverEmptyString(attr.expr, ctx.env)) {
+        return `${name}={${value}}`;
+      }
+      ctx.helpers.add("orUndef");
+      return `${name}={orUndef(${value})}`;
+    }
+    case "bool":
+      return `${reactAttrName(attr.name)}={${printTsExpr(attr.expr, ctx)} || undefined}`;
+    case "class": {
+      if (!attr.spec) return `className={cls || undefined}`;
+      state.usesCn = true;
+      const inline = printInlineClassSpec(attr.spec, ctx, () =>
+        part.props.some((p) => p.name === "Class") && !opts.inLoop ? "className" : undefined
+      );
+      // cn("static ...", ...) is never empty: no fallback
+      if (/^cn\("[^"]+"/.test(inline)) return formatAttr(`className={${inline}}`);
+      return `className={${inline} || undefined}`;
+    }
+    case "rest":
+      if (opts.svgCast) {
+        state.usesSvgProps = true;
+        return `{...(rest as SVGProps<SVGSVGElement>)}`;
+      }
+      return `{...rest}`;
+  }
+}
+
+export function printNode(
+  node: Node,
+  ctx: TsPrintCtx,
+  part: PartDef,
+  state: {
+    usesResolveTag: boolean;
+    usesTitleTag: boolean;
+    usesCn: boolean;
+    usesSlot: boolean;
+    usesElementType: boolean;
+    usesRefCast: boolean;
+    usesSvgProps: boolean;
+  },
+  opts: { isRoot?: boolean; needsRefCast?: boolean; inLoop?: boolean } = {}
+): string {
+  switch (node.kind) {
+    case "element": {
+      const tagCode =
+        node.tag.kind === "static"
+          ? node.tag.tag
+          : opts.isRoot
+            ? "Tag"
+            : (() => {
+                throw new Error(`${part.name}: dynamic tags only supported at part root`);
+              })();
+      const isSvg = node.tag.kind === "static" && node.tag.tag === "svg";
+      const refCast = opts.needsRefCast
+        ? isSvg
+          ? "SVGSVGElement"
+          : node.tag.kind === "static"
+            ? `HTMLElementTagNameMap[${JSON.stringify(node.tag.tag)}]`
+            : "HTMLElement"
+        : undefined;
+      const attrs = printAttrs(node, ctx, part, state, {
+        withRef: opts.isRoot === true,
+        refCast,
+        svgCast: isSvg,
+        inLoop: opts.inLoop === true,
+      });
+      // React forbids children on <textarea>; the content contract maps to
+      // defaultValue (uncontrolled initial value, same SSR output).
+      if (tagCode === "textarea" && node.children.length === 1 && node.children[0]!.kind === "text") {
+        const value = printTsExpr((node.children[0] as { expr: Expr }).expr, ctx);
+        return tagHead(tagCode, [...attrs, `defaultValue={(${value}) ?? ""}`], "/>");
+      }
+      if (node.void || node.children.length === 0) return tagHead(tagCode, attrs, "/>");
+      const children = node.children
+        .map((c) => printNode(c, ctx, part, state, { inLoop: opts.inLoop }))
+        .join("\n");
+      return `${tagHead(tagCode, attrs, ">")}\n${indent(children, 1)}\n</${tagCode}>`;
+    }
+    case "slot":
+      return `{children}`;
+    case "text":
+      return `{${printTsExpr(node.expr, ctx)}}`;
+    case "when": {
+      const test = printTsExpr(node.test, ctx);
+      const inner = { ...opts, isRoot: opts.isRoot };
+      const thenCode = wrapFragment(
+        node.then.map((c) => printNode(c, ctx, part, state, inner))
+      );
+      const elseCode =
+        node.else && node.else.length > 0
+          ? wrapFragment(node.else.map((c) => printNode(c, ctx, part, state, inner)))
+          : "null";
+      const ternary = `${test} ? (\n${indent(thenCode, 1)}\n) : ${
+        elseCode === "null" ? "null" : `(\n${indent(elseCode, 1)}\n)`
+      }`;
+      // At part root the ternary is the returned expression itself; as a
+      // child it must be wrapped in JSX braces.
+      return opts.isRoot ? ternary : `{${ternary}}`;
+    }
+    case "forEach": {
+      const itemsProp = part.props.find((p) => p.name === node.itemsProp)!;
+      const itemsCode = ctx.propCode(itemsProp.name);
+      const body = node.body.map((c) =>
+        printNode(c, ctx, part, state, { inLoop: true })
+      );
+      // Attach key to the outermost element of the loop body.
+      const bodyCode = wrapFragment(body).replace(/^<([a-zA-Z0-9]+)(\s|>)/, `<$1 key={index}$2`);
+      return `{(${itemsCode} ?? []).map((item, index) => (\n${indent(bodyCode, 1)}\n))}`;
+    }
+  }
+}
+
+
+function wrapFragment(parts: string[]): string {
+  if (parts.length === 1) return parts[0]!;
+  return `<>\n${indent(parts.join("\n"), 1)}\n</>`;
+}
diff --git a/xgen/runtimes/react/src/view.ts b/xgen/runtimes/react/src/view.ts
new file mode 100644
index 0000000..b8ff9f1
--- /dev/null
+++ b/xgen/runtimes/react/src/view.ts
@@ -0,0 +1,284 @@
+// React output for organisms, screens and the app scaffold. Blocks are ternaries and `.map`, render-prop slots are function props.
+import { fileName, presetFile, printBare, printValue, sourcesOf, tierDir, typesPath, type OrganismSpec, type ScreenSpec } from "@ui8kit/xgen-screens";
+import { reactPropName } from "@ui8kit/xgen-spec";
+import { assetFile, assetTables, BANNER, chainLines, chunksOf, partsOf, cnLines, pageSources, optionalGroups, printVariantTable, wrapList, wrapText, screenModel, type ChunkModel, type RecipeLike, typeName, walkNodes, recordTypes, type GeneratedFile, type PartRef, type Syntax, type WalkEnv } from "@ui8kit/xgen-runtime-core";
+
+const pad = (lines: string[], n = 1): string[] => lines.map((l) => (l ? "  ".repeat(n) + l : l));
+const cap = (s: string): string => s[0]!.toUpperCase() + s.slice(1);
+/** the lines are one JSX element (an opening line, the end of a long opening tag, the closing tag): no fragment needed around them */
+const singleRoot = (lines: string[]): boolean => {
+  if (!lines.length || !/^<[A-Za-z]/.test(lines[0]!)) return false;
+  const top = lines.filter((l) => l && !l.startsWith(" "));
+  return top.slice(1).every((l, i, a) => l === ">" || l === "/>" || (i === a.length - 1 && /^<\/[A-Za-z.]+>$/.test(l)));
+};
+/** the lines wrapped in a fragment unless they are one element */
+const inner = (lines: string[]): string[] => (singleRoot(lines) ? pad(lines) : ["  <>", ...pad(lines, 2), "  </>"]);
+const frag = (lines: string[]): string[] => ["(", ...inner(lines), ")"];
+/** `key` on the root element of a loop body, or a keyed Fragment around the body */
+const keyed = (body: string[], key: string): string[] =>
+  singleRoot(body)
+    ? pad([body[0]!.replace(/^<([A-Za-z.]+)/, `<$1 key={${key}}`), ...body.slice(1)])
+    : [`  <Fragment key={${key}}>`, ...pad(body, 2), "  </Fragment>"];
+
+export const reactSyntax: Syntax = {
+  runtime: "react",
+  propName(ref: PartRef, canonical: string) {
+    if (canonical === "Class") return "className";
+    const d = ref.part.props.find((x) => x.name === canonical);
+    if (!d) throw new Error(`${ref.part.name}: prop ${canonical} does not exist`);
+    return reactPropName(d);
+  },
+  attrName: (name) => (name === "tabindex" ? "tabIndex" : name),
+  eventProp: (ev) => (ev === "input" ? "onChange" : `on${cap(ev)}`),
+  callbackName: (ev) => `on${cap(ev)}`,
+  eventType: "ChangeEvent<HTMLInputElement>",
+  classProp: "className",
+  ifChain(branches, rest) {
+    const out: string[] = [];
+    branches.forEach(([c, lines], i) => { out.push(i === 0 ? `{${c} ? (` : `) : ${c} ? (`, ...inner(lines)); });
+    if (rest.length) out.push(") : (", ...inner(rest), ")}");
+    else out.push(") : null}");
+    return out;
+  },
+  each: (items, as, key, body, index) => [`{(${items} ?? []).map((${as}${index ? `, ${index}` : ""}) => (`, ...keyed(body, key), "))}"],
+  slot: (name, args, fn) => [fn ? `{${name}?.(${args.join(", ")})}` : `{${name}}`],
+  slotProp: (name, params, body, fn) => ({ attr: [fn ? `${name}={(${params}) => ${frag(body).join("\n")}}` : `${name}={${frag(body).join("\n")}}`] }),
+  fragment: frag,
+};
+
+export interface ViewDeps {
+  parts: Record<string, PartRef>;
+  organisms: Record<string, OrganismSpec>;
+  /** import path of the file of a part, from the folder of the component (`src/blocks/`, `src/components/`) */
+  partPath(name: string): string;
+  /** the recipes (specs/recipes), by file name: printed as variant tables at the top of the organisms that read them */
+  recipes?: Record<string, RecipeLike>;
+}
+
+/** the variant tables of the recipes an organism reads (shadcn/cva style), printed at the top of its file */
+function recipeTables(org: OrganismSpec, deps: ViewDeps): string[] {
+  return Object.entries(org.recipes ?? {}).map(([local, file]) => {
+    const recipe = deps.recipes?.[file];
+    if (!recipe) throw new Error(`${org.name}: recipe ${file} not found in specs/recipes`);
+    return `/** ${org.name}: the classes of each value (shadcn/cva style). */\n${printVariantTable(`${local}Variants`, recipe)}`;
+  });
+}
+
+/** the one-line description on top, cut under the width */
+const docsLines = (docs: string): string[] => { const l = wrapText(docs); return l.length === 1 ? [`/** ${l[0]} */`] : ["/**", ...l.map((x) => ` * ${x}`), " */"]; };
+
+const header = `// ${BANNER}`;
+
+function envFor(deps: ViewDeps, optional: string[] = []): WalkEnv {
+  return { syntax: reactSyntax, parts: deps.parts, organisms: deps.organisms, print: { emit: (ev) => `on${cap(ev)}?.`, helpers: new Set(), presets: new Set(), optional: new Set(optional), runtime: "react" }, usedParts: new Set(), usedOrganisms: new Set(), usesEach: { value: false } };
+}
+
+function groupImports(names: string[], pathOf: (n: string) => string): string[] {
+  const byFile = new Map<string, string[]>();
+  for (const n of names) { const f = pathOf(n); byFile.set(f, [...(byFile.get(f) ?? []), n]); }
+  return [...byFile].sort(([a], [b]) => a.localeCompare(b)).map(([f, ns]) => `import { ${ns.sort().join(", ")} } from "${f}";`);
+}
+
+function reactImports(markup: string[], needChangeEvent: boolean): string {
+  const names = [markup.some((l) => l.includes("<Fragment")) ? "Fragment" : "", needChangeEvent ? "type ChangeEvent" : ""].filter(Boolean);
+  return names.length ? `import { ${names.join(", ")} } from "react";` : "";
+}
+
+const constLines = (org: OrganismSpec): string[] =>
+  Object.entries(org.consts ?? {}).filter(([name]) => !assetTables(org).includes(name)).flatMap(([name, table]) => [`const ${name}: Record<string, string> = {`, ...Object.entries(table).map(([k, v]) => `  ${JSON.stringify(k)}: ${JSON.stringify(v)},`), `};`, ``]);
+
+export function emitOrganism(org: OrganismSpec, deps: ViewDeps): GeneratedFile[] {
+  const env = envFor(deps, optionalGroups(org));
+  env.slotArity = { ...Object.fromEntries(org.slots.map((s) => [s.name, s.args.length])), ...(org.children ? { children: 0 } : {}) };
+  const markup = walkNodes(org.view, env);
+  const name = org.name;
+  const dir = tierDir(org.id);
+  const recordNames = Object.keys(org.records);
+  const propLines = [
+    ...org.props.map((p) => `  ${p.name}${p.required ? "" : "?"}: ${typeName(p.type)};`),
+    ...(org.className ? [`  className?: string;`] : []),
+    ...(org.children ? [`  children?: ReactNode;`] : []),
+    ...org.slots.map((s) => (s.args.length ? `  ${s.name}?: (${s.args.map((a, i) => `${a.name || "arg" + i}: ${typeName(a.type)}`).join(", ")}) => ReactNode;` : `  ${s.name}?: ReactNode;`)),
+    ...org.events.map((e) => `  on${cap(e.name)}?: (${e.args.map((a) => `${a.name}: ${typeName(a.type)}`).join(", ")}) => void;`),
+  ];
+  const lit = (v: string | number | boolean) => JSON.stringify(v);
+  const destructure = [
+    ...org.props.map((p) => (p.default === undefined ? p.name : `${p.name} = ${lit(p.default)}`)),
+    ...(org.className ? ["className"] : []),
+    ...(org.children ? ["children"] : []),
+    ...org.slots.map((s) => s.name),
+    ...org.events.map((e) => `on${cap(e.name)}`),
+  ];
+  const derived = (org.derived ?? []).map((d) => {
+    const one = `  const ${d.name} = ${printBare(d.value, env.print)};`;
+    const chain = one.length > 100 ? chainLines(printValue(d.value, env.print)) ?? cnLines(printBare(d.value, env.print)) : undefined;
+    return chain ? `  const ${d.name} =\n${chain.map((l) => `    ${l}`).join("\n")};` : one;
+  });
+  const tables = recipeTables(org, deps);
+  if (tables.length) env.print.helpers.add("variants");
+  const helpers = [...env.print.helpers].sort();
+  const reactNames = [markup.some((l) => l.includes("<Fragment")) ? "Fragment" : "", markup.join("\n").includes("ChangeEvent<") ? "type ChangeEvent" : "", "type ReactNode"].filter(Boolean);
+  const orgImports = [...env.usedOrganisms].sort().map((o) => `import { ${o} } from "../${tierDir(deps.organisms[o]!.id)}/${fileName(o)}";`);
+  const contents = [
+    header,
+    ...docsLines(org.docs),
+    `import { ${reactNames.join(", ")} } from "react";`,
+    ...groupImports([...env.usedParts].sort(), (n) => deps.partPath(n)),
+    ...orgImports,
+    ...[...(env.print.presets ?? [])].sort().map((p) => `import { ${p} } from "../presets/${presetFile(p)}";`),
+    ...(helpers.length ? [`import { ${helpers.join(", ")} } from "../utils";`] : []),
+    ...(assetTables(org).length ? [`import { ${assetTables(org).join(", ")} } from "./${fileName(name)}.assets";`] : []),
+    ...(recordNames.length ? [`import type { ${recordNames.join(", ")} } from "./${fileName(name)}.types";`] : []),
+    ...(org.typeImports ?? []).map((t) => `import type { ${t.names.join(", ")} } from "${typesPath(org.id, deps.organisms[t.from] ?? { id: org.id, name: t.from })}";`),
+    ``,
+    ...tables.flatMap((t) => [t, ``]),
+    ...constLines(org),
+    `export type ${name}Props = {`,
+    ...propLines,
+    `};`,
+    ``,
+    `${wrapList(`export function ${name}({`, destructure, `}: ${name}Props) {`)}`,
+    ...derived,
+    `  return (`,
+    ...pad(singleRoot(markup) ? markup : ["<>", ...pad(markup), "</>"], 2),
+    `  );`,
+    `}`,
+    ``,
+  ].join("\n");
+  const out: GeneratedFile[] = [{ path: `${dir}/${fileName(name)}.tsx`, contents }];
+  if (recordNames.length) out.push({ path: `${dir}/${fileName(name)}.types.ts`, contents: `${header}\n\n${recordTypes(org, deps.organisms)}\n` });
+  if (assetTables(org).length) out.push({ path: `${dir}/${fileName(name)}.assets.ts`, contents: assetFile(org, header) });
+  return out;
+}
+
+export interface ScreenDeps extends ViewDeps {
+  ui: string;
+  /** package of the shared app outputs: content, data, menus, url runtime core */
+  shared: string;
+  recordType: string;
+}
+
+function emitPage(s: ScreenSpec, deps: ScreenDeps): GeneratedFile {
+  const m = screenModel(s);
+  const env = envFor(deps);
+  const chunks = new Map(chunksOf(s).map((c) => [c.area, c]));
+  const parts = partsOf(s);
+  env.part = (name) => [`<${name} />`];
+  const areaLines = (a: string): string[] => (chunks.has(a) ? [`<${chunks.get(a)!.name} />`] : walkNodes(s.areas[a] ?? [], env));
+  env.outlet = () => reactSyntax.ifChain(m.otherAreas.map((a): [string, string[]] => [`route.area === ${JSON.stringify(a)}`, areaLines(a)]), areaLines(m.listArea));
+  const markup = walkNodes(s.layout, env);
+  const sources = pageSources(s);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const types = [...new Set(sources.map((x) => x.record))].sort().map((r) => `type ${r}`);
+  const contents = [
+    header,
+    ...docsLines(s.docs),
+    reactImports(markup, JSON.stringify(chunks.size ? s.layout : [s.layout, s.areas]).includes('"$":"event')),
+    wrapList("import {", [...imports, ...types], `} from "${deps.ui}";`),
+    ...[...chunks.values(), ...parts].map((c) => `import { ${c.name} } from "./${c.dir}/${c.name}";`),
+    `import { fromCodex, matchRoute, type UrlPort } from "${deps.shared}/runtime/core";`,
+    ...(sources.length ? [`import { CODEX } from "${deps.shared}/runtime/codex";`] : []),
+    `import { toggleTheme } from "${deps.shared}/runtime/theme";`,
+    `import { ui } from "${deps.shared}/content";`,
+    ...(s.nav ? [`import { navOf } from "${deps.shared}/nav/${s.name}";`] : []),
+    ...sources.map((x) => `import { ${x.collection} as ${x.as}Entries } from "${deps.shared}/data/${x.collection}";`),
+    ``,
+    m.constsTs,
+    ``,
+    ...sources.map((x) => `const ${x.as} = fromCodex<${x.record}>(${x.as}Entries, ${x.as.toUpperCase()}_FIELDS, CODEX);`),
+    `const HOME = { area: ${JSON.stringify(m.listArea)}, params: {} as Record<string, string> };`,
+    `const actions = { toggleTheme };`,
+    ...(m.namedTs ? [``, m.namedTs] : []),
+    ``,
+    `export function ${s.name}({ url }: { url: UrlPort }) {`,
+    `  const route = matchRoute(ROUTES, url.path) ?? HOME;`,
+    ...(s.nav ? [`  const nav = navOf(route.area);`] : []),
+    `  return (`,
+    ...pad(singleRoot(markup) ? markup : ["<>", ...pad(markup), "</>"], 2),
+    `  );`,
+    `}`,
+    ``,
+  ].join("\n");
+  return { path: `screens/${s.name}.tsx`, contents };
+}
+
+/** one area of a chunked page as its own component: it imports only the data it shows */
+function emitChunk(s: ScreenSpec, c: ChunkModel, deps: ScreenDeps): GeneratedFile {
+  const env = envFor(deps);
+  const nodes = c.nodes;
+  const markup = walkNodes(nodes, env);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const types = [...new Set(c.sources.map((x) => x.record))].sort().map((r) => `type ${r}`);
+  const contents = [
+    header,
+    `// ${c.doc}`,
+    reactImports(markup, JSON.stringify(nodes).includes('"$":"event')),
+    wrapList("import {", [...imports, ...types], `} from "${deps.ui}";`),
+    ...(c.sources.length ? [`import { fromCodex } from "${deps.shared}/runtime/core";`] : []),
+    ...(c.sources.length ? [`import { CODEX } from "${deps.shared}/runtime/codex";`] : []),
+    ...(c.actions ? [`import { toggleTheme } from "${deps.shared}/runtime/theme";`] : []),
+    `import { ui } from "${deps.shared}/content";`,
+    ...c.sources.map((x) => `import { ${x.collection} as ${x.as}Entries } from "${deps.shared}/data/${x.collection}";`),
+    ...(c.constsTs ? [``, c.constsTs] : []),
+    ``,
+    ...c.sources.map((x) => `const ${x.as} = fromCodex<${x.record}>(${x.as}Entries, ${x.as.toUpperCase()}_FIELDS, CODEX);`),
+    ...(c.actions ? [`const actions = { toggleTheme };`] : []),
+    ...(c.sources.length || c.actions ? [``] : []),
+    ...(c.namedTs ? [c.namedTs, ``] : []),
+    `export function ${c.name}() {`,
+    `  return (`,
+    ...pad(singleRoot(markup) ? markup : ["<>", ...pad(markup), "</>"], 2),
+    `  );`,
+    `}`,
+    ``,
+  ].filter((l, i, a) => l !== "" || a[i - 1] !== "").join("\n");
+  return { path: `screens/${c.dir}/${c.name}.tsx`, contents };
+}
+
+/** the area files of a screen with `chunks`, and the part files of a page screen with `parts` */
+export function emitChunks(s: ScreenSpec, deps: ScreenDeps): GeneratedFile[] {
+  return [...chunksOf(s), ...partsOf(s)].map((c) => emitChunk(s, c, deps));
+}
+
+export function emitScreen(s: ScreenSpec, deps: ScreenDeps): GeneratedFile {
+  if (s.kind === "page") return emitPage(s, deps);
+  const m = screenModel(s);
+  const env = envFor(deps, ["record"]);
+  const areaLines = (a: string): string[] => walkNodes(s.areas[a] ?? [], env);
+  env.outlet = () => {
+    const branches: Array<[string, string[]]> = m.otherAreas.map((a) => [`route.area === ${JSON.stringify(a)}`, areaLines(a)]);
+    return reactSyntax.ifChain(branches, areaLines(m.listArea));
+  };
+  const markup = walkNodes(s.layout, env);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const recordPath = m.recordPathTemplate ? `(id: string) => \`${m.recordPathTemplate}\`` : `() => ${JSON.stringify(m.listPath)}`;
+  const recordLookup = m.recordArea ? `route.area === ${JSON.stringify(m.recordArea)} ? ROWS.find((r) => r.id === route.params.${m.recordParam}) : undefined` : "undefined";
+  const contents = [
+    header,
+    ...docsLines(s.docs),
+    reactImports(markup, JSON.stringify([s.layout, s.areas]).includes('"$":"event')),
+    wrapList("import {", [...imports, `type ${deps.recordType}`], `} from "${deps.ui}";`),
+    `import { collectionView, fromCodex, matchRoute, screenActions, type UrlPort } from "${deps.shared}/runtime/core";`,
+    `import { CODEX } from "${deps.shared}/runtime/codex";`,
+    `import { toggleTheme } from "${deps.shared}/runtime/theme";`,
+    `import { ui } from "${deps.shared}/content";`,
+    `import { ${s.source!.collection} as entries } from "${deps.shared}/data/${s.source!.collection}";`,
+    ``,
+    m.constsTs,
+    ``,
+    `const ROWS = fromCodex<${deps.recordType}>(entries, FIELDS, CODEX);`,
+    `const HOME = { area: ${JSON.stringify(m.listArea)}, params: {} as Record<string, string> };`,
+    ``,
+    `export function ${s.name}({ url }: { url: UrlPort }) {`,
+    `  const route = matchRoute(ROUTES, url.path) ?? HOME;`,
+    `  const view = collectionView(ROWS, LIST, url.query);`,
+    `  const record = ${recordLookup};`,
+    `  const actions = screenActions(url, view, ${JSON.stringify(m.listPath)}, ${recordPath}, toggleTheme);`,
+    `  return (`,
+    ...pad(singleRoot(markup) ? markup : ["<>", ...pad(markup), "</>"], 2),
+    `  );`,
+    `}`,
+    ``,
+  ].join("\n");
+  return { path: `screens/${s.name}.tsx`, contents };
+}
diff --git a/xgen/runtimes/react/test/emit.test.ts b/xgen/runtimes/react/test/emit.test.ts
new file mode 100644
index 0000000..9762f8a
--- /dev/null
+++ b/xgen/runtimes/react/test/emit.test.ts
@@ -0,0 +1,16 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { ReactEmitter } from "../src/index";
+
+const plan = planBuild(join(import.meta.dir, "..", "..", "..", ".."));
+
+test("every brick makes React files, and the same brick makes the same files twice", () => {
+  const emitter = new ReactEmitter();
+  for (const { brick } of plan.bricks) {
+    const a = emitter.emit(brick), b = emitter.emit(brick);
+    expect(a.length).toBeGreaterThan(0);
+    expect(a.map((f) => f.contents)).toEqual(b.map((f) => f.contents));
+    expect(a.some((f) => f.path.endsWith(".tsx"))).toBe(true);
+  }
+});
diff --git a/xgen/runtimes/solid/README.md b/xgen/runtimes/solid/README.md
new file mode 100644
index 0000000..3106518
--- /dev/null
+++ b/xgen/runtimes/solid/README.md
@@ -0,0 +1,25 @@
+# @ui8kit/xgen-runtime-solid
+
+SolidJS 1.9 emitter: bricks, organisms, screens and the host app scaffold, written into `packages/solid/ui` and `apps/host-solid`.
+
+Part of xgen (see `../README.md`, `../../README.md` and the author guide `../../../docs/specs-guide.md`). Tests: `bun test`.
+
+## How it emits
+
+- `src/emit.ts` (`SolidEmitter`): one `<stem>.tsx` per one-part brick, one `<part>.tsx` per part otherwise. The variant table sits at
+  the top of the file (shadcn style); components read props through `splitProps` so every prop stays reactive; a polymorphic root
+  is `<Dynamic>`; a branch is `<Show>`, a list `<For>`. There is no Radix-style `asChild` (React only): style another element with
+  the exported variant table, as in Svelte and Vue.
+- `src/jsx.ts`, `src/dom.ts`: the JSX printer of the render tree and the DOM attribute types of the roots.
+- `src/view.ts`: organisms and screens from the view IR through the shared walker of `@ui8kit/xgen-runtime-core` (a `Syntax`).
+- `src/app.ts`: the host scaffold (`apps/host-solid`, port 5183) that lazy-loads one screen per chunk.
+
+## Check group `solid`
+
+`bun run check` renders every brick case (118) and every gallery block case (474) on the server (babel-preset-solid with
+`generate: "ssr"`, then `solid-js/web` `renderToString`), compares the DOM with the React package and runs html-validate over every
+block case (`xgen/check/src/solid`). The package is typechecked by `bun run typecheck`; the host joins `bun run e2e` and the DOM pair test.
+
+## Prerequisites
+
+None beyond `bun install`: Solid, babel and the preset are dev dependencies of the workspace. The group never skips.
diff --git a/xgen/runtimes/solid/assets/LucideIcon.tsx b/xgen/runtimes/solid/assets/LucideIcon.tsx
new file mode 100644
index 0000000..e41319a
--- /dev/null
+++ b/xgen/runtimes/solid/assets/LucideIcon.tsx
@@ -0,0 +1,35 @@
+/**
+ * LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file.
+ * Decorative (aria-hidden) unless a `label` is given.
+ */
+import { For, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cn } from "../../utils";
+import { LUCIDE } from "./lucide-icons";
+
+export type LucideIconProps = { name: string; size?: number; strokeWidth?: number; label?: string; class?: string };
+
+export function LucideIcon(props: LucideIconProps): JSX.Element {
+  const nodes = () => LUCIDE[props.name] ?? LUCIDE["circle"] ?? [];
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={props.size ?? 16}
+      height={props.size ?? 16}
+      fill="none"
+      stroke="currentColor"
+      stroke-width={props.strokeWidth ?? 2}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={cn("inline-block shrink-0", props.class)}
+      aria-hidden={props.label ? undefined : true}
+      aria-label={props.label}
+      role={props.label ? "img" : undefined}
+      data-slot="icon"
+      data-lucide={props.name}
+    >
+      <For each={nodes()}>{([tag, attrs]) => <Dynamic component={tag} {...attrs} />}</For>
+    </svg>
+  );
+}
diff --git a/xgen/runtimes/solid/assets/ScreenOutlet.tsx b/xgen/runtimes/solid/assets/ScreenOutlet.tsx
new file mode 100644
index 0000000..afc40fc
--- /dev/null
+++ b/xgen/runtimes/solid/assets/ScreenOutlet.tsx
@@ -0,0 +1,33 @@
+// The outlet of the host frame: renders the screen chunk behind a loader (one lazy component per loader, cached).
+// A screen reads its URL once, as a Solid component runs once: a new URL renders the screen again (keyed), and the
+// focused control (by data-testid or id) gets the focus and the caret back, so typing in a search box goes on.
+import { lazy, Show, Suspense, type Accessor, type Component, type JSX } from "solid-js";
+import type { UrlPort } from "./core";
+
+export type ScreenModule = { default: Component<{ url: UrlPort }> };
+type Loader = () => Promise<ScreenModule>;
+
+const cache = new Map<Loader, Component<{ url: UrlPort }>>();
+
+function keepFocus(): void {
+  const el = document.activeElement as HTMLInputElement | null;
+  const id = el?.getAttribute("data-testid") ?? el?.id;
+  if (!el || !id || el === document.body) return;
+  const attr = el.hasAttribute("data-testid") ? "data-testid" : "id";
+  const caret = typeof el.selectionStart === "number" ? [el.selectionStart, el.selectionEnd ?? el.selectionStart] : undefined;
+  queueMicrotask(() => {
+    const next = document.querySelector<HTMLInputElement>(`[${attr}="${CSS.escape(id)}"]`);
+    if (!next || next === document.activeElement) return;
+    next.focus();
+    if (caret) try { next.setSelectionRange(caret[0]!, caret[1]!); } catch { /* not a text field */ }
+  });
+}
+
+export function ScreenOutlet(props: { load: Loader; url: Accessor<UrlPort> }): JSX.Element {
+  let Screen = cache.get(props.load);
+  if (!Screen) { Screen = lazy(props.load); cache.set(props.load, Screen); }
+  const S = Screen;
+  let first = true;
+  const url = (): UrlPort => { const u = props.url(); if (!first) keepFocus(); first = false; return u; };
+  return <Suspense fallback={null}><Show when={url()} keyed>{(u) => <S url={u} />}</Show></Suspense>;
+}
diff --git a/xgen/runtimes/solid/assets/url.ts b/xgen/runtimes/solid/assets/url.ts
new file mode 100644
index 0000000..71d2a6c
--- /dev/null
+++ b/xgen/runtimes/solid/assets/url.ts
@@ -0,0 +1,11 @@
+// The URL as a port for Solid: the hash store of the app runtime read through a signal.
+import { createSignal, onCleanup, type Accessor } from "solid-js";
+import { createHashStore, type UrlPort } from "./core";
+
+const store = createHashStore();
+
+export function useUrl(): Accessor<UrlPort> {
+  const [snapshot, setSnapshot] = createSignal(store.getSnapshot());
+  onCleanup(store.subscribe(() => setSnapshot(store.getSnapshot())));
+  return () => ({ ...snapshot(), go: store.go });
+}
diff --git a/xgen/runtimes/solid/package.json b/xgen/runtimes/solid/package.json
new file mode 100644
index 0000000..0c782f0
--- /dev/null
+++ b/xgen/runtimes/solid/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ui8kit/xgen-runtime-solid",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "SolidJS 1.9 emitter: bricks, organisms, screens, app scaffold.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-spec": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*",
+    "@ui8kit/xgen-runtime-core": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/runtimes/solid/src/app.ts b/xgen/runtimes/solid/src/app.ts
new file mode 100644
index 0000000..8514d33
--- /dev/null
+++ b/xgen/runtimes/solid/src/app.ts
@@ -0,0 +1,59 @@
+// Scaffold of the Solid host app: config, entry, and the App that renders the screen named by the URL (/<key>/#/<route>).
+// Screens load on demand (one chunk each); content, data and menus come from the shared package, emitted once.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import type { AppSpec, ScreenSpec } from "@ui8kit/xgen-screens";
+import { BANNER, HOST_GEN, SHARED, appCss, hostUrlAsset, indexHtml, jsonFile, screenKey, viteConfig, withBanner, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+
+const UI = "@ui8kit/solid-ui";
+
+export function appScaffold(app: AppSpec, screens: ScreenSpec[]): GeneratedFile[] {
+  const loaders = screens.map((s) => `  ${JSON.stringify(screenKey(s.id))}: () => import("./screens/${s.name}").then((m) => ({ default: m.${s.name} })),`);
+  const appTsx = [
+    `// ${BANNER}`,
+    `import { For } from "solid-js";`,
+    `import { Block, Link, List, ListItem, Title } from "${UI}";`,
+    `import { SCREENS } from "${SHARED}/screens";`,
+    `import { useUrl } from "./runtime/url";`,
+    `import { ScreenOutlet, type ScreenModule } from "./runtime/ScreenOutlet";`,
+    ``,
+    `/** one chunk per screen: a landing is a screen spec, not an app */`,
+    `const LOADERS: Record<string, () => Promise<ScreenModule>> = {`,
+    ...loaders,
+    `};`,
+    ``,
+    `export function App(props: { screen: string; title: string }) {`,
+    `  const url = useUrl();`,
+    `  const load = LOADERS[props.screen];`,
+    `  if (load) return <ScreenOutlet load={load} url={url} />;`,
+    `  return (`,
+    `    <Block tag="main" id="main-content" class="mx-auto w-full max-w-3xl px-4 py-12" data-testid="host-index">`,
+    `      <Title as={1} size="2xl" weight="semibold">{props.title}</Title>`,
+    `      <List class="mt-6 grid gap-2">`,
+    `        <For each={SCREENS}>{(s) => <ListItem><Link class="underline" href={\`/\${s.key}/\`} data-testid="host-screen">{s.key}</Link></ListItem>}</For>`,
+    `      </List>`,
+    `    </Block>`,
+    `  );`,
+    `}`,
+    ``,
+  ].join("\n");
+  const assets = join(import.meta.dir, "..", "assets");
+  return [
+    jsonFile("package.json", {
+      name: app.name, private: true, version: "0.0.0", type: "module",
+      description: `Generated by xgen from xgen.app.json: the SolidJS 1.9 host of ${screens.length} screens (/<screen>/#/<route>). Generated under ${HOST_GEN}/; src/ is the front controller.`,
+      ui8kit: { runtime: "solid", generated: true, kit: [`${HOST_GEN}/runtime`], composition: [`${HOST_GEN}/App.tsx`, `${HOST_GEN}/screens`], blockRoot: [`${HOST_GEN}/App.tsx`, `${HOST_GEN}/screens`] },
+      scripts: { dev: "vite", build: "vite build", preview: "vite preview", check: "tsc --noEmit -p tsconfig.json" },
+      dependencies: { [SHARED]: "workspace:*", [UI]: "workspace:*", "solid-js": "^1.9.0" },
+      devDependencies: { "@tailwindcss/vite": "^4.3.3", tailwindcss: "^4.3.3", typescript: "~6.0.2", vite: "^8.3.0", "vite-plugin-solid": "^2.11.0" },
+    }),
+    { path: "index.html", contents: indexHtml(app).replace("__EXT__", "tsx") },
+    viteConfig([`import solid from "vite-plugin-solid";`], "solid()", app),
+    { path: "tsconfig.json", contents: `// ${BANNER}\n{\n  "compilerOptions": {\n    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "preserve", "jsxImportSource": "solid-js",\n    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true,\n    "allowImportingTsExtensions": true, "types": ["vite/client"]\n  },\n  "include": ["src", "${HOST_GEN}"]\n}\n` },
+    appCss(UI),
+    { path: "src/main.tsx", contents: withBanner(`import { render } from "solid-js/web";\nimport "./app.css";\nimport { bootScreen, screenKeyOf } from "${SHARED}/screens";\nimport { App } from "../${HOST_GEN}/App";\n\nconst screen = screenKeyOf(location);\nconst title = ${JSON.stringify(app.title)};\nbootScreen(screen, ${JSON.stringify(app.theme)}, title);\nrender(() => <App screen={screen} title={title} />, document.getElementById("app")!);\n`) },
+    { path: `${HOST_GEN}/App.tsx`, contents: appTsx },
+    hostUrlAsset("url.ts", readFileSync(join(assets, "url.ts"), "utf8")),
+    hostUrlAsset("ScreenOutlet.tsx", readFileSync(join(assets, "ScreenOutlet.tsx"), "utf8")),
+  ];
+}
diff --git a/xgen/runtimes/solid/src/dom.ts b/xgen/runtimes/solid/src/dom.ts
new file mode 100644
index 0000000..c637e0e
--- /dev/null
+++ b/xgen/runtimes/solid/src/dom.ts
@@ -0,0 +1,134 @@
+// DOM helpers of the Solid emitter: the attribute types of each tag (solid-js JSX namespace), numeric attributes, root elements.
+import type { Expr } from "@ui8kit/xgen-spec";
+import {
+  type ElementNode,
+  type Node,
+  type TagSpec,
+} from "@ui8kit/xgen-spec";
+
+export const SOLID_ATTR_TYPES: Record<string, [string, string]> = {
+  a: ["AnchorHTMLAttributes", "HTMLAnchorElement"],
+  button: ["ButtonHTMLAttributes", "HTMLButtonElement"],
+  input: ["InputHTMLAttributes", "HTMLInputElement"],
+  textarea: ["TextareaHTMLAttributes", "HTMLTextAreaElement"],
+  select: ["SelectHTMLAttributes", "HTMLSelectElement"],
+  option: ["OptionHTMLAttributes", "HTMLOptionElement"],
+  optgroup: ["OptgroupHTMLAttributes", "HTMLOptGroupElement"],
+  label: ["LabelHTMLAttributes", "HTMLLabelElement"],
+  form: ["FormHTMLAttributes", "HTMLFormElement"],
+  fieldset: ["FieldsetHTMLAttributes", "HTMLFieldSetElement"],
+  legend: ["HTMLAttributes", "HTMLLegendElement"],
+  img: ["ImgHTMLAttributes", "HTMLImageElement"],
+  source: ["SourceHTMLAttributes", "HTMLSourceElement"],
+  picture: ["HTMLAttributes", "HTMLElement"],
+  dialog: ["DialogHtmlAttributes", "HTMLDialogElement"],
+  details: ["DetailsHtmlAttributes", "HTMLDetailsElement"],
+  summary: ["HTMLAttributes", "HTMLElement"],
+  table: ["HTMLAttributes", "HTMLTableElement"],
+  caption: ["HTMLAttributes", "HTMLTableCaptionElement"],
+  thead: ["HTMLAttributes", "HTMLTableSectionElement"],
+  tbody: ["HTMLAttributes", "HTMLTableSectionElement"],
+  tfoot: ["HTMLAttributes", "HTMLTableSectionElement"],
+  tr: ["HTMLAttributes", "HTMLTableRowElement"],
+  th: ["ThHTMLAttributes", "HTMLTableCellElement"],
+  td: ["TdHTMLAttributes", "HTMLTableCellElement"],
+  colgroup: ["ColgroupHTMLAttributes", "HTMLTableColElement"],
+  col: ["ColHTMLAttributes", "HTMLTableColElement"],
+  meter: ["MeterHTMLAttributes", "HTMLMeterElement"],
+  progress: ["ProgressHTMLAttributes", "HTMLProgressElement"],
+  output: ["OutputHTMLAttributes", "HTMLOutputElement"],
+  datalist: ["HTMLAttributes", "HTMLDataListElement"],
+  hr: ["HTMLAttributes", "HTMLHRElement"],
+  br: ["HTMLAttributes", "HTMLBRElement"],
+  wbr: ["HTMLAttributes", "HTMLElement"],
+  p: ["HTMLAttributes", "HTMLParagraphElement"],
+  span: ["HTMLAttributes", "HTMLSpanElement"],
+  div: ["HTMLAttributes", "HTMLDivElement"],
+  li: ["LiHTMLAttributes", "HTMLLIElement"],
+  ul: ["HTMLAttributes", "HTMLUListElement"],
+  ol: ["OlHTMLAttributes", "HTMLOListElement"],
+  nav: ["HTMLAttributes", "HTMLElement"],
+  header: ["HTMLAttributes", "HTMLElement"],
+  footer: ["HTMLAttributes", "HTMLElement"],
+  article: ["HTMLAttributes", "HTMLElement"],
+  figure: ["HTMLAttributes", "HTMLElement"],
+  figcaption: ["HTMLAttributes", "HTMLElement"],
+  blockquote: ["BlockquoteHTMLAttributes", "HTMLQuoteElement"],
+  h1: ["HTMLAttributes", "HTMLHeadingElement"],
+  h2: ["HTMLAttributes", "HTMLHeadingElement"],
+  h3: ["HTMLAttributes", "HTMLHeadingElement"],
+  h4: ["HTMLAttributes", "HTMLHeadingElement"],
+  h5: ["HTMLAttributes", "HTMLHeadingElement"],
+  h6: ["HTMLAttributes", "HTMLHeadingElement"],
+};
+
+/** DOM attributes that React types as numbers; printed as number expressions. */
+export const NUMERIC_DOM_ATTRS = new Set(["colspan", "rowspan", "span", "rows", "cols"]);
+
+/**
+ * Rewrite a string-typed expression into its numeric counterpart when it is a
+ * stringified integer (React numeric DOM props render identically).
+ */
+export function asNumberExpr(expr: Expr): Expr | undefined {
+  switch (expr.kind) {
+    case "intToString":
+      return expr.expr;
+    case "lit":
+      if (typeof expr.value === "string" && /^\d+$/.test(expr.value)) {
+        return { kind: "lit", value: Number(expr.value) };
+      }
+      return typeof expr.value === "number" ? expr : undefined;
+    case "cond": {
+      const thenExpr = asNumberExpr(expr.then);
+      const elseExpr = asNumberExpr(expr.else);
+      if (!thenExpr || !elseExpr) return undefined;
+      return { ...expr, then: thenExpr, else: elseExpr };
+    }
+    default:
+      return undefined;
+  }
+}
+
+export interface PartEmit {
+  code: string;
+  /** the top of the part (variant tables, record and variant value types), also inside code */
+  headCode: string[];
+  /** utils the head needs (variants, type VariantKey) */
+  headUtils: string[];
+  helperImports: Set<string>;
+  utilImports: Set<string>;
+  /** control-flow components of solid-js the part uses (Show, For) */
+  solidImports: Set<string>;
+  usesResolveTag: boolean;
+  usesTitleTag: boolean;
+  usesCn: boolean;
+  usesDynamic: boolean;
+  /** names this part imports from a sibling part of its brick: part name -> values and types */
+  fromSibling: Map<string, { values: Set<string>; types: Set<string> }>;
+}
+
+export function rootElements(node: Node): ElementNode[] {
+  switch (node.kind) {
+    case "element":
+      return [node];
+    case "when":
+      return [...node.then.flatMap(rootElements), ...(node.else ?? []).flatMap(rootElements)];
+    default:
+      return [];
+  }
+}
+
+export function staticTagOf(tag: TagSpec): string | undefined {
+  return tag.kind === "static" ? tag.tag : undefined;
+}
+
+
+/** DOM attribute -> Solid JSX prop: the HTML name itself (`class`, `for`, `tabindex`), which Solid sets as an attribute, so SSR and client agree. */
+export function solidAttrName(name: string): string {
+  return name;
+}
+
+/** attributes whose Solid JSX type is a union of keywords: a string expression is cast to it (the spec checks the value) */
+export const KEYWORD_ATTRS: Record<string, string> = {
+  scope: `"col" | "row" | "rowgroup" | "colgroup" | undefined`,
+};
diff --git a/xgen/runtimes/solid/src/emit.ts b/xgen/runtimes/solid/src/emit.ts
new file mode 100644
index 0000000..a28987c
--- /dev/null
+++ b/xgen/runtimes/solid/src/emit.ts
@@ -0,0 +1,150 @@
+/**
+ * SolidJS emitter (after ui8kit/codegen's Solid emitter) — one `<stem>.tsx` per one-part brick, one `<part>.tsx` per part otherwise:
+ * the variant table at the top (shadcn style), components over `splitProps` so every prop stays reactive, `Dynamic` for a polymorphic
+ * root, `<Show>` for a branch and `<For>` for a list. No Radix-style `asChild` (React-only): style another element with the
+ * exported variant table, as in Svelte and Vue.
+ */
+
+import { fileStem, localIdent, type BrickDef, type PartDef } from "@ui8kit/xgen-spec";
+import { BANNER, importLine, indent, wrapText, makeEnv, usesItem, type Emitter, type GeneratedFile, type TypeEnv } from "@ui8kit/xgen-runtime-core";
+import { printTsExpr, type TsPrintCtx } from "@ui8kit/xgen-runtime-core";
+import { classesExpr, declaredProps, partHead } from "@ui8kit/xgen-runtime-core";
+import { fileName } from "@ui8kit/xgen-screens";
+import { SOLID_ATTR_TYPES, rootElements, staticTagOf, type PartEmit } from "./dom";
+import { printNode, type JsxState } from "./jsx";
+
+export class SolidEmitter implements Emitter {
+  readonly runtime = "solid" as const;
+
+  constructor(private readonly utilsPath = "../../utils") {}
+
+  emit(brick: BrickDef): GeneratedFile[] {
+    const parts = brick.parts.map((part) => this.emitPart(brick, part));
+    if (parts.length === 1) return this.fit(`primitives/${brick.dir}/${fileStem(brick)}`, brick.docs, parts[0]!);
+    return brick.parts.flatMap((part, i) =>
+      this.fit(`primitives/${brick.dir}/${fileName(part.name)}`, i === 0 ? brick.docs : `${part.name}: one part of ${brick.parts[0]!.name} (one file per part, as in the Svelte package).`, parts[i]!));
+  }
+
+  /** the file of one part; a long one moves its variant tables and value types to `<stem>-variants.ts` (the readability limit) */
+  private fit(stem: string, docs: string, part: PartEmit): GeneratedFile[] {
+    const whole = this.file(docs, [part]);
+    if (whole.split("\n").length <= 150 || part.headCode.length === 0) return [{ path: `${stem}.tsx`, contents: whole }];
+    const head = part.headCode.join("\n");
+    const names = [...head.matchAll(/^export (const|type) (\w+)/gm)].map((m) => (m[1] === "type" ? `type ${m[2]}` : m[2]!));
+    const base = stem.split("/").pop()!;
+    const table = [`// ${BANNER}`, `/** The variant tables of ${docs.split(/[ .:]/)[0]} and the value types of its props, kept out of ${base}.tsx. */`,
+      `import { ${part.headUtils.join(", ")} } from "${this.utilsPath}";`, ``, head.trimEnd(), ``].join("\n");
+    const slim: PartEmit = { ...part, code: part.code.slice(head.length).replace(/^\n+/, ""), headCode: [], utilImports: new Set([...part.utilImports].filter((u) => !part.headUtils.includes(u))) };
+    return [{ path: `${stem}.tsx`, contents: this.file(docs, [slim], [importLine(names, `./${base}-variants`)]) }, { path: `${stem}-variants.ts`, contents: table }];
+  }
+
+  private file(docs: string, parts: PartEmit[], extraImports: string[] = []): string {
+    const helperImports = new Set<string>(parts.flatMap((p) => [...p.helperImports]));
+    const utilImports = new Set<string>(parts.flatMap((p) => [...p.utilImports]));
+    const solidNames = new Set<string>(parts.flatMap((p) => [...p.solidImports]));
+    const usesResolveTag = parts.some((p) => p.usesResolveTag);
+    if (parts.some((p) => p.usesTitleTag)) helperImports.add("titleTag");
+    if (parts.some((p) => p.usesCn)) utilImports.add("cn");
+    const lines: string[] = [`// ${BANNER}`, `/**`, ...wrapText(docs).map((l) => ` * ${l}`.trimEnd()), ` */`, ``];
+    lines.push(importLine(["splitProps", ...[...solidNames].sort(), "type Component", "type JSX"], "solid-js"));
+    if (parts.some((p) => p.usesDynamic)) lines.push(`import { Dynamic } from "solid-js/web";`);
+    const utils = ["cn", "variants", "type VariantKey"].filter((u) => utilImports.has(u));
+    if (utils.length) lines.push(`import { ${utils.join(", ")} } from "${this.utilsPath}";`);
+    if (helperImports.size) lines.push(`import { ${[...helperImports].sort().join(", ")} } from "${this.utilsPath}/expr";`);
+    if (usesResolveTag) lines.push(`import { resolveTag, TagGroup } from "${this.utilsPath}/tags";`);
+    lines.push(...extraImports);
+    if (parts.length === 1) for (const [owner, names] of parts[0]!.fromSibling) {
+      lines.push(importLine([...[...names.values].sort(), ...[...names.types].sort().map((t) => `type ${t}`)], `./${fileName(owner)}`));
+    }
+    lines.push(``);
+    for (const p of parts) lines.push(p.code, ``);
+    return lines.join("\n").replace(/\n{3,}/g, "\n\n").trimEnd() + "\n";
+  }
+
+  private emitPart(brick: BrickDef, part: PartDef): PartEmit {
+    const env: TypeEnv = makeEnv(brick, part);
+    const decls = declaredProps(brick, part);
+    const helperImports = new Set<string>();
+    const head = partHead(brick, part);
+    const utilImports = new Set<string>();
+    const state: JsxState = { usesResolveTag: false, usesTitleTag: false, usesCn: false, usesDynamic: false, solid: new Set() };
+    const hasChildren = part.props.some((p) => p.type === "children");
+
+    // the attribute type of the root: one static tag gives its element type, anything else HTMLElement
+    const roots = rootElements(part.render);
+    const tags = roots.map((r) => staticTagOf(r.tag));
+    const single = roots.length === 1 && tags[0] !== undefined ? tags[0] : undefined;
+    const svg = single === "svg";
+    const [attrType, elemType] = single && !svg ? SOLID_ATTR_TYPES[single] ?? ["HTMLAttributes", "HTMLElement"] : ["HTMLAttributes", "HTMLElement"];
+    state.restCast = svg || !single;
+    const attrGeneric = svg ? "JSX.SvgSVGAttributes<SVGSVGElement>" : `JSX.${attrType}<${elemType}>`;
+
+    const omitKeys = new Set<string>(["class", "children"]);
+    for (const d of decls) omitKeys.add(d.reactName);
+    const ident = (s: string): boolean => /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(s);
+    const fields = decls.map((d) => `  ${ident(d.reactName) ? d.reactName : JSON.stringify(d.reactName)}?: ${d.tsType};`);
+    fields.push(`  class?: string;`);
+    if (hasChildren) fields.push(`  children?: JSX.Element;`);
+    const omit = [...omitKeys].map((k) => JSON.stringify(k));
+    const typeLine = `export type ${part.name}Props = Omit<${attrGeneric}, ${omit.join(" | ")}> & {`;
+    const typeHead = typeLine.length <= 100 ? typeLine : `export type ${part.name}Props = Omit<\n  ${attrGeneric},\n  ${omit.join(" | ")}\n> & {`;
+    const propsType = `${typeHead}\n${fields.join("\n")}\n};`;
+    const splitKeys = [...decls.map((d) => JSON.stringify(d.reactName)), `"class"`, ...(hasChildren ? [`"children"`] : [])];
+
+    const ctx: TsPrintCtx = {
+      env,
+      propCode: (name) => {
+        if (name === "Class") return "local.class";
+        const d = decls.find((x) => x.def.name === name);
+        if (!d) throw new Error(`${brick.id}/${part.name}: prop ${name} not declared for Solid`);
+        return ident(d.reactName) ? `local.${d.reactName}` : `local[${JSON.stringify(d.reactName)}]`;
+      },
+      itemCode: (field) => `item.${localIdent(field)}`,
+      derivedCode: (name) => `${name}Value()`,
+      resolvedTagCode: () => "resolvedTagValue()",
+      helpers: helperImports,
+    };
+
+    // every value is an accessor, so it follows its props
+    const body: string[] = [];
+    if (part.classes) {
+      const classes = classesExpr(brick, part, ctx);
+      if (classes.usesVariantKey) head.usesVariantKey = true;
+      state.usesCn = true;
+      body.push(`const cls = () => ${classes.expr};`);
+    }
+    for (const [name, expr] of Object.entries(part.derived ?? {})) {
+      if (usesItem(expr, env)) throw new Error(`${brick.id}/${part.name}: derived ${name} uses loop item`);
+      body.push(`const ${name}Value = () => ${printTsExpr(expr, ctx)};`);
+    }
+    const root = part.render;
+    if (root.kind === "element" && root.tag.kind !== "static") {
+      state.usesDynamic = true;
+      if (root.tag.kind === "resolved") {
+        state.usesResolveTag = true;
+        body.push(`const resolvedTagValue = () => resolveTag(${ctx.propCode(root.tag.fromProp)}, ${JSON.stringify(root.tag.fallback)}, TagGroup.${root.tag.group});`);
+      } else if (root.tag.kind === "heading") {
+        state.usesTitleTag = true;
+        body.push(`const resolvedTagValue = () => titleTag(${ctx.propCode(root.tag.fromProp)});`);
+      } else body.push(`const resolvedTagValue = () => ${printTsExpr(root.tag.expr, ctx)};`);
+    }
+    const jsx = printNode(root, ctx, part, state, { isRoot: true });
+    const fn =
+      `export const ${part.name}: Component<${part.name}Props> = (props) => {\n` +
+      indent(`const [local, rest] = splitProps(props, [${splitKeys.join(", ")}]);`, 1) + "\n" +
+      indent([...body, ""].join("\n"), 1) +
+      indent(`return (\n${indent(jsx, 1)}\n);`, 1) +
+      `\n};`;
+    const docs = `/**\n${wrapText(part.docs).map((l) => ` * ${l}`.trimEnd()).join("\n")}\n */`;
+    if (head.usesVariants) utilImports.add("variants");
+    if (head.usesVariantKey) utilImports.add("type VariantKey");
+    return {
+      code: [...head.code, docs, propsType, "", fn].join("\n"),
+      headCode: head.code,
+      headUtils: [...(head.usesVariants ? ["variants"] : []), ...(head.usesVariantKey ? ["type VariantKey"] : [])],
+      helperImports, utilImports, solidImports: state.solid,
+      usesResolveTag: state.usesResolveTag, usesTitleTag: state.usesTitleTag, usesCn: state.usesCn, usesDynamic: state.usesDynamic,
+      fromSibling: head.fromSibling,
+    };
+  }
+}
diff --git a/xgen/runtimes/solid/src/index.ts b/xgen/runtimes/solid/src/index.ts
new file mode 100644
index 0000000..f78b38a
--- /dev/null
+++ b/xgen/runtimes/solid/src/index.ts
@@ -0,0 +1,3 @@
+export { SolidEmitter } from "./emit";
+export * from "./view";
+export * from "./app";
diff --git a/xgen/runtimes/solid/src/jsx.ts b/xgen/runtimes/solid/src/jsx.ts
new file mode 100644
index 0000000..b65ac9e
--- /dev/null
+++ b/xgen/runtimes/solid/src/jsx.ts
@@ -0,0 +1,96 @@
+// JSX printing of the Solid emitter: the nodes and attributes of one part as JSX text (`<Show>` for a branch, `<For>` for a list).
+import type { AttrSpec, ElementNode, Expr, Node, PartDef } from "@ui8kit/xgen-spec";
+import { exprType, indent, formatAttr, printTsExpr, tagHead, type TsPrintCtx, neverEmptyString, printInlineClassSpec, isPassthroughForward } from "@ui8kit/xgen-runtime-core";
+import { KEYWORD_ATTRS, NUMERIC_DOM_ATTRS, asNumberExpr, solidAttrName } from "./dom";
+
+export interface JsxState {
+  usesResolveTag: boolean;
+  usesTitleTag: boolean;
+  usesCn: boolean;
+  usesDynamic: boolean;
+  /** solid-js control-flow components used */
+  solid: Set<string>;
+  /** the props type of the part is not the attribute type of every root (several roots, an svg root): spread the rest untyped */
+  restCast?: boolean;
+}
+
+export function printAttrs(node: ElementNode, ctx: TsPrintCtx, part: PartDef, state: JsxState, opts: { withRest: boolean; dynamic: boolean; inLoop: boolean }): string[] {
+  const out: string[] = [];
+  if (opts.dynamic) out.push(`component={resolvedTagValue()}`);
+  for (const attr of node.attrs) out.push(printAttr(attr, ctx, part, state, opts));
+  return out.filter(Boolean);
+}
+
+export function printAttr(attr: AttrSpec, ctx: TsPrintCtx, part: PartDef, state: JsxState, opts: { withRest: boolean; inLoop: boolean }): string {
+  switch (attr.kind) {
+    case "static":
+      return `${solidAttrName(attr.name)}=${JSON.stringify(attr.value)}`;
+    case "expr": {
+      if (isPassthroughForward(attr, part)) return "";
+      const name = solidAttrName(attr.name);
+      const expr = NUMERIC_DOM_ATTRS.has(attr.name) ? asNumberExpr(attr.expr) ?? attr.expr : attr.expr;
+      const value = printTsExpr(expr, ctx);
+      const t = exprType(expr, ctx.env);
+      if (attr.when) return `${name}={${printTsExpr(attr.when, ctx)} ? ${value} : undefined}`;
+      if (attr.keepEmpty && t === "string") return `${name}={(${value}) ?? ""}`;
+      if (t !== "string" || neverEmptyString(attr.expr, ctx.env)) return `${name}={${value}}`;
+      ctx.helpers.add("orUndef");
+      const cast = KEYWORD_ATTRS[attr.name];
+      return cast ? `${name}={orUndef(${value}) as ${cast}}` : `${name}={orUndef(${value})}`;
+    }
+    case "bool":
+      return `${solidAttrName(attr.name)}={${printTsExpr(attr.expr, ctx)} || undefined}`;
+    case "class": {
+      if (!attr.spec) return `class={cls() || undefined}`;
+      state.usesCn = true;
+      const inline = printInlineClassSpec(attr.spec, ctx, () => (part.props.some((p) => p.name === "Class") && !opts.inLoop ? "local.class" : undefined));
+      if (/^cn\("[^"]+"/.test(inline)) return formatAttr(`class={${inline}}`);
+      return `class={${inline} || undefined}`;
+    }
+    case "rest":
+      return opts.withRest ? (state.restCast ? `{...(rest as object)}` : `{...rest}`) : "";
+  }
+}
+
+export function printNode(node: Node, ctx: TsPrintCtx, part: PartDef, state: JsxState, opts: { isRoot?: boolean; inLoop?: boolean } = {}): string {
+  switch (node.kind) {
+    case "element": {
+      const dynamic = node.tag.kind !== "static";
+      if (dynamic && !opts.isRoot) throw new Error(`${part.name}: dynamic tags only supported at part root`);
+      const tag = node.tag.kind === "static" ? node.tag.tag : "Dynamic";
+      const attrs = printAttrs(node, ctx, part, state, { withRest: opts.isRoot === true, dynamic, inLoop: opts.inLoop === true });
+      if (node.void || node.children.length === 0) return tagHead(tag, attrs, "/>");
+      const children = node.children.map((c) => printNode(c, ctx, part, state, { inLoop: opts.inLoop })).join("\n");
+      return `${tagHead(tag, attrs, ">")}\n${indent(children, 1)}\n</${tag}>`;
+    }
+    case "slot":
+      return `{local.children}`;
+    case "text":
+      return `{${printTsExpr(node.expr, ctx)}}`;
+    case "when": {
+      state.solid.add("Show");
+      const test = printTsExpr(node.test, ctx);
+      const thenCode = fragment(node.then.map((c) => printNode(c, ctx, part, state, opts)));
+      const elseCode = node.else?.length ? fragment(node.else.map((c) => printNode(c, ctx, part, state, opts))) : undefined;
+      const fallback = elseCode ? ` fallback={\n${indent(elseCode, 1)}\n}` : "";
+      const show = `<Show when={${test}}${fallback}>\n${indent(thenCode, 1)}\n</Show>`;
+      return show;
+    }
+    case "forEach": {
+      state.solid.add("For");
+      const items = ctx.propCode(node.itemsProp);
+      const body = fragment(node.body.map((c) => printNode(c, ctx, part, state, { inLoop: true })));
+      // the index is an accessor in Solid: read it once per row when the row uses it
+      const usesIndex = /\bindex\b/.test(body);
+      const head = usesIndex ? `{(item, i) => {\n  const index = i();\n  return (\n${indent(body, 2)}\n  );\n}}` : `{(item) => (\n${indent(body, 1)}\n)}`;
+      return `<For each={${items} ?? []}>\n${indent(head, 1)}\n</For>`;
+    }
+  }
+}
+
+function fragment(parts: string[]): string {
+  if (parts.length === 1) return parts[0]!;
+  return `<>\n${indent(parts.join("\n"), 1)}\n</>`;
+}
+
+export type { Expr };
diff --git a/xgen/runtimes/solid/src/view.ts b/xgen/runtimes/solid/src/view.ts
new file mode 100644
index 0000000..6bc4bc7
--- /dev/null
+++ b/xgen/runtimes/solid/src/view.ts
@@ -0,0 +1,292 @@
+// Solid output for organisms and screens. Blocks are JSX ternaries, lists are `<For>`, render-prop slots are function props (as in React).
+import { fileName, presetFile, printBare, printValue, sourcesOf, tierDir, typesPath, type OrganismSpec, type ScreenSpec } from "@ui8kit/xgen-screens";
+import { htmlPropName, reactPropName } from "@ui8kit/xgen-spec";
+import { assetFile, assetTables, BANNER, chainLines, chunksOf, partsOf, cnLines, pageSources, optionalGroups, printVariantTable, wrapList, wrapText, screenModel, type ChunkModel, type RecipeLike, typeName, walkNodes, recordTypes, type GeneratedFile, type PartRef, type Syntax, type WalkEnv } from "@ui8kit/xgen-runtime-core";
+
+const pad = (lines: string[], n = 1): string[] => lines.map((l) => (l ? "  ".repeat(n) + l : l));
+const cap = (s: string): string => s[0]!.toUpperCase() + s.slice(1);
+/** the lines are one JSX element (an opening line, the end of a long opening tag, the closing tag): no fragment needed around them */
+const singleRoot = (lines: string[]): boolean => {
+  if (!lines.length || !/^<[A-Za-z]/.test(lines[0]!)) return false;
+  const top = lines.filter((l) => l && !l.startsWith(" "));
+  return top.slice(1).every((l, i, a) => l === ">" || l === "/>" || (i === a.length - 1 && /^<\/[A-Za-z.]+>$/.test(l)));
+};
+/** the lines wrapped in a fragment unless they are one element */
+const inner = (lines: string[]): string[] => (singleRoot(lines) ? pad(lines) : ["  <>", ...pad(lines, 2), "  </>"]);
+const frag = (lines: string[]): string[] => ["(", ...inner(lines), ")"];
+/** a list as `<For>`: a list is keyed by identity in Solid; the index is an accessor, read once per row */
+const forEach = (items: string, as: string, body: string[], index?: string): string[] =>
+  index
+    ? [`<For each={${items} ?? []}>{(${as}, ${index}Of) => { const ${index} = ${index}Of(); return (`, ...inner(body), `); }}</For>`]
+    : [`<For each={${items} ?? []}>{(${as}) => (`, ...inner(body), `)}</For>`];
+
+export const solidSyntax: Syntax = {
+  runtime: "solid",
+  propName(ref: PartRef, canonical: string) {
+    if (canonical === "Class") return "class";
+    const d = ref.part.props.find((x) => x.name === canonical);
+    if (!d) throw new Error(`${ref.part.name}: prop ${canonical} does not exist`);
+    // a passthrough prop is a plain attribute of the root in Solid: its HTML name (`for`, `autocomplete`)
+    return d.passthrough ? htmlPropName(d) : reactPropName(d);
+  },
+  attrName: (name) => name,
+  eventProp: (ev) => `on${cap(ev)}`,
+  callbackName: (ev) => `on${cap(ev)}`,
+  eventType: "InputEvent & { currentTarget: HTMLInputElement }",
+  classProp: "class",
+  // a branch is a JSX ternary, as in React: Solid compiles it to a reactive memo, and TypeScript narrows inside it
+  // (`<Match when>` does not narrow its children, and `Switch` is also the name of a brick)
+  ifChain(branches, rest) {
+    const out: string[] = [];
+    branches.forEach(([c, lines], i) => { out.push(i === 0 ? `{${c} ? (` : `) : ${c} ? (`, ...inner(lines)); });
+    if (rest.length) out.push(") : (", ...inner(rest), ")}");
+    else out.push(") : null}");
+    return out;
+  },
+  each: (items, as, _key, body, index) => forEach(items, as, body, index),
+  slot: (name, args, fn) => [fn ? `{${name}?.(${args.join(", ")})}` : `{${name}}`],
+  slotProp: (name, params, body, fn) => ({ attr: [fn ? `${name}={(${params}) => ${frag(body).join("\n")}}` : `${name}={${frag(body).join("\n")}}`] }),
+  fragment: frag,
+};
+
+export interface ViewDeps {
+  parts: Record<string, PartRef>;
+  organisms: Record<string, OrganismSpec>;
+  /** import path of the file of a part, from the folder of the component (`src/blocks/`, `src/components/`) */
+  partPath(name: string): string;
+  /** the recipes (specs/recipes), by file name: printed as variant tables at the top of the organisms that read them */
+  recipes?: Record<string, RecipeLike>;
+}
+
+/** the variant tables of the recipes an organism reads (shadcn/cva style), printed at the top of its file */
+function recipeTables(org: OrganismSpec, deps: ViewDeps): string[] {
+  return Object.entries(org.recipes ?? {}).map(([local, file]) => {
+    const recipe = deps.recipes?.[file];
+    if (!recipe) throw new Error(`${org.name}: recipe ${file} not found in specs/recipes`);
+    return `/** ${org.name}: the classes of each value (shadcn/cva style). */\n${printVariantTable(`${local}Variants`, recipe)}`;
+  });
+}
+
+/** the one-line description on top, cut under the width */
+const docsLines = (docs: string): string[] => { const l = wrapText(docs); return l.length === 1 ? [`/** ${l[0]} */`] : ["/**", ...l.map((x) => ` * ${x}`), " */"]; };
+
+const header = `// ${BANNER}`;
+
+function envFor(deps: ViewDeps, optional: string[] = []): WalkEnv {
+  return { syntax: solidSyntax, parts: deps.parts, organisms: deps.organisms, print: { emit: (ev) => `on${cap(ev)}?.`, helpers: new Set(), presets: new Set(), optional: new Set(optional), runtime: "solid" }, usedParts: new Set(), usedOrganisms: new Set(), usesEach: { value: false } };
+}
+
+function groupImports(names: string[], pathOf: (n: string) => string): string[] {
+  const byFile = new Map<string, string[]>();
+  for (const n of names) { const f = pathOf(n); byFile.set(f, [...(byFile.get(f) ?? []), n]); }
+  return [...byFile].sort(([a], [b]) => a.localeCompare(b)).map(([f, ns]) => `import { ${ns.sort().join(", ")} } from "${f}";`);
+}
+
+/** the solid-js names the markup uses: control flow and the JSX type */
+function solidNames(markup: string[], extra: string[] = []): string[] {
+  const text = markup.join("\n");
+  return [...["For"].filter((n) => text.includes(`<${n}`)), ...extra];
+}
+function solidImports(markup: string[]): string {
+  const names = solidNames(markup);
+  return names.length ? `import { ${names.join(", ")} } from "solid-js";` : "";
+}
+
+const constLines = (org: OrganismSpec): string[] =>
+  Object.entries(org.consts ?? {}).filter(([name]) => !assetTables(org).includes(name)).flatMap(([name, table]) => [`const ${name}: Record<string, string> = {`, ...Object.entries(table).map(([k, v]) => `  ${JSON.stringify(k)}: ${JSON.stringify(v)},`), `};`, ``]);
+
+export function emitOrganism(org: OrganismSpec, deps: ViewDeps): GeneratedFile[] {
+  const env = envFor(deps, optionalGroups(org));
+  env.slotArity = { ...Object.fromEntries(org.slots.map((s) => [s.name, s.args.length])), ...(org.children ? { children: 0 } : {}) };
+  const markup = walkNodes(org.view, env);
+  const name = org.name;
+  const dir = tierDir(org.id);
+  const recordNames = Object.keys(org.records);
+  const propLines = [
+    ...org.props.map((p) => `  ${p.name}${p.required ? "" : "?"}: ${typeName(p.type)};`),
+    ...(org.className ? [`  class?: string;`] : []),
+    ...(org.children ? [`  children?: JSX.Element;`] : []),
+    ...org.slots.map((s) => (s.args.length ? `  ${s.name}?: (${s.args.map((a, i) => `${a.name || "arg" + i}: ${typeName(a.type)}`).join(", ")}) => JSX.Element;` : `  ${s.name}?: JSX.Element;`)),
+    ...org.events.map((e) => `  on${cap(e.name)}?: (${e.args.map((a) => `${a.name}: ${typeName(a.type)}`).join(", ")}) => void;`),
+  ];
+  const lit = (v: string | number | boolean) => JSON.stringify(v);
+  const destructure = [
+    ...org.props.map((p) => (p.default === undefined ? p.name : `${p.name} = ${lit(p.default)}`)),
+    ...(org.className ? ["class: className"] : []),
+    ...(org.children ? ["children"] : []),
+    ...org.slots.map((s) => s.name),
+    ...org.events.map((e) => `on${cap(e.name)}`),
+  ];
+  const derived = (org.derived ?? []).map((d) => {
+    const one = `  const ${d.name} = ${printBare(d.value, env.print)};`;
+    const chain = one.length > 100 ? chainLines(printValue(d.value, env.print)) ?? cnLines(printBare(d.value, env.print)) : undefined;
+    return chain ? `  const ${d.name} =\n${chain.map((l) => `    ${l}`).join("\n")};` : one;
+  });
+  const tables = recipeTables(org, deps);
+  if (tables.length) env.print.helpers.add("variants");
+  const helpers = [...env.print.helpers].sort();
+  const names = solidNames(markup, ["type JSX"]);
+  const orgImports = [...env.usedOrganisms].sort().map((o) => `import { ${o} } from "../${tierDir(deps.organisms[o]!.id)}/${fileName(o)}";`);
+  const contents = [
+    header,
+    ...docsLines(org.docs),
+    `import { ${names.join(", ")} } from "solid-js";`,
+    ...groupImports([...env.usedParts].sort(), (n) => deps.partPath(n)),
+    ...orgImports,
+    ...[...(env.print.presets ?? [])].sort().map((p) => `import { ${p} } from "../presets/${presetFile(p)}";`),
+    ...(helpers.length ? [`import { ${helpers.join(", ")} } from "../utils";`] : []),
+    ...(assetTables(org).length ? [`import { ${assetTables(org).join(", ")} } from "./${fileName(name)}.assets";`] : []),
+    ...(recordNames.length ? [`import type { ${recordNames.join(", ")} } from "./${fileName(name)}.types";`] : []),
+    ...(org.typeImports ?? []).map((t) => `import type { ${t.names.join(", ")} } from "${typesPath(org.id, deps.organisms[t.from] ?? { id: org.id, name: t.from })}";`),
+    ``,
+    ...tables.flatMap((t) => [t, ``]),
+    ...constLines(org),
+    `export type ${name}Props = {`,
+    ...propLines,
+    `};`,
+    ``,
+    `${wrapList(`export function ${name}({`, destructure, `}: ${name}Props) {`)}`,
+    ...derived,
+    `  return (`,
+    ...pad(singleRoot(markup) ? markup : ["<>", ...pad(markup), "</>"], 2),
+    `  );`,
+    `}`,
+    ``,
+  ].join("\n");
+  const out: GeneratedFile[] = [{ path: `${dir}/${fileName(name)}.tsx`, contents }];
+  if (recordNames.length) out.push({ path: `${dir}/${fileName(name)}.types.ts`, contents: `${header}\n\n${recordTypes(org, deps.organisms)}\n` });
+  if (assetTables(org).length) out.push({ path: `${dir}/${fileName(name)}.assets.ts`, contents: assetFile(org, header) });
+  return out;
+}
+
+export interface ScreenDeps extends ViewDeps {
+  ui: string;
+  /** package of the shared app outputs: content, data, menus, url runtime core */
+  shared: string;
+  recordType: string;
+}
+
+function emitPage(s: ScreenSpec, deps: ScreenDeps): GeneratedFile {
+  const m = screenModel(s);
+  const env = envFor(deps);
+  const chunks = new Map(chunksOf(s).map((c) => [c.area, c]));
+  const parts = partsOf(s);
+  env.part = (name) => [`<${name} />`];
+  const areaLines = (a: string): string[] => (chunks.has(a) ? [`<${chunks.get(a)!.name} />`] : walkNodes(s.areas[a] ?? [], env));
+  env.outlet = () => solidSyntax.ifChain(m.otherAreas.map((a): [string, string[]] => [`route.area === ${JSON.stringify(a)}`, areaLines(a)]), areaLines(m.listArea));
+  const markup = walkNodes(s.layout, env);
+  const sources = pageSources(s);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const types = [...new Set(sources.map((x) => x.record))].sort().map((r) => `type ${r}`);
+  const contents = [
+    header,
+    ...docsLines(s.docs),
+    solidImports(markup),
+    wrapList("import {", [...imports, ...types], `} from "${deps.ui}";`),
+    ...[...chunks.values(), ...parts].map((c) => `import { ${c.name} } from "./${c.dir}/${c.name}";`),
+    `import { fromCodex, matchRoute, type UrlPort } from "${deps.shared}/runtime/core";`,
+    ...(sources.length ? [`import { CODEX } from "${deps.shared}/runtime/codex";`] : []),
+    `import { toggleTheme } from "${deps.shared}/runtime/theme";`,
+    `import { ui } from "${deps.shared}/content";`,
+    ...(s.nav ? [`import { navOf } from "${deps.shared}/nav/${s.name}";`] : []),
+    ...sources.map((x) => `import { ${x.collection} as ${x.as}Entries } from "${deps.shared}/data/${x.collection}";`),
+    ``,
+    m.constsTs,
+    ``,
+    ...sources.map((x) => `const ${x.as} = fromCodex<${x.record}>(${x.as}Entries, ${x.as.toUpperCase()}_FIELDS, CODEX);`),
+    `const HOME = { area: ${JSON.stringify(m.listArea)}, params: {} as Record<string, string> };`,
+    `const actions = { toggleTheme };`,
+    ...(m.namedTs ? [``, m.namedTs] : []),
+    ``,
+    `export function ${s.name}({ url }: { url: UrlPort }) {`,
+    `  const route = matchRoute(ROUTES, url.path) ?? HOME;`,
+    ...(s.nav ? [`  const nav = navOf(route.area);`] : []),
+    `  return (`,
+    ...pad(singleRoot(markup) ? markup : ["<>", ...pad(markup), "</>"], 2),
+    `  );`,
+    `}`,
+    ``,
+  ].join("\n");
+  return { path: `screens/${s.name}.tsx`, contents };
+}
+
+/** one area of a chunked page as its own component: it imports only the data it shows */
+function emitChunk(s: ScreenSpec, c: ChunkModel, deps: ScreenDeps): GeneratedFile {
+  const env = envFor(deps);
+  const nodes = c.nodes;
+  const markup = walkNodes(nodes, env);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const types = [...new Set(c.sources.map((x) => x.record))].sort().map((r) => `type ${r}`);
+  const contents = [
+    header,
+    `// ${c.doc}`,
+    solidImports(markup),
+    wrapList("import {", [...imports, ...types], `} from "${deps.ui}";`),
+    ...(c.sources.length ? [`import { fromCodex } from "${deps.shared}/runtime/core";`] : []),
+    ...(c.sources.length ? [`import { CODEX } from "${deps.shared}/runtime/codex";`] : []),
+    ...(c.actions ? [`import { toggleTheme } from "${deps.shared}/runtime/theme";`] : []),
+    `import { ui } from "${deps.shared}/content";`,
+    ...c.sources.map((x) => `import { ${x.collection} as ${x.as}Entries } from "${deps.shared}/data/${x.collection}";`),
+    ...(c.constsTs ? [``, c.constsTs] : []),
+    ``,
+    ...c.sources.map((x) => `const ${x.as} = fromCodex<${x.record}>(${x.as}Entries, ${x.as.toUpperCase()}_FIELDS, CODEX);`),
+    ...(c.actions ? [`const actions = { toggleTheme };`] : []),
+    ...(c.sources.length || c.actions ? [``] : []),
+    ...(c.namedTs ? [c.namedTs, ``] : []),
+    `export function ${c.name}() {`,
+    `  return (`,
+    ...pad(singleRoot(markup) ? markup : ["<>", ...pad(markup), "</>"], 2),
+    `  );`,
+    `}`,
+    ``,
+  ].filter((l, i, a) => l !== "" || a[i - 1] !== "").join("\n");
+  return { path: `screens/${c.dir}/${c.name}.tsx`, contents };
+}
+
+/** the area files of a screen with `chunks`, and the part files of a page screen with `parts` */
+export function emitChunks(s: ScreenSpec, deps: ScreenDeps): GeneratedFile[] {
+  return [...chunksOf(s), ...partsOf(s)].map((c) => emitChunk(s, c, deps));
+}
+
+export function emitScreen(s: ScreenSpec, deps: ScreenDeps): GeneratedFile {
+  if (s.kind === "page") return emitPage(s, deps);
+  const m = screenModel(s);
+  const env = envFor(deps, ["record"]);
+  const areaLines = (a: string): string[] => walkNodes(s.areas[a] ?? [], env);
+  env.outlet = () => {
+    const branches: Array<[string, string[]]> = m.otherAreas.map((a) => [`route.area === ${JSON.stringify(a)}`, areaLines(a)]);
+    return solidSyntax.ifChain(branches, areaLines(m.listArea));
+  };
+  const markup = walkNodes(s.layout, env);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const recordPath = m.recordPathTemplate ? `(id: string) => \`${m.recordPathTemplate}\`` : `() => ${JSON.stringify(m.listPath)}`;
+  const recordLookup = m.recordArea ? `route.area === ${JSON.stringify(m.recordArea)} ? ROWS.find((r) => r.id === route.params.${m.recordParam}) : undefined` : "undefined";
+  const contents = [
+    header,
+    ...docsLines(s.docs),
+    solidImports(markup),
+    wrapList("import {", [...imports, `type ${deps.recordType}`], `} from "${deps.ui}";`),
+    `import { collectionView, fromCodex, matchRoute, screenActions, type UrlPort } from "${deps.shared}/runtime/core";`,
+    `import { CODEX } from "${deps.shared}/runtime/codex";`,
+    `import { toggleTheme } from "${deps.shared}/runtime/theme";`,
+    `import { ui } from "${deps.shared}/content";`,
+    `import { ${s.source!.collection} as entries } from "${deps.shared}/data/${s.source!.collection}";`,
+    ``,
+    m.constsTs,
+    ``,
+    `const ROWS = fromCodex<${deps.recordType}>(entries, FIELDS, CODEX);`,
+    `const HOME = { area: ${JSON.stringify(m.listArea)}, params: {} as Record<string, string> };`,
+    ``,
+    `export function ${s.name}({ url }: { url: UrlPort }) {`,
+    `  const route = matchRoute(ROUTES, url.path) ?? HOME;`,
+    `  const view = collectionView(ROWS, LIST, url.query);`,
+    `  const record = ${recordLookup};`,
+    `  const actions = screenActions(url, view, ${JSON.stringify(m.listPath)}, ${recordPath}, toggleTheme);`,
+    `  return (`,
+    ...pad(singleRoot(markup) ? markup : ["<>", ...pad(markup), "</>"], 2),
+    `  );`,
+    `}`,
+    ``,
+  ].join("\n");
+  return { path: `screens/${s.name}.tsx`, contents };
+}
diff --git a/xgen/runtimes/solid/test/emit.test.ts b/xgen/runtimes/solid/test/emit.test.ts
new file mode 100644
index 0000000..35fc093
--- /dev/null
+++ b/xgen/runtimes/solid/test/emit.test.ts
@@ -0,0 +1,16 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { SolidEmitter } from "../src/index";
+
+const plan = planBuild(join(import.meta.dir, "..", "..", "..", ".."));
+
+test("every brick makes Solid files, and the same brick makes the same files twice", () => {
+  const emitter = new SolidEmitter();
+  for (const { brick } of plan.bricks) {
+    const a = emitter.emit(brick), b = emitter.emit(brick);
+    expect(a.length).toBeGreaterThan(0);
+    expect(a.map((f) => f.contents)).toEqual(b.map((f) => f.contents));
+    expect(a.some((f) => f.path.endsWith(".tsx"))).toBe(true);
+  }
+});
diff --git a/xgen/runtimes/svelte/README.md b/xgen/runtimes/svelte/README.md
new file mode 100644
index 0000000..5e466e6
--- /dev/null
+++ b/xgen/runtimes/svelte/README.md
@@ -0,0 +1,5 @@
+# @ui8kit/xgen-runtime-svelte
+
+Svelte 5 emitter: bricks, organisms, screens, app scaffold.
+
+Part of xgen (see `../README.md` and `../../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
diff --git a/xgen/runtimes/svelte/assets/LucideIcon.svelte b/xgen/runtimes/svelte/assets/LucideIcon.svelte
new file mode 100644
index 0000000..5af75e2
--- /dev/null
+++ b/xgen/runtimes/svelte/assets/LucideIcon.svelte
@@ -0,0 +1,37 @@
+<!--
+  LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file.
+  Decorative (aria-hidden) unless a `label` is given.
+-->
+<script lang="ts" module>
+  export type LucideIconProps = { name: string; size?: number; strokeWidth?: number; label?: string; class?: string };
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils";
+  import { LUCIDE } from "./lucide-icons";
+
+  let { name, size = 16, strokeWidth = 2, label, class: className }: LucideIconProps = $props();
+  const nodes = $derived(LUCIDE[name] ?? LUCIDE["circle"] ?? []);
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width={size}
+  height={size}
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={cn("inline-block shrink-0", className)}
+  aria-hidden={label ? undefined : "true"}
+  aria-label={label}
+  role={label ? "img" : undefined}
+  data-slot="icon"
+  data-lucide={name}
+>
+  {#each nodes as [tag, attrs], i (i)}
+    <svelte:element this={tag} {...attrs} />
+  {/each}
+</svg>
diff --git a/xgen/runtimes/svelte/assets/url.svelte.ts b/xgen/runtimes/svelte/assets/url.svelte.ts
new file mode 100644
index 0000000..8122770
--- /dev/null
+++ b/xgen/runtimes/svelte/assets/url.svelte.ts
@@ -0,0 +1,25 @@
+// The URL as a reactive port for Svelte: the hash store of the app runtime, mirrored into runes.
+import { createHashStore, type UrlPort } from "./core";
+
+class SvelteUrl implements UrlPort {
+  path = $state("");
+  query = $state<Record<string, string>>({});
+  readonly #store = createHashStore();
+
+  constructor() {
+    this.#sync();
+    this.#store.subscribe(() => this.#sync());
+  }
+
+  #sync(): void {
+    const s = this.#store.getSnapshot();
+    this.path = s.path;
+    this.query = s.query;
+  }
+
+  go(path: string, query?: Record<string, string | undefined>): void {
+    this.#store.go(path, query);
+  }
+}
+
+export const url: UrlPort = new SvelteUrl();
diff --git a/xgen/runtimes/svelte/package.json b/xgen/runtimes/svelte/package.json
new file mode 100644
index 0000000..b56f0fc
--- /dev/null
+++ b/xgen/runtimes/svelte/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ui8kit/xgen-runtime-svelte",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Svelte 5 emitter: bricks, organisms, screens, app scaffold.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-spec": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*",
+    "@ui8kit/xgen-runtime-core": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/runtimes/svelte/src/app.ts b/xgen/runtimes/svelte/src/app.ts
new file mode 100644
index 0000000..f994097
--- /dev/null
+++ b/xgen/runtimes/svelte/src/app.ts
@@ -0,0 +1,65 @@
+// Scaffold of the Svelte host app: config, entry, and the App that renders the screen named by the URL (/<key>/#/<route>).
+// Screens load on demand (one chunk each); content, data and menus come from the shared package, emitted once.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import type { AppSpec, ScreenSpec } from "@ui8kit/xgen-screens";
+import { BANNER, HOST_GEN, SHARED, appCss, hostUrlAsset, indexHtml, jsonFile, screenKey, viteConfig, withBanner, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+
+const UI = "@ui8kit/svelte-ui";
+
+export function appScaffold(app: AppSpec, screens: ScreenSpec[]): GeneratedFile[] {
+  const loaders = screens.map((s) => `    ${JSON.stringify(screenKey(s.id))}: () => import("./screens/${s.name}.svelte"),`);
+  const appSvelte = [
+    `<!-- ${BANNER} -->`,
+    `<script lang="ts">`,
+    `  import type { Component } from "svelte";`,
+    `  import { SCREENS } from "${SHARED}/screens";`,
+    `  import type { UrlPort } from "${SHARED}/runtime/core";`,
+    `  import { Block, Link, List, ListItem, Title } from "${UI}";`,
+    `  import { url } from "./runtime/url.svelte";`,
+    ``,
+    `  let { screen, title }: { screen: string; title: string } = $props();`,
+    ``,
+    `  /** one chunk per screen: a landing is a screen spec, not an app */`,
+    `  const LOADERS: Record<string, () => Promise<{ default: Component<{ url: UrlPort }> }>> = {`,
+    ...loaders,
+    `  };`,
+    `  const load = $derived(LOADERS[screen]);`,
+    `</script>`,
+    ``,
+    `{#if !load}`,
+    `  <Block tag="main" id="main-content" class="mx-auto w-full max-w-3xl px-4 py-12" data-testid="host-index">`,
+    `    <Title as={1} size="2xl" weight="semibold">{title}</Title>`,
+    `    <List class="mt-6 grid gap-2">`,
+    `      {#each SCREENS as s (s.key)}`,
+    `        <ListItem><Link class="underline" href={\`/\${s.key}/\`} data-testid="host-screen">{s.key}</Link></ListItem>`,
+    `      {/each}`,
+    `    </List>`,
+    `  </Block>`,
+    `{:else}`,
+    `  {#await load() then mod}`,
+    `    <mod.default {url} />`,
+    `  {/await}`,
+    `{/if}`,
+    ``,
+  ].join("\n");
+  const assets = join(import.meta.dir, "..", "assets");
+  return [
+    jsonFile("package.json", {
+      name: app.name, private: true, version: "0.0.0", type: "module",
+      description: `Generated by xgen from xgen.app.json: the Svelte 5 host of ${screens.length} screens (/<screen>/#/<route>). Generated under ${HOST_GEN}/; src/ is the front controller.`,
+      ui8kit: { runtime: "svelte", generated: true, kit: [`${HOST_GEN}/runtime`], composition: [`${HOST_GEN}/App.svelte`, `${HOST_GEN}/screens`], blockRoot: [`${HOST_GEN}/App.svelte`, `${HOST_GEN}/screens`] },
+      scripts: { dev: "vite", build: "vite build", preview: "vite preview", check: "svelte-check --tsconfig ./tsconfig.json" },
+      dependencies: { [SHARED]: "workspace:*", [UI]: "workspace:*", svelte: "^5.57.0" },
+      devDependencies: { "@sveltejs/vite-plugin-svelte": "^7.3.0", "@tailwindcss/vite": "^4.3.3", "@tsconfig/svelte": "^5.0.8", "svelte-check": "^4.7.6", tailwindcss: "^4.3.3", typescript: "~6.0.2", vite: "^8.3.0" },
+    }),
+    { path: "index.html", contents: indexHtml(app).replace("__EXT__", "ts") },
+    viteConfig([`import { svelte } from "@sveltejs/vite-plugin-svelte";`], "svelte()", app),
+    { path: "svelte.config.js", contents: withBanner(`/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */\nexport default {};\n`) },
+    { path: "tsconfig.json", contents: `// ${BANNER}\n{\n  "extends": "@tsconfig/svelte/tsconfig.json",\n  "compilerOptions": { "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "types": ["svelte", "vite/client"], "allowArbitraryExtensions": true, "resolveJsonModule": true, "noEmit": true },\n  "include": ["src/**/*.ts", "src/**/*.svelte", "${HOST_GEN}/**/*.ts", "${HOST_GEN}/**/*.svelte"]\n}\n` },
+    appCss(UI),
+    { path: "src/main.ts", contents: withBanner(`import { mount } from "svelte";\nimport "./app.css";\nimport { bootScreen, screenKeyOf } from "${SHARED}/screens";\nimport App from "../${HOST_GEN}/App.svelte";\n\nconst screen = screenKeyOf(location);\nconst title = ${JSON.stringify(app.title)};\nbootScreen(screen, ${JSON.stringify(app.theme)}, title);\nmount(App, { target: document.getElementById("app")!, props: { screen, title } });\n`) },
+    { path: `${HOST_GEN}/App.svelte`, contents: appSvelte },
+    hostUrlAsset("url.svelte.ts", readFileSync(join(assets, "url.svelte.ts"), "utf8")),
+  ];
+}
diff --git a/xgen/runtimes/svelte/src/emit.ts b/xgen/runtimes/svelte/src/emit.ts
new file mode 100644
index 0000000..9fe2030
--- /dev/null
+++ b/xgen/runtimes/svelte/src/emit.ts
@@ -0,0 +1,308 @@
+import { fileName } from "@ui8kit/xgen-screens";
+
+/**
+ * Svelte 5 emitter — one kebab-case `.svelte` file per part (runes mode,
+ * snippets for children, `<svelte:element>` for resolved tags, HTML-native
+ * prop names: `class`, `for`, `aria-label`).
+ */
+
+import {
+  type AttrSpec,
+  type BrickDef,
+  type ElementNode,
+  type Node,
+  type PartDef,
+} from "@ui8kit/xgen-spec";
+import { localIdent } from "@ui8kit/xgen-spec";
+import {
+  BANNER,
+  exprType,
+  indent,
+  wrapText,
+  makeEnv,
+  usesItem,
+  type Emitter,
+  type GeneratedFile,
+  type TypeEnv,
+} from "@ui8kit/xgen-runtime-core";
+import { formatAttr, printTsExpr, tagHead, type TsPrintCtx } from "@ui8kit/xgen-runtime-core";
+import {
+  classesExpr,
+  declaredProps,
+  neverEmptyString,
+  partHead,
+  printInlineClassSpec,
+  isPassthroughForward,
+} from "@ui8kit/xgen-runtime-core";
+
+/** attributes whose Svelte DOM typings are narrower than the portable spec (numbers, literal unions): passed as untyped spread, the browser gets the same attribute */
+const NARROW_ATTRS = new Set(["colspan", "rowspan", "span", "rows", "scope", "value", "min", "max", "step"]);
+
+const IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+
+export class SvelteEmitter implements Emitter {
+  readonly runtime = "svelte" as const;
+
+  constructor(private readonly utilsPath = "../../utils") {}
+
+  emit(brick: BrickDef): GeneratedFile[] {
+    return brick.parts.map((part) => this.emitPart(brick, part));
+  }
+
+  private emitPart(brick: BrickDef, part: PartDef): GeneratedFile {
+    const env: TypeEnv = makeEnv(brick, part);
+    const decls = declaredProps(brick, part);
+    const helperImports = new Set<string>();
+    const head = partHead(brick, part);
+    const state = { usesResolveTag: false, usesTitleTag: false, usesCn: false };
+    const hasChildren = part.props.some((p) => p.type === "children");
+
+    // Props type (module script).
+    const typeFields: string[] = decls.map((d) => {
+      const key = IDENT_RE.test(d.htmlName) ? d.htmlName : JSON.stringify(d.htmlName);
+      return `  ${key}?: ${d.tsType};`;
+    });
+    typeFields.push(`  class?: string;`);
+    if (hasChildren) typeFields.push(`  children?: Snippet;`);
+    typeFields.push(`  [key: string]: unknown;`);
+
+    // Destructure.
+    const destructure: string[] = decls.map((d) => {
+      if (!IDENT_RE.test(d.htmlName)) return `${JSON.stringify(d.htmlName)}: ${d.local}`;
+      return d.htmlName === d.local ? d.htmlName : `${d.htmlName}: ${d.local}`;
+    });
+    destructure.push(`class: className`);
+    if (hasChildren) destructure.push("children");
+    destructure.push("...rest");
+
+    const ctx: TsPrintCtx = {
+      env,
+      propCode: (name) => {
+        if (name === "Class") return "className";
+        const d = decls.find((x) => x.def.name === name);
+        if (!d) throw new Error(`${brick.id}/${part.name}: prop ${name} not declared for Svelte`);
+        return d.local;
+      },
+      itemCode: (field) => `item.${localIdent(field)}`,
+      derivedCode: (name) => `${name}Value`,
+      resolvedTagCode: () => "resolvedTagValue",
+      helpers: helperImports,
+    };
+
+    const body: string[] = [];
+    if (part.classes) {
+      const classes = classesExpr(brick, part, ctx);
+      if (classes.usesVariantKey) head.usesVariantKey = true;
+      state.usesCn = true;
+      body.push(`const cls = $derived(${classes.expr});`);
+    }
+    for (const [name, expr] of Object.entries(part.derived ?? {})) {
+      if (usesItem(expr, env)) throw new Error(`${brick.id}/${part.name}: derived ${name} uses loop item`);
+      body.push(`const ${name}Value = $derived(${printTsExpr(expr, ctx)});`);
+    }
+
+    const root = part.render;
+    if (root.kind === "element" && root.tag.kind !== "static") {
+      if (root.tag.kind === "resolved") {
+        state.usesResolveTag = true;
+        body.push(
+          `const resolvedTagValue = $derived(resolveTag(${ctx.propCode(root.tag.fromProp)}, ${JSON.stringify(root.tag.fallback)}, TagGroup.${root.tag.group}));`
+        );
+      } else if (root.tag.kind === "heading") {
+        state.usesTitleTag = true;
+        helperImports.add("titleTag");
+        body.push(`const resolvedTagValue = $derived(titleTag(${ctx.propCode(root.tag.fromProp)}));`);
+      } else {
+        body.push(`const resolvedTagValue = $derived(${printTsExpr(root.tag.expr, ctx)});`);
+      }
+    }
+
+    const markup = this.printNode(root, ctx, part, state, { isRoot: true });
+
+    // Assemble file.
+    const moduleImports: string[] = [];
+    if (hasChildren) moduleImports.push(`import type { Snippet } from "svelte";`);
+    const utils = [...(head.usesVariants ? ["variants"] : []), ...(head.usesVariantKey ? ["type VariantKey"] : [])];
+    if (utils.length > 0) moduleImports.push(`import { ${utils.join(", ")} } from "${this.utilsPath}";`);
+    for (const [owner, names] of head.fromSibling) {
+      const list = [...[...names.values].sort(), ...[...names.types].sort().map((t) => `type ${t}`)];
+      moduleImports.push(`import { ${list.join(", ")} } from "./${fileName(owner)}.svelte";`);
+    }
+
+    const scriptImports: string[] = [];
+    if (state.usesCn) scriptImports.push(`import { cn } from "${this.utilsPath}";`);
+    if (helperImports.size > 0) {
+      scriptImports.push(
+        `import { ${[...helperImports].sort().join(", ")} } from "${this.utilsPath}/expr";`
+      );
+    }
+    if (state.usesResolveTag) {
+      scriptImports.push(`import { resolveTag, TagGroup } from "${this.utilsPath}/tags";`);
+    }
+
+    const docs = wrapText(part.docs)
+      .map((l) => `  ${l}`.trimEnd())
+      .join("\n");
+
+    const lines: string[] = [];
+    lines.push(`<!-- ${BANNER} -->`);
+    lines.push(`<!--\n${docs}\n-->`);
+    lines.push(`<script lang="ts" module>`);
+    for (const imp of moduleImports) lines.push(indent(imp, 1));
+    lines.push(``);
+    for (const code of head.code) lines.push(code ? indent(code, 1) : ``);
+    lines.push(indent(`export type ${part.name}Props = {\n${typeFields.join("\n")}\n};`, 1));
+    lines.push(`</script>`);
+    lines.push(``);
+    lines.push(`<script lang="ts">`);
+    for (const imp of scriptImports) lines.push(indent(imp, 1));
+    if (scriptImports.length > 0) lines.push(``);
+    lines.push(
+      indent(
+        `let {\n${destructure.map((d) => `  ${d}`).join(",\n")}\n}: ${part.name}Props = $props();`,
+        1
+      )
+    );
+    if (body.length > 0) {
+      lines.push(``);
+      for (const stmt of body) lines.push(indent(stmt, 1));
+    }
+    lines.push(`</script>`);
+    lines.push(``);
+    lines.push(markup);
+
+    return {
+      path: `primitives/${brick.dir}/${fileName(part.name)}.svelte`,
+      contents: lines.join("\n").replace(/\n{3,}/g, "\n\n").trimEnd() + "\n",
+    };
+  }
+
+  private printAttrs(
+    node: ElementNode,
+    ctx: TsPrintCtx,
+    part: PartDef,
+    state: { usesCn: boolean },
+    opts: { inLoop: boolean }
+  ): string[] {
+    const out: string[] = [];
+    for (const attr of node.attrs) {
+      out.push(this.printAttr(attr, ctx, part, state, opts));
+    }
+    return out.filter(Boolean);
+  }
+
+  private printAttr(
+    attr: AttrSpec,
+    ctx: TsPrintCtx,
+    part: PartDef,
+    state: { usesCn: boolean },
+    opts: { inLoop: boolean }
+  ): string {
+    switch (attr.kind) {
+      case "static":
+        return `${attr.name}=${JSON.stringify(attr.value)}`;
+      case "expr": {
+        if (isPassthroughForward(attr, part)) return "";
+        const value = printTsExpr(attr.expr, ctx);
+        const t = exprType(attr.expr, ctx.env);
+        if (NARROW_ATTRS.has(attr.name)) {
+          const inner = attr.when ? `${printTsExpr(attr.when, ctx)} ? ${value} : undefined` : t === "string" && !neverEmptyString(attr.expr, ctx.env) ? (ctx.helpers.add("orUndef"), `orUndef(${value})`) : value;
+          return `{...({ ${JSON.stringify(attr.name)}: ${inner} } as Record<string, unknown>)}`;
+        }
+        if (attr.when) {
+          return `${attr.name}={${printTsExpr(attr.when, ctx)} ? ${value} : undefined}`;
+        }
+        if (attr.keepEmpty && t === "string") {
+          return `${attr.name}={(${value}) ?? ""}`;
+        }
+        if (t !== "string" || neverEmptyString(attr.expr, ctx.env)) {
+          return `${attr.name}={${value}}`;
+        }
+        ctx.helpers.add("orUndef");
+        return `${attr.name}={orUndef(${value})}`;
+      }
+      case "bool":
+        return `${attr.name}={${printTsExpr(attr.expr, ctx)} || undefined}`;
+      case "class": {
+        // With spread attributes Svelte SSR prints `class=""` even for
+        // undefined; a conditional spread omits the attr entirely.
+        if (!attr.spec) return `{...(cls ? { class: cls } : {})}`;
+        state.usesCn = true;
+        const inline = printInlineClassSpec(attr.spec, ctx, () =>
+          part.props.some((p) => p.name === "Class") && !opts.inLoop ? "className" : undefined
+        );
+        // cn("static ...", ...) is never empty: a plain attribute
+        if (/^cn\("[^"]+"/.test(inline)) return formatAttr(`class={${inline}}`);
+        return `{...((${inline}) ? { class: ${inline} } : {})}`;
+      }
+      case "rest":
+        return `{...rest}`;
+    }
+  }
+
+  private printNode(
+    node: Node,
+    ctx: TsPrintCtx,
+    part: PartDef,
+    state: { usesResolveTag: boolean; usesTitleTag: boolean; usesCn: boolean },
+    opts: { isRoot?: boolean; inLoop?: boolean } = {}
+  ): string {
+    switch (node.kind) {
+      case "element": {
+        const dynamic = node.tag.kind !== "static";
+        if (dynamic && !opts.isRoot) {
+          throw new Error(`${part.name}: dynamic tags only supported at part root`);
+        }
+        const tagCode = dynamic ? "svelte:element" : node.tag.kind === "static" ? node.tag.tag : "";
+        const attrs = this.printAttrs(node, ctx, part, state, { inLoop: opts.inLoop === true });
+        const head = [...(dynamic ? [`this={resolvedTagValue}`] : []), ...attrs];
+        if (node.void || node.children.length === 0) {
+          return node.void ? tagHead(tagCode, head, "/>") : `${tagHead(tagCode, head, ">")}</${tagCode}>`;
+        }
+        // an anchor gets its href through {...rest}: the compiler cannot see it is a link and warns on its tabindex
+        // (a11y_no_noninteractive_tabindex); at run time it is a link, so that one warning is silenced here
+        const quiet = tagCode === "a" && attrs.some((a) => a.startsWith("tabindex=")) ? "<!-- svelte-ignore a11y_no_noninteractive_tabindex -->\n" : "";
+        const open = quiet + tagHead(tagCode, head, ">");
+        const rendered = node.children.map((c) =>
+          this.printNode(c, ctx, part, state, { inLoop: opts.inLoop })
+        );
+        // Mixed inline content (text + slot) must not gain whitespace text
+        // nodes — join on one line to keep the DOM contract byte-equal.
+        if (node.children.some((c) => c.kind === "text")) {
+          return `${open}${rendered.join("")}</${tagCode}>`;
+        }
+        return `${open}\n${indent(rendered.join("\n"), 1)}\n</${tagCode}>`;
+      }
+      case "slot":
+        return `{@render children?.()}`;
+      case "text":
+        return `{${printTsExpr(node.expr, ctx)}}`;
+      case "when": {
+        const test = printTsExpr(node.test, ctx);
+        const thenCode = node.then
+          .map((c) => this.printNode(c, ctx, part, state, opts))
+          .join("\n");
+        if (!node.else || node.else.length === 0) {
+          return `{#if ${test}}\n${indent(thenCode, 1)}\n{/if}`;
+        }
+        // Collapse else-if chains for readability.
+        if (node.else.length === 1 && node.else[0]!.kind === "when") {
+          const elseWhen = this.printNode(node.else[0]!, ctx, part, state, opts);
+          const chained = elseWhen.replace(/^\{#if /, "{:else if ").replace(/\n\{\/if\}$/, "\n{/if}");
+          return `{#if ${test}}\n${indent(thenCode, 1)}\n${chained}`;
+        }
+        const elseCode = node.else
+          .map((c) => this.printNode(c, ctx, part, state, opts))
+          .join("\n");
+        return `{#if ${test}}\n${indent(thenCode, 1)}\n{:else}\n${indent(elseCode, 1)}\n{/if}`;
+      }
+      case "forEach": {
+        const itemsCode = ctx.propCode(node.itemsProp);
+        const body = node.body
+          .map((c) => this.printNode(c, ctx, part, state, { inLoop: true }))
+          .join("\n");
+        return `{#each ${itemsCode} ?? [] as item}\n${indent(body, 1)}\n{/each}`;
+      }
+    }
+  }
+}
diff --git a/xgen/runtimes/svelte/src/index.ts b/xgen/runtimes/svelte/src/index.ts
new file mode 100644
index 0000000..52ab977
--- /dev/null
+++ b/xgen/runtimes/svelte/src/index.ts
@@ -0,0 +1,3 @@
+export { SvelteEmitter } from "./emit";
+export * from "./view";
+export * from "./app";
diff --git a/xgen/runtimes/svelte/src/view.ts b/xgen/runtimes/svelte/src/view.ts
new file mode 100644
index 0000000..0136b63
--- /dev/null
+++ b/xgen/runtimes/svelte/src/view.ts
@@ -0,0 +1,260 @@
+// Svelte 5 output for organisms, screens and the app scaffold. Blocks are `{#if}` / `{#each}`, render-prop slots are snippets.
+import { fileName, presetFile, printBare, printValue, sourcesOf, tierDir, typesPath, type OrganismSpec, type ScreenSpec } from "@ui8kit/xgen-screens";
+import { htmlPropName } from "@ui8kit/xgen-spec";
+import { assetFile, assetTables, BANNER, chainLines, chunksOf, partsOf, cnLines, pageSources, optionalGroups, printVariantTable, wrapList, wrapText, screenModel, type ChunkModel, type RecipeLike, typeName, walkNodes, recordTypes, type GeneratedFile, type PartRef, type Syntax, type WalkEnv } from "@ui8kit/xgen-runtime-core";
+
+const pad = (lines: string[], n = 1): string[] => lines.map((l) => (l ? "  ".repeat(n) + l : l));
+
+export const svelteSyntax: Syntax = {
+  runtime: "svelte",
+  propName(ref: PartRef, canonical: string) {
+    if (canonical === "Class") return "class";
+    const d = ref.part.props.find((x) => x.name === canonical);
+    if (!d) throw new Error(`${ref.part.name}: prop ${canonical} does not exist`);
+    return htmlPropName(d);
+  },
+  eventProp: (ev) => `on${ev}`,
+  attrName: (name) => name,
+  callbackName: (ev) => `on${ev}`,
+  eventType: "Event & { currentTarget: HTMLInputElement }",
+  classProp: "class",
+  ifChain(branches, rest) {
+    const out: string[] = [];
+    branches.forEach(([c, lines], i) => { out.push(`{${i === 0 ? "#if" : ":else if"} ${c}}`, ...pad(lines)); });
+    if (rest.length) out.push("{:else}", ...pad(rest));
+    out.push("{/if}");
+    return out;
+  },
+  each: (items, as, key, body, index) => [`{#each ${items} as ${as}${index ? `, ${index}` : ""} (${key})}`, ...pad(body), "{/each}"],
+  slot: (name, args) => [`{@render ${name}?.(${args.join(", ")})}`],
+  slotProp: (name, params, body) => ({ child: [`{#snippet ${name}(${params})}`, ...pad(body), "{/snippet}"] }),
+  fragment: (lines) => lines,
+};
+
+export interface ViewDeps {
+  parts: Record<string, PartRef>;
+  organisms: Record<string, OrganismSpec>;
+  /** import path of a part's component file from the folder of the component (`src/blocks/`, `src/components/`) */
+  partPath(name: string): string;
+  /** the recipes (specs/recipes), by file name: printed as variant tables at the top of the organisms that read them */
+  recipes?: Record<string, RecipeLike>;
+}
+
+/** the variant tables of the recipes an organism reads (shadcn/cva style), printed at the top of its file */
+function recipeTables(org: OrganismSpec, deps: ViewDeps): string[] {
+  return Object.entries(org.recipes ?? {}).map(([local, file]) => {
+    const recipe = deps.recipes?.[file];
+    if (!recipe) throw new Error(`${org.name}: recipe ${file} not found in specs/recipes`);
+    return `/** ${org.name}: the classes of each value (shadcn/cva style). */\n${printVariantTable(`${local}Variants`, recipe)}`;
+  });
+}
+
+/** the one-line description on top, cut under the width */
+const docsLines = (docs: string): string[] => { const l = wrapText(docs); return l.length === 1 ? [`<!-- ${l[0]} -->`] : ["<!--", ...l.map((x) => `  ${x}`), "-->"]; };
+
+const header = `<!-- ${BANNER} -->`;
+const printCtx = (): WalkEnv["print"] => ({ emit: (ev) => `on${ev}?.`, helpers: new Set(), presets: new Set(), optional: new Set(["record"]), runtime: "svelte" });
+
+function envFor(deps: ViewDeps, optional: string[] = []): WalkEnv {
+  const print = printCtx();
+  optional.forEach((o) => print.optional.add(o));
+  return { syntax: svelteSyntax, parts: deps.parts, organisms: deps.organisms, print, usedParts: new Set(), usedOrganisms: new Set(), usesEach: { value: false } };
+}
+
+const constLines = (org: OrganismSpec): string[] =>
+  Object.entries(org.consts ?? {}).filter(([name]) => !assetTables(org).includes(name)).flatMap(([name, table]) => [`  const ${name}: Record<string, string> = {`, ...Object.entries(table).map(([k, v]) => `    ${JSON.stringify(k)}: ${JSON.stringify(v)},`), `  };`]);
+
+export function emitOrganism(org: OrganismSpec, deps: ViewDeps): GeneratedFile[] {
+  const env = envFor(deps, optionalGroups(org));
+  env.print.optional.delete("record");
+  env.slotArity = { ...Object.fromEntries(org.slots.map((s) => [s.name, s.args.length])), ...(org.children ? { children: 0 } : {}) };
+  const markup = walkNodes(org.view, env);
+  const name = org.name;
+  const dir = tierDir(org.id);
+  const recordNames = Object.keys(org.records);
+  const propLines = [
+    ...org.props.map((p) => `    ${p.name}${p.required ? "" : "?"}: ${typeName(p.type)};`),
+    ...(org.className ? [`    class?: string;`] : []),
+    ...(org.children ? [`    children?: Snippet;`] : []),
+    ...org.slots.map((s) => `    ${s.name}?: Snippet${s.args.length ? `<[${s.args.map((a) => typeName(a.type)).join(", ")}]>` : ""};`),
+    ...org.events.map((e) => `    on${e.name}?: (${e.args.map((a) => `${a.name}: ${typeName(a.type)}`).join(", ")}) => void;`),
+  ];
+  const lit = (v: string | number | boolean) => JSON.stringify(v);
+  const destructure = [
+    ...org.props.map((p) => (p.default === undefined ? p.name : `${p.name} = ${lit(p.default)}`)),
+    ...(org.className ? ["class: className"] : []),
+    ...(org.children ? ["children"] : []),
+    ...org.slots.map((s) => s.name),
+    ...org.events.map((e) => `on${e.name}`),
+  ];
+  const partImports = [...env.usedParts].sort().map((p) => `  import ${p} from "${deps.partPath(p)}";`);
+  const orgImports = [...env.usedOrganisms].sort().map((o) => `  import ${o} from "../${tierDir(deps.organisms[o]!.id)}/${fileName(o)}.svelte";`);
+  const derived = (org.derived ?? []).map((d) => {
+    const one = `  const ${d.name} = $derived(${printBare(d.value, env.print)});`;
+    const chain = one.length > 100 ? chainLines(printValue(d.value, env.print)) ?? cnLines(printBare(d.value, env.print)) : undefined;
+    return chain ? `  const ${d.name} = $derived(\n${chain.map((l) => `    ${l}`).join("\n")}\n  );` : one;
+  });
+  const tables = recipeTables(org, deps);
+  if (tables.length) env.print.helpers.add("variants");
+  const helpers = [...env.print.helpers].sort();
+  const presetImports = [...(env.print.presets ?? [])].sort().map((p) => `  import { ${p} } from "../presets/${presetFile(p)}";`);
+  const body = [
+    header,
+    ...docsLines(org.docs),
+    `<script lang="ts" module>`,
+    `  import type { Snippet } from "svelte";`,
+    ...(recordNames.length ? [`  import type { ${recordNames.join(", ")} } from "./${fileName(name)}.types";`] : []),
+    ...(org.typeImports ?? []).map((t) => `  import type { ${t.names.join(", ")} } from "${typesPath(org.id, deps.organisms[t.from] ?? { id: org.id, name: t.from })}";`),
+    ...(tables.length ? [`  import { variants } from "../utils";`, ``, ...tables.map((t) => t.split("\n").map((l) => `  ${l}`).join("\n"))] : []),
+    ``,
+    `  export type ${name}Props = {`,
+    ...propLines,
+    `  };`,
+    `</script>`,
+    ``,
+    `<script lang="ts">`,
+    ...partImports,
+    ...orgImports,
+    ...presetImports,
+    ...(helpers.filter((h) => h !== "variants").length ? [`  import { ${helpers.filter((h) => h !== "variants").join(", ")} } from "../utils";`] : []),
+    ...(assetTables(org).length ? [`  import { ${assetTables(org).join(", ")} } from "./${fileName(name)}.assets";`] : []),
+    ``,
+    ...constLines(org),
+    `${wrapList("let {", destructure, `}: ${name}Props = $props();`, 110, "  ")}`,
+    ...derived,
+    `</script>`,
+    ``,
+    ...markup,
+    ``,
+  ].join("\n");
+  const out: GeneratedFile[] = [{ path: `${dir}/${fileName(name)}.svelte`, contents: body }];
+  if (recordNames.length) out.push({ path: `${dir}/${fileName(name)}.types.ts`, contents: `// ${BANNER}\n\n${recordTypes(org, deps.organisms)}\n` });
+  if (assetTables(org).length) out.push({ path: `${dir}/${fileName(name)}.assets.ts`, contents: assetFile(org, `// ${BANNER}`) });
+  return out;
+}
+
+export interface ScreenDeps extends ViewDeps {
+  /** names the ui package exports */
+  ui: string;
+  /** package of the shared app outputs: content, data, menus, url runtime core */
+  shared: string;
+  recordType: string;
+}
+
+function emitPage(s: ScreenSpec, deps: ScreenDeps): GeneratedFile {
+  const m = screenModel(s);
+  const env = envFor(deps);
+  const chunks = new Map(chunksOf(s).map((c) => [c.area, c]));
+  const parts = partsOf(s);
+  env.part = (name) => [`<${name} />`];
+  const areaLines = (a: string): string[] => (chunks.has(a) ? [`<${chunks.get(a)!.name} />`] : walkNodes(s.areas[a] ?? [], env));
+  env.outlet = () => svelteSyntax.ifChain(m.otherAreas.map((a): [string, string[]] => [`route.area === ${JSON.stringify(a)}`, areaLines(a)]), areaLines(m.listArea));
+  const markup = walkNodes(s.layout, env);
+  const sources = pageSources(s);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const types = [...new Set(sources.map((x) => x.record))].sort().map((r) => `type ${r}`);
+  const contents = [
+    header,
+    ...docsLines(s.docs),
+    `<script lang="ts">`,
+    wrapList("import {", [...imports, ...types], `} from "${deps.ui}";`, 110, "  "),
+    ...[...chunks.values(), ...parts].map((c) => `  import ${c.name} from "./${c.dir}/${c.name}.svelte";`),
+    `  import { fromCodex, matchRoute, type UrlPort } from "${deps.shared}/runtime/core";`,
+    ...(sources.length ? [`  import { CODEX } from "${deps.shared}/runtime/codex";`] : []),
+    `  import { toggleTheme } from "${deps.shared}/runtime/theme";`,
+    `  import { ui } from "${deps.shared}/content";`,
+    ...(s.nav ? [`  import { navOf } from "${deps.shared}/nav/${s.name}";`] : []),
+    ...sources.map((x) => `  import { ${x.collection} as ${x.as}Entries } from "${deps.shared}/data/${x.collection}";`),
+    ``,
+    ...m.constsTs.split("\n").map((l) => "  " + l),
+    ``,
+    `  let { url }: { url: UrlPort } = $props();`,
+    ``,
+    ...sources.map((x) => `  const ${x.as} = fromCodex<${x.record}>(${x.as}Entries, ${x.as.toUpperCase()}_FIELDS, CODEX);`),
+    `  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: ${JSON.stringify(m.listArea)}, params: {} as Record<string, string> });`,
+    ...(s.nav ? [`  const nav = $derived(navOf(route.area));`] : []),
+    `  const actions = { toggleTheme };`,
+    ...(m.namedTs ? [``, ...m.namedTs.split("\n").map((l) => "  " + l)] : []),
+    `</script>`,
+    ``,
+    ...markup,
+    ``,
+  ].join("\n");
+  return { path: `screens/${s.name}.svelte`, contents };
+}
+
+/** one area of a chunked page as its own component: it imports only the data it shows */
+function emitChunk(s: ScreenSpec, c: ChunkModel, deps: ScreenDeps): GeneratedFile {
+  const env = envFor(deps);
+  const markup = walkNodes(c.nodes, env);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const types = [...new Set(c.sources.map((x) => x.record))].sort().map((r) => `type ${r}`);
+  const contents = [
+    header,
+    `<!-- ${c.doc} -->`,
+    `<script lang="ts">`,
+    `  ${wrapList("import {", [...imports, ...types], `} from "${deps.ui}";`, 110, "  ").trimStart()}`,
+    ...(c.sources.length ? [`  import { fromCodex } from "${deps.shared}/runtime/core";`] : []),
+    ...(c.sources.length ? [`  import { CODEX } from "${deps.shared}/runtime/codex";`] : []),
+    ...(c.actions ? [`  import { toggleTheme } from "${deps.shared}/runtime/theme";`] : []),
+    `  import { ui } from "${deps.shared}/content";`,
+    ...c.sources.map((x) => `  import { ${x.collection} as ${x.as}Entries } from "${deps.shared}/data/${x.collection}";`),
+    ...(c.constsTs ? [``, ...c.constsTs.split("\n").map((l) => "  " + l)] : []),
+    ``,
+    ...c.sources.map((x) => `  const ${x.as} = fromCodex<${x.record}>(${x.as}Entries, ${x.as.toUpperCase()}_FIELDS, CODEX);`),
+    ...(c.actions ? [`  const actions = { toggleTheme };`] : []),
+    ...(c.namedTs ? [...(c.sources.length || c.actions ? [``] : []), ...c.namedTs.split("\n").map((l) => "  " + l)] : []),
+    `</script>`,
+    ``,
+    ...markup,
+    ``,
+  ].join("\n");
+  return { path: `screens/${c.dir}/${c.name}.svelte`, contents };
+}
+
+/** the area files of a screen with `chunks`, and the part files of a page screen with `parts` */
+export function emitChunks(s: ScreenSpec, deps: ScreenDeps): GeneratedFile[] {
+  return [...chunksOf(s), ...partsOf(s)].map((c) => emitChunk(s, c, deps));
+}
+
+export function emitScreen(s: ScreenSpec, deps: ScreenDeps): GeneratedFile {
+  if (s.kind === "page") return emitPage(s, deps);
+  const m = screenModel(s);
+  const env = envFor(deps, ["record"]);
+  const areaLines = (a: string): string[] => walkNodes(s.areas[a] ?? [], env);
+  env.outlet = () => {
+    const branches: Array<[string, string[]]> = m.otherAreas.map((a) => [`route.area === ${JSON.stringify(a)}`, areaLines(a)]);
+    return svelteSyntax.ifChain(branches, areaLines(m.listArea));
+  };
+  const markup = walkNodes(s.layout, env);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const recordPath = m.recordPathTemplate ? `(id) => \`${m.recordPathTemplate}\`` : `() => ${JSON.stringify(m.listPath)}`;
+  const recordLookup = m.recordArea ? `route.area === ${JSON.stringify(m.recordArea)} ? rows.find((r) => r.id === route.params.${m.recordParam}) : undefined` : "undefined";
+  const contents = [
+    header,
+    ...docsLines(s.docs),
+    `<script lang="ts">`,
+    wrapList("import {", [...imports, `type ${deps.recordType}`], `} from "${deps.ui}";`, 110, "  "),
+    `  import { collectionView, fromCodex, matchRoute, screenActions, type UrlPort } from "${deps.shared}/runtime/core";`,
+    `  import { CODEX } from "${deps.shared}/runtime/codex";`,
+    `  import { toggleTheme } from "${deps.shared}/runtime/theme";`,
+    `  import { ui } from "${deps.shared}/content";`,
+    `  import { ${s.source!.collection} as entries } from "${deps.shared}/data/${s.source!.collection}";`,
+    ``,
+    ...m.constsTs.split("\n").map((l) => "  " + l),
+    ``,
+    `  let { url }: { url: UrlPort } = $props();`,
+    ``,
+    `  const rows = fromCodex<${deps.recordType}>(entries, FIELDS, CODEX);`,
+    `  const route = $derived(matchRoute(ROUTES, url.path) ?? { area: ${JSON.stringify(m.listArea)}, params: {} as Record<string, string> });`,
+    `  const view = $derived(collectionView(rows, LIST, url.query));`,
+    `  const record = $derived(${recordLookup});`,
+    `  const actions = $derived(screenActions(url, view, ${JSON.stringify(m.listPath)}, ${recordPath}, toggleTheme));`,
+    `</script>`,
+    ``,
+    ...markup,
+    ``,
+  ].join("\n");
+  return { path: `screens/${s.name}.svelte`, contents };
+}
+
diff --git a/xgen/runtimes/svelte/test/emit.test.ts b/xgen/runtimes/svelte/test/emit.test.ts
new file mode 100644
index 0000000..2414fa5
--- /dev/null
+++ b/xgen/runtimes/svelte/test/emit.test.ts
@@ -0,0 +1,17 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { SvelteEmitter } from "../src/index";
+
+const plan = planBuild(join(import.meta.dir, "..", "..", "..", ".."));
+
+test("every brick makes Svelte files that carry the banner, and the same brick makes the same files twice", () => {
+  const emitter = new SvelteEmitter();
+  for (const { brick } of plan.bricks) {
+    const a = emitter.emit(brick), b = emitter.emit(brick);
+    expect(a.length).toBeGreaterThan(0);
+    expect(a.map((f) => f.path)).toEqual(b.map((f) => f.path));
+    expect(a.map((f) => f.contents)).toEqual(b.map((f) => f.contents));
+    expect(a.some((f) => f.path.endsWith(".svelte"))).toBe(true);
+  }
+});
diff --git a/xgen/runtimes/templ/README.md b/xgen/runtimes/templ/README.md
new file mode 100644
index 0000000..6bfef09
--- /dev/null
+++ b/xgen/runtimes/templ/README.md
@@ -0,0 +1,31 @@
+# @ui8kit/xgen-runtime-templ
+
+Go [templ](https://templ.guide) emitter: the bricks as `.templ` components with typed props structs, the organisms as templ
+components over dynamic values, and the Go helpers. Output: `packages/templ/ui` (Go module
+`github.com/ui8kit/codegen/packages/templ/ui`, templ `v0.3.1070`).
+
+Part of xgen (see `../README.md` and the author guide `../../../docs/specs-guide.md`). Tests: `bun test`.
+
+## How it emits
+
+- `src/templ.ts` (`TemplEmitter`): one `ui/<brick>/<stem>.templ` per brick with a `<Part>Props` struct per part, exported
+  `<Part>Classes` helpers, and a `<stem>_gen.go` that embeds the brick's `*.variants.json` recipes.
+- `src/organism.ts`: one `blocks/<name>.templ` per portable organism (blocks, parts, patterns) in the Go package `blocks`. Values are
+  dynamic (`any`, the JSON shapes) and read with `utils/dyn.go`, which follows the TypeScript rules (truthiness, `===`, `String()`,
+  `cn`). Events are left out: templ output is static HTML. The recipes and presets an organism reads are embedded next to it.
+- `src/go-expr.ts`: the expression printer for Go. `src/go-harness.ts`: the parity programs `cmd/parity` and `cmd/parity-blocks`.
+- `assets/go/*.go`: the helpers copied into `utils/` (`cn_merge.go` is a tailwind-merge port, `variants_json.go` the recipe reader,
+  `tags.go`/`heading.go` the allowed dynamic tags). `assets/LucideIcon.templ` is the icon asset with its glyph registry.
+
+The generator side is `xgen/generator/src/templ.ts` (package files, README, go.mod) and `organisms.ts` (the shared organism pass).
+
+## Check group `templ`
+
+`templ generate`, `go mod tidy`, `go vet ./...`, `go build ./...`, then `go run ./cmd/parity` and `./cmd/parity-blocks` render every
+brick case (118) and block case (474) and the DOM is compared with React; html-validate runs over every block case
+(`xgen/check/src/templ`). The rules group reads `blocks/*.templ` with `xgen/check/src/rules/templ.ts`.
+
+## Prerequisites
+
+Go (the version in `packages/templ/ui/go.mod`). The templ CLI is found on the PATH, in `~/go/bin`, or run through `go run` at the
+pinned version. Without Go the group prints `skipped: no Go toolchain`; with `UI8KIT_REQUIRE_ALL_RUNTIMES=1` a skip is a failure.
diff --git a/xgen/runtimes/templ/assets/LucideIcon.templ b/xgen/runtimes/templ/assets/LucideIcon.templ
new file mode 100644
index 0000000..3c45179
--- /dev/null
+++ b/xgen/runtimes/templ/assets/LucideIcon.templ
@@ -0,0 +1,83 @@
+/*
+LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file
+(lucide_icons.go). Decorative (aria-hidden) unless a Label is given.
+*/
+
+package lucideicon
+
+import (
+	"html"
+	"sort"
+	"strconv"
+	"strings"
+
+	uiutils "{{MODULE}}/utils"
+)
+
+// LucideIconProps configures LucideIcon. Size and StrokeWidth default to 16 and 2.
+type LucideIconProps struct {
+	Name        string
+	Size        int
+	StrokeWidth int
+	Label       string
+	Class       string
+	Attrs       templ.Attributes
+}
+
+func orInt(v, d int) string {
+	if v == 0 {
+		return strconv.Itoa(d)
+	}
+	return strconv.Itoa(v)
+}
+
+// glyph is the inner markup of the icon: its nodes with their attributes in name order, escaped.
+func glyph(name string) string {
+	nodes, ok := lucide[name]
+	if !ok {
+		nodes = lucide["circle"]
+	}
+	var b strings.Builder
+	for _, n := range nodes {
+		keys := make([]string, 0, len(n.Attrs))
+		for k := range n.Attrs {
+			keys = append(keys, k)
+		}
+		sort.Strings(keys)
+		b.WriteString("<" + n.Tag)
+		for _, k := range keys {
+			b.WriteString(" " + k + "=\"" + html.EscapeString(n.Attrs[k]) + "\"")
+		}
+		b.WriteString("></" + n.Tag + ">")
+	}
+	return b.String()
+}
+
+// LucideIcon renders the glyph as an inline svg.
+templ LucideIcon(p LucideIconProps) {
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width={ orInt(p.Size, 16) }
+		height={ orInt(p.Size, 16) }
+		fill="none"
+		stroke="currentColor"
+		stroke-width={ orInt(p.StrokeWidth, 2) }
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={ uiutils.Cn("inline-block shrink-0", p.Class) }
+		if p.Label == "" {
+			aria-hidden="true"
+		} else {
+			aria-label={ p.Label }
+			role="img"
+		}
+		data-slot="icon"
+		if p.Name != "" {
+			data-lucide={ p.Name }
+		}
+		{ p.Attrs... }
+	>
+		@templ.Raw(glyph(p.Name))
+	</svg>
+}
diff --git a/xgen/runtimes/templ/assets/go.sum b/xgen/runtimes/templ/assets/go.sum
new file mode 100644
index 0000000..d4d87f3
--- /dev/null
+++ b/xgen/runtimes/templ/assets/go.sum
@@ -0,0 +1,4 @@
+github.com/a-h/templ v0.3.1070 h1:3iCOXHXqFXa99OQzgkUOLJbNzv/QjFGLwKZkBAg+ADA=
+github.com/a-h/templ v0.3.1070/go.mod h1:iIqB3g2RHBe/WlnPwa+Bvhh1TKXHWLRnBD9NWHOLm78=
+github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
+github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
diff --git a/xgen/runtimes/templ/assets/go/cn_merge.go b/xgen/runtimes/templ/assets/go/cn_merge.go
new file mode 100644
index 0000000..6c6992a
--- /dev/null
+++ b/xgen/runtimes/templ/assets/go/cn_merge.go
@@ -0,0 +1,293 @@
+package uiutils
+
+import (
+	"strings"
+	"unicode"
+)
+
+func mergeTailwind(classes ...string) string {
+	var tokens []string
+	for _, chunk := range classes {
+		for _, part := range strings.Fields(chunk) {
+			tokens = append(tokens, part)
+		}
+	}
+	if len(tokens) == 0 {
+		return ""
+	}
+
+	// tailwind-merge semantics: each class has one group; a later class removes the earlier classes
+	// of its own group and of the groups it overrides (p-2 removes an earlier px-4, not the reverse).
+	type item struct {
+		token string
+		key   string
+	}
+	kept := make([]item, 0, len(tokens))
+	for _, token := range tokens {
+		prefix, key, removes := classKey(token)
+		if key != "" {
+			drop := map[string]bool{key: true}
+			for _, g := range removes {
+				drop[prefix+g] = true
+			}
+			next := kept[:0]
+			for _, it := range kept {
+				if !drop[it.key] {
+					next = append(next, it)
+				}
+			}
+			kept = next
+		}
+		kept = append(kept, item{token: token, key: key})
+	}
+
+	out := make([]string, 0, len(kept))
+	for _, it := range kept {
+		out = append(out, it.token)
+	}
+	return strings.Join(out, " ")
+}
+
+// classKey: the variant prefix, the conflict key (prefix + group) and the groups this class overrides.
+func classKey(token string) (prefix, key string, removes []string) {
+	prefix, core := splitVariant(token)
+	if core == "" {
+		return "", "", nil
+	}
+	groups := utilityGroups(core)
+	if len(groups) == 0 {
+		// no known group: only the same class conflicts with itself (tailwind-merge keeps the last of duplicates)
+		return prefix, "=" + token, nil
+	}
+	return prefix, prefix + groups[0], groups[1:]
+}
+
+func splitVariant(token string) (prefix, core string) {
+	depth := 0
+	cut := -1
+	for i, r := range token {
+		switch r {
+		case '[':
+			depth++
+		case ']':
+			if depth > 0 {
+				depth--
+			}
+		case ':':
+			if depth == 0 {
+				cut = i
+			}
+		}
+	}
+	if cut == -1 {
+		return "", strings.TrimPrefix(token, "!")
+	}
+	return token[:cut+1], strings.TrimPrefix(token[cut+1:], "!")
+}
+
+func utilityGroups(core string) []string {
+	switch core {
+	case "block", "inline", "inline-block", "inline-flex", "flex", "grid", "contents", "hidden":
+		return []string{"display"}
+	case "flex-row", "flex-col", "flex-row-reverse", "flex-col-reverse":
+		return []string{"flex-direction"}
+	case "static", "relative", "absolute", "fixed", "sticky":
+		return []string{"position"}
+	case "isolate", "isolation-auto":
+		return []string{"isolation"}
+	}
+
+	// rings: the width (ring, ring-2) and the colour (ring-primary) are separate groups, as in tailwind-merge
+	for _, kind := range []string{"inset-ring", "ring"} {
+		if core == kind {
+			return []string{kind + "-width"}
+		}
+		if rest, ok := strings.CutPrefix(core, kind+"-"); ok {
+			if isNumber(rest) {
+				return []string{kind + "-width"}
+			}
+			return []string{kind + "-color"}
+		}
+	}
+
+	if group, ok := prefixGroup(core, [][2]string{
+		{"gap-x-", "gap-x"},
+		{"gap-y-", "gap-y"},
+		{"items-", "align-items"},
+		{"justify-", "justify-content"},
+		{"self-", "align-self"},
+		{"content-", "align-content"},
+		{"overflow-x-", "overflow-x"},
+		{"overflow-y-", "overflow-y"},
+		{"inset-x-", "inset-x"},
+		{"inset-y-", "inset-y"},
+		{"min-w-", "min-width"},
+		{"min-h-", "min-height"},
+		{"max-w-", "max-width"},
+		{"max-h-", "max-height"},
+		{"shadow-", "shadow"},
+		{"ring-", "ring"},
+		{"rounded-", "rounded"},
+		{"leading-", "leading"},
+		{"tracking-", "tracking"},
+		{"opacity-", "opacity"},
+		{"z-", "z"},
+		{"top-", "top"},
+		{"right-", "right"},
+		{"bottom-", "bottom"},
+		{"left-", "left"},
+	}); ok {
+		return []string{group}
+	}
+
+	switch {
+	case strings.HasPrefix(core, "gap-"):
+		return []string{"gap", "gap-x", "gap-y"}
+	case strings.HasPrefix(core, "inset-"):
+		return []string{"inset", "inset-x", "inset-y", "top", "right", "bottom", "left"}
+	case strings.HasPrefix(core, "overflow-"):
+		return []string{"overflow", "overflow-x", "overflow-y"}
+	case core == "border" || (strings.HasPrefix(core, "border-") && isNumber(core[7:])):
+		return []string{"border-width", "border-w-x", "border-w-y", "border-w-t", "border-w-r", "border-w-b", "border-w-l", "border-w-s", "border-w-e"}
+	case len(core) >= 8 && strings.HasPrefix(core, "border-") && strings.Contains("xytrblse", core[7:8]) && (len(core) == 8 || (core[8] == '-' && isNumber(core[9:]))):
+		side := core[7:8]
+		if side == "x" {
+			return []string{"border-w-x", "border-w-r", "border-w-l", "border-w-s", "border-w-e"}
+		}
+		if side == "y" {
+			return []string{"border-w-y", "border-w-t", "border-w-b"}
+		}
+		return []string{"border-w-" + side}
+	case core == "text-left" || core == "text-center" || core == "text-right" || core == "text-justify" || core == "text-start" || core == "text-end":
+		return []string{"text-align"}
+	case core == "rounded":
+		return []string{"rounded"}
+	case core == "shadow" || core == "shadow-none":
+		return []string{"shadow"}
+	case core == "flex-1" || core == "flex-auto" || core == "flex-none" || core == "flex-initial":
+		return []string{"flex-size", "flex-grow", "flex-shrink", "flex-basis"}
+	case core == "grow" || strings.HasPrefix(core, "grow-"):
+		return []string{"flex-grow"}
+	case core == "shrink" || core == "shrink-0":
+		return []string{"flex-shrink"}
+	}
+
+	if strings.HasPrefix(core, "size-") {
+		return []string{"size", "width", "height"}
+	}
+	if strings.HasPrefix(core, "w-") {
+		return []string{"width"}
+	}
+	if strings.HasPrefix(core, "h-") {
+		return []string{"height"}
+	}
+
+	if strings.HasPrefix(core, "p-") && !hasDirectionPrefix(core, "p") {
+		return []string{"padding", "padding-x", "padding-y", "padding-t", "padding-r", "padding-b", "padding-l", "padding-s", "padding-e"}
+	}
+	if g, ok := spaceAxis(core, "p"); ok {
+		return g
+	}
+	if strings.HasPrefix(core, "m-") && !hasDirectionPrefix(core, "m") {
+		return []string{"margin", "margin-x", "margin-y", "margin-t", "margin-r", "margin-b", "margin-l", "margin-s", "margin-e"}
+	}
+	if g, ok := spaceAxis(core, "m"); ok {
+		return g
+	}
+
+	if strings.HasPrefix(core, "bg-") {
+		return []string{"bg"}
+	}
+	if isTextSize(core) {
+		return []string{"text-size", "leading"}
+	}
+	if strings.HasPrefix(core, "text-") {
+		return []string{"text-color"}
+	}
+	if strings.HasPrefix(core, "font-") && isFontWeight(core) {
+		return []string{"font-weight"}
+	}
+	return nil
+}
+
+func prefixGroup(core string, prefixes [][2]string) (string, bool) {
+	for _, pair := range prefixes {
+		if strings.HasPrefix(core, pair[0]) {
+			return pair[1], true
+		}
+	}
+	return "", false
+}
+
+func hasDirectionPrefix(core, kind string) bool {
+	for _, dir := range []string{"x-", "y-", "t-", "r-", "b-", "l-", "s-", "e-"} {
+		if strings.HasPrefix(core, kind+dir) {
+			return true
+		}
+	}
+	return false
+}
+
+func spaceAxis(core, kind string) ([]string, bool) {
+	switch {
+	case strings.HasPrefix(core, kind+"x-"):
+		return []string{kindName(kind) + "-x", kindName(kind) + "-r", kindName(kind) + "-l", kindName(kind) + "-s", kindName(kind) + "-e"}, true
+	case strings.HasPrefix(core, kind+"y-"):
+		return []string{kindName(kind) + "-y", kindName(kind) + "-t", kindName(kind) + "-b"}, true
+	case strings.HasPrefix(core, kind+"t-"):
+		return []string{kindName(kind) + "-t"}, true
+	case strings.HasPrefix(core, kind+"r-"):
+		return []string{kindName(kind) + "-r"}, true
+	case strings.HasPrefix(core, kind+"b-"):
+		return []string{kindName(kind) + "-b"}, true
+	case strings.HasPrefix(core, kind+"l-"):
+		return []string{kindName(kind) + "-l"}, true
+	}
+	return nil, false
+}
+
+func kindName(kind string) string {
+	if kind == "p" {
+		return "padding"
+	}
+	return "margin"
+}
+
+func isTextSize(core string) bool {
+	switch core {
+	case "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "text-3xl", "text-4xl", "text-5xl", "text-6xl", "text-7xl", "text-8xl", "text-9xl":
+		return true
+	}
+	if strings.HasPrefix(core, "text-[") {
+		rest := strings.TrimPrefix(core, "text-[")
+		if rest == "" {
+			return false
+		}
+		return unicode.IsDigit(rune(rest[0])) || rest[0] == '.'
+	}
+	return false
+}
+
+func isFontWeight(core string) bool {
+	switch core {
+	case "font-thin", "font-extralight", "font-light", "font-normal", "font-medium", "font-semibold", "font-bold", "font-extrabold", "font-black":
+		return true
+	}
+	return false
+}
+
+// isNumber: a bare number (2, 0.5) or an arbitrary length ([3px])
+func isNumber(s string) bool {
+	if strings.HasPrefix(s, "[") {
+		return true
+	}
+	if s == "" {
+		return false
+	}
+	for _, c := range s {
+		if (c < '0' || c > '9') && c != '.' {
+			return false
+		}
+	}
+	return true
+}
diff --git a/generated/utils/cn_merge_test.go b/xgen/runtimes/templ/assets/go/cn_merge_test.go
similarity index 100%
rename from generated/utils/cn_merge_test.go
rename to xgen/runtimes/templ/assets/go/cn_merge_test.go
diff --git a/xgen/runtimes/templ/assets/go/dyn.go b/xgen/runtimes/templ/assets/go/dyn.go
new file mode 100644
index 0000000..f0b4874
--- /dev/null
+++ b/xgen/runtimes/templ/assets/go/dyn.go
@@ -0,0 +1,703 @@
+package uiutils
+
+// The dynamic values of the generated organisms: props, records and labels travel as `any` (JSON shapes: string,
+// float64, bool, nil, []any, map[string]any), read with the same rules as the TypeScript output (JS truthiness,
+// strict equality, String(), clsx + tailwind-merge for classes). Every helper is nil-safe, like `?.` in TypeScript.
+
+import (
+	"fmt"
+	"encoding/json"
+	"math"
+	"strconv"
+	"strings"
+
+	"github.com/a-h/templ"
+)
+
+// Get reads a path of fields: Get(plan, "price", "amount"); `length` of a list or a text is its size.
+func Get(v any, path ...string) any {
+	for _, k := range path {
+		switch x := v.(type) {
+		case map[string]any:
+			v = x[k]
+		case []any:
+			if k == "length" {
+				v = float64(len(x))
+			} else if i, err := strconv.Atoi(k); err == nil && i >= 0 && i < len(x) {
+				v = x[i]
+			} else {
+				return nil
+			}
+		case string:
+			if k != "length" {
+				return nil
+			}
+			v = float64(len([]rune(x)))
+		default:
+			return nil
+		}
+	}
+	return v
+}
+
+// num is the number of a value (int, float64), and whether it is one.
+func num(v any) (float64, bool) {
+	switch x := v.(type) {
+	case float64:
+		return x, true
+	case int:
+		return float64(x), true
+	case int64:
+		return float64(x), true
+	case float32:
+		return float64(x), true
+	}
+	return 0, false
+}
+
+// fmtNum is String(n) of JavaScript for the numbers the views print: 3, 2.5, -1.
+func fmtNum(f float64) string {
+	if math.IsNaN(f) {
+		return "NaN"
+	}
+	if f == math.Trunc(f) && math.Abs(f) < 1e21 {
+		return strconv.FormatFloat(f, 'f', -1, 64)
+	}
+	return strconv.FormatFloat(f, 'g', -1, 64)
+}
+
+// S is String(v) for a value read into a string slot; nil is the empty string.
+func S(v any) string {
+	switch x := v.(type) {
+	case nil:
+		return ""
+	case string:
+		return x
+	case bool:
+		if x {
+			return "true"
+		}
+		return "false"
+	}
+	if f, ok := num(v); ok {
+		return fmtNum(f)
+	}
+	b, _ := json.Marshal(v)
+	return string(b)
+}
+
+// Text is what a text node shows: React and Svelte print nothing for nil and booleans.
+func Text(v any) string {
+	if _, ok := v.(bool); ok {
+		return ""
+	}
+	return S(v)
+}
+
+// T is the truthiness of JavaScript: nil, false, 0, NaN and "" are false.
+func T(v any) bool {
+	switch x := v.(type) {
+	case nil:
+		return false
+	case bool:
+		return x
+	case string:
+		return x != ""
+	}
+	if f, ok := num(v); ok {
+		return f != 0 && !math.IsNaN(f)
+	}
+	return true
+}
+
+// N is Number(v): numbers as they are, numeric strings parsed, booleans 0 or 1, the rest 0.
+func N(v any) float64 {
+	if f, ok := num(v); ok {
+		return f
+	}
+	switch x := v.(type) {
+	case string:
+		f, err := strconv.ParseFloat(strings.TrimSpace(x), 64)
+		if err == nil {
+			return f
+		}
+	case bool:
+		if x {
+			return 1
+		}
+	}
+	return 0
+}
+
+// I is an int for an int prop of a brick (Size: 16).
+func I(v any) int { return int(math.Round(N(v))) }
+
+// Eq is strict equality (===) of two values.
+func Eq(a, b any) bool {
+	fa, okA := num(a)
+	fb, okB := num(b)
+	if okA || okB {
+		return okA && okB && fa == fb
+	}
+	switch x := a.(type) {
+	case nil:
+		return b == nil
+	case string:
+		y, ok := b.(string)
+		return ok && x == y
+	case bool:
+		y, ok := b.(bool)
+		return ok && x == y
+	}
+	return false
+}
+
+// Lt and friends compare numbers, or two texts by their code units.
+func cmp(a, b any) (int, bool) {
+	if x, ok := a.(string); ok {
+		if y, ok2 := b.(string); ok2 {
+			return strings.Compare(x, y), true
+		}
+	}
+	if a == nil || b == nil {
+		return 0, false
+	}
+	fa, fb := N(a), N(b)
+	switch {
+	case fa < fb:
+		return -1, true
+	case fa > fb:
+		return 1, true
+	}
+	return 0, true
+}
+func Lt(a, b any) bool { c, ok := cmp(a, b); return ok && c < 0 }
+func Gt(a, b any) bool { c, ok := cmp(a, b); return ok && c > 0 }
+func Le(a, b any) bool { c, ok := cmp(a, b); return ok && c <= 0 }
+func Ge(a, b any) bool { c, ok := cmp(a, b); return ok && c >= 0 }
+
+// Add is `a + b`: text when either side is text, else a sum.
+func Add(a, b any) any {
+	_, sa := a.(string)
+	_, sb := b.(string)
+	if sa || sb {
+		return S(a) + S(b)
+	}
+	return N(a) + N(b)
+}
+func Sub(a, b any) any { return N(a) - N(b) }
+func Mul(a, b any) any { return N(a) * N(b) }
+func Div(a, b any) any { return N(a) / N(b) }
+
+// And and Or keep the value of JavaScript: the first falsy (And) or truthy (Or) operand, else the last.
+func And(vs ...any) any {
+	var last any
+	for _, v := range vs {
+		if !T(v) {
+			return v
+		}
+		last = v
+	}
+	return last
+}
+func Or(vs ...any) any {
+	var last any
+	for _, v := range vs {
+		if T(v) {
+			return v
+		}
+		last = v
+	}
+	return last
+}
+
+// Coalesce is `a ?? b ?? c`.
+func Coalesce(vs ...any) any {
+	for _, v := range vs {
+		if v != nil {
+			return v
+		}
+	}
+	return nil
+}
+
+// Def is a prop with its default: the default when the prop is nil.
+func Def(v, d any) any {
+	if v == nil {
+		return d
+	}
+	return v
+}
+
+// Cond is `c ? a : b` (both sides are pure values, read eagerly).
+func Cond(c bool, a, b any) any {
+	if c {
+		return a
+	}
+	return b
+}
+
+// L is a list to range over; nil and other values are empty.
+func L(v any) []any {
+	switch x := v.(type) {
+	case []any:
+		return x
+	case []string:
+		out := make([]any, len(x))
+		for i, s := range x {
+			out[i] = s
+		}
+		return out
+	case []map[string]any:
+		out := make([]any, len(x))
+		for i, s := range x {
+			out[i] = s
+		}
+		return out
+	}
+	return nil
+}
+
+// Len is `x?.length ?? 0`.
+func Len(v any) any {
+	switch x := v.(type) {
+	case string:
+		return float64(len([]rune(x)))
+	case nil:
+		return float64(0)
+	}
+	return float64(len(L(v)))
+}
+
+// List is a literal array.
+func List(vs ...any) any { return vs }
+
+// Group is a literal object; Spread copies the fields of a named group first (`{ ...BASE, mode: "two" }`).
+func Spread(base any, fields map[string]any) any {
+	out := map[string]any{}
+	if m, ok := base.(map[string]any); ok {
+		for k, v := range m {
+			out[k] = v
+		}
+	}
+	for k, v := range fields {
+		out[k] = v
+	}
+	return out
+}
+
+// Str is String(x) with undefined kept undefined.
+func Str(v any) any {
+	if v == nil {
+		return nil
+	}
+	return S(v)
+}
+
+// Has is `x != null`.
+func Has(v any) bool { return v != nil }
+
+// Cnv is cn(...) over values: clsx skips the falsy ones, tailwind-merge resolves conflicts.
+func Cnv(vs ...any) string {
+	parts := make([]string, 0, len(vs))
+	for _, v := range vs {
+		if T(v) {
+			parts = append(parts, S(v))
+		}
+	}
+	return mergeTailwind(parts...)
+}
+
+// Tpl fills {0}, {1}... of a content template.
+func Tpl(t any, vals ...any) string {
+	s := S(t)
+	var b strings.Builder
+	for i := 0; i < len(s); i++ {
+		if s[i] == '{' {
+			j := i + 1
+			for j < len(s) && s[j] >= '0' && s[j] <= '9' {
+				j++
+			}
+			if j > i+1 && j < len(s) && s[j] == '}' {
+				n, _ := strconv.Atoi(s[i+1 : j])
+				if n < len(vals) {
+					b.WriteString(S(vals[n]))
+				}
+				i = j
+				continue
+			}
+		}
+		b.WriteByte(s[i])
+	}
+	return b.String()
+}
+
+// group writes the integer part of a number with en-US thousands separators.
+func group(f float64, decimals int) string {
+	s := strconv.FormatFloat(math.Abs(f), 'f', decimals, 64)
+	intPart, frac, _ := strings.Cut(s, ".")
+	var b strings.Builder
+	for i, c := range intPart {
+		if i > 0 && (len(intPart)-i)%3 == 0 {
+			b.WriteByte(',')
+		}
+		b.WriteRune(c)
+	}
+	out := b.String()
+	if frac != "" {
+		frac = strings.TrimRight(frac, "0")
+		if frac != "" {
+			out += "." + frac
+		}
+	}
+	if f < 0 && out != "0" {
+		out = "-" + out
+	}
+	return out
+}
+
+// Num is Intl.NumberFormat("en-US"): grouped, up to 3 decimals.
+func Num(v any) string { return group(N(v), 3) }
+
+var currencySymbols = map[string]string{"USD": "$", "EUR": "€", "GBP": "£", "JPY": "¥", "INR": "₹", "CAD": "CA$", "AUD": "A$"}
+
+// MinorDigits is the digits of the minor unit (ISO 4217): 2, or 0 for JPY and KRW.
+func MinorDigits(c string) int {
+	if c == "JPY" || c == "KRW" {
+		return 0
+	}
+	return 2
+}
+
+// Money formats integer minor units (Codex v0.4: 1250 = 12.50) like Intl.NumberFormat("en-US", {style: "currency"}),
+// without the fraction when the amount is whole: 149900 -> "$1,499", 1250 -> "$12.50".
+func Money(amount, currency any) string {
+	c := S(currency)
+	sym, ok := currencySymbols[c]
+	if !ok {
+		sym = c + "\u00a0"
+	}
+	minor := math.Round(N(amount))
+	sign := ""
+	if minor < 0 {
+		sign, minor = "-", -minor
+	}
+	d := MinorDigits(c)
+	unit := math.Pow(10, float64(d))
+	whole := math.Floor(minor / unit)
+	out := sign + sym + group(whole, 0)
+	if rest := minor - whole*unit; d > 0 && rest != 0 {
+		out += fmt.Sprintf(".%0*d", d, int(rest))
+	}
+	return out
+}
+
+// At is a content word by key, the key itself when the dictionary has no entry.
+func At(dict, key any) string {
+	if v := Get(dict, S(key)); v != nil {
+		return S(v)
+	}
+	return S(key)
+}
+
+// PageWindow is the pages a pager shows: the first, the last and the neighbours of the current one; nil is a gap.
+func PageWindow(pageV, pagesV any) any {
+	page, pages := int(N(pageV)), int(N(pagesV))
+	keep := map[int]bool{}
+	for _, n := range []int{1, pages, page - 1, page, page + 1} {
+		if n >= 1 && n <= pages {
+			keep[n] = true
+		}
+	}
+	out := []any{}
+	prev := 0
+	for n := 1; n <= pages; n++ {
+		if !keep[n] {
+			continue
+		}
+		if n-prev > 1 {
+			out = append(out, nil)
+		}
+		out = append(out, float64(n))
+		prev = n
+	}
+	return out
+}
+
+// FitCols caps a responsive column variant of Grid by the number of items: ("1-4", 3) -> "1-3".
+func FitCols(colsV, nV any) string {
+	cols, n := S(colsV), int(N(nV))
+	lo, hi, ok := strings.Cut(cols, "-")
+	l, e1 := strconv.Atoi(lo)
+	h, e2 := strconv.Atoi(hi)
+	if !ok || e1 != nil || e2 != nil {
+		return cols
+	}
+	if n >= h {
+		return cols
+	}
+	top := l
+	if n > top {
+		top = n
+	}
+	known := map[string]bool{"1-2": true, "1-3": true, "1-4": true, "2-3": true, "2-4": true, "2-6": true, "3-6": true}
+	for k := top; k > l; k-- {
+		if known[strconv.Itoa(l)+"-"+strconv.Itoa(k)] {
+			return strconv.Itoa(l) + "-" + strconv.Itoa(k)
+		}
+	}
+	m := n
+	if m < 1 {
+		m = 1
+	}
+	if l < m {
+		m = l
+	}
+	return strconv.Itoa(m)
+}
+
+// Uniq drops a segment of a ", " label equal (case-insensitive) to the one before it.
+func Uniq(v any) string {
+	parts := strings.Split(S(v), ", ")
+	out := make([]string, 0, len(parts))
+	for i, s := range parts {
+		if i == 0 || !strings.EqualFold(s, parts[i-1]) {
+			out = append(out, s)
+		}
+	}
+	return strings.Join(out, ", ")
+}
+
+// Words splits a text at its spaces.
+func Words(v any) any {
+	out := []any{}
+	for _, w := range strings.Split(S(v), " ") {
+		out = append(out, w)
+	}
+	return out
+}
+
+// Nbsp makes every space a no-break space.
+func Nbsp(v any) string { return strings.ReplaceAll(S(v), " ", "\u00a0") }
+
+// Nth is `list?.[i]`.
+func Nth(list, i any) any {
+	l := L(list)
+	n := int(N(i))
+	if n < 0 || n >= len(l) {
+		return nil
+	}
+	return l[n]
+}
+
+// Range is [0 .. n-1].
+func Range(n any) any {
+	out := []any{}
+	for i := 0; i < int(N(n)); i++ {
+		out = append(out, float64(i))
+	}
+	return out
+}
+
+func Max(vs ...any) any {
+	m := math.Inf(-1)
+	for _, v := range vs {
+		m = math.Max(m, N(v))
+	}
+	return m
+}
+func Min(vs ...any) any {
+	m := math.Inf(1)
+	for _, v := range vs {
+		m = math.Min(m, N(v))
+	}
+	return m
+}
+
+// Round is Math.round (halves up).
+func Round(v any) any { return math.Floor(N(v) + 0.5) }
+
+// Count is how many items have a truthy field.
+func Count(items, field any) any {
+	n := 0
+	for _, it := range L(items) {
+		if T(Get(it, S(field))) {
+			n++
+		}
+	}
+	return float64(n)
+}
+
+// Where keeps the items whose field equals the value; an empty value keeps all.
+func Where(items, field, value any) any {
+	if !T(value) {
+		return L(items)
+	}
+	out := []any{}
+	for _, it := range L(items) {
+		if Eq(Get(it, S(field)), value) {
+			out = append(out, it)
+		}
+	}
+	return out
+}
+
+// Match keeps the items whose text field contains the query, ignoring case; an empty query keeps all.
+func Match(items, field, query any) any {
+	if !T(query) {
+		return L(items)
+	}
+	q := strings.ToLower(S(query))
+	out := []any{}
+	for _, it := range L(items) {
+		if strings.Contains(strings.ToLower(S(Get(it, S(field)))), q) {
+			out = append(out, it)
+		}
+	}
+	return out
+}
+
+// Pick is the item whose id equals the value.
+func Pick(items, id any) any {
+	for _, it := range L(items) {
+		if Eq(Get(it, "id"), id) {
+			return it
+		}
+	}
+	return nil
+}
+
+// SumBy is the sum of a * b over the items.
+func SumBy(items any, a, b string) any {
+	s := 0.0
+	for _, it := range L(items) {
+		s += N(Get(it, a)) * N(Get(it, b))
+	}
+	return s
+}
+
+// FirstOf is a field of the first item, "" for none.
+func FirstOf(items any, field string) any {
+	l := L(items)
+	if len(l) == 0 {
+		return ""
+	}
+	return Coalesce(Get(l[0], field), "")
+}
+
+// MaxBy is the largest field of the items, 0 for none.
+func MaxBy(items any, field string) any {
+	m := 0.0
+	for _, it := range L(items) {
+		m = math.Max(m, N(Get(it, field)))
+	}
+	return m
+}
+
+// Css is an inline style from (property, value, unit) triples: "height:12px;width:50%".
+func Css(triples ...any) string {
+	parts := []string{}
+	for i := 0; i+2 < len(triples); i += 3 {
+		parts = append(parts, S(triples[i])+":"+S(triples[i+1])+S(triples[i+2]))
+	}
+	return strings.Join(parts, ";")
+}
+
+// Variant is a class string of a recipe table (shadcn/cva style): base, each key in order, the matching compounds.
+func Variant(r VariantRecipe, compound []map[string]string, sel map[string]any) string {
+	pick := func(k string) string {
+		if v := strings.TrimSpace(S(sel[k])); v != "" {
+			return v
+		}
+		return strings.TrimSpace(r.Defaults[k])
+	}
+	parts := []string{r.Base}
+	for _, k := range r.Keys {
+		parts = append(parts, r.ByKey[k][pick(k)])
+	}
+	for _, c := range compound {
+		ok := true
+		for k, want := range c {
+			if k == "class" {
+				continue
+			}
+			hit := false
+			for _, w := range strings.Split(want, "|") {
+				if w == pick(k) {
+					hit = true
+				}
+			}
+			ok = ok && hit
+		}
+		if ok {
+			parts = append(parts, c["class"])
+		}
+	}
+	keep := []string{}
+	for _, p := range parts {
+		if p = strings.TrimSpace(p); p != "" {
+			keep = append(keep, p)
+		}
+	}
+	return mergeTailwind(keep...)
+}
+
+// Recipe is a parsed recipe file with its compound variants.
+type Recipe struct {
+	VariantRecipe
+}
+
+// MustRecipe parses an embedded *.variants.json.
+func MustRecipe(data []byte) Recipe {
+	var r Recipe
+	if err := json.Unmarshal(data, &r); err != nil {
+		panic(err)
+	}
+	return r
+}
+
+// Of is the class string of a recipe for a selection.
+func (r Recipe) Of(sel map[string]any) string {
+	return Variant(r.VariantRecipe, r.VariantRecipe.Compound, sel)
+}
+
+// MustJSON parses embedded JSON into `any` (the kit presets).
+func MustJSON(data []byte) any {
+	var v any
+	if err := json.Unmarshal(data, &v); err != nil {
+		panic(err)
+	}
+	return v
+}
+
+// As converts a dynamic value into a typed one through JSON (the items of a brick: []BreadcrumbItem).
+func As[T any](v any) T {
+	var out T
+	b, err := json.Marshal(v)
+	if err == nil {
+		_ = json.Unmarshal(b, &out)
+	}
+	return out
+}
+
+// Attrs are free DOM attributes from (name, value) pairs, as React prints them: nil is left out, a boolean of a
+// data-* or aria-* attribute is its text, a boolean of another attribute is present or absent, a number is its text.
+func Attrs(kv ...any) templ.Attributes {
+	out := templ.Attributes{}
+	for i := 0; i+1 < len(kv); i += 2 {
+		k, v := S(kv[i]), kv[i+1]
+		switch x := v.(type) {
+		case nil:
+			continue
+		case bool:
+			if strings.HasPrefix(k, "data-") || strings.HasPrefix(k, "aria-") {
+				out[k] = S(x)
+			} else if x {
+				out[k] = true
+			}
+		default:
+			out[k] = S(v)
+		}
+	}
+	return out
+}
diff --git a/generated/utils/expr.go b/xgen/runtimes/templ/assets/go/expr.go
similarity index 100%
rename from generated/utils/expr.go
rename to xgen/runtimes/templ/assets/go/expr.go
diff --git a/generated/utils/heading.go b/xgen/runtimes/templ/assets/go/heading.go
similarity index 100%
rename from generated/utils/heading.go
rename to xgen/runtimes/templ/assets/go/heading.go
diff --git a/generated/utils/tags.go b/xgen/runtimes/templ/assets/go/tags.go
similarity index 100%
rename from generated/utils/tags.go
rename to xgen/runtimes/templ/assets/go/tags.go
diff --git a/xgen/runtimes/templ/assets/go/utils.go b/xgen/runtimes/templ/assets/go/utils.go
new file mode 100644
index 0000000..add7979
--- /dev/null
+++ b/xgen/runtimes/templ/assets/go/utils.go
@@ -0,0 +1,90 @@
+// Package uiutils holds shared Go helpers for generated UI8Kit bricks.
+package uiutils
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/a-h/templ"
+)
+
+// Variants groups a base utility chain and keyed variant maps (cva-style).
+type Variants struct {
+	Base     string
+	Keys     []string
+	ByKey    map[string]map[string]string
+	Defaults map[string]string
+	Compound []map[string]string
+}
+
+// Compose merges Base, variant selections, and optional tail classes.
+func Compose(v Variants, selection map[string]string, extra ...string) string {
+	var parts []string
+	if strings.TrimSpace(v.Base) != "" {
+		parts = append(parts, strings.TrimSpace(v.Base))
+	}
+	for _, key := range v.Keys {
+		choices, ok := v.ByKey[key]
+		if !ok {
+			continue
+		}
+		choice := strings.TrimSpace(selection[key])
+		if choice == "" {
+			choice = strings.TrimSpace(v.Defaults[key])
+		}
+		if choice == "" {
+			if len(choices) > 0 {
+				panic(fmt.Sprintf("[Compose] missing default for key %q", key))
+			}
+			continue
+		}
+		if cls, ok2 := choices[choice]; ok2 {
+			if strings.TrimSpace(cls) != "" {
+				parts = append(parts, cls)
+			}
+		}
+		// Unknown choices are silently dropped to avoid leaking typos into
+		// the DOM as literal class names.
+	}
+	for _, c := range v.Compound {
+		ok := true
+		for k, want := range c {
+			if k == "class" {
+				continue
+			}
+			got := strings.TrimSpace(selection[k])
+			if got == "" {
+				got = strings.TrimSpace(v.Defaults[k])
+			}
+			hit := false
+			for _, w := range strings.Split(want, "|") {
+				if w == got {
+					hit = true
+				}
+			}
+			ok = ok && hit
+		}
+		if ok && strings.TrimSpace(c["class"]) != "" {
+			parts = append(parts, c["class"])
+		}
+	}
+	parts = append(parts, extra...)
+	return Cn(parts...)
+}
+
+// Cn joins class fragments and resolves Tailwind conflicts (last class wins),
+// matching the JS `cn` = clsx + tailwind-merge used by HostingPanel kit.
+func Cn(classes ...string) string {
+	return mergeTailwind(classes...)
+}
+
+// MergeAttrs merges attribute maps left to right.
+func MergeAttrs(parts ...templ.Attributes) templ.Attributes {
+	out := templ.Attributes{}
+	for _, attrs := range parts {
+		for k, v := range attrs {
+			out[k] = v
+		}
+	}
+	return out
+}
diff --git a/xgen/runtimes/templ/assets/go/variants_json.go b/xgen/runtimes/templ/assets/go/variants_json.go
new file mode 100644
index 0000000..f6378c1
--- /dev/null
+++ b/xgen/runtimes/templ/assets/go/variants_json.go
@@ -0,0 +1,49 @@
+package uiutils
+
+import (
+	"encoding/json"
+	"fmt"
+)
+
+// VariantRecipe is the JSON shape for *.variants.json (shared with React CVA recipes).
+type VariantRecipe struct {
+	ID       string                       `json:"id"`
+	Base     string                       `json:"base"`
+	Keys     []string                     `json:"keys"`
+	Defaults map[string]string            `json:"defaults"`
+	ByKey    map[string]map[string]string `json:"byKey"`
+	Meta     map[string]string            `json:"meta,omitempty"`
+	Compound []map[string]string          `json:"compound,omitempty"`
+}
+
+// ToVariants converts a recipe into the in-memory CVA map used by Compose.
+func (r VariantRecipe) ToVariants() Variants {
+	return Variants{
+		Base:     r.Base,
+		Keys:     r.Keys,
+		ByKey:    r.ByKey,
+		Defaults: r.Defaults,
+		Compound: r.Compound,
+	}
+}
+
+// ParseVariantRecipe unmarshals *.variants.json bytes.
+func ParseVariantRecipe(data []byte) (VariantRecipe, error) {
+	var recipe VariantRecipe
+	if err := json.Unmarshal(data, &recipe); err != nil {
+		return VariantRecipe{}, fmt.Errorf("variants JSON: %w", err)
+	}
+	if recipe.ByKey == nil {
+		return VariantRecipe{}, fmt.Errorf("variants JSON: missing byKey")
+	}
+	return recipe, nil
+}
+
+// MustParseVariantRecipe parses recipe JSON or panics (for generated init blocks).
+func MustParseVariantRecipe(data []byte) VariantRecipe {
+	recipe, err := ParseVariantRecipe(data)
+	if err != nil {
+		panic(err)
+	}
+	return recipe
+}
diff --git a/xgen/runtimes/templ/package.json b/xgen/runtimes/templ/package.json
new file mode 100644
index 0000000..32ca8df
--- /dev/null
+++ b/xgen/runtimes/templ/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ui8kit/xgen-runtime-templ",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Go templ emitter: bricks as .templ components with typed props structs, Go runtime helpers (cn with tailwind merge, variants, tags).",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-spec": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*",
+    "@ui8kit/xgen-runtime-core": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/src/emitters/go-expr.ts b/xgen/runtimes/templ/src/go-expr.ts
similarity index 97%
rename from src/emitters/go-expr.ts
rename to xgen/runtimes/templ/src/go-expr.ts
index 6d7b7b6..51bce32 100644
--- a/src/emitters/go-expr.ts
+++ b/xgen/runtimes/templ/src/go-expr.ts
@@ -3,8 +3,8 @@
  * generic helpers shipped in the generated `utils` package (`expr.go`).
  */
 
-import type { Expr } from "../domain/expr";
-import { exprType, type TypeEnv } from "./common";
+import type { Expr } from "@ui8kit/xgen-spec";
+import { exprType, type TypeEnv } from "@ui8kit/xgen-runtime-core";
 
 export interface GoPrintCtx {
   env: TypeEnv;
diff --git a/src/emitters/go-harness.ts b/xgen/runtimes/templ/src/go-harness.ts
similarity index 92%
rename from src/emitters/go-harness.ts
rename to xgen/runtimes/templ/src/go-harness.ts
index 955d5a3..2070327 100644
--- a/src/emitters/go-harness.ts
+++ b/xgen/runtimes/templ/src/go-harness.ts
@@ -5,19 +5,20 @@
  * loop across all four runtimes.
  */
 
-import { fileStem, type BrickDef } from "../domain/model";
-import { BANNER, type GeneratedFile } from "./common";
+import { fileStem, type BrickDef } from "@ui8kit/xgen-spec";
+import { BANNER, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+import { goPackageOf } from "./templ";
 
 export function emitGoParityHarness(bricks: BrickDef[], goModule: string): GeneratedFile {
   const imports = new Map<string, string>(); // alias -> import path
   for (const brick of bricks) {
-    const alias = (brick.goPackage ?? brick.dir).replace(/-/g, "");
+    const alias = goPackageOf(brick);
     imports.set(alias, `${goModule}/ui/${brick.dir}`);
   }
 
   const cases: string[] = [];
   for (const brick of bricks) {
-    const alias = (brick.goPackage ?? brick.dir).replace(/-/g, "");
+    const alias = goPackageOf(brick);
     for (const part of brick.parts) {
       const key = `${brick.dir}/${fileStem(brick)}/${part.name}`;
       const hasChildren = part.props.some((p) => p.type === "children");
diff --git a/xgen/runtimes/templ/src/index.ts b/xgen/runtimes/templ/src/index.ts
new file mode 100644
index 0000000..d654456
--- /dev/null
+++ b/xgen/runtimes/templ/src/index.ts
@@ -0,0 +1,7 @@
+export * from "./templ";
+export * from "./go-expr";
+export * from "./go-harness";
+/** the Go module of the generated templ package and the templ version it requires */
+export const TEMPL_MODULE = "github.com/ui8kit/codegen/packages/templ/ui";
+export const TEMPL_VERSION = "v0.3.1070";
+export * from "./organism";
diff --git a/xgen/runtimes/templ/src/organism.ts b/xgen/runtimes/templ/src/organism.ts
new file mode 100644
index 0000000..3429914
--- /dev/null
+++ b/xgen/runtimes/templ/src/organism.ts
@@ -0,0 +1,317 @@
+// Go templ output of the organisms (blocks, components, parts, patterns): one .templ file each in the `blocks` package.
+// Values are dynamic (`any`, the JSON shapes) and read with the helpers of utils/dyn.go, which follow the rules of the
+// TypeScript output (truthiness, ===, String(), cn). Events are left out: the templ output is static HTML.
+import type { OrganismSpec, Value, ViewNode, SlotFill } from "@ui8kit/xgen-screens";
+import { fileName, isGroup, isOp, isRef } from "@ui8kit/xgen-screens";
+import type { PartDef } from "@ui8kit/xgen-spec";
+import { BANNER, pascalCase, type GeneratedFile, type PartRef } from "@ui8kit/xgen-runtime-core";
+import { goPackageOf } from "./templ";
+
+export interface OrgDeps {
+  parts: Record<string, PartRef>;
+  organisms: Record<string, OrganismSpec>;
+  goModule: string;
+}
+
+const goIdent = (name: string): string => name.replace(/[^A-Za-z0-9_]/g, "_");
+/** a local of the view: v + PascalCase (no clash with Go keywords or helpers) */
+const local = (name: string): string => `v${goIdent(name.charAt(0).toUpperCase() + name.slice(1))}`;
+/** an exported Go field of a prop: title -> Title */
+export const field = (name: string): string => (name === "className" ? "Class" : goIdent(name.charAt(0).toUpperCase() + name.slice(1)));
+const lit = (s: string): string => JSON.stringify(s);
+const pad = (lines: string[]): string[] => lines.map((l) => (l ? `\t${l}` : l));
+
+/** the heads of the references in a subtree (event handlers left out) */
+export function refHeads(x: unknown, out = new Set<string>()): Set<string> {
+  if (Array.isArray(x)) x.forEach((y) => refHeads(y, out));
+  else if (x && typeof x === "object") {
+    const o = x as Record<string, unknown>;
+    if (typeof o.$ === "string") out.add(o.$.split(".")[0]!);
+    for (const [k, v] of Object.entries(o)) if (k !== "on") refHeads(v, out);
+  }
+  return out;
+}
+
+interface Ctx {
+  org: OrganismSpec;
+  deps: OrgDeps;
+  /** names in scope -> Go code (locals, loop variables, slot arguments) */
+  scope: Map<string, string>;
+  imports: Set<string>;
+  fills: string[];
+  recipes: Set<string>;
+  presets: Set<string>;
+  inFill: boolean;
+}
+
+const constVar = (org: OrganismSpec, name: string): string => `${org.name.charAt(0).toLowerCase()}${org.name.slice(1)}${pascalCase(name.toLowerCase().replace(/_/g, "-"))}`;
+export const recipeVar = (file: string): string => `recipe${pascalCase(file)}`;
+export const presetVar = (name: string): string => `preset${pascalCase(name)}`;
+
+export function printGo(v: Value, c: Ctx): string {
+  if (v === null || v === undefined) return "nil";
+  if (typeof v === "string") return lit(v);
+  if (typeof v === "number") return Number.isInteger(v) ? `float64(${v})` : String(v);
+  if (typeof v === "boolean") return String(v);
+  if (isRef(v)) {
+    const [head, ...rest] = v.$.split(".");
+    let base: string;
+    if (c.scope.has(head!)) base = c.scope.get(head!)!;
+    else if (head === "className") base = "p.Class";
+    else if (c.org.consts?.[head!]) base = constVar(c.org, head!);
+    else throw new Error(`${c.org.name}: unknown name ${head}`);
+    return rest.length ? `uiutils.Get(${base}, ${rest.map(lit).join(", ")})` : base;
+  }
+  if (isGroup(v)) {
+    const entries = Object.entries(v).filter(([k]) => k !== "...");
+    const map = `map[string]any{${entries.map(([k, x]) => `${lit(k)}: ${printGo(x, c)}`).join(", ")}}`;
+    return "..." in v ? `uiutils.Spread(${printGo(v["..."]!, c)}, ${map})` : map;
+  }
+  if (!isOp(v)) throw new Error(`${c.org.name}: unknown value ${JSON.stringify(v)}`);
+  const a = (i: number): string => printGo(v.args[i]!, c);
+  const all = (): string => v.args.map((x) => printGo(x, c)).join(", ");
+  const str = (i: number): string => lit(String(v.args[i]));
+  switch (v.op) {
+    case "eq": return `uiutils.Eq(${a(0)}, ${a(1)})`;
+    case "ne": return `!uiutils.Eq(${a(0)}, ${a(1)})`;
+    case "not": return `!uiutils.T(${a(0)})`;
+    case "and": return `uiutils.And(${all()})`;
+    case "or": return `uiutils.Or(${all()})`;
+    case "gt": return `uiutils.Gt(${a(0)}, ${a(1)})`;
+    case "lt": return `uiutils.Lt(${a(0)}, ${a(1)})`;
+    case "ge": return `uiutils.Ge(${a(0)}, ${a(1)})`;
+    case "le": return `uiutils.Le(${a(0)}, ${a(1)})`;
+    case "add": return `uiutils.Add(${a(0)}, ${a(1)})`;
+    case "sub": return `uiutils.Sub(${a(0)}, ${a(1)})`;
+    case "mul": return `uiutils.Mul(${a(0)}, ${a(1)})`;
+    case "div": return `uiutils.Div(${a(0)}, ${a(1)})`;
+    case "max": return `uiutils.Max(${all()})`;
+    case "min": return `uiutils.Min(${all()})`;
+    case "round": return `uiutils.Round(${a(0)})`;
+    case "coalesce": return `uiutils.Coalesce(${all()})`;
+    case "cn": return `uiutils.Cnv(${all()})`;
+    case "str": return `uiutils.Str(${a(0)})`;
+    case "has": return `uiutils.Has(${a(0)})`;
+    case "undef": return "nil";
+    case "range": return `uiutils.Range(${a(0)})`;
+    case "cond": return `uiutils.Cond(uiutils.T(${a(0)}), ${a(1)}, ${a(2)})`;
+    case "len": return `uiutils.Len(${a(0)})`;
+    case "words": return `uiutils.Words(${a(0)})`;
+    case "nbsp": return `uiutils.Nbsp(${a(0)})`;
+    case "nth": return `uiutils.Nth(${a(0)}, ${a(1)})`;
+    case "list": return `uiutils.List(${all()})`;
+    case "tpl": return `uiutils.Tpl(${all()})`;
+    case "money": return `uiutils.Money(${a(0)}, ${a(1)})`;
+    case "num": return `uiutils.Num(${a(0)})`;
+    case "at": return `uiutils.At(${a(0)}, ${a(1)})`;
+    case "pageWindow": return `uiutils.PageWindow(${a(0)}, ${a(1)})`;
+    case "fitCols": return `uiutils.FitCols(${a(0)}, ${a(1)})`;
+    case "uniq": return `uiutils.Uniq(${a(0)})`;
+    case "count": return `uiutils.Count(${a(0)}, ${a(1)})`;
+    case "where": return `uiutils.Where(${a(0)}, ${a(1)}, ${a(2)})`;
+    case "match": return `uiutils.Match(${a(0)}, ${a(1)}, ${a(2)})`;
+    case "pick": return `uiutils.Pick(${a(0)}, ${a(1)})`;
+    case "sumBy": return `uiutils.SumBy(${a(0)}, ${str(1)}, ${str(2)})`;
+    case "firstOf": return `uiutils.FirstOf(${a(0)}, ${str(1)})`;
+    case "maxBy": return `uiutils.MaxBy(${a(0)}, ${str(1)})`;
+    case "css": return `uiutils.Css(${all()})`;
+    case "preset": {
+      c.presets.add(String(v.args[0]));
+      return `uiutils.Get(${presetVar(String(v.args[0]))}, ${String(v.args[1]).split(".").map(lit).join(", ")})`;
+    }
+    case "recipe": {
+      const [name, ...rest] = v.args;
+      const file = c.org.recipes?.[String(name)];
+      if (!file) throw new Error(`${c.org.name}: recipe ${String(name)} not declared`);
+      c.recipes.add(file);
+      const pairs: string[] = [];
+      for (let i = 0; i + 1 < rest.length; i += 2) pairs.push(`${lit(String(rest[i]))}: ${printGo(rest[i + 1]!, c)}`);
+      return `${recipeVar(file)}.Of(map[string]any{${pairs.join(", ")}})`;
+    }
+  }
+  throw new Error(`${c.org.name}: op ${v.op} has no Go form`);
+}
+
+const cond = (v: Value, c: Ctx): string => {
+  const g = printGo(v, c);
+  return /^(!?uiutils\.(Eq|Lt|Gt|Le|Ge|Has)\(|!uiutils\.T\()/.test(g) && !g.includes("), uiutils") ? g : `uiutils.T(${g})`;
+};
+
+/** a value for a typed field of a brick prop */
+function brickField(part: PartDef, name: string, v: Value, c: Ctx): string {
+  const d = part.props.find((p) => p.name === name);
+  if (!d) throw new Error(`${c.org.name}: ${part.name} has no prop ${name}`);
+  const g = printGo(v, c);
+  if (d.goType === "uiutils.HeadingLevel") return `uiutils.HeadingLevel(uiutils.I(${g}))`;
+  switch (d.type) {
+    case "string": return typeof v === "string" ? g : `uiutils.S(${g})`;
+    case "bool": return typeof v === "boolean" ? g : `uiutils.T(${g})`;
+    case "int": return typeof v === "number" ? String(Math.round(v)) : `uiutils.I(${g})`;
+    case "items": c.imports.add(goPackageOf(c.deps.parts[part.name]!.brick)); return `uiutils.As[[]${goPackageOf(c.deps.parts[part.name]!.brick)}.${d.itemsOf}](${g})`;
+    default: throw new Error(`${c.org.name}: ${part.name}.${name} of type ${d.type} cannot take a value`);
+  }
+}
+
+function block(head: string, body: string[]): string[] {
+  return body.length ? [`${head} {`, ...pad(body), "}"] : [head];
+}
+
+function walk(nodes: ViewNode[], c: Ctx): string[] {
+  return nodes.flatMap((n) => node(n, c));
+}
+
+function withScope<T>(c: Ctx, names: Array<[string, string]>, f: () => T): T {
+  const prev = new Map(c.scope);
+  for (const [k, v] of names) c.scope.set(k, v);
+  try { return f(); } finally { c.scope = prev; }
+}
+
+function node(n: ViewNode, c: Ctx): string[] {
+  if ("use" in n) {
+    const ref = c.deps.parts[n.use];
+    if (!ref) throw new Error(`${c.org.name}: unknown part ${n.use}`);
+    const pkg = goPackageOf(ref.brick);
+    c.imports.add(pkg);
+    const fields: string[] = [];
+    for (const [k, v] of Object.entries(n.props ?? {})) {
+      if (k === "Class" && v === "") continue;
+      fields.push(`${k}: ${brickField(ref.part, k, v, c)}`);
+    }
+    const attrs = Object.entries(n.attrs ?? {});
+    if (attrs.length) {
+      const ap = ref.part.props.find((p) => p.type === "attrs");
+      if (!ap) throw new Error(`${c.org.name}: ${n.use} takes no free attributes`);
+      fields.push(`${ap.name}: uiutils.Attrs(${attrs.map(([k, v]) => `${lit(k)}, ${printGo(v, c)}`).join(", ")})`);
+    }
+    const call = `@${pkg}.${ref.part.name}(${pkg}.${ref.part.name}Props{${fields.join(", ")}})`;
+    return block(call, walk(n.children ?? [], c));
+  }
+  if ("text" in n) return [`{ uiutils.Text(${printGo(n.text, c)}) }`];
+  if ("when" in n) {
+    const out: string[] = [];
+    let at: ViewNode | undefined = n;
+    let first = true;
+    while (at && "when" in at) {
+      out.push(`${first ? "" : "} else "}if ${cond(at.when, c)} {`, ...pad(walk(at.then, c)));
+      first = false;
+      const other: ViewNode[] = at.else ?? [];
+      if (other.length === 1 && "when" in other[0]!) at = other[0];
+      else { if (other.length) out.push("} else {", ...pad(walk(other, c))); at = undefined; }
+    }
+    out.push("}");
+    return out;
+  }
+  if ("each" in n) {
+    const used = refHeads(n.do);
+    const as = used.has(n.as) ? local(n.as) : "_";
+    const idx = n.index && used.has(n.index) ? local(n.index) : "_";
+    const names: Array<[string, string]> = [[n.as, local(n.as)], ...(n.index ? [[n.index, `float64(${local(n.index)})`] as [string, string]] : [])];
+    const body = withScope(c, names, () => walk(n.do, c));
+    const head = as === "_" && idx === "_" ? "for range" : as === "_" ? `for ${idx} := range` : `for ${idx}, ${as} := range`;
+    return [`${head} uiutils.L(${printGo(n.each, c)}) {`, ...pad(body), "}"];
+  }
+  if ("slot" in n) {
+    if (n.slot === "children") {
+      if (c.inFill) throw new Error(`${c.org.name}: children rendered inside a slot fill`);
+      return ["{ children... }"];
+    }
+    const decl = c.org.slots.find((s) => s.name === n.slot);
+    if (!decl) throw new Error(`${c.org.name}: unknown slot ${n.slot}`);
+    const args = (n.args ?? []).map((a) => printGo(a, c));
+    return [`if p.${field(n.slot)} != nil {`, decl.args.length ? `\t@p.${field(n.slot)}(${args.join(", ")})` : `\t@p.${field(n.slot)}`, "}"];
+  }
+  if ("organism" in n) {
+    const other = c.deps.organisms[n.organism];
+    if (!other) throw new Error(`${c.org.name}: unknown organism ${n.organism}`);
+    const fields: string[] = [];
+    for (const [k, v] of Object.entries(n.props ?? {})) fields.push(`${field(k)}: ${k === "className" ? `uiutils.Cnv(${printGo(v, c)})` : printGo(v, c)}`);
+    let children: string[] = [];
+    for (const [name, sl] of Object.entries(n.slots ?? {})) {
+      if (sl.forward !== undefined) {
+        if (name === "children") children = sl.forward === "children" ? ["{ children... }"] : [`if p.${field(sl.forward)} != nil {`, `\t@p.${field(sl.forward)}`, "}"];
+        else fields.push(`${field(name)}: p.${field(sl.forward)}`);
+        continue;
+      }
+      if (name === "children") { children = walk(sl.do, c); continue; }
+      const decl = other.slots.find((s) => s.name === name);
+      if (!decl) throw new Error(`${c.org.name}: ${n.organism} has no slot ${name}`);
+      fields.push(`${field(name)}: ${fill(sl, decl.args.length, c)}`);
+    }
+    return block(`@${n.organism}(${n.organism}Props{${fields.join(", ")}})`, children);
+  }
+  return [];
+}
+
+/** a slot fill as its own templ function: the names it reads from the scope and the slot arguments are its parameters */
+function fill(sl: SlotFill, arity: number, c: Ctx): string {
+  const used = refHeads(sl.do);
+  const captured = [...c.scope.entries()].filter(([k]) => used.has(k) && !sl.args.includes(k));
+  const name = `${c.org.name.charAt(0).toLowerCase()}${c.org.name.slice(1)}Fill${c.fills.length + 1}`;
+  c.fills.push("");
+  const at = c.fills.length - 1;
+  const params = [`p ${c.org.name}Props`, ...captured.map(([k]) => `${local(k)} any`), ...sl.args.map((a) => `${local(a)} any`)];
+  const prevFill = c.inFill;
+  c.inFill = true;
+  const body = withScope(c, [...captured.map(([k]) => [k, local(k)] as [string, string]), ...sl.args.map((a) => [a, local(a)] as [string, string])], () => walk(sl.do, c));
+  c.inFill = prevFill;
+  c.fills[at] = [`templ ${name}(${params.join(", ")}) {`, ...pad(body), "}"].join("\n");
+  const pass = ["p", ...captured.map(([, code]) => code)];
+  if (!arity) return `${name}(${pass.join(", ")})`;
+  return `func(args ...any) templ.Component { return ${name}(${[...pass, ...sl.args.map((_, i) => `uiutils.Nth(args, ${i})`)].join(", ")}) }`;
+}
+
+export function emitTemplOrganism(org: OrganismSpec, deps: OrgDeps): { file: GeneratedFile; recipes: Set<string>; presets: Set<string> } {
+  const c: Ctx = { org, deps, scope: new Map(), imports: new Set(), fills: [], recipes: new Set(), presets: new Set(), inFill: false };
+  const used = refHeads([org.view, org.derived ?? []]);
+  const top: string[] = [];
+  for (const p of org.props) {
+    if (!used.has(p.name)) continue;
+    top.push(`{{ ${local(p.name)} := ${p.default !== undefined ? `uiutils.Def(p.${field(p.name)}, ${printGo(p.default as Value, c)})` : `p.${field(p.name)}`} }}`);
+    c.scope.set(p.name, local(p.name));
+  }
+  // a slot read as a value is whether it was given (`when: actions`)
+  for (const sl of org.slots) if (used.has(sl.name)) c.scope.set(sl.name, `(p.${field(sl.name)} != nil)`);
+  for (const d of org.derived ?? []) {
+    if (!used.has(d.name)) continue;
+    top.push(`{{ ${local(d.name)} := any(${printGo(d.value, c)}) }}`);
+    c.scope.set(d.name, local(d.name));
+  }
+  const body = walk(org.view, c);
+  const structFields = [
+    ...org.props.map((p) => `\t${field(p.name)} any \`json:"${p.name}"\``),
+    ...(org.className ? ["\tClass string `json:\"className\"`"] : []),
+    ...org.slots.map((s) => `\t${field(s.name)} ${s.args.length ? "func(args ...any) templ.Component" : "templ.Component"} \`json:"-"\``),
+  ];
+  const consts = Object.entries(org.consts ?? {}).map(([name, table]) =>
+    `var ${constVar(org, name)} = map[string]any{\n${Object.entries(table).map(([k, v]) => `\t${lit(k)}: ${lit(v)},`).join("\n")}\n}`);
+  const imports = [...c.imports].sort().map((pkg) => {
+    const brick = Object.values(deps.parts).find((r) => goPackageOf(r.brick) === pkg)!.brick;
+    const path = `${deps.goModule}/ui/${brick.dir}`;
+    return path.endsWith(`/${pkg}`) ? `\t"${path}"` : `\t${pkg} "${path}"`;
+  });
+  const docs = org.docs.split("\n").map((l) => `// ${l}`.trimEnd());
+  const contents = [
+    `// ${BANNER}`,
+    ``,
+    `package blocks`,
+    ``,
+    `import (`,
+    ...imports,
+    `\tuiutils "${deps.goModule}/utils"`,
+    `)`,
+    ``,
+    `// ${org.name}Props are the props of ${org.name}; the values are the JSON shapes of the TypeScript props.`,
+    `type ${org.name}Props struct {`,
+    ...structFields,
+    `}`,
+    ...(consts.length ? ["", ...consts] : []),
+    ``,
+    ...docs,
+    `templ ${org.name}(p ${org.name}Props) {`,
+    ...pad([...top, ...body]),
+    `}`,
+    ...c.fills.flatMap((f) => ["", f]),
+    ``,
+  ].join("\n");
+  return { file: { path: `blocks/${fileName(org.name)}.templ`, contents }, recipes: c.recipes, presets: c.presets };
+}
diff --git a/xgen/runtimes/templ/src/templ.ts b/xgen/runtimes/templ/src/templ.ts
new file mode 100644
index 0000000..9ff26ef
--- /dev/null
+++ b/xgen/runtimes/templ/src/templ.ts
@@ -0,0 +1,448 @@
+/**
+ * Go Templ emitter — one `<stem>.templ` per brick (props structs, exported
+ * `<Part>Classes` helpers, templ components) plus `<stem>_gen.go` embedding
+ * the shared `*.variants.json` recipes.
+ */
+
+import { walkExpr, type Expr } from "@ui8kit/xgen-spec";
+import {
+  fileStem,
+  walkNodes,
+  type AttrSpec,
+  type BrickDef,
+  type ClassSpec,
+  type ElementNode,
+  type Node,
+  type PartDef,
+} from "@ui8kit/xgen-spec";
+import { allowedTags } from "@ui8kit/xgen-spec";
+import {
+  BANNER,
+  exprType,
+  foldResolvedTag,
+  indent,
+  makeEnv,
+  lowerFirst,
+  pascalCase,
+  type Emitter,
+  type GeneratedFile,
+  type TypeEnv,
+} from "@ui8kit/xgen-runtime-core";
+import { goImportsFor, printGoExpr, type GoPrintCtx } from "./go-expr";
+import { classSpecProps, neverEmptyString } from "@ui8kit/xgen-runtime-core";
+
+const HEADING_TAGS = ["h1", "h3", "h4", "h5", "h6"]; // h2 is the default case
+
+export interface TemplOptions {
+  /** Go module root for generated imports. */
+  goModule: string;
+}
+
+export class TemplEmitter implements Emitter {
+  readonly runtime = "templ" as const;
+
+  constructor(private readonly options: TemplOptions) {}
+
+  emit(brick: BrickDef): GeneratedFile[] {
+    const stem = fileStem(brick);
+    const pkg = goPackageOf(brick);
+
+    const bodyParts: string[] = [];
+    const extraImports = new Set<string>();
+
+    // Record types.
+    for (const record of brick.recordTypes ?? []) {
+      const fields = record.fields.map((f) => {
+        const doc = f.docs ? `\t// ${f.docs}\n` : "";
+        return `${doc}\t${f.name} ${f.type === "string" ? "string" : "bool"}`;
+      });
+      bodyParts.push(`// ${record.name} is one ${record.name} entry.\ntype ${record.name} struct {\n${fields.join("\n")}\n}`);
+    }
+
+    for (const part of brick.parts) {
+      const env: TypeEnv = makeEnv(brick, part);
+      collectGoImports(brick, part, extraImports);
+      bodyParts.push(this.emitPropsStruct(part));
+      if (part.classes) bodyParts.push(this.emitClassesFunc(brick, part, env));
+      for (const [name, expr] of Object.entries(part.derived ?? {})) {
+        bodyParts.push(this.emitDerivedFunc(brick, part, env, name, expr));
+      }
+      bodyParts.push(this.emitComponent(brick, part, env));
+    }
+
+    const header: string[] = [];
+    header.push(`// ${BANNER}`);
+    header.push(``);
+    header.push(`/*`);
+    for (const line of brick.docs.split("\n")) header.push(line);
+    header.push(`*/`);
+    header.push(``);
+    header.push(`package ${pkg}`);
+    header.push(``);
+    const imports = [...extraImports].sort().map((i) => `\t"${i}"`);
+    header.push(`import (`);
+    for (const imp of imports) header.push(imp);
+    if (imports.length > 0) header.push(``);
+    header.push(`\tuiutils "${this.options.goModule}/utils"`);
+    header.push(`)`);
+
+    const templFile: GeneratedFile = {
+      path: `ui/${brick.dir}/${stem}.templ`,
+      contents: [header.join("\n"), "", bodyParts.join("\n\n"), ""].join("\n"),
+    };
+
+    if (Object.keys(brick.recipeFiles).length === 0) return [templFile];
+    // the recipes travel next to the package (go:embed reads only files of its own folder)
+    const recipes = Object.entries(brick.recipeFiles).map(([id, file]) => ({
+      path: `ui/${brick.dir}/${file}`,
+      contents: JSON.stringify(brick.recipes[id], null, 2) + "\n",
+    }));
+    return [templFile, this.emitGenFile(brick, pkg, stem), ...recipes];
+  }
+
+  // -------------------------------------------------------------------------
+  // Go declarations
+  // -------------------------------------------------------------------------
+
+  private goType(part: PartDef, propName: string): string {
+    const p = part.props.find((x) => x.name === propName)!;
+    if (p.goType) return p.goType;
+    switch (p.type) {
+      case "string":
+        return "string";
+      case "bool":
+        return "bool";
+      case "int":
+        return "int";
+      case "items":
+        return `[]${p.itemsOf}`;
+      case "attrs":
+        return "templ.Attributes";
+      default:
+        throw new Error(`${part.name}.${propName}: no Go type`);
+    }
+  }
+
+  private emitPropsStruct(part: PartDef): string {
+    const fields: string[] = [];
+    for (const p of part.props) {
+      if (p.type === "children") continue;
+      const doc = p.docs ? `\t// ${p.name} — ${p.docs}\n` : "";
+      fields.push(`${doc}\t${p.name} ${this.goType(part, p.name)}`);
+    }
+    return `// ${part.name}Props configures ${part.name}.\ntype ${part.name}Props struct {\n${fields.join("\n")}\n}`;
+  }
+
+  private goCtx(brick: BrickDef, part: PartDef, env: TypeEnv): GoPrintCtx {
+    return {
+      env,
+      propCode: (name) => `p.${name}`,
+      itemCode: (field) => `item.${field}`,
+      derivedCode: (name) => `${lowerFirst(part.name)}${pascalCase(name)}(p)`,
+      resolvedTagCode: () => {
+        throw new Error(`${part.name}: resolvedTag must be folded before Go printing`);
+      },
+    };
+  }
+
+  private classArgs(brick: BrickDef, part: PartDef, spec: ClassSpec, ctx: GoPrintCtx): string {
+    const tail: string[] = [];
+    if (spec.staticBase) tail.push(JSON.stringify(spec.staticBase));
+    for (const e of spec.extra ?? []) tail.push(printGoExpr(e, ctx));
+    for (const st of spec.state ?? []) {
+      tail.push(`uiutils.If(${printGoExpr(st.test, ctx)}, ${JSON.stringify(st.classes)}, "")`);
+    }
+    if (spec.includeClassProp !== false && part.props.some((p) => p.name === "Class")) {
+      tail.push("p.Class");
+    }
+
+    if (spec.recipe) {
+      const recipeId = spec.recipeId ?? part.recipeId!;
+      const recipeVar = pascalCase(recipeId) + "Variants";
+      const selection = Object.entries(spec.recipe)
+        .map(([key, source]) => {
+          const value = typeof source === "string" ? `p.${source}` : printGoExpr(source, ctx);
+          return `\t\t${JSON.stringify(key)}: ${value},`;
+        })
+        .join("\n");
+      const sel = selection ? `map[string]string{\n${selection}\n\t}` : `map[string]string{}`;
+      const tailStr = tail.length > 0 ? `, ${tail.join(", ")}` : "";
+      return `uiutils.Compose(${recipeVar}, ${sel}${tailStr})`;
+    }
+    return `uiutils.Cn(${tail.join(", ")})`;
+  }
+
+  private emitClassesFunc(brick: BrickDef, part: PartDef, env: TypeEnv): string {
+    const ctx = this.goCtx(brick, part, env);
+    const call = this.classArgs(brick, part, part.classes!, ctx);
+    return (
+      `// ${part.name}Classes composes ${part.name} classes without rendering —\n` +
+      `// the server-composition escape hatch for custom root elements.\n` +
+      `func ${part.name}Classes(p ${part.name}Props) string {\n\treturn ${call}\n}`
+    );
+  }
+
+  private emitDerivedFunc(
+    brick: BrickDef,
+    part: PartDef,
+    env: TypeEnv,
+    name: string,
+    expr: Expr
+  ): string {
+    const ctx = this.goCtx(brick, part, env);
+    const t = exprType(expr, env);
+    const goT = t === "string" ? "string" : t === "bool" ? "bool" : "int";
+    return `func ${lowerFirst(part.name)}${pascalCase(name)}(p ${part.name}Props) ${goT} {\n\treturn ${printGoExpr(expr, ctx)}\n}`;
+  }
+
+  // -------------------------------------------------------------------------
+  // templ component
+  // -------------------------------------------------------------------------
+
+  private emitComponent(brick: BrickDef, part: PartDef, env: TypeEnv): string {
+    const ctx = this.goCtx(brick, part, env);
+    const body = this.printNode(part.render, brick, part, env, ctx, undefined);
+    return `// ${part.name} renders the ${part.name} contract.\ntempl ${part.name}(p ${part.name}Props) {\n${indent(body, 1, "\t")}\n}`;
+  }
+
+  private printNode(
+    node: Node,
+    brick: BrickDef,
+    part: PartDef,
+    env: TypeEnv,
+    ctx: GoPrintCtx,
+    currentTag: string | undefined
+  ): string {
+    switch (node.kind) {
+      case "element":
+        return this.printElement(node, brick, part, env, ctx);
+      case "slot":
+        return `{ children... }`;
+      case "text":
+        return `{ ${printGoExpr(fold(node.expr, currentTag), ctx)} }`;
+      case "when": {
+        const test = printGoExpr(fold(node.test, currentTag), ctx);
+        const thenCode = node.then
+          .map((c) => this.printNode(c, brick, part, env, ctx, currentTag))
+          .join("\n");
+        if (!node.else || node.else.length === 0) {
+          return `if ${test} {\n${indent(thenCode, 1, "\t")}\n}`;
+        }
+        // else-if chain
+        if (node.else.length === 1 && node.else[0]!.kind === "when") {
+          const chained = this.printNode(node.else[0]!, brick, part, env, ctx, currentTag);
+          return `if ${test} {\n${indent(thenCode, 1, "\t")}\n} else ${chained}`;
+        }
+        const elseCode = node.else
+          .map((c) => this.printNode(c, brick, part, env, ctx, currentTag))
+          .join("\n");
+        return `if ${test} {\n${indent(thenCode, 1, "\t")}\n} else {\n${indent(elseCode, 1, "\t")}\n}`;
+      }
+      case "forEach": {
+        const body = node.body
+          .map((c) => this.printNode(c, brick, part, env, ctx, currentTag))
+          .join("\n");
+        return `for _, item := range p.${node.itemsProp} {\n${indent(body, 1, "\t")}\n}`;
+      }
+    }
+  }
+
+  private printElement(
+    node: ElementNode,
+    brick: BrickDef,
+    part: PartDef,
+    env: TypeEnv,
+    ctx: GoPrintCtx
+  ): string {
+    const tag = node.tag;
+    if (tag.kind === "static") {
+      return this.printStaticElement(node, tag.tag, brick, part, env, ctx);
+    }
+
+    // Dynamic tags: a switch with one case per allowed tag; fallback last.
+    let switchExpr: string;
+    let cases: string[];
+    let fallback: string;
+    if (tag.kind === "resolved") {
+      switchExpr = `uiutils.ResolveTag(p.${tag.fromProp}, ${JSON.stringify(tag.fallback)}, uiutils.TagGroup${tag.group})`;
+      cases = allowedTags(tag.group).filter((t) => t !== tag.fallback);
+      fallback = tag.fallback;
+    } else if (tag.kind === "heading") {
+      switchExpr = `uiutils.TitleTag(p.${tag.fromProp})`;
+      cases = HEADING_TAGS;
+      fallback = "h2";
+    } else {
+      switchExpr = printGoExpr(tag.expr, ctx);
+      cases = tag.tags.slice(0, -1);
+      fallback = tag.tags[tag.tags.length - 1]!;
+    }
+
+    const caseBlocks = cases.map((t) => {
+      const el = this.printStaticElement(node, t, brick, part, env, ctx);
+      return `case ${JSON.stringify(t)}:\n${indent(el, 1, "\t")}`;
+    });
+    const defaultBlock = `default:\n${indent(
+      this.printStaticElement(node, fallback, brick, part, env, ctx),
+      1,
+      "\t"
+    )}`;
+    return `switch ${switchExpr} {\n${indent([...caseBlocks, defaultBlock].join("\n"), 1, "\t")}\n}`;
+  }
+
+  private printStaticElement(
+    node: ElementNode,
+    tag: string,
+    brick: BrickDef,
+    part: PartDef,
+    env: TypeEnv,
+    ctx: GoPrintCtx
+  ): string {
+    const attrLines: string[] = [];
+    for (const attr of node.attrs) {
+      attrLines.push(this.printAttr(attr, tag, brick, part, env, ctx));
+    }
+    const attrs = attrLines.filter(Boolean);
+
+    const children = node.children
+      .map((c) => this.printNode(c, brick, part, env, ctx, tag))
+      .join("\n");
+
+    const compact = attrs.length <= 2 && attrs.every((a) => !a.includes("\n"));
+    if (compact && (node.void || node.children.length === 0)) {
+      const inline = attrs.length > 0 ? ` ${attrs.join(" ")}` : "";
+      if (node.void) return `<${tag}${inline}/>`;
+      return `<${tag}${inline}></${tag}>`;
+    }
+
+    if (attrs.length === 0) {
+      if (node.void) return `<${tag}/>`;
+      if (node.children.length === 0) return `<${tag}></${tag}>`;
+      return `<${tag}>\n${indent(children, 1, "\t")}\n</${tag}>`;
+    }
+    const open = `<${tag}\n${indent(attrs.join("\n"), 1, "\t")}\n`;
+    if (node.void) return `${open}/>`;
+    if (node.children.length === 0) return `${open}></${tag}>`;
+    return `${open}>\n${indent(children, 1, "\t")}\n</${tag}>`;
+  }
+
+  private printAttr(
+    attr: AttrSpec,
+    tag: string,
+    brick: BrickDef,
+    part: PartDef,
+    env: TypeEnv,
+    ctx: GoPrintCtx
+  ): string {
+    switch (attr.kind) {
+      case "static":
+        return `${attr.name}=${JSON.stringify(attr.value)}`;
+      case "expr": {
+        const expr = fold(attr.expr, tag);
+        const value = printGoExpr(expr, ctx);
+        const t = exprType(expr, env);
+        const valueCode = t === "string" ? value : t === "int" ? `strconv.Itoa(${value})` : value;
+        if (attr.when) {
+          const when = fold(attr.when, tag);
+          if (when.kind === "lit") {
+            // Constant-folded per tag-switch case: drop or emit unconditionally.
+            return when.value === false ? "" : `${attr.name}={ ${valueCode} }`;
+          }
+          const test = printGoExpr(when, ctx);
+          return `if ${test} {\n\t${attr.name}={ ${valueCode} }\n}`;
+        }
+        if (attr.keepEmpty || t !== "string" || neverEmptyString(expr, env)) {
+          return `${attr.name}={ ${valueCode} }`;
+        }
+        return `if uiutils.IsSetStr(${value}) {\n\t${attr.name}={ ${value} }\n}`;
+      }
+      case "bool":
+        return `${attr.name}?={ ${printGoExpr(fold(attr.expr, tag), ctx)} }`;
+      case "class": {
+        if (!attr.spec) return `class={ ${part.name}Classes(p) }`;
+        const call = this.classArgs(brick, part, { ...attr.spec, includeClassProp: false }, ctx);
+        return `class={ ${call} }`;
+      }
+      case "rest":
+        return `{ p.Attrs... }`;
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // _gen.go
+  // -------------------------------------------------------------------------
+
+  private emitGenFile(brick: BrickDef, pkg: string, stem: string): GeneratedFile {
+    const lines: string[] = [];
+    lines.push(`// ${BANNER}`);
+    lines.push(``);
+    lines.push(`package ${pkg}`);
+    lines.push(``);
+    lines.push(`import (`);
+    lines.push(`\t_ "embed"`);
+    lines.push(``);
+    lines.push(`\tuiutils "${this.options.goModule}/utils"`);
+    lines.push(`)`);
+    for (const [id, file] of Object.entries(brick.recipeFiles)) {
+      const varName = pascalCase(id) + "Variants";
+      const jsonVar = lowerFirst(pascalCase(id)) + "VariantsJSON";
+      lines.push(``);
+      lines.push(`//go:embed ${file}`);
+      lines.push(`var ${jsonVar} []byte`);
+      lines.push(``);
+      lines.push(`// ${varName} is the CVA recipe shared verbatim by all runtimes.`);
+      lines.push(`var ${varName} = uiutils.MustParseVariantRecipe(${jsonVar}).ToVariants()`);
+    }
+    lines.push(``);
+    return { path: `ui/${brick.dir}/${stem}_gen.go`, contents: lines.join("\n") };
+  }
+}
+
+const GO_KEYWORDS: Record<string, string> = { select: "selectfield", switch: "formswitch", range: "rangefield" };
+/** the Go package of a brick: its folder without dashes, a Go keyword renamed (select -> selectfield) */
+export function goPackageOf(brick: BrickDef): string {
+  if (brick.goPackage) return brick.goPackage;
+  const name = brick.dir.replace(/-/g, "");
+  return GO_KEYWORDS[name] ?? name;
+}
+
+function fold(expr: Expr, tag: string | undefined): Expr {
+  return tag === undefined ? expr : foldResolvedTag(expr, tag);
+}
+
+/** Collect Go stdlib imports needed by a part's expressions. */
+function collectGoImports(brick: BrickDef, part: PartDef, out: Set<string>): void {
+  const exprs: Expr[] = [];
+  const pushSpec = (spec: ClassSpec | undefined) => {
+    if (!spec) return;
+    exprs.push(...(spec.extra ?? []));
+    for (const st of spec.state ?? []) exprs.push(st.test);
+    for (const source of Object.values(spec.recipe ?? {})) {
+      if (typeof source !== "string") exprs.push(source);
+    }
+  };
+  pushSpec(part.classes);
+  for (const d of Object.values(part.derived ?? {})) exprs.push(d);
+  walkNodes(part.render, (node) => {
+    if (node.kind === "element") {
+      for (const attr of node.attrs) {
+        if (attr.kind === "expr") {
+          exprs.push(attr.expr);
+          if (attr.when) exprs.push(attr.when);
+          // int-valued attrs stringify via strconv
+          const env: TypeEnv = makeEnv(brick, part);
+          try {
+            if (exprType(attr.expr, env) === "int") out.add("strconv");
+          } catch {
+            // item refs outside env context — resolved during printing
+          }
+        }
+        if (attr.kind === "bool") exprs.push(attr.expr);
+        if (attr.kind === "class") pushSpec(attr.spec);
+      }
+      if (node.tag.kind === "mapped") exprs.push(node.tag.expr);
+    }
+    if (node.kind === "text") exprs.push(node.expr);
+    if (node.kind === "when") exprs.push(node.test);
+  });
+  for (const imp of goImportsFor(exprs)) out.add(imp);
+}
diff --git a/xgen/runtimes/templ/test/emit.test.ts b/xgen/runtimes/templ/test/emit.test.ts
new file mode 100644
index 0000000..bc06c17
--- /dev/null
+++ b/xgen/runtimes/templ/test/emit.test.ts
@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { TemplEmitter, TEMPL_MODULE, goPackageOf } from "../src/index";
+
+const plan = planBuild(join(import.meta.dir, "..", "..", "..", ".."));
+
+test("every brick makes templ files that carry the banner, and the same brick makes the same files twice", () => {
+  const emitter = new TemplEmitter({ goModule: TEMPL_MODULE });
+  for (const { brick } of plan.bricks) {
+    if (brick.id === "ui.lucide-icon") continue; // an asset, not emitted
+    const a = emitter.emit(brick), b = emitter.emit(brick);
+    expect(a.map((f) => f.contents)).toEqual(b.map((f) => f.contents));
+    expect(a.some((f) => f.path.endsWith(".templ"))).toBe(true);
+  }
+});
+
+test("Go package names are identifiers and never Go keywords", () => {
+  const keywords = new Set(["break", "case", "chan", "const", "continue", "default", "defer", "else", "fallthrough", "for", "func", "go", "goto", "if", "import", "interface", "map", "package", "range", "return", "select", "struct", "switch", "type", "var"]);
+  for (const { brick } of plan.bricks) {
+    const p = goPackageOf(brick);
+    expect(p).toMatch(/^[a-z][a-z0-9]*$/);
+    expect(keywords.has(p)).toBe(false);
+  }
+});
+
+test("the templ package is a target of the plan with organisms, recipes and the ui8kit zones", () => {
+  const t = plan.targets.find((x) => x.runtime === "templ")!;
+  expect(t.files.some((f) => f.path === "blocks/pager.templ")).toBe(true);
+  const pkg = JSON.parse(t.files.find((f) => f.path === "package.json")!.contents) as { ui8kit: { kit: string[]; blockRoot: string[] } };
+  expect(pkg.ui8kit.kit).toEqual(["ui", "utils"]);
+  expect(pkg.ui8kit.blockRoot.every((p) => p.startsWith("blocks/") && p.endsWith(".templ"))).toBe(true);
+});
diff --git a/xgen/runtimes/twig/README.md b/xgen/runtimes/twig/README.md
new file mode 100644
index 0000000..19bff19
--- /dev/null
+++ b/xgen/runtimes/twig/README.md
@@ -0,0 +1,37 @@
+# @ui8kit/xgen-runtime-twig
+
+[Twig](https://twig.symfony.com) emitter, and the shared emitter of the Jinja-family and Latte runtimes: bricks and organisms are
+printed through a `Dialect`, so `@ui8kit/xgen-runtime-jinja2` and `@ui8kit/xgen-runtime-latte` reuse this package. Output:
+`packages/twig/ui` (composer package `ui8kit/twig-ui`, requires `twig/twig` `^3.21`).
+
+Part of xgen (see `../README.md` and the author guide `../../../docs/specs-guide.md`). Tests: `bun test`.
+
+## How it emits
+
+- `src/brick.ts` (`emitTwigBrick(brick, source, dialect)`): one include template per part, `ui/<brick>/<part><ext>`, with the
+  recipe next to it. Templates take `p` (props by their canonical names: `Variant`, `Class`, `Attrs`) and `children` (markup).
+- `src/organism.ts` (`emitTwigOrganism(org, deps, source, dialect)`): one `blocks/<name><ext>` per portable organism; props by
+  their JSON names plus `className`. A slot fill without arguments is a captured block; a fill with arguments is a template of its
+  own, passed as a descriptor `{t, v}` and called with `a0`, `a1`, ...
+- `src/dialect.ts`: the `Dialect` interface and the `twig`, `jinja` and `latte` objects: literals, field access, operators,
+  output (`out`, `raw`), control flow, captures, includes, plus the optional hooks `dynamicTag` (Latte `n:tag`) and `attrOut`
+  (Latte `|nocheck` on URL attributes). `MARKUP_HELPERS` (the `ui_*` helpers that return markup) and `URL_ATTRS` are the one place
+  those lists live.
+- `src/php.ts` (`phpHelpers(runtime)`): the PHP helpers shared by Twig and Latte, `assets/php-shared/Runtime.php` (the `ui_*`
+  functions, a port of the Go helpers) and `CnMerge.php` (tailwind-merge), with the namespace written `UI8Kit\{{RUNTIME}}` and
+  filled per package (`UI8Kit\Twig`, `UI8Kit\Latte`).
+- `assets/php/Extension.php`: the Twig extension that registers the functions (`Extension::environment($root)`).
+  `assets/parity.php`: the parity harness (JSON in, HTML out). `assets/lucide-icon.html.twig`: the icon asset.
+
+The generator side is `xgen/generator/src/twig.ts` and `organisms.ts` (`dialectOrganismFiles`, shared with Jinja2 and Latte).
+
+## Check group `twig`
+
+`composer install`, `php -l` of the helpers, then `bin/parity.php` renders every brick case (118) and block case (474) with real Twig;
+the DOM is compared with React and html-validate runs over every block case (`xgen/check/src/twig`, `phpTemplateCheck`). The rules
+group reads the templates with `xgen/check/src/rules/twig.ts`.
+
+## Prerequisites
+
+PHP 8.2 or newer with `mbstring`, and composer. Without PHP the group prints `skipped: no PHP` (without composer and no `vendor/`:
+`skipped: no composer`); with `UI8KIT_REQUIRE_ALL_RUNTIMES=1` a skip is a failure.
diff --git a/xgen/runtimes/twig/assets/lucide-icon.html.twig b/xgen/runtimes/twig/assets/lucide-icon.html.twig
new file mode 100644
index 0000000..6e8d53e
--- /dev/null
+++ b/xgen/runtimes/twig/assets/lucide-icon.html.twig
@@ -0,0 +1,11 @@
+{#- LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from lucide-icons.json next to this file.
+    Decorative (aria-hidden) unless a Label is given. Size and StrokeWidth default to 16 and 2. -#}
+{%- set size = (p.Size ?? 0) ?: 16 -%}
+{%- set label = p.Label ?? '' -%}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="{{ size }}" height="{{ size }}" fill="none" stroke="currentColor"
+  stroke-width="{{ (p.StrokeWidth ?? 0) ?: 2 }}" stroke-linecap="round" stroke-linejoin="round"
+  class="{{ ui_cn(['inline-block shrink-0', p.Class ?? '']) }}"
+  {%- if label == '' %} aria-hidden="true"{% else %} aria-label="{{ label }}" role="img"{% endif %} data-slot="icon"
+  {%- if (p.Name ?? '') != '' %} data-lucide="{{ p.Name }}"{% endif %}{{ ui_attr_html(p.Attrs ?? {}) }}>
+  {{- ui_lucide(p.Name ?? '') -}}
+</svg>
diff --git a/xgen/runtimes/twig/assets/parity.php b/xgen/runtimes/twig/assets/parity.php
new file mode 100644
index 0000000..e5bac48
--- /dev/null
+++ b/xgen/runtimes/twig/assets/parity.php
@@ -0,0 +1,22 @@
+<?php
+
+// Renders generated templates from JSON: stdin [{"template":"ui/button/button.html.twig","vars":{"p":{...},"children":"x"}}],
+// stdout the HTML of each (a failure is "ERROR: <message>"). Used by the parity check of xgen.
+
+declare(strict_types=1);
+
+require __DIR__ . '/../vendor/autoload.php';
+
+use UI8Kit\Twig\Extension;
+
+$env = Extension::environment(dirname(__DIR__), ['strict_variables' => false]);
+$requests = json_decode(stream_get_contents(STDIN), true, 512, JSON_THROW_ON_ERROR);
+$out = [];
+foreach ($requests as $r) {
+    try {
+        $out[] = $env->render($r['template'], $r['vars'] ?? []);
+    } catch (\Throwable $e) {
+        $out[] = 'ERROR: ' . $e->getMessage();
+    }
+}
+echo json_encode($out, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_INVALID_UTF8_SUBSTITUTE), "\n";
diff --git a/xgen/runtimes/twig/assets/php-shared/CnMerge.php b/xgen/runtimes/twig/assets/php-shared/CnMerge.php
new file mode 100644
index 0000000..b1edcdd
--- /dev/null
+++ b/xgen/runtimes/twig/assets/php-shared/CnMerge.php
@@ -0,0 +1,232 @@
+<?php
+
+declare(strict_types=1);
+
+namespace UI8Kit\{{RUNTIME}};
+
+/**
+ * cn: clsx-joined class fragments with tailwind-merge conflict resolution (the last class of a group wins, and a
+ * class removes the earlier classes of the groups it overrides: p-2 removes px-4, not the reverse). Port of cn_merge.go.
+ */
+final class CnMerge
+{
+    public static function merge(array $classes): string
+    {
+        $tokens = [];
+        foreach ($classes as $chunk) {
+            foreach (preg_split('/\s+/', trim((string) $chunk)) ?: [] as $t) {
+                if ($t !== '') {
+                    $tokens[] = $t;
+                }
+            }
+        }
+        $kept = [];
+        foreach ($tokens as $token) {
+            [$prefix, $key, $removes] = self::classKey($token);
+            if ($key !== '') {
+                $drop = [$key => true];
+                foreach ($removes as $g) {
+                    $drop[$prefix . $g] = true;
+                }
+                $kept = array_values(array_filter($kept, fn ($it) => !isset($drop[$it[1]])));
+            }
+            $kept[] = [$token, $key];
+        }
+        return implode(' ', array_map(fn ($it) => $it[0], $kept));
+    }
+
+    private static function classKey(string $token): array
+    {
+        [$prefix, $core] = self::splitVariant($token);
+        if ($core === '') {
+            return ['', '', []];
+        }
+        $groups = self::utilityGroups($core);
+        if (!$groups) {
+            return [$prefix, '=' . $token, []];
+        }
+        return [$prefix, $prefix . $groups[0], array_slice($groups, 1)];
+    }
+
+    private static function splitVariant(string $token): array
+    {
+        $depth = 0;
+        $cut = -1;
+        $n = strlen($token);
+        for ($i = 0; $i < $n; $i++) {
+            $c = $token[$i];
+            if ($c === '[') {
+                $depth++;
+            } elseif ($c === ']') {
+                if ($depth > 0) {
+                    $depth--;
+                }
+            } elseif ($c === ':' && $depth === 0) {
+                $cut = $i;
+            }
+        }
+        if ($cut === -1) {
+            return ['', self::noBang($token)];
+        }
+        return [substr($token, 0, $cut + 1), self::noBang(substr($token, $cut + 1))];
+    }
+
+    private static function noBang(string $s): string
+    {
+        return str_starts_with($s, '!') ? substr($s, 1) : $s;
+    }
+
+    private static function utilityGroups(string $core): array
+    {
+        switch ($core) {
+            case 'block': case 'inline': case 'inline-block': case 'inline-flex': case 'flex': case 'grid': case 'contents': case 'hidden':
+                return ['display'];
+            case 'flex-row': case 'flex-col': case 'flex-row-reverse': case 'flex-col-reverse':
+                return ['flex-direction'];
+            case 'static': case 'relative': case 'absolute': case 'fixed': case 'sticky':
+                return ['position'];
+            case 'isolate': case 'isolation-auto':
+                return ['isolation'];
+        }
+        foreach (['inset-ring', 'ring'] as $kind) {
+            if ($core === $kind) {
+                return [$kind . '-width'];
+            }
+            if (str_starts_with($core, $kind . '-')) {
+                $rest = substr($core, strlen($kind) + 1);
+                return [self::isNumber($rest) ? $kind . '-width' : $kind . '-color'];
+            }
+        }
+        $prefixes = [
+            ['gap-x-', 'gap-x'], ['gap-y-', 'gap-y'], ['items-', 'align-items'], ['justify-', 'justify-content'],
+            ['self-', 'align-self'], ['content-', 'align-content'], ['overflow-x-', 'overflow-x'], ['overflow-y-', 'overflow-y'],
+            ['inset-x-', 'inset-x'], ['inset-y-', 'inset-y'], ['min-w-', 'min-width'], ['min-h-', 'min-height'],
+            ['max-w-', 'max-width'], ['max-h-', 'max-height'], ['shadow-', 'shadow'], ['ring-', 'ring'], ['rounded-', 'rounded'],
+            ['leading-', 'leading'], ['tracking-', 'tracking'], ['opacity-', 'opacity'], ['z-', 'z'], ['top-', 'top'],
+            ['right-', 'right'], ['bottom-', 'bottom'], ['left-', 'left'],
+        ];
+        foreach ($prefixes as [$p, $g]) {
+            if (str_starts_with($core, $p)) {
+                return [$g];
+            }
+        }
+        if (str_starts_with($core, 'gap-')) {
+            return ['gap', 'gap-x', 'gap-y'];
+        }
+        if (str_starts_with($core, 'inset-')) {
+            return ['inset', 'inset-x', 'inset-y', 'top', 'right', 'bottom', 'left'];
+        }
+        if (str_starts_with($core, 'overflow-')) {
+            return ['overflow', 'overflow-x', 'overflow-y'];
+        }
+        if ($core === 'border' || (str_starts_with($core, 'border-') && self::isNumber(substr($core, 7)))) {
+            return ['border-width', 'border-w-x', 'border-w-y', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l', 'border-w-s', 'border-w-e'];
+        }
+        if (strlen($core) >= 8 && str_starts_with($core, 'border-') && str_contains('xytrblse', $core[7])
+            && (strlen($core) === 8 || ($core[8] === '-' && self::isNumber(substr($core, 9))))) {
+            $side = $core[7];
+            if ($side === 'x') {
+                return ['border-w-x', 'border-w-r', 'border-w-l', 'border-w-s', 'border-w-e'];
+            }
+            if ($side === 'y') {
+                return ['border-w-y', 'border-w-t', 'border-w-b'];
+            }
+            return ['border-w-' . $side];
+        }
+        if (in_array($core, ['text-left', 'text-center', 'text-right', 'text-justify', 'text-start', 'text-end'], true)) {
+            return ['text-align'];
+        }
+        if ($core === 'rounded') {
+            return ['rounded'];
+        }
+        if ($core === 'shadow' || $core === 'shadow-none') {
+            return ['shadow'];
+        }
+        if (in_array($core, ['flex-1', 'flex-auto', 'flex-none', 'flex-initial'], true)) {
+            return ['flex-size', 'flex-grow', 'flex-shrink', 'flex-basis'];
+        }
+        if ($core === 'grow' || str_starts_with($core, 'grow-')) {
+            return ['flex-grow'];
+        }
+        if ($core === 'shrink' || $core === 'shrink-0') {
+            return ['flex-shrink'];
+        }
+        if (str_starts_with($core, 'size-')) {
+            return ['size', 'width', 'height'];
+        }
+        if (str_starts_with($core, 'w-')) {
+            return ['width'];
+        }
+        if (str_starts_with($core, 'h-')) {
+            return ['height'];
+        }
+        foreach (['p' => 'padding', 'm' => 'margin'] as $kind => $name) {
+            if (str_starts_with($core, $kind . '-') && !self::hasDirectionPrefix($core, $kind)) {
+                return [$name, "$name-x", "$name-y", "$name-t", "$name-r", "$name-b", "$name-l", "$name-s", "$name-e"];
+            }
+            $axis = self::spaceAxis($core, $kind, $name);
+            if ($axis) {
+                return $axis;
+            }
+        }
+        if (str_starts_with($core, 'bg-')) {
+            return ['bg'];
+        }
+        if (self::isTextSize($core)) {
+            return ['text-size', 'leading'];
+        }
+        if (str_starts_with($core, 'text-')) {
+            return ['text-color'];
+        }
+        if (in_array($core, ['font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black'], true)) {
+            return ['font-weight'];
+        }
+        return [];
+    }
+
+    private static function hasDirectionPrefix(string $core, string $kind): bool
+    {
+        foreach (['x-', 'y-', 't-', 'r-', 'b-', 'l-', 's-', 'e-'] as $d) {
+            if (str_starts_with($core, $kind . $d)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private static function spaceAxis(string $core, string $kind, string $n): array
+    {
+        if (str_starts_with($core, $kind . 'x-')) {
+            return ["$n-x", "$n-r", "$n-l", "$n-s", "$n-e"];
+        }
+        if (str_starts_with($core, $kind . 'y-')) {
+            return ["$n-y", "$n-t", "$n-b"];
+        }
+        foreach (['t', 'r', 'b', 'l'] as $s) {
+            if (str_starts_with($core, $kind . $s . '-')) {
+                return ["$n-$s"];
+            }
+        }
+        return [];
+    }
+
+    private static function isTextSize(string $core): bool
+    {
+        if (in_array($core, ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl', 'text-6xl', 'text-7xl', 'text-8xl', 'text-9xl'], true)) {
+            return true;
+        }
+        if (str_starts_with($core, 'text-[')) {
+            $rest = substr($core, 6);
+            return $rest !== '' && (ctype_digit($rest[0]) || $rest[0] === '.');
+        }
+        return false;
+    }
+
+    private static function isNumber(string $s): bool
+    {
+        if (str_starts_with($s, '[')) {
+            return true;
+        }
+        return $s !== '' && strspn($s, '0123456789.') === strlen($s);
+    }
+}
diff --git a/xgen/runtimes/twig/assets/php-shared/Runtime.php b/xgen/runtimes/twig/assets/php-shared/Runtime.php
new file mode 100644
index 0000000..5ba217b
--- /dev/null
+++ b/xgen/runtimes/twig/assets/php-shared/Runtime.php
@@ -0,0 +1,734 @@
+<?php
+
+declare(strict_types=1);
+
+namespace UI8Kit\{{RUNTIME}};
+
+/**
+ * The helpers of the generated templates. Values are the JSON shapes of the TypeScript props (string, int/float,
+ * bool, null, list, map) and are read with the rules of the TypeScript output: JS truthiness, strict equality,
+ * String(), clsx + tailwind-merge. Every helper is null-safe, like `?.`. Port of the Go runtime (dyn.go, expr.go,
+ * utils.go) so all static runtimes print the same DOM.
+ */
+final class Runtime
+{
+    /** @var array<string, mixed> parsed JSON files (recipes, presets, the Lucide registry) */
+    private array $json = [];
+
+    public function __construct(private readonly string $root)
+    {
+    }
+
+    public function json(string $path): mixed
+    {
+        if (!array_key_exists($path, $this->json)) {
+            $text = file_get_contents($this->root . '/' . $path);
+            if ($text === false) {
+                throw new \RuntimeException("ui8kit: cannot read $path");
+            }
+            $this->json[$path] = json_decode($text, true, 512, JSON_THROW_ON_ERROR);
+        }
+        return $this->json[$path];
+    }
+
+    // ---------------------------------------------------------------- values
+
+    private static function isNum(mixed $v): bool
+    {
+        return is_int($v) || is_float($v);
+    }
+
+    /** a path of fields: get(plan, ['price', 'amount']); `length` of a list or a text is its size */
+    public static function get(mixed $v, array $path): mixed
+    {
+        foreach ($path as $k) {
+            $k = (string) $k;
+            if (is_array($v)) {
+                if (array_is_list($v) && ($k === 'length' || ctype_digit($k))) {
+                    if ($k === 'length') {
+                        $v = count($v);
+                    } else {
+                        $v = $v[(int) $k] ?? null;
+                    }
+                } else {
+                    $v = $v[$k] ?? null;
+                }
+            } elseif (is_string($v) && $k === 'length') {
+                $v = mb_strlen($v);
+            } else {
+                return null;
+            }
+        }
+        return $v;
+    }
+
+    /** a field of a brick record (BreadcrumbItem): the JSON key matched without regard to case, as Go json does */
+    public static function field(mixed $item, string $name, mixed $zero): mixed
+    {
+        if (!is_array($item)) {
+            return $zero;
+        }
+        if (array_key_exists($name, $item)) {
+            return $item[$name] ?? $zero;
+        }
+        foreach ($item as $k => $v) {
+            if (strcasecmp((string) $k, $name) === 0) {
+                return $v ?? $zero;
+            }
+        }
+        return $zero;
+    }
+
+    /** String(n) of JavaScript for the numbers the views print: 3, 2.5, -1 */
+    public static function fmtNum(int|float $f): string
+    {
+        if (is_int($f)) {
+            return (string) $f;
+        }
+        if (is_nan($f)) {
+            return 'NaN';
+        }
+        if (is_infinite($f)) {
+            return $f > 0 ? 'Infinity' : '-Infinity';
+        }
+        if ($f == floor($f) && abs($f) < 1e21) {
+            return sprintf('%.0f', $f);
+        }
+        return json_encode($f);
+    }
+
+    public static function s(mixed $v): string
+    {
+        if ($v === null) {
+            return '';
+        }
+        if (is_string($v)) {
+            return $v;
+        }
+        if (is_bool($v)) {
+            return $v ? 'true' : 'false';
+        }
+        if (self::isNum($v)) {
+            return self::fmtNum($v);
+        }
+        if ($v instanceof \Stringable) {
+            return (string) $v;
+        }
+        return json_encode($v, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
+    }
+
+    /** what a text node shows: nothing for null and booleans */
+    public static function text(mixed $v): string
+    {
+        return is_bool($v) ? '' : self::s($v);
+    }
+
+    /** JS truthiness: null, false, 0, NaN and '' are false */
+    public static function t(mixed $v): bool
+    {
+        if ($v === null) {
+            return false;
+        }
+        if (is_bool($v)) {
+            return $v;
+        }
+        if (is_string($v)) {
+            return $v !== '';
+        }
+        if (self::isNum($v)) {
+            return $v != 0 && !is_nan((float) $v);
+        }
+        if ($v instanceof \Stringable) {
+            return (string) $v !== '';
+        }
+        return true;
+    }
+
+    /** Number(v) */
+    public static function n(mixed $v): float
+    {
+        if (self::isNum($v)) {
+            return (float) $v;
+        }
+        if (is_string($v) && is_numeric(trim($v))) {
+            return (float) trim($v);
+        }
+        if (is_bool($v)) {
+            return $v ? 1.0 : 0.0;
+        }
+        return 0.0;
+    }
+
+    /** an int for an int prop of a brick */
+    public static function i(mixed $v): int
+    {
+        return (int) round(self::n($v));
+    }
+
+    /** strict equality (===) */
+    public static function eq(mixed $a, mixed $b): bool
+    {
+        $na = self::isNum($a);
+        $nb = self::isNum($b);
+        if ($na || $nb) {
+            return $na && $nb && (float) $a == (float) $b;
+        }
+        if ($a === null || is_string($a) || is_bool($a)) {
+            return $a === $b;
+        }
+        return false;
+    }
+
+    private static function cmp(mixed $a, mixed $b): ?int
+    {
+        if (is_string($a) && is_string($b)) {
+            return strcmp($a, $b) <=> 0;
+        }
+        if ($a === null || $b === null) {
+            return null;
+        }
+        return self::n($a) <=> self::n($b);
+    }
+
+    public static function lt(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c < 0; }
+    public static function gt(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c > 0; }
+    public static function le(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c <= 0; }
+    public static function ge(mixed $a, mixed $b): bool { $c = self::cmp($a, $b); return $c !== null && $c >= 0; }
+
+    /** `a + b`: text when either side is text, else a sum */
+    public static function add(mixed $a, mixed $b): string|float
+    {
+        if (is_string($a) || is_string($b)) {
+            return self::s($a) . self::s($b);
+        }
+        return self::n($a) + self::n($b);
+    }
+    public static function sub(mixed $a, mixed $b): float { return self::n($a) - self::n($b); }
+    public static function mul(mixed $a, mixed $b): float { return self::n($a) * self::n($b); }
+    public static function div(mixed $a, mixed $b): float { return fdiv(self::n($a), self::n($b)); }
+
+    /** the first falsy operand, else the last (JS &&) */
+    public static function and(array $vs): mixed
+    {
+        $last = null;
+        foreach ($vs as $v) {
+            if (!self::t($v)) {
+                return $v;
+            }
+            $last = $v;
+        }
+        return $last;
+    }
+
+    /** the first truthy operand, else the last (JS ||) */
+    public static function or(array $vs): mixed
+    {
+        $last = null;
+        foreach ($vs as $v) {
+            if (self::t($v)) {
+                return $v;
+            }
+            $last = $v;
+        }
+        return $last;
+    }
+
+    public static function coalesce(array $vs): mixed
+    {
+        foreach ($vs as $v) {
+            if ($v !== null) {
+                return $v;
+            }
+        }
+        return null;
+    }
+
+    /** a prop with its default: the default when the prop is null */
+    public static function def(mixed $v, mixed $d): mixed
+    {
+        return $v ?? $d;
+    }
+
+    /** a list to loop over; null and other values are empty */
+    public static function l(mixed $v): array
+    {
+        return is_array($v) && array_is_list($v) ? $v : [];
+    }
+
+    public static function len(mixed $v): int
+    {
+        if (is_string($v)) {
+            return mb_strlen($v);
+        }
+        return count(self::l($v));
+    }
+
+    /** a literal group with the fields of a named group first (`{ ...BASE, mode: "two" }`) */
+    public static function spread(mixed $base, array $fields): array
+    {
+        $out = is_array($base) && !array_is_list($base) ? $base : [];
+        foreach ($fields as $k => $v) {
+            $out[$k] = $v;
+        }
+        return $out;
+    }
+
+    /** String(x) with undefined kept undefined */
+    public static function str(mixed $v): ?string
+    {
+        return $v === null ? null : self::s($v);
+    }
+
+    public static function has(mixed $v): bool
+    {
+        return $v !== null;
+    }
+
+    /** cn over values: clsx skips the falsy ones, tailwind-merge resolves conflicts */
+    public static function cnv(array $vs): string
+    {
+        $parts = [];
+        foreach ($vs as $v) {
+            if (self::t($v)) {
+                $parts[] = self::s($v);
+            }
+        }
+        return CnMerge::merge($parts);
+    }
+
+    /** {0}, {1}... of a content template */
+    public static function tpl(mixed $t, array $vals): string
+    {
+        return preg_replace_callback('/\{(\d+)\}/', fn ($m) => (int) $m[1] < count($vals) ? self::s($vals[(int) $m[1]]) : '', self::s($t));
+    }
+
+    private static function group(float $f, int $decimals): string
+    {
+        $s = number_format(abs($f), $decimals, '.', '');
+        [$int, $frac] = array_pad(explode('.', $s, 2), 2, '');
+        $out = '';
+        $n = strlen($int);
+        for ($i = 0; $i < $n; $i++) {
+            if ($i > 0 && ($n - $i) % 3 === 0) {
+                $out .= ',';
+            }
+            $out .= $int[$i];
+        }
+        $frac = rtrim($frac, '0');
+        if ($frac !== '') {
+            $out .= '.' . $frac;
+        }
+        if ($f < 0 && $out !== '0') {
+            $out = '-' . $out;
+        }
+        return $out;
+    }
+
+    /** Intl.NumberFormat("en-US"): grouped, up to 3 decimals */
+    public static function num(mixed $v): string
+    {
+        return self::group(self::n($v), 3);
+    }
+
+    private const CURRENCY = ['USD' => '$', 'EUR' => "\u{20AC}", 'GBP' => "\u{00A3}", 'JPY' => "\u{00A5}", 'INR' => "\u{20B9}", 'CAD' => 'CA$', 'AUD' => 'A$'];
+
+    /** digits of the minor unit (ISO 4217): 2, or 0 for JPY and KRW */
+    public static function minorDigits(string $c): int
+    {
+        return in_array($c, ['JPY', 'KRW'], true) ? 0 : 2;
+    }
+
+    /** integer minor units (Codex v0.4: 1250 = 12.50) -> "$12.50"; whole amounts without the fraction: 149900 -> "$1,499" */
+    public static function money(mixed $amount, mixed $currency): string
+    {
+        $c = self::s($currency);
+        $sym = self::CURRENCY[$c] ?? $c . "\u{00A0}";
+        $minor = (int) round(self::n($amount));
+        $sign = $minor < 0 ? '-' : '';
+        $minor = abs($minor);
+        $d = self::minorDigits($c);
+        $unit = 10 ** $d;
+        $whole = intdiv($minor, $unit);
+        $rest = $minor % $unit;
+        $out = $sign . $sym . self::group((float) $whole, 0);
+        return $d > 0 && $rest !== 0 ? $out . '.' . str_pad((string) $rest, $d, '0', STR_PAD_LEFT) : $out;
+    }
+
+    /** a content word by key, the key itself when the dictionary has no entry */
+    public static function at(mixed $dict, mixed $key): string
+    {
+        $v = self::get($dict, [self::s($key)]);
+        return $v !== null ? self::s($v) : self::s($key);
+    }
+
+    /** the pages a pager shows: the first, the last and the neighbours of the current one; null is a gap */
+    public static function pageWindow(mixed $pageV, mixed $pagesV): array
+    {
+        $page = (int) self::n($pageV);
+        $pages = (int) self::n($pagesV);
+        $keep = [];
+        foreach ([1, $pages, $page - 1, $page, $page + 1] as $n) {
+            if ($n >= 1 && $n <= $pages) {
+                $keep[$n] = true;
+            }
+        }
+        $out = [];
+        $prev = 0;
+        for ($n = 1; $n <= $pages; $n++) {
+            if (!isset($keep[$n])) {
+                continue;
+            }
+            if ($n - $prev > 1) {
+                $out[] = null;
+            }
+            $out[] = $n;
+            $prev = $n;
+        }
+        return $out;
+    }
+
+    /** a responsive column variant capped by the number of items: ("1-4", 3) -> "1-3" */
+    public static function fitCols(mixed $colsV, mixed $nV): string
+    {
+        $cols = self::s($colsV);
+        $n = (int) self::n($nV);
+        if (!preg_match('/^(-?\d+)-(-?\d+)$/', $cols, $m)) {
+            return $cols;
+        }
+        [$l, $h] = [(int) $m[1], (int) $m[2]];
+        if ($n >= $h) {
+            return $cols;
+        }
+        $top = max($l, $n);
+        $known = ['1-2', '1-3', '1-4', '2-3', '2-4', '2-6', '3-6'];
+        for ($k = $top; $k > $l; $k--) {
+            if (in_array("$l-$k", $known, true)) {
+                return "$l-$k";
+            }
+        }
+        return (string) min(max($n, 1), $l);
+    }
+
+    /** drops a segment of a ", " label equal (case-insensitive) to the one before it */
+    public static function uniq(mixed $v): string
+    {
+        $parts = explode(', ', self::s($v));
+        $out = [];
+        foreach ($parts as $i => $s) {
+            if ($i === 0 || strcasecmp($s, $parts[$i - 1]) !== 0) {
+                $out[] = $s;
+            }
+        }
+        return implode(', ', $out);
+    }
+
+    public static function words(mixed $v): array
+    {
+        return explode(' ', self::s($v));
+    }
+
+    public static function nbsp(mixed $v): string
+    {
+        return str_replace(' ', "\u{00A0}", self::s($v));
+    }
+
+    public static function nth(mixed $list, mixed $i): mixed
+    {
+        $l = self::l($list);
+        $n = (int) self::n($i);
+        return $n >= 0 && $n < count($l) ? $l[$n] : null;
+    }
+
+    public static function range(mixed $n): array
+    {
+        $c = (int) self::n($n);
+        return $c > 0 ? range(0, $c - 1) : [];
+    }
+
+    public static function max(array $vs): float
+    {
+        $m = -INF;
+        foreach ($vs as $v) {
+            $m = max($m, self::n($v));
+        }
+        return $m;
+    }
+
+    public static function min(array $vs): float
+    {
+        $m = INF;
+        foreach ($vs as $v) {
+            $m = min($m, self::n($v));
+        }
+        return $m;
+    }
+
+    /** Math.round (halves up) */
+    public static function round(mixed $v): float
+    {
+        return floor(self::n($v) + 0.5);
+    }
+
+    public static function count(mixed $items, mixed $field): int
+    {
+        $n = 0;
+        foreach (self::l($items) as $it) {
+            if (self::t(self::get($it, [self::s($field)]))) {
+                $n++;
+            }
+        }
+        return $n;
+    }
+
+    public static function where(mixed $items, mixed $field, mixed $value): array
+    {
+        if (!self::t($value)) {
+            return self::l($items);
+        }
+        return array_values(array_filter(self::l($items), fn ($it) => self::eq(self::get($it, [self::s($field)]), $value)));
+    }
+
+    public static function match(mixed $items, mixed $field, mixed $query): array
+    {
+        if (!self::t($query)) {
+            return self::l($items);
+        }
+        $q = mb_strtolower(self::s($query));
+        return array_values(array_filter(self::l($items), fn ($it) => str_contains(mb_strtolower(self::s(self::get($it, [self::s($field)]))), $q)));
+    }
+
+    public static function pick(mixed $items, mixed $id): mixed
+    {
+        foreach (self::l($items) as $it) {
+            if (self::eq(self::get($it, ['id']), $id)) {
+                return $it;
+            }
+        }
+        return null;
+    }
+
+    public static function sumBy(mixed $items, string $a, string $b): float
+    {
+        $s = 0.0;
+        foreach (self::l($items) as $it) {
+            $s += self::n(self::get($it, [$a])) * self::n(self::get($it, [$b]));
+        }
+        return $s;
+    }
+
+    public static function firstOf(mixed $items, string $field): mixed
+    {
+        $l = self::l($items);
+        return $l ? (self::get($l[0], [$field]) ?? '') : '';
+    }
+
+    public static function maxBy(mixed $items, string $field): float
+    {
+        $m = 0.0;
+        foreach (self::l($items) as $it) {
+            $m = max($m, self::n(self::get($it, [$field])));
+        }
+        return $m;
+    }
+
+    /** an inline style from (property, value, unit) triples */
+    public static function css(array $triples): string
+    {
+        $parts = [];
+        for ($i = 0; $i + 2 < count($triples); $i += 3) {
+            $parts[] = self::s($triples[$i]) . ':' . self::s($triples[$i + 1]) . self::s($triples[$i + 2]);
+        }
+        return implode(';', $parts);
+    }
+
+    /** the class string of a recipe table for a selection (organisms: base, each key, the matching compounds) */
+    public function recipe(string $path, array $sel): string
+    {
+        $r = $this->json($path);
+        $pick = function (string $k) use ($r, $sel): string {
+            $v = trim(self::s($sel[$k] ?? null));
+            return $v !== '' ? $v : trim((string) ($r['defaults'][$k] ?? ''));
+        };
+        $parts = [(string) ($r['base'] ?? '')];
+        foreach ($r['keys'] ?? [] as $k) {
+            $parts[] = (string) ($r['byKey'][$k][$pick($k)] ?? '');
+        }
+        foreach ($r['compound'] ?? [] as $c) {
+            if (self::compoundHits($c, $pick)) {
+                $parts[] = (string) ($c['class'] ?? '');
+            }
+        }
+        return CnMerge::merge(array_filter(array_map('trim', $parts), fn ($p) => $p !== ''));
+    }
+
+    private static function compoundHits(array $c, callable $pick): bool
+    {
+        foreach ($c as $k => $want) {
+            if ($k === 'class') {
+                continue;
+            }
+            if (!in_array($pick((string) $k), explode('|', (string) $want), true)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    /** a preset value of the kit */
+    public function preset(string $path, array $keys): mixed
+    {
+        return self::get(self::get($this->json($path), ['values']), $keys);
+    }
+
+    /** free DOM attributes from (name, value) pairs, as React prints them */
+    public static function attrs(array $kv): array
+    {
+        $out = [];
+        for ($i = 0; $i + 1 < count($kv); $i += 2) {
+            $k = self::s($kv[$i]);
+            $v = $kv[$i + 1];
+            if ($v === null) {
+                continue;
+            }
+            if (is_bool($v)) {
+                if (str_starts_with($k, 'data-') || str_starts_with($k, 'aria-')) {
+                    $out[$k] = self::s($v);
+                } elseif ($v) {
+                    $out[$k] = true;
+                }
+                continue;
+            }
+            $out[$k] = self::s($v);
+        }
+        return $out;
+    }
+
+    /** an attribute map as markup (` name="value"`, a bare name for true, nothing for null and false) */
+    public static function attrHtml(mixed $attrs): string
+    {
+        if (!is_array($attrs)) {
+            return '';
+        }
+        $out = '';
+        foreach ($attrs as $k => $v) {
+            if ($v === null || $v === false) {
+                continue;
+            }
+            $name = htmlspecialchars((string) $k, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
+            $out .= $v === true ? " $name" : " $name=\"" . htmlspecialchars(self::s($v), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') . '"';
+        }
+        return $out;
+    }
+
+    // ---------------------------------------------------------------- bricks (expr.go, utils.go, tags.go)
+
+    public static function isSetStr(mixed $v): bool
+    {
+        return trim(self::s($v)) !== '';
+    }
+
+    public static function defaultIfEmpty(mixed $v, string $fallback): string
+    {
+        $t = trim(self::s($v));
+        return $t === '' ? $fallback : $t;
+    }
+
+    /** a decision table over a trimmed text: mapping[trim(v)] or the fallback */
+    public static function mapOr(mixed $v, array $mapping, string $fallback, bool $lower = false): string
+    {
+        $t = trim(self::s($v));
+        if ($lower) {
+            $t = strtolower($t);
+        }
+        return array_key_exists($t, $mapping) ? (string) $mapping[$t] : $fallback;
+    }
+
+    public static function intMapOr(mixed $v, array $mapping, string $fallback): string
+    {
+        $n = self::i($v);
+        return array_key_exists($n, $mapping) ? (string) $mapping[$n] : $fallback;
+    }
+
+    public static function boolStr(mixed $v): string
+    {
+        return self::t($v) ? 'true' : 'false';
+    }
+
+    public static function concatTrim(array $parts): string
+    {
+        return implode('', array_map(fn ($p) => trim(self::s($p)), $parts));
+    }
+
+    /** class fragments merged with tailwind-merge (strings only, empty ones skipped) */
+    public static function cn(array $parts): string
+    {
+        return CnMerge::merge(array_map(fn ($p) => self::s($p), $parts));
+    }
+
+    /** the brick class contract: recipe base, the selected variants (defaults for empty), compounds, then the tail */
+    public function compose(string $path, array $selection, array $extra): string
+    {
+        $r = $this->json($path);
+        $parts = [];
+        if (trim((string) ($r['base'] ?? '')) !== '') {
+            $parts[] = trim((string) $r['base']);
+        }
+        $pick = function (string $k) use ($r, $selection): string {
+            $c = trim(self::s($selection[$k] ?? null));
+            return $c !== '' ? $c : trim((string) ($r['defaults'][$k] ?? ''));
+        };
+        foreach ($r['keys'] ?? [] as $key) {
+            $choices = $r['byKey'][$key] ?? null;
+            if ($choices === null) {
+                continue;
+            }
+            $choice = $pick($key);
+            if ($choice === '') {
+                if ($choices) {
+                    throw new \RuntimeException("[compose] missing default for key $key");
+                }
+                continue;
+            }
+            if (isset($choices[$choice]) && trim((string) $choices[$choice]) !== '') {
+                $parts[] = (string) $choices[$choice];
+            }
+        }
+        foreach ($r['compound'] ?? [] as $c) {
+            if (self::compoundHits($c, $pick) && trim((string) ($c['class'] ?? '')) !== '') {
+                $parts[] = (string) $c['class'];
+            }
+        }
+        return self::cn([...$parts, ...$extra]);
+    }
+
+    /** the tag of a primitive: the requested one when the allow-list has it, else the fallback */
+    public static function resolveTag(mixed $tag, string $fallback, array $allowed): string
+    {
+        $t = strtolower(trim(self::s($tag)));
+        return $t !== '' && in_array($t, $allowed, true) ? $t : $fallback;
+    }
+
+    /** h1-h6 from a level, h2 by default */
+    public static function titleTag(mixed $level): string
+    {
+        $n = self::i($level);
+        return $n >= 1 && $n <= 6 ? "h$n" : 'h2';
+    }
+
+    /** the inner markup of a Lucide glyph: its nodes with attributes in name order (circle for an unknown name) */
+    public function lucide(mixed $name): string
+    {
+        $icons = $this->json('ui/lucide-icon/lucide-icons.json')['icons'];
+        $nodes = $icons[self::s($name)] ?? $icons['circle'];
+        $out = '';
+        foreach ($nodes as [$tag, $attrs]) {
+            ksort($attrs, SORT_STRING);
+            $out .= '<' . $tag;
+            foreach ($attrs as $k => $v) {
+                $out .= ' ' . $k . '="' . htmlspecialchars((string) $v, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') . '"';
+            }
+            $out .= '></' . $tag . '>';
+        }
+        return $out;
+    }
+}
diff --git a/xgen/runtimes/twig/assets/php/Extension.php b/xgen/runtimes/twig/assets/php/Extension.php
new file mode 100644
index 0000000..09fb72f
--- /dev/null
+++ b/xgen/runtimes/twig/assets/php/Extension.php
@@ -0,0 +1,53 @@
+<?php
+
+declare(strict_types=1);
+
+namespace UI8Kit\Twig;
+
+use Twig\Environment;
+use Twig\Extension\AbstractExtension;
+use Twig\Loader\FilesystemLoader;
+use Twig\TwigFunction;
+
+/**
+ * The ui_* functions of the generated templates. Register it on an Environment whose loader has the package folder
+ * as a root (templates are included as ui/<brick>/<part>.html.twig and blocks/<organism>.html.twig).
+ */
+final class Extension extends AbstractExtension
+{
+    private Runtime $rt;
+
+    public function __construct(string $root)
+    {
+        $this->rt = new Runtime($root);
+    }
+
+    /** an Environment over the package folder with the extension registered (autoescape html, lenient variables) */
+    public static function environment(string $root, array $options = []): Environment
+    {
+        $env = new Environment(new FilesystemLoader([$root]), $options + ['autoescape' => 'html', 'strict_variables' => false, 'cache' => false]);
+        $env->addExtension(new self($root));
+        return $env;
+    }
+
+    public function getFunctions(): array
+    {
+        $static = [
+            'get', 'field', 's', 'text', 't', 'n', 'i', 'eq', 'lt', 'gt', 'le', 'ge', 'add', 'sub', 'mul', 'div', 'and', 'or',
+            'coalesce', 'def', 'l', 'len', 'spread', 'str', 'has', 'cnv', 'tpl', 'num', 'money', 'at', 'page_window',
+            'fit_cols', 'uniq', 'words', 'nbsp', 'nth', 'range', 'max', 'min', 'round', 'count', 'where', 'match', 'pick',
+            'sum_by', 'first_of', 'max_by', 'css', 'attrs', 'is_set_str', 'default_if_empty', 'map_or', 'int_map_or',
+            'bool_str', 'concat_trim', 'cn', 'resolve_tag', 'title_tag',
+        ];
+        $fns = [];
+        foreach ($static as $name) {
+            $fns[] = new TwigFunction('ui_' . $name, [Runtime::class, lcfirst(str_replace('_', '', ucwords($name, '_')))]);
+        }
+        $fns[] = new TwigFunction('ui_attr_html', [Runtime::class, 'attrHtml'], ['is_safe' => ['html']]);
+        $fns[] = new TwigFunction('ui_compose', [$this->rt, 'compose']);
+        $fns[] = new TwigFunction('ui_recipe', [$this->rt, 'recipe']);
+        $fns[] = new TwigFunction('ui_preset', [$this->rt, 'preset']);
+        $fns[] = new TwigFunction('ui_lucide', [$this->rt, 'lucide'], ['is_safe' => ['html']]);
+        return $fns;
+    }
+}
diff --git a/xgen/runtimes/twig/package.json b/xgen/runtimes/twig/package.json
new file mode 100644
index 0000000..8fa6f47
--- /dev/null
+++ b/xgen/runtimes/twig/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ui8kit/xgen-runtime-twig",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Twig emitter: bricks and organisms as include templates printed through a Dialect (twig, jinja, latte), so the Jinja2 and Latte runtimes reuse it; PHP runtime helpers (cn with tailwind merge, variants, tags, the dynamic value rules).",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-spec": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*",
+    "@ui8kit/xgen-runtime-core": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/runtimes/twig/src/brick.ts b/xgen/runtimes/twig/src/brick.ts
new file mode 100644
index 0000000..764c70f
--- /dev/null
+++ b/xgen/runtimes/twig/src/brick.ts
@@ -0,0 +1,182 @@
+// Twig output of the bricks: one include template per part (ui/<dir>/<part>.html.twig) taking `p` (the props by their
+// canonical PascalCase names, as the Go structs have them) and `children` (markup). The class contract is the shared
+// *.variants.json recipe read by ui_compose, so all static runtimes compose the same classes.
+import { allowedTags, type AttrSpec, type BrickDef, type ClassSpec, type ElementNode, type Expr, type Node, type PartDef } from "@ui8kit/xgen-spec";
+import { BANNER, exprType, makeEnv, neverEmptyString, type GeneratedFile, type TypeEnv } from "@ui8kit/xgen-runtime-core";
+import { twig, type Dialect } from "./dialect";
+
+/** CardHeader -> card-header */
+export const kebab = (name: string): string => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+/** the template of a part, relative to the package root */
+export const partTemplate = (brick: BrickDef, part: PartDef, d: Dialect = twig): string => `ui/${brick.dir}/${kebab(part.name)}${d.ext}`;
+
+const pad = (lines: string[], n = 1): string[] => lines.map((l) => (l ? `${"  ".repeat(n)}${l}` : l));
+
+interface Ctx { brick: BrickDef; part: PartDef; env: TypeEnv; d: Dialect; tag?: string; tags: number }
+
+const ZERO: Record<string, string> = { string: "''", bool: "false", int: "0", items: "[]" };
+
+/** an IR expression in the dialect */
+export function printExpr(e: Expr, c: Ctx): string {
+  const d = c.d;
+  const p = (x: Expr): string => printExpr(x, c);
+  switch (e.kind) {
+    case "lit": return typeof e.value === "string" ? d.str(e.value) : String(e.value);
+    case "prop": {
+      const def = c.part.props.find((x) => x.name === e.name)!;
+      return d.orNull(d.field(d.v("p"), e.name), def.type === "attrs" ? d.emptyHash : ZERO[def.type] ?? d.nul);
+    }
+    case "item": {
+      const f = c.env.itemRecord?.fields.find((x) => x.name === e.field);
+      return `ui_field(${d.v("item")}, ${d.str(e.field)}, ${f?.type === "bool" ? "false" : "''"})`;
+    }
+    case "derivedRef": return d.v(`d_${e.name}`);
+    case "resolvedTag": {
+      if (!c.tag) throw new Error(`${c.part.name}: resolvedTag outside a dynamic tag`);
+      return d.v(c.tag);
+    }
+    case "defaultIfEmpty": return `ui_default_if_empty(${p(e.expr)}, ${d.str(e.fallback)})`;
+    case "mapOr": return `ui_map_or(${p(e.expr)}, ${d.hash(Object.entries(e.mapping).map(([k, v]) => [k, d.str(v)]))}, ${d.str(e.fallback)}${e.lower ? ", true" : ""})`;
+    case "intMapOr": return `ui_int_map_or(${p(e.expr)}, ${d.intHash(Object.entries(e.mapping).map(([k, v]): [string, string] => [k, d.str(v)]))}, ${d.str(e.fallback)})`;
+    case "cond": return d.ternary(p(e.test), p(e.then), p(e.else));
+    case "eq": return `ui_eq(${p(e.left)}, ${p(e.right)})`;
+    case "and": return `(${e.exprs.map(p).join(` ${d.and} `)})`;
+    case "or": return `(${e.exprs.map(p).join(` ${d.or} `)})`;
+    case "not": return d.not(p(e.expr));
+    case "isSet": {
+      const t = exprType(e.expr, c.env);
+      if (t === "string") return `ui_is_set_str(${p(e.expr)})`;
+      if (t === "int") return `(${p(e.expr)} > 0)`;
+      return p(e.expr);
+    }
+    case "contains": return d.contains(p(e.expr), d.str(e.substring));
+    case "concat": return `ui_concat_trim(${d.list(e.parts.map(p))})`;
+    case "boolToString": return `ui_bool_str(${p(e.expr)})`;
+    case "intToString": return `ui_s(${p(e.expr)})`;
+  }
+}
+
+/** the class attribute value of a spec: the recipe through ui_compose, else ui_cn over the fragments */
+function classValue(spec: ClassSpec, c: Ctx): string {
+  const d = c.d;
+  const tail: string[] = [];
+  if (spec.staticBase) tail.push(d.str(spec.staticBase));
+  for (const e of spec.extra ?? []) tail.push(printExpr(e, c));
+  for (const st of spec.state ?? []) tail.push(d.ternary(printExpr(st.test, c), d.str(st.classes), "''"));
+  if (spec.includeClassProp !== false && c.part.props.some((p) => p.name === "Class")) tail.push(d.orNull(d.field(d.v("p"), "Class"), "''"));
+  if (spec.recipe) {
+    const id = spec.recipeId ?? c.part.recipeId!;
+    const file = c.brick.recipeFiles[id];
+    if (!file) throw new Error(`${c.part.name}: recipe ${id} has no file`);
+    const sel = Object.entries(spec.recipe).map(([k, src]): [string, string] => [k, typeof src === "string" ? d.orNull(d.field(d.v("p"), src), "''") : printExpr(src, c)]);
+    return `ui_compose(${d.str(`ui/${c.brick.dir}/${file}`)}, ${d.hash(sel)}, ${d.list(tail)})`;
+  }
+  return `ui_cn(${d.list(tail)})`;
+}
+
+const esc = (s: string): string => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+
+function attr(a: AttrSpec, c: Ctx): string {
+  const d = c.d;
+  switch (a.kind) {
+    case "static": return ` ${a.name}="${esc(a.value)}"`;
+    case "expr": {
+      const v = printExpr(a.expr, c);
+      const t = exprType(a.expr, c.env);
+      const set = a.expr.kind === "lit" ? ` ${a.name}="${esc(String(a.expr.value))}"` : ` ${a.name}="${d.attrOut ? d.attrOut(a.name, v) : d.out(v)}"`;
+      if (a.when) return `${d.if(printExpr(a.when, c))}${set}${d.endif}`;
+      if (a.keepEmpty || t !== "string" || neverEmptyString(a.expr, c.env)) return set;
+      return `${d.if(`ui_is_set_str(${v})`)}${set}${d.endif}`;
+    }
+    case "bool": return `${d.if(printExpr(a.expr, c))} ${a.name}${d.endif}`;
+    case "class": {
+      const spec = a.spec ? { ...a.spec, includeClassProp: false } : c.part.classes;
+      if (!spec) throw new Error(`${c.part.name}: class attribute without a contract`);
+      return ` class="${d.out(classValue(spec, c))}"`;
+    }
+    case "rest": return d.out(`ui_attr_html(${d.orNull(d.field(d.v("p"), "Attrs"), d.emptyHash)})`);
+  }
+}
+
+function element(n: ElementNode, c: Ctx): string[] {
+  const d = c.d;
+  const pre: string[] = [];
+  let tag: string;
+  let tagCode: string | undefined;
+  let close: string | undefined;
+  if (n.tag.kind === "static") tag = n.tag.tag;
+  else {
+    tagCode = `tag${++c.tags}`;
+    const value = n.tag.kind === "resolved"
+      ? `ui_resolve_tag(${d.orNull(d.field(d.v("p"), n.tag.fromProp), "''")}, ${d.str(n.tag.fallback)}, ${d.list(allowedTags(n.tag.group).map(d.str))})`
+      : n.tag.kind === "heading"
+        ? `ui_title_tag(${d.orNull(d.field(d.v("p"), n.tag.fromProp), "0")})`
+        : `ui_map_or(${printExpr(n.tag.expr, c)}, ${d.hash(n.tag.tags.map((t) => [t, d.str(t)]))}, ${d.str(n.tag.tags[n.tag.tags.length - 1]!)})`;
+    pre.push(d.set(tagCode, value));
+    tag = d.out(d.v(tagCode));
+    if (d.dynamicTag) {
+      const name = n.tag.kind === "resolved" ? n.tag.fallback : n.tag.kind === "heading" ? "h2" : n.tag.tags[n.tag.tags.length - 1]!;
+      [tag, close] = [d.dynamicTag(name, d.v(tagCode)), name];
+    }
+  }
+  const outer = c.tag;
+  if (tagCode) c.tag = tagCode;
+  try {
+    const attrs = n.attrs.map((a) => attr(a, c));
+    const open = attrs.length <= 2 && attrs.join("").length < 100 ? [`<${tag}${attrs.join("")}>`] : [`<${tag}`, ...pad(attrs.map((a) => a.trimStart())), ">"];
+    if (n.void) return [...pre, ...open];
+    const inline = n.children.every((k) => k.kind === "text" || k.kind === "slot");
+    if (inline) {
+      const body = n.children.map((k) => nodes([k], c).join("")).join("");
+      const last = open.pop()!;
+      return [...pre, ...open, `${last}${body}</${close ?? tag}>`];
+    }
+    return [...pre, ...open, ...pad(nodes(n.children, c)), `</${close ?? tag}>`];
+  } finally {
+    c.tag = outer;
+  }
+}
+
+function nodes(list: Node[], c: Ctx): string[] {
+  const d = c.d;
+  return list.flatMap((n): string[] => {
+    switch (n.kind) {
+      case "element": return element(n, c);
+      case "slot": return [d.raw(d.orNull(d.v("children"), "''"))];
+      case "text": return [d.out(printExpr(n.expr, c))];
+      case "when": {
+        const out = [d.if(printExpr(n.test, c)), ...pad(nodes(n.then, c))];
+        let other = n.else;
+        while (other && other.length === 1 && other[0]!.kind === "when") {
+          const w = other[0]!;
+          out.push(d.elseif(printExpr(w.test, c)), ...pad(nodes(w.then, c)));
+          other = w.else;
+        }
+        if (other?.length) out.push(d.else, ...pad(nodes(other, c)));
+        return [...out, d.endif];
+      }
+      case "forEach": return [d.forIn("item", d.orNull(d.field(d.v("p"), n.itemsProp), "[]")), ...pad(nodes(n.body, c)), d.endfor];
+    }
+  });
+}
+
+/** the header comment of a generated template: the banner, its source and the docs */
+export function header(d: Dialect, source: string, docs: string): string {
+  return d.comment([BANNER, `Source: ${source}`, "", ...docs.split("\n")].join("\n    ").replace(/\s+\n/g, "\n"));
+}
+
+export function emitTwigBrick(brick: BrickDef, source: string, d: Dialect = twig): GeneratedFile[] {
+  const files: GeneratedFile[] = [];
+  for (const part of brick.parts) {
+    const c: Ctx = { brick, part, env: makeEnv(brick, part), d, tags: 0 };
+    const props = part.props.filter((p) => p.type !== "children").map((p) => `${p.name} (${p.type === "items" ? `${p.itemsOf}[]` : p.type})`).join(", ");
+    const lines = [header(d, source, `${part.name}: ${part.docs}\nProps (p): ${props || "none"}${part.props.some((p) => p.type === "children") ? "; children: markup" : ""}.`)];
+    for (const [name, e] of Object.entries(part.derived ?? {})) lines.push(d.set(`d_${name}`, printExpr(e, c)));
+    lines.push(...nodes([part.render], c));
+    files.push({ path: partTemplate(brick, part, d), contents: lines.join("\n") + "\n" });
+  }
+  for (const [id, file] of Object.entries(brick.recipeFiles)) {
+    files.push({ path: `ui/${brick.dir}/${file}`, contents: JSON.stringify({ "//": BANNER, ...(brick.recipes[id] as object) }, null, 2) + "\n" });
+  }
+  return files;
+}
diff --git a/xgen/runtimes/twig/src/dialect.ts b/xgen/runtimes/twig/src/dialect.ts
new file mode 100644
index 0000000..9406ee9
--- /dev/null
+++ b/xgen/runtimes/twig/src/dialect.ts
@@ -0,0 +1,158 @@
+// The Jinja-family syntax the emitters print through. Twig is the only dialect today; Jinja2 differs in a handful of
+// forms (ternary order, `safe` for `raw`, `is not none`, include with a context dict), so a Jinja2 target is a second
+// Dialect object over the same brick and organism emitters, with a Python port of the ui_* helpers.
+
+export interface Dialect {
+  name: "twig" | "jinja" | "latte";
+  /** template file suffix: `.html.twig`, `.html.j2` */
+  ext: string;
+  str(s: string): string;
+  /** the null literal */
+  nul: string;
+  /** a key of a map: `p.Title` (Twig), `p['Title']` (Jinja: a dot would find dict methods such as items) */
+  field(base: string, key: string): string;
+  isNotNull(e: string): string;
+  /** a variable read: `x` (Twig, Jinja), `$x` (Latte); declarations take the bare name */
+  v(name: string): string;
+  emptyHash: string;
+  /** a map with integer keys */
+  intHash(entries: Array<[string, string]>): string;
+  and: string;
+  or: string;
+  contains(hay: string, needle: string): string;
+  /** an element whose name is a variable, opened as a static name rewritten at render (Latte n:tag: a printed name cannot be followed by a line break, and a void name would need no close) */
+  dynamicTag?(name: string, tagVar: string): string;
+  /** an attribute value, when the dialect treats some attributes apart (Latte checks URLs in href and src) */
+  attrOut?(name: string, e: string): string;
+  hash(entries: Array<[string, string]>): string;
+  list(items: string[]): string;
+  /** `a ?? b` (b when a is null or missing) */
+  orNull(a: string, b: string): string;
+  ternary(c: string, a: string, b: string): string;
+  not(a: string): string;
+  /** a value printed without escaping (markup the template built) */
+  raw(e: string): string;
+  /** an escaped value */
+  out(e: string): string;
+  comment(text: string): string;
+  set(name: string, value: string): string;
+  /** a captured block: open, close */
+  capture(name: string): [string, string];
+  if(test: string): string;
+  elseif(test: string): string;
+  else: string;
+  endif: string;
+  forIn(item: string, list: string): string;
+  /** the zero-based index of the innermost loop */
+  loopIndex: string;
+  endfor: string;
+  /** another template rendered with only the given variables */
+  include(template: string, vars: string): string;
+  /** a template named by an expression (a slot fill descriptor) */
+  includeExpr(template: string, vars: string): string;
+  /** a hash with another merged over it */
+  merge(a: string, b: string): string;
+}
+
+/** the ui_* helpers that return markup (an attribute string, an SVG, a rendered template): printed unescaped wherever a
+ * dialect cannot mark them safe at registration (Latte escapes inside a tag even an Html value). The PHP extensions and the
+ * Python environment register the same names as safe. */
+export const MARKUP_HELPERS = ["ui_attr_html", "ui_lucide", "ui_include"] as const;
+/** attributes whose value is a URL: Latte checks those at render and would blank the data: URIs the specs pass on, which React prints as given */
+export const URL_ATTRS = ["href", "src", "action", "formaction", "poster", "cite", "data", "srcset"] as const;
+const isMarkup = (e: string): boolean => MARKUP_HELPERS.some((h) => e.startsWith(`${h}(`));
+const isUrlAttr = (name: string): boolean => (URL_ATTRS as readonly string[]).includes(name);
+
+const q = (s: string): string => `'${s.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
+
+export const twig: Dialect = {
+  name: "twig",
+  ext: ".html.twig",
+  str: q,
+  nul: "null",
+  field: (base, key) => `${base}.${key}`,
+  isNotNull: (e) => `${e} is not null`,
+  v: (name) => name,
+  emptyHash: "{}",
+  intHash: (entries) => `{${entries.map(([k, v]) => `${k}: ${v}`).join(", ")}}`,
+  and: "and",
+  or: "or",
+  contains: (hay, needle) => `(${needle} in ${hay})`,
+  hash: (entries) => `{${entries.map(([k, v]) => `${q(k)}: ${v}`).join(", ")}}`,
+  list: (items) => `[${items.join(", ")}]`,
+  orNull: (a, b) => `(${a} ?? ${b})`,
+  ternary: (c, a, b) => `(${c} ? ${a} : ${b})`,
+  not: (a) => `not (${a})`,
+  raw: (e) => `{{ ${e}|raw }}`,
+  out: (e) => `{{ ${e} }}`,
+  comment: (text) => `{#- ${text.replace(/#}/g, "# }")} -#}`,
+  set: (name, value) => `{%- set ${name} = ${value} -%}`,
+  capture: (name) => [`{%- set ${name} -%}`, `{%- endset -%}`],
+  if: (test) => `{%- if ${test} %}`,
+  elseif: (test) => `{%- elseif ${test} %}`,
+  else: `{%- else %}`,
+  endif: `{%- endif %}`,
+  forIn: (item, list) => `{%- for ${item} in ${list} %}`,
+  loopIndex: "loop.index0",
+  endfor: `{%- endfor %}`,
+  include: (template, vars) => `{{ include(${q(template)}, ${vars}, with_context = false) }}`,
+  includeExpr: (template, vars) => `{{ include(${template}, ${vars}, with_context = false) }}`,
+  merge: (a, b) => `${a}|merge(${b})`,
+};
+
+/** the dialect a Jinja2 target would use (not emitted yet; kept here so the emitters stay dialect-neutral) */
+export const jinja: Dialect = {
+  ...twig,
+  name: "jinja",
+  ext: ".html.j2",
+  nul: "none",
+  field: (base, key) => `${base}[${q(key)}]`,
+  isNotNull: (e) => `${e} is not none`,
+  hash: (entries) => `{${entries.map(([k, v]) => `${q(k)}: ${v}`).join(", ")}}`,
+  orNull: (a, b) => `ui_def(${a}, ${b})`,
+  ternary: (c, a, b) => `(${a} if ${c} else ${b})`,
+  raw: (e) => `{{ ${e}|safe }}`,
+  comment: (text) => `{#- ${text.replace(/#}/g, "# }")} -#}`,
+  elseif: (test) => `{%- elif ${test} %}`,
+  include: (template, vars) => `{{ ui_include(${q(template)}, ${vars}) }}`,
+  includeExpr: (template, vars) => `{{ ui_include(${template}, ${vars}) }}`,
+  merge: (a, b) => `ui_merge(${a}, ${b})`,
+};
+
+/** Latte 3 (PHP expressions, `$` variables, `{tag}` syntax); includes go through ui_include, which renders a template to Html */
+export const latte: Dialect = {
+  name: "latte",
+  ext: ".latte",
+  str: q,
+  nul: "null",
+  field: (base, key) => `${base}[${q(key)}]`,
+  isNotNull: (e) => `(${e} !== null)`,
+  v: (name) => `$${name}`,
+  emptyHash: "[]",
+  intHash: (entries) => `[${entries.map(([k, v]) => `${k} => ${v}`).join(", ")}]`,
+  and: "&&",
+  or: "||",
+  contains: (hay, needle) => `str_contains(${hay}, ${needle})`,
+  attrOut: (name, e) => (isUrlAttr(name) ? `{=${e}|nocheck}` : `{=${e}}`),
+  dynamicTag: (name, tagVar) => `${name} n:tag="${tagVar}"`,
+  hash: (entries) => `[${entries.map(([k, v]) => `${q(k)} => ${v}`).join(", ")}]`,
+  list: (items) => `[${items.join(", ")}]`,
+  orNull: (a, b) => `(${a} ?? ${b})`,
+  ternary: (c, a, b) => `(${c} ? ${a} : ${b})`,
+  not: (a) => `!(${a})`,
+  raw: (e) => `{=${e}|noescape}`,
+  out: (e) => (isMarkup(e) ? `{=${e}|noescape}` : `{=${e}}`),
+  comment: (text) => `{* ${text.replace(/\*\}/g, "* }")} *}`,
+  set: (name, value) => `{var $${name} = ${value}}`,
+  capture: (name) => [`{capture $${name}}`, `{/capture}`],
+  if: (test) => `{if ${test}}`,
+  elseif: (test) => `{elseif ${test}}`,
+  else: `{else}`,
+  endif: `{/if}`,
+  forIn: (item, list) => `{foreach ${list} as $${item}}`,
+  loopIndex: "$iterator->counter0",
+  endfor: `{/foreach}`,
+  include: (template, vars) => `{=ui_include(${q(template)}, ${vars})|noescape}`,
+  includeExpr: (template, vars) => `{=ui_include(${template}, ${vars})|noescape}`,
+  merge: (a, b) => `array_merge(${a}, ${b})`,
+};
diff --git a/xgen/runtimes/twig/src/index.ts b/xgen/runtimes/twig/src/index.ts
new file mode 100644
index 0000000..08ac36b
--- /dev/null
+++ b/xgen/runtimes/twig/src/index.ts
@@ -0,0 +1,7 @@
+export * from "./dialect";
+export * from "./brick";
+export * from "./organism";
+/** the generated Twig package and the twig/twig version it requires */
+export const TWIG_PACKAGE = "ui8kit/twig-ui";
+export const TWIG_VERSION = "^3.21";
+export * from "./php";
diff --git a/xgen/runtimes/twig/src/organism.ts b/xgen/runtimes/twig/src/organism.ts
new file mode 100644
index 0000000..960c4b2
--- /dev/null
+++ b/xgen/runtimes/twig/src/organism.ts
@@ -0,0 +1,278 @@
+// Twig output of the organisms (blocks, components, parts, patterns): blocks/<name>.html.twig, called with `p` (the
+// props by their JSON names plus className and the slots) and `children` (markup). Values are the JSON shapes of the
+// TypeScript props, read with the ui_* helpers (JS truthiness, ===, String(), cn), like the Go templ output. A slot
+// without arguments is passed rendered (markup); a slot with arguments is a template of its own, passed as a
+// descriptor {t: template, v: captured values} and called with the arguments as a0, a1... Events are left out.
+import type { OrganismSpec, SlotFill, Value, ViewNode } from "@ui8kit/xgen-screens";
+import { fileName, isGroup, isOp, isRef } from "@ui8kit/xgen-screens";
+import type { PartDef } from "@ui8kit/xgen-spec";
+import type { GeneratedFile, PartRef } from "@ui8kit/xgen-runtime-core";
+import { header, partTemplate } from "./brick";
+import { twig, type Dialect } from "./dialect";
+
+export interface TwigOrgDeps {
+  parts: Record<string, PartRef>;
+  organisms: Record<string, OrganismSpec>;
+  /** the recipe and preset files, relative to the package root */
+  recipePath: (file: string) => string;
+  presetPath: (name: string) => string;
+}
+
+const ident = (name: string): string => name.replace(/[^A-Za-z0-9_]/g, "_");
+const local = (name: string): string => `v_${ident(name)}`;
+const constVar = (name: string): string => `k_${ident(name)}`;
+export const organismTemplate = (name: string, d: Dialect = twig): string => `blocks/${fileName(name)}${d.ext}`;
+const pad = (lines: string[]): string[] => lines.map((l) => (l ? `  ${l}` : l));
+
+/** the heads of the references in a subtree (event handlers left out) */
+function refHeads(x: unknown, out = new Set<string>()): Set<string> {
+  if (Array.isArray(x)) x.forEach((y) => refHeads(y, out));
+  else if (x && typeof x === "object") {
+    const o = x as Record<string, unknown>;
+    if (typeof o.$ === "string") out.add(o.$.split(".")[0]!);
+    for (const [k, v] of Object.entries(o)) if (k !== "on") refHeads(v, out);
+  }
+  return out;
+}
+
+interface Ctx {
+  org: OrganismSpec;
+  deps: TwigOrgDeps;
+  d: Dialect;
+  source: string;
+  scope: Map<string, string>;
+  /** fill templates of this organism */
+  fills: GeneratedFile[];
+  n: number;
+  recipes: Set<string>;
+  presets: Set<string>;
+  inFill: boolean;
+}
+
+const VARIADIC: Record<string, string> = { and: "and", or: "or", max: "max", min: "min", coalesce: "coalesce", cn: "cnv", list: "list", css: "css" };
+const BINARY: Record<string, string> = {
+  eq: "eq", gt: "gt", lt: "lt", ge: "ge", le: "le", add: "add", sub: "sub", mul: "mul", div: "div", round: "round", str: "str", has: "has",
+  range: "range", len: "len", words: "words", nbsp: "nbsp", nth: "nth", money: "money", num: "num", at: "at", pageWindow: "page_window",
+  fitCols: "fit_cols", uniq: "uniq", count: "count", where: "where", match: "match", pick: "pick",
+};
+
+export function printValue(v: Value, c: Ctx): string {
+  const d = c.d;
+  if (v === null || v === undefined) return d.nul;
+  if (typeof v === "string") return d.str(v);
+  if (typeof v === "number" || typeof v === "boolean") return String(v);
+  if (isRef(v)) {
+    const [head, ...rest] = v.$.split(".");
+    let base: string;
+    if (c.scope.has(head!)) base = c.scope.get(head!)!;
+    else if (head === "className") base = d.orNull(d.field(d.v("p"), "className"), "''");
+    else if (c.org.consts?.[head!]) base = d.v(constVar(head!));
+    else throw new Error(`${c.org.name}: unknown name ${head}`);
+    return rest.length ? `ui_get(${base}, ${d.list(rest.map(d.str))})` : base;
+  }
+  if (isGroup(v)) {
+    const hash = d.hash(Object.entries(v).filter(([k]) => k !== "...").map(([k, x]) => [k, printValue(x, c)]));
+    return "..." in v ? `ui_spread(${printValue(v["..."]!, c)}, ${hash})` : hash;
+  }
+  if (!isOp(v)) throw new Error(`${c.org.name}: unknown value ${JSON.stringify(v)}`);
+  const a = (i: number): string => printValue(v.args[i]!, c);
+  const all = (): string => v.args.map((x) => printValue(x, c)).join(", ");
+  if (v.op === "list") return d.list(v.args.map((x) => printValue(x, c)));
+  if (VARIADIC[v.op]) return `ui_${VARIADIC[v.op]}(${d.list(v.args.map((x) => printValue(x, c)))})`;
+  if (BINARY[v.op]) return `ui_${BINARY[v.op]}(${all()})`;
+  switch (v.op) {
+    case "ne": return d.not(`ui_eq(${a(0)}, ${a(1)})`);
+    case "not": return d.not(`ui_t(${a(0)})`);
+    case "undef": return d.nul;
+    case "cond": return d.ternary(`ui_t(${a(0)})`, a(1), a(2));
+    case "tpl": return `ui_tpl(${a(0)}, ${d.list(v.args.slice(1).map((x) => printValue(x, c)))})`;
+    case "sumBy": return `ui_sum_by(${a(0)}, ${d.str(String(v.args[1]))}, ${d.str(String(v.args[2]))})`;
+    case "firstOf": return `ui_first_of(${a(0)}, ${d.str(String(v.args[1]))})`;
+    case "maxBy": return `ui_max_by(${a(0)}, ${d.str(String(v.args[1]))})`;
+    case "preset": {
+      c.presets.add(String(v.args[0]));
+      return `ui_preset(${d.str(c.deps.presetPath(String(v.args[0])))}, ${d.list(String(v.args[1]).split(".").map(d.str))})`;
+    }
+    case "recipe": {
+      const [name, ...rest] = v.args;
+      const file = c.org.recipes?.[String(name)];
+      if (!file) throw new Error(`${c.org.name}: recipe ${String(name)} not declared`);
+      c.recipes.add(file);
+      const pairs: Array<[string, string]> = [];
+      for (let i = 0; i + 1 < rest.length; i += 2) pairs.push([String(rest[i]), printValue(rest[i + 1]!, c)]);
+      return `ui_recipe(${d.str(c.deps.recipePath(file))}, ${d.hash(pairs)})`;
+    }
+  }
+  throw new Error(`${c.org.name}: op ${v.op} has no Twig form`);
+}
+
+const test = (v: Value, c: Ctx): string => `ui_t(${printValue(v, c)})`;
+
+/** a value for a typed prop of a brick (the zero value rules of the Go structs) */
+function brickProp(part: PartDef, name: string, v: Value, c: Ctx): string {
+  const def = part.props.find((p) => p.name === name);
+  if (!def) throw new Error(`${c.org.name}: ${part.name} has no prop ${name}`);
+  const g = printValue(v, c);
+  if (def.goType === "uiutils.HeadingLevel") return `ui_i(${g})`;
+  switch (def.type) {
+    case "string": return typeof v === "string" ? g : `ui_s(${g})`;
+    case "bool": return typeof v === "boolean" ? g : `ui_t(${g})`;
+    case "int": return typeof v === "number" ? String(Math.round(v)) : `ui_i(${g})`;
+    case "items": return `ui_l(${g})`;
+    default: throw new Error(`${c.org.name}: ${part.name}.${name} of type ${def.type} cannot take a value`);
+  }
+}
+
+function withScope<T>(c: Ctx, names: Array<[string, string]>, f: () => T): T {
+  const prev = new Map(c.scope);
+  for (const [k, v] of names) c.scope.set(k, v);
+  try { return f(); } finally { c.scope = prev; }
+}
+
+const walk = (nodes: ViewNode[], c: Ctx): string[] => nodes.flatMap((n) => node(n, c));
+
+/** children rendered into a variable first, then the include */
+function call(template: string, props: Array<[string, string]>, children: string[], c: Ctx, dynamic = false): string[] {
+  const d = c.d;
+  const vars: Array<[string, string]> = [["p", d.hash(props)]];
+  const pre: string[] = [];
+  if (children.length) {
+    const name = `c_${++c.n}`;
+    const [open, close] = d.capture(name);
+    pre.push(open, ...pad(children), close);
+    vars.push(["children", d.v(name)]);
+  }
+  return [...pre, dynamic ? d.includeExpr(template, d.hash(vars)) : d.include(template, d.hash(vars))];
+}
+
+function node(n: ViewNode, c: Ctx): string[] {
+  const d = c.d;
+  if ("use" in n) {
+    const ref = c.deps.parts[n.use];
+    if (!ref) throw new Error(`${c.org.name}: unknown part ${n.use}`);
+    const props: Array<[string, string]> = [];
+    for (const [k, v] of Object.entries(n.props ?? {})) {
+      if (k === "Class" && v === "") continue;
+      props.push([k, brickProp(ref.part, k, v, c)]);
+    }
+    const attrs = Object.entries(n.attrs ?? {});
+    if (attrs.length) {
+      const ap = ref.part.props.find((p) => p.type === "attrs");
+      if (!ap) throw new Error(`${c.org.name}: ${n.use} takes no free attributes`);
+      props.push([ap.name, `ui_attrs(${d.list(attrs.flatMap(([k, v]) => [d.str(k), printValue(v, c)]))})`]);
+    }
+    return call(partTemplate(ref.brick, ref.part, d), props, walk(n.children ?? [], c), c);
+  }
+  if ("text" in n) return [d.out(`ui_text(${printValue(n.text, c)})`)];
+  if ("when" in n) {
+    const out: string[] = [];
+    let at: ViewNode | undefined = n;
+    let first = true;
+    while (at && "when" in at) {
+      out.push(first ? d.if(test(at.when, c)) : d.elseif(test(at.when, c)), ...pad(walk(at.then, c)));
+      first = false;
+      const other: ViewNode[] = at.else ?? [];
+      if (other.length === 1 && "when" in other[0]!) at = other[0];
+      else { if (other.length) out.push(d.else, ...pad(walk(other, c))); at = undefined; }
+    }
+    return [...out, d.endif];
+  }
+  if ("each" in n) {
+    const names: Array<[string, string]> = [[n.as, d.v(local(n.as))], ...(n.index ? [[n.index, d.v(local(n.index))] as [string, string]] : [])];
+    const list = printValue(n.each, c);
+    const body = withScope(c, names, () => walk(n.do, c));
+    return [d.forIn(local(n.as), `ui_l(${list})`), ...(n.index ? [`  ${d.set(local(n.index), d.loopIndex)}`] : []), ...pad(body), d.endfor];
+  }
+  if ("slot" in n) {
+    if (n.slot === "children") {
+      if (c.inFill) throw new Error(`${c.org.name}: children rendered inside a slot fill`);
+      return [d.raw(d.orNull(d.v("children"), "''"))];
+    }
+    const decl = c.org.slots.find((s) => s.name === n.slot);
+    if (!decl) throw new Error(`${c.org.name}: unknown slot ${n.slot}`);
+    const slot = d.field(d.v("p"), n.slot);
+    if (!decl.args.length) return [d.raw(d.orNull(slot, "''"))];
+    const args = (n.args ?? []).map((a, i): [string, string] => [`a${i}`, printValue(a, c)]);
+    return [d.if(d.isNotNull(d.orNull(slot, d.nul))), `  ${d.includeExpr(d.field(slot, "t"), d.merge(d.field(slot, "v"), d.hash(args)))}`, d.endif];
+  }
+  if ("organism" in n) {
+    const other = c.deps.organisms[n.organism];
+    if (!other) throw new Error(`${c.org.name}: unknown organism ${n.organism}`);
+    const props: Array<[string, string]> = [];
+    for (const [k, v] of Object.entries(n.props ?? {})) props.push([k, k === "className" ? `ui_cnv(${d.list([printValue(v, c)])})` : printValue(v, c)]);
+    let children: string[] = [];
+    const pre: string[] = [];
+    for (const [name, sl] of Object.entries(n.slots ?? {})) {
+      if (sl.forward !== undefined) {
+        if (name === "children") children = [d.raw(d.orNull(sl.forward === "children" ? d.v("children") : d.field(d.v("p"), sl.forward), "''"))];
+        else props.push([name, d.orNull(d.field(d.v("p"), sl.forward), d.nul)]);
+        continue;
+      }
+      if (name === "children") { children = walk(sl.do, c); continue; }
+      const decl = other.slots.find((s) => s.name === name);
+      if (!decl) throw new Error(`${c.org.name}: ${n.organism} has no slot ${name}`);
+      props.push([name, fill(sl, decl.args.length, c, pre)]);
+    }
+    return [...pre, ...call(organismTemplate(n.organism, d), props, children, c)];
+  }
+  return [];
+}
+
+/** a slot fill: rendered in place when it takes no arguments, else a template of its own with the names it reads */
+function fill(sl: SlotFill, arity: number, c: Ctx, pre: string[]): string {
+  const d = c.d;
+  const prevFill = c.inFill;
+  c.inFill = true;
+  try {
+    if (!arity) {
+      const name = `f_${++c.n}`;
+      const [open, close] = d.capture(name);
+      pre.push(open, ...pad(walk(sl.do, c)), close);
+      return d.v(name);
+    }
+    const used = refHeads(sl.do);
+    const captured = [...c.scope.entries()].filter(([k]) => used.has(k) && !sl.args.includes(k));
+    const passed = captured.filter(([, code]) => /^\$?[A-Za-z_]\w*$/.test(code));
+    const path = `blocks/${fileName(c.org.name)}.fill${c.fills.length + 1}${d.ext}`;
+    c.fills.push({ path, contents: "" });
+    const at = c.fills.length - 1;
+    const body = withScope(c, sl.args.map((a): [string, string] => [a, d.v(local(a))]), () => walk(sl.do, c));
+    const lines = [
+      header(d, c.source, `${c.org.name}: the fill of a slot (${sl.args.join(", ")}); vars: p, the values it reads, the slot arguments as a0, a1...`),
+      ...consts(c),
+      ...sl.args.map((a, i) => d.set(local(a), d.v(`a${i}`))),
+      ...body,
+    ];
+    c.fills[at] = { path, contents: lines.join("\n") + "\n" };
+    return d.hash([["t", d.str(path)], ["v", d.hash([["p", d.v("p")], ...passed.map(([, code]): [string, string] => [code.replace(/^\$/, ""), code])])]]);
+  } finally {
+    c.inFill = prevFill;
+  }
+}
+
+function consts(c: Ctx): string[] {
+  return Object.entries(c.org.consts ?? {}).map(([name, table]) => c.d.set(constVar(name), c.d.hash(Object.entries(table).map(([k, v]) => [k, c.d.str(v)]))));
+}
+
+export function emitTwigOrganism(org: OrganismSpec, deps: TwigOrgDeps, source: string, d: Dialect = twig): { files: GeneratedFile[]; recipes: Set<string>; presets: Set<string> } {
+  const c: Ctx = { org, deps, d, source, scope: new Map(), fills: [], n: 0, recipes: new Set(), presets: new Set(), inFill: false };
+  const used = refHeads([org.view, org.derived ?? []]);
+  const top: string[] = [...consts(c)];
+  for (const p of org.props) {
+    if (!used.has(p.name)) continue;
+    top.push(d.set(local(p.name), p.default !== undefined ? d.orNull(d.field(d.v("p"), p.name), printValue(p.default as Value, c)) : d.orNull(d.field(d.v("p"), p.name), d.nul)));
+    c.scope.set(p.name, d.v(local(p.name)));
+  }
+  // a slot read as a value is whether it was given (`when: actions`)
+  for (const sl of org.slots) if (used.has(sl.name)) c.scope.set(sl.name, `(${d.isNotNull(d.orNull(d.field(d.v("p"), sl.name), d.nul))})`);
+  for (const dv of org.derived ?? []) {
+    if (!used.has(dv.name)) continue;
+    top.push(d.set(local(dv.name), printValue(dv.value, c)));
+    c.scope.set(dv.name, d.v(local(dv.name)));
+  }
+  const body = walk(org.view, c);
+  const props = [...org.props.map((p) => p.name), ...(org.className ? ["className"] : []), ...org.slots.map((s) => `${s.name} (slot${s.args.length ? `: ${s.args.map((a) => a.name).join(", ")}` : ""})`)];
+  const doc = `${org.docs}\nProps (p): ${props.join(", ") || "none"}${org.children ? "; children: markup" : ""}.`;
+  const file = { path: organismTemplate(org.name, d), contents: [header(d, source, doc), ...top, ...body].join("\n") + "\n" };
+  return { files: [file, ...c.fills], recipes: c.recipes, presets: c.presets };
+}
diff --git a/xgen/runtimes/twig/src/php.ts b/xgen/runtimes/twig/src/php.ts
new file mode 100644
index 0000000..dbf59c8
--- /dev/null
+++ b/xgen/runtimes/twig/src/php.ts
@@ -0,0 +1,14 @@
+// The PHP helpers shared by the PHP template runtimes (Twig, Latte): assets/php-shared holds Runtime.php and CnMerge.php
+// with the namespace written as `UI8Kit\{{RUNTIME}}`; each package gets them in its own namespace (UI8Kit\Twig,
+// UI8Kit\Latte) next to its own Extension.php, so two packages in one app never declare the same class.
+import { readFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+
+const SHARED = join(import.meta.dir, "..", "assets", "php-shared");
+export const PHP_SHARED_SOURCE = "xgen/runtimes/twig/assets/php-shared";
+
+/** the shared helpers as [file name, PHP source] in the namespace UI8Kit\<runtime> (`Twig`, `Latte`) */
+export function phpHelpers(runtime: string): Array<[string, string]> {
+  return readdirSync(SHARED).filter((n) => n.endsWith(".php")).sort()
+    .map((n): [string, string] => [n, readFileSync(join(SHARED, n), "utf8").replaceAll("{{RUNTIME}}", runtime)]);
+}
diff --git a/xgen/runtimes/twig/test/emit.test.ts b/xgen/runtimes/twig/test/emit.test.ts
new file mode 100644
index 0000000..d74013c
--- /dev/null
+++ b/xgen/runtimes/twig/test/emit.test.ts
@@ -0,0 +1,43 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { emitTwigBrick, jinja, kebab, twig } from "../src/index";
+
+const plan = planBuild(join(import.meta.dir, "..", "..", "..", ".."));
+
+test("every brick makes one template per part with the banner, the same twice", () => {
+  for (const { brick } of plan.bricks) {
+    if (brick.id === "ui.lucide-icon") continue; // an asset, not emitted
+    const a = emitTwigBrick(brick, "x"), b = emitTwigBrick(brick, "x");
+    expect(a.map((f) => f.contents)).toEqual(b.map((f) => f.contents));
+    for (const part of brick.parts) {
+      const f = a.find((x) => x.path === `ui/${brick.dir}/${kebab(part.name)}.html.twig`);
+      expect(f?.contents.startsWith("{#- Code generated by xgen. DO NOT EDIT.")).toBe(true);
+    }
+  }
+});
+
+test("part names map to kebab file names", () => {
+  expect(kebab("CardHeader")).toBe("card-header");
+  expect(kebab("Button")).toBe("button");
+});
+
+test("the Jinja dialect prints the same tree with its own forms", () => {
+  const button = plan.bricks.find((b) => b.brick.id === "ui.button")!.brick;
+  const j = emitTwigBrick(button, "x", jinja).find((f) => f.path.endsWith(".html.j2"))!;
+  expect(j.contents).toContain("|safe }}");
+  expect(j.contents).not.toContain("|raw");
+  expect(j.contents).toContain(" if ");
+  expect(twig.ternary("c", "a", "b")).toBe("(c ? a : b)");
+  expect(jinja.ternary("c", "a", "b")).toBe("(a if c else b)");
+});
+
+test("the twig package is a target of the plan with organisms, the PHP runtime and the ui8kit zones", () => {
+  const t = plan.targets.find((x) => x.runtime === "twig")!;
+  expect(t.files.some((f) => f.path === "blocks/pager.html.twig")).toBe(true);
+  expect(t.files.some((f) => f.path === "php/Runtime.php")).toBe(true);
+  const pkg = JSON.parse(t.files.find((f) => f.path === "package.json")!.contents) as { ui8kit: { kit: string[]; composition: string[]; blockRoot: string[] } };
+  expect(pkg.ui8kit.kit).toEqual(["ui", "php"]);
+  expect(pkg.ui8kit.composition).toEqual(["blocks"]);
+  expect(pkg.ui8kit.blockRoot.length).toBeGreaterThan(0);
+});
diff --git a/xgen/runtimes/vue/README.md b/xgen/runtimes/vue/README.md
new file mode 100644
index 0000000..8569382
--- /dev/null
+++ b/xgen/runtimes/vue/README.md
@@ -0,0 +1,10 @@
+# @ui8kit/xgen-runtime-vue
+
+Vue 3 emitter (SFC, `<script setup lang="ts">`): bricks, organisms, screens, app scaffold.
+
+Part of xgen (see `../README.md` and `../../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
+
+- `src/emit.ts`: one `.vue` file per part: the variant tables and the props type in a plain `<script>`, the component in `<script setup>` (typed `defineProps` with reactive destructure, `class` as a prop, free attributes through `useAttrs()`, the default slot, `<component :is>` for resolved tags).
+- `src/view.ts`: organisms and screens through the shared walker of runtimes/core with a Vue `Syntax`: `v-if` / `v-for` on the element of a branch (a `<template>` around several nodes), scoped slots, `defineEmits`, `computed`.
+- `src/template.ts`: the brace form of the walker in Vue text (`name={expr}` -> `:name="expr"`, string literals in single quotes).
+- `src/app.ts`: the host app (Vite, `@vitejs/plugin-vue`), screens loaded with `defineAsyncComponent`; `assets/url.ts` is the reactive URL port.
diff --git a/xgen/runtimes/vue/assets/LucideIcon.vue b/xgen/runtimes/vue/assets/LucideIcon.vue
new file mode 100644
index 0000000..5635552
--- /dev/null
+++ b/xgen/runtimes/vue/assets/LucideIcon.vue
@@ -0,0 +1,38 @@
+<!--
+  LucideIcon: a Lucide glyph (ISC license) by kebab-case name, drawn from the registry next to this file.
+  Decorative (aria-hidden) unless a `label` is given.
+-->
+<script lang="ts">
+export type LucideIconProps = { name: string; size?: number; strokeWidth?: number; label?: string; class?: string };
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { cn } from "../../utils";
+import { LUCIDE } from "./lucide-icons";
+
+const { name, size = 16, strokeWidth = 2, label, class: className } = defineProps<LucideIconProps>();
+const nodes = computed(() => LUCIDE[name] ?? LUCIDE["circle"] ?? []);
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    :width="size"
+    :height="size"
+    fill="none"
+    stroke="currentColor"
+    :stroke-width="strokeWidth"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :class="cn('inline-block shrink-0', className)"
+    :aria-hidden="label ? undefined : 'true'"
+    :aria-label="label"
+    :role="label ? 'img' : undefined"
+    data-slot="icon"
+    :data-lucide="name"
+  >
+    <component :is="tag" v-for="([tag, attrs], i) in nodes" :key="i" v-bind="attrs" />
+  </svg>
+</template>
diff --git a/xgen/runtimes/vue/assets/ScreenOutlet.vue b/xgen/runtimes/vue/assets/ScreenOutlet.vue
new file mode 100644
index 0000000..a7a0b1b
--- /dev/null
+++ b/xgen/runtimes/vue/assets/ScreenOutlet.vue
@@ -0,0 +1,12 @@
+<!-- The outlet of the host frame: renders the screen chunk behind a loader. -->
+<script setup lang="ts">
+import { defineAsyncComponent, type Component } from "vue";
+import type { UrlPort } from "./core";
+
+const { load, url } = defineProps<{ load: () => Promise<{ default: Component }>; url: UrlPort }>();
+const Screen = defineAsyncComponent(load);
+</script>
+
+<template>
+  <Screen :url="url" />
+</template>
diff --git a/xgen/runtimes/vue/assets/url.ts b/xgen/runtimes/vue/assets/url.ts
new file mode 100644
index 0000000..f9aebde
--- /dev/null
+++ b/xgen/runtimes/vue/assets/url.ts
@@ -0,0 +1,8 @@
+// The URL as a reactive port for Vue: the hash store of the app runtime, mirrored into a reactive object.
+import { reactive } from "vue";
+import { createHashStore, type UrlPort } from "./core";
+
+const store = createHashStore();
+
+export const url: UrlPort = reactive({ ...store.getSnapshot(), go: store.go });
+store.subscribe(() => Object.assign(url, store.getSnapshot()));
diff --git a/xgen/runtimes/vue/package.json b/xgen/runtimes/vue/package.json
new file mode 100644
index 0000000..a31adcd
--- /dev/null
+++ b/xgen/runtimes/vue/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ui8kit/xgen-runtime-vue",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Vue 3 emitter (SFC, <script setup lang=\"ts\">): bricks, organisms, screens, app scaffold.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-spec": "workspace:*",
+    "@ui8kit/xgen-screens": "workspace:*",
+    "@ui8kit/xgen-runtime-core": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/runtimes/vue/src/app.ts b/xgen/runtimes/vue/src/app.ts
new file mode 100644
index 0000000..7f9d4cc
--- /dev/null
+++ b/xgen/runtimes/vue/src/app.ts
@@ -0,0 +1,63 @@
+// Scaffold of the Vue host app: config, entry, and the App that renders the screen named by the URL (/<key>/#/<route>).
+// Screens load on demand (one chunk each); content, data and menus come from the shared package, emitted once.
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import type { AppSpec, ScreenSpec } from "@ui8kit/xgen-screens";
+import { BANNER, HOST_GEN, SHARED, appCss, hostUrlAsset, indexHtml, jsonFile, screenKey, viteConfig, withBanner, type GeneratedFile } from "@ui8kit/xgen-runtime-core";
+
+const UI = "@ui8kit/vue-ui";
+
+export function appScaffold(app: AppSpec, screens: ScreenSpec[]): GeneratedFile[] {
+  const loaders = screens.map((s) => `  ${JSON.stringify(screenKey(s.id))}: () => import("./screens/${s.name}.vue"),`);
+  const appVue = [
+    `<!-- ${BANNER} -->`,
+    `<script setup lang="ts">`,
+    `import type { Component } from "vue";`,
+    `import { Block, Link, List, ListItem, Title } from "${UI}";`,
+    `import { SCREENS } from "${SHARED}/screens";`,
+    `import { url } from "./runtime/url";`,
+    `import ScreenOutlet from "./runtime/ScreenOutlet.vue";`,
+    ``,
+    `const { screen, title } = defineProps<{ screen: string; title: string }>();`,
+    ``,
+    `/** one chunk per screen: a landing is a screen spec, not an app */`,
+    `const LOADERS: Record<string, () => Promise<{ default: Component }>> = {`,
+    ...loaders,
+    `};`,
+    `const load = LOADERS[screen];`,
+    `</script>`,
+    ``,
+    `<template>`,
+    `  <Block v-if="!load" tag="main" id="main-content" class="mx-auto w-full max-w-3xl px-4 py-12" data-testid="host-index">`,
+    `    <Title :as="1" size="2xl" weight="semibold">{{ title }}</Title>`,
+    `    <List class="mt-6 grid gap-2">`,
+    `      <ListItem v-for="s in SCREENS" :key="s.key"><Link class="underline" :href="\`/\${s.key}/\`" data-testid="host-screen">{{ s.key }}</Link></ListItem>`,
+    `    </List>`,
+    `  </Block>`,
+    `  <ScreenOutlet v-else :load="load" :url="url" />`,
+    `</template>`,
+    ``,
+  ].join("\n");
+  const assets = join(import.meta.dir, "..", "assets");
+  return [
+    jsonFile("package.json", {
+      name: app.name, private: true, version: "0.0.0", type: "module",
+      description: `Generated by xgen from xgen.app.json: the Vue 3 host of ${screens.length} screens (/<screen>/#/<route>). Generated under ${HOST_GEN}/; src/ is the front controller.`,
+      ui8kit: { runtime: "vue", generated: true, kit: [`${HOST_GEN}/runtime`], composition: [`${HOST_GEN}/App.vue`, `${HOST_GEN}/screens`], blockRoot: [`${HOST_GEN}/App.vue`, `${HOST_GEN}/screens`] },
+      scripts: { dev: "vite", build: "vite build", preview: "vite preview", check: "vue-tsc --noEmit -p tsconfig.json" },
+      dependencies: { [SHARED]: "workspace:*", [UI]: "workspace:*", vue: "^3.5.43" },
+      devDependencies: { "@tailwindcss/vite": "^4.3.3", "@vitejs/plugin-vue": "^6.0.9", tailwindcss: "^4.3.3", typescript: "~6.0.2", vite: "^8.3.0", "vue-tsc": "^3.3.12" },
+    }),
+    { path: "index.html", contents: indexHtml(app).replace("__EXT__", "ts") },
+    viteConfig([`import vue from "@vitejs/plugin-vue";`], "vue()", app),
+    {
+      path: "tsconfig.json",
+      contents: `// ${BANNER}\n{\n  "compilerOptions": {\n    "target": "ES2023", "lib": ["ES2023", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "bundler", "jsx": "preserve",\n    "strict": true, "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "isolatedModules": true, "verbatimModuleSyntax": true,\n    "types": ["vite/client"]\n  },\n  "include": ["src/**/*.ts", "src/**/*.vue", "${HOST_GEN}/**/*.ts", "${HOST_GEN}/**/*.vue"]\n}\n`,
+    },
+    appCss(UI),
+    { path: "src/main.ts", contents: withBanner(`import { createApp } from "vue";\nimport "./app.css";\nimport { bootScreen, screenKeyOf } from "${SHARED}/screens";\nimport App from "../${HOST_GEN}/App.vue";\n\nconst screen = screenKeyOf(location);\nconst title = ${JSON.stringify(app.title)};\nbootScreen(screen, ${JSON.stringify(app.theme)}, title);\ncreateApp(App, { screen, title }).mount("#app");\n`) },
+    { path: `${HOST_GEN}/App.vue`, contents: appVue },
+    hostUrlAsset("url.ts", readFileSync(join(assets, "url.ts"), "utf8")),
+    { path: `${HOST_GEN}/runtime/ScreenOutlet.vue`, contents: `<!-- ${BANNER} -->\n` + readFileSync(join(assets, "ScreenOutlet.vue"), "utf8").replace(/from "\.\/core"/g, `from "${SHARED}/runtime/core"`) },
+  ];
+}
diff --git a/xgen/runtimes/vue/src/emit.ts b/xgen/runtimes/vue/src/emit.ts
new file mode 100644
index 0000000..dd160fb
--- /dev/null
+++ b/xgen/runtimes/vue/src/emit.ts
@@ -0,0 +1,197 @@
+import { fileName } from "@ui8kit/xgen-screens";
+
+/**
+ * Vue 3 emitter: one kebab-case `.vue` file per part. The variant tables and the props type sit in a plain `<script>`
+ * (exported like the Svelte module script), the component in `<script setup lang="ts">`: typed `defineProps` with
+ * reactive destructure, `class` as a prop (shadcn-vue style), the free attributes through `useAttrs()`, the default slot
+ * for children and `<component :is>` for resolved tags.
+ */
+
+import { type AttrSpec, type BrickDef, type ElementNode, type Node, type PartDef } from "@ui8kit/xgen-spec";
+import { localIdent } from "@ui8kit/xgen-spec";
+import { BANNER, exprType, indent, wrapText, makeEnv, usesItem, type Emitter, type GeneratedFile, type TypeEnv } from "@ui8kit/xgen-runtime-core";
+import { formatAttr, printTsExpr, tagHead, wrapList, type TsPrintCtx } from "@ui8kit/xgen-runtime-core";
+import { classesExpr, declaredProps, neverEmptyString, partHead, printInlineClassSpec, isPassthroughForward } from "@ui8kit/xgen-runtime-core";
+import { attrExpr, each, ifChain, vueAttr } from "./template";
+
+const IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+/** Vue matches a prop by its camelCase name: `aria-label` is declared `ariaLabel` (the template may write either) */
+export const camelProp = (name: string): string => name.replace(/-([a-z])/g, (_m, c: string) => c.toUpperCase());
+
+interface State { usesResolveTag: boolean; usesCn: boolean; usesRest: boolean }
+
+export class VueEmitter implements Emitter {
+  readonly runtime = "vue" as const;
+
+  constructor(private readonly utilsPath = "../../utils") {}
+
+  emit(brick: BrickDef): GeneratedFile[] {
+    return brick.parts.map((part) => this.emitPart(brick, part));
+  }
+
+  private emitPart(brick: BrickDef, part: PartDef): GeneratedFile {
+    const env: TypeEnv = makeEnv(brick, part);
+    const decls = declaredProps(brick, part);
+    const helperImports = new Set<string>();
+    const head = partHead(brick, part);
+    const state: State = { usesResolveTag: false, usesCn: false, usesRest: false };
+    const hasChildren = part.props.some((p) => p.type === "children");
+
+    const typeFields = decls.map((d) => `  ${camelProp(d.htmlName)}?: ${d.tsType};`);
+    typeFields.push(`  class?: string;`);
+    const destructure = decls.map((d) => (camelProp(d.htmlName) === d.local ? d.local : `${camelProp(d.htmlName)}: ${d.local}`));
+    destructure.push(`class: className`);
+
+    // the template reads a computed by its name, the script by `.value`
+    const ctxFor = (script: boolean): TsPrintCtx => ({
+      env,
+      propCode: (name) => {
+        if (name === "Class") return "className";
+        const d = decls.find((x) => x.def.name === name);
+        if (!d) throw new Error(`${brick.id}/${part.name}: prop ${name} not declared for Vue`);
+        return d.local;
+      },
+      itemCode: (field) => `item.${localIdent(field)}`,
+      derivedCode: (name) => `${name}Value${script ? ".value" : ""}`,
+      resolvedTagCode: () => `resolvedTagValue${script ? ".value" : ""}`,
+      helpers: helperImports,
+    });
+    const ctx = ctxFor(false);
+    const sctx = ctxFor(true);
+
+    const body: string[] = [];
+    if (part.classes) {
+      const classes = classesExpr(brick, part, sctx);
+      if (classes.usesVariantKey) head.usesVariantKey = true;
+      state.usesCn = true;
+      body.push(`const cls = computed(() => ${classes.expr});`);
+    }
+    for (const [name, expr] of Object.entries(part.derived ?? {})) {
+      if (usesItem(expr, env)) throw new Error(`${brick.id}/${part.name}: derived ${name} uses loop item`);
+      body.push(`const ${name}Value = computed(() => ${printTsExpr(expr, sctx)});`);
+    }
+    const root = part.render;
+    if (root.kind === "element" && root.tag.kind !== "static") {
+      const prop = root.tag.kind === "resolved" || root.tag.kind === "heading" ? sctx.propCode(root.tag.fromProp) : "";
+      if (root.tag.kind === "resolved") {
+        state.usesResolveTag = true;
+        body.push(`const resolvedTagValue = computed(() => resolveTag(${prop}, ${JSON.stringify(root.tag.fallback)}, TagGroup.${root.tag.group}));`);
+      } else if (root.tag.kind === "heading") {
+        helperImports.add("titleTag");
+        body.push(`const resolvedTagValue = computed(() => titleTag(${prop}));`);
+      } else body.push(`const resolvedTagValue = computed(() => ${printTsExpr(root.tag.expr, sctx)});`);
+    }
+
+    const markup = this.printNode(root, ctx, part, state, { isRoot: true });
+
+    const moduleImports: string[] = [];
+    const utils = [...(head.usesVariants ? ["variants"] : []), ...(head.usesVariantKey ? ["type VariantKey"] : [])];
+    if (utils.length > 0) moduleImports.push(`import { ${utils.join(", ")} } from "${this.utilsPath}";`);
+    for (const [owner, names] of head.fromSibling) {
+      const list = [...[...names.values].sort(), ...[...names.types].sort().map((t) => `type ${t}`)];
+      moduleImports.push(`import { ${list.join(", ")} } from "./${fileName(owner)}.vue";`);
+    }
+    const vue = [...(body.length ? ["computed"] : []), ...(state.usesRest ? ["useAttrs"] : [])];
+    const scriptImports = vue.length ? [`import { ${vue.join(", ")} } from "vue";`] : [];
+    if (state.usesCn) scriptImports.push(`import { cn } from "${this.utilsPath}";`);
+    if (helperImports.size > 0) scriptImports.push(`import { ${[...helperImports].sort().join(", ")} } from "${this.utilsPath}/expr";`);
+    if (state.usesResolveTag) scriptImports.push(`import { resolveTag, TagGroup } from "${this.utilsPath}/tags";`);
+
+    const docs = wrapText(part.docs).map((l) => `  ${l}`.trimEnd()).join("\n");
+    const lines: string[] = [
+      `<!-- ${BANNER} -->`,
+      `<!--\n${docs}\n-->`,
+      `<script lang="ts">`,
+      ...moduleImports,
+      ...(moduleImports.length ? [``] : []),
+      ...head.code,
+      `export type ${part.name}Props = {\n${typeFields.join("\n")}\n};`,
+      `</script>`,
+      ``,
+      `<script setup lang="ts">`,
+      ...scriptImports,
+      ``,
+      `defineOptions({ inheritAttrs: false });`,
+      ...(hasChildren ? [`defineSlots<{ default?(): unknown }>();`] : []),
+      wrapList("const {", destructure, `} = defineProps<${part.name}Props>();`, 110),
+      ...(state.usesRest ? [`const attrs = useAttrs();`] : []),
+      ...body,
+      `</script>`,
+      ``,
+      `<template>`,
+      indent(markup, 1),
+      `</template>`,
+    ];
+    return {
+      path: `primitives/${brick.dir}/${fileName(part.name)}.vue`,
+      contents: lines.join("\n").replace(/\n{3,}/g, "\n\n").trimEnd() + "\n",
+    };
+  }
+
+  private printAttr(attr: AttrSpec, ctx: TsPrintCtx, part: PartDef, state: State, inLoop: boolean): string {
+    switch (attr.kind) {
+      case "static":
+        return `${attr.name}="${attr.value.replace(/&/g, "&amp;").replace(/"/g, "&quot;")}"`;
+      case "expr": {
+        if (isPassthroughForward(attr, part)) return "";
+        const value = printTsExpr(attr.expr, ctx);
+        const t = exprType(attr.expr, ctx.env);
+        if (attr.when) return `:${attr.name}="${attrExpr(`${printTsExpr(attr.when, ctx)} ? ${value} : undefined`)}"`;
+        if (attr.keepEmpty && t === "string") return `:${attr.name}="${attrExpr(`(${value}) ?? ""`)}"`;
+        if (t !== "string" || neverEmptyString(attr.expr, ctx.env)) return `:${attr.name}="${attrExpr(value)}"`;
+        ctx.helpers.add("orUndef");
+        return `:${attr.name}="orUndef(${attrExpr(value)})"`;
+      }
+      case "bool":
+        return `:${attr.name}="${attrExpr(printTsExpr(attr.expr, ctx))} || undefined"`;
+      case "class": {
+        // undefined drops the attribute, like the conditional spread of the Svelte output
+        if (!attr.spec) return `:class="cls || undefined"`;
+        state.usesCn = true;
+        const inline = printInlineClassSpec(attr.spec, ctx, () => (part.props.some((p) => p.name === "Class") && !inLoop ? "className" : undefined));
+        if (/^cn\("[^"]+"/.test(inline)) return vueAttr(formatAttr(`class={${inline}}`));
+        return `:class="${attrExpr(inline)} || undefined"`;
+      }
+      case "rest":
+        state.usesRest = true;
+        return `v-bind="attrs"`;
+    }
+  }
+
+  private printNode(node: Node, ctx: TsPrintCtx, part: PartDef, state: State, opts: { isRoot?: boolean; inLoop?: boolean } = {}): string {
+    switch (node.kind) {
+      case "element": {
+        const dynamic = node.tag.kind !== "static";
+        if (dynamic && !opts.isRoot) throw new Error(`${part.name}: dynamic tags only supported at part root`);
+        const tagCode = dynamic ? "component" : node.tag.kind === "static" ? node.tag.tag : "";
+        const attrs = node.attrs.map((a) => this.printAttr(a, ctx, part, state, opts.inLoop === true)).filter(Boolean);
+        const head = [...(dynamic ? [`:is="resolvedTagValue"`] : []), ...attrs];
+        if (node.void || node.children.length === 0) return node.void ? tagHead(tagCode, head, "/>") : `${tagHead(tagCode, head, ">")}</${tagCode}>`;
+        const open = tagHead(tagCode, head, ">");
+        const rendered = node.children.map((c) => this.printNode(c, ctx, part, state, { inLoop: opts.inLoop }));
+        // mixed inline content (text + slot) on one line: no whitespace text nodes between them
+        if (node.children.some((c) => c.kind === "text")) return `${open}${rendered.join("")}</${tagCode}>`;
+        return `${open}\n${indent(rendered.join("\n"), 1)}\n</${tagCode}>`;
+      }
+      case "slot":
+        return `<slot />`;
+      case "text":
+        return `{{ ${printTsExpr(node.expr, ctx)} }}`;
+      case "when": {
+        const lines = (nodes: Node[]): string[] => nodes.flatMap((c) => this.printNode(c, ctx, part, state, opts).split("\n"));
+        const branches: Array<[string, string[]]> = [[printTsExpr(node.test, ctx), lines(node.then)]];
+        let rest = node.else ?? [];
+        while (rest.length === 1 && rest[0]!.kind === "when") {
+          const w = rest[0]!;
+          branches.push([printTsExpr(w.test, ctx), lines(w.then)]);
+          rest = w.else ?? [];
+        }
+        return ifChain(branches, lines(rest)).join("\n");
+      }
+      case "forEach": {
+        const body = node.body.flatMap((c) => this.printNode(c, ctx, part, state, { inLoop: true }).split("\n"));
+        return each(`${ctx.propCode(node.itemsProp)} ?? []`, "item", "i", body, "i").join("\n");
+      }
+    }
+  }
+}
diff --git a/xgen/runtimes/vue/src/index.ts b/xgen/runtimes/vue/src/index.ts
new file mode 100644
index 0000000..1c6925b
--- /dev/null
+++ b/xgen/runtimes/vue/src/index.ts
@@ -0,0 +1,3 @@
+export { VueEmitter } from "./emit";
+export * from "./view";
+export * from "./app";
diff --git a/xgen/runtimes/vue/src/template.ts b/xgen/runtimes/vue/src/template.ts
new file mode 100644
index 0000000..f8533f6
--- /dev/null
+++ b/xgen/runtimes/vue/src/template.ts
@@ -0,0 +1,103 @@
+// Vue template text from the brace form the shared walker prints: `name={expr}` -> `:name="expr"`, `{...rest}` -> `v-bind="rest"`,
+// `{expr}` -> `{{ expr }}`. An attribute value is double quoted, so string literals of the expression move to single quotes.
+
+/** a TypeScript expression as the value of a double-quoted attribute: `"a"` -> `'a'` (template literals and their `${}` kept) */
+export function attrExpr(code: string): string {
+  let out = "";
+  let i = 0;
+  const literal = (quote: string): void => {
+    let j = i + 1;
+    while (j < code.length && code[j] !== quote) j += code[j] === "\\" ? 2 : 1;
+    const raw = code.slice(i, j + 1);
+    out += quote === '"' ? `'${(JSON.parse(raw) as string).replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n")}'` : raw;
+    i = j + 1;
+  };
+  const template = (): void => {
+    out += "`";
+    i++;
+    while (i < code.length && code[i] !== "`") {
+      if (code[i] === "\\") { out += code.slice(i, i + 2); i += 2; continue; }
+      if (code.startsWith("${", i)) { out += "${"; i += 2; expr("}"); out += "}"; i++; continue; }
+      out += code[i] === '"' ? "\\x22" : code[i];
+      i++;
+    }
+    out += "`";
+    i++;
+  };
+  // code up to the closing `end` at depth 0 (or the end of the text)
+  const expr = (end: string): void => {
+    let depth = 0;
+    while (i < code.length) {
+      const c = code[i]!;
+      if (c === end && depth === 0) return;
+      if (c === '"' || c === "'") { literal(c); continue; }
+      if (c === "`") { template(); continue; }
+      if (c === "{") depth++;
+      else if (c === "}") depth--;
+      out += c;
+      i++;
+    }
+  };
+  expr("");
+  return out;
+}
+
+/** one attribute of the brace form in Vue: bound (`:x`), an event (`@x`), a spread (`v-bind`), or kept as it is (static text) */
+export function vueAttr(text: string): string {
+  const spread = /^\{\.\.\.([\s\S]+)\}$/.exec(text);
+  if (spread) return `v-bind="${attrExpr(spread[1]!)}"`;
+  const bound = /^([@\w:.-]+)=\{([\s\S]*)\}$/.exec(text);
+  if (bound) return `${bound[1]!.startsWith("@") ? bound[1] : `:${bound[1]}`}="${attrExpr(bound[2]!)}"`;
+  return text;
+}
+
+/** the name of a slot in Vue: `children` is the default slot */
+export const slotName = (name: string): string => (name === "children" ? "default" : name);
+
+const pad = (lines: string[], n = 1): string[] => lines.map((l) => (l ? "  ".repeat(n) + l : l));
+
+/**
+ * The lines of one element node with a directive in its opening tag (`<Card v-if="x" ...>`), or undefined when the lines are
+ * not exactly one element: text, several nodes, a `<template>` block, or an element with a directive of the other kind
+ * (Vue gives `v-if` priority over `v-for` on one element, so the two never share a tag).
+ */
+function onElement(lines: string[], directive: string, clash: RegExp): string[] | undefined {
+  const top = lines.filter((l) => !l.startsWith(" "));
+  const tag = /^<([A-Za-z][\w-]*)(?=[\s>/]|$)/.exec(lines[0] ?? "")?.[1];
+  // the opening tag: its first line, and the attribute lines under it when the first line does not close it
+  const end = /\/?>$/.test(lines[0] ?? "") ? 1 : lines.findIndex((l, i) => i > 0 && !l.startsWith(" "));
+  if (!tag || tag === "template" || lines.slice(0, end < 0 ? 1 : end).some((l) => clash.test(` ${l.trim()}`))) return undefined;
+  const last = top[top.length - 1]!;
+  const single = top.length === 1 ? last.endsWith("/>") || last.endsWith(`</${tag}>`) : top.length <= 3 && (last === `</${tag}>` || last === "/>") && top.slice(1, -1).every((l) => l === ">");
+  if (!single) return undefined;
+  const head = lines[0]!.replace(`<${tag}`, `<${tag} ${directive}`);
+  const parts = head.length > 110 ? splitHead(head) : undefined;
+  return [...(parts ? [`<${tag}`, ...parts.attrs.map((x) => `  ${x}`), parts.close] : [head]), ...lines.slice(1)];
+}
+
+/** the attributes of a one-line opening tag that ends the line (`<a x="1" y>` / `<a x />`); undefined for a line with content after the tag */
+function splitHead(line: string): { attrs: string[]; close: ">" | "/>" } | undefined {
+  const close = line.endsWith("/>") ? "/>" : line.endsWith(">") ? ">" : undefined;
+  if (!close) return undefined;
+  const body = line.slice(line.indexOf(" ") + 1, line.length - close.length).trim();
+  const attrs: string[] = [];
+  let from = 0, quoted = false;
+  for (let i = 0; i <= body.length; i++) {
+    if (body[i] === '"') quoted = !quoted;
+    if ((i === body.length || body[i] === " ") && !quoted) { if (i > from) attrs.push(body.slice(from, i)); from = i + 1; }
+  }
+  return quoted ? undefined : { attrs, close };
+}
+
+/** `v-if` / `v-else-if` / `v-else` on the element of each branch, or on a `<template>` around a branch of several nodes */
+export function ifChain(branches: Array<[string, string[]]>, rest: string[]): string[] {
+  const branch = (directive: string, lines: string[]): string[] => onElement(lines, directive, /\sv-(for|if|else)/) ?? [`<template ${directive}>`, ...pad(lines), "</template>"];
+  const out = branches.flatMap(([c, lines], i) => branch(`${i === 0 ? "v-if" : "v-else-if"}="${attrExpr(c)}"`, lines));
+  return rest.length ? [...out, ...branch("v-else", rest)] : out;
+}
+
+/** `v-for` with its key on the element of the body, or on a `<template>` around a body of several nodes */
+export const each = (items: string, as: string, key: string, body: string[], index?: string): string[] => {
+  const directive = `v-for="${index ? `(${as}, ${index})` : as} in ${attrExpr(items)}" :key="${attrExpr(key)}"`;
+  return onElement(body, directive, /\sv-(for|if|else)/) ?? [`<template ${directive}>`, ...pad(body), "</template>"];
+};
diff --git a/xgen/runtimes/vue/src/view.ts b/xgen/runtimes/vue/src/view.ts
new file mode 100644
index 0000000..e59ed1c
--- /dev/null
+++ b/xgen/runtimes/vue/src/view.ts
@@ -0,0 +1,294 @@
+// Vue 3 output for organisms, screens and chunks. Blocks are `<template v-if>` / `<template v-for>`, render-prop slots are
+// scoped slots (`<slot name="item" :item>` / `<template #item="{ item }">`), events are `defineEmits`, derived values `computed`.
+import { fileName, presetFile, printBare, printValue, tierDir, typesPath, type OrganismSpec, type ScreenSpec } from "@ui8kit/xgen-screens";
+import { htmlPropName } from "@ui8kit/xgen-spec";
+import { assetFile, assetTables, BANNER, chainLines, chunksOf, partsOf, cnLines, pageSources, optionalGroups, printVariantTable, wrapList, wrapText, screenModel, type ChunkModel, type RecipeLike, typeName, walkNodes, recordTypes, type GeneratedFile, type PartRef, type Syntax, type WalkEnv } from "@ui8kit/xgen-runtime-core";
+import { attrExpr, each, ifChain, slotName, vueAttr } from "./template";
+
+const pad = (lines: string[], n = 1): string[] => lines.map((l) => (l ? "  ".repeat(n) + l : l));
+
+export const vueSyntax: Syntax = {
+  runtime: "vue",
+  propName(ref: PartRef, canonical: string) {
+    if (canonical === "Class") return "class";
+    const d = ref.part.props.find((x) => x.name === canonical);
+    if (!d) throw new Error(`${ref.part.name}: prop ${canonical} does not exist`);
+    return htmlPropName(d);
+  },
+  eventProp: (ev) => `@${ev}`,
+  attrName: (name) => name,
+  callbackName: (ev) => `@${ev}`,
+  eventType: "Event & { currentTarget: HTMLInputElement }",
+  classProp: "class",
+  ifChain,
+  each,
+  slot(name, args, _fn, argNames) {
+    const named = name === "children" ? [] : [`name="${name}"`];
+    const bound = args.map((a, i) => vueAttr(`${argNames?.[i] ?? `arg${i}`}={${a}}`));
+    return [`<${["slot", ...named, ...bound].join(" ")} />`];
+  },
+  slotProp(name, _params, body, _fn, argNames = [], locals = []) {
+    const fields = argNames.map((a, i) => (locals[i] === undefined || locals[i] === a ? a : `${a}: ${locals[i]}`));
+    return { child: [`<template #${slotName(name)}${fields.length ? `="{ ${fields.join(", ")} }"` : ""}>`, ...pad(body), "</template>"] };
+  },
+  // a slot handed on only when the parent filled it, so the inner organism sees the same `$slots`
+  forward: (name, from) => ({
+    child: [`<template v-if="$slots.${slotName(from)}" #${slotName(name)}><slot${from === "children" ? "" : ` name="${from}"`} /></template>`],
+  }),
+  attr: vueAttr,
+  text: (expr) => `{{ ${expr} }}`,
+  fragment: (lines) => lines,
+};
+
+export interface ViewDeps {
+  parts: Record<string, PartRef>;
+  organisms: Record<string, OrganismSpec>;
+  /** import path of a part's component file from the folder of the component (`src/blocks/`, `src/components/`) */
+  partPath(name: string): string;
+  /** the recipes (specs/recipes), by file name: printed as variant tables at the top of the organisms that read them */
+  recipes?: Record<string, RecipeLike>;
+}
+
+/** the variant tables of the recipes an organism reads (shadcn/cva style), printed at the top of its file */
+function recipeTables(org: OrganismSpec, deps: ViewDeps): string[] {
+  return Object.entries(org.recipes ?? {}).map(([local, file]) => {
+    const recipe = deps.recipes?.[file];
+    if (!recipe) throw new Error(`${org.name}: recipe ${file} not found in specs/recipes`);
+    return `/** ${org.name}: the classes of each value (shadcn/cva style). */\n${printVariantTable(`${local}Variants`, recipe)}`;
+  });
+}
+
+/** the one-line description on top, cut under the width */
+const docsLines = (docs: string): string[] => { const l = wrapText(docs); return l.length === 1 ? [`<!-- ${l[0]} -->`] : ["<!--", ...l.map((x) => `  ${x}`), "-->"]; };
+
+const header = `<!-- ${BANNER} -->`;
+
+/**
+ * The print context: the template reads slots as `$slots.x` and computed values by name; the script reads slots as
+ * `slots.x` and computed values as `x.value`. `scope.script` switches between the two while a file is printed.
+ */
+function envFor(deps: ViewDeps, optional: string[] = [], names: { slots?: string[]; computed?: string[] } = {}): WalkEnv & { scope: { script: boolean } } {
+  const scope = { script: false };
+  const slots = new Set(names.slots ?? []);
+  const computedNames = new Set(names.computed ?? []);
+  const print: WalkEnv["print"] = {
+    emit: (ev) => `emit("${ev}", `, helpers: new Set(), presets: new Set(), optional: new Set(["record", ...optional]), runtime: "vue",
+    rename: (n) => (slots.has(n) ? `${scope.script ? "slots" : "$slots"}.${slotName(n)}` : scope.script && computedNames.has(n) ? `${n}.value` : undefined),
+  };
+  return { syntax: vueSyntax, parts: deps.parts, organisms: deps.organisms, print, usedParts: new Set(), usedOrganisms: new Set(), usesEach: { value: false }, scope };
+}
+
+const constLines = (org: OrganismSpec): string[] =>
+  Object.entries(org.consts ?? {}).filter(([name]) => !assetTables(org).includes(name)).flatMap(([name, table]) => [`const ${name}: Record<string, string> = {`, ...Object.entries(table).map(([k, v]) => `  ${JSON.stringify(k)}: ${JSON.stringify(v)},`), `};`]);
+
+/** `const x = computed(() => value);`, a long value one choice (or one cn argument) per line */
+function computedLine(name: string, value: Parameters<typeof printValue>[0], print: WalkEnv["print"]): string {
+  const one = `const ${name} = computed(() => ${printBare(value, print)});`;
+  const chain = one.length > 100 ? chainLines(printValue(value, print)) ?? cnLines(printBare(value, print)) : undefined;
+  if (chain) return `const ${name} = computed(() =>\n${chain.map((l) => `  ${l}`).join("\n")}\n);`;
+  return one.length > 150 ? `const ${name} = computed(() =>\n  ${printBare(value, print)}\n);` : one;
+}
+
+export function emitOrganism(org: OrganismSpec, deps: ViewDeps): GeneratedFile[] {
+  const slotNames = [...org.slots.map((s) => s.name), ...(org.children ? ["children"] : [])];
+  const derivedNames = (org.derived ?? []).map((d) => d.name);
+  const env = envFor(deps, optionalGroups(org), { slots: slotNames, computed: derivedNames });
+  env.print.optional.delete("record");
+  env.slotArity = { ...Object.fromEntries(org.slots.map((s) => [s.name, s.args.length])), ...(org.children ? { children: 0 } : {}) };
+  env.slotArgs = Object.fromEntries(org.slots.map((s) => [s.name, s.args.map((a) => a.name)]));
+  const markup = walkNodes(org.view, env);
+  env.scope.script = true;
+  const derived = (org.derived ?? []).map((d) => computedLine(d.name, d.value, env.print));
+  const name = org.name;
+  const dir = tierDir(org.id);
+  const recordNames = Object.keys(org.records);
+  const lit = (v: string | number | boolean) => JSON.stringify(v);
+  const propLines = [...org.props.map((p) => `  ${p.name}${p.required ? "" : "?"}: ${typeName(p.type)};`), ...(org.className ? [`  class?: string;`] : [])];
+  const destructure = [...org.props.map((p) => (p.default === undefined ? p.name : `${p.name} = ${lit(p.default)}`)), ...(org.className ? ["class: className"] : [])];
+  const slotTypes = [
+    ...(org.children ? [`default?(): unknown;`] : []),
+    ...org.slots.map((s) => `${s.name}?(${s.args.length ? `props: { ${s.args.map((a) => `${a.name}: ${typeName(a.type)}`).join("; ")} }` : ""}): unknown;`),
+  ];
+  const usesSlotsInScript = derived.some((l) => /\bslots\./.test(l));
+  const eventTypes = org.events.map((e) => `${e.name}: [${e.args.map((a) => `${a.name}: ${typeName(a.type)}`).join(", ")}];`);
+  const partImports = [...env.usedParts].sort().map((p) => `import ${p} from "${deps.partPath(p)}";`);
+  const orgImports = [...env.usedOrganisms].sort().map((o) => `import ${o} from "../${tierDir(deps.organisms[o]!.id)}/${fileName(o)}.vue";`);
+  const tables = recipeTables(org, deps);
+  if (tables.length) env.print.helpers.add("variants");
+  const helpers = [...env.print.helpers].sort().filter((h) => h !== "variants");
+  const presetImports = [...(env.print.presets ?? [])].sort().map((p) => `import { ${p} } from "../presets/${presetFile(p)}";`);
+  const typeHead = [
+    ...(recordNames.length ? [`import type { ${recordNames.join(", ")} } from "./${fileName(name)}.types";`] : []),
+    ...(org.typeImports ?? []).map((t) => `import type { ${t.names.join(", ")} } from "${typesPath(org.id, deps.organisms[t.from] ?? { id: org.id, name: t.from })}";`),
+    ...(tables.length ? [`import { variants } from "../utils";`, ``, ...tables] : []),
+  ];
+  if (typeHead.length) typeHead.push(``);
+  const body = [
+    header,
+    ...docsLines(org.docs),
+    `<script lang="ts">`,
+    ...typeHead,
+    `export type ${name}Props = {`,
+    ...propLines,
+    `};`,
+    `</script>`,
+    ``,
+    `<script setup lang="ts">`,
+    ...(derived.length ? [`import { computed } from "vue";`] : []),
+    ...partImports,
+    ...orgImports,
+    ...presetImports,
+    ...(helpers.length ? [`import { ${helpers.join(", ")} } from "../utils";`] : []),
+    ...(assetTables(org).length ? [`import { ${assetTables(org).join(", ")} } from "./${fileName(name)}.assets";`] : []),
+    ``,
+    ...constLines(org),
+    ...(destructure.length ? [wrapList("const {", destructure, `} = defineProps<${name}Props>();`, 110)] : [`defineProps<${name}Props>();`]),
+    ...(eventTypes.length ? [wrapList("const emit = defineEmits<{", eventTypes.map((e) => e.replace(/;$/, "")), "}>();", 110)] : []),
+    ...(slotTypes.length ? [wrapList(`${usesSlotsInScript ? "const slots = " : ""}defineSlots<{`, slotTypes.map((e) => e.replace(/;$/, "")), "}>();", 110)] : []),
+    ...derived,
+    `</script>`,
+    ``,
+    `<template>`,
+    ...pad(markup),
+    `</template>`,
+    ``,
+  ].join("\n");
+  const out: GeneratedFile[] = [{ path: `${dir}/${fileName(name)}.vue`, contents: body }];
+  if (recordNames.length) out.push({ path: `${dir}/${fileName(name)}.types.ts`, contents: `// ${BANNER}\n\n${recordTypes(org, deps.organisms)}\n` });
+  if (assetTables(org).length) out.push({ path: `${dir}/${fileName(name)}.assets.ts`, contents: assetFile(org, `// ${BANNER}`) });
+  return out;
+}
+
+export interface ScreenDeps extends ViewDeps {
+  /** names the ui package exports */
+  ui: string;
+  /** package of the shared app outputs: content, data, menus, url runtime core */
+  shared: string;
+  recordType: string;
+}
+
+const indented = (ts: string): string[] => (ts ? ts.split("\n") : []);
+
+function emitPage(s: ScreenSpec, deps: ScreenDeps): GeneratedFile {
+  const m = screenModel(s);
+  const env = envFor(deps, [], { computed: ["route", "nav"] });
+  const chunks = new Map(chunksOf(s).map((c) => [c.area, c]));
+  const parts = partsOf(s);
+  env.part = (name) => [`<${name} />`];
+  const areaLines = (a: string): string[] => (chunks.has(a) ? [`<${chunks.get(a)!.name} />`] : walkNodes(s.areas[a] ?? [], env));
+  env.outlet = () => ifChain(m.otherAreas.map((a): [string, string[]] => [`route.area === ${JSON.stringify(a)}`, areaLines(a)]), areaLines(m.listArea));
+  const markup = walkNodes(s.layout, env);
+  const sources = pageSources(s);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const types = [...new Set(sources.map((x) => x.record))].sort().map((r) => `type ${r}`);
+  const contents = [
+    header,
+    ...docsLines(s.docs),
+    `<script setup lang="ts">`,
+    `import { computed } from "vue";`,
+    wrapList("import {", [...imports, ...types], `} from "${deps.ui}";`, 110),
+    ...[...chunks.values(), ...parts].map((c) => `import ${c.name} from "./${c.dir}/${c.name}.vue";`),
+    `import { fromCodex, matchRoute, type UrlPort } from "${deps.shared}/runtime/core";`,
+    ...(sources.length ? [`import { CODEX } from "${deps.shared}/runtime/codex";`] : []),
+    `import { toggleTheme } from "${deps.shared}/runtime/theme";`,
+    `import { ui } from "${deps.shared}/content";`,
+    ...(s.nav ? [`import { navOf } from "${deps.shared}/nav/${s.name}";`] : []),
+    ...sources.map((x) => `import { ${x.collection} as ${x.as}Entries } from "${deps.shared}/data/${x.collection}";`),
+    ``,
+    ...indented(m.constsTs),
+    ``,
+    `const { url } = defineProps<{ url: UrlPort }>();`,
+    ``,
+    ...sources.map((x) => `const ${x.as} = fromCodex<${x.record}>(${x.as}Entries, ${x.as.toUpperCase()}_FIELDS, CODEX);`),
+    `const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: ${JSON.stringify(m.listArea)}, params: {} as Record<string, string> });`,
+    ...(s.nav ? [`const nav = computed(() => navOf(route.value.area));`] : []),
+    `const actions = { toggleTheme };`,
+    ...(m.namedTs ? [``, ...indented(m.namedTs)] : []),
+    `</script>`,
+    ``,
+    `<template>`,
+    ...pad(markup),
+    `</template>`,
+    ``,
+  ].join("\n");
+  return { path: `screens/${s.name}.vue`, contents };
+}
+
+/** one area of a chunked page as its own component: it imports only the data it shows */
+function emitChunk(s: ScreenSpec, c: ChunkModel, deps: ScreenDeps): GeneratedFile {
+  const env = envFor(deps);
+  const markup = walkNodes(c.nodes, env);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const types = [...new Set(c.sources.map((x) => x.record))].sort().map((r) => `type ${r}`);
+  const contents = [
+    header,
+    `<!-- ${c.doc} -->`,
+    `<script setup lang="ts">`,
+    wrapList("import {", [...imports, ...types], `} from "${deps.ui}";`, 110),
+    ...(c.sources.length ? [`import { fromCodex } from "${deps.shared}/runtime/core";`] : []),
+    ...(c.sources.length ? [`import { CODEX } from "${deps.shared}/runtime/codex";`] : []),
+    ...(c.actions ? [`import { toggleTheme } from "${deps.shared}/runtime/theme";`] : []),
+    `import { ui } from "${deps.shared}/content";`,
+    ...c.sources.map((x) => `import { ${x.collection} as ${x.as}Entries } from "${deps.shared}/data/${x.collection}";`),
+    ...(c.constsTs ? [``, ...indented(c.constsTs)] : []),
+    ``,
+    ...c.sources.map((x) => `const ${x.as} = fromCodex<${x.record}>(${x.as}Entries, ${x.as.toUpperCase()}_FIELDS, CODEX);`),
+    ...(c.actions ? [`const actions = { toggleTheme };`] : []),
+    ...(c.namedTs ? [...(c.sources.length || c.actions ? [``] : []), ...indented(c.namedTs)] : []),
+    `</script>`,
+    ``,
+    `<template>`,
+    ...pad(markup),
+    `</template>`,
+    ``,
+  ].join("\n");
+  return { path: `screens/${c.dir}/${c.name}.vue`, contents };
+}
+
+/** the area files of a screen with `chunks`, and the part files of a page screen with `parts` */
+export function emitChunks(s: ScreenSpec, deps: ScreenDeps): GeneratedFile[] {
+  return [...chunksOf(s), ...partsOf(s)].map((c) => emitChunk(s, c, deps));
+}
+
+export function emitScreen(s: ScreenSpec, deps: ScreenDeps): GeneratedFile {
+  if (s.kind === "page") return emitPage(s, deps);
+  const m = screenModel(s);
+  const env = envFor(deps, ["record"], { computed: ["route", "view", "record", "actions"] });
+  const areaLines = (a: string): string[] => walkNodes(s.areas[a] ?? [], env);
+  env.outlet = () => ifChain(m.otherAreas.map((a): [string, string[]] => [`route.area === ${JSON.stringify(a)}`, areaLines(a)]), areaLines(m.listArea));
+  const markup = walkNodes(s.layout, env);
+  const imports = [...env.usedParts, ...env.usedOrganisms, ...env.print.helpers].sort();
+  const recordPath = m.recordPathTemplate ? `(id) => \`${m.recordPathTemplate}\`` : `() => ${JSON.stringify(m.listPath)}`;
+  const recordLookup = m.recordArea ? `route.value.area === ${JSON.stringify(m.recordArea)} ? rows.find((r) => r.id === route.value.params.${m.recordParam}) : undefined` : "undefined";
+  const contents = [
+    header,
+    ...docsLines(s.docs),
+    `<script setup lang="ts">`,
+    `import { computed } from "vue";`,
+    wrapList("import {", [...imports, `type ${deps.recordType}`], `} from "${deps.ui}";`, 110),
+    `import { collectionView, fromCodex, matchRoute, screenActions, type UrlPort } from "${deps.shared}/runtime/core";`,
+    `import { CODEX } from "${deps.shared}/runtime/codex";`,
+    `import { toggleTheme } from "${deps.shared}/runtime/theme";`,
+    `import { ui } from "${deps.shared}/content";`,
+    `import { ${s.source!.collection} as entries } from "${deps.shared}/data/${s.source!.collection}";`,
+    ``,
+    ...indented(m.constsTs),
+    ``,
+    `const { url } = defineProps<{ url: UrlPort }>();`,
+    ``,
+    `const rows = fromCodex<${deps.recordType}>(entries, FIELDS, CODEX);`,
+    `const route = computed(() => matchRoute(ROUTES, url.path) ?? { area: ${JSON.stringify(m.listArea)}, params: {} as Record<string, string> });`,
+    `const view = computed(() => collectionView(rows, LIST, url.query));`,
+    `const record = computed(() => ${recordLookup});`,
+    `const actions = computed(() => screenActions(url, view.value, ${JSON.stringify(m.listPath)}, ${recordPath}, toggleTheme));`,
+    `</script>`,
+    ``,
+    `<template>`,
+    ...pad(markup),
+    `</template>`,
+    ``,
+  ].join("\n");
+  return { path: `screens/${s.name}.vue`, contents };
+}
+
+export { attrExpr };
diff --git a/xgen/runtimes/vue/test/emit.test.ts b/xgen/runtimes/vue/test/emit.test.ts
new file mode 100644
index 0000000..0b779aa
--- /dev/null
+++ b/xgen/runtimes/vue/test/emit.test.ts
@@ -0,0 +1,39 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { planBuild } from "@ui8kit/xgen-generator";
+import { VueEmitter } from "../src/index";
+import { attrExpr, each, ifChain, vueAttr } from "../src/template";
+
+const plan = planBuild(join(import.meta.dir, "..", "..", "..", ".."));
+
+test("every brick makes Vue files with a plain script, a script setup and a template, the same twice", () => {
+  const emitter = new VueEmitter();
+  for (const { brick } of plan.bricks) {
+    const a = emitter.emit(brick), b = emitter.emit(brick);
+    expect(a.map((f) => f.path)).toEqual(b.map((f) => f.path));
+    expect(a.map((f) => f.contents)).toEqual(b.map((f) => f.contents));
+    for (const f of a) {
+      expect(f.path).toMatch(/\/[a-z0-9-]+\.vue$/);
+      expect(f.contents).toContain(`<script setup lang="ts">`);
+      expect(f.contents).toContain("defineProps<");
+      expect(f.contents).toContain("<template>");
+    }
+  }
+});
+
+test("attributes of the brace form become bound, event and spread attributes; strings move to single quotes", () => {
+  expect(vueAttr(`title={ui.home.title}`)).toBe(`:title="ui.home.title"`);
+  expect(vueAttr(`gap="12"`)).toBe(`gap="12"`);
+  expect(vueAttr(`@select={(id: string) => emit("select", id)}`)).toBe(`@select="(id: string) => emit('select', id)"`);
+  expect(vueAttr(`{...rest}`)).toBe(`v-bind="rest"`);
+  expect(attrExpr("`w:${a ? \"x\" : 'y'}%`")).toBe("`w:${a ? 'x' : 'y'}%`");
+  expect(attrExpr(`"it's"`)).toBe(`'it\\'s'`);
+});
+
+test("a branch or a loop body of one element takes the directive; several nodes keep a template", () => {
+  expect(ifChain([["a", ["<Card />"]]], ["<Empty />"])).toEqual([`<Card v-if="a" />`, `<Empty v-else />`]);
+  expect(ifChain([["a", ["<A />", "<B />"]]], [])).toEqual([`<template v-if="a">`, "  <A />", "  <B />", "</template>"]);
+  expect(each("rows", "row", "row.id", ["<Row :row=\"row\" />"])).toEqual([`<Row v-for="row in rows" :key="row.id" :row="row" />`]);
+  // v-if has priority over v-for on one element: a filtered body keeps its template
+  expect(each("rows", "row", "row.id", ["<Row v-if=\"row.on\" />"])[0]).toBe(`<template v-for="row in rows" :key="row.id">`);
+});
diff --git a/xgen/schema/README.md b/xgen/schema/README.md
new file mode 100644
index 0000000..416e1dd
--- /dev/null
+++ b/xgen/schema/README.md
@@ -0,0 +1,20 @@
+# @ui8kit/xgen-schema
+
+JSON Schemas of xgen (spec, variants, organism, screen, app, collection) and a validator over them.
+
+Part of xgen (see `../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
+
+## Codex v0.4 manifest of the fixtures
+
+`codex/manifest.json` describes every entry kind of `xgen/fixtures` (one resource per kind; money fields carry the rule `fastygo.codex/money` = integer minor units next to `currency`; dates are `datetime`, RFC 3339). Regenerate with `bun run codex:manifest`; `test/codex.test.ts` fails when it is stale. `bun run codex:validate` runs the `@ui8kit/contract` v0.4 validator (npm package `@ui8kit/contract` ^0.2.0, a devDependency of this package) over all fixtures with this manifest, and checks the manifest against the `manifest.schema.json` the package ships. The UI formats the raw values: money through `fmtMoney(minor, currency)`, dates through field-path pipes (`metadata.date.value|date`, `|ago`, `|ago-days`, `|ago-short`) in `fromCodex`.
+
+## Block data manifest
+
+`codex/blocks.json` (schema `codex/blocks.schema.json`) lists every kit block and screen spec (and, in the codegen-x monorepo, every magazine template and taste screen) with the
+entry kinds it reads; a block with status `done` also names its central field map (`CODEX_FIELDS` in
+`xgen/runtimes/core/assets/app/fields.ts`), the required and optional entry fields, settings props and dictionary labels.
+`test/blocks.test.ts` checks the fields against `codex/manifest.json`, the fixtures against the contract validator and the mapping.
+The file is generated: `bun run codex:blocks` (`src/codex-blocks.ts`) derives ids, sources, bindings, settings, labels, empty state and
+uses from the specs, templates and screens and keeps the hand fields (`status`, `required` / `optional`, `note`, `emptyMode`);
+`xgen check` group `codex` fails when it is behind the sources.
+Inventory and mismatches: `xgen/docs/block-data.md`.
diff --git a/xgen/schema/codex/blocks.json b/xgen/schema/codex/blocks.json
new file mode 100644
index 0000000..0ea3acd
--- /dev/null
+++ b/xgen/schema/codex/blocks.json
@@ -0,0 +1,9809 @@
+{
+  "$schema": "./blocks.schema.json",
+  "version": "0.1.0",
+  "contract": "@ui8kit/contract v0.4 (codex manifest: ./manifest.json)",
+  "fieldMaps": "xgen/runtimes/core/assets/app/fields.ts",
+  "blocks": [
+    {
+      "id": "AboutCompany",
+      "surface": "kit-block",
+      "spec": "block.about",
+      "source": "xgen/specs/blocks/about.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "values",
+          "collection": "values",
+          "kind": "value",
+          "record": "Feature",
+          "map": "value",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "company.about.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "company.about.lead",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "AboutMe",
+      "surface": "kit-block",
+      "spec": "block.aboutme",
+      "source": "xgen/specs/blocks/aboutme.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "facts",
+          "collection": "profilefacts",
+          "kind": "profilefact",
+          "record": "Spec",
+          "map": "profilefact",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "skills",
+          "collection": "skills",
+          "kind": "skill",
+          "record": "Skill",
+          "map": "skill",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.level.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "level",
+        "layout",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "company.aboutMe.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "company.aboutMe.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "company.aboutMe.badge",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "company.aboutMe",
+          "keys": [
+            "level"
+          ]
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "company.aboutMe.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "company.aboutMe.more",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "FeatureAccordion",
+      "surface": "kit-block",
+      "spec": "block.accordion",
+      "source": "xgen/specs/blocks/accordion.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "expand",
+        "media",
+        "multiple",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.accordion.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.features",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ActivityFeed",
+      "surface": "kit-block",
+      "spec": "block.activity",
+      "source": "xgen/specs/blocks/activity.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "events",
+          "collection": "activity",
+          "kind": "event",
+          "record": "Event",
+          "map": "event",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.time.value",
+            "metadata.tone.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "density",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "dashboard.activity.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "dashboard.activity.text",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.activity",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "AnnouncementBar",
+      "surface": "kit-block",
+      "spec": "block.announcement",
+      "source": "xgen/specs/blocks/announcement.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "ctaHref",
+        "icon",
+        "tone",
+        "layout",
+        "dismiss",
+        "badge",
+        "position",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "label",
+          "dictionary": "promo.announcement.label",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "promo.announcement.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "promo.announcement.cta",
+          "keys": []
+        },
+        {
+          "prop": "dismissLabel",
+          "dictionary": "promo.announcement.dismiss",
+          "keys": []
+        },
+        {
+          "prop": "badgeLabel",
+          "dictionary": "promo.announcement.badge",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "ArticleBody",
+      "surface": "kit-block",
+      "spec": "block.article",
+      "source": "xgen/specs/blocks/article.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "sections",
+          "collection": "article",
+          "kind": "section",
+          "record": "Section",
+          "map": "section",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value"
+          ],
+          "optional": [
+            "metadata.quote.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "quotes",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.article.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.sections",
+          "keys": []
+        },
+        {
+          "prop": "tocTitle",
+          "dictionary": "vibe.article.toc",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "AuthCard",
+      "surface": "kit-block",
+      "spec": "block.auth",
+      "source": "xgen/specs/blocks/auth.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "switchHref",
+        "mode",
+        "layout",
+        "social",
+        "level",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "auth.signin.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "auth.signin.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "auth.signin.submit",
+          "keys": []
+        },
+        {
+          "prop": "switchText",
+          "dictionary": "auth.signin.switchText",
+          "keys": []
+        },
+        {
+          "prop": "switchLink",
+          "dictionary": "auth.signin.switchLink",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "auth.labels",
+          "keys": [
+            "name",
+            "email",
+            "password",
+            "remember",
+            "forgot",
+            "terms",
+            "divider",
+            "passkey",
+            "magic"
+          ]
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "AuthLayout",
+      "surface": "kit-block",
+      "spec": "block.authpage",
+      "source": "xgen/specs/blocks/authpage.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "level",
+        "layout",
+        "side",
+        "mode",
+        "social",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "auth.signin.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "auth.signin.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "auth.signin.submit",
+          "keys": []
+        },
+        {
+          "prop": "switchTo.text",
+          "dictionary": "auth.signin.switchText",
+          "keys": []
+        },
+        {
+          "prop": "switchTo.link",
+          "dictionary": "auth.signin.switchLink",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "auth.labels",
+          "keys": [
+            "name",
+            "email",
+            "password",
+            "remember",
+            "forgot",
+            "terms",
+            "divider",
+            "passkey",
+            "magic"
+          ]
+        },
+        {
+          "prop": "visual.title",
+          "dictionary": "vibe.authpage.visualTitle",
+          "keys": []
+        },
+        {
+          "prop": "visual.text",
+          "dictionary": "vibe.authpage.visualText",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "BeforeAfter",
+      "surface": "kit-block",
+      "spec": "block.beforeafter",
+      "source": "xgen/specs/blocks/beforeafter.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "points",
+          "collection": "beforeafter",
+          "kind": "point",
+          "record": "Contrast",
+          "map": "contrast",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.before.value",
+            "metadata.after.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "icons",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.beforeafter.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.points",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "vibe.beforeafter.labels",
+          "keys": [
+            "before",
+            "after"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "BentoGrid",
+      "surface": "kit-block",
+      "spec": "block.bento",
+      "source": "xgen/specs/blocks/bento.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "tiles",
+          "collection": "bento",
+          "kind": "tile",
+          "record": "Tile",
+          "map": "tile",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value",
+            "metadata.size.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "media",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.bento.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.tiles",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "BottomNav",
+      "surface": "kit-block",
+      "spec": "block.bottomnav",
+      "source": "xgen/specs/blocks/bottomnav.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "tabs",
+          "collection": "tabs",
+          "kind": "tab",
+          "record": "NavLink",
+          "map": "tab",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "current",
+        "labels",
+        "position",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "label",
+          "dictionary": "vibe.bottom.label",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "CartList",
+      "surface": "kit-block",
+      "spec": "block.cart",
+      "source": "xgen/specs/blocks/cart.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "lines",
+          "collection": "cart",
+          "kind": "cartline",
+          "record": "CartLine",
+          "map": "cartline",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.variant.value",
+            "metadata.price.value",
+            "metadata.currency.value",
+            "metadata.qty.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "media",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.cart.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.cart",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.cart",
+          "keys": [
+            "caption",
+            "product",
+            "price",
+            "qty",
+            "total",
+            "remove",
+            "subtotal",
+            "checkout",
+            "decrease",
+            "increase"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "CartDrawer",
+      "surface": "kit-block",
+      "spec": "block.cartdrawer",
+      "source": "xgen/specs/blocks/cartdrawer.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "lines",
+          "collection": "cart",
+          "kind": "cartline",
+          "record": "CartLine",
+          "map": "cartline",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.variant.value",
+            "metadata.price.value",
+            "metadata.currency.value",
+            "metadata.qty.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "rows",
+          "collection": "summary",
+          "kind": "summaryrow",
+          "record": "SummaryRow",
+          "map": "summaryrow",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.amount.value",
+            "metadata.currency.value",
+            "metadata.strong.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "state",
+        "media",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "labels",
+          "dictionary": "commerce.cart",
+          "keys": [
+            "caption",
+            "product",
+            "price",
+            "qty",
+            "total",
+            "remove",
+            "subtotal",
+            "checkout",
+            "decrease",
+            "increase"
+          ]
+        },
+        {
+          "prop": "drawer",
+          "dictionary": "commerce.drawer",
+          "keys": [
+            "title",
+            "close",
+            "progress",
+            "empty",
+            "emptyText",
+            "browse"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ShoppingCart",
+      "surface": "kit-block",
+      "spec": "block.cartpage",
+      "source": "xgen/specs/blocks/cartpage.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "lines",
+          "collection": "cart",
+          "kind": "cartline",
+          "record": "CartLine",
+          "map": "cartline",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.variant.value",
+            "metadata.price.value",
+            "metadata.currency.value",
+            "metadata.qty.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "rows",
+          "collection": "summary",
+          "kind": "summaryrow",
+          "record": "SummaryRow",
+          "map": "summaryrow",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.amount.value",
+            "metadata.currency.value",
+            "metadata.strong.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "promos",
+          "collection": "promos",
+          "kind": "promo",
+          "record": "Promo",
+          "map": "promo",
+          "list": true,
+          "required": [
+            "id",
+            "title"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "promo",
+        "progress",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.cartPage.title",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.cart",
+          "keys": [
+            "caption",
+            "product",
+            "price",
+            "qty",
+            "total",
+            "remove",
+            "subtotal",
+            "checkout",
+            "decrease",
+            "increase"
+          ]
+        },
+        {
+          "prop": "totals",
+          "dictionary": "commerce.totals",
+          "keys": [
+            "title",
+            "items",
+            "promo",
+            "apply",
+            "codes",
+            "progress",
+            "checkout",
+            "note"
+          ]
+        },
+        {
+          "prop": "actions",
+          "dictionary": "commerce.cartPage",
+          "keys": [
+            "back",
+            "clear",
+            "empty"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "CategoryNav",
+      "surface": "kit-block",
+      "spec": "block.categories",
+      "source": "xgen/specs/blocks/categories.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "categories",
+          "collection": "categories",
+          "kind": "menu_item",
+          "record": "Category",
+          "map": "menuCategory",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "metadata.count.value",
+            "slug"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "current",
+        "layout",
+        "count",
+        "icon",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "label",
+          "dictionary": "commerce.nav.label",
+          "keys": []
+        },
+        {
+          "prop": "tools",
+          "dictionary": "commerce.tools",
+          "keys": [
+            "search",
+            "sort",
+            "sortValue",
+            "shown",
+            "query"
+          ]
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "SupportChannels",
+      "surface": "kit-block",
+      "spec": "block.channels",
+      "source": "xgen/specs/blocks/channels.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "channels",
+          "collection": "channels",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "action",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "support.channels.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.channels",
+          "keys": []
+        },
+        {
+          "prop": "open",
+          "dictionary": "support.channels.open",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ChartPanel",
+      "surface": "kit-block",
+      "spec": "block.chart",
+      "source": "xgen/specs/blocks/chart.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "series",
+          "collection": "series",
+          "kind": "point",
+          "record": "Point",
+          "map": "point",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "chart",
+        "size",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "dashboard.chart.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "dashboard.chart.text",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.series",
+          "keys": []
+        },
+        {
+          "prop": "summary",
+          "dictionary": "dashboard.chart.summary",
+          "keys": []
+        },
+        {
+          "prop": "percent",
+          "dictionary": "dashboard.chart.percent",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "Checklist",
+      "surface": "kit-block",
+      "spec": "block.checklist",
+      "source": "xgen/specs/blocks/checklist.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "tasks",
+          "collection": "checklist",
+          "kind": "task",
+          "record": "Task",
+          "map": "task",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.done.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "progress",
+        "marker",
+        "detail",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "onboarding.checklist.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.tasks",
+          "keys": []
+        },
+        {
+          "prop": "progressLabel",
+          "dictionary": "onboarding.checklist.progress",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "CheckoutForm",
+      "surface": "kit-block",
+      "spec": "block.checkout",
+      "source": "xgen/specs/blocks/checkout.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "days",
+          "collection": "days",
+          "kind": "day",
+          "record": "Day",
+          "map": "day",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.note.value",
+            "metadata.slots.value",
+            "metadata.closed.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "payments",
+          "collection": "payments",
+          "kind": "payment",
+          "record": "Payment",
+          "map": "payment",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "lines",
+          "collection": "cart",
+          "kind": "cartline",
+          "record": "CartLine",
+          "map": "cartline",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.variant.value",
+            "metadata.price.value",
+            "metadata.currency.value",
+            "metadata.qty.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "rows",
+          "collection": "summary",
+          "kind": "summaryrow",
+          "record": "SummaryRow",
+          "map": "summaryrow",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.amount.value",
+            "metadata.currency.value",
+            "metadata.strong.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "promos",
+          "collection": "promos",
+          "kind": "promo",
+          "record": "Promo",
+          "map": "promo",
+          "list": true,
+          "required": [
+            "id",
+            "title"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "summary",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.checkout.title",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.checkout",
+          "keys": [
+            "contacts",
+            "contactsText",
+            "name",
+            "phone",
+            "email",
+            "address",
+            "addressText",
+            "street",
+            "house",
+            "flat",
+            "entrance",
+            "floor",
+            "comment",
+            "slot",
+            "slotText",
+            "payment",
+            "paymentText",
+            "consent",
+            "submit",
+            "legal"
+          ]
+        },
+        {
+          "prop": "totals",
+          "dictionary": "commerce.totals",
+          "keys": [
+            "title",
+            "items",
+            "promo",
+            "apply",
+            "codes",
+            "progress",
+            "checkout",
+            "note"
+          ]
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "ComparisonTable",
+      "surface": "kit-block",
+      "spec": "block.compare",
+      "source": "xgen/specs/blocks/compare.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "rows",
+          "collection": "compare",
+          "kind": "row",
+          "record": "CompareRow",
+          "map": "row",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.a.value",
+            "metadata.b.value",
+            "metadata.c.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "rows",
+          "collection": "rivals",
+          "kind": "row",
+          "record": "CompareRow",
+          "map": "row",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.a.value",
+            "metadata.b.value",
+            "metadata.c.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "highlight",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.compare.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.rows",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "vibe.compare.labels",
+          "keys": [
+            "caption",
+            "feature",
+            "a",
+            "b",
+            "c",
+            "yes",
+            "no"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ContactForm",
+      "surface": "kit-block",
+      "spec": "block.contact",
+      "source": "xgen/specs/blocks/contact.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "details",
+          "collection": "channels",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "fields",
+        "terms",
+        "level",
+        "page",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "support.contact.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "support.contact.text",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "support.contact.labels",
+          "keys": [
+            "name",
+            "email",
+            "subject",
+            "message",
+            "consent",
+            "submit"
+          ]
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "CookieBanner",
+      "surface": "kit-block",
+      "spec": "block.cookie",
+      "source": "xgen/specs/blocks/cookie.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "layout",
+        "actions",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "promo.cookie.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "promo.cookie.text",
+          "keys": []
+        },
+        {
+          "prop": "accept",
+          "dictionary": "promo.cookie.accept",
+          "keys": []
+        },
+        {
+          "prop": "decline",
+          "dictionary": "promo.cookie.decline",
+          "keys": []
+        },
+        {
+          "prop": "settings",
+          "dictionary": "promo.cookie.settings",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "CreditPacks",
+      "surface": "kit-block",
+      "spec": "block.credits",
+      "source": "xgen/specs/blocks/credits.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "packs",
+          "collection": "credits",
+          "kind": "pack",
+          "record": "Pack",
+          "map": "pack",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.credits.value",
+            "metadata.price.value",
+            "metadata.currency.value"
+          ],
+          "optional": [
+            "metadata.badge.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "cols",
+        "item",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.credits.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.packs",
+          "keys": []
+        },
+        {
+          "prop": "badges",
+          "dictionary": "vibe.credits.badges",
+          "keys": [
+            "popular",
+            "best"
+          ]
+        },
+        {
+          "prop": "buy",
+          "dictionary": "vibe.credits.buy",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "CtaBand",
+      "surface": "kit-block",
+      "spec": "block.cta",
+      "source": "xgen/specs/blocks/cta.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "layout",
+        "tone",
+        "proof",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "site.home.ctaTitle",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "site.home.ctaText",
+          "keys": []
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "site.home.ctaButton",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "site.home.ctaSecondary",
+          "keys": []
+        },
+        {
+          "prop": "actions.emailLabel",
+          "dictionary": "promo.newsletter.label",
+          "keys": []
+        },
+        {
+          "prop": "quote.text",
+          "dictionary": "vibe.cta.quote",
+          "keys": []
+        },
+        {
+          "prop": "quote.by",
+          "dictionary": "vibe.cta.quoteBy",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "CtaProof",
+      "surface": "kit-block",
+      "spec": "block.ctaproof",
+      "source": "xgen/specs/blocks/ctaproof.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "content.logos",
+          "collection": "logos",
+          "kind": "logo",
+          "record": "Logo",
+          "map": "logo",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "content.features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "content.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "content.zones",
+          "collection": "zones",
+          "kind": "zone",
+          "record": "Zone",
+          "map": "zone",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.area.value",
+            "metadata.price.value",
+            "metadata.freeFrom.value",
+            "metadata.minOrder.value",
+            "metadata.time.value",
+            "metadata.currency.value"
+          ],
+          "optional": [
+            "metadata.express.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "proof",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.ctaProof.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "marketing.ctaProof.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "marketing.ctaProof.badge",
+          "keys": []
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "marketing.ctaProof.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "marketing.ctaProof.secondary",
+          "keys": []
+        },
+        {
+          "prop": "note",
+          "dictionary": "marketing.ctaProof.note",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "DashboardShell",
+      "surface": "kit-block",
+      "spec": "block.dashshell",
+      "source": "xgen/specs/blocks/dashshell.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "nav.links",
+          "collection": "sidenav",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "nav.sub",
+          "collection": "subnav",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "nav.footer",
+          "collection": "helplinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "level",
+        "topbar",
+        "search",
+        "sidebar",
+        "side",
+        "footer",
+        "content",
+        "frame",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "dashboard.shells.title",
+          "keys": []
+        },
+        {
+          "prop": "nav.label",
+          "dictionary": "dashboard.shells.label",
+          "keys": []
+        },
+        {
+          "prop": "nav.brand",
+          "dictionary": "site.header.brand",
+          "keys": []
+        },
+        {
+          "prop": "nav.subTitle",
+          "dictionary": "dashboard.shells.subTitle",
+          "keys": []
+        },
+        {
+          "prop": "nav.search",
+          "dictionary": "dashboard.shells.search",
+          "keys": []
+        },
+        {
+          "prop": "nav.shortcut",
+          "dictionary": "dashboard.shells.shortcut",
+          "keys": []
+        },
+        {
+          "prop": "nav.expand",
+          "dictionary": "dashboard.shells.expand",
+          "keys": []
+        },
+        {
+          "prop": "nav.userName",
+          "dictionary": "dashboard.shells.userName",
+          "keys": []
+        },
+        {
+          "prop": "nav.copyright",
+          "dictionary": "dashboard.shells.copyright",
+          "keys": []
+        },
+        {
+          "prop": "nav.footerLabel",
+          "dictionary": "dashboard.shells.footerLabel",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "DeliveryInfo",
+      "surface": "kit-block",
+      "spec": "block.delivery",
+      "source": "xgen/specs/blocks/delivery.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "facts",
+          "collection": "deliveryfacts",
+          "kind": "fact",
+          "record": "Feature",
+          "map": "fact",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "zones",
+          "collection": "zones",
+          "kind": "zone",
+          "record": "Zone",
+          "map": "zone",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.area.value",
+            "metadata.price.value",
+            "metadata.freeFrom.value",
+            "metadata.minOrder.value",
+            "metadata.time.value",
+            "metadata.currency.value"
+          ],
+          "optional": [
+            "metadata.express.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.delivery.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "commerce.delivery.lead",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.delivery",
+          "keys": [
+            "zones",
+            "freeFrom"
+          ]
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "EmptyPanel",
+      "surface": "kit-block",
+      "spec": "block.empty",
+      "source": "xgen/specs/blocks/empty.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "icon",
+        "ctaHref",
+        "layout",
+        "actions",
+        "visual",
+        "size",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "dashboard.empty.orders.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "dashboard.empty.orders.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "dashboard.empty.orders.cta",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ErrorPage",
+      "surface": "kit-block",
+      "spec": "block.errorpage",
+      "source": "xgen/specs/blocks/errorpage.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "level",
+        "layout",
+        "code",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.error.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "vibe.error.text",
+          "keys": []
+        },
+        {
+          "prop": "status",
+          "dictionary": "vibe.error.status",
+          "keys": []
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "vibe.error.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "vibe.error.secondary",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "FaqList",
+      "surface": "kit-block",
+      "spec": "block.faq",
+      "source": "xgen/specs/blocks/faq.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "items",
+          "collection": "faq",
+          "kind": "faq",
+          "record": "Faq",
+          "map": "faq",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.answer.value",
+            "terms"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "filter.tabs",
+          "collection": "faqtabs",
+          "kind": "tab",
+          "record": "FaqTab",
+          "map": "faqtab",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "multiple",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "site.pricing.faqTitle",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "vibe.faq.empty",
+          "keys": []
+        },
+        {
+          "prop": "search.label",
+          "dictionary": "vibe.faq.search",
+          "keys": []
+        },
+        {
+          "prop": "filter.label",
+          "dictionary": "vibe.faq.tabs",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "FaqSplit",
+      "surface": "kit-block",
+      "spec": "block.faqsplit",
+      "source": "xgen/specs/blocks/faqsplit.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "items",
+          "collection": "questions",
+          "kind": "question",
+          "record": "Question",
+          "map": "question",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.answer.value",
+            "terms",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "channels",
+          "collection": "channels",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "topics",
+          "collection": "faqtabs",
+          "kind": "tab",
+          "record": "FaqTab",
+          "map": "faqtab",
+          "list": true,
+          "required": [
+            "id",
+            "title"
+          ],
+          "optional": [
+            "metadata.value.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cards",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.faqSplit.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "marketing.faqSplit.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "marketing.faqSplit.badge",
+          "keys": []
+        },
+        {
+          "prop": "labels.cta",
+          "dictionary": "marketing.faqSplit.cta",
+          "keys": []
+        },
+        {
+          "prop": "labels.more",
+          "dictionary": "marketing.faqSplit.more",
+          "keys": []
+        },
+        {
+          "prop": "labels.asideTitle",
+          "dictionary": "marketing.faqSplit.asideTitle",
+          "keys": []
+        },
+        {
+          "prop": "labels.asideText",
+          "dictionary": "marketing.faqSplit.asideText",
+          "keys": []
+        },
+        {
+          "prop": "labels.asideCta",
+          "dictionary": "marketing.faqSplit.asideCta",
+          "keys": []
+        },
+        {
+          "prop": "labels.search",
+          "dictionary": "marketing.faqSplit.search",
+          "keys": []
+        },
+        {
+          "prop": "labels.popular",
+          "dictionary": "marketing.faqSplit.popular",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "FeatureGrid",
+      "surface": "kit-block",
+      "spec": "block.features",
+      "source": "xgen/specs/blocks/features.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "item",
+        "mediaSide",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "site.home.featuresTitle",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.features",
+          "keys": []
+        },
+        {
+          "prop": "action.label",
+          "dictionary": "site.home.featuresAction",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "FeatureShowcase",
+      "surface": "kit-block",
+      "spec": "block.featureshowcase",
+      "source": "xgen/specs/blocks/featureshowcase.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "features",
+          "collection": "values",
+          "kind": "value",
+          "record": "Feature",
+          "map": "value",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "item",
+        "cols",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.featureShowcase.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "marketing.featureShowcase.lead",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.features",
+          "keys": []
+        },
+        {
+          "prop": "more",
+          "dictionary": "marketing.featureShowcase.more",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "FeatureSplit",
+      "surface": "kit-block",
+      "spec": "block.featuresplit",
+      "source": "xgen/specs/blocks/featuresplit.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "level",
+        "layout",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.featureSplit.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "marketing.featureSplit.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "marketing.featureSplit.badge",
+          "keys": []
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "marketing.featureSplit.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "marketing.featureSplit.secondary",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "FeatureTabs",
+      "surface": "kit-block",
+      "spec": "block.featuretabs",
+      "source": "xgen/specs/blocks/featuretabs.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "active",
+        "panel",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.tabs.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.features",
+          "keys": []
+        },
+        {
+          "prop": "tabsLabel",
+          "dictionary": "vibe.tabs.label",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "SiteFooter",
+      "surface": "kit-block",
+      "spec": "block.footer",
+      "source": "xgen/specs/blocks/footer.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "routes",
+        "layout",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "labels",
+          "dictionary": "site.footer",
+          "keys": [
+            "copyright",
+            "nav",
+            "home",
+            "pricing"
+          ]
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "FooterSplit",
+      "surface": "kit-block",
+      "spec": "block.footersplit",
+      "source": "xgen/specs/blocks/footersplit.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.points",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.contacts",
+          "collection": "contacts",
+          "kind": "contact",
+          "record": "Feature",
+          "map": "contact",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.channels",
+          "collection": "community",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "label",
+          "dictionary": "vibe.sitemap.label",
+          "keys": []
+        },
+        {
+          "prop": "brand",
+          "dictionary": "site.header.brand",
+          "keys": []
+        },
+        {
+          "prop": "tagline",
+          "dictionary": "marketing.footerSplit.tagline",
+          "keys": []
+        },
+        {
+          "prop": "copyright",
+          "dictionary": "marketing.footerSplit.copyright",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "marketing.footerSplit.labels",
+          "keys": [
+            "title",
+            "text",
+            "loopTitle",
+            "loopText",
+            "joinTitle",
+            "joinText",
+            "sitemap",
+            "points",
+            "signup",
+            "email",
+            "subscribe",
+            "note",
+            "cta",
+            "secondary"
+          ]
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "SiteHeader",
+      "surface": "kit-block",
+      "spec": "block.header",
+      "source": "xgen/specs/blocks/header.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "routes",
+        "current",
+        "layout",
+        "position",
+        "actions",
+        "ctaHref",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "labels",
+          "dictionary": "site.header",
+          "keys": [
+            "skip",
+            "brand",
+            "nav",
+            "home",
+            "pricing",
+            "theme"
+          ]
+        },
+        {
+          "prop": "cta",
+          "dictionary": "site.header.cta",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "HeroClassic",
+      "surface": "kit-block",
+      "spec": "block.hero",
+      "source": "xgen/specs/blocks/hero.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "media.lines",
+          "collection": "terminal",
+          "kind": "line",
+          "record": "CodeLine",
+          "map": "line",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.line_kind.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "topics",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Topic",
+          "map": "prompt",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "nav.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "level",
+        "layout",
+        "scale",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "site.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "site.home.text",
+          "keys": []
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "site.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "site.home.secondary",
+          "keys": []
+        },
+        {
+          "prop": "actions.emailLabel",
+          "dictionary": "promo.newsletter.label",
+          "keys": []
+        },
+        {
+          "prop": "media.codeTitle",
+          "dictionary": "vibe.code.title",
+          "keys": []
+        },
+        {
+          "prop": "media.prompt",
+          "dictionary": "vibe.code.prompt",
+          "keys": []
+        },
+        {
+          "prop": "composer.attachLabel",
+          "dictionary": "vibe.hero.attach",
+          "keys": []
+        },
+        {
+          "prop": "composer.modelLabel",
+          "dictionary": "vibe.hero.model",
+          "keys": []
+        },
+        {
+          "prop": "nav.brand",
+          "dictionary": "site.header.brand",
+          "keys": []
+        },
+        {
+          "prop": "nav.skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "nav.label",
+          "dictionary": "site.header.nav",
+          "keys": []
+        },
+        {
+          "prop": "nav.login",
+          "dictionary": "site.header.login",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "vibe.hero.badgeLabel",
+          "keys": []
+        },
+        {
+          "prop": "badgeMark",
+          "dictionary": "vibe.hero.badgeMark",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "HeroSplit",
+      "surface": "kit-block",
+      "spec": "block.herosplit",
+      "source": "xgen/specs/blocks/herosplit.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "content.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "content.features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "content.people",
+          "collection": "testimonials",
+          "kind": "testimonial",
+          "record": "Quote",
+          "map": "testimonial",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.role.value",
+            "metadata.company.value",
+            "metadata.quote.value",
+            "metadata.rating.value",
+            "metadata.handle.value",
+            "metadata.time.value",
+            "metadata.mark.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "content.plans",
+          "collection": "tiers",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.tagline.value",
+            "metadata.price.value",
+            "metadata.currency.value",
+            "metadata.seats.value",
+            "metadata.storage.value",
+            "metadata.highlighted.value",
+            "metadata.features.value",
+            "metadata.yearly.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "level",
+        "extra",
+        "media",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.heroSplit.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "marketing.heroSplit.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "marketing.heroSplit.badge",
+          "keys": []
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "marketing.heroSplit.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "marketing.heroSplit.secondary",
+          "keys": []
+        },
+        {
+          "prop": "content.proof",
+          "dictionary": "marketing.heroSplit.proof",
+          "keys": []
+        },
+        {
+          "prop": "content.card.title",
+          "dictionary": "marketing.heroSplit.cardTitle",
+          "keys": []
+        },
+        {
+          "prop": "content.card.text",
+          "dictionary": "marketing.heroSplit.cardText",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "IconWall",
+      "surface": "kit-block",
+      "spec": "block.iconwall",
+      "source": "xgen/specs/blocks/iconwall.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "cols",
+        "item",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.wall.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.features",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "JobBoard",
+      "surface": "kit-block",
+      "spec": "block.jobs",
+      "source": "xgen/specs/blocks/jobs.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "jobs",
+          "collection": "jobs",
+          "kind": "job",
+          "record": "Job",
+          "map": "job",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.dept.value",
+            "metadata.location.value",
+            "metadata.type.value",
+            "metadata.salary.value",
+            "metadata.posted.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "departments",
+          "collection": "departments",
+          "kind": "department",
+          "record": "Department",
+          "map": "department",
+          "list": true,
+          "required": [
+            "id",
+            "title"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "salary",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "company.jobs.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "company.jobs.lead",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.jobs",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "company.jobs",
+          "keys": [
+            "apply",
+            "caption",
+            "role",
+            "team",
+            "location",
+            "type",
+            "salary",
+            "count"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "KanbanBoard",
+      "surface": "kit-block",
+      "spec": "block.kanban",
+      "source": "xgen/specs/blocks/kanban.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "lanes",
+          "collection": "lanes",
+          "kind": "lane",
+          "record": "Lane",
+          "map": "lane",
+          "list": true,
+          "required": [
+            "id",
+            "slug",
+            "title"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "cards",
+          "collection": "cards",
+          "kind": "card",
+          "record": "BoardCard",
+          "map": "card",
+          "list": true,
+          "required": [
+            "id",
+            "metadata.lane.value",
+            "title",
+            "metadata.tag.value",
+            "metadata.who.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "card",
+        "cols",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.kanban.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.lanes",
+          "keys": []
+        },
+        {
+          "prop": "countLabel",
+          "dictionary": "vibe.kanban.count",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "StoreLocations",
+      "surface": "kit-block",
+      "spec": "block.locations",
+      "source": "xgen/specs/blocks/locations.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "stores",
+          "collection": "stores",
+          "kind": "store",
+          "record": "Store",
+          "map": "store",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.store_kind.value",
+            "metadata.address.value",
+            "metadata.hours.value",
+            "metadata.phone.value",
+            "metadata.note.value",
+            "metadata.services.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.stores.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "commerce.stores.lead",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.stores",
+          "keys": []
+        },
+        {
+          "prop": "kinds",
+          "dictionary": "commerce.stores.kinds",
+          "keys": [
+            "pickup",
+            "store"
+          ]
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.stores",
+          "keys": [
+            "map"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "LogoCloud",
+      "surface": "kit-block",
+      "spec": "block.logos",
+      "source": "xgen/specs/blocks/logos.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "logos",
+          "collection": "logos",
+          "kind": "logo",
+          "record": "Logo",
+          "map": "logo",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "item",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.logos.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.logos",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "MediaList",
+      "surface": "kit-block",
+      "spec": "block.medialist",
+      "source": "xgen/specs/blocks/medialist.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "extras.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.steps",
+          "collection": "steps",
+          "kind": "step",
+          "record": "Step",
+          "map": "step",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.posts",
+          "collection": "posts",
+          "kind": "post",
+          "record": "Post",
+          "map": "post",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "excerpt",
+            "terms",
+            "author_id",
+            "metadata.date.value",
+            "metadata.minutes.value",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": [
+            "featured_media_id"
+          ]
+        },
+        {
+          "prop": "extras.topics",
+          "collection": "categories",
+          "kind": "menu_item",
+          "record": "Category",
+          "map": "menuCategory",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "metadata.count.value",
+            "slug"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.channels",
+          "collection": "channels",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.reviews",
+          "collection": "reviews",
+          "kind": "review",
+          "record": "Review",
+          "map": "review",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "author_id",
+            "metadata.rating.value",
+            "metadata.text.value",
+            "metadata.date.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.mediaList.figures.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "marketing.mediaList.figures.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "marketing.mediaList.figures.badge",
+          "keys": []
+        },
+        {
+          "prop": "labels.list",
+          "dictionary": "marketing.mediaList.figures.list",
+          "keys": []
+        },
+        {
+          "prop": "labels.count",
+          "dictionary": "marketing.mediaList.count",
+          "keys": []
+        },
+        {
+          "prop": "labels.minutes",
+          "dictionary": "content.labels.minutes",
+          "keys": []
+        },
+        {
+          "prop": "labels.featured",
+          "dictionary": "marketing.mediaList.featured",
+          "keys": []
+        },
+        {
+          "prop": "labels.rating",
+          "dictionary": "testimonials.rating",
+          "keys": []
+        },
+        {
+          "prop": "labels.figures",
+          "dictionary": "marketing.mediaList.supportFigures",
+          "keys": []
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "marketing.mediaList.figures.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "marketing.mediaList.proof.secondary",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "MegaMenu",
+      "surface": "kit-block",
+      "spec": "block.megamenu",
+      "source": "xgen/specs/blocks/megamenu.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "groups",
+          "collection": "megagroups",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "brandHref",
+        "panel",
+        "cols",
+        "promo",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "label",
+          "dictionary": "vibe.nav.label",
+          "keys": []
+        },
+        {
+          "prop": "brand",
+          "dictionary": "site.header.brand",
+          "keys": []
+        },
+        {
+          "prop": "trigger",
+          "dictionary": "vibe.mega.trigger",
+          "keys": []
+        },
+        {
+          "prop": "promoTitle",
+          "dictionary": "vibe.mega.promoTitle",
+          "keys": []
+        },
+        {
+          "prop": "promoText",
+          "dictionary": "vibe.mega.promoText",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "MetricRow",
+      "surface": "kit-block",
+      "spec": "block.metrics",
+      "source": "xgen/specs/blocks/metrics.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "metrics",
+          "collection": "metrics",
+          "kind": "metric",
+          "record": "Stat",
+          "map": "metric",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "cols",
+        "item",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "dashboard.metrics.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.metrics",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "NavBar",
+      "surface": "kit-block",
+      "spec": "block.navbar",
+      "source": "xgen/specs/blocks/navbar.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "brandHref",
+        "current",
+        "tone",
+        "layout",
+        "over",
+        "skip",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "label",
+          "dictionary": "vibe.nav.label",
+          "keys": []
+        },
+        {
+          "prop": "brand",
+          "dictionary": "site.header.brand",
+          "keys": []
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "site.header.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.login",
+          "dictionary": "site.header.login",
+          "keys": []
+        },
+        {
+          "prop": "search.label",
+          "dictionary": "vibe.nav.search",
+          "keys": []
+        },
+        {
+          "prop": "search.shortcut",
+          "dictionary": "vibe.nav.shortcut",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "NewsletterForm",
+      "surface": "kit-block",
+      "spec": "block.newsletter",
+      "source": "xgen/specs/blocks/newsletter.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "layout",
+        "terms",
+        "tone",
+        "align",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "promo.newsletter.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "promo.newsletter.text",
+          "keys": []
+        },
+        {
+          "prop": "label",
+          "dictionary": "promo.newsletter.label",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "promo.newsletter.submit",
+          "keys": []
+        },
+        {
+          "prop": "consent",
+          "dictionary": "promo.newsletter.consent",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "OrderTable",
+      "surface": "kit-block",
+      "spec": "block.orders",
+      "source": "xgen/specs/blocks/orders.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "orders",
+          "collection": "orders",
+          "kind": "order",
+          "record": "Order",
+          "map": "order",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.date.value",
+            "metadata.total.value",
+            "metadata.currency.value",
+            "metadata.order_status.value",
+            "metadata.items.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "pager",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.orders.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.orders",
+          "keys": []
+        },
+        {
+          "prop": "statuses",
+          "dictionary": "status",
+          "keys": [
+            "active",
+            "legacy",
+            "paid",
+            "shipped",
+            "pending",
+            "refunded"
+          ]
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.orders",
+          "keys": [
+            "caption",
+            "number",
+            "date",
+            "items",
+            "total",
+            "status",
+            "itemsCount",
+            "summary",
+            "previous",
+            "next"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "DashboardOverview",
+      "surface": "kit-block",
+      "spec": "block.overview",
+      "source": "xgen/specs/blocks/overview.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "metrics",
+          "collection": "metrics",
+          "kind": "metric",
+          "record": "Stat",
+          "map": "metric",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "chart.series",
+          "collection": "series",
+          "kind": "point",
+          "record": "Point",
+          "map": "point",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "activity.events",
+          "collection": "activity",
+          "kind": "event",
+          "record": "Event",
+          "map": "event",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.time.value",
+            "metadata.tone.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.overview.title",
+          "keys": []
+        },
+        {
+          "prop": "chart.title",
+          "dictionary": "dashboard.chart.title",
+          "keys": []
+        },
+        {
+          "prop": "chart.text",
+          "dictionary": "dashboard.chart.text",
+          "keys": []
+        },
+        {
+          "prop": "chart.summary",
+          "dictionary": "dashboard.chart.summary",
+          "keys": []
+        },
+        {
+          "prop": "activity.title",
+          "dictionary": "dashboard.activity.title",
+          "keys": []
+        },
+        {
+          "prop": "activity.text",
+          "dictionary": "dashboard.activity.text",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "PageIntro",
+      "surface": "kit-block",
+      "spec": "block.pagehead",
+      "source": "xgen/specs/blocks/pagehead.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "href",
+        "level",
+        "align",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.pagehead.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "vibe.pagehead.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "vibe.pagehead.cta",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "PageTrail",
+      "surface": "kit-block",
+      "spec": "block.pagetrail",
+      "source": "xgen/specs/blocks/pagetrail.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "crumbs",
+          "collection": "crumbs",
+          "kind": "page",
+          "record": "NavLink",
+          "map": "page",
+          "list": true,
+          "required": [
+            "id",
+            "title"
+          ],
+          "optional": [
+            "slug",
+            "parent_id",
+            "metadata.icon.value"
+          ]
+        },
+        {
+          "prop": "extras.facts",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": [
+            "metadata.unit.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "aside",
+        "level",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.pageTrail.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "marketing.pageTrail.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "marketing.pageTrail.badge",
+          "keys": []
+        },
+        {
+          "prop": "label",
+          "dictionary": "marketing.pageTrail.label",
+          "keys": []
+        },
+        {
+          "prop": "extras.value",
+          "dictionary": "marketing.pageTrail.value",
+          "keys": []
+        },
+        {
+          "prop": "extras.caption",
+          "dictionary": "marketing.pageTrail.caption",
+          "keys": []
+        },
+        {
+          "prop": "extras.note",
+          "dictionary": "marketing.pageTrail.note",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "PhotoGallery",
+      "surface": "kit-block",
+      "spec": "block.photos",
+      "source": "xgen/specs/blocks/photos.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "photos",
+          "collection": "photos",
+          "kind": "photo",
+          "record": "Photo",
+          "map": "photo",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.tag.value",
+            "metadata.size.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "captions",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "company.photos.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "company.photos.lead",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.photos",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "company.photos",
+          "keys": [
+            "previous",
+            "next",
+            "counter"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "PricingCard",
+      "surface": "kit-block",
+      "spec": "block.plan",
+      "source": "xgen/specs/blocks/plan.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "plan",
+          "collection": "tiers",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": false,
+          "required": [
+            "id",
+            "title",
+            "metadata.tagline.value",
+            "metadata.price.value",
+            "metadata.currency.value",
+            "metadata.seats.value",
+            "metadata.storage.value",
+            "metadata.highlighted.value",
+            "metadata.features.value",
+            "metadata.yearly.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "current",
+        "emphasis",
+        "density",
+        "billing"
+      ],
+      "labels": [
+        {
+          "prop": "labels",
+          "dictionary": "pricing",
+          "keys": [
+            "popular",
+            "perMonth",
+            "seats",
+            "storage",
+            "cta",
+            "free",
+            "perYear",
+            "empty"
+          ]
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "PostHeader",
+      "surface": "kit-block",
+      "spec": "block.postheader",
+      "source": "xgen/specs/blocks/postheader.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "post",
+          "collection": "posts",
+          "kind": "post",
+          "record": "Post",
+          "map": "post",
+          "list": false,
+          "required": [
+            "id",
+            "title",
+            "excerpt",
+            "author_id",
+            "metadata.date.value",
+            "terms"
+          ],
+          "optional": [
+            "metadata.minutes.value",
+            "metadata.icon.value",
+            "slug",
+            "featured_media_id"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "level",
+        "layout",
+        "cover",
+        "meta",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "labels",
+          "dictionary": "content.labels",
+          "keys": [
+            "minutes",
+            "by",
+            "read",
+            "empty"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "PostGrid",
+      "surface": "kit-block",
+      "spec": "block.posts",
+      "source": "xgen/specs/blocks/posts.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "posts",
+          "collection": "posts",
+          "kind": "post",
+          "record": "Post",
+          "map": "post",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "excerpt",
+            "terms",
+            "author_id",
+            "metadata.date.value",
+            "metadata.minutes.value",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": [
+            "featured_media_id"
+          ]
+        },
+        {
+          "prop": "filter.topics",
+          "collection": "topics",
+          "kind": "topic",
+          "record": "PostTopic",
+          "map": "topic",
+          "list": true,
+          "required": [
+            "id",
+            "title"
+          ],
+          "optional": [
+            "metadata.value.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "media",
+        "meta",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "content.posts.title",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "content.labels",
+          "keys": [
+            "minutes",
+            "by",
+            "read",
+            "empty"
+          ]
+        },
+        {
+          "prop": "filter.label",
+          "dictionary": "vibe.posts.topics",
+          "keys": []
+        },
+        {
+          "prop": "action.label",
+          "dictionary": "content.posts.action",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "PostShowcase",
+      "surface": "kit-block",
+      "spec": "block.postshowcase",
+      "source": "xgen/specs/blocks/postshowcase.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "posts",
+          "collection": "posts",
+          "kind": "post",
+          "record": "Post",
+          "map": "post",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "excerpt",
+            "terms",
+            "author_id",
+            "metadata.date.value",
+            "metadata.minutes.value",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": [
+            "featured_media_id"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "content.postShowcase.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "content.postShowcase.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "content.postShowcase.badge",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.posts",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "content.labels",
+          "keys": [
+            "minutes",
+            "by",
+            "read",
+            "empty"
+          ]
+        },
+        {
+          "prop": "action.label",
+          "dictionary": "content.postShowcase.action",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "PostSplit",
+      "surface": "kit-block",
+      "spec": "block.postsplit",
+      "source": "xgen/specs/blocks/postsplit.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "post",
+          "collection": "posts",
+          "kind": "post",
+          "record": "Post",
+          "map": "post",
+          "list": false,
+          "required": [
+            "id",
+            "title",
+            "excerpt",
+            "terms",
+            "author_id",
+            "metadata.date.value",
+            "metadata.minutes.value",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": [
+            "featured_media_id"
+          ]
+        },
+        {
+          "prop": "extras.tags",
+          "collection": "posttags",
+          "kind": "posttag",
+          "record": "NavLink",
+          "map": "posttag",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.outline",
+          "collection": "outline",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "level",
+        "layout",
+        "mediaSide",
+        "author",
+        "cover",
+        "actions",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "labels",
+          "dictionary": "content.postSplit.labels",
+          "keys": [
+            "minutes",
+            "views",
+            "likes",
+            "share",
+            "save",
+            "read",
+            "related"
+          ]
+        },
+        {
+          "prop": "extras.role",
+          "dictionary": "content.postSplit.role",
+          "keys": []
+        },
+        {
+          "prop": "extras.bio",
+          "dictionary": "content.postSplit.bio",
+          "keys": []
+        },
+        {
+          "prop": "extras.views",
+          "dictionary": "content.postSplit.views",
+          "keys": []
+        },
+        {
+          "prop": "extras.likes",
+          "dictionary": "content.postSplit.likes",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "PricingTiers",
+      "surface": "kit-block",
+      "spec": "block.pricing",
+      "source": "xgen/specs/blocks/pricing.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "plans",
+          "collection": "tiers",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.tagline.value",
+            "metadata.price.value",
+            "metadata.currency.value",
+            "metadata.seats.value",
+            "metadata.storage.value",
+            "metadata.highlighted.value",
+            "metadata.features.value",
+            "metadata.yearly.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "plans",
+          "collection": "duo",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": true
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "emphasis",
+        "billing",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "site.pricing.tiersTitle",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "pricing",
+          "keys": [
+            "popular",
+            "perMonth",
+            "seats",
+            "storage",
+            "cta",
+            "free",
+            "perYear",
+            "empty"
+          ]
+        },
+        {
+          "prop": "billingLabels",
+          "dictionary": "vibe.billing",
+          "keys": [
+            "label",
+            "monthly",
+            "annual",
+            "save"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ProductDetail",
+      "surface": "kit-block",
+      "spec": "block.product",
+      "source": "xgen/specs/blocks/product.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "product",
+          "collection": "products",
+          "kind": "product",
+          "record": "Product",
+          "map": "product",
+          "list": false,
+          "required": [
+            "id",
+            "title",
+            "metadata.summary.value",
+            "metadata.price.value",
+            "metadata.currency.value",
+            "metadata.rating.value",
+            "metadata.reviews.value",
+            "terms",
+            "metadata.inStock.value"
+          ],
+          "optional": [
+            "metadata.badge.value",
+            "metadata.compare_at.value",
+            "slug",
+            "featured_media_id"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "level",
+        "layout",
+        "mediaSide",
+        "thumbs",
+        "buy",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "labels",
+          "dictionary": "commerce.detail",
+          "keys": [
+            "add",
+            "soldOut",
+            "inStock",
+            "qty",
+            "decrease",
+            "increase",
+            "reviews",
+            "ratingLabel",
+            "shipping",
+            "returns",
+            "was",
+            "empty"
+          ]
+        },
+        {
+          "prop": "badges",
+          "dictionary": "commerce.badges",
+          "keys": [
+            "new",
+            "sale"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ProductInfo",
+      "surface": "kit-block",
+      "spec": "block.productinfo",
+      "source": "xgen/specs/blocks/productinfo.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "details",
+          "collection": "details",
+          "kind": "detail",
+          "record": "Detail",
+          "map": "detail",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "specs",
+          "collection": "specs",
+          "kind": "spec",
+          "record": "Spec",
+          "map": "spec",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "expand",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.info.title",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.info",
+          "keys": [
+            "specs"
+          ]
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "ProductGrid",
+      "surface": "kit-block",
+      "spec": "block.products",
+      "source": "xgen/specs/blocks/products.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "products",
+          "collection": "products",
+          "kind": "product",
+          "record": "Product",
+          "map": "product",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.summary.value",
+            "metadata.price.value",
+            "metadata.currency.value",
+            "metadata.rating.value",
+            "metadata.reviews.value",
+            "terms",
+            "metadata.inStock.value"
+          ],
+          "optional": [
+            "metadata.badge.value",
+            "metadata.compare_at.value",
+            "slug",
+            "featured_media_id"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "ratio",
+        "rating",
+        "action",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.products.title",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.productLabels",
+          "keys": [
+            "add",
+            "soldOut",
+            "reviews",
+            "ratingLabel",
+            "was",
+            "empty"
+          ]
+        },
+        {
+          "prop": "badges",
+          "dictionary": "commerce.badges",
+          "keys": [
+            "new",
+            "sale"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ProfileForm",
+      "surface": "kit-block",
+      "spec": "block.profile",
+      "source": "xgen/specs/blocks/profile.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "layout",
+        "avatar",
+        "prefs",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "account.profile.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "account.profile.text",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "account.profile.labels",
+          "keys": [
+            "picture",
+            "change",
+            "name",
+            "email",
+            "bio",
+            "prefs",
+            "updates",
+            "alerts",
+            "save",
+            "cancel"
+          ]
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "ProjectGrid",
+      "surface": "kit-block",
+      "spec": "block.projects",
+      "source": "xgen/specs/blocks/projects.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "projects",
+          "collection": "projects",
+          "kind": "project",
+          "record": "Project",
+          "map": "project",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "terms",
+            "metadata.year.value",
+            "metadata.summary.value",
+            "metadata.tags.value",
+            "metadata.featured.value",
+            "metadata.client.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "company.projects.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "company.projects.lead",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.projects",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "company.projects",
+          "keys": [
+            "featured",
+            "view",
+            "case"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ProofBand",
+      "surface": "kit-block",
+      "spec": "block.proof",
+      "source": "xgen/specs/blocks/proof.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "logos",
+          "collection": "logos",
+          "kind": "logo",
+          "record": "Logo",
+          "map": "logo",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "logoStyle",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.proof.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.logos",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "QuoteSplit",
+      "surface": "kit-block",
+      "spec": "block.quotesplit",
+      "source": "xgen/specs/blocks/quotesplit.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "quotes",
+          "collection": "testimonials",
+          "kind": "testimonial",
+          "record": "Quote",
+          "map": "testimonial",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.role.value",
+            "metadata.company.value",
+            "metadata.quote.value",
+            "metadata.rating.value",
+            "metadata.handle.value",
+            "metadata.time.value",
+            "metadata.mark.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "extras.logos",
+          "collection": "logos",
+          "kind": "logo",
+          "record": "Logo",
+          "map": "logo",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.quoteSplit.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "marketing.quoteSplit.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "marketing.quoteSplit.badge",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.quotes",
+          "keys": []
+        },
+        {
+          "prop": "labels.rating",
+          "dictionary": "testimonials.rating",
+          "keys": []
+        },
+        {
+          "prop": "labels.byLine",
+          "dictionary": "testimonials.byLine",
+          "keys": []
+        },
+        {
+          "prop": "labels.handleLine",
+          "dictionary": "testimonials.handleLine",
+          "keys": []
+        },
+        {
+          "prop": "extras.score",
+          "dictionary": "marketing.quoteSplit.score",
+          "keys": []
+        },
+        {
+          "prop": "extras.reviews",
+          "dictionary": "marketing.quoteSplit.reviews",
+          "keys": []
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "marketing.quoteSplit.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "marketing.quoteSplit.secondary",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "ReviewList",
+      "surface": "kit-block",
+      "spec": "block.reviews",
+      "source": "xgen/specs/blocks/reviews.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "reviews",
+          "collection": "reviews",
+          "kind": "review",
+          "record": "Review",
+          "map": "review",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "author_id",
+            "metadata.rating.value",
+            "metadata.text.value",
+            "metadata.date.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "item",
+        "avatar",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.reviews.title",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.reviewLabels",
+          "keys": [
+            "ratingLabel",
+            "empty"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "AppShell",
+      "surface": "kit-block",
+      "spec": "block.shell",
+      "source": "xgen/specs/blocks/shell.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "nav.links",
+          "collection": "sidenav",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "metrics",
+          "collection": "metrics",
+          "kind": "metric",
+          "record": "Stat",
+          "map": "metric",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "chart.series",
+          "collection": "series",
+          "kind": "point",
+          "record": "Point",
+          "map": "point",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "activity.events",
+          "collection": "activity",
+          "kind": "event",
+          "record": "Event",
+          "map": "event",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.time.value",
+            "metadata.tone.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.shell.title",
+          "keys": []
+        },
+        {
+          "prop": "nav.label",
+          "dictionary": "vibe.sidebar.label",
+          "keys": []
+        },
+        {
+          "prop": "nav.brand",
+          "dictionary": "site.header.brand",
+          "keys": []
+        },
+        {
+          "prop": "user.name",
+          "dictionary": "vibe.sidebar.userName",
+          "keys": []
+        },
+        {
+          "prop": "user.email",
+          "dictionary": "vibe.sidebar.userEmail",
+          "keys": []
+        },
+        {
+          "prop": "search.label",
+          "dictionary": "vibe.nav.search",
+          "keys": []
+        },
+        {
+          "prop": "search.shortcut",
+          "dictionary": "vibe.nav.shortcut",
+          "keys": []
+        },
+        {
+          "prop": "chart.title",
+          "dictionary": "dashboard.chart.title",
+          "keys": []
+        },
+        {
+          "prop": "chart.text",
+          "dictionary": "dashboard.chart.text",
+          "keys": []
+        },
+        {
+          "prop": "chart.summary",
+          "dictionary": "dashboard.chart.summary",
+          "keys": []
+        },
+        {
+          "prop": "activity.title",
+          "dictionary": "dashboard.activity.title",
+          "keys": []
+        },
+        {
+          "prop": "activity.text",
+          "dictionary": "dashboard.activity.text",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "SidebarNav",
+      "surface": "kit-block",
+      "spec": "block.sidenav",
+      "source": "xgen/specs/blocks/sidenav.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "links",
+          "collection": "sidenav",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "current",
+        "width",
+        "user",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "label",
+          "dictionary": "vibe.sidebar.label",
+          "keys": []
+        },
+        {
+          "prop": "brand",
+          "dictionary": "site.header.brand",
+          "keys": []
+        },
+        {
+          "prop": "userName",
+          "dictionary": "vibe.sidebar.userName",
+          "keys": []
+        },
+        {
+          "prop": "userEmail",
+          "dictionary": "vibe.sidebar.userEmail",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "SitemapFooter",
+      "surface": "kit-block",
+      "spec": "block.sitemap",
+      "source": "xgen/specs/blocks/sitemap.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.icon.value",
+            "slug"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "label",
+          "dictionary": "vibe.sitemap.label",
+          "keys": []
+        },
+        {
+          "prop": "brand",
+          "dictionary": "site.header.brand",
+          "keys": []
+        },
+        {
+          "prop": "tagline",
+          "dictionary": "vibe.sitemap.tagline",
+          "keys": []
+        },
+        {
+          "prop": "copyright",
+          "dictionary": "vibe.sitemap.copyright",
+          "keys": []
+        },
+        {
+          "prop": "signup.title",
+          "dictionary": "vibe.sitemap.signupTitle",
+          "keys": []
+        },
+        {
+          "prop": "signup.label",
+          "dictionary": "vibe.sitemap.signupLabel",
+          "keys": []
+        },
+        {
+          "prop": "signup.submit",
+          "dictionary": "vibe.sitemap.signupSubmit",
+          "keys": []
+        },
+        {
+          "prop": "status.label",
+          "dictionary": "vibe.sitemap.status",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "SkeletonLayout",
+      "surface": "kit-block",
+      "spec": "block.skeleton",
+      "source": "xgen/specs/blocks/skeleton.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "lines",
+          "collection": "placeholders",
+          "kind": "placeholder",
+          "record": "Line",
+          "map": "placeholder",
+          "list": true,
+          "required": [
+            "id"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "shape",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.skeleton.title",
+          "keys": []
+        },
+        {
+          "prop": "label",
+          "dictionary": "vibe.skeleton.label",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "SlotBoard",
+      "surface": "kit-block",
+      "spec": "block.slots",
+      "source": "xgen/specs/blocks/slots.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "days",
+          "collection": "days",
+          "kind": "day",
+          "record": "Day",
+          "map": "day",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.note.value",
+            "metadata.slots.value",
+            "metadata.closed.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "zone",
+          "collection": "zones",
+          "kind": "zone",
+          "record": "Zone",
+          "map": "zone",
+          "list": false,
+          "required": [
+            "id",
+            "title",
+            "metadata.area.value",
+            "metadata.price.value",
+            "metadata.freeFrom.value",
+            "metadata.minOrder.value",
+            "metadata.time.value",
+            "metadata.currency.value"
+          ],
+          "optional": [
+            "metadata.express.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "item",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.slots.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "commerce.slots.lead",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.days",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.slots",
+          "keys": [
+            "zone",
+            "price",
+            "freeFrom",
+            "time",
+            "primary",
+            "secondary",
+            "note"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "StatsBand",
+      "surface": "kit-block",
+      "spec": "block.stats",
+      "source": "xgen/specs/blocks/stats.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value",
+            "metadata.hint.value"
+          ],
+          "optional": [
+            "metadata.unit.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "cols",
+        "layout",
+        "surface",
+        "item",
+        "align",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.stats.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "marketing.stats.empty",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "Stepper",
+      "surface": "kit-block",
+      "spec": "block.stepper",
+      "source": "xgen/specs/blocks/stepper.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "steps",
+          "collection": "steps",
+          "kind": "step",
+          "record": "Step",
+          "map": "step",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "current",
+        "layout",
+        "marker",
+        "summary",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "onboarding.stepper.title",
+          "keys": []
+        },
+        {
+          "prop": "stepLabel",
+          "dictionary": "onboarding.stepper.stepLabel",
+          "keys": []
+        },
+        {
+          "prop": "back",
+          "dictionary": "onboarding.stepper.back",
+          "keys": []
+        },
+        {
+          "prop": "next",
+          "dictionary": "onboarding.stepper.next",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "StepsList",
+      "surface": "kit-block",
+      "spec": "block.steps",
+      "source": "xgen/specs/blocks/steps.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "steps",
+          "collection": "steps",
+          "kind": "step",
+          "record": "Step",
+          "map": "step",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "marker",
+        "align",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.steps.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.steps",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "FeatureSticky",
+      "surface": "kit-block",
+      "spec": "block.sticky",
+      "source": "xgen/specs/blocks/sticky.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "active",
+        "mediaSide",
+        "item",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.sticky.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.features",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "StoreHero",
+      "surface": "kit-block",
+      "spec": "block.storehero",
+      "source": "xgen/specs/blocks/storehero.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "perks",
+          "collection": "perks",
+          "kind": "perk",
+          "record": "Feature",
+          "map": "perk",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "level",
+        "layout",
+        "mediaSide",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.storeHero.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "commerce.storeHero.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "commerce.storeHero.badge",
+          "keys": []
+        },
+        {
+          "prop": "card",
+          "dictionary": "commerce.storeHero.card",
+          "keys": [
+            "title",
+            "text",
+            "icon"
+          ]
+        },
+        {
+          "prop": "actions.cta",
+          "dictionary": "commerce.storeHero.cta",
+          "keys": []
+        },
+        {
+          "prop": "actions.secondary",
+          "dictionary": "commerce.storeHero.secondary",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "StoryTabs",
+      "surface": "kit-block",
+      "spec": "block.storytabs",
+      "source": "xgen/specs/blocks/storytabs.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "steps",
+          "collection": "milestones",
+          "kind": "milestone",
+          "record": "Milestone",
+          "map": "milestone",
+          "list": true,
+          "required": [
+            "id",
+            "metadata.date.value",
+            "title",
+            "metadata.text.value",
+            "metadata.tag.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "active",
+        "layout",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "company.storyTabs.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "company.storyTabs.lead",
+          "keys": []
+        },
+        {
+          "prop": "badge",
+          "dictionary": "company.storyTabs.badge",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.milestones",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "company.storyTabs.labels",
+          "keys": [
+            "step",
+            "previous",
+            "next"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "OrderSummary",
+      "surface": "kit-block",
+      "spec": "block.summary",
+      "source": "xgen/specs/blocks/summary.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "rows",
+          "collection": "summary",
+          "kind": "summaryrow",
+          "record": "SummaryRow",
+          "map": "summaryrow",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.amount.value",
+            "metadata.currency.value",
+            "metadata.strong.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cta",
+        "note",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.summary.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.summary",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.summary",
+          "keys": [
+            "checkout",
+            "note"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "TeamGrid",
+      "surface": "kit-block",
+      "spec": "block.team",
+      "source": "xgen/specs/blocks/team.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "members",
+          "collection": "members",
+          "kind": "member",
+          "record": "Member",
+          "map": "member",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.role.value",
+            "metadata.dept.value",
+            "metadata.location.value",
+            "metadata.bio.value",
+            "metadata.skills.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "company.team.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "company.team.lead",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.members",
+          "keys": []
+        },
+        {
+          "prop": "depts",
+          "dictionary": "company.depts",
+          "keys": [
+            "leadership",
+            "engineering",
+            "design",
+            "product",
+            "support"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "TemplateGrid",
+      "surface": "kit-block",
+      "spec": "block.templates",
+      "source": "xgen/specs/blocks/templates.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "templates",
+          "collection": "templates",
+          "kind": "template",
+          "record": "Template",
+          "map": "template",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.views.value",
+            "metadata.likes.value",
+            "metadata.topic.value"
+          ],
+          "optional": []
+        },
+        {
+          "prop": "filters",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Filter",
+          "map": "promptFilter",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.value.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "browseHref",
+        "cols",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.templates.title",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "vibe.templates",
+          "keys": [
+            "filters",
+            "browse",
+            "views",
+            "likes"
+          ]
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.templates",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "TestimonialGrid",
+      "surface": "kit-block",
+      "spec": "block.testimonials",
+      "source": "xgen/specs/blocks/testimonials.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "quotes",
+          "collection": "testimonials",
+          "kind": "testimonial",
+          "record": "Quote",
+          "map": "testimonial",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.role.value",
+            "metadata.company.value",
+            "metadata.quote.value",
+            "metadata.rating.value",
+            "metadata.handle.value",
+            "metadata.time.value",
+            "metadata.mark.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "cols",
+        "item",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "marketing.testimonials.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.quotes",
+          "keys": []
+        },
+        {
+          "prop": "labels.rating",
+          "dictionary": "testimonials.rating",
+          "keys": []
+        },
+        {
+          "prop": "labels.byLine",
+          "dictionary": "testimonials.byLine",
+          "keys": []
+        },
+        {
+          "prop": "labels.handleLine",
+          "dictionary": "testimonials.handleLine",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "MilestoneTimeline",
+      "surface": "kit-block",
+      "spec": "block.timeline",
+      "source": "xgen/specs/blocks/timeline.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "milestones",
+          "collection": "milestones",
+          "kind": "milestone",
+          "record": "Milestone",
+          "map": "milestone",
+          "list": true,
+          "required": [
+            "id",
+            "metadata.date.value",
+            "title",
+            "metadata.text.value",
+            "metadata.tag.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "company.timeline.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "company.timeline.lead",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.milestones",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "TourCallout",
+      "surface": "kit-block",
+      "spec": "block.tour",
+      "source": "xgen/specs/blocks/tour.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "placement",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.tour.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "vibe.tour.text",
+          "keys": []
+        },
+        {
+          "prop": "target",
+          "dictionary": "vibe.tour.target",
+          "keys": []
+        },
+        {
+          "prop": "position",
+          "dictionary": "vibe.tour.position",
+          "keys": []
+        },
+        {
+          "prop": "skip",
+          "dictionary": "vibe.tour.skip",
+          "keys": []
+        },
+        {
+          "prop": "next",
+          "dictionary": "vibe.tour.next",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "UsageCalculator",
+      "surface": "kit-block",
+      "spec": "block.usage",
+      "source": "xgen/specs/blocks/usage.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "id",
+        "usage",
+        "href",
+        "layout",
+        "ends",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.usage.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "vibe.usage.text",
+          "keys": []
+        },
+        {
+          "prop": "slider.label",
+          "dictionary": "vibe.usage.slider",
+          "keys": []
+        },
+        {
+          "prop": "slider.unit",
+          "dictionary": "vibe.usage.unit",
+          "keys": []
+        },
+        {
+          "prop": "price.currency",
+          "dictionary": "vibe.usage.currency",
+          "keys": []
+        },
+        {
+          "prop": "price.label",
+          "dictionary": "vibe.usage.estimate",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "vibe.usage.cta",
+          "keys": []
+        }
+      ],
+      "emptyState": false
+    },
+    {
+      "id": "UspStrip",
+      "surface": "kit-block",
+      "spec": "block.usp",
+      "source": "xgen/specs/blocks/usp.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "perks",
+          "collection": "perks",
+          "kind": "perk",
+          "record": "Feature",
+          "map": "perk",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "empty",
+          "dictionary": "empty.perks",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "commerce.usp.title",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "VideoModal",
+      "surface": "kit-block",
+      "spec": "block.videomodal",
+      "source": "xgen/specs/blocks/videomodal.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "chapters",
+          "collection": "chapters",
+          "kind": "chapter",
+          "record": "Chapter",
+          "map": "chapter",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "size",
+        "outline",
+        "tone",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.modal.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "vibe.modal.text",
+          "keys": []
+        },
+        {
+          "prop": "close",
+          "dictionary": "vibe.modal.close",
+          "keys": []
+        },
+        {
+          "prop": "play",
+          "dictionary": "vibe.modal.play",
+          "keys": []
+        },
+        {
+          "prop": "chaptersTitle",
+          "dictionary": "vibe.modal.chapters",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "VideoGrid",
+      "surface": "kit-block",
+      "spec": "block.videos",
+      "source": "xgen/specs/blocks/videos.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "quotes",
+          "collection": "testimonials",
+          "kind": "testimonial",
+          "record": "Quote",
+          "map": "testimonial",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.role.value",
+            "metadata.company.value",
+            "metadata.quote.value",
+            "metadata.rating.value",
+            "metadata.handle.value",
+            "metadata.time.value",
+            "metadata.mark.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "cols",
+        "caption",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.videos.title",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.quotes",
+          "keys": []
+        },
+        {
+          "prop": "playLabel",
+          "dictionary": "vibe.videos.play",
+          "keys": []
+        },
+        {
+          "prop": "byLine",
+          "dictionary": "testimonials.byLine",
+          "keys": []
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "SignupWizard",
+      "surface": "kit-block",
+      "spec": "block.wizard",
+      "source": "xgen/specs/blocks/wizard.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "steps",
+          "collection": "wizard",
+          "kind": "step",
+          "record": "WizardStep",
+          "map": "wizardStep",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.text.value",
+            "metadata.icon.value",
+            "metadata.fieldA.value",
+            "metadata.fieldB.value"
+          ],
+          "optional": []
+        }
+      ],
+      "settings": [
+        "id",
+        "current",
+        "level",
+        "progress",
+        "layout",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "vibe.wizard.title",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "vibe.wizard.labels",
+          "keys": [
+            "stepOf",
+            "steps",
+            "back",
+            "next",
+            "finish"
+          ]
+        }
+      ],
+      "emptyState": true,
+      "emptyMode": "omit"
+    },
+    {
+      "id": "ZoneTable",
+      "surface": "kit-block",
+      "spec": "block.zones",
+      "source": "xgen/specs/blocks/zones.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "zones",
+          "collection": "zones",
+          "kind": "zone",
+          "record": "Zone",
+          "map": "zone",
+          "list": true,
+          "required": [
+            "id",
+            "title",
+            "metadata.area.value",
+            "metadata.price.value",
+            "metadata.freeFrom.value",
+            "metadata.minOrder.value",
+            "metadata.time.value",
+            "metadata.currency.value"
+          ],
+          "optional": [
+            "metadata.express.value"
+          ]
+        }
+      ],
+      "settings": [
+        "id",
+        "layout",
+        "tone",
+        "density",
+        "landmarkLabel"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "commerce.zones.title",
+          "keys": []
+        },
+        {
+          "prop": "lead",
+          "dictionary": "commerce.zones.lead",
+          "keys": []
+        },
+        {
+          "prop": "empty",
+          "dictionary": "empty.zones",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "commerce.zones",
+          "keys": [
+            "caption",
+            "zone",
+            "price",
+            "freeFrom",
+            "minOrder",
+            "time",
+            "express"
+          ]
+        }
+      ],
+      "emptyState": true
+    },
+    {
+      "id": "screen.blocks",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/blocks.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "routes",
+        "frame"
+      ],
+      "labels": [],
+      "emptyState": true,
+      "uses": []
+    },
+    {
+      "id": "screen.catalog",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/catalog.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "AboutCompany.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true
+        },
+        {
+          "prop": "AboutCompany.values",
+          "collection": "values",
+          "kind": "value",
+          "record": "Feature",
+          "map": "value",
+          "list": true
+        },
+        {
+          "prop": "AboutMe.facts",
+          "collection": "profilefacts",
+          "kind": "profilefact",
+          "record": "Spec",
+          "map": "profilefact",
+          "list": true
+        },
+        {
+          "prop": "AboutMe.skills",
+          "collection": "skills",
+          "kind": "skill",
+          "record": "Skill",
+          "map": "skill",
+          "list": true
+        },
+        {
+          "prop": "FeatureAccordion.features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true
+        },
+        {
+          "prop": "ActivityFeed.events",
+          "collection": "activity",
+          "kind": "event",
+          "record": "Event",
+          "map": "event",
+          "list": true
+        },
+        {
+          "prop": "ArticleBody.sections",
+          "collection": "article",
+          "kind": "section",
+          "record": "Section",
+          "map": "section",
+          "list": true
+        },
+        {
+          "prop": "BeforeAfter.points",
+          "collection": "beforeafter",
+          "kind": "point",
+          "record": "Contrast",
+          "map": "contrast",
+          "list": true
+        },
+        {
+          "prop": "BentoGrid.tiles",
+          "collection": "bento",
+          "kind": "tile",
+          "record": "Tile",
+          "map": "tile",
+          "list": true
+        },
+        {
+          "prop": "BottomNav.tabs",
+          "collection": "tabs",
+          "kind": "tab",
+          "record": "NavLink",
+          "map": "tab",
+          "list": true
+        },
+        {
+          "prop": "CartList.lines",
+          "collection": "cart",
+          "kind": "cartline",
+          "record": "CartLine",
+          "map": "cartline",
+          "list": true
+        },
+        {
+          "prop": "CartDrawer.rows",
+          "collection": "summary",
+          "kind": "summaryrow",
+          "record": "SummaryRow",
+          "map": "summaryrow",
+          "list": true
+        },
+        {
+          "prop": "ShoppingCart.promos",
+          "collection": "promos",
+          "kind": "promo",
+          "record": "Promo",
+          "map": "promo",
+          "list": true
+        },
+        {
+          "prop": "CategoryNav.categories",
+          "collection": "categories",
+          "kind": "menu_item",
+          "record": "Category",
+          "map": "menuCategory",
+          "list": true
+        },
+        {
+          "prop": "SupportChannels.channels",
+          "collection": "channels",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true
+        },
+        {
+          "prop": "ChartPanel.series",
+          "collection": "series",
+          "kind": "point",
+          "record": "Point",
+          "map": "point",
+          "list": true
+        },
+        {
+          "prop": "Checklist.tasks",
+          "collection": "checklist",
+          "kind": "task",
+          "record": "Task",
+          "map": "task",
+          "list": true
+        },
+        {
+          "prop": "CheckoutForm.days",
+          "collection": "days",
+          "kind": "day",
+          "record": "Day",
+          "map": "day",
+          "list": true
+        },
+        {
+          "prop": "CheckoutForm.payments",
+          "collection": "payments",
+          "kind": "payment",
+          "record": "Payment",
+          "map": "payment",
+          "list": true
+        },
+        {
+          "prop": "ComparisonTable.rows",
+          "collection": "compare",
+          "kind": "row",
+          "record": "CompareRow",
+          "map": "row",
+          "list": true
+        },
+        {
+          "prop": "ComparisonTable.rows",
+          "collection": "rivals",
+          "kind": "row",
+          "record": "CompareRow",
+          "map": "row",
+          "list": true
+        },
+        {
+          "prop": "CreditPacks.packs",
+          "collection": "credits",
+          "kind": "pack",
+          "record": "Pack",
+          "map": "pack",
+          "list": true
+        },
+        {
+          "prop": "CtaProof.content.logos",
+          "collection": "logos",
+          "kind": "logo",
+          "record": "Logo",
+          "map": "logo",
+          "list": true
+        },
+        {
+          "prop": "CtaProof.content.zones",
+          "collection": "zones",
+          "kind": "zone",
+          "record": "Zone",
+          "map": "zone",
+          "list": true
+        },
+        {
+          "prop": "DashboardShell.nav.links",
+          "collection": "sidenav",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "DashboardShell.nav.sub",
+          "collection": "subnav",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "DashboardShell.nav.footer",
+          "collection": "helplinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "DeliveryInfo.facts",
+          "collection": "deliveryfacts",
+          "kind": "fact",
+          "record": "Feature",
+          "map": "fact",
+          "list": true
+        },
+        {
+          "prop": "FaqList.items",
+          "collection": "faq",
+          "kind": "faq",
+          "record": "Faq",
+          "map": "faq",
+          "list": true
+        },
+        {
+          "prop": "FaqList.filter.tabs",
+          "collection": "faqtabs",
+          "kind": "tab",
+          "record": "FaqTab",
+          "map": "faqtab",
+          "list": true
+        },
+        {
+          "prop": "FaqSplit.items",
+          "collection": "questions",
+          "kind": "question",
+          "record": "Question",
+          "map": "question",
+          "list": true
+        },
+        {
+          "prop": "FooterSplit.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "FooterSplit.extras.contacts",
+          "collection": "contacts",
+          "kind": "contact",
+          "record": "Feature",
+          "map": "contact",
+          "list": true
+        },
+        {
+          "prop": "FooterSplit.extras.channels",
+          "collection": "community",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.media.lines",
+          "collection": "terminal",
+          "kind": "line",
+          "record": "CodeLine",
+          "map": "line",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.topics",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Topic",
+          "map": "prompt",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.nav.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "HeroSplit.content.people",
+          "collection": "testimonials",
+          "kind": "testimonial",
+          "record": "Quote",
+          "map": "testimonial",
+          "list": true
+        },
+        {
+          "prop": "HeroSplit.content.plans",
+          "collection": "tiers",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": true
+        },
+        {
+          "prop": "JobBoard.jobs",
+          "collection": "jobs",
+          "kind": "job",
+          "record": "Job",
+          "map": "job",
+          "list": true
+        },
+        {
+          "prop": "JobBoard.departments",
+          "collection": "departments",
+          "kind": "department",
+          "record": "Department",
+          "map": "department",
+          "list": true
+        },
+        {
+          "prop": "KanbanBoard.lanes",
+          "collection": "lanes",
+          "kind": "lane",
+          "record": "Lane",
+          "map": "lane",
+          "list": true
+        },
+        {
+          "prop": "KanbanBoard.cards",
+          "collection": "cards",
+          "kind": "card",
+          "record": "BoardCard",
+          "map": "card",
+          "list": true
+        },
+        {
+          "prop": "StoreLocations.stores",
+          "collection": "stores",
+          "kind": "store",
+          "record": "Store",
+          "map": "store",
+          "list": true
+        },
+        {
+          "prop": "MediaList.extras.steps",
+          "collection": "steps",
+          "kind": "step",
+          "record": "Step",
+          "map": "step",
+          "list": true
+        },
+        {
+          "prop": "MediaList.extras.posts",
+          "collection": "posts",
+          "kind": "post",
+          "record": "Post",
+          "map": "post",
+          "list": true
+        },
+        {
+          "prop": "MediaList.extras.reviews",
+          "collection": "reviews",
+          "kind": "review",
+          "record": "Review",
+          "map": "review",
+          "list": true
+        },
+        {
+          "prop": "MegaMenu.groups",
+          "collection": "megagroups",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "MetricRow.metrics",
+          "collection": "metrics",
+          "kind": "metric",
+          "record": "Stat",
+          "map": "metric",
+          "list": true
+        },
+        {
+          "prop": "OrderTable.orders",
+          "collection": "orders",
+          "kind": "order",
+          "record": "Order",
+          "map": "order",
+          "list": true
+        },
+        {
+          "prop": "PageTrail.crumbs",
+          "collection": "crumbs",
+          "kind": "page",
+          "record": "NavLink",
+          "map": "page",
+          "list": true
+        },
+        {
+          "prop": "PhotoGallery.photos",
+          "collection": "photos",
+          "kind": "photo",
+          "record": "Photo",
+          "map": "photo",
+          "list": true
+        },
+        {
+          "prop": "PostGrid.filter.topics",
+          "collection": "topics",
+          "kind": "topic",
+          "record": "PostTopic",
+          "map": "topic",
+          "list": true
+        },
+        {
+          "prop": "PostSplit.extras.tags",
+          "collection": "posttags",
+          "kind": "posttag",
+          "record": "NavLink",
+          "map": "posttag",
+          "list": true
+        },
+        {
+          "prop": "PostSplit.extras.outline",
+          "collection": "outline",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "PricingTiers.plans",
+          "collection": "duo",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": true
+        },
+        {
+          "prop": "ProductDetail.product",
+          "collection": "products",
+          "kind": "product",
+          "record": "Product",
+          "map": "product",
+          "list": false
+        },
+        {
+          "prop": "ProductInfo.details",
+          "collection": "details",
+          "kind": "detail",
+          "record": "Detail",
+          "map": "detail",
+          "list": true
+        },
+        {
+          "prop": "ProductInfo.specs",
+          "collection": "specs",
+          "kind": "spec",
+          "record": "Spec",
+          "map": "spec",
+          "list": true
+        },
+        {
+          "prop": "ProjectGrid.projects",
+          "collection": "projects",
+          "kind": "project",
+          "record": "Project",
+          "map": "project",
+          "list": true
+        },
+        {
+          "prop": "SkeletonLayout.lines",
+          "collection": "placeholders",
+          "kind": "placeholder",
+          "record": "Line",
+          "map": "placeholder",
+          "list": true
+        },
+        {
+          "prop": "StoreHero.perks",
+          "collection": "perks",
+          "kind": "perk",
+          "record": "Feature",
+          "map": "perk",
+          "list": true
+        },
+        {
+          "prop": "StoryTabs.steps",
+          "collection": "milestones",
+          "kind": "milestone",
+          "record": "Milestone",
+          "map": "milestone",
+          "list": true
+        },
+        {
+          "prop": "TeamGrid.members",
+          "collection": "members",
+          "kind": "member",
+          "record": "Member",
+          "map": "member",
+          "list": true
+        },
+        {
+          "prop": "TemplateGrid.templates",
+          "collection": "templates",
+          "kind": "template",
+          "record": "Template",
+          "map": "template",
+          "list": true
+        },
+        {
+          "prop": "TemplateGrid.filters",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Filter",
+          "map": "promptFilter",
+          "list": true
+        },
+        {
+          "prop": "VideoModal.chapters",
+          "collection": "chapters",
+          "kind": "chapter",
+          "record": "Chapter",
+          "map": "chapter",
+          "list": true
+        },
+        {
+          "prop": "SignupWizard.steps",
+          "collection": "wizard",
+          "kind": "step",
+          "record": "WizardStep",
+          "map": "wizardStep",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "frame"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "company.pages.companyTitle",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "company.pages.companyLead",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "commerce.pages.bestsellers",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "commerce.rail.title",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "commerce.pages.catalogTitle",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "commerce.pages.catalogLead",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "commerce.pages.related",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "commerce.cartPage.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "commerce.pages.cartLead",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "commerce.cart.caption",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "commerce.checkout.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "commerce.pages.checkoutLead",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.about",
+        "block.aboutme",
+        "block.accordion",
+        "block.activity",
+        "block.announcement",
+        "block.article",
+        "block.auth",
+        "block.authpage",
+        "block.beforeafter",
+        "block.bento",
+        "block.bottomnav",
+        "block.cart",
+        "block.cartdrawer",
+        "block.cartpage",
+        "block.categories",
+        "block.channels",
+        "block.chart",
+        "block.checklist",
+        "block.checkout",
+        "block.compare",
+        "block.contact",
+        "block.cookie",
+        "block.credits",
+        "block.cta",
+        "block.ctaproof",
+        "block.dashshell",
+        "block.delivery",
+        "block.empty",
+        "block.errorpage",
+        "block.faq",
+        "block.faqsplit",
+        "block.features",
+        "block.featureshowcase",
+        "block.featuresplit",
+        "block.featuretabs",
+        "block.footer",
+        "block.footersplit",
+        "block.header",
+        "block.hero",
+        "block.herosplit",
+        "block.iconwall",
+        "block.jobs",
+        "block.kanban",
+        "block.locations",
+        "block.logos",
+        "block.medialist",
+        "block.megamenu",
+        "block.metrics",
+        "block.navbar",
+        "block.newsletter",
+        "block.orders",
+        "block.overview",
+        "block.pagehead",
+        "block.pagetrail",
+        "block.photos",
+        "block.plan",
+        "block.postheader",
+        "block.posts",
+        "block.postshowcase",
+        "block.postsplit",
+        "block.pricing",
+        "block.product",
+        "block.productinfo",
+        "block.products",
+        "block.profile",
+        "block.projects",
+        "block.proof",
+        "block.quotesplit",
+        "block.reviews",
+        "block.shell",
+        "block.sidenav",
+        "block.sitemap",
+        "block.skeleton",
+        "block.slots",
+        "block.stats",
+        "block.stepper",
+        "block.steps",
+        "block.sticky",
+        "block.storehero",
+        "block.storytabs",
+        "block.summary",
+        "block.team",
+        "block.templates",
+        "block.testimonials",
+        "block.timeline",
+        "block.tour",
+        "block.usage",
+        "block.usp",
+        "block.videomodal",
+        "block.videos",
+        "block.wizard",
+        "block.zones"
+      ]
+    },
+    {
+      "id": "screen.plans",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/plans.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "source",
+          "collection": "plans",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "planRow",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "state"
+      ],
+      "labels": [
+        {
+          "prop": "label",
+          "dictionary": "plans.col.name",
+          "keys": []
+        },
+        {
+          "prop": "label",
+          "dictionary": "plans.col.price",
+          "keys": []
+        },
+        {
+          "prop": "label",
+          "dictionary": "plans.col.seats",
+          "keys": []
+        },
+        {
+          "prop": "label",
+          "dictionary": "plans.col.storage",
+          "keys": []
+        },
+        {
+          "prop": "label",
+          "dictionary": "plans.col.status",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "app.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "Placeholder",
+          "dictionary": "plans.search",
+          "keys": []
+        },
+        {
+          "prop": "args",
+          "dictionary": "plans.count",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "plans.caption",
+          "keys": []
+        },
+        {
+          "prop": "args",
+          "dictionary": "status",
+          "keys": [
+            "active",
+            "legacy",
+            "paid",
+            "pending",
+            "refunded",
+            "shipped"
+          ]
+        },
+        {
+          "prop": "text",
+          "dictionary": "plans.empty",
+          "keys": []
+        },
+        {
+          "prop": "args",
+          "dictionary": "pager.showing",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pager.previous",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pager.next",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "record.back",
+          "keys": []
+        },
+        {
+          "prop": "labels",
+          "dictionary": "pricing",
+          "keys": [
+            "cta",
+            "empty",
+            "free",
+            "perMonth",
+            "perYear",
+            "popular",
+            "seats",
+            "storage"
+          ]
+        },
+        {
+          "prop": "args",
+          "dictionary": "record.id",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "record.missing",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [],
+      "collections": [
+        "plans"
+      ]
+    },
+    {
+      "id": "screen.site",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/site.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "FaqList.items",
+          "collection": "faq",
+          "kind": "faq",
+          "record": "Faq",
+          "map": "faq",
+          "list": true
+        },
+        {
+          "prop": "FaqList.filter.tabs",
+          "collection": "faqtabs",
+          "kind": "tab",
+          "record": "FaqTab",
+          "map": "faqtab",
+          "list": true
+        },
+        {
+          "prop": "FeatureGrid.features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.media.lines",
+          "collection": "terminal",
+          "kind": "line",
+          "record": "CodeLine",
+          "map": "line",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.topics",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Topic",
+          "map": "prompt",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.nav.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "PricingTiers.plans",
+          "collection": "tiers",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": true
+        },
+        {
+          "prop": "PricingTiers.plans",
+          "collection": "duo",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "frame"
+      ],
+      "labels": [
+        {
+          "prop": "title",
+          "dictionary": "site.pricing.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "site.pricing.text",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "site.notFound.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "site.notFound.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "site.notFound.back",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.cta",
+        "block.faq",
+        "block.features",
+        "block.footer",
+        "block.header",
+        "block.hero",
+        "block.pricing"
+      ]
+    },
+    {
+      "id": "screen.skins",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/skins.json",
+      "status": "done",
+      "data": [],
+      "settings": [
+        "routes",
+        "frame"
+      ],
+      "labels": [],
+      "emptyState": true,
+      "uses": []
+    },
+    {
+      "id": "screen.theme-account-portal",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-account-portal.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "NavBar.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "SitemapFooter.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "SignupWizard.steps",
+          "collection": "wizard",
+          "kind": "step",
+          "record": "WizardStep",
+          "map": "wizardStep",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.home.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "pages.accountPortal.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.start.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.start.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "pages.accountPortal.start.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.signup.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.signup.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "pages.accountPortal.signup.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.welcome.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.welcome.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "pages.accountPortal.welcome.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.reset.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.reset.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "pages.accountPortal.reset.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.magic.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.magic.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "pages.accountPortal.magic.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.minimal.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.minimal.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "pages.accountPortal.minimal.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.options.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.options.text",
+          "keys": []
+        },
+        {
+          "prop": "submit",
+          "dictionary": "pages.accountPortal.options.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.join.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.join.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.accountPortal.join.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.cards.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.cards.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.accountPortal.cards.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.accountPortal.profile.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.accountPortal.profile.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.accountPortal.profile.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.start.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.signup.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.welcome.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.reset.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.magic.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.minimal.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.options.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.join.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.cards.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.accountPortal.profile.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.auth",
+        "block.authpage",
+        "block.navbar",
+        "block.pagehead",
+        "block.profile",
+        "block.sitemap",
+        "block.wizard"
+      ]
+    },
+    {
+      "id": "screen.theme-commerce-shop",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-commerce-shop.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "CartList.lines",
+          "collection": "cart",
+          "kind": "cartline",
+          "record": "CartLine",
+          "map": "cartline",
+          "list": true
+        },
+        {
+          "prop": "CartDrawer.rows",
+          "collection": "summary",
+          "kind": "summaryrow",
+          "record": "SummaryRow",
+          "map": "summaryrow",
+          "list": true
+        },
+        {
+          "prop": "ShoppingCart.promos",
+          "collection": "promos",
+          "kind": "promo",
+          "record": "Promo",
+          "map": "promo",
+          "list": true
+        },
+        {
+          "prop": "CategoryNav.categories",
+          "collection": "categories",
+          "kind": "menu_item",
+          "record": "Category",
+          "map": "menuCategory",
+          "list": true
+        },
+        {
+          "prop": "CheckoutForm.days",
+          "collection": "days",
+          "kind": "day",
+          "record": "Day",
+          "map": "day",
+          "list": true
+        },
+        {
+          "prop": "CheckoutForm.payments",
+          "collection": "payments",
+          "kind": "payment",
+          "record": "Payment",
+          "map": "payment",
+          "list": true
+        },
+        {
+          "prop": "DeliveryInfo.facts",
+          "collection": "deliveryfacts",
+          "kind": "fact",
+          "record": "Feature",
+          "map": "fact",
+          "list": true
+        },
+        {
+          "prop": "DeliveryInfo.zones",
+          "collection": "zones",
+          "kind": "zone",
+          "record": "Zone",
+          "map": "zone",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.media.lines",
+          "collection": "terminal",
+          "kind": "line",
+          "record": "CodeLine",
+          "map": "line",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.topics",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Topic",
+          "map": "prompt",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.nav.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "StoreLocations.stores",
+          "collection": "stores",
+          "kind": "store",
+          "record": "Store",
+          "map": "store",
+          "list": true
+        },
+        {
+          "prop": "OrderTable.orders",
+          "collection": "orders",
+          "kind": "order",
+          "record": "Order",
+          "map": "order",
+          "list": true
+        },
+        {
+          "prop": "PageTrail.crumbs",
+          "collection": "crumbs",
+          "kind": "page",
+          "record": "NavLink",
+          "map": "page",
+          "list": true
+        },
+        {
+          "prop": "PageTrail.extras.facts",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true
+        },
+        {
+          "prop": "ProductDetail.product",
+          "collection": "products",
+          "kind": "product",
+          "record": "Product",
+          "map": "product",
+          "list": false
+        },
+        {
+          "prop": "ProductInfo.details",
+          "collection": "details",
+          "kind": "detail",
+          "record": "Detail",
+          "map": "detail",
+          "list": true
+        },
+        {
+          "prop": "ProductInfo.specs",
+          "collection": "specs",
+          "kind": "spec",
+          "record": "Spec",
+          "map": "spec",
+          "list": true
+        },
+        {
+          "prop": "ReviewList.reviews",
+          "collection": "reviews",
+          "kind": "review",
+          "record": "Review",
+          "map": "review",
+          "list": true
+        },
+        {
+          "prop": "SitemapFooter.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "StoreHero.perks",
+          "collection": "perks",
+          "kind": "perk",
+          "record": "Feature",
+          "map": "perk",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.commerceShop.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.commerceShop.home.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.commerceShop.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.commerceShop.browse.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.commerceShop.browse.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.commerceShop.browse.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.commerceShop.cart.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.commerceShop.cart.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.commerceShop.cart.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.commerceShop.checkout.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.commerceShop.checkout.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.commerceShop.checkout.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.commerceShop.delivery.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.commerceShop.delivery.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.commerceShop.delivery.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.commerceShop.orders.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.commerceShop.orders.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.commerceShop.orders.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.commerceShop.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.commerceShop.catalog.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.commerceShop.browse.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.commerceShop.offers.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.commerceShop.product.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.commerceShop.cart.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.commerceShop.checkout.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.commerceShop.delivery.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.commerceShop.orders.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.cart",
+        "block.cartdrawer",
+        "block.cartpage",
+        "block.categories",
+        "block.checkout",
+        "block.cta",
+        "block.delivery",
+        "block.hero",
+        "block.locations",
+        "block.navbar",
+        "block.newsletter",
+        "block.orders",
+        "block.pagehead",
+        "block.pagetrail",
+        "block.product",
+        "block.productinfo",
+        "block.products",
+        "block.reviews",
+        "block.sitemap",
+        "block.slots",
+        "block.storehero",
+        "block.summary",
+        "block.usp",
+        "block.zones"
+      ]
+    },
+    {
+      "id": "screen.theme-content-blog",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-content-blog.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "ArticleBody.sections",
+          "collection": "article",
+          "kind": "section",
+          "record": "Section",
+          "map": "section",
+          "list": true
+        },
+        {
+          "prop": "NavBar.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "PostHeader.post",
+          "collection": "posts",
+          "kind": "post",
+          "record": "Post",
+          "map": "post",
+          "list": false
+        },
+        {
+          "prop": "PostGrid.filter.topics",
+          "collection": "topics",
+          "kind": "topic",
+          "record": "PostTopic",
+          "map": "topic",
+          "list": true
+        },
+        {
+          "prop": "PostSplit.extras.tags",
+          "collection": "posttags",
+          "kind": "posttag",
+          "record": "NavLink",
+          "map": "posttag",
+          "list": true
+        },
+        {
+          "prop": "PostSplit.extras.outline",
+          "collection": "outline",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "SitemapFooter.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.contentBlog.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.contentBlog.home.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.contentBlog.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.contentBlog.articles.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.contentBlog.articles.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.contentBlog.articles.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.contentBlog.archive.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.contentBlog.archive.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.contentBlog.archive.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.contentBlog.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.contentBlog.articles.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.contentBlog.archive.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.contentBlog.post.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.contentBlog.story.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.contentBlog.essay.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.contentBlog.plain.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.article",
+        "block.navbar",
+        "block.newsletter",
+        "block.pagehead",
+        "block.postheader",
+        "block.posts",
+        "block.postshowcase",
+        "block.postsplit",
+        "block.sitemap"
+      ]
+    },
+    {
+      "id": "screen.theme-dashboard-console",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-dashboard-console.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "ActivityFeed.events",
+          "collection": "activity",
+          "kind": "event",
+          "record": "Event",
+          "map": "event",
+          "list": true
+        },
+        {
+          "prop": "BottomNav.tabs",
+          "collection": "tabs",
+          "kind": "tab",
+          "record": "NavLink",
+          "map": "tab",
+          "list": true
+        },
+        {
+          "prop": "ChartPanel.series",
+          "collection": "series",
+          "kind": "point",
+          "record": "Point",
+          "map": "point",
+          "list": true
+        },
+        {
+          "prop": "DashboardShell.nav.links",
+          "collection": "sidenav",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "DashboardShell.nav.sub",
+          "collection": "subnav",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "DashboardShell.nav.footer",
+          "collection": "helplinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "KanbanBoard.lanes",
+          "collection": "lanes",
+          "kind": "lane",
+          "record": "Lane",
+          "map": "lane",
+          "list": true
+        },
+        {
+          "prop": "KanbanBoard.cards",
+          "collection": "cards",
+          "kind": "card",
+          "record": "BoardCard",
+          "map": "card",
+          "list": true
+        },
+        {
+          "prop": "MetricRow.metrics",
+          "collection": "metrics",
+          "kind": "metric",
+          "record": "Stat",
+          "map": "metric",
+          "list": true
+        },
+        {
+          "prop": "NavBar.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "SitemapFooter.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "SkeletonLayout.lines",
+          "collection": "placeholders",
+          "kind": "placeholder",
+          "record": "Line",
+          "map": "placeholder",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.dashboardConsole.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.dashboardConsole.home.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.dashboardConsole.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.dashboardConsole.board.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.dashboardConsole.board.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.dashboardConsole.board.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.dashboardConsole.workspace.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.dashboardConsole.workspace.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.dashboardConsole.workspace.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.dashboardConsole.shells.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.dashboardConsole.shells.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.dashboardConsole.shells.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.dashboardConsole.layouts.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.dashboardConsole.layouts.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.dashboardConsole.layouts.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.dashboardConsole.states.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.dashboardConsole.states.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.dashboardConsole.states.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.dashboardConsole.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.dashboardConsole.board.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.dashboardConsole.workspace.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.dashboardConsole.shells.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.dashboardConsole.layouts.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.dashboardConsole.states.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.activity",
+        "block.bottomnav",
+        "block.chart",
+        "block.dashshell",
+        "block.empty",
+        "block.kanban",
+        "block.metrics",
+        "block.navbar",
+        "block.overview",
+        "block.pagehead",
+        "block.shell",
+        "block.sidenav",
+        "block.sitemap",
+        "block.skeleton"
+      ]
+    },
+    {
+      "id": "screen.theme-marketing-landing",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-marketing-landing.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "AboutCompany.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true
+        },
+        {
+          "prop": "AboutCompany.values",
+          "collection": "values",
+          "kind": "value",
+          "record": "Feature",
+          "map": "value",
+          "list": true
+        },
+        {
+          "prop": "AboutMe.facts",
+          "collection": "profilefacts",
+          "kind": "profilefact",
+          "record": "Spec",
+          "map": "profilefact",
+          "list": true
+        },
+        {
+          "prop": "AboutMe.skills",
+          "collection": "skills",
+          "kind": "skill",
+          "record": "Skill",
+          "map": "skill",
+          "list": true
+        },
+        {
+          "prop": "BentoGrid.tiles",
+          "collection": "bento",
+          "kind": "tile",
+          "record": "Tile",
+          "map": "tile",
+          "list": true
+        },
+        {
+          "prop": "CtaProof.content.logos",
+          "collection": "logos",
+          "kind": "logo",
+          "record": "Logo",
+          "map": "logo",
+          "list": true
+        },
+        {
+          "prop": "CtaProof.content.features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true
+        },
+        {
+          "prop": "CtaProof.content.zones",
+          "collection": "zones",
+          "kind": "zone",
+          "record": "Zone",
+          "map": "zone",
+          "list": true
+        },
+        {
+          "prop": "FaqList.items",
+          "collection": "faq",
+          "kind": "faq",
+          "record": "Faq",
+          "map": "faq",
+          "list": true
+        },
+        {
+          "prop": "FaqList.filter.tabs",
+          "collection": "faqtabs",
+          "kind": "tab",
+          "record": "FaqTab",
+          "map": "faqtab",
+          "list": true
+        },
+        {
+          "prop": "FaqSplit.items",
+          "collection": "questions",
+          "kind": "question",
+          "record": "Question",
+          "map": "question",
+          "list": true
+        },
+        {
+          "prop": "FaqSplit.channels",
+          "collection": "channels",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.media.lines",
+          "collection": "terminal",
+          "kind": "line",
+          "record": "CodeLine",
+          "map": "line",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.topics",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Topic",
+          "map": "prompt",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.nav.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "HeroSplit.content.people",
+          "collection": "testimonials",
+          "kind": "testimonial",
+          "record": "Quote",
+          "map": "testimonial",
+          "list": true
+        },
+        {
+          "prop": "HeroSplit.content.plans",
+          "collection": "tiers",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": true
+        },
+        {
+          "prop": "JobBoard.jobs",
+          "collection": "jobs",
+          "kind": "job",
+          "record": "Job",
+          "map": "job",
+          "list": true
+        },
+        {
+          "prop": "JobBoard.departments",
+          "collection": "departments",
+          "kind": "department",
+          "record": "Department",
+          "map": "department",
+          "list": true
+        },
+        {
+          "prop": "PhotoGallery.photos",
+          "collection": "photos",
+          "kind": "photo",
+          "record": "Photo",
+          "map": "photo",
+          "list": true
+        },
+        {
+          "prop": "ProjectGrid.projects",
+          "collection": "projects",
+          "kind": "project",
+          "record": "Project",
+          "map": "project",
+          "list": true
+        },
+        {
+          "prop": "SitemapFooter.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "StepsList.steps",
+          "collection": "steps",
+          "kind": "step",
+          "record": "Step",
+          "map": "step",
+          "list": true
+        },
+        {
+          "prop": "StoryTabs.steps",
+          "collection": "milestones",
+          "kind": "milestone",
+          "record": "Milestone",
+          "map": "milestone",
+          "list": true
+        },
+        {
+          "prop": "TeamGrid.members",
+          "collection": "members",
+          "kind": "member",
+          "record": "Member",
+          "map": "member",
+          "list": true
+        },
+        {
+          "prop": "TemplateGrid.templates",
+          "collection": "templates",
+          "kind": "template",
+          "record": "Template",
+          "map": "template",
+          "list": true
+        },
+        {
+          "prop": "TemplateGrid.filters",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Filter",
+          "map": "promptFilter",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingLanding.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingLanding.home.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingLanding.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingLanding.launch.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingLanding.launch.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingLanding.launch.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingLanding.developers.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingLanding.developers.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingLanding.developers.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingLanding.studio.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingLanding.studio.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingLanding.studio.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingLanding.events.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingLanding.events.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingLanding.events.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingLanding.company.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingLanding.company.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingLanding.company.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingLanding.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingLanding.launch.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingLanding.developers.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingLanding.studio.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingLanding.events.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingLanding.company.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingLanding.work.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingLanding.teams.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.about",
+        "block.aboutme",
+        "block.bento",
+        "block.cta",
+        "block.ctaproof",
+        "block.faq",
+        "block.faqsplit",
+        "block.features",
+        "block.hero",
+        "block.herosplit",
+        "block.iconwall",
+        "block.jobs",
+        "block.logos",
+        "block.navbar",
+        "block.pagehead",
+        "block.photos",
+        "block.projects",
+        "block.proof",
+        "block.quotesplit",
+        "block.sitemap",
+        "block.stats",
+        "block.steps",
+        "block.storytabs",
+        "block.team",
+        "block.templates",
+        "block.testimonials",
+        "block.timeline",
+        "block.videos"
+      ]
+    },
+    {
+      "id": "screen.theme-marketing-pricing",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-marketing-pricing.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "ComparisonTable.rows",
+          "collection": "compare",
+          "kind": "row",
+          "record": "CompareRow",
+          "map": "row",
+          "list": true
+        },
+        {
+          "prop": "ComparisonTable.rows",
+          "collection": "rivals",
+          "kind": "row",
+          "record": "CompareRow",
+          "map": "row",
+          "list": true
+        },
+        {
+          "prop": "CreditPacks.packs",
+          "collection": "credits",
+          "kind": "pack",
+          "record": "Pack",
+          "map": "pack",
+          "list": true
+        },
+        {
+          "prop": "FaqList.items",
+          "collection": "faq",
+          "kind": "faq",
+          "record": "Faq",
+          "map": "faq",
+          "list": true
+        },
+        {
+          "prop": "FaqList.filter.tabs",
+          "collection": "faqtabs",
+          "kind": "tab",
+          "record": "FaqTab",
+          "map": "faqtab",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.media.lines",
+          "collection": "terminal",
+          "kind": "line",
+          "record": "CodeLine",
+          "map": "line",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.topics",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Topic",
+          "map": "prompt",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.nav.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "LogoCloud.logos",
+          "collection": "logos",
+          "kind": "logo",
+          "record": "Logo",
+          "map": "logo",
+          "list": true
+        },
+        {
+          "prop": "PricingCard.plan",
+          "collection": "tiers",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": false
+        },
+        {
+          "prop": "PricingTiers.plans",
+          "collection": "duo",
+          "kind": "plan",
+          "record": "Plan",
+          "map": "plan",
+          "list": true
+        },
+        {
+          "prop": "SitemapFooter.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "TestimonialGrid.quotes",
+          "collection": "testimonials",
+          "kind": "testimonial",
+          "record": "Quote",
+          "map": "testimonial",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingPricing.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingPricing.home.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingPricing.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingPricing.plans.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingPricing.plans.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingPricing.plans.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingPricing.usage.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingPricing.usage.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingPricing.usage.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingPricing.compare.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingPricing.compare.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingPricing.compare.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingPricing.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingPricing.plans.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingPricing.usage.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingPricing.compare.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.compare",
+        "block.credits",
+        "block.cta",
+        "block.faq",
+        "block.hero",
+        "block.logos",
+        "block.navbar",
+        "block.pagehead",
+        "block.plan",
+        "block.pricing",
+        "block.sitemap",
+        "block.testimonials",
+        "block.usage"
+      ]
+    },
+    {
+      "id": "screen.theme-marketing-product",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-marketing-product.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "FeatureAccordion.features",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true
+        },
+        {
+          "prop": "BeforeAfter.points",
+          "collection": "beforeafter",
+          "kind": "point",
+          "record": "Contrast",
+          "map": "contrast",
+          "list": true
+        },
+        {
+          "prop": "BentoGrid.tiles",
+          "collection": "bento",
+          "kind": "tile",
+          "record": "Tile",
+          "map": "tile",
+          "list": true
+        },
+        {
+          "prop": "FeatureShowcase.features",
+          "collection": "values",
+          "kind": "value",
+          "record": "Feature",
+          "map": "value",
+          "list": true
+        },
+        {
+          "prop": "FeatureSplit.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.media.lines",
+          "collection": "terminal",
+          "kind": "line",
+          "record": "CodeLine",
+          "map": "line",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.topics",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Topic",
+          "map": "prompt",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.nav.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "MegaMenu.groups",
+          "collection": "megagroups",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "SitemapFooter.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "StepsList.steps",
+          "collection": "steps",
+          "kind": "step",
+          "record": "Step",
+          "map": "step",
+          "list": true
+        },
+        {
+          "prop": "VideoGrid.quotes",
+          "collection": "testimonials",
+          "kind": "testimonial",
+          "record": "Quote",
+          "map": "testimonial",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingProduct.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingProduct.home.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingProduct.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingProduct.tour.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingProduct.tour.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingProduct.tour.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingProduct.capabilities.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingProduct.capabilities.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingProduct.capabilities.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.marketingProduct.navigation.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.marketingProduct.navigation.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.marketingProduct.navigation.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingProduct.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingProduct.tour.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingProduct.capabilities.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.marketingProduct.navigation.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.accordion",
+        "block.beforeafter",
+        "block.bento",
+        "block.cta",
+        "block.features",
+        "block.featureshowcase",
+        "block.featuresplit",
+        "block.featuretabs",
+        "block.footer",
+        "block.header",
+        "block.hero",
+        "block.iconwall",
+        "block.megamenu",
+        "block.navbar",
+        "block.pagehead",
+        "block.sitemap",
+        "block.steps",
+        "block.sticky",
+        "block.videos"
+      ]
+    },
+    {
+      "id": "screen.theme-onboarding-flow",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-onboarding-flow.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "Checklist.tasks",
+          "collection": "checklist",
+          "kind": "task",
+          "record": "Task",
+          "map": "task",
+          "list": true
+        },
+        {
+          "prop": "NavBar.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "SitemapFooter.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "Stepper.steps",
+          "collection": "steps",
+          "kind": "step",
+          "record": "Step",
+          "map": "step",
+          "list": true
+        },
+        {
+          "prop": "VideoModal.chapters",
+          "collection": "chapters",
+          "kind": "chapter",
+          "record": "Chapter",
+          "map": "chapter",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.onboardingFlow.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.onboardingFlow.home.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.onboardingFlow.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.onboardingFlow.welcome.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.onboardingFlow.welcome.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.onboardingFlow.welcome.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.onboardingFlow.setup.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.onboardingFlow.setup.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.onboardingFlow.setup.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.onboardingFlow.tour.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.onboardingFlow.tour.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.onboardingFlow.tour.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.onboardingFlow.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.onboardingFlow.welcome.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.onboardingFlow.setup.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.onboardingFlow.tour.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.checklist",
+        "block.empty",
+        "block.navbar",
+        "block.pagehead",
+        "block.sitemap",
+        "block.stepper",
+        "block.tour",
+        "block.videomodal"
+      ]
+    },
+    {
+      "id": "screen.theme-promo-campaign",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-promo-campaign.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "FooterSplit.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        },
+        {
+          "prop": "FooterSplit.extras.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true
+        },
+        {
+          "prop": "FooterSplit.extras.points",
+          "collection": "features",
+          "kind": "feature",
+          "record": "Feature",
+          "map": "feature",
+          "list": true
+        },
+        {
+          "prop": "FooterSplit.extras.contacts",
+          "collection": "contacts",
+          "kind": "contact",
+          "record": "Feature",
+          "map": "contact",
+          "list": true
+        },
+        {
+          "prop": "FooterSplit.extras.channels",
+          "collection": "community",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.media.lines",
+          "collection": "terminal",
+          "kind": "line",
+          "record": "CodeLine",
+          "map": "line",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.topics",
+          "collection": "prompts",
+          "kind": "prompt",
+          "record": "Topic",
+          "map": "prompt",
+          "list": true
+        },
+        {
+          "prop": "HeroClassic.nav.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "LogoCloud.logos",
+          "collection": "logos",
+          "kind": "logo",
+          "record": "Logo",
+          "map": "logo",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.promoCampaign.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.promoCampaign.home.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.promoCampaign.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.promoCampaign.launch.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.promoCampaign.launch.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.promoCampaign.launch.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.promoCampaign.offer.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.promoCampaign.offer.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.promoCampaign.offer.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.promoCampaign.notices.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.promoCampaign.notices.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.promoCampaign.notices.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.promoCampaign.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.promoCampaign.launch.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.promoCampaign.offer.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.promoCampaign.notices.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.announcement",
+        "block.cookie",
+        "block.cta",
+        "block.footersplit",
+        "block.hero",
+        "block.logos",
+        "block.navbar",
+        "block.newsletter",
+        "block.pagehead"
+      ]
+    },
+    {
+      "id": "screen.theme-support-center",
+      "surface": "xgen-screen",
+      "source": "xgen/specs/screens/theme-support-center.json",
+      "status": "done",
+      "data": [
+        {
+          "prop": "SupportChannels.channels",
+          "collection": "channels",
+          "kind": "channel",
+          "record": "Feature",
+          "map": "channel",
+          "list": true
+        },
+        {
+          "prop": "FaqList.items",
+          "collection": "faq",
+          "kind": "faq",
+          "record": "Faq",
+          "map": "faq",
+          "list": true
+        },
+        {
+          "prop": "FaqList.filter.tabs",
+          "collection": "faqtabs",
+          "kind": "tab",
+          "record": "FaqTab",
+          "map": "faqtab",
+          "list": true
+        },
+        {
+          "prop": "MediaList.extras.stats",
+          "collection": "stats",
+          "kind": "stat",
+          "record": "Stat",
+          "map": "stat",
+          "list": true
+        },
+        {
+          "prop": "MediaList.extras.steps",
+          "collection": "steps",
+          "kind": "step",
+          "record": "Step",
+          "map": "step",
+          "list": true
+        },
+        {
+          "prop": "MediaList.extras.posts",
+          "collection": "posts",
+          "kind": "post",
+          "record": "Post",
+          "map": "post",
+          "list": true
+        },
+        {
+          "prop": "MediaList.extras.topics",
+          "collection": "categories",
+          "kind": "menu_item",
+          "record": "Category",
+          "map": "menuCategory",
+          "list": true
+        },
+        {
+          "prop": "MediaList.extras.reviews",
+          "collection": "reviews",
+          "kind": "review",
+          "record": "Review",
+          "map": "review",
+          "list": true
+        },
+        {
+          "prop": "NavBar.links",
+          "collection": "navlinks",
+          "kind": "menu_item",
+          "record": "NavLink",
+          "map": "menuItem",
+          "list": true
+        },
+        {
+          "prop": "SitemapFooter.groups",
+          "collection": "sitemap",
+          "kind": "menu_item",
+          "record": "MegaGroup",
+          "map": "menuGroup",
+          "list": true
+        }
+      ],
+      "settings": [
+        "routes",
+        "nav",
+        "menu",
+        "frame",
+        "chunks",
+        "requireH1",
+        "nameLandmarks"
+      ],
+      "labels": [
+        {
+          "prop": "skip",
+          "dictionary": "site.header.skip",
+          "keys": []
+        },
+        {
+          "prop": "themeLabel",
+          "dictionary": "theme.toggle",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.supportCenter.home.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.supportCenter.home.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.supportCenter.home.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.supportCenter.faq.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.supportCenter.faq.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.supportCenter.faq.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.supportCenter.contact.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.supportCenter.contact.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.supportCenter.contact.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.supportCenter.missing.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.supportCenter.missing.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.supportCenter.missing.cta",
+          "keys": []
+        },
+        {
+          "prop": "title",
+          "dictionary": "pages.supportCenter.moved.title",
+          "keys": []
+        },
+        {
+          "prop": "text",
+          "dictionary": "pages.supportCenter.moved.text",
+          "keys": []
+        },
+        {
+          "prop": "cta",
+          "dictionary": "pages.supportCenter.moved.cta",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.supportCenter.home.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.supportCenter.faq.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.supportCenter.contact.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.supportCenter.missing.nav",
+          "keys": []
+        },
+        {
+          "prop": "titleKey",
+          "dictionary": "pages.supportCenter.moved.nav",
+          "keys": []
+        }
+      ],
+      "emptyState": true,
+      "uses": [
+        "block.channels",
+        "block.contact",
+        "block.errorpage",
+        "block.faq",
+        "block.medialist",
+        "block.navbar",
+        "block.pagehead",
+        "block.sitemap"
+      ]
+    }
+  ]
+}
diff --git a/xgen/schema/codex/blocks.schema.json b/xgen/schema/codex/blocks.schema.json
new file mode 100644
index 0000000..1846dd2
--- /dev/null
+++ b/xgen/schema/codex/blocks.schema.json
@@ -0,0 +1,217 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://ui8kit.dev/xgen/codex/blocks.schema.json",
+  "title": "Block data manifest",
+  "description": "Which Codex v0.4 entry kinds every block, screen and template reads, by which field map, with which entry fields, settings and dictionary labels. Kinds and metadata fields are those of manifest.json; status done = checked by xgen/schema/test/blocks.test.ts.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "version",
+    "contract",
+    "fieldMaps",
+    "blocks"
+  ],
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "version": {
+      "type": "string",
+      "pattern": "^\\d+\\.\\d+\\.\\d+$"
+    },
+    "contract": {
+      "type": "string"
+    },
+    "fieldMaps": {
+      "type": "string",
+      "description": "the module of the central field maps (CODEX_FIELDS)"
+    },
+    "blocks": {
+      "type": "array",
+      "items": {
+        "$ref": "#/$defs/block"
+      }
+    }
+  },
+  "$defs": {
+    "path": {
+      "type": "string",
+      "pattern": "^[a-z_][A-Za-z0-9_]*(\\.[A-Za-z0-9_]+)*$",
+      "description": "an entry field: a core field (title, excerpt) or metadata.<field>.value"
+    },
+    "binding": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "prop",
+        "kind"
+      ],
+      "properties": {
+        "prop": {
+          "type": "string",
+          "description": "the block prop that carries the records"
+        },
+        "collection": {
+          "type": "string",
+          "description": "the fixture collection (xgen/fixtures/<collection>.json)"
+        },
+        "kind": {
+          "type": "string",
+          "description": "the entry kind (a resource of manifest.json)"
+        },
+        "record": {
+          "type": "string",
+          "description": "the record type of the kit (Product, Post, Plan)"
+        },
+        "map": {
+          "type": "string",
+          "description": "the key of CODEX_FIELDS that maps the entry to the record"
+        },
+        "list": {
+          "type": "boolean",
+          "description": "a list of records (true) or one record (false)"
+        },
+        "required": {
+          "type": "array",
+          "items": {
+            "$ref": "#/$defs/path"
+          },
+          "uniqueItems": true
+        },
+        "optional": {
+          "type": "array",
+          "items": {
+            "$ref": "#/$defs/path"
+          },
+          "uniqueItems": true
+        }
+      }
+    },
+    "labels": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "prop",
+        "dictionary",
+        "keys"
+      ],
+      "properties": {
+        "prop": {
+          "type": "string"
+        },
+        "dictionary": {
+          "type": "string",
+          "description": "dotted path in the dictionary of the locale (xgen/content/ui/<locale>.json)"
+        },
+        "keys": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "description": "the keys read (empty: the path is one string)"
+        }
+      }
+    },
+    "block": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "id",
+        "surface",
+        "source",
+        "status"
+      ],
+      "properties": {
+        "id": {
+          "type": "string"
+        },
+        "surface": {
+          "enum": [
+            "kit-block",
+            "kit-organism",
+            "kit-component",
+            "xgen-screen",
+            "magazine-template",
+            "magazine-part",
+            "taste-screen"
+          ]
+        },
+        "spec": {
+          "type": "string",
+          "description": "the xgen spec id"
+        },
+        "source": {
+          "type": "string",
+          "description": "the file a person edits"
+        },
+        "status": {
+          "enum": [
+            "todo",
+            "done"
+          ]
+        },
+        "data": {
+          "type": "array",
+          "items": {
+            "$ref": "#/$defs/binding"
+          }
+        },
+        "settings": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "description": "props that are not data or labels"
+        },
+        "labels": {
+          "type": "array",
+          "items": {
+            "$ref": "#/$defs/labels"
+          }
+        },
+        "emptyState": {
+          "type": "boolean",
+          "description": "renders an empty state when it has no records"
+        },
+        "uses": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "description": "blocks a screen or template composes"
+        },
+        "collections": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "note": {
+          "type": "string"
+        },
+        "emptyMode": {
+          "enum": [
+            "label",
+            "omit"
+          ],
+          "description": "label (default): an EmptyState with the dictionary text (labels key or prop `empty`); omit: the empty part is left out (a page head without breadcrumbs)"
+        }
+      },
+      "if": {
+        "properties": {
+          "status": {
+            "const": "done"
+          }
+        }
+      },
+      "then": {
+        "required": [
+          "data",
+          "settings",
+          "labels",
+          "emptyState"
+        ]
+      }
+    }
+  }
+}
diff --git a/xgen/schema/codex/manifest.json b/xgen/schema/codex/manifest.json
new file mode 100644
index 0000000..973f6ee
--- /dev/null
+++ b/xgen/schema/codex/manifest.json
@@ -0,0 +1,1998 @@
+{
+  "name": "ui8kit-fixtures",
+  "version": "0.4.0",
+  "resources": [
+    {
+      "record": {
+        "id": "card",
+        "label": "Card",
+        "scope": "workspace",
+        "description": "fixtures: cards",
+        "fields": [
+          {
+            "id": "lane",
+            "label": "Lane",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "tag",
+            "label": "Tag",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "who",
+            "label": "Who",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "cartline",
+        "label": "Cartline",
+        "scope": "workspace",
+        "description": "fixtures: cart",
+        "fields": [
+          {
+            "id": "currency",
+            "label": "Currency",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "price",
+            "label": "Price",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "qty",
+            "label": "Qty",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "variant",
+            "label": "Variant",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "channel",
+        "label": "Channel",
+        "scope": "workspace",
+        "description": "fixtures: channels, community",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "chapter",
+        "label": "Chapter",
+        "scope": "workspace",
+        "description": "fixtures: chapters",
+        "fields": [
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "contact",
+        "label": "Contact",
+        "scope": "workspace",
+        "description": "fixtures: contacts",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "day",
+        "label": "Day",
+        "scope": "workspace",
+        "description": "fixtures: days",
+        "fields": [
+          {
+            "id": "closed",
+            "label": "Closed",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          },
+          {
+            "id": "note",
+            "label": "Note",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "slots",
+            "label": "Slots",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "deck",
+        "label": "Deck",
+        "scope": "workspace",
+        "description": "fixtures: decks",
+        "fields": [
+          {
+            "id": "accent",
+            "label": "Accent",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "cta",
+            "label": "Cta",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "eyebrow",
+            "label": "Eyebrow",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "headline",
+            "label": "Headline",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "input",
+            "label": "Input",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "lead",
+            "label": "Lead",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "nav",
+            "label": "Nav",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          },
+          {
+            "id": "note",
+            "label": "Note",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "secondary",
+            "label": "Secondary",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "tags",
+            "label": "Tags",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "deck_faq",
+        "label": "Deck faq",
+        "scope": "workspace",
+        "description": "fixtures: deckfaq",
+        "fields": [
+          {
+            "id": "answer",
+            "label": "Answer",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "deck",
+            "label": "Deck",
+            "type": "relation",
+            "required": true
+          },
+          {
+            "id": "position",
+            "label": "Position",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          }
+        ],
+        "relations": [
+          {
+            "id": "deck",
+            "source": "deck_faq",
+            "target": "deck",
+            "cardinality": "one-to-one"
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "deck_item",
+        "label": "Deck item",
+        "scope": "workspace",
+        "description": "fixtures: deckitems",
+        "fields": [
+          {
+            "id": "deck",
+            "label": "Deck",
+            "type": "relation",
+            "required": true
+          },
+          {
+            "id": "position",
+            "label": "Position",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "relations": [
+          {
+            "id": "deck",
+            "source": "deck_item",
+            "target": "deck",
+            "cardinality": "one-to-one"
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "deck_plan",
+        "label": "Deck plan",
+        "scope": "workspace",
+        "description": "fixtures: deckplans",
+        "fields": [
+          {
+            "id": "cost",
+            "label": "Cost",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "deck",
+            "label": "Deck",
+            "type": "relation",
+            "required": true
+          },
+          {
+            "id": "note",
+            "label": "Note",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "perks",
+            "label": "Perks",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          },
+          {
+            "id": "position",
+            "label": "Position",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          }
+        ],
+        "relations": [
+          {
+            "id": "deck",
+            "source": "deck_plan",
+            "target": "deck",
+            "cardinality": "one-to-one"
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "deck_quote",
+        "label": "Deck quote",
+        "scope": "workspace",
+        "description": "fixtures: deckquotes",
+        "fields": [
+          {
+            "id": "deck",
+            "label": "Deck",
+            "type": "relation",
+            "required": true
+          },
+          {
+            "id": "position",
+            "label": "Position",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "quote",
+            "label": "Quote",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "role",
+            "label": "Role",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "relations": [
+          {
+            "id": "deck",
+            "source": "deck_quote",
+            "target": "deck",
+            "cardinality": "one-to-one"
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "deck_stat",
+        "label": "Deck stat",
+        "scope": "workspace",
+        "description": "fixtures: deckstats",
+        "fields": [
+          {
+            "id": "deck",
+            "label": "Deck",
+            "type": "relation",
+            "required": true
+          },
+          {
+            "id": "position",
+            "label": "Position",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "value",
+            "label": "Value",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "relations": [
+          {
+            "id": "deck",
+            "source": "deck_stat",
+            "target": "deck",
+            "cardinality": "one-to-one"
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "department",
+        "label": "Department",
+        "scope": "workspace",
+        "description": "fixtures: departments",
+        "fields": []
+      }
+    },
+    {
+      "record": {
+        "id": "detail",
+        "label": "Detail",
+        "scope": "workspace",
+        "description": "fixtures: details",
+        "fields": [
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "event",
+        "label": "Event",
+        "scope": "workspace",
+        "description": "fixtures: activity",
+        "fields": [
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "time",
+            "label": "Time",
+            "type": "datetime",
+            "required": true
+          },
+          {
+            "id": "tone",
+            "label": "Tone",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "fact",
+        "label": "Fact",
+        "scope": "workspace",
+        "description": "fixtures: deliveryfacts",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "faq",
+        "label": "Faq",
+        "scope": "workspace",
+        "description": "fixtures: faq",
+        "fields": [
+          {
+            "id": "answer",
+            "label": "Answer",
+            "type": "string",
+            "required": true
+          }
+        ]
+      },
+      "taxonomies": [
+        "faq_category"
+      ]
+    },
+    {
+      "record": {
+        "id": "feature",
+        "label": "Feature",
+        "scope": "workspace",
+        "description": "fixtures: features",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "job",
+        "label": "Job",
+        "scope": "workspace",
+        "description": "fixtures: jobs",
+        "fields": [
+          {
+            "id": "dept",
+            "label": "Dept",
+            "type": "relation",
+            "required": true
+          },
+          {
+            "id": "location",
+            "label": "Location",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "posted",
+            "label": "Posted",
+            "type": "datetime",
+            "required": true
+          },
+          {
+            "id": "salary",
+            "label": "Salary",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "type",
+            "label": "Type",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "relations": [
+          {
+            "id": "dept",
+            "source": "job",
+            "target": "department",
+            "cardinality": "one-to-one"
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "lane",
+        "label": "Lane",
+        "scope": "workspace",
+        "description": "fixtures: lanes",
+        "fields": []
+      }
+    },
+    {
+      "record": {
+        "id": "line",
+        "label": "Line",
+        "scope": "workspace",
+        "description": "fixtures: terminal",
+        "fields": [
+          {
+            "id": "line_kind",
+            "label": "Line kind",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "logo",
+        "label": "Logo",
+        "scope": "workspace",
+        "description": "fixtures: logos",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "media",
+        "label": "Media",
+        "scope": "workspace",
+        "description": "fixtures: media",
+        "fields": [
+          {
+            "id": "alt",
+            "label": "Alt",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "file",
+            "label": "File",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "height",
+            "label": "Height",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "mime",
+            "label": "Mime",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "width",
+            "label": "Width",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "member",
+        "label": "Member",
+        "scope": "workspace",
+        "description": "fixtures: members",
+        "fields": [
+          {
+            "id": "bio",
+            "label": "Bio",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "dept",
+            "label": "Dept",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "location",
+            "label": "Location",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "role",
+            "label": "Role",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "skills",
+            "label": "Skills",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "menu_item",
+        "label": "Menu item",
+        "scope": "workspace",
+        "description": "fixtures: categories, helplinks, megagroups, menulinks, navlinks, outline, sidenav, sitemap, subnav",
+        "fields": [
+          {
+            "id": "count",
+            "label": "Count",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ]
+          },
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string"
+          },
+          {
+            "id": "location",
+            "label": "Location",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "metric",
+        "label": "Metric",
+        "scope": "workspace",
+        "description": "fixtures: metrics",
+        "fields": [
+          {
+            "id": "currency",
+            "label": "Currency",
+            "type": "string"
+          },
+          {
+            "id": "hint",
+            "label": "Hint",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "unit",
+            "label": "Unit",
+            "type": "string"
+          },
+          {
+            "id": "value",
+            "label": "Value",
+            "type": "number",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "milestone",
+        "label": "Milestone",
+        "scope": "workspace",
+        "description": "fixtures: milestones",
+        "fields": [
+          {
+            "id": "date",
+            "label": "Date",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "tag",
+            "label": "Tag",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "order",
+        "label": "Order",
+        "scope": "workspace",
+        "description": "fixtures: orders",
+        "fields": [
+          {
+            "id": "currency",
+            "label": "Currency",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "date",
+            "label": "Date",
+            "type": "datetime",
+            "required": true
+          },
+          {
+            "id": "items",
+            "label": "Items",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "order_status",
+            "label": "Order status",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "total",
+            "label": "Total",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "pack",
+        "label": "Pack",
+        "scope": "workspace",
+        "description": "fixtures: credits",
+        "fields": [
+          {
+            "id": "badge",
+            "label": "Badge",
+            "type": "string"
+          },
+          {
+            "id": "credits",
+            "label": "Credits",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "currency",
+            "label": "Currency",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "price",
+            "label": "Price",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "page",
+        "label": "Page",
+        "scope": "workspace",
+        "description": "fixtures: crumbs",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "payment",
+        "label": "Payment",
+        "scope": "workspace",
+        "description": "fixtures: payments",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "perk",
+        "label": "Perk",
+        "scope": "workspace",
+        "description": "fixtures: perks",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "photo",
+        "label": "Photo",
+        "scope": "workspace",
+        "description": "fixtures: photos",
+        "fields": [
+          {
+            "id": "size",
+            "label": "Size",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "tag",
+            "label": "Tag",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "placeholder",
+        "label": "Placeholder",
+        "scope": "workspace",
+        "description": "fixtures: placeholders",
+        "fields": []
+      }
+    },
+    {
+      "record": {
+        "id": "plan",
+        "label": "Plan",
+        "scope": "workspace",
+        "description": "fixtures: duo, plans, tiers",
+        "fields": [
+          {
+            "id": "currency",
+            "label": "Currency",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "features",
+            "label": "Features",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          },
+          {
+            "id": "highlighted",
+            "label": "Highlighted",
+            "type": "boolean",
+            "required": true
+          },
+          {
+            "id": "plan_status",
+            "label": "Plan status",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "price",
+            "label": "Price",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "seats",
+            "label": "Seats",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "storage",
+            "label": "Storage",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "tagline",
+            "label": "Tagline",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "yearly",
+            "label": "Yearly",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "point",
+        "label": "Point",
+        "scope": "workspace",
+        "description": "fixtures: beforeafter, series",
+        "fields": [
+          {
+            "id": "after",
+            "label": "After",
+            "type": "string"
+          },
+          {
+            "id": "before",
+            "label": "Before",
+            "type": "string"
+          },
+          {
+            "id": "value",
+            "label": "Value",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "post",
+        "label": "Post",
+        "scope": "workspace",
+        "description": "fixtures: posts",
+        "fields": [
+          {
+            "id": "date",
+            "label": "Date",
+            "type": "datetime",
+            "required": true
+          },
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "minutes",
+            "label": "Minutes",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          }
+        ]
+      },
+      "taxonomies": [
+        "category"
+      ]
+    },
+    {
+      "record": {
+        "id": "posttag",
+        "label": "Posttag",
+        "scope": "workspace",
+        "description": "fixtures: posttags",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "product",
+        "label": "Product",
+        "scope": "workspace",
+        "description": "fixtures: products",
+        "fields": [
+          {
+            "id": "badge",
+            "label": "Badge",
+            "type": "string"
+          },
+          {
+            "id": "compare_at",
+            "label": "Compare at",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ]
+          },
+          {
+            "id": "currency",
+            "label": "Currency",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "inStock",
+            "label": "In Stock",
+            "type": "boolean",
+            "required": true
+          },
+          {
+            "id": "price",
+            "label": "Price",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "rating",
+            "label": "Rating",
+            "type": "number",
+            "required": true
+          },
+          {
+            "id": "reviews",
+            "label": "Reviews",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "summary",
+            "label": "Summary",
+            "type": "string",
+            "required": true
+          }
+        ]
+      },
+      "taxonomies": [
+        "product_category"
+      ]
+    },
+    {
+      "record": {
+        "id": "profilefact",
+        "label": "Profilefact",
+        "scope": "workspace",
+        "description": "fixtures: profilefacts",
+        "fields": [
+          {
+            "id": "value",
+            "label": "Value",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "project",
+        "label": "Project",
+        "scope": "workspace",
+        "description": "fixtures: projects",
+        "fields": [
+          {
+            "id": "client",
+            "label": "Client",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "featured",
+            "label": "Featured",
+            "type": "boolean",
+            "required": true
+          },
+          {
+            "id": "summary",
+            "label": "Summary",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "tags",
+            "label": "Tags",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          },
+          {
+            "id": "year",
+            "label": "Year",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          }
+        ]
+      },
+      "taxonomies": [
+        "project_category"
+      ]
+    },
+    {
+      "record": {
+        "id": "promo",
+        "label": "Promo",
+        "scope": "workspace",
+        "description": "fixtures: promos",
+        "fields": []
+      }
+    },
+    {
+      "record": {
+        "id": "prompt",
+        "label": "Prompt",
+        "scope": "workspace",
+        "description": "fixtures: prompts",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "value",
+            "label": "Value",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "question",
+        "label": "Question",
+        "scope": "workspace",
+        "description": "fixtures: questions",
+        "fields": [
+          {
+            "id": "answer",
+            "label": "Answer",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          }
+        ]
+      },
+      "taxonomies": [
+        "faq_category"
+      ]
+    },
+    {
+      "record": {
+        "id": "review",
+        "label": "Review",
+        "scope": "workspace",
+        "description": "fixtures: reviews",
+        "fields": [
+          {
+            "id": "date",
+            "label": "Date",
+            "type": "datetime",
+            "required": true
+          },
+          {
+            "id": "rating",
+            "label": "Rating",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "row",
+        "label": "Row",
+        "scope": "workspace",
+        "description": "fixtures: compare, rivals",
+        "fields": [
+          {
+            "id": "a",
+            "label": "A",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "b",
+            "label": "B",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "c",
+            "label": "C",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "section",
+        "label": "Section",
+        "scope": "workspace",
+        "description": "fixtures: article",
+        "fields": [
+          {
+            "id": "quote",
+            "label": "Quote",
+            "type": "string"
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "skill",
+        "label": "Skill",
+        "scope": "workspace",
+        "description": "fixtures: skills",
+        "fields": [
+          {
+            "id": "level",
+            "label": "Level",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "spec",
+        "label": "Spec",
+        "scope": "workspace",
+        "description": "fixtures: specs",
+        "fields": [
+          {
+            "id": "value",
+            "label": "Value",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "stat",
+        "label": "Stat",
+        "scope": "workspace",
+        "description": "fixtures: stats",
+        "fields": [
+          {
+            "id": "hint",
+            "label": "Hint",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "unit",
+            "label": "Unit",
+            "type": "string"
+          },
+          {
+            "id": "value",
+            "label": "Value",
+            "type": "number",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "step",
+        "label": "Step",
+        "scope": "workspace",
+        "description": "fixtures: steps, wizard",
+        "fields": [
+          {
+            "id": "fieldA",
+            "label": "Field A",
+            "type": "string"
+          },
+          {
+            "id": "fieldB",
+            "label": "Field B",
+            "type": "string"
+          },
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "store",
+        "label": "Store",
+        "scope": "workspace",
+        "description": "fixtures: stores",
+        "fields": [
+          {
+            "id": "address",
+            "label": "Address",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "hours",
+            "label": "Hours",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "note",
+            "label": "Note",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "phone",
+            "label": "Phone",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "services",
+            "label": "Services",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          },
+          {
+            "id": "store_kind",
+            "label": "Store kind",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "summaryrow",
+        "label": "Summaryrow",
+        "scope": "workspace",
+        "description": "fixtures: summary",
+        "fields": [
+          {
+            "id": "amount",
+            "label": "Amount",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "currency",
+            "label": "Currency",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "strong",
+            "label": "Strong",
+            "type": "boolean",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "tab",
+        "label": "Tab",
+        "scope": "workspace",
+        "description": "fixtures: faqtabs, tabs",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string"
+          },
+          {
+            "id": "value",
+            "label": "Value",
+            "type": "string"
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "task",
+        "label": "Task",
+        "scope": "workspace",
+        "description": "fixtures: checklist",
+        "fields": [
+          {
+            "id": "done",
+            "label": "Done",
+            "type": "boolean",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "template",
+        "label": "Template",
+        "scope": "workspace",
+        "description": "fixtures: templates",
+        "fields": [
+          {
+            "id": "likes",
+            "label": "Likes",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "topic",
+            "label": "Topic",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "views",
+            "label": "Views",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "testimonial",
+        "label": "Testimonial",
+        "scope": "workspace",
+        "description": "fixtures: testimonials",
+        "fields": [
+          {
+            "id": "company",
+            "label": "Company",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "handle",
+            "label": "Handle",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "mark",
+            "label": "Mark",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "quote",
+            "label": "Quote",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "rating",
+            "label": "Rating",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/integer"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "role",
+            "label": "Role",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "time",
+            "label": "Time",
+            "type": "datetime",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "tile",
+        "label": "Tile",
+        "scope": "workspace",
+        "description": "fixtures: bento",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "size",
+            "label": "Size",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "topic",
+        "label": "Topic",
+        "scope": "workspace",
+        "description": "fixtures: topics",
+        "fields": [
+          {
+            "id": "value",
+            "label": "Value",
+            "type": "string"
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "user",
+        "label": "User",
+        "scope": "workspace",
+        "description": "fixtures: users",
+        "fields": [
+          {
+            "id": "display_name",
+            "label": "Display name",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "roles",
+            "label": "Roles",
+            "type": "collection",
+            "items": {
+              "id": "item",
+              "label": "Item",
+              "type": "string"
+            },
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "value",
+        "label": "Value",
+        "scope": "workspace",
+        "description": "fixtures: values",
+        "fields": [
+          {
+            "id": "icon",
+            "label": "Icon",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "text",
+            "label": "Text",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    },
+    {
+      "record": {
+        "id": "zone",
+        "label": "Zone",
+        "scope": "workspace",
+        "description": "fixtures: zones",
+        "fields": [
+          {
+            "id": "area",
+            "label": "Area",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "currency",
+            "label": "Currency",
+            "type": "string",
+            "required": true
+          },
+          {
+            "id": "express",
+            "label": "Express",
+            "type": "string"
+          },
+          {
+            "id": "freeFrom",
+            "label": "Free From",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "minOrder",
+            "label": "Min Order",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "price",
+            "label": "Price",
+            "type": "number",
+            "rules": [
+              {
+                "name": "fastygo.codex/money"
+              }
+            ],
+            "required": true
+          },
+          {
+            "id": "time",
+            "label": "Time",
+            "type": "string",
+            "required": true
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/xgen/schema/package.json b/xgen/schema/package.json
new file mode 100644
index 0000000..fbac7a3
--- /dev/null
+++ b/xgen/schema/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ui8kit/xgen-schema",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "JSON Schemas of xgen (spec, variants, organism, screen, app, collection) and a validator over them.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./codex-blocks": "./src/codex-blocks.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "ajv": "^8.17.1",
+    "@ui8kit/contract": "^0.2.0"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/schema/schemas/app.schema.json b/xgen/schema/schemas/app.schema.json
new file mode 100644
index 0000000..348f878
--- /dev/null
+++ b/xgen/schema/schemas/app.schema.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://xgen.dev/schemas/app.schema.json",
+  "title": "xgen app",
+  "description": "The one hand-written file of a host app: it serves screens by name (/<screen>/#/<route>); everything else in it is generated.",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "specVersion": {
+      "const": 1
+    },
+    "name": {
+      "type": "string",
+      "pattern": "^[a-z][a-z0-9-]*$"
+    },
+    "runtime": {
+      "enum": [
+        "svelte",
+        "react",
+        "vue",
+        "solid"
+      ]
+    },
+    "screens": {
+      "type": "array",
+      "description": "screen spec ids the host serves; [\"*\"]: every screen portable to the runtime",
+      "items": {
+        "type": "string",
+        "pattern": "^(\\*|screen\\.[a-z0-9-]+)$"
+      },
+      "minItems": 1
+    },
+    "title": {
+      "type": "string"
+    },
+    "port": {
+      "type": "integer",
+      "minimum": 1024,
+      "maximum": 65535
+    },
+    "locale": {
+      "const": "en"
+    },
+    "theme": {
+      "enum": [
+        "light",
+        "dark",
+        "system"
+      ]
+    },
+    "hand": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "extra handwritten paths the build must not overwrite"
+    }
+  },
+  "required": [
+    "specVersion",
+    "name",
+    "runtime",
+    "screens",
+    "title",
+    "port",
+    "locale",
+    "theme"
+  ],
+  "additionalProperties": false
+}
diff --git a/xgen/schema/schemas/block.schema.json b/xgen/schema/schemas/block.schema.json
new file mode 100644
index 0000000..3a4b625
--- /dev/null
+++ b/xgen/schema/schemas/block.schema.json
@@ -0,0 +1,307 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://xgen.dev/schemas/block.schema.json",
+  "title": "xgen block: an organism, its axes, named variants and the data it reads (no markup)",
+  "type": "object",
+  "$defs": {
+    "value": {
+      "anyOf": [
+        {
+          "type": [
+            "string",
+            "number",
+            "boolean",
+            "null"
+          ]
+        },
+        {
+          "type": "object",
+          "properties": {
+            "$": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "$"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "op": {
+              "type": "string"
+            },
+            "args": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/value"
+              }
+            }
+          },
+          "required": [
+            "op",
+            "args"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "description": "a group of named values (a grouped prop)",
+          "not": {
+            "anyOf": [
+              {
+                "required": [
+                  "$"
+                ]
+              },
+              {
+                "required": [
+                  "op"
+                ]
+              }
+            ]
+          },
+          "additionalProperties": {
+            "$ref": "#/$defs/value"
+          }
+        }
+      ]
+    }
+  },
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "specVersion": {
+      "const": 1
+    },
+    "id": {
+      "type": "string",
+      "pattern": "^block\\.[a-z][A-Za-z0-9]*$"
+    },
+    "name": {
+      "type": "string"
+    },
+    "docs": {
+      "type": "string"
+    },
+    "theme": {
+      "enum": [
+        "marketing",
+        "commerce",
+        "promo",
+        "content",
+        "account",
+        "dashboard",
+        "onboarding",
+        "support"
+      ]
+    },
+    "group": {
+      "type": "string"
+    },
+    "organism": {
+      "type": "string"
+    },
+    "axes": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "array",
+        "items": {
+          "type": "string"
+        },
+        "minItems": 2,
+        "uniqueItems": true
+      }
+    },
+    "defaults": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "variants": {
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string",
+            "pattern": "^[a-z][A-Za-z0-9]*$"
+          },
+          "set": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "string"
+            }
+          },
+          "props": {
+            "type": "object",
+            "additionalProperties": {
+              "$ref": "#/$defs/value"
+            }
+          }
+        },
+        "required": [
+          "id",
+          "set"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "slots": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "events": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "data": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "as": {
+            "type": "string"
+          },
+          "collection": {
+            "type": "string"
+          },
+          "kind": {
+            "type": "string"
+          },
+          "record": {
+            "type": "string"
+          },
+          "fields": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "string"
+            }
+          }
+        },
+        "required": [
+          "as",
+          "collection",
+          "kind",
+          "record",
+          "fields"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "sample": {
+      "type": "object",
+      "properties": {
+        "props": {
+          "type": "object",
+          "additionalProperties": {
+            "$ref": "#/$defs/value"
+          }
+        }
+      },
+      "required": [
+        "props"
+      ],
+      "additionalProperties": false
+    },
+    "fit": {
+      "enum": [
+        "section",
+        "card"
+      ]
+    },
+    "facts": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": [
+          "sel"
+        ],
+        "additionalProperties": false,
+        "properties": {
+          "sel": {
+            "type": "string"
+          },
+          "n": {
+            "type": [
+              "number",
+              "string"
+            ]
+          },
+          "cols": {
+            "type": [
+              "number",
+              "string"
+            ]
+          },
+          "when": {
+            "type": "object",
+            "additionalProperties": {
+              "oneOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "type": "array",
+                  "items": {
+                    "type": "string"
+                  }
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
+    "alt": {
+      "type": "object",
+      "description": "a second organism, drawn by the variants that set axis to values[1]",
+      "properties": {
+        "axis": {
+          "type": "string"
+        },
+        "values": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "minItems": 2,
+          "maxItems": 2
+        },
+        "organism": {
+          "type": "string"
+        }
+      },
+      "required": [
+        "axis",
+        "values",
+        "organism"
+      ],
+      "additionalProperties": false
+    }
+  },
+  "required": [
+    "specVersion",
+    "id",
+    "name",
+    "docs",
+    "theme",
+    "group",
+    "organism",
+    "axes",
+    "defaults",
+    "variants",
+    "slots",
+    "data",
+    "sample"
+  ],
+  "additionalProperties": false
+}
diff --git a/xgen/schema/schemas/collection.schema.json b/xgen/schema/schemas/collection.schema.json
new file mode 100644
index 0000000..6e560b9
--- /dev/null
+++ b/xgen/schema/schemas/collection.schema.json
@@ -0,0 +1,149 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://xgen.dev/schemas/collection.schema.json",
+  "title": "xgen fixture: a Codex v0.4 collection (entries: https://schema.buildy.tw/entry.schema.json)",
+  "type": "object",
+  "properties": {
+    "collection": {
+      "type": "string"
+    },
+    "kind": {
+      "type": "string"
+    },
+    "entries": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "locale": {
+            "type": "string",
+            "pattern": "^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$"
+          },
+          "kind": {
+            "type": "string"
+          },
+          "status": {
+            "type": "string"
+          },
+          "visibility": {
+            "type": "string"
+          },
+          "slug": {
+            "type": "string",
+            "minLength": 1
+          },
+          "title": {
+            "type": "string"
+          },
+          "excerpt": {
+            "type": "string"
+          },
+          "author_id": {
+            "type": "string",
+            "minLength": 1,
+            "description": "the id of the entry of kind user that wrote this one (Codex v0.4 core field)"
+          },
+          "parent_id": {
+            "type": "string",
+            "minLength": 1,
+            "description": "the id of the parent entry of the same kind (a page under a page: the breadcrumb chain; Codex v0.4 core field)"
+          },
+          "order": {
+            "type": "integer",
+            "description": "the position among the entries of one parent (a menu item among its siblings; Codex v0.4 core field)"
+          },
+          "featured_media_id": {
+            "type": "string",
+            "minLength": 1,
+            "description": "the id of the entry of kind media that pictures this one (Codex v0.4 core field)"
+          },
+          "terms": {
+            "type": "array",
+            "description": "term references (Codex v0.4 core field); the terms live in fixtures/taxonomies",
+            "items": {
+              "type": "object",
+              "properties": {
+                "taxonomy": {
+                  "type": "string"
+                },
+                "term_id": {
+                  "type": "string"
+                }
+              },
+              "required": [
+                "taxonomy",
+                "term_id"
+              ],
+              "additionalProperties": false
+            }
+          },
+          "metadata": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "object",
+              "properties": {
+                "value": {
+                  "oneOf": [
+                    {
+                      "type": [
+                        "string",
+                        "number",
+                        "boolean"
+                      ]
+                    },
+                    {
+                      "type": "array",
+                      "items": {
+                        "type": "string"
+                      }
+                    }
+                  ]
+                }
+              },
+              "required": [
+                "value"
+              ],
+              "additionalProperties": false
+            }
+          },
+          "version": {
+            "type": "integer"
+          },
+          "created_at": {
+            "type": "string"
+          },
+          "updated_at": {
+            "type": "string"
+          },
+          "published_at": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "id",
+          "locale",
+          "kind",
+          "status",
+          "visibility",
+          "slug",
+          "title",
+          "metadata",
+          "version",
+          "created_at",
+          "updated_at",
+          "published_at"
+        ],
+        "additionalProperties": false
+      }
+    }
+  },
+  "required": [
+    "collection",
+    "kind",
+    "entries"
+  ],
+  "additionalProperties": false
+}
diff --git a/xgen/schema/schemas/composed.schema.json b/xgen/schema/schemas/composed.schema.json
new file mode 100644
index 0000000..50030ec
--- /dev/null
+++ b/xgen/schema/schemas/composed.schema.json
@@ -0,0 +1,509 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://xgen.dev/schemas/composed.schema.json",
+  "title": "xgen composed screen: a page that is a list of block uses",
+  "type": "object",
+  "$defs": {
+    "value": {
+      "anyOf": [
+        {
+          "type": [
+            "string",
+            "number",
+            "boolean",
+            "null"
+          ]
+        },
+        {
+          "type": "object",
+          "properties": {
+            "$": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "$"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "op": {
+              "type": "string"
+            },
+            "args": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/value"
+              }
+            }
+          },
+          "required": [
+            "op",
+            "args"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "description": "a group of named values (a grouped prop)",
+          "not": {
+            "anyOf": [
+              {
+                "required": [
+                  "$"
+                ]
+              },
+              {
+                "required": [
+                  "op"
+                ]
+              }
+            ]
+          },
+          "additionalProperties": {
+            "$ref": "#/$defs/value"
+          }
+        }
+      ]
+    }
+  },
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "specVersion": {
+      "const": 1
+    },
+    "id": {
+      "type": "string"
+    },
+    "name": {
+      "type": "string"
+    },
+    "kind": {
+      "const": "composed"
+    },
+    "docs": {
+      "type": "string"
+    },
+    "routes": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "path": {
+            "type": "string"
+          },
+          "area": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "path",
+          "area"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "frame": {
+      "type": "object",
+      "properties": {
+        "before": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "block": {
+                "type": "string"
+              },
+              "variant": {
+                "type": "string"
+              },
+              "props": {
+                "type": "object",
+                "additionalProperties": {
+                  "$ref": "#/$defs/value"
+                }
+              }
+            },
+            "required": [
+              "block"
+            ],
+            "additionalProperties": false
+          }
+        },
+        "after": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "block": {
+                "type": "string"
+              },
+              "variant": {
+                "type": "string"
+              },
+              "props": {
+                "type": "object",
+                "additionalProperties": {
+                  "$ref": "#/$defs/value"
+                }
+              }
+            },
+            "required": [
+              "block"
+            ],
+            "additionalProperties": false
+          }
+        }
+      },
+      "required": [
+        "before",
+        "after"
+      ],
+      "additionalProperties": false
+    },
+    "areas": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "block": {
+              "type": "string"
+            },
+            "variant": {
+              "type": "string"
+            },
+            "props": {
+              "type": "object",
+              "additionalProperties": {
+                "$ref": "#/$defs/value"
+              }
+            }
+          },
+          "required": [
+            "block"
+          ],
+          "additionalProperties": false
+        }
+      }
+    },
+    "gallery": {
+      "type": "boolean"
+    },
+    "catalog": {
+      "type": "object",
+      "description": "the catalog: sections of categories (each a list of blocks, all their variants or the named ones) and full pages made of blocks",
+      "properties": {
+        "sections": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "pattern": "^[a-z][a-z0-9-]*$"
+              },
+              "categories": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "id": {
+                      "type": "string",
+                      "pattern": "^[a-z][a-z0-9-]*$"
+                    },
+                    "entries": {
+                      "type": "array",
+                      "minItems": 1,
+                      "items": {
+                        "type": "object",
+                        "properties": {
+                          "block": {
+                            "type": "string"
+                          },
+                          "variants": {
+                            "type": "array",
+                            "items": {
+                              "type": "string"
+                            },
+                            "minItems": 1
+                          }
+                        },
+                        "required": [
+                          "block"
+                        ],
+                        "additionalProperties": false
+                      }
+                    }
+                  },
+                  "required": [
+                    "id",
+                    "entries"
+                  ],
+                  "additionalProperties": false
+                }
+              }
+            },
+            "required": [
+              "id",
+              "categories"
+            ],
+            "additionalProperties": false
+          }
+        },
+        "pages": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "pattern": "^[a-z][a-z0-9-]*$"
+              },
+              "uses": {
+                "type": "array",
+                "minItems": 1,
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "block": {
+                      "type": "string"
+                    },
+                    "variant": {
+                      "type": "string"
+                    },
+                    "props": {
+                      "type": "object",
+                      "additionalProperties": {
+                        "$ref": "#/$defs/value"
+                      }
+                    }
+                  },
+                  "required": [
+                    "block"
+                  ],
+                  "additionalProperties": false
+                }
+              }
+            },
+            "required": [
+              "id",
+              "uses"
+            ],
+            "additionalProperties": false
+          }
+        }
+      },
+      "required": [
+        "sections",
+        "pages"
+      ],
+      "additionalProperties": false
+    },
+    "skins": {
+      "type": "object",
+      "description": "the Skins screen: tiles for the skins (data-skin values, default first), Google fonts with Latin and Cyrillic, and corner radii",
+      "properties": {
+        "skins": {
+          "type": "array",
+          "minItems": 1,
+          "items": {
+            "type": "string",
+            "pattern": "^[a-z][a-z0-9-]*$"
+          }
+        },
+        "fonts": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "pattern": "^[a-z][a-z0-9-]*$"
+              },
+              "family": {
+                "type": "string",
+                "pattern": "^[A-Za-z0-9 ]+$"
+              }
+            },
+            "required": [
+              "id",
+              "family"
+            ],
+            "additionalProperties": false
+          }
+        },
+        "radii": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "pattern": "^[a-z][a-z0-9-]*$"
+              },
+              "value": {
+                "type": "string",
+                "pattern": "^[0-9.]+(px|rem)$"
+              }
+            },
+            "required": [
+              "id",
+              "value"
+            ],
+            "additionalProperties": false
+          }
+        }
+      },
+      "required": [
+        "skins",
+        "fonts",
+        "radii"
+      ],
+      "additionalProperties": false
+    },
+    "chunks": {
+      "type": "boolean",
+      "description": "every area is its own page file next to the screen; the screen keeps the routes and the frame"
+    },
+    "requireH1": {
+      "type": "boolean"
+    },
+    "nameLandmarks": {
+      "type": "boolean"
+    },
+    "nav": {
+      "type": "boolean"
+    },
+    "menu": {
+      "type": "array",
+      "description": "The menu of the screen: the links of its navigation bar, in order. Every path is a route of the screen; titleKey is a key of the dictionary.",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string",
+            "pattern": "^[a-z][a-z0-9-]*$"
+          },
+          "path": {
+            "type": "string",
+            "pattern": "^[a-z0-9-]*$"
+          },
+          "titleKey": {
+            "type": "string",
+            "pattern": "^[A-Za-z][A-Za-z0-9]*(\\.[A-Za-z0-9]+)+$"
+          },
+          "icon": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "id",
+          "path",
+          "titleKey"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "portable": {
+      "type": "object",
+      "properties": {
+        "svelte": {
+          "oneOf": [
+            {
+              "const": true
+            },
+            {
+              "type": "object",
+              "properties": {
+                "portable": {
+                  "const": false
+                },
+                "reason": {
+                  "type": "string",
+                  "minLength": 8
+                }
+              },
+              "required": [
+                "portable",
+                "reason"
+              ],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "react": {
+          "oneOf": [
+            {
+              "const": true
+            },
+            {
+              "type": "object",
+              "properties": {
+                "portable": {
+                  "const": false
+                },
+                "reason": {
+                  "type": "string",
+                  "minLength": 8
+                }
+              },
+              "required": [
+                "portable",
+                "reason"
+              ],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "vue": {
+          "oneOf": [
+            {
+              "const": true
+            },
+            {
+              "type": "object",
+              "properties": {
+                "portable": {
+                  "const": false
+                },
+                "reason": {
+                  "type": "string",
+                  "minLength": 8
+                }
+              },
+              "required": [
+                "portable",
+                "reason"
+              ],
+              "additionalProperties": false
+            }
+          ]
+        }
+      },
+      "required": [
+        "svelte",
+        "react"
+      ],
+      "additionalProperties": false
+    }
+  },
+  "required": [
+    "specVersion",
+    "id",
+    "name",
+    "kind",
+    "docs",
+    "routes",
+    "frame",
+    "areas",
+    "portable"
+  ],
+  "additionalProperties": false
+}
diff --git a/xgen/schema/schemas/dictionary.schema.json b/xgen/schema/schemas/dictionary.schema.json
new file mode 100644
index 0000000..1fe52b8
--- /dev/null
+++ b/xgen/schema/schemas/dictionary.schema.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://xgen.dev/schemas/dictionary.schema.json",
+  "title": "xgen content dictionary",
+  "type": "object",
+  "$defs": {
+    "d": {
+      "type": "object",
+      "additionalProperties": {
+        "oneOf": [
+          {
+            "type": "string"
+          },
+          {
+            "$ref": "#/$defs/d"
+          }
+        ]
+      }
+    }
+  },
+  "$ref": "#/$defs/d"
+}
diff --git a/xgen/schema/schemas/organism.schema.json b/xgen/schema/schemas/organism.schema.json
new file mode 100644
index 0000000..b6008f6
--- /dev/null
+++ b/xgen/schema/schemas/organism.schema.json
@@ -0,0 +1,747 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://xgen.dev/schemas/organism.schema.json",
+  "title": "xgen organism",
+  "type": "object",
+  "$defs": {
+    "value": {
+      "oneOf": [
+        {
+          "type": [
+            "string",
+            "number",
+            "boolean",
+            "null"
+          ]
+        },
+        {
+          "type": "object",
+          "properties": {
+            "$": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "$"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "op": {
+              "type": "string"
+            },
+            "args": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/value"
+              }
+            }
+          },
+          "required": [
+            "op",
+            "args"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "description": "a group of named values (a grouped prop)",
+          "not": {
+            "anyOf": [
+              {
+                "required": [
+                  "$"
+                ]
+              },
+              {
+                "required": [
+                  "op"
+                ]
+              }
+            ]
+          },
+          "additionalProperties": {
+            "$ref": "#/$defs/value"
+          }
+        }
+      ]
+    },
+    "node": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "use": {
+              "type": "string"
+            },
+            "props": {
+              "type": "object",
+              "additionalProperties": {
+                "$ref": "#/$defs/value"
+              }
+            },
+            "attrs": {
+              "type": "object",
+              "additionalProperties": {
+                "$ref": "#/$defs/value"
+              }
+            },
+            "on": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "object",
+                "properties": {
+                  "call": {
+                    "type": "string"
+                  },
+                  "args": {
+                    "type": "array",
+                    "items": {
+                      "$ref": "#/$defs/value"
+                    }
+                  }
+                },
+                "required": [
+                  "call"
+                ],
+                "additionalProperties": false
+              }
+            },
+            "children": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            }
+          },
+          "required": [
+            "use"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "text": {
+              "$ref": "#/$defs/value"
+            }
+          },
+          "required": [
+            "text"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "when": {
+              "$ref": "#/$defs/value"
+            },
+            "then": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            },
+            "else": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            }
+          },
+          "required": [
+            "when",
+            "then"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "each": {
+              "$ref": "#/$defs/value"
+            },
+            "as": {
+              "type": "string"
+            },
+            "key": {
+              "$ref": "#/$defs/value"
+            },
+            "do": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            },
+            "index": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "each",
+            "as",
+            "key",
+            "do"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "slot": {
+              "type": "string"
+            },
+            "args": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/value"
+              }
+            }
+          },
+          "required": [
+            "slot"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "organism": {
+              "type": "string"
+            },
+            "props": {
+              "type": "object",
+              "additionalProperties": {
+                "$ref": "#/$defs/value"
+              }
+            },
+            "on": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "object",
+                "properties": {
+                  "call": {
+                    "type": "string"
+                  },
+                  "args": {
+                    "type": "array",
+                    "items": {
+                      "$ref": "#/$defs/value"
+                    }
+                  }
+                },
+                "required": [
+                  "call"
+                ],
+                "additionalProperties": false
+              }
+            },
+            "slots": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "object",
+                "properties": {
+                  "args": {
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "do": {
+                    "type": "array",
+                    "items": {
+                      "$ref": "#/$defs/node"
+                    }
+                  },
+                  "forward": {
+                    "type": "string",
+                    "description": "pass a slot of the enclosing organism on as this slot (args and do stay empty)"
+                  }
+                },
+                "required": [
+                  "args",
+                  "do"
+                ],
+                "additionalProperties": false
+              }
+            }
+          },
+          "required": [
+            "organism"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "outlet": {
+              "const": true
+            }
+          },
+          "required": [
+            "outlet"
+          ],
+          "additionalProperties": false
+        }
+      ]
+    }
+  },
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "specVersion": {
+      "const": 1
+    },
+    "id": {
+      "type": "string",
+      "pattern": "^(organism|part|pattern)\\.[a-z0-9-]+$"
+    },
+    "name": {
+      "type": "string",
+      "pattern": "^[A-Z][A-Za-z0-9]*$"
+    },
+    "docs": {
+      "type": "string"
+    },
+    "records": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string"
+            },
+            "type": {
+              "type": "string",
+              "description": "a data field type (string, number, boolean, string[]) or, in a grouped prop, a TypeScript type"
+            },
+            "optional": {
+              "type": "boolean"
+            },
+            "default": {
+              "type": [
+                "string",
+                "number",
+                "boolean"
+              ]
+            },
+            "docs": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "name",
+            "type"
+          ],
+          "additionalProperties": false
+        }
+      }
+    },
+    "props": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "type": {
+            "oneOf": [
+              {
+                "enum": [
+                  "string",
+                  "number",
+                  "boolean",
+                  "string[]"
+                ]
+              },
+              {
+                "type": "object",
+                "properties": {
+                  "record": {
+                    "type": "string"
+                  }
+                },
+                "required": [
+                  "record"
+                ],
+                "additionalProperties": false
+              },
+              {
+                "type": "object",
+                "properties": {
+                  "ts": {
+                    "type": "string"
+                  }
+                },
+                "required": [
+                  "ts"
+                ],
+                "additionalProperties": false
+              }
+            ]
+          },
+          "required": {
+            "type": "boolean"
+          },
+          "docs": {
+            "type": "string"
+          },
+          "default": {
+            "type": [
+              "string",
+              "number",
+              "boolean"
+            ]
+          }
+        },
+        "required": [
+          "name",
+          "type"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "slots": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "args": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string"
+                },
+                "type": {
+                  "oneOf": [
+                    {
+                      "enum": [
+                        "string",
+                        "number",
+                        "boolean",
+                        "string[]"
+                      ]
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "record": {
+                          "type": "string"
+                        }
+                      },
+                      "required": [
+                        "record"
+                      ],
+                      "additionalProperties": false
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "ts": {
+                          "type": "string"
+                        }
+                      },
+                      "required": [
+                        "ts"
+                      ],
+                      "additionalProperties": false
+                    }
+                  ]
+                }
+              },
+              "required": [
+                "name",
+                "type"
+              ],
+              "additionalProperties": false
+            }
+          },
+          "docs": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "name",
+          "args"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "events": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "args": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string"
+                },
+                "type": {
+                  "oneOf": [
+                    {
+                      "enum": [
+                        "string",
+                        "number",
+                        "boolean",
+                        "string[]"
+                      ]
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "record": {
+                          "type": "string"
+                        }
+                      },
+                      "required": [
+                        "record"
+                      ],
+                      "additionalProperties": false
+                    },
+                    {
+                      "type": "object",
+                      "properties": {
+                        "ts": {
+                          "type": "string"
+                        }
+                      },
+                      "required": [
+                        "ts"
+                      ],
+                      "additionalProperties": false
+                    }
+                  ]
+                }
+              },
+              "required": [
+                "name",
+                "type"
+              ],
+              "additionalProperties": false
+            }
+          },
+          "docs": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "name",
+          "args"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "view": {
+      "type": "array",
+      "items": {
+        "$ref": "#/$defs/node"
+      }
+    },
+    "portable": {
+      "type": "object",
+      "properties": {
+        "svelte": {
+          "oneOf": [
+            {
+              "const": true
+            },
+            {
+              "type": "object",
+              "properties": {
+                "portable": {
+                  "const": false
+                },
+                "reason": {
+                  "type": "string",
+                  "minLength": 8
+                }
+              },
+              "required": [
+                "portable",
+                "reason"
+              ],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "react": {
+          "oneOf": [
+            {
+              "const": true
+            },
+            {
+              "type": "object",
+              "properties": {
+                "portable": {
+                  "const": false
+                },
+                "reason": {
+                  "type": "string",
+                  "minLength": 8
+                }
+              },
+              "required": [
+                "portable",
+                "reason"
+              ],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "vue": {
+          "oneOf": [
+            {
+              "const": true
+            },
+            {
+              "type": "object",
+              "properties": {
+                "portable": {
+                  "const": false
+                },
+                "reason": {
+                  "type": "string",
+                  "minLength": 8
+                }
+              },
+              "required": [
+                "portable",
+                "reason"
+              ],
+              "additionalProperties": false
+            }
+          ]
+        }
+      },
+      "required": [
+        "svelte",
+        "react"
+      ],
+      "additionalProperties": false
+    },
+    "className": {
+      "type": "boolean"
+    },
+    "children": {
+      "type": "boolean"
+    },
+    "consts": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": {
+          "type": "string"
+        }
+      }
+    },
+    "derived": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "value": {
+            "$ref": "#/$defs/value"
+          }
+        },
+        "required": [
+          "name",
+          "value"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "recipes": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "examples": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "props": {
+            "type": "object",
+            "additionalProperties": {
+              "type": [
+                "string",
+                "number",
+                "boolean"
+              ]
+            }
+          }
+        },
+        "required": [
+          "id",
+          "props"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "typeImports": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "from": {
+            "type": "string"
+          },
+          "names": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        },
+        "required": [
+          "from",
+          "names"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "frame": {
+      "const": true,
+      "description": "a frame: a part whose whole job is the landmark of a region; it opens on one Block and is checked as a block file (blockRoot zone, rule 01)"
+    }
+  },
+  "required": [
+    "specVersion",
+    "id",
+    "name",
+    "docs",
+    "records",
+    "props",
+    "slots",
+    "events",
+    "view",
+    "portable"
+  ],
+  "additionalProperties": false
+}
diff --git a/xgen/schema/schemas/preset.schema.json b/xgen/schema/schemas/preset.schema.json
new file mode 100644
index 0000000..5dd2245
--- /dev/null
+++ b/xgen/schema/schemas/preset.schema.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "preset.schema.json",
+  "title": "A layout preset of a kit: named class strings with the frame geometry of the kit (the only place with arbitrary Tailwind values)",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "specVersion",
+    "id",
+    "name",
+    "docs",
+    "values"
+  ],
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "specVersion": {
+      "const": 1
+    },
+    "id": {
+      "type": "string",
+      "pattern": "^preset\\.[a-z0-9-]+$"
+    },
+    "name": {
+      "type": "string",
+      "pattern": "^[a-z][A-Za-z0-9]*$",
+      "description": "the exported constant: defaults"
+    },
+    "docs": {
+      "type": "string"
+    },
+    "source": {
+      "type": "string",
+      "description": "where the numbers come from (frame, package digest)"
+    },
+    "notes": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      },
+      "description": "a comment for a key path (hero.band), printed above it"
+    },
+    "values": {
+      "$ref": "#/$defs/group"
+    }
+  },
+  "$defs": {
+    "group": {
+      "type": "object",
+      "additionalProperties": {
+        "oneOf": [
+          {
+            "type": "string"
+          },
+          {
+            "type": "number"
+          },
+          {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          },
+          {
+            "$ref": "#/$defs/group"
+          }
+        ]
+      }
+    }
+  }
+}
diff --git a/xgen/schema/schemas/screen.schema.json b/xgen/schema/schemas/screen.schema.json
new file mode 100644
index 0000000..fe2ad2e
--- /dev/null
+++ b/xgen/schema/schemas/screen.schema.json
@@ -0,0 +1,633 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://xgen.dev/schemas/screen.schema.json",
+  "title": "xgen screen",
+  "type": "object",
+  "$defs": {
+    "value": {
+      "oneOf": [
+        {
+          "type": [
+            "string",
+            "number",
+            "boolean",
+            "null"
+          ]
+        },
+        {
+          "type": "object",
+          "properties": {
+            "$": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "$"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "op": {
+              "type": "string"
+            },
+            "args": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/value"
+              }
+            }
+          },
+          "required": [
+            "op",
+            "args"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "description": "a group of named values (a grouped prop)",
+          "not": {
+            "anyOf": [
+              {
+                "required": [
+                  "$"
+                ]
+              },
+              {
+                "required": [
+                  "op"
+                ]
+              }
+            ]
+          },
+          "additionalProperties": {
+            "$ref": "#/$defs/value"
+          }
+        }
+      ]
+    },
+    "node": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "use": {
+              "type": "string"
+            },
+            "props": {
+              "type": "object",
+              "additionalProperties": {
+                "$ref": "#/$defs/value"
+              }
+            },
+            "attrs": {
+              "type": "object",
+              "additionalProperties": {
+                "$ref": "#/$defs/value"
+              }
+            },
+            "on": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "object",
+                "properties": {
+                  "call": {
+                    "type": "string"
+                  },
+                  "args": {
+                    "type": "array",
+                    "items": {
+                      "$ref": "#/$defs/value"
+                    }
+                  }
+                },
+                "required": [
+                  "call"
+                ],
+                "additionalProperties": false
+              }
+            },
+            "children": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            }
+          },
+          "required": [
+            "use"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "text": {
+              "$ref": "#/$defs/value"
+            }
+          },
+          "required": [
+            "text"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "when": {
+              "$ref": "#/$defs/value"
+            },
+            "then": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            },
+            "else": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            }
+          },
+          "required": [
+            "when",
+            "then"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "each": {
+              "$ref": "#/$defs/value"
+            },
+            "as": {
+              "type": "string"
+            },
+            "key": {
+              "$ref": "#/$defs/value"
+            },
+            "do": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            },
+            "index": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "each",
+            "as",
+            "key",
+            "do"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "slot": {
+              "type": "string"
+            },
+            "args": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/value"
+              }
+            }
+          },
+          "required": [
+            "slot"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "organism": {
+              "type": "string"
+            },
+            "props": {
+              "type": "object",
+              "additionalProperties": {
+                "$ref": "#/$defs/value"
+              }
+            },
+            "on": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "object",
+                "properties": {
+                  "call": {
+                    "type": "string"
+                  },
+                  "args": {
+                    "type": "array",
+                    "items": {
+                      "$ref": "#/$defs/value"
+                    }
+                  }
+                },
+                "required": [
+                  "call"
+                ],
+                "additionalProperties": false
+              }
+            },
+            "slots": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "object",
+                "properties": {
+                  "args": {
+                    "type": "array",
+                    "items": {
+                      "type": "string"
+                    }
+                  },
+                  "do": {
+                    "type": "array",
+                    "items": {
+                      "$ref": "#/$defs/node"
+                    }
+                  },
+                  "forward": {
+                    "type": "string",
+                    "description": "pass a slot of the enclosing organism on as this slot (args and do stay empty)"
+                  }
+                },
+                "required": [
+                  "args",
+                  "do"
+                ],
+                "additionalProperties": false
+              }
+            }
+          },
+          "required": [
+            "organism"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "outlet": {
+              "const": true
+            }
+          },
+          "required": [
+            "outlet"
+          ],
+          "additionalProperties": false
+        }
+      ]
+    }
+  },
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "specVersion": {
+      "const": 1
+    },
+    "id": {
+      "type": "string",
+      "pattern": "^screen\\.[a-z0-9-]+$"
+    },
+    "name": {
+      "type": "string",
+      "pattern": "^[A-Z][A-Za-z0-9]*$"
+    },
+    "docs": {
+      "type": "string"
+    },
+    "source": {
+      "type": "object",
+      "properties": {
+        "collection": {
+          "type": "string"
+        },
+        "kind": {
+          "type": "string"
+        },
+        "record": {
+          "type": "string"
+        },
+        "fields": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        }
+      },
+      "required": [
+        "collection",
+        "kind",
+        "record",
+        "fields"
+      ],
+      "additionalProperties": false
+    },
+    "list": {
+      "type": "object",
+      "properties": {
+        "columns": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string"
+              },
+              "label": {
+                "type": "string"
+              },
+              "type": {
+                "enum": [
+                  "text",
+                  "money",
+                  "number",
+                  "badge",
+                  "boolean"
+                ]
+              },
+              "sortable": {
+                "type": "boolean"
+              },
+              "align": {
+                "enum": [
+                  "start",
+                  "end"
+                ]
+              }
+            },
+            "required": [
+              "id",
+              "label",
+              "type"
+            ],
+            "additionalProperties": false
+          },
+          "minItems": 1
+        },
+        "searchFields": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "pageSize": {
+          "type": "integer",
+          "minimum": 1
+        },
+        "defaultSort": {
+          "type": "string",
+          "pattern": "^[A-Za-z0-9_]+:(asc|desc)$"
+        }
+      },
+      "required": [
+        "columns",
+        "searchFields",
+        "pageSize",
+        "defaultSort"
+      ],
+      "additionalProperties": false
+    },
+    "state": {
+      "type": "object",
+      "properties": {
+        "q": {
+          "type": "string"
+        },
+        "sort": {
+          "type": "string"
+        },
+        "page": {
+          "type": "string"
+        }
+      },
+      "required": [
+        "q",
+        "sort",
+        "page"
+      ],
+      "additionalProperties": false
+    },
+    "routes": {
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "properties": {
+          "path": {
+            "type": "string"
+          },
+          "area": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "path",
+          "area"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "nav": {
+      "type": "boolean",
+      "description": "the screen reads nav.links and nav.current, supplied by the app from its routes table"
+    },
+    "menu": {
+      "type": "array",
+      "description": "The menu of the screen: the links of its navigation bar, in order. Every path is a route of the screen; titleKey is a key of the dictionary.",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string",
+            "pattern": "^[a-z][a-z0-9-]*$"
+          },
+          "path": {
+            "type": "string",
+            "pattern": "^[a-z0-9-]*$"
+          },
+          "titleKey": {
+            "type": "string",
+            "pattern": "^[A-Za-z][A-Za-z0-9]*(\\.[A-Za-z0-9]+)+$"
+          },
+          "icon": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "id",
+          "path",
+          "titleKey"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "organisms": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "layout": {
+      "type": "array",
+      "items": {
+        "$ref": "#/$defs/node"
+      }
+    },
+    "areas": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "array",
+        "items": {
+          "$ref": "#/$defs/node"
+        }
+      }
+    },
+    "portable": {
+      "type": "object",
+      "properties": {
+        "svelte": {
+          "oneOf": [
+            {
+              "const": true
+            },
+            {
+              "type": "object",
+              "properties": {
+                "portable": {
+                  "const": false
+                },
+                "reason": {
+                  "type": "string",
+                  "minLength": 8
+                }
+              },
+              "required": [
+                "portable",
+                "reason"
+              ],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "react": {
+          "oneOf": [
+            {
+              "const": true
+            },
+            {
+              "type": "object",
+              "properties": {
+                "portable": {
+                  "const": false
+                },
+                "reason": {
+                  "type": "string",
+                  "minLength": 8
+                }
+              },
+              "required": [
+                "portable",
+                "reason"
+              ],
+              "additionalProperties": false
+            }
+          ]
+        },
+        "vue": {
+          "oneOf": [
+            {
+              "const": true
+            },
+            {
+              "type": "object",
+              "properties": {
+                "portable": {
+                  "const": false
+                },
+                "reason": {
+                  "type": "string",
+                  "minLength": 8
+                }
+              },
+              "required": [
+                "portable",
+                "reason"
+              ],
+              "additionalProperties": false
+            }
+          ]
+        }
+      },
+      "required": [
+        "svelte",
+        "react"
+      ],
+      "additionalProperties": false
+    },
+    "kind": {
+      "enum": [
+        "collection",
+        "page"
+      ]
+    },
+    "sources": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "collection": {
+            "type": "string"
+          },
+          "kind": {
+            "type": "string"
+          },
+          "record": {
+            "type": "string"
+          },
+          "fields": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "string"
+            }
+          },
+          "as": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "collection",
+          "kind",
+          "record",
+          "fields",
+          "as"
+        ],
+        "additionalProperties": false
+      }
+    }
+  },
+  "required": [
+    "specVersion",
+    "id",
+    "name",
+    "docs",
+    "routes",
+    "organisms",
+    "layout",
+    "areas",
+    "portable"
+  ],
+  "additionalProperties": false
+}
diff --git a/xgen/schema/schemas/spec.schema.json b/xgen/schema/schemas/spec.schema.json
new file mode 100644
index 0000000..5370933
--- /dev/null
+++ b/xgen/schema/schemas/spec.schema.json
@@ -0,0 +1,1135 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://xgen.dev/schemas/spec.schema.json",
+  "title": "xgen brick spec",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "specVersion": {
+      "const": 1
+    },
+    "id": {
+      "type": "string",
+      "pattern": "^ui\\.[a-z0-9.-]+$"
+    },
+    "tier": {
+      "const": "brick"
+    },
+    "dir": {
+      "type": "string",
+      "pattern": "^[a-z0-9-]+$"
+    },
+    "file": {
+      "type": "string"
+    },
+    "docs": {
+      "type": "string"
+    },
+    "variants": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string",
+        "pattern": "\\.variants\\.json$"
+      }
+    },
+    "recordTypes": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "fields": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string"
+                },
+                "type": {
+                  "enum": [
+                    "string",
+                    "bool"
+                  ]
+                },
+                "docs": {
+                  "type": "string"
+                }
+              },
+              "required": [
+                "name",
+                "type"
+              ],
+              "additionalProperties": false
+            }
+          }
+        },
+        "required": [
+          "name",
+          "fields"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "parts": {
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "$ref": "#/$defs/part"
+      }
+    },
+    "examples": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "props": {
+            "type": "object"
+          },
+          "children": {
+            "type": "object"
+          }
+        },
+        "required": [
+          "id",
+          "props"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "portable": {
+      "type": "object",
+      "properties": {
+        "svelte": {
+          "$ref": "#/$defs/portableFlag"
+        },
+        "react": {
+          "$ref": "#/$defs/portableFlag"
+        },
+        "vue": {
+          "$ref": "#/$defs/portableFlag"
+        }
+      },
+      "required": [
+        "svelte",
+        "react"
+      ],
+      "additionalProperties": false
+    },
+    "runtimeNotes": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "runtime": {
+            "enum": [
+              "svelte",
+              "react"
+            ]
+          },
+          "part": {
+            "type": "string"
+          },
+          "note": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "runtime",
+          "note"
+        ],
+        "additionalProperties": false
+      }
+    }
+  },
+  "required": [
+    "specVersion",
+    "id",
+    "tier",
+    "dir",
+    "docs",
+    "variants",
+    "parts",
+    "examples",
+    "portable"
+  ],
+  "additionalProperties": false,
+  "$defs": {
+    "expr": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "lit"
+            },
+            "value": {
+              "type": [
+                "string",
+                "number",
+                "boolean"
+              ]
+            }
+          },
+          "required": [
+            "kind",
+            "value"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "prop"
+            },
+            "name": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "name"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "item"
+            },
+            "field": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "field"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "derivedRef"
+            },
+            "name": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "name"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "resolvedTag"
+            }
+          },
+          "required": [
+            "kind"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "defaultIfEmpty"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            },
+            "fallback": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "expr",
+            "fallback"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "mapOr"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            },
+            "mapping": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "string"
+              }
+            },
+            "fallback": {
+              "type": "string"
+            },
+            "lower": {
+              "type": "boolean"
+            }
+          },
+          "required": [
+            "kind",
+            "expr",
+            "mapping",
+            "fallback"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "intMapOr"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            },
+            "mapping": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "string"
+              }
+            },
+            "fallback": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "expr",
+            "mapping",
+            "fallback"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "cond"
+            },
+            "test": {
+              "$ref": "#/$defs/expr"
+            },
+            "then": {
+              "$ref": "#/$defs/expr"
+            },
+            "else": {
+              "$ref": "#/$defs/expr"
+            }
+          },
+          "required": [
+            "kind",
+            "test",
+            "then",
+            "else"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "eq"
+            },
+            "left": {
+              "$ref": "#/$defs/expr"
+            },
+            "right": {
+              "$ref": "#/$defs/expr"
+            }
+          },
+          "required": [
+            "kind",
+            "left",
+            "right"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "and"
+            },
+            "exprs": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/expr"
+              }
+            }
+          },
+          "required": [
+            "kind",
+            "exprs"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "or"
+            },
+            "exprs": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/expr"
+              }
+            }
+          },
+          "required": [
+            "kind",
+            "exprs"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "not"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            }
+          },
+          "required": [
+            "kind",
+            "expr"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "isSet"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            }
+          },
+          "required": [
+            "kind",
+            "expr"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "contains"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            },
+            "substring": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "expr",
+            "substring"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "concat"
+            },
+            "parts": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/expr"
+              }
+            }
+          },
+          "required": [
+            "kind",
+            "parts"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "boolToString"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            }
+          },
+          "required": [
+            "kind",
+            "expr"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "intToString"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            }
+          },
+          "required": [
+            "kind",
+            "expr"
+          ],
+          "additionalProperties": false
+        }
+      ]
+    },
+    "classSpec": {
+      "type": "object",
+      "properties": {
+        "recipe": {
+          "type": "object",
+          "additionalProperties": {
+            "oneOf": [
+              {
+                "type": "string"
+              },
+              {
+                "$ref": "#/$defs/expr"
+              }
+            ]
+          }
+        },
+        "helperName": {
+          "type": "string"
+        },
+        "recipeId": {
+          "type": "string"
+        },
+        "staticBase": {
+          "type": "string"
+        },
+        "extra": {
+          "type": "array",
+          "items": {
+            "$ref": "#/$defs/expr"
+          }
+        },
+        "state": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "test": {
+                "$ref": "#/$defs/expr"
+              },
+              "classes": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "test",
+              "classes"
+            ],
+            "additionalProperties": false
+          }
+        },
+        "includeClassProp": {
+          "type": "boolean"
+        },
+        "fromItem": {
+          "type": "boolean"
+        }
+      },
+      "required": [],
+      "additionalProperties": false
+    },
+    "tag": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "static"
+            },
+            "tag": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "tag"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "resolved"
+            },
+            "fromProp": {
+              "type": "string"
+            },
+            "fallback": {
+              "type": "string"
+            },
+            "group": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "fromProp",
+            "fallback",
+            "group"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "heading"
+            },
+            "fromProp": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "fromProp"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "mapped"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            },
+            "tags": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          },
+          "required": [
+            "kind",
+            "expr",
+            "tags"
+          ],
+          "additionalProperties": false
+        }
+      ]
+    },
+    "attr": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "static"
+            },
+            "name": {
+              "type": "string"
+            },
+            "value": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "kind",
+            "name",
+            "value"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "expr"
+            },
+            "name": {
+              "type": "string"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            },
+            "when": {
+              "$ref": "#/$defs/expr"
+            },
+            "keepEmpty": {
+              "type": "boolean"
+            }
+          },
+          "required": [
+            "kind",
+            "name",
+            "expr"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "bool"
+            },
+            "name": {
+              "type": "string"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            }
+          },
+          "required": [
+            "kind",
+            "name",
+            "expr"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "class"
+            },
+            "spec": {
+              "$ref": "#/$defs/classSpec"
+            }
+          },
+          "required": [
+            "kind"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "rest"
+            }
+          },
+          "required": [
+            "kind"
+          ],
+          "additionalProperties": false
+        }
+      ]
+    },
+    "node": {
+      "oneOf": [
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "element"
+            },
+            "tag": {
+              "$ref": "#/$defs/tag"
+            },
+            "attrs": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/attr"
+              }
+            },
+            "children": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            },
+            "void": {
+              "type": "boolean"
+            }
+          },
+          "required": [
+            "kind",
+            "tag",
+            "attrs",
+            "children"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "slot"
+            }
+          },
+          "required": [
+            "kind"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "text"
+            },
+            "expr": {
+              "$ref": "#/$defs/expr"
+            }
+          },
+          "required": [
+            "kind",
+            "expr"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "when"
+            },
+            "test": {
+              "$ref": "#/$defs/expr"
+            },
+            "then": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            },
+            "else": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            }
+          },
+          "required": [
+            "kind",
+            "test",
+            "then"
+          ],
+          "additionalProperties": false
+        },
+        {
+          "type": "object",
+          "properties": {
+            "kind": {
+              "const": "forEach"
+            },
+            "itemsProp": {
+              "type": "string"
+            },
+            "body": {
+              "type": "array",
+              "items": {
+                "$ref": "#/$defs/node"
+              }
+            }
+          },
+          "required": [
+            "kind",
+            "itemsProp",
+            "body"
+          ],
+          "additionalProperties": false
+        }
+      ]
+    },
+    "prop": {
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "type": {
+          "enum": [
+            "string",
+            "bool",
+            "int",
+            "attrs",
+            "children",
+            "items"
+          ]
+        },
+        "cva": {
+          "type": "boolean"
+        },
+        "cvaKey": {
+          "type": "string"
+        },
+        "enumValues": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "default": {
+          "type": [
+            "string",
+            "number",
+            "boolean"
+          ]
+        },
+        "passthrough": {
+          "type": "boolean"
+        },
+        "domName": {
+          "type": "string"
+        },
+        "itemsOf": {
+          "type": "string"
+        },
+        "goType": {
+          "type": "string"
+        },
+        "docs": {
+          "type": "string"
+        }
+      },
+      "required": [
+        "name",
+        "type"
+      ],
+      "additionalProperties": false
+    },
+    "part": {
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string",
+          "pattern": "^[A-Z][A-Za-z0-9]*$"
+        },
+        "docs": {
+          "type": "string"
+        },
+        "props": {
+          "type": "array",
+          "items": {
+            "$ref": "#/$defs/prop"
+          }
+        },
+        "derived": {
+          "type": "object",
+          "additionalProperties": {
+            "$ref": "#/$defs/expr"
+          }
+        },
+        "render": {
+          "$ref": "#/$defs/node"
+        },
+        "recipeId": {
+          "type": "string"
+        },
+        "classes": {
+          "$ref": "#/$defs/classSpec"
+        },
+        "asChild": {
+          "type": "boolean"
+        },
+        "slots": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "name": {
+                "type": "string"
+              },
+              "docs": {
+                "type": "string"
+              },
+              "args": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                }
+              }
+            },
+            "required": [
+              "name"
+            ],
+            "additionalProperties": false
+          }
+        },
+        "events": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "name": {
+                "type": "string"
+              },
+              "payload": {
+                "type": "string"
+              },
+              "docs": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "name"
+            ],
+            "additionalProperties": false
+          }
+        },
+        "a11y": {
+          "type": "object",
+          "properties": {
+            "roots": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "roles": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "aria": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "name": {
+                    "type": "string"
+                  },
+                  "kind": {
+                    "enum": [
+                      "static",
+                      "expr",
+                      "bool"
+                    ]
+                  },
+                  "value": {
+                    "type": "string"
+                  }
+                },
+                "required": [
+                  "name",
+                  "kind"
+                ],
+                "additionalProperties": false
+              }
+            },
+            "keyboard": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "notes": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "roots",
+            "roles",
+            "aria",
+            "keyboard"
+          ],
+          "additionalProperties": false
+        },
+        "data": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "name": {
+                "type": "string"
+              },
+              "kind": {
+                "enum": [
+                  "static",
+                  "expr",
+                  "bool"
+                ]
+              },
+              "value": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "name",
+              "kind"
+            ],
+            "additionalProperties": false
+          }
+        },
+        "tokens": {
+          "type": "array",
+          "items": {
+            "type": "string",
+            "pattern": "^--[a-z0-9-]+$"
+          }
+        }
+      },
+      "required": [
+        "name",
+        "docs",
+        "props",
+        "render",
+        "slots",
+        "events",
+        "a11y",
+        "data",
+        "tokens"
+      ],
+      "additionalProperties": false
+    },
+    "portableFlag": {
+      "oneOf": [
+        {
+          "const": true
+        },
+        {
+          "type": "object",
+          "properties": {
+            "portable": {
+              "const": false
+            },
+            "reason": {
+              "type": "string",
+              "minLength": 8
+            }
+          },
+          "required": [
+            "portable",
+            "reason"
+          ],
+          "additionalProperties": false
+        }
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/xgen/schema/schemas/variants.schema.json b/xgen/schema/schemas/variants.schema.json
new file mode 100644
index 0000000..1bca564
--- /dev/null
+++ b/xgen/schema/schemas/variants.schema.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://xgen.dev/schemas/variants.schema.json",
+  "title": "xgen variants.json (CVA-style recipe)",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "id": {
+      "type": "string"
+    },
+    "base": {
+      "type": "string"
+    },
+    "keys": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "uniqueItems": true
+    },
+    "defaults": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "byKey": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": {
+          "type": "string"
+        }
+      }
+    },
+    "compound": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "class": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "class"
+        ],
+        "additionalProperties": {
+          "type": "string"
+        }
+      }
+    }
+  },
+  "required": [
+    "id",
+    "base",
+    "keys",
+    "defaults",
+    "byKey"
+  ],
+  "additionalProperties": false
+}
\ No newline at end of file
diff --git a/xgen/schema/src/codex-blocks.ts b/xgen/schema/src/codex-blocks.ts
new file mode 100644
index 0000000..cb94611
--- /dev/null
+++ b/xgen/schema/src/codex-blocks.ts
@@ -0,0 +1,290 @@
+// The block data manifest (xgen/schema/codex/blocks.json), generated from the sources: every kit block (xgen/specs/blocks,
+// its data bindings, settings, dictionary labels and empty state read from the spec, its organism and the dictionary),
+// every screen spec (the blocks it composes), every magazine template and part (the kit blocks it imports, the data it
+// reads) and every taste screen. By hand, kept from the existing file: `status` (todo/done), `required` / `optional` of a
+// binding, `note` and `emptyMode`. A new block starts as todo; a moved source is followed.
+//   bun run codex:blocks            writes the file
+//   xgen check (group codex)        fails when the file is behind the sources (drift)
+import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import { CODEX_FIELDS } from "../../runtimes/core/assets/app/fields";
+import { xgenPaths } from "./paths";
+
+export const BLOCKS_PATH = join(import.meta.dir, "..", "codex", "blocks.json");
+const XGEN = join(import.meta.dir, "..", "..");
+
+type Json = null | boolean | number | string | Json[] | { [k: string]: Json };
+type Obj = { [k: string]: Json };
+export interface Binding { prop: string; collection?: string; kind: string; record?: string; map?: string; list?: boolean; required?: string[]; optional?: string[] }
+export interface Labels { prop: string; dictionary: string; keys: string[] }
+export interface BlockEntry {
+  id: string; surface: string; spec?: string; source: string; status: "todo" | "done";
+  data?: Binding[]; settings?: string[]; labels?: Labels[]; emptyState?: boolean; emptyMode?: "label" | "omit";
+  uses?: string[]; collections?: string[]; note?: string;
+}
+export interface BlocksDoc { $schema: string; version: string; contract: string; fieldMaps: string; blocks: BlockEntry[] }
+
+/** where the sources are: the xgen folder, the magazine templates and the taste screens */
+export interface BlockSources { xgen: string; workspace: string; magazine: string; taste: string }
+export const blockSources = (xgen = XGEN): BlockSources => {
+  const workspace = join(xgen, "..");
+  return { xgen, workspace, magazine: join(workspace, "apps", "magazine", "src", "templates"), taste: join(workspace, "packages", "taste-screens", "src", "screens") };
+};
+
+const readJson = (f: string): Obj => JSON.parse(readFileSync(f, "utf8")) as Obj;
+const jsonFiles = (dir: string): string[] => (existsSync(dir) ? readdirSync(dir).filter((f) => f.endsWith(".json")).sort().map((f) => join(dir, f)) : []);
+const isObj = (v: Json | undefined): v is Obj => !!v && typeof v === "object" && !Array.isArray(v);
+const at = (o: Json | undefined, path: string): Json | undefined => path.split(".").reduce<Json | undefined>((c, k) => (isObj(c) ? c[k] : undefined), o);
+const same = (a: unknown, b: unknown): boolean => JSON.stringify(a) === JSON.stringify(b);
+
+/** every reference `{ "$": ref }` under a prop value: the dotted prop path (op nodes skipped) and whether it is one record (pick, nth) */
+function refsOf(v: Json | undefined, path: string, one = false, acc: { path: string; ref: string; one: boolean }[] = []) {
+  if (Array.isArray(v)) v.forEach((x) => refsOf(x, path, one, acc));
+  else if (isObj(v)) {
+    if (typeof v.$ === "string") acc.push({ path, ref: v.$, one });
+    else if (typeof v.op === "string") refsOf(v.args, path, one || v.op === "pick" || v.op === "nth", acc);
+    else for (const [k, x] of Object.entries(v)) refsOf(x, path ? `${path}.${k}` : k, one, acc);
+  }
+  return acc;
+}
+
+/** the organism specs by name and every record type they declare */
+function organisms(src: BlockSources) {
+  const byName = new Map<string, Obj>();
+  const records = new Map<string, string[]>();
+  for (const dir of ["organisms", "parts", "patterns"]) for (const f of jsonFiles(xgenPaths(src.xgen).specs(dir))) {
+    const o = readJson(f);
+    byName.set(o.name as string, o);
+    for (const [k, fs] of Object.entries((o.records ?? {}) as Record<string, { name: string }[]>)) records.set(k, fs.map((x) => x.name));
+  }
+  return { byName, records };
+}
+
+// equal maps (page and menuItem): the one named after the binding's kind first ("menu_item" -> menuItem)
+const mapOf = (fields: Json | undefined, kind = ""): string | undefined => {
+  const hits = Object.entries(CODEX_FIELDS).filter(([, m]) => same({ ...m }, fields)).map(([k]) => k);
+  const norm = kind.replace(/_/g, "").toLowerCase();
+  return hits.find((k) => k.toLowerCase() === norm) ?? hits[0];
+};
+
+function kitBlock(file: string, src: BlockSources, orgs: ReturnType<typeof organisms>, dict: Obj): BlockEntry {
+  const s = readJson(file);
+  const sample = (at(s, "sample.props") ?? {}) as Obj;
+  const variantProps = ((s.variants ?? []) as Obj[]).map((v) => (v.props ?? {}) as Obj);
+  const refs = [sample, ...variantProps].flatMap((p) => Object.entries(p).flatMap(([k, v]) => refsOf(v, k)));
+  const specData = (s.data ?? []) as Obj[];
+  const aliases = new Set(specData.map((d) => d.as as string));
+  const data: Binding[] = specData.map((d) => {
+    const r = refs.find((x) => x.ref === d.as);
+    const map = mapOf(d.fields, typeof d.kind === "string" ? d.kind : "");
+    return {
+      prop: r?.path ?? (d.as as string),
+      ...(d.collection ? { collection: d.collection as string } : {}),
+      kind: d.kind as string,
+      ...(d.record ? { record: d.record as string } : {}),
+      ...(map ? { map } : {}),
+      list: !r?.one,
+    };
+  });
+  const org = orgs.byName.get(s.organism as string);
+  const props = ((org?.props ?? []) as { name: string; type: Json }[]);
+  const labels: Labels[] = [];
+  for (const r of refs) {
+    if (!r.ref.startsWith("ui.") || labels.some((l) => l.prop === r.path)) continue;
+    const dictionary = r.ref.slice(3);
+    const value = at(dict, dictionary);
+    const type = props.find((p) => p.name === r.path)?.type;
+    const recordName = isObj(type) ? String(type.record ?? type.ts ?? "") : "";
+    const fields = orgs.records.get(recordName);
+    const strings = isObj(value) ? Object.keys(value).filter((k) => typeof value[k] === "string") : [];
+    labels.push({ prop: r.path, dictionary, keys: fields ? fields.filter((k) => strings.includes(k)) : strings });
+  }
+  const touched = new Set(refs.filter((r) => r.ref.startsWith("ui.") || aliases.has(r.ref)).map((r) => r.path.split(".")[0]!));
+  const settings = props.map((p) => p.name).filter((n) => !touched.has(n));
+  return {
+    id: s.organism as string, surface: "kit-block", spec: s.id as string, source: rel(src, file), status: "todo",
+    data, settings, labels, emptyState: ((s.slots ?? []) as string[]).includes("EmptyState"),
+  };
+}
+
+const rel = (src: BlockSources, f: string): string => relative(src.workspace, f).split("\\").join("/");
+
+function screen(file: string, src: BlockSources, dict: Obj, kitBySpec: Map<string, BlockEntry>): BlockEntry {
+  const s = readJson(file);
+  const uses = new Set<string>();
+  const labels: Labels[] = [];
+  const label = (prop: string, dictionary: string) => {
+    const value = at(dict, dictionary);
+    if (value === undefined || labels.some((l) => l.dictionary === dictionary)) return;
+    labels.push({ prop, dictionary, keys: isObj(value) ? Object.keys(value).filter((k) => typeof value[k] === "string").sort() : [] });
+  };
+  // blocks composed (`block`), dictionary refs (`{ "$": "ui.x" }`) and dictionary keys of menus and columns (`titleKey`, `label`)
+  const walk = (v: Json | undefined, key: string): void => {
+    if (Array.isArray(v)) v.forEach((x) => walk(x, key));
+    else if (isObj(v)) {
+      if (typeof v.block === "string") uses.add(`block.${v.block}`);
+      if (typeof v.$ === "string" && v.$.startsWith("ui.")) label(key, v.$.slice(3));
+      for (const [k, x] of Object.entries(v)) {
+        if ((k === "titleKey" || k === "label") && typeof x === "string" && typeof at(dict, x) === "string") label(k, x);
+        else walk(x, k);
+      }
+    }
+  };
+  walk(s, "");
+  const collections = [isObj(s.source) ? s.source.collection : undefined, ...((s.sources ?? []) as Obj[]).map((x) => x.collection)].filter((c): c is string => typeof c === "string");
+  // the data: a list screen's own source, and the bindings of the blocks it composes (one per collection)
+  const data: Binding[] = [];
+  if (isObj(s.source)) {
+    const map = mapOf(s.source.fields, String(s.source.kind ?? ""));
+    data.push({ prop: "source", collection: String(s.source.collection), kind: String(s.source.kind), record: String(s.source.record ?? ""), ...(map ? { map } : {}), list: true });
+  }
+  for (const u of [...uses].sort()) for (const d of kitBySpec.get(u)?.data ?? [])
+    if (!data.some((x) => x.collection === d.collection && x.map === d.map)) data.push({ ...d, prop: `${kitBySpec.get(u)!.id}.${d.prop}` });
+  // the route table, the URL state and the frame switches are settings of the app, not Codex data
+  const settings = ["routes", "state", "nav", "menu", "frame", "chunks", "requireH1", "nameLandmarks"].filter((k) => s[k] !== undefined);
+  return { id: s.id as string, surface: "xgen-screen", source: rel(src, file), status: "todo", data, settings, labels, emptyState: false, uses: [...uses].sort(),
+    ...(collections.length ? { collections: [...new Set(collections)].sort() } : {}) };
+}
+
+const PARTS = new Set(["header", "footer"]);
+/** the template data (apps/magazine/src/templates/data.ts): `key: fromCodex<Record>(collection, F.map, ...)` per collection */
+function templateData(src: BlockSources): Map<string, { record: string; collection: string; map: string }> {
+  const file = join(src.magazine, "data.ts");
+  const text = existsSync(file) ? readFileSync(file, "utf8") : "";
+  const out = new Map<string, { record: string; collection: string; map: string }>();
+  for (const m of text.matchAll(/^\s*(\w+): (?:rb\()?fromCodex<(\w+)[^>]*>\((?:trail\()?(\w+)\)?, F\.(\w+)/gm)) out.set(m[1]!, { record: m[2]!, collection: m[3]!, map: m[4]! });
+  return out;
+}
+/** a binding of a template: the kind from the fixtures, required = the map's fields every entry has */
+function templateBinding(key: string, d: { record: string; collection: string; map: string }, src: BlockSources): Binding {
+  const file = join(xgenPaths(src.xgen).fixtures, `${d.collection}.json`);
+  const entries = (existsSync(file) ? ((readJson(file).entries ?? []) as Obj[]) : []);
+  const map = (CODEX_FIELDS as Record<string, Record<string, string>>)[d.map] ?? {};
+  const paths = [...new Set(Object.values(map).map((v) => v.split("|")[0]!))];
+  const has = (e: Obj, path: string) => { const v = at(e, path); return v !== undefined && v !== null && v !== ""; };
+  const required = paths.filter((p) => entries.length > 0 && entries.every((e) => has(e, p)));
+  return { prop: `d.${key}`, collection: d.collection, kind: String(entries[0]?.kind ?? ""), record: d.record, map: d.map, list: true,
+    required, optional: paths.filter((p) => !required.includes(p)) };
+}
+function template(file: string, src: BlockSources, kit: Set<string>, dict: Obj, tdata: ReturnType<typeof templateData>): BlockEntry {
+  const text = readFileSync(file, "utf8");
+  const name = file.split("/").pop()!.replace(/\.svelte$/, "");
+  const imported = [...text.matchAll(/import \{([^}]*)\} from "@ui8kit\/svelte-ui"/g)].flatMap((m) => m[1]!.split(",").map((x) => x.trim())).filter(Boolean);
+  // `d.x` (and `dataFor(..).x` in a part) reads a collection of the template data; `d.ui.*` the dictionary
+  const keys = [...new Set([...text.matchAll(/(?:\bd|dataFor\([^)]*\))\.([A-Za-z]+)/g)].map((m) => m[1]!).filter((c) => c !== "ui"))].sort();
+  const collections = [...new Set(keys.map((k) => tdata.get(k)?.collection ?? k))].sort();
+  const data = keys.filter((k) => tdata.has(k)).map((k) => templateBinding(k, tdata.get(k)!, src));
+  const labels: Labels[] = [];
+  for (const m of text.matchAll(/(?:(\w+)=\{)?\bd\.ui\.([A-Za-z0-9_.]+)/g)) {
+    const dictionary = m[2]!;
+    if (labels.some((l) => l.dictionary === dictionary)) continue;
+    const value = at(dict, dictionary);
+    labels.push({ prop: m[1] ?? "ui", dictionary, keys: isObj(value) ? Object.keys(value).filter((k) => typeof value[k] === "string").sort() : [] });
+  }
+  // the deck copy (`c`: brand, title, lead, cta of the taste deck) and the layout props of a part are settings, not Codex data
+  const settings = ["c", ...[...text.matchAll(/let \{ ([^}]*) \}/g)].flatMap((m) => m[1]!.split(",").map((x) => x.trim().split(/[ =]/)[0]!)).filter((x) => x && x !== "c")];
+  const uses = imported.filter((n) => kit.has(n)).sort();
+  return { id: `template.${name}`, surface: PARTS.has(name) ? "magazine-part" : "magazine-template", source: rel(src, file), status: "todo",
+    data, settings: [...new Set(settings)], labels, emptyState: false, uses, collections };
+}
+
+/** the deck parts of a taste screen: deck key -> collection, kind, record type and central map (xgen/runtimes/core/src/decks.ts) */
+const DECK_PARTS: Record<string, [string, string, string, string]> = {
+  stats: ["deckstats", "deck_stat", "DeckStat", "deckStat"], items: ["deckitems", "deck_item", "DeckItem", "deckItem"],
+  plans: ["deckplans", "deck_plan", "DeckPlan", "deckPlan"], quotes: ["deckquotes", "deck_quote", "DeckQuote", "deckQuote"], faq: ["deckfaq", "deck_faq", "DeckFaq", "deckFaq"],
+};
+/** the kit-data adapters (packages/taste-screens/src/kit-data.ts) and the deck key each reads */
+const ADAPTERS: Record<string, string> = { logos: "tags", topics: "tags", features: "items", stats: "stats" };
+/** a taste screen reads one copy deck (`c`): the deck entry's fields and its parts, in the screen and in the parts it draws;
+ *  the attributes it gives a part (TopBar layout, tone, ...) are settings. stats and items are on every deck (decks.ts); a
+ *  screen reads the other parts as `c.x ?? []`, so a deck without them leaves the part out (empty state: omit). */
+function tasteScreen(file: string, src: BlockSources, kit: Set<string>): BlockEntry {
+  const text = readFileSync(file, "utf8");
+  const imported = [...text.matchAll(/import \{([^}]*)\} from "@ui8kit\/svelte-ui"/g)].flatMap((m) => m[1]!.split(",").map((x) => x.trim()));
+  const uses = imported.filter((n) => kit.has(n)).sort();
+  const parts = [...text.matchAll(/import (\w+) from "\.\.\/parts\/([\w-]+)\.svelte"/g)].map((m) => ({ tag: m[1]!, text: readFileSync(join(file, "..", "..", "parts", `${m[2]}.svelte`), "utf8") }));
+  const all = [text, ...parts.map((x) => x.text)].join("\n");
+  const keys = new Set([...all.matchAll(/\bc\.([a-z]+)/g)].map((m) => m[1]!));
+  for (const m of all.matchAll(/\b(\w+)\(c\b/g)) if (ADAPTERS[m[1]!]) keys.add(ADAPTERS[m[1]!]!);
+  const deck = CODEX_FIELDS.deck as Record<string, string>;
+  const head = Object.keys(deck).filter((k) => keys.has(k)).map((k) => deck[k]!.split("|")[0]!);
+  const data: Binding[] = head.length ? [{ prop: "c", collection: "decks", kind: "deck", record: "Deck", map: "deck", list: false, required: [...new Set(head)], optional: [] }] : [];
+  for (const [k, [collection, kind, record, map]] of Object.entries(DECK_PARTS)) if (keys.has(k)) {
+    const paths = Object.values((CODEX_FIELDS as Record<string, Record<string, string>>)[map]!).map((v) => v.split("|")[0]!);
+    data.push({ prop: `c.${k}`, collection, kind, record, map, list: true, required: [...new Set(paths)], optional: [] });
+  }
+  const settings = [...new Set(parts.flatMap((x) => [...text.matchAll(new RegExp(`<${x.tag}\\b([^>]*)>`, "g"))].flatMap((m) => [...m[1]!.matchAll(/(\w+)=/g)].map((a) => `${x.tag}.${a[1]}`))))].sort();
+  return { id: `taste.${file.split("/").pop()!.replace(/\.svelte$/, "")}`, surface: "taste-screen", source: rel(src, file), status: "todo",
+    data, settings, labels: [], emptyState: false, uses, collections: data.map((d) => d.collection!) };
+}
+
+const ORDER: (keyof BlockEntry)[] = ["id", "surface", "spec", "source", "status", "data", "settings", "labels", "emptyState", "emptyMode", "uses", "collections", "note"];
+const ordered = (b: BlockEntry): BlockEntry => Object.fromEntries(ORDER.filter((k) => b[k] !== undefined).map((k) => [k, b[k]])) as unknown as BlockEntry;
+
+/** the hand fields of the existing file carried over: status, note, emptyMode; required / optional by the binding's collection */
+function keep(b: BlockEntry, old: BlockEntry | undefined): BlockEntry {
+  if (!old) return ordered(b);
+  const data = b.data?.map((d) => {
+    const o = old.data?.find((x) => (x.collection ?? x.prop) === (d.collection ?? d.prop));
+    return { ...d, ...(o?.required ? { required: o.required } : {}), ...(o?.optional ? { optional: o.optional } : {}) };
+  });
+  return ordered({ ...b, ...(data ? { data } : {}), status: old.status, ...(old.note ? { note: old.note } : {}),
+    // emptyMode omit: the block leaves the empty part out (no EmptyState slot), which counts as its empty state
+    ...(old.emptyMode ? { emptyMode: old.emptyMode, emptyState: b.emptyState || old.emptyMode === "omit" } : {}) });
+}
+
+export function buildBlocks(src = blockSources(), previous: BlocksDoc | undefined = existsSync(BLOCKS_PATH) ? (JSON.parse(readFileSync(BLOCKS_PATH, "utf8")) as BlocksDoc) : undefined): BlocksDoc {
+  const paths = xgenPaths(src.xgen);
+  const orgs = organisms(src);
+  const dict = readJson(paths.dictionary);
+  const kitFiles = jsonFiles(paths.specs("blocks"));
+  const kitBlocks = kitFiles.map((f) => kitBlock(f, src, orgs, dict));
+  const kit = new Set(kitBlocks.map((b) => b.id));
+  const svelte = (dir: string) => (existsSync(dir) ? readdirSync(dir).filter((f) => f.endsWith(".svelte")).sort().map((f) => join(dir, f)) : []);
+  const tdata = templateData(src);
+  const templates = svelte(src.magazine).map((f) => template(f, src, kit, dict, tdata));
+  // a template has its empty state when every block it composes that reads data has one
+  const kitById = new Map(kitBlocks.map((b) => [b.id, b]));
+  const prevById = new Map((previous?.blocks ?? []).map((b) => [b.id, b]));
+  const emptyOk = (id: string) => { const b = kitById.get(id); const p = prevById.get(id); return !b?.data?.length || !!b.emptyState || p?.emptyMode === "omit"; };
+  for (const t of templates) t.emptyState = (t.uses ?? []).every(emptyOk);
+  const kitBySpec = new Map(kitBlocks.map((b) => [b.spec!, b]));
+  const screens = jsonFiles(paths.specs("screens")).map((f) => screen(f, src, dict, kitBySpec));
+  for (const t of screens) t.emptyState = (t.uses ?? []).every((u) => emptyOk(kitBySpec.get(u)?.id ?? ""));
+  const tastes = svelte(src.taste).map((f) => tasteScreen(f, src, kit));
+  for (const t of tastes) t.emptyState = (t.uses ?? []).every(emptyOk);
+  const fresh = [
+    ...kitBlocks,
+    ...screens,
+    ...templates.filter((t) => t.surface === "magazine-template"),
+    ...templates.filter((t) => t.surface === "magazine-part"),
+    ...tastes,
+  ];
+  // a block is the same block when its id is (a moved file keeps its id; its source follows)
+  const old = new Map((previous?.blocks ?? []).map((b) => [b.id, b]));
+  return {
+    $schema: "./blocks.schema.json",
+    version: previous?.version ?? "0.1.0",
+    contract: "@ui8kit/contract v0.4 (codex manifest: ./manifest.json)",
+    fieldMaps: "xgen/runtimes/core/assets/app/fields.ts",
+    blocks: fresh.map((b) => keep(b, old.get(b.id))),
+  };
+}
+
+export const blocksText = (d: BlocksDoc): string => JSON.stringify(d, null, 2) + "\n";
+
+/** problems when the file on disk is not what the sources generate */
+export function blocksDrift(src = blockSources()): string[] {
+  const now = existsSync(BLOCKS_PATH) ? readFileSync(BLOCKS_PATH, "utf8") : "";
+  if (!now) return ["xgen/schema/codex/blocks.json: missing (run: bun run codex:blocks)"];
+  const want = blocksText(buildBlocks(src, JSON.parse(now) as BlocksDoc));
+  if (now === want) return [];
+  const a = (JSON.parse(now) as BlocksDoc).blocks, b = (JSON.parse(want) as BlocksDoc).blocks;
+  const ids = [...new Set([...a, ...b].map((x) => x.id))].filter((id) => !same(a.find((x) => x.id === id), b.find((x) => x.id === id)));
+  return [`xgen/schema/codex/blocks.json: behind the sources (${ids.slice(0, 8).join(", ")}${ids.length > 8 ? `, +${ids.length - 8}` : ""}); run: bun run codex:blocks`];
+}
+
+if (import.meta.main) {
+  writeFileSync(BLOCKS_PATH, blocksText(buildBlocks()));
+  console.log(`wrote ${BLOCKS_PATH}`);
+}
diff --git a/xgen/schema/src/codex-validate.ts b/xgen/schema/src/codex-validate.ts
new file mode 100644
index 0000000..afb8e7d
--- /dev/null
+++ b/xgen/schema/src/codex-validate.ts
@@ -0,0 +1,40 @@
+// Validates every fixture entry with the @ui8kit/contract v0.4 validator (npm package @ui8kit/contract, a devDependency of
+// xgen/schema) against xgen/schema/codex/manifest.json, and the manifest itself against
+// https://schema.buildy.tw/manifest.schema.json (shipped by the package as @ui8kit/contract/schemas/manifest.schema.json).
+//   bun run codex:validate
+import { readFileSync } from "node:fs";
+import Ajv2020 from "ajv/dist/2020.js";
+import { validateCollectionV04 } from "@ui8kit/contract/validate";
+import { MANIFEST_PATH, loadFixtures, loadTaxonomies } from "./codex";
+
+const manifest = JSON.parse(readFileSync(MANIFEST_PATH, "utf8"));
+const schema = JSON.parse(readFileSync(new URL(import.meta.resolve("@ui8kit/contract/schemas/manifest.schema.json")), "utf8"));
+const ajv = new Ajv2020({ strict: false });
+const okManifest = ajv.validate(schema, manifest);
+const entries = loadFixtures().flatMap((c) => c.entries.map((data, i) => ({ file: `${c.collection}.json#${i}`, data })));
+// the taxonomy bundles: each against taxonomy.schema.json (with term.schema.json), their terms through the validator with the entries
+const schemaOf = (name: string) => JSON.parse(readFileSync(new URL(import.meta.resolve(`@ui8kit/contract/schemas/${name}.schema.json`)), "utf8"));
+const taxonomyAjv = new Ajv2020({ strict: false, validateFormats: false });
+taxonomyAjv.addSchema(schemaOf("term"));
+const validBundle = taxonomyAjv.compile(schemaOf("taxonomy"));
+const bundles = loadTaxonomies();
+const badBundles: string[] = [];
+for (const b of bundles) if (!validBundle(b as unknown)) badBundles.push(`${b.definition.id}: ${JSON.stringify(validBundle.errors)}`);
+const terms = bundles.flatMap((b) => b.terms.map((data, i) => ({ file: `taxonomies/${b.definition.id}.json#${i}`, data })));
+// the core Menu records (one per location and locale) built from the menu_item entries: label = title, url = "/" + slug, the
+// entry as the target, nesting by parent_id and order (xgen/docs/block-data.md, menus)
+type Item = { id: string; locale: string; title: string; slug: string; parent_id?: string; order?: number; metadata?: { location?: { value?: string } } };
+const items = loadFixtures().flatMap((c) => c.entries as unknown as Item[]).filter((e) => (e as { kind?: string }).kind === "menu_item");
+const menuMap = new Map<string, { id: string; location: string; locale: string; items: object[] }>();
+for (const e of items) {
+  const location = e.metadata?.location?.value ?? "main", key = `${location}/${e.locale}`;
+  if (!menuMap.has(key)) menuMap.set(key, { id: `menu-${location}`, location, locale: e.locale, items: [] });
+  menuMap.get(key)!.items.push({ id: e.id, label: e.title, url: `/${e.slug}`, ...(e.parent_id ? { parent_id: e.parent_id } : {}), ...(e.order !== undefined ? { order: e.order } : {}), target: { kind: "menu_item", id: e.id } });
+}
+const menus = [...menuMap.values()].map((data) => ({ file: `menus/${data.id}.${data.locale}`, data }));
+const issues = validateCollectionV04({ entries, terms, menus }, { manifest }) as { code: string; path: string; message: string; severity?: string }[];
+for (const i of issues) console.log(`${i.severity ?? "error"} ${i.code} ${i.path}: ${i.message}`);
+const errors = issues.filter((i) => !i.severity).length, warnings = issues.length - errors;
+for (const b of badBundles) console.log(`error taxonomy ${b}`);
+console.log(`manifest schema: ${okManifest ? "ok" : JSON.stringify(ajv.errors)}; ${entries.length} entries, ${menus.length} menus (${items.length} items), ${manifest.resources.length} kinds, ${bundles.length} taxonomies (${terms.length} terms): ${errors + badBundles.length} errors, ${warnings} warnings`);
+process.exit(okManifest && errors === 0 && badBundles.length === 0 ? 0 : 1);
diff --git a/xgen/schema/src/codex.ts b/xgen/schema/src/codex.ts
new file mode 100644
index 0000000..48cc145
--- /dev/null
+++ b/xgen/schema/src/codex.ts
@@ -0,0 +1,84 @@
+// The Codex v0.4 manifest of the kit's fixtures (xgen/fixtures): one resource per entry kind, its metadata fields
+// inferred from the fixtures. Money fields hold integer minor units (rule fastygo.codex/money) next to a `currency`
+// field; dates are RFC 3339 (type datetime); ids of entries of one other kind become relations.
+// `bun xgen/schema/src/codex.ts` writes xgen/schema/codex/manifest.json; a test keeps the file equal to the fixtures.
+import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { xgenPaths } from "./paths";
+
+export const MONEY_FIELDS = ["price", "compare_at", "yearly", "total", "amount", "freeFrom", "minOrder"] as const;
+export const MANIFEST_PATH = join(import.meta.dir, "..", "codex", "manifest.json");
+const RFC3339 = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/;
+
+type Meta = Record<string, { value: unknown }>;
+export interface Entry { id: string; kind: string; metadata?: Meta }
+export interface Collection { collection: string; kind: string; entries: Entry[] }
+export interface Field { id: string; label: string; type: string; required?: boolean; rules?: { name: string; args?: Record<string, string> }[]; items?: Field; fields?: Field[] }
+export interface Manifest { name: string; version: string; resources: { record: { id: string; label: string; scope: string; description: string; fields: Field[]; relations?: { id: string; source: string; target: string; cardinality: string }[] }; taxonomies?: string[] }[] }
+
+export interface Term { id: string; locale: string; taxonomy_id: string; name: string; slug: string }
+export interface TaxonomyBundle { definition: { id: string; locale: string; label: string; mode: string; assigned_to_kinds: string[] }; terms: Term[] }
+/** the taxonomy bundles of xgen/fixtures/taxonomies (the terms that entries name in `terms`) */
+export function loadTaxonomies(dir = xgenPaths(join(import.meta.dir, "..", "..")).taxonomies): TaxonomyBundle[] {
+  return existsSync(dir) ? readdirSync(dir).filter((f) => f.endsWith(".json")).sort().map((f) => JSON.parse(readFileSync(join(dir, f), "utf8")) as TaxonomyBundle) : [];
+}
+
+export function loadFixtures(dir = xgenPaths(join(import.meta.dir, "..", "..")).fixtures): Collection[] {
+  return readdirSync(dir).filter((f) => f.endsWith(".json")).sort().map((f) => JSON.parse(readFileSync(join(dir, f), "utf8")) as Collection);
+}
+
+const label = (id: string) => id.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/^./, (c) => c.toUpperCase());
+
+function typeOf(id: string, values: unknown[]): Field {
+  const f: Field = { id, label: label(id), type: "json" };
+  const vs = values.filter((v) => v !== null && v !== undefined);
+  if (vs.length && vs.every((v) => typeof v === "boolean")) f.type = "boolean";
+  else if (vs.length && vs.every((v) => typeof v === "number")) {
+    f.type = "number";
+    if (vs.every((v) => Number.isInteger(v))) f.rules = [{ name: "fastygo.codex/integer" }];
+  } else if (vs.length && vs.every((v) => typeof v === "string")) f.type = vs.every((v) => RFC3339.test(v as string)) ? "datetime" : "string";
+  else if (vs.length && vs.every(Array.isArray)) { f.type = "collection"; f.items = typeOf("item", (vs as unknown[][]).flat()); }
+  else if (vs.length && vs.every((v) => typeof v === "object" && !Array.isArray(v))) {
+    f.type = "object";
+    const keys = [...new Set(vs.flatMap((v) => Object.keys(v as object)))].sort();
+    f.fields = keys.map((k) => ({ ...typeOf(k, vs.map((v) => (v as Record<string, unknown>)[k])), ...(vs.every((v) => k in (v as object)) ? { required: true } : {}) }));
+  }
+  return f;
+}
+
+export function buildManifest(cols: Collection[], taxonomies: TaxonomyBundle[] = loadTaxonomies()): Manifest {
+  const byKind = new Map<string, Entry[]>();
+  for (const c of cols) for (const e of c.entries) byKind.set(e.kind, [...(byKind.get(e.kind) ?? []), e]);
+  const kindOfId = new Map<string, string>();
+  for (const [k, es] of byKind) for (const e of es) kindOfId.set(e.id, k);
+  const resources = [...byKind.keys()].sort().map((kind) => {
+    const es = byKind.get(kind)!;
+    const keys = [...new Set(es.flatMap((e) => Object.keys(e.metadata ?? {})))].sort();
+    const relations: { id: string; source: string; target: string; cardinality: string }[] = [];
+    const fields = keys.map((k) => {
+      const values = es.map((e) => e.metadata?.[k]?.value);
+      let f = typeOf(k, values);
+      const strs = values.filter((v): v is string => typeof v === "string");
+      const targets = new Set(strs.map((v) => kindOfId.get(v)));
+      if (f.type === "string" && strs.length && !targets.has(undefined) && targets.size === 1) {
+        f = { id: k, label: label(k), type: "relation" };
+        relations.push({ id: k, source: kind, target: [...targets][0]!, cardinality: "one-to-one" });
+      }
+      if ((MONEY_FIELDS as readonly string[]).includes(k) && keys.includes("currency") && f.type === "number") f.rules = [{ name: "fastygo.codex/money" }];
+      if (es.every((e) => e.metadata?.[k] !== undefined && e.metadata[k]!.value !== null && e.metadata[k]!.value !== "")) f.required = true;
+      return f;
+    });
+    const collections = [...new Set(cols.filter((c) => c.entries.some((e) => e.kind === kind)).map((c) => c.collection))].sort();
+    // the taxonomies a kind's entries may name in `terms` (Manifest Resource.taxonomies)
+    const tax = taxonomies.filter((t) => t.definition.assigned_to_kinds.includes(kind)).map((t) => t.definition.id).sort();
+    return { record: { id: kind, label: label(kind), scope: "workspace", description: `fixtures: ${collections.join(", ")}`, fields, ...(relations.length ? { relations } : {}) }, ...(tax.length ? { taxonomies: tax } : {}) };
+  });
+  return { name: "ui8kit-fixtures", version: "0.4.0", resources };
+}
+
+export const manifestText = (m: Manifest) => JSON.stringify(m, null, 2) + "\n";
+
+if (import.meta.main) {
+  writeFileSync(MANIFEST_PATH, manifestText(buildManifest(loadFixtures())));
+  console.log(`wrote ${MANIFEST_PATH}`);
+}
diff --git a/xgen/schema/src/index.ts b/xgen/schema/src/index.ts
new file mode 100644
index 0000000..3ad07f2
--- /dev/null
+++ b/xgen/schema/src/index.ts
@@ -0,0 +1,26 @@
+// JSON Schemas of xgen and a validator over them. Kinds: spec, variants, organism, screen, app, collection, dictionary, preset.
+import Ajv2020 from "ajv/dist/2020.js";
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+export type SchemaKind = "spec" | "variants" | "organism" | "screen" | "block" | "composed" | "app" | "collection" | "dictionary" | "preset";
+
+const dir = join(import.meta.dir, "..", "schemas");
+export const schemaFiles = (): string[] => readdirSync(dir).filter((f) => f.endsWith(".schema.json")).sort();
+export const schemaPath = (kind: SchemaKind): string => join(dir, `${kind}.schema.json`);
+
+const ajv = new Ajv2020({ allErrors: true, strict: false });
+const compiled = new Map<SchemaKind, ReturnType<typeof ajv.compile>>();
+
+/** error lines (empty when valid) */
+export function validate(kind: SchemaKind, data: unknown): string[] {
+  let fn = compiled.get(kind);
+  if (!fn) {
+    fn = ajv.compile(JSON.parse(readFileSync(schemaPath(kind), "utf8")));
+    compiled.set(kind, fn);
+  }
+  if (fn(data)) return [];
+  return (fn.errors ?? []).map((e) => `${e.instancePath || "/"} ${e.message ?? "invalid"}${e.params && "allowedValues" in e.params ? ` (${(e.params.allowedValues as unknown[]).join("|")})` : ""}`).slice(0, 12);
+}
+export * from "./versions";
+export * from "./paths";
diff --git a/xgen/schema/src/paths.ts b/xgen/schema/src/paths.ts
new file mode 100644
index 0000000..449a994
--- /dev/null
+++ b/xgen/schema/src/paths.ts
@@ -0,0 +1,26 @@
+// Where things live inside the xgen folder. One place, so no package spells a path of another's data on its own.
+import { join } from "node:path";
+
+export interface XgenPaths {
+  root: string;
+  /** specs/<kind>: ui, organisms, parts, patterns, blocks, screens, recipes */
+  specs: (kind: string) => string;
+  fixtures: string;
+  /** fixtures/taxonomies: one Codex v0.4 taxonomy bundle (definition + terms) per file */
+  taxonomies: string;
+  dictionary: string;
+  lucide: string;
+  nonportable: string;
+  docs: string;
+}
+
+export const xgenPaths = (root: string): XgenPaths => ({
+  root,
+  specs: (kind) => join(root, "specs", kind),
+  fixtures: join(root, "fixtures"),
+  taxonomies: join(root, "fixtures", "taxonomies"),
+  dictionary: join(root, "content", "ui", "en.json"),
+  lucide: join(root, "specs", "assets", "lucide-icons.json"),
+  nonportable: join(root, "specs", "_nonportable.json"),
+  docs: join(root, "docs"),
+});
diff --git a/xgen/schema/src/versions.ts b/xgen/schema/src/versions.ts
new file mode 100644
index 0000000..a595661
--- /dev/null
+++ b/xgen/schema/src/versions.ts
@@ -0,0 +1,27 @@
+// Versions of the spec files. Every JSON spec carries `specVersion`; the schemas describe the current one. When a shape changes, raise SPEC_VERSION,
+// add the step from the old version to MIGRATIONS and describe it in xgen/docs/migrations.md; `xgen check` names every file that is not on the current version.
+
+export const SPEC_VERSION = 1;
+
+/** MIGRATIONS[n] turns a spec of version n into version n + 1 (none yet: version 1 is the first) */
+export const MIGRATIONS: Record<number, (spec: Record<string, unknown>) => Record<string, unknown>> = {};
+
+/** why a spec is not on the current version, or undefined when it is */
+export function versionProblem(spec: { specVersion?: unknown }): string | undefined {
+  const v = spec.specVersion;
+  if (typeof v !== "number") return "has no specVersion";
+  if (v === SPEC_VERSION) return undefined;
+  if (v > SPEC_VERSION) return `specVersion ${v} is newer than this xgen understands (${SPEC_VERSION}); update xgen`;
+  return `specVersion ${v} is old (current ${SPEC_VERSION}); migrate it with migrate() from @ui8kit/xgen-schema, see xgen/docs/migrations.md`;
+}
+
+/** a spec brought to the current version, step by step */
+export function migrate(spec: Record<string, unknown>): Record<string, unknown> {
+  let out = spec;
+  for (let v = Number(spec["specVersion"]); v < SPEC_VERSION; v++) {
+    const step = MIGRATIONS[v];
+    if (!step) throw new Error(`no migration from specVersion ${v} to ${v + 1}`);
+    out = { ...step(out), specVersion: v + 1 };
+  }
+  return out;
+}
diff --git a/xgen/schema/test/blocks.test.ts b/xgen/schema/test/blocks.test.ts
new file mode 100644
index 0000000..4f79fc5
--- /dev/null
+++ b/xgen/schema/test/blocks.test.ts
@@ -0,0 +1,210 @@
+// The block data manifest (codex/blocks.json): it covers every kit block, screen and template, and each block marked
+// done reads only fields its kind declares, through the central field map (xgen/runtimes/core/assets/app/fields.ts),
+// from fixtures that pass the @ui8kit/contract v0.4 validator, with no required prop left undefined.
+import { expect, test } from "bun:test";
+import { readdirSync, readFileSync, existsSync } from "node:fs";
+import { join } from "node:path";
+import Ajv2020 from "ajv/dist/2020.js";
+import { validateCollectionV04 } from "@ui8kit/contract/validate";
+import { fromCodex, trail } from "../../runtimes/core/assets/app/core";
+import { CODEX_FIELDS } from "../../runtimes/core/assets/app/fields";
+import { MANIFEST_PATH, loadFixtures, loadTaxonomies, type Field, type Manifest } from "../src/codex";
+
+const codex = join(import.meta.dir, "..", "codex");
+const root = join(import.meta.dir, "..", "..", "..");
+const doc = JSON.parse(readFileSync(join(codex, "blocks.json"), "utf8"));
+const manifest = JSON.parse(readFileSync(MANIFEST_PATH, "utf8")) as Manifest;
+const entrySchema = JSON.parse(readFileSync(new URL(import.meta.resolve("@ui8kit/contract/schemas/entry.schema.json")), "utf8"));
+const coreFields = Object.keys(entrySchema.properties as object);
+const cols = loadFixtures();
+const taxonomies = loadTaxonomies();
+const terms = taxonomies.flatMap((t) => t.terms);
+const ofKind = (kind: string) => cols.flatMap((c) => c.entries).filter((e) => e.kind === kind);
+// the lookups the apps pass to fromCodex (runtime/codex: CODEX)
+const lookups = { media: ofKind("media"), users: ofKind("user"), terms };
+
+interface Binding { prop: string; collection?: string; kind: string; record?: string; map?: string; list?: boolean; required?: string[]; optional?: string[] }
+interface Block { id: string; surface: string; spec?: string; source: string; status: "todo" | "done"; data?: Binding[]; uses?: string[] }
+const blocks = doc.blocks as Block[];
+const done = blocks.filter((b) => b.status === "done");
+
+test("blocks.json matches its JSON Schema", () => {
+  const ajv = new Ajv2020({ allErrors: true, strict: false });
+  const ok = ajv.validate(JSON.parse(readFileSync(join(codex, "blocks.schema.json"), "utf8")), doc);
+  expect(ok ? [] : ajv.errors).toEqual([]);
+});
+
+test("blocks.json lists every kit block, screen spec and magazine template once, with a source that exists", () => {
+  const ids = blocks.map((b) => b.id);
+  expect(new Set(ids).size).toBe(ids.length);
+  const specIds = (dir: string) => readdirSync(join(root, dir)).filter((f) => f.endsWith(".json")).map((f) => JSON.parse(readFileSync(join(root, dir, f), "utf8")).id as string);
+  const listed = new Set(blocks.map((b) => b.spec ?? b.id));
+  for (const id of [...specIds("xgen/specs/blocks"), ...specIds("xgen/specs/screens")]) expect([id, listed.has(id)]).toEqual([id, true]);
+  // the magazine templates exist only in the codegen-x monorepo; a standalone checkout (ui8kit/codegen) lists none
+  const magazine = join(root, "apps/magazine/src/templates");
+  if (existsSync(magazine)) for (const f of readdirSync(magazine).filter((f) => f.endsWith(".svelte"))) expect(ids).toContain(`template.${f.replace(/\.svelte$/, "")}`);
+  for (const b of blocks) expect([b.id, readFileSync(join(root, b.source)).length > 0]).toEqual([b.id, true]);
+});
+
+// a template, part or screen is done only when every kit block it composes is done (its data reaches it through those blocks)
+test("a done template, part or screen uses only done blocks", () => {
+  const status = new Map(blocks.map((b) => [b.id, b.status]));
+  const bySpec = new Map(blocks.filter((b) => b.spec).map((b) => [b.spec!, b.status]));
+  for (const b of done.filter((x) => x.surface !== "kit-block"))
+    for (const u of b.uses ?? []) expect([b.id, u, status.get(u) ?? bySpec.get(u) ?? "done"]).toEqual([b.id, u, "done"]);
+});
+
+const fieldOf = (kind: string, path: string): Field | string | undefined => {
+  const meta = /^metadata\.([A-Za-z0-9_]+)\.value$/.exec(path);
+  if (!meta) return coreFields.includes(path) ? path : undefined;
+  return manifest.resources.find((r) => r.record.id === kind)?.record.fields.find((f) => f.id === meta[1]);
+};
+
+// one set of tests per distinct binding: the 146 taste screens share a handful of deck bindings
+const seenBinding = new Set<string>();
+for (const b of done) for (const d of b.data ?? []) {
+  const bindingKey = JSON.stringify([b.spec ? b.id : "", d]);
+  if (seenBinding.has(bindingKey)) continue;
+  seenBinding.add(bindingKey);
+  const map = (CODEX_FIELDS as Record<string, Record<string, string>>)[d.map ?? ""];
+  const entries = cols.find((c) => c.collection === d.collection)?.entries ?? [];
+
+  test(`${b.id}.${d.prop}: every field path is a core entry field or a metadata field of kind "${d.kind}"`, () => {
+    expect(manifest.resources.map((r) => r.record.id)).toContain(d.kind);
+    for (const p of [...(d.required ?? []), ...(d.optional ?? [])]) expect([p, fieldOf(d.kind, p) !== undefined]).toEqual([p, true]);
+  });
+
+  test(`${b.id}.${d.prop}: the central map "${d.map}" covers the required fields and equals the map of the xgen spec`, () => {
+    expect(map).toBeDefined();
+    const paths = Object.values(map!).map((p) => p.split("|")[0]);
+    for (const p of d.required ?? []) expect([p, paths.includes(p)]).toEqual([p, true]);
+    if (b.spec) {
+      const spec = JSON.parse(readFileSync(join(root, b.source), "utf8"));
+      const own = (spec.data as { as: string; collection?: string; kind?: string; fields: Record<string, string> }[]).find((x) => x.as === d.collection || x.as === d.prop || (x.collection === d.collection && x.kind === d.kind));
+      expect(own?.fields).toEqual({ ...map! });
+    }
+  });
+
+  test(`${b.id}.${d.prop}: fixtures of "${d.collection}" pass the contract validator and map with no required prop undefined`, () => {
+    expect(entries.length).toBeGreaterThan(0);
+    for (const e of entries) expect(e.kind).toBe(d.kind);
+    const termFiles = terms.map((data, i) => ({ file: `taxonomies#${i}`, data }));
+    // the other collections ride along so a relation (jobs -> departments) resolves; only this collection's issues count
+    const others = cols.filter((c) => c.collection !== d.collection).flatMap((c) => c.entries.map((data, i) => ({ file: `${c.collection}.json#${i}`, data })));
+    const issues = validateCollectionV04({ entries: [...entries.map((data, i) => ({ file: `${d.collection}.json#${i}`, data })), ...others], terms: termFiles }, { manifest }) as { severity?: string; path?: string }[];
+    expect(issues.filter((i) => !i.severity && String(i.path ?? "").startsWith(`${d.collection}.json`))).toEqual([]);
+    const rows = fromCodex<Record<string, unknown>>(entries, map!, lookups);
+    // `slug|route` is undefined by design where the app gives no route (no link): not a missing field
+    const requiredProps = Object.entries(map!).filter(([, p]) => !p.endsWith("|route") && (d.required ?? []).includes(p.split("|")[0]!)).map(([k]) => k);
+    for (const [i, r] of rows.entries()) for (const k of requiredProps) expect([entries[i]!.id, k, r[k] === undefined || r[k] === null]).toEqual([entries[i]!.id, k, false]);
+  });
+}
+
+test("every label of a done block is a key of the dictionary (xgen/content/ui/en.json), not a field of an entry", () => {
+  const dict = JSON.parse(readFileSync(join(root, "xgen/content/ui/en.json"), "utf8"));
+  const at = (path: string): unknown => path.split(".").reduce<unknown>((c, k) => (c && typeof c === "object" ? (c as Record<string, unknown>)[k] : undefined), dict);
+  for (const b of done) for (const l of (b as unknown as { labels: { dictionary: string; keys: string[] }[] }).labels) {
+    const v = at(l.dictionary);
+    if (l.keys.length === 0) expect([l.dictionary, typeof v]).toEqual([l.dictionary, "string"]);
+    for (const k of l.keys) expect([l.dictionary, k, typeof (v as Record<string, unknown>)?.[k]]).toEqual([l.dictionary, k, "string"]);
+  }
+});
+
+test("done blocks: an empty state with its text from the dictionary (labels key or prop empty), or left out (emptyMode omit)", () => {
+  // a template or part draws no list of its own: its blocks carry the empty state (emptyState: all of them have one)
+  for (const b of done.filter((x) => (x.data ?? []).length > 0 && x.surface !== "kit-block")) expect([b.id, (b as unknown as { emptyState: boolean }).emptyState]).toEqual([b.id, true]);
+  for (const b of done.filter((x) => (x.data ?? []).length > 0 && x.surface === "kit-block")) {
+    // a block that reads no collection has nothing to be empty
+    // label: the text from the dictionary (a labels key `empty` or a prop `empty`); omit: the empty part is left out
+    const x = b as unknown as { emptyState: boolean; emptyMode?: "label" | "omit"; labels: { prop: string; keys: string[] }[] };
+    const labelled = x.labels.some((l) => l.keys.includes("empty") || l.prop === "empty");
+    expect([b.id, x.emptyState, x.emptyMode === "omit" || labelled]).toEqual([b.id, true, true]);
+  }
+});
+
+test("media: every featured_media_id names a published media entry whose file is a base64 data URI; the map turns it into that file", () => {
+  const media = ofKind("media");
+  expect(media.length).toBeGreaterThan(0);
+  const pictured = cols.flatMap((c) => c.entries).filter((e) => (e as { featured_media_id?: string }).featured_media_id);
+  expect(pictured.length).toBeGreaterThan(0);
+  for (const e of pictured) expect([e.id, media.some((m) => m.id === (e as { featured_media_id?: string }).featured_media_id)]).toEqual([e.id, true]);
+  // fixtures carry placeholders only: a base64 data URI, never an external or file URL; a real app resolves its own (opts.media)
+  for (const m of media) {
+    expect([m.id, (m as { status?: string }).status]).toEqual([m.id, "published"]);
+    expect([m.id, /^data:image\/[a-z+.-]+;base64,[A-Za-z0-9+/]+=*$/.test(m.metadata!.file!.value as string)]).toEqual([m.id, true]);
+  }
+  const products = cols.find((c) => c.collection === "products")!.entries;
+  const rows = fromCodex<{ id: string; image?: string; href?: string }>(products, CODEX_FIELDS.product, lookups);
+  for (const [i, r] of rows.entries()) {
+    const id = (products[i] as { featured_media_id?: string }).featured_media_id;
+    expect(r.image).toBe(id ? (media.find((m) => m.id === id)!.metadata!.file!.value as string) : undefined);
+  }
+  // a draft media entry gives no file (the placeholder)
+  expect(fromCodex<{ image?: string }>(products, CODEX_FIELDS.product, { ...lookups, media: media.map((m) => ({ ...m, status: "draft" })) }).every((r) => r.image === undefined)).toBe(true);
+  // routes: a link only where the app routes the kind; the magazine has none by design (a showcase: no links at all)
+  expect(fromCodex<{ href?: string }>(products, CODEX_FIELDS.product, lookups).every((r) => r.href === undefined)).toBe(true);
+  const routed = fromCodex<{ href?: string }>(products, CODEX_FIELDS.product, { ...lookups, routes: { product: "#/product/{slug}" } });
+  for (const [i, r] of routed.entries()) expect(r.href).toBe(`#/product/${(products[i] as unknown as { slug: string }).slug}`);
+});
+
+test("figures: every stat value is a number (unit in metadata.unit), formatted in the locale by the map", () => {
+  const stats = cols.find((c) => c.collection === "stats")!.entries;
+  for (const e of stats) expect([e.id, typeof e.metadata!.value!.value]).toEqual([e.id, "number"]);
+  const rows = fromCodex<{ id: string; value: string }>(stats, CODEX_FIELDS.stat, lookups);
+  expect(rows.map((r) => r.value)).toEqual(["12,400", "99.99%", "3,200", "0.8s"]);
+  expect(fromCodex<{ value: string }>(stats, CODEX_FIELDS.stat, { locale: "de" })[0]!.value).toBe("12.400");
+});
+
+test("breadcrumbs: the crumbs are pages chained by parent_id from the root, in that order; no route, no href", () => {
+  const crumbs = cols.find((c) => c.collection === "crumbs")!.entries as { id: string; kind: string; parent_id?: string }[];
+  expect(crumbs.every((e) => e.kind === "page")).toBe(true);
+  expect(crumbs[0]!.parent_id).toBeUndefined();
+  for (let i = 1; i < crumbs.length; i++) expect([crumbs[i]!.id, crumbs[i]!.parent_id]).toEqual([crumbs[i]!.id, crumbs[i - 1]!.id]);
+  expect(trail(crumbs).map((e) => e.id)).toEqual(crumbs.map((e) => e.id));
+  expect(fromCodex<{ href?: string }>(crumbs, CODEX_FIELDS.page, lookups).every((r) => r.href === undefined)).toBe(true);
+});
+
+test("faq: the category is the slug of the faq_category term, and every tab value is such a slug (or all)", () => {
+  const faq = cols.find((c) => c.collection === "faq")!.entries;
+  const slugs = taxonomies.find((t) => t.definition.id === "faq_category")!.terms.map((t) => t.slug);
+  for (const r of fromCodex<{ id: string; category?: string }>(faq, CODEX_FIELDS.faq, lookups)) expect([r.id, slugs.includes(r.category ?? "")]).toEqual([r.id, true]);
+  for (const t of cols.find((c) => c.collection === "faqtabs")!.entries) expect(["", ...slugs]).toContain(t.metadata!.value!.value as string);
+});
+
+test("terms and authors: every term ref names a term of a taxonomy assigned to the kind, every author_id a user; the maps print their names", () => {
+  for (const t of taxonomies) for (const term of t.terms) expect([term.id, term.taxonomy_id]).toEqual([term.id, t.definition.id]);
+  const users = ofKind("user");
+  for (const e of cols.flatMap((c) => c.entries)) {
+    for (const r of (e as { terms?: { taxonomy: string; term_id: string }[] }).terms ?? []) {
+      const t = taxonomies.find((x) => x.definition.id === r.taxonomy);
+      expect([e.id, r.term_id, t?.definition.assigned_to_kinds.includes(e.kind), t?.terms.some((x) => x.id === r.term_id)]).toEqual([e.id, r.term_id, true, true]);
+    }
+    const author = (e as { author_id?: string }).author_id;
+    if (author) expect([e.id, users.some((u) => u.id === author)]).toEqual([e.id, true]);
+  }
+  for (const [kind, collection] of [["post", "posts"], ["product", "products"], ["review", "reviews"]] as const) {
+    const entries = cols.find((c) => c.collection === collection)!.entries;
+    const rows = fromCodex<{ category?: string; author?: string }>(entries, CODEX_FIELDS[kind], lookups);
+    for (const [i, r] of rows.entries()) {
+      if ("category" in CODEX_FIELDS[kind]) expect([entries[i]!.id, typeof r.category]).toEqual([entries[i]!.id, "string"]);
+      if ("author" in CODEX_FIELDS[kind]) expect([entries[i]!.id, typeof r.author]).toEqual([entries[i]!.id, "string"]);
+    }
+  }
+  // the post topics filter by the category name: every topic value is the name of a term of the taxonomy category
+  const names = taxonomies.find((t) => t.definition.id === "category")!.terms.map((t) => t.name);
+  for (const t of cols.find((c) => c.collection === "topics")?.entries ?? []) if (t.metadata?.value?.value) expect(names).toContain(t.metadata.value.value as string);
+});
+
+test("old price: compare_at is integer minor units in the currency of the entry, and some products are on sale", () => {
+  const products = cols.find((c) => c.collection === "products")!.entries;
+  const sale = products.filter((e) => e.metadata?.compare_at !== undefined);
+  expect(sale.length).toBeGreaterThan(0);
+  for (const e of sale) {
+    expect(Number.isSafeInteger(e.metadata!.compare_at!.value)).toBe(true);
+    expect((e.metadata!.compare_at!.value as number) > (e.metadata!.price!.value as number)).toBe(true);
+  }
+});
+
+test("the pilot blocks and the step 4 blocks are done", () => {
+  expect(done.map((b) => b.id).sort()).toEqual(expect.arrayContaining(["FaqList", "PageTrail", "PostHeader", "PricingTiers", "ProductDetail", "ProductGrid", "ReviewList", "StatsBand"]));
+});
diff --git a/xgen/schema/test/codex-blocks.test.ts b/xgen/schema/test/codex-blocks.test.ts
new file mode 100644
index 0000000..91c75b8
--- /dev/null
+++ b/xgen/schema/test/codex-blocks.test.ts
@@ -0,0 +1,47 @@
+// `bun run codex:blocks`: blocks.json is generated from the sources; the hand fields (status, required / optional, note,
+// emptyMode) survive a regeneration, a new block starts as todo and a moved source is followed.
+import { expect, test } from "bun:test";
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { BLOCKS_PATH, blocksDrift, blocksText, buildBlocks, type BlocksDoc } from "../src/codex-blocks";
+
+const doc = JSON.parse(readFileSync(BLOCKS_PATH, "utf8")) as BlocksDoc;
+
+test("blocks.json equals what the sources generate (no drift)", () => {
+  expect(blocksDrift()).toEqual([]);
+  expect(readFileSync(BLOCKS_PATH, "utf8")).toBe(blocksText(buildBlocks(undefined, doc)));
+});
+
+test("a block missing from the previous file appears as todo with its bindings from the spec", () => {
+  const prev = { ...doc, blocks: doc.blocks.filter((b) => b.id !== "ProductGrid") };
+  const b = buildBlocks(undefined, prev).blocks.find((x) => x.id === "ProductGrid")!;
+  expect(b.status).toBe("todo");
+  expect(b.source).toBe("xgen/specs/blocks/products.json");
+  expect(b.data?.[0]).toMatchObject({ prop: "products", collection: "products", kind: "product", map: "product", list: true });
+  expect(b.data?.[0]?.required).toBeUndefined();
+});
+
+test("status, required / optional, note and emptyMode are kept; source, bindings, settings and labels follow the sources", () => {
+  const prev = structuredClone(doc);
+  const pt = prev.blocks.find((x) => x.id === "PageTrail")!;
+  pt.source = "xgen/specs/blocks/old-place.json";
+  pt.settings = ["stale"];
+  pt.note = "kept";
+  const tiers = prev.blocks.find((x) => x.id === "PricingTiers")!;
+  tiers.status = "todo";
+  const next = buildBlocks(undefined, prev).blocks;
+  const n = next.find((x) => x.id === "PageTrail")!;
+  expect([n.source, n.status, n.note, n.emptyMode, n.emptyState]).toEqual(["xgen/specs/blocks/pagetrail.json", "done", "kept", "omit", true]);
+  expect(n.settings).not.toContain("stale");
+  expect(n.data?.find((d) => d.collection === "crumbs")?.required).toEqual(["id", "title"]);
+  expect(next.find((x) => x.id === "PricingTiers")!.status).toBe("todo");
+});
+
+test("every surface is generated: 92 kit blocks, 15 screens, 10 templates + 2 parts, the taste screens (in the monorepo)", () => {
+  const count = (s: string) => doc.blocks.filter((b) => b.surface === s).length;
+  // the magazine templates and taste screens are surfaces of the codegen-x monorepo only; a standalone checkout has kit blocks and screens
+  const monorepo = existsSync(join(import.meta.dir, "..", "..", "..", "apps", "magazine"));
+  expect([count("kit-block"), count("xgen-screen"), count("magazine-template"), count("magazine-part")]).toEqual(monorepo ? [92, 15, 10, 2] : [92, 15, 0, 0]);
+  if (monorepo) expect(count("taste-screen")).toBeGreaterThan(100);
+  else expect(count("taste-screen")).toBe(0);
+});
diff --git a/xgen/schema/test/codex.test.ts b/xgen/schema/test/codex.test.ts
new file mode 100644
index 0000000..b42b826
--- /dev/null
+++ b/xgen/schema/test/codex.test.ts
@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { MANIFEST_PATH, MONEY_FIELDS, buildManifest, loadFixtures, manifestText } from "../src/codex";
+
+const cols = loadFixtures();
+const RFC3339 = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/;
+
+test("the Codex manifest is generated from the fixtures (bun xgen/schema/src/codex.ts)", () => {
+  expect(readFileSync(MANIFEST_PATH, "utf8")).toBe(manifestText(buildManifest(cols)));
+});
+
+test("money: integer minor units next to an ISO 4217 currency", () => {
+  for (const c of cols) for (const e of c.entries) for (const k of MONEY_FIELDS) {
+    const v = e.metadata?.[k]?.value;
+    if (v === undefined) continue;
+    expect([c.collection, e.id, k, Number.isSafeInteger(v)]).toEqual([c.collection, e.id, k, true]);
+    expect(String(e.metadata?.currency?.value)).toMatch(/^[A-Z]{3}$/);
+  }
+});
+
+test("dates are RFC 3339; the UI formats them (|date, |ago)", () => {
+  const dated: Record<string, string> = { posts: "date", orders: "date", reviews: "date", activity: "time", testimonials: "time", jobs: "posted" };
+  for (const [col, k] of Object.entries(dated)) for (const e of cols.find((c) => c.collection === col)!.entries) expect(String(e.metadata?.[k]?.value)).toMatch(RFC3339);
+});
+
+test("every fixture kind is a manifest resource with every metadata key", () => {
+  const m = buildManifest(cols);
+  for (const c of cols) for (const e of c.entries) {
+    const r = m.resources.find((x) => x.record.id === e.kind);
+    expect(r).toBeDefined();
+    for (const k of Object.keys(e.metadata ?? {})) expect(r!.record.fields.map((f) => f.id)).toContain(k);
+  }
+});
diff --git a/xgen/schema/test/schema.test.ts b/xgen/schema/test/schema.test.ts
new file mode 100644
index 0000000..bf156f9
--- /dev/null
+++ b/xgen/schema/test/schema.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from "bun:test";
+import { schemaFiles, validate } from "../src/index";
+
+test("every kind has its schema file", () => {
+  expect(schemaFiles()).toEqual(["app", "block", "collection", "composed", "dictionary", "organism", "preset", "screen", "spec", "variants"].map((k) => `${k}.schema.json`));
+});
+
+test("an app is accepted when whole and rejected with a path when a field is wrong", () => {
+  const app = { specVersion: 1, name: "x-svelte", runtime: "svelte", screens: ["screen.x"], title: "X", port: 5300, locale: "en", theme: "light" };
+  expect(validate("app", app)).toEqual([]);
+  const bad = validate("app", { ...app, runtime: "angular" });
+  expect(bad.length).toBeGreaterThan(0);
+  expect(bad.join("\n")).toContain("runtime");
+});
+
+test("an unknown field is rejected (schemas are closed)", () => {
+  expect(validate("app", { specVersion: 1, name: "x", runtime: "react", screens: [], title: "X", port: 1, locale: "en", theme: "light", extra: true }).length).toBeGreaterThan(0);
+});
+
+test("versions: the current one passes, an old or a newer one is named, a migration needs a step", async () => {
+  const { SPEC_VERSION, versionProblem, migrate } = await import("../src/versions");
+  expect(versionProblem({ specVersion: SPEC_VERSION })).toBeUndefined();
+  expect(versionProblem({})).toContain("no specVersion");
+  expect(versionProblem({ specVersion: SPEC_VERSION + 1 })).toContain("newer");
+  expect(versionProblem({ specVersion: 0 })).toContain("old");
+  expect(() => migrate({ specVersion: 0 })).toThrow("no migration from specVersion 0");
+  expect(migrate({ specVersion: SPEC_VERSION, a: 1 })).toEqual({ specVersion: SPEC_VERSION, a: 1 });
+});
diff --git a/xgen/screens/README.md b/xgen/screens/README.md
new file mode 100644
index 0000000..1b4fd5b
--- /dev/null
+++ b/xgen/screens/README.md
@@ -0,0 +1,14 @@
+# @ui8kit/xgen-screens
+
+Builder of organism and screen structures from primitives: the view IR, bindings, fixtures and content loaders, route and URL-state planning.
+
+Part of xgen (see `../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
+
+## API
+
+- `ir.ts`: the types (`ViewNode`, `Value`, `OrganismSpec`, `ScreenSpec`, `AppSpec`, `CollectionFile`).
+- `build.ts`: `use`, `text`, `when`, `each`, `slot`, `organism`, `outlet`, `ref`, `op`, `cond`, `tpl`, `call`, `sortHeader`.
+- `authoring/`: the PricingCard organism and the Plans screen, written with the builder. `bun run build` stores them as JSON in `xgen/specs`.
+- `validate-view.ts`: `validateOrganism`, `validateScreen`, `contentRefs`.
+- `print.ts`: a `Value` as a TypeScript expression (the same text for every TypeScript runtime).
+- `load.ts`: `loadInputs`, `loadApp`, `findApps`.
diff --git a/xgen/screens/package.json b/xgen/screens/package.json
new file mode 100644
index 0000000..43d5c9d
--- /dev/null
+++ b/xgen/screens/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@ui8kit/xgen-screens",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Builder of organism and screen structures from primitives: the view IR, bindings, fixtures and content loaders, route and URL-state planning.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-schema": "workspace:*",
+    "@ui8kit/xgen-spec": "workspace:*"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/screens/src/authored.ts b/xgen/screens/src/authored.ts
new file mode 100644
index 0000000..bbc8017
--- /dev/null
+++ b/xgen/screens/src/authored.ts
@@ -0,0 +1,42 @@
+// The organisms and screens that are written with the builder (src/authoring) and stored as JSON in xgen/specs.
+// `xgen check` compares the stored JSON with this output; edit the builder, then run `xgen build`.
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { plansScreen } from "./authoring/screens/plans-screen";
+import { parts } from "./authoring/components/parts";
+import { patterns } from "./authoring/components/patterns";
+import { allOrganisms } from "./authoring/blocks/organisms";
+import { framePatterns } from "./authoring/components/frames";
+import { blocks, blocksComposed, siteComposed } from "./authoring/gallery/blocks";
+import { themeComposed } from "./authoring/screens/themes";
+import { catalogComposed } from "./authoring/gallery/catalog";
+import { skinsComposed } from "./authoring/gallery/skins";
+import { presets } from "./authoring/presets";
+
+export const authored = {
+  organisms: allOrganisms,
+  parts,
+  patterns: [...patterns, ...framePatterns],
+  blocks,
+  presets,
+  screens: [plansScreen, siteComposed, blocksComposed, catalogComposed, skinsComposed, ...themeComposed],
+};
+
+/** [folder of specs, list] */
+export const authoredDirs = (): Array<readonly [string, ReadonlyArray<{ id: string }>]> => [["organisms", authored.organisms], ["parts", authored.parts], ["patterns", authored.patterns], ["blocks", authored.blocks], ["presets", authored.presets], ["screens", authored.screens]];
+
+export const stringify = (v: unknown): string => JSON.stringify(v, null, 2) + "\n";
+
+export function writeSpecs(root: string): string[] {
+  const written: string[] = [];
+  for (const [dir, list] of authoredDirs()) {
+    mkdirSync(xgenPaths(root).specs(dir), { recursive: true });
+    for (const spec of list) {
+      const file = join(xgenPaths(root).specs(dir), `${spec.id.split(".")[1]}.json`);
+      writeFileSync(file, stringify(spec));
+      written.push(file);
+    }
+  }
+  return written;
+}
diff --git a/xgen/screens/src/authoring/README.md b/xgen/screens/src/authoring/README.md
new file mode 100644
index 0000000..b272c13
--- /dev/null
+++ b/xgen/screens/src/authoring/README.md
@@ -0,0 +1,17 @@
+# Authoring
+
+The specs written with the builder (`../build.ts`), one folder per tier of the generated packages:
+
+| Folder | What it writes | Generated into |
+|---|---|---|
+| `components/` | parts and patterns: small pieces a block is built from | `packages/*/ui/src/components/` |
+| `blocks/` | organisms: the page sections (`organisms.ts` lists them all) | `packages/*/ui/src/blocks/` |
+| `gallery/` | the block gallery: one sample per variant, the coverage registry | `apps/*/xgen/screens/BlocksScreen*` |
+| `screens/` | composed screens: the theme apps, the plans page | `apps/*/xgen/screens/` |
+| `presets/` | named class sets (block geometry of the default preset) | `packages/*/ui/src/presets/` |
+
+Primitives are not written here: they are JSON specs in `xgen/specs/ui/`.
+The files at the root are shared helpers: `kit.ts` (spec, fields, ts), `ux.ts` (class helpers),
+`forms.ts` and `placeholders.ts`.
+
+Every generated file names its source on line 2 (`Source: ...`). After an edit, run `bun run build`.
diff --git a/xgen/screens/src/authoring/blocks/account.ts b/xgen/screens/src/authoring/blocks/account.ts
new file mode 100644
index 0000000..7d68bbd
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/account.ts
@@ -0,0 +1,84 @@
+// Account organisms: sign-in, sign-up and reset cards, the profile form.
+import { and, cn, cond, eq, ne, ref, text, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { tsOf, toneLite } from "../props";
+import { fid, inputField, kids, switchRow, textField } from "../forms";
+import { authForm } from "../components/auth";
+import { panelSection, wide } from "../components/frames";
+
+const O = "organism.";
+const id = { name: "id", type: "string" as const, required: true };
+
+const socialBlock = (pos: "first" | "last") => when(and(pos === "first" ? eq(ref("social"), "first") : ne(ref("social"), "first"), ne(ref("social"), "none"), ne(ref("mode"), "reset"), ne(ref("mode"), "magic")), [use("Stack", { props: { Gap: "4" }, attrs: { "data-testid": "social" } },
+        use("Group", { props: { Gap: "4", Align: "center" } },
+          use("Separator", { props: { Class: "flex-1" } }),
+          use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(ref("labels.divider"))),
+          use("Separator", { props: { Class: "flex-1" } })),
+        use("Button", { props: { Variant: "outline", Size: "default", Type: "button", Class: "w-full" } }, use("LucideIcon", { props: { Name: "key-round", Size: 16 } }), text(ref("labels.passkey"))),
+        use("Button", { props: { Variant: "outline", Size: "default", Type: "button", Class: "w-full" } }, use("LucideIcon", { props: { Name: "mail", Size: 16 } }), text(ref("labels.magic"))))]);
+
+const authCard = spec(`${O}auth-card`, "AuthCard", "A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button, optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout (card, plain), social (none, show).", {
+  records: { AuthLabels: fields(["name", "string"], ["email", "string"], ["password", "string"], ["remember", "string"], ["forgot", "string"], ["terms", "string"], ["divider", "string"], ["passkey", "string"], ["magic", "string"]) },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "text", type: "string", required: true },
+    { name: "submit", type: "string", required: true },
+    { name: "switchText", type: "string", required: true, docs: "the question before the link to the other mode" },
+    { name: "switchLink", type: "string", required: true },
+    { name: "switchHref", type: "string" },
+    { name: "labels", type: { record: "AuthLabels" }, required: true },
+    { name: "mode", type: tsOf("signin", "signup", "reset", "magic"), default: "signin" },
+    { name: "layout", type: tsOf("card", "plain"), default: "card" },
+    { name: "social", type: tsOf("none", "show", "first"), default: "none", docs: "first: the other sign-in buttons come before the fields" },
+    { name: "level", type: ts("1 | 2"), default: 2 },
+  ],
+  view: [
+    use("Block", { props: { Tag: "section", Class: cn("flex w-full flex-col gap-6", cond(eq(ref("layout"), "card"), "rounded bg-card p-6 inset-ring inset-ring-border", "")) }, attrs: { "aria-labelledby": fid("title"), "data-testid": "auth-card", "data-mode": ref("mode") } },
+      use("Stack", { props: { Gap: "2" } },
+        use("Title", { props: { As: ref("level"), Size: "2xl", Weight: "bold" }, attrs: { id: fid("title") } }, text(ref("title"))),
+        use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("text")))),
+      socialBlock("first"),
+      organism("AuthForm", { id: ref("id"), mode: ref("mode"), labels: ref("labels"), submit: ref("submit") }),
+      socialBlock("last"),
+      use("Text", { props: { Size: "sm", Class: "text-center text-muted-foreground" } }, text(ref("switchText")), text(" "),
+        use("Link", { props: { Href: ref("switchHref"), Variant: "default" }, attrs: { "data-testid": "switch" } }, text(ref("switchLink"))))),
+  ],
+});
+
+const profileForm = spec(`${O}profile-form`, "ProfileForm", "An account settings form: a picture with a change button, name, email, bio and two notification switches, with save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default, muted).", {
+  records: { ProfileLabels: fields(["picture", "string"], ["change", "string"], ["name", "string"], ["email", "string"], ["bio", "string"], ["prefs", "string"], ["updates", "string"], ["alerts", "string"], ["save", "string"], ["cancel", "string"]) },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "text", type: "string", required: true },
+    { name: "labels", type: { record: "ProfileLabels" }, required: true },
+    { name: "layout", type: tsOf("stacked", "split"), default: "stacked" },
+    { name: "avatar", type: tsOf("show", "hide"), default: "show" },
+    { name: "prefs", type: tsOf("show", "hide"), default: "show" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [
+    panelSection(use("Container", { props: { Class: `${wide} py-8` }, attrs: { "data-slot": "container" } },
+      organism("Panel", { title: ref("title"), description: ref("text"), id: ref("id"), className: cn(cond(eq(ref("tone"), "muted"), "bg-muted", "")) }, kids(
+        use("Form", { props: { Method: "dialog", Class: "gap-6" }, attrs: { "data-testid": "profile-form" } },
+          use("Grid", { props: { Cols: cond(eq(ref("layout"), "split"), "1-2", "1"), Class: "items-start gap-8" } },
+            use("Stack", { props: { Gap: "4", Align: "stretch" } },
+              when(eq(ref("avatar"), "show"), [use("Group", { props: { Gap: "4", Align: "center" }, attrs: { "data-testid": "avatar" } },
+                organism("MediaFrame", { alt: ref("labels.picture"), ratio: "1/1", className: "size-16 shrink-0 rounded-full" }),
+                use("Button", { props: { Variant: "outline", Size: "sm", Type: "button" } }, text(ref("labels.change"))))]),
+              inputField("name", "text", ref("labels.name"), "name"),
+              inputField("email", "email", ref("labels.email"), "email"),
+              textField("bio", ref("labels.bio"))),
+            when(eq(ref("prefs"), "show"), [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "prefs" } },
+              use("Title", { props: { As: 3, Size: "base", Weight: "bold" } }, text(ref("labels.prefs"))),
+              switchRow("updates", ref("labels.updates")),
+              switchRow("alerts", ref("labels.alerts")))])),
+          use("Group", { props: { Gap: "2", Class: "flex-wrap" } },
+            use("Button", { props: { Variant: "default", Size: "default", Type: "submit" }, attrs: { "data-testid": "submit" } }, text(ref("labels.save"))),
+            use("Button", { props: { Variant: "outline", Size: "default", Type: "button" } }, text(ref("labels.cancel"))))))))),
+  ],
+});
+
+export const accountOrganisms: OrganismSpec[] = [authForm, authCard, profileForm];
diff --git a/xgen/screens/src/authoring/blocks/checkout.ts b/xgen/screens/src/authoring/blocks/checkout.ts
new file mode 100644
index 0000000..88be596
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/checkout.ts
@@ -0,0 +1,143 @@
+// The checkout and the cart beyond the plain list: the long checkout form beside a sticky order summary, the cart page with a promo code
+// and a free-delivery bar, the cart drawer in its open state, and the product details (an accordion of texts beside a spec list).
+import { and, cond, each, eachAt, eq, len, or, money, mul, ref, str, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { id, ifAny, title, tsOf, toneLite } from "../props";
+import { inputField, kids, textField, checkRow } from "../forms";
+import { heading, muted, strong, strongSpan, surface } from "../ux";
+
+const O = "organism.";
+const step = (n: string, t: string, s: string, ...body: ViewNode[]) =>
+  organism("CheckoutStep", { number: n, title: ref(`labels.${t}`), text: ref(`labels.${s}`), layout: ref("layout") }, kids(...body));
+const summaryCard = (items: string) => organism("CartSummaryCard", { field: tpl("{0}-promo", ref("id")), lines: ref("lines"), rows: ref("rows"), promos: ref("promos"), labels: ref("totals"), items });
+
+const checkoutForm = spec(`${O}checkout-form`, "CheckoutForm", "A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps, beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards: each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.", {
+  typeImports: [{ from: "SlotGrid", names: ["Day"] }, { from: "PaymentOptions", names: ["Payment"] }, { from: "CartList", names: ["CartLine"] }, { from: "OrderSummary", names: ["SummaryRow"] }, { from: "CartSummaryCard", names: ["Promo", "CartSummaryLabels"] }],
+  records: { CheckoutLabels: fields(["contacts", "string"], ["contactsText", "string"], ["name", "string"], ["phone", "string"], ["email", "string"], ["address", "string"], ["addressText", "string"], ["street", "string"], ["house", "string"], ["flat", "string"], ["entrance", "string"], ["floor", "string"], ["comment", "string"], ["slot", "string"], ["slotText", "string"], ["payment", "string"], ["paymentText", "string"], ["consent", "string"], ["submit", "string"], ["legal", "string"]) },
+  props: [
+    id,
+    { name: "title", type: "string", default: "", docs: "section heading; empty: no heading (the page heading names the checkout)" },
+    { name: "days", type: ts("Day[]"), required: true },
+    { name: "payments", type: ts("Payment[]"), required: true },
+    { name: "lines", type: ts("CartLine[]"), required: true },
+    { name: "rows", type: ts("SummaryRow[]"), required: true },
+    { name: "promos", type: ts("Promo[]"), required: true },
+    { name: "labels", type: { record: "CheckoutLabels" }, required: true },
+    { name: "totals", type: ts("CartSummaryLabels"), required: true, docs: "labels of the order summary" },
+    { name: "layout", type: tsOf("cards", "numbered"), default: "cards" },
+    { name: "summary", type: tsOf("aside", "none"), default: "aside" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: "default" }, [
+    use("Box", { props: { Class: "grid grid-cols-1 items-start gap-8 lg:grid-cols-3" } },
+      use("Form", { props: { Method: "dialog", Class: cond(eq(ref("summary"), "aside"), "flex flex-col gap-6 lg:col-span-2", "flex flex-col gap-6 lg:col-span-3") }, attrs: { "data-testid": "checkout-form" } },
+        step("1", "contacts", "contactsText", use("Grid", { props: { Cols: "1-2", Class: "gap-4" } },
+          inputField("name", "text", ref("labels.name"), "name"), inputField("phone", "tel", ref("labels.phone"), "tel"), inputField("email", "email", ref("labels.email"), "email"))),
+        step("2", "address", "addressText",
+          inputField("street", "text", ref("labels.street"), "address-line1"),
+          use("Grid", { props: { Cols: "2-4", Class: "gap-4" } },
+            inputField("house", "text", ref("labels.house")), inputField("flat", "text", ref("labels.flat")), inputField("entrance", "text", ref("labels.entrance")), inputField("floor", "text", ref("labels.floor"))),
+          textField("comment", ref("labels.comment"))),
+        step("3", "slot", "slotText", ifAny("days", [organism("SlotGrid", { days: ref("days"), name: tpl("{0}-slot", ref("id")), item: "plain" })])),
+        step("4", "payment", "paymentText", ifAny("payments", [organism("PaymentOptions", { payments: ref("payments"), name: tpl("{0}-payment", ref("id")), checked: "payment-card" })])),
+        organism("CheckoutSubmit", { id: ref("id"), consent: ref("labels.consent"), submit: ref("labels.submit"), legal: ref("labels.legal") })),
+      when(eq(ref("summary"), "aside"), [use("Box", { props: { Class: "lg:sticky lg:top-8" }, attrs: { "data-testid": "aside" } }, summaryCard("show"))])),
+  ])],
+});
+
+const cartPage = spec(`${O}shopping-cart`, "ShoppingCart", "The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.", {
+  typeImports: [{ from: "CartList", names: ["CartLine", "CartLabels"] }, { from: "OrderSummary", names: ["SummaryRow"] }, { from: "CartSummaryCard", names: ["Promo", "CartSummaryLabels"] }],
+  records: { ShoppingCartLabels: fields(["back", "string"], ["clear", "string"], ["empty", "string"]) },
+  props: [
+    id, title,
+    { name: "lines", type: ts("CartLine[]"), required: true },
+    { name: "rows", type: ts("SummaryRow[]"), required: true },
+    { name: "promos", type: ts("Promo[]"), required: true },
+    { name: "labels", type: ts("CartLabels"), required: true },
+    { name: "totals", type: ts("CartSummaryLabels"), required: true, docs: "labels of the order summary" },
+    { name: "actions", type: { record: "ShoppingCartLabels" }, required: true, docs: "labels of the buttons under the lines, and the empty-cart title" },
+    { name: "layout", type: tsOf("split", "stacked"), default: "split" },
+    { name: "promo", type: tsOf("show", "hide"), default: "show" },
+    { name: "progress", type: tsOf("show", "hide"), default: "show" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: "default" }, [
+    use("Box", { props: { Class: cond(eq(ref("layout"), "split"), "grid grid-cols-1 items-start gap-8 lg:grid-cols-3", "grid grid-cols-1 gap-8") } },
+      use("Stack", { props: { Gap: "4", Align: "stretch", Class: cond(eq(ref("layout"), "split"), "lg:col-span-2", "") }, attrs: { "data-testid": "lines" } },
+        // no lines: EmptyState (title from the labels record, the 12-prop limit leaves no room for an `empty` prop)
+        when(eq(len(ref("lines")), 0), [organism("EmptyState", { icon: "shopping-cart", title: ref("actions.empty") })]),
+        each(ref("lines"), "line", ref("line.id"),
+          use("Group", { props: { Gap: "4", Align: "center", Class: surface("flex-wrap p-4") }, attrs: { "data-testid": "item" } },
+            organism("MediaFrame", { alt: ref("line.name"), ratio: "1/1", className: "size-20 shrink-0" }),
+            use("Stack", { props: { Gap: "0", Class: "min-w-40 flex-1" } }, strong(ref("line.name"), "sm"), muted(ref("line.variant"), "xs"), use("Text", { props: { Size: "sm" } }, text(money(ref("line.price"), ref("line.currency"))))),
+            organism("NumberField", { value: str(ref("line.qty")), name: tpl("{0}-qty-{1}", ref("id"), ref("line.id")), min: "1", label: ref("labels.qty"), decrease: ref("labels.decrease"), increase: ref("labels.increase") }),
+            use("Text", { props: { Size: "base", Weight: "bold", Class: "w-24 text-right" } }, text(money(mul(ref("line.price"), ref("line.qty")), ref("line.currency")))),
+            use("Button", { props: { Variant: "ghost", Size: "sm", Layout: "icon", AriaLabel: ref("labels.remove") }, attrs: { "data-testid": "remove" } }, use("LucideIcon", { props: { Name: "trash", Size: 16 } })))),
+        use("Group", { props: { Gap: "4", Justify: "between", Class: "flex-wrap" } },
+          use("Button", { props: { Variant: "outline", Size: "default" } }, use("LucideIcon", { props: { Name: "arrow-left", Size: 16 } }), text(ref("actions.back"))),
+          use("Button", { props: { Variant: "ghost", Size: "default" } }, text(ref("actions.clear"))))),
+      use("Box", { props: { Class: cond(eq(ref("layout"), "split"), "lg:sticky lg:top-8", "") }, attrs: { "data-testid": "aside" } },
+        organism("CartSummaryCard", { field: tpl("{0}-promo", ref("id")), lines: ref("lines"), rows: ref("rows"), promos: ref("promos"), labels: ref("totals"), promo: ref("promo"), progress: ref("progress") }))),
+  ])],
+});
+
+const cartDrawer = spec(`${O}cart-drawer`, "CartDrawer", "The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).", {
+  typeImports: [{ from: "CartList", names: ["CartLine", "CartLabels"] }, { from: "OrderSummary", names: ["SummaryRow"] }],
+  records: { DrawerLabels: fields(["title", "string"], ["close", "string"], ["progress", "string"], ["empty", "string"], ["emptyText", "string"], ["browse", "string"]) },
+  props: [
+    id,
+    { name: "lines", type: ts("CartLine[]"), required: true },
+    { name: "rows", type: ts("SummaryRow[]"), required: true },
+    { name: "labels", type: ts("CartLabels"), required: true },
+    { name: "drawer", type: { record: "DrawerLabels" }, required: true, docs: "labels of the drawer" },
+    { name: "state", type: tsOf("filled", "empty"), default: "filled" },
+    { name: "media", type: tsOf("image", "none"), default: "image" },
+  ],
+  view: [use("Block", { props: { Tag: "section", Class: "py-8" }, attrs: { "aria-label": ref("drawer.title"), "data-testid": "section" } },
+    use("Container", { props: { Class: "mx-auto w-full max-w-6xl px-4" }, attrs: { "data-slot": "container" } },
+      use("Box", { props: { Class: "flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border" } },
+        use("Box", { props: { Class: "hidden flex-1 flex-col gap-4 p-8 sm:flex" }, attrs: { "aria-hidden": "true" } },
+          use("Box", { props: { Class: "h-8 w-48 rounded bg-background" } }), use("Box", { props: { Class: "h-40 rounded bg-background" } }), use("Box", { props: { Class: "h-40 rounded bg-background" } })),
+        use("Box", { props: { Class: "flex w-full flex-col bg-background shadow-lg sm:max-w-sm" }, attrs: { role: "group", "aria-label": ref("drawer.title"), "data-testid": "drawer" } },
+          use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "border-b border-border p-4" } },
+            use("Title", { props: { As: 2, Size: "lg", Weight: "semibold" } }, text(ref("drawer.title"))),
+            use("Button", { props: { Variant: "ghost", Size: "sm", Layout: "icon", AriaLabel: ref("drawer.close") } }, use("LucideIcon", { props: { Name: "x", Size: 16 } }))),
+          // the empty state: the axis shows it, and so does a cart with no lines (EmptyState with the browse action)
+          when(or(eq(ref("state"), "empty"), eq(len(ref("lines")), 0)),
+            [use("Box", { props: { Class: "flex flex-1 flex-col justify-center p-4" }, attrs: { "data-testid": "empty" } },
+              organism("EmptyState", { icon: "shopping-bag", title: ref("drawer.empty"), text: ref("drawer.emptyText") }, { slots: { action: { args: [], do: [
+                use("Button", { props: { Variant: "outline", Size: "default" } }, text(ref("drawer.browse")))] } } }))],
+            [organism("DrawerLines", { field: tpl("{0}-qty", ref("id")), lines: ref("lines"), rows: ref("rows"), labels: ref("labels"), drawer: ref("drawer"), media: ref("media") })]))))),
+  ],
+});
+
+const productInfo = spec(`${O}product-info`, "ProductInfo", "The details of a product under its buy box: texts in an accordion (native details) beside a card with the specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text open, none), tone.", {
+  records: { Detail: fields(["id", "string"], ["title", "string"], ["text", "string"]), Spec: fields(["id", "string"], ["label", "string"], ["value", "string"]), ProductInfoLabels: fields(["specs", "string"]) },
+  props: [
+    id, title,
+    { name: "details", type: ts("Detail[]"), required: true },
+    { name: "specs", type: ts("Spec[]"), required: true },
+    { name: "labels", type: { record: "ProductInfoLabels" }, required: true },
+    { name: "layout", type: tsOf("split", "stacked"), default: "split" },
+    { name: "expand", type: tsOf("first", "none"), default: "first" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: "default" }, [
+    use("Box", { props: { Class: cond(eq(ref("layout"), "split"), "grid grid-cols-1 items-start gap-8 lg:grid-cols-3", "grid grid-cols-1 gap-8") } },
+      ifAny("details", [use("Stack", { props: { Gap: "0", Align: "stretch", Class: cond(eq(ref("layout"), "split"), "lg:col-span-2", "") }, attrs: { "data-testid": "items" } },
+        eachAt(ref("details"), "d", "i", ref("d.id"),
+          use("Disclosure", { props: { Variant: "item", Open: and(eq(ref("expand"), "first"), eq(ref("i"), 0)) }, attrs: { "data-testid": "item" } },
+            use("Summary", { props: { Variant: "item" } }, strongSpan(ref("d.title"))),
+            use("Text", { props: { Size: "sm", Class: "pb-4 text-muted-foreground" } }, text(ref("d.text"))))))]),
+      ifAny("specs", [use("Stack", { props: { Gap: "4", Align: "stretch", Class: surface("p-6") }, attrs: { "data-testid": "specs" } },
+        heading(ref("labels.specs"), "lg"),
+        use("List", { props: { Tag: "ul", Class: "flex flex-col" } },
+          each(ref("specs"), "s", ref("s.id"),
+            use("ListItem", { props: { Class: "flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0" }, attrs: { "data-testid": "spec" } },
+              use("Inline", { props: { Class: "text-muted-foreground" } }, text(ref("s.label"))), use("Inline", { props: { Class: "font-medium" } }, text(ref("s.value")))))))])),
+  ])],
+});
+
+export const checkoutOrganisms: OrganismSpec[] = [checkoutForm, cartPage, cartDrawer, productInfo];
diff --git a/xgen/screens/src/authoring/blocks/commerce.ts b/xgen/screens/src/authoring/blocks/commerce.ts
new file mode 100644
index 0000000..e1c7bae
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/commerce.ts
@@ -0,0 +1,284 @@
+// Commerce organisms: category navigation, product card and grid, product page, reviews, cart, order summary, order history.
+import { and, at, call, cn, coalesce, cond, each, eq, gt, len, mul, not, money, or, ref, str, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { cardBase, fields, groupFields, spec, ts } from "../kit";
+import { frame, wide } from "../components/frames";
+import { empty, id, ifAny, orEmpty, title, tone, tsOf, toneLite, denseLite, roomyLite } from "../props";
+import { cartTable } from "../components/cart-table";
+import { numberField } from "../components/number-field";
+import { orderRows, statusTone } from "../components/orders";
+import { articleBlockOf } from "../components/landmarks";
+import { productGallery, productPrice } from "../components/product-parts";
+import { currentOf, menuEntry } from "../components/nav";
+
+const O = "organism.";
+const common = { id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density") };
+/** children of an organism that takes `children` */
+const kids = (...n: ViewNode[]) => ({ slots: { children: { args: [] as string[], do: n } } });
+
+const Product = fields(["id", "string"], ["name", "string"], ["summary", "string"], ["price", "number"], ["currency", "string"], ["rating", "number"], ["reviews", "number"], ["badge", "string", true], ["category", "string"], ["inStock", "boolean"], ["compareAt", "number", true], ["href", "string", true], ["image", "string", true]);
+
+const categoryNav = spec(`${O}category-nav`, "CategoryNav", "Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon, or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes: layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.", {
+  records: {
+    Category: fields(["id", "string"], ["name", "string"], ["icon", "string"], ["count", "number"], ["href", "string", true]),
+    CategoryTools: groupFields(["search", "string", "label of the search field"], ["sort", "string", "label of the sort select"], ["sortValue", "string", "the chosen sort"], ["shown", "string", "how many products are shown"], ["query", "string", "the text in the search field", ""]),
+  },
+  props: [
+    { name: "label", type: "string", required: true, docs: "accessible name of the navigation" },
+    { name: "categories", type: ts("Category[]"), required: true },
+    { name: "current", type: "string", default: "all", docs: "id of the current category" },
+    { name: "layout", type: tsOf("chips", "bar", "sidebar", "tiles", "toolbar"), default: "chips" },
+    { name: "count", type: tsOf("show", "hide"), default: "show" },
+    { name: "icon", type: tsOf("show", "hide"), default: "show" },
+    { name: "density", type: denseLite, default: "default" },
+    { name: "tools", type: { record: "CategoryTools" }, docs: "the toolbar layout: labels of the search, the sort and the number shown" },
+  ],
+  // the classes of a link per layout: its shape, and its look when it is the current category or another one
+  derived: [
+    { name: "chipLike", value: or(eq(ref("layout"), "chips"), eq(ref("layout"), "toolbar")) },
+    { name: "tiles", value: eq(ref("layout"), "tiles") },
+    { name: "linkShape", value: cond(ref("chipLike"), "inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border", cond(eq(ref("layout"), "bar"), "inline-flex items-center gap-2 -mb-px border-b px-1 py-2", cond(ref("tiles"), "flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border", "inline-flex w-full items-center gap-2 rounded px-3 py-2"))) },
+    { name: "currentLook", value: cond(ref("chipLike"), "bg-primary text-primary-foreground", cond(eq(ref("layout"), "bar"), "border-foreground font-semibold", cond(ref("tiles"), "inset-ring-foreground font-semibold", "bg-muted font-semibold"))) },
+    { name: "otherLook", value: cond(eq(ref("layout"), "bar"), "border-transparent", "") },
+    { name: "listShape", value: cond(eq(ref("layout"), "sidebar"), "flex flex-col gap-2", cond(eq(ref("layout"), "bar"), "flex flex-wrap gap-2 gap-x-4 border-b border-border", cond(ref("tiles"), "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6", "flex flex-wrap gap-2"))) },
+  ],
+  view: [
+    use("Block", { props: { Tag: "nav" }, attrs: { "aria-label": ref("label"), "data-testid": "category-nav", "data-layout": ref("layout") } },
+      use("Container", { props: { Class: cn(wide, cond(eq(ref("density"), "compact"), "py-2", "py-4")) }, attrs: { "data-slot": "container" } },
+        when(eq(ref("layout"), "toolbar"), [use("Group", { props: { Gap: "4", Align: "center", Class: "mb-4 flex-wrap" }, attrs: { "data-testid": "toolbar" } },
+          organism("SearchField", { value: coalesce(ref("tools.query"), ""), label: coalesce(ref("tools.search"), ""), placeholder: ref("tools.search") }),
+          use("Select", { props: { Name: "sort", Size: "sm", AriaLabel: ref("tools.sort"), Class: "w-48" } }, use("SelectOption", { props: { Value: "sort", Label: ref("tools.sortValue"), Selected: true } })),
+          use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("tools.shown"))))]),
+        ifAny("categories", [use("List", { props: { Tag: "ul", Class: ref("listShape") }, attrs: { "data-testid": "items" } },
+          each(ref("categories"), "c", ref("c.id"),
+            use("ListItem", {},
+              // a category is a menu entry: a link only where the app routes menu items
+              menuEntry(ref("c.href"), { cls: cn("text-sm", ref("linkShape"), cond(eq(ref("c.id"), ref("current")), ref("currentLook"), ref("otherLook"))), current: currentOf("c", ref("current")), testid: "item", block: true },
+                when(eq(ref("icon"), "show"), [when(ref("tiles"),
+                  [use("Inline", { props: { Class: "flex size-10 items-center justify-center rounded bg-muted" } }, use("LucideIcon", { props: { Name: ref("c.icon"), Size: 20 } }))],
+                  [use("LucideIcon", { props: { Name: ref("c.icon"), Size: 16 } })])]),
+                use("Inline", {}, text(ref("c.name"))),
+                when(eq(ref("count"), "show"), [use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(str(ref("c.count"))))])))))]))),
+  ],
+});
+
+const productCard = spec(`${O}product-card`, "ProductCard", "A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image, none), ratio, rating (show, hide), action (button, none), density.", {
+  records: { Product, ProductLabels: fields(["add", "string"], ["soldOut", "string"], ["reviews", "string"], ["ratingLabel", "string"], ["was", "string"], ["empty", "string"]) },
+  props: [
+    { name: "product", type: { record: "Product" }, required: true },
+    { name: "labels", type: { record: "ProductLabels" }, required: true },
+    { name: "badges", type: ts("Record<string, string>"), required: true, docs: "badge word by product badge (new, sale)" },
+    { name: "layout", type: tsOf("vertical", "horizontal"), default: "vertical" },
+    { name: "media", type: tsOf("image", "none"), default: "image" },
+    { name: "ratio", type: tsOf("4/3", "1/1", "3/4"), default: "4/3" },
+    { name: "rating", type: tsOf("show", "hide"), default: "show" },
+    { name: "action", type: tsOf("button", "none"), default: "button" },
+    { name: "density", type: tsOf("default", "compact"), default: "default" },
+  ],
+  events: [{ name: "add", args: [{ name: "id", type: "string" }], docs: "the add button was pressed" }],
+  view: [
+    use("Block", { props: { Tag: "article", Class: cn(cardBase(), "h-full gap-4 overflow-hidden", cond(eq(ref("layout"), "horizontal"), "flex flex-col sm:flex-row", "flex flex-col")) }, attrs: { "data-slot": "card", "data-testid": "item", "data-layout": ref("layout") } },
+      when(eq(ref("media"), "image"), [
+        use("Box", { props: { Class: cn("relative shrink-0", cond(eq(ref("layout"), "horizontal"), "sm:w-48", "")) } },
+          organism("MediaFrame", { alt: ref("product.name"), src: ref("product.image"), ratio: ref("ratio"), className: "h-full" }),
+          when(ref("product.badge"), [use("Badge", { props: { Variant: "default", Size: "default", Class: "absolute left-4 top-4" }, attrs: { "data-testid": "badge" } }, text(at(ref("badges"), ref("product.badge"))))])),
+      ]),
+      use("CardContent", { props: { Class: "flex flex-1 flex-col gap-2" } },
+        use("Text", { props: { Size: "xs", Class: "uppercase tracking-wide text-muted-foreground" } }, text(ref("product.category"))),
+        use("Title", { props: { As: 3, Size: "base", Weight: "bold" } }, when(ref("product.href"), [use("Link", { props: { Href: ref("product.href"), Variant: "default" }, attrs: { "data-testid": "open" } }, text(ref("product.name")))], [text(ref("product.name"))])),
+        when(eq(ref("rating"), "show"), [use("Group", { props: { Gap: "2" } },
+          organism("Rating", { value: ref("product.rating"), label: tpl(ref("labels.ratingLabel"), ref("product.rating")), size: 16 }),
+          use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(tpl(ref("labels.reviews"), ref("product.reviews")))))]),
+        when(eq(ref("density"), "default"), [use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("product.summary")))]),
+        use("Group", { props: { Gap: "4", Justify: "between", Class: "mt-auto pt-2" } },
+          use("Group", { props: { Gap: "2", Align: "baseline", Class: "flex-wrap" } },
+            use("Text", { props: { Size: "xl", Weight: "bold" } }, text(money(ref("product.price"), ref("product.currency")))),
+            // relative: the sr-only "Was" (absolute) stays inside the price, not at the far end of a scrolling row of cards
+            when(and(ref("product.compareAt"), gt(ref("product.compareAt"), ref("product.price"))), [use("Text", { props: { Tag: "del", Size: "sm", Class: "relative text-muted-foreground" }, attrs: { "data-testid": "compare-at" } },
+              use("Inline", { props: { Class: "sr-only" } }, text(ref("labels.was"))), text(money(ref("product.compareAt"), ref("product.currency"))))])),
+          when(eq(ref("action"), "button"), [use("Button", { props: { Variant: cond(ref("product.inStock"), "default", "outline"), Size: "sm", Disabled: not(ref("product.inStock")) }, on: { click: call("emit.add", ref("product.id")) }, attrs: { "data-testid": "add" } },
+            text(cond(ref("product.inStock"), ref("labels.add"), ref("labels.soldOut"))))])))),
+  ],
+});
+
+const productGrid = spec(`${O}product-grid`, "ProductGrid", "A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating, action, tone, density.", {
+  typeImports: [{ from: "ProductCard", names: ["Product", "ProductLabels"] }],
+  props: [
+    id, title,
+    { name: "products", type: ts("Product[]"), required: true },
+    { name: "labels", type: ts("ProductLabels"), required: true },
+    { name: "badges", type: ts("Record<string, string>"), required: true },
+    { name: "layout", type: tsOf("grid", "list", "rail"), default: "grid" },
+    { name: "cols", type: tsOf("1-2", "1-3", "1-4"), default: "1-3" },
+    { name: "ratio", type: tsOf("4/3", "1/1", "3/4"), default: "4/3" },
+    { name: "rating", type: tsOf("show", "hide"), default: "show" },
+    { name: "action", type: tsOf("button", "none"), default: "button" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "density", type: tsOf("roomy", "default", "compact"), default: "default" },
+  ],
+  events: [{ name: "add", args: [{ name: "id", type: "string" }], docs: "the add button of a product was pressed" }],
+  view: (() => {
+    const card = () => organism("ProductCard", { product: ref("p"), labels: ref("labels"), badges: ref("badges"), layout: cond(eq(ref("layout"), "list"), "horizontal", "vertical"), ratio: ref("ratio"), rating: ref("rating"), action: ref("action"), density: cond(eq(ref("density"), "compact"), "compact", "default") }, { on: { add: call("emit.add", ref("p.id")) } });
+    // no products: the empty state (its text is the dictionary's labels.empty)
+    return [frame(common, [when(eq(len(ref("products")), 0), [organism("EmptyState", { icon: "package", title: ref("labels.empty") })], [when(eq(ref("layout"), "rail"),
+      [use("Box", { props: { Class: "flex snap-x gap-4 overflow-x-auto pb-4" }, attrs: { "data-testid": "items" } },
+        each(ref("products"), "p", ref("p.id"), use("Box", { props: { Class: "w-64 shrink-0 snap-start" } }, card())))],
+      [use("Grid", { props: { Cols: cond(eq(ref("layout"), "list"), "1", ref("cols")), Class: "gap-4" }, attrs: { "data-testid": "items" } },
+        each(ref("products"), "p", ref("p.id"), card()))])])])];
+  })(),
+});
+
+const productDetail = spec(`${O}product-detail`, "ProductDetail", "A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price, stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs (none, below), buy (full, compact), tone, density.", {
+  typeImports: [{ from: "ProductCard", names: ["Product"] }],
+  records: { ProductDetailLabels: fields(["add", "string"], ["soldOut", "string"], ["inStock", "string"], ["qty", "string"], ["decrease", "string"], ["increase", "string"], ["reviews", "string"], ["ratingLabel", "string"], ["shipping", "string"], ["returns", "string"], ["was", "string"], ["empty", "string"]) },
+  props: [
+    id,
+    { name: "product", type: ts("Product"), docs: "the product; without one, the empty state (labels.empty)" },
+    { name: "labels", type: { record: "ProductDetailLabels" }, required: true },
+    { name: "badges", type: ts("Record<string, string>"), required: true },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "layout", type: tsOf("split", "stacked"), default: "split" },
+    { name: "mediaSide", type: tsOf("start", "end"), default: "start" },
+    { name: "thumbs", type: tsOf("none", "below"), default: "below" },
+    { name: "buy", type: tsOf("full", "compact"), default: "full" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: roomyLite, default: "default" },
+  ],
+  events: [{ name: "add", args: [{ name: "id", type: "string" }], docs: "the add button was pressed" }],
+  view: [when(not(ref("product")), [frame({ id: ref("id"), title: "", tone: ref("tone"), density: ref("density") }, [organism("EmptyState", { icon: "package", title: ref("labels.empty") })])], [frame(
+    { id: ref("id"), title: ref("product.name"), lead: ref("product.summary"), level: ref("level"), layout: cond(eq(ref("layout"), "split"), "split", "stack"), hasMedia: true, mediaSide: ref("mediaSide"), mediaAlign: "start", tone: ref("tone"), density: ref("density") },
+    [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "buy-box" } },
+      // the category: the name of the product's term (taxonomy product_category)
+      when(ref("product.category"), [use("Text", { props: { Size: "xs", Class: "uppercase tracking-wide text-muted-foreground" }, attrs: { "data-testid": "category" } }, text(ref("product.category")))]),
+      organism("ProductPrice", { price: ref("product.price"), compareAt: ref("product.compareAt"), currency: ref("product.currency"), badge: cond(ref("product.badge"), at(ref("badges"), ref("product.badge")), ""), was: ref("labels.was") }),
+      use("Group", { props: { Gap: "2" } },
+        organism("Rating", { value: ref("product.rating"), label: tpl(ref("labels.ratingLabel"), ref("product.rating")), size: 16 }),
+        use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(tpl(ref("labels.reviews"), ref("product.reviews"))))),
+      use("Text", { props: { Size: "sm", Weight: "medium", Class: cond(ref("product.inStock"), "text-foreground", "text-destructive") }, attrs: { "data-testid": "stock" } },
+        text(cond(ref("product.inStock"), ref("labels.inStock"), ref("labels.soldOut")))),
+      use("Group", { props: { Gap: "4", Class: "flex-wrap" } },
+        when(eq(ref("buy"), "full"), [organism("NumberField", { value: "1", name: tpl("{0}-qty", ref("id")), min: "1", label: ref("labels.qty"), decrease: ref("labels.decrease"), increase: ref("labels.increase") })]),
+        use("Button", { props: { Disabled: not(ref("product.inStock")) }, on: { click: call("emit.add", ref("product.id")) }, attrs: { "data-testid": "add" } }, text(ref("labels.add")))),
+      when(eq(ref("buy"), "full"), [use("List", { props: { Tag: "ul", Class: "flex flex-col gap-2 text-sm text-muted-foreground" } },
+        use("ListItem", { props: { Class: "flex items-center gap-2" } }, use("LucideIcon", { props: { Name: "truck", Size: 16 } }), use("Inline", {}, text(ref("labels.shipping")))),
+        use("ListItem", { props: { Class: "flex items-center gap-2" } }, use("LucideIcon", { props: { Name: "shield-check", Size: 16 } }), use("Inline", {}, text(ref("labels.returns")))))]))],
+    [organism("ProductGallery", { name: ref("product.name"), image: ref("product.image"), thumbs: ref("thumbs") })])])],
+});
+
+const reviewList = spec(`${O}review-list`, "ReviewList", "Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid), columns, item (card, plain), avatar (none, image), tone, density.", {
+  records: { Review: fields(["id", "string"], ["title", "string"], ["author", "string"], ["rating", "number"], ["text", "string"], ["date", "string"]), ReviewLabels: fields(["ratingLabel", "string"], ["empty", "string"]) },
+  props: [
+    id, title,
+    { name: "reviews", type: ts("Review[]"), required: true },
+    { name: "labels", type: { record: "ReviewLabels" }, required: true },
+    { name: "layout", type: tsOf("list", "grid"), default: "list" },
+    { name: "item", type: tsOf("card", "plain"), default: "card" },
+    { name: "avatar", type: tsOf("none", "image"), default: "none" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: roomyLite, default: "default" },
+  ],
+  view: [frame({ ...common, measure: cond(eq(ref("layout"), "list"), "2xl", "default") }, [
+    // no reviews: the empty state (labels.empty)
+    when(eq(len(ref("reviews")), 0), [organism("EmptyState", { icon: "message-square-quote", title: ref("labels.empty") })]),
+    use("Grid", { props: { Cols: cond(eq(ref("layout"), "grid"), "1-3", "1"), Class: "gap-4" }, attrs: { "data-testid": "items" } },
+      each(ref("reviews"), "r", ref("r.id"),
+        articleBlockOf(cn("flex h-full flex-col gap-4", cond(eq(ref("item"), "card"), "rounded bg-card p-6 inset-ring inset-ring-border", "border-b border-border pb-4")), "item",
+          organism("Rating", { value: ref("r.rating"), label: tpl(ref("labels.ratingLabel"), ref("r.rating")), size: 16 }),
+          use("Title", { props: { As: 3, Size: "base", Weight: "bold" } }, text(ref("r.title"))),
+          use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("r.text"))),
+          use("Group", { props: { Gap: "4", Align: "center", Class: "mt-auto" } },
+            when(eq(ref("avatar"), "image"), [organism("MediaFrame", { alt: ref("r.author"), ratio: "1/1", className: "size-10 shrink-0 rounded-full" })]),
+            use("Stack", { props: { Gap: "0" } },
+              use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("r.author"))),
+              use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(ref("r.date")))))))),
+  ])],
+});
+
+const cartList = spec(`${O}cart-list`, "CartList", "The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button. Axes: layout (table, cards), media (image, none), density, tone.", {
+  records: { CartLine: fields(["id", "string"], ["name", "string"], ["variant", "string"], ["price", "number"], ["currency", "string"], ["qty", "number"]), CartLabels: fields(["caption", "string"], ["product", "string"], ["price", "string"], ["qty", "string"], ["total", "string"], ["remove", "string"], ["subtotal", "string"], ["checkout", "string"], ["decrease", "string"], ["increase", "string"]) },
+  props: [
+    id, title,
+    { name: "lines", type: ts("CartLine[]"), required: true },
+    empty,
+    { name: "labels", type: { record: "CartLabels" }, required: true },
+    { name: "layout", type: tsOf("table", "cards"), default: "table" },
+    { name: "media", type: tsOf("image", "none"), default: "image" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  events: [{ name: "remove", args: [{ name: "id", type: "string" }], docs: "the remove button of a line was pressed" }],
+  view: [frame(common, [orEmpty("lines", "shopping-cart", [
+    when(eq(ref("layout"), "table"),
+      [organism("CartTable", { field: tpl("{0}-qty", ref("id")), lines: ref("lines"), labels: ref("labels"), media: ref("media"), density: ref("density") }, { on: { remove: call("emit.remove", ref("arg")) } })],
+      [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "cart-cards" } },
+        each(ref("lines"), "line", ref("line.id"),
+          use("Card", { props: { Variant: "default" }, attrs: { "data-testid": "item" } },
+            use("CardContent", { props: { Class: "flex flex-wrap items-center gap-4" } },
+              when(eq(ref("media"), "image"), [organism("MediaFrame", { alt: ref("line.name"), ratio: "1/1", className: "size-16 shrink-0" })]),
+              use("Stack", { props: { Gap: "0", Class: "min-w-40 flex-1" } },
+                use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("line.name"))),
+                use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(ref("line.variant"))),
+                use("Text", { props: { Size: "sm" } }, text(money(ref("line.price"), ref("line.currency"))))),
+              organism("NumberField", { value: str(ref("line.qty")), name: tpl("{0}-qty-{1}", ref("id"), ref("line.id")), min: "1", label: ref("labels.qty"), decrease: ref("labels.decrease"), increase: ref("labels.increase") }),
+              use("Text", { props: { Size: "base", Weight: "bold" } }, text(money(mul(ref("line.price"), ref("line.qty")), ref("line.currency")))),
+              use("Button", { props: { Variant: "ghost", Size: "sm", Layout: "icon", AriaLabel: ref("labels.remove") }, on: { click: call("emit.remove", ref("line.id")) }, attrs: { "data-testid": "remove" } }, use("LucideIcon", { props: { Name: "x", Size: 16 } }))))))]),])
+  ])],
+});
+
+const orderSummary = spec(`${O}order-summary`, "OrderSummary", "The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout (card, plain), cta (show, hide), note (show, hide), density, tone.", {
+  records: { SummaryRow: fields(["id", "string"], ["label", "string"], ["amount", "number"], ["currency", "string"], ["strong", "boolean"]), SummaryLabels: fields(["checkout", "string"], ["note", "string"]) },
+  props: [
+    id, title,
+    { name: "rows", type: ts("SummaryRow[]"), required: true },
+    empty,
+    { name: "labels", type: { record: "SummaryLabels" }, required: true },
+    { name: "layout", type: tsOf("card", "plain"), default: "card" },
+    { name: "cta", type: tsOf("show", "hide"), default: "show" },
+    { name: "note", type: tsOf("show", "hide"), default: "show" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ ...common, measure: "md" }, [orEmpty("rows", "receipt", [
+    use("Box", { props: { Class: cn(cond(eq(ref("layout"), "card"), "rounded bg-card p-6 inset-ring inset-ring-border", "")) }, attrs: { "data-testid": "summary" } },
+      use("Stack", { props: { Gap: "4", Align: "stretch" } },
+        use("List", { props: { Tag: "ul", Class: "flex flex-col gap-4" } },
+          each(ref("rows"), "row", ref("row.id"),
+            use("ListItem", { props: { Class: cn("flex items-center justify-between gap-4", cond(ref("row.strong"), "border-t border-border pt-4 text-base font-bold", "text-sm text-muted-foreground")) }, attrs: { "data-testid": "item" } },
+              use("Inline", {}, text(ref("row.label"))), use("Inline", {}, text(money(ref("row.amount"), ref("row.currency"))))))),
+        when(eq(ref("cta"), "show"), [use("Button", { props: { Variant: "default", Size: "default", Class: "w-full" }, attrs: { "data-testid": "checkout" } }, text(ref("labels.checkout")))]),
+        when(eq(ref("note"), "show"), [use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(ref("labels.note")))]))),])
+  ])],
+});
+
+const orderTable = spec(`${O}order-table`, "OrderTable", "The order history as a table or as cards: number, date, items, total and a status pill, with an optional pager. Axes: layout (table, cards), pager (show, hide), tone, density.", {
+  records: { Order: fields(["id", "string"], ["number", "string"], ["date", "string"], ["total", "number"], ["currency", "string"], ["status", "string"], ["items", "number"]), OrderLabels: fields(["caption", "string"], ["number", "string"], ["date", "string"], ["items", "string"], ["total", "string"], ["status", "string"], ["itemsCount", "string"], ["summary", "string"], ["previous", "string"], ["next", "string"]) },
+  props: [
+    id, title,
+    { name: "orders", type: ts("Order[]"), required: true },
+    empty,
+    { name: "statuses", type: ts("Record<string, string>"), required: true, docs: "word by order status" },
+    { name: "labels", type: { record: "OrderLabels" }, required: true },
+    { name: "layout", type: tsOf("table", "cards"), default: "table" },
+    { name: "pager", type: tsOf("show", "hide"), default: "show" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame(common, [orEmpty("orders", "package", [
+    use("Stack", { props: { Gap: "4", Align: "stretch" } },
+      when(eq(ref("layout"), "table"),
+        [organism("OrderRows", { orders: ref("orders"), statuses: ref("statuses"), labels: ref("labels"), density: ref("density") })],
+        [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "order-cards" } },
+          each(ref("orders"), "o", ref("o.id"),
+            use("Card", { props: { Variant: "default" }, attrs: { "data-testid": "item" } },
+              use("CardContent", { props: { Class: "flex flex-wrap items-center justify-between gap-4" } },
+                use("Stack", { props: { Gap: "0" } },
+                  use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("o.number"))),
+                  use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(ref("o.date")))),
+                use("Text", { props: { Size: "sm" } }, text(tpl(ref("labels.itemsCount"), ref("o.items")))),
+                use("Text", { props: { Size: "sm", Weight: "bold" } }, text(money(ref("o.total"), ref("o.currency")))),
+                organism("Pill", { tone: statusTone }, kids(text(at(ref("statuses"), ref("o.status")))))))))]),
+      when(eq(ref("pager"), "show"), [organism("Pager", { page: 1, pages: 3, summary: tpl(ref("labels.summary"), 1, 4, 12), previousLabel: ref("labels.previous"), nextLabel: ref("labels.next") })])),])
+  ])],
+});
+
+export const commerceOrganisms: OrganismSpec[] = [orderRows, categoryNav, productCard, productGrid, productDetail, productPrice, productGallery, reviewList, numberField, cartTable, cartList, orderSummary, orderTable];
diff --git a/xgen/screens/src/authoring/blocks/content.ts b/xgen/screens/src/authoring/blocks/content.ts
new file mode 100644
index 0000000..9926286
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/content.ts
@@ -0,0 +1,137 @@
+// Content organisms: a post card, a grid or list of posts, the header of a post.
+import { and, call, cn, coalesce, cond, each, eachAt, eq, gt, ne, ref, text, tpl, use, when, where, organism, len } from "../../build";
+import { fitCols } from "../ux";
+import type { OrganismSpec } from "../../ir";
+import { cardBase, fields, groupFields, rec, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { id, title, tone, tsOf, toneLite, denseLite } from "../props";
+import { kids } from "../forms";
+import { layoutOf } from "../presets";
+
+const O = "organism.";
+const Post = fields(["id", "string"], ["title", "string"], ["excerpt", "string"], ["category", "string"], ["author", "string"], ["date", "string"], ["minutes", "number"], ["icon", "string"], ["href", "string", true], ["image", "string", true]);
+const PostLabels = fields(["minutes", "string"], ["by", "string"], ["read", "string"], ["empty", "string"]);
+
+const postCard = spec(`${O}post-card`, "PostCard", "A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only), density.", {
+  records: { Post, PostLabels },
+  props: [
+    { name: "post", type: { record: "Post" }, required: true },
+    { name: "labels", type: { record: "PostLabels" }, required: true, docs: "templates: minutes `{0} min read`, by `By {0}`; and the word of the read link" },
+    { name: "layout", type: tsOf("vertical", "horizontal"), default: "vertical" },
+    { name: "media", type: tsOf("image", "none"), default: "image" },
+    { name: "meta", type: tsOf("full", "short", "news"), default: "full" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: (() => {
+    const cover = when(eq(ref("media"), "image"), [
+      use("Box", { props: { Class: cn("relative shrink-0", cond(eq(ref("layout"), "horizontal"), "sm:w-64", "")) } },
+        organism("MediaFrame", { alt: ref("post.title"), src: ref("post.image"), ratio: "16/9", className: "h-full" })),
+    ]);
+    const category = when(ne(ref("meta"), "news"), [
+      use("Group", { props: { Gap: "2", Align: "center" } },
+        use("LucideIcon", { props: { Name: ref("post.icon"), Size: 16 } }),
+        use("Text", { props: { Size: "xs", Class: "uppercase tracking-wide text-muted-foreground" } }, text(ref("post.category")))),
+    ]);
+    const excerpt = when(and(eq(ref("density"), "default"), ne(ref("meta"), "news")), [
+      use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("post.excerpt"))),
+    ]);
+    const metaRow = when(ne(ref("meta"), "news"), [
+      use("Group", { props: { Gap: "2", Class: "mt-auto flex-wrap pt-2 text-muted-foreground" } },
+        when(eq(ref("meta"), "full"), [use("Text", { props: { Size: "xs" } }, text(tpl(ref("labels.by"), ref("post.author"))))]),
+        use("Text", { props: { Size: "xs" } }, text(ref("post.date"))),
+        when(eq(ref("meta"), "full"), [use("Text", { props: { Size: "xs" } }, text(tpl(ref("labels.minutes"), ref("post.minutes"))))])),
+    ]);
+    // the link to the post from its slug (slug|route); an app with no post page gives no route: no link rather than a dead one
+    const read = when(and(ne(ref("meta"), "news"), ref("post.href")), [
+      use("Link", { props: { Href: ref("post.href"), Variant: "default" }, attrs: { "data-testid": "read" } }, text(ref("labels.read"))),
+    ]);
+    // news card: image with the title on top, a date strip below; sizes from the default preset
+    // Frame news card 267×218 r16 gap 8; image 267×160 r12; footer h50 gap16 pad: mark 32 + title only.
+    // Card 267×218 r16 no pad; image 267×160 r12 with title 12 centered; strip h50 date+meta only
+    const news = use("Block", {
+      props: { Tag: "article", Class: cn("flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border", layoutOf("news.card")) },
+      attrs: { "data-testid": "item", "data-layout": ref("layout"), "data-meta": "news" },
+    },
+      use("Box", { props: { Class: cn("relative shrink-0 overflow-hidden", layoutOf("news.cover")) }, attrs: { "data-testid": "news-cover" } },
+        organism("MediaFrame", { alt: ref("post.title"), src: ref("post.image"), ratio: "16/9", className: cn("size-full", layoutOf("media.rounded")) }),
+        use("Title", { props: { As: 3, Size: "xs", Weight: "semibold", Class: cn("pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground", layoutOf("news.title")) }, attrs: { "data-testid": "news-title" } }, text(ref("post.title")))),
+      use("Group", { props: { Gap: "2", Align: "center", Class: cn("w-full px-2 text-muted-foreground", layoutOf("news.strip")) }, attrs: { "data-testid": "news-date" } },
+        use("LucideIcon", { props: { Name: "calendar", Size: 16 } }),
+        use("Text", { props: { Size: "xs", Weight: "bold", Class: "leading-4" } }, text(ref("post.date"))),
+        when(ref("post.category"), [use("Text", { props: { Size: "xs", Weight: "bold", Class: "leading-4" } }, text(ref("post.category")))])));
+    const full = use("Block", { props: { Tag: "article", Class: cn(cardBase(), "h-full gap-4 overflow-hidden", cond(eq(ref("layout"), "horizontal"), "flex flex-col sm:flex-row", "flex flex-col")) }, attrs: { "data-slot": "card", "data-testid": "item", "data-layout": ref("layout"), "data-meta": ref("meta") } },
+      cover,
+      use("CardContent", { props: { Class: "flex flex-1 flex-col gap-2" } },
+        category,
+        use("Title", { props: { As: 3, Size: "xl", Weight: "bold" } }, text(ref("post.title"))),
+        excerpt, metaRow, read));
+    return [when(eq(ref("meta"), "news"), [news], [full])];
+  })(),
+});
+
+const postGrid = spec(`${O}post-grid`, "PostGrid", "A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news), filter mode (none, topics), tone, density.", {
+  typeImports: [{ from: "PostCard", names: ["Post", "PostLabels"] }, { from: "SectionFrame", names: ["HeadLink"] }],
+  records: {
+    PostTopic: fields(["id", "string"], ["title", "string"], ["value", "string"]),
+    PostFilter: groupFields(["mode", tsOf("none", "topics"), "topics: tabs above the posts; the page filters by `topic`", "none"],
+      ["topics", "PostTopic[]", "the topic tabs"], ["label", "string", "accessible name of the topic tabs"], ["topic", "string", "the value of the chosen topic; empty: all posts"]),
+  },
+  events: [{ name: "topic", args: [{ name: "value", type: "string" }], docs: "a topic tab was chosen" }],
+  props: [
+    id, title,
+    { name: "posts", type: ts("Post[]"), required: true },
+    { name: "labels", type: ts("PostLabels"), required: true },
+    { name: "action", type: ts("HeadLink"), docs: "optional link opposite the heading (All posts)" },
+    { name: "filter", type: rec("PostFilter"), docs: "the topic tabs and the chosen topic" },
+    { name: "layout", type: tsOf("grid", "list", "magazine"), default: "grid" },
+    { name: "cols", type: tsOf("1-2", "1-3", "1-4"), default: "1-3" },
+    { name: "media", type: tsOf("image", "none"), default: "image" },
+    { name: "meta", type: tsOf("full", "short", "news"), default: "full" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: (() => {
+    const shown = where(ref("posts"), "category", ref("filter.topic"));
+    const card = (layout: "horizontal" | "vertical") => organism("PostCard", { post: ref("p"), labels: ref("labels"), layout, media: ref("media"), meta: ref("meta"), density: ref("density") });
+    return [frame({ id: ref("id"), title: ref("title"), action: ref("action"), tone: ref("tone"), density: cond(eq(ref("density"), "compact"), "compact", "default"), measure: cond(eq(ref("meta"), "news"), "fill", "default"), className: cond(eq(ref("meta"), "news"), "py-0", "") }, [
+      when(eq(ref("filter.mode"), "topics"), [organism("Switcher", { label: ref("filter.label") }, kids(
+        each(ref("filter.topics"), "tab", ref("tab.id"), organism("SwitcherItem", { active: eq(ref("tab.value"), ref("filter.topic")) }, { on: { click: call("emit.topic", ref("tab.value")) }, ...kids(text(ref("tab.title"))) }))))]),
+      // emptyMode omit (12-prop limit leaves no room for an `empty` text): no posts, no grid
+      when(gt(len(shown), 0), [when(eq(ref("layout"), "magazine"),
+        [use("Stack", { props: { Gap: "6", Align: "stretch" }, attrs: { "data-testid": "items" } },
+          eachAt(shown, "p", "i", ref("p.id"), when(eq(ref("i"), 0), [card("horizontal")])),
+          use("Grid", { props: { Cols: ref("cols"), Class: "gap-6" } },
+            eachAt(shown, "p", "i", ref("p.id"), when(gt(ref("i"), 0), [card("vertical")]))))],
+        [use("Grid", { props: { Cols: cond(eq(ref("layout"), "list"), "1", fitCols(ref("cols"), len(shown))), Class: "w-full gap-6" }, attrs: { "data-testid": "items" } },
+          each(shown, "p", ref("p.id"), organism("PostCard", { post: ref("p"), labels: ref("labels"), layout: cond(eq(ref("layout"), "list"), "horizontal", "vertical"), media: ref("media"), meta: ref("meta"), density: ref("density") })))])]),
+    ])];
+  })(),
+});
+
+const postHeader = spec(`${O}post-header`, "PostHeader", "The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout (start, center), cover (show, hide), meta (full, short), tone.", {
+  typeImports: [{ from: "PostCard", names: ["Post", "PostLabels"] }],
+  props: [
+    id,
+    { name: "post", type: ts("Post"), docs: "the post; without one: the empty state" },
+    { name: "labels", type: ts("PostLabels"), required: true },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "layout", type: tsOf("start", "center"), default: "start" },
+    { name: "cover", type: tsOf("show", "hide"), default: "show" },
+    { name: "meta", type: tsOf("full", "short"), default: "full" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  // no post: the empty state (labels.empty); the cover is the post's image (featured_media_id), the placeholder without one
+  view: [when(ref("post"), [frame(
+    { id: ref("id"), title: ref("post.title"), lead: ref("post.excerpt"), level: ref("level"), align: ref("layout"), tone: ref("tone"), hasMedia: eq(ref("cover"), "show") },
+    [use("Group", { props: { Gap: "4", Align: "center", Justify: cond(eq(ref("layout"), "center"), "center", "start"), Class: "flex-wrap" }, attrs: { "data-testid": "post-meta" } },
+      organism("MediaFrame", { alt: ref("post.author"), ratio: "1/1", className: "size-10 shrink-0 rounded-full" }),
+      use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("post.author"))),
+      use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("post.date"))),
+      when(eq(ref("meta"), "full"), [use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(tpl(ref("labels.minutes"), ref("post.minutes"))))]),
+      organism("Pill", { tone: "blue" }, kids(text(ref("post.category"))))),
+    ],
+    [organism("MediaFrame", { alt: ref("post.title"), src: ref("post.image"), ratio: "21/9" })])],
+    [frame({ id: ref("id"), level: ref("level"), align: ref("layout"), tone: ref("tone") }, [organism("EmptyState", { icon: "file-text", title: ref("labels.empty") })])])],
+});
+
+export const contentOrganisms: OrganismSpec[] = [postCard, postGrid, postHeader];
diff --git a/xgen/screens/src/authoring/blocks/cta-proof.ts b/xgen/screens/src/authoring/blocks/cta-proof.ts
new file mode 100644
index 0000000..fd7ec72
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/cta-proof.ts
@@ -0,0 +1,36 @@
+// A call to action with proof: centered over logos, features or figures, or split beside a picture with figures, icon rows or delivery zones.
+import { cond, eq, ref, text, undef, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { id, tsOf, toneLite } from "../props";
+
+const ctaProof = spec("organism.cta-proof", "CtaProof", "A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note. Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos, features, stats, rows, zones), mediaSide, tone.", {
+  typeImports: [{ from: "LogoCloud", names: ["Logo"] }, { from: "FeatureGrid", names: ["Feature"] }, { from: "StatsBand", names: ["Stat"] }, { from: "ZoneTable", names: ["Zone"] }, { from: "ErrorPage", names: ["LinkActions"] }],
+  records: { CtaContent: fields(["logos", "Logo[]"], ["features", "Feature[]"], ["stats", "Stat[]"], ["zones", "Zone[]"]) },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "actions", type: ts("LinkActions"), required: true },
+    { name: "content", type: { record: "CtaContent" }, required: true },
+    { name: "note", type: "string", default: "", docs: "a small line under the actions" },
+    { name: "layout", type: tsOf("center", "split"), default: "center" },
+    { name: "proof", type: tsOf("logos", "features", "stats", "rows", "zones"), default: "stats" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: (() => {
+    const center = eq(ref("layout"), "center");
+    const body = [
+      organism("CtaProofItems", { content: ref("content"), proof: ref("proof"), center }),
+      organism("ActionGroup", { primary: ref("actions.cta"), primaryHref: ref("actions.href"), secondary: cond(eq(ref("actions.mode"), "two"), ref("actions.secondary"), undef()), secondaryHref: ref("actions.secondaryHref"), align: cond(center, "center", "start") }),
+      when(ref("note"), [use("Text", { props: { Size: "xs", Class: "text-muted-foreground" }, attrs: { "data-testid": "cta-note" } }, text(ref("note")))]),
+    ];
+    return [frame({ id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), tone: ref("tone"), density: "default", align: cond(center, "center", "start"),
+      layout: cond(center, "stack", "split"), hasMedia: eq(ref("layout"), "split"), mediaSide: ref("mediaSide") }, body, [organism("MediaFrame", { alt: ref("title"), ratio: "4/3" })])];
+  })(),
+});
+
+export const ctaProofOrganisms: OrganismSpec[] = [ctaProof];
diff --git a/xgen/screens/src/authoring/blocks/dashboard.ts b/xgen/screens/src/authoring/blocks/dashboard.ts
new file mode 100644
index 0000000..843729e
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/dashboard.ts
@@ -0,0 +1,176 @@
+// Dashboard and onboarding organisms: metric tiles, a chart panel, an activity feed, an empty state, a checklist and a stepper.
+import { add, cn, cond, div, count, each, eachAt, eq, len, lt, mul, ref, round, str, text, tpl, undef, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame, panelSection, wide } from "../components/frames";
+import { empty, id, ifAny, orEmpty, title, tsOf, toneLite, denseLite } from "../props";
+import { fid, kids } from "../forms";
+
+const O = "organism.";
+
+const metricRow = spec(`${O}metric-row`, "MetricRow", "Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes: columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).", {
+  records: { Metric: fields(["id", "string"], ["label", "string"], ["value", "string"], ["icon", "string"], ["hint", "string"]) },
+  props: [
+    id, title,
+    { name: "metrics", type: ts("Metric[]"), required: true },
+    empty,
+    { name: "cols", type: tsOf("2", "4"), default: "4" },
+    { name: "item", type: tsOf("tile", "compact"), default: "tile" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density") }, [orEmpty("metrics", "gauge", [
+    use("Grid", { props: { Cols: cond(eq(ref("cols"), "2"), "1-2", "1-4"), Class: "gap-4" }, attrs: { "data-testid": "items" } },
+      each(ref("metrics"), "m", ref("m.id"),
+        when(eq(ref("item"), "tile"),
+          [use("Box", { props: {}, attrs: { "data-testid": "item" } }, organism("StatTile", { label: ref("m.label"), value: ref("m.value"), icon: ref("m.icon"), hint: ref("m.hint") }))],
+          [use("Stack", { props: { Gap: "0", Class: "rounded bg-card p-4 inset-ring inset-ring-border" }, attrs: { "data-testid": "item" } },
+            use("Group", { props: { Gap: "2", Align: "center", Class: "text-muted-foreground" } }, use("LucideIcon", { props: { Name: ref("m.icon"), Size: 16 } }), use("Text", { props: { Size: "xs" } }, text(ref("m.label")))),
+            use("Text", { props: { Size: "2xl", Weight: "bold" } }, text(ref("m.value"))),
+            use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(ref("m.hint"))))]))),])
+  ])],
+});
+
+const chartPanel = spec(`${O}chart-panel`, "ChartPanel", "A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart (bars, meters), size (default, compact), tone (default, muted).", {
+  records: { Point: fields(["id", "string"], ["label", "string"], ["value", "number"]) },
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true, docs: "the sentence under the title" },
+    { name: "series", type: ts("Point[]"), required: true },
+    empty,
+    { name: "summary", type: "string", required: true, docs: "the chart's accessible summary" },
+    { name: "percent", type: "string", required: true, docs: "template of a meter caption, e.g. `{0}%`" },
+    { name: "chart", type: tsOf("bars", "meters"), default: "bars" },
+    { name: "size", type: denseLite, default: "default" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [
+    panelSection(use("Container", { props: { Class: `${wide} py-8` }, attrs: { "data-slot": "container" } },
+      organism("Panel", { title: ref("title"), description: ref("text"), id: ref("id"), className: cond(eq(ref("tone"), "muted"), "bg-muted", "") }, kids(
+        orEmpty("series", "chart-column", [when(eq(ref("chart"), "bars"),
+          [organism("BarChart", { bars: ref("series"), label: ref("summary"), height: cond(eq(ref("size"), "compact"), 96, 176) })],
+          [use("Stack", { props: { Gap: cond(eq(ref("size"), "compact"), "0", "2"), Align: "stretch" }, attrs: { "data-testid": "items" } },
+            each(ref("series"), "s", ref("s.id"), organism("MeterRow", { label: ref("s.label"), value: ref("s.value"), caption: tpl(ref("percent"), ref("s.value")) })))])]))))),
+  ],
+});
+
+const activityFeed = spec(`${O}activity-feed`, "ActivityFeed", "A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout (timeline, list), density (default, compact), tone (default, muted).", {
+  records: { Event: fields(["id", "string"], ["title", "string"], ["text", "string"], ["time", "string"], ["tone", "string"]) },
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "events", type: ts("Event[]"), required: true },
+    empty,
+    { name: "layout", type: tsOf("timeline", "list"), default: "timeline" },
+    { name: "density", type: denseLite, default: "default" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [
+    panelSection(use("Container", { props: { Class: `${wide} py-8` }, attrs: { "data-slot": "container" } },
+      organism("Panel", { title: ref("title"), description: ref("text"), id: ref("id"), className: cond(eq(ref("tone"), "muted"), "bg-muted", "") }, kids(
+        orEmpty("events", "activity", [when(eq(ref("layout"), "timeline"),
+          [organism("Timeline", { items: ref("events") })],
+          [use("List", { props: { Class: "m-0 flex list-none flex-col p-0" }, attrs: { "data-testid": "items" } },
+            each(ref("events"), "e", ref("e.id"),
+              use("ListItem", { props: { Class: cn("flex items-start justify-between gap-4 border-b border-border last:border-0", cond(eq(ref("density"), "compact"), "py-2", "py-4")) }, attrs: { "data-testid": "item" } },
+                use("Stack", { props: { Gap: "0" } },
+                  use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("e.title"))),
+                  when(eq(ref("density"), "default"), [use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("e.text")))])),
+                use("Text", { props: { Size: "xs", Class: "shrink-0 text-muted-foreground" } }, text(ref("e.time"))))))])]))))),
+  ],
+});
+
+const emptyPanel = spec(`${O}empty-panel`, "EmptyPanel", "An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain. Axes: layout (card, plain), actions (button, none), size (default, compact).", {
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "icon", type: "string", default: "inbox", docs: "Lucide name" },
+    { name: "cta", type: "string", docs: "text of the action" },
+    { name: "ctaHref", type: "string" },
+    { name: "layout", type: tsOf("card", "plain"), default: "card" },
+    { name: "actions", type: tsOf("button", "none"), default: "button" },
+    { name: "visual", type: tsOf("icon", "image"), default: "icon", docs: "image: a picture instead of the round icon" },
+    { name: "size", type: denseLite, default: "default" },
+  ],
+  view: [
+    use("Block", { props: { Tag: "section" }, attrs: { "aria-label": ref("title"), "data-testid": "empty" } },
+      use("Container", { props: { Class: cn(wide, cond(eq(ref("size"), "compact"), "py-4", "py-8")) }, attrs: { "data-slot": "container" } },
+        when(eq(ref("visual"), "image"),
+          [use("Stack", { props: { Gap: "4", Align: "center", Class: "mx-auto max-w-md text-center" }, attrs: { "data-testid": "empty-visual" } },
+            organism("MediaFrame", { alt: ref("title"), ratio: "4/3", className: "w-full max-w-xs" }),
+            use("Title", { props: { As: 2, Size: "2xl", Weight: "bold" } }, text(ref("title"))),
+            use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("text"))),
+            when(eq(ref("actions"), "button"), [use("Button", { props: { Variant: "default", Size: "sm", Href: ref("ctaHref") }, attrs: { "data-testid": "empty-action" } }, text(ref("cta")))]))],
+        [organism("EmptyState", { icon: ref("icon"), title: ref("title"), text: ref("text"), className: cn("mx-auto max-w-xl", cond(eq(ref("layout"), "plain"), "bg-transparent inset-ring-0", ""), cond(eq(ref("size"), "compact"), "py-6", "")) },
+          { slots: { action: { args: [], do: [when(eq(ref("actions"), "button"), [use("Button", { props: { Variant: "default", Size: "sm", Href: ref("ctaHref") }, attrs: { "data-testid": "empty-action" } }, text(ref("cta")))])] } } })]))),
+  ],
+});
+
+const checklist = spec(`${O}checklist`, "Checklist", "An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain), progress (bar, text, none), marker (check, number), tone (default, muted).", {
+  records: { Task: fields(["id", "string"], ["title", "string"], ["text", "string"], ["done", "boolean"]) },
+  props: [
+    id, title,
+    { name: "tasks", type: ts("Task[]"), required: true },
+    empty,
+    { name: "progressLabel", type: "string", required: true, docs: "template of the count, e.g. `{0} of {1} done`" },
+    { name: "layout", type: tsOf("card", "plain"), default: "card" },
+    { name: "progress", type: tsOf("bar", "text", "none"), default: "bar" },
+    { name: "marker", type: tsOf("check", "number"), default: "check" },
+    { name: "detail", type: tsOf("always", "expand"), default: "always", docs: "expand: the sentence of a task opens under its title" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), measure: "2xl" }, [orEmpty("tasks", "list-checks", [
+    use("Stack", { props: { Gap: "4", Align: "stretch", Class: cond(eq(ref("layout"), "card"), "rounded bg-card p-6 inset-ring inset-ring-border", "") }, attrs: { "data-testid": "checklist" } },
+      when(eq(ref("progress"), "bar"), [use("Progress", { props: { Value: str(round(div(mul(count(ref("tasks"), "done"), 100), len(ref("tasks"))))), Max: "100" }, attrs: { "aria-label": tpl(ref("progressLabel"), count(ref("tasks"), "done"), len(ref("tasks"))) } })]),
+      when(eq(ref("progress"), "text"), [use("Text", { props: { Size: "sm", Class: "text-muted-foreground" }, attrs: { "data-testid": "progress-text" } }, text(tpl(ref("progressLabel"), count(ref("tasks"), "done"), len(ref("tasks")))))]),
+      use("List", { props: { Class: "m-0 flex list-none flex-col gap-4 p-0" }, attrs: { "data-testid": "items" } },
+        eachAt(ref("tasks"), "task", "i", ref("task.id"),
+          use("ListItem", { props: { Class: "flex items-start gap-4" }, attrs: { "data-testid": "item", "data-done": str(ref("task.done")) } },
+            when(eq(ref("marker"), "number"),
+              [use("IconBadge", { props: { Variant: cond(ref("task.done"), "primary", "outline"), Size: "xs" } }, text(str(add(ref("i"), 1))))],
+              [use("LucideIcon", { props: { Name: cond(ref("task.done"), "circle-check", "circle"), Size: 24, Class: cond(ref("task.done"), "shrink-0 text-primary", "shrink-0 text-muted-foreground") } })]),
+            when(eq(ref("detail"), "expand"),
+              [use("Disclosure", { props: { Variant: "ghost", Class: "flex-1" }, attrs: { "data-testid": "task-detail" } },
+                use("Summary", { props: { Variant: "ghost" } }, text(ref("task.title"))),
+                use("Text", { props: { Size: "sm", Class: "pb-2 text-muted-foreground" } }, text(ref("task.text"))))],
+              [use("Stack", { props: { Gap: "0" } },
+                use("Text", { props: { Size: "base", Weight: "semibold" } }, text(ref("task.title"))),
+                use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("task.text"))))]))))),])
+  ])],
+});
+
+const stepper = spec(`${O}stepper`, "Stepper", "A multi-step form header: the steps with the current one marked (aria-current step), and the current step's text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show, hide).", {
+  typeImports: [{ from: "StepsList", names: ["Step"] }],
+  props: [
+    id, title,
+    { name: "steps", type: ts("Step[]"), required: true },
+    { name: "current", type: "number", default: 2, docs: "the number of the current step, from 1" },
+    { name: "stepLabel", type: "string", required: true, docs: "template of the progress line, e.g. `Step {0} of {1}`" },
+    { name: "back", type: "string", required: true },
+    { name: "next", type: "string", required: true },
+    { name: "layout", type: tsOf("horizontal", "vertical"), default: "horizontal" },
+    { name: "marker", type: tsOf("number", "icon"), default: "number" },
+    { name: "summary", type: tsOf("show", "hide"), default: "show" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), measure: "3xl" }, [ifAny("steps", [
+    use("Stack", { props: { Gap: "6", Align: "stretch" }, attrs: { "data-testid": "stepper" } },
+      use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(tpl(ref("stepLabel"), ref("current"), len(ref("steps"))))),
+      use("List", { props: { Tag: "ol", Class: cn("m-0 flex list-none gap-4 p-0", cond(eq(ref("layout"), "vertical"), "flex-col", "flex-col sm:flex-row")) }, attrs: { "data-testid": "items" } },
+        eachAt(ref("steps"), "s", "i", ref("s.id"),
+          use("ListItem", { props: { Class: "flex flex-1 items-center gap-4" }, attrs: { "data-testid": "item", "aria-current": cond(eq(add(ref("i"), 1), ref("current")), "step", undef()) } },
+            use("IconBadge", { props: { Variant: cond(lt(add(ref("i"), 1), add(ref("current"), 1)), "primary", "outline"), Size: "sm", Class: cond(lt(add(ref("i"), 1), add(ref("current"), 1)), "text-sm", "text-sm text-muted-foreground") } },
+              when(eq(ref("marker"), "icon"), [use("LucideIcon", { props: { Name: ref("s.icon"), Size: 16 } })], [use("Inline", { props: { Class: "text-sm font-bold" } }, text(str(add(ref("i"), 1))))])),
+            use("Text", { props: { Size: "sm", Weight: cond(eq(add(ref("i"), 1), ref("current")), "bold", "semibold") } }, text(ref("s.title")))))),
+      when(eq(ref("summary"), "show"), [
+        eachAt(ref("steps"), "s", "i", ref("s.id"), when(eq(add(ref("i"), 1), ref("current")), [
+          use("Stack", { props: { Gap: "2", Class: "rounded bg-card p-6 inset-ring inset-ring-border" }, attrs: { "data-testid": "step-summary" } },
+            use("Title", { props: { As: 3, Size: "xl", Weight: "bold" } }, text(ref("s.title"))),
+            use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("s.text"))),
+            use("Group", { props: { Gap: "2", Class: "pt-2" } },
+              use("Button", { props: { Variant: "outline", Size: "sm", Type: "button" } }, text(ref("back"))),
+              use("Button", { props: { Variant: "default", Size: "sm", Type: "button" } }, text(ref("next")))))])),
+      ]))]),
+  ])],
+});
+
+export const dashboardOrganisms: OrganismSpec[] = [metricRow, chartPanel, activityFeed, emptyPanel, checklist, stepper];
diff --git a/xgen/screens/src/authoring/blocks/delivery.ts b/xgen/screens/src/authoring/blocks/delivery.ts
new file mode 100644
index 0000000..8dfe3f4
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/delivery.ts
@@ -0,0 +1,134 @@
+// Delivery: the zones and their prices, the delivery windows to pick from, the delivery facts, and the stores where an order can be picked up.
+import { and, at, nbsp, cn, gt, len, cond, each, eq, ne, money, ref, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec, Value } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { empty, id, ifAny, orEmpty, title, tsOf, toneLite, denseLite } from "../props";
+import { heading, muted, strong, surface } from "../ux";
+
+const O = "organism.";
+const common = { id: ref("id"), title: ref("title"), lead: ref("lead"), tone: ref("tone"), density: ref("density") };
+const lead = { name: "lead", type: "string" as const, default: "" };
+const Zone = fields(["id", "string"], ["name", "string"], ["area", "string"], ["price", "number"], ["freeFrom", "number"], ["minOrder", "number"], ["time", "string"], ["express", "string"], ["currency", "string"]);
+const head = (label: string, cls = "py-2") => use("TableHeadCell", { props: { Scope: "col", Class: cls } }, text(ref(label)));
+/** an icon in a small muted square */
+const iconSquare = (icon: string) =>
+  use("Box", { props: { Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted" } }, use("LucideIcon", { props: { Name: ref(icon), Size: 20 } }));
+/** a line of a spec list: the label on the left, the value on the right */
+const pair = (label: Value, value: Value) =>
+  use("ListItem", { props: { Class: "flex items-center justify-between gap-4 text-sm" } }, use("Inline", { props: { Class: "text-muted-foreground" } }, text(label)), use("Inline", { props: { Class: "font-medium" } }, text(value)));
+
+const zoneTable = spec(`${O}zone-table`, "ZoneTable", "Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.", {
+  records: { Zone, ZoneLabels: fields(["caption", "string"], ["zone", "string"], ["price", "string"], ["freeFrom", "string"], ["minOrder", "string"], ["time", "string"], ["express", "string"]) },
+  props: [
+    id, title, lead,
+    { name: "zones", type: ts("Zone[]"), required: true },
+    empty,
+    { name: "labels", type: { record: "ZoneLabels" }, required: true },
+    { name: "layout", type: tsOf("table", "cards"), default: "table" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame(common, [orEmpty("zones", "map", [
+    when(eq(ref("layout"), "table"),
+      [organism("ZoneRows", { zones: ref("zones"), labels: ref("labels") })],
+      [use("Grid", { props: { Cols: "1-3", Class: "gap-4" }, attrs: { "data-testid": "items" } },
+        each(ref("zones"), "z", ref("z.id"),
+          use("Stack", { props: { Gap: "4", Class: surface("p-6") }, attrs: { "data-testid": "item" } },
+            use("Stack", { props: { Gap: "2" } }, heading(ref("z.name"), "lg"), muted(ref("z.area"))),
+            use("Text", { props: { Size: "3xl", Weight: "bold" } }, text(money(ref("z.price"), ref("z.currency")))),
+            use("List", { props: { Tag: "ul", Class: "flex flex-col gap-2 border-t border-border pt-4" } },
+              pair(ref("labels.freeFrom"), money(ref("z.freeFrom"), ref("z.currency"))),
+              pair(ref("labels.minOrder"), money(ref("z.minOrder"), ref("z.currency"))),
+              pair(ref("labels.time"), ref("z.time"))),
+            when(ref("z.express"), [use("Badge", { props: { Variant: "secondary", Size: "default", Class: "w-fit" } }, text(ref("z.express")))]))))]),])
+  ])],
+});
+
+const slotBoard = spec(`${O}slot-board`, "SlotBoard", "Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item (card, plain), tone.", {
+  typeImports: [{ from: "SlotGrid", names: ["Day"] }, { from: "ZoneTable", names: ["Zone"] }],
+  records: { SlotLabels: fields(["zone", "string"], ["price", "string"], ["freeFrom", "string"], ["time", "string"], ["primary", "string"], ["secondary", "string"], ["note", "string"]) },
+  props: [
+    id, title, lead,
+    { name: "days", type: ts("Day[]"), required: true },
+    empty,
+    { name: "zone", type: ts("Zone"), required: true, docs: "the zone of the address" },
+    { name: "labels", type: { record: "SlotLabels" }, required: true },
+    { name: "layout", type: tsOf("split", "stacked"), default: "split" },
+    { name: "item", type: tsOf("card", "plain"), default: "card" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ ...common, density: "default" }, [orEmpty("days", "calendar", [
+    use("Box", { props: { Class: "grid grid-cols-1 items-start gap-8 lg:grid-cols-3" } },
+      use("Box", { props: { Class: cond(eq(ref("layout"), "split"), "lg:col-span-2", "lg:col-span-3") } },
+        organism("SlotGrid", { days: ref("days"), name: tpl("{0}-slot", ref("id")), item: ref("item") })),
+      when(eq(ref("layout"), "split"), [use("Stack", { props: { Gap: "4", Align: "stretch", Class: surface("p-6") }, attrs: { "data-testid": "aside" } },
+        organism("Field", { label: ref("labels.zone"), htmlFor: tpl("{0}-zone", ref("id")) }, { slots: { children: { args: [], do: [
+          use("Select", { props: { Name: tpl("{0}-zone", ref("id")) }, attrs: { id: tpl("{0}-zone", ref("id")) } }, use("SelectOption", { props: { Value: ref("zone.id"), Label: ref("zone.name"), Selected: true } }))] } } }),
+        use("List", { props: { Tag: "ul", Class: "flex flex-col gap-2" } },
+          pair(ref("labels.price"), money(ref("zone.price"), ref("zone.currency"))),
+          pair(ref("labels.freeFrom"), money(ref("zone.freeFrom"), ref("zone.currency"))),
+          pair(ref("labels.time"), ref("zone.time"))),
+        use("Button", { props: { Variant: "default", Size: "default", Class: "w-full" } }, text(ref("labels.primary"))),
+        use("Button", { props: { Variant: "outline", Size: "default", Class: "w-full" } }, text(ref("labels.secondary"))),
+        muted(ref("labels.note"), "xs"))])),])
+  ])],
+});
+
+const deliveryInfo = spec(`${O}delivery-info`, "DeliveryInfo", "How delivery works: the facts as icon cards, then the zones with their time and the order that ships free. Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones), tone, density.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }, { from: "ZoneTable", names: ["Zone"] }],
+  records: { DeliveryLabels: fields(["zones", "string"], ["freeFrom", "string"]) },
+  props: [
+    id, title, lead,
+    { name: "facts", type: ts("Feature[]"), required: true },
+    { name: "zones", type: ts("Zone[]"), required: true },
+    { name: "labels", type: { record: "DeliveryLabels" }, required: true },
+    { name: "layout", type: tsOf("full", "facts", "split"), default: "full" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame(common, [
+    use("Box", { props: { Class: cn("grid grid-cols-1 gap-8", cond(eq(ref("layout"), "split"), "items-start md:grid-cols-2", "")) } },
+      ifAny("facts", [use("Grid", { props: { Cols: cond(eq(ref("layout"), "split"), "1-2", "1-4"), Class: "gap-4" }, attrs: { "data-testid": "facts" } },
+        each(ref("facts"), "f", ref("f.id"),
+          use("Stack", { props: { Gap: "4", Class: surface("p-6") }, attrs: { "data-testid": "fact" } },
+            iconSquare("f.icon"), use("Stack", { props: { Gap: "2" } }, strong(ref("f.title"), "sm"), muted(ref("f.text"))))))]),
+      when(and(ne(ref("layout"), "facts"), gt(len(ref("zones")), 0)), [use("Stack", { props: { Gap: "4", Align: "stretch" } },
+        heading(ref("labels.zones"), "lg"),
+        use("Box", { props: { Class: cond(eq(ref("layout"), "split"), "flex flex-col gap-4", "grid grid-cols-1 gap-4 md:grid-cols-3") } },
+          each(ref("zones"), "z", ref("z.id"),
+            use("Stack", { props: { Gap: "2", Class: cond(eq(ref("layout"), "split"), "border-b border-border pb-4", surface("p-6")) }, attrs: { "data-testid": "zone" } },
+              use("Group", { props: { Gap: "4", Align: "baseline", Justify: "between" } }, strong(ref("z.name"), "sm"), use("Badge", { props: { Variant: "secondary", Size: "default" } }, text(ref("z.time")))),
+              muted(ref("z.area")),
+              use("Text", { props: { Size: "sm", Weight: "medium" } }, text(tpl(ref("labels.freeFrom"), money(ref("z.freeFrom"), ref("z.currency")))))))))])),
+  ])],
+});
+
+const storeLocations = spec(`${O}store-locations`, "StoreLocations", "The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.", {
+  records: { Store: fields(["id", "string"], ["name", "string"], ["kind", "string"], ["address", "string"], ["hours", "string"], ["phone", "string"], ["note", "string"], ["services", "string[]"]), StoreLabels: fields(["map", "string"]) },
+  props: [
+    id, title, lead,
+    { name: "stores", type: ts("Store[]"), required: true },
+    empty,
+    { name: "kinds", type: ts("Record<string, string>"), required: true, docs: "word by store kind (pickup, store only)" },
+    { name: "labels", type: { record: "StoreLabels" }, required: true },
+    { name: "layout", type: tsOf("cards", "list", "map"), default: "cards" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ ...common, density: "default" }, [orEmpty("stores", "store", [
+    use("Box", { props: { Class: cn("grid grid-cols-1 gap-8", cond(eq(ref("layout"), "map"), "items-start md:grid-cols-2", "")) } },
+      use("Box", { props: { Class: cond(eq(ref("layout"), "cards"), "grid grid-cols-1 gap-4 md:grid-cols-2", "flex flex-col gap-4") }, attrs: { "data-testid": "items" } },
+        each(ref("stores"), "s", ref("s.id"),
+          use("Stack", { props: { Gap: "4", Class: cond(eq(ref("layout"), "list"), "border-b border-border pb-4", surface("p-6")) }, attrs: { "data-testid": "item" } },
+            use("Stack", { props: { Gap: "2" } }, use("Badge", { props: { Variant: "outline", Size: "default", Class: "w-fit" } }, text(at(ref("kinds"), ref("s.kind")))), heading(ref("s.name"), "lg")),
+            use("List", { props: { Tag: "ul", Class: cond(eq(ref("layout"), "list"), "flex flex-wrap gap-x-8 gap-y-2 text-sm", "flex flex-col gap-2 text-sm") } },
+              use("ListItem", { props: { Class: "flex items-center gap-2" } }, use("LucideIcon", { props: { Name: "map-pin", Size: 16 } }), use("Inline", {}, text(ref("s.address")))),
+              use("ListItem", { props: { Class: "flex items-center gap-2" } }, use("LucideIcon", { props: { Name: "clock", Size: 16 } }), use("Inline", {}, text(ref("s.hours")))),
+              use("ListItem", { props: { Class: "flex items-center gap-2" } }, use("LucideIcon", { props: { Name: "phone", Size: 16 } }), use("Link", { props: { Href: tpl("tel:{0}", ref("s.phone")), Variant: "default" } }, text(nbsp(ref("s.phone")))))),
+            when(eq(ref("layout"), "cards"), [muted(ref("s.note")),
+              use("Group", { props: { Gap: "2", Class: "flex-wrap" } }, each(ref("s.services"), "v", ref("v"), use("Badge", { props: { Variant: "secondary", Size: "default" } }, text(ref("v")))))])))),
+      when(eq(ref("layout"), "map"), [use("Box", { props: { Class: "md:sticky md:top-8" } }, organism("MediaFrame", { alt: ref("labels.map"), ratio: "1/1" }))])),])
+  ])],
+});
+
+export const deliveryOrganisms: OrganismSpec[] = [zoneTable, slotBoard, deliveryInfo, storeLocations];
diff --git a/xgen/screens/src/authoring/blocks/faq-split.ts b/xgen/screens/src/authoring/blocks/faq-split.ts
new file mode 100644
index 0000000..c33f367
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/faq-split.ts
@@ -0,0 +1,44 @@
+// Questions beside something: the heading column, a help card, a picture or a finder; or the questions as cards.
+import { eq, ref, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { id, ifAny, tsOf, toneLite } from "../props";
+
+const faqSplit = spec("organism.faq-split", "FaqSplit", "Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside: the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }, { from: "FaqList", names: ["FaqTab"] }],
+  records: {
+    Question: fields(["id", "string"], ["question", "string"], ["answer", "string"], ["category", "string"], ["icon", "string"], ["href", "string", true]),
+    FaqSplitLabels: fields(["cta", "string"], ["more", "string"], ["asideTitle", "string"], ["asideText", "string"], ["asideCta", "string"], ["search", "string"], ["popular", "string"], ["query", "string", true]),
+  },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "items", type: ts("Question[]"), required: true },
+    { name: "channels", type: ts("Feature[]"), required: true, docs: "the ways to reach the team (aside layout)" },
+    { name: "topics", type: ts("FaqTab[]"), required: true, docs: "the topic buttons of the finder (search layout)" },
+    { name: "labels", type: { record: "FaqSplitLabels" }, required: true },
+    { name: "layout", type: tsOf("head", "aside", "media", "search", "cards"), default: "head" },
+    { name: "cards", type: tsOf("grid3", "grid4", "icons"), default: "grid3" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: (() => {
+    const list = organism("FaqDisclosures", { items: ref("items"), name: tpl("{0}-faq", ref("id")) });
+    const cta = use("Box", {}, use("Button", { props: { Variant: "default", Size: "default" }, attrs: { "data-testid": "faq-cta" } }, text(ref("labels.cta"))));
+    const common = { id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), tone: ref("tone"), density: "default" };
+    const picture = organism("MediaFrame", { alt: ref("title"), ratio: "4/3" });
+    // emptyMode omit: a FAQ section without questions is left out whole
+    return [ifAny("items", [
+      when(eq(ref("layout"), "cards"), [frame(common, [organism("FaqCards", { items: ref("items"), labels: ref("labels"), cards: ref("cards") })])]),
+      when(eq(ref("layout"), "head"), [frame({ ...common, layout: "split", hasMedia: true, mediaSide: "end", mediaAlign: "start" }, [cta], [list])]),
+      when(eq(ref("layout"), "aside"), [frame({ ...common, layout: "split", hasMedia: true, mediaSide: "end", mediaAlign: "start" }, [list], [organism("FaqHelp", { labels: ref("labels"), channels: ref("channels") })])]),
+      when(eq(ref("layout"), "media"), [frame({ ...common, layout: "split", hasMedia: true, mediaSide: ref("mediaSide"), mediaAlign: "start" }, [list, cta], [picture])]),
+      when(eq(ref("layout"), "search"), [frame({ ...common, layout: "split", hasMedia: true, mediaSide: ref("mediaSide") }, [organism("FaqFinder", { items: ref("items"), labels: ref("labels"), topics: ref("topics") })], [picture])]),
+    ])];
+  })(),
+});
+
+export const faqSplitOrganisms: OrganismSpec[] = [faqSplit];
diff --git a/xgen/screens/src/authoring/blocks/feature-showcase.ts b/xgen/screens/src/authoring/blocks/feature-showcase.ts
new file mode 100644
index 0000000..1a69e55
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/feature-showcase.ts
@@ -0,0 +1,35 @@
+// Features as cards with a picture on top, or with a muted glyph panel on top (an index of categories), in three or four columns.
+import { cond, each, eq, ref, text, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { empty, id, orEmpty, tsOf, toneLite } from "../props";
+import { muted } from "../ux";
+import { menuEntry } from "../components/nav";
+
+const featureShowcase = spec("organism.feature-showcase", "FeatureShowcase", "Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4), tone.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "features", type: ts("Feature[]"), required: true },
+    empty,
+    { name: "more", type: "string", required: true, docs: "the word of the read link of the picture cards" },
+    { name: "item", type: tsOf("picture", "panel"), default: "picture" },
+    { name: "cols", type: tsOf("3", "4"), default: "3" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), lead: ref("lead"), tone: ref("tone"), align: "center" }, [orEmpty("features", "layout-grid", [
+    use("Box", { props: { Class: cond(eq(ref("cols"), "4"), "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4", "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3") } },
+      each(ref("features"), "f", ref("f.id"), use("Card", { props: { Variant: "default", Class: "h-full gap-4 overflow-hidden" }, attrs: { "data-testid": "showcase-card" } },
+        when(eq(ref("item"), "picture"), [organism("MediaFrame", { alt: ref("f.title"), ratio: "16/9" })],
+          [use("Box", { props: { Class: "flex aspect-video items-center justify-center rounded bg-muted text-foreground" }, attrs: { "data-testid": "showcase-panel" } }, use("LucideIcon", { props: { Name: ref("f.icon"), Size: 32 } }))]),
+        use("CardContent", { props: { Class: "flex flex-1 flex-col gap-2" } },
+          use("Title", { props: { As: 3, Size: "base", Weight: "semibold" } }, text(ref("f.title"))),
+          muted(ref("f.text")),
+          when(eq(ref("item"), "picture"), [menuEntry(ref("f.href"), { size: "sm", cls: "mt-auto gap-2 pt-2 text-sm font-medium", testid: "read" }, text(ref("more")), use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } }))])))))]),])
+  ],
+});
+
+export const featureShowcaseOrganisms: OrganismSpec[] = [featureShowcase];
diff --git a/xgen/screens/src/authoring/blocks/feature-split.ts b/xgen/screens/src/authoring/blocks/feature-split.ts
new file mode 100644
index 0000000..e3bd2e0
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/feature-split.ts
@@ -0,0 +1,38 @@
+// Features beside a picture: plain features in two columns, features as cards, two figures over checked rows, or four metric cards.
+import { cond, eq, or, ref, undef, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { id, ifAny, tsOf, toneLite } from "../props";
+
+const featureSplit = spec("organism.feature-split", "FeatureSplit", "Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four metric cards and the actions), mediaSide, tone.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }, { from: "StatsBand", names: ["Stat"] }, { from: "ErrorPage", names: ["LinkActions"] }],
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "level", type: ts("1 | 2"), default: 2 },
+    { name: "features", type: ts("Feature[]"), required: true },
+    { name: "stats", type: ts("Stat[]"), required: true },
+    { name: "actions", type: ts("LinkActions"), required: true, docs: "shown in the cards and metrics layouts" },
+    { name: "layout", type: tsOf("grid", "cards", "stats", "metrics"), default: "grid" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: (() => {
+    const is = (l: string) => eq(ref("layout"), l);
+    const head = { id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), level: ref("level"), tone: ref("tone"), layout: "split", hasMedia: true, mediaSide: ref("mediaSide") };
+    const actions = organism("ActionGroup", { primary: ref("actions.cta"), primaryHref: ref("actions.href"), secondary: cond(eq(ref("actions.mode"), "two"), ref("actions.secondary"), undef()), secondaryHref: ref("actions.secondaryHref"), align: "start" });
+    return [frame(head, [
+      // emptyMode omit: an empty list leaves its part out
+      when(is("grid"), [ifAny("features", [organism("FeaturePairs", { features: ref("features") })])]),
+      when(is("cards"), [ifAny("features", [organism("FeatureCards", { features: ref("features"), cols: "1-2", item: "tile" })])]),
+      when(is("stats"), [ifAny("features", [organism("FeatureStatRows", { features: ref("features"), stats: ref("stats") })])]),
+      when(is("metrics"), [ifAny("stats", [organism("FeatureMetricCards", { stats: ref("stats") })])]),
+      when(or(is("cards"), is("metrics")), [actions]),
+    ], [organism("MediaFrame", { alt: ref("title"), ratio: cond(is("stats"), "1/1", "4/3") })])];
+  })(),
+});
+
+export const featureSplitOrganisms: OrganismSpec[] = [featureSplit];
diff --git a/xgen/screens/src/authoring/blocks/footer-split.ts b/xgen/screens/src/authoring/blocks/footer-split.ts
new file mode 100644
index 0000000..4ae763b
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/footer-split.ts
@@ -0,0 +1,60 @@
+// Footers with more than links: the brand with figures over link-group cards, or a split beside a picture with points, small link
+// columns, a newsletter card, the contacts, or the community channels with figures.
+import { cn, cond, eq, ne, or, ref, use, when, organism } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { wide } from "../components/frames";
+import { tsOf, toneLite } from "../props";
+import { muted, strong } from "../ux";
+
+const footerSplit = spec("organism.footer-split", "FooterSplit", "A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two actions, or the community channels and figures), mediaSide, tone.", {
+  typeImports: [{ from: "MegaMenu", names: ["MegaGroup"] }, { from: "StatsBand", names: ["Stat"] }, { from: "FeatureGrid", names: ["Feature"] }],
+  records: {
+    FooterExtras: fields(["stats", "Stat[]"], ["points", "Feature[]"], ["contacts", "Feature[]"], ["channels", "Feature[]"], ["sitemapHref", "string", true], ["ctaHref", "string", true], ["secondaryHref", "string", true]),
+    FooterSplitLabels: fields(["title", "string"], ["text", "string"], ["loopTitle", "string"], ["loopText", "string"], ["joinTitle", "string"], ["joinText", "string"], ["sitemap", "string"], ["points", "string"], ["signup", "string"], ["email", "string"], ["subscribe", "string"], ["note", "string"], ["cta", "string"], ["secondary", "string"]),
+  },
+  props: [
+    { name: "id", type: "string", default: "footer" },
+    { name: "label", type: "string", required: true, docs: "accessible name of the link groups" },
+    { name: "brand", type: "string", required: true },
+    { name: "tagline", type: "string", required: true },
+    { name: "copyright", type: "string", required: true },
+    { name: "groups", type: ts("MegaGroup[]"), required: true },
+    { name: "extras", type: { record: "FooterExtras" }, required: true },
+    { name: "labels", type: { record: "FooterSplitLabels" }, required: true, docs: "the heading and text of the contacts, newsletter (loop) and channels (join) layouts, the sitemap link, the points title, the sign-up words and the two actions" },
+    { name: "layout", type: tsOf("stats", "points", "links", "newsletter", "contacts", "channels"), default: "stats" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: (() => {
+    const is = (l: string) => eq(ref("layout"), l);
+    const ex = { extras: ref("extras") };
+    const nav = { label: ref("label"), groups: ref("groups") };
+    const brand = organism("FooterBrand", { brand: ref("brand"), tagline: ref("tagline") });
+    const pick = (key: string) => cond(is("newsletter"), ref(`labels.loop${key}`), cond(is("channels"), ref(`labels.join${key}`), ref(`labels.${key.toLowerCase()}`)));
+    const head = use("Stack", { props: { Gap: "2", Align: "start" } }, strong(pick("Title"), "xl", "bold"), muted(pick("Text")));
+    const copyright = use("Box", { props: { Class: "border-t border-border pt-6" } }, muted(ref("copyright")));
+    const picture = (start: boolean): ViewNode => when(start ? eq(ref("mediaSide"), "start") : ne(ref("mediaSide"), "start"), [organism("MediaFrame", { alt: ref("brand"), ratio: "4/3" })]);
+    const stats = use("Stack", { props: { Gap: "8", Align: "stretch" } },
+      use("Group", { props: { Gap: "6", Align: "start", Justify: "between", Class: "flex-wrap" } },
+        use("Stack", { props: { Gap: "6", Align: "start" } }, brand, organism("FooterFigures", ex)),
+        organism("FooterSitemap", { href: ref("extras.sitemapHref"), label: ref("labels.sitemap") })),
+      organism("FooterGroupCards", nav), copyright);
+    const split = use("Box", { props: { Class: "grid grid-cols-1 items-center gap-8 lg:grid-cols-2" } },
+      picture(true),
+      use("Stack", { props: { Gap: "8", Align: "stretch" } },
+        when(or(is("points"), is("links")), [brand], [head]),
+        when(is("points"), [organism("FooterPoints", { ...ex, title: ref("labels.points") })]),
+        when(is("newsletter"), [organism("FooterSignupCard", { id: ref("id"), labels: ref("labels") })]),
+        when(or(is("links"), is("newsletter")), [organism("FooterLinkColumns", nav)]),
+        when(is("contacts"), [organism("FooterContacts", ex),
+          organism("ActionGroup", { primary: ref("labels.cta"), primaryHref: ref("extras.ctaHref"), secondary: ref("labels.secondary"), secondaryHref: ref("extras.secondaryHref"), align: "start" })]),
+        when(is("channels"), [organism("FooterChannels", ex), organism("FooterFigures", ex)]),
+        copyright),
+      picture(false));
+    return [use("Block", { props: { Tag: "footer", Class: cn("border-t border-border", cond(eq(ref("tone"), "muted"), "bg-muted", "")) }, attrs: { "data-testid": "footer-split", "data-layout": ref("layout") } },
+      use("Container", { props: { Class: cn(wide, "py-12") }, attrs: { "data-slot": "container" } }, when(is("stats"), [stats], [split])))];
+  })(),
+});
+
+export const footerSplitOrganisms: OrganismSpec[] = [footerSplit];
diff --git a/xgen/screens/src/authoring/blocks/guide.ts b/xgen/screens/src/authoring/blocks/guide.ts
new file mode 100644
index 0000000..7049419
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/guide.ts
@@ -0,0 +1,145 @@
+// Guidance organisms: a product-tour callout, a video dialog, an error page, a loading skeleton, a long article with a table of contents.
+// Positioning a callout on its target and playing the video are port contracts; these show the resting state.
+import { and, cn, cond, each, eq, gt, len, ref, text, tpl, undef, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, rec, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { empty, id, linkActions, orEmpty, title, tone, tsOf, toneLite, denseLite } from "../props";
+import { kids } from "../forms";
+import { muted, strong, heading, surface } from "../ux";
+import { navBlockOf } from "../components/landmarks";
+
+const O = "organism.";
+
+const tour = spec(`${O}tour-callout`, "TourCallout", "One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target), tone, density.", {
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "target", type: "string", required: true, docs: "the name of the explained element, drawn as a button" },
+    { name: "position", type: "string", required: true, docs: "e.g. `Step 2 of 4`" },
+    { name: "skip", type: "string", required: true },
+    { name: "next", type: "string", required: true },
+    { name: "placement", type: tsOf("below", "above", "end"), default: "below" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density") }, [
+    use("Block", { props: { Tag: "div", Class: cn("flex gap-4", cond(eq(ref("placement"), "end"), "flex-col items-start md:flex-row md:items-center", cond(eq(ref("placement"), "above"), "flex-col-reverse items-start", "flex-col items-start"))) }, attrs: { "data-testid": "tour", "data-placement": ref("placement") } },
+      use("Button", { props: { Variant: "outline", Size: "default", Type: "button", Class: "inset-ring-foreground" }, attrs: { "data-testid": "tour-target" } }, text(ref("target"))),
+      use("Stack", { props: { Gap: "4", Align: "stretch", Class: cn("w-full max-w-sm", surface(), "p-4", "shadow-md") }, attrs: { role: "group", "aria-label": ref("title"), "data-testid": "tour-callout" } },
+        muted(ref("position"), "xs"), strong(ref("title")), muted(ref("text")),
+        use("Group", { props: { Gap: "2", Justify: "end" } },
+          use("Button", { props: { Variant: "ghost", Size: "sm", Type: "button" } }, text(ref("skip"))),
+          use("Button", { props: { Variant: "default", Size: "sm", Type: "button" } }, text(ref("next")))))),
+  ])],
+});
+
+const Chapter = fields(["id", "string"], ["title", "string"], ["text", "string"]);
+const videoModal = spec(`${O}video-modal`, "VideoModal", "A dialog with a walkthrough video: a title and a close button, the player area with a play button and, optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size (default, wide), outline (none, chapters: a list under the player), tone.", {
+  records: { Chapter },
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "close", type: "string", required: true, docs: "accessible name of the close button" },
+    { name: "play", type: "string", required: true, docs: "accessible name of the play button" },
+    { name: "chaptersTitle", type: "string", required: true },
+    { name: "chapters", type: ts("Chapter[]"), required: true },
+    { name: "size", type: tsOf("default", "wide"), default: "default" },
+    { name: "outline", type: tsOf("none", "chapters"), default: "none" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: "default" }, [
+    use("Stack", { props: { Gap: "4", Align: "stretch", Class: cn("mx-auto w-full", cond(eq(ref("size"), "wide"), "max-w-4xl", "max-w-2xl"), surface("p-4 shadow-lg")) }, attrs: { role: "dialog", "aria-label": ref("title"), "data-testid": "video-modal" } },
+      use("Group", { props: { Gap: "2", Align: "center", Justify: "between" } },
+        muted(ref("text")),
+        use("Button", { props: { Variant: "ghost", Size: "sm", Type: "button", Class: "shrink-0" }, attrs: { "aria-label": ref("close"), "data-testid": "modal-close" } }, use("LucideIcon", { props: { Name: "x", Size: 16 } }))),
+      use("Box", { props: { Class: "relative" }, attrs: { "data-testid": "player" } },
+        organism("MediaFrame", { alt: ref("title"), ratio: "16/9" }),
+        use("Button", { props: { Variant: "default", Size: "default", Type: "button", Class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded" }, attrs: { "aria-label": ref("play"), "data-testid": "play" } }, use("LucideIcon", { props: { Name: "play", Size: 24 } }))),
+      when(and(eq(ref("outline"), "chapters"), gt(len(ref("chapters")), 0)), [use("Stack", { props: { Gap: "2" }, attrs: { "data-testid": "chapters" } },
+        heading(ref("chaptersTitle"), "base"),
+        use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" } }, each(ref("chapters"), "c", ref("c.id"), use("ListItem", { props: { Class: "flex items-baseline gap-4" }, attrs: { "data-testid": "item" } }, strong(ref("c.title"), "sm"), muted(ref("c.text"), "xs")))))])),
+  ])],
+});
+
+const errorPage = spec(`${O}error-page`, "ErrorPage", "A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two), tone.", {
+  records: { LinkActions: linkActions },
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "status", type: "string", required: true, docs: "the status code, e.g. 404" },
+    { name: "actions", type: rec("LinkActions"), required: true, docs: "the way back: one link, or two (mode two)" },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "layout", type: tsOf("centered", "split"), default: "centered" },
+    { name: "code", type: tsOf("show", "hide"), default: "show" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), lead: ref("text"), level: ref("level"), layout: cond(eq(ref("layout"), "split"), "split", "stack"), hasMedia: eq(ref("layout"), "split"), align: cond(eq(ref("layout"), "split"), "start", "center"), tone: ref("tone"), density: "roomy" }, [
+    when(eq(ref("code"), "show"), [use("Text", { props: { Size: "4xl", Weight: "bold", Class: cn("text-8xl text-muted-foreground", cond(eq(ref("layout"), "split"), "", "text-center")) }, attrs: { "data-testid": "error-code" } }, text(ref("status")))]),
+    organism("ActionGroup", { primary: ref("actions.cta"), primaryHref: ref("actions.href"), secondary: cond(eq(ref("actions.mode"), "two"), ref("actions.secondary"), undef()), secondaryHref: ref("actions.secondaryHref"), align: cond(eq(ref("layout"), "split"), "start", "center") }),
+  ], [organism("MediaFrame", { alt: ref("title"), ratio: "4/3" })])],
+});
+
+const Line = fields(["id", "string"]);
+const skeletonLayout = spec(`${O}skeleton-layout`, "SkeletonLayout", "The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content is loading. The shimmer itself belongs to the Skeleton part.", {
+  records: { Line },
+  props: [
+    id, title,
+    { name: "label", type: "string", required: true, docs: "e.g. `Loading`" },
+    { name: "lines", type: ts("Line[]"), required: true, docs: "how many placeholders to draw" },
+    { name: "shape", type: tsOf("cards", "list", "article"), default: "cards" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: "default" }, [
+    use("Block", { props: { Tag: "div", Class: "w-full" }, attrs: { role: "status", "aria-label": ref("label"), "data-testid": "skeleton", "data-shape": ref("shape") } },
+      when(eq(ref("shape"), "cards"),
+        [use("Grid", { props: { Cols: "1-3", Class: "gap-4" } }, each(ref("lines"), "l", ref("l.id"), use("Stack", { props: { Gap: "4", Class: surface("p-4") }, attrs: { "data-testid": "item" } },
+          use("Skeleton", { props: { Class: "aspect-video w-full" } }), use("Skeleton", { props: { Class: "h-4 w-2/3" } }), use("Skeleton", { props: { Class: "h-4 w-full" } }))))],
+        [when(eq(ref("shape"), "list"),
+          [use("Stack", { props: { Gap: "4", Align: "stretch" } }, each(ref("lines"), "l", ref("l.id"), use("Group", { props: { Gap: "4", Align: "center" }, attrs: { "data-testid": "item" } },
+            use("Skeleton", { props: { Class: "size-10 shrink-0 rounded-full" } }), use("Stack", { props: { Gap: "2", Class: "flex-1" } }, use("Skeleton", { props: { Class: "h-4 w-1/3" } }), use("Skeleton", { props: { Class: "h-4 w-full" } })))))],
+          [use("Stack", { props: { Gap: "4", Align: "stretch", Class: "mx-auto max-w-2xl" } }, use("Skeleton", { props: { Class: "h-8 w-3/4" } }), each(ref("lines"), "l", ref("l.id"), use("Stack", { props: { Gap: "2" }, attrs: { "data-testid": "item" } }, use("Skeleton", { props: { Class: "h-4 w-full" } }), use("Skeleton", { props: { Class: "h-4 w-5/6" } }))))])])),
+  ])],
+});
+
+const articleBody = spec(`${O}article-body`, "ArticleBody", "A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting the section being read is a port contract.", {
+  records: { Section: fields(["id", "string"], ["title", "string"], ["text", "string"], ["quote", "string"]) },
+  props: [
+    id, title,
+    { name: "sections", type: ts("Section[]"), required: true },
+    empty,
+    { name: "tocTitle", type: "string", required: true },
+    { name: "layout", type: tsOf("column", "toc"), default: "column" },
+    { name: "quotes", type: tsOf("show", "hide"), default: "show" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: "default" }, [orEmpty("sections", "file-text", [
+    use("Grid", { props: { Cols: "1", Class: cn("items-start gap-8", cond(eq(ref("layout"), "toc"), "md:grid-cols-[14rem_minmax(0,1fr)]", "")) } },
+      when(eq(ref("layout"), "toc"), [navBlockOf(ref("tocTitle"), "md:sticky md:top-4", "toc",
+        use("Stack", { props: { Gap: "2" } }, strong(ref("tocTitle"), "sm"),
+          use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" } }, each(ref("sections"), "s", ref("s.id"), use("ListItem", {}, use("Link", { props: { Href: tpl("#{0}-{1}", ref("id"), ref("s.id")), Variant: "default", Class: "text-sm text-muted-foreground" }, attrs: { "data-testid": "toc-link" } }, text(ref("s.title"))))))))]),
+      use("Stack", { props: { Gap: "8", Align: "stretch", Class: "mx-auto w-full max-w-2xl min-w-0" }, attrs: { "data-testid": "article" } },
+        each(ref("sections"), "s", ref("s.id"), use("Box", { props: { Class: "flex flex-col gap-4" }, attrs: { id: tpl("{0}-{1}", ref("id"), ref("s.id")), "data-testid": "item" } },
+          heading(ref("s.title"), "2xl"),
+          use("Text", { props: { Size: "base" } }, text(ref("s.text"))),
+          when(eq(ref("quotes"), "show"), [when(ref("s.quote"), [use("Text", { props: { Tag: "blockquote", Class: "m-0 border-l border-border pl-4 text-lg" }, attrs: { "data-testid": "quote" } }, text(ref("s.quote")))])]))))),])
+  ])],
+});
+
+const pageIntro = spec(`${O}page-intro`, "PageIntro", "The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action. Axes: align (start, center), tone, density.", {
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "cta", type: "string" },
+    { name: "href", type: "string" },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "align", type: tsOf("start", "center"), default: "start" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), lead: ref("text"), level: ref("level"), align: ref("align"), tone: ref("tone"), density: ref("density") }, [
+    when(ref("cta"), [organism("ActionGroup", { primary: ref("cta"), primaryHref: ref("href"), align: ref("align") })]),
+  ])],
+});
+
+export const guideOrganisms: OrganismSpec[] = [pageIntro, tour, videoModal, errorPage, skeletonLayout, articleBody];
diff --git a/xgen/screens/src/authoring/blocks/hero-split.ts b/xgen/screens/src/authoring/blocks/hero-split.ts
new file mode 100644
index 0000000..312efe3
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/hero-split.ts
@@ -0,0 +1,31 @@
+// A split hero: the heading, a lead, something under it (figures, faces, small cards or a quote) and the actions, beside a picture,
+// a picture with a floating card, a grid of four pictures, or a picture with two plan cards.
+import { cond, eq, ref, undef, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { id, tsOf, toneLite } from "../props";
+
+const heroSplit = spec("organism.hero-split", "HeroSplit", "A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes: extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with captions, plans: two plan cards on the picture), mediaSide, tone.", {
+  typeImports: [{ from: "StatsBand", names: ["Stat"] }, { from: "FeatureGrid", names: ["Feature"] }, { from: "TestimonialGrid", names: ["Quote"] }, { from: "StoreHero", names: ["OfferCard"] }, { from: "PricingCard", names: ["Plan"] }, { from: "ErrorPage", names: ["LinkActions"] }],
+  records: { HeroContent: fields(["stats", "Stat[]"], ["features", "Feature[]"], ["people", "Quote[]"], ["plans", "Plan[]"], ["proof", "string"], ["card", "OfferCard"]) },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "actions", type: ts("LinkActions"), required: true },
+    { name: "content", type: { record: "HeroContent" }, required: true },
+    { name: "extra", type: tsOf("stats", "avatars", "minis", "quote", "none"), default: "stats" },
+    { name: "media", type: tsOf("picture", "card", "grid", "plans"), default: "picture" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), level: ref("level"), layout: "split", hasMedia: true, mediaSide: ref("mediaSide"), tone: ref("tone"), density: "default" }, [
+    organism("HeroSplitExtras", { content: ref("content"), extra: ref("extra") }),
+    organism("ActionGroup", { primary: ref("actions.cta"), primaryHref: ref("actions.href"), secondary: cond(eq(ref("actions.mode"), "two"), ref("actions.secondary"), undef()), secondaryHref: ref("actions.secondaryHref"), align: "start" }),
+  ], [organism("HeroSplitMedia", { content: ref("content"), alt: ref("title"), media: ref("media") })])],
+});
+
+export const heroSplitOrganisms: OrganismSpec[] = [heroSplit];
diff --git a/xgen/screens/src/authoring/blocks/landing-hero.ts b/xgen/screens/src/authoring/blocks/landing-hero.ts
new file mode 100644
index 0000000..8926079
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/landing-hero.ts
@@ -0,0 +1,89 @@
+// The hero blocks: HeroClassic (heading, lead, actions, optional media) and HeroPrompt (head row, badge,
+// weighted title, prompt box and topics inside a dark band). The block `hero` draws HeroPrompt for chrome "nav".
+// Related props come in groups (shadcn style): actions, media, composer, nav. Sizes come from the default preset.
+import { and, cn, gt, len, coalesce, cond, eq, or, ref, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { groupFields, rec, spec, ts } from "../kit";
+import { behind, frame } from "../components/frames";
+import { actions, density, id, mediaOf, title, tsOf } from "../props";
+import { fid } from "../forms";
+import { layoutOf } from "../presets";
+import { titleWeights } from "../components/hero-components";
+
+const O = "organism.";
+const p = (name: string, docs?: string, extra: Partial<OrganismSpec["props"][number]> = {}): OrganismSpec["props"][number] => ({ name, type: "string", ...(docs ? { docs } : {}), ...extra });
+
+const level = { name: "level", type: ts("1 | 2"), default: 1 } as OrganismSpec["props"][number];
+const topics = { name: "topics", type: ts("Topic[]") } as OrganismSpec["props"][number];
+const look = [{ name: "scale", type: tsOf("default", "display"), default: "default" }, { name: "tone", type: tsOf("default", "muted", "inverse"), default: "default" }, { name: "density", type: density, default: "roomy" }] as OrganismSpec["props"][number][];
+
+/** the media of a classic hero and what it shows */
+const heroMedia = groupFields(
+  ["kind", tsOf("none", "image", "backdrop", "code", "cluster"), "what the hero shows besides the text", "none"],
+  ["side", tsOf("end", "start"), "side of the media in the split layout", "end"],
+  ["codeTitle", "string", "title of the code window"], ["prompt", "string", "prompt line of the code window"], ["lines", "CodeLine[]", "lines of the code window"],
+);
+
+/** the prompt hero band: the head row inside the band, a large bottom radius, a centered column */
+export const heroPrompt = spec(`${O}hero-prompt`, "HeroPrompt", "A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic pills.", {
+  records: {
+    HeroComposer: groupFields(["attachLabel", "string", "attachment chip label"], ["modelLabel", "string", "model pill label"]),
+    HeroNav: groupFields(["brand", "string", "brand word of the head row"], ["links", "NavLink[]", "menu links of the head row"], ["current", "string", "id of the current link"],
+      ["login", "string"], ["loginHref", "string"], ["skip", "string", "skip link text"], ["label", "string", "accessible name of the menu"]),
+  },
+  typeImports: [{ from: "CtaActions", names: ["ActionSet"] }, { from: "NavBar", names: ["NavLink"] }, { from: "TopicChips", names: ["Topic"] }],
+  props: [title, level, p("badge", "label of the badge (Meet Model V4.1)"), p("badgeMark", "small inner pill text (NEW)"),
+    { name: "actions", type: ts("ActionSet") }, { name: "composer", type: rec("HeroComposer"), docs: "labels of the prompt box" },
+    { name: "nav", type: rec("HeroNav"), docs: "the head row" }, topics,
+    { name: "density", type: density, default: "roomy", docs: "named on the section (data-density) like every section; the band keeps the frame's padding" }],
+  view: (() => {
+    const column = use("Stack", { props: { Gap: "0", Align: "center", Class: cn("mx-auto w-full pt-24 pb-16", layoutOf("hero.column")) }, attrs: { "data-testid": "hero-column" } },
+      when(ref("badge"), [organism("HeroBadge", { label: ref("badge"), mark: ref("badgeMark") })]),
+      organism("WeightedTitle", { id: "home-hero-title", title: ref("title"), weights: titleWeights, level: ref("level") }),
+      when(eq(ref("actions.mode"), "form"),
+        [organism("PromptComposer", { label: ref("actions.emailLabel"), attachLabel: ref("composer.attachLabel"), modelLabel: ref("composer.modelLabel"), send: ref("actions.cta"), href: ref("actions.href") })],
+        [when(ref("actions.cta"), [actions(true, "actions")])]),
+      when(and(ref("topics"), gt(len(ref("topics")), 0)), [organism("TopicChips", { topics: ref("topics"), tone: "inverse" })]));
+    // the band pads top and bottom; the container pads the sides, so it fills the band (1536 + 2 × 32 = the 1600 frame)
+    const band = cn("flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70", layoutOf("hero.band"));
+    const head = { brand: ref("nav.brand"), links: ref("nav.links"), current: ref("nav.current"), login: ref("nav.login"), loginHref: ref("nav.loginHref"),
+      skip: ref("nav.skip"), navLabel: ref("nav.label"), cta: ref("actions.cta"), href: ref("actions.href") };
+    return [use("Block", { props: { Tag: "section", Class: band }, attrs: { "aria-labelledby": "home-hero-title", "data-testid": "section", "data-tone": "inverse", "data-density": ref("density"), "data-chrome": "nav" } },
+      use("Container", { props: { Class: cn("mx-auto w-full px-8", layoutOf("hero.container")) }, attrs: { "data-slot": "container" } },
+        use("Stack", { props: { Gap: "0", Align: "stretch" } },
+          organism("HeroHead", head),
+          column)))];
+  })(),
+});
+
+/** the classic hero: heading, lead and actions in a section frame, with optional media */
+export const heroClassic = spec(`${O}hero-classic`, "HeroClassic", "The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster). Axes: layout, media kind and side, scale, tone, density, actions mode.", {
+  records: { HeroMedia: heroMedia },
+  typeImports: [{ from: "CtaActions", names: ["ActionSet"] }, { from: "CodeWindow", names: ["CodeLine"] }, { from: "TopicChips", names: ["Topic"] }],
+  props: [id, title, p("text", undefined, { required: true }), level, p("badge"), topics,
+    { name: "actions", type: ts("ActionSet") }, { name: "media", type: rec("HeroMedia") },
+    { name: "layout", type: tsOf("centered", "split"), default: "centered" }, ...look],
+  derived: [{ name: "mediaKind", value: coalesce(ref("media.kind"), "none") }, { name: "mediaSide", value: coalesce(ref("media.side"), "end") }],
+  view: (() => {
+    const kind = (k: string) => eq(ref("mediaKind"), k);
+    const has = or(kind("image"), kind("code"), kind("cluster"));
+    const split = eq(ref("layout"), "split");
+    const props = { id: ref("id"), title: ref("title"), lead: ref("text"), level: ref("level"), scale: ref("scale"), badge: ref("badge"),
+      layout: cond(split, "split", "stack"), align: cond(split, "start", "center"), hasMedia: has, mediaSide: ref("mediaSide"), tone: ref("tone"), density: ref("density") };
+    const prompt = use("Box", { props: { Class: cn("w-full max-w-xl", cond(eq(ref("layout"), "centered"), "mx-auto", "")) }, attrs: { "data-testid": "email-form" } },
+      use("Label", { props: { HTMLFor: fid("email"), Class: "sr-only" } }, { text: ref("actions.emailLabel") }),
+      use("Group", { props: { Gap: "2", Align: "start", Class: "w-full flex-wrap" } },
+        use("Input", { props: { Type: "text", Name: "prompt", Class: "min-w-0 flex-1", Placeholder: ref("actions.emailLabel") }, attrs: { id: fid("email"), "data-testid": "field" } }),
+        use("Button", { props: { Variant: "default", Size: "default", Href: ref("actions.href") }, attrs: { "data-testid": "submit" } }, { text: ref("actions.cta") })));
+    const body = [when(ref("actions.cta"), [when(eq(ref("actions.mode"), "form"), [prompt], [actions(eq(ref("layout"), "centered"), "actions")])]),
+      when(and(ref("topics"), gt(len(ref("topics")), 0)), [organism("TopicChips", { topics: ref("topics") })])];
+    const card = (ratio: string, lift = "") => use("Box", { props: { Class: cn("w-full", lift) } }, organism("MediaFrame", { alt: ref("title"), ratio }));
+    const mediaNodes = [
+      when(and(kind("code"), ref("media.lines"), gt(len(ref("media.lines")), 0), ref("media.codeTitle"), ref("media.prompt")), [organism("CodeWindow", { title: ref("media.codeTitle"), prompt: ref("media.prompt"), lines: ref("media.lines") })]),
+      when(kind("cluster"), [use("Grid", { props: { Cols: "3", Class: "items-end gap-4" }, attrs: { "data-testid": "cluster" } }, card("3/4"), card("4/3", "-translate-y-4"), card("3/4"))]),
+      when(or(kind("image")), mediaOf(ref("title"))),
+    ];
+    // with a backdrop the media box is not shown (has is false), so one frame serves both
+    return [behind(cond(kind("backdrop"), "image", "none"), ref("title"), frame(props, body, mediaNodes))];
+  })(),
+});
diff --git a/xgen/screens/src/authoring/blocks/landing.ts b/xgen/screens/src/authoring/blocks/landing.ts
new file mode 100644
index 0000000..54d9c33
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/landing.ts
@@ -0,0 +1,144 @@
+// The landing-page organisms: hero, closing call to action, pricing tiers, FAQ. Each is a SectionFrame with axes; the blocks name the variants.
+import { call, cn, coalesce, cond, each, eq, ne, or, ref, text, tpl, undef, use, when, organism, match, where, len } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, groupFields, rec, spec, ts } from "../kit";
+import { frame, wide } from "../components/frames";
+import { density, id, mediaOf, title, tone, tsOf, cols } from "../props";
+import { fid, kids } from "../forms";
+import { muted, fitCols } from "../ux";
+import { heroClassic, heroPrompt } from "./landing-hero";
+import { heroComponents } from "../components/hero-components";
+import { layoutOf } from "../presets";
+import { ctaActions, quoteProof } from "../components/cta";
+
+const O = "organism.";
+
+
+const ctaBand = spec(`${O}cta-band`, "CtaBand", "A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof (none, quote), density.", {
+  records: { CtaQuote: groupFields(["text", "string", "a customer quote, shown when `proof` is quote"], ["by", "string", "who said it"]) },
+  typeImports: [{ from: "CtaActions", names: ["ActionSet"] }],
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "actions", type: ts("ActionSet"), required: true, docs: "the links (mode one or two) or the email field (mode form)" },
+    { name: "quote", type: rec("CtaQuote") },
+    { name: "layout", type: tsOf("card", "band", "split", "row", "banner"), default: "card", docs: "card: boxed; band: full-width; split: text beside picture; row: heading beside button; banner: centered muted card with one button" },
+    { name: "tone", type: tone, default: "muted" },
+    { name: "proof", type: tsOf("none", "quote"), default: "none" },
+    { name: "density", type: density, default: "default" },
+  ],
+  derived: [{ name: "center", value: or(eq(ref("layout"), "band"), eq(ref("layout"), "banner")) }],
+  view: (() => {
+    const center = ref("center");
+    const act = organism("CtaActions", { id: ref("id"), actions: ref("actions"), center });
+    const proof = when(eq(ref("proof"), "quote"), [organism("QuoteProof", { quote: ref("quote.text"), quoteBy: ref("quote.by"), center })]);
+    const main = frame(
+      { id: ref("id"), title: ref("title"), lead: ref("text"), layout: cond(eq(ref("layout"), "split"), "split", "stack"), align: cond(center, "center", "start"),
+        boxed: eq(ref("layout"), "card"), hasMedia: eq(ref("layout"), "split"), tone: ref("tone"), density: ref("density") },
+      [proof, act], mediaOf(ref("title")));
+    const row = use("Block", { props: { Tag: "section", Class: "py-8" }, attrs: { "aria-labelledby": fid("title"), "data-testid": "section", "data-tone": ref("tone"), "data-density": ref("density") } },
+      use("Container", { props: { Class: wide }, attrs: { "data-slot": "container" } },
+        use("Card", { props: { Variant: "muted" } },
+          use("CardContent", { props: { Class: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" } },
+            use("Stack", { props: { Gap: "2", Class: "min-w-0" } },
+              use("Title", { props: { As: 2, Size: "2xl", Weight: "bold" }, attrs: { id: fid("title") } }, text(ref("title"))),
+              muted(ref("text"), "base")),
+            proof, act))));
+    const banner = organism("CtaBanner", { id: ref("id"), title: ref("title"), text: ref("text"), cta: ref("actions.cta"), href: ref("actions.href"), tone: ref("tone") });
+    return [when(eq(ref("layout"), "banner"), [banner], [when(eq(ref("layout"), "row"), [row], [main])])];
+  })(),
+});
+
+const ctaBanner = spec(`${O}cta-banner`, "CtaBanner", "A centered closing card: heading, one sentence and a pill button. Sizes from the default preset.", {
+  props: [id, title, { name: "text", type: "string", required: true }, { name: "cta", type: "string", required: true }, { name: "href", type: "string", docs: "the address; none: a button, not a link" }, { name: "tone", type: tone, default: "muted" }],
+  view: [use("Block", { props: { Tag: "section", Class: "w-full py-0" }, attrs: { "aria-labelledby": fid("title"), "data-testid": "section", "data-tone": ref("tone"), "data-density": "compact" } },
+    use("Box", { props: { Class: cn("flex w-full flex-col items-center gap-10 bg-muted px-6 text-center", layoutOf("cta.panel")) }, attrs: { "data-testid": "cta-banner" } },
+      use("Title", { props: { As: 2, Size: "3xl", Weight: "semibold", Class: cn(layoutOf("cta.title"), "leading-9") }, attrs: { id: fid("title") } }, text(ref("title"))),
+      use("Text", { props: { Size: "xs", Weight: "semibold", Class: cn("leading-5 text-muted-foreground", layoutOf("cta.text")) } }, text(ref("text"))),
+      use("Button", { props: { Variant: "default", Size: "lg", Href: ref("href"), Class: layoutOf("cta.button") }, attrs: { "data-testid": "action-primary" } }, text(ref("cta")))))],
+});
+
+const pricingTiers = spec(`${O}pricing-tiers`, "PricingTiers", "A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid, stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and the prices of that period), density, tone.", {
+  typeImports: [{ from: "PricingCard", names: ["Plan", "PricingCardLabels"] }],
+  records: { BillingLabels: fields(["label", "string"], ["monthly", "string"], ["annual", "string"], ["save", "string"]) },
+  props: [
+    id, title,
+    { name: "plans", type: ts("Plan[]"), required: true },
+    { name: "labels", type: ts("PricingCardLabels"), required: true },
+    { name: "billingLabels", type: { record: "BillingLabels" }, required: true, docs: "the toggle's name and choices; unused while `billing` is off" },
+    { name: "layout", type: tsOf("grid", "stack"), default: "grid", docs: "stack: one narrow column of cards" },
+    { name: "cols", type: cols, default: "1-3" },
+    { name: "emphasis", type: tsOf("auto", "off"), default: "auto" },
+    { name: "billing", type: tsOf("off", "monthly", "annual"), default: "off" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "density", type: density, default: "default" },
+  ],
+  events: [
+    { name: "select", args: [{ name: "id", type: "string" }], docs: "the call to action of a plan was pressed" },
+    { name: "billing", args: [{ name: "period", type: "string" }], docs: "the other billing period was chosen" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density"), measure: cond(eq(ref("layout"), "stack"), "md", "default") }, [
+    when(ne(ref("billing"), "off"), [use("Group", { props: { Gap: "4", Align: "center", Justify: "center", Class: "flex-wrap" }, attrs: { "data-testid": "billing" } },
+      organism("Switcher", { label: ref("billingLabels.label") }, kids(
+        organism("SwitcherItem", { active: eq(ref("billing"), "monthly") }, { on: { click: call("emit.billing", "monthly") }, ...kids(text(ref("billingLabels.monthly"))) }),
+        organism("SwitcherItem", { active: eq(ref("billing"), "annual") }, { on: { click: call("emit.billing", "annual") }, ...kids(text(ref("billingLabels.annual"))) }))),
+      use("Badge", { props: { Variant: "default", Size: "default" } }, text(ref("billingLabels.save"))))]),
+    // no plans: the empty state (labels.empty)
+    when(eq(len(ref("plans")), 0), [organism("EmptyState", { icon: "layers", title: ref("labels.empty") })], [
+      use("Grid", { props: { Cols: cond(eq(ref("layout"), "stack"), "1", fitCols(ref("cols"), len(ref("plans")))), Class: "gap-4" }, attrs: { "data-testid": "tiers" } },
+        each(ref("plans"), "plan", ref("plan.id"), organism("PricingCard", { plan: ref("plan"), labels: ref("labels"), emphasis: ref("emphasis"), billing: cond(eq(ref("billing"), "annual"), "annual", "monthly"), density: cond(eq(ref("density"), "compact"), "compact", "default") }, { on: { select: call("emit.select", ref("plan.id")) } })))]),
+  ])],
+});
+
+const faqList = spec(`${O}faq-list`, "FaqList", "A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters by `filter.category`), density, tone.", {
+  records: {
+    Faq: fields(["id", "string"], ["question", "string"], ["answer", "string"], ["category", "string", true]),
+    FaqTab: fields(["id", "string"], ["title", "string"], ["value", "string"]),
+    FaqSearch: groupFields(["mode", tsOf("none", "field"), "field: a search field above the questions", "none"],
+      ["label", "string", "accessible name and placeholder of the search field"], ["query", "string", "the text the questions are filtered by"]),
+    FaqFilter: groupFields(["mode", tsOf("none", "categories"), "categories: tabs above the questions", "none"],
+      ["tabs", "FaqTab[]", "the category tabs"], ["label", "string", "accessible name of the tabs"], ["category", "string", "the value of the chosen tab"]),
+  },
+  props: [
+    id, title,
+    { name: "items", type: ts("Faq[]"), required: true },
+    { name: "search", type: rec("FaqSearch"), docs: "the search field and its text" },
+    { name: "filter", type: rec("FaqFilter"), docs: "the category tabs and the chosen one" },
+    { name: "layout", type: tsOf("accordion", "chat"), default: "accordion" },
+    { name: "cols", type: tsOf("1", "2"), default: "1" },
+    { name: "empty", type: "string", default: "", docs: "the text of the empty state (no question, or none matches the search or tab), from the dictionary" },
+    { name: "multiple", type: "boolean", default: false, docs: "true: several can be open at once; false: opening one closes the others (native details name)" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "density", type: density, default: "default" },
+  ],
+  events: [
+    { name: "query", args: [{ name: "text", type: "string" }], docs: "the search text changed" },
+    { name: "category", args: [{ name: "value", type: "string" }], docs: "a category tab was chosen" },
+  ],
+  derived: [
+    { name: "inCategory", value: where(ref("items"), "category", ref("filter.category")) },
+    { name: "shown", value: match(ref("inCategory"), "question", ref("search.query")) },
+  ],
+  view: (() => {
+    const shown = ref("shown");
+    return [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density"), measure: cond(eq(ref("layout"), "chat"), "2xl", "default") }, [
+      when(eq(ref("search.mode"), "field"), [organism("SearchField", { label: coalesce(ref("search.label"), ""), placeholder: ref("search.label"), value: coalesce(ref("search.query"), "") }, { on: { value: call("emit.query", ref("arg")) } })]),
+      when(eq(ref("filter.mode"), "categories"), [organism("Switcher", { label: ref("filter.label") }, kids(
+        each(ref("filter.tabs"), "tab", ref("tab.id"), organism("SwitcherItem", { active: eq(ref("tab.value"), ref("filter.category")) }, { on: { click: call("emit.category", ref("tab.value")) }, ...kids(text(ref("tab.title"))) }))))]),
+      when(eq(len(shown), 0), [organism("EmptyState", { icon: "circle-question-mark", title: ref("empty") })]),
+      when(eq(ref("layout"), "chat"),
+        [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "faq" } },
+          each(shown, "item", ref("item.id"),
+            use("Stack", { props: { Gap: "2", Align: "stretch" }, attrs: { "data-testid": "faq-item" } },
+              use("Box", { props: { Class: "ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground" } }, use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("item.question")))),
+              use("Box", { props: { Class: "mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4" } }, use("Text", { props: { Size: "sm" } }, text(ref("item.answer")))))))],
+        [use("Grid", { props: { Cols: cond(eq(ref("cols"), "2"), "1-2", "1"), Class: "items-start gap-x-8" }, attrs: { "data-testid": "faq" } },
+          each(shown, "item", ref("item.id"),
+            use("Disclosure", { props: { Variant: "item", Name: cond(ref("multiple"), undef(), tpl("{0}-faq", coalesce(ref("id"), "faq"))) }, attrs: { "data-testid": "faq-item" } },
+              use("Summary", { props: { Variant: "item" } }, text(ref("item.question"))),
+              use("Text", { props: { Size: "sm", Class: "pb-4 text-muted-foreground" } }, text(ref("item.answer"))))))]),
+    ])];
+  })(),
+});
+
+export const landingOrganisms: OrganismSpec[] = [heroPrompt, heroClassic, ...heroComponents, ctaBand, ctaBanner, ctaActions, quoteProof, pricingTiers, faqList];
diff --git a/xgen/screens/src/authoring/blocks/marketing.ts b/xgen/screens/src/authoring/blocks/marketing.ts
new file mode 100644
index 0000000..e1dc3a5
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/marketing.ts
@@ -0,0 +1,141 @@
+// More marketing organisms: logo cloud, stats band, testimonials, steps. Each is a SectionFrame with a collection laid out by axes.
+// logos.row strip geometry from the default preset.
+import { cn, cond, eachAt, each, eq, ne, or, add, op, ref, text, str, undef, use, when, organism, len } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { fields, groupFields, rec, requireFields, spec, ts } from "../kit";
+import { behind, frame } from "../components/frames";
+import { density, empty, id, orEmpty, title, tone, tsOf } from "../props";
+import { fluidCols } from "../ux";
+import { layoutOf } from "../presets";
+import { logoSlot, statFigure, testimonialLayout, quoteCard, quoteCardOf } from "../components/marketing";
+
+const O = "organism.";
+const common = { id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density") };
+
+const logoItem = (): ViewNode => use("Group", { props: { Gap: "2", Align: "center", Justify: "center", Class: cn("text-muted-foreground", cond(eq(ref("item"), "tile"), "flex-col rounded p-4 inset-ring inset-ring-border", "")) }, attrs: { "data-testid": "item" } },
+  use("LucideIcon", { props: { Name: ref("logo.icon"), Size: 24 } }),
+  use("Text", { props: { Size: "sm", Weight: "semibold", Class: cond(eq(ref("item"), "icon"), "sr-only", "") } }, text(ref("logo.name"))));
+
+/** logo ribbon: a heading over one row of fixed slots, sizes from the preset */
+const logoRibbon = spec(`${O}logo-ribbon`, "LogoRibbon", "A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset.", {
+  typeImports: [{ from: "LogoCloud", names: ["Logo"] }],
+  props: [id, title, { name: "logos", type: ts("Logo[]"), required: true }, { name: "tone", type: tone, default: "default" }, { name: "density", type: density, default: "default" }],
+  view: [frame({ id: ref("id"), title: "", tone: ref("tone"), density: ref("density"), measure: "fill", align: "center", className: "py-0" }, [
+    use("Stack", { props: { Gap: "6", Align: "center" }, attrs: { "data-testid": "logos-block" } },
+      use("Title", { props: { As: 2, Size: "xl", Weight: "semibold", Class: "leading-7" }, attrs: { id: op("add", ref("id"), "-title") } }, text(ref("title"))),
+      use("Group", { props: { Gap: "0", Justify: "center", Align: "start", Class: cn("flex w-full flex-wrap", layoutOf("logos.row")) }, attrs: { "data-testid": "items" } },
+        each(ref("logos"), "logo", ref("logo.id"), organism("LogoSlot", { name: ref("logo.name"), icon: ref("logo.icon") }))))])],
+});
+
+const logoCloud = spec(`${O}logo-cloud`, "LogoCloud", "A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row), columns (2, 3, 4), item (name, icon only, tile), density, tone.", {
+  records: { Logo: fields(["id", "string"], ["name", "string"], ["icon", "string"]) },
+  props: [
+    id, title,
+    { name: "logos", type: ts("Logo[]"), required: true },
+    empty,
+    { name: "layout", type: tsOf("grid", "row"), default: "grid" },
+    { name: "cols", type: tsOf("2", "3", "4"), default: "4" },
+    { name: "item", type: tsOf("name", "icon", "tile"), default: "name" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "density", type: density, default: "default" },
+  ],
+  view: [orEmpty("logos", "building-2", [when(eq(ref("layout"), "row"),
+    [organism("LogoRibbon", { id: ref("id"), title: ref("title"), logos: ref("logos"), tone: ref("tone"), density: ref("density") })],
+    [frame({ ...common, align: "center" }, [
+      use("Grid", { props: { Cols: fluidCols(ref("cols")), Class: "gap-4" }, attrs: { "data-testid": "items" } }, each(ref("logos"), "logo", ref("logo.id"), logoItem()))])])],
+    (n) => [frame({ ...common, align: "center" }, n)])],
+});
+
+const statsBand = spec(`${O}stats-band`, "StatsBand", "Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3, 4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may be empty.", {
+  records: { Stat: fields(["id", "string"], ["label", "string"], ["value", "string"], ["icon", "string"], ["hint", "string"]) },
+  props: [
+    id,
+    { name: "title", type: "string", default: "" },
+    { name: "stats", type: ts("Stat[]"), required: true },
+    { name: "empty", type: "string", default: "", docs: "the text of the empty state (no figures), from the dictionary" },
+    { name: "cols", type: tsOf("2", "3", "4"), default: "4" },
+    { name: "layout", type: tsOf("row", "stack"), default: "row", docs: "stack: one narrow column of figures, for a sidebar" },
+    { name: "surface", type: tsOf("none", "image", "panel"), default: "none", docs: "image: picture behind; panel: one rounded card" },
+    { name: "item", type: tsOf("plain", "card", "icon"), default: "plain" },
+    { name: "align", type: tsOf("start", "center"), default: "center" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "density", type: density, default: "default" },
+  ],
+  view: (() => {
+    const item = organism("StatFigure", { stat: ref("stat"), item: ref("item"), align: ref("align") });
+    // panel: one rounded card, figures in the columns of `cols`
+    const panel = use("Grid", {
+      props: { Cols: fluidCols(ref("cols")), Class: cn("w-full items-center bg-muted px-6", layoutOf("stats.panel")) },
+      attrs: { "data-testid": "items" },
+    }, each(ref("stats"), "stat", ref("stat.id"), item));
+    const grid = use("Grid", {
+      props: { Cols: cond(eq(ref("layout"), "stack"), "1", fluidCols(ref("cols"))), Class: "gap-6" },
+      attrs: { "data-testid": "items" },
+    }, each(ref("stats"), "stat", ref("stat.id"), item));
+    const main = frame({
+      ...common, align: ref("align"), measure: cond(eq(ref("surface"), "panel"), "fill", cond(eq(ref("layout"), "stack"), "xs", "default")),
+      density: ref("density"),
+      className: cn(cond(eq(ref("surface"), "image"), "bg-transparent", ""), cond(eq(ref("surface"), "panel"), "py-0", "")),
+    }, [when(eq(len(ref("stats")), 0), [organism("EmptyState", { icon: "chart-column", title: ref("empty") })], [when(eq(ref("surface"), "panel"), [panel], [grid])])]);
+    return [behind(cond(eq(ref("surface"), "image"), "image", "none"), ref("title"), main)];
+  })(),
+});
+
+const testimonials = spec(`${O}testimonial-grid`, "TestimonialGrid", "Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card, plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the Carousel port contract around the single layout.", {
+  records: {
+    Quote: fields(["id", "string"], ["author", "string"], ["role", "string"], ["company", "string"], ["quote", "string"], ["rating", "number"], ["handle", "string"], ["time", "string"], ["mark", "string"]),
+    QuoteLabels: requireFields(groupFields(
+      ["rating", "string", "template of the rating's accessible name, e.g. `{0} out of 5`"],
+      ["byLine", "string", "template of the line under the author, e.g. `{0}, {1}` (role, company)"],
+      ["handleLine", "string", "template of the line under a social author, e.g. `{0} / {1}` (handle, time)"]), "rating", "byLine", "handleLine"),
+    QuoteItem: groupFields(["kind", tsOf("card", "plain", "social"), "card: boxed; plain: a bare figure; social: a post of a social wall", "card"],
+      ["avatar", tsOf("none", "image"), "a round picture of the author", "image"], ["rating", tsOf("show", "hide"), "the stars (not on social posts)", "show"],
+      ["mark", tsOf("none", "icon"), "a company glyph above the quote", "none"]),
+  },
+  props: [
+    id, title,
+    { name: "quotes", type: ts("Quote[]"), required: true },
+    empty,
+    { name: "labels", type: rec("QuoteLabels"), required: true, docs: "the templates of the lines around a quote" },
+    { name: "layout", type: testimonialLayout, default: "grid", docs: "single: the first quote only, wide; stack: one narrow column; masonry: columns of cards of any height; strip: one row that scrolls sideways" },
+    { name: "cols", type: tsOf("1-2", "1-3"), default: "1-3" },
+    { name: "item", type: rec("QuoteItem"), docs: "how one quote is drawn" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "density", type: density, default: "default" },
+  ],
+  view: [frame({ ...common, align: cond(eq(ref("layout"), "single"), "center", "start"), measure: cond(eq(ref("layout"), "grid"), "default", "2xl") }, [orEmpty("quotes", "message-square-quote", [
+    when(or(eq(ref("layout"), "masonry"), eq(ref("layout"), "strip")),
+      [use("Block", { props: { Tag: "div", Class: cond(eq(ref("layout"), "masonry"), "columns-1 gap-4 md:columns-2 xl:columns-3", "flex snap-x gap-4 overflow-x-auto pb-2") }, attrs: { "data-testid": "items" } },
+        each(ref("quotes"), "q", ref("q.id"), quoteCardOf()))],
+      [use("Grid", { props: { Cols: cond(eq(ref("layout"), "grid"), ref("cols"), "1"), Class: "gap-4" }, attrs: { "data-testid": "items" } },
+        eachAt(ref("quotes"), "q", "i", ref("q.id"), when(or(ne(ref("layout"), "single"), eq(ref("i"), 0)), [quoteCardOf()])))])]),
+  ])],
+});
+
+const stepsList = spec(`${O}steps-list`, "StepsList", "How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon), align, density, tone.", {
+  records: { Step: fields(["id", "string"], ["title", "string"], ["text", "string"], ["icon", "string"]) },
+  props: [
+    id, title,
+    { name: "steps", type: ts("Step[]"), required: true },
+    empty,
+    { name: "layout", type: tsOf("row", "column"), default: "row" },
+    { name: "marker", type: tsOf("number", "icon"), default: "number" },
+    { name: "align", type: tsOf("start", "center"), default: "start" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "density", type: density, default: "default" },
+  ],
+  view: [frame({ ...common, align: ref("align"), measure: cond(eq(ref("layout"), "row"), "default", "2xl") }, [orEmpty("steps", "list-ordered", [
+    use("List", { props: { Tag: "ol", Class: cn("grid gap-6", cond(eq(ref("layout"), "row"), "sm:grid-cols-2 md:grid-cols-4", "")) }, attrs: { "data-testid": "items" } },
+      eachAt(ref("steps"), "step", "i", ref("step.id"),
+        use("ListItem", { props: { Class: cn("flex gap-4", cond(eq(ref("layout"), "row"), "flex-col", ""), cond(eq(ref("align"), "center"), "items-center text-center", "")) }, attrs: { "data-testid": "item" } },
+          use("IconBadge", { props: { Variant: "primary" }, attrs: { "data-slot": "marker" } },
+            when(eq(ref("marker"), "icon"),
+              [use("LucideIcon", { props: { Name: ref("step.icon"), Size: 20 } })],
+              [use("Inline", { props: { Class: "text-base font-bold" } }, text(str(add(ref("i"), 1))))])),
+          use("Stack", { props: { Gap: "2", Align: cond(eq(ref("align"), "center"), "center", "start") } },
+            use("Title", { props: { As: 3, Size: "xl", Weight: "bold" } }, text(ref("step.title"))),
+            use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("step.text")))))))]),
+  ])],
+});
+
+export const marketingOrganisms: OrganismSpec[] = [logoCloud, logoRibbon, logoSlot, statFigure, statsBand, quoteCard, testimonials, stepsList];
diff --git a/xgen/screens/src/authoring/blocks/media-list.ts b/xgen/screens/src/authoring/blocks/media-list.ts
new file mode 100644
index 0000000..f2cf5f9
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/media-list.ts
@@ -0,0 +1,45 @@
+// A list or figures beside a picture: four figures, figures with a featured review, numbered steps, the latest posts, topic rows, or
+// contact buttons with support figures; with one or two actions under it.
+import { cond, eq, ne, or, ref, undef, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { id, ifAny, tsOf, toneLite } from "../props";
+
+const mediaList = spec("organism.media-list", "MediaList", "A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts, contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.", {
+  typeImports: [{ from: "StatsBand", names: ["Stat"] }, { from: "StepsList", names: ["Step"] }, { from: "PostCard", names: ["Post"] }, { from: "CategoryNav", names: ["Category"] },
+    { from: "FeatureGrid", names: ["Feature"] }, { from: "ReviewList", names: ["Review"] }, { from: "ErrorPage", names: ["LinkActions"] }],
+  records: {
+    MediaExtras: fields(["stats", "Stat[]"], ["steps", "Step[]"], ["posts", "Post[]"], ["topics", "Category[]"], ["channels", "Feature[]"], ["reviews", "Review[]"]),
+    MediaListLabels: fields(["list", "string"], ["count", "string"], ["minutes", "string"], ["featured", "string"], ["rating", "string"], ["figures", "string"]),
+  },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "extras", type: { record: "MediaExtras" }, required: true, docs: "the figures, steps, posts, topics, channels and reviews" },
+    { name: "labels", type: { record: "MediaListLabels" }, required: true, docs: "the heading of the list; templates: count `{0} articles`, minutes `{0} min read`, rating `{0} out of 5`; the featured-review and figures headings" },
+    { name: "actions", type: ts("LinkActions"), required: true },
+    { name: "layout", type: tsOf("figures", "proof", "steps", "posts", "topics", "contact"), default: "figures" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: (() => {
+    const is = (l: string) => eq(ref("layout"), l);
+    const both = { extras: ref("extras"), labels: ref("labels") };
+    const actions = organism("ActionGroup", { primary: ref("actions.cta"), primaryHref: ref("actions.href"), secondary: cond(eq(ref("actions.mode"), "two"), ref("actions.secondary"), undef()), secondaryHref: ref("actions.secondaryHref"), align: "start" });
+    // emptyMode omit: an empty list leaves its part out
+    return [frame({ id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), tone: ref("tone"), layout: "split", hasMedia: true, mediaSide: ref("mediaSide") }, [
+      when(or(is("figures"), is("proof")), [ifAny("extras.stats", [organism("MediaFigures", { extras: ref("extras"), mode: cond(is("proof"), "row", "grid") })])]),
+      when(is("proof"), [ifAny("extras.reviews", [organism("MediaReview", both)])]),
+      when(is("steps"), [ifAny("extras.steps", [organism("MediaSteps", both)])]),
+      when(is("posts"), [ifAny("extras.posts", [organism("MediaPosts", both)])]),
+      when(is("topics"), [ifAny("extras.topics", [organism("MediaTopics", both)])]),
+      when(is("contact"), [ifAny("extras.channels", [organism("MediaContacts", both)])]),
+      when(ne(ref("layout"), "contact"), [actions]),
+    ], [organism("MediaFrame", { alt: ref("title"), ratio: cond(or(is("steps"), is("topics")), "1/1", "4/3") })])];
+  })(),
+});
+
+export const mediaListOrganisms: OrganismSpec[] = [mediaList];
diff --git a/xgen/screens/src/authoring/blocks/navigation.ts b/xgen/screens/src/authoring/blocks/navigation.ts
new file mode 100644
index 0000000..b48d7be
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/navigation.ts
@@ -0,0 +1,185 @@
+// Navigation organisms: the top bar in five shapes, a mega menu, a sidebar, a bottom tab bar, and the sitemap footer.
+// Scroll behavior (a bar that turns solid) and the opening of the mega menu are port contracts; the organisms show the states.
+import { call, cn, coalesce, cond, each, eq, ne, ref, text, use, when, organism } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { groupFields, rec, requireFields, spec, ts } from "../kit";
+import { wide } from "../components/frames";
+import { ifAny, tsOf, toneLite } from "../props";
+import { kids } from "../forms";
+import { emailRow } from "../forms";
+import { heading, muted, strong, surface } from "../ux";
+import { NavLink, Group, link, brandLink, currentOf, groupLinks, menuEntry, menuEntrySpec, navLinks, navBarMenu, navActions, searchPalette, overMedia } from "../components/nav";
+import { footerColumns, footerCard } from "../components/footer";
+import { navBlockOf } from "../components/landmarks";
+
+const O = "organism.";
+const skipLink = (): ViewNode => when(ref("skip"), [use("LinkPlain", { props: { Href: "#main-content", Class: "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border" }, attrs: { "data-testid": "skip-link" } }, text(ref("skip")))]);
+
+const navBar = spec(`${O}nav-bar`, "NavBar", "A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the middle with the links on both sides; search: a search field with its shortcut in the middle), over (none, media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark hero band). Turning solid on scroll is a port contract.", {
+  records: {
+    NavLink,
+    NavBarActions: groupFields(
+      ["mode", tsOf("none", "cta"), "cta: show the call to action", "cta"], ["cta", "string", "text of the call to action"], ["href", "string", "href of the call to action"],
+      ["login", "string", "text of the login link; none: no login"], ["loginHref", "string", "href of the login link; none: a button with no address"], ["themeLabel", "string", "text of the theme button; none: no button"]),
+    NavSearch: requireFields(groupFields(["label", "string", "name and placeholder of the search field (layout search)"], ["shortcut", "string", "the keys that open the search, shown in the field"]), "label", "shortcut"),
+  },
+  props: [
+    { name: "label", type: "string", required: true, docs: "accessible name of the navigation" },
+    { name: "brand", type: "string", required: true },
+    { name: "brandHref", type: "string", docs: "the address of the home page; none: the brand is text, not a link" },
+    { name: "links", type: ts("NavLink[]"), required: true },
+    { name: "current", type: "string", default: "", docs: "id of the current link" },
+    { name: "actions", type: rec("NavBarActions"), docs: "the buttons at the end of the bar" },
+    { name: "search", type: rec("NavSearch"), required: true, docs: "the search field of layout search" },
+    { name: "tone", type: tsOf("default", "inverse"), default: "default", docs: "inverse: sits on a dark hero band" },
+    { name: "layout", type: tsOf("inline", "split", "search"), default: "inline" },
+    { name: "over", type: tsOf("none", "media"), default: "none" },
+    { name: "skip", type: "string", docs: "text of the skip link to the main content; none: no link" },
+  ],
+  events: [{ name: "theme", args: [], docs: "the theme button was pressed" }],
+  view: (() => {
+    const links = (side: "all" | "left" | "right") => organism("NavLinks", { links: ref("links"), current: ref("current"), side });
+    const buttons = () => organism("NavActions", { login: ref("actions.login"), loginHref: ref("actions.loginHref"), cta: ref("actions.cta"), ctaHref: ref("actions.href"), actions: ref("actions.mode"), tone: ref("tone"), themeLabel: ref("actions.themeLabel") }, { on: { theme: call("emit.theme") } });
+    const inner = [when(eq(ref("layout"), "split"),
+      // one navigation split around the brand: one NavBlock (one landmark), the halves are plain boxes
+      [navBlockOf(ref("label"), "w-full", "site-nav", use("Grid", { props: { Cols: "1-3", Class: "w-full items-center gap-4" } },
+        use("Box", { props: { Class: "md:justify-self-start" } }, links("left")),
+        use("Box", { props: { Class: "text-center" } }, brandLink()),
+        use("Group", { props: { Gap: "4", Align: "center", Justify: "end", Class: "flex-wrap md:justify-self-end" } }, use("Box", {}, links("right")), buttons())))],
+      [brandLink(),
+       when(eq(ref("layout"), "search"), [organism("SearchPalette", { label: ref("search.label"), shortcut: ref("search.shortcut") })]),
+       // below md the links take a row of their own under the brand and the buttons, one line that scrolls sideways
+       // instead of wrapping into a block of rows
+       organism("NavBarMenu", { label: ref("label"), links: ref("links"), current: ref("current") }),
+       buttons()])];
+    // over a picture: the header itself carries the picture layer (OverMedia) and turns transparent; it stays the root Block
+    const bar = use("Block", { props: { Tag: "header", Class: cn("relative", cond(eq(ref("tone"), "inverse"), "border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background", "border-b border-border bg-background"), cond(eq(ref("over"), "media"), "isolate overflow-hidden border-0 bg-transparent", "")) }, attrs: { "data-testid": "nav-bar", "data-layout": ref("layout"), "data-tone": ref("tone") } },
+      organism("OverMedia", { on: eq(ref("over"), "media"), alt: ref("brand") }),
+      skipLink(),
+      use("Container", { props: { Class: wide }, attrs: { "data-slot": "container" } },
+        use("Box", { props: { Class: cn("flex flex-wrap items-center justify-between gap-4", "py-4") } }, ...inner)));
+    return [bar];
+  })(),
+});
+
+const megaMenu = spec(`${O}mega-menu`, "MegaMenu", "A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed), cols (2, 3), promo (none, card).", {
+  records: { MegaGroup: Group },
+  props: [
+    { name: "label", type: "string", required: true },
+    { name: "brand", type: "string", required: true },
+    { name: "brandHref", type: "string", docs: "the address of the home page; none: the brand is text" },
+    { name: "trigger", type: "string", required: true, docs: "text of the item that opens the panel" },
+    { name: "links", type: ts("NavLink[]"), required: true, docs: "the other items of the bar" },
+    { name: "groups", type: ts("MegaGroup[]"), required: true },
+    { name: "promoTitle", type: "string" },
+    { name: "promoText", type: "string" },
+    { name: "panel", type: tsOf("open", "closed"), default: "open" },
+    { name: "cols", type: tsOf("2", "3"), default: "3" },
+    { name: "promo", type: tsOf("none", "card"), default: "none" },
+  ],
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }],
+  view: [
+    use("Block", { props: { Tag: "header", Class: "relative border-b border-border bg-background" }, attrs: { "data-testid": "mega-menu" } },
+      use("Container", { props: { Class: cn(wide, "flex flex-wrap items-center gap-6 py-4") }, attrs: { "data-slot": "container" } },
+        brandLink(),
+        navBlockOf(ref("label"), "flex-1", undefined,
+          use("Group", { props: { Gap: "4", Align: "center", Class: "flex-wrap" } },
+            use("ButtonPlain", { props: { Type: "button", Class: "inline-flex items-center gap-2 text-sm font-semibold" }, attrs: { "aria-expanded": cond(eq(ref("panel"), "open"), "true", "false"), "data-testid": "mega-trigger" } },
+              text(ref("trigger")), use("LucideIcon", { props: { Name: "chevron-down", Size: 16 } })),
+            each(ref("links"), "l", ref("l.id"), link("l", "")))))),
+      when(eq(ref("panel"), "open"), [use("Box", { props: { Class: "border-t border-border bg-card" }, attrs: { "data-testid": "mega-panel" } },
+        use("Container", { props: { Class: cn(wide, "grid gap-8 py-6", cond(eq(ref("promo"), "card"), "md:grid-cols-[1fr_16rem]", "")) }, attrs: { "data-slot": "container" } },
+          ifAny("groups", [use("Grid", { props: { Cols: cond(eq(ref("cols"), "2"), "1-2", "1-3"), Class: "gap-6" }, attrs: { "data-testid": "items" } },
+            each(ref("groups"), "g", ref("g.id"), use("Stack", { props: { Gap: "2" }, attrs: { "data-testid": "item" } },
+              use("Group", { props: { Gap: "2", Align: "center" } }, use("LucideIcon", { props: { Name: ref("g.icon"), Size: 16 } }), strong(ref("g.title"), "sm")),
+              use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" } }, groupLinks("g", "text-sm text-muted-foreground")))))]),
+          when(eq(ref("promo"), "card"), [use("Stack", { props: { Gap: "2", Class: surface("p-4") }, attrs: { "data-testid": "promo" } },
+            organism("MediaFrame", { alt: coalesce(ref("promoTitle"), ""), ratio: "4/3" }), strong(ref("promoTitle")), muted(ref("promoText"), "xs"))])))]),
+  ],
+});
+
+const sidebarNav = spec(`${O}sidebar-nav`, "SidebarNav", "A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full: icon and name, compact: icons only with the name hidden), user (show, hide), density.", {
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }],
+  props: [
+    { name: "label", type: "string", required: true },
+    { name: "brand", type: "string", required: true },
+    { name: "links", type: ts("NavLink[]"), required: true },
+    { name: "current", type: "string", default: "" },
+    { name: "userName", type: "string", required: true },
+    { name: "userEmail", type: "string", required: true },
+    { name: "width", type: tsOf("full", "compact"), default: "full" },
+    { name: "user", type: tsOf("show", "hide"), default: "show" },
+    { name: "density", type: tsOf("default", "compact"), default: "default" },
+  ],
+  view: [
+    use("Block", { props: { Tag: "aside", Class: cn("flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border", cond(eq(ref("width"), "compact"), "w-20 items-center", "w-64")) }, attrs: { "aria-label": ref("brand"), "data-testid": "sidebar", "data-width": ref("width") } },
+      use("Group", { props: { Gap: "2", Align: "center" } }, use("LucideIcon", { props: { Name: "layers", Size: 24 } }), use("Text", { props: { Size: "base", Weight: "bold", Class: cond(eq(ref("width"), "compact"), "sr-only", "") } }, text(ref("brand")))),
+      ifAny("links", [navBlockOf(ref("label"), "flex-1", undefined,
+        use("List", { props: { Class: cn("m-0 flex list-none flex-col p-0", cond(eq(ref("density"), "compact"), "gap-0", "gap-2")) }, attrs: { "data-testid": "items" } },
+          each(ref("links"), "l", ref("l.id"), use("ListItem", {},
+            menuEntry(ref("l.href"), { cls: cn("flex items-center gap-4 rounded px-4 text-sm", "py-2", cond(eq(ref("l.id"), ref("current")), "bg-muted font-semibold", "")), current: currentOf("l", ref("current")), testid: "item" },
+              use("LucideIcon", { props: { Name: ref("l.icon"), Size: 16 } }), use("Inline", { props: { Class: cond(eq(ref("width"), "compact"), "sr-only", "") } }, text(ref("l.name"))))))))]),
+      when(eq(ref("user"), "show"), [use("Group", { props: { Gap: "4", Align: "center", Class: "border-t border-border pt-4" }, attrs: { "data-testid": "user" } },
+        organism("MediaFrame", { alt: ref("userName"), ratio: "1/1", className: "size-10 shrink-0 rounded-full" }),
+        use("Stack", { props: { Gap: "0", Class: cond(eq(ref("width"), "compact"), "sr-only", "min-w-0") } }, strong(ref("userName"), "sm"), muted(ref("userEmail"), "xs")))])),
+  ],
+});
+
+const bottomNav = spec(`${O}bottom-nav`, "BottomNav", "An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show, hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.", {
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }],
+  props: [
+    { name: "label", type: "string", required: true },
+    { name: "tabs", type: ts("NavLink[]"), required: true },
+    { name: "current", type: "string", default: "" },
+    { name: "labels", type: tsOf("show", "hide"), default: "show" },
+    { name: "position", type: tsOf("static", "sticky"), default: "static" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [ifAny("tabs", [
+    use("Block", { props: { Tag: "nav", Class: cn("mx-auto w-full max-w-md border-t border-border", cond(eq(ref("tone"), "muted"), "bg-muted", "bg-background"), cond(eq(ref("position"), "sticky"), "sticky bottom-0 z-40", "")) }, attrs: { "aria-label": ref("label"), "data-testid": "bottom-nav", "data-position": ref("position") } },
+      use("List", { props: { Class: "m-0 grid list-none grid-flow-col auto-cols-fr p-0" }, attrs: { "data-testid": "items" } },
+        each(ref("tabs"), "tab", ref("tab.id"), use("ListItem", {},
+          menuEntry(ref("tab.href"), { cls: cn("flex flex-col items-center gap-2 py-2 text-xs", cond(eq(ref("tab.id"), ref("current")), "font-semibold text-primary", "text-muted-foreground")), current: currentOf("tab", ref("current")), testid: "item" },
+            use("LucideIcon", { props: { Name: ref("tab.icon"), Size: 20 } }), use("Inline", { props: { Class: cond(eq(ref("labels"), "hide"), "sr-only", "") } }, text(ref("tab.name"))))))))]),
+  ],
+});
+
+const sitemapFooter = spec(`${O}sitemap-footer`, "SitemapFooter", "A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above, equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none, first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status itself is a port contract.", {
+  typeImports: [{ from: "MegaMenu", names: ["MegaGroup"] }],
+  records: {
+    FooterSignup: groupFields(["mode", tsOf("none", "first"), "first: the sign-up comes before the links", "none"], ["title", "string"], ["label", "string", "accessible name of the email field"], ["submit", "string"]),
+    FooterStatus: groupFields(["mode", tsOf("none", "show"), "show: the status pill is drawn", "none"], ["label", "string", "text of the pill"]),
+  },
+  props: [
+    { name: "label", type: "string", required: true, docs: "accessible name of the link groups" },
+    { name: "brand", type: "string", required: true },
+    { name: "tagline", type: "string", required: true },
+    { name: "copyright", type: "string", required: true },
+    { name: "groups", type: ts("MegaGroup[]"), required: true },
+    { name: "signup", type: rec("FooterSignup"), docs: "a newsletter sign-up above the links" },
+    { name: "status", type: rec("FooterStatus"), docs: "a live status pill beside the copyright" },
+    { name: "id", type: "string", default: "footer" },
+    { name: "layout", type: tsOf("columns", "row", "card"), default: "columns", docs: "card: the groups in one rounded card (FooterCard)" },
+    { name: "density", type: tsOf("default", "compact"), default: "default" },
+  ],
+  view: (() => {
+    const card = organism("FooterCard", { label: ref("label"), brand: ref("brand"), groups: ref("groups") });
+    const classic = use("Block", { props: { Tag: "footer", Class: "mt-12 border-t border-border" }, attrs: { "data-testid": "site-footer", "data-layout": ref("layout") } },
+      use("Container", { props: { Class: cn(wide, "flex flex-col gap-8", cond(eq(ref("density"), "compact"), "py-6", "py-12")) }, attrs: { "data-slot": "container" } },
+        when(eq(ref("signup.mode"), "first"), [use("Stack", { props: { Gap: "4", Class: "max-w-md" }, attrs: { "data-testid": "signup" } },
+          heading(ref("signup.title"), "xl"), emailRow(ref("signup.label"), ref("signup.submit"), false))]),
+        when(eq(ref("layout"), "columns"),
+          [use("Box", { props: { Class: "flex flex-col gap-8 md:flex-row md:items-start md:gap-12" }, attrs: { "data-slot": "footer-top" } },
+            use("Stack", { props: { Gap: "2", Class: "md:w-64 md:shrink-0" } }, strong(ref("brand"), "xl", "bold"), muted(ref("tagline"))),
+            use("Box", { props: { Class: "min-w-0 flex-1" } }, organism("FooterColumns", { label: ref("label"), groups: ref("groups") })))],
+          [use("Group", { props: { Gap: "6", Align: "center", Justify: "between", Class: "flex-wrap" } },
+            strong(ref("brand"), "base", "bold"),
+            ifAny("groups", [navBlockOf(ref("label"), undefined, undefined, use("Group", { props: { Gap: "4", Class: "flex-wrap" } }, each(ref("groups"), "g", ref("g.id"), menuEntry(ref("g.href"), { cls: "text-sm", testid: "group" }, text(ref("g.title"))))))]))]),
+        use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "flex-wrap border-t border-border pt-6" } },
+          muted(ref("copyright")),
+          when(eq(ref("status.mode"), "show"), [organism("Pill", { tone: "green", icon: "circle-check" }, kids(text(ref("status.label"))))]))));
+    return [when(eq(ref("layout"), "card"), [card], [classic])];
+  })(),
+});
+
+export const navigationOrganisms: OrganismSpec[] = [navBar, menuEntrySpec, navLinks, navBarMenu, navActions, searchPalette, overMedia, megaMenu, sidebarNav, bottomNav, footerColumns, footerCard, sitemapFooter];
diff --git a/xgen/screens/src/authoring/blocks/organisms.ts b/xgen/screens/src/authoring/blocks/organisms.ts
new file mode 100644
index 0000000..6a8bbb8
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/organisms.ts
@@ -0,0 +1,74 @@
+import { dropDefaultProps, withLandmarkLabels } from "../landmarks";
+import { parts } from "../components/parts";
+import { patterns } from "../components/patterns";
+import { framePatterns } from "../components/frames";
+// Every organism of the catalog, in one list. The blocks read their axes from these specs.
+import { pricingCard } from "./pricing-card";
+import { siteOrganisms } from "./site";
+import { marketingOrganisms } from "./marketing";
+import { landingOrganisms } from "./landing";
+import { pricingOrganisms } from "./pricing-more";
+import { showcaseOrganisms } from "./showcase";
+import { navigationOrganisms } from "./navigation";
+import { workspaceOrganisms } from "./workspace";
+import { guideOrganisms } from "./guide";
+import { signupOrganisms } from "./signup";
+
+import { commerceOrganisms } from "./commerce";
+import { contentOrganisms } from "./content";
+import { templateOrganisms } from "./templates";
+import { promoOrganisms } from "./promo";
+import { accountOrganisms } from "./account";
+import { dashboardOrganisms } from "./dashboard";
+import { storefrontOrganisms } from "./storefront";
+import { deliveryOrganisms } from "./delivery";
+import { checkoutOrganisms } from "./checkout";
+import { checkoutParts } from "../components/checkout-parts";
+import { shopParts } from "../components/shop-parts";
+import { peopleParts } from "../components/people-parts";
+import { workParts } from "../components/work-parts";
+import { peopleOrganisms } from "./people";
+import { workOrganisms } from "./work";
+import { shellParts } from "../components/shell-parts";
+import { shellOrganisms } from "./shells";
+import { heroSplitParts } from "../components/hero-split-parts";
+import { heroSplitOrganisms } from "./hero-split";
+import { faqParts } from "../components/faq-parts";
+import { faqSplitOrganisms } from "./faq-split";
+import { ctaProofParts } from "../components/cta-proof-parts";
+import { ctaProofOrganisms } from "./cta-proof";
+import { quoteSplitParts } from "../components/quote-split-parts";
+import { quoteSplitOrganisms } from "./quote-split";
+import { postSplitParts } from "../components/post-split-parts";
+import { postSplitOrganisms } from "./post-split";
+import { footerSplitParts } from "../components/footer-split-parts";
+import { footerSplitOrganisms } from "./footer-split";
+import { featureSplitParts } from "../components/feature-split-parts";
+import { featureSplitOrganisms } from "./feature-split";
+import { pageTrailParts } from "../components/page-trail-parts";
+import { pageTrailOrganisms } from "./page-trail";
+import { postShowcaseParts } from "../components/post-showcase-parts";
+import { postShowcaseOrganisms } from "./post-showcase";
+import { mediaListParts } from "../components/media-list-parts";
+import { mediaListOrganisms } from "./media-list";
+import { featureShowcaseOrganisms } from "./feature-showcase";
+import { storyTabsParts } from "../components/story-tabs-parts";
+import { storyTabsOrganisms } from "./story-tabs";
+import { landmarkParts } from "../components/landmarks";
+
+export const allOrganisms = [
+  pricingCard, ...siteOrganisms, ...landingOrganisms, ...pricingOrganisms, ...showcaseOrganisms, ...navigationOrganisms, ...workspaceOrganisms,
+  ...guideOrganisms, ...signupOrganisms, ...marketingOrganisms, ...commerceOrganisms, ...contentOrganisms, ...templateOrganisms,
+  ...promoOrganisms, ...accountOrganisms, ...dashboardOrganisms, ...checkoutParts, ...shopParts, ...storefrontOrganisms, ...deliveryOrganisms,
+  ...checkoutOrganisms, ...peopleParts, ...workParts, ...peopleOrganisms, ...workOrganisms, ...shellParts, ...shellOrganisms,
+  ...heroSplitParts, ...heroSplitOrganisms, ...faqParts, ...faqSplitOrganisms,
+  ...ctaProofParts, ...ctaProofOrganisms, ...quoteSplitParts, ...quoteSplitOrganisms,
+  ...postSplitParts, ...postSplitOrganisms, ...footerSplitParts, ...footerSplitOrganisms,
+  ...featureSplitParts, ...featureSplitOrganisms, ...pageTrailParts, ...pageTrailOrganisms,
+  ...postShowcaseParts, ...postShowcaseOrganisms, ...mediaListParts, ...mediaListOrganisms,
+  ...featureShowcaseOrganisms, ...storyTabsParts, ...storyTabsOrganisms, ...landmarkParts
+];
+
+// every organism that holds a landmark takes `landmarkLabel` (authoring/landmarks.ts); run once, before any page composes them
+withLandmarkLabels([...allOrganisms, ...parts, ...patterns, ...framePatterns]);
+dropDefaultProps([...allOrganisms, ...parts, ...patterns, ...framePatterns]);
diff --git a/xgen/screens/src/authoring/blocks/page-trail.ts b/xgen/screens/src/authoring/blocks/page-trail.ts
new file mode 100644
index 0000000..7af83cd
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/page-trail.ts
@@ -0,0 +1,35 @@
+// The head of an inner page with its trail: breadcrumbs over the badge, the heading and the lead, with an optional aside at the end
+// (one large figure, a note card, or four key facts).
+import { cn, cond, eq, gt, len, ne, op, ref, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { wide } from "../components/frames";
+import { id, tsOf, toneLite } from "../props";
+
+const pageTrail = spec("organism.page-trail", "PageTrail", "The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts in two columns), tone.", {
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }, { from: "StatsBand", names: ["Stat"] }],
+  records: { PageExtras: fields(["value", "string"], ["caption", "string"], ["note", "string"], ["icon", "string"], ["facts", "Stat[]"]) },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "label", type: "string", required: true, docs: "accessible name of the breadcrumbs" },
+    { name: "crumbs", type: ts("NavLink[]"), required: true, docs: "the trail of pages (a parent_id chain): the parent pages, then the current page; empty: no breadcrumbs" },
+    { name: "extras", type: { record: "PageExtras" }, required: true, docs: "the figure or note (value, caption, note, icon) and the facts" },
+    { name: "aside", type: tsOf("none", "figure", "note", "facts"), default: "none" },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  derived: [{ name: "titleId", value: op("add", ref("id"), "-title") }],
+  view: [use("Block", { props: { Tag: "section", Class: cn("py-8", cond(eq(ref("tone"), "muted"), "bg-muted", "")) }, attrs: { "aria-labelledby": ref("titleId"), "data-testid": "section", "data-tone": ref("tone"), "data-aside": ref("aside") } },
+    use("Container", { props: { Class: cn(wide, "flex flex-col gap-6") }, attrs: { "data-slot": "container" } },
+      // no crumbs (a top page): no breadcrumb nav
+      when(gt(len(ref("crumbs")), 0), [organism("PageCrumbs", { label: ref("label"), crumbs: ref("crumbs") })]),
+      use("Box", { props: { Class: cond(eq(ref("aside"), "facts"), "grid grid-cols-1 items-center gap-8 lg:grid-cols-2", "flex flex-col gap-6 md:flex-row md:items-end md:justify-between") } },
+        use("Stack", { props: { Gap: "4", Align: "start", Class: "min-w-0" } },
+          organism("SectionHeader", { titleId: ref("titleId"), title: ref("title"), heading: { level: ref("level"), badge: ref("badge") }, lead: ref("lead") })),
+        when(ne(ref("aside"), "none"), [organism("PageAside", { extras: ref("extras"), mode: ref("aside") })]))))],
+});
+
+export const pageTrailOrganisms: OrganismSpec[] = [pageTrail];
diff --git a/xgen/screens/src/authoring/blocks/people.ts b/xgen/screens/src/authoring/blocks/people.ts
new file mode 100644
index 0000000..b186cb8
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/people.ts
@@ -0,0 +1,118 @@
+// The people of a company: the team in five shapes, the open jobs, a personal about section and the company culture.
+import { cn, cond, each, eq, len, ref, str, text, tpl, undef, use, when, organism, where } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { portrait, tags } from "../components/people-parts";
+import { empty, id, ifAny, orEmpty, title, tsOf, toneLite, denseLite } from "../props";
+import { heading, muted, strong, surface } from "../ux";
+import { menuEntry } from "../components/nav";
+
+const O = "organism.";
+const lead = { name: "lead", type: "string" as const, default: "" };
+const common = { id: ref("id"), title: ref("title"), lead: ref("lead"), tone: ref("tone"), density: ref("density") };
+const teamGrid = spec(`${O}team-grid`, "TeamGrid", "The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory), cols, tone, density.", {
+  records: { Member: fields(["id", "string"], ["name", "string"], ["role", "string"], ["dept", "string"], ["location", "string"], ["bio", "string"], ["skills", "string[]"]) },
+  props: [
+    id, title, lead,
+    { name: "members", type: ts("Member[]"), required: true },
+    empty,
+    { name: "depts", type: ts("Record<string, string>"), required: true, docs: "the name of each department" },
+    { name: "layout", type: tsOf("cards", "minimal", "detailed", "list", "directory"), default: "cards" },
+    { name: "cols", type: tsOf("1-3", "1-4"), default: "1-4" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ ...common, layout: cond(eq(ref("layout"), "list"), "split", "stack"), hasMedia: eq(ref("layout"), "list"), mediaSide: "start", mediaAlign: "start" }, [orEmpty("members", "users", [
+    use("Box", { props: { Class: cond(eq(ref("layout"), "minimal"), "grid grid-cols-2 gap-8 md:grid-cols-4", cond(eq(ref("layout"), "directory"), "grid grid-cols-1 gap-4 md:grid-cols-2", cond(eq(ref("layout"), "list"), "flex flex-col gap-4", cond(eq(ref("cols"), "1-3"), "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4")))) }, attrs: { "data-testid": "items" } },
+      each(ref("members"), "m", ref("m.id"),
+        when(eq(ref("layout"), "minimal"),
+          [use("Stack", { props: { Gap: "2", Align: "center", Class: "text-center" }, attrs: { "data-testid": "item" } }, portrait("m.name", "size-16"), strong(ref("m.name"), "sm"), muted(ref("m.role"), "xs"))],
+          [when(eq(ref("layout"), "cards"),
+            [use("Stack", { props: { Gap: "4", Class: surface("p-4") }, attrs: { "data-testid": "item" } },
+              organism("MediaFrame", { alt: ref("m.name"), ratio: "1/1" }),
+              use("Stack", { props: { Gap: "2" } }, use("Stack", { props: { Gap: "0" } }, strong(ref("m.name")), muted(ref("m.role"))), muted(ref("m.bio"))))],
+            [organism("MemberRow", { member: ref("m"), depts: ref("depts"), layout: ref("layout") })])])))]),
+  ], [organism("MediaFrame", { alt: ref("title"), ratio: "3/4" })])],
+});
+
+const jobBoard = spec(`${O}job-board`, "JobBoard", "Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place, the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide), tone.", {
+  records: { Job: fields(["id", "string"], ["title", "string"], ["dept", "string"], ["location", "string"], ["type", "string"], ["salary", "string"], ["posted", "string"], ["href", "string", true]), Department: fields(["id", "string"], ["name", "string"]), JobLabels: fields(["apply", "string"], ["caption", "string"], ["role", "string"], ["team", "string"], ["location", "string"], ["type", "string"], ["salary", "string"], ["count", "string"]) },
+  props: [
+    id, title, lead,
+    { name: "jobs", type: ts("Job[]"), required: true },
+    { name: "departments", type: ts("Department[]"), required: true },
+    { name: "labels", type: { record: "JobLabels" }, required: true },
+    { name: "layout", type: tsOf("grid", "grouped", "table"), default: "grid" },
+    { name: "salary", type: tsOf("show", "hide"), default: "hide" },
+    { name: "tone", type: toneLite, default: "default" },
+    empty,
+  ],
+  view: [frame({ ...common, density: "default", measure: cond(eq(ref("layout"), "grouped"), "3xl", "default") }, [orEmpty("jobs", "briefcase", [
+    when(eq(ref("layout"), "grouped"),
+      [use("Stack", { props: { Gap: "8", Align: "stretch" }, attrs: { "data-testid": "groups" } },
+        each(ref("departments"), "d", ref("d.id"),
+          use("Stack", { props: { Gap: "2", Align: "stretch" }, attrs: { "data-testid": "group" } },
+            use("Group", { props: { Gap: "4", Align: "baseline", Justify: "between" } }, heading(ref("d.name"), "lg"), muted(tpl(ref("labels.count"), len(where(ref("jobs"), "dept", ref("d.id")))), "xs")),
+            use("List", { props: { Tag: "ul", Class: "flex flex-col" } },
+              each(where(ref("jobs"), "dept", ref("d.id")), "j", ref("j.id"),
+                use("ListItem", { props: { Class: "flex flex-wrap items-center justify-between gap-4 border-b border-border py-4" }, attrs: { "data-testid": "item" } },
+                  use("Stack", { props: { Gap: "0" } }, menuEntry(ref("j.href"), { cls: "font-medium" }, text(ref("j.title"))), muted(tpl("{0}, {1}", ref("j.location"), ref("j.type")), "xs")),
+                  use("Badge", { props: { Variant: "outline", Size: "default" } }, text(ref("j.type")))))))))],
+      [organism("JobCards", { jobs: ref("jobs"), departments: ref("departments"), labels: ref("labels"), layout: ref("layout"), salary: ref("salary") })]),
+  ])])],
+});
+
+const aboutMe = spec(`${O}about-me`, "AboutMe", "A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills), mediaSide, tone.", {
+  typeImports: [{ from: "ProductInfo", names: ["Spec"] }, { from: "ErrorPage", names: ["LinkActions"] }],
+  records: { Skill: fields(["id", "string"], ["label", "string"], ["level", "number"]), AboutMeLabels: fields(["level", "string"]) },
+  props: [
+    id, title, lead,
+    { name: "badge", type: "string", default: "" },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "facts", type: ts("Spec[]"), required: true },
+    { name: "skills", type: ts("Skill[]"), required: true },
+    { name: "labels", type: { record: "AboutMeLabels" }, required: true },
+    { name: "actions", type: ts("LinkActions"), required: true },
+    { name: "layout", type: tsOf("facts", "skills"), default: "facts" },
+    { name: "mediaSide", type: tsOf("start", "end"), default: "start" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), level: ref("level"), layout: "split", hasMedia: true, mediaSide: ref("mediaSide"), tone: ref("tone"), density: "default" }, [
+    when(eq(ref("layout"), "facts"),
+      [ifAny("facts", [use("List", { props: { Tag: "ul", Class: "grid grid-cols-1 gap-4 sm:grid-cols-2" }, attrs: { "data-testid": "facts" } },
+        each(ref("facts"), "f", ref("f.id"),
+          use("ListItem", { props: { Class: surface("flex flex-col gap-0 p-4") }, attrs: { "data-testid": "fact" } }, muted(ref("f.label"), "xs"), strong(ref("f.value"), "sm"))))])],
+      [ifAny("skills", [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "skills" } },
+        each(ref("skills"), "s", ref("s.id"),
+          use("Stack", { props: { Gap: "2", Align: "stretch" }, attrs: { "data-testid": "skill" } },
+            use("Group", { props: { Gap: "4", Justify: "between" } }, strong(ref("s.label"), "sm"), muted(tpl(ref("labels.level"), ref("s.level")), "xs")),
+            use("Progress", { props: { Value: str(ref("s.level")), Max: "100" }, attrs: { "aria-label": ref("s.label") } }))))])]),
+    organism("ActionGroup", { primary: ref("actions.cta"), primaryHref: ref("actions.href"), secondary: cond(eq(ref("actions.mode"), "two"), ref("actions.secondary"), undef()), secondaryHref: ref("actions.secondaryHref"), align: "start" }),
+  ], [organism("MediaFrame", { alt: ref("title"), ratio: "3/4" })])],
+});
+
+const aboutCompany = spec(`${O}about-company`, "AboutCompany", "The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout (split: the pictures beside the text, stacked: the pictures under it), tone, density.", {
+  typeImports: [{ from: "StatsBand", names: ["Stat"] }, { from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    id, title, lead,
+    { name: "stats", type: ts("Stat[]"), required: true },
+    { name: "values", type: ts("Feature[]"), required: true },
+    { name: "layout", type: tsOf("split", "stacked"), default: "split" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ ...common, layout: cond(eq(ref("layout"), "split"), "split", "stack"), hasMedia: true, mediaSide: "start" }, [
+    ifAny("stats", [use("Grid", { props: { Cols: "2-4", Class: "gap-4" }, attrs: { "data-testid": "stats" } },
+      each(ref("stats"), "s", ref("s.id"),
+        use("Stack", { props: { Gap: "0" }, attrs: { "data-testid": "stat" } }, use("Text", { props: { Size: "3xl", Weight: "bold" } }, text(ref("s.value"))), muted(ref("s.label"), "xs"))))]),
+    ifAny("values", [use("Box", { props: { Class: cn("grid grid-cols-1 gap-4", cond(eq(ref("layout"), "stacked"), "md:grid-cols-3", "")) }, attrs: { "data-testid": "values" } },
+      each(ref("values"), "v", ref("v.id"),
+        use("Group", { props: { Gap: "4", Align: "start", Class: "border-t border-border pt-4" }, attrs: { "data-testid": "value" } },
+          use("LucideIcon", { props: { Name: ref("v.icon"), Size: 20 } }),
+          use("Stack", { props: { Gap: "2" } }, strong(ref("v.title"), "sm"), muted(ref("v.text"))))))]),
+  ], [use("Box", { props: { Class: "grid grid-cols-3 gap-4" }, attrs: { "data-testid": "strip" } },
+    organism("MediaFrame", { alt: ref("title"), ratio: "3/4" }), organism("MediaFrame", { alt: ref("title"), ratio: "3/4", className: "mt-8" }), organism("MediaFrame", { alt: ref("title"), ratio: "3/4" }))])],
+});
+
+export const peopleOrganisms: OrganismSpec[] = [teamGrid, jobBoard, aboutMe, aboutCompany];
diff --git a/xgen/screens/src/authoring/blocks/post-showcase.ts b/xgen/screens/src/authoring/blocks/post-showcase.ts
new file mode 100644
index 0000000..7b57e48
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/post-showcase.ts
@@ -0,0 +1,41 @@
+// Posts shown off: four small cards beside an intro with a view-all link, one featured post beside its picture, or cards
+// with the text on a panel over the picture in two or three columns.
+import { cond, eachAt, eq, lt, ref, text, use, when, organism } from "../../build";
+import type { OrganismSpec, Value, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { empty, id, orEmpty, tsOf, toneLite } from "../props";
+
+const postShowcase = spec("organism.post-showcase", "PostShowcase", "Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured: the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3: overlay columns), mediaSide, tone.", {
+  typeImports: [{ from: "PostCard", names: ["Post", "PostLabels"] }, { from: "SectionFrame", names: ["HeadLink"] }],
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "posts", type: ts("Post[]"), required: true },
+    { name: "labels", type: ts("PostLabels"), required: true },
+    { name: "action", type: ts("HeadLink"), required: true, docs: "the view-all link of the intro layout" },
+    { name: "layout", type: tsOf("intro", "featured", "overlay"), default: "intro" },
+    { name: "cols", type: tsOf("2", "3"), default: "3" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "start" },
+    { name: "tone", type: toneLite, default: "default" },
+    empty,
+  ],
+  view: (() => {
+    const is = (l: string) => eq(ref("layout"), l);
+    const head = { id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), tone: ref("tone") };
+    const firstPosts = (n: Value, node: ViewNode): ViewNode => eachAt(ref("posts"), "p", "i", ref("p.id"), when(lt(ref("i"), n), [node]));
+    const intro = frame({ ...head, layout: "split", hasMedia: true, mediaSide: ref("mediaSide") }, [
+      use("Link", { props: { Href: ref("action.href"), Size: "sm" }, attrs: { "data-testid": "section-action" } }, text(ref("action.label")), use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } })),
+    ], [use("Box", { props: { Class: "grid grid-cols-1 gap-4 sm:grid-cols-2" } }, firstPosts(4, organism("PostMiniCard", { p: ref("p"), labels: ref("labels") })))]);
+    const featured = frame({ ...head, layout: "split", hasMedia: true, mediaSide: ref("mediaSide") },
+      [firstPosts(1, organism("PostFeature", { p: ref("p"), labels: ref("labels") }))],
+      [organism("MediaFrame", { alt: ref("title"), ratio: "4/3" })]);
+    const overlay = frame(head, [use("Box", { props: { Class: cond(eq(ref("cols"), "2"), "grid grid-cols-1 gap-6 md:grid-cols-2", "grid grid-cols-1 gap-6 md:grid-cols-3") } },
+      eachAt(ref("posts"), "p", "i", ref("p.id"), when(lt(ref("i"), cond(eq(ref("cols"), "2"), 2, 3)), [organism("PostOverlayCard", { p: ref("p"), labels: ref("labels"), ratio: cond(eq(ref("cols"), "2"), "16/9", "4/3") })])))]);
+    return [orEmpty("posts", "newspaper", [when(is("intro"), [intro], [when(is("featured"), [featured], [overlay])])], (n) => [frame(head, n)])];
+  })(),
+});
+
+export const postShowcaseOrganisms: OrganismSpec[] = [postShowcase];
diff --git a/xgen/screens/src/authoring/blocks/post-split.ts b/xgen/screens/src/authoring/blocks/post-split.ts
new file mode 100644
index 0000000..8f5116a
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/post-split.ts
@@ -0,0 +1,50 @@
+// The top of a post page with more around the title: centered with figures and a share card over a wide cover, or a split beside the
+// cover with the author, the figures, the tags and the actions, or an outline of facts and related reading beside the cover.
+import { cond, eq, ne, ref, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { id, ifAny, tsOf, toneLite } from "../props";
+
+const postSplit = spec("organism.post-split", "PostSplit", "A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags, figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair, wide, icons), tone.", {
+  typeImports: [{ from: "PostCard", names: ["Post"] }, { from: "NavBar", names: ["NavLink"] }],
+  records: {
+    PostExtras: fields(["role", "string"], ["bio", "string"], ["views", "string"], ["likes", "string"], ["tags", "NavLink[]"], ["outline", "NavLink[]"]),
+    PostSplitLabels: fields(["minutes", "string"], ["views", "string"], ["likes", "string"], ["share", "string"], ["save", "string"], ["read", "string"], ["related", "string"]),
+  },
+  props: [
+    id,
+    { name: "post", type: ts("Post"), required: true },
+    { name: "labels", type: { record: "PostSplitLabels" }, required: true, docs: "templates: minutes `{0} min read`, views `{0} views`, likes `{0} likes`; the words of the buttons and of the related heading" },
+    { name: "extras", type: { record: "PostExtras" }, required: true },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "layout", type: tsOf("center", "split", "outline"), default: "split" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "author", type: tsOf("line", "card", "bio"), default: "line" },
+    { name: "cover", type: tsOf("wide", "square"), default: "wide" },
+    { name: "actions", type: tsOf("pair", "wide", "icons"), default: "pair" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: (() => {
+    const is = (l: string) => eq(ref("layout"), l);
+    const base = { post: ref("post"), extras: ref("extras"), labels: ref("labels") };
+    const head = { id: ref("id"), title: ref("post.title"), lead: ref("post.excerpt"), badge: ref("post.category"), level: ref("level"), tone: ref("tone"), hasMedia: true };
+    // emptyMode omit: no tags, no tag row; no outline facts, no outline column
+    const tags = (align: string) => ifAny("extras.tags", [organism("PostTags", { tags: ref("extras.tags"), align })]);
+    const cover = organism("MediaFrame", { alt: ref("post.title"), ratio: cond(is("center"), "21/9", cond(eq(ref("cover"), "square"), "1/1", "4/3")) });
+    return [when(is("center"), [frame({ ...head, align: "center" }, [
+      tags("center"),
+      organism("PostStats", { ...base, align: "center" }),
+      organism("PostAuthor", { ...base, mode: "card", share: true, className: "mx-auto w-full max-w-md" }),
+    ], [cover])], [frame({ ...head, layout: "split", mediaSide: ref("mediaSide") }, [
+      when(is("outline"), [ifAny("extras.outline", [organism("PostOutline", base)])], [
+        organism("PostAuthor", { ...base, mode: ref("author") }),
+        when(ne(ref("author"), "line"), [organism("PostStats", base)]),
+        tags("start"),
+      ]),
+      organism("PostActions", { labels: ref("labels"), mode: ref("actions") }),
+    ], [cover])])];
+  })(),
+});
+
+export const postSplitOrganisms: OrganismSpec[] = [postSplit];
diff --git a/xgen/screens/src/authoring/blocks/pricing-card.ts b/xgen/screens/src/authoring/blocks/pricing-card.ts
new file mode 100644
index 0000000..76a3de7
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/pricing-card.ts
@@ -0,0 +1,61 @@
+// The PricingCard organism, built from primitives: Card, Title, Badge, Text, List, Button.
+import { and, call, cn, cond, eq, each, ref, slot, text, tpl, use, when, op } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { cardBase } from "../kit";
+
+export const pricingCard: OrganismSpec = {
+  $schema: "../../schema/schemas/organism.schema.json",
+  specVersion: 1,
+  id: "organism.pricing-card",
+  name: "PricingCard",
+  docs: "A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more actions. Text comes in through `labels`; the plan is data.",
+  records: {
+    Plan: [
+      { name: "id", type: "string" }, { name: "name", type: "string" }, { name: "tagline", type: "string" },
+      { name: "price", type: "number" }, { name: "currency", type: "string" }, { name: "seats", type: "number" },
+      { name: "storage", type: "number" }, { name: "highlighted", type: "boolean" }, { name: "status", type: "string", optional: true },
+      { name: "features", type: "string[]" }, { name: "yearly", type: "number" },
+    ],
+    PricingCardLabels: [
+      { name: "popular", type: "string" }, { name: "perMonth", type: "string" }, { name: "seats", type: "string" },
+      { name: "storage", type: "string" }, { name: "cta", type: "string" }, { name: "free", type: "string" }, { name: "perYear", type: "string" },
+      { name: "empty", type: "string" },
+    ],
+  },
+  props: [
+    { name: "plan", type: { record: "Plan" }, required: true },
+    { name: "labels", type: { record: "PricingCardLabels" }, required: true },
+    { name: "current", type: "boolean", docs: "marks the plan as the chosen one" },
+    { name: "emphasis", type: { ts: '"auto" | "off"' }, default: "auto", docs: "auto: the highlighted plan stands out; off: all plans alike" },
+    { name: "density", type: { ts: '"default" | "compact"' }, default: "default", docs: "compact: tighter content" },
+    { name: "billing", type: { ts: '"monthly" | "annual"' }, default: "monthly", docs: "annual: the yearly price of the plan, when it has one" },
+  ],
+  derived: [
+    { name: "stand", value: and(ref("plan.highlighted"), eq(ref("emphasis"), "auto")) },
+    { name: "yearlyOn", value: and(eq(ref("billing"), "annual"), op("gt", ref("plan.yearly"), 0)) },
+    { name: "amount", value: cond(ref("yearlyOn"), ref("plan.yearly"), ref("plan.price")) },
+  ],
+  slots: [{ name: "footer", args: [{ name: "plan", type: { record: "Plan" } }], docs: "more content in the footer; receives the plan" }],
+  events: [{ name: "select", args: [{ name: "id", type: "string" }], docs: "the call to action was pressed" }],
+  view: [
+    use("Block", { props: { Tag: "article", Class: cn(cardBase(), "flex h-full flex-col") }, attrs: { "data-slot": "card", "data-highlighted": cond(ref("stand"), "true", "false"), "data-current": cond(ref("current"), "true", "false") } },
+      use("CardHeader", { props: { Class: "flex flex-col gap-2" } },
+        use("Box", { props: { Class: "flex min-h-6 items-center" }, attrs: { "data-slot": "badge-slot" } },
+          when(ref("stand"), [use("Badge", { props: { Variant: "default", Size: "default" } }, text(ref("labels.popular")))])),
+        use("CardTitle", { props: { As: 3 } }, text(ref("plan.name"))),
+        use("CardDescription", {}, text(ref("plan.tagline")))),
+      use("CardContent", { props: { Class: cn("flex flex-1 flex-col", cond(eq(ref("density"), "compact"), "gap-2", "gap-4")) } },
+        use("Group", { props: { Gap: "2", Align: "baseline" } },
+          use("Title", { props: { As: 2, Size: "4xl", Weight: "bold" } },
+            when(eq(ref("amount"), 0), [text(ref("labels.free"))], [text(op("money", ref("amount"), ref("plan.currency")))])),
+          when(op("gt", ref("amount"), 0), [use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(cond(ref("yearlyOn"), ref("labels.perYear"), ref("labels.perMonth"))))])),
+        use("Text", { props: { Size: "sm", Weight: "medium" } }, text(tpl(ref("labels.seats"), ref("plan.seats")))),
+        use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(tpl(ref("labels.storage"), ref("plan.storage")))),
+        use("List", { props: { Tag: "ul", Class: "flex flex-col gap-2 text-sm" } },
+          each(ref("plan.features"), "feature", ref("feature"), use("ListItem", { props: { Class: "flex gap-2" } }, text(ref("feature")))))),
+      use("CardFooter", { props: { Class: "flex flex-wrap items-center gap-2" } },
+        use("Button", { props: { Variant: cond(ref("stand"), "default", "outline"), Size: "default" }, on: { click: call("emit.select", ref("plan.id")) }, attrs: { "data-testid": "plan-select" } }, text(ref("labels.cta"))),
+        slot("footer", ref("plan")))),
+  ],
+  portable: { svelte: true, react: true },
+};
diff --git a/xgen/screens/src/authoring/blocks/pricing-more.ts b/xgen/screens/src/authoring/blocks/pricing-more.ts
new file mode 100644
index 0000000..78155f5
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/pricing-more.ts
@@ -0,0 +1,102 @@
+// Pricing organisms beyond the tiers: a comparison table (plans or competitors as columns), a usage calculator, a grid of credit packs.
+import { at, call, cn, cond, each, eq, mul, money, ne, or, ref, text, tpl, use, when, organism, len, and, gt, count } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, groupFields, rec, requireFields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { empty, id, orEmpty, title, tsOf, toneLite, denseLite } from "../props";
+import { muted, strong, fitCols } from "../ux";
+import { compareMark } from "../components/compare";
+
+const O = "organism.";
+const markOf = (value: ReturnType<typeof ref>) => organism("CompareMark", { value, yes: ref("labels.yes"), no: ref("labels.no") });
+
+
+const comparisonTable = spec(`${O}comparison-table`, "ComparisonTable", "Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle column), tone, density.", {
+  records: {
+    CompareRow: fields(["id", "string"], ["label", "string"], ["a", "string"], ["b", "string"], ["c", "string"]),
+    CompareLabels: fields(["caption", "string"], ["feature", "string"], ["a", "string"], ["b", "string"], ["c", "string"], ["yes", "string"], ["no", "string"]),
+  },
+  props: [
+    id, title,
+    { name: "rows", type: ts("CompareRow[]"), required: true },
+    empty,
+    { name: "labels", type: { record: "CompareLabels" }, required: true },
+    { name: "highlight", type: tsOf("none", "middle"), default: "none", docs: "middle: the second column stands out" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density") }, [orEmpty("rows", "table", [
+    use("Box", { props: { Class: "relative w-full overflow-x-auto" } },
+      use("Table", { props: { Class: "w-full text-left text-sm" }, attrs: { "data-testid": "compare" } },
+        use("TableCaption", { props: { Class: "sr-only" } }, text(ref("labels.caption"))),
+        use("TableHead", {}, use("TableRow", {},
+          use("TableHeadCell", { props: { Scope: "col", Class: "py-4" } }, text(ref("labels.feature"))),
+          use("TableHeadCell", { props: { Scope: "col", Class: "py-4" } }, text(ref("labels.a"))),
+          use("TableHeadCell", { props: { Scope: "col", Class: cn("py-4", cond(eq(ref("highlight"), "middle"), "bg-muted", "")) }, attrs: { "data-highlight": cond(eq(ref("highlight"), "middle"), "true", "false") } }, text(ref("labels.b"))),
+          use("TableHeadCell", { props: { Scope: "col", Class: "py-4" } }, text(ref("labels.c"))))),
+        use("TableBody", {}, each(ref("rows"), "row", ref("row.id"),
+          use("TableRow", { props: { Class: "border-t border-border" }, attrs: { "data-testid": "item" } },
+            use("TableHeadCell", { props: { Scope: "row", Class: cn("font-medium", cond(eq(ref("density"), "compact"), "py-2", "py-4")) } }, text(ref("row.label"))),
+            use("TableCell", { props: { Class: cn(cond(eq(ref("density"), "compact"), "py-2", "py-4")) } }, markOf(ref("row.a"))),
+            use("TableCell", { props: { Class: cn(cond(eq(ref("density"), "compact"), "py-2", "py-4"), cond(eq(ref("highlight"), "middle"), "bg-muted font-semibold", "")) } }, markOf(ref("row.b"))),
+            use("TableCell", { props: { Class: cond(eq(ref("density"), "compact"), "py-2", "py-4") } }, markOf(ref("row.c")))))))),])
+  ])],
+});
+
+const usageCalculator = spec(`${O}usage-calculator`, "UsageCalculator", "A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the largest amount under the slider, hide), tone.", {
+  records: {
+    UsageSlider: requireFields(groupFields(["min", "number"], ["max", "number"], ["label", "string", "accessible name of the slider"], ["unit", "string", "template of an amount, e.g. `{0} credits`"]), "min", "max", "label", "unit"),
+    UsagePrice: requireFields(groupFields(["rate", "number", "price of one unit in minor units (cents)"], ["currency", "string"], ["label", "string", "name of the estimate"]), "rate", "currency", "label"),
+  },
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "usage", type: "number", required: true, docs: "the chosen amount" },
+    { name: "slider", type: rec("UsageSlider"), required: true, docs: "the range of the slider and its labels" },
+    { name: "price", type: rec("UsagePrice"), required: true, docs: "how the estimate is computed and named" },
+    { name: "cta", type: "string", required: true },
+    { name: "href", type: "string" },
+    { name: "layout", type: tsOf("card", "plain"), default: "card" },
+    { name: "ends", type: tsOf("show", "hide"), default: "show" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  events: [{ name: "usage", args: [{ name: "value", type: "string" }], docs: "the slider moved" }],
+  view: [frame({ id: ref("id"), title: ref("title"), lead: ref("text"), tone: ref("tone"), align: "center" }, [
+    use("Stack", { props: { Gap: "4", Align: "stretch", Class: cn("mx-auto w-full max-w-xl", cond(eq(ref("layout"), "card"), "rounded bg-card p-6 inset-ring inset-ring-border", "")) }, attrs: { "data-testid": "usage" } },
+      use("Group", { props: { Justify: "between", Align: "baseline" } }, strong(tpl(ref("slider.unit"), ref("usage")), "xl", "bold"), muted(ref("slider.label"))),
+      use("Range", { props: { Min: ref("slider.min"), Max: ref("slider.max"), Value: ref("usage"), AriaLabel: ref("slider.label") }, on: { input: call("emit.usage", ref("event.value")) }, attrs: { "data-testid": "slider" } }),
+      when(eq(ref("ends"), "show"), [use("Group", { props: { Justify: "between" }, attrs: { "data-testid": "ends" } }, muted(tpl(ref("slider.unit"), ref("slider.min")), "xs"), muted(tpl(ref("slider.unit"), ref("slider.max")), "xs"))]),
+      use("Group", { props: { Justify: "between", Align: "center", Class: "flex-wrap" } },
+        use("Stack", { props: { Gap: "0" } }, muted(ref("price.label"), "xs"), use("Text", { props: { Size: "4xl", Weight: "bold" }, attrs: { "data-testid": "estimate" } }, text(money(mul(ref("usage"), ref("price.rate")), ref("price.currency"))))),
+        use("Button", { props: { Variant: "default", Size: "default", Href: ref("href") }, attrs: { "data-testid": "submit" } }, text(ref("cta"))))),
+  ])],
+});
+
+const creditPacks = spec(`${O}credit-packs`, "CreditPacks", "Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile, row), tone, density.", {
+  records: { Pack: fields(["id", "string"], ["name", "string"], ["credits", "number"], ["price", "number"], ["currency", "string"], ["badge", "string"]) },
+  props: [
+    id, title,
+    { name: "packs", type: ts("Pack[]"), required: true },
+    empty,
+    { name: "badges", type: ts("Record<string, string>"), required: true, docs: "badge word by pack badge (popular, best)" },
+    { name: "buy", type: "string", required: true },
+    { name: "cols", type: tsOf("2", "4"), default: "4" },
+    { name: "item", type: tsOf("tile", "row"), default: "tile" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density"), measure: cond(eq(ref("item"), "row"), "2xl", "default") }, [orEmpty("packs", "coins", [
+    use("Grid", { props: { Cols: cond(eq(ref("item"), "row"), "1", fitCols(cond(eq(ref("cols"), "2"), "1-2", "1-4"), len(ref("packs")))), Class: "gap-4" }, attrs: { "data-testid": "items" } },
+      each(ref("packs"), "pack", ref("pack.id"),
+        use("Card", { props: { Variant: "default", Class: cn("h-full", cond(eq(ref("item"), "row"), "gap-4 p-4", cond(eq(ref("density"), "compact"), "gap-4 p-4", ""))) }, attrs: { "data-testid": "item", "data-badge": ref("pack.badge") } },
+          use("CardContent", { props: { Class: cn("flex h-full gap-4", cond(eq(ref("item"), "row"), "flex-row flex-wrap items-center justify-between", "flex-col")) } },
+            use("Stack", { props: { Gap: "2", Align: "start", Class: cn("min-w-0", cond(eq(ref("item"), "row"), "flex-1", "")) } },
+              when(or(ref("pack.badge"), and(ne(ref("item"), "row"), gt(count(ref("packs"), "badge"), 0))), [use("Box", { props: { Class: "flex min-h-6 items-center" }, attrs: { "data-slot": "badge-slot" } },
+                when(ref("pack.badge"), [use("Badge", { props: { Variant: "default", Size: "default", Class: "w-fit shrink-0" }, attrs: { "data-testid": "badge" } }, text(at(ref("badges"), ref("pack.badge"))))]))]),
+              use("Stack", { props: { Gap: "0", Class: "min-w-0" } }, use("Title", { props: { As: 3, Size: "xl", Weight: "bold" } }, text(ref("pack.name"))),
+                use("Text", { props: { Size: "2xl", Weight: "bold" } }, text(money(ref("pack.price"), ref("pack.currency")))))),
+            use("Button", { props: { Variant: cond(eq(ref("pack.badge"), "popular"), "default", "outline"), Size: "sm", Type: "button", Class: cn("w-fit shrink-0", cond(eq(ref("item"), "row"), "", "mt-auto")) }, attrs: { "data-testid": "buy" } }, text(ref("buy"))))))),])
+  ])],
+});
+
+export const pricingOrganisms: OrganismSpec[] = [compareMark, comparisonTable, usageCalculator, creditPacks];
diff --git a/xgen/screens/src/authoring/blocks/promo.ts b/xgen/screens/src/authoring/blocks/promo.ts
new file mode 100644
index 0000000..c1c332e
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/promo.ts
@@ -0,0 +1,150 @@
+// Promo and support organisms: announcement bar, cookie banner, newsletter form, contact form, support channels.
+import { and, cn, gt, len, cond, each, eq, ref, text, undef, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame, wide } from "../components/frames";
+import { empty, id, orEmpty, title, tone, tsOf, toneLite } from "../props";
+import { checkRow, fid, inputField, kids, textField } from "../forms";
+import { menuEntry } from "../components/nav";
+
+const O = "organism.";
+
+const announcementBar = spec(`${O}announcement-bar`, "AnnouncementBar", "A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default, muted), layout (center, split), dismiss (show, hide).", {
+  props: [
+    { name: "label", type: "string", required: true, docs: "accessible name of the strip" },
+    { name: "text", type: "string", required: true },
+    { name: "cta", type: "string", docs: "text of the link" },
+    { name: "ctaHref", type: "string" },
+    { name: "icon", type: "string", default: "megaphone", docs: "Lucide name" },
+    { name: "dismissLabel", type: "string", required: true, docs: "accessible name of the close button" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "layout", type: tsOf("center", "split"), default: "center" },
+    { name: "dismiss", type: tsOf("show", "hide"), default: "hide" },
+    { name: "badgeLabel", type: "string", docs: "the tag before the sentence, e.g. New" },
+    { name: "badge", type: tsOf("none", "show"), default: "none" },
+    { name: "position", type: tsOf("top", "bottom"), default: "top", docs: "bottom: stays at the bottom edge of the page while it scrolls" },
+  ],
+  view: [
+    use("Block", { props: { Tag: "aside", Class: cn("w-full", cond(eq(ref("position"), "bottom"), "sticky bottom-0 z-40 border-t border-border", ""), cond(eq(ref("tone"), "muted"), "bg-muted text-foreground", "bg-primary text-primary-foreground")) }, attrs: { "aria-label": ref("label"), "data-testid": "announcement", "data-layout": ref("layout") } },
+      use("Container", { props: { Class: cn(wide, "flex items-center gap-4 py-2", cond(eq(ref("layout"), "split"), "justify-between", "justify-center")) }, attrs: { "data-slot": "container" } },
+        use("Group", { props: { Gap: "4", Align: "center", Class: cn("min-w-0 flex-wrap", cond(and(eq(ref("layout"), "center"), eq(ref("dismiss"), "show")), "ml-auto", "")) } },
+          use("LucideIcon", { props: { Name: ref("icon"), Size: 16 } }),
+          when(eq(ref("badge"), "show"), [use("Inline", { props: { Class: "rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current" }, attrs: { "data-testid": "announcement-badge" } }, text(ref("badgeLabel")))]),
+          use("Text", { props: { Size: "sm" } }, text(ref("text"))),
+          when(ref("cta"), [use("LinkPlain", { props: { Href: ref("ctaHref"), Class: "inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4" }, attrs: { "data-testid": "announcement-cta" } },
+            text(ref("cta")), use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } }))])),
+        when(eq(ref("dismiss"), "show"), [use("Button", { props: { Variant: "ghost", Size: "sm", Class: "ml-auto shrink-0 text-current", Type: "button" }, attrs: { "aria-label": ref("dismissLabel"), "data-testid": "dismiss" } },
+          use("LucideIcon", { props: { Name: "x", Size: 16 } }))]))),
+  ],
+});
+
+const cookieBanner = spec(`${O}cookie-banner`, "CookieBanner", "A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings. Axes: layout (bar, card), actions (two, three), tone (default, muted).", {
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "accept", type: "string", required: true },
+    { name: "decline", type: "string", required: true },
+    { name: "settings", type: "string", docs: "text of the third button, shown when `actions` is three" },
+    { name: "layout", type: tsOf("bar", "card"), default: "bar" },
+    { name: "actions", type: tsOf("two", "three"), default: "two" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [
+    use("Block", { props: { Tag: "section" }, attrs: { "aria-labelledby": fid("title"), "data-testid": "cookie", "data-layout": ref("layout") } },
+      use("Container", { props: { Class: cn(wide, "py-4") }, attrs: { "data-slot": "container" } },
+        use("Box", { props: { Class: cn("flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border", cond(eq(ref("tone"), "muted"), "bg-muted", "bg-card"), cond(eq(ref("layout"), "bar"), "md:flex-row md:items-center md:justify-between", "mx-auto w-full max-w-md")) } },
+          use("Group", { props: { Gap: "4", Align: "start", Class: "min-w-0" } },
+            use("LucideIcon", { props: { Name: "cookie", Size: 24 } }),
+            use("Stack", { props: { Gap: "2" } },
+              use("Title", { props: { As: 2, Size: "base", Weight: "bold" }, attrs: { id: fid("title") } }, text(ref("title"))),
+              use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("text"))))),
+          use("Group", { props: { Gap: "2", Class: "shrink-0 flex-wrap" } },
+            when(and(eq(ref("actions"), "three"), ref("settings")), [use("Button", { props: { Variant: "ghost", Size: "sm", Type: "button" }, attrs: { "data-testid": "cookie-settings" } }, text(ref("settings")))]),
+            use("Button", { props: { Variant: "outline", Size: "sm", Type: "button" }, attrs: { "data-testid": "cookie-decline" } }, text(ref("decline"))),
+            use("Button", { props: { Variant: "default", Size: "sm", Type: "button" }, attrs: { "data-testid": "cookie-accept" } }, text(ref("accept"))))))),
+  ],
+});
+
+const newsletterForm = spec(`${O}newsletter-form`, "NewsletterForm", "An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start, center).", {
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "label", type: "string", required: true, docs: "accessible name of the email field" },
+    { name: "submit", type: "string", required: true },
+    { name: "consent", type: "string", docs: "the consent line, shown when `terms` is show" },
+    { name: "layout", type: tsOf("inline", "stacked", "split"), default: "inline" },
+    { name: "terms", type: tsOf("show", "hide"), default: "hide" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "align", type: tsOf("start", "center"), default: "center" },
+  ],
+  view: [frame(
+    { id: ref("id"), title: ref("title"), lead: ref("text"), tone: ref("tone"), align: ref("align"), layout: cond(eq(ref("layout"), "split"), "split", "stack"), hasMedia: eq(ref("layout"), "split") },
+    [use("Form", { props: { Method: "dialog", Class: cn("w-full max-w-md", cond(eq(ref("align"), "center"), "mx-auto", "")) }, attrs: { "data-testid": "newsletter-form" } },
+      use("Label", { props: { HTMLFor: fid("email"), Class: "sr-only" } }, text(ref("label"))),
+      use("Group", { props: { Gap: "2", Align: "start", Class: cn("w-full", cond(eq(ref("layout"), "stacked"), "flex-col items-stretch", "flex-wrap")) } },
+        use("Input", { props: { Type: "email", Name: "email", Class: "min-w-0 flex-1" }, attrs: { id: fid("email"), "data-testid": "field" } }),
+        use("Button", { props: { Variant: "default", Size: "default", Type: "submit" }, attrs: { "data-testid": "submit" } }, text(ref("submit")))),
+      when(and(eq(ref("terms"), "show"), ref("consent")), [use("Text", { props: { Size: "xs", Class: "text-muted-foreground" }, attrs: { "data-testid": "consent" } }, text(ref("consent")))]))],
+    [organism("MediaFrame", { alt: ref("title"), ratio: "4/3" })])],
+});
+
+const contactForm = spec(`${O}contact-form`, "ContactForm", "A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone (default, muted).", {
+  records: { ContactLabels: fields(["name", "string"], ["email", "string"], ["subject", "string"], ["message", "string"], ["consent", "string"], ["submit", "string"]) },
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    id, title,
+    { name: "text", type: "string", required: true },
+    { name: "labels", type: { record: "ContactLabels" }, required: true },
+    { name: "details", type: ts("Feature[]"), required: true, docs: "the ways to reach us, shown beside the form in the split layout" },
+    { name: "layout", type: tsOf("single", "split"), default: "single" },
+    { name: "fields", type: tsOf("short", "full"), default: "full" },
+    { name: "terms", type: tsOf("show", "hide"), default: "hide" },
+    { name: "level", type: ts("1 | 2"), default: 2 },
+    { name: "page", type: tsOf("section", "full"), default: "section", docs: "full: a page of its own, a narrow form in the middle with a roomy heading" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), lead: ref("text"), level: ref("level"), tone: ref("tone"), density: cond(eq(ref("page"), "full"), "roomy", "default"), align: cond(eq(ref("page"), "full"), "center", "start"), measure: cond(eq(ref("layout"), "single"), "xl", "default") }, [
+    use("Grid", { props: { Cols: cond(eq(ref("layout"), "split"), "1-2", "1"), Class: "items-start gap-8" } },
+      use("Form", { props: { Method: "dialog", Class: "w-full gap-4" }, attrs: { "data-testid": "contact-form" } },
+        when(eq(ref("fields"), "full"), [inputField("name", "text", ref("labels.name"), "name")]),
+        inputField("email", "email", ref("labels.email"), "email"),
+        when(eq(ref("fields"), "full"), [inputField("subject", "text", ref("labels.subject"))]),
+        textField("message", ref("labels.message")),
+        when(eq(ref("terms"), "show"), [checkRow("consent", ref("labels.consent"))]),
+        use("Button", { props: { Variant: "default", Size: "default", Type: "submit", Class: "w-fit" }, attrs: { "data-testid": "submit" } }, text(ref("labels.submit")))),
+      when(and(eq(ref("layout"), "split"), gt(len(ref("details")), 0)), [use("Stack", { props: { Gap: "4" }, attrs: { "data-testid": "details" } },
+        each(ref("details"), "d", ref("d.id"),
+          use("Group", { props: { Gap: "4", Align: "start" }, attrs: { "data-testid": "detail" } },
+            use("LucideIcon", { props: { Name: ref("d.icon"), Size: 20 } }),
+            use("Stack", { props: { Gap: "0" } },
+              use("Text", { props: { Size: "base", Weight: "semibold" } }, text(ref("d.title"))),
+              use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("d.text")))))))])),
+  ])],
+});
+
+const supportChannels = spec(`${O}support-channels`, "SupportChannels", "Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout (grid, list), columns, action (link, none), tone (default, muted).", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    id, title,
+    { name: "channels", type: ts("Feature[]"), required: true },
+    empty,
+    { name: "open", type: "string", required: true, docs: "text of the link of each channel" },
+    { name: "layout", type: tsOf("grid", "list"), default: "grid" },
+    { name: "cols", type: tsOf("1-2", "1-3"), default: "1-3" },
+    { name: "action", type: tsOf("link", "none"), default: "link" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone") }, [orEmpty("channels", "life-buoy", [
+    use("Grid", { props: { Cols: cond(eq(ref("layout"), "list"), "1", ref("cols")), Class: "gap-4" }, attrs: { "data-testid": "items" } },
+      each(ref("channels"), "c", ref("c.id"),
+        use("Card", { props: { Variant: "default", Class: cn("h-full", cond(eq(ref("layout"), "list"), "flex-row items-center", "")) }, attrs: { "data-testid": "item" } },
+          use("CardContent", { props: { Class: cn("flex flex-1 gap-4", cond(eq(ref("layout"), "list"), "items-center", "flex-col")) } },
+            use("LucideIcon", { props: { Name: ref("c.icon"), Size: 24 } }),
+            use("Stack", { props: { Gap: "2", Class: "flex-1" } },
+              use("Title", { props: { As: 3, Size: "base", Weight: "bold" } }, text(ref("c.title"))),
+              use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("c.text")))),
+            when(eq(ref("action"), "link"), [menuEntry(ref("c.href"), { cls: "font-semibold", testid: "open" }, text(ref("open")))]))))),])
+  ])],
+});
+
+export const promoOrganisms: OrganismSpec[] = [announcementBar, cookieBanner, newsletterForm, contactForm, supportChannels];
diff --git a/xgen/screens/src/authoring/blocks/quote-split.ts b/xgen/screens/src/authoring/blocks/quote-split.ts
new file mode 100644
index 0000000..542383c
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/quote-split.ts
@@ -0,0 +1,50 @@
+// Testimonials beside something or with figures: one quote beside a picture, a rating panel or over logo tiles; stacked quotes beside a
+// picture; four compact quotes; or figures over a featured quote and a stack.
+import { and, cond, eachAt, eq, lt, or, ref, undef, use, when, organism } from "../../build";
+import type { OrganismSpec, Value, ViewNode } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { empty, id, orEmpty, tsOf, toneLite } from "../props";
+
+const quoteSplit = spec("organism.quote-split", "QuoteSplit", "Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture, logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured quote beside a stack), mediaSide, tone.", {
+  typeImports: [{ from: "TestimonialGrid", names: ["Quote", "QuoteLabels"] }, { from: "StatsBand", names: ["Stat"] }, { from: "LogoCloud", names: ["Logo"] }, { from: "ErrorPage", names: ["LinkActions"] }],
+  records: { QuoteExtras: fields(["stats", "Stat[]"], ["logos", "Logo[]"], ["rating", "number"], ["score", "string"], ["reviews", "string"]) },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "quotes", type: ts("Quote[]"), required: true },
+    { name: "labels", type: ts("QuoteLabels"), required: true },
+    { name: "extras", type: { record: "QuoteExtras" }, required: true },
+    { name: "actions", type: ts("LinkActions"), required: true },
+    { name: "layout", type: tsOf("media", "logos", "rating", "stack", "compact", "bento"), default: "media" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "tone", type: toneLite, default: "default" },
+    empty,
+  ],
+  view: (() => {
+    const card = (kind: Value, layout: Value, cls: Value = ""): ViewNode => organism("QuoteSlot", { q: ref("q"), labels: ref("labels"), kind, layout, className: cls });
+    const firstQuotes = (n: number, node: ViewNode): ViewNode => eachAt(ref("quotes"), "q", "i", ref("q.id"), when(lt(ref("i"), n), [node]));
+    const actions = organism("ActionGroup", { primary: ref("actions.cta"), primaryHref: ref("actions.href"), secondary: cond(eq(ref("actions.mode"), "two"), ref("actions.secondary"), undef()), secondaryHref: ref("actions.secondaryHref"), align: "start" });
+    const common = { id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), tone: ref("tone"), density: "default" };
+    const split = { ...common, layout: "split", hasMedia: true, mediaSide: ref("mediaSide") };
+    const picture = organism("MediaFrame", { alt: ref("title"), ratio: "4/3" });
+    const is = (l: string) => eq(ref("layout"), l);
+    const one = or(is("media"), is("logos"), is("rating"));
+    return [orEmpty("quotes", "quote", [
+      when(or(is("compact"), is("bento")), [frame(common, [
+        when(is("bento"), [organism("QuoteFigures", { extras: ref("extras") })]),
+        use("Box", { props: { Class: cond(is("bento"), "grid grid-cols-1 gap-4 lg:grid-cols-2", "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4") } },
+          eachAt(ref("quotes"), "q", "i", ref("q.id"), card("card", cond(and(is("bento"), eq(ref("i"), 0)), "single", "grid"), cond(and(is("bento"), eq(ref("i"), 0)), "lg:row-span-3", "")))),
+      ])], [frame(split, [
+        when(one, [firstQuotes(1, card(cond(is("media"), "card", "plain"), "single"))]),
+        when(is("logos"), [organism("QuoteLogoTiles", { extras: ref("extras") })]),
+        when(is("stack"), [use("Stack", { props: { Gap: "4", Align: "stretch" } }, firstQuotes(3, card("card", "stack")))]),
+        when(one, [actions]),
+      ], [when(is("rating"), [organism("QuoteRatingPanel", { extras: ref("extras"), labels: ref("labels") })], [picture])])]),
+    ], (n) => [frame(common, n)])];
+  })(),
+});
+
+export const quoteSplitOrganisms: OrganismSpec[] = [quoteSplit];
diff --git a/xgen/screens/src/authoring/blocks/shells.ts b/xgen/screens/src/authoring/blocks/shells.ts
new file mode 100644
index 0000000..58fd4b7
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/shells.ts
@@ -0,0 +1,47 @@
+// Dashboard shells: the frame of a signed-in app with placeholder content, combining a top bar, a sidebar and a footer.
+// The content is empty cards on purpose: what goes into a dashboard is a separate set of blocks.
+import { cn, cond, eq, ne, ref, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec, Value } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { wide } from "../components/frames";
+import { id, title, tsOf } from "../props";
+
+const O = "organism.";
+const dashboardShell = spec(`${O}dashboard-shell`, "DashboardShell", "The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset: over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide, rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.", {
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }],
+  records: {
+    ShellNav: fields(["label", "string"], ["brand", "string"], ["links", "NavLink[]"], ["current", "string"], ["subTitle", "string"], ["sub", "NavLink[]"], ["subCurrent", "string"],
+      ["search", "string"], ["shortcut", "string"], ["expand", "string"], ["userName", "string"], ["copyright", "string"], ["footerLabel", "string"], ["footer", "NavLink[]"]),
+  },
+  props: [
+    id, title,
+    { name: "level", type: ts("1 | 2"), default: 2 },
+    { name: "nav", type: ts("ShellNav"), required: true, docs: "the brand, the links of both levels and the texts of the shell" },
+    { name: "topbar", type: tsOf("full", "inset", "none"), default: "full" },
+    { name: "search", type: tsOf("show", "hide"), default: "show" },
+    { name: "sidebar", type: tsOf("wide", "rail", "collapsed", "twolevel", "none"), default: "wide" },
+    { name: "side", type: tsOf("start", "end"), default: "start" },
+    { name: "footer", type: tsOf("full", "inset", "none"), default: "none" },
+    { name: "content", type: tsOf("grid", "split", "list"), default: "grid" },
+    { name: "frame", type: tsOf("window", "page"), default: "window" },
+  ],
+  derived: [{ name: "titleId", value: tpl("{0}-title", ref("id")) }],
+  view: (() => {
+    const bar = (brand: Value) => organism("ShellTopbar", { nav: ref("nav"), brand, links: cond(eq(ref("sidebar"), "none"), "show", "hide"), search: ref("search") });
+    const footer = (place: string) => when(eq(ref("footer"), place), [organism("ShellFooter", { nav: ref("nav"), place })]);
+    return [use("Block", { props: { Tag: "section", Class: cond(eq(ref("frame"), "window"), "bg-background py-12", "bg-background") }, attrs: { id: ref("id"), "aria-labelledby": ref("titleId"), "data-testid": "dashboard-shell", "data-topbar": ref("topbar"), "data-sidebar": ref("sidebar"), "data-footer": ref("footer") } },
+      use("Box", { props: { Class: cond(eq(ref("frame"), "window"), wide, "") } },
+        use("Box", { props: { Class: cn("flex flex-col overflow-hidden bg-background", cond(eq(ref("frame"), "window"), "min-h-160 rounded border border-border", "min-h-screen")) }, attrs: { "data-testid": "window" } },
+          when(eq(ref("topbar"), "full"), [bar("show")]),
+          use("Box", { props: { Class: cn("flex min-h-0 flex-1", cond(eq(ref("side"), "end"), "flex-row-reverse", "")) } },
+            when(ne(ref("sidebar"), "none"), [organism("ShellSidebar", { nav: ref("nav"), mode: ref("sidebar"), side: ref("side"), brand: cond(eq(ref("topbar"), "full"), "hide", "show") })]),
+            use("Box", { props: { Class: "flex min-w-0 flex-1 flex-col" } },
+              when(eq(ref("topbar"), "inset"), [bar(cond(eq(ref("sidebar"), "none"), "show", "hide"))]),
+              organism("ShellContent", { title: ref("title"), titleId: ref("titleId"), level: ref("level"), content: ref("content") }),
+              footer("inset"))),
+          footer("full")))),
+    ];
+  })(),
+});
+
+export const shellOrganisms: OrganismSpec[] = [dashboardShell];
diff --git a/xgen/screens/src/authoring/blocks/showcase.ts b/xgen/screens/src/authoring/blocks/showcase.ts
new file mode 100644
index 0000000..0c0c53c
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/showcase.ts
@@ -0,0 +1,210 @@
+// Feature showcases beyond the plain grid: a bento grid, tabs, an accordion, a sticky picture beside a scrolling list, an icon wall,
+// a before/after comparison, logos beside stats, and a grid of video thumbnails. The motion of any of them (reveal on scroll, a player) is a port contract.
+import { and, at, call, cn, coalesce, cond, each, eachAt, eq, or, ref, text, tpl, undef, use, when, organism, len } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { empty, id, orEmpty, title, tone, tsOf, toneLite, denseLite } from "../props";
+import { kids } from "../forms";
+import { fluidCols, heading, muted, strong, strongSpan, surface, fitCols } from "../ux";
+import { figureBlockOf } from "../components/landmarks";
+
+const O = "organism.";
+const base = (extra: Record<string, unknown> = {}) => ({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density"), ...extra });
+
+const bentoGrid = spec(`${O}bento-grid`, "BentoGrid", "Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in the large tiles), tone, density.", {
+  records: { Tile: fields(["id", "string"], ["title", "string"], ["text", "string"], ["icon", "string"], ["size", "string"]) },
+  consts: { SPAN: { large: "md:col-span-2 md:row-span-2", wide: "md:col-span-2", small: "" } },
+  props: [
+    id, title,
+    { name: "tiles", type: ts("Tile[]"), required: true },
+    empty,
+    { name: "layout", type: tsOf("bento", "even"), default: "bento" },
+    { name: "media", type: tsOf("none", "image"), default: "none" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame(base(), [orEmpty("tiles", "layout-dashboard", [
+    use("Grid", { props: { Cols: "1-4", Class: "auto-rows-fr gap-4" }, attrs: { "data-testid": "items" } },
+      each(ref("tiles"), "tile", ref("tile.id"),
+        use("Card", { props: { Variant: "default", Class: cn("h-full overflow-hidden", cond(eq(ref("density"), "compact"), "gap-4 p-4", ""), cond(eq(ref("layout"), "bento"), at(ref("SPAN"), ref("tile.size")), "")) }, attrs: { "data-testid": "item", "data-size": cond(eq(ref("layout"), "bento"), ref("tile.size"), "even") } },
+          use("CardContent", { props: { Class: "flex h-full flex-col gap-4" } },
+            use("LucideIcon", { props: { Name: ref("tile.icon"), Size: 24 } }),
+            heading(ref("tile.title"), "xl"),
+            muted(ref("tile.text")),
+            when(and(eq(ref("media"), "image"), or(eq(ref("tile.size"), "large"), eq(ref("layout"), "even"))), [organism("MediaFrame", { alt: ref("tile.title"), ratio: "4/3", className: "mt-auto" })]))))),])
+  ])],
+});
+
+const featureTabs = spec(`${O}feature-tabs`, "FeatureTabs", "Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the picture, stack: picture below), tone, density.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    id, title,
+    { name: "features", type: ts("Feature[]"), required: true },
+    empty,
+    { name: "tabsLabel", type: "string", required: true },
+    { name: "active", type: "string", default: "", docs: "id of the chosen feature; empty: the first" },
+    { name: "panel", type: tsOf("split", "stack"), default: "split" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  events: [{ name: "select", args: [{ name: "id", type: "string" }], docs: "a tab was chosen" }],
+  view: [frame(base(), [orEmpty("features", "layout-grid", [
+    use("Stack", { props: { Gap: "6", Align: "stretch" } },
+      organism("Switcher", { label: ref("tabsLabel"), className: "w-fit max-w-full flex-wrap" }, kids(
+        eachAt(ref("features"), "f", "i", ref("f.id"), organism("SwitcherItem", { active: or(eq(ref("f.id"), ref("active")), and(eq(ref("active"), ""), eq(ref("i"), 0))) }, { on: { click: call("emit.select", ref("f.id")) }, ...kids(text(ref("f.title"))) })))),
+      eachAt(ref("features"), "f", "i", ref("f.id"),
+        when(or(eq(ref("f.id"), ref("active")), and(eq(ref("active"), ""), eq(ref("i"), 0))), [
+          use("Grid", { props: { Cols: cond(eq(ref("panel"), "split"), "1-2", "1"), Class: "items-center gap-8" }, attrs: { "data-testid": "tab-panel", role: "tabpanel" } },
+            use("Stack", { props: { Gap: "4" } }, use("LucideIcon", { props: { Name: ref("f.icon"), Size: 24 } }), heading(ref("f.title"), "2xl"), muted(ref("f.text"), "base")),
+            organism("MediaFrame", { alt: ref("f.title"), ratio: "4/3" }))]))),])
+  ])],
+});
+
+const featureAccordion = spec(`${O}feature-accordion`, "FeatureAccordion", "Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    id, title,
+    { name: "features", type: ts("Feature[]"), required: true },
+    empty,
+    { name: "expand", type: tsOf("first", "none"), default: "first" },
+    { name: "media", type: tsOf("none", "image"), default: "none" },
+    { name: "multiple", type: "boolean", default: false, docs: "true: several can be open at once; false: opening one closes the others (native details name)" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame(base({ layout: cond(eq(ref("media"), "image"), "split", "stack"), hasMedia: eq(ref("media"), "image") }), [orEmpty("features", "layout-grid", [
+    use("Stack", { props: { Gap: "0", Align: "stretch" }, attrs: { "data-testid": "items" } },
+      eachAt(ref("features"), "f", "i", ref("f.id"),
+        use("Disclosure", { props: { Variant: "item", Name: cond(ref("multiple"), undef(), tpl("{0}-accordion", coalesce(ref("id"), "accordion"))), Open: and(eq(ref("expand"), "first"), eq(ref("i"), 0)) }, attrs: { "data-testid": "item" } },
+          use("Summary", { props: { Variant: "item" } }, use("Inline", { props: { Class: "flex min-w-0 items-center justify-start gap-4" } }, use("LucideIcon", { props: { Name: ref("f.icon"), Size: 20 } }), strongSpan(ref("f.title")))),
+          use("Text", { props: { Size: "sm", Class: "pb-4 text-muted-foreground" } }, text(ref("f.text")))))),])
+  ], [organism("MediaFrame", { alt: ref("title"), ratio: "4/3" })])],
+});
+
+const featureSticky = spec(`${O}feature-sticky`, "FeatureSticky", "A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item (plain, card), tone, density.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    id, title,
+    { name: "features", type: ts("Feature[]"), required: true },
+    empty,
+    { name: "active", type: "string", default: "", docs: "id of the current feature" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "item", type: tsOf("plain", "card"), default: "plain" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame(base(), [orEmpty("features", "layout-grid", [
+    use("Grid", { props: { Cols: "1-2", Class: "items-start gap-8" }, attrs: { "data-testid": "sticky" } },
+      use("Box", { props: { Class: cn("md:sticky md:top-8", cond(eq(ref("mediaSide"), "start"), "md:order-first", "md:order-last")) }, attrs: { "data-testid": "sticky-media" } }, organism("MediaFrame", { alt: ref("title"), ratio: "4/3" })),
+      use("Stack", { props: { Gap: cond(eq(ref("density"), "compact"), "4", "8"), Align: "stretch" }, attrs: { "data-testid": "items" } },
+        each(ref("features"), "f", ref("f.id"),
+          use("Stack", { props: { Gap: "2", Class: cn(cond(eq(ref("item"), "card"), surface("p-6"), "py-4"), cond(eq(ref("f.id"), ref("active")), "inset-ring inset-ring-foreground", "")) }, attrs: { "data-testid": "item", "aria-current": cond(eq(ref("f.id"), ref("active")), "true", undef()) } },
+            use("LucideIcon", { props: { Name: ref("f.icon"), Size: 24 } }), heading(ref("f.title"), "2xl"), muted(ref("f.text"), "base"))))),])
+  ])],
+});
+
+const iconWall = spec(`${O}icon-wall`, "IconWall", "A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the label, chip: icon beside it), tone, density.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    id, title,
+    { name: "features", type: ts("Feature[]"), required: true },
+    empty,
+    { name: "cols", type: tsOf("3", "4", "6"), default: "4" },
+    { name: "item", type: tsOf("tile", "chip"), default: "tile" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  // a chip puts its label beside the icon, so six chips start from two columns on a phone (three would push a long word out)
+  derived: [{ name: "askedCols", value: cond(and(eq(ref("item"), "chip"), eq(ref("cols"), "6")), "2-6", fluidCols(ref("cols"))) }, { name: "wallCols", value: fitCols(ref("askedCols"), len(ref("features"))) }],
+  view: [frame(base(), [orEmpty("features", "layout-grid", [
+    use("Grid", { props: { Cols: ref("wallCols"), Class: "gap-4" }, attrs: { "data-testid": "items" } },
+      each(ref("features"), "f", ref("f.id"),
+        use("Box", { props: { Class: cn("flex items-center gap-2", surface(), cond(eq(ref("item"), "tile"), cn("flex-col justify-center text-center", cond(eq(ref("density"), "compact"), "p-4", "p-6")), "px-4 py-2")) }, attrs: { "data-testid": "item" } },
+          use("LucideIcon", { props: { Name: ref("f.icon"), Size: cond(eq(ref("item"), "tile"), 24, 16) } }),
+          use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("f.title")))))),])
+  ])],
+});
+
+const beforeAfter = spec(`${O}before-after`, "BeforeAfter", "Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two cards, rows: one row per point), icons (show, hide), tone, density.", {
+  records: { Contrast: fields(["id", "string"], ["title", "string"], ["before", "string"], ["after", "string"]), BeforeAfterLabels: fields(["before", "string"], ["after", "string"]) },
+  props: [
+    id, title,
+    { name: "points", type: ts("Contrast[]"), required: true },
+    empty,
+    { name: "labels", type: { record: "BeforeAfterLabels" }, required: true },
+    { name: "layout", type: tsOf("cards", "rows"), default: "cards" },
+    { name: "icons", type: tsOf("show", "hide"), default: "show" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame(base(), [orEmpty("points", "git-compare", [
+    when(eq(ref("layout"), "cards"),
+      [use("Grid", { props: { Cols: "1-2", Class: "items-stretch gap-4" }, attrs: { "data-testid": "sides" } },
+        ...(["before", "after"] as const).map((side) => use("Card", { props: { Variant: side === "after" ? "default" : "muted", Class: cn("h-full", cond(eq(ref("density"), "compact"), "gap-4 p-4", "")) }, attrs: { "data-testid": "side", "data-side": side } },
+          use("CardContent", { props: { Class: "flex flex-col gap-4" } },
+            heading(ref(`labels.${side}`), "xl"),
+            use("List", { props: { Class: "m-0 flex list-none flex-col gap-4 p-0" } },
+              each(ref("points"), "p", ref("p.id"), use("ListItem", { props: { Class: "flex items-start gap-4" }, attrs: { "data-testid": "item" } },
+                when(eq(ref("icons"), "show"), [use("LucideIcon", { props: { Name: side === "after" ? "check" : "x", Size: 16, Class: "h-lh shrink-0 text-sm" } })]),
+                use("Text", { props: { Size: "sm" } }, text(ref(`p.${side}`)))))))))) ],
+      [use("Stack", { props: { Gap: "2", Align: "stretch" }, attrs: { "data-testid": "rows" } },
+        each(ref("points"), "p", ref("p.id"), use("Grid", { props: { Cols: "1-3", Class: cn("items-center gap-4", surface("p-4")) }, attrs: { "data-testid": "item" } },
+          strong(ref("p.title")),
+          use("Group", { props: { Gap: "2", Align: "start" } }, when(eq(ref("icons"), "show"), [use("LucideIcon", { props: { Name: "x", Size: 16, Class: "h-lh shrink-0 text-sm text-muted-foreground" } })]), muted(ref("p.before"))),
+          use("Group", { props: { Gap: "2", Align: "start" } }, when(eq(ref("icons"), "show"), [use("LucideIcon", { props: { Name: "check", Size: 16, Class: "h-lh shrink-0 text-sm text-primary" } })]), use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("p.after")))))))]),])
+  ])],
+});
+
+const proofBand = spec(`${O}proof-band`, "ProofBand", "Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above, beside), logos (name, icon), tone, density.", {
+  typeImports: [{ from: "LogoCloud", names: ["Logo"] }, { from: "StatsBand", names: ["Stat"] }],
+  props: [
+    id, title,
+    { name: "logos", type: ts("Logo[]"), required: true },
+    empty,
+    { name: "stats", type: ts("Stat[]"), required: true },
+    { name: "layout", type: tsOf("above", "beside"), default: "above" },
+    { name: "logoStyle", type: tsOf("name", "icon"), default: "name" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame(base({ align: "center" }), [orEmpty("logos", "building-2", [
+    use("Grid", { props: { Cols: cond(eq(ref("layout"), "beside"), "1-2", "1"), Class: "items-center gap-8" } },
+      use("Group", { props: { Gap: "6", Justify: "center", Class: "flex-wrap text-muted-foreground" }, attrs: { "data-testid": "logos" } },
+        each(ref("logos"), "logo", ref("logo.id"), use("Group", { props: { Gap: "2", Align: "center" }, attrs: { "data-testid": "logo" } },
+          use("LucideIcon", { props: { Name: ref("logo.icon"), Size: 24 } }),
+          use("Text", { props: { Size: "sm", Weight: "semibold", Class: cond(eq(ref("logoStyle"), "icon"), "sr-only", "") } }, text(ref("logo.name")))))),
+      use("Grid", { props: { Cols: cond(eq(ref("layout"), "beside"), "2", "1-4"), Class: "gap-6 text-center" }, attrs: { "data-testid": "stats" } },
+        each(ref("stats"), "stat", ref("stat.id"), use("Stack", { props: { Gap: "0", Align: "center" }, attrs: { "data-testid": "stat" } },
+          use("Text", { props: { Size: "4xl", Weight: "bold" } }, text(ref("stat.value"))), muted(ref("stat.label")))))),])
+  ])],
+});
+
+const videoGrid = spec(`${O}video-grid`, "VideoGrid", "Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone, density.", {
+  typeImports: [{ from: "TestimonialGrid", names: ["Quote"] }],
+  props: [
+    id, title,
+    { name: "quotes", type: ts("Quote[]"), required: true },
+    empty,
+    { name: "playLabel", type: "string", required: true, docs: "template of the play button's name, e.g. `Play the video from {0}`" },
+    { name: "byLine", type: "string", required: true, docs: "template of the line under the name: `{0}, {1}` (role, company)" },
+    { name: "cols", type: tsOf("1-2", "1-3"), default: "1-3" },
+    { name: "caption", type: tsOf("below", "overlay"), default: "below" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  events: [{ name: "play", args: [{ name: "id", type: "string" }], docs: "a play button was pressed" }],
+  view: [frame(base(), [orEmpty("quotes", "video", [
+    use("Grid", { props: { Cols: ref("cols"), Class: "gap-4" }, attrs: { "data-testid": "items" } },
+      each(ref("quotes"), "q", ref("q.id"),
+        figureBlockOf("m-0 flex flex-col gap-4", "item",
+          use("Box", { props: { Class: "relative" } },
+            organism("MediaFrame", { alt: ref("q.author"), ratio: "16/9" }),
+            use("Button", { props: { Variant: "default", Size: "default", Type: "button", Class: "absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0" }, on: { click: call("emit.play", ref("q.id")) }, attrs: { "aria-label": tpl(ref("playLabel"), ref("q.author")), "data-testid": "play" } },
+              use("LucideIcon", { props: { Name: "play", Size: 20 } })),
+            when(eq(ref("caption"), "overlay"), [use("Box", { props: { Class: "absolute inset-x-0 bottom-0 rounded bg-background p-4" }, attrs: { "data-testid": "caption" } }, strong(ref("q.author"), "sm"), muted(tpl(ref("byLine"), ref("q.role"), ref("q.company")), "xs"))])),
+          when(eq(ref("caption"), "below"), [use("Text", { props: { Tag: "figcaption" }, attrs: { "data-testid": "caption" } }, strong(ref("q.author"), "sm"), muted(tpl(ref("byLine"), ref("q.role"), ref("q.company")), "xs"))])))),])
+  ])],
+});
+
+export const showcaseOrganisms: OrganismSpec[] = [bentoGrid, featureTabs, featureAccordion, featureSticky, iconWall, beforeAfter, proofBand, videoGrid];
diff --git a/xgen/screens/src/authoring/blocks/signup.ts b/xgen/screens/src/authoring/blocks/signup.ts
new file mode 100644
index 0000000..0d07a61
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/signup.ts
@@ -0,0 +1,79 @@
+// Sign-in pages and the sign-up wizard. AuthLayout puts an AuthCard in a page: beside a picture, on a tinted background, or alone.
+import { cn, cond, eachAt, eq, ge, len, lt, ref, str, sub, text, tpl, use, when, add, undef, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, groupFields, rec, requireFields, spec, ts } from "../kit";
+import { wide } from "../components/frames";
+import { id, ifAny, tsOf } from "../props";
+import { inputField } from "../forms";
+import { heading, muted } from "../ux";
+
+const O = "organism.";
+
+const authLayout = spec(`${O}auth-layout`, "AuthLayout", "A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card, centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side of the picture), mode, social. The page's heading is the card's title.", {
+  records: {
+    AuthSwitch: requireFields(groupFields(["text", "string", "the sentence before the link"], ["link", "string", "text of the link"], ["href", "string"]), "text", "link"),
+    AuthVisual: requireFields(groupFields(["title", "string", "the line on the picture panel"], ["text", "string"]), "title", "text"),
+  },
+  typeImports: [{ from: "AuthCard", names: ["AuthLabels"] }],
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "text", type: "string", required: true },
+    { name: "submit", type: "string", required: true },
+    { name: "switchTo", type: rec("AuthSwitch"), required: true, docs: "the way to the other mode (sign up instead, sign in instead)" },
+    { name: "labels", type: ts("AuthLabels"), required: true },
+    { name: "visual", type: rec("AuthVisual"), required: true, docs: "the picture panel of layout split" },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "layout", type: tsOf("split", "centered", "minimal"), default: "split" },
+    { name: "side", type: tsOf("end", "start"), default: "end" },
+    { name: "mode", type: tsOf("signin", "signup", "reset", "magic"), default: "signin" },
+    { name: "social", type: tsOf("none", "show", "first"), default: "none" },
+  ],
+  view: (() => {
+    const card = (plain: boolean) => organism("AuthCard", { id: ref("id"), title: ref("title"), text: ref("text"), submit: ref("submit"), switchText: ref("switchTo.text"), switchLink: ref("switchTo.link"), switchHref: ref("switchTo.href"), labels: ref("labels"), mode: ref("mode"), layout: plain ? "plain" : "card", social: ref("social"), level: ref("level") });
+    const visual = use("Stack", { props: { Gap: "4", Align: "stretch", Class: cn("justify-end rounded bg-muted p-8", cond(eq(ref("side"), "start"), "md:order-first", "md:order-last")) }, attrs: { "data-testid": "visual" } },
+      organism("MediaFrame", { alt: ref("visual.title"), ratio: "4/3" }), heading(ref("visual.title"), "2xl", 2), muted(ref("visual.text")));
+    return [use("Block", { props: { Tag: "div", Class: "w-full" }, attrs: { "data-testid": "auth-layout", "data-layout": ref("layout") } },
+      use("Container", { props: { Class: cn(wide, "py-12") }, attrs: { "data-slot": "container" } },
+        when(eq(ref("layout"), "split"),
+          [use("Grid", { props: { Cols: "1-2", Class: "items-stretch gap-8" } }, use("Box", { props: { Class: "mx-auto flex w-full max-w-sm items-center" } }, card(true)), visual)],
+          [when(eq(ref("layout"), "centered"),
+            [use("Box", { props: { Class: "mx-auto w-full max-w-md rounded bg-muted p-6" } }, card(false))],
+            [use("Box", { props: { Class: "mx-auto w-full max-w-sm" } }, card(true))])])))];
+  })(),
+});
+
+const WizardStep = fields(["id", "string"], ["title", "string"], ["text", "string"], ["icon", "string"], ["fieldA", "string"], ["fieldB", "string"]);
+const WizardLabels = fields(["stepOf", "string"], ["steps", "string"], ["back", "string"], ["next", "string"], ["finish", "string"]);
+const signupWizard = spec(`${O}signup-wizard`, "SignupWizard", "A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown, counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values between steps is the page's job.", {
+  records: { WizardStep, WizardLabels },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "steps", type: ts("WizardStep[]"), required: true },
+    { name: "labels", type: { record: "WizardLabels" }, required: true },
+    { name: "current", type: "number", default: 1 },
+    { name: "level", type: ts("1 | 2"), default: 2 },
+    { name: "progress", type: tsOf("bar", "list"), default: "bar" },
+    { name: "layout", type: tsOf("card", "plain"), default: "card" },
+  ],
+  events: [{ name: "go", args: [{ name: "step", type: "number" }], docs: "back or next was pressed" }],
+  // emptyMode omit: a wizard with no steps is left out
+  view: [ifAny("steps", [
+    use("Block", { props: { Tag: "section", Class: cn("mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8", cond(eq(ref("layout"), "card"), "rounded bg-card p-6 inset-ring inset-ring-border", "")) }, attrs: { "aria-labelledby": tpl("{0}-title", ref("id")), "data-testid": "wizard", "data-current": str(ref("current")) } },
+      use("Title", { props: { As: ref("level"), Size: "2xl", Weight: "bold" }, attrs: { id: tpl("{0}-title", ref("id")) } }, text(ref("title"))),
+      use("Text", { props: { Size: "sm", Class: "text-muted-foreground" }, attrs: { "data-testid": "step-of" } }, text(tpl(ref("labels.stepOf"), ref("current"), len(ref("steps"))))),
+      when(eq(ref("progress"), "bar"), [use("Progress", { props: { Value: str(ref("current")), Max: str(len(ref("steps"))) }, attrs: { "aria-label": ref("labels.steps") } })]),
+      when(eq(ref("progress"), "list"), [use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" }, attrs: { "aria-label": ref("labels.steps"), "data-testid": "step-list" } },
+        eachAt(ref("steps"), "s", "i", ref("s.id"), use("ListItem", { props: { Class: cn("flex items-center gap-4 text-sm", cond(eq(add(ref("i"), 1), ref("current")), "font-semibold", "text-muted-foreground")) }, attrs: { "aria-current": cond(eq(add(ref("i"), 1), ref("current")), "step", undef()), "data-testid": "step-item" } },
+          use("LucideIcon", { props: { Name: cond(lt(add(ref("i"), 1), ref("current")), "circle-check", ref("s.icon")), Size: 16 } }), text(ref("s.title")))))]),
+      eachAt(ref("steps"), "s", "i", ref("s.id"), when(eq(add(ref("i"), 1), ref("current")), [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "step" } },
+        heading(ref("s.title"), "xl", 3), muted(ref("s.text")),
+        use("Box", { props: { Class: "grid gap-4" } }, inputField("a", "text", ref("s.fieldA"), undefined, true), inputField("b", "text", ref("s.fieldB"), undefined, true)))])),
+      use("Group", { props: { Gap: "2", Justify: "between" } },
+        use("Button", { props: { Variant: "outline", Size: "default", Type: "button", Disabled: lt(ref("current"), 2) }, on: { click: { call: "emit.go", args: [sub(ref("current"), 1)] } }, attrs: { "data-testid": "wizard-back" } }, text(ref("labels.back"))),
+        use("Button", { props: { Variant: "default", Size: "default", Type: "button" }, on: { click: { call: "emit.go", args: [add(ref("current"), 1)] } }, attrs: { "data-testid": "wizard-next" } }, text(cond(ge(ref("current"), len(ref("steps"))), ref("labels.finish"), ref("labels.next")))))),
+  ])],
+});
+
+export const signupOrganisms: OrganismSpec[] = [authLayout, signupWizard];
diff --git a/xgen/screens/src/authoring/blocks/site.ts b/xgen/screens/src/authoring/blocks/site.ts
new file mode 100644
index 0000000..2ab5ecf
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/site.ts
@@ -0,0 +1,98 @@
+// The organisms of a small marketing site: header with skip link, footer, hero, feature grid, plan tiers, FAQ, call-to-action band.
+// Each one is drawn by SectionFrame / MediaFrame / ActionGroup and varies on axes (layout, columns, media side, density, tone, emphasis)
+// that are plain props: a block (authoring/gallery/blocks.ts) names the combinations. Every text comes in through props or labels.
+import { and, call, cn, cond, eq, op, ref, text, undef, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { cols, density, empty, id, orEmpty, title, tone, tsOf } from "../props";
+import { frame, wide } from "../components/frames";
+import { layoutOf } from "../presets";
+import { featureRecord, featureItem, featureCards, featureRows } from "../components/features";
+import { navBlockOf } from "../components/landmarks";
+import { menuEntry } from "../components/nav";
+
+const O = "organism.";
+
+const siteHeader = spec(`${O}site-header`, "SiteHeader", "The page header: a skip link to the main content, the brand, the two navigation links (the current one carries aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position (static, sticky), actions (none, cta).", {
+  records: {
+    SiteHeaderLabels: fields(["skip", "string"], ["brand", "string"], ["nav", "string"], ["home", "string"], ["pricing", "string"], ["theme", "string"]),
+    SiteRoutes: fields(["home", "string", true], ["pricing", "string", true]),
+  },
+  props: [
+    { name: "labels", type: { record: "SiteHeaderLabels" }, required: true },
+    { name: "routes", type: { record: "SiteRoutes" }, docs: "the addresses of the two pages, from the app; none: the brand and the menu are text, not links" },
+    { name: "current", type: "string", required: true, docs: "the area of the current route: home or pricing" },
+    { name: "layout", type: tsOf("inline", "stacked"), default: "inline", docs: "inline: brand left, links and button right; stacked: all centered in rows" },
+    { name: "position", type: tsOf("static", "sticky"), default: "static", docs: "sticky: stays at the top while the page scrolls" },
+    { name: "actions", type: tsOf("none", "cta"), default: "none", docs: "cta: a call-to-action button after the navigation" },
+    { name: "cta", type: "string", docs: "text of the call to action" },
+    { name: "ctaHref", type: "string" },
+  ],
+  events: [{ name: "theme", args: [], docs: "the theme button was pressed" }],
+  view: [
+    use("Block", { props: { Tag: "header", Class: cn("border-b border-border bg-background", cond(eq(ref("position"), "sticky"), "sticky top-0 z-40", "")) }, attrs: { "data-testid": "site-header", "data-layout": ref("layout") } },
+      use("LinkPlain", { props: { Href: "#main-content", Class: "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border" }, attrs: { "data-testid": "skip-link" } }, text(ref("labels.skip"))),
+      use("Container", { attrs: { "data-slot": "container" }, props: { Class: cn(wide, "flex flex-wrap gap-4 py-4", cond(eq(ref("layout"), "stacked"), "flex-col items-center", "items-center justify-between")) } },
+        menuEntry(ref("routes.home"), { cls: "text-lg font-medium", testid: "brand" }, text(ref("labels.brand"))),
+        navBlockOf(ref("labels.nav"), undefined, "site-nav",
+          use("Group", { props: { Gap: "4", Align: "center" } },
+            menuEntry(ref("routes.home"), { cls: "font-semibold", current: eq(ref("current"), "home"), testid: "nav-link" }, text(ref("labels.home"))),
+            menuEntry(ref("routes.pricing"), { cls: "font-semibold", current: eq(ref("current"), "pricing"), testid: "nav-link" }, text(ref("labels.pricing"))))),
+        use("Group", { props: { Gap: "4", Align: "center" } },
+          use("Button", { props: { Variant: "outline", Size: "sm" }, on: { click: call("emit.theme") }, attrs: { "data-testid": "theme-toggle" } }, text(ref("labels.theme"))),
+          when(and(eq(ref("actions"), "cta"), ref("cta")), [use("Button", { props: { Variant: "default", Size: "sm", Href: ref("ctaHref") }, attrs: { "data-testid": "header-cta" } }, text(ref("cta")))])))),
+  ],
+});
+
+const siteFooter = spec(`${O}site-footer`, "SiteFooter", "The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density (default, compact).", {
+  records: { SiteFooterLabels: fields(["copyright", "string"], ["nav", "string"], ["home", "string"], ["pricing", "string"]) },
+  typeImports: [{ from: "SiteHeader", names: ["SiteRoutes"] }],
+  props: [
+    { name: "labels", type: { record: "SiteFooterLabels" }, required: true },
+    { name: "routes", type: ts("SiteRoutes"), docs: "the addresses of the two pages, from the app; none: text, not links" },
+    { name: "layout", type: tsOf("minimal", "centered"), default: "minimal", docs: "minimal: one row; centered: stacked and centered" },
+    { name: "density", type: tsOf("default", "compact"), default: "default" },
+  ],
+  view: [
+    use("Block", { props: { Tag: "footer", Class: "mt-12 border-t border-border" }, attrs: { "data-testid": "site-footer", "data-layout": ref("layout") } },
+      use("Container", { attrs: { "data-slot": "container" }, props: { Class: cn(wide, "flex flex-wrap items-center gap-4", cond(eq(ref("density"), "compact"), "py-4", "py-6"), cond(eq(ref("layout"), "centered"), "flex-col text-center", "justify-between")) } },
+        use("Text", { props: { Size: "sm", Class: "text-muted-foreground" }, attrs: { "data-testid": "copyright" } }, text(ref("labels.copyright"))),
+        navBlockOf(ref("labels.nav"), undefined, undefined,
+          use("Group", { props: { Gap: "4" } },
+            menuEntry(ref("routes.home"), { cls: "font-semibold" }, text(ref("labels.home"))),
+            menuEntry(ref("routes.pricing"), { cls: "font-semibold" }, text(ref("labels.pricing"))))))),
+  ],
+});
+
+const featureGrid = spec(`${O}feature-grid`, "FeatureGrid", "A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon), media side (rows), density, tone.", {
+  records: { Feature: featureRecord },
+  typeImports: [{ from: "SectionFrame", names: ["HeadLink"] }],
+  props: [
+    id, title,
+    { name: "features", type: ts("Feature[]"), required: true },
+    empty,
+    { name: "action", type: ts("HeadLink"), docs: "optional link opposite the heading" },
+    { name: "layout", type: tsOf("grid", "rows"), default: "grid" },
+    { name: "cols", type: cols, default: "1-3", docs: "columns of the grid layout (responsive)" },
+    featureItem,
+    { name: "mediaSide", type: tsOf("end", "start", "alternate"), default: "end", docs: "rows layout: side of the picture; alternate swaps it every row" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "density", type: density, default: "default" },
+  ],
+  view: (() => {
+    const grid = organism("FeatureCards", { features: ref("features"), cols: ref("cols"), item: ref("item") });
+    const rows = organism("FeatureRows", { features: ref("features"), mediaSide: ref("mediaSide") });
+    // cell head: a small title and a view-all link
+    const cellHead = use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "w-full" } },
+      use("Title", { props: { As: 2, Size: "sm", Weight: "semibold", Class: "leading-7" }, attrs: { id: op("add", ref("id"), "-title") } }, text(ref("title"))),
+      // the view-all link only with an address (no "#/" stand-in): no href, no link
+      when(and(ref("action.label"), ref("action.href")), [use("Link", { props: { Href: ref("action.href"), Variant: "default", Class: cn(layoutOf("text.tiny"), "shrink-0 font-medium leading-5") }, attrs: { "data-testid": "section-action" } }, text(ref("action.label")))]));
+    return [when(eq(ref("item"), "cell"),
+      [frame({ id: ref("id"), title: "", tone: ref("tone"), density: ref("density"), measure: "fill", className: "py-0" }, [cellHead, orEmpty("features", "layout-grid", [grid])])],
+      [frame({ id: ref("id"), title: ref("title"), action: ref("action"), tone: ref("tone"), density: ref("density") }, [
+        orEmpty("features", "layout-grid", [when(eq(ref("layout"), "rows"), [rows], [grid])])])])];
+  })(),
+});
+
+export const siteOrganisms: OrganismSpec[] = [siteHeader, siteFooter, featureCards, featureRows, featureGrid];
+
diff --git a/xgen/screens/src/authoring/blocks/storefront.ts b/xgen/screens/src/authoring/blocks/storefront.ts
new file mode 100644
index 0000000..f1713c2
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/storefront.ts
@@ -0,0 +1,75 @@
+// The front of a store: a hero with an offer card or a picture behind the text, and a strip of store promises (delivery, returns, warranty).
+import { cn, cond, each, eachAt, eq, lt, ref, text, undef, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { behind, frame } from "../components/frames";
+import { empty, id, ifAny, orEmpty, tsOf, toneLite, denseLite } from "../props";
+import { muted, strong, surface } from "../ux";
+
+const O = "organism.";
+
+/** an icon in a small muted square */
+const iconSquare = (icon: string) =>
+  use("Box", { props: { Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted" } }, use("LucideIcon", { props: { Name: ref(icon), Size: 20 } }));
+
+/** the one or two links of the hero */
+const heroActions = organism("ActionGroup", { primary: ref("actions.cta"), primaryHref: ref("actions.href"), secondary: cond(eq(ref("actions.mode"), "two"), ref("actions.secondary"), undef()), secondaryHref: ref("actions.secondaryHref"), align: "start" });
+
+/** the promises of the hero: icon, title and a line of text */
+const heroPerks = use("Grid", { props: { Cols: "1-3", Class: "gap-4" }, attrs: { "data-testid": "perks" } },
+  eachAt(ref("perks"), "p", "i", ref("p.id"),
+    when(lt(ref("i"), 3), [use("Group", { props: { Gap: "4", Align: "start" }, attrs: { "data-testid": "perk" } },
+      iconSquare("p.icon"),
+      use("Stack", { props: { Gap: "0" } }, strong(ref("p.title"), "sm"), muted(ref("p.text"), "xs")))])));
+
+const storeHero = spec(`${O}store-hero`, "StoreHero", "The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }, { from: "ErrorPage", names: ["LinkActions"] }],
+  records: { OfferCard: fields(["title", "string"], ["text", "string"], ["icon", "string"]) },
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+    { name: "actions", type: ts("LinkActions"), required: true },
+    { name: "perks", type: ts("Feature[]"), required: true, docs: "store promises under the actions (the first three are shown)" },
+    { name: "card", type: { record: "OfferCard" }, required: true, docs: "the offer card on the picture (overlay layout)" },
+    { name: "layout", type: tsOf("overlay", "backdrop"), default: "overlay" },
+    { name: "mediaSide", type: tsOf("end", "start"), default: "end" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: [when(eq(ref("layout"), "backdrop"),
+    [behind("image", ref("title"),
+      frame({ id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), level: ref("level"), tone: ref("tone"), density: "roomy", measure: "3xl" },
+        [heroActions, ifAny("perks", [heroPerks])]))],
+    [frame({ id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), level: ref("level"), layout: "split", hasMedia: true, mediaSide: ref("mediaSide"), tone: ref("tone"), density: "default" },
+      [heroActions, ifAny("perks", [heroPerks])],
+      [organism("OfferMedia", { alt: ref("title"), card: ref("card") })])])],
+});
+
+const uspStrip = spec(`${O}usp-strip`, "UspStrip", "The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted panel, cards: a card each, bar: a thin line of icons and titles), tone, density.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    id,
+    { name: "title", type: "string", default: "", docs: "section heading; empty: no heading (the section is named by id)" },
+    { name: "perks", type: ts("Feature[]"), required: true },
+    empty,
+    { name: "layout", type: tsOf("strip", "cards", "bar"), default: "strip" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density") }, [orEmpty("perks", "truck", [
+    when(eq(ref("layout"), "bar"),
+      [use("List", { props: { Tag: "ul", Class: "flex flex-wrap items-center justify-center gap-x-8 gap-y-4" }, attrs: { "data-testid": "items" } },
+        each(ref("perks"), "p", ref("p.id"),
+          use("ListItem", { props: { Class: "flex items-center gap-2 text-sm font-medium" }, attrs: { "data-testid": "item" } },
+            use("LucideIcon", { props: { Name: ref("p.icon"), Size: 16 } }), use("Inline", {}, text(ref("p.title"))))))],
+      [use("Grid", { props: { Cols: "1-4", Class: cn("gap-4", cond(eq(ref("layout"), "strip"), "rounded bg-muted p-6", "")) }, attrs: { "data-testid": "items" } },
+        each(ref("perks"), "p", ref("p.id"),
+          use("Stack", { props: { Gap: "4", Class: cond(eq(ref("layout"), "cards"), surface("p-6"), "") }, attrs: { "data-testid": "item" } },
+            iconSquare("p.icon"),
+            use("Stack", { props: { Gap: "2" } }, strong(ref("p.title"), "sm"), muted(ref("p.text"))))))]),])
+  ])],
+});
+
+export const storefrontOrganisms: OrganismSpec[] = [storeHero, uspStrip];
diff --git a/xgen/screens/src/authoring/blocks/story-tabs.ts b/xgen/screens/src/authoring/blocks/story-tabs.ts
new file mode 100644
index 0000000..59e38e2
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/story-tabs.ts
@@ -0,0 +1,45 @@
+// A story told in steps: year tabs over the panel of the chosen year, or a split with a picture, arrows and dots under it.
+// Choosing a year or a slide is an event; the page keeps the active id.
+import { call, cond, each, eachAt, eq, len, ref, text, use, when, organism } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { empty, id, orEmpty, tsOf, toneLite } from "../props";
+
+const storyTabs = spec("organism.story-tabs", "StoryTabs", "A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next arrows and one dot per step), tone. Choosing a step emits `select`.", {
+  typeImports: [{ from: "MilestoneTimeline", names: ["Milestone"] }],
+  records: { StoryLabels: fields(["step", "string"], ["previous", "string"], ["next", "string"]) },
+  events: [{ name: "select", args: [{ name: "id", type: "string" }], docs: "a year tab, an arrow or a dot was chosen" }],
+  props: [
+    id,
+    { name: "title", type: "string", required: true },
+    { name: "lead", type: "string", default: "" },
+    { name: "badge", type: "string", default: "", docs: "a short pill above the heading" },
+    { name: "steps", type: ts("Milestone[]"), required: true },
+    empty,
+    { name: "active", type: "string", required: true, docs: "the id of the step shown" },
+    { name: "labels", type: { record: "StoryLabels" }, required: true, docs: "template step `Step {0} of {1}`; the accessible names of the arrows" },
+    { name: "layout", type: tsOf("years", "carousel"), default: "years" },
+    { name: "tone", type: toneLite, default: "default" },
+  ],
+  view: (() => {
+    const head = { id: ref("id"), title: ref("title"), lead: ref("lead"), badge: ref("badge"), tone: ref("tone") };
+    const on = eq(ref("s.id"), ref("active"));
+    const pick = { on: { click: call("emit.select", ref("s.id")) } };
+    const tab = use("Button", { props: { Variant: cond(on, "default", "outline"), Size: "lg", Type: "button", Class: "h-auto flex-col items-start gap-0 py-2 text-start" }, attrs: { "data-testid": "story-tab", "data-active": cond(on, "true", "false") }, ...pick },
+      use("Inline", { props: { Class: "text-sm font-semibold" } }, text(ref("s.date"))), use("Inline", { props: { Class: "text-xs" } }, text(ref("s.tag"))));
+    const panel = organism("StoryPanel", { s: ref("s"), index: ref("i"), total: len(ref("steps")), labels: ref("labels") });
+    const arrow = (icon: string, label: string): ViewNode => use("Button", { props: { Variant: "outline", Size: "sm", Layout: "icon", Type: "button", AriaLabel: ref(label) }, attrs: { "data-testid": "story-arrow" } }, use("LucideIcon", { props: { Name: icon, Size: 16 } }));
+    const dots = organism("StoryDots", { steps: ref("steps"), active: ref("active") });
+    const years = frame(head, [
+      use("Box", { props: { Class: "grid grid-cols-2 gap-2 sm:grid-cols-4" }, attrs: { "data-testid": "story-tabs" } }, each(ref("steps"), "s", ref("s.id"), tab)),
+      eachAt(ref("steps"), "s", "i", ref("s.id"), when(on, [panel])),
+    ]);
+    const carousel = frame({ ...head, layout: "split", hasMedia: true }, [], [use("Stack", { props: { Gap: "4", Align: "stretch" } },
+      organism("MediaFrame", { alt: ref("title"), ratio: "4/3" }),
+      use("Group", { props: { Gap: "4", Align: "center", Justify: "between" } }, arrow("chevron-left", "labels.previous"), dots, arrow("chevron-right", "labels.next")))]);
+    return [orEmpty("steps", "milestone", [when(eq(ref("layout"), "years"), [years], [carousel])], (n) => [frame(head, n)])];
+  })(),
+});
+
+export const storyTabsOrganisms: OrganismSpec[] = [storyTabs];
diff --git a/xgen/screens/src/authoring/blocks/templates.ts b/xgen/screens/src/authoring/blocks/templates.ts
new file mode 100644
index 0000000..f91778f
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/templates.ts
@@ -0,0 +1,81 @@
+// Template gallery: a heading, filter pills, a grid of template cards and a browse-all button.
+// Card and image sizes come from the default preset.
+import { each, op, ref, text, use, when, organism, cn } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { empty, id, ifAny, orEmpty, title, tone, density, tsOf } from "../props";
+import { frame } from "../components/frames";
+import { layoutOf } from "../presets";
+
+const O = "organism.";
+const Template = fields(
+  ["id", "string"],
+  ["title", "string"],
+  ["views", "string"],
+  ["likes", "string"],
+  ["topic", "string"],
+);
+const Filter = fields(["id", "string"], ["title", "string"], ["value", "string"], ["icon", "string", true]);
+
+const templateGrid = spec(`${O}template-grid`, "TemplateGrid", "Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all button.", {
+  records: { Template, Filter, TemplateLabels: fields(["filters", "string"], ["browse", "string"], ["views", "string"], ["likes", "string"]) },
+  props: [
+    id, title,
+    { name: "templates", type: ts("Template[]"), required: true },
+    { name: "filters", type: ts("Filter[]"), required: true },
+    { name: "browseHref", type: "string", docs: "the address of the full list; none: a button" },
+    { name: "labels", type: { record: "TemplateLabels" }, required: true, docs: "the name of the filter row, the browse-all text, the hidden names of the counts" },
+    { name: "cols", type: tsOf("1-3", "1-4"), default: "1-4" },
+    { name: "tone", type: tone, default: "default" },
+    { name: "density", type: density, default: "compact" },
+    empty,
+  ],
+  view: (() => {
+    // Outline Button 28×r32 pad [3,8], text 10 Bold, icon 16; Tab gap 16
+    const filterPill = use("Button", {
+      props: { Variant: "outline", Size: "sm", Type: "button", Class: "gap-2" },
+      attrs: { "data-testid": "template-filter" },
+    },
+      when(ref("f.icon"), [use("LucideIcon", { props: { Name: ref("f.icon"), Size: 16 } })]),
+      text(ref("f.title")));
+    // Card 267×238 r16 pad 12 gap 8; image 243×160 r12; title 15 SemiBold; meta 10 Bold
+    const card = use("Box", {
+      props: { Class: cn("flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border", layoutOf("templates.card")) },
+      attrs: { "data-testid": "template-card" },
+    },
+      use("Box", { props: { Class: cn("shrink-0 overflow-hidden", layoutOf("templates.image")) } },
+        organism("MediaFrame", { alt: ref("t.title"), ratio: "16/9", className: cn("size-full", layoutOf("media.rounded")) })),
+      // Footer 243×46: avatar circle 32 + title 15/24 + meta row h16
+      use("Group", { props: { Gap: "4", Align: "center", Class: cn("w-full", layoutOf("templates.footer")) }, attrs: { "data-testid": "template-footer" } },
+        use("IconBadge", { props: { Size: "sm", Class: "overflow-hidden" }, attrs: { "data-testid": "template-avatar" } },
+          use("LucideIcon", { props: { Name: "layout-template", Size: 16 } })),
+        use("Stack", { props: { Gap: "0", Class: "min-w-0 flex-1" } },
+          use("Title", { props: { As: 3, Size: "base", Weight: "semibold", Class: "truncate leading-6" } }, text(ref("t.title"))),
+          use("Group", { props: { Gap: "4", Align: "center", Class: "h-4 text-muted-foreground" } },
+            use("Group", { props: { Gap: "2", Align: "center" } },
+              use("LucideIcon", { props: { Name: "eye", Size: 16 } }),
+              use("Inline", { props: { Class: "sr-only" } }, text(ref("labels.views"))),
+              use("Text", { props: { Size: "xs", Weight: "bold", Class: "leading-4" } }, text(ref("t.views")))),
+            use("Group", { props: { Gap: "2", Align: "center" } },
+              use("LucideIcon", { props: { Name: "heart", Size: 16 } }),
+              use("Inline", { props: { Class: "sr-only" } }, text(ref("labels.likes"))),
+              use("Text", { props: { Size: "xs", Weight: "bold", Class: "leading-4" } }, text(ref("t.likes"))))))));
+    return [frame({ id: ref("id"), title: "", tone: ref("tone"), density: ref("density"), measure: "fill", className: "py-0" }, [
+      use("Stack", { props: { Gap: "8", Align: "stretch" } },
+        use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "h-8 w-full flex-wrap" } },
+          use("Title", { props: { As: 2, Size: "2xl", Weight: "semibold", Class: "leading-9" }, attrs: { id: op("add", ref("id"), "-title") } }, text(ref("title"))),
+          ifAny("filters", [use("Group", { props: { Gap: "4", Align: "center", Class: "flex-wrap" }, attrs: { role: "group", "aria-label": ref("labels.filters"), "data-testid": "template-filters" } },
+            each(ref("filters"), "f", ref("f.id"), filterPill))])),
+        // no templates: EmptyState; no filters: no filter row (emptyMode label for the list, omit for the filters)
+        orEmpty("templates", "layout-template", [use("Grid", { props: { Cols: ref("cols"), Class: "w-full gap-6" }, attrs: { "data-testid": "template-grid" } },
+          each(ref("templates"), "t", ref("t.id"), card))]),
+        // Full-width Outline Button 1128×32 r32, text 10 Bold
+        use("Button", {
+          props: { Variant: "outline", Size: "sm", Href: ref("browseHref"), Class: "w-full" },
+          attrs: { "data-testid": "template-browse" },
+        }, text(ref("labels.browse")))),
+    ])];
+  })(),
+});
+
+export const templateOrganisms: OrganismSpec[] = [templateGrid];
diff --git a/xgen/screens/src/authoring/blocks/work.ts b/xgen/screens/src/authoring/blocks/work.ts
new file mode 100644
index 0000000..06e431e
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/work.ts
@@ -0,0 +1,95 @@
+// The work of a studio or a person: a photo gallery in five shapes, projects in five shapes, and milestones on a timeline.
+import { and, cn, cond, each, eachAt, eq, firstOf, len, or, ref, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec, Value } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { frame } from "../components/frames";
+import { empty, id, orEmpty, title, tsOf, toneLite, denseLite } from "../props";
+import { heading, muted, strong, surface } from "../ux";
+import { figureBlockOf } from "../components/landmarks";
+
+const O = "organism.";
+const lead = { name: "lead", type: "string" as const, default: "" };
+const common = { id: ref("id"), title: ref("title"), lead: ref("lead"), tone: ref("tone"), density: ref("density") };
+/** the ratio of a photo by its size in the masonry: tall pictures stand, wide ones lie */
+const ratioOf = (size: Value): Value => cond(eq(size, "tall"), "3/4", cond(eq(size, "wide"), "16/9", cond(eq(size, "large"), "4/3", "1/1")));
+
+const photoGallery = spec(`${O}photo-gallery`, "PhotoGallery", "Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes: layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.", {
+  records: { Photo: fields(["id", "string"], ["title", "string"], ["tag", "string"], ["size", "string"]), PhotoLabels: fields(["previous", "string"], ["next", "string"], ["counter", "string"]) },
+  props: [
+    id, title, lead,
+    { name: "photos", type: ts("Photo[]"), required: true },
+    empty,
+    { name: "labels", type: { record: "PhotoLabels" }, required: true },
+    { name: "layout", type: tsOf("grid", "masonry", "mosaic", "featured", "cards"), default: "grid" },
+    { name: "captions", type: tsOf("show", "hide"), default: "show" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame(common, [orEmpty("photos", "image", [
+    when(eq(ref("layout"), "featured"),
+      [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "featured" } },
+        organism("MediaFrame", { alt: ref("title"), ratio: "16/9" }),
+        use("Group", { props: { Gap: "4", Align: "center", Justify: "between" } },
+          use("Stack", { props: { Gap: "0" } }, strong(firstOf(ref("photos"), "title")), muted(tpl(ref("labels.counter"), 1, len(ref("photos"))), "xs")),
+          use("Group", { props: { Gap: "2" } },
+            use("Button", { props: { Variant: "outline", Size: "sm", Layout: "icon", AriaLabel: ref("labels.previous") } }, use("LucideIcon", { props: { Name: "chevron-left", Size: 16 } })),
+            use("Button", { props: { Variant: "outline", Size: "sm", Layout: "icon", AriaLabel: ref("labels.next") } }, use("LucideIcon", { props: { Name: "chevron-right", Size: 16 } })))),
+        use("Box", { props: { Class: "grid grid-cols-3 gap-2 sm:grid-cols-9" }, attrs: { "data-testid": "thumbs" } },
+          eachAt(ref("photos"), "p", "i", ref("p.id"),
+            organism("MediaFrame", { alt: ref("p.title"), ratio: "1/1", className: cond(eq(ref("i"), 0), "ring-2 ring-foreground", "") }))))],
+      [use("Box", { props: { Class: cond(eq(ref("layout"), "masonry"), "columns-1 gap-4 sm:columns-2 lg:columns-3", cond(eq(ref("layout"), "mosaic"), "grid grid-cols-2 gap-4 md:grid-cols-4", "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3")) }, attrs: { "data-testid": "items" } },
+        eachAt(ref("photos"), "p", "i", ref("p.id"),
+          figureBlockOf(cn("flex flex-col gap-2", cond(eq(ref("layout"), "masonry"), "mb-4 break-inside-avoid", ""), cond(and(eq(ref("layout"), "mosaic"), eq(ref("i"), 0)), "col-span-2 row-span-2", ""), cond(eq(ref("layout"), "cards"), surface("p-4"), "")), "item",
+            organism("MediaFrame", { alt: ref("p.title"), ratio: cond(eq(ref("layout"), "masonry"), ratioOf(ref("p.size")), cond(eq(ref("layout"), "grid"), "4/3", "1/1")), className: cond(eq(ref("layout"), "mosaic"), "h-full", "") }),
+            when(and(eq(ref("captions"), "show"), eq(ref("layout"), "cards")), [use("Group", { props: { Gap: "4", Align: "center", Justify: "between" } }, strong(ref("p.title"), "sm"), use("Badge", { props: { Variant: "secondary", Size: "sm" } }, text(ref("p.tag"))))]),
+            when(and(eq(ref("captions"), "show"), or(eq(ref("layout"), "grid"), eq(ref("layout"), "masonry"))), [use("Box", { props: { Class: "text-sm text-muted-foreground" }, attrs: { "data-testid": "caption" } }, text(ref("p.title")))]))))]),])
+  ])],
+});
+
+const projectGrid = spec(`${O}project-grid`, "ProjectGrid", "Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay, bento, list), tone, density.", {
+  records: { Project: fields(["id", "string"], ["title", "string"], ["category", "string"], ["year", "number"], ["summary", "string"], ["tags", "string[]"], ["featured", "boolean"], ["client", "string"], ["href", "string", true]), ProjectLabels: fields(["featured", "string"], ["view", "string"], ["case", "string"]) },
+  props: [
+    id, title, lead,
+    { name: "projects", type: ts("Project[]"), required: true },
+    empty,
+    { name: "labels", type: { record: "ProjectLabels" }, required: true },
+    { name: "layout", type: tsOf("cards", "compact", "overlay", "bento", "list"), default: "cards" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ ...common, layout: cond(eq(ref("layout"), "list"), "split", "stack"), hasMedia: eq(ref("layout"), "list"), mediaAlign: "start" }, [orEmpty("projects", "folder-open", [
+    when(eq(ref("layout"), "list"),
+      [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "items" } },
+        each(ref("projects"), "p", ref("p.id"),
+          use("Group", { props: { Gap: "4", Align: "start", Class: "border-b border-border pb-4" }, attrs: { "data-testid": "item" } },
+            organism("MediaFrame", { alt: ref("p.title"), ratio: "1/1", className: "size-16 shrink-0" }),
+            use("Stack", { props: { Gap: "2", Align: "stretch", Class: "flex-1" } },
+              use("Group", { props: { Gap: "4", Justify: "between" } }, strong(ref("p.title"), "sm"), muted(ref("p.year"), "xs")),
+              muted(ref("p.summary"))))))],
+      [organism("ProjectTiles", { projects: ref("projects"), labels: ref("labels"), layout: ref("layout") })]),])
+  ], [use("Box", { props: { Class: "grid grid-cols-2 gap-4" }, attrs: { "data-testid": "collage" } },
+    organism("MediaFrame", { alt: ref("title"), ratio: "3/4" }), organism("MediaFrame", { alt: ref("title"), ratio: "3/4", className: "mt-8" }))])],
+});
+
+const milestoneTimeline = spec(`${O}milestone-timeline`, "MilestoneTimeline", "Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone, density.", {
+  records: { Milestone: fields(["id", "string"], ["date", "string"], ["title", "string"], ["text", "string"], ["tag", "string"]) },
+  props: [
+    id, title, lead,
+    { name: "milestones", type: ts("Milestone[]"), required: true },
+    empty,
+    { name: "layout", type: tsOf("split", "stacked", "row"), default: "split" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ ...common, layout: cond(eq(ref("layout"), "split"), "split", "stack"), hasMedia: eq(ref("layout"), "split"), mediaSide: "start", mediaAlign: "start", measure: cond(eq(ref("layout"), "stacked"), "2xl", "default") }, [orEmpty("milestones", "milestone", [
+    use("List", { props: { Tag: "ol", Class: cond(eq(ref("layout"), "row"), "grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4", "flex flex-col gap-8 border-l border-border") }, attrs: { "data-testid": "items" } },
+      each(ref("milestones"), "m", ref("m.id"),
+        use("ListItem", { props: { Class: cond(eq(ref("layout"), "row"), "relative flex flex-col gap-2 pt-6", "relative flex flex-col gap-2 pl-6") }, attrs: { "data-testid": "item" } },
+          use("Inline", { props: { Class: cond(eq(ref("layout"), "row"), "absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary", "absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary") }, attrs: { "aria-hidden": "true" } }),
+          use("Group", { props: { Gap: "2", Align: "center" } }, use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("m.date"))), use("Badge", { props: { Variant: "outline", Size: "sm" } }, text(ref("m.tag")))),
+          heading(ref("m.title"), "lg"),
+          muted(ref("m.text"))))),])
+  ], [organism("MediaFrame", { alt: ref("title"), ratio: "3/4" })])],
+});
+
+export const workOrganisms: OrganismSpec[] = [photoGallery, projectGrid, milestoneTimeline];
diff --git a/xgen/screens/src/authoring/blocks/workspace.ts b/xgen/screens/src/authoring/blocks/workspace.ts
new file mode 100644
index 0000000..06a13bb
--- /dev/null
+++ b/xgen/screens/src/authoring/blocks/workspace.ts
@@ -0,0 +1,104 @@
+// App-level organisms: the dashboard overview, the app shell in three layouts, a kanban board.
+// Dragging a card between lanes is a port contract; the board shows the cards where the data puts them.
+import { cn, cond, each, eq, len, ref, text, tpl, use, when, where, organism } from "../../build";
+import type { OrganismSpec, Value } from "../../ir";
+import { fields, groupFields, rec, requireFields, spec, ts } from "../kit";
+import { frame, wide } from "../components/frames";
+import { empty, id, ifAny, orEmpty, title, tsOf, toneLite, denseLite } from "../props";
+import { kids } from "../forms";
+import { muted, strong } from "../ux";
+import { sharedTypes, required, OverviewChart, OverviewActivity, tiles, chart, feed, appMain } from "../components/app-main";
+
+const O = "organism.";
+const overview = spec(`${O}dashboard-overview`, "DashboardOverview", "The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the activity side by side, stacked: one below the other), cols (2, 4), tone, density.", {
+  records: { OverviewChart, OverviewActivity },
+  typeImports: sharedTypes,
+  props: [
+    id, title,
+    { name: "metrics", type: ts("Metric[]"), required: true },
+    { name: "chart", type: rec("OverviewChart"), required: true },
+    { name: "activity", type: rec("OverviewActivity"), required: true },
+    { name: "layout", type: tsOf("split", "stacked"), default: "split" },
+    { name: "cols", type: tsOf("2", "4"), default: "4" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density") }, [
+    use("Stack", { props: { Gap: "6", Align: "stretch" } },
+      tiles(cond(eq(ref("cols"), "2"), "1-2", "1-4")),
+      use("Grid", { props: { Cols: cond(eq(ref("layout"), "split"), "1-2", "1"), Class: "items-stretch gap-4" }, attrs: { "data-testid": "panels" } }, chart(), feed())),
+  ])],
+});
+
+const appShell = spec(`${O}app-shell`, "AppShell", "The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar is a port contract.", {
+  records: {
+    AppNav: requireFields(groupFields(["label", "string", "accessible name of the navigation"], ["brand", "string"], ["links", "NavLink[]"], ["current", "string", "id of the current link"]), "label", "brand", "links"),
+    AppUser: required(["name", "string"], ["email", "string"]),
+  },
+  typeImports: [{ from: "NavBar", names: ["NavLink", "NavSearch"] }, ...sharedTypes, { from: "DashboardOverview", names: ["OverviewChart", "OverviewActivity"] }],
+  props: [
+    id, title,
+    { name: "nav", type: rec("AppNav"), required: true, docs: "the navigation (sidebar or top bar)" },
+    { name: "user", type: rec("AppUser"), required: true, docs: "the signed-in person, under the sidebar" },
+    { name: "search", type: ts("NavSearch"), required: true, docs: "the search field of the top bar" },
+    { name: "metrics", type: ts("Metric[]"), required: true },
+    { name: "chart", type: ts("OverviewChart"), required: true },
+    { name: "activity", type: ts("OverviewActivity"), required: true },
+    { name: "layout", type: tsOf("sidebar", "top", "panes"), default: "sidebar" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: (() => {
+    const main = (cols: string, more: Record<string, Value> = { activity: ref("activity"), density: ref("density") }) =>
+      organism("AppMain", { id: ref("id"), title: ref("title"), metrics: ref("metrics"), chart: ref("chart"), cols, ...more });
+    const side = (width: string) => organism("SidebarNav", { label: ref("nav.label"), brand: ref("nav.brand"), links: ref("nav.links"), current: ref("nav.current"), userName: ref("user.name"), userEmail: ref("user.email"), width, user: "show", density: ref("density") });
+    const panes = use("Grid", { props: { Cols: "1-3", Class: "items-start gap-4" } },
+      side("compact"),
+      ifAny("activity.events", [organism("Panel", { title: ref("activity.title"), description: ref("activity.text"), id: tpl("{0}-list", ref("id")) }, kids(use("List", { props: { Class: "m-0 flex list-none flex-col gap-4 p-0" }, attrs: { "data-testid": "items" } },
+        each(ref("activity.events"), "e", ref("e.id"), use("ListItem", { props: { Class: "flex flex-col gap-2" }, attrs: { "data-testid": "item" } }, strong(ref("e.title"), "sm"), muted(ref("e.time"), "xs"))))))]),
+      // the panes have the activity list of their own, so the main column shows the chart alone (compact: Gap "4" = gap-4)
+      main("1-2", { density: "compact" }));
+    return [use("Block", { props: { Tag: "section", Class: "bg-background" }, attrs: { "aria-labelledby": tpl("{0}-title", ref("id")), "data-testid": "app-shell", "data-layout": ref("layout") } },
+      when(eq(ref("layout"), "top"),
+        [use("Stack", { props: { Gap: "6", Align: "stretch" } },
+          organism("NavBar", { label: ref("nav.label"), brand: ref("nav.brand"), links: ref("nav.links"), current: ref("nav.current"), search: ref("search"), actions: { mode: "none" }, layout: "search", over: "none" }),
+          use("Container", { props: { Class: cn(wide, "pb-8") }, attrs: { "data-slot": "container" } }, main("1-4")))],
+        [use("Container", { props: { Class: cn(wide, "py-8") }, attrs: { "data-slot": "container" } },
+          when(eq(ref("layout"), "sidebar"),
+            [use("Grid", { props: { Cols: "1", Class: "items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]" } }, side("full"), main("1-2"))],
+            [panes])) ])),
+    ];
+  })(),
+});
+
+const kanban = spec(`${O}kanban-board`, "KanbanBoard", "Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card between lanes is a port contract.", {
+  records: {
+    Lane: fields(["id", "string"], ["key", "string"], ["title", "string"]),
+    BoardCard: fields(["id", "string"], ["lane", "string"], ["title", "string"], ["tag", "string"], ["who", "string"]),
+  },
+  props: [
+    id, title,
+    { name: "lanes", type: ts("Lane[]"), required: true },
+    empty,
+    { name: "cards", type: ts("BoardCard[]"), required: true },
+    { name: "countLabel", type: "string", required: true, docs: "template of the card count of a lane, e.g. `{0} cards`" },
+    { name: "card", type: tsOf("simple", "detail"), default: "detail" },
+    { name: "cols", type: tsOf("2", "3"), default: "3" },
+    { name: "tone", type: toneLite, default: "default" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [frame({ id: ref("id"), title: ref("title"), tone: ref("tone"), density: ref("density") }, [orEmpty("lanes", "kanban", [
+    use("Grid", { props: { Cols: cond(eq(ref("cols"), "2"), "1-2", "1-3"), Class: "items-start gap-4" }, attrs: { "data-testid": "lanes" } },
+      each(ref("lanes"), "lane", ref("lane.id"), use("Stack", { props: { Gap: "4", Align: "stretch", Class: "rounded bg-muted p-4" }, attrs: { "data-testid": "lane" } },
+        use("Group", { props: { Gap: "2", Align: "center", Justify: "between" } },
+          use("Title", { props: { As: 3, Size: "base", Weight: "bold" } }, text(ref("lane.title"))),
+          use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(tpl(ref("countLabel"), len(where(ref("cards"), "lane", ref("lane.key"))))))),
+        use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" } },
+          each(where(ref("cards"), "lane", ref("lane.key")), "c", ref("c.id"), use("ListItem", { props: { Class: cn("flex flex-col rounded bg-card inset-ring inset-ring-border", cond(eq(ref("density"), "compact"), "gap-2 p-2", "gap-2 p-4")) }, attrs: { "data-testid": "item" } },
+            strong(ref("c.title"), "sm"),
+            when(eq(ref("card"), "detail"), [use("Group", { props: { Gap: "2", Align: "center", Justify: "between", Class: "flex-wrap" } },
+              organism("Pill", { tone: "blue", icon: "tag" }, kids(text(ref("c.tag")))),
+              muted(ref("c.who"), "xs"))]))))))),])
+  ])],
+});
+
+export const workspaceOrganisms: OrganismSpec[] = [overview, appMain, appShell, kanban];
diff --git a/xgen/screens/src/authoring/components/app-main.ts b/xgen/screens/src/authoring/components/app-main.ts
new file mode 100644
index 0000000..fd97135
--- /dev/null
+++ b/xgen/screens/src/authoring/components/app-main.ts
@@ -0,0 +1,38 @@
+// The main column of AppShell (AppMain) and the panels it shares with DashboardOverview: metric tiles,
+// the chart and the recent activity.
+import { cond, each, eq, ref, text, tpl, use, when, organism } from "../../build";
+import type { Value } from "../../ir";
+import { groupFields, requireFields, spec, ts } from "../kit";
+import { id, ifAny, title, tsOf, denseLite } from "../props";
+import { kids } from "../forms";
+
+export const sharedTypes = [{ from: "MetricRow", names: ["Metric"] }, { from: "ChartPanel", names: ["Point"] }, { from: "ActivityFeed", names: ["Event"] }];
+export const required = (...f: Parameters<typeof groupFields>) => requireFields(groupFields(...f), ...f.map(([name]) => name));
+/** the chart panel of the first screen */
+export const OverviewChart = required(["title", "string"], ["text", "string"], ["summary", "string", "the chart's accessible summary"], ["series", "Point[]", "the bars"]);
+/** the recent-activity panel of the first screen */
+export const OverviewActivity = required(["title", "string"], ["text", "string"], ["events", "Event[]"]);
+
+// emptyMode omit (AppShell, DashboardOverview): no metrics, no tiles; no series or events, no panel
+export const tiles = (cols: Value) => ifAny("metrics", [use("Grid", { props: { Cols: cols, Class: "gap-4" }, attrs: { "data-testid": "items" } },
+  each(ref("metrics"), "m", ref("m.id"), use("Box", { props: {}, attrs: { "data-testid": "item" } }, organism("StatTile", { label: ref("m.label"), value: ref("m.value"), icon: ref("m.icon"), hint: ref("m.hint") }))))]);
+export const chart = () => ifAny("chart.series", [organism("Panel", { title: ref("chart.title"), description: ref("chart.text"), id: tpl("{0}-chart", ref("id")), className: "h-full" }, kids(
+  organism("BarChart", { bars: ref("chart.series"), label: ref("chart.summary"), height: 144 })))]);
+export const feed = () => ifAny("activity.events", [organism("Panel", { title: ref("activity.title"), description: ref("activity.text"), id: tpl("{0}-feed", ref("id")), className: "h-full" }, kids(organism("Timeline", { items: ref("activity.events") })))]);
+
+/** the main column of AppShell: the heading, the metric tiles and the chart, with the activity beside it when there is one */
+export const appMain = spec("pattern.app-main", "AppMain", "The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel when `activity` is given).", {
+  typeImports: [...sharedTypes, { from: "DashboardOverview", names: ["OverviewChart", "OverviewActivity"] }],
+  props: [
+    id, title,
+    { name: "metrics", type: ts("Metric[]"), required: true },
+    { name: "chart", type: ts("OverviewChart"), required: true },
+    { name: "activity", type: ts("OverviewActivity"), docs: "the activity panel beside the chart; none: the chart alone" },
+    { name: "cols", type: tsOf("1-2", "1-4"), default: "1-2", docs: "columns of the metric tiles" },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [use("Stack", { props: { Gap: cond(eq(ref("density"), "compact"), "4", "6"), Align: "stretch", Class: "min-w-0" }, attrs: { "data-testid": "app-main" } },
+    use("Title", { props: { As: 2, Size: "2xl", Weight: "bold" }, attrs: { id: tpl("{0}-title", ref("id")) } }, text(ref("title"))),
+    tiles(ref("cols")),
+    when(ref("activity"), [use("Grid", { props: { Cols: "1-2", Class: "items-stretch gap-4" } }, chart(), feed())], [chart()]))],
+});
diff --git a/xgen/screens/src/authoring/components/auth.ts b/xgen/screens/src/authoring/components/auth.ts
new file mode 100644
index 0000000..0414a74
--- /dev/null
+++ b/xgen/screens/src/authoring/components/auth.ts
@@ -0,0 +1,28 @@
+// The fields of AuthCard (AuthForm): name, email and password by mode, remember me and forgot, the terms, the submit button.
+import { and, cond, eq, ne, ref, text, use, when } from "../../build";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { checkRow, inputField } from "../forms";
+
+const P = "pattern.";
+
+export const authForm = spec(`${P}auth-form`, "AuthForm", "The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot link, the terms, the submit button.", {
+  typeImports: [{ from: "AuthCard", names: ["AuthLabels"] }],
+  props: [
+    { name: "id", type: "string", required: true, docs: "the id of the card: field ids are <id>-email, <id>-password, ..." },
+    { name: "mode", type: tsOf("signin", "signup", "reset", "magic"), default: "signin" },
+    { name: "labels", type: ts("AuthLabels"), required: true },
+    { name: "submit", type: "string", required: true, docs: "text of the submit button" },
+  ],
+  view: [
+    use("Form", { props: { Method: "dialog", Class: "gap-4" }, attrs: { "data-testid": "auth-form" } },
+      when(eq(ref("mode"), "signup"), [inputField("name", "text", ref("labels.name"), "name")]),
+      inputField("email", "email", ref("labels.email"), "email"),
+      when(and(ne(ref("mode"), "reset"), ne(ref("mode"), "magic")), [inputField("password", "password", ref("labels.password"), cond(eq(ref("mode"), "signup"), "new-password", "current-password"))]),
+      when(eq(ref("mode"), "signin"), [use("Group", { props: { Justify: "between", Align: "center", Class: "flex-wrap gap-2" } },
+        checkRow("remember", ref("labels.remember")),
+        use("Button", { props: { Variant: "link", Size: "sm", Class: "px-0" } }, text(ref("labels.forgot"))))]),
+      when(eq(ref("mode"), "signup"), [checkRow("terms", ref("labels.terms"))]),
+      use("Button", { props: { Variant: "default", Size: "default", Type: "submit", Class: "w-full" }, attrs: { "data-testid": "submit" } }, text(ref("submit")))),
+  ],
+});
diff --git a/xgen/screens/src/authoring/components/cart-table.ts b/xgen/screens/src/authoring/components/cart-table.ts
new file mode 100644
index 0000000..a473579
--- /dev/null
+++ b/xgen/screens/src/authoring/components/cart-table.ts
@@ -0,0 +1,43 @@
+// The table layout of CartList (CartTable): one row per line with its quantity field and a remove button.
+import { call, tpl, cn, cond, each, eq, firstOf, gt, len, mul, money, ref, str, sumBy, text, use, when, organism } from "../../build";
+import { spec, ts } from "../kit";
+import { tsOf, denseLite } from "../props";
+
+/** the table layout of CartList: one row per line with its quantity field and a remove button */
+export const cartTable = spec("pattern.cart-table", "CartTable", "The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a remove button.", {
+  typeImports: [{ from: "CartList", names: ["CartLine", "CartLabels"] }],
+  props: [
+    { name: "lines", type: ts("CartLine[]"), required: true },
+    { name: "labels", type: ts("CartLabels"), required: true },
+    { name: "media", type: tsOf("image", "none"), default: "image" },
+    { name: "density", type: denseLite, default: "default" },
+    { name: "field", type: "string", default: "qty", docs: "prefix of the quantity field names (one name per line: <field>-<line id>)" },
+  ],
+  events: [{ name: "remove", args: [{ name: "id", type: "string" }], docs: "the remove button of a line was pressed" }],
+  view: [
+    use("Box", { props: { Class: "w-full overflow-x-auto" } },
+  use("Table", { props: { Class: "w-full text-left text-sm" }, attrs: { "data-testid": "cart-table" } },
+    use("TableCaption", { props: { Class: "sr-only" } }, text(ref("labels.caption"))),
+    use("TableHead", {}, use("TableRow", {},
+      use("TableHeadCell", { props: { Scope: "col", Class: "py-2" } }, text(ref("labels.product"))),
+      use("TableHeadCell", { props: { Scope: "col", Class: "hidden py-2 sm:table-cell" } }, text(ref("labels.price"))),
+      use("TableHeadCell", { props: { Scope: "col", Class: "py-2" } }, text(ref("labels.qty"))),
+      use("TableHeadCell", { props: { Scope: "col", Class: "py-2" } }, text(ref("labels.total"))),
+      use("TableHeadCell", { props: { Scope: "col", Class: "py-2" } }, use("Inline", { props: { Class: "sr-only" } }, text(ref("labels.remove")))))),
+    use("TableBody", {}, each(ref("lines"), "line", ref("line.id"),
+      use("TableRow", { props: { Class: "border-t border-border" }, attrs: { "data-testid": "item" } },
+        use("TableCell", { props: { Class: cn(cond(eq(ref("density"), "compact"), "py-2", "py-4")) } },
+          use("Group", { props: { Gap: "4", Align: "center" } },
+            when(eq(ref("media"), "image"), [organism("MediaFrame", { alt: ref("line.name"), ratio: "1/1", className: "hidden size-14 shrink-0 sm:block" })]),
+            use("Stack", { props: { Gap: "0" } },
+              use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("line.name"))),
+              use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(ref("line.variant")))))),
+        use("TableCell", { props: { Class: "hidden sm:table-cell" } }, text(money(ref("line.price"), ref("line.currency")))),
+        use("TableCell", { props: { Class: "" } }, organism("NumberField", { value: str(ref("line.qty")), name: tpl("{0}-{1}", ref("field"), ref("line.id")), min: "1", label: ref("labels.qty"), decrease: ref("labels.decrease"), increase: ref("labels.increase") })),
+        use("TableCell", { props: { Class: "font-semibold" } }, text(money(mul(ref("line.price"), ref("line.qty")), ref("line.currency")))),
+        use("TableCell", { props: { Class: "text-right" } }, use("Button", { props: { Variant: "ghost", Size: "sm", Layout: "icon", AriaLabel: ref("labels.remove") }, on: { click: call("emit.remove", ref("line.id")) }, attrs: { "data-testid": "remove" } }, use("LucideIcon", { props: { Name: "x", Size: 16 } })))))))),
+    when(gt(len(ref("lines")), 0), [use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "mt-4 flex-wrap border-t border-border pt-4" }, attrs: { "data-testid": "cart-footer" } },
+      use("Text", { props: { Size: "base", Weight: "bold" }, attrs: { "data-testid": "subtotal" } }, text(ref("labels.subtotal")), text(" "), text(money(sumBy(ref("lines"), "price", "qty"), firstOf(ref("lines"), "currency")))),
+      use("Button", { props: { Variant: "default", Size: "default" }, attrs: { "data-testid": "checkout" } }, text(ref("labels.checkout"))))]),
+  ],
+});
diff --git a/xgen/screens/src/authoring/components/checkout-parts.ts b/xgen/screens/src/authoring/components/checkout-parts.ts
new file mode 100644
index 0000000..310915d
--- /dev/null
+++ b/xgen/screens/src/authoring/components/checkout-parts.ts
@@ -0,0 +1,128 @@
+// The parts the checkout, the cart page and the slot picker share: a grid of delivery windows (radios), payment options (radio cards),
+// a numbered step of a form, and the order summary card with a promo code and a free-delivery progress bar.
+import { and, cn, cond, each, eq, gt, len, money, mul, ref, slot, str, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { ifAny, tsOf } from "../props";
+import { muted, strong, surface } from "../ux";
+import { checkRow } from "../forms";
+
+const P = "pattern.";
+/** a radio inside its label, drawn as a chip; `has-checked` marks the chosen one */
+const chip = "flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground";
+
+export const slotGrid = spec(`${P}slot-grid`, "SlotGrid", "Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck through. One radio group (`name`) across all days. Static markup.", {
+  records: { Day: fields(["id", "string"], ["title", "string"], ["note", "string"], ["slots", "string[]"], ["closed", "string[]"]) },
+  props: [
+    { name: "days", type: ts("Day[]"), required: true },
+    { name: "name", type: "string", required: true, docs: "name of the radio group" },
+    { name: "item", type: tsOf("card", "plain"), default: "card", docs: "card: each day in a card; plain: days divided by a line" },
+  ],
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "days" } },
+    each(ref("days"), "d", ref("d.id"),
+      use("Stack", { props: { Gap: "4", Class: cond(eq(ref("item"), "card"), surface("p-4"), "border-b border-border pb-4") }, attrs: { "data-testid": "day" } },
+        use("Group", { props: { Gap: "4", Align: "baseline", Justify: "between", Class: "flex-wrap" } }, strong(ref("d.title"), "sm"), muted(ref("d.note"), "xs")),
+        use("Box", { props: { Class: "grid grid-cols-2 gap-2 sm:grid-cols-3" } },
+          each(ref("d.slots"), "s", ref("s"),
+            use("Label", { props: { Class: chip } }, use("Radio", { props: { Name: ref("name"), Value: tpl("{0} {1}", ref("d.id"), ref("s")) } }), use("Inline", {}, text(ref("s"))))),
+          each(ref("d.closed"), "s", ref("s"),
+            use("Label", { props: { Class: cn(chip, "text-muted-foreground line-through") } }, use("Radio", { props: { Name: ref("name"), Value: tpl("{0} {1}", ref("d.id"), ref("s")), Disabled: true } }), use("Inline", {}, text(ref("s"))))))))),
+  ],
+});
+
+export const paymentOptions = spec(`${P}payment-options`, "PaymentOptions", "Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup.", {
+  records: { Payment: fields(["id", "string"], ["title", "string"], ["text", "string"], ["icon", "string"]) },
+  props: [
+    { name: "payments", type: ts("Payment[]"), required: true },
+    { name: "name", type: "string", required: true, docs: "name of the radio group" },
+    { name: "checked", type: "string", default: "", docs: "id of the chosen payment" },
+  ],
+  view: [use("Grid", { props: { Cols: "1-2", Class: "gap-4" }, attrs: { "data-testid": "payments" } },
+    each(ref("payments"), "p", ref("p.id"),
+      use("Label", { props: { Class: "flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground" }, attrs: { "data-testid": "payment" } },
+        use("Radio", { props: { Name: ref("name"), Value: ref("p.id"), Checked: eq(ref("p.id"), ref("checked")) } }),
+        use("LucideIcon", { props: { Name: ref("p.icon"), Size: 20, Class: "shrink-0" } }),
+        use("Inline", { props: { Class: "flex flex-col items-start justify-start gap-0" } }, use("Inline", { props: { Class: "text-sm font-semibold" } }, text(ref("p.title"))), use("Inline", { props: { Class: "text-xs text-muted-foreground" } }, text(ref("p.text"))))))),
+  ],
+});
+
+export const checkoutStep = spec(`${P}checkout-step`, "CheckoutStep", "One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`). Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).", {
+  props: [
+    { name: "number", type: "string", required: true, docs: "the number of the step (shown in the numbered layout)" },
+    { name: "title", type: "string", required: true },
+    { name: "text", type: "string", default: "" },
+    { name: "layout", type: tsOf("cards", "numbered"), default: "cards" },
+  ],
+  children: true,
+  view: [use("Stack", { props: { Gap: "6", Align: "stretch", Class: cond(eq(ref("layout"), "cards"), surface("p-6"), "border-t border-border pt-6") }, attrs: { "data-testid": "step" } },
+    use("Group", { props: { Gap: "4", Align: "start" } },
+      when(eq(ref("layout"), "numbered"), [use("Box", { props: { Class: "flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground" } }, text(ref("number")))]),
+      use("Stack", { props: { Gap: "0" } },
+        use("Title", { props: { As: 2, Size: "lg", Weight: "semibold" } }, text(ref("title"))),
+        when(ref("text"), [muted(ref("text"))]))),
+    slot("children")),
+  ],
+});
+
+export const cartSummaryCard = spec(`${P}cart-summary-card`, "CartSummaryCard", "The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.", {
+  typeImports: [{ from: "CartList", names: ["CartLine"] }, { from: "OrderSummary", names: ["SummaryRow"] }],
+  records: {
+    Promo: fields(["id", "string"], ["code", "string"]),
+    CartSummaryLabels: fields(["title", "string"], ["items", "string"], ["promo", "string"], ["apply", "string"], ["codes", "string"], ["progress", "string"], ["checkout", "string"], ["note", "string"]),
+  },
+  props: [
+    { name: "lines", type: ts("CartLine[]"), required: true },
+    { name: "rows", type: ts("SummaryRow[]"), required: true },
+    { name: "promos", type: ts("Promo[]"), required: true },
+    { name: "labels", type: ts("CartSummaryLabels"), required: true },
+    { name: "items", type: tsOf("show", "hide"), default: "hide", docs: "show: the lines in short at the top" },
+    { name: "promo", type: tsOf("show", "hide"), default: "show" },
+    { name: "field", type: "string", default: "promo", docs: "name of the promo code field (unique on the page)" },
+    { name: "progress", type: tsOf("show", "hide"), default: "show" },
+    { name: "value", type: "number", default: 70, docs: "how far the order is towards free delivery, 0 to 100" },
+  ],
+  view: [use("Stack", { props: { Gap: "6", Align: "stretch", Class: surface("p-6") }, attrs: { "data-testid": "summary" } },
+    use("Group", { props: { Gap: "4", Align: "baseline", Justify: "between" } },
+      use("Title", { props: { As: 2, Size: "lg", Weight: "semibold" } }, text(ref("labels.title"))),
+      muted(tpl(ref("labels.items"), str(len(ref("lines")))), "xs")),
+    // emptyMode omit (CheckoutForm, ShoppingCart): an empty list leaves its part out
+    when(and(eq(ref("items"), "show"), gt(len(ref("lines")), 0)), [use("List", { props: { Tag: "ul", Class: "flex flex-col gap-4" }, attrs: { "data-testid": "summary-lines" } },
+      each(ref("lines"), "line", ref("line.id"),
+        use("ListItem", { props: { Class: "flex items-center gap-4 text-sm" } },
+          organism("MediaFrame", { alt: ref("line.name"), ratio: "1/1", className: "size-12 shrink-0" }),
+          use("Stack", { props: { Gap: "0", Class: "flex-1" } }, strong(ref("line.name"), "sm"), muted(tpl("{0} x {1}", ref("line.qty"), money(ref("line.price"), ref("line.currency"))), "xs")),
+          use("Inline", { props: { Class: "font-medium" } }, text(money(mul(ref("line.price"), ref("line.qty")), ref("line.currency")))))))]),
+    when(eq(ref("promo"), "show"), [use("Stack", { props: { Gap: "2", Align: "stretch" }, attrs: { "data-testid": "promo" } },
+      use("Group", { props: { Gap: "2", Align: "center" } },
+        use("Input", { props: { Type: "text", Name: ref("field"), AriaLabel: ref("labels.promo"), Placeholder: ref("labels.promo"), Class: "min-w-0 flex-1" } }),
+        use("Button", { props: { Variant: "outline", Size: "default", Type: "button" } }, text(ref("labels.apply")))),
+      ifAny("promos", [use("Group", { props: { Gap: "2", Align: "center", Class: "flex-wrap" } },
+        muted(ref("labels.codes"), "xs"),
+        each(ref("promos"), "c", ref("c.id"), use("Badge", { props: { Variant: "outline", Size: "sm" }, attrs: { "data-testid": "code" } }, text(ref("c.code")))))]))]),
+    when(eq(ref("progress"), "show"), [use("Stack", { props: { Gap: "2", Align: "stretch", Class: "rounded bg-muted p-4" }, attrs: { "data-testid": "progress" } },
+      use("Text", { props: { Size: "sm" } }, text(ref("labels.progress"))),
+      use("Progress", { props: { Value: str(ref("value")), Max: "100" }, attrs: { "aria-label": ref("labels.progress") } }))]),
+    ifAny("rows", [use("List", { props: { Tag: "ul", Class: "flex flex-col gap-2" } },
+      each(ref("rows"), "row", ref("row.id"),
+        use("ListItem", { props: { Class: cn("flex items-center justify-between gap-4", cond(ref("row.strong"), "border-t border-border pt-4 text-base font-bold", "text-sm text-muted-foreground")) }, attrs: { "data-testid": "row" } },
+          use("Inline", {}, text(ref("row.label"))), use("Inline", {}, text(money(ref("row.amount"), ref("row.currency")))))))]),
+    use("Button", { props: { Variant: "default", Size: "lg", Class: "w-full" }, attrs: { "data-testid": "checkout" } }, text(ref("labels.checkout"))),
+    muted(ref("labels.note"), "xs")),
+  ],
+});
+
+/** the end of the checkout form: the consent checkbox, the submit button and the legal line */
+const checkoutSubmit = spec("pattern.checkout-submit", "CheckoutSubmit", "The end of the checkout form: the consent checkbox, the submit button and the legal line.", {
+  props: [
+    { name: "id", type: "string", required: true, docs: "id of the form block (the checkbox id is <id>-consent)" },
+    { name: "consent", type: "string", required: true },
+    { name: "submit", type: "string", required: true },
+    { name: "legal", type: "string", required: true },
+  ],
+  view: [use("Stack", { props: { Gap: "4", Align: "start" } },
+    checkRow("consent", ref("consent")),
+    use("Button", { props: { Variant: "default", Size: "lg", Type: "submit" }, attrs: { "data-testid": "submit" } }, text(ref("submit"))),
+    muted(ref("legal"), "xs"))],
+});
+
+export const checkoutParts: OrganismSpec[] = [checkoutSubmit, slotGrid, paymentOptions, checkoutStep, cartSummaryCard];
diff --git a/xgen/screens/src/authoring/components/compare.ts b/xgen/screens/src/authoring/components/compare.ts
new file mode 100644
index 0000000..ac5fdd2
--- /dev/null
+++ b/xgen/screens/src/authoring/components/compare.ts
@@ -0,0 +1,24 @@
+// One cell value of ComparisonTable (CompareMark): yes shows a check, no a dash (both with a hidden word), anything else is the text.
+import { and, eq, ne, ref, text, use, when } from "../../build";
+import { spec } from "../kit";
+
+const P = "pattern.";
+
+const mark = (value: ReturnType<typeof ref>) => [
+  when(eq(value, "yes"), [use("Inline", { props: { Class: "inline-flex items-center gap-2" }, attrs: { "data-mark": "yes" } },
+    use("LucideIcon", { props: { Name: "check", Size: 16, Class: "text-foreground" } }),
+    use("Inline", { props: { Class: "sr-only" } }, text(ref("yes"))))]),
+  when(eq(value, "no"), [use("Inline", { props: { Class: "inline-flex items-center gap-2 text-muted-foreground" }, attrs: { "data-mark": "no" } },
+    use("LucideIcon", { props: { Name: "minus", Size: 16 } }),
+    use("Inline", { props: { Class: "sr-only" } }, text(ref("no"))))]),
+  when(and(ne(value, "yes"), ne(value, "no")), [use("Inline", {}, text(value))]),
+];
+
+export const compareMark = spec(`${P}compare-mark`, "CompareMark", "One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen readers), any other value is shown as text.", {
+  props: [
+    { name: "value", type: "string", required: true, docs: "yes, no or a short text" },
+    { name: "yes", type: "string", required: true, docs: "the hidden word for yes" },
+    { name: "no", type: "string", required: true, docs: "the hidden word for no" },
+  ],
+  view: mark(ref("value")),
+});
diff --git a/xgen/screens/src/authoring/components/contracts.ts b/xgen/screens/src/authoring/components/contracts.ts
new file mode 100644
index 0000000..ea2f38c
--- /dev/null
+++ b/xgen/screens/src/authoring/components/contracts.ts
@@ -0,0 +1,57 @@
+// Contracts for what moves: a marquee, a carousel, a counter that counts up, typed text, a video, an animated backdrop, a scroll spy, a draggable list.
+// A contract fixes the props, the slots and the events and says why it is not generated. The static look of each is a variant of a block
+// (a strip, a single quote with dots, plain figures, a code window, a picture, a flat accent hero); the motion is written by the programmer behind the contract.
+import { contract, prop, req, ts } from "../kit";
+import type { OrganismSpec } from "../../ir";
+
+const P = "pattern.";
+const MOTION = "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract";
+
+const marquee = contract(`${P}marquee`, "Marquee", "A row (or column) of items that scrolls on its own and pauses on hover and focus. The items are the children; the same items follow once more, hidden from assistive technology, so the loop has no gap.", MOTION, {
+  props: [req("label", "string", "accessible name of the region"), prop("direction", ts('"start" | "end"'), "which way the items move", { default: "start" }), prop("paused", "boolean", "stop the motion; also the value under a reduced-motion preference")],
+  className: true,
+  children: true,
+});
+
+const carousel = contract(`${P}carousel`, "Carousel", "Slides shown one at a time with previous and next buttons and dots. The slides are the children. The page keeps the index in `value` and learns of a change from `change`; autoplay is off unless the programmer turns it on, and a reduced-motion preference turns it off.", MOTION, {
+  props: [req("label", "string", "accessible name of the region"), req("count", "number", "how many slides"), prop("value", "number", "index of the slide shown", { default: 0 }), prop("previous", "string", "accessible name of the previous button"), prop("next", "string", "accessible name of the next button")],
+  className: true,
+  children: true,
+  events: [{ name: "change", args: [{ name: "index", type: "number" }], docs: "a button or a dot moved to another slide" }],
+});
+
+const countUp = contract(`${P}count-up`, "CountUp", "A figure that counts from zero to `value` when it first comes into view. Without script, and under a reduced-motion preference, it shows `value` at once; the figure in the markup is always the final one.", MOTION, {
+  props: [req("value", "number", "the final figure"), prop("prefix", "string"), prop("suffix", "string"), prop("duration", "number", "milliseconds", { default: 1200 })],
+  className: true,
+});
+
+const typingText = contract(`${P}typing-text`, "TypingText", "A line typed one character at a time, then erased, then the next line. Assistive technology and a reduced-motion preference get the first line, whole.", MOTION, {
+  props: [req("lines", ts("string[]"), "the lines in turn"), prop("speed", "number", "milliseconds per character", { default: 60 })],
+  className: true,
+});
+
+const videoEmbed = contract(`${P}video-embed`, "VideoEmbed", "A video in a fixed ratio with a poster, controls and, as a backdrop, a muted loop behind the content. Playing starts only on request; a backdrop video stops under a reduced-motion preference and shows the poster.", MOTION, {
+  props: [req("title", "string", "accessible name of the player"), req("poster", "string", "address of the poster picture"), prop("src", "string", "address of the video"), prop("ratio", ts('"16/9" | "4/3" | "1/1"'), "frame ratio", { default: "16/9" }), prop("backdrop", "boolean", "muted, looping, without controls, behind the content", { default: false })],
+  className: true,
+  events: [{ name: "play", args: [], docs: "playing started" }, { name: "pause", args: [], docs: "playing stopped" }],
+});
+
+const animatedBackdrop = contract(`${P}animated-backdrop`, "AnimatedBackdrop", "A moving background behind a section (drifting shapes, a mesh of soft colour). The static fallback is a flat tone of the theme; nothing moves under a reduced-motion preference.", MOTION, {
+  props: [prop("tone", ts('"default" | "muted" | "accent"'), "the flat colour shown without motion", { default: "default" })],
+  className: true,
+  children: true,
+});
+
+const scrollSpy = contract(`${P}scroll-spy`, "ScrollSpy", "Marks which section of the page is being read: it watches the sections by id and reports the one in view, so a table of contents or a sticky picture can follow.", "an intersection observer on the page's sections; the page owns the state", {
+  props: [req("ids", ts("string[]"), "ids of the sections, in page order"), prop("offset", "number", "pixels from the top that count as being in view", { default: 0 })],
+  events: [{ name: "active", args: [{ name: "id", type: "string" }], docs: "another section came into view" }],
+});
+
+const sortableList = contract(`${P}sortable-list`, "SortableList", "Items that can be dragged into a new order or into another list (the cards of a board). Keyboard users move an item with the arrow keys; the new place is reported, nothing is stored here.", "drag and drop with pointer capture and a keyboard alternative; the order is kept by the page", {
+  props: [req("label", "string", "accessible name of the list"), req("group", "string", "lists with the same group accept each other's items")],
+  className: true,
+  children: true,
+  events: [{ name: "move", args: [{ name: "id", type: "string" }, { name: "to", type: "string" }, { name: "index", type: "number" }], docs: "an item was dropped" }],
+});
+
+export const contractPatterns: OrganismSpec[] = [marquee, carousel, countUp, typingText, videoEmbed, animatedBackdrop, scrollSpy, sortableList];
diff --git a/xgen/screens/src/authoring/components/cta-proof-parts.ts b/xgen/screens/src/authoring/components/cta-proof-parts.ts
new file mode 100644
index 0000000..ea6b6be
--- /dev/null
+++ b/xgen/screens/src/authoring/components/cta-proof-parts.ts
@@ -0,0 +1,38 @@
+// The proof of CtaProof: a row of logos, six small features, three figures, icon rows, or delivery zones with price and time.
+import { and, cond, each, eachAt, eq, gt, len, lt, money, ref, text, use, when } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted, strong, surface } from "../ux";
+
+const iconSquare = (icon: string): ViewNode =>
+  use("Box", { props: { Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted" } }, use("LucideIcon", { props: { Name: ref(icon), Size: 20 } }));
+
+export const ctaProofItems = spec("pattern.cta-proof-items", "CtaProofItems", "The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).", {
+  typeImports: [{ from: "CtaProof", names: ["CtaContent"] }],
+  props: [
+    { name: "content", type: ts("CtaContent"), required: true },
+    { name: "proof", type: tsOf("logos", "features", "stats", "rows", "zones"), default: "stats" },
+    { name: "center", type: "boolean", default: false, docs: "the centered layout: items centred in their cells" },
+  ],
+  view: [
+    when(and(eq(ref("proof"), "logos"), gt(len(ref("content.logos")), 0)), [use("Box", { props: { Class: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6" }, attrs: { "data-testid": "cta-proof" } },
+      each(ref("content.logos"), "l", ref("l.id"), use("Group", { props: { Gap: "2", Align: "center", Justify: "center", Class: "text-muted-foreground" }, attrs: { "data-testid": "cta-item" } },
+        use("LucideIcon", { props: { Name: ref("l.icon"), Size: 20 } }), use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("l.name"))))))]),
+    when(and(eq(ref("proof"), "features"), gt(len(ref("content.features")), 0)), [use("Box", { props: { Class: "grid grid-cols-1 gap-4 text-left sm:grid-cols-2" }, attrs: { "data-testid": "cta-proof" } },
+      each(ref("content.features"), "f", ref("f.id"), use("Group", { props: { Gap: "4", Align: "start", Class: surface("p-4") }, attrs: { "data-testid": "cta-item" } },
+        iconSquare("f.icon"), use("Stack", { props: { Gap: "0" } }, strong(ref("f.title"), "sm"), muted(ref("f.text"), "xs")))))]),
+    when(and(eq(ref("proof"), "stats"), gt(len(ref("content.stats")), 0)), [use("Box", { props: { Class: "grid grid-cols-3 gap-4" }, attrs: { "data-testid": "cta-proof" } },
+      eachAt(ref("content.stats"), "s", "i", ref("s.id"), when(lt(ref("i"), 3), [use("Stack", { props: { Gap: "0", Class: cond(ref("center"), "items-center text-center", "") }, attrs: { "data-testid": "cta-item" } },
+        use("Text", { props: { Size: "3xl", Weight: "bold" } }, text(ref("s.value"))), muted(ref("s.label"), "xs"))])))]),
+    when(and(eq(ref("proof"), "rows"), gt(len(ref("content.features")), 0)), [use("List", { props: { Class: "m-0 flex list-none flex-col gap-4 p-0" }, attrs: { "data-testid": "cta-proof" } },
+      each(ref("content.features"), "f", ref("f.id"), use("ListItem", { props: { Class: "flex items-start gap-4" }, attrs: { "data-testid": "cta-item" } },
+        iconSquare("f.icon"), use("Stack", { props: { Gap: "0" } }, strong(ref("f.title"), "sm"), muted(ref("f.text"), "xs")))))]),
+    when(and(eq(ref("proof"), "zones"), gt(len(ref("content.zones")), 0)), [use("List", { props: { Class: "m-0 flex list-none flex-col p-0" }, attrs: { "data-testid": "cta-proof" } },
+      each(ref("content.zones"), "z", ref("z.id"), use("ListItem", { props: { Class: "flex items-start justify-between gap-4 border-b border-border py-4" }, attrs: { "data-testid": "cta-item" } },
+        use("Stack", { props: { Gap: "0", Class: "min-w-0" } }, strong(ref("z.name"), "sm"), muted(ref("z.area"), "xs")),
+        use("Stack", { props: { Gap: "0", Class: "shrink-0 text-right" } }, strong(money(ref("z.price"), ref("z.currency")), "sm"), muted(ref("z.time"), "xs")))))]),
+  ],
+});
+
+export const ctaProofParts: OrganismSpec[] = [ctaProofItems];
diff --git a/xgen/screens/src/authoring/components/cta.ts b/xgen/screens/src/authoring/components/cta.ts
new file mode 100644
index 0000000..2bfa99c
--- /dev/null
+++ b/xgen/screens/src/authoring/components/cta.ts
@@ -0,0 +1,24 @@
+// The pieces of a call to action: its actions (CtaActions: links or an email field) and the customer
+// quote beside it (QuoteProof). CtaBand uses them.
+import { cn, cond, eq, ref, text, use, when } from "../../build";
+import { rec, spec } from "../kit";
+import { actions, actionSet, id } from "../props";
+import { muted } from "../ux";
+import { emailRow } from "../forms";
+
+const P = "pattern.";
+/** the actions of a call to action: one or two links, or an email field with a button */
+export const ctaActions = spec(`${P}cta-actions`, "CtaActions", "The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions form).", {
+  records: { ActionSet: actionSet },
+  props: [id, { name: "actions", type: rec("ActionSet"), required: true }, { name: "center", type: "boolean", default: false }],
+  view: [when(eq(ref("actions.mode"), "form"), [emailRow(ref("actions.emailLabel"), ref("actions.cta"), ref("center"))], [actions(ref("center") as ReturnType<typeof eq>, "actions")])],
+});
+
+/** a customer quote under a call to action */
+export const quoteProof = spec(`${P}quote-proof`, "QuoteProof", "A customer quote and who said it, as a figure.", {
+  props: [{ name: "quote", type: "string" }, { name: "quoteBy", type: "string" }, { name: "center", type: "boolean", default: false }],
+  view: [use("Block", { props: { Tag: "figure", Class: cn("flex flex-col gap-2", cond(ref("center"), "items-center text-center", "")) }, attrs: { "data-testid": "proof" } },
+    use("Text", { props: { Size: "xl" } }, text(ref("quote"))), muted(ref("quoteBy")))],
+});
+
+/** closing banner: a centered muted card with a pill button */
diff --git a/xgen/screens/src/authoring/components/faq-parts.ts b/xgen/screens/src/authoring/components/faq-parts.ts
new file mode 100644
index 0000000..5a9c982
--- /dev/null
+++ b/xgen/screens/src/authoring/components/faq-parts.ts
@@ -0,0 +1,69 @@
+// Parts of FaqSplit: the questions as disclosures, as cards, the help card beside them and the finder (search, topics, popular questions).
+import { coalesce, cond, each, eachAt, eq, lt, ref, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted, strong, surface } from "../ux";
+import { articleBlockOf } from "./landmarks";
+import { menuEntry } from "./nav";
+
+const types = [{ from: "FaqSplit", names: ["Question", "FaqSplitLabels"] }];
+const items = { name: "items", type: ts("Question[]"), required: true };
+const labels = { name: "labels", type: ts("FaqSplitLabels"), required: true };
+const iconSquare = (icon: string): ViewNode =>
+  use("Box", { props: { Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted" } }, use("LucideIcon", { props: { Name: ref(icon), Size: 20 } }));
+/** a call to action with no address of its own: a link-styled button (an app wires it); no "#/" stand-in */
+const arrowLink = (label: string): ViewNode =>
+  use("Button", { props: { Variant: "link", Size: "sm", Class: "gap-2 px-0 font-medium" } }, text(ref(label)), use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } }));
+
+export const faqDisclosures = spec("pattern.faq-disclosures", "FaqDisclosures", "The questions of FaqSplit as native disclosures, one open at a time.", {
+  typeImports: types,
+  props: [items, { name: "name", type: "string", required: true, docs: "the group name of the disclosures (one open at a time)" }],
+  view: [use("Stack", { props: { Gap: "0", Align: "stretch" }, attrs: { "data-testid": "faq" } },
+    each(ref("items"), "q", ref("q.id"),
+      use("Disclosure", { props: { Variant: "item", Name: ref("name") }, attrs: { "data-testid": "faq-item" } },
+        use("Summary", { props: { Variant: "item" } }, text(ref("q.question"))),
+        use("Text", { props: { Size: "sm", Class: "pb-4 text-muted-foreground" } }, text(ref("q.answer"))))))],
+});
+
+export const faqCards = spec("pattern.faq-cards", "FaqCards", "The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).", {
+  typeImports: types,
+  props: [items, labels, { name: "cards", type: tsOf("grid3", "grid4", "icons"), default: "grid3" }],
+  view: [use("Box", { props: { Class: cond(eq(ref("cards"), "grid4"), "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3") }, attrs: { "data-testid": "faq" } },
+    each(ref("items"), "q", ref("q.id"),
+      articleBlockOf(surface("flex flex-col gap-4 p-6"), "faq-card",
+        when(eq(ref("cards"), "icons"), [iconSquare("q.icon")]),
+        use("Stack", { props: { Gap: "2" } },
+          use("Badge", { props: { Variant: "secondary", Size: "sm", Class: "w-fit" } }, text(ref("q.category"))),
+          use("Title", { props: { As: 3, Size: "base", Weight: "semibold" } }, text(ref("q.question"))),
+          muted(ref("q.answer"))),
+        use("Box", { props: { Class: "mt-auto" } }, arrowLink("labels.more")))))],
+});
+
+export const faqHelp = spec("pattern.faq-help", "FaqHelp", "The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon, name, one line) and a link.", {
+  frame: true,
+  typeImports: [...types, { from: "FeatureGrid", names: ["Feature"] }],
+  props: [labels, { name: "channels", type: ts("Feature[]"), required: true }],
+  view: [use("Block", { props: { Tag: "aside", Class: surface("flex flex-col gap-6 p-6") }, attrs: { "aria-label": ref("labels.asideTitle"), "data-testid": "faq-help" } },
+    use("Stack", { props: { Gap: "2" } }, strong(ref("labels.asideTitle"), "lg"), muted(ref("labels.asideText"))),
+    use("List", { props: { Class: "m-0 flex list-none flex-col gap-4 p-0" } },
+      each(ref("channels"), "c", ref("c.id"), use("ListItem", { props: { Class: "flex items-start gap-4" }, attrs: { "data-testid": "faq-channel" } },
+        iconSquare("c.icon"), use("Stack", { props: { Gap: "0" } }, strong(ref("c.title"), "sm"), muted(ref("c.text"), "xs"))))),
+    arrowLink("labels.asideCta"))],
+});
+
+export const faqFinder = spec("pattern.faq-finder", "FaqFinder", "The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as popular links.", {
+  typeImports: [...types, { from: "FaqList", names: ["FaqTab"] }],
+  props: [items, labels, { name: "topics", type: ts("FaqTab[]"), required: true }],
+  view: [use("Stack", { props: { Gap: "6", Align: "stretch" }, attrs: { "data-testid": "faq-finder" } },
+    organism("SearchField", { label: ref("labels.search"), placeholder: ref("labels.search"), value: coalesce(ref("labels.query"), "") }),
+    use("Group", { props: { Gap: "2", Class: "flex-wrap" } },
+      each(ref("topics"), "t", ref("t.id"), use("Button", { props: { Variant: "outline", Size: "sm" }, attrs: { "data-testid": "faq-topic", "data-value": ref("t.value") } }, text(ref("t.title"))))),
+    use("Stack", { props: { Gap: "2" } },
+      strong(ref("labels.popular"), "sm"),
+      use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" } },
+        eachAt(ref("items"), "q", "i", ref("q.id"), when(lt(ref("i"), 3), [use("ListItem", { attrs: { "data-testid": "faq-popular" } },
+          menuEntry(ref("q.href"), { size: "sm", cls: "text-sm font-medium" }, text(ref("q.question"))))])))))],
+});
+
+export const faqParts: OrganismSpec[] = [faqDisclosures, faqCards, faqHelp, faqFinder];
diff --git a/xgen/screens/src/authoring/components/feature-split-parts.ts b/xgen/screens/src/authoring/components/feature-split-parts.ts
new file mode 100644
index 0000000..de1a83b
--- /dev/null
+++ b/xgen/screens/src/authoring/components/feature-split-parts.ts
@@ -0,0 +1,43 @@
+// Parts of FeatureSplit: plain features in two columns, two figure cards over checked rows, and four metric cards.
+import { eachAt, lt, ref, text, use, when } from "../../build";
+import type { OrganismSpec, Value, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { muted, strong, surface } from "../ux";
+
+const features = { name: "features", type: ts("Feature[]"), required: true };
+const stats = { name: "stats", type: ts("Stat[]"), required: true };
+/** the first `n` entries of a list */
+const first = (list: string, as: string, n: number, node: ViewNode): ViewNode => eachAt(ref(list), as, "i", ref(`${as}.id`), when(lt(ref("i"), n), [node]));
+const tile = (icon: Value): ViewNode => use("Inline", { props: { Class: "flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground" } }, use("LucideIcon", { props: { Name: icon, Size: 16 } }));
+const titled = (title: string, body: string): ViewNode => use("Stack", { props: { Gap: "2", Class: "min-w-0" } },
+  use("Title", { props: { As: 3, Size: "sm", Weight: "semibold" } }, text(ref(title))), muted(ref(body)));
+
+export const featurePairs = spec("pattern.feature-pairs", "FeaturePairs", "Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [features],
+  view: [use("Box", { props: { Class: "grid grid-cols-1 gap-6 sm:grid-cols-2" } },
+    first("features", "f", 4, use("Group", { props: { Gap: "4", Align: "start" }, attrs: { "data-testid": "feature-item" } }, tile(ref("f.icon")), titled("f.title", "f.text"))))],
+});
+
+export const featureStatRows = spec("pattern.feature-stat-rows", "FeatureStatRows", "Two figures of FeatureSplit as cards, then three features as checked rows.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }, { from: "StatsBand", names: ["Stat"] }],
+  props: [features, stats],
+  view: [use("Stack", { props: { Gap: "6", Align: "stretch" } },
+    use("Box", { props: { Class: "grid grid-cols-2 gap-4" } },
+      first("stats", "s", 2, use("Stack", { props: { Gap: "0", Class: surface("p-4") }, attrs: { "data-testid": "feature-stat" } }, strong(ref("s.value"), "2xl", "bold"), muted(ref("s.label"), "xs")))),
+    use("Stack", { props: { Gap: "4", Align: "stretch" } },
+      first("features", "f", 3, use("Group", { props: { Gap: "4", Align: "start" }, attrs: { "data-testid": "feature-item" } },
+        use("Inline", { props: { Class: "flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground" } }, use("LucideIcon", { props: { Name: "check", Size: 16 } })),
+        titled("f.title", "f.text")))))],
+});
+
+export const featureMetricCards = spec("pattern.feature-metric-cards", "FeatureMetricCards", "Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the label.", {
+  typeImports: [{ from: "StatsBand", names: ["Stat"] }],
+  props: [stats],
+  view: [use("Box", { props: { Class: "grid grid-cols-1 gap-4 sm:grid-cols-2" } },
+    first("stats", "s", 4, use("Group", { props: { Gap: "4", Align: "center", Class: surface("p-4") }, attrs: { "data-testid": "feature-stat" } },
+      use("Inline", { props: { Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground" } }, use("LucideIcon", { props: { Name: ref("s.icon"), Size: 20 } })),
+      use("Stack", { props: { Gap: "0", Class: "min-w-0" } }, strong(ref("s.value"), "lg", "bold"), muted(ref("s.label"), "xs"), muted(ref("s.hint"), "xs")))))],
+});
+
+export const featureSplitParts: OrganismSpec[] = [featurePairs, featureStatRows, featureMetricCards];
diff --git a/xgen/screens/src/authoring/components/features.ts b/xgen/screens/src/authoring/components/features.ts
new file mode 100644
index 0000000..d775b99
--- /dev/null
+++ b/xgen/screens/src/authoring/components/features.ts
@@ -0,0 +1,60 @@
+// The features of FeatureGrid as components: cards, tiles or cells (FeatureCards) and rows beside a picture (FeatureRows).
+import { cn, cond, each, eq, ref, text, use, when } from "../../build";
+import { fields, spec, ts } from "../kit";
+import { cols, mediaOf, tsOf } from "../props";
+import { layoutOf } from "../presets";
+
+export const featureRecord = fields(["id", "string"], ["title", "string"], ["text", "string"], ["icon", "string"], ["href", "string", true]);
+export const featureItem = { name: "item", type: tsOf("card", "tile", "cell"), default: "card", docs: "card: icon, title and text stacked; tile: compact icon beside title and text; cell: bordered cell with a round icon" };
+
+export const featureCards = spec("pattern.feature-cards", "FeatureCards", "The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    { name: "features", type: ts("Feature[]"), required: true },
+    { name: "cols", type: cols, default: "1-3", docs: "columns of the grid (responsive)" },
+    featureItem,
+  ],
+  view: (() => {
+    const tile = use("Card", { props: { Variant: "compact" }, attrs: { "data-testid": "feature-card" } },
+      use("Group", { props: { Gap: "4", Align: "start" } },
+        use("LucideIcon", { props: { Name: ref("feature.icon"), Size: 20 } }),
+        use("Stack", { props: { Gap: "2" } },
+          use("Title", { props: { As: 3, Size: "base", Weight: "bold" } }, text(ref("feature.title"))),
+          use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("feature.text"))))));
+    // cell: centered stack
+    // Cell pad [48,24] gap 32; disk 80×80 r40 glyph 24 (bg-primary token)
+    const cell = use("Stack", { props: { Gap: "2", Align: "center", Class: "h-full gap-8 bg-background px-6 py-12 text-center" }, attrs: { "data-testid": "feature-card" } },
+      use("IconBadge", { props: { Variant: "primary", Size: "xl" }, attrs: { "data-testid": "feature-icon" } },
+        use("LucideIcon", { props: { Name: ref("feature.icon"), Size: 24 } })),
+      use("Title", { props: { As: 3, Size: "xl", Weight: "semibold", Class: "leading-6" } }, text(ref("feature.title"))),
+      use("Text", { props: { Size: "sm", Weight: "semibold", Class: "leading-5 text-muted-foreground" } }, text(ref("feature.text"))));
+    const card = use("Card", { props: { Variant: "default" }, attrs: { "data-testid": "feature-card" } },
+      use("CardHeader", { props: { Class: "flex flex-col gap-4" } },
+        use("LucideIcon", { props: { Name: ref("feature.icon"), Size: 24 } }),
+        use("CardTitle", { props: { As: 3 } }, text(ref("feature.title")))),
+      use("CardContent", {}, use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("feature.text")))));
+    const item = when(eq(ref("item"), "tile"), [tile], [when(eq(ref("item"), "cell"), [cell], [card])]);
+    // hairline grid: 1 px gaps on the border color, rounded outside
+    return [use("Grid", { props: { Cols: ref("cols"), Class: cond(eq(ref("item"), "cell"), cn("w-full gap-px overflow-hidden bg-border p-px", layoutOf("features.cells")), "gap-6") }, attrs: { "data-testid": "feature-grid" } },
+      each(ref("features"), "feature", ref("feature.id"), item))];
+  })(),
+});
+
+export const featureRows = spec("pattern.feature-rows", "FeatureRows", "The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names.", {
+  typeImports: [{ from: "FeatureGrid", names: ["Feature"] }],
+  props: [
+    { name: "features", type: ts("Feature[]"), required: true },
+    { name: "mediaSide", type: tsOf("end", "start", "alternate"), default: "end", docs: "side of the picture; alternate swaps it every row" },
+  ],
+  view: [
+    use("Stack", { props: { Gap: "8", Align: "stretch" }, attrs: { "data-testid": "feature-rows" } },
+      each(ref("features"), "feature", ref("feature.id"),
+        use("Grid", { props: { Cols: "1-2", Class: "group items-center gap-8" }, attrs: { "data-testid": "feature-card" } },
+          use("Stack", { props: { Gap: "2", Class: "min-w-0" } },
+            use("LucideIcon", { props: { Name: ref("feature.icon"), Size: 24 } }),
+            use("Title", { props: { As: 3, Size: "xl", Weight: "bold" } }, text(ref("feature.title"))),
+            use("Text", { props: { Size: "base", Class: "text-muted-foreground" } }, text(ref("feature.text")))),
+          use("Box", { props: { Class: cn("w-full min-w-0", cond(eq(ref("mediaSide"), "start"), "md:order-first", cond(eq(ref("mediaSide"), "alternate"), "md:group-even:order-first", ""))) } },
+            ...mediaOf(ref("feature.title")))))),
+  ],
+});
diff --git a/xgen/screens/src/authoring/components/footer-split-parts.ts b/xgen/screens/src/authoring/components/footer-split-parts.ts
new file mode 100644
index 0000000..8aa574f
--- /dev/null
+++ b/xgen/screens/src/authoring/components/footer-split-parts.ts
@@ -0,0 +1,92 @@
+// Parts of FooterSplit: the figures under the brand, the link groups as cards, small link columns, the points, the contacts, the
+// channel cards and the sign-up card.
+import { each, eachAt, lt, ref, text, use, when } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { emailRow } from "../forms";
+import { muted, strong, surface } from "../ux";
+import { menuEntry } from "./nav";
+import { ifAny } from "../props";
+
+const extras = { name: "extras", type: ts("FooterExtras"), required: true, docs: "the figures, points, contacts and channels" };
+const typesOf = (...more: { from: string; names: string[] }[]) => [{ from: "FooterSplit", names: ["FooterExtras", "FooterSplitLabels"] }, ...more];
+const groupsProp = [{ name: "label", type: "string" as const, required: true, docs: "accessible name of the link groups" }, { name: "groups", type: ts("MegaGroup[]"), required: true }];
+/** the first `n` entries of a list */
+const first = (list: string, as: string, n: number, node: ViewNode): ViewNode => eachAt(ref(list), as, "i", ref(`${as}.id`), when(lt(ref("i"), n), [node]));
+const tile = (icon: string): ViewNode => use("Inline", { props: { Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground" } }, use("LucideIcon", { props: { Name: ref(icon), Size: 20 } }));
+/** the items of a menu group: links where they have an address, else names */
+const links = (list: string, cls: string): ViewNode => use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" } },
+  each(ref(list), "item", ref("item.id"), use("ListItem", {}, menuEntry(ref("item.href"), { variant: "muted", size: "sm", cls: `text-sm text-muted-foreground ${cls}`.trim() }, text(ref("item.name"))))));
+
+// emptyMode omit (FooterSplit): each part draws only when its list has records
+export const footerFigures = spec("pattern.footer-figures", "FooterFigures", "Three figures in a row under the brand of FooterSplit.", {
+  typeImports: typesOf(),
+  props: [extras],
+  view: [ifAny("extras.stats", [use("Group", { props: { Gap: "8", Class: "flex-wrap" } },
+    first("extras.stats", "s", 3, use("Stack", { props: { Gap: "0" }, attrs: { "data-testid": "footer-stat" } }, strong(ref("s.value"), "xl", "bold"), muted(ref("s.label"), "xs"))))])],
+});
+
+export const footerGroupCards = spec("pattern.footer-group-cards", "FooterGroupCards", "The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide screens.", {
+  typeImports: [{ from: "MegaMenu", names: ["MegaGroup"] }],
+  props: groupsProp,
+  view: [ifAny("groups", [use("Block", { props: { Tag: "nav" }, attrs: { "aria-label": ref("label") } },
+    use("Box", { props: { Class: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4" } },
+      each(ref("groups"), "g", ref("g.id"), use("Stack", { props: { Gap: "4", Align: "stretch", Class: surface("p-6") }, attrs: { "data-testid": "group" } },
+        use("Group", { props: { Gap: "2", Align: "center" } }, tile("g.icon"), strong(ref("g.title"), "sm")), links("g.links", "")))))])],
+});
+
+export const footerLinkColumns = spec("pattern.footer-link-columns", "FooterLinkColumns", "The first three link groups of FooterSplit as small columns beside each other.", {
+  typeImports: [{ from: "MegaMenu", names: ["MegaGroup"] }],
+  props: groupsProp,
+  view: [ifAny("groups", [use("Block", { props: { Tag: "nav" }, attrs: { "aria-label": ref("label") } },
+    use("Box", { props: { Class: "grid grid-cols-2 gap-8 sm:grid-cols-3" } },
+      first("groups", "g", 3, use("Stack", { props: { Gap: "2" }, attrs: { "data-testid": "group" } }, strong(ref("g.title"), "sm"), links("g.links", "")))))])],
+});
+
+export const footerPoints = spec("pattern.footer-points", "FooterPoints", "Four points with their glyphs in a column, under the tagline of FooterSplit.", {
+  typeImports: typesOf(),
+  props: [extras, { name: "title", type: "string", required: true }],
+  view: [ifAny("extras.points", [use("Stack", { props: { Gap: "4", Align: "start" } }, strong(ref("title"), "sm"),
+    first("extras.points", "p", 4, use("Group", { props: { Gap: "2", Align: "center" }, attrs: { "data-testid": "footer-point" } },
+      use("LucideIcon", { props: { Name: ref("p.icon"), Size: 16 } }), use("Text", { props: { Size: "sm" } }, text(ref("p.title"))))))])],
+});
+
+export const footerContacts = spec("pattern.footer-contacts", "FooterContacts", "The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value.", {
+  typeImports: typesOf(),
+  props: [extras],
+  view: [ifAny("extras.contacts", [use("Stack", { props: { Gap: "4", Align: "stretch" } },
+    each(ref("extras.contacts"), "c", ref("c.id"), use("Group", { props: { Gap: "4", Align: "center" }, attrs: { "data-testid": "footer-contact" } },
+      tile("c.icon"), use("Stack", { props: { Gap: "0" } }, strong(ref("c.title"), "sm"), muted(ref("c.text"))))))])],
+});
+
+export const footerChannels = spec("pattern.footer-channels", "FooterChannels", "The channels of the community as three cards: a glyph over the name and one line.", {
+  typeImports: typesOf(),
+  props: [extras],
+  view: [ifAny("extras.channels", [use("Box", { props: { Class: "grid grid-cols-1 gap-4 sm:grid-cols-3" } },
+    first("extras.channels", "c", 3, use("Stack", { props: { Gap: "2", Align: "start", Class: surface("p-4") }, attrs: { "data-testid": "footer-channel" } },
+      tile("c.icon"), strong(ref("c.title"), "sm"), muted(ref("c.text"), "xs"))))])],
+});
+
+export const footerSignupCard = spec("pattern.footer-signup-card", "FooterSignupCard", "The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note.", {
+  typeImports: typesOf(),
+  props: [{ name: "id", type: "string", required: true, docs: "ties the email label to its field" }, { name: "labels", type: ts("FooterSplitLabels"), required: true }],
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch", Class: surface("p-6") }, attrs: { "data-testid": "signup" } },
+    use("Group", { props: { Gap: "2", Align: "center" } }, use("LucideIcon", { props: { Name: "mail", Size: 16 } }), strong(ref("labels.signup"), "sm")),
+    emailRow(ref("labels.email"), ref("labels.subscribe"), false), muted(ref("labels.note"), "xs"))],
+});
+
+export const footerBrand = spec("pattern.footer-brand", "FooterBrand", "The brand of FooterSplit: a mark and the brand word over the tagline.", {
+  props: [{ name: "brand", type: "string", required: true }, { name: "tagline", type: "string", required: true }],
+  view: [use("Stack", { props: { Gap: "2", Align: "start" }, attrs: { "data-testid": "footer-brand" } },
+    use("Group", { props: { Gap: "2", Align: "center" } },
+      use("Inline", { props: { Class: "flex size-8 items-center justify-center rounded bg-foreground text-background" } }, use("LucideIcon", { props: { Name: "layers", Size: 16 } })),
+      strong(ref("brand"), "xl", "bold")),
+    muted(ref("tagline")))],
+});
+
+export const footerSitemap = spec("pattern.footer-sitemap", "FooterSitemap", "The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no link).", {
+  props: [{ name: "href", type: "string", docs: "the address of the sitemap; none: nothing" }, { name: "label", type: "string", required: true }],
+  view: [when(ref("href"), [use("Link", { props: { Href: ref("href"), Size: "sm" }, attrs: { "data-testid": "footer-sitemap" } }, use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } }), text(ref("label")))])],
+});
+
+export const footerSplitParts: OrganismSpec[] = [footerSitemap, footerBrand, footerFigures, footerGroupCards, footerLinkColumns, footerPoints, footerContacts, footerChannels, footerSignupCard];
diff --git a/xgen/screens/src/authoring/components/footer.ts b/xgen/screens/src/authoring/components/footer.ts
new file mode 100644
index 0000000..3136c60
--- /dev/null
+++ b/xgen/screens/src/authoring/components/footer.ts
@@ -0,0 +1,54 @@
+// The layouts of SitemapFooter: link groups as columns (FooterColumns) and the card (FooterCard).
+import { cn, each, ref, text, use } from "../../build";
+import { spec, ts } from "../kit";
+import { landingWide } from "./frames";
+import { strong } from "../ux";
+import { ifAny } from "../props";
+import { layoutOf } from "../presets";
+import { navBlockOf } from "./landmarks";
+import { groupLinks } from "./nav";
+
+/** the columns layout of SitemapFooter: one column of links per group */
+export const footerColumns = spec("pattern.footer-columns", "FooterColumns", "The link groups of SitemapFooter as columns: a group title over its links, up to five columns.", {
+  typeImports: [{ from: "MegaMenu", names: ["MegaGroup"] }],
+  props: [
+    { name: "label", type: "string", required: true, docs: "accessible name of the link groups" },
+    { name: "groups", type: ts("MegaGroup[]"), required: true },
+  ],
+  view: [ifAny("groups", [
+    use("Block", { props: { Tag: "nav" }, attrs: { "aria-label": ref("label") } },
+      use("Grid", { props: { Cols: "1", Class: "grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5" }, attrs: { "data-testid": "footer-groups" } },
+        each(ref("groups"), "g", ref("g.id"), use("Stack", { props: { Gap: "2" }, attrs: { "data-testid": "group" } },
+          strong(ref("g.title"), "sm"),
+          use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" } }, groupLinks("g", "text-sm text-muted-foreground"))))))]),
+  ],
+});
+
+/** footer card: the brand mark and the link groups in one rounded card (the card layout of SitemapFooter) */
+export const footerCard = spec("pattern.footer-card", "FooterCard", "The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card.", {
+  frame: true,
+  typeImports: [{ from: "MegaMenu", names: ["MegaGroup"] }],
+  props: [
+    { name: "label", type: "string", required: true, docs: "accessible name of the link groups" },
+    { name: "brand", type: "string", required: true },
+    { name: "groups", type: ts("MegaGroup[]"), required: true },
+  ],
+  view: (() => {
+    // Frame footer columns: title + links gap 12, link line ~20px (Item gap 12).
+    const groupCol = use("Stack", { props: { Gap: "4" }, attrs: { "data-testid": "group" } },
+      use("Text", { props: { Size: "xs", Weight: "semibold", Class: "leading-5" } }, text(ref("g.title"))),
+      use("List", { props: { Class: "m-0 flex list-none flex-col gap-4 p-0" } }, groupLinks("g", "text-xs leading-5 text-muted-foreground")));
+    // the brand mark and word, then the link groups in one row (no tagline in the card)
+    // The 1128 container centers itself (236 each side on the 1600 frame), so the footer needs no side padding of its own.
+    return [use("Block", { props: { Tag: "footer", Class: "py-8" }, attrs: { "data-testid": "site-footer", "data-layout": "card" } },
+      use("Container", { props: { Class: cn(landingWide, "px-0") }, attrs: { "data-slot": "container" } },
+        use("Box", { props: { Class: cn("flex w-full flex-row items-start overflow-hidden bg-muted p-10", layoutOf("footer.card")) }, attrs: { "data-testid": "footer-card" } },
+          use("Group", { props: { Gap: "4", Align: "center", Class: cn("h-8 shrink-0", layoutOf("footer.brand")) }, attrs: { "data-testid": "footer-brand" } },
+            use("Inline", { props: { Class: "flex size-8 items-center justify-center rounded bg-foreground text-background" } },
+              use("LucideIcon", { props: { Name: "hexagon", Size: 16 } })),
+            strong(ref("brand"), "base", "bold")),
+          ifAny("groups", [navBlockOf(ref("label"), "min-w-0 flex-1", undefined,
+            use("Group", { props: { Gap: "0", Align: "start", Class: cn("flex w-full flex-nowrap justify-between", layoutOf("footer.groups")) }, attrs: { "data-testid": "footer-groups" } },
+              each(ref("groups"), "g", ref("g.id"), groupCol)))]))))];
+  })(),
+});
diff --git a/xgen/screens/src/authoring/components/frames.ts b/xgen/screens/src/authoring/components/frames.ts
new file mode 100644
index 0000000..f2b8fd6
--- /dev/null
+++ b/xgen/screens/src/authoring/components/frames.ts
@@ -0,0 +1,188 @@
+// The building units every block shares: SectionFrame (the section with its heading, optional media and a box), MediaFrame (an image or a
+// placeholder in a fixed ratio) and ActionGroup (one or two calls to action). They replace the local `section()` helper of the site organisms.
+import { at, cn, coalesce, cond, eq, ne, and, not, op, ref, slot, text, use, when, organism, undef } from "../../build";
+import { placeholders } from "../placeholders";
+import { visualPatterns } from "./visuals";
+import { contractPatterns } from "./contracts";
+import type { OrganismSpec, Value, ValueGroup, ViewNode } from "../../ir";
+import { defaultOf, groupFields, prop, rec, recipeExamples, req, spec, ts, union } from "../kit";
+import { layoutOf } from "../presets";
+
+const P = "pattern.";
+export const wide = "mx-auto w-full max-w-6xl px-4";
+/** the root of a block whose content is a Panel: a section named by the panel title (`{id}-t`), then the container (rule 01) */
+export const panelSection = (...children: ViewNode[]): ViewNode =>
+  use("Block", { props: { Tag: "section" }, attrs: { "aria-labelledby": cond(and(ref("title"), ref("id")), op("tpl", "{0}-t", ref("id")), undef()), "data-testid": "panel-section" } }, ...children);
+/** the landing content column (default preset) */
+export const landingWide = cn("mx-auto w-full px-4", layoutOf("section.landing"));
+
+const sectionFrame = spec(`${P}section-frame`, "SectionFrame", "A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts the body in a card. Axes: layout, media side, tone, density, align.", {
+  frame: true,
+  records: {
+    SectionHeading: groupFields(["level", "1 | 2", "heading level", 2], ["scale", '"default" | "display"', "display: an oversized heading", "default"], ["badge", "string", "a short pill above the heading (e.g. New)"]),
+    HeadLink: groupFields(["label", "string", "text of the link (View all, Browse all); none: no link"], ["href", "string", "href of the link; none: no link"]),
+    SectionMedia: groupFields(["show", "boolean", "the `aside` slot is shown", false], ["side", '"end" | "start"', "side of the media in the split layout", "end"], ["align", '"center" | "start"', "split layout: the body and the media centred on each other, or both from the top", "center"]),
+  },
+  props: [
+    req("id", "string", "ties the heading to the section: the heading id is `<id>-title`"),
+    prop("title", "string", "section heading; empty string: no heading", { default: "" }),
+    prop("lead", "string", "text under the heading"),
+    prop("heading", rec("SectionHeading"), "how the heading is drawn: its level, its scale, a badge above it"),
+    prop("action", rec("HeadLink"), "optional link opposite the heading"),
+    prop("layout", ts('"stack" | "split"'), "stack: media below the body; split: media beside it", { default: "stack" }),
+    prop("media", rec("SectionMedia"), "the `aside` slot: shown or not, and its side"),
+    prop("boxed", "boolean", "the body sits in a card", { default: false }),
+    prop("tone", union("section-frame", "tone"), "background", { default: defaultOf("section-frame", "tone") }),
+    prop("density", union("section-frame", "density"), "vertical padding", { default: defaultOf("section-frame", "density") }),
+    prop("align", union("section-frame", "align"), "text alignment", { default: defaultOf("section-frame", "align") }),
+    prop("measure", union("section-column", "measure"), "default: max-w-6xl; landing: the landing column of the preset; fill: full width of parent; xs to 3xl: a narrow body, the heading and the body one column of that width centred in the default container", { default: defaultOf("section-column", "measure") }),
+  ],
+  className: true,
+  children: true,
+  slots: [{ name: "aside", args: [], docs: "the media (a MediaFrame)" }],
+  recipes: { sectionFrame: "section-frame" },
+  derived: [
+    { name: "titleId", value: op("add", ref("id"), "-title") },
+    { name: "sectionTone", value: cond(ref("boxed"), "default", ref("tone")) },
+    { name: "center", value: eq(ref("align"), "center") },
+  ],
+  examples: [...recipeExamples("section-frame", { tone: "tone", density: "density", align: "align" }, { id: "frame", title: "Title" }),
+    ...["xs", "md", "2xl"].map((m) => ({ id: `measure.${m}`, props: { id: "frame", title: "Title", measure: m } }))],
+  view: (() => {
+    const header = () => organism("SectionHeader", { titleId: ref("titleId"), title: ref("title"), heading: ref("heading"), action: ref("action"), lead: ref("lead"), center: ref("center") });
+    const body = () => [header(), slot("children")];
+    const mediaBox = () => use("Box", { props: { Class: "w-full" }, attrs: { "data-slot": "media" } }, slot("aside"));
+    const stack = (): import("../../ir").ViewNode => organism("SectionColumn", { measure: ref("measure") }, { slots: { children: { args: [], do: [...body(), when(ref("media.show"), [mediaBox()])] } } });
+    const split = (): import("../../ir").ViewNode => use("Grid", { props: { Cols: "1-2", Class: cn("gap-8", cond(eq(ref("media.align"), "start"), "items-start", "items-center")) } },
+      when(and(ref("media.show"), eq(ref("media.side"), "start")), [mediaBox()]),
+      use("Stack", { props: { Gap: "6", Align: "stretch" } }, ...body()),
+      when(and(ref("media.show"), ne(ref("media.side"), "start")), [mediaBox()]));
+    const inner = (): import("../../ir").ViewNode[] => [when(eq(ref("layout"), "split"), [split()], [stack()])];
+    return [use("Block", { props: { Tag: "section", Class: cn(op("recipe", "sectionFrame", "tone", ref("sectionTone"), "density", ref("density"), "align", ref("align")), ref("className")) }, attrs: { "aria-labelledby": cond(ne(ref("title"), ""), ref("titleId"), undef()), "aria-label": cond(eq(ref("title"), ""), ref("id"), undef()), "data-testid": "section", "data-tone": ref("tone"), "data-density": ref("density") } },
+      use("Container", { props: { Class: cond(eq(ref("measure"), "landing"), landingWide, cond(eq(ref("measure"), "fill"), "w-full", wide)) }, attrs: { "data-slot": "container" } },
+        organism("SectionBox", { boxed: ref("boxed") }, { slots: { children: { args: [], do: inner() } } })))];
+  })(),
+});
+
+/** the body of a section in a card, or as it is */
+const sectionBox = spec(`${P}section-box`, "SectionBox", "The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper).", {
+  props: [
+    prop("boxed", "boolean", "the children sit in a card", { default: false }),
+  ],
+  children: true,
+  view: [when(ref("boxed"), [use("Card", { props: { Variant: "muted" } }, slot("children"))], [slot("children")])],
+});
+
+const sectionColumn = spec(`${P}section-column`, "SectionColumn", "The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure (xs to 3xl) holds the column at that width, centred.", {
+  props: [
+    prop("measure", union("section-column", "measure"), "the measure of the SectionFrame; xs to 3xl: a centred column of that width", { default: defaultOf("section-column", "measure") }),
+  ],
+  children: true,
+  recipes: { sectionColumn: "section-column" },
+  examples: recipeExamples("section-column", { measure: "measure" }),
+  view: [use("Stack", { props: { Gap: "6", Align: "stretch", Class: op("recipe", "sectionColumn", "measure", ref("measure")) } }, slot("children"))],
+});
+
+/** a faint picture behind the content of the Block that holds it (that Block is `relative isolate overflow-hidden`), or nothing */
+const backdrop = spec(`${P}backdrop`, "Backdrop", "A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of the block (rule 01).", {
+  props: [
+    prop("kind", ts('"none" | "image"'), "what is drawn behind", { default: "none" }),
+    prop("alt", "string", "accessible name of the picture (image)", { default: "" }),
+  ],
+  view: [when(eq(ref("kind"), "image"),
+    [use("Box", { props: { Class: "pointer-events-none absolute inset-0 -z-10" }, attrs: { "data-testid": "backdrop" } },
+      organism("MediaFrame", { alt: ref("alt"), ratio: "21/9", className: "size-full rounded-none opacity-30" }))])],
+});
+/** a picture of the given kind (none, image) behind a section: the SectionFrame (or Block) `node` stays the root, gets
+ *  `relative isolate overflow-hidden` for an image and holds the Backdrop as its first child */
+export function behind(kind: Value, alt: Value, node: ViewNode): ViewNode {
+  const layer = organism("Backdrop", { kind, alt });
+  const shell = cond(eq(kind, "image"), "relative isolate overflow-hidden", "");
+  if ("organism" in node && node.slots?.["children"]) {
+    const props = { ...(node.props ?? {}), className: node.props?.["className"] !== undefined ? cn(node.props["className"]!, shell) : shell };
+    return { ...node, props, slots: { ...node.slots, children: { ...node.slots["children"], do: [layer, ...node.slots["children"].do] } } };
+  }
+  throw new Error("behind: the node is not a section with children");
+}
+
+/** the head of a section: an optional badge, the heading with an optional link opposite it, and the lead */
+const sectionHeader = spec(`${P}section-header`, "SectionHeader", "The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an optional lead. No wrapper: its parts are children of the section stack.", {
+  props: [
+    req("titleId", "string", "id of the heading (the section is labelled by it)"),
+    prop("title", "string", "heading; empty string: no heading", { default: "" }),
+    prop("heading", ts("SectionHeading"), "how the heading is drawn: its level (2), its scale, a badge above it"),
+    prop("action", ts("HeadLink"), "optional link opposite the heading (View all)"),
+    prop("lead", "string", "text under the heading"),
+    prop("center", "boolean", "centered text", { default: false }),
+  ],
+  typeImports: [{ from: "SectionFrame", names: ["SectionHeading", "HeadLink"] }],
+  derived: [
+    { name: "level", value: coalesce(ref("heading.level"), 2) },
+    { name: "scale", value: coalesce(ref("heading.scale"), "default") },
+    // the link opposite the heading only with a label and an address (no "#/" stand-in)
+    { name: "hasAction", value: and(ref("action.label"), ref("action.href")) },
+  ],
+  view: (() => {
+    const heading = () => use("Title", { props: { As: ref("level"), Size: cond(eq(ref("level"), 1), "5xl", "xl"), Weight: "semibold", Class: cond(eq(ref("scale"), "display"), "text-6xl tracking-tight md:text-8xl", cond(eq(ref("level"), 1), "leading-tight", "leading-7")) }, attrs: { id: ref("titleId") } }, text(ref("title")));
+    const actionLink = () => use("Link", { props: { Href: ref("action.href"), Variant: "default", Class: cn(layoutOf("text.tiny"), "shrink-0 font-medium leading-5") }, attrs: { "data-testid": "section-action" } }, text(ref("action.label")));
+    return [
+      when(ref("heading.badge"), [use("Badge", { props: { Variant: "outline", Size: "lg", Class: cond(ref("center"), "mx-auto w-fit", "w-fit") }, attrs: { "data-testid": "section-badge" } }, text(ref("heading.badge")))]),
+      when(and(ne(ref("title"), ""), ref("hasAction")), [use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "w-full flex-wrap" } }, heading(), actionLink())]),
+      when(and(ne(ref("title"), ""), not(ref("hasAction"))), [heading()]),
+      when(and(eq(ref("title"), ""), ref("hasAction")), [use("Group", { props: { Gap: "4", Align: "center", Justify: "end", Class: "w-full" } }, actionLink())]),
+      when(ref("lead"), [use("Text", { props: { Size: "base", Class: cn("max-w-2xl text-muted-foreground", cond(ref("center"), "mx-auto", "")) } }, text(ref("lead")))]),
+    ];
+  })(),
+});
+
+const mediaFrame = spec(`${P}media-frame`, "MediaFrame", "A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the corners are the plain theme radius.", {
+  props: [
+    req("alt", "string", "accessible name of the picture"),
+    prop("src", "string", "address of the picture (light theme); none: the built-in light placeholder"),
+    prop("darkSrc", "string", "address of the picture for the dark theme; none: `src`, or the built-in dark placeholder when there is no `src`"),
+    prop("ratio", union("media-frame", "ratio"), "width to height", { default: defaultOf("media-frame", "ratio") }),
+  ],
+  className: true,
+  consts: { PLACEHOLDER: placeholders },
+  recipes: { mediaFrame: "media-frame" },
+  derived: [
+    { name: "lightSrc", value: coalesce(ref("src"), at(ref("PLACEHOLDER"), "light")) },
+    { name: "nightSrc", value: coalesce(ref("darkSrc"), ref("src"), at(ref("PLACEHOLDER"), "dark")) },
+  ],
+  examples: recipeExamples("media-frame", { ratio: "ratio" }, { alt: "Picture" }),
+  view: [use("Box", { props: { Class: cn(op("recipe", "mediaFrame", "ratio", ref("ratio")), ref("className")) }, attrs: { "data-slot": "media-frame", "data-placeholder": cond(ref("src"), "false", "true") } },
+    use("Image", { props: { Src: ref("lightSrc"), Alt: ref("alt"), Class: "absolute inset-0 size-full object-cover dark:hidden" }, attrs: { "data-theme-src": "light" } }),
+    use("Image", { props: { Src: ref("nightSrc"), Alt: ref("alt"), Class: "absolute inset-0 hidden size-full object-cover dark:block" }, attrs: { "data-theme-src": "dark" } }))],
+});
+
+const actionGroup = spec(`${P}action-group`, "ActionGroup", "One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not handlers: the page decides what they open.", {
+  props: [
+    req("primary", "string", "text of the primary action"),
+    prop("primaryHref", "string"),
+    prop("secondary", "string", "text of the secondary action; none: one action"),
+    prop("secondaryHref", "string"),
+    prop("align", ts('"start" | "center"'), "where the group sits", { default: "start" }),
+  ],
+  view: [use("Group", { props: { Gap: "4", Align: "center", Justify: cond(eq(ref("align"), "center"), "center", "start"), Class: "flex-wrap" }, attrs: { "data-slot": "action-group" } },
+    use("Button", { props: { Variant: "default", Size: "default", Href: ref("primaryHref") }, attrs: { "data-testid": "action-primary" } }, text(ref("primary"))),
+    when(ref("secondary"), [use("Button", { props: { Variant: "outline", Size: "default", Href: ref("secondaryHref") }, attrs: { "data-testid": "action-secondary" } }, text(ref("secondary")))]))],
+});
+
+
+export const framePatterns: OrganismSpec[] = [sectionBox, sectionColumn, sectionFrame, sectionHeader, backdrop, mediaFrame, actionGroup, ...visualPatterns, ...contractPatterns];
+/** the flat names `frame()` accepts, and the SectionFrame group and field each one goes to */
+const frameGroups: Record<string, [group: string, field: string]> = {
+  level: ["heading", "level"], scale: ["heading", "scale"], badge: ["heading", "badge"],
+  hasMedia: ["media", "show"], mediaSide: ["media", "side"], mediaAlign: ["media", "align"],
+};
+/** a frame node for the organisms: `frame({...props}, children, media?)`. The flat names of `frameGroups` are put in their groups. */
+export const frame = (props: Record<string, Value>, children: ViewNode[], media?: ViewNode[]): ViewNode => {
+  const grouped: Record<string, Value> = {};
+  for (const [name, value] of Object.entries(props)) {
+    const to = frameGroups[name];
+    if (!to) grouped[name] = value;
+    else grouped[to[0]] = { ...(grouped[to[0]] as ValueGroup | undefined), [to[1]]: value };
+  }
+  return organism("SectionFrame", grouped, { slots: { children: { args: [], do: children }, ...(media ? { aside: { args: [], do: media } } : {}) } });
+};
+
diff --git a/xgen/screens/src/authoring/components/hero-components.ts b/xgen/screens/src/authoring/components/hero-components.ts
new file mode 100644
index 0000000..468d610
--- /dev/null
+++ b/xgen/screens/src/authoring/components/hero-components.ts
@@ -0,0 +1,130 @@
+// The components the prompt hero is made of. Each one is small, takes plain props and reads
+// block sizes from the default preset only. HeroPrompt (landing-hero.ts) arranges them; screens pass the texts.
+import { and, cn, gt, len, nth, coalesce, cond, each, eachAt, eq, ref, text, undef, use, when, words } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { layoutOf } from "../presets";
+import { tsOf } from "../props";
+import { navBlockOf } from "./landmarks";
+import { menuEntry } from "./nav";
+
+const P = "pattern.";
+const onBand = "text-background";
+
+/** the head row inside the band: skip link, brand, menu, login and the call to action */
+export const heroHead = spec(`${P}hero-head`, "HeroHead", "The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a call to action.", {
+  frame: true,
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }],
+  props: [
+    { name: "brand", type: "string", docs: "brand word" },
+    { name: "brandHref", type: "string", docs: "the address of the home page; none: the brand is text" },
+    { name: "links", type: ts("NavLink[]"), docs: "menu links" },
+    { name: "current", type: "string", default: "" },
+    { name: "login", type: "string" },
+    { name: "loginHref", type: "string", docs: "the address of the login page; none: a button" },
+    { name: "cta", type: "string", docs: "call to action label" },
+    { name: "href", type: "string" },
+    { name: "skip", type: "string", docs: "skip link text" },
+    { name: "navLabel", type: "string", docs: "accessible name of the menu" },
+  ],
+  view: (() => {
+    const skipClass = "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border";
+    // a menu entry: a link where it has an address, else its name (no "#/" stand-in)
+    const link: ViewNode = when(ref("l.href"), [use("Link", {
+      props: { Href: ref("l.href"), Variant: "default", AriaCurrent: cond(eq(ref("l.id"), ref("current")), "page", undef()), Class: `text-xs font-medium leading-5 ${onBand}` },
+      attrs: { "data-testid": "nav-link" },
+    }, text(ref("l.name")))], [use("Inline", { props: { Class: `text-xs font-medium leading-5 ${onBand}` }, attrs: { "data-testid": "nav-link" } }, text(ref("l.name")))]);
+    return [use("Block", { props: { Tag: "header", Class: cn("flex w-full flex-wrap items-center justify-between pr-4", layoutOf("hero.head")) }, attrs: { "data-testid": "hero-head" } },
+      when(ref("skip"), [use("LinkPlain", { props: { Href: "#main-content", Class: skipClass }, attrs: { "data-testid": "skip-link" } }, text(ref("skip")))]),
+      menuEntry(ref("brandHref"), { cls: cn(layoutOf("text.small"), `font-medium leading-6 ${onBand}`), testid: "brand" }, text(ref("brand"))),
+      when(and(ref("links"), gt(len(ref("links")), 0)), [navBlockOf(ref("navLabel"), undefined, "site-nav",
+        use("Group", { props: { Gap: "8", Align: "center", Class: "flex-wrap" } }, each(ref("links"), "l", ref("l.id"), link)))]),
+      use("Group", { props: { Gap: "2", Align: "center" } },
+        when(ref("login"), [use("Button", { props: { Href: ref("loginHref"), Variant: "ghost", Size: "sm", Class: `${onBand} hover:bg-background/10` }, attrs: { "data-testid": "nav-login" } }, text(ref("login")))]),
+        when(ref("cta"), [use("Button", { props: { Href: ref("href"), Variant: "secondary", Size: "sm" }, attrs: { "data-testid": "header-cta" } }, text(ref("cta")))])))];
+  })(),
+});
+
+/** a composite badge: a small inner mark (NEW) beside a label (Meet Model V4.1) */
+export const heroBadge = spec(`${P}hero-badge`, "HeroBadge", "A composite badge on a dark band: an optional small mark beside a label.", {
+  props: [
+    { name: "label", type: "string", required: true },
+    { name: "mark", type: "string", docs: "small inner pill text (NEW)" },
+  ],
+  view: [use("Group", {
+    props: { Gap: "2", Align: "center", Class: cn("h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30", layoutOf("hero.badge")) },
+    attrs: { "data-testid": "section-badge" },
+  },
+    when(ref("mark"), [use("Badge", { props: { Variant: "secondary", Size: "sm" }, attrs: { "data-testid": "badge-mark" } }, text(ref("mark")))]),
+    use("Text", { props: { Size: "xs", Weight: "bold", Class: `leading-5 ${onBand}` } }, text(ref("label"))))],
+});
+
+/** a display title whose words carry their own weights: the words come from the text, the weights from the preset */
+export const weightedTitle = spec(`${P}weighted-title`, "WeightedTitle", "A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text.", {
+  props: [
+    { name: "id", type: "string", required: true, docs: "id of the heading (the band is labelled by it)" },
+    { name: "title", type: "string", required: true, docs: "the words, separated by spaces" },
+    { name: "weights", type: ts("readonly string[]"), docs: "a font-weight class per word" },
+    { name: "level", type: ts("1 | 2"), default: 1 },
+  ],
+  view: [use("Title", {
+    props: { As: ref("level"), Size: "5xl", Weight: "semibold", Class: cn("text-center tracking-tight text-background", layoutOf("hero.title")) },
+    attrs: { id: ref("id") },
+  }, // words are inline with a space after each, so the heading reads (and copies) as one sentence
+  eachAt(words(ref("title")), "word", "i", ref("i"), use("Inline", { props: { Class: nth(ref("weights"), ref("i")) } }, text(ref("word"))), text(" ")))],
+});
+
+/** the prompt box: attachments, the prompt line, plus, model and send */
+export const promptComposer = spec(`${P}prompt-composer`, "PromptComposer", "A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send button. Static links only; a host adds behavior.", {
+  props: [
+    { name: "label", type: "string", docs: "the prompt line (To Build Site)" },
+    { name: "attachLabel", type: "string", docs: "attachment chip label" },
+    { name: "modelLabel", type: "string", docs: "model pill label" },
+    { name: "send", type: "string", docs: "accessible name of the send button" },
+    { name: "href", type: "string" },
+  ],
+  view: (() => {
+    // every control on the band is a Button: ghost on the band, secondary for the send button
+    const band = `bg-background/10 ${onBand} hover:bg-background/20`;
+    const chip = (icon: string): ViewNode => use("Button", {
+      props: { Variant: "ghost", Size: "sm", Class: cn(`gap-2 overflow-hidden ${band}`, layoutOf("hero.attach")) },
+      attrs: { "data-testid": "composer-attach" },
+    }, use("LucideIcon", { props: { Name: icon, Size: 16 } }), text(ref("attachLabel")));
+    return [use("Box", {
+      props: { Class: cn("mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30", layoutOf("hero.composer")) },
+      attrs: { "data-testid": "email-form" },
+    },
+      when(ref("attachLabel"), [use("Group", { props: { Gap: "2", Align: "center" }, attrs: { "data-testid": "composer-attachments" } }, chip("file-text"), chip("paperclip"))]),
+      use("Text", { props: { Size: "xs", Weight: "semibold", Class: cn("flex w-full items-center leading-5 text-background/80", layoutOf("hero.promptLine")) }, attrs: { "data-testid": "field" } }, text(ref("label"))),
+      use("Group", { props: { Gap: "2", Align: "center", Justify: "between", Class: "h-8 w-full" }, attrs: { "data-testid": "composer-tools" } },
+        use("Group", { props: { Gap: "2", Align: "center" } },
+          use("Button", { props: { Variant: "ghost", Size: "sm", Layout: "icon", Class: band }, attrs: { "data-testid": "composer-plus", "aria-label": coalesce(ref("attachLabel"), "Attach") } },
+            use("LucideIcon", { props: { Name: "plus", Size: 16 } })),
+          when(ref("modelLabel"), [use("Button", { props: { Variant: "ghost", Size: "sm", Class: cn(`gap-2 ${band}`, layoutOf("hero.model")) }, attrs: { "data-testid": "composer-model" } },
+            use("LucideIcon", { props: { Name: "sparkles", Size: 16 } }), text(ref("modelLabel")), use("LucideIcon", { props: { Name: "chevron-down", Size: 16 } }))])),
+        use("Button", { props: { Href: ref("href"), Variant: "secondary", Size: "sm", Layout: "icon" }, attrs: { "data-testid": "submit", "aria-label": coalesce(ref("send"), "Send") } },
+          use("LucideIcon", { props: { Name: "arrow-up", Size: 16 } }))))];
+  })(),
+});
+
+const Topic = fields(["id", "string"], ["name", "string"], ["icon", "string"], ["href", "string", true]);
+/** topic pills under a hero: on a dark band with icons, or plain outlined */
+export const topicChips = spec(`${P}topic-chips`, "TopicChips", "A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band with an icon per topic; default: outlined.", {
+  records: { Topic },
+  props: [
+    { name: "topics", type: ts("Topic[]"), required: true },
+    { name: "tone", type: tsOf("default", "inverse"), default: "default" },
+  ],
+  view: (() => {
+    const inverse = use("Button", { props: { Href: ref("topic.href"), Variant: "ghost", Size: "sm", Class: `gap-2 ${onBand} inset-ring-background/30 hover:bg-background/10` }, attrs: { "data-testid": "hero-topic" } },
+      when(ref("topic.icon"), [use("LucideIcon", { props: { Name: ref("topic.icon"), Size: 16 } })]),
+      text(ref("topic.name")));
+    const plain = use("Button", { props: { Href: ref("topic.href"), Variant: "outline", Size: "sm" }, attrs: { "data-testid": "hero-topic" } }, text(ref("topic.name")));
+    return [use("Group", { props: { Gap: "2", Align: "center", Justify: "center", Class: "flex-wrap" }, attrs: { "data-testid": "hero-topics" } },
+      each(ref("topics"), "topic", ref("topic.id"), when(eq(ref("tone"), "inverse"), [inverse], [plain])))];
+  })(),
+});
+
+export const heroComponents: OrganismSpec[] = [heroHead, heroBadge, weightedTitle, promptComposer, topicChips];
+// the weights of the title words, read by HeroPrompt
+export const titleWeights = layoutOf("hero.titleWeights");
diff --git a/xgen/screens/src/authoring/components/hero-split-parts.ts b/xgen/screens/src/authoring/components/hero-split-parts.ts
new file mode 100644
index 0000000..90c9d28
--- /dev/null
+++ b/xgen/screens/src/authoring/components/hero-split-parts.ts
@@ -0,0 +1,65 @@
+// Parts of HeroSplit: what sits under the lead (figures, faces, small cards or a quote) and what sits beside the text (a picture,
+// a picture with a floating card, a grid of four pictures, or a picture with two plan cards over it).
+import { and, cn, cond, eachAt, eq, gt, len, lt, ref, text, use, when, organism } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted, strong, surface } from "../ux";
+import { figureBlockOf } from "./landmarks";
+
+const types = [{ from: "HeroSplit", names: ["HeroContent"] }];
+const content = { name: "content", type: ts("HeroContent"), required: true, docs: "the figures, small cards, people, proof line and floating card of the hero" };
+/** the first `n` entries of a list */
+const first = (list: string, as: string, n: number, node: ViewNode): ViewNode => eachAt(ref(list), as, "i", ref(`${as}.id`), when(lt(ref("i"), n), [node]));
+/** an icon in a small muted square */
+const iconSquare = (icon: string): ViewNode =>
+  use("Box", { props: { Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted" } }, use("LucideIcon", { props: { Name: ref(icon), Size: 20 } }));
+/** three figures in small cards */
+const stats = (): ViewNode => use("Box", { props: { Class: "grid grid-cols-3 gap-4" }, attrs: { "data-testid": "hero-stats" } },
+  first("content.stats", "s", 3, use("Stack", { props: { Gap: "0", Class: surface("p-4") }, attrs: { "data-testid": "hero-stat" } },
+    use("Text", { props: { Size: "2xl", Weight: "semibold" } }, text(ref("s.value"))), muted(ref("s.label"), "xs"))));
+
+export const heroExtras = spec("pattern.hero-split-extras", "HeroSplitExtras", "What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small feature cards, or a quote with its author over three figures.", {
+  typeImports: types,
+  props: [content, { name: "extra", type: tsOf("stats", "avatars", "minis", "quote", "none"), default: "none" }],
+  view: [
+    when(and(eq(ref("extra"), "stats"), gt(len(ref("content.stats")), 0)), [stats()]),
+    when(and(eq(ref("extra"), "avatars"), gt(len(ref("content.people")), 0)), [use("Group", { props: { Gap: "4", Align: "center", Class: "flex-wrap" }, attrs: { "data-testid": "hero-proof" } },
+      use("Group", { props: { Gap: "2", Align: "center" } },
+        first("content.people", "p", 4, organism("MediaFrame", { alt: ref("p.author"), ratio: "1/1", className: "size-10 shrink-0 rounded-full" }))),
+      muted(ref("content.proof")))]),
+    when(and(eq(ref("extra"), "minis"), gt(len(ref("content.features")), 0)), [use("Box", { props: { Class: "grid grid-cols-1 gap-4 sm:grid-cols-2" }, attrs: { "data-testid": "hero-minis" } },
+      first("content.features", "f", 2, use("Group", { props: { Gap: "4", Align: "start", Class: surface("p-4") }, attrs: { "data-testid": "hero-mini" } },
+        iconSquare("f.icon"), use("Stack", { props: { Gap: "0" } }, strong(ref("f.title"), "sm"), muted(ref("f.text"), "xs")))))]),
+    when(and(eq(ref("extra"), "quote"), gt(len(ref("content.people")), 0)), [use("Stack", { props: { Gap: "6", Align: "stretch" } },
+      first("content.people", "p", 1, figureBlockOf("flex flex-col gap-4", "hero-quote",
+        use("Text", { props: { Tag: "blockquote", Class: "text-lg font-medium" } }, text(ref("p.quote"))),
+        use("Group", { props: { Gap: "4", Align: "center" } },
+          organism("MediaFrame", { alt: ref("p.author"), ratio: "1/1", className: "size-10 shrink-0 rounded-full" }),
+          use("Stack", { props: { Gap: "0" } }, strong(ref("p.author"), "sm"), muted(ref("p.role"), "xs"))))),
+      stats())]),
+  ],
+});
+
+export const heroMedia = spec("pattern.hero-split-media", "HeroSplitMedia", "What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with captions, or a picture with two plan cards floating over it.", {
+  typeImports: types,
+  props: [
+    content,
+    { name: "alt", type: "string", required: true, docs: "accessible name of the pictures" },
+    { name: "media", type: tsOf("picture", "card", "grid", "plans"), default: "picture" },
+  ],
+  view: [
+    when(eq(ref("media"), "picture"), [organism("MediaFrame", { alt: ref("alt"), ratio: "4/3" })]),
+    when(eq(ref("media"), "card"), [organism("OfferMedia", { alt: ref("alt"), card: ref("content.card") })]),
+    when(and(eq(ref("media"), "grid"), gt(len(ref("content.features")), 0)), [use("Box", { props: { Class: "grid grid-cols-2 gap-4" }, attrs: { "data-testid": "hero-grid" } },
+      first("content.features", "f", 4, figureBlockOf("flex flex-col gap-2", "hero-tile",
+        organism("MediaFrame", { alt: ref("f.title"), ratio: "1/1" }), muted(ref("f.title"), "xs"))))]),
+    when(and(eq(ref("media"), "plans"), gt(len(ref("content.plans")), 0)), [use("Box", { props: { Class: "relative" }, attrs: { "data-testid": "hero-media" } },
+      organism("MediaFrame", { alt: ref("alt"), ratio: "4/3" }),
+      first("content.plans", "p", 2, use("Stack", { props: { Gap: "2", Class: cn("absolute w-48 rounded bg-card p-4 shadow-lg", cond(eq(ref("i"), 0), "top-8 left-4", "right-4 bottom-8")) }, attrs: { "data-testid": "hero-plan" } },
+        strong(ref("p.name"), "sm"),
+        use("Group", { props: { Gap: "2", Align: "center" } }, use("LucideIcon", { props: { Name: "check", Size: 16 } }), muted(ref("p.tagline"), "xs")))))]),
+  ],
+});
+
+export const heroSplitParts: OrganismSpec[] = [heroExtras, heroMedia];
diff --git a/xgen/screens/src/authoring/components/landmarks.ts b/xgen/screens/src/authoring/components/landmarks.ts
new file mode 100644
index 0000000..8816162
--- /dev/null
+++ b/xgen/screens/src/authoring/components/landmarks.ts
@@ -0,0 +1,44 @@
+// Landmark parts: a nav, a figure and an article that sit inside another Block (a block root, a frame) or repeat in a loop. Each opens
+// on its own Block in its own file, so no file nests a Block or repeats one (rule 01). Composition across files is allowed.
+import { cn, organism, ref, slot, use } from "../../build";
+import type { OrganismSpec, Value, ViewNode } from "../../ir";
+import { spec } from "../kit";
+
+const P = "pattern.";
+const testid = { name: "testid", type: "string" as const, docs: "data-testid of the root" };
+
+const navBlock = spec(`${P}nav-block`, "NavBlock", "A navigation region in its own file: Block tag nav named by `label`.", {
+  props: [{ name: "label", type: "string", docs: "accessible name of the navigation" }, testid],
+  className: true,
+  children: true,
+  view: [use("Block", { props: { Tag: "nav", Class: cn(ref("className")) }, attrs: { "aria-label": ref("label"), "data-testid": ref("testid") } }, slot("children"))],
+});
+
+const figureBlock = spec(`${P}figure-block`, "FigureBlock", "Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag figure.", {
+  props: [testid],
+  className: true,
+  children: true,
+  view: [use("Block", { props: { Tag: "figure", Class: cn(ref("className")) }, attrs: { "data-testid": ref("testid") } }, slot("children"))],
+});
+
+const articleBlock = spec(`${P}article-block`, "ArticleBlock", "A self-contained item (a review, a card, a project) in its own file: Block tag article.", {
+  props: [testid],
+  className: true,
+  children: true,
+  view: [use("Block", { props: { Tag: "article", Class: cn(ref("className")) }, attrs: { "data-testid": ref("testid") } }, slot("children"))],
+});
+
+const fill = (children: ViewNode[]) => ({ slots: { children: { args: [] as string[], do: children } } });
+const opt = (o: Record<string, Value | undefined>): Record<string, Value> => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== undefined)) as Record<string, Value>;
+
+/** a nav inside a block: NavBlock */
+export const navBlockOf = (label: Value, className: Value | undefined, id: string | undefined, ...children: ViewNode[]): ViewNode =>
+  organism("NavBlock", opt({ label, className, testid: id }), fill(children));
+/** a figure inside a block or a loop: FigureBlock */
+export const figureBlockOf = (className: Value | undefined, id: string | undefined, ...children: ViewNode[]): ViewNode =>
+  organism("FigureBlock", opt({ className, testid: id }), fill(children));
+/** an article inside a block or a loop: ArticleBlock */
+export const articleBlockOf = (className: Value | undefined, id: string | undefined, ...children: ViewNode[]): ViewNode =>
+  organism("ArticleBlock", opt({ className, testid: id }), fill(children));
+
+export const landmarkParts: OrganismSpec[] = [navBlock, figureBlock, articleBlock];
diff --git a/xgen/screens/src/authoring/components/marketing.ts b/xgen/screens/src/authoring/components/marketing.ts
new file mode 100644
index 0000000..2a7b780
--- /dev/null
+++ b/xgen/screens/src/authoring/components/marketing.ts
@@ -0,0 +1,76 @@
+// The items of the marketing blocks: one logo slot (LogoSlot), one key number (StatFigure) and one quote
+// (QuoteCard). LogoRibbon, StatsBand and TestimonialGrid draw one per entry.
+import { cn, cond, eq, ne, ref, text, tpl, use, when, organism } from "../../build";
+import type { ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { layoutOf } from "../presets";
+import { figureBlockOf } from "./landmarks";
+
+const P = "pattern.";
+/** one logo of the ribbon: a fixed slot (size from the preset) with a Lucide glyph; the name is for screen readers */
+export const logoSlot = spec(`${P}logo-slot`, "LogoSlot", "One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only.", {
+  props: [{ name: "name", type: "string", required: true }, { name: "icon", type: "string", required: true }],
+  view: [use("Box", { props: { Class: cn("flex shrink-0 items-center justify-center text-muted-foreground", layoutOf("logos.slot")) }, attrs: { "data-testid": "item", "data-slot": "logo-slot" } },
+    use("LucideIcon", { props: { Name: ref("icon"), Size: layoutOf("logos.glyph") } }),
+    use("Text", { props: { Size: "sm", Weight: "semibold", Class: "sr-only" } }, text(ref("name"))))],
+});
+/** one figure of StatsBand: a StatTile card, or the value over its label (with an icon) */
+export const statFigure = spec(`${P}stat-figure`, "StatFigure", "One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon.", {
+  typeImports: [{ from: "StatsBand", names: ["Stat"] }],
+  props: [
+    { name: "stat", type: ts("Stat"), required: true },
+    { name: "item", type: tsOf("plain", "card", "icon"), default: "plain" },
+    { name: "align", type: tsOf("start", "center"), default: "center" },
+  ],
+  view: [when(eq(ref("item"), "card"),
+    [organism("StatTile", { label: ref("stat.label"), value: ref("stat.value"), icon: ref("stat.icon"), hint: ref("stat.hint") })],
+    // Column gap 24; figure row height 72; caption 12
+    [use("Stack", {
+      props: { Gap: "6", Align: cond(eq(ref("align"), "center"), "center", "start"), Class: cn(cond(eq(ref("align"), "center"), "text-center", ""), layoutOf("stats.column")) },
+      attrs: { "data-testid": "item" },
+    },
+      when(eq(ref("item"), "icon"), [use("LucideIcon", { props: { Name: ref("stat.icon"), Size: 24 } })]),
+      // the figure and its label read as one: 8px apart, the label at body size under the figure
+      use("Stack", { props: { Gap: "2", Align: cond(eq(ref("align"), "center"), "center", "start") } },
+        use("Text", { props: { Size: "5xl", Weight: "medium", Class: cn("flex items-center", layoutOf("stats.figure")) } }, text(ref("stat.value"))),
+        use("Text", { props: { Size: "sm", Weight: "semibold", Class: "leading-5 text-muted-foreground" } }, text(ref("stat.label")))))])],
+});
+
+export const quoteCardView = (): ViewNode => {
+  const social = eq(ref("item.kind"), "social");
+  const cardLike = cond(eq(ref("item.kind"), "plain"), "", "rounded p-6 inset-ring inset-ring-border bg-card");
+  const sizeFor = cond(eq(ref("layout"), "masonry"), "mb-4 break-inside-avoid", cond(eq(ref("layout"), "strip"), "w-80 shrink-0 snap-start", "h-full"));
+  const avatar = when(ne(ref("item.avatar"), "none"), [organism("MediaFrame", { alt: ref("q.author"), ratio: "1/1", className: "size-12 shrink-0 rounded-full" })]);
+  const rating = when(ne(ref("item.rating"), "hide"), [organism("Rating", { value: ref("q.rating"), label: tpl(ref("labels.rating"), ref("q.rating")), size: 16 })]);
+  return figureBlockOf(cn("m-0 flex flex-col gap-4", cardLike, sizeFor), "item",
+    when(social,
+      [use("Group", { props: { Gap: "4", Align: "center" } }, avatar,
+        use("Stack", { props: { Gap: "0" } },
+          use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("q.author"))),
+          use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(tpl(ref("labels.handleLine"), ref("q.handle"), ref("q.time"))))),
+        use("LucideIcon", { props: { Name: "message-circle", Size: 16, Class: "ml-auto text-muted-foreground" } })),
+       use("Text", { props: { Size: "base" } }, text(ref("q.quote")))],
+      [rating,
+       when(eq(ref("item.mark"), "icon"), [use("Inline", { props: { Class: "text-muted-foreground" }, attrs: { "data-testid": "mark" } }, use("LucideIcon", { props: { Name: ref("q.mark"), Size: 24 } }))]),
+       use("Text", { props: { Size: cond(eq(ref("layout"), "single"), "xl", "base") } }, text(ref("q.quote"))),
+       use("Group", { props: { Gap: "4", Align: "center" } }, avatar,
+         use("Stack", { props: { Gap: "0" } },
+           use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("q.author"))),
+           use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(tpl(ref("labels.byLine"), ref("q.role"), ref("q.company"))))))]));
+};
+
+export const testimonialLayout = tsOf("grid", "single", "stack", "masonry", "strip");
+
+/** one quote of TestimonialGrid: a card, a plain figure or a social post */
+export const quoteCard = spec(`${P}quote-card`, "QuoteCard", "One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the stars and a company glyph as `item` says.", {
+  typeImports: [{ from: "TestimonialGrid", names: ["Quote", "QuoteLabels", "QuoteItem"] }],
+  props: [
+    { name: "q", type: ts("Quote"), required: true },
+    { name: "labels", type: ts("QuoteLabels"), required: true, docs: "the templates of the lines around the quote" },
+    { name: "item", type: ts("QuoteItem"), docs: "how the quote is drawn" },
+    { name: "layout", type: testimonialLayout, default: "grid", docs: "the layout of the grid around it: the size of the card" },
+  ],
+  view: [quoteCardView()],
+});
+export const quoteCardOf = (): ViewNode => organism("QuoteCard", { q: ref("q"), labels: ref("labels"), item: ref("item"), layout: ref("layout") });
diff --git a/xgen/screens/src/authoring/components/media-list-parts.ts b/xgen/screens/src/authoring/components/media-list-parts.ts
new file mode 100644
index 0000000..515d407
--- /dev/null
+++ b/xgen/screens/src/authoring/components/media-list-parts.ts
@@ -0,0 +1,79 @@
+// Parts of MediaList: figures, a featured review, numbered steps, latest posts, topic rows and contact buttons with support figures.
+import { add, cond, eachAt, eq, lt, ref, str, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec, Value, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted, strong, surface } from "../ux";
+import { menuEntry } from "./nav";
+
+const types = [{ from: "MediaList", names: ["MediaExtras", "MediaListLabels"] }];
+const extras = { name: "extras", type: ts("MediaExtras"), required: true };
+const labels = { name: "labels", type: ts("MediaListLabels"), required: true };
+/** the first `n` entries of a list */
+const first = (list: string, as: string, n: Value, node: ViewNode): ViewNode => eachAt(ref(list), as, "i", ref(`${as}.id`), when(lt(ref("i"), n), [node]));
+const glyph = (icon: Value, cls: string): ViewNode => use("Inline", { props: { Class: cls } }, use("LucideIcon", { props: { Name: icon, Size: 16 } }));
+const tileCls = "flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground";
+const listHead = strong(ref("labels.list"), "sm");
+
+export const mediaFigures = spec("pattern.media-figures", "MediaFigures", "The figures of MediaList: four in two columns, centered, or three in a row.", {
+  typeImports: types,
+  props: [extras, { name: "mode", type: tsOf("grid", "row"), default: "grid" }],
+  view: [use("Box", { props: { Class: cond(eq(ref("mode"), "grid"), "grid grid-cols-2 gap-6 text-center", "grid grid-cols-3 gap-6") } },
+    first("extras.stats", "s", cond(eq(ref("mode"), "grid"), 4, 3), use("Stack", { props: { Gap: "0", Align: cond(eq(ref("mode"), "grid"), "center", "start") }, attrs: { "data-testid": "media-stat" } },
+      strong(ref("s.value"), "3xl", "bold"), muted(ref("s.label")))))],
+});
+
+export const mediaReview = spec("pattern.media-review", "MediaReview", "The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author.", {
+  typeImports: types,
+  props: [extras, labels],
+  view: [first("extras.reviews", "r", 1, use("Stack", { props: { Gap: "4", Align: "stretch", Class: "rounded bg-muted p-6" }, attrs: { "data-testid": "media-review" } },
+    use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "flex-wrap" } },
+      use("Text", { props: { Size: "sm", Weight: "medium" } }, text(ref("labels.featured"))),
+      organism("Rating", { value: ref("r.rating"), label: tpl(ref("labels.rating"), ref("r.rating")), size: 16 })),
+    use("Text", { props: { Size: "base" } }, text(tpl("“{0}”", ref("r.text")))),
+    muted(tpl("{0} · {1}", ref("r.author"), ref("r.date")))))],
+});
+
+export const mediaSteps = spec("pattern.media-steps", "MediaSteps", "The steps of MediaList as numbered rows: the number, a glyph, the title and the text.", {
+  typeImports: types,
+  props: [extras, labels],
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch" } }, listHead,
+    eachAt(ref("extras.steps"), "s", "i", ref("s.id"), use("Group", { props: { Gap: "4", Align: "start" }, attrs: { "data-testid": "media-step" } },
+      use("Text", { props: { Size: "sm", Weight: "semibold", Class: "w-6 shrink-0 text-primary" } }, text(tpl("0{0}", str(add(ref("i"), 1))))),
+      glyph(ref("s.icon"), "flex size-6 shrink-0 items-center justify-center text-primary"),
+      use("Stack", { props: { Gap: "0" } }, strong(ref("s.title"), "sm"), muted(ref("s.text"))))))],
+});
+
+export const mediaPosts = spec("pattern.media-posts", "MediaPosts", "The latest posts of MediaList as rows: a dot, the title, the date and reading time.", {
+  typeImports: types,
+  props: [extras, labels],
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch" } }, listHead,
+    first("extras.posts", "p", 3, use("Group", { props: { Gap: "4", Align: "start" }, attrs: { "data-testid": "media-post" } },
+      use("Inline", { props: { Class: "mt-2 size-2 shrink-0 rounded-full bg-primary" } }),
+      use("Stack", { props: { Gap: "0" } }, menuEntry(ref("p.href"), { size: "sm", cls: "text-sm font-medium" }, text(ref("p.title"))),
+        muted(tpl("{0} · {1}", ref("p.date"), tpl(ref("labels.minutes"), ref("p.minutes"))), "xs")))))],
+});
+
+export const mediaTopics = spec("pattern.media-topics", "MediaTopics", "The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow.", {
+  typeImports: types,
+  props: [extras, labels],
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch" } }, listHead,
+    first("extras.topics", "c", 5, menuEntry(ref("c.href"), { variant: "block", cls: surface("flex w-full items-center gap-4 p-4"), testid: "media-topic", block: true },
+      glyph(ref("c.icon"), tileCls),
+      use("Stack", { props: { Gap: "0", Class: "min-w-0 flex-1" } }, strong(ref("c.name"), "sm"), muted(tpl(ref("labels.count"), ref("c.count")), "xs")),
+      use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } }))))],
+});
+
+export const mediaContacts = spec("pattern.media-contacts", "MediaContacts", "The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card.", {
+  typeImports: types,
+  props: [extras, labels],
+  view: [use("Stack", { props: { Gap: "6", Align: "stretch" } },
+    use("Stack", { props: { Gap: "2", Align: "stretch" } }, listHead,
+      eachAt(ref("extras.channels"), "c", "i", ref("c.id"), use("Button", { props: { Variant: "outline", Size: "default", Href: ref("c.href"), Class: "w-full gap-2" }, attrs: { "data-testid": "media-channel" } },
+        use("LucideIcon", { props: { Name: ref("c.icon"), Size: 16 } }), text(ref("c.title"))))),
+    use("Stack", { props: { Gap: "2", Align: "stretch", Class: surface("p-4") } }, strong(ref("labels.figures"), "sm"),
+      first("extras.stats", "s", 3, use("Group", { props: { Gap: "4", Align: "center", Justify: "between" }, attrs: { "data-testid": "media-stat" } },
+        muted(ref("s.label")), use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("s.value")))))))],
+});
+
+export const mediaListParts: OrganismSpec[] = [mediaFigures, mediaReview, mediaSteps, mediaPosts, mediaTopics, mediaContacts];
diff --git a/xgen/screens/src/authoring/components/nav.ts b/xgen/screens/src/authoring/components/nav.ts
new file mode 100644
index 0000000..73826f0
--- /dev/null
+++ b/xgen/screens/src/authoring/components/nav.ts
@@ -0,0 +1,119 @@
+// The pieces of a top bar: the links (NavLinks), the buttons at its end (NavActions), the search field
+// (SearchPalette) and the faded picture a transparent bar sits on (OverMedia). NavBar, MegaMenu and SidebarNav use them.
+import { and, call, coalesce, cond, each, eachAt, eq, lt, mul, or, ref, slot, text, undef, use, when, organism, len } from "../../build";
+import type { Value, ViewNode } from "../../ir";
+import { fields, spec, ts } from "../kit";
+import { ifAny, tsOf } from "../props";
+import { kids } from "../forms";
+import { navBlockOf } from "./landmarks";
+
+const P = "pattern.";
+export const NavLink = fields(["id", "string"], ["name", "string"], ["icon", "string"], ["href", "string", true]);
+/** a group of a menu (kind menu_item) and the items under it (parent_id): MegaMenu, SitemapFooter, FooterColumns, FooterSplit */
+export const Group = fields(["id", "string"], ["title", "string"], ["icon", "string"], ["links", "NavLink[]"], ["href", "string", true]);
+
+export interface EntryLook { cls: Value; current?: Value; variant?: string; size?: string; testid?: string; block?: boolean }
+/**
+ * a menu entry (a NavLink of a Codex menu_item, or any record with an optional href): MenuEntry draws a link where it has an
+ * address (the app routes it), else its name as text in the same box. No "#/" stand-in: no address, no link.
+ */
+export const menuEntry = (href: Value, o: EntryLook, ...children: ViewNode[]): ViewNode => organism("MenuEntry", {
+  href, className: o.cls,
+  ...(o.current !== undefined ? { current: o.current } : {}), ...(o.variant ? { variant: o.variant } : {}), ...(o.size ? { size: o.size } : {}), ...(o.testid ? { testid: o.testid } : {}), ...(o.block ? { block: true } : {}),
+}, kids(...children));
+/** the item `l` is the current one */
+export const currentOf = (l: string, current: Value): Value => eq(ref(`${l}.id`), current);
+export const menuEntrySpec = spec(`${P}menu-entry`, "MenuEntry", "One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.", {
+  props: [
+    { name: "href", type: "string", docs: "the address; none: text, not a link" },
+    { name: "current", type: "boolean", default: false, docs: "the entry of the current page" },
+    { name: "variant", type: tsOf("default", "muted", "block"), default: "default", docs: "the look of the link" },
+    { name: "size", type: tsOf("default", "sm"), default: "default" },
+    { name: "testid", type: "string", docs: "the test id of the entry" },
+    { name: "block", type: "boolean", default: false, docs: "the content holds block elements: without an address it sits in a div, not a span" },
+  ],
+  className: true,
+  children: true,
+  view: [when(ref("href"),
+    [use("Link", { props: { Href: ref("href"), Variant: ref("variant"), Size: ref("size"), AriaCurrent: cond(ref("current"), "page", undef()), Class: ref("className") }, attrs: { "data-testid": ref("testid") } }, slot("children"))],
+    [when(ref("block"),
+      [use("Box", { props: { Class: ref("className") }, attrs: { "aria-current": cond(ref("current"), "page", undef()), "data-testid": ref("testid") } }, slot("children"))],
+      [use("Inline", { props: { Class: ref("className") }, attrs: { "aria-current": cond(ref("current"), "page", undef()), "data-testid": ref("testid") } }, slot("children"))])])],
+});
+/** a menu entry of a top bar */
+export const link = (l: string, current: Value): ViewNode => menuEntry(ref(`${l}.href`), { cls: "text-sm", current: currentOf(l, current), testid: "nav-link" }, text(ref(`${l}.name`)));
+/** the brand of a bar: a link home only where the app gives the address (`brandHref`), else the name */
+export const brandLink = (): ViewNode => menuEntry(ref("brandHref"), { cls: "text-lg font-medium", testid: "brand" }, text(ref("brand")));
+/** the items under a menu group (g.links): links where they have an address, else names */
+export const groupLinks = (g: string, cls: string, look: Omit<EntryLook, "cls"> = {}): ViewNode =>
+  each(ref(`${g}.links`), "item", ref("item.id"), use("ListItem", {}, menuEntry(ref("item.href"), { cls, ...look }, text(ref("item.name")))));
+/** the menu links of a bar: all of them, or the left or right half (the split layout puts the brand between) */
+export const navLinks = spec(`${P}nav-links`, "NavLinks", "The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half of the list.", {
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }],
+  props: [
+    { name: "links", type: ts("NavLink[]"), required: true },
+    { name: "current", type: "string", default: "", docs: "id of the current link" },
+    { name: "side", type: tsOf("all", "left", "right"), default: "all" },
+  ],
+  derived: [{ name: "count", value: len(ref("links")) }],
+  view: (() => {
+    // a link shows on every side "all", else when its half of the list is the side asked for
+    const shown = or(eq(ref("side"), "all"), eq(lt(mul(ref("i"), 2), ref("count")), eq(ref("side"), "left")));
+    return [ifAny("links", [use("Group", { props: { Gap: "4", Align: "center", Class: "flex-wrap" } },
+      eachAt(ref("links"), "l", "i", ref("l.id"), when(shown, [link("l", ref("current"))])))])];
+  })(),
+});
+
+/** the links of NavBar in their nav landmark; no links: no landmark (emptyMode omit) */
+export const navBarMenu = spec(`${P}nav-bar-menu`, "NavBarMenu", "The links of NavBar in a nav landmark; left out when there are no links.", {
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }],
+  props: [
+    { name: "label", type: "string", required: true, docs: "accessible name of the navigation" },
+    { name: "links", type: ts("NavLink[]"), required: true },
+    { name: "current", type: "string", default: "", docs: "id of the current link" },
+  ],
+  // below md the links take a row of their own under the brand and the buttons, one line that scrolls sideways
+  view: [ifAny("links", [navBlockOf(ref("label"), "order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0", "site-nav", organism("NavLinks", { links: ref("links"), current: ref("current") }))])],
+});
+
+/** the buttons at the end of a bar: login, call to action, theme */
+export const navActions = spec(`${P}nav-actions`, "NavActions", "The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the press). No wrapper: they sit in the row of the bar.", {
+  props: [
+    { name: "login", type: "string", docs: "text of the login link; none: no login" },
+    { name: "loginHref", type: "string", docs: "the address of the login page; none: the login is a button with no address" },
+    { name: "cta", type: "string" },
+    { name: "ctaHref", type: "string" },
+    { name: "actions", type: tsOf("none", "cta"), default: "cta" },
+    { name: "tone", type: tsOf("default", "inverse"), default: "default" },
+    { name: "themeLabel", type: "string", docs: "text of the theme button; none: no button" },
+  ],
+  events: [{ name: "theme", args: [], docs: "the theme button was pressed" }],
+  view: [
+    when(ref("login"), [use("Button", { props: { Variant: "ghost", Size: "sm", Href: ref("loginHref"), Class: cond(eq(ref("tone"), "inverse"), "text-background hover:bg-background/10", "") }, attrs: { "data-testid": "nav-login" } }, text(ref("login")))]),
+    when(and(eq(ref("actions"), "cta"), ref("cta")), [use("Button", { props: { Variant: cond(eq(ref("tone"), "inverse"), "secondary", "default"), Size: "sm", Href: ref("ctaHref") }, attrs: { "data-testid": "header-cta" } }, text(ref("cta")))]),
+    when(ref("themeLabel"), [use("Button", { props: { Variant: "outline", Size: "sm" }, on: { click: call("emit.theme") }, attrs: { "data-testid": "theme-toggle" } }, text(ref("themeLabel")))]),
+  ],
+});
+
+/** a search field with its keyboard shortcut, for the search layout of a bar */
+export const searchPalette = spec(`${P}search-palette`, "SearchPalette", "A search field with a search glyph and the keys that open it.", {
+  props: [
+    { name: "label", type: "string", required: true, docs: "name and placeholder of the field" },
+    { name: "shortcut", type: "string", required: true },
+  ],
+  view: [use("Box", { props: { Class: "relative w-full max-w-sm" }, attrs: { "data-testid": "palette" } },
+    use("LucideIcon", { props: { Name: "search", Size: 16, Class: "pointer-events-none absolute top-2 left-3 text-muted-foreground" } }),
+    use("Input", { props: { Type: "search", Size: "sm", Placeholder: ref("label"), AriaLabel: ref("label"), Class: "pr-12 pl-10" } }),
+    use("Inline", { props: { Class: "pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring inset-ring-border" } }, text(ref("shortcut"))))],
+});
+
+/** a picture behind its children (a transparent bar over a hero picture); off: the children alone */
+export const overMedia = spec(`${P}over-media`, "OverMedia", "A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing. It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the header stays the root of the block (rule 01).", {
+  props: [
+    { name: "on", type: "boolean", default: false },
+    { name: "alt", type: "string", required: true, docs: "accessible name of the picture" },
+  ],
+  view: [when(ref("on"),
+    [use("Box", { props: { Class: "pointer-events-none absolute inset-0 -z-10" }, attrs: { "data-testid": "over" } },
+      organism("MediaFrame", { alt: ref("alt"), ratio: "21/9", className: "size-full rounded-none opacity-40" }))])],
+});
diff --git a/xgen/screens/src/authoring/components/number-field.ts b/xgen/screens/src/authoring/components/number-field.ts
new file mode 100644
index 0000000..ff51d7c
--- /dev/null
+++ b/xgen/screens/src/authoring/components/number-field.ts
@@ -0,0 +1,24 @@
+// A number with minus and plus buttons around it (NumberField): static markup only; the page wires the buttons.
+import { ref, use } from "../../build";
+import { spec } from "../kit";
+
+const step = (icon: string, label: string, testid: string) =>
+  use("Button", { props: { Variant: "ghost", Size: "sm", Layout: "icon", Type: "button", AriaLabel: ref(label) }, attrs: { "data-testid": testid } }, use("LucideIcon", { props: { Name: icon, Size: 16 } }));
+
+/** a narrow number field between a minus and a plus button, one control: 4px inside the ring, 32px parts in a 40px box */
+export const numberField = spec("pattern.number-field", "NumberField", "A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its ring). Static markup: the buttons carry no logic; the page wires them.", {
+  props: [
+    { name: "value", type: "string", default: "" },
+    { name: "name", type: "string", default: "" },
+    { name: "min", type: "string", default: "" },
+    { name: "label", type: "string", required: true, docs: "accessible name of the number" },
+    { name: "decrease", type: "string", required: true, docs: "accessible name of the minus button" },
+    { name: "increase", type: "string", required: true, docs: "accessible name of the plus button" },
+  ],
+  view: [
+    use("Box", { props: { Class: "inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input" }, attrs: { "data-slot": "number-field" } },
+      step("minus", "decrease", "decrease"),
+      use("Input", { props: { Type: "number", Name: ref("name"), Value: ref("value"), Min: ref("min"), AriaLabel: ref("label"), Size: "sm", Class: "number-bare w-8 bg-transparent px-0 text-center inset-ring-0" } }),
+      step("plus", "increase", "increase")),
+  ],
+});
diff --git a/xgen/screens/src/authoring/components/orders.ts b/xgen/screens/src/authoring/components/orders.ts
new file mode 100644
index 0000000..58fb1d9
--- /dev/null
+++ b/xgen/screens/src/authoring/components/orders.ts
@@ -0,0 +1,37 @@
+// The table layout of OrderTable (OrderRows): number, date, items, total and a status pill per order.
+import { at, cn, cond, each, eq, money, ref, text, tpl, use, organism } from "../../build";
+import { spec, ts } from "../kit";
+import { denseLite } from "../props";
+import { kids } from "../forms";
+
+const P = "pattern.";
+/** the pill color of an order status */
+export const statusTone = cond(eq(ref("o.status"), "paid"), "green", cond(eq(ref("o.status"), "shipped"), "blue", cond(eq(ref("o.status"), "pending"), "amber", "gray")));
+
+export const orderRows = spec(`${P}order-rows`, "OrderRows", "The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill.", {
+  typeImports: [{ from: "OrderTable", names: ["Order", "OrderLabels"] }],
+  props: [
+    { name: "orders", type: ts("Order[]"), required: true },
+    { name: "statuses", type: ts("Record<string, string>"), required: true, docs: "word by order status" },
+    { name: "labels", type: ts("OrderLabels"), required: true },
+    { name: "density", type: denseLite, default: "default" },
+  ],
+  view: [
+    use("Box", { props: { Class: "w-full overflow-x-auto" } },
+      use("Table", { props: { Class: "w-full text-left text-sm" }, attrs: { "data-testid": "order-table" } },
+        use("TableCaption", { props: { Class: "sr-only" } }, text(ref("labels.caption"))),
+        use("TableHead", {}, use("TableRow", {},
+          use("TableHeadCell", { props: { Scope: "col", Class: "py-2" } }, text(ref("labels.number"))),
+          use("TableHeadCell", { props: { Scope: "col", Class: "py-2" } }, text(ref("labels.date"))),
+          use("TableHeadCell", { props: { Scope: "col", Class: "py-2" } }, text(ref("labels.items"))),
+          use("TableHeadCell", { props: { Scope: "col", Class: "py-2" } }, text(ref("labels.total"))),
+          use("TableHeadCell", { props: { Scope: "col", Class: "py-2" } }, text(ref("labels.status"))))),
+        use("TableBody", {}, each(ref("orders"), "o", ref("o.id"),
+          use("TableRow", { props: { Class: "border-t border-border" }, attrs: { "data-testid": "item" } },
+            use("TableCell", { props: { Class: cn("font-semibold", cond(eq(ref("density"), "compact"), "py-2", "py-4")) } }, text(ref("o.number"))),
+            use("TableCell", { props: { Class: "" } }, text(ref("o.date"))),
+            use("TableCell", { props: { Class: "" } }, text(tpl(ref("labels.itemsCount"), ref("o.items")))),
+            use("TableCell", { props: { Class: "" } }, text(money(ref("o.total"), ref("o.currency")))),
+            use("TableCell", {}, organism("Pill", { tone: statusTone }, kids(text(at(ref("statuses"), ref("o.status"))))))))))),
+  ],
+});
diff --git a/xgen/screens/src/authoring/components/page-trail-parts.ts b/xgen/screens/src/authoring/components/page-trail-parts.ts
new file mode 100644
index 0000000..88d4a98
--- /dev/null
+++ b/xgen/screens/src/authoring/components/page-trail-parts.ts
@@ -0,0 +1,35 @@
+// Parts of PageTrail: the breadcrumbs, and the aside at the end of the head (one figure, a note card, or four key facts).
+import { eachAt, eq, len, lt, ref, sub, text, use, when } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { spec, ts } from "../kit";
+import { muted, strong, surface } from "../ux";
+import { tsOf } from "../props";
+
+export const pageCrumbs = spec("pattern.page-crumbs", "PageCrumbs", "The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the last entry is the current page and is not a link.", {
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }],
+  props: [{ name: "label", type: "string", required: true, docs: "accessible name of the breadcrumbs" }, { name: "crumbs", type: ts("NavLink[]"), required: true }],
+  derived: [{ name: "last", value: sub(len(ref("crumbs")), 1) }],
+  view: [use("Block", { props: { Tag: "nav" }, attrs: { "aria-label": ref("label"), "data-testid": "crumbs" } },
+    use("List", { props: { Class: "m-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground" } },
+      eachAt(ref("crumbs"), "c", "i", ref("c.id"), use("ListItem", { props: { Class: "flex items-center gap-2" } },
+        // a parent page: a link where the app routes pages (href from its slug), else its name; the chevron either way
+        when(lt(ref("i"), ref("last")), [when(ref("c.href"), [use("Link", { props: { Href: ref("c.href"), Variant: "muted", Size: "sm" }, attrs: { "data-testid": "crumb" } }, text(ref("c.name")))],
+          [use("Inline", { attrs: { "data-testid": "crumb" } }, text(ref("c.name")))]),
+          use("LucideIcon", { props: { Name: "chevron-right", Size: 16 } })],
+        [use("Inline", { props: { Class: "font-medium text-foreground" }, attrs: { "aria-current": "page" } }, text(ref("c.name")))])))))],
+});
+
+export const pageAside = spec("pattern.page-aside", "PageAside", "The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key facts as cards in two columns.", {
+  typeImports: [{ from: "PageTrail", names: ["PageExtras"] }],
+  props: [{ name: "extras", type: ts("PageExtras"), required: true }, { name: "mode", type: tsOf("none", "figure", "note", "facts"), default: "figure" }],
+  view: [when(eq(ref("mode"), "figure"), [use("Stack", { props: { Gap: "0", Align: "end", Class: "text-end" }, attrs: { "data-testid": "page-figure" } },
+    strong(ref("extras.value"), "4xl", "bold"), muted(ref("extras.caption"), "xs"))]),
+  when(eq(ref("mode"), "note"), [use("Group", { props: { Gap: "4", Align: "start", Class: surface("max-w-xs p-4") }, attrs: { "data-testid": "page-note" } },
+    use("LucideIcon", { props: { Name: ref("extras.icon"), Size: 20 } }),
+    use("Stack", { props: { Gap: "0" } }, strong(ref("extras.value"), "lg", "bold"), use("Text", { props: { Size: "sm", Weight: "medium" } }, text(ref("extras.caption"))), muted(ref("extras.note"), "xs")))]),
+  when(eq(ref("mode"), "facts"), [use("Box", { props: { Class: "grid grid-cols-2 gap-4" } },
+    eachAt(ref("extras.facts"), "s", "i", ref("s.id"), when(lt(ref("i"), 4), [use("Stack", { props: { Gap: "0", Class: surface("p-4") }, attrs: { "data-testid": "page-fact" } },
+      strong(ref("s.value"), "lg", "bold"), use("Text", { props: { Size: "xs", Weight: "medium" } }, text(ref("s.label"))), muted(ref("s.hint"), "xs"))])))])],
+});
+
+export const pageTrailParts: OrganismSpec[] = [pageCrumbs, pageAside];
diff --git a/xgen/screens/src/authoring/components/parts.ts b/xgen/screens/src/authoring/components/parts.ts
new file mode 100644
index 0000000..837a7a0
--- /dev/null
+++ b/xgen/screens/src/authoring/components/parts.ts
@@ -0,0 +1,337 @@
+// The parts of canary (packages/ui/src/parts) that are pure: markup bound to props, no state, no effects.
+// What canary did with `$state`, `$props.id()`, DOM APIs or private kit data stays a contract (see `contract`).
+import { and, call, coalesce, cn, cond, eq, eachAt, each, has, lt, le, op, ref, slot, str, sub, text, tpl, undef, use, when, at } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { contract, defaultOf, fields, prop, recipeExamples, req, spec, ts, union } from "../kit";
+
+const P = "part.";
+const m0 = "m-0 text-xs font-medium text-muted-foreground";
+
+const barChart = spec(`${P}bar-chart`, "BarChart", "A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image for assistive technology: `label` carries the summary, the bar values are in the captions and titles.", {
+  records: { Bar: fields(["id", "string"], ["label", "string"], ["value", "number"], ["title", "string", true], ["muted", "boolean", true]) },
+  props: [
+    req("bars", ts("Bar[]"), "id, caption, value; `title` is the tooltip, `muted` dims a period without data"),
+    req("label", "string", "the summary read to assistive technology"),
+    prop("max", "number", "the value of a full-height bar; the largest value by default"),
+    prop("height", "number", "height of the plot area in px", { default: 160 }),
+  ],
+  className: true,
+  derived: [{ name: "top", value: op("max", 1, coalesce(ref("max"), op("maxBy", ref("bars"), "value"))) }],
+  view: [
+    use("Box", { props: { Class: cn("min-w-0", ref("className")) }, attrs: { "data-slot": "bar-chart" } },
+      use("Box", { props: { Class: "flex min-w-0 items-end gap-2" }, attrs: { role: "img", "aria-label": ref("label"), style: op("css", "height", ref("height"), "px") } },
+        each(ref("bars"), "b", ref("b.id"),
+          use("Box", { props: { Class: "flex h-full min-w-0 flex-1 items-end" }, attrs: { title: coalesce(ref("b.title"), ref("b.label")) } },
+            use("Box", { props: { Class: cn("w-full rounded", cond(ref("b.muted"), "bg-muted-foreground", "bg-primary")) }, attrs: { style: op("css", "height", op("max", 2, op("round", op("mul", op("div", ref("b.value"), ref("top")), 100))), "%"), "data-bar": ref("b.id") } })))),
+      use("Box", { props: { Class: "mt-2 flex min-w-0 gap-2" }, attrs: { "aria-hidden": "true" } },
+        each(ref("bars"), "b", ref("b.id"),
+          use("Box", { props: { Class: "relative h-4 min-w-0 flex-1" } },
+            use("Text", { props: { Class: "absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground" } }, text(ref("b.label"))))))),
+  ],
+});
+
+const bulkBar = spec(`${P}bulk-bar`, "BulkBar", "The \"N selected\" bar of a list: a count, a clear button and the bulk actions (children). All text comes in through props.", {
+  props: [req("label", "string", "the count, e.g. \"3 selected\""), req("clearLabel", "string", "accessible name of the clear button")],
+  className: true,
+  children: true,
+  events: [{ name: "clear", args: [], docs: "the clear button was pressed" }],
+  view: [
+    use("Box", { props: { Class: cn("flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background", ref("className")) }, attrs: { role: "region", "aria-label": ref("label"), "aria-live": "polite", "data-slot": "bulk-bar", "data-testid": "bulk-bar" } },
+      use("Button", { props: { Variant: "ghost", Size: "sm", Layout: "icon", Type: "button", AriaLabel: ref("clearLabel"), Class: "text-background hover:bg-background/15 hover:text-background" }, on: { click: call("emit.clear") } },
+        use("LucideIcon", { props: { Name: "x", Size: 16 } })),
+      use("Inline", { attrs: { "data-testid": "bulk-count" } }, text(ref("label"))),
+      use("Inline", { props: { Class: "ml-auto flex flex-wrap items-center gap-2" } }, slot("children"))),
+  ],
+});
+
+const emptyState = spec(`${P}empty-state`, "EmptyState", "Empty list or nothing found: a round icon, a title, a hint and an optional action.", {
+  props: [prop("icon", "string", "Lucide name of the icon", { default: "inbox" }), req("title", "string"), prop("text", "string", "the hint")],
+  className: true,
+  slots: [{ name: "action", args: [], docs: "an optional call to action" }],
+  view: [
+    use("Box", { props: { Class: cn("flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border", ref("className")) }, attrs: { role: "status" } },
+      use("IconBadge", { props: { Size: "lg" } }, use("LucideIcon", { props: { Name: ref("icon"), Size: 20 } })),
+      use("Text", { props: { Class: "m-0 text-sm font-bold text-foreground" } }, text(ref("title"))),
+      when(ref("text"), [use("Text", { props: { Class: "m-0 max-w-80 text-xs font-medium text-muted-foreground" } }, text(ref("text")))]),
+      slot("action")),
+  ],
+});
+
+const field = spec(`${P}field`, "Field", "A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the control.", {
+  props: [req("label", "string"), req("htmlFor", "string", "id of the control"), prop("hint", "string"), prop("error", "string", "when set it replaces the hint and is announced (role alert)")],
+  className: true,
+  children: true,
+  view: [
+    use("Box", { props: { Class: cn("flex min-w-0 flex-col gap-2", ref("className")) } },
+      use("Label", { props: { Class: "text-xs font-bold text-foreground", HTMLFor: ref("htmlFor") } }, text(ref("label"))),
+      slot("children"),
+      when(ref("error"),
+        [use("Text", { props: { Class: "m-0 text-xs font-semibold text-destructive" }, attrs: { role: "alert" } }, text(ref("error")))],
+        [when(ref("hint"), [use("Text", { props: { Class: m0 } }, text(ref("hint")))])])),
+  ],
+});
+
+const logoSidebar = spec(`${P}logo-sidebar`, "LogoSidebar", "The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The variant picks the padding (recipe).", {
+  props: [prop("variant", union("logo-sidebar", "variant"), "padding of the row", { default: defaultOf("logo-sidebar", "variant") }), req("name", "string", "product name")],
+  className: true,
+  recipes: { logoSidebar: "logo-sidebar" },
+  examples: recipeExamples("logo-sidebar", { variant: "variant" }, { name: "App" }),
+  slots: [{ name: "mark", args: [], docs: "the logo mark" }, { name: "actions", args: [], docs: "trailing actions" }],
+  view: [
+    use("Box", { props: { Class: cn(op("recipe", "logoSidebar", "variant", ref("variant")), "in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0", ref("className")) }, attrs: { "data-slot": "logo-sidebar" } },
+      use("Inline", { props: { Class: "flex items-center gap-4" }, attrs: { "data-slot": "logo-sidebar-brand" } },
+        slot("mark"),
+        use("Inline", { props: { Class: "text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden" }, attrs: { "data-slot": "logo-sidebar-name" } }, text(ref("name")))),
+      when(ref("actions"), [use("Inline", { props: { Class: "flex items-center gap-2 in-data-[nav=collapsed]:hidden" }, attrs: { "data-slot": "logo-sidebar-actions" } }, slot("actions"))])),
+  ],
+});
+
+const avatar = spec(`${P}avatar`, "Avatar", "An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round.", {
+  props: [req("src", "string"), prop("alt", "string", "empty for a decorative picture", { default: "" }), prop("size", union("avatar", "size"), "frame size in px", { default: defaultOf("avatar", "size") })],
+  className: true,
+  recipes: { avatar: "avatar" },
+  examples: recipeExamples("avatar", { size: "size" }, { src: "avatar.png" }),
+  view: [
+    use("Inline", { props: { Class: cn(op("recipe", "avatar", "size", ref("size")), ref("className")) }, attrs: { "data-slot": "avatar" } },
+      use("Image", { props: { Src: ref("src"), Alt: ref("alt"), Class: "size-full object-cover", Fit: "cover", Size: "auto", Loading: "eager", Decoding: "auto" }, attrs: { draggable: "false" } })),
+  ],
+});
+
+const badgeSquare = spec(`${P}badge-square`, "BadgeSquare", "A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd).", {
+  props: [prop("size", union("badge-square", "size"), "height", { default: defaultOf("badge-square", "size") })],
+  className: true,
+  children: true,
+  recipes: { badgeSquare: "badge-square" },
+  examples: recipeExamples("badge-square", { size: "size" }),
+  view: [use("Inline", { props: { Class: cn(op("recipe", "badgeSquare", "size", ref("size")), ref("className")) }, attrs: { "data-slot": "badge-square" } }, slot("children"))],
+});
+
+const meterBody = (): ViewNode[] => [
+  use("Box", { props: { Class: "flex items-baseline justify-between gap-4" } },
+    use("Text", { props: { Class: "m-0 min-w-0 truncate text-sm font-bold text-foreground" } }, text(ref("label"))),
+    use("Text", { props: { Class: "m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground" } }, text(ref("caption")))),
+  use("Progress", { props: { Value: str(ref("value")), Max: "100" }, attrs: { "aria-label": ref("label") } }),
+  when(ref("hint"), [use("Text", { props: { Class: m0 } }, text(ref("hint")))]),
+];
+const meterRow = spec(`${P}meter-row`, "MeterRow", "A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With `href` the whole row is a link.", {
+  props: [req("label", "string"), req("value", "number", "0 to 100"), req("caption", "string", "the caption on the right, e.g. \"72%\""), prop("hint", "string"), prop("href", "string")],
+  className: true,
+  view: [
+    use("Box", { props: { Class: cn("min-w-0", ref("className")) }, attrs: { "data-slot": "meter-row" } },
+      when(ref("href"),
+        [use("Link", { props: { Href: ref("href"), Variant: "block", Class: "flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted" } }, ...meterBody())],
+        [use("Box", { props: { Class: "flex min-w-0 flex-col gap-2 p-2" } }, ...meterBody())])),
+  ],
+});
+
+const notice = spec(`${P}notice`, "Notice", "A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text renders nothing visible.", {
+  props: [req("text", "string")],
+  view: [
+    use("Box", { props: { Class: "contents" }, attrs: { role: "status", "data-testid": "notice" } },
+      when(ref("text"), [use("Text", { props: { Class: "fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold text-background shadow-lg" } },
+        use("LucideIcon", { props: { Name: "circle-check", Size: 16 } }), text(ref("text")))])),
+  ],
+});
+
+const pageHeader = spec(`${P}page-header`, "PageHeader", "The page heading: a title, a one-line summary and the action buttons on the right (below on phones).", {
+  props: [req("title", "string"), prop("summary", "string"), prop("id", "string", "id of the heading, for aria-labelledby")],
+  slots: [{ name: "actions", args: [], docs: "action buttons" }],
+  view: [
+    use("Box", { props: { Class: "flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between" } },
+      use("Box", { props: { Class: "flex min-w-0 flex-col gap-2" } },
+        use("Title", { props: { As: 1, Size: "xl", Weight: "bold", Class: "m-0" }, attrs: { id: ref("id") } }, text(ref("title"))),
+        when(ref("summary"), [use("Text", { props: { Class: m0 } }, text(ref("summary")))])),
+      when(ref("actions"), [use("Box", { props: { Class: "flex flex-wrap items-center gap-2" } }, slot("actions"))])),
+  ],
+});
+
+const pager = spec(`${P}pager`, "Pager", "The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4 5 6 … 21), with `moreLabel` a \"Load more\" button. The current page is a plain element marked aria-current=\"page\"; the others are buttons. All text comes in through props.", {
+  props: [
+    req("page", "number", "current page, from 1"), req("pages", "number", "number of pages"), req("summary", "string"),
+    req("previousLabel", "string"), req("nextLabel", "string"),
+    prop("numbered", "boolean", "show page numbers between the arrows", { default: false }),
+    prop("pageLabel", "string", "template of the accessible name of a page button, {0} is the number"),
+    prop("moreLabel", "string", "label of the \"Load more\" button; no button without it"),
+  ],
+  events: [{ name: "page", args: [{ name: "page", type: "number" }], docs: "a page was chosen" }, { name: "more", args: [], docs: "the load-more button was pressed" }],
+  derived: [{ name: "numbers", value: op("pageWindow", ref("page"), ref("pages")) }],
+  view: [
+    use("Box", { props: { Class: "flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground" }, attrs: { "data-testid": "pager" } },
+      use("Inline", { props: { Class: "flex flex-wrap items-center gap-4" } }, use("Inline", {}, text(ref("summary")))),
+      use("Inline", { props: { Class: "flex flex-wrap items-center gap-2" } },
+        when(and(ref("moreLabel"), lt(ref("page"), ref("pages"))), [
+          use("Button", { props: { Variant: "outline", Size: "sm", Type: "button" }, on: { click: call("emit.more") }, attrs: { "data-testid": "pager-more" } },
+            text(ref("moreLabel"))),
+        ]),
+        use("Button", { props: { Variant: "outline", Size: "sm", Layout: "icon", AriaLabel: ref("previousLabel"), Disabled: le(ref("page"), 1) }, on: { click: call("emit.page", sub(ref("page"), 1)) } },
+          use("LucideIcon", { props: { Name: "chevron-left", Size: 16 } })),
+        when(ref("numbered"),
+          [eachAt(ref("numbers"), "n", "i", or2(ref("n"), tpl("gap{0}", ref("i"))),
+            when(eq(ref("n"), null),
+              [use("Inline", { props: { Class: "w-8 text-center" } }, text("…"))],
+              [when(eq(ref("n"), ref("page")),
+                [use("Inline", { props: { Class: "flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background" }, attrs: { "aria-current": "page", "data-testid": "pager-current" } }, text(ref("n")))],
+                [use("Button", { props: { Variant: "ghost", Size: "sm", Layout: "icon", Type: "button", AriaLabel: tpl(ref("pageLabel"), ref("n")) }, on: { click: call("emit.page", ref("n")) } }, text(ref("n")))])]))],
+          [use("Inline", { props: { Class: "min-w-12 text-center font-bold text-foreground" } }, text(ref("page")), text(" / "), text(ref("pages")))]),
+        use("Button", { props: { Variant: "outline", Size: "sm", Layout: "icon", AriaLabel: ref("nextLabel"), Disabled: op("ge", ref("page"), ref("pages")) }, on: { click: call("emit.page", op("add", ref("page"), 1)) } },
+          use("LucideIcon", { props: { Name: "chevron-right", Size: 16 } })))),
+  ],
+});
+function or2(a: ReturnType<typeof ref>, b: ReturnType<typeof ref>) { return op("or", a, b); }
+
+const panel = spec(`${P}panel`, "Panel", "A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the Block of its block (rule 01).", {
+  props: [prop("title", "string"), prop("description", "string"), prop("id", "string", "base id: the title gets `{id}-t` and the panel points at it with aria-labelledby")],
+  className: true,
+  children: true,
+  slots: [{ name: "actions", args: [], docs: "header actions" }],
+  view: [
+    use("Box", { props: { Class: cn("flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border", ref("className")) }, attrs: { role: "group", "aria-labelledby": cond(and(ref("title"), ref("id")), tpl("{0}-t", ref("id")), undef()) } },
+      when(op("or", ref("title"), ref("actions")), [
+        use("Box", { props: { Class: "flex items-start justify-between gap-4" } },
+          use("Box", { props: { Class: "flex min-w-0 flex-col gap-2" } },
+            when(ref("title"), [use("Title", { props: { As: 2, Size: "base", Class: "m-0 text-foreground" }, attrs: { id: cond(ref("id"), tpl("{0}-t", ref("id")), undef()) } }, text(ref("title")))]),
+            when(ref("description"), [use("Text", { props: { Class: m0 } }, text(ref("description")))])),
+          slot("actions")),
+      ]),
+      slot("children")),
+  ],
+});
+
+const tones = {
+  gray: "bg-muted text-muted-foreground inset-ring-border",
+  ...Object.fromEntries(["blue", "amber", "green", "red", "violet", "pink", "orange", "cyan"].map((c) => [c, `bg-${c}-50 text-${c}-700 inset-ring-${c}-200 dark:bg-${c}-950 dark:text-${c}-300 dark:inset-ring-${c}-900`])),
+};
+const pill = spec(`${P}pill`, "Pill", "A status pill: a tinted label with an icon (published, draft, role, comment state).", {
+  props: [prop("tone", ts('"gray" | "blue" | "amber" | "green" | "red" | "violet" | "pink" | "orange" | "cyan"'), "tint", { default: "gray" }), prop("icon", "string", "Lucide name")],
+  className: true,
+  children: true,
+  consts: { PILL: tones },
+  view: [
+    use("Box", { props: { Class: "contents" } },
+      use("Inline", { attrs: { "data-slot": "pill" }, props: { Class: cn("inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring", at(ref("PILL"), ref("tone")), ref("className")) } },
+        when(ref("icon"), [use("LucideIcon", { props: { Name: ref("icon"), Size: 12 } })]),
+        slot("children"))),
+  ],
+});
+
+const rating = spec(`${P}rating`, "Rating", "One to five stars (a review's grade, the average of a product). The value is read as the label; the stars themselves are decoration.", {
+  props: [req("value", "number", "0 to max, halves are rounded"), req("label", "string", "read to assistive technology, e.g. \"4 of 5\""), prop("max", "number", "number of stars", { default: 5 }), prop("size", "number", "size of a star in px", { default: 16 })],
+  className: true,
+  derived: [{ name: "full", value: op("round", op("min", ref("max"), op("max", 0, ref("value")))) }],
+  view: [
+    use("Box", { props: { Class: cn("inline-flex items-center gap-0", ref("className")) }, attrs: { role: "img", "aria-label": ref("label"), "data-slot": "rating", "data-value": ref("full") } },
+      each(op("range", ref("max")), "i", ref("i"), use("LucideIcon", { props: { Name: "star", Size: ref("size"), Class: cond(lt(ref("i"), ref("full")), "fill-foreground text-foreground", "text-border") } }))),
+  ],
+});
+
+const region = spec(`${P}region`, "Region", "A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never nested, so a nested landmark is its own component.", {
+  frame: true,
+  props: [req("tag", ts('"header" | "nav" | "section" | "aside" | "footer" | "article" | "figure" | "main" | "search" | "div"'), "the element")],
+  className: true,
+  children: true,
+  view: [use("Block", { props: { Tag: ref("tag"), Class: ref("className") } }, slot("children"))],
+});
+
+const searchField = spec(`${P}search-field`, "SearchField", "A search input with a magnifier. `value` fires on every keystroke with the new text.", {
+  props: [req("value", "string"), prop("placeholder", "string"), req("label", "string", "accessible name")],
+  className: true,
+  events: [{ name: "value", args: [{ name: "value", type: "string" }], docs: "the text changed" }],
+  view: [
+    use("Box", { props: { Class: cn("relative min-w-44 flex-1", ref("className")) }, attrs: { role: "search" } },
+      use("LucideIcon", { props: { Name: "search", Size: 16, Class: "pointer-events-none absolute top-2 left-3 text-muted-foreground" } }),
+      use("Input", { props: { Size: "sm", Type: "search", Placeholder: ref("placeholder"), AriaLabel: ref("label"), Class: "pr-3 pl-10", Value: ref("value") }, on: { input: call("emit.value", ref("event.value")) } })),
+  ],
+});
+
+const tileBody = (): ViewNode[] => [
+  use("Box", { props: { Class: "flex items-center justify-between gap-2" } },
+    use("Text", { props: { Class: "m-0 text-xs font-bold text-muted-foreground" } }, text(ref("label"))),
+    use("IconBadge", { props: { Size: "sm" } }, use("LucideIcon", { props: { Name: ref("icon"), Size: 16 } }))),
+  use("Text", { props: { Size: "2xl", Weight: "bold", Class: "m-0 leading-8" } }, text(ref("value"))),
+  when(ref("hint"), [use("Text", { props: { Class: m0 } }, text(ref("hint")))]),
+];
+const statTile = spec(`${P}stat-tile`, "StatTile", "A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the tile is a plain figure.", {
+  props: [req("label", "string"), req("value", ts("string | number")), req("icon", "string", "Lucide name"), prop("href", "string"), prop("hint", "string")],
+  view: [
+    use("Box", { props: { Class: "min-w-0" } },
+      when(ref("href"),
+        [use("Link", { props: { Href: ref("href"), Variant: "block", Class: "flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border hover:bg-muted" } }, ...tileBody())],
+        [use("Box", { props: { Class: "flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border" } }, ...tileBody())])),
+  ],
+});
+
+const tableToolbar = spec(`${P}table-toolbar`, "TableToolbar", "The toolbar above a table: search and filter controls on the left (children), the actions on the right (`actions`). One tab stop group (role toolbar).", {
+  props: [req("label", "string", "accessible name of the toolbar")],
+  className: true,
+  children: true,
+  slots: [{ name: "actions", args: [], docs: "actions on the right" }],
+  view: [
+    use("Box", { props: { Class: cn("flex flex-wrap items-center justify-between gap-2", ref("className")) }, attrs: { role: "toolbar", "aria-label": ref("label"), "data-slot": "table-toolbar" } },
+      use("Inline", { props: { Class: "flex min-w-0 flex-wrap items-center gap-2" } }, slot("children")),
+      use("Inline", { props: { Class: "flex flex-wrap items-center gap-2" } }, slot("actions"))),
+  ],
+});
+
+const timeline = spec(`${P}timeline`, "Timeline", "A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time. Newest first or oldest first is the caller's order.", {
+  records: { TimelineItem: fields(["id", "string"], ["title", "string"], ["text", "string", true], ["time", "string"], ["tone", "string", true]) },
+  props: [req("items", ts("TimelineItem[]"), "tone is gray, green, blue, amber or red")],
+  className: true,
+  consts: { TONE_DOT: { gray: "bg-muted-foreground", green: "bg-emerald-500", blue: "bg-blue-500", amber: "bg-amber-500", red: "bg-red-500" } },
+  view: [
+    use("Box", { props: { Class: cn("min-w-0", ref("className")) }, attrs: { "data-slot": "timeline" } },
+      use("List", { props: { Class: "m-0 flex list-none flex-col p-0" } },
+        eachAt(ref("items"), "item", "i", ref("item.id"),
+          use("ListItem", { props: { Class: "relative flex min-w-0 gap-4 pb-4 last:pb-0" }, attrs: { "data-event": ref("item.id") } },
+            use("Box", { props: { Class: "relative flex w-2 shrink-0 justify-center" } },
+              when(lt(ref("i"), sub(op("len", ref("items")), 1)), [use("Inline", { props: { Class: "absolute top-4 -bottom-0 w-px bg-border" } })]),
+              use("Inline", { props: { Class: cn("mt-2 size-2 rounded-full", at(ref("TONE_DOT"), coalesce(ref("item.tone"), "gray"))) } })),
+            use("Box", { props: { Class: "flex min-w-0 flex-1 flex-col gap-0" } },
+              use("Box", { props: { Class: "flex flex-wrap items-baseline justify-between gap-x-4" } },
+                use("Text", { props: { Class: "m-0 text-sm font-bold text-foreground" } }, text(ref("item.title"))),
+                use("Text", { props: { Class: "m-0 shrink-0 text-xs font-medium text-muted-foreground" } }, text(ref("item.time")))),
+              when(ref("item.text"), [use("Text", { props: { Class: m0 } }, text(ref("item.text")))])))))),
+  ],
+});
+
+const rangeField = spec(`${P}range-field`, "RangeField", "A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.", {
+  props: [
+    req("type", ts('"number" | "date"')), req("from", "string"), req("to", "string"),
+    req("fromLabel", "string"), req("toLabel", "string"),
+    prop("min", "number"), prop("max", "number"),
+  ],
+  className: true,
+  events: [{ name: "change", args: [{ name: "from", type: "string" }, { name: "to", type: "string" }], docs: "either end changed; both ends are passed" }],
+  view: [
+    use("Box", { props: { Class: cn("flex flex-col gap-2", ref("className")) }, attrs: { "data-slot": "range-field" } },
+      when(and(eq(ref("type"), "number"), has(ref("min")), has(ref("max")), lt(ref("min"), ref("max"))), [
+        use("Range", { props: { Min: ref("min"), Max: ref("max"), AriaLabel: ref("fromLabel"), Value: cond(eq(ref("from"), ""), str(ref("min")), ref("from")) }, on: { input: call("emit.change", ref("event.value"), ref("to")) }, attrs: { "data-testid": "range-from" } }),
+        use("Range", { props: { Min: ref("min"), Max: ref("max"), AriaLabel: ref("toLabel"), Value: cond(eq(ref("to"), ""), str(ref("max")), ref("to")) }, on: { input: call("emit.change", ref("from"), ref("event.value")) }, attrs: { "data-testid": "range-to" } }),
+      ]),
+      use("Inline", { props: { Class: "flex items-center gap-2" } },
+        use("Input", { props: { Type: ref("type"), Size: "sm", AriaLabel: ref("fromLabel"), Value: ref("from"), Min: str(ref("min")), Max: str(ref("max")) }, on: { input: call("emit.change", ref("event.value"), ref("to")) } }),
+        use("Inline", { props: { Class: "text-muted-foreground" } }, text("–")),
+        use("Input", { props: { Type: ref("type"), Size: "sm", AriaLabel: ref("toLabel"), Value: ref("to"), Min: str(ref("min")), Max: str(ref("max")) }, on: { input: call("emit.change", ref("from"), ref("event.value")) } }))),
+  ],
+});
+
+// contracts: the markup could be generated, the behaviour is the programmer's (ports)
+const dropZone = contract(`${P}drop-zone`, "DropZone", "A dashed area that takes files by drag and drop or by a file input. The words come from props; the files are handed to the `files` event, nothing is uploaded here.", "drag and drop and the programmatic click on the file input need DOM APIs (DataTransfer, element lookup by id): the behaviour is written by the programmer behind the `files` port", {
+  props: [req("label", "string", "accessible name of the zone"), req("title", "string"), prop("text", "string"), req("chooseLabel", "string", "accessible name of the file input"), prop("accept", "string"), prop("multiple", "boolean")],
+  className: true,
+  events: [{ name: "files", args: [{ name: "files", type: ts("File[]") }], docs: "files were dropped or picked" }],
+});
+const logoMark = contract(`${P}logo-mark`, "LogoMark", "The app logo mark in a 32 px frame: a disc or a tile with the logo glyph.", "brand glyph data: the mark is the app's own brand; the app supplies the mark through a slot (see LogoSidebar)", {
+  props: [prop("variant", ts('"disc" | "tile"'), "frame of the mark", { default: "disc" })],
+  className: true,
+});
+const filterBuilder = contract(`${P}filter-builder`, "FilterBuilder", "Rows \"field, operator, value\" joined by AND. Operators depend on the field type, the value control too. Every change reports the whole list; the list lives in the URL of the caller.", "state and branching on the field type (operator tables, value controls per type) are logic: the markup of one row is generated from Field, Select and Input, the reducer is the programmer's behind the `change` port", {
+  records: {
+    FilterField: fields(["id", "string"], ["label", "string"], ["type", "string"]),
+    FilterCond: fields(["field", "string"], ["op", "string"], ["value", "string"]),
+  },
+  props: [req("fields", ts("FilterField[]")), req("filters", ts("FilterCond[]")), req("labels", ts("Record<string, string>"), "every word: add, remove, field, operator, value, none, clear, and, yes, no and one per operator")],
+  className: true,
+  events: [{ name: "change", args: [{ name: "filters", type: ts("FilterCond[]") }], docs: "the whole list after any change" }],
+});
+
+export const parts: OrganismSpec[] = [avatar, badgeSquare, barChart, bulkBar, emptyState, field, logoSidebar, meterRow, notice, pageHeader, pager, panel, pill, rating, region, searchField, statTile, tableToolbar, timeline, rangeField, dropZone, logoMark, filterBuilder];
diff --git a/xgen/screens/src/authoring/components/patterns.ts b/xgen/screens/src/authoring/components/patterns.ts
new file mode 100644
index 0000000..72e5fbf
--- /dev/null
+++ b/xgen/screens/src/authoring/components/patterns.ts
@@ -0,0 +1,255 @@
+// The patterns of canary (packages/ui/src/patterns). The presentational ones are generated: markup, recipes, ARIA roles.
+// What canary did with context, attachments, `$state`, timers or the DOM stays a contract: the programmer writes the behaviour behind the props and events
+// (the portable helpers it needs are in the utils of the package: roving, dismissable, trapFocus, lockScroll).
+import { cn, call, cond, eq, forward, has, op, organism, ref, slot, text, undef, use, when, not, and } from "../../build";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { contract, defaultOf, fields, prop, recipeExamples, req, spec, ts, union } from "../kit";
+
+const P = "pattern.";
+const recipe = (name: string, ...pairs: Array<string | ReturnType<typeof ref>>) => op("recipe", name, ...pairs);
+const state2 = (flag: string, on: string, off = "default") => cond(ref(flag), on, off);
+
+const iconTab = spec(`${P}icon-tab`, "IconTab", "One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key movement between tabs is the job of IconTabs (see roving).", {
+  props: [prop("active", "boolean", "the selected tab", { default: false }), req("label", "string", "accessible name")],
+  className: true,
+  children: true,
+  recipes: { iconTab: "icon-tab" },
+  examples: recipeExamples("icon-tab", { state: "active" }).map((e) => ({ ...e, props: { label: "Files", active: e.id.endsWith("active") } })),
+  events: [{ name: "click", args: [], docs: "the tab was pressed" }],
+  view: [
+    use("ButtonPlain", { props: { Type: "button", Role: "tab", AriaLabel: ref("label"), Class: cn(recipe("iconTab", "state", state2("active", "active")), ref("className")) }, attrs: { "aria-selected": ref("active"), tabindex: cond(ref("active"), 0, -1), "data-slot": "icon-tab", "data-state": state2("active", "active") }, on: { click: call("emit.click") } }, slot("children")),
+  ],
+});
+
+const iconTabs = spec(`${P}icon-tabs`, "IconTabs", "A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).", {
+  props: [prop("label", "string", "accessible name of the tab list")],
+  className: true,
+  children: true,
+  view: [use("Box", { props: { Class: cn("flex items-center gap-2", ref("className")) }, attrs: { role: "tablist", "aria-label": ref("label"), "data-slot": "icon-tabs" } }, slot("children"))],
+});
+
+const switcher = spec(`${P}switcher`, "Switcher", "A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown (horizontal, activate).", {
+  props: [
+    prop("size", union("switcher", "size"), "height", { default: defaultOf("switcher", "size") }),
+    prop("layout", union("switcher", "layout"), "text or icon items", { default: defaultOf("switcher", "layout") }),
+    prop("label", "string", "accessible name"),
+  ],
+  className: true,
+  children: true,
+  recipes: { switcher: "switcher" },
+  examples: recipeExamples("switcher", { size: "size", layout: "layout" }),
+  view: [use("Box", { props: { Class: cn(recipe("switcher", "size", ref("size"), "layout", ref("layout")), ref("className")) }, attrs: { role: "tablist", "aria-label": ref("label"), "data-slot": "switcher" } }, slot("children"))],
+});
+
+const switcherItem = spec(`${P}switcher-item`, "SwitcherItem", "One item of a Switcher (default or active). Pass the same size and layout as the Switcher.", {
+  props: [
+    prop("active", "boolean", "the selected item", { default: false }),
+    prop("size", union("switcher-item", "size"), "height", { default: defaultOf("switcher-item", "size") }),
+    prop("layout", union("switcher-item", "layout"), "text or icon", { default: defaultOf("switcher-item", "layout") }),
+  ],
+  className: true,
+  children: true,
+  recipes: { switcherItem: "switcher-item" },
+  examples: [...recipeExamples("switcher-item", { size: "size", layout: "layout" }), { id: "state.active", props: { active: true } }],
+  events: [{ name: "click", args: [], docs: "the item was pressed" }],
+  view: [
+    use("ButtonPlain", { props: { Type: "button", Role: "tab", Class: cn(recipe("switcherItem", "size", ref("size"), "layout", ref("layout"), "state", state2("active", "active")), ref("className")) }, attrs: { "aria-selected": ref("active"), tabindex: cond(ref("active"), 0, -1), "data-slot": "switcher-item", "data-state": state2("active", "active") }, on: { click: call("emit.click") } }, slot("children")),
+  ],
+});
+
+const editorTab = spec(`${P}editor-tab`, "EditorTab", "An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close events.", {
+  props: [req("label", "string"), req("closeLabel", "string", "accessible name of the close button, e.g. \"Close index.tsx\""), prop("active", "boolean", "the selected tab", { default: false }), prop("preview", "boolean", "not pinned yet (italic)", { default: false })],
+  className: true,
+  slots: [{ name: "icon", args: [], docs: "the file icon" }],
+  events: [{ name: "click", args: [], docs: "the tab was pressed" }, { name: "close", args: [], docs: "the close button was pressed" }],
+  view: [
+    use("Box", { props: { Class: cn("flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card [&_svg]:text-muted-foreground", "border-r border-border", ref("className")) }, attrs: { role: "tab", "aria-selected": ref("active"), tabindex: cond(ref("active"), 0, -1), "data-slot": "editor-tab", "data-state": state2("active", "active") }, on: { click: call("emit.click") } },
+      use("Inline", { props: { Class: "flex h-10 items-center gap-2 px-3" }, attrs: { "data-slot": "editor-tab-content" } },
+        slot("icon"),
+        use("Inline", { props: { Class: cn("text-xs text-foreground", cond(ref("preview"), "font-semibold italic", "font-bold")) }, attrs: { "data-slot": "editor-tab-label" } }, text(ref("label"))),
+        use("Button", { props: { Variant: "ghost", Size: "sm", Layout: "icon", Class: "p-0 [&>svg]:size-4", AriaLabel: ref("closeLabel") }, attrs: { tabindex: -1, "data-slot": "editor-tab-close" }, on: { click: call("emit.close") } },
+          use("LucideIcon", { props: { Name: "x", Size: 16 } })))),
+  ],
+});
+
+const fileTree = spec(`${P}file-tree`, "FileTree", "The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead` from the utils to the keydown (vertical, no loop).", {
+  props: [prop("label", "string", "accessible name of the tree")],
+  className: true,
+  children: true,
+  view: [use("Box", { props: { Class: cn("flex flex-col gap-2 p-2", ref("className")) }, attrs: { role: "tree", "aria-label": ref("label"), "data-slot": "file-tree" } }, slot("children"))],
+});
+
+const fileTreeItem = spec(`${P}file-tree-item`, "FileTreeItem", "A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide.", {
+  props: [
+    prop("kind", union("file-tree-item", "kind"), "folder or file", { default: defaultOf("file-tree-item", "kind") }),
+    req("label", "string"),
+    prop("selected", "boolean", "the chosen row", { default: false }),
+    prop("expanded", "boolean", "an open folder", { default: false }),
+  ],
+  className: true,
+  recipes: { fileTreeItem: "file-tree-item" },
+  examples: [...recipeExamples("file-tree-item", { kind: "kind" }, { label: "src" }), { id: "state.selected", props: { label: "index.ts", selected: true } }, { id: "state.expanded", props: { label: "src", kind: "folder", expanded: true } }],
+  events: [{ name: "click", args: [], docs: "the row was pressed" }],
+  view: [
+    use("ButtonPlain", { props: { Type: "button", Role: "treeitem", Class: cn(recipe("fileTreeItem", "kind", ref("kind")), ref("className")) }, attrs: { "aria-selected": ref("selected"), tabindex: cond(ref("selected"), 0, -1), "aria-expanded": cond(eq(ref("kind"), "folder"), ref("expanded"), undef()), "data-slot": "file-tree-item", "data-kind": ref("kind"), "data-state": state2("selected", "selected") }, on: { click: call("emit.click") } },
+      when(eq(ref("kind"), "folder"),
+        [use("LucideIcon", { props: { Name: cond(ref("expanded"), "chevron-down", "chevron-right"), Size: 16 } }), use("LucideIcon", { props: { Name: "folder-open", Size: 16 } })],
+        [use("LucideIcon", { props: { Name: "file", Size: 16 } })]),
+      use("Inline", { props: { Class: "whitespace-nowrap" }, attrs: { "data-slot": "file-tree-label" } }, text(ref("label")))),
+  ],
+});
+
+const navBody = (): ViewNode[] => [
+  use("Inline", { props: { Class: ref("inner") }, attrs: { "data-slot": "nav-item-content" } },
+    use("Inline", { props: { Class: "flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center" }, attrs: { "data-slot": "nav-item-left" } },
+      slot("icon"),
+      use("Inline", { props: { Class: "min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden" }, attrs: { "data-slot": "nav-item-label" } }, slot("children"))),
+    when(ref("right"),
+      [use("Inline", { props: { Class: "flex items-center gap-2 in-data-[nav=collapsed]:hidden" }, attrs: { "data-slot": "nav-item-right" } }, slot("right"))],
+      [when(ref("reserveRight"), [use("Inline", { props: { Class: "size-5 shrink-0 in-data-[nav=collapsed]:hidden" }, attrs: { "data-slot": "nav-item-right" } })])])),
+]
+/** the row inside a NavItem: written once, the link, button and box roots pass their slots on to it */
+const navItemRow = spec(`${P}nav-item-row`, "NavItemRow", "The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the right.", {
+  props: [
+    prop("inner", "string", "classes of the row (the nav-item-content recipe, worked out by NavItem)"),
+    prop("reserveRight", "boolean", "keep the empty 20 by 20 frame on the right when there is no right content", { default: false }),
+  ],
+  children: true,
+  slots: [{ name: "icon", args: [], docs: "leading icon" }, { name: "right", args: [], docs: "trailing content" }],
+  view: navBody(),
+});
+const navRow = (): ViewNode => organism("NavItemRow", { inner: ref("inner"), reserveRight: ref("reserveRight") },
+  { slots: { icon: forward("icon"), right: forward("right"), children: forward("children") } });
+const navItem = spec(`${P}nav-item`, "NavItem", "A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a button, otherwise a static box.", {
+  props: [
+    prop("selected", "boolean", "the current item", { default: false }),
+    prop("level", union("nav-item", "level"), "indent level"),
+    prop("href", "string"),
+    prop("interactive", "boolean", "render a button (the click event is wired)", { default: false }),
+    prop("reserveRight", "boolean", "keep the empty 20 by 20 frame on the right when there is no right content", { default: false }),
+    prop("contentClass", "string", "classes of the inner row"),
+  ],
+  className: true,
+  children: true,
+  slots: [{ name: "icon", args: [], docs: "leading icon" }, { name: "right", args: [], docs: "trailing content" }],
+  recipes: { navItem: "nav-item", navItemContent: "nav-item-content" },
+  derived: [
+    { name: "state", value: cond(ref("selected"), "selected", "default") },
+    { name: "outer", value: cn(recipe("navItem", "level", ref("level"), "state", ref("state")), "group in-data-[nav=collapsed]:justify-center", ref("className")) },
+    { name: "inner", value: cn(recipe("navItemContent", "level", ref("level"), "state", ref("state")), and(not(ref("selected")), "group-hover:bg-muted"), "in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0", ref("contentClass")) },
+  ],
+  examples: [...recipeExamples("nav-item", { level: "level" }), { id: "state.selected", props: { selected: true } }, { id: "link", props: { href: "#/home" } }, { id: "button", props: { interactive: true } }],
+  events: [{ name: "click", args: [], docs: "the item was pressed (link and button)" }],
+  view: [
+    when(ref("href"),
+      [use("LinkPlain", { props: { Href: ref("href"), Class: ref("outer"), AriaCurrent: cond(ref("selected"), "page", undef()) }, attrs: { "data-slot": "nav-item", "data-state": ref("state") }, on: { click: call("emit.click") } }, navRow())],
+      [when(ref("interactive"),
+        [use("ButtonPlain", { props: { Type: "button", Class: cn(ref("outer"), "text-left") }, attrs: { "aria-current": cond(ref("selected"), "page", undef()), "data-slot": "nav-item", "data-state": ref("state") }, on: { click: call("emit.click") } }, navRow())],
+        [use("Box", { props: { Class: ref("outer") }, attrs: { "aria-current": cond(ref("selected"), "page", undef()), "data-slot": "nav-item", "data-state": ref("state") } }, navRow())])]),
+  ],
+});
+
+const headBody = (): ViewNode[] => [
+  use("Inline", { attrs: { "data-slot": "section-head-title" } }, slot("children")),
+  when(ref("right"), [use("Inline", { props: { Class: "flex items-center gap-2" }, attrs: { "data-slot": "section-head-right" } }, slot("right"))]),
+];
+const sectionHead = spec(`${P}section-head`, "SectionHead", "A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button (aria-expanded, the toggle event).", {
+  props: [
+    prop("size", union("section-head", "size"), "row height", { default: defaultOf("section-head", "size") }),
+    prop("expanded", "boolean", "set: the head is a disclosure button"),
+    prop("controls", "string", "id of the region the button opens"),
+  ],
+  className: true,
+  children: true,
+  slots: [{ name: "right", args: [], docs: "right-hand actions" }],
+  recipes: { sectionHead: "section-head" },
+  derived: [{ name: "cls", value: cn(recipe("sectionHead", "size", ref("size")), "rounded text-foreground in-data-[nav=collapsed]:hidden", ref("className")) }],
+  examples: [...recipeExamples("section-head", { size: "size" }), { id: "disclosure", props: { expanded: true, controls: "section-body" } }],
+  events: [{ name: "toggle", args: [], docs: "the disclosure button was pressed" }],
+  view: [
+    when(has(ref("expanded")),
+      [use("ButtonPlain", { props: { Type: "button", Class: cn(ref("cls"), "w-full text-left") }, attrs: { "aria-expanded": ref("expanded"), "aria-controls": ref("controls"), "data-slot": "section-head", "data-expanded": ref("expanded") }, on: { click: call("emit.toggle") } }, ...headBody())],
+      [use("Box", { props: { Class: ref("cls") }, attrs: { "data-slot": "section-head" } }, ...headBody())]),
+  ],
+});
+
+const sidebarPanel = spec(`${P}sidebar-panel`, "SidebarPanel", "The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer.", {
+  frame: true,
+  props: [prop("variant", union("sidebar-panel", "variant"), "sidebar type")],
+  className: true,
+  children: true,
+  recipes: { sidebarPanel: "sidebar-panel" },
+  examples: recipeExamples("sidebar-panel", { variant: "variant" }),
+  view: [use("Block", { props: { Tag: "aside", Class: cn(recipe("sidebarPanel", "variant", ref("variant")), ref("className")) }, attrs: { "data-slot": "sidebar-panel", "data-variant": op("coalesce", ref("variant"), "chat") } }, slot("children"))],
+});
+
+const dropdownItem = spec(`${P}dropdown-item`, "DropdownItem", "A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex -1: the menu moves focus with the arrow keys.", {
+  props: [prop("selected", "boolean", "the chosen item", { default: false })],
+  className: true,
+  children: true,
+  slots: [{ name: "icon", args: [], docs: "leading icon" }, { name: "right", args: [], docs: "trailing mark" }],
+  events: [{ name: "click", args: [], docs: "the item was chosen" }],
+  view: [
+    use("ButtonPlain", { props: { Type: "button", Role: "menuitem", Class: cn("group flex h-9 w-full items-center px-2 text-left text-foreground", ref("className")) }, attrs: { tabindex: -1, "data-slot": "dropdown-item", "data-state": state2("selected", "selected") }, on: { click: call("emit.click") } },
+      use("Inline", { props: { Class: "flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted group-data-[state=selected]:bg-muted" }, attrs: { "data-slot": "dropdown-item-content" } },
+        when(ref("icon"), [use("Inline", { props: { Class: "flex w-7 shrink-0 items-center pr-2" }, attrs: { "data-slot": "dropdown-item-icon" } }, slot("icon"))]),
+        use("Inline", { props: { Class: cn("text-xs", "min-w-0 flex-1 truncate px-1 font-bold") }, attrs: { "data-slot": "dropdown-item-label" } }, slot("children")),
+        when(ref("right"), [use("Inline", { props: { Class: "flex shrink-0 items-center pr-1" }, attrs: { "data-slot": "dropdown-item-right" } }, slot("right"))]))),
+  ],
+});
+
+// ---- contracts: behaviour (focus, overlays, timers, editors) is the programmer's, behind these props and events
+const CODE = "an editing surface with syntax highlighting and a cursor: an editor engine, not markup";
+const codeEditor = contract(`${P}code-editor`, "CodeEditor", "A code editing area with a highlighted line and a themed frame.", `${CODE}; the theme colours belong to the app`, {
+  props: [req("doc", "string", "document text"), prop("activeLine", "number", "1-based line with the cursor"), prop("editable", "boolean"), req("label", "string", "accessible name of the editing area")],
+  className: true,
+});
+const promptInput = contract(`${P}prompt-input`, "PromptInput", "A prompt box: a growing text area with attachments, a footer and an overlay.", "a text area that grows with its content and keeps its caret: DOM measurement and focus handling, written by the programmer", {
+  props: [prop("placeholder", "string"), prop("value", "string"), prop("label", "string")],
+  className: true,
+  slots: [{ name: "attachments", args: [], docs: "attached items" }, { name: "footer", args: [], docs: "send button and tools" }, { name: "overlay", args: [], docs: "suggestions above the box" }],
+  events: [{ name: "input", args: [{ name: "value", type: "string" }], docs: "the text changed" }],
+});
+const smartbox = contract(`${P}smartbox`, "Smartbox", "A browser-like address bar: back, forward, the address and reload.", "an address input with navigation history; the history and the key handling are application logic behind the navigate and reload events", {
+  records: { SmartboxLabels: fields(["group", "string"], ["back", "string"], ["forward", "string"], ["address", "string"], ["reload", "string"]) },
+  props: [req("url", "string"), req("labels", { record: "SmartboxLabels" }), prop("width", union("smartbox", "width"), "frame width", { default: defaultOf("smartbox", "width") })],
+  className: true,
+  recipes: { smartbox: "smartbox" },
+  examples: recipeExamples("smartbox", { width: "width" }, { url: "https://example.com" }),
+  slots: [{ name: "site", args: [], docs: "site icon or title" }],
+  events: [{ name: "navigate", args: [{ name: "url", type: "string" }], docs: "an address was entered" }, { name: "reload", args: [], docs: "reload was pressed" }],
+});
+const drawer = contract(`${P}drawer`, "Drawer", "A side sheet with a title, a close button, content and a footer that can close it.", "an overlay: focus trap, scroll lock, Escape and outside-click dismissal, inert page (trapFocus, dismissable and lockScroll of the utils)", {
+  props: [prop("open", "boolean"), req("title", "string"), req("closeLabel", "string"), prop("icon", "string", "Lucide name")],
+  className: true,
+  children: true,
+  slots: [{ name: "footer", args: [{ name: "close", type: ts("() => void") }], docs: "footer; receives a function that closes the drawer" }],
+  events: [{ name: "close", args: [], docs: "the drawer asks to be closed" }],
+});
+const dropdownMenu = contract(`${P}dropdown-menu`, "DropdownMenu", "A menu panel (role menu or listbox) for DropdownItem rows.", "an overlay positioned at its trigger: focus into the menu, arrow keys, Escape, outside click, Tab (moveFocus and dismissable of the utils)", {
+  props: [prop("width", union("dropdown-menu", "width"), "panel width", { default: defaultOf("dropdown-menu", "width") }), prop("label", "string"), prop("role", ts('"menu" | "listbox"'), "ARIA role", { default: "menu" }), prop("anchor", ts("HTMLElement | null"), "the trigger: clicks on it are not outside clicks"), prop("focusOnOpen", "boolean", "move focus into the menu on open")],
+  className: true,
+  children: true,
+  recipes: { dropdownMenu: "dropdown-menu" },
+  examples: recipeExamples("dropdown-menu", { width: "width" }),
+  events: [{ name: "close", args: [{ name: "reason", type: ts('"escape" | "outside" | "tab" | "select"') }], docs: "the menu asks to be closed, and why" }],
+});
+const popover = contract(`${P}popover`, "Popover", "A dialog panel anchored to a trigger.", "an overlay anchored to its trigger: open state, aria-haspopup wiring, Escape and outside dismissal (dismissable of the utils)", {
+  props: [prop("open", "boolean"), req("label", "string", "accessible name of the panel"), prop("width", ts('"sm" | "md" | "lg"')), prop("end", "boolean", "align to the right edge of the trigger")],
+  className: true,
+  slots: [{ name: "trigger", args: [{ name: "props", type: ts('{ id: string; "aria-haspopup": "dialog"; "aria-controls": string; onclick: () => void }') }], docs: "the trigger; receives the props it must spread" }, { name: "children", args: [{ name: "close", type: ts("() => void") }], docs: "panel content; receives a close function" }],
+});
+const selectMenu = contract(`${P}select-menu`, "SelectMenu", "A custom select: a button that opens a listbox of options.", "a listbox with keyboard selection, type-ahead and a hidden form value: state and focus handling (moveFocus and dismissable of the utils)", {
+  records: { SelectOption: fields(["value", "string"], ["label", "string"]) },
+  props: [req("options", ts("SelectOption[]")), prop("value", "string"), req("label", "string"), prop("name", "string", "form field name"), prop("width", ts('"auto" | "full"'))],
+  className: true,
+  events: [{ name: "change", args: [{ name: "value", type: "string" }], docs: "an option was chosen" }],
+});
+const toaster = contract(`${P}toaster`, "Toaster", "The stack of toasts. Any code pushes a toast (tone, title, text); the list shows the last four and each closes itself.", "a queue with timers (auto-close after 5 or 8 seconds) is shared state: a store in the app, here only the shape of a toast and the close label are fixed", {
+  records: { ToastItem: fields(["id", "number"], ["tone", "string"], ["title", "string"], ["text", "string", true]) },
+  props: [req("closeLabel", "string"), req("toasts", ts("ToastItem[]"), "the queue; tone is success, error or info")],
+  className: true,
+  events: [{ name: "dismiss", args: [{ name: "id", type: "number" }], docs: "a toast was closed" }],
+});
+
+export const patterns: OrganismSpec[] = [iconTab, iconTabs, switcher, switcherItem, editorTab, fileTree, fileTreeItem, navItemRow, navItem, sectionHead, sidebarPanel, dropdownItem, codeEditor, promptInput, smartbox, drawer, dropdownMenu, popover, selectMenu, toaster];
diff --git a/xgen/screens/src/authoring/components/people-parts.ts b/xgen/screens/src/authoring/components/people-parts.ts
new file mode 100644
index 0000000..fc36561
--- /dev/null
+++ b/xgen/screens/src/authoring/components/people-parts.ts
@@ -0,0 +1,73 @@
+// Parts of the people blocks: a member row of TeamGrid, and the job list of JobBoard as cards in two columns or a table with one row per job.
+import { at, cn, cond, each, eq, firstOf, ne, organism, ref, text, use, when, where } from "../../build";
+import type { OrganismSpec, Value } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted, strong, surface } from "../ux";
+import { menuEntry } from "./nav";
+
+const meta = (icon: string, value: string) =>
+  use("Group", { props: { Gap: "2", Align: "center" } }, use("LucideIcon", { props: { Name: icon, Size: 16 } }), use("Inline", {}, text(ref(value))));
+/** a square portrait (a plain rounded picture) of the given size class */
+export const portrait = (alt: string, size: Value) => organism("MediaFrame", { alt: ref(alt), ratio: "1/1", className: cn(size, "shrink-0") });
+/** a wrapping row of small secondary badges, one per string of the list */
+export const tags = (list: string) => use("Group", { props: { Gap: "2", Class: "flex-wrap" } }, each(ref(list), "k", ref("k"), use("Badge", { props: { Variant: "secondary", Size: "sm" } }, text(ref("k")))));
+const head = (label: string, cls = "py-2") => use("TableHeadCell", { props: { Scope: "col", Class: cls } }, text(ref(label)));
+
+/** one member beside a small portrait (the detailed, list and directory layouts of TeamGrid) */
+export const memberRow = spec("pattern.member-row", "MemberRow", "One member of TeamGrid beside a small portrait: the name, the role, then the department and the place (detailed, directory), the bio (detailed) and the skills (detailed, list).", {
+  typeImports: [{ from: "TeamGrid", names: ["Member"] }],
+  props: [
+    { name: "member", type: ts("Member"), required: true },
+    { name: "depts", type: ts("Record<string, string>"), required: true },
+    { name: "layout", type: tsOf("cards", "minimal", "detailed", "list", "directory"), default: "list", docs: "the TeamGrid layout; cards and minimal draw as a list row" },
+  ],
+  view: [use("Group", { props: { Gap: "4", Align: "start", Class: cond(eq(ref("layout"), "detailed"), surface("flex-col p-6"), cond(eq(ref("layout"), "directory"), surface("p-4"), "border-b border-border pb-4")) }, attrs: { "data-testid": "item" } },
+    portrait("member.name", cond(eq(ref("layout"), "detailed"), "size-16", "size-12")),
+    use("Stack", { props: { Gap: "2", Class: "min-w-0 flex-1" } },
+      use("Stack", { props: { Gap: "0" } }, strong(ref("member.name")), muted(ref("member.role"))),
+      when(ne(ref("layout"), "list"), [use("Group", { props: { Gap: "2", Align: "center", Class: "flex-wrap text-xs text-muted-foreground" } },
+        use("Badge", { props: { Variant: "outline", Size: "sm" } }, text(at(ref("depts"), ref("member.dept")))),
+        use("LucideIcon", { props: { Name: "map-pin", Size: 16 } }), use("Inline", {}, text(ref("member.location"))))]),
+      when(eq(ref("layout"), "detailed"), [muted(ref("member.bio"))]),
+      when(ne(ref("layout"), "directory"), [tags("member.skills")])))],
+});
+
+/** the jobs as cards or as a table (the grid and table layouts of JobBoard) */
+export const jobCards = spec("pattern.job-cards", "JobCards", "The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply) or as a table.", {
+  typeImports: [{ from: "JobBoard", names: ["Job", "Department", "JobLabels"] }],
+  props: [
+    { name: "jobs", type: ts("Job[]"), required: true },
+    { name: "departments", type: ts("Department[]"), required: true },
+    { name: "labels", type: ts("JobLabels"), required: true },
+    { name: "layout", type: tsOf("grid", "grouped", "table"), default: "grid" },
+    { name: "salary", type: tsOf("show", "hide"), default: "hide" },
+  ],
+  view: [when(eq(ref("layout"), "table"),
+    [use("Box", { props: { Class: "w-full overflow-x-auto rounded inset-ring inset-ring-border" } },
+      use("Table", { props: { Class: "w-full text-left text-sm" }, attrs: { "data-testid": "job-table" } },
+        use("TableCaption", { props: { Class: "sr-only" } }, text(ref("labels.caption"))),
+        use("TableHead", { props: { Class: "bg-muted" } }, use("TableRow", {},
+          head("labels.role", "px-4 py-2"), head("labels.team", "hidden py-2 md:table-cell"), head("labels.location", "hidden py-2 sm:table-cell"), head("labels.type"), when(eq(ref("salary"), "show"), [head("labels.salary", "hidden py-2 md:table-cell")]),
+          use("TableHeadCell", { props: { Scope: "col", Class: "py-2 pr-4" } }, use("Inline", { props: { Class: "sr-only" } }, text(ref("labels.apply")))))),
+        use("TableBody", {}, each(ref("jobs"), "j", ref("j.id"),
+          use("TableRow", { props: { Class: "border-t border-border" }, attrs: { "data-testid": "item" } },
+            use("TableCell", { props: { Class: "px-4 py-4 font-medium" } }, text(ref("j.title"))),
+            use("TableCell", { props: { Class: "hidden md:table-cell" } }, text(firstOf(where(ref("departments"), "id", ref("j.dept")), "name"))),
+            use("TableCell", { props: { Class: "hidden sm:table-cell" } }, text(ref("j.location"))),
+            use("TableCell", {}, text(ref("j.type"))),
+            when(eq(ref("salary"), "show"), [use("TableCell", { props: { Class: "hidden md:table-cell" } }, text(ref("j.salary")))]),
+            use("TableCell", { props: { Class: "pr-4 text-right" } }, menuEntry(ref("j.href"), { cls: "font-medium" }, text(ref("labels.apply")))))))))],
+    [use("Grid", { props: { Cols: "1-2", Class: "gap-4" }, attrs: { "data-testid": "items" } },
+      each(ref("jobs"), "j", ref("j.id"),
+        use("Stack", { props: { Gap: "4", Class: surface("p-6") }, attrs: { "data-testid": "item" } },
+          use("Stack", { props: { Gap: "2" } }, strong(ref("j.title"), "lg"),
+            use("Group", { props: { Gap: "4", Class: "flex-wrap text-sm text-muted-foreground" } }, meta("briefcase", "j.type"), meta("map-pin", "j.location"), meta("calendar", "j.posted"))),
+          when(eq(ref("salary"), "show"), [use("Text", { props: { Size: "base", Weight: "semibold" }, attrs: { "data-testid": "salary" } }, text(ref("j.salary")))]),
+          use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "mt-auto" } },
+            use("Badge", { props: { Variant: "secondary", Size: "default" } }, text(firstOf(where(ref("departments"), "id", ref("j.dept")), "name"))),
+            menuEntry(ref("j.href"), { cls: "inline-flex items-center gap-2 text-sm font-medium" }, text(ref("labels.apply")), use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } }))))))]),
+  ],
+});
+
+export const peopleParts: OrganismSpec[] = [memberRow, jobCards];
diff --git a/xgen/screens/src/authoring/components/post-showcase-parts.ts b/xgen/screens/src/authoring/components/post-showcase-parts.ts
new file mode 100644
index 0000000..acebf0d
--- /dev/null
+++ b/xgen/screens/src/authoring/components/post-showcase-parts.ts
@@ -0,0 +1,50 @@
+// Parts of PostShowcase: a small post card, a card with the text on a panel over the picture, and one featured post.
+import { cond, eq, ref, text, tpl, use, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted, surface } from "../ux";
+import { menuEntry } from "./nav";
+
+const types = [{ from: "PostCard", names: ["Post", "PostLabels"] }];
+const post = { name: "p", type: ts("Post"), required: true };
+const labels = { name: "labels", type: ts("PostLabels"), required: true, docs: "templates: minutes `{0} min read`, by `By {0}`; and the word of the read link" };
+const byline = use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(tpl("{0} · {1}", ref("p.author"), tpl(ref("labels.minutes"), ref("p.minutes")))));
+
+export const postMiniCard = spec("pattern.post-mini-card", "PostMiniCard", "A small post card of PostShowcase: the picture, the category, the title and the author with the reading time.", {
+  typeImports: types,
+  props: [post, labels],
+  view: [use("Stack", { props: { Gap: "2", Align: "stretch", Class: surface("p-2") }, attrs: { "data-testid": "post-mini" } },
+    organism("MediaFrame", { alt: ref("p.title"), ratio: "16/9" }),
+    use("Stack", { props: { Gap: "2", Align: "start", Class: "p-2" } },
+      use("Badge", { props: { Variant: "secondary", Size: "sm" } }, text(ref("p.category"))),
+      use("Title", { props: { As: 3, Size: "sm", Weight: "semibold" } }, text(ref("p.title"))), byline))],
+});
+
+export const postOverlayCard = spec("pattern.post-overlay-card", "PostOverlayCard", "A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and date, the title, the excerpt and a read link.", {
+  typeImports: types,
+  props: [post, labels, { name: "ratio", type: tsOf("4/3", "16/9"), default: "4/3" }],
+  view: [use("Box", { props: { Class: "relative overflow-hidden rounded" }, attrs: { "data-testid": "post-overlay" } },
+    organism("MediaFrame", { alt: ref("p.title"), ratio: ref("ratio"), className: cond(eq(ref("ratio"), "4/3"), "min-h-80", "min-h-64") }),
+    use("Stack", { props: { Gap: "2", Align: "start", Class: "absolute bottom-4 left-4 right-4 rounded bg-background p-4" } },
+      use("Group", { props: { Gap: "2", Align: "center" } }, use("Badge", { props: { Variant: "secondary", Size: "sm" } }, text(ref("p.category"))), muted(ref("p.date"), "xs")),
+      use("Title", { props: { As: 3, Size: "base", Weight: "semibold" } }, text(ref("p.title"))),
+      muted(ref("p.excerpt"), "sm", "line-clamp-2"),
+      menuEntry(ref("p.href"), { size: "sm", cls: "gap-2 text-sm font-medium", testid: "read" }, text(ref("labels.read")), use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } }))))],
+});
+
+export const postFeature = spec("pattern.post-feature", "PostFeature", "The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading time, and a wide read button.", {
+  typeImports: types,
+  props: [post, labels],
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch", Class: "border-t border-border pt-6" }, attrs: { "data-testid": "post-feature" } },
+    use("Badge", { props: { Variant: "secondary", Size: "sm", Class: "w-fit" } }, text(ref("p.category"))),
+    use("Title", { props: { As: 3, Size: "xl", Weight: "semibold" } }, text(ref("p.title"))),
+    muted(ref("p.excerpt")),
+    use("Group", { props: { Gap: "4", Align: "center" } },
+      organism("MediaFrame", { alt: ref("p.author"), ratio: "1/1", className: "size-10 shrink-0 rounded-full" }),
+      use("Stack", { props: { Gap: "0" } }, use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("p.author"))),
+        muted(tpl("{0} · {1}", ref("p.date"), tpl(ref("labels.minutes"), ref("p.minutes"))), "xs"))),
+    use("Button", { props: { Variant: "default", Size: "default", Href: ref("p.href"), Class: "w-full gap-2" }, attrs: { "data-testid": "action-primary" } }, text(ref("labels.read")), use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } })))],
+});
+
+export const postShowcaseParts: OrganismSpec[] = [postMiniCard, postOverlayCard, postFeature];
diff --git a/xgen/screens/src/authoring/components/post-split-parts.ts b/xgen/screens/src/authoring/components/post-split-parts.ts
new file mode 100644
index 0000000..a3c4db6
--- /dev/null
+++ b/xgen/screens/src/authoring/components/post-split-parts.ts
@@ -0,0 +1,72 @@
+// Parts of PostSplit: the reading figures, the author line or card, the tags, the outline beside a cover, and the actions.
+import { cn, cond, each, eq, ref, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec, Value, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted, surface } from "../ux";
+import { menuEntry } from "./nav";
+
+const types = [{ from: "PostCard", names: ["Post"] }, { from: "PostSplit", names: ["PostExtras", "PostSplitLabels"] }];
+const post = { name: "post", type: ts("Post"), required: true };
+const extras = { name: "extras", type: ts("PostExtras"), required: true, docs: "the author's role and bio, the reading figures, the tags and the outline" };
+const labels = { name: "labels", type: ts("PostSplitLabels"), required: true };
+const align = { name: "align", type: tsOf("start", "center"), default: "start" };
+/** a glyph and a short text */
+const fact = (icon: string, v: Value): ViewNode => use("Group", { props: { Gap: "2", Align: "center" } },
+  use("LucideIcon", { props: { Name: icon, Size: 16 } }), use("Text", { props: { Size: "sm" } }, text(v)));
+const iconButton = (icon: string, label: string, testid: string): ViewNode =>
+  use("Button", { props: { Variant: "outline", Size: "default", Layout: "icon", AriaLabel: ref(label) }, attrs: { "data-testid": testid } }, use("LucideIcon", { props: { Name: icon, Size: 16 } }));
+const button = (variant: string, icon: string, label: string, testid: string, cls = ""): ViewNode =>
+  use("Button", { props: { Variant: variant, Size: "default", Class: `gap-2 ${cls}`.trim() }, attrs: { "data-testid": testid } }, use("LucideIcon", { props: { Name: icon, Size: 16 } }), text(ref(label)));
+
+export const postStats = spec("pattern.post-stats", "PostStats", "The reading figures of a post: minutes to read, views and likes, each with its glyph.", {
+  typeImports: types,
+  props: [post, extras, labels, align],
+  view: [use("Group", { props: { Gap: "4", Align: "center", Justify: ref("align"), Class: "flex-wrap text-muted-foreground" }, attrs: { "data-testid": "post-stats" } },
+    fact("clock", tpl(ref("labels.minutes"), ref("post.minutes"))), fact("eye", tpl(ref("labels.views"), ref("extras.views"))), fact("heart", tpl(ref("labels.likes"), ref("extras.likes"))))],
+});
+
+export const postAuthor = spec("pattern.post-author", "PostAuthor", "The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line, a card, or a card with the bio.", {
+  typeImports: types,
+  props: [post, extras, labels,
+    { name: "mode", type: tsOf("line", "card", "bio"), default: "line" },
+    { name: "share", type: "boolean", default: false, docs: "share and save buttons instead of the date" }],
+  className: true,
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch", Class: cn(cond(eq(ref("mode"), "line"), "", surface("p-4")), ref("className")) }, attrs: { "data-testid": "post-author" } },
+    use("Group", { props: { Gap: "4", Align: "center" } },
+      organism("MediaFrame", { alt: ref("post.author"), ratio: "1/1", className: "size-10 shrink-0 rounded-full" }),
+      use("Stack", { props: { Gap: "0", Align: "start", Class: "min-w-0 flex-1 text-start" } },
+        use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("post.author"))), muted(ref("extras.role"), "xs")),
+      when(ref("share"), [use("Group", { props: { Gap: "2" } }, button("ghost", "share-2", "labels.share", "post-share"), button("ghost", "bookmark", "labels.save", "post-save"))],
+        [use("Box", { props: { Class: "text-muted-foreground" } }, fact("calendar", ref("post.date")))])),
+    when(eq(ref("mode"), "bio"), [muted(ref("extras.bio"))]))],
+});
+
+export const postTags = spec("pattern.post-tags", "PostTags", "The tags of a post as small badges in a wrapping row.", {
+  typeImports: [{ from: "NavBar", names: ["NavLink"] }],
+  props: [{ name: "tags", type: ts("NavLink[]"), required: true }, align],
+  view: [use("Group", { props: { Gap: "2", Justify: ref("align"), Class: "flex-wrap" } },
+    each(ref("tags"), "tag", ref("tag.id"), use("Badge", { props: { Variant: "secondary", Size: "sm" }, attrs: { "data-testid": "post-tag" } }, text(ref("tag.name")))))],
+});
+
+export const postOutline = spec("pattern.post-outline", "PostOutline", "The facts of a post in a column (author, date, minutes, views), then the related reading as links.", {
+  typeImports: types,
+  props: [post, extras, labels],
+  view: [use("Stack", { props: { Gap: "6", Align: "stretch" }, attrs: { "data-testid": "post-outline" } },
+    use("Stack", { props: { Gap: "2", Align: "start", Class: "text-muted-foreground" } },
+      fact("user", ref("post.author")), fact("calendar", ref("post.date")), fact("clock", tpl(ref("labels.minutes"), ref("post.minutes"))), fact("eye", tpl(ref("labels.views"), ref("extras.views")))),
+    use("Stack", { props: { Gap: "2", Align: "stretch", Class: "border-t border-border pt-4" } },
+      use("Text", { props: { Size: "xs", Weight: "medium", Class: "uppercase tracking-wide text-muted-foreground" } }, text(ref("labels.related"))),
+      each(ref("extras.outline"), "l", ref("l.id"), menuEntry(ref("l.href"), { size: "sm", cls: "text-sm font-medium", testid: "post-link" },
+        use("LucideIcon", { props: { Name: "chevron-right", Size: 16 } }), text(ref("l.name"))))))],
+});
+
+export const postActions = spec("pattern.post-actions", "PostActions", "The calls to action of a post header: share and save side by side, one wide read button, or a wide read button with share and save as icons.", {
+  typeImports: types,
+  props: [labels, { name: "mode", type: tsOf("pair", "wide", "icons"), default: "pair" }],
+  view: [when(eq(ref("mode"), "pair"), [use("Group", { props: { Gap: "2", Class: "flex-wrap" } }, button("default", "share-2", "labels.share", "action-primary"), button("outline", "bookmark", "labels.save", "post-save"))],
+    [use("Group", { props: { Gap: "2" } }, button("default", "book-open", "labels.read", "action-primary", "flex-1"),
+      when(eq(ref("mode"), "icons"), [iconButton("share-2", "labels.share", "post-share"), iconButton("bookmark", "labels.save", "post-save")]))])],
+});
+
+export const postSplitParts: OrganismSpec[] = [postStats, postAuthor, postTags, postOutline, postActions];
diff --git a/xgen/screens/src/authoring/components/product-parts.ts b/xgen/screens/src/authoring/components/product-parts.ts
new file mode 100644
index 0000000..386102b
--- /dev/null
+++ b/xgen/screens/src/authoring/components/product-parts.ts
@@ -0,0 +1,37 @@
+// Parts of ProductDetail: the price line (price, old price, badge) and the gallery (the featured picture and thumbnails).
+import { and, eq, gt, money, ref, text, use, when, organism } from "../../build";
+import { spec } from "../kit";
+import { tsOf } from "../props";
+
+/** the price line of ProductDetail: the price, the old price struck through, the badge */
+export const productPrice = spec("pattern.product-price", "ProductPrice", "The price line of a product page: the price (integer minor units in the currency), the old price (compare_at) struck through when higher, and the badge.", {
+  props: [
+    { name: "price", type: "number", required: true, docs: "integer minor units" },
+    { name: "compareAt", type: "number", docs: "the old price, same currency; shown only when higher than the price" },
+    { name: "currency", type: "string", required: true },
+    { name: "badge", type: "string", default: "", docs: "the label of the badge; empty: none" },
+    { name: "was", type: "string", required: true, docs: "the screen reader word before the old price" },
+  ],
+  view: [use("Group", { props: { Gap: "4", Align: "center", Class: "flex-wrap" } },
+    use("Text", { props: { Size: "4xl", Weight: "bold" } }, text(money(ref("price"), ref("currency")))),
+    // relative: the sr-only "Was" stays inside the old price
+    when(and(ref("compareAt"), gt(ref("compareAt"), ref("price"))), [use("Text", { props: { Tag: "del", Size: "lg", Class: "relative text-muted-foreground" }, attrs: { "data-testid": "compare-at" } },
+      use("Inline", { props: { Class: "sr-only" } }, text(ref("was"))), text(money(ref("compareAt"), ref("currency"))))]),
+    when(ref("badge"), [use("Badge", { props: { Variant: "default", Size: "default" } }, text(ref("badge")))]))],
+});
+
+/** the gallery of ProductDetail: the featured picture and the thumbnails */
+export const productGallery = spec("pattern.product-gallery", "ProductGallery", "The gallery of a product page: the picture (the file of the product's featured media, a placeholder without one) and optional thumbnails below.", {
+  props: [
+    { name: "name", type: "string", required: true, docs: "the product name: the alternative text" },
+    { name: "image", type: "string", docs: "the file of the featured media; none: the placeholder" },
+    { name: "thumbs", type: tsOf("none", "below"), default: "below" },
+  ],
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { "data-testid": "gallery" } },
+    organism("MediaFrame", { alt: ref("name"), src: ref("image"), ratio: "1/1" }),
+    // thumbnails: the featured picture first; the entry has no further media (no gallery field in the kind), so the others stay placeholders
+    when(eq(ref("thumbs"), "below"), [use("Grid", { props: { Cols: "3", Class: "gap-4" }, attrs: { "data-testid": "thumbs" } },
+      organism("MediaFrame", { alt: ref("name"), src: ref("image"), ratio: "1/1", className: "ring-2 ring-foreground" }),
+      organism("MediaFrame", { alt: ref("name"), ratio: "1/1" }),
+      organism("MediaFrame", { alt: ref("name"), ratio: "1/1" }))]))],
+});
diff --git a/xgen/screens/src/authoring/components/quote-split-parts.ts b/xgen/screens/src/authoring/components/quote-split-parts.ts
new file mode 100644
index 0000000..4688335
--- /dev/null
+++ b/xgen/screens/src/authoring/components/quote-split-parts.ts
@@ -0,0 +1,54 @@
+// Parts of QuoteSplit: the rating panel beside a quote, the logo tiles under it, and the figures above a grid of quotes.
+import { eachAt, lt, ref, text, tpl, use, when, organism } from "../../build";
+import { tsOf } from "../props";
+import type { OrganismSpec, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { muted, surface } from "../ux";
+
+const types = [{ from: "QuoteSplit", names: ["QuoteExtras"] }, { from: "TestimonialGrid", names: ["QuoteLabels"] }];
+const extras = { name: "extras", type: ts("QuoteExtras"), required: true, docs: "the figures, logos and rating summary" };
+/** the first `n` entries of a list */
+const first = (list: string, as: string, n: number, node: ViewNode): ViewNode => eachAt(ref(list), as, "i", ref(`${as}.id`), when(lt(ref("i"), n), [node]));
+
+export const quoteRatingPanel = spec("pattern.quote-rating-panel", "QuoteRatingPanel", "The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures.", {
+  typeImports: types,
+  props: [extras, { name: "labels", type: ts("QuoteLabels"), required: true }],
+  view: [use("Stack", { props: { Gap: "6", Align: "center", Class: surface("p-8 text-center") }, attrs: { "data-testid": "quote-rating" } },
+    use("Text", { props: { Size: "5xl", Weight: "bold" } }, text(ref("extras.score"))),
+    organism("Rating", { value: ref("extras.rating"), label: tpl(ref("labels.rating"), ref("extras.rating")), size: 20 }),
+    muted(ref("extras.reviews")),
+    use("Box", { props: { Class: "grid w-full grid-cols-2 gap-4 border-t border-border pt-6" } },
+      first("extras.stats", "s", 2, use("Stack", { props: { Gap: "0", Align: "center" }, attrs: { "data-testid": "quote-stat" } },
+        use("Text", { props: { Size: "2xl", Weight: "semibold" } }, text(ref("s.value"))), muted(ref("s.label"), "xs")))))],
+});
+
+export const quoteLogoTiles = spec("pattern.quote-logo-tiles", "QuoteLogoTiles", "Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit.", {
+  typeImports: types,
+  props: [extras],
+  view: [use("Box", { props: { Class: "grid grid-cols-2 gap-4" }, attrs: { "data-testid": "quote-logos" } },
+    first("extras.logos", "l", 4, use("Group", { props: { Gap: "2", Align: "center", Justify: "center", Class: surface("p-4 text-muted-foreground") }, attrs: { "data-testid": "quote-logo" } },
+      use("LucideIcon", { props: { Name: ref("l.icon"), Size: 20 } }), use("Text", { props: { Size: "sm", Weight: "semibold" } }, text(ref("l.name"))))))],
+});
+
+export const quoteFigures = spec("pattern.quote-figures", "QuoteFigures", "Three figures in a row above the quotes of QuoteSplit.", {
+  typeImports: types,
+  props: [extras],
+  view: [use("Box", { props: { Class: "grid grid-cols-3 gap-4 border-b border-border pb-8" }, attrs: { "data-testid": "quote-figures" } },
+    first("extras.stats", "s", 3, use("Stack", { props: { Gap: "0" }, attrs: { "data-testid": "quote-stat" } },
+      use("Text", { props: { Size: "3xl", Weight: "bold" } }, text(ref("s.value"))), muted(ref("s.label"), "xs"))))],
+});
+
+export const quoteSlot = spec("pattern.quote-slot", "QuoteSlot", "One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in a box that can span grid rows.", {
+  typeImports: [{ from: "TestimonialGrid", names: ["Quote", "QuoteLabels"] }],
+  props: [
+    { name: "q", type: ts("Quote"), required: true },
+    { name: "labels", type: ts("QuoteLabels"), required: true },
+    { name: "kind", type: tsOf("card", "plain"), default: "card" },
+    { name: "layout", type: tsOf("grid", "single", "stack"), default: "grid" },
+  ],
+  className: true,
+  view: [use("Box", { props: { Class: ref("className") }, attrs: { "data-testid": "quote" } },
+    organism("QuoteCard", { q: ref("q"), labels: ref("labels"), item: { kind: ref("kind"), avatar: "image", rating: "show", mark: "none" }, layout: ref("layout") }))],
+});
+
+export const quoteSplitParts: OrganismSpec[] = [quoteRatingPanel, quoteLogoTiles, quoteFigures, quoteSlot];
diff --git a/xgen/screens/src/authoring/components/shell-parts.ts b/xgen/screens/src/authoring/components/shell-parts.ts
new file mode 100644
index 0000000..7559dbd
--- /dev/null
+++ b/xgen/screens/src/authoring/components/shell-parts.ts
@@ -0,0 +1,112 @@
+// Parts of DashboardShell: the top bar, the sidebar in four shapes, the placeholder content and the footer.
+// Collapsing and expanding the sidebar is a port contract (the toggle event); the parts draw one static state.
+import { and, call, cn, cond, each, eq, gt, len, ref, text, use, when, organism } from "../../build";
+import type { OrganismSpec, Value, ViewNode } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted } from "../ux";
+import { navBlockOf } from "./landmarks";
+import { currentOf, menuEntry } from "./nav";
+
+const P = "pattern.";
+const types = [{ from: "DashboardShell", names: ["ShellNav"] }];
+const nav = { name: "nav", type: ts("ShellNav"), required: true, docs: "the brand, the links and the texts of the shell" };
+/** the brand mark; the name is hidden (still read) when `named` is false */
+const brand = (named: Value): ViewNode => use("Group", { props: { Gap: "2", Align: "center", Class: "shrink-0" }, attrs: { "data-testid": "brand" } },
+  use("LucideIcon", { props: { Name: "layers", Size: 24 } }), use("Text", { props: { Size: "base", Weight: "bold", Class: cond(named, "", "sr-only") } }, text(ref("nav.brand"))));
+/** one link of a list: the icon and the name (hidden when `named` is false), the current one marked */
+const item = (l: string, current: Value, named: Value): ViewNode => use("ListItem", {},
+  menuEntry(ref(`${l}.href`), { size: "sm", cls: cn("flex items-center gap-4 rounded py-2 text-sm", cond(named, "px-4", "justify-center px-2"), cond(eq(ref(`${l}.id`), current), "bg-muted font-medium", "")), current: currentOf(l, current), testid: "item" },
+    use("LucideIcon", { props: { Name: ref(`${l}.icon`), Size: 16 } }), use("Inline", { props: { Class: cond(named, "", "sr-only") } }, text(ref(`${l}.name`)))));
+/** a grey bar of a placeholder */
+const bar = (cls: string): ViewNode => use("Box", { props: { Class: cn("rounded bg-muted", cls) } });
+/** an empty card of the placeholder content */
+const panel = (cls: string, inner: ViewNode[] = [bar("h-4 w-1/3"), bar("flex-1")]): ViewNode =>
+  use("Box", { props: { Class: cn("flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border", cls) }, attrs: { "data-testid": "panel" } }, ...inner);
+
+/** the search field of the top bar */
+const palette = organism("SearchPalette", { label: ref("nav.search"), shortcut: ref("nav.shortcut") });
+
+export const shellTopbar = spec(`${P}shell-topbar`, "ShellTopbar", "The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar), an optional search field, and the signed-in person.", {
+  frame: true,
+  typeImports: types,
+  props: [
+    nav,
+    { name: "brand", type: tsOf("show", "hide"), default: "show" },
+    { name: "links", type: tsOf("show", "hide"), default: "hide" },
+    { name: "search", type: tsOf("show", "hide"), default: "show" },
+  ],
+  view: [use("Block", { props: { Tag: "header", Class: "flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6" }, attrs: { "data-testid": "topbar" } },
+    when(eq(ref("brand"), "show"), [brand(true)]),
+    when(and(eq(ref("links"), "show"), gt(len(ref("nav.links")), 0)), [navBlockOf(ref("nav.label"), "hidden lg:block", undefined,
+      use("List", { props: { Class: "m-0 flex list-none items-center gap-2 p-0" } }, each(ref("nav.links"), "l", ref("l.id"), item("l", ref("nav.current"), true))))]),
+    // beside the links the field keeps a fixed width at the end (from xl); alone it takes the free space up to max-w-sm
+    when(eq(ref("search"), "show"), [when(eq(ref("links"), "show"), [use("Box", { props: { Class: "ml-auto hidden w-64 shrink-0 xl:block" } }, palette)], [palette])]),
+    use("Group", { props: { Gap: "4", Align: "center", Class: cond(and(eq(ref("links"), "show"), eq(ref("search"), "show")), "shrink-0", "ml-auto shrink-0") }, attrs: { "data-testid": "user" } },
+      use("LucideIcon", { props: { Name: "bell", Size: 20, Class: "text-muted-foreground" } }),
+      organism("MediaFrame", { alt: ref("nav.userName"), ratio: "1/1", className: "size-8 shrink-0 rounded-full" }))),
+  ],
+});
+
+export const shellSidebar = spec(`${P}shell-sidebar`, "ShellSidebar", "The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read), collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a panel of the current section's links). side puts it at the start or the end.", {
+  frame: true,
+  typeImports: types,
+  props: [
+    nav,
+    { name: "mode", type: tsOf("wide", "rail", "collapsed", "twolevel", "none"), default: "wide", docs: "the DashboardShell sidebar; the shell draws no sidebar for none" },
+    { name: "side", type: tsOf("start", "end"), default: "start" },
+    { name: "brand", type: tsOf("show", "hide"), default: "show" },
+  ],
+  events: [{ name: "toggle", args: [], docs: "the expand button of the collapsed sidebar was pressed" }],
+  derived: [{ name: "named", value: eq(ref("mode"), "wide") }],
+  view: [use("Block", { props: { Tag: "aside", Class: cn("flex shrink-0 bg-card", cond(eq(ref("side"), "end"), "flex-row-reverse border-l border-border", "border-r border-border")) }, attrs: { "aria-label": ref("nav.label"), "data-testid": "sidebar", "data-mode": ref("mode") } },
+    use("Box", { props: { Class: cn("flex flex-col gap-6 py-4", cond(ref("named"), "w-64 px-4", "w-16 items-center px-2")) } },
+      when(eq(ref("brand"), "show"), [brand(ref("named"))]),
+      when(gt(len(ref("nav.links")), 0), [navBlockOf(ref("nav.label"), "flex-1", undefined,
+        use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" }, attrs: { "data-testid": "items" } }, each(ref("nav.links"), "l", ref("l.id"), item("l", ref("nav.current"), ref("named")))))]),
+      when(eq(ref("mode"), "collapsed"), [use("ButtonPlain", { props: { Type: "button", Class: "inline-flex size-10 items-center justify-center rounded text-muted-foreground" }, on: { click: call("emit.toggle") }, attrs: { "aria-label": ref("nav.expand"), "aria-expanded": cond(eq(ref("mode"), "wide"), "true", "false"), "data-testid": "toggle" } },
+        use("LucideIcon", { props: { Name: "panel-left", Size: 20 } }))])),
+    when(and(eq(ref("mode"), "twolevel"), gt(len(ref("nav.sub")), 0)), [use("Box", { props: { Class: cn("flex w-56 flex-col gap-4 px-4 py-6", cond(eq(ref("side"), "end"), "border-r border-border", "border-l border-border")) }, attrs: { "data-testid": "subnav" } },
+      use("Text", { props: { Size: "sm", Weight: "semibold", Class: "px-4" } }, text(ref("nav.subTitle"))),
+      navBlockOf(ref("nav.subTitle"), undefined, undefined,
+        use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-0" } }, each(ref("nav.sub"), "s", ref("s.id"), item("s", ref("nav.subCurrent"), true)))))]),
+  )],
+});
+
+export const shellContent = spec(`${P}shell-content`, "ShellContent", "The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one), list (a toolbar over a card of rows). The cards are hidden from assistive technology.", {
+  props: [
+    { name: "title", type: "string", required: true },
+    { name: "titleId", type: "string", required: true },
+    { name: "level", type: ts("1 | 2"), default: 2 },
+    { name: "content", type: tsOf("grid", "split", "list"), default: "grid" },
+  ],
+  view: [use("Stack", { props: { Gap: "6", Align: "stretch", Class: "flex-1 p-6" }, attrs: { "data-testid": "content" } },
+    use("Group", { props: { Gap: "4", Align: "center", Justify: "between" } },
+      use("Title", { props: { As: ref("level"), Size: "2xl", Weight: "semibold" }, attrs: { id: ref("titleId") } }, text(ref("title"))),
+      use("Box", { props: { Class: "h-10 w-32 rounded bg-muted" }, attrs: { "aria-hidden": "true" } })),
+    use("Box", { props: { Class: "flex flex-1 flex-col gap-4" }, attrs: { "aria-hidden": "true", "data-testid": "panels" } },
+      when(eq(ref("content"), "grid"), [
+        use("Box", { props: { Class: "grid grid-cols-2 gap-4 lg:grid-cols-4" } }, panel("h-24"), panel("h-24"), panel("h-24"), panel("h-24")),
+        panel("min-h-64 flex-1")]),
+      when(eq(ref("content"), "split"), [
+        use("Box", { props: { Class: "grid grid-cols-1 gap-4 lg:grid-cols-3" } }, panel("h-64 lg:col-span-2"), panel("h-64")),
+        panel("min-h-40 flex-1")]),
+      when(eq(ref("content"), "list"), [
+        use("Group", { props: { Gap: "4", Align: "center" } }, bar("h-10 w-64"), bar("h-10 w-24"), bar("ml-auto h-10 w-32")),
+        panel("flex-1", [bar("h-8"), bar("h-8"), bar("h-8"), bar("h-8"), bar("h-8"), bar("h-8")])])),
+  )],
+});
+
+export const shellFooter = spec(`${P}shell-footer`, "ShellFooter", "The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the whole shell (full).", {
+  frame: true,
+  typeImports: types,
+  props: [nav, { name: "place", type: tsOf("full", "inset"), default: "full" }],
+  view: [use("Block", { props: { Tag: "footer", Class: cn("flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4", cond(eq(ref("place"), "full"), "bg-card", "")) }, attrs: { "data-testid": "footer", "data-place": ref("place") } },
+    muted(ref("nav.copyright"), "xs"),
+    when(gt(len(ref("nav.footer")), 0), [navBlockOf(ref("nav.footerLabel"), undefined, undefined,
+      use("List", { props: { Class: "m-0 flex list-none items-center gap-4 p-0" } }, each(ref("nav.footer"), "f", ref("f.id"),
+        use("ListItem", {}, menuEntry(ref("f.href"), { variant: "muted", size: "sm", cls: "text-xs text-muted-foreground" }, text(ref("f.name")))))))]),
+  )],
+});
+
+export const shellParts: OrganismSpec[] = [shellTopbar, shellSidebar, shellContent, shellFooter];
diff --git a/xgen/screens/src/authoring/components/shop-parts.ts b/xgen/screens/src/authoring/components/shop-parts.ts
new file mode 100644
index 0000000..50cd93b
--- /dev/null
+++ b/xgen/screens/src/authoring/components/shop-parts.ts
@@ -0,0 +1,78 @@
+// The parts of the shop blocks that are too long to sit inside them: the offer picture of the store hero, the table of delivery
+// zones, and the filled body of the cart drawer.
+import { cond, tpl, each, eachAt, eq, money, mul, ref, str, text, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted, strong } from "../ux";
+
+/** an icon in a small muted square */
+const iconSquare = (icon: string) =>
+  use("Box", { props: { Class: "flex size-10 shrink-0 items-center justify-center rounded bg-muted" } }, use("LucideIcon", { props: { Name: ref(icon), Size: 20 } }));
+const head = (label: string, cls = "py-2") => use("TableHeadCell", { props: { Scope: "col", Class: cls } }, text(ref(label)));
+
+/** the picture of the overlay hero with the offer card floating on it */
+const offerMedia = spec("pattern.offer-media", "OfferMedia", "The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats over the picture).", {
+  typeImports: [{ from: "StoreHero", names: ["OfferCard"] }],
+  props: [
+    { name: "alt", type: "string", required: true, docs: "accessible name of the picture" },
+    { name: "card", type: ts("OfferCard"), required: true },
+  ],
+  view: [use("Box", { props: { Class: "relative" }, attrs: { "data-testid": "hero-media" } },
+    organism("MediaFrame", { alt: ref("alt"), ratio: "4/3" }),
+    use("Group", { props: { Gap: "4", Align: "start", Class: "absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg" }, attrs: { "data-testid": "offer-card" } },
+      iconSquare("card.icon"),
+      use("Stack", { props: { Gap: "0" } }, strong(ref("card.title"), "sm"), muted(ref("card.text"), "xs"))))],
+});
+
+/** the table layout of ZoneTable: one row per zone */
+const zoneRows = spec("pattern.zone-rows", "ZoneRows", "The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the minimum order, the time and an express badge.", {
+  typeImports: [{ from: "ZoneTable", names: ["Zone", "ZoneLabels"] }],
+  props: [
+    { name: "zones", type: ts("Zone[]"), required: true },
+    { name: "labels", type: ts("ZoneLabels"), required: true },
+  ],
+  view: [use("Box", { props: { Class: "w-full overflow-x-auto rounded inset-ring inset-ring-border" } },
+    use("Table", { props: { Class: "w-full text-left text-sm" }, attrs: { "data-testid": "zone-table" } },
+      use("TableCaption", { props: { Class: "sr-only" } }, text(ref("labels.caption"))),
+      use("TableHead", { props: { Class: "bg-muted" } }, use("TableRow", {},
+        head("labels.zone", "px-4 py-2"), head("labels.price"), head("labels.freeFrom"), head("labels.minOrder", "hidden py-2 md:table-cell"), head("labels.time"), head("labels.express", "hidden py-2 pr-4 sm:table-cell"))),
+      use("TableBody", {}, each(ref("zones"), "z", ref("z.id"),
+        use("TableRow", { props: { Class: "border-t border-border" }, attrs: { "data-testid": "item" } },
+          use("TableCell", { props: { Class: "px-4 py-4" } }, use("Stack", { props: { Gap: "0" } }, strong(ref("z.name"), "sm"), muted(ref("z.area"), "xs"))),
+          use("TableCell", { props: { Class: "font-medium" } }, text(money(ref("z.price"), ref("z.currency")))),
+          use("TableCell", {}, text(money(ref("z.freeFrom"), ref("z.currency")))),
+          use("TableCell", { props: { Class: "hidden md:table-cell" } }, text(money(ref("z.minOrder"), ref("z.currency")))),
+          use("TableCell", {}, text(ref("z.time"))),
+          use("TableCell", { props: { Class: "hidden pr-4 sm:table-cell" } }, when(ref("z.express"), [use("Badge", { props: { Variant: "secondary", Size: "default" } }, text(ref("z.express")))])))))))],
+});
+
+const drawerLines = spec("pattern.drawer-lines", "DrawerLines", "The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal and total and the button.", {
+  typeImports: [{ from: "CartList", names: ["CartLine", "CartLabels"] }, { from: "OrderSummary", names: ["SummaryRow"] }, { from: "CartDrawer", names: ["DrawerLabels"] }],
+  props: [
+    { name: "lines", type: ts("CartLine[]"), required: true },
+    { name: "rows", type: ts("SummaryRow[]"), required: true },
+    { name: "labels", type: ts("CartLabels"), required: true },
+    { name: "drawer", type: ts("DrawerLabels"), required: true },
+    { name: "media", type: tsOf("image", "none"), default: "image" },
+    { name: "field", type: "string", default: "qty", docs: "prefix of the quantity field names (one name per line: <field>-<line id>)" },
+  ],
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch", Class: "flex-1 p-4" }, attrs: { "data-testid": "lines" } },
+    each(ref("lines"), "line", ref("line.id"),
+      use("Group", { props: { Gap: "4", Align: "start" }, attrs: { "data-testid": "item" } },
+        when(eq(ref("media"), "image"), [organism("MediaFrame", { alt: ref("line.name"), ratio: "1/1", className: "size-16 shrink-0" })]),
+        use("Stack", { props: { Gap: "2", Align: "stretch", Class: "flex-1" } },
+          use("Group", { props: { Gap: "2", Justify: "between", Align: "start" } }, strong(ref("line.name"), "sm"), use("Inline", { props: { Class: "text-sm font-medium" } }, text(money(mul(ref("line.price"), ref("line.qty")), ref("line.currency"))))),
+          muted(ref("line.variant"), "xs"),
+          organism("NumberField", { value: str(ref("line.qty")), name: tpl("{0}-{1}", ref("field"), ref("line.id")), min: "1", label: ref("labels.qty"), decrease: ref("labels.decrease"), increase: ref("labels.increase") }))))),
+            use("Stack", { props: { Gap: "4", Align: "stretch", Class: "border-t border-border p-4" } },
+    use("Stack", { props: { Gap: "2", Align: "stretch", Class: "rounded bg-muted p-4" }, attrs: { "data-testid": "progress" } },
+      use("Text", { props: { Size: "sm" } }, text(ref("drawer.progress"))), use("Progress", { props: { Value: "96", Max: "100" }, attrs: { "aria-label": ref("drawer.progress") } })),
+    use("List", { props: { Tag: "ul", Class: "flex flex-col gap-2" } },
+      eachAt(ref("rows"), "row", "i", ref("row.id"),
+        when(cond(ref("row.strong"), true, eq(ref("i"), 0)), [use("ListItem", { props: { Class: cond(ref("row.strong"), "flex justify-between text-base font-bold", "flex justify-between text-sm text-muted-foreground") } },
+          use("Inline", {}, text(ref("row.label"))), use("Inline", {}, text(money(ref("row.amount"), ref("row.currency")))))]))),
+    use("Button", { props: { Variant: "default", Size: "lg", Class: "w-full" }, attrs: { "data-testid": "checkout" } }, text(ref("labels.checkout"))))],
+});
+
+export const shopParts: OrganismSpec[] = [offerMedia, zoneRows, drawerLines];
diff --git a/xgen/screens/src/authoring/components/story-tabs-parts.ts b/xgen/screens/src/authoring/components/story-tabs-parts.ts
new file mode 100644
index 0000000..3730af9
--- /dev/null
+++ b/xgen/screens/src/authoring/components/story-tabs-parts.ts
@@ -0,0 +1,28 @@
+// Parts of StoryTabs: the panel of the active step and the row of dots under the carousel picture.
+import { add, cn, cond, each, eq, len, ref, str, text, tpl, use } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { spec, ts } from "../kit";
+import { muted, strong, surface } from "../ux";
+
+const types = [{ from: "MilestoneTimeline", names: ["Milestone"] }, { from: "StoryTabs", names: ["StoryLabels"] }];
+
+export const storyPanel = spec("pattern.story-panel", "StoryPanel", "The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag in a muted box.", {
+  typeImports: types,
+  props: [{ name: "s", type: ts("Milestone"), required: true }, { name: "index", type: "number", required: true, docs: "position of the step, from 0" },
+    { name: "total", type: "number", required: true }, { name: "labels", type: ts("StoryLabels"), required: true }],
+  view: [use("Stack", { props: { Gap: "4", Align: "stretch", Class: surface("p-6") }, attrs: { "data-testid": "story-panel" } },
+    use("Group", { props: { Gap: "2", Align: "center" } }, use("Badge", { props: { Variant: "secondary", Size: "sm" } }, text(ref("s.date"))),
+      muted(tpl(ref("labels.step"), str(add(ref("index"), 1)), str(ref("total"))), "xs")),
+    use("Title", { props: { As: 3, Size: "xl", Weight: "semibold" } }, text(ref("s.title"))),
+    muted(ref("s.text")),
+    use("Box", { props: { Class: "rounded bg-muted p-4" } }, strong(ref("s.tag"), "sm")))],
+});
+
+export const storyDots = spec("pattern.story-dots", "StoryDots", "One dot per step of StoryTabs; the dot of the active step is filled.", {
+  typeImports: types,
+  props: [{ name: "steps", type: ts("Milestone[]"), required: true }, { name: "active", type: "string", required: true }],
+  view: [use("Group", { props: { Gap: "2", Align: "center" } },
+    each(ref("steps"), "s", ref("s.id"), use("Inline", { props: { Class: cn("size-2 rounded-full", cond(eq(ref("s.id"), ref("active")), "bg-primary", "bg-border")) }, attrs: { "data-testid": "story-dot" } })))],
+});
+
+export const storyTabsParts: OrganismSpec[] = [storyPanel, storyDots];
diff --git a/xgen/screens/src/authoring/components/visuals.ts b/xgen/screens/src/authoring/components/visuals.ts
new file mode 100644
index 0000000..923d0ae
--- /dev/null
+++ b/xgen/screens/src/authoring/components/visuals.ts
@@ -0,0 +1,28 @@
+// Visual patterns that stand in for product pictures: a terminal window with static lines (the typing is a port contract, see contracts.ts).
+import { cn, cond, each, eq, ref, text, use, when } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { fields, spec, ts } from "../kit";
+
+const P = "pattern.";
+
+const codeWindow = spec(`${P}code-window`, "CodeWindow", "A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).", {
+  records: { CodeLine: fields(["id", "string"], ["text", "string"], ["kind", "string"]) },
+  props: [
+    { name: "title", type: "string", required: true, docs: "name of the window, also its accessible name" },
+    { name: "prompt", type: "string", required: true, docs: "the mark before a command line" },
+    { name: "lines", type: ts("CodeLine[]"), required: true },
+  ],
+  className: true,
+  view: [
+    use("Box", { props: { Class: cn("w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border", ref("className")) }, attrs: { role: "group", "aria-label": ref("title"), "data-slot": "code-window" } },
+      use("Box", { props: { Class: "flex items-center border-b border-border px-4 py-2" } },
+        use("Text", { props: { Size: "xs", Class: "text-muted-foreground" } }, text(ref("title")))),
+      use("List", { props: { Class: "m-0 flex list-none flex-col gap-2 p-4 font-mono text-sm" } },
+        each(ref("lines"), "line", ref("line.id"),
+          use("ListItem", { props: { Class: cn("flex gap-2", cond(eq(ref("line.kind"), "command"), "text-foreground", "text-muted-foreground")) }, attrs: { "data-kind": ref("line.kind") } },
+            when(eq(ref("line.kind"), "command"), [use("Inline", { props: { Class: "select-none text-muted-foreground" } }, text(ref("prompt")))]),
+            use("Inline", {}, text(ref("line.text"))))))),
+  ],
+});
+
+export const visualPatterns: OrganismSpec[] = [codeWindow];
diff --git a/xgen/screens/src/authoring/components/work-parts.ts b/xgen/screens/src/authoring/components/work-parts.ts
new file mode 100644
index 0000000..38caca6
--- /dev/null
+++ b/xgen/screens/src/authoring/components/work-parts.ts
@@ -0,0 +1,39 @@
+// The project tiles of ProjectGrid: cards with tags and links, a compact grid, captions over the pictures, or a bento with one big project.
+import { and, cn, cond, each, eachAt, eq, ne, ref, text, tpl, use, when, organism } from "../../build";
+import type { OrganismSpec } from "../../ir";
+import { spec, ts } from "../kit";
+import { tsOf } from "../props";
+import { muted, surface } from "../ux";
+import { articleBlockOf } from "./landmarks";
+import { menuEntry } from "./nav";
+
+const tags = (list: string) => use("Group", { props: { Gap: "2", Class: "flex-wrap" } }, each(ref(list), "k", ref("k"), use("Badge", { props: { Variant: "secondary", Size: "sm" } }, text(ref("k")))));
+
+export const projectTiles = spec("pattern.project-tiles", "ProjectTiles", "The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags, two links), compact cards in four columns, captions over the pictures, or a bento where the first project takes a big tile.", {
+  typeImports: [{ from: "ProjectGrid", names: ["Project", "ProjectLabels"] }],
+  props: [
+    { name: "projects", type: ts("Project[]"), required: true },
+    { name: "labels", type: ts("ProjectLabels"), required: true },
+    { name: "layout", type: tsOf("cards", "compact", "overlay", "bento", "list"), default: "cards" },
+  ],
+  derived: [
+    { name: "over", value: cond(eq(ref("layout"), "overlay"), true, eq(ref("layout"), "bento")) },
+  ],
+  view: [use("Box", { props: { Class: cond(eq(ref("layout"), "compact"), "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3") }, attrs: { "data-testid": "items" } },
+    eachAt(ref("projects"), "p", "i", ref("p.id"),
+      articleBlockOf(cn("flex flex-col gap-4", cond(ref("over"), "relative", surface("p-4")), cond(and(eq(ref("layout"), "bento"), eq(ref("i"), 0)), "sm:col-span-2 lg:row-span-2", "")), "item",
+        use("Box", { props: { Class: cond(ref("over"), "h-full", "relative") } },
+          organism("MediaFrame", { alt: ref("p.title"), ratio: cond(eq(ref("layout"), "compact"), "1/1", cond(ref("over"), "3/4", "4/3")), className: cond(ref("over"), "h-full", "") }),
+          when(and(ref("p.featured"), ne(ref("layout"), "compact")), [use("Badge", { props: { Variant: "default", Size: "default", Class: "absolute left-4 top-4" }, attrs: { "data-testid": "featured" } }, text(ref("labels.featured")))])),
+        use("Stack", { props: { Gap: "2", Align: "stretch", Class: cond(ref("over"), "absolute right-4 bottom-4 left-4 rounded bg-background p-4", "") } },
+          muted(tpl("{0}, {1}", ref("p.category"), ref("p.year")), "xs"),
+          use("Title", { props: { As: 3, Size: cond(eq(ref("layout"), "compact"), "sm", "lg"), Weight: "semibold" } }, text(ref("p.title"))),
+          when(ne(ref("layout"), "compact"), [muted(ref("p.summary"))]),
+          when(eq(ref("layout"), "cards"), [tags("p.tags"),
+            use("Group", { props: { Gap: "4", Class: "pt-2" } },
+              menuEntry(ref("p.href"), { cls: "inline-flex items-center gap-2 text-sm font-medium" }, text(ref("labels.case")), use("LucideIcon", { props: { Name: "arrow-right", Size: 16 } })),
+              menuEntry(ref("p.href"), { cls: "inline-flex items-center gap-2 text-sm font-medium" }, text(ref("labels.view")), use("LucideIcon", { props: { Name: "external-link", Size: 16 } })))]))))),
+  ],
+});
+
+export const workParts: OrganismSpec[] = [projectTiles];
diff --git a/xgen/screens/src/authoring/forms.ts b/xgen/screens/src/authoring/forms.ts
new file mode 100644
index 0000000..aa5e07d
--- /dev/null
+++ b/xgen/screens/src/authoring/forms.ts
@@ -0,0 +1,33 @@
+// Helpers for the organisms that hold a form: ids that tie a label to its control, a field with an input, the buttons.
+import { cn, cond, ref, text, tpl, use, organism } from "../build";
+import type { Value, ViewNode } from "../ir";
+
+/** children of an organism that takes `children` */
+export const kids = (...n: ViewNode[]) => ({ slots: { children: { args: [] as string[], do: n } } });
+/** the id of a control: `<id>-<name>` */
+export const fid = (name: string): Value => tpl(`{0}-${name}`, ref("id"));
+/** a labelled single-line field */
+export const inputField = (name: string, type: string, label: Value, auto?: Value, scoped = false): ViewNode =>
+  organism("Field", { label, htmlFor: fid(name) }, kids(use("Input", { props: { Type: type, Name: scoped ? fid(name) : name, ...(auto === undefined ? {} : { Autocomplete: auto }) }, attrs: { id: fid(name), "data-testid": "field" } })));
+/** (a field outside a form takes its id as its name, `scoped`, so the name stays unique on the page) */
+/** a labelled multi-line field */
+export const textField = (name: string, label: Value): ViewNode =>
+  organism("Field", { label, htmlFor: fid(name) }, kids(use("Textarea", { props: { Rows: 4, Name: name }, attrs: { id: fid(name), "data-testid": "field" } })));
+/** a checkbox with its label on the right */
+export const checkRow = (name: string, label: Value, extra: Value = ""): ViewNode =>
+  use("Group", { props: { Gap: "2", Align: "center", Class: cn("w-fit", extra) } },
+    use("Checkbox", { props: { Name: name }, attrs: { id: fid(name) } }),
+    use("Label", { props: { HTMLFor: fid(name), Class: "text-sm" } }, text(label)));
+/** a switch with its label */
+export const switchRow = (name: string, label: Value): ViewNode =>
+  use("Group", { props: { Gap: "4", Align: "center", Justify: "between" } },
+    use("Label", { props: { HTMLFor: fid(name), Class: "text-sm" } }, text(label)),
+    use("Switch", { props: { Name: name }, attrs: { id: fid(name) } }));
+
+/** an email field and a button on one row (or a column): the sign-up used by the hero, the call to action and the footer */
+export const emailRow = (label: Value, submit: Value, center: Value) =>
+  use("Form", { props: { Method: "dialog", Class: cn("w-full max-w-md", cond(center, "mx-auto", "")) }, attrs: { "data-testid": "email-form" } },
+    use("Label", { props: { HTMLFor: fid("email"), Class: "sr-only" } }, text(label)),
+    use("Group", { props: { Gap: "2", Align: "start", Class: "w-full flex-wrap" } },
+      use("Input", { props: { Type: "email", Name: "email", Class: "min-w-0 flex-1" }, attrs: { id: fid("email"), "data-testid": "field" } }),
+      use("Button", { props: { Variant: "default", Size: "default", Type: "submit" }, attrs: { "data-testid": "submit" } }, text(submit))));
diff --git a/xgen/screens/src/authoring/gallery/block-kit.ts b/xgen/screens/src/authoring/gallery/block-kit.ts
new file mode 100644
index 0000000..39918d0
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/block-kit.ts
@@ -0,0 +1,99 @@
+// The helper every block file uses. A block names an organism and the axes (props of the organism with a union type); the allowed values, the
+// defaults and the patterns it is made of are read from the organism, so a block cannot disagree with it. Variants are rows of data.
+import { ref } from "../../build";
+import { axisField } from "../../compose";
+import type { BlockFact, BlockSpec, OrganismSpec, SourceSpec, Value } from "../../ir";
+
+export type Source = SourceSpec & { as: string };
+/** a reference into the content dictionary */
+export const t = (key: string): Value => ref(`ui.${key}`);
+
+/** the string literals of a TS union type: `"a" | "b"` (numbers count too); null for any other type */
+export function literalsOf(tsType: string): string[] | null {
+  const out: string[] = [];
+  for (const p of tsType.split("|").map((x) => x.trim())) {
+    const m = p.match(/^"([^"]*)"$/);
+    if (m) out.push(m[1]!);
+    else if (/^-?\d+$/.test(p)) out.push(p);
+    else return null;
+  }
+  return out;
+}
+
+/** names of the organisms a list of view nodes draws, through every nested slot and branch */
+export function organismsIn(node: unknown, acc = new Set<string>()): Set<string> {
+  if (Array.isArray(node)) node.forEach((n) => organismsIn(n, acc));
+  else if (node && typeof node === "object") {
+    const o = node as Record<string, unknown>;
+    if (typeof o["organism"] === "string") acc.add(o["organism"]);
+    Object.values(o).forEach((v) => organismsIn(v, acc));
+  }
+  return acc;
+}
+
+/** a variant: id, label, the axes it sets, optional case copy (props) */
+export type VariantDef = [id: string, label: string, set?: Record<string, string>, props?: Record<string, Value>];
+
+export interface BlockDef {
+  key: string;
+  theme: BlockSpec["theme"];
+  group: string;
+  name: string;
+  docs: string;
+  organism: string;
+  /** a second organism for the variants that set `axis` to values[1] (HeroPrompt for chrome "nav") */
+  alt?: BlockSpec["alt"];
+  fit?: "section" | "card";
+  /** the props of the organism that are axes (or fields of a grouped prop: `media.kind`), in the order they are shown */
+  axes: string[];
+  variants: VariantDef[];
+  events?: Record<string, string>;
+  facts?: BlockFact[];
+  data?: Source[];
+  sample: Record<string, Value>;
+}
+
+export interface BlockTexts { name: string; docs: string; variants: Record<string, string> }
+
+export function makeDefine(organisms: OrganismSpec[], patterns: Set<string>) {
+  const byName = new Map(organisms.map((o) => [o.name, o]));
+  return (d: BlockDef): { block: BlockSpec; texts: BlockTexts } => {
+    const org = byName.get(d.organism);
+    if (!org) throw new Error(`block ${d.key}: no organism ${d.organism}`);
+    const axes: Record<string, string[]> = {};
+    const defaults: Record<string, string> = {};
+    for (const a of d.axes) {
+      if (d.alt?.axis === a) { axes[a] = [...d.alt.values]; defaults[a] = d.alt.values[0]; continue; }
+      const field = axisField(org, a, Object.fromEntries(byName));
+      const lits = field ? literalsOf(field.ts) : null;
+      if (!lits) throw new Error(`block ${d.key}: axis ${a} is not a union prop (or union field of a grouped prop) of ${d.organism}`);
+      axes[a] = lits;
+      defaults[a] = String(field!.default ?? lits[0]);
+    }
+    // the slots: the components (parts and patterns, by the tier of their id) the organism draws
+    const tierOf = (n: string): string => organisms.find((o) => o.name === n)?.id.split(".")[0] ?? "";
+    const views = [org.view, ...(d.alt ? [byName.get(d.alt.organism)?.view ?? []] : [])];
+    const used = [...organismsIn(views)].filter((n) => patterns.has(n) || tierOf(n) === "part" || tierOf(n) === "pattern").sort();
+    const block: BlockSpec = {
+      $schema: "../../schema/schemas/block.schema.json",
+      specVersion: 1,
+      id: `block.${d.key}`,
+      name: d.name,
+      docs: d.docs,
+      theme: d.theme,
+      group: d.group,
+      ...(d.fit ? { fit: d.fit } : {}),
+      organism: d.organism,
+      ...(d.alt ? { alt: d.alt } : {}),
+      axes,
+      defaults,
+      variants: d.variants.map(([id, , set, props]) => ({ id, set: set ?? {}, ...(props ? { props } : {}) })),
+      slots: used,
+      ...(d.events ? { events: d.events } : {}),
+      ...(d.facts ? { facts: d.facts } : {}),
+      data: d.data ?? [],
+      sample: { props: d.sample },
+    };
+    return { block, texts: { name: d.name, docs: d.docs, variants: Object.fromEntries(d.variants.map(([id, label]) => [id, label])) } };
+  };
+}
diff --git a/xgen/screens/src/authoring/gallery/blocks-commerce.ts b/xgen/screens/src/authoring/gallery/blocks-commerce.ts
new file mode 100644
index 0000000..5f3e06b
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-commerce.ts
@@ -0,0 +1,101 @@
+// Commerce blocks: the storefront, from categories to order history.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const categories = define({
+  key: "categories", theme: "commerce", group: "catalog", name: "Category navigation", docs: "Categories as chips, a bar, a side list, tiles, or chips under a toolbar.",
+  organism: "CategoryNav", axes: ["layout", "count", "icon", "density"], data: [d.categories],
+  variants: [
+    ["chips", "Chips"],
+    ["bar", "Bar with an underline", { layout: "bar" }],
+    ["sidebar", "Side list", { layout: "sidebar" }],
+    ["chipsPlain", "Chips, names only", { count: "hide", icon: "hide" }],
+    ["barCompact", "Bar, compact, no icons", { layout: "bar", icon: "hide", density: "compact" }],
+    ["tiles", "Tiles with a big icon", { layout: "tiles" }],
+    ["toolbar", "Chips under a toolbar", { layout: "toolbar", icon: "hide" }],
+  ],
+  sample: { label: t("commerce.nav.label"), categories: ref("categories"), current: "category-all", tools: t("commerce.tools") },
+});
+
+const products = define({
+  key: "products", theme: "commerce", group: "catalog", name: "Product grid", docs: "Products as cards in a grid, a list or a rail that scrolls sideways.",
+  organism: "ProductGrid", axes: ["layout", "cols", "ratio", "rating", "action", "tone", "density"], data: [d.products],
+  variants: [
+    ["grid3", "Grid, three columns"],
+    ["grid4", "Grid, four columns, square pictures", { cols: "1-4", ratio: "1/1" }],
+    ["grid2", "Grid, two columns, tall pictures", { cols: "1-2", ratio: "3/4" }],
+    ["list", "List of horizontal cards", { layout: "list" }],
+    ["catalog", "Compact catalog, no rating", { cols: "1-4", ratio: "1/1", rating: "hide", density: "compact" }],
+    ["browse", "Browse only, muted", { action: "none", tone: "muted" }],
+    ["showcase", "Showcase, tall pictures, roomy", { ratio: "3/4", density: "roomy" }],
+    ["rail", "Rail that scrolls sideways", { layout: "rail" }],
+    ["railCompact", "Rail, square pictures, compact", { layout: "rail", ratio: "1/1", rating: "hide", density: "compact" }],
+  ],
+  sample: { id: "products", title: t("commerce.products.title"), products: ref("products"), labels: t("commerce.productLabels"), badges: t("commerce.badges") },
+});
+
+const product = define({
+  key: "product", theme: "commerce", group: "product", name: "Product page", docs: "The gallery and the buy box of one product.",
+  organism: "ProductDetail", axes: ["layout", "mediaSide", "thumbs", "buy", "tone", "density"], data: [d.products],
+  variants: [
+    ["split", "Gallery at the start, thumbnails"],
+    ["splitEnd", "Gallery at the end", { mediaSide: "end" }],
+    ["stacked", "Stacked, no thumbnails", { layout: "stacked", thumbs: "none" }],
+    ["compact", "Compact buy box", { buy: "compact", thumbs: "none" }],
+    ["muted", "Muted, roomy", { tone: "muted", density: "roomy" }],
+  ],
+  sample: { id: "product", product: { op: "pick", args: [ref("products"), "product-lamp"] }, labels: t("commerce.detail"), badges: t("commerce.badges") },
+});
+
+const reviews = define({
+  key: "reviews", theme: "commerce", group: "product", name: "Reviews", docs: "Customer reviews with ratings.",
+  organism: "ReviewList", axes: ["layout", "item", "avatar", "tone", "density"], data: [d.reviews],
+  variants: [
+    ["list", "List of cards"],
+    ["grid", "Grid of cards", { layout: "grid" }],
+    ["plain", "Plain entries", { item: "plain" }],
+    ["avatars", "With avatars", { avatar: "image" }],
+    ["mutedGrid", "Muted grid with avatars", { layout: "grid", avatar: "image", tone: "muted", density: "roomy" }],
+  ],
+  sample: { id: "reviews", title: t("commerce.reviews.title"), reviews: ref("reviews"), labels: t("commerce.reviewLabels") },
+});
+
+const cart = define({
+  key: "cart", theme: "commerce", group: "checkout", name: "Cart", docs: "The lines of a cart as a table or as cards.",
+  organism: "CartList", axes: ["layout", "media", "tone", "density"], data: [d.cart],
+  variants: [
+    ["table", "Table"],
+    ["cards", "Cards", { layout: "cards" }],
+    ["tableCompact", "Compact table, no pictures", { media: "none", density: "compact" }],
+    ["cardsPlain", "Cards, no pictures, muted", { layout: "cards", media: "none", tone: "muted" }],
+  ],
+  sample: { id: "cart", title: t("commerce.cart.title"), lines: ref("cart"), empty: t("empty.cart"), labels: t("commerce.cart") },
+});
+
+const summary = define({
+  key: "summary", theme: "commerce", group: "checkout", name: "Order summary", docs: "Subtotal, shipping, tax and the total.",
+  organism: "OrderSummary", axes: ["layout", "cta", "note", "tone", "density"], data: [d.summary],
+  variants: [
+    ["card", "Card with a checkout button"],
+    ["plain", "Plain, without a note", { layout: "plain", note: "hide" }],
+    ["noCta", "Card without a button", { cta: "hide" }],
+    ["muted", "Muted", { tone: "muted", density: "compact" }],
+  ],
+  sample: { id: "summary", title: t("commerce.summary.title"), rows: ref("summary"), empty: t("empty.summary"), labels: t("commerce.summary") },
+});
+
+const orders = define({
+  key: "orders", theme: "commerce", group: "account", name: "Order history", docs: "Past orders with status.",
+  organism: "OrderTable", axes: ["layout", "pager", "tone", "density"], data: [d.orders],
+  variants: [
+    ["table", "Table with a pager"],
+    ["cards", "Cards", { layout: "cards" }],
+    ["noPager", "Table without a pager", { pager: "hide" }],
+    ["compactMuted", "Compact, muted", { tone: "muted", density: "compact", pager: "hide" }],
+  ],
+  sample: { id: "orders", title: t("commerce.orders.title"), orders: ref("orders"), empty: t("empty.orders"), statuses: t("status"), labels: t("commerce.orders") },
+});
+
+export const commerceBlocks = [categories, products, product, reviews, cart, summary, orders];
diff --git a/xgen/screens/src/authoring/gallery/blocks-company.ts b/xgen/screens/src/authoring/gallery/blocks-company.ts
new file mode 100644
index 0000000..397c4e5
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-company.ts
@@ -0,0 +1,111 @@
+// Company blocks of the catalog: the team, a photo gallery, projects, open jobs, a personal about section, the culture and a timeline.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const c = (k: string) => t(`company.${k}`);
+const when2 = (sel: string, n: number | string, axis: string, on: string | string[], off: string | string[]) => [{ sel, n, when: { [axis]: on } }, { sel, n: 0, when: { [axis]: off } }];
+
+const team = define({
+  key: "team", theme: "marketing", group: "company", name: "Team", docs: "The people of a team as cards, a minimal grid, detailed cards, rows beside a picture or a directory.",
+  organism: "TeamGrid", axes: ["layout", "cols", "tone", "density"], data: [d.members],
+  variants: [
+    ["cards4", "Portrait cards, four columns"],
+    ["cards3", "Portrait cards, three columns, muted", { cols: "1-3", tone: "muted" }],
+    ["minimal", "Small portraits, names only", { layout: "minimal" }],
+    ["detailed", "Detailed cards with skills", { layout: "detailed", cols: "1-3" }],
+    ["list", "Rows beside a picture", { layout: "list" }],
+    ["directory", "Directory, two columns, compact", { layout: "directory", density: "compact" }],
+  ],
+  facts: [{ sel: '[data-testid="item"]', n: "@members" }, ...when2('[data-slot="media"]', 1, "layout", "list", ["cards", "minimal", "detailed", "directory"])],
+  sample: { id: "team", title: c("team.title"), lead: c("team.lead"), members: ref("members"), empty: t("empty.members"), depts: c("depts") },
+});
+
+const photos = define({
+  key: "photos", theme: "marketing", group: "company", name: "Photo gallery", docs: "Photos in a grid, a masonry, a mosaic, a featured picture with thumbnails, or cards.",
+  organism: "PhotoGallery", axes: ["layout", "captions", "tone", "density"], data: [d.photos],
+  variants: [
+    ["grid", "Grid with captions"],
+    ["gridPlain", "Grid without captions, muted", { captions: "hide", tone: "muted" }],
+    ["masonry", "Masonry of mixed heights", { layout: "masonry" }],
+    ["mosaic", "Mosaic with one big tile", { layout: "mosaic" }],
+    ["featured", "Featured picture over thumbnails", { layout: "featured" }],
+    ["cards", "Cards with a tag, compact", { layout: "cards", density: "compact" }],
+  ],
+  facts: [
+    { sel: '[data-testid="item"]', n: "@photos", when: { layout: ["grid", "masonry", "mosaic", "cards"] } },
+    { sel: '[data-testid="thumbs"] [data-slot="media-frame"]', n: "@photos", when: { layout: "featured" } },
+    { sel: '[data-testid="caption"]', n: "@photos", when: { layout: ["grid", "masonry"], captions: "show" } },
+    { sel: '[data-testid="caption"]', n: 0, when: { captions: "hide" } },
+  ],
+  sample: { id: "photos", title: c("photos.title"), lead: c("photos.lead"), photos: ref("photos"), empty: t("empty.photos"), labels: c("photos") },
+});
+
+const projects = define({
+  key: "projects", theme: "marketing", group: "company", name: "Projects", docs: "Projects as cards, a compact grid, captions over pictures, a bento or a list beside a collage.",
+  organism: "ProjectGrid", axes: ["layout", "tone", "density"], data: [d.projects],
+  variants: [
+    ["cards", "Cards with tags and links"],
+    ["compact", "Compact, four columns", { layout: "compact" }],
+    ["overlay", "Captions over the pictures", { layout: "overlay" }],
+    ["bento", "Bento with one big project", { layout: "bento" }],
+    ["list", "List beside a collage", { layout: "list" }],
+    ["cardsMuted", "Cards, muted, compact", { tone: "muted", density: "compact" }],
+  ],
+  facts: [{ sel: '[data-testid="item"]', n: "@projects" }, { sel: '[data-testid="featured"]', n: 2, when: { layout: ["cards", "overlay", "bento"] } }, { sel: '[data-testid="featured"]', n: 0, when: { layout: ["compact", "list"] } }],
+  sample: { id: "projects", title: c("projects.title"), lead: c("projects.lead"), projects: ref("projects"), empty: t("empty.projects"), labels: c("projects") },
+});
+
+const jobs = define({
+  key: "jobs", theme: "marketing", group: "company", name: "Careers", docs: "Open jobs as cards, grouped by department, or as a table.",
+  organism: "JobBoard", axes: ["layout", "salary", "tone"], data: [d.jobs, d.departments],
+  variants: [
+    ["grid", "Cards in two columns"],
+    ["salary", "Cards with the salary", { salary: "show" }],
+    ["grouped", "Grouped by department", { layout: "grouped" }],
+    ["table", "Table with the salary, muted", { layout: "table", salary: "show", tone: "muted" }],
+  ],
+  facts: [
+    { sel: '[data-testid="item"]', n: "@jobs" },
+    ...when2('[data-testid="group"]', "@departments", "layout", "grouped", ["grid", "table"]),
+    ...when2('[data-testid="job-table"]', 1, "layout", "table", ["grid", "grouped"]),
+    { sel: '[data-testid="salary"]', n: "@jobs", when: { layout: "grid", salary: "show" } },
+    { sel: '[data-testid="salary"]', n: 0, when: { salary: "hide" } },
+  ],
+  sample: { id: "jobs", title: c("jobs.title"), lead: c("jobs.lead"), jobs: ref("jobs"), empty: t("empty.jobs"), departments: ref("departments"), labels: c("jobs") },
+});
+
+const aboutme = define({
+  key: "aboutme", theme: "marketing", group: "company", name: "About me", docs: "A personal about section beside a portrait: key facts or skills.",
+  organism: "AboutMe", axes: ["layout", "mediaSide", "tone"], data: [d.profilefacts, d.skills],
+  variants: [
+    ["facts", "Portrait first, key facts"],
+    ["factsEnd", "Portrait at the end", { mediaSide: "end" }],
+    ["skills", "Skills with bars", { layout: "skills" }],
+    ["skillsMuted", "Skills, portrait at the end, muted", { layout: "skills", mediaSide: "end", tone: "muted" }],
+  ],
+  facts: [...when2('[data-testid="fact"]', "@profilefacts", "layout", "facts", "skills"), ...when2('[data-testid="skill"]', "@skills", "layout", "skills", "facts")],
+  sample: {
+    id: "aboutme", title: c("aboutMe.title"), lead: c("aboutMe.lead"), badge: c("aboutMe.badge"), facts: ref("profilefacts"), skills: ref("skills"), labels: c("aboutMe"),
+    actions: { mode: "two", cta: c("aboutMe.cta"), href: "#/work", secondary: c("aboutMe.more"), secondaryHref: "#/contact" },
+  },
+});
+
+const about = define({
+  key: "about", theme: "marketing", group: "company", name: "About the company", docs: "The culture: a strip of pictures, figures and values.",
+  organism: "AboutCompany", axes: ["layout", "tone", "density"], data: [d.stats, d.values],
+  variants: [["split", "Pictures beside the text"], ["stacked", "Pictures below, values in a row", { layout: "stacked" }], ["muted", "Muted, compact", { tone: "muted", density: "compact" }]],
+  facts: [{ sel: '[data-testid="stat"]', n: "@stats" }, { sel: '[data-testid="value"]', n: "@values" }],
+  sample: { id: "about", title: c("about.title"), lead: c("about.lead"), stats: ref("stats"), values: ref("values") },
+});
+
+const timeline = define({
+  key: "timeline", theme: "content", group: "story", name: "Timeline", docs: "Milestones on a vertical line beside a picture, in a narrow column, or in a row.",
+  organism: "MilestoneTimeline", axes: ["layout", "tone", "density"], data: [d.milestones],
+  variants: [["split", "Beside a picture"], ["stacked", "Narrow column", { layout: "stacked" }], ["row", "A row of columns", { layout: "row" }], ["rowMuted", "Row, muted, compact", { layout: "row", tone: "muted", density: "compact" }]],
+  facts: [{ sel: '[data-testid="item"]', n: "@milestones" }, ...when2('[data-slot="media"]', 1, "layout", "split", ["stacked", "row"])],
+  sample: { id: "timeline", title: c("timeline.title"), lead: c("timeline.lead"), milestones: ref("milestones"), empty: t("empty.milestones") },
+});
+
+export const companyBlocks = [team, photos, projects, jobs, aboutme, about, timeline];
diff --git a/xgen/screens/src/authoring/gallery/blocks-ctas.ts b/xgen/screens/src/authoring/gallery/blocks-ctas.ts
new file mode 100644
index 0000000..9385fdf
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-ctas.ts
@@ -0,0 +1,37 @@
+// Calls to action with proof: centered over logos, features or figures, or split beside a picture.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const c = (k: string) => t(`marketing.ctaProof.${k}`);
+
+const ctaproof = define({
+  key: "ctaproof", theme: "marketing", group: "cta", name: "Call to action, with proof", docs: "A call to action with logos, features, figures, icon rows or delivery zones; centered or beside a picture.",
+  organism: "CtaProof", axes: ["layout", "proof", "mediaSide", "tone"], data: [d.logos, d.features, d.stats, d.zones],
+  variants: [
+    ["centerLogos", "Centered over a row of logos", { proof: "logos" }],
+    ["centerFeatures", "Centered with small features", { proof: "features" }],
+    ["centerStats", "Centered with three figures, muted", { tone: "muted" }],
+    ["splitStats", "Figures beside a picture", { layout: "split" }],
+    ["splitStatsStart", "Picture first, figures and a note", { layout: "split", mediaSide: "start" }, { note: c("note") }],
+    ["splitRows", "Icon rows beside a picture", { layout: "split", proof: "rows" }],
+    ["splitZones", "Delivery zones beside a picture, muted", { layout: "split", proof: "zones", tone: "muted" }, { title: c("zonesTitle"), lead: c("zonesLead") }],
+  ],
+  facts: [
+    { sel: '[data-testid="cta-proof"]', n: 1 },
+    { sel: '[data-testid="cta-item"]', n: "@logos", when: { proof: "logos" } },
+    { sel: '[data-testid="cta-item"]', n: "@features", when: { proof: ["features", "rows"] } },
+    { sel: '[data-testid="cta-item"]', n: 3, when: { proof: "stats" } },
+    { sel: '[data-testid="cta-item"]', n: "@zones", when: { proof: "zones" } },
+    { sel: '[data-slot="media-frame"]', n: 1, when: { layout: "split" } },
+    { sel: '[data-slot="media-frame"]', n: 0, when: { layout: "center" } },
+  ],
+  sample: {
+    id: "ctaproof", title: c("title"), lead: c("lead"), badge: c("badge"),
+    actions: { mode: "two", cta: c("cta"), href: "#/pricing", secondary: c("secondary"), secondaryHref: "#/contact" },
+    content: { logos: ref("logos"), features: ref("features"), stats: ref("stats"), zones: ref("zones") },
+  },
+});
+
+export const ctaBlocks = [ctaproof];
diff --git a/xgen/screens/src/authoring/gallery/blocks-data.ts b/xgen/screens/src/authoring/gallery/blocks-data.ts
new file mode 100644
index 0000000..d5415dd
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-data.ts
@@ -0,0 +1,83 @@
+// The collections the blocks read: the fixtures in xgen/fixtures, with the field each prop takes (path inside the Codex entry).
+import type { Source } from "./block-kit";
+// the central field maps (shared with every runtime as @ui8kit/app-shared/runtime/fields): product, post and plan read through them
+import { CODEX_FIELDS } from "../../../../runtimes/core/assets/app/fields";
+
+const src = (as: string, collection: string, kind: string, record: string, fields: Readonly<Record<string, string>>): Source => ({ as, collection, kind, record, fields: { ...fields } });
+
+export const features = src("features", "features", "feature", "Feature", CODEX_FIELDS.feature);
+export const tiers = src("tiers", "tiers", "plan", "Plan", CODEX_FIELDS.plan);
+export const faq = src("faq", "faq", "faq", "Faq", CODEX_FIELDS.faq);
+export const logos = src("logos", "logos", "logo", "Logo", CODEX_FIELDS.logo);
+export const stats = src("stats", "stats", "stat", "Stat", CODEX_FIELDS.stat);
+export const testimonials = src("testimonials", "testimonials", "testimonial", "Quote", CODEX_FIELDS.testimonial);
+export const steps = src("steps", "steps", "step", "Step", CODEX_FIELDS.step);
+export const categories = src("categories", "categories", "menu_item", "Category", CODEX_FIELDS.menuCategory);
+export const products = src("products", "products", "product", "Product", CODEX_FIELDS.product);
+export const cart = src("cart", "cart", "cartline", "CartLine", CODEX_FIELDS.cartline);
+export const summary = src("summary", "summary", "summaryrow", "SummaryRow", CODEX_FIELDS.summaryrow);
+export const orders = src("orders", "orders", "order", "Order", CODEX_FIELDS.order);
+export const reviews = src("reviews", "reviews", "review", "Review", CODEX_FIELDS.review);
+export const posts = src("posts", "posts", "post", "Post", CODEX_FIELDS.post);
+export const activity = src("activity", "activity", "event", "Event", CODEX_FIELDS.event);
+export const series = src("series", "series", "point", "Point", CODEX_FIELDS.point);
+export const metrics = src("metrics", "metrics", "metric", "Stat", CODEX_FIELDS.metric);
+export const checklist = src("checklist", "checklist", "task", "Task", CODEX_FIELDS.task);
+export const channels = src("channels", "channels", "channel", "Feature", CODEX_FIELDS.channel);
+export const contacts = src("contacts", "contacts", "contact", "Feature", CODEX_FIELDS.contact);
+export const community = src("community", "community", "channel", "Feature", CODEX_FIELDS.channel);
+
+const link = (as: string, kind: "prompt" | "tab" | "posttag", record = "NavLink") => src(as, as, kind, record, CODEX_FIELDS[kind]);
+const group = (as: string) => src(as, as, "menu_item", "MegaGroup", CODEX_FIELDS.menuGroup);
+/** a menu (kind menu_item): the central map, a link only where the app routes menu items */
+const menu = (as: string) => src(as, as, "menu_item", "NavLink", CODEX_FIELDS.menuItem);
+const row = (as: string) => src(as, as, "row", "CompareRow", CODEX_FIELDS.row);
+const tab = (as: string, kind: "topic", record: string) => src(as, as, kind, record, CODEX_FIELDS.topic);
+export const navlinks = menu("navlinks");
+export const prompts = link("prompts", "prompt", "Topic");
+export const templates = src("templates", "templates", "template", "Template", CODEX_FIELDS.template);
+export const templateFilters = src("templateFilters", "prompts", "prompt", "Filter", CODEX_FIELDS.promptFilter);
+export const tabs = link("tabs", "tab");
+export const sidenav = menu("sidenav");
+export const megagroups = group("megagroups");
+export const sitemap = group("sitemap");
+export const compare = row("compare");
+export const rivals = row("rivals");
+export const credits = src("credits", "credits", "pack", "Pack", CODEX_FIELDS.pack);
+export const bento = src("bento", "bento", "tile", "Tile", CODEX_FIELDS.tile);
+export const terminal = src("terminal", "terminal", "line", "CodeLine", CODEX_FIELDS.line);
+export const wizard = src("wizard", "wizard", "step", "WizardStep", CODEX_FIELDS.wizardStep);
+export const lanes = src("lanes", "lanes", "lane", "Lane", CODEX_FIELDS.lane);
+export const cards = src("cards", "cards", "card", "BoardCard", CODEX_FIELDS.card);
+export const faqtabs = src("faqtabs", "faqtabs", "tab", "FaqTab", CODEX_FIELDS.faqtab);
+export const topics = tab("topics", "topic", "PostTopic");
+export const article = src("article", "article", "section", "Section", CODEX_FIELDS.section);
+export const beforeafter = src("beforeafter", "beforeafter", "point", "Contrast", CODEX_FIELDS.contrast);
+export const duo = src("duo", "duo", "plan", "Plan", CODEX_FIELDS.plan);
+export const placeholders = src("placeholders", "placeholders", "placeholder", "Line", CODEX_FIELDS.placeholder);
+export const chapters = src("chapters", "chapters", "chapter", "Chapter", CODEX_FIELDS.chapter);
+export const zones = src("zones", "zones", "zone", "Zone", CODEX_FIELDS.zone);
+export const days = src("days", "days", "day", "Day", CODEX_FIELDS.day);
+export const stores = src("stores", "stores", "store", "Store", CODEX_FIELDS.store);
+export const payments = src("payments", "payments", "payment", "Payment", CODEX_FIELDS.payment);
+export const perks = src("perks", "perks", "perk", "Feature", CODEX_FIELDS.perk);
+export const deliveryfacts = src("deliveryfacts", "deliveryfacts", "fact", "Feature", CODEX_FIELDS.fact);
+export const details = src("details", "details", "detail", "Detail", CODEX_FIELDS.detail);
+export const specs = src("specs", "specs", "spec", "Spec", CODEX_FIELDS.spec);
+export const promos = src("promos", "promos", "promo", "Promo", CODEX_FIELDS.promo);
+export const members = src("members", "members", "member", "Member", CODEX_FIELDS.member);
+export const photos = src("photos", "photos", "photo", "Photo", CODEX_FIELDS.photo);
+export const projects = src("projects", "projects", "project", "Project", CODEX_FIELDS.project);
+export const jobs = src("jobs", "jobs", "job", "Job", CODEX_FIELDS.job);
+export const departments = src("departments", "departments", "department", "Department", CODEX_FIELDS.department);
+export const milestones = src("milestones", "milestones", "milestone", "Milestone", CODEX_FIELDS.milestone);
+export const values = src("values", "values", "value", "Feature", CODEX_FIELDS.value);
+export const profilefacts = src("profilefacts", "profilefacts", "profilefact", "Spec", CODEX_FIELDS.profilefact);
+export const skills = src("skills", "skills", "skill", "Skill", CODEX_FIELDS.skill);
+export const subnav = menu("subnav");
+export const helplinks = menu("helplinks");
+export const posttags = link("posttags", "posttag");
+export const outline = menu("outline");
+// the breadcrumb trail: pages chained by parent_id, in the order root -> current page
+export const crumbs = src("crumbs", "crumbs", "page", "NavLink", CODEX_FIELDS.page);
+export const questions = src("questions", "questions", "question", "Question", CODEX_FIELDS.question);
diff --git a/xgen/screens/src/authoring/gallery/blocks-define.ts b/xgen/screens/src/authoring/gallery/blocks-define.ts
new file mode 100644
index 0000000..5b01a75
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-define.ts
@@ -0,0 +1,8 @@
+import { makeDefine } from "./block-kit";
+import { allOrganisms } from "../blocks/organisms";
+import { framePatterns } from "../components/frames";
+import { patterns } from "../components/patterns";
+import { parts } from "../components/parts";
+
+/** `define({...})` builds a block spec and its texts from a short definition */
+export const define = makeDefine(allOrganisms, new Set([...parts, ...patterns, ...framePatterns].map((p) => p.name)));
diff --git a/xgen/screens/src/authoring/gallery/blocks-faqs.ts b/xgen/screens/src/authoring/gallery/blocks-faqs.ts
new file mode 100644
index 0000000..2f49862
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-faqs.ts
@@ -0,0 +1,38 @@
+// Split questions of the catalog: beside the heading, a help card, a picture or a finder, or as cards.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const f = (k: string) => t(`marketing.faqSplit.${k}`);
+const LAYOUTS = ["head", "aside", "media", "search", "cards"];
+const only = (sel: string, n: number | string, on: string) => [{ sel, n, when: { layout: on } }, { sel, n: 0, when: { layout: LAYOUTS.filter((l) => l !== on) } }];
+
+const faqsplit = define({
+  key: "faqsplit", theme: "marketing", group: "faq", name: "FAQ, split", docs: "Questions beside the heading, a help card, a picture or a finder, or as cards in three or four columns.",
+  organism: "FaqSplit", axes: ["layout", "cards", "mediaSide", "tone"], data: [d.questions, d.channels, d.faqtabs],
+  variants: [
+    ["headSplit", "Heading and action beside the questions"],
+    ["helpCard", "Questions beside a help card", { layout: "aside" }],
+    ["picture", "Questions and action beside a picture", { layout: "media" }],
+    ["finder", "Picture first, search, topics and popular questions", { layout: "search", mediaSide: "start" }],
+    ["cards3", "Cards in three columns", { layout: "cards" }],
+    ["cards4", "Cards in four columns", { layout: "cards", cards: "grid4" }],
+    ["cardsIcons", "Cards with icons, muted", { layout: "cards", cards: "icons", tone: "muted" }],
+  ],
+  facts: [
+    { sel: '[data-testid="faq-item"]', n: "@questions", when: { layout: ["head", "aside", "media"] } },
+    { sel: '[data-testid="faq-card"]', n: "@questions", when: { layout: "cards" } },
+    ...only('[data-testid="faq-help"]', 1, "aside"),
+    ...only('[data-testid="faq-finder"]', 1, "search"),
+    { sel: '[data-testid="faq-topic"]', n: "@faqtabs", when: { layout: "search" } },
+    { sel: '[data-testid="faq-popular"]', n: 3, when: { layout: "search" } },
+    { sel: '[data-testid="faq-cta"]', n: 1, when: { layout: ["head", "media"] } },
+  ],
+  sample: {
+    id: "faqsplit", title: f("title"), lead: f("lead"), badge: f("badge"), items: ref("questions"), channels: ref("channels"), topics: ref("faqtabs"),
+    labels: { cta: f("cta"), more: f("more"), asideTitle: f("asideTitle"), asideText: f("asideText"), asideCta: f("asideCta"), search: f("search"), popular: f("popular") },
+  },
+});
+
+export const faqBlocks = [faqsplit];
diff --git a/xgen/screens/src/authoring/gallery/blocks-feature-showcase.ts b/xgen/screens/src/authoring/gallery/blocks-feature-showcase.ts
new file mode 100644
index 0000000..13973f8
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-feature-showcase.ts
@@ -0,0 +1,27 @@
+// Feature cards with a picture or a glyph panel on top, in three or four columns.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const f = (k: string) => t(`marketing.featureShowcase.${k}`);
+
+const featureshowcase = define({
+  key: "featureshowcase", theme: "marketing", group: "features", name: "Feature cards with a picture", docs: "Cards with a picture on top and a read link, or with a muted glyph panel on top like an index of categories, in three or four columns.",
+  organism: "FeatureShowcase", axes: ["item", "cols", "tone"], data: [d.features, d.values],
+  variants: [
+    ["pictureCards3", "Three cards with a picture on top", {}, { features: ref("values") }],
+    ["panelCards4", "Four cards with a glyph panel on top", { item: "panel", cols: "4" }],
+    ["pictureCards4", "Four cards with a picture on top, muted", { cols: "4", tone: "muted" }],
+    ["panelCards3", "Three cards with a glyph panel on top", { item: "panel" }, { features: ref("values") }],
+  ],
+  facts: [
+    { sel: '[data-testid="showcase-card"]', n: "@values", when: { cols: "3" } },
+    { sel: '[data-testid="showcase-card"]', n: "@features", when: { cols: "4" } },
+    { sel: '[data-testid="showcase-panel"]', n: 0, when: { item: "picture" } },
+    { sel: '[data-testid="read"]', n: 0, when: { item: "panel" } },
+  ],
+  sample: { id: "featureshowcase", title: f("title"), lead: f("lead"), features: ref("features"), empty: t("empty.features"), more: f("more") },
+});
+
+export const featureShowcaseBlocks = [featureshowcase];
diff --git a/xgen/screens/src/authoring/gallery/blocks-feature-splits.ts b/xgen/screens/src/authoring/gallery/blocks-feature-splits.ts
new file mode 100644
index 0000000..8c96dee
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-feature-splits.ts
@@ -0,0 +1,35 @@
+// Features beside a picture: plain pairs, cards, figures over checked rows, metric cards.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const f = (k: string) => t(`marketing.featureSplit.${k}`);
+
+const featuresplit = define({
+  key: "featuresplit", theme: "marketing", group: "features", name: "Features, split", docs: "Features beside a picture: plain in two columns, as cards with actions, two figures over checked rows, or four metric cards with actions.",
+  organism: "FeatureSplit", axes: ["layout", "mediaSide", "tone"], data: [d.features, d.stats],
+  variants: [
+    ["gridStart", "Picture first, four plain features in two columns", { mediaSide: "start" }],
+    ["statsStart", "A square picture first, two figures over checked rows", { layout: "stats", mediaSide: "start" }],
+    ["gridMuted", "Four plain features beside a picture, muted", { tone: "muted" }],
+    ["metricCards", "Four metric cards and actions beside a picture", { layout: "metrics" }],
+    ["featureCards", "Four feature cards and actions beside a picture", { layout: "cards" }],
+  ],
+  facts: [
+    { sel: '[data-testid="feature-item"]', n: 4, when: { layout: "grid" } },
+    { sel: '[data-testid="feature-item"]', n: 3, when: { layout: "stats" } },
+    { sel: '[data-testid="feature-card"]', n: "@features", when: { layout: "cards" } },
+    { sel: '[data-testid="feature-stat"]', n: 2, when: { layout: "stats" } },
+    { sel: '[data-testid="feature-stat"]', n: 4, when: { layout: "metrics" } },
+    { sel: '[data-testid="action-primary"]', n: 1, when: { layout: ["cards", "metrics"] } },
+    { sel: '[data-testid="action-primary"]', n: 0, when: { layout: ["grid", "stats"] } },
+    { sel: '[data-slot="media-frame"]', n: 1 },
+  ],
+  sample: {
+    id: "featuresplit", title: f("title"), lead: f("lead"), badge: f("badge"), features: ref("features"), stats: ref("stats"),
+    actions: { mode: "two", cta: f("cta"), href: "#/start", secondary: f("secondary"), secondaryHref: "#/work" },
+  },
+});
+
+export const featureSplitBlocks = [featuresplit];
diff --git a/xgen/screens/src/authoring/gallery/blocks-footers.ts b/xgen/screens/src/authoring/gallery/blocks-footers.ts
new file mode 100644
index 0000000..4fc95e0
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-footers.ts
@@ -0,0 +1,39 @@
+// Footers with more than links: the brand with figures over link-group cards, or a split beside a picture.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const f = (k: string) => t(`marketing.footerSplit.${k}`);
+const SPLITS = ["points", "links", "newsletter", "contacts", "channels"];
+
+const footersplit = define({
+  key: "footersplit", theme: "marketing", group: "navigation", name: "Footer, split", docs: "The brand with figures and a sitemap link over link-group cards; or a split beside a picture with points, link columns, a newsletter card, the contacts or the community channels.",
+  organism: "FooterSplit", axes: ["layout", "mediaSide", "tone"], data: [d.sitemap, d.stats, d.features, d.contacts, d.community],
+  variants: [
+    ["statsCards", "The brand with figures over link-group cards"],
+    ["splitPoints", "The brand and four points beside a picture", { layout: "points" }],
+    ["splitLinks", "The brand and small link columns beside a picture, muted", { layout: "links", tone: "muted" }],
+    ["newsletterStart", "Picture first, a newsletter card and link columns", { layout: "newsletter", mediaSide: "start" }],
+    ["splitContacts", "The contacts and two actions beside a picture", { layout: "contacts" }],
+    ["channelsStart", "Picture first, the community channels and figures", { layout: "channels", mediaSide: "start" }],
+  ],
+  facts: [
+    { sel: '[data-testid="group"]', n: "@sitemap", when: { layout: "stats" } },
+    { sel: '[data-testid="group"]', n: 3, when: { layout: ["links", "newsletter"] } },
+    { sel: '[data-testid="group"]', n: 0, when: { layout: ["points", "contacts", "channels"] } },
+    { sel: '[data-testid="footer-stat"]', n: 3, when: { layout: ["stats", "channels"] } },
+    { sel: '[data-testid="footer-point"]', n: 4, when: { layout: "points" } },
+    { sel: '[data-testid="signup"]', n: 1, when: { layout: "newsletter" } },
+    { sel: '[data-testid="footer-contact"]', n: "@contacts", when: { layout: "contacts" } },
+    { sel: '[data-testid="footer-channel"]', n: 3, when: { layout: "channels" } },
+    { sel: '[data-slot="media-frame"]', n: 1, when: { layout: SPLITS } },
+    { sel: '[data-slot="media-frame"]', n: 0, when: { layout: "stats" } },
+  ],
+  sample: {
+    id: "footersplit", label: t("vibe.sitemap.label"), brand: t("site.header.brand"), tagline: f("tagline"), copyright: f("copyright"), groups: ref("sitemap"),
+    extras: { stats: ref("stats"), points: ref("features"), contacts: ref("contacts"), channels: ref("community") }, labels: f("labels"),
+  },
+});
+
+export const footerBlocks = [footersplit];
diff --git a/xgen/screens/src/authoring/gallery/blocks-heroes.ts b/xgen/screens/src/authoring/gallery/blocks-heroes.ts
new file mode 100644
index 0000000..67a69fd
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-heroes.ts
@@ -0,0 +1,38 @@
+// Split heroes of the catalog: figures, faces, small cards or a quote under the lead, beside a picture, a floating card, a picture grid or plan cards.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const h = (k: string) => t(`marketing.heroSplit.${k}`);
+const when2 = (sel: string, n: number | string, axis: string, on: string | string[], off: string | string[]) => [{ sel, n, when: { [axis]: on } }, { sel, n: 0, when: { [axis]: off } }];
+
+const herosplit = define({
+  key: "herosplit", theme: "marketing", group: "hero", name: "Hero, split", docs: "A split hero with figures, faces, small cards or a quote under the lead, beside a picture, a floating card, a picture grid or plan cards.",
+  organism: "HeroSplit", axes: ["extra", "media", "mediaSide", "tone"], data: [d.stats, d.features, d.testimonials, d.tiers],
+  variants: [
+    ["statsCards", "Figures in cards beside a picture"],
+    ["avatars", "Faces and a proof line", { extra: "avatars" }],
+    ["miniCards", "Two small cards, floating card, muted", { extra: "minis", media: "card", tone: "muted" }],
+    ["quoteStats", "Quote and figures beside a floating card", { extra: "quote", media: "card" }],
+    ["planCards", "Plan cards on the picture, picture first", { extra: "none", media: "plans", mediaSide: "start" }],
+    ["pictureGrid", "Figures beside a grid of four pictures", { media: "grid" }],
+    ["pictureGridStart", "Grid of four pictures first, faces", { extra: "avatars", media: "grid", mediaSide: "start" }],
+  ],
+  facts: [
+    ...when2('[data-testid="hero-stat"]', 3, "extra", ["stats", "quote"], ["avatars", "minis", "none"]),
+    ...when2('[data-testid="hero-proof"]', 1, "extra", "avatars", ["stats", "minis", "quote", "none"]),
+    ...when2('[data-testid="hero-mini"]', 2, "extra", "minis", ["stats", "avatars", "quote", "none"]),
+    ...when2('[data-testid="hero-quote"]', 1, "extra", "quote", ["stats", "avatars", "minis", "none"]),
+    ...when2('[data-testid="offer-card"]', 1, "media", "card", ["picture", "grid", "plans"]),
+    ...when2('[data-testid="hero-tile"]', 4, "media", "grid", ["picture", "card", "plans"]),
+    ...when2('[data-testid="hero-plan"]', 2, "media", "plans", ["picture", "card", "grid"]),
+  ],
+  sample: {
+    id: "herosplit", title: h("title"), lead: h("lead"), badge: h("badge"),
+    actions: { mode: "two", cta: h("cta"), href: "#/pricing", secondary: h("secondary"), secondaryHref: "#/features" },
+    content: { stats: ref("stats"), features: ref("features"), people: ref("testimonials"), plans: ref("tiers"), proof: h("proof"), card: { title: h("cardTitle"), text: h("cardText"), icon: "zap" } },
+  },
+});
+
+export const heroBlocks = [herosplit];
diff --git a/xgen/screens/src/authoring/gallery/blocks-media-lists.ts b/xgen/screens/src/authoring/gallery/blocks-media-lists.ts
new file mode 100644
index 0000000..c885ede
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-media-lists.ts
@@ -0,0 +1,44 @@
+// A list or figures beside a picture: figures, figures with a review, steps, latest posts, topics, contact buttons.
+import { ref } from "../../build";
+import type { Value } from "../../ir";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const m = (k: string) => t(`marketing.mediaList.${k}`);
+/** the texts of one layout: heading, lead, badge, list heading and actions */
+const texts = (k: string, two = true): Record<string, Value> => ({
+  title: m(`${k}.title`), lead: m(`${k}.lead`), badge: m(`${k}.badge`),
+  labels: { list: m(`${k}.list`), count: m("count"), minutes: t("content.labels.minutes"), featured: m("featured"), rating: t("testimonials.rating"), figures: m("supportFigures") },
+  actions: two ? { mode: "two", cta: m(`${k}.cta`), href: "#/start", secondary: m(`${k}.secondary`), secondaryHref: "#/more" } : { mode: "one", cta: m(`${k}.cta`), href: "#/start" },
+});
+
+const medialist = define({
+  key: "medialist", theme: "marketing", group: "proof", name: "List beside a picture", docs: "Four figures, figures with a featured review, numbered steps, the latest posts, topic rows, or contact buttons with support figures, beside a picture.",
+  organism: "MediaList", axes: ["layout", "mediaSide", "tone"], data: [d.stats, d.steps, d.posts, d.categories, d.channels, d.reviews],
+  variants: [
+    ["figuresStart", "Picture first, four figures and an action", { mediaSide: "start" }, texts("figures", false)],
+    ["proofReview", "Three figures and a featured review", { layout: "proof" }, texts("proof")],
+    ["stepsRows", "Numbered steps beside a square picture", { layout: "steps" }, texts("steps", false)],
+    ["latestPosts", "The latest posts and a subscribe action, muted", { layout: "posts", tone: "muted" }, texts("posts", false)],
+    ["topicRows", "Topic rows with counts beside a square picture", { layout: "topics" }, texts("topics", false)],
+    ["contactStart", "Picture first, contact buttons and support figures", { layout: "contact", mediaSide: "start" }, texts("contact", false)],
+  ],
+  facts: [
+    { sel: '[data-testid="media-stat"]', n: 4, when: { layout: "figures" } },
+    { sel: '[data-testid="media-stat"]', n: 3, when: { layout: ["proof", "contact"] } },
+    { sel: '[data-testid="media-review"]', n: 1, when: { layout: "proof" } },
+    { sel: '[data-testid="media-step"]', n: "@steps", when: { layout: "steps" } },
+    { sel: '[data-testid="media-post"]', n: 3, when: { layout: "posts" } },
+    { sel: '[data-testid="media-topic"]', n: 5, when: { layout: "topics" } },
+    { sel: '[data-testid="media-channel"]', n: "@channels", when: { layout: "contact" } },
+    { sel: '[data-testid="action-primary"]', n: 1, when: { layout: ["figures", "proof", "steps", "posts", "topics"] } },
+    { sel: '[data-testid="action-primary"]', n: 0, when: { layout: "contact" } },
+  ],
+  sample: {
+    id: "medialist", ...texts("figures", false),
+    extras: { stats: ref("stats"), steps: ref("steps"), posts: ref("posts"), topics: ref("categories"), channels: ref("channels"), reviews: ref("reviews") },
+  },
+});
+
+export const mediaListBlocks = [medialist];
diff --git a/xgen/screens/src/authoring/gallery/blocks-more.ts b/xgen/screens/src/authoring/gallery/blocks-more.ts
new file mode 100644
index 0000000..f4e972b
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-more.ts
@@ -0,0 +1,233 @@
+// The other blocks: promo, content, account, dashboard, onboarding and support.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const annCase = (c: string) => ({ text: t(`cases.${c}.announcement.text`), cta: t(`cases.${c}.announcement.cta`) });
+const announcement = define({
+  key: "announcement", theme: "promo", group: "banner", name: "Announcement bar", docs: "A thin strip above the page with one sentence and a link.",
+  organism: "AnnouncementBar", axes: ["tone", "layout", "dismiss", "badge", "position"],
+  variants: [
+    ["bar", "Primary strip"],
+    ["badge", "With a tag: New", { badge: "show", tone: "muted" }],
+    ["bottom", "Stays at the bottom edge", { position: "bottom", dismiss: "show", layout: "split" }],
+    ["muted", "Muted strip", { tone: "muted" }],
+    ["split", "Split, text left and link right", { layout: "split", tone: "muted" }],
+    ["dismissible", "With a close button", { dismiss: "show" }],
+    ["shop", "Shop: free shipping, muted", { tone: "muted", dismiss: "show" }, annCase("shop")],
+    ["agency", "Agency: open slots, split", { layout: "split" }, annCase("agency")],
+  ],
+  sample: { label: t("promo.announcement.label"), text: t("promo.announcement.text"), cta: t("promo.announcement.cta"), ctaHref: "#/pricing", dismissLabel: t("promo.announcement.dismiss"), badgeLabel: t("promo.announcement.badge") },
+});
+
+const cookie = define({
+  key: "cookie", theme: "promo", group: "banner", name: "Cookie notice", docs: "A consent notice with accept and decline buttons.",
+  organism: "CookieBanner", axes: ["layout", "actions", "tone"],
+  variants: [
+    ["bar", "Bar"],
+    ["card", "Card", { layout: "card" }],
+    ["settings", "Bar with a settings button", { actions: "three" }],
+    ["muted", "Muted card with settings", { layout: "card", actions: "three", tone: "muted" }],
+  ],
+  sample: { id: "cookie", title: t("promo.cookie.title"), text: t("promo.cookie.text"), accept: t("promo.cookie.accept"), decline: t("promo.cookie.decline"), settings: t("promo.cookie.settings") },
+});
+
+const newsletter = define({
+  key: "newsletter", theme: "promo", group: "forms", name: "Newsletter sign-up", docs: "An email field and a button, inline, stacked or beside a picture.",
+  organism: "NewsletterForm", axes: ["layout", "terms", "tone", "align"],
+  variants: [
+    ["inline", "Inline, centered"],
+    ["stacked", "Stacked", { layout: "stacked" }],
+    ["split", "Split with a picture", { layout: "split", align: "start" }],
+    ["consent", "With a consent line", { terms: "show" }],
+    ["muted", "Muted, consent", { tone: "muted", terms: "show", align: "start" }],
+  ],
+  sample: { id: "newsletter", title: t("promo.newsletter.title"), text: t("promo.newsletter.text"), label: t("promo.newsletter.label"), submit: t("promo.newsletter.submit"), consent: t("promo.newsletter.consent") },
+});
+
+const posts = define({
+  key: "posts", theme: "content", group: "blog", name: "Blog posts", docs: "Posts as a grid, a list or a magazine.",
+  organism: "PostGrid", axes: ["layout", "cols", "media", "meta", "filter.mode", "tone", "density"], data: [d.posts, d.topics],
+  variants: [
+    ["grid", "Grid, three columns"],
+    ["filters", "Grid with topic filters", { "filter.mode": "topics" }, { filter: { topic: "Design" } }],
+    ["twoUp", "Grid, two columns", { cols: "1-2" }],
+    ["row4", "Grid, four columns in one row", { cols: "1-4" }],
+    ["news4", "Four news cards, title on image, date strip", { cols: "1-4", meta: "news" }, { action: { label: t("content.posts.action"), href: "#/" } }],
+    ["list", "List of horizontal cards", { layout: "list" }],
+    ["magazine", "Magazine: first post wide", { layout: "magazine" }],
+    ["textOnly", "Text only", { media: "none" }],
+    ["digest", "Digest: short meta, compact, muted", { meta: "short", density: "compact", tone: "muted", media: "none" }],
+  ],
+  sample: {
+    id: "posts", title: t("content.posts.title"), posts: ref("posts"), labels: t("content.labels"),
+    filter: { topics: ref("topics"), label: t("vibe.posts.topics"), topic: "" },
+    action: { label: t("content.posts.action"), href: "#/" },
+  },
+});
+
+const postheader = define({
+  key: "postheader", theme: "content", group: "blog", name: "Post header", docs: "Category, title, excerpt, author line and a wide cover.",
+  organism: "PostHeader", axes: ["layout", "cover", "meta", "tone"], data: [d.posts],
+  variants: [
+    ["start", "Left aligned with a cover"],
+    ["center", "Centered", { layout: "center" }],
+    ["noCover", "Without a cover", { cover: "hide" }],
+    ["minimal", "Minimal: short meta, muted", { cover: "hide", meta: "short", tone: "muted", layout: "center" }],
+  ],
+  sample: { id: "postheader", post: { op: "pick", args: [ref("posts"), "post-static-first"] }, labels: t("content.labels") },
+});
+
+const authCase = (m: string) => ({ title: t(`auth.${m}.title`), text: t(`auth.${m}.text`), submit: t(`auth.${m}.submit`), switchText: t(`auth.${m}.switchText`), switchLink: t(`auth.${m}.switchLink`) });
+const auth = define({
+  key: "auth", theme: "account", group: "auth", name: "Auth card", docs: "Sign in, sign up and reset password.",
+  organism: "AuthCard", axes: ["mode", "layout", "social"], fit: "card",
+  variants: [
+    ["signin", "Sign in"],
+    ["magic", "Magic link only", { mode: "magic" }, authCase("magic")],
+    ["socialFirst", "Other sign-in options first", { social: "first" }],
+    ["signup", "Sign up", { mode: "signup" }, authCase("signup")],
+    ["reset", "Reset password", { mode: "reset" }, authCase("reset")],
+    ["plain", "Sign in without a card", { layout: "plain" }],
+    ["social", "Sign in with other options", { social: "show" }],
+    ["signupSocial", "Sign up with other options, plain", { mode: "signup", social: "show", layout: "plain" }, authCase("signup")],
+  ],
+  sample: { id: "auth", ...authCase("signin"), switchHref: "#/", labels: t("auth.labels") },
+});
+
+const profile = define({
+  key: "profile", theme: "account", group: "settings", name: "Profile form", docs: "Account settings: picture, name, email, bio and notifications.",
+  organism: "ProfileForm", axes: ["layout", "avatar", "prefs", "tone"],
+  variants: [
+    ["stacked", "Stacked"],
+    ["split", "Fields beside notifications", { layout: "split" }],
+    ["minimal", "Fields only", { avatar: "hide", prefs: "hide" }],
+    ["muted", "Muted split", { layout: "split", tone: "muted" }],
+  ],
+  sample: { id: "profile", title: t("account.profile.title"), text: t("account.profile.text"), labels: t("account.profile.labels") },
+});
+
+const metrics = define({
+  key: "metrics", theme: "dashboard", group: "widgets", name: "Metric tiles", docs: "Key counters of a dashboard.",
+  organism: "MetricRow", axes: ["cols", "item", "tone", "density"], data: [d.metrics],
+  variants: [
+    ["tiles", "Four tiles"],
+    ["twoUp", "Two by two", { cols: "2" }],
+    ["compact", "Compact figures", { item: "compact" }],
+    ["muted", "Muted, compact", { tone: "muted", density: "compact", item: "compact", cols: "2" }],
+  ],
+  sample: { id: "metrics", title: t("dashboard.metrics.title"), metrics: ref("metrics"), empty: t("empty.metrics") },
+});
+
+const chart = define({
+  key: "chart", theme: "dashboard", group: "widgets", name: "Chart panel", docs: "Orders per day as bars or meters.",
+  organism: "ChartPanel", axes: ["chart", "size", "tone"], data: [d.series],
+  variants: [
+    ["bars", "Bars"],
+    ["short", "Short bars", { size: "compact" }],
+    ["meters", "Meters", { chart: "meters" }],
+    ["muted", "Muted compact meters", { chart: "meters", size: "compact", tone: "muted" }],
+  ],
+  sample: { id: "chart", title: t("dashboard.chart.title"), text: t("dashboard.chart.text"), series: ref("series"), empty: t("empty.series"), summary: t("dashboard.chart.summary"), percent: t("dashboard.chart.percent") },
+});
+
+const activity = define({
+  key: "activity", theme: "dashboard", group: "widgets", name: "Activity feed", docs: "Recent events as a timeline or a list.",
+  organism: "ActivityFeed", axes: ["layout", "density", "tone"], data: [d.activity],
+  variants: [
+    ["timeline", "Timeline"],
+    ["list", "List", { layout: "list" }],
+    ["compact", "Compact list", { layout: "list", density: "compact" }],
+    ["muted", "Muted timeline", { tone: "muted" }],
+  ],
+  sample: { id: "activity", title: t("dashboard.activity.title"), text: t("dashboard.activity.text"), events: ref("activity"), empty: t("empty.activity") },
+});
+
+const emptyCase = (c: string) => ({ title: t(`dashboard.empty.${c}.title`), text: t(`dashboard.empty.${c}.text`), cta: t(`dashboard.empty.${c}.cta`) });
+const empty = define({
+  key: "empty", theme: "dashboard", group: "states", name: "Empty state", docs: "A list with nothing in it, with an optional action.",
+  organism: "EmptyPanel", axes: ["layout", "actions", "visual", "size"],
+  variants: [
+    ["illustrated", "With a picture and an action", { visual: "image" }, { ...emptyCase("tour") }],
+    ["orders", "No orders yet", {}, { icon: "shopping-bag", ...emptyCase("orders") }],
+    ["results", "Nothing found, plain", { layout: "plain" }, { icon: "search", ...emptyCase("results") }],
+    ["inbox", "Inbox is empty, no action", { actions: "none" }, { icon: "inbox", ...emptyCase("inbox") }],
+    ["compact", "Compact", { size: "compact" }, { icon: "inbox", ...emptyCase("inbox") }],
+    ["plainNoAction", "Plain, compact, no action", { layout: "plain", actions: "none", size: "compact" }, { icon: "search", ...emptyCase("results") }],
+  ],
+  sample: { id: "empty", ...emptyCase("orders"), ctaHref: "#/" },
+});
+
+const checklist = define({
+  key: "checklist", theme: "onboarding", group: "setup", name: "Setup checklist", docs: "Tasks to finish after sign-up, with progress.",
+  organism: "Checklist", axes: ["layout", "progress", "marker", "detail", "tone"], data: [d.checklist],
+  variants: [
+    ["card", "Card with a progress bar"],
+    ["expand", "Tasks that open", { detail: "expand" }],
+    ["plain", "Plain", { layout: "plain" }],
+    ["text", "Count as text", { progress: "text" }],
+    ["none", "No progress", { progress: "none", layout: "plain" }],
+    ["numbered", "Numbered", { marker: "number" }],
+    ["muted", "Muted, numbered, count", { marker: "number", progress: "text", tone: "muted" }],
+  ],
+  sample: { id: "checklist", title: t("onboarding.checklist.title"), tasks: ref("checklist"), empty: t("empty.tasks"), progressLabel: t("onboarding.checklist.progress") },
+});
+
+const stepper = define({
+  key: "stepper", theme: "onboarding", group: "setup", name: "Stepper", docs: "A multi-step form header with the current step.",
+  organism: "Stepper", axes: ["layout", "marker", "summary"], data: [d.steps],
+  variants: [
+    ["horizontal", "Horizontal"],
+    ["vertical", "Vertical", { layout: "vertical" }],
+    ["icons", "Icon markers", { marker: "icon" }],
+    ["bare", "Without the step text", { summary: "hide", layout: "vertical", marker: "icon" }],
+  ],
+  sample: { id: "stepper", title: t("onboarding.stepper.title"), steps: ref("steps"), current: 2, stepLabel: t("onboarding.stepper.stepLabel"), back: t("onboarding.stepper.back"), next: t("onboarding.stepper.next") },
+});
+
+const contact = define({
+  key: "contact", theme: "support", group: "contact", name: "Contact form", docs: "A message form, alone or beside the ways to reach us.",
+  organism: "ContactForm", axes: ["layout", "fields", "terms", "page", "tone"], data: [d.channels],
+  variants: [
+    ["single", "Single column, all fields"],
+    ["page", "A page of its own: a short form", { page: "full", fields: "short" }],
+    ["short", "Email and message only", { fields: "short" }],
+    ["split", "Beside the ways to reach us", { layout: "split" }],
+    ["consent", "With a consent line", { terms: "show" }],
+    ["muted", "Muted split, short", { layout: "split", fields: "short", tone: "muted", terms: "show" }],
+  ],
+  sample: { id: "contact", title: t("support.contact.title"), text: t("support.contact.text"), labels: t("support.contact.labels"), details: ref("channels") },
+});
+
+const channels = define({
+  key: "channels", theme: "support", group: "contact", name: "Support channels", docs: "Ways to get help: email, chat, docs.",
+  organism: "SupportChannels", axes: ["layout", "cols", "action", "tone"], data: [d.channels],
+  variants: [
+    ["grid", "Cards in a row"],
+    ["twoUp", "Two columns", { cols: "1-2" }],
+    ["list", "List", { layout: "list" }],
+    ["plain", "Muted, without links", { action: "none", tone: "muted" }],
+  ],
+  sample: { id: "channels", title: t("support.channels.title"), channels: ref("channels"), empty: t("empty.channels"), open: t("support.channels.open") },
+});
+
+
+const templates = define({
+  key: "templates", theme: "marketing", group: "gallery", name: "Template gallery", docs: "Template gallery: filters, a browse-all button and an 8-card MediaFrame grid.",
+  organism: "TemplateGrid", axes: ["cols", "tone", "density"], data: [d.templates, d.templateFilters],
+  variants: [
+    ["grid4", "Four columns, eight cards", { cols: "1-4", density: "default" }],
+    ["grid3", "Three columns", { cols: "1-3" }],
+    ["muted", "Muted, compact", { tone: "muted", density: "compact" }],
+    ["roomy", "Roomy", { density: "roomy" }],
+  ],
+  facts: [
+    { sel: '[data-testid="template-card"]', n: "@templates" },
+    { sel: '[data-testid="template-filter"]', n: "@templateFilters" },
+    { sel: '[data-testid="template-browse"]', n: 1 },
+  ],
+  sample: { id: "templates", title: t("vibe.templates.title"), templates: ref("templates"), filters: ref("templateFilters"), labels: t("vibe.templates"), browseHref: "#/", empty: t("empty.templates") },
+});
+
+export const moreBlocks = [announcement, cookie, newsletter, posts, postheader, auth, profile, metrics, chart, activity, empty, checklist, stepper, contact, channels, templates];
diff --git a/xgen/screens/src/authoring/gallery/blocks-page-trails.ts b/xgen/screens/src/authoring/gallery/blocks-page-trails.ts
new file mode 100644
index 0000000..c0ee965
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-page-trails.ts
@@ -0,0 +1,31 @@
+// Page heads with breadcrumbs: alone, with one figure, a note card or four key facts.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const p = (k: string) => t(`marketing.pageTrail.${k}`);
+
+const pagetrail = define({
+  key: "pagetrail", theme: "marketing", group: "page", name: "Page heading with breadcrumbs", docs: "Breadcrumbs over the badge, the heading and the lead; with one large figure, a note card or four key facts at the end.",
+  organism: "PageTrail", axes: ["aside", "tone"], data: [d.crumbs, d.stats],
+  variants: [
+    ["crumbs", "Breadcrumbs, badge, heading and lead"],
+    ["crumbsFigure", "With one large figure at the end", { aside: "figure" }],
+    ["crumbsNote", "With a note card at the end", { aside: "note" }],
+    ["keyFacts", "With four key facts beside it, muted", { aside: "facts", tone: "muted" }],
+  ],
+  facts: [
+    { sel: '[data-testid="crumb"]', n: 2 },
+    { sel: '[data-testid="page-figure"]', n: 1, when: { aside: "figure" } },
+    { sel: '[data-testid="page-note"]', n: 1, when: { aside: "note" } },
+    { sel: '[data-testid="page-fact"]', n: 4, when: { aside: "facts" } },
+    { sel: '[data-testid="page-fact"]', n: 0, when: { aside: ["none", "figure", "note"] } },
+  ],
+  sample: {
+    id: "pagetrail", title: p("title"), lead: p("lead"), badge: p("badge"), label: p("label"), crumbs: ref("crumbs"),
+    extras: { value: p("value"), caption: p("caption"), note: p("note"), icon: "package", facts: ref("stats") },
+  },
+});
+
+export const pageTrailBlocks = [pagetrail];
diff --git a/xgen/screens/src/authoring/gallery/blocks-post-showcase.ts b/xgen/screens/src/authoring/gallery/blocks-post-showcase.ts
new file mode 100644
index 0000000..991e3be
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-post-showcase.ts
@@ -0,0 +1,31 @@
+// Posts shown off: small cards beside an intro, one featured post beside its picture, cards with the text over the picture.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const p = (k: string) => t(`content.postShowcase.${k}`);
+
+const postshowcase = define({
+  key: "postshowcase", theme: "content", group: "blog", name: "Post showcase", docs: "Four small post cards beside an intro with a view-all link; the first post in detail beside its picture; or cards with the text on a panel over the picture, in two or three columns.",
+  organism: "PostShowcase", axes: ["layout", "cols", "mediaSide", "tone"], data: [d.posts],
+  variants: [
+    ["introCards", "Four small post cards first, the intro and a view-all link"],
+    ["featuredEnd", "The featured post beside its picture, muted", { layout: "featured", mediaSide: "end", tone: "muted" }],
+    ["overlay3", "Three cards with the text over the picture", { layout: "overlay" }],
+    ["overlay2", "Two wide cards with the text over the picture", { layout: "overlay", cols: "2" }],
+  ],
+  facts: [
+    { sel: '[data-testid="post-mini"]', n: 4, when: { layout: "intro" } },
+    { sel: '[data-testid="post-feature"]', n: 1, when: { layout: "featured" } },
+    { sel: '[data-testid="post-overlay"]', n: 3, when: { layout: "overlay", cols: "3" } },
+    { sel: '[data-testid="post-overlay"]', n: 2, when: { layout: "overlay", cols: "2" } },
+    { sel: '[data-testid="section-action"]', n: 1, when: { layout: "intro" } },
+  ],
+  sample: {
+    id: "postshowcase", title: p("title"), lead: p("lead"), badge: p("badge"), posts: ref("posts"), empty: t("empty.posts"), labels: t("content.labels"),
+    action: { label: p("action"), href: "#/articles" },
+  },
+});
+
+export const postShowcaseBlocks = [postshowcase];
diff --git a/xgen/screens/src/authoring/gallery/blocks-posts.ts b/xgen/screens/src/authoring/gallery/blocks-posts.ts
new file mode 100644
index 0000000..65a8e92
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-posts.ts
@@ -0,0 +1,37 @@
+// Post headers with more around the title: centered with figures and a share card, split beside the cover, or an outline beside it.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const p = (k: string) => t(`content.postSplit.${k}`);
+
+const postsplit = define({
+  key: "postsplit", theme: "content", group: "blog", name: "Post header, split", docs: "Tags, reading figures and an author card with share and save over a wide cover; the author, figures, tags and actions beside the cover; or the facts and related reading beside it.",
+  organism: "PostSplit", axes: ["layout", "mediaSide", "author", "cover", "actions", "tone"], data: [d.posts, d.posttags, d.outline],
+  variants: [
+    ["centerShare", "Centered: tags, figures and a share card over a wide cover", { layout: "center" }],
+    ["splitTags", "Author line, tags, share and save beside the cover"],
+    ["splitBioStart", "Cover first, an author card with the bio and one wide action", { mediaSide: "start", author: "bio", actions: "wide" }],
+    ["splitSquare", "A square cover, a wide action with share and save as icons", { cover: "square", actions: "icons" }],
+    ["outlineStart", "Cover first, the facts and related reading", { layout: "outline", mediaSide: "start" }],
+    ["splitStats", "An author card and figures beside the cover, muted", { author: "card", tone: "muted" }],
+  ],
+  facts: [
+    { sel: '[data-testid="post-author"]', n: 1, when: { layout: ["center", "split"] } },
+    { sel: '[data-testid="post-author"]', n: 0, when: { layout: "outline" } },
+    { sel: '[data-testid="post-tag"]', n: "@posttags", when: { layout: ["center", "split"] } },
+    { sel: '[data-testid="post-link"]', n: "@outline", when: { layout: "outline" } },
+    { sel: '[data-testid="post-link"]', n: 0, when: { layout: ["center", "split"] } },
+    { sel: '[data-testid="post-stats"]', n: 1, when: { layout: "center" } },
+    { sel: '[data-testid="post-save"]', n: 1, when: { actions: ["pair", "icons"] } },
+    { sel: '[data-testid="post-save"]', n: 0, when: { actions: "wide", layout: ["split", "outline"] } },
+    { sel: '[data-testid="action-primary"]', n: 1, when: { layout: ["split", "outline"] } },
+  ],
+  sample: {
+    id: "postsplit", post: { op: "pick", args: [ref("posts"), "post-static-first"] }, labels: p("labels"),
+    extras: { role: p("role"), bio: p("bio"), views: p("views"), likes: p("likes"), tags: ref("posttags"), outline: ref("outline") },
+  },
+});
+
+export const postBlocks = [postsplit];
diff --git a/xgen/screens/src/authoring/gallery/blocks-quotes.ts b/xgen/screens/src/authoring/gallery/blocks-quotes.ts
new file mode 100644
index 0000000..ccca392
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-quotes.ts
@@ -0,0 +1,39 @@
+// Split testimonials of the catalog: one quote beside a picture, a rating panel or over logos; stacked quotes; compact quotes; figures over a bento.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const q = (k: string) => t(`marketing.quoteSplit.${k}`);
+const LAYOUTS = ["media", "logos", "rating", "stack", "compact", "bento"];
+const only = (sel: string, n: number | string, on: string[]) => [{ sel, n, when: { layout: on } }, { sel, n: 0, when: { layout: LAYOUTS.filter((l) => !on.includes(l)) } }];
+
+const quotesplit = define({
+  key: "quotesplit", theme: "marketing", group: "proof", name: "Testimonials, split", docs: "One quote beside a picture, a rating panel or over logo tiles; stacked quotes beside a picture; four compact quotes; figures over a featured quote and a stack.",
+  organism: "QuoteSplit", axes: ["layout", "mediaSide", "tone"], data: [d.testimonials, d.stats, d.logos],
+  variants: [
+    ["quoteCard", "One quote card beside a picture"],
+    ["logoTiles", "Picture first, a quote over logo tiles", { layout: "logos", mediaSide: "start" }],
+    ["ratingPanel", "A quote beside a rating panel, muted", { layout: "rating", tone: "muted" }],
+    ["stackedCards", "Picture first, three stacked quotes", { layout: "stack", mediaSide: "start" }],
+    ["compact4", "Four compact quotes in a row", { layout: "compact" }],
+    ["bentoFigures", "Figures over a featured quote and a stack", { layout: "bento" }],
+  ],
+  facts: [
+    { sel: '[data-testid="quote"]', n: 1, when: { layout: ["media", "logos", "rating"] } },
+    { sel: '[data-testid="quote"]', n: 3, when: { layout: "stack" } },
+    { sel: '[data-testid="quote"]', n: "@testimonials", when: { layout: ["compact", "bento"] } },
+    ...only('[data-testid="quote-logo"]', 4, ["logos"]),
+    ...only('[data-testid="quote-rating"]', 1, ["rating"]),
+    ...only('[data-testid="quote-figures"]', 1, ["bento"]),
+    { sel: '[data-testid="action-primary"]', n: 1, when: { layout: ["media", "logos", "rating"] } },
+  ],
+  sample: {
+    id: "quotesplit", title: q("title"), lead: q("lead"), badge: q("badge"), quotes: ref("testimonials"), empty: t("empty.quotes"),
+    labels: { rating: t("testimonials.rating"), byLine: t("testimonials.byLine"), handleLine: t("testimonials.handleLine") },
+    extras: { stats: ref("stats"), logos: ref("logos"), rating: 5, score: q("score"), reviews: q("reviews") },
+    actions: { mode: "two", cta: q("cta"), href: "#/customers", secondary: q("secondary"), secondaryHref: "#/contact" },
+  },
+});
+
+export const quoteBlocks = [quotesplit];
diff --git a/xgen/screens/src/authoring/gallery/blocks-shells.ts b/xgen/screens/src/authoring/gallery/blocks-shells.ts
new file mode 100644
index 0000000..3d0966b
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-shells.ts
@@ -0,0 +1,52 @@
+// Dashboard shells of the catalog: twelve frames of a signed-in app that combine a top bar, a sidebar and a footer around placeholder cards.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const s = (k: string) => t(`dashboard.shells.${k}`);
+const when2 = (sel: string, n: number | string, axis: string, on: string | string[], off: string | string[]) => [{ sel, n, when: { [axis]: on } }, { sel, n: 0, when: { [axis]: off } }];
+
+/** the texts and links of a shell, shared by the gallery and the catalog pages */
+export const shellNav = {
+  label: s("label"), brand: t("site.header.brand"), links: ref("sidenav"), current: "item-orders",
+  subTitle: s("subTitle"), sub: ref("subnav"), subCurrent: "subitem-all",
+  search: s("search"), shortcut: s("shortcut"), expand: s("expand"), userName: s("userName"),
+  copyright: s("copyright"), footerLabel: s("footerLabel"), footer: ref("helplinks"),
+};
+
+const dashshell = define({
+  key: "dashshell", theme: "dashboard", group: "layout", name: "Dashboard shell", docs: "Twelve frames of a signed-in app around empty cards: a top bar across the shell or over the content, with or without search; a wide, rail, collapsed, two-level or no sidebar, at the start or the end; a footer across the shell, under the content or none.",
+  organism: "DashboardShell", axes: ["topbar", "search", "sidebar", "side", "footer", "content"], data: [d.sidenav, d.subnav, d.helplinks],
+  variants: [
+    ["classic", "Top bar across, wide sidebar"],
+    ["inset", "Top bar over the content, footer under it", { topbar: "inset", footer: "inset", content: "split" }],
+    ["rail", "Top bar across, icon rail, no search", { sidebar: "rail", search: "hide", content: "list" }],
+    ["railFooter", "Icon rail, top bar over the content, footer across", { topbar: "inset", sidebar: "rail", footer: "full" }],
+    ["collapsed", "Collapsed sidebar, top bar over the content", { topbar: "inset", sidebar: "collapsed", content: "split" }],
+    ["twoLevel", "Two-level sidebar, footer under the content", { topbar: "inset", search: "hide", sidebar: "twolevel", footer: "inset", content: "list" }],
+    ["twoLevelFull", "Two-level sidebar under a top bar, footer across", { sidebar: "twolevel", footer: "full", content: "split" }],
+    ["end", "Wide sidebar at the end, footer across", { side: "end", footer: "full", content: "split" }],
+    ["railEnd", "Icon rail at the end, top bar over the content", { topbar: "inset", search: "hide", sidebar: "rail", side: "end", footer: "inset" }],
+    ["topOnly", "Top bar with the links, no sidebar", { sidebar: "none", footer: "full" }],
+    ["sideOnly", "Wide sidebar, no top bar", { topbar: "none", footer: "inset", content: "list" }],
+    ["collapsedEnd", "Collapsed sidebar at the end, no top bar", { topbar: "none", sidebar: "collapsed", side: "end", footer: "full", content: "split" }],
+  ],
+  facts: [
+    { sel: '[data-testid="dashboard-shell"]', n: 1 },
+    ...when2('[data-testid="topbar"]', 1, "topbar", ["full", "inset"], "none"),
+    ...when2('[data-testid="sidebar"]', 1, "sidebar", ["wide", "rail", "collapsed", "twolevel"], "none"),
+    ...when2('[data-testid="subnav"]', 1, "sidebar", "twolevel", ["wide", "rail", "collapsed", "none"]),
+    ...when2('[data-testid="toggle"]', 1, "sidebar", "collapsed", ["wide", "rail", "twolevel", "none"]),
+    ...when2('[data-testid="footer"]', 1, "footer", ["full", "inset"], "none"),
+    { sel: '[data-testid="sidebar"] [data-testid="items"] [data-testid="item"]', n: "@sidenav", when: { sidebar: ["wide", "rail", "collapsed", "twolevel"] } },
+    { sel: '[data-testid="subnav"] [data-testid="item"]', n: "@subnav", when: { sidebar: "twolevel" } },
+    { sel: '[data-testid="footer"] li', n: "@helplinks", when: { footer: ["full", "inset"] } },
+    { sel: '[data-testid="panel"]', n: 5, when: { content: "grid" } },
+    { sel: '[data-testid="panel"]', n: 3, when: { content: "split" } },
+    { sel: '[data-testid="panel"]', n: 1, when: { content: "list" } },
+  ],
+  sample: { id: "dashshell", title: s("title"), nav: shellNav },
+});
+
+export const shellBlocks = [dashshell];
diff --git a/xgen/screens/src/authoring/gallery/blocks-shop.ts b/xgen/screens/src/authoring/gallery/blocks-shop.ts
new file mode 100644
index 0000000..308f21d
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-shop.ts
@@ -0,0 +1,105 @@
+// Commerce blocks of the catalog: the store front, delivery and pickup, the product details, the cart page and drawer, and the checkout.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const c = (k: string) => t(`commerce.${k}`);
+const pick = (from: string, id: string) => ({ op: "pick", args: [ref(from), id] });
+const shown = (sel: string, axis: string, on: string | string[], off: string | string[]) => [{ sel, n: 1, when: { [axis]: on } }, { sel, n: 0, when: { [axis]: off } }];
+
+const storehero = define({
+  key: "storehero", theme: "commerce", group: "storefront", name: "Store hero", docs: "The hero of a store with promises under the actions, beside a picture with an offer card or over a faint picture.",
+  organism: "StoreHero", axes: ["layout", "mediaSide", "tone"], data: [d.perks],
+  variants: [
+    ["overlay", "Picture with an offer card"],
+    ["overlayStart", "Picture at the start", { mediaSide: "start" }],
+    ["backdrop", "Text over a faint picture", { layout: "backdrop" }],
+    ["muted", "Muted, one action", { tone: "muted" }, { actions: { mode: "one", cta: c("storeHero.cta"), href: "#/catalog" } }],
+  ],
+  facts: [{ sel: '[data-testid="perk"]', n: 3 }, ...shown('[data-testid="offer-card"]', "layout", "overlay", "backdrop"), ...shown('[data-testid="backdrop"]', "layout", "backdrop", "overlay")],
+  sample: {
+    id: "storehero", title: c("storeHero.title"), lead: c("storeHero.lead"), badge: c("storeHero.badge"), perks: ref("perks"), card: c("storeHero.card"),
+    actions: { mode: "two", cta: c("storeHero.cta"), href: "#/catalog", secondary: c("storeHero.secondary"), secondaryHref: "#/delivery" },
+  },
+});
+
+const usp = define({
+  key: "usp", theme: "commerce", group: "storefront", name: "Store promises", docs: "Free delivery, returns, warranty and help in one band.",
+  organism: "UspStrip", axes: ["layout", "tone", "density"], data: [d.perks],
+  variants: [
+    ["strip", "Muted strip"],
+    ["cards", "Cards under a heading", { layout: "cards" }, { title: c("usp.title") }],
+    ["stripCompact", "Muted strip, compact", { density: "compact" }],
+    ["bar", "Thin bar of icons", { layout: "bar", density: "compact" }],
+    ["barMuted", "Thin bar, muted", { layout: "bar", tone: "muted", density: "compact" }],
+  ],
+  facts: [{ sel: '[data-testid="item"]', n: "@perks" }],
+  sample: { id: "usp", perks: ref("perks"), empty: t("empty.perks") },
+});
+
+const zones = define({
+  key: "zones", theme: "commerce", group: "delivery", name: "Delivery zones", docs: "Delivery zones and their prices as a table or as cards.",
+  organism: "ZoneTable", axes: ["layout", "tone", "density"], data: [d.zones],
+  variants: [["table", "Table"], ["cards", "Cards", { layout: "cards" }], ["tableMuted", "Table, muted, compact", { tone: "muted", density: "compact" }]],
+  facts: [{ sel: '[data-testid="item"]', n: "@zones" }, ...shown('[data-testid="zone-table"]', "layout", "table", "cards")],
+  sample: { id: "zones", title: c("zones.title"), lead: c("zones.lead"), zones: ref("zones"), empty: t("empty.zones"), labels: c("zones") },
+});
+
+const slots = define({
+  key: "slots", theme: "commerce", group: "delivery", name: "Delivery window", docs: "Days with their delivery windows as radio chips, beside the zone card.",
+  organism: "SlotBoard", axes: ["layout", "item", "tone"], data: [d.days, d.zones],
+  variants: [["split", "Days beside the zone card"], ["plain", "Plain days", { item: "plain" }], ["stacked", "Days only, muted", { layout: "stacked", tone: "muted" }]],
+  facts: [{ sel: '[data-testid="day"]', n: "@days" }, { sel: 'input[type="radio"]', n: 12 }, { sel: 'input[type="radio"]:disabled', n: 4 }, ...shown('[data-testid="aside"]', "layout", "split", "stacked")],
+  sample: { id: "slots", title: c("slots.title"), lead: c("slots.lead"), days: ref("days"), empty: t("empty.days"), zone: pick("zones", "zone-central"), labels: c("slots") },
+});
+
+const delivery = define({
+  key: "delivery", theme: "commerce", group: "delivery", name: "Delivery info", docs: "How delivery works: the facts, then the zones.",
+  organism: "DeliveryInfo", axes: ["layout", "tone", "density"], data: [d.deliveryfacts, d.zones],
+  variants: [["full", "Facts over zone cards"], ["split", "Facts beside a list of zones", { layout: "split" }], ["facts", "Facts only, muted, compact", { layout: "facts", tone: "muted", density: "compact" }]],
+  facts: [{ sel: '[data-testid="fact"]', n: "@deliveryfacts" }, { sel: '[data-testid="zone"]', n: "@zones", when: { layout: ["full", "split"] } }, { sel: '[data-testid="zone"]', n: 0, when: { layout: "facts" } }],
+  sample: { id: "delivery", title: c("delivery.title"), lead: c("delivery.lead"), facts: ref("deliveryfacts"), zones: ref("zones"), labels: c("delivery") },
+});
+
+const locations = define({
+  key: "locations", theme: "commerce", group: "delivery", name: "Store locations", docs: "The stores with address, hours, phone and services.",
+  organism: "StoreLocations", axes: ["layout", "tone"], data: [d.stores],
+  variants: [["cards", "Cards"], ["list", "One row per store, muted", { layout: "list", tone: "muted" }], ["map", "Beside a map", { layout: "map" }]],
+  facts: [{ sel: '[data-testid="item"]', n: "@stores" }, ...shown('[data-slot="media-frame"]', "layout", "map", ["cards", "list"])],
+  sample: { id: "locations", title: c("stores.title"), lead: c("stores.lead"), stores: ref("stores"), empty: t("empty.stores"), kinds: c("stores.kinds"), labels: c("stores") },
+});
+
+const productinfo = define({
+  key: "productinfo", theme: "commerce", group: "product", name: "Product details", docs: "Texts in an accordion beside a card of specs.",
+  organism: "ProductInfo", axes: ["layout", "expand", "tone"], data: [d.details, d.specs],
+  variants: [["split", "Specs beside the texts"], ["stacked", "Specs below", { layout: "stacked" }], ["closed", "All closed, muted", { expand: "none", tone: "muted" }]],
+  facts: [{ sel: "details", n: "@details" }, { sel: '[data-testid="spec"]', n: "@specs" }, ...shown("details[open]", "expand", "first", "none")],
+  sample: { id: "productinfo", title: c("info.title"), details: ref("details"), specs: ref("specs"), labels: c("info") },
+});
+
+const cartpage = define({
+  key: "cartpage", theme: "commerce", group: "checkout", name: "Cart page", docs: "The cart lines beside a summary with a promo code and a free-delivery bar.",
+  organism: "ShoppingCart", axes: ["layout", "promo", "progress", "tone"], data: [d.cart, d.summary, d.promos],
+  variants: [["split", "Summary beside the lines"], ["stacked", "Summary below", { layout: "stacked" }], ["plain", "No promo code, no bar, muted", { promo: "hide", progress: "hide", tone: "muted" }]],
+  facts: [{ sel: '[data-testid="item"]', n: "@cart" }, { sel: '[data-testid="code"]', n: "@promos", when: { promo: "show" } }, { sel: '[data-testid="code"]', n: 0, when: { promo: "hide" } }, ...shown('[data-testid="progress"]', "progress", "show", "hide")],
+  sample: { id: "cartpage", title: c("cartPage.title"), lines: ref("cart"), rows: ref("summary"), promos: ref("promos"), labels: c("cart"), totals: c("totals"), actions: c("cartPage") },
+});
+
+const cartdrawer = define({
+  key: "cartdrawer", theme: "commerce", group: "checkout", name: "Cart drawer", docs: "The cart drawer in its open state, filled or empty.",
+  organism: "CartDrawer", axes: ["state", "media"], data: [d.cart, d.summary],
+  variants: [["filled", "Open, with lines"], ["compact", "No pictures", { media: "none" }], ["empty", "Empty", { state: "empty" }]],
+  facts: [{ sel: '[data-testid="drawer"]', n: 1 }, { sel: '[data-testid="item"]', n: "@cart", when: { state: "filled" } }, ...shown('[data-testid="empty"]', "state", "empty", "filled")],
+  sample: { id: "cartdrawer", lines: ref("cart"), rows: ref("summary"), labels: c("cart"), drawer: c("drawer") },
+});
+
+const checkout = define({
+  key: "checkout", theme: "commerce", group: "checkout", name: "Checkout", docs: "Contacts, address, a window and the payment beside a sticky order summary.",
+  organism: "CheckoutForm", axes: ["layout", "summary", "tone"], data: [d.days, d.payments, d.cart, d.summary, d.promos],
+  variants: [["cards", "Steps in cards"], ["numbered", "Numbered steps", { layout: "numbered" }], ["noSummary", "Without the summary, muted", { summary: "none", tone: "muted" }]],
+  facts: [{ sel: '[data-testid="step"]', n: 4 }, { sel: '[data-testid="payment"]', n: "@payments" }, { sel: '[data-testid="day"]', n: "@days" }, ...shown('[data-testid="aside"]', "summary", "aside", "none")],
+  sample: { id: "checkout", title: c("checkout.title"), days: ref("days"), payments: ref("payments"), lines: ref("cart"), rows: ref("summary"), promos: ref("promos"), labels: c("checkout"), totals: c("totals") },
+});
+
+export const shopBlocks = [storehero, usp, zones, slots, delivery, locations, productinfo, cartpage, cartdrawer, checkout];
diff --git a/xgen/screens/src/authoring/gallery/blocks-story-tabs.ts b/xgen/screens/src/authoring/gallery/blocks-story-tabs.ts
new file mode 100644
index 0000000..304e73f
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-story-tabs.ts
@@ -0,0 +1,27 @@
+// A story in steps: year tabs over a panel, or a picture with arrows and dots beside the heading.
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const s = (k: string) => t(`company.storyTabs.${k}`);
+
+const storytabs = define({
+  key: "storytabs", theme: "content", group: "story", name: "Story in steps", docs: "Year tabs over the panel of the chosen year, or the heading beside a picture with arrows and one dot per step. Choosing a step is an event.",
+  organism: "StoryTabs", axes: ["layout", "tone"], data: [d.milestones],
+  variants: [
+    ["yearTabs", "Year tabs over the panel of the chosen year"],
+    ["carouselSplit", "The heading beside a picture with arrows and dots", { layout: "carousel" }],
+    ["yearTabsMuted", "Year tabs, muted", { tone: "muted" }],
+  ],
+  facts: [
+    { sel: '[data-testid="story-tab"]', n: "@milestones", when: { layout: "years" } },
+    { sel: '[data-testid="story-panel"]', n: 1, when: { layout: "years" } },
+    { sel: '[data-testid="story-dot"]', n: "@milestones", when: { layout: "carousel" } },
+    { sel: '[data-testid="story-arrow"]', n: 2, when: { layout: "carousel" } },
+    { sel: '[data-testid="story-tab"]', n: 0, when: { layout: "carousel" } },
+  ],
+  sample: { id: "storytabs", title: s("title"), lead: s("lead"), badge: s("badge"), steps: ref("milestones"), empty: t("empty.milestones"), active: "milestone-runtimes", labels: s("labels") },
+});
+
+export const storyTabsBlocks = [storytabs];
diff --git a/xgen/screens/src/authoring/gallery/blocks-vibe.ts b/xgen/screens/src/authoring/gallery/blocks-vibe.ts
new file mode 100644
index 0000000..2499d0b
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks-vibe.ts
@@ -0,0 +1,284 @@
+// The blocks of the second catalog round: navigation and footers, feature showcases, pricing tools, sign-in pages, app shells, guidance and states.
+// Each is an organism plus axes and named variants; `facts` tell the e2e what every variant must show (a selector and how many).
+import { ref } from "../../build";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import * as d from "./blocks-data";
+
+const v = (k: string) => t(`vibe.${k}`);
+const sec = (k: string) => ({ id: k, title: v(`${k}.title`) });
+const MUTED_COMPACT = { tone: "muted", density: "compact" };
+
+const navbar = define({
+  key: "navbar", theme: "marketing", group: "navigation", name: "Navigation bar", docs: "A top bar in four shapes: inline, split around the brand, with a search field, and transparent over a picture.",
+  organism: "NavBar", axes: ["layout", "over", "actions.mode", "tone"], data: [d.navlinks], events: { theme: "toggleTheme" },
+  variants: [["inline", "Brand, links and a button"], ["split", "Brand in the middle", { layout: "split" }], ["search", "With a search field", { layout: "search" }], ["media", "Transparent over a picture", { over: "media" }], ["plain", "Without a button", { "actions.mode": "none" }], ["inverse", "On a dark hero band with Log In", { tone: "inverse" }, { actions: { login: t("site.header.login"), loginHref: "#/login" } }]],
+  facts: [
+    { sel: '[data-testid="nav-link"]', n: "@navlinks" },
+    { sel: '[data-testid="header-cta"]', n: 1, when: { "actions.mode": "cta" } },
+    { sel: '[data-testid="header-cta"]', n: 0, when: { "actions.mode": "none" } },
+    { sel: '[data-testid="palette"]', n: 1, when: { layout: "search" } },
+    { sel: '[data-testid="palette"]', n: 0, when: { layout: ["inline", "split"] } },
+    { sel: '[data-testid="over"]', n: 1, when: { over: "media" } },
+    { sel: '[data-testid="over"]', n: 0, when: { over: "none" } },
+  ],
+  sample: {
+    label: v("nav.label"), brand: t("site.header.brand"), links: ref("navlinks"), current: "link-product",
+    actions: { cta: t("site.header.cta"), href: "#/", login: t("site.header.login"), loginHref: "#/login" },
+    search: { label: v("nav.search"), shortcut: v("nav.shortcut") },
+  },
+});
+
+const megamenu = define({
+  key: "megamenu", theme: "marketing", group: "navigation", name: "Mega menu", docs: "A top bar whose first item opens a wide panel of link groups, with an optional promo card.",
+  organism: "MegaMenu", axes: ["panel", "cols", "promo"], data: [d.navlinks, d.megagroups],
+  variants: [["open", "Panel open, three columns"], ["closed", "Panel closed", { panel: "closed" }], ["twoCols", "Two columns", { cols: "2" }], ["promo", "With a promo card", { promo: "card" }]],
+  facts: [
+    { sel: '[data-testid="mega-trigger"]', n: 1 },
+    { sel: '[data-testid="mega-panel"]', n: 1, when: { panel: "open" } },
+    { sel: '[data-testid="mega-panel"]', n: 0, when: { panel: "closed" } },
+    { sel: '[data-testid="mega-panel"] [data-testid="item"]', n: "@megagroups", when: { panel: "open" } },
+    { sel: '[data-testid="mega-panel"] [data-testid="item"]', cols: 3, when: { panel: "open", cols: "3" } },
+    { sel: '[data-testid="mega-panel"] [data-testid="item"]', cols: 2, when: { panel: "open", cols: "2" } },
+    { sel: '[data-testid="promo"]', n: 1, when: { panel: "open", promo: "card" } },
+  ],
+  sample: { label: v("nav.label"), brand: t("site.header.brand"), trigger: v("mega.trigger"), links: ref("navlinks"), groups: ref("megagroups"), promoTitle: v("mega.promoTitle"), promoText: v("mega.promoText") },
+});
+
+const sitemap = define({
+  key: "sitemap", theme: "marketing", group: "navigation", name: "Sitemap footer", docs: "A footer with the brand, groups of links and the copyright; a single row, a sign-up first or a status pill.",
+  organism: "SitemapFooter", axes: ["layout", "signup.mode", "status.mode", "density"], data: [d.sitemap],
+  variants: [["columns", "One column per group"], ["card", "Groups in one rounded card", { layout: "card" }], ["row", "Single row", { layout: "row" }], ["newsletter", "Sign-up first", { "signup.mode": "first" }], ["status", "With a status pill", { "status.mode": "show" }], ["compact", "Compact", { density: "compact" }]],
+  facts: [
+    { sel: '[data-testid="group"]', n: "@sitemap" },
+    { sel: '[data-testid="group"]', cols: "@sitemap", when: { layout: "columns" } },
+    { sel: '[data-testid="signup"]', n: 1, when: { "signup.mode": "first" } },
+    { sel: '[data-testid="signup"]', n: 0, when: { "signup.mode": "none" } },
+    { sel: '[data-slot="pill"]', n: 1, when: { "status.mode": "show" } },
+  ],
+  sample: { id: "sitemap", label: v("sitemap.label"), brand: t("site.header.brand"), tagline: v("sitemap.tagline"), copyright: v("sitemap.copyright"), groups: ref("sitemap"),
+    signup: { title: v("sitemap.signupTitle"), label: v("sitemap.signupLabel"), submit: v("sitemap.signupSubmit") }, status: { label: v("sitemap.status") } },
+});
+
+const bento = define({
+  key: "bento", theme: "marketing", group: "features", name: "Bento grid", docs: "Tiles of different sizes in one grid; the large tiles hold the main features.",
+  organism: "BentoGrid", axes: ["layout", "media", "tone", "density"], data: [d.bento],
+  variants: [["bento", "Mixed sizes"], ["even", "Even tiles", { layout: "even" }], ["images", "With pictures", { media: "image" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="item"]', n: "@bento" }, { sel: '[data-slot="media-frame"]', n: 1, when: { media: "image" } }, { sel: '[data-slot="media-frame"]', n: 0, when: { media: "none" } }],
+  sample: { ...sec("bento"), tiles: ref("bento"), empty: t("empty.tiles") },
+});
+
+const featuretabs = define({
+  key: "featuretabs", theme: "marketing", group: "features", name: "Feature tabs", docs: "Features as tabs; the chosen one fills the panel beside or below the tab list.",
+  organism: "FeatureTabs", axes: ["panel", "tone", "density"], data: [d.features],
+  variants: [["split", "Panel beside the tabs"], ["stack", "Panel below the tabs", { panel: "stack" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[role="tab"]', n: "@features" }, { sel: '[role="tabpanel"]', n: 1 }],
+  sample: { ...sec("tabs"), features: ref("features"), empty: t("empty.features"), tabsLabel: v("tabs.label"), active: "feature-clear" },
+});
+
+const accordion = define({
+  key: "accordion", theme: "marketing", group: "features", name: "Feature accordion", docs: "Features as a list of disclosures, the first one open, with an optional picture.",
+  organism: "FeatureAccordion", axes: ["expand", "media", "tone", "density"], data: [d.features],
+  variants: [["first", "First open"], ["closed", "All closed", { expand: "none" }], ["media", "With a picture", { media: "image" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: "details", n: "@features" }, { sel: "details[open]", n: 1, when: { expand: "first" } }, { sel: "details[open]", n: 0, when: { expand: "none" } }, { sel: '[data-slot="media-frame"]', n: 1, when: { media: "image" } }, { sel: '[data-slot="media-frame"]', n: 0, when: { media: "none" } }],
+  sample: { ...sec("accordion"), features: ref("features"), empty: t("empty.features") },
+});
+
+const sticky = define({
+  key: "sticky", theme: "marketing", group: "features", name: "Sticky feature list", docs: "A picture that stays in view beside a list of features. Following the section being read is a port contract (ScrollSpy).",
+  organism: "FeatureSticky", axes: ["mediaSide", "item", "tone", "density"], data: [d.features],
+  variants: [["end", "Picture at the end"], ["start", "Picture at the start", { mediaSide: "start" }], ["card", "Features as cards", { item: "card" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="item"]', n: "@features" }, { sel: '[data-slot="media-frame"]', n: 1 }],
+  sample: { ...sec("sticky"), features: ref("features"), empty: t("empty.features"), active: "feature-clear" },
+});
+
+const iconwall = define({
+  key: "iconwall", theme: "marketing", group: "features", name: "Icon wall", docs: "Many small features as icons with a name: tiles or chips in three to six columns.",
+  organism: "IconWall", axes: ["cols", "item", "tone", "density"], data: [d.features],
+  variants: [["tiles4", "Tiles, four columns"], ["tiles3", "Tiles, three columns", { cols: "3" }], ["chips6", "Chips, six columns", { cols: "6", item: "chip" }], ["chips4", "Chips, four columns", { item: "chip" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="item"]', n: "@features" }, { sel: '[data-testid="item"]', cols: "$cols", when: { item: "tile" } }],
+  sample: { ...sec("wall"), features: ref("features"), empty: t("empty.features") },
+});
+
+const beforeafter = define({
+  key: "beforeafter", theme: "marketing", group: "features", name: "Before and after", docs: "Two sides of the same points: how it was and how it is, as two cards or as rows.",
+  organism: "BeforeAfter", axes: ["layout", "icons", "tone", "density"], data: [d.beforeafter],
+  variants: [["cards", "Two cards"], ["rows", "One row per point", { layout: "rows" }], ["plain", "Without icons", { icons: "hide" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="side"]', n: 2, when: { layout: "cards" } }, { sel: '[data-testid="item"]', n: "@beforeafter*2", when: { layout: "cards" } }, { sel: '[data-testid="item"]', n: "@beforeafter", when: { layout: "rows" } }, { sel: "svg", n: 0, when: { icons: "hide" } }],
+  sample: { ...sec("beforeafter"), points: ref("beforeafter"), empty: t("empty.points"), labels: v("beforeafter.labels") },
+});
+
+const proof = define({
+  key: "proof", theme: "marketing", group: "proof", name: "Logos and stats", docs: "A bar of customer logos and a row of key figures together.",
+  organism: "ProofBand", axes: ["layout", "logoStyle", "tone", "density"], data: [d.logos, d.stats],
+  variants: [["above", "Logos above the figures"], ["beside", "Logos beside the figures", { layout: "beside" }], ["icons", "Icons only", { logoStyle: "icon" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="logo"]', n: "@logos" }, { sel: '[data-testid="stat"]', n: "@stats" }],
+  sample: { ...sec("proof"), logos: ref("logos"), empty: t("empty.logos"), stats: ref("stats") },
+});
+
+const videos = define({
+  key: "videos", theme: "marketing", group: "proof", name: "Video testimonials", docs: "Customer videos as thumbnails with a play button. Playing is a port contract (VideoEmbed).",
+  organism: "VideoGrid", axes: ["cols", "caption", "tone", "density"], data: [d.testimonials],
+  variants: [["grid3", "Three columns"], ["grid2", "Two columns", { cols: "1-2" }], ["overlay", "Caption over the picture", { caption: "overlay" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="item"]', n: "@testimonials" }, { sel: '[data-testid="item"]', cols: "$cols" }, { sel: '[data-testid="play"]', n: "@testimonials" }],
+  sample: { ...sec("videos"), quotes: ref("testimonials"), empty: t("empty.quotes"), playLabel: v("videos.play"), byLine: t("testimonials.byLine") },
+});
+
+const compare = define({
+  key: "compare", theme: "marketing", group: "pricing", name: "Comparison table", docs: "Plans, or a product and its rivals, in columns, and the features in rows; yes and no as marks.",
+  organism: "ComparisonTable", axes: ["highlight", "tone", "density"], data: [d.compare, d.rivals],
+  variants: [["plans", "Plans"], ["highlight", "Middle column stands out", { highlight: "middle" }], ["rivals", "Us and the rivals", { highlight: "middle", tone: "muted" }, { rows: ref("rivals"), title: v("rivals.title"), labels: v("rivals.labels") }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="item"]', n: 5 }, { sel: "th[scope=col]", n: 4 }, { sel: '[data-highlight="true"]', n: 1, when: { highlight: "middle" } }, { sel: '[data-highlight="true"]', n: 0, when: { highlight: "none" } }],
+  sample: { ...sec("compare"), rows: ref("compare"), empty: t("empty.rows"), labels: v("compare.labels") },
+});
+
+const usage = define({
+  key: "usage", theme: "marketing", group: "pricing", name: "Usage calculator", docs: "A slider for how much is used and the price it gives. The estimate follows the slider; the page keeps the value.",
+  organism: "UsageCalculator", axes: ["layout", "ends", "tone"],
+  variants: [["card", "Card"], ["plain", "Plain", { layout: "plain" }], ["noEnds", "Without the end labels", { ends: "hide" }], ["muted", "Muted", { tone: "muted" }]],
+  facts: [{ sel: 'input[type="range"]', n: 1 }, { sel: '[data-testid="estimate"]', n: 1 }],
+  sample: {
+    ...sec("usage"), text: v("usage.text"), usage: 5000,
+    slider: { min: 100, max: 10000, label: v("usage.slider"), unit: v("usage.unit") },
+    price: { rate: 1, currency: v("usage.currency"), label: v("usage.estimate") },
+    cta: v("usage.cta"), href: "#/",
+  },
+});
+
+const credits = define({
+  key: "credits", theme: "marketing", group: "pricing", name: "Credit packs", docs: "One-off packs of credits with a price: tiles in two or four columns, or rows.",
+  organism: "CreditPacks", axes: ["cols", "item", "tone", "density"], data: [d.credits],
+  variants: [["tiles4", "Tiles, four columns"], ["tiles2", "Tiles, two columns", { cols: "2" }], ["rows", "Rows", { item: "row" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="item"]', n: "@credits" }, { sel: '[data-testid="buy"]', n: "@credits" }],
+  sample: { ...sec("credits"), packs: ref("credits"), empty: t("empty.packs"), badges: v("credits.badges"), buy: v("credits.buy") },
+});
+
+const pagehead = define({
+  key: "pagehead", theme: "marketing", group: "page", name: "Page heading", docs: "The head of an inner page: the heading, one sentence and an optional action.",
+  organism: "PageIntro", axes: ["align", "tone", "density"],
+  variants: [["start", "Left aligned"], ["center", "Centered", { align: "center" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="section"]', n: 1 }],
+  sample: { id: "pagehead", title: v("pagehead.title"), text: v("pagehead.text"), cta: v("pagehead.cta"), href: "#/" },
+});
+
+const authCase = (m: string) => ({ title: t(`auth.${m}.title`), text: t(`auth.${m}.text`), submit: t(`auth.${m}.submit`), switchTo: { text: t(`auth.${m}.switchText`), link: t(`auth.${m}.switchLink`) } });
+const authpage = define({
+  key: "authpage", theme: "account", group: "auth", name: "Sign-in page", docs: "A whole sign-in page: the card beside a picture panel, on a tinted page, or alone; with any mode of the card.",
+  organism: "AuthLayout", axes: ["layout", "side", "mode", "social"],
+  variants: [
+    ["split", "Card beside a picture"], ["splitStart", "Picture at the start", { side: "start" }], ["centered", "Card on a tinted page", { layout: "centered" }], ["minimal", "Card alone", { layout: "minimal" }],
+    ["signup", "Sign up", { mode: "signup" }, authCase("signup")], ["reset", "Reset password", { mode: "reset", layout: "centered" }, authCase("reset")],
+    ["magic", "Magic link only", { mode: "magic", layout: "minimal" }, authCase("magic")], ["social", "With other sign-in options", { social: "show" }], ["socialFirst", "Other options first", { social: "first", layout: "centered" }],
+  ],
+  facts: [
+    { sel: '[data-testid="auth-layout"]', n: 1 }, { sel: '[data-testid="auth-card"]', n: 1 }, { sel: '[data-testid="visual"]', n: 1, when: { layout: "split" } }, { sel: '[data-testid="visual"]', n: 0, when: { layout: ["centered", "minimal"] } },
+    { sel: '[data-testid="social"]', n: 1, when: { social: ["show", "first"], mode: ["signin", "signup"] } }, { sel: '[data-testid="social"]', n: 0, when: { social: "none" } },
+    { sel: '[data-testid="field"]', n: 2, when: { mode: "signin" } }, { sel: '[data-testid="field"]', n: 3, when: { mode: "signup" } }, { sel: '[data-testid="field"]', n: 1, when: { mode: ["reset", "magic"] } },
+  ],
+  sample: {
+    id: "authpage", ...authCase("signin"), labels: t("auth.labels"),
+    switchTo: { text: t("auth.signin.switchText"), link: t("auth.signin.switchLink"), href: "#/" },
+    visual: { title: v("authpage.visualTitle"), text: v("authpage.visualText") },
+  },
+});
+
+const wizard = define({
+  key: "wizard", theme: "account", group: "auth", name: "Sign-up wizard", docs: "A sign-up in steps with a progress bar or a list of steps; back and next move between them.",
+  organism: "SignupWizard", axes: ["progress", "layout"], data: [d.wizard],
+  variants: [["bar", "Progress bar"], ["list", "List of steps", { progress: "list" }], ["plain", "Without a card", { layout: "plain" }], ["second", "Second step, list of steps, no card", { progress: "list", layout: "plain" }, { current: 2 }]],
+  facts: [{ sel: '[data-testid="wizard"]', n: 1 }, { sel: '[data-testid="step"]', n: 1 }, { sel: '[data-testid="step-item"]', n: "@wizard", when: { progress: "list" } }, { sel: "progress, [role=progressbar]", n: 1, when: { progress: "bar" } }, { sel: '[data-testid="field"]', n: 2 }],
+  sample: { id: "wizard", title: v("wizard.title"), steps: ref("wizard"), labels: v("wizard.labels"), current: 1 },
+});
+
+/** the chart and activity panels shared by the app shell and the dashboard overview */
+const overviewChart = { title: t("dashboard.chart.title"), text: t("dashboard.chart.text"), summary: t("dashboard.chart.summary"), series: ref("series") };
+const overviewActivity = { title: t("dashboard.activity.title"), text: t("dashboard.activity.text"), events: ref("activity") };
+
+const shell = define({
+  key: "shell", theme: "dashboard", group: "layout", name: "App shell", docs: "The frame of a signed-in app with a first screen: a sidebar, a top bar, or three panes.",
+  organism: "AppShell", axes: ["layout", "density"], data: [d.sidenav, d.metrics, d.series, d.activity],
+  variants: [["sidebar", "Sidebar and content"], ["top", "Top bar and content", { layout: "top" }], ["panes", "Three panes", { layout: "panes" }], ["dense", "Sidebar, compact", { density: "compact" }]],
+  facts: [{ sel: '[data-testid="app-shell"]', n: 1 }, { sel: '[data-testid="sidebar"]', n: 1, when: { layout: ["sidebar", "panes"] } }, { sel: '[data-testid="sidebar"]', n: 0, when: { layout: "top" } }, { sel: '[data-testid="nav-bar"]', n: 1, when: { layout: "top" } }, { sel: '[data-testid="app-main"] [data-testid="item"]', n: "@metrics" }, { sel: '[data-slot="bar-chart"]', n: 1 }],
+  sample: {
+    ...sec("shell"),
+    nav: { label: v("sidebar.label"), brand: t("site.header.brand"), links: ref("sidenav"), current: "item-overview" },
+    user: { name: v("sidebar.userName"), email: v("sidebar.userEmail") },
+    search: { label: v("nav.search"), shortcut: v("nav.shortcut") },
+    metrics: ref("metrics"), chart: overviewChart, activity: overviewActivity,
+  },
+});
+
+const overview = define({
+  key: "overview", theme: "dashboard", group: "widgets", name: "Dashboard overview", docs: "Counters, a chart and recent activity in one section.",
+  organism: "DashboardOverview", axes: ["layout", "cols", "tone", "density"], data: [d.metrics, d.series, d.activity],
+  variants: [["split", "Chart beside the activity"], ["stacked", "Chart above the activity", { layout: "stacked" }], ["twoCols", "Two counters per row", { cols: "2" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="items"] > [data-testid="item"]', n: "@metrics" }, { sel: '[data-slot="bar-chart"]', n: 1 }, { sel: '[data-slot="timeline"]', n: 1 }, { sel: '[data-testid="panels"] > section', cols: 2, when: { layout: "split" } }, { sel: '[data-testid="panels"] > section', cols: 1, when: { layout: "stacked" } }],
+  sample: { ...sec("overview"), metrics: ref("metrics"), chart: overviewChart, activity: overviewActivity },
+});
+
+const kanban = define({
+  key: "kanban", theme: "dashboard", group: "widgets", name: "Kanban board", docs: "Work items in lanes with a count; cards with a tag and a person. Moving cards is a port contract (SortableList).",
+  organism: "KanbanBoard", axes: ["card", "cols", "tone", "density"], data: [d.lanes, d.cards],
+  variants: [["detail", "Cards with a tag and a person"], ["simple", "Titles only", { card: "simple" }], ["twoCols", "Two lanes per row", { cols: "2" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="lane"]', n: "@lanes" }, { sel: '[data-testid="lane"] [data-testid="item"]', n: "@cards" }, { sel: '[data-slot="pill"]', n: "@cards", when: { card: "detail" } }, { sel: '[data-slot="pill"]', n: 0, when: { card: "simple" } }],
+  sample: { ...sec("kanban"), lanes: ref("lanes"), empty: t("empty.lanes"), cards: ref("cards"), countLabel: v("kanban.count") },
+});
+
+const sidenav = define({
+  key: "sidenav", theme: "dashboard", group: "navigation", name: "Sidebar navigation", docs: "A vertical navigation with the brand on top and the user at the bottom: full, or icons only.",
+  organism: "SidebarNav", axes: ["width", "user", "density"], data: [d.sidenav],
+  variants: [["full", "Icons and names"], ["compact", "Icons only", { width: "compact" }], ["noUser", "Without the user", { user: "hide" }], ["dense", "Dense rows", { density: "compact" }]],
+  facts: [{ sel: '[data-testid="item"]', n: "@sidenav" }, { sel: '[data-testid="user"]', n: 1, when: { user: "show" } }, { sel: '[data-testid="user"]', n: 0, when: { user: "hide" } }, { sel: '[aria-current="page"]', n: 1 }],
+  sample: { label: v("sidebar.label"), brand: t("site.header.brand"), links: ref("sidenav"), current: "item-orders", userName: v("sidebar.userName"), userEmail: v("sidebar.userEmail") },
+});
+
+const bottomnav = define({
+  key: "bottomnav", theme: "dashboard", group: "navigation", name: "Bottom tab bar", docs: "An app-style tab bar for a phone: an icon over a name, the current tab marked.",
+  organism: "BottomNav", axes: ["labels", "position", "tone"], data: [d.tabs],
+  variants: [["labels", "Icons with names"], ["icons", "Icons only", { labels: "hide" }], ["sticky", "Stays at the bottom", { position: "sticky" }], ["muted", "Muted", { tone: "muted" }]],
+  facts: [{ sel: '[data-testid="item"]', n: "@tabs" }, { sel: '[aria-current="page"]', n: 1 }],
+  sample: { label: v("bottom.label"), tabs: ref("tabs"), current: "tab-explore" },
+});
+
+const skeleton = define({
+  key: "skeleton", theme: "dashboard", group: "states", name: "Loading state", docs: "Grey blocks in the shape of what is coming: cards, a list or an article.",
+  organism: "SkeletonLayout", axes: ["shape", "tone"], data: [d.placeholders],
+  variants: [["cards", "Cards"], ["list", "List", { shape: "list" }], ["article", "Article", { shape: "article" }], ["muted", "Muted cards", { tone: "muted" }]],
+  facts: [{ sel: '[role="status"]', n: 1 }, { sel: '[data-testid="item"]', n: "@placeholders", when: { shape: ["cards", "list"] } }, { sel: '[data-testid="item"]', n: "@placeholders", when: { shape: "article" } }],
+  sample: { ...sec("skeleton"), label: v("skeleton.label"), lines: ref("placeholders") },
+});
+
+const tour = define({
+  key: "tour", theme: "onboarding", group: "guidance", name: "Tour callout", docs: "One stop of a product tour: the explained element and a callout with the step, a sentence and buttons. Placing it on the real element is a port contract.",
+  organism: "TourCallout", axes: ["placement", "tone", "density"],
+  variants: [["below", "Callout below"], ["above", "Callout above", { placement: "above" }], ["end", "Callout beside", { placement: "end" }], ["muted", "Muted, compact", MUTED_COMPACT]],
+  facts: [{ sel: '[data-testid="tour-target"]', n: 1 }, { sel: '[data-testid="tour-callout"]', n: 1 }, { sel: '[data-testid="tour"]', n: 1 }],
+  sample: { ...sec("tour"), text: v("tour.text"), target: v("tour.target"), position: v("tour.position"), skip: v("tour.skip"), next: v("tour.next") },
+});
+
+const videomodal = define({
+  key: "videomodal", theme: "onboarding", group: "guidance", name: "Video walkthrough", docs: "A dialog with a walkthrough video and an optional list of chapters. Opening and playing are port contracts.",
+  organism: "VideoModal", axes: ["size", "outline", "tone"], data: [d.chapters],
+  variants: [["default", "Standard size"], ["wide", "Wide", { size: "wide" }], ["chapters", "With chapters", { outline: "chapters" }], ["muted", "Muted", { tone: "muted" }]],
+  facts: [{ sel: '[role="dialog"]', n: 1 }, { sel: '[data-testid="play"]', n: 1 }, { sel: '[data-testid="modal-close"]', n: 1 }, { sel: '[data-testid="chapters"] [data-testid="item"]', n: "@chapters", when: { outline: "chapters" } }, { sel: '[data-testid="chapters"]', n: 0, when: { outline: "none" } }],
+  sample: { ...sec("modal"), text: v("modal.text"), close: v("modal.close"), play: v("modal.play"), chaptersTitle: v("modal.chapters"), chapters: ref("chapters") },
+});
+
+const errorpage = define({
+  key: "errorpage", theme: "support", group: "states", name: "Error page", docs: "A page for something that went wrong, such as a missing page: a code, a heading, a sentence and the way back.",
+  organism: "ErrorPage", axes: ["layout", "code", "actions.mode", "tone"],
+  variants: [["centered", "Centered"], ["split", "Split with a picture", { layout: "split" }], ["noCode", "Without the code", { code: "hide" }], ["two", "Two actions", { "actions.mode": "two" }], ["muted", "Muted", { tone: "muted" }]],
+  facts: [{ sel: '[data-testid="error-code"]', n: 1, when: { code: "show" } }, { sel: '[data-testid="error-code"]', n: 0, when: { code: "hide" } }, { sel: '[data-testid="action-primary"]', n: 1 }, { sel: '[data-testid="action-secondary"]', n: 1, when: { "actions.mode": "two" } }, { sel: '[data-testid="action-secondary"]', n: 0, when: { "actions.mode": "one" } }, { sel: '[data-slot="media-frame"]', n: 1, when: { layout: "split" } }, { sel: '[data-slot="media-frame"]', n: 0, when: { layout: "centered" } }],
+  sample: { id: "errorpage", title: v("error.title"), text: v("error.text"), status: v("error.status"),
+    actions: { cta: v("error.cta"), href: "#/", secondary: v("error.secondary"), secondaryHref: "#/" } },
+});
+
+const article = define({
+  key: "article", theme: "content", group: "blog", name: "Article", docs: "A long read in one reading column, or beside a table of contents that links to the sections.",
+  organism: "ArticleBody", axes: ["layout", "quotes", "tone"], data: [d.article],
+  variants: [["column", "Reading column"], ["toc", "With a table of contents", { layout: "toc" }], ["plain", "Without pull quotes", { quotes: "hide" }], ["muted", "Muted", { tone: "muted" }]],
+  facts: [{ sel: '[data-testid="article"] > [data-testid="item"]', n: "@article" }, { sel: '[data-testid="toc-link"]', n: "@article", when: { layout: "toc" } }, { sel: '[data-testid="toc"]', n: 0, when: { layout: "column" } }, { sel: '[data-testid="quote"]', n: 0, when: { quotes: "hide" } }, { sel: '[data-testid="quote"]', n: 1, when: { quotes: "show" } }],
+  sample: { ...sec("article"), sections: ref("article"), empty: t("empty.sections"), tocTitle: v("article.toc") },
+});
+
+export const vibeBlocks = [navbar, megamenu, sitemap, bento, featuretabs, accordion, sticky, iconwall, beforeafter, proof, videos, compare, usage, credits, pagehead, authpage, wizard, shell, overview, kanban, sidenav, bottomnav, skeleton, tour, videomodal, errorpage, article];
diff --git a/xgen/screens/src/authoring/gallery/blocks.ts b/xgen/screens/src/authoring/gallery/blocks.ts
new file mode 100644
index 0000000..1499f71
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/blocks.ts
@@ -0,0 +1,274 @@
+// The block catalog: each block is an organism of the site plus the axes it varies on, named variants (a variant is a row of data: axis -> value,
+// and for case copy a few props), the collections it reads and the props a page gets for free. No markup: the organism draws it.
+// Stored as JSON in xgen/specs/blocks. The composed screens (the site, the gallery) use blocks by name and variant.
+// The names, the notes and the variant labels are written to the dictionary by screens/tools/author-block-texts.ts.
+import { list, nth, ref, undef } from "../../build";
+import type { BlockSpec, ComposedSpec } from "../../ir";
+import { define } from "./blocks-define";
+import { t } from "./block-kit";
+import type { BlockTexts } from "./block-kit";
+import * as d from "./blocks-data";
+import { commerceBlocks } from "./blocks-commerce";
+import { shopBlocks } from "./blocks-shop";
+import { companyBlocks } from "./blocks-company";
+import { shellBlocks } from "./blocks-shells";
+import { heroBlocks } from "./blocks-heroes";
+import { faqBlocks } from "./blocks-faqs";
+import { ctaBlocks } from "./blocks-ctas";
+import { quoteBlocks } from "./blocks-quotes";
+import { postBlocks } from "./blocks-posts";
+import { footerBlocks } from "./blocks-footers";
+import { featureSplitBlocks } from "./blocks-feature-splits";
+import { pageTrailBlocks } from "./blocks-page-trails";
+import { postShowcaseBlocks } from "./blocks-post-showcase";
+import { mediaListBlocks } from "./blocks-media-lists";
+import { featureShowcaseBlocks } from "./blocks-feature-showcase";
+import { storyTabsBlocks } from "./blocks-story-tabs";
+import { moreBlocks } from "./blocks-more";
+import { vibeBlocks } from "./blocks-vibe";
+
+const header = define({
+  key: "header", theme: "marketing", group: "navigation", name: "Header", docs: "Skip link, brand, navigation, theme button and an optional call to action.",
+  organism: "SiteHeader", axes: ["layout", "position", "actions"],
+  variants: [["inline", "Inline"], ["stacked", "Stacked", { layout: "stacked" }], ["sticky", "Sticky", { position: "sticky" }], ["withCta", "Inline with a call to action", { actions: "cta" }]],
+  events: { theme: "toggleTheme" },
+  sample: { labels: t("site.header"), current: "home", cta: t("site.header.cta") },
+});
+
+const footer = define({
+  key: "footer", theme: "marketing", group: "navigation", name: "Footer", docs: "Copyright and links.",
+  organism: "SiteFooter", axes: ["layout", "density"],
+  variants: [["minimal", "Minimal"], ["centered", "Centered", { layout: "centered" }], ["compact", "Compact", { density: "compact" }]],
+  sample: { labels: t("site.footer") },
+});
+
+const heroCase = (c: string) => ({ title: t(`cases.${c}.hero.title`), text: t(`cases.${c}.hero.text`), actions: { cta: t(`cases.${c}.hero.cta`), secondary: t(`cases.${c}.hero.secondary`) } });
+const hero = define({
+  key: "hero", theme: "marketing", group: "hero", name: "Hero", docs: "Heading, lead, one or two actions and optional media.",
+  organism: "HeroClassic", alt: { axis: "chrome", values: ["none", "nav"], organism: "HeroPrompt" },
+  axes: ["layout", "media.kind", "media.side", "scale", "tone", "density", "actions.mode", "chrome"],
+  data: [d.terminal, d.prompts, d.navlinks],
+  variants: [
+    ["centered", "Centered"],
+    ["screenshot", "Centered with a screenshot below", { "media.kind": "image" }],
+    ["backdrop", "Centered over a picture", { "media.kind": "backdrop", tone: "muted" }],
+    ["code", "Split with a terminal window", { layout: "split", "media.kind": "code", "actions.mode": "two" }],
+    ["cluster", "Split with a cluster of cards", { layout: "split", "media.kind": "cluster" }],
+    ["display", "Oversized heading", { scale: "display", density: "roomy" }],
+    ["form", "Centered with an email field", { "actions.mode": "form" }],
+    ["prompt", "Nav inside the hero, badge, display title, composer and topic pills", { "actions.mode": "form", scale: "display", density: "compact", tone: "inverse", chrome: "nav" }, {
+      badge: t("vibe.hero.badgeLabel"), badgeMark: t("vibe.hero.badgeMark"),
+      title: t("vibe.hero.title"),
+      topics: ref("prompts"),
+      actions: { emailLabel: t("vibe.hero.promptLabel") },
+    }],
+    ["twoActions", "Centered, two actions", { "actions.mode": "two" }],
+    ["split", "Split, media at the end", { layout: "split", "media.kind": "image" }],
+    ["splitStart", "Split, media at the start", { layout: "split", "media.kind": "image", "media.side": "start", "actions.mode": "two" }],
+    ["muted", "Muted tone", { tone: "muted", density: "default" }],
+    ["saas", "SaaS product: split with a picture", { layout: "split", "media.kind": "image", "actions.mode": "two" }, heroCase("saas")],
+    ["shop", "Shop: picture first, muted", { layout: "split", "media.kind": "image", "media.side": "start", tone: "muted" }, heroCase("shop")],
+    ["blog", "Blog: centered, compact", { density: "compact" }, heroCase("blog")],
+  ],
+  sample: {
+    id: "hero", title: t("site.home.title"), text: t("site.home.text"),
+    actions: { cta: t("site.home.cta"), href: "#/pricing", secondary: t("site.home.secondary"), secondaryHref: "#/pricing", emailLabel: t("promo.newsletter.label") },
+    media: { codeTitle: t("vibe.code.title"), prompt: t("vibe.code.prompt"), lines: ref("terminal") },
+    composer: { attachLabel: t("vibe.hero.attach"), modelLabel: t("vibe.hero.model") },
+    nav: { brand: t("site.header.brand"), links: ref("navlinks"), current: "link-product", skip: t("site.header.skip"), label: t("site.header.nav"), login: t("site.header.login"), loginHref: "#/login" },
+  },
+});
+
+const features = define({
+  key: "features", theme: "marketing", group: "features", name: "Features", docs: "Features as cards, tiles or rows with a picture.",
+  organism: "FeatureGrid", axes: ["layout", "cols", "item", "mediaSide", "tone", "density"], data: [d.features],
+  variants: [
+    ["grid", "Grid, three columns"],
+    ["grid2", "Grid, two columns, roomy", { cols: "1-2", density: "roomy" }],
+    ["tiles4", "Tiles, four columns", { cols: "1-4", item: "tile" }],
+    ["cells4", "Hairline 4x2 cells with icon tiles", { cols: "1-4", item: "cell", density: "compact" }, { action: { label: t("site.home.featuresAction"), href: "#/" } }],
+    ["rows", "Rows", { layout: "rows" }],
+    ["rowsStart", "Rows, media at the start, compact", { layout: "rows", mediaSide: "start", density: "compact" }],
+    ["rowsAlternate", "Rows, alternating media, muted", { layout: "rows", mediaSide: "alternate", tone: "muted" }],
+    ["tilesMuted", "Tiles, three columns, muted", { item: "tile", tone: "muted", density: "compact" }],
+  ],
+  sample: { id: "features", title: t("site.home.featuresTitle"), features: ref("features"), empty: t("empty.features"), action: { label: t("site.home.featuresAction"), href: "#/" } },
+});
+
+const pricing = define({
+  key: "pricing", theme: "marketing", group: "pricing", name: "Pricing", docs: "Plans as a grid or a stack of cards.",
+  organism: "PricingTiers", axes: ["layout", "cols", "emphasis", "billing", "tone", "density"], data: [d.tiers, d.duo],
+  variants: [
+    ["grid", "Grid, three columns"],
+    ["monthly", "With a billing toggle, monthly", { billing: "monthly" }],
+    ["annual", "With a billing toggle, annual", { billing: "annual" }],
+    ["duo", "Free and Pro side by side", { cols: "1-2", emphasis: "off" }, { plans: ref("duo") }],
+    ["grid2", "Grid, two columns", { cols: "1-2" }],
+    ["grid4", "Grid, four columns", { cols: "1-4" }],
+    ["stack", "Stack", { layout: "stack" }],
+    ["flat", "No emphasis", { emphasis: "off" }],
+    ["compactMuted", "Muted, compact", { tone: "muted", density: "compact" }],
+    ["roomy", "Roomy", { density: "roomy" }],
+  ],
+  sample: { id: "pricing", title: t("site.pricing.tiersTitle"), plans: ref("tiers"), labels: t("pricing"), billingLabels: t("vibe.billing") },
+});
+
+const plan = define({
+  key: "plan", theme: "marketing", group: "pricing", name: "Plan", docs: "One plan as a card.", fit: "card",
+  organism: "PricingCard", axes: ["emphasis", "density"], data: [d.tiers],
+  variants: [["standard", "Standard"], ["flat", "No emphasis", { emphasis: "off" }], ["compact", "Compact", { density: "compact" }]],
+  sample: { plan: { op: "pick", args: [ref("tiers"), "tier-team"] }, labels: t("pricing") },
+});
+
+const faq = define({
+  key: "faq", theme: "marketing", group: "faq", name: "FAQ", docs: "Questions as native disclosures.",
+  organism: "FaqList", axes: ["layout", "cols", "search.mode", "filter.mode", "tone", "density"], data: [d.faq, d.faqtabs],
+  variants: [["list", "List"], ["chat", "Chat bubbles", { layout: "chat" }], ["search", "With a search field", { "search.mode": "field" }], ["tabs", "Category tabs", { "filter.mode": "categories" }, { filter: { category: "billing" } }], ["twoColumns", "Two columns", { cols: "2" }], ["muted", "Muted, compact", { tone: "muted", density: "compact" }], ["roomy", "Roomy", { density: "roomy" }]],
+  sample: {
+    id: "faq", title: t("site.pricing.faqTitle"), items: ref("faq"), empty: t("vibe.faq.empty"),
+    search: { label: t("vibe.faq.search"), query: "" },
+    filter: { tabs: ref("faqtabs"), label: t("vibe.faq.tabs"), category: "" },
+  },
+});
+
+const ctaCase = (c: string) => ({ title: t(`cases.${c}.cta.title`), text: t(`cases.${c}.cta.text`), actions: { cta: t(`cases.${c}.cta.cta`), secondary: t(`cases.${c}.cta.secondary`) } });
+const cta = define({
+  key: "cta", theme: "marketing", group: "cta", name: "Call to action", docs: "A closing call to action.",
+  organism: "CtaBand", axes: ["layout", "tone", "actions.mode", "proof", "density"],
+  variants: [
+    ["card", "Card"],
+    ["banner", "Centered muted card", { layout: "banner", tone: "muted", density: "compact" }],
+    ["row", "Heading and button in one row", { layout: "row" }],
+    ["form", "With an email field", { layout: "band", "actions.mode": "form" }],
+    ["quote", "With a customer quote", { layout: "band", proof: "quote", tone: "muted" }],
+    ["band", "Band, roomy", { layout: "band", density: "roomy" }],
+    ["split", "Split, two actions", { layout: "split", tone: "default", "actions.mode": "two" }],
+    ["compact", "Compact card", { density: "compact" }],
+    ["saas", "SaaS: band, two actions", { layout: "band", "actions.mode": "two", density: "roomy" }, ctaCase("saas")],
+    ["shop", "Shop: split with a picture", { layout: "split", tone: "default" }, ctaCase("shop")],
+    ["agency", "Agency: card, two actions", { "actions.mode": "two", tone: "muted" }, ctaCase("agency")],
+  ],
+  sample: {
+    id: "cta", title: t("site.home.ctaTitle"), text: t("site.home.ctaText"),
+    actions: { cta: t("site.home.ctaButton"), href: "#/pricing", secondary: t("site.home.ctaSecondary"), secondaryHref: "#/", emailLabel: t("promo.newsletter.label") },
+    quote: { text: t("vibe.cta.quote"), by: t("vibe.cta.quoteBy") },
+  },
+});
+
+const logos = define({
+  key: "logos", theme: "marketing", group: "proof", name: "Logo cloud", docs: "Customers and partners as glyphs with names.",
+  organism: "LogoCloud", axes: ["layout", "cols", "item", "tone", "density"], data: [d.logos],
+  variants: [
+    ["grid4", "Grid, four columns"],
+    ["grid3", "Grid, three columns, tiles", { cols: "3", item: "tile" }],
+    ["row", "Logo ribbon: one row of large marks", { layout: "row", item: "icon", density: "compact" }],
+    ["icons", "Icons only, muted", { item: "icon", tone: "muted", density: "compact" }],
+    ["grid2", "Grid, two columns, roomy", { cols: "2", density: "roomy" }],
+    ["tiles4", "Tiles, four columns", { item: "tile" }],
+  ],
+  sample: { id: "logos", title: t("marketing.logos.title"), logos: ref("logos"), empty: t("empty.logos") },
+});
+
+const stats = define({
+  key: "stats", theme: "marketing", group: "proof", name: "Stats", docs: "Key numbers as figures, cards or figures with icons.",
+  organism: "StatsBand", axes: ["cols", "layout", "surface", "item", "align", "tone", "density"], data: [d.stats],
+  variants: [
+    ["plain4", "Plain figures, four columns"],
+    ["panel", "One panel card, four figures, no heading", { surface: "panel", density: "compact" }, { title: "" }],
+    ["stack", "Figures stacked in one column", { layout: "stack", align: "start" }],
+    ["image", "Figures over a picture", { surface: "image", density: "roomy" }],
+    // three cards in three columns: the fixture has four figures, which would leave one card alone on a second row
+    ["cards", "Cards, three columns, three figures", { cols: "3", item: "card" }, { stats: list(nth(ref("stats"), 0), nth(ref("stats"), 1), nth(ref("stats"), 2)) }],
+    ["icons", "Figures with icons, left aligned", { item: "icon", align: "start" }],
+    ["muted2", "Plain, two columns, muted", { cols: "2", tone: "muted", density: "roomy" }],
+    ["cardsCompact", "Cards, four columns, compact", { item: "card", density: "compact" }],
+  ],
+  sample: { id: "stats", title: t("marketing.stats.title"), stats: ref("stats"), empty: t("marketing.stats.empty") },
+});
+
+const testimonials = define({
+  key: "testimonials", theme: "marketing", group: "proof", name: "Testimonials", docs: "Customer quotes as cards or plain figures.",
+  organism: "TestimonialGrid", axes: ["layout", "cols", "item.kind", "item.avatar", "item.rating", "item.mark", "tone", "density"], data: [d.testimonials],
+  variants: [
+    ["grid3", "Cards, three columns"],
+    ["masonry", "Masonry of cards", { layout: "masonry", "item.rating": "hide" }],
+    ["strip", "Strip that scrolls sideways", { layout: "strip", "item.avatar": "none" }],
+    ["social", "Posts of a social wall", { "item.kind": "social", layout: "masonry", "item.rating": "hide" }],
+    ["featured", "One featured quote with a mark", { layout: "single", "item.kind": "plain", "item.rating": "hide", "item.mark": "icon" }],
+    ["grid2", "Cards, two columns", { cols: "1-2" }],
+    ["single", "Single quote, wide", { layout: "single", "item.kind": "plain", "item.rating": "hide" }],
+    ["stack", "Narrow stack", { layout: "stack", "item.avatar": "none" }],
+    ["plain", "Plain quotes, no avatars", { "item.kind": "plain", "item.avatar": "none", tone: "muted", density: "compact" }],
+    ["noRating", "Cards, no rating, roomy", { "item.rating": "hide", density: "roomy" }],
+  ],
+  sample: { id: "testimonials", title: t("marketing.testimonials.title"), quotes: ref("testimonials"), empty: t("empty.quotes"), labels: { rating: t("testimonials.rating"), byLine: t("testimonials.byLine"), handleLine: t("testimonials.handleLine") } },
+});
+
+const steps = define({
+  key: "steps", theme: "marketing", group: "how-it-works", name: "How it works", docs: "Numbered or icon steps in a row or a column.",
+  organism: "StepsList", axes: ["layout", "marker", "align", "tone", "density"], data: [d.steps],
+  variants: [
+    ["row", "Row with numbers"],
+    ["rowIcons", "Row with icons", { marker: "icon" }],
+    ["column", "Column", { layout: "column" }],
+    ["centered", "Row, centered, muted", { align: "center", tone: "muted" }],
+    ["columnIcons", "Column with icons, roomy", { layout: "column", marker: "icon", density: "roomy" }],
+    ["compact", "Row, compact", { density: "compact" }],
+  ],
+  sample: { id: "steps", title: t("marketing.steps.title"), steps: ref("steps"), empty: t("empty.steps") },
+});
+
+export const marketingBlocks = [header, hero, logos, features, stats, testimonials, steps, pricing, plan, faq, cta, footer];
+const all = [...marketingBlocks, ...commerceBlocks, ...shopBlocks, ...moreBlocks, ...vibeBlocks, ...companyBlocks, ...shellBlocks, ...heroBlocks, ...faqBlocks, ...ctaBlocks, ...quoteBlocks, ...postBlocks, ...footerBlocks, ...featureSplitBlocks, ...pageTrailBlocks, ...postShowcaseBlocks, ...mediaListBlocks, ...featureShowcaseBlocks, ...storyTabsBlocks];
+
+export const blocks: BlockSpec[] = all.map((x) => x.block);
+export const blockTexts: Record<string, BlockTexts> = Object.fromEntries(all.map((x) => [x.block.id.slice("block.".length), x.texts]));
+
+const portable = { svelte: true, react: true } as const;
+
+/** the addresses of the routes of the site screen (its own: "" and "pricing") */
+const SITE_ROUTES = { home: "#/", pricing: "#/pricing" };
+
+/** the marketing site, now a list of blocks */
+export const siteComposed: ComposedSpec = {
+  $schema: "../../schema/schemas/composed.schema.json",
+  specVersion: 1,
+  id: "screen.site",
+  name: "SiteScreen",
+  kind: "composed",
+  docs: "A marketing site of two routes, home and pricing, made of blocks: header, hero, features, pricing, FAQ, call to action, footer. Data: the Codex fixtures `features`, `tiers` and `faq`. The only action is the theme button.",
+  routes: [{ path: "", area: "home" }, { path: "pricing", area: "pricing" }],
+  // the app owns its addresses: the header and footer link to the two routes of this screen
+  frame: { before: [{ block: "header", variant: "inline", props: { current: ref("route.area"), routes: SITE_ROUTES } }], after: [{ block: "footer", variant: "minimal", props: { routes: SITE_ROUTES } }] },
+  areas: {
+    home: [
+      { block: "hero", variant: "centered", props: { id: "home-hero" } },
+      { block: "features", variant: "grid", props: { id: "home-features" } },
+      { block: "cta", variant: "card", props: { id: "home-cta" } },
+    ],
+    pricing: [
+      { block: "hero", variant: "centered", props: { id: "pricing-hero", title: t("site.pricing.title"), text: t("site.pricing.text"), actions: undef() } },
+      { block: "pricing", variant: "grid", props: { id: "pricing-tiers" } },
+      { block: "faq", variant: "list", props: { id: "pricing-faq" } },
+    ],
+    notfound: [
+      { block: "hero", variant: "centered", props: { id: "not-found", title: t("site.notFound.title"), text: t("site.notFound.text"), actions: { cta: t("site.notFound.back"), href: "#/" } } },
+    ],
+  },
+  portable,
+};
+
+/** the catalog: an index of blocks by topic and a page per block with all its variants, built from the blocks above */
+export const blocksComposed: ComposedSpec = {
+  $schema: "../../schema/schemas/composed.schema.json",
+  specVersion: 1,
+  id: "screen.blocks",
+  name: "BlocksScreen",
+  kind: "composed",
+  docs: "The block gallery: an index of blocks grouped by topic and one page per block with every variant, on the fixtures. Built from the block catalog; nothing is written by hand.",
+  routes: [],
+  frame: { before: [], after: [] },
+  areas: {},
+  gallery: true,
+  portable,
+};
diff --git a/xgen/screens/src/authoring/gallery/catalog.ts b/xgen/screens/src/authoring/gallery/catalog.ts
new file mode 100644
index 0000000..1ed9091
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/catalog.ts
@@ -0,0 +1,182 @@
+// The catalog screen (/catalog/): every block of the kit sorted into sections and categories, one page per category with the blocks
+// and their variants, and full pages composed of blocks. A block can sit in two categories (a shop hero is also a storefront hero);
+// every variant sits in at least one, so the catalog is the whole kit. The names and notes go to the dictionary under `catalog`
+// (screens/tools/author-block-texts.ts writes them).
+
+import type { BlockUse, CatalogTree, ComposedSpec } from "../../ir";
+import { dictKey } from "../../compose-kit";
+import { t } from "./block-kit";
+
+const c = (k: string) => t(`commerce.${k}`);
+const co = (k: string) => t(`company.${k}`);
+
+
+type Entry = { block: string; variants?: string[] };
+const all = (...keys: string[]): Entry[] => keys.map((block) => ({ block }));
+const only = (block: string, ...variants: string[]): Entry => ({ block, variants });
+const cat = (id: string, title: string, ...entries: Entry[]) => ({ id, title, entries });
+
+/** the tree: section id, its title and note, its categories */
+const SECTIONS = [
+  { id: "marketing", title: "Marketing", text: "Landing page sections: navigation, hero, features, proof, pricing, FAQ, calls to action, footers, team and company pages.", categories: [
+    cat("marketing-navigation", "Navigation", ...all("header", "navbar", "megamenu")),
+    cat("marketing-hero", "Hero", ...all("hero")),
+    cat("marketing-hero-split", "Split heroes", ...all("herosplit")),
+    cat("marketing-page-head", "Page head", ...all("pagehead")),
+    cat("marketing-page-trail", "Page headings with breadcrumbs", ...all("pagetrail")),
+    cat("marketing-features", "Feature grids", ...all("features", "iconwall", "beforeafter")),
+    cat("marketing-features-split", "Features beside a picture", ...all("featuresplit")),
+    cat("marketing-feature-cards", "Feature cards with a picture", ...all("featureshowcase")),
+    cat("marketing-media-list", "Lists beside a picture", ...all("medialist")),
+    cat("marketing-showcases", "Feature showcases", ...all("bento", "featuretabs", "accordion", "sticky")),
+    cat("marketing-how-it-works", "How it works", ...all("steps")),
+    cat("marketing-proof", "Logos and proof", ...all("logos", "proof", "videos")),
+    cat("marketing-stats", "Stats", ...all("stats")),
+    cat("marketing-testimonials", "Testimonials", ...all("testimonials")),
+    cat("marketing-testimonials-split", "Split testimonials", ...all("quotesplit")),
+    cat("marketing-pricing", "Pricing plans", ...all("pricing", "plan")),
+    cat("marketing-pricing-tools", "Pricing tools", ...all("compare", "credits", "usage")),
+    cat("marketing-faq", "FAQ", ...all("faq", "faqsplit")),
+    cat("marketing-cta", "Call to action", ...all("cta")),
+    cat("marketing-cta-proof", "Calls to action with proof", ...all("ctaproof")),
+    cat("marketing-team", "Team", ...all("team")),
+    cat("marketing-about", "About", ...all("about", "aboutme")),
+    cat("marketing-portfolio", "Portfolio", ...all("projects")),
+    cat("marketing-careers", "Careers", ...all("jobs")),
+    cat("marketing-gallery", "Galleries", ...all("photos", "templates")),
+    cat("marketing-footer", "Footer", ...all("footer", "sitemap")),
+    cat("marketing-footer-split", "Footers with more", ...all("footersplit")),
+  ] },
+  { id: "content", title: "Content", text: "A blog and documents: post lists, post headers and long reading pages.", categories: [
+    cat("content-blog", "Blog", ...all("posts")),
+    cat("content-post-showcase", "Post showcase", ...all("postshowcase")),
+    cat("content-post-header", "Post header", ...all("postheader")),
+    cat("content-post-header-split", "Post headers with more", ...all("postsplit")),
+    cat("content-article", "Article and legal", ...all("article")),
+    cat("content-timeline", "Timeline", ...all("timeline")),
+    cat("content-story-tabs", "Story in steps", ...all("storytabs")),
+  ] },
+  { id: "promo", title: "Promo", text: "Announcements, the cookie notice and newsletter sign-ups.", categories: [
+    cat("promo-banners", "Banners", ...all("announcement", "cookie")),
+    cat("promo-newsletter", "Newsletter", ...all("newsletter")),
+  ] },
+  { id: "support", title: "Support", text: "Contact forms, the ways to reach a person and error pages.", categories: [
+    cat("support-contact", "Contact", ...all("contact", "channels")),
+    cat("support-states", "Error pages", ...all("errorpage")),
+  ] },
+  { id: "commerce", title: "Commerce", text: "A whole store: storefront, categories, products, product page, cart, checkout and order history.", categories: [
+    cat("commerce-storefront", "Storefront", only("hero", "shop"), ...all("storehero", "usp")),
+    cat("commerce-categories", "Categories and filters", ...all("categories")),
+    cat("commerce-products", "Product grids and rails", ...all("products")),
+    cat("commerce-product", "Product page", ...all("product", "productinfo", "reviews")),
+    cat("commerce-cart", "Cart", ...all("cart", "cartpage", "cartdrawer")),
+    cat("commerce-checkout", "Checkout", ...all("checkout", "summary"), only("stepper", "horizontal")),
+    cat("commerce-delivery", "Delivery and pickup", ...all("delivery", "zones", "slots", "locations")),
+    cat("commerce-orders", "Orders", ...all("orders")),
+  ] },
+  { id: "app", title: "App and dashboard", text: "The inside of a product: shells and navigation, dashboard widgets, states, sign-in, settings and onboarding.", categories: [
+    cat("app-shell", "Shells and navigation", ...all("shell", "sidenav", "bottomnav")),
+    cat("app-dashboard-shells", "Dashboard shells", ...all("dashshell")),
+    cat("app-widgets", "Dashboard widgets", ...all("metrics", "chart", "activity")),
+    cat("app-boards", "Dashboard boards", ...all("overview", "kanban")),
+    cat("app-states", "Empty and loading states", ...all("empty", "skeleton")),
+    cat("app-auth", "Sign in and sign up", ...all("auth", "wizard")),
+    cat("app-auth-pages", "Sign-in pages", ...all("authpage")),
+    cat("app-settings", "Settings", ...all("profile")),
+    cat("app-onboarding", "Onboarding", ...all("checklist", "stepper")),
+    cat("app-guidance", "Guidance", ...all("tour", "videomodal")),
+  ] },
+];
+
+const use = (block: string, variant: string, props?: BlockUse["props"]): BlockUse => ({ block, variant, ...(props ? { props } : {}) });
+
+/** the dashboard shells as whole pages: one shell each, filling the page, with placeholder cards */
+const SHELL_PAGES: Array<[string, string, string]> = [
+  ["classic", "Shell: top bar and sidebar", "A top bar with search across the app over a wide sidebar."],
+  ["inset", "Shell: top bar over the content", "A wide sidebar beside a column with its own top bar and footer."],
+  ["rail", "Shell: icon rail", "A top bar without search over a rail of icons and a list."],
+  ["railFooter", "Shell: rail with a footer", "An icon rail, a top bar over the content and a footer across."],
+  ["collapsed", "Shell: collapsed sidebar", "The static collapsed state of a sidebar with its expand button."],
+  ["twoLevel", "Shell: two-level sidebar", "A rail beside the links of the current section."],
+  ["twoLevelFull", "Shell: two levels under a top bar", "A top bar across, a two-level sidebar and a footer across."],
+  ["end", "Shell: sidebar at the end", "A wide sidebar on the end side and a footer across."],
+  ["railEnd", "Shell: rail at the end", "An icon rail on the end side with a footer under the content."],
+  ["topOnly", "Shell: top bar only", "The links in the top bar and no sidebar."],
+  ["sideOnly", "Shell: sidebar only", "A wide sidebar with the brand and no top bar."],
+  ["collapsedEnd", "Shell: collapsed at the end", "A collapsed sidebar on the end side, no top bar, a footer across."],
+];
+
+/** full pages: an id, a title, a note and the blocks top to bottom (one of them holds the h1) */
+const PAGES: Array<{ id: string; title: string; text: string; uses: BlockUse[] }> = [
+  { id: "saas-landing", title: "SaaS landing", text: "Split hero, logos, features, a sticky list, figures, quotes, plans, questions and a closing call to action.", uses: [
+    use("navbar", "inline"), use("hero", "saas", { level: 1 }), use("logos", "row"), use("features", "grid"), use("sticky", "end"), use("stats", "icons"),
+    use("testimonials", "grid3"), use("pricing", "grid"), use("faq", "list"), use("cta", "card"), use("sitemap", "columns"),
+  ] },
+  { id: "company", title: "Company", text: "The page head, the culture, the story, the team, a mosaic of photos, the open roles and a call to action.", uses: [
+    use("navbar", "inline"), use("pagehead", "center", { title: co("pages.companyTitle"), text: co("pages.companyLead"), cta: "" }), use("about", "split"), use("timeline", "split"),
+    use("team", "cards4"), use("photos", "mosaic"), use("jobs", "grouped"), use("cta", "card"), use("sitemap", "columns"),
+  ] },
+  { id: "portfolio", title: "Portfolio", text: "A personal about section, selected projects, a masonry of photos, quotes and a call to action.", uses: [
+    use("navbar", "inline"), use("aboutme", "facts", { level: 1 }), use("projects", "cards"), use("photos", "masonry"), use("testimonials", "grid3"), use("cta", "card"), use("sitemap", "columns"),
+  ] },
+  { id: "store-home", title: "Store home", text: "An offer bar, a hero with an offer card, category tiles, bestsellers, a rail of deals, the store promises and a closing offer.", uses: [
+    use("announcement", "shop"), use("navbar", "search"), use("storehero", "overlay", { level: 1 }), use("categories", "tiles"),
+    use("products", "grid4", { title: c("pages.bestsellers") }), use("products", "rail", { id: "deals", title: c("rail.title") }), use("usp", "cards"), use("cta", "shop"), use("sitemap", "columns"),
+  ] },
+  { id: "store-home-2", title: "Store home, picture hero", text: "Text over a faint picture, a strip of promises, the products, the delivery facts and the stores.", uses: [
+    use("navbar", "inline"), use("storehero", "backdrop", { level: 1 }), use("usp", "strip"), use("products", "grid3"), use("delivery", "full"), use("locations", "map"), use("sitemap", "columns"),
+  ] },
+  { id: "store-catalog", title: "Catalog", text: "The page head, chips under a toolbar and a compact grid of products.", uses: [
+    use("navbar", "search"), use("pagehead", "start", { title: c("pages.catalogTitle"), text: c("pages.catalogLead"), cta: "" }), use("categories", "toolbar"), use("products", "catalog"), use("usp", "bar"), use("sitemap", "columns"),
+  ] },
+  { id: "product-detail", title: "Product page", text: "The gallery and the buy box, the details and specs, reviews and a rail of related products.", uses: [
+    use("navbar", "search"), use("product", "split"), use("productinfo", "split"), use("reviews", "grid"), use("products", "railCompact", { title: c("pages.related") }), use("sitemap", "columns"),
+  ] },
+  { id: "cart", title: "Cart", text: "The cart lines beside the summary with a promo code, then a rail of products.", uses: [
+    use("navbar", "search"), use("pagehead", "start", { title: c("cartPage.title"), text: c("pages.cartLead"), cta: "" }), use("cartpage", "split", { title: c("cart.caption") }), use("products", "railCompact", { title: c("pages.related") }), use("sitemap", "columns"),
+  ] },
+  { id: "checkout", title: "Checkout", text: "The page head and the checkout steps beside a sticky order summary.", uses: [
+    use("navbar", "search"), use("pagehead", "start", { title: c("checkout.title"), text: c("pages.checkoutLead"), cta: "" }), use("checkout", "cards", { title: "" }), use("sitemap", "compact"),
+  ] },
+  ...SHELL_PAGES.map(([variant, title, text]) => ({ id: `shell-${variant.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}`, title, text, uses: [use("dashshell", variant, { frame: "page", level: 1 })] })),
+];
+
+export const catalogTree: CatalogTree = {
+  sections: SECTIONS.map((s) => ({ id: s.id, categories: s.categories.map((c) => ({ id: c.id, entries: c.entries })) })),
+  pages: PAGES.map((p) => ({ id: p.id, uses: p.uses })),
+};
+
+/** the dictionary part of the catalog (ui.catalog) */
+export const catalogTexts = {
+  title: "Catalog",
+  intro: "The blocks of the kit by section and category, with all their variants, and whole pages built from them. Pick a category to see its blocks.",
+  back: "Back to the catalog",
+  backPages: "All pages",
+  navLabel: "Catalog",
+  categoriesTab: "Categories",
+  count: "Blocks: {0}, variants: {1}",
+  pagesTitle: "Pages",
+  pagesText: "Whole pages composed of catalog blocks, top to bottom, on the same data.",
+  pageCount: "Blocks: {0}",
+  sections: Object.fromEntries(SECTIONS.map((s) => [s.id, { title: s.title, text: s.text }])),
+  categories: Object.fromEntries(SECTIONS.flatMap((s) => s.categories.map((c) => [dictKey(c.id), c.title]))),
+  pages: Object.fromEntries(PAGES.map((p) => [dictKey(p.id), { title: p.title, text: p.text }])),
+};
+
+const portable = { svelte: true, react: true } as const;
+
+/** the catalog screen: built from the tree above and the blocks; nothing is written by hand */
+export const catalogComposed: ComposedSpec = {
+  $schema: "../../schema/schemas/composed.schema.json",
+  specVersion: 1,
+  id: "screen.catalog",
+  name: "CatalogScreen",
+  kind: "composed",
+  docs: "The catalog: the blocks of the kit by section and category (Marketing, Content, Promo, Support, Commerce, App and dashboard), one page per category with every variant of its blocks, and whole pages composed of blocks. Built from the catalog tree and the blocks.",
+  routes: [],
+  frame: { before: [], after: [] },
+  areas: {},
+  catalog: catalogTree,
+  portable,
+};
+
diff --git a/xgen/screens/src/authoring/gallery/coverage.ts b/xgen/screens/src/authoring/gallery/coverage.ts
new file mode 100644
index 0000000..6a94182
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/coverage.ts
@@ -0,0 +1,190 @@
+// The registry of the 92 layouts of the reference catalog (15 categories): each is mapped to a block and variant of ours, or to a motion contract
+// (a pattern with a port contract and a static variant). Only the composition and the layout are recorded, never their words or markup.
+// xgen/docs/vibeui-coverage.md is written from this table (screens/tools/author-coverage.ts) and `xgen check` compares the two.
+
+/** a reference: `block.variant`, or `pattern.<name>` for a contract */
+export interface CoverageRow { category: string; layout: string; refs: string[] }
+
+const row = (category: string, layout: string, ...refs: string[]): CoverageRow => ({ category, layout, refs });
+
+export const CATEGORIES = ["Auth", "Pricing", "Features", "Hero", "CTA", "Stats", "Navigation", "Testimonials", "Footer", "FAQ", "Dashboards", "Onboarding", "Blog", "Contact", "Bonus"] as const;
+/** how many layouts the catalog holds per category, in the order above */
+export const CATEGORY_SIZES = [6, 8, 8, 8, 7, 7, 8, 8, 5, 5, 6, 4, 4, 3, 5] as const;
+
+export const vibeCoverage: CoverageRow[] = [
+  row("Auth", "Form beside a picture panel", "authpage.split"),
+  row("Auth", "Card centered on a tinted page", "authpage.centered"),
+  row("Auth", "Bare form, no chrome", "authpage.minimal"),
+  row("Auth", "Social providers first, address second", "authpage.socialFirst", "auth.socialFirst"),
+  row("Auth", "Passwordless link by address", "authpage.magic", "auth.magic"),
+  row("Auth", "Sign-up in steps with progress", "wizard.bar", "wizard.list", "wizard.second"),
+  row("Pricing", "Three tiers side by side, one highlighted", "pricing.grid"),
+  row("Pricing", "Tiers with a monthly or yearly switch", "pricing.monthly", "pricing.annual"),
+  row("Pricing", "Feature comparison table across plans", "compare.plans", "compare.highlight"),
+  row("Pricing", "One plan, one price, one list", "plan.standard"),
+  row("Pricing", "Price follows a usage slider", "usage.card"),
+  row("Pricing", "Packs of credits to buy", "credits.tiles4"),
+  row("Pricing", "Free plan against the paid plan", "pricing.duo"),
+  row("Pricing", "Plans stacked in one column", "pricing.stack"),
+  row("Features", "Icon, title and text in a grid", "features.grid"),
+  row("Features", "Bento: tiles of different sizes", "bento.bento"),
+  row("Features", "Rows of text and picture, sides alternate", "features.rowsAlternate"),
+  row("Features", "Features behind tabs", "featuretabs.split"),
+  row("Features", "Features as an accordion beside a picture", "accordion.media"),
+  row("Features", "List that follows the scroll beside a sticky picture", "sticky.end", "pattern.scroll-spy"),
+  row("Features", "Wall of icons with short labels", "iconwall.tiles4"),
+  row("Features", "Before and after, side by side", "beforeafter.cards"),
+  row("Hero", "Centered text above a product screenshot", "hero.screenshot"),
+  row("Hero", "Text on one side, picture on the other", "hero.split"),
+  row("Hero", "Text over a full-width background clip", "hero.backdrop", "pattern.video-embed"),
+  row("Hero", "Text over a moving mesh background", "hero.muted", "pattern.animated-backdrop"),
+  row("Hero", "Terminal window with typed lines", "hero.code", "pattern.typing-text"),
+  row("Hero", "Cluster of floating interface cards", "hero.cluster"),
+  row("Hero", "Oversized type, almost no picture", "hero.display"),
+  row("Hero", "Headline with an inline address form", "hero.form"),
+  row("CTA", "Full-width band with one button", "cta.band"),
+  row("CTA", "Card split into text and action", "cta.split", "cta.row"),
+  row("CTA", "Bar fixed to the bottom of the screen", "announcement.bottom"),
+  row("CTA", "Band over a quiet pattern", "cta.band"),
+  row("CTA", "Two actions for two audiences", "cta.saas", "cta.agency"),
+  row("CTA", "Address field and a button inline", "cta.form"),
+  row("CTA", "Customer quote above the action", "cta.quote"),
+  row("Stats", "Four figures in a row", "stats.plain4"),
+  row("Stats", "Figures that count up on view", "stats.plain4", "pattern.count-up"),
+  row("Stats", "Icon beside each figure", "stats.icons"),
+  row("Stats", "Customer logos above the figures", "proof.above"),
+  row("Stats", "Figures stacked in one column", "stats.stack"),
+  row("Stats", "Figures over a picture", "stats.image"),
+  row("Stats", "Each figure in its own card", "stats.cards"),
+  row("Navigation", "Brand, links and one button", "navbar.inline"),
+  row("Navigation", "Brand in the middle, links on both sides", "navbar.split"),
+  row("Navigation", "Wide panel of grouped links under a menu", "megamenu.open"),
+  row("Navigation", "Vertical sidebar with icons and the user", "sidenav.full"),
+  row("Navigation", "Floating rounded bar", "navbar.inline"),
+  row("Navigation", "Transparent bar over a picture", "navbar.media"),
+  row("Navigation", "Bar with a search field and its shortcut", "navbar.search"),
+  row("Navigation", "Tab bar at the bottom for phones", "bottomnav.labels"),
+  row("Testimonials", "Three quote cards in a row", "testimonials.grid3"),
+  row("Testimonials", "Endless strip of quotes", "testimonials.strip", "pattern.marquee"),
+  row("Testimonials", "Masonry of quotes of different height", "testimonials.masonry"),
+  row("Testimonials", "One large featured quote", "testimonials.featured"),
+  row("Testimonials", "Grid of customer videos", "videos.grid3"),
+  row("Testimonials", "Wall of short social posts", "testimonials.social"),
+  row("Testimonials", "Cloud of customer logos", "logos.grid4"),
+  row("Testimonials", "Quotes one at a time with arrows", "testimonials.single", "pattern.carousel"),
+  row("Footer", "Brand and several columns of links", "sitemap.columns"),
+  row("Footer", "Single line: brand, links, copyright", "footer.minimal", "sitemap.row"),
+  row("Footer", "Giant brand word across the bottom", "sitemap.columns"),
+  row("Footer", "Sign-up form first, links after", "sitemap.newsletter"),
+  row("Footer", "Links with a service status pill", "sitemap.status"),
+  row("FAQ", "Questions as an accordion", "faq.list"),
+  row("FAQ", "Questions in two columns", "faq.twoColumns"),
+  row("FAQ", "Questions as a chat", "faq.chat"),
+  row("FAQ", "Questions with a search field", "faq.search"),
+  row("FAQ", "Questions grouped under tabs", "faq.tabs"),
+  row("Dashboards", "Sidebar and a main area", "shell.sidebar"),
+  row("Dashboards", "Top bar and a main area", "shell.top"),
+  row("Dashboards", "Three panes: list, detail, side", "shell.panes"),
+  row("Dashboards", "Kanban lanes with cards", "kanban.detail", "pattern.sortable-list"),
+  row("Dashboards", "Counters, a chart and the activity", "overview.split"),
+  row("Dashboards", "Empty state with one action", "empty.orders"),
+  row("Onboarding", "Checklist whose tasks expand", "checklist.expand"),
+  row("Onboarding", "Tour: callouts that point at the interface", "tour.below"),
+  row("Onboarding", "Welcome video in a dialog", "videomodal.default", "pattern.video-embed"),
+  row("Onboarding", "Empty state with an illustration", "empty.illustrated"),
+  row("Blog", "Magazine front: one lead post and a grid", "posts.magazine"),
+  row("Blog", "Single reading column", "article.column"),
+  row("Blog", "Article with a table of contents beside it", "article.toc"),
+  row("Blog", "Card grid with topic filters", "posts.filters"),
+  row("Contact", "Form beside the contact details", "contact.split"),
+  row("Contact", "Channels: chat, mail, phone as cards", "channels.grid"),
+  row("Contact", "Whole page for the form, nothing else", "contact.page"),
+  row("Bonus", "Us against the competitors", "compare.rivals"),
+  row("Bonus", "Announcement of a new feature", "announcement.badge"),
+  row("Bonus", "Cookie notice as a card", "cookie.card"),
+  row("Bonus", "Page not found", "errorpage.centered"),
+  row("Bonus", "Loading skeleton of a page", "skeleton.cards"),
+];
+
+import type { BlockSpec } from "../../ir";
+import { vibeBlocks } from "./blocks-vibe";
+
+/** keys of the blocks that were added for the reference catalog (the others only got new variants) */
+export const NEW_BLOCK_KEYS: ReadonlySet<string> = new Set(vibeBlocks.map((x) => x.block.id.slice("block.".length)));
+
+export const isContract = (ref: string): boolean => ref.startsWith("pattern.");
+export type CoverageKind = "variant" | "new block" | "variant + contract" | "new block + contract";
+
+export function kindOf(r: CoverageRow): CoverageKind {
+  const block = r.refs.find((x) => !isContract(x));
+  const fresh = block !== undefined && NEW_BLOCK_KEYS.has(block.split(".")[0]!);
+  const contract = r.refs.some(isContract);
+  return `${fresh ? "new block" : "variant"}${contract ? " + contract" : ""}` as CoverageKind;
+}
+
+/** problems of the registry against the catalog: counts, every reference exists, every contract is used */
+export function coverageProblems(blocks: BlockSpec[], patternNames: ReadonlySet<string>, contractNames: ReadonlySet<string>): string[] {
+  const out: string[] = [];
+  const total = CATEGORY_SIZES.reduce((n, x) => n + x, 0);
+  if (vibeCoverage.length !== total) out.push(`coverage: ${vibeCoverage.length} layouts in the registry, the catalog has ${total}`);
+  CATEGORIES.forEach((c, i) => { const n = vibeCoverage.filter((r) => r.category === c).length; if (n !== CATEGORY_SIZES[i]) out.push(`coverage: category ${c} has ${n} layouts, expected ${CATEGORY_SIZES[i]}`); });
+  const used = new Set<string>();
+  vibeCoverage.forEach((r, i) => {
+    const at = `coverage #${i + 1} (${r.category}: ${r.layout})`;
+    if (!r.refs.some((x) => !isContract(x))) out.push(`${at}: no block and variant`);
+    for (const ref of r.refs) {
+      if (isContract(ref)) {
+        const name = ref.slice("pattern.".length);
+        used.add(name);
+        if (!patternNames.has(name)) out.push(`${at}: no pattern ${name}`);
+        continue;
+      }
+      const [block, variant] = ref.split(".");
+      const b = blocks.find((x) => x.id === `block.${block}`);
+      if (!b) out.push(`${at}: no block ${block}`);
+      else if (!b.variants.some((v) => v.id === variant)) out.push(`${at}: block ${block} has no variant ${variant}`);
+    }
+  });
+  for (const c of contractNames) if (!used.has(c)) out.push(`coverage: contract pattern.${c} is not used by any layout`);
+  return out;
+}
+
+/** the text of xgen/docs/vibeui-coverage.md */
+export function coverageMarkdown(blocks: BlockSpec[]): string {
+  const org = (r: CoverageRow): string => { const k = r.refs.find((x) => !isContract(x))!.split(".")[0]; return blocks.find((b) => b.id === `block.${k}`)?.organism ?? "?"; };
+  const kinds = vibeCoverage.map(kindOf);
+  const n = (k: CoverageKind): number => kinds.filter((x) => x === k).length;
+  const lines: string[] = [
+    "# Coverage of the reference catalog",
+    "",
+    "<!-- Written by screens/tools/author-coverage.ts from xgen/screens/src/authoring/gallery/coverage.ts. `xgen check` compares this file with the registry; do not edit it by hand. -->",
+    "",
+    `The reference catalog holds ${vibeCoverage.length} layouts in ${CATEGORIES.length} categories. Each one is mapped to a block and a variant of ours (a variant is a row of data: axes and case copy), or to a block plus a contract for the motion that a port must supply. Only the composition and the layout are recorded here: no words and no markup of the source are copied. The source of truth is our own primitives, patterns and organisms with their specs.`,
+    "",
+    "| Kind | Layouts |",
+    "| --- | --- |",
+    `| A variant of a block that existed | ${n("variant")} |`,
+    `| A new block | ${n("new block")} |`,
+    `| A variant, plus a contract for motion | ${n("variant + contract")} |`,
+    `| A new block, plus a contract for motion | ${n("new block + contract")} |`,
+    `| **All** | **${vibeCoverage.length}** |`,
+    "",
+    `${n("variant + contract") + n("new block + contract")} layouts need a contract (${new Set(vibeCoverage.flatMap((r) => r.refs.filter(isContract))).size} patterns: marquee, carousel, count-up, typing text, video embed, animated backdrop, scroll spy, sortable list). A contract is a pattern with a props interface and slots, generated for every runtime as a typed port; it has no animation of its own, and the static variant named next to it is what the page shows without the port.`,
+    "",
+    "Rules every row obeys: no gradients, no animation variants, icons from Lucide, pictures as embedded placeholders, tokens of shadcn, text from the English dictionary.",
+    "",
+  ];
+  let i = 0;
+  for (const c of CATEGORIES) {
+    lines.push(`## ${c}`, "", "| # | Layout | Ours | Organism | Kind |", "| --- | --- | --- | --- | --- |");
+    for (const r of vibeCoverage.filter((x) => x.category === c)) {
+      i++;
+      lines.push(`| ${i} | ${r.layout} | ${r.refs.map((x) => `\`${x}\``).join(", ")} | ${org(r)} | ${kinds[i - 1]} |`);
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+
+/** the patterns that are only a port contract (a typed interface and slots; the motion is the port's own) */
+export const CONTRACT_PATTERNS = ["marquee", "carousel", "count-up", "typing-text", "video-embed", "animated-backdrop", "scroll-spy", "sortable-list"] as const;
diff --git a/xgen/screens/src/authoring/gallery/skins.ts b/xgen/screens/src/authoring/gallery/skins.ts
new file mode 100644
index 0000000..1bd5b3b
--- /dev/null
+++ b/xgen/screens/src/authoring/gallery/skins.ts
@@ -0,0 +1,75 @@
+// The Skins screen (/skins/): tiles that change the look of the whole preview (see compose-skins.ts for the markup).
+// Row 1: the default theme and 14 tweakcn skins (CSS in xgen/runtimes/core/assets/styles/skins; sources in skins/NOTICE.md).
+// Row 2: ten Google fonts whose subsets hold both latin and cyrillic (checked against the Google Fonts css2 API).
+// Row 3: five corner radii. The names and notes go to the dictionary under `skins` (screens/tools/author-block-texts.ts writes them).
+import type { ComposedSpec, SkinsBoard } from "../../ir";
+import { dictKey } from "../../compose-kit";
+
+/** the skin tiles: data-skin value and name; "default" (the shadcn neutral theme) comes first */
+const SKINS: Array<[string, string]> = [
+  ["default", "Default"],
+  ["modern-minimal", "Modern Minimal"], ["violet-bloom", "Violet Bloom"], ["t3-chat", "T3 Chat"], ["bubblegum", "Bubblegum"],
+  ["doom-64", "Doom 64"], ["amber-minimal", "Amber Minimal"], ["supabase", "Supabase"], ["kodama-grove", "Kodama Grove"],
+  ["perpetuity", "Perpetuity"], ["cosmic-night", "Cosmic Night"], ["claude", "Claude"], ["mocha-mousse", "Mocha Mousse"],
+  ["neo-brutalism", "Neo Brutalism"], ["notebook", "Notebook"],
+];
+
+/** the font tiles: Google fonts with latin and cyrillic subsets and the 400 to 700 faces */
+const FONTS = ["Inter", "Roboto", "Manrope", "Montserrat", "Rubik", "Nunito", "IBM Plex Sans", "Golos Text", "Onest", "Open Sans"];
+const fontId = (family: string): string => family.toLowerCase().replace(/ /g, "-");
+
+/** the radius tiles, in px */
+const RADII = [0, 4, 8, 12, 16];
+
+export const skinsBoardSpec: SkinsBoard = {
+  skins: SKINS.map(([id]) => id),
+  fonts: FONTS.map((family) => ({ id: fontId(family), family })),
+  radii: RADII.map((px) => ({ id: `r${px}`, value: `${px}px` })),
+};
+
+/** the dictionary part of the Skins screen (ui.skins). The specimen shows Cyrillic letters; it is written as \u escapes so that the
+ *  sources stay free of Cyrillic text (xgen check, group text) */
+export const skinsTexts = {
+  title: "Skins",
+  intro: "Change the look of the whole preview: pick a skin, then a font or a corner radius on top of it. The choice applies to every screen and stays after a reload.",
+  navLabel: "Skins",
+  back: "Back to the skins",
+  sample: { card: "Card title", text: "Muted text on a card", button: "Button" },
+  skins: {
+    title: "Skins",
+    text: "The default theme and 14 presets from tweakcn. Each tile is drawn in its own skin.",
+    reset: "Back to the build skin",
+    names: Object.fromEntries(SKINS.map(([id, name]) => [dictKey(id), name])),
+  },
+  fonts: {
+    title: "Fonts",
+    text: "Google fonts with Latin and Cyrillic letters. A font replaces the font of the skin; click it again to go back.",
+    reset: "Back to the skin font",
+    specimen: "Aa \u0411\u0431 \u042f\u044f",
+    pangram: "The quick brown fox jumps over the lazy dog",
+    names: Object.fromEntries(FONTS.map((family) => [dictKey(fontId(family)), family])),
+  },
+  radius: {
+    title: "Corner radius",
+    text: "A radius replaces the radius of the skin on every plain rounded corner; click it again to go back.",
+    reset: "Back to the skin radius",
+    names: Object.fromEntries(RADII.map((px) => [`r${px}`, px === 0 ? "0" : `${px} px`])),
+  },
+};
+
+const portable = { svelte: true, react: true } as const;
+
+/** the Skins screen: built from the board above; nothing is written by hand */
+export const skinsComposed: ComposedSpec = {
+  $schema: "../../schema/schemas/composed.schema.json",
+  specVersion: 1,
+  id: "screen.skins",
+  name: "SkinsScreen",
+  kind: "composed",
+  docs: "The Skins screen: tiles that switch the look of the whole preview. A row of skins (the default theme and 14 tweakcn presets, each tile drawn in its skin), a row of Google fonts with Latin and Cyrillic over the font of the skin, and a row of corner radii over the radius of the skin. The tiles are static; the preview runtime (runtime/skins.ts) applies and stores the choice.",
+  routes: [],
+  frame: { before: [], after: [] },
+  areas: {},
+  skins: skinsBoardSpec,
+  portable,
+};
diff --git a/xgen/screens/src/authoring/kit.ts b/xgen/screens/src/authoring/kit.ts
new file mode 100644
index 0000000..7d133e0
--- /dev/null
+++ b/xgen/screens/src/authoring/kit.ts
@@ -0,0 +1,67 @@
+// Shared helpers of the authoring files for parts and patterns.
+import type { OrganismSpec, PropType, RecordField } from "../ir";
+
+export const SCHEMA = "../../schema/schemas/organism.schema.json";
+
+type Prop = OrganismSpec["props"][number];
+export const prop = (name: string, type: PropType, docs?: string, extra: Partial<Prop> = {}): Prop => ({ name, type, ...(docs ? { docs } : {}), ...extra });
+export const req = (name: string, type: PropType, docs?: string): Prop => prop(name, type, docs, { required: true });
+export const ts = (t: string): PropType => ({ ts: t });
+export const rec = (name: string): PropType => ({ record: name });
+
+type Def = Partial<Omit<OrganismSpec, "id" | "name" | "docs">> & { view?: OrganismSpec["view"] };
+/** an organism, part or pattern with the empty defaults filled in */
+export const spec = (id: string, name: string, docs: string, def: Def): OrganismSpec => ({
+  $schema: SCHEMA,
+  specVersion: 1,
+  id,
+  name,
+  docs,
+  records: {},
+  props: [],
+  ...(def.className ? { className: true } : {}),
+  ...(def.children ? { children: true } : {}),
+  ...(def.recipes ? { recipes: def.recipes } : {}),
+  ...(def.consts ? { consts: def.consts } : {}),
+  ...(def.derived ? { derived: def.derived } : {}),
+  slots: [],
+  events: [],
+  view: [],
+  portable: { svelte: true, react: true },
+  ...Object.fromEntries(Object.entries(def).filter(([k]) => !["className", "children", "consts", "derived", "recipes"].includes(k))),
+} as OrganismSpec);
+
+/** a spec that is only a contract: props, slots and events are fixed, the behaviour stays with the programmer */
+export const contract = (id: string, name: string, docs: string, reason: string, def: Def): OrganismSpec =>
+  spec(id, name, docs, { ...def, view: [], portable: { svelte: { portable: false, reason }, react: { portable: false, reason } } });
+
+/**
+ * the fields of a grouped prop (shadcn style: `actions={{ cta, href }}`): all optional; a field with a union type and a
+ * default can be a block axis (`actions.mode`)
+ */
+export const groupFields = (...f: Array<[name: string, type: string | PropType, docs?: string, def?: string | number | boolean]>): RecordField[] =>
+  f.map(([name, type, docs, def]) => ({ name, type: typeof type === "string" ? type : "ts" in type ? type.ts : type.record, optional: true, ...(docs ? { docs } : {}), ...(def !== undefined ? { default: def } : {}) }));
+/** the same fields, with the named ones required (no `?`) */
+export const requireFields = (f: RecordField[], ...names: string[]): RecordField[] => f.map((x) => (names.includes(x.name) ? { ...x, optional: false } : x));
+export const fields = (...f: Array<[string, RecordField["type"], boolean?]>): RecordField[] => f.map(([name, type, optional]) => ({ name, type, ...(optional ? { optional: true } : {}) }));
+
+// ---- recipes: the recipes of xgen/specs/recipes, read while authoring
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import type { RecipeFile } from "../ir";
+
+const recipesDir = xgenPaths(join(import.meta.dir, "..", "..", "..")).specs("recipes");
+/** the base classes of the Card primitive (xgen/specs/ui/card.variants.json): a card item that is the root of a block file opens on
+ *  `Block tag="article"` with these classes, so it looks the same and is a block (rule 01) */
+export const cardBase = (): string => (JSON.parse(readFileSync(join(recipesDir, "..", "ui", "card.variants.json"), "utf8")) as RecipeFile).base;
+export const recipeFile = (file: string): RecipeFile => JSON.parse(readFileSync(join(recipesDir, `${file}.variants.json`), "utf8")) as RecipeFile;
+/** the values of one key of a recipe as a TypeScript union: `"24" | "32"` */
+export const union = (file: string, key: string): PropType => ({ ts: Object.keys(recipeFile(file).byKey[key] ?? {}).map((v) => JSON.stringify(v)).join(" | ") });
+export const defaultOf = (file: string, key: string): string => recipeFile(file).defaults[key]!;
+type Example = NonNullable<OrganismSpec["examples"]>[number];
+/** one example per value of the recipe keys that are props of the component: `{ size: "size", layout: "layout" }` maps recipe key -> prop name */
+export function recipeExamples(file: string, mapping: Record<string, string>, base: Record<string, string | number | boolean> = {}): Example[] {
+  const recipe = recipeFile(file);
+  return Object.entries(mapping).flatMap(([key, propName]) => Object.keys(recipe.byKey[key] ?? {}).map((value) => ({ id: `${propName}.${value}`, props: { ...base, [propName]: value } })));
+}
diff --git a/xgen/screens/src/authoring/landmarks.ts b/xgen/screens/src/authoring/landmarks.ts
new file mode 100644
index 0000000..c0676e5
--- /dev/null
+++ b/xgen/screens/src/authoring/landmarks.ts
@@ -0,0 +1,106 @@
+// The accessible name of the landmarks of a component: every organism whose view holds a landmark (a Block with a
+// sectioning or landmark tag, or an organism that holds one, such as NavBlock) gets the optional prop `landmarkLabel`.
+// - the root landmark: `aria-label` = landmarkLabel, which replaces its default name (the heading by aria-labelledby, or
+//   its own aria-label); without it the default stays;
+// - a nested landmark keeps its own name and adds the label after it ("Main navigation, Navigation bar, open panel"),
+//   so landmarks of one type stay distinct when a page shows the same block more than once (gallery, catalog, themes);
+// - an organism inside passes the label on.
+// Pages that repeat a block (variants) set it from the dictionary; elsewhere it is left out and nothing changes.
+import { coalesce, cond, ref, tpl, undef, uniq } from "../build";
+import type { OrganismSpec, Value, ViewNode } from "../ir";
+
+
+const PROP = "landmarkLabel";
+const LANDMARK_TAGS = new Set(["section", "nav", "aside", "header", "footer"]);
+const label = (): Value => ref(PROP);
+
+/** a primitive that renders a landmark: Block with a landmark tag (a computed tag counts) */
+function isLandmark(n: ViewNode): boolean {
+  if (!("use" in n) || n.use !== "Block") return false;
+  const tag = n.props?.["Tag"];
+  return typeof tag === "string" ? LANDMARK_TAGS.has(tag) : tag !== undefined;
+}
+
+const kids = (n: ViewNode): ViewNode[][] => {
+  if ("use" in n) return n.children ? [n.children] : [];
+  if ("when" in n) return [n.then, ...(n.else ? [n.else] : [])];
+  if ("each" in n) return [n.do];
+  if ("organism" in n) return Object.values(n.slots ?? {}).map((s) => s.do);
+  return [];
+};
+
+function holds(nodes: ViewNode[], labelled: Set<string>): boolean {
+  return nodes.some((n) => isLandmark(n) || ("organism" in n && labelled.has(n.organism)) || kids(n).some((k) => holds(k, labelled)));
+}
+
+/** name the root landmark: the label replaces the default name */
+function nameRoot(n: Extract<ViewNode, { use: string }>): void {
+  const attrs = (n.attrs ??= {});
+  const by = attrs["aria-labelledby"];
+  if (by !== undefined) attrs["aria-labelledby"] = cond(label(), undef(), by);
+  const own = attrs["aria-label"];
+  attrs["aria-label"] = own !== undefined ? coalesce(label(), own) : label();
+}
+
+/** name a nested landmark: its own name, then the label */
+function nameNested(n: Extract<ViewNode, { use: string }>): void {
+  const attrs = (n.attrs ??= {});
+  const own = attrs["aria-label"];
+  if (own !== undefined) attrs["aria-label"] = cond(label(), uniq(tpl("{0}, {1}", own, label())), own);
+}
+
+function walk(nodes: ViewNode[], root: boolean, labelled: Set<string>): void {
+  for (const n of nodes) {
+    if ("use" in n && isLandmark(n)) {
+      if (root) nameRoot(n); else nameNested(n);
+      for (const k of kids(n)) walk(k, false, labelled);
+      continue;
+    }
+    if ("organism" in n && labelled.has(n.organism)) {
+      const props = (n.props ??= {});
+      // a nested NavBlock (a nav inside a header, a footer, a sidebar) keeps its own name and adds the label after it
+      const own = props["label"];
+      if (!root && n.organism === "NavBlock" && own !== undefined) props["label"] = cond(label(), uniq(tpl("{0}, {1}", own, label())), own);
+      else if (props[PROP] === undefined) props[PROP] = label();
+      for (const k of kids(n)) walk(k, false, labelled);
+      continue;
+    }
+    // a root is a top node, or a top node of a branch; a loop body is nested (a landmark per item is never a root)
+    if ("when" in n) for (const k of kids(n)) walk(k, root, labelled);
+    else for (const k of kids(n)) walk(k, false, labelled);
+  }
+}
+
+/** add `landmarkLabel` to every organism that holds a landmark (in place, idempotent) */
+export function withLandmarkLabels(specs: OrganismSpec[]): void {
+  const labelled = new Set<string>();
+  for (let grew = true; grew;) {
+    grew = false;
+    for (const s of specs) if (!labelled.has(s.name) && holds(s.view, labelled)) { labelled.add(s.name); grew = true; }
+  }
+  for (const s of specs) {
+    if (!labelled.has(s.name) || s.props.some((p) => p.name === PROP)) continue;
+    // a copy: two specs may share one props array (footer-split-parts), and each needs its own walk
+    s.props = [...s.props, { name: PROP, type: "string", docs: "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one" }];
+    walk(s.view, true, labelled);
+  }
+}
+export const LANDMARK_LABEL = PROP;
+
+/** leave out an organism prop given as a literal equal to the default of that prop (the same output, a shorter file) */
+export function dropDefaultProps(specs: OrganismSpec[]): void {
+  const byName = new Map(specs.map((s) => [s.name, s]));
+  const visit = (nodes: ViewNode[]): void => {
+    for (const n of nodes) {
+      if ("organism" in n && n.props) {
+        const target = byName.get(n.organism);
+        for (const [k, v] of Object.entries(n.props)) {
+          const p = target?.props.find((x) => x.name === k);
+          if (p && p.default !== undefined && (typeof v === "string" || typeof v === "number" || typeof v === "boolean") && v === p.default) delete n.props[k];
+        }
+      }
+      for (const k of kids(n)) visit(k);
+    }
+  };
+  for (const s of specs) visit(s.view);
+}
diff --git a/xgen/screens/src/authoring/placeholders.ts b/xgen/screens/src/authoring/placeholders.ts
new file mode 100644
index 0000000..f942670
--- /dev/null
+++ b/xgen/screens/src/authoring/placeholders.ts
@@ -0,0 +1,10 @@
+// The built-in placeholders of MediaFrame: neutral SVG pictures (a sun over two hills) as base64 data URIs, one for the light theme and one for the dark.
+// Flat colors, no gradients, no external files, nothing from a design kit. They stand in for a real `src` so a page looks like it has pictures.
+const svg = (bg: string, shape: string, line: string): string =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice"><rect width="400" height="300" fill="${bg}"/><circle cx="296" cy="96" r="30" fill="${shape}"/><path d="M0 300V214l96-76 88 70 64-48 152 96v44z" fill="${shape}"/><path d="M0 300v-52l120-60 110 62 60-30 110 80v0z" fill="${line}" opacity="0.55"/></svg>`;
+const uri = (s: string): string => `data:image/svg+xml;base64,${Buffer.from(s, "utf8").toString("base64")}`;
+
+export const placeholders = {
+  light: uri(svg("#e2e8f0", "#cbd5e1", "#94a3b8")),
+  dark: uri(svg("#1e293b", "#334155", "#475569")),
+};
diff --git a/xgen/screens/src/authoring/presets/default-preset.ts b/xgen/screens/src/authoring/presets/default-preset.ts
new file mode 100644
index 0000000..0c78cd5
--- /dev/null
+++ b/xgen/screens/src/authoring/presets/default-preset.ts
@@ -0,0 +1,46 @@
+// The default layout preset: block geometry in one place, on the Tailwind scale (8 px grid, 4 px steps for small parts).
+// Blocks and components read these with layoutOf("<path>") and never spell a size themselves.
+// A design system that needs other sizes adds its own preset with the same keys.
+import type { PresetSpec } from "../../ir";
+
+export const defaultPreset: PresetSpec = {
+  specVersion: 1,
+  id: "preset.defaults",
+  name: "defaults",
+  docs: "Default layout preset: the sizes of the landing blocks as Tailwind classes.\nBlocks combine these with token classes; swap the preset to resize every block at once.",
+  source: "ui8kit default sizes (Tailwind scale, no arbitrary values)",
+  notes: {
+    text: "small type steps for chips, badges and links",
+    "hero.band": "the inverse band: tall section, large bottom radius",
+    "hero.title": "display title",
+    "hero.titleWeights": "one font-weight class per title word",
+    "hero.composer": "the prompt box",
+    "logos.row": "one centered row of logo slots",
+    "logos.glyph": "the Lucide glyph inside a slot: half the slot",
+  },
+  values: {
+    text: { tiny: "text-xs", small: "text-sm" },
+    hero: {
+      band: "min-h-160 rounded",
+      container: "max-w-7xl",
+      head: "gap-12",
+      badge: "w-48",
+      title: "text-5xl leading-tight",
+      titleWeights: ["font-normal", "font-semibold", "font-normal", "font-semibold"],
+      column: "max-w-xl gap-16",
+      composer: "h-40 max-w-xl rounded",
+      attach: "w-24",
+      promptLine: "h-10",
+      model: "w-24",
+    },
+    section: { landing: "max-w-6xl" },
+    media: { rounded: "rounded" },
+    templates: { card: "h-60 w-64", image: "h-40 w-58 rounded", footer: "h-12 min-h-12" },
+    stats: { column: "min-h-28", figure: "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18", panel: "gap-24 rounded py-20" },
+    features: { cells: "rounded" },
+    news: { card: "h-56 w-64", cover: "h-40 w-64 rounded", title: "top-16", strip: "h-12 min-h-12" },
+    cta: { panel: "rounded py-20", title: "max-w-md", text: "max-w-2xl", button: "w-40" },
+    logos: { row: "h-28 max-w-4xl gap-12 pb-8", slot: "size-20", glyph: 40 },
+    footer: { card: "h-72 gap-12 rounded", brand: "w-48", groups: "gap-x-16" },
+  },
+};
diff --git a/xgen/screens/src/authoring/presets/index.ts b/xgen/screens/src/authoring/presets/index.ts
new file mode 100644
index 0000000..443651e
--- /dev/null
+++ b/xgen/screens/src/authoring/presets/index.ts
@@ -0,0 +1,15 @@
+// The layout presets and the helpers the authoring code reads them with: layoutOf("hero.band") is the class string of the hero band.
+import { preset } from "../../build";
+import { presetAt, type PresetSpec, type Value } from "../../ir";
+import { defaultPreset } from "./default-preset";
+
+export const presets: PresetSpec[] = [defaultPreset];
+
+/** a preset value by its path; fails the build when the path does not exist, so a typo never reaches the output */
+const reader = (p: PresetSpec) => (path: string): Value => {
+  if (presetAt(p, path) === undefined) throw new Error(`preset ${p.name} has no value at "${path}"`);
+  return preset(p.name, path);
+};
+
+/** default block geometry (landing blocks) */
+export const layoutOf = reader(defaultPreset);
diff --git a/xgen/screens/src/authoring/props.ts b/xgen/screens/src/authoring/props.ts
new file mode 100644
index 0000000..d12b237
--- /dev/null
+++ b/xgen/screens/src/authoring/props.ts
@@ -0,0 +1,46 @@
+// Prop helpers every block shares: literal unions (tsOf), the common axes (tone, density, cols), id and title,
+// the action set of a section and its picture. Blocks and components import them from here.
+import { cond, eq, gt, len, ref, undef, organism, when } from "../build";
+import type { ViewNode } from "../ir";
+import { groupFields, requireFields, ts } from "./kit";
+
+export const tsOf = (...v: string[]) => ts(v.map((x) => JSON.stringify(x)).join(" | "));
+
+export const tone = tsOf("default", "muted");
+export const density = tsOf("roomy", "default", "compact");
+export const cols = tsOf("1-2", "1-3", "1-4");
+export const id = { name: "id", type: "string" as const, required: true };
+export const title = { name: "title", type: "string" as const, required: true };
+/** the text of the empty state of a list block (no records), from the dictionary */
+export const empty = { name: "empty", type: "string" as const, default: "", docs: "the text of the empty state (no records), from the dictionary" };
+/** the list `list` or, when it has no records, the EmptyState with the `empty` text (Codex rule: every list block has an empty state) */
+/** the part `nodes` only when `list` has records (emptyMode omit: an empty secondary list is left out) */
+export const ifAny = (list: string, nodes: ViewNode[]): ViewNode => when(gt(len(ref(list)), 0), nodes);
+export const orEmpty = (list: string, icon: string, nodes: ViewNode[], wrap: (n: ViewNode[]) => ViewNode[] = (n) => n): ViewNode =>
+  when(eq(len(ref(list)), 0), wrap([organism("EmptyState", { icon, title: ref("empty") })]), nodes);
+
+/** the ActionGroup of a section: from flat props (cta, href, secondary, secondaryHref, actions), or from a grouped prop `group` (group.cta ... group.mode) */
+export const actions = (center: ReturnType<typeof eq>, group = ""): ViewNode => {
+  const f = (name: string): ReturnType<typeof ref> => ref(group ? `${group}.${name}` : name);
+  return organism("ActionGroup", {
+    primary: f("cta"), primaryHref: f("href"),
+    secondary: cond(eq(group ? f("mode") : ref("actions"), "two"), f("secondary"), undef()), secondaryHref: f("secondaryHref"),
+    align: cond(center, "center", "start"),
+  });
+};
+/** the fields of an action set (record ActionSet of CtaActions): one or two links, or a form (an email field, or the prompt box of HeroPrompt) */
+export const actionSet = requireFields(groupFields(
+  ["mode", tsOf("one", "two", "form"), "one or two links, or a form", "one"],
+  ["cta", "string", "primary action label"], ["href", "string", "the address of the primary action; none: a button, not a link"], ["secondary", "string"], ["secondaryHref", "string"],
+  ["emailLabel", "string", "label of the form field (the email field, or the prompt line of HeroPrompt)"],
+), "cta");
+/** an action set without the form: one or two links (record LinkActions of ErrorPage) */
+export const linkActions = actionSet
+  .filter((f) => f.name !== "emailLabel")
+  .map((f) => (f.name === "mode" ? { ...f, type: `"one" | "two"`, docs: "one or two links" } : f));
+export const mediaOf = (alt: ReturnType<typeof ref>): ViewNode[] => [organism("MediaFrame", { alt, ratio: "4/3" })];
+
+/** the two-value axes of the lighter blocks */
+export const toneLite = tsOf("default", "muted");
+export const denseLite = tsOf("default", "compact");
+export const roomyLite = tsOf("default", "roomy");
diff --git a/xgen/screens/src/authoring/screens/plans-screen.ts b/xgen/screens/src/authoring/screens/plans-screen.ts
new file mode 100644
index 0000000..731299a
--- /dev/null
+++ b/xgen/screens/src/authoring/screens/plans-screen.ts
@@ -0,0 +1,84 @@
+// The plans screen: a collection of plans (list with search, sortable columns and a pager) and a record card (the PricingCard organism).
+// Built from primitives; the table is assembled from the column list so the markup and the sorting config cannot disagree.
+import { call, coalesce, cond, each, eq, op, outlet, ref, sortHeader, text, tpl, use, when, not } from "../../build";
+import { CODEX_FIELDS } from "../../../../runtimes/core/assets/app/fields";
+import type { ColumnSpec, ScreenSpec, ViewNode } from "../../ir";
+import { wide } from "../components/frames";
+
+const columns: ColumnSpec[] = [
+  { id: "name", label: "plans.col.name", type: "text", sortable: true },
+  { id: "price", label: "plans.col.price", type: "money", sortable: true, align: "end" },
+  { id: "seats", label: "plans.col.seats", type: "number", sortable: true, align: "end" },
+  { id: "storage", label: "plans.col.storage", type: "number", sortable: true, align: "end" },
+  { id: "status", label: "plans.col.status", type: "badge" },
+];
+
+const headCell = (c: ColumnSpec): ViewNode =>
+  c.sortable
+    ? sortHeader(c.id, ref(`ui.${c.label}`), c.align ?? "start")
+    : use("TableHeadCell", { props: { Scope: "col", Class: c.align === "end" ? "text-right" : "" } }, text(ref(`ui.${c.label}`)));
+
+const cell = (c: ColumnSpec): ViewNode => {
+  const align = c.align === "end" ? "text-right" : "";
+  const value = ref(`row.${c.id}`);
+  const inner: ViewNode =
+    c.type === "text" ? use("Link", { props: { Href: op("add", op("add", "#/plans/", ref("row.id")), ref("view.qs")), Variant: "default" }, attrs: { "data-testid": "open-record" } }, text(value))
+    : c.type === "money" ? text(op("money", value, ref("row.currency")))
+    : c.type === "badge" ? use("Badge", { props: { Variant: cond(eq(value, "active"), "default", "secondary"), Size: "default" } }, text(op("at", ref("ui.status"), coalesce(value, ""))))
+    : text(value);
+  return use("TableCell", { props: { Class: align } }, inner);
+};
+
+const list: ViewNode[] = [
+  use("Stack", { props: { Gap: "4" } },
+    use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "flex-wrap" } },
+      use("Input", { props: { Type: "search", Size: "default", Value: ref("view.q"), Placeholder: ref("ui.plans.search"), AriaLabel: ref("ui.plans.search"), Class: "max-w-xs" }, on: { input: call("actions.search", ref("event.value")) }, attrs: { "data-testid": "search" } }),
+      use("Text", { props: { Size: "sm", Class: "text-muted-foreground" }, attrs: { "data-testid": "count" } }, text(tpl(ref("ui.plans.count"), ref("view.total"))))),
+    use("Table", { props: { Class: "w-full text-sm" }, attrs: { "data-testid": "plans-table" } },
+      use("TableCaption", { props: { Class: "sr-only" } }, text(ref("ui.plans.caption"))),
+      use("TableHead", {}, use("TableRow", {}, ...columns.map(headCell))),
+      use("TableBody", {}, each(ref("view.rows"), "row", ref("row.id"), use("TableRow", { attrs: { "data-testid": "plan-row" } }, ...columns.map(cell))))),
+    when(eq(ref("view.total"), 0), [use("Text", { props: { Class: "text-muted-foreground" }, attrs: { "data-testid": "empty" } }, text(ref("ui.plans.empty")))]),
+    use("Group", { props: { Gap: "4", Align: "center", Justify: "between", Class: "flex-wrap" } },
+      use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(tpl(ref("ui.pager.showing"), ref("view.from"), ref("view.to"), ref("view.total")))),
+      use("Group", { props: { Gap: "2" } },
+        use("Button", { props: { Variant: "outline", Size: "sm", Disabled: not(op("gt", ref("view.page"), 1)) }, on: { click: call("actions.page", op("add", ref("view.page"), -1)) }, attrs: { "data-testid": "prev" } }, text(ref("ui.pager.previous"))),
+        use("Button", { props: { Variant: "outline", Size: "sm", Disabled: not(op("lt", ref("view.page"), ref("view.pages"))) }, on: { click: call("actions.page", op("add", ref("view.page"), 1)) }, attrs: { "data-testid": "next" } }, text(ref("ui.pager.next")))))),
+];
+
+const record: ViewNode[] = [
+  use("Stack", { props: { Gap: "4" } },
+    use("Group", {}, use("Button", { props: { Variant: "ghost", Size: "sm" }, on: { click: call("actions.back") }, attrs: { "data-testid": "back" } }, text(ref("ui.record.back")))),
+    when(ref("record"),
+      [{ organism: "PricingCard", props: { plan: ref("record"), labels: ref("ui.pricing"), current: true }, on: { select: call("actions.back") },
+        slots: { footer: { args: ["plan"], do: [use("Text", { props: { Size: "sm", Class: "text-muted-foreground" }, attrs: { "data-testid": "record-id" } }, text(tpl(ref("ui.record.id"), ref("plan.id"))))] } } }],
+      [use("Text", { props: { Class: "text-muted-foreground" }, attrs: { "data-testid": "missing" } }, text(ref("ui.record.missing")))])),
+];
+
+export const plansScreen: ScreenSpec = {
+  $schema: "../../schema/schemas/screen.schema.json",
+  specVersion: 1,
+  id: "screen.plans",
+  name: "PlansScreen",
+  docs: "Collection -> record: a list of plans (search, sort, pager; all state in the URL) and the card of one plan. Data: the Codex fixture `plans`.",
+  source: {
+    collection: "plans", kind: "plan", record: "Plan",
+    // the central plan map, plus the status the list shows in a column
+    fields: { ...CODEX_FIELDS.plan, status: "metadata.plan_status.value" },
+  },
+  list: { columns, searchFields: ["name", "tagline"], pageSize: 5, defaultSort: "price:asc" },
+  state: { q: "q", sort: "sort", page: "page" },
+  routes: [{ path: "plans", area: "list" }, { path: "plans/:id", area: "record" }],
+  organisms: ["PricingCard"],
+  // the screen opens on its one Block: the main of the page (the host frame adds no main of its own around a screen)
+  layout: [
+    use("Block", { props: { Tag: "main", ID: "main-content" }, attrs: { tabindex: -1, "data-testid": "main" } }, use("Container", { props: { Class: `${wide} py-8` } },
+      use("Stack", { props: { Gap: "6" } },
+        use("Group", { props: { Gap: "4", Align: "center", Justify: "between" } },
+          use("Title", { props: { As: 1, Size: "2xl", Weight: "bold" } }, text(ref("ui.app.title"))),
+          use("Button", { props: { Variant: "outline", Size: "sm" }, on: { click: call("actions.toggleTheme") }, attrs: { "data-testid": "theme-toggle" } }, text(ref("ui.theme.toggle")))),
+        outlet()))),
+  ],
+  areas: { list, record },
+  portable: { svelte: true, react: true },
+};
diff --git a/xgen/screens/src/authoring/screens/themes.ts b/xgen/screens/src/authoring/screens/themes.ts
new file mode 100644
index 0000000..f82d971
--- /dev/null
+++ b/xgen/screens/src/authoring/screens/themes.ts
@@ -0,0 +1,202 @@
+// The theme apps: each one is a composed screen (routes and areas made of blocks) that becomes a generated app in every host runtime.
+// A page is a lead block (the one with the h1), a list of blocks `block.variant`, and the words of its head. The head texts
+// are written to the dictionary under `pages.<app>.<page>` by screens/tools/author-theme-texts.ts; nothing else is written by hand.
+import { ref } from "../../build";
+import type { BlockUse, ComposedSpec } from "../../ir";
+import { t } from "../gallery/block-kit";
+
+/** [title, text, call to action] */
+type Head = [string, string, string];
+interface Page { path: string; lead: string; head: Head; rest: string[] }
+export interface ThemeApp { name: string; title: string; docs: string; footer: string; pages: Page[] }
+
+/** the lead blocks that take the title and the text of the page; the others (post, product) read them from their data */
+const TAKES_TEXT = new Set(["pagehead", "hero", "errorpage", "authpage"]);
+/** the key of an app in the dictionary: no hyphen, a hyphen would read as a minus in a path */
+export const keyOf = (name: string): string => name.replace(/-(\w)/g, (_, c: string) => c.toUpperCase());
+export const areaOf = (path: string): string => (path === "" ? "home" : path);
+/** the label of a page in the menu: the area with a capital, unless it reads better in other words */
+const NAV_WORDS: Record<string, string> = { signup: "Sign up", magic: "Magic link", faq: "FAQ" };
+const navLabel = (area: string): string => NAV_WORDS[area] ?? area[0]!.toUpperCase() + area.slice(1);
+/** the dictionary key of the menu label of a page */
+export const navKey = (app: string, path: string): string => `pages.${keyOf(app)}.${areaOf(path)}.nav`;
+/** the menu of a theme screen: one entry per page, in the order of the pages; written to its screen spec */
+export const themeRoutes = (app: ThemeApp): Array<{ id: string; path: string; titleKey: string }> => app.pages.map((p) => ({ id: areaOf(p.path), path: p.path, titleKey: navKey(app.name, p.path) }));
+
+export const themeApps: ThemeApp[] = [
+  {
+    name: "marketing-landing", title: "Landing pages", footer: "sitemap.columns",
+    docs: "Landing pages of a product: five heroes (screenshot, form, code, display type, backdrop) each followed by proof, features and a call to action, then a company page, a portfolio and a page for teams built from the split blocks.",
+    pages: [
+      { path: "", lead: "hero.screenshot", head: ["Ship pages that stay simple", "One toolkit for the page, the proof and the call to action.", "See the launch page"], rest: ["logos.row", "features.rowsAlternate", "steps.rowIcons", "stats.icons", "testimonials.single", "faq.list", "cta.band"] },
+      { path: "launch", lead: "hero.form", head: ["Be first in line", "Leave an address and get the first invitation.", "Read the developer page"], rest: ["iconwall.tiles4", "proof.above", "testimonials.grid3", "cta.form"] },
+      { path: "developers", lead: "hero.code", head: ["Built for developers", "Install, run and read the output in one terminal.", "Meet the studio"], rest: ["bento.bento", "templates.grid4", "features.tiles4", "faq.tabs", "cta.split"] },
+      { path: "studio", lead: "hero.display", head: ["Big words, small page", "Type first, picture second, one button.", "See the events page"], rest: ["logos.grid4", "features.tiles4", "testimonials.masonry", "cta.band"] },
+      { path: "events", lead: "hero.backdrop", head: ["Join us on stage", "Talks, workshops and a room full of builders.", "Back to the start"], rest: ["stats.cards", "testimonials.strip", "videos.overlay", "cta.agency"] },
+      { path: "company", lead: "pagehead.center", head: ["About us", "How we work, where we came from and who we are.", "See the work"], rest: ["about.split", "storytabs.yearTabs", "timeline.split", "team.cards4", "jobs.grouped"] },
+      { path: "work", lead: "aboutme.facts", head: ["", "", ""], rest: ["projects.cards", "photos.masonry"] },
+      { path: "teams", lead: "herosplit.quoteStats", head: ["", "", ""], rest: ["logos.row", "faqsplit.helpCard", "quotesplit.ratingPanel", "ctaproof.splitStats"] },
+    ],
+  },
+  {
+    name: "marketing-product", title: "Product pages", footer: "sitemap.columns",
+    docs: "Product pages: features as grids, bento, tabs, an accordion and a sticky list, before and after pictures, and the navigation patterns.",
+    pages: [
+      { path: "", lead: "hero.split", head: ["One product, many jobs", "See what it does and how the parts fit together.", "Take the tour"], rest: ["features.grid", "featuresplit.metricCards", "featureshowcase.panelCards4", "bento.images", "featuretabs.split", "accordion.media"] },
+      { path: "tour", lead: "pagehead.center", head: ["Take the tour", "Four stops: the list, the steps, the film and the menu.", "See the capabilities"], rest: ["sticky.end", "beforeafter.cards", "steps.column", "videos.grid3", "megamenu.open"] },
+      { path: "capabilities", lead: "pagehead.start", head: ["Capabilities", "Every feature in a shape that suits it.", "See the navigation"], rest: ["features.grid2", "iconwall.chips6", "accordion.first", "beforeafter.rows", "sticky.card", "cta.compact"] },
+      { path: "navigation", lead: "pagehead.muted", head: ["Navigation patterns", "Bars, menus and footers in each shape.", "Back to the start"], rest: ["header.stacked", "navbar.split", "navbar.search", "navbar.media", "megamenu.twoCols", "footer.centered"] },
+    ],
+  },
+  {
+    name: "marketing-pricing", title: "Pricing pages", footer: "sitemap.newsletter",
+    docs: "Pricing pages: tiers with a billing switch, a comparison table, one plan, a usage slider, credit packs, free against pro, and us against the rest.",
+    pages: [
+      { path: "", lead: "pagehead.center", head: ["Plans for every team", "Pick a plan, change it when the team grows.", "Compare the plans"], rest: ["pricing.monthly", "logos.grid3", "compare.plans", "faq.twoColumns", "cta.saas"] },
+      { path: "plans", lead: "pagehead.start", head: ["Free or pro", "Start free; the pro plan adds the rest.", "See the usage page"], rest: ["pricing.duo", "plan.standard", "pricing.stack", "compare.highlight"] },
+      { path: "usage", lead: "pagehead.muted", head: ["Pay for what you use", "Slide to your volume or buy a pack of credits.", "See how we compare"], rest: ["usage.card", "credits.tiles4", "credits.rows", "pricing.annual", "cta.row"] },
+      { path: "compare", lead: "hero.muted", head: ["Why teams switch", "Us against the others, line by line.", "Back to the plans"], rest: ["compare.rivals", "testimonials.featured", "faq.search", "cta.quote"] },
+    ],
+  },
+  {
+    name: "commerce-shop", title: "Online shop", footer: "sitemap.columns",
+    docs: "A shop: home with categories and products, the catalog, offers, a product page with details and reviews, the cart, the checkout, delivery and pickup, and the orders.",
+    pages: [
+      { path: "", lead: "hero.shop", head: ["Good things for your desk", "New arrivals, picked by hand and shipped in two days.", "Browse the catalog"], rest: ["categories.chips", "products.grid4", "reviews.grid", "newsletter.stacked", "cta.shop"] },
+      { path: "catalog", lead: "pagetrail.crumbsFigure", head: ["", "", ""], rest: ["categories.sidebar", "products.catalog"] },
+      { path: "browse", lead: "pagehead.center", head: ["Browse by mood", "Three ways to look at the same shelf.", "Open a product"], rest: ["categories.bar", "products.browse", "products.showcase", "products.list"] },
+      { path: "offers", lead: "storehero.overlay", head: ["", "", ""], rest: ["usp.strip", "products.railCompact", "cartdrawer.filled"] },
+      { path: "product", lead: "product.split", head: ["", "", ""], rest: ["productinfo.split", "reviews.list", "products.grid3"] },
+      { path: "cart", lead: "pagehead.start", head: ["Your cart", "Check the lines and the total, then pay.", "Go to checkout"], rest: ["cartpage.split", "cart.table", "summary.card"] },
+      { path: "checkout", lead: "pagehead.start", head: ["Place your order", "Four short steps and the order is on its way.", "See the delivery options"], rest: ["checkout.numbered"] },
+      { path: "delivery", lead: "pagehead.center", head: ["Delivery and pickup", "Zones, windows and the stores near you.", "See your orders"], rest: ["delivery.full", "zones.table", "slots.split", "locations.cards"] },
+      { path: "orders", lead: "pagehead.start", head: ["Your orders", "Every order, with its status.", "Back to the shop"], rest: ["orders.table", "orders.cards"] },
+    ],
+  },
+  {
+    name: "promo-campaign", title: "Campaigns", footer: "footersplit.newsletterStart",
+    docs: "Campaign pages: announcement bars in every position and tone, sign-up forms, calls to action with a pattern, and the cookie notice.",
+    pages: [
+      { path: "", lead: "hero.cluster", head: ["Spring campaign", "A week of offers with a sign-up for early access.", "See the launch"], rest: ["announcement.badge", "newsletter.split", "cta.form", "cookie.card"] },
+      { path: "launch", lead: "hero.saas", head: ["The launch is live", "Everything new in one place.", "See the offer"], rest: ["announcement.bar", "newsletter.inline", "logos.tiles4", "cta.saas"] },
+      { path: "offer", lead: "pagehead.center", head: ["Limited offer", "Three banners, one deadline.", "See the notices"], rest: ["announcement.badge", "announcement.split", "announcement.shop", "cta.shop", "newsletter.consent"] },
+      { path: "notices", lead: "pagehead.start", head: ["Notices", "The bottom bar, the dismissible bar and the cookie choices.", "Back to the start"], rest: ["announcement.dismissible", "announcement.bottom", "cookie.settings", "cookie.bar", "newsletter.muted"] },
+    ],
+  },
+  {
+    name: "content-blog", title: "Blog", footer: "sitemap.compact",
+    docs: "A blog: a magazine front page, filtered and plain lists, and articles with a table of contents, a single column or no cover.",
+    pages: [
+      { path: "", lead: "pagehead.start", head: ["The journal", "Notes on design, engineering and the work in between.", "Read the articles"], rest: ["posts.magazine", "postshowcase.introCards", "newsletter.stacked"] },
+      { path: "articles", lead: "pagehead.center", head: ["All articles", "Filter by topic.", "Open the archive"], rest: ["posts.filters", "posts.twoUp"] },
+      { path: "archive", lead: "pagehead.start", head: ["Archive", "Older posts as a list, a digest and plain titles.", "Read a post"], rest: ["posts.list", "posts.digest", "posts.textOnly"] },
+      { path: "post", lead: "postheader.start", head: ["", "", ""], rest: ["article.toc"] },
+      { path: "story", lead: "postsplit.splitStats", head: ["", "", ""], rest: ["article.column"] },
+      { path: "essay", lead: "postheader.center", head: ["", "", ""], rest: ["article.column", "newsletter.inline"] },
+      { path: "plain", lead: "postheader.noCover", head: ["", "", ""], rest: ["article.plain", "posts.grid"] },
+    ],
+  },
+  {
+    name: "account-portal", title: "Account", footer: "sitemap.row",
+    docs: "Sign-in and account pages: split, centered and minimal sign-in, sign-up, reset, magic link, social first, the sign-up wizard, cards and the profile.",
+    pages: [
+      { path: "", lead: "authpage.split", head: ["Welcome back", "Sign in to pick up where you left off.", "Sign in"], rest: [] },
+      { path: "start", lead: "authpage.splitStart", head: ["Good to see you", "Your workspace is one step away.", "Sign in"], rest: [] },
+      { path: "signup", lead: "authpage.signup", head: ["Create your account", "Two minutes and you are in.", "Create account"], rest: [] },
+      { path: "welcome", lead: "authpage.socialFirst", head: ["Choose how to sign in", "Use an account you already have.", "Continue"], rest: [] },
+      { path: "reset", lead: "authpage.reset", head: ["Reset your password", "We send a link to your address.", "Send the link"], rest: [] },
+      { path: "magic", lead: "authpage.magic", head: ["Sign in with a link", "No password, only your inbox.", "Send the link"], rest: [] },
+      { path: "minimal", lead: "authpage.minimal", head: ["Sign in", "Enter your address and password.", "Sign in"], rest: [] },
+      { path: "options", lead: "authpage.social", head: ["More ways to sign in", "Use a provider or your address.", "Sign in"], rest: [] },
+      { path: "join", lead: "pagehead.center", head: ["Join in three steps", "Tell us about you, your team and your plan.", "Back to sign in"], rest: ["wizard.bar", "wizard.list"] },
+      { path: "cards", lead: "pagehead.start", head: ["Sign-in cards", "The card on its own, in three modes.", "Back to sign in"], rest: ["auth.signin", "auth.social", "auth.signupSocial"] },
+      { path: "profile", lead: "pagehead.start", head: ["Your profile", "Name, address and the way we reach you.", "Back to sign in"], rest: ["profile.split", "profile.stacked"] },
+    ],
+  },
+  {
+    name: "dashboard-console", title: "Console", footer: "sitemap.compact",
+    docs: "A console: overview with counters, chart and activity, a kanban board, app shells with sidebar, top bar and panes, dashboard shells, navigation, and empty and loading states.",
+    pages: [
+      { path: "", lead: "pagehead.start", head: ["Overview", "Counters, a chart and what happened last.", "Open the board"], rest: ["overview.split", "metrics.tiles", "chart.bars", "activity.timeline"] },
+      { path: "board", lead: "pagehead.start", head: ["Work board", "Cards in lanes; the port adds moving.", "Open the workspace"], rest: ["kanban.detail", "kanban.twoCols"] },
+      { path: "workspace", lead: "pagehead.muted", head: ["Workspace shells", "The frame of a signed-in app in three shapes.", "See the layouts"], rest: ["shell.sidebar", "shell.top", "shell.panes"] },
+      { path: "shells", lead: "pagehead.muted", head: ["Dashboard shells", "Top bars, sidebars and footers around empty cards.", "See the layout parts"], rest: ["dashshell.classic", "dashshell.twoLevel", "dashshell.end"] },
+      { path: "layouts", lead: "pagehead.start", head: ["Layout parts", "The sidebar, the bottom bar and the small widgets.", "See the states"], rest: ["sidenav.full", "sidenav.compact", "bottomnav.labels", "metrics.compact", "chart.meters", "overview.stacked"] },
+      { path: "states", lead: "pagehead.start", head: ["Empty and loading", "What the app shows before there is anything to show.", "Back to the overview"], rest: ["empty.illustrated", "empty.orders", "skeleton.cards", "skeleton.list"] },
+    ],
+  },
+  {
+    name: "onboarding-flow", title: "Onboarding", footer: "sitemap.row",
+    docs: "Onboarding: steps, a checklist that expands, a product tour with callouts, a welcome video and the first empty screen.",
+    pages: [
+      { path: "", lead: "pagehead.start", head: ["Get started", "Three steps to a working account.", "Watch the welcome"], rest: ["stepper.horizontal", "checklist.expand", "tour.below"] },
+      { path: "welcome", lead: "pagehead.center", head: ["Welcome aboard", "A short film, then the checklist.", "Set up"], rest: ["videomodal.default", "checklist.numbered"] },
+      { path: "setup", lead: "pagehead.start", head: ["Set up your workspace", "Tick the tasks as you go.", "Take the tour"], rest: ["stepper.vertical", "checklist.card", "empty.compact"] },
+      { path: "tour", lead: "pagehead.start", head: ["Product tour", "Callouts that point at the thing they explain.", "Back to the start"], rest: ["tour.above", "tour.end", "checklist.text", "videomodal.chapters"] },
+    ],
+  },
+  {
+    name: "support-center", title: "Support", footer: "sitemap.status",
+    docs: "A help center: channels, FAQ as tabs, chat and search, contact forms, and the pages for a missing or moved address.",
+    pages: [
+      { path: "", lead: "pagehead.center", head: ["How can we help?", "Pick a channel, read the answers or write to us.", "Open the FAQ"], rest: ["channels.grid", "medialist.topicRows", "faq.tabs", "contact.split"] },
+      { path: "faq", lead: "pagehead.start", head: ["Questions and answers", "Search, or ask the chat.", "Contact us"], rest: ["faq.chat", "faq.search"] },
+      { path: "contact", lead: "pagehead.start", head: ["Contact us", "We answer within one working day.", "Back to the help center"], rest: ["contact.single", "channels.list", "contact.consent"] },
+      { path: "missing", lead: "errorpage.centered", head: ["This page is gone", "The address is wrong or the page moved.", "Back to the help center"], rest: [] },
+      { path: "moved", lead: "errorpage.split", head: ["This page moved", "Try the search, or go back.", "Back to the help center"], rest: ["channels.twoUp"] },
+    ],
+  },
+];
+
+const split = (ref: string): [string, string] => { const [b, v] = ref.split("."); return [b!, v!]; };
+
+type PageTexts = { nav: string; title?: string; text?: string; cta?: string };
+/** the page texts as dictionary entries: pages.<appKey>.<page>.{nav,title,text,cta}; the menu label for every page, the head for the pages whose lead takes it */
+export function themeTexts(): Record<string, Record<string, PageTexts>> {
+  const out: Record<string, Record<string, PageTexts>> = {};
+  for (const app of themeApps) {
+    out[keyOf(app.name)] = {};
+    for (const p of app.pages) {
+      const area = areaOf(p.path);
+      out[keyOf(app.name)]![area] = { nav: navLabel(area), ...(TAKES_TEXT.has(split(p.lead)[0]) ? { title: p.head[0], text: p.head[1], cta: p.head[2] } : {}) };
+    }
+  }
+  return out;
+}
+
+const page = (app: ThemeApp, i: number): BlockUse[] => {
+  const p = app.pages[i]!;
+  const next = app.pages[(i + 1) % app.pages.length]!;
+  const [lb, lv] = split(p.lead);
+  const area = areaOf(p.path);
+  const at = (k: string) => t(`pages.${keyOf(app.name)}.${area}.${k}`);
+  const href = next.path === "" ? "#/" : `#/${next.path}`;
+  const lead: Record<string, BlockUse["props"]> = {
+    pagehead: { title: at("title"), text: at("text"), cta: at("cta"), href },
+    hero: { title: at("title"), text: at("text"), actions: { cta: at("cta"), href } },
+    errorpage: { title: at("title"), text: at("text"), actions: { cta: at("cta"), href } },
+    authpage: { title: at("title"), text: at("text"), submit: at("cta") },
+  };
+  return [{ block: lb, variant: lv, ...(lead[lb] ? { props: lead[lb] } : {}) }, ...p.rest.map((r) => { const [b, v] = split(r); return { block: b, variant: v }; })];
+};
+
+export const themeComposed: ComposedSpec[] = themeApps.map((app) => ({
+  $schema: "../../schema/schemas/composed.schema.json",
+  specVersion: 1,
+  id: `screen.theme-${app.name}`,
+  name: `Theme${app.name.split("-").map((w) => w[0]!.toUpperCase() + w.slice(1)).join("")}Screen`,
+  kind: "composed",
+  docs: app.docs,
+  routes: app.pages.map((p) => ({ path: p.path, area: areaOf(p.path) })),
+  frame: {
+    before: [{ block: "navbar", variant: "inline", props: { brandHref: "#/", links: ref("nav.links"), current: ref("nav.current"), skip: t("site.header.skip"), actions: { themeLabel: t("theme.toggle") } } }],
+    after: [{ block: split(app.footer)[0], variant: split(app.footer)[1] }],
+  },
+  areas: Object.fromEntries(app.pages.map((p, i) => [areaOf(p.path), page(app, i)])),
+  chunks: true,
+  requireH1: true,
+  nameLandmarks: true,
+  nav: true,
+  menu: themeRoutes(app),
+  portable: { svelte: true, react: true },
+}));
diff --git a/xgen/screens/src/authoring/ux.ts b/xgen/screens/src/authoring/ux.ts
new file mode 100644
index 0000000..52127cc
--- /dev/null
+++ b/xgen/screens/src/authoring/ux.ts
@@ -0,0 +1,24 @@
+// Small builders every authoring file shares: muted and strong text, a titled stack, a tab list.
+import { cn, cond, eq, op, ref, text, use, organism } from "../build";
+import type { Value, ViewNode } from "../ir";
+import { kids } from "./forms";
+
+/** a muted paragraph */
+export const muted = (v: Value, size = "sm", cls = ""): ViewNode => use("Text", { props: { Size: size, Class: cls ? cn("text-muted-foreground", cls) : "text-muted-foreground" } }, text(v));
+/** a strong line */
+export const strong = (v: Value, size = "base", weight = "semibold"): ViewNode => use("Text", { props: { Size: size, Weight: weight } }, text(v));
+/** a strong line inside phrasing content (summary, button, label, span): a span, not a paragraph */
+export const strongSpan = (v: Value, size = "base", weight = "semibold"): ViewNode => use("Inline", { props: { Class: `text-${size} font-${weight}` } }, text(v));
+/** a heading below the section heading */
+export const heading = (v: Value, size = "xl", as = 3): ViewNode => use("Title", { props: { As: as, Size: size, Weight: "bold" } }, text(v));
+/** a card surface: the radius, ring and fill of every boxed block */
+export const surface = (extra = ""): string => `rounded bg-card inset-ring inset-ring-border ${extra}`.trim();
+/** a tab list of the Switcher pattern; `active` tells which item is selected */
+export const tabList = (label: Value, items: Value, as: string, nameOf: string, active: (item: Value) => Value): ViewNode =>
+  organism("Switcher", { label }, kids({ each: items, as, key: ref(`${as}.id`), do: [organism("SwitcherItem", { active: active(ref(as)) }, kids(text(ref(`${as}.${nameOf}`))))] } as ViewNode));
+export const is = (axis: string, v: string): Value => eq(ref(axis), v);
+/** a fixed column count that gives way on a phone: 2 stays 2, 3 and 4 start at two columns, 6 at three */
+export const fluidCols = (cols: Value): Value => cond(eq(cols, "2"), "2", cond(eq(cols, "3"), "2-3", cond(eq(cols, "4"), "2-4", "3-6")));
+
+/** a column variant capped by the number of items (the fitCols helper of the runtimes), so a grid never keeps an empty column */
+export const fitCols = (cols: Value, n: Value): Value => op("fitCols", cols, n);
diff --git a/xgen/screens/src/build.ts b/xgen/screens/src/build.ts
new file mode 100644
index 0000000..988b7f4
--- /dev/null
+++ b/xgen/screens/src/build.ts
@@ -0,0 +1,78 @@
+// Builder of view structures from primitives. The organisms and screens of xgen/specs are written with these functions
+// (src/authoring) and stored as JSON; `xgen check` fails when the stored JSON differs from what the builder returns.
+import type { Handler, SlotFill, Value, ViewNode } from "./ir";
+
+export const ref = (path: string): Value => ({ $: path });
+export const op = (name: string, ...args: Value[]): Value => ({ op: name, args });
+export const eq = (a: Value, b: Value) => op("eq", a, b);
+export const not = (a: Value) => op("not", a);
+export const and = (...a: Value[]) => op("and", ...a);
+export const or = (...a: Value[]) => op("or", ...a);
+export const cond = (t: Value, a: Value, b: Value) => op("cond", t, a, b);
+export const add = (a: Value, b: Value) => op("add", a, b);
+export const mul = (a: Value, b: Value) => op("mul", a, b);
+export const div = (a: Value, b: Value) => op("div", a, b);
+export const money = (a: Value, b: Value) => op("money", a, b);
+export const sumBy = (items: Value, a: string, b: string) => op("sumBy", items, a, b);
+export const firstOf = (items: Value, field: string) => op("firstOf", items, field);
+export const count = (items: Value, field: string) => op("count", items, field);
+export const where = (items: Value, field: string, value: Value) => op("where", items, field, value);
+export const match = (items: Value, field: string, value: Value) => op("match", items, field, value);
+export const len = (a: Value) => op("len", a);
+export const pick = (items: Value, id: Value) => op("pick", items, id);
+export const round = (a: Value) => op("round", a);
+export const num = (n: number): Value => n;
+export const lt = (a: Value, b: Value) => op("lt", a, b);
+export const sub = (a: Value, b: Value) => op("sub", a, b);
+export const le = (a: Value, b: Value) => op("le", a, b);
+export const ge = (a: Value, b: Value) => op("ge", a, b);
+export const gt = (a: Value, b: Value) => op("gt", a, b);
+export const ne = (a: Value, b: Value) => op("ne", a, b);
+export const cn = (...a: Value[]) => op("cn", ...a);
+/** a value of a kit preset (specs/presets): preset("defaults", "hero.band") */
+export const preset = (name: string, path: string): Value => op("preset", name, path);
+export const coalesce = (...a: Value[]) => op("coalesce", ...a);
+export const str = (a: Value) => op("str", a);
+export const words = (a: Value) => op("words", a);
+export const nbsp = (a: Value) => op("nbsp", a);
+/** drop a ", " segment equal (case-insensitive) to the one before it */
+export const uniq = (a: Value) => op("uniq", a);
+export const nth = (a: Value, i: Value) => op("nth", a, i);
+export const has = (a: Value) => op("has", a);
+export const undef = (): Value => op("undef");
+export const at = (a: Value, b: Value) => op("at", a, b);
+export const list = (...items: Value[]): Value => op("list", ...items);
+export const tpl = (template: Value, ...values: Value[]) => op("tpl", template, ...values);
+
+export const call = (name: string, ...args: Value[]): Handler => ({ call: name, args });
+
+type Opts = { props?: Record<string, Value>; attrs?: Record<string, Value>; on?: Record<string, Handler> };
+export const use = (name: string, opts: Opts = {}, ...children: ViewNode[]): ViewNode => ({
+  use: name,
+  ...(opts.props ? { props: opts.props } : {}),
+  ...(opts.attrs ? { attrs: opts.attrs } : {}),
+  ...(opts.on ? { on: opts.on } : {}),
+  ...(children.length ? { children } : {}),
+});
+export const text = (v: Value): ViewNode => ({ text: v });
+export const when = (test: Value, then: ViewNode[], otherwise?: ViewNode[]): ViewNode => ({ when: test, then, ...(otherwise ? { else: otherwise } : {}) });
+export const each = (items: Value, as: string, key: Value, ...body: ViewNode[]): ViewNode => ({ each: items, as, key, do: body });
+/** a loop that also names its index */
+export const eachAt = (items: Value, as: string, index: string, key: Value, ...body: ViewNode[]): ViewNode => ({ each: items, as, key, do: body, index });
+export const slot = (name: string, ...args: Value[]): ViewNode => ({ slot: name, ...(args.length ? { args } : {}) });
+export const organism = (name: string, props: Record<string, Value>, extra: { on?: Record<string, Handler>; slots?: Record<string, SlotFill> } = {}): ViewNode => ({ organism: name, props, ...(extra.on ? { on: extra.on } : {}), ...(extra.slots ? { slots: extra.slots } : {}) });
+export const outlet = (): ViewNode => ({ outlet: true });
+/** a part of the screen layout (ScreenSpec.parts): its own file next to the screen */
+export const part = (name: string): ViewNode => ({ part: name });
+
+/** a sortable column header: three static aria-sort branches (ascending, descending, none), because ARIA state is never computed */
+export function sortHeader(field: string, label: Value, align: "start" | "end" = "start"): ViewNode {
+  const cls = align === "end" ? "text-right" : "";
+  const button = (): ViewNode => use("Button", { props: { Variant: "ghost", Size: "sm", Class: align === "end" ? "-mx-2 ml-auto px-2" : "-mx-2 px-2" }, on: { click: call("actions.sort", field) } }, text(label));
+  const cell = (aria: string): ViewNode => use("TableHeadCell", { props: { Scope: "col", Class: cls }, attrs: { "aria-sort": aria } }, button());
+  return when(and(eq(ref("view.sort.field"), field), eq(ref("view.sort.dir"), "asc")), [cell("ascending")],
+    [when(and(eq(ref("view.sort.field"), field), eq(ref("view.sort.dir"), "desc")), [cell("descending")], [cell("none")])]);
+}
+
+/** a slot fill that passes on a slot of the enclosing organism (`icon={icon}`), so its content is not repeated */
+export const forward = (slotName: string): SlotFill => ({ args: [], do: [], forward: slotName });
diff --git a/xgen/screens/src/compose-catalog.ts b/xgen/screens/src/compose-catalog.ts
new file mode 100644
index 0000000..e7f0e57
--- /dev/null
+++ b/xgen/screens/src/compose-catalog.ts
@@ -0,0 +1,128 @@
+// The catalog: the blocks of the kit grouped by a tree of sections and categories (Marketing > Team), one page per category with
+// its blocks and their variants drawn on the fixtures, and full pages composed of blocks (a store home, a checkout). The tree is data
+// (`ComposedSpec.catalog`); this file turns it into routes and areas, like the gallery.
+import { call, each, op, ref, text, use, tpl } from "./build";
+import type { BlockSpec, CatalogTree, OrganismSpec, ScreenSpec, Value, ViewNode } from "./ir";
+import { blockKey, dictKey, expandUse, hoistShared, labelledGroup, pageSection, skipLink, TEXT, variantSection, type OrganismNode } from "./compose-kit";
+import { wide } from "./authoring/components/frames";
+import { navBlockOf } from "./authoring/components/landmarks";
+
+const CARD = "flex flex-col gap-2 rounded p-4 inset-ring inset-ring-border";
+const page = (...children: ViewNode[]): ViewNode => pageSection(use("Container", { props: { Class: `${wide} py-10` } }, use("Stack", { props: { Gap: "8", Align: "stretch" } }, ...children)));
+const head = (eyebrow: Value | null, title: Value, intro: Value, testid: string): ViewNode =>
+  use("Stack", { props: { Gap: "2", Align: "stretch" } },
+    ...(eyebrow ? [use("Text", { props: { Size: "sm", Class: "font-medium text-muted-foreground" }, attrs: { "data-testid": "catalog-eyebrow" } }, text(eyebrow))] : []),
+    use("Title", { props: { As: 1, Size: "4xl", Weight: "bold" }, attrs: { "data-testid": testid } }, text(title)),
+    use("Text", { props: { Class: "max-w-2xl text-muted-foreground" } }, text(intro)));
+const back = (href: string, label: string): ViewNode => use("Group", {}, use("Link", { props: { Href: href, Variant: "default" }, attrs: { "data-testid": "back" } }, text(TEXT(label))));
+
+/** the variants of a block a category shows: the named ones, in the order of the block */
+const variantsOf = (b: BlockSpec, names?: string[]): BlockSpec["variants"] => (names ? b.variants.filter((v) => names.includes(v.id)) : b.variants);
+
+export function catalog(tree: CatalogTree, blocks: BlockSpec[], org: Record<string, OrganismSpec>, problems: string[], where: string): { areas: Record<string, ViewNode[]>; routes: ScreenSpec["routes"]; consts: Record<string, Value>; used: BlockSpec[] } {
+  const byKey = new Map(blocks.map((b) => [blockKey(b), b]));
+  const used = new Set<BlockSpec>();
+  const routes: ScreenSpec["routes"] = [{ path: "", area: "index" }, { path: "pages", area: "pages" }];
+  const areas: Record<string, ViewNode[]> = {};
+  const consts: Record<string, Value> = {};
+  const seen = new Set<string>();
+  const hoisted = new Set<string>();
+  const sections = tree.sections.map((s) => ({
+    id: s.id, titleId: `section-${s.id}-title`, title: TEXT(`catalog.sections.${s.id}.title`), text: TEXT(`catalog.sections.${s.id}.text`),
+    categories: s.categories.map((c) => {
+      if (seen.has(c.id) || c.id === "pages" || c.id.startsWith("page-")) problems.push(`${where}: category id ${c.id} is taken`);
+      seen.add(c.id);
+      const shown: Array<{ b: BlockSpec; vs: BlockSpec["variants"] }> = [];
+      for (const e of c.entries) {
+        const b = byKey.get(e.block);
+        if (!b) { problems.push(`${where}: category ${c.id} names no block ${e.block}`); continue; }
+        for (const v of e.variants ?? []) if (!b.variants.some((x) => x.id === v)) problems.push(`${where}: category ${c.id}: block ${e.block} has no variant ${v}`);
+        if (shown.some((x) => x.b === b)) problems.push(`${where}: category ${c.id} lists ${e.block} twice`);
+        shown.push({ b, vs: variantsOf(b, e.variants) });
+        used.add(b);
+      }
+      const count = shown.reduce((n, x) => n + x.vs.length, 0);
+      routes.push({ path: c.id, area: c.id });
+      areas[c.id] = [page(
+        back("#/", "catalog.back"),
+        head(TEXT(`catalog.sections.${s.id}.title`), TEXT(`catalog.categories.${dictKey(c.id)}`), tpl(TEXT("catalog.count"), shown.length, count), "category-title"),
+        ...shown.map(({ b, vs }) => {
+          const key = blockKey(b);
+          const drawn: OrganismNode[] = [];
+          const node = labelledGroup("6", `catalog-${key}-title`, { "data-testid": "catalog-block", "data-block": key },
+            use("Stack", { props: { Gap: "2", Align: "stretch" } },
+              use("Title", { props: { As: 2, Size: "2xl", Weight: "bold" }, attrs: { id: `catalog-${key}-title` } }, text(TEXT(`blocks.names.${key}`))),
+              use("Text", { props: { Size: "sm", Class: "max-w-2xl text-muted-foreground" } }, text(TEXT(`blocks.docs.${key}`)))),
+            ...vs.map((v) => variantSection(b, v, org, drawn, 3)));
+          // a block shown in two categories names its shared values after the second category
+          hoistShared(b, drawn, consts, hoisted.has(key) ? `${c.id}_${key}` : key);
+          hoisted.add(key);
+          return node;
+        }))];
+      return { id: c.id, href: `#/${c.id}`, name: TEXT(`catalog.categories.${dictKey(c.id)}`), blocks: shown.length, variants: count };
+    }),
+  }));
+  // every variant of every block is in at least one category: the catalog is the whole kit
+  for (const b of blocks) for (const v of b.variants) {
+    const listed = tree.sections.some((s) => s.categories.some((c) => c.entries.some((e) => e.block === blockKey(b) && (!e.variants || e.variants.includes(v.id)))));
+    if (!listed) problems.push(`${where}: ${blockKey(b)}.${v.id} is in no category`);
+  }
+  const pages = tree.pages.map((p) => {
+    const id = `page-${p.id}`;
+    routes.push({ path: id, area: id });
+    const out = p.uses.map((u, i) => expandUse(u, blocks, org, `${where}.pages.${p.id}[${i}]`, `${p.id}-${u.block}${p.uses.filter((x) => x.block === u.block).length > 1 ? `-${i}` : ""}`, problems, p.uses.filter((x) => x.block === u.block).length > 1));
+    for (const u of p.uses) { const b = byKey.get(u.block); if (b) used.add(b); }
+    if (out.filter((x) => x.h1).length !== 1) problems.push(`${where}: page ${p.id} needs exactly one level 1 heading (found ${out.filter((x) => x.h1).length})`);
+    areas[id] = [
+      use("Block", { props: { Tag: "div", Class: "border-b border-border bg-muted" }, attrs: { "data-testid": "page-bar" } },
+        use("Container", { props: { Class: `${wide} flex flex-wrap items-center justify-between gap-4 py-2` } },
+          use("Link", { props: { Href: "#/pages", Variant: "default", Class: "text-sm" }, attrs: { "data-testid": "back" } }, text(TEXT("catalog.backPages"))),
+          use("Text", { props: { Size: "sm", Class: "text-muted-foreground" }, attrs: { "data-testid": "page-name" } }, text(TEXT(`catalog.pages.${dictKey(p.id)}.title`))))),
+      use("Box", { props: { Class: "flex flex-col" }, attrs: { "data-testid": "page-body", "data-page": p.id } }, ...out.flatMap((x) => x.nodes)),
+    ];
+    return { id: p.id, visit: id, href: `#/${id}`, name: TEXT(`catalog.pages.${dictKey(p.id)}.title`), text: TEXT(`catalog.pages.${dictKey(p.id)}.text`), blocks: p.uses.length };
+  });
+  consts["CATALOG"] = op("list", ...sections.map((s) => ({ ...s, categories: op("list", ...s.categories) })));
+  consts["PAGES"] = op("list", ...pages);
+  const categoryCard = use("ListItem", { props: { Class: CARD } },
+    use("Link", { props: { Href: ref("cat.href"), Variant: "default", Class: "font-bold" }, attrs: { "data-testid": "category-link", "data-category": ref("cat.id"), "data-visit": ref("cat.id") } }, text(ref("cat.name"))),
+    use("Text", { props: { Size: "sm", Class: "text-muted-foreground" }, attrs: { "data-testid": "category-count" } }, text(tpl(TEXT("catalog.count"), ref("cat.blocks"), ref("cat.variants")))));
+  const pageCard = use("ListItem", { props: { Class: CARD } },
+    use("Link", { props: { Href: ref("p.href"), Variant: "default", Class: "font-bold" }, attrs: { "data-testid": "page-link", "data-page": ref("p.id"), "data-visit": ref("p.visit") } }, text(ref("p.name"))),
+    use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("p.text"))),
+    use("Text", { props: { Size: "xs", Class: "text-muted-foreground" }, attrs: { "data-testid": "page-count" } }, text(tpl(TEXT("catalog.pageCount"), ref("p.blocks")))));
+  const grid = (testid: string, ...body: ViewNode[]): ViewNode => use("List", { props: { Tag: "ul", Class: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3" }, attrs: { "data-testid": testid } }, ...body);
+  const pagesSection = (h: 1 | 2): ViewNode => labelledGroup("4", `pages-title-${h}`, { "data-testid": "pages-section" },
+    use("Stack", { props: { Gap: "2", Align: "stretch" } },
+      use("Title", { props: { As: 2, Size: "2xl", Weight: "bold" }, attrs: { id: `pages-title-${h}` } }, text(TEXT("catalog.pagesTitle"))),
+      use("Text", { props: { Size: "sm", Class: "max-w-2xl text-muted-foreground" } }, text(TEXT("catalog.pagesText")))),
+    grid("page-list", each(ref("PAGES"), "p", ref("p.id"), pageCard)));
+  areas["index"] = [page(
+    head(null, TEXT("catalog.title"), TEXT("catalog.intro"), "catalog-title"),
+    each(ref("CATALOG"), "section", ref("section.id"),
+      labelledGroup("4", ref("section.titleId"), { "data-testid": "catalog-section", "data-section": ref("section.id") },
+        use("Stack", { props: { Gap: "2", Align: "stretch" } },
+          use("Title", { props: { As: 2, Size: "2xl", Weight: "bold" }, attrs: { id: ref("section.titleId") } }, text(ref("section.title"))),
+          use("Text", { props: { Size: "sm", Class: "max-w-2xl text-muted-foreground" } }, text(ref("section.text")))),
+        grid("category-list", each(ref("section.categories"), "cat", ref("cat.id"), categoryCard)))),
+    pagesSection(2))];
+  areas["pages"] = [page(back("#/", "catalog.back"), head(null, TEXT("catalog.pagesTitle"), TEXT("catalog.pagesText"), "pages-title"), grid("page-list", each(ref("PAGES"), "p", ref("p.id"), pageCard)))];
+  areas["notfound"] = [page(
+    use("Title", { props: { As: 1, Size: "4xl", Weight: "bold" } }, text(TEXT("site.notFound.title"))),
+    use("Group", {}, use("Button", { props: { Variant: "default", Size: "default", Href: "#/" } }, text(TEXT("catalog.back")))))];
+  return { areas, routes, consts, used: [...used] };
+}
+
+/** the header part of the catalog: the skip link, the brand, the tabs (categories, pages), links to the block gallery, the Skins screen and the Discovery panorama, and the theme button */
+export function catalogChrome(): ViewNode[] {
+  const tab = (href: string, key: string, testid: string): ViewNode => use("Link", { props: { Href: href, Variant: "default", Class: "text-sm font-medium" }, attrs: { "data-testid": testid } }, text(TEXT(key)));
+  return [
+    use("Block", { props: { Tag: "header", Class: "border-b border-border" } },
+      skipLink("sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:shadow"),
+      use("Container", { props: { Class: `${wide} flex flex-wrap items-center justify-between gap-4 py-3` } },
+        use("Link", { props: { Href: "#/", Variant: "default", Class: "text-lg font-bold" }, attrs: { "data-testid": "brand" } }, text(TEXT("catalog.title"))),
+        navBlockOf(TEXT("catalog.navLabel"), "flex flex-wrap items-center gap-4", undefined,
+          tab("#/", "catalog.categoriesTab", "tab-categories"), tab("#/pages", "catalog.pagesTitle", "tab-pages"), tab("/blocks/", "blocks.title", "gallery-link"), tab("/skins/", "skins.title", "skins-link"), tab("/discovery/", "discovery.title", "discovery-link"),
+          use("Button", { props: { Variant: "outline", Size: "sm" }, on: { click: call("actions.toggleTheme") }, attrs: { "data-testid": "theme-toggle" } }, text(TEXT("theme.toggle")))))),
+  ];
+}
diff --git a/xgen/screens/src/compose-kit.ts b/xgen/screens/src/compose-kit.ts
new file mode 100644
index 0000000..3b56ae7
--- /dev/null
+++ b/xgen/screens/src/compose-kit.ts
@@ -0,0 +1,170 @@
+// The pieces every composed screen is built from: block keys and variants, the props of a use, the node a use draws, the shared values of a
+// block page and the labelled section of one variant. compose.ts (pages, the gallery) and compose-catalog.ts (the catalog) use them.
+import { call, organism, ref, text, tpl, uniq, use } from "./build";
+import { isGroup, type BlockSpec, type BlockUse, type OrganismSpec, type RecordField, type Value, type ViewNode } from "./ir";
+
+export const blockKey = (b: BlockSpec): string => b.id.slice("block.".length);
+/** the topics of the catalog, in the order the gallery shows them */
+export const THEMES = ["marketing", "commerce", "promo", "content", "account", "dashboard", "onboarding", "support"] as const;
+/** blocks by topic, then by name */
+export const galleryOf = (blocks: BlockSpec[]): BlockSpec[] => [...blocks].sort((a, b) => THEMES.indexOf(a.theme as (typeof THEMES)[number]) - THEMES.indexOf(b.theme as (typeof THEMES)[number]) || a.id.localeCompare(b.id));
+
+/** the variant of a use: the named one, or the first */
+export function variantOf(b: BlockSpec, id?: string): BlockSpec["variants"][number] | undefined {
+  return id === undefined ? b.variants[0] : b.variants.find((v) => v.id === id);
+}
+
+/** props in layers, later wins; a grouped prop merges field by field (`actions: { cta }` over `actions: { cta, href }` keeps href) */
+export function mergeProps(...layers: Array<Record<string, Value> | undefined>): Record<string, Value> {
+  const out: Record<string, Value> = {};
+  for (const layer of layers) for (const [k, v] of Object.entries(layer ?? {})) {
+    const have = out[k];
+    out[k] = isGroup(have) && isGroup(v) ? mergeProps(have, v) : v;
+  }
+  return out;
+}
+
+/** axis values as props: `media.kind: "code"` is the field kind of the grouped prop media */
+export function axisProps(set: Record<string, string>): Record<string, Value> {
+  const out: Record<string, Value> = {};
+  for (const [k, v] of Object.entries(set)) {
+    const [group, field] = k.split(".");
+    if (field === undefined) out[k] = v;
+    else out[group!] = { ...((out[group!] as Record<string, Value> | undefined) ?? {}), [field]: v };
+  }
+  return out;
+}
+
+/** the type and default of an axis: a union prop of the organism, or a union field of a grouped prop (`media.kind`) */
+export function axisField(org: OrganismSpec, axis: string, organisms: Record<string, OrganismSpec>): { ts: string; default?: string | number | boolean } | null {
+  const [name, field] = axis.split(".");
+  const prop = org.props.find((p) => p.name === name);
+  if (!prop || typeof prop.type !== "object") return null;
+  if (field === undefined) return "ts" in prop.type ? { ts: prop.type.ts, ...(prop.default !== undefined ? { default: prop.default } : {}) } : null;
+  const record = "record" in prop.type ? prop.type.record : prop.type.ts;
+  const f = recordOf(record, org, organisms)?.find((x) => x.name === field);
+  return f ? { ts: f.type, ...(f.default !== undefined ? { default: f.default } : {}) } : null;
+}
+
+/** the fields of a record an organism declares or imports */
+export function recordOf(name: string, org: OrganismSpec, organisms: Record<string, OrganismSpec>): RecordField[] | undefined {
+  if (org.records[name]) return org.records[name];
+  const from = org.typeImports?.find((t) => t.names.includes(name))?.from;
+  return from && organisms[from] ? recordOf(name, organisms[from]!, organisms) : undefined;
+}
+
+/** the organism a variant draws: the block's, or `alt.organism` when the variant sets the alt axis to its second value */
+export function drawnBy(b: BlockSpec, variant: BlockSpec["variants"][number]): string {
+  return b.alt && (variant.set[b.alt.axis] ?? b.defaults[b.alt.axis]) === b.alt.values[1] ? b.alt.organism : b.organism;
+}
+
+/** the props of a block use: sample < axis defaults < variant axes < variant props < the use; axes are string literals */
+export function blockProps(b: BlockSpec, variant: BlockSpec["variants"][number], extra: Record<string, Value> = {}, org?: OrganismSpec): Record<string, Value> {
+  const all = mergeProps(b.sample.props, axisProps({ ...b.defaults, ...variant.set }), variant.props, extra);
+  if (!b.alt) return all;
+  // a block that draws two organisms hands each one only the props it has
+  delete all[b.alt.axis];
+  return org ? Object.fromEntries(Object.entries(all).filter(([k]) => org.props.some((p) => p.name === k))) : all;
+}
+
+export function blockNode(b: BlockSpec, variant: BlockSpec["variants"][number], extra: Record<string, Value> = {}, organisms: Record<string, OrganismSpec> = {}): ViewNode {
+  const on = Object.fromEntries(Object.entries(b.events ?? {}).map(([ev, action]) => [ev, call(`actions.${action}`)]));
+  const name = drawnBy(b, variant);
+  return organism(name, blockProps(b, variant, extra, organisms[name]), Object.keys(on).length ? { on } : {});
+}
+
+/** the dictionary key of a catalog id: `marketing-hero` is `marketingHero` */
+export const dictKey = (id: string): string => id.replace(/-([a-z0-9])/g, (_m, c: string) => c.toUpperCase());
+export const TEXT = (key: string): Value => ref(`ui.${key}`);
+
+/** `repeated`: the page uses this block more than once, so its landmarks are named after the block and the variant */
+export function expandUse(u: BlockUse, blocks: BlockSpec[], org: Record<string, OrganismSpec>, where: string, autoId: string, problems: string[], repeated = false): { nodes: ViewNode[]; h1: boolean } {
+  const b = blocks.find((x) => blockKey(x) === u.block);
+  if (!b) { problems.push(`${where}: no block ${u.block}`); return { nodes: [], h1: false }; }
+  const variant = variantOf(b, u.variant);
+  if (!variant) { problems.push(`${where}: block ${u.block} has no variant ${u.variant}`); return { nodes: [], h1: false }; }
+  for (const axis of Object.keys(b.axes)) {
+    const [k, field] = axis.split(".");
+    const v = u.props?.[k!];
+    if (v !== undefined && (field === undefined || (isGroup(v) && field in v))) problems.push(`${where}: ${u.block}.${axis} is an axis; choose a variant instead`);
+  }
+  const o = org[drawnBy(b, variant)];
+  const extra: Record<string, Value> = { ...(u.props ?? {}) };
+  if (o?.props.some((p) => p.name === "id") && extra["id"] === undefined) extra["id"] = autoId;
+  if (repeated && o?.props.some((p) => p.name === "landmarkLabel") && extra["landmarkLabel"] === undefined) extra["landmarkLabel"] = landmarkName(blockKey(b), variant.id);
+  const levelProp = o?.props.find((p) => p.name === "level");
+  const level = extra["level"] ?? variant.props?.["level"] ?? levelProp?.default;
+  return { nodes: [blockNode(b, variant, extra, org)], h1: levelProp !== undefined && level === 1 };
+}
+
+
+/** the name of the landmarks of one variant of a block: "Hero, Centered" (blocks.landmark, from the dictionary) */
+const landmarkName = (key: string, variant: string): Value => uniq(tpl(TEXT("blocks.landmark"), TEXT(`blocks.names.${key}`), TEXT(`blocks.variants.${key}.${variant}`)));
+
+export type OrganismNode = Extract<ViewNode, { organism: string }>;
+
+/** the fields of a grouped prop that the variants on a block page share become one named value:
+ * `actions={{ ...HERO_ACTIONS, mode: "two" }}`, so the page shows only what each variant changes.
+ * A field is shared when every variant has it; the named value holds its most common value and a variant with another one sets it again.
+ * Axis fields (`actions.mode`) stay on each variant: they are what the variant is. */
+export function hoistShared(b: BlockSpec, nodes: OrganismNode[], consts: Record<string, Value>, prefix = blockKey(b)): void {
+  const props = new Set(nodes.flatMap((n) => Object.keys(n.props ?? {})));
+  for (const prop of props) {
+    const groups = nodes.map((n) => n.props?.[prop]).filter(isGroup);
+    if (groups.length < 2) continue;
+    const shared: Record<string, Value> = {};
+    for (const f of Object.keys(groups[0]!)) {
+      if (`${prop}.${f}` in b.axes || !groups.every((g) => f in g)) continue;
+      const counts = new Map<string, number>();
+      for (const g of groups) counts.set(JSON.stringify(g[f]), (counts.get(JSON.stringify(g[f])) ?? 0) + 1);
+      const [top, n] = [...counts].sort((x, y) => y[1] - x[1])[0]!;
+      if (n >= 2) shared[f] = JSON.parse(top) as Value;
+    }
+    if (Object.keys(shared).length < 3) continue;
+    const name = `${prefix}_${prop}`.replace(/-/g, "_").replace(/([a-z0-9])([A-Z])/g, "$1_$2").toUpperCase();
+    consts[name] = shared;
+    for (const n of nodes) {
+      const g = n.props?.[prop];
+      if (!isGroup(g)) continue;
+      const own = Object.fromEntries(Object.entries(g).filter(([f, v]) => !(f in shared) || JSON.stringify(v) !== JSON.stringify(shared[f])));
+      n.props![prop] = Object.keys(own).length ? { "...": ref(name), ...own } : ref(name);
+    }
+  }
+}
+
+/** one variant of a block on a page of the gallery or the catalog: a labelled section with the block drawn on the fixtures */
+export function variantSection(b: BlockSpec, v: BlockSpec["variants"][number], org: Record<string, OrganismSpec>, drawn: OrganismNode[], labelLevel: 2 | 3): ViewNode {
+  const key = blockKey(b);
+  const o = org[drawnBy(b, v)];
+  const extra: Record<string, Value> = {};
+  if (o?.props.some((p) => p.name === "id")) extra["id"] = `${key}-${v.id}`;
+  if (o?.props.some((p) => p.name === "level")) extra["level"] = 2;
+  // the same block in several variants on one page: its landmarks are named after the block and the variant ("Hero, Centered")
+  if (o?.props.some((p) => p.name === "landmarkLabel")) extra["landmarkLabel"] = landmarkName(key, v.id);
+  const node = blockNode(b, v, extra, org) as OrganismNode;
+  drawn.push(node);
+  // a labelled group inside the page section, not a landmark of its own: the page file holds one Block (rule 01)
+  return use("Stack", { props: { Gap: "4", Align: "stretch" }, attrs: { role: "group", "aria-labelledby": `${key}-${v.id}-label`, "data-testid": "variant", "data-block": key, "data-variant": v.id } },
+    use("Title", { props: { As: labelLevel, Size: "base", Weight: "bold" }, attrs: { id: `${key}-${v.id}-label`, "data-testid": "variant-label" } }, text(TEXT(`blocks.variants.${key}.${v.id}`))),
+    use("Box", { props: { Class: "overflow-clip rounded-xl inset-ring inset-ring-border" }, attrs: { "data-testid": "variant-body" } }, b.fit === "card" ? use("Box", { props: { Class: "mx-auto w-full max-w-sm px-4 py-6" }, attrs: { "data-slot": "container" } }, node) : node));
+}
+
+/** a page of a screen (an area): its one Block, a section named by the level 1 heading of the page (given the id `page-title`),
+ *  then the container; the screen's main holds it */
+export function pageSection(container: ViewNode): ViewNode {
+  const h1 = (n: ViewNode): boolean => {
+    if ("use" in n && n.use === "Title" && n.props?.["As"] === 1) { n.attrs = { id: PAGE_TITLE, ...(n.attrs ?? {}) }; return true; }
+    return "children" in n && Array.isArray(n.children) ? n.children.some(h1) : false;
+  };
+  if (!h1(container)) throw new Error("pageSection: the page has no level 1 heading to name its section");
+  return use("Block", { props: { Tag: "section" }, attrs: { "aria-labelledby": PAGE_TITLE, "data-testid": "page" } }, container);
+}
+const PAGE_TITLE = "page-title";
+
+/** a labelled group of a page (a topic, a category, a row of tiles): a Stack with role group, never a nested Block (rule 01) */
+export const labelledGroup = (gap: "4" | "6", labelledBy: Value, attrs: Record<string, Value>, ...children: ViewNode[]): ViewNode =>
+  use("Stack", { props: { Gap: gap, Align: "stretch" }, attrs: { role: "group", "aria-labelledby": labelledBy, ...attrs } }, ...children);
+
+/** the skip link, first in the header of a screen frame (the header part opens on its Block, rule 01) */
+export const skipLink = (cls: string): ViewNode =>
+  use("LinkPlain", { props: { Href: "#main-content", Class: cls }, attrs: { "data-testid": "skip-link" } }, text(TEXT("site.header.skip")));
diff --git a/xgen/screens/src/compose-skins.ts b/xgen/screens/src/compose-skins.ts
new file mode 100644
index 0000000..d6c4fad
--- /dev/null
+++ b/xgen/screens/src/compose-skins.ts
@@ -0,0 +1,94 @@
+// The Skins screen (/skins/): three rows of tiles that change the look of the whole preview.
+//   Skins:  the default theme and the tweakcn skins; each tile is drawn in its own skin (data-skin on the tile).
+//   Fonts:  Google fonts with Latin and Cyrillic letters, put over the font of the skin.
+//   Radius: corner radii, put over the radius of the skin.
+// The tiles are static markup with data attributes. The preview runtime of the shared app package (runtime/skins.ts) wires the
+// clicks, keeps the choice in localStorage for every screen and reload, and marks the current tile with aria-pressed.
+import { call, each, op, ref, text, use } from "./build";
+import type { ScreenSpec, SkinsBoard, Value, ViewNode } from "./ir";
+import { dictKey, labelledGroup, pageSection, skipLink, TEXT } from "./compose-kit";
+import { wide } from "./authoring/components/frames";
+import { navBlockOf } from "./authoring/components/landmarks";
+
+/** a tile: a plain button with an edge; the pressed one (the current choice) gets a thicker edge in the primary colour */
+const TILE = "group flex w-full cursor-pointer flex-col gap-2 rounded text-start inset-ring inset-ring-border hover:bg-muted aria-pressed:inset-ring-2 aria-pressed:inset-ring-primary";
+
+/** the name of a tile and a check mark that shows only on the pressed tile */
+const tileName = (name: Value, pad: string): ViewNode =>
+  use("Inline", { props: { Class: `flex items-center justify-between gap-2 ${pad} text-sm font-medium` } },
+    use("Inline", {}, text(name)),
+    use("Inline", { props: { Class: "hidden text-primary group-aria-pressed:inline-flex" }, attrs: { "data-testid": "tile-check" } },
+      use("LucideIcon", { props: { Name: "check", Size: 16 } })));
+
+/** one colour of a skin: a small square */
+const swatch = (bg: string): ViewNode => use("Inline", { props: { Class: `size-6 rounded ${bg} inset-ring inset-ring-border` } });
+
+/** a skin tile: its colours, a small card with a button, all drawn in the skin of the tile, then its name */
+const skinTile = use("ListItem", { props: { Class: "flex" } },
+  use("ButtonPlain", { props: { Type: "button", Class: `${TILE} p-2` }, attrs: { "aria-pressed": false, "data-skin-pick": ref("s.id"), "data-testid": "skin-tile" } },
+    use("Inline", { props: { Class: "flex flex-col gap-4 rounded p-4 inset-ring inset-ring-border" }, attrs: { "data-skin": ref("s.id"), "data-testid": "skin-preview" } },
+      use("Inline", { props: { Class: "flex flex-wrap gap-2" } }, swatch("bg-primary"), swatch("bg-secondary"), swatch("bg-accent"), swatch("bg-muted"), swatch("bg-foreground")),
+      use("Inline", { props: { Class: "flex flex-col gap-2 rounded bg-card p-4 text-card-foreground inset-ring inset-ring-border" } },
+        use("Inline", { props: { Class: "text-sm font-semibold" } }, text(TEXT("skins.sample.card"))),
+        use("Inline", { props: { Class: "text-xs text-muted-foreground" } }, text(TEXT("skins.sample.text"))),
+        use("Inline", { props: { Class: "inline-flex h-8 w-fit items-center rounded bg-primary px-4 text-sm font-medium text-primary-foreground" } }, text(TEXT("skins.sample.button"))))),
+    tileName(ref("s.name"), "px-2 pb-2")));
+
+/** a font tile: Latin and Cyrillic letters and a pangram; the runtime draws the tile in its font (data-font-family) */
+const fontTile = use("ListItem", { props: { Class: "flex" } },
+  use("ButtonPlain", { props: { Type: "button", Class: `${TILE} p-4` }, attrs: { "aria-pressed": false, "data-font-pick": ref("f.id"), "data-font-family": ref("f.family"), "data-testid": "font-tile" } },
+    use("Inline", { props: { Class: "text-3xl" } }, text(TEXT("skins.fonts.specimen"))),
+    use("Inline", { props: { Class: "text-sm text-muted-foreground" } }, text(TEXT("skins.fonts.pangram"))),
+    tileName(ref("f.name"), "")));
+
+/** a radius tile: a box with that radius (the runtime sets --radius on the box from data-radius) */
+const radiusTile = use("ListItem", { props: { Class: "flex" } },
+  use("ButtonPlain", { props: { Type: "button", Class: `${TILE} p-4` }, attrs: { "aria-pressed": false, "data-radius-pick": ref("r.id"), "data-radius": ref("r.value"), "data-testid": "radius-tile" } },
+    use("Inline", { props: { Class: "block h-16 w-full rounded bg-primary" }, attrs: { "data-radius-sample": "" } }),
+    tileName(ref("r.name"), "")));
+
+/** one row of tiles: a heading with a note and a button back to the skin's own choice, then the grid */
+const row = (id: "skins" | "fonts" | "radius", grid: string, body: ViewNode): ViewNode =>
+  labelledGroup("4", `skins-${id}-title`, { "data-testid": "skins-row", "data-row": id },
+    use("Box", { props: { Class: "flex flex-wrap items-end justify-between gap-4" } },
+      use("Stack", { props: { Gap: "2", Align: "stretch" } },
+        use("Title", { props: { As: 2, Size: "2xl", Weight: "bold" }, attrs: { id: `skins-${id}-title` } }, text(TEXT(`skins.${id}.title`))),
+        use("Text", { props: { Size: "sm", Class: "max-w-2xl text-muted-foreground" } }, text(TEXT(`skins.${id}.text`)))),
+      use("Button", { props: { Variant: "outline", Size: "sm" }, attrs: { "data-look-reset": id === "skins" ? "skin" : id === "fonts" ? "font" : "radius", "data-testid": `reset-${id}` } }, text(TEXT(`skins.${id}.reset`)))),
+    use("List", { props: { Tag: "ul", Class: `grid gap-4 ${grid}` }, attrs: { "data-testid": `${id}-list` } }, body));
+
+export function skinsBoard(board: SkinsBoard, problems: string[], where: string): { areas: Record<string, ViewNode[]>; routes: ScreenSpec["routes"]; consts: Record<string, Value> } {
+  if (board.skins[0] !== "default") problems.push(`${where}: the first skin tile is "default"`);
+  const consts: Record<string, Value> = {
+    SKINS: op("list", ...board.skins.map((id) => ({ id, name: TEXT(`skins.skins.names.${dictKey(id)}`) }))),
+    FONTS: op("list", ...board.fonts.map((f) => ({ id: f.id, family: f.family, name: TEXT(`skins.fonts.names.${dictKey(f.id)}`) }))),
+    RADII: op("list", ...board.radii.map((r) => ({ id: r.id, value: r.value, name: TEXT(`skins.radius.names.${dictKey(r.id)}`) }))),
+  };
+  const index = pageSection(use("Container", { props: { Class: `${wide} py-10` } },
+    use("Stack", { props: { Gap: "8", Align: "stretch" } },
+      use("Stack", { props: { Gap: "2", Align: "stretch" } },
+        use("Title", { props: { As: 1, Size: "4xl", Weight: "bold" }, attrs: { "data-testid": "skins-title" } }, text(TEXT("skins.title"))),
+        use("Text", { props: { Class: "max-w-2xl text-muted-foreground" } }, text(TEXT("skins.intro")))),
+      row("skins", "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", each(ref("SKINS"), "s", ref("s.id"), skinTile)),
+      row("fonts", "sm:grid-cols-2 lg:grid-cols-5", each(ref("FONTS"), "f", ref("f.id"), fontTile)),
+      row("radius", "grid-cols-2 sm:grid-cols-5", each(ref("RADII"), "r", ref("r.id"), radiusTile)))));
+  const notfound = pageSection(use("Container", { props: { Class: `${wide} py-10` } },
+    use("Stack", { props: { Gap: "4", Align: "stretch" } },
+      use("Title", { props: { As: 1, Size: "4xl", Weight: "bold" } }, text(TEXT("site.notFound.title"))),
+      use("Group", {}, use("Button", { props: { Variant: "default", Size: "default", Href: "#/" } }, text(TEXT("skins.back")))))));
+  return { areas: { index: [index], notfound: [notfound] }, routes: [{ path: "", area: "index" }], consts };
+}
+
+/** the header part of the Skins screen: the skip link, the brand, links to the catalog and the block gallery, and the theme button */
+export function skinsChrome(): ViewNode[] {
+  const link = (href: string, key: string, testid: string): ViewNode => use("Link", { props: { Href: href, Variant: "default", Class: "text-sm font-medium" }, attrs: { "data-testid": testid } }, text(TEXT(key)));
+  return [
+    use("Block", { props: { Tag: "header", Class: "border-b border-border" } },
+      skipLink("sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:shadow"),
+      use("Container", { props: { Class: `${wide} flex flex-wrap items-center justify-between gap-4 py-3` } },
+        use("Link", { props: { Href: "#/", Variant: "default", Class: "text-lg font-bold" }, attrs: { "data-testid": "brand" } }, text(TEXT("skins.title"))),
+        navBlockOf(TEXT("skins.navLabel"), "flex flex-wrap items-center gap-4", undefined,
+          link("/catalog/", "catalog.title", "catalog-link"), link("/blocks/", "blocks.title", "gallery-link"),
+          use("Button", { props: { Variant: "outline", Size: "sm" }, on: { click: call("actions.toggleTheme") }, attrs: { "data-testid": "theme-toggle" } }, text(TEXT("theme.toggle")))))),
+  ];
+}
diff --git a/xgen/screens/src/compose.ts b/xgen/screens/src/compose.ts
new file mode 100644
index 0000000..55854da
--- /dev/null
+++ b/xgen/screens/src/compose.ts
@@ -0,0 +1,151 @@
+// Composed screens: a page that is a list of block uses. The expansion turns it into an ordinary page screen
+// (organism nodes with the axes of the variant as literal props), so the emitters, the validators and the drift check see one thing.
+import { call, each, op, ref, text, use, outlet, part } from "./build";
+import { type BlockSpec, type BlockUse, type ComposedSpec, type OrganismSpec, type ScreenSpec, type Value, type ViewNode } from "./ir";
+import { blockKey, blockNode, drawnBy, expandUse, galleryOf, hoistShared, labelledGroup, pageSection, skipLink, TEXT, THEMES, variantSection, type OrganismNode } from "./compose-kit";
+export * from "./compose-kit";
+
+function sourcesOfBlocks(used: BlockSpec[], problems: string[], where: string): NonNullable<ScreenSpec["sources"]> {
+  const out: NonNullable<ScreenSpec["sources"]> = [];
+  for (const b of used) for (const d of b.data) {
+    const have = out.find((x) => x.as === d.as);
+    if (!have) out.push({ as: d.as, collection: d.collection, kind: d.kind, record: d.record, fields: d.fields });
+    else if (JSON.stringify(have) !== JSON.stringify({ as: d.as, collection: d.collection, kind: d.kind, record: d.record, fields: d.fields })) problems.push(`${where}: blocks read ${d.as} in different ways`);
+  }
+  return out;
+}
+
+import { wide } from "./authoring/components/frames";
+import { catalog, catalogChrome } from "./compose-catalog";
+import { skinsBoard, skinsChrome } from "./compose-skins";
+
+/** the catalog as a page set: an index of blocks and one area per block with every variant on the fixtures */
+function gallery(c: ComposedSpec, blocks: BlockSpec[], org: Record<string, OrganismSpec>): { areas: Record<string, ViewNode[]>; routes: ScreenSpec["routes"]; consts: Record<string, Value> } {
+  const list = galleryOf(blocks);
+  const routes: ScreenSpec["routes"] = [{ path: "", area: "index" }, ...list.map((b) => ({ path: blockKey(b), area: blockKey(b) }))];
+  const themes = THEMES.filter((t) => list.some((b) => b.theme === t));
+  // the index reads one list: the topics in order, each with its blocks
+  const topics = op("list", ...themes.map((t) => ({
+    id: t, titleId: `theme-${t}-title`, title: TEXT(`blocks.themes.${t}.title`), text: TEXT(`blocks.themes.${t}.text`),
+    blocks: op("list", ...list.filter((b) => b.theme === t).map((b) => ({
+      key: blockKey(b), href: `#/${blockKey(b)}`, name: TEXT(`blocks.names.${blockKey(b)}`), docs: TEXT(`blocks.docs.${blockKey(b)}`),
+    }))),
+  })));
+  const index: ViewNode[] = [pageSection(
+    use("Container", { props: { Class: `${wide} py-10` } },
+      use("Stack", { props: { Gap: "8", Align: "stretch" } },
+        use("Stack", { props: { Gap: "4", Align: "stretch" } },
+          use("Title", { props: { As: 1, Size: "4xl", Weight: "bold" }, attrs: { "data-testid": "gallery-title" } }, text(TEXT("blocks.title"))),
+          use("Text", { props: { Class: "max-w-2xl text-muted-foreground" } }, text(TEXT("blocks.intro")))),
+        each(ref("TOPICS"), "topic", ref("topic.id"),
+          labelledGroup("4", ref("topic.titleId"), { "data-testid": "theme-section", "data-theme-id": ref("topic.id") },
+            use("Stack", { props: { Gap: "2", Align: "stretch" } },
+              use("Title", { props: { As: 2, Size: "2xl", Weight: "bold" }, attrs: { id: ref("topic.titleId") } }, text(ref("topic.title"))),
+              use("Text", { props: { Size: "sm", Class: "max-w-2xl text-muted-foreground" } }, text(ref("topic.text")))),
+            use("List", { props: { Tag: "ul", Class: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3" }, attrs: { "data-testid": "block-list" } },
+              each(ref("topic.blocks"), "block", ref("block.key"),
+                use("ListItem", { props: { Class: "flex flex-col gap-1 rounded-xl p-4 inset-ring inset-ring-border" } },
+                  use("Link", { props: { Href: ref("block.href"), Variant: "default", Class: "font-bold" }, attrs: { "data-testid": "block-link", "data-block": ref("block.key"), "data-theme-id": ref("topic.id") } }, text(ref("block.name"))),
+                  use("Text", { props: { Size: "sm", Class: "text-muted-foreground" } }, text(ref("block.docs")))))))))),
+  )];
+  const areas: Record<string, ViewNode[]> = { index };
+  const consts: Record<string, Value> = { TOPICS: topics };
+  for (const b of list) {
+    const key = blockKey(b);
+    const drawn: OrganismNode[] = [];
+    areas[key] = [pageSection(
+      use("Container", { props: { Class: `${wide} py-10` } },
+        use("Stack", { props: { Gap: "8", Align: "stretch" } },
+          use("Group", {}, use("Link", { props: { Href: "#/", Variant: "default" }, attrs: { "data-testid": "back" } }, text(TEXT("blocks.back")))),
+          use("Stack", { props: { Gap: "2", Align: "stretch" } },
+            use("Text", { props: { Size: "sm", Class: "font-medium text-muted-foreground" }, attrs: { "data-testid": "block-theme", "data-theme-id": b.theme } }, text(TEXT(`blocks.themes.${b.theme}.title`))),
+            use("Title", { props: { As: 1, Size: "4xl", Weight: "bold" }, attrs: { "data-testid": "block-title" } }, text(TEXT(`blocks.names.${key}`))),
+            use("Text", { props: { Class: "max-w-2xl text-muted-foreground" } }, text(TEXT(`blocks.docs.${key}`)))),
+          ...b.variants.map((v) => variantSection(b, v, org, drawn, 2)))),
+    )];
+    hoistShared(b, drawn, consts);
+  }
+  areas["notfound"] = [pageSection(
+    use("Container", { props: { Class: `${wide} py-10` } },
+      use("Stack", { props: { Gap: "4", Align: "stretch" } },
+        use("Title", { props: { As: 1, Size: "4xl", Weight: "bold" } }, text(TEXT("site.notFound.title"))),
+        use("Group", {}, use("Button", { props: { Variant: "default", Size: "default", Href: "#/" } }, text(TEXT("blocks.back")))))),
+  )];
+  void c;
+  return { areas, routes, consts };
+}
+
+export function expandComposed(c: ComposedSpec, blocks: BlockSpec[], organisms: Record<string, OrganismSpec>): { screen: ScreenSpec; problems: string[] } {
+  const problems: string[] = [];
+  const where = c.name;
+  let areas: Record<string, ViewNode[]> = {};
+  let routes = c.routes;
+  let before: ViewNode[] = [], after: ViewNode[] = [];
+  let chrome: ViewNode[] | null = null;
+  let consts: Record<string, Value> | undefined;
+  const used = new Set<BlockSpec>();
+  const remember = (us: BlockUse[]): void => { for (const u of us) { const b = blocks.find((x) => blockKey(x) === u.block); if (b) used.add(b); } };
+  if (c.skins) {
+    if (c.routes.length || Object.keys(c.areas).length) problems.push(`${where}: the Skins screen builds its own routes and areas`);
+    const g = skinsBoard(c.skins, problems, where);
+    areas = g.areas; routes = g.routes; consts = g.consts;
+    chrome = skinsChrome();
+  } else if (c.catalog) {
+    if (c.routes.length || Object.keys(c.areas).length) problems.push(`${where}: a catalog builds its own routes and areas`);
+    const g = catalog(c.catalog, blocks, organisms, problems, where);
+    areas = g.areas; routes = g.routes; consts = g.consts; g.used.forEach((b) => used.add(b));
+    chrome = catalogChrome();
+  } else if (c.gallery) {
+    if (c.routes.length || Object.keys(c.areas).length) problems.push(`${where}: a gallery builds its own routes and areas`);
+    const g = gallery(c, blocks, organisms);
+    areas = g.areas; routes = g.routes; consts = g.consts; blocks.forEach((b) => used.add(b));
+    chrome = [
+      use("Block", { props: { Tag: "header", Class: "border-b border-border" } },
+        skipLink("sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:shadow"),
+        use("Container", { props: { Class: `${wide} flex flex-wrap items-center justify-between gap-4 py-3` } },
+          use("Link", { props: { Href: "#/", Variant: "default", Class: "text-lg font-bold" }, attrs: { "data-testid": "brand" } }, text(TEXT("blocks.title"))),
+          use("Group", { props: { Gap: "4", Align: "center", Class: "flex-wrap" } },
+            use("Link", { props: { Href: "/catalog/", Variant: "default", Class: "text-sm font-medium" }, attrs: { "data-testid": "catalog-link" } }, text(TEXT("catalog.title"))),
+            use("Link", { props: { Href: "/skins/", Variant: "default", Class: "text-sm font-medium" }, attrs: { "data-testid": "skins-link" } }, text(TEXT("skins.title"))),
+            use("Link", { props: { Href: "/discovery/", Variant: "default", Class: "text-sm font-medium" }, attrs: { "data-testid": "discovery-link" } }, text(TEXT("discovery.title"))),
+            use("Button", { props: { Variant: "outline", Size: "sm" }, on: { click: call("actions.toggleTheme") }, attrs: { "data-testid": "theme-toggle" } }, text(TEXT("theme.toggle")))))),
+    ];
+  } else {
+    remember(c.frame.before); remember(c.frame.after);
+    // landmark names stay unique on a page: a block used twice is named after its variant, and in an area every block after the
+    // first (the lead with the h1) is too on screens that ask for it (nameLandmarks), since different blocks may share a heading (cart, summary) or a nav name with the frame
+    const run = (us: BlockUse[], at: string, prefix: string, area = false): { nodes: ViewNode[]; h1: number } => {
+      const out = us.map((u, i) => expandUse(u, blocks, organisms, `${where}.${at}[${i}]`, `${prefix}-${u.block}${us.filter((x) => x.block === u.block).length > 1 ? `-${i}` : ""}`, problems, us.filter((x) => x.block === u.block).length > 1 || (area && i > 0)));
+      return { nodes: out.flatMap((x) => x.nodes), h1: out.filter((x) => x.h1).length };
+    };
+    const fb = run(c.frame.before, "frame.before", "before"), fa = run(c.frame.after, "frame.after", "after");
+    before = fb.nodes; after = fa.nodes;
+    if (fb.h1 + fa.h1) problems.push(`${where}: the frame holds a level 1 heading; a page has one h1 and it belongs to the area`);
+    for (const [area, uses] of Object.entries(c.areas)) {
+      remember(uses);
+      const r = run(uses, area, area, c.nameLandmarks === true);
+      areas[area] = r.nodes;
+      if (c.requireH1 && r.h1 !== 1) problems.push(`${where}.${area}: the page needs exactly one level 1 heading (found ${r.h1})`);
+    }
+    for (const r of c.routes) if (!(r.area in c.areas)) problems.push(`${where}: route ${r.path} points to the missing area ${r.area}`);
+  }
+  const main = use("Block", { props: { Tag: "main", ID: "main-content" }, attrs: { tabindex: -1, "data-testid": "main" } }, outlet());
+  // a frame chrome (the header of the gallery, the catalog, the Skins screen) is a part: its own file opening on its Block, so the
+  // screen file opens on that part and holds one Block, the main (rule 01)
+  const parts: Record<string, ViewNode[]> | undefined = chrome ? { ScreenHeader: chrome } : undefined;
+  const layout = chrome ? [part("ScreenHeader"), main] : [...before, main, ...after];
+  const orgNames = new Set<string>();
+  const scan = (n: unknown): void => { if (Array.isArray(n)) n.forEach(scan); else if (n && typeof n === "object") { const o = n as Record<string, unknown>; if (typeof o["organism"] === "string") orgNames.add(o["organism"]); Object.values(o).forEach(scan); } };
+  scan(layout); scan(parts ?? {}); scan(areas);
+  // a source is read only when a node refers to it: a block whose data the use replaced (the menu of a theme app) does not pull its fixture in
+  const roots = new Set([...JSON.stringify([layout, parts ?? {}, areas, consts ?? {}]).matchAll(/"\$":"([A-Za-z0-9_]+)/g)].map((m) => m[1]!));
+  const sources = sourcesOfBlocks([...used], problems, where).filter((x) => roots.has(x.as));
+  const screen: ScreenSpec = {
+    specVersion: 1, id: c.id, name: c.name, docs: c.docs, kind: "page", sources,
+    routes, ...(c.nav ? { nav: true } : {}), ...(c.menu ? { menu: c.menu } : {}), organisms: [...orgNames].sort(), layout, ...(parts ? { parts } : {}), areas,
+    ...(c.gallery || c.catalog || c.skins || c.chunks ? { chunks: true } : {}), ...(consts ? { consts } : {}), portable: c.portable,
+  };
+  return { screen, problems };
+}
+
+
diff --git a/xgen/screens/src/index.ts b/xgen/screens/src/index.ts
new file mode 100644
index 0000000..85fb9cc
--- /dev/null
+++ b/xgen/screens/src/index.ts
@@ -0,0 +1,15 @@
+export * from "./ir";
+export * from "./build";
+export * from "./print";
+export * from "./validate-view";
+export * from "./load";
+export * from "./compose";
+export * from "./authoring/blocks/pricing-card";
+export * from "./authoring/screens/plans-screen";
+export * from "./authoring/blocks/site";
+export { writeSpecs, authored, authoredDirs, stringify } from "./authored";
+export * from "./authoring/components/frames";
+export * from "./authoring/gallery/blocks";
+export * from "./authoring/gallery/block-kit";
+export * from "./authoring/screens/themes";
+export * from "./authoring/gallery/coverage";
diff --git a/xgen/screens/src/ir.ts b/xgen/screens/src/ir.ts
new file mode 100644
index 0000000..681da7d
--- /dev/null
+++ b/xgen/screens/src/ir.ts
@@ -0,0 +1,310 @@
+// The view IR: organisms and screens are trees of primitives (bricks), bound to data by small expressions.
+// Text never appears as a literal: it is a reference into the content dictionary or into the labels a component receives as a prop.
+
+/**
+ * a literal, a reference {"$":"plan.name"}, an operation {"op":"eq","args":[a,b]}, or a group of named values
+ * {"cta": {"$":"ui.home.cta"}, "href": "#/"} (a grouped prop: `actions={{ cta, href }}`; no key may be "$" or "op";
+ * the key "..." spreads a named value first: {"...": {"$":"HERO_ACTIONS"}, "mode": "two"} -> `{ ...HERO_ACTIONS, mode: "two" }`)
+ */
+export type Value = string | number | boolean | null | { $: string } | { op: string; args: Value[] } | ValueGroup;
+export interface ValueGroup { [key: string]: Value }
+
+export const isRef = (v: Value | undefined): v is { $: string } => typeof v === "object" && v !== null && typeof (v as { $?: unknown }).$ === "string";
+export const isOp = (v: Value | undefined): v is { op: string; args: Value[] } => typeof v === "object" && v !== null && typeof (v as { op?: unknown }).op === "string" && Array.isArray((v as { args?: unknown }).args);
+/** a group of named values (a grouped prop) */
+export const isGroup = (v: Value | undefined): v is ValueGroup => typeof v === "object" && v !== null && !isRef(v) && !isOp(v);
+
+export type Handler = { call: string; args?: Value[] };
+
+/** what an organism use puts in a slot: nodes (with the slot arguments in scope), or `forward`: a slot of the enclosing organism passed on as it is */
+export type SlotFill = { args: string[]; do: ViewNode[]; forward?: string };
+export type ViewNode =
+  /** a primitive: `use` is a part name (Card, Button, TableCell …); `props` are its spec props by canonical name, `attrs` are free DOM attributes */
+  | { use: string; props?: Record<string, Value>; attrs?: Record<string, Value>; on?: Record<string, Handler>; children?: ViewNode[] }
+  | { text: Value }
+  | { when: Value; then: ViewNode[]; else?: ViewNode[] }
+  | { each: Value; as: string; key: Value; do: ViewNode[]; /** name of the loop index, readable inside the body */ index?: string }
+  /** renders a slot the component receives (render prop with arguments) */
+  | { slot: string; args?: Value[] }
+  /** an organism of xgen/specs/organisms; `slots` fill its render-prop slots */
+  | { organism: string; props?: Record<string, Value>; on?: Record<string, Handler>; slots?: Record<string, SlotFill> }
+  /** where the routed area of a screen goes */
+  | { outlet: true }
+  /** a part of a screen layout (`ScreenSpec.parts`), emitted as its own file next to the screen: one Block per file (rule 01) */
+  | { part: string };
+
+export const OPS: Record<string, number | "n"> = {
+  eq: 2, ne: 2, not: 1, and: "n", or: "n", gt: 2, lt: 2, ge: 2, le: 2, add: 2, sub: 2, mul: 2, div: 2, cond: 3, len: 1, at: 2, tpl: "n", money: 2, num: 1,
+  /** class merge: cn(a, b, ...) */ cn: "n",
+  /** a value of a kit preset: preset("defaults", "hero.band") */ preset: 2,
+  max: "n", min: "n", round: 1, coalesce: "n",
+  /** String(x), undefined stays undefined */ str: 1,
+  /** x != null */ has: 1,
+  /** a text that does not wrap at its spaces (each space becomes U+00A0): phone numbers; nbsp("+1 555 0145") */ nbsp: 1,
+  /** a label of segments joined by ", " without a segment equal (case-insensitive) to the one before it: "Footer, Footer, Centered" -> "Footer, Centered" */ uniq: 1,
+  /** the words of a text: words("Build your next page") -> ["Build", "your", "next", "page"] */ words: 1,
+  /** the item at an index of a list, undefined past the end: nth(weights, i) -> weights?.[i] */ nth: 2,
+  /** the literal `undefined` (an attribute that is left out) */ undef: 0,
+  /** [0 .. n-1] */ range: 1,
+  /** class string of a recipe: recipe("iconTab", "state", value, "size", value, ...); the first argument names an entry of `recipes` */ recipe: "n",
+  /** largest `field` of the items, 0 for none: maxBy(items, "value") */ maxBy: 2,
+  /** sum of `a * b` over the items, 0 for none: sumBy(lines, "price", "qty") */ sumBy: 3,
+  /** a field of the first item: firstOf(lines, "currency") (guard with len) */ firstOf: 2,
+  /** the item whose `id` equals the value: pick(items, "plan-team") */ pick: 2,
+  /** how many items have a truthy field: count(items, "done") */ count: 2,
+  /** the items whose field equals the value: where(items, "category", value); an empty value keeps all */ where: 3,
+  /** the items whose text field contains the query, ignoring case; an empty query keeps all */ match: 3,
+  /** inline style: css("height", value, "px", ...) in triples */ css: "n",
+  /** page numbers to show (null = a gap): pageWindow(page, pages) */ pageWindow: 2,
+  /** a responsive column variant capped by the item count: fitCols("1-4", 3) -> "1-3" */ fitCols: 2,
+  /** a literal array: list(a, b, c) -> [a, b, c] */ list: "n",
+};
+
+export type FieldType = "string" | "number" | "boolean" | "string[]";
+/**
+ * a field of a record: a data field (FieldType), or in a grouped prop any TypeScript type written out
+ * (`"one" | "two"`, `NavLink[]`); `default` is the value a variant axis on the field starts from
+ */
+export interface RecordField { name: string; type: FieldType | (string & {}); optional?: boolean; default?: string | number | boolean; docs?: string }
+/** a field type, a record of the organism, or a TypeScript type written out (`"disc" | "tile"`; it must mean the same in both runtimes) */
+export type PropType = FieldType | { record: string } | { ts: string };
+
+export interface OrganismSpec {
+  $schema?: string;
+  specVersion: 1;
+  /** organism.pricing-card | part.pager | pattern.switcher; the prefix is the tier and the folder of the generated file */
+  id: string;
+  /** PricingCard */
+  name: string;
+  docs: string;
+  /** record types used by props, slots and events */
+  records: Record<string, RecordField[]>;
+  /** record types read from other organisms, by organism name */
+  typeImports?: Array<{ from: string; names: string[] }>;
+  props: Array<{ name: string; type: PropType; required?: boolean; docs?: string; /** a literal default of an optional prop */ default?: string | number | boolean }>;
+  /** `class` (Svelte) / `className` (React): a prop `className` merged into the root with `cn` */
+  className?: boolean;
+  /** the default slot: `children` in both runtimes */
+  children?: boolean;
+  /** recipes (CVA-style, xgen/specs/recipes/<file>.variants.json) the view reads with the `recipe` op: local name -> file name without the extension */
+  recipes?: Record<string, string>;
+  /** examples: a set of prop values the component is shown with; every value of every recipe key is in one */
+  examples?: Array<{ id: string; props: Record<string, string | number | boolean> }>;
+  /** constant tables (a tone -> its classes); read with `at(NAME, key)` */
+  consts?: Record<string, Record<string, string>>;
+  /** values computed from the props, in order; later ones read earlier ones */
+  derived?: Array<{ name: string; value: Value }>;
+  /** render-prop slots: Svelte snippets with arguments, React functions */
+  slots: Array<{ name: string; args: Array<{ name: string; type: PropType }>; docs?: string }>;
+  /** callbacks: `select` becomes onselect (Svelte) and onSelect (React) */
+  events: Array<{ name: string; args: Array<{ name: string; type: PropType }>; docs?: string }>;
+  view: ViewNode[];
+  /**
+   * a frame: a part whose whole job is the landmark of a region (the section frame of the blocks, the shell header, sidebar and
+   * footer). It opens on one Block with a landmark tag and is checked as a block file (the `blockRoot` zone, rule 01); any other
+   * part or pattern never opens on Block
+   */
+  frame?: true;
+  /** `vue` defaults to the Svelte flag (portableTo in xgen-spec) */
+  portable: { svelte: true | { portable: false; reason: string }; react: true | { portable: false; reason: string }; vue?: true | { portable: false; reason: string } };
+}
+
+/** a value of a preset: a class string, a number (a glyph size), a list of class strings, or a group of those */
+export type PresetValue = string | number | string[] | PresetGroup;
+export interface PresetGroup { [key: string]: PresetValue }
+/** a layout preset of a kit (specs/presets/<kit>.json): the frame geometry of the kit as named class strings, read with the `preset` op */
+export interface PresetSpec { $schema?: string; specVersion: 1; id: string; name: string; docs: string; source?: string; notes?: Record<string, string>; values: PresetGroup }
+/** the value at a dotted path of a preset, or undefined */
+export const presetAt = (p: PresetSpec, path: string): PresetValue | undefined =>
+  path.split(".").reduce<PresetValue | undefined>((v, k) => (v && typeof v === "object" && !Array.isArray(v) ? v[k] : undefined), p.values);
+/** file name of a preset: defaults -> defaults */
+export const presetFile = (name: string): string => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+/** a recipe file: base classes, variant tables by key, defaults, compound variants */
+export interface RecipeFile { id: string; base: string; keys: string[]; defaults: Record<string, string>; byKey: Record<string, Record<string, string>>; compound?: Array<Record<string, string>> }
+
+export type Tier = "organism" | "part" | "pattern";
+export const tierOf = (id: string): Tier => (id.split(".")[0] as Tier);
+/** folder of the generated file: organisms are blocks, parts and patterns are components (primitives are the bricks) */
+export const tierDir = (id: string): string => (tierOf(id) === "organism" ? "blocks" : "components");
+/** file name of a generated component: HeroSection -> hero-section (the export keeps the PascalCase name) */
+export const fileName = (name: string): string => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+/** path of the `.types.ts` file of another organism, from the folder of `org` */
+export const typesPath = (orgId: string, other: { id: string; name: string }): string =>
+  `${tierDir(orgId) === tierDir(other.id) ? "." : `../${tierDir(other.id)}`}/${fileName(other.name)}.types`;
+
+export interface ColumnSpec { id: string; label: string; type: "text" | "money" | "number" | "badge" | "boolean"; sortable?: boolean; align?: "start" | "end" }
+
+export interface SourceSpec { collection: string; kind: string; record: string; fields: Record<string, string> }
+
+export interface ScreenSpec {
+  $schema?: string;
+  specVersion: 1;
+  id: string;
+  name: string;
+  docs: string;
+  /** "collection" (default): a list with search, sort and a pager, and a record. "page": static pages read from several collections, no list state */
+  kind?: "collection" | "page";
+  /** Codex collection: a fixture file of entries of one kind; `fields` flatten an entry into the record the views read */
+  source?: SourceSpec;
+  /** page screens: several collections, each read as an array named `as` (its record type is exported by an organism) */
+  sources?: Array<SourceSpec & { as: string }>;
+  list?: { columns: ColumnSpec[]; searchFields: string[]; pageSize: number; defaultSort: string };
+  /** URL keys of the screen state */
+  state?: { q: string; sort: string; page: string };
+  routes: Array<{ path: string; area: string }>;
+  /** the screen reads `nav` (see ComposedSpec.nav); the menu comes from `menu` */
+  nav?: boolean;
+  /** the menu of the screen (the links of its navigation bar), in order; every path is one of `routes` */
+  menu?: MenuRoute[];
+  organisms: string[];
+  /** named pieces of the layout, each emitted as its own component file next to the screen (`BlocksScreen/ScreenHeader`) and placed
+   *  with a `{ part }` node: a second landmark of the frame (the header beside the main) lives in its own file, so every file of
+   *  the screen opens on one Block (rule 01). A part reads `ui`, the named values and `actions` only (not the route). */
+  parts?: Record<string, ViewNode[]>;
+  layout: ViewNode[];
+  areas: Record<string, ViewNode[]>;
+  /** page screens: every area is its own component file next to the screen (the gallery: one file per block page) */
+  chunks?: boolean;
+  /** page screens: named values the view reads (`TOPICS`), printed as `const TOPICS = ... as const` in the file that shows them; they read ui and the sources */
+  consts?: Record<string, Value>;
+  portable: OrganismSpec["portable"];
+}
+
+export interface AppSpec {
+  $schema?: string;
+  specVersion: 1;
+  /** package name of the host app */
+  name: string;
+  runtime: "svelte" | "react" | "vue" | "solid";
+  /** screen spec ids the host serves; `["*"]`: every screen portable to the runtime */
+  screens: string[];
+  title: string;
+  /** port of the dev server */
+  port: number;
+  locale: "en";
+  /** the theme a screen opens in */
+  theme: "light" | "dark" | "system";
+  /** extra paths the build must not overwrite (besides xgen.app.json): hand work in src/ when the host needs it */
+  hand?: string[];
+}
+
+/** one entry of the menu of a screen: `#/<path>` with the dictionary text `titleKey` as its label */
+export interface MenuRoute { id: string; path: string; titleKey: string; icon?: string }
+
+/** a Codex entry as the fixtures carry it */
+export interface CodexEntry {
+  id: string; kind: string; status: string; visibility: string;
+  slug: Record<string, string>; title: Record<string, string>;
+  metadata: Record<string, { value: string | number | boolean | string[] }>;
+  version: number; created_at: string; updated_at: string; published_at: string;
+}
+export interface CollectionFile { collection: string; kind: string; entries: CodexEntry[] }
+/** a Codex v0.4 taxonomy bundle (fixtures/taxonomies/<id>.json): the definition and its terms, which entries name in `terms` */
+export interface TaxonomyFile { definition: { id: string; locale: string; label: string; mode: string; assigned_to_kinds: string[] }; terms: { id: string; locale: string; taxonomy_id: string; name: string; slug: string }[] }
+export type Dictionary = { [key: string]: string | Dictionary };
+
+/** the collections a screen reads: one (`rows`) for a collection screen, the declared list for a page */
+export function sourcesOf(s: ScreenSpec): Array<SourceSpec & { as: string }> {
+  return s.kind === "page" ? (s.sources ?? []) : s.source ? [{ ...s.source, as: "rows" }] : [];
+}
+
+// ---- blocks and composed screens -----------------------------------------------------------------------------
+
+/** One use of a block on a page: the block, one of its variants and the props that differ from its sample (texts, links, data) */
+export interface BlockUse { block: string; variant?: string; props?: Record<string, Value> }
+
+/**
+ * A block is an organism plus the axes it varies on, named variants (rows of data: axis -> value) and the data it reads.
+ * It holds no markup: the organism draws it, the variant only sets props.
+ */
+export interface BlockFact {
+  /** CSS selector inside the variant */
+  sel: string;
+  /** how many elements: a number, `@collection` (entries of a fixture) or `@collection-N` */
+  n?: number | string;
+  /** how many distinct columns (left edges) the elements form at 1400 px */
+  cols?: number | string;
+  /** axis -> value or list of values; the fact holds for the variants whose row matches all */
+  when?: Record<string, string | string[]>;
+}
+
+export interface BlockSpec {
+  $schema?: string;
+  specVersion: 1;
+  /** block.hero: the part after the dot is the key of the block (route, dictionary, page use) */
+  id: string;
+  name: string;
+  docs: string;
+  /** the topic of the catalog: marketing, commerce, promo, content, account, dashboard, onboarding, support */
+  theme: string;
+  group: string;
+  /** section: the block is a full-width section; card: a single card, shown in a narrow centered frame */
+  fit?: "section" | "card";
+  /** name of the organism that draws it */
+  organism: string;
+  /** a second organism: the variants that set `axis` to values[1] draw it (values[0] is the default); the axis is not a prop */
+  alt?: { axis: string; values: [string, string]; organism: string };
+  /** axis (a prop of the organism) -> the values the block exposes */
+  axes: Record<string, string[]>;
+  /** the value of each axis when a variant does not set it */
+  defaults: Record<string, string>;
+  /** what the gallery e2e must find in a variant: a selector, how many (a number, or `@collection` / `@collection-1`) and the axes that switch the fact on */
+  facts?: BlockFact[];
+  variants: Array<{ id: string; set: Record<string, string>; /** case copy: dictionary references and data that differ from the sample (a SaaS hero, a shop hero) */ props?: Record<string, Value> }>;
+  /** patterns the organism is made of (checked against its view) */
+  slots: string[];
+  /** organism event -> screen action */
+  events?: Record<string, string>;
+  /** collections the props read: the screen gets one source per entry */
+  data: Array<SourceSpec & { as: string }>;
+  /** props a page gets for free: dictionary references and fixture data, used by the gallery and as the base of every use */
+  sample: { props: Record<string, Value> };
+}
+
+/** the catalog of a composed screen: sections of categories, each category a list of blocks (all their variants, or the named ones), and pages made of blocks */
+export interface CatalogTree {
+  sections: Array<{ id: string; categories: Array<{ id: string; entries: Array<{ block: string; variants?: string[] }> }> }>;
+  pages: Array<{ id: string; uses: BlockUse[] }>;
+}
+
+/** the board of the Skins screen: the skins (data-skin values, "default" first), Google fonts with Latin and Cyrillic, corner radii */
+export interface SkinsBoard {
+  skins: string[];
+  /** a font: an id and the Google Fonts family name */
+  fonts: Array<{ id: string; family: string }>;
+  /** a radius: an id and a CSS length */
+  radii: Array<{ id: string; value: string }>;
+}
+
+/** A screen that is a list of block uses. It expands to a page screen; `gallery` builds the areas from the catalog of blocks */
+export interface ComposedSpec {
+  $schema?: string;
+  specVersion: 1;
+  id: string;
+  name: string;
+  kind: "composed";
+  docs: string;
+  routes: Array<{ path: string; area: string }>;
+  /** blocks above and below the routed area (header, footer) */
+  frame: { before: BlockUse[]; after: BlockUse[] };
+  areas: Record<string, BlockUse[]>;
+  /** the routes and areas are the catalog of blocks: an index and one page per block with all its variants */
+  gallery?: boolean;
+  /** the routes and areas are the catalog: an index of sections and categories, one page per category with its blocks and variants, and full pages */
+  catalog?: CatalogTree;
+  /** the routes and areas are the Skins screen: rows of tiles that switch the skin, the font and the radius of the preview */
+  skins?: SkinsBoard;
+  /** every area is its own page file next to the screen (`ThemeMarketingLandingScreen/HomePage`); the screen keeps the routes and the frame */
+  chunks?: boolean;
+  /** every area must hold exactly one level 1 heading (an h1 per page) */
+  requireH1?: boolean;
+  /** every block of an area after the lead is named after its block and variant (`landmarkLabel`): different blocks of one page
+   *  may share a heading or a nav name (the theme pages) and landmark names must stay unique */
+  nameLandmarks?: boolean;
+  /** the frame reads the menu: `nav.links` (from `menu`) and `nav.current` (the id of the current route) */
+  nav?: boolean;
+  /** the menu of the screen, in order; required when `nav` is set */
+  menu?: MenuRoute[];
+  portable: OrganismSpec["portable"];
+}
diff --git a/xgen/screens/src/load.ts b/xgen/screens/src/load.ts
new file mode 100644
index 0000000..f557a61
--- /dev/null
+++ b/xgen/screens/src/load.ts
@@ -0,0 +1,86 @@
+// Loads the hand-written inputs of an xgen root and validates them against the JSON Schemas:
+//   specs/organisms|parts|patterns/*.json, specs/presets/*.json, specs/screens/*.json, fixtures/*.json, content/ui/en.json and apps/<app>/xgen.app.json.
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { validate, xgenPaths } from "@ui8kit/xgen-schema";
+import { expandComposed } from "./compose";
+import type { AppSpec, BlockSpec, CollectionFile, TaxonomyFile, ComposedSpec, Dictionary, OrganismSpec, PresetSpec, RecipeFile, ScreenSpec } from "./ir";
+
+export const readJson = <T = unknown>(p: string): T => JSON.parse(readFileSync(p, "utf8")) as T;
+
+export interface Loaded<T> { file: string; value: T }
+export interface Inputs {
+  root: string;
+  organisms: Loaded<OrganismSpec>[];
+  /** specs/recipes/*.variants.json, by file name without the extension */
+  recipes: Array<Loaded<RecipeFile> & { name: string }>;
+  /** specs/presets/*.json: the layout presets of the kits */
+  presets: Loaded<PresetSpec>[];
+  /** page and collection screens; a composed screen is here already expanded to a page screen */
+  screens: Array<Loaded<ScreenSpec> & { composed?: ComposedSpec }>;
+  blocks: Loaded<BlockSpec>[];
+  collections: Loaded<CollectionFile>[];
+  /** fixtures/taxonomies/*.json: the taxonomy bundles (checked against the contract by codex:validate) */
+  taxonomies: Loaded<TaxonomyFile>[];
+  dictionary: Loaded<Dictionary>;
+  problems: string[];
+}
+
+function loadDir<T>(dir: string, kind: "organism" | "screen" | "collection" | "variants" | "block" | "preset", problems: string[], skip?: (f: string) => boolean): Loaded<T>[] {
+  if (!existsSync(dir)) return [];
+  const out: Loaded<T>[] = [];
+  for (const f of readdirSync(dir).filter((x) => x.endsWith(".json") && !(skip?.(x))).sort()) {
+    const file = join(dir, f);
+    const value = readJson<T>(file);
+    const schema = kind === "screen" && (value as { kind?: string }).kind === "composed" ? "composed" : kind;
+    for (const e of validate(schema, value)) problems.push(`${kind}s/${f}: ${e}`);
+    out.push({ file, value });
+  }
+  return out;
+}
+
+/** `root` is the xgen folder */
+export function loadInputs(root: string): Inputs {
+  const problems: string[] = [];
+  const dictFile = xgenPaths(root).dictionary;
+  const dictionary = { file: dictFile, value: readJson<Dictionary>(dictFile) };
+  for (const e of validate("dictionary", dictionary.value)) problems.push(`content/ui/en.json: ${e}`);
+  const organisms = ["organisms", "parts", "patterns"].flatMap((d) => loadDir<OrganismSpec>(xgenPaths(root).specs(d), "organism", problems));
+  const blocks = loadDir<BlockSpec>(xgenPaths(root).specs("blocks"), "block", problems);
+  const byName = Object.fromEntries(organisms.map((o) => [o.value.name, o.value]));
+  const screens = loadDir<ScreenSpec | ComposedSpec>(xgenPaths(root).specs("screens"), "screen", problems).map((l) => {
+    if ((l.value as ComposedSpec).kind !== "composed") return l as Loaded<ScreenSpec>;
+    const composed = l.value as ComposedSpec;
+    const r = expandComposed(composed, blocks.map((b) => b.value), byName);
+    problems.push(...r.problems.map((m) => `screens/${l.file.split("/").pop()}: ${m}`));
+    return { file: l.file, value: r.screen, composed };
+  });
+  return {
+    root,
+    organisms,
+    blocks,
+    recipes: loadDir<RecipeFile>(xgenPaths(root).specs("recipes"), "variants", problems).map((r) => ({ ...r, name: r.file.split("/").pop()!.replace(/\.variants\.json$/, "") })),
+    presets: loadDir<PresetSpec>(xgenPaths(root).specs("presets"), "preset", problems),
+    screens,
+    collections: loadDir<CollectionFile>(xgenPaths(root).fixtures, "collection", problems),
+    taxonomies: existsSync(xgenPaths(root).taxonomies)
+      ? readdirSync(xgenPaths(root).taxonomies).filter((f) => f.endsWith(".json")).sort().map((f) => ({ file: join(xgenPaths(root).taxonomies, f), value: readJson<TaxonomyFile>(join(xgenPaths(root).taxonomies, f)) }))
+      : [],
+    dictionary,
+    problems,
+  };
+}
+
+export function loadApp(file: string): { app: AppSpec; problems: string[] } {
+  const app = readJson<AppSpec>(file);
+  return { app, problems: validate("app", app).map((e) => `${file}: ${e}`) };
+}
+
+/** every app of the workspace: apps/<name>/xgen.app.json */
+export function findApps(workspace: string): string[] {
+  const dir = join(workspace, "apps");
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).filter((d) => existsSync(join(dir, d, "xgen.app.json"))).sort().map((d) => join(dir, d));
+}
+
+export const kebab = (name: string): string => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
diff --git a/xgen/screens/src/print.ts b/xgen/screens/src/print.ts
new file mode 100644
index 0000000..2932c3a
--- /dev/null
+++ b/xgen/screens/src/print.ts
@@ -0,0 +1,143 @@
+// Prints a view Value as a TypeScript expression. Both runtimes use the same text: scope names are plain identifiers
+// (props, `ui`, `view`, `row`...), the helpers come from the ui package (`tpl`, `fmtMoney`, `fmtNumber`, `at`).
+import { isGroup, isOp, isRef, type Handler, type Value } from "./ir";
+
+export interface PrintCtx {
+  /** `emit.select(x)` -> the callback prop of the runtime: onselect?.(x) in Svelte, onSelect?.(x) in React */
+  emit: (event: string) => string;
+  /** names of helpers the printed code used */
+  helpers: Set<string>;
+  /** roots that may be undefined (`record`): their fields are read with `?.` */
+  optional: Set<string>;
+  /** presets the printed code read (`preset` op): their constant names, for the imports */
+  presets?: Set<string>;
+  /** the style attribute is a string in Svelte and Vue and an object in React; Vue emits events with `emit("name", ...)` */
+  runtime?: "svelte" | "react" | "vue" | "solid";
+  /** another text for a scope name (Vue: a slot is `$slots.icon`, a computed read in the script is `total.value`) */
+  rename?: (name: string) => string | undefined;
+}
+
+const HELPER: Record<string, string> = { tpl: "tpl", money: "fmtMoney", num: "fmtNumber", at: "at", pageWindow: "pageWindow", fitCols: "fitCols", uniq: "uniqLabel" };
+const camel = (s: string): string => s.replace(/-([a-z])/g, (_m, c: string) => c.toUpperCase());
+
+/** a bare prop compared to a literal is read as a plain string: a test in a branch of another test of the same prop must not be flagged as impossible */
+const widen = ([l, r]: Value[], printed: string): string => (typeof r === "string" && isRef(l) && /^[a-z]\w*$/.test(l.$) && l.$ !== "event" ? `(${printed} as string)` : printed);
+
+/** one field of a printed group: `level` when the value is the variable of that name, else `key: value` */
+const groupField = (key: string, value: string): string =>
+  key === "..." ? `...${value}` : value === key ? key : `${/^[A-Za-z_]\w*$/.test(key) ? key : JSON.stringify(key)}: ${value}`;
+
+export function printValue(v: Value, ctx: PrintCtx): string {
+  if (v === null || typeof v !== "object") return JSON.stringify(v);
+  // a grouped prop: { cta: ui.home.cta, href: "#/" }
+  if (isGroup(v)) return `{ ${Object.entries(v).map(([k, x]) => groupField(k, printValue(x, ctx))).join(", ")} }`;
+  if (isRef(v)) {
+    const [head, ...rest] = v.$.split(".");
+    if (head === "event") return `event.currentTarget.${rest.join(".") || "value"}`;
+    const root = ctx.rename?.(head!) ?? head;
+    return rest.length ? `${root}${ctx.optional.has(head) ? "?" : ""}.${rest.join(".")}` : root;
+  }
+  if (v.op === "css") return printCss(v.args, ctx);
+  if (v.op === "preset") {
+    // preset("defaults", "hero.band") -> defaults.hero.band, imported from the presets folder of the package
+    ctx.presets?.add(String(v.args[0]));
+    return `${String(v.args[0])}.${String(v.args[1])}`;
+  }
+  if (v.op === "recipe") {
+    // recipe("iconTab", "state", value) -> iconTabVariants({ state: value }), the variant table printed at the top of the component
+    const [name, ...rest] = v.args;
+    const pairs: string[] = [];
+    for (let i = 0; i + 1 < rest.length; i += 2) pairs.push(`${String(rest[i])}: ${printValue(rest[i + 1]!, ctx)}`);
+    return `${String(name)}Variants({ ${pairs.join(", ")} })`;
+  }
+  if (v.op === "count") return `${printValue(v.args[0]!, ctx)}.filter((i) => i[${printValue(v.args[1]!, ctx)}]).length`;
+  if (v.op === "where") return `${printValue(v.args[0]!, ctx)}.filter((i) => !${printValue(v.args[2]!, ctx)} || i[${printValue(v.args[1]!, ctx)}] === ${printValue(v.args[2]!, ctx)})`;
+  if (v.op === "match") return `${printValue(v.args[0]!, ctx)}.filter((i) => !${printValue(v.args[2]!, ctx)} || String(i[${printValue(v.args[1]!, ctx)}]).toLowerCase().includes(String(${printValue(v.args[2]!, ctx)}).toLowerCase()))`;
+  if (v.op === "pick") return `${printValue(v.args[0]!, ctx)}.find((i) => i.id === ${printValue(v.args[1]!, ctx)})!`;
+  if (v.op === "sumBy") return `${printValue(v.args[0]!, ctx)}.reduce((s, i) => s + i.${String(v.args[1])} * i.${String(v.args[2])}, 0)`;
+  if (v.op === "firstOf") return `${printValue(v.args[0]!, ctx)}[0]?.${String(v.args[1])} ?? ""`;
+  if (v.op === "maxBy") return `${printValue(v.args[0]!, ctx)}.reduce((m, i) => Math.max(m, i.${String(v.args[1])}), 0)`;
+  const a = v.args.map((x) => printValue(x, ctx));
+  switch (v.op) {
+    case "eq": return `(${widen(v.args, a[0]!)} === ${a[1]})`;
+    case "ne": return `(${widen(v.args, a[0]!)} !== ${a[1]})`;
+    case "not": return `!${a[0]}`;
+    case "and": return `(${a.join(" && ")})`;
+    case "or": return `(${a.join(" || ")})`;
+    case "gt": return `(${a[0]} > ${a[1]})`;
+    case "lt": return `(${a[0]} < ${a[1]})`;
+    case "ge": return `(${a[0]} >= ${a[1]})`;
+    case "le": return `(${a[0]} <= ${a[1]})`;
+    case "add": return `(${a[0]} + ${a[1]})`;
+    case "sub": return `(${a[0]} - ${a[1]})`;
+    case "mul": return `(${a[0]} * ${a[1]})`;
+    case "div": return `(${a[0]} / ${a[1]})`;
+    case "max": return `Math.max(${a.join(", ")})`;
+    case "min": return `Math.min(${a.join(", ")})`;
+    case "round": return `Math.round(${a[0]})`;
+    case "coalesce": return `(${a.join(" ?? ")})`;
+    case "cn": ctx.helpers.add("cn"); return `cn(${a.join(", ")})`;
+    case "str": return `(${a[0]} == null ? undefined : String(${a[0]}))`;
+    case "has": return `(${a[0]} != null)`;
+    case "undef": return "undefined";
+    case "range": return `Array.from({ length: ${a[0]} }, (_, i) => i)`;
+    case "cond": return `(${a[0]} ? ${a[1]} : ${a[2]})`;
+    case "len": return `(${a[0]}?.length ?? 0)`;
+    case "words": return `(${a[0]} ?? "").split(" ")`;
+    case "nbsp": return `(${a[0]} ?? "").replaceAll(" ", "\\u00a0")`;
+    case "nth": return `${a[0]}?.[${a[1]}]`;
+    case "list": return `[${a.join(", ")}]`;
+    default: {
+      const h = HELPER[v.op];
+      if (!h) throw new Error(`unknown op ${v.op}`);
+      ctx.helpers.add(h);
+      return `${h}(${a.join(", ")})`;
+    }
+  }
+}
+
+/** css("height", value, "px", "width", value, "%") -> a style string (Svelte) or object (React); property and unit are literals */
+function printCss(args: Value[], ctx: PrintCtx): string {
+  const decls: Array<[string, string, string]> = [];
+  for (let i = 0; i + 2 < args.length; i += 3) {
+    decls.push([String(args[i]), printValue(args[i + 1]!, ctx), String(args[i + 2])]);
+  }
+  if (ctx.runtime === "react") return `{ ${decls.map(([p, v, u]) => `${camel(p)}: \`\${${v}}${u}\``).join(", ")} }`;
+  return `\`${decls.map(([p, v, u]) => `${p}:\${${v}}${u}`).join(";")}\``;
+}
+
+export function printCall(h: Handler, ctx: PrintCtx): string {
+  const args = (h.args ?? []).map((x) => printValue(x, ctx)).join(", ");
+  if (h.call.startsWith("emit.") && ctx.runtime === "vue") return `emit(${[JSON.stringify(h.call.slice(5)), ...(args ? [args] : [])].join(", ")})`;
+  if (h.call.startsWith("emit.")) return `${ctx.emit(h.call.slice(5))}(${args})`;
+  return `${h.call}(${args})`;
+}
+
+export const handlerUsesEvent = (h: Handler): boolean => JSON.stringify(h.args ?? []).includes('"$":"event');
+
+/** The printed value without one pair of parentheses around the whole of it: `(a ?? b)` → `a ?? b`. */
+export const printBare = (v: Value, ctx: PrintCtx): string => {
+  const s = printValue(v, ctx);
+  if (!s.startsWith("(") || !s.endsWith(")")) return s;
+  let depth = 0;
+  let quote = "";
+  for (let i = 0; i < s.length - 1; i++) {
+    const c = s[i]!;
+    if (quote) quote = c === quote && s[i - 1] !== "\\" ? "" : quote;
+    else if (c === '"' || c === "'" || c === "`") quote = c;
+    else if (c === "(") depth++;
+    else if (c === ")") depth--;
+    if (!quote && depth === 0) return s;
+  }
+  return s.slice(1, -1);
+};
+
+/** a value spread over lines when it is wider than `width`: one list item or group field per line, nested values indented */
+export function printPretty(v: Value, ctx: PrintCtx, indent = "", width = 120): string {
+  const flat = printValue(v, ctx);
+  if (indent.length + flat.length <= width) return flat;
+  const inner = indent + "  ";
+  if (isOp(v) && v.op === "list") return `[\n${v.args.map((x) => `${inner}${printPretty(x, ctx, inner, width)},\n`).join("")}${indent}]`;
+  if (isGroup(v)) return `{\n${Object.entries(v).map(([k, x]) => `${inner}${groupField(k, printPretty(x, ctx, inner, width))},\n`).join("")}${indent}}`;
+  return flat;
+}
diff --git a/xgen/screens/src/validate-view.ts b/xgen/screens/src/validate-view.ts
new file mode 100644
index 0000000..7651fcd
--- /dev/null
+++ b/xgen/screens/src/validate-view.ts
@@ -0,0 +1,271 @@
+// Checks a view tree against the brick specs: the part exists, its props exist, enum values are recipe keys,
+// text is never a literal, ARIA state is static, every reference is in scope, every handler exists.
+import type { LoadedBrick } from "@ui8kit/xgen-spec";
+import { OPS, isGroup, isOp, isRef, presetAt, sourcesOf, type Handler, type OrganismSpec, type PresetSpec, type RecipeFile, type ScreenSpec, type Value, type ViewNode } from "./ir";
+
+export interface Parts { [name: string]: { brick: LoadedBrick["brick"]; part: LoadedBrick["brick"]["parts"][number] } }
+export const indexParts = (bricks: LoadedBrick[]): Parts => {
+  const out: Parts = {};
+  for (const b of bricks) for (const part of b.brick.parts) out[part.name] = { brick: b.brick, part };
+  return out;
+};
+
+/** props that carry text for the reader: they take a reference into content, never a literal */
+export const TEXT_PROPS = new Set(["AriaLabel", "Placeholder", "Alt", "Title", "Label", "Caption"]);
+/** plain attributes a view may set besides data-* and aria-*: structure (role, id) and text for the reader (title) */
+const FREE_ATTRS = new Set(["role", "id", "tabindex", "draggable"]);
+const TEXT_ATTRS = new Set(["title"]);
+/** ARIA state a boolean prop maps to: a reference, a boolean literal, `undefined`, or a cond of those. Never computed from content. */
+const ARIA_STATE = new Set(["aria-selected", "aria-expanded", "aria-pressed", "aria-checked", "aria-current", "aria-controls"]);
+const isBoolLike = (v: Value): boolean => v === true || v === false || typeof v === "string" || isRef(v) || (isOp(v) && ((v.op === "undef") || (v.op === "cond" && isBoolLike(v.args[1]!) && isBoolLike(v.args[2]!))));
+const ARIA_DYNAMIC_OK = new Set(["aria-label", "aria-labelledby", "aria-describedby"]);
+
+interface Scope { names: Set<string>; handlers: (h: Handler) => string | null; organisms: Record<string, OrganismSpec>; allowOutlet: boolean; slots: Record<string, number>; where: string; parts: Parts }
+
+
+function checkValue(v: Value, names: Set<string>, where: string, out: string[]): void {
+  if (isRef(v)) {
+    const root = v.$.split(".")[0]!;
+    if (!names.has(root)) out.push(`${where}: reference "${v.$}" is not in scope (${[...names].join(", ")})`);
+  } else if (isOp(v)) {
+    const want = OPS[v.op];
+    if (want === undefined) out.push(`${where}: unknown op "${v.op}"`);
+    else if (want !== "n" && want !== v.args.length) out.push(`${where}: op ${v.op} takes ${want} arguments, got ${v.args.length}`);
+    for (const a of v.args) checkValue(a, names, where, out);
+  } else if (isGroup(v)) for (const [k, x] of Object.entries(v)) checkValue(x, names, `${where}.${k}`, out);
+}
+
+/** every literal a value can take: through cond branches */
+function literals(v: Value): Array<string | number | boolean | null> {
+  if (isOp(v) && v.op === "cond") return [...literals(v.args[1]!), ...literals(v.args[2]!)];
+  if (isRef(v) || isOp(v) || isGroup(v)) return [];
+  return [v];
+}
+
+function checkUse(n: Extract<ViewNode, { use: string }>, sc: Scope, names: Set<string>, out: string[]): void {
+  const where = `${sc.where} <${n.use}>`;
+  const entry = sc.parts[n.use];
+  if (!entry) { out.push(`${where}: no such part`); return; }
+  const { brick, part } = entry;
+  const byName = new Map(part.props.map((p) => [p.name, p]));
+  for (const [k, v] of Object.entries(n.props ?? {})) {
+    const def = byName.get(k);
+    if (!def || def.type === "attrs" || def.type === "children") { out.push(`${where}: unknown prop ${k}`); continue; }
+    checkValue(v, names, `${where}.${k}`, out);
+    if (TEXT_PROPS.has(k) && typeof v === "string") out.push(`${where}.${k}: text must come from content, not a literal ("${v}")`);
+    if (def.cva) {
+      const recipe = part.recipeId ? brick.recipes[part.recipeId] : undefined;
+      const key = def.cvaKey ?? def.name.toLowerCase();
+      const allowed = recipe ? Object.keys(recipe.byKey[key] ?? {}) : [];
+      for (const lit of literals(v)) if (!allowed.includes(String(lit))) out.push(`${where}.${k}: "${lit}" is not a variant (${allowed.join(", ")})`);
+    } else if (def.type === "int") {
+      for (const lit of literals(v)) if (typeof lit !== "number") out.push(`${where}.${k}: expected a number`);
+    } else if (def.type === "bool") {
+      if (typeof v === "string" || typeof v === "number") out.push(`${where}.${k}: expected a boolean`);
+    }
+  }
+  for (const [k, v] of Object.entries(n.attrs ?? {})) {
+    checkValue(v, names, `${where}.${k}`, out);
+    if (k.startsWith("aria-")) {
+      if (ARIA_STATE.has(k) && isBoolLike(v)) { /* mapped from a prop */ }
+      else if (!ARIA_DYNAMIC_OK.has(k) && typeof v === "object" && v !== null) out.push(`${where}: ${k} must be static (ARIA state is never computed)`);
+      const idRef = (k === "aria-labelledby" || k === "aria-describedby") && typeof v === "string" && /^[\w:.-]+$/.test(v);
+      if (ARIA_DYNAMIC_OK.has(k) && typeof v === "string" && !idRef) out.push(`${where}: ${k} is text, it must come from content`);
+    } else if (k === "style") {
+      if (!(isOp(v) && v.op === "css")) out.push(`${where}: style takes css(property, value, unit, ...)`);
+    } else if (TEXT_ATTRS.has(k)) {
+      if (typeof v === "string") out.push(`${where}: ${k} is text, it must come from content`);
+    } else if (!k.startsWith("data-") && !FREE_ATTRS.has(k)) out.push(`${where}: attribute ${k} is not allowed (data-*, aria-*, ${[...FREE_ATTRS, ...TEXT_ATTRS, "style"].join(", ")})`);
+  }
+  for (const [ev, h] of Object.entries(n.on ?? {})) {
+    if (!["click", "input", "change"].includes(ev)) out.push(`${where}: event ${ev} is not mapped`);
+    const bad = sc.handlers(h);
+    if (bad) out.push(`${where}.on.${ev}: ${bad}`);
+    for (const a of h.args ?? []) checkValue(a, new Set([...names, "event", "arg"]), `${where}.on.${ev}`, out);
+  }
+  if (n.children?.length && !part.props.some((p) => p.type === "children")) out.push(`${where}: has no children slot`);
+  for (const c of n.children ?? []) walk(c, sc, names, out);
+}
+
+function walk(n: ViewNode, sc: Scope, names: Set<string>, out: string[]): void {
+  if ("use" in n) return checkUse(n, sc, names, out);
+  if ("text" in n) {
+    checkValue(n.text, names, `${sc.where} text`, out);
+    if (typeof n.text === "string" && /\p{L}/u.test(n.text)) out.push(`${sc.where}: literal text "${n.text}" (text comes from content or labels)`);
+    return;
+  }
+  if ("when" in n) {
+    checkValue(n.when, names, `${sc.where} when`, out);
+    for (const c of n.then) walk(c, sc, names, out);
+    for (const c of n.else ?? []) walk(c, sc, names, out);
+    return;
+  }
+  if ("each" in n) {
+    checkValue(n.each, names, `${sc.where} each`, out);
+    const inner = new Set([...names, n.as, ...(n.index ? [n.index] : [])]);
+    checkValue(n.key, inner, `${sc.where} each.key`, out);
+    for (const c of n.do) walk(c, sc, inner, out);
+    return;
+  }
+  if ("slot" in n) {
+    if (!(n.slot in sc.slots)) out.push(`${sc.where}: slot "${n.slot}" is not declared`);
+    else if (sc.slots[n.slot] !== (n.args?.length ?? 0)) out.push(`${sc.where}: slot ${n.slot} takes ${sc.slots[n.slot]} arguments`);
+    for (const a of n.args ?? []) checkValue(a, names, `${sc.where} slot`, out);
+    return;
+  }
+  if ("organism" in n) {
+    const org = sc.organisms[n.organism];
+    const where = `${sc.where} <${n.organism}>`;
+    if (!org) { out.push(`${where}: no such organism`); return; }
+    const props = new Map(org.props.map((p) => [p.name, p]));
+    for (const [k, v] of Object.entries(n.props ?? {})) { if (!props.has(k) && !(k === "className" && org.className)) out.push(`${where}: unknown prop ${k}`); checkValue(v, names, `${where}.${k}`, out); }
+    for (const p of org.props) if (p.required && !(n.props ?? {})[p.name]) out.push(`${where}: missing required prop ${p.name}`);
+    for (const [ev, h] of Object.entries(n.on ?? {})) {
+      if (!org.events.some((e) => e.name === ev)) out.push(`${where}: no event ${ev}`);
+      const bad = sc.handlers(h);
+      if (bad) out.push(`${where}.on.${ev}: ${bad}`);
+      for (const a of h.args ?? []) checkValue(a, new Set([...names, "event", "arg"]), where, out);
+    }
+    for (const [sname, s] of Object.entries(n.slots ?? {})) {
+      if (s.forward !== undefined) {
+        const arity = sname === "children" ? (org.children ? 0 : undefined) : org.slots.find((x) => x.name === sname)?.args.length;
+        if (arity === undefined) out.push(`${where}: no slot ${sname}`);
+        else if (!(s.forward in sc.slots)) out.push(`${where}: forwards slot ${s.forward}, which ${sc.where} does not declare`);
+        else if (sc.slots[s.forward] !== arity) out.push(`${where}: slot ${s.forward} takes ${sc.slots[s.forward]} arguments, ${sname} takes ${arity}`);
+        if (s.args.length || s.do.length) out.push(`${where}: a forwarded slot has no args and no nodes`);
+        continue;
+      }
+      if (sname === "children") {
+        if (!org.children) out.push(`${where}: has no children`);
+        for (const c of s.do) walk(c, sc, new Set([...names, ...s.args]), out);
+        continue;
+      }
+      const decl = org.slots.find((x) => x.name === sname);
+      if (!decl) { out.push(`${where}: no slot ${sname}`); continue; }
+      if (decl.args.length !== s.args.length) out.push(`${where}: slot ${sname} takes ${decl.args.length} arguments`);
+      const inner = new Set([...names, ...s.args]);
+      for (const c of s.do) walk(c, sc, inner, out);
+    }
+    return;
+  }
+  if ("outlet" in n && !sc.allowOutlet) out.push(`${sc.where}: outlet is only for screen layouts`);
+  if ("part" in n && !sc.allowOutlet) out.push(`${sc.where}: a part is placed only by a screen layout`);
+}
+
+const ORGANISM_NAMES = (o: OrganismSpec): Set<string> => new Set([...o.props.map((p) => p.name), ...o.slots.map((s) => s.name), ...(o.children ? ["children"] : []), ...(o.className ? ["className"] : []), ...Object.keys(o.consts ?? {}), ...(o.derived ?? []).map((d) => d.name)]);
+
+/** the `recipe` ops of a tree: [name, [key, value]...] (or the ops of another name) */
+function recipeOps(node: unknown, into: Array<Value[]> = [], name = "recipe"): Array<Value[]> {
+  if (Array.isArray(node)) node.forEach((n) => recipeOps(n, into, name));
+  else if (node && typeof node === "object") {
+    const o = node as Record<string, unknown>;
+    if (o.op === name && Array.isArray(o.args)) into.push(o.args as Value[]);
+    Object.values(o).forEach((n) => recipeOps(n, into, name));
+  }
+  return into;
+}
+
+export function validateOrganism(o: OrganismSpec, parts: Parts, organisms: Record<string, OrganismSpec> = {}, recipes: Record<string, RecipeFile> = {}, presets: PresetSpec[] = []): string[] {
+  const out: string[] = [];
+  for (const [name, path] of recipeOps([o.view, o.derived], [], "preset")) {
+    const p = presets.find((x) => x.name === name);
+    if (!p) out.push(`${o.name}: preset "${String(name)}" does not exist (specs/presets)`);
+    else if (presetAt(p, String(path)) === undefined) out.push(`${o.name}: preset ${String(name)} has no value at "${String(path)}"`);
+  }
+  for (const [local, file] of Object.entries(o.recipes ?? {})) if (!recipes[file]) out.push(`${o.name}: recipe ${local} points to specs/recipes/${file}.variants.json, which does not exist`);
+  for (const args of recipeOps([o.view, o.derived])) {
+    const [name, ...rest] = args;
+    const file = typeof name === "string" ? o.recipes?.[name] : undefined;
+    const recipe = file ? recipes[file] : undefined;
+    if (!recipe) { out.push(`${o.name}: recipe op names "${String(name)}", which is not in recipes`); continue; }
+    for (let i = 0; i < rest.length; i += 2) {
+      const key = String(rest[i]);
+      if (!recipe.keys.includes(key)) { out.push(`${o.name}: recipe ${file} has no key "${key}" (${recipe.keys.join(", ")})`); continue; }
+      for (const lit of literals(rest[i + 1] as Value)) if (lit !== undefined && !(String(lit) in (recipe.byKey[key] ?? {}))) out.push(`${o.name}: recipe ${file} key ${key} has no value "${lit}"`);
+    }
+  }
+  const handlers = (h: Handler): string | null => {
+    if (!h.call.startsWith("emit.")) return `handler ${h.call}: organisms only emit their events`;
+    return o.events.some((e) => e.name === h.call.slice(5)) ? null : `handler ${h.call}: no such event`;
+  };
+  const sc: Scope = { names: ORGANISM_NAMES(o), handlers, organisms, allowOutlet: false, slots: { ...Object.fromEntries(o.slots.map((s) => [s.name, s.args.length])), ...(o.children ? { children: 0 } : {}) }, where: o.name, parts };
+  if (o.portable.svelte === true || o.portable.react === true) {
+    if (!o.view.length) out.push(`${o.name}: portable but has no view`);
+  } else if (o.view.length) out.push(`${o.name}: not portable to either runtime, so it is a contract and has no view`);
+  const seen = new Set([...o.props.map((p) => p.name), ...(o.className ? ["className"] : []), ...Object.keys(o.consts ?? {})]);
+  for (const d of o.derived ?? []) { checkValue(d.value, seen, `${o.name}.derived.${d.name}`, out); seen.add(d.name); }
+  for (const n of o.view) walk(n, sc, sc.names, out);
+  const records = new Set(Object.keys(o.records));
+  for (const p of [...o.props, ...o.slots.flatMap((s) => s.args), ...o.events.flatMap((e) => e.args)]) if (typeof p.type === "object" && "record" in p.type && !records.has(p.type.record)) out.push(`${o.name}: unknown record ${p.type.record}`);
+  return out;
+}
+
+export const SCREEN_ACTIONS: Record<string, number> = { sort: 1, search: 1, page: 1, open: 1, back: 0, toggleTheme: 0 };
+export const PAGE_ACTIONS = ["toggleTheme"];
+export const SCREEN_SCOPE = ["ui", "view", "record", "route"];
+
+export function validateScreen(s: ScreenSpec, parts: Parts, organisms: Record<string, OrganismSpec>): string[] {
+  const out: string[] = [];
+  const page = s.kind === "page";
+  const handlers = (h: Handler): string | null => {
+    if (!h.call.startsWith("actions.")) return `handler ${h.call}: screens call actions.*`;
+    const want = SCREEN_ACTIONS[h.call.slice(8)];
+    if (page && !PAGE_ACTIONS.includes(h.call.slice(8))) return `handler ${h.call}: a page has only ${PAGE_ACTIONS.join(", ")}`;
+    if (want === undefined) return `handler ${h.call}: no such action`;
+    return want === (h.args?.length ?? 0) ? null : `handler ${h.call} takes ${want} arguments`;
+  };
+  const names = new Set(page ? ["ui", "route", ...(s.nav ? ["nav"] : []), ...sourcesOf(s).map((x) => x.as), ...Object.keys(s.consts ?? {})] : SCREEN_SCOPE);
+  for (const [k, v] of Object.entries(s.consts ?? {})) {
+    if (!/^[A-Z][A-Z0-9_]*$/.test(k)) out.push(`${s.name}: const ${k} is not UPPER_CASE`);
+    checkValue(v, new Set(["ui", ...sourcesOf(s).map((x) => x.as)]), `${s.name}.consts.${k}`, out);
+  }
+  const sc: Scope = { names, handlers, organisms, allowOutlet: true, slots: {}, where: s.name, parts };
+  for (const n of s.layout) walk(n, sc, names, out);
+  const noOutlet = { ...sc, allowOutlet: false };
+  const placed = new Set([...JSON.stringify(s.layout).matchAll(/"part":"([A-Za-z0-9]+)"/g)].map((m) => m[1]!));
+  for (const p of placed) if (!s.parts?.[p]) out.push(`${s.name}: the layout places the missing part ${p}`);
+  for (const [p, nodes] of Object.entries(s.parts ?? {})) {
+    if (!/^[A-Z][A-Za-z0-9]*$/.test(p)) out.push(`${s.name}: part ${p} is not PascalCase`);
+    if (!placed.has(p)) out.push(`${s.name}: part ${p} is not placed by the layout`);
+    for (const n of nodes) walk(n, { ...noOutlet, where: `${s.name}.parts.${p}` }, new Set([...names].filter((x) => x !== "route" && x !== "nav")), out);
+  }
+  for (const [area, nodes] of Object.entries(s.areas)) for (const n of nodes) walk(n, { ...noOutlet, where: `${s.name}.${area}` }, names, out);
+  for (const r of s.routes) if (!(r.area in s.areas)) out.push(`${s.name}: route ${r.path} points to the missing area ${r.area}`);
+  for (const o of s.organisms) if (!organisms[o]) out.push(`${s.name}: no organism ${o}`);
+  if (page) {
+    // a page reads a fixture, or carries its own data in consts (the Skins screen: its tiles are a list of skins, fonts and radii)
+    if (!s.sources?.length && !Object.keys(s.consts ?? {}).length) out.push(`${s.name}: a page reads at least one source or holds its data in consts`);
+    if (s.list || s.state || s.source) out.push(`${s.name}: a page has \`sources\`, not source, list or state`);
+    const as = (s.sources ?? []).map((x) => x.as);
+    if (new Set(as).size !== as.length || as.some((a) => SCREEN_SCOPE.includes(a) || a === "ui")) out.push(`${s.name}: source names must be unique and not ui, view, record or route`);
+    return out;
+  }
+  if (!s.source || !s.list || !s.state) { out.push(`${s.name}: a collection screen needs source, list and state`); return out; }
+  const [field] = s.list.defaultSort.split(":");
+  if (!s.list.columns.some((c) => c.id === field)) out.push(`${s.name}: defaultSort column ${field} is missing`);
+  for (const c of s.list.columns) if (!(c.id in s.source.fields)) out.push(`${s.name}: column ${c.id} has no source field`);
+  for (const f of s.list.searchFields) if (!(f in s.source.fields)) out.push(`${s.name}: search field ${f} has no source field`);
+  return out;
+}
+
+/** every `ui.x.y` reference of a screen: its layout, its areas and its named values */
+export const screenContentRefs = (s: ScreenSpec): Set<string> =>
+  contentRefs([...s.layout, ...Object.values(s.parts ?? {}).flat(), ...Object.values(s.areas).flat(), ...Object.values(s.consts ?? {}).map((v) => ({ text: v }))]);
+
+/** every `ui.x.y` reference of a view tree (content keys the dictionary must have) */
+export function contentRefs(nodes: ViewNode[], into = new Set<string>()): Set<string> {
+  const scan = (v: Value | undefined): void => {
+    if (v === undefined || v === null || typeof v !== "object") return;
+    if (isRef(v)) { if (v.$.startsWith("ui.")) into.add(v.$.slice(3)); } else if (isOp(v)) v.args.forEach(scan); else Object.values(v).forEach(scan);
+  };
+  const go = (n: ViewNode): void => {
+    if ("use" in n) { Object.values(n.props ?? {}).forEach(scan); Object.values(n.attrs ?? {}).forEach(scan); Object.values(n.on ?? {}).forEach((h) => h.args?.forEach(scan)); n.children?.forEach(go); }
+    else if ("text" in n) scan(n.text);
+    else if ("when" in n) { scan(n.when); n.then.forEach(go); n.else?.forEach(go); }
+    else if ("each" in n) { scan(n.each); scan(n.key); n.do.forEach(go); }
+    else if ("slot" in n) n.args?.forEach(scan);
+    else if ("organism" in n) { Object.values(n.props ?? {}).forEach(scan); Object.values(n.on ?? {}).forEach((h) => h.args?.forEach(scan)); Object.values(n.slots ?? {}).forEach((s) => s.do.forEach(go)); }
+  };
+  nodes.forEach(go);
+  return into;
+}
diff --git a/xgen/screens/test/screens.test.ts b/xgen/screens/test/screens.test.ts
new file mode 100644
index 0000000..8efa904
--- /dev/null
+++ b/xgen/screens/test/screens.test.ts
@@ -0,0 +1,206 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { loadSpecs } from "@ui8kit/xgen-spec";
+import type { ScreenSpec } from "@ui8kit/xgen-screens";
+import { galleryOf, THEMES, blockKey, blockProps, expandComposed, sourcesOf, validateScreen, authored, authoredDirs, indexParts, loadInputs, op, ref, stringify, text, use, validateOrganism, printValue } from "../src";
+import { readFileSync } from "node:fs";
+
+const root = join(import.meta.dir, "..", "..");
+const parts = indexParts(loadSpecs(root).bricks);
+const orgs = Object.fromEntries(authored.organisms.map((o) => [o.name, o]));
+const base = authored.organisms[0]!;
+const plans = authored.screens[0] as ScreenSpec;
+const inputs = loadInputs(root);
+
+test("stored organism and screen JSON equal the builder output", () => {
+  for (const [dir, list] of authoredDirs()) for (const o of list) expect(readFileSync(join(root, "specs", dir, `${o.id.split(".")[1]}.json`), "utf8")).toBe(stringify(o));
+});
+
+test("inputs match their schemas", () => {
+  expect(loadInputs(root).problems).toEqual([]);
+});
+
+test("the authored views are valid", () => {
+  expect(validateOrganism(base, parts, orgs)).toEqual([]);
+});
+
+const withView = (view: typeof base.view) => ({ ...base, view });
+
+test("literal text is rejected", () => {
+  const errs = validateOrganism(withView([use("Text", {}, text("Hello"))]), parts, orgs);
+  expect(errs.join("\n")).toContain("literal text");
+});
+
+test("an unknown variant is rejected", () => {
+  const errs = validateOrganism(withView([use("Button", { props: { Variant: "plain" } })]), parts, orgs);
+  expect(errs.join("\n")).toContain('"plain" is not a variant');
+});
+
+test("text-bearing props must be references", () => {
+  const errs = validateOrganism(withView([use("Input", { props: { Placeholder: "Search" } })]), parts, orgs);
+  expect(errs.join("\n")).toContain("must come from content");
+});
+
+test("ARIA state must be static, and unknown attributes are rejected", () => {
+  const a = validateOrganism(withView([use("Text", { attrs: { "aria-expanded": op("not", ref("current")) } })]), parts, orgs);
+  expect(a.join("\n")).toContain("must be static");
+  const b = validateOrganism(withView([use("Text", { attrs: { onclick: "x" } })]), parts, orgs);
+  expect(b.join("\n")).toContain("not allowed");
+});
+
+test("references must be in scope and ops must have the right arity", () => {
+  const errs = validateOrganism(withView([use("Text", {}, text(op("eq", ref("nothing"))))]), parts, orgs);
+  expect(errs.join("\n")).toContain("not in scope");
+  expect(errs.join("\n")).toContain("takes 2 arguments");
+});
+
+test("values print as TypeScript", () => {
+  const ctx = { emit: (e: string) => `on${e}?.`, helpers: new Set<string>(), optional: new Set(["record"]) };
+  expect(printValue(op("cond", ref("plan.highlighted"), "a", "b"), ctx)).toBe('(plan.highlighted ? "a" : "b")');
+  expect(printValue(ref("record.id"), ctx)).toBe("record?.id");
+  expect(printValue(op("money", ref("plan.price"), ref("plan.currency")), ctx)).toBe("fmtMoney(plan.price, plan.currency)");
+  expect([...ctx.helpers]).toEqual(["fmtMoney"]);
+});
+
+test("the parts and patterns: 23 parts, 36 patterns, the generated ones and the contracts", () => {
+  expect(authored.parts.length).toBe(23);
+  expect(authored.patterns.length).toBe(36);
+  const all = [...authored.parts, ...authored.patterns];
+  expect(all.filter((o) => o.portable.svelte === true).length).toBe(40);
+  for (const o of all.filter((x) => x.portable.svelte !== true)) {
+    expect(o.view).toEqual([]);
+    const f = o.portable.svelte as { reason: string };
+    expect(f.reason.length).toBeGreaterThan(20);
+  }
+});
+
+test("a recipe op names a declared recipe, a key of it and a value of the key", () => {
+  const inputs = loadInputs(root);
+  const recipes = Object.fromEntries(inputs.recipes.map((r) => [r.name, r.value]));
+  const avatar = authored.parts.find((p) => p.name === "Avatar")!;
+  expect(validateOrganism(avatar, parts, {}, recipes)).toEqual([]);
+  const broken = JSON.parse(JSON.stringify(avatar));
+  broken.view[0].props.Class.args[0] = { op: "recipe", args: ["avatar", "size", "999", "nope", "x"] };
+  const errs = validateOrganism(broken, parts, {}, recipes).join("\n");
+  expect(errs).toContain('has no value "999"');
+  expect(errs).toContain('has no key "nope"');
+});
+
+test("css prints a string for Svelte and an object for React; the other new ops print", () => {
+  const mk = (runtime: "svelte" | "react") => ({ emit: (e: string) => e, helpers: new Set<string>(), optional: new Set<string>(), runtime });
+  const css = op("css", "height", ref("h"), "px", "max-width", 5, "%");
+  expect(printValue(css, mk("svelte"))).toBe("`height:${h}px;max-width:${5}%`");
+  expect(printValue(css, mk("react"))).toBe("{ height: `${h}px`, maxWidth: `${5}%` }");
+  const c = mk("svelte");
+  expect(printValue(op("range", 3), c)).toBe("Array.from({ length: 3 }, (_, i) => i)");
+  expect(printValue(op("str", ref("n")), c)).toBe("(n == null ? undefined : String(n))");
+  expect(printValue(op("recipe", "avatar", "size", ref("s")), c)).toBe("avatarVariants({ size: s })");
+});
+
+test("a page screen reads several sources and calls only toggleTheme; a collection screen still needs its list", () => {
+  const siteScreen = inputs.screens.find((s) => s.value.id === "screen.site")!.value;
+  expect(validateScreen(siteScreen, parts, orgs)).toEqual([]);
+  expect(sourcesOf(siteScreen).map((x) => x.as).sort()).toEqual(["faq", "faqtabs", "features", "terminal", "tiers"]);
+  expect(sourcesOf(plans).map((x) => x.as)).toEqual(["rows"]);
+  const bad = validateScreen({ ...siteScreen, list: plans.list, areas: { ...siteScreen.areas, home: [use("Button", { on: { click: { call: "actions.search", args: [ref("ui.app.title")] } } }, text(ref("ui.app.title")))] } }, parts, orgs);
+  expect(bad.some((m) => m.includes("a page has only toggleTheme"))).toBe(true);
+  expect(bad.some((m) => m.includes("not source, list or state"))).toBe(true);
+  expect(validateScreen({ ...plans, list: undefined }, parts, orgs).some((m) => m.includes("needs source, list and state"))).toBe(true);
+});
+
+test("a composed screen expands to a page of organisms: sample < variant < use, axes are literals", () => {
+  const site = inputs.screens.find((s) => s.value.id === "screen.site")!;
+  expect(site.composed?.kind).toBe("composed");
+  expect(site.value.kind).toBe("page");
+  expect(site.value.organisms).toEqual(["CtaBand", "FaqList", "FeatureGrid", "HeroClassic", "PricingTiers", "SiteFooter", "SiteHeader"]);
+  expect(site.value.sources?.map((x) => x.as).sort()).toEqual(["faq", "faqtabs", "features", "terminal", "tiers"]);
+  const blocks = inputs.blocks.map((b) => b.value);
+  const hero = blocks.find((b) => b.id === "block.hero")!;
+  expect(blockKey(hero)).toBe("hero");
+  const split = hero.variants.find((v) => v.id === "split")!;
+  const props = blockProps(hero, split, { id: "x" });
+  expect(props["layout"]).toBe("split");
+  // a grouped axis lands in its group, merged with the sample's fields
+  expect((props["media"] as Record<string, unknown>)["kind"]).toBe("image");
+  expect((props["media"] as Record<string, unknown>)["lines"]).toEqual({ $: "terminal" });
+  expect(Object.keys(props)).not.toContain("chrome");
+  const prompt = blockProps(hero, hero.variants.find((v) => v.id === "prompt")!, {}, orgs["HeroPrompt"]);
+  expect(Object.keys(prompt)).not.toContain("media");
+  expect((prompt["actions"] as Record<string, unknown>)["href"]).toBe("#/pricing");
+  expect(props["tone"]).toBe("default");
+  expect(props["id"]).toBe("x");
+  const bad = expandComposed({ ...site.composed!, areas: { ...site.composed!.areas, home: [{ block: "hero", variant: "nope" }, { block: "ghost" }, { block: "cta", props: { tone: "accent" } }] } }, blocks, orgs);
+  expect(bad.problems.length).toBe(3);
+});
+
+test("the gallery has a section for every variant of every block, with the organism inside", () => {
+  const gallery = inputs.screens.find((s) => s.value.id === "screen.blocks")!;
+  const dump = JSON.stringify(gallery.value.areas);
+  for (const b of inputs.blocks) for (const v of b.value.variants) expect(dump).toContain(`"data-variant":"${v.id}"`);
+  expect(gallery.value.routes.length).toBe(inputs.blocks.length + 1);
+  expect(Object.keys(gallery.value.areas)).toContain("index");
+});
+
+test("pick prints a lookup by id", () => {
+  const ctx = { emit: (e: string) => e, helpers: new Set<string>(), optional: new Set<string>(), runtime: "svelte" as const };
+  expect(printValue(op("pick", ref("tiers"), "plan-team"), ctx)).toBe('tiers.find((i) => i.id === "plan-team")!');
+});
+
+test("count prints the number of items with a flag", () => {
+  const ctx = { emit: (e: string) => e, helpers: new Set<string>(), optional: new Set<string>(), runtime: "svelte" as const };
+  expect(printValue(op("count", ref("tasks"), "done"), ctx)).toContain("filter");
+});
+
+test("the catalog: 25 to 120 blocks, over 100 variants, every block in a known theme, the gallery in theme order", () => {
+  const blocks = inputs.blocks.map((b) => b.value);
+  expect(blocks.length).toBeGreaterThanOrEqual(25);
+  expect(blocks.length).toBeLessThanOrEqual(120);
+  expect(blocks.reduce((n, b) => n + b.variants.length, 0)).toBeGreaterThan(100);
+  for (const b of blocks) expect(THEMES as readonly string[]).toContain(b.theme);
+  const order = galleryOf(blocks).map((b) => THEMES.indexOf(b.theme as (typeof THEMES)[number]));
+  expect(order).toEqual([...order].sort((a, b) => a - b));
+});
+
+test("variant props (case copy) win over the sample, and an axis stays out of them", () => {
+  const hero = inputs.blocks.map((b) => b.value).find((b) => b.id === "block.hero")!;
+  const saas = hero.variants.find((v) => v.id === "saas")!;
+  expect(saas.props?.["title"]).toEqual(ref("ui.cases.saas.hero.title"));
+  expect(blockProps(hero, saas)["title"]).toEqual(ref("ui.cases.saas.hero.title"));
+  expect(blockProps(hero, hero.variants[0]!)["title"]).toEqual(hero.sample.props["title"]);
+});
+
+test("a preset op must name an existing preset and path", () => {
+  const p = { specVersion: 1 as const, id: "preset.kit", name: "kit", docs: "d", values: { hero: { band: "min-h-[1px]" } } };
+  const ok = withView([use("Text", { props: { Class: op("preset", "kit", "hero.band") } })]);
+  expect(validateOrganism(ok, parts, orgs, {}, [p])).toEqual([]);
+  const bad = validateOrganism(withView([use("Text", { props: { Class: op("preset", "kit", "hero.nope") } })]), parts, orgs, {}, [p]);
+  expect(bad.join("\n")).toContain('no value at "hero.nope"');
+  expect(validateOrganism(ok, parts, orgs, {}, []).join("\n")).toContain('preset "kit" does not exist');
+});
+
+test("a badge never sits inline with a title: it goes on its own line above it (or in its own slot)", () => {
+  const TITLES = new Set(["Title", "CardTitle", "Heading"]);
+  type N = Record<string, unknown>;
+  // the elements a node renders directly, looking through when/each wrappers
+  const direct = (kids: unknown[]): N[] => kids.flatMap((k) => {
+    if (!k || typeof k !== "object") return [];
+    const n = k as N;
+    if (typeof n.use === "string") return [n];
+    return Object.values(n).flatMap((v) => (Array.isArray(v) ? direct(v) : v && typeof v === "object" && !("op" in (v as N)) ? direct([v]) : []));
+  });
+  const bad: string[] = [];
+  const walk = (node: unknown, where: string) => {
+    if (!node || typeof node !== "object") return;
+    if (Array.isArray(node)) { node.forEach((x) => walk(x, where)); return; }
+    const n = node as N;
+    if (typeof n.use === "string" && Array.isArray(n.children)) {
+      const cls = JSON.stringify((n.props as N | undefined)?.Class ?? "");
+      const row = n.use === "Group" ? !cls.includes("flex-col") : /\bflex\b/.test(cls) && !cls.includes("flex-col");
+      const names = direct(n.children).map((c) => c.use as string);
+      if (row && names.includes("Badge") && names.some((x) => TITLES.has(x))) bad.push(`${where}: ${n.use} has a Badge beside a title`);
+    }
+    Object.values(n).forEach((v) => walk(v, where));
+  };
+  for (const o of authored.organisms) walk(o.view, o.name);
+  expect(bad).toEqual([]);
+});
diff --git a/xgen/screens/tools/author-block-texts.ts b/xgen/screens/tools/author-block-texts.ts
new file mode 100644
index 0000000..50a4f36
--- /dev/null
+++ b/xgen/screens/tools/author-block-texts.ts
@@ -0,0 +1,21 @@
+#!/usr/bin/env bun
+// One-time tool: writes the names, notes and variant labels of the blocks (written next to each block in xgen/screens/src/authoring/gallery/blocks*.ts)
+// into the dictionary xgen/content/ui/en.json under blocks.names, blocks.docs and blocks.variants. Run it after you add or rename a block or a variant.
+// usage: bun screens/tools/author-block-texts.ts
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { blockTexts } from "../src/index";
+import { catalogTexts } from "../src/authoring/gallery/catalog";
+import { skinsTexts } from "../src/authoring/gallery/skins";
+
+const file = join(import.meta.dir, "../../content/ui/en.json");
+const dict = JSON.parse(readFileSync(file, "utf8")) as { blocks: Record<string, unknown>; catalog?: unknown; skins?: unknown };
+dict.blocks["names"] = Object.fromEntries(Object.entries(blockTexts).map(([k, v]) => [k, v.name]));
+dict.blocks["docs"] = Object.fromEntries(Object.entries(blockTexts).map(([k, v]) => [k, v.docs]));
+dict.blocks["variants"] = Object.fromEntries(Object.entries(blockTexts).map(([k, v]) => [k, v.variants]));
+dict.catalog = catalogTexts;
+dict.skins = skinsTexts;
+// a specimen of Cyrillic letters (the font tiles of /skins/) is written as \u escapes: the sources stay free of Cyrillic text
+const escapeCyrillic = (s: string): string => s.replace(/[\u0400-\u04FF]/g, (c) => `\\u${c.charCodeAt(0).toString(16).padStart(4, "0")}`);
+writeFileSync(file, escapeCyrillic(JSON.stringify(dict, null, 2)) + "\n");
+console.log(`${Object.keys(blockTexts).length} blocks, ${Object.values(blockTexts).reduce((n, v) => n + Object.keys(v.variants).length, 0)} variants`);
diff --git a/xgen/screens/tools/author-coverage.ts b/xgen/screens/tools/author-coverage.ts
new file mode 100644
index 0000000..ef259f8
--- /dev/null
+++ b/xgen/screens/tools/author-coverage.ts
@@ -0,0 +1,9 @@
+#!/usr/bin/env bun
+// Tool: writes xgen/docs/vibeui-coverage.md from the registry in xgen/screens/src/authoring/gallery/coverage.ts and the block catalog.
+// usage: bun screens/tools/author-coverage.ts
+import { writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { coverageMarkdown, blocks } from "../src/index";
+
+writeFileSync(join(import.meta.dir, "../../docs/vibeui-coverage.md"), coverageMarkdown(blocks));
+console.log("wrote xgen/docs/vibeui-coverage.md");
diff --git a/xgen/screens/tools/author-theme-texts.ts b/xgen/screens/tools/author-theme-texts.ts
new file mode 100644
index 0000000..cfb71e0
--- /dev/null
+++ b/xgen/screens/tools/author-theme-texts.ts
@@ -0,0 +1,15 @@
+#!/usr/bin/env bun
+// Tool: writes the head texts of the theme-app pages (written next to the pages in xgen/screens/src/authoring/screens/themes.ts)
+// into the dictionary xgen/content/ui/en.json under `pages`,. Run it after you change a page.
+// usage: bun screens/tools/author-theme-texts.ts
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { xgenPaths } from "@ui8kit/xgen-schema";
+import { themeTexts } from "../src/index";
+
+const file = xgenPaths(join(import.meta.dir, "../..")).dictionary;
+const dict = JSON.parse(readFileSync(file, "utf8")) as Record<string, unknown>;
+const pages = { ...themeTexts() };
+dict["pages"] = pages;
+writeFileSync(file, JSON.stringify(dict, null, 2) + "\n");
+console.log(`${Object.keys(pages).length} apps, ${Object.values(pages).reduce((n, p) => n + Object.keys(p).length, 0)} pages with texts`);
diff --git a/xgen/spec/README.md b/xgen/spec/README.md
new file mode 100644
index 0000000..435a838
--- /dev/null
+++ b/xgen/spec/README.md
@@ -0,0 +1,5 @@
+# @ui8kit/xgen-spec
+
+Spec loader: reads xgen/specs, validates and normalizes them into the typed brick model (props, render tree, recipes) and runs the canonical renderer.
+
+Part of xgen (see `../README.md`). Self-contained: depends only on other `@ui8kit/xgen-*` packages. Tests: `bun test`.
diff --git a/xgen/spec/package.json b/xgen/spec/package.json
new file mode 100644
index 0000000..fa3dee0
--- /dev/null
+++ b/xgen/spec/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@ui8kit/xgen-spec",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Spec loader: reads xgen/specs, validates and normalizes them into the typed brick model (props, render tree, recipes) and runs the canonical renderer.",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ui8kit/xgen-schema": "workspace:*",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "scripts": {
+    "test": "bun test"
+  }
+}
diff --git a/xgen/spec/src/derive.ts b/xgen/spec/src/derive.ts
new file mode 100644
index 0000000..edca52e
--- /dev/null
+++ b/xgen/spec/src/derive.ts
@@ -0,0 +1,63 @@
+// Contract metadata derived from the render tree and the recipes: slots, a11y, data attributes, tokens.
+// The importer writes it into the spec; `xgen check` derives it again and fails when the spec drifted from its own render tree.
+import type { Node, PartDef, TagSpec, AttrSpec } from "./domain/model";
+import { walkNodes } from "./domain/model";
+import type { VariantRecipe } from "./domain/recipe";
+import type { A11yInfo, DataAttr, SlotInfo } from "./spec-file";
+
+const tagNames = (t: TagSpec): string[] => (t.kind === "static" ? [t.tag] : t.kind === "heading" ? ["h1", "h2", "h3", "h4", "h5", "h6"] : t.kind === "mapped" ? t.tags : [t.fallback, `(${t.group})`]);
+
+function rootTags(n: Node): string[] {
+  if (n.kind === "element") return tagNames(n.tag);
+  if (n.kind === "when") return [...n.then, ...(n.else ?? [])].flatMap(rootTags);
+  return [];
+}
+
+function attrsOf(part: PartDef): AttrSpec[] {
+  const out: AttrSpec[] = [];
+  walkNodes(part.render, (n) => { if (n.kind === "element") out.push(...n.attrs); });
+  return out;
+}
+
+const attrKind = (a: AttrSpec): "static" | "expr" | "bool" | undefined => (a.kind === "static" ? "static" : a.kind === "expr" ? "expr" : a.kind === "bool" ? "bool" : undefined);
+const attrName = (a: AttrSpec): string | undefined => (a.kind === "static" || a.kind === "expr" || a.kind === "bool" ? a.name : undefined);
+
+export function deriveSlots(part: PartDef): SlotInfo[] {
+  let slot = false;
+  walkNodes(part.render, (n) => { if (n.kind === "slot") slot = true; });
+  return slot || part.props.some((p) => p.type === "children") ? [{ name: "children" }] : [];
+}
+
+export function deriveA11y(part: PartDef): A11yInfo {
+  const aria: A11yInfo["aria"] = [];
+  const roles = new Set<string>();
+  for (const a of attrsOf(part)) {
+    const name = attrName(a);
+    const kind = attrKind(a);
+    if (!name || !kind || !(name === "role" || name.startsWith("aria-") || name === "tabindex")) continue;
+    const value = a.kind === "static" ? a.value : undefined;
+    if (name === "role" && value) roles.add(value);
+    if (!aria.some((x) => x.name === name && x.kind === kind && x.value === value)) aria.push({ name, kind, ...(value !== undefined ? { value } : {}) });
+  }
+  return { roots: [...new Set(rootTags(part.render))], roles: [...roles].sort(), aria: aria.sort((a, b) => a.name.localeCompare(b.name)), keyboard: [] };
+}
+
+export function deriveData(part: PartDef): DataAttr[] {
+  const out: DataAttr[] = [];
+  for (const a of attrsOf(part)) {
+    const name = attrName(a);
+    const kind = attrKind(a);
+    if (name && kind && name.startsWith("data-")) out.push({ name, kind, ...(a.kind === "static" ? { value: a.value } : {}) });
+  }
+  return out;
+}
+
+/** theme tokens used by the classes of the recipes of a part (color utilities only) */
+export function deriveTokens(recipes: VariantRecipe[], tokenNames: string[]): string[] {
+  const classes = recipes.flatMap((r) => [r.base, ...Object.values(r.byKey).flatMap((m) => Object.values(m)), ...(r.compound ?? []).map((c) => c.class)]).join(" ");
+  const names = [...tokenNames].sort((a, b) => b.length - a.length);
+  const used = new Set<string>();
+  const re = new RegExp(`(?:^|[\\s:!\\[(&>_-])(?:bg|text|border|ring|inset-ring|outline|fill|stroke|divide|placeholder|caret|accent|decoration|from|via|to)-(${names.map((n) => n.replace(/[-]/g, "\\-")).join("|")})(?:/\\d+)?(?=$|[\\s\\]):])`, "g");
+  for (const m of classes.matchAll(re)) used.add(`--${m[1]}`);
+  return [...used].sort();
+}
diff --git a/xgen/spec/src/domain/cn.ts b/xgen/spec/src/domain/cn.ts
new file mode 100644
index 0000000..173c2fd
--- /dev/null
+++ b/xgen/spec/src/domain/cn.ts
@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge class values. Caller-supplied classes win over recipe classes. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/domain/expr.ts b/xgen/spec/src/domain/expr.ts
similarity index 100%
rename from src/domain/expr.ts
rename to xgen/spec/src/domain/expr.ts
diff --git a/src/domain/model.ts b/xgen/spec/src/domain/model.ts
similarity index 100%
rename from src/domain/model.ts
rename to xgen/spec/src/domain/model.ts
diff --git a/src/domain/naming.ts b/xgen/spec/src/domain/naming.ts
similarity index 100%
rename from src/domain/naming.ts
rename to xgen/spec/src/domain/naming.ts
diff --git a/src/domain/recipe.ts b/xgen/spec/src/domain/recipe.ts
similarity index 78%
rename from src/domain/recipe.ts
rename to xgen/spec/src/domain/recipe.ts
index dfb32a4..0ebb44b 100644
--- a/src/domain/recipe.ts
+++ b/xgen/spec/src/domain/recipe.ts
@@ -13,6 +13,8 @@ export interface VariantRecipe {
   defaults: Record<string, string>;
   byKey: Record<string, Record<string, string>>;
   meta?: Record<string, string>;
+  /** cva-style compound variants: {size:"32", shape:"rounded", class:"rounded-lg px-2"}. */
+  compound?: Array<{ class: string } & Record<string, string>>;
 }
 
 export class RecipeError extends Error {}
@@ -28,6 +30,7 @@ export function validateRecipe(recipe: VariantRecipe): void {
       }
     }
     const def = recipe.defaults?.[key];
+    if (def === undefined && Object.keys(choices).length > 0) throw new RecipeError(`recipe ${recipe.id}: no default for key "${key}"`);
     if (def !== undefined && choices[def] === undefined) {
       throw new RecipeError(`recipe ${recipe.id}: defaults.${key}="${def}" not present in byKey.${key}`);
     }
@@ -65,5 +68,11 @@ export function composeRecipe(
       throw new RecipeError(`[compose] unknown variant "${choice}" for key "${key}" (recipe id: ${recipe.id})`);
     }
   }
+  const chosen: Record<string, string> = {};
+  for (const key of recipe.keys) chosen[key] = (selection[key] ?? "").trim() || (recipe.defaults[key] ?? "").trim();
+  for (const rule of recipe.compound ?? []) {
+    const { class: cls, ...when } = rule;
+    if (Object.entries(when).every(([k, v]) => v.split("|").includes(chosen[k] ?? ""))) parts.push(cls);
+  }
   return cn(...parts, ...extra);
 }
diff --git a/src/domain/render.ts b/xgen/spec/src/domain/render.ts
similarity index 100%
rename from src/domain/render.ts
rename to xgen/spec/src/domain/render.ts
diff --git a/xgen/spec/src/domain/tags.ts b/xgen/spec/src/domain/tags.ts
new file mode 100644
index 0000000..3435cd6
--- /dev/null
+++ b/xgen/spec/src/domain/tags.ts
@@ -0,0 +1,69 @@
+/**
+ * Tag groups — the cross-runtime SSOT for allowed root tags per primitive
+ * group. Mirrors ui8kit `utils/tags.json` / `utils/tags.go` / `utils/tags.ts`.
+ */
+
+export const TAG_GROUPS = {
+  Layout: ["div", "section", "article", "aside", "header", "footer", "main", "nav", "figure", "search", "hgroup"],
+  BoxAllowed: ["div"],
+  BlockText: ["p", "blockquote", "figcaption", "address", "pre"],
+  Inline: ["span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"],
+  Heading: ["h1", "h2", "h3", "h4", "h5", "h6"],
+  List: ["ul", "ol", "dl", "menu"],
+  ListItem: ["li", "dt", "dd"],
+  Form: ["form", "fieldset"],
+  FormControl: ["input", "textarea", "select", "button", "option", "optgroup", "datalist", "output", "meter", "progress"],
+  FormLabel: ["label", "legend"],
+  Table: ["table"],
+  TableSection: ["thead", "tbody", "tfoot"],
+  TableRow: ["tr"],
+  TableCell: ["th", "td"],
+  TableColumn: ["colgroup", "col"],
+  Media: ["img", "picture", "source"],
+  Disclosure: ["details", "summary"],
+  Container: ["div", "main", "section"],
+  Stack: ["div", "ul", "ol"],
+  Group: ["div", "fieldset", "dl"],
+  // Text: a block of text (p, blockquote, figcaption, address, pre) or an inline element
+  Text: ["p", "blockquote", "figcaption", "address", "pre", "span", "em", "strong", "small", "abbr", "cite", "code", "kbd", "mark", "time", "data", "var", "samp", "sub", "sup", "b", "i", "u", "s", "q", "dfn", "bdo", "bdi", "ins", "del"],
+} as const;
+
+export type TagGroupName = keyof typeof TAG_GROUPS;
+
+export function allowedTags(group: TagGroupName): readonly string[] {
+  return TAG_GROUPS[group];
+}
+
+export function isAllowedTag(tag: string, group: TagGroupName): boolean {
+  return (TAG_GROUPS[group] as readonly string[]).includes(tag.trim().toLowerCase());
+}
+
+/** Returns `tag` when allowed for `group`, otherwise `fallback`. */
+export function resolveTag(tag: string | undefined, fallback: string, group: TagGroupName): string {
+  const t = (tag ?? "").trim().toLowerCase();
+  if (t === "") return fallback;
+  return isAllowedTag(t, group) ? t : fallback;
+}
+
+/** h1–h6 from a heading level; 0/out-of-range default to h2 (mirrors TitleTag). */
+export function titleTag(order: number | undefined): string {
+  switch (order) {
+    case 1:
+      return "h1";
+    case 3:
+      return "h3";
+    case 4:
+      return "h4";
+    case 5:
+      return "h5";
+    case 6:
+      return "h6";
+    default:
+      return "h2";
+  }
+}
+
+export const VOID_TAGS = new Set([
+  "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta",
+  "param", "source", "track", "wbr",
+]);
diff --git a/src/domain/validate.ts b/xgen/spec/src/domain/validate.ts
similarity index 100%
rename from src/domain/validate.ts
rename to xgen/spec/src/domain/validate.ts
diff --git a/xgen/spec/src/index.ts b/xgen/spec/src/index.ts
new file mode 100644
index 0000000..29bedbd
--- /dev/null
+++ b/xgen/spec/src/index.ts
@@ -0,0 +1,11 @@
+export * from "./domain/expr";
+export * from "./domain/model";
+export * from "./domain/naming";
+export * from "./domain/tags";
+export * from "./domain/recipe";
+export * from "./domain/validate";
+export * from "./domain/render";
+export { cn } from "./domain/cn";
+export * from "./spec-file";
+export * from "./derive";
+export * from "./load";
diff --git a/xgen/spec/src/load.ts b/xgen/spec/src/load.ts
new file mode 100644
index 0000000..26c8e28
--- /dev/null
+++ b/xgen/spec/src/load.ts
@@ -0,0 +1,36 @@
+// Loads the brick specs of an xgen root (xgen/specs/ui/*.json), checks them against the JSON Schemas and normalizes them into the typed model.
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { validate, xgenPaths } from "@ui8kit/xgen-schema";
+import type { BrickDef } from "./domain/model";
+import type { VariantRecipe } from "./domain/recipe";
+import type { SpecFile } from "./spec-file";
+
+export interface LoadedBrick { brick: BrickDef; spec: SpecFile; specPath: string; variantPaths: Record<string, string> }
+export interface LoadedSpecs { root: string; bricks: LoadedBrick[]; problems: string[] }
+
+const readJson = (p: string): unknown => JSON.parse(readFileSync(p, "utf8"));
+
+/** `root` is the xgen folder (the one that holds specs/, fixtures/ and content/) */
+export function loadSpecs(root: string): LoadedSpecs {
+  const dir = xgenPaths(root).specs("ui");
+  const problems: string[] = [];
+  const bricks: LoadedBrick[] = [];
+  for (const name of readdirSync(dir).filter((f) => f.endsWith(".json") && !f.endsWith(".variants.json")).sort()) {
+    const specPath = join(dir, name);
+    const spec = readJson(specPath) as SpecFile;
+    for (const e of validate("spec", spec)) problems.push(`${name}: ${e}`);
+    const recipes: Record<string, VariantRecipe> = {};
+    const variantPaths: Record<string, string> = {};
+    for (const [id, file] of Object.entries(spec.variants ?? {})) {
+      const p = join(dir, file);
+      const raw = readJson(p);
+      for (const e of validate("variants", raw)) problems.push(`${file}: ${e}`);
+      recipes[id] = raw as VariantRecipe;
+      variantPaths[id] = p;
+    }
+    const brick: BrickDef = { id: spec.id, dir: spec.dir, file: spec.file, docs: spec.docs, parts: spec.parts, recordTypes: spec.recordTypes, recipes, recipeFiles: spec.variants };
+    bricks.push({ brick, spec, specPath, variantPaths });
+  }
+  return { root, bricks, problems };
+}
diff --git a/xgen/spec/src/spec-file.ts b/xgen/spec/src/spec-file.ts
new file mode 100644
index 0000000..7b150d1
--- /dev/null
+++ b/xgen/spec/src/spec-file.ts
@@ -0,0 +1,59 @@
+// The JSON form of a brick spec (xgen/specs/ui/<name>.json): the typed render model plus the runtime-independent contract
+// (slots, events, a11y, data attributes, tokens, examples, portability). Variants live next to it in <name>.variants.json.
+import type { PartDef } from "./domain/model";
+
+export type PortableFlag = true | { portable: false; reason: string };
+/** the runtimes xgen emits ui packages and hosts for */
+export const UI_RUNTIMES = ["svelte", "react", "vue", "solid"] as const;
+export type UiRuntime = (typeof UI_RUNTIMES)[number];
+/** the portability of a spec to a runtime. Vue shares the template model of Svelte (blocks, slots, attributes): a spec
+ * that says nothing about Vue follows its Svelte flag, a spec that does not carry over says so with its own `vue` flag. Solid shares
+ * the JSX model of React (render props, no snippets): a spec that says nothing about Solid follows its React flag. */
+export const portableTo = (p: { svelte: PortableFlag; react: PortableFlag; vue?: PortableFlag; solid?: PortableFlag }, rt: UiRuntime): PortableFlag =>
+  rt === "vue" ? p.vue ?? p.svelte : rt === "solid" ? p.solid ?? p.react : p[rt];
+
+export interface SlotInfo { name: string; docs?: string; /** arguments of a render-prop slot */ args?: string[] }
+export interface EventInfo { name: string; payload?: string; docs?: string }
+export interface A11yInfo {
+  /** root tags the part can render */
+  roots: string[];
+  /** static role values written by the part */
+  roles: string[];
+  /** aria-* and role attributes: how they are produced */
+  aria: Array<{ name: string; kind: "static" | "expr" | "bool"; value?: string }>;
+  /** keyboard contract; primitives are native elements, so none */
+  keyboard: string[];
+  notes?: string;
+}
+export interface DataAttr { name: string; kind: "static" | "expr" | "bool"; value?: string }
+
+export interface SpecPart extends PartDef {
+  slots: SlotInfo[];
+  events: EventInfo[];
+  a11y: A11yInfo;
+  data: DataAttr[];
+  /** theme tokens (--primary …) the recipe classes use */
+  tokens: string[];
+}
+
+export interface SpecExample { id: string; props: Record<string, unknown>; children?: Record<string, unknown> }
+
+export interface SpecFile {
+  $schema?: string;
+  specVersion: 1;
+  /** `ui.button` */
+  id: string;
+  tier: "brick";
+  dir: string;
+  file?: string;
+  docs: string;
+  /** recipe id -> variants.json file name (next to the spec) */
+  variants: Record<string, string>;
+  recordTypes?: Array<{ name: string; fields: Array<{ name: string; type: "string" | "bool"; docs?: string }> }>;
+  parts: SpecPart[];
+  examples: SpecExample[];
+  /** per runtime: true, or { portable: false, reason } */
+  portable: { svelte: PortableFlag; react: PortableFlag; vue?: PortableFlag };
+  /** differences a runtime has on purpose, with the contract that replaces the missing feature */
+  runtimeNotes?: Array<{ runtime: "svelte" | "react"; part?: string; note: string }>;
+}
diff --git a/xgen/spec/test/specs.test.ts b/xgen/spec/test/specs.test.ts
new file mode 100644
index 0000000..4b294e2
--- /dev/null
+++ b/xgen/spec/test/specs.test.ts
@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test";
+import { join } from "node:path";
+import { loadSpecs, validateRegistry } from "../src";
+
+const root = join(import.meta.dir, "..", "..");
+const { bricks, problems } = loadSpecs(root);
+
+test("40 bricks and 72 parts load and match the schema", () => {
+  expect(problems).toEqual([]);
+  expect(bricks.length).toBe(40);
+  expect(bricks.reduce((n, b) => n + b.brick.parts.length, 0)).toBe(72);
+});
+
+test("the registry is consistent", () => {
+  expect(() => validateRegistry(bricks.map((b) => b.brick))).not.toThrow();
+});
+
+test("every brick is portable to both runtimes or says why not", () => {
+  for (const b of bricks) for (const rt of ["svelte", "react"] as const) {
+    const f = b.spec.portable[rt];
+    expect(f === true || (f.portable === false && f.reason.length >= 8)).toBe(true);
+  }
+});
+
+test("no recipe has a gradient and no plain variant", () => {
+  for (const b of bricks) {
+    const text = JSON.stringify(b.brick.recipes);
+    expect(text.includes("gradient")).toBe(false);
+    for (const r of Object.values(b.brick.recipes)) for (const m of Object.values(r.byKey)) expect(Object.keys(m).includes("plain")).toBe(false);
+  }
+});
diff --git a/xgen/spec/tools/add-lucide.ts b/xgen/spec/tools/add-lucide.ts
new file mode 100644
index 0000000..8e4dd19
--- /dev/null
+++ b/xgen/spec/tools/add-lucide.ts
@@ -0,0 +1,25 @@
+// One-time tool: adds more Lucide icons (ISC license) to xgen/specs/assets/lucide-icons.json from a checkout that has @lucide/svelte installed.
+// usage: bun spec/tools/add-lucide.ts <canary-root> <icon-name>...
+import { existsSync, readFileSync, writeFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+
+const [canary, ...names] = process.argv.slice(2);
+if (!canary || !names.length) throw new Error("usage: add-lucide.ts <canary-root> <icon-name>...");
+const bun = join(canary, "node_modules/.bun");
+const pkg = readdirSync(bun).find((d) => d.startsWith("@lucide+svelte@"));
+if (!pkg) throw new Error("@lucide/svelte is not installed in that checkout");
+const dir = join(bun, pkg, "node_modules/@lucide/svelte/dist/icons");
+const file = join(import.meta.dir, "../../specs/assets/lucide-icons.json");
+const doc = JSON.parse(readFileSync(file, "utf8")) as { icons: Record<string, unknown> };
+const missing: string[] = [];
+for (const n of names) {
+  const f = join(dir, `${n}.svelte`);
+  if (!existsSync(f)) { missing.push(n); continue; }
+  const m = readFileSync(f, "utf8").match(/const iconData = (\{.*\});/);
+  if (!m) throw new Error(`icon ${n}: no iconData`);
+  doc.icons[n] = JSON.parse(m[1]!).node;
+}
+doc.icons = Object.fromEntries(Object.entries(doc.icons).sort(([a], [b]) => a.localeCompare(b)));
+writeFileSync(file, JSON.stringify(doc) + "\n");
+console.log(`${Object.keys(doc.icons).length} icons`);
+if (missing.length) { console.error(`not in this Lucide version: ${missing.join(", ")}`); process.exitCode = 1; }
diff --git a/xgen/spec/tools/author-block-recipes.ts b/xgen/spec/tools/author-block-recipes.ts
new file mode 100644
index 0000000..0c21aaa
--- /dev/null
+++ b/xgen/spec/tools/author-block-recipes.ts
@@ -0,0 +1,31 @@
+#!/usr/bin/env bun
+// One-time tool: writes the recipes of the block frames (SectionFrame, MediaFrame) into xgen/specs/recipes. Tokens only, no gradients.
+// usage: bun spec/tools/author-block-recipes.ts
+import { writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+const out = join(import.meta.dir, "../../specs/recipes");
+const recipes = {
+  "section-frame": {
+    base: "w-full",
+    byKey: {
+      tone: { default: "", muted: "bg-muted", accent: "border-y-2 border-primary bg-card", inverse: "bg-foreground text-background [&_.text-muted-foreground]:text-background/70" },
+      density: { roomy: "py-16", default: "py-10", compact: "py-6", flush: "py-0" },
+      align: { start: "", center: "text-center" },
+    },
+    defaults: { tone: "default", density: "default", align: "start" },
+    keys: ["tone", "density", "align"],
+  },
+  "media-frame": {
+    base: "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border",
+    byKey: {
+      ratio: { "16/9": "aspect-video", "4/3": "aspect-4/3", "1/1": "aspect-square", "3/4": "aspect-3/4", "21/9": "aspect-21/9" },
+      shape: { card: "rounded-2xl", square: "rounded-none", circle: "rounded-full" },
+    },
+    defaults: { ratio: "16/9", shape: "card" },
+    keys: ["ratio", "shape"],
+  },
+};
+for (const [name, r] of Object.entries(recipes)) {
+  writeFileSync(join(out, `${name}.variants.json`), JSON.stringify({ $schema: "../../schema/schemas/variants.schema.json", id: `block.${name}`, ...r }, null, 2) + "\n");
+}
diff --git a/xgen/spec/tools/author-bricks.ts b/xgen/spec/tools/author-bricks.ts
new file mode 100644
index 0000000..9193ff3
--- /dev/null
+++ b/xgen/spec/tools/author-bricks.ts
@@ -0,0 +1,115 @@
+#!/usr/bin/env bun
+// One-time authoring tool: writes the specs of the bricks that canary has and ui8kit/codegen does not
+// (range, skeleton; canary's Progress is already the Progress of ui.form.controls). Their base classes are written below.
+// After the run the JSON in xgen/specs/ui is the source of truth.
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { deriveA11y, deriveData, deriveSlots, deriveTokens, type SpecExample, type SpecFile, type SpecPart, type PartDef, type PropDef, type VariantRecipe } from "../src/index";
+
+const ROOT = resolve(process.argv[2] ?? join(import.meta.dir, "../.."));
+const THEME = readFileSync(join(ROOT, "runtimes/core/assets/styles/theme.css"), "utf8");
+const TOKENS = [...THEME.matchAll(/--color-([a-z0-9-]+):/g)].map((m) => m[1]!);
+const out = join(ROOT, "specs/ui");
+mkdirSync(out, { recursive: true });
+
+const str = (name: string, docs: string, extra: Partial<PropDef> = {}): PropDef => ({ name, type: "string", cva: false, docs, ...extra });
+const cva = (name: string, docs: string): PropDef => ({ name, type: "string", cva: true, docs });
+const klass = str("Class", "adds Tailwind utilities");
+const attrs: PropDef = { name: "Attrs", type: "attrs", cva: false };
+const prop = (name: string) => ({ kind: "prop", name }) as const;
+const lit = (value: string) => ({ kind: "lit", value }) as const;
+const staticAttr = (name: string, value: string) => ({ kind: "static", name, value }) as const;
+const orDefault = (name: string, fallback: string) => ({ kind: "cond", test: { kind: "isSet", expr: prop(name) }, then: { kind: "intToString", expr: prop(name) }, else: lit(fallback) }) as const;
+
+interface Def { id: string; dir: string; docs: string; recipe: string; part: PartDef; notes?: SpecFile["runtimeNotes"] }
+
+const defs: Def[] = [
+  {
+    id: "ui.range", dir: "range", recipe: "range.variants.json",
+    docs: "Range renders a styled input[type=range] (single thumb slider). The value is controlled from outside: Value in, an input event out (canary used a bindable prop).",
+    part: {
+      name: "Range", docs: "Range renders input type=range.", recipeId: "range", classes: { recipe: {} },
+      props: [str("Value", "current value as a string, controlled by the caller", { passthrough: true }), { name: "Min", type: "int", cva: false, docs: "lowest value, 0 by default" }, { name: "Max", type: "int", cva: false, docs: "highest value, 100 by default" }, { name: "Step", type: "int", cva: false, docs: "step, 1 by default" }, { name: "Disabled", type: "bool", cva: false, docs: "disables the slider" }, str("AriaLabel", "accessible name"), klass, attrs],
+      render: { kind: "element", tag: { kind: "static", tag: "input" }, attrs: [staticAttr("type", "range"), { kind: "class" }, { kind: "expr", name: "min", expr: orDefault("Min", "0") }, { kind: "expr", name: "max", expr: orDefault("Max", "100") }, { kind: "expr", name: "step", expr: orDefault("Step", "1") }, { kind: "expr", name: "value", expr: prop("Value") }, { kind: "bool", name: "disabled", expr: prop("Disabled") }, { kind: "expr", name: "aria-label", expr: prop("AriaLabel") }, { kind: "rest" }], children: [], void: true },
+    } as PartDef,
+    notes: [{ runtime: "svelte", part: "Range", note: "canary binds the value with $bindable; the contract here is Value + the input event (the caller owns the state)" }],
+  },
+  {
+    id: "ui.skeleton", dir: "skeleton", recipe: "skeleton.variants.json",
+    docs: "Skeleton renders a pulsing placeholder box (loading state). It is decorative: aria-hidden; the loading state is announced by the container (aria-busy).",
+    part: {
+      name: "Skeleton", docs: "Skeleton renders a decorative placeholder.", recipeId: "skeleton", classes: { recipe: { shape: "Shape" } },
+      props: [cva("Shape", "line, block or circle"), klass, attrs],
+      render: { kind: "element", tag: { kind: "static", tag: "div" }, attrs: [{ kind: "class" }, staticAttr("aria-hidden", "true"), staticAttr("data-slot", "skeleton"), { kind: "rest" }], children: [] },
+    } as PartDef,
+  },
+  {
+    id: "ui.lucide-icon", dir: "lucide-icon", recipe: "lucide-icon.variants.json",
+    docs: "LucideIcon renders a Lucide glyph (ISC license) by kebab-case name from the generated registry specs/assets/lucide-icons.json. Decorative (aria-hidden) unless a Label is given.",
+    part: {
+      name: "LucideIcon", docs: "LucideIcon renders an svg glyph by name.", recipeId: "lucide-icon", classes: { recipe: {} },
+      props: [str("Name", "kebab-case Lucide name; an unknown name draws a circle"), { name: "Size", type: "int", cva: false, docs: "width and height in px, 16 by default" }, { name: "StrokeWidth", type: "int", cva: false, docs: "stroke width, 2 by default" }, str("Label", "accessible name; without it the icon is decorative"), klass, attrs],
+      render: { kind: "element", tag: { kind: "static", tag: "svg" }, attrs: [{ kind: "class" }, staticAttr("data-slot", "icon"), { kind: "rest" }], children: [] },
+    } as PartDef,
+    notes: [{ runtime: "svelte", part: "LucideIcon", note: "the svg children are the nodes of the registry (an asset component of the runtime); the markup above is the frame" }, { runtime: "react", part: "LucideIcon", note: "the svg children are the nodes of the registry (an asset component of the runtime); the markup above is the frame" }],
+  },
+];
+
+// ButtonPlain and LinkPlain: canary's `plain` prop of Button and Link (no styling, only the element and its class) as parts of their own
+const specOf = (n: string): { parts: any[] } => JSON.parse(readFileSync(join(out, `${n}.json`), "utf8"));
+{
+  const btn = specOf("button").parts[0];
+  const lnk = specOf("link").parts[0];
+  const pick = (p: any, names: string[]) => p.props.filter((x: PropDef) => names.includes(x.name));
+  const plainButton = { name: "ButtonPlain", docs: "ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it themselves.", recipeId: "button-plain", classes: { recipe: {}, state: btn.classes.state }, props: pick(btn, ["Type", "Disabled", "ID", "Role", "TabIndex", "AriaLabel", "Class", "Children", "Attrs"]), render: { ...btn.render.else[0], attrs: btn.render.else[0].attrs.filter((a: any) => a.name !== "form") } };
+  const plainLink = { ...lnk, name: "LinkPlain", docs: "LinkPlain is a bare anchor: no styling beyond Class.", recipeId: "link-plain", classes: { recipe: {}, state: lnk.classes.state }, props: pick(lnk, ["Href", "Target", "Rel", "External", "Download", "Disabled", "AriaCurrent", "AriaLabel", "ID", "Role", "Class", "Children", "Attrs"]) };
+  defs.push(
+    { id: "ui.button-plain", dir: "button-plain", recipe: "button-plain.variants.json", docs: plainButton.docs, part: plainButton as PartDef },
+    { id: "ui.link-plain", dir: "link-plain", recipe: "link-plain.variants.json", docs: plainLink.docs, part: plainLink as PartDef },
+  );
+}
+
+const skeleton: VariantRecipe = { id: "ui.skeleton", base: "animate-pulse bg-muted motion-reduce:animate-none", keys: ["shape"], defaults: { shape: "line" }, byKey: { shape: { line: "h-3 w-full rounded-md", block: "h-20 w-full rounded-xl", circle: "size-8 rounded-full" } } };
+// recipes of canary: copied from its files where it has one, else written here from its component (the class lists are the ones of the canary components)
+const CANARY_BASE: Record<string, string> = {
+  "button-plain": "",
+  "link-plain": "",
+  "lucide-icon": "inline-block shrink-0",
+  progress: "h-2 w-full overflow-hidden rounded-full bg-muted [&::-webkit-progress-bar]:bg-muted [&::-webkit-progress-value]:bg-primary [&::-webkit-progress-value]:transition-[width] [&::-moz-progress-bar]:bg-primary appearance-none",
+  range: [
+    "h-5 w-full cursor-pointer appearance-none bg-transparent",
+    "accent-primary disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full",
+    "[&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full",
+    "[&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-3.5",
+    "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+  ].join(" "),
+};
+
+const exampleOf = (part: PartDef, recipe: VariantRecipe): SpecExample[] => {
+  const ex: SpecExample[] = [];
+  for (const key of recipe.keys) for (const value of Object.keys(recipe.byKey[key] ?? {})) {
+    const p = part.props.find((x) => x.cva && (x.cvaKey ?? x.name.toLowerCase()) === key);
+    if (p) ex.push({ id: `${key}.${value}`, props: { [p.name]: value } });
+  }
+  return ex;
+};
+
+for (const d of defs) {
+  let recipe: VariantRecipe;
+  if (d.dir === "skeleton") recipe = skeleton;
+  else recipe = { id: d.id, base: CANARY_BASE[d.dir]!, keys: [], defaults: {}, byKey: {} };
+  if (JSON.stringify(recipe).includes("gradient")) throw new Error("gradient");
+  writeFileSync(join(out, d.recipe), JSON.stringify(recipe, null, 2) + "\n");
+  const part = d.part;
+  const sp: SpecPart = { ...part, slots: deriveSlots(part), events: [], a11y: deriveA11y(part), data: deriveData(part), tokens: deriveTokens([recipe], TOKENS) };
+  const examples: SpecExample[] = exampleOf(part, recipe);
+  if (d.dir === "progress") examples.push({ id: "value.half", props: { Value: 50, Label: "Progress" } });
+  if (d.dir.endsWith("-plain")) examples.push({ id: "default", props: {} });
+  if (d.dir === "range") examples.push({ id: "value.default", props: { Value: "30", AriaLabel: "Volume" } }, { id: "state.disabled", props: { Disabled: true, AriaLabel: "Volume" } });
+  const spec: SpecFile = {
+    $schema: "../../schema/schemas/spec.schema.json", specVersion: 1, id: d.id, tier: "brick", dir: d.dir, docs: d.docs,
+    variants: { [d.dir]: d.recipe }, parts: [sp], examples, portable: { svelte: true, react: true }, ...(d.notes ? { runtimeNotes: d.notes } : {}),
+  };
+  writeFileSync(join(out, `${d.dir}.json`), JSON.stringify(spec, null, 2) + "\n");
+}
+console.log(`authored ${defs.length} bricks`);
diff --git a/xgen/spec/tools/harvest-lucide.ts b/xgen/spec/tools/harvest-lucide.ts
new file mode 100644
index 0000000..e295cab
--- /dev/null
+++ b/xgen/spec/tools/harvest-lucide.ts
@@ -0,0 +1,23 @@
+// One-time tool: harvests the Lucide icons (ISC license) a canary checkout uses into xgen/specs/assets/lucide-icons.json.
+// usage: bun spec/tools/harvest-lucide.ts <canary-root>
+import { readFileSync, writeFileSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+
+const canary = process.argv[2];
+if (!canary) throw new Error("usage: harvest-lucide.ts <canary-root>");
+const registry = readFileSync(join(canary, "packages/ui/src/ui/icon/lucide-registry.ts"), "utf8");
+const names = [...registry.matchAll(/@lucide\/svelte\/icons\/([a-z0-9-]+)"/g)].map((m) => m[1]!).sort();
+const bun = join(canary, "node_modules/.bun");
+const pkg = readdirSync(bun).find((d) => d.startsWith("@lucide+svelte@"));
+if (!pkg) throw new Error("@lucide/svelte is not installed in the canary checkout");
+const dir = join(bun, pkg, "node_modules/@lucide/svelte/dist/icons");
+const out: Record<string, Array<[string, Record<string, string>]>> = {};
+for (const n of names) {
+  const src = readFileSync(join(dir, `${n}.svelte`), "utf8");
+  const m = src.match(/const iconData = (\{.*\});/);
+  if (!m) throw new Error(`icon ${n}: no iconData`);
+  out[n] = JSON.parse(m[1]!).node;
+}
+const file = { "//": "Lucide icons (ISC license, https://lucide.dev): the glyphs the canary registry names. Harvested by spec/tools/harvest-lucide.ts. Rendering: <svg viewBox=0 0 24 24> with these nodes.", icons: out };
+writeFileSync(join(import.meta.dir, "../../specs/assets/lucide-icons.json"), JSON.stringify(file) + "\n");
+console.log(`${names.length} icons`);
diff --git a/xgen/spec/tools/import-codegen.ts b/xgen/spec/tools/import-codegen.ts
new file mode 100644
index 0000000..0d8688d
--- /dev/null
+++ b/xgen/spec/tools/import-codegen.ts
@@ -0,0 +1,81 @@
+#!/usr/bin/env bun
+// One-time importer (not part of `xgen build`): reads the brick definitions of a local ui8kit/codegen clone and the canary recipes
+// (*.variants.json) of a ui source folder, and writes xgen/specs/ui/*.json. After the import the specs are the source of truth and xgen
+// does not read either source again.
+//   CODEGEN_DIR=/path/to/codegen RECIPES_DIR=/path/to/ui bun spec/tools/import-codegen.ts [xgenRoot]
+import { mkdirSync, readFileSync, writeFileSync, existsSync, readdirSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { deriveA11y, deriveData, deriveSlots, deriveTokens, type SpecExample, type SpecFile, type SpecPart, type BrickDef, type PropDef, type VariantRecipe } from "../src/index";
+
+/** a one-time import tool reads files outside the repository: the folder comes from the environment, never from a path written here */
+const need = (name: string): string => process.env[name] ?? (() => { throw new Error(`set ${name} to the folder to read`); })();
+const CODEGEN = need("CODEGEN_DIR");
+const RECIPES = need("RECIPES_DIR");
+const ROOT = resolve(process.argv[2] ?? join(import.meta.dir, "../.."));
+const THEME = readFileSync(join(ROOT, "runtimes/core/assets/styles/theme.css"), "utf8");
+const TOKENS = [...THEME.matchAll(/--color-([a-z0-9-]+):/g)].map((m) => m[1]!);
+
+const { bricks } = (await import(join(CODEGEN, "bricks/index.ts"))) as { bricks: BrickDef[] };
+const pascal = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+const out = join(ROOT, "specs/ui");
+mkdirSync(out, { recursive: true });
+
+let nParts = 0;
+for (const b of bricks) {
+  const recipes: Record<string, VariantRecipe> = {};
+  for (const [rid, file] of Object.entries(b.recipeFiles)) {
+    const ours = join(RECIPES, b.dir, file);
+    const src: Record<string, unknown> = JSON.parse(readFileSync(existsSync(ours) ? ours : join(CODEGEN, "bricks", b.dir, file), "utf8"));
+    delete src.$schema;
+    delete src.source; // design provenance is not published
+    const r = { id: String(src.id ?? b.id), base: src.base, keys: src.keys, defaults: src.defaults, byKey: src.byKey, ...(src.compound ? { compound: src.compound } : {}) } as VariantRecipe;
+    if (JSON.stringify(r).includes("gradient")) throw new Error(`${file}: gradient in a recipe`);
+    recipes[rid] = r;
+    writeFileSync(join(out, file), JSON.stringify(r, null, 2) + "\n");
+  }
+  // overlay: every dimension of the recipe is a prop of the parts that use the recipe
+  const parts: SpecPart[] = b.parts.map((p) => {
+    const part = JSON.parse(JSON.stringify(p)) as typeof p;
+    const rid = part.recipeId ?? part.classes?.recipeId;
+    const recipe = rid ? recipes[rid] : undefined;
+    if (recipe && part.classes) {
+      part.classes.recipe = part.classes.recipe ?? {};
+      for (const key of recipe.keys) {
+        if (key in part.classes.recipe) continue;
+        const name = pascal(key);
+        if (!part.props.some((x) => x.name === name)) {
+          const prop: PropDef = { name, type: "string", cva: true, ...(name.toLowerCase() === key ? {} : { cvaKey: key }), docs: `sets ${key}` };
+          const last = part.props.map((x) => !!x.cva).lastIndexOf(true);
+          part.props.splice(last + 1, 0, prop);
+        }
+        part.classes.recipe[key] = name;
+      }
+      // keep the order of keys of the recipe
+      part.classes.recipe = Object.fromEntries(recipe.keys.filter((k) => k in part.classes!.recipe!).map((k) => [k, part.classes!.recipe![k]!]));
+    }
+    nParts++;
+    return {
+      ...part,
+      slots: deriveSlots(part),
+      events: [],
+      a11y: deriveA11y(part),
+      data: deriveData(part),
+      tokens: deriveTokens(recipe ? [recipe] : [], TOKENS),
+    } as SpecPart;
+  });
+  const dataFile = join(CODEGEN, "bricks", b.dir, `${b.file ?? b.dir}.data.json`);
+  const examples: SpecExample[] = existsSync(dataFile)
+    ? Object.entries(JSON.parse(readFileSync(dataFile, "utf8")).showcase as Record<string, { props: Record<string, unknown>; children?: Record<string, unknown> }>).map(([id, v]) => ({ id, props: v.props, ...(v.children ? { children: v.children } : {}) }))
+    : [];
+  const spec: SpecFile = {
+    $schema: "../../schema/schemas/spec.schema.json",
+    specVersion: 1,
+    id: b.id, tier: "brick", dir: b.dir, ...(b.file ? { file: b.file } : {}), docs: b.docs,
+    variants: b.recipeFiles,
+    ...(b.recordTypes ? { recordTypes: b.recordTypes } : {}),
+    parts, examples,
+    portable: { svelte: true, react: true },
+  };
+  writeFileSync(join(out, `${b.file ?? b.dir}.json`), JSON.stringify(spec, null, 2) + "\n");
+}
+console.log(`imported ${bricks.length} bricks, ${nParts} parts`);
diff --git a/xgen/spec/tools/import-recipes.ts b/xgen/spec/tools/import-recipes.ts
new file mode 100644
index 0000000..10699cc
--- /dev/null
+++ b/xgen/spec/tools/import-recipes.ts
@@ -0,0 +1,29 @@
+#!/usr/bin/env bun
+// One-time tool: copies the recipes (CVA-style *.variants.json) of the canary parts and patterns into xgen/specs/recipes.
+// The `source` field (a pointer into the design kit) is dropped; a recipe with a gradient is refused.
+// usage: bun spec/tools/import-recipes.ts <canary-root>
+import { mkdirSync, readFileSync, readdirSync, statSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+const canary = process.argv[2];
+if (!canary) throw new Error("usage: import-recipes.ts <canary-root>");
+const out = join(import.meta.dir, "../../specs/recipes");
+mkdirSync(out, { recursive: true });
+const found: string[] = [];
+const walk = (dir: string): void => {
+  for (const f of readdirSync(dir)) {
+    const p = join(dir, f);
+    if (statSync(p).isDirectory()) walk(p);
+    else if (f.endsWith(".variants.json")) found.push(p);
+  }
+};
+for (const sub of ["parts", "patterns"]) walk(join(canary, "packages/ui/src", sub));
+for (const file of found.sort()) {
+  const raw = JSON.parse(readFileSync(file, "utf8")) as Record<string, unknown>;
+  if (JSON.stringify(raw).includes("gradient")) throw new Error(`${file}: gradient`);
+  const { source: _source, ...rest } = raw;
+  const name = file.split("/").pop()!;
+  writeFileSync(join(out, name), JSON.stringify({ $schema: "../../schema/schemas/variants.schema.json", ...rest }, null, 2) + "\n");
+  console.log(name);
+}
+console.log(`${found.length} recipes`);
diff --git a/xgen/specs/_nonportable.json b/xgen/specs/_nonportable.json
new file mode 100644
index 0000000..692490e
--- /dev/null
+++ b/xgen/specs/_nonportable.json
@@ -0,0 +1,94 @@
+{
+  "$comment": "What does not carry over between Svelte, React and Vue, and the explicit contract that replaces it. `xgen check` fails when a marker shows up in generated code of its runtime.",
+  "features": [
+    {
+      "id": "svelte.context",
+      "runtime": "svelte",
+      "feature": "setContext / getContext: values handed down the tree without props",
+      "markers": [
+        "setContext",
+        "getContext"
+      ],
+      "replacement": "An explicit port. The URL is a UrlPort object created by the app and passed to the screen as the `url` prop (a rune store in Svelte, useSyncExternalStore in React); nothing is read from context."
+    },
+    {
+      "id": "svelte.bindable",
+      "runtime": "svelte",
+      "feature": "$bindable: two-way binding of a prop",
+      "markers": [
+        "$bindable",
+        "bind:"
+      ],
+      "replacement": "One-way `value` plus an event prop (`oninput` / `onChange`): the parent owns the state and the URL is the state."
+    },
+    {
+      "id": "svelte.attach",
+      "runtime": "svelte",
+      "feature": "{@attach}: behaviour attached to an element",
+      "markers": [
+        "{@attach"
+      ],
+      "replacement": "Not used. Behaviour lives in portable TypeScript (xgen/runtimes/core/assets/app) and in event props."
+    },
+    {
+      "id": "react.context",
+      "runtime": "react",
+      "feature": "createContext / useContext",
+      "markers": [
+        "createContext",
+        "useContext"
+      ],
+      "replacement": "The same explicit `url` prop as in Svelte."
+    },
+    {
+      "id": "svelte.html",
+      "runtime": "svelte",
+      "feature": "{@html}: an HTML string rendered as markup",
+      "markers": [
+        "{@html"
+      ],
+      "replacement": "Not used. Markup is built from kit primitives by the emitter; text comes from content as text (rules 02 and 06, group rules)."
+    },
+    {
+      "id": "react.html",
+      "runtime": "react",
+      "feature": "dangerouslySetInnerHTML: an HTML string rendered as markup",
+      "markers": [
+        "dangerouslySetInnerHTML"
+      ],
+      "replacement": "Not used. Markup is built from kit primitives by the emitter; text comes from content as text (rules 02 and 06, group rules)."
+    },
+    {
+      "id": "vue.html",
+      "runtime": "vue",
+      "feature": "v-html: an HTML string rendered as markup",
+      "markers": [
+        "v-html"
+      ],
+      "replacement": "Not used. Markup is built from kit primitives by the emitter; text comes from content as text (rules 02 and 06, group rules)."
+    },
+    {
+      "id": "vue.model",
+      "runtime": "vue",
+      "feature": "v-model: two-way binding of a prop",
+      "markers": [
+        "v-model"
+      ],
+      "replacement": "One-way `:value` plus an event prop (`@input`), as in Svelte and React: the parent owns the state and the URL is the state."
+    },
+    {
+      "id": "slot.arguments",
+      "runtime": "both",
+      "feature": "Slot with arguments: a Svelte snippet (`{#snippet footer(plan)}`) versus a React render function (`footer={(plan) => ...}`)",
+      "markers": [],
+      "replacement": "The organism spec declares slots with typed arguments (slots[].args). Each emitter prints its own form; the screen spec fills the slot with the same nodes, and the argument names are part of the contract."
+    },
+    {
+      "id": "children.snippet",
+      "runtime": "both",
+      "feature": "Children: a Svelte Snippet versus React ReactNode, and `asChild` (React only)",
+      "markers": [],
+      "replacement": "Bricks declare a `children` slot. `asChild` is a React-only option of the brick and is listed in its runtimeNotes; screens never use it."
+    }
+  ]
+}
diff --git a/xgen/specs/assets/lucide-icons.json b/xgen/specs/assets/lucide-icons.json
new file mode 100644
index 0000000..c040824
--- /dev/null
+++ b/xgen/specs/assets/lucide-icons.json
@@ -0,0 +1 @@
+{"//":"Lucide icons (ISC license, https://lucide.dev): the glyphs the canary registry names. Harvested by spec/tools/harvest-lucide.ts. Rendering: <svg viewBox=0 0 24 24> with these nodes.","icons":{"accessibility":[["circle",{"cx":"16","cy":"4","r":"1"}],["path",{"d":"m18 19 1-7-6 1"}],["path",{"d":"m5 8 3-3 5.5 3-2.36 3.5"}],["path",{"d":"M4.24 14.5a5 5 0 0 0 6.88 6"}],["path",{"d":"M13.76 17.5a5 5 0 0 0-6.88-6"}]],"activity":[["path",{"d":"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"}]],"anchor":[["path",{"d":"M12 6v16"}],["path",{"d":"m19 13 2-1a9 9 0 0 1-18 0l2 1"}],["path",{"d":"M9 11h6"}],["circle",{"cx":"12","cy":"4","r":"2"}]],"archive":[["rect",{"width":"20","height":"5","x":"2","y":"3","rx":"1"}],["path",{"d":"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"}],["path",{"d":"M10 12h4"}]],"arrow-down":[["path",{"d":"M12 5v14"}],["path",{"d":"m19 12-7 7-7-7"}]],"arrow-down-up":[["path",{"d":"m3 16 4 4 4-4"}],["path",{"d":"M7 20V4"}],["path",{"d":"m21 8-4-4-4 4"}],["path",{"d":"M17 4v16"}]],"arrow-left":[["path",{"d":"m12 19-7-7 7-7"}],["path",{"d":"M19 12H5"}]],"arrow-right":[["path",{"d":"M5 12h14"}],["path",{"d":"m12 5 7 7-7 7"}]],"arrow-up":[["path",{"d":"m5 12 7-7 7 7"}],["path",{"d":"M12 19V5"}]],"arrow-up-right":[["path",{"d":"M7 7h10v10"}],["path",{"d":"M7 17 17 7"}]],"at-sign":[["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"}]],"badge-check":[["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],"badge-dollar-sign":[["path",{"d":"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],"ban":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M4.929 4.929 19.07 19.071"}]],"banknote":[["rect",{"width":"20","height":"12","x":"2","y":"6","rx":"2"}],["circle",{"cx":"12","cy":"12","r":"2"}],["path",{"d":"M6 12h.01M18 12h.01"}]],"bell":[["path",{"d":"M10.268 21a2 2 0 0 0 3.464 0"}],["path",{"d":"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"}]],"blocks":[["path",{"d":"M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2"}],["rect",{"x":"14","y":"2","width":"8","height":"8","rx":"1"}]],"bold":[["path",{"d":"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"}]],"bolt":[["path",{"d":"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"}],["circle",{"cx":"12","cy":"12","r":"4"}]],"book-open":[["path",{"d":"M12 5v16"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}]],"book-open-text":[["path",{"d":"M12 5v16"}],["path",{"d":"M16 13h2"}],["path",{"d":"M16 9h2"}],["path",{"d":"M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"}],["path",{"d":"M6 13h2"}],["path",{"d":"M6 9h2"}]],"book-x":[["path",{"d":"m14.5 7.5-5 5"}],["path",{"d":"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"}],["path",{"d":"m9.5 7.5 5 5"}]],"bookmark":[["path",{"d":"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"}]],"bot":[["path",{"d":"M12 8V4H8"}],["rect",{"width":"16","height":"12","x":"4","y":"8","rx":"2"}],["path",{"d":"M2 14h2"}],["path",{"d":"M20 14h2"}],["path",{"d":"M15 13v2"}],["path",{"d":"M9 13v2"}]],"boxes":[["path",{"d":"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"}],["path",{"d":"m7 16.5-4.74-2.85"}],["path",{"d":"m7 16.5 5-3"}],["path",{"d":"M7 16.5v5.17"}],["path",{"d":"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"}],["path",{"d":"m17 16.5-5-3"}],["path",{"d":"m17 16.5 4.74-2.85"}],["path",{"d":"M17 16.5v5.17"}],["path",{"d":"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"}],["path",{"d":"M12 8 7.26 5.15"}],["path",{"d":"m12 8 4.74-2.85"}],["path",{"d":"M12 13.5V8"}]],"brain":[["path",{"d":"M12 18V5"}],["path",{"d":"M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"}],["path",{"d":"M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"}],["path",{"d":"M17.997 5.125a4 4 0 0 1 2.526 5.77"}],["path",{"d":"M18 18a4 4 0 0 0 2-7.464"}],["path",{"d":"M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"}],["path",{"d":"M6 18a4 4 0 0 1-2-7.464"}],["path",{"d":"M6.003 5.125a4 4 0 0 0-2.526 5.77"}]],"briefcase":[["path",{"d":"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"}],["rect",{"width":"20","height":"14","x":"2","y":"6","rx":"2"}]],"brush":[["path",{"d":"m11 10 3 3"}],["path",{"d":"M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"}],["path",{"d":"M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"}]],"building":[["path",{"d":"M12 10h.01"}],["path",{"d":"M12 14h.01"}],["path",{"d":"M12 6h.01"}],["path",{"d":"M16 10h.01"}],["path",{"d":"M16 14h.01"}],["path",{"d":"M16 6h.01"}],["path",{"d":"M8 10h.01"}],["path",{"d":"M8 14h.01"}],["path",{"d":"M8 6h.01"}],["path",{"d":"M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"}],["rect",{"x":"4","y":"2","width":"16","height":"20","rx":"2"}]],"calendar":[["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}]],"calendar-days":[["path",{"d":"M8 2v3"}],["path",{"d":"M16 2v3"}],["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 13h.01"}],["path",{"d":"M12 13h.01"}],["path",{"d":"M16 13h.01"}],["path",{"d":"M8 17h.01"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M16 17h.01"}]],"calendar-range":[["rect",{"x":"3","y":"3","width":"18","height":"18","rx":"2"}],["path",{"d":"M16 2v3"}],["path",{"d":"M3 9h18"}],["path",{"d":"M8 2v3"}],["path",{"d":"M17 13h-6"}],["path",{"d":"M13 17H7"}],["path",{"d":"M7 13h.01"}],["path",{"d":"M17 17h.01"}]],"camera":[["path",{"d":"M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"}],["circle",{"cx":"12","cy":"13","r":"3"}]],"chart-area":[["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"}]],"chart-column":[["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"M18 17V9"}],["path",{"d":"M13 17V5"}],["path",{"d":"M8 17v-3"}]],"chart-line":[["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}],["path",{"d":"m19 9-5 5-4-4-3 3"}]],"chart-pie":[["path",{"d":"M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"}],["path",{"d":"M21.21 15.89A10 10 0 1 1 8 2.83"}]],"chart-scatter":[["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}],["circle",{"cx":"18.5","cy":"5.5","r":".5","fill":"currentColor"}],["circle",{"cx":"11.5","cy":"11.5","r":".5","fill":"currentColor"}],["circle",{"cx":"7.5","cy":"16.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"14.5","r":".5","fill":"currentColor"}],["path",{"d":"M3 3v16a2 2 0 0 0 2 2h16"}]],"check":[["path",{"d":"M20 6 9 17l-5-5"}]],"chevron-down":[["path",{"d":"m6 9 6 6 6-6"}]],"chevron-left":[["path",{"d":"m15 18-6-6 6-6"}]],"chevron-right":[["path",{"d":"m9 18 6-6-6-6"}]],"chevron-up":[["path",{"d":"m18 15-6-6-6 6"}]],"chevrons-down":[["path",{"d":"m7 6 5 5 5-5"}],["path",{"d":"m7 13 5 5 5-5"}]],"chevrons-up":[["path",{"d":"m17 11-5-5-5 5"}],["path",{"d":"m17 18-5-5-5 5"}]],"chevrons-up-down":[["path",{"d":"m7 15 5 5 5-5"}],["path",{"d":"m7 9 5-5 5 5"}]],"circle":[["circle",{"cx":"12","cy":"12","r":"10"}]],"circle-alert":[["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"12","x2":"12","y1":"8","y2":"12"}],["line",{"x1":"12","x2":"12.01","y1":"16","y2":"16"}]],"circle-check":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16 9-5.5 5.5L8 12"}]],"circle-dollar-sign":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 18V6"}]],"circle-dot":[["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"12","r":"10"}]],"circle-play":[["path",{"d":"M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"}],["circle",{"cx":"12","cy":"12","r":"10"}]],"circle-plus":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M8 12h8"}],["path",{"d":"M12 8v8"}]],"circle-question-mark":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],"circle-slash":[["circle",{"cx":"12","cy":"12","r":"10"}],["line",{"x1":"9","x2":"15","y1":"15","y2":"9"}]],"circle-user":[["circle",{"cx":"12","cy":"12","r":"10"}],["circle",{"cx":"12","cy":"10","r":"3"}],["path",{"d":"M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"}]],"circle-x":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"m9 9 6 6"}]],"clipboard-check":[["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"m9 14 2 2 4-4"}]],"clipboard-list":[["rect",{"width":"8","height":"4","x":"8","y":"2","rx":"1","ry":"1"}],["path",{"d":"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}],["path",{"d":"M12 11h4"}],["path",{"d":"M12 16h4"}],["path",{"d":"M8 11h.01"}],["path",{"d":"M8 16h.01"}]],"clock":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 6v6l4 2"}]],"cloud":[["path",{"d":"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"}]],"cloud-off":[["path",{"d":"M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057"}],["path",{"d":"M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78"}],["path",{"d":"m2 2 20 20"}]],"cloud-upload":[["path",{"d":"M12 13v8"}],["path",{"d":"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"}],["path",{"d":"m8 17 4-4 4 4"}]],"code-xml":[["path",{"d":"m18 16 4-4-4-4"}],["path",{"d":"m6 8-4 4 4 4"}],["path",{"d":"m14.5 4-5 16"}]],"columns-3":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],"command":[["path",{"d":"M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"}]],"compass":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"}]],"cookie":[["path",{"d":"M11 17h.01"}],["path",{"d":"M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2"}],["path",{"d":"M12 12h.01"}],["path",{"d":"M16 16h.01"}],["path",{"d":"M16 3h.01"}],["path",{"d":"M21 4h.01"}],["path",{"d":"M21 8h.01"}],["path",{"d":"M7 14h.01"}],["path",{"d":"M9 8h.01"}]],"copy":[["rect",{"width":"14","height":"14","x":"8","y":"8","rx":"2","ry":"2"}],["path",{"d":"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]],"credit-card":[["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"2"}],["line",{"x1":"2","x2":"22","y1":"10","y2":"10"}],["path",{"d":"M6 14h2"}]],"database":[["ellipse",{"cx":"12","cy":"5","rx":"9","ry":"3"}],["path",{"d":"M3 5V19A9 3 0 0 0 21 19V5"}],["path",{"d":"M3 12A9 3 0 0 0 21 12"}]],"dollar-sign":[["line",{"x1":"12","x2":"12","y1":"2","y2":"22"}],["path",{"d":"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"}]],"dot":[["circle",{"cx":"12","cy":"12","r":"1"}]],"download":[["path",{"d":"M12 15V3"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["path",{"d":"m7 10 5 5 5-5"}]],"ellipsis":[["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"19","cy":"12","r":"1"}],["circle",{"cx":"5","cy":"12","r":"1"}]],"ellipsis-vertical":[["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"12","cy":"5","r":"1"}],["circle",{"cx":"12","cy":"19","r":"1"}]],"external-link":[["path",{"d":"M15 3h6v6"}],["path",{"d":"M10 14 21 3"}],["path",{"d":"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]],"eye":[["path",{"d":"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["circle",{"cx":"12","cy":"12","r":"3"}]],"eye-off":[["path",{"d":"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"}],["path",{"d":"M14.084 14.158a3 3 0 0 1-4.242-4.242"}],["path",{"d":"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"}],["path",{"d":"m2 2 20 20"}]],"file":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}]],"file-code":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 12.5 8 15l2 2.5"}],["path",{"d":"m14 12.5 2 2.5-2 2.5"}]],"file-down":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 18v-6"}],["path",{"d":"m9 15 3 3 3-3"}]],"file-image":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"10","cy":"12","r":"2"}],["path",{"d":"m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"}]],"file-pen":[["path",{"d":"M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"}]],"file-pen-line":[["path",{"d":"M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"}],["path",{"d":"M14.487 7.858A1 1 0 0 1 14 7V2"}],["path",{"d":"M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"}],["path",{"d":"M8 18h1"}]],"file-plus":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M9 15h6"}],["path",{"d":"M12 18v-6"}]],"file-question-mark":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M12 17h.01"}],["path",{"d":"M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3"}]],"file-search":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["circle",{"cx":"11.5","cy":"14.5","r":"2.5"}],["path",{"d":"M13.3 16.3 15 18"}]],"file-spreadsheet":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M8 13h2"}],["path",{"d":"M14 13h2"}],["path",{"d":"M8 17h2"}],["path",{"d":"M14 17h2"}]],"file-text":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 9H8"}],["path",{"d":"M16 13H8"}],["path",{"d":"M16 17H8"}]],"file-up":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M12 12v6"}],["path",{"d":"m15 15-3-3-3 3"}]],"file-video-camera":[["path",{"d":"M4 12V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"m10 17.843 3.033-1.755a.64.64 0 0 1 .967.56v4.704a.65.65 0 0 1-.967.56L10 20.157"}],["rect",{"width":"7","height":"6","x":"3","y":"16","rx":"1"}]],"files":[["path",{"d":"M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"}],["path",{"d":"M16.706 2.706A2.4 2.4 0 0 0 15 2v5a1 1 0 0 0 1 1h5a2.4 2.4 0 0 0-.706-1.706z"}],["path",{"d":"M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1"}]],"film":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M7 3v18"}],["path",{"d":"M3 7.5h4"}],["path",{"d":"M3 12h18"}],["path",{"d":"M3 16.5h4"}],["path",{"d":"M17 3v18"}],["path",{"d":"M17 7.5h4"}],["path",{"d":"M17 16.5h4"}]],"fingerprint-pattern":[["path",{"d":"M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"}],["path",{"d":"M14 13.12c0 2.38 0 6.38-1 8.88"}],["path",{"d":"M17.29 21.02c.12-.6.43-2.3.5-3.02"}],["path",{"d":"M2 12a10 10 0 0 1 18-6"}],["path",{"d":"M2 16h.01"}],["path",{"d":"M21.8 16c.2-2 .131-5.354 0-6"}],["path",{"d":"M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"}],["path",{"d":"M8.65 22c.21-.66.45-1.32.57-2"}],["path",{"d":"M9 6.8a6 6 0 0 1 9 5.2v2"}]],"flag":[["path",{"d":"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"}]],"folder":[["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],"folder-archive":[["circle",{"cx":"15","cy":"19","r":"2"}],["path",{"d":"M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"}],["path",{"d":"M15 11v-1"}],["path",{"d":"M15 17v-2"}]],"folder-kanban":[["path",{"d":"M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"}],["path",{"d":"M8 10v4"}],["path",{"d":"M12 10v2"}],["path",{"d":"M16 10v6"}]],"folder-open":[["path",{"d":"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}]],"folder-plus":[["path",{"d":"M12 10v6"}],["path",{"d":"M9 13h6"}],["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],"folder-tree":[["path",{"d":"M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"}],["path",{"d":"M3 5a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 3v13a2 2 0 0 0 2 2h3"}]],"funnel":[["path",{"d":"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"}]],"gift":[["path",{"d":"M12 7v14"}],["path",{"d":"M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"}],["path",{"d":"M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"}],["rect",{"x":"3","y":"7","width":"18","height":"4","rx":"1"}]],"git-compare":[["circle",{"cx":"18","cy":"18","r":"3"}],["circle",{"cx":"6","cy":"6","r":"3"}],["path",{"d":"M13 6h3a2 2 0 0 1 2 2v7"}],["path",{"d":"M11 18H8a2 2 0 0 1-2-2V9"}]],"globe":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"}],["path",{"d":"M2 12h20"}]],"globe-lock":[["path",{"d":"M15.686 15A14.5 14.5 0 0 1 12 22a14.5 14.5 0 0 1 0-20 10 10 0 1 0 9.542 13"}],["path",{"d":"M2 12h8.5"}],["path",{"d":"M20 6V4a2 2 0 1 0-4 0v2"}],["rect",{"width":"8","height":"5","x":"14","y":"6","rx":"1"}]],"graduation-cap":[["path",{"d":"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"}],["path",{"d":"M22 10v6"}],["path",{"d":"M6 12.5V16a6 3 0 0 0 12 0v-3.5"}]],"grid-3x3":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}],["path",{"d":"M9 3v18"}],["path",{"d":"M15 3v18"}]],"grip-vertical":[["circle",{"cx":"9","cy":"12","r":"1"}],["circle",{"cx":"9","cy":"5","r":"1"}],["circle",{"cx":"9","cy":"19","r":"1"}],["circle",{"cx":"15","cy":"12","r":"1"}],["circle",{"cx":"15","cy":"5","r":"1"}],["circle",{"cx":"15","cy":"19","r":"1"}]],"group":[["path",{"d":"M3 7V5c0-1.1.9-2 2-2h2"}],["path",{"d":"M17 3h2c1.1 0 2 .9 2 2v2"}],["path",{"d":"M21 17v2c0 1.1-.9 2-2 2h-2"}],["path",{"d":"M7 21H5c-1.1 0-2-.9-2-2v-2"}],["rect",{"width":"7","height":"5","x":"7","y":"7","rx":"1"}],["rect",{"width":"7","height":"5","x":"10","y":"12","rx":"1"}]],"handshake":[["path",{"d":"m11 17 2 2a1 1 0 1 0 3-3"}],["path",{"d":"m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"}],["path",{"d":"m21 3 1 11h-2"}],["path",{"d":"M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"}],["path",{"d":"M3 4h8"}]],"hash":[["line",{"x1":"4","x2":"20","y1":"9","y2":"9"}],["line",{"x1":"4","x2":"20","y1":"15","y2":"15"}],["line",{"x1":"10","x2":"8","y1":"3","y2":"21"}],["line",{"x1":"16","x2":"14","y1":"3","y2":"21"}]],"heading":[["path",{"d":"M6 12h12"}],["path",{"d":"M6 20V4"}],["path",{"d":"M18 20V4"}]],"headphones":[["path",{"d":"M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"}]],"heart":[["path",{"d":"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"}]],"heart-handshake":[["path",{"d":"M19.414 14.414C21 12.828 22 11.5 22 9.5a5.5 5.5 0 0 0-9.591-3.676.6.6 0 0 1-.818.001A5.5 5.5 0 0 0 2 9.5c0 2.3 1.5 4 3 5.5l5.535 5.362a2 2 0 0 0 2.879.052 2.12 2.12 0 0 0-.004-3 2.124 2.124 0 1 0 3-3 2.124 2.124 0 0 0 3.004 0 2 2 0 0 0 0-2.828l-1.881-1.882a2.41 2.41 0 0 0-3.409 0l-1.71 1.71a2 2 0 0 1-2.828 0 2 2 0 0 1 0-2.828l2.823-2.762"}]],"hourglass":[["path",{"d":"M5 22h14"}],["path",{"d":"M5 2h14"}],["path",{"d":"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"}],["path",{"d":"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"}]],"house":[["path",{"d":"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["path",{"d":"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}]],"id-card":[["path",{"d":"M13 19a4 4 0 00-8 0"}],["path",{"d":"M16 10h2"}],["path",{"d":"M16 14h2"}],["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"x":"2","y":"5","width":"20","height":"14","rx":"2"}]],"image":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2","ry":"2"}],["circle",{"cx":"9","cy":"9","r":"2"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]],"image-off":[["line",{"x1":"2","x2":"22","y1":"2","y2":"22"}],["path",{"d":"M10.41 10.41a2 2 0 1 1-2.83-2.83"}],["line",{"x1":"13.5","x2":"6","y1":"13.5","y2":"21"}],["line",{"x1":"18","x2":"21","y1":"12","y2":"15"}],["path",{"d":"M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"}],["path",{"d":"M21 15V5a2 2 0 0 0-2-2H9"}]],"image-plus":[["path",{"d":"M16 5h6"}],["path",{"d":"M19 2v6"}],["path",{"d":"M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}],["circle",{"cx":"9","cy":"9","r":"2"}]],"images":[["path",{"d":"m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"}],["path",{"d":"M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"}],["circle",{"cx":"13","cy":"7","r":"1","fill":"currentColor"}],["rect",{"x":"8","y":"2","width":"14","height":"14","rx":"2"}]],"inbox":[["polyline",{"points":"22 12 16 12 14 15 10 15 8 12 2 12"}],["path",{"d":"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"}]],"info":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 16v-4"}],["path",{"d":"M12 8h.01"}]],"italic":[["line",{"x1":"19","x2":"10","y1":"4","y2":"4"}],["line",{"x1":"14","x2":"5","y1":"20","y2":"20"}],["line",{"x1":"15","x2":"9","y1":"4","y2":"20"}]],"kanban":[["path",{"d":"M5 3v14"}],["path",{"d":"M12 3v8"}],["path",{"d":"M19 3v18"}]],"key":[["path",{"d":"m2 21 9.6-9.6"}],["path",{"d":"m7.5 15.5 2.3 2.3a1 1 0 0 1 0 1.4l-2.1 2.1a1 1 0 0 1-1.4 0L4 19"}],["circle",{"cx":"15.5","cy":"7.5","r":"5.5"}]],"key-round":[["path",{"d":"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"}],["circle",{"cx":"16.5","cy":"7.5","r":".5","fill":"currentColor"}]],"lamp-desk":[["path",{"d":"M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z"}],["path",{"d":"m14.207 4.793-3.414 3.414"}],["path",{"d":"M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"}],["path",{"d":"m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18"}]],"landmark":[["path",{"d":"M10 18v-7"}],["path",{"d":"M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"}],["path",{"d":"M14 18v-7"}],["path",{"d":"M18 18v-7"}],["path",{"d":"M3 22h18"}],["path",{"d":"M6 18v-7"}]],"languages":[["path",{"d":"m5 8 6 6"}],["path",{"d":"m4 14 6-6 2-3"}],["path",{"d":"M2 5h12"}],["path",{"d":"M7 2h1"}],["path",{"d":"m22 22-5-10-5 10"}],["path",{"d":"M14 18h6"}]],"laptop":[["path",{"d":"M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z"}],["path",{"d":"M20.054 15.987H3.946"}]],"layers":[["path",{"d":"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{"d":"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{"d":"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]],"layout-dashboard":[["rect",{"width":"7","height":"9","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"5","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"9","x":"14","y":"12","rx":"1"}],["rect",{"width":"7","height":"5","x":"3","y":"16","rx":"1"}]],"layout-grid":[["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"14","y":"14","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}]],"layout-list":[["rect",{"width":"7","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"7","height":"7","x":"3","y":"14","rx":"1"}],["path",{"d":"M14 4h7"}],["path",{"d":"M14 9h7"}],["path",{"d":"M14 15h7"}],["path",{"d":"M14 20h7"}]],"layout-template":[["rect",{"width":"18","height":"7","x":"3","y":"3","rx":"1"}],["rect",{"width":"9","height":"7","x":"3","y":"14","rx":"1"}],["rect",{"width":"5","height":"7","x":"16","y":"14","rx":"1"}]],"life-buoy":[["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"m4.93 4.93 4.24 4.24"}],["path",{"d":"m14.83 9.17 4.24-4.24"}],["path",{"d":"m14.83 14.83 4.24 4.24"}],["path",{"d":"m9.17 14.83-4.24 4.24"}],["circle",{"cx":"12","cy":"12","r":"4"}]],"lightbulb":[["path",{"d":"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"}],["path",{"d":"M9 18h6"}],["path",{"d":"M10 22h4"}]],"link":[["path",{"d":"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["path",{"d":"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]],"link-2":[["path",{"d":"M9 17H7A5 5 0 0 1 7 7h2"}],["path",{"d":"M15 7h2a5 5 0 1 1 0 10h-2"}],["line",{"x1":"8","x2":"16","y1":"12","y2":"12"}]],"list":[["path",{"d":"M3 5h.01"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M3 19h.01"}],["path",{"d":"M8 5h13"}],["path",{"d":"M8 12h13"}],["path",{"d":"M8 19h13"}]],"list-checks":[["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["path",{"d":"m3 7 2 2 4-4"}]],"list-filter":[["path",{"d":"M2 5h20"}],["path",{"d":"M6 12h12"}],["path",{"d":"M9 19h6"}]],"list-ordered":[["path",{"d":"M11 5h10"}],["path",{"d":"M11 12h10"}],["path",{"d":"M11 19h10"}],["path",{"d":"M4 4h1v5"}],["path",{"d":"M4 9h2"}],["path",{"d":"M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"}]],"list-todo":[["path",{"d":"M13 5h8"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"m3 17 2 2 4-4"}],["rect",{"x":"3","y":"4","width":"6","height":"6","rx":"1"}]],"list-tree":[["path",{"d":"M8 5h13"}],["path",{"d":"M13 12h8"}],["path",{"d":"M13 19h8"}],["path",{"d":"M3 10a2 2 0 0 0 2 2h3"}],["path",{"d":"M3 5v12a2 2 0 0 0 2 2h3"}]],"loader":[["path",{"d":"M12 2v4"}],["path",{"d":"m16.2 7.8 2.9-2.9"}],["path",{"d":"M18 12h4"}],["path",{"d":"m16.2 16.2 2.9 2.9"}],["path",{"d":"M12 18v4"}],["path",{"d":"m4.9 19.1 2.9-2.9"}],["path",{"d":"M2 12h4"}],["path",{"d":"m4.9 4.9 2.9 2.9"}]],"loader-circle":[["path",{"d":"M21 12a9 9 0 1 1-6.219-8.56"}]],"lock":[["rect",{"width":"18","height":"11","x":"3","y":"11","rx":"2","ry":"2"}],["path",{"d":"M7 11V7a5 5 0 0 1 10 0v4"}]],"lock-keyhole":[["circle",{"cx":"12","cy":"16","r":"1"}],["rect",{"x":"3","y":"10","width":"18","height":"12","rx":"2"}],["path",{"d":"M7 10V7a5 5 0 0 1 10 0v3"}]],"log-in":[["path",{"d":"m10 17 5-5-5-5"}],["path",{"d":"M15 12H3"}],["path",{"d":"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"}]],"log-out":[["path",{"d":"m16 17 5-5-5-5"}],["path",{"d":"M21 12H9"}],["path",{"d":"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"}]],"mail":[["path",{"d":"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"}],["rect",{"x":"2","y":"4","width":"20","height":"16","rx":"2"}]],"mail-check":[["path",{"d":"M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"}],["path",{"d":"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"}],["path",{"d":"m16 19 2 2 4-4"}]],"mail-open":[["path",{"d":"M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"}],["path",{"d":"m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"}]],"map-pin":[["path",{"d":"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"}],["circle",{"cx":"12","cy":"10","r":"3"}]],"megaphone":[["path",{"d":"M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"}],["path",{"d":"M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14"}],["path",{"d":"M8 6v8"}]],"menu":[["path",{"d":"M4 5h16"}],["path",{"d":"M4 12h16"}],["path",{"d":"M4 19h16"}]],"message-circle":[["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}]],"message-circle-question-mark":[["path",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],"message-square":[["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}]],"message-square-more":[["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M12 11h.01"}],["path",{"d":"M16 11h.01"}],["path",{"d":"M8 11h.01"}]],"message-square-quote":[["path",{"d":"M14 14a2 2 0 0 0 2-2V8h-2"}],["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M8 14a2 2 0 0 0 2-2V8H8"}]],"message-square-text":[["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M7 11h10"}],["path",{"d":"M7 15h6"}],["path",{"d":"M7 7h8"}]],"messages-square":[["path",{"d":"M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"}],["path",{"d":"M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"}]],"minus":[["path",{"d":"M5 12h14"}]],"monitor":[["rect",{"width":"20","height":"14","x":"2","y":"3","rx":"2"}],["line",{"x1":"8","x2":"16","y1":"21","y2":"21"}],["line",{"x1":"12","x2":"12","y1":"17","y2":"21"}]],"monitor-smartphone":[["path",{"d":"M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"}],["path",{"d":"M10 19v-3.96 3.15"}],["path",{"d":"M7 19h5"}],["rect",{"width":"6","height":"10","x":"16","y":"12","rx":"2"}]],"moon":[["path",{"d":"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"}]],"mountain":[["path",{"d":"m8 3 4 8 5-5 5 15H2L8 3z"}]],"mouse-pointer-click":[["path",{"d":"M14 4.1 12 6"}],["path",{"d":"m5.1 8-2.9-.8"}],["path",{"d":"m6 12-1.9 2"}],["path",{"d":"M7.2 2.2 8 5.1"}],["path",{"d":"M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"}]],"move-right":[["path",{"d":"M18 8L22 12L18 16"}],["path",{"d":"M2 12H22"}]],"music":[["path",{"d":"M9 18V5l12-2v13"}],["circle",{"cx":"6","cy":"18","r":"3"}],["circle",{"cx":"18","cy":"16","r":"3"}]],"newspaper":[["path",{"d":"M15 18h-5"}],["path",{"d":"M18 14h-8"}],["path",{"d":"M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"}],["rect",{"width":"8","height":"4","x":"10","y":"6","rx":"1"}]],"orbit":[["path",{"d":"M20.341 6.484A10 10 0 0 1 10.266 21.85"}],["path",{"d":"M3.659 17.516A10 10 0 0 1 13.74 2.152"}],["circle",{"cx":"12","cy":"12","r":"3"}],["circle",{"cx":"19","cy":"5","r":"2"}],["circle",{"cx":"5","cy":"19","r":"2"}]],"package":[["path",{"d":"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}],["path",{"d":"M12 22V12"}],["polyline",{"points":"3.29 7 12 12 20.71 7"}],["path",{"d":"m7.5 4.27 9 5.15"}]],"package-check":[["path",{"d":"M12 22V12"}],["path",{"d":"m16 17 2 2 4-4"}],["path",{"d":"M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753"}],["path",{"d":"M3.29 7 12 12l8.71-5"}],["path",{"d":"m7.5 4.27 8.997 5.148"}]],"package-open":[["path",{"d":"M12 22v-9"}],["path",{"d":"M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"}],["path",{"d":"M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"}],["path",{"d":"M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"}]],"palette":[["path",{"d":"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"}],["circle",{"cx":"13.5","cy":"6.5","r":".5","fill":"currentColor"}],["circle",{"cx":"17.5","cy":"10.5","r":".5","fill":"currentColor"}],["circle",{"cx":"6.5","cy":"12.5","r":".5","fill":"currentColor"}],["circle",{"cx":"8.5","cy":"7.5","r":".5","fill":"currentColor"}]],"panel-bottom":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 15h18"}]],"panel-left":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}]],"panel-left-close":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}],["path",{"d":"m16 15-3-3 3-3"}]],"panel-top":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}]],"paperclip":[["path",{"d":"m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"}]],"pause":[["rect",{"x":"14","y":"3","width":"5","height":"18","rx":"1"}],["rect",{"x":"5","y":"3","width":"5","height":"18","rx":"1"}]],"pencil":[["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}],["path",{"d":"m15 5 4 4"}]],"pencil-line":[["path",{"d":"M13 21h8"}],["path",{"d":"m15 5 4 4"}],["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}]],"percent":[["line",{"x1":"19","x2":"5","y1":"5","y2":"19"}],["circle",{"cx":"6.5","cy":"6.5","r":"2.5"}],["circle",{"cx":"17.5","cy":"17.5","r":"2.5"}]],"phone":[["path",{"d":"M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"}]],"pilcrow":[["path",{"d":"M13 4v16"}],["path",{"d":"M17 4v16"}],["path",{"d":"M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}]],"pin":[["path",{"d":"M12 17v5"}],["path",{"d":"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"}]],"play":[["path",{"d":"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"}]],"plug":[["path",{"d":"M12 22v-5"}],["path",{"d":"M15 8V2"}],["path",{"d":"M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"}],["path",{"d":"M9 8V2"}]],"plug-zap":[["path",{"d":"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"}],["path",{"d":"m2 22 3-3"}],["path",{"d":"M7.5 13.5 10 11"}],["path",{"d":"M10.5 16.5 13 14"}],["path",{"d":"m18 3-4 4h6l-4 4"}]],"plus":[["path",{"d":"M5 12h14"}],["path",{"d":"M12 5v14"}]],"presentation":[["path",{"d":"M2 3h20"}],["path",{"d":"M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"}],["path",{"d":"m7 21 5-5 5 5"}]],"printer":[["path",{"d":"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"}],["path",{"d":"M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"}],["rect",{"x":"6","y":"14","width":"12","height":"8","rx":"1"}]],"puzzle":[["path",{"d":"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}]],"qr-code":[["rect",{"width":"5","height":"5","x":"3","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"16","y":"3","rx":"1"}],["rect",{"width":"5","height":"5","x":"3","y":"16","rx":"1"}],["path",{"d":"M21 16h-3a2 2 0 0 0-2 2v3"}],["path",{"d":"M21 21v.01"}],["path",{"d":"M12 7v3a2 2 0 0 1-2 2H7"}],["path",{"d":"M3 12h.01"}],["path",{"d":"M12 3h.01"}],["path",{"d":"M12 16v.01"}],["path",{"d":"M16 12h1"}],["path",{"d":"M21 12v.01"}],["path",{"d":"M12 21v-1"}]],"quote":[["path",{"d":"M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}],["path",{"d":"M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}]],"receipt-text":[["path",{"d":"M13 16H8"}],["path",{"d":"M14 8H8"}],["path",{"d":"M16 12H8"}],["path",{"d":"M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"}]],"redo-2":[["path",{"d":"m15 14 5-5-5-5"}],["path",{"d":"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]],"refresh-cw":[["path",{"d":"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}],["path",{"d":"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{"d":"M8 16H3v5"}]],"rocket":[["path",{"d":"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"}],["path",{"d":"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"}],["path",{"d":"M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"}],["path",{"d":"M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"}]],"rotate-ccw":[["path",{"d":"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}],["path",{"d":"M3 3v5h5"}]],"rotate-cw":[["path",{"d":"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"}],["path",{"d":"M21 3v5h-5"}]],"rows-3":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],"save":[["path",{"d":"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}],["path",{"d":"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}],["path",{"d":"M7 3v4a1 1 0 0 0 1 1h7"}]],"scale":[["path",{"d":"M12 3v18"}],["path",{"d":"m19 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"}],["path",{"d":"m5 8 3 8a5 5 0 0 1-6 0zV7"}],["path",{"d":"M7 21h10"}]],"scan-face":[["path",{"d":"M3 7V5a2 2 0 0 1 2-2h2"}],["path",{"d":"M17 3h2a2 2 0 0 1 2 2v2"}],["path",{"d":"M21 17v2a2 2 0 0 1-2 2h-2"}],["path",{"d":"M7 21H5a2 2 0 0 1-2-2v-2"}],["path",{"d":"M8 14s1.5 2 4 2 4-2 4-2"}],["path",{"d":"M9 9h.01"}],["path",{"d":"M15 9h.01"}]],"scroll-text":[["path",{"d":"M15 12h-5"}],["path",{"d":"M15 8h-5"}],["path",{"d":"M19 17V5a2 2 0 0 0-2-2H4"}],["path",{"d":"M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"}]],"search":[["path",{"d":"m21 21-4.34-4.34"}],["circle",{"cx":"11","cy":"11","r":"8"}]],"search-x":[["path",{"d":"m13.5 8.5-5 5"}],["path",{"d":"m8.5 8.5 5 5"}],["circle",{"cx":"11","cy":"11","r":"8"}],["path",{"d":"m21 21-4.3-4.3"}]],"send":[["path",{"d":"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"}],["path",{"d":"m21.854 2.147-10.94 10.939"}]],"settings":[["path",{"d":"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}],["circle",{"cx":"12","cy":"12","r":"3"}]],"settings-2":[["path",{"d":"M14 17H5"}],["path",{"d":"M19 7h-9"}],["circle",{"cx":"17","cy":"17","r":"3"}],["circle",{"cx":"7","cy":"7","r":"3"}]],"share":[["path",{"d":"M12 2v13"}],["path",{"d":"m16 6-4-4-4 4"}],["path",{"d":"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"}]],"share-2":[["circle",{"cx":"18","cy":"5","r":"3"}],["circle",{"cx":"6","cy":"12","r":"3"}],["circle",{"cx":"18","cy":"19","r":"3"}],["line",{"x1":"8.59","x2":"15.42","y1":"13.51","y2":"17.49"}],["line",{"x1":"15.41","x2":"8.59","y1":"6.51","y2":"10.49"}]],"shield":[["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}]],"shield-alert":[["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"M12 8v4"}],["path",{"d":"M12 16h.01"}]],"shield-ban":[["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m4.243 5.21 14.39 12.472"}]],"shield-check":[["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m9 12 2 2 4-4"}]],"shield-x":[["path",{"d":"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{"d":"m14.5 9.5-5 5"}],["path",{"d":"m9.5 9.5 5 5"}]],"shopping-bag":[["path",{"d":"M16 10a4 4 0 0 1-8 0"}],["path",{"d":"M3.103 6.034h17.794"}],["path",{"d":"M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"}]],"shopping-cart":[["path",{"d":"m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18"}],["path",{"d":"M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25"}],["circle",{"cx":"18","cy":"20","r":"2"}],["circle",{"cx":"8","cy":"20","r":"2"}]],"sliders-horizontal":[["path",{"d":"M10 5H3"}],["path",{"d":"M12 19H3"}],["path",{"d":"M14 3v4"}],["path",{"d":"M16 17v4"}],["path",{"d":"M21 12h-9"}],["path",{"d":"M21 19h-5"}],["path",{"d":"M21 5h-7"}],["path",{"d":"M8 10v4"}],["path",{"d":"M8 12H3"}]],"sliders-vertical":[["path",{"d":"M10 8h4"}],["path",{"d":"M12 21v-9"}],["path",{"d":"M12 8V3"}],["path",{"d":"M17 16h4"}],["path",{"d":"M19 12V3"}],["path",{"d":"M19 21v-5"}],["path",{"d":"M3 14h4"}],["path",{"d":"M5 10V3"}],["path",{"d":"M5 21v-7"}]],"smartphone":[["rect",{"width":"14","height":"20","x":"5","y":"2","rx":"2","ry":"2"}],["path",{"d":"M12 18h.01"}]],"sparkles":[["path",{"d":"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"}],["path",{"d":"M20 2v4"}],["path",{"d":"M22 4h-4"}],["circle",{"cx":"4","cy":"20","r":"2"}]],"square":[["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}]],"square-pen":[["path",{"d":"M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"}],["path",{"d":"M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"}]],"star":[["path",{"d":"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"}]],"star-half":[["path",{"d":"M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"}]],"store":[["path",{"d":"M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"}],["path",{"d":"M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"}],["path",{"d":"M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"}]],"sun":[["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M12 2v2"}],["path",{"d":"M12 20v2"}],["path",{"d":"m4.93 4.93 1.41 1.41"}],["path",{"d":"m17.66 17.66 1.41 1.41"}],["path",{"d":"M2 12h2"}],["path",{"d":"M20 12h2"}],["path",{"d":"m6.34 17.66-1.41 1.41"}],["path",{"d":"m19.07 4.93-1.41 1.41"}]],"table":[["path",{"d":"M12 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}],["path",{"d":"M3 15h18"}]],"table-properties":[["path",{"d":"M15 3v18"}],["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],"tablet":[["rect",{"width":"16","height":"20","x":"4","y":"2","rx":"2","ry":"2"}],["line",{"x1":"12","x2":"12.01","y1":"18","y2":"18"}]],"tag":[["path",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}]],"tags":[["path",{"d":"M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"}],["path",{"d":"M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"}],["circle",{"cx":"10.5","cy":"6.5","r":".5","fill":"currentColor"}]],"terminal":[["path",{"d":"M12 19h8"}],["path",{"d":"m4 17 6-6-6-6"}]],"text-align-center":[["path",{"d":"M21 5H3"}],["path",{"d":"M17 12H7"}],["path",{"d":"M19 19H5"}]],"text-align-end":[["path",{"d":"M21 5H3"}],["path",{"d":"M21 12H9"}],["path",{"d":"M21 19H7"}]],"text-align-start":[["path",{"d":"M21 5H3"}],["path",{"d":"M15 12H3"}],["path",{"d":"M17 19H3"}]],"text-cursor-input":[["path",{"d":"M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6"}],["path",{"d":"M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"}],["path",{"d":"M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"}],["path",{"d":"M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1"}],["path",{"d":"M9 6v12"}]],"thumbs-down":[["path",{"d":"M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"}],["path",{"d":"M17 14V2"}]],"thumbs-up":[["path",{"d":"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"}],["path",{"d":"M7 10v12"}]],"ticket-percent":[["path",{"d":"M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"}],["path",{"d":"M9 9h.01"}],["path",{"d":"m15 9-6 6"}],["path",{"d":"M15 15h.01"}]],"timer":[["line",{"x1":"10","x2":"14","y1":"2","y2":"2"}],["line",{"x1":"12","x2":"15","y1":"14","y2":"11"}],["circle",{"cx":"12","cy":"14","r":"8"}]],"toggle-left":[["circle",{"cx":"9","cy":"12","r":"3"}],["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"7"}]],"trash":[["path",{"d":"M10 11v6"}],["path",{"d":"M14 11v6"}],["path",{"d":"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"}],["path",{"d":"M3 6h18"}],["path",{"d":"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}]],"trees":[["path",{"d":"M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"}],["path",{"d":"M7 16v6"}],["path",{"d":"M13 19v3"}],["path",{"d":"M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"}]],"trending-down":[["path",{"d":"M16 17h6v-6"}],["path",{"d":"m22 17-8.5-8.5-5 5L2 7"}]],"trending-up":[["path",{"d":"M16 7h6v6"}],["path",{"d":"m22 7-8.5 8.5-5-5L2 17"}]],"triangle-alert":[["path",{"d":"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}],["path",{"d":"M12 9v4"}],["path",{"d":"M12 17h.01"}]],"truck":[["path",{"d":"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}],["path",{"d":"M15 18H9"}],["path",{"d":"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"}],["circle",{"cx":"17","cy":"18","r":"2"}],["circle",{"cx":"7","cy":"18","r":"2"}]],"type":[["path",{"d":"M12 4v16"}],["path",{"d":"M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"}],["path",{"d":"M9 20h6"}]],"undo-2":[["path",{"d":"M9 14 4 9l5-5"}],["path",{"d":"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]],"upload":[["path",{"d":"M12 3v12"}],["path",{"d":"m17 8-5-5-5 5"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}]],"user":[["path",{"d":"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}],["circle",{"cx":"12","cy":"7","r":"4"}]],"user-check":[["path",{"d":"m16 11 2 2 4-4"}],["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}]],"user-cog":[["path",{"d":"M10 15H6a4 4 0 0 0-4 4v2"}],["path",{"d":"m14.305 16.53.923-.382"}],["path",{"d":"m15.228 13.852-.923-.383"}],["path",{"d":"m16.852 12.228-.383-.923"}],["path",{"d":"m16.852 17.772-.383.924"}],["path",{"d":"m19.148 12.228.383-.923"}],["path",{"d":"m19.53 18.696-.382-.924"}],["path",{"d":"m20.772 13.852.924-.383"}],["path",{"d":"m20.772 16.148.924.383"}],["circle",{"cx":"18","cy":"15","r":"3"}],["circle",{"cx":"9","cy":"7","r":"4"}]],"user-pen":[["path",{"d":"M11.5 15H7a4 4 0 0 0-4 4v2"}],["path",{"d":"M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"}],["circle",{"cx":"10","cy":"7","r":"4"}]],"user-plus":[["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"19","x2":"19","y1":"8","y2":"14"}],["line",{"x1":"22","x2":"16","y1":"11","y2":"11"}]],"user-round-check":[["path",{"d":"M2 21a8 8 0 0 1 13.292-6"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"m16 19 2 2 4-4"}]],"user-x":[["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["circle",{"cx":"9","cy":"7","r":"4"}],["line",{"x1":"17","x2":"22","y1":"8","y2":"13"}],["line",{"x1":"22","x2":"17","y1":"8","y2":"13"}]],"users":[["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["path",{"d":"M16 3.128a4 4 0 0 1 0 7.744"}],["path",{"d":"M22 21v-2a4 4 0 0 0-3-3.87"}],["circle",{"cx":"9","cy":"7","r":"4"}]],"users-round":[["path",{"d":"M18 21a8 8 0 0 0-16 0"}],["circle",{"cx":"10","cy":"8","r":"5"}],["path",{"d":"M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"}]],"video":[["path",{"d":"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"}],["rect",{"x":"2","y":"6","width":"14","height":"12","rx":"2"}]],"wallet":[["path",{"d":"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"}],["path",{"d":"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"}]],"wand-sparkles":[["path",{"d":"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"}],["path",{"d":"m14 7 3 3"}],["path",{"d":"M5 6v4"}],["path",{"d":"M19 14v4"}],["path",{"d":"M10 2v2"}],["path",{"d":"M7 8H3"}],["path",{"d":"M21 16h-4"}],["path",{"d":"M11 3H9"}]],"webhook":[["path",{"d":"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"}],["path",{"d":"m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"}],["path",{"d":"m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"}]],"wrench":[["path",{"d":"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"}]],"x":[["path",{"d":"M18 6 6 18"}],["path",{"d":"m6 6 12 12"}]],"zap":[["path",{"d":"M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"}]]}}
diff --git a/xgen/specs/blocks/about.json b/xgen/specs/blocks/about.json
new file mode 100644
index 0000000..5d12506
--- /dev/null
+++ b/xgen/specs/blocks/about.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.about",
+  "name": "About the company",
+  "docs": "The culture: a strip of pictures, figures and values.",
+  "theme": "marketing",
+  "group": "company",
+  "organism": "AboutCompany",
+  "axes": {
+    "layout": [
+      "split",
+      "stacked"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "split",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "split",
+      "set": {}
+    },
+    {
+      "id": "stacked",
+      "set": {
+        "layout": "stacked"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"stat\"]",
+      "n": "@stats"
+    },
+    {
+      "sel": "[data-testid=\"value\"]",
+      "n": "@values"
+    }
+  ],
+  "data": [
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    },
+    {
+      "as": "values",
+      "collection": "values",
+      "kind": "value",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "about",
+      "title": {
+        "$": "ui.company.about.title"
+      },
+      "lead": {
+        "$": "ui.company.about.lead"
+      },
+      "stats": {
+        "$": "stats"
+      },
+      "values": {
+        "$": "values"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/aboutme.json b/xgen/specs/blocks/aboutme.json
new file mode 100644
index 0000000..345aebe
--- /dev/null
+++ b/xgen/specs/blocks/aboutme.json
@@ -0,0 +1,148 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.aboutme",
+  "name": "About me",
+  "docs": "A personal about section beside a portrait: key facts or skills.",
+  "theme": "marketing",
+  "group": "company",
+  "organism": "AboutMe",
+  "axes": {
+    "layout": [
+      "facts",
+      "skills"
+    ],
+    "mediaSide": [
+      "start",
+      "end"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "facts",
+    "mediaSide": "start",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "facts",
+      "set": {}
+    },
+    {
+      "id": "factsEnd",
+      "set": {
+        "mediaSide": "end"
+      }
+    },
+    {
+      "id": "skills",
+      "set": {
+        "layout": "skills"
+      }
+    },
+    {
+      "id": "skillsMuted",
+      "set": {
+        "layout": "skills",
+        "mediaSide": "end",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"fact\"]",
+      "n": "@profilefacts",
+      "when": {
+        "layout": "facts"
+      }
+    },
+    {
+      "sel": "[data-testid=\"fact\"]",
+      "n": 0,
+      "when": {
+        "layout": "skills"
+      }
+    },
+    {
+      "sel": "[data-testid=\"skill\"]",
+      "n": "@skills",
+      "when": {
+        "layout": "skills"
+      }
+    },
+    {
+      "sel": "[data-testid=\"skill\"]",
+      "n": 0,
+      "when": {
+        "layout": "facts"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "profilefacts",
+      "collection": "profilefacts",
+      "kind": "profilefact",
+      "record": "Spec",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value"
+      }
+    },
+    {
+      "as": "skills",
+      "collection": "skills",
+      "kind": "skill",
+      "record": "Skill",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "level": "metadata.level.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "aboutme",
+      "title": {
+        "$": "ui.company.aboutMe.title"
+      },
+      "lead": {
+        "$": "ui.company.aboutMe.lead"
+      },
+      "badge": {
+        "$": "ui.company.aboutMe.badge"
+      },
+      "facts": {
+        "$": "profilefacts"
+      },
+      "skills": {
+        "$": "skills"
+      },
+      "labels": {
+        "$": "ui.company.aboutMe"
+      },
+      "actions": {
+        "mode": "two",
+        "cta": {
+          "$": "ui.company.aboutMe.cta"
+        },
+        "href": "#/work",
+        "secondary": {
+          "$": "ui.company.aboutMe.more"
+        },
+        "secondaryHref": "#/contact"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/accordion.json b/xgen/specs/blocks/accordion.json
new file mode 100644
index 0000000..a0ca299
--- /dev/null
+++ b/xgen/specs/blocks/accordion.json
@@ -0,0 +1,126 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.accordion",
+  "name": "Feature accordion",
+  "docs": "Features as a list of disclosures, the first one open, with an optional picture.",
+  "theme": "marketing",
+  "group": "features",
+  "organism": "FeatureAccordion",
+  "axes": {
+    "expand": [
+      "first",
+      "none"
+    ],
+    "media": [
+      "none",
+      "image"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "expand": "first",
+    "media": "none",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "first",
+      "set": {}
+    },
+    {
+      "id": "closed",
+      "set": {
+        "expand": "none"
+      }
+    },
+    {
+      "id": "media",
+      "set": {
+        "media": "image"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "details",
+      "n": "@features"
+    },
+    {
+      "sel": "details[open]",
+      "n": 1,
+      "when": {
+        "expand": "first"
+      }
+    },
+    {
+      "sel": "details[open]",
+      "n": 0,
+      "when": {
+        "expand": "none"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 1,
+      "when": {
+        "media": "image"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 0,
+      "when": {
+        "media": "none"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "accordion",
+      "title": {
+        "$": "ui.vibe.accordion.title"
+      },
+      "features": {
+        "$": "features"
+      },
+      "empty": {
+        "$": "ui.empty.features"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/activity.json b/xgen/specs/blocks/activity.json
new file mode 100644
index 0000000..8da7f5e
--- /dev/null
+++ b/xgen/specs/blocks/activity.json
@@ -0,0 +1,91 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.activity",
+  "name": "Activity feed",
+  "docs": "Recent events as a timeline or a list.",
+  "theme": "dashboard",
+  "group": "widgets",
+  "organism": "ActivityFeed",
+  "axes": {
+    "layout": [
+      "timeline",
+      "list"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "timeline",
+    "density": "default",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "timeline",
+      "set": {}
+    },
+    {
+      "id": "list",
+      "set": {
+        "layout": "list"
+      }
+    },
+    {
+      "id": "compact",
+      "set": {
+        "layout": "list",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "Panel",
+    "Timeline"
+  ],
+  "data": [
+    {
+      "as": "activity",
+      "collection": "activity",
+      "kind": "event",
+      "record": "Event",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "time": "metadata.time.value|ago",
+        "tone": "metadata.tone.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "activity",
+      "title": {
+        "$": "ui.dashboard.activity.title"
+      },
+      "text": {
+        "$": "ui.dashboard.activity.text"
+      },
+      "events": {
+        "$": "activity"
+      },
+      "empty": {
+        "$": "ui.empty.activity"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/announcement.json b/xgen/specs/blocks/announcement.json
new file mode 100644
index 0000000..9783717
--- /dev/null
+++ b/xgen/specs/blocks/announcement.json
@@ -0,0 +1,130 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.announcement",
+  "name": "Announcement bar",
+  "docs": "A thin strip above the page with one sentence and a link.",
+  "theme": "promo",
+  "group": "banner",
+  "organism": "AnnouncementBar",
+  "axes": {
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "layout": [
+      "center",
+      "split"
+    ],
+    "dismiss": [
+      "show",
+      "hide"
+    ],
+    "badge": [
+      "none",
+      "show"
+    ],
+    "position": [
+      "top",
+      "bottom"
+    ]
+  },
+  "defaults": {
+    "tone": "default",
+    "layout": "center",
+    "dismiss": "hide",
+    "badge": "none",
+    "position": "top"
+  },
+  "variants": [
+    {
+      "id": "bar",
+      "set": {}
+    },
+    {
+      "id": "badge",
+      "set": {
+        "badge": "show",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "bottom",
+      "set": {
+        "position": "bottom",
+        "dismiss": "show",
+        "layout": "split"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "split",
+      "set": {
+        "layout": "split",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "dismissible",
+      "set": {
+        "dismiss": "show"
+      }
+    },
+    {
+      "id": "shop",
+      "set": {
+        "tone": "muted",
+        "dismiss": "show"
+      },
+      "props": {
+        "text": {
+          "$": "ui.cases.shop.announcement.text"
+        },
+        "cta": {
+          "$": "ui.cases.shop.announcement.cta"
+        }
+      }
+    },
+    {
+      "id": "agency",
+      "set": {
+        "layout": "split"
+      },
+      "props": {
+        "text": {
+          "$": "ui.cases.agency.announcement.text"
+        },
+        "cta": {
+          "$": "ui.cases.agency.announcement.cta"
+        }
+      }
+    }
+  ],
+  "slots": [],
+  "data": [],
+  "sample": {
+    "props": {
+      "label": {
+        "$": "ui.promo.announcement.label"
+      },
+      "text": {
+        "$": "ui.promo.announcement.text"
+      },
+      "cta": {
+        "$": "ui.promo.announcement.cta"
+      },
+      "ctaHref": "#/pricing",
+      "dismissLabel": {
+        "$": "ui.promo.announcement.dismiss"
+      },
+      "badgeLabel": {
+        "$": "ui.promo.announcement.badge"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/article.json b/xgen/specs/blocks/article.json
new file mode 100644
index 0000000..c8fec0f
--- /dev/null
+++ b/xgen/specs/blocks/article.json
@@ -0,0 +1,123 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.article",
+  "name": "Article",
+  "docs": "A long read in one reading column, or beside a table of contents that links to the sections.",
+  "theme": "content",
+  "group": "blog",
+  "organism": "ArticleBody",
+  "axes": {
+    "layout": [
+      "column",
+      "toc"
+    ],
+    "quotes": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "column",
+    "quotes": "show",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "column",
+      "set": {}
+    },
+    {
+      "id": "toc",
+      "set": {
+        "layout": "toc"
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "quotes": "hide"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "NavBlock",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"article\"] > [data-testid=\"item\"]",
+      "n": "@article"
+    },
+    {
+      "sel": "[data-testid=\"toc-link\"]",
+      "n": "@article",
+      "when": {
+        "layout": "toc"
+      }
+    },
+    {
+      "sel": "[data-testid=\"toc\"]",
+      "n": 0,
+      "when": {
+        "layout": "column"
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote\"]",
+      "n": 0,
+      "when": {
+        "quotes": "hide"
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote\"]",
+      "n": 1,
+      "when": {
+        "quotes": "show"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "article",
+      "collection": "article",
+      "kind": "section",
+      "record": "Section",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "quote": "metadata.quote.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "article",
+      "title": {
+        "$": "ui.vibe.article.title"
+      },
+      "sections": {
+        "$": "article"
+      },
+      "empty": {
+        "$": "ui.empty.sections"
+      },
+      "tocTitle": {
+        "$": "ui.vibe.article.toc"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/auth.json b/xgen/specs/blocks/auth.json
new file mode 100644
index 0000000..9ff0aa1
--- /dev/null
+++ b/xgen/specs/blocks/auth.json
@@ -0,0 +1,179 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.auth",
+  "name": "Auth card",
+  "docs": "Sign in, sign up and reset password.",
+  "theme": "account",
+  "group": "auth",
+  "fit": "card",
+  "organism": "AuthCard",
+  "axes": {
+    "mode": [
+      "signin",
+      "signup",
+      "reset",
+      "magic"
+    ],
+    "layout": [
+      "card",
+      "plain"
+    ],
+    "social": [
+      "none",
+      "show",
+      "first"
+    ]
+  },
+  "defaults": {
+    "mode": "signin",
+    "layout": "card",
+    "social": "none"
+  },
+  "variants": [
+    {
+      "id": "signin",
+      "set": {}
+    },
+    {
+      "id": "magic",
+      "set": {
+        "mode": "magic"
+      },
+      "props": {
+        "title": {
+          "$": "ui.auth.magic.title"
+        },
+        "text": {
+          "$": "ui.auth.magic.text"
+        },
+        "submit": {
+          "$": "ui.auth.magic.submit"
+        },
+        "switchText": {
+          "$": "ui.auth.magic.switchText"
+        },
+        "switchLink": {
+          "$": "ui.auth.magic.switchLink"
+        }
+      }
+    },
+    {
+      "id": "socialFirst",
+      "set": {
+        "social": "first"
+      }
+    },
+    {
+      "id": "signup",
+      "set": {
+        "mode": "signup"
+      },
+      "props": {
+        "title": {
+          "$": "ui.auth.signup.title"
+        },
+        "text": {
+          "$": "ui.auth.signup.text"
+        },
+        "submit": {
+          "$": "ui.auth.signup.submit"
+        },
+        "switchText": {
+          "$": "ui.auth.signup.switchText"
+        },
+        "switchLink": {
+          "$": "ui.auth.signup.switchLink"
+        }
+      }
+    },
+    {
+      "id": "reset",
+      "set": {
+        "mode": "reset"
+      },
+      "props": {
+        "title": {
+          "$": "ui.auth.reset.title"
+        },
+        "text": {
+          "$": "ui.auth.reset.text"
+        },
+        "submit": {
+          "$": "ui.auth.reset.submit"
+        },
+        "switchText": {
+          "$": "ui.auth.reset.switchText"
+        },
+        "switchLink": {
+          "$": "ui.auth.reset.switchLink"
+        }
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "layout": "plain"
+      }
+    },
+    {
+      "id": "social",
+      "set": {
+        "social": "show"
+      }
+    },
+    {
+      "id": "signupSocial",
+      "set": {
+        "mode": "signup",
+        "social": "show",
+        "layout": "plain"
+      },
+      "props": {
+        "title": {
+          "$": "ui.auth.signup.title"
+        },
+        "text": {
+          "$": "ui.auth.signup.text"
+        },
+        "submit": {
+          "$": "ui.auth.signup.submit"
+        },
+        "switchText": {
+          "$": "ui.auth.signup.switchText"
+        },
+        "switchLink": {
+          "$": "ui.auth.signup.switchLink"
+        }
+      }
+    }
+  ],
+  "slots": [
+    "AuthForm"
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "auth",
+      "title": {
+        "$": "ui.auth.signin.title"
+      },
+      "text": {
+        "$": "ui.auth.signin.text"
+      },
+      "submit": {
+        "$": "ui.auth.signin.submit"
+      },
+      "switchText": {
+        "$": "ui.auth.signin.switchText"
+      },
+      "switchLink": {
+        "$": "ui.auth.signin.switchLink"
+      },
+      "switchHref": "#/",
+      "labels": {
+        "$": "ui.auth.labels"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/authpage.json b/xgen/specs/blocks/authpage.json
new file mode 100644
index 0000000..7207416
--- /dev/null
+++ b/xgen/specs/blocks/authpage.json
@@ -0,0 +1,262 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.authpage",
+  "name": "Sign-in page",
+  "docs": "A whole sign-in page: the card beside a picture panel, on a tinted page, or alone; with any mode of the card.",
+  "theme": "account",
+  "group": "auth",
+  "organism": "AuthLayout",
+  "axes": {
+    "layout": [
+      "split",
+      "centered",
+      "minimal"
+    ],
+    "side": [
+      "end",
+      "start"
+    ],
+    "mode": [
+      "signin",
+      "signup",
+      "reset",
+      "magic"
+    ],
+    "social": [
+      "none",
+      "show",
+      "first"
+    ]
+  },
+  "defaults": {
+    "layout": "split",
+    "side": "end",
+    "mode": "signin",
+    "social": "none"
+  },
+  "variants": [
+    {
+      "id": "split",
+      "set": {}
+    },
+    {
+      "id": "splitStart",
+      "set": {
+        "side": "start"
+      }
+    },
+    {
+      "id": "centered",
+      "set": {
+        "layout": "centered"
+      }
+    },
+    {
+      "id": "minimal",
+      "set": {
+        "layout": "minimal"
+      }
+    },
+    {
+      "id": "signup",
+      "set": {
+        "mode": "signup"
+      },
+      "props": {
+        "title": {
+          "$": "ui.auth.signup.title"
+        },
+        "text": {
+          "$": "ui.auth.signup.text"
+        },
+        "submit": {
+          "$": "ui.auth.signup.submit"
+        },
+        "switchTo": {
+          "text": {
+            "$": "ui.auth.signup.switchText"
+          },
+          "link": {
+            "$": "ui.auth.signup.switchLink"
+          }
+        }
+      }
+    },
+    {
+      "id": "reset",
+      "set": {
+        "mode": "reset",
+        "layout": "centered"
+      },
+      "props": {
+        "title": {
+          "$": "ui.auth.reset.title"
+        },
+        "text": {
+          "$": "ui.auth.reset.text"
+        },
+        "submit": {
+          "$": "ui.auth.reset.submit"
+        },
+        "switchTo": {
+          "text": {
+            "$": "ui.auth.reset.switchText"
+          },
+          "link": {
+            "$": "ui.auth.reset.switchLink"
+          }
+        }
+      }
+    },
+    {
+      "id": "magic",
+      "set": {
+        "mode": "magic",
+        "layout": "minimal"
+      },
+      "props": {
+        "title": {
+          "$": "ui.auth.magic.title"
+        },
+        "text": {
+          "$": "ui.auth.magic.text"
+        },
+        "submit": {
+          "$": "ui.auth.magic.submit"
+        },
+        "switchTo": {
+          "text": {
+            "$": "ui.auth.magic.switchText"
+          },
+          "link": {
+            "$": "ui.auth.magic.switchLink"
+          }
+        }
+      }
+    },
+    {
+      "id": "social",
+      "set": {
+        "social": "show"
+      }
+    },
+    {
+      "id": "socialFirst",
+      "set": {
+        "social": "first",
+        "layout": "centered"
+      }
+    }
+  ],
+  "slots": [
+    "MediaFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"auth-layout\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"auth-card\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"visual\"]",
+      "n": 1,
+      "when": {
+        "layout": "split"
+      }
+    },
+    {
+      "sel": "[data-testid=\"visual\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "centered",
+          "minimal"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"social\"]",
+      "n": 1,
+      "when": {
+        "social": [
+          "show",
+          "first"
+        ],
+        "mode": [
+          "signin",
+          "signup"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"social\"]",
+      "n": 0,
+      "when": {
+        "social": "none"
+      }
+    },
+    {
+      "sel": "[data-testid=\"field\"]",
+      "n": 2,
+      "when": {
+        "mode": "signin"
+      }
+    },
+    {
+      "sel": "[data-testid=\"field\"]",
+      "n": 3,
+      "when": {
+        "mode": "signup"
+      }
+    },
+    {
+      "sel": "[data-testid=\"field\"]",
+      "n": 1,
+      "when": {
+        "mode": [
+          "reset",
+          "magic"
+        ]
+      }
+    }
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "authpage",
+      "title": {
+        "$": "ui.auth.signin.title"
+      },
+      "text": {
+        "$": "ui.auth.signin.text"
+      },
+      "submit": {
+        "$": "ui.auth.signin.submit"
+      },
+      "switchTo": {
+        "text": {
+          "$": "ui.auth.signin.switchText"
+        },
+        "link": {
+          "$": "ui.auth.signin.switchLink"
+        },
+        "href": "#/"
+      },
+      "labels": {
+        "$": "ui.auth.labels"
+      },
+      "visual": {
+        "title": {
+          "$": "ui.vibe.authpage.visualTitle"
+        },
+        "text": {
+          "$": "ui.vibe.authpage.visualText"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/beforeafter.json b/xgen/specs/blocks/beforeafter.json
new file mode 100644
index 0000000..3ca4070
--- /dev/null
+++ b/xgen/specs/blocks/beforeafter.json
@@ -0,0 +1,124 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.beforeafter",
+  "name": "Before and after",
+  "docs": "Two sides of the same points: how it was and how it is, as two cards or as rows.",
+  "theme": "marketing",
+  "group": "features",
+  "organism": "BeforeAfter",
+  "axes": {
+    "layout": [
+      "cards",
+      "rows"
+    ],
+    "icons": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "cards",
+    "icons": "show",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "cards",
+      "set": {}
+    },
+    {
+      "id": "rows",
+      "set": {
+        "layout": "rows"
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "icons": "hide"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"side\"]",
+      "n": 2,
+      "when": {
+        "layout": "cards"
+      }
+    },
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@beforeafter*2",
+      "when": {
+        "layout": "cards"
+      }
+    },
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@beforeafter",
+      "when": {
+        "layout": "rows"
+      }
+    },
+    {
+      "sel": "svg",
+      "n": 0,
+      "when": {
+        "icons": "hide"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "beforeafter",
+      "collection": "beforeafter",
+      "kind": "point",
+      "record": "Contrast",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "before": "metadata.before.value",
+        "after": "metadata.after.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "beforeafter",
+      "title": {
+        "$": "ui.vibe.beforeafter.title"
+      },
+      "points": {
+        "$": "beforeafter"
+      },
+      "empty": {
+        "$": "ui.empty.points"
+      },
+      "labels": {
+        "$": "ui.vibe.beforeafter.labels"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/bento.json b/xgen/specs/blocks/bento.json
new file mode 100644
index 0000000..8073582
--- /dev/null
+++ b/xgen/specs/blocks/bento.json
@@ -0,0 +1,113 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.bento",
+  "name": "Bento grid",
+  "docs": "Tiles of different sizes in one grid; the large tiles hold the main features.",
+  "theme": "marketing",
+  "group": "features",
+  "organism": "BentoGrid",
+  "axes": {
+    "layout": [
+      "bento",
+      "even"
+    ],
+    "media": [
+      "none",
+      "image"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "bento",
+    "media": "none",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "bento",
+      "set": {}
+    },
+    {
+      "id": "even",
+      "set": {
+        "layout": "even"
+      }
+    },
+    {
+      "id": "images",
+      "set": {
+        "media": "image"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@bento"
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 1,
+      "when": {
+        "media": "image"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 0,
+      "when": {
+        "media": "none"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "bento",
+      "collection": "bento",
+      "kind": "tile",
+      "record": "Tile",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value",
+        "size": "metadata.size.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "bento",
+      "title": {
+        "$": "ui.vibe.bento.title"
+      },
+      "tiles": {
+        "$": "bento"
+      },
+      "empty": {
+        "$": "ui.empty.tiles"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/bottomnav.json b/xgen/specs/blocks/bottomnav.json
new file mode 100644
index 0000000..0316991
--- /dev/null
+++ b/xgen/specs/blocks/bottomnav.json
@@ -0,0 +1,90 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.bottomnav",
+  "name": "Bottom tab bar",
+  "docs": "An app-style tab bar for a phone: an icon over a name, the current tab marked.",
+  "theme": "dashboard",
+  "group": "navigation",
+  "organism": "BottomNav",
+  "axes": {
+    "labels": [
+      "show",
+      "hide"
+    ],
+    "position": [
+      "static",
+      "sticky"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "labels": "show",
+    "position": "static",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "labels",
+      "set": {}
+    },
+    {
+      "id": "icons",
+      "set": {
+        "labels": "hide"
+      }
+    },
+    {
+      "id": "sticky",
+      "set": {
+        "position": "sticky"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "MenuEntry"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@tabs"
+    },
+    {
+      "sel": "[aria-current=\"page\"]",
+      "n": 1
+    }
+  ],
+  "data": [
+    {
+      "as": "tabs",
+      "collection": "tabs",
+      "kind": "tab",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "label": {
+        "$": "ui.vibe.bottom.label"
+      },
+      "tabs": {
+        "$": "tabs"
+      },
+      "current": "tab-explore"
+    }
+  }
+}
diff --git a/xgen/specs/blocks/cart.json b/xgen/specs/blocks/cart.json
new file mode 100644
index 0000000..228b443
--- /dev/null
+++ b/xgen/specs/blocks/cart.json
@@ -0,0 +1,101 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.cart",
+  "name": "Cart",
+  "docs": "The lines of a cart as a table or as cards.",
+  "theme": "commerce",
+  "group": "checkout",
+  "organism": "CartList",
+  "axes": {
+    "layout": [
+      "table",
+      "cards"
+    ],
+    "media": [
+      "image",
+      "none"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "table",
+    "media": "image",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "table",
+      "set": {}
+    },
+    {
+      "id": "cards",
+      "set": {
+        "layout": "cards"
+      }
+    },
+    {
+      "id": "tableCompact",
+      "set": {
+        "media": "none",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "cardsPlain",
+      "set": {
+        "layout": "cards",
+        "media": "none",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "CartTable",
+    "EmptyState",
+    "MediaFrame",
+    "NumberField",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "cart",
+      "collection": "cart",
+      "kind": "cartline",
+      "record": "CartLine",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "variant": "metadata.variant.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "qty": "metadata.qty.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "cart",
+      "title": {
+        "$": "ui.commerce.cart.title"
+      },
+      "lines": {
+        "$": "cart"
+      },
+      "empty": {
+        "$": "ui.empty.cart"
+      },
+      "labels": {
+        "$": "ui.commerce.cart"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/cartdrawer.json b/xgen/specs/blocks/cartdrawer.json
new file mode 100644
index 0000000..275640a
--- /dev/null
+++ b/xgen/specs/blocks/cartdrawer.json
@@ -0,0 +1,119 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.cartdrawer",
+  "name": "Cart drawer",
+  "docs": "The cart drawer in its open state, filled or empty.",
+  "theme": "commerce",
+  "group": "checkout",
+  "organism": "CartDrawer",
+  "axes": {
+    "state": [
+      "filled",
+      "empty"
+    ],
+    "media": [
+      "image",
+      "none"
+    ]
+  },
+  "defaults": {
+    "state": "filled",
+    "media": "image"
+  },
+  "variants": [
+    {
+      "id": "filled",
+      "set": {}
+    },
+    {
+      "id": "compact",
+      "set": {
+        "media": "none"
+      }
+    },
+    {
+      "id": "empty",
+      "set": {
+        "state": "empty"
+      }
+    }
+  ],
+  "slots": [
+    "DrawerLines",
+    "EmptyState"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"drawer\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@cart",
+      "when": {
+        "state": "filled"
+      }
+    },
+    {
+      "sel": "[data-testid=\"empty\"]",
+      "n": 1,
+      "when": {
+        "state": "empty"
+      }
+    },
+    {
+      "sel": "[data-testid=\"empty\"]",
+      "n": 0,
+      "when": {
+        "state": "filled"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "cart",
+      "collection": "cart",
+      "kind": "cartline",
+      "record": "CartLine",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "variant": "metadata.variant.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "qty": "metadata.qty.value"
+      }
+    },
+    {
+      "as": "summary",
+      "collection": "summary",
+      "kind": "summaryrow",
+      "record": "SummaryRow",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "amount": "metadata.amount.value",
+        "currency": "metadata.currency.value",
+        "strong": "metadata.strong.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "cartdrawer",
+      "lines": {
+        "$": "cart"
+      },
+      "rows": {
+        "$": "summary"
+      },
+      "labels": {
+        "$": "ui.commerce.cart"
+      },
+      "drawer": {
+        "$": "ui.commerce.drawer"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/cartpage.json b/xgen/specs/blocks/cartpage.json
new file mode 100644
index 0000000..4cd53bc
--- /dev/null
+++ b/xgen/specs/blocks/cartpage.json
@@ -0,0 +1,160 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.cartpage",
+  "name": "Cart page",
+  "docs": "The cart lines beside a summary with a promo code and a free-delivery bar.",
+  "theme": "commerce",
+  "group": "checkout",
+  "organism": "ShoppingCart",
+  "axes": {
+    "layout": [
+      "split",
+      "stacked"
+    ],
+    "promo": [
+      "show",
+      "hide"
+    ],
+    "progress": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "split",
+    "promo": "show",
+    "progress": "show",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "split",
+      "set": {}
+    },
+    {
+      "id": "stacked",
+      "set": {
+        "layout": "stacked"
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "promo": "hide",
+        "progress": "hide",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "CartSummaryCard",
+    "EmptyState",
+    "MediaFrame",
+    "NumberField",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@cart"
+    },
+    {
+      "sel": "[data-testid=\"code\"]",
+      "n": "@promos",
+      "when": {
+        "promo": "show"
+      }
+    },
+    {
+      "sel": "[data-testid=\"code\"]",
+      "n": 0,
+      "when": {
+        "promo": "hide"
+      }
+    },
+    {
+      "sel": "[data-testid=\"progress\"]",
+      "n": 1,
+      "when": {
+        "progress": "show"
+      }
+    },
+    {
+      "sel": "[data-testid=\"progress\"]",
+      "n": 0,
+      "when": {
+        "progress": "hide"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "cart",
+      "collection": "cart",
+      "kind": "cartline",
+      "record": "CartLine",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "variant": "metadata.variant.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "qty": "metadata.qty.value"
+      }
+    },
+    {
+      "as": "summary",
+      "collection": "summary",
+      "kind": "summaryrow",
+      "record": "SummaryRow",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "amount": "metadata.amount.value",
+        "currency": "metadata.currency.value",
+        "strong": "metadata.strong.value"
+      }
+    },
+    {
+      "as": "promos",
+      "collection": "promos",
+      "kind": "promo",
+      "record": "Promo",
+      "fields": {
+        "id": "id",
+        "code": "title"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "cartpage",
+      "title": {
+        "$": "ui.commerce.cartPage.title"
+      },
+      "lines": {
+        "$": "cart"
+      },
+      "rows": {
+        "$": "summary"
+      },
+      "promos": {
+        "$": "promos"
+      },
+      "labels": {
+        "$": "ui.commerce.cart"
+      },
+      "totals": {
+        "$": "ui.commerce.totals"
+      },
+      "actions": {
+        "$": "ui.commerce.cartPage"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/categories.json b/xgen/specs/blocks/categories.json
new file mode 100644
index 0000000..03bea0f
--- /dev/null
+++ b/xgen/specs/blocks/categories.json
@@ -0,0 +1,116 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.categories",
+  "name": "Category navigation",
+  "docs": "Categories as chips, a bar, a side list, tiles, or chips under a toolbar.",
+  "theme": "commerce",
+  "group": "catalog",
+  "organism": "CategoryNav",
+  "axes": {
+    "layout": [
+      "chips",
+      "bar",
+      "sidebar",
+      "tiles",
+      "toolbar"
+    ],
+    "count": [
+      "show",
+      "hide"
+    ],
+    "icon": [
+      "show",
+      "hide"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "chips",
+    "count": "show",
+    "icon": "show",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "chips",
+      "set": {}
+    },
+    {
+      "id": "bar",
+      "set": {
+        "layout": "bar"
+      }
+    },
+    {
+      "id": "sidebar",
+      "set": {
+        "layout": "sidebar"
+      }
+    },
+    {
+      "id": "chipsPlain",
+      "set": {
+        "count": "hide",
+        "icon": "hide"
+      }
+    },
+    {
+      "id": "barCompact",
+      "set": {
+        "layout": "bar",
+        "icon": "hide",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "tiles",
+      "set": {
+        "layout": "tiles"
+      }
+    },
+    {
+      "id": "toolbar",
+      "set": {
+        "layout": "toolbar",
+        "icon": "hide"
+      }
+    }
+  ],
+  "slots": [
+    "MenuEntry",
+    "SearchField"
+  ],
+  "data": [
+    {
+      "as": "categories",
+      "collection": "categories",
+      "kind": "menu_item",
+      "record": "Category",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "count": "metadata.count.value",
+        "href": "slug|route"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "label": {
+        "$": "ui.commerce.nav.label"
+      },
+      "categories": {
+        "$": "categories"
+      },
+      "current": "category-all",
+      "tools": {
+        "$": "ui.commerce.tools"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/channels.json b/xgen/specs/blocks/channels.json
new file mode 100644
index 0000000..43d3866
--- /dev/null
+++ b/xgen/specs/blocks/channels.json
@@ -0,0 +1,95 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.channels",
+  "name": "Support channels",
+  "docs": "Ways to get help: email, chat, docs.",
+  "theme": "support",
+  "group": "contact",
+  "organism": "SupportChannels",
+  "axes": {
+    "layout": [
+      "grid",
+      "list"
+    ],
+    "cols": [
+      "1-2",
+      "1-3"
+    ],
+    "action": [
+      "link",
+      "none"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "cols": "1-3",
+    "action": "link",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "grid",
+      "set": {}
+    },
+    {
+      "id": "twoUp",
+      "set": {
+        "cols": "1-2"
+      }
+    },
+    {
+      "id": "list",
+      "set": {
+        "layout": "list"
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "action": "none",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MenuEntry",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "channels",
+      "collection": "channels",
+      "kind": "channel",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "channels",
+      "title": {
+        "$": "ui.support.channels.title"
+      },
+      "channels": {
+        "$": "channels"
+      },
+      "empty": {
+        "$": "ui.empty.channels"
+      },
+      "open": {
+        "$": "ui.support.channels.open"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/chart.json b/xgen/specs/blocks/chart.json
new file mode 100644
index 0000000..47099a4
--- /dev/null
+++ b/xgen/specs/blocks/chart.json
@@ -0,0 +1,97 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.chart",
+  "name": "Chart panel",
+  "docs": "Orders per day as bars or meters.",
+  "theme": "dashboard",
+  "group": "widgets",
+  "organism": "ChartPanel",
+  "axes": {
+    "chart": [
+      "bars",
+      "meters"
+    ],
+    "size": [
+      "default",
+      "compact"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "chart": "bars",
+    "size": "default",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "bars",
+      "set": {}
+    },
+    {
+      "id": "short",
+      "set": {
+        "size": "compact"
+      }
+    },
+    {
+      "id": "meters",
+      "set": {
+        "chart": "meters"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "chart": "meters",
+        "size": "compact",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "BarChart",
+    "EmptyState",
+    "MeterRow",
+    "Panel"
+  ],
+  "data": [
+    {
+      "as": "series",
+      "collection": "series",
+      "kind": "point",
+      "record": "Point",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "chart",
+      "title": {
+        "$": "ui.dashboard.chart.title"
+      },
+      "text": {
+        "$": "ui.dashboard.chart.text"
+      },
+      "series": {
+        "$": "series"
+      },
+      "empty": {
+        "$": "ui.empty.series"
+      },
+      "summary": {
+        "$": "ui.dashboard.chart.summary"
+      },
+      "percent": {
+        "$": "ui.dashboard.chart.percent"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/checklist.json b/xgen/specs/blocks/checklist.json
new file mode 100644
index 0000000..a12d963
--- /dev/null
+++ b/xgen/specs/blocks/checklist.json
@@ -0,0 +1,120 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.checklist",
+  "name": "Setup checklist",
+  "docs": "Tasks to finish after sign-up, with progress.",
+  "theme": "onboarding",
+  "group": "setup",
+  "organism": "Checklist",
+  "axes": {
+    "layout": [
+      "card",
+      "plain"
+    ],
+    "progress": [
+      "bar",
+      "text",
+      "none"
+    ],
+    "marker": [
+      "check",
+      "number"
+    ],
+    "detail": [
+      "always",
+      "expand"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "card",
+    "progress": "bar",
+    "marker": "check",
+    "detail": "always",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "card",
+      "set": {}
+    },
+    {
+      "id": "expand",
+      "set": {
+        "detail": "expand"
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "layout": "plain"
+      }
+    },
+    {
+      "id": "text",
+      "set": {
+        "progress": "text"
+      }
+    },
+    {
+      "id": "none",
+      "set": {
+        "progress": "none",
+        "layout": "plain"
+      }
+    },
+    {
+      "id": "numbered",
+      "set": {
+        "marker": "number"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "marker": "number",
+        "progress": "text",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "checklist",
+      "collection": "checklist",
+      "kind": "task",
+      "record": "Task",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "done": "metadata.done.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "checklist",
+      "title": {
+        "$": "ui.onboarding.checklist.title"
+      },
+      "tasks": {
+        "$": "checklist"
+      },
+      "empty": {
+        "$": "ui.empty.tasks"
+      },
+      "progressLabel": {
+        "$": "ui.onboarding.checklist.progress"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/checkout.json b/xgen/specs/blocks/checkout.json
new file mode 100644
index 0000000..6f0bc04
--- /dev/null
+++ b/xgen/specs/blocks/checkout.json
@@ -0,0 +1,178 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.checkout",
+  "name": "Checkout",
+  "docs": "Contacts, address, a window and the payment beside a sticky order summary.",
+  "theme": "commerce",
+  "group": "checkout",
+  "organism": "CheckoutForm",
+  "axes": {
+    "layout": [
+      "cards",
+      "numbered"
+    ],
+    "summary": [
+      "aside",
+      "none"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "cards",
+    "summary": "aside",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "cards",
+      "set": {}
+    },
+    {
+      "id": "numbered",
+      "set": {
+        "layout": "numbered"
+      }
+    },
+    {
+      "id": "noSummary",
+      "set": {
+        "summary": "none",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "CartSummaryCard",
+    "CheckoutStep",
+    "CheckoutSubmit",
+    "Field",
+    "PaymentOptions",
+    "SectionFrame",
+    "SlotGrid"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"step\"]",
+      "n": 4
+    },
+    {
+      "sel": "[data-testid=\"payment\"]",
+      "n": "@payments"
+    },
+    {
+      "sel": "[data-testid=\"day\"]",
+      "n": "@days"
+    },
+    {
+      "sel": "[data-testid=\"aside\"]",
+      "n": 1,
+      "when": {
+        "summary": "aside"
+      }
+    },
+    {
+      "sel": "[data-testid=\"aside\"]",
+      "n": 0,
+      "when": {
+        "summary": "none"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "days",
+      "collection": "days",
+      "kind": "day",
+      "record": "Day",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "note": "metadata.note.value",
+        "slots": "metadata.slots.value",
+        "closed": "metadata.closed.value"
+      }
+    },
+    {
+      "as": "payments",
+      "collection": "payments",
+      "kind": "payment",
+      "record": "Payment",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "cart",
+      "collection": "cart",
+      "kind": "cartline",
+      "record": "CartLine",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "variant": "metadata.variant.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "qty": "metadata.qty.value"
+      }
+    },
+    {
+      "as": "summary",
+      "collection": "summary",
+      "kind": "summaryrow",
+      "record": "SummaryRow",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "amount": "metadata.amount.value",
+        "currency": "metadata.currency.value",
+        "strong": "metadata.strong.value"
+      }
+    },
+    {
+      "as": "promos",
+      "collection": "promos",
+      "kind": "promo",
+      "record": "Promo",
+      "fields": {
+        "id": "id",
+        "code": "title"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "checkout",
+      "title": {
+        "$": "ui.commerce.checkout.title"
+      },
+      "days": {
+        "$": "days"
+      },
+      "payments": {
+        "$": "payments"
+      },
+      "lines": {
+        "$": "cart"
+      },
+      "rows": {
+        "$": "summary"
+      },
+      "promos": {
+        "$": "promos"
+      },
+      "labels": {
+        "$": "ui.commerce.checkout"
+      },
+      "totals": {
+        "$": "ui.commerce.totals"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/compare.json b/xgen/specs/blocks/compare.json
new file mode 100644
index 0000000..7d75ed9
--- /dev/null
+++ b/xgen/specs/blocks/compare.json
@@ -0,0 +1,140 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.compare",
+  "name": "Comparison table",
+  "docs": "Plans, or a product and its rivals, in columns, and the features in rows; yes and no as marks.",
+  "theme": "marketing",
+  "group": "pricing",
+  "organism": "ComparisonTable",
+  "axes": {
+    "highlight": [
+      "none",
+      "middle"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "highlight": "none",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "plans",
+      "set": {}
+    },
+    {
+      "id": "highlight",
+      "set": {
+        "highlight": "middle"
+      }
+    },
+    {
+      "id": "rivals",
+      "set": {
+        "highlight": "middle",
+        "tone": "muted"
+      },
+      "props": {
+        "rows": {
+          "$": "rivals"
+        },
+        "title": {
+          "$": "ui.vibe.rivals.title"
+        },
+        "labels": {
+          "$": "ui.vibe.rivals.labels"
+        }
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "CompareMark",
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": 5
+    },
+    {
+      "sel": "th[scope=col]",
+      "n": 4
+    },
+    {
+      "sel": "[data-highlight=\"true\"]",
+      "n": 1,
+      "when": {
+        "highlight": "middle"
+      }
+    },
+    {
+      "sel": "[data-highlight=\"true\"]",
+      "n": 0,
+      "when": {
+        "highlight": "none"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "compare",
+      "collection": "compare",
+      "kind": "row",
+      "record": "CompareRow",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "a": "metadata.a.value",
+        "b": "metadata.b.value",
+        "c": "metadata.c.value"
+      }
+    },
+    {
+      "as": "rivals",
+      "collection": "rivals",
+      "kind": "row",
+      "record": "CompareRow",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "a": "metadata.a.value",
+        "b": "metadata.b.value",
+        "c": "metadata.c.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "compare",
+      "title": {
+        "$": "ui.vibe.compare.title"
+      },
+      "rows": {
+        "$": "compare"
+      },
+      "empty": {
+        "$": "ui.empty.rows"
+      },
+      "labels": {
+        "$": "ui.vibe.compare.labels"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/contact.json b/xgen/specs/blocks/contact.json
new file mode 100644
index 0000000..b343e39
--- /dev/null
+++ b/xgen/specs/blocks/contact.json
@@ -0,0 +1,114 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.contact",
+  "name": "Contact form",
+  "docs": "A message form, alone or beside the ways to reach us.",
+  "theme": "support",
+  "group": "contact",
+  "organism": "ContactForm",
+  "axes": {
+    "layout": [
+      "single",
+      "split"
+    ],
+    "fields": [
+      "short",
+      "full"
+    ],
+    "terms": [
+      "show",
+      "hide"
+    ],
+    "page": [
+      "section",
+      "full"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "single",
+    "fields": "full",
+    "terms": "hide",
+    "page": "section",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "single",
+      "set": {}
+    },
+    {
+      "id": "page",
+      "set": {
+        "page": "full",
+        "fields": "short"
+      }
+    },
+    {
+      "id": "short",
+      "set": {
+        "fields": "short"
+      }
+    },
+    {
+      "id": "split",
+      "set": {
+        "layout": "split"
+      }
+    },
+    {
+      "id": "consent",
+      "set": {
+        "terms": "show"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "layout": "split",
+        "fields": "short",
+        "tone": "muted",
+        "terms": "show"
+      }
+    }
+  ],
+  "slots": [
+    "Field",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "channels",
+      "collection": "channels",
+      "kind": "channel",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "contact",
+      "title": {
+        "$": "ui.support.contact.title"
+      },
+      "text": {
+        "$": "ui.support.contact.text"
+      },
+      "labels": {
+        "$": "ui.support.contact.labels"
+      },
+      "details": {
+        "$": "channels"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/cookie.json b/xgen/specs/blocks/cookie.json
new file mode 100644
index 0000000..a2d3e91
--- /dev/null
+++ b/xgen/specs/blocks/cookie.json
@@ -0,0 +1,77 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.cookie",
+  "name": "Cookie notice",
+  "docs": "A consent notice with accept and decline buttons.",
+  "theme": "promo",
+  "group": "banner",
+  "organism": "CookieBanner",
+  "axes": {
+    "layout": [
+      "bar",
+      "card"
+    ],
+    "actions": [
+      "two",
+      "three"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "bar",
+    "actions": "two",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "bar",
+      "set": {}
+    },
+    {
+      "id": "card",
+      "set": {
+        "layout": "card"
+      }
+    },
+    {
+      "id": "settings",
+      "set": {
+        "actions": "three"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "layout": "card",
+        "actions": "three",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "cookie",
+      "title": {
+        "$": "ui.promo.cookie.title"
+      },
+      "text": {
+        "$": "ui.promo.cookie.text"
+      },
+      "accept": {
+        "$": "ui.promo.cookie.accept"
+      },
+      "decline": {
+        "$": "ui.promo.cookie.decline"
+      },
+      "settings": {
+        "$": "ui.promo.cookie.settings"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/credits.json b/xgen/specs/blocks/credits.json
new file mode 100644
index 0000000..c1305f3
--- /dev/null
+++ b/xgen/specs/blocks/credits.json
@@ -0,0 +1,109 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.credits",
+  "name": "Credit packs",
+  "docs": "One-off packs of credits with a price: tiles in two or four columns, or rows.",
+  "theme": "marketing",
+  "group": "pricing",
+  "organism": "CreditPacks",
+  "axes": {
+    "cols": [
+      "2",
+      "4"
+    ],
+    "item": [
+      "tile",
+      "row"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "cols": "4",
+    "item": "tile",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "tiles4",
+      "set": {}
+    },
+    {
+      "id": "tiles2",
+      "set": {
+        "cols": "2"
+      }
+    },
+    {
+      "id": "rows",
+      "set": {
+        "item": "row"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@credits"
+    },
+    {
+      "sel": "[data-testid=\"buy\"]",
+      "n": "@credits"
+    }
+  ],
+  "data": [
+    {
+      "as": "credits",
+      "collection": "credits",
+      "kind": "pack",
+      "record": "Pack",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "credits": "metadata.credits.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "badge": "metadata.badge.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "credits",
+      "title": {
+        "$": "ui.vibe.credits.title"
+      },
+      "packs": {
+        "$": "credits"
+      },
+      "empty": {
+        "$": "ui.empty.packs"
+      },
+      "badges": {
+        "$": "ui.vibe.credits.badges"
+      },
+      "buy": {
+        "$": "ui.vibe.credits.buy"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/cta.json b/xgen/specs/blocks/cta.json
new file mode 100644
index 0000000..89adf88
--- /dev/null
+++ b/xgen/specs/blocks/cta.json
@@ -0,0 +1,209 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.cta",
+  "name": "Call to action",
+  "docs": "A closing call to action.",
+  "theme": "marketing",
+  "group": "cta",
+  "organism": "CtaBand",
+  "axes": {
+    "layout": [
+      "card",
+      "band",
+      "split",
+      "row",
+      "banner"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "actions.mode": [
+      "one",
+      "two",
+      "form"
+    ],
+    "proof": [
+      "none",
+      "quote"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "card",
+    "tone": "muted",
+    "actions.mode": "one",
+    "proof": "none",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "card",
+      "set": {}
+    },
+    {
+      "id": "banner",
+      "set": {
+        "layout": "banner",
+        "tone": "muted",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "row",
+      "set": {
+        "layout": "row"
+      }
+    },
+    {
+      "id": "form",
+      "set": {
+        "layout": "band",
+        "actions.mode": "form"
+      }
+    },
+    {
+      "id": "quote",
+      "set": {
+        "layout": "band",
+        "proof": "quote",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "band",
+      "set": {
+        "layout": "band",
+        "density": "roomy"
+      }
+    },
+    {
+      "id": "split",
+      "set": {
+        "layout": "split",
+        "tone": "default",
+        "actions.mode": "two"
+      }
+    },
+    {
+      "id": "compact",
+      "set": {
+        "density": "compact"
+      }
+    },
+    {
+      "id": "saas",
+      "set": {
+        "layout": "band",
+        "actions.mode": "two",
+        "density": "roomy"
+      },
+      "props": {
+        "title": {
+          "$": "ui.cases.saas.cta.title"
+        },
+        "text": {
+          "$": "ui.cases.saas.cta.text"
+        },
+        "actions": {
+          "cta": {
+            "$": "ui.cases.saas.cta.cta"
+          },
+          "secondary": {
+            "$": "ui.cases.saas.cta.secondary"
+          }
+        }
+      }
+    },
+    {
+      "id": "shop",
+      "set": {
+        "layout": "split",
+        "tone": "default"
+      },
+      "props": {
+        "title": {
+          "$": "ui.cases.shop.cta.title"
+        },
+        "text": {
+          "$": "ui.cases.shop.cta.text"
+        },
+        "actions": {
+          "cta": {
+            "$": "ui.cases.shop.cta.cta"
+          },
+          "secondary": {
+            "$": "ui.cases.shop.cta.secondary"
+          }
+        }
+      }
+    },
+    {
+      "id": "agency",
+      "set": {
+        "actions.mode": "two",
+        "tone": "muted"
+      },
+      "props": {
+        "title": {
+          "$": "ui.cases.agency.cta.title"
+        },
+        "text": {
+          "$": "ui.cases.agency.cta.text"
+        },
+        "actions": {
+          "cta": {
+            "$": "ui.cases.agency.cta.cta"
+          },
+          "secondary": {
+            "$": "ui.cases.agency.cta.secondary"
+          }
+        }
+      }
+    }
+  ],
+  "slots": [
+    "CtaActions",
+    "MediaFrame",
+    "QuoteProof",
+    "SectionFrame"
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "cta",
+      "title": {
+        "$": "ui.site.home.ctaTitle"
+      },
+      "text": {
+        "$": "ui.site.home.ctaText"
+      },
+      "actions": {
+        "cta": {
+          "$": "ui.site.home.ctaButton"
+        },
+        "href": "#/pricing",
+        "secondary": {
+          "$": "ui.site.home.ctaSecondary"
+        },
+        "secondaryHref": "#/",
+        "emailLabel": {
+          "$": "ui.promo.newsletter.label"
+        }
+      },
+      "quote": {
+        "text": {
+          "$": "ui.vibe.cta.quote"
+        },
+        "by": {
+          "$": "ui.vibe.cta.quoteBy"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/ctaproof.json b/xgen/specs/blocks/ctaproof.json
new file mode 100644
index 0000000..261d091
--- /dev/null
+++ b/xgen/specs/blocks/ctaproof.json
@@ -0,0 +1,249 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.ctaproof",
+  "name": "Call to action, with proof",
+  "docs": "A call to action with logos, features, figures, icon rows or delivery zones; centered or beside a picture.",
+  "theme": "marketing",
+  "group": "cta",
+  "organism": "CtaProof",
+  "axes": {
+    "layout": [
+      "center",
+      "split"
+    ],
+    "proof": [
+      "logos",
+      "features",
+      "stats",
+      "rows",
+      "zones"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "center",
+    "proof": "stats",
+    "mediaSide": "end",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "centerLogos",
+      "set": {
+        "proof": "logos"
+      }
+    },
+    {
+      "id": "centerFeatures",
+      "set": {
+        "proof": "features"
+      }
+    },
+    {
+      "id": "centerStats",
+      "set": {
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "splitStats",
+      "set": {
+        "layout": "split"
+      }
+    },
+    {
+      "id": "splitStatsStart",
+      "set": {
+        "layout": "split",
+        "mediaSide": "start"
+      },
+      "props": {
+        "note": {
+          "$": "ui.marketing.ctaProof.note"
+        }
+      }
+    },
+    {
+      "id": "splitRows",
+      "set": {
+        "layout": "split",
+        "proof": "rows"
+      }
+    },
+    {
+      "id": "splitZones",
+      "set": {
+        "layout": "split",
+        "proof": "zones",
+        "tone": "muted"
+      },
+      "props": {
+        "title": {
+          "$": "ui.marketing.ctaProof.zonesTitle"
+        },
+        "lead": {
+          "$": "ui.marketing.ctaProof.zonesLead"
+        }
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "CtaProofItems",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"cta-proof\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"cta-item\"]",
+      "n": "@logos",
+      "when": {
+        "proof": "logos"
+      }
+    },
+    {
+      "sel": "[data-testid=\"cta-item\"]",
+      "n": "@features",
+      "when": {
+        "proof": [
+          "features",
+          "rows"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"cta-item\"]",
+      "n": 3,
+      "when": {
+        "proof": "stats"
+      }
+    },
+    {
+      "sel": "[data-testid=\"cta-item\"]",
+      "n": "@zones",
+      "when": {
+        "proof": "zones"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 1,
+      "when": {
+        "layout": "split"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 0,
+      "when": {
+        "layout": "center"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "logos",
+      "collection": "logos",
+      "kind": "logo",
+      "record": "Logo",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    },
+    {
+      "as": "zones",
+      "collection": "zones",
+      "kind": "zone",
+      "record": "Zone",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "area": "metadata.area.value",
+        "price": "metadata.price.value",
+        "freeFrom": "metadata.freeFrom.value",
+        "minOrder": "metadata.minOrder.value",
+        "time": "metadata.time.value",
+        "express": "metadata.express.value",
+        "currency": "metadata.currency.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "ctaproof",
+      "title": {
+        "$": "ui.marketing.ctaProof.title"
+      },
+      "lead": {
+        "$": "ui.marketing.ctaProof.lead"
+      },
+      "badge": {
+        "$": "ui.marketing.ctaProof.badge"
+      },
+      "actions": {
+        "mode": "two",
+        "cta": {
+          "$": "ui.marketing.ctaProof.cta"
+        },
+        "href": "#/pricing",
+        "secondary": {
+          "$": "ui.marketing.ctaProof.secondary"
+        },
+        "secondaryHref": "#/contact"
+      },
+      "content": {
+        "logos": {
+          "$": "logos"
+        },
+        "features": {
+          "$": "features"
+        },
+        "stats": {
+          "$": "stats"
+        },
+        "zones": {
+          "$": "zones"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/dashshell.json b/xgen/specs/blocks/dashshell.json
new file mode 100644
index 0000000..576007f
--- /dev/null
+++ b/xgen/specs/blocks/dashshell.json
@@ -0,0 +1,388 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.dashshell",
+  "name": "Dashboard shell",
+  "docs": "Twelve frames of a signed-in app around empty cards: a top bar across the shell or over the content, with or without search; a wide, rail, collapsed, two-level or no sidebar, at the start or the end; a footer across the shell, under the content or none.",
+  "theme": "dashboard",
+  "group": "layout",
+  "organism": "DashboardShell",
+  "axes": {
+    "topbar": [
+      "full",
+      "inset",
+      "none"
+    ],
+    "search": [
+      "show",
+      "hide"
+    ],
+    "sidebar": [
+      "wide",
+      "rail",
+      "collapsed",
+      "twolevel",
+      "none"
+    ],
+    "side": [
+      "start",
+      "end"
+    ],
+    "footer": [
+      "full",
+      "inset",
+      "none"
+    ],
+    "content": [
+      "grid",
+      "split",
+      "list"
+    ]
+  },
+  "defaults": {
+    "topbar": "full",
+    "search": "show",
+    "sidebar": "wide",
+    "side": "start",
+    "footer": "none",
+    "content": "grid"
+  },
+  "variants": [
+    {
+      "id": "classic",
+      "set": {}
+    },
+    {
+      "id": "inset",
+      "set": {
+        "topbar": "inset",
+        "footer": "inset",
+        "content": "split"
+      }
+    },
+    {
+      "id": "rail",
+      "set": {
+        "sidebar": "rail",
+        "search": "hide",
+        "content": "list"
+      }
+    },
+    {
+      "id": "railFooter",
+      "set": {
+        "topbar": "inset",
+        "sidebar": "rail",
+        "footer": "full"
+      }
+    },
+    {
+      "id": "collapsed",
+      "set": {
+        "topbar": "inset",
+        "sidebar": "collapsed",
+        "content": "split"
+      }
+    },
+    {
+      "id": "twoLevel",
+      "set": {
+        "topbar": "inset",
+        "search": "hide",
+        "sidebar": "twolevel",
+        "footer": "inset",
+        "content": "list"
+      }
+    },
+    {
+      "id": "twoLevelFull",
+      "set": {
+        "sidebar": "twolevel",
+        "footer": "full",
+        "content": "split"
+      }
+    },
+    {
+      "id": "end",
+      "set": {
+        "side": "end",
+        "footer": "full",
+        "content": "split"
+      }
+    },
+    {
+      "id": "railEnd",
+      "set": {
+        "topbar": "inset",
+        "search": "hide",
+        "sidebar": "rail",
+        "side": "end",
+        "footer": "inset"
+      }
+    },
+    {
+      "id": "topOnly",
+      "set": {
+        "sidebar": "none",
+        "footer": "full"
+      }
+    },
+    {
+      "id": "sideOnly",
+      "set": {
+        "topbar": "none",
+        "footer": "inset",
+        "content": "list"
+      }
+    },
+    {
+      "id": "collapsedEnd",
+      "set": {
+        "topbar": "none",
+        "sidebar": "collapsed",
+        "side": "end",
+        "footer": "full",
+        "content": "split"
+      }
+    }
+  ],
+  "slots": [
+    "ShellContent",
+    "ShellFooter",
+    "ShellSidebar",
+    "ShellTopbar"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"dashboard-shell\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"topbar\"]",
+      "n": 1,
+      "when": {
+        "topbar": [
+          "full",
+          "inset"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"topbar\"]",
+      "n": 0,
+      "when": {
+        "topbar": "none"
+      }
+    },
+    {
+      "sel": "[data-testid=\"sidebar\"]",
+      "n": 1,
+      "when": {
+        "sidebar": [
+          "wide",
+          "rail",
+          "collapsed",
+          "twolevel"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"sidebar\"]",
+      "n": 0,
+      "when": {
+        "sidebar": "none"
+      }
+    },
+    {
+      "sel": "[data-testid=\"subnav\"]",
+      "n": 1,
+      "when": {
+        "sidebar": "twolevel"
+      }
+    },
+    {
+      "sel": "[data-testid=\"subnav\"]",
+      "n": 0,
+      "when": {
+        "sidebar": [
+          "wide",
+          "rail",
+          "collapsed",
+          "none"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"toggle\"]",
+      "n": 1,
+      "when": {
+        "sidebar": "collapsed"
+      }
+    },
+    {
+      "sel": "[data-testid=\"toggle\"]",
+      "n": 0,
+      "when": {
+        "sidebar": [
+          "wide",
+          "rail",
+          "twolevel",
+          "none"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"footer\"]",
+      "n": 1,
+      "when": {
+        "footer": [
+          "full",
+          "inset"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"footer\"]",
+      "n": 0,
+      "when": {
+        "footer": "none"
+      }
+    },
+    {
+      "sel": "[data-testid=\"sidebar\"] [data-testid=\"items\"] [data-testid=\"item\"]",
+      "n": "@sidenav",
+      "when": {
+        "sidebar": [
+          "wide",
+          "rail",
+          "collapsed",
+          "twolevel"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"subnav\"] [data-testid=\"item\"]",
+      "n": "@subnav",
+      "when": {
+        "sidebar": "twolevel"
+      }
+    },
+    {
+      "sel": "[data-testid=\"footer\"] li",
+      "n": "@helplinks",
+      "when": {
+        "footer": [
+          "full",
+          "inset"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"panel\"]",
+      "n": 5,
+      "when": {
+        "content": "grid"
+      }
+    },
+    {
+      "sel": "[data-testid=\"panel\"]",
+      "n": 3,
+      "when": {
+        "content": "split"
+      }
+    },
+    {
+      "sel": "[data-testid=\"panel\"]",
+      "n": 1,
+      "when": {
+        "content": "list"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "sidenav",
+      "collection": "sidenav",
+      "kind": "menu_item",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    },
+    {
+      "as": "subnav",
+      "collection": "subnav",
+      "kind": "menu_item",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    },
+    {
+      "as": "helplinks",
+      "collection": "helplinks",
+      "kind": "menu_item",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "dashshell",
+      "title": {
+        "$": "ui.dashboard.shells.title"
+      },
+      "nav": {
+        "label": {
+          "$": "ui.dashboard.shells.label"
+        },
+        "brand": {
+          "$": "ui.site.header.brand"
+        },
+        "links": {
+          "$": "sidenav"
+        },
+        "current": "item-orders",
+        "subTitle": {
+          "$": "ui.dashboard.shells.subTitle"
+        },
+        "sub": {
+          "$": "subnav"
+        },
+        "subCurrent": "subitem-all",
+        "search": {
+          "$": "ui.dashboard.shells.search"
+        },
+        "shortcut": {
+          "$": "ui.dashboard.shells.shortcut"
+        },
+        "expand": {
+          "$": "ui.dashboard.shells.expand"
+        },
+        "userName": {
+          "$": "ui.dashboard.shells.userName"
+        },
+        "copyright": {
+          "$": "ui.dashboard.shells.copyright"
+        },
+        "footerLabel": {
+          "$": "ui.dashboard.shells.footerLabel"
+        },
+        "footer": {
+          "$": "helplinks"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/delivery.json b/xgen/specs/blocks/delivery.json
new file mode 100644
index 0000000..5f90c08
--- /dev/null
+++ b/xgen/specs/blocks/delivery.json
@@ -0,0 +1,127 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.delivery",
+  "name": "Delivery info",
+  "docs": "How delivery works: the facts, then the zones.",
+  "theme": "commerce",
+  "group": "delivery",
+  "organism": "DeliveryInfo",
+  "axes": {
+    "layout": [
+      "full",
+      "facts",
+      "split"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "full",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "full",
+      "set": {}
+    },
+    {
+      "id": "split",
+      "set": {
+        "layout": "split"
+      }
+    },
+    {
+      "id": "facts",
+      "set": {
+        "layout": "facts",
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"fact\"]",
+      "n": "@deliveryfacts"
+    },
+    {
+      "sel": "[data-testid=\"zone\"]",
+      "n": "@zones",
+      "when": {
+        "layout": [
+          "full",
+          "split"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"zone\"]",
+      "n": 0,
+      "when": {
+        "layout": "facts"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "deliveryfacts",
+      "collection": "deliveryfacts",
+      "kind": "fact",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "zones",
+      "collection": "zones",
+      "kind": "zone",
+      "record": "Zone",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "area": "metadata.area.value",
+        "price": "metadata.price.value",
+        "freeFrom": "metadata.freeFrom.value",
+        "minOrder": "metadata.minOrder.value",
+        "time": "metadata.time.value",
+        "express": "metadata.express.value",
+        "currency": "metadata.currency.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "delivery",
+      "title": {
+        "$": "ui.commerce.delivery.title"
+      },
+      "lead": {
+        "$": "ui.commerce.delivery.lead"
+      },
+      "facts": {
+        "$": "deliveryfacts"
+      },
+      "zones": {
+        "$": "zones"
+      },
+      "labels": {
+        "$": "ui.commerce.delivery"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/empty.json b/xgen/specs/blocks/empty.json
new file mode 100644
index 0000000..ceda235
--- /dev/null
+++ b/xgen/specs/blocks/empty.json
@@ -0,0 +1,163 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.empty",
+  "name": "Empty state",
+  "docs": "A list with nothing in it, with an optional action.",
+  "theme": "dashboard",
+  "group": "states",
+  "organism": "EmptyPanel",
+  "axes": {
+    "layout": [
+      "card",
+      "plain"
+    ],
+    "actions": [
+      "button",
+      "none"
+    ],
+    "visual": [
+      "icon",
+      "image"
+    ],
+    "size": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "card",
+    "actions": "button",
+    "visual": "icon",
+    "size": "default"
+  },
+  "variants": [
+    {
+      "id": "illustrated",
+      "set": {
+        "visual": "image"
+      },
+      "props": {
+        "title": {
+          "$": "ui.dashboard.empty.tour.title"
+        },
+        "text": {
+          "$": "ui.dashboard.empty.tour.text"
+        },
+        "cta": {
+          "$": "ui.dashboard.empty.tour.cta"
+        }
+      }
+    },
+    {
+      "id": "orders",
+      "set": {},
+      "props": {
+        "icon": "shopping-bag",
+        "title": {
+          "$": "ui.dashboard.empty.orders.title"
+        },
+        "text": {
+          "$": "ui.dashboard.empty.orders.text"
+        },
+        "cta": {
+          "$": "ui.dashboard.empty.orders.cta"
+        }
+      }
+    },
+    {
+      "id": "results",
+      "set": {
+        "layout": "plain"
+      },
+      "props": {
+        "icon": "search",
+        "title": {
+          "$": "ui.dashboard.empty.results.title"
+        },
+        "text": {
+          "$": "ui.dashboard.empty.results.text"
+        },
+        "cta": {
+          "$": "ui.dashboard.empty.results.cta"
+        }
+      }
+    },
+    {
+      "id": "inbox",
+      "set": {
+        "actions": "none"
+      },
+      "props": {
+        "icon": "inbox",
+        "title": {
+          "$": "ui.dashboard.empty.inbox.title"
+        },
+        "text": {
+          "$": "ui.dashboard.empty.inbox.text"
+        },
+        "cta": {
+          "$": "ui.dashboard.empty.inbox.cta"
+        }
+      }
+    },
+    {
+      "id": "compact",
+      "set": {
+        "size": "compact"
+      },
+      "props": {
+        "icon": "inbox",
+        "title": {
+          "$": "ui.dashboard.empty.inbox.title"
+        },
+        "text": {
+          "$": "ui.dashboard.empty.inbox.text"
+        },
+        "cta": {
+          "$": "ui.dashboard.empty.inbox.cta"
+        }
+      }
+    },
+    {
+      "id": "plainNoAction",
+      "set": {
+        "layout": "plain",
+        "actions": "none",
+        "size": "compact"
+      },
+      "props": {
+        "icon": "search",
+        "title": {
+          "$": "ui.dashboard.empty.results.title"
+        },
+        "text": {
+          "$": "ui.dashboard.empty.results.text"
+        },
+        "cta": {
+          "$": "ui.dashboard.empty.results.cta"
+        }
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame"
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "empty",
+      "title": {
+        "$": "ui.dashboard.empty.orders.title"
+      },
+      "text": {
+        "$": "ui.dashboard.empty.orders.text"
+      },
+      "cta": {
+        "$": "ui.dashboard.empty.orders.cta"
+      },
+      "ctaHref": "#/"
+    }
+  }
+}
diff --git a/xgen/specs/blocks/errorpage.json b/xgen/specs/blocks/errorpage.json
new file mode 100644
index 0000000..ce7782a
--- /dev/null
+++ b/xgen/specs/blocks/errorpage.json
@@ -0,0 +1,142 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.errorpage",
+  "name": "Error page",
+  "docs": "A page for something that went wrong, such as a missing page: a code, a heading, a sentence and the way back.",
+  "theme": "support",
+  "group": "states",
+  "organism": "ErrorPage",
+  "axes": {
+    "layout": [
+      "centered",
+      "split"
+    ],
+    "code": [
+      "show",
+      "hide"
+    ],
+    "actions.mode": [
+      "one",
+      "two"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "centered",
+    "code": "show",
+    "actions.mode": "one",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "centered",
+      "set": {}
+    },
+    {
+      "id": "split",
+      "set": {
+        "layout": "split"
+      }
+    },
+    {
+      "id": "noCode",
+      "set": {
+        "code": "hide"
+      }
+    },
+    {
+      "id": "two",
+      "set": {
+        "actions.mode": "two"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"error-code\"]",
+      "n": 1,
+      "when": {
+        "code": "show"
+      }
+    },
+    {
+      "sel": "[data-testid=\"error-code\"]",
+      "n": 0,
+      "when": {
+        "code": "hide"
+      }
+    },
+    {
+      "sel": "[data-testid=\"action-primary\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"action-secondary\"]",
+      "n": 1,
+      "when": {
+        "actions.mode": "two"
+      }
+    },
+    {
+      "sel": "[data-testid=\"action-secondary\"]",
+      "n": 0,
+      "when": {
+        "actions.mode": "one"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 1,
+      "when": {
+        "layout": "split"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 0,
+      "when": {
+        "layout": "centered"
+      }
+    }
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "errorpage",
+      "title": {
+        "$": "ui.vibe.error.title"
+      },
+      "text": {
+        "$": "ui.vibe.error.text"
+      },
+      "status": {
+        "$": "ui.vibe.error.status"
+      },
+      "actions": {
+        "cta": {
+          "$": "ui.vibe.error.cta"
+        },
+        "href": "#/",
+        "secondary": {
+          "$": "ui.vibe.error.secondary"
+        },
+        "secondaryHref": "#/"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/faq.json b/xgen/specs/blocks/faq.json
new file mode 100644
index 0000000..f038a25
--- /dev/null
+++ b/xgen/specs/blocks/faq.json
@@ -0,0 +1,154 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.faq",
+  "name": "FAQ",
+  "docs": "Questions as native disclosures.",
+  "theme": "marketing",
+  "group": "faq",
+  "organism": "FaqList",
+  "axes": {
+    "layout": [
+      "accordion",
+      "chat"
+    ],
+    "cols": [
+      "1",
+      "2"
+    ],
+    "search.mode": [
+      "none",
+      "field"
+    ],
+    "filter.mode": [
+      "none",
+      "categories"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "accordion",
+    "cols": "1",
+    "search.mode": "none",
+    "filter.mode": "none",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "list",
+      "set": {}
+    },
+    {
+      "id": "chat",
+      "set": {
+        "layout": "chat"
+      }
+    },
+    {
+      "id": "search",
+      "set": {
+        "search.mode": "field"
+      }
+    },
+    {
+      "id": "tabs",
+      "set": {
+        "filter.mode": "categories"
+      },
+      "props": {
+        "filter": {
+          "category": "billing"
+        }
+      }
+    },
+    {
+      "id": "twoColumns",
+      "set": {
+        "cols": "2"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "roomy",
+      "set": {
+        "density": "roomy"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SearchField",
+    "SectionFrame",
+    "Switcher",
+    "SwitcherItem"
+  ],
+  "data": [
+    {
+      "as": "faq",
+      "collection": "faq",
+      "kind": "faq",
+      "record": "Faq",
+      "fields": {
+        "id": "id",
+        "question": "title",
+        "answer": "metadata.answer.value",
+        "category": "terms|term-slug:faq_category"
+      }
+    },
+    {
+      "as": "faqtabs",
+      "collection": "faqtabs",
+      "kind": "tab",
+      "record": "FaqTab",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "value": "metadata.value.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "faq",
+      "title": {
+        "$": "ui.site.pricing.faqTitle"
+      },
+      "items": {
+        "$": "faq"
+      },
+      "empty": {
+        "$": "ui.vibe.faq.empty"
+      },
+      "search": {
+        "label": {
+          "$": "ui.vibe.faq.search"
+        },
+        "query": ""
+      },
+      "filter": {
+        "tabs": {
+          "$": "faqtabs"
+        },
+        "label": {
+          "$": "ui.vibe.faq.tabs"
+        },
+        "category": ""
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/faqsplit.json b/xgen/specs/blocks/faqsplit.json
new file mode 100644
index 0000000..368b52e
--- /dev/null
+++ b/xgen/specs/blocks/faqsplit.json
@@ -0,0 +1,258 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.faqsplit",
+  "name": "FAQ, split",
+  "docs": "Questions beside the heading, a help card, a picture or a finder, or as cards in three or four columns.",
+  "theme": "marketing",
+  "group": "faq",
+  "organism": "FaqSplit",
+  "axes": {
+    "layout": [
+      "head",
+      "aside",
+      "media",
+      "search",
+      "cards"
+    ],
+    "cards": [
+      "grid3",
+      "grid4",
+      "icons"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "head",
+    "cards": "grid3",
+    "mediaSide": "end",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "headSplit",
+      "set": {}
+    },
+    {
+      "id": "helpCard",
+      "set": {
+        "layout": "aside"
+      }
+    },
+    {
+      "id": "picture",
+      "set": {
+        "layout": "media"
+      }
+    },
+    {
+      "id": "finder",
+      "set": {
+        "layout": "search",
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "cards3",
+      "set": {
+        "layout": "cards"
+      }
+    },
+    {
+      "id": "cards4",
+      "set": {
+        "layout": "cards",
+        "cards": "grid4"
+      }
+    },
+    {
+      "id": "cardsIcons",
+      "set": {
+        "layout": "cards",
+        "cards": "icons",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "FaqCards",
+    "FaqDisclosures",
+    "FaqFinder",
+    "FaqHelp",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"faq-item\"]",
+      "n": "@questions",
+      "when": {
+        "layout": [
+          "head",
+          "aside",
+          "media"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"faq-card\"]",
+      "n": "@questions",
+      "when": {
+        "layout": "cards"
+      }
+    },
+    {
+      "sel": "[data-testid=\"faq-help\"]",
+      "n": 1,
+      "when": {
+        "layout": "aside"
+      }
+    },
+    {
+      "sel": "[data-testid=\"faq-help\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "head",
+          "media",
+          "search",
+          "cards"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"faq-finder\"]",
+      "n": 1,
+      "when": {
+        "layout": "search"
+      }
+    },
+    {
+      "sel": "[data-testid=\"faq-finder\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "head",
+          "aside",
+          "media",
+          "cards"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"faq-topic\"]",
+      "n": "@faqtabs",
+      "when": {
+        "layout": "search"
+      }
+    },
+    {
+      "sel": "[data-testid=\"faq-popular\"]",
+      "n": 3,
+      "when": {
+        "layout": "search"
+      }
+    },
+    {
+      "sel": "[data-testid=\"faq-cta\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "head",
+          "media"
+        ]
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "questions",
+      "collection": "questions",
+      "kind": "question",
+      "record": "Question",
+      "fields": {
+        "id": "id",
+        "question": "title",
+        "answer": "metadata.answer.value",
+        "category": "terms|term:faq_category",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "channels",
+      "collection": "channels",
+      "kind": "channel",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "faqtabs",
+      "collection": "faqtabs",
+      "kind": "tab",
+      "record": "FaqTab",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "value": "metadata.value.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "faqsplit",
+      "title": {
+        "$": "ui.marketing.faqSplit.title"
+      },
+      "lead": {
+        "$": "ui.marketing.faqSplit.lead"
+      },
+      "badge": {
+        "$": "ui.marketing.faqSplit.badge"
+      },
+      "items": {
+        "$": "questions"
+      },
+      "channels": {
+        "$": "channels"
+      },
+      "topics": {
+        "$": "faqtabs"
+      },
+      "labels": {
+        "cta": {
+          "$": "ui.marketing.faqSplit.cta"
+        },
+        "more": {
+          "$": "ui.marketing.faqSplit.more"
+        },
+        "asideTitle": {
+          "$": "ui.marketing.faqSplit.asideTitle"
+        },
+        "asideText": {
+          "$": "ui.marketing.faqSplit.asideText"
+        },
+        "asideCta": {
+          "$": "ui.marketing.faqSplit.asideCta"
+        },
+        "search": {
+          "$": "ui.marketing.faqSplit.search"
+        },
+        "popular": {
+          "$": "ui.marketing.faqSplit.popular"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/features.json b/xgen/specs/blocks/features.json
new file mode 100644
index 0000000..932f049
--- /dev/null
+++ b/xgen/specs/blocks/features.json
@@ -0,0 +1,154 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.features",
+  "name": "Features",
+  "docs": "Features as cards, tiles or rows with a picture.",
+  "theme": "marketing",
+  "group": "features",
+  "organism": "FeatureGrid",
+  "axes": {
+    "layout": [
+      "grid",
+      "rows"
+    ],
+    "cols": [
+      "1-2",
+      "1-3",
+      "1-4"
+    ],
+    "item": [
+      "card",
+      "tile",
+      "cell"
+    ],
+    "mediaSide": [
+      "end",
+      "start",
+      "alternate"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "cols": "1-3",
+    "item": "card",
+    "mediaSide": "end",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "grid",
+      "set": {}
+    },
+    {
+      "id": "grid2",
+      "set": {
+        "cols": "1-2",
+        "density": "roomy"
+      }
+    },
+    {
+      "id": "tiles4",
+      "set": {
+        "cols": "1-4",
+        "item": "tile"
+      }
+    },
+    {
+      "id": "cells4",
+      "set": {
+        "cols": "1-4",
+        "item": "cell",
+        "density": "compact"
+      },
+      "props": {
+        "action": {
+          "label": {
+            "$": "ui.site.home.featuresAction"
+          },
+          "href": "#/"
+        }
+      }
+    },
+    {
+      "id": "rows",
+      "set": {
+        "layout": "rows"
+      }
+    },
+    {
+      "id": "rowsStart",
+      "set": {
+        "layout": "rows",
+        "mediaSide": "start",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "rowsAlternate",
+      "set": {
+        "layout": "rows",
+        "mediaSide": "alternate",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "tilesMuted",
+      "set": {
+        "item": "tile",
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "FeatureCards",
+    "FeatureRows",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "features",
+      "title": {
+        "$": "ui.site.home.featuresTitle"
+      },
+      "features": {
+        "$": "features"
+      },
+      "empty": {
+        "$": "ui.empty.features"
+      },
+      "action": {
+        "label": {
+          "$": "ui.site.home.featuresAction"
+        },
+        "href": "#/"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/featureshowcase.json b/xgen/specs/blocks/featureshowcase.json
new file mode 100644
index 0000000..f24c962
--- /dev/null
+++ b/xgen/specs/blocks/featureshowcase.json
@@ -0,0 +1,147 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.featureshowcase",
+  "name": "Feature cards with a picture",
+  "docs": "Cards with a picture on top and a read link, or with a muted glyph panel on top like an index of categories, in three or four columns.",
+  "theme": "marketing",
+  "group": "features",
+  "organism": "FeatureShowcase",
+  "axes": {
+    "item": [
+      "picture",
+      "panel"
+    ],
+    "cols": [
+      "3",
+      "4"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "item": "picture",
+    "cols": "3",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "pictureCards3",
+      "set": {},
+      "props": {
+        "features": {
+          "$": "values"
+        }
+      }
+    },
+    {
+      "id": "panelCards4",
+      "set": {
+        "item": "panel",
+        "cols": "4"
+      }
+    },
+    {
+      "id": "pictureCards4",
+      "set": {
+        "cols": "4",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "panelCards3",
+      "set": {
+        "item": "panel"
+      },
+      "props": {
+        "features": {
+          "$": "values"
+        }
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "MenuEntry",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"showcase-card\"]",
+      "n": "@values",
+      "when": {
+        "cols": "3"
+      }
+    },
+    {
+      "sel": "[data-testid=\"showcase-card\"]",
+      "n": "@features",
+      "when": {
+        "cols": "4"
+      }
+    },
+    {
+      "sel": "[data-testid=\"showcase-panel\"]",
+      "n": 0,
+      "when": {
+        "item": "picture"
+      }
+    },
+    {
+      "sel": "[data-testid=\"read\"]",
+      "n": 0,
+      "when": {
+        "item": "panel"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "values",
+      "collection": "values",
+      "kind": "value",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "featureshowcase",
+      "title": {
+        "$": "ui.marketing.featureShowcase.title"
+      },
+      "lead": {
+        "$": "ui.marketing.featureShowcase.lead"
+      },
+      "features": {
+        "$": "features"
+      },
+      "empty": {
+        "$": "ui.empty.features"
+      },
+      "more": {
+        "$": "ui.marketing.featureShowcase.more"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/featuresplit.json b/xgen/specs/blocks/featuresplit.json
new file mode 100644
index 0000000..04b13b0
--- /dev/null
+++ b/xgen/specs/blocks/featuresplit.json
@@ -0,0 +1,192 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.featuresplit",
+  "name": "Features, split",
+  "docs": "Features beside a picture: plain in two columns, as cards with actions, two figures over checked rows, or four metric cards with actions.",
+  "theme": "marketing",
+  "group": "features",
+  "organism": "FeatureSplit",
+  "axes": {
+    "layout": [
+      "grid",
+      "cards",
+      "stats",
+      "metrics"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "mediaSide": "end",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "gridStart",
+      "set": {
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "statsStart",
+      "set": {
+        "layout": "stats",
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "gridMuted",
+      "set": {
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "metricCards",
+      "set": {
+        "layout": "metrics"
+      }
+    },
+    {
+      "id": "featureCards",
+      "set": {
+        "layout": "cards"
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "FeatureCards",
+    "FeatureMetricCards",
+    "FeaturePairs",
+    "FeatureStatRows",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"feature-item\"]",
+      "n": 4,
+      "when": {
+        "layout": "grid"
+      }
+    },
+    {
+      "sel": "[data-testid=\"feature-item\"]",
+      "n": 3,
+      "when": {
+        "layout": "stats"
+      }
+    },
+    {
+      "sel": "[data-testid=\"feature-card\"]",
+      "n": "@features",
+      "when": {
+        "layout": "cards"
+      }
+    },
+    {
+      "sel": "[data-testid=\"feature-stat\"]",
+      "n": 2,
+      "when": {
+        "layout": "stats"
+      }
+    },
+    {
+      "sel": "[data-testid=\"feature-stat\"]",
+      "n": 4,
+      "when": {
+        "layout": "metrics"
+      }
+    },
+    {
+      "sel": "[data-testid=\"action-primary\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "cards",
+          "metrics"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"action-primary\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "grid",
+          "stats"
+        ]
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 1
+    }
+  ],
+  "data": [
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "featuresplit",
+      "title": {
+        "$": "ui.marketing.featureSplit.title"
+      },
+      "lead": {
+        "$": "ui.marketing.featureSplit.lead"
+      },
+      "badge": {
+        "$": "ui.marketing.featureSplit.badge"
+      },
+      "features": {
+        "$": "features"
+      },
+      "stats": {
+        "$": "stats"
+      },
+      "actions": {
+        "mode": "two",
+        "cta": {
+          "$": "ui.marketing.featureSplit.cta"
+        },
+        "href": "#/start",
+        "secondary": {
+          "$": "ui.marketing.featureSplit.secondary"
+        },
+        "secondaryHref": "#/work"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/featuretabs.json b/xgen/specs/blocks/featuretabs.json
new file mode 100644
index 0000000..27c9734
--- /dev/null
+++ b/xgen/specs/blocks/featuretabs.json
@@ -0,0 +1,97 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.featuretabs",
+  "name": "Feature tabs",
+  "docs": "Features as tabs; the chosen one fills the panel beside or below the tab list.",
+  "theme": "marketing",
+  "group": "features",
+  "organism": "FeatureTabs",
+  "axes": {
+    "panel": [
+      "split",
+      "stack"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "panel": "split",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "split",
+      "set": {}
+    },
+    {
+      "id": "stack",
+      "set": {
+        "panel": "stack"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "SectionFrame",
+    "Switcher",
+    "SwitcherItem"
+  ],
+  "facts": [
+    {
+      "sel": "[role=\"tab\"]",
+      "n": "@features"
+    },
+    {
+      "sel": "[role=\"tabpanel\"]",
+      "n": 1
+    }
+  ],
+  "data": [
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "tabs",
+      "title": {
+        "$": "ui.vibe.tabs.title"
+      },
+      "features": {
+        "$": "features"
+      },
+      "empty": {
+        "$": "ui.empty.features"
+      },
+      "tabsLabel": {
+        "$": "ui.vibe.tabs.label"
+      },
+      "active": "feature-clear"
+    }
+  }
+}
diff --git a/xgen/specs/blocks/footer.json b/xgen/specs/blocks/footer.json
new file mode 100644
index 0000000..4525fbe
--- /dev/null
+++ b/xgen/specs/blocks/footer.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.footer",
+  "name": "Footer",
+  "docs": "Copyright and links.",
+  "theme": "marketing",
+  "group": "navigation",
+  "organism": "SiteFooter",
+  "axes": {
+    "layout": [
+      "minimal",
+      "centered"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "minimal",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "minimal",
+      "set": {}
+    },
+    {
+      "id": "centered",
+      "set": {
+        "layout": "centered"
+      }
+    },
+    {
+      "id": "compact",
+      "set": {
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "MenuEntry",
+    "NavBlock"
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "labels": {
+        "$": "ui.site.footer"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/footersplit.json b/xgen/specs/blocks/footersplit.json
new file mode 100644
index 0000000..fa12cc1
--- /dev/null
+++ b/xgen/specs/blocks/footersplit.json
@@ -0,0 +1,274 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.footersplit",
+  "name": "Footer, split",
+  "docs": "The brand with figures and a sitemap link over link-group cards; or a split beside a picture with points, link columns, a newsletter card, the contacts or the community channels.",
+  "theme": "marketing",
+  "group": "navigation",
+  "organism": "FooterSplit",
+  "axes": {
+    "layout": [
+      "stats",
+      "points",
+      "links",
+      "newsletter",
+      "contacts",
+      "channels"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "stats",
+    "mediaSide": "end",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "statsCards",
+      "set": {}
+    },
+    {
+      "id": "splitPoints",
+      "set": {
+        "layout": "points"
+      }
+    },
+    {
+      "id": "splitLinks",
+      "set": {
+        "layout": "links",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "newsletterStart",
+      "set": {
+        "layout": "newsletter",
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "splitContacts",
+      "set": {
+        "layout": "contacts"
+      }
+    },
+    {
+      "id": "channelsStart",
+      "set": {
+        "layout": "channels",
+        "mediaSide": "start"
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "FooterBrand",
+    "FooterChannels",
+    "FooterContacts",
+    "FooterFigures",
+    "FooterGroupCards",
+    "FooterLinkColumns",
+    "FooterPoints",
+    "FooterSignupCard",
+    "FooterSitemap",
+    "MediaFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"group\"]",
+      "n": "@sitemap",
+      "when": {
+        "layout": "stats"
+      }
+    },
+    {
+      "sel": "[data-testid=\"group\"]",
+      "n": 3,
+      "when": {
+        "layout": [
+          "links",
+          "newsletter"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"group\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "points",
+          "contacts",
+          "channels"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"footer-stat\"]",
+      "n": 3,
+      "when": {
+        "layout": [
+          "stats",
+          "channels"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"footer-point\"]",
+      "n": 4,
+      "when": {
+        "layout": "points"
+      }
+    },
+    {
+      "sel": "[data-testid=\"signup\"]",
+      "n": 1,
+      "when": {
+        "layout": "newsletter"
+      }
+    },
+    {
+      "sel": "[data-testid=\"footer-contact\"]",
+      "n": "@contacts",
+      "when": {
+        "layout": "contacts"
+      }
+    },
+    {
+      "sel": "[data-testid=\"footer-channel\"]",
+      "n": 3,
+      "when": {
+        "layout": "channels"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "points",
+          "links",
+          "newsletter",
+          "contacts",
+          "channels"
+        ]
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 0,
+      "when": {
+        "layout": "stats"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "sitemap",
+      "collection": "sitemap",
+      "kind": "menu_item",
+      "record": "MegaGroup",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "icon": "metadata.icon.value",
+        "links": "id|menu",
+        "href": "slug|route"
+      }
+    },
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    },
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "contacts",
+      "collection": "contacts",
+      "kind": "contact",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "community",
+      "collection": "community",
+      "kind": "channel",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "footersplit",
+      "label": {
+        "$": "ui.vibe.sitemap.label"
+      },
+      "brand": {
+        "$": "ui.site.header.brand"
+      },
+      "tagline": {
+        "$": "ui.marketing.footerSplit.tagline"
+      },
+      "copyright": {
+        "$": "ui.marketing.footerSplit.copyright"
+      },
+      "groups": {
+        "$": "sitemap"
+      },
+      "extras": {
+        "stats": {
+          "$": "stats"
+        },
+        "points": {
+          "$": "features"
+        },
+        "contacts": {
+          "$": "contacts"
+        },
+        "channels": {
+          "$": "community"
+        }
+      },
+      "labels": {
+        "$": "ui.marketing.footerSplit.labels"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/header.json b/xgen/specs/blocks/header.json
new file mode 100644
index 0000000..629419e
--- /dev/null
+++ b/xgen/specs/blocks/header.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.header",
+  "name": "Header",
+  "docs": "Skip link, brand, navigation, theme button and an optional call to action.",
+  "theme": "marketing",
+  "group": "navigation",
+  "organism": "SiteHeader",
+  "axes": {
+    "layout": [
+      "inline",
+      "stacked"
+    ],
+    "position": [
+      "static",
+      "sticky"
+    ],
+    "actions": [
+      "none",
+      "cta"
+    ]
+  },
+  "defaults": {
+    "layout": "inline",
+    "position": "static",
+    "actions": "none"
+  },
+  "variants": [
+    {
+      "id": "inline",
+      "set": {}
+    },
+    {
+      "id": "stacked",
+      "set": {
+        "layout": "stacked"
+      }
+    },
+    {
+      "id": "sticky",
+      "set": {
+        "position": "sticky"
+      }
+    },
+    {
+      "id": "withCta",
+      "set": {
+        "actions": "cta"
+      }
+    }
+  ],
+  "slots": [
+    "MenuEntry",
+    "NavBlock"
+  ],
+  "events": {
+    "theme": "toggleTheme"
+  },
+  "data": [],
+  "sample": {
+    "props": {
+      "labels": {
+        "$": "ui.site.header"
+      },
+      "current": "home",
+      "cta": {
+        "$": "ui.site.header.cta"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/hero.json b/xgen/specs/blocks/hero.json
new file mode 100644
index 0000000..683b096
--- /dev/null
+++ b/xgen/specs/blocks/hero.json
@@ -0,0 +1,354 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.hero",
+  "name": "Hero",
+  "docs": "Heading, lead, one or two actions and optional media.",
+  "theme": "marketing",
+  "group": "hero",
+  "organism": "HeroClassic",
+  "alt": {
+    "axis": "chrome",
+    "values": [
+      "none",
+      "nav"
+    ],
+    "organism": "HeroPrompt"
+  },
+  "axes": {
+    "layout": [
+      "centered",
+      "split"
+    ],
+    "media.kind": [
+      "none",
+      "image",
+      "backdrop",
+      "code",
+      "cluster"
+    ],
+    "media.side": [
+      "end",
+      "start"
+    ],
+    "scale": [
+      "default",
+      "display"
+    ],
+    "tone": [
+      "default",
+      "muted",
+      "inverse"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ],
+    "actions.mode": [
+      "one",
+      "two",
+      "form"
+    ],
+    "chrome": [
+      "none",
+      "nav"
+    ]
+  },
+  "defaults": {
+    "layout": "centered",
+    "media.kind": "none",
+    "media.side": "end",
+    "scale": "default",
+    "tone": "default",
+    "density": "roomy",
+    "actions.mode": "one",
+    "chrome": "none"
+  },
+  "variants": [
+    {
+      "id": "centered",
+      "set": {}
+    },
+    {
+      "id": "screenshot",
+      "set": {
+        "media.kind": "image"
+      }
+    },
+    {
+      "id": "backdrop",
+      "set": {
+        "media.kind": "backdrop",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "code",
+      "set": {
+        "layout": "split",
+        "media.kind": "code",
+        "actions.mode": "two"
+      }
+    },
+    {
+      "id": "cluster",
+      "set": {
+        "layout": "split",
+        "media.kind": "cluster"
+      }
+    },
+    {
+      "id": "display",
+      "set": {
+        "scale": "display",
+        "density": "roomy"
+      }
+    },
+    {
+      "id": "form",
+      "set": {
+        "actions.mode": "form"
+      }
+    },
+    {
+      "id": "prompt",
+      "set": {
+        "actions.mode": "form",
+        "scale": "display",
+        "density": "compact",
+        "tone": "inverse",
+        "chrome": "nav"
+      },
+      "props": {
+        "badge": {
+          "$": "ui.vibe.hero.badgeLabel"
+        },
+        "badgeMark": {
+          "$": "ui.vibe.hero.badgeMark"
+        },
+        "title": {
+          "$": "ui.vibe.hero.title"
+        },
+        "topics": {
+          "$": "prompts"
+        },
+        "actions": {
+          "emailLabel": {
+            "$": "ui.vibe.hero.promptLabel"
+          }
+        }
+      }
+    },
+    {
+      "id": "twoActions",
+      "set": {
+        "actions.mode": "two"
+      }
+    },
+    {
+      "id": "split",
+      "set": {
+        "layout": "split",
+        "media.kind": "image"
+      }
+    },
+    {
+      "id": "splitStart",
+      "set": {
+        "layout": "split",
+        "media.kind": "image",
+        "media.side": "start",
+        "actions.mode": "two"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "default"
+      }
+    },
+    {
+      "id": "saas",
+      "set": {
+        "layout": "split",
+        "media.kind": "image",
+        "actions.mode": "two"
+      },
+      "props": {
+        "title": {
+          "$": "ui.cases.saas.hero.title"
+        },
+        "text": {
+          "$": "ui.cases.saas.hero.text"
+        },
+        "actions": {
+          "cta": {
+            "$": "ui.cases.saas.hero.cta"
+          },
+          "secondary": {
+            "$": "ui.cases.saas.hero.secondary"
+          }
+        }
+      }
+    },
+    {
+      "id": "shop",
+      "set": {
+        "layout": "split",
+        "media.kind": "image",
+        "media.side": "start",
+        "tone": "muted"
+      },
+      "props": {
+        "title": {
+          "$": "ui.cases.shop.hero.title"
+        },
+        "text": {
+          "$": "ui.cases.shop.hero.text"
+        },
+        "actions": {
+          "cta": {
+            "$": "ui.cases.shop.hero.cta"
+          },
+          "secondary": {
+            "$": "ui.cases.shop.hero.secondary"
+          }
+        }
+      }
+    },
+    {
+      "id": "blog",
+      "set": {
+        "density": "compact"
+      },
+      "props": {
+        "title": {
+          "$": "ui.cases.blog.hero.title"
+        },
+        "text": {
+          "$": "ui.cases.blog.hero.text"
+        },
+        "actions": {
+          "cta": {
+            "$": "ui.cases.blog.hero.cta"
+          },
+          "secondary": {
+            "$": "ui.cases.blog.hero.secondary"
+          }
+        }
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "Backdrop",
+    "CodeWindow",
+    "HeroBadge",
+    "HeroHead",
+    "MediaFrame",
+    "PromptComposer",
+    "SectionFrame",
+    "TopicChips",
+    "WeightedTitle"
+  ],
+  "data": [
+    {
+      "as": "terminal",
+      "collection": "terminal",
+      "kind": "line",
+      "record": "CodeLine",
+      "fields": {
+        "id": "id",
+        "text": "title",
+        "kind": "metadata.line_kind.value"
+      }
+    },
+    {
+      "as": "prompts",
+      "collection": "prompts",
+      "kind": "prompt",
+      "record": "Topic",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "navlinks",
+      "collection": "navlinks",
+      "kind": "menu_item",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "hero",
+      "title": {
+        "$": "ui.site.home.title"
+      },
+      "text": {
+        "$": "ui.site.home.text"
+      },
+      "actions": {
+        "cta": {
+          "$": "ui.site.home.cta"
+        },
+        "href": "#/pricing",
+        "secondary": {
+          "$": "ui.site.home.secondary"
+        },
+        "secondaryHref": "#/pricing",
+        "emailLabel": {
+          "$": "ui.promo.newsletter.label"
+        }
+      },
+      "media": {
+        "codeTitle": {
+          "$": "ui.vibe.code.title"
+        },
+        "prompt": {
+          "$": "ui.vibe.code.prompt"
+        },
+        "lines": {
+          "$": "terminal"
+        }
+      },
+      "composer": {
+        "attachLabel": {
+          "$": "ui.vibe.hero.attach"
+        },
+        "modelLabel": {
+          "$": "ui.vibe.hero.model"
+        }
+      },
+      "nav": {
+        "brand": {
+          "$": "ui.site.header.brand"
+        },
+        "links": {
+          "$": "navlinks"
+        },
+        "current": "link-product",
+        "skip": {
+          "$": "ui.site.header.skip"
+        },
+        "label": {
+          "$": "ui.site.header.nav"
+        },
+        "login": {
+          "$": "ui.site.header.login"
+        },
+        "loginHref": "#/login"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/herosplit.json b/xgen/specs/blocks/herosplit.json
new file mode 100644
index 0000000..c9b4944
--- /dev/null
+++ b/xgen/specs/blocks/herosplit.json
@@ -0,0 +1,341 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.herosplit",
+  "name": "Hero, split",
+  "docs": "A split hero with figures, faces, small cards or a quote under the lead, beside a picture, a floating card, a picture grid or plan cards.",
+  "theme": "marketing",
+  "group": "hero",
+  "organism": "HeroSplit",
+  "axes": {
+    "extra": [
+      "stats",
+      "avatars",
+      "minis",
+      "quote",
+      "none"
+    ],
+    "media": [
+      "picture",
+      "card",
+      "grid",
+      "plans"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "extra": "stats",
+    "media": "picture",
+    "mediaSide": "end",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "statsCards",
+      "set": {}
+    },
+    {
+      "id": "avatars",
+      "set": {
+        "extra": "avatars"
+      }
+    },
+    {
+      "id": "miniCards",
+      "set": {
+        "extra": "minis",
+        "media": "card",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "quoteStats",
+      "set": {
+        "extra": "quote",
+        "media": "card"
+      }
+    },
+    {
+      "id": "planCards",
+      "set": {
+        "extra": "none",
+        "media": "plans",
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "pictureGrid",
+      "set": {
+        "media": "grid"
+      }
+    },
+    {
+      "id": "pictureGridStart",
+      "set": {
+        "extra": "avatars",
+        "media": "grid",
+        "mediaSide": "start"
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "HeroSplitExtras",
+    "HeroSplitMedia",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"hero-stat\"]",
+      "n": 3,
+      "when": {
+        "extra": [
+          "stats",
+          "quote"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-stat\"]",
+      "n": 0,
+      "when": {
+        "extra": [
+          "avatars",
+          "minis",
+          "none"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-proof\"]",
+      "n": 1,
+      "when": {
+        "extra": "avatars"
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-proof\"]",
+      "n": 0,
+      "when": {
+        "extra": [
+          "stats",
+          "minis",
+          "quote",
+          "none"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-mini\"]",
+      "n": 2,
+      "when": {
+        "extra": "minis"
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-mini\"]",
+      "n": 0,
+      "when": {
+        "extra": [
+          "stats",
+          "avatars",
+          "quote",
+          "none"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-quote\"]",
+      "n": 1,
+      "when": {
+        "extra": "quote"
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-quote\"]",
+      "n": 0,
+      "when": {
+        "extra": [
+          "stats",
+          "avatars",
+          "minis",
+          "none"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"offer-card\"]",
+      "n": 1,
+      "when": {
+        "media": "card"
+      }
+    },
+    {
+      "sel": "[data-testid=\"offer-card\"]",
+      "n": 0,
+      "when": {
+        "media": [
+          "picture",
+          "grid",
+          "plans"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-tile\"]",
+      "n": 4,
+      "when": {
+        "media": "grid"
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-tile\"]",
+      "n": 0,
+      "when": {
+        "media": [
+          "picture",
+          "card",
+          "plans"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-plan\"]",
+      "n": 2,
+      "when": {
+        "media": "plans"
+      }
+    },
+    {
+      "sel": "[data-testid=\"hero-plan\"]",
+      "n": 0,
+      "when": {
+        "media": [
+          "picture",
+          "card",
+          "grid"
+        ]
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    },
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "testimonials",
+      "collection": "testimonials",
+      "kind": "testimonial",
+      "record": "Quote",
+      "fields": {
+        "id": "id",
+        "author": "title",
+        "role": "metadata.role.value",
+        "company": "metadata.company.value",
+        "quote": "metadata.quote.value",
+        "rating": "metadata.rating.value",
+        "handle": "metadata.handle.value",
+        "time": "metadata.time.value|ago-short",
+        "mark": "metadata.mark.value"
+      }
+    },
+    {
+      "as": "tiers",
+      "collection": "tiers",
+      "kind": "plan",
+      "record": "Plan",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "tagline": "metadata.tagline.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "seats": "metadata.seats.value",
+        "storage": "metadata.storage.value",
+        "highlighted": "metadata.highlighted.value",
+        "features": "metadata.features.value",
+        "yearly": "metadata.yearly.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "herosplit",
+      "title": {
+        "$": "ui.marketing.heroSplit.title"
+      },
+      "lead": {
+        "$": "ui.marketing.heroSplit.lead"
+      },
+      "badge": {
+        "$": "ui.marketing.heroSplit.badge"
+      },
+      "actions": {
+        "mode": "two",
+        "cta": {
+          "$": "ui.marketing.heroSplit.cta"
+        },
+        "href": "#/pricing",
+        "secondary": {
+          "$": "ui.marketing.heroSplit.secondary"
+        },
+        "secondaryHref": "#/features"
+      },
+      "content": {
+        "stats": {
+          "$": "stats"
+        },
+        "features": {
+          "$": "features"
+        },
+        "people": {
+          "$": "testimonials"
+        },
+        "plans": {
+          "$": "tiers"
+        },
+        "proof": {
+          "$": "ui.marketing.heroSplit.proof"
+        },
+        "card": {
+          "title": {
+            "$": "ui.marketing.heroSplit.cardTitle"
+          },
+          "text": {
+            "$": "ui.marketing.heroSplit.cardText"
+          },
+          "icon": "zap"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/iconwall.json b/xgen/specs/blocks/iconwall.json
new file mode 100644
index 0000000..9f4e8a7
--- /dev/null
+++ b/xgen/specs/blocks/iconwall.json
@@ -0,0 +1,112 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.iconwall",
+  "name": "Icon wall",
+  "docs": "Many small features as icons with a name: tiles or chips in three to six columns.",
+  "theme": "marketing",
+  "group": "features",
+  "organism": "IconWall",
+  "axes": {
+    "cols": [
+      "3",
+      "4",
+      "6"
+    ],
+    "item": [
+      "tile",
+      "chip"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "cols": "4",
+    "item": "tile",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "tiles4",
+      "set": {}
+    },
+    {
+      "id": "tiles3",
+      "set": {
+        "cols": "3"
+      }
+    },
+    {
+      "id": "chips6",
+      "set": {
+        "cols": "6",
+        "item": "chip"
+      }
+    },
+    {
+      "id": "chips4",
+      "set": {
+        "item": "chip"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@features"
+    },
+    {
+      "sel": "[data-testid=\"item\"]",
+      "cols": "$cols",
+      "when": {
+        "item": "tile"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "wall",
+      "title": {
+        "$": "ui.vibe.wall.title"
+      },
+      "features": {
+        "$": "features"
+      },
+      "empty": {
+        "$": "ui.empty.features"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/jobs.json b/xgen/specs/blocks/jobs.json
new file mode 100644
index 0000000..16da703
--- /dev/null
+++ b/xgen/specs/blocks/jobs.json
@@ -0,0 +1,167 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.jobs",
+  "name": "Careers",
+  "docs": "Open jobs as cards, grouped by department, or as a table.",
+  "theme": "marketing",
+  "group": "company",
+  "organism": "JobBoard",
+  "axes": {
+    "layout": [
+      "grid",
+      "grouped",
+      "table"
+    ],
+    "salary": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "salary": "hide",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "grid",
+      "set": {}
+    },
+    {
+      "id": "salary",
+      "set": {
+        "salary": "show"
+      }
+    },
+    {
+      "id": "grouped",
+      "set": {
+        "layout": "grouped"
+      }
+    },
+    {
+      "id": "table",
+      "set": {
+        "layout": "table",
+        "salary": "show",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "JobCards",
+    "MenuEntry",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@jobs"
+    },
+    {
+      "sel": "[data-testid=\"group\"]",
+      "n": "@departments",
+      "when": {
+        "layout": "grouped"
+      }
+    },
+    {
+      "sel": "[data-testid=\"group\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "grid",
+          "table"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"job-table\"]",
+      "n": 1,
+      "when": {
+        "layout": "table"
+      }
+    },
+    {
+      "sel": "[data-testid=\"job-table\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "grid",
+          "grouped"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"salary\"]",
+      "n": "@jobs",
+      "when": {
+        "layout": "grid",
+        "salary": "show"
+      }
+    },
+    {
+      "sel": "[data-testid=\"salary\"]",
+      "n": 0,
+      "when": {
+        "salary": "hide"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "jobs",
+      "collection": "jobs",
+      "kind": "job",
+      "record": "Job",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "dept": "metadata.dept.value",
+        "location": "metadata.location.value",
+        "type": "metadata.type.value",
+        "salary": "metadata.salary.value",
+        "posted": "metadata.posted.value|ago-days"
+      }
+    },
+    {
+      "as": "departments",
+      "collection": "departments",
+      "kind": "department",
+      "record": "Department",
+      "fields": {
+        "id": "id",
+        "name": "title"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "jobs",
+      "title": {
+        "$": "ui.company.jobs.title"
+      },
+      "lead": {
+        "$": "ui.company.jobs.lead"
+      },
+      "jobs": {
+        "$": "jobs"
+      },
+      "empty": {
+        "$": "ui.empty.jobs"
+      },
+      "departments": {
+        "$": "departments"
+      },
+      "labels": {
+        "$": "ui.company.jobs"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/kanban.json b/xgen/specs/blocks/kanban.json
new file mode 100644
index 0000000..0ee70bb
--- /dev/null
+++ b/xgen/specs/blocks/kanban.json
@@ -0,0 +1,134 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.kanban",
+  "name": "Kanban board",
+  "docs": "Work items in lanes with a count; cards with a tag and a person. Moving cards is a port contract (SortableList).",
+  "theme": "dashboard",
+  "group": "widgets",
+  "organism": "KanbanBoard",
+  "axes": {
+    "card": [
+      "simple",
+      "detail"
+    ],
+    "cols": [
+      "2",
+      "3"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "card": "detail",
+    "cols": "3",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "detail",
+      "set": {}
+    },
+    {
+      "id": "simple",
+      "set": {
+        "card": "simple"
+      }
+    },
+    {
+      "id": "twoCols",
+      "set": {
+        "cols": "2"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "Pill",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"lane\"]",
+      "n": "@lanes"
+    },
+    {
+      "sel": "[data-testid=\"lane\"] [data-testid=\"item\"]",
+      "n": "@cards"
+    },
+    {
+      "sel": "[data-slot=\"pill\"]",
+      "n": "@cards",
+      "when": {
+        "card": "detail"
+      }
+    },
+    {
+      "sel": "[data-slot=\"pill\"]",
+      "n": 0,
+      "when": {
+        "card": "simple"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "lanes",
+      "collection": "lanes",
+      "kind": "lane",
+      "record": "Lane",
+      "fields": {
+        "id": "id",
+        "key": "slug",
+        "title": "title"
+      }
+    },
+    {
+      "as": "cards",
+      "collection": "cards",
+      "kind": "card",
+      "record": "BoardCard",
+      "fields": {
+        "id": "id",
+        "lane": "metadata.lane.value",
+        "title": "title",
+        "tag": "metadata.tag.value",
+        "who": "metadata.who.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "kanban",
+      "title": {
+        "$": "ui.vibe.kanban.title"
+      },
+      "lanes": {
+        "$": "lanes"
+      },
+      "empty": {
+        "$": "ui.empty.lanes"
+      },
+      "cards": {
+        "$": "cards"
+      },
+      "countLabel": {
+        "$": "ui.vibe.kanban.count"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/locations.json b/xgen/specs/blocks/locations.json
new file mode 100644
index 0000000..939daf8
--- /dev/null
+++ b/xgen/specs/blocks/locations.json
@@ -0,0 +1,113 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.locations",
+  "name": "Store locations",
+  "docs": "The stores with address, hours, phone and services.",
+  "theme": "commerce",
+  "group": "delivery",
+  "organism": "StoreLocations",
+  "axes": {
+    "layout": [
+      "cards",
+      "list",
+      "map"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "cards",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "cards",
+      "set": {}
+    },
+    {
+      "id": "list",
+      "set": {
+        "layout": "list",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "map",
+      "set": {
+        "layout": "map"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@stores"
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 1,
+      "when": {
+        "layout": "map"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "cards",
+          "list"
+        ]
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "stores",
+      "collection": "stores",
+      "kind": "store",
+      "record": "Store",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "kind": "metadata.store_kind.value",
+        "address": "metadata.address.value",
+        "hours": "metadata.hours.value",
+        "phone": "metadata.phone.value",
+        "note": "metadata.note.value",
+        "services": "metadata.services.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "locations",
+      "title": {
+        "$": "ui.commerce.stores.title"
+      },
+      "lead": {
+        "$": "ui.commerce.stores.lead"
+      },
+      "stores": {
+        "$": "stores"
+      },
+      "empty": {
+        "$": "ui.empty.stores"
+      },
+      "kinds": {
+        "$": "ui.commerce.stores.kinds"
+      },
+      "labels": {
+        "$": "ui.commerce.stores"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/logos.json b/xgen/specs/blocks/logos.json
new file mode 100644
index 0000000..44b19d8
--- /dev/null
+++ b/xgen/specs/blocks/logos.json
@@ -0,0 +1,115 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.logos",
+  "name": "Logo cloud",
+  "docs": "Customers and partners as glyphs with names.",
+  "theme": "marketing",
+  "group": "proof",
+  "organism": "LogoCloud",
+  "axes": {
+    "layout": [
+      "grid",
+      "row"
+    ],
+    "cols": [
+      "2",
+      "3",
+      "4"
+    ],
+    "item": [
+      "name",
+      "icon",
+      "tile"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "cols": "4",
+    "item": "name",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "grid4",
+      "set": {}
+    },
+    {
+      "id": "grid3",
+      "set": {
+        "cols": "3",
+        "item": "tile"
+      }
+    },
+    {
+      "id": "row",
+      "set": {
+        "layout": "row",
+        "item": "icon",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "icons",
+      "set": {
+        "item": "icon",
+        "tone": "muted",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "grid2",
+      "set": {
+        "cols": "2",
+        "density": "roomy"
+      }
+    },
+    {
+      "id": "tiles4",
+      "set": {
+        "item": "tile"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "logos",
+      "collection": "logos",
+      "kind": "logo",
+      "record": "Logo",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "logos",
+      "title": {
+        "$": "ui.marketing.logos.title"
+      },
+      "logos": {
+        "$": "logos"
+      },
+      "empty": {
+        "$": "ui.empty.logos"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/medialist.json b/xgen/specs/blocks/medialist.json
new file mode 100644
index 0000000..2b37adc
--- /dev/null
+++ b/xgen/specs/blocks/medialist.json
@@ -0,0 +1,535 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.medialist",
+  "name": "List beside a picture",
+  "docs": "Four figures, figures with a featured review, numbered steps, the latest posts, topic rows, or contact buttons with support figures, beside a picture.",
+  "theme": "marketing",
+  "group": "proof",
+  "organism": "MediaList",
+  "axes": {
+    "layout": [
+      "figures",
+      "proof",
+      "steps",
+      "posts",
+      "topics",
+      "contact"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "figures",
+    "mediaSide": "end",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "figuresStart",
+      "set": {
+        "mediaSide": "start"
+      },
+      "props": {
+        "title": {
+          "$": "ui.marketing.mediaList.figures.title"
+        },
+        "lead": {
+          "$": "ui.marketing.mediaList.figures.lead"
+        },
+        "badge": {
+          "$": "ui.marketing.mediaList.figures.badge"
+        },
+        "labels": {
+          "list": {
+            "$": "ui.marketing.mediaList.figures.list"
+          },
+          "count": {
+            "$": "ui.marketing.mediaList.count"
+          },
+          "minutes": {
+            "$": "ui.content.labels.minutes"
+          },
+          "featured": {
+            "$": "ui.marketing.mediaList.featured"
+          },
+          "rating": {
+            "$": "ui.testimonials.rating"
+          },
+          "figures": {
+            "$": "ui.marketing.mediaList.supportFigures"
+          }
+        },
+        "actions": {
+          "mode": "one",
+          "cta": {
+            "$": "ui.marketing.mediaList.figures.cta"
+          },
+          "href": "#/start"
+        }
+      }
+    },
+    {
+      "id": "proofReview",
+      "set": {
+        "layout": "proof"
+      },
+      "props": {
+        "title": {
+          "$": "ui.marketing.mediaList.proof.title"
+        },
+        "lead": {
+          "$": "ui.marketing.mediaList.proof.lead"
+        },
+        "badge": {
+          "$": "ui.marketing.mediaList.proof.badge"
+        },
+        "labels": {
+          "list": {
+            "$": "ui.marketing.mediaList.proof.list"
+          },
+          "count": {
+            "$": "ui.marketing.mediaList.count"
+          },
+          "minutes": {
+            "$": "ui.content.labels.minutes"
+          },
+          "featured": {
+            "$": "ui.marketing.mediaList.featured"
+          },
+          "rating": {
+            "$": "ui.testimonials.rating"
+          },
+          "figures": {
+            "$": "ui.marketing.mediaList.supportFigures"
+          }
+        },
+        "actions": {
+          "mode": "two",
+          "cta": {
+            "$": "ui.marketing.mediaList.proof.cta"
+          },
+          "href": "#/start",
+          "secondary": {
+            "$": "ui.marketing.mediaList.proof.secondary"
+          },
+          "secondaryHref": "#/more"
+        }
+      }
+    },
+    {
+      "id": "stepsRows",
+      "set": {
+        "layout": "steps"
+      },
+      "props": {
+        "title": {
+          "$": "ui.marketing.mediaList.steps.title"
+        },
+        "lead": {
+          "$": "ui.marketing.mediaList.steps.lead"
+        },
+        "badge": {
+          "$": "ui.marketing.mediaList.steps.badge"
+        },
+        "labels": {
+          "list": {
+            "$": "ui.marketing.mediaList.steps.list"
+          },
+          "count": {
+            "$": "ui.marketing.mediaList.count"
+          },
+          "minutes": {
+            "$": "ui.content.labels.minutes"
+          },
+          "featured": {
+            "$": "ui.marketing.mediaList.featured"
+          },
+          "rating": {
+            "$": "ui.testimonials.rating"
+          },
+          "figures": {
+            "$": "ui.marketing.mediaList.supportFigures"
+          }
+        },
+        "actions": {
+          "mode": "one",
+          "cta": {
+            "$": "ui.marketing.mediaList.steps.cta"
+          },
+          "href": "#/start"
+        }
+      }
+    },
+    {
+      "id": "latestPosts",
+      "set": {
+        "layout": "posts",
+        "tone": "muted"
+      },
+      "props": {
+        "title": {
+          "$": "ui.marketing.mediaList.posts.title"
+        },
+        "lead": {
+          "$": "ui.marketing.mediaList.posts.lead"
+        },
+        "badge": {
+          "$": "ui.marketing.mediaList.posts.badge"
+        },
+        "labels": {
+          "list": {
+            "$": "ui.marketing.mediaList.posts.list"
+          },
+          "count": {
+            "$": "ui.marketing.mediaList.count"
+          },
+          "minutes": {
+            "$": "ui.content.labels.minutes"
+          },
+          "featured": {
+            "$": "ui.marketing.mediaList.featured"
+          },
+          "rating": {
+            "$": "ui.testimonials.rating"
+          },
+          "figures": {
+            "$": "ui.marketing.mediaList.supportFigures"
+          }
+        },
+        "actions": {
+          "mode": "one",
+          "cta": {
+            "$": "ui.marketing.mediaList.posts.cta"
+          },
+          "href": "#/start"
+        }
+      }
+    },
+    {
+      "id": "topicRows",
+      "set": {
+        "layout": "topics"
+      },
+      "props": {
+        "title": {
+          "$": "ui.marketing.mediaList.topics.title"
+        },
+        "lead": {
+          "$": "ui.marketing.mediaList.topics.lead"
+        },
+        "badge": {
+          "$": "ui.marketing.mediaList.topics.badge"
+        },
+        "labels": {
+          "list": {
+            "$": "ui.marketing.mediaList.topics.list"
+          },
+          "count": {
+            "$": "ui.marketing.mediaList.count"
+          },
+          "minutes": {
+            "$": "ui.content.labels.minutes"
+          },
+          "featured": {
+            "$": "ui.marketing.mediaList.featured"
+          },
+          "rating": {
+            "$": "ui.testimonials.rating"
+          },
+          "figures": {
+            "$": "ui.marketing.mediaList.supportFigures"
+          }
+        },
+        "actions": {
+          "mode": "one",
+          "cta": {
+            "$": "ui.marketing.mediaList.topics.cta"
+          },
+          "href": "#/start"
+        }
+      }
+    },
+    {
+      "id": "contactStart",
+      "set": {
+        "layout": "contact",
+        "mediaSide": "start"
+      },
+      "props": {
+        "title": {
+          "$": "ui.marketing.mediaList.contact.title"
+        },
+        "lead": {
+          "$": "ui.marketing.mediaList.contact.lead"
+        },
+        "badge": {
+          "$": "ui.marketing.mediaList.contact.badge"
+        },
+        "labels": {
+          "list": {
+            "$": "ui.marketing.mediaList.contact.list"
+          },
+          "count": {
+            "$": "ui.marketing.mediaList.count"
+          },
+          "minutes": {
+            "$": "ui.content.labels.minutes"
+          },
+          "featured": {
+            "$": "ui.marketing.mediaList.featured"
+          },
+          "rating": {
+            "$": "ui.testimonials.rating"
+          },
+          "figures": {
+            "$": "ui.marketing.mediaList.supportFigures"
+          }
+        },
+        "actions": {
+          "mode": "one",
+          "cta": {
+            "$": "ui.marketing.mediaList.contact.cta"
+          },
+          "href": "#/start"
+        }
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "MediaContacts",
+    "MediaFigures",
+    "MediaFrame",
+    "MediaPosts",
+    "MediaReview",
+    "MediaSteps",
+    "MediaTopics",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"media-stat\"]",
+      "n": 4,
+      "when": {
+        "layout": "figures"
+      }
+    },
+    {
+      "sel": "[data-testid=\"media-stat\"]",
+      "n": 3,
+      "when": {
+        "layout": [
+          "proof",
+          "contact"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"media-review\"]",
+      "n": 1,
+      "when": {
+        "layout": "proof"
+      }
+    },
+    {
+      "sel": "[data-testid=\"media-step\"]",
+      "n": "@steps",
+      "when": {
+        "layout": "steps"
+      }
+    },
+    {
+      "sel": "[data-testid=\"media-post\"]",
+      "n": 3,
+      "when": {
+        "layout": "posts"
+      }
+    },
+    {
+      "sel": "[data-testid=\"media-topic\"]",
+      "n": 5,
+      "when": {
+        "layout": "topics"
+      }
+    },
+    {
+      "sel": "[data-testid=\"media-channel\"]",
+      "n": "@channels",
+      "when": {
+        "layout": "contact"
+      }
+    },
+    {
+      "sel": "[data-testid=\"action-primary\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "figures",
+          "proof",
+          "steps",
+          "posts",
+          "topics"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"action-primary\"]",
+      "n": 0,
+      "when": {
+        "layout": "contact"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    },
+    {
+      "as": "steps",
+      "collection": "steps",
+      "kind": "step",
+      "record": "Step",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "posts",
+      "collection": "posts",
+      "kind": "post",
+      "record": "Post",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "excerpt": "excerpt",
+        "category": "terms|term:category",
+        "author": "author_id|author",
+        "date": "metadata.date.value|date",
+        "minutes": "metadata.minutes.value",
+        "icon": "metadata.icon.value",
+        "href": "slug|route",
+        "image": "featured_media_id|media"
+      }
+    },
+    {
+      "as": "categories",
+      "collection": "categories",
+      "kind": "menu_item",
+      "record": "Category",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "count": "metadata.count.value",
+        "href": "slug|route"
+      }
+    },
+    {
+      "as": "channels",
+      "collection": "channels",
+      "kind": "channel",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "reviews",
+      "collection": "reviews",
+      "kind": "review",
+      "record": "Review",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "author": "author_id|author",
+        "rating": "metadata.rating.value",
+        "text": "metadata.text.value",
+        "date": "metadata.date.value|date"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "medialist",
+      "title": {
+        "$": "ui.marketing.mediaList.figures.title"
+      },
+      "lead": {
+        "$": "ui.marketing.mediaList.figures.lead"
+      },
+      "badge": {
+        "$": "ui.marketing.mediaList.figures.badge"
+      },
+      "labels": {
+        "list": {
+          "$": "ui.marketing.mediaList.figures.list"
+        },
+        "count": {
+          "$": "ui.marketing.mediaList.count"
+        },
+        "minutes": {
+          "$": "ui.content.labels.minutes"
+        },
+        "featured": {
+          "$": "ui.marketing.mediaList.featured"
+        },
+        "rating": {
+          "$": "ui.testimonials.rating"
+        },
+        "figures": {
+          "$": "ui.marketing.mediaList.supportFigures"
+        }
+      },
+      "actions": {
+        "mode": "one",
+        "cta": {
+          "$": "ui.marketing.mediaList.figures.cta"
+        },
+        "href": "#/start"
+      },
+      "extras": {
+        "stats": {
+          "$": "stats"
+        },
+        "steps": {
+          "$": "steps"
+        },
+        "posts": {
+          "$": "posts"
+        },
+        "topics": {
+          "$": "categories"
+        },
+        "channels": {
+          "$": "channels"
+        },
+        "reviews": {
+          "$": "reviews"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/megamenu.json b/xgen/specs/blocks/megamenu.json
new file mode 100644
index 0000000..4f2858c
--- /dev/null
+++ b/xgen/specs/blocks/megamenu.json
@@ -0,0 +1,161 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.megamenu",
+  "name": "Mega menu",
+  "docs": "A top bar whose first item opens a wide panel of link groups, with an optional promo card.",
+  "theme": "marketing",
+  "group": "navigation",
+  "organism": "MegaMenu",
+  "axes": {
+    "panel": [
+      "open",
+      "closed"
+    ],
+    "cols": [
+      "2",
+      "3"
+    ],
+    "promo": [
+      "none",
+      "card"
+    ]
+  },
+  "defaults": {
+    "panel": "open",
+    "cols": "3",
+    "promo": "none"
+  },
+  "variants": [
+    {
+      "id": "open",
+      "set": {}
+    },
+    {
+      "id": "closed",
+      "set": {
+        "panel": "closed"
+      }
+    },
+    {
+      "id": "twoCols",
+      "set": {
+        "cols": "2"
+      }
+    },
+    {
+      "id": "promo",
+      "set": {
+        "promo": "card"
+      }
+    }
+  ],
+  "slots": [
+    "MediaFrame",
+    "MenuEntry",
+    "NavBlock"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"mega-trigger\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"mega-panel\"]",
+      "n": 1,
+      "when": {
+        "panel": "open"
+      }
+    },
+    {
+      "sel": "[data-testid=\"mega-panel\"]",
+      "n": 0,
+      "when": {
+        "panel": "closed"
+      }
+    },
+    {
+      "sel": "[data-testid=\"mega-panel\"] [data-testid=\"item\"]",
+      "n": "@megagroups",
+      "when": {
+        "panel": "open"
+      }
+    },
+    {
+      "sel": "[data-testid=\"mega-panel\"] [data-testid=\"item\"]",
+      "cols": 3,
+      "when": {
+        "panel": "open",
+        "cols": "3"
+      }
+    },
+    {
+      "sel": "[data-testid=\"mega-panel\"] [data-testid=\"item\"]",
+      "cols": 2,
+      "when": {
+        "panel": "open",
+        "cols": "2"
+      }
+    },
+    {
+      "sel": "[data-testid=\"promo\"]",
+      "n": 1,
+      "when": {
+        "panel": "open",
+        "promo": "card"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "navlinks",
+      "collection": "navlinks",
+      "kind": "menu_item",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    },
+    {
+      "as": "megagroups",
+      "collection": "megagroups",
+      "kind": "menu_item",
+      "record": "MegaGroup",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "icon": "metadata.icon.value",
+        "links": "id|menu",
+        "href": "slug|route"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "label": {
+        "$": "ui.vibe.nav.label"
+      },
+      "brand": {
+        "$": "ui.site.header.brand"
+      },
+      "trigger": {
+        "$": "ui.vibe.mega.trigger"
+      },
+      "links": {
+        "$": "navlinks"
+      },
+      "groups": {
+        "$": "megagroups"
+      },
+      "promoTitle": {
+        "$": "ui.vibe.mega.promoTitle"
+      },
+      "promoText": {
+        "$": "ui.vibe.mega.promoText"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/metrics.json b/xgen/specs/blocks/metrics.json
new file mode 100644
index 0000000..aadd577
--- /dev/null
+++ b/xgen/specs/blocks/metrics.json
@@ -0,0 +1,95 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.metrics",
+  "name": "Metric tiles",
+  "docs": "Key counters of a dashboard.",
+  "theme": "dashboard",
+  "group": "widgets",
+  "organism": "MetricRow",
+  "axes": {
+    "cols": [
+      "2",
+      "4"
+    ],
+    "item": [
+      "tile",
+      "compact"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "cols": "4",
+    "item": "tile",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "tiles",
+      "set": {}
+    },
+    {
+      "id": "twoUp",
+      "set": {
+        "cols": "2"
+      }
+    },
+    {
+      "id": "compact",
+      "set": {
+        "item": "compact"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact",
+        "item": "compact",
+        "cols": "2"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame",
+    "StatTile"
+  ],
+  "data": [
+    {
+      "as": "metrics",
+      "collection": "metrics",
+      "kind": "metric",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "metrics",
+      "title": {
+        "$": "ui.dashboard.metrics.title"
+      },
+      "metrics": {
+        "$": "metrics"
+      },
+      "empty": {
+        "$": "ui.empty.metrics"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/navbar.json b/xgen/specs/blocks/navbar.json
new file mode 100644
index 0000000..a139cf0
--- /dev/null
+++ b/xgen/specs/blocks/navbar.json
@@ -0,0 +1,188 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.navbar",
+  "name": "Navigation bar",
+  "docs": "A top bar in four shapes: inline, split around the brand, with a search field, and transparent over a picture.",
+  "theme": "marketing",
+  "group": "navigation",
+  "organism": "NavBar",
+  "axes": {
+    "layout": [
+      "inline",
+      "split",
+      "search"
+    ],
+    "over": [
+      "none",
+      "media"
+    ],
+    "actions.mode": [
+      "none",
+      "cta"
+    ],
+    "tone": [
+      "default",
+      "inverse"
+    ]
+  },
+  "defaults": {
+    "layout": "inline",
+    "over": "none",
+    "actions.mode": "cta",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "inline",
+      "set": {}
+    },
+    {
+      "id": "split",
+      "set": {
+        "layout": "split"
+      }
+    },
+    {
+      "id": "search",
+      "set": {
+        "layout": "search"
+      }
+    },
+    {
+      "id": "media",
+      "set": {
+        "over": "media"
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "actions.mode": "none"
+      }
+    },
+    {
+      "id": "inverse",
+      "set": {
+        "tone": "inverse"
+      },
+      "props": {
+        "actions": {
+          "login": {
+            "$": "ui.site.header.login"
+          },
+          "loginHref": "#/login"
+        }
+      }
+    }
+  ],
+  "slots": [
+    "MenuEntry",
+    "NavActions",
+    "NavBarMenu",
+    "NavBlock",
+    "NavLinks",
+    "OverMedia",
+    "SearchPalette"
+  ],
+  "events": {
+    "theme": "toggleTheme"
+  },
+  "facts": [
+    {
+      "sel": "[data-testid=\"nav-link\"]",
+      "n": "@navlinks"
+    },
+    {
+      "sel": "[data-testid=\"header-cta\"]",
+      "n": 1,
+      "when": {
+        "actions.mode": "cta"
+      }
+    },
+    {
+      "sel": "[data-testid=\"header-cta\"]",
+      "n": 0,
+      "when": {
+        "actions.mode": "none"
+      }
+    },
+    {
+      "sel": "[data-testid=\"palette\"]",
+      "n": 1,
+      "when": {
+        "layout": "search"
+      }
+    },
+    {
+      "sel": "[data-testid=\"palette\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "inline",
+          "split"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"over\"]",
+      "n": 1,
+      "when": {
+        "over": "media"
+      }
+    },
+    {
+      "sel": "[data-testid=\"over\"]",
+      "n": 0,
+      "when": {
+        "over": "none"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "navlinks",
+      "collection": "navlinks",
+      "kind": "menu_item",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "label": {
+        "$": "ui.vibe.nav.label"
+      },
+      "brand": {
+        "$": "ui.site.header.brand"
+      },
+      "links": {
+        "$": "navlinks"
+      },
+      "current": "link-product",
+      "actions": {
+        "cta": {
+          "$": "ui.site.header.cta"
+        },
+        "href": "#/",
+        "login": {
+          "$": "ui.site.header.login"
+        },
+        "loginHref": "#/login"
+      },
+      "search": {
+        "label": {
+          "$": "ui.vibe.nav.search"
+        },
+        "shortcut": {
+          "$": "ui.vibe.nav.shortcut"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/newsletter.json b/xgen/specs/blocks/newsletter.json
new file mode 100644
index 0000000..1cc3b06
--- /dev/null
+++ b/xgen/specs/blocks/newsletter.json
@@ -0,0 +1,93 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.newsletter",
+  "name": "Newsletter sign-up",
+  "docs": "An email field and a button, inline, stacked or beside a picture.",
+  "theme": "promo",
+  "group": "forms",
+  "organism": "NewsletterForm",
+  "axes": {
+    "layout": [
+      "inline",
+      "stacked",
+      "split"
+    ],
+    "terms": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "align": [
+      "start",
+      "center"
+    ]
+  },
+  "defaults": {
+    "layout": "inline",
+    "terms": "hide",
+    "tone": "default",
+    "align": "center"
+  },
+  "variants": [
+    {
+      "id": "inline",
+      "set": {}
+    },
+    {
+      "id": "stacked",
+      "set": {
+        "layout": "stacked"
+      }
+    },
+    {
+      "id": "split",
+      "set": {
+        "layout": "split",
+        "align": "start"
+      }
+    },
+    {
+      "id": "consent",
+      "set": {
+        "terms": "show"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "terms": "show",
+        "align": "start"
+      }
+    }
+  ],
+  "slots": [
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "newsletter",
+      "title": {
+        "$": "ui.promo.newsletter.title"
+      },
+      "text": {
+        "$": "ui.promo.newsletter.text"
+      },
+      "label": {
+        "$": "ui.promo.newsletter.label"
+      },
+      "submit": {
+        "$": "ui.promo.newsletter.submit"
+      },
+      "consent": {
+        "$": "ui.promo.newsletter.consent"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/orders.json b/xgen/specs/blocks/orders.json
new file mode 100644
index 0000000..ed58929
--- /dev/null
+++ b/xgen/specs/blocks/orders.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.orders",
+  "name": "Order history",
+  "docs": "Past orders with status.",
+  "theme": "commerce",
+  "group": "account",
+  "organism": "OrderTable",
+  "axes": {
+    "layout": [
+      "table",
+      "cards"
+    ],
+    "pager": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "table",
+    "pager": "show",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "table",
+      "set": {}
+    },
+    {
+      "id": "cards",
+      "set": {
+        "layout": "cards"
+      }
+    },
+    {
+      "id": "noPager",
+      "set": {
+        "pager": "hide"
+      }
+    },
+    {
+      "id": "compactMuted",
+      "set": {
+        "tone": "muted",
+        "density": "compact",
+        "pager": "hide"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "OrderRows",
+    "Pager",
+    "Pill",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "orders",
+      "collection": "orders",
+      "kind": "order",
+      "record": "Order",
+      "fields": {
+        "id": "id",
+        "number": "title",
+        "date": "metadata.date.value|date",
+        "total": "metadata.total.value",
+        "currency": "metadata.currency.value",
+        "status": "metadata.order_status.value",
+        "items": "metadata.items.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "orders",
+      "title": {
+        "$": "ui.commerce.orders.title"
+      },
+      "orders": {
+        "$": "orders"
+      },
+      "empty": {
+        "$": "ui.empty.orders"
+      },
+      "statuses": {
+        "$": "ui.status"
+      },
+      "labels": {
+        "$": "ui.commerce.orders"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/overview.json b/xgen/specs/blocks/overview.json
new file mode 100644
index 0000000..c2528e4
--- /dev/null
+++ b/xgen/specs/blocks/overview.json
@@ -0,0 +1,169 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.overview",
+  "name": "Dashboard overview",
+  "docs": "Counters, a chart and recent activity in one section.",
+  "theme": "dashboard",
+  "group": "widgets",
+  "organism": "DashboardOverview",
+  "axes": {
+    "layout": [
+      "split",
+      "stacked"
+    ],
+    "cols": [
+      "2",
+      "4"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "split",
+    "cols": "4",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "split",
+      "set": {}
+    },
+    {
+      "id": "stacked",
+      "set": {
+        "layout": "stacked"
+      }
+    },
+    {
+      "id": "twoCols",
+      "set": {
+        "cols": "2"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "BarChart",
+    "Panel",
+    "SectionFrame",
+    "StatTile",
+    "Timeline"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"items\"] > [data-testid=\"item\"]",
+      "n": "@metrics"
+    },
+    {
+      "sel": "[data-slot=\"bar-chart\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-slot=\"timeline\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"panels\"] > section",
+      "cols": 2,
+      "when": {
+        "layout": "split"
+      }
+    },
+    {
+      "sel": "[data-testid=\"panels\"] > section",
+      "cols": 1,
+      "when": {
+        "layout": "stacked"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "metrics",
+      "collection": "metrics",
+      "kind": "metric",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    },
+    {
+      "as": "series",
+      "collection": "series",
+      "kind": "point",
+      "record": "Point",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value"
+      }
+    },
+    {
+      "as": "activity",
+      "collection": "activity",
+      "kind": "event",
+      "record": "Event",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "time": "metadata.time.value|ago",
+        "tone": "metadata.tone.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "overview",
+      "title": {
+        "$": "ui.vibe.overview.title"
+      },
+      "metrics": {
+        "$": "metrics"
+      },
+      "chart": {
+        "title": {
+          "$": "ui.dashboard.chart.title"
+        },
+        "text": {
+          "$": "ui.dashboard.chart.text"
+        },
+        "summary": {
+          "$": "ui.dashboard.chart.summary"
+        },
+        "series": {
+          "$": "series"
+        }
+      },
+      "activity": {
+        "title": {
+          "$": "ui.dashboard.activity.title"
+        },
+        "text": {
+          "$": "ui.dashboard.activity.text"
+        },
+        "events": {
+          "$": "activity"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/pagehead.json b/xgen/specs/blocks/pagehead.json
new file mode 100644
index 0000000..888fced
--- /dev/null
+++ b/xgen/specs/blocks/pagehead.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.pagehead",
+  "name": "Page heading",
+  "docs": "The head of an inner page: the heading, one sentence and an optional action.",
+  "theme": "marketing",
+  "group": "page",
+  "organism": "PageIntro",
+  "axes": {
+    "align": [
+      "start",
+      "center"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "align": "start",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "start",
+      "set": {}
+    },
+    {
+      "id": "center",
+      "set": {
+        "align": "center"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"section\"]",
+      "n": 1
+    }
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "pagehead",
+      "title": {
+        "$": "ui.vibe.pagehead.title"
+      },
+      "text": {
+        "$": "ui.vibe.pagehead.text"
+      },
+      "cta": {
+        "$": "ui.vibe.pagehead.cta"
+      },
+      "href": "#/"
+    }
+  }
+}
diff --git a/xgen/specs/blocks/pagetrail.json b/xgen/specs/blocks/pagetrail.json
new file mode 100644
index 0000000..ceb7d04
--- /dev/null
+++ b/xgen/specs/blocks/pagetrail.json
@@ -0,0 +1,156 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.pagetrail",
+  "name": "Page heading with breadcrumbs",
+  "docs": "Breadcrumbs over the badge, the heading and the lead; with one large figure, a note card or four key facts at the end.",
+  "theme": "marketing",
+  "group": "page",
+  "organism": "PageTrail",
+  "axes": {
+    "aside": [
+      "none",
+      "figure",
+      "note",
+      "facts"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "aside": "none",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "crumbs",
+      "set": {}
+    },
+    {
+      "id": "crumbsFigure",
+      "set": {
+        "aside": "figure"
+      }
+    },
+    {
+      "id": "crumbsNote",
+      "set": {
+        "aside": "note"
+      }
+    },
+    {
+      "id": "keyFacts",
+      "set": {
+        "aside": "facts",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "PageAside",
+    "PageCrumbs",
+    "SectionHeader"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"crumb\"]",
+      "n": 2
+    },
+    {
+      "sel": "[data-testid=\"page-figure\"]",
+      "n": 1,
+      "when": {
+        "aside": "figure"
+      }
+    },
+    {
+      "sel": "[data-testid=\"page-note\"]",
+      "n": 1,
+      "when": {
+        "aside": "note"
+      }
+    },
+    {
+      "sel": "[data-testid=\"page-fact\"]",
+      "n": 4,
+      "when": {
+        "aside": "facts"
+      }
+    },
+    {
+      "sel": "[data-testid=\"page-fact\"]",
+      "n": 0,
+      "when": {
+        "aside": [
+          "none",
+          "figure",
+          "note"
+        ]
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "crumbs",
+      "collection": "crumbs",
+      "kind": "page",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    },
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "pagetrail",
+      "title": {
+        "$": "ui.marketing.pageTrail.title"
+      },
+      "lead": {
+        "$": "ui.marketing.pageTrail.lead"
+      },
+      "badge": {
+        "$": "ui.marketing.pageTrail.badge"
+      },
+      "label": {
+        "$": "ui.marketing.pageTrail.label"
+      },
+      "crumbs": {
+        "$": "crumbs"
+      },
+      "extras": {
+        "value": {
+          "$": "ui.marketing.pageTrail.value"
+        },
+        "caption": {
+          "$": "ui.marketing.pageTrail.caption"
+        },
+        "note": {
+          "$": "ui.marketing.pageTrail.note"
+        },
+        "icon": "package",
+        "facts": {
+          "$": "stats"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/photos.json b/xgen/specs/blocks/photos.json
new file mode 100644
index 0000000..ff7e1bc
--- /dev/null
+++ b/xgen/specs/blocks/photos.json
@@ -0,0 +1,154 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.photos",
+  "name": "Photo gallery",
+  "docs": "Photos in a grid, a masonry, a mosaic, a featured picture with thumbnails, or cards.",
+  "theme": "marketing",
+  "group": "company",
+  "organism": "PhotoGallery",
+  "axes": {
+    "layout": [
+      "grid",
+      "masonry",
+      "mosaic",
+      "featured",
+      "cards"
+    ],
+    "captions": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "captions": "show",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "grid",
+      "set": {}
+    },
+    {
+      "id": "gridPlain",
+      "set": {
+        "captions": "hide",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "masonry",
+      "set": {
+        "layout": "masonry"
+      }
+    },
+    {
+      "id": "mosaic",
+      "set": {
+        "layout": "mosaic"
+      }
+    },
+    {
+      "id": "featured",
+      "set": {
+        "layout": "featured"
+      }
+    },
+    {
+      "id": "cards",
+      "set": {
+        "layout": "cards",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "FigureBlock",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@photos",
+      "when": {
+        "layout": [
+          "grid",
+          "masonry",
+          "mosaic",
+          "cards"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"thumbs\"] [data-slot=\"media-frame\"]",
+      "n": "@photos",
+      "when": {
+        "layout": "featured"
+      }
+    },
+    {
+      "sel": "[data-testid=\"caption\"]",
+      "n": "@photos",
+      "when": {
+        "layout": [
+          "grid",
+          "masonry"
+        ],
+        "captions": "show"
+      }
+    },
+    {
+      "sel": "[data-testid=\"caption\"]",
+      "n": 0,
+      "when": {
+        "captions": "hide"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "photos",
+      "collection": "photos",
+      "kind": "photo",
+      "record": "Photo",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "tag": "metadata.tag.value",
+        "size": "metadata.size.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "photos",
+      "title": {
+        "$": "ui.company.photos.title"
+      },
+      "lead": {
+        "$": "ui.company.photos.lead"
+      },
+      "photos": {
+        "$": "photos"
+      },
+      "empty": {
+        "$": "ui.empty.photos"
+      },
+      "labels": {
+        "$": "ui.company.photos"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/plan.json b/xgen/specs/blocks/plan.json
new file mode 100644
index 0000000..9378ba7
--- /dev/null
+++ b/xgen/specs/blocks/plan.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.plan",
+  "name": "Plan",
+  "docs": "One plan as a card.",
+  "theme": "marketing",
+  "group": "pricing",
+  "fit": "card",
+  "organism": "PricingCard",
+  "axes": {
+    "emphasis": [
+      "auto",
+      "off"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "emphasis": "auto",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "standard",
+      "set": {}
+    },
+    {
+      "id": "flat",
+      "set": {
+        "emphasis": "off"
+      }
+    },
+    {
+      "id": "compact",
+      "set": {
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [],
+  "data": [
+    {
+      "as": "tiers",
+      "collection": "tiers",
+      "kind": "plan",
+      "record": "Plan",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "tagline": "metadata.tagline.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "seats": "metadata.seats.value",
+        "storage": "metadata.storage.value",
+        "highlighted": "metadata.highlighted.value",
+        "features": "metadata.features.value",
+        "yearly": "metadata.yearly.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "plan": {
+        "op": "pick",
+        "args": [
+          {
+            "$": "tiers"
+          },
+          "tier-team"
+        ]
+      },
+      "labels": {
+        "$": "ui.pricing"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/postheader.json b/xgen/specs/blocks/postheader.json
new file mode 100644
index 0000000..9999705
--- /dev/null
+++ b/xgen/specs/blocks/postheader.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.postheader",
+  "name": "Post header",
+  "docs": "Category, title, excerpt, author line and a wide cover.",
+  "theme": "content",
+  "group": "blog",
+  "organism": "PostHeader",
+  "axes": {
+    "layout": [
+      "start",
+      "center"
+    ],
+    "cover": [
+      "show",
+      "hide"
+    ],
+    "meta": [
+      "full",
+      "short"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "start",
+    "cover": "show",
+    "meta": "full",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "start",
+      "set": {}
+    },
+    {
+      "id": "center",
+      "set": {
+        "layout": "center"
+      }
+    },
+    {
+      "id": "noCover",
+      "set": {
+        "cover": "hide"
+      }
+    },
+    {
+      "id": "minimal",
+      "set": {
+        "cover": "hide",
+        "meta": "short",
+        "tone": "muted",
+        "layout": "center"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "Pill",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "posts",
+      "collection": "posts",
+      "kind": "post",
+      "record": "Post",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "excerpt": "excerpt",
+        "category": "terms|term:category",
+        "author": "author_id|author",
+        "date": "metadata.date.value|date",
+        "minutes": "metadata.minutes.value",
+        "icon": "metadata.icon.value",
+        "href": "slug|route",
+        "image": "featured_media_id|media"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "postheader",
+      "post": {
+        "op": "pick",
+        "args": [
+          {
+            "$": "posts"
+          },
+          "post-static-first"
+        ]
+      },
+      "labels": {
+        "$": "ui.content.labels"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/posts.json b/xgen/specs/blocks/posts.json
new file mode 100644
index 0000000..802e9ff
--- /dev/null
+++ b/xgen/specs/blocks/posts.json
@@ -0,0 +1,188 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.posts",
+  "name": "Blog posts",
+  "docs": "Posts as a grid, a list or a magazine.",
+  "theme": "content",
+  "group": "blog",
+  "organism": "PostGrid",
+  "axes": {
+    "layout": [
+      "grid",
+      "list",
+      "magazine"
+    ],
+    "cols": [
+      "1-2",
+      "1-3",
+      "1-4"
+    ],
+    "media": [
+      "image",
+      "none"
+    ],
+    "meta": [
+      "full",
+      "short",
+      "news"
+    ],
+    "filter.mode": [
+      "none",
+      "topics"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "cols": "1-3",
+    "media": "image",
+    "meta": "full",
+    "filter.mode": "none",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "grid",
+      "set": {}
+    },
+    {
+      "id": "filters",
+      "set": {
+        "filter.mode": "topics"
+      },
+      "props": {
+        "filter": {
+          "topic": "Design"
+        }
+      }
+    },
+    {
+      "id": "twoUp",
+      "set": {
+        "cols": "1-2"
+      }
+    },
+    {
+      "id": "row4",
+      "set": {
+        "cols": "1-4"
+      }
+    },
+    {
+      "id": "news4",
+      "set": {
+        "cols": "1-4",
+        "meta": "news"
+      },
+      "props": {
+        "action": {
+          "label": {
+            "$": "ui.content.posts.action"
+          },
+          "href": "#/"
+        }
+      }
+    },
+    {
+      "id": "list",
+      "set": {
+        "layout": "list"
+      }
+    },
+    {
+      "id": "magazine",
+      "set": {
+        "layout": "magazine"
+      }
+    },
+    {
+      "id": "textOnly",
+      "set": {
+        "media": "none"
+      }
+    },
+    {
+      "id": "digest",
+      "set": {
+        "meta": "short",
+        "density": "compact",
+        "tone": "muted",
+        "media": "none"
+      }
+    }
+  ],
+  "slots": [
+    "SectionFrame",
+    "Switcher",
+    "SwitcherItem"
+  ],
+  "data": [
+    {
+      "as": "posts",
+      "collection": "posts",
+      "kind": "post",
+      "record": "Post",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "excerpt": "excerpt",
+        "category": "terms|term:category",
+        "author": "author_id|author",
+        "date": "metadata.date.value|date",
+        "minutes": "metadata.minutes.value",
+        "icon": "metadata.icon.value",
+        "href": "slug|route",
+        "image": "featured_media_id|media"
+      }
+    },
+    {
+      "as": "topics",
+      "collection": "topics",
+      "kind": "topic",
+      "record": "PostTopic",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "value": "metadata.value.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "posts",
+      "title": {
+        "$": "ui.content.posts.title"
+      },
+      "posts": {
+        "$": "posts"
+      },
+      "labels": {
+        "$": "ui.content.labels"
+      },
+      "filter": {
+        "topics": {
+          "$": "topics"
+        },
+        "label": {
+          "$": "ui.vibe.posts.topics"
+        },
+        "topic": ""
+      },
+      "action": {
+        "label": {
+          "$": "ui.content.posts.action"
+        },
+        "href": "#/"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/postshowcase.json b/xgen/specs/blocks/postshowcase.json
new file mode 100644
index 0000000..4ba12e9
--- /dev/null
+++ b/xgen/specs/blocks/postshowcase.json
@@ -0,0 +1,158 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.postshowcase",
+  "name": "Post showcase",
+  "docs": "Four small post cards beside an intro with a view-all link; the first post in detail beside its picture; or cards with the text on a panel over the picture, in two or three columns.",
+  "theme": "content",
+  "group": "blog",
+  "organism": "PostShowcase",
+  "axes": {
+    "layout": [
+      "intro",
+      "featured",
+      "overlay"
+    ],
+    "cols": [
+      "2",
+      "3"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "intro",
+    "cols": "3",
+    "mediaSide": "start",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "introCards",
+      "set": {}
+    },
+    {
+      "id": "featuredEnd",
+      "set": {
+        "layout": "featured",
+        "mediaSide": "end",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "overlay3",
+      "set": {
+        "layout": "overlay"
+      }
+    },
+    {
+      "id": "overlay2",
+      "set": {
+        "layout": "overlay",
+        "cols": "2"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "PostFeature",
+    "PostMiniCard",
+    "PostOverlayCard",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"post-mini\"]",
+      "n": 4,
+      "when": {
+        "layout": "intro"
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-feature\"]",
+      "n": 1,
+      "when": {
+        "layout": "featured"
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-overlay\"]",
+      "n": 3,
+      "when": {
+        "layout": "overlay",
+        "cols": "3"
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-overlay\"]",
+      "n": 2,
+      "when": {
+        "layout": "overlay",
+        "cols": "2"
+      }
+    },
+    {
+      "sel": "[data-testid=\"section-action\"]",
+      "n": 1,
+      "when": {
+        "layout": "intro"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "posts",
+      "collection": "posts",
+      "kind": "post",
+      "record": "Post",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "excerpt": "excerpt",
+        "category": "terms|term:category",
+        "author": "author_id|author",
+        "date": "metadata.date.value|date",
+        "minutes": "metadata.minutes.value",
+        "icon": "metadata.icon.value",
+        "href": "slug|route",
+        "image": "featured_media_id|media"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "postshowcase",
+      "title": {
+        "$": "ui.content.postShowcase.title"
+      },
+      "lead": {
+        "$": "ui.content.postShowcase.lead"
+      },
+      "badge": {
+        "$": "ui.content.postShowcase.badge"
+      },
+      "posts": {
+        "$": "posts"
+      },
+      "empty": {
+        "$": "ui.empty.posts"
+      },
+      "labels": {
+        "$": "ui.content.labels"
+      },
+      "action": {
+        "label": {
+          "$": "ui.content.postShowcase.action"
+        },
+        "href": "#/articles"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/postsplit.json b/xgen/specs/blocks/postsplit.json
new file mode 100644
index 0000000..ff3ae66
--- /dev/null
+++ b/xgen/specs/blocks/postsplit.json
@@ -0,0 +1,261 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.postsplit",
+  "name": "Post header, split",
+  "docs": "Tags, reading figures and an author card with share and save over a wide cover; the author, figures, tags and actions beside the cover; or the facts and related reading beside it.",
+  "theme": "content",
+  "group": "blog",
+  "organism": "PostSplit",
+  "axes": {
+    "layout": [
+      "center",
+      "split",
+      "outline"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "author": [
+      "line",
+      "card",
+      "bio"
+    ],
+    "cover": [
+      "wide",
+      "square"
+    ],
+    "actions": [
+      "pair",
+      "wide",
+      "icons"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "split",
+    "mediaSide": "end",
+    "author": "line",
+    "cover": "wide",
+    "actions": "pair",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "centerShare",
+      "set": {
+        "layout": "center"
+      }
+    },
+    {
+      "id": "splitTags",
+      "set": {}
+    },
+    {
+      "id": "splitBioStart",
+      "set": {
+        "mediaSide": "start",
+        "author": "bio",
+        "actions": "wide"
+      }
+    },
+    {
+      "id": "splitSquare",
+      "set": {
+        "cover": "square",
+        "actions": "icons"
+      }
+    },
+    {
+      "id": "outlineStart",
+      "set": {
+        "layout": "outline",
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "splitStats",
+      "set": {
+        "author": "card",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "MediaFrame",
+    "PostActions",
+    "PostAuthor",
+    "PostOutline",
+    "PostStats",
+    "PostTags",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"post-author\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "center",
+          "split"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-author\"]",
+      "n": 0,
+      "when": {
+        "layout": "outline"
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-tag\"]",
+      "n": "@posttags",
+      "when": {
+        "layout": [
+          "center",
+          "split"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-link\"]",
+      "n": "@outline",
+      "when": {
+        "layout": "outline"
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-link\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "center",
+          "split"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-stats\"]",
+      "n": 1,
+      "when": {
+        "layout": "center"
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-save\"]",
+      "n": 1,
+      "when": {
+        "actions": [
+          "pair",
+          "icons"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"post-save\"]",
+      "n": 0,
+      "when": {
+        "actions": "wide",
+        "layout": [
+          "split",
+          "outline"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"action-primary\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "split",
+          "outline"
+        ]
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "posts",
+      "collection": "posts",
+      "kind": "post",
+      "record": "Post",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "excerpt": "excerpt",
+        "category": "terms|term:category",
+        "author": "author_id|author",
+        "date": "metadata.date.value|date",
+        "minutes": "metadata.minutes.value",
+        "icon": "metadata.icon.value",
+        "href": "slug|route",
+        "image": "featured_media_id|media"
+      }
+    },
+    {
+      "as": "posttags",
+      "collection": "posttags",
+      "kind": "posttag",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "outline",
+      "collection": "outline",
+      "kind": "menu_item",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "postsplit",
+      "post": {
+        "op": "pick",
+        "args": [
+          {
+            "$": "posts"
+          },
+          "post-static-first"
+        ]
+      },
+      "labels": {
+        "$": "ui.content.postSplit.labels"
+      },
+      "extras": {
+        "role": {
+          "$": "ui.content.postSplit.role"
+        },
+        "bio": {
+          "$": "ui.content.postSplit.bio"
+        },
+        "views": {
+          "$": "ui.content.postSplit.views"
+        },
+        "likes": {
+          "$": "ui.content.postSplit.likes"
+        },
+        "tags": {
+          "$": "posttags"
+        },
+        "outline": {
+          "$": "outline"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/pricing.json b/xgen/specs/blocks/pricing.json
new file mode 100644
index 0000000..e8a64b5
--- /dev/null
+++ b/xgen/specs/blocks/pricing.json
@@ -0,0 +1,175 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.pricing",
+  "name": "Pricing",
+  "docs": "Plans as a grid or a stack of cards.",
+  "theme": "marketing",
+  "group": "pricing",
+  "organism": "PricingTiers",
+  "axes": {
+    "layout": [
+      "grid",
+      "stack"
+    ],
+    "cols": [
+      "1-2",
+      "1-3",
+      "1-4"
+    ],
+    "emphasis": [
+      "auto",
+      "off"
+    ],
+    "billing": [
+      "off",
+      "monthly",
+      "annual"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "cols": "1-3",
+    "emphasis": "auto",
+    "billing": "off",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "grid",
+      "set": {}
+    },
+    {
+      "id": "monthly",
+      "set": {
+        "billing": "monthly"
+      }
+    },
+    {
+      "id": "annual",
+      "set": {
+        "billing": "annual"
+      }
+    },
+    {
+      "id": "duo",
+      "set": {
+        "cols": "1-2",
+        "emphasis": "off"
+      },
+      "props": {
+        "plans": {
+          "$": "duo"
+        }
+      }
+    },
+    {
+      "id": "grid2",
+      "set": {
+        "cols": "1-2"
+      }
+    },
+    {
+      "id": "grid4",
+      "set": {
+        "cols": "1-4"
+      }
+    },
+    {
+      "id": "stack",
+      "set": {
+        "layout": "stack"
+      }
+    },
+    {
+      "id": "flat",
+      "set": {
+        "emphasis": "off"
+      }
+    },
+    {
+      "id": "compactMuted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "roomy",
+      "set": {
+        "density": "roomy"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame",
+    "Switcher",
+    "SwitcherItem"
+  ],
+  "data": [
+    {
+      "as": "tiers",
+      "collection": "tiers",
+      "kind": "plan",
+      "record": "Plan",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "tagline": "metadata.tagline.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "seats": "metadata.seats.value",
+        "storage": "metadata.storage.value",
+        "highlighted": "metadata.highlighted.value",
+        "features": "metadata.features.value",
+        "yearly": "metadata.yearly.value"
+      }
+    },
+    {
+      "as": "duo",
+      "collection": "duo",
+      "kind": "plan",
+      "record": "Plan",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "tagline": "metadata.tagline.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "seats": "metadata.seats.value",
+        "storage": "metadata.storage.value",
+        "highlighted": "metadata.highlighted.value",
+        "features": "metadata.features.value",
+        "yearly": "metadata.yearly.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "pricing",
+      "title": {
+        "$": "ui.site.pricing.tiersTitle"
+      },
+      "plans": {
+        "$": "tiers"
+      },
+      "labels": {
+        "$": "ui.pricing"
+      },
+      "billingLabels": {
+        "$": "ui.vibe.billing"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/product.json b/xgen/specs/blocks/product.json
new file mode 100644
index 0000000..8ec1a47
--- /dev/null
+++ b/xgen/specs/blocks/product.json
@@ -0,0 +1,128 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.product",
+  "name": "Product page",
+  "docs": "The gallery and the buy box of one product.",
+  "theme": "commerce",
+  "group": "product",
+  "organism": "ProductDetail",
+  "axes": {
+    "layout": [
+      "split",
+      "stacked"
+    ],
+    "mediaSide": [
+      "start",
+      "end"
+    ],
+    "thumbs": [
+      "none",
+      "below"
+    ],
+    "buy": [
+      "full",
+      "compact"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "roomy"
+    ]
+  },
+  "defaults": {
+    "layout": "split",
+    "mediaSide": "start",
+    "thumbs": "below",
+    "buy": "full",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "split",
+      "set": {}
+    },
+    {
+      "id": "splitEnd",
+      "set": {
+        "mediaSide": "end"
+      }
+    },
+    {
+      "id": "stacked",
+      "set": {
+        "layout": "stacked",
+        "thumbs": "none"
+      }
+    },
+    {
+      "id": "compact",
+      "set": {
+        "buy": "compact",
+        "thumbs": "none"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "roomy"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "NumberField",
+    "ProductGallery",
+    "ProductPrice",
+    "Rating",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "products",
+      "collection": "products",
+      "kind": "product",
+      "record": "Product",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "summary": "metadata.summary.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "rating": "metadata.rating.value",
+        "reviews": "metadata.reviews.value",
+        "badge": "metadata.badge.value",
+        "category": "terms|term:product_category",
+        "inStock": "metadata.inStock.value",
+        "compareAt": "metadata.compare_at.value",
+        "href": "slug|route",
+        "image": "featured_media_id|media"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "product",
+      "product": {
+        "op": "pick",
+        "args": [
+          {
+            "$": "products"
+          },
+          "product-lamp"
+        ]
+      },
+      "labels": {
+        "$": "ui.commerce.detail"
+      },
+      "badges": {
+        "$": "ui.commerce.badges"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/productinfo.json b/xgen/specs/blocks/productinfo.json
new file mode 100644
index 0000000..fdc41cf
--- /dev/null
+++ b/xgen/specs/blocks/productinfo.json
@@ -0,0 +1,116 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.productinfo",
+  "name": "Product details",
+  "docs": "Texts in an accordion beside a card of specs.",
+  "theme": "commerce",
+  "group": "product",
+  "organism": "ProductInfo",
+  "axes": {
+    "layout": [
+      "split",
+      "stacked"
+    ],
+    "expand": [
+      "first",
+      "none"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "split",
+    "expand": "first",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "split",
+      "set": {}
+    },
+    {
+      "id": "stacked",
+      "set": {
+        "layout": "stacked"
+      }
+    },
+    {
+      "id": "closed",
+      "set": {
+        "expand": "none",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "details",
+      "n": "@details"
+    },
+    {
+      "sel": "[data-testid=\"spec\"]",
+      "n": "@specs"
+    },
+    {
+      "sel": "details[open]",
+      "n": 1,
+      "when": {
+        "expand": "first"
+      }
+    },
+    {
+      "sel": "details[open]",
+      "n": 0,
+      "when": {
+        "expand": "none"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "details",
+      "collection": "details",
+      "kind": "detail",
+      "record": "Detail",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value"
+      }
+    },
+    {
+      "as": "specs",
+      "collection": "specs",
+      "kind": "spec",
+      "record": "Spec",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "productinfo",
+      "title": {
+        "$": "ui.commerce.info.title"
+      },
+      "details": {
+        "$": "details"
+      },
+      "specs": {
+        "$": "specs"
+      },
+      "labels": {
+        "$": "ui.commerce.info"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/products.json b/xgen/specs/blocks/products.json
new file mode 100644
index 0000000..2332967
--- /dev/null
+++ b/xgen/specs/blocks/products.json
@@ -0,0 +1,161 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.products",
+  "name": "Product grid",
+  "docs": "Products as cards in a grid, a list or a rail that scrolls sideways.",
+  "theme": "commerce",
+  "group": "catalog",
+  "organism": "ProductGrid",
+  "axes": {
+    "layout": [
+      "grid",
+      "list",
+      "rail"
+    ],
+    "cols": [
+      "1-2",
+      "1-3",
+      "1-4"
+    ],
+    "ratio": [
+      "4/3",
+      "1/1",
+      "3/4"
+    ],
+    "rating": [
+      "show",
+      "hide"
+    ],
+    "action": [
+      "button",
+      "none"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "cols": "1-3",
+    "ratio": "4/3",
+    "rating": "show",
+    "action": "button",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "grid3",
+      "set": {}
+    },
+    {
+      "id": "grid4",
+      "set": {
+        "cols": "1-4",
+        "ratio": "1/1"
+      }
+    },
+    {
+      "id": "grid2",
+      "set": {
+        "cols": "1-2",
+        "ratio": "3/4"
+      }
+    },
+    {
+      "id": "list",
+      "set": {
+        "layout": "list"
+      }
+    },
+    {
+      "id": "catalog",
+      "set": {
+        "cols": "1-4",
+        "ratio": "1/1",
+        "rating": "hide",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "browse",
+      "set": {
+        "action": "none",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "showcase",
+      "set": {
+        "ratio": "3/4",
+        "density": "roomy"
+      }
+    },
+    {
+      "id": "rail",
+      "set": {
+        "layout": "rail"
+      }
+    },
+    {
+      "id": "railCompact",
+      "set": {
+        "layout": "rail",
+        "ratio": "1/1",
+        "rating": "hide",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "products",
+      "collection": "products",
+      "kind": "product",
+      "record": "Product",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "summary": "metadata.summary.value",
+        "price": "metadata.price.value",
+        "currency": "metadata.currency.value",
+        "rating": "metadata.rating.value",
+        "reviews": "metadata.reviews.value",
+        "badge": "metadata.badge.value",
+        "category": "terms|term:product_category",
+        "inStock": "metadata.inStock.value",
+        "compareAt": "metadata.compare_at.value",
+        "href": "slug|route",
+        "image": "featured_media_id|media"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "products",
+      "title": {
+        "$": "ui.commerce.products.title"
+      },
+      "products": {
+        "$": "products"
+      },
+      "labels": {
+        "$": "ui.commerce.productLabels"
+      },
+      "badges": {
+        "$": "ui.commerce.badges"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/profile.json b/xgen/specs/blocks/profile.json
new file mode 100644
index 0000000..8d56876
--- /dev/null
+++ b/xgen/specs/blocks/profile.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.profile",
+  "name": "Profile form",
+  "docs": "Account settings: picture, name, email, bio and notifications.",
+  "theme": "account",
+  "group": "settings",
+  "organism": "ProfileForm",
+  "axes": {
+    "layout": [
+      "stacked",
+      "split"
+    ],
+    "avatar": [
+      "show",
+      "hide"
+    ],
+    "prefs": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "stacked",
+    "avatar": "show",
+    "prefs": "show",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "stacked",
+      "set": {}
+    },
+    {
+      "id": "split",
+      "set": {
+        "layout": "split"
+      }
+    },
+    {
+      "id": "minimal",
+      "set": {
+        "avatar": "hide",
+        "prefs": "hide"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "layout": "split",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "Field",
+    "MediaFrame",
+    "Panel"
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "profile",
+      "title": {
+        "$": "ui.account.profile.title"
+      },
+      "text": {
+        "$": "ui.account.profile.text"
+      },
+      "labels": {
+        "$": "ui.account.profile.labels"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/projects.json b/xgen/specs/blocks/projects.json
new file mode 100644
index 0000000..290b08e
--- /dev/null
+++ b/xgen/specs/blocks/projects.json
@@ -0,0 +1,140 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.projects",
+  "name": "Projects",
+  "docs": "Projects as cards, a compact grid, captions over pictures, a bento or a list beside a collage.",
+  "theme": "marketing",
+  "group": "company",
+  "organism": "ProjectGrid",
+  "axes": {
+    "layout": [
+      "cards",
+      "compact",
+      "overlay",
+      "bento",
+      "list"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "cards",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "cards",
+      "set": {}
+    },
+    {
+      "id": "compact",
+      "set": {
+        "layout": "compact"
+      }
+    },
+    {
+      "id": "overlay",
+      "set": {
+        "layout": "overlay"
+      }
+    },
+    {
+      "id": "bento",
+      "set": {
+        "layout": "bento"
+      }
+    },
+    {
+      "id": "list",
+      "set": {
+        "layout": "list"
+      }
+    },
+    {
+      "id": "cardsMuted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "ProjectTiles",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@projects"
+    },
+    {
+      "sel": "[data-testid=\"featured\"]",
+      "n": 2,
+      "when": {
+        "layout": [
+          "cards",
+          "overlay",
+          "bento"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"featured\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "compact",
+          "list"
+        ]
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "projects",
+      "collection": "projects",
+      "kind": "project",
+      "record": "Project",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "category": "terms|term:project_category",
+        "year": "metadata.year.value",
+        "summary": "metadata.summary.value",
+        "tags": "metadata.tags.value",
+        "featured": "metadata.featured.value",
+        "client": "metadata.client.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "projects",
+      "title": {
+        "$": "ui.company.projects.title"
+      },
+      "lead": {
+        "$": "ui.company.projects.lead"
+      },
+      "projects": {
+        "$": "projects"
+      },
+      "empty": {
+        "$": "ui.empty.projects"
+      },
+      "labels": {
+        "$": "ui.company.projects"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/proof.json b/xgen/specs/blocks/proof.json
new file mode 100644
index 0000000..df4be72
--- /dev/null
+++ b/xgen/specs/blocks/proof.json
@@ -0,0 +1,116 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.proof",
+  "name": "Logos and stats",
+  "docs": "A bar of customer logos and a row of key figures together.",
+  "theme": "marketing",
+  "group": "proof",
+  "organism": "ProofBand",
+  "axes": {
+    "layout": [
+      "above",
+      "beside"
+    ],
+    "logoStyle": [
+      "name",
+      "icon"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "above",
+    "logoStyle": "name",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "above",
+      "set": {}
+    },
+    {
+      "id": "beside",
+      "set": {
+        "layout": "beside"
+      }
+    },
+    {
+      "id": "icons",
+      "set": {
+        "logoStyle": "icon"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"logo\"]",
+      "n": "@logos"
+    },
+    {
+      "sel": "[data-testid=\"stat\"]",
+      "n": "@stats"
+    }
+  ],
+  "data": [
+    {
+      "as": "logos",
+      "collection": "logos",
+      "kind": "logo",
+      "record": "Logo",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value"
+      }
+    },
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "proof",
+      "title": {
+        "$": "ui.vibe.proof.title"
+      },
+      "logos": {
+        "$": "logos"
+      },
+      "empty": {
+        "$": "ui.empty.logos"
+      },
+      "stats": {
+        "$": "stats"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/quotesplit.json b/xgen/specs/blocks/quotesplit.json
new file mode 100644
index 0000000..e795421
--- /dev/null
+++ b/xgen/specs/blocks/quotesplit.json
@@ -0,0 +1,289 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.quotesplit",
+  "name": "Testimonials, split",
+  "docs": "One quote beside a picture, a rating panel or over logo tiles; stacked quotes beside a picture; four compact quotes; figures over a featured quote and a stack.",
+  "theme": "marketing",
+  "group": "proof",
+  "organism": "QuoteSplit",
+  "axes": {
+    "layout": [
+      "media",
+      "logos",
+      "rating",
+      "stack",
+      "compact",
+      "bento"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "media",
+    "mediaSide": "end",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "quoteCard",
+      "set": {}
+    },
+    {
+      "id": "logoTiles",
+      "set": {
+        "layout": "logos",
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "ratingPanel",
+      "set": {
+        "layout": "rating",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "stackedCards",
+      "set": {
+        "layout": "stack",
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "compact4",
+      "set": {
+        "layout": "compact"
+      }
+    },
+    {
+      "id": "bentoFigures",
+      "set": {
+        "layout": "bento"
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "EmptyState",
+    "MediaFrame",
+    "QuoteFigures",
+    "QuoteLogoTiles",
+    "QuoteRatingPanel",
+    "QuoteSlot",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"quote\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "media",
+          "logos",
+          "rating"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote\"]",
+      "n": 3,
+      "when": {
+        "layout": "stack"
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote\"]",
+      "n": "@testimonials",
+      "when": {
+        "layout": [
+          "compact",
+          "bento"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote-logo\"]",
+      "n": 4,
+      "when": {
+        "layout": [
+          "logos"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote-logo\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "media",
+          "rating",
+          "stack",
+          "compact",
+          "bento"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote-rating\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "rating"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote-rating\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "media",
+          "logos",
+          "stack",
+          "compact",
+          "bento"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote-figures\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "bento"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"quote-figures\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "media",
+          "logos",
+          "rating",
+          "stack",
+          "compact"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"action-primary\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "media",
+          "logos",
+          "rating"
+        ]
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "testimonials",
+      "collection": "testimonials",
+      "kind": "testimonial",
+      "record": "Quote",
+      "fields": {
+        "id": "id",
+        "author": "title",
+        "role": "metadata.role.value",
+        "company": "metadata.company.value",
+        "quote": "metadata.quote.value",
+        "rating": "metadata.rating.value",
+        "handle": "metadata.handle.value",
+        "time": "metadata.time.value|ago-short",
+        "mark": "metadata.mark.value"
+      }
+    },
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    },
+    {
+      "as": "logos",
+      "collection": "logos",
+      "kind": "logo",
+      "record": "Logo",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "quotesplit",
+      "title": {
+        "$": "ui.marketing.quoteSplit.title"
+      },
+      "lead": {
+        "$": "ui.marketing.quoteSplit.lead"
+      },
+      "badge": {
+        "$": "ui.marketing.quoteSplit.badge"
+      },
+      "quotes": {
+        "$": "testimonials"
+      },
+      "empty": {
+        "$": "ui.empty.quotes"
+      },
+      "labels": {
+        "rating": {
+          "$": "ui.testimonials.rating"
+        },
+        "byLine": {
+          "$": "ui.testimonials.byLine"
+        },
+        "handleLine": {
+          "$": "ui.testimonials.handleLine"
+        }
+      },
+      "extras": {
+        "stats": {
+          "$": "stats"
+        },
+        "logos": {
+          "$": "logos"
+        },
+        "rating": 5,
+        "score": {
+          "$": "ui.marketing.quoteSplit.score"
+        },
+        "reviews": {
+          "$": "ui.marketing.quoteSplit.reviews"
+        }
+      },
+      "actions": {
+        "mode": "two",
+        "cta": {
+          "$": "ui.marketing.quoteSplit.cta"
+        },
+        "href": "#/customers",
+        "secondary": {
+          "$": "ui.marketing.quoteSplit.secondary"
+        },
+        "secondaryHref": "#/contact"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/reviews.json b/xgen/specs/blocks/reviews.json
new file mode 100644
index 0000000..45d1e29
--- /dev/null
+++ b/xgen/specs/blocks/reviews.json
@@ -0,0 +1,109 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.reviews",
+  "name": "Reviews",
+  "docs": "Customer reviews with ratings.",
+  "theme": "commerce",
+  "group": "product",
+  "organism": "ReviewList",
+  "axes": {
+    "layout": [
+      "list",
+      "grid"
+    ],
+    "item": [
+      "card",
+      "plain"
+    ],
+    "avatar": [
+      "none",
+      "image"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "roomy"
+    ]
+  },
+  "defaults": {
+    "layout": "list",
+    "item": "card",
+    "avatar": "none",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "list",
+      "set": {}
+    },
+    {
+      "id": "grid",
+      "set": {
+        "layout": "grid"
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "item": "plain"
+      }
+    },
+    {
+      "id": "avatars",
+      "set": {
+        "avatar": "image"
+      }
+    },
+    {
+      "id": "mutedGrid",
+      "set": {
+        "layout": "grid",
+        "avatar": "image",
+        "tone": "muted",
+        "density": "roomy"
+      }
+    }
+  ],
+  "slots": [
+    "ArticleBlock",
+    "EmptyState",
+    "MediaFrame",
+    "Rating",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "reviews",
+      "collection": "reviews",
+      "kind": "review",
+      "record": "Review",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "author": "author_id|author",
+        "rating": "metadata.rating.value",
+        "text": "metadata.text.value",
+        "date": "metadata.date.value|date"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "reviews",
+      "title": {
+        "$": "ui.commerce.reviews.title"
+      },
+      "reviews": {
+        "$": "reviews"
+      },
+      "labels": {
+        "$": "ui.commerce.reviewLabels"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/shell.json b/xgen/specs/blocks/shell.json
new file mode 100644
index 0000000..c0a31aa
--- /dev/null
+++ b/xgen/specs/blocks/shell.json
@@ -0,0 +1,206 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.shell",
+  "name": "App shell",
+  "docs": "The frame of a signed-in app with a first screen: a sidebar, a top bar, or three panes.",
+  "theme": "dashboard",
+  "group": "layout",
+  "organism": "AppShell",
+  "axes": {
+    "layout": [
+      "sidebar",
+      "top",
+      "panes"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "sidebar",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "sidebar",
+      "set": {}
+    },
+    {
+      "id": "top",
+      "set": {
+        "layout": "top"
+      }
+    },
+    {
+      "id": "panes",
+      "set": {
+        "layout": "panes"
+      }
+    },
+    {
+      "id": "dense",
+      "set": {
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "AppMain",
+    "Panel"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"app-shell\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"sidebar\"]",
+      "n": 1,
+      "when": {
+        "layout": [
+          "sidebar",
+          "panes"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"sidebar\"]",
+      "n": 0,
+      "when": {
+        "layout": "top"
+      }
+    },
+    {
+      "sel": "[data-testid=\"nav-bar\"]",
+      "n": 1,
+      "when": {
+        "layout": "top"
+      }
+    },
+    {
+      "sel": "[data-testid=\"app-main\"] [data-testid=\"item\"]",
+      "n": "@metrics"
+    },
+    {
+      "sel": "[data-slot=\"bar-chart\"]",
+      "n": 1
+    }
+  ],
+  "data": [
+    {
+      "as": "sidenav",
+      "collection": "sidenav",
+      "kind": "menu_item",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    },
+    {
+      "as": "metrics",
+      "collection": "metrics",
+      "kind": "metric",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    },
+    {
+      "as": "series",
+      "collection": "series",
+      "kind": "point",
+      "record": "Point",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value"
+      }
+    },
+    {
+      "as": "activity",
+      "collection": "activity",
+      "kind": "event",
+      "record": "Event",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "time": "metadata.time.value|ago",
+        "tone": "metadata.tone.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "shell",
+      "title": {
+        "$": "ui.vibe.shell.title"
+      },
+      "nav": {
+        "label": {
+          "$": "ui.vibe.sidebar.label"
+        },
+        "brand": {
+          "$": "ui.site.header.brand"
+        },
+        "links": {
+          "$": "sidenav"
+        },
+        "current": "item-overview"
+      },
+      "user": {
+        "name": {
+          "$": "ui.vibe.sidebar.userName"
+        },
+        "email": {
+          "$": "ui.vibe.sidebar.userEmail"
+        }
+      },
+      "search": {
+        "label": {
+          "$": "ui.vibe.nav.search"
+        },
+        "shortcut": {
+          "$": "ui.vibe.nav.shortcut"
+        }
+      },
+      "metrics": {
+        "$": "metrics"
+      },
+      "chart": {
+        "title": {
+          "$": "ui.dashboard.chart.title"
+        },
+        "text": {
+          "$": "ui.dashboard.chart.text"
+        },
+        "summary": {
+          "$": "ui.dashboard.chart.summary"
+        },
+        "series": {
+          "$": "series"
+        }
+      },
+      "activity": {
+        "title": {
+          "$": "ui.dashboard.activity.title"
+        },
+        "text": {
+          "$": "ui.dashboard.activity.text"
+        },
+        "events": {
+          "$": "activity"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/sidenav.json b/xgen/specs/blocks/sidenav.json
new file mode 100644
index 0000000..71a48ec
--- /dev/null
+++ b/xgen/specs/blocks/sidenav.json
@@ -0,0 +1,116 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.sidenav",
+  "name": "Sidebar navigation",
+  "docs": "A vertical navigation with the brand on top and the user at the bottom: full, or icons only.",
+  "theme": "dashboard",
+  "group": "navigation",
+  "organism": "SidebarNav",
+  "axes": {
+    "width": [
+      "full",
+      "compact"
+    ],
+    "user": [
+      "show",
+      "hide"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "width": "full",
+    "user": "show",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "full",
+      "set": {}
+    },
+    {
+      "id": "compact",
+      "set": {
+        "width": "compact"
+      }
+    },
+    {
+      "id": "noUser",
+      "set": {
+        "user": "hide"
+      }
+    },
+    {
+      "id": "dense",
+      "set": {
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "MediaFrame",
+    "MenuEntry",
+    "NavBlock"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@sidenav"
+    },
+    {
+      "sel": "[data-testid=\"user\"]",
+      "n": 1,
+      "when": {
+        "user": "show"
+      }
+    },
+    {
+      "sel": "[data-testid=\"user\"]",
+      "n": 0,
+      "when": {
+        "user": "hide"
+      }
+    },
+    {
+      "sel": "[aria-current=\"page\"]",
+      "n": 1
+    }
+  ],
+  "data": [
+    {
+      "as": "sidenav",
+      "collection": "sidenav",
+      "kind": "menu_item",
+      "record": "NavLink",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "icon": "metadata.icon.value",
+        "href": "slug|route"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "label": {
+        "$": "ui.vibe.sidebar.label"
+      },
+      "brand": {
+        "$": "ui.site.header.brand"
+      },
+      "links": {
+        "$": "sidenav"
+      },
+      "current": "item-orders",
+      "userName": {
+        "$": "ui.vibe.sidebar.userName"
+      },
+      "userEmail": {
+        "$": "ui.vibe.sidebar.userEmail"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/sitemap.json b/xgen/specs/blocks/sitemap.json
new file mode 100644
index 0000000..cfe8fa1
--- /dev/null
+++ b/xgen/specs/blocks/sitemap.json
@@ -0,0 +1,163 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.sitemap",
+  "name": "Sitemap footer",
+  "docs": "A footer with the brand, groups of links and the copyright; a single row, a sign-up first or a status pill.",
+  "theme": "marketing",
+  "group": "navigation",
+  "organism": "SitemapFooter",
+  "axes": {
+    "layout": [
+      "columns",
+      "row",
+      "card"
+    ],
+    "signup.mode": [
+      "none",
+      "first"
+    ],
+    "status.mode": [
+      "none",
+      "show"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "columns",
+    "signup.mode": "none",
+    "status.mode": "none",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "columns",
+      "set": {}
+    },
+    {
+      "id": "card",
+      "set": {
+        "layout": "card"
+      }
+    },
+    {
+      "id": "row",
+      "set": {
+        "layout": "row"
+      }
+    },
+    {
+      "id": "newsletter",
+      "set": {
+        "signup.mode": "first"
+      }
+    },
+    {
+      "id": "status",
+      "set": {
+        "status.mode": "show"
+      }
+    },
+    {
+      "id": "compact",
+      "set": {
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "FooterCard",
+    "FooterColumns",
+    "MenuEntry",
+    "NavBlock",
+    "Pill"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"group\"]",
+      "n": "@sitemap"
+    },
+    {
+      "sel": "[data-testid=\"group\"]",
+      "cols": "@sitemap",
+      "when": {
+        "layout": "columns"
+      }
+    },
+    {
+      "sel": "[data-testid=\"signup\"]",
+      "n": 1,
+      "when": {
+        "signup.mode": "first"
+      }
+    },
+    {
+      "sel": "[data-testid=\"signup\"]",
+      "n": 0,
+      "when": {
+        "signup.mode": "none"
+      }
+    },
+    {
+      "sel": "[data-slot=\"pill\"]",
+      "n": 1,
+      "when": {
+        "status.mode": "show"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "sitemap",
+      "collection": "sitemap",
+      "kind": "menu_item",
+      "record": "MegaGroup",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "icon": "metadata.icon.value",
+        "links": "id|menu",
+        "href": "slug|route"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "sitemap",
+      "label": {
+        "$": "ui.vibe.sitemap.label"
+      },
+      "brand": {
+        "$": "ui.site.header.brand"
+      },
+      "tagline": {
+        "$": "ui.vibe.sitemap.tagline"
+      },
+      "copyright": {
+        "$": "ui.vibe.sitemap.copyright"
+      },
+      "groups": {
+        "$": "sitemap"
+      },
+      "signup": {
+        "title": {
+          "$": "ui.vibe.sitemap.signupTitle"
+        },
+        "label": {
+          "$": "ui.vibe.sitemap.signupLabel"
+        },
+        "submit": {
+          "$": "ui.vibe.sitemap.signupSubmit"
+        }
+      },
+      "status": {
+        "label": {
+          "$": "ui.vibe.sitemap.status"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/skeleton.json b/xgen/specs/blocks/skeleton.json
new file mode 100644
index 0000000..c13a8c1
--- /dev/null
+++ b/xgen/specs/blocks/skeleton.json
@@ -0,0 +1,100 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.skeleton",
+  "name": "Loading state",
+  "docs": "Grey blocks in the shape of what is coming: cards, a list or an article.",
+  "theme": "dashboard",
+  "group": "states",
+  "organism": "SkeletonLayout",
+  "axes": {
+    "shape": [
+      "cards",
+      "list",
+      "article"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "shape": "cards",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "cards",
+      "set": {}
+    },
+    {
+      "id": "list",
+      "set": {
+        "shape": "list"
+      }
+    },
+    {
+      "id": "article",
+      "set": {
+        "shape": "article"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[role=\"status\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@placeholders",
+      "when": {
+        "shape": [
+          "cards",
+          "list"
+        ]
+      }
+    },
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@placeholders",
+      "when": {
+        "shape": "article"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "placeholders",
+      "collection": "placeholders",
+      "kind": "placeholder",
+      "record": "Line",
+      "fields": {
+        "id": "id"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "skeleton",
+      "title": {
+        "$": "ui.vibe.skeleton.title"
+      },
+      "label": {
+        "$": "ui.vibe.skeleton.label"
+      },
+      "lines": {
+        "$": "placeholders"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/slots.json b/xgen/specs/blocks/slots.json
new file mode 100644
index 0000000..7c29ea1
--- /dev/null
+++ b/xgen/specs/blocks/slots.json
@@ -0,0 +1,143 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.slots",
+  "name": "Delivery window",
+  "docs": "Days with their delivery windows as radio chips, beside the zone card.",
+  "theme": "commerce",
+  "group": "delivery",
+  "organism": "SlotBoard",
+  "axes": {
+    "layout": [
+      "split",
+      "stacked"
+    ],
+    "item": [
+      "card",
+      "plain"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "split",
+    "item": "card",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "split",
+      "set": {}
+    },
+    {
+      "id": "plain",
+      "set": {
+        "item": "plain"
+      }
+    },
+    {
+      "id": "stacked",
+      "set": {
+        "layout": "stacked",
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "Field",
+    "SectionFrame",
+    "SlotGrid"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"day\"]",
+      "n": "@days"
+    },
+    {
+      "sel": "input[type=\"radio\"]",
+      "n": 12
+    },
+    {
+      "sel": "input[type=\"radio\"]:disabled",
+      "n": 4
+    },
+    {
+      "sel": "[data-testid=\"aside\"]",
+      "n": 1,
+      "when": {
+        "layout": "split"
+      }
+    },
+    {
+      "sel": "[data-testid=\"aside\"]",
+      "n": 0,
+      "when": {
+        "layout": "stacked"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "days",
+      "collection": "days",
+      "kind": "day",
+      "record": "Day",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "note": "metadata.note.value",
+        "slots": "metadata.slots.value",
+        "closed": "metadata.closed.value"
+      }
+    },
+    {
+      "as": "zones",
+      "collection": "zones",
+      "kind": "zone",
+      "record": "Zone",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "area": "metadata.area.value",
+        "price": "metadata.price.value",
+        "freeFrom": "metadata.freeFrom.value",
+        "minOrder": "metadata.minOrder.value",
+        "time": "metadata.time.value",
+        "express": "metadata.express.value",
+        "currency": "metadata.currency.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "slots",
+      "title": {
+        "$": "ui.commerce.slots.title"
+      },
+      "lead": {
+        "$": "ui.commerce.slots.lead"
+      },
+      "days": {
+        "$": "days"
+      },
+      "empty": {
+        "$": "ui.empty.days"
+      },
+      "zone": {
+        "op": "pick",
+        "args": [
+          {
+            "$": "zones"
+          },
+          "zone-central"
+        ]
+      },
+      "labels": {
+        "$": "ui.commerce.slots"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/stats.json b/xgen/specs/blocks/stats.json
new file mode 100644
index 0000000..48d94bd
--- /dev/null
+++ b/xgen/specs/blocks/stats.json
@@ -0,0 +1,181 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.stats",
+  "name": "Stats",
+  "docs": "Key numbers as figures, cards or figures with icons.",
+  "theme": "marketing",
+  "group": "proof",
+  "organism": "StatsBand",
+  "axes": {
+    "cols": [
+      "2",
+      "3",
+      "4"
+    ],
+    "layout": [
+      "row",
+      "stack"
+    ],
+    "surface": [
+      "none",
+      "image",
+      "panel"
+    ],
+    "item": [
+      "plain",
+      "card",
+      "icon"
+    ],
+    "align": [
+      "start",
+      "center"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "cols": "4",
+    "layout": "row",
+    "surface": "none",
+    "item": "plain",
+    "align": "center",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "plain4",
+      "set": {}
+    },
+    {
+      "id": "panel",
+      "set": {
+        "surface": "panel",
+        "density": "compact"
+      },
+      "props": {
+        "title": ""
+      }
+    },
+    {
+      "id": "stack",
+      "set": {
+        "layout": "stack",
+        "align": "start"
+      }
+    },
+    {
+      "id": "image",
+      "set": {
+        "surface": "image",
+        "density": "roomy"
+      }
+    },
+    {
+      "id": "cards",
+      "set": {
+        "cols": "3",
+        "item": "card"
+      },
+      "props": {
+        "stats": {
+          "op": "list",
+          "args": [
+            {
+              "op": "nth",
+              "args": [
+                {
+                  "$": "stats"
+                },
+                0
+              ]
+            },
+            {
+              "op": "nth",
+              "args": [
+                {
+                  "$": "stats"
+                },
+                1
+              ]
+            },
+            {
+              "op": "nth",
+              "args": [
+                {
+                  "$": "stats"
+                },
+                2
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "id": "icons",
+      "set": {
+        "item": "icon",
+        "align": "start"
+      }
+    },
+    {
+      "id": "muted2",
+      "set": {
+        "cols": "2",
+        "tone": "muted",
+        "density": "roomy"
+      }
+    },
+    {
+      "id": "cardsCompact",
+      "set": {
+        "item": "card",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "Backdrop",
+    "EmptyState",
+    "SectionFrame",
+    "StatFigure"
+  ],
+  "data": [
+    {
+      "as": "stats",
+      "collection": "stats",
+      "kind": "stat",
+      "record": "Stat",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "value": "metadata.value.value|number",
+        "icon": "metadata.icon.value",
+        "hint": "metadata.hint.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "stats",
+      "title": {
+        "$": "ui.marketing.stats.title"
+      },
+      "stats": {
+        "$": "stats"
+      },
+      "empty": {
+        "$": "ui.marketing.stats.empty"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/stepper.json b/xgen/specs/blocks/stepper.json
new file mode 100644
index 0000000..9af44cd
--- /dev/null
+++ b/xgen/specs/blocks/stepper.json
@@ -0,0 +1,93 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.stepper",
+  "name": "Stepper",
+  "docs": "A multi-step form header with the current step.",
+  "theme": "onboarding",
+  "group": "setup",
+  "organism": "Stepper",
+  "axes": {
+    "layout": [
+      "horizontal",
+      "vertical"
+    ],
+    "marker": [
+      "number",
+      "icon"
+    ],
+    "summary": [
+      "show",
+      "hide"
+    ]
+  },
+  "defaults": {
+    "layout": "horizontal",
+    "marker": "number",
+    "summary": "show"
+  },
+  "variants": [
+    {
+      "id": "horizontal",
+      "set": {}
+    },
+    {
+      "id": "vertical",
+      "set": {
+        "layout": "vertical"
+      }
+    },
+    {
+      "id": "icons",
+      "set": {
+        "marker": "icon"
+      }
+    },
+    {
+      "id": "bare",
+      "set": {
+        "summary": "hide",
+        "layout": "vertical",
+        "marker": "icon"
+      }
+    }
+  ],
+  "slots": [
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "steps",
+      "collection": "steps",
+      "kind": "step",
+      "record": "Step",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "stepper",
+      "title": {
+        "$": "ui.onboarding.stepper.title"
+      },
+      "steps": {
+        "$": "steps"
+      },
+      "current": 2,
+      "stepLabel": {
+        "$": "ui.onboarding.stepper.stepLabel"
+      },
+      "back": {
+        "$": "ui.onboarding.stepper.back"
+      },
+      "next": {
+        "$": "ui.onboarding.stepper.next"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/steps.json b/xgen/specs/blocks/steps.json
new file mode 100644
index 0000000..6078bc1
--- /dev/null
+++ b/xgen/specs/blocks/steps.json
@@ -0,0 +1,111 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.steps",
+  "name": "How it works",
+  "docs": "Numbered or icon steps in a row or a column.",
+  "theme": "marketing",
+  "group": "how-it-works",
+  "organism": "StepsList",
+  "axes": {
+    "layout": [
+      "row",
+      "column"
+    ],
+    "marker": [
+      "number",
+      "icon"
+    ],
+    "align": [
+      "start",
+      "center"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "row",
+    "marker": "number",
+    "align": "start",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "row",
+      "set": {}
+    },
+    {
+      "id": "rowIcons",
+      "set": {
+        "marker": "icon"
+      }
+    },
+    {
+      "id": "column",
+      "set": {
+        "layout": "column"
+      }
+    },
+    {
+      "id": "centered",
+      "set": {
+        "align": "center",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "columnIcons",
+      "set": {
+        "layout": "column",
+        "marker": "icon",
+        "density": "roomy"
+      }
+    },
+    {
+      "id": "compact",
+      "set": {
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "steps",
+      "collection": "steps",
+      "kind": "step",
+      "record": "Step",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "steps",
+      "title": {
+        "$": "ui.marketing.steps.title"
+      },
+      "steps": {
+        "$": "steps"
+      },
+      "empty": {
+        "$": "ui.empty.steps"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/sticky.json b/xgen/specs/blocks/sticky.json
new file mode 100644
index 0000000..724c52f
--- /dev/null
+++ b/xgen/specs/blocks/sticky.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.sticky",
+  "name": "Sticky feature list",
+  "docs": "A picture that stays in view beside a list of features. Following the section being read is a port contract (ScrollSpy).",
+  "theme": "marketing",
+  "group": "features",
+  "organism": "FeatureSticky",
+  "axes": {
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "item": [
+      "plain",
+      "card"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "mediaSide": "end",
+    "item": "plain",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "end",
+      "set": {}
+    },
+    {
+      "id": "start",
+      "set": {
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "card",
+      "set": {
+        "item": "card"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@features"
+    },
+    {
+      "sel": "[data-slot=\"media-frame\"]",
+      "n": 1
+    }
+  ],
+  "data": [
+    {
+      "as": "features",
+      "collection": "features",
+      "kind": "feature",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "sticky",
+      "title": {
+        "$": "ui.vibe.sticky.title"
+      },
+      "features": {
+        "$": "features"
+      },
+      "empty": {
+        "$": "ui.empty.features"
+      },
+      "active": "feature-clear"
+    }
+  }
+}
diff --git a/xgen/specs/blocks/storehero.json b/xgen/specs/blocks/storehero.json
new file mode 100644
index 0000000..ca71fe1
--- /dev/null
+++ b/xgen/specs/blocks/storehero.json
@@ -0,0 +1,147 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.storehero",
+  "name": "Store hero",
+  "docs": "The hero of a store with promises under the actions, beside a picture with an offer card or over a faint picture.",
+  "theme": "commerce",
+  "group": "storefront",
+  "organism": "StoreHero",
+  "axes": {
+    "layout": [
+      "overlay",
+      "backdrop"
+    ],
+    "mediaSide": [
+      "end",
+      "start"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "overlay",
+    "mediaSide": "end",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "overlay",
+      "set": {}
+    },
+    {
+      "id": "overlayStart",
+      "set": {
+        "mediaSide": "start"
+      }
+    },
+    {
+      "id": "backdrop",
+      "set": {
+        "layout": "backdrop"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted"
+      },
+      "props": {
+        "actions": {
+          "mode": "one",
+          "cta": {
+            "$": "ui.commerce.storeHero.cta"
+          },
+          "href": "#/catalog"
+        }
+      }
+    }
+  ],
+  "slots": [
+    "ActionGroup",
+    "Backdrop",
+    "OfferMedia",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"perk\"]",
+      "n": 3
+    },
+    {
+      "sel": "[data-testid=\"offer-card\"]",
+      "n": 1,
+      "when": {
+        "layout": "overlay"
+      }
+    },
+    {
+      "sel": "[data-testid=\"offer-card\"]",
+      "n": 0,
+      "when": {
+        "layout": "backdrop"
+      }
+    },
+    {
+      "sel": "[data-testid=\"backdrop\"]",
+      "n": 1,
+      "when": {
+        "layout": "backdrop"
+      }
+    },
+    {
+      "sel": "[data-testid=\"backdrop\"]",
+      "n": 0,
+      "when": {
+        "layout": "overlay"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "perks",
+      "collection": "perks",
+      "kind": "perk",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "storehero",
+      "title": {
+        "$": "ui.commerce.storeHero.title"
+      },
+      "lead": {
+        "$": "ui.commerce.storeHero.lead"
+      },
+      "badge": {
+        "$": "ui.commerce.storeHero.badge"
+      },
+      "perks": {
+        "$": "perks"
+      },
+      "card": {
+        "$": "ui.commerce.storeHero.card"
+      },
+      "actions": {
+        "mode": "two",
+        "cta": {
+          "$": "ui.commerce.storeHero.cta"
+        },
+        "href": "#/catalog",
+        "secondary": {
+          "$": "ui.commerce.storeHero.secondary"
+        },
+        "secondaryHref": "#/delivery"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/storytabs.json b/xgen/specs/blocks/storytabs.json
new file mode 100644
index 0000000..2a5993f
--- /dev/null
+++ b/xgen/specs/blocks/storytabs.json
@@ -0,0 +1,125 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.storytabs",
+  "name": "Story in steps",
+  "docs": "Year tabs over the panel of the chosen year, or the heading beside a picture with arrows and one dot per step. Choosing a step is an event.",
+  "theme": "content",
+  "group": "story",
+  "organism": "StoryTabs",
+  "axes": {
+    "layout": [
+      "years",
+      "carousel"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "years",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "yearTabs",
+      "set": {}
+    },
+    {
+      "id": "carouselSplit",
+      "set": {
+        "layout": "carousel"
+      }
+    },
+    {
+      "id": "yearTabsMuted",
+      "set": {
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "SectionFrame",
+    "StoryDots",
+    "StoryPanel"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"story-tab\"]",
+      "n": "@milestones",
+      "when": {
+        "layout": "years"
+      }
+    },
+    {
+      "sel": "[data-testid=\"story-panel\"]",
+      "n": 1,
+      "when": {
+        "layout": "years"
+      }
+    },
+    {
+      "sel": "[data-testid=\"story-dot\"]",
+      "n": "@milestones",
+      "when": {
+        "layout": "carousel"
+      }
+    },
+    {
+      "sel": "[data-testid=\"story-arrow\"]",
+      "n": 2,
+      "when": {
+        "layout": "carousel"
+      }
+    },
+    {
+      "sel": "[data-testid=\"story-tab\"]",
+      "n": 0,
+      "when": {
+        "layout": "carousel"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "milestones",
+      "collection": "milestones",
+      "kind": "milestone",
+      "record": "Milestone",
+      "fields": {
+        "id": "id",
+        "date": "metadata.date.value",
+        "title": "title",
+        "text": "metadata.text.value",
+        "tag": "metadata.tag.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "storytabs",
+      "title": {
+        "$": "ui.company.storyTabs.title"
+      },
+      "lead": {
+        "$": "ui.company.storyTabs.lead"
+      },
+      "badge": {
+        "$": "ui.company.storyTabs.badge"
+      },
+      "steps": {
+        "$": "milestones"
+      },
+      "empty": {
+        "$": "ui.empty.milestones"
+      },
+      "active": "milestone-runtimes",
+      "labels": {
+        "$": "ui.company.storyTabs.labels"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/summary.json b/xgen/specs/blocks/summary.json
new file mode 100644
index 0000000..36eeef6
--- /dev/null
+++ b/xgen/specs/blocks/summary.json
@@ -0,0 +1,101 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.summary",
+  "name": "Order summary",
+  "docs": "Subtotal, shipping, tax and the total.",
+  "theme": "commerce",
+  "group": "checkout",
+  "organism": "OrderSummary",
+  "axes": {
+    "layout": [
+      "card",
+      "plain"
+    ],
+    "cta": [
+      "show",
+      "hide"
+    ],
+    "note": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "card",
+    "cta": "show",
+    "note": "show",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "card",
+      "set": {}
+    },
+    {
+      "id": "plain",
+      "set": {
+        "layout": "plain",
+        "note": "hide"
+      }
+    },
+    {
+      "id": "noCta",
+      "set": {
+        "cta": "hide"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "summary",
+      "collection": "summary",
+      "kind": "summaryrow",
+      "record": "SummaryRow",
+      "fields": {
+        "id": "id",
+        "label": "title",
+        "amount": "metadata.amount.value",
+        "currency": "metadata.currency.value",
+        "strong": "metadata.strong.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "summary",
+      "title": {
+        "$": "ui.commerce.summary.title"
+      },
+      "rows": {
+        "$": "summary"
+      },
+      "empty": {
+        "$": "ui.empty.summary"
+      },
+      "labels": {
+        "$": "ui.commerce.summary"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/team.json b/xgen/specs/blocks/team.json
new file mode 100644
index 0000000..3f4b4d5
--- /dev/null
+++ b/xgen/specs/blocks/team.json
@@ -0,0 +1,144 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.team",
+  "name": "Team",
+  "docs": "The people of a team as cards, a minimal grid, detailed cards, rows beside a picture or a directory.",
+  "theme": "marketing",
+  "group": "company",
+  "organism": "TeamGrid",
+  "axes": {
+    "layout": [
+      "cards",
+      "minimal",
+      "detailed",
+      "list",
+      "directory"
+    ],
+    "cols": [
+      "1-3",
+      "1-4"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "cards",
+    "cols": "1-4",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "cards4",
+      "set": {}
+    },
+    {
+      "id": "cards3",
+      "set": {
+        "cols": "1-3",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "minimal",
+      "set": {
+        "layout": "minimal"
+      }
+    },
+    {
+      "id": "detailed",
+      "set": {
+        "layout": "detailed",
+        "cols": "1-3"
+      }
+    },
+    {
+      "id": "list",
+      "set": {
+        "layout": "list"
+      }
+    },
+    {
+      "id": "directory",
+      "set": {
+        "layout": "directory",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "MemberRow",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@members"
+    },
+    {
+      "sel": "[data-slot=\"media\"]",
+      "n": 1,
+      "when": {
+        "layout": "list"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "cards",
+          "minimal",
+          "detailed",
+          "directory"
+        ]
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "members",
+      "collection": "members",
+      "kind": "member",
+      "record": "Member",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "role": "metadata.role.value",
+        "dept": "metadata.dept.value",
+        "location": "metadata.location.value",
+        "bio": "metadata.bio.value",
+        "skills": "metadata.skills.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "team",
+      "title": {
+        "$": "ui.company.team.title"
+      },
+      "lead": {
+        "$": "ui.company.team.lead"
+      },
+      "members": {
+        "$": "members"
+      },
+      "empty": {
+        "$": "ui.empty.members"
+      },
+      "depts": {
+        "$": "ui.company.depts"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/templates.json b/xgen/specs/blocks/templates.json
new file mode 100644
index 0000000..c2154a2
--- /dev/null
+++ b/xgen/specs/blocks/templates.json
@@ -0,0 +1,125 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.templates",
+  "name": "Template gallery",
+  "docs": "Template gallery: filters, a browse-all button and an 8-card MediaFrame grid.",
+  "theme": "marketing",
+  "group": "gallery",
+  "organism": "TemplateGrid",
+  "axes": {
+    "cols": [
+      "1-3",
+      "1-4"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "cols": "1-4",
+    "tone": "default",
+    "density": "compact"
+  },
+  "variants": [
+    {
+      "id": "grid4",
+      "set": {
+        "cols": "1-4",
+        "density": "default"
+      }
+    },
+    {
+      "id": "grid3",
+      "set": {
+        "cols": "1-3"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "roomy",
+      "set": {
+        "density": "roomy"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"template-card\"]",
+      "n": "@templates"
+    },
+    {
+      "sel": "[data-testid=\"template-filter\"]",
+      "n": "@templateFilters"
+    },
+    {
+      "sel": "[data-testid=\"template-browse\"]",
+      "n": 1
+    }
+  ],
+  "data": [
+    {
+      "as": "templates",
+      "collection": "templates",
+      "kind": "template",
+      "record": "Template",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "views": "metadata.views.value|compact",
+        "likes": "metadata.likes.value|compact",
+        "topic": "metadata.topic.value"
+      }
+    },
+    {
+      "as": "templateFilters",
+      "collection": "prompts",
+      "kind": "prompt",
+      "record": "Filter",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "value": "metadata.value.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "templates",
+      "title": {
+        "$": "ui.vibe.templates.title"
+      },
+      "templates": {
+        "$": "templates"
+      },
+      "filters": {
+        "$": "templateFilters"
+      },
+      "labels": {
+        "$": "ui.vibe.templates"
+      },
+      "browseHref": "#/",
+      "empty": {
+        "$": "ui.empty.templates"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/testimonials.json b/xgen/specs/blocks/testimonials.json
new file mode 100644
index 0000000..6b4ceab
--- /dev/null
+++ b/xgen/specs/blocks/testimonials.json
@@ -0,0 +1,182 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.testimonials",
+  "name": "Testimonials",
+  "docs": "Customer quotes as cards or plain figures.",
+  "theme": "marketing",
+  "group": "proof",
+  "organism": "TestimonialGrid",
+  "axes": {
+    "layout": [
+      "grid",
+      "single",
+      "stack",
+      "masonry",
+      "strip"
+    ],
+    "cols": [
+      "1-2",
+      "1-3"
+    ],
+    "item.kind": [
+      "card",
+      "plain",
+      "social"
+    ],
+    "item.avatar": [
+      "none",
+      "image"
+    ],
+    "item.rating": [
+      "show",
+      "hide"
+    ],
+    "item.mark": [
+      "none",
+      "icon"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "roomy",
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "grid",
+    "cols": "1-3",
+    "item.kind": "card",
+    "item.avatar": "image",
+    "item.rating": "show",
+    "item.mark": "none",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "grid3",
+      "set": {}
+    },
+    {
+      "id": "masonry",
+      "set": {
+        "layout": "masonry",
+        "item.rating": "hide"
+      }
+    },
+    {
+      "id": "strip",
+      "set": {
+        "layout": "strip",
+        "item.avatar": "none"
+      }
+    },
+    {
+      "id": "social",
+      "set": {
+        "item.kind": "social",
+        "layout": "masonry",
+        "item.rating": "hide"
+      }
+    },
+    {
+      "id": "featured",
+      "set": {
+        "layout": "single",
+        "item.kind": "plain",
+        "item.rating": "hide",
+        "item.mark": "icon"
+      }
+    },
+    {
+      "id": "grid2",
+      "set": {
+        "cols": "1-2"
+      }
+    },
+    {
+      "id": "single",
+      "set": {
+        "layout": "single",
+        "item.kind": "plain",
+        "item.rating": "hide"
+      }
+    },
+    {
+      "id": "stack",
+      "set": {
+        "layout": "stack",
+        "item.avatar": "none"
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "item.kind": "plain",
+        "item.avatar": "none",
+        "tone": "muted",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "noRating",
+      "set": {
+        "item.rating": "hide",
+        "density": "roomy"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "QuoteCard",
+    "SectionFrame"
+  ],
+  "data": [
+    {
+      "as": "testimonials",
+      "collection": "testimonials",
+      "kind": "testimonial",
+      "record": "Quote",
+      "fields": {
+        "id": "id",
+        "author": "title",
+        "role": "metadata.role.value",
+        "company": "metadata.company.value",
+        "quote": "metadata.quote.value",
+        "rating": "metadata.rating.value",
+        "handle": "metadata.handle.value",
+        "time": "metadata.time.value|ago-short",
+        "mark": "metadata.mark.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "testimonials",
+      "title": {
+        "$": "ui.marketing.testimonials.title"
+      },
+      "quotes": {
+        "$": "testimonials"
+      },
+      "empty": {
+        "$": "ui.empty.quotes"
+      },
+      "labels": {
+        "rating": {
+          "$": "ui.testimonials.rating"
+        },
+        "byLine": {
+          "$": "ui.testimonials.byLine"
+        },
+        "handleLine": {
+          "$": "ui.testimonials.handleLine"
+        }
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/timeline.json b/xgen/specs/blocks/timeline.json
new file mode 100644
index 0000000..01b8eef
--- /dev/null
+++ b/xgen/specs/blocks/timeline.json
@@ -0,0 +1,116 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.timeline",
+  "name": "Timeline",
+  "docs": "Milestones on a vertical line beside a picture, in a narrow column, or in a row.",
+  "theme": "content",
+  "group": "story",
+  "organism": "MilestoneTimeline",
+  "axes": {
+    "layout": [
+      "split",
+      "stacked",
+      "row"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "split",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "split",
+      "set": {}
+    },
+    {
+      "id": "stacked",
+      "set": {
+        "layout": "stacked"
+      }
+    },
+    {
+      "id": "row",
+      "set": {
+        "layout": "row"
+      }
+    },
+    {
+      "id": "rowMuted",
+      "set": {
+        "layout": "row",
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@milestones"
+    },
+    {
+      "sel": "[data-slot=\"media\"]",
+      "n": 1,
+      "when": {
+        "layout": "split"
+      }
+    },
+    {
+      "sel": "[data-slot=\"media\"]",
+      "n": 0,
+      "when": {
+        "layout": [
+          "stacked",
+          "row"
+        ]
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "milestones",
+      "collection": "milestones",
+      "kind": "milestone",
+      "record": "Milestone",
+      "fields": {
+        "id": "id",
+        "date": "metadata.date.value",
+        "title": "title",
+        "text": "metadata.text.value",
+        "tag": "metadata.tag.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "timeline",
+      "title": {
+        "$": "ui.company.timeline.title"
+      },
+      "lead": {
+        "$": "ui.company.timeline.lead"
+      },
+      "milestones": {
+        "$": "milestones"
+      },
+      "empty": {
+        "$": "ui.empty.milestones"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/tour.json b/xgen/specs/blocks/tour.json
new file mode 100644
index 0000000..979f892
--- /dev/null
+++ b/xgen/specs/blocks/tour.json
@@ -0,0 +1,96 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.tour",
+  "name": "Tour callout",
+  "docs": "One stop of a product tour: the explained element and a callout with the step, a sentence and buttons. Placing it on the real element is a port contract.",
+  "theme": "onboarding",
+  "group": "guidance",
+  "organism": "TourCallout",
+  "axes": {
+    "placement": [
+      "below",
+      "above",
+      "end"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "placement": "below",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "below",
+      "set": {}
+    },
+    {
+      "id": "above",
+      "set": {
+        "placement": "above"
+      }
+    },
+    {
+      "id": "end",
+      "set": {
+        "placement": "end"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"tour-target\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"tour-callout\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"tour\"]",
+      "n": 1
+    }
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "tour",
+      "title": {
+        "$": "ui.vibe.tour.title"
+      },
+      "text": {
+        "$": "ui.vibe.tour.text"
+      },
+      "target": {
+        "$": "ui.vibe.tour.target"
+      },
+      "position": {
+        "$": "ui.vibe.tour.position"
+      },
+      "skip": {
+        "$": "ui.vibe.tour.skip"
+      },
+      "next": {
+        "$": "ui.vibe.tour.next"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/usage.json b/xgen/specs/blocks/usage.json
new file mode 100644
index 0000000..e7981a0
--- /dev/null
+++ b/xgen/specs/blocks/usage.json
@@ -0,0 +1,102 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.usage",
+  "name": "Usage calculator",
+  "docs": "A slider for how much is used and the price it gives. The estimate follows the slider; the page keeps the value.",
+  "theme": "marketing",
+  "group": "pricing",
+  "organism": "UsageCalculator",
+  "axes": {
+    "layout": [
+      "card",
+      "plain"
+    ],
+    "ends": [
+      "show",
+      "hide"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "layout": "card",
+    "ends": "show",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "card",
+      "set": {}
+    },
+    {
+      "id": "plain",
+      "set": {
+        "layout": "plain"
+      }
+    },
+    {
+      "id": "noEnds",
+      "set": {
+        "ends": "hide"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "input[type=\"range\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"estimate\"]",
+      "n": 1
+    }
+  ],
+  "data": [],
+  "sample": {
+    "props": {
+      "id": "usage",
+      "title": {
+        "$": "ui.vibe.usage.title"
+      },
+      "text": {
+        "$": "ui.vibe.usage.text"
+      },
+      "usage": 5000,
+      "slider": {
+        "min": 100,
+        "max": 10000,
+        "label": {
+          "$": "ui.vibe.usage.slider"
+        },
+        "unit": {
+          "$": "ui.vibe.usage.unit"
+        }
+      },
+      "price": {
+        "rate": 1,
+        "currency": {
+          "$": "ui.vibe.usage.currency"
+        },
+        "label": {
+          "$": "ui.vibe.usage.estimate"
+        }
+      },
+      "cta": {
+        "$": "ui.vibe.usage.cta"
+      },
+      "href": "#/"
+    }
+  }
+}
diff --git a/xgen/specs/blocks/usp.json b/xgen/specs/blocks/usp.json
new file mode 100644
index 0000000..2ad7d70
--- /dev/null
+++ b/xgen/specs/blocks/usp.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.usp",
+  "name": "Store promises",
+  "docs": "Free delivery, returns, warranty and help in one band.",
+  "theme": "commerce",
+  "group": "storefront",
+  "organism": "UspStrip",
+  "axes": {
+    "layout": [
+      "strip",
+      "cards",
+      "bar"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "strip",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "strip",
+      "set": {}
+    },
+    {
+      "id": "cards",
+      "set": {
+        "layout": "cards"
+      },
+      "props": {
+        "title": {
+          "$": "ui.commerce.usp.title"
+        }
+      }
+    },
+    {
+      "id": "stripCompact",
+      "set": {
+        "density": "compact"
+      }
+    },
+    {
+      "id": "bar",
+      "set": {
+        "layout": "bar",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "barMuted",
+      "set": {
+        "layout": "bar",
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@perks"
+    }
+  ],
+  "data": [
+    {
+      "as": "perks",
+      "collection": "perks",
+      "kind": "perk",
+      "record": "Feature",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "usp",
+      "perks": {
+        "$": "perks"
+      },
+      "empty": {
+        "$": "ui.empty.perks"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/videomodal.json b/xgen/specs/blocks/videomodal.json
new file mode 100644
index 0000000..fbd68dd
--- /dev/null
+++ b/xgen/specs/blocks/videomodal.json
@@ -0,0 +1,121 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.videomodal",
+  "name": "Video walkthrough",
+  "docs": "A dialog with a walkthrough video and an optional list of chapters. Opening and playing are port contracts.",
+  "theme": "onboarding",
+  "group": "guidance",
+  "organism": "VideoModal",
+  "axes": {
+    "size": [
+      "default",
+      "wide"
+    ],
+    "outline": [
+      "none",
+      "chapters"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ]
+  },
+  "defaults": {
+    "size": "default",
+    "outline": "none",
+    "tone": "default"
+  },
+  "variants": [
+    {
+      "id": "default",
+      "set": {}
+    },
+    {
+      "id": "wide",
+      "set": {
+        "size": "wide"
+      }
+    },
+    {
+      "id": "chapters",
+      "set": {
+        "outline": "chapters"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted"
+      }
+    }
+  ],
+  "slots": [
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[role=\"dialog\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"play\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"modal-close\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"chapters\"] [data-testid=\"item\"]",
+      "n": "@chapters",
+      "when": {
+        "outline": "chapters"
+      }
+    },
+    {
+      "sel": "[data-testid=\"chapters\"]",
+      "n": 0,
+      "when": {
+        "outline": "none"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "chapters",
+      "collection": "chapters",
+      "kind": "chapter",
+      "record": "Chapter",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "modal",
+      "title": {
+        "$": "ui.vibe.modal.title"
+      },
+      "text": {
+        "$": "ui.vibe.modal.text"
+      },
+      "close": {
+        "$": "ui.vibe.modal.close"
+      },
+      "play": {
+        "$": "ui.vibe.modal.play"
+      },
+      "chaptersTitle": {
+        "$": "ui.vibe.modal.chapters"
+      },
+      "chapters": {
+        "$": "chapters"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/videos.json b/xgen/specs/blocks/videos.json
new file mode 100644
index 0000000..a5748ee
--- /dev/null
+++ b/xgen/specs/blocks/videos.json
@@ -0,0 +1,118 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.videos",
+  "name": "Video testimonials",
+  "docs": "Customer videos as thumbnails with a play button. Playing is a port contract (VideoEmbed).",
+  "theme": "marketing",
+  "group": "proof",
+  "organism": "VideoGrid",
+  "axes": {
+    "cols": [
+      "1-2",
+      "1-3"
+    ],
+    "caption": [
+      "below",
+      "overlay"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "cols": "1-3",
+    "caption": "below",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "grid3",
+      "set": {}
+    },
+    {
+      "id": "grid2",
+      "set": {
+        "cols": "1-2"
+      }
+    },
+    {
+      "id": "overlay",
+      "set": {
+        "caption": "overlay"
+      }
+    },
+    {
+      "id": "muted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "FigureBlock",
+    "MediaFrame",
+    "SectionFrame"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@testimonials"
+    },
+    {
+      "sel": "[data-testid=\"item\"]",
+      "cols": "$cols"
+    },
+    {
+      "sel": "[data-testid=\"play\"]",
+      "n": "@testimonials"
+    }
+  ],
+  "data": [
+    {
+      "as": "testimonials",
+      "collection": "testimonials",
+      "kind": "testimonial",
+      "record": "Quote",
+      "fields": {
+        "id": "id",
+        "author": "title",
+        "role": "metadata.role.value",
+        "company": "metadata.company.value",
+        "quote": "metadata.quote.value",
+        "rating": "metadata.rating.value",
+        "handle": "metadata.handle.value",
+        "time": "metadata.time.value|ago-short",
+        "mark": "metadata.mark.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "videos",
+      "title": {
+        "$": "ui.vibe.videos.title"
+      },
+      "quotes": {
+        "$": "testimonials"
+      },
+      "empty": {
+        "$": "ui.empty.quotes"
+      },
+      "playLabel": {
+        "$": "ui.vibe.videos.play"
+      },
+      "byLine": {
+        "$": "ui.testimonials.byLine"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/blocks/wizard.json b/xgen/specs/blocks/wizard.json
new file mode 100644
index 0000000..1e5bf97
--- /dev/null
+++ b/xgen/specs/blocks/wizard.json
@@ -0,0 +1,114 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.wizard",
+  "name": "Sign-up wizard",
+  "docs": "A sign-up in steps with a progress bar or a list of steps; back and next move between them.",
+  "theme": "account",
+  "group": "auth",
+  "organism": "SignupWizard",
+  "axes": {
+    "progress": [
+      "bar",
+      "list"
+    ],
+    "layout": [
+      "card",
+      "plain"
+    ]
+  },
+  "defaults": {
+    "progress": "bar",
+    "layout": "card"
+  },
+  "variants": [
+    {
+      "id": "bar",
+      "set": {}
+    },
+    {
+      "id": "list",
+      "set": {
+        "progress": "list"
+      }
+    },
+    {
+      "id": "plain",
+      "set": {
+        "layout": "plain"
+      }
+    },
+    {
+      "id": "second",
+      "set": {
+        "progress": "list",
+        "layout": "plain"
+      },
+      "props": {
+        "current": 2
+      }
+    }
+  ],
+  "slots": [
+    "Field"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"wizard\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"step\"]",
+      "n": 1
+    },
+    {
+      "sel": "[data-testid=\"step-item\"]",
+      "n": "@wizard",
+      "when": {
+        "progress": "list"
+      }
+    },
+    {
+      "sel": "progress, [role=progressbar]",
+      "n": 1,
+      "when": {
+        "progress": "bar"
+      }
+    },
+    {
+      "sel": "[data-testid=\"field\"]",
+      "n": 2
+    }
+  ],
+  "data": [
+    {
+      "as": "wizard",
+      "collection": "wizard",
+      "kind": "step",
+      "record": "WizardStep",
+      "fields": {
+        "id": "id",
+        "title": "title",
+        "text": "metadata.text.value",
+        "icon": "metadata.icon.value",
+        "fieldA": "metadata.fieldA.value",
+        "fieldB": "metadata.fieldB.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "wizard",
+      "title": {
+        "$": "ui.vibe.wizard.title"
+      },
+      "steps": {
+        "$": "wizard"
+      },
+      "labels": {
+        "$": "ui.vibe.wizard.labels"
+      },
+      "current": 1
+    }
+  }
+}
diff --git a/xgen/specs/blocks/zones.json b/xgen/specs/blocks/zones.json
new file mode 100644
index 0000000..5ac04c6
--- /dev/null
+++ b/xgen/specs/blocks/zones.json
@@ -0,0 +1,112 @@
+{
+  "$schema": "../../schema/schemas/block.schema.json",
+  "specVersion": 1,
+  "id": "block.zones",
+  "name": "Delivery zones",
+  "docs": "Delivery zones and their prices as a table or as cards.",
+  "theme": "commerce",
+  "group": "delivery",
+  "organism": "ZoneTable",
+  "axes": {
+    "layout": [
+      "table",
+      "cards"
+    ],
+    "tone": [
+      "default",
+      "muted"
+    ],
+    "density": [
+      "default",
+      "compact"
+    ]
+  },
+  "defaults": {
+    "layout": "table",
+    "tone": "default",
+    "density": "default"
+  },
+  "variants": [
+    {
+      "id": "table",
+      "set": {}
+    },
+    {
+      "id": "cards",
+      "set": {
+        "layout": "cards"
+      }
+    },
+    {
+      "id": "tableMuted",
+      "set": {
+        "tone": "muted",
+        "density": "compact"
+      }
+    }
+  ],
+  "slots": [
+    "EmptyState",
+    "SectionFrame",
+    "ZoneRows"
+  ],
+  "facts": [
+    {
+      "sel": "[data-testid=\"item\"]",
+      "n": "@zones"
+    },
+    {
+      "sel": "[data-testid=\"zone-table\"]",
+      "n": 1,
+      "when": {
+        "layout": "table"
+      }
+    },
+    {
+      "sel": "[data-testid=\"zone-table\"]",
+      "n": 0,
+      "when": {
+        "layout": "cards"
+      }
+    }
+  ],
+  "data": [
+    {
+      "as": "zones",
+      "collection": "zones",
+      "kind": "zone",
+      "record": "Zone",
+      "fields": {
+        "id": "id",
+        "name": "title",
+        "area": "metadata.area.value",
+        "price": "metadata.price.value",
+        "freeFrom": "metadata.freeFrom.value",
+        "minOrder": "metadata.minOrder.value",
+        "time": "metadata.time.value",
+        "express": "metadata.express.value",
+        "currency": "metadata.currency.value"
+      }
+    }
+  ],
+  "sample": {
+    "props": {
+      "id": "zones",
+      "title": {
+        "$": "ui.commerce.zones.title"
+      },
+      "lead": {
+        "$": "ui.commerce.zones.lead"
+      },
+      "zones": {
+        "$": "zones"
+      },
+      "empty": {
+        "$": "ui.empty.zones"
+      },
+      "labels": {
+        "$": "ui.commerce.zones"
+      }
+    }
+  }
+}
diff --git a/xgen/specs/organisms/about-company.json b/xgen/specs/organisms/about-company.json
new file mode 100644
index 0000000..31a2cff
--- /dev/null
+++ b/xgen/specs/organisms/about-company.json
@@ -0,0 +1,380 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.about-company",
+  "name": "AboutCompany",
+  "docs": "The culture of a company: a strip of three pictures, the heading, a few figures and the values. Axes: layout (split: the pictures beside the text, stacked: the pictures under it), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "stats",
+      "type": {
+        "ts": "Stat[]"
+      },
+      "required": true
+    },
+    {
+      "name": "values",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"split\" | \"stacked\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "layout": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "split"
+              ]
+            },
+            "split",
+            "stack"
+          ]
+        },
+        "media": {
+          "show": true,
+          "side": "start"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "stats"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": "2-4",
+                    "Class": "gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "stats"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "stats"
+                      },
+                      "as": "s",
+                      "key": {
+                        "$": "s.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "0"
+                          },
+                          "attrs": {
+                            "data-testid": "stat"
+                          },
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "3xl",
+                                "Weight": "bold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "s.value"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "s.label"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "values"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "grid grid-cols-1 gap-4",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "stacked"
+                              ]
+                            },
+                            "md:grid-cols-3",
+                            ""
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "values"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "values"
+                      },
+                      "as": "v",
+                      "key": {
+                        "$": "v.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "start",
+                            "Class": "border-t border-border pt-4"
+                          },
+                          "attrs": {
+                            "data-testid": "value"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": {
+                                  "$": "v.icon"
+                                },
+                                "Size": 20
+                              }
+                            },
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "2"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "v.title"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "v.text"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "grid grid-cols-3 gap-4"
+              },
+              "attrs": {
+                "data-testid": "strip"
+              },
+              "children": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "title"
+                    },
+                    "ratio": "3/4"
+                  }
+                },
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "title"
+                    },
+                    "ratio": "3/4",
+                    "className": "mt-8"
+                  }
+                },
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "title"
+                    },
+                    "ratio": "3/4"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    },
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/about-me.json b/xgen/specs/organisms/about-me.json
new file mode 100644
index 0000000..e1d93b7
--- /dev/null
+++ b/xgen/specs/organisms/about-me.json
@@ -0,0 +1,437 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.about-me",
+  "name": "AboutMe",
+  "docs": "A personal about section beside a portrait: a badge, the heading, a lead, then key facts and a list of specialities, or skill chips and expertise bars, and one or two links. Axes: layout (facts, skills), mediaSide, tone.",
+  "records": {
+    "Skill": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "level",
+        "type": "number"
+      }
+    ],
+    "AboutMeLabels": [
+      {
+        "name": "level",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "facts",
+      "type": {
+        "ts": "Spec[]"
+      },
+      "required": true
+    },
+    {
+      "name": "skills",
+      "type": {
+        "ts": "Skill[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "AboutMeLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "LinkActions"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"facts\" | \"skills\""
+      },
+      "default": "facts"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"start\" | \"end\""
+      },
+      "default": "start"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "heading": {
+          "badge": {
+            "$": "badge"
+          },
+          "level": {
+            "$": "level"
+          }
+        },
+        "layout": "split",
+        "media": {
+          "show": true,
+          "side": {
+            "$": "mediaSide"
+          }
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "facts"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "facts"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "List",
+                      "props": {
+                        "Tag": "ul",
+                        "Class": "grid grid-cols-1 gap-4 sm:grid-cols-2"
+                      },
+                      "attrs": {
+                        "data-testid": "facts"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "facts"
+                          },
+                          "as": "f",
+                          "key": {
+                            "$": "f.id"
+                          },
+                          "do": [
+                            {
+                              "use": "ListItem",
+                              "props": {
+                                "Class": "rounded bg-card inset-ring inset-ring-border flex flex-col gap-0 p-4"
+                              },
+                              "attrs": {
+                                "data-testid": "fact"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "xs",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "f.label"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "f.value"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "skills"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch"
+                      },
+                      "attrs": {
+                        "data-testid": "skills"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "skills"
+                          },
+                          "as": "s",
+                          "key": {
+                            "$": "s.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "stretch"
+                              },
+                              "attrs": {
+                                "data-testid": "skill"
+                              },
+                              "children": [
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "4",
+                                    "Justify": "between"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "s.label"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "xs",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "tpl",
+                                            "args": [
+                                              {
+                                                "$": "labels.level"
+                                              },
+                                              {
+                                                "$": "s.level"
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Progress",
+                                  "props": {
+                                    "Value": {
+                                      "op": "str",
+                                      "args": [
+                                        {
+                                          "$": "s.level"
+                                        }
+                                      ]
+                                    },
+                                    "Max": "100"
+                                  },
+                                  "attrs": {
+                                    "aria-label": {
+                                      "$": "s.label"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "organism": "ActionGroup",
+              "props": {
+                "primary": {
+                  "$": "actions.cta"
+                },
+                "primaryHref": {
+                  "$": "actions.href"
+                },
+                "secondary": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "actions.mode"
+                        },
+                        "two"
+                      ]
+                    },
+                    {
+                      "$": "actions.secondary"
+                    },
+                    {
+                      "op": "undef",
+                      "args": []
+                    }
+                  ]
+                },
+                "secondaryHref": {
+                  "$": "actions.secondaryHref"
+                }
+              }
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "title"
+                },
+                "ratio": "3/4"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "ProductInfo",
+      "names": [
+        "Spec"
+      ]
+    },
+    {
+      "from": "ErrorPage",
+      "names": [
+        "LinkActions"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/activity-feed.json b/xgen/specs/organisms/activity-feed.json
new file mode 100644
index 0000000..ee2073f
--- /dev/null
+++ b/xgen/specs/organisms/activity-feed.json
@@ -0,0 +1,367 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.activity-feed",
+  "name": "ActivityFeed",
+  "docs": "A panel with recent events: a timeline with dots on a line, or a list of rows with an icon. Axes: layout (timeline, list), density (default, compact), tone (default, muted).",
+  "records": {
+    "Event": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "time",
+        "type": "string"
+      },
+      {
+        "name": "tone",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "events",
+      "type": {
+        "ts": "Event[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"timeline\" | \"list\""
+      },
+      "default": "timeline"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section"
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "and",
+                  "args": [
+                    {
+                      "$": "title"
+                    },
+                    {
+                      "$": "id"
+                    }
+                  ]
+                },
+                {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-t",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                },
+                {
+                  "op": "undef",
+                  "args": []
+                }
+              ]
+            }
+          ]
+        },
+        "data-testid": "panel-section",
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": "mx-auto w-full max-w-6xl px-4 py-8"
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "organism": "Panel",
+              "props": {
+                "title": {
+                  "$": "title"
+                },
+                "description": {
+                  "$": "text"
+                },
+                "id": {
+                  "$": "id"
+                },
+                "className": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "tone"
+                        },
+                        "muted"
+                      ]
+                    },
+                    "bg-muted",
+                    ""
+                  ]
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "events"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "EmptyState",
+                          "props": {
+                            "icon": "activity",
+                            "title": {
+                              "$": "empty"
+                            }
+                          }
+                        }
+                      ],
+                      "else": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "timeline"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "Timeline",
+                              "props": {
+                                "items": {
+                                  "$": "events"
+                                }
+                              }
+                            }
+                          ],
+                          "else": [
+                            {
+                              "use": "List",
+                              "props": {
+                                "Class": "m-0 flex list-none flex-col p-0"
+                              },
+                              "attrs": {
+                                "data-testid": "items"
+                              },
+                              "children": [
+                                {
+                                  "each": {
+                                    "$": "events"
+                                  },
+                                  "as": "e",
+                                  "key": {
+                                    "$": "e.id"
+                                  },
+                                  "do": [
+                                    {
+                                      "use": "ListItem",
+                                      "props": {
+                                        "Class": {
+                                          "op": "cn",
+                                          "args": [
+                                            "flex items-start justify-between gap-4 border-b border-border last:border-0",
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "density"
+                                                    },
+                                                    "compact"
+                                                  ]
+                                                },
+                                                "py-2",
+                                                "py-4"
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "attrs": {
+                                        "data-testid": "item"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Stack",
+                                          "props": {
+                                            "Gap": "0"
+                                          },
+                                          "children": [
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "sm",
+                                                "Weight": "semibold"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "e.title"
+                                                  }
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "when": {
+                                                "op": "eq",
+                                                "args": [
+                                                  {
+                                                    "$": "density"
+                                                  },
+                                                  "default"
+                                                ]
+                                              },
+                                              "then": [
+                                                {
+                                                  "use": "Text",
+                                                  "props": {
+                                                    "Size": "sm",
+                                                    "Class": "text-muted-foreground"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "$": "e.text"
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "xs",
+                                            "Class": "shrink-0 text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "e.time"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/announcement-bar.json b/xgen/specs/organisms/announcement-bar.json
new file mode 100644
index 0000000..59acc14
--- /dev/null
+++ b/xgen/specs/organisms/announcement-bar.json
@@ -0,0 +1,358 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.announcement-bar",
+  "name": "AnnouncementBar",
+  "docs": "A thin strip above the page: an icon, one sentence, a link and an optional close button. Axes: tone (default, muted), layout (center, split), dismiss (show, hide).",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the strip"
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "cta",
+      "type": "string",
+      "docs": "text of the link"
+    },
+    {
+      "name": "ctaHref",
+      "type": "string"
+    },
+    {
+      "name": "icon",
+      "type": "string",
+      "default": "megaphone",
+      "docs": "Lucide name"
+    },
+    {
+      "name": "dismissLabel",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the close button"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"center\" | \"split\""
+      },
+      "default": "center"
+    },
+    {
+      "name": "dismiss",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "hide"
+    },
+    {
+      "name": "badgeLabel",
+      "type": "string",
+      "docs": "the tag before the sentence, e.g. New"
+    },
+    {
+      "name": "badge",
+      "type": {
+        "ts": "\"none\" | \"show\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "position",
+      "type": {
+        "ts": "\"top\" | \"bottom\""
+      },
+      "default": "top",
+      "docs": "bottom: stays at the bottom edge of the page while it scrolls"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "aside",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "w-full",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "position"
+                    },
+                    "bottom"
+                  ]
+                },
+                "sticky bottom-0 z-40 border-t border-border",
+                ""
+              ]
+            },
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "tone"
+                    },
+                    "muted"
+                  ]
+                },
+                "bg-muted text-foreground",
+                "bg-primary text-primary-foreground"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "$": "label"
+            }
+          ]
+        },
+        "data-testid": "announcement",
+        "data-layout": {
+          "$": "layout"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                "flex items-center gap-4 py-2",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "split"
+                      ]
+                    },
+                    "justify-between",
+                    "justify-center"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "4",
+                "Align": "center",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "min-w-0 flex-wrap",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "and",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "center"
+                              ]
+                            },
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "dismiss"
+                                },
+                                "show"
+                              ]
+                            }
+                          ]
+                        },
+                        "ml-auto",
+                        ""
+                      ]
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": {
+                      "$": "icon"
+                    },
+                    "Size": 16
+                  }
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "badge"
+                      },
+                      "show"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Inline",
+                      "props": {
+                        "Class": "rounded px-2 py-0 text-xs font-semibold inset-ring inset-ring-current"
+                      },
+                      "attrs": {
+                        "data-testid": "announcement-badge"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "badgeLabel"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "text"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "$": "cta"
+                  },
+                  "then": [
+                    {
+                      "use": "LinkPlain",
+                      "props": {
+                        "Href": {
+                          "$": "ctaHref"
+                        },
+                        "Class": "inline-flex items-center gap-2 text-sm font-semibold underline underline-offset-4"
+                      },
+                      "attrs": {
+                        "data-testid": "announcement-cta"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "cta"
+                          }
+                        },
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "arrow-right",
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "dismiss"
+                  },
+                  "show"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "ghost",
+                    "Size": "sm",
+                    "Class": "ml-auto shrink-0 text-current",
+                    "Type": "button"
+                  },
+                  "attrs": {
+                    "aria-label": {
+                      "$": "dismissLabel"
+                    },
+                    "data-testid": "dismiss"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "x",
+                        "Size": 16
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/app-main.json b/xgen/specs/organisms/app-main.json
new file mode 100644
index 0000000..4827eb3
--- /dev/null
+++ b/xgen/specs/organisms/app-main.json
@@ -0,0 +1,402 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.app-main",
+  "name": "AppMain",
+  "docs": "The main column of AppShell: the heading, the metric tiles, and the chart panel (beside the activity panel when `activity` is given).",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "metrics",
+      "type": {
+        "ts": "Metric[]"
+      },
+      "required": true
+    },
+    {
+      "name": "chart",
+      "type": {
+        "ts": "OverviewChart"
+      },
+      "required": true
+    },
+    {
+      "name": "activity",
+      "type": {
+        "ts": "OverviewActivity"
+      },
+      "docs": "the activity panel beside the chart; none: the chart alone"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-2\" | \"1-4\""
+      },
+      "default": "1-2",
+      "docs": "columns of the metric tiles"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "density"
+                },
+                "compact"
+              ]
+            },
+            "4",
+            "6"
+          ]
+        },
+        "Align": "stretch",
+        "Class": "min-w-0"
+      },
+      "attrs": {
+        "data-testid": "app-main"
+      },
+      "children": [
+        {
+          "use": "Title",
+          "props": {
+            "As": 2,
+            "Size": "2xl",
+            "Weight": "bold"
+          },
+          "attrs": {
+            "id": {
+              "op": "tpl",
+              "args": [
+                "{0}-title",
+                {
+                  "$": "id"
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "text": {
+                "$": "title"
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "metrics"
+                  }
+                ]
+              },
+              0
+            ]
+          },
+          "then": [
+            {
+              "use": "Grid",
+              "props": {
+                "Cols": {
+                  "$": "cols"
+                },
+                "Class": "gap-4"
+              },
+              "attrs": {
+                "data-testid": "items"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "metrics"
+                  },
+                  "as": "m",
+                  "key": {
+                    "$": "m.id"
+                  },
+                  "do": [
+                    {
+                      "use": "Box",
+                      "props": {},
+                      "attrs": {
+                        "data-testid": "item"
+                      },
+                      "children": [
+                        {
+                          "organism": "StatTile",
+                          "props": {
+                            "label": {
+                              "$": "m.label"
+                            },
+                            "value": {
+                              "$": "m.value"
+                            },
+                            "icon": {
+                              "$": "m.icon"
+                            },
+                            "hint": {
+                              "$": "m.hint"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "$": "activity"
+          },
+          "then": [
+            {
+              "use": "Grid",
+              "props": {
+                "Cols": "1-2",
+                "Class": "items-stretch gap-4"
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "chart.series"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "Panel",
+                      "props": {
+                        "title": {
+                          "$": "chart.title"
+                        },
+                        "description": {
+                          "$": "chart.text"
+                        },
+                        "id": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-chart",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        },
+                        "className": "h-full"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "organism": "BarChart",
+                              "props": {
+                                "bars": {
+                                  "$": "chart.series"
+                                },
+                                "label": {
+                                  "$": "chart.summary"
+                                },
+                                "height": 144
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "activity.events"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "Panel",
+                      "props": {
+                        "title": {
+                          "$": "activity.title"
+                        },
+                        "description": {
+                          "$": "activity.text"
+                        },
+                        "id": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-feed",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        },
+                        "className": "h-full"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "organism": "Timeline",
+                              "props": {
+                                "items": {
+                                  "$": "activity.events"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "else": [
+            {
+              "when": {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "chart.series"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "Panel",
+                  "props": {
+                    "title": {
+                      "$": "chart.title"
+                    },
+                    "description": {
+                      "$": "chart.text"
+                    },
+                    "id": {
+                      "op": "tpl",
+                      "args": [
+                        "{0}-chart",
+                        {
+                          "$": "id"
+                        }
+                      ]
+                    },
+                    "className": "h-full"
+                  },
+                  "slots": {
+                    "children": {
+                      "args": [],
+                      "do": [
+                        {
+                          "organism": "BarChart",
+                          "props": {
+                            "bars": {
+                              "$": "chart.series"
+                            },
+                            "label": {
+                              "$": "chart.summary"
+                            },
+                            "height": 144
+                          }
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MetricRow",
+      "names": [
+        "Metric"
+      ]
+    },
+    {
+      "from": "ChartPanel",
+      "names": [
+        "Point"
+      ]
+    },
+    {
+      "from": "ActivityFeed",
+      "names": [
+        "Event"
+      ]
+    },
+    {
+      "from": "DashboardOverview",
+      "names": [
+        "OverviewChart",
+        "OverviewActivity"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/app-shell.json b/xgen/specs/organisms/app-shell.json
new file mode 100644
index 0000000..d291e7b
--- /dev/null
+++ b/xgen/specs/organisms/app-shell.json
@@ -0,0 +1,550 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.app-shell",
+  "name": "AppShell",
+  "docs": "The frame of a signed-in app with a first screen in it. Axes: layout (sidebar: navigation on the left, top: a bar above the content, panes: a narrow navigation, a list and a detail), density. The collapse of the sidebar is a port contract.",
+  "records": {
+    "AppNav": [
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "docs": "accessible name of the navigation"
+      },
+      {
+        "name": "brand",
+        "type": "string",
+        "optional": false
+      },
+      {
+        "name": "links",
+        "type": "NavLink[]",
+        "optional": false
+      },
+      {
+        "name": "current",
+        "type": "string",
+        "optional": true,
+        "docs": "id of the current link"
+      }
+    ],
+    "AppUser": [
+      {
+        "name": "name",
+        "type": "string",
+        "optional": false
+      },
+      {
+        "name": "email",
+        "type": "string",
+        "optional": false
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "nav",
+      "type": {
+        "record": "AppNav"
+      },
+      "required": true,
+      "docs": "the navigation (sidebar or top bar)"
+    },
+    {
+      "name": "user",
+      "type": {
+        "record": "AppUser"
+      },
+      "required": true,
+      "docs": "the signed-in person, under the sidebar"
+    },
+    {
+      "name": "search",
+      "type": {
+        "ts": "NavSearch"
+      },
+      "required": true,
+      "docs": "the search field of the top bar"
+    },
+    {
+      "name": "metrics",
+      "type": {
+        "ts": "Metric[]"
+      },
+      "required": true
+    },
+    {
+      "name": "chart",
+      "type": {
+        "ts": "OverviewChart"
+      },
+      "required": true
+    },
+    {
+      "name": "activity",
+      "type": {
+        "ts": "OverviewActivity"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"sidebar\" | \"top\" | \"panes\""
+      },
+      "default": "sidebar"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section",
+        "Class": "bg-background"
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "op": "tpl",
+              "args": [
+                "{0}-title",
+                {
+                  "$": "id"
+                }
+              ]
+            }
+          ]
+        },
+        "data-testid": "app-shell",
+        "data-layout": {
+          "$": "layout"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "top"
+            ]
+          },
+          "then": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "6",
+                "Align": "stretch"
+              },
+              "children": [
+                {
+                  "organism": "NavBar",
+                  "props": {
+                    "label": {
+                      "$": "nav.label"
+                    },
+                    "brand": {
+                      "$": "nav.brand"
+                    },
+                    "links": {
+                      "$": "nav.links"
+                    },
+                    "current": {
+                      "$": "nav.current"
+                    },
+                    "search": {
+                      "$": "search"
+                    },
+                    "actions": {
+                      "mode": "none"
+                    },
+                    "layout": "search",
+                    "landmarkLabel": {
+                      "$": "landmarkLabel"
+                    }
+                  }
+                },
+                {
+                  "use": "Container",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "mx-auto w-full max-w-6xl px-4",
+                        "pb-8"
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-slot": "container"
+                  },
+                  "children": [
+                    {
+                      "organism": "AppMain",
+                      "props": {
+                        "id": {
+                          "$": "id"
+                        },
+                        "title": {
+                          "$": "title"
+                        },
+                        "metrics": {
+                          "$": "metrics"
+                        },
+                        "chart": {
+                          "$": "chart"
+                        },
+                        "cols": "1-4",
+                        "activity": {
+                          "$": "activity"
+                        },
+                        "density": {
+                          "$": "density"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "else": [
+            {
+              "use": "Container",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "mx-auto w-full max-w-6xl px-4",
+                    "py-8"
+                  ]
+                }
+              },
+              "attrs": {
+                "data-slot": "container"
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "sidebar"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": "1",
+                        "Class": "items-start gap-6 md:grid-cols-[16rem_minmax(0,1fr)]"
+                      },
+                      "children": [
+                        {
+                          "organism": "SidebarNav",
+                          "props": {
+                            "label": {
+                              "$": "nav.label"
+                            },
+                            "brand": {
+                              "$": "nav.brand"
+                            },
+                            "links": {
+                              "$": "nav.links"
+                            },
+                            "current": {
+                              "$": "nav.current"
+                            },
+                            "userName": {
+                              "$": "user.name"
+                            },
+                            "userEmail": {
+                              "$": "user.email"
+                            },
+                            "density": {
+                              "$": "density"
+                            },
+                            "landmarkLabel": {
+                              "$": "landmarkLabel"
+                            }
+                          }
+                        },
+                        {
+                          "organism": "AppMain",
+                          "props": {
+                            "id": {
+                              "$": "id"
+                            },
+                            "title": {
+                              "$": "title"
+                            },
+                            "metrics": {
+                              "$": "metrics"
+                            },
+                            "chart": {
+                              "$": "chart"
+                            },
+                            "activity": {
+                              "$": "activity"
+                            },
+                            "density": {
+                              "$": "density"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": "1-3",
+                        "Class": "items-start gap-4"
+                      },
+                      "children": [
+                        {
+                          "organism": "SidebarNav",
+                          "props": {
+                            "label": {
+                              "$": "nav.label"
+                            },
+                            "brand": {
+                              "$": "nav.brand"
+                            },
+                            "links": {
+                              "$": "nav.links"
+                            },
+                            "current": {
+                              "$": "nav.current"
+                            },
+                            "userName": {
+                              "$": "user.name"
+                            },
+                            "userEmail": {
+                              "$": "user.email"
+                            },
+                            "width": "compact",
+                            "density": {
+                              "$": "density"
+                            },
+                            "landmarkLabel": {
+                              "$": "landmarkLabel"
+                            }
+                          }
+                        },
+                        {
+                          "when": {
+                            "op": "gt",
+                            "args": [
+                              {
+                                "op": "len",
+                                "args": [
+                                  {
+                                    "$": "activity.events"
+                                  }
+                                ]
+                              },
+                              0
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "Panel",
+                              "props": {
+                                "title": {
+                                  "$": "activity.title"
+                                },
+                                "description": {
+                                  "$": "activity.text"
+                                },
+                                "id": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-list",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "use": "List",
+                                      "props": {
+                                        "Class": "m-0 flex list-none flex-col gap-4 p-0"
+                                      },
+                                      "attrs": {
+                                        "data-testid": "items"
+                                      },
+                                      "children": [
+                                        {
+                                          "each": {
+                                            "$": "activity.events"
+                                          },
+                                          "as": "e",
+                                          "key": {
+                                            "$": "e.id"
+                                          },
+                                          "do": [
+                                            {
+                                              "use": "ListItem",
+                                              "props": {
+                                                "Class": "flex flex-col gap-2"
+                                              },
+                                              "attrs": {
+                                                "data-testid": "item"
+                                              },
+                                              "children": [
+                                                {
+                                                  "use": "Text",
+                                                  "props": {
+                                                    "Size": "sm",
+                                                    "Weight": "semibold"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "$": "e.title"
+                                                      }
+                                                    }
+                                                  ]
+                                                },
+                                                {
+                                                  "use": "Text",
+                                                  "props": {
+                                                    "Size": "xs",
+                                                    "Class": "text-muted-foreground"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "$": "e.time"
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "organism": "AppMain",
+                          "props": {
+                            "id": {
+                              "$": "id"
+                            },
+                            "title": {
+                              "$": "title"
+                            },
+                            "metrics": {
+                              "$": "metrics"
+                            },
+                            "chart": {
+                              "$": "chart"
+                            },
+                            "density": "compact"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink",
+        "NavSearch"
+      ]
+    },
+    {
+      "from": "MetricRow",
+      "names": [
+        "Metric"
+      ]
+    },
+    {
+      "from": "ChartPanel",
+      "names": [
+        "Point"
+      ]
+    },
+    {
+      "from": "ActivityFeed",
+      "names": [
+        "Event"
+      ]
+    },
+    {
+      "from": "DashboardOverview",
+      "names": [
+        "OverviewChart",
+        "OverviewActivity"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/article-block.json b/xgen/specs/organisms/article-block.json
new file mode 100644
index 0000000..3a64ee8
--- /dev/null
+++ b/xgen/specs/organisms/article-block.json
@@ -0,0 +1,49 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.article-block",
+  "name": "ArticleBlock",
+  "docs": "A self-contained item (a review, a card, a project) in its own file: Block tag article.",
+  "records": {},
+  "props": [
+    {
+      "name": "testid",
+      "type": "string",
+      "docs": "data-testid of the root"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "article",
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": {
+          "$": "testid"
+        }
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/article-body.json b/xgen/specs/organisms/article-body.json
new file mode 100644
index 0000000..699270c
--- /dev/null
+++ b/xgen/specs/organisms/article-body.json
@@ -0,0 +1,416 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.article-body",
+  "name": "ArticleBody",
+  "docs": "A long read: sections with headings, text and an optional pull quote, in one reading column or beside a table of contents that links to each section. Axes: layout (column, toc), quotes (show, hide), tone. Highlighting the section being read is a port contract.",
+  "records": {
+    "Section": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "quote",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "sections",
+      "type": {
+        "ts": "Section[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "tocTitle",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"column\" | \"toc\""
+      },
+      "default": "column"
+    },
+    {
+      "name": "quotes",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "sections"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "file-text",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": "1",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "items-start gap-8",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "toc"
+                              ]
+                            },
+                            "md:grid-cols-[14rem_minmax(0,1fr)]",
+                            ""
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "toc"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "NavBlock",
+                          "props": {
+                            "label": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "$": "landmarkLabel"
+                                },
+                                {
+                                  "op": "uniq",
+                                  "args": [
+                                    {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}, {1}",
+                                        {
+                                          "$": "tocTitle"
+                                        },
+                                        {
+                                          "$": "landmarkLabel"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "$": "tocTitle"
+                                }
+                              ]
+                            },
+                            "className": "md:sticky md:top-4",
+                            "testid": "toc"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "tocTitle"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "List",
+                                      "props": {
+                                        "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                                      },
+                                      "children": [
+                                        {
+                                          "each": {
+                                            "$": "sections"
+                                          },
+                                          "as": "s",
+                                          "key": {
+                                            "$": "s.id"
+                                          },
+                                          "do": [
+                                            {
+                                              "use": "ListItem",
+                                              "children": [
+                                                {
+                                                  "use": "Link",
+                                                  "props": {
+                                                    "Href": {
+                                                      "op": "tpl",
+                                                      "args": [
+                                                        "#{0}-{1}",
+                                                        {
+                                                          "$": "id"
+                                                        },
+                                                        {
+                                                          "$": "s.id"
+                                                        }
+                                                      ]
+                                                    },
+                                                    "Variant": "default",
+                                                    "Class": "text-sm text-muted-foreground"
+                                                  },
+                                                  "attrs": {
+                                                    "data-testid": "toc-link"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "$": "s.title"
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "8",
+                        "Align": "stretch",
+                        "Class": "mx-auto w-full max-w-2xl min-w-0"
+                      },
+                      "attrs": {
+                        "data-testid": "article"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "sections"
+                          },
+                          "as": "s",
+                          "key": {
+                            "$": "s.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Box",
+                              "props": {
+                                "Class": "flex flex-col gap-4"
+                              },
+                              "attrs": {
+                                "id": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-{1}",
+                                    {
+                                      "$": "id"
+                                    },
+                                    {
+                                      "$": "s.id"
+                                    }
+                                  ]
+                                },
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Title",
+                                  "props": {
+                                    "As": 3,
+                                    "Size": "2xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "s.title"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "base"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "s.text"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "quotes"
+                                      },
+                                      "show"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "when": {
+                                        "$": "s.quote"
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Tag": "blockquote",
+                                            "Class": "m-0 border-l border-border pl-4 text-lg"
+                                          },
+                                          "attrs": {
+                                            "data-testid": "quote"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "s.quote"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/auth-card.json b/xgen/specs/organisms/auth-card.json
new file mode 100644
index 0000000..9bb3b96
--- /dev/null
+++ b/xgen/specs/organisms/auth-card.json
@@ -0,0 +1,570 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.auth-card",
+  "name": "AuthCard",
+  "docs": "A sign-in, sign-up or password reset card: heading, one sentence, the fields of the mode, a submit button, optional alternative sign-in buttons and a link to the other mode. Axes: mode (signin, signup, reset), layout (card, plain), social (none, show).",
+  "records": {
+    "AuthLabels": [
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "email",
+        "type": "string"
+      },
+      {
+        "name": "password",
+        "type": "string"
+      },
+      {
+        "name": "remember",
+        "type": "string"
+      },
+      {
+        "name": "forgot",
+        "type": "string"
+      },
+      {
+        "name": "terms",
+        "type": "string"
+      },
+      {
+        "name": "divider",
+        "type": "string"
+      },
+      {
+        "name": "passkey",
+        "type": "string"
+      },
+      {
+        "name": "magic",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "submit",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "switchText",
+      "type": "string",
+      "required": true,
+      "docs": "the question before the link to the other mode"
+    },
+    {
+      "name": "switchLink",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "switchHref",
+      "type": "string"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "AuthLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "mode",
+      "type": {
+        "ts": "\"signin\" | \"signup\" | \"reset\" | \"magic\""
+      },
+      "default": "signin"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card"
+    },
+    {
+      "name": "social",
+      "type": {
+        "ts": "\"none\" | \"show\" | \"first\""
+      },
+      "default": "none",
+      "docs": "first: the other sign-in buttons come before the fields"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 2
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex w-full flex-col gap-6",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "layout"
+                    },
+                    "card"
+                  ]
+                },
+                "rounded bg-card p-6 inset-ring inset-ring-border",
+                ""
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "op": "tpl",
+              "args": [
+                "{0}-title",
+                {
+                  "$": "id"
+                }
+              ]
+            }
+          ]
+        },
+        "data-testid": "auth-card",
+        "data-mode": {
+          "$": "mode"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2"
+          },
+          "children": [
+            {
+              "use": "Title",
+              "props": {
+                "As": {
+                  "$": "level"
+                },
+                "Size": "2xl",
+                "Weight": "bold"
+              },
+              "attrs": {
+                "id": {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-title",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "title"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "text"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "and",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "social"
+                  },
+                  "first"
+                ]
+              },
+              {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "social"
+                  },
+                  "none"
+                ]
+              },
+              {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "mode"
+                  },
+                  "reset"
+                ]
+              },
+              {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "mode"
+                  },
+                  "magic"
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "4"
+              },
+              "attrs": {
+                "data-testid": "social"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center"
+                  },
+                  "children": [
+                    {
+                      "use": "Separator",
+                      "props": {
+                        "Class": "flex-1"
+                      }
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.divider"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Separator",
+                      "props": {
+                        "Class": "flex-1"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "default",
+                    "Type": "button",
+                    "Class": "w-full"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "key-round",
+                        "Size": 16
+                      }
+                    },
+                    {
+                      "text": {
+                        "$": "labels.passkey"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "default",
+                    "Type": "button",
+                    "Class": "w-full"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "mail",
+                        "Size": 16
+                      }
+                    },
+                    {
+                      "text": {
+                        "$": "labels.magic"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "organism": "AuthForm",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "mode": {
+              "$": "mode"
+            },
+            "labels": {
+              "$": "labels"
+            },
+            "submit": {
+              "$": "submit"
+            }
+          }
+        },
+        {
+          "when": {
+            "op": "and",
+            "args": [
+              {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "social"
+                  },
+                  "first"
+                ]
+              },
+              {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "social"
+                  },
+                  "none"
+                ]
+              },
+              {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "mode"
+                  },
+                  "reset"
+                ]
+              },
+              {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "mode"
+                  },
+                  "magic"
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "4"
+              },
+              "attrs": {
+                "data-testid": "social"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center"
+                  },
+                  "children": [
+                    {
+                      "use": "Separator",
+                      "props": {
+                        "Class": "flex-1"
+                      }
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.divider"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Separator",
+                      "props": {
+                        "Class": "flex-1"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "default",
+                    "Type": "button",
+                    "Class": "w-full"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "key-round",
+                        "Size": 16
+                      }
+                    },
+                    {
+                      "text": {
+                        "$": "labels.passkey"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "default",
+                    "Type": "button",
+                    "Class": "w-full"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "mail",
+                        "Size": 16
+                      }
+                    },
+                    {
+                      "text": {
+                        "$": "labels.magic"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Class": "text-center text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "switchText"
+              }
+            },
+            {
+              "text": " "
+            },
+            {
+              "use": "Link",
+              "props": {
+                "Href": {
+                  "$": "switchHref"
+                },
+                "Variant": "default"
+              },
+              "attrs": {
+                "data-testid": "switch"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "switchLink"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/auth-form.json b/xgen/specs/organisms/auth-form.json
new file mode 100644
index 0000000..653b0b2
--- /dev/null
+++ b/xgen/specs/organisms/auth-form.json
@@ -0,0 +1,431 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.auth-form",
+  "name": "AuthForm",
+  "docs": "The form of AuthCard: the fields of the mode (sign-in, sign-up, reset, magic link), remember me and the forgot link, the terms, the submit button.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true,
+      "docs": "the id of the card: field ids are <id>-email, <id>-password, ..."
+    },
+    {
+      "name": "mode",
+      "type": {
+        "ts": "\"signin\" | \"signup\" | \"reset\" | \"magic\""
+      },
+      "default": "signin"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "AuthLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "submit",
+      "type": "string",
+      "required": true,
+      "docs": "text of the submit button"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Form",
+      "props": {
+        "Method": "dialog",
+        "Class": "gap-4"
+      },
+      "attrs": {
+        "data-testid": "auth-form"
+      },
+      "children": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "mode"
+              },
+              "signup"
+            ]
+          },
+          "then": [
+            {
+              "organism": "Field",
+              "props": {
+                "label": {
+                  "$": "labels.name"
+                },
+                "htmlFor": {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-name",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Input",
+                      "props": {
+                        "Type": "text",
+                        "Name": "name",
+                        "Autocomplete": "name"
+                      },
+                      "attrs": {
+                        "id": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-name",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        },
+                        "data-testid": "field"
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "organism": "Field",
+          "props": {
+            "label": {
+              "$": "labels.email"
+            },
+            "htmlFor": {
+              "op": "tpl",
+              "args": [
+                "{0}-email",
+                {
+                  "$": "id"
+                }
+              ]
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "use": "Input",
+                  "props": {
+                    "Type": "email",
+                    "Name": "email",
+                    "Autocomplete": "email"
+                  },
+                  "attrs": {
+                    "id": {
+                      "op": "tpl",
+                      "args": [
+                        "{0}-email",
+                        {
+                          "$": "id"
+                        }
+                      ]
+                    },
+                    "data-testid": "field"
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          "when": {
+            "op": "and",
+            "args": [
+              {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "mode"
+                  },
+                  "reset"
+                ]
+              },
+              {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "mode"
+                  },
+                  "magic"
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "organism": "Field",
+              "props": {
+                "label": {
+                  "$": "labels.password"
+                },
+                "htmlFor": {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-password",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Input",
+                      "props": {
+                        "Type": "password",
+                        "Name": "password",
+                        "Autocomplete": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "mode"
+                                },
+                                "signup"
+                              ]
+                            },
+                            "new-password",
+                            "current-password"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "id": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-password",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        },
+                        "data-testid": "field"
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "mode"
+              },
+              "signin"
+            ]
+          },
+          "then": [
+            {
+              "use": "Group",
+              "props": {
+                "Justify": "between",
+                "Align": "center",
+                "Class": "flex-wrap gap-2"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "center",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "w-fit",
+                        ""
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "use": "Checkbox",
+                      "props": {
+                        "Name": "remember"
+                      },
+                      "attrs": {
+                        "id": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-remember",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Label",
+                      "props": {
+                        "HTMLFor": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-remember",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        },
+                        "Class": "text-sm"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.remember"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "link",
+                    "Size": "sm",
+                    "Class": "px-0"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "labels.forgot"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "mode"
+              },
+              "signup"
+            ]
+          },
+          "then": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "w-fit",
+                    ""
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "use": "Checkbox",
+                  "props": {
+                    "Name": "terms"
+                  },
+                  "attrs": {
+                    "id": {
+                      "op": "tpl",
+                      "args": [
+                        "{0}-terms",
+                        {
+                          "$": "id"
+                        }
+                      ]
+                    }
+                  }
+                },
+                {
+                  "use": "Label",
+                  "props": {
+                    "HTMLFor": {
+                      "op": "tpl",
+                      "args": [
+                        "{0}-terms",
+                        {
+                          "$": "id"
+                        }
+                      ]
+                    },
+                    "Class": "text-sm"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "labels.terms"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "default",
+            "Size": "default",
+            "Type": "submit",
+            "Class": "w-full"
+          },
+          "attrs": {
+            "data-testid": "submit"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "submit"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "AuthCard",
+      "names": [
+        "AuthLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/auth-layout.json b/xgen/specs/organisms/auth-layout.json
new file mode 100644
index 0000000..26c9b1f
--- /dev/null
+++ b/xgen/specs/organisms/auth-layout.json
@@ -0,0 +1,434 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.auth-layout",
+  "name": "AuthLayout",
+  "docs": "A whole sign-in page: the AuthCard placed in the page. Axes: layout (split: a picture panel beside the card, centered: the card on a tinted page, minimal: the card alone in a narrow column), side (end, start: the side of the picture), mode, social. The page's heading is the card's title.",
+  "records": {
+    "AuthSwitch": [
+      {
+        "name": "text",
+        "type": "string",
+        "optional": false,
+        "docs": "the sentence before the link"
+      },
+      {
+        "name": "link",
+        "type": "string",
+        "optional": false,
+        "docs": "text of the link"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "AuthVisual": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false,
+        "docs": "the line on the picture panel"
+      },
+      {
+        "name": "text",
+        "type": "string",
+        "optional": false
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "submit",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "switchTo",
+      "type": {
+        "record": "AuthSwitch"
+      },
+      "required": true,
+      "docs": "the way to the other mode (sign up instead, sign in instead)"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "AuthLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "visual",
+      "type": {
+        "record": "AuthVisual"
+      },
+      "required": true,
+      "docs": "the picture panel of layout split"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"split\" | \"centered\" | \"minimal\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "side",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "mode",
+      "type": {
+        "ts": "\"signin\" | \"signup\" | \"reset\" | \"magic\""
+      },
+      "default": "signin"
+    },
+    {
+      "name": "social",
+      "type": {
+        "ts": "\"none\" | \"show\" | \"first\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "div",
+        "Class": "w-full"
+      },
+      "attrs": {
+        "data-testid": "auth-layout",
+        "data-layout": {
+          "$": "layout"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                "py-12"
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "split"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": "1-2",
+                    "Class": "items-stretch gap-8"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "mx-auto flex w-full max-w-sm items-center"
+                      },
+                      "children": [
+                        {
+                          "organism": "AuthCard",
+                          "props": {
+                            "id": {
+                              "$": "id"
+                            },
+                            "title": {
+                              "$": "title"
+                            },
+                            "text": {
+                              "$": "text"
+                            },
+                            "submit": {
+                              "$": "submit"
+                            },
+                            "switchText": {
+                              "$": "switchTo.text"
+                            },
+                            "switchLink": {
+                              "$": "switchTo.link"
+                            },
+                            "switchHref": {
+                              "$": "switchTo.href"
+                            },
+                            "labels": {
+                              "$": "labels"
+                            },
+                            "mode": {
+                              "$": "mode"
+                            },
+                            "layout": "plain",
+                            "social": {
+                              "$": "social"
+                            },
+                            "level": {
+                              "$": "level"
+                            },
+                            "landmarkLabel": {
+                              "$": "landmarkLabel"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch",
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "justify-end rounded bg-muted p-8",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "side"
+                                    },
+                                    "start"
+                                  ]
+                                },
+                                "md:order-first",
+                                "md:order-last"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "visual"
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "visual.title"
+                            },
+                            "ratio": "4/3"
+                          }
+                        },
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 2,
+                            "Size": "2xl",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "visual.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "visual.text"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "centered"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "mx-auto w-full max-w-md rounded bg-muted p-6"
+                      },
+                      "children": [
+                        {
+                          "organism": "AuthCard",
+                          "props": {
+                            "id": {
+                              "$": "id"
+                            },
+                            "title": {
+                              "$": "title"
+                            },
+                            "text": {
+                              "$": "text"
+                            },
+                            "submit": {
+                              "$": "submit"
+                            },
+                            "switchText": {
+                              "$": "switchTo.text"
+                            },
+                            "switchLink": {
+                              "$": "switchTo.link"
+                            },
+                            "switchHref": {
+                              "$": "switchTo.href"
+                            },
+                            "labels": {
+                              "$": "labels"
+                            },
+                            "mode": {
+                              "$": "mode"
+                            },
+                            "social": {
+                              "$": "social"
+                            },
+                            "level": {
+                              "$": "level"
+                            },
+                            "landmarkLabel": {
+                              "$": "landmarkLabel"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "mx-auto w-full max-w-sm"
+                      },
+                      "children": [
+                        {
+                          "organism": "AuthCard",
+                          "props": {
+                            "id": {
+                              "$": "id"
+                            },
+                            "title": {
+                              "$": "title"
+                            },
+                            "text": {
+                              "$": "text"
+                            },
+                            "submit": {
+                              "$": "submit"
+                            },
+                            "switchText": {
+                              "$": "switchTo.text"
+                            },
+                            "switchLink": {
+                              "$": "switchTo.link"
+                            },
+                            "switchHref": {
+                              "$": "switchTo.href"
+                            },
+                            "labels": {
+                              "$": "labels"
+                            },
+                            "mode": {
+                              "$": "mode"
+                            },
+                            "layout": "plain",
+                            "social": {
+                              "$": "social"
+                            },
+                            "level": {
+                              "$": "level"
+                            },
+                            "landmarkLabel": {
+                              "$": "landmarkLabel"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "AuthCard",
+      "names": [
+        "AuthLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/before-after.json b/xgen/specs/organisms/before-after.json
new file mode 100644
index 0000000..c53deaf
--- /dev/null
+++ b/xgen/specs/organisms/before-after.json
@@ -0,0 +1,578 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.before-after",
+  "name": "BeforeAfter",
+  "docs": "Two columns that set life without the product against life with it, point by point. Axes: layout (cards: two cards, rows: one row per point), icons (show, hide), tone, density.",
+  "records": {
+    "Contrast": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "before",
+        "type": "string"
+      },
+      {
+        "name": "after",
+        "type": "string"
+      }
+    ],
+    "BeforeAfterLabels": [
+      {
+        "name": "before",
+        "type": "string"
+      },
+      {
+        "name": "after",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "points",
+      "type": {
+        "ts": "Contrast[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "BeforeAfterLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"cards\" | \"rows\""
+      },
+      "default": "cards"
+    },
+    {
+      "name": "icons",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "points"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "git-compare",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "cards"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": "1-2",
+                        "Class": "items-stretch gap-4"
+                      },
+                      "attrs": {
+                        "data-testid": "sides"
+                      },
+                      "children": [
+                        {
+                          "use": "Card",
+                          "props": {
+                            "Variant": "muted",
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "h-full",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "density"
+                                        },
+                                        "compact"
+                                      ]
+                                    },
+                                    "gap-4 p-4",
+                                    ""
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "side",
+                            "data-side": "before"
+                          },
+                          "children": [
+                            {
+                              "use": "CardContent",
+                              "props": {
+                                "Class": "flex flex-col gap-4"
+                              },
+                              "children": [
+                                {
+                                  "use": "Title",
+                                  "props": {
+                                    "As": 3,
+                                    "Size": "xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "labels.before"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "List",
+                                  "props": {
+                                    "Class": "m-0 flex list-none flex-col gap-4 p-0"
+                                  },
+                                  "children": [
+                                    {
+                                      "each": {
+                                        "$": "points"
+                                      },
+                                      "as": "p",
+                                      "key": {
+                                        "$": "p.id"
+                                      },
+                                      "do": [
+                                        {
+                                          "use": "ListItem",
+                                          "props": {
+                                            "Class": "flex items-start gap-4"
+                                          },
+                                          "attrs": {
+                                            "data-testid": "item"
+                                          },
+                                          "children": [
+                                            {
+                                              "when": {
+                                                "op": "eq",
+                                                "args": [
+                                                  {
+                                                    "$": "icons"
+                                                  },
+                                                  "show"
+                                                ]
+                                              },
+                                              "then": [
+                                                {
+                                                  "use": "LucideIcon",
+                                                  "props": {
+                                                    "Name": "x",
+                                                    "Size": 16,
+                                                    "Class": "h-lh shrink-0 text-sm"
+                                                  }
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "sm"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "p.before"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Card",
+                          "props": {
+                            "Variant": "default",
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "h-full",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "density"
+                                        },
+                                        "compact"
+                                      ]
+                                    },
+                                    "gap-4 p-4",
+                                    ""
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "side",
+                            "data-side": "after"
+                          },
+                          "children": [
+                            {
+                              "use": "CardContent",
+                              "props": {
+                                "Class": "flex flex-col gap-4"
+                              },
+                              "children": [
+                                {
+                                  "use": "Title",
+                                  "props": {
+                                    "As": 3,
+                                    "Size": "xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "labels.after"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "List",
+                                  "props": {
+                                    "Class": "m-0 flex list-none flex-col gap-4 p-0"
+                                  },
+                                  "children": [
+                                    {
+                                      "each": {
+                                        "$": "points"
+                                      },
+                                      "as": "p",
+                                      "key": {
+                                        "$": "p.id"
+                                      },
+                                      "do": [
+                                        {
+                                          "use": "ListItem",
+                                          "props": {
+                                            "Class": "flex items-start gap-4"
+                                          },
+                                          "attrs": {
+                                            "data-testid": "item"
+                                          },
+                                          "children": [
+                                            {
+                                              "when": {
+                                                "op": "eq",
+                                                "args": [
+                                                  {
+                                                    "$": "icons"
+                                                  },
+                                                  "show"
+                                                ]
+                                              },
+                                              "then": [
+                                                {
+                                                  "use": "LucideIcon",
+                                                  "props": {
+                                                    "Name": "check",
+                                                    "Size": 16,
+                                                    "Class": "h-lh shrink-0 text-sm"
+                                                  }
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "sm"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "p.after"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2",
+                        "Align": "stretch"
+                      },
+                      "attrs": {
+                        "data-testid": "rows"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "points"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Grid",
+                              "props": {
+                                "Cols": "1-3",
+                                "Class": {
+                                  "op": "cn",
+                                  "args": [
+                                    "items-center gap-4",
+                                    "rounded bg-card inset-ring inset-ring-border p-4"
+                                  ]
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "base",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "p.title"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "2",
+                                    "Align": "start"
+                                  },
+                                  "children": [
+                                    {
+                                      "when": {
+                                        "op": "eq",
+                                        "args": [
+                                          {
+                                            "$": "icons"
+                                          },
+                                          "show"
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "x",
+                                            "Size": 16,
+                                            "Class": "h-lh shrink-0 text-sm text-muted-foreground"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "p.before"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "2",
+                                    "Align": "start"
+                                  },
+                                  "children": [
+                                    {
+                                      "when": {
+                                        "op": "eq",
+                                        "args": [
+                                          {
+                                            "$": "icons"
+                                          },
+                                          "show"
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "check",
+                                            "Size": 16,
+                                            "Class": "h-lh shrink-0 text-sm text-primary"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "p.after"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/bento-grid.json b/xgen/specs/organisms/bento-grid.json
new file mode 100644
index 0000000..2502991
--- /dev/null
+++ b/xgen/specs/organisms/bento-grid.json
@@ -0,0 +1,357 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.bento-grid",
+  "name": "BentoGrid",
+  "docs": "Tiles of different sizes in one grid: the large and wide tiles hold the important features. Sizes come from the data (large, wide, small). Axes: layout (bento, even: all tiles alike), media (none, image: a picture in the large tiles), tone, density.",
+  "records": {
+    "Tile": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "size",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "tiles",
+      "type": {
+        "ts": "Tile[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"bento\" | \"even\""
+      },
+      "default": "bento"
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"none\" | \"image\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "consts": {
+    "SPAN": {
+      "large": "md:col-span-2 md:row-span-2",
+      "wide": "md:col-span-2",
+      "small": ""
+    }
+  },
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "tiles"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "layout-dashboard",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": "1-4",
+                    "Class": "auto-rows-fr gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "tiles"
+                      },
+                      "as": "tile",
+                      "key": {
+                        "$": "tile.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Card",
+                          "props": {
+                            "Variant": "default",
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "h-full overflow-hidden",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "density"
+                                        },
+                                        "compact"
+                                      ]
+                                    },
+                                    "gap-4 p-4",
+                                    ""
+                                  ]
+                                },
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "layout"
+                                        },
+                                        "bento"
+                                      ]
+                                    },
+                                    {
+                                      "op": "at",
+                                      "args": [
+                                        {
+                                          "$": "SPAN"
+                                        },
+                                        {
+                                          "$": "tile.size"
+                                        }
+                                      ]
+                                    },
+                                    ""
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "item",
+                            "data-size": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "bento"
+                                  ]
+                                },
+                                {
+                                  "$": "tile.size"
+                                },
+                                "even"
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "use": "CardContent",
+                              "props": {
+                                "Class": "flex h-full flex-col gap-4"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": {
+                                      "$": "tile.icon"
+                                    },
+                                    "Size": 24
+                                  }
+                                },
+                                {
+                                  "use": "Title",
+                                  "props": {
+                                    "As": 3,
+                                    "Size": "xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "tile.title"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "tile.text"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "when": {
+                                    "op": "and",
+                                    "args": [
+                                      {
+                                        "op": "eq",
+                                        "args": [
+                                          {
+                                            "$": "media"
+                                          },
+                                          "image"
+                                        ]
+                                      },
+                                      {
+                                        "op": "or",
+                                        "args": [
+                                          {
+                                            "op": "eq",
+                                            "args": [
+                                              {
+                                                "$": "tile.size"
+                                              },
+                                              "large"
+                                            ]
+                                          },
+                                          {
+                                            "op": "eq",
+                                            "args": [
+                                              {
+                                                "$": "layout"
+                                              },
+                                              "even"
+                                            ]
+                                          }
+                                        ]
+                                      }
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "organism": "MediaFrame",
+                                      "props": {
+                                        "alt": {
+                                          "$": "tile.title"
+                                        },
+                                        "ratio": "4/3",
+                                        "className": "mt-auto"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/bottom-nav.json b/xgen/specs/organisms/bottom-nav.json
new file mode 100644
index 0000000..efc5b4e
--- /dev/null
+++ b/xgen/specs/organisms/bottom-nav.json
@@ -0,0 +1,265 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.bottom-nav",
+  "name": "BottomNav",
+  "docs": "An app-style tab bar for a phone: an icon over a label per tab, the current one marked. Axes: labels (show, hide: icons only with the name hidden), position (static, sticky: stays at the bottom of the page), tone.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "tabs",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "required": true
+    },
+    {
+      "name": "current",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "position",
+      "type": {
+        "ts": "\"static\" | \"sticky\""
+      },
+      "default": "static"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "tabs"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Block",
+          "props": {
+            "Tag": "nav",
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-md border-t border-border",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "tone"
+                        },
+                        "muted"
+                      ]
+                    },
+                    "bg-muted",
+                    "bg-background"
+                  ]
+                },
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "position"
+                        },
+                        "sticky"
+                      ]
+                    },
+                    "sticky bottom-0 z-40",
+                    ""
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "aria-label": {
+              "op": "coalesce",
+              "args": [
+                {
+                  "$": "landmarkLabel"
+                },
+                {
+                  "$": "label"
+                }
+              ]
+            },
+            "data-testid": "bottom-nav",
+            "data-position": {
+              "$": "position"
+            }
+          },
+          "children": [
+            {
+              "use": "List",
+              "props": {
+                "Class": "m-0 grid list-none grid-flow-col auto-cols-fr p-0"
+              },
+              "attrs": {
+                "data-testid": "items"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "tabs"
+                  },
+                  "as": "tab",
+                  "key": {
+                    "$": "tab.id"
+                  },
+                  "do": [
+                    {
+                      "use": "ListItem",
+                      "children": [
+                        {
+                          "organism": "MenuEntry",
+                          "props": {
+                            "href": {
+                              "$": "tab.href"
+                            },
+                            "className": {
+                              "op": "cn",
+                              "args": [
+                                "flex flex-col items-center gap-2 py-2 text-xs",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "tab.id"
+                                        },
+                                        {
+                                          "$": "current"
+                                        }
+                                      ]
+                                    },
+                                    "font-semibold text-primary",
+                                    "text-muted-foreground"
+                                  ]
+                                }
+                              ]
+                            },
+                            "current": {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "tab.id"
+                                },
+                                {
+                                  "$": "current"
+                                }
+                              ]
+                            },
+                            "testid": "item"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": {
+                                      "$": "tab.icon"
+                                    },
+                                    "Size": 20
+                                  }
+                                },
+                                {
+                                  "use": "Inline",
+                                  "props": {
+                                    "Class": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "labels"
+                                            },
+                                            "hide"
+                                          ]
+                                        },
+                                        "sr-only",
+                                        ""
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "tab.name"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/cart-drawer.json b/xgen/specs/organisms/cart-drawer.json
new file mode 100644
index 0000000..e118ac8
--- /dev/null
+++ b/xgen/specs/organisms/cart-drawer.json
@@ -0,0 +1,352 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.cart-drawer",
+  "name": "CartDrawer",
+  "docs": "The cart drawer in its open state, over a faded page: the head with a close button, the lines with a quantity field, the free-delivery bar, the totals and the button. The empty state shows an icon, a line and the way back. Static markup: opening and closing are the page's. Axes: state (filled, empty), media (image, none).",
+  "records": {
+    "DrawerLabels": [
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "close",
+        "type": "string"
+      },
+      {
+        "name": "progress",
+        "type": "string"
+      },
+      {
+        "name": "empty",
+        "type": "string"
+      },
+      {
+        "name": "emptyText",
+        "type": "string"
+      },
+      {
+        "name": "browse",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lines",
+      "type": {
+        "ts": "CartLine[]"
+      },
+      "required": true
+    },
+    {
+      "name": "rows",
+      "type": {
+        "ts": "SummaryRow[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "CartLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "drawer",
+      "type": {
+        "record": "DrawerLabels"
+      },
+      "required": true,
+      "docs": "labels of the drawer"
+    },
+    {
+      "name": "state",
+      "type": {
+        "ts": "\"filled\" | \"empty\""
+      },
+      "default": "filled"
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"image\" | \"none\""
+      },
+      "default": "image"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section",
+        "Class": "py-8"
+      },
+      "attrs": {
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "$": "drawer.title"
+            }
+          ]
+        },
+        "data-testid": "section"
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": "mx-auto w-full max-w-6xl px-4"
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "flex min-h-160 overflow-hidden rounded bg-muted inset-ring inset-ring-border"
+              },
+              "children": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "hidden flex-1 flex-col gap-4 p-8 sm:flex"
+                  },
+                  "attrs": {
+                    "aria-hidden": "true"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "h-8 w-48 rounded bg-background"
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "h-40 rounded bg-background"
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "h-40 rounded bg-background"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "flex w-full flex-col bg-background shadow-lg sm:max-w-sm"
+                  },
+                  "attrs": {
+                    "role": "group",
+                    "aria-label": {
+                      "$": "drawer.title"
+                    },
+                    "data-testid": "drawer"
+                  },
+                  "children": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "center",
+                        "Justify": "between",
+                        "Class": "border-b border-border p-4"
+                      },
+                      "children": [
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 2,
+                            "Size": "lg",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "drawer.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "ghost",
+                            "Size": "sm",
+                            "Layout": "icon",
+                            "AriaLabel": {
+                              "$": "drawer.close"
+                            }
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": "x",
+                                "Size": 16
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "or",
+                        "args": [
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "state"
+                              },
+                              "empty"
+                            ]
+                          },
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "op": "len",
+                                "args": [
+                                  {
+                                    "$": "lines"
+                                  }
+                                ]
+                              },
+                              0
+                            ]
+                          }
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": "flex flex-1 flex-col justify-center p-4"
+                          },
+                          "attrs": {
+                            "data-testid": "empty"
+                          },
+                          "children": [
+                            {
+                              "organism": "EmptyState",
+                              "props": {
+                                "icon": "shopping-bag",
+                                "title": {
+                                  "$": "drawer.empty"
+                                },
+                                "text": {
+                                  "$": "drawer.emptyText"
+                                }
+                              },
+                              "slots": {
+                                "action": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "use": "Button",
+                                      "props": {
+                                        "Variant": "outline",
+                                        "Size": "default"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "drawer.browse"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ],
+                      "else": [
+                        {
+                          "organism": "DrawerLines",
+                          "props": {
+                            "field": {
+                              "op": "tpl",
+                              "args": [
+                                "{0}-qty",
+                                {
+                                  "$": "id"
+                                }
+                              ]
+                            },
+                            "lines": {
+                              "$": "lines"
+                            },
+                            "rows": {
+                              "$": "rows"
+                            },
+                            "labels": {
+                              "$": "labels"
+                            },
+                            "drawer": {
+                              "$": "drawer"
+                            },
+                            "media": {
+                              "$": "media"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "CartList",
+      "names": [
+        "CartLine",
+        "CartLabels"
+      ]
+    },
+    {
+      "from": "OrderSummary",
+      "names": [
+        "SummaryRow"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/cart-list.json b/xgen/specs/organisms/cart-list.json
new file mode 100644
index 0000000..d45560e
--- /dev/null
+++ b/xgen/specs/organisms/cart-list.json
@@ -0,0 +1,489 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.cart-list",
+  "name": "CartList",
+  "docs": "The lines of a cart as a table or as cards: product, variant, price, quantity, line total and a remove button. Axes: layout (table, cards), media (image, none), density, tone.",
+  "records": {
+    "CartLine": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "variant",
+        "type": "string"
+      },
+      {
+        "name": "price",
+        "type": "number"
+      },
+      {
+        "name": "currency",
+        "type": "string"
+      },
+      {
+        "name": "qty",
+        "type": "number"
+      }
+    ],
+    "CartLabels": [
+      {
+        "name": "caption",
+        "type": "string"
+      },
+      {
+        "name": "product",
+        "type": "string"
+      },
+      {
+        "name": "price",
+        "type": "string"
+      },
+      {
+        "name": "qty",
+        "type": "string"
+      },
+      {
+        "name": "total",
+        "type": "string"
+      },
+      {
+        "name": "remove",
+        "type": "string"
+      },
+      {
+        "name": "subtotal",
+        "type": "string"
+      },
+      {
+        "name": "checkout",
+        "type": "string"
+      },
+      {
+        "name": "decrease",
+        "type": "string"
+      },
+      {
+        "name": "increase",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lines",
+      "type": {
+        "ts": "CartLine[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "CartLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"table\" | \"cards\""
+      },
+      "default": "table"
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"image\" | \"none\""
+      },
+      "default": "image"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "remove",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "the remove button of a line was pressed"
+    }
+  ],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "lines"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "shopping-cart",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "table"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "CartTable",
+                      "props": {
+                        "field": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-qty",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        },
+                        "lines": {
+                          "$": "lines"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        },
+                        "media": {
+                          "$": "media"
+                        },
+                        "density": {
+                          "$": "density"
+                        }
+                      },
+                      "on": {
+                        "remove": {
+                          "call": "emit.remove",
+                          "args": [
+                            {
+                              "$": "arg"
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch"
+                      },
+                      "attrs": {
+                        "data-testid": "cart-cards"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "lines"
+                          },
+                          "as": "line",
+                          "key": {
+                            "$": "line.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Card",
+                              "props": {
+                                "Variant": "default"
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "CardContent",
+                                  "props": {
+                                    "Class": "flex flex-wrap items-center gap-4"
+                                  },
+                                  "children": [
+                                    {
+                                      "when": {
+                                        "op": "eq",
+                                        "args": [
+                                          {
+                                            "$": "media"
+                                          },
+                                          "image"
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "organism": "MediaFrame",
+                                          "props": {
+                                            "alt": {
+                                              "$": "line.name"
+                                            },
+                                            "ratio": "1/1",
+                                            "className": "size-16 shrink-0"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Stack",
+                                      "props": {
+                                        "Gap": "0",
+                                        "Class": "min-w-40 flex-1"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Weight": "semibold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "line.name"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "xs",
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "line.variant"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "money",
+                                                "args": [
+                                                  {
+                                                    "$": "line.price"
+                                                  },
+                                                  {
+                                                    "$": "line.currency"
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "organism": "NumberField",
+                                      "props": {
+                                        "value": {
+                                          "op": "str",
+                                          "args": [
+                                            {
+                                              "$": "line.qty"
+                                            }
+                                          ]
+                                        },
+                                        "name": {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}-qty-{1}",
+                                            {
+                                              "$": "id"
+                                            },
+                                            {
+                                              "$": "line.id"
+                                            }
+                                          ]
+                                        },
+                                        "min": "1",
+                                        "label": {
+                                          "$": "labels.qty"
+                                        },
+                                        "decrease": {
+                                          "$": "labels.decrease"
+                                        },
+                                        "increase": {
+                                          "$": "labels.increase"
+                                        }
+                                      }
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "base",
+                                        "Weight": "bold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "money",
+                                            "args": [
+                                              {
+                                                "op": "mul",
+                                                "args": [
+                                                  {
+                                                    "$": "line.price"
+                                                  },
+                                                  {
+                                                    "$": "line.qty"
+                                                  }
+                                                ]
+                                              },
+                                              {
+                                                "$": "line.currency"
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Button",
+                                      "props": {
+                                        "Variant": "ghost",
+                                        "Size": "sm",
+                                        "Layout": "icon",
+                                        "AriaLabel": {
+                                          "$": "labels.remove"
+                                        }
+                                      },
+                                      "attrs": {
+                                        "data-testid": "remove"
+                                      },
+                                      "on": {
+                                        "click": {
+                                          "call": "emit.remove",
+                                          "args": [
+                                            {
+                                              "$": "line.id"
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "x",
+                                            "Size": 16
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/cart-summary-card.json b/xgen/specs/organisms/cart-summary-card.json
new file mode 100644
index 0000000..4ab0d3a
--- /dev/null
+++ b/xgen/specs/organisms/cart-summary-card.json
@@ -0,0 +1,682 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.cart-summary-card",
+  "name": "CartSummaryCard",
+  "docs": "The order summary card of the cart page and the checkout: the lines in short (optional), a promo code field with ready codes, the free-delivery progress, the totals, the button and a note. Static markup.",
+  "records": {
+    "Promo": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "code",
+        "type": "string"
+      }
+    ],
+    "CartSummaryLabels": [
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "items",
+        "type": "string"
+      },
+      {
+        "name": "promo",
+        "type": "string"
+      },
+      {
+        "name": "apply",
+        "type": "string"
+      },
+      {
+        "name": "codes",
+        "type": "string"
+      },
+      {
+        "name": "progress",
+        "type": "string"
+      },
+      {
+        "name": "checkout",
+        "type": "string"
+      },
+      {
+        "name": "note",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "lines",
+      "type": {
+        "ts": "CartLine[]"
+      },
+      "required": true
+    },
+    {
+      "name": "rows",
+      "type": {
+        "ts": "SummaryRow[]"
+      },
+      "required": true
+    },
+    {
+      "name": "promos",
+      "type": {
+        "ts": "Promo[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "CartSummaryLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "items",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "hide",
+      "docs": "show: the lines in short at the top"
+    },
+    {
+      "name": "promo",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "field",
+      "type": "string",
+      "default": "promo",
+      "docs": "name of the promo code field (unique on the page)"
+    },
+    {
+      "name": "progress",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "value",
+      "type": "number",
+      "default": 70,
+      "docs": "how far the order is towards free delivery, 0 to 100"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "6",
+        "Align": "stretch",
+        "Class": "rounded bg-card inset-ring inset-ring-border p-6"
+      },
+      "attrs": {
+        "data-testid": "summary"
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "baseline",
+            "Justify": "between"
+          },
+          "children": [
+            {
+              "use": "Title",
+              "props": {
+                "As": 2,
+                "Size": "lg",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.title"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "xs",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "op": "tpl",
+                    "args": [
+                      {
+                        "$": "labels.items"
+                      },
+                      {
+                        "op": "str",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "lines"
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "and",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "items"
+                  },
+                  "show"
+                ]
+              },
+              {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "lines"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "use": "List",
+              "props": {
+                "Tag": "ul",
+                "Class": "flex flex-col gap-4"
+              },
+              "attrs": {
+                "data-testid": "summary-lines"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "lines"
+                  },
+                  "as": "line",
+                  "key": {
+                    "$": "line.id"
+                  },
+                  "do": [
+                    {
+                      "use": "ListItem",
+                      "props": {
+                        "Class": "flex items-center gap-4 text-sm"
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "line.name"
+                            },
+                            "ratio": "1/1",
+                            "className": "size-12 shrink-0"
+                          }
+                        },
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "0",
+                            "Class": "flex-1"
+                          },
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Weight": "semibold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "line.name"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "op": "tpl",
+                                    "args": [
+                                      "{0} x {1}",
+                                      {
+                                        "$": "line.qty"
+                                      },
+                                      {
+                                        "op": "money",
+                                        "args": [
+                                          {
+                                            "$": "line.price"
+                                          },
+                                          {
+                                            "$": "line.currency"
+                                          }
+                                        ]
+                                      }
+                                    ]
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": "font-medium"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "op": "mul",
+                                    "args": [
+                                      {
+                                        "$": "line.price"
+                                      },
+                                      {
+                                        "$": "line.qty"
+                                      }
+                                    ]
+                                  },
+                                  {
+                                    "$": "line.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "promo"
+              },
+              "show"
+            ]
+          },
+          "then": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "2",
+                "Align": "stretch"
+              },
+              "attrs": {
+                "data-testid": "promo"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "center"
+                  },
+                  "children": [
+                    {
+                      "use": "Input",
+                      "props": {
+                        "Type": "text",
+                        "Name": {
+                          "$": "field"
+                        },
+                        "AriaLabel": {
+                          "$": "labels.promo"
+                        },
+                        "Placeholder": {
+                          "$": "labels.promo"
+                        },
+                        "Class": "min-w-0 flex-1"
+                      }
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "outline",
+                        "Size": "default",
+                        "Type": "button"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.apply"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "promos"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "2",
+                        "Align": "center",
+                        "Class": "flex-wrap"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.codes"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "each": {
+                            "$": "promos"
+                          },
+                          "as": "c",
+                          "key": {
+                            "$": "c.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Badge",
+                              "props": {
+                                "Variant": "outline",
+                                "Size": "sm"
+                              },
+                              "attrs": {
+                                "data-testid": "code"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "c.code"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "progress"
+              },
+              "show"
+            ]
+          },
+          "then": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "2",
+                "Align": "stretch",
+                "Class": "rounded bg-muted p-4"
+              },
+              "attrs": {
+                "data-testid": "progress"
+              },
+              "children": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "labels.progress"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Progress",
+                  "props": {
+                    "Value": {
+                      "op": "str",
+                      "args": [
+                        {
+                          "$": "value"
+                        }
+                      ]
+                    },
+                    "Max": "100"
+                  },
+                  "attrs": {
+                    "aria-label": {
+                      "$": "labels.progress"
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "rows"
+                  }
+                ]
+              },
+              0
+            ]
+          },
+          "then": [
+            {
+              "use": "List",
+              "props": {
+                "Tag": "ul",
+                "Class": "flex flex-col gap-2"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "rows"
+                  },
+                  "as": "row",
+                  "key": {
+                    "$": "row.id"
+                  },
+                  "do": [
+                    {
+                      "use": "ListItem",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "flex items-center justify-between gap-4",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "$": "row.strong"
+                                },
+                                "border-t border-border pt-4 text-base font-bold",
+                                "text-sm text-muted-foreground"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "row"
+                      },
+                      "children": [
+                        {
+                          "use": "Inline",
+                          "children": [
+                            {
+                              "text": {
+                                "$": "row.label"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Inline",
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "$": "row.amount"
+                                  },
+                                  {
+                                    "$": "row.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "default",
+            "Size": "lg",
+            "Class": "w-full"
+          },
+          "attrs": {
+            "data-testid": "checkout"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.checkout"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "xs",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.note"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "CartList",
+      "names": [
+        "CartLine"
+      ]
+    },
+    {
+      "from": "OrderSummary",
+      "names": [
+        "SummaryRow"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/cart-table.json b/xgen/specs/organisms/cart-table.json
new file mode 100644
index 0000000..2320533
--- /dev/null
+++ b/xgen/specs/organisms/cart-table.json
@@ -0,0 +1,544 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.cart-table",
+  "name": "CartTable",
+  "docs": "The lines of a cart as a table (the table layout of CartList): product, price, quantity, line total and a remove button.",
+  "records": {},
+  "props": [
+    {
+      "name": "lines",
+      "type": {
+        "ts": "CartLine[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "CartLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"image\" | \"none\""
+      },
+      "default": "image"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "field",
+      "type": "string",
+      "default": "qty",
+      "docs": "prefix of the quantity field names (one name per line: <field>-<line id>)"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "remove",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "the remove button of a line was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "w-full overflow-x-auto"
+      },
+      "children": [
+        {
+          "use": "Table",
+          "props": {
+            "Class": "w-full text-left text-sm"
+          },
+          "attrs": {
+            "data-testid": "cart-table"
+          },
+          "children": [
+            {
+              "use": "TableCaption",
+              "props": {
+                "Class": "sr-only"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.caption"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "TableHead",
+              "children": [
+                {
+                  "use": "TableRow",
+                  "children": [
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.product"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "hidden py-2 sm:table-cell"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.price"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.qty"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.total"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": "sr-only"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.remove"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "TableBody",
+              "children": [
+                {
+                  "each": {
+                    "$": "lines"
+                  },
+                  "as": "line",
+                  "key": {
+                    "$": "line.id"
+                  },
+                  "do": [
+                    {
+                      "use": "TableRow",
+                      "props": {
+                        "Class": "border-t border-border"
+                      },
+                      "attrs": {
+                        "data-testid": "item"
+                      },
+                      "children": [
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "density"
+                                        },
+                                        "compact"
+                                      ]
+                                    },
+                                    "py-2",
+                                    "py-4"
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "4",
+                                "Align": "center"
+                              },
+                              "children": [
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "media"
+                                      },
+                                      "image"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "organism": "MediaFrame",
+                                      "props": {
+                                        "alt": {
+                                          "$": "line.name"
+                                        },
+                                        "ratio": "1/1",
+                                        "className": "hidden size-14 shrink-0 sm:block"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "0"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "line.name"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "xs",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "line.variant"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": "hidden sm:table-cell"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "$": "line.price"
+                                  },
+                                  {
+                                    "$": "line.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": ""
+                          },
+                          "children": [
+                            {
+                              "organism": "NumberField",
+                              "props": {
+                                "value": {
+                                  "op": "str",
+                                  "args": [
+                                    {
+                                      "$": "line.qty"
+                                    }
+                                  ]
+                                },
+                                "name": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-{1}",
+                                    {
+                                      "$": "field"
+                                    },
+                                    {
+                                      "$": "line.id"
+                                    }
+                                  ]
+                                },
+                                "min": "1",
+                                "label": {
+                                  "$": "labels.qty"
+                                },
+                                "decrease": {
+                                  "$": "labels.decrease"
+                                },
+                                "increase": {
+                                  "$": "labels.increase"
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": "font-semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "op": "mul",
+                                    "args": [
+                                      {
+                                        "$": "line.price"
+                                      },
+                                      {
+                                        "$": "line.qty"
+                                      }
+                                    ]
+                                  },
+                                  {
+                                    "$": "line.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": "text-right"
+                          },
+                          "children": [
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "ghost",
+                                "Size": "sm",
+                                "Layout": "icon",
+                                "AriaLabel": {
+                                  "$": "labels.remove"
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "remove"
+                              },
+                              "on": {
+                                "click": {
+                                  "call": "emit.remove",
+                                  "args": [
+                                    {
+                                      "$": "line.id"
+                                    }
+                                  ]
+                                }
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "x",
+                                    "Size": 16
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "lines"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "center",
+            "Justify": "between",
+            "Class": "mt-4 flex-wrap border-t border-border pt-4"
+          },
+          "attrs": {
+            "data-testid": "cart-footer"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "base",
+                "Weight": "bold"
+              },
+              "attrs": {
+                "data-testid": "subtotal"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.subtotal"
+                  }
+                },
+                {
+                  "text": " "
+                },
+                {
+                  "text": {
+                    "op": "money",
+                    "args": [
+                      {
+                        "op": "sumBy",
+                        "args": [
+                          {
+                            "$": "lines"
+                          },
+                          "price",
+                          "qty"
+                        ]
+                      },
+                      {
+                        "op": "firstOf",
+                        "args": [
+                          {
+                            "$": "lines"
+                          },
+                          "currency"
+                        ]
+                      }
+                    ]
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Button",
+              "props": {
+                "Variant": "default",
+                "Size": "default"
+              },
+              "attrs": {
+                "data-testid": "checkout"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.checkout"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "CartList",
+      "names": [
+        "CartLine",
+        "CartLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/category-nav.json b/xgen/specs/organisms/category-nav.json
new file mode 100644
index 0000000..a6d7a36
--- /dev/null
+++ b/xgen/specs/organisms/category-nav.json
@@ -0,0 +1,653 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.category-nav",
+  "name": "CategoryNav",
+  "docs": "Navigation between product categories as chips, a bar with an underline, a side list, tiles with a big icon, or chips under a toolbar (search, sort and the number shown). The current one carries aria-current. Axes: layout (chips, bar, sidebar, tiles, toolbar), count (show, hide), icon (show, hide), density.",
+  "records": {
+    "Category": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "count",
+        "type": "number"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "CategoryTools": [
+      {
+        "name": "search",
+        "type": "string",
+        "optional": true,
+        "docs": "label of the search field"
+      },
+      {
+        "name": "sort",
+        "type": "string",
+        "optional": true,
+        "docs": "label of the sort select"
+      },
+      {
+        "name": "sortValue",
+        "type": "string",
+        "optional": true,
+        "docs": "the chosen sort"
+      },
+      {
+        "name": "shown",
+        "type": "string",
+        "optional": true,
+        "docs": "how many products are shown"
+      },
+      {
+        "name": "query",
+        "type": "string",
+        "optional": true,
+        "docs": "the text in the search field",
+        "default": ""
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the navigation"
+    },
+    {
+      "name": "categories",
+      "type": {
+        "ts": "Category[]"
+      },
+      "required": true
+    },
+    {
+      "name": "current",
+      "type": "string",
+      "default": "all",
+      "docs": "id of the current category"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"chips\" | \"bar\" | \"sidebar\" | \"tiles\" | \"toolbar\""
+      },
+      "default": "chips"
+    },
+    {
+      "name": "count",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "icon",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "tools",
+      "type": {
+        "record": "CategoryTools"
+      },
+      "docs": "the toolbar layout: labels of the search, the sort and the number shown"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "chipLike",
+      "value": {
+        "op": "or",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "chips"
+            ]
+          },
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "toolbar"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "name": "tiles",
+      "value": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "layout"
+          },
+          "tiles"
+        ]
+      }
+    },
+    {
+      "name": "linkShape",
+      "value": {
+        "op": "cond",
+        "args": [
+          {
+            "$": "chipLike"
+          },
+          "inline-flex h-8 items-center gap-2 rounded px-3 inset-ring inset-ring-border",
+          {
+            "op": "cond",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "bar"
+                ]
+              },
+              "inline-flex items-center gap-2 -mb-px border-b px-1 py-2",
+              {
+                "op": "cond",
+                "args": [
+                  {
+                    "$": "tiles"
+                  },
+                  "flex h-full flex-col items-start gap-4 rounded p-4 inset-ring inset-ring-border",
+                  "inline-flex w-full items-center gap-2 rounded px-3 py-2"
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "name": "currentLook",
+      "value": {
+        "op": "cond",
+        "args": [
+          {
+            "$": "chipLike"
+          },
+          "bg-primary text-primary-foreground",
+          {
+            "op": "cond",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "bar"
+                ]
+              },
+              "border-foreground font-semibold",
+              {
+                "op": "cond",
+                "args": [
+                  {
+                    "$": "tiles"
+                  },
+                  "inset-ring-foreground font-semibold",
+                  "bg-muted font-semibold"
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "name": "otherLook",
+      "value": {
+        "op": "cond",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "bar"
+            ]
+          },
+          "border-transparent",
+          ""
+        ]
+      }
+    },
+    {
+      "name": "listShape",
+      "value": {
+        "op": "cond",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "sidebar"
+            ]
+          },
+          "flex flex-col gap-2",
+          {
+            "op": "cond",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "bar"
+                ]
+              },
+              "flex flex-wrap gap-2 gap-x-4 border-b border-border",
+              {
+                "op": "cond",
+                "args": [
+                  {
+                    "$": "tiles"
+                  },
+                  "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6",
+                  "flex flex-wrap gap-2"
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "nav"
+      },
+      "attrs": {
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "$": "label"
+            }
+          ]
+        },
+        "data-testid": "category-nav",
+        "data-layout": {
+          "$": "layout"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "density"
+                        },
+                        "compact"
+                      ]
+                    },
+                    "py-2",
+                    "py-4"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "toolbar"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Class": "mb-4 flex-wrap"
+                  },
+                  "attrs": {
+                    "data-testid": "toolbar"
+                  },
+                  "children": [
+                    {
+                      "organism": "SearchField",
+                      "props": {
+                        "value": {
+                          "op": "coalesce",
+                          "args": [
+                            {
+                              "$": "tools.query"
+                            },
+                            ""
+                          ]
+                        },
+                        "label": {
+                          "op": "coalesce",
+                          "args": [
+                            {
+                              "$": "tools.search"
+                            },
+                            ""
+                          ]
+                        },
+                        "placeholder": {
+                          "$": "tools.search"
+                        }
+                      }
+                    },
+                    {
+                      "use": "Select",
+                      "props": {
+                        "Name": "sort",
+                        "Size": "sm",
+                        "AriaLabel": {
+                          "$": "tools.sort"
+                        },
+                        "Class": "w-48"
+                      },
+                      "children": [
+                        {
+                          "use": "SelectOption",
+                          "props": {
+                            "Value": "sort",
+                            "Label": {
+                              "$": "tools.sortValue"
+                            },
+                            "Selected": true
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "tools.shown"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "categories"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "use": "List",
+                  "props": {
+                    "Tag": "ul",
+                    "Class": {
+                      "$": "listShape"
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "categories"
+                      },
+                      "as": "c",
+                      "key": {
+                        "$": "c.id"
+                      },
+                      "do": [
+                        {
+                          "use": "ListItem",
+                          "children": [
+                            {
+                              "organism": "MenuEntry",
+                              "props": {
+                                "href": {
+                                  "$": "c.href"
+                                },
+                                "className": {
+                                  "op": "cn",
+                                  "args": [
+                                    "text-sm",
+                                    {
+                                      "$": "linkShape"
+                                    },
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "c.id"
+                                            },
+                                            {
+                                              "$": "current"
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "$": "currentLook"
+                                        },
+                                        {
+                                          "$": "otherLook"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                "current": {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "c.id"
+                                    },
+                                    {
+                                      "$": "current"
+                                    }
+                                  ]
+                                },
+                                "testid": "item",
+                                "block": true
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "when": {
+                                        "op": "eq",
+                                        "args": [
+                                          {
+                                            "$": "icon"
+                                          },
+                                          "show"
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "when": {
+                                            "$": "tiles"
+                                          },
+                                          "then": [
+                                            {
+                                              "use": "Inline",
+                                              "props": {
+                                                "Class": "flex size-10 items-center justify-center rounded bg-muted"
+                                              },
+                                              "children": [
+                                                {
+                                                  "use": "LucideIcon",
+                                                  "props": {
+                                                    "Name": {
+                                                      "$": "c.icon"
+                                                    },
+                                                    "Size": 20
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ],
+                                          "else": [
+                                            {
+                                              "use": "LucideIcon",
+                                              "props": {
+                                                "Name": {
+                                                  "$": "c.icon"
+                                                },
+                                                "Size": 16
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Inline",
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "c.name"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "when": {
+                                        "op": "eq",
+                                        "args": [
+                                          {
+                                            "$": "count"
+                                          },
+                                          "show"
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "xs",
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "str",
+                                                "args": [
+                                                  {
+                                                    "$": "c.count"
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/chart-panel.json b/xgen/specs/organisms/chart-panel.json
new file mode 100644
index 0000000..2d21ae2
--- /dev/null
+++ b/xgen/specs/organisms/chart-panel.json
@@ -0,0 +1,334 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.chart-panel",
+  "name": "ChartPanel",
+  "docs": "A panel with a chart of one series: vertical bars with captions, or meter rows with a percent. Axes: chart (bars, meters), size (default, compact), tone (default, muted).",
+  "records": {
+    "Point": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "number"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true,
+      "docs": "the sentence under the title"
+    },
+    {
+      "name": "series",
+      "type": {
+        "ts": "Point[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "summary",
+      "type": "string",
+      "required": true,
+      "docs": "the chart's accessible summary"
+    },
+    {
+      "name": "percent",
+      "type": "string",
+      "required": true,
+      "docs": "template of a meter caption, e.g. `{0}%`"
+    },
+    {
+      "name": "chart",
+      "type": {
+        "ts": "\"bars\" | \"meters\""
+      },
+      "default": "bars"
+    },
+    {
+      "name": "size",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section"
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "and",
+                  "args": [
+                    {
+                      "$": "title"
+                    },
+                    {
+                      "$": "id"
+                    }
+                  ]
+                },
+                {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-t",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                },
+                {
+                  "op": "undef",
+                  "args": []
+                }
+              ]
+            }
+          ]
+        },
+        "data-testid": "panel-section",
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": "mx-auto w-full max-w-6xl px-4 py-8"
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "organism": "Panel",
+              "props": {
+                "title": {
+                  "$": "title"
+                },
+                "description": {
+                  "$": "text"
+                },
+                "id": {
+                  "$": "id"
+                },
+                "className": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "tone"
+                        },
+                        "muted"
+                      ]
+                    },
+                    "bg-muted",
+                    ""
+                  ]
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "series"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "EmptyState",
+                          "props": {
+                            "icon": "chart-column",
+                            "title": {
+                              "$": "empty"
+                            }
+                          }
+                        }
+                      ],
+                      "else": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "chart"
+                              },
+                              "bars"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "BarChart",
+                              "props": {
+                                "bars": {
+                                  "$": "series"
+                                },
+                                "label": {
+                                  "$": "summary"
+                                },
+                                "height": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "size"
+                                        },
+                                        "compact"
+                                      ]
+                                    },
+                                    96,
+                                    176
+                                  ]
+                                }
+                              }
+                            }
+                          ],
+                          "else": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "size"
+                                        },
+                                        "compact"
+                                      ]
+                                    },
+                                    "0",
+                                    "2"
+                                  ]
+                                },
+                                "Align": "stretch"
+                              },
+                              "attrs": {
+                                "data-testid": "items"
+                              },
+                              "children": [
+                                {
+                                  "each": {
+                                    "$": "series"
+                                  },
+                                  "as": "s",
+                                  "key": {
+                                    "$": "s.id"
+                                  },
+                                  "do": [
+                                    {
+                                      "organism": "MeterRow",
+                                      "props": {
+                                        "label": {
+                                          "$": "s.label"
+                                        },
+                                        "value": {
+                                          "$": "s.value"
+                                        },
+                                        "caption": {
+                                          "op": "tpl",
+                                          "args": [
+                                            {
+                                              "$": "percent"
+                                            },
+                                            {
+                                              "$": "s.value"
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/checklist.json b/xgen/specs/organisms/checklist.json
new file mode 100644
index 0000000..742a301
--- /dev/null
+++ b/xgen/specs/organisms/checklist.json
@@ -0,0 +1,532 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.checklist",
+  "name": "Checklist",
+  "docs": "An onboarding checklist: the tasks with a done mark, a progress bar or a count. Axes: layout (card, plain), progress (bar, text, none), marker (check, number), tone (default, muted).",
+  "records": {
+    "Task": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "done",
+        "type": "boolean"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "tasks",
+      "type": {
+        "ts": "Task[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "progressLabel",
+      "type": "string",
+      "required": true,
+      "docs": "template of the count, e.g. `{0} of {1} done`"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card"
+    },
+    {
+      "name": "progress",
+      "type": {
+        "ts": "\"bar\" | \"text\" | \"none\""
+      },
+      "default": "bar"
+    },
+    {
+      "name": "marker",
+      "type": {
+        "ts": "\"check\" | \"number\""
+      },
+      "default": "check"
+    },
+    {
+      "name": "detail",
+      "type": {
+        "ts": "\"always\" | \"expand\""
+      },
+      "default": "always",
+      "docs": "expand: the sentence of a task opens under its title"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "measure": "2xl",
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "tasks"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "list-checks",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "stretch",
+                    "Class": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "card"
+                          ]
+                        },
+                        "rounded bg-card p-6 inset-ring inset-ring-border",
+                        ""
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "checklist"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "progress"
+                          },
+                          "bar"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Progress",
+                          "props": {
+                            "Value": {
+                              "op": "str",
+                              "args": [
+                                {
+                                  "op": "round",
+                                  "args": [
+                                    {
+                                      "op": "div",
+                                      "args": [
+                                        {
+                                          "op": "mul",
+                                          "args": [
+                                            {
+                                              "op": "count",
+                                              "args": [
+                                                {
+                                                  "$": "tasks"
+                                                },
+                                                "done"
+                                              ]
+                                            },
+                                            100
+                                          ]
+                                        },
+                                        {
+                                          "op": "len",
+                                          "args": [
+                                            {
+                                              "$": "tasks"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            "Max": "100"
+                          },
+                          "attrs": {
+                            "aria-label": {
+                              "op": "tpl",
+                              "args": [
+                                {
+                                  "$": "progressLabel"
+                                },
+                                {
+                                  "op": "count",
+                                  "args": [
+                                    {
+                                      "$": "tasks"
+                                    },
+                                    "done"
+                                  ]
+                                },
+                                {
+                                  "op": "len",
+                                  "args": [
+                                    {
+                                      "$": "tasks"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "progress"
+                          },
+                          "text"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "attrs": {
+                            "data-testid": "progress-text"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  {
+                                    "$": "progressLabel"
+                                  },
+                                  {
+                                    "op": "count",
+                                    "args": [
+                                      {
+                                        "$": "tasks"
+                                      },
+                                      "done"
+                                    ]
+                                  },
+                                  {
+                                    "op": "len",
+                                    "args": [
+                                      {
+                                        "$": "tasks"
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "List",
+                      "props": {
+                        "Class": "m-0 flex list-none flex-col gap-4 p-0"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "tasks"
+                          },
+                          "as": "task",
+                          "key": {
+                            "$": "task.id"
+                          },
+                          "do": [
+                            {
+                              "use": "ListItem",
+                              "props": {
+                                "Class": "flex items-start gap-4"
+                              },
+                              "attrs": {
+                                "data-testid": "item",
+                                "data-done": {
+                                  "op": "str",
+                                  "args": [
+                                    {
+                                      "$": "task.done"
+                                    }
+                                  ]
+                                }
+                              },
+                              "children": [
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "marker"
+                                      },
+                                      "number"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "use": "IconBadge",
+                                      "props": {
+                                        "Variant": {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "$": "task.done"
+                                            },
+                                            "primary",
+                                            "outline"
+                                          ]
+                                        },
+                                        "Size": "xs"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "str",
+                                            "args": [
+                                              {
+                                                "op": "add",
+                                                "args": [
+                                                  {
+                                                    "$": "i"
+                                                  },
+                                                  1
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ],
+                                  "else": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "$": "task.done"
+                                            },
+                                            "circle-check",
+                                            "circle"
+                                          ]
+                                        },
+                                        "Size": 24,
+                                        "Class": {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "$": "task.done"
+                                            },
+                                            "shrink-0 text-primary",
+                                            "shrink-0 text-muted-foreground"
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "detail"
+                                      },
+                                      "expand"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "use": "Disclosure",
+                                      "props": {
+                                        "Variant": "ghost",
+                                        "Class": "flex-1"
+                                      },
+                                      "attrs": {
+                                        "data-testid": "task-detail"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Summary",
+                                          "props": {
+                                            "Variant": "ghost"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "task.title"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Class": "pb-2 text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "task.text"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ],
+                                  "else": [
+                                    {
+                                      "use": "Stack",
+                                      "props": {
+                                        "Gap": "0"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "base",
+                                            "Weight": "semibold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "task.title"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "task.text"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/checkout-form.json b/xgen/specs/organisms/checkout-form.json
new file mode 100644
index 0000000..cdde0ff
--- /dev/null
+++ b/xgen/specs/organisms/checkout-form.json
@@ -0,0 +1,917 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.checkout-form",
+  "name": "CheckoutForm",
+  "docs": "A checkout on one page: contacts, address, a delivery window, the payment and the consent as stacked steps, beside a sticky order summary with the lines, a promo code and the totals. Static markup. Axes: layout (cards: each step in a card, numbered: numbered steps divided by a line), summary (aside, none), tone.",
+  "records": {
+    "CheckoutLabels": [
+      {
+        "name": "contacts",
+        "type": "string"
+      },
+      {
+        "name": "contactsText",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "phone",
+        "type": "string"
+      },
+      {
+        "name": "email",
+        "type": "string"
+      },
+      {
+        "name": "address",
+        "type": "string"
+      },
+      {
+        "name": "addressText",
+        "type": "string"
+      },
+      {
+        "name": "street",
+        "type": "string"
+      },
+      {
+        "name": "house",
+        "type": "string"
+      },
+      {
+        "name": "flat",
+        "type": "string"
+      },
+      {
+        "name": "entrance",
+        "type": "string"
+      },
+      {
+        "name": "floor",
+        "type": "string"
+      },
+      {
+        "name": "comment",
+        "type": "string"
+      },
+      {
+        "name": "slot",
+        "type": "string"
+      },
+      {
+        "name": "slotText",
+        "type": "string"
+      },
+      {
+        "name": "payment",
+        "type": "string"
+      },
+      {
+        "name": "paymentText",
+        "type": "string"
+      },
+      {
+        "name": "consent",
+        "type": "string"
+      },
+      {
+        "name": "submit",
+        "type": "string"
+      },
+      {
+        "name": "legal",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "default": "",
+      "docs": "section heading; empty: no heading (the page heading names the checkout)"
+    },
+    {
+      "name": "days",
+      "type": {
+        "ts": "Day[]"
+      },
+      "required": true
+    },
+    {
+      "name": "payments",
+      "type": {
+        "ts": "Payment[]"
+      },
+      "required": true
+    },
+    {
+      "name": "lines",
+      "type": {
+        "ts": "CartLine[]"
+      },
+      "required": true
+    },
+    {
+      "name": "rows",
+      "type": {
+        "ts": "SummaryRow[]"
+      },
+      "required": true
+    },
+    {
+      "name": "promos",
+      "type": {
+        "ts": "Promo[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "CheckoutLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "totals",
+      "type": {
+        "ts": "CartSummaryLabels"
+      },
+      "required": true,
+      "docs": "labels of the order summary"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"cards\" | \"numbered\""
+      },
+      "default": "cards"
+    },
+    {
+      "name": "summary",
+      "type": {
+        "ts": "\"aside\" | \"none\""
+      },
+      "default": "aside"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"
+              },
+              "children": [
+                {
+                  "use": "Form",
+                  "props": {
+                    "Method": "dialog",
+                    "Class": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "summary"
+                            },
+                            "aside"
+                          ]
+                        },
+                        "flex flex-col gap-6 lg:col-span-2",
+                        "flex flex-col gap-6 lg:col-span-3"
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "checkout-form"
+                  },
+                  "children": [
+                    {
+                      "organism": "CheckoutStep",
+                      "props": {
+                        "number": "1",
+                        "title": {
+                          "$": "labels.contacts"
+                        },
+                        "text": {
+                          "$": "labels.contactsText"
+                        },
+                        "layout": {
+                          "$": "layout"
+                        }
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "use": "Grid",
+                              "props": {
+                                "Cols": "1-2",
+                                "Class": "gap-4"
+                              },
+                              "children": [
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.name"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-name",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Input",
+                                          "props": {
+                                            "Type": "text",
+                                            "Name": "name",
+                                            "Autocomplete": "name"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-name",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.phone"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-phone",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Input",
+                                          "props": {
+                                            "Type": "tel",
+                                            "Name": "phone",
+                                            "Autocomplete": "tel"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-phone",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.email"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-email",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Input",
+                                          "props": {
+                                            "Type": "email",
+                                            "Name": "email",
+                                            "Autocomplete": "email"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-email",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "organism": "CheckoutStep",
+                      "props": {
+                        "number": "2",
+                        "title": {
+                          "$": "labels.address"
+                        },
+                        "text": {
+                          "$": "labels.addressText"
+                        },
+                        "layout": {
+                          "$": "layout"
+                        }
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "organism": "Field",
+                              "props": {
+                                "label": {
+                                  "$": "labels.street"
+                                },
+                                "htmlFor": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-street",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "use": "Input",
+                                      "props": {
+                                        "Type": "text",
+                                        "Name": "street",
+                                        "Autocomplete": "address-line1"
+                                      },
+                                      "attrs": {
+                                        "id": {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}-street",
+                                            {
+                                              "$": "id"
+                                            }
+                                          ]
+                                        },
+                                        "data-testid": "field"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              "use": "Grid",
+                              "props": {
+                                "Cols": "2-4",
+                                "Class": "gap-4"
+                              },
+                              "children": [
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.house"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-house",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Input",
+                                          "props": {
+                                            "Type": "text",
+                                            "Name": "house"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-house",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.flat"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-flat",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Input",
+                                          "props": {
+                                            "Type": "text",
+                                            "Name": "flat"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-flat",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.entrance"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-entrance",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Input",
+                                          "props": {
+                                            "Type": "text",
+                                            "Name": "entrance"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-entrance",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.floor"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-floor",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Input",
+                                          "props": {
+                                            "Type": "text",
+                                            "Name": "floor"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-floor",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "organism": "Field",
+                              "props": {
+                                "label": {
+                                  "$": "labels.comment"
+                                },
+                                "htmlFor": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-comment",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "use": "Textarea",
+                                      "props": {
+                                        "Rows": 4,
+                                        "Name": "comment"
+                                      },
+                                      "attrs": {
+                                        "id": {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}-comment",
+                                            {
+                                              "$": "id"
+                                            }
+                                          ]
+                                        },
+                                        "data-testid": "field"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "organism": "CheckoutStep",
+                      "props": {
+                        "number": "3",
+                        "title": {
+                          "$": "labels.slot"
+                        },
+                        "text": {
+                          "$": "labels.slotText"
+                        },
+                        "layout": {
+                          "$": "layout"
+                        }
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "when": {
+                                "op": "gt",
+                                "args": [
+                                  {
+                                    "op": "len",
+                                    "args": [
+                                      {
+                                        "$": "days"
+                                      }
+                                    ]
+                                  },
+                                  0
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "organism": "SlotGrid",
+                                  "props": {
+                                    "days": {
+                                      "$": "days"
+                                    },
+                                    "name": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-slot",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    },
+                                    "item": "plain"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "organism": "CheckoutStep",
+                      "props": {
+                        "number": "4",
+                        "title": {
+                          "$": "labels.payment"
+                        },
+                        "text": {
+                          "$": "labels.paymentText"
+                        },
+                        "layout": {
+                          "$": "layout"
+                        }
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "when": {
+                                "op": "gt",
+                                "args": [
+                                  {
+                                    "op": "len",
+                                    "args": [
+                                      {
+                                        "$": "payments"
+                                      }
+                                    ]
+                                  },
+                                  0
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "organism": "PaymentOptions",
+                                  "props": {
+                                    "payments": {
+                                      "$": "payments"
+                                    },
+                                    "name": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-payment",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    },
+                                    "checked": "payment-card"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "organism": "CheckoutSubmit",
+                      "props": {
+                        "id": {
+                          "$": "id"
+                        },
+                        "consent": {
+                          "$": "labels.consent"
+                        },
+                        "submit": {
+                          "$": "labels.submit"
+                        },
+                        "legal": {
+                          "$": "labels.legal"
+                        }
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "summary"
+                      },
+                      "aside"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "lg:sticky lg:top-8"
+                      },
+                      "attrs": {
+                        "data-testid": "aside"
+                      },
+                      "children": [
+                        {
+                          "organism": "CartSummaryCard",
+                          "props": {
+                            "field": {
+                              "op": "tpl",
+                              "args": [
+                                "{0}-promo",
+                                {
+                                  "$": "id"
+                                }
+                              ]
+                            },
+                            "lines": {
+                              "$": "lines"
+                            },
+                            "rows": {
+                              "$": "rows"
+                            },
+                            "promos": {
+                              "$": "promos"
+                            },
+                            "labels": {
+                              "$": "totals"
+                            },
+                            "items": "show"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "SlotGrid",
+      "names": [
+        "Day"
+      ]
+    },
+    {
+      "from": "PaymentOptions",
+      "names": [
+        "Payment"
+      ]
+    },
+    {
+      "from": "CartList",
+      "names": [
+        "CartLine"
+      ]
+    },
+    {
+      "from": "OrderSummary",
+      "names": [
+        "SummaryRow"
+      ]
+    },
+    {
+      "from": "CartSummaryCard",
+      "names": [
+        "Promo",
+        "CartSummaryLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/checkout-step.json b/xgen/specs/organisms/checkout-step.json
new file mode 100644
index 0000000..1fdcb59
--- /dev/null
+++ b/xgen/specs/organisms/checkout-step.json
@@ -0,0 +1,152 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.checkout-step",
+  "name": "CheckoutStep",
+  "docs": "One step of a long form: an optional number, a heading (h2) and a line of text over the fields (`children`). Axes: layout (cards: the step in a card, numbered: a number beside the heading and a line between steps).",
+  "records": {},
+  "props": [
+    {
+      "name": "number",
+      "type": "string",
+      "required": true,
+      "docs": "the number of the step (shown in the numbered layout)"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"cards\" | \"numbered\""
+      },
+      "default": "cards"
+    }
+  ],
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "6",
+        "Align": "stretch",
+        "Class": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "cards"
+              ]
+            },
+            "rounded bg-card inset-ring inset-ring-border p-6",
+            "border-t border-border pt-6"
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "step"
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "start"
+          },
+          "children": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "numbered"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "flex size-8 shrink-0 items-center justify-center rounded bg-primary text-sm font-medium text-primary-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "number"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "0"
+              },
+              "children": [
+                {
+                  "use": "Title",
+                  "props": {
+                    "As": 2,
+                    "Size": "lg",
+                    "Weight": "semibold"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "title"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "$": "text"
+                  },
+                  "then": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "text"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/checkout-submit.json b/xgen/specs/organisms/checkout-submit.json
new file mode 100644
index 0000000..50ff8ae
--- /dev/null
+++ b/xgen/specs/organisms/checkout-submit.json
@@ -0,0 +1,135 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.checkout-submit",
+  "name": "CheckoutSubmit",
+  "docs": "The end of the checkout form: the consent checkbox, the submit button and the legal line.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true,
+      "docs": "id of the form block (the checkbox id is <id>-consent)"
+    },
+    {
+      "name": "consent",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "submit",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "legal",
+      "type": "string",
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "start"
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center",
+            "Class": {
+              "op": "cn",
+              "args": [
+                "w-fit",
+                ""
+              ]
+            }
+          },
+          "children": [
+            {
+              "use": "Checkbox",
+              "props": {
+                "Name": "consent"
+              },
+              "attrs": {
+                "id": {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-consent",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "use": "Label",
+              "props": {
+                "HTMLFor": {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-consent",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                },
+                "Class": "text-sm"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "consent"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "default",
+            "Size": "lg",
+            "Type": "submit"
+          },
+          "attrs": {
+            "data-testid": "submit"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "submit"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "xs",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "legal"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/compare-mark.json b/xgen/specs/organisms/compare-mark.json
new file mode 100644
index 0000000..693b314
--- /dev/null
+++ b/xgen/specs/organisms/compare-mark.json
@@ -0,0 +1,162 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.compare-mark",
+  "name": "CompareMark",
+  "docs": "One cell value of ComparisonTable: yes shows a check, no a dash (both with the hidden word for screen readers), any other value is shown as text.",
+  "records": {},
+  "props": [
+    {
+      "name": "value",
+      "type": "string",
+      "required": true,
+      "docs": "yes, no or a short text"
+    },
+    {
+      "name": "yes",
+      "type": "string",
+      "required": true,
+      "docs": "the hidden word for yes"
+    },
+    {
+      "name": "no",
+      "type": "string",
+      "required": true,
+      "docs": "the hidden word for no"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "value"
+          },
+          "yes"
+        ]
+      },
+      "then": [
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "inline-flex items-center gap-2"
+          },
+          "attrs": {
+            "data-mark": "yes"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "check",
+                "Size": 16,
+                "Class": "text-foreground"
+              }
+            },
+            {
+              "use": "Inline",
+              "props": {
+                "Class": "sr-only"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "yes"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "value"
+          },
+          "no"
+        ]
+      },
+      "then": [
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "inline-flex items-center gap-2 text-muted-foreground"
+          },
+          "attrs": {
+            "data-mark": "no"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "minus",
+                "Size": 16
+              }
+            },
+            {
+              "use": "Inline",
+              "props": {
+                "Class": "sr-only"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "no"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "ne",
+            "args": [
+              {
+                "$": "value"
+              },
+              "yes"
+            ]
+          },
+          {
+            "op": "ne",
+            "args": [
+              {
+                "$": "value"
+              },
+              "no"
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Inline",
+          "children": [
+            {
+              "text": {
+                "$": "value"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/comparison-table.json b/xgen/specs/organisms/comparison-table.json
new file mode 100644
index 0000000..73cbb4c
--- /dev/null
+++ b/xgen/specs/organisms/comparison-table.json
@@ -0,0 +1,520 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.comparison-table",
+  "name": "ComparisonTable",
+  "docs": "Plans, or a product and its competitors, as three columns and the features as rows. A value of yes shows a check, no a dash (both with a hidden word), anything else is shown as text. Axes: highlight (none, middle column), tone, density.",
+  "records": {
+    "CompareRow": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "a",
+        "type": "string"
+      },
+      {
+        "name": "b",
+        "type": "string"
+      },
+      {
+        "name": "c",
+        "type": "string"
+      }
+    ],
+    "CompareLabels": [
+      {
+        "name": "caption",
+        "type": "string"
+      },
+      {
+        "name": "feature",
+        "type": "string"
+      },
+      {
+        "name": "a",
+        "type": "string"
+      },
+      {
+        "name": "b",
+        "type": "string"
+      },
+      {
+        "name": "c",
+        "type": "string"
+      },
+      {
+        "name": "yes",
+        "type": "string"
+      },
+      {
+        "name": "no",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "rows",
+      "type": {
+        "ts": "CompareRow[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "CompareLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "highlight",
+      "type": {
+        "ts": "\"none\" | \"middle\""
+      },
+      "default": "none",
+      "docs": "middle: the second column stands out"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "rows"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "table",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "relative w-full overflow-x-auto"
+                  },
+                  "children": [
+                    {
+                      "use": "Table",
+                      "props": {
+                        "Class": "w-full text-left text-sm"
+                      },
+                      "attrs": {
+                        "data-testid": "compare"
+                      },
+                      "children": [
+                        {
+                          "use": "TableCaption",
+                          "props": {
+                            "Class": "sr-only"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.caption"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableHead",
+                          "children": [
+                            {
+                              "use": "TableRow",
+                              "children": [
+                                {
+                                  "use": "TableHeadCell",
+                                  "props": {
+                                    "Scope": "col",
+                                    "Class": "py-4"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "labels.feature"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "TableHeadCell",
+                                  "props": {
+                                    "Scope": "col",
+                                    "Class": "py-4"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "labels.a"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "TableHeadCell",
+                                  "props": {
+                                    "Scope": "col",
+                                    "Class": {
+                                      "op": "cn",
+                                      "args": [
+                                        "py-4",
+                                        {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "highlight"
+                                                },
+                                                "middle"
+                                              ]
+                                            },
+                                            "bg-muted",
+                                            ""
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "attrs": {
+                                    "data-highlight": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "highlight"
+                                            },
+                                            "middle"
+                                          ]
+                                        },
+                                        "true",
+                                        "false"
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "labels.b"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "TableHeadCell",
+                                  "props": {
+                                    "Scope": "col",
+                                    "Class": "py-4"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "labels.c"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableBody",
+                          "children": [
+                            {
+                              "each": {
+                                "$": "rows"
+                              },
+                              "as": "row",
+                              "key": {
+                                "$": "row.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "TableRow",
+                                  "props": {
+                                    "Class": "border-t border-border"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "item"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "TableHeadCell",
+                                      "props": {
+                                        "Scope": "row",
+                                        "Class": {
+                                          "op": "cn",
+                                          "args": [
+                                            "font-medium",
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "density"
+                                                    },
+                                                    "compact"
+                                                  ]
+                                                },
+                                                "py-2",
+                                                "py-4"
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "row.label"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "TableCell",
+                                      "props": {
+                                        "Class": {
+                                          "op": "cn",
+                                          "args": [
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "density"
+                                                    },
+                                                    "compact"
+                                                  ]
+                                                },
+                                                "py-2",
+                                                "py-4"
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "children": [
+                                        {
+                                          "organism": "CompareMark",
+                                          "props": {
+                                            "value": {
+                                              "$": "row.a"
+                                            },
+                                            "yes": {
+                                              "$": "labels.yes"
+                                            },
+                                            "no": {
+                                              "$": "labels.no"
+                                            }
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "TableCell",
+                                      "props": {
+                                        "Class": {
+                                          "op": "cn",
+                                          "args": [
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "density"
+                                                    },
+                                                    "compact"
+                                                  ]
+                                                },
+                                                "py-2",
+                                                "py-4"
+                                              ]
+                                            },
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "highlight"
+                                                    },
+                                                    "middle"
+                                                  ]
+                                                },
+                                                "bg-muted font-semibold",
+                                                ""
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "children": [
+                                        {
+                                          "organism": "CompareMark",
+                                          "props": {
+                                            "value": {
+                                              "$": "row.b"
+                                            },
+                                            "yes": {
+                                              "$": "labels.yes"
+                                            },
+                                            "no": {
+                                              "$": "labels.no"
+                                            }
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "TableCell",
+                                      "props": {
+                                        "Class": {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "density"
+                                                },
+                                                "compact"
+                                              ]
+                                            },
+                                            "py-2",
+                                            "py-4"
+                                          ]
+                                        }
+                                      },
+                                      "children": [
+                                        {
+                                          "organism": "CompareMark",
+                                          "props": {
+                                            "value": {
+                                              "$": "row.c"
+                                            },
+                                            "yes": {
+                                              "$": "labels.yes"
+                                            },
+                                            "no": {
+                                              "$": "labels.no"
+                                            }
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/contact-form.json b/xgen/specs/organisms/contact-form.json
new file mode 100644
index 0000000..f46f601
--- /dev/null
+++ b/xgen/specs/organisms/contact-form.json
@@ -0,0 +1,645 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.contact-form",
+  "name": "ContactForm",
+  "docs": "A contact section: a form (name, email, subject, message, consent) and, in the split layout, the ways to reach us beside it. Axes: layout (single, split), fields (short: email and message, full), terms (show, hide), tone (default, muted).",
+  "records": {
+    "ContactLabels": [
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "email",
+        "type": "string"
+      },
+      {
+        "name": "subject",
+        "type": "string"
+      },
+      {
+        "name": "message",
+        "type": "string"
+      },
+      {
+        "name": "consent",
+        "type": "string"
+      },
+      {
+        "name": "submit",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "ContactLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "details",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true,
+      "docs": "the ways to reach us, shown beside the form in the split layout"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"single\" | \"split\""
+      },
+      "default": "single"
+    },
+    {
+      "name": "fields",
+      "type": {
+        "ts": "\"short\" | \"full\""
+      },
+      "default": "full"
+    },
+    {
+      "name": "terms",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "hide"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 2
+    },
+    {
+      "name": "page",
+      "type": {
+        "ts": "\"section\" | \"full\""
+      },
+      "default": "section",
+      "docs": "full: a page of its own, a narrow form in the middle with a roomy heading"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "text"
+        },
+        "heading": {
+          "level": {
+            "$": "level"
+          }
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "page"
+                },
+                "full"
+              ]
+            },
+            "roomy",
+            "default"
+          ]
+        },
+        "align": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "page"
+                },
+                "full"
+              ]
+            },
+            "center",
+            "start"
+          ]
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "single"
+              ]
+            },
+            "xl",
+            "default"
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Grid",
+              "props": {
+                "Cols": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "split"
+                      ]
+                    },
+                    "1-2",
+                    "1"
+                  ]
+                },
+                "Class": "items-start gap-8"
+              },
+              "children": [
+                {
+                  "use": "Form",
+                  "props": {
+                    "Method": "dialog",
+                    "Class": "w-full gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "contact-form"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "fields"
+                          },
+                          "full"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "Field",
+                          "props": {
+                            "label": {
+                              "$": "labels.name"
+                            },
+                            "htmlFor": {
+                              "op": "tpl",
+                              "args": [
+                                "{0}-name",
+                                {
+                                  "$": "id"
+                                }
+                              ]
+                            }
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "use": "Input",
+                                  "props": {
+                                    "Type": "text",
+                                    "Name": "name",
+                                    "Autocomplete": "name"
+                                  },
+                                  "attrs": {
+                                    "id": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-name",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    },
+                                    "data-testid": "field"
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "Field",
+                      "props": {
+                        "label": {
+                          "$": "labels.email"
+                        },
+                        "htmlFor": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-email",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        }
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "use": "Input",
+                              "props": {
+                                "Type": "email",
+                                "Name": "email",
+                                "Autocomplete": "email"
+                              },
+                              "attrs": {
+                                "id": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-email",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                },
+                                "data-testid": "field"
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "fields"
+                          },
+                          "full"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "Field",
+                          "props": {
+                            "label": {
+                              "$": "labels.subject"
+                            },
+                            "htmlFor": {
+                              "op": "tpl",
+                              "args": [
+                                "{0}-subject",
+                                {
+                                  "$": "id"
+                                }
+                              ]
+                            }
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "use": "Input",
+                                  "props": {
+                                    "Type": "text",
+                                    "Name": "subject"
+                                  },
+                                  "attrs": {
+                                    "id": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-subject",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    },
+                                    "data-testid": "field"
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "Field",
+                      "props": {
+                        "label": {
+                          "$": "labels.message"
+                        },
+                        "htmlFor": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-message",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        }
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "use": "Textarea",
+                              "props": {
+                                "Rows": 4,
+                                "Name": "message"
+                              },
+                              "attrs": {
+                                "id": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-message",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                },
+                                "data-testid": "field"
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "terms"
+                          },
+                          "show"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "2",
+                            "Align": "center",
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "w-fit",
+                                ""
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "use": "Checkbox",
+                              "props": {
+                                "Name": "consent"
+                              },
+                              "attrs": {
+                                "id": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-consent",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              "use": "Label",
+                              "props": {
+                                "HTMLFor": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-consent",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                },
+                                "Class": "text-sm"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.consent"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "default",
+                        "Size": "default",
+                        "Type": "submit",
+                        "Class": "w-fit"
+                      },
+                      "attrs": {
+                        "data-testid": "submit"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.submit"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "and",
+                    "args": [
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "split"
+                        ]
+                      },
+                      {
+                        "op": "gt",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "details"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4"
+                      },
+                      "attrs": {
+                        "data-testid": "details"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "details"
+                          },
+                          "as": "d",
+                          "key": {
+                            "$": "d.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "4",
+                                "Align": "start"
+                              },
+                              "attrs": {
+                                "data-testid": "detail"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": {
+                                      "$": "d.icon"
+                                    },
+                                    "Size": 20
+                                  }
+                                },
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "0"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "base",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "d.title"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "d.text"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/cookie-banner.json b/xgen/specs/organisms/cookie-banner.json
new file mode 100644
index 0000000..b8151e7
--- /dev/null
+++ b/xgen/specs/organisms/cookie-banner.json
@@ -0,0 +1,323 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.cookie-banner",
+  "name": "CookieBanner",
+  "docs": "A consent notice: an icon, a heading, one paragraph and the buttons accept, decline and (optionally) settings. Axes: layout (bar, card), actions (two, three), tone (default, muted).",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "accept",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "decline",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "settings",
+      "type": "string",
+      "docs": "text of the third button, shown when `actions` is three"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"bar\" | \"card\""
+      },
+      "default": "bar"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "\"two\" | \"three\""
+      },
+      "default": "two"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section"
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "op": "tpl",
+              "args": [
+                "{0}-title",
+                {
+                  "$": "id"
+                }
+              ]
+            }
+          ]
+        },
+        "data-testid": "cookie",
+        "data-layout": {
+          "$": "layout"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                "py-4"
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "flex flex-col gap-4 rounded p-6 inset-ring inset-ring-border",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "tone"
+                            },
+                            "muted"
+                          ]
+                        },
+                        "bg-muted",
+                        "bg-card"
+                      ]
+                    },
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "bar"
+                          ]
+                        },
+                        "md:flex-row md:items-center md:justify-between",
+                        "mx-auto w-full max-w-md"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "start",
+                    "Class": "min-w-0"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "cookie",
+                        "Size": 24
+                      }
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2"
+                      },
+                      "children": [
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 2,
+                            "Size": "base",
+                            "Weight": "bold"
+                          },
+                          "attrs": {
+                            "id": {
+                              "op": "tpl",
+                              "args": [
+                                "{0}-title",
+                                {
+                                  "$": "id"
+                                }
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "text"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Class": "shrink-0 flex-wrap"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "and",
+                        "args": [
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "actions"
+                              },
+                              "three"
+                            ]
+                          },
+                          {
+                            "$": "settings"
+                          }
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "ghost",
+                            "Size": "sm",
+                            "Type": "button"
+                          },
+                          "attrs": {
+                            "data-testid": "cookie-settings"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "settings"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "outline",
+                        "Size": "sm",
+                        "Type": "button"
+                      },
+                      "attrs": {
+                        "data-testid": "cookie-decline"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "decline"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "default",
+                        "Size": "sm",
+                        "Type": "button"
+                      },
+                      "attrs": {
+                        "data-testid": "cookie-accept"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "accept"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/credit-packs.json b/xgen/specs/organisms/credit-packs.json
new file mode 100644
index 0000000..a495410
--- /dev/null
+++ b/xgen/specs/organisms/credit-packs.json
@@ -0,0 +1,549 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.credit-packs",
+  "name": "CreditPacks",
+  "docs": "Packs of credits as tiles: the amount, a badge, the price and a buy button. Axes: columns (2, 4), item (tile, row), tone, density.",
+  "records": {
+    "Pack": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "credits",
+        "type": "number"
+      },
+      {
+        "name": "price",
+        "type": "number"
+      },
+      {
+        "name": "currency",
+        "type": "string"
+      },
+      {
+        "name": "badge",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "packs",
+      "type": {
+        "ts": "Pack[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "badges",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "required": true,
+      "docs": "badge word by pack badge (popular, best)"
+    },
+    {
+      "name": "buy",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"2\" | \"4\""
+      },
+      "default": "4"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"tile\" | \"row\""
+      },
+      "default": "tile"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "item"
+                },
+                "row"
+              ]
+            },
+            "2xl",
+            "default"
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "packs"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "coins",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "item"
+                            },
+                            "row"
+                          ]
+                        },
+                        "1",
+                        {
+                          "op": "fitCols",
+                          "args": [
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "cols"
+                                    },
+                                    "2"
+                                  ]
+                                },
+                                "1-2",
+                                "1-4"
+                              ]
+                            },
+                            {
+                              "op": "len",
+                              "args": [
+                                {
+                                  "$": "packs"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    "Class": "gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "packs"
+                      },
+                      "as": "pack",
+                      "key": {
+                        "$": "pack.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Card",
+                          "props": {
+                            "Variant": "default",
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "h-full",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "item"
+                                        },
+                                        "row"
+                                      ]
+                                    },
+                                    "gap-4 p-4",
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "density"
+                                            },
+                                            "compact"
+                                          ]
+                                        },
+                                        "gap-4 p-4",
+                                        ""
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "item",
+                            "data-badge": {
+                              "$": "pack.badge"
+                            }
+                          },
+                          "children": [
+                            {
+                              "use": "CardContent",
+                              "props": {
+                                "Class": {
+                                  "op": "cn",
+                                  "args": [
+                                    "flex h-full gap-4",
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "item"
+                                            },
+                                            "row"
+                                          ]
+                                        },
+                                        "flex-row flex-wrap items-center justify-between",
+                                        "flex-col"
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              "children": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2",
+                                    "Align": "start",
+                                    "Class": {
+                                      "op": "cn",
+                                      "args": [
+                                        "min-w-0",
+                                        {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "item"
+                                                },
+                                                "row"
+                                              ]
+                                            },
+                                            "flex-1",
+                                            ""
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "when": {
+                                        "op": "or",
+                                        "args": [
+                                          {
+                                            "$": "pack.badge"
+                                          },
+                                          {
+                                            "op": "and",
+                                            "args": [
+                                              {
+                                                "op": "ne",
+                                                "args": [
+                                                  {
+                                                    "$": "item"
+                                                  },
+                                                  "row"
+                                                ]
+                                              },
+                                              {
+                                                "op": "gt",
+                                                "args": [
+                                                  {
+                                                    "op": "count",
+                                                    "args": [
+                                                      {
+                                                        "$": "packs"
+                                                      },
+                                                      "badge"
+                                                    ]
+                                                  },
+                                                  0
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "Box",
+                                          "props": {
+                                            "Class": "flex min-h-6 items-center"
+                                          },
+                                          "attrs": {
+                                            "data-slot": "badge-slot"
+                                          },
+                                          "children": [
+                                            {
+                                              "when": {
+                                                "$": "pack.badge"
+                                              },
+                                              "then": [
+                                                {
+                                                  "use": "Badge",
+                                                  "props": {
+                                                    "Variant": "default",
+                                                    "Size": "default",
+                                                    "Class": "w-fit shrink-0"
+                                                  },
+                                                  "attrs": {
+                                                    "data-testid": "badge"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "op": "at",
+                                                        "args": [
+                                                          {
+                                                            "$": "badges"
+                                                          },
+                                                          {
+                                                            "$": "pack.badge"
+                                                          }
+                                                        ]
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Stack",
+                                      "props": {
+                                        "Gap": "0",
+                                        "Class": "min-w-0"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Title",
+                                          "props": {
+                                            "As": 3,
+                                            "Size": "xl",
+                                            "Weight": "bold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "pack.name"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "2xl",
+                                            "Weight": "bold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "money",
+                                                "args": [
+                                                  {
+                                                    "$": "pack.price"
+                                                  },
+                                                  {
+                                                    "$": "pack.currency"
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Button",
+                                  "props": {
+                                    "Variant": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "pack.badge"
+                                            },
+                                            "popular"
+                                          ]
+                                        },
+                                        "default",
+                                        "outline"
+                                      ]
+                                    },
+                                    "Size": "sm",
+                                    "Type": "button",
+                                    "Class": {
+                                      "op": "cn",
+                                      "args": [
+                                        "w-fit shrink-0",
+                                        {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "item"
+                                                },
+                                                "row"
+                                              ]
+                                            },
+                                            "",
+                                            "mt-auto"
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "attrs": {
+                                    "data-testid": "buy"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "buy"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/cta-actions.json b/xgen/specs/organisms/cta-actions.json
new file mode 100644
index 0000000..70546c5
--- /dev/null
+++ b/xgen/specs/organisms/cta-actions.json
@@ -0,0 +1,230 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.cta-actions",
+  "name": "CtaActions",
+  "docs": "The actions of a call to action: one or two links (ActionGroup), or an email field with a button (actions form).",
+  "records": {
+    "ActionSet": [
+      {
+        "name": "mode",
+        "type": "\"one\" | \"two\" | \"form\"",
+        "optional": true,
+        "docs": "one or two links, or a form",
+        "default": "one"
+      },
+      {
+        "name": "cta",
+        "type": "string",
+        "optional": false,
+        "docs": "primary action label"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true,
+        "docs": "the address of the primary action; none: a button, not a link"
+      },
+      {
+        "name": "secondary",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "secondaryHref",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "emailLabel",
+        "type": "string",
+        "optional": true,
+        "docs": "label of the form field (the email field, or the prompt line of HeroPrompt)"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "actions",
+      "type": {
+        "record": "ActionSet"
+      },
+      "required": true
+    },
+    {
+      "name": "center",
+      "type": "boolean",
+      "default": false
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "actions.mode"
+          },
+          "form"
+        ]
+      },
+      "then": [
+        {
+          "use": "Form",
+          "props": {
+            "Method": "dialog",
+            "Class": {
+              "op": "cn",
+              "args": [
+                "w-full max-w-md",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "center"
+                    },
+                    "mx-auto",
+                    ""
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-testid": "email-form"
+          },
+          "children": [
+            {
+              "use": "Label",
+              "props": {
+                "HTMLFor": {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-email",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                },
+                "Class": "sr-only"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "actions.emailLabel"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "start",
+                "Class": "w-full flex-wrap"
+              },
+              "children": [
+                {
+                  "use": "Input",
+                  "props": {
+                    "Type": "email",
+                    "Name": "email",
+                    "Class": "min-w-0 flex-1"
+                  },
+                  "attrs": {
+                    "id": {
+                      "op": "tpl",
+                      "args": [
+                        "{0}-email",
+                        {
+                          "$": "id"
+                        }
+                      ]
+                    },
+                    "data-testid": "field"
+                  }
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "default",
+                    "Size": "default",
+                    "Type": "submit"
+                  },
+                  "attrs": {
+                    "data-testid": "submit"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "actions.cta"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "else": [
+        {
+          "organism": "ActionGroup",
+          "props": {
+            "primary": {
+              "$": "actions.cta"
+            },
+            "primaryHref": {
+              "$": "actions.href"
+            },
+            "secondary": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "actions.mode"
+                    },
+                    "two"
+                  ]
+                },
+                {
+                  "$": "actions.secondary"
+                },
+                {
+                  "op": "undef",
+                  "args": []
+                }
+              ]
+            },
+            "secondaryHref": {
+              "$": "actions.secondaryHref"
+            },
+            "align": {
+              "op": "cond",
+              "args": [
+                {
+                  "$": "center"
+                },
+                "center",
+                "start"
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/cta-band.json b/xgen/specs/organisms/cta-band.json
new file mode 100644
index 0000000..18add73
--- /dev/null
+++ b/xgen/specs/organisms/cta-band.json
@@ -0,0 +1,478 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.cta-band",
+  "name": "CtaBand",
+  "docs": "A closing call to action: a heading, one sentence and one or two links. Axes: layout (card, band, split picture, row: heading beside the button in a card), tone, actions (one, two, form: an email field), proof (none, quote), density.",
+  "records": {
+    "CtaQuote": [
+      {
+        "name": "text",
+        "type": "string",
+        "optional": true,
+        "docs": "a customer quote, shown when `proof` is quote"
+      },
+      {
+        "name": "by",
+        "type": "string",
+        "optional": true,
+        "docs": "who said it"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "ActionSet"
+      },
+      "required": true,
+      "docs": "the links (mode one or two) or the email field (mode form)"
+    },
+    {
+      "name": "quote",
+      "type": {
+        "record": "CtaQuote"
+      }
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"card\" | \"band\" | \"split\" | \"row\" | \"banner\""
+      },
+      "default": "card",
+      "docs": "card: boxed; band: full-width; split: text beside picture; row: heading beside button; banner: centered muted card with one button"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "muted"
+    },
+    {
+      "name": "proof",
+      "type": {
+        "ts": "\"none\" | \"quote\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "center",
+      "value": {
+        "op": "or",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "band"
+            ]
+          },
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "banner"
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "layout"
+          },
+          "banner"
+        ]
+      },
+      "then": [
+        {
+          "organism": "CtaBanner",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "title"
+            },
+            "text": {
+              "$": "text"
+            },
+            "cta": {
+              "$": "actions.cta"
+            },
+            "href": {
+              "$": "actions.href"
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "row"
+            ]
+          },
+          "then": [
+            {
+              "use": "Block",
+              "props": {
+                "Tag": "section",
+                "Class": "py-8"
+              },
+              "attrs": {
+                "aria-labelledby": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "landmarkLabel"
+                    },
+                    {
+                      "op": "undef",
+                      "args": []
+                    },
+                    {
+                      "op": "tpl",
+                      "args": [
+                        "{0}-title",
+                        {
+                          "$": "id"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                "data-testid": "section",
+                "data-tone": {
+                  "$": "tone"
+                },
+                "data-density": {
+                  "$": "density"
+                },
+                "aria-label": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "children": [
+                {
+                  "use": "Container",
+                  "props": {
+                    "Class": "mx-auto w-full max-w-6xl px-4"
+                  },
+                  "attrs": {
+                    "data-slot": "container"
+                  },
+                  "children": [
+                    {
+                      "use": "Card",
+                      "props": {
+                        "Variant": "muted"
+                      },
+                      "children": [
+                        {
+                          "use": "CardContent",
+                          "props": {
+                            "Class": "flex flex-col gap-4 md:flex-row md:items-center md:justify-between"
+                          },
+                          "children": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "2",
+                                "Class": "min-w-0"
+                              },
+                              "children": [
+                                {
+                                  "use": "Title",
+                                  "props": {
+                                    "As": 2,
+                                    "Size": "2xl",
+                                    "Weight": "bold"
+                                  },
+                                  "attrs": {
+                                    "id": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-title",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "title"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "base",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "text"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "when": {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "proof"
+                                  },
+                                  "quote"
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "organism": "QuoteProof",
+                                  "props": {
+                                    "quote": {
+                                      "$": "quote.text"
+                                    },
+                                    "quoteBy": {
+                                      "$": "quote.by"
+                                    },
+                                    "center": {
+                                      "$": "center"
+                                    }
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "organism": "CtaActions",
+                              "props": {
+                                "id": {
+                                  "$": "id"
+                                },
+                                "actions": {
+                                  "$": "actions"
+                                },
+                                "center": {
+                                  "$": "center"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "else": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "text"
+                },
+                "layout": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "split"
+                      ]
+                    },
+                    "split",
+                    "stack"
+                  ]
+                },
+                "align": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "center"
+                    },
+                    "center",
+                    "start"
+                  ]
+                },
+                "boxed": {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "layout"
+                    },
+                    "card"
+                  ]
+                },
+                "media": {
+                  "show": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "split"
+                    ]
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "density": {
+                  "$": "density"
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "proof"
+                          },
+                          "quote"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "QuoteProof",
+                          "props": {
+                            "quote": {
+                              "$": "quote.text"
+                            },
+                            "quoteBy": {
+                              "$": "quote.by"
+                            },
+                            "center": {
+                              "$": "center"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "CtaActions",
+                      "props": {
+                        "id": {
+                          "$": "id"
+                        },
+                        "actions": {
+                          "$": "actions"
+                        },
+                        "center": {
+                          "$": "center"
+                        }
+                      }
+                    }
+                  ]
+                },
+                "aside": {
+                  "args": [],
+                  "do": [
+                    {
+                      "organism": "MediaFrame",
+                      "props": {
+                        "alt": {
+                          "$": "title"
+                        },
+                        "ratio": "4/3"
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "CtaActions",
+      "names": [
+        "ActionSet"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/cta-banner.json b/xgen/specs/organisms/cta-banner.json
new file mode 100644
index 0000000..76bdce9
--- /dev/null
+++ b/xgen/specs/organisms/cta-banner.json
@@ -0,0 +1,211 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.cta-banner",
+  "name": "CtaBanner",
+  "docs": "A centered closing card: heading, one sentence and a pill button. Sizes from the default preset.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "cta",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "href",
+      "type": "string",
+      "docs": "the address; none: a button, not a link"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "muted"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section",
+        "Class": "w-full py-0"
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "op": "tpl",
+              "args": [
+                "{0}-title",
+                {
+                  "$": "id"
+                }
+              ]
+            }
+          ]
+        },
+        "data-testid": "section",
+        "data-tone": {
+          "$": "tone"
+        },
+        "data-density": "compact",
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "flex w-full flex-col items-center gap-10 bg-muted px-6 text-center",
+                {
+                  "op": "preset",
+                  "args": [
+                    "defaults",
+                    "cta.panel"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-testid": "cta-banner"
+          },
+          "children": [
+            {
+              "use": "Title",
+              "props": {
+                "As": 2,
+                "Size": "3xl",
+                "Weight": "semibold",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    {
+                      "op": "preset",
+                      "args": [
+                        "defaults",
+                        "cta.title"
+                      ]
+                    },
+                    "leading-9"
+                  ]
+                }
+              },
+              "attrs": {
+                "id": {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-title",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "title"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "xs",
+                "Weight": "semibold",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "leading-5 text-muted-foreground",
+                    {
+                      "op": "preset",
+                      "args": [
+                        "defaults",
+                        "cta.text"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "text"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Button",
+              "props": {
+                "Variant": "default",
+                "Size": "lg",
+                "Href": {
+                  "$": "href"
+                },
+                "Class": {
+                  "op": "preset",
+                  "args": [
+                    "defaults",
+                    "cta.button"
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "action-primary"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "cta"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/cta-proof-items.json b/xgen/specs/organisms/cta-proof-items.json
new file mode 100644
index 0000000..adbb626
--- /dev/null
+++ b/xgen/specs/organisms/cta-proof-items.json
@@ -0,0 +1,639 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.cta-proof-items",
+  "name": "CtaProofItems",
+  "docs": "The proof of CtaProof. Shapes: logos (six names with a glyph), features (small features in two columns), stats (three figures), rows (four icon rows), zones (delivery zones: name and areas, price and time).",
+  "records": {},
+  "props": [
+    {
+      "name": "content",
+      "type": {
+        "ts": "CtaContent"
+      },
+      "required": true
+    },
+    {
+      "name": "proof",
+      "type": {
+        "ts": "\"logos\" | \"features\" | \"stats\" | \"rows\" | \"zones\""
+      },
+      "default": "stats"
+    },
+    {
+      "name": "center",
+      "type": "boolean",
+      "default": false,
+      "docs": "the centered layout: items centred in their cells"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "proof"
+              },
+              "logos"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.logos"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6"
+          },
+          "attrs": {
+            "data-testid": "cta-proof"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "content.logos"
+              },
+              "as": "l",
+              "key": {
+                "$": "l.id"
+              },
+              "do": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "center",
+                    "Justify": "center",
+                    "Class": "text-muted-foreground"
+                  },
+                  "attrs": {
+                    "data-testid": "cta-item"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": {
+                          "$": "l.icon"
+                        },
+                        "Size": 20
+                      }
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Weight": "semibold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "l.name"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "proof"
+              },
+              "features"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.features"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid grid-cols-1 gap-4 text-left sm:grid-cols-2"
+          },
+          "attrs": {
+            "data-testid": "cta-proof"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "content.features"
+              },
+              "as": "f",
+              "key": {
+                "$": "f.id"
+              },
+              "do": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "start",
+                    "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                  },
+                  "attrs": {
+                    "data-testid": "cta-item"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "f.icon"
+                            },
+                            "Size": 20
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "f.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "f.text"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "proof"
+              },
+              "stats"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.stats"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid grid-cols-3 gap-4"
+          },
+          "attrs": {
+            "data-testid": "cta-proof"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "content.stats"
+              },
+              "as": "s",
+              "key": {
+                "$": "s.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      3
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0",
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "center"
+                            },
+                            "items-center text-center",
+                            ""
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "cta-item"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "3xl",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.value"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.label"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "proof"
+              },
+              "rows"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.features"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "List",
+          "props": {
+            "Class": "m-0 flex list-none flex-col gap-4 p-0"
+          },
+          "attrs": {
+            "data-testid": "cta-proof"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "content.features"
+              },
+              "as": "f",
+              "key": {
+                "$": "f.id"
+              },
+              "do": [
+                {
+                  "use": "ListItem",
+                  "props": {
+                    "Class": "flex items-start gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "cta-item"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "f.icon"
+                            },
+                            "Size": 20
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "f.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "f.text"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "proof"
+              },
+              "zones"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.zones"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "List",
+          "props": {
+            "Class": "m-0 flex list-none flex-col p-0"
+          },
+          "attrs": {
+            "data-testid": "cta-proof"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "content.zones"
+              },
+              "as": "z",
+              "key": {
+                "$": "z.id"
+              },
+              "do": [
+                {
+                  "use": "ListItem",
+                  "props": {
+                    "Class": "flex items-start justify-between gap-4 border-b border-border py-4"
+                  },
+                  "attrs": {
+                    "data-testid": "cta-item"
+                  },
+                  "children": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0",
+                        "Class": "min-w-0"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "z.name"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "z.area"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0",
+                        "Class": "shrink-0 text-right"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "$": "z.price"
+                                  },
+                                  {
+                                    "$": "z.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "z.time"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "CtaProof",
+      "names": [
+        "CtaContent"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/cta-proof.json b/xgen/specs/organisms/cta-proof.json
new file mode 100644
index 0000000..9ae056e
--- /dev/null
+++ b/xgen/specs/organisms/cta-proof.json
@@ -0,0 +1,330 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.cta-proof",
+  "name": "CtaProof",
+  "docs": "A call to action with proof: a badge, the heading, a lead, the proof, one or two actions and an optional note. Axes: layout (center: everything centred, the proof above the actions; split: beside a picture), proof (logos, features, stats, rows, zones), mediaSide, tone.",
+  "records": {
+    "CtaContent": [
+      {
+        "name": "logos",
+        "type": "Logo[]"
+      },
+      {
+        "name": "features",
+        "type": "Feature[]"
+      },
+      {
+        "name": "stats",
+        "type": "Stat[]"
+      },
+      {
+        "name": "zones",
+        "type": "Zone[]"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "LinkActions"
+      },
+      "required": true
+    },
+    {
+      "name": "content",
+      "type": {
+        "record": "CtaContent"
+      },
+      "required": true
+    },
+    {
+      "name": "note",
+      "type": "string",
+      "default": "",
+      "docs": "a small line under the actions"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"center\" | \"split\""
+      },
+      "default": "center"
+    },
+    {
+      "name": "proof",
+      "type": {
+        "ts": "\"logos\" | \"features\" | \"stats\" | \"rows\" | \"zones\""
+      },
+      "default": "stats"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "heading": {
+          "badge": {
+            "$": "badge"
+          }
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "align": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "center"
+              ]
+            },
+            "center",
+            "start"
+          ]
+        },
+        "layout": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "center"
+              ]
+            },
+            "stack",
+            "split"
+          ]
+        },
+        "media": {
+          "show": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "split"
+            ]
+          },
+          "side": {
+            "$": "mediaSide"
+          }
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "organism": "CtaProofItems",
+              "props": {
+                "content": {
+                  "$": "content"
+                },
+                "proof": {
+                  "$": "proof"
+                },
+                "center": {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "layout"
+                    },
+                    "center"
+                  ]
+                }
+              }
+            },
+            {
+              "organism": "ActionGroup",
+              "props": {
+                "primary": {
+                  "$": "actions.cta"
+                },
+                "primaryHref": {
+                  "$": "actions.href"
+                },
+                "secondary": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "actions.mode"
+                        },
+                        "two"
+                      ]
+                    },
+                    {
+                      "$": "actions.secondary"
+                    },
+                    {
+                      "op": "undef",
+                      "args": []
+                    }
+                  ]
+                },
+                "secondaryHref": {
+                  "$": "actions.secondaryHref"
+                },
+                "align": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "center"
+                      ]
+                    },
+                    "center",
+                    "start"
+                  ]
+                }
+              }
+            },
+            {
+              "when": {
+                "$": "note"
+              },
+              "then": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "xs",
+                    "Class": "text-muted-foreground"
+                  },
+                  "attrs": {
+                    "data-testid": "cta-note"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "note"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "title"
+                },
+                "ratio": "4/3"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "LogoCloud",
+      "names": [
+        "Logo"
+      ]
+    },
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    },
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    },
+    {
+      "from": "ZoneTable",
+      "names": [
+        "Zone"
+      ]
+    },
+    {
+      "from": "ErrorPage",
+      "names": [
+        "LinkActions"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/dashboard-overview.json b/xgen/specs/organisms/dashboard-overview.json
new file mode 100644
index 0000000..3ad7a51
--- /dev/null
+++ b/xgen/specs/organisms/dashboard-overview.json
@@ -0,0 +1,401 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.dashboard-overview",
+  "name": "DashboardOverview",
+  "docs": "The first screen of an app: counters, a chart and recent activity. Axes: layout (split: the chart and the activity side by side, stacked: one below the other), cols (2, 4), tone, density.",
+  "records": {
+    "OverviewChart": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false
+      },
+      {
+        "name": "text",
+        "type": "string",
+        "optional": false
+      },
+      {
+        "name": "summary",
+        "type": "string",
+        "optional": false,
+        "docs": "the chart's accessible summary"
+      },
+      {
+        "name": "series",
+        "type": "Point[]",
+        "optional": false,
+        "docs": "the bars"
+      }
+    ],
+    "OverviewActivity": [
+      {
+        "name": "title",
+        "type": "string",
+        "optional": false
+      },
+      {
+        "name": "text",
+        "type": "string",
+        "optional": false
+      },
+      {
+        "name": "events",
+        "type": "Event[]",
+        "optional": false
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "metrics",
+      "type": {
+        "ts": "Metric[]"
+      },
+      "required": true
+    },
+    {
+      "name": "chart",
+      "type": {
+        "record": "OverviewChart"
+      },
+      "required": true
+    },
+    {
+      "name": "activity",
+      "type": {
+        "record": "OverviewActivity"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"split\" | \"stacked\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"2\" | \"4\""
+      },
+      "default": "4"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "6",
+                "Align": "stretch"
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "metrics"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "cols"
+                                },
+                                "2"
+                              ]
+                            },
+                            "1-2",
+                            "1-4"
+                          ]
+                        },
+                        "Class": "gap-4"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "metrics"
+                          },
+                          "as": "m",
+                          "key": {
+                            "$": "m.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Box",
+                              "props": {},
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "organism": "StatTile",
+                                  "props": {
+                                    "label": {
+                                      "$": "m.label"
+                                    },
+                                    "value": {
+                                      "$": "m.value"
+                                    },
+                                    "icon": {
+                                      "$": "m.icon"
+                                    },
+                                    "hint": {
+                                      "$": "m.hint"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "split"
+                          ]
+                        },
+                        "1-2",
+                        "1"
+                      ]
+                    },
+                    "Class": "items-stretch gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "panels"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "gt",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "chart.series"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "Panel",
+                          "props": {
+                            "title": {
+                              "$": "chart.title"
+                            },
+                            "description": {
+                              "$": "chart.text"
+                            },
+                            "id": {
+                              "op": "tpl",
+                              "args": [
+                                "{0}-chart",
+                                {
+                                  "$": "id"
+                                }
+                              ]
+                            },
+                            "className": "h-full"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "organism": "BarChart",
+                                  "props": {
+                                    "bars": {
+                                      "$": "chart.series"
+                                    },
+                                    "label": {
+                                      "$": "chart.summary"
+                                    },
+                                    "height": 144
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "gt",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "activity.events"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "Panel",
+                          "props": {
+                            "title": {
+                              "$": "activity.title"
+                            },
+                            "description": {
+                              "$": "activity.text"
+                            },
+                            "id": {
+                              "op": "tpl",
+                              "args": [
+                                "{0}-feed",
+                                {
+                                  "$": "id"
+                                }
+                              ]
+                            },
+                            "className": "h-full"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "organism": "Timeline",
+                                  "props": {
+                                    "items": {
+                                      "$": "activity.events"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MetricRow",
+      "names": [
+        "Metric"
+      ]
+    },
+    {
+      "from": "ChartPanel",
+      "names": [
+        "Point"
+      ]
+    },
+    {
+      "from": "ActivityFeed",
+      "names": [
+        "Event"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/dashboard-shell.json b/xgen/specs/organisms/dashboard-shell.json
new file mode 100644
index 0000000..958b072
--- /dev/null
+++ b/xgen/specs/organisms/dashboard-shell.json
@@ -0,0 +1,541 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.dashboard-shell",
+  "name": "DashboardShell",
+  "docs": "The frame of a signed-in app around placeholder content. Axes: topbar (full: across the whole shell, inset: over the content column only, none), search (show, hide: the search field of the top bar), sidebar (wide, rail, collapsed: the static collapsed state, twolevel: a rail and a section panel, none: the top bar carries the links), side (start, end), footer (full, inset, none), content (grid, split, list), frame (window: a framed window in a section, page: the whole page). Collapsing the sidebar is a port contract.",
+  "records": {
+    "ShellNav": [
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "brand",
+        "type": "string"
+      },
+      {
+        "name": "links",
+        "type": "NavLink[]"
+      },
+      {
+        "name": "current",
+        "type": "string"
+      },
+      {
+        "name": "subTitle",
+        "type": "string"
+      },
+      {
+        "name": "sub",
+        "type": "NavLink[]"
+      },
+      {
+        "name": "subCurrent",
+        "type": "string"
+      },
+      {
+        "name": "search",
+        "type": "string"
+      },
+      {
+        "name": "shortcut",
+        "type": "string"
+      },
+      {
+        "name": "expand",
+        "type": "string"
+      },
+      {
+        "name": "userName",
+        "type": "string"
+      },
+      {
+        "name": "copyright",
+        "type": "string"
+      },
+      {
+        "name": "footerLabel",
+        "type": "string"
+      },
+      {
+        "name": "footer",
+        "type": "NavLink[]"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 2
+    },
+    {
+      "name": "nav",
+      "type": {
+        "ts": "ShellNav"
+      },
+      "required": true,
+      "docs": "the brand, the links of both levels and the texts of the shell"
+    },
+    {
+      "name": "topbar",
+      "type": {
+        "ts": "\"full\" | \"inset\" | \"none\""
+      },
+      "default": "full"
+    },
+    {
+      "name": "search",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "sidebar",
+      "type": {
+        "ts": "\"wide\" | \"rail\" | \"collapsed\" | \"twolevel\" | \"none\""
+      },
+      "default": "wide"
+    },
+    {
+      "name": "side",
+      "type": {
+        "ts": "\"start\" | \"end\""
+      },
+      "default": "start"
+    },
+    {
+      "name": "footer",
+      "type": {
+        "ts": "\"full\" | \"inset\" | \"none\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "content",
+      "type": {
+        "ts": "\"grid\" | \"split\" | \"list\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "frame",
+      "type": {
+        "ts": "\"window\" | \"page\""
+      },
+      "default": "window"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "titleId",
+      "value": {
+        "op": "tpl",
+        "args": [
+          "{0}-title",
+          {
+            "$": "id"
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section",
+        "Class": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "frame"
+                },
+                "window"
+              ]
+            },
+            "bg-background py-12",
+            "bg-background"
+          ]
+        }
+      },
+      "attrs": {
+        "id": {
+          "$": "id"
+        },
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "$": "titleId"
+            }
+          ]
+        },
+        "data-testid": "dashboard-shell",
+        "data-topbar": {
+          "$": "topbar"
+        },
+        "data-sidebar": {
+          "$": "sidebar"
+        },
+        "data-footer": {
+          "$": "footer"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "frame"
+                    },
+                    "window"
+                  ]
+                },
+                "mx-auto w-full max-w-6xl px-4",
+                ""
+              ]
+            }
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "flex flex-col overflow-hidden bg-background",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "frame"
+                            },
+                            "window"
+                          ]
+                        },
+                        "min-h-160 rounded border border-border",
+                        "min-h-screen"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "window"
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "topbar"
+                      },
+                      "full"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "ShellTopbar",
+                      "props": {
+                        "nav": {
+                          "$": "nav"
+                        },
+                        "links": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "sidebar"
+                                },
+                                "none"
+                              ]
+                            },
+                            "show",
+                            "hide"
+                          ]
+                        },
+                        "search": {
+                          "$": "search"
+                        },
+                        "landmarkLabel": {
+                          "$": "landmarkLabel"
+                        }
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "flex min-h-0 flex-1",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "side"
+                                },
+                                "end"
+                              ]
+                            },
+                            "flex-row-reverse",
+                            ""
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "ne",
+                        "args": [
+                          {
+                            "$": "sidebar"
+                          },
+                          "none"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "ShellSidebar",
+                          "props": {
+                            "nav": {
+                              "$": "nav"
+                            },
+                            "mode": {
+                              "$": "sidebar"
+                            },
+                            "side": {
+                              "$": "side"
+                            },
+                            "brand": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "topbar"
+                                    },
+                                    "full"
+                                  ]
+                                },
+                                "hide",
+                                "show"
+                              ]
+                            },
+                            "landmarkLabel": {
+                              "$": "landmarkLabel"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "flex min-w-0 flex-1 flex-col"
+                      },
+                      "children": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "topbar"
+                              },
+                              "inset"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "ShellTopbar",
+                              "props": {
+                                "nav": {
+                                  "$": "nav"
+                                },
+                                "brand": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "sidebar"
+                                        },
+                                        "none"
+                                      ]
+                                    },
+                                    "show",
+                                    "hide"
+                                  ]
+                                },
+                                "links": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "sidebar"
+                                        },
+                                        "none"
+                                      ]
+                                    },
+                                    "show",
+                                    "hide"
+                                  ]
+                                },
+                                "search": {
+                                  "$": "search"
+                                },
+                                "landmarkLabel": {
+                                  "$": "landmarkLabel"
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "organism": "ShellContent",
+                          "props": {
+                            "title": {
+                              "$": "title"
+                            },
+                            "titleId": {
+                              "$": "titleId"
+                            },
+                            "level": {
+                              "$": "level"
+                            },
+                            "content": {
+                              "$": "content"
+                            }
+                          }
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "footer"
+                              },
+                              "inset"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "ShellFooter",
+                              "props": {
+                                "nav": {
+                                  "$": "nav"
+                                },
+                                "place": "inset",
+                                "landmarkLabel": {
+                                  "$": "landmarkLabel"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "footer"
+                      },
+                      "full"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "ShellFooter",
+                      "props": {
+                        "nav": {
+                          "$": "nav"
+                        },
+                        "landmarkLabel": {
+                          "$": "landmarkLabel"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/delivery-info.json b/xgen/specs/organisms/delivery-info.json
new file mode 100644
index 0000000..0e63b8d
--- /dev/null
+++ b/xgen/specs/organisms/delivery-info.json
@@ -0,0 +1,484 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.delivery-info",
+  "name": "DeliveryInfo",
+  "docs": "How delivery works: the facts as icon cards, then the zones with their time and the order that ships free. Axes: layout (full: facts over zone cards, facts: the facts only, split: the facts beside a list of zones), tone, density.",
+  "records": {
+    "DeliveryLabels": [
+      {
+        "name": "zones",
+        "type": "string"
+      },
+      {
+        "name": "freeFrom",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "facts",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "zones",
+      "type": {
+        "ts": "Zone[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "DeliveryLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"full\" | \"facts\" | \"split\""
+      },
+      "default": "full"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "grid grid-cols-1 gap-8",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "split"
+                          ]
+                        },
+                        "items-start md:grid-cols-2",
+                        ""
+                      ]
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "facts"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "split"
+                              ]
+                            },
+                            "1-2",
+                            "1-4"
+                          ]
+                        },
+                        "Class": "gap-4"
+                      },
+                      "attrs": {
+                        "data-testid": "facts"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "facts"
+                          },
+                          "as": "f",
+                          "key": {
+                            "$": "f.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "4",
+                                "Class": "rounded bg-card inset-ring inset-ring-border p-6"
+                              },
+                              "attrs": {
+                                "data-testid": "fact"
+                              },
+                              "children": [
+                                {
+                                  "use": "Box",
+                                  "props": {
+                                    "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": {
+                                          "$": "f.icon"
+                                        },
+                                        "Size": 20
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "f.title"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "f.text"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "and",
+                    "args": [
+                      {
+                        "op": "ne",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "facts"
+                        ]
+                      },
+                      {
+                        "op": "gt",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "zones"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch"
+                      },
+                      "children": [
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 3,
+                            "Size": "lg",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.zones"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "split"
+                                  ]
+                                },
+                                "flex flex-col gap-4",
+                                "grid grid-cols-1 gap-4 md:grid-cols-3"
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "zones"
+                              },
+                              "as": "z",
+                              "key": {
+                                "$": "z.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2",
+                                    "Class": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "layout"
+                                            },
+                                            "split"
+                                          ]
+                                        },
+                                        "border-b border-border pb-4",
+                                        "rounded bg-card inset-ring inset-ring-border p-6"
+                                      ]
+                                    }
+                                  },
+                                  "attrs": {
+                                    "data-testid": "zone"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Group",
+                                      "props": {
+                                        "Gap": "4",
+                                        "Align": "baseline",
+                                        "Justify": "between"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Weight": "semibold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "z.name"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Badge",
+                                          "props": {
+                                            "Variant": "secondary",
+                                            "Size": "default"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "z.time"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "z.area"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "medium"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "tpl",
+                                            "args": [
+                                              {
+                                                "$": "labels.freeFrom"
+                                              },
+                                              {
+                                                "op": "money",
+                                                "args": [
+                                                  {
+                                                    "$": "z.freeFrom"
+                                                  },
+                                                  {
+                                                    "$": "z.currency"
+                                                  }
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    },
+    {
+      "from": "ZoneTable",
+      "names": [
+        "Zone"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/drawer-lines.json b/xgen/specs/organisms/drawer-lines.json
new file mode 100644
index 0000000..ba98995
--- /dev/null
+++ b/xgen/specs/organisms/drawer-lines.json
@@ -0,0 +1,405 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.drawer-lines",
+  "name": "DrawerLines",
+  "docs": "The filled body of the CartDrawer: the lines with a quantity field, then the free-delivery bar, the subtotal and total and the button.",
+  "records": {},
+  "props": [
+    {
+      "name": "lines",
+      "type": {
+        "ts": "CartLine[]"
+      },
+      "required": true
+    },
+    {
+      "name": "rows",
+      "type": {
+        "ts": "SummaryRow[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "CartLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "drawer",
+      "type": {
+        "ts": "DrawerLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"image\" | \"none\""
+      },
+      "default": "image"
+    },
+    {
+      "name": "field",
+      "type": "string",
+      "default": "qty",
+      "docs": "prefix of the quantity field names (one name per line: <field>-<line id>)"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch",
+        "Class": "flex-1 p-4"
+      },
+      "attrs": {
+        "data-testid": "lines"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "lines"
+          },
+          "as": "line",
+          "key": {
+            "$": "line.id"
+          },
+          "do": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "4",
+                "Align": "start"
+              },
+              "attrs": {
+                "data-testid": "item"
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "media"
+                      },
+                      "image"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "MediaFrame",
+                      "props": {
+                        "alt": {
+                          "$": "line.name"
+                        },
+                        "ratio": "1/1",
+                        "className": "size-16 shrink-0"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "stretch",
+                    "Class": "flex-1"
+                  },
+                  "children": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "2",
+                        "Justify": "between",
+                        "Align": "start"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "line.name"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": "text-sm font-medium"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "op": "mul",
+                                    "args": [
+                                      {
+                                        "$": "line.price"
+                                      },
+                                      {
+                                        "$": "line.qty"
+                                      }
+                                    ]
+                                  },
+                                  {
+                                    "$": "line.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "line.variant"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "NumberField",
+                      "props": {
+                        "value": {
+                          "op": "str",
+                          "args": [
+                            {
+                              "$": "line.qty"
+                            }
+                          ]
+                        },
+                        "name": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-{1}",
+                            {
+                              "$": "field"
+                            },
+                            {
+                              "$": "line.id"
+                            }
+                          ]
+                        },
+                        "min": "1",
+                        "label": {
+                          "$": "labels.qty"
+                        },
+                        "decrease": {
+                          "$": "labels.decrease"
+                        },
+                        "increase": {
+                          "$": "labels.increase"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch",
+        "Class": "border-t border-border p-4"
+      },
+      "children": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2",
+            "Align": "stretch",
+            "Class": "rounded bg-muted p-4"
+          },
+          "attrs": {
+            "data-testid": "progress"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "drawer.progress"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Progress",
+              "props": {
+                "Value": "96",
+                "Max": "100"
+              },
+              "attrs": {
+                "aria-label": {
+                  "$": "drawer.progress"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "use": "List",
+          "props": {
+            "Tag": "ul",
+            "Class": "flex flex-col gap-2"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "rows"
+              },
+              "as": "row",
+              "key": {
+                "$": "row.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "cond",
+                    "args": [
+                      {
+                        "$": "row.strong"
+                      },
+                      true,
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "i"
+                          },
+                          0
+                        ]
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "ListItem",
+                      "props": {
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "row.strong"
+                            },
+                            "flex justify-between text-base font-bold",
+                            "flex justify-between text-sm text-muted-foreground"
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "use": "Inline",
+                          "children": [
+                            {
+                              "text": {
+                                "$": "row.label"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Inline",
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "$": "row.amount"
+                                  },
+                                  {
+                                    "$": "row.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        },
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "default",
+            "Size": "lg",
+            "Class": "w-full"
+          },
+          "attrs": {
+            "data-testid": "checkout"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.checkout"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "CartList",
+      "names": [
+        "CartLine",
+        "CartLabels"
+      ]
+    },
+    {
+      "from": "OrderSummary",
+      "names": [
+        "SummaryRow"
+      ]
+    },
+    {
+      "from": "CartDrawer",
+      "names": [
+        "DrawerLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/empty-panel.json b/xgen/specs/organisms/empty-panel.json
new file mode 100644
index 0000000..7315f5e
--- /dev/null
+++ b/xgen/specs/organisms/empty-panel.json
@@ -0,0 +1,328 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.empty-panel",
+  "name": "EmptyPanel",
+  "docs": "An empty list or an empty search: a round icon, a title, a hint and an optional action, in a card or plain. Axes: layout (card, plain), actions (button, none), size (default, compact).",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "icon",
+      "type": "string",
+      "default": "inbox",
+      "docs": "Lucide name"
+    },
+    {
+      "name": "cta",
+      "type": "string",
+      "docs": "text of the action"
+    },
+    {
+      "name": "ctaHref",
+      "type": "string"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "\"button\" | \"none\""
+      },
+      "default": "button"
+    },
+    {
+      "name": "visual",
+      "type": {
+        "ts": "\"icon\" | \"image\""
+      },
+      "default": "icon",
+      "docs": "image: a picture instead of the round icon"
+    },
+    {
+      "name": "size",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section"
+      },
+      "attrs": {
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "$": "title"
+            }
+          ]
+        },
+        "data-testid": "empty"
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "size"
+                        },
+                        "compact"
+                      ]
+                    },
+                    "py-4",
+                    "py-8"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "visual"
+                  },
+                  "image"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Class": "mx-auto max-w-md text-center"
+                  },
+                  "attrs": {
+                    "data-testid": "empty-visual"
+                  },
+                  "children": [
+                    {
+                      "organism": "MediaFrame",
+                      "props": {
+                        "alt": {
+                          "$": "title"
+                        },
+                        "ratio": "4/3",
+                        "className": "w-full max-w-xs"
+                      }
+                    },
+                    {
+                      "use": "Title",
+                      "props": {
+                        "As": 2,
+                        "Size": "2xl",
+                        "Weight": "bold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "title"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "text"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "actions"
+                          },
+                          "button"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "default",
+                            "Size": "sm",
+                            "Href": {
+                              "$": "ctaHref"
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "empty-action"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "cta"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": {
+                      "$": "icon"
+                    },
+                    "title": {
+                      "$": "title"
+                    },
+                    "text": {
+                      "$": "text"
+                    },
+                    "className": {
+                      "op": "cn",
+                      "args": [
+                        "mx-auto max-w-xl",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "plain"
+                              ]
+                            },
+                            "bg-transparent inset-ring-0",
+                            ""
+                          ]
+                        },
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "size"
+                                },
+                                "compact"
+                              ]
+                            },
+                            "py-6",
+                            ""
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "slots": {
+                    "action": {
+                      "args": [],
+                      "do": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "actions"
+                              },
+                              "button"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "default",
+                                "Size": "sm",
+                                "Href": {
+                                  "$": "ctaHref"
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "empty-action"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "cta"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/error-page.json b/xgen/specs/organisms/error-page.json
new file mode 100644
index 0000000..0a6e9db
--- /dev/null
+++ b/xgen/specs/organisms/error-page.json
@@ -0,0 +1,305 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.error-page",
+  "name": "ErrorPage",
+  "docs": "A page that tells the visitor something went wrong: an icon or a big code, a heading, a sentence and the way back. Axes: layout (centered, split: the picture beside the text), code (show, hide), actions mode (one, two), tone.",
+  "records": {
+    "LinkActions": [
+      {
+        "name": "mode",
+        "type": "\"one\" | \"two\"",
+        "optional": true,
+        "docs": "one or two links",
+        "default": "one"
+      },
+      {
+        "name": "cta",
+        "type": "string",
+        "optional": false,
+        "docs": "primary action label"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true,
+        "docs": "the address of the primary action; none: a button, not a link"
+      },
+      {
+        "name": "secondary",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "secondaryHref",
+        "type": "string",
+        "optional": true
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "status",
+      "type": "string",
+      "required": true,
+      "docs": "the status code, e.g. 404"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "record": "LinkActions"
+      },
+      "required": true,
+      "docs": "the way back: one link, or two (mode two)"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"centered\" | \"split\""
+      },
+      "default": "centered"
+    },
+    {
+      "name": "code",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "text"
+        },
+        "heading": {
+          "level": {
+            "$": "level"
+          }
+        },
+        "layout": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "split"
+              ]
+            },
+            "split",
+            "stack"
+          ]
+        },
+        "media": {
+          "show": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "split"
+            ]
+          }
+        },
+        "align": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "split"
+              ]
+            },
+            "start",
+            "center"
+          ]
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": "roomy",
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "code"
+                  },
+                  "show"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "4xl",
+                    "Weight": "bold",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "text-8xl text-muted-foreground",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "split"
+                              ]
+                            },
+                            "",
+                            "text-center"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "error-code"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "status"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "organism": "ActionGroup",
+              "props": {
+                "primary": {
+                  "$": "actions.cta"
+                },
+                "primaryHref": {
+                  "$": "actions.href"
+                },
+                "secondary": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "actions.mode"
+                        },
+                        "two"
+                      ]
+                    },
+                    {
+                      "$": "actions.secondary"
+                    },
+                    {
+                      "op": "undef",
+                      "args": []
+                    }
+                  ]
+                },
+                "secondaryHref": {
+                  "$": "actions.secondaryHref"
+                },
+                "align": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "split"
+                      ]
+                    },
+                    "start",
+                    "center"
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "title"
+                },
+                "ratio": "4/3"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/faq-cards.json b/xgen/specs/organisms/faq-cards.json
new file mode 100644
index 0000000..56f5a50
--- /dev/null
+++ b/xgen/specs/organisms/faq-cards.json
@@ -0,0 +1,211 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.faq-cards",
+  "name": "FaqCards",
+  "docs": "The questions of FaqSplit as cards: the topic, the question, the answer and a read-more link; with an icon square on top in the icons shape. Shapes: grid3, grid4, icons (three columns).",
+  "records": {},
+  "props": [
+    {
+      "name": "items",
+      "type": {
+        "ts": "Question[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "FaqSplitLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "cards",
+      "type": {
+        "ts": "\"grid3\" | \"grid4\" | \"icons\""
+      },
+      "default": "grid3"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "cards"
+                },
+                "grid4"
+              ]
+            },
+            "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+            "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "faq"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "items"
+          },
+          "as": "q",
+          "key": {
+            "$": "q.id"
+          },
+          "do": [
+            {
+              "organism": "ArticleBlock",
+              "props": {
+                "className": "rounded bg-card inset-ring inset-ring-border flex flex-col gap-4 p-6",
+                "testid": "faq-card"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "cards"
+                          },
+                          "icons"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": {
+                                  "$": "q.icon"
+                                },
+                                "Size": 20
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2"
+                      },
+                      "children": [
+                        {
+                          "use": "Badge",
+                          "props": {
+                            "Variant": "secondary",
+                            "Size": "sm",
+                            "Class": "w-fit"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "q.category"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 3,
+                            "Size": "base",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "q.question"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "q.answer"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "mt-auto"
+                      },
+                      "children": [
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "link",
+                            "Size": "sm",
+                            "Class": "gap-2 px-0 font-medium"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.more"
+                              }
+                            },
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": "arrow-right",
+                                "Size": 16
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FaqSplit",
+      "names": [
+        "Question",
+        "FaqSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/faq-disclosures.json b/xgen/specs/organisms/faq-disclosures.json
new file mode 100644
index 0000000..d904607
--- /dev/null
+++ b/xgen/specs/organisms/faq-disclosures.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.faq-disclosures",
+  "name": "FaqDisclosures",
+  "docs": "The questions of FaqSplit as native disclosures, one open at a time.",
+  "records": {},
+  "props": [
+    {
+      "name": "items",
+      "type": {
+        "ts": "Question[]"
+      },
+      "required": true
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": true,
+      "docs": "the group name of the disclosures (one open at a time)"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "0",
+        "Align": "stretch"
+      },
+      "attrs": {
+        "data-testid": "faq"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "items"
+          },
+          "as": "q",
+          "key": {
+            "$": "q.id"
+          },
+          "do": [
+            {
+              "use": "Disclosure",
+              "props": {
+                "Variant": "item",
+                "Name": {
+                  "$": "name"
+                }
+              },
+              "attrs": {
+                "data-testid": "faq-item"
+              },
+              "children": [
+                {
+                  "use": "Summary",
+                  "props": {
+                    "Variant": "item"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "q.question"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Class": "pb-4 text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "q.answer"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FaqSplit",
+      "names": [
+        "Question",
+        "FaqSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/faq-finder.json b/xgen/specs/organisms/faq-finder.json
new file mode 100644
index 0000000..ccfbb0e
--- /dev/null
+++ b/xgen/specs/organisms/faq-finder.json
@@ -0,0 +1,211 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.faq-finder",
+  "name": "FaqFinder",
+  "docs": "The finder of FaqSplit: a search field, the topics as a row of buttons, and the first three questions as popular links.",
+  "records": {},
+  "props": [
+    {
+      "name": "items",
+      "type": {
+        "ts": "Question[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "FaqSplitLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "topics",
+      "type": {
+        "ts": "FaqTab[]"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "6",
+        "Align": "stretch"
+      },
+      "attrs": {
+        "data-testid": "faq-finder"
+      },
+      "children": [
+        {
+          "organism": "SearchField",
+          "props": {
+            "label": {
+              "$": "labels.search"
+            },
+            "placeholder": {
+              "$": "labels.search"
+            },
+            "value": {
+              "op": "coalesce",
+              "args": [
+                {
+                  "$": "labels.query"
+                },
+                ""
+              ]
+            }
+          }
+        },
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Class": "flex-wrap"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "topics"
+              },
+              "as": "t",
+              "key": {
+                "$": "t.id"
+              },
+              "do": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "sm"
+                  },
+                  "attrs": {
+                    "data-testid": "faq-topic",
+                    "data-value": {
+                      "$": "t.value"
+                    }
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "t.title"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.popular"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "List",
+              "props": {
+                "Class": "m-0 flex list-none flex-col gap-2 p-0"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "items"
+                  },
+                  "as": "q",
+                  "key": {
+                    "$": "q.id"
+                  },
+                  "do": [
+                    {
+                      "when": {
+                        "op": "lt",
+                        "args": [
+                          {
+                            "$": "i"
+                          },
+                          3
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "ListItem",
+                          "attrs": {
+                            "data-testid": "faq-popular"
+                          },
+                          "children": [
+                            {
+                              "organism": "MenuEntry",
+                              "props": {
+                                "href": {
+                                  "$": "q.href"
+                                },
+                                "className": "text-sm font-medium",
+                                "size": "sm"
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "text": {
+                                        "$": "q.question"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "index": "i"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FaqSplit",
+      "names": [
+        "Question",
+        "FaqSplitLabels"
+      ]
+    },
+    {
+      "from": "FaqList",
+      "names": [
+        "FaqTab"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/faq-help.json b/xgen/specs/organisms/faq-help.json
new file mode 100644
index 0000000..60fd51d
--- /dev/null
+++ b/xgen/specs/organisms/faq-help.json
@@ -0,0 +1,217 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.faq-help",
+  "name": "FaqHelp",
+  "docs": "The help card beside the questions of FaqSplit: a title, a line of text, the ways to reach the team (icon, name, one line) and a link.",
+  "records": {},
+  "props": [
+    {
+      "name": "labels",
+      "type": {
+        "ts": "FaqSplitLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "channels",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "aside",
+        "Class": "rounded bg-card inset-ring inset-ring-border flex flex-col gap-6 p-6"
+      },
+      "attrs": {
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "$": "labels.asideTitle"
+            }
+          ]
+        },
+        "data-testid": "faq-help"
+      },
+      "children": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "lg",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.asideTitle"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.asideText"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "List",
+          "props": {
+            "Class": "m-0 flex list-none flex-col gap-4 p-0"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "channels"
+              },
+              "as": "c",
+              "key": {
+                "$": "c.id"
+              },
+              "do": [
+                {
+                  "use": "ListItem",
+                  "props": {
+                    "Class": "flex items-start gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "faq-channel"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "c.icon"
+                            },
+                            "Size": 20
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "c.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "c.text"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "link",
+            "Size": "sm",
+            "Class": "gap-2 px-0 font-medium"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.asideCta"
+              }
+            },
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "arrow-right",
+                "Size": 16
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "frame": true,
+  "typeImports": [
+    {
+      "from": "FaqSplit",
+      "names": [
+        "Question",
+        "FaqSplitLabels"
+      ]
+    },
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/faq-list.json b/xgen/specs/organisms/faq-list.json
new file mode 100644
index 0000000..64b59f7
--- /dev/null
+++ b/xgen/specs/organisms/faq-list.json
@@ -0,0 +1,621 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.faq-list",
+  "name": "FaqList",
+  "docs": "A section with a heading and the questions. Axes: layout (accordion: native disclosures that open without script; chat: question and answer as alternating bubbles), columns (1, 2), search mode (none, field: a search field above; the page filters by `search.query`), filter mode (none, categories: tabs above; the page filters by `filter.category`), density, tone.",
+  "records": {
+    "Faq": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "question",
+        "type": "string"
+      },
+      {
+        "name": "answer",
+        "type": "string"
+      },
+      {
+        "name": "category",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "FaqTab": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "string"
+      }
+    ],
+    "FaqSearch": [
+      {
+        "name": "mode",
+        "type": "\"none\" | \"field\"",
+        "optional": true,
+        "docs": "field: a search field above the questions",
+        "default": "none"
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": true,
+        "docs": "accessible name and placeholder of the search field"
+      },
+      {
+        "name": "query",
+        "type": "string",
+        "optional": true,
+        "docs": "the text the questions are filtered by"
+      }
+    ],
+    "FaqFilter": [
+      {
+        "name": "mode",
+        "type": "\"none\" | \"categories\"",
+        "optional": true,
+        "docs": "categories: tabs above the questions",
+        "default": "none"
+      },
+      {
+        "name": "tabs",
+        "type": "FaqTab[]",
+        "optional": true,
+        "docs": "the category tabs"
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": true,
+        "docs": "accessible name of the tabs"
+      },
+      {
+        "name": "category",
+        "type": "string",
+        "optional": true,
+        "docs": "the value of the chosen tab"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "items",
+      "type": {
+        "ts": "Faq[]"
+      },
+      "required": true
+    },
+    {
+      "name": "search",
+      "type": {
+        "record": "FaqSearch"
+      },
+      "docs": "the search field and its text"
+    },
+    {
+      "name": "filter",
+      "type": {
+        "record": "FaqFilter"
+      },
+      "docs": "the category tabs and the chosen one"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"accordion\" | \"chat\""
+      },
+      "default": "accordion"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1\" | \"2\""
+      },
+      "default": "1"
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no question, or none matches the search or tab), from the dictionary"
+    },
+    {
+      "name": "multiple",
+      "type": "boolean",
+      "default": false,
+      "docs": "true: several can be open at once; false: opening one closes the others (native details name)"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "inCategory",
+      "value": {
+        "op": "where",
+        "args": [
+          {
+            "$": "items"
+          },
+          "category",
+          {
+            "$": "filter.category"
+          }
+        ]
+      }
+    },
+    {
+      "name": "shown",
+      "value": {
+        "op": "match",
+        "args": [
+          {
+            "$": "inCategory"
+          },
+          "question",
+          {
+            "$": "search.query"
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "query",
+      "args": [
+        {
+          "name": "text",
+          "type": "string"
+        }
+      ],
+      "docs": "the search text changed"
+    },
+    {
+      "name": "category",
+      "args": [
+        {
+          "name": "value",
+          "type": "string"
+        }
+      ],
+      "docs": "a category tab was chosen"
+    }
+  ],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "chat"
+              ]
+            },
+            "2xl",
+            "default"
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "search.mode"
+                  },
+                  "field"
+                ]
+              },
+              "then": [
+                {
+                  "organism": "SearchField",
+                  "props": {
+                    "label": {
+                      "op": "coalesce",
+                      "args": [
+                        {
+                          "$": "search.label"
+                        },
+                        ""
+                      ]
+                    },
+                    "placeholder": {
+                      "$": "search.label"
+                    },
+                    "value": {
+                      "op": "coalesce",
+                      "args": [
+                        {
+                          "$": "search.query"
+                        },
+                        ""
+                      ]
+                    }
+                  },
+                  "on": {
+                    "value": {
+                      "call": "emit.query",
+                      "args": [
+                        {
+                          "$": "arg"
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "filter.mode"
+                  },
+                  "categories"
+                ]
+              },
+              "then": [
+                {
+                  "organism": "Switcher",
+                  "props": {
+                    "label": {
+                      "$": "filter.label"
+                    }
+                  },
+                  "slots": {
+                    "children": {
+                      "args": [],
+                      "do": [
+                        {
+                          "each": {
+                            "$": "filter.tabs"
+                          },
+                          "as": "tab",
+                          "key": {
+                            "$": "tab.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "SwitcherItem",
+                              "props": {
+                                "active": {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "tab.value"
+                                    },
+                                    {
+                                      "$": "filter.category"
+                                    }
+                                  ]
+                                }
+                              },
+                              "on": {
+                                "click": {
+                                  "call": "emit.category",
+                                  "args": [
+                                    {
+                                      "$": "tab.value"
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "text": {
+                                        "$": "tab.title"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "shown"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "circle-question-mark",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "chat"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "stretch"
+                  },
+                  "attrs": {
+                    "data-testid": "faq"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "shown"
+                      },
+                      "as": "item",
+                      "key": {
+                        "$": "item.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "2",
+                            "Align": "stretch"
+                          },
+                          "attrs": {
+                            "data-testid": "faq-item"
+                          },
+                          "children": [
+                            {
+                              "use": "Box",
+                              "props": {
+                                "Class": "ml-auto max-w-xs sm:max-w-md rounded bg-primary px-4 py-4 text-primary-foreground"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "item.question"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Box",
+                              "props": {
+                                "Class": "mr-auto max-w-xs sm:max-w-md rounded bg-muted px-4 py-4"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "item.answer"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "cols"
+                            },
+                            "2"
+                          ]
+                        },
+                        "1-2",
+                        "1"
+                      ]
+                    },
+                    "Class": "items-start gap-x-8"
+                  },
+                  "attrs": {
+                    "data-testid": "faq"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "shown"
+                      },
+                      "as": "item",
+                      "key": {
+                        "$": "item.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Disclosure",
+                          "props": {
+                            "Variant": "item",
+                            "Name": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "$": "multiple"
+                                },
+                                {
+                                  "op": "undef",
+                                  "args": []
+                                },
+                                {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-faq",
+                                    {
+                                      "op": "coalesce",
+                                      "args": [
+                                        {
+                                          "$": "id"
+                                        },
+                                        "faq"
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "faq-item"
+                          },
+                          "children": [
+                            {
+                              "use": "Summary",
+                              "props": {
+                                "Variant": "item"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "item.question"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "pb-4 text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "item.answer"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/faq-split.json b/xgen/specs/organisms/faq-split.json
new file mode 100644
index 0000000..c95c67b
--- /dev/null
+++ b/xgen/specs/organisms/faq-split.json
@@ -0,0 +1,624 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.faq-split",
+  "name": "FaqSplit",
+  "docs": "Questions in a split or as cards. Axes: layout (head: the heading and an action beside the disclosures, aside: the disclosures beside a help card, media: the disclosures and an action beside a picture, search: a finder beside a picture, cards: the questions as cards), cards (grid3, grid4, icons), mediaSide, tone.",
+  "records": {
+    "Question": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "question",
+        "type": "string"
+      },
+      {
+        "name": "answer",
+        "type": "string"
+      },
+      {
+        "name": "category",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "FaqSplitLabels": [
+      {
+        "name": "cta",
+        "type": "string"
+      },
+      {
+        "name": "more",
+        "type": "string"
+      },
+      {
+        "name": "asideTitle",
+        "type": "string"
+      },
+      {
+        "name": "asideText",
+        "type": "string"
+      },
+      {
+        "name": "asideCta",
+        "type": "string"
+      },
+      {
+        "name": "search",
+        "type": "string"
+      },
+      {
+        "name": "popular",
+        "type": "string"
+      },
+      {
+        "name": "query",
+        "type": "string",
+        "optional": true
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "items",
+      "type": {
+        "ts": "Question[]"
+      },
+      "required": true
+    },
+    {
+      "name": "channels",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true,
+      "docs": "the ways to reach the team (aside layout)"
+    },
+    {
+      "name": "topics",
+      "type": {
+        "ts": "FaqTab[]"
+      },
+      "required": true,
+      "docs": "the topic buttons of the finder (search layout)"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "FaqSplitLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"head\" | \"aside\" | \"media\" | \"search\" | \"cards\""
+      },
+      "default": "head"
+    },
+    {
+      "name": "cards",
+      "type": {
+        "ts": "\"grid3\" | \"grid4\" | \"icons\""
+      },
+      "default": "grid3"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "items"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "cards"
+            ]
+          },
+          "then": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "organism": "FaqCards",
+                      "props": {
+                        "items": {
+                          "$": "items"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        },
+                        "cards": {
+                          "$": "cards"
+                        }
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "head"
+            ]
+          },
+          "then": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "layout": "split",
+                "media": {
+                  "show": true,
+                  "side": "end",
+                  "align": "start"
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Box",
+                      "children": [
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "default",
+                            "Size": "default"
+                          },
+                          "attrs": {
+                            "data-testid": "faq-cta"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.cta"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                "aside": {
+                  "args": [],
+                  "do": [
+                    {
+                      "organism": "FaqDisclosures",
+                      "props": {
+                        "items": {
+                          "$": "items"
+                        },
+                        "name": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-faq",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "aside"
+            ]
+          },
+          "then": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "layout": "split",
+                "media": {
+                  "show": true,
+                  "side": "end",
+                  "align": "start"
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "organism": "FaqDisclosures",
+                      "props": {
+                        "items": {
+                          "$": "items"
+                        },
+                        "name": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-faq",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                },
+                "aside": {
+                  "args": [],
+                  "do": [
+                    {
+                      "organism": "FaqHelp",
+                      "props": {
+                        "labels": {
+                          "$": "labels"
+                        },
+                        "channels": {
+                          "$": "channels"
+                        },
+                        "landmarkLabel": {
+                          "$": "landmarkLabel"
+                        }
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "media"
+            ]
+          },
+          "then": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "layout": "split",
+                "media": {
+                  "show": true,
+                  "side": {
+                    "$": "mediaSide"
+                  },
+                  "align": "start"
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "organism": "FaqDisclosures",
+                      "props": {
+                        "items": {
+                          "$": "items"
+                        },
+                        "name": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-faq",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "children": [
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "default",
+                            "Size": "default"
+                          },
+                          "attrs": {
+                            "data-testid": "faq-cta"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.cta"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                "aside": {
+                  "args": [],
+                  "do": [
+                    {
+                      "organism": "MediaFrame",
+                      "props": {
+                        "alt": {
+                          "$": "title"
+                        },
+                        "ratio": "4/3"
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "search"
+            ]
+          },
+          "then": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "layout": "split",
+                "media": {
+                  "show": true,
+                  "side": {
+                    "$": "mediaSide"
+                  }
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "organism": "FaqFinder",
+                      "props": {
+                        "items": {
+                          "$": "items"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        },
+                        "topics": {
+                          "$": "topics"
+                        }
+                      }
+                    }
+                  ]
+                },
+                "aside": {
+                  "args": [],
+                  "do": [
+                    {
+                      "organism": "MediaFrame",
+                      "props": {
+                        "alt": {
+                          "$": "title"
+                        },
+                        "ratio": "4/3"
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    },
+    {
+      "from": "FaqList",
+      "names": [
+        "FaqTab"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-accordion.json b/xgen/specs/organisms/feature-accordion.json
new file mode 100644
index 0000000..2541c68
--- /dev/null
+++ b/xgen/specs/organisms/feature-accordion.json
@@ -0,0 +1,322 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.feature-accordion",
+  "name": "FeatureAccordion",
+  "docs": "Features as a list of disclosures: icon and title in the summary, the text when open. Axes: expand (first: the first one is open, none: all closed), media (none, image: a picture beside the list), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "expand",
+      "type": {
+        "ts": "\"first\" | \"none\""
+      },
+      "default": "first"
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"none\" | \"image\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "multiple",
+      "type": "boolean",
+      "default": false,
+      "docs": "true: several can be open at once; false: opening one closes the others (native details name)"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "layout": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "media"
+                },
+                "image"
+              ]
+            },
+            "split",
+            "stack"
+          ]
+        },
+        "media": {
+          "show": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "media"
+              },
+              "image"
+            ]
+          }
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "features"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "layout-grid",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "0",
+                    "Align": "stretch"
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "features"
+                      },
+                      "as": "f",
+                      "key": {
+                        "$": "f.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Disclosure",
+                          "props": {
+                            "Variant": "item",
+                            "Name": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "$": "multiple"
+                                },
+                                {
+                                  "op": "undef",
+                                  "args": []
+                                },
+                                {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-accordion",
+                                    {
+                                      "op": "coalesce",
+                                      "args": [
+                                        {
+                                          "$": "id"
+                                        },
+                                        "accordion"
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            "Open": {
+                              "op": "and",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "expand"
+                                    },
+                                    "first"
+                                  ]
+                                },
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "i"
+                                    },
+                                    0
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "item"
+                          },
+                          "children": [
+                            {
+                              "use": "Summary",
+                              "props": {
+                                "Variant": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Inline",
+                                  "props": {
+                                    "Class": "flex min-w-0 items-center justify-start gap-4"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": {
+                                          "$": "f.icon"
+                                        },
+                                        "Size": 20
+                                      }
+                                    },
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "text-base font-semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "f.title"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "pb-4 text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "f.text"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ],
+                      "index": "i"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "title"
+                },
+                "ratio": "4/3"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-cards.json b/xgen/specs/organisms/feature-cards.json
new file mode 100644
index 0000000..70c2571
--- /dev/null
+++ b/xgen/specs/organisms/feature-cards.json
@@ -0,0 +1,322 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.feature-cards",
+  "name": "FeatureCards",
+  "docs": "The features as a grid of cards, tiles or bordered cells (the body of FeatureGrid). Icons are Lucide names.",
+  "records": {},
+  "props": [
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-2\" | \"1-3\" | \"1-4\""
+      },
+      "default": "1-3",
+      "docs": "columns of the grid (responsive)"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"card\" | \"tile\" | \"cell\""
+      },
+      "default": "card",
+      "docs": "card: icon, title and text stacked; tile: compact icon beside title and text; cell: bordered cell with a round icon"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Grid",
+      "props": {
+        "Cols": {
+          "$": "cols"
+        },
+        "Class": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "item"
+                },
+                "cell"
+              ]
+            },
+            {
+              "op": "cn",
+              "args": [
+                "w-full gap-px overflow-hidden bg-border p-px",
+                {
+                  "op": "preset",
+                  "args": [
+                    "defaults",
+                    "features.cells"
+                  ]
+                }
+              ]
+            },
+            "gap-6"
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "feature-grid"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "features"
+          },
+          "as": "feature",
+          "key": {
+            "$": "feature.id"
+          },
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "item"
+                  },
+                  "tile"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Card",
+                  "props": {
+                    "Variant": "compact"
+                  },
+                  "attrs": {
+                    "data-testid": "feature-card"
+                  },
+                  "children": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "start"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "feature.icon"
+                            },
+                            "Size": 20
+                          }
+                        },
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "2"
+                          },
+                          "children": [
+                            {
+                              "use": "Title",
+                              "props": {
+                                "As": 3,
+                                "Size": "base",
+                                "Weight": "bold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "feature.title"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "feature.text"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "item"
+                      },
+                      "cell"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2",
+                        "Align": "center",
+                        "Class": "h-full gap-8 bg-background px-6 py-12 text-center"
+                      },
+                      "attrs": {
+                        "data-testid": "feature-card"
+                      },
+                      "children": [
+                        {
+                          "use": "IconBadge",
+                          "props": {
+                            "Variant": "primary",
+                            "Size": "xl"
+                          },
+                          "attrs": {
+                            "data-testid": "feature-icon"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": {
+                                  "$": "feature.icon"
+                                },
+                                "Size": 24
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 3,
+                            "Size": "xl",
+                            "Weight": "semibold",
+                            "Class": "leading-6"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "feature.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold",
+                            "Class": "leading-5 text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "feature.text"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Card",
+                      "props": {
+                        "Variant": "default"
+                      },
+                      "attrs": {
+                        "data-testid": "feature-card"
+                      },
+                      "children": [
+                        {
+                          "use": "CardHeader",
+                          "props": {
+                            "Class": "flex flex-col gap-4"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": {
+                                  "$": "feature.icon"
+                                },
+                                "Size": 24
+                              }
+                            },
+                            {
+                              "use": "CardTitle",
+                              "props": {
+                                "As": 3
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "feature.title"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "CardContent",
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "feature.text"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-grid.json b/xgen/specs/organisms/feature-grid.json
new file mode 100644
index 0000000..237b508
--- /dev/null
+++ b/xgen/specs/organisms/feature-grid.json
@@ -0,0 +1,398 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.feature-grid",
+  "name": "FeatureGrid",
+  "docs": "A section with a heading and the features as a grid of cards or tiles, or as rows with a picture. Icons are Lucide names. Axes: layout (grid, rows), columns, item (card, tile, cell: bordered tile with a round icon), media side (rows), density, tone.",
+  "records": {
+    "Feature": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "action",
+      "type": {
+        "ts": "HeadLink"
+      },
+      "docs": "optional link opposite the heading"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"rows\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-2\" | \"1-3\" | \"1-4\""
+      },
+      "default": "1-3",
+      "docs": "columns of the grid layout (responsive)"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"card\" | \"tile\" | \"cell\""
+      },
+      "default": "card",
+      "docs": "card: icon, title and text stacked; tile: compact icon beside title and text; cell: bordered cell with a round icon"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\" | \"alternate\""
+      },
+      "default": "end",
+      "docs": "rows layout: side of the picture; alternate swaps it every row"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "item"
+          },
+          "cell"
+        ]
+      },
+      "then": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "density": {
+              "$": "density"
+            },
+            "measure": "fill",
+            "className": "py-0",
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Justify": "between",
+                    "Class": "w-full"
+                  },
+                  "children": [
+                    {
+                      "use": "Title",
+                      "props": {
+                        "As": 2,
+                        "Size": "sm",
+                        "Weight": "semibold",
+                        "Class": "leading-7"
+                      },
+                      "attrs": {
+                        "id": {
+                          "op": "add",
+                          "args": [
+                            {
+                              "$": "id"
+                            },
+                            "-title"
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "title"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "and",
+                        "args": [
+                          {
+                            "$": "action.label"
+                          },
+                          {
+                            "$": "action.href"
+                          }
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Link",
+                          "props": {
+                            "Href": {
+                              "$": "action.href"
+                            },
+                            "Variant": "default",
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                {
+                                  "op": "preset",
+                                  "args": [
+                                    "defaults",
+                                    "text.tiny"
+                                  ]
+                                },
+                                "shrink-0 font-medium leading-5"
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "section-action"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "action.label"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "features"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "EmptyState",
+                      "props": {
+                        "icon": "layout-grid",
+                        "title": {
+                          "$": "empty"
+                        }
+                      }
+                    }
+                  ],
+                  "else": [
+                    {
+                      "organism": "FeatureCards",
+                      "props": {
+                        "features": {
+                          "$": "features"
+                        },
+                        "cols": {
+                          "$": "cols"
+                        },
+                        "item": {
+                          "$": "item"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "title"
+            },
+            "action": {
+              "$": "action"
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "density": {
+              "$": "density"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "features"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "EmptyState",
+                      "props": {
+                        "icon": "layout-grid",
+                        "title": {
+                          "$": "empty"
+                        }
+                      }
+                    }
+                  ],
+                  "else": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "rows"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "FeatureRows",
+                          "props": {
+                            "features": {
+                              "$": "features"
+                            },
+                            "mediaSide": {
+                              "$": "mediaSide"
+                            }
+                          }
+                        }
+                      ],
+                      "else": [
+                        {
+                          "organism": "FeatureCards",
+                          "props": {
+                            "features": {
+                              "$": "features"
+                            },
+                            "cols": {
+                              "$": "cols"
+                            },
+                            "item": {
+                              "$": "item"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "SectionFrame",
+      "names": [
+        "HeadLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-metric-cards.json b/xgen/specs/organisms/feature-metric-cards.json
new file mode 100644
index 0000000..feacd93
--- /dev/null
+++ b/xgen/specs/organisms/feature-metric-cards.json
@@ -0,0 +1,147 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.feature-metric-cards",
+  "name": "FeatureMetricCards",
+  "docs": "Four figures of FeatureSplit as small cards in two columns: a glyph tile, the value with its hint and the label.",
+  "records": {},
+  "props": [
+    {
+      "name": "stats",
+      "type": {
+        "ts": "Stat[]"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "grid grid-cols-1 gap-4 sm:grid-cols-2"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "stats"
+          },
+          "as": "s",
+          "key": {
+            "$": "s.id"
+          },
+          "do": [
+            {
+              "when": {
+                "op": "lt",
+                "args": [
+                  {
+                    "$": "i"
+                  },
+                  4
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                  },
+                  "attrs": {
+                    "data-testid": "feature-stat"
+                  },
+                  "children": [
+                    {
+                      "use": "Inline",
+                      "props": {
+                        "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "s.icon"
+                            },
+                            "Size": 20
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0",
+                        "Class": "min-w-0"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "lg",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.value"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.label"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.hint"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-pairs.json b/xgen/specs/organisms/feature-pairs.json
new file mode 100644
index 0000000..509e413
--- /dev/null
+++ b/xgen/specs/organisms/feature-pairs.json
@@ -0,0 +1,133 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.feature-pairs",
+  "name": "FeaturePairs",
+  "docs": "Four features of FeatureSplit in two columns: a glyph tile beside the title and text, without cards.",
+  "records": {},
+  "props": [
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "grid grid-cols-1 gap-6 sm:grid-cols-2"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "features"
+          },
+          "as": "f",
+          "key": {
+            "$": "f.id"
+          },
+          "do": [
+            {
+              "when": {
+                "op": "lt",
+                "args": [
+                  {
+                    "$": "i"
+                  },
+                  4
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "start"
+                  },
+                  "attrs": {
+                    "data-testid": "feature-item"
+                  },
+                  "children": [
+                    {
+                      "use": "Inline",
+                      "props": {
+                        "Class": "flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "f.icon"
+                            },
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2",
+                        "Class": "min-w-0"
+                      },
+                      "children": [
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 3,
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "f.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "f.text"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-rows.json b/xgen/specs/organisms/feature-rows.json
new file mode 100644
index 0000000..8ca1296
--- /dev/null
+++ b/xgen/specs/organisms/feature-rows.json
@@ -0,0 +1,176 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.feature-rows",
+  "name": "FeatureRows",
+  "docs": "The features as rows: text beside a picture (the rows layout of FeatureGrid). Icons are Lucide names.",
+  "records": {},
+  "props": [
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\" | \"alternate\""
+      },
+      "default": "end",
+      "docs": "side of the picture; alternate swaps it every row"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "8",
+        "Align": "stretch"
+      },
+      "attrs": {
+        "data-testid": "feature-rows"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "features"
+          },
+          "as": "feature",
+          "key": {
+            "$": "feature.id"
+          },
+          "do": [
+            {
+              "use": "Grid",
+              "props": {
+                "Cols": "1-2",
+                "Class": "group items-center gap-8"
+              },
+              "attrs": {
+                "data-testid": "feature-card"
+              },
+              "children": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "2",
+                    "Class": "min-w-0"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": {
+                          "$": "feature.icon"
+                        },
+                        "Size": 24
+                      }
+                    },
+                    {
+                      "use": "Title",
+                      "props": {
+                        "As": 3,
+                        "Size": "xl",
+                        "Weight": "bold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "feature.title"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "base",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "feature.text"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "w-full min-w-0",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "mediaSide"
+                                },
+                                "start"
+                              ]
+                            },
+                            "md:order-first",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "mediaSide"
+                                    },
+                                    "alternate"
+                                  ]
+                                },
+                                "md:group-even:order-first",
+                                ""
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "organism": "MediaFrame",
+                      "props": {
+                        "alt": {
+                          "$": "feature.title"
+                        },
+                        "ratio": "4/3"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-showcase.json b/xgen/specs/organisms/feature-showcase.json
new file mode 100644
index 0000000..db749c0
--- /dev/null
+++ b/xgen/specs/organisms/feature-showcase.json
@@ -0,0 +1,312 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.feature-showcase",
+  "name": "FeatureShowcase",
+  "docs": "Features as cards under a centered heading. Axes: item (picture: a picture on top, then the title, the text and a read link; panel: a muted panel with a large glyph on top, then the title and the text), cols (3, 4), tone.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "more",
+      "type": "string",
+      "required": true,
+      "docs": "the word of the read link of the picture cards"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"picture\" | \"panel\""
+      },
+      "default": "picture"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"3\" | \"4\""
+      },
+      "default": "3"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "align": "center",
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "features"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "layout-grid",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "cols"
+                            },
+                            "4"
+                          ]
+                        },
+                        "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-4",
+                        "grid grid-cols-1 gap-6 text-start sm:grid-cols-2 lg:grid-cols-3"
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "features"
+                      },
+                      "as": "f",
+                      "key": {
+                        "$": "f.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Card",
+                          "props": {
+                            "Variant": "default",
+                            "Class": "h-full gap-4 overflow-hidden"
+                          },
+                          "attrs": {
+                            "data-testid": "showcase-card"
+                          },
+                          "children": [
+                            {
+                              "when": {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "item"
+                                  },
+                                  "picture"
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "organism": "MediaFrame",
+                                  "props": {
+                                    "alt": {
+                                      "$": "f.title"
+                                    }
+                                  }
+                                }
+                              ],
+                              "else": [
+                                {
+                                  "use": "Box",
+                                  "props": {
+                                    "Class": "flex aspect-video items-center justify-center rounded bg-muted text-foreground"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "showcase-panel"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": {
+                                          "$": "f.icon"
+                                        },
+                                        "Size": 32
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "CardContent",
+                              "props": {
+                                "Class": "flex flex-1 flex-col gap-2"
+                              },
+                              "children": [
+                                {
+                                  "use": "Title",
+                                  "props": {
+                                    "As": 3,
+                                    "Size": "base",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "f.title"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "f.text"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "item"
+                                      },
+                                      "picture"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "organism": "MenuEntry",
+                                      "props": {
+                                        "href": {
+                                          "$": "f.href"
+                                        },
+                                        "className": "mt-auto gap-2 pt-2 text-sm font-medium",
+                                        "size": "sm",
+                                        "testid": "read"
+                                      },
+                                      "slots": {
+                                        "children": {
+                                          "args": [],
+                                          "do": [
+                                            {
+                                              "text": {
+                                                "$": "more"
+                                              }
+                                            },
+                                            {
+                                              "use": "LucideIcon",
+                                              "props": {
+                                                "Name": "arrow-right",
+                                                "Size": 16
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-split.json b/xgen/specs/organisms/feature-split.json
new file mode 100644
index 0000000..9e4f6c0
--- /dev/null
+++ b/xgen/specs/organisms/feature-split.json
@@ -0,0 +1,408 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.feature-split",
+  "name": "FeatureSplit",
+  "docs": "Features beside a picture. Axes: layout (grid: four plain features in two columns, cards: four features as cards and the actions, stats: two figure cards over three checked rows beside a square picture, metrics: four metric cards and the actions), mediaSide, tone.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 2
+    },
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "stats",
+      "type": {
+        "ts": "Stat[]"
+      },
+      "required": true
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "LinkActions"
+      },
+      "required": true,
+      "docs": "shown in the cards and metrics layouts"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"cards\" | \"stats\" | \"metrics\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "heading": {
+          "badge": {
+            "$": "badge"
+          },
+          "level": {
+            "$": "level"
+          }
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "layout": "split",
+        "media": {
+          "show": true,
+          "side": {
+            "$": "mediaSide"
+          }
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "grid"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "features"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "FeaturePairs",
+                      "props": {
+                        "features": {
+                          "$": "features"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "cards"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "features"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "FeatureCards",
+                      "props": {
+                        "features": {
+                          "$": "features"
+                        },
+                        "cols": "1-2",
+                        "item": "tile"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "stats"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "features"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "FeatureStatRows",
+                      "props": {
+                        "features": {
+                          "$": "features"
+                        },
+                        "stats": {
+                          "$": "stats"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "metrics"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "stats"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "FeatureMetricCards",
+                      "props": {
+                        "stats": {
+                          "$": "stats"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "or",
+                "args": [
+                  {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "cards"
+                    ]
+                  },
+                  {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "metrics"
+                    ]
+                  }
+                ]
+              },
+              "then": [
+                {
+                  "organism": "ActionGroup",
+                  "props": {
+                    "primary": {
+                      "$": "actions.cta"
+                    },
+                    "primaryHref": {
+                      "$": "actions.href"
+                    },
+                    "secondary": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "actions.mode"
+                            },
+                            "two"
+                          ]
+                        },
+                        {
+                          "$": "actions.secondary"
+                        },
+                        {
+                          "op": "undef",
+                          "args": []
+                        }
+                      ]
+                    },
+                    "secondaryHref": {
+                      "$": "actions.secondaryHref"
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "title"
+                },
+                "ratio": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "stats"
+                      ]
+                    },
+                    "1/1",
+                    "4/3"
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    },
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    },
+    {
+      "from": "ErrorPage",
+      "names": [
+        "LinkActions"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-stat-rows.json b/xgen/specs/organisms/feature-stat-rows.json
new file mode 100644
index 0000000..f85b8a1
--- /dev/null
+++ b/xgen/specs/organisms/feature-stat-rows.json
@@ -0,0 +1,227 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.feature-stat-rows",
+  "name": "FeatureStatRows",
+  "docs": "Two figures of FeatureSplit as cards, then three features as checked rows.",
+  "records": {},
+  "props": [
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "stats",
+      "type": {
+        "ts": "Stat[]"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "6",
+        "Align": "stretch"
+      },
+      "children": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid grid-cols-2 gap-4"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "stats"
+              },
+              "as": "s",
+              "key": {
+                "$": "s.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      2
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0",
+                        "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                      },
+                      "attrs": {
+                        "data-testid": "feature-stat"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "2xl",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.value"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.label"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        },
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "4",
+            "Align": "stretch"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "features"
+              },
+              "as": "f",
+              "key": {
+                "$": "f.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      3
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "start"
+                      },
+                      "attrs": {
+                        "data-testid": "feature-item"
+                      },
+                      "children": [
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": "flex size-6 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": "check",
+                                "Size": 16
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "2",
+                            "Class": "min-w-0"
+                          },
+                          "children": [
+                            {
+                              "use": "Title",
+                              "props": {
+                                "As": 3,
+                                "Size": "sm",
+                                "Weight": "semibold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "f.title"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "f.text"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    },
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-sticky.json b/xgen/specs/organisms/feature-sticky.json
new file mode 100644
index 0000000..d4060cf
--- /dev/null
+++ b/xgen/specs/organisms/feature-sticky.json
@@ -0,0 +1,344 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.feature-sticky",
+  "name": "FeatureSticky",
+  "docs": "A picture that stays in view while the feature descriptions scroll beside it. `active` marks the description that is current (the page follows the scroll; that is a port contract). Axes: mediaSide (end, start), item (plain, card), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "active",
+      "type": "string",
+      "default": "",
+      "docs": "id of the current feature"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"plain\" | \"card\""
+      },
+      "default": "plain"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "features"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "layout-grid",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": "1-2",
+                    "Class": "items-start gap-8"
+                  },
+                  "attrs": {
+                    "data-testid": "sticky"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "md:sticky md:top-8",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "mediaSide"
+                                    },
+                                    "start"
+                                  ]
+                                },
+                                "md:order-first",
+                                "md:order-last"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "sticky-media"
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "title"
+                            },
+                            "ratio": "4/3"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "density"
+                                },
+                                "compact"
+                              ]
+                            },
+                            "4",
+                            "8"
+                          ]
+                        },
+                        "Align": "stretch"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "features"
+                          },
+                          "as": "f",
+                          "key": {
+                            "$": "f.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "2",
+                                "Class": {
+                                  "op": "cn",
+                                  "args": [
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "item"
+                                            },
+                                            "card"
+                                          ]
+                                        },
+                                        "rounded bg-card inset-ring inset-ring-border p-6",
+                                        "py-4"
+                                      ]
+                                    },
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "f.id"
+                                            },
+                                            {
+                                              "$": "active"
+                                            }
+                                          ]
+                                        },
+                                        "inset-ring inset-ring-foreground",
+                                        ""
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "item",
+                                "aria-current": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "f.id"
+                                        },
+                                        {
+                                          "$": "active"
+                                        }
+                                      ]
+                                    },
+                                    "true",
+                                    {
+                                      "op": "undef",
+                                      "args": []
+                                    }
+                                  ]
+                                }
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": {
+                                      "$": "f.icon"
+                                    },
+                                    "Size": 24
+                                  }
+                                },
+                                {
+                                  "use": "Title",
+                                  "props": {
+                                    "As": 3,
+                                    "Size": "2xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "f.title"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "base",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "f.text"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/feature-tabs.json b/xgen/specs/organisms/feature-tabs.json
new file mode 100644
index 0000000..b8e1b20
--- /dev/null
+++ b/xgen/specs/organisms/feature-tabs.json
@@ -0,0 +1,394 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.feature-tabs",
+  "name": "FeatureTabs",
+  "docs": "Features behind a tab list: the chosen tab shows its text and a picture. The page keeps the chosen tab (`active`, empty for the first) and updates it on the `select` event. Axes: panel (split: text beside the picture, stack: picture below), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "tabsLabel",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "active",
+      "type": "string",
+      "default": "",
+      "docs": "id of the chosen feature; empty: the first"
+    },
+    {
+      "name": "panel",
+      "type": {
+        "ts": "\"split\" | \"stack\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "select",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "a tab was chosen"
+    }
+  ],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "features"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "layout-grid",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "6",
+                    "Align": "stretch"
+                  },
+                  "children": [
+                    {
+                      "organism": "Switcher",
+                      "props": {
+                        "label": {
+                          "$": "tabsLabel"
+                        },
+                        "className": "w-fit max-w-full flex-wrap"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "each": {
+                                "$": "features"
+                              },
+                              "as": "f",
+                              "key": {
+                                "$": "f.id"
+                              },
+                              "do": [
+                                {
+                                  "organism": "SwitcherItem",
+                                  "props": {
+                                    "active": {
+                                      "op": "or",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "f.id"
+                                            },
+                                            {
+                                              "$": "active"
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "op": "and",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "active"
+                                                },
+                                                ""
+                                              ]
+                                            },
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "i"
+                                                },
+                                                0
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "on": {
+                                    "click": {
+                                      "call": "emit.select",
+                                      "args": [
+                                        {
+                                          "$": "f.id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "text": {
+                                            "$": "f.title"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ],
+                              "index": "i"
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "each": {
+                        "$": "features"
+                      },
+                      "as": "f",
+                      "key": {
+                        "$": "f.id"
+                      },
+                      "do": [
+                        {
+                          "when": {
+                            "op": "or",
+                            "args": [
+                              {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "f.id"
+                                  },
+                                  {
+                                    "$": "active"
+                                  }
+                                ]
+                              },
+                              {
+                                "op": "and",
+                                "args": [
+                                  {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "active"
+                                      },
+                                      ""
+                                    ]
+                                  },
+                                  {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "i"
+                                      },
+                                      0
+                                    ]
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Grid",
+                              "props": {
+                                "Cols": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "panel"
+                                        },
+                                        "split"
+                                      ]
+                                    },
+                                    "1-2",
+                                    "1"
+                                  ]
+                                },
+                                "Class": "items-center gap-8"
+                              },
+                              "attrs": {
+                                "data-testid": "tab-panel",
+                                "role": "tabpanel"
+                              },
+                              "children": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "4"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": {
+                                          "$": "f.icon"
+                                        },
+                                        "Size": 24
+                                      }
+                                    },
+                                    {
+                                      "use": "Title",
+                                      "props": {
+                                        "As": 3,
+                                        "Size": "2xl",
+                                        "Weight": "bold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "f.title"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "base",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "f.text"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "organism": "MediaFrame",
+                                  "props": {
+                                    "alt": {
+                                      "$": "f.title"
+                                    },
+                                    "ratio": "4/3"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ],
+                      "index": "i"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/figure-block.json b/xgen/specs/organisms/figure-block.json
new file mode 100644
index 0000000..4a81787
--- /dev/null
+++ b/xgen/specs/organisms/figure-block.json
@@ -0,0 +1,49 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.figure-block",
+  "name": "FigureBlock",
+  "docs": "Self-contained content with an optional caption (a quote, a picture, a stat) in its own file: Block tag figure.",
+  "records": {},
+  "props": [
+    {
+      "name": "testid",
+      "type": "string",
+      "docs": "data-testid of the root"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "figure",
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": {
+          "$": "testid"
+        }
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/footer-brand.json b/xgen/specs/organisms/footer-brand.json
new file mode 100644
index 0000000..995798c
--- /dev/null
+++ b/xgen/specs/organisms/footer-brand.json
@@ -0,0 +1,92 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-brand",
+  "name": "FooterBrand",
+  "docs": "The brand of FooterSplit: a mark and the brand word over the tagline.",
+  "records": {},
+  "props": [
+    {
+      "name": "brand",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "tagline",
+      "type": "string",
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "2",
+        "Align": "start"
+      },
+      "attrs": {
+        "data-testid": "footer-brand"
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "use": "Inline",
+              "props": {
+                "Class": "flex size-8 items-center justify-center rounded bg-foreground text-background"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "layers",
+                    "Size": 16
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "xl",
+                "Weight": "bold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "brand"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "tagline"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/footer-card.json b/xgen/specs/organisms/footer-card.json
new file mode 100644
index 0000000..9a0f9a7
--- /dev/null
+++ b/xgen/specs/organisms/footer-card.json
@@ -0,0 +1,338 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-card",
+  "name": "FooterCard",
+  "docs": "The card layout of SitemapFooter: the brand mark and word, then the link groups in one row, in a rounded card.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the link groups"
+    },
+    {
+      "name": "brand",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "groups",
+      "type": {
+        "ts": "MegaGroup[]"
+      },
+      "required": true
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "footer",
+        "Class": "py-8"
+      },
+      "attrs": {
+        "data-testid": "site-footer",
+        "data-layout": "card",
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                {
+                  "op": "cn",
+                  "args": [
+                    "mx-auto w-full px-4",
+                    {
+                      "op": "preset",
+                      "args": [
+                        "defaults",
+                        "section.landing"
+                      ]
+                    }
+                  ]
+                },
+                "px-0"
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "flex w-full flex-row items-start overflow-hidden bg-muted p-10",
+                    {
+                      "op": "preset",
+                      "args": [
+                        "defaults",
+                        "footer.card"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "footer-card"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "h-8 shrink-0",
+                        {
+                          "op": "preset",
+                          "args": [
+                            "defaults",
+                            "footer.brand"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "footer-brand"
+                  },
+                  "children": [
+                    {
+                      "use": "Inline",
+                      "props": {
+                        "Class": "flex size-8 items-center justify-center rounded bg-foreground text-background"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "hexagon",
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "base",
+                        "Weight": "bold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "brand"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "groups"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "NavBlock",
+                      "props": {
+                        "label": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "landmarkLabel"
+                            },
+                            {
+                              "op": "uniq",
+                              "args": [
+                                {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}, {1}",
+                                    {
+                                      "$": "label"
+                                    },
+                                    {
+                                      "$": "landmarkLabel"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "$": "label"
+                            }
+                          ]
+                        },
+                        "className": "min-w-0 flex-1"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "0",
+                                "Align": "start",
+                                "Class": {
+                                  "op": "cn",
+                                  "args": [
+                                    "flex w-full flex-nowrap justify-between",
+                                    {
+                                      "op": "preset",
+                                      "args": [
+                                        "defaults",
+                                        "footer.groups"
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "footer-groups"
+                              },
+                              "children": [
+                                {
+                                  "each": {
+                                    "$": "groups"
+                                  },
+                                  "as": "g",
+                                  "key": {
+                                    "$": "g.id"
+                                  },
+                                  "do": [
+                                    {
+                                      "use": "Stack",
+                                      "props": {
+                                        "Gap": "4"
+                                      },
+                                      "attrs": {
+                                        "data-testid": "group"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "xs",
+                                            "Weight": "semibold",
+                                            "Class": "leading-5"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "g.title"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "List",
+                                          "props": {
+                                            "Class": "m-0 flex list-none flex-col gap-4 p-0"
+                                          },
+                                          "children": [
+                                            {
+                                              "each": {
+                                                "$": "g.links"
+                                              },
+                                              "as": "item",
+                                              "key": {
+                                                "$": "item.id"
+                                              },
+                                              "do": [
+                                                {
+                                                  "use": "ListItem",
+                                                  "children": [
+                                                    {
+                                                      "organism": "MenuEntry",
+                                                      "props": {
+                                                        "href": {
+                                                          "$": "item.href"
+                                                        },
+                                                        "className": "text-xs leading-5 text-muted-foreground"
+                                                      },
+                                                      "slots": {
+                                                        "children": {
+                                                          "args": [],
+                                                          "do": [
+                                                            {
+                                                              "text": {
+                                                                "$": "item.name"
+                                                              }
+                                                            }
+                                                          ]
+                                                        }
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "frame": true,
+  "typeImports": [
+    {
+      "from": "MegaMenu",
+      "names": [
+        "MegaGroup"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/footer-channels.json b/xgen/specs/organisms/footer-channels.json
new file mode 100644
index 0000000..82fa4ba
--- /dev/null
+++ b/xgen/specs/organisms/footer-channels.json
@@ -0,0 +1,144 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-channels",
+  "name": "FooterChannels",
+  "docs": "The channels of the community as three cards: a glyph over the name and one line.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "FooterExtras"
+      },
+      "required": true,
+      "docs": "the figures, points, contacts and channels"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "extras.channels"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid grid-cols-1 gap-4 sm:grid-cols-3"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "extras.channels"
+              },
+              "as": "c",
+              "key": {
+                "$": "c.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      3
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2",
+                        "Align": "start",
+                        "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                      },
+                      "attrs": {
+                        "data-testid": "footer-channel"
+                      },
+                      "children": [
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": {
+                                  "$": "c.icon"
+                                },
+                                "Size": 20
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "c.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "c.text"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FooterSplit",
+      "names": [
+        "FooterExtras",
+        "FooterSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/footer-columns.json b/xgen/specs/organisms/footer-columns.json
new file mode 100644
index 0000000..374e546
--- /dev/null
+++ b/xgen/specs/organisms/footer-columns.json
@@ -0,0 +1,176 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-columns",
+  "name": "FooterColumns",
+  "docs": "The link groups of SitemapFooter as columns: a group title over its links, up to five columns.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the link groups"
+    },
+    {
+      "name": "groups",
+      "type": {
+        "ts": "MegaGroup[]"
+      },
+      "required": true
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "groups"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Block",
+          "props": {
+            "Tag": "nav"
+          },
+          "attrs": {
+            "aria-label": {
+              "op": "coalesce",
+              "args": [
+                {
+                  "$": "landmarkLabel"
+                },
+                {
+                  "$": "label"
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "use": "Grid",
+              "props": {
+                "Cols": "1",
+                "Class": "grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-5"
+              },
+              "attrs": {
+                "data-testid": "footer-groups"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "groups"
+                  },
+                  "as": "g",
+                  "key": {
+                    "$": "g.id"
+                  },
+                  "do": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2"
+                      },
+                      "attrs": {
+                        "data-testid": "group"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "g.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "List",
+                          "props": {
+                            "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "g.links"
+                              },
+                              "as": "item",
+                              "key": {
+                                "$": "item.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "ListItem",
+                                  "children": [
+                                    {
+                                      "organism": "MenuEntry",
+                                      "props": {
+                                        "href": {
+                                          "$": "item.href"
+                                        },
+                                        "className": "text-sm text-muted-foreground"
+                                      },
+                                      "slots": {
+                                        "children": {
+                                          "args": [],
+                                          "do": [
+                                            {
+                                              "text": {
+                                                "$": "item.name"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MegaMenu",
+      "names": [
+        "MegaGroup"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/footer-contacts.json b/xgen/specs/organisms/footer-contacts.json
new file mode 100644
index 0000000..ec9d9c9
--- /dev/null
+++ b/xgen/specs/organisms/footer-contacts.json
@@ -0,0 +1,138 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-contacts",
+  "name": "FooterContacts",
+  "docs": "The ways to reach the team in a column: a glyph tile, the kind (Email, Phone) and the value.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "FooterExtras"
+      },
+      "required": true,
+      "docs": "the figures, points, contacts and channels"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "extras.contacts"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "4",
+            "Align": "stretch"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "extras.contacts"
+              },
+              "as": "c",
+              "key": {
+                "$": "c.id"
+              },
+              "do": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center"
+                  },
+                  "attrs": {
+                    "data-testid": "footer-contact"
+                  },
+                  "children": [
+                    {
+                      "use": "Inline",
+                      "props": {
+                        "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "c.icon"
+                            },
+                            "Size": 20
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "c.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "c.text"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FooterSplit",
+      "names": [
+        "FooterExtras",
+        "FooterSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/footer-figures.json b/xgen/specs/organisms/footer-figures.json
new file mode 100644
index 0000000..5db2ff3
--- /dev/null
+++ b/xgen/specs/organisms/footer-figures.json
@@ -0,0 +1,126 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-figures",
+  "name": "FooterFigures",
+  "docs": "Three figures in a row under the brand of FooterSplit.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "FooterExtras"
+      },
+      "required": true,
+      "docs": "the figures, points, contacts and channels"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "extras.stats"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "8",
+            "Class": "flex-wrap"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "extras.stats"
+              },
+              "as": "s",
+              "key": {
+                "$": "s.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      3
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0"
+                      },
+                      "attrs": {
+                        "data-testid": "footer-stat"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xl",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.value"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.label"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FooterSplit",
+      "names": [
+        "FooterExtras",
+        "FooterSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/footer-group-cards.json b/xgen/specs/organisms/footer-group-cards.json
new file mode 100644
index 0000000..9767897
--- /dev/null
+++ b/xgen/specs/organisms/footer-group-cards.json
@@ -0,0 +1,202 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-group-cards",
+  "name": "FooterGroupCards",
+  "docs": "The link groups of FooterSplit as cards: a glyph and the group title over its links, four across on wide screens.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the link groups"
+    },
+    {
+      "name": "groups",
+      "type": {
+        "ts": "MegaGroup[]"
+      },
+      "required": true
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "groups"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Block",
+          "props": {
+            "Tag": "nav"
+          },
+          "attrs": {
+            "aria-label": {
+              "op": "coalesce",
+              "args": [
+                {
+                  "$": "landmarkLabel"
+                },
+                {
+                  "$": "label"
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "groups"
+                  },
+                  "as": "g",
+                  "key": {
+                    "$": "g.id"
+                  },
+                  "do": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch",
+                        "Class": "rounded bg-card inset-ring inset-ring-border p-6"
+                      },
+                      "attrs": {
+                        "data-testid": "group"
+                      },
+                      "children": [
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "2",
+                            "Align": "center"
+                          },
+                          "children": [
+                            {
+                              "use": "Inline",
+                              "props": {
+                                "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted text-foreground"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": {
+                                      "$": "g.icon"
+                                    },
+                                    "Size": 20
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Weight": "semibold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "g.title"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "List",
+                          "props": {
+                            "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "g.links"
+                              },
+                              "as": "item",
+                              "key": {
+                                "$": "item.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "ListItem",
+                                  "children": [
+                                    {
+                                      "organism": "MenuEntry",
+                                      "props": {
+                                        "href": {
+                                          "$": "item.href"
+                                        },
+                                        "className": "text-sm text-muted-foreground",
+                                        "variant": "muted",
+                                        "size": "sm"
+                                      },
+                                      "slots": {
+                                        "children": {
+                                          "args": [],
+                                          "do": [
+                                            {
+                                              "text": {
+                                                "$": "item.name"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MegaMenu",
+      "names": [
+        "MegaGroup"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/footer-link-columns.json b/xgen/specs/organisms/footer-link-columns.json
new file mode 100644
index 0000000..d30f959
--- /dev/null
+++ b/xgen/specs/organisms/footer-link-columns.json
@@ -0,0 +1,188 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-link-columns",
+  "name": "FooterLinkColumns",
+  "docs": "The first three link groups of FooterSplit as small columns beside each other.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the link groups"
+    },
+    {
+      "name": "groups",
+      "type": {
+        "ts": "MegaGroup[]"
+      },
+      "required": true
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "groups"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Block",
+          "props": {
+            "Tag": "nav"
+          },
+          "attrs": {
+            "aria-label": {
+              "op": "coalesce",
+              "args": [
+                {
+                  "$": "landmarkLabel"
+                },
+                {
+                  "$": "label"
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "grid grid-cols-2 gap-8 sm:grid-cols-3"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "groups"
+                  },
+                  "as": "g",
+                  "key": {
+                    "$": "g.id"
+                  },
+                  "do": [
+                    {
+                      "when": {
+                        "op": "lt",
+                        "args": [
+                          {
+                            "$": "i"
+                          },
+                          3
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "2"
+                          },
+                          "attrs": {
+                            "data-testid": "group"
+                          },
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Weight": "semibold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "g.title"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "List",
+                              "props": {
+                                "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                              },
+                              "children": [
+                                {
+                                  "each": {
+                                    "$": "g.links"
+                                  },
+                                  "as": "item",
+                                  "key": {
+                                    "$": "item.id"
+                                  },
+                                  "do": [
+                                    {
+                                      "use": "ListItem",
+                                      "children": [
+                                        {
+                                          "organism": "MenuEntry",
+                                          "props": {
+                                            "href": {
+                                              "$": "item.href"
+                                            },
+                                            "className": "text-sm text-muted-foreground",
+                                            "variant": "muted",
+                                            "size": "sm"
+                                          },
+                                          "slots": {
+                                            "children": {
+                                              "args": [],
+                                              "do": [
+                                                {
+                                                  "text": {
+                                                    "$": "item.name"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "index": "i"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MegaMenu",
+      "names": [
+        "MegaGroup"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/footer-points.json b/xgen/specs/organisms/footer-points.json
new file mode 100644
index 0000000..bb32620
--- /dev/null
+++ b/xgen/specs/organisms/footer-points.json
@@ -0,0 +1,140 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-points",
+  "name": "FooterPoints",
+  "docs": "Four points with their glyphs in a column, under the tagline of FooterSplit.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "FooterExtras"
+      },
+      "required": true,
+      "docs": "the figures, points, contacts and channels"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "extras.points"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "4",
+            "Align": "start"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "title"
+                  }
+                }
+              ]
+            },
+            {
+              "each": {
+                "$": "extras.points"
+              },
+              "as": "p",
+              "key": {
+                "$": "p.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      4
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "2",
+                        "Align": "center"
+                      },
+                      "attrs": {
+                        "data-testid": "footer-point"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "p.icon"
+                            },
+                            "Size": 16
+                          }
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "p.title"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FooterSplit",
+      "names": [
+        "FooterExtras",
+        "FooterSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/footer-signup-card.json b/xgen/specs/organisms/footer-signup-card.json
new file mode 100644
index 0000000..da69d57
--- /dev/null
+++ b/xgen/specs/organisms/footer-signup-card.json
@@ -0,0 +1,192 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-signup-card",
+  "name": "FooterSignupCard",
+  "docs": "The newsletter sign-up of FooterSplit in a card: a title with a glyph, the email field and button, and a note.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true,
+      "docs": "ties the email label to its field"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "FooterSplitLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch",
+        "Class": "rounded bg-card inset-ring inset-ring-border p-6"
+      },
+      "attrs": {
+        "data-testid": "signup"
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "mail",
+                "Size": 16
+              }
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.signup"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Form",
+          "props": {
+            "Method": "dialog",
+            "Class": {
+              "op": "cn",
+              "args": [
+                "w-full max-w-md",
+                {
+                  "op": "cond",
+                  "args": [
+                    false,
+                    "mx-auto",
+                    ""
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-testid": "email-form"
+          },
+          "children": [
+            {
+              "use": "Label",
+              "props": {
+                "HTMLFor": {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-email",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                },
+                "Class": "sr-only"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.email"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "start",
+                "Class": "w-full flex-wrap"
+              },
+              "children": [
+                {
+                  "use": "Input",
+                  "props": {
+                    "Type": "email",
+                    "Name": "email",
+                    "Class": "min-w-0 flex-1"
+                  },
+                  "attrs": {
+                    "id": {
+                      "op": "tpl",
+                      "args": [
+                        "{0}-email",
+                        {
+                          "$": "id"
+                        }
+                      ]
+                    },
+                    "data-testid": "field"
+                  }
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "default",
+                    "Size": "default",
+                    "Type": "submit"
+                  },
+                  "attrs": {
+                    "data-testid": "submit"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "labels.subscribe"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "xs",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.note"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FooterSplit",
+      "names": [
+        "FooterExtras",
+        "FooterSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/footer-sitemap.json b/xgen/specs/organisms/footer-sitemap.json
new file mode 100644
index 0000000..1d11fcb
--- /dev/null
+++ b/xgen/specs/organisms/footer-sitemap.json
@@ -0,0 +1,61 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.footer-sitemap",
+  "name": "FooterSitemap",
+  "docs": "The sitemap link of FooterSplit: an arrow and the word, only where the app gives the address (no address, no link).",
+  "records": {},
+  "props": [
+    {
+      "name": "href",
+      "type": "string",
+      "docs": "the address of the sitemap; none: nothing"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "$": "href"
+      },
+      "then": [
+        {
+          "use": "Link",
+          "props": {
+            "Href": {
+              "$": "href"
+            },
+            "Size": "sm"
+          },
+          "attrs": {
+            "data-testid": "footer-sitemap"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "arrow-right",
+                "Size": 16
+              }
+            },
+            {
+              "text": {
+                "$": "label"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/footer-split.json b/xgen/specs/organisms/footer-split.json
new file mode 100644
index 0000000..5e4a119
--- /dev/null
+++ b/xgen/specs/organisms/footer-split.json
@@ -0,0 +1,754 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.footer-split",
+  "name": "FooterSplit",
+  "docs": "A footer with more than links. Axes: layout (stats: the brand with three figures and a sitemap link over the link groups as cards; points, links, newsletter, contacts, channels: a split beside a picture with the brand and four points, the brand and small link columns, a newsletter card and link columns, the contacts and two actions, or the community channels and figures), mediaSide, tone.",
+  "records": {
+    "FooterExtras": [
+      {
+        "name": "stats",
+        "type": "Stat[]"
+      },
+      {
+        "name": "points",
+        "type": "Feature[]"
+      },
+      {
+        "name": "contacts",
+        "type": "Feature[]"
+      },
+      {
+        "name": "channels",
+        "type": "Feature[]"
+      },
+      {
+        "name": "sitemapHref",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "ctaHref",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "secondaryHref",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "FooterSplitLabels": [
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "loopTitle",
+        "type": "string"
+      },
+      {
+        "name": "loopText",
+        "type": "string"
+      },
+      {
+        "name": "joinTitle",
+        "type": "string"
+      },
+      {
+        "name": "joinText",
+        "type": "string"
+      },
+      {
+        "name": "sitemap",
+        "type": "string"
+      },
+      {
+        "name": "points",
+        "type": "string"
+      },
+      {
+        "name": "signup",
+        "type": "string"
+      },
+      {
+        "name": "email",
+        "type": "string"
+      },
+      {
+        "name": "subscribe",
+        "type": "string"
+      },
+      {
+        "name": "note",
+        "type": "string"
+      },
+      {
+        "name": "cta",
+        "type": "string"
+      },
+      {
+        "name": "secondary",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "default": "footer"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the link groups"
+    },
+    {
+      "name": "brand",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "tagline",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "copyright",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "groups",
+      "type": {
+        "ts": "MegaGroup[]"
+      },
+      "required": true
+    },
+    {
+      "name": "extras",
+      "type": {
+        "record": "FooterExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "FooterSplitLabels"
+      },
+      "required": true,
+      "docs": "the heading and text of the contacts, newsletter (loop) and channels (join) layouts, the sitemap link, the points title, the sign-up words and the two actions"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"stats\" | \"points\" | \"links\" | \"newsletter\" | \"contacts\" | \"channels\""
+      },
+      "default": "stats"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "footer",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "border-t border-border",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "tone"
+                    },
+                    "muted"
+                  ]
+                },
+                "bg-muted",
+                ""
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "footer-split",
+        "data-layout": {
+          "$": "layout"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                "py-12"
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "stats"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "8",
+                    "Align": "stretch"
+                  },
+                  "children": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "6",
+                        "Align": "start",
+                        "Justify": "between",
+                        "Class": "flex-wrap"
+                      },
+                      "children": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "6",
+                            "Align": "start"
+                          },
+                          "children": [
+                            {
+                              "organism": "FooterBrand",
+                              "props": {
+                                "brand": {
+                                  "$": "brand"
+                                },
+                                "tagline": {
+                                  "$": "tagline"
+                                }
+                              }
+                            },
+                            {
+                              "organism": "FooterFigures",
+                              "props": {
+                                "extras": {
+                                  "$": "extras"
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "organism": "FooterSitemap",
+                          "props": {
+                            "href": {
+                              "$": "extras.sitemapHref"
+                            },
+                            "label": {
+                              "$": "labels.sitemap"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "FooterGroupCards",
+                      "props": {
+                        "label": {
+                          "$": "label"
+                        },
+                        "groups": {
+                          "$": "groups"
+                        },
+                        "landmarkLabel": {
+                          "$": "landmarkLabel"
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "border-t border-border pt-6"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "copyright"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "grid grid-cols-1 items-center gap-8 lg:grid-cols-2"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "mediaSide"
+                          },
+                          "start"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "brand"
+                            },
+                            "ratio": "4/3"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "8",
+                        "Align": "stretch"
+                      },
+                      "children": [
+                        {
+                          "when": {
+                            "op": "or",
+                            "args": [
+                              {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "layout"
+                                  },
+                                  "points"
+                                ]
+                              },
+                              {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "layout"
+                                  },
+                                  "links"
+                                ]
+                              }
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "FooterBrand",
+                              "props": {
+                                "brand": {
+                                  "$": "brand"
+                                },
+                                "tagline": {
+                                  "$": "tagline"
+                                }
+                              }
+                            }
+                          ],
+                          "else": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "start"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "op": "cond",
+                                        "args": [
+                                          {
+                                            "op": "eq",
+                                            "args": [
+                                              {
+                                                "$": "layout"
+                                              },
+                                              "newsletter"
+                                            ]
+                                          },
+                                          {
+                                            "$": "labels.loopTitle"
+                                          },
+                                          {
+                                            "op": "cond",
+                                            "args": [
+                                              {
+                                                "op": "eq",
+                                                "args": [
+                                                  {
+                                                    "$": "layout"
+                                                  },
+                                                  "channels"
+                                                ]
+                                              },
+                                              {
+                                                "$": "labels.joinTitle"
+                                              },
+                                              {
+                                                "$": "labels.title"
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "op": "cond",
+                                        "args": [
+                                          {
+                                            "op": "eq",
+                                            "args": [
+                                              {
+                                                "$": "layout"
+                                              },
+                                              "newsletter"
+                                            ]
+                                          },
+                                          {
+                                            "$": "labels.loopText"
+                                          },
+                                          {
+                                            "op": "cond",
+                                            "args": [
+                                              {
+                                                "op": "eq",
+                                                "args": [
+                                                  {
+                                                    "$": "layout"
+                                                  },
+                                                  "channels"
+                                                ]
+                                              },
+                                              {
+                                                "$": "labels.joinText"
+                                              },
+                                              {
+                                                "$": "labels.text"
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "points"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "FooterPoints",
+                              "props": {
+                                "extras": {
+                                  "$": "extras"
+                                },
+                                "title": {
+                                  "$": "labels.points"
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "newsletter"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "FooterSignupCard",
+                              "props": {
+                                "id": {
+                                  "$": "id"
+                                },
+                                "labels": {
+                                  "$": "labels"
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "or",
+                            "args": [
+                              {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "layout"
+                                  },
+                                  "links"
+                                ]
+                              },
+                              {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "layout"
+                                  },
+                                  "newsletter"
+                                ]
+                              }
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "FooterLinkColumns",
+                              "props": {
+                                "label": {
+                                  "$": "label"
+                                },
+                                "groups": {
+                                  "$": "groups"
+                                },
+                                "landmarkLabel": {
+                                  "$": "landmarkLabel"
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "contacts"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "FooterContacts",
+                              "props": {
+                                "extras": {
+                                  "$": "extras"
+                                }
+                              }
+                            },
+                            {
+                              "organism": "ActionGroup",
+                              "props": {
+                                "primary": {
+                                  "$": "labels.cta"
+                                },
+                                "primaryHref": {
+                                  "$": "extras.ctaHref"
+                                },
+                                "secondary": {
+                                  "$": "labels.secondary"
+                                },
+                                "secondaryHref": {
+                                  "$": "extras.secondaryHref"
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "channels"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "FooterChannels",
+                              "props": {
+                                "extras": {
+                                  "$": "extras"
+                                }
+                              }
+                            },
+                            {
+                              "organism": "FooterFigures",
+                              "props": {
+                                "extras": {
+                                  "$": "extras"
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": "border-t border-border pt-6"
+                          },
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "copyright"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "ne",
+                        "args": [
+                          {
+                            "$": "mediaSide"
+                          },
+                          "start"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "brand"
+                            },
+                            "ratio": "4/3"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MegaMenu",
+      "names": [
+        "MegaGroup"
+      ]
+    },
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    },
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/hero-badge.json b/xgen/specs/organisms/hero-badge.json
new file mode 100644
index 0000000..02d011e
--- /dev/null
+++ b/xgen/specs/organisms/hero-badge.json
@@ -0,0 +1,92 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.hero-badge",
+  "name": "HeroBadge",
+  "docs": "A composite badge on a dark band: an optional small mark beside a label.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "mark",
+      "type": "string",
+      "docs": "small inner pill text (NEW)"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Group",
+      "props": {
+        "Gap": "2",
+        "Align": "center",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "h-8 justify-center rounded-full px-2 inset-ring inset-ring-background/30",
+            {
+              "op": "preset",
+              "args": [
+                "defaults",
+                "hero.badge"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "section-badge"
+      },
+      "children": [
+        {
+          "when": {
+            "$": "mark"
+          },
+          "then": [
+            {
+              "use": "Badge",
+              "props": {
+                "Variant": "secondary",
+                "Size": "sm"
+              },
+              "attrs": {
+                "data-testid": "badge-mark"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "mark"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "xs",
+            "Weight": "bold",
+            "Class": "leading-5 text-background"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "label"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/hero-classic.json b/xgen/specs/organisms/hero-classic.json
new file mode 100644
index 0000000..bdeea84
--- /dev/null
+++ b/xgen/specs/organisms/hero-classic.json
@@ -0,0 +1,734 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.hero-classic",
+  "name": "HeroClassic",
+  "docs": "The top of a page: heading, lead and actions, with optional media (image, backdrop, code window, cluster). Axes: layout, media kind and side, scale, tone, density, actions mode.",
+  "records": {
+    "HeroMedia": [
+      {
+        "name": "kind",
+        "type": "\"none\" | \"image\" | \"backdrop\" | \"code\" | \"cluster\"",
+        "optional": true,
+        "docs": "what the hero shows besides the text",
+        "default": "none"
+      },
+      {
+        "name": "side",
+        "type": "\"end\" | \"start\"",
+        "optional": true,
+        "docs": "side of the media in the split layout",
+        "default": "end"
+      },
+      {
+        "name": "codeTitle",
+        "type": "string",
+        "optional": true,
+        "docs": "title of the code window"
+      },
+      {
+        "name": "prompt",
+        "type": "string",
+        "optional": true,
+        "docs": "prompt line of the code window"
+      },
+      {
+        "name": "lines",
+        "type": "CodeLine[]",
+        "optional": true,
+        "docs": "lines of the code window"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "badge",
+      "type": "string"
+    },
+    {
+      "name": "topics",
+      "type": {
+        "ts": "Topic[]"
+      }
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "ActionSet"
+      }
+    },
+    {
+      "name": "media",
+      "type": {
+        "record": "HeroMedia"
+      }
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"centered\" | \"split\""
+      },
+      "default": "centered"
+    },
+    {
+      "name": "scale",
+      "type": {
+        "ts": "\"default\" | \"display\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\" | \"inverse\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "roomy"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "mediaKind",
+      "value": {
+        "op": "coalesce",
+        "args": [
+          {
+            "$": "media.kind"
+          },
+          "none"
+        ]
+      }
+    },
+    {
+      "name": "mediaSide",
+      "value": {
+        "op": "coalesce",
+        "args": [
+          {
+            "$": "media.side"
+          },
+          "end"
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "text"
+        },
+        "heading": {
+          "level": {
+            "$": "level"
+          },
+          "scale": {
+            "$": "scale"
+          },
+          "badge": {
+            "$": "badge"
+          }
+        },
+        "layout": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "split"
+              ]
+            },
+            "split",
+            "stack"
+          ]
+        },
+        "align": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "split"
+              ]
+            },
+            "start",
+            "center"
+          ]
+        },
+        "media": {
+          "show": {
+            "op": "or",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "mediaKind"
+                  },
+                  "image"
+                ]
+              },
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "mediaKind"
+                  },
+                  "code"
+                ]
+              },
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "mediaKind"
+                  },
+                  "cluster"
+                ]
+              }
+            ]
+          },
+          "side": {
+            "$": "mediaSide"
+          }
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "className": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "mediaKind"
+                        },
+                        "backdrop"
+                      ]
+                    },
+                    "image",
+                    "none"
+                  ]
+                },
+                "image"
+              ]
+            },
+            "relative isolate overflow-hidden",
+            ""
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "organism": "Backdrop",
+              "props": {
+                "kind": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "mediaKind"
+                        },
+                        "backdrop"
+                      ]
+                    },
+                    "image",
+                    "none"
+                  ]
+                },
+                "alt": {
+                  "$": "title"
+                }
+              }
+            },
+            {
+              "when": {
+                "$": "actions.cta"
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "actions.mode"
+                      },
+                      "form"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "w-full max-w-xl",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "centered"
+                                  ]
+                                },
+                                "mx-auto",
+                                ""
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "email-form"
+                      },
+                      "children": [
+                        {
+                          "use": "Label",
+                          "props": {
+                            "HTMLFor": {
+                              "op": "tpl",
+                              "args": [
+                                "{0}-email",
+                                {
+                                  "$": "id"
+                                }
+                              ]
+                            },
+                            "Class": "sr-only"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "actions.emailLabel"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "2",
+                            "Align": "start",
+                            "Class": "w-full flex-wrap"
+                          },
+                          "children": [
+                            {
+                              "use": "Input",
+                              "props": {
+                                "Type": "text",
+                                "Name": "prompt",
+                                "Class": "min-w-0 flex-1",
+                                "Placeholder": {
+                                  "$": "actions.emailLabel"
+                                }
+                              },
+                              "attrs": {
+                                "id": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-email",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                },
+                                "data-testid": "field"
+                              }
+                            },
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "default",
+                                "Size": "default",
+                                "Href": {
+                                  "$": "actions.href"
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "submit"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "actions.cta"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "organism": "ActionGroup",
+                      "props": {
+                        "primary": {
+                          "$": "actions.cta"
+                        },
+                        "primaryHref": {
+                          "$": "actions.href"
+                        },
+                        "secondary": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "actions.mode"
+                                },
+                                "two"
+                              ]
+                            },
+                            {
+                              "$": "actions.secondary"
+                            },
+                            {
+                              "op": "undef",
+                              "args": []
+                            }
+                          ]
+                        },
+                        "secondaryHref": {
+                          "$": "actions.secondaryHref"
+                        },
+                        "align": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "centered"
+                              ]
+                            },
+                            "center",
+                            "start"
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "and",
+                "args": [
+                  {
+                    "$": "topics"
+                  },
+                  {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "topics"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  }
+                ]
+              },
+              "then": [
+                {
+                  "organism": "TopicChips",
+                  "props": {
+                    "topics": {
+                      "$": "topics"
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "and",
+                "args": [
+                  {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "mediaKind"
+                      },
+                      "code"
+                    ]
+                  },
+                  {
+                    "$": "media.lines"
+                  },
+                  {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "media.lines"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  {
+                    "$": "media.codeTitle"
+                  },
+                  {
+                    "$": "media.prompt"
+                  }
+                ]
+              },
+              "then": [
+                {
+                  "organism": "CodeWindow",
+                  "props": {
+                    "title": {
+                      "$": "media.codeTitle"
+                    },
+                    "prompt": {
+                      "$": "media.prompt"
+                    },
+                    "lines": {
+                      "$": "media.lines"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "mediaKind"
+                  },
+                  "cluster"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": "3",
+                    "Class": "items-end gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "cluster"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "w-full",
+                            ""
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "title"
+                            },
+                            "ratio": "3/4"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "w-full",
+                            "-translate-y-4"
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "title"
+                            },
+                            "ratio": "4/3"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "w-full",
+                            ""
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "title"
+                            },
+                            "ratio": "3/4"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "or",
+                "args": [
+                  {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "mediaKind"
+                      },
+                      "image"
+                    ]
+                  }
+                ]
+              },
+              "then": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "title"
+                    },
+                    "ratio": "4/3"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "CtaActions",
+      "names": [
+        "ActionSet"
+      ]
+    },
+    {
+      "from": "CodeWindow",
+      "names": [
+        "CodeLine"
+      ]
+    },
+    {
+      "from": "TopicChips",
+      "names": [
+        "Topic"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/hero-head.json b/xgen/specs/organisms/hero-head.json
new file mode 100644
index 0000000..d88a061
--- /dev/null
+++ b/xgen/specs/organisms/hero-head.json
@@ -0,0 +1,385 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.hero-head",
+  "name": "HeroHead",
+  "docs": "The head row of a hero band: skip link, brand, menu links (the current one carries aria-current), login and a call to action.",
+  "records": {},
+  "props": [
+    {
+      "name": "brand",
+      "type": "string",
+      "docs": "brand word"
+    },
+    {
+      "name": "brandHref",
+      "type": "string",
+      "docs": "the address of the home page; none: the brand is text"
+    },
+    {
+      "name": "links",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "docs": "menu links"
+    },
+    {
+      "name": "current",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "login",
+      "type": "string"
+    },
+    {
+      "name": "loginHref",
+      "type": "string",
+      "docs": "the address of the login page; none: a button"
+    },
+    {
+      "name": "cta",
+      "type": "string",
+      "docs": "call to action label"
+    },
+    {
+      "name": "href",
+      "type": "string"
+    },
+    {
+      "name": "skip",
+      "type": "string",
+      "docs": "skip link text"
+    },
+    {
+      "name": "navLabel",
+      "type": "string",
+      "docs": "accessible name of the menu"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "header",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex w-full flex-wrap items-center justify-between pr-4",
+            {
+              "op": "preset",
+              "args": [
+                "defaults",
+                "hero.head"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "hero-head",
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "when": {
+            "$": "skip"
+          },
+          "then": [
+            {
+              "use": "LinkPlain",
+              "props": {
+                "Href": "#main-content",
+                "Class": "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:text-foreground focus:inset-ring focus:inset-ring-border"
+              },
+              "attrs": {
+                "data-testid": "skip-link"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "skip"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "organism": "MenuEntry",
+          "props": {
+            "href": {
+              "$": "brandHref"
+            },
+            "className": {
+              "op": "cn",
+              "args": [
+                {
+                  "op": "preset",
+                  "args": [
+                    "defaults",
+                    "text.small"
+                  ]
+                },
+                "font-medium leading-6 text-background"
+              ]
+            },
+            "testid": "brand"
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "text": {
+                    "$": "brand"
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          "when": {
+            "op": "and",
+            "args": [
+              {
+                "$": "links"
+              },
+              {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "links"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "organism": "NavBlock",
+              "props": {
+                "label": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "landmarkLabel"
+                    },
+                    {
+                      "op": "uniq",
+                      "args": [
+                        {
+                          "op": "tpl",
+                          "args": [
+                            "{0}, {1}",
+                            {
+                              "$": "navLabel"
+                            },
+                            {
+                              "$": "landmarkLabel"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "$": "navLabel"
+                    }
+                  ]
+                },
+                "testid": "site-nav"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "8",
+                        "Align": "center",
+                        "Class": "flex-wrap"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "links"
+                          },
+                          "as": "l",
+                          "key": {
+                            "$": "l.id"
+                          },
+                          "do": [
+                            {
+                              "when": {
+                                "$": "l.href"
+                              },
+                              "then": [
+                                {
+                                  "use": "Link",
+                                  "props": {
+                                    "Href": {
+                                      "$": "l.href"
+                                    },
+                                    "Variant": "default",
+                                    "AriaCurrent": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "l.id"
+                                            },
+                                            {
+                                              "$": "current"
+                                            }
+                                          ]
+                                        },
+                                        "page",
+                                        {
+                                          "op": "undef",
+                                          "args": []
+                                        }
+                                      ]
+                                    },
+                                    "Class": "text-xs font-medium leading-5 text-background"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "nav-link"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "l.name"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ],
+                              "else": [
+                                {
+                                  "use": "Inline",
+                                  "props": {
+                                    "Class": "text-xs font-medium leading-5 text-background"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "nav-link"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "l.name"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "when": {
+                "$": "login"
+              },
+              "then": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Href": {
+                      "$": "loginHref"
+                    },
+                    "Variant": "ghost",
+                    "Size": "sm",
+                    "Class": "text-background hover:bg-background/10"
+                  },
+                  "attrs": {
+                    "data-testid": "nav-login"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "login"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "$": "cta"
+              },
+              "then": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Href": {
+                      "$": "href"
+                    },
+                    "Variant": "secondary",
+                    "Size": "sm"
+                  },
+                  "attrs": {
+                    "data-testid": "header-cta"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "cta"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "frame": true,
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/hero-prompt.json b/xgen/specs/organisms/hero-prompt.json
new file mode 100644
index 0000000..0a62bef
--- /dev/null
+++ b/xgen/specs/organisms/hero-prompt.json
@@ -0,0 +1,450 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.hero-prompt",
+  "name": "HeroPrompt",
+  "docs": "A dark hero band: the head row, a badge, a title with weighted words, the prompt box (or actions) and topic pills.",
+  "records": {
+    "HeroComposer": [
+      {
+        "name": "attachLabel",
+        "type": "string",
+        "optional": true,
+        "docs": "attachment chip label"
+      },
+      {
+        "name": "modelLabel",
+        "type": "string",
+        "optional": true,
+        "docs": "model pill label"
+      }
+    ],
+    "HeroNav": [
+      {
+        "name": "brand",
+        "type": "string",
+        "optional": true,
+        "docs": "brand word of the head row"
+      },
+      {
+        "name": "links",
+        "type": "NavLink[]",
+        "optional": true,
+        "docs": "menu links of the head row"
+      },
+      {
+        "name": "current",
+        "type": "string",
+        "optional": true,
+        "docs": "id of the current link"
+      },
+      {
+        "name": "login",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "loginHref",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "skip",
+        "type": "string",
+        "optional": true,
+        "docs": "skip link text"
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": true,
+        "docs": "accessible name of the menu"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "docs": "label of the badge (Meet Model V4.1)"
+    },
+    {
+      "name": "badgeMark",
+      "type": "string",
+      "docs": "small inner pill text (NEW)"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "ActionSet"
+      }
+    },
+    {
+      "name": "composer",
+      "type": {
+        "record": "HeroComposer"
+      },
+      "docs": "labels of the prompt box"
+    },
+    {
+      "name": "nav",
+      "type": {
+        "record": "HeroNav"
+      },
+      "docs": "the head row"
+    },
+    {
+      "name": "topics",
+      "type": {
+        "ts": "Topic[]"
+      }
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "roomy",
+      "docs": "named on the section (data-density) like every section; the band keeps the frame's padding"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex w-full flex-col bg-foreground text-background py-8 [&_.text-muted-foreground]:text-background/70",
+            {
+              "op": "preset",
+              "args": [
+                "defaults",
+                "hero.band"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            "home-hero-title"
+          ]
+        },
+        "data-testid": "section",
+        "data-tone": "inverse",
+        "data-density": {
+          "$": "density"
+        },
+        "data-chrome": "nav",
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full px-8",
+                {
+                  "op": "preset",
+                  "args": [
+                    "defaults",
+                    "hero.container"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "0",
+                "Align": "stretch"
+              },
+              "children": [
+                {
+                  "organism": "HeroHead",
+                  "props": {
+                    "brand": {
+                      "$": "nav.brand"
+                    },
+                    "links": {
+                      "$": "nav.links"
+                    },
+                    "current": {
+                      "$": "nav.current"
+                    },
+                    "login": {
+                      "$": "nav.login"
+                    },
+                    "loginHref": {
+                      "$": "nav.loginHref"
+                    },
+                    "skip": {
+                      "$": "nav.skip"
+                    },
+                    "navLabel": {
+                      "$": "nav.label"
+                    },
+                    "cta": {
+                      "$": "actions.cta"
+                    },
+                    "href": {
+                      "$": "actions.href"
+                    },
+                    "landmarkLabel": {
+                      "$": "landmarkLabel"
+                    }
+                  }
+                },
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "0",
+                    "Align": "center",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "mx-auto w-full pt-24 pb-16",
+                        {
+                          "op": "preset",
+                          "args": [
+                            "defaults",
+                            "hero.column"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "hero-column"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "$": "badge"
+                      },
+                      "then": [
+                        {
+                          "organism": "HeroBadge",
+                          "props": {
+                            "label": {
+                              "$": "badge"
+                            },
+                            "mark": {
+                              "$": "badgeMark"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "WeightedTitle",
+                      "props": {
+                        "id": "home-hero-title",
+                        "title": {
+                          "$": "title"
+                        },
+                        "weights": {
+                          "op": "preset",
+                          "args": [
+                            "defaults",
+                            "hero.titleWeights"
+                          ]
+                        },
+                        "level": {
+                          "$": "level"
+                        }
+                      }
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "actions.mode"
+                          },
+                          "form"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "PromptComposer",
+                          "props": {
+                            "label": {
+                              "$": "actions.emailLabel"
+                            },
+                            "attachLabel": {
+                              "$": "composer.attachLabel"
+                            },
+                            "modelLabel": {
+                              "$": "composer.modelLabel"
+                            },
+                            "send": {
+                              "$": "actions.cta"
+                            },
+                            "href": {
+                              "$": "actions.href"
+                            }
+                          }
+                        }
+                      ],
+                      "else": [
+                        {
+                          "when": {
+                            "$": "actions.cta"
+                          },
+                          "then": [
+                            {
+                              "organism": "ActionGroup",
+                              "props": {
+                                "primary": {
+                                  "$": "actions.cta"
+                                },
+                                "primaryHref": {
+                                  "$": "actions.href"
+                                },
+                                "secondary": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "actions.mode"
+                                        },
+                                        "two"
+                                      ]
+                                    },
+                                    {
+                                      "$": "actions.secondary"
+                                    },
+                                    {
+                                      "op": "undef",
+                                      "args": []
+                                    }
+                                  ]
+                                },
+                                "secondaryHref": {
+                                  "$": "actions.secondaryHref"
+                                },
+                                "align": {
+                                  "op": "cond",
+                                  "args": [
+                                    true,
+                                    "center",
+                                    "start"
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "and",
+                        "args": [
+                          {
+                            "$": "topics"
+                          },
+                          {
+                            "op": "gt",
+                            "args": [
+                              {
+                                "op": "len",
+                                "args": [
+                                  {
+                                    "$": "topics"
+                                  }
+                                ]
+                              },
+                              0
+                            ]
+                          }
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "TopicChips",
+                          "props": {
+                            "topics": {
+                              "$": "topics"
+                            },
+                            "tone": "inverse"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "CtaActions",
+      "names": [
+        "ActionSet"
+      ]
+    },
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    },
+    {
+      "from": "TopicChips",
+      "names": [
+        "Topic"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/hero-split-extras.json b/xgen/specs/organisms/hero-split-extras.json
new file mode 100644
index 0000000..106a01a
--- /dev/null
+++ b/xgen/specs/organisms/hero-split-extras.json
@@ -0,0 +1,611 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.hero-split-extras",
+  "name": "HeroSplitExtras",
+  "docs": "What HeroSplit shows under the lead: three figures in cards, a row of faces with a proof line, two small feature cards, or a quote with its author over three figures.",
+  "records": {},
+  "props": [
+    {
+      "name": "content",
+      "type": {
+        "ts": "HeroContent"
+      },
+      "required": true,
+      "docs": "the figures, small cards, people, proof line and floating card of the hero"
+    },
+    {
+      "name": "extra",
+      "type": {
+        "ts": "\"stats\" | \"avatars\" | \"minis\" | \"quote\" | \"none\""
+      },
+      "default": "none"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "extra"
+              },
+              "stats"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.stats"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid grid-cols-3 gap-4"
+          },
+          "attrs": {
+            "data-testid": "hero-stats"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "content.stats"
+              },
+              "as": "s",
+              "key": {
+                "$": "s.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      3
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0",
+                        "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                      },
+                      "attrs": {
+                        "data-testid": "hero-stat"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "2xl",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.value"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.label"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "extra"
+              },
+              "avatars"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.people"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "center",
+            "Class": "flex-wrap"
+          },
+          "attrs": {
+            "data-testid": "hero-proof"
+          },
+          "children": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "content.people"
+                  },
+                  "as": "p",
+                  "key": {
+                    "$": "p.id"
+                  },
+                  "do": [
+                    {
+                      "when": {
+                        "op": "lt",
+                        "args": [
+                          {
+                            "$": "i"
+                          },
+                          4
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "p.author"
+                            },
+                            "ratio": "1/1",
+                            "className": "size-10 shrink-0 rounded-full"
+                          }
+                        }
+                      ]
+                    }
+                  ],
+                  "index": "i"
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "content.proof"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "extra"
+              },
+              "minis"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.features"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid grid-cols-1 gap-4 sm:grid-cols-2"
+          },
+          "attrs": {
+            "data-testid": "hero-minis"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "content.features"
+              },
+              "as": "f",
+              "key": {
+                "$": "f.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      2
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "start",
+                        "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                      },
+                      "attrs": {
+                        "data-testid": "hero-mini"
+                      },
+                      "children": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": {
+                                  "$": "f.icon"
+                                },
+                                "Size": 20
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "0"
+                          },
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Weight": "semibold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "f.title"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "f.text"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "extra"
+              },
+              "quote"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.people"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "6",
+            "Align": "stretch"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "content.people"
+              },
+              "as": "p",
+              "key": {
+                "$": "p.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      1
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "FigureBlock",
+                      "props": {
+                        "className": "flex flex-col gap-4",
+                        "testid": "hero-quote"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Tag": "blockquote",
+                                "Class": "text-lg font-medium"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "p.quote"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "4",
+                                "Align": "center"
+                              },
+                              "children": [
+                                {
+                                  "organism": "MediaFrame",
+                                  "props": {
+                                    "alt": {
+                                      "$": "p.author"
+                                    },
+                                    "ratio": "1/1",
+                                    "className": "size-10 shrink-0 rounded-full"
+                                  }
+                                },
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "0"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "p.author"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "xs",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "p.role"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            },
+            {
+              "use": "Box",
+              "props": {
+                "Class": "grid grid-cols-3 gap-4"
+              },
+              "attrs": {
+                "data-testid": "hero-stats"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "content.stats"
+                  },
+                  "as": "s",
+                  "key": {
+                    "$": "s.id"
+                  },
+                  "do": [
+                    {
+                      "when": {
+                        "op": "lt",
+                        "args": [
+                          {
+                            "$": "i"
+                          },
+                          3
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "0",
+                            "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                          },
+                          "attrs": {
+                            "data-testid": "hero-stat"
+                          },
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "2xl",
+                                "Weight": "semibold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "s.value"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "s.label"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "index": "i"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "HeroSplit",
+      "names": [
+        "HeroContent"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/hero-split-media.json b/xgen/specs/organisms/hero-split-media.json
new file mode 100644
index 0000000..fa7830c
--- /dev/null
+++ b/xgen/specs/organisms/hero-split-media.json
@@ -0,0 +1,352 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.hero-split-media",
+  "name": "HeroSplitMedia",
+  "docs": "What HeroSplit shows beside the text: a picture, a picture with a floating card, a grid of four pictures with captions, or a picture with two plan cards floating over it.",
+  "records": {},
+  "props": [
+    {
+      "name": "content",
+      "type": {
+        "ts": "HeroContent"
+      },
+      "required": true,
+      "docs": "the figures, small cards, people, proof line and floating card of the hero"
+    },
+    {
+      "name": "alt",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the pictures"
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"picture\" | \"card\" | \"grid\" | \"plans\""
+      },
+      "default": "picture"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "media"
+          },
+          "picture"
+        ]
+      },
+      "then": [
+        {
+          "organism": "MediaFrame",
+          "props": {
+            "alt": {
+              "$": "alt"
+            },
+            "ratio": "4/3"
+          }
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "media"
+          },
+          "card"
+        ]
+      },
+      "then": [
+        {
+          "organism": "OfferMedia",
+          "props": {
+            "alt": {
+              "$": "alt"
+            },
+            "card": {
+              "$": "content.card"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "media"
+              },
+              "grid"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.features"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid grid-cols-2 gap-4"
+          },
+          "attrs": {
+            "data-testid": "hero-grid"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "content.features"
+              },
+              "as": "f",
+              "key": {
+                "$": "f.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      4
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "FigureBlock",
+                      "props": {
+                        "className": "flex flex-col gap-2",
+                        "testid": "hero-tile"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "organism": "MediaFrame",
+                              "props": {
+                                "alt": {
+                                  "$": "f.title"
+                                },
+                                "ratio": "1/1"
+                              }
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "f.title"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "media"
+              },
+              "plans"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "content.plans"
+                  }
+                ]
+              },
+              0
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "relative"
+          },
+          "attrs": {
+            "data-testid": "hero-media"
+          },
+          "children": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "alt"
+                },
+                "ratio": "4/3"
+              }
+            },
+            {
+              "each": {
+                "$": "content.plans"
+              },
+              "as": "p",
+              "key": {
+                "$": "p.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      2
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2",
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "absolute w-48 rounded bg-card p-4 shadow-lg",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "i"
+                                    },
+                                    0
+                                  ]
+                                },
+                                "top-8 left-4",
+                                "right-4 bottom-8"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "hero-plan"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "p.name"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "2",
+                            "Align": "center"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": "check",
+                                "Size": 16
+                              }
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "p.tagline"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "HeroSplit",
+      "names": [
+        "HeroContent"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/hero-split.json b/xgen/specs/organisms/hero-split.json
new file mode 100644
index 0000000..4b378fa
--- /dev/null
+++ b/xgen/specs/organisms/hero-split.json
@@ -0,0 +1,265 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.hero-split",
+  "name": "HeroSplit",
+  "docs": "A split hero: a badge, the heading, a lead, an extra under it and one or two actions, beside the media. Axes: extra (stats: three figures, avatars: faces and a proof line, minis: two small feature cards, quote: a quote over three figures, none), media (picture, card: a floating card on the picture, grid: four pictures with captions, plans: two plan cards on the picture), mediaSide, tone.",
+  "records": {
+    "HeroContent": [
+      {
+        "name": "stats",
+        "type": "Stat[]"
+      },
+      {
+        "name": "features",
+        "type": "Feature[]"
+      },
+      {
+        "name": "people",
+        "type": "Quote[]"
+      },
+      {
+        "name": "plans",
+        "type": "Plan[]"
+      },
+      {
+        "name": "proof",
+        "type": "string"
+      },
+      {
+        "name": "card",
+        "type": "OfferCard"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "LinkActions"
+      },
+      "required": true
+    },
+    {
+      "name": "content",
+      "type": {
+        "record": "HeroContent"
+      },
+      "required": true
+    },
+    {
+      "name": "extra",
+      "type": {
+        "ts": "\"stats\" | \"avatars\" | \"minis\" | \"quote\" | \"none\""
+      },
+      "default": "stats"
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"picture\" | \"card\" | \"grid\" | \"plans\""
+      },
+      "default": "picture"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "heading": {
+          "badge": {
+            "$": "badge"
+          },
+          "level": {
+            "$": "level"
+          }
+        },
+        "layout": "split",
+        "media": {
+          "show": true,
+          "side": {
+            "$": "mediaSide"
+          }
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "organism": "HeroSplitExtras",
+              "props": {
+                "content": {
+                  "$": "content"
+                },
+                "extra": {
+                  "$": "extra"
+                }
+              }
+            },
+            {
+              "organism": "ActionGroup",
+              "props": {
+                "primary": {
+                  "$": "actions.cta"
+                },
+                "primaryHref": {
+                  "$": "actions.href"
+                },
+                "secondary": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "actions.mode"
+                        },
+                        "two"
+                      ]
+                    },
+                    {
+                      "$": "actions.secondary"
+                    },
+                    {
+                      "op": "undef",
+                      "args": []
+                    }
+                  ]
+                },
+                "secondaryHref": {
+                  "$": "actions.secondaryHref"
+                }
+              }
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "HeroSplitMedia",
+              "props": {
+                "content": {
+                  "$": "content"
+                },
+                "alt": {
+                  "$": "title"
+                },
+                "media": {
+                  "$": "media"
+                }
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    },
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    },
+    {
+      "from": "TestimonialGrid",
+      "names": [
+        "Quote"
+      ]
+    },
+    {
+      "from": "StoreHero",
+      "names": [
+        "OfferCard"
+      ]
+    },
+    {
+      "from": "PricingCard",
+      "names": [
+        "Plan"
+      ]
+    },
+    {
+      "from": "ErrorPage",
+      "names": [
+        "LinkActions"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/icon-wall.json b/xgen/specs/organisms/icon-wall.json
new file mode 100644
index 0000000..4b2d2d1
--- /dev/null
+++ b/xgen/specs/organisms/icon-wall.json
@@ -0,0 +1,354 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.icon-wall",
+  "name": "IconWall",
+  "docs": "A dense grid of small tiles: an icon and a short label. Axes: columns (3, 4, 6), item (tile: icon above the label, chip: icon beside it), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "features",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"3\" | \"4\" | \"6\""
+      },
+      "default": "4"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"tile\" | \"chip\""
+      },
+      "default": "tile"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "askedCols",
+      "value": {
+        "op": "cond",
+        "args": [
+          {
+            "op": "and",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "item"
+                  },
+                  "chip"
+                ]
+              },
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "cols"
+                  },
+                  "6"
+                ]
+              }
+            ]
+          },
+          "2-6",
+          {
+            "op": "cond",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "cols"
+                  },
+                  "2"
+                ]
+              },
+              "2",
+              {
+                "op": "cond",
+                "args": [
+                  {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "cols"
+                      },
+                      "3"
+                    ]
+                  },
+                  "2-3",
+                  {
+                    "op": "cond",
+                    "args": [
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "cols"
+                          },
+                          "4"
+                        ]
+                      },
+                      "2-4",
+                      "3-6"
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "name": "wallCols",
+      "value": {
+        "op": "fitCols",
+        "args": [
+          {
+            "$": "askedCols"
+          },
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "features"
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "features"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "layout-grid",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "$": "wallCols"
+                    },
+                    "Class": "gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "features"
+                      },
+                      "as": "f",
+                      "key": {
+                        "$": "f.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "flex items-center gap-2",
+                                "rounded bg-card inset-ring inset-ring-border",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "item"
+                                        },
+                                        "tile"
+                                      ]
+                                    },
+                                    {
+                                      "op": "cn",
+                                      "args": [
+                                        "flex-col justify-center text-center",
+                                        {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "density"
+                                                },
+                                                "compact"
+                                              ]
+                                            },
+                                            "p-4",
+                                            "p-6"
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    "px-4 py-2"
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "item"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": {
+                                  "$": "f.icon"
+                                },
+                                "Size": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "item"
+                                        },
+                                        "tile"
+                                      ]
+                                    },
+                                    24,
+                                    16
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Weight": "semibold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "f.title"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/job-board.json b/xgen/specs/organisms/job-board.json
new file mode 100644
index 0000000..ee107e2
--- /dev/null
+++ b/xgen/specs/organisms/job-board.json
@@ -0,0 +1,475 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.job-board",
+  "name": "JobBoard",
+  "docs": "Open jobs as cards in two columns, grouped by department, or as a table: the title, the department, the place, the type, an optional salary and an apply link. Axes: layout (grid, grouped, table), salary (show, hide), tone.",
+  "records": {
+    "Job": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "dept",
+        "type": "string"
+      },
+      {
+        "name": "location",
+        "type": "string"
+      },
+      {
+        "name": "type",
+        "type": "string"
+      },
+      {
+        "name": "salary",
+        "type": "string"
+      },
+      {
+        "name": "posted",
+        "type": "string"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "Department": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      }
+    ],
+    "JobLabels": [
+      {
+        "name": "apply",
+        "type": "string"
+      },
+      {
+        "name": "caption",
+        "type": "string"
+      },
+      {
+        "name": "role",
+        "type": "string"
+      },
+      {
+        "name": "team",
+        "type": "string"
+      },
+      {
+        "name": "location",
+        "type": "string"
+      },
+      {
+        "name": "type",
+        "type": "string"
+      },
+      {
+        "name": "salary",
+        "type": "string"
+      },
+      {
+        "name": "count",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "jobs",
+      "type": {
+        "ts": "Job[]"
+      },
+      "required": true
+    },
+    {
+      "name": "departments",
+      "type": {
+        "ts": "Department[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "JobLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"grouped\" | \"table\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "salary",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "hide"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "grouped"
+              ]
+            },
+            "3xl",
+            "default"
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "jobs"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "briefcase",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "grouped"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "8",
+                        "Align": "stretch"
+                      },
+                      "attrs": {
+                        "data-testid": "groups"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "departments"
+                          },
+                          "as": "d",
+                          "key": {
+                            "$": "d.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "stretch"
+                              },
+                              "attrs": {
+                                "data-testid": "group"
+                              },
+                              "children": [
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "4",
+                                    "Align": "baseline",
+                                    "Justify": "between"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Title",
+                                      "props": {
+                                        "As": 3,
+                                        "Size": "lg",
+                                        "Weight": "bold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "d.name"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "xs",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "tpl",
+                                            "args": [
+                                              {
+                                                "$": "labels.count"
+                                              },
+                                              {
+                                                "op": "len",
+                                                "args": [
+                                                  {
+                                                    "op": "where",
+                                                    "args": [
+                                                      {
+                                                        "$": "jobs"
+                                                      },
+                                                      "dept",
+                                                      {
+                                                        "$": "d.id"
+                                                      }
+                                                    ]
+                                                  }
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "List",
+                                  "props": {
+                                    "Tag": "ul",
+                                    "Class": "flex flex-col"
+                                  },
+                                  "children": [
+                                    {
+                                      "each": {
+                                        "op": "where",
+                                        "args": [
+                                          {
+                                            "$": "jobs"
+                                          },
+                                          "dept",
+                                          {
+                                            "$": "d.id"
+                                          }
+                                        ]
+                                      },
+                                      "as": "j",
+                                      "key": {
+                                        "$": "j.id"
+                                      },
+                                      "do": [
+                                        {
+                                          "use": "ListItem",
+                                          "props": {
+                                            "Class": "flex flex-wrap items-center justify-between gap-4 border-b border-border py-4"
+                                          },
+                                          "attrs": {
+                                            "data-testid": "item"
+                                          },
+                                          "children": [
+                                            {
+                                              "use": "Stack",
+                                              "props": {
+                                                "Gap": "0"
+                                              },
+                                              "children": [
+                                                {
+                                                  "organism": "MenuEntry",
+                                                  "props": {
+                                                    "href": {
+                                                      "$": "j.href"
+                                                    },
+                                                    "className": "font-medium"
+                                                  },
+                                                  "slots": {
+                                                    "children": {
+                                                      "args": [],
+                                                      "do": [
+                                                        {
+                                                          "text": {
+                                                            "$": "j.title"
+                                                          }
+                                                        }
+                                                      ]
+                                                    }
+                                                  }
+                                                },
+                                                {
+                                                  "use": "Text",
+                                                  "props": {
+                                                    "Size": "xs",
+                                                    "Class": "text-muted-foreground"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "op": "tpl",
+                                                        "args": [
+                                                          "{0}, {1}",
+                                                          {
+                                                            "$": "j.location"
+                                                          },
+                                                          {
+                                                            "$": "j.type"
+                                                          }
+                                                        ]
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "use": "Badge",
+                                              "props": {
+                                                "Variant": "outline",
+                                                "Size": "default"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "j.type"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "organism": "JobCards",
+                      "props": {
+                        "jobs": {
+                          "$": "jobs"
+                        },
+                        "departments": {
+                          "$": "departments"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        },
+                        "layout": {
+                          "$": "layout"
+                        },
+                        "salary": {
+                          "$": "salary"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/job-cards.json b/xgen/specs/organisms/job-cards.json
new file mode 100644
index 0000000..737d670
--- /dev/null
+++ b/xgen/specs/organisms/job-cards.json
@@ -0,0 +1,616 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.job-cards",
+  "name": "JobCards",
+  "docs": "The jobs of JobBoard as cards in two columns (title, department, place, type, optional salary, posted, apply) or as a table.",
+  "records": {},
+  "props": [
+    {
+      "name": "jobs",
+      "type": {
+        "ts": "Job[]"
+      },
+      "required": true
+    },
+    {
+      "name": "departments",
+      "type": {
+        "ts": "Department[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "JobLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"grouped\" | \"table\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "salary",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "hide"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "layout"
+          },
+          "table"
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "w-full overflow-x-auto rounded inset-ring inset-ring-border"
+          },
+          "children": [
+            {
+              "use": "Table",
+              "props": {
+                "Class": "w-full text-left text-sm"
+              },
+              "attrs": {
+                "data-testid": "job-table"
+              },
+              "children": [
+                {
+                  "use": "TableCaption",
+                  "props": {
+                    "Class": "sr-only"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "labels.caption"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "TableHead",
+                  "props": {
+                    "Class": "bg-muted"
+                  },
+                  "children": [
+                    {
+                      "use": "TableRow",
+                      "children": [
+                        {
+                          "use": "TableHeadCell",
+                          "props": {
+                            "Scope": "col",
+                            "Class": "px-4 py-2"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.role"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableHeadCell",
+                          "props": {
+                            "Scope": "col",
+                            "Class": "hidden py-2 md:table-cell"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.team"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableHeadCell",
+                          "props": {
+                            "Scope": "col",
+                            "Class": "hidden py-2 sm:table-cell"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.location"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableHeadCell",
+                          "props": {
+                            "Scope": "col",
+                            "Class": "py-2"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.type"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "salary"
+                              },
+                              "show"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "TableHeadCell",
+                              "props": {
+                                "Scope": "col",
+                                "Class": "hidden py-2 md:table-cell"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.salary"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableHeadCell",
+                          "props": {
+                            "Scope": "col",
+                            "Class": "py-2 pr-4"
+                          },
+                          "children": [
+                            {
+                              "use": "Inline",
+                              "props": {
+                                "Class": "sr-only"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.apply"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "TableBody",
+                  "children": [
+                    {
+                      "each": {
+                        "$": "jobs"
+                      },
+                      "as": "j",
+                      "key": {
+                        "$": "j.id"
+                      },
+                      "do": [
+                        {
+                          "use": "TableRow",
+                          "props": {
+                            "Class": "border-t border-border"
+                          },
+                          "attrs": {
+                            "data-testid": "item"
+                          },
+                          "children": [
+                            {
+                              "use": "TableCell",
+                              "props": {
+                                "Class": "px-4 py-4 font-medium"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "j.title"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "TableCell",
+                              "props": {
+                                "Class": "hidden md:table-cell"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "op": "firstOf",
+                                    "args": [
+                                      {
+                                        "op": "where",
+                                        "args": [
+                                          {
+                                            "$": "departments"
+                                          },
+                                          "id",
+                                          {
+                                            "$": "j.dept"
+                                          }
+                                        ]
+                                      },
+                                      "name"
+                                    ]
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "TableCell",
+                              "props": {
+                                "Class": "hidden sm:table-cell"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "j.location"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "TableCell",
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "j.type"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "when": {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "salary"
+                                  },
+                                  "show"
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "use": "TableCell",
+                                  "props": {
+                                    "Class": "hidden md:table-cell"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "j.salary"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "TableCell",
+                              "props": {
+                                "Class": "pr-4 text-right"
+                              },
+                              "children": [
+                                {
+                                  "organism": "MenuEntry",
+                                  "props": {
+                                    "href": {
+                                      "$": "j.href"
+                                    },
+                                    "className": "font-medium"
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "text": {
+                                            "$": "labels.apply"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "else": [
+        {
+          "use": "Grid",
+          "props": {
+            "Cols": "1-2",
+            "Class": "gap-4"
+          },
+          "attrs": {
+            "data-testid": "items"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "jobs"
+              },
+              "as": "j",
+              "key": {
+                "$": "j.id"
+              },
+              "do": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "4",
+                    "Class": "rounded bg-card inset-ring inset-ring-border p-6"
+                  },
+                  "attrs": {
+                    "data-testid": "item"
+                  },
+                  "children": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "lg",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "j.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "4",
+                            "Class": "flex-wrap text-sm text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "center"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "briefcase",
+                                    "Size": 16
+                                  }
+                                },
+                                {
+                                  "use": "Inline",
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "j.type"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "center"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "map-pin",
+                                    "Size": 16
+                                  }
+                                },
+                                {
+                                  "use": "Inline",
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "j.location"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "center"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "calendar",
+                                    "Size": 16
+                                  }
+                                },
+                                {
+                                  "use": "Inline",
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "j.posted"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "salary"
+                          },
+                          "show"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "base",
+                            "Weight": "semibold"
+                          },
+                          "attrs": {
+                            "data-testid": "salary"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "j.salary"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "center",
+                        "Justify": "between",
+                        "Class": "mt-auto"
+                      },
+                      "children": [
+                        {
+                          "use": "Badge",
+                          "props": {
+                            "Variant": "secondary",
+                            "Size": "default"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "firstOf",
+                                "args": [
+                                  {
+                                    "op": "where",
+                                    "args": [
+                                      {
+                                        "$": "departments"
+                                      },
+                                      "id",
+                                      {
+                                        "$": "j.dept"
+                                      }
+                                    ]
+                                  },
+                                  "name"
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "organism": "MenuEntry",
+                          "props": {
+                            "href": {
+                              "$": "j.href"
+                            },
+                            "className": "inline-flex items-center gap-2 text-sm font-medium"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "text": {
+                                    "$": "labels.apply"
+                                  }
+                                },
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "arrow-right",
+                                    "Size": 16
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "JobBoard",
+      "names": [
+        "Job",
+        "Department",
+        "JobLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/kanban-board.json b/xgen/specs/organisms/kanban-board.json
new file mode 100644
index 0000000..374b771
--- /dev/null
+++ b/xgen/specs/organisms/kanban-board.json
@@ -0,0 +1,423 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.kanban-board",
+  "name": "KanbanBoard",
+  "docs": "Work items in lanes. Each lane has a title, a count and its cards; a card has a title, an optional tag and the person it belongs to. Axes: card (simple, detail: tag and person), cols (2, 3), tone, density. Moving a card between lanes is a port contract.",
+  "records": {
+    "Lane": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "key",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      }
+    ],
+    "BoardCard": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "lane",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "tag",
+        "type": "string"
+      },
+      {
+        "name": "who",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lanes",
+      "type": {
+        "ts": "Lane[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "cards",
+      "type": {
+        "ts": "BoardCard[]"
+      },
+      "required": true
+    },
+    {
+      "name": "countLabel",
+      "type": "string",
+      "required": true,
+      "docs": "template of the card count of a lane, e.g. `{0} cards`"
+    },
+    {
+      "name": "card",
+      "type": {
+        "ts": "\"simple\" | \"detail\""
+      },
+      "default": "detail"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"2\" | \"3\""
+      },
+      "default": "3"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "lanes"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "kanban",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "cols"
+                            },
+                            "2"
+                          ]
+                        },
+                        "1-2",
+                        "1-3"
+                      ]
+                    },
+                    "Class": "items-start gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "lanes"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "lanes"
+                      },
+                      "as": "lane",
+                      "key": {
+                        "$": "lane.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "stretch",
+                            "Class": "rounded bg-muted p-4"
+                          },
+                          "attrs": {
+                            "data-testid": "lane"
+                          },
+                          "children": [
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "center",
+                                "Justify": "between"
+                              },
+                              "children": [
+                                {
+                                  "use": "Title",
+                                  "props": {
+                                    "As": 3,
+                                    "Size": "base",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "lane.title"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "xs",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "op": "tpl",
+                                        "args": [
+                                          {
+                                            "$": "countLabel"
+                                          },
+                                          {
+                                            "op": "len",
+                                            "args": [
+                                              {
+                                                "op": "where",
+                                                "args": [
+                                                  {
+                                                    "$": "cards"
+                                                  },
+                                                  "lane",
+                                                  {
+                                                    "$": "lane.key"
+                                                  }
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "List",
+                              "props": {
+                                "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                              },
+                              "children": [
+                                {
+                                  "each": {
+                                    "op": "where",
+                                    "args": [
+                                      {
+                                        "$": "cards"
+                                      },
+                                      "lane",
+                                      {
+                                        "$": "lane.key"
+                                      }
+                                    ]
+                                  },
+                                  "as": "c",
+                                  "key": {
+                                    "$": "c.id"
+                                  },
+                                  "do": [
+                                    {
+                                      "use": "ListItem",
+                                      "props": {
+                                        "Class": {
+                                          "op": "cn",
+                                          "args": [
+                                            "flex flex-col rounded bg-card inset-ring inset-ring-border",
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "density"
+                                                    },
+                                                    "compact"
+                                                  ]
+                                                },
+                                                "gap-2 p-2",
+                                                "gap-2 p-4"
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "attrs": {
+                                        "data-testid": "item"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Weight": "semibold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "c.title"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "when": {
+                                            "op": "eq",
+                                            "args": [
+                                              {
+                                                "$": "card"
+                                              },
+                                              "detail"
+                                            ]
+                                          },
+                                          "then": [
+                                            {
+                                              "use": "Group",
+                                              "props": {
+                                                "Gap": "2",
+                                                "Align": "center",
+                                                "Justify": "between",
+                                                "Class": "flex-wrap"
+                                              },
+                                              "children": [
+                                                {
+                                                  "organism": "Pill",
+                                                  "props": {
+                                                    "tone": "blue",
+                                                    "icon": "tag"
+                                                  },
+                                                  "slots": {
+                                                    "children": {
+                                                      "args": [],
+                                                      "do": [
+                                                        {
+                                                          "text": {
+                                                            "$": "c.tag"
+                                                          }
+                                                        }
+                                                      ]
+                                                    }
+                                                  }
+                                                },
+                                                {
+                                                  "use": "Text",
+                                                  "props": {
+                                                    "Size": "xs",
+                                                    "Class": "text-muted-foreground"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "$": "c.who"
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/logo-cloud.json b/xgen/specs/organisms/logo-cloud.json
new file mode 100644
index 0000000..dfe076b
--- /dev/null
+++ b/xgen/specs/organisms/logo-cloud.json
@@ -0,0 +1,361 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.logo-cloud",
+  "name": "LogoCloud",
+  "docs": "A heading and the names of customers or partners as Lucide glyphs with a name. Axes: layout (grid, row), columns (2, 3, 4), item (name, icon only, tile), density, tone.",
+  "records": {
+    "Logo": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "logos",
+      "type": {
+        "ts": "Logo[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"row\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"2\" | \"3\" | \"4\""
+      },
+      "default": "4"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"name\" | \"icon\" | \"tile\""
+      },
+      "default": "name"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "logos"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "title"
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "density": {
+              "$": "density"
+            },
+            "align": "center",
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "building-2",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "row"
+            ]
+          },
+          "then": [
+            {
+              "organism": "LogoRibbon",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "logos": {
+                  "$": "logos"
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "density": {
+                  "$": "density"
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              }
+            }
+          ],
+          "else": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "density": {
+                  "$": "density"
+                },
+                "align": "center",
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "cols"
+                                },
+                                "2"
+                              ]
+                            },
+                            "2",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "cols"
+                                    },
+                                    "3"
+                                  ]
+                                },
+                                "2-3",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "cols"
+                                        },
+                                        "4"
+                                      ]
+                                    },
+                                    "2-4",
+                                    "3-6"
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        "Class": "gap-4"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "logos"
+                          },
+                          "as": "logo",
+                          "key": {
+                            "$": "logo.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "center",
+                                "Justify": "center",
+                                "Class": {
+                                  "op": "cn",
+                                  "args": [
+                                    "text-muted-foreground",
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "item"
+                                            },
+                                            "tile"
+                                          ]
+                                        },
+                                        "flex-col rounded p-4 inset-ring inset-ring-border",
+                                        ""
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": {
+                                      "$": "logo.icon"
+                                    },
+                                    "Size": 24
+                                  }
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": "semibold",
+                                    "Class": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "item"
+                                            },
+                                            "icon"
+                                          ]
+                                        },
+                                        "sr-only",
+                                        ""
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "logo.name"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/logo-ribbon.json b/xgen/specs/organisms/logo-ribbon.json
new file mode 100644
index 0000000..1cf6d8a
--- /dev/null
+++ b/xgen/specs/organisms/logo-ribbon.json
@@ -0,0 +1,176 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.logo-ribbon",
+  "name": "LogoRibbon",
+  "docs": "A heading over one centered row of logo slots (LogoSlot); the row and slot sizes come from the default preset.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "logos",
+      "type": {
+        "ts": "Logo[]"
+      },
+      "required": true
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "measure": "fill",
+        "align": "center",
+        "className": "py-0",
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "6",
+                "Align": "center"
+              },
+              "attrs": {
+                "data-testid": "logos-block"
+              },
+              "children": [
+                {
+                  "use": "Title",
+                  "props": {
+                    "As": 2,
+                    "Size": "xl",
+                    "Weight": "semibold",
+                    "Class": "leading-7"
+                  },
+                  "attrs": {
+                    "id": {
+                      "op": "add",
+                      "args": [
+                        {
+                          "$": "id"
+                        },
+                        "-title"
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "title"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "0",
+                    "Justify": "center",
+                    "Align": "start",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "flex w-full flex-wrap",
+                        {
+                          "op": "preset",
+                          "args": [
+                            "defaults",
+                            "logos.row"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "logos"
+                      },
+                      "as": "logo",
+                      "key": {
+                        "$": "logo.id"
+                      },
+                      "do": [
+                        {
+                          "organism": "LogoSlot",
+                          "props": {
+                            "name": {
+                              "$": "logo.name"
+                            },
+                            "icon": {
+                              "$": "logo.icon"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "LogoCloud",
+      "names": [
+        "Logo"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/logo-slot.json b/xgen/specs/organisms/logo-slot.json
new file mode 100644
index 0000000..cfab8a1
--- /dev/null
+++ b/xgen/specs/organisms/logo-slot.json
@@ -0,0 +1,82 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.logo-slot",
+  "name": "LogoSlot",
+  "docs": "One logo of a logo ribbon: a fixed-size slot with a Lucide glyph; the name is read by screen readers only.",
+  "records": {},
+  "props": [
+    {
+      "name": "name",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "icon",
+      "type": "string",
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex shrink-0 items-center justify-center text-muted-foreground",
+            {
+              "op": "preset",
+              "args": [
+                "defaults",
+                "logos.slot"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "item",
+        "data-slot": "logo-slot"
+      },
+      "children": [
+        {
+          "use": "LucideIcon",
+          "props": {
+            "Name": {
+              "$": "icon"
+            },
+            "Size": {
+              "op": "preset",
+              "args": [
+                "defaults",
+                "logos.glyph"
+              ]
+            }
+          }
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Weight": "semibold",
+            "Class": "sr-only"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "name"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/media-contacts.json b/xgen/specs/organisms/media-contacts.json
new file mode 100644
index 0000000..a37877a
--- /dev/null
+++ b/xgen/specs/organisms/media-contacts.json
@@ -0,0 +1,205 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.media-contacts",
+  "name": "MediaContacts",
+  "docs": "The ways to get help of MediaList as wide outline buttons, then three support figures as rows in a card.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "MediaExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "MediaListLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "6",
+        "Align": "stretch"
+      },
+      "children": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2",
+            "Align": "stretch"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.list"
+                  }
+                }
+              ]
+            },
+            {
+              "each": {
+                "$": "extras.channels"
+              },
+              "as": "c",
+              "key": {
+                "$": "c.id"
+              },
+              "do": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "default",
+                    "Href": {
+                      "$": "c.href"
+                    },
+                    "Class": "w-full gap-2"
+                  },
+                  "attrs": {
+                    "data-testid": "media-channel"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": {
+                          "$": "c.icon"
+                        },
+                        "Size": 16
+                      }
+                    },
+                    {
+                      "text": {
+                        "$": "c.title"
+                      }
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        },
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2",
+            "Align": "stretch",
+            "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.figures"
+                  }
+                }
+              ]
+            },
+            {
+              "each": {
+                "$": "extras.stats"
+              },
+              "as": "s",
+              "key": {
+                "$": "s.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      3
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "center",
+                        "Justify": "between"
+                      },
+                      "attrs": {
+                        "data-testid": "media-stat"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.label"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.value"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MediaList",
+      "names": [
+        "MediaExtras",
+        "MediaListLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/media-figures.json b/xgen/specs/organisms/media-figures.json
new file mode 100644
index 0000000..6c39dcd
--- /dev/null
+++ b/xgen/specs/organisms/media-figures.json
@@ -0,0 +1,159 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.media-figures",
+  "name": "MediaFigures",
+  "docs": "The figures of MediaList: four in two columns, centered, or three in a row.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "MediaExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "mode",
+      "type": {
+        "ts": "\"grid\" | \"row\""
+      },
+      "default": "grid"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "mode"
+                },
+                "grid"
+              ]
+            },
+            "grid grid-cols-2 gap-6 text-center",
+            "grid grid-cols-3 gap-6"
+          ]
+        }
+      },
+      "children": [
+        {
+          "each": {
+            "$": "extras.stats"
+          },
+          "as": "s",
+          "key": {
+            "$": "s.id"
+          },
+          "do": [
+            {
+              "when": {
+                "op": "lt",
+                "args": [
+                  {
+                    "$": "i"
+                  },
+                  {
+                    "op": "cond",
+                    "args": [
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "mode"
+                          },
+                          "grid"
+                        ]
+                      },
+                      4,
+                      3
+                    ]
+                  }
+                ]
+              },
+              "then": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "0",
+                    "Align": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "mode"
+                            },
+                            "grid"
+                          ]
+                        },
+                        "center",
+                        "start"
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "media-stat"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "3xl",
+                        "Weight": "bold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "s.value"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "s.label"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MediaList",
+      "names": [
+        "MediaExtras",
+        "MediaListLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/media-list.json b/xgen/specs/organisms/media-list.json
new file mode 100644
index 0000000..8dbf657
--- /dev/null
+++ b/xgen/specs/organisms/media-list.json
@@ -0,0 +1,594 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.media-list",
+  "name": "MediaList",
+  "docs": "A list or figures beside a picture. Axes: layout (figures: four figures in two columns, proof: three figures and a featured review, steps: numbered steps, posts: the latest posts, topics: topic rows with counts, contact: contact buttons and support figures), mediaSide, tone. The actions follow every layout but contact.",
+  "records": {
+    "MediaExtras": [
+      {
+        "name": "stats",
+        "type": "Stat[]"
+      },
+      {
+        "name": "steps",
+        "type": "Step[]"
+      },
+      {
+        "name": "posts",
+        "type": "Post[]"
+      },
+      {
+        "name": "topics",
+        "type": "Category[]"
+      },
+      {
+        "name": "channels",
+        "type": "Feature[]"
+      },
+      {
+        "name": "reviews",
+        "type": "Review[]"
+      }
+    ],
+    "MediaListLabels": [
+      {
+        "name": "list",
+        "type": "string"
+      },
+      {
+        "name": "count",
+        "type": "string"
+      },
+      {
+        "name": "minutes",
+        "type": "string"
+      },
+      {
+        "name": "featured",
+        "type": "string"
+      },
+      {
+        "name": "rating",
+        "type": "string"
+      },
+      {
+        "name": "figures",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "extras",
+      "type": {
+        "record": "MediaExtras"
+      },
+      "required": true,
+      "docs": "the figures, steps, posts, topics, channels and reviews"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "MediaListLabels"
+      },
+      "required": true,
+      "docs": "the heading of the list; templates: count `{0} articles`, minutes `{0} min read`, rating `{0} out of 5`; the featured-review and figures headings"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "LinkActions"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"figures\" | \"proof\" | \"steps\" | \"posts\" | \"topics\" | \"contact\""
+      },
+      "default": "figures"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "heading": {
+          "badge": {
+            "$": "badge"
+          }
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "layout": "split",
+        "media": {
+          "show": true,
+          "side": {
+            "$": "mediaSide"
+          }
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "or",
+                "args": [
+                  {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "figures"
+                    ]
+                  },
+                  {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "proof"
+                    ]
+                  }
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "extras.stats"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "MediaFigures",
+                      "props": {
+                        "extras": {
+                          "$": "extras"
+                        },
+                        "mode": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "proof"
+                              ]
+                            },
+                            "row",
+                            "grid"
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "proof"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "extras.reviews"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "MediaReview",
+                      "props": {
+                        "extras": {
+                          "$": "extras"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "steps"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "extras.steps"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "MediaSteps",
+                      "props": {
+                        "extras": {
+                          "$": "extras"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "posts"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "extras.posts"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "MediaPosts",
+                      "props": {
+                        "extras": {
+                          "$": "extras"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "topics"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "extras.topics"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "MediaTopics",
+                      "props": {
+                        "extras": {
+                          "$": "extras"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "contact"
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "extras.channels"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "MediaContacts",
+                      "props": {
+                        "extras": {
+                          "$": "extras"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "contact"
+                ]
+              },
+              "then": [
+                {
+                  "organism": "ActionGroup",
+                  "props": {
+                    "primary": {
+                      "$": "actions.cta"
+                    },
+                    "primaryHref": {
+                      "$": "actions.href"
+                    },
+                    "secondary": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "actions.mode"
+                            },
+                            "two"
+                          ]
+                        },
+                        {
+                          "$": "actions.secondary"
+                        },
+                        {
+                          "op": "undef",
+                          "args": []
+                        }
+                      ]
+                    },
+                    "secondaryHref": {
+                      "$": "actions.secondaryHref"
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "title"
+                },
+                "ratio": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "or",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "steps"
+                          ]
+                        },
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "topics"
+                          ]
+                        }
+                      ]
+                    },
+                    "1/1",
+                    "4/3"
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    },
+    {
+      "from": "StepsList",
+      "names": [
+        "Step"
+      ]
+    },
+    {
+      "from": "PostCard",
+      "names": [
+        "Post"
+      ]
+    },
+    {
+      "from": "CategoryNav",
+      "names": [
+        "Category"
+      ]
+    },
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    },
+    {
+      "from": "ReviewList",
+      "names": [
+        "Review"
+      ]
+    },
+    {
+      "from": "ErrorPage",
+      "names": [
+        "LinkActions"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/media-posts.json b/xgen/specs/organisms/media-posts.json
new file mode 100644
index 0000000..3ed424d
--- /dev/null
+++ b/xgen/specs/organisms/media-posts.json
@@ -0,0 +1,168 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.media-posts",
+  "name": "MediaPosts",
+  "docs": "The latest posts of MediaList as rows: a dot, the title, the date and reading time.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "MediaExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "MediaListLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch"
+      },
+      "children": [
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Weight": "semibold"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.list"
+              }
+            }
+          ]
+        },
+        {
+          "each": {
+            "$": "extras.posts"
+          },
+          "as": "p",
+          "key": {
+            "$": "p.id"
+          },
+          "do": [
+            {
+              "when": {
+                "op": "lt",
+                "args": [
+                  {
+                    "$": "i"
+                  },
+                  3
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "start"
+                  },
+                  "attrs": {
+                    "data-testid": "media-post"
+                  },
+                  "children": [
+                    {
+                      "use": "Inline",
+                      "props": {
+                        "Class": "mt-2 size-2 shrink-0 rounded-full bg-primary"
+                      }
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0"
+                      },
+                      "children": [
+                        {
+                          "organism": "MenuEntry",
+                          "props": {
+                            "href": {
+                              "$": "p.href"
+                            },
+                            "className": "text-sm font-medium",
+                            "size": "sm"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "text": {
+                                    "$": "p.title"
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  "{0} · {1}",
+                                  {
+                                    "$": "p.date"
+                                  },
+                                  {
+                                    "op": "tpl",
+                                    "args": [
+                                      {
+                                        "$": "labels.minutes"
+                                      },
+                                      {
+                                        "$": "p.minutes"
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MediaList",
+      "names": [
+        "MediaExtras",
+        "MediaListLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/media-review.json b/xgen/specs/organisms/media-review.json
new file mode 100644
index 0000000..b712120
--- /dev/null
+++ b/xgen/specs/organisms/media-review.json
@@ -0,0 +1,165 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.media-review",
+  "name": "MediaReview",
+  "docs": "The featured review of MediaList in a muted card: a label with the stars, the text in quotes and the author.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "MediaExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "MediaListLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "each": {
+        "$": "extras.reviews"
+      },
+      "as": "r",
+      "key": {
+        "$": "r.id"
+      },
+      "do": [
+        {
+          "when": {
+            "op": "lt",
+            "args": [
+              {
+                "$": "i"
+              },
+              1
+            ]
+          },
+          "then": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "4",
+                "Align": "stretch",
+                "Class": "rounded bg-muted p-6"
+              },
+              "attrs": {
+                "data-testid": "media-review"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Justify": "between",
+                    "Class": "flex-wrap"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Weight": "medium"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.featured"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "Rating",
+                      "props": {
+                        "value": {
+                          "$": "r.rating"
+                        },
+                        "label": {
+                          "op": "tpl",
+                          "args": [
+                            {
+                              "$": "labels.rating"
+                            },
+                            {
+                              "$": "r.rating"
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "base"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "op": "tpl",
+                        "args": [
+                          "“{0}”",
+                          {
+                            "$": "r.text"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "op": "tpl",
+                        "args": [
+                          "{0} · {1}",
+                          {
+                            "$": "r.author"
+                          },
+                          {
+                            "$": "r.date"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "index": "i"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MediaList",
+      "names": [
+        "MediaExtras",
+        "MediaListLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/media-steps.json b/xgen/specs/organisms/media-steps.json
new file mode 100644
index 0000000..c8fb5cc
--- /dev/null
+++ b/xgen/specs/organisms/media-steps.json
@@ -0,0 +1,173 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.media-steps",
+  "name": "MediaSteps",
+  "docs": "The steps of MediaList as numbered rows: the number, a glyph, the title and the text.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "MediaExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "MediaListLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch"
+      },
+      "children": [
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Weight": "semibold"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.list"
+              }
+            }
+          ]
+        },
+        {
+          "each": {
+            "$": "extras.steps"
+          },
+          "as": "s",
+          "key": {
+            "$": "s.id"
+          },
+          "do": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "4",
+                "Align": "start"
+              },
+              "attrs": {
+                "data-testid": "media-step"
+              },
+              "children": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Weight": "semibold",
+                    "Class": "w-6 shrink-0 text-primary"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "op": "tpl",
+                        "args": [
+                          "0{0}",
+                          {
+                            "op": "str",
+                            "args": [
+                              {
+                                "op": "add",
+                                "args": [
+                                  {
+                                    "$": "i"
+                                  },
+                                  1
+                                ]
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Inline",
+                  "props": {
+                    "Class": "flex size-6 shrink-0 items-center justify-center text-primary"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": {
+                          "$": "s.icon"
+                        },
+                        "Size": 16
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "0"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Weight": "semibold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "s.title"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "s.text"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MediaList",
+      "names": [
+        "MediaExtras",
+        "MediaListLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/media-topics.json b/xgen/specs/organisms/media-topics.json
new file mode 100644
index 0000000..16b57ae
--- /dev/null
+++ b/xgen/specs/organisms/media-topics.json
@@ -0,0 +1,177 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.media-topics",
+  "name": "MediaTopics",
+  "docs": "The topics of MediaList as card rows: a glyph tile, the name, the count and an arrow.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "MediaExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "MediaListLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch"
+      },
+      "children": [
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Weight": "semibold"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.list"
+              }
+            }
+          ]
+        },
+        {
+          "each": {
+            "$": "extras.topics"
+          },
+          "as": "c",
+          "key": {
+            "$": "c.id"
+          },
+          "do": [
+            {
+              "when": {
+                "op": "lt",
+                "args": [
+                  {
+                    "$": "i"
+                  },
+                  5
+                ]
+              },
+              "then": [
+                {
+                  "organism": "MenuEntry",
+                  "props": {
+                    "href": {
+                      "$": "c.href"
+                    },
+                    "className": "rounded bg-card inset-ring inset-ring-border flex w-full items-center gap-4 p-4",
+                    "variant": "block",
+                    "testid": "media-topic",
+                    "block": true
+                  },
+                  "slots": {
+                    "children": {
+                      "args": [],
+                      "do": [
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": "flex size-8 shrink-0 items-center justify-center rounded bg-primary text-primary-foreground"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": {
+                                  "$": "c.icon"
+                                },
+                                "Size": 16
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "0",
+                            "Class": "min-w-0 flex-1"
+                          },
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Weight": "semibold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "c.name"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "op": "tpl",
+                                    "args": [
+                                      {
+                                        "$": "labels.count"
+                                      },
+                                      {
+                                        "$": "c.count"
+                                      }
+                                    ]
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "arrow-right",
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MediaList",
+      "names": [
+        "MediaExtras",
+        "MediaListLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/mega-menu.json b/xgen/specs/organisms/mega-menu.json
new file mode 100644
index 0000000..662a03d
--- /dev/null
+++ b/xgen/specs/organisms/mega-menu.json
@@ -0,0 +1,576 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.mega-menu",
+  "name": "MegaMenu",
+  "docs": "A top bar whose first item opens a wide panel of link groups, each with an icon and a list, and an optional promo card. The page keeps `open`; opening on hover or click is a port contract. Axes: panel (open, closed), cols (2, 3), promo (none, card).",
+  "records": {
+    "MegaGroup": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "links",
+        "type": "NavLink[]"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "brand",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "brandHref",
+      "type": "string",
+      "docs": "the address of the home page; none: the brand is text"
+    },
+    {
+      "name": "trigger",
+      "type": "string",
+      "required": true,
+      "docs": "text of the item that opens the panel"
+    },
+    {
+      "name": "links",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "required": true,
+      "docs": "the other items of the bar"
+    },
+    {
+      "name": "groups",
+      "type": {
+        "ts": "MegaGroup[]"
+      },
+      "required": true
+    },
+    {
+      "name": "promoTitle",
+      "type": "string"
+    },
+    {
+      "name": "promoText",
+      "type": "string"
+    },
+    {
+      "name": "panel",
+      "type": {
+        "ts": "\"open\" | \"closed\""
+      },
+      "default": "open"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"2\" | \"3\""
+      },
+      "default": "3"
+    },
+    {
+      "name": "promo",
+      "type": {
+        "ts": "\"none\" | \"card\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "header",
+        "Class": "relative border-b border-border bg-background"
+      },
+      "attrs": {
+        "data-testid": "mega-menu",
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                "flex flex-wrap items-center gap-6 py-4"
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "organism": "MenuEntry",
+              "props": {
+                "href": {
+                  "$": "brandHref"
+                },
+                "className": "text-lg font-medium",
+                "testid": "brand"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "text": {
+                        "$": "brand"
+                      }
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "organism": "NavBlock",
+              "props": {
+                "label": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "landmarkLabel"
+                    },
+                    {
+                      "op": "uniq",
+                      "args": [
+                        {
+                          "op": "tpl",
+                          "args": [
+                            "{0}, {1}",
+                            {
+                              "$": "label"
+                            },
+                            {
+                              "$": "landmarkLabel"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "$": "label"
+                    }
+                  ]
+                },
+                "className": "flex-1"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "center",
+                        "Class": "flex-wrap"
+                      },
+                      "children": [
+                        {
+                          "use": "ButtonPlain",
+                          "props": {
+                            "Type": "button",
+                            "Class": "inline-flex items-center gap-2 text-sm font-semibold"
+                          },
+                          "attrs": {
+                            "aria-expanded": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "panel"
+                                    },
+                                    "open"
+                                  ]
+                                },
+                                "true",
+                                "false"
+                              ]
+                            },
+                            "data-testid": "mega-trigger"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "trigger"
+                              }
+                            },
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": "chevron-down",
+                                "Size": 16
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "each": {
+                            "$": "links"
+                          },
+                          "as": "l",
+                          "key": {
+                            "$": "l.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "MenuEntry",
+                              "props": {
+                                "href": {
+                                  "$": "l.href"
+                                },
+                                "className": "text-sm",
+                                "current": {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "l.id"
+                                    },
+                                    ""
+                                  ]
+                                },
+                                "testid": "nav-link"
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "text": {
+                                        "$": "l.name"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "panel"
+          },
+          "open"
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "border-t border-border bg-card"
+          },
+          "attrs": {
+            "data-testid": "mega-panel"
+          },
+          "children": [
+            {
+              "use": "Container",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "mx-auto w-full max-w-6xl px-4",
+                    "grid gap-8 py-6",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "promo"
+                            },
+                            "card"
+                          ]
+                        },
+                        "md:grid-cols-[1fr_16rem]",
+                        ""
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-slot": "container"
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "groups"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "cols"
+                                },
+                                "2"
+                              ]
+                            },
+                            "1-2",
+                            "1-3"
+                          ]
+                        },
+                        "Class": "gap-6"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "groups"
+                          },
+                          "as": "g",
+                          "key": {
+                            "$": "g.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "2"
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "2",
+                                    "Align": "center"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": {
+                                          "$": "g.icon"
+                                        },
+                                        "Size": 16
+                                      }
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "g.title"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "List",
+                                  "props": {
+                                    "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                                  },
+                                  "children": [
+                                    {
+                                      "each": {
+                                        "$": "g.links"
+                                      },
+                                      "as": "item",
+                                      "key": {
+                                        "$": "item.id"
+                                      },
+                                      "do": [
+                                        {
+                                          "use": "ListItem",
+                                          "children": [
+                                            {
+                                              "organism": "MenuEntry",
+                                              "props": {
+                                                "href": {
+                                                  "$": "item.href"
+                                                },
+                                                "className": "text-sm text-muted-foreground"
+                                              },
+                                              "slots": {
+                                                "children": {
+                                                  "args": [],
+                                                  "do": [
+                                                    {
+                                                      "text": {
+                                                        "$": "item.name"
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "promo"
+                      },
+                      "card"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2",
+                        "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                      },
+                      "attrs": {
+                        "data-testid": "promo"
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "op": "coalesce",
+                              "args": [
+                                {
+                                  "$": "promoTitle"
+                                },
+                                ""
+                              ]
+                            },
+                            "ratio": "4/3"
+                          }
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "base",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "promoTitle"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "promoText"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/member-row.json b/xgen/specs/organisms/member-row.json
new file mode 100644
index 0000000..e36a902
--- /dev/null
+++ b/xgen/specs/organisms/member-row.json
@@ -0,0 +1,303 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.member-row",
+  "name": "MemberRow",
+  "docs": "One member of TeamGrid beside a small portrait: the name, the role, then the department and the place (detailed, directory), the bio (detailed) and the skills (detailed, list).",
+  "records": {},
+  "props": [
+    {
+      "name": "member",
+      "type": {
+        "ts": "Member"
+      },
+      "required": true
+    },
+    {
+      "name": "depts",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"cards\" | \"minimal\" | \"detailed\" | \"list\" | \"directory\""
+      },
+      "default": "list",
+      "docs": "the TeamGrid layout; cards and minimal draw as a list row"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Group",
+      "props": {
+        "Gap": "4",
+        "Align": "start",
+        "Class": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "detailed"
+              ]
+            },
+            "rounded bg-card inset-ring inset-ring-border flex-col p-6",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "layout"
+                    },
+                    "directory"
+                  ]
+                },
+                "rounded bg-card inset-ring inset-ring-border p-4",
+                "border-b border-border pb-4"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "item"
+      },
+      "children": [
+        {
+          "organism": "MediaFrame",
+          "props": {
+            "alt": {
+              "$": "member.name"
+            },
+            "ratio": "1/1",
+            "className": {
+              "op": "cn",
+              "args": [
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "detailed"
+                      ]
+                    },
+                    "size-16",
+                    "size-12"
+                  ]
+                },
+                "shrink-0"
+              ]
+            }
+          }
+        },
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2",
+            "Class": "min-w-0 flex-1"
+          },
+          "children": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "0"
+              },
+              "children": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "base",
+                    "Weight": "semibold"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "member.name"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "member.role"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "list"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "center",
+                    "Class": "flex-wrap text-xs text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "use": "Badge",
+                      "props": {
+                        "Variant": "outline",
+                        "Size": "sm"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "op": "at",
+                            "args": [
+                              {
+                                "$": "depts"
+                              },
+                              {
+                                "$": "member.dept"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "map-pin",
+                        "Size": 16
+                      }
+                    },
+                    {
+                      "use": "Inline",
+                      "children": [
+                        {
+                          "text": {
+                            "$": "member.location"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "detailed"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "member.bio"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "directory"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Class": "flex-wrap"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "member.skills"
+                      },
+                      "as": "k",
+                      "key": {
+                        "$": "k"
+                      },
+                      "do": [
+                        {
+                          "use": "Badge",
+                          "props": {
+                            "Variant": "secondary",
+                            "Size": "sm"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "k"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "TeamGrid",
+      "names": [
+        "Member"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/menu-entry.json b/xgen/specs/organisms/menu-entry.json
new file mode 100644
index 0000000..9d5cb9f
--- /dev/null
+++ b/xgen/specs/organisms/menu-entry.json
@@ -0,0 +1,177 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.menu-entry",
+  "name": "MenuEntry",
+  "docs": "One entry of a menu: a link to its address, or, without one, its content as text in the same box (the magazine routes nothing, so it shows text). current marks the page the entry stands for (aria-current) either way.",
+  "records": {},
+  "props": [
+    {
+      "name": "href",
+      "type": "string",
+      "docs": "the address; none: text, not a link"
+    },
+    {
+      "name": "current",
+      "type": "boolean",
+      "default": false,
+      "docs": "the entry of the current page"
+    },
+    {
+      "name": "variant",
+      "type": {
+        "ts": "\"default\" | \"muted\" | \"block\""
+      },
+      "default": "default",
+      "docs": "the look of the link"
+    },
+    {
+      "name": "size",
+      "type": {
+        "ts": "\"default\" | \"sm\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "testid",
+      "type": "string",
+      "docs": "the test id of the entry"
+    },
+    {
+      "name": "block",
+      "type": "boolean",
+      "default": false,
+      "docs": "the content holds block elements: without an address it sits in a div, not a span"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "$": "href"
+      },
+      "then": [
+        {
+          "use": "Link",
+          "props": {
+            "Href": {
+              "$": "href"
+            },
+            "Variant": {
+              "$": "variant"
+            },
+            "Size": {
+              "$": "size"
+            },
+            "AriaCurrent": {
+              "op": "cond",
+              "args": [
+                {
+                  "$": "current"
+                },
+                "page",
+                {
+                  "op": "undef",
+                  "args": []
+                }
+              ]
+            },
+            "Class": {
+              "$": "className"
+            }
+          },
+          "attrs": {
+            "data-testid": {
+              "$": "testid"
+            }
+          },
+          "children": [
+            {
+              "slot": "children"
+            }
+          ]
+        }
+      ],
+      "else": [
+        {
+          "when": {
+            "$": "block"
+          },
+          "then": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "$": "className"
+                }
+              },
+              "attrs": {
+                "aria-current": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "current"
+                    },
+                    "page",
+                    {
+                      "op": "undef",
+                      "args": []
+                    }
+                  ]
+                },
+                "data-testid": {
+                  "$": "testid"
+                }
+              },
+              "children": [
+                {
+                  "slot": "children"
+                }
+              ]
+            }
+          ],
+          "else": [
+            {
+              "use": "Inline",
+              "props": {
+                "Class": {
+                  "$": "className"
+                }
+              },
+              "attrs": {
+                "aria-current": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "current"
+                    },
+                    "page",
+                    {
+                      "op": "undef",
+                      "args": []
+                    }
+                  ]
+                },
+                "data-testid": {
+                  "$": "testid"
+                }
+              },
+              "children": [
+                {
+                  "slot": "children"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/metric-row.json b/xgen/specs/organisms/metric-row.json
new file mode 100644
index 0000000..30fbce9
--- /dev/null
+++ b/xgen/specs/organisms/metric-row.json
@@ -0,0 +1,304 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.metric-row",
+  "name": "MetricRow",
+  "docs": "Dashboard counters in a row or a grid: tiles with an icon, a number and a caption, or compact figures. Axes: columns (2, 4), item (tile, compact), tone (default, muted), density (default, compact).",
+  "records": {
+    "Metric": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "hint",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "metrics",
+      "type": {
+        "ts": "Metric[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"2\" | \"4\""
+      },
+      "default": "4"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"tile\" | \"compact\""
+      },
+      "default": "tile"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "metrics"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "gauge",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "cols"
+                            },
+                            "2"
+                          ]
+                        },
+                        "1-2",
+                        "1-4"
+                      ]
+                    },
+                    "Class": "gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "metrics"
+                      },
+                      "as": "m",
+                      "key": {
+                        "$": "m.id"
+                      },
+                      "do": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "item"
+                              },
+                              "tile"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Box",
+                              "props": {},
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "organism": "StatTile",
+                                  "props": {
+                                    "label": {
+                                      "$": "m.label"
+                                    },
+                                    "value": {
+                                      "$": "m.value"
+                                    },
+                                    "icon": {
+                                      "$": "m.icon"
+                                    },
+                                    "hint": {
+                                      "$": "m.hint"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ],
+                          "else": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "0",
+                                "Class": "rounded bg-card p-4 inset-ring inset-ring-border"
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "2",
+                                    "Align": "center",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": {
+                                          "$": "m.icon"
+                                        },
+                                        "Size": 16
+                                      }
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "xs"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "m.label"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "2xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "m.value"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "xs",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "m.hint"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/milestone-timeline.json b/xgen/specs/organisms/milestone-timeline.json
new file mode 100644
index 0000000..a03d675
--- /dev/null
+++ b/xgen/specs/organisms/milestone-timeline.json
@@ -0,0 +1,367 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.milestone-timeline",
+  "name": "MilestoneTimeline",
+  "docs": "Milestones on a line: the year, a tag, a title and a sentence each. Axes: layout (split: a vertical line beside a picture, stacked: a vertical line in a narrow column, row: a horizontal line of columns), tone, density.",
+  "records": {
+    "Milestone": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "date",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "tag",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "milestones",
+      "type": {
+        "ts": "Milestone[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"split\" | \"stacked\" | \"row\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "layout": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "split"
+              ]
+            },
+            "split",
+            "stack"
+          ]
+        },
+        "media": {
+          "show": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "split"
+            ]
+          },
+          "side": "start",
+          "align": "start"
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "stacked"
+              ]
+            },
+            "2xl",
+            "default"
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "milestones"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "milestone",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "List",
+                  "props": {
+                    "Tag": "ol",
+                    "Class": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "row"
+                          ]
+                        },
+                        "grid grid-cols-1 gap-8 border-t border-border sm:grid-cols-2 lg:grid-cols-4",
+                        "flex flex-col gap-8 border-l border-border"
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "milestones"
+                      },
+                      "as": "m",
+                      "key": {
+                        "$": "m.id"
+                      },
+                      "do": [
+                        {
+                          "use": "ListItem",
+                          "props": {
+                            "Class": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "row"
+                                  ]
+                                },
+                                "relative flex flex-col gap-2 pt-6",
+                                "relative flex flex-col gap-2 pl-6"
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "item"
+                          },
+                          "children": [
+                            {
+                              "use": "Inline",
+                              "props": {
+                                "Class": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "layout"
+                                        },
+                                        "row"
+                                      ]
+                                    },
+                                    "absolute top-0 left-0 size-2 -translate-y-1/2 rounded bg-primary",
+                                    "absolute top-2 left-0 size-2 -translate-x-1/2 rounded bg-primary"
+                                  ]
+                                }
+                              },
+                              "attrs": {
+                                "aria-hidden": "true"
+                              }
+                            },
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "center"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "m.date"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Badge",
+                                  "props": {
+                                    "Variant": "outline",
+                                    "Size": "sm"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "m.tag"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Title",
+                              "props": {
+                                "As": 3,
+                                "Size": "lg",
+                                "Weight": "bold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "m.title"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "m.text"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "title"
+                },
+                "ratio": "3/4"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/nav-actions.json b/xgen/specs/organisms/nav-actions.json
new file mode 100644
index 0000000..d9a67b0
--- /dev/null
+++ b/xgen/specs/organisms/nav-actions.json
@@ -0,0 +1,190 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.nav-actions",
+  "name": "NavActions",
+  "docs": "The buttons at the end of a top bar: login, the call to action and the theme button (it only reports the press). No wrapper: they sit in the row of the bar.",
+  "records": {},
+  "props": [
+    {
+      "name": "login",
+      "type": "string",
+      "docs": "text of the login link; none: no login"
+    },
+    {
+      "name": "loginHref",
+      "type": "string",
+      "docs": "the address of the login page; none: the login is a button with no address"
+    },
+    {
+      "name": "cta",
+      "type": "string"
+    },
+    {
+      "name": "ctaHref",
+      "type": "string"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "\"none\" | \"cta\""
+      },
+      "default": "cta"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"inverse\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "themeLabel",
+      "type": "string",
+      "docs": "text of the theme button; none: no button"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "theme",
+      "args": [],
+      "docs": "the theme button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "when": {
+        "$": "login"
+      },
+      "then": [
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "ghost",
+            "Size": "sm",
+            "Href": {
+              "$": "loginHref"
+            },
+            "Class": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "tone"
+                    },
+                    "inverse"
+                  ]
+                },
+                "text-background hover:bg-background/10",
+                ""
+              ]
+            }
+          },
+          "attrs": {
+            "data-testid": "nav-login"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "login"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "actions"
+              },
+              "cta"
+            ]
+          },
+          {
+            "$": "cta"
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Button",
+          "props": {
+            "Variant": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "tone"
+                    },
+                    "inverse"
+                  ]
+                },
+                "secondary",
+                "default"
+              ]
+            },
+            "Size": "sm",
+            "Href": {
+              "$": "ctaHref"
+            }
+          },
+          "attrs": {
+            "data-testid": "header-cta"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "cta"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "$": "themeLabel"
+      },
+      "then": [
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "outline",
+            "Size": "sm"
+          },
+          "attrs": {
+            "data-testid": "theme-toggle"
+          },
+          "on": {
+            "click": {
+              "call": "emit.theme",
+              "args": []
+            }
+          },
+          "children": [
+            {
+              "text": {
+                "$": "themeLabel"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/nav-bar-menu.json b/xgen/specs/organisms/nav-bar-menu.json
new file mode 100644
index 0000000..252a6a7
--- /dev/null
+++ b/xgen/specs/organisms/nav-bar-menu.json
@@ -0,0 +1,99 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.nav-bar-menu",
+  "name": "NavBarMenu",
+  "docs": "The links of NavBar in a nav landmark; left out when there are no links.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the navigation"
+    },
+    {
+      "name": "links",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "required": true
+    },
+    {
+      "name": "current",
+      "type": "string",
+      "default": "",
+      "docs": "id of the current link"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "links"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "organism": "NavBlock",
+          "props": {
+            "label": {
+              "$": "label"
+            },
+            "className": "order-last w-full overflow-x-auto md:order-none md:w-auto [&>div]:flex-nowrap md:[&>div]:flex-wrap [&_a]:shrink-0",
+            "testid": "site-nav",
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "NavLinks",
+                  "props": {
+                    "links": {
+                      "$": "links"
+                    },
+                    "current": {
+                      "$": "current"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/nav-bar.json b/xgen/specs/organisms/nav-bar.json
new file mode 100644
index 0000000..dc21294
--- /dev/null
+++ b/xgen/specs/organisms/nav-bar.json
@@ -0,0 +1,568 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.nav-bar",
+  "name": "NavBar",
+  "docs": "A top bar in four shapes. Axes: layout (inline: brand left, links, button right; split: the brand in the middle with the links on both sides; search: a search field with its shortcut in the middle), over (none, media: the bar sits over a picture, transparent), actions mode (none, cta), tone (default, inverse: on a dark hero band). Turning solid on scroll is a port contract.",
+  "records": {
+    "NavLink": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "NavBarActions": [
+      {
+        "name": "mode",
+        "type": "\"none\" | \"cta\"",
+        "optional": true,
+        "docs": "cta: show the call to action",
+        "default": "cta"
+      },
+      {
+        "name": "cta",
+        "type": "string",
+        "optional": true,
+        "docs": "text of the call to action"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true,
+        "docs": "href of the call to action"
+      },
+      {
+        "name": "login",
+        "type": "string",
+        "optional": true,
+        "docs": "text of the login link; none: no login"
+      },
+      {
+        "name": "loginHref",
+        "type": "string",
+        "optional": true,
+        "docs": "href of the login link; none: a button with no address"
+      },
+      {
+        "name": "themeLabel",
+        "type": "string",
+        "optional": true,
+        "docs": "text of the theme button; none: no button"
+      }
+    ],
+    "NavSearch": [
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "docs": "name and placeholder of the search field (layout search)"
+      },
+      {
+        "name": "shortcut",
+        "type": "string",
+        "optional": false,
+        "docs": "the keys that open the search, shown in the field"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the navigation"
+    },
+    {
+      "name": "brand",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "brandHref",
+      "type": "string",
+      "docs": "the address of the home page; none: the brand is text, not a link"
+    },
+    {
+      "name": "links",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "required": true
+    },
+    {
+      "name": "current",
+      "type": "string",
+      "default": "",
+      "docs": "id of the current link"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "record": "NavBarActions"
+      },
+      "docs": "the buttons at the end of the bar"
+    },
+    {
+      "name": "search",
+      "type": {
+        "record": "NavSearch"
+      },
+      "required": true,
+      "docs": "the search field of layout search"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"inverse\""
+      },
+      "default": "default",
+      "docs": "inverse: sits on a dark hero band"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"inline\" | \"split\" | \"search\""
+      },
+      "default": "inline"
+    },
+    {
+      "name": "over",
+      "type": {
+        "ts": "\"none\" | \"media\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "skip",
+      "type": "string",
+      "docs": "text of the skip link to the main content; none: no link"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "theme",
+      "args": [],
+      "docs": "the theme button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "header",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "relative",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "tone"
+                    },
+                    "inverse"
+                  ]
+                },
+                "border-b border-transparent bg-foreground text-background [&_a]:text-background [&_button]:text-background",
+                "border-b border-border bg-background"
+              ]
+            },
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "over"
+                    },
+                    "media"
+                  ]
+                },
+                "isolate overflow-hidden border-0 bg-transparent",
+                ""
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "nav-bar",
+        "data-layout": {
+          "$": "layout"
+        },
+        "data-tone": {
+          "$": "tone"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "organism": "OverMedia",
+          "props": {
+            "on": {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "over"
+                },
+                "media"
+              ]
+            },
+            "alt": {
+              "$": "brand"
+            }
+          }
+        },
+        {
+          "when": {
+            "$": "skip"
+          },
+          "then": [
+            {
+              "use": "LinkPlain",
+              "props": {
+                "Href": "#main-content",
+                "Class": "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border"
+              },
+              "attrs": {
+                "data-testid": "skip-link"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "skip"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Container",
+          "props": {
+            "Class": "mx-auto w-full max-w-6xl px-4"
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "flex flex-wrap items-center justify-between gap-4",
+                    "py-4"
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "split"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "NavBlock",
+                      "props": {
+                        "label": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "landmarkLabel"
+                            },
+                            {
+                              "op": "uniq",
+                              "args": [
+                                {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}, {1}",
+                                    {
+                                      "$": "label"
+                                    },
+                                    {
+                                      "$": "landmarkLabel"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "$": "label"
+                            }
+                          ]
+                        },
+                        "className": "w-full",
+                        "testid": "site-nav"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "use": "Grid",
+                              "props": {
+                                "Cols": "1-3",
+                                "Class": "w-full items-center gap-4"
+                              },
+                              "children": [
+                                {
+                                  "use": "Box",
+                                  "props": {
+                                    "Class": "md:justify-self-start"
+                                  },
+                                  "children": [
+                                    {
+                                      "organism": "NavLinks",
+                                      "props": {
+                                        "links": {
+                                          "$": "links"
+                                        },
+                                        "current": {
+                                          "$": "current"
+                                        },
+                                        "side": "left"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Box",
+                                  "props": {
+                                    "Class": "text-center"
+                                  },
+                                  "children": [
+                                    {
+                                      "organism": "MenuEntry",
+                                      "props": {
+                                        "href": {
+                                          "$": "brandHref"
+                                        },
+                                        "className": "text-lg font-medium",
+                                        "testid": "brand"
+                                      },
+                                      "slots": {
+                                        "children": {
+                                          "args": [],
+                                          "do": [
+                                            {
+                                              "text": {
+                                                "$": "brand"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "4",
+                                    "Align": "center",
+                                    "Justify": "end",
+                                    "Class": "flex-wrap md:justify-self-end"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Box",
+                                      "children": [
+                                        {
+                                          "organism": "NavLinks",
+                                          "props": {
+                                            "links": {
+                                              "$": "links"
+                                            },
+                                            "current": {
+                                              "$": "current"
+                                            },
+                                            "side": "right"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "organism": "NavActions",
+                                      "props": {
+                                        "login": {
+                                          "$": "actions.login"
+                                        },
+                                        "loginHref": {
+                                          "$": "actions.loginHref"
+                                        },
+                                        "cta": {
+                                          "$": "actions.cta"
+                                        },
+                                        "ctaHref": {
+                                          "$": "actions.href"
+                                        },
+                                        "actions": {
+                                          "$": "actions.mode"
+                                        },
+                                        "tone": {
+                                          "$": "tone"
+                                        },
+                                        "themeLabel": {
+                                          "$": "actions.themeLabel"
+                                        }
+                                      },
+                                      "on": {
+                                        "theme": {
+                                          "call": "emit.theme",
+                                          "args": []
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ],
+                  "else": [
+                    {
+                      "organism": "MenuEntry",
+                      "props": {
+                        "href": {
+                          "$": "brandHref"
+                        },
+                        "className": "text-lg font-medium",
+                        "testid": "brand"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "text": {
+                                "$": "brand"
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "search"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "SearchPalette",
+                          "props": {
+                            "label": {
+                              "$": "search.label"
+                            },
+                            "shortcut": {
+                              "$": "search.shortcut"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "NavBarMenu",
+                      "props": {
+                        "label": {
+                          "$": "label"
+                        },
+                        "links": {
+                          "$": "links"
+                        },
+                        "current": {
+                          "$": "current"
+                        },
+                        "landmarkLabel": {
+                          "$": "landmarkLabel"
+                        }
+                      }
+                    },
+                    {
+                      "organism": "NavActions",
+                      "props": {
+                        "login": {
+                          "$": "actions.login"
+                        },
+                        "loginHref": {
+                          "$": "actions.loginHref"
+                        },
+                        "cta": {
+                          "$": "actions.cta"
+                        },
+                        "ctaHref": {
+                          "$": "actions.href"
+                        },
+                        "actions": {
+                          "$": "actions.mode"
+                        },
+                        "tone": {
+                          "$": "tone"
+                        },
+                        "themeLabel": {
+                          "$": "actions.themeLabel"
+                        }
+                      },
+                      "on": {
+                        "theme": {
+                          "call": "emit.theme",
+                          "args": []
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/nav-block.json b/xgen/specs/organisms/nav-block.json
new file mode 100644
index 0000000..72df660
--- /dev/null
+++ b/xgen/specs/organisms/nav-block.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.nav-block",
+  "name": "NavBlock",
+  "docs": "A navigation region in its own file: Block tag nav named by `label`.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the navigation"
+    },
+    {
+      "name": "testid",
+      "type": "string",
+      "docs": "data-testid of the root"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "nav",
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "$": "label"
+            }
+          ]
+        },
+        "data-testid": {
+          "$": "testid"
+        }
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/nav-links.json b/xgen/specs/organisms/nav-links.json
new file mode 100644
index 0000000..529b007
--- /dev/null
+++ b/xgen/specs/organisms/nav-links.json
@@ -0,0 +1,181 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.nav-links",
+  "name": "NavLinks",
+  "docs": "The links of a top bar in a row; the current one carries aria-current. side: all, or the first or second half of the list.",
+  "records": {},
+  "props": [
+    {
+      "name": "links",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "required": true
+    },
+    {
+      "name": "current",
+      "type": "string",
+      "default": "",
+      "docs": "id of the current link"
+    },
+    {
+      "name": "side",
+      "type": {
+        "ts": "\"all\" | \"left\" | \"right\""
+      },
+      "default": "all"
+    }
+  ],
+  "derived": [
+    {
+      "name": "count",
+      "value": {
+        "op": "len",
+        "args": [
+          {
+            "$": "links"
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "links"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "center",
+            "Class": "flex-wrap"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "links"
+              },
+              "as": "l",
+              "key": {
+                "$": "l.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "or",
+                    "args": [
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "side"
+                          },
+                          "all"
+                        ]
+                      },
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "op": "lt",
+                            "args": [
+                              {
+                                "op": "mul",
+                                "args": [
+                                  {
+                                    "$": "i"
+                                  },
+                                  2
+                                ]
+                              },
+                              {
+                                "$": "count"
+                              }
+                            ]
+                          },
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "side"
+                              },
+                              "left"
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "MenuEntry",
+                      "props": {
+                        "href": {
+                          "$": "l.href"
+                        },
+                        "className": "text-sm",
+                        "current": {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "l.id"
+                            },
+                            {
+                              "$": "current"
+                            }
+                          ]
+                        },
+                        "testid": "nav-link"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "text": {
+                                "$": "l.name"
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/newsletter-form.json b/xgen/specs/organisms/newsletter-form.json
new file mode 100644
index 0000000..efbad2a
--- /dev/null
+++ b/xgen/specs/organisms/newsletter-form.json
@@ -0,0 +1,315 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.newsletter-form",
+  "name": "NewsletterForm",
+  "docs": "An email sign-up: heading, one sentence, an email field and a button, with an optional consent line and picture. Axes: layout (inline, stacked, split), terms (show, hide), tone (default, muted), align (start, center).",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the email field"
+    },
+    {
+      "name": "submit",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "consent",
+      "type": "string",
+      "docs": "the consent line, shown when `terms` is show"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"inline\" | \"stacked\" | \"split\""
+      },
+      "default": "inline"
+    },
+    {
+      "name": "terms",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "hide"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "align",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "default": "center"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "text"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "align": {
+          "$": "align"
+        },
+        "layout": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "split"
+              ]
+            },
+            "split",
+            "stack"
+          ]
+        },
+        "media": {
+          "show": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "split"
+            ]
+          }
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Form",
+              "props": {
+                "Method": "dialog",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "w-full max-w-md",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "align"
+                            },
+                            "center"
+                          ]
+                        },
+                        "mx-auto",
+                        ""
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "newsletter-form"
+              },
+              "children": [
+                {
+                  "use": "Label",
+                  "props": {
+                    "HTMLFor": {
+                      "op": "tpl",
+                      "args": [
+                        "{0}-email",
+                        {
+                          "$": "id"
+                        }
+                      ]
+                    },
+                    "Class": "sr-only"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "label"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "start",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "w-full",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "stacked"
+                              ]
+                            },
+                            "flex-col items-stretch",
+                            "flex-wrap"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "use": "Input",
+                      "props": {
+                        "Type": "email",
+                        "Name": "email",
+                        "Class": "min-w-0 flex-1"
+                      },
+                      "attrs": {
+                        "id": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-email",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        },
+                        "data-testid": "field"
+                      }
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "default",
+                        "Size": "default",
+                        "Type": "submit"
+                      },
+                      "attrs": {
+                        "data-testid": "submit"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "submit"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "and",
+                    "args": [
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "terms"
+                          },
+                          "show"
+                        ]
+                      },
+                      {
+                        "$": "consent"
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Class": "text-muted-foreground"
+                      },
+                      "attrs": {
+                        "data-testid": "consent"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "consent"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "title"
+                },
+                "ratio": "4/3"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/number-field.json b/xgen/specs/organisms/number-field.json
new file mode 100644
index 0000000..f068206
--- /dev/null
+++ b/xgen/specs/organisms/number-field.json
@@ -0,0 +1,130 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.number-field",
+  "name": "NumberField",
+  "docs": "A narrow number field between a minus and a plus ghost icon button, drawn as one control (4px inside its ring). Static markup: the buttons carry no logic; the page wires them.",
+  "records": {},
+  "props": [
+    {
+      "name": "value",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "min",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the number"
+    },
+    {
+      "name": "decrease",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the minus button"
+    },
+    {
+      "name": "increase",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the plus button"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "inline-flex h-10 items-center gap-1 rounded bg-background p-1 inset-ring inset-ring-input"
+      },
+      "attrs": {
+        "data-slot": "number-field"
+      },
+      "children": [
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "ghost",
+            "Size": "sm",
+            "Layout": "icon",
+            "Type": "button",
+            "AriaLabel": {
+              "$": "decrease"
+            }
+          },
+          "attrs": {
+            "data-testid": "decrease"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "minus",
+                "Size": 16
+              }
+            }
+          ]
+        },
+        {
+          "use": "Input",
+          "props": {
+            "Type": "number",
+            "Name": {
+              "$": "name"
+            },
+            "Value": {
+              "$": "value"
+            },
+            "Min": {
+              "$": "min"
+            },
+            "AriaLabel": {
+              "$": "label"
+            },
+            "Size": "sm",
+            "Class": "number-bare w-8 bg-transparent px-0 text-center inset-ring-0"
+          }
+        },
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "ghost",
+            "Size": "sm",
+            "Layout": "icon",
+            "Type": "button",
+            "AriaLabel": {
+              "$": "increase"
+            }
+          },
+          "attrs": {
+            "data-testid": "increase"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "plus",
+                "Size": 16
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/offer-media.json b/xgen/specs/organisms/offer-media.json
new file mode 100644
index 0000000..e120fc6
--- /dev/null
+++ b/xgen/specs/organisms/offer-media.json
@@ -0,0 +1,125 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.offer-media",
+  "name": "OfferMedia",
+  "docs": "The picture of the StoreHero overlay layout with an offer card floating on its lower corner (the card floats over the picture).",
+  "records": {},
+  "props": [
+    {
+      "name": "alt",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the picture"
+    },
+    {
+      "name": "card",
+      "type": {
+        "ts": "OfferCard"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "relative"
+      },
+      "attrs": {
+        "data-testid": "hero-media"
+      },
+      "children": [
+        {
+          "organism": "MediaFrame",
+          "props": {
+            "alt": {
+              "$": "alt"
+            },
+            "ratio": "4/3"
+          }
+        },
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "start",
+            "Class": "absolute bottom-4 left-4 mr-4 max-w-xs rounded bg-card p-4 shadow-lg"
+          },
+          "attrs": {
+            "data-testid": "offer-card"
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": {
+                      "$": "card.icon"
+                    },
+                    "Size": 20
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "0"
+              },
+              "children": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Weight": "semibold"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "card.title"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "xs",
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "card.text"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "StoreHero",
+      "names": [
+        "OfferCard"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/order-rows.json b/xgen/specs/organisms/order-rows.json
new file mode 100644
index 0000000..a37e49a
--- /dev/null
+++ b/xgen/specs/organisms/order-rows.json
@@ -0,0 +1,360 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.order-rows",
+  "name": "OrderRows",
+  "docs": "The orders as a table (the table layout of OrderTable): number, date, items, total and a status pill.",
+  "records": {},
+  "props": [
+    {
+      "name": "orders",
+      "type": {
+        "ts": "Order[]"
+      },
+      "required": true
+    },
+    {
+      "name": "statuses",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "required": true,
+      "docs": "word by order status"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "OrderLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "w-full overflow-x-auto"
+      },
+      "children": [
+        {
+          "use": "Table",
+          "props": {
+            "Class": "w-full text-left text-sm"
+          },
+          "attrs": {
+            "data-testid": "order-table"
+          },
+          "children": [
+            {
+              "use": "TableCaption",
+              "props": {
+                "Class": "sr-only"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.caption"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "TableHead",
+              "children": [
+                {
+                  "use": "TableRow",
+                  "children": [
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.number"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.date"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.items"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.total"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.status"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "TableBody",
+              "children": [
+                {
+                  "each": {
+                    "$": "orders"
+                  },
+                  "as": "o",
+                  "key": {
+                    "$": "o.id"
+                  },
+                  "do": [
+                    {
+                      "use": "TableRow",
+                      "props": {
+                        "Class": "border-t border-border"
+                      },
+                      "attrs": {
+                        "data-testid": "item"
+                      },
+                      "children": [
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "font-semibold",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "density"
+                                        },
+                                        "compact"
+                                      ]
+                                    },
+                                    "py-2",
+                                    "py-4"
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "o.number"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": ""
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "o.date"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": ""
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  {
+                                    "$": "labels.itemsCount"
+                                  },
+                                  {
+                                    "$": "o.items"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": ""
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "$": "o.total"
+                                  },
+                                  {
+                                    "$": "o.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "children": [
+                            {
+                              "organism": "Pill",
+                              "props": {
+                                "tone": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "o.status"
+                                        },
+                                        "paid"
+                                      ]
+                                    },
+                                    "green",
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "o.status"
+                                            },
+                                            "shipped"
+                                          ]
+                                        },
+                                        "blue",
+                                        {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "o.status"
+                                                },
+                                                "pending"
+                                              ]
+                                            },
+                                            "amber",
+                                            "gray"
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "text": {
+                                        "op": "at",
+                                        "args": [
+                                          {
+                                            "$": "statuses"
+                                          },
+                                          {
+                                            "$": "o.status"
+                                          }
+                                        ]
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "OrderTable",
+      "names": [
+        "Order",
+        "OrderLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/order-summary.json b/xgen/specs/organisms/order-summary.json
new file mode 100644
index 0000000..d4e0cb0
--- /dev/null
+++ b/xgen/specs/organisms/order-summary.json
@@ -0,0 +1,350 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.order-summary",
+  "name": "OrderSummary",
+  "docs": "The totals of an order: subtotal, shipping, tax and the total, with a checkout button and a note. Axes: layout (card, plain), cta (show, hide), note (show, hide), density, tone.",
+  "records": {
+    "SummaryRow": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "amount",
+        "type": "number"
+      },
+      {
+        "name": "currency",
+        "type": "string"
+      },
+      {
+        "name": "strong",
+        "type": "boolean"
+      }
+    ],
+    "SummaryLabels": [
+      {
+        "name": "checkout",
+        "type": "string"
+      },
+      {
+        "name": "note",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "rows",
+      "type": {
+        "ts": "SummaryRow[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "SummaryLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card"
+    },
+    {
+      "name": "cta",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "note",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "measure": "md",
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "rows"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "receipt",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "card"
+                              ]
+                            },
+                            "rounded bg-card p-6 inset-ring inset-ring-border",
+                            ""
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "summary"
+                  },
+                  "children": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch"
+                      },
+                      "children": [
+                        {
+                          "use": "List",
+                          "props": {
+                            "Tag": "ul",
+                            "Class": "flex flex-col gap-4"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "rows"
+                              },
+                              "as": "row",
+                              "key": {
+                                "$": "row.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "ListItem",
+                                  "props": {
+                                    "Class": {
+                                      "op": "cn",
+                                      "args": [
+                                        "flex items-center justify-between gap-4",
+                                        {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "$": "row.strong"
+                                            },
+                                            "border-t border-border pt-4 text-base font-bold",
+                                            "text-sm text-muted-foreground"
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "attrs": {
+                                    "data-testid": "item"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Inline",
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "row.label"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Inline",
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "money",
+                                            "args": [
+                                              {
+                                                "$": "row.amount"
+                                              },
+                                              {
+                                                "$": "row.currency"
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "cta"
+                              },
+                              "show"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "default",
+                                "Size": "default",
+                                "Class": "w-full"
+                              },
+                              "attrs": {
+                                "data-testid": "checkout"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.checkout"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "note"
+                              },
+                              "show"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.note"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/order-table.json b/xgen/specs/organisms/order-table.json
new file mode 100644
index 0000000..4a28a8c
--- /dev/null
+++ b/xgen/specs/organisms/order-table.json
@@ -0,0 +1,488 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.order-table",
+  "name": "OrderTable",
+  "docs": "The order history as a table or as cards: number, date, items, total and a status pill, with an optional pager. Axes: layout (table, cards), pager (show, hide), tone, density.",
+  "records": {
+    "Order": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "number",
+        "type": "string"
+      },
+      {
+        "name": "date",
+        "type": "string"
+      },
+      {
+        "name": "total",
+        "type": "number"
+      },
+      {
+        "name": "currency",
+        "type": "string"
+      },
+      {
+        "name": "status",
+        "type": "string"
+      },
+      {
+        "name": "items",
+        "type": "number"
+      }
+    ],
+    "OrderLabels": [
+      {
+        "name": "caption",
+        "type": "string"
+      },
+      {
+        "name": "number",
+        "type": "string"
+      },
+      {
+        "name": "date",
+        "type": "string"
+      },
+      {
+        "name": "items",
+        "type": "string"
+      },
+      {
+        "name": "total",
+        "type": "string"
+      },
+      {
+        "name": "status",
+        "type": "string"
+      },
+      {
+        "name": "itemsCount",
+        "type": "string"
+      },
+      {
+        "name": "summary",
+        "type": "string"
+      },
+      {
+        "name": "previous",
+        "type": "string"
+      },
+      {
+        "name": "next",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "orders",
+      "type": {
+        "ts": "Order[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "statuses",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "required": true,
+      "docs": "word by order status"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "OrderLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"table\" | \"cards\""
+      },
+      "default": "table"
+    },
+    {
+      "name": "pager",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "orders"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "package",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "stretch"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "table"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "OrderRows",
+                          "props": {
+                            "orders": {
+                              "$": "orders"
+                            },
+                            "statuses": {
+                              "$": "statuses"
+                            },
+                            "labels": {
+                              "$": "labels"
+                            },
+                            "density": {
+                              "$": "density"
+                            }
+                          }
+                        }
+                      ],
+                      "else": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "stretch"
+                          },
+                          "attrs": {
+                            "data-testid": "order-cards"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "orders"
+                              },
+                              "as": "o",
+                              "key": {
+                                "$": "o.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "Card",
+                                  "props": {
+                                    "Variant": "default"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "item"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "CardContent",
+                                      "props": {
+                                        "Class": "flex flex-wrap items-center justify-between gap-4"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Stack",
+                                          "props": {
+                                            "Gap": "0"
+                                          },
+                                          "children": [
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "sm",
+                                                "Weight": "semibold"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "o.number"
+                                                  }
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "xs",
+                                                "Class": "text-muted-foreground"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "o.date"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "tpl",
+                                                "args": [
+                                                  {
+                                                    "$": "labels.itemsCount"
+                                                  },
+                                                  {
+                                                    "$": "o.items"
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Weight": "bold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "money",
+                                                "args": [
+                                                  {
+                                                    "$": "o.total"
+                                                  },
+                                                  {
+                                                    "$": "o.currency"
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "organism": "Pill",
+                                          "props": {
+                                            "tone": {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "o.status"
+                                                    },
+                                                    "paid"
+                                                  ]
+                                                },
+                                                "green",
+                                                {
+                                                  "op": "cond",
+                                                  "args": [
+                                                    {
+                                                      "op": "eq",
+                                                      "args": [
+                                                        {
+                                                          "$": "o.status"
+                                                        },
+                                                        "shipped"
+                                                      ]
+                                                    },
+                                                    "blue",
+                                                    {
+                                                      "op": "cond",
+                                                      "args": [
+                                                        {
+                                                          "op": "eq",
+                                                          "args": [
+                                                            {
+                                                              "$": "o.status"
+                                                            },
+                                                            "pending"
+                                                          ]
+                                                        },
+                                                        "amber",
+                                                        "gray"
+                                                      ]
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            }
+                                          },
+                                          "slots": {
+                                            "children": {
+                                              "args": [],
+                                              "do": [
+                                                {
+                                                  "text": {
+                                                    "op": "at",
+                                                    "args": [
+                                                      {
+                                                        "$": "statuses"
+                                                      },
+                                                      {
+                                                        "$": "o.status"
+                                                      }
+                                                    ]
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "pager"
+                          },
+                          "show"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "Pager",
+                          "props": {
+                            "page": 1,
+                            "pages": 3,
+                            "summary": {
+                              "op": "tpl",
+                              "args": [
+                                {
+                                  "$": "labels.summary"
+                                },
+                                1,
+                                4,
+                                12
+                              ]
+                            },
+                            "previousLabel": {
+                              "$": "labels.previous"
+                            },
+                            "nextLabel": {
+                              "$": "labels.next"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/over-media.json b/xgen/specs/organisms/over-media.json
new file mode 100644
index 0000000..eeccefc
--- /dev/null
+++ b/xgen/specs/organisms/over-media.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.over-media",
+  "name": "OverMedia",
+  "docs": "A faded picture behind the content of its header (a transparent top bar over a hero image); on false: nothing. It sits inside the header Block, which is `relative isolate overflow-hidden` and transparent when on, so the header stays the root of the block (rule 01).",
+  "records": {},
+  "props": [
+    {
+      "name": "on",
+      "type": "boolean",
+      "default": false
+    },
+    {
+      "name": "alt",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the picture"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "$": "on"
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "pointer-events-none absolute inset-0 -z-10"
+          },
+          "attrs": {
+            "data-testid": "over"
+          },
+          "children": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "alt"
+                },
+                "ratio": "21/9",
+                "className": "size-full rounded-none opacity-40"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/page-aside.json b/xgen/specs/organisms/page-aside.json
new file mode 100644
index 0000000..232da26
--- /dev/null
+++ b/xgen/specs/organisms/page-aside.json
@@ -0,0 +1,279 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.page-aside",
+  "name": "PageAside",
+  "docs": "The aside at the end of a page head: one large figure with its caption, a note card with a glyph, or four key facts as cards in two columns.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "PageExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "mode",
+      "type": {
+        "ts": "\"none\" | \"figure\" | \"note\" | \"facts\""
+      },
+      "default": "figure"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "mode"
+          },
+          "figure"
+        ]
+      },
+      "then": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "0",
+            "Align": "end",
+            "Class": "text-end"
+          },
+          "attrs": {
+            "data-testid": "page-figure"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "4xl",
+                "Weight": "bold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "extras.value"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "xs",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "extras.caption"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "mode"
+          },
+          "note"
+        ]
+      },
+      "then": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "start",
+            "Class": "rounded bg-card inset-ring inset-ring-border max-w-xs p-4"
+          },
+          "attrs": {
+            "data-testid": "page-note"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": {
+                  "$": "extras.icon"
+                },
+                "Size": 20
+              }
+            },
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "0"
+              },
+              "children": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "lg",
+                    "Weight": "bold"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "extras.value"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Weight": "medium"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "extras.caption"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "xs",
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "extras.note"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "mode"
+          },
+          "facts"
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid grid-cols-2 gap-4"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "extras.facts"
+              },
+              "as": "s",
+              "key": {
+                "$": "s.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      4
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0",
+                        "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                      },
+                      "attrs": {
+                        "data-testid": "page-fact"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "lg",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.value"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Weight": "medium"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.label"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.hint"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PageTrail",
+      "names": [
+        "PageExtras"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/page-crumbs.json b/xgen/specs/organisms/page-crumbs.json
new file mode 100644
index 0000000..1c40b8a
--- /dev/null
+++ b/xgen/specs/organisms/page-crumbs.json
@@ -0,0 +1,195 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.page-crumbs",
+  "name": "PageCrumbs",
+  "docs": "The breadcrumbs of an inner page: the parent pages (links where they have an href) separated by chevrons; the last entry is the current page and is not a link.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the breadcrumbs"
+    },
+    {
+      "name": "crumbs",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "required": true
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "last",
+      "value": {
+        "op": "sub",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "crumbs"
+              }
+            ]
+          },
+          1
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "nav"
+      },
+      "attrs": {
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "$": "label"
+            }
+          ]
+        },
+        "data-testid": "crumbs"
+      },
+      "children": [
+        {
+          "use": "List",
+          "props": {
+            "Class": "m-0 flex list-none flex-wrap items-center gap-2 p-0 text-sm text-muted-foreground"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "crumbs"
+              },
+              "as": "c",
+              "key": {
+                "$": "c.id"
+              },
+              "do": [
+                {
+                  "use": "ListItem",
+                  "props": {
+                    "Class": "flex items-center gap-2"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "lt",
+                        "args": [
+                          {
+                            "$": "i"
+                          },
+                          {
+                            "$": "last"
+                          }
+                        ]
+                      },
+                      "then": [
+                        {
+                          "when": {
+                            "$": "c.href"
+                          },
+                          "then": [
+                            {
+                              "use": "Link",
+                              "props": {
+                                "Href": {
+                                  "$": "c.href"
+                                },
+                                "Variant": "muted",
+                                "Size": "sm"
+                              },
+                              "attrs": {
+                                "data-testid": "crumb"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "c.name"
+                                  }
+                                }
+                              ]
+                            }
+                          ],
+                          "else": [
+                            {
+                              "use": "Inline",
+                              "attrs": {
+                                "data-testid": "crumb"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "c.name"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "chevron-right",
+                            "Size": 16
+                          }
+                        }
+                      ],
+                      "else": [
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": "font-medium text-foreground"
+                          },
+                          "attrs": {
+                            "aria-current": "page"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "c.name"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/page-intro.json b/xgen/specs/organisms/page-intro.json
new file mode 100644
index 0000000..8bfd4ce
--- /dev/null
+++ b/xgen/specs/organisms/page-intro.json
@@ -0,0 +1,133 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.page-intro",
+  "name": "PageIntro",
+  "docs": "The head of an inner page: the heading (h1 on a page of its own), one sentence and, optionally, an action. Axes: align (start, center), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "cta",
+      "type": "string"
+    },
+    {
+      "name": "href",
+      "type": "string"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "align",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "default": "start"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "text"
+        },
+        "heading": {
+          "level": {
+            "$": "level"
+          }
+        },
+        "align": {
+          "$": "align"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "$": "cta"
+              },
+              "then": [
+                {
+                  "organism": "ActionGroup",
+                  "props": {
+                    "primary": {
+                      "$": "cta"
+                    },
+                    "primaryHref": {
+                      "$": "href"
+                    },
+                    "align": {
+                      "$": "align"
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/page-trail.json b/xgen/specs/organisms/page-trail.json
new file mode 100644
index 0000000..681dc29
--- /dev/null
+++ b/xgen/specs/organisms/page-trail.json
@@ -0,0 +1,323 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.page-trail",
+  "name": "PageTrail",
+  "docs": "The head of an inner page with breadcrumbs. Axes: aside (none, figure: one large figure such as a count or a total, note: a small card with a glyph such as a delivery promise or a document version, facts: four key facts in two columns), tone.",
+  "records": {
+    "PageExtras": [
+      {
+        "name": "value",
+        "type": "string"
+      },
+      {
+        "name": "caption",
+        "type": "string"
+      },
+      {
+        "name": "note",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "facts",
+        "type": "Stat[]"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the breadcrumbs"
+    },
+    {
+      "name": "crumbs",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "required": true,
+      "docs": "the trail of pages (a parent_id chain): the parent pages, then the current page; empty: no breadcrumbs"
+    },
+    {
+      "name": "extras",
+      "type": {
+        "record": "PageExtras"
+      },
+      "required": true,
+      "docs": "the figure or note (value, caption, note, icon) and the facts"
+    },
+    {
+      "name": "aside",
+      "type": {
+        "ts": "\"none\" | \"figure\" | \"note\" | \"facts\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "titleId",
+      "value": {
+        "op": "add",
+        "args": [
+          {
+            "$": "id"
+          },
+          "-title"
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "py-8",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "tone"
+                    },
+                    "muted"
+                  ]
+                },
+                "bg-muted",
+                ""
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "$": "titleId"
+            }
+          ]
+        },
+        "data-testid": "section",
+        "data-tone": {
+          "$": "tone"
+        },
+        "data-aside": {
+          "$": "aside"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                "flex flex-col gap-6"
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "when": {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "crumbs"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "PageCrumbs",
+                  "props": {
+                    "label": {
+                      "$": "label"
+                    },
+                    "crumbs": {
+                      "$": "crumbs"
+                    },
+                    "landmarkLabel": {
+                      "$": "landmarkLabel"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "aside"
+                        },
+                        "facts"
+                      ]
+                    },
+                    "grid grid-cols-1 items-center gap-8 lg:grid-cols-2",
+                    "flex flex-col gap-6 md:flex-row md:items-end md:justify-between"
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "start",
+                    "Class": "min-w-0"
+                  },
+                  "children": [
+                    {
+                      "organism": "SectionHeader",
+                      "props": {
+                        "titleId": {
+                          "$": "titleId"
+                        },
+                        "title": {
+                          "$": "title"
+                        },
+                        "heading": {
+                          "level": {
+                            "$": "level"
+                          },
+                          "badge": {
+                            "$": "badge"
+                          }
+                        },
+                        "lead": {
+                          "$": "lead"
+                        }
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "ne",
+                    "args": [
+                      {
+                        "$": "aside"
+                      },
+                      "none"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "PageAside",
+                      "props": {
+                        "extras": {
+                          "$": "extras"
+                        },
+                        "mode": {
+                          "$": "aside"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    },
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/payment-options.json b/xgen/specs/organisms/payment-options.json
new file mode 100644
index 0000000..d9465a4
--- /dev/null
+++ b/xgen/specs/organisms/payment-options.json
@@ -0,0 +1,156 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.payment-options",
+  "name": "PaymentOptions",
+  "docs": "Ways to pay as radio cards: icon, name and a line of text; `checked` is the chosen one. Static markup.",
+  "records": {
+    "Payment": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "payments",
+      "type": {
+        "ts": "Payment[]"
+      },
+      "required": true
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": true,
+      "docs": "name of the radio group"
+    },
+    {
+      "name": "checked",
+      "type": "string",
+      "default": "",
+      "docs": "id of the chosen payment"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Grid",
+      "props": {
+        "Cols": "1-2",
+        "Class": "gap-4"
+      },
+      "attrs": {
+        "data-testid": "payments"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "payments"
+          },
+          "as": "p",
+          "key": {
+            "$": "p.id"
+          },
+          "do": [
+            {
+              "use": "Label",
+              "props": {
+                "Class": "flex items-center gap-4 rounded p-4 inset-ring inset-ring-border has-checked:inset-ring-foreground"
+              },
+              "attrs": {
+                "data-testid": "payment"
+              },
+              "children": [
+                {
+                  "use": "Radio",
+                  "props": {
+                    "Name": {
+                      "$": "name"
+                    },
+                    "Value": {
+                      "$": "p.id"
+                    },
+                    "Checked": {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "p.id"
+                        },
+                        {
+                          "$": "checked"
+                        }
+                      ]
+                    }
+                  }
+                },
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": {
+                      "$": "p.icon"
+                    },
+                    "Size": 20,
+                    "Class": "shrink-0"
+                  }
+                },
+                {
+                  "use": "Inline",
+                  "props": {
+                    "Class": "flex flex-col items-start justify-start gap-0"
+                  },
+                  "children": [
+                    {
+                      "use": "Inline",
+                      "props": {
+                        "Class": "text-sm font-semibold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "p.title"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Inline",
+                      "props": {
+                        "Class": "text-xs text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "p.text"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/photo-gallery.json b/xgen/specs/organisms/photo-gallery.json
new file mode 100644
index 0000000..53fd50f
--- /dev/null
+++ b/xgen/specs/organisms/photo-gallery.json
@@ -0,0 +1,731 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.photo-gallery",
+  "name": "PhotoGallery",
+  "docs": "Photos in a grid, a masonry of mixed heights, a mosaic with one big tile, a featured picture over a strip of thumbnails, or cards with a title and a tag. Static markup: the featured layout's arrows are the page's. Axes: layout (grid, masonry, mosaic, featured, cards), captions (show, hide), tone, density.",
+  "records": {
+    "Photo": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "tag",
+        "type": "string"
+      },
+      {
+        "name": "size",
+        "type": "string"
+      }
+    ],
+    "PhotoLabels": [
+      {
+        "name": "previous",
+        "type": "string"
+      },
+      {
+        "name": "next",
+        "type": "string"
+      },
+      {
+        "name": "counter",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "photos",
+      "type": {
+        "ts": "Photo[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "PhotoLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"masonry\" | \"mosaic\" | \"featured\" | \"cards\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "captions",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "photos"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "image",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "featured"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch"
+                      },
+                      "attrs": {
+                        "data-testid": "featured"
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "title"
+                            }
+                          }
+                        },
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "center",
+                            "Justify": "between"
+                          },
+                          "children": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "0"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "base",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "op": "firstOf",
+                                        "args": [
+                                          {
+                                            "$": "photos"
+                                          },
+                                          "title"
+                                        ]
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "xs",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "op": "tpl",
+                                        "args": [
+                                          {
+                                            "$": "labels.counter"
+                                          },
+                                          1,
+                                          {
+                                            "op": "len",
+                                            "args": [
+                                              {
+                                                "$": "photos"
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2"
+                              },
+                              "children": [
+                                {
+                                  "use": "Button",
+                                  "props": {
+                                    "Variant": "outline",
+                                    "Size": "sm",
+                                    "Layout": "icon",
+                                    "AriaLabel": {
+                                      "$": "labels.previous"
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": "chevron-left",
+                                        "Size": 16
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Button",
+                                  "props": {
+                                    "Variant": "outline",
+                                    "Size": "sm",
+                                    "Layout": "icon",
+                                    "AriaLabel": {
+                                      "$": "labels.next"
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": "chevron-right",
+                                        "Size": 16
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": "grid grid-cols-3 gap-2 sm:grid-cols-9"
+                          },
+                          "attrs": {
+                            "data-testid": "thumbs"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "photos"
+                              },
+                              "as": "p",
+                              "key": {
+                                "$": "p.id"
+                              },
+                              "do": [
+                                {
+                                  "organism": "MediaFrame",
+                                  "props": {
+                                    "alt": {
+                                      "$": "p.title"
+                                    },
+                                    "ratio": "1/1",
+                                    "className": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "i"
+                                            },
+                                            0
+                                          ]
+                                        },
+                                        "ring-2 ring-foreground",
+                                        ""
+                                      ]
+                                    }
+                                  }
+                                }
+                              ],
+                              "index": "i"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "masonry"
+                              ]
+                            },
+                            "columns-1 gap-4 sm:columns-2 lg:columns-3",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "mosaic"
+                                  ]
+                                },
+                                "grid grid-cols-2 gap-4 md:grid-cols-4",
+                                "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "photos"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "FigureBlock",
+                              "props": {
+                                "className": {
+                                  "op": "cn",
+                                  "args": [
+                                    "flex flex-col gap-2",
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "layout"
+                                            },
+                                            "masonry"
+                                          ]
+                                        },
+                                        "mb-4 break-inside-avoid",
+                                        ""
+                                      ]
+                                    },
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "and",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "layout"
+                                                },
+                                                "mosaic"
+                                              ]
+                                            },
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "i"
+                                                },
+                                                0
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        "col-span-2 row-span-2",
+                                        ""
+                                      ]
+                                    },
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "layout"
+                                            },
+                                            "cards"
+                                          ]
+                                        },
+                                        "rounded bg-card inset-ring inset-ring-border p-4",
+                                        ""
+                                      ]
+                                    }
+                                  ]
+                                },
+                                "testid": "item"
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "organism": "MediaFrame",
+                                      "props": {
+                                        "alt": {
+                                          "$": "p.title"
+                                        },
+                                        "ratio": {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "layout"
+                                                },
+                                                "masonry"
+                                              ]
+                                            },
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "p.size"
+                                                    },
+                                                    "tall"
+                                                  ]
+                                                },
+                                                "3/4",
+                                                {
+                                                  "op": "cond",
+                                                  "args": [
+                                                    {
+                                                      "op": "eq",
+                                                      "args": [
+                                                        {
+                                                          "$": "p.size"
+                                                        },
+                                                        "wide"
+                                                      ]
+                                                    },
+                                                    "16/9",
+                                                    {
+                                                      "op": "cond",
+                                                      "args": [
+                                                        {
+                                                          "op": "eq",
+                                                          "args": [
+                                                            {
+                                                              "$": "p.size"
+                                                            },
+                                                            "large"
+                                                          ]
+                                                        },
+                                                        "4/3",
+                                                        "1/1"
+                                                      ]
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "layout"
+                                                    },
+                                                    "grid"
+                                                  ]
+                                                },
+                                                "4/3",
+                                                "1/1"
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        "className": {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "layout"
+                                                },
+                                                "mosaic"
+                                              ]
+                                            },
+                                            "h-full",
+                                            ""
+                                          ]
+                                        }
+                                      }
+                                    },
+                                    {
+                                      "when": {
+                                        "op": "and",
+                                        "args": [
+                                          {
+                                            "op": "eq",
+                                            "args": [
+                                              {
+                                                "$": "captions"
+                                              },
+                                              "show"
+                                            ]
+                                          },
+                                          {
+                                            "op": "eq",
+                                            "args": [
+                                              {
+                                                "$": "layout"
+                                              },
+                                              "cards"
+                                            ]
+                                          }
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "Group",
+                                          "props": {
+                                            "Gap": "4",
+                                            "Align": "center",
+                                            "Justify": "between"
+                                          },
+                                          "children": [
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "sm",
+                                                "Weight": "semibold"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "p.title"
+                                                  }
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "use": "Badge",
+                                              "props": {
+                                                "Variant": "secondary",
+                                                "Size": "sm"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "p.tag"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "when": {
+                                        "op": "and",
+                                        "args": [
+                                          {
+                                            "op": "eq",
+                                            "args": [
+                                              {
+                                                "$": "captions"
+                                              },
+                                              "show"
+                                            ]
+                                          },
+                                          {
+                                            "op": "or",
+                                            "args": [
+                                              {
+                                                "op": "eq",
+                                                "args": [
+                                                  {
+                                                    "$": "layout"
+                                                  },
+                                                  "grid"
+                                                ]
+                                              },
+                                              {
+                                                "op": "eq",
+                                                "args": [
+                                                  {
+                                                    "$": "layout"
+                                                  },
+                                                  "masonry"
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "Box",
+                                          "props": {
+                                            "Class": "text-sm text-muted-foreground"
+                                          },
+                                          "attrs": {
+                                            "data-testid": "caption"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "p.title"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/post-actions.json b/xgen/specs/organisms/post-actions.json
new file mode 100644
index 0000000..1c07fa3
--- /dev/null
+++ b/xgen/specs/organisms/post-actions.json
@@ -0,0 +1,213 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.post-actions",
+  "name": "PostActions",
+  "docs": "The calls to action of a post header: share and save side by side, one wide read button, or a wide read button with share and save as icons.",
+  "records": {},
+  "props": [
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostSplitLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "mode",
+      "type": {
+        "ts": "\"pair\" | \"wide\" | \"icons\""
+      },
+      "default": "pair"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "mode"
+          },
+          "pair"
+        ]
+      },
+      "then": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Class": "flex-wrap"
+          },
+          "children": [
+            {
+              "use": "Button",
+              "props": {
+                "Variant": "default",
+                "Size": "default",
+                "Class": "gap-2"
+              },
+              "attrs": {
+                "data-testid": "action-primary"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "share-2",
+                    "Size": 16
+                  }
+                },
+                {
+                  "text": {
+                    "$": "labels.share"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Button",
+              "props": {
+                "Variant": "outline",
+                "Size": "default",
+                "Class": "gap-2"
+              },
+              "attrs": {
+                "data-testid": "post-save"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "bookmark",
+                    "Size": 16
+                  }
+                },
+                {
+                  "text": {
+                    "$": "labels.save"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "else": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2"
+          },
+          "children": [
+            {
+              "use": "Button",
+              "props": {
+                "Variant": "default",
+                "Size": "default",
+                "Class": "gap-2 flex-1"
+              },
+              "attrs": {
+                "data-testid": "action-primary"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "book-open",
+                    "Size": 16
+                  }
+                },
+                {
+                  "text": {
+                    "$": "labels.read"
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "mode"
+                  },
+                  "icons"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "default",
+                    "Layout": "icon",
+                    "AriaLabel": {
+                      "$": "labels.share"
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "post-share"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "share-2",
+                        "Size": 16
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "default",
+                    "Layout": "icon",
+                    "AriaLabel": {
+                      "$": "labels.save"
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "post-save"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "bookmark",
+                        "Size": 16
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post"
+      ]
+    },
+    {
+      "from": "PostSplit",
+      "names": [
+        "PostExtras",
+        "PostSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-author.json b/xgen/specs/organisms/post-author.json
new file mode 100644
index 0000000..1dc99ed
--- /dev/null
+++ b/xgen/specs/organisms/post-author.json
@@ -0,0 +1,293 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.post-author",
+  "name": "PostAuthor",
+  "docs": "The author of a post: the portrait, the name and role, and the date or the share and save buttons; as a line, a card, or a card with the bio.",
+  "records": {},
+  "props": [
+    {
+      "name": "post",
+      "type": {
+        "ts": "Post"
+      },
+      "required": true
+    },
+    {
+      "name": "extras",
+      "type": {
+        "ts": "PostExtras"
+      },
+      "required": true,
+      "docs": "the author's role and bio, the reading figures, the tags and the outline"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostSplitLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "mode",
+      "type": {
+        "ts": "\"line\" | \"card\" | \"bio\""
+      },
+      "default": "line"
+    },
+    {
+      "name": "share",
+      "type": "boolean",
+      "default": false,
+      "docs": "share and save buttons instead of the date"
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch",
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "mode"
+                    },
+                    "line"
+                  ]
+                },
+                "",
+                "rounded bg-card inset-ring inset-ring-border p-4"
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "post-author"
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "post.author"
+                },
+                "ratio": "1/1",
+                "className": "size-10 shrink-0 rounded-full"
+              }
+            },
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "0",
+                "Align": "start",
+                "Class": "min-w-0 flex-1 text-start"
+              },
+              "children": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Weight": "semibold"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "post.author"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "xs",
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "extras.role"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "$": "share"
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2"
+                  },
+                  "children": [
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "ghost",
+                        "Size": "default",
+                        "Class": "gap-2"
+                      },
+                      "attrs": {
+                        "data-testid": "post-share"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "share-2",
+                            "Size": 16
+                          }
+                        },
+                        {
+                          "text": {
+                            "$": "labels.share"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "ghost",
+                        "Size": "default",
+                        "Class": "gap-2"
+                      },
+                      "attrs": {
+                        "data-testid": "post-save"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "bookmark",
+                            "Size": 16
+                          }
+                        },
+                        {
+                          "text": {
+                            "$": "labels.save"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "2",
+                        "Align": "center"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "calendar",
+                            "Size": 16
+                          }
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "post.date"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "mode"
+              },
+              "bio"
+            ]
+          },
+          "then": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "extras.bio"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post"
+      ]
+    },
+    {
+      "from": "PostSplit",
+      "names": [
+        "PostExtras",
+        "PostSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-card.json b/xgen/specs/organisms/post-card.json
new file mode 100644
index 0000000..93a8208
--- /dev/null
+++ b/xgen/specs/organisms/post-card.json
@@ -0,0 +1,661 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.post-card",
+  "name": "PostCard",
+  "docs": "A post as a card: cover picture, category, title, excerpt, author line and a read link. Axes: layout (vertical, horizontal), media (image, none), meta (full, short: the date only, news: date and title only), density.",
+  "records": {
+    "Post": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "excerpt",
+        "type": "string"
+      },
+      {
+        "name": "category",
+        "type": "string"
+      },
+      {
+        "name": "author",
+        "type": "string"
+      },
+      {
+        "name": "date",
+        "type": "string"
+      },
+      {
+        "name": "minutes",
+        "type": "number"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "image",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "PostLabels": [
+      {
+        "name": "minutes",
+        "type": "string"
+      },
+      {
+        "name": "by",
+        "type": "string"
+      },
+      {
+        "name": "read",
+        "type": "string"
+      },
+      {
+        "name": "empty",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "post",
+      "type": {
+        "record": "Post"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "PostLabels"
+      },
+      "required": true,
+      "docs": "templates: minutes `{0} min read`, by `By {0}`; and the word of the read link"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"vertical\" | \"horizontal\""
+      },
+      "default": "vertical"
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"image\" | \"none\""
+      },
+      "default": "image"
+    },
+    {
+      "name": "meta",
+      "type": {
+        "ts": "\"full\" | \"short\" | \"news\""
+      },
+      "default": "full"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "meta"
+          },
+          "news"
+        ]
+      },
+      "then": [
+        {
+          "use": "Block",
+          "props": {
+            "Tag": "article",
+            "Class": {
+              "op": "cn",
+              "args": [
+                "flex flex-col gap-2 overflow-hidden rounded p-0 inset-ring inset-ring-border",
+                {
+                  "op": "preset",
+                  "args": [
+                    "defaults",
+                    "news.card"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-testid": "item",
+            "data-layout": {
+              "$": "layout"
+            },
+            "data-meta": "news"
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "relative shrink-0 overflow-hidden",
+                    {
+                      "op": "preset",
+                      "args": [
+                        "defaults",
+                        "news.cover"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "news-cover"
+              },
+              "children": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "post.title"
+                    },
+                    "src": {
+                      "$": "post.image"
+                    },
+                    "className": {
+                      "op": "cn",
+                      "args": [
+                        "size-full",
+                        {
+                          "op": "preset",
+                          "args": [
+                            "defaults",
+                            "media.rounded"
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                },
+                {
+                  "use": "Title",
+                  "props": {
+                    "As": 3,
+                    "Size": "xs",
+                    "Weight": "semibold",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "pointer-events-none absolute inset-x-12 line-clamp-2 text-center leading-5 text-foreground",
+                        {
+                          "op": "preset",
+                          "args": [
+                            "defaults",
+                            "news.title"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "news-title"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "post.title"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "w-full px-2 text-muted-foreground",
+                    {
+                      "op": "preset",
+                      "args": [
+                        "defaults",
+                        "news.strip"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "news-date"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "calendar",
+                    "Size": 16
+                  }
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "xs",
+                    "Weight": "bold",
+                    "Class": "leading-4"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "post.date"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "$": "post.category"
+                  },
+                  "then": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Weight": "bold",
+                        "Class": "leading-4"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "post.category"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "else": [
+        {
+          "use": "Block",
+          "props": {
+            "Tag": "article",
+            "Class": {
+              "op": "cn",
+              "args": [
+                "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+                "h-full gap-4 overflow-hidden",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "horizontal"
+                      ]
+                    },
+                    "flex flex-col sm:flex-row",
+                    "flex flex-col"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "card",
+            "data-testid": "item",
+            "data-layout": {
+              "$": "layout"
+            },
+            "data-meta": {
+              "$": "meta"
+            }
+          },
+          "children": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "media"
+                  },
+                  "image"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "relative shrink-0",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "horizontal"
+                              ]
+                            },
+                            "sm:w-64",
+                            ""
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "organism": "MediaFrame",
+                      "props": {
+                        "alt": {
+                          "$": "post.title"
+                        },
+                        "src": {
+                          "$": "post.image"
+                        },
+                        "className": "h-full"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "CardContent",
+              "props": {
+                "Class": "flex flex-1 flex-col gap-2"
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "ne",
+                    "args": [
+                      {
+                        "$": "meta"
+                      },
+                      "news"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "2",
+                        "Align": "center"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "post.icon"
+                            },
+                            "Size": 16
+                          }
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "uppercase tracking-wide text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "post.category"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Title",
+                  "props": {
+                    "As": 3,
+                    "Size": "xl",
+                    "Weight": "bold"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "post.title"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "and",
+                    "args": [
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "density"
+                          },
+                          "default"
+                        ]
+                      },
+                      {
+                        "op": "ne",
+                        "args": [
+                          {
+                            "$": "meta"
+                          },
+                          "news"
+                        ]
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "post.excerpt"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "ne",
+                    "args": [
+                      {
+                        "$": "meta"
+                      },
+                      "news"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "2",
+                        "Class": "mt-auto flex-wrap pt-2 text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "meta"
+                              },
+                              "full"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "op": "tpl",
+                                    "args": [
+                                      {
+                                        "$": "labels.by"
+                                      },
+                                      {
+                                        "$": "post.author"
+                                      }
+                                    ]
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "post.date"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "meta"
+                              },
+                              "full"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "op": "tpl",
+                                    "args": [
+                                      {
+                                        "$": "labels.minutes"
+                                      },
+                                      {
+                                        "$": "post.minutes"
+                                      }
+                                    ]
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "and",
+                    "args": [
+                      {
+                        "op": "ne",
+                        "args": [
+                          {
+                            "$": "meta"
+                          },
+                          "news"
+                        ]
+                      },
+                      {
+                        "$": "post.href"
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Link",
+                      "props": {
+                        "Href": {
+                          "$": "post.href"
+                        },
+                        "Variant": "default"
+                      },
+                      "attrs": {
+                        "data-testid": "read"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.read"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/post-feature.json b/xgen/specs/organisms/post-feature.json
new file mode 100644
index 0000000..d41d7c2
--- /dev/null
+++ b/xgen/specs/organisms/post-feature.json
@@ -0,0 +1,199 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.post-feature",
+  "name": "PostFeature",
+  "docs": "The featured post of PostShowcase: the category, the title, the excerpt, the author with the date and reading time, and a wide read button.",
+  "records": {},
+  "props": [
+    {
+      "name": "p",
+      "type": {
+        "ts": "Post"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostLabels"
+      },
+      "required": true,
+      "docs": "templates: minutes `{0} min read`, by `By {0}`; and the word of the read link"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch",
+        "Class": "border-t border-border pt-6"
+      },
+      "attrs": {
+        "data-testid": "post-feature"
+      },
+      "children": [
+        {
+          "use": "Badge",
+          "props": {
+            "Variant": "secondary",
+            "Size": "sm",
+            "Class": "w-fit"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "p.category"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Title",
+          "props": {
+            "As": 3,
+            "Size": "xl",
+            "Weight": "semibold"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "p.title"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "p.excerpt"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "p.author"
+                },
+                "ratio": "1/1",
+                "className": "size-10 shrink-0 rounded-full"
+              }
+            },
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "0"
+              },
+              "children": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Weight": "semibold"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "p.author"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "xs",
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "op": "tpl",
+                        "args": [
+                          "{0} · {1}",
+                          {
+                            "$": "p.date"
+                          },
+                          {
+                            "op": "tpl",
+                            "args": [
+                              {
+                                "$": "labels.minutes"
+                              },
+                              {
+                                "$": "p.minutes"
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "default",
+            "Size": "default",
+            "Href": {
+              "$": "p.href"
+            },
+            "Class": "w-full gap-2"
+          },
+          "attrs": {
+            "data-testid": "action-primary"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.read"
+              }
+            },
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "arrow-right",
+                "Size": 16
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post",
+        "PostLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-grid.json b/xgen/specs/organisms/post-grid.json
new file mode 100644
index 0000000..194fb55
--- /dev/null
+++ b/xgen/specs/organisms/post-grid.json
@@ -0,0 +1,604 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.post-grid",
+  "name": "PostGrid",
+  "docs": "A section with a heading and the posts as cards: a grid, a list of horizontal cards, or a magazine (the first post wide, the rest in a grid). Axes: layout (grid, list, magazine), columns, media, meta (full, short, news), filter mode (none, topics), tone, density.",
+  "records": {
+    "PostTopic": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "string"
+      }
+    ],
+    "PostFilter": [
+      {
+        "name": "mode",
+        "type": "\"none\" | \"topics\"",
+        "optional": true,
+        "docs": "topics: tabs above the posts; the page filters by `topic`",
+        "default": "none"
+      },
+      {
+        "name": "topics",
+        "type": "PostTopic[]",
+        "optional": true,
+        "docs": "the topic tabs"
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": true,
+        "docs": "accessible name of the topic tabs"
+      },
+      {
+        "name": "topic",
+        "type": "string",
+        "optional": true,
+        "docs": "the value of the chosen topic; empty: all posts"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "posts",
+      "type": {
+        "ts": "Post[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "action",
+      "type": {
+        "ts": "HeadLink"
+      },
+      "docs": "optional link opposite the heading (All posts)"
+    },
+    {
+      "name": "filter",
+      "type": {
+        "record": "PostFilter"
+      },
+      "docs": "the topic tabs and the chosen topic"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"list\" | \"magazine\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-2\" | \"1-3\" | \"1-4\""
+      },
+      "default": "1-3"
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"image\" | \"none\""
+      },
+      "default": "image"
+    },
+    {
+      "name": "meta",
+      "type": {
+        "ts": "\"full\" | \"short\" | \"news\""
+      },
+      "default": "full"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "topic",
+      "args": [
+        {
+          "name": "value",
+          "type": "string"
+        }
+      ],
+      "docs": "a topic tab was chosen"
+    }
+  ],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "action": {
+          "$": "action"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "density"
+                },
+                "compact"
+              ]
+            },
+            "compact",
+            "default"
+          ]
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "meta"
+                },
+                "news"
+              ]
+            },
+            "fill",
+            "default"
+          ]
+        },
+        "className": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "meta"
+                },
+                "news"
+              ]
+            },
+            "py-0",
+            ""
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "filter.mode"
+                  },
+                  "topics"
+                ]
+              },
+              "then": [
+                {
+                  "organism": "Switcher",
+                  "props": {
+                    "label": {
+                      "$": "filter.label"
+                    }
+                  },
+                  "slots": {
+                    "children": {
+                      "args": [],
+                      "do": [
+                        {
+                          "each": {
+                            "$": "filter.topics"
+                          },
+                          "as": "tab",
+                          "key": {
+                            "$": "tab.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "SwitcherItem",
+                              "props": {
+                                "active": {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "tab.value"
+                                    },
+                                    {
+                                      "$": "filter.topic"
+                                    }
+                                  ]
+                                }
+                              },
+                              "on": {
+                                "click": {
+                                  "call": "emit.topic",
+                                  "args": [
+                                    {
+                                      "$": "tab.value"
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "text": {
+                                        "$": "tab.title"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "op": "where",
+                        "args": [
+                          {
+                            "$": "posts"
+                          },
+                          "category",
+                          {
+                            "$": "filter.topic"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "magazine"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "6",
+                        "Align": "stretch"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "op": "where",
+                            "args": [
+                              {
+                                "$": "posts"
+                              },
+                              "category",
+                              {
+                                "$": "filter.topic"
+                              }
+                            ]
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "when": {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "i"
+                                  },
+                                  0
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "organism": "PostCard",
+                                  "props": {
+                                    "post": {
+                                      "$": "p"
+                                    },
+                                    "labels": {
+                                      "$": "labels"
+                                    },
+                                    "layout": "horizontal",
+                                    "media": {
+                                      "$": "media"
+                                    },
+                                    "meta": {
+                                      "$": "meta"
+                                    },
+                                    "density": {
+                                      "$": "density"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        },
+                        {
+                          "use": "Grid",
+                          "props": {
+                            "Cols": {
+                              "$": "cols"
+                            },
+                            "Class": "gap-6"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "op": "where",
+                                "args": [
+                                  {
+                                    "$": "posts"
+                                  },
+                                  "category",
+                                  {
+                                    "$": "filter.topic"
+                                  }
+                                ]
+                              },
+                              "as": "p",
+                              "key": {
+                                "$": "p.id"
+                              },
+                              "do": [
+                                {
+                                  "when": {
+                                    "op": "gt",
+                                    "args": [
+                                      {
+                                        "$": "i"
+                                      },
+                                      0
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "organism": "PostCard",
+                                      "props": {
+                                        "post": {
+                                          "$": "p"
+                                        },
+                                        "labels": {
+                                          "$": "labels"
+                                        },
+                                        "media": {
+                                          "$": "media"
+                                        },
+                                        "meta": {
+                                          "$": "meta"
+                                        },
+                                        "density": {
+                                          "$": "density"
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ],
+                              "index": "i"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "list"
+                              ]
+                            },
+                            "1",
+                            {
+                              "op": "fitCols",
+                              "args": [
+                                {
+                                  "$": "cols"
+                                },
+                                {
+                                  "op": "len",
+                                  "args": [
+                                    {
+                                      "op": "where",
+                                      "args": [
+                                        {
+                                          "$": "posts"
+                                        },
+                                        "category",
+                                        {
+                                          "$": "filter.topic"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        "Class": "w-full gap-6"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "op": "where",
+                            "args": [
+                              {
+                                "$": "posts"
+                              },
+                              "category",
+                              {
+                                "$": "filter.topic"
+                              }
+                            ]
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "PostCard",
+                              "props": {
+                                "post": {
+                                  "$": "p"
+                                },
+                                "labels": {
+                                  "$": "labels"
+                                },
+                                "layout": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "layout"
+                                        },
+                                        "list"
+                                      ]
+                                    },
+                                    "horizontal",
+                                    "vertical"
+                                  ]
+                                },
+                                "media": {
+                                  "$": "media"
+                                },
+                                "meta": {
+                                  "$": "meta"
+                                },
+                                "density": {
+                                  "$": "density"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post",
+        "PostLabels"
+      ]
+    },
+    {
+      "from": "SectionFrame",
+      "names": [
+        "HeadLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-header.json b/xgen/specs/organisms/post-header.json
new file mode 100644
index 0000000..11af25d
--- /dev/null
+++ b/xgen/specs/organisms/post-header.json
@@ -0,0 +1,316 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.post-header",
+  "name": "PostHeader",
+  "docs": "The top of a post page: category, title, excerpt, the author line and an optional wide cover. Axes: layout (start, center), cover (show, hide), meta (full, short), tone.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "post",
+      "type": {
+        "ts": "Post"
+      },
+      "docs": "the post; without one: the empty state"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "default": "start"
+    },
+    {
+      "name": "cover",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "meta",
+      "type": {
+        "ts": "\"full\" | \"short\""
+      },
+      "default": "full"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "$": "post"
+      },
+      "then": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "post.title"
+            },
+            "lead": {
+              "$": "post.excerpt"
+            },
+            "heading": {
+              "level": {
+                "$": "level"
+              }
+            },
+            "align": {
+              "$": "layout"
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "media": {
+              "show": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "cover"
+                  },
+                  "show"
+                ]
+              }
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Justify": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "center"
+                          ]
+                        },
+                        "center",
+                        "start"
+                      ]
+                    },
+                    "Class": "flex-wrap"
+                  },
+                  "attrs": {
+                    "data-testid": "post-meta"
+                  },
+                  "children": [
+                    {
+                      "organism": "MediaFrame",
+                      "props": {
+                        "alt": {
+                          "$": "post.author"
+                        },
+                        "ratio": "1/1",
+                        "className": "size-10 shrink-0 rounded-full"
+                      }
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Weight": "semibold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "post.author"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "post.date"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "meta"
+                          },
+                          "full"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  {
+                                    "$": "labels.minutes"
+                                  },
+                                  {
+                                    "$": "post.minutes"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "Pill",
+                      "props": {
+                        "tone": "blue"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "text": {
+                                "$": "post.category"
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            "aside": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "post.title"
+                    },
+                    "src": {
+                      "$": "post.image"
+                    },
+                    "ratio": "21/9"
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "heading": {
+              "level": {
+                "$": "level"
+              }
+            },
+            "align": {
+              "$": "layout"
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "file-text",
+                    "title": {
+                      "$": "labels.empty"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post",
+        "PostLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-mini-card.json b/xgen/specs/organisms/post-mini-card.json
new file mode 100644
index 0000000..3ed100a
--- /dev/null
+++ b/xgen/specs/organisms/post-mini-card.json
@@ -0,0 +1,133 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.post-mini-card",
+  "name": "PostMiniCard",
+  "docs": "A small post card of PostShowcase: the picture, the category, the title and the author with the reading time.",
+  "records": {},
+  "props": [
+    {
+      "name": "p",
+      "type": {
+        "ts": "Post"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostLabels"
+      },
+      "required": true,
+      "docs": "templates: minutes `{0} min read`, by `By {0}`; and the word of the read link"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "2",
+        "Align": "stretch",
+        "Class": "rounded bg-card inset-ring inset-ring-border p-2"
+      },
+      "attrs": {
+        "data-testid": "post-mini"
+      },
+      "children": [
+        {
+          "organism": "MediaFrame",
+          "props": {
+            "alt": {
+              "$": "p.title"
+            }
+          }
+        },
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2",
+            "Align": "start",
+            "Class": "p-2"
+          },
+          "children": [
+            {
+              "use": "Badge",
+              "props": {
+                "Variant": "secondary",
+                "Size": "sm"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "p.category"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Title",
+              "props": {
+                "As": 3,
+                "Size": "sm",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "p.title"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "xs",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "op": "tpl",
+                    "args": [
+                      "{0} · {1}",
+                      {
+                        "$": "p.author"
+                      },
+                      {
+                        "op": "tpl",
+                        "args": [
+                          {
+                            "$": "labels.minutes"
+                          },
+                          {
+                            "$": "p.minutes"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post",
+        "PostLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-outline.json b/xgen/specs/organisms/post-outline.json
new file mode 100644
index 0000000..9f83cb4
--- /dev/null
+++ b/xgen/specs/organisms/post-outline.json
@@ -0,0 +1,275 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.post-outline",
+  "name": "PostOutline",
+  "docs": "The facts of a post in a column (author, date, minutes, views), then the related reading as links.",
+  "records": {},
+  "props": [
+    {
+      "name": "post",
+      "type": {
+        "ts": "Post"
+      },
+      "required": true
+    },
+    {
+      "name": "extras",
+      "type": {
+        "ts": "PostExtras"
+      },
+      "required": true,
+      "docs": "the author's role and bio, the reading figures, the tags and the outline"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostSplitLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "6",
+        "Align": "stretch"
+      },
+      "attrs": {
+        "data-testid": "post-outline"
+      },
+      "children": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2",
+            "Align": "start",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "user",
+                    "Size": 16
+                  }
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "post.author"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "calendar",
+                    "Size": 16
+                  }
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "post.date"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "clock",
+                    "Size": 16
+                  }
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "op": "tpl",
+                        "args": [
+                          {
+                            "$": "labels.minutes"
+                          },
+                          {
+                            "$": "post.minutes"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "eye",
+                    "Size": 16
+                  }
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "op": "tpl",
+                        "args": [
+                          {
+                            "$": "labels.views"
+                          },
+                          {
+                            "$": "extras.views"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2",
+            "Align": "stretch",
+            "Class": "border-t border-border pt-4"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "xs",
+                "Weight": "medium",
+                "Class": "uppercase tracking-wide text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.related"
+                  }
+                }
+              ]
+            },
+            {
+              "each": {
+                "$": "extras.outline"
+              },
+              "as": "l",
+              "key": {
+                "$": "l.id"
+              },
+              "do": [
+                {
+                  "organism": "MenuEntry",
+                  "props": {
+                    "href": {
+                      "$": "l.href"
+                    },
+                    "className": "text-sm font-medium",
+                    "size": "sm",
+                    "testid": "post-link"
+                  },
+                  "slots": {
+                    "children": {
+                      "args": [],
+                      "do": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "chevron-right",
+                            "Size": 16
+                          }
+                        },
+                        {
+                          "text": {
+                            "$": "l.name"
+                          }
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post"
+      ]
+    },
+    {
+      "from": "PostSplit",
+      "names": [
+        "PostExtras",
+        "PostSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-overlay-card.json b/xgen/specs/organisms/post-overlay-card.json
new file mode 100644
index 0000000..ceca653
--- /dev/null
+++ b/xgen/specs/organisms/post-overlay-card.json
@@ -0,0 +1,199 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.post-overlay-card",
+  "name": "PostOverlayCard",
+  "docs": "A post card of PostShowcase with the text on a panel over the lower part of the picture: the category and date, the title, the excerpt and a read link.",
+  "records": {},
+  "props": [
+    {
+      "name": "p",
+      "type": {
+        "ts": "Post"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostLabels"
+      },
+      "required": true,
+      "docs": "templates: minutes `{0} min read`, by `By {0}`; and the word of the read link"
+    },
+    {
+      "name": "ratio",
+      "type": {
+        "ts": "\"4/3\" | \"16/9\""
+      },
+      "default": "4/3"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "relative overflow-hidden rounded"
+      },
+      "attrs": {
+        "data-testid": "post-overlay"
+      },
+      "children": [
+        {
+          "organism": "MediaFrame",
+          "props": {
+            "alt": {
+              "$": "p.title"
+            },
+            "ratio": {
+              "$": "ratio"
+            },
+            "className": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "ratio"
+                    },
+                    "4/3"
+                  ]
+                },
+                "min-h-80",
+                "min-h-64"
+              ]
+            }
+          }
+        },
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "2",
+            "Align": "start",
+            "Class": "absolute bottom-4 left-4 right-4 rounded bg-background p-4"
+          },
+          "children": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center"
+              },
+              "children": [
+                {
+                  "use": "Badge",
+                  "props": {
+                    "Variant": "secondary",
+                    "Size": "sm"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "p.category"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "xs",
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "p.date"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Title",
+              "props": {
+                "As": 3,
+                "Size": "base",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "p.title"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "text-muted-foreground",
+                    "line-clamp-2"
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "p.excerpt"
+                  }
+                }
+              ]
+            },
+            {
+              "organism": "MenuEntry",
+              "props": {
+                "href": {
+                  "$": "p.href"
+                },
+                "className": "gap-2 text-sm font-medium",
+                "size": "sm",
+                "testid": "read"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "text": {
+                        "$": "labels.read"
+                      }
+                    },
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "arrow-right",
+                        "Size": 16
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post",
+        "PostLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-showcase.json b/xgen/specs/organisms/post-showcase.json
new file mode 100644
index 0000000..7ab15c5
--- /dev/null
+++ b/xgen/specs/organisms/post-showcase.json
@@ -0,0 +1,531 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.post-showcase",
+  "name": "PostShowcase",
+  "docs": "Posts shown off. Axes: layout (intro: four small post cards beside the intro with a view-all link, featured: the first post in detail beside its picture, overlay: cards with the text over the picture), cols (2, 3: overlay columns), mediaSide, tone.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "posts",
+      "type": {
+        "ts": "Post[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "action",
+      "type": {
+        "ts": "HeadLink"
+      },
+      "required": true,
+      "docs": "the view-all link of the intro layout"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"intro\" | \"featured\" | \"overlay\""
+      },
+      "default": "intro"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"2\" | \"3\""
+      },
+      "default": "3"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "start"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "posts"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "title"
+            },
+            "lead": {
+              "$": "lead"
+            },
+            "heading": {
+              "badge": {
+                "$": "badge"
+              }
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "newspaper",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "intro"
+            ]
+          },
+          "then": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "layout": "split",
+                "media": {
+                  "show": true,
+                  "side": {
+                    "$": "mediaSide"
+                  }
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Link",
+                      "props": {
+                        "Href": {
+                          "$": "action.href"
+                        },
+                        "Size": "sm"
+                      },
+                      "attrs": {
+                        "data-testid": "section-action"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "action.label"
+                          }
+                        },
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "arrow-right",
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                "aside": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "grid grid-cols-1 gap-4 sm:grid-cols-2"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "posts"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "when": {
+                                "op": "lt",
+                                "args": [
+                                  {
+                                    "$": "i"
+                                  },
+                                  4
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "organism": "PostMiniCard",
+                                  "props": {
+                                    "p": {
+                                      "$": "p"
+                                    },
+                                    "labels": {
+                                      "$": "labels"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "else": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "featured"
+                ]
+              },
+              "then": [
+                {
+                  "organism": "SectionFrame",
+                  "props": {
+                    "id": {
+                      "$": "id"
+                    },
+                    "title": {
+                      "$": "title"
+                    },
+                    "lead": {
+                      "$": "lead"
+                    },
+                    "heading": {
+                      "badge": {
+                        "$": "badge"
+                      }
+                    },
+                    "tone": {
+                      "$": "tone"
+                    },
+                    "layout": "split",
+                    "media": {
+                      "show": true,
+                      "side": {
+                        "$": "mediaSide"
+                      }
+                    },
+                    "landmarkLabel": {
+                      "$": "landmarkLabel"
+                    }
+                  },
+                  "slots": {
+                    "children": {
+                      "args": [],
+                      "do": [
+                        {
+                          "each": {
+                            "$": "posts"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "when": {
+                                "op": "lt",
+                                "args": [
+                                  {
+                                    "$": "i"
+                                  },
+                                  1
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "organism": "PostFeature",
+                                  "props": {
+                                    "p": {
+                                      "$": "p"
+                                    },
+                                    "labels": {
+                                      "$": "labels"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    },
+                    "aside": {
+                      "args": [],
+                      "do": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "title"
+                            },
+                            "ratio": "4/3"
+                          }
+                        }
+                      ]
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "organism": "SectionFrame",
+                  "props": {
+                    "id": {
+                      "$": "id"
+                    },
+                    "title": {
+                      "$": "title"
+                    },
+                    "lead": {
+                      "$": "lead"
+                    },
+                    "heading": {
+                      "badge": {
+                        "$": "badge"
+                      }
+                    },
+                    "tone": {
+                      "$": "tone"
+                    },
+                    "landmarkLabel": {
+                      "$": "landmarkLabel"
+                    }
+                  },
+                  "slots": {
+                    "children": {
+                      "args": [],
+                      "do": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "cols"
+                                    },
+                                    "2"
+                                  ]
+                                },
+                                "grid grid-cols-1 gap-6 md:grid-cols-2",
+                                "grid grid-cols-1 gap-6 md:grid-cols-3"
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "posts"
+                              },
+                              "as": "p",
+                              "key": {
+                                "$": "p.id"
+                              },
+                              "do": [
+                                {
+                                  "when": {
+                                    "op": "lt",
+                                    "args": [
+                                      {
+                                        "$": "i"
+                                      },
+                                      {
+                                        "op": "cond",
+                                        "args": [
+                                          {
+                                            "op": "eq",
+                                            "args": [
+                                              {
+                                                "$": "cols"
+                                              },
+                                              "2"
+                                            ]
+                                          },
+                                          2,
+                                          3
+                                        ]
+                                      }
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "organism": "PostOverlayCard",
+                                      "props": {
+                                        "p": {
+                                          "$": "p"
+                                        },
+                                        "labels": {
+                                          "$": "labels"
+                                        },
+                                        "ratio": {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "cols"
+                                                },
+                                                "2"
+                                              ]
+                                            },
+                                            "16/9",
+                                            "4/3"
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ],
+                              "index": "i"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post",
+        "PostLabels"
+      ]
+    },
+    {
+      "from": "SectionFrame",
+      "names": [
+        "HeadLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-split.json b/xgen/specs/organisms/post-split.json
new file mode 100644
index 0000000..40e4269
--- /dev/null
+++ b/xgen/specs/organisms/post-split.json
@@ -0,0 +1,541 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.post-split",
+  "name": "PostSplit",
+  "docs": "A post header with the author, the reading figures, the tags and the actions. Axes: layout (center: tags, figures and an author card with share and save over a wide cover; split: beside the cover; outline: facts and related reading beside the cover), mediaSide, author (line, card, bio), cover (wide, square), actions (pair, wide, icons), tone.",
+  "records": {
+    "PostExtras": [
+      {
+        "name": "role",
+        "type": "string"
+      },
+      {
+        "name": "bio",
+        "type": "string"
+      },
+      {
+        "name": "views",
+        "type": "string"
+      },
+      {
+        "name": "likes",
+        "type": "string"
+      },
+      {
+        "name": "tags",
+        "type": "NavLink[]"
+      },
+      {
+        "name": "outline",
+        "type": "NavLink[]"
+      }
+    ],
+    "PostSplitLabels": [
+      {
+        "name": "minutes",
+        "type": "string"
+      },
+      {
+        "name": "views",
+        "type": "string"
+      },
+      {
+        "name": "likes",
+        "type": "string"
+      },
+      {
+        "name": "share",
+        "type": "string"
+      },
+      {
+        "name": "save",
+        "type": "string"
+      },
+      {
+        "name": "read",
+        "type": "string"
+      },
+      {
+        "name": "related",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "post",
+      "type": {
+        "ts": "Post"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "PostSplitLabels"
+      },
+      "required": true,
+      "docs": "templates: minutes `{0} min read`, views `{0} views`, likes `{0} likes`; the words of the buttons and of the related heading"
+    },
+    {
+      "name": "extras",
+      "type": {
+        "record": "PostExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"center\" | \"split\" | \"outline\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "author",
+      "type": {
+        "ts": "\"line\" | \"card\" | \"bio\""
+      },
+      "default": "line"
+    },
+    {
+      "name": "cover",
+      "type": {
+        "ts": "\"wide\" | \"square\""
+      },
+      "default": "wide"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "\"pair\" | \"wide\" | \"icons\""
+      },
+      "default": "pair"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "layout"
+          },
+          "center"
+        ]
+      },
+      "then": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "post.title"
+            },
+            "lead": {
+              "$": "post.excerpt"
+            },
+            "heading": {
+              "badge": {
+                "$": "post.category"
+              },
+              "level": {
+                "$": "level"
+              }
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "media": {
+              "show": true
+            },
+            "align": "center",
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "extras.tags"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "PostTags",
+                      "props": {
+                        "tags": {
+                          "$": "extras.tags"
+                        },
+                        "align": "center"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "organism": "PostStats",
+                  "props": {
+                    "post": {
+                      "$": "post"
+                    },
+                    "extras": {
+                      "$": "extras"
+                    },
+                    "labels": {
+                      "$": "labels"
+                    },
+                    "align": "center"
+                  }
+                },
+                {
+                  "organism": "PostAuthor",
+                  "props": {
+                    "post": {
+                      "$": "post"
+                    },
+                    "extras": {
+                      "$": "extras"
+                    },
+                    "labels": {
+                      "$": "labels"
+                    },
+                    "mode": "card",
+                    "share": true,
+                    "className": "mx-auto w-full max-w-md"
+                  }
+                }
+              ]
+            },
+            "aside": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "post.title"
+                    },
+                    "ratio": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "center"
+                          ]
+                        },
+                        "21/9",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "cover"
+                                },
+                                "square"
+                              ]
+                            },
+                            "1/1",
+                            "4/3"
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "post.title"
+            },
+            "lead": {
+              "$": "post.excerpt"
+            },
+            "heading": {
+              "badge": {
+                "$": "post.category"
+              },
+              "level": {
+                "$": "level"
+              }
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "media": {
+              "show": true,
+              "side": {
+                "$": "mediaSide"
+              }
+            },
+            "layout": "split",
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "outline"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "when": {
+                        "op": "gt",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "extras.outline"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "PostOutline",
+                          "props": {
+                            "post": {
+                              "$": "post"
+                            },
+                            "extras": {
+                              "$": "extras"
+                            },
+                            "labels": {
+                              "$": "labels"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "organism": "PostAuthor",
+                      "props": {
+                        "post": {
+                          "$": "post"
+                        },
+                        "extras": {
+                          "$": "extras"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        },
+                        "mode": {
+                          "$": "author"
+                        }
+                      }
+                    },
+                    {
+                      "when": {
+                        "op": "ne",
+                        "args": [
+                          {
+                            "$": "author"
+                          },
+                          "line"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "PostStats",
+                          "props": {
+                            "post": {
+                              "$": "post"
+                            },
+                            "extras": {
+                              "$": "extras"
+                            },
+                            "labels": {
+                              "$": "labels"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "gt",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "extras.tags"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "PostTags",
+                          "props": {
+                            "tags": {
+                              "$": "extras.tags"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "organism": "PostActions",
+                  "props": {
+                    "labels": {
+                      "$": "labels"
+                    },
+                    "mode": {
+                      "$": "actions"
+                    }
+                  }
+                }
+              ]
+            },
+            "aside": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "post.title"
+                    },
+                    "ratio": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "center"
+                          ]
+                        },
+                        "21/9",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "cover"
+                                },
+                                "square"
+                              ]
+                            },
+                            "1/1",
+                            "4/3"
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post"
+      ]
+    },
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-stats.json b/xgen/specs/organisms/post-stats.json
new file mode 100644
index 0000000..5b026b0
--- /dev/null
+++ b/xgen/specs/organisms/post-stats.json
@@ -0,0 +1,189 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.post-stats",
+  "name": "PostStats",
+  "docs": "The reading figures of a post: minutes to read, views and likes, each with its glyph.",
+  "records": {},
+  "props": [
+    {
+      "name": "post",
+      "type": {
+        "ts": "Post"
+      },
+      "required": true
+    },
+    {
+      "name": "extras",
+      "type": {
+        "ts": "PostExtras"
+      },
+      "required": true,
+      "docs": "the author's role and bio, the reading figures, the tags and the outline"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PostSplitLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "align",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "default": "start"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Group",
+      "props": {
+        "Gap": "4",
+        "Align": "center",
+        "Justify": {
+          "$": "align"
+        },
+        "Class": "flex-wrap text-muted-foreground"
+      },
+      "attrs": {
+        "data-testid": "post-stats"
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "clock",
+                "Size": 16
+              }
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm"
+              },
+              "children": [
+                {
+                  "text": {
+                    "op": "tpl",
+                    "args": [
+                      {
+                        "$": "labels.minutes"
+                      },
+                      {
+                        "$": "post.minutes"
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "eye",
+                "Size": 16
+              }
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm"
+              },
+              "children": [
+                {
+                  "text": {
+                    "op": "tpl",
+                    "args": [
+                      {
+                        "$": "labels.views"
+                      },
+                      {
+                        "$": "extras.views"
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "heart",
+                "Size": 16
+              }
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm"
+              },
+              "children": [
+                {
+                  "text": {
+                    "op": "tpl",
+                    "args": [
+                      {
+                        "$": "labels.likes"
+                      },
+                      {
+                        "$": "extras.likes"
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PostCard",
+      "names": [
+        "Post"
+      ]
+    },
+    {
+      "from": "PostSplit",
+      "names": [
+        "PostExtras",
+        "PostSplitLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/post-tags.json b/xgen/specs/organisms/post-tags.json
new file mode 100644
index 0000000..8fe0ab2
--- /dev/null
+++ b/xgen/specs/organisms/post-tags.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.post-tags",
+  "name": "PostTags",
+  "docs": "The tags of a post as small badges in a wrapping row.",
+  "records": {},
+  "props": [
+    {
+      "name": "tags",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "required": true
+    },
+    {
+      "name": "align",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "default": "start"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Group",
+      "props": {
+        "Gap": "2",
+        "Justify": {
+          "$": "align"
+        },
+        "Class": "flex-wrap"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "tags"
+          },
+          "as": "tag",
+          "key": {
+            "$": "tag.id"
+          },
+          "do": [
+            {
+              "use": "Badge",
+              "props": {
+                "Variant": "secondary",
+                "Size": "sm"
+              },
+              "attrs": {
+                "data-testid": "post-tag"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "tag.name"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/pricing-card.json b/xgen/specs/organisms/pricing-card.json
new file mode 100644
index 0000000..1521c1f
--- /dev/null
+++ b/xgen/specs/organisms/pricing-card.json
@@ -0,0 +1,581 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.pricing-card",
+  "name": "PricingCard",
+  "docs": "A plan as a card: name, tagline, price per month, the features, a call to action and an optional slot for more actions. Text comes in through `labels`; the plan is data.",
+  "records": {
+    "Plan": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "tagline",
+        "type": "string"
+      },
+      {
+        "name": "price",
+        "type": "number"
+      },
+      {
+        "name": "currency",
+        "type": "string"
+      },
+      {
+        "name": "seats",
+        "type": "number"
+      },
+      {
+        "name": "storage",
+        "type": "number"
+      },
+      {
+        "name": "highlighted",
+        "type": "boolean"
+      },
+      {
+        "name": "status",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "features",
+        "type": "string[]"
+      },
+      {
+        "name": "yearly",
+        "type": "number"
+      }
+    ],
+    "PricingCardLabels": [
+      {
+        "name": "popular",
+        "type": "string"
+      },
+      {
+        "name": "perMonth",
+        "type": "string"
+      },
+      {
+        "name": "seats",
+        "type": "string"
+      },
+      {
+        "name": "storage",
+        "type": "string"
+      },
+      {
+        "name": "cta",
+        "type": "string"
+      },
+      {
+        "name": "free",
+        "type": "string"
+      },
+      {
+        "name": "perYear",
+        "type": "string"
+      },
+      {
+        "name": "empty",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "plan",
+      "type": {
+        "record": "Plan"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "PricingCardLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "current",
+      "type": "boolean",
+      "docs": "marks the plan as the chosen one"
+    },
+    {
+      "name": "emphasis",
+      "type": {
+        "ts": "\"auto\" | \"off\""
+      },
+      "default": "auto",
+      "docs": "auto: the highlighted plan stands out; off: all plans alike"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default",
+      "docs": "compact: tighter content"
+    },
+    {
+      "name": "billing",
+      "type": {
+        "ts": "\"monthly\" | \"annual\""
+      },
+      "default": "monthly",
+      "docs": "annual: the yearly price of the plan, when it has one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "stand",
+      "value": {
+        "op": "and",
+        "args": [
+          {
+            "$": "plan.highlighted"
+          },
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "emphasis"
+              },
+              "auto"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "name": "yearlyOn",
+      "value": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "billing"
+              },
+              "annual"
+            ]
+          },
+          {
+            "op": "gt",
+            "args": [
+              {
+                "$": "plan.yearly"
+              },
+              0
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "name": "amount",
+      "value": {
+        "op": "cond",
+        "args": [
+          {
+            "$": "yearlyOn"
+          },
+          {
+            "$": "plan.yearly"
+          },
+          {
+            "$": "plan.price"
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [
+    {
+      "name": "footer",
+      "args": [
+        {
+          "name": "plan",
+          "type": {
+            "record": "Plan"
+          }
+        }
+      ],
+      "docs": "more content in the footer; receives the plan"
+    }
+  ],
+  "events": [
+    {
+      "name": "select",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "the call to action was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "article",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+            "flex h-full flex-col"
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "card",
+        "data-highlighted": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "stand"
+            },
+            "true",
+            "false"
+          ]
+        },
+        "data-current": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "current"
+            },
+            "true",
+            "false"
+          ]
+        }
+      },
+      "children": [
+        {
+          "use": "CardHeader",
+          "props": {
+            "Class": "flex flex-col gap-2"
+          },
+          "children": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "flex min-h-6 items-center"
+              },
+              "attrs": {
+                "data-slot": "badge-slot"
+              },
+              "children": [
+                {
+                  "when": {
+                    "$": "stand"
+                  },
+                  "then": [
+                    {
+                      "use": "Badge",
+                      "props": {
+                        "Variant": "default",
+                        "Size": "default"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.popular"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "CardTitle",
+              "props": {
+                "As": 3
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "plan.name"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "CardDescription",
+              "children": [
+                {
+                  "text": {
+                    "$": "plan.tagline"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "CardContent",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "flex flex-1 flex-col",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "density"
+                        },
+                        "compact"
+                      ]
+                    },
+                    "gap-2",
+                    "gap-4"
+                  ]
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "baseline"
+              },
+              "children": [
+                {
+                  "use": "Title",
+                  "props": {
+                    "As": 2,
+                    "Size": "4xl",
+                    "Weight": "bold"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "amount"
+                          },
+                          0
+                        ]
+                      },
+                      "then": [
+                        {
+                          "text": {
+                            "$": "labels.free"
+                          }
+                        }
+                      ],
+                      "else": [
+                        {
+                          "text": {
+                            "op": "money",
+                            "args": [
+                              {
+                                "$": "amount"
+                              },
+                              {
+                                "$": "plan.currency"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "$": "amount"
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "op": "cond",
+                            "args": [
+                              {
+                                "$": "yearlyOn"
+                              },
+                              {
+                                "$": "labels.perYear"
+                              },
+                              {
+                                "$": "labels.perMonth"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Weight": "medium"
+              },
+              "children": [
+                {
+                  "text": {
+                    "op": "tpl",
+                    "args": [
+                      {
+                        "$": "labels.seats"
+                      },
+                      {
+                        "$": "plan.seats"
+                      }
+                    ]
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "op": "tpl",
+                    "args": [
+                      {
+                        "$": "labels.storage"
+                      },
+                      {
+                        "$": "plan.storage"
+                      }
+                    ]
+                  }
+                }
+              ]
+            },
+            {
+              "use": "List",
+              "props": {
+                "Tag": "ul",
+                "Class": "flex flex-col gap-2 text-sm"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "plan.features"
+                  },
+                  "as": "feature",
+                  "key": {
+                    "$": "feature"
+                  },
+                  "do": [
+                    {
+                      "use": "ListItem",
+                      "props": {
+                        "Class": "flex gap-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "feature"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "CardFooter",
+          "props": {
+            "Class": "flex flex-wrap items-center gap-2"
+          },
+          "children": [
+            {
+              "use": "Button",
+              "props": {
+                "Variant": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "stand"
+                    },
+                    "default",
+                    "outline"
+                  ]
+                },
+                "Size": "default"
+              },
+              "attrs": {
+                "data-testid": "plan-select"
+              },
+              "on": {
+                "click": {
+                  "call": "emit.select",
+                  "args": [
+                    {
+                      "$": "plan.id"
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.cta"
+                  }
+                }
+              ]
+            },
+            {
+              "slot": "footer",
+              "args": [
+                {
+                  "$": "plan"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/pricing-tiers.json b/xgen/specs/organisms/pricing-tiers.json
new file mode 100644
index 0000000..86065f7
--- /dev/null
+++ b/xgen/specs/organisms/pricing-tiers.json
@@ -0,0 +1,452 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.pricing-tiers",
+  "name": "PricingTiers",
+  "docs": "A section with a heading and one PricingCard per plan; an empty state when there are none. Axes: layout (grid, stack), columns, emphasis, billing (off: no toggle; monthly or annual: a toggle with that choice selected, and the prices of that period), density, tone.",
+  "records": {
+    "BillingLabels": [
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "monthly",
+        "type": "string"
+      },
+      {
+        "name": "annual",
+        "type": "string"
+      },
+      {
+        "name": "save",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "plans",
+      "type": {
+        "ts": "Plan[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "PricingCardLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "billingLabels",
+      "type": {
+        "record": "BillingLabels"
+      },
+      "required": true,
+      "docs": "the toggle's name and choices; unused while `billing` is off"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"stack\""
+      },
+      "default": "grid",
+      "docs": "stack: one narrow column of cards"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-2\" | \"1-3\" | \"1-4\""
+      },
+      "default": "1-3"
+    },
+    {
+      "name": "emphasis",
+      "type": {
+        "ts": "\"auto\" | \"off\""
+      },
+      "default": "auto"
+    },
+    {
+      "name": "billing",
+      "type": {
+        "ts": "\"off\" | \"monthly\" | \"annual\""
+      },
+      "default": "off"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "select",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "the call to action of a plan was pressed"
+    },
+    {
+      "name": "billing",
+      "args": [
+        {
+          "name": "period",
+          "type": "string"
+        }
+      ],
+      "docs": "the other billing period was chosen"
+    }
+  ],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "stack"
+              ]
+            },
+            "md",
+            "default"
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "ne",
+                "args": [
+                  {
+                    "$": "billing"
+                  },
+                  "off"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Justify": "center",
+                    "Class": "flex-wrap"
+                  },
+                  "attrs": {
+                    "data-testid": "billing"
+                  },
+                  "children": [
+                    {
+                      "organism": "Switcher",
+                      "props": {
+                        "label": {
+                          "$": "billingLabels.label"
+                        }
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "organism": "SwitcherItem",
+                              "props": {
+                                "active": {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "billing"
+                                    },
+                                    "monthly"
+                                  ]
+                                }
+                              },
+                              "on": {
+                                "click": {
+                                  "call": "emit.billing",
+                                  "args": [
+                                    "monthly"
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "text": {
+                                        "$": "billingLabels.monthly"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              "organism": "SwitcherItem",
+                              "props": {
+                                "active": {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "billing"
+                                    },
+                                    "annual"
+                                  ]
+                                }
+                              },
+                              "on": {
+                                "click": {
+                                  "call": "emit.billing",
+                                  "args": [
+                                    "annual"
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "text": {
+                                        "$": "billingLabels.annual"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Badge",
+                      "props": {
+                        "Variant": "default",
+                        "Size": "default"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "billingLabels.save"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "plans"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "layers",
+                    "title": {
+                      "$": "labels.empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "stack"
+                          ]
+                        },
+                        "1",
+                        {
+                          "op": "fitCols",
+                          "args": [
+                            {
+                              "$": "cols"
+                            },
+                            {
+                              "op": "len",
+                              "args": [
+                                {
+                                  "$": "plans"
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    "Class": "gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "tiers"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "plans"
+                      },
+                      "as": "plan",
+                      "key": {
+                        "$": "plan.id"
+                      },
+                      "do": [
+                        {
+                          "organism": "PricingCard",
+                          "props": {
+                            "plan": {
+                              "$": "plan"
+                            },
+                            "labels": {
+                              "$": "labels"
+                            },
+                            "emphasis": {
+                              "$": "emphasis"
+                            },
+                            "billing": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "billing"
+                                    },
+                                    "annual"
+                                  ]
+                                },
+                                "annual",
+                                "monthly"
+                              ]
+                            },
+                            "density": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "density"
+                                    },
+                                    "compact"
+                                  ]
+                                },
+                                "compact",
+                                "default"
+                              ]
+                            }
+                          },
+                          "on": {
+                            "select": {
+                              "call": "emit.select",
+                              "args": [
+                                {
+                                  "$": "plan.id"
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "PricingCard",
+      "names": [
+        "Plan",
+        "PricingCardLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/product-card.json b/xgen/specs/organisms/product-card.json
new file mode 100644
index 0000000..ce9dd4a
--- /dev/null
+++ b/xgen/specs/organisms/product-card.json
@@ -0,0 +1,632 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.product-card",
+  "name": "ProductCard",
+  "docs": "A product as a card: picture, optional badge, category, name, rating, summary, price (and the old price struck through when `compareAt` is higher) and an add button. Axes: layout (vertical, horizontal), media (image, none), ratio, rating (show, hide), action (button, none), density.",
+  "records": {
+    "Product": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "summary",
+        "type": "string"
+      },
+      {
+        "name": "price",
+        "type": "number"
+      },
+      {
+        "name": "currency",
+        "type": "string"
+      },
+      {
+        "name": "rating",
+        "type": "number"
+      },
+      {
+        "name": "reviews",
+        "type": "number"
+      },
+      {
+        "name": "badge",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "category",
+        "type": "string"
+      },
+      {
+        "name": "inStock",
+        "type": "boolean"
+      },
+      {
+        "name": "compareAt",
+        "type": "number",
+        "optional": true
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "image",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "ProductLabels": [
+      {
+        "name": "add",
+        "type": "string"
+      },
+      {
+        "name": "soldOut",
+        "type": "string"
+      },
+      {
+        "name": "reviews",
+        "type": "string"
+      },
+      {
+        "name": "ratingLabel",
+        "type": "string"
+      },
+      {
+        "name": "was",
+        "type": "string"
+      },
+      {
+        "name": "empty",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "product",
+      "type": {
+        "record": "Product"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "ProductLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "badges",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "required": true,
+      "docs": "badge word by product badge (new, sale)"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"vertical\" | \"horizontal\""
+      },
+      "default": "vertical"
+    },
+    {
+      "name": "media",
+      "type": {
+        "ts": "\"image\" | \"none\""
+      },
+      "default": "image"
+    },
+    {
+      "name": "ratio",
+      "type": {
+        "ts": "\"4/3\" | \"1/1\" | \"3/4\""
+      },
+      "default": "4/3"
+    },
+    {
+      "name": "rating",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "action",
+      "type": {
+        "ts": "\"button\" | \"none\""
+      },
+      "default": "button"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "add",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "the add button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "article",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+            "h-full gap-4 overflow-hidden",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "layout"
+                    },
+                    "horizontal"
+                  ]
+                },
+                "flex flex-col sm:flex-row",
+                "flex flex-col"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "card",
+        "data-testid": "item",
+        "data-layout": {
+          "$": "layout"
+        }
+      },
+      "children": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "media"
+              },
+              "image"
+            ]
+          },
+          "then": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "relative shrink-0",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "horizontal"
+                          ]
+                        },
+                        "sm:w-48",
+                        ""
+                      ]
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "product.name"
+                    },
+                    "src": {
+                      "$": "product.image"
+                    },
+                    "ratio": {
+                      "$": "ratio"
+                    },
+                    "className": "h-full"
+                  }
+                },
+                {
+                  "when": {
+                    "$": "product.badge"
+                  },
+                  "then": [
+                    {
+                      "use": "Badge",
+                      "props": {
+                        "Variant": "default",
+                        "Size": "default",
+                        "Class": "absolute left-4 top-4"
+                      },
+                      "attrs": {
+                        "data-testid": "badge"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "op": "at",
+                            "args": [
+                              {
+                                "$": "badges"
+                              },
+                              {
+                                "$": "product.badge"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "CardContent",
+          "props": {
+            "Class": "flex flex-1 flex-col gap-2"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "xs",
+                "Class": "uppercase tracking-wide text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "product.category"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Title",
+              "props": {
+                "As": 3,
+                "Size": "base",
+                "Weight": "bold"
+              },
+              "children": [
+                {
+                  "when": {
+                    "$": "product.href"
+                  },
+                  "then": [
+                    {
+                      "use": "Link",
+                      "props": {
+                        "Href": {
+                          "$": "product.href"
+                        },
+                        "Variant": "default"
+                      },
+                      "attrs": {
+                        "data-testid": "open"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "product.name"
+                          }
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "text": {
+                        "$": "product.name"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "rating"
+                  },
+                  "show"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2"
+                  },
+                  "children": [
+                    {
+                      "organism": "Rating",
+                      "props": {
+                        "value": {
+                          "$": "product.rating"
+                        },
+                        "label": {
+                          "op": "tpl",
+                          "args": [
+                            {
+                              "$": "labels.ratingLabel"
+                            },
+                            {
+                              "$": "product.rating"
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "op": "tpl",
+                            "args": [
+                              {
+                                "$": "labels.reviews"
+                              },
+                              {
+                                "$": "product.reviews"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "density"
+                  },
+                  "default"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Class": "text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "product.summary"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "4",
+                "Justify": "between",
+                "Class": "mt-auto pt-2"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "baseline",
+                    "Class": "flex-wrap"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xl",
+                        "Weight": "bold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "op": "money",
+                            "args": [
+                              {
+                                "$": "product.price"
+                              },
+                              {
+                                "$": "product.currency"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "and",
+                        "args": [
+                          {
+                            "$": "product.compareAt"
+                          },
+                          {
+                            "op": "gt",
+                            "args": [
+                              {
+                                "$": "product.compareAt"
+                              },
+                              {
+                                "$": "product.price"
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Tag": "del",
+                            "Size": "sm",
+                            "Class": "relative text-muted-foreground"
+                          },
+                          "attrs": {
+                            "data-testid": "compare-at"
+                          },
+                          "children": [
+                            {
+                              "use": "Inline",
+                              "props": {
+                                "Class": "sr-only"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.was"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "$": "product.compareAt"
+                                  },
+                                  {
+                                    "$": "product.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "action"
+                      },
+                      "button"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "product.inStock"
+                            },
+                            "default",
+                            "outline"
+                          ]
+                        },
+                        "Size": "sm",
+                        "Disabled": {
+                          "op": "not",
+                          "args": [
+                            {
+                              "$": "product.inStock"
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "add"
+                      },
+                      "on": {
+                        "click": {
+                          "call": "emit.add",
+                          "args": [
+                            {
+                              "$": "product.id"
+                            }
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "op": "cond",
+                            "args": [
+                              {
+                                "$": "product.inStock"
+                              },
+                              {
+                                "$": "labels.add"
+                              },
+                              {
+                                "$": "labels.soldOut"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/product-detail.json b/xgen/specs/organisms/product-detail.json
new file mode 100644
index 0000000..b9fa573
--- /dev/null
+++ b/xgen/specs/organisms/product-detail.json
@@ -0,0 +1,604 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.product-detail",
+  "name": "ProductDetail",
+  "docs": "A product page: a gallery (the main picture and optional thumbnails) beside the buy box (badge, rating, price, stock, quantity, add button, shipping and returns notes). Axes: layout (split, stacked), media side, thumbs (none, below), buy (full, compact), tone, density.",
+  "records": {
+    "ProductDetailLabels": [
+      {
+        "name": "add",
+        "type": "string"
+      },
+      {
+        "name": "soldOut",
+        "type": "string"
+      },
+      {
+        "name": "inStock",
+        "type": "string"
+      },
+      {
+        "name": "qty",
+        "type": "string"
+      },
+      {
+        "name": "decrease",
+        "type": "string"
+      },
+      {
+        "name": "increase",
+        "type": "string"
+      },
+      {
+        "name": "reviews",
+        "type": "string"
+      },
+      {
+        "name": "ratingLabel",
+        "type": "string"
+      },
+      {
+        "name": "shipping",
+        "type": "string"
+      },
+      {
+        "name": "returns",
+        "type": "string"
+      },
+      {
+        "name": "was",
+        "type": "string"
+      },
+      {
+        "name": "empty",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "product",
+      "type": {
+        "ts": "Product"
+      },
+      "docs": "the product; without one, the empty state (labels.empty)"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "ProductDetailLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "badges",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "required": true
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"split\" | \"stacked\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"start\" | \"end\""
+      },
+      "default": "start"
+    },
+    {
+      "name": "thumbs",
+      "type": {
+        "ts": "\"none\" | \"below\""
+      },
+      "default": "below"
+    },
+    {
+      "name": "buy",
+      "type": {
+        "ts": "\"full\" | \"compact\""
+      },
+      "default": "full"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"roomy\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "add",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "the add button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "when": {
+        "op": "not",
+        "args": [
+          {
+            "$": "product"
+          }
+        ]
+      },
+      "then": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "density": {
+              "$": "density"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "package",
+                    "title": {
+                      "$": "labels.empty"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "product.name"
+            },
+            "lead": {
+              "$": "product.summary"
+            },
+            "heading": {
+              "level": {
+                "$": "level"
+              }
+            },
+            "layout": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "layout"
+                    },
+                    "split"
+                  ]
+                },
+                "split",
+                "stack"
+              ]
+            },
+            "media": {
+              "show": true,
+              "side": {
+                "$": "mediaSide"
+              },
+              "align": "start"
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "density": {
+              "$": "density"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "stretch"
+                  },
+                  "attrs": {
+                    "data-testid": "buy-box"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "$": "product.category"
+                      },
+                      "then": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "uppercase tracking-wide text-muted-foreground"
+                          },
+                          "attrs": {
+                            "data-testid": "category"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "product.category"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "organism": "ProductPrice",
+                      "props": {
+                        "price": {
+                          "$": "product.price"
+                        },
+                        "compareAt": {
+                          "$": "product.compareAt"
+                        },
+                        "currency": {
+                          "$": "product.currency"
+                        },
+                        "badge": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "product.badge"
+                            },
+                            {
+                              "op": "at",
+                              "args": [
+                                {
+                                  "$": "badges"
+                                },
+                                {
+                                  "$": "product.badge"
+                                }
+                              ]
+                            },
+                            ""
+                          ]
+                        },
+                        "was": {
+                          "$": "labels.was"
+                        }
+                      }
+                    },
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "2"
+                      },
+                      "children": [
+                        {
+                          "organism": "Rating",
+                          "props": {
+                            "value": {
+                              "$": "product.rating"
+                            },
+                            "label": {
+                              "op": "tpl",
+                              "args": [
+                                {
+                                  "$": "labels.ratingLabel"
+                                },
+                                {
+                                  "$": "product.rating"
+                                }
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  {
+                                    "$": "labels.reviews"
+                                  },
+                                  {
+                                    "$": "product.reviews"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Weight": "medium",
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "product.inStock"
+                            },
+                            "text-foreground",
+                            "text-destructive"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "stock"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "op": "cond",
+                            "args": [
+                              {
+                                "$": "product.inStock"
+                              },
+                              {
+                                "$": "labels.inStock"
+                              },
+                              {
+                                "$": "labels.soldOut"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Class": "flex-wrap"
+                      },
+                      "children": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "buy"
+                              },
+                              "full"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "NumberField",
+                              "props": {
+                                "value": "1",
+                                "name": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-qty",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                },
+                                "min": "1",
+                                "label": {
+                                  "$": "labels.qty"
+                                },
+                                "decrease": {
+                                  "$": "labels.decrease"
+                                },
+                                "increase": {
+                                  "$": "labels.increase"
+                                }
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Disabled": {
+                              "op": "not",
+                              "args": [
+                                {
+                                  "$": "product.inStock"
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "add"
+                          },
+                          "on": {
+                            "click": {
+                              "call": "emit.add",
+                              "args": [
+                                {
+                                  "$": "product.id"
+                                }
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.add"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "buy"
+                          },
+                          "full"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "List",
+                          "props": {
+                            "Tag": "ul",
+                            "Class": "flex flex-col gap-2 text-sm text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "use": "ListItem",
+                              "props": {
+                                "Class": "flex items-center gap-2"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "truck",
+                                    "Size": 16
+                                  }
+                                },
+                                {
+                                  "use": "Inline",
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "labels.shipping"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "ListItem",
+                              "props": {
+                                "Class": "flex items-center gap-2"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "shield-check",
+                                    "Size": 16
+                                  }
+                                },
+                                {
+                                  "use": "Inline",
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "labels.returns"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            "aside": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "ProductGallery",
+                  "props": {
+                    "name": {
+                      "$": "product.name"
+                    },
+                    "image": {
+                      "$": "product.image"
+                    },
+                    "thumbs": {
+                      "$": "thumbs"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "ProductCard",
+      "names": [
+        "Product"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/product-gallery.json b/xgen/specs/organisms/product-gallery.json
new file mode 100644
index 0000000..11d89df
--- /dev/null
+++ b/xgen/specs/organisms/product-gallery.json
@@ -0,0 +1,116 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.product-gallery",
+  "name": "ProductGallery",
+  "docs": "The gallery of a product page: the picture (the file of the product's featured media, a placeholder without one) and optional thumbnails below.",
+  "records": {},
+  "props": [
+    {
+      "name": "name",
+      "type": "string",
+      "required": true,
+      "docs": "the product name: the alternative text"
+    },
+    {
+      "name": "image",
+      "type": "string",
+      "docs": "the file of the featured media; none: the placeholder"
+    },
+    {
+      "name": "thumbs",
+      "type": {
+        "ts": "\"none\" | \"below\""
+      },
+      "default": "below"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch"
+      },
+      "attrs": {
+        "data-testid": "gallery"
+      },
+      "children": [
+        {
+          "organism": "MediaFrame",
+          "props": {
+            "alt": {
+              "$": "name"
+            },
+            "src": {
+              "$": "image"
+            },
+            "ratio": "1/1"
+          }
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "thumbs"
+              },
+              "below"
+            ]
+          },
+          "then": [
+            {
+              "use": "Grid",
+              "props": {
+                "Cols": "3",
+                "Class": "gap-4"
+              },
+              "attrs": {
+                "data-testid": "thumbs"
+              },
+              "children": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "name"
+                    },
+                    "src": {
+                      "$": "image"
+                    },
+                    "ratio": "1/1",
+                    "className": "ring-2 ring-foreground"
+                  }
+                },
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "name"
+                    },
+                    "ratio": "1/1"
+                  }
+                },
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "name"
+                    },
+                    "ratio": "1/1"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/product-grid.json b/xgen/specs/organisms/product-grid.json
new file mode 100644
index 0000000..32ba6fa
--- /dev/null
+++ b/xgen/specs/organisms/product-grid.json
@@ -0,0 +1,394 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.product-grid",
+  "name": "ProductGrid",
+  "docs": "A section with a heading and the products as cards in a grid, as a list of horizontal cards, or as a rail that scrolls sideways; an empty state when there are none. Axes: layout (grid, list, rail), columns, ratio, rating, action, tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "products",
+      "type": {
+        "ts": "Product[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "ProductLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "badges",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"list\" | \"rail\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-2\" | \"1-3\" | \"1-4\""
+      },
+      "default": "1-3"
+    },
+    {
+      "name": "ratio",
+      "type": {
+        "ts": "\"4/3\" | \"1/1\" | \"3/4\""
+      },
+      "default": "4/3"
+    },
+    {
+      "name": "rating",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "action",
+      "type": {
+        "ts": "\"button\" | \"none\""
+      },
+      "default": "button"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "add",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "the add button of a product was pressed"
+    }
+  ],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "products"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "package",
+                    "title": {
+                      "$": "labels.empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "rail"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "flex snap-x gap-4 overflow-x-auto pb-4"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "products"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Box",
+                              "props": {
+                                "Class": "w-64 shrink-0 snap-start"
+                              },
+                              "children": [
+                                {
+                                  "organism": "ProductCard",
+                                  "props": {
+                                    "product": {
+                                      "$": "p"
+                                    },
+                                    "labels": {
+                                      "$": "labels"
+                                    },
+                                    "badges": {
+                                      "$": "badges"
+                                    },
+                                    "layout": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "layout"
+                                            },
+                                            "list"
+                                          ]
+                                        },
+                                        "horizontal",
+                                        "vertical"
+                                      ]
+                                    },
+                                    "ratio": {
+                                      "$": "ratio"
+                                    },
+                                    "rating": {
+                                      "$": "rating"
+                                    },
+                                    "action": {
+                                      "$": "action"
+                                    },
+                                    "density": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "density"
+                                            },
+                                            "compact"
+                                          ]
+                                        },
+                                        "compact",
+                                        "default"
+                                      ]
+                                    }
+                                  },
+                                  "on": {
+                                    "add": {
+                                      "call": "emit.add",
+                                      "args": [
+                                        {
+                                          "$": "p.id"
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "list"
+                              ]
+                            },
+                            "1",
+                            {
+                              "$": "cols"
+                            }
+                          ]
+                        },
+                        "Class": "gap-4"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "products"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "ProductCard",
+                              "props": {
+                                "product": {
+                                  "$": "p"
+                                },
+                                "labels": {
+                                  "$": "labels"
+                                },
+                                "badges": {
+                                  "$": "badges"
+                                },
+                                "layout": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "layout"
+                                        },
+                                        "list"
+                                      ]
+                                    },
+                                    "horizontal",
+                                    "vertical"
+                                  ]
+                                },
+                                "ratio": {
+                                  "$": "ratio"
+                                },
+                                "rating": {
+                                  "$": "rating"
+                                },
+                                "action": {
+                                  "$": "action"
+                                },
+                                "density": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "density"
+                                        },
+                                        "compact"
+                                      ]
+                                    },
+                                    "compact",
+                                    "default"
+                                  ]
+                                }
+                              },
+                              "on": {
+                                "add": {
+                                  "call": "emit.add",
+                                  "args": [
+                                    {
+                                      "$": "p.id"
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "ProductCard",
+      "names": [
+        "Product",
+        "ProductLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/product-info.json b/xgen/specs/organisms/product-info.json
new file mode 100644
index 0000000..78c2692
--- /dev/null
+++ b/xgen/specs/organisms/product-info.json
@@ -0,0 +1,387 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.product-info",
+  "name": "ProductInfo",
+  "docs": "The details of a product under its buy box: texts in an accordion (native details) beside a card with the specs. Axes: layout (split: the specs beside the texts, stacked: below them), expand (first: the first text open, none), tone.",
+  "records": {
+    "Detail": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      }
+    ],
+    "Spec": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "string"
+      }
+    ],
+    "ProductInfoLabels": [
+      {
+        "name": "specs",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "details",
+      "type": {
+        "ts": "Detail[]"
+      },
+      "required": true
+    },
+    {
+      "name": "specs",
+      "type": {
+        "ts": "Spec[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "ProductInfoLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"split\" | \"stacked\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "expand",
+      "type": {
+        "ts": "\"first\" | \"none\""
+      },
+      "default": "first"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "split"
+                      ]
+                    },
+                    "grid grid-cols-1 items-start gap-8 lg:grid-cols-3",
+                    "grid grid-cols-1 gap-8"
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "details"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0",
+                        "Align": "stretch",
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "split"
+                              ]
+                            },
+                            "lg:col-span-2",
+                            ""
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "details"
+                          },
+                          "as": "d",
+                          "key": {
+                            "$": "d.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Disclosure",
+                              "props": {
+                                "Variant": "item",
+                                "Open": {
+                                  "op": "and",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "expand"
+                                        },
+                                        "first"
+                                      ]
+                                    },
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "i"
+                                        },
+                                        0
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Summary",
+                                  "props": {
+                                    "Variant": "item"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "text-base font-semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "d.title"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Class": "pb-4 text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "d.text"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "specs"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch",
+                        "Class": "rounded bg-card inset-ring inset-ring-border p-6"
+                      },
+                      "attrs": {
+                        "data-testid": "specs"
+                      },
+                      "children": [
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 3,
+                            "Size": "lg",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "labels.specs"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "List",
+                          "props": {
+                            "Tag": "ul",
+                            "Class": "flex flex-col"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "specs"
+                              },
+                              "as": "s",
+                              "key": {
+                                "$": "s.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "ListItem",
+                                  "props": {
+                                    "Class": "flex items-center justify-between gap-4 border-b border-border py-2 text-sm last:border-b-0"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "spec"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "s.label"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "font-medium"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "s.value"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/product-price.json b/xgen/specs/organisms/product-price.json
new file mode 100644
index 0000000..65b5fe1
--- /dev/null
+++ b/xgen/specs/organisms/product-price.json
@@ -0,0 +1,161 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.product-price",
+  "name": "ProductPrice",
+  "docs": "The price line of a product page: the price (integer minor units in the currency), the old price (compare_at) struck through when higher, and the badge.",
+  "records": {},
+  "props": [
+    {
+      "name": "price",
+      "type": "number",
+      "required": true,
+      "docs": "integer minor units"
+    },
+    {
+      "name": "compareAt",
+      "type": "number",
+      "docs": "the old price, same currency; shown only when higher than the price"
+    },
+    {
+      "name": "currency",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "the label of the badge; empty: none"
+    },
+    {
+      "name": "was",
+      "type": "string",
+      "required": true,
+      "docs": "the screen reader word before the old price"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Group",
+      "props": {
+        "Gap": "4",
+        "Align": "center",
+        "Class": "flex-wrap"
+      },
+      "children": [
+        {
+          "use": "Text",
+          "props": {
+            "Size": "4xl",
+            "Weight": "bold"
+          },
+          "children": [
+            {
+              "text": {
+                "op": "money",
+                "args": [
+                  {
+                    "$": "price"
+                  },
+                  {
+                    "$": "currency"
+                  }
+                ]
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "and",
+            "args": [
+              {
+                "$": "compareAt"
+              },
+              {
+                "op": "gt",
+                "args": [
+                  {
+                    "$": "compareAt"
+                  },
+                  {
+                    "$": "price"
+                  }
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "use": "Text",
+              "props": {
+                "Tag": "del",
+                "Size": "lg",
+                "Class": "relative text-muted-foreground"
+              },
+              "attrs": {
+                "data-testid": "compare-at"
+              },
+              "children": [
+                {
+                  "use": "Inline",
+                  "props": {
+                    "Class": "sr-only"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "was"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "text": {
+                    "op": "money",
+                    "args": [
+                      {
+                        "$": "compareAt"
+                      },
+                      {
+                        "$": "currency"
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "$": "badge"
+          },
+          "then": [
+            {
+              "use": "Badge",
+              "props": {
+                "Variant": "default",
+                "Size": "default"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "badge"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/profile-form.json b/xgen/specs/organisms/profile-form.json
new file mode 100644
index 0000000..c4ce4c7
--- /dev/null
+++ b/xgen/specs/organisms/profile-form.json
@@ -0,0 +1,630 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.profile-form",
+  "name": "ProfileForm",
+  "docs": "An account settings form: a picture with a change button, name, email, bio and two notification switches, with save and cancel. Axes: layout (stacked, split), avatar (show, hide), prefs (show, hide), tone (default, muted).",
+  "records": {
+    "ProfileLabels": [
+      {
+        "name": "picture",
+        "type": "string"
+      },
+      {
+        "name": "change",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "email",
+        "type": "string"
+      },
+      {
+        "name": "bio",
+        "type": "string"
+      },
+      {
+        "name": "prefs",
+        "type": "string"
+      },
+      {
+        "name": "updates",
+        "type": "string"
+      },
+      {
+        "name": "alerts",
+        "type": "string"
+      },
+      {
+        "name": "save",
+        "type": "string"
+      },
+      {
+        "name": "cancel",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "ProfileLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"stacked\" | \"split\""
+      },
+      "default": "stacked"
+    },
+    {
+      "name": "avatar",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "prefs",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section"
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "and",
+                  "args": [
+                    {
+                      "$": "title"
+                    },
+                    {
+                      "$": "id"
+                    }
+                  ]
+                },
+                {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-t",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                },
+                {
+                  "op": "undef",
+                  "args": []
+                }
+              ]
+            }
+          ]
+        },
+        "data-testid": "panel-section",
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": "mx-auto w-full max-w-6xl px-4 py-8"
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "organism": "Panel",
+              "props": {
+                "title": {
+                  "$": "title"
+                },
+                "description": {
+                  "$": "text"
+                },
+                "id": {
+                  "$": "id"
+                },
+                "className": {
+                  "op": "cn",
+                  "args": [
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "tone"
+                            },
+                            "muted"
+                          ]
+                        },
+                        "bg-muted",
+                        ""
+                      ]
+                    }
+                  ]
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Form",
+                      "props": {
+                        "Method": "dialog",
+                        "Class": "gap-6"
+                      },
+                      "attrs": {
+                        "data-testid": "profile-form"
+                      },
+                      "children": [
+                        {
+                          "use": "Grid",
+                          "props": {
+                            "Cols": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "split"
+                                  ]
+                                },
+                                "1-2",
+                                "1"
+                              ]
+                            },
+                            "Class": "items-start gap-8"
+                          },
+                          "children": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "4",
+                                "Align": "stretch"
+                              },
+                              "children": [
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "avatar"
+                                      },
+                                      "show"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "use": "Group",
+                                      "props": {
+                                        "Gap": "4",
+                                        "Align": "center"
+                                      },
+                                      "attrs": {
+                                        "data-testid": "avatar"
+                                      },
+                                      "children": [
+                                        {
+                                          "organism": "MediaFrame",
+                                          "props": {
+                                            "alt": {
+                                              "$": "labels.picture"
+                                            },
+                                            "ratio": "1/1",
+                                            "className": "size-16 shrink-0 rounded-full"
+                                          }
+                                        },
+                                        {
+                                          "use": "Button",
+                                          "props": {
+                                            "Variant": "outline",
+                                            "Size": "sm",
+                                            "Type": "button"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "labels.change"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.name"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-name",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Input",
+                                          "props": {
+                                            "Type": "text",
+                                            "Name": "name",
+                                            "Autocomplete": "name"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-name",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.email"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-email",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Input",
+                                          "props": {
+                                            "Type": "email",
+                                            "Name": "email",
+                                            "Autocomplete": "email"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-email",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  "organism": "Field",
+                                  "props": {
+                                    "label": {
+                                      "$": "labels.bio"
+                                    },
+                                    "htmlFor": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-bio",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "Textarea",
+                                          "props": {
+                                            "Rows": 4,
+                                            "Name": "bio"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-bio",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "data-testid": "field"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "when": {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "prefs"
+                                  },
+                                  "show"
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "4",
+                                    "Align": "stretch"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "prefs"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Title",
+                                      "props": {
+                                        "As": 3,
+                                        "Size": "base",
+                                        "Weight": "bold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "labels.prefs"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Group",
+                                      "props": {
+                                        "Gap": "4",
+                                        "Align": "center",
+                                        "Justify": "between"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Label",
+                                          "props": {
+                                            "HTMLFor": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-updates",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "Class": "text-sm"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "labels.updates"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Switch",
+                                          "props": {
+                                            "Name": "updates"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-updates",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            }
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Group",
+                                      "props": {
+                                        "Gap": "4",
+                                        "Align": "center",
+                                        "Justify": "between"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Label",
+                                          "props": {
+                                            "HTMLFor": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-alerts",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            },
+                                            "Class": "text-sm"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "labels.alerts"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Switch",
+                                          "props": {
+                                            "Name": "alerts"
+                                          },
+                                          "attrs": {
+                                            "id": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "{0}-alerts",
+                                                {
+                                                  "$": "id"
+                                                }
+                                              ]
+                                            }
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "2",
+                            "Class": "flex-wrap"
+                          },
+                          "children": [
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "default",
+                                "Size": "default",
+                                "Type": "submit"
+                              },
+                              "attrs": {
+                                "data-testid": "submit"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.save"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "outline",
+                                "Size": "default",
+                                "Type": "button"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.cancel"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/project-grid.json b/xgen/specs/organisms/project-grid.json
new file mode 100644
index 0000000..e0eb248
--- /dev/null
+++ b/xgen/specs/organisms/project-grid.json
@@ -0,0 +1,391 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.project-grid",
+  "name": "ProjectGrid",
+  "docs": "Projects of a studio or a person: cards with tags and links, a compact grid, tiles with the caption over the picture, a bento with one big project, or a list beside a collage. Axes: layout (cards, compact, overlay, bento, list), tone, density.",
+  "records": {
+    "Project": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "category",
+        "type": "string"
+      },
+      {
+        "name": "year",
+        "type": "number"
+      },
+      {
+        "name": "summary",
+        "type": "string"
+      },
+      {
+        "name": "tags",
+        "type": "string[]"
+      },
+      {
+        "name": "featured",
+        "type": "boolean"
+      },
+      {
+        "name": "client",
+        "type": "string"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "ProjectLabels": [
+      {
+        "name": "featured",
+        "type": "string"
+      },
+      {
+        "name": "view",
+        "type": "string"
+      },
+      {
+        "name": "case",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "projects",
+      "type": {
+        "ts": "Project[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "ProjectLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"cards\" | \"compact\" | \"overlay\" | \"bento\" | \"list\""
+      },
+      "default": "cards"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "layout": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "list"
+              ]
+            },
+            "split",
+            "stack"
+          ]
+        },
+        "media": {
+          "show": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "list"
+            ]
+          },
+          "align": "start"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "projects"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "folder-open",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "list"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "projects"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "4",
+                                "Align": "start",
+                                "Class": "border-b border-border pb-4"
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "organism": "MediaFrame",
+                                  "props": {
+                                    "alt": {
+                                      "$": "p.title"
+                                    },
+                                    "ratio": "1/1",
+                                    "className": "size-16 shrink-0"
+                                  }
+                                },
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2",
+                                    "Align": "stretch",
+                                    "Class": "flex-1"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Group",
+                                      "props": {
+                                        "Gap": "4",
+                                        "Justify": "between"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Weight": "semibold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "p.title"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "xs",
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "p.year"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "p.summary"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "organism": "ProjectTiles",
+                      "props": {
+                        "projects": {
+                          "$": "projects"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        },
+                        "layout": {
+                          "$": "layout"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "grid grid-cols-2 gap-4"
+              },
+              "attrs": {
+                "data-testid": "collage"
+              },
+              "children": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "title"
+                    },
+                    "ratio": "3/4"
+                  }
+                },
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "title"
+                    },
+                    "ratio": "3/4",
+                    "className": "mt-8"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/project-tiles.json b/xgen/specs/organisms/project-tiles.json
new file mode 100644
index 0000000..2a04e36
--- /dev/null
+++ b/xgen/specs/organisms/project-tiles.json
@@ -0,0 +1,484 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.project-tiles",
+  "name": "ProjectTiles",
+  "docs": "The projects of ProjectGrid as tiles: cards (picture, featured badge, category and year, title, summary, tags, two links), compact cards in four columns, captions over the pictures, or a bento where the first project takes a big tile.",
+  "records": {},
+  "props": [
+    {
+      "name": "projects",
+      "type": {
+        "ts": "Project[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "ProjectLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"cards\" | \"compact\" | \"overlay\" | \"bento\" | \"list\""
+      },
+      "default": "cards"
+    }
+  ],
+  "derived": [
+    {
+      "name": "over",
+      "value": {
+        "op": "cond",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "overlay"
+            ]
+          },
+          true,
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "bento"
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "compact"
+              ]
+            },
+            "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+            "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "items"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "projects"
+          },
+          "as": "p",
+          "key": {
+            "$": "p.id"
+          },
+          "do": [
+            {
+              "organism": "ArticleBlock",
+              "props": {
+                "className": {
+                  "op": "cn",
+                  "args": [
+                    "flex flex-col gap-4",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "$": "over"
+                        },
+                        "relative",
+                        "rounded bg-card inset-ring inset-ring-border p-4"
+                      ]
+                    },
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "and",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "bento"
+                              ]
+                            },
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "i"
+                                },
+                                0
+                              ]
+                            }
+                          ]
+                        },
+                        "sm:col-span-2 lg:row-span-2",
+                        ""
+                      ]
+                    }
+                  ]
+                },
+                "testid": "item"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "over"
+                            },
+                            "h-full",
+                            "relative"
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "p.title"
+                            },
+                            "ratio": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "compact"
+                                  ]
+                                },
+                                "1/1",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "$": "over"
+                                    },
+                                    "3/4",
+                                    "4/3"
+                                  ]
+                                }
+                              ]
+                            },
+                            "className": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "$": "over"
+                                },
+                                "h-full",
+                                ""
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "when": {
+                            "op": "and",
+                            "args": [
+                              {
+                                "$": "p.featured"
+                              },
+                              {
+                                "op": "ne",
+                                "args": [
+                                  {
+                                    "$": "layout"
+                                  },
+                                  "compact"
+                                ]
+                              }
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Badge",
+                              "props": {
+                                "Variant": "default",
+                                "Size": "default",
+                                "Class": "absolute left-4 top-4"
+                              },
+                              "attrs": {
+                                "data-testid": "featured"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.featured"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2",
+                        "Align": "stretch",
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "over"
+                            },
+                            "absolute right-4 bottom-4 left-4 rounded bg-background p-4",
+                            ""
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  "{0}, {1}",
+                                  {
+                                    "$": "p.category"
+                                  },
+                                  {
+                                    "$": "p.year"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 3,
+                            "Size": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "compact"
+                                  ]
+                                },
+                                "sm",
+                                "lg"
+                              ]
+                            },
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "p.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "ne",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "compact"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "p.summary"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "cards"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2",
+                                "Class": "flex-wrap"
+                              },
+                              "children": [
+                                {
+                                  "each": {
+                                    "$": "p.tags"
+                                  },
+                                  "as": "k",
+                                  "key": {
+                                    "$": "k"
+                                  },
+                                  "do": [
+                                    {
+                                      "use": "Badge",
+                                      "props": {
+                                        "Variant": "secondary",
+                                        "Size": "sm"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "k"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "4",
+                                "Class": "pt-2"
+                              },
+                              "children": [
+                                {
+                                  "organism": "MenuEntry",
+                                  "props": {
+                                    "href": {
+                                      "$": "p.href"
+                                    },
+                                    "className": "inline-flex items-center gap-2 text-sm font-medium"
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "text": {
+                                            "$": "labels.case"
+                                          }
+                                        },
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "arrow-right",
+                                            "Size": 16
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  "organism": "MenuEntry",
+                                  "props": {
+                                    "href": {
+                                      "$": "p.href"
+                                    },
+                                    "className": "inline-flex items-center gap-2 text-sm font-medium"
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "text": {
+                                            "$": "labels.view"
+                                          }
+                                        },
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "external-link",
+                                            "Size": 16
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "ProjectGrid",
+      "names": [
+        "Project",
+        "ProjectLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/prompt-composer.json b/xgen/specs/organisms/prompt-composer.json
new file mode 100644
index 0000000..be39eae
--- /dev/null
+++ b/xgen/specs/organisms/prompt-composer.json
@@ -0,0 +1,324 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.prompt-composer",
+  "name": "PromptComposer",
+  "docs": "A prompt box on a dark band: attachment chips, the prompt line, a plus button, the model pill and a send button. Static links only; a host adds behavior.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "the prompt line (To Build Site)"
+    },
+    {
+      "name": "attachLabel",
+      "type": "string",
+      "docs": "attachment chip label"
+    },
+    {
+      "name": "modelLabel",
+      "type": "string",
+      "docs": "model pill label"
+    },
+    {
+      "name": "send",
+      "type": "string",
+      "docs": "accessible name of the send button"
+    },
+    {
+      "name": "href",
+      "type": "string"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "mx-auto flex w-full flex-col gap-4 bg-background/10 p-6 inset-ring inset-ring-background/30",
+            {
+              "op": "preset",
+              "args": [
+                "defaults",
+                "hero.composer"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "email-form"
+      },
+      "children": [
+        {
+          "when": {
+            "$": "attachLabel"
+          },
+          "then": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center"
+              },
+              "attrs": {
+                "data-testid": "composer-attachments"
+              },
+              "children": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "ghost",
+                    "Size": "sm",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20",
+                        {
+                          "op": "preset",
+                          "args": [
+                            "defaults",
+                            "hero.attach"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "composer-attach"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "file-text",
+                        "Size": 16
+                      }
+                    },
+                    {
+                      "text": {
+                        "$": "attachLabel"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "ghost",
+                    "Size": "sm",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "gap-2 overflow-hidden bg-background/10 text-background hover:bg-background/20",
+                        {
+                          "op": "preset",
+                          "args": [
+                            "defaults",
+                            "hero.attach"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "composer-attach"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "paperclip",
+                        "Size": 16
+                      }
+                    },
+                    {
+                      "text": {
+                        "$": "attachLabel"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "xs",
+            "Weight": "semibold",
+            "Class": {
+              "op": "cn",
+              "args": [
+                "flex w-full items-center leading-5 text-background/80",
+                {
+                  "op": "preset",
+                  "args": [
+                    "defaults",
+                    "hero.promptLine"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-testid": "field"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "label"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center",
+            "Justify": "between",
+            "Class": "h-8 w-full"
+          },
+          "attrs": {
+            "data-testid": "composer-tools"
+          },
+          "children": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center"
+              },
+              "children": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "ghost",
+                    "Size": "sm",
+                    "Layout": "icon",
+                    "Class": "bg-background/10 text-background hover:bg-background/20"
+                  },
+                  "attrs": {
+                    "data-testid": "composer-plus",
+                    "aria-label": {
+                      "op": "coalesce",
+                      "args": [
+                        {
+                          "$": "attachLabel"
+                        },
+                        "Attach"
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "plus",
+                        "Size": 16
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "$": "modelLabel"
+                  },
+                  "then": [
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "ghost",
+                        "Size": "sm",
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "gap-2 bg-background/10 text-background hover:bg-background/20",
+                            {
+                              "op": "preset",
+                              "args": [
+                                "defaults",
+                                "hero.model"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "composer-model"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "sparkles",
+                            "Size": 16
+                          }
+                        },
+                        {
+                          "text": {
+                            "$": "modelLabel"
+                          }
+                        },
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "chevron-down",
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Button",
+              "props": {
+                "Href": {
+                  "$": "href"
+                },
+                "Variant": "secondary",
+                "Size": "sm",
+                "Layout": "icon"
+              },
+              "attrs": {
+                "data-testid": "submit",
+                "aria-label": {
+                  "op": "coalesce",
+                  "args": [
+                    {
+                      "$": "send"
+                    },
+                    "Send"
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "arrow-up",
+                    "Size": 16
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/proof-band.json b/xgen/specs/organisms/proof-band.json
new file mode 100644
index 0000000..eecbd65
--- /dev/null
+++ b/xgen/specs/organisms/proof-band.json
@@ -0,0 +1,329 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.proof-band",
+  "name": "ProofBand",
+  "docs": "Customer logos together with the key numbers: logos above the numbers, or beside them. Axes: layout (above, beside), logos (name, icon), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "logos",
+      "type": {
+        "ts": "Logo[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "stats",
+      "type": {
+        "ts": "Stat[]"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"above\" | \"beside\""
+      },
+      "default": "above"
+    },
+    {
+      "name": "logoStyle",
+      "type": {
+        "ts": "\"name\" | \"icon\""
+      },
+      "default": "name"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "align": "center",
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "logos"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "building-2",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "beside"
+                          ]
+                        },
+                        "1-2",
+                        "1"
+                      ]
+                    },
+                    "Class": "items-center gap-8"
+                  },
+                  "children": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "6",
+                        "Justify": "center",
+                        "Class": "flex-wrap text-muted-foreground"
+                      },
+                      "attrs": {
+                        "data-testid": "logos"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "logos"
+                          },
+                          "as": "logo",
+                          "key": {
+                            "$": "logo.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "center"
+                              },
+                              "attrs": {
+                                "data-testid": "logo"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": {
+                                      "$": "logo.icon"
+                                    },
+                                    "Size": 24
+                                  }
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": "semibold",
+                                    "Class": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "logoStyle"
+                                            },
+                                            "icon"
+                                          ]
+                                        },
+                                        "sr-only",
+                                        ""
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "logo.name"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "beside"
+                              ]
+                            },
+                            "2",
+                            "1-4"
+                          ]
+                        },
+                        "Class": "gap-6 text-center"
+                      },
+                      "attrs": {
+                        "data-testid": "stats"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "stats"
+                          },
+                          "as": "stat",
+                          "key": {
+                            "$": "stat.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "0",
+                                "Align": "center"
+                              },
+                              "attrs": {
+                                "data-testid": "stat"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "4xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "stat.value"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "stat.label"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "LogoCloud",
+      "names": [
+        "Logo"
+      ]
+    },
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/quote-card.json b/xgen/specs/organisms/quote-card.json
new file mode 100644
index 0000000..1c4bf87
--- /dev/null
+++ b/xgen/specs/organisms/quote-card.json
@@ -0,0 +1,411 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.quote-card",
+  "name": "QuoteCard",
+  "docs": "One customer quote of TestimonialGrid: a card, a plain figure or a social post, with the author's picture, the stars and a company glyph as `item` says.",
+  "records": {},
+  "props": [
+    {
+      "name": "q",
+      "type": {
+        "ts": "Quote"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "QuoteLabels"
+      },
+      "required": true,
+      "docs": "the templates of the lines around the quote"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "QuoteItem"
+      },
+      "docs": "how the quote is drawn"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"single\" | \"stack\" | \"masonry\" | \"strip\""
+      },
+      "default": "grid",
+      "docs": "the layout of the grid around it: the size of the card"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "FigureBlock",
+      "props": {
+        "className": {
+          "op": "cn",
+          "args": [
+            "m-0 flex flex-col gap-4",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "item.kind"
+                    },
+                    "plain"
+                  ]
+                },
+                "",
+                "rounded p-6 inset-ring inset-ring-border bg-card"
+              ]
+            },
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "layout"
+                    },
+                    "masonry"
+                  ]
+                },
+                "mb-4 break-inside-avoid",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "strip"
+                      ]
+                    },
+                    "w-80 shrink-0 snap-start",
+                    "h-full"
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        "testid": "item"
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "item.kind"
+                  },
+                  "social"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "ne",
+                        "args": [
+                          {
+                            "$": "item.avatar"
+                          },
+                          "none"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "q.author"
+                            },
+                            "ratio": "1/1",
+                            "className": "size-12 shrink-0 rounded-full"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "q.author"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  {
+                                    "$": "labels.handleLine"
+                                  },
+                                  {
+                                    "$": "q.handle"
+                                  },
+                                  {
+                                    "$": "q.time"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "message-circle",
+                        "Size": 16,
+                        "Class": "ml-auto text-muted-foreground"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "base"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "q.quote"
+                      }
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "ne",
+                    "args": [
+                      {
+                        "$": "item.rating"
+                      },
+                      "hide"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "Rating",
+                      "props": {
+                        "value": {
+                          "$": "q.rating"
+                        },
+                        "label": {
+                          "op": "tpl",
+                          "args": [
+                            {
+                              "$": "labels.rating"
+                            },
+                            {
+                              "$": "q.rating"
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "item.mark"
+                      },
+                      "icon"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Inline",
+                      "props": {
+                        "Class": "text-muted-foreground"
+                      },
+                      "attrs": {
+                        "data-testid": "mark"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "q.mark"
+                            },
+                            "Size": 24
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "single"
+                          ]
+                        },
+                        "xl",
+                        "base"
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "q.quote"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "ne",
+                        "args": [
+                          {
+                            "$": "item.avatar"
+                          },
+                          "none"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "q.author"
+                            },
+                            "ratio": "1/1",
+                            "className": "size-12 shrink-0 rounded-full"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "q.author"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  {
+                                    "$": "labels.byLine"
+                                  },
+                                  {
+                                    "$": "q.role"
+                                  },
+                                  {
+                                    "$": "q.company"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "TestimonialGrid",
+      "names": [
+        "Quote",
+        "QuoteLabels",
+        "QuoteItem"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/quote-figures.json b/xgen/specs/organisms/quote-figures.json
new file mode 100644
index 0000000..3be6d22
--- /dev/null
+++ b/xgen/specs/organisms/quote-figures.json
@@ -0,0 +1,115 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.quote-figures",
+  "name": "QuoteFigures",
+  "docs": "Three figures in a row above the quotes of QuoteSplit.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "QuoteExtras"
+      },
+      "required": true,
+      "docs": "the figures, logos and rating summary"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "grid grid-cols-3 gap-4 border-b border-border pb-8"
+      },
+      "attrs": {
+        "data-testid": "quote-figures"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "extras.stats"
+          },
+          "as": "s",
+          "key": {
+            "$": "s.id"
+          },
+          "do": [
+            {
+              "when": {
+                "op": "lt",
+                "args": [
+                  {
+                    "$": "i"
+                  },
+                  3
+                ]
+              },
+              "then": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "0"
+                  },
+                  "attrs": {
+                    "data-testid": "quote-stat"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "3xl",
+                        "Weight": "bold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "s.value"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "s.label"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "QuoteSplit",
+      "names": [
+        "QuoteExtras"
+      ]
+    },
+    {
+      "from": "TestimonialGrid",
+      "names": [
+        "QuoteLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/quote-logo-tiles.json b/xgen/specs/organisms/quote-logo-tiles.json
new file mode 100644
index 0000000..6d2255a
--- /dev/null
+++ b/xgen/specs/organisms/quote-logo-tiles.json
@@ -0,0 +1,113 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.quote-logo-tiles",
+  "name": "QuoteLogoTiles",
+  "docs": "Four customer names with their glyphs in tiles of two columns, under the quote of QuoteSplit.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "QuoteExtras"
+      },
+      "required": true,
+      "docs": "the figures, logos and rating summary"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "grid grid-cols-2 gap-4"
+      },
+      "attrs": {
+        "data-testid": "quote-logos"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "extras.logos"
+          },
+          "as": "l",
+          "key": {
+            "$": "l.id"
+          },
+          "do": [
+            {
+              "when": {
+                "op": "lt",
+                "args": [
+                  {
+                    "$": "i"
+                  },
+                  4
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "center",
+                    "Justify": "center",
+                    "Class": "rounded bg-card inset-ring inset-ring-border p-4 text-muted-foreground"
+                  },
+                  "attrs": {
+                    "data-testid": "quote-logo"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": {
+                          "$": "l.icon"
+                        },
+                        "Size": 20
+                      }
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Weight": "semibold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "l.name"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "QuoteSplit",
+      "names": [
+        "QuoteExtras"
+      ]
+    },
+    {
+      "from": "TestimonialGrid",
+      "names": [
+        "QuoteLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/quote-proof.json b/xgen/specs/organisms/quote-proof.json
new file mode 100644
index 0000000..46194f0
--- /dev/null
+++ b/xgen/specs/organisms/quote-proof.json
@@ -0,0 +1,85 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.quote-proof",
+  "name": "QuoteProof",
+  "docs": "A customer quote and who said it, as a figure.",
+  "records": {},
+  "props": [
+    {
+      "name": "quote",
+      "type": "string"
+    },
+    {
+      "name": "quoteBy",
+      "type": "string"
+    },
+    {
+      "name": "center",
+      "type": "boolean",
+      "default": false
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "figure",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex flex-col gap-2",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "$": "center"
+                },
+                "items-center text-center",
+                ""
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "proof"
+      },
+      "children": [
+        {
+          "use": "Text",
+          "props": {
+            "Size": "xl"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "quote"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "quoteBy"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/quote-rating-panel.json b/xgen/specs/organisms/quote-rating-panel.json
new file mode 100644
index 0000000..f663abc
--- /dev/null
+++ b/xgen/specs/organisms/quote-rating-panel.json
@@ -0,0 +1,181 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.quote-rating-panel",
+  "name": "QuoteRatingPanel",
+  "docs": "The rating summary of QuoteSplit: the average in large type, the stars, the number of reviews and two figures.",
+  "records": {},
+  "props": [
+    {
+      "name": "extras",
+      "type": {
+        "ts": "QuoteExtras"
+      },
+      "required": true,
+      "docs": "the figures, logos and rating summary"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "QuoteLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "6",
+        "Align": "center",
+        "Class": "rounded bg-card inset-ring inset-ring-border p-8 text-center"
+      },
+      "attrs": {
+        "data-testid": "quote-rating"
+      },
+      "children": [
+        {
+          "use": "Text",
+          "props": {
+            "Size": "5xl",
+            "Weight": "bold"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "extras.score"
+              }
+            }
+          ]
+        },
+        {
+          "organism": "Rating",
+          "props": {
+            "value": {
+              "$": "extras.rating"
+            },
+            "label": {
+              "op": "tpl",
+              "args": [
+                {
+                  "$": "labels.rating"
+                },
+                {
+                  "$": "extras.rating"
+                }
+              ]
+            },
+            "size": 20
+          }
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "extras.reviews"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Box",
+          "props": {
+            "Class": "grid w-full grid-cols-2 gap-4 border-t border-border pt-6"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "extras.stats"
+              },
+              "as": "s",
+              "key": {
+                "$": "s.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "i"
+                      },
+                      2
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0",
+                        "Align": "center"
+                      },
+                      "attrs": {
+                        "data-testid": "quote-stat"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "2xl",
+                            "Weight": "semibold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.value"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.label"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "QuoteSplit",
+      "names": [
+        "QuoteExtras"
+      ]
+    },
+    {
+      "from": "TestimonialGrid",
+      "names": [
+        "QuoteLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/quote-slot.json b/xgen/specs/organisms/quote-slot.json
new file mode 100644
index 0000000..1cfd716
--- /dev/null
+++ b/xgen/specs/organisms/quote-slot.json
@@ -0,0 +1,91 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.quote-slot",
+  "name": "QuoteSlot",
+  "docs": "One quote of QuoteSplit: a QuoteCard with the author's picture and the stars, as a card or a plain figure, in a box that can span grid rows.",
+  "records": {},
+  "props": [
+    {
+      "name": "q",
+      "type": {
+        "ts": "Quote"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "QuoteLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "kind",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"single\" | \"stack\""
+      },
+      "default": "grid"
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "$": "className"
+        }
+      },
+      "attrs": {
+        "data-testid": "quote"
+      },
+      "children": [
+        {
+          "organism": "QuoteCard",
+          "props": {
+            "q": {
+              "$": "q"
+            },
+            "labels": {
+              "$": "labels"
+            },
+            "item": {
+              "kind": {
+                "$": "kind"
+              },
+              "avatar": "image",
+              "rating": "show",
+              "mark": "none"
+            },
+            "layout": {
+              "$": "layout"
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "TestimonialGrid",
+      "names": [
+        "Quote",
+        "QuoteLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/quote-split.json b/xgen/specs/organisms/quote-split.json
new file mode 100644
index 0000000..ba9e669
--- /dev/null
+++ b/xgen/specs/organisms/quote-split.json
@@ -0,0 +1,719 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.quote-split",
+  "name": "QuoteSplit",
+  "docs": "Testimonials in a split or with figures. Axes: layout (media: one quote card and an action beside a picture, logos: one quote over four logo tiles beside a picture, rating: one quote beside a rating panel, stack: three stacked quote cards beside a picture, compact: four short quote cards in a row, bento: figures over a featured quote beside a stack), mediaSide, tone.",
+  "records": {
+    "QuoteExtras": [
+      {
+        "name": "stats",
+        "type": "Stat[]"
+      },
+      {
+        "name": "logos",
+        "type": "Logo[]"
+      },
+      {
+        "name": "rating",
+        "type": "number"
+      },
+      {
+        "name": "score",
+        "type": "string"
+      },
+      {
+        "name": "reviews",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "quotes",
+      "type": {
+        "ts": "Quote[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "QuoteLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "extras",
+      "type": {
+        "record": "QuoteExtras"
+      },
+      "required": true
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "LinkActions"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"media\" | \"logos\" | \"rating\" | \"stack\" | \"compact\" | \"bento\""
+      },
+      "default": "media"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "quotes"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "title"
+            },
+            "lead": {
+              "$": "lead"
+            },
+            "heading": {
+              "badge": {
+                "$": "badge"
+              }
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "quote",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "when": {
+            "op": "or",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "compact"
+                ]
+              },
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "layout"
+                  },
+                  "bento"
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "bento"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "QuoteFigures",
+                          "props": {
+                            "extras": {
+                              "$": "extras"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "bento"
+                              ]
+                            },
+                            "grid grid-cols-1 gap-4 lg:grid-cols-2",
+                            "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "quotes"
+                          },
+                          "as": "q",
+                          "key": {
+                            "$": "q.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "QuoteSlot",
+                              "props": {
+                                "q": {
+                                  "$": "q"
+                                },
+                                "labels": {
+                                  "$": "labels"
+                                },
+                                "layout": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "and",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "layout"
+                                            },
+                                            "bento"
+                                          ]
+                                        },
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "i"
+                                            },
+                                            0
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    "single",
+                                    "grid"
+                                  ]
+                                },
+                                "className": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "and",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "layout"
+                                            },
+                                            "bento"
+                                          ]
+                                        },
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "i"
+                                            },
+                                            0
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    "lg:row-span-3",
+                                    ""
+                                  ]
+                                }
+                              }
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "else": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "layout": "split",
+                "media": {
+                  "show": true,
+                  "side": {
+                    "$": "mediaSide"
+                  }
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "when": {
+                        "op": "or",
+                        "args": [
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "media"
+                            ]
+                          },
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "logos"
+                            ]
+                          },
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "rating"
+                            ]
+                          }
+                        ]
+                      },
+                      "then": [
+                        {
+                          "each": {
+                            "$": "quotes"
+                          },
+                          "as": "q",
+                          "key": {
+                            "$": "q.id"
+                          },
+                          "do": [
+                            {
+                              "when": {
+                                "op": "lt",
+                                "args": [
+                                  {
+                                    "$": "i"
+                                  },
+                                  1
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "organism": "QuoteSlot",
+                                  "props": {
+                                    "q": {
+                                      "$": "q"
+                                    },
+                                    "labels": {
+                                      "$": "labels"
+                                    },
+                                    "kind": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "layout"
+                                            },
+                                            "media"
+                                          ]
+                                        },
+                                        "card",
+                                        "plain"
+                                      ]
+                                    },
+                                    "layout": "single",
+                                    "className": ""
+                                  }
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "logos"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "QuoteLogoTiles",
+                          "props": {
+                            "extras": {
+                              "$": "extras"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "stack"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "stretch"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "quotes"
+                              },
+                              "as": "q",
+                              "key": {
+                                "$": "q.id"
+                              },
+                              "do": [
+                                {
+                                  "when": {
+                                    "op": "lt",
+                                    "args": [
+                                      {
+                                        "$": "i"
+                                      },
+                                      3
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "organism": "QuoteSlot",
+                                      "props": {
+                                        "q": {
+                                          "$": "q"
+                                        },
+                                        "labels": {
+                                          "$": "labels"
+                                        },
+                                        "layout": "stack",
+                                        "className": ""
+                                      }
+                                    }
+                                  ]
+                                }
+                              ],
+                              "index": "i"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "or",
+                        "args": [
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "media"
+                            ]
+                          },
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "logos"
+                            ]
+                          },
+                          {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "rating"
+                            ]
+                          }
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "ActionGroup",
+                          "props": {
+                            "primary": {
+                              "$": "actions.cta"
+                            },
+                            "primaryHref": {
+                              "$": "actions.href"
+                            },
+                            "secondary": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "actions.mode"
+                                    },
+                                    "two"
+                                  ]
+                                },
+                                {
+                                  "$": "actions.secondary"
+                                },
+                                {
+                                  "op": "undef",
+                                  "args": []
+                                }
+                              ]
+                            },
+                            "secondaryHref": {
+                              "$": "actions.secondaryHref"
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                "aside": {
+                  "args": [],
+                  "do": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "rating"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "QuoteRatingPanel",
+                          "props": {
+                            "extras": {
+                              "$": "extras"
+                            },
+                            "labels": {
+                              "$": "labels"
+                            }
+                          }
+                        }
+                      ],
+                      "else": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "title"
+                            },
+                            "ratio": "4/3"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "TestimonialGrid",
+      "names": [
+        "Quote",
+        "QuoteLabels"
+      ]
+    },
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    },
+    {
+      "from": "LogoCloud",
+      "names": [
+        "Logo"
+      ]
+    },
+    {
+      "from": "ErrorPage",
+      "names": [
+        "LinkActions"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/review-list.json b/xgen/specs/organisms/review-list.json
new file mode 100644
index 0000000..a1a1f1f
--- /dev/null
+++ b/xgen/specs/organisms/review-list.json
@@ -0,0 +1,379 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.review-list",
+  "name": "ReviewList",
+  "docs": "Customer reviews as cards or plain entries: rating, title, text, author and date. Axes: layout (list, grid), columns, item (card, plain), avatar (none, image), tone, density.",
+  "records": {
+    "Review": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "author",
+        "type": "string"
+      },
+      {
+        "name": "rating",
+        "type": "number"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "date",
+        "type": "string"
+      }
+    ],
+    "ReviewLabels": [
+      {
+        "name": "ratingLabel",
+        "type": "string"
+      },
+      {
+        "name": "empty",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "reviews",
+      "type": {
+        "ts": "Review[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "ReviewLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"list\" | \"grid\""
+      },
+      "default": "list"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card"
+    },
+    {
+      "name": "avatar",
+      "type": {
+        "ts": "\"none\" | \"image\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"roomy\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "list"
+              ]
+            },
+            "2xl",
+            "default"
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "reviews"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "message-square-quote",
+                    "title": {
+                      "$": "labels.empty"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Grid",
+              "props": {
+                "Cols": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "grid"
+                      ]
+                    },
+                    "1-3",
+                    "1"
+                  ]
+                },
+                "Class": "gap-4"
+              },
+              "attrs": {
+                "data-testid": "items"
+              },
+              "children": [
+                {
+                  "each": {
+                    "$": "reviews"
+                  },
+                  "as": "r",
+                  "key": {
+                    "$": "r.id"
+                  },
+                  "do": [
+                    {
+                      "organism": "ArticleBlock",
+                      "props": {
+                        "className": {
+                          "op": "cn",
+                          "args": [
+                            "flex h-full flex-col gap-4",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "item"
+                                    },
+                                    "card"
+                                  ]
+                                },
+                                "rounded bg-card p-6 inset-ring inset-ring-border",
+                                "border-b border-border pb-4"
+                              ]
+                            }
+                          ]
+                        },
+                        "testid": "item"
+                      },
+                      "slots": {
+                        "children": {
+                          "args": [],
+                          "do": [
+                            {
+                              "organism": "Rating",
+                              "props": {
+                                "value": {
+                                  "$": "r.rating"
+                                },
+                                "label": {
+                                  "op": "tpl",
+                                  "args": [
+                                    {
+                                      "$": "labels.ratingLabel"
+                                    },
+                                    {
+                                      "$": "r.rating"
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              "use": "Title",
+                              "props": {
+                                "As": 3,
+                                "Size": "base",
+                                "Weight": "bold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "r.title"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "r.text"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "4",
+                                "Align": "center",
+                                "Class": "mt-auto"
+                              },
+                              "children": [
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "avatar"
+                                      },
+                                      "image"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "organism": "MediaFrame",
+                                      "props": {
+                                        "alt": {
+                                          "$": "r.author"
+                                        },
+                                        "ratio": "1/1",
+                                        "className": "size-10 shrink-0 rounded-full"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "0"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "r.author"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "xs",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "r.date"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/search-palette.json b/xgen/specs/organisms/search-palette.json
new file mode 100644
index 0000000..09cd501
--- /dev/null
+++ b/xgen/specs/organisms/search-palette.json
@@ -0,0 +1,75 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.search-palette",
+  "name": "SearchPalette",
+  "docs": "A search field with a search glyph and the keys that open it.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "name and placeholder of the field"
+    },
+    {
+      "name": "shortcut",
+      "type": "string",
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "relative w-full max-w-sm"
+      },
+      "attrs": {
+        "data-testid": "palette"
+      },
+      "children": [
+        {
+          "use": "LucideIcon",
+          "props": {
+            "Name": "search",
+            "Size": 16,
+            "Class": "pointer-events-none absolute top-2 left-3 text-muted-foreground"
+          }
+        },
+        {
+          "use": "Input",
+          "props": {
+            "Type": "search",
+            "Size": "sm",
+            "Placeholder": {
+              "$": "label"
+            },
+            "AriaLabel": {
+              "$": "label"
+            },
+            "Class": "pr-12 pl-10"
+          }
+        },
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "pointer-events-none absolute top-2 right-2 rounded px-2 py-0 text-xs text-muted-foreground inset-ring inset-ring-border"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "shortcut"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/shell-content.json b/xgen/specs/organisms/shell-content.json
new file mode 100644
index 0000000..4c1389f
--- /dev/null
+++ b/xgen/specs/organisms/shell-content.json
@@ -0,0 +1,625 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.shell-content",
+  "name": "ShellContent",
+  "docs": "The placeholder content of DashboardShell: the page heading beside a grey action, then empty cards on the 8px grid. Shapes: grid (four small cards over a big one), split (a wide card beside a narrow one over a low one), list (a toolbar over a card of rows). The cards are hidden from assistive technology.",
+  "records": {},
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "titleId",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 2
+    },
+    {
+      "name": "content",
+      "type": {
+        "ts": "\"grid\" | \"split\" | \"list\""
+      },
+      "default": "grid"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "6",
+        "Align": "stretch",
+        "Class": "flex-1 p-6"
+      },
+      "attrs": {
+        "data-testid": "content"
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "center",
+            "Justify": "between"
+          },
+          "children": [
+            {
+              "use": "Title",
+              "props": {
+                "As": {
+                  "$": "level"
+                },
+                "Size": "2xl",
+                "Weight": "semibold"
+              },
+              "attrs": {
+                "id": {
+                  "$": "titleId"
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "title"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Box",
+              "props": {
+                "Class": "h-10 w-32 rounded bg-muted"
+              },
+              "attrs": {
+                "aria-hidden": "true"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Box",
+          "props": {
+            "Class": "flex flex-1 flex-col gap-4"
+          },
+          "attrs": {
+            "aria-hidden": "true",
+            "data-testid": "panels"
+          },
+          "children": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "content"
+                  },
+                  "grid"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "grid grid-cols-2 gap-4 lg:grid-cols-4"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                            "h-24"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "panel"
+                      },
+                      "children": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "h-4 w-1/3"
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "flex-1"
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                            "h-24"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "panel"
+                      },
+                      "children": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "h-4 w-1/3"
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "flex-1"
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                            "h-24"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "panel"
+                      },
+                      "children": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "h-4 w-1/3"
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "flex-1"
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                            "h-24"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "panel"
+                      },
+                      "children": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "h-4 w-1/3"
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "flex-1"
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                        "min-h-64 flex-1"
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "panel"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-4 w-1/3"
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "flex-1"
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "content"
+                  },
+                  "split"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "grid grid-cols-1 gap-4 lg:grid-cols-3"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                            "h-64 lg:col-span-2"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "panel"
+                      },
+                      "children": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "h-4 w-1/3"
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "flex-1"
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                            "h-64"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "panel"
+                      },
+                      "children": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "h-4 w-1/3"
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "rounded bg-muted",
+                                "flex-1"
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                        "min-h-40 flex-1"
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "panel"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-4 w-1/3"
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "flex-1"
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "content"
+                  },
+                  "list"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-10 w-64"
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-10 w-24"
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "ml-auto h-10 w-32"
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "flex flex-col gap-4 rounded bg-card p-4 inset-ring inset-ring-border",
+                        "flex-1"
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "panel"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-8"
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-8"
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-8"
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-8"
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-8"
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "rounded bg-muted",
+                            "h-8"
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/shell-footer.json b/xgen/specs/organisms/shell-footer.json
new file mode 100644
index 0000000..8c633dd
--- /dev/null
+++ b/xgen/specs/organisms/shell-footer.json
@@ -0,0 +1,205 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.shell-footer",
+  "name": "ShellFooter",
+  "docs": "The footer of DashboardShell: the copyright and a row of links, under the content column (inset) or across the whole shell (full).",
+  "records": {},
+  "props": [
+    {
+      "name": "nav",
+      "type": {
+        "ts": "ShellNav"
+      },
+      "required": true,
+      "docs": "the brand, the links and the texts of the shell"
+    },
+    {
+      "name": "place",
+      "type": {
+        "ts": "\"full\" | \"inset\""
+      },
+      "default": "full"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "footer",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex shrink-0 flex-wrap items-center justify-between gap-4 border-t border-border px-6 py-4",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "place"
+                    },
+                    "full"
+                  ]
+                },
+                "bg-card",
+                ""
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "footer",
+        "data-place": {
+          "$": "place"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Text",
+          "props": {
+            "Size": "xs",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "nav.copyright"
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "nav.footer"
+                  }
+                ]
+              },
+              0
+            ]
+          },
+          "then": [
+            {
+              "organism": "NavBlock",
+              "props": {
+                "label": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "landmarkLabel"
+                    },
+                    {
+                      "op": "uniq",
+                      "args": [
+                        {
+                          "op": "tpl",
+                          "args": [
+                            "{0}, {1}",
+                            {
+                              "$": "nav.footerLabel"
+                            },
+                            {
+                              "$": "landmarkLabel"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "$": "nav.footerLabel"
+                    }
+                  ]
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "List",
+                      "props": {
+                        "Class": "m-0 flex list-none items-center gap-4 p-0"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "nav.footer"
+                          },
+                          "as": "f",
+                          "key": {
+                            "$": "f.id"
+                          },
+                          "do": [
+                            {
+                              "use": "ListItem",
+                              "children": [
+                                {
+                                  "organism": "MenuEntry",
+                                  "props": {
+                                    "href": {
+                                      "$": "f.href"
+                                    },
+                                    "className": "text-xs text-muted-foreground",
+                                    "variant": "muted",
+                                    "size": "sm"
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "text": {
+                                            "$": "f.name"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "frame": true,
+  "typeImports": [
+    {
+      "from": "DashboardShell",
+      "names": [
+        "ShellNav"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/shell-sidebar.json b/xgen/specs/organisms/shell-sidebar.json
new file mode 100644
index 0000000..5b858a5
--- /dev/null
+++ b/xgen/specs/organisms/shell-sidebar.json
@@ -0,0 +1,677 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.shell-sidebar",
+  "name": "ShellSidebar",
+  "docs": "The sidebar of DashboardShell. Shapes: wide (icon and name), rail (icons only, the names still read), collapsed (the static collapsed state of a wide sidebar, with its expand button), twolevel (a rail beside a panel of the current section's links). side puts it at the start or the end.",
+  "records": {},
+  "props": [
+    {
+      "name": "nav",
+      "type": {
+        "ts": "ShellNav"
+      },
+      "required": true,
+      "docs": "the brand, the links and the texts of the shell"
+    },
+    {
+      "name": "mode",
+      "type": {
+        "ts": "\"wide\" | \"rail\" | \"collapsed\" | \"twolevel\" | \"none\""
+      },
+      "default": "wide",
+      "docs": "the DashboardShell sidebar; the shell draws no sidebar for none"
+    },
+    {
+      "name": "side",
+      "type": {
+        "ts": "\"start\" | \"end\""
+      },
+      "default": "start"
+    },
+    {
+      "name": "brand",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "derived": [
+    {
+      "name": "named",
+      "value": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "mode"
+          },
+          "wide"
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "toggle",
+      "args": [],
+      "docs": "the expand button of the collapsed sidebar was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "aside",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex shrink-0 bg-card",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "side"
+                    },
+                    "end"
+                  ]
+                },
+                "flex-row-reverse border-l border-border",
+                "border-r border-border"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "$": "nav.label"
+            }
+          ]
+        },
+        "data-testid": "sidebar",
+        "data-mode": {
+          "$": "mode"
+        }
+      },
+      "children": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "flex flex-col gap-6 py-4",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "named"
+                    },
+                    "w-64 px-4",
+                    "w-16 items-center px-2"
+                  ]
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "brand"
+                  },
+                  "show"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "center",
+                    "Class": "shrink-0"
+                  },
+                  "attrs": {
+                    "data-testid": "brand"
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "layers",
+                        "Size": 24
+                      }
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "base",
+                        "Weight": "bold",
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "$": "named"
+                            },
+                            "",
+                            "sr-only"
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "nav.brand"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "nav.links"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "NavBlock",
+                  "props": {
+                    "label": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "$": "landmarkLabel"
+                        },
+                        {
+                          "op": "uniq",
+                          "args": [
+                            {
+                              "op": "tpl",
+                              "args": [
+                                "{0}, {1}",
+                                {
+                                  "$": "nav.label"
+                                },
+                                {
+                                  "$": "landmarkLabel"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "$": "nav.label"
+                        }
+                      ]
+                    },
+                    "className": "flex-1"
+                  },
+                  "slots": {
+                    "children": {
+                      "args": [],
+                      "do": [
+                        {
+                          "use": "List",
+                          "props": {
+                            "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                          },
+                          "attrs": {
+                            "data-testid": "items"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "nav.links"
+                              },
+                              "as": "l",
+                              "key": {
+                                "$": "l.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "ListItem",
+                                  "children": [
+                                    {
+                                      "organism": "MenuEntry",
+                                      "props": {
+                                        "href": {
+                                          "$": "l.href"
+                                        },
+                                        "className": {
+                                          "op": "cn",
+                                          "args": [
+                                            "flex items-center gap-4 rounded py-2 text-sm",
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "$": "named"
+                                                },
+                                                "px-4",
+                                                "justify-center px-2"
+                                              ]
+                                            },
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "l.id"
+                                                    },
+                                                    {
+                                                      "$": "nav.current"
+                                                    }
+                                                  ]
+                                                },
+                                                "bg-muted font-medium",
+                                                ""
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        "current": {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "l.id"
+                                            },
+                                            {
+                                              "$": "nav.current"
+                                            }
+                                          ]
+                                        },
+                                        "size": "sm",
+                                        "testid": "item"
+                                      },
+                                      "slots": {
+                                        "children": {
+                                          "args": [],
+                                          "do": [
+                                            {
+                                              "use": "LucideIcon",
+                                              "props": {
+                                                "Name": {
+                                                  "$": "l.icon"
+                                                },
+                                                "Size": 16
+                                              }
+                                            },
+                                            {
+                                              "use": "Inline",
+                                              "props": {
+                                                "Class": {
+                                                  "op": "cond",
+                                                  "args": [
+                                                    {
+                                                      "$": "named"
+                                                    },
+                                                    "",
+                                                    "sr-only"
+                                                  ]
+                                                }
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "l.name"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "mode"
+                  },
+                  "collapsed"
+                ]
+              },
+              "then": [
+                {
+                  "use": "ButtonPlain",
+                  "props": {
+                    "Type": "button",
+                    "Class": "inline-flex size-10 items-center justify-center rounded text-muted-foreground"
+                  },
+                  "attrs": {
+                    "aria-label": {
+                      "$": "nav.expand"
+                    },
+                    "aria-expanded": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "mode"
+                            },
+                            "wide"
+                          ]
+                        },
+                        "true",
+                        "false"
+                      ]
+                    },
+                    "data-testid": "toggle"
+                  },
+                  "on": {
+                    "click": {
+                      "call": "emit.toggle",
+                      "args": []
+                    }
+                  },
+                  "children": [
+                    {
+                      "use": "LucideIcon",
+                      "props": {
+                        "Name": "panel-left",
+                        "Size": 20
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "and",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "mode"
+                  },
+                  "twolevel"
+                ]
+              },
+              {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "nav.sub"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "flex w-56 flex-col gap-4 px-4 py-6",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "side"
+                            },
+                            "end"
+                          ]
+                        },
+                        "border-r border-border",
+                        "border-l border-border"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "subnav"
+              },
+              "children": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Weight": "semibold",
+                    "Class": "px-4"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "nav.subTitle"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "organism": "NavBlock",
+                  "props": {
+                    "label": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "$": "landmarkLabel"
+                        },
+                        {
+                          "op": "uniq",
+                          "args": [
+                            {
+                              "op": "tpl",
+                              "args": [
+                                "{0}, {1}",
+                                {
+                                  "$": "nav.subTitle"
+                                },
+                                {
+                                  "$": "landmarkLabel"
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "$": "nav.subTitle"
+                        }
+                      ]
+                    }
+                  },
+                  "slots": {
+                    "children": {
+                      "args": [],
+                      "do": [
+                        {
+                          "use": "List",
+                          "props": {
+                            "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "nav.sub"
+                              },
+                              "as": "s",
+                              "key": {
+                                "$": "s.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "ListItem",
+                                  "children": [
+                                    {
+                                      "organism": "MenuEntry",
+                                      "props": {
+                                        "href": {
+                                          "$": "s.href"
+                                        },
+                                        "className": {
+                                          "op": "cn",
+                                          "args": [
+                                            "flex items-center gap-4 rounded py-2 text-sm",
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                true,
+                                                "px-4",
+                                                "justify-center px-2"
+                                              ]
+                                            },
+                                            {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "s.id"
+                                                    },
+                                                    {
+                                                      "$": "nav.subCurrent"
+                                                    }
+                                                  ]
+                                                },
+                                                "bg-muted font-medium",
+                                                ""
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        "current": {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "s.id"
+                                            },
+                                            {
+                                              "$": "nav.subCurrent"
+                                            }
+                                          ]
+                                        },
+                                        "size": "sm",
+                                        "testid": "item"
+                                      },
+                                      "slots": {
+                                        "children": {
+                                          "args": [],
+                                          "do": [
+                                            {
+                                              "use": "LucideIcon",
+                                              "props": {
+                                                "Name": {
+                                                  "$": "s.icon"
+                                                },
+                                                "Size": 16
+                                              }
+                                            },
+                                            {
+                                              "use": "Inline",
+                                              "props": {
+                                                "Class": {
+                                                  "op": "cond",
+                                                  "args": [
+                                                    true,
+                                                    "",
+                                                    "sr-only"
+                                                  ]
+                                                }
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "s.name"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "frame": true,
+  "typeImports": [
+    {
+      "from": "DashboardShell",
+      "names": [
+        "ShellNav"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/shell-topbar.json b/xgen/specs/organisms/shell-topbar.json
new file mode 100644
index 0000000..a8a3095
--- /dev/null
+++ b/xgen/specs/organisms/shell-topbar.json
@@ -0,0 +1,435 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.shell-topbar",
+  "name": "ShellTopbar",
+  "docs": "The top bar of DashboardShell: the brand (when no sidebar carries it), the links (when there is no sidebar), an optional search field, and the signed-in person.",
+  "records": {},
+  "props": [
+    {
+      "name": "nav",
+      "type": {
+        "ts": "ShellNav"
+      },
+      "required": true,
+      "docs": "the brand, the links and the texts of the shell"
+    },
+    {
+      "name": "brand",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "links",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "hide"
+    },
+    {
+      "name": "search",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "header",
+        "Class": "flex h-16 shrink-0 items-center gap-6 border-b border-border bg-background px-6"
+      },
+      "attrs": {
+        "data-testid": "topbar",
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "brand"
+              },
+              "show"
+            ]
+          },
+          "then": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Align": "center",
+                "Class": "shrink-0"
+              },
+              "attrs": {
+                "data-testid": "brand"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "layers",
+                    "Size": 24
+                  }
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "base",
+                    "Weight": "bold",
+                    "Class": {
+                      "op": "cond",
+                      "args": [
+                        true,
+                        "",
+                        "sr-only"
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "nav.brand"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "and",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "links"
+                  },
+                  "show"
+                ]
+              },
+              {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "nav.links"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "organism": "NavBlock",
+              "props": {
+                "label": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "landmarkLabel"
+                    },
+                    {
+                      "op": "uniq",
+                      "args": [
+                        {
+                          "op": "tpl",
+                          "args": [
+                            "{0}, {1}",
+                            {
+                              "$": "nav.label"
+                            },
+                            {
+                              "$": "landmarkLabel"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "$": "nav.label"
+                    }
+                  ]
+                },
+                "className": "hidden lg:block"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "List",
+                      "props": {
+                        "Class": "m-0 flex list-none items-center gap-2 p-0"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "nav.links"
+                          },
+                          "as": "l",
+                          "key": {
+                            "$": "l.id"
+                          },
+                          "do": [
+                            {
+                              "use": "ListItem",
+                              "children": [
+                                {
+                                  "organism": "MenuEntry",
+                                  "props": {
+                                    "href": {
+                                      "$": "l.href"
+                                    },
+                                    "className": {
+                                      "op": "cn",
+                                      "args": [
+                                        "flex items-center gap-4 rounded py-2 text-sm",
+                                        {
+                                          "op": "cond",
+                                          "args": [
+                                            true,
+                                            "px-4",
+                                            "justify-center px-2"
+                                          ]
+                                        },
+                                        {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "l.id"
+                                                },
+                                                {
+                                                  "$": "nav.current"
+                                                }
+                                              ]
+                                            },
+                                            "bg-muted font-medium",
+                                            ""
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    "current": {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "l.id"
+                                        },
+                                        {
+                                          "$": "nav.current"
+                                        }
+                                      ]
+                                    },
+                                    "size": "sm",
+                                    "testid": "item"
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": {
+                                              "$": "l.icon"
+                                            },
+                                            "Size": 16
+                                          }
+                                        },
+                                        {
+                                          "use": "Inline",
+                                          "props": {
+                                            "Class": {
+                                              "op": "cond",
+                                              "args": [
+                                                true,
+                                                "",
+                                                "sr-only"
+                                              ]
+                                            }
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "l.name"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "search"
+              },
+              "show"
+            ]
+          },
+          "then": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "links"
+                  },
+                  "show"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "ml-auto hidden w-64 shrink-0 xl:block"
+                  },
+                  "children": [
+                    {
+                      "organism": "SearchPalette",
+                      "props": {
+                        "label": {
+                          "$": "nav.search"
+                        },
+                        "shortcut": {
+                          "$": "nav.shortcut"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "organism": "SearchPalette",
+                  "props": {
+                    "label": {
+                      "$": "nav.search"
+                    },
+                    "shortcut": {
+                      "$": "nav.shortcut"
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "center",
+            "Class": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "and",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "links"
+                        },
+                        "show"
+                      ]
+                    },
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "search"
+                        },
+                        "show"
+                      ]
+                    }
+                  ]
+                },
+                "shrink-0",
+                "ml-auto shrink-0"
+              ]
+            }
+          },
+          "attrs": {
+            "data-testid": "user"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "bell",
+                "Size": 20,
+                "Class": "text-muted-foreground"
+              }
+            },
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "nav.userName"
+                },
+                "ratio": "1/1",
+                "className": "size-8 shrink-0 rounded-full"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "frame": true,
+  "typeImports": [
+    {
+      "from": "DashboardShell",
+      "names": [
+        "ShellNav"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/shopping-cart.json b/xgen/specs/organisms/shopping-cart.json
new file mode 100644
index 0000000..2cfcd07
--- /dev/null
+++ b/xgen/specs/organisms/shopping-cart.json
@@ -0,0 +1,528 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.shopping-cart",
+  "name": "ShoppingCart",
+  "docs": "The cart as a page: the lines as cards (picture, name, variant, price, quantity, line total, remove) with the way back, beside the order summary with a promo code and the free-delivery bar. Static markup. Axes: layout (split: the summary beside the lines, stacked: below them), promo (show, hide), progress (show, hide), tone.",
+  "records": {
+    "ShoppingCartLabels": [
+      {
+        "name": "back",
+        "type": "string"
+      },
+      {
+        "name": "clear",
+        "type": "string"
+      },
+      {
+        "name": "empty",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lines",
+      "type": {
+        "ts": "CartLine[]"
+      },
+      "required": true
+    },
+    {
+      "name": "rows",
+      "type": {
+        "ts": "SummaryRow[]"
+      },
+      "required": true
+    },
+    {
+      "name": "promos",
+      "type": {
+        "ts": "Promo[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "CartLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "totals",
+      "type": {
+        "ts": "CartSummaryLabels"
+      },
+      "required": true,
+      "docs": "labels of the order summary"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "record": "ShoppingCartLabels"
+      },
+      "required": true,
+      "docs": "labels of the buttons under the lines, and the empty-cart title"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"split\" | \"stacked\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "promo",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "progress",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "split"
+                      ]
+                    },
+                    "grid grid-cols-1 items-start gap-8 lg:grid-cols-3",
+                    "grid grid-cols-1 gap-8"
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "stretch",
+                    "Class": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "split"
+                          ]
+                        },
+                        "lg:col-span-2",
+                        ""
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "lines"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "lines"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "EmptyState",
+                          "props": {
+                            "icon": "shopping-cart",
+                            "title": {
+                              "$": "actions.empty"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "each": {
+                        "$": "lines"
+                      },
+                      "as": "line",
+                      "key": {
+                        "$": "line.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "center",
+                            "Class": "rounded bg-card inset-ring inset-ring-border flex-wrap p-4"
+                          },
+                          "attrs": {
+                            "data-testid": "item"
+                          },
+                          "children": [
+                            {
+                              "organism": "MediaFrame",
+                              "props": {
+                                "alt": {
+                                  "$": "line.name"
+                                },
+                                "ratio": "1/1",
+                                "className": "size-20 shrink-0"
+                              }
+                            },
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "0",
+                                "Class": "min-w-40 flex-1"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "line.name"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "xs",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "line.variant"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "op": "money",
+                                        "args": [
+                                          {
+                                            "$": "line.price"
+                                          },
+                                          {
+                                            "$": "line.currency"
+                                          }
+                                        ]
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "organism": "NumberField",
+                              "props": {
+                                "value": {
+                                  "op": "str",
+                                  "args": [
+                                    {
+                                      "$": "line.qty"
+                                    }
+                                  ]
+                                },
+                                "name": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-qty-{1}",
+                                    {
+                                      "$": "id"
+                                    },
+                                    {
+                                      "$": "line.id"
+                                    }
+                                  ]
+                                },
+                                "min": "1",
+                                "label": {
+                                  "$": "labels.qty"
+                                },
+                                "decrease": {
+                                  "$": "labels.decrease"
+                                },
+                                "increase": {
+                                  "$": "labels.increase"
+                                }
+                              }
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "base",
+                                "Weight": "bold",
+                                "Class": "w-24 text-right"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "op": "money",
+                                    "args": [
+                                      {
+                                        "op": "mul",
+                                        "args": [
+                                          {
+                                            "$": "line.price"
+                                          },
+                                          {
+                                            "$": "line.qty"
+                                          }
+                                        ]
+                                      },
+                                      {
+                                        "$": "line.currency"
+                                      }
+                                    ]
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "ghost",
+                                "Size": "sm",
+                                "Layout": "icon",
+                                "AriaLabel": {
+                                  "$": "labels.remove"
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "remove"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "trash",
+                                    "Size": 16
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Justify": "between",
+                        "Class": "flex-wrap"
+                      },
+                      "children": [
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "outline",
+                            "Size": "default"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": "arrow-left",
+                                "Size": 16
+                              }
+                            },
+                            {
+                              "text": {
+                                "$": "actions.back"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "ghost",
+                            "Size": "default"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "actions.clear"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "split"
+                          ]
+                        },
+                        "lg:sticky lg:top-8",
+                        ""
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "aside"
+                  },
+                  "children": [
+                    {
+                      "organism": "CartSummaryCard",
+                      "props": {
+                        "field": {
+                          "op": "tpl",
+                          "args": [
+                            "{0}-promo",
+                            {
+                              "$": "id"
+                            }
+                          ]
+                        },
+                        "lines": {
+                          "$": "lines"
+                        },
+                        "rows": {
+                          "$": "rows"
+                        },
+                        "promos": {
+                          "$": "promos"
+                        },
+                        "labels": {
+                          "$": "totals"
+                        },
+                        "promo": {
+                          "$": "promo"
+                        },
+                        "progress": {
+                          "$": "progress"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "CartList",
+      "names": [
+        "CartLine",
+        "CartLabels"
+      ]
+    },
+    {
+      "from": "OrderSummary",
+      "names": [
+        "SummaryRow"
+      ]
+    },
+    {
+      "from": "CartSummaryCard",
+      "names": [
+        "Promo",
+        "CartSummaryLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/sidebar-nav.json b/xgen/specs/organisms/sidebar-nav.json
new file mode 100644
index 0000000..a0d1266
--- /dev/null
+++ b/xgen/specs/organisms/sidebar-nav.json
@@ -0,0 +1,461 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.sidebar-nav",
+  "name": "SidebarNav",
+  "docs": "A vertical navigation: the brand at the top, the links stacked, the user at the bottom. Axes: width (full: icon and name, compact: icons only with the name hidden), user (show, hide), density.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "brand",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "links",
+      "type": {
+        "ts": "NavLink[]"
+      },
+      "required": true
+    },
+    {
+      "name": "current",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "userName",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "userEmail",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "width",
+      "type": {
+        "ts": "\"full\" | \"compact\""
+      },
+      "default": "full"
+    },
+    {
+      "name": "user",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "aside",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex min-h-96 flex-col gap-6 rounded bg-card p-4 inset-ring inset-ring-border",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "width"
+                    },
+                    "compact"
+                  ]
+                },
+                "w-20 items-center",
+                "w-64"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "$": "brand"
+            }
+          ]
+        },
+        "data-testid": "sidebar",
+        "data-width": {
+          "$": "width"
+        }
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "layers",
+                "Size": 24
+              }
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "base",
+                "Weight": "bold",
+                "Class": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "width"
+                        },
+                        "compact"
+                      ]
+                    },
+                    "sr-only",
+                    ""
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "brand"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "gt",
+            "args": [
+              {
+                "op": "len",
+                "args": [
+                  {
+                    "$": "links"
+                  }
+                ]
+              },
+              0
+            ]
+          },
+          "then": [
+            {
+              "organism": "NavBlock",
+              "props": {
+                "label": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "landmarkLabel"
+                    },
+                    {
+                      "op": "uniq",
+                      "args": [
+                        {
+                          "op": "tpl",
+                          "args": [
+                            "{0}, {1}",
+                            {
+                              "$": "label"
+                            },
+                            {
+                              "$": "landmarkLabel"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "$": "label"
+                    }
+                  ]
+                },
+                "className": "flex-1"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "List",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "m-0 flex list-none flex-col p-0",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "density"
+                                    },
+                                    "compact"
+                                  ]
+                                },
+                                "gap-0",
+                                "gap-2"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "links"
+                          },
+                          "as": "l",
+                          "key": {
+                            "$": "l.id"
+                          },
+                          "do": [
+                            {
+                              "use": "ListItem",
+                              "children": [
+                                {
+                                  "organism": "MenuEntry",
+                                  "props": {
+                                    "href": {
+                                      "$": "l.href"
+                                    },
+                                    "className": {
+                                      "op": "cn",
+                                      "args": [
+                                        "flex items-center gap-4 rounded px-4 text-sm",
+                                        "py-2",
+                                        {
+                                          "op": "cond",
+                                          "args": [
+                                            {
+                                              "op": "eq",
+                                              "args": [
+                                                {
+                                                  "$": "l.id"
+                                                },
+                                                {
+                                                  "$": "current"
+                                                }
+                                              ]
+                                            },
+                                            "bg-muted font-semibold",
+                                            ""
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    "current": {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "l.id"
+                                        },
+                                        {
+                                          "$": "current"
+                                        }
+                                      ]
+                                    },
+                                    "testid": "item"
+                                  },
+                                  "slots": {
+                                    "children": {
+                                      "args": [],
+                                      "do": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": {
+                                              "$": "l.icon"
+                                            },
+                                            "Size": 16
+                                          }
+                                        },
+                                        {
+                                          "use": "Inline",
+                                          "props": {
+                                            "Class": {
+                                              "op": "cond",
+                                              "args": [
+                                                {
+                                                  "op": "eq",
+                                                  "args": [
+                                                    {
+                                                      "$": "width"
+                                                    },
+                                                    "compact"
+                                                  ]
+                                                },
+                                                "sr-only",
+                                                ""
+                                              ]
+                                            }
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "l.name"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "user"
+              },
+              "show"
+            ]
+          },
+          "then": [
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "4",
+                "Align": "center",
+                "Class": "border-t border-border pt-4"
+              },
+              "attrs": {
+                "data-testid": "user"
+              },
+              "children": [
+                {
+                  "organism": "MediaFrame",
+                  "props": {
+                    "alt": {
+                      "$": "userName"
+                    },
+                    "ratio": "1/1",
+                    "className": "size-10 shrink-0 rounded-full"
+                  }
+                },
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "0",
+                    "Class": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "width"
+                            },
+                            "compact"
+                          ]
+                        },
+                        "sr-only",
+                        "min-w-0"
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Weight": "semibold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "userName"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "userEmail"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "NavBar",
+      "names": [
+        "NavLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/signup-wizard.json b/xgen/specs/organisms/signup-wizard.json
new file mode 100644
index 0000000..e8c07f4
--- /dev/null
+++ b/xgen/specs/organisms/signup-wizard.json
@@ -0,0 +1,758 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.signup-wizard",
+  "name": "SignupWizard",
+  "docs": "A sign-up in steps: the progress, the fields of the current step, back and next. `current` is the step shown, counted from 1. Axes: progress (bar, list: every step named), layout (card, plain). Keeping the typed values between steps is the page's job.",
+  "records": {
+    "WizardStep": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "fieldA",
+        "type": "string"
+      },
+      {
+        "name": "fieldB",
+        "type": "string"
+      }
+    ],
+    "WizardLabels": [
+      {
+        "name": "stepOf",
+        "type": "string"
+      },
+      {
+        "name": "steps",
+        "type": "string"
+      },
+      {
+        "name": "back",
+        "type": "string"
+      },
+      {
+        "name": "next",
+        "type": "string"
+      },
+      {
+        "name": "finish",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "steps",
+      "type": {
+        "ts": "WizardStep[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "WizardLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "current",
+      "type": "number",
+      "default": 1
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 2
+    },
+    {
+      "name": "progress",
+      "type": {
+        "ts": "\"bar\" | \"list\""
+      },
+      "default": "bar"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "go",
+      "args": [
+        {
+          "name": "step",
+          "type": "number"
+        }
+      ],
+      "docs": "back or next was pressed"
+    }
+  ],
+  "view": [
+    {
+      "when": {
+        "op": "gt",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "steps"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "use": "Block",
+          "props": {
+            "Tag": "section",
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto flex w-full max-w-lg flex-col gap-6 px-4 py-8",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "card"
+                      ]
+                    },
+                    "rounded bg-card p-6 inset-ring inset-ring-border",
+                    ""
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "aria-labelledby": {
+              "op": "cond",
+              "args": [
+                {
+                  "$": "landmarkLabel"
+                },
+                {
+                  "op": "undef",
+                  "args": []
+                },
+                {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-title",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                }
+              ]
+            },
+            "data-testid": "wizard",
+            "data-current": {
+              "op": "str",
+              "args": [
+                {
+                  "$": "current"
+                }
+              ]
+            },
+            "aria-label": {
+              "$": "landmarkLabel"
+            }
+          },
+          "children": [
+            {
+              "use": "Title",
+              "props": {
+                "As": {
+                  "$": "level"
+                },
+                "Size": "2xl",
+                "Weight": "bold"
+              },
+              "attrs": {
+                "id": {
+                  "op": "tpl",
+                  "args": [
+                    "{0}-title",
+                    {
+                      "$": "id"
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "title"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Class": "text-muted-foreground"
+              },
+              "attrs": {
+                "data-testid": "step-of"
+              },
+              "children": [
+                {
+                  "text": {
+                    "op": "tpl",
+                    "args": [
+                      {
+                        "$": "labels.stepOf"
+                      },
+                      {
+                        "$": "current"
+                      },
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "steps"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "progress"
+                  },
+                  "bar"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Progress",
+                  "props": {
+                    "Value": {
+                      "op": "str",
+                      "args": [
+                        {
+                          "$": "current"
+                        }
+                      ]
+                    },
+                    "Max": {
+                      "op": "str",
+                      "args": [
+                        {
+                          "op": "len",
+                          "args": [
+                            {
+                              "$": "steps"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "aria-label": {
+                      "$": "labels.steps"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "progress"
+                  },
+                  "list"
+                ]
+              },
+              "then": [
+                {
+                  "use": "List",
+                  "props": {
+                    "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                  },
+                  "attrs": {
+                    "aria-label": {
+                      "$": "labels.steps"
+                    },
+                    "data-testid": "step-list"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "steps"
+                      },
+                      "as": "s",
+                      "key": {
+                        "$": "s.id"
+                      },
+                      "do": [
+                        {
+                          "use": "ListItem",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "flex items-center gap-4 text-sm",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "op": "add",
+                                          "args": [
+                                            {
+                                              "$": "i"
+                                            },
+                                            1
+                                          ]
+                                        },
+                                        {
+                                          "$": "current"
+                                        }
+                                      ]
+                                    },
+                                    "font-semibold",
+                                    "text-muted-foreground"
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "aria-current": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "op": "add",
+                                      "args": [
+                                        {
+                                          "$": "i"
+                                        },
+                                        1
+                                      ]
+                                    },
+                                    {
+                                      "$": "current"
+                                    }
+                                  ]
+                                },
+                                "step",
+                                {
+                                  "op": "undef",
+                                  "args": []
+                                }
+                              ]
+                            },
+                            "data-testid": "step-item"
+                          },
+                          "children": [
+                            {
+                              "use": "LucideIcon",
+                              "props": {
+                                "Name": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "lt",
+                                      "args": [
+                                        {
+                                          "op": "add",
+                                          "args": [
+                                            {
+                                              "$": "i"
+                                            },
+                                            1
+                                          ]
+                                        },
+                                        {
+                                          "$": "current"
+                                        }
+                                      ]
+                                    },
+                                    "circle-check",
+                                    {
+                                      "$": "s.icon"
+                                    }
+                                  ]
+                                },
+                                "Size": 16
+                              }
+                            },
+                            {
+                              "text": {
+                                "$": "s.title"
+                              }
+                            }
+                          ]
+                        }
+                      ],
+                      "index": "i"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "each": {
+                "$": "steps"
+              },
+              "as": "s",
+              "key": {
+                "$": "s.id"
+              },
+              "do": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "op": "add",
+                        "args": [
+                          {
+                            "$": "i"
+                          },
+                          1
+                        ]
+                      },
+                      {
+                        "$": "current"
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch"
+                      },
+                      "attrs": {
+                        "data-testid": "step"
+                      },
+                      "children": [
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 3,
+                            "Size": "xl",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "sm",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "s.text"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": "grid gap-4"
+                          },
+                          "children": [
+                            {
+                              "organism": "Field",
+                              "props": {
+                                "label": {
+                                  "$": "s.fieldA"
+                                },
+                                "htmlFor": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-a",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "use": "Input",
+                                      "props": {
+                                        "Type": "text",
+                                        "Name": {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}-a",
+                                            {
+                                              "$": "id"
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "attrs": {
+                                        "id": {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}-a",
+                                            {
+                                              "$": "id"
+                                            }
+                                          ]
+                                        },
+                                        "data-testid": "field"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              "organism": "Field",
+                              "props": {
+                                "label": {
+                                  "$": "s.fieldB"
+                                },
+                                "htmlFor": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-b",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "use": "Input",
+                                      "props": {
+                                        "Type": "text",
+                                        "Name": {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}-b",
+                                            {
+                                              "$": "id"
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "attrs": {
+                                        "id": {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}-b",
+                                            {
+                                              "$": "id"
+                                            }
+                                          ]
+                                        },
+                                        "data-testid": "field"
+                                      }
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            },
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "2",
+                "Justify": "between"
+              },
+              "children": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "default",
+                    "Type": "button",
+                    "Disabled": {
+                      "op": "lt",
+                      "args": [
+                        {
+                          "$": "current"
+                        },
+                        2
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "wizard-back"
+                  },
+                  "on": {
+                    "click": {
+                      "call": "emit.go",
+                      "args": [
+                        {
+                          "op": "sub",
+                          "args": [
+                            {
+                              "$": "current"
+                            },
+                            1
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "labels.back"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "default",
+                    "Size": "default",
+                    "Type": "button"
+                  },
+                  "attrs": {
+                    "data-testid": "wizard-next"
+                  },
+                  "on": {
+                    "click": {
+                      "call": "emit.go",
+                      "args": [
+                        {
+                          "op": "add",
+                          "args": [
+                            {
+                              "$": "current"
+                            },
+                            1
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "op": "cond",
+                        "args": [
+                          {
+                            "op": "ge",
+                            "args": [
+                              {
+                                "$": "current"
+                              },
+                              {
+                                "op": "len",
+                                "args": [
+                                  {
+                                    "$": "steps"
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          {
+                            "$": "labels.finish"
+                          },
+                          {
+                            "$": "labels.next"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/site-footer.json b/xgen/specs/organisms/site-footer.json
new file mode 100644
index 0000000..5f6c46f
--- /dev/null
+++ b/xgen/specs/organisms/site-footer.json
@@ -0,0 +1,253 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.site-footer",
+  "name": "SiteFooter",
+  "docs": "The page footer: the copyright line and the same two links. Axes: layout (minimal, centered), density (default, compact).",
+  "records": {
+    "SiteFooterLabels": [
+      {
+        "name": "copyright",
+        "type": "string"
+      },
+      {
+        "name": "nav",
+        "type": "string"
+      },
+      {
+        "name": "home",
+        "type": "string"
+      },
+      {
+        "name": "pricing",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "labels",
+      "type": {
+        "record": "SiteFooterLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "routes",
+      "type": {
+        "ts": "SiteRoutes"
+      },
+      "docs": "the addresses of the two pages, from the app; none: text, not links"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"minimal\" | \"centered\""
+      },
+      "default": "minimal",
+      "docs": "minimal: one row; centered: stacked and centered"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "footer",
+        "Class": "mt-12 border-t border-border"
+      },
+      "attrs": {
+        "data-testid": "site-footer",
+        "data-layout": {
+          "$": "layout"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                "flex flex-wrap items-center gap-4",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "density"
+                        },
+                        "compact"
+                      ]
+                    },
+                    "py-4",
+                    "py-6"
+                  ]
+                },
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "centered"
+                      ]
+                    },
+                    "flex-col text-center",
+                    "justify-between"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Class": "text-muted-foreground"
+              },
+              "attrs": {
+                "data-testid": "copyright"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.copyright"
+                  }
+                }
+              ]
+            },
+            {
+              "organism": "NavBlock",
+              "props": {
+                "label": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "landmarkLabel"
+                    },
+                    {
+                      "op": "uniq",
+                      "args": [
+                        {
+                          "op": "tpl",
+                          "args": [
+                            "{0}, {1}",
+                            {
+                              "$": "labels.nav"
+                            },
+                            {
+                              "$": "landmarkLabel"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "$": "labels.nav"
+                    }
+                  ]
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4"
+                      },
+                      "children": [
+                        {
+                          "organism": "MenuEntry",
+                          "props": {
+                            "href": {
+                              "$": "routes.home"
+                            },
+                            "className": "font-semibold"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "text": {
+                                    "$": "labels.home"
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "organism": "MenuEntry",
+                          "props": {
+                            "href": {
+                              "$": "routes.pricing"
+                            },
+                            "className": "font-semibold"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "text": {
+                                    "$": "labels.pricing"
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "SiteHeader",
+      "names": [
+        "SiteRoutes"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/site-header.json b/xgen/specs/organisms/site-header.json
new file mode 100644
index 0000000..88a867f
--- /dev/null
+++ b/xgen/specs/organisms/site-header.json
@@ -0,0 +1,417 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.site-header",
+  "name": "SiteHeader",
+  "docs": "The page header: a skip link to the main content, the brand, the two navigation links (the current one carries aria-current) and the theme button. `current` is the route area. Axes: layout (inline, stacked), position (static, sticky), actions (none, cta).",
+  "records": {
+    "SiteHeaderLabels": [
+      {
+        "name": "skip",
+        "type": "string"
+      },
+      {
+        "name": "brand",
+        "type": "string"
+      },
+      {
+        "name": "nav",
+        "type": "string"
+      },
+      {
+        "name": "home",
+        "type": "string"
+      },
+      {
+        "name": "pricing",
+        "type": "string"
+      },
+      {
+        "name": "theme",
+        "type": "string"
+      }
+    ],
+    "SiteRoutes": [
+      {
+        "name": "home",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "pricing",
+        "type": "string",
+        "optional": true
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "labels",
+      "type": {
+        "record": "SiteHeaderLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "routes",
+      "type": {
+        "record": "SiteRoutes"
+      },
+      "docs": "the addresses of the two pages, from the app; none: the brand and the menu are text, not links"
+    },
+    {
+      "name": "current",
+      "type": "string",
+      "required": true,
+      "docs": "the area of the current route: home or pricing"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"inline\" | \"stacked\""
+      },
+      "default": "inline",
+      "docs": "inline: brand left, links and button right; stacked: all centered in rows"
+    },
+    {
+      "name": "position",
+      "type": {
+        "ts": "\"static\" | \"sticky\""
+      },
+      "default": "static",
+      "docs": "sticky: stays at the top while the page scrolls"
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "\"none\" | \"cta\""
+      },
+      "default": "none",
+      "docs": "cta: a call-to-action button after the navigation"
+    },
+    {
+      "name": "cta",
+      "type": "string",
+      "docs": "text of the call to action"
+    },
+    {
+      "name": "ctaHref",
+      "type": "string"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "theme",
+      "args": [],
+      "docs": "the theme button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "header",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "border-b border-border bg-background",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "position"
+                    },
+                    "sticky"
+                  ]
+                },
+                "sticky top-0 z-40",
+                ""
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-testid": "site-header",
+        "data-layout": {
+          "$": "layout"
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "use": "LinkPlain",
+          "props": {
+            "Href": "#main-content",
+            "Class": "sr-only focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50 focus:rounded focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:inset-ring focus:inset-ring-border"
+          },
+          "attrs": {
+            "data-testid": "skip-link"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "labels.skip"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "mx-auto w-full max-w-6xl px-4",
+                "flex flex-wrap gap-4 py-4",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "layout"
+                        },
+                        "stacked"
+                      ]
+                    },
+                    "flex-col items-center",
+                    "items-center justify-between"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "organism": "MenuEntry",
+              "props": {
+                "href": {
+                  "$": "routes.home"
+                },
+                "className": "text-lg font-medium",
+                "testid": "brand"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "text": {
+                        "$": "labels.brand"
+                      }
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "organism": "NavBlock",
+              "props": {
+                "label": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "landmarkLabel"
+                    },
+                    {
+                      "op": "uniq",
+                      "args": [
+                        {
+                          "op": "tpl",
+                          "args": [
+                            "{0}, {1}",
+                            {
+                              "$": "labels.nav"
+                            },
+                            {
+                              "$": "landmarkLabel"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "$": "labels.nav"
+                    }
+                  ]
+                },
+                "testid": "site-nav"
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "center"
+                      },
+                      "children": [
+                        {
+                          "organism": "MenuEntry",
+                          "props": {
+                            "href": {
+                              "$": "routes.home"
+                            },
+                            "className": "font-semibold",
+                            "current": {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "current"
+                                },
+                                "home"
+                              ]
+                            },
+                            "testid": "nav-link"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "text": {
+                                    "$": "labels.home"
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        },
+                        {
+                          "organism": "MenuEntry",
+                          "props": {
+                            "href": {
+                              "$": "routes.pricing"
+                            },
+                            "className": "font-semibold",
+                            "current": {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "current"
+                                },
+                                "pricing"
+                              ]
+                            },
+                            "testid": "nav-link"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "text": {
+                                    "$": "labels.pricing"
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "use": "Group",
+              "props": {
+                "Gap": "4",
+                "Align": "center"
+              },
+              "children": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "sm"
+                  },
+                  "attrs": {
+                    "data-testid": "theme-toggle"
+                  },
+                  "on": {
+                    "click": {
+                      "call": "emit.theme",
+                      "args": []
+                    }
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "labels.theme"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "and",
+                    "args": [
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "actions"
+                          },
+                          "cta"
+                        ]
+                      },
+                      {
+                        "$": "cta"
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "default",
+                        "Size": "sm",
+                        "Href": {
+                          "$": "ctaHref"
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "header-cta"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "cta"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/sitemap-footer.json b/xgen/specs/organisms/sitemap-footer.json
new file mode 100644
index 0000000..8813a3e
--- /dev/null
+++ b/xgen/specs/organisms/sitemap-footer.json
@@ -0,0 +1,619 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.sitemap-footer",
+  "name": "SitemapFooter",
+  "docs": "A footer with the brand, a tagline, groups of links and the copyright. Axes: layout (columns: brand above, equal columns per group, row: the brand, the group names and the copyright in one row), signup mode (none, first: a sign-up above the links), status mode (none, show: a live status pill), density. The live status itself is a port contract.",
+  "records": {
+    "FooterSignup": [
+      {
+        "name": "mode",
+        "type": "\"none\" | \"first\"",
+        "optional": true,
+        "docs": "first: the sign-up comes before the links",
+        "default": "none"
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": true,
+        "docs": "accessible name of the email field"
+      },
+      {
+        "name": "submit",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "FooterStatus": [
+      {
+        "name": "mode",
+        "type": "\"none\" | \"show\"",
+        "optional": true,
+        "docs": "show: the status pill is drawn",
+        "default": "none"
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": true,
+        "docs": "text of the pill"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the link groups"
+    },
+    {
+      "name": "brand",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "tagline",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "copyright",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "groups",
+      "type": {
+        "ts": "MegaGroup[]"
+      },
+      "required": true
+    },
+    {
+      "name": "signup",
+      "type": {
+        "record": "FooterSignup"
+      },
+      "docs": "a newsletter sign-up above the links"
+    },
+    {
+      "name": "status",
+      "type": {
+        "record": "FooterStatus"
+      },
+      "docs": "a live status pill beside the copyright"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "default": "footer"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"columns\" | \"row\" | \"card\""
+      },
+      "default": "columns",
+      "docs": "card: the groups in one rounded card (FooterCard)"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "layout"
+          },
+          "card"
+        ]
+      },
+      "then": [
+        {
+          "organism": "FooterCard",
+          "props": {
+            "label": {
+              "$": "label"
+            },
+            "brand": {
+              "$": "brand"
+            },
+            "groups": {
+              "$": "groups"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "use": "Block",
+          "props": {
+            "Tag": "footer",
+            "Class": "mt-12 border-t border-border"
+          },
+          "attrs": {
+            "data-testid": "site-footer",
+            "data-layout": {
+              "$": "layout"
+            },
+            "aria-label": {
+              "$": "landmarkLabel"
+            }
+          },
+          "children": [
+            {
+              "use": "Container",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "mx-auto w-full max-w-6xl px-4",
+                    "flex flex-col gap-8",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "density"
+                            },
+                            "compact"
+                          ]
+                        },
+                        "py-6",
+                        "py-12"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-slot": "container"
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "signup.mode"
+                      },
+                      "first"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Class": "max-w-md"
+                      },
+                      "attrs": {
+                        "data-testid": "signup"
+                      },
+                      "children": [
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 3,
+                            "Size": "xl",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "signup.title"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Form",
+                          "props": {
+                            "Method": "dialog",
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "w-full max-w-md",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    false,
+                                    "mx-auto",
+                                    ""
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "email-form"
+                          },
+                          "children": [
+                            {
+                              "use": "Label",
+                              "props": {
+                                "HTMLFor": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-email",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                },
+                                "Class": "sr-only"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "signup.label"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Group",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "start",
+                                "Class": "w-full flex-wrap"
+                              },
+                              "children": [
+                                {
+                                  "use": "Input",
+                                  "props": {
+                                    "Type": "email",
+                                    "Name": "email",
+                                    "Class": "min-w-0 flex-1"
+                                  },
+                                  "attrs": {
+                                    "id": {
+                                      "op": "tpl",
+                                      "args": [
+                                        "{0}-email",
+                                        {
+                                          "$": "id"
+                                        }
+                                      ]
+                                    },
+                                    "data-testid": "field"
+                                  }
+                                },
+                                {
+                                  "use": "Button",
+                                  "props": {
+                                    "Variant": "default",
+                                    "Size": "default",
+                                    "Type": "submit"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "submit"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "signup.submit"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "columns"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "flex flex-col gap-8 md:flex-row md:items-start md:gap-12"
+                      },
+                      "attrs": {
+                        "data-slot": "footer-top"
+                      },
+                      "children": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "2",
+                            "Class": "md:w-64 md:shrink-0"
+                          },
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xl",
+                                "Weight": "bold"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "brand"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "sm",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "tagline"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": "min-w-0 flex-1"
+                          },
+                          "children": [
+                            {
+                              "organism": "FooterColumns",
+                              "props": {
+                                "label": {
+                                  "$": "label"
+                                },
+                                "groups": {
+                                  "$": "groups"
+                                },
+                                "landmarkLabel": {
+                                  "$": "landmarkLabel"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "6",
+                        "Align": "center",
+                        "Justify": "between",
+                        "Class": "flex-wrap"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "base",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "brand"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "op": "gt",
+                            "args": [
+                              {
+                                "op": "len",
+                                "args": [
+                                  {
+                                    "$": "groups"
+                                  }
+                                ]
+                              },
+                              0
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "NavBlock",
+                              "props": {
+                                "label": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "$": "landmarkLabel"
+                                    },
+                                    {
+                                      "op": "uniq",
+                                      "args": [
+                                        {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}, {1}",
+                                            {
+                                              "$": "label"
+                                            },
+                                            {
+                                              "$": "landmarkLabel"
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "$": "label"
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "use": "Group",
+                                      "props": {
+                                        "Gap": "4",
+                                        "Class": "flex-wrap"
+                                      },
+                                      "children": [
+                                        {
+                                          "each": {
+                                            "$": "groups"
+                                          },
+                                          "as": "g",
+                                          "key": {
+                                            "$": "g.id"
+                                          },
+                                          "do": [
+                                            {
+                                              "organism": "MenuEntry",
+                                              "props": {
+                                                "href": {
+                                                  "$": "g.href"
+                                                },
+                                                "className": "text-sm",
+                                                "testid": "group"
+                                              },
+                                              "slots": {
+                                                "children": {
+                                                  "args": [],
+                                                  "do": [
+                                                    {
+                                                      "text": {
+                                                        "$": "g.title"
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Justify": "between",
+                    "Class": "flex-wrap border-t border-border pt-6"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "copyright"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "status.mode"
+                          },
+                          "show"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "organism": "Pill",
+                          "props": {
+                            "tone": "green",
+                            "icon": "circle-check"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "text": {
+                                    "$": "status.label"
+                                  }
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MegaMenu",
+      "names": [
+        "MegaGroup"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/skeleton-layout.json b/xgen/specs/organisms/skeleton-layout.json
new file mode 100644
index 0000000..f5e13f5
--- /dev/null
+++ b/xgen/specs/organisms/skeleton-layout.json
@@ -0,0 +1,300 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.skeleton-layout",
+  "name": "SkeletonLayout",
+  "docs": "The loading state of a page: grey blocks in the shape of the content that is coming (cards, a list of rows or an article). Axes: shape (cards, list, article), tone. The label tells assistive technology that the content is loading. The shimmer itself belongs to the Skeleton part.",
+  "records": {
+    "Line": [
+      {
+        "name": "id",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "docs": "e.g. `Loading`"
+    },
+    {
+      "name": "lines",
+      "type": {
+        "ts": "Line[]"
+      },
+      "required": true,
+      "docs": "how many placeholders to draw"
+    },
+    {
+      "name": "shape",
+      "type": {
+        "ts": "\"cards\" | \"list\" | \"article\""
+      },
+      "default": "cards"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Block",
+              "props": {
+                "Tag": "div",
+                "Class": "w-full"
+              },
+              "attrs": {
+                "role": "status",
+                "aria-label": {
+                  "$": "label"
+                },
+                "data-testid": "skeleton",
+                "data-shape": {
+                  "$": "shape"
+                }
+              },
+              "children": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "shape"
+                      },
+                      "cards"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": "1-3",
+                        "Class": "gap-4"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "lines"
+                          },
+                          "as": "l",
+                          "key": {
+                            "$": "l.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "4",
+                                "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Skeleton",
+                                  "props": {
+                                    "Class": "aspect-video w-full"
+                                  }
+                                },
+                                {
+                                  "use": "Skeleton",
+                                  "props": {
+                                    "Class": "h-4 w-2/3"
+                                  }
+                                },
+                                {
+                                  "use": "Skeleton",
+                                  "props": {
+                                    "Class": "h-4 w-full"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "shape"
+                          },
+                          "list"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "stretch"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "lines"
+                              },
+                              "as": "l",
+                              "key": {
+                                "$": "l.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "4",
+                                    "Align": "center"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "item"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Skeleton",
+                                      "props": {
+                                        "Class": "size-10 shrink-0 rounded-full"
+                                      }
+                                    },
+                                    {
+                                      "use": "Stack",
+                                      "props": {
+                                        "Gap": "2",
+                                        "Class": "flex-1"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Skeleton",
+                                          "props": {
+                                            "Class": "h-4 w-1/3"
+                                          }
+                                        },
+                                        {
+                                          "use": "Skeleton",
+                                          "props": {
+                                            "Class": "h-4 w-full"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ],
+                      "else": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "stretch",
+                            "Class": "mx-auto max-w-2xl"
+                          },
+                          "children": [
+                            {
+                              "use": "Skeleton",
+                              "props": {
+                                "Class": "h-8 w-3/4"
+                              }
+                            },
+                            {
+                              "each": {
+                                "$": "lines"
+                              },
+                              "as": "l",
+                              "key": {
+                                "$": "l.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "item"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Skeleton",
+                                      "props": {
+                                        "Class": "h-4 w-full"
+                                      }
+                                    },
+                                    {
+                                      "use": "Skeleton",
+                                      "props": {
+                                        "Class": "h-4 w-5/6"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/slot-board.json b/xgen/specs/organisms/slot-board.json
new file mode 100644
index 0000000..42523cc
--- /dev/null
+++ b/xgen/specs/organisms/slot-board.json
@@ -0,0 +1,499 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.slot-board",
+  "name": "SlotBoard",
+  "docs": "Pick a delivery window: the days with their windows as radio chips, beside a card with the zone, its price and the buttons. Static markup. Axes: layout (split: the card beside the days, stacked: the days only), item (card, plain), tone.",
+  "records": {
+    "SlotLabels": [
+      {
+        "name": "zone",
+        "type": "string"
+      },
+      {
+        "name": "price",
+        "type": "string"
+      },
+      {
+        "name": "freeFrom",
+        "type": "string"
+      },
+      {
+        "name": "time",
+        "type": "string"
+      },
+      {
+        "name": "primary",
+        "type": "string"
+      },
+      {
+        "name": "secondary",
+        "type": "string"
+      },
+      {
+        "name": "note",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "days",
+      "type": {
+        "ts": "Day[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "zone",
+      "type": {
+        "ts": "Zone"
+      },
+      "required": true,
+      "docs": "the zone of the address"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "SlotLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"split\" | \"stacked\""
+      },
+      "default": "split"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "days"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "calendar",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "grid grid-cols-1 items-start gap-8 lg:grid-cols-3"
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "split"
+                              ]
+                            },
+                            "lg:col-span-2",
+                            "lg:col-span-3"
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "organism": "SlotGrid",
+                          "props": {
+                            "days": {
+                              "$": "days"
+                            },
+                            "name": {
+                              "op": "tpl",
+                              "args": [
+                                "{0}-slot",
+                                {
+                                  "$": "id"
+                                }
+                              ]
+                            },
+                            "item": {
+                              "$": "item"
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "split"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Stack",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "stretch",
+                            "Class": "rounded bg-card inset-ring inset-ring-border p-6"
+                          },
+                          "attrs": {
+                            "data-testid": "aside"
+                          },
+                          "children": [
+                            {
+                              "organism": "Field",
+                              "props": {
+                                "label": {
+                                  "$": "labels.zone"
+                                },
+                                "htmlFor": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-zone",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                }
+                              },
+                              "slots": {
+                                "children": {
+                                  "args": [],
+                                  "do": [
+                                    {
+                                      "use": "Select",
+                                      "props": {
+                                        "Name": {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}-zone",
+                                            {
+                                              "$": "id"
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "attrs": {
+                                        "id": {
+                                          "op": "tpl",
+                                          "args": [
+                                            "{0}-zone",
+                                            {
+                                              "$": "id"
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "SelectOption",
+                                          "props": {
+                                            "Value": {
+                                              "$": "zone.id"
+                                            },
+                                            "Label": {
+                                              "$": "zone.name"
+                                            },
+                                            "Selected": true
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              "use": "List",
+                              "props": {
+                                "Tag": "ul",
+                                "Class": "flex flex-col gap-2"
+                              },
+                              "children": [
+                                {
+                                  "use": "ListItem",
+                                  "props": {
+                                    "Class": "flex items-center justify-between gap-4 text-sm"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "labels.price"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "font-medium"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "money",
+                                            "args": [
+                                              {
+                                                "$": "zone.price"
+                                              },
+                                              {
+                                                "$": "zone.currency"
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "ListItem",
+                                  "props": {
+                                    "Class": "flex items-center justify-between gap-4 text-sm"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "labels.freeFrom"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "font-medium"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "money",
+                                            "args": [
+                                              {
+                                                "$": "zone.freeFrom"
+                                              },
+                                              {
+                                                "$": "zone.currency"
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "ListItem",
+                                  "props": {
+                                    "Class": "flex items-center justify-between gap-4 text-sm"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "labels.time"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "font-medium"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "zone.time"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "default",
+                                "Size": "default",
+                                "Class": "w-full"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.primary"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "outline",
+                                "Size": "default",
+                                "Class": "w-full"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.secondary"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Size": "xs",
+                                "Class": "text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "labels.note"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "SlotGrid",
+      "names": [
+        "Day"
+      ]
+    },
+    {
+      "from": "ZoneTable",
+      "names": [
+        "Zone"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/slot-grid.json b/xgen/specs/organisms/slot-grid.json
new file mode 100644
index 0000000..fc114b4
--- /dev/null
+++ b/xgen/specs/organisms/slot-grid.json
@@ -0,0 +1,264 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.slot-grid",
+  "name": "SlotGrid",
+  "docs": "Delivery windows by day: each day lists its windows as radio chips; closed windows are disabled and struck through. One radio group (`name`) across all days. Static markup.",
+  "records": {
+    "Day": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "note",
+        "type": "string"
+      },
+      {
+        "name": "slots",
+        "type": "string[]"
+      },
+      {
+        "name": "closed",
+        "type": "string[]"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "days",
+      "type": {
+        "ts": "Day[]"
+      },
+      "required": true
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "required": true,
+      "docs": "name of the radio group"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card",
+      "docs": "card: each day in a card; plain: days divided by a line"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch"
+      },
+      "attrs": {
+        "data-testid": "days"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "days"
+          },
+          "as": "d",
+          "key": {
+            "$": "d.id"
+          },
+          "do": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "4",
+                "Class": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "item"
+                        },
+                        "card"
+                      ]
+                    },
+                    "rounded bg-card inset-ring inset-ring-border p-4",
+                    "border-b border-border pb-4"
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "day"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "baseline",
+                    "Justify": "between",
+                    "Class": "flex-wrap"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Weight": "semibold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "d.title"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "d.note"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "grid grid-cols-2 gap-2 sm:grid-cols-3"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "d.slots"
+                      },
+                      "as": "s",
+                      "key": {
+                        "$": "s"
+                      },
+                      "do": [
+                        {
+                          "use": "Label",
+                          "props": {
+                            "Class": "flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground"
+                          },
+                          "children": [
+                            {
+                              "use": "Radio",
+                              "props": {
+                                "Name": {
+                                  "$": "name"
+                                },
+                                "Value": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0} {1}",
+                                    {
+                                      "$": "d.id"
+                                    },
+                                    {
+                                      "$": "s"
+                                    }
+                                  ]
+                                }
+                              }
+                            },
+                            {
+                              "use": "Inline",
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "s"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "each": {
+                        "$": "d.closed"
+                      },
+                      "as": "s",
+                      "key": {
+                        "$": "s"
+                      },
+                      "do": [
+                        {
+                          "use": "Label",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "flex items-center gap-2 rounded px-4 py-2 text-sm inset-ring inset-ring-border has-checked:bg-muted has-checked:inset-ring-foreground",
+                                "text-muted-foreground line-through"
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "use": "Radio",
+                              "props": {
+                                "Name": {
+                                  "$": "name"
+                                },
+                                "Value": {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0} {1}",
+                                    {
+                                      "$": "d.id"
+                                    },
+                                    {
+                                      "$": "s"
+                                    }
+                                  ]
+                                },
+                                "Disabled": true
+                              }
+                            },
+                            {
+                              "use": "Inline",
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "s"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/stat-figure.json b/xgen/specs/organisms/stat-figure.json
new file mode 100644
index 0000000..e431474
--- /dev/null
+++ b/xgen/specs/organisms/stat-figure.json
@@ -0,0 +1,222 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.stat-figure",
+  "name": "StatFigure",
+  "docs": "One key number of StatsBand: a card (StatTile), or the value over its label, optionally under a Lucide icon.",
+  "records": {},
+  "props": [
+    {
+      "name": "stat",
+      "type": {
+        "ts": "Stat"
+      },
+      "required": true
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"plain\" | \"card\" | \"icon\""
+      },
+      "default": "plain"
+    },
+    {
+      "name": "align",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "default": "center"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "item"
+          },
+          "card"
+        ]
+      },
+      "then": [
+        {
+          "organism": "StatTile",
+          "props": {
+            "label": {
+              "$": "stat.label"
+            },
+            "value": {
+              "$": "stat.value"
+            },
+            "icon": {
+              "$": "stat.icon"
+            },
+            "hint": {
+              "$": "stat.hint"
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "use": "Stack",
+          "props": {
+            "Gap": "6",
+            "Align": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "align"
+                    },
+                    "center"
+                  ]
+                },
+                "center",
+                "start"
+              ]
+            },
+            "Class": {
+              "op": "cn",
+              "args": [
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "align"
+                        },
+                        "center"
+                      ]
+                    },
+                    "text-center",
+                    ""
+                  ]
+                },
+                {
+                  "op": "preset",
+                  "args": [
+                    "defaults",
+                    "stats.column"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-testid": "item"
+          },
+          "children": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "item"
+                  },
+                  "icon"
+                ]
+              },
+              "then": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": {
+                      "$": "stat.icon"
+                    },
+                    "Size": 24
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "2",
+                "Align": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "align"
+                        },
+                        "center"
+                      ]
+                    },
+                    "center",
+                    "start"
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "5xl",
+                    "Weight": "medium",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "flex items-center",
+                        {
+                          "op": "preset",
+                          "args": [
+                            "defaults",
+                            "stats.figure"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "stat.value"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "sm",
+                    "Weight": "semibold",
+                    "Class": "leading-5 text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "stat.label"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "StatsBand",
+      "names": [
+        "Stat"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/stats-band.json b/xgen/specs/organisms/stats-band.json
new file mode 100644
index 0000000..c782f9a
--- /dev/null
+++ b/xgen/specs/organisms/stats-band.json
@@ -0,0 +1,511 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.stats-band",
+  "name": "StatsBand",
+  "docs": "Key numbers in a row or grid: plain figures, cards (StatTile) or figures with an icon. Axes: columns (2, 3, 4), item (plain, card, icon), surface (none, image, panel: one rounded card), align, density, tone. Title may be empty.",
+  "records": {
+    "Stat": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "hint",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "stats",
+      "type": {
+        "ts": "Stat[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no figures), from the dictionary"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"2\" | \"3\" | \"4\""
+      },
+      "default": "4"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"row\" | \"stack\""
+      },
+      "default": "row",
+      "docs": "stack: one narrow column of figures, for a sidebar"
+    },
+    {
+      "name": "surface",
+      "type": {
+        "ts": "\"none\" | \"image\" | \"panel\""
+      },
+      "default": "none",
+      "docs": "image: picture behind; panel: one rounded card"
+    },
+    {
+      "name": "item",
+      "type": {
+        "ts": "\"plain\" | \"card\" | \"icon\""
+      },
+      "default": "plain"
+    },
+    {
+      "name": "align",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "default": "center"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "align": {
+          "$": "align"
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "surface"
+                },
+                "panel"
+              ]
+            },
+            "fill",
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "layout"
+                    },
+                    "stack"
+                  ]
+                },
+                "xs",
+                "default"
+              ]
+            }
+          ]
+        },
+        "className": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "cn",
+              "args": [
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "surface"
+                        },
+                        "image"
+                      ]
+                    },
+                    "bg-transparent",
+                    ""
+                  ]
+                },
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "surface"
+                        },
+                        "panel"
+                      ]
+                    },
+                    "py-0",
+                    ""
+                  ]
+                }
+              ]
+            },
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "surface"
+                            },
+                            "image"
+                          ]
+                        },
+                        "image",
+                        "none"
+                      ]
+                    },
+                    "image"
+                  ]
+                },
+                "relative isolate overflow-hidden",
+                ""
+              ]
+            }
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "organism": "Backdrop",
+              "props": {
+                "kind": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "surface"
+                        },
+                        "image"
+                      ]
+                    },
+                    "image",
+                    "none"
+                  ]
+                },
+                "alt": {
+                  "$": "title"
+                }
+              }
+            },
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "stats"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "chart-column",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "surface"
+                      },
+                      "panel"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "cols"
+                                },
+                                "2"
+                              ]
+                            },
+                            "2",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "cols"
+                                    },
+                                    "3"
+                                  ]
+                                },
+                                "2-3",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "cols"
+                                        },
+                                        "4"
+                                      ]
+                                    },
+                                    "2-4",
+                                    "3-6"
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "w-full items-center bg-muted px-6",
+                            {
+                              "op": "preset",
+                              "args": [
+                                "defaults",
+                                "stats.panel"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "stats"
+                          },
+                          "as": "stat",
+                          "key": {
+                            "$": "stat.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "StatFigure",
+                              "props": {
+                                "stat": {
+                                  "$": "stat"
+                                },
+                                "item": {
+                                  "$": "item"
+                                },
+                                "align": {
+                                  "$": "align"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "stack"
+                              ]
+                            },
+                            "1",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "cols"
+                                    },
+                                    "2"
+                                  ]
+                                },
+                                "2",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "cols"
+                                        },
+                                        "3"
+                                      ]
+                                    },
+                                    "2-3",
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "cols"
+                                            },
+                                            "4"
+                                          ]
+                                        },
+                                        "2-4",
+                                        "3-6"
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        "Class": "gap-6"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "stats"
+                          },
+                          "as": "stat",
+                          "key": {
+                            "$": "stat.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "StatFigure",
+                              "props": {
+                                "stat": {
+                                  "$": "stat"
+                                },
+                                "item": {
+                                  "$": "item"
+                                },
+                                "align": {
+                                  "$": "align"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/stepper.json b/xgen/specs/organisms/stepper.json
new file mode 100644
index 0000000..a648f58
--- /dev/null
+++ b/xgen/specs/organisms/stepper.json
@@ -0,0 +1,535 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.stepper",
+  "name": "Stepper",
+  "docs": "A multi-step form header: the steps with the current one marked (aria-current step), and the current step's text with back and next buttons. Axes: layout (horizontal, vertical), marker (number, icon), summary (show, hide).",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "steps",
+      "type": {
+        "ts": "Step[]"
+      },
+      "required": true
+    },
+    {
+      "name": "current",
+      "type": "number",
+      "default": 2,
+      "docs": "the number of the current step, from 1"
+    },
+    {
+      "name": "stepLabel",
+      "type": "string",
+      "required": true,
+      "docs": "template of the progress line, e.g. `Step {0} of {1}`"
+    },
+    {
+      "name": "back",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "next",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"horizontal\" | \"vertical\""
+      },
+      "default": "horizontal"
+    },
+    {
+      "name": "marker",
+      "type": {
+        "ts": "\"number\" | \"icon\""
+      },
+      "default": "number"
+    },
+    {
+      "name": "summary",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "measure": "3xl",
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "gt",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "steps"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "6",
+                    "Align": "stretch"
+                  },
+                  "attrs": {
+                    "data-testid": "stepper"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "op": "tpl",
+                            "args": [
+                              {
+                                "$": "stepLabel"
+                              },
+                              {
+                                "$": "current"
+                              },
+                              {
+                                "op": "len",
+                                "args": [
+                                  {
+                                    "$": "steps"
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "List",
+                      "props": {
+                        "Tag": "ol",
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "m-0 flex list-none gap-4 p-0",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "vertical"
+                                  ]
+                                },
+                                "flex-col",
+                                "flex-col sm:flex-row"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "steps"
+                          },
+                          "as": "s",
+                          "key": {
+                            "$": "s.id"
+                          },
+                          "do": [
+                            {
+                              "use": "ListItem",
+                              "props": {
+                                "Class": "flex flex-1 items-center gap-4"
+                              },
+                              "attrs": {
+                                "data-testid": "item",
+                                "aria-current": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "op": "add",
+                                          "args": [
+                                            {
+                                              "$": "i"
+                                            },
+                                            1
+                                          ]
+                                        },
+                                        {
+                                          "$": "current"
+                                        }
+                                      ]
+                                    },
+                                    "step",
+                                    {
+                                      "op": "undef",
+                                      "args": []
+                                    }
+                                  ]
+                                }
+                              },
+                              "children": [
+                                {
+                                  "use": "IconBadge",
+                                  "props": {
+                                    "Variant": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "lt",
+                                          "args": [
+                                            {
+                                              "op": "add",
+                                              "args": [
+                                                {
+                                                  "$": "i"
+                                                },
+                                                1
+                                              ]
+                                            },
+                                            {
+                                              "op": "add",
+                                              "args": [
+                                                {
+                                                  "$": "current"
+                                                },
+                                                1
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        "primary",
+                                        "outline"
+                                      ]
+                                    },
+                                    "Size": "sm",
+                                    "Class": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "lt",
+                                          "args": [
+                                            {
+                                              "op": "add",
+                                              "args": [
+                                                {
+                                                  "$": "i"
+                                                },
+                                                1
+                                              ]
+                                            },
+                                            {
+                                              "op": "add",
+                                              "args": [
+                                                {
+                                                  "$": "current"
+                                                },
+                                                1
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        "text-sm",
+                                        "text-sm text-muted-foreground"
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "when": {
+                                        "op": "eq",
+                                        "args": [
+                                          {
+                                            "$": "marker"
+                                          },
+                                          "icon"
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": {
+                                              "$": "s.icon"
+                                            },
+                                            "Size": 16
+                                          }
+                                        }
+                                      ],
+                                      "else": [
+                                        {
+                                          "use": "Inline",
+                                          "props": {
+                                            "Class": "text-sm font-bold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "str",
+                                                "args": [
+                                                  {
+                                                    "op": "add",
+                                                    "args": [
+                                                      {
+                                                        "$": "i"
+                                                      },
+                                                      1
+                                                    ]
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "op": "add",
+                                              "args": [
+                                                {
+                                                  "$": "i"
+                                                },
+                                                1
+                                              ]
+                                            },
+                                            {
+                                              "$": "current"
+                                            }
+                                          ]
+                                        },
+                                        "bold",
+                                        "semibold"
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "s.title"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "summary"
+                          },
+                          "show"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "each": {
+                            "$": "steps"
+                          },
+                          "as": "s",
+                          "key": {
+                            "$": "s.id"
+                          },
+                          "do": [
+                            {
+                              "when": {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "op": "add",
+                                    "args": [
+                                      {
+                                        "$": "i"
+                                      },
+                                      1
+                                    ]
+                                  },
+                                  {
+                                    "$": "current"
+                                  }
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2",
+                                    "Class": "rounded bg-card p-6 inset-ring inset-ring-border"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "step-summary"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Title",
+                                      "props": {
+                                        "As": 3,
+                                        "Size": "xl",
+                                        "Weight": "bold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "s.title"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "s.text"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Group",
+                                      "props": {
+                                        "Gap": "2",
+                                        "Class": "pt-2"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Button",
+                                          "props": {
+                                            "Variant": "outline",
+                                            "Size": "sm",
+                                            "Type": "button"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "back"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Button",
+                                          "props": {
+                                            "Variant": "default",
+                                            "Size": "sm",
+                                            "Type": "button"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "next"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "StepsList",
+      "names": [
+        "Step"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/steps-list.json b/xgen/specs/organisms/steps-list.json
new file mode 100644
index 0000000..af7d259
--- /dev/null
+++ b/xgen/specs/organisms/steps-list.json
@@ -0,0 +1,380 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.steps-list",
+  "name": "StepsList",
+  "docs": "How it works: numbered or icon steps in a row or a column. Axes: layout (row, column), marker (number, icon), align, density, tone.",
+  "records": {
+    "Step": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "steps",
+      "type": {
+        "ts": "Step[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"row\" | \"column\""
+      },
+      "default": "row"
+    },
+    {
+      "name": "marker",
+      "type": {
+        "ts": "\"number\" | \"icon\""
+      },
+      "default": "number"
+    },
+    {
+      "name": "align",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "default": "start"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "align": {
+          "$": "align"
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "row"
+              ]
+            },
+            "default",
+            "2xl"
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "steps"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "list-ordered",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "List",
+                  "props": {
+                    "Tag": "ol",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "grid gap-6",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "row"
+                              ]
+                            },
+                            "sm:grid-cols-2 md:grid-cols-4",
+                            ""
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "steps"
+                      },
+                      "as": "step",
+                      "key": {
+                        "$": "step.id"
+                      },
+                      "do": [
+                        {
+                          "use": "ListItem",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "flex gap-4",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "layout"
+                                        },
+                                        "row"
+                                      ]
+                                    },
+                                    "flex-col",
+                                    ""
+                                  ]
+                                },
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "align"
+                                        },
+                                        "center"
+                                      ]
+                                    },
+                                    "items-center text-center",
+                                    ""
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "item"
+                          },
+                          "children": [
+                            {
+                              "use": "IconBadge",
+                              "props": {
+                                "Variant": "primary"
+                              },
+                              "attrs": {
+                                "data-slot": "marker"
+                              },
+                              "children": [
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "marker"
+                                      },
+                                      "icon"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": {
+                                          "$": "step.icon"
+                                        },
+                                        "Size": 20
+                                      }
+                                    }
+                                  ],
+                                  "else": [
+                                    {
+                                      "use": "Inline",
+                                      "props": {
+                                        "Class": "text-base font-bold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "str",
+                                            "args": [
+                                              {
+                                                "op": "add",
+                                                "args": [
+                                                  {
+                                                    "$": "i"
+                                                  },
+                                                  1
+                                                ]
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "2",
+                                "Align": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "align"
+                                        },
+                                        "center"
+                                      ]
+                                    },
+                                    "center",
+                                    "start"
+                                  ]
+                                }
+                              },
+                              "children": [
+                                {
+                                  "use": "Title",
+                                  "props": {
+                                    "As": 3,
+                                    "Size": "xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "step.title"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "step.text"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ],
+                      "index": "i"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/store-hero.json b/xgen/specs/organisms/store-hero.json
new file mode 100644
index 0000000..1f13a17
--- /dev/null
+++ b/xgen/specs/organisms/store-hero.json
@@ -0,0 +1,567 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.store-hero",
+  "name": "StoreHero",
+  "docs": "The hero of a store: a badge, the heading, a lead, one or two actions and three store promises. The overlay layout puts a picture beside the text with an offer card floating on it; the backdrop layout puts the text over a faint picture. Axes: layout (overlay, backdrop), mediaSide, tone.",
+  "records": {
+    "OfferCard": [
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    },
+    {
+      "name": "actions",
+      "type": {
+        "ts": "LinkActions"
+      },
+      "required": true
+    },
+    {
+      "name": "perks",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true,
+      "docs": "store promises under the actions (the first three are shown)"
+    },
+    {
+      "name": "card",
+      "type": {
+        "record": "OfferCard"
+      },
+      "required": true,
+      "docs": "the offer card on the picture (overlay layout)"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"overlay\" | \"backdrop\""
+      },
+      "default": "overlay"
+    },
+    {
+      "name": "mediaSide",
+      "type": {
+        "ts": "\"end\" | \"start\""
+      },
+      "default": "end"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "layout"
+          },
+          "backdrop"
+        ]
+      },
+      "then": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "title"
+            },
+            "lead": {
+              "$": "lead"
+            },
+            "heading": {
+              "badge": {
+                "$": "badge"
+              },
+              "level": {
+                "$": "level"
+              }
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "density": "roomy",
+            "measure": "3xl",
+            "className": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    "image",
+                    "image"
+                  ]
+                },
+                "relative isolate overflow-hidden",
+                ""
+              ]
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "Backdrop",
+                  "props": {
+                    "kind": "image",
+                    "alt": {
+                      "$": "title"
+                    }
+                  }
+                },
+                {
+                  "organism": "ActionGroup",
+                  "props": {
+                    "primary": {
+                      "$": "actions.cta"
+                    },
+                    "primaryHref": {
+                      "$": "actions.href"
+                    },
+                    "secondary": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "actions.mode"
+                            },
+                            "two"
+                          ]
+                        },
+                        {
+                          "$": "actions.secondary"
+                        },
+                        {
+                          "op": "undef",
+                          "args": []
+                        }
+                      ]
+                    },
+                    "secondaryHref": {
+                      "$": "actions.secondaryHref"
+                    }
+                  }
+                },
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "perks"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": "1-3",
+                        "Class": "gap-4"
+                      },
+                      "attrs": {
+                        "data-testid": "perks"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "perks"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "when": {
+                                "op": "lt",
+                                "args": [
+                                  {
+                                    "$": "i"
+                                  },
+                                  3
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "4",
+                                    "Align": "start"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "perk"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Box",
+                                      "props": {
+                                        "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": {
+                                              "$": "p.icon"
+                                            },
+                                            "Size": 20
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Stack",
+                                      "props": {
+                                        "Gap": "0"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Weight": "semibold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "p.title"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "xs",
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "p.text"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "title"
+            },
+            "lead": {
+              "$": "lead"
+            },
+            "heading": {
+              "badge": {
+                "$": "badge"
+              },
+              "level": {
+                "$": "level"
+              }
+            },
+            "layout": "split",
+            "media": {
+              "show": true,
+              "side": {
+                "$": "mediaSide"
+              }
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "ActionGroup",
+                  "props": {
+                    "primary": {
+                      "$": "actions.cta"
+                    },
+                    "primaryHref": {
+                      "$": "actions.href"
+                    },
+                    "secondary": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "actions.mode"
+                            },
+                            "two"
+                          ]
+                        },
+                        {
+                          "$": "actions.secondary"
+                        },
+                        {
+                          "op": "undef",
+                          "args": []
+                        }
+                      ]
+                    },
+                    "secondaryHref": {
+                      "$": "actions.secondaryHref"
+                    }
+                  }
+                },
+                {
+                  "when": {
+                    "op": "gt",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "perks"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": "1-3",
+                        "Class": "gap-4"
+                      },
+                      "attrs": {
+                        "data-testid": "perks"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "perks"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "when": {
+                                "op": "lt",
+                                "args": [
+                                  {
+                                    "$": "i"
+                                  },
+                                  3
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "4",
+                                    "Align": "start"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "perk"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Box",
+                                      "props": {
+                                        "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": {
+                                              "$": "p.icon"
+                                            },
+                                            "Size": 20
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Stack",
+                                      "props": {
+                                        "Gap": "0"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Weight": "semibold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "p.title"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "xs",
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "p.text"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            "aside": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "OfferMedia",
+                  "props": {
+                    "alt": {
+                      "$": "title"
+                    },
+                    "card": {
+                      "$": "card"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    },
+    {
+      "from": "ErrorPage",
+      "names": [
+        "LinkActions"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/store-locations.json b/xgen/specs/organisms/store-locations.json
new file mode 100644
index 0000000..04fddcd
--- /dev/null
+++ b/xgen/specs/organisms/store-locations.json
@@ -0,0 +1,523 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.store-locations",
+  "name": "StoreLocations",
+  "docs": "The stores of a shop: name, a badge of its kind (pickup or store only), address, hours, phone, a note and the services. Axes: layout (cards, list: one row per store, map: compact cards beside a map picture), tone.",
+  "records": {
+    "Store": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "kind",
+        "type": "string"
+      },
+      {
+        "name": "address",
+        "type": "string"
+      },
+      {
+        "name": "hours",
+        "type": "string"
+      },
+      {
+        "name": "phone",
+        "type": "string"
+      },
+      {
+        "name": "note",
+        "type": "string"
+      },
+      {
+        "name": "services",
+        "type": "string[]"
+      }
+    ],
+    "StoreLabels": [
+      {
+        "name": "map",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "stores",
+      "type": {
+        "ts": "Store[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "kinds",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "required": true,
+      "docs": "word by store kind (pickup, store only)"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "StoreLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"cards\" | \"list\" | \"map\""
+      },
+      "default": "cards"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "stores"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "store",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "grid grid-cols-1 gap-8",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "map"
+                              ]
+                            },
+                            "items-start md:grid-cols-2",
+                            ""
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "cards"
+                              ]
+                            },
+                            "grid grid-cols-1 gap-4 md:grid-cols-2",
+                            "flex flex-col gap-4"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "stores"
+                          },
+                          "as": "s",
+                          "key": {
+                            "$": "s.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "4",
+                                "Class": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "layout"
+                                        },
+                                        "list"
+                                      ]
+                                    },
+                                    "border-b border-border pb-4",
+                                    "rounded bg-card inset-ring inset-ring-border p-6"
+                                  ]
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Badge",
+                                      "props": {
+                                        "Variant": "outline",
+                                        "Size": "default",
+                                        "Class": "w-fit"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "op": "at",
+                                            "args": [
+                                              {
+                                                "$": "kinds"
+                                              },
+                                              {
+                                                "$": "s.kind"
+                                              }
+                                            ]
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Title",
+                                      "props": {
+                                        "As": 3,
+                                        "Size": "lg",
+                                        "Weight": "bold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "s.name"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "List",
+                                  "props": {
+                                    "Tag": "ul",
+                                    "Class": {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "layout"
+                                            },
+                                            "list"
+                                          ]
+                                        },
+                                        "flex flex-wrap gap-x-8 gap-y-2 text-sm",
+                                        "flex flex-col gap-2 text-sm"
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "ListItem",
+                                      "props": {
+                                        "Class": "flex items-center gap-2"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "map-pin",
+                                            "Size": 16
+                                          }
+                                        },
+                                        {
+                                          "use": "Inline",
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "s.address"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "ListItem",
+                                      "props": {
+                                        "Class": "flex items-center gap-2"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "clock",
+                                            "Size": 16
+                                          }
+                                        },
+                                        {
+                                          "use": "Inline",
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "s.hours"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "ListItem",
+                                      "props": {
+                                        "Class": "flex items-center gap-2"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "phone",
+                                            "Size": 16
+                                          }
+                                        },
+                                        {
+                                          "use": "Link",
+                                          "props": {
+                                            "Href": {
+                                              "op": "tpl",
+                                              "args": [
+                                                "tel:{0}",
+                                                {
+                                                  "$": "s.phone"
+                                                }
+                                              ]
+                                            },
+                                            "Variant": "default"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "nbsp",
+                                                "args": [
+                                                  {
+                                                    "$": "s.phone"
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "layout"
+                                      },
+                                      "cards"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "s.note"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Group",
+                                      "props": {
+                                        "Gap": "2",
+                                        "Class": "flex-wrap"
+                                      },
+                                      "children": [
+                                        {
+                                          "each": {
+                                            "$": "s.services"
+                                          },
+                                          "as": "v",
+                                          "key": {
+                                            "$": "v"
+                                          },
+                                          "do": [
+                                            {
+                                              "use": "Badge",
+                                              "props": {
+                                                "Variant": "secondary",
+                                                "Size": "default"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "v"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "map"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": "md:sticky md:top-8"
+                          },
+                          "children": [
+                            {
+                              "organism": "MediaFrame",
+                              "props": {
+                                "alt": {
+                                  "$": "labels.map"
+                                },
+                                "ratio": "1/1"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/story-dots.json b/xgen/specs/organisms/story-dots.json
new file mode 100644
index 0000000..4411211
--- /dev/null
+++ b/xgen/specs/organisms/story-dots.json
@@ -0,0 +1,96 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.story-dots",
+  "name": "StoryDots",
+  "docs": "One dot per step of StoryTabs; the dot of the active step is filled.",
+  "records": {},
+  "props": [
+    {
+      "name": "steps",
+      "type": {
+        "ts": "Milestone[]"
+      },
+      "required": true
+    },
+    {
+      "name": "active",
+      "type": "string",
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Group",
+      "props": {
+        "Gap": "2",
+        "Align": "center"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "steps"
+          },
+          "as": "s",
+          "key": {
+            "$": "s.id"
+          },
+          "do": [
+            {
+              "use": "Inline",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "size-2 rounded-full",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "s.id"
+                            },
+                            {
+                              "$": "active"
+                            }
+                          ]
+                        },
+                        "bg-primary",
+                        "bg-border"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "story-dot"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MilestoneTimeline",
+      "names": [
+        "Milestone"
+      ]
+    },
+    {
+      "from": "StoryTabs",
+      "names": [
+        "StoryLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/story-panel.json b/xgen/specs/organisms/story-panel.json
new file mode 100644
index 0000000..355cee7
--- /dev/null
+++ b/xgen/specs/organisms/story-panel.json
@@ -0,0 +1,185 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.story-panel",
+  "name": "StoryPanel",
+  "docs": "The panel of the active step of StoryTabs: the year badge and the step count, the title, the text and the tag in a muted box.",
+  "records": {},
+  "props": [
+    {
+      "name": "s",
+      "type": {
+        "ts": "Milestone"
+      },
+      "required": true
+    },
+    {
+      "name": "index",
+      "type": "number",
+      "required": true,
+      "docs": "position of the step, from 0"
+    },
+    {
+      "name": "total",
+      "type": "number",
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "StoryLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "4",
+        "Align": "stretch",
+        "Class": "rounded bg-card inset-ring inset-ring-border p-6"
+      },
+      "attrs": {
+        "data-testid": "story-panel"
+      },
+      "children": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "2",
+            "Align": "center"
+          },
+          "children": [
+            {
+              "use": "Badge",
+              "props": {
+                "Variant": "secondary",
+                "Size": "sm"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "s.date"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Text",
+              "props": {
+                "Size": "xs",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "op": "tpl",
+                    "args": [
+                      {
+                        "$": "labels.step"
+                      },
+                      {
+                        "op": "str",
+                        "args": [
+                          {
+                            "op": "add",
+                            "args": [
+                              {
+                                "$": "index"
+                              },
+                              1
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "op": "str",
+                        "args": [
+                          {
+                            "$": "total"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Title",
+          "props": {
+            "As": 3,
+            "Size": "xl",
+            "Weight": "semibold"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "s.title"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Size": "sm",
+            "Class": "text-muted-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "s.text"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Box",
+          "props": {
+            "Class": "rounded bg-muted p-4"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "sm",
+                "Weight": "semibold"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "s.tag"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MilestoneTimeline",
+      "names": [
+        "Milestone"
+      ]
+    },
+    {
+      "from": "StoryTabs",
+      "names": [
+        "StoryLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/story-tabs.json b/xgen/specs/organisms/story-tabs.json
new file mode 100644
index 0000000..e738674
--- /dev/null
+++ b/xgen/specs/organisms/story-tabs.json
@@ -0,0 +1,510 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.story-tabs",
+  "name": "StoryTabs",
+  "docs": "A story in steps (years or slides). Axes: layout (years: a row of year tabs over the panel of the active year with its badge, step, title, text and tag; carousel: the heading beside a picture with previous and next arrows and one dot per step), tone. Choosing a step emits `select`.",
+  "records": {
+    "StoryLabels": [
+      {
+        "name": "step",
+        "type": "string"
+      },
+      {
+        "name": "previous",
+        "type": "string"
+      },
+      {
+        "name": "next",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "badge",
+      "type": "string",
+      "default": "",
+      "docs": "a short pill above the heading"
+    },
+    {
+      "name": "steps",
+      "type": {
+        "ts": "Milestone[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "active",
+      "type": "string",
+      "required": true,
+      "docs": "the id of the step shown"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "StoryLabels"
+      },
+      "required": true,
+      "docs": "template step `Step {0} of {1}`; the accessible names of the arrows"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"years\" | \"carousel\""
+      },
+      "default": "years"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "select",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "a year tab, an arrow or a dot was chosen"
+    }
+  ],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "op": "len",
+            "args": [
+              {
+                "$": "steps"
+              }
+            ]
+          },
+          0
+        ]
+      },
+      "then": [
+        {
+          "organism": "SectionFrame",
+          "props": {
+            "id": {
+              "$": "id"
+            },
+            "title": {
+              "$": "title"
+            },
+            "lead": {
+              "$": "lead"
+            },
+            "heading": {
+              "badge": {
+                "$": "badge"
+              }
+            },
+            "tone": {
+              "$": "tone"
+            },
+            "landmarkLabel": {
+              "$": "landmarkLabel"
+            }
+          },
+          "slots": {
+            "children": {
+              "args": [],
+              "do": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "milestone",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ],
+      "else": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "years"
+            ]
+          },
+          "then": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "grid grid-cols-2 gap-2 sm:grid-cols-4"
+                      },
+                      "attrs": {
+                        "data-testid": "story-tabs"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "steps"
+                          },
+                          "as": "s",
+                          "key": {
+                            "$": "s.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "s.id"
+                                        },
+                                        {
+                                          "$": "active"
+                                        }
+                                      ]
+                                    },
+                                    "default",
+                                    "outline"
+                                  ]
+                                },
+                                "Size": "lg",
+                                "Type": "button",
+                                "Class": "h-auto flex-col items-start gap-0 py-2 text-start"
+                              },
+                              "attrs": {
+                                "data-testid": "story-tab",
+                                "data-active": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "s.id"
+                                        },
+                                        {
+                                          "$": "active"
+                                        }
+                                      ]
+                                    },
+                                    "true",
+                                    "false"
+                                  ]
+                                }
+                              },
+                              "on": {
+                                "click": {
+                                  "call": "emit.select",
+                                  "args": [
+                                    {
+                                      "$": "s.id"
+                                    }
+                                  ]
+                                }
+                              },
+                              "children": [
+                                {
+                                  "use": "Inline",
+                                  "props": {
+                                    "Class": "text-sm font-semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "s.date"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Inline",
+                                  "props": {
+                                    "Class": "text-xs"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "s.tag"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "each": {
+                        "$": "steps"
+                      },
+                      "as": "s",
+                      "key": {
+                        "$": "s.id"
+                      },
+                      "do": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "s.id"
+                              },
+                              {
+                                "$": "active"
+                              }
+                            ]
+                          },
+                          "then": [
+                            {
+                              "organism": "StoryPanel",
+                              "props": {
+                                "s": {
+                                  "$": "s"
+                                },
+                                "index": {
+                                  "$": "i"
+                                },
+                                "total": {
+                                  "op": "len",
+                                  "args": [
+                                    {
+                                      "$": "steps"
+                                    }
+                                  ]
+                                },
+                                "labels": {
+                                  "$": "labels"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ],
+                      "index": "i"
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "else": [
+            {
+              "organism": "SectionFrame",
+              "props": {
+                "id": {
+                  "$": "id"
+                },
+                "title": {
+                  "$": "title"
+                },
+                "lead": {
+                  "$": "lead"
+                },
+                "heading": {
+                  "badge": {
+                    "$": "badge"
+                  }
+                },
+                "tone": {
+                  "$": "tone"
+                },
+                "layout": "split",
+                "media": {
+                  "show": true
+                },
+                "landmarkLabel": {
+                  "$": "landmarkLabel"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": []
+                },
+                "aside": {
+                  "args": [],
+                  "do": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "4",
+                        "Align": "stretch"
+                      },
+                      "children": [
+                        {
+                          "organism": "MediaFrame",
+                          "props": {
+                            "alt": {
+                              "$": "title"
+                            },
+                            "ratio": "4/3"
+                          }
+                        },
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "center",
+                            "Justify": "between"
+                          },
+                          "children": [
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "outline",
+                                "Size": "sm",
+                                "Layout": "icon",
+                                "Type": "button",
+                                "AriaLabel": {
+                                  "$": "labels.previous"
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "story-arrow"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "chevron-left",
+                                    "Size": 16
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "organism": "StoryDots",
+                              "props": {
+                                "steps": {
+                                  "$": "steps"
+                                },
+                                "active": {
+                                  "$": "active"
+                                }
+                              }
+                            },
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "outline",
+                                "Size": "sm",
+                                "Layout": "icon",
+                                "Type": "button",
+                                "AriaLabel": {
+                                  "$": "labels.next"
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "story-arrow"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": "chevron-right",
+                                    "Size": 16
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "MilestoneTimeline",
+      "names": [
+        "Milestone"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/support-channels.json b/xgen/specs/organisms/support-channels.json
new file mode 100644
index 0000000..dddf098
--- /dev/null
+++ b/xgen/specs/organisms/support-channels.json
@@ -0,0 +1,325 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.support-channels",
+  "name": "SupportChannels",
+  "docs": "Ways to get help as cards or rows, each with an icon, a title, a sentence and an open link. Axes: layout (grid, list), columns, action (link, none), tone (default, muted).",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "channels",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "open",
+      "type": "string",
+      "required": true,
+      "docs": "text of the link of each channel"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"list\""
+      },
+      "default": "grid"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-2\" | \"1-3\""
+      },
+      "default": "1-3"
+    },
+    {
+      "name": "action",
+      "type": {
+        "ts": "\"link\" | \"none\""
+      },
+      "default": "link"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "channels"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "life-buoy",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "list"
+                          ]
+                        },
+                        "1",
+                        {
+                          "$": "cols"
+                        }
+                      ]
+                    },
+                    "Class": "gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "channels"
+                      },
+                      "as": "c",
+                      "key": {
+                        "$": "c.id"
+                      },
+                      "do": [
+                        {
+                          "use": "Card",
+                          "props": {
+                            "Variant": "default",
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "h-full",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "layout"
+                                        },
+                                        "list"
+                                      ]
+                                    },
+                                    "flex-row items-center",
+                                    ""
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "attrs": {
+                            "data-testid": "item"
+                          },
+                          "children": [
+                            {
+                              "use": "CardContent",
+                              "props": {
+                                "Class": {
+                                  "op": "cn",
+                                  "args": [
+                                    "flex flex-1 gap-4",
+                                    {
+                                      "op": "cond",
+                                      "args": [
+                                        {
+                                          "op": "eq",
+                                          "args": [
+                                            {
+                                              "$": "layout"
+                                            },
+                                            "list"
+                                          ]
+                                        },
+                                        "items-center",
+                                        "flex-col"
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": {
+                                      "$": "c.icon"
+                                    },
+                                    "Size": 24
+                                  }
+                                },
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2",
+                                    "Class": "flex-1"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Title",
+                                      "props": {
+                                        "As": 3,
+                                        "Size": "base",
+                                        "Weight": "bold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "c.title"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "c.text"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "action"
+                                      },
+                                      "link"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "organism": "MenuEntry",
+                                      "props": {
+                                        "href": {
+                                          "$": "c.href"
+                                        },
+                                        "className": "font-semibold",
+                                        "testid": "open"
+                                      },
+                                      "slots": {
+                                        "children": {
+                                          "args": [],
+                                          "do": [
+                                            {
+                                              "text": {
+                                                "$": "open"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/team-grid.json b/xgen/specs/organisms/team-grid.json
new file mode 100644
index 0000000..d042d04
--- /dev/null
+++ b/xgen/specs/organisms/team-grid.json
@@ -0,0 +1,482 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.team-grid",
+  "name": "TeamGrid",
+  "docs": "The people of a team: portrait cards, a minimal grid of small portraits, detailed cards with skills, rows beside a picture, or a directory of two columns. Axes: layout (cards, minimal, detailed, list, directory), cols, tone, density.",
+  "records": {
+    "Member": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "role",
+        "type": "string"
+      },
+      {
+        "name": "dept",
+        "type": "string"
+      },
+      {
+        "name": "location",
+        "type": "string"
+      },
+      {
+        "name": "bio",
+        "type": "string"
+      },
+      {
+        "name": "skills",
+        "type": "string[]"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "members",
+      "type": {
+        "ts": "Member[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "depts",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "required": true,
+      "docs": "the name of each department"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"cards\" | \"minimal\" | \"detailed\" | \"list\" | \"directory\""
+      },
+      "default": "cards"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-3\" | \"1-4\""
+      },
+      "default": "1-4"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "layout": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "list"
+              ]
+            },
+            "split",
+            "stack"
+          ]
+        },
+        "media": {
+          "show": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "layout"
+              },
+              "list"
+            ]
+          },
+          "side": "start",
+          "align": "start"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "members"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "users",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "minimal"
+                          ]
+                        },
+                        "grid grid-cols-2 gap-8 md:grid-cols-4",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "directory"
+                              ]
+                            },
+                            "grid grid-cols-1 gap-4 md:grid-cols-2",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "list"
+                                  ]
+                                },
+                                "flex flex-col gap-4",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "cols"
+                                        },
+                                        "1-3"
+                                      ]
+                                    },
+                                    "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+                                    "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4"
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "members"
+                      },
+                      "as": "m",
+                      "key": {
+                        "$": "m.id"
+                      },
+                      "do": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "layout"
+                              },
+                              "minimal"
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "2",
+                                "Align": "center",
+                                "Class": "text-center"
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "organism": "MediaFrame",
+                                  "props": {
+                                    "alt": {
+                                      "$": "m.name"
+                                    },
+                                    "ratio": "1/1",
+                                    "className": {
+                                      "op": "cn",
+                                      "args": [
+                                        "size-16",
+                                        "shrink-0"
+                                      ]
+                                    }
+                                  }
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "m.name"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "xs",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "m.role"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ],
+                          "else": [
+                            {
+                              "when": {
+                                "op": "eq",
+                                "args": [
+                                  {
+                                    "$": "layout"
+                                  },
+                                  "cards"
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "4",
+                                    "Class": "rounded bg-card inset-ring inset-ring-border p-4"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "item"
+                                  },
+                                  "children": [
+                                    {
+                                      "organism": "MediaFrame",
+                                      "props": {
+                                        "alt": {
+                                          "$": "m.name"
+                                        },
+                                        "ratio": "1/1"
+                                      }
+                                    },
+                                    {
+                                      "use": "Stack",
+                                      "props": {
+                                        "Gap": "2"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Stack",
+                                          "props": {
+                                            "Gap": "0"
+                                          },
+                                          "children": [
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "base",
+                                                "Weight": "semibold"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "m.name"
+                                                  }
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "sm",
+                                                "Class": "text-muted-foreground"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "m.role"
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "m.bio"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ],
+                              "else": [
+                                {
+                                  "organism": "MemberRow",
+                                  "props": {
+                                    "member": {
+                                      "$": "m"
+                                    },
+                                    "depts": {
+                                      "$": "depts"
+                                    },
+                                    "layout": {
+                                      "$": "layout"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        "aside": {
+          "args": [],
+          "do": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "title"
+                },
+                "ratio": "3/4"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/template-grid.json b/xgen/specs/organisms/template-grid.json
new file mode 100644
index 0000000..7fd5fd6
--- /dev/null
+++ b/xgen/specs/organisms/template-grid.json
@@ -0,0 +1,607 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.template-grid",
+  "name": "TemplateGrid",
+  "docs": "Template gallery: a heading, outline filter pills, a grid of template cards and a full-width browse-all button.",
+  "records": {
+    "Template": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "views",
+        "type": "string"
+      },
+      {
+        "name": "likes",
+        "type": "string"
+      },
+      {
+        "name": "topic",
+        "type": "string"
+      }
+    ],
+    "Filter": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string",
+        "optional": true
+      }
+    ],
+    "TemplateLabels": [
+      {
+        "name": "filters",
+        "type": "string"
+      },
+      {
+        "name": "browse",
+        "type": "string"
+      },
+      {
+        "name": "views",
+        "type": "string"
+      },
+      {
+        "name": "likes",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "templates",
+      "type": {
+        "ts": "Template[]"
+      },
+      "required": true
+    },
+    {
+      "name": "filters",
+      "type": {
+        "ts": "Filter[]"
+      },
+      "required": true
+    },
+    {
+      "name": "browseHref",
+      "type": "string",
+      "docs": "the address of the full list; none: a button"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "TemplateLabels"
+      },
+      "required": true,
+      "docs": "the name of the filter row, the browse-all text, the hidden names of the counts"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-3\" | \"1-4\""
+      },
+      "default": "1-4"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "compact"
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "measure": "fill",
+        "className": "py-0",
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "8",
+                "Align": "stretch"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Justify": "between",
+                    "Class": "h-8 w-full flex-wrap"
+                  },
+                  "children": [
+                    {
+                      "use": "Title",
+                      "props": {
+                        "As": 2,
+                        "Size": "2xl",
+                        "Weight": "semibold",
+                        "Class": "leading-9"
+                      },
+                      "attrs": {
+                        "id": {
+                          "op": "add",
+                          "args": [
+                            {
+                              "$": "id"
+                            },
+                            "-title"
+                          ]
+                        }
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "title"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "op": "gt",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "filters"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Group",
+                          "props": {
+                            "Gap": "4",
+                            "Align": "center",
+                            "Class": "flex-wrap"
+                          },
+                          "attrs": {
+                            "role": "group",
+                            "aria-label": {
+                              "$": "labels.filters"
+                            },
+                            "data-testid": "template-filters"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "filters"
+                              },
+                              "as": "f",
+                              "key": {
+                                "$": "f.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "Button",
+                                  "props": {
+                                    "Variant": "outline",
+                                    "Size": "sm",
+                                    "Type": "button",
+                                    "Class": "gap-2"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "template-filter"
+                                  },
+                                  "children": [
+                                    {
+                                      "when": {
+                                        "$": "f.icon"
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": {
+                                              "$": "f.icon"
+                                            },
+                                            "Size": 16
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "text": {
+                                        "$": "f.title"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "op": "len",
+                        "args": [
+                          {
+                            "$": "templates"
+                          }
+                        ]
+                      },
+                      0
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "EmptyState",
+                      "props": {
+                        "icon": "layout-template",
+                        "title": {
+                          "$": "empty"
+                        }
+                      }
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "$": "cols"
+                        },
+                        "Class": "w-full gap-6"
+                      },
+                      "attrs": {
+                        "data-testid": "template-grid"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "templates"
+                          },
+                          "as": "t",
+                          "key": {
+                            "$": "t.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Box",
+                              "props": {
+                                "Class": {
+                                  "op": "cn",
+                                  "args": [
+                                    "flex flex-col gap-2 overflow-hidden rounded p-4 inset-ring inset-ring-border",
+                                    {
+                                      "op": "preset",
+                                      "args": [
+                                        "defaults",
+                                        "templates.card"
+                                      ]
+                                    }
+                                  ]
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "template-card"
+                              },
+                              "children": [
+                                {
+                                  "use": "Box",
+                                  "props": {
+                                    "Class": {
+                                      "op": "cn",
+                                      "args": [
+                                        "shrink-0 overflow-hidden",
+                                        {
+                                          "op": "preset",
+                                          "args": [
+                                            "defaults",
+                                            "templates.image"
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "children": [
+                                    {
+                                      "organism": "MediaFrame",
+                                      "props": {
+                                        "alt": {
+                                          "$": "t.title"
+                                        },
+                                        "className": {
+                                          "op": "cn",
+                                          "args": [
+                                            "size-full",
+                                            {
+                                              "op": "preset",
+                                              "args": [
+                                                "defaults",
+                                                "media.rounded"
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Group",
+                                  "props": {
+                                    "Gap": "4",
+                                    "Align": "center",
+                                    "Class": {
+                                      "op": "cn",
+                                      "args": [
+                                        "w-full",
+                                        {
+                                          "op": "preset",
+                                          "args": [
+                                            "defaults",
+                                            "templates.footer"
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  },
+                                  "attrs": {
+                                    "data-testid": "template-footer"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "IconBadge",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "overflow-hidden"
+                                      },
+                                      "attrs": {
+                                        "data-testid": "template-avatar"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "layout-template",
+                                            "Size": 16
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Stack",
+                                      "props": {
+                                        "Gap": "0",
+                                        "Class": "min-w-0 flex-1"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Title",
+                                          "props": {
+                                            "As": 3,
+                                            "Size": "base",
+                                            "Weight": "semibold",
+                                            "Class": "truncate leading-6"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "t.title"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Group",
+                                          "props": {
+                                            "Gap": "4",
+                                            "Align": "center",
+                                            "Class": "h-4 text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "use": "Group",
+                                              "props": {
+                                                "Gap": "2",
+                                                "Align": "center"
+                                              },
+                                              "children": [
+                                                {
+                                                  "use": "LucideIcon",
+                                                  "props": {
+                                                    "Name": "eye",
+                                                    "Size": 16
+                                                  }
+                                                },
+                                                {
+                                                  "use": "Inline",
+                                                  "props": {
+                                                    "Class": "sr-only"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "$": "labels.views"
+                                                      }
+                                                    }
+                                                  ]
+                                                },
+                                                {
+                                                  "use": "Text",
+                                                  "props": {
+                                                    "Size": "xs",
+                                                    "Weight": "bold",
+                                                    "Class": "leading-4"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "$": "t.views"
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "use": "Group",
+                                              "props": {
+                                                "Gap": "2",
+                                                "Align": "center"
+                                              },
+                                              "children": [
+                                                {
+                                                  "use": "LucideIcon",
+                                                  "props": {
+                                                    "Name": "heart",
+                                                    "Size": 16
+                                                  }
+                                                },
+                                                {
+                                                  "use": "Inline",
+                                                  "props": {
+                                                    "Class": "sr-only"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "$": "labels.likes"
+                                                      }
+                                                    }
+                                                  ]
+                                                },
+                                                {
+                                                  "use": "Text",
+                                                  "props": {
+                                                    "Size": "xs",
+                                                    "Weight": "bold",
+                                                    "Class": "leading-4"
+                                                  },
+                                                  "children": [
+                                                    {
+                                                      "text": {
+                                                        "$": "t.likes"
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "sm",
+                    "Href": {
+                      "$": "browseHref"
+                    },
+                    "Class": "w-full"
+                  },
+                  "attrs": {
+                    "data-testid": "template-browse"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "labels.browse"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/testimonial-grid.json b/xgen/specs/organisms/testimonial-grid.json
new file mode 100644
index 0000000..b57bb38
--- /dev/null
+++ b/xgen/specs/organisms/testimonial-grid.json
@@ -0,0 +1,436 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.testimonial-grid",
+  "name": "TestimonialGrid",
+  "docs": "Customer quotes as cards, plain figures or social posts, in a grid, a masonry, a scroll strip, one featured quote or one narrow column. Axes: layout (grid, single, stack, masonry, strip), columns, item kind (card, plain, social), item avatar, item rating, item mark (a company glyph), density, tone. A carousel is the Carousel port contract around the single layout.",
+  "records": {
+    "Quote": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "author",
+        "type": "string"
+      },
+      {
+        "name": "role",
+        "type": "string"
+      },
+      {
+        "name": "company",
+        "type": "string"
+      },
+      {
+        "name": "quote",
+        "type": "string"
+      },
+      {
+        "name": "rating",
+        "type": "number"
+      },
+      {
+        "name": "handle",
+        "type": "string"
+      },
+      {
+        "name": "time",
+        "type": "string"
+      },
+      {
+        "name": "mark",
+        "type": "string"
+      }
+    ],
+    "QuoteLabels": [
+      {
+        "name": "rating",
+        "type": "string",
+        "optional": false,
+        "docs": "template of the rating's accessible name, e.g. `{0} out of 5`"
+      },
+      {
+        "name": "byLine",
+        "type": "string",
+        "optional": false,
+        "docs": "template of the line under the author, e.g. `{0}, {1}` (role, company)"
+      },
+      {
+        "name": "handleLine",
+        "type": "string",
+        "optional": false,
+        "docs": "template of the line under a social author, e.g. `{0} / {1}` (handle, time)"
+      }
+    ],
+    "QuoteItem": [
+      {
+        "name": "kind",
+        "type": "\"card\" | \"plain\" | \"social\"",
+        "optional": true,
+        "docs": "card: boxed; plain: a bare figure; social: a post of a social wall",
+        "default": "card"
+      },
+      {
+        "name": "avatar",
+        "type": "\"none\" | \"image\"",
+        "optional": true,
+        "docs": "a round picture of the author",
+        "default": "image"
+      },
+      {
+        "name": "rating",
+        "type": "\"show\" | \"hide\"",
+        "optional": true,
+        "docs": "the stars (not on social posts)",
+        "default": "show"
+      },
+      {
+        "name": "mark",
+        "type": "\"none\" | \"icon\"",
+        "optional": true,
+        "docs": "a company glyph above the quote",
+        "default": "none"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "quotes",
+      "type": {
+        "ts": "Quote[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "QuoteLabels"
+      },
+      "required": true,
+      "docs": "the templates of the lines around a quote"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"grid\" | \"single\" | \"stack\" | \"masonry\" | \"strip\""
+      },
+      "default": "grid",
+      "docs": "single: the first quote only, wide; stack: one narrow column; masonry: columns of cards of any height; strip: one row that scrolls sideways"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-2\" | \"1-3\""
+      },
+      "default": "1-3"
+    },
+    {
+      "name": "item",
+      "type": {
+        "record": "QuoteItem"
+      },
+      "docs": "how one quote is drawn"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "align": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "single"
+              ]
+            },
+            "center",
+            "start"
+          ]
+        },
+        "measure": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "layout"
+                },
+                "grid"
+              ]
+            },
+            "default",
+            "2xl"
+          ]
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "quotes"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "message-square-quote",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "or",
+                    "args": [
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "masonry"
+                        ]
+                      },
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "strip"
+                        ]
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Block",
+                      "props": {
+                        "Tag": "div",
+                        "Class": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "masonry"
+                              ]
+                            },
+                            "columns-1 gap-4 md:columns-2 xl:columns-3",
+                            "flex snap-x gap-4 overflow-x-auto pb-2"
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "quotes"
+                          },
+                          "as": "q",
+                          "key": {
+                            "$": "q.id"
+                          },
+                          "do": [
+                            {
+                              "organism": "QuoteCard",
+                              "props": {
+                                "q": {
+                                  "$": "q"
+                                },
+                                "labels": {
+                                  "$": "labels"
+                                },
+                                "item": {
+                                  "$": "item"
+                                },
+                                "layout": {
+                                  "$": "layout"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "layout"
+                                },
+                                "grid"
+                              ]
+                            },
+                            {
+                              "$": "cols"
+                            },
+                            "1"
+                          ]
+                        },
+                        "Class": "gap-4"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "quotes"
+                          },
+                          "as": "q",
+                          "key": {
+                            "$": "q.id"
+                          },
+                          "do": [
+                            {
+                              "when": {
+                                "op": "or",
+                                "args": [
+                                  {
+                                    "op": "ne",
+                                    "args": [
+                                      {
+                                        "$": "layout"
+                                      },
+                                      "single"
+                                    ]
+                                  },
+                                  {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "i"
+                                      },
+                                      0
+                                    ]
+                                  }
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "organism": "QuoteCard",
+                                  "props": {
+                                    "q": {
+                                      "$": "q"
+                                    },
+                                    "labels": {
+                                      "$": "labels"
+                                    },
+                                    "item": {
+                                      "$": "item"
+                                    },
+                                    "layout": {
+                                      "$": "layout"
+                                    }
+                                  }
+                                }
+                              ]
+                            }
+                          ],
+                          "index": "i"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/topic-chips.json b/xgen/specs/organisms/topic-chips.json
new file mode 100644
index 0000000..1948e5f
--- /dev/null
+++ b/xgen/specs/organisms/topic-chips.json
@@ -0,0 +1,149 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.topic-chips",
+  "name": "TopicChips",
+  "docs": "A centered row of topic pills: links where a topic has an address, else buttons. tone inverse: on a dark band with an icon per topic; default: outlined.",
+  "records": {
+    "Topic": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "icon",
+        "type": "string"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "topics",
+      "type": {
+        "ts": "Topic[]"
+      },
+      "required": true
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"inverse\""
+      },
+      "default": "default"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Group",
+      "props": {
+        "Gap": "2",
+        "Align": "center",
+        "Justify": "center",
+        "Class": "flex-wrap"
+      },
+      "attrs": {
+        "data-testid": "hero-topics"
+      },
+      "children": [
+        {
+          "each": {
+            "$": "topics"
+          },
+          "as": "topic",
+          "key": {
+            "$": "topic.id"
+          },
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "tone"
+                  },
+                  "inverse"
+                ]
+              },
+              "then": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Href": {
+                      "$": "topic.href"
+                    },
+                    "Variant": "ghost",
+                    "Size": "sm",
+                    "Class": "gap-2 text-background inset-ring-background/30 hover:bg-background/10"
+                  },
+                  "attrs": {
+                    "data-testid": "hero-topic"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "$": "topic.icon"
+                      },
+                      "then": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "topic.icon"
+                            },
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "text": {
+                        "$": "topic.name"
+                      }
+                    }
+                  ]
+                }
+              ],
+              "else": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Href": {
+                      "$": "topic.href"
+                    },
+                    "Variant": "outline",
+                    "Size": "sm"
+                  },
+                  "attrs": {
+                    "data-testid": "hero-topic"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "topic.name"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/tour-callout.json b/xgen/specs/organisms/tour-callout.json
new file mode 100644
index 0000000..cc6a444
--- /dev/null
+++ b/xgen/specs/organisms/tour-callout.json
@@ -0,0 +1,284 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.tour-callout",
+  "name": "TourCallout",
+  "docs": "One stop of a product tour: the element being explained and a callout beside it with a title, a sentence, the position in the tour and the buttons. Axes: placement (below, above, end: the callout sits beside the target), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "target",
+      "type": "string",
+      "required": true,
+      "docs": "the name of the explained element, drawn as a button"
+    },
+    {
+      "name": "position",
+      "type": "string",
+      "required": true,
+      "docs": "e.g. `Step 2 of 4`"
+    },
+    {
+      "name": "skip",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "next",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "placement",
+      "type": {
+        "ts": "\"below\" | \"above\" | \"end\""
+      },
+      "default": "below"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Block",
+              "props": {
+                "Tag": "div",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "flex gap-4",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "placement"
+                            },
+                            "end"
+                          ]
+                        },
+                        "flex-col items-start md:flex-row md:items-center",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "placement"
+                                },
+                                "above"
+                              ]
+                            },
+                            "flex-col-reverse items-start",
+                            "flex-col items-start"
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "tour",
+                "data-placement": {
+                  "$": "placement"
+                }
+              },
+              "children": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "default",
+                    "Type": "button",
+                    "Class": "inset-ring-foreground"
+                  },
+                  "attrs": {
+                    "data-testid": "tour-target"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "target"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "use": "Stack",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "stretch",
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "w-full max-w-sm",
+                        "rounded bg-card inset-ring inset-ring-border",
+                        "p-4",
+                        "shadow-md"
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "role": "group",
+                    "aria-label": {
+                      "$": "title"
+                    },
+                    "data-testid": "tour-callout"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xs",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "position"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "base",
+                        "Weight": "semibold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "title"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "text"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Gap": "2",
+                        "Justify": "end"
+                      },
+                      "children": [
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "ghost",
+                            "Size": "sm",
+                            "Type": "button"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "skip"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Button",
+                          "props": {
+                            "Variant": "default",
+                            "Size": "sm",
+                            "Type": "button"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "next"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/usage-calculator.json b/xgen/specs/organisms/usage-calculator.json
new file mode 100644
index 0000000..36f03ca
--- /dev/null
+++ b/xgen/specs/organisms/usage-calculator.json
@@ -0,0 +1,435 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.usage-calculator",
+  "name": "UsageCalculator",
+  "docs": "A price that follows a slider: the chosen amount of use, the price per unit and the estimate. The page keeps the amount and updates it on the `usage` event. Axes: layout (card, plain), ends (show: the smallest and the largest amount under the slider, hide), tone.",
+  "records": {
+    "UsageSlider": [
+      {
+        "name": "min",
+        "type": "number",
+        "optional": false
+      },
+      {
+        "name": "max",
+        "type": "number",
+        "optional": false
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "docs": "accessible name of the slider"
+      },
+      {
+        "name": "unit",
+        "type": "string",
+        "optional": false,
+        "docs": "template of an amount, e.g. `{0} credits`"
+      }
+    ],
+    "UsagePrice": [
+      {
+        "name": "rate",
+        "type": "number",
+        "optional": false,
+        "docs": "price of one unit in minor units (cents)"
+      },
+      {
+        "name": "currency",
+        "type": "string",
+        "optional": false
+      },
+      {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "docs": "name of the estimate"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "usage",
+      "type": "number",
+      "required": true,
+      "docs": "the chosen amount"
+    },
+    {
+      "name": "slider",
+      "type": {
+        "record": "UsageSlider"
+      },
+      "required": true,
+      "docs": "the range of the slider and its labels"
+    },
+    {
+      "name": "price",
+      "type": {
+        "record": "UsagePrice"
+      },
+      "required": true,
+      "docs": "how the estimate is computed and named"
+    },
+    {
+      "name": "cta",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "href",
+      "type": "string"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"card\" | \"plain\""
+      },
+      "default": "card"
+    },
+    {
+      "name": "ends",
+      "type": {
+        "ts": "\"show\" | \"hide\""
+      },
+      "default": "show"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "usage",
+      "args": [
+        {
+          "name": "value",
+          "type": "string"
+        }
+      ],
+      "docs": "the slider moved"
+    }
+  ],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "text"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "align": "center",
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "4",
+                "Align": "stretch",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "mx-auto w-full max-w-xl",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "layout"
+                            },
+                            "card"
+                          ]
+                        },
+                        "rounded bg-card p-6 inset-ring inset-ring-border",
+                        ""
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "usage"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Justify": "between",
+                    "Align": "baseline"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "xl",
+                        "Weight": "bold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "op": "tpl",
+                            "args": [
+                              {
+                                "$": "slider.unit"
+                              },
+                              {
+                                "$": "usage"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "slider.label"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Range",
+                  "props": {
+                    "Min": {
+                      "$": "slider.min"
+                    },
+                    "Max": {
+                      "$": "slider.max"
+                    },
+                    "Value": {
+                      "$": "usage"
+                    },
+                    "AriaLabel": {
+                      "$": "slider.label"
+                    }
+                  },
+                  "attrs": {
+                    "data-testid": "slider"
+                  },
+                  "on": {
+                    "input": {
+                      "call": "emit.usage",
+                      "args": [
+                        {
+                          "$": "event.value"
+                        }
+                      ]
+                    }
+                  }
+                },
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "ends"
+                      },
+                      "show"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Group",
+                      "props": {
+                        "Justify": "between"
+                      },
+                      "attrs": {
+                        "data-testid": "ends"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  {
+                                    "$": "slider.unit"
+                                  },
+                                  {
+                                    "$": "slider.min"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "tpl",
+                                "args": [
+                                  {
+                                    "$": "slider.unit"
+                                  },
+                                  {
+                                    "$": "slider.max"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Group",
+                  "props": {
+                    "Justify": "between",
+                    "Align": "center",
+                    "Class": "flex-wrap"
+                  },
+                  "children": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "0"
+                      },
+                      "children": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "xs",
+                            "Class": "text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "price.label"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Size": "4xl",
+                            "Weight": "bold"
+                          },
+                          "attrs": {
+                            "data-testid": "estimate"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "op": "mul",
+                                    "args": [
+                                      {
+                                        "$": "usage"
+                                      },
+                                      {
+                                        "$": "price.rate"
+                                      }
+                                    ]
+                                  },
+                                  {
+                                    "$": "price.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "default",
+                        "Size": "default",
+                        "Href": {
+                          "$": "href"
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "submit"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "cta"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/usp-strip.json b/xgen/specs/organisms/usp-strip.json
new file mode 100644
index 0000000..ccb0863
--- /dev/null
+++ b/xgen/specs/organisms/usp-strip.json
@@ -0,0 +1,324 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.usp-strip",
+  "name": "UspStrip",
+  "docs": "The promises of a store in one band: free delivery, returns, warranty, help. Axes: layout (strip: one muted panel, cards: a card each, bar: a thin line of icons and titles), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "default": "",
+      "docs": "section heading; empty: no heading (the section is named by id)"
+    },
+    {
+      "name": "perks",
+      "type": {
+        "ts": "Feature[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"strip\" | \"cards\" | \"bar\""
+      },
+      "default": "strip"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "perks"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "truck",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "bar"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "List",
+                      "props": {
+                        "Tag": "ul",
+                        "Class": "flex flex-wrap items-center justify-center gap-x-8 gap-y-4"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "perks"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "use": "ListItem",
+                              "props": {
+                                "Class": "flex items-center gap-2 text-sm font-medium"
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "LucideIcon",
+                                  "props": {
+                                    "Name": {
+                                      "$": "p.icon"
+                                    },
+                                    "Size": 16
+                                  }
+                                },
+                                {
+                                  "use": "Inline",
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "p.title"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": "1-4",
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "gap-4",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "layout"
+                                    },
+                                    "strip"
+                                  ]
+                                },
+                                "rounded bg-muted p-6",
+                                ""
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "perks"
+                          },
+                          "as": "p",
+                          "key": {
+                            "$": "p.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "4",
+                                "Class": {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "layout"
+                                        },
+                                        "cards"
+                                      ]
+                                    },
+                                    "rounded bg-card inset-ring inset-ring-border p-6",
+                                    ""
+                                  ]
+                                }
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Box",
+                                  "props": {
+                                    "Class": "flex size-10 shrink-0 items-center justify-center rounded bg-muted"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "LucideIcon",
+                                      "props": {
+                                        "Name": {
+                                          "$": "p.icon"
+                                        },
+                                        "Size": 20
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "p.title"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "p.text"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "FeatureGrid",
+      "names": [
+        "Feature"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/video-grid.json b/xgen/specs/organisms/video-grid.json
new file mode 100644
index 0000000..7eb611d
--- /dev/null
+++ b/xgen/specs/organisms/video-grid.json
@@ -0,0 +1,384 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.video-grid",
+  "name": "VideoGrid",
+  "docs": "Video testimonials as thumbnails: a picture, a play button, the name and the company. The player is a port contract (VideoEmbed); here the button emits `play`. Axes: columns (2, 3), caption (below, overlay), tone, density.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "quotes",
+      "type": {
+        "ts": "Quote[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "playLabel",
+      "type": "string",
+      "required": true,
+      "docs": "template of the play button's name, e.g. `Play the video from {0}`"
+    },
+    {
+      "name": "byLine",
+      "type": "string",
+      "required": true,
+      "docs": "template of the line under the name: `{0}, {1}` (role, company)"
+    },
+    {
+      "name": "cols",
+      "type": {
+        "ts": "\"1-2\" | \"1-3\""
+      },
+      "default": "1-3"
+    },
+    {
+      "name": "caption",
+      "type": {
+        "ts": "\"below\" | \"overlay\""
+      },
+      "default": "below"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "play",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "a play button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "quotes"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "video",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "use": "Grid",
+                  "props": {
+                    "Cols": {
+                      "$": "cols"
+                    },
+                    "Class": "gap-4"
+                  },
+                  "attrs": {
+                    "data-testid": "items"
+                  },
+                  "children": [
+                    {
+                      "each": {
+                        "$": "quotes"
+                      },
+                      "as": "q",
+                      "key": {
+                        "$": "q.id"
+                      },
+                      "do": [
+                        {
+                          "organism": "FigureBlock",
+                          "props": {
+                            "className": "m-0 flex flex-col gap-4",
+                            "testid": "item"
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "use": "Box",
+                                  "props": {
+                                    "Class": "relative"
+                                  },
+                                  "children": [
+                                    {
+                                      "organism": "MediaFrame",
+                                      "props": {
+                                        "alt": {
+                                          "$": "q.author"
+                                        }
+                                      }
+                                    },
+                                    {
+                                      "use": "Button",
+                                      "props": {
+                                        "Variant": "default",
+                                        "Size": "default",
+                                        "Type": "button",
+                                        "Class": "absolute top-1/2 left-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded p-0"
+                                      },
+                                      "attrs": {
+                                        "aria-label": {
+                                          "op": "tpl",
+                                          "args": [
+                                            {
+                                              "$": "playLabel"
+                                            },
+                                            {
+                                              "$": "q.author"
+                                            }
+                                          ]
+                                        },
+                                        "data-testid": "play"
+                                      },
+                                      "on": {
+                                        "click": {
+                                          "call": "emit.play",
+                                          "args": [
+                                            {
+                                              "$": "q.id"
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "LucideIcon",
+                                          "props": {
+                                            "Name": "play",
+                                            "Size": 20
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "when": {
+                                        "op": "eq",
+                                        "args": [
+                                          {
+                                            "$": "caption"
+                                          },
+                                          "overlay"
+                                        ]
+                                      },
+                                      "then": [
+                                        {
+                                          "use": "Box",
+                                          "props": {
+                                            "Class": "absolute inset-x-0 bottom-0 rounded bg-background p-4"
+                                          },
+                                          "attrs": {
+                                            "data-testid": "caption"
+                                          },
+                                          "children": [
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "sm",
+                                                "Weight": "semibold"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "$": "q.author"
+                                                  }
+                                                }
+                                              ]
+                                            },
+                                            {
+                                              "use": "Text",
+                                              "props": {
+                                                "Size": "xs",
+                                                "Class": "text-muted-foreground"
+                                              },
+                                              "children": [
+                                                {
+                                                  "text": {
+                                                    "op": "tpl",
+                                                    "args": [
+                                                      {
+                                                        "$": "byLine"
+                                                      },
+                                                      {
+                                                        "$": "q.role"
+                                                      },
+                                                      {
+                                                        "$": "q.company"
+                                                      }
+                                                    ]
+                                                  }
+                                                }
+                                              ]
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "when": {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "caption"
+                                      },
+                                      "below"
+                                    ]
+                                  },
+                                  "then": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Tag": "figcaption"
+                                      },
+                                      "attrs": {
+                                        "data-testid": "caption"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "sm",
+                                            "Weight": "semibold"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "q.author"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Text",
+                                          "props": {
+                                            "Size": "xs",
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "tpl",
+                                                "args": [
+                                                  {
+                                                    "$": "byLine"
+                                                  },
+                                                  {
+                                                    "$": "q.role"
+                                                  },
+                                                  {
+                                                    "$": "q.company"
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "TestimonialGrid",
+      "names": [
+        "Quote"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/video-modal.json b/xgen/specs/organisms/video-modal.json
new file mode 100644
index 0000000..8c90d8a
--- /dev/null
+++ b/xgen/specs/organisms/video-modal.json
@@ -0,0 +1,368 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.video-modal",
+  "name": "VideoModal",
+  "docs": "A dialog with a walkthrough video: a title and a close button, the player area with a play button and, optionally, a list of chapters. Opening the dialog and playing the video are port contracts. Axes: size (default, wide), outline (none, chapters: a list under the player), tone.",
+  "records": {
+    "Chapter": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "close",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the close button"
+    },
+    {
+      "name": "play",
+      "type": "string",
+      "required": true,
+      "docs": "accessible name of the play button"
+    },
+    {
+      "name": "chaptersTitle",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "chapters",
+      "type": {
+        "ts": "Chapter[]"
+      },
+      "required": true
+    },
+    {
+      "name": "size",
+      "type": {
+        "ts": "\"default\" | \"wide\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "outline",
+      "type": {
+        "ts": "\"none\" | \"chapters\""
+      },
+      "default": "none"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "4",
+                "Align": "stretch",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "mx-auto w-full",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "size"
+                            },
+                            "wide"
+                          ]
+                        },
+                        "max-w-4xl",
+                        "max-w-2xl"
+                      ]
+                    },
+                    "rounded bg-card inset-ring inset-ring-border p-4 shadow-lg"
+                  ]
+                }
+              },
+              "attrs": {
+                "role": "dialog",
+                "aria-label": {
+                  "$": "title"
+                },
+                "data-testid": "video-modal"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "2",
+                    "Align": "center",
+                    "Justify": "between"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Size": "sm",
+                        "Class": "text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "text"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "ghost",
+                        "Size": "sm",
+                        "Type": "button",
+                        "Class": "shrink-0"
+                      },
+                      "attrs": {
+                        "aria-label": {
+                          "$": "close"
+                        },
+                        "data-testid": "modal-close"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "x",
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "relative"
+                  },
+                  "attrs": {
+                    "data-testid": "player"
+                  },
+                  "children": [
+                    {
+                      "organism": "MediaFrame",
+                      "props": {
+                        "alt": {
+                          "$": "title"
+                        }
+                      }
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "default",
+                        "Size": "default",
+                        "Type": "button",
+                        "Class": "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded"
+                      },
+                      "attrs": {
+                        "aria-label": {
+                          "$": "play"
+                        },
+                        "data-testid": "play"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": "play",
+                            "Size": 24
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "op": "and",
+                    "args": [
+                      {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "outline"
+                          },
+                          "chapters"
+                        ]
+                      },
+                      {
+                        "op": "gt",
+                        "args": [
+                          {
+                            "op": "len",
+                            "args": [
+                              {
+                                "$": "chapters"
+                              }
+                            ]
+                          },
+                          0
+                        ]
+                      }
+                    ]
+                  },
+                  "then": [
+                    {
+                      "use": "Stack",
+                      "props": {
+                        "Gap": "2"
+                      },
+                      "attrs": {
+                        "data-testid": "chapters"
+                      },
+                      "children": [
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 3,
+                            "Size": "base",
+                            "Weight": "bold"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "chaptersTitle"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "List",
+                          "props": {
+                            "Class": "m-0 flex list-none flex-col gap-2 p-0"
+                          },
+                          "children": [
+                            {
+                              "each": {
+                                "$": "chapters"
+                              },
+                              "as": "c",
+                              "key": {
+                                "$": "c.id"
+                              },
+                              "do": [
+                                {
+                                  "use": "ListItem",
+                                  "props": {
+                                    "Class": "flex items-baseline gap-4"
+                                  },
+                                  "attrs": {
+                                    "data-testid": "item"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Weight": "semibold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "c.title"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "xs",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "c.text"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/weighted-title.json b/xgen/specs/organisms/weighted-title.json
new file mode 100644
index 0000000..241db4d
--- /dev/null
+++ b/xgen/specs/organisms/weighted-title.json
@@ -0,0 +1,117 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.weighted-title",
+  "name": "WeightedTitle",
+  "docs": "A display title, one span per word; word i takes weights[i] (from the preset). The words wrap like text.",
+  "records": {},
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true,
+      "docs": "id of the heading (the band is labelled by it)"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "docs": "the words, separated by spaces"
+    },
+    {
+      "name": "weights",
+      "type": {
+        "ts": "readonly string[]"
+      },
+      "docs": "a font-weight class per word"
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "1 | 2"
+      },
+      "default": 1
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Title",
+      "props": {
+        "As": {
+          "$": "level"
+        },
+        "Size": "5xl",
+        "Weight": "semibold",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "text-center tracking-tight text-background",
+            {
+              "op": "preset",
+              "args": [
+                "defaults",
+                "hero.title"
+              ]
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "id": {
+          "$": "id"
+        }
+      },
+      "children": [
+        {
+          "each": {
+            "op": "words",
+            "args": [
+              {
+                "$": "title"
+              }
+            ]
+          },
+          "as": "word",
+          "key": {
+            "$": "i"
+          },
+          "do": [
+            {
+              "use": "Inline",
+              "props": {
+                "Class": {
+                  "op": "nth",
+                  "args": [
+                    {
+                      "$": "weights"
+                    },
+                    {
+                      "$": "i"
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "word"
+                  }
+                }
+              ]
+            },
+            {
+              "text": " "
+            }
+          ],
+          "index": "i"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/organisms/zone-rows.json b/xgen/specs/organisms/zone-rows.json
new file mode 100644
index 0000000..e3f2fea
--- /dev/null
+++ b/xgen/specs/organisms/zone-rows.json
@@ -0,0 +1,340 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.zone-rows",
+  "name": "ZoneRows",
+  "docs": "The zones as a table (the table layout of ZoneTable): the zone and its areas, the price, free from, the minimum order, the time and an express badge.",
+  "records": {},
+  "props": [
+    {
+      "name": "zones",
+      "type": {
+        "ts": "Zone[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "ZoneLabels"
+      },
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "w-full overflow-x-auto rounded inset-ring inset-ring-border"
+      },
+      "children": [
+        {
+          "use": "Table",
+          "props": {
+            "Class": "w-full text-left text-sm"
+          },
+          "attrs": {
+            "data-testid": "zone-table"
+          },
+          "children": [
+            {
+              "use": "TableCaption",
+              "props": {
+                "Class": "sr-only"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "labels.caption"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "TableHead",
+              "props": {
+                "Class": "bg-muted"
+              },
+              "children": [
+                {
+                  "use": "TableRow",
+                  "children": [
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "px-4 py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.zone"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.price"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.freeFrom"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "hidden py-2 md:table-cell"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.minOrder"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "py-2"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.time"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "TableHeadCell",
+                      "props": {
+                        "Scope": "col",
+                        "Class": "hidden py-2 pr-4 sm:table-cell"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "labels.express"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "TableBody",
+              "children": [
+                {
+                  "each": {
+                    "$": "zones"
+                  },
+                  "as": "z",
+                  "key": {
+                    "$": "z.id"
+                  },
+                  "do": [
+                    {
+                      "use": "TableRow",
+                      "props": {
+                        "Class": "border-t border-border"
+                      },
+                      "attrs": {
+                        "data-testid": "item"
+                      },
+                      "children": [
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": "px-4 py-4"
+                          },
+                          "children": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "0"
+                              },
+                              "children": [
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "sm",
+                                    "Weight": "semibold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "z.name"
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "xs",
+                                    "Class": "text-muted-foreground"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "z.area"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": "font-medium"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "$": "z.price"
+                                  },
+                                  {
+                                    "$": "z.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "$": "z.freeFrom"
+                                  },
+                                  {
+                                    "$": "z.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": "hidden md:table-cell"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "op": "money",
+                                "args": [
+                                  {
+                                    "$": "z.minOrder"
+                                  },
+                                  {
+                                    "$": "z.currency"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "children": [
+                            {
+                              "text": {
+                                "$": "z.time"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "TableCell",
+                          "props": {
+                            "Class": "hidden pr-4 sm:table-cell"
+                          },
+                          "children": [
+                            {
+                              "when": {
+                                "$": "z.express"
+                              },
+                              "then": [
+                                {
+                                  "use": "Badge",
+                                  "props": {
+                                    "Variant": "secondary",
+                                    "Size": "default"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "$": "z.express"
+                                      }
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "ZoneTable",
+      "names": [
+        "Zone",
+        "ZoneLabels"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/organisms/zone-table.json b/xgen/specs/organisms/zone-table.json
new file mode 100644
index 0000000..86af692
--- /dev/null
+++ b/xgen/specs/organisms/zone-table.json
@@ -0,0 +1,476 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "organism.zone-table",
+  "name": "ZoneTable",
+  "docs": "Delivery zones and their prices as a table or as cards: the zone and its areas, the price, the order that ships free, the minimum order, the time and an express badge. Axes: layout (table, cards), tone, density.",
+  "records": {
+    "Zone": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "name": "area",
+        "type": "string"
+      },
+      {
+        "name": "price",
+        "type": "number"
+      },
+      {
+        "name": "freeFrom",
+        "type": "number"
+      },
+      {
+        "name": "minOrder",
+        "type": "number"
+      },
+      {
+        "name": "time",
+        "type": "string"
+      },
+      {
+        "name": "express",
+        "type": "string"
+      },
+      {
+        "name": "currency",
+        "type": "string"
+      }
+    ],
+    "ZoneLabels": [
+      {
+        "name": "caption",
+        "type": "string"
+      },
+      {
+        "name": "zone",
+        "type": "string"
+      },
+      {
+        "name": "price",
+        "type": "string"
+      },
+      {
+        "name": "freeFrom",
+        "type": "string"
+      },
+      {
+        "name": "minOrder",
+        "type": "string"
+      },
+      {
+        "name": "time",
+        "type": "string"
+      },
+      {
+        "name": "express",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "default": ""
+    },
+    {
+      "name": "zones",
+      "type": {
+        "ts": "Zone[]"
+      },
+      "required": true
+    },
+    {
+      "name": "empty",
+      "type": "string",
+      "default": "",
+      "docs": "the text of the empty state (no records), from the dictionary"
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "ZoneLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"table\" | \"cards\""
+      },
+      "default": "table"
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"default\" | \"compact\""
+      },
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "organism": "SectionFrame",
+      "props": {
+        "id": {
+          "$": "id"
+        },
+        "title": {
+          "$": "title"
+        },
+        "lead": {
+          "$": "lead"
+        },
+        "tone": {
+          "$": "tone"
+        },
+        "density": {
+          "$": "density"
+        },
+        "landmarkLabel": {
+          "$": "landmarkLabel"
+        }
+      },
+      "slots": {
+        "children": {
+          "args": [],
+          "do": [
+            {
+              "when": {
+                "op": "eq",
+                "args": [
+                  {
+                    "op": "len",
+                    "args": [
+                      {
+                        "$": "zones"
+                      }
+                    ]
+                  },
+                  0
+                ]
+              },
+              "then": [
+                {
+                  "organism": "EmptyState",
+                  "props": {
+                    "icon": "map",
+                    "title": {
+                      "$": "empty"
+                    }
+                  }
+                }
+              ],
+              "else": [
+                {
+                  "when": {
+                    "op": "eq",
+                    "args": [
+                      {
+                        "$": "layout"
+                      },
+                      "table"
+                    ]
+                  },
+                  "then": [
+                    {
+                      "organism": "ZoneRows",
+                      "props": {
+                        "zones": {
+                          "$": "zones"
+                        },
+                        "labels": {
+                          "$": "labels"
+                        }
+                      }
+                    }
+                  ],
+                  "else": [
+                    {
+                      "use": "Grid",
+                      "props": {
+                        "Cols": "1-3",
+                        "Class": "gap-4"
+                      },
+                      "attrs": {
+                        "data-testid": "items"
+                      },
+                      "children": [
+                        {
+                          "each": {
+                            "$": "zones"
+                          },
+                          "as": "z",
+                          "key": {
+                            "$": "z.id"
+                          },
+                          "do": [
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "4",
+                                "Class": "rounded bg-card inset-ring inset-ring-border p-6"
+                              },
+                              "attrs": {
+                                "data-testid": "item"
+                              },
+                              "children": [
+                                {
+                                  "use": "Stack",
+                                  "props": {
+                                    "Gap": "2"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "Title",
+                                      "props": {
+                                        "As": 3,
+                                        "Size": "lg",
+                                        "Weight": "bold"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "z.name"
+                                          }
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "Text",
+                                      "props": {
+                                        "Size": "sm",
+                                        "Class": "text-muted-foreground"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "z.area"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "Text",
+                                  "props": {
+                                    "Size": "3xl",
+                                    "Weight": "bold"
+                                  },
+                                  "children": [
+                                    {
+                                      "text": {
+                                        "op": "money",
+                                        "args": [
+                                          {
+                                            "$": "z.price"
+                                          },
+                                          {
+                                            "$": "z.currency"
+                                          }
+                                        ]
+                                      }
+                                    }
+                                  ]
+                                },
+                                {
+                                  "use": "List",
+                                  "props": {
+                                    "Tag": "ul",
+                                    "Class": "flex flex-col gap-2 border-t border-border pt-4"
+                                  },
+                                  "children": [
+                                    {
+                                      "use": "ListItem",
+                                      "props": {
+                                        "Class": "flex items-center justify-between gap-4 text-sm"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Inline",
+                                          "props": {
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "labels.freeFrom"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Inline",
+                                          "props": {
+                                            "Class": "font-medium"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "money",
+                                                "args": [
+                                                  {
+                                                    "$": "z.freeFrom"
+                                                  },
+                                                  {
+                                                    "$": "z.currency"
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "ListItem",
+                                      "props": {
+                                        "Class": "flex items-center justify-between gap-4 text-sm"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Inline",
+                                          "props": {
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "labels.minOrder"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Inline",
+                                          "props": {
+                                            "Class": "font-medium"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "op": "money",
+                                                "args": [
+                                                  {
+                                                    "$": "z.minOrder"
+                                                  },
+                                                  {
+                                                    "$": "z.currency"
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    },
+                                    {
+                                      "use": "ListItem",
+                                      "props": {
+                                        "Class": "flex items-center justify-between gap-4 text-sm"
+                                      },
+                                      "children": [
+                                        {
+                                          "use": "Inline",
+                                          "props": {
+                                            "Class": "text-muted-foreground"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "labels.time"
+                                              }
+                                            }
+                                          ]
+                                        },
+                                        {
+                                          "use": "Inline",
+                                          "props": {
+                                            "Class": "font-medium"
+                                          },
+                                          "children": [
+                                            {
+                                              "text": {
+                                                "$": "z.time"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                {
+                                  "when": {
+                                    "$": "z.express"
+                                  },
+                                  "then": [
+                                    {
+                                      "use": "Badge",
+                                      "props": {
+                                        "Variant": "secondary",
+                                        "Size": "default",
+                                        "Class": "w-fit"
+                                      },
+                                      "children": [
+                                        {
+                                          "text": {
+                                            "$": "z.express"
+                                          }
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/avatar.json b/xgen/specs/parts/avatar.json
new file mode 100644
index 0000000..fcebefb
--- /dev/null
+++ b/xgen/specs/parts/avatar.json
@@ -0,0 +1,125 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.avatar",
+  "name": "Avatar",
+  "docs": "An image in a round frame (recipe: size xs to xl, 24 to 64 px). Avatars are always round.",
+  "records": {},
+  "props": [
+    {
+      "name": "src",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "alt",
+      "type": "string",
+      "docs": "empty for a decorative picture",
+      "default": ""
+    },
+    {
+      "name": "size",
+      "type": {
+        "ts": "\"xs\" | \"sm\" | \"default\" | \"lg\" | \"xl\""
+      },
+      "docs": "frame size in px",
+      "default": "default"
+    }
+  ],
+  "className": true,
+  "recipes": {
+    "avatar": "avatar"
+  },
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Inline",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "avatar",
+                "size",
+                {
+                  "$": "size"
+                }
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "avatar"
+      },
+      "children": [
+        {
+          "use": "Image",
+          "props": {
+            "Src": {
+              "$": "src"
+            },
+            "Alt": {
+              "$": "alt"
+            },
+            "Class": "size-full object-cover",
+            "Fit": "cover",
+            "Size": "auto",
+            "Loading": "eager",
+            "Decoding": "auto"
+          },
+          "attrs": {
+            "draggable": "false"
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "size.xs",
+      "props": {
+        "src": "avatar.png",
+        "size": "xs"
+      }
+    },
+    {
+      "id": "size.sm",
+      "props": {
+        "src": "avatar.png",
+        "size": "sm"
+      }
+    },
+    {
+      "id": "size.default",
+      "props": {
+        "src": "avatar.png",
+        "size": "default"
+      }
+    },
+    {
+      "id": "size.lg",
+      "props": {
+        "src": "avatar.png",
+        "size": "lg"
+      }
+    },
+    {
+      "id": "size.xl",
+      "props": {
+        "src": "avatar.png",
+        "size": "xl"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/parts/badge-square.json b/xgen/specs/parts/badge-square.json
new file mode 100644
index 0000000..069d6fc
--- /dev/null
+++ b/xgen/specs/parts/badge-square.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.badge-square",
+  "name": "BadgeSquare",
+  "docs": "A keyboard hint or counter in a small pill. Colours come from the middle layer (.badge-kbd).",
+  "records": {},
+  "props": [
+    {
+      "name": "size",
+      "type": {
+        "ts": "\"sm\" | \"default\""
+      },
+      "docs": "height",
+      "default": "default"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "recipes": {
+    "badgeSquare": "badge-square"
+  },
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Inline",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "badgeSquare",
+                "size",
+                {
+                  "$": "size"
+                }
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "badge-square"
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "size.sm",
+      "props": {
+        "size": "sm"
+      }
+    },
+    {
+      "id": "size.default",
+      "props": {
+        "size": "default"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/parts/bar-chart.json b/xgen/specs/parts/bar-chart.json
new file mode 100644
index 0000000..d44f1f4
--- /dev/null
+++ b/xgen/specs/parts/bar-chart.json
@@ -0,0 +1,276 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.bar-chart",
+  "name": "BarChart",
+  "docs": "A row of vertical bars (sales by day, orders by week) with a caption under each bar. The chart is one image for assistive technology: `label` carries the summary, the bar values are in the captions and titles.",
+  "records": {
+    "Bar": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "number"
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "muted",
+        "type": "boolean",
+        "optional": true
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "bars",
+      "type": {
+        "ts": "Bar[]"
+      },
+      "docs": "id, caption, value; `title` is the tooltip, `muted` dims a period without data",
+      "required": true
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "the summary read to assistive technology",
+      "required": true
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "docs": "the value of a full-height bar; the largest value by default"
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "docs": "height of the plot area in px",
+      "default": 160
+    }
+  ],
+  "className": true,
+  "derived": [
+    {
+      "name": "top",
+      "value": {
+        "op": "max",
+        "args": [
+          1,
+          {
+            "op": "coalesce",
+            "args": [
+              {
+                "$": "max"
+              },
+              {
+                "op": "maxBy",
+                "args": [
+                  {
+                    "$": "bars"
+                  },
+                  "value"
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "min-w-0",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "bar-chart"
+      },
+      "children": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "flex min-w-0 items-end gap-2"
+          },
+          "attrs": {
+            "role": "img",
+            "aria-label": {
+              "$": "label"
+            },
+            "style": {
+              "op": "css",
+              "args": [
+                "height",
+                {
+                  "$": "height"
+                },
+                "px"
+              ]
+            }
+          },
+          "children": [
+            {
+              "each": {
+                "$": "bars"
+              },
+              "as": "b",
+              "key": {
+                "$": "b.id"
+              },
+              "do": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "flex h-full min-w-0 flex-1 items-end"
+                  },
+                  "attrs": {
+                    "title": {
+                      "op": "coalesce",
+                      "args": [
+                        {
+                          "$": "b.title"
+                        },
+                        {
+                          "$": "b.label"
+                        }
+                      ]
+                    }
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": {
+                          "op": "cn",
+                          "args": [
+                            "w-full rounded",
+                            {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "$": "b.muted"
+                                },
+                                "bg-muted-foreground",
+                                "bg-primary"
+                              ]
+                            }
+                          ]
+                        }
+                      },
+                      "attrs": {
+                        "style": {
+                          "op": "css",
+                          "args": [
+                            "height",
+                            {
+                              "op": "max",
+                              "args": [
+                                2,
+                                {
+                                  "op": "round",
+                                  "args": [
+                                    {
+                                      "op": "mul",
+                                      "args": [
+                                        {
+                                          "op": "div",
+                                          "args": [
+                                            {
+                                              "$": "b.value"
+                                            },
+                                            {
+                                              "$": "top"
+                                            }
+                                          ]
+                                        },
+                                        100
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            "%"
+                          ]
+                        },
+                        "data-bar": {
+                          "$": "b.id"
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Box",
+          "props": {
+            "Class": "mt-2 flex min-w-0 gap-2"
+          },
+          "attrs": {
+            "aria-hidden": "true"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "bars"
+              },
+              "as": "b",
+              "key": {
+                "$": "b.id"
+              },
+              "do": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "relative h-4 min-w-0 flex-1"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "absolute left-1/2 top-0 m-0 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "b.label"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/bulk-bar.json b/xgen/specs/parts/bulk-bar.json
new file mode 100644
index 0000000..4b4bd35
--- /dev/null
+++ b/xgen/specs/parts/bulk-bar.json
@@ -0,0 +1,115 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.bulk-bar",
+  "name": "BulkBar",
+  "docs": "The \"N selected\" bar of a list: a count, a clear button and the bulk actions (children). All text comes in through props.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "the count, e.g. \"3 selected\"",
+      "required": true
+    },
+    {
+      "name": "clearLabel",
+      "type": "string",
+      "docs": "accessible name of the clear button",
+      "required": true
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "clear",
+      "args": [],
+      "docs": "the clear button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex flex-wrap items-center gap-2 rounded bg-foreground px-4 py-2 text-xs font-bold text-background",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "region",
+        "aria-label": {
+          "$": "label"
+        },
+        "aria-live": "polite",
+        "data-slot": "bulk-bar",
+        "data-testid": "bulk-bar"
+      },
+      "children": [
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "ghost",
+            "Size": "sm",
+            "Layout": "icon",
+            "Type": "button",
+            "AriaLabel": {
+              "$": "clearLabel"
+            },
+            "Class": "text-background hover:bg-background/15 hover:text-background"
+          },
+          "on": {
+            "click": {
+              "call": "emit.clear",
+              "args": []
+            }
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "x",
+                "Size": 16
+              }
+            }
+          ]
+        },
+        {
+          "use": "Inline",
+          "attrs": {
+            "data-testid": "bulk-count"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "label"
+              }
+            }
+          ]
+        },
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "ml-auto flex flex-wrap items-center gap-2"
+          },
+          "children": [
+            {
+              "slot": "children"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/drop-zone.json b/xgen/specs/parts/drop-zone.json
new file mode 100644
index 0000000..d4f155a
--- /dev/null
+++ b/xgen/specs/parts/drop-zone.json
@@ -0,0 +1,66 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.drop-zone",
+  "name": "DropZone",
+  "docs": "A dashed area that takes files by drag and drop or by a file input. The words come from props; the files are handed to the `files` event, nothing is uploaded here.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the zone",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string"
+    },
+    {
+      "name": "chooseLabel",
+      "type": "string",
+      "docs": "accessible name of the file input",
+      "required": true
+    },
+    {
+      "name": "accept",
+      "type": "string"
+    },
+    {
+      "name": "multiple",
+      "type": "boolean"
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "files",
+      "args": [
+        {
+          "name": "files",
+          "type": {
+            "ts": "File[]"
+          }
+        }
+      ],
+      "docs": "files were dropped or picked"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "drag and drop and the programmatic click on the file input need DOM APIs (DataTransfer, element lookup by id): the behaviour is written by the programmer behind the `files` port"
+    },
+    "react": {
+      "portable": false,
+      "reason": "drag and drop and the programmatic click on the file input need DOM APIs (DataTransfer, element lookup by id): the behaviour is written by the programmer behind the `files` port"
+    }
+  }
+}
diff --git a/xgen/specs/parts/empty-state.json b/xgen/specs/parts/empty-state.json
new file mode 100644
index 0000000..8b88bf7
--- /dev/null
+++ b/xgen/specs/parts/empty-state.json
@@ -0,0 +1,113 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.empty-state",
+  "name": "EmptyState",
+  "docs": "Empty list or nothing found: a round icon, a title, a hint and an optional action.",
+  "records": {},
+  "props": [
+    {
+      "name": "icon",
+      "type": "string",
+      "docs": "Lucide name of the icon",
+      "default": "inbox"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "docs": "the hint"
+    }
+  ],
+  "className": true,
+  "slots": [
+    {
+      "name": "action",
+      "args": [],
+      "docs": "an optional call to action"
+    }
+  ],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex min-w-0 flex-col items-center gap-4 rounded bg-card px-6 py-14 text-center inset-ring inset-ring-border",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "status"
+      },
+      "children": [
+        {
+          "use": "IconBadge",
+          "props": {
+            "Size": "lg"
+          },
+          "children": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": {
+                  "$": "icon"
+                },
+                "Size": 20
+              }
+            }
+          ]
+        },
+        {
+          "use": "Text",
+          "props": {
+            "Class": "m-0 text-sm font-bold text-foreground"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "title"
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "$": "text"
+          },
+          "then": [
+            {
+              "use": "Text",
+              "props": {
+                "Class": "m-0 max-w-80 text-xs font-medium text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "text"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "slot": "action"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/field.json b/xgen/specs/parts/field.json
new file mode 100644
index 0000000..14ce8cf
--- /dev/null
+++ b/xgen/specs/parts/field.json
@@ -0,0 +1,120 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.field",
+  "name": "Field",
+  "docs": "A form field: label, control (children), hint and error text. `htmlFor` ties the label to the id of the control.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "htmlFor",
+      "type": "string",
+      "docs": "id of the control",
+      "required": true
+    },
+    {
+      "name": "hint",
+      "type": "string"
+    },
+    {
+      "name": "error",
+      "type": "string",
+      "docs": "when set it replaces the hint and is announced (role alert)"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex min-w-0 flex-col gap-2",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "children": [
+        {
+          "use": "Label",
+          "props": {
+            "Class": "text-xs font-bold text-foreground",
+            "HTMLFor": {
+              "$": "htmlFor"
+            }
+          },
+          "children": [
+            {
+              "text": {
+                "$": "label"
+              }
+            }
+          ]
+        },
+        {
+          "slot": "children"
+        },
+        {
+          "when": {
+            "$": "error"
+          },
+          "then": [
+            {
+              "use": "Text",
+              "props": {
+                "Class": "m-0 text-xs font-semibold text-destructive"
+              },
+              "attrs": {
+                "role": "alert"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "error"
+                  }
+                }
+              ]
+            }
+          ],
+          "else": [
+            {
+              "when": {
+                "$": "hint"
+              },
+              "then": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Class": "m-0 text-xs font-medium text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "hint"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/filter-builder.json b/xgen/specs/parts/filter-builder.json
new file mode 100644
index 0000000..369cc04
--- /dev/null
+++ b/xgen/specs/parts/filter-builder.json
@@ -0,0 +1,88 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.filter-builder",
+  "name": "FilterBuilder",
+  "docs": "Rows \"field, operator, value\" joined by AND. Operators depend on the field type, the value control too. Every change reports the whole list; the list lives in the URL of the caller.",
+  "records": {
+    "FilterField": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      },
+      {
+        "name": "type",
+        "type": "string"
+      }
+    ],
+    "FilterCond": [
+      {
+        "name": "field",
+        "type": "string"
+      },
+      {
+        "name": "op",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "fields",
+      "type": {
+        "ts": "FilterField[]"
+      },
+      "required": true
+    },
+    {
+      "name": "filters",
+      "type": {
+        "ts": "FilterCond[]"
+      },
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "ts": "Record<string, string>"
+      },
+      "docs": "every word: add, remove, field, operator, value, none, clear, and, yes, no and one per operator",
+      "required": true
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "change",
+      "args": [
+        {
+          "name": "filters",
+          "type": {
+            "ts": "FilterCond[]"
+          }
+        }
+      ],
+      "docs": "the whole list after any change"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "state and branching on the field type (operator tables, value controls per type) are logic: the markup of one row is generated from Field, Select and Input, the reducer is the programmer's behind the `change` port"
+    },
+    "react": {
+      "portable": false,
+      "reason": "state and branching on the field type (operator tables, value controls per type) are logic: the markup of one row is generated from Field, Select and Input, the reducer is the programmer's behind the `change` port"
+    }
+  }
+}
diff --git a/xgen/specs/parts/logo-mark.json b/xgen/specs/parts/logo-mark.json
new file mode 100644
index 0000000..665e969
--- /dev/null
+++ b/xgen/specs/parts/logo-mark.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.logo-mark",
+  "name": "LogoMark",
+  "docs": "The app logo mark in a 32 px frame: a disc or a tile with the logo glyph.",
+  "records": {},
+  "props": [
+    {
+      "name": "variant",
+      "type": {
+        "ts": "\"disc\" | \"tile\""
+      },
+      "docs": "frame of the mark",
+      "default": "disc"
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "brand glyph data: the mark is the app's own brand; the app supplies the mark through a slot (see LogoSidebar)"
+    },
+    "react": {
+      "portable": false,
+      "reason": "brand glyph data: the mark is the app's own brand; the app supplies the mark through a slot (see LogoSidebar)"
+    }
+  }
+}
diff --git a/xgen/specs/parts/logo-sidebar.json b/xgen/specs/parts/logo-sidebar.json
new file mode 100644
index 0000000..324a7b9
--- /dev/null
+++ b/xgen/specs/parts/logo-sidebar.json
@@ -0,0 +1,143 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.logo-sidebar",
+  "name": "LogoSidebar",
+  "docs": "The brand row of a sidebar: a mark and the product name on the left, trailing actions on the right. The variant picks the padding (recipe).",
+  "records": {},
+  "props": [
+    {
+      "name": "variant",
+      "type": {
+        "ts": "\"chat\" | \"creator\""
+      },
+      "docs": "padding of the row",
+      "default": "chat"
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "docs": "product name",
+      "required": true
+    }
+  ],
+  "className": true,
+  "recipes": {
+    "logoSidebar": "logo-sidebar"
+  },
+  "slots": [
+    {
+      "name": "mark",
+      "args": [],
+      "docs": "the logo mark"
+    },
+    {
+      "name": "actions",
+      "args": [],
+      "docs": "trailing actions"
+    }
+  ],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "logoSidebar",
+                "variant",
+                {
+                  "$": "variant"
+                }
+              ]
+            },
+            "in-data-[nav=collapsed]:w-full in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:p-0",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "logo-sidebar"
+      },
+      "children": [
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "flex items-center gap-4"
+          },
+          "attrs": {
+            "data-slot": "logo-sidebar-brand"
+          },
+          "children": [
+            {
+              "slot": "mark"
+            },
+            {
+              "use": "Inline",
+              "props": {
+                "Class": "text-sm font-bold text-foreground in-data-[nav=collapsed]:hidden"
+              },
+              "attrs": {
+                "data-slot": "logo-sidebar-name"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "name"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "$": "actions"
+          },
+          "then": [
+            {
+              "use": "Inline",
+              "props": {
+                "Class": "flex items-center gap-2 in-data-[nav=collapsed]:hidden"
+              },
+              "attrs": {
+                "data-slot": "logo-sidebar-actions"
+              },
+              "children": [
+                {
+                  "slot": "actions"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "variant.chat",
+      "props": {
+        "name": "App",
+        "variant": "chat"
+      }
+    },
+    {
+      "id": "variant.creator",
+      "props": {
+        "name": "App",
+        "variant": "creator"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/parts/meter-row.json b/xgen/specs/parts/meter-row.json
new file mode 100644
index 0000000..80542d2
--- /dev/null
+++ b/xgen/specs/parts/meter-row.json
@@ -0,0 +1,238 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.meter-row",
+  "name": "MeterRow",
+  "docs": "A name, a value caption and a progress bar (completeness by section, issues by rule, stock by warehouse). With `href` the whole row is a link.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "value",
+      "type": "number",
+      "docs": "0 to 100",
+      "required": true
+    },
+    {
+      "name": "caption",
+      "type": "string",
+      "docs": "the caption on the right, e.g. \"72%\"",
+      "required": true
+    },
+    {
+      "name": "hint",
+      "type": "string"
+    },
+    {
+      "name": "href",
+      "type": "string"
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "min-w-0",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "meter-row"
+      },
+      "children": [
+        {
+          "when": {
+            "$": "href"
+          },
+          "then": [
+            {
+              "use": "Link",
+              "props": {
+                "Href": {
+                  "$": "href"
+                },
+                "Variant": "block",
+                "Class": "flex min-w-0 flex-col gap-2 rounded p-2 text-foreground no-underline hover:bg-muted"
+              },
+              "children": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "flex items-baseline justify-between gap-4"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 min-w-0 truncate text-sm font-bold text-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "label"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "caption"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Progress",
+                  "props": {
+                    "Value": {
+                      "op": "str",
+                      "args": [
+                        {
+                          "$": "value"
+                        }
+                      ]
+                    },
+                    "Max": "100"
+                  },
+                  "attrs": {
+                    "aria-label": {
+                      "$": "label"
+                    }
+                  }
+                },
+                {
+                  "when": {
+                    "$": "hint"
+                  },
+                  "then": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 text-xs font-medium text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "hint"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "else": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "flex min-w-0 flex-col gap-2 p-2"
+              },
+              "children": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "flex items-baseline justify-between gap-4"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 min-w-0 truncate text-sm font-bold text-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "label"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 shrink-0 text-xs font-semibold tabular-nums text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "caption"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Progress",
+                  "props": {
+                    "Value": {
+                      "op": "str",
+                      "args": [
+                        {
+                          "$": "value"
+                        }
+                      ]
+                    },
+                    "Max": "100"
+                  },
+                  "attrs": {
+                    "aria-label": {
+                      "$": "label"
+                    }
+                  }
+                },
+                {
+                  "when": {
+                    "$": "hint"
+                  },
+                  "then": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 text-xs font-medium text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "hint"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/notice.json b/xgen/specs/parts/notice.json
new file mode 100644
index 0000000..f3f46f0
--- /dev/null
+++ b/xgen/specs/parts/notice.json
@@ -0,0 +1,62 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.notice",
+  "name": "Notice",
+  "docs": "A short confirmation toast: fixed bottom right, read out by screen readers through role status. Empty text renders nothing visible.",
+  "records": {},
+  "props": [
+    {
+      "name": "text",
+      "type": "string",
+      "required": true
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "contents"
+      },
+      "attrs": {
+        "role": "status",
+        "data-testid": "notice"
+      },
+      "children": [
+        {
+          "when": {
+            "$": "text"
+          },
+          "then": [
+            {
+              "use": "Text",
+              "props": {
+                "Class": "fixed right-4 bottom-4 z-40 m-0 flex items-center gap-2 rounded bg-foreground p-4 text-xs font-bold text-background shadow-lg"
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "circle-check",
+                    "Size": 16
+                  }
+                },
+                {
+                  "text": {
+                    "$": "text"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/page-header.json b/xgen/specs/parts/page-header.json
new file mode 100644
index 0000000..7dc48b2
--- /dev/null
+++ b/xgen/specs/parts/page-header.json
@@ -0,0 +1,113 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.page-header",
+  "name": "PageHeader",
+  "docs": "The page heading: a title, a one-line summary and the action buttons on the right (below on phones).",
+  "records": {},
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "summary",
+      "type": "string"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "docs": "id of the heading, for aria-labelledby"
+    }
+  ],
+  "slots": [
+    {
+      "name": "actions",
+      "args": [],
+      "docs": "action buttons"
+    }
+  ],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between"
+      },
+      "children": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "flex min-w-0 flex-col gap-2"
+          },
+          "children": [
+            {
+              "use": "Title",
+              "props": {
+                "As": 1,
+                "Size": "xl",
+                "Weight": "bold",
+                "Class": "m-0"
+              },
+              "attrs": {
+                "id": {
+                  "$": "id"
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "title"
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "$": "summary"
+              },
+              "then": [
+                {
+                  "use": "Text",
+                  "props": {
+                    "Class": "m-0 text-xs font-medium text-muted-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "summary"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "$": "actions"
+          },
+          "then": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "flex flex-wrap items-center gap-2"
+              },
+              "children": [
+                {
+                  "slot": "actions"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/pager.json b/xgen/specs/parts/pager.json
new file mode 100644
index 0000000..b22eaf9
--- /dev/null
+++ b/xgen/specs/parts/pager.json
@@ -0,0 +1,422 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.pager",
+  "name": "Pager",
+  "docs": "The list footer: a summary line and previous / next page buttons. With `numbered` it shows page numbers (1 … 4 5 6 … 21), with `moreLabel` a \"Load more\" button. The current page is a plain element marked aria-current=\"page\"; the others are buttons. All text comes in through props.",
+  "records": {},
+  "props": [
+    {
+      "name": "page",
+      "type": "number",
+      "docs": "current page, from 1",
+      "required": true
+    },
+    {
+      "name": "pages",
+      "type": "number",
+      "docs": "number of pages",
+      "required": true
+    },
+    {
+      "name": "summary",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "previousLabel",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "nextLabel",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "numbered",
+      "type": "boolean",
+      "docs": "show page numbers between the arrows",
+      "default": false
+    },
+    {
+      "name": "pageLabel",
+      "type": "string",
+      "docs": "template of the accessible name of a page button, {0} is the number"
+    },
+    {
+      "name": "moreLabel",
+      "type": "string",
+      "docs": "label of the \"Load more\" button; no button without it"
+    }
+  ],
+  "derived": [
+    {
+      "name": "numbers",
+      "value": {
+        "op": "pageWindow",
+        "args": [
+          {
+            "$": "page"
+          },
+          {
+            "$": "pages"
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "page",
+      "args": [
+        {
+          "name": "page",
+          "type": "number"
+        }
+      ],
+      "docs": "a page was chosen"
+    },
+    {
+      "name": "more",
+      "args": [],
+      "docs": "the load-more button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-muted-foreground"
+      },
+      "attrs": {
+        "data-testid": "pager"
+      },
+      "children": [
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "flex flex-wrap items-center gap-4"
+          },
+          "children": [
+            {
+              "use": "Inline",
+              "children": [
+                {
+                  "text": {
+                    "$": "summary"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "flex flex-wrap items-center gap-2"
+          },
+          "children": [
+            {
+              "when": {
+                "op": "and",
+                "args": [
+                  {
+                    "$": "moreLabel"
+                  },
+                  {
+                    "op": "lt",
+                    "args": [
+                      {
+                        "$": "page"
+                      },
+                      {
+                        "$": "pages"
+                      }
+                    ]
+                  }
+                ]
+              },
+              "then": [
+                {
+                  "use": "Button",
+                  "props": {
+                    "Variant": "outline",
+                    "Size": "sm",
+                    "Type": "button"
+                  },
+                  "attrs": {
+                    "data-testid": "pager-more"
+                  },
+                  "on": {
+                    "click": {
+                      "call": "emit.more",
+                      "args": []
+                    }
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "moreLabel"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Button",
+              "props": {
+                "Variant": "outline",
+                "Size": "sm",
+                "Layout": "icon",
+                "AriaLabel": {
+                  "$": "previousLabel"
+                },
+                "Disabled": {
+                  "op": "le",
+                  "args": [
+                    {
+                      "$": "page"
+                    },
+                    1
+                  ]
+                }
+              },
+              "on": {
+                "click": {
+                  "call": "emit.page",
+                  "args": [
+                    {
+                      "op": "sub",
+                      "args": [
+                        {
+                          "$": "page"
+                        },
+                        1
+                      ]
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "chevron-left",
+                    "Size": 16
+                  }
+                }
+              ]
+            },
+            {
+              "when": {
+                "$": "numbered"
+              },
+              "then": [
+                {
+                  "each": {
+                    "$": "numbers"
+                  },
+                  "as": "n",
+                  "key": {
+                    "op": "or",
+                    "args": [
+                      {
+                        "$": "n"
+                      },
+                      {
+                        "op": "tpl",
+                        "args": [
+                          "gap{0}",
+                          {
+                            "$": "i"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  "do": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "n"
+                          },
+                          null
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": "w-8 text-center"
+                          },
+                          "children": [
+                            {
+                              "text": "…"
+                            }
+                          ]
+                        }
+                      ],
+                      "else": [
+                        {
+                          "when": {
+                            "op": "eq",
+                            "args": [
+                              {
+                                "$": "n"
+                              },
+                              {
+                                "$": "page"
+                              }
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Inline",
+                              "props": {
+                                "Class": "flex h-8 min-w-8 items-center justify-center rounded bg-foreground px-2 font-bold text-background"
+                              },
+                              "attrs": {
+                                "aria-current": "page",
+                                "data-testid": "pager-current"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "n"
+                                  }
+                                }
+                              ]
+                            }
+                          ],
+                          "else": [
+                            {
+                              "use": "Button",
+                              "props": {
+                                "Variant": "ghost",
+                                "Size": "sm",
+                                "Layout": "icon",
+                                "Type": "button",
+                                "AriaLabel": {
+                                  "op": "tpl",
+                                  "args": [
+                                    {
+                                      "$": "pageLabel"
+                                    },
+                                    {
+                                      "$": "n"
+                                    }
+                                  ]
+                                }
+                              },
+                              "on": {
+                                "click": {
+                                  "call": "emit.page",
+                                  "args": [
+                                    {
+                                      "$": "n"
+                                    }
+                                  ]
+                                }
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "n"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ],
+                  "index": "i"
+                }
+              ],
+              "else": [
+                {
+                  "use": "Inline",
+                  "props": {
+                    "Class": "min-w-12 text-center font-bold text-foreground"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "page"
+                      }
+                    },
+                    {
+                      "text": " / "
+                    },
+                    {
+                      "text": {
+                        "$": "pages"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Button",
+              "props": {
+                "Variant": "outline",
+                "Size": "sm",
+                "Layout": "icon",
+                "AriaLabel": {
+                  "$": "nextLabel"
+                },
+                "Disabled": {
+                  "op": "ge",
+                  "args": [
+                    {
+                      "$": "page"
+                    },
+                    {
+                      "$": "pages"
+                    }
+                  ]
+                }
+              },
+              "on": {
+                "click": {
+                  "call": "emit.page",
+                  "args": [
+                    {
+                      "op": "add",
+                      "args": [
+                        {
+                          "$": "page"
+                        },
+                        1
+                      ]
+                    }
+                  ]
+                }
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "chevron-right",
+                    "Size": 16
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/panel.json b/xgen/specs/parts/panel.json
new file mode 100644
index 0000000..f224b24
--- /dev/null
+++ b/xgen/specs/parts/panel.json
@@ -0,0 +1,189 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.panel",
+  "name": "Panel",
+  "docs": "A titled card (surface bg-card, hairline ring): the content panel of a page. An optional title, description and header actions. Pass `id` to name the panel by its title. Not a landmark: a labelled group inside the Block of its block (rule 01).",
+  "records": {},
+  "props": [
+    {
+      "name": "title",
+      "type": "string"
+    },
+    {
+      "name": "description",
+      "type": "string"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "docs": "base id: the title gets `{id}-t` and the panel points at it with aria-labelledby"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [
+    {
+      "name": "actions",
+      "args": [],
+      "docs": "header actions"
+    }
+  ],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex min-w-0 flex-col gap-4 rounded bg-card p-6 inset-ring inset-ring-border",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "group",
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "and",
+              "args": [
+                {
+                  "$": "title"
+                },
+                {
+                  "$": "id"
+                }
+              ]
+            },
+            {
+              "op": "tpl",
+              "args": [
+                "{0}-t",
+                {
+                  "$": "id"
+                }
+              ]
+            },
+            {
+              "op": "undef",
+              "args": []
+            }
+          ]
+        }
+      },
+      "children": [
+        {
+          "when": {
+            "op": "or",
+            "args": [
+              {
+                "$": "title"
+              },
+              {
+                "$": "actions"
+              }
+            ]
+          },
+          "then": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "flex items-start justify-between gap-4"
+              },
+              "children": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "flex min-w-0 flex-col gap-2"
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "$": "title"
+                      },
+                      "then": [
+                        {
+                          "use": "Title",
+                          "props": {
+                            "As": 2,
+                            "Size": "base",
+                            "Class": "m-0 text-foreground"
+                          },
+                          "attrs": {
+                            "id": {
+                              "op": "cond",
+                              "args": [
+                                {
+                                  "$": "id"
+                                },
+                                {
+                                  "op": "tpl",
+                                  "args": [
+                                    "{0}-t",
+                                    {
+                                      "$": "id"
+                                    }
+                                  ]
+                                },
+                                {
+                                  "op": "undef",
+                                  "args": []
+                                }
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "title"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "when": {
+                        "$": "description"
+                      },
+                      "then": [
+                        {
+                          "use": "Text",
+                          "props": {
+                            "Class": "m-0 text-xs font-medium text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "description"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "slot": "actions"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/pill.json b/xgen/specs/parts/pill.json
new file mode 100644
index 0000000..80c48b1
--- /dev/null
+++ b/xgen/specs/parts/pill.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.pill",
+  "name": "Pill",
+  "docs": "A status pill: a tinted label with an icon (published, draft, role, comment state).",
+  "records": {},
+  "props": [
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"gray\" | \"blue\" | \"amber\" | \"green\" | \"red\" | \"violet\" | \"pink\" | \"orange\" | \"cyan\""
+      },
+      "docs": "tint",
+      "default": "gray"
+    },
+    {
+      "name": "icon",
+      "type": "string",
+      "docs": "Lucide name"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "consts": {
+    "PILL": {
+      "gray": "bg-muted text-muted-foreground inset-ring-border",
+      "blue": "bg-blue-50 text-blue-700 inset-ring-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:inset-ring-blue-900",
+      "amber": "bg-amber-50 text-amber-700 inset-ring-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:inset-ring-amber-900",
+      "green": "bg-green-50 text-green-700 inset-ring-green-200 dark:bg-green-950 dark:text-green-300 dark:inset-ring-green-900",
+      "red": "bg-red-50 text-red-700 inset-ring-red-200 dark:bg-red-950 dark:text-red-300 dark:inset-ring-red-900",
+      "violet": "bg-violet-50 text-violet-700 inset-ring-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:inset-ring-violet-900",
+      "pink": "bg-pink-50 text-pink-700 inset-ring-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:inset-ring-pink-900",
+      "orange": "bg-orange-50 text-orange-700 inset-ring-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:inset-ring-orange-900",
+      "cyan": "bg-cyan-50 text-cyan-700 inset-ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:inset-ring-cyan-900"
+    }
+  },
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "contents"
+      },
+      "children": [
+        {
+          "use": "Inline",
+          "props": {
+            "Class": {
+              "op": "cn",
+              "args": [
+                "inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-3 text-xs font-medium whitespace-nowrap inset-ring",
+                {
+                  "op": "at",
+                  "args": [
+                    {
+                      "$": "PILL"
+                    },
+                    {
+                      "$": "tone"
+                    }
+                  ]
+                },
+                {
+                  "$": "className"
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "pill"
+          },
+          "children": [
+            {
+              "when": {
+                "$": "icon"
+              },
+              "then": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": {
+                      "$": "icon"
+                    },
+                    "Size": 12
+                  }
+                }
+              ]
+            },
+            {
+              "slot": "children"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/range-field.json b/xgen/specs/parts/range-field.json
new file mode 100644
index 0000000..ef8a066
--- /dev/null
+++ b/xgen/specs/parts/range-field.json
@@ -0,0 +1,350 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.range-field",
+  "name": "RangeField",
+  "docs": "A from–to pair for numbers or dates (price range, period). Empty means an open end. With numeric bounds two sliders sit above the inputs. Each control has its own accessible name; every change reports both ends.",
+  "records": {},
+  "props": [
+    {
+      "name": "type",
+      "type": {
+        "ts": "\"number\" | \"date\""
+      },
+      "required": true
+    },
+    {
+      "name": "from",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "to",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "fromLabel",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "toLabel",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "min",
+      "type": "number"
+    },
+    {
+      "name": "max",
+      "type": "number"
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "change",
+      "args": [
+        {
+          "name": "from",
+          "type": "string"
+        },
+        {
+          "name": "to",
+          "type": "string"
+        }
+      ],
+      "docs": "either end changed; both ends are passed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex flex-col gap-2",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "range-field"
+      },
+      "children": [
+        {
+          "when": {
+            "op": "and",
+            "args": [
+              {
+                "op": "eq",
+                "args": [
+                  {
+                    "$": "type"
+                  },
+                  "number"
+                ]
+              },
+              {
+                "op": "has",
+                "args": [
+                  {
+                    "$": "min"
+                  }
+                ]
+              },
+              {
+                "op": "has",
+                "args": [
+                  {
+                    "$": "max"
+                  }
+                ]
+              },
+              {
+                "op": "lt",
+                "args": [
+                  {
+                    "$": "min"
+                  },
+                  {
+                    "$": "max"
+                  }
+                ]
+              }
+            ]
+          },
+          "then": [
+            {
+              "use": "Range",
+              "props": {
+                "Min": {
+                  "$": "min"
+                },
+                "Max": {
+                  "$": "max"
+                },
+                "AriaLabel": {
+                  "$": "fromLabel"
+                },
+                "Value": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "from"
+                        },
+                        ""
+                      ]
+                    },
+                    {
+                      "op": "str",
+                      "args": [
+                        {
+                          "$": "min"
+                        }
+                      ]
+                    },
+                    {
+                      "$": "from"
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "range-from"
+              },
+              "on": {
+                "input": {
+                  "call": "emit.change",
+                  "args": [
+                    {
+                      "$": "event.value"
+                    },
+                    {
+                      "$": "to"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "use": "Range",
+              "props": {
+                "Min": {
+                  "$": "min"
+                },
+                "Max": {
+                  "$": "max"
+                },
+                "AriaLabel": {
+                  "$": "toLabel"
+                },
+                "Value": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "to"
+                        },
+                        ""
+                      ]
+                    },
+                    {
+                      "op": "str",
+                      "args": [
+                        {
+                          "$": "max"
+                        }
+                      ]
+                    },
+                    {
+                      "$": "to"
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "range-to"
+              },
+              "on": {
+                "input": {
+                  "call": "emit.change",
+                  "args": [
+                    {
+                      "$": "from"
+                    },
+                    {
+                      "$": "event.value"
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "flex items-center gap-2"
+          },
+          "children": [
+            {
+              "use": "Input",
+              "props": {
+                "Type": {
+                  "$": "type"
+                },
+                "Size": "sm",
+                "AriaLabel": {
+                  "$": "fromLabel"
+                },
+                "Value": {
+                  "$": "from"
+                },
+                "Min": {
+                  "op": "str",
+                  "args": [
+                    {
+                      "$": "min"
+                    }
+                  ]
+                },
+                "Max": {
+                  "op": "str",
+                  "args": [
+                    {
+                      "$": "max"
+                    }
+                  ]
+                }
+              },
+              "on": {
+                "input": {
+                  "call": "emit.change",
+                  "args": [
+                    {
+                      "$": "event.value"
+                    },
+                    {
+                      "$": "to"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "use": "Inline",
+              "props": {
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": "–"
+                }
+              ]
+            },
+            {
+              "use": "Input",
+              "props": {
+                "Type": {
+                  "$": "type"
+                },
+                "Size": "sm",
+                "AriaLabel": {
+                  "$": "toLabel"
+                },
+                "Value": {
+                  "$": "to"
+                },
+                "Min": {
+                  "op": "str",
+                  "args": [
+                    {
+                      "$": "min"
+                    }
+                  ]
+                },
+                "Max": {
+                  "op": "str",
+                  "args": [
+                    {
+                      "$": "max"
+                    }
+                  ]
+                }
+              },
+              "on": {
+                "input": {
+                  "call": "emit.change",
+                  "args": [
+                    {
+                      "$": "from"
+                    },
+                    {
+                      "$": "event.value"
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/rating.json b/xgen/specs/parts/rating.json
new file mode 100644
index 0000000..2a7ff2a
--- /dev/null
+++ b/xgen/specs/parts/rating.json
@@ -0,0 +1,139 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.rating",
+  "name": "Rating",
+  "docs": "One to five stars (a review's grade, the average of a product). The value is read as the label; the stars themselves are decoration.",
+  "records": {},
+  "props": [
+    {
+      "name": "value",
+      "type": "number",
+      "docs": "0 to max, halves are rounded",
+      "required": true
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "read to assistive technology, e.g. \"4 of 5\"",
+      "required": true
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "docs": "number of stars",
+      "default": 5
+    },
+    {
+      "name": "size",
+      "type": "number",
+      "docs": "size of a star in px",
+      "default": 16
+    }
+  ],
+  "className": true,
+  "derived": [
+    {
+      "name": "full",
+      "value": {
+        "op": "round",
+        "args": [
+          {
+            "op": "min",
+            "args": [
+              {
+                "$": "max"
+              },
+              {
+                "op": "max",
+                "args": [
+                  0,
+                  {
+                    "$": "value"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "inline-flex items-center gap-0",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "img",
+        "aria-label": {
+          "$": "label"
+        },
+        "data-slot": "rating",
+        "data-value": {
+          "$": "full"
+        }
+      },
+      "children": [
+        {
+          "each": {
+            "op": "range",
+            "args": [
+              {
+                "$": "max"
+              }
+            ]
+          },
+          "as": "i",
+          "key": {
+            "$": "i"
+          },
+          "do": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "star",
+                "Size": {
+                  "$": "size"
+                },
+                "Class": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "lt",
+                      "args": [
+                        {
+                          "$": "i"
+                        },
+                        {
+                          "$": "full"
+                        }
+                      ]
+                    },
+                    "fill-foreground text-foreground",
+                    "text-border"
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/region.json b/xgen/specs/parts/region.json
new file mode 100644
index 0000000..a60db7a
--- /dev/null
+++ b/xgen/specs/parts/region.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.region",
+  "name": "Region",
+  "docs": "A landmark region (header, nav, section, aside, footer, article, figure) inside another file: one Block, never nested, so a nested landmark is its own component.",
+  "records": {},
+  "props": [
+    {
+      "name": "tag",
+      "type": {
+        "ts": "\"header\" | \"nav\" | \"section\" | \"aside\" | \"footer\" | \"article\" | \"figure\" | \"main\" | \"search\" | \"div\""
+      },
+      "docs": "the element",
+      "required": true
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": {
+          "$": "tag"
+        },
+        "Class": {
+          "$": "className"
+        }
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ],
+      "attrs": {
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "frame": true
+}
diff --git a/xgen/specs/parts/search-field.json b/xgen/specs/parts/search-field.json
new file mode 100644
index 0000000..598e438
--- /dev/null
+++ b/xgen/specs/parts/search-field.json
@@ -0,0 +1,99 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.search-field",
+  "name": "SearchField",
+  "docs": "A search input with a magnifier. `value` fires on every keystroke with the new text.",
+  "records": {},
+  "props": [
+    {
+      "name": "value",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "placeholder",
+      "type": "string"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name",
+      "required": true
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "value",
+      "args": [
+        {
+          "name": "value",
+          "type": "string"
+        }
+      ],
+      "docs": "the text changed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "relative min-w-44 flex-1",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "search"
+      },
+      "children": [
+        {
+          "use": "LucideIcon",
+          "props": {
+            "Name": "search",
+            "Size": 16,
+            "Class": "pointer-events-none absolute top-2 left-3 text-muted-foreground"
+          }
+        },
+        {
+          "use": "Input",
+          "props": {
+            "Size": "sm",
+            "Type": "search",
+            "Placeholder": {
+              "$": "placeholder"
+            },
+            "AriaLabel": {
+              "$": "label"
+            },
+            "Class": "pr-3 pl-10",
+            "Value": {
+              "$": "value"
+            }
+          },
+          "on": {
+            "input": {
+              "call": "emit.value",
+              "args": [
+                {
+                  "$": "event.value"
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/stat-tile.json b/xgen/specs/parts/stat-tile.json
new file mode 100644
index 0000000..8d65404
--- /dev/null
+++ b/xgen/specs/parts/stat-tile.json
@@ -0,0 +1,227 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.stat-tile",
+  "name": "StatTile",
+  "docs": "A dashboard counter: an icon, a big number, a caption. With `href` the whole tile is a link, without it the tile is a plain figure.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "value",
+      "type": {
+        "ts": "string | number"
+      },
+      "required": true
+    },
+    {
+      "name": "icon",
+      "type": "string",
+      "docs": "Lucide name",
+      "required": true
+    },
+    {
+      "name": "href",
+      "type": "string"
+    },
+    {
+      "name": "hint",
+      "type": "string"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": "min-w-0"
+      },
+      "children": [
+        {
+          "when": {
+            "$": "href"
+          },
+          "then": [
+            {
+              "use": "Link",
+              "props": {
+                "Href": {
+                  "$": "href"
+                },
+                "Variant": "block",
+                "Class": "flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground no-underline inset-ring inset-ring-border hover:bg-muted"
+              },
+              "children": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "flex items-center justify-between gap-2"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 text-xs font-bold text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "label"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "IconBadge",
+                      "props": {
+                        "Size": "sm"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "icon"
+                            },
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "2xl",
+                    "Weight": "bold",
+                    "Class": "m-0 leading-8"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "value"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "$": "hint"
+                  },
+                  "then": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 text-xs font-medium text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "hint"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "else": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": "flex min-w-0 flex-col gap-4 rounded bg-card p-6 text-foreground inset-ring inset-ring-border"
+              },
+              "children": [
+                {
+                  "use": "Box",
+                  "props": {
+                    "Class": "flex items-center justify-between gap-2"
+                  },
+                  "children": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 text-xs font-bold text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "label"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "IconBadge",
+                      "props": {
+                        "Size": "sm"
+                      },
+                      "children": [
+                        {
+                          "use": "LucideIcon",
+                          "props": {
+                            "Name": {
+                              "$": "icon"
+                            },
+                            "Size": 16
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "use": "Text",
+                  "props": {
+                    "Size": "2xl",
+                    "Weight": "bold",
+                    "Class": "m-0 leading-8"
+                  },
+                  "children": [
+                    {
+                      "text": {
+                        "$": "value"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "when": {
+                    "$": "hint"
+                  },
+                  "then": [
+                    {
+                      "use": "Text",
+                      "props": {
+                        "Class": "m-0 text-xs font-medium text-muted-foreground"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "hint"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/table-toolbar.json b/xgen/specs/parts/table-toolbar.json
new file mode 100644
index 0000000..d138a56
--- /dev/null
+++ b/xgen/specs/parts/table-toolbar.json
@@ -0,0 +1,77 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.table-toolbar",
+  "name": "TableToolbar",
+  "docs": "The toolbar above a table: search and filter controls on the left (children), the actions on the right (`actions`). One tab stop group (role toolbar).",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the toolbar",
+      "required": true
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [
+    {
+      "name": "actions",
+      "args": [],
+      "docs": "actions on the right"
+    }
+  ],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex flex-wrap items-center justify-between gap-2",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "toolbar",
+        "aria-label": {
+          "$": "label"
+        },
+        "data-slot": "table-toolbar"
+      },
+      "children": [
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "flex min-w-0 flex-wrap items-center gap-2"
+          },
+          "children": [
+            {
+              "slot": "children"
+            }
+          ]
+        },
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "flex flex-wrap items-center gap-2"
+          },
+          "children": [
+            {
+              "slot": "actions"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/parts/timeline.json b/xgen/specs/parts/timeline.json
new file mode 100644
index 0000000..a8db1ad
--- /dev/null
+++ b/xgen/specs/parts/timeline.json
@@ -0,0 +1,243 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "part.timeline",
+  "name": "Timeline",
+  "docs": "A vertical list of events (an order's history): a dot on a line, the title, an optional text and the time. Newest first or oldest first is the caller's order.",
+  "records": {
+    "TimelineItem": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string",
+        "optional": true
+      },
+      {
+        "name": "time",
+        "type": "string"
+      },
+      {
+        "name": "tone",
+        "type": "string",
+        "optional": true
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "items",
+      "type": {
+        "ts": "TimelineItem[]"
+      },
+      "docs": "tone is gray, green, blue, amber or red",
+      "required": true
+    }
+  ],
+  "className": true,
+  "consts": {
+    "TONE_DOT": {
+      "gray": "bg-muted-foreground",
+      "green": "bg-emerald-500",
+      "blue": "bg-blue-500",
+      "amber": "bg-amber-500",
+      "red": "bg-red-500"
+    }
+  },
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "min-w-0",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "timeline"
+      },
+      "children": [
+        {
+          "use": "List",
+          "props": {
+            "Class": "m-0 flex list-none flex-col p-0"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "items"
+              },
+              "as": "item",
+              "key": {
+                "$": "item.id"
+              },
+              "do": [
+                {
+                  "use": "ListItem",
+                  "props": {
+                    "Class": "relative flex min-w-0 gap-4 pb-4 last:pb-0"
+                  },
+                  "attrs": {
+                    "data-event": {
+                      "$": "item.id"
+                    }
+                  },
+                  "children": [
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "relative flex w-2 shrink-0 justify-center"
+                      },
+                      "children": [
+                        {
+                          "when": {
+                            "op": "lt",
+                            "args": [
+                              {
+                                "$": "i"
+                              },
+                              {
+                                "op": "sub",
+                                "args": [
+                                  {
+                                    "op": "len",
+                                    "args": [
+                                      {
+                                        "$": "items"
+                                      }
+                                    ]
+                                  },
+                                  1
+                                ]
+                              }
+                            ]
+                          },
+                          "then": [
+                            {
+                              "use": "Inline",
+                              "props": {
+                                "Class": "absolute top-4 -bottom-0 w-px bg-border"
+                              }
+                            }
+                          ]
+                        },
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "mt-2 size-2 rounded-full",
+                                {
+                                  "op": "at",
+                                  "args": [
+                                    {
+                                      "$": "TONE_DOT"
+                                    },
+                                    {
+                                      "op": "coalesce",
+                                      "args": [
+                                        {
+                                          "$": "item.tone"
+                                        },
+                                        "gray"
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Box",
+                      "props": {
+                        "Class": "flex min-w-0 flex-1 flex-col gap-0"
+                      },
+                      "children": [
+                        {
+                          "use": "Box",
+                          "props": {
+                            "Class": "flex flex-wrap items-baseline justify-between gap-x-4"
+                          },
+                          "children": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Class": "m-0 text-sm font-bold text-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "item.title"
+                                  }
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Class": "m-0 shrink-0 text-xs font-medium text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "item.time"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        },
+                        {
+                          "when": {
+                            "$": "item.text"
+                          },
+                          "then": [
+                            {
+                              "use": "Text",
+                              "props": {
+                                "Class": "m-0 text-xs font-medium text-muted-foreground"
+                              },
+                              "children": [
+                                {
+                                  "text": {
+                                    "$": "item.text"
+                                  }
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ],
+              "index": "i"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/action-group.json b/xgen/specs/patterns/action-group.json
new file mode 100644
index 0000000..729e68f
--- /dev/null
+++ b/xgen/specs/patterns/action-group.json
@@ -0,0 +1,121 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.action-group",
+  "name": "ActionGroup",
+  "docs": "One or two calls to action side by side: a filled primary button and an outline secondary one. Links, not handlers: the page decides what they open.",
+  "records": {},
+  "props": [
+    {
+      "name": "primary",
+      "type": "string",
+      "docs": "text of the primary action",
+      "required": true
+    },
+    {
+      "name": "primaryHref",
+      "type": "string"
+    },
+    {
+      "name": "secondary",
+      "type": "string",
+      "docs": "text of the secondary action; none: one action"
+    },
+    {
+      "name": "secondaryHref",
+      "type": "string"
+    },
+    {
+      "name": "align",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "docs": "where the group sits",
+      "default": "start"
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Group",
+      "props": {
+        "Gap": "4",
+        "Align": "center",
+        "Justify": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "align"
+                },
+                "center"
+              ]
+            },
+            "center",
+            "start"
+          ]
+        },
+        "Class": "flex-wrap"
+      },
+      "attrs": {
+        "data-slot": "action-group"
+      },
+      "children": [
+        {
+          "use": "Button",
+          "props": {
+            "Variant": "default",
+            "Size": "default",
+            "Href": {
+              "$": "primaryHref"
+            }
+          },
+          "attrs": {
+            "data-testid": "action-primary"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "primary"
+              }
+            }
+          ]
+        },
+        {
+          "when": {
+            "$": "secondary"
+          },
+          "then": [
+            {
+              "use": "Button",
+              "props": {
+                "Variant": "outline",
+                "Size": "default",
+                "Href": {
+                  "$": "secondaryHref"
+                }
+              },
+              "attrs": {
+                "data-testid": "action-secondary"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "secondary"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/animated-backdrop.json b/xgen/specs/patterns/animated-backdrop.json
new file mode 100644
index 0000000..c65623a
--- /dev/null
+++ b/xgen/specs/patterns/animated-backdrop.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.animated-backdrop",
+  "name": "AnimatedBackdrop",
+  "docs": "A moving background behind a section (drifting shapes, a mesh of soft colour). The static fallback is a flat tone of the theme; nothing moves under a reduced-motion preference.",
+  "records": {},
+  "props": [
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\" | \"accent\""
+      },
+      "docs": "the flat colour shown without motion",
+      "default": "default"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    },
+    "react": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/backdrop.json b/xgen/specs/patterns/backdrop.json
new file mode 100644
index 0000000..248861d
--- /dev/null
+++ b/xgen/specs/patterns/backdrop.json
@@ -0,0 +1,66 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.backdrop",
+  "name": "Backdrop",
+  "docs": "A faint full-size picture behind the content of its section (image), or nothing (none). It sits inside the Block of the block, which `behind` makes `relative isolate overflow-hidden`, so the section stays the root of the block (rule 01).",
+  "records": {},
+  "props": [
+    {
+      "name": "kind",
+      "type": {
+        "ts": "\"none\" | \"image\""
+      },
+      "docs": "what is drawn behind",
+      "default": "none"
+    },
+    {
+      "name": "alt",
+      "type": "string",
+      "docs": "accessible name of the picture (image)",
+      "default": ""
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "kind"
+          },
+          "image"
+        ]
+      },
+      "then": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "pointer-events-none absolute inset-0 -z-10"
+          },
+          "attrs": {
+            "data-testid": "backdrop"
+          },
+          "children": [
+            {
+              "organism": "MediaFrame",
+              "props": {
+                "alt": {
+                  "$": "alt"
+                },
+                "ratio": "21/9",
+                "className": "size-full rounded-none opacity-30"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/carousel.json b/xgen/specs/patterns/carousel.json
new file mode 100644
index 0000000..ffe7047
--- /dev/null
+++ b/xgen/specs/patterns/carousel.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.carousel",
+  "name": "Carousel",
+  "docs": "Slides shown one at a time with previous and next buttons and dots. The slides are the children. The page keeps the index in `value` and learns of a change from `change`; autoplay is off unless the programmer turns it on, and a reduced-motion preference turns it off.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the region",
+      "required": true
+    },
+    {
+      "name": "count",
+      "type": "number",
+      "docs": "how many slides",
+      "required": true
+    },
+    {
+      "name": "value",
+      "type": "number",
+      "docs": "index of the slide shown",
+      "default": 0
+    },
+    {
+      "name": "previous",
+      "type": "string",
+      "docs": "accessible name of the previous button"
+    },
+    {
+      "name": "next",
+      "type": "string",
+      "docs": "accessible name of the next button"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "change",
+      "args": [
+        {
+          "name": "index",
+          "type": "number"
+        }
+      ],
+      "docs": "a button or a dot moved to another slide"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    },
+    "react": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/code-editor.json b/xgen/specs/patterns/code-editor.json
new file mode 100644
index 0000000..915a14f
--- /dev/null
+++ b/xgen/specs/patterns/code-editor.json
@@ -0,0 +1,45 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.code-editor",
+  "name": "CodeEditor",
+  "docs": "A code editing area with a highlighted line and a themed frame.",
+  "records": {},
+  "props": [
+    {
+      "name": "doc",
+      "type": "string",
+      "docs": "document text",
+      "required": true
+    },
+    {
+      "name": "activeLine",
+      "type": "number",
+      "docs": "1-based line with the cursor"
+    },
+    {
+      "name": "editable",
+      "type": "boolean"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the editing area",
+      "required": true
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "an editing surface with syntax highlighting and a cursor: an editor engine, not markup; the theme colours belong to the app"
+    },
+    "react": {
+      "portable": false,
+      "reason": "an editing surface with syntax highlighting and a cursor: an editor engine, not markup; the theme colours belong to the app"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/code-window.json b/xgen/specs/patterns/code-window.json
new file mode 100644
index 0000000..456c7cc
--- /dev/null
+++ b/xgen/specs/patterns/code-window.json
@@ -0,0 +1,187 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.code-window",
+  "name": "CodeWindow",
+  "docs": "A terminal or code window: a title bar with three round marks, then the lines. A `command` line starts with the prompt, an `output` line is muted. Static: the typing animation belongs to the port (TypingText contract).",
+  "records": {
+    "CodeLine": [
+      {
+        "name": "id",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string"
+      },
+      {
+        "name": "kind",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "docs": "name of the window, also its accessible name"
+    },
+    {
+      "name": "prompt",
+      "type": "string",
+      "required": true,
+      "docs": "the mark before a command line"
+    },
+    {
+      "name": "lines",
+      "type": {
+        "ts": "CodeLine[]"
+      },
+      "required": true
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "w-full overflow-hidden rounded bg-card text-left inset-ring inset-ring-border",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "group",
+        "aria-label": {
+          "$": "title"
+        },
+        "data-slot": "code-window"
+      },
+      "children": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": "flex items-center border-b border-border px-4 py-2"
+          },
+          "children": [
+            {
+              "use": "Text",
+              "props": {
+                "Size": "xs",
+                "Class": "text-muted-foreground"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "title"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "use": "List",
+          "props": {
+            "Class": "m-0 flex list-none flex-col gap-2 p-4 font-mono text-sm"
+          },
+          "children": [
+            {
+              "each": {
+                "$": "lines"
+              },
+              "as": "line",
+              "key": {
+                "$": "line.id"
+              },
+              "do": [
+                {
+                  "use": "ListItem",
+                  "props": {
+                    "Class": {
+                      "op": "cn",
+                      "args": [
+                        "flex gap-2",
+                        {
+                          "op": "cond",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "line.kind"
+                                },
+                                "command"
+                              ]
+                            },
+                            "text-foreground",
+                            "text-muted-foreground"
+                          ]
+                        }
+                      ]
+                    }
+                  },
+                  "attrs": {
+                    "data-kind": {
+                      "$": "line.kind"
+                    }
+                  },
+                  "children": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "line.kind"
+                          },
+                          "command"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Inline",
+                          "props": {
+                            "Class": "select-none text-muted-foreground"
+                          },
+                          "children": [
+                            {
+                              "text": {
+                                "$": "prompt"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Inline",
+                      "children": [
+                        {
+                          "text": {
+                            "$": "line.text"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/count-up.json b/xgen/specs/patterns/count-up.json
new file mode 100644
index 0000000..f576869
--- /dev/null
+++ b/xgen/specs/patterns/count-up.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.count-up",
+  "name": "CountUp",
+  "docs": "A figure that counts from zero to `value` when it first comes into view. Without script, and under a reduced-motion preference, it shows `value` at once; the figure in the markup is always the final one.",
+  "records": {},
+  "props": [
+    {
+      "name": "value",
+      "type": "number",
+      "docs": "the final figure",
+      "required": true
+    },
+    {
+      "name": "prefix",
+      "type": "string"
+    },
+    {
+      "name": "suffix",
+      "type": "string"
+    },
+    {
+      "name": "duration",
+      "type": "number",
+      "docs": "milliseconds",
+      "default": 1200
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    },
+    "react": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/drawer.json b/xgen/specs/patterns/drawer.json
new file mode 100644
index 0000000..8a8ee72
--- /dev/null
+++ b/xgen/specs/patterns/drawer.json
@@ -0,0 +1,63 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.drawer",
+  "name": "Drawer",
+  "docs": "A side sheet with a title, a close button, content and a footer that can close it.",
+  "records": {},
+  "props": [
+    {
+      "name": "open",
+      "type": "boolean"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "closeLabel",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "icon",
+      "type": "string",
+      "docs": "Lucide name"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [
+    {
+      "name": "footer",
+      "args": [
+        {
+          "name": "close",
+          "type": {
+            "ts": "() => void"
+          }
+        }
+      ],
+      "docs": "footer; receives a function that closes the drawer"
+    }
+  ],
+  "events": [
+    {
+      "name": "close",
+      "args": [],
+      "docs": "the drawer asks to be closed"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "an overlay: focus trap, scroll lock, Escape and outside-click dismissal, inert page (trapFocus, dismissable and lockScroll of the utils)"
+    },
+    "react": {
+      "portable": false,
+      "reason": "an overlay: focus trap, scroll lock, Escape and outside-click dismissal, inert page (trapFocus, dismissable and lockScroll of the utils)"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/dropdown-item.json b/xgen/specs/patterns/dropdown-item.json
new file mode 100644
index 0000000..83f41b0
--- /dev/null
+++ b/xgen/specs/patterns/dropdown-item.json
@@ -0,0 +1,154 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.dropdown-item",
+  "name": "DropdownItem",
+  "docs": "A menu item: an optional icon, the label and an optional trailing mark (a check for selected items). tabindex -1: the menu moves focus with the arrow keys.",
+  "records": {},
+  "props": [
+    {
+      "name": "selected",
+      "type": "boolean",
+      "docs": "the chosen item",
+      "default": false
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [
+    {
+      "name": "icon",
+      "args": [],
+      "docs": "leading icon"
+    },
+    {
+      "name": "right",
+      "args": [],
+      "docs": "trailing mark"
+    }
+  ],
+  "events": [
+    {
+      "name": "click",
+      "args": [],
+      "docs": "the item was chosen"
+    }
+  ],
+  "view": [
+    {
+      "use": "ButtonPlain",
+      "props": {
+        "Type": "button",
+        "Role": "menuitem",
+        "Class": {
+          "op": "cn",
+          "args": [
+            "group flex h-9 w-full items-center px-2 text-left text-foreground",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "tabindex": -1,
+        "data-slot": "dropdown-item",
+        "data-state": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "selected"
+            },
+            "selected",
+            "default"
+          ]
+        }
+      },
+      "on": {
+        "click": {
+          "call": "emit.click",
+          "args": []
+        }
+      },
+      "children": [
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "flex h-7 min-w-0 flex-1 items-center rounded p-1 group-hover:bg-muted group-focus-visible:bg-muted group-data-[state=selected]:bg-muted"
+          },
+          "attrs": {
+            "data-slot": "dropdown-item-content"
+          },
+          "children": [
+            {
+              "when": {
+                "$": "icon"
+              },
+              "then": [
+                {
+                  "use": "Inline",
+                  "props": {
+                    "Class": "flex w-7 shrink-0 items-center pr-2"
+                  },
+                  "attrs": {
+                    "data-slot": "dropdown-item-icon"
+                  },
+                  "children": [
+                    {
+                      "slot": "icon"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "use": "Inline",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "text-xs",
+                    "min-w-0 flex-1 truncate px-1 font-bold"
+                  ]
+                }
+              },
+              "attrs": {
+                "data-slot": "dropdown-item-label"
+              },
+              "children": [
+                {
+                  "slot": "children"
+                }
+              ]
+            },
+            {
+              "when": {
+                "$": "right"
+              },
+              "then": [
+                {
+                  "use": "Inline",
+                  "props": {
+                    "Class": "flex shrink-0 items-center pr-1"
+                  },
+                  "attrs": {
+                    "data-slot": "dropdown-item-right"
+                  },
+                  "children": [
+                    {
+                      "slot": "right"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/dropdown-menu.json b/xgen/specs/patterns/dropdown-menu.json
new file mode 100644
index 0000000..e52df44
--- /dev/null
+++ b/xgen/specs/patterns/dropdown-menu.json
@@ -0,0 +1,87 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.dropdown-menu",
+  "name": "DropdownMenu",
+  "docs": "A menu panel (role menu or listbox) for DropdownItem rows.",
+  "records": {},
+  "props": [
+    {
+      "name": "width",
+      "type": {
+        "ts": "\"240\" | \"auto\""
+      },
+      "docs": "panel width",
+      "default": "auto"
+    },
+    {
+      "name": "label",
+      "type": "string"
+    },
+    {
+      "name": "role",
+      "type": {
+        "ts": "\"menu\" | \"listbox\""
+      },
+      "docs": "ARIA role",
+      "default": "menu"
+    },
+    {
+      "name": "anchor",
+      "type": {
+        "ts": "HTMLElement | null"
+      },
+      "docs": "the trigger: clicks on it are not outside clicks"
+    },
+    {
+      "name": "focusOnOpen",
+      "type": "boolean",
+      "docs": "move focus into the menu on open"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "recipes": {
+    "dropdownMenu": "dropdown-menu"
+  },
+  "slots": [],
+  "events": [
+    {
+      "name": "close",
+      "args": [
+        {
+          "name": "reason",
+          "type": {
+            "ts": "\"escape\" | \"outside\" | \"tab\" | \"select\""
+          }
+        }
+      ],
+      "docs": "the menu asks to be closed, and why"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "an overlay positioned at its trigger: focus into the menu, arrow keys, Escape, outside click, Tab (moveFocus and dismissable of the utils)"
+    },
+    "react": {
+      "portable": false,
+      "reason": "an overlay positioned at its trigger: focus into the menu, arrow keys, Escape, outside click, Tab (moveFocus and dismissable of the utils)"
+    }
+  },
+  "examples": [
+    {
+      "id": "width.240",
+      "props": {
+        "width": "240"
+      }
+    },
+    {
+      "id": "width.auto",
+      "props": {
+        "width": "auto"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/editor-tab.json b/xgen/specs/patterns/editor-tab.json
new file mode 100644
index 0000000..c15b7d2
--- /dev/null
+++ b/xgen/specs/patterns/editor-tab.json
@@ -0,0 +1,185 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.editor-tab",
+  "name": "EditorTab",
+  "docs": "An editor file tab (40 px high): a file icon, the label and a close button. `preview` marks a tab that is not pinned yet. Keyboard (Enter and Space activate, Delete closes) is the programmer's behind the click and close events.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "closeLabel",
+      "type": "string",
+      "docs": "accessible name of the close button, e.g. \"Close index.tsx\"",
+      "required": true
+    },
+    {
+      "name": "active",
+      "type": "boolean",
+      "docs": "the selected tab",
+      "default": false
+    },
+    {
+      "name": "preview",
+      "type": "boolean",
+      "docs": "not pinned yet (italic)",
+      "default": false
+    }
+  ],
+  "className": true,
+  "slots": [
+    {
+      "name": "icon",
+      "args": [],
+      "docs": "the file icon"
+    }
+  ],
+  "events": [
+    {
+      "name": "click",
+      "args": [],
+      "docs": "the tab was pressed"
+    },
+    {
+      "name": "close",
+      "args": [],
+      "docs": "the close button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex h-10 shrink-0 cursor-pointer flex-col justify-center data-[state=active]:bg-card [&_svg]:text-muted-foreground",
+            "border-r border-border",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "tab",
+        "aria-selected": {
+          "$": "active"
+        },
+        "tabindex": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "active"
+            },
+            0,
+            -1
+          ]
+        },
+        "data-slot": "editor-tab",
+        "data-state": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "active"
+            },
+            "active",
+            "default"
+          ]
+        }
+      },
+      "on": {
+        "click": {
+          "call": "emit.click",
+          "args": []
+        }
+      },
+      "children": [
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "flex h-10 items-center gap-2 px-3"
+          },
+          "attrs": {
+            "data-slot": "editor-tab-content"
+          },
+          "children": [
+            {
+              "slot": "icon"
+            },
+            {
+              "use": "Inline",
+              "props": {
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    "text-xs text-foreground",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "$": "preview"
+                        },
+                        "font-semibold italic",
+                        "font-bold"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "data-slot": "editor-tab-label"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "label"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Button",
+              "props": {
+                "Variant": "ghost",
+                "Size": "sm",
+                "Layout": "icon",
+                "Class": "p-0 [&>svg]:size-4",
+                "AriaLabel": {
+                  "$": "closeLabel"
+                }
+              },
+              "attrs": {
+                "tabindex": -1,
+                "data-slot": "editor-tab-close"
+              },
+              "on": {
+                "click": {
+                  "call": "emit.close",
+                  "args": []
+                }
+              },
+              "children": [
+                {
+                  "use": "LucideIcon",
+                  "props": {
+                    "Name": "x",
+                    "Size": 16
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/file-tree-item.json b/xgen/specs/patterns/file-tree-item.json
new file mode 100644
index 0000000..e85ce8f
--- /dev/null
+++ b/xgen/specs/patterns/file-tree-item.json
@@ -0,0 +1,228 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.file-tree-item",
+  "name": "FileTreeItem",
+  "docs": "A row of a file tree: a folder with a disclosure chevron, or a file. The glyphs are Lucide.",
+  "records": {},
+  "props": [
+    {
+      "name": "kind",
+      "type": {
+        "ts": "\"folder\" | \"file\""
+      },
+      "docs": "folder or file",
+      "default": "file"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "selected",
+      "type": "boolean",
+      "docs": "the chosen row",
+      "default": false
+    },
+    {
+      "name": "expanded",
+      "type": "boolean",
+      "docs": "an open folder",
+      "default": false
+    }
+  ],
+  "className": true,
+  "recipes": {
+    "fileTreeItem": "file-tree-item"
+  },
+  "slots": [],
+  "events": [
+    {
+      "name": "click",
+      "args": [],
+      "docs": "the row was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "ButtonPlain",
+      "props": {
+        "Type": "button",
+        "Role": "treeitem",
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "fileTreeItem",
+                "kind",
+                {
+                  "$": "kind"
+                }
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-selected": {
+          "$": "selected"
+        },
+        "tabindex": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "selected"
+            },
+            0,
+            -1
+          ]
+        },
+        "aria-expanded": {
+          "op": "cond",
+          "args": [
+            {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "kind"
+                },
+                "folder"
+              ]
+            },
+            {
+              "$": "expanded"
+            },
+            {
+              "op": "undef",
+              "args": []
+            }
+          ]
+        },
+        "data-slot": "file-tree-item",
+        "data-kind": {
+          "$": "kind"
+        },
+        "data-state": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "selected"
+            },
+            "selected",
+            "default"
+          ]
+        }
+      },
+      "on": {
+        "click": {
+          "call": "emit.click",
+          "args": []
+        }
+      },
+      "children": [
+        {
+          "when": {
+            "op": "eq",
+            "args": [
+              {
+                "$": "kind"
+              },
+              "folder"
+            ]
+          },
+          "then": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "expanded"
+                    },
+                    "chevron-down",
+                    "chevron-right"
+                  ]
+                },
+                "Size": 16
+              }
+            },
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "folder-open",
+                "Size": 16
+              }
+            }
+          ],
+          "else": [
+            {
+              "use": "LucideIcon",
+              "props": {
+                "Name": "file",
+                "Size": 16
+              }
+            }
+          ]
+        },
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "whitespace-nowrap"
+          },
+          "attrs": {
+            "data-slot": "file-tree-label"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "label"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "kind.folder",
+      "props": {
+        "label": "src",
+        "kind": "folder"
+      }
+    },
+    {
+      "id": "kind.file",
+      "props": {
+        "label": "src",
+        "kind": "file"
+      }
+    },
+    {
+      "id": "state.selected",
+      "props": {
+        "label": "index.ts",
+        "selected": true
+      }
+    },
+    {
+      "id": "state.expanded",
+      "props": {
+        "label": "src",
+        "kind": "folder",
+        "expanded": true
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/file-tree.json b/xgen/specs/patterns/file-tree.json
new file mode 100644
index 0000000..b3a04e5
--- /dev/null
+++ b/xgen/specs/patterns/file-tree.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.file-tree",
+  "name": "FileTree",
+  "docs": "The list of a file tree. Put FileTreeItem in it. Arrow keys and type-ahead: attach `moveFocus` and `typeahead` from the utils to the keydown (vertical, no loop).",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the tree"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex flex-col gap-2 p-2",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "tree",
+        "aria-label": {
+          "$": "label"
+        },
+        "data-slot": "file-tree"
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/icon-tab.json b/xgen/specs/patterns/icon-tab.json
new file mode 100644
index 0000000..0fdbb66
--- /dev/null
+++ b/xgen/specs/patterns/icon-tab.json
@@ -0,0 +1,129 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.icon-tab",
+  "name": "IconTab",
+  "docs": "One icon-only tab (28 by 28, a 16 px glyph in the children). `label` is its accessible name. Arrow-key movement between tabs is the job of IconTabs (see roving).",
+  "records": {},
+  "props": [
+    {
+      "name": "active",
+      "type": "boolean",
+      "docs": "the selected tab",
+      "default": false
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name",
+      "required": true
+    }
+  ],
+  "className": true,
+  "children": true,
+  "recipes": {
+    "iconTab": "icon-tab"
+  },
+  "slots": [],
+  "events": [
+    {
+      "name": "click",
+      "args": [],
+      "docs": "the tab was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "ButtonPlain",
+      "props": {
+        "Type": "button",
+        "Role": "tab",
+        "AriaLabel": {
+          "$": "label"
+        },
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "iconTab",
+                "state",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "active"
+                    },
+                    "active",
+                    "default"
+                  ]
+                }
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-selected": {
+          "$": "active"
+        },
+        "tabindex": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "active"
+            },
+            0,
+            -1
+          ]
+        },
+        "data-slot": "icon-tab",
+        "data-state": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "active"
+            },
+            "active",
+            "default"
+          ]
+        }
+      },
+      "on": {
+        "click": {
+          "call": "emit.click",
+          "args": []
+        }
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "active.default",
+      "props": {
+        "label": "Files",
+        "active": false
+      }
+    },
+    {
+      "id": "active.active",
+      "props": {
+        "label": "Files",
+        "active": true
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/icon-tabs.json b/xgen/specs/patterns/icon-tabs.json
new file mode 100644
index 0000000..c9a25e1
--- /dev/null
+++ b/xgen/specs/patterns/icon-tabs.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.icon-tabs",
+  "name": "IconTabs",
+  "docs": "A row of icon-only tabs (a file tree pane: Files, Search, Apps). Put IconTab in it. Arrow keys: attach `moveFocus` from the utils to the keydown of the row (orientation horizontal, activate).",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the tab list"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            "flex items-center gap-2",
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "tablist",
+        "aria-label": {
+          "$": "label"
+        },
+        "data-slot": "icon-tabs"
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/marquee.json b/xgen/specs/patterns/marquee.json
new file mode 100644
index 0000000..da72c0e
--- /dev/null
+++ b/xgen/specs/patterns/marquee.json
@@ -0,0 +1,44 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.marquee",
+  "name": "Marquee",
+  "docs": "A row (or column) of items that scrolls on its own and pauses on hover and focus. The items are the children; the same items follow once more, hidden from assistive technology, so the loop has no gap.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the region",
+      "required": true
+    },
+    {
+      "name": "direction",
+      "type": {
+        "ts": "\"start\" | \"end\""
+      },
+      "docs": "which way the items move",
+      "default": "start"
+    },
+    {
+      "name": "paused",
+      "type": "boolean",
+      "docs": "stop the motion; also the value under a reduced-motion preference"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    },
+    "react": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/media-frame.json b/xgen/specs/patterns/media-frame.json
new file mode 100644
index 0000000..ee5e0b1
--- /dev/null
+++ b/xgen/specs/patterns/media-frame.json
@@ -0,0 +1,202 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.media-frame",
+  "name": "MediaFrame",
+  "docs": "A picture in a fixed ratio that follows the theme. `src` is the picture of the light theme, `darkSrc` the one of the dark theme (without it the dark theme shows `src`). Without both it shows the built-in neutral placeholders (base64 data URIs, one light and one dark), so a page can be laid out before it has pictures; the placeholder stands in for a real `src` and is switched by the theme token. `ratio` comes from the recipe; the corners are the plain theme radius.",
+  "records": {},
+  "props": [
+    {
+      "name": "alt",
+      "type": "string",
+      "docs": "accessible name of the picture",
+      "required": true
+    },
+    {
+      "name": "src",
+      "type": "string",
+      "docs": "address of the picture (light theme); none: the built-in light placeholder"
+    },
+    {
+      "name": "darkSrc",
+      "type": "string",
+      "docs": "address of the picture for the dark theme; none: `src`, or the built-in dark placeholder when there is no `src`"
+    },
+    {
+      "name": "ratio",
+      "type": {
+        "ts": "\"16/9\" | \"4/3\" | \"1/1\" | \"3/4\" | \"21/9\""
+      },
+      "docs": "width to height",
+      "default": "16/9"
+    }
+  ],
+  "className": true,
+  "recipes": {
+    "mediaFrame": "media-frame"
+  },
+  "consts": {
+    "PLACEHOLDER": {
+      "light": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNlMmU4ZjAiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiNjYmQ1ZTEiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjOTRhM2I4IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+",
+      "dark": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IiMxZTI5M2IiLz48Y2lyY2xlIGN4PSIyOTYiIGN5PSI5NiIgcj0iMzAiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDBWMjE0bDk2LTc2IDg4IDcwIDY0LTQ4IDE1MiA5NnY0NHoiIGZpbGw9IiMzMzQxNTUiLz48cGF0aCBkPSJNMCAzMDB2LTUybDEyMC02MCAxMTAgNjIgNjAtMzAgMTEwIDgwdjB6IiBmaWxsPSIjNDc1NTY5IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+"
+    }
+  },
+  "derived": [
+    {
+      "name": "lightSrc",
+      "value": {
+        "op": "coalesce",
+        "args": [
+          {
+            "$": "src"
+          },
+          {
+            "op": "at",
+            "args": [
+              {
+                "$": "PLACEHOLDER"
+              },
+              "light"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "name": "nightSrc",
+      "value": {
+        "op": "coalesce",
+        "args": [
+          {
+            "$": "darkSrc"
+          },
+          {
+            "$": "src"
+          },
+          {
+            "op": "at",
+            "args": [
+              {
+                "$": "PLACEHOLDER"
+              },
+              "dark"
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "mediaFrame",
+                "ratio",
+                {
+                  "$": "ratio"
+                }
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "media-frame",
+        "data-placeholder": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "src"
+            },
+            "false",
+            "true"
+          ]
+        }
+      },
+      "children": [
+        {
+          "use": "Image",
+          "props": {
+            "Src": {
+              "$": "lightSrc"
+            },
+            "Alt": {
+              "$": "alt"
+            },
+            "Class": "absolute inset-0 size-full object-cover dark:hidden"
+          },
+          "attrs": {
+            "data-theme-src": "light"
+          }
+        },
+        {
+          "use": "Image",
+          "props": {
+            "Src": {
+              "$": "nightSrc"
+            },
+            "Alt": {
+              "$": "alt"
+            },
+            "Class": "absolute inset-0 hidden size-full object-cover dark:block"
+          },
+          "attrs": {
+            "data-theme-src": "dark"
+          }
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "ratio.16/9",
+      "props": {
+        "alt": "Picture",
+        "ratio": "16/9"
+      }
+    },
+    {
+      "id": "ratio.4/3",
+      "props": {
+        "alt": "Picture",
+        "ratio": "4/3"
+      }
+    },
+    {
+      "id": "ratio.1/1",
+      "props": {
+        "alt": "Picture",
+        "ratio": "1/1"
+      }
+    },
+    {
+      "id": "ratio.3/4",
+      "props": {
+        "alt": "Picture",
+        "ratio": "3/4"
+      }
+    },
+    {
+      "id": "ratio.21/9",
+      "props": {
+        "alt": "Picture",
+        "ratio": "21/9"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/nav-item-row.json b/xgen/specs/patterns/nav-item-row.json
new file mode 100644
index 0000000..c2571bd
--- /dev/null
+++ b/xgen/specs/patterns/nav-item-row.json
@@ -0,0 +1,121 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.nav-item-row",
+  "name": "NavItemRow",
+  "docs": "The row inside NavItem: the icon and the label on the left, the right slot (or an empty 20 by 20 frame) on the right.",
+  "records": {},
+  "props": [
+    {
+      "name": "inner",
+      "type": "string",
+      "docs": "classes of the row (the nav-item-content recipe, worked out by NavItem)"
+    },
+    {
+      "name": "reserveRight",
+      "type": "boolean",
+      "docs": "keep the empty 20 by 20 frame on the right when there is no right content",
+      "default": false
+    }
+  ],
+  "children": true,
+  "slots": [
+    {
+      "name": "icon",
+      "args": [],
+      "docs": "leading icon"
+    },
+    {
+      "name": "right",
+      "args": [],
+      "docs": "trailing content"
+    }
+  ],
+  "events": [],
+  "view": [
+    {
+      "use": "Inline",
+      "props": {
+        "Class": {
+          "$": "inner"
+        }
+      },
+      "attrs": {
+        "data-slot": "nav-item-content"
+      },
+      "children": [
+        {
+          "use": "Inline",
+          "props": {
+            "Class": "flex min-w-0 flex-1 items-center gap-4 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center"
+          },
+          "attrs": {
+            "data-slot": "nav-item-left"
+          },
+          "children": [
+            {
+              "slot": "icon"
+            },
+            {
+              "use": "Inline",
+              "props": {
+                "Class": "min-w-0 flex-1 truncate in-data-[nav=collapsed]:hidden"
+              },
+              "attrs": {
+                "data-slot": "nav-item-label"
+              },
+              "children": [
+                {
+                  "slot": "children"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "when": {
+            "$": "right"
+          },
+          "then": [
+            {
+              "use": "Inline",
+              "props": {
+                "Class": "flex items-center gap-2 in-data-[nav=collapsed]:hidden"
+              },
+              "attrs": {
+                "data-slot": "nav-item-right"
+              },
+              "children": [
+                {
+                  "slot": "right"
+                }
+              ]
+            }
+          ],
+          "else": [
+            {
+              "when": {
+                "$": "reserveRight"
+              },
+              "then": [
+                {
+                  "use": "Inline",
+                  "props": {
+                    "Class": "size-5 shrink-0 in-data-[nav=collapsed]:hidden"
+                  },
+                  "attrs": {
+                    "data-slot": "nav-item-right"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/nav-item.json b/xgen/specs/patterns/nav-item.json
new file mode 100644
index 0000000..b2f8808
--- /dev/null
+++ b/xgen/specs/patterns/nav-item.json
@@ -0,0 +1,411 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.nav-item",
+  "name": "NavItem",
+  "docs": "A sidebar list item: icon, label and an optional right slot. With `href` it is a link, with `interactive` a button, otherwise a static box.",
+  "records": {},
+  "props": [
+    {
+      "name": "selected",
+      "type": "boolean",
+      "docs": "the current item",
+      "default": false
+    },
+    {
+      "name": "level",
+      "type": {
+        "ts": "\"1\" | \"2\" | \"3\" | \"4\""
+      },
+      "docs": "indent level"
+    },
+    {
+      "name": "href",
+      "type": "string"
+    },
+    {
+      "name": "interactive",
+      "type": "boolean",
+      "docs": "render a button (the click event is wired)",
+      "default": false
+    },
+    {
+      "name": "reserveRight",
+      "type": "boolean",
+      "docs": "keep the empty 20 by 20 frame on the right when there is no right content",
+      "default": false
+    },
+    {
+      "name": "contentClass",
+      "type": "string",
+      "docs": "classes of the inner row"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "recipes": {
+    "navItem": "nav-item",
+    "navItemContent": "nav-item-content"
+  },
+  "derived": [
+    {
+      "name": "state",
+      "value": {
+        "op": "cond",
+        "args": [
+          {
+            "$": "selected"
+          },
+          "selected",
+          "default"
+        ]
+      }
+    },
+    {
+      "name": "outer",
+      "value": {
+        "op": "cn",
+        "args": [
+          {
+            "op": "recipe",
+            "args": [
+              "navItem",
+              "level",
+              {
+                "$": "level"
+              },
+              "state",
+              {
+                "$": "state"
+              }
+            ]
+          },
+          "group in-data-[nav=collapsed]:justify-center",
+          {
+            "$": "className"
+          }
+        ]
+      }
+    },
+    {
+      "name": "inner",
+      "value": {
+        "op": "cn",
+        "args": [
+          {
+            "op": "recipe",
+            "args": [
+              "navItemContent",
+              "level",
+              {
+                "$": "level"
+              },
+              "state",
+              {
+                "$": "state"
+              }
+            ]
+          },
+          {
+            "op": "and",
+            "args": [
+              {
+                "op": "not",
+                "args": [
+                  {
+                    "$": "selected"
+                  }
+                ]
+              },
+              "group-hover:bg-muted"
+            ]
+          },
+          "in-data-[nav=collapsed]:w-10 in-data-[nav=collapsed]:flex-none in-data-[nav=collapsed]:justify-center in-data-[nav=collapsed]:px-0",
+          {
+            "$": "contentClass"
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [
+    {
+      "name": "icon",
+      "args": [],
+      "docs": "leading icon"
+    },
+    {
+      "name": "right",
+      "args": [],
+      "docs": "trailing content"
+    }
+  ],
+  "events": [
+    {
+      "name": "click",
+      "args": [],
+      "docs": "the item was pressed (link and button)"
+    }
+  ],
+  "view": [
+    {
+      "when": {
+        "$": "href"
+      },
+      "then": [
+        {
+          "use": "LinkPlain",
+          "props": {
+            "Href": {
+              "$": "href"
+            },
+            "Class": {
+              "$": "outer"
+            },
+            "AriaCurrent": {
+              "op": "cond",
+              "args": [
+                {
+                  "$": "selected"
+                },
+                "page",
+                {
+                  "op": "undef",
+                  "args": []
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "nav-item",
+            "data-state": {
+              "$": "state"
+            }
+          },
+          "on": {
+            "click": {
+              "call": "emit.click",
+              "args": []
+            }
+          },
+          "children": [
+            {
+              "organism": "NavItemRow",
+              "props": {
+                "inner": {
+                  "$": "inner"
+                },
+                "reserveRight": {
+                  "$": "reserveRight"
+                }
+              },
+              "slots": {
+                "icon": {
+                  "args": [],
+                  "do": [],
+                  "forward": "icon"
+                },
+                "right": {
+                  "args": [],
+                  "do": [],
+                  "forward": "right"
+                },
+                "children": {
+                  "args": [],
+                  "do": [],
+                  "forward": "children"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "else": [
+        {
+          "when": {
+            "$": "interactive"
+          },
+          "then": [
+            {
+              "use": "ButtonPlain",
+              "props": {
+                "Type": "button",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    {
+                      "$": "outer"
+                    },
+                    "text-left"
+                  ]
+                }
+              },
+              "attrs": {
+                "aria-current": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "selected"
+                    },
+                    "page",
+                    {
+                      "op": "undef",
+                      "args": []
+                    }
+                  ]
+                },
+                "data-slot": "nav-item",
+                "data-state": {
+                  "$": "state"
+                }
+              },
+              "on": {
+                "click": {
+                  "call": "emit.click",
+                  "args": []
+                }
+              },
+              "children": [
+                {
+                  "organism": "NavItemRow",
+                  "props": {
+                    "inner": {
+                      "$": "inner"
+                    },
+                    "reserveRight": {
+                      "$": "reserveRight"
+                    }
+                  },
+                  "slots": {
+                    "icon": {
+                      "args": [],
+                      "do": [],
+                      "forward": "icon"
+                    },
+                    "right": {
+                      "args": [],
+                      "do": [],
+                      "forward": "right"
+                    },
+                    "children": {
+                      "args": [],
+                      "do": [],
+                      "forward": "children"
+                    }
+                  }
+                }
+              ]
+            }
+          ],
+          "else": [
+            {
+              "use": "Box",
+              "props": {
+                "Class": {
+                  "$": "outer"
+                }
+              },
+              "attrs": {
+                "aria-current": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "selected"
+                    },
+                    "page",
+                    {
+                      "op": "undef",
+                      "args": []
+                    }
+                  ]
+                },
+                "data-slot": "nav-item",
+                "data-state": {
+                  "$": "state"
+                }
+              },
+              "children": [
+                {
+                  "organism": "NavItemRow",
+                  "props": {
+                    "inner": {
+                      "$": "inner"
+                    },
+                    "reserveRight": {
+                      "$": "reserveRight"
+                    }
+                  },
+                  "slots": {
+                    "icon": {
+                      "args": [],
+                      "do": [],
+                      "forward": "icon"
+                    },
+                    "right": {
+                      "args": [],
+                      "do": [],
+                      "forward": "right"
+                    },
+                    "children": {
+                      "args": [],
+                      "do": [],
+                      "forward": "children"
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "level.1",
+      "props": {
+        "level": "1"
+      }
+    },
+    {
+      "id": "level.2",
+      "props": {
+        "level": "2"
+      }
+    },
+    {
+      "id": "level.3",
+      "props": {
+        "level": "3"
+      }
+    },
+    {
+      "id": "level.4",
+      "props": {
+        "level": "4"
+      }
+    },
+    {
+      "id": "state.selected",
+      "props": {
+        "selected": true
+      }
+    },
+    {
+      "id": "link",
+      "props": {
+        "href": "#/home"
+      }
+    },
+    {
+      "id": "button",
+      "props": {
+        "interactive": true
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/popover.json b/xgen/specs/patterns/popover.json
new file mode 100644
index 0000000..620a597
--- /dev/null
+++ b/xgen/specs/patterns/popover.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.popover",
+  "name": "Popover",
+  "docs": "A dialog panel anchored to a trigger.",
+  "records": {},
+  "props": [
+    {
+      "name": "open",
+      "type": "boolean"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the panel",
+      "required": true
+    },
+    {
+      "name": "width",
+      "type": {
+        "ts": "\"sm\" | \"md\" | \"lg\""
+      }
+    },
+    {
+      "name": "end",
+      "type": "boolean",
+      "docs": "align to the right edge of the trigger"
+    }
+  ],
+  "className": true,
+  "slots": [
+    {
+      "name": "trigger",
+      "args": [
+        {
+          "name": "props",
+          "type": {
+            "ts": "{ id: string; \"aria-haspopup\": \"dialog\"; \"aria-controls\": string; onclick: () => void }"
+          }
+        }
+      ],
+      "docs": "the trigger; receives the props it must spread"
+    },
+    {
+      "name": "children",
+      "args": [
+        {
+          "name": "close",
+          "type": {
+            "ts": "() => void"
+          }
+        }
+      ],
+      "docs": "panel content; receives a close function"
+    }
+  ],
+  "events": [],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "an overlay anchored to its trigger: open state, aria-haspopup wiring, Escape and outside dismissal (dismissable of the utils)"
+    },
+    "react": {
+      "portable": false,
+      "reason": "an overlay anchored to its trigger: open state, aria-haspopup wiring, Escape and outside dismissal (dismissable of the utils)"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/prompt-input.json b/xgen/specs/patterns/prompt-input.json
new file mode 100644
index 0000000..ee56c08
--- /dev/null
+++ b/xgen/specs/patterns/prompt-input.json
@@ -0,0 +1,63 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.prompt-input",
+  "name": "PromptInput",
+  "docs": "A prompt box: a growing text area with attachments, a footer and an overlay.",
+  "records": {},
+  "props": [
+    {
+      "name": "placeholder",
+      "type": "string"
+    },
+    {
+      "name": "value",
+      "type": "string"
+    },
+    {
+      "name": "label",
+      "type": "string"
+    }
+  ],
+  "className": true,
+  "slots": [
+    {
+      "name": "attachments",
+      "args": [],
+      "docs": "attached items"
+    },
+    {
+      "name": "footer",
+      "args": [],
+      "docs": "send button and tools"
+    },
+    {
+      "name": "overlay",
+      "args": [],
+      "docs": "suggestions above the box"
+    }
+  ],
+  "events": [
+    {
+      "name": "input",
+      "args": [
+        {
+          "name": "value",
+          "type": "string"
+        }
+      ],
+      "docs": "the text changed"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "a text area that grows with its content and keeps its caret: DOM measurement and focus handling, written by the programmer"
+    },
+    "react": {
+      "portable": false,
+      "reason": "a text area that grows with its content and keeps its caret: DOM measurement and focus handling, written by the programmer"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/scroll-spy.json b/xgen/specs/patterns/scroll-spy.json
new file mode 100644
index 0000000..4c7fef0
--- /dev/null
+++ b/xgen/specs/patterns/scroll-spy.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.scroll-spy",
+  "name": "ScrollSpy",
+  "docs": "Marks which section of the page is being read: it watches the sections by id and reports the one in view, so a table of contents or a sticky picture can follow.",
+  "records": {},
+  "props": [
+    {
+      "name": "ids",
+      "type": {
+        "ts": "string[]"
+      },
+      "docs": "ids of the sections, in page order",
+      "required": true
+    },
+    {
+      "name": "offset",
+      "type": "number",
+      "docs": "pixels from the top that count as being in view",
+      "default": 0
+    }
+  ],
+  "slots": [],
+  "events": [
+    {
+      "name": "active",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        }
+      ],
+      "docs": "another section came into view"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "an intersection observer on the page's sections; the page owns the state"
+    },
+    "react": {
+      "portable": false,
+      "reason": "an intersection observer on the page's sections; the page owns the state"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/section-box.json b/xgen/specs/patterns/section-box.json
new file mode 100644
index 0000000..ecda359
--- /dev/null
+++ b/xgen/specs/patterns/section-box.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.section-box",
+  "name": "SectionBox",
+  "docs": "The body of a SectionFrame: inside a card when `boxed`, else the children as they are (no wrapper).",
+  "records": {},
+  "props": [
+    {
+      "name": "boxed",
+      "type": "boolean",
+      "docs": "the children sit in a card",
+      "default": false
+    }
+  ],
+  "children": true,
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "$": "boxed"
+      },
+      "then": [
+        {
+          "use": "Card",
+          "props": {
+            "Variant": "muted"
+          },
+          "children": [
+            {
+              "slot": "children"
+            }
+          ]
+        }
+      ],
+      "else": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/patterns/section-column.json b/xgen/specs/patterns/section-column.json
new file mode 100644
index 0000000..550f231
--- /dev/null
+++ b/xgen/specs/patterns/section-column.json
@@ -0,0 +1,114 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.section-column",
+  "name": "SectionColumn",
+  "docs": "The stacked body of a SectionFrame: the heading, the children and the media in one column; a narrow measure (xs to 3xl) holds the column at that width, centred.",
+  "records": {},
+  "props": [
+    {
+      "name": "measure",
+      "type": {
+        "ts": "\"default\" | \"landing\" | \"fill\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\""
+      },
+      "docs": "the measure of the SectionFrame; xs to 3xl: a centred column of that width",
+      "default": "default"
+    }
+  ],
+  "children": true,
+  "recipes": {
+    "sectionColumn": "section-column"
+  },
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Stack",
+      "props": {
+        "Gap": "6",
+        "Align": "stretch",
+        "Class": {
+          "op": "recipe",
+          "args": [
+            "sectionColumn",
+            "measure",
+            {
+              "$": "measure"
+            }
+          ]
+        }
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "measure.default",
+      "props": {
+        "measure": "default"
+      }
+    },
+    {
+      "id": "measure.landing",
+      "props": {
+        "measure": "landing"
+      }
+    },
+    {
+      "id": "measure.fill",
+      "props": {
+        "measure": "fill"
+      }
+    },
+    {
+      "id": "measure.xs",
+      "props": {
+        "measure": "xs"
+      }
+    },
+    {
+      "id": "measure.sm",
+      "props": {
+        "measure": "sm"
+      }
+    },
+    {
+      "id": "measure.md",
+      "props": {
+        "measure": "md"
+      }
+    },
+    {
+      "id": "measure.lg",
+      "props": {
+        "measure": "lg"
+      }
+    },
+    {
+      "id": "measure.xl",
+      "props": {
+        "measure": "xl"
+      }
+    },
+    {
+      "id": "measure.2xl",
+      "props": {
+        "measure": "2xl"
+      }
+    },
+    {
+      "id": "measure.3xl",
+      "props": {
+        "measure": "3xl"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/section-frame.json b/xgen/specs/patterns/section-frame.json
new file mode 100644
index 0000000..fd912eb
--- /dev/null
+++ b/xgen/specs/patterns/section-frame.json
@@ -0,0 +1,703 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.section-frame",
+  "name": "SectionFrame",
+  "docs": "A page section: the landmark named by its heading, the heading (h1 or h2), an optional lead, the body (`children`) and optional media. `layout` stacks everything or puts the media beside the text; `boxed` puts the body in a card. Axes: layout, media side, tone, density, align.",
+  "records": {
+    "SectionHeading": [
+      {
+        "name": "level",
+        "type": "1 | 2",
+        "optional": true,
+        "docs": "heading level",
+        "default": 2
+      },
+      {
+        "name": "scale",
+        "type": "\"default\" | \"display\"",
+        "optional": true,
+        "docs": "display: an oversized heading",
+        "default": "default"
+      },
+      {
+        "name": "badge",
+        "type": "string",
+        "optional": true,
+        "docs": "a short pill above the heading (e.g. New)"
+      }
+    ],
+    "HeadLink": [
+      {
+        "name": "label",
+        "type": "string",
+        "optional": true,
+        "docs": "text of the link (View all, Browse all); none: no link"
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "optional": true,
+        "docs": "href of the link; none: no link"
+      }
+    ],
+    "SectionMedia": [
+      {
+        "name": "show",
+        "type": "boolean",
+        "optional": true,
+        "docs": "the `aside` slot is shown",
+        "default": false
+      },
+      {
+        "name": "side",
+        "type": "\"end\" | \"start\"",
+        "optional": true,
+        "docs": "side of the media in the split layout",
+        "default": "end"
+      },
+      {
+        "name": "align",
+        "type": "\"center\" | \"start\"",
+        "optional": true,
+        "docs": "split layout: the body and the media centred on each other, or both from the top",
+        "default": "center"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "id",
+      "type": "string",
+      "docs": "ties the heading to the section: the heading id is `<id>-title`",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "docs": "section heading; empty string: no heading",
+      "default": ""
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "docs": "text under the heading"
+    },
+    {
+      "name": "heading",
+      "type": {
+        "record": "SectionHeading"
+      },
+      "docs": "how the heading is drawn: its level, its scale, a badge above it"
+    },
+    {
+      "name": "action",
+      "type": {
+        "record": "HeadLink"
+      },
+      "docs": "optional link opposite the heading"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"stack\" | \"split\""
+      },
+      "docs": "stack: media below the body; split: media beside it",
+      "default": "stack"
+    },
+    {
+      "name": "media",
+      "type": {
+        "record": "SectionMedia"
+      },
+      "docs": "the `aside` slot: shown or not, and its side"
+    },
+    {
+      "name": "boxed",
+      "type": "boolean",
+      "docs": "the body sits in a card",
+      "default": false
+    },
+    {
+      "name": "tone",
+      "type": {
+        "ts": "\"default\" | \"muted\" | \"inverse\""
+      },
+      "docs": "background",
+      "default": "default"
+    },
+    {
+      "name": "density",
+      "type": {
+        "ts": "\"roomy\" | \"default\" | \"compact\" | \"flush\""
+      },
+      "docs": "vertical padding",
+      "default": "default"
+    },
+    {
+      "name": "align",
+      "type": {
+        "ts": "\"start\" | \"center\""
+      },
+      "docs": "text alignment",
+      "default": "start"
+    },
+    {
+      "name": "measure",
+      "type": {
+        "ts": "\"default\" | \"landing\" | \"fill\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\""
+      },
+      "docs": "default: max-w-6xl; landing: the landing column of the preset; fill: full width of parent; xs to 3xl: a narrow body, the heading and the body one column of that width centred in the default container",
+      "default": "default"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "recipes": {
+    "sectionFrame": "section-frame"
+  },
+  "derived": [
+    {
+      "name": "titleId",
+      "value": {
+        "op": "add",
+        "args": [
+          {
+            "$": "id"
+          },
+          "-title"
+        ]
+      }
+    },
+    {
+      "name": "sectionTone",
+      "value": {
+        "op": "cond",
+        "args": [
+          {
+            "$": "boxed"
+          },
+          "default",
+          {
+            "$": "tone"
+          }
+        ]
+      }
+    },
+    {
+      "name": "center",
+      "value": {
+        "op": "eq",
+        "args": [
+          {
+            "$": "align"
+          },
+          "center"
+        ]
+      }
+    }
+  ],
+  "slots": [
+    {
+      "name": "aside",
+      "args": [],
+      "docs": "the media (a MediaFrame)"
+    }
+  ],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "section",
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "sectionFrame",
+                "tone",
+                {
+                  "$": "sectionTone"
+                },
+                "density",
+                {
+                  "$": "density"
+                },
+                "align",
+                {
+                  "$": "align"
+                }
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-labelledby": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "undef",
+              "args": []
+            },
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "ne",
+                  "args": [
+                    {
+                      "$": "title"
+                    },
+                    ""
+                  ]
+                },
+                {
+                  "$": "titleId"
+                },
+                {
+                  "op": "undef",
+                  "args": []
+                }
+              ]
+            }
+          ]
+        },
+        "aria-label": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "landmarkLabel"
+            },
+            {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "title"
+                    },
+                    ""
+                  ]
+                },
+                {
+                  "$": "id"
+                },
+                {
+                  "op": "undef",
+                  "args": []
+                }
+              ]
+            }
+          ]
+        },
+        "data-testid": "section",
+        "data-tone": {
+          "$": "tone"
+        },
+        "data-density": {
+          "$": "density"
+        }
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "measure"
+                    },
+                    "landing"
+                  ]
+                },
+                {
+                  "op": "cn",
+                  "args": [
+                    "mx-auto w-full px-4",
+                    {
+                      "op": "preset",
+                      "args": [
+                        "defaults",
+                        "section.landing"
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "measure"
+                        },
+                        "fill"
+                      ]
+                    },
+                    "w-full",
+                    "mx-auto w-full max-w-6xl px-4"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "data-slot": "container"
+          },
+          "children": [
+            {
+              "organism": "SectionBox",
+              "props": {
+                "boxed": {
+                  "$": "boxed"
+                }
+              },
+              "slots": {
+                "children": {
+                  "args": [],
+                  "do": [
+                    {
+                      "when": {
+                        "op": "eq",
+                        "args": [
+                          {
+                            "$": "layout"
+                          },
+                          "split"
+                        ]
+                      },
+                      "then": [
+                        {
+                          "use": "Grid",
+                          "props": {
+                            "Cols": "1-2",
+                            "Class": {
+                              "op": "cn",
+                              "args": [
+                                "gap-8",
+                                {
+                                  "op": "cond",
+                                  "args": [
+                                    {
+                                      "op": "eq",
+                                      "args": [
+                                        {
+                                          "$": "media.align"
+                                        },
+                                        "start"
+                                      ]
+                                    },
+                                    "items-start",
+                                    "items-center"
+                                  ]
+                                }
+                              ]
+                            }
+                          },
+                          "children": [
+                            {
+                              "when": {
+                                "op": "and",
+                                "args": [
+                                  {
+                                    "$": "media.show"
+                                  },
+                                  {
+                                    "op": "eq",
+                                    "args": [
+                                      {
+                                        "$": "media.side"
+                                      },
+                                      "start"
+                                    ]
+                                  }
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "use": "Box",
+                                  "props": {
+                                    "Class": "w-full"
+                                  },
+                                  "attrs": {
+                                    "data-slot": "media"
+                                  },
+                                  "children": [
+                                    {
+                                      "slot": "aside"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            {
+                              "use": "Stack",
+                              "props": {
+                                "Gap": "6",
+                                "Align": "stretch"
+                              },
+                              "children": [
+                                {
+                                  "organism": "SectionHeader",
+                                  "props": {
+                                    "titleId": {
+                                      "$": "titleId"
+                                    },
+                                    "title": {
+                                      "$": "title"
+                                    },
+                                    "heading": {
+                                      "$": "heading"
+                                    },
+                                    "action": {
+                                      "$": "action"
+                                    },
+                                    "lead": {
+                                      "$": "lead"
+                                    },
+                                    "center": {
+                                      "$": "center"
+                                    }
+                                  }
+                                },
+                                {
+                                  "slot": "children"
+                                }
+                              ]
+                            },
+                            {
+                              "when": {
+                                "op": "and",
+                                "args": [
+                                  {
+                                    "$": "media.show"
+                                  },
+                                  {
+                                    "op": "ne",
+                                    "args": [
+                                      {
+                                        "$": "media.side"
+                                      },
+                                      "start"
+                                    ]
+                                  }
+                                ]
+                              },
+                              "then": [
+                                {
+                                  "use": "Box",
+                                  "props": {
+                                    "Class": "w-full"
+                                  },
+                                  "attrs": {
+                                    "data-slot": "media"
+                                  },
+                                  "children": [
+                                    {
+                                      "slot": "aside"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          ]
+                        }
+                      ],
+                      "else": [
+                        {
+                          "organism": "SectionColumn",
+                          "props": {
+                            "measure": {
+                              "$": "measure"
+                            }
+                          },
+                          "slots": {
+                            "children": {
+                              "args": [],
+                              "do": [
+                                {
+                                  "organism": "SectionHeader",
+                                  "props": {
+                                    "titleId": {
+                                      "$": "titleId"
+                                    },
+                                    "title": {
+                                      "$": "title"
+                                    },
+                                    "heading": {
+                                      "$": "heading"
+                                    },
+                                    "action": {
+                                      "$": "action"
+                                    },
+                                    "lead": {
+                                      "$": "lead"
+                                    },
+                                    "center": {
+                                      "$": "center"
+                                    }
+                                  }
+                                },
+                                {
+                                  "slot": "children"
+                                },
+                                {
+                                  "when": {
+                                    "$": "media.show"
+                                  },
+                                  "then": [
+                                    {
+                                      "use": "Box",
+                                      "props": {
+                                        "Class": "w-full"
+                                      },
+                                      "attrs": {
+                                        "data-slot": "media"
+                                      },
+                                      "children": [
+                                        {
+                                          "slot": "aside"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "frame": true,
+  "examples": [
+    {
+      "id": "tone.default",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "tone": "default"
+      }
+    },
+    {
+      "id": "tone.muted",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "tone": "muted"
+      }
+    },
+    {
+      "id": "tone.inverse",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "tone": "inverse"
+      }
+    },
+    {
+      "id": "density.roomy",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "density": "roomy"
+      }
+    },
+    {
+      "id": "density.default",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "density": "default"
+      }
+    },
+    {
+      "id": "density.compact",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "density": "compact"
+      }
+    },
+    {
+      "id": "density.flush",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "density": "flush"
+      }
+    },
+    {
+      "id": "align.start",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "align": "start"
+      }
+    },
+    {
+      "id": "align.center",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "align": "center"
+      }
+    },
+    {
+      "id": "measure.xs",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "measure": "xs"
+      }
+    },
+    {
+      "id": "measure.md",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "measure": "md"
+      }
+    },
+    {
+      "id": "measure.2xl",
+      "props": {
+        "id": "frame",
+        "title": "Title",
+        "measure": "2xl"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/section-head.json b/xgen/specs/patterns/section-head.json
new file mode 100644
index 0000000..88516b4
--- /dev/null
+++ b/xgen/specs/patterns/section-head.json
@@ -0,0 +1,224 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.section-head",
+  "name": "SectionHead",
+  "docs": "A sidebar section heading with optional right actions. Set `expanded` and it becomes a disclosure button (aria-expanded, the toggle event).",
+  "records": {},
+  "props": [
+    {
+      "name": "size",
+      "type": {
+        "ts": "\"default\" | \"lg\""
+      },
+      "docs": "row height",
+      "default": "default"
+    },
+    {
+      "name": "expanded",
+      "type": "boolean",
+      "docs": "set: the head is a disclosure button"
+    },
+    {
+      "name": "controls",
+      "type": "string",
+      "docs": "id of the region the button opens"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "recipes": {
+    "sectionHead": "section-head"
+  },
+  "derived": [
+    {
+      "name": "cls",
+      "value": {
+        "op": "cn",
+        "args": [
+          {
+            "op": "recipe",
+            "args": [
+              "sectionHead",
+              "size",
+              {
+                "$": "size"
+              }
+            ]
+          },
+          "rounded text-foreground in-data-[nav=collapsed]:hidden",
+          {
+            "$": "className"
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [
+    {
+      "name": "right",
+      "args": [],
+      "docs": "right-hand actions"
+    }
+  ],
+  "events": [
+    {
+      "name": "toggle",
+      "args": [],
+      "docs": "the disclosure button was pressed"
+    }
+  ],
+  "view": [
+    {
+      "when": {
+        "op": "has",
+        "args": [
+          {
+            "$": "expanded"
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "ButtonPlain",
+          "props": {
+            "Type": "button",
+            "Class": {
+              "op": "cn",
+              "args": [
+                {
+                  "$": "cls"
+                },
+                "w-full text-left"
+              ]
+            }
+          },
+          "attrs": {
+            "aria-expanded": {
+              "$": "expanded"
+            },
+            "aria-controls": {
+              "$": "controls"
+            },
+            "data-slot": "section-head",
+            "data-expanded": {
+              "$": "expanded"
+            }
+          },
+          "on": {
+            "click": {
+              "call": "emit.toggle",
+              "args": []
+            }
+          },
+          "children": [
+            {
+              "use": "Inline",
+              "attrs": {
+                "data-slot": "section-head-title"
+              },
+              "children": [
+                {
+                  "slot": "children"
+                }
+              ]
+            },
+            {
+              "when": {
+                "$": "right"
+              },
+              "then": [
+                {
+                  "use": "Inline",
+                  "props": {
+                    "Class": "flex items-center gap-2"
+                  },
+                  "attrs": {
+                    "data-slot": "section-head-right"
+                  },
+                  "children": [
+                    {
+                      "slot": "right"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "else": [
+        {
+          "use": "Box",
+          "props": {
+            "Class": {
+              "$": "cls"
+            }
+          },
+          "attrs": {
+            "data-slot": "section-head"
+          },
+          "children": [
+            {
+              "use": "Inline",
+              "attrs": {
+                "data-slot": "section-head-title"
+              },
+              "children": [
+                {
+                  "slot": "children"
+                }
+              ]
+            },
+            {
+              "when": {
+                "$": "right"
+              },
+              "then": [
+                {
+                  "use": "Inline",
+                  "props": {
+                    "Class": "flex items-center gap-2"
+                  },
+                  "attrs": {
+                    "data-slot": "section-head-right"
+                  },
+                  "children": [
+                    {
+                      "slot": "right"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "size.default",
+      "props": {
+        "size": "default"
+      }
+    },
+    {
+      "id": "size.lg",
+      "props": {
+        "size": "lg"
+      }
+    },
+    {
+      "id": "disclosure",
+      "props": {
+        "expanded": true,
+        "controls": "section-body"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/section-header.json b/xgen/specs/patterns/section-header.json
new file mode 100644
index 0000000..65946bc
--- /dev/null
+++ b/xgen/specs/patterns/section-header.json
@@ -0,0 +1,464 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.section-header",
+  "name": "SectionHeader",
+  "docs": "The head of a section: an optional badge, the heading (h1 or h2) with an optional link opposite it, and an optional lead. No wrapper: its parts are children of the section stack.",
+  "records": {},
+  "props": [
+    {
+      "name": "titleId",
+      "type": "string",
+      "docs": "id of the heading (the section is labelled by it)",
+      "required": true
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "docs": "heading; empty string: no heading",
+      "default": ""
+    },
+    {
+      "name": "heading",
+      "type": {
+        "ts": "SectionHeading"
+      },
+      "docs": "how the heading is drawn: its level (2), its scale, a badge above it"
+    },
+    {
+      "name": "action",
+      "type": {
+        "ts": "HeadLink"
+      },
+      "docs": "optional link opposite the heading (View all)"
+    },
+    {
+      "name": "lead",
+      "type": "string",
+      "docs": "text under the heading"
+    },
+    {
+      "name": "center",
+      "type": "boolean",
+      "docs": "centered text",
+      "default": false
+    }
+  ],
+  "derived": [
+    {
+      "name": "level",
+      "value": {
+        "op": "coalesce",
+        "args": [
+          {
+            "$": "heading.level"
+          },
+          2
+        ]
+      }
+    },
+    {
+      "name": "scale",
+      "value": {
+        "op": "coalesce",
+        "args": [
+          {
+            "$": "heading.scale"
+          },
+          "default"
+        ]
+      }
+    },
+    {
+      "name": "hasAction",
+      "value": {
+        "op": "and",
+        "args": [
+          {
+            "$": "action.label"
+          },
+          {
+            "$": "action.href"
+          }
+        ]
+      }
+    }
+  ],
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "when": {
+        "$": "heading.badge"
+      },
+      "then": [
+        {
+          "use": "Badge",
+          "props": {
+            "Variant": "outline",
+            "Size": "lg",
+            "Class": {
+              "op": "cond",
+              "args": [
+                {
+                  "$": "center"
+                },
+                "mx-auto w-fit",
+                "w-fit"
+              ]
+            }
+          },
+          "attrs": {
+            "data-testid": "section-badge"
+          },
+          "children": [
+            {
+              "text": {
+                "$": "heading.badge"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "ne",
+            "args": [
+              {
+                "$": "title"
+              },
+              ""
+            ]
+          },
+          {
+            "$": "hasAction"
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "center",
+            "Justify": "between",
+            "Class": "w-full flex-wrap"
+          },
+          "children": [
+            {
+              "use": "Title",
+              "props": {
+                "As": {
+                  "$": "level"
+                },
+                "Size": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "level"
+                        },
+                        1
+                      ]
+                    },
+                    "5xl",
+                    "xl"
+                  ]
+                },
+                "Weight": "semibold",
+                "Class": {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "scale"
+                        },
+                        "display"
+                      ]
+                    },
+                    "text-6xl tracking-tight md:text-8xl",
+                    {
+                      "op": "cond",
+                      "args": [
+                        {
+                          "op": "eq",
+                          "args": [
+                            {
+                              "$": "level"
+                            },
+                            1
+                          ]
+                        },
+                        "leading-tight",
+                        "leading-7"
+                      ]
+                    }
+                  ]
+                }
+              },
+              "attrs": {
+                "id": {
+                  "$": "titleId"
+                }
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "title"
+                  }
+                }
+              ]
+            },
+            {
+              "use": "Link",
+              "props": {
+                "Href": {
+                  "$": "action.href"
+                },
+                "Variant": "default",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    {
+                      "op": "preset",
+                      "args": [
+                        "defaults",
+                        "text.tiny"
+                      ]
+                    },
+                    "shrink-0 font-medium leading-5"
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "section-action"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "action.label"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "ne",
+            "args": [
+              {
+                "$": "title"
+              },
+              ""
+            ]
+          },
+          {
+            "op": "not",
+            "args": [
+              {
+                "$": "hasAction"
+              }
+            ]
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Title",
+          "props": {
+            "As": {
+              "$": "level"
+            },
+            "Size": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "level"
+                    },
+                    1
+                  ]
+                },
+                "5xl",
+                "xl"
+              ]
+            },
+            "Weight": "semibold",
+            "Class": {
+              "op": "cond",
+              "args": [
+                {
+                  "op": "eq",
+                  "args": [
+                    {
+                      "$": "scale"
+                    },
+                    "display"
+                  ]
+                },
+                "text-6xl tracking-tight md:text-8xl",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "op": "eq",
+                      "args": [
+                        {
+                          "$": "level"
+                        },
+                        1
+                      ]
+                    },
+                    "leading-tight",
+                    "leading-7"
+                  ]
+                }
+              ]
+            }
+          },
+          "attrs": {
+            "id": {
+              "$": "titleId"
+            }
+          },
+          "children": [
+            {
+              "text": {
+                "$": "title"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "op": "and",
+        "args": [
+          {
+            "op": "eq",
+            "args": [
+              {
+                "$": "title"
+              },
+              ""
+            ]
+          },
+          {
+            "$": "hasAction"
+          }
+        ]
+      },
+      "then": [
+        {
+          "use": "Group",
+          "props": {
+            "Gap": "4",
+            "Align": "center",
+            "Justify": "end",
+            "Class": "w-full"
+          },
+          "children": [
+            {
+              "use": "Link",
+              "props": {
+                "Href": {
+                  "$": "action.href"
+                },
+                "Variant": "default",
+                "Class": {
+                  "op": "cn",
+                  "args": [
+                    {
+                      "op": "preset",
+                      "args": [
+                        "defaults",
+                        "text.tiny"
+                      ]
+                    },
+                    "shrink-0 font-medium leading-5"
+                  ]
+                }
+              },
+              "attrs": {
+                "data-testid": "section-action"
+              },
+              "children": [
+                {
+                  "text": {
+                    "$": "action.label"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "when": {
+        "$": "lead"
+      },
+      "then": [
+        {
+          "use": "Text",
+          "props": {
+            "Size": "base",
+            "Class": {
+              "op": "cn",
+              "args": [
+                "max-w-2xl text-muted-foreground",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "center"
+                    },
+                    "mx-auto",
+                    ""
+                  ]
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "text": {
+                "$": "lead"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "typeImports": [
+    {
+      "from": "SectionFrame",
+      "names": [
+        "SectionHeading",
+        "HeadLink"
+      ]
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/select-menu.json b/xgen/specs/patterns/select-menu.json
new file mode 100644
index 0000000..be7dfd5
--- /dev/null
+++ b/xgen/specs/patterns/select-menu.json
@@ -0,0 +1,73 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.select-menu",
+  "name": "SelectMenu",
+  "docs": "A custom select: a button that opens a listbox of options.",
+  "records": {
+    "SelectOption": [
+      {
+        "name": "value",
+        "type": "string"
+      },
+      {
+        "name": "label",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "options",
+      "type": {
+        "ts": "SelectOption[]"
+      },
+      "required": true
+    },
+    {
+      "name": "value",
+      "type": "string"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "docs": "form field name"
+    },
+    {
+      "name": "width",
+      "type": {
+        "ts": "\"auto\" | \"full\""
+      }
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "change",
+      "args": [
+        {
+          "name": "value",
+          "type": "string"
+        }
+      ],
+      "docs": "an option was chosen"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "a listbox with keyboard selection, type-ahead and a hidden form value: state and focus handling (moveFocus and dismissable of the utils)"
+    },
+    "react": {
+      "portable": false,
+      "reason": "a listbox with keyboard selection, type-ahead and a hidden form value: state and focus handling (moveFocus and dismissable of the utils)"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/sidebar-panel.json b/xgen/specs/patterns/sidebar-panel.json
new file mode 100644
index 0000000..19e1bba
--- /dev/null
+++ b/xgen/specs/patterns/sidebar-panel.json
@@ -0,0 +1,94 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.sidebar-panel",
+  "name": "SidebarPanel",
+  "docs": "The app sidebar panel: width, padding and gap per kit sidebar type. Colours come from the middle layer.",
+  "records": {},
+  "props": [
+    {
+      "name": "variant",
+      "type": {
+        "ts": "\"chat\" | \"creator\""
+      },
+      "docs": "sidebar type"
+    },
+    {
+      "name": "landmarkLabel",
+      "type": "string",
+      "docs": "accessible name of the landmark of this component when the page shows it more than once (a variant); replaces the heading name of the root landmark, follows the name of a nested one"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "recipes": {
+    "sidebarPanel": "sidebar-panel"
+  },
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "aside",
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "sidebarPanel",
+                "variant",
+                {
+                  "$": "variant"
+                }
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "data-slot": "sidebar-panel",
+        "data-variant": {
+          "op": "coalesce",
+          "args": [
+            {
+              "$": "variant"
+            },
+            "chat"
+          ]
+        },
+        "aria-label": {
+          "$": "landmarkLabel"
+        }
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "frame": true,
+  "examples": [
+    {
+      "id": "variant.chat",
+      "props": {
+        "variant": "chat"
+      }
+    },
+    {
+      "id": "variant.creator",
+      "props": {
+        "variant": "creator"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/smartbox.json b/xgen/specs/patterns/smartbox.json
new file mode 100644
index 0000000..85869c0
--- /dev/null
+++ b/xgen/specs/patterns/smartbox.json
@@ -0,0 +1,108 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.smartbox",
+  "name": "Smartbox",
+  "docs": "A browser-like address bar: back, forward, the address and reload.",
+  "records": {
+    "SmartboxLabels": [
+      {
+        "name": "group",
+        "type": "string"
+      },
+      {
+        "name": "back",
+        "type": "string"
+      },
+      {
+        "name": "forward",
+        "type": "string"
+      },
+      {
+        "name": "address",
+        "type": "string"
+      },
+      {
+        "name": "reload",
+        "type": "string"
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "url",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "labels",
+      "type": {
+        "record": "SmartboxLabels"
+      },
+      "required": true
+    },
+    {
+      "name": "width",
+      "type": {
+        "ts": "\"400\" | \"auto\""
+      },
+      "docs": "frame width",
+      "default": "auto"
+    }
+  ],
+  "className": true,
+  "recipes": {
+    "smartbox": "smartbox"
+  },
+  "slots": [
+    {
+      "name": "site",
+      "args": [],
+      "docs": "site icon or title"
+    }
+  ],
+  "events": [
+    {
+      "name": "navigate",
+      "args": [
+        {
+          "name": "url",
+          "type": "string"
+        }
+      ],
+      "docs": "an address was entered"
+    },
+    {
+      "name": "reload",
+      "args": [],
+      "docs": "reload was pressed"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "an address input with navigation history; the history and the key handling are application logic behind the navigate and reload events"
+    },
+    "react": {
+      "portable": false,
+      "reason": "an address input with navigation history; the history and the key handling are application logic behind the navigate and reload events"
+    }
+  },
+  "examples": [
+    {
+      "id": "width.400",
+      "props": {
+        "url": "https://example.com",
+        "width": "400"
+      }
+    },
+    {
+      "id": "width.auto",
+      "props": {
+        "url": "https://example.com",
+        "width": "auto"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/sortable-list.json b/xgen/specs/patterns/sortable-list.json
new file mode 100644
index 0000000..54c7f17
--- /dev/null
+++ b/xgen/specs/patterns/sortable-list.json
@@ -0,0 +1,56 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.sortable-list",
+  "name": "SortableList",
+  "docs": "Items that can be dragged into a new order or into another list (the cards of a board). Keyboard users move an item with the arrow keys; the new place is reported, nothing is stored here.",
+  "records": {},
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name of the list",
+      "required": true
+    },
+    {
+      "name": "group",
+      "type": "string",
+      "docs": "lists with the same group accept each other's items",
+      "required": true
+    }
+  ],
+  "className": true,
+  "children": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "move",
+      "args": [
+        {
+          "name": "id",
+          "type": "string"
+        },
+        {
+          "name": "to",
+          "type": "string"
+        },
+        {
+          "name": "index",
+          "type": "number"
+        }
+      ],
+      "docs": "an item was dropped"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "drag and drop with pointer capture and a keyboard alternative; the order is kept by the page"
+    },
+    "react": {
+      "portable": false,
+      "reason": "drag and drop with pointer capture and a keyboard alternative; the order is kept by the page"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/switcher-item.json b/xgen/specs/patterns/switcher-item.json
new file mode 100644
index 0000000..d5328a7
--- /dev/null
+++ b/xgen/specs/patterns/switcher-item.json
@@ -0,0 +1,166 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.switcher-item",
+  "name": "SwitcherItem",
+  "docs": "One item of a Switcher (default or active). Pass the same size and layout as the Switcher.",
+  "records": {},
+  "props": [
+    {
+      "name": "active",
+      "type": "boolean",
+      "docs": "the selected item",
+      "default": false
+    },
+    {
+      "name": "size",
+      "type": {
+        "ts": "\"sm\" | \"default\" | \"lg\""
+      },
+      "docs": "height",
+      "default": "default"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"text\" | \"icon\""
+      },
+      "docs": "text or icon",
+      "default": "text"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "recipes": {
+    "switcherItem": "switcher-item"
+  },
+  "slots": [],
+  "events": [
+    {
+      "name": "click",
+      "args": [],
+      "docs": "the item was pressed"
+    }
+  ],
+  "view": [
+    {
+      "use": "ButtonPlain",
+      "props": {
+        "Type": "button",
+        "Role": "tab",
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "switcherItem",
+                "size",
+                {
+                  "$": "size"
+                },
+                "layout",
+                {
+                  "$": "layout"
+                },
+                "state",
+                {
+                  "op": "cond",
+                  "args": [
+                    {
+                      "$": "active"
+                    },
+                    "active",
+                    "default"
+                  ]
+                }
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "aria-selected": {
+          "$": "active"
+        },
+        "tabindex": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "active"
+            },
+            0,
+            -1
+          ]
+        },
+        "data-slot": "switcher-item",
+        "data-state": {
+          "op": "cond",
+          "args": [
+            {
+              "$": "active"
+            },
+            "active",
+            "default"
+          ]
+        }
+      },
+      "on": {
+        "click": {
+          "call": "emit.click",
+          "args": []
+        }
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "size.sm",
+      "props": {
+        "size": "sm"
+      }
+    },
+    {
+      "id": "size.default",
+      "props": {
+        "size": "default"
+      }
+    },
+    {
+      "id": "size.lg",
+      "props": {
+        "size": "lg"
+      }
+    },
+    {
+      "id": "layout.text",
+      "props": {
+        "layout": "text"
+      }
+    },
+    {
+      "id": "layout.icon",
+      "props": {
+        "layout": "icon"
+      }
+    },
+    {
+      "id": "state.active",
+      "props": {
+        "active": true
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/switcher.json b/xgen/specs/patterns/switcher.json
new file mode 100644
index 0000000..093b83c
--- /dev/null
+++ b/xgen/specs/patterns/switcher.json
@@ -0,0 +1,115 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.switcher",
+  "name": "Switcher",
+  "docs": "A segmented switcher: a tab list whose items (SwitcherItem) share size and layout. Canary handed these down through context; here each item takes the same two props. Arrow keys: attach `moveFocus` to the keydown (horizontal, activate).",
+  "records": {},
+  "props": [
+    {
+      "name": "size",
+      "type": {
+        "ts": "\"sm\" | \"default\" | \"lg\""
+      },
+      "docs": "height",
+      "default": "default"
+    },
+    {
+      "name": "layout",
+      "type": {
+        "ts": "\"text\" | \"icon\""
+      },
+      "docs": "text or icon items",
+      "default": "text"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "docs": "accessible name"
+    }
+  ],
+  "className": true,
+  "children": true,
+  "recipes": {
+    "switcher": "switcher"
+  },
+  "slots": [],
+  "events": [],
+  "view": [
+    {
+      "use": "Box",
+      "props": {
+        "Class": {
+          "op": "cn",
+          "args": [
+            {
+              "op": "recipe",
+              "args": [
+                "switcher",
+                "size",
+                {
+                  "$": "size"
+                },
+                "layout",
+                {
+                  "$": "layout"
+                }
+              ]
+            },
+            {
+              "$": "className"
+            }
+          ]
+        }
+      },
+      "attrs": {
+        "role": "tablist",
+        "aria-label": {
+          "$": "label"
+        },
+        "data-slot": "switcher"
+      },
+      "children": [
+        {
+          "slot": "children"
+        }
+      ]
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "examples": [
+    {
+      "id": "size.sm",
+      "props": {
+        "size": "sm"
+      }
+    },
+    {
+      "id": "size.default",
+      "props": {
+        "size": "default"
+      }
+    },
+    {
+      "id": "size.lg",
+      "props": {
+        "size": "lg"
+      }
+    },
+    {
+      "id": "layout.text",
+      "props": {
+        "layout": "text"
+      }
+    },
+    {
+      "id": "layout.icon",
+      "props": {
+        "layout": "icon"
+      }
+    }
+  ]
+}
diff --git a/xgen/specs/patterns/toaster.json b/xgen/specs/patterns/toaster.json
new file mode 100644
index 0000000..204b0b5
--- /dev/null
+++ b/xgen/specs/patterns/toaster.json
@@ -0,0 +1,68 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.toaster",
+  "name": "Toaster",
+  "docs": "The stack of toasts. Any code pushes a toast (tone, title, text); the list shows the last four and each closes itself.",
+  "records": {
+    "ToastItem": [
+      {
+        "name": "id",
+        "type": "number"
+      },
+      {
+        "name": "tone",
+        "type": "string"
+      },
+      {
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "name": "text",
+        "type": "string",
+        "optional": true
+      }
+    ]
+  },
+  "props": [
+    {
+      "name": "closeLabel",
+      "type": "string",
+      "required": true
+    },
+    {
+      "name": "toasts",
+      "type": {
+        "ts": "ToastItem[]"
+      },
+      "docs": "the queue; tone is success, error or info",
+      "required": true
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "dismiss",
+      "args": [
+        {
+          "name": "id",
+          "type": "number"
+        }
+      ],
+      "docs": "a toast was closed"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "a queue with timers (auto-close after 5 or 8 seconds) is shared state: a store in the app, here only the shape of a toast and the close label are fixed"
+    },
+    "react": {
+      "portable": false,
+      "reason": "a queue with timers (auto-close after 5 or 8 seconds) is shared state: a store in the app, here only the shape of a toast and the close label are fixed"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/typing-text.json b/xgen/specs/patterns/typing-text.json
new file mode 100644
index 0000000..49a2ec8
--- /dev/null
+++ b/xgen/specs/patterns/typing-text.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.typing-text",
+  "name": "TypingText",
+  "docs": "A line typed one character at a time, then erased, then the next line. Assistive technology and a reduced-motion preference get the first line, whole.",
+  "records": {},
+  "props": [
+    {
+      "name": "lines",
+      "type": {
+        "ts": "string[]"
+      },
+      "docs": "the lines in turn",
+      "required": true
+    },
+    {
+      "name": "speed",
+      "type": "number",
+      "docs": "milliseconds per character",
+      "default": 60
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    },
+    "react": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    }
+  }
+}
diff --git a/xgen/specs/patterns/video-embed.json b/xgen/specs/patterns/video-embed.json
new file mode 100644
index 0000000..5b019f4
--- /dev/null
+++ b/xgen/specs/patterns/video-embed.json
@@ -0,0 +1,66 @@
+{
+  "$schema": "../../schema/schemas/organism.schema.json",
+  "specVersion": 1,
+  "id": "pattern.video-embed",
+  "name": "VideoEmbed",
+  "docs": "A video in a fixed ratio with a poster, controls and, as a backdrop, a muted loop behind the content. Playing starts only on request; a backdrop video stops under a reduced-motion preference and shows the poster.",
+  "records": {},
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "docs": "accessible name of the player",
+      "required": true
+    },
+    {
+      "name": "poster",
+      "type": "string",
+      "docs": "address of the poster picture",
+      "required": true
+    },
+    {
+      "name": "src",
+      "type": "string",
+      "docs": "address of the video"
+    },
+    {
+      "name": "ratio",
+      "type": {
+        "ts": "\"16/9\" | \"4/3\" | \"1/1\""
+      },
+      "docs": "frame ratio",
+      "default": "16/9"
+    },
+    {
+      "name": "backdrop",
+      "type": "boolean",
+      "docs": "muted, looping, without controls, behind the content",
+      "default": false
+    }
+  ],
+  "className": true,
+  "slots": [],
+  "events": [
+    {
+      "name": "play",
+      "args": [],
+      "docs": "playing started"
+    },
+    {
+      "name": "pause",
+      "args": [],
+      "docs": "playing stopped"
+    }
+  ],
+  "view": [],
+  "portable": {
+    "svelte": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    },
+    "react": {
+      "portable": false,
+      "reason": "motion needs timers, animation frames or media APIs and a reduced-motion rule; it is written by the programmer behind this contract"
+    }
+  }
+}
diff --git a/xgen/specs/presets/defaults.json b/xgen/specs/presets/defaults.json
new file mode 100644
index 0000000..253f079
--- /dev/null
+++ b/xgen/specs/presets/defaults.json
@@ -0,0 +1,81 @@
+{
+  "specVersion": 1,
+  "id": "preset.defaults",
+  "name": "defaults",
+  "docs": "Default layout preset: the sizes of the landing blocks as Tailwind classes.\nBlocks combine these with token classes; swap the preset to resize every block at once.",
+  "source": "ui8kit default sizes (Tailwind scale, no arbitrary values)",
+  "notes": {
+    "text": "small type steps for chips, badges and links",
+    "hero.band": "the inverse band: tall section, large bottom radius",
+    "hero.title": "display title",
+    "hero.titleWeights": "one font-weight class per title word",
+    "hero.composer": "the prompt box",
+    "logos.row": "one centered row of logo slots",
+    "logos.glyph": "the Lucide glyph inside a slot: half the slot"
+  },
+  "values": {
+    "text": {
+      "tiny": "text-xs",
+      "small": "text-sm"
+    },
+    "hero": {
+      "band": "min-h-160 rounded",
+      "container": "max-w-7xl",
+      "head": "gap-12",
+      "badge": "w-48",
+      "title": "text-5xl leading-tight",
+      "titleWeights": [
+        "font-normal",
+        "font-semibold",
+        "font-normal",
+        "font-semibold"
+      ],
+      "column": "max-w-xl gap-16",
+      "composer": "h-40 max-w-xl rounded",
+      "attach": "w-24",
+      "promptLine": "h-10",
+      "model": "w-24"
+    },
+    "section": {
+      "landing": "max-w-6xl"
+    },
+    "media": {
+      "rounded": "rounded"
+    },
+    "templates": {
+      "card": "h-60 w-64",
+      "image": "h-40 w-58 rounded",
+      "footer": "h-12 min-h-12"
+    },
+    "stats": {
+      "column": "min-h-28",
+      "figure": "h-12 text-4xl leading-12 md:h-18 md:text-6xl md:leading-18",
+      "panel": "gap-24 rounded py-20"
+    },
+    "features": {
+      "cells": "rounded"
+    },
+    "news": {
+      "card": "h-56 w-64",
+      "cover": "h-40 w-64 rounded",
+      "title": "top-16",
+      "strip": "h-12 min-h-12"
+    },
+    "cta": {
+      "panel": "rounded py-20",
+      "title": "max-w-md",
+      "text": "max-w-2xl",
+      "button": "w-40"
+    },
+    "logos": {
+      "row": "h-28 max-w-4xl gap-12 pb-8",
+      "slot": "size-20",
+      "glyph": 40
+    },
+    "footer": {
+      "card": "h-72 gap-12 rounded",
+      "brand": "w-48",
+      "groups": "gap-x-16"
+    }
+  }
+}
diff --git a/xgen/specs/recipes/avatar.variants.json b/xgen/specs/recipes/avatar.variants.json
new file mode 100644
index 0000000..c2a08a1
--- /dev/null
+++ b/xgen/specs/recipes/avatar.variants.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.avatar",
+  "base": "relative inline-flex shrink-0 overflow-hidden bg-muted rounded-full",
+  "byKey": {
+    "size": {
+      "xs": "size-6",
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12",
+      "xl": "size-16"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/recipes/badge-square.variants.json b/xgen/specs/recipes/badge-square.variants.json
new file mode 100644
index 0000000..1fd07f4
--- /dev/null
+++ b/xgen/specs/recipes/badge-square.variants.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.badge-square",
+  "base": "inline-flex shrink-0 items-center justify-center bg-card text-xs font-medium whitespace-nowrap text-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-4 min-w-4 px-1",
+      "default": "h-5 px-2"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/recipes/dropdown-menu.variants.json b/xgen/specs/recipes/dropdown-menu.variants.json
new file mode 100644
index 0000000..2576cdb
--- /dev/null
+++ b/xgen/specs/recipes/dropdown-menu.variants.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.dropdown-menu",
+  "base": "flex flex-col overflow-hidden bg-card py-2 inset-ring inset-ring-border rounded shadow-md",
+  "byKey": {
+    "width": {
+      "240": "w-60",
+      "auto": ""
+    }
+  },
+  "defaults": {
+    "width": "auto"
+  },
+  "keys": [
+    "width"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/recipes/file-tree-item.variants.json b/xgen/specs/recipes/file-tree-item.variants.json
new file mode 100644
index 0000000..801de71
--- /dev/null
+++ b/xgen/specs/recipes/file-tree-item.variants.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.file-tree-item",
+  "base": "flex h-6 w-full items-center gap-4 text-xs font-bold text-muted-foreground data-[state=selected]:bg-muted",
+  "byKey": {
+    "kind": {
+      "folder": "",
+      "file": "px-8"
+    }
+  },
+  "defaults": {
+    "kind": "file"
+  },
+  "keys": [
+    "kind"
+  ]
+}
diff --git a/xgen/specs/recipes/icon-tab.variants.json b/xgen/specs/recipes/icon-tab.variants.json
new file mode 100644
index 0000000..6f6d384
--- /dev/null
+++ b/xgen/specs/recipes/icon-tab.variants.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.icon-tab",
+  "base": "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground inset-ring inset-ring-transparent [&>svg]:size-4 rounded",
+  "byKey": {
+    "state": {
+      "default": "",
+      "active": "bg-card text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "state": "default"
+  },
+  "keys": [
+    "state"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/recipes/logo-sidebar.variants.json b/xgen/specs/recipes/logo-sidebar.variants.json
new file mode 100644
index 0000000..45ec756
--- /dev/null
+++ b/xgen/specs/recipes/logo-sidebar.variants.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.logo-sidebar",
+  "base": "flex h-8 items-center justify-between",
+  "byKey": {
+    "variant": {
+      "chat": "px-2",
+      "creator": "pr-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/xgen/specs/recipes/media-frame.variants.json b/xgen/specs/recipes/media-frame.variants.json
new file mode 100644
index 0000000..e1d9df4
--- /dev/null
+++ b/xgen/specs/recipes/media-frame.variants.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.media-frame",
+  "base": "relative w-full overflow-hidden bg-muted text-muted-foreground inset-ring inset-ring-border rounded",
+  "byKey": {
+    "ratio": {
+      "16/9": "aspect-video",
+      "4/3": "aspect-4/3",
+      "1/1": "aspect-square",
+      "3/4": "aspect-3/4",
+      "21/9": "aspect-21/9"
+    }
+  },
+  "defaults": {
+    "ratio": "16/9"
+  },
+  "keys": [
+    "ratio"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/recipes/nav-item-content.variants.json b/xgen/specs/recipes/nav-item-content.variants.json
new file mode 100644
index 0000000..09b051f
--- /dev/null
+++ b/xgen/specs/recipes/nav-item-content.variants.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item-content",
+  "base": "flex h-8 min-w-0 flex-1 items-center justify-between px-4 py-2 text-xs font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "px-2",
+      "4": "px-2"
+    },
+    "state": {
+      "default": "",
+      "selected": "bg-background text-foreground inset-ring-border"
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/recipes/nav-item.variants.json b/xgen/specs/recipes/nav-item.variants.json
new file mode 100644
index 0000000..3b6f4ec
--- /dev/null
+++ b/xgen/specs/recipes/nav-item.variants.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.nav-item",
+  "base": "flex w-full items-center p-2 rounded",
+  "byKey": {
+    "level": {
+      "1": "",
+      "2": "",
+      "3": "pr-2 pl-12",
+      "4": "pr-2 pl-20"
+    },
+    "state": {
+      "default": "",
+      "selected": ""
+    }
+  },
+  "defaults": {
+    "level": "1",
+    "state": "default"
+  },
+  "keys": [
+    "level",
+    "state"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/recipes/section-column.variants.json b/xgen/specs/recipes/section-column.variants.json
new file mode 100644
index 0000000..0476058
--- /dev/null
+++ b/xgen/specs/recipes/section-column.variants.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-column",
+  "base": "",
+  "defaults": {
+    "measure": "default"
+  },
+  "keys": [
+    "measure"
+  ],
+  "compound": [],
+  "byKey": {
+    "measure": {
+      "default": "",
+      "landing": "",
+      "fill": "",
+      "xs": "mx-auto w-full max-w-xs",
+      "sm": "mx-auto w-full max-w-sm",
+      "md": "mx-auto w-full max-w-md",
+      "lg": "mx-auto w-full max-w-lg",
+      "xl": "mx-auto w-full max-w-xl",
+      "2xl": "mx-auto w-full max-w-2xl",
+      "3xl": "mx-auto w-full max-w-3xl"
+    }
+  }
+}
diff --git a/xgen/specs/recipes/section-frame.variants.json b/xgen/specs/recipes/section-frame.variants.json
new file mode 100644
index 0000000..e6e15a6
--- /dev/null
+++ b/xgen/specs/recipes/section-frame.variants.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "block.section-frame",
+  "base": "w-full",
+  "byKey": {
+    "tone": {
+      "default": "",
+      "muted": "bg-muted",
+      "inverse": "bg-foreground text-background [&_.text-muted-foreground]:text-background/70"
+    },
+    "density": {
+      "roomy": "py-16",
+      "default": "py-10",
+      "compact": "py-6",
+      "flush": "py-0"
+    },
+    "align": {
+      "start": "",
+      "center": "text-center"
+    }
+  },
+  "defaults": {
+    "tone": "default",
+    "density": "default",
+    "align": "start"
+  },
+  "keys": [
+    "tone",
+    "density",
+    "align"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/recipes/section-head.variants.json b/xgen/specs/recipes/section-head.variants.json
new file mode 100644
index 0000000..f31143c
--- /dev/null
+++ b/xgen/specs/recipes/section-head.variants.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.section-head",
+  "base": "flex items-center justify-between pr-4 pl-4",
+  "byKey": {
+    "size": {
+      "default": "h-8 py-2 text-xs font-semibold",
+      "lg": "h-12 py-2 text-sm font-bold"
+    }
+  },
+  "defaults": {
+    "size": "default"
+  },
+  "keys": [
+    "size"
+  ]
+}
diff --git a/xgen/specs/recipes/sidebar-panel.variants.json b/xgen/specs/recipes/sidebar-panel.variants.json
new file mode 100644
index 0000000..9ff0420
--- /dev/null
+++ b/xgen/specs/recipes/sidebar-panel.variants.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.sidebar-panel",
+  "base": "flex shrink-0 flex-col",
+  "byKey": {
+    "variant": {
+      "chat": "w-68 gap-2 pt-6 pr-4 pb-6 pl-4",
+      "creator": "w-62 justify-between gap-4 p-4"
+    }
+  },
+  "defaults": {
+    "variant": "chat"
+  },
+  "keys": [
+    "variant"
+  ]
+}
diff --git a/xgen/specs/recipes/smartbox.variants.json b/xgen/specs/recipes/smartbox.variants.json
new file mode 100644
index 0000000..62e2938
--- /dev/null
+++ b/xgen/specs/recipes/smartbox.variants.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.smartbox",
+  "base": "flex h-8 min-w-0 shrink items-center justify-between bg-card pr-4 pl-2 text-muted-foreground inset-ring inset-ring-input rounded",
+  "byKey": {
+    "width": {
+      "400": "w-100",
+      "auto": ""
+    }
+  },
+  "defaults": {
+    "width": "auto"
+  },
+  "keys": [
+    "width"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/recipes/switcher-item.variants.json b/xgen/specs/recipes/switcher-item.variants.json
new file mode 100644
index 0000000..dbcdeae
--- /dev/null
+++ b/xgen/specs/recipes/switcher-item.variants.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher-item",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-bold text-muted-foreground inset-ring inset-ring-transparent rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-6 gap-1 px-3 text-xs",
+      "default": "h-8 gap-2 px-4 text-sm",
+      "lg": "h-10 gap-2 px-5 text-sm"
+    },
+    "state": {
+      "default": "",
+      "active": "bg-background text-foreground inset-ring-border"
+    },
+    "layout": {
+      "text": "",
+      "icon": "[&>svg]:size-4"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "state": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "state",
+    "layout"
+  ],
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "w-6 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "w-8 px-0"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "w-10 px-0"
+    }
+  ]
+}
diff --git a/xgen/specs/recipes/switcher.variants.json b/xgen/specs/recipes/switcher.variants.json
new file mode 100644
index 0000000..49630db
--- /dev/null
+++ b/xgen/specs/recipes/switcher.variants.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "../../schema/schemas/variants.schema.json",
+  "id": "one.switcher",
+  "base": "inline-flex max-w-full items-center gap-1 overflow-x-auto bg-muted inset-ring inset-ring-border rounded",
+  "byKey": {
+    "size": {
+      "sm": "h-8 p-1",
+      "default": "h-10 p-1",
+      "lg": "h-12 p-1"
+    },
+    "layout": {
+      "text": "",
+      "icon": "gap-0"
+    }
+  },
+  "defaults": {
+    "size": "default",
+    "layout": "text"
+  },
+  "keys": [
+    "size",
+    "layout"
+  ],
+  "compound": []
+}
diff --git a/xgen/specs/screens/blocks.json b/xgen/specs/screens/blocks.json
new file mode 100644
index 0000000..4b52fcc
--- /dev/null
+++ b/xgen/specs/screens/blocks.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.blocks",
+  "name": "BlocksScreen",
+  "kind": "composed",
+  "docs": "The block gallery: an index of blocks grouped by topic and one page per block with every variant, on the fixtures. Built from the block catalog; nothing is written by hand.",
+  "routes": [],
+  "frame": {
+    "before": [],
+    "after": []
+  },
+  "areas": {},
+  "gallery": true,
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/catalog.json b/xgen/specs/screens/catalog.json
new file mode 100644
index 0000000..5cf9ccd
--- /dev/null
+++ b/xgen/specs/screens/catalog.json
@@ -0,0 +1,1156 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.catalog",
+  "name": "CatalogScreen",
+  "kind": "composed",
+  "docs": "The catalog: the blocks of the kit by section and category (Marketing, Content, Promo, Support, Commerce, App and dashboard), one page per category with every variant of its blocks, and whole pages composed of blocks. Built from the catalog tree and the blocks.",
+  "routes": [],
+  "frame": {
+    "before": [],
+    "after": []
+  },
+  "areas": {},
+  "catalog": {
+    "sections": [
+      {
+        "id": "marketing",
+        "categories": [
+          {
+            "id": "marketing-navigation",
+            "entries": [
+              {
+                "block": "header"
+              },
+              {
+                "block": "navbar"
+              },
+              {
+                "block": "megamenu"
+              }
+            ]
+          },
+          {
+            "id": "marketing-hero",
+            "entries": [
+              {
+                "block": "hero"
+              }
+            ]
+          },
+          {
+            "id": "marketing-hero-split",
+            "entries": [
+              {
+                "block": "herosplit"
+              }
+            ]
+          },
+          {
+            "id": "marketing-page-head",
+            "entries": [
+              {
+                "block": "pagehead"
+              }
+            ]
+          },
+          {
+            "id": "marketing-page-trail",
+            "entries": [
+              {
+                "block": "pagetrail"
+              }
+            ]
+          },
+          {
+            "id": "marketing-features",
+            "entries": [
+              {
+                "block": "features"
+              },
+              {
+                "block": "iconwall"
+              },
+              {
+                "block": "beforeafter"
+              }
+            ]
+          },
+          {
+            "id": "marketing-features-split",
+            "entries": [
+              {
+                "block": "featuresplit"
+              }
+            ]
+          },
+          {
+            "id": "marketing-feature-cards",
+            "entries": [
+              {
+                "block": "featureshowcase"
+              }
+            ]
+          },
+          {
+            "id": "marketing-media-list",
+            "entries": [
+              {
+                "block": "medialist"
+              }
+            ]
+          },
+          {
+            "id": "marketing-showcases",
+            "entries": [
+              {
+                "block": "bento"
+              },
+              {
+                "block": "featuretabs"
+              },
+              {
+                "block": "accordion"
+              },
+              {
+                "block": "sticky"
+              }
+            ]
+          },
+          {
+            "id": "marketing-how-it-works",
+            "entries": [
+              {
+                "block": "steps"
+              }
+            ]
+          },
+          {
+            "id": "marketing-proof",
+            "entries": [
+              {
+                "block": "logos"
+              },
+              {
+                "block": "proof"
+              },
+              {
+                "block": "videos"
+              }
+            ]
+          },
+          {
+            "id": "marketing-stats",
+            "entries": [
+              {
+                "block": "stats"
+              }
+            ]
+          },
+          {
+            "id": "marketing-testimonials",
+            "entries": [
+              {
+                "block": "testimonials"
+              }
+            ]
+          },
+          {
+            "id": "marketing-testimonials-split",
+            "entries": [
+              {
+                "block": "quotesplit"
+              }
+            ]
+          },
+          {
+            "id": "marketing-pricing",
+            "entries": [
+              {
+                "block": "pricing"
+              },
+              {
+                "block": "plan"
+              }
+            ]
+          },
+          {
+            "id": "marketing-pricing-tools",
+            "entries": [
+              {
+                "block": "compare"
+              },
+              {
+                "block": "credits"
+              },
+              {
+                "block": "usage"
+              }
+            ]
+          },
+          {
+            "id": "marketing-faq",
+            "entries": [
+              {
+                "block": "faq"
+              },
+              {
+                "block": "faqsplit"
+              }
+            ]
+          },
+          {
+            "id": "marketing-cta",
+            "entries": [
+              {
+                "block": "cta"
+              }
+            ]
+          },
+          {
+            "id": "marketing-cta-proof",
+            "entries": [
+              {
+                "block": "ctaproof"
+              }
+            ]
+          },
+          {
+            "id": "marketing-team",
+            "entries": [
+              {
+                "block": "team"
+              }
+            ]
+          },
+          {
+            "id": "marketing-about",
+            "entries": [
+              {
+                "block": "about"
+              },
+              {
+                "block": "aboutme"
+              }
+            ]
+          },
+          {
+            "id": "marketing-portfolio",
+            "entries": [
+              {
+                "block": "projects"
+              }
+            ]
+          },
+          {
+            "id": "marketing-careers",
+            "entries": [
+              {
+                "block": "jobs"
+              }
+            ]
+          },
+          {
+            "id": "marketing-gallery",
+            "entries": [
+              {
+                "block": "photos"
+              },
+              {
+                "block": "templates"
+              }
+            ]
+          },
+          {
+            "id": "marketing-footer",
+            "entries": [
+              {
+                "block": "footer"
+              },
+              {
+                "block": "sitemap"
+              }
+            ]
+          },
+          {
+            "id": "marketing-footer-split",
+            "entries": [
+              {
+                "block": "footersplit"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "content",
+        "categories": [
+          {
+            "id": "content-blog",
+            "entries": [
+              {
+                "block": "posts"
+              }
+            ]
+          },
+          {
+            "id": "content-post-showcase",
+            "entries": [
+              {
+                "block": "postshowcase"
+              }
+            ]
+          },
+          {
+            "id": "content-post-header",
+            "entries": [
+              {
+                "block": "postheader"
+              }
+            ]
+          },
+          {
+            "id": "content-post-header-split",
+            "entries": [
+              {
+                "block": "postsplit"
+              }
+            ]
+          },
+          {
+            "id": "content-article",
+            "entries": [
+              {
+                "block": "article"
+              }
+            ]
+          },
+          {
+            "id": "content-timeline",
+            "entries": [
+              {
+                "block": "timeline"
+              }
+            ]
+          },
+          {
+            "id": "content-story-tabs",
+            "entries": [
+              {
+                "block": "storytabs"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "promo",
+        "categories": [
+          {
+            "id": "promo-banners",
+            "entries": [
+              {
+                "block": "announcement"
+              },
+              {
+                "block": "cookie"
+              }
+            ]
+          },
+          {
+            "id": "promo-newsletter",
+            "entries": [
+              {
+                "block": "newsletter"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "support",
+        "categories": [
+          {
+            "id": "support-contact",
+            "entries": [
+              {
+                "block": "contact"
+              },
+              {
+                "block": "channels"
+              }
+            ]
+          },
+          {
+            "id": "support-states",
+            "entries": [
+              {
+                "block": "errorpage"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "commerce",
+        "categories": [
+          {
+            "id": "commerce-storefront",
+            "entries": [
+              {
+                "block": "hero",
+                "variants": [
+                  "shop"
+                ]
+              },
+              {
+                "block": "storehero"
+              },
+              {
+                "block": "usp"
+              }
+            ]
+          },
+          {
+            "id": "commerce-categories",
+            "entries": [
+              {
+                "block": "categories"
+              }
+            ]
+          },
+          {
+            "id": "commerce-products",
+            "entries": [
+              {
+                "block": "products"
+              }
+            ]
+          },
+          {
+            "id": "commerce-product",
+            "entries": [
+              {
+                "block": "product"
+              },
+              {
+                "block": "productinfo"
+              },
+              {
+                "block": "reviews"
+              }
+            ]
+          },
+          {
+            "id": "commerce-cart",
+            "entries": [
+              {
+                "block": "cart"
+              },
+              {
+                "block": "cartpage"
+              },
+              {
+                "block": "cartdrawer"
+              }
+            ]
+          },
+          {
+            "id": "commerce-checkout",
+            "entries": [
+              {
+                "block": "checkout"
+              },
+              {
+                "block": "summary"
+              },
+              {
+                "block": "stepper",
+                "variants": [
+                  "horizontal"
+                ]
+              }
+            ]
+          },
+          {
+            "id": "commerce-delivery",
+            "entries": [
+              {
+                "block": "delivery"
+              },
+              {
+                "block": "zones"
+              },
+              {
+                "block": "slots"
+              },
+              {
+                "block": "locations"
+              }
+            ]
+          },
+          {
+            "id": "commerce-orders",
+            "entries": [
+              {
+                "block": "orders"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "app",
+        "categories": [
+          {
+            "id": "app-shell",
+            "entries": [
+              {
+                "block": "shell"
+              },
+              {
+                "block": "sidenav"
+              },
+              {
+                "block": "bottomnav"
+              }
+            ]
+          },
+          {
+            "id": "app-dashboard-shells",
+            "entries": [
+              {
+                "block": "dashshell"
+              }
+            ]
+          },
+          {
+            "id": "app-widgets",
+            "entries": [
+              {
+                "block": "metrics"
+              },
+              {
+                "block": "chart"
+              },
+              {
+                "block": "activity"
+              }
+            ]
+          },
+          {
+            "id": "app-boards",
+            "entries": [
+              {
+                "block": "overview"
+              },
+              {
+                "block": "kanban"
+              }
+            ]
+          },
+          {
+            "id": "app-states",
+            "entries": [
+              {
+                "block": "empty"
+              },
+              {
+                "block": "skeleton"
+              }
+            ]
+          },
+          {
+            "id": "app-auth",
+            "entries": [
+              {
+                "block": "auth"
+              },
+              {
+                "block": "wizard"
+              }
+            ]
+          },
+          {
+            "id": "app-auth-pages",
+            "entries": [
+              {
+                "block": "authpage"
+              }
+            ]
+          },
+          {
+            "id": "app-settings",
+            "entries": [
+              {
+                "block": "profile"
+              }
+            ]
+          },
+          {
+            "id": "app-onboarding",
+            "entries": [
+              {
+                "block": "checklist"
+              },
+              {
+                "block": "stepper"
+              }
+            ]
+          },
+          {
+            "id": "app-guidance",
+            "entries": [
+              {
+                "block": "tour"
+              },
+              {
+                "block": "videomodal"
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    "pages": [
+      {
+        "id": "saas-landing",
+        "uses": [
+          {
+            "block": "navbar",
+            "variant": "inline"
+          },
+          {
+            "block": "hero",
+            "variant": "saas",
+            "props": {
+              "level": 1
+            }
+          },
+          {
+            "block": "logos",
+            "variant": "row"
+          },
+          {
+            "block": "features",
+            "variant": "grid"
+          },
+          {
+            "block": "sticky",
+            "variant": "end"
+          },
+          {
+            "block": "stats",
+            "variant": "icons"
+          },
+          {
+            "block": "testimonials",
+            "variant": "grid3"
+          },
+          {
+            "block": "pricing",
+            "variant": "grid"
+          },
+          {
+            "block": "faq",
+            "variant": "list"
+          },
+          {
+            "block": "cta",
+            "variant": "card"
+          },
+          {
+            "block": "sitemap",
+            "variant": "columns"
+          }
+        ]
+      },
+      {
+        "id": "company",
+        "uses": [
+          {
+            "block": "navbar",
+            "variant": "inline"
+          },
+          {
+            "block": "pagehead",
+            "variant": "center",
+            "props": {
+              "title": {
+                "$": "ui.company.pages.companyTitle"
+              },
+              "text": {
+                "$": "ui.company.pages.companyLead"
+              },
+              "cta": ""
+            }
+          },
+          {
+            "block": "about",
+            "variant": "split"
+          },
+          {
+            "block": "timeline",
+            "variant": "split"
+          },
+          {
+            "block": "team",
+            "variant": "cards4"
+          },
+          {
+            "block": "photos",
+            "variant": "mosaic"
+          },
+          {
+            "block": "jobs",
+            "variant": "grouped"
+          },
+          {
+            "block": "cta",
+            "variant": "card"
+          },
+          {
+            "block": "sitemap",
+            "variant": "columns"
+          }
+        ]
+      },
+      {
+        "id": "portfolio",
+        "uses": [
+          {
+            "block": "navbar",
+            "variant": "inline"
+          },
+          {
+            "block": "aboutme",
+            "variant": "facts",
+            "props": {
+              "level": 1
+            }
+          },
+          {
+            "block": "projects",
+            "variant": "cards"
+          },
+          {
+            "block": "photos",
+            "variant": "masonry"
+          },
+          {
+            "block": "testimonials",
+            "variant": "grid3"
+          },
+          {
+            "block": "cta",
+            "variant": "card"
+          },
+          {
+            "block": "sitemap",
+            "variant": "columns"
+          }
+        ]
+      },
+      {
+        "id": "store-home",
+        "uses": [
+          {
+            "block": "announcement",
+            "variant": "shop"
+          },
+          {
+            "block": "navbar",
+            "variant": "search"
+          },
+          {
+            "block": "storehero",
+            "variant": "overlay",
+            "props": {
+              "level": 1
+            }
+          },
+          {
+            "block": "categories",
+            "variant": "tiles"
+          },
+          {
+            "block": "products",
+            "variant": "grid4",
+            "props": {
+              "title": {
+                "$": "ui.commerce.pages.bestsellers"
+              }
+            }
+          },
+          {
+            "block": "products",
+            "variant": "rail",
+            "props": {
+              "id": "deals",
+              "title": {
+                "$": "ui.commerce.rail.title"
+              }
+            }
+          },
+          {
+            "block": "usp",
+            "variant": "cards"
+          },
+          {
+            "block": "cta",
+            "variant": "shop"
+          },
+          {
+            "block": "sitemap",
+            "variant": "columns"
+          }
+        ]
+      },
+      {
+        "id": "store-home-2",
+        "uses": [
+          {
+            "block": "navbar",
+            "variant": "inline"
+          },
+          {
+            "block": "storehero",
+            "variant": "backdrop",
+            "props": {
+              "level": 1
+            }
+          },
+          {
+            "block": "usp",
+            "variant": "strip"
+          },
+          {
+            "block": "products",
+            "variant": "grid3"
+          },
+          {
+            "block": "delivery",
+            "variant": "full"
+          },
+          {
+            "block": "locations",
+            "variant": "map"
+          },
+          {
+            "block": "sitemap",
+            "variant": "columns"
+          }
+        ]
+      },
+      {
+        "id": "store-catalog",
+        "uses": [
+          {
+            "block": "navbar",
+            "variant": "search"
+          },
+          {
+            "block": "pagehead",
+            "variant": "start",
+            "props": {
+              "title": {
+                "$": "ui.commerce.pages.catalogTitle"
+              },
+              "text": {
+                "$": "ui.commerce.pages.catalogLead"
+              },
+              "cta": ""
+            }
+          },
+          {
+            "block": "categories",
+            "variant": "toolbar"
+          },
+          {
+            "block": "products",
+            "variant": "catalog"
+          },
+          {
+            "block": "usp",
+            "variant": "bar"
+          },
+          {
+            "block": "sitemap",
+            "variant": "columns"
+          }
+        ]
+      },
+      {
+        "id": "product-detail",
+        "uses": [
+          {
+            "block": "navbar",
+            "variant": "search"
+          },
+          {
+            "block": "product",
+            "variant": "split"
+          },
+          {
+            "block": "productinfo",
+            "variant": "split"
+          },
+          {
+            "block": "reviews",
+            "variant": "grid"
+          },
+          {
+            "block": "products",
+            "variant": "railCompact",
+            "props": {
+              "title": {
+                "$": "ui.commerce.pages.related"
+              }
+            }
+          },
+          {
+            "block": "sitemap",
+            "variant": "columns"
+          }
+        ]
+      },
+      {
+        "id": "cart",
+        "uses": [
+          {
+            "block": "navbar",
+            "variant": "search"
+          },
+          {
+            "block": "pagehead",
+            "variant": "start",
+            "props": {
+              "title": {
+                "$": "ui.commerce.cartPage.title"
+              },
+              "text": {
+                "$": "ui.commerce.pages.cartLead"
+              },
+              "cta": ""
+            }
+          },
+          {
+            "block": "cartpage",
+            "variant": "split",
+            "props": {
+              "title": {
+                "$": "ui.commerce.cart.caption"
+              }
+            }
+          },
+          {
+            "block": "products",
+            "variant": "railCompact",
+            "props": {
+              "title": {
+                "$": "ui.commerce.pages.related"
+              }
+            }
+          },
+          {
+            "block": "sitemap",
+            "variant": "columns"
+          }
+        ]
+      },
+      {
+        "id": "checkout",
+        "uses": [
+          {
+            "block": "navbar",
+            "variant": "search"
+          },
+          {
+            "block": "pagehead",
+            "variant": "start",
+            "props": {
+              "title": {
+                "$": "ui.commerce.checkout.title"
+              },
+              "text": {
+                "$": "ui.commerce.pages.checkoutLead"
+              },
+              "cta": ""
+            }
+          },
+          {
+            "block": "checkout",
+            "variant": "cards",
+            "props": {
+              "title": ""
+            }
+          },
+          {
+            "block": "sitemap",
+            "variant": "compact"
+          }
+        ]
+      },
+      {
+        "id": "shell-classic",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "classic",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-inset",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "inset",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-rail",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "rail",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-rail-footer",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "railFooter",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-collapsed",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "collapsed",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-two-level",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "twoLevel",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-two-level-full",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "twoLevelFull",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-end",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "end",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-rail-end",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "railEnd",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-top-only",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "topOnly",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-side-only",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "sideOnly",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      },
+      {
+        "id": "shell-collapsed-end",
+        "uses": [
+          {
+            "block": "dashshell",
+            "variant": "collapsedEnd",
+            "props": {
+              "frame": "page",
+              "level": 1
+            }
+          }
+        ]
+      }
+    ]
+  },
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/plans.json b/xgen/specs/screens/plans.json
new file mode 100644
index 0000000..7ec0af5
--- /dev/null
+++ b/xgen/specs/screens/plans.json
@@ -0,0 +1,1399 @@
+{
+  "$schema": "../../schema/schemas/screen.schema.json",
+  "specVersion": 1,
+  "id": "screen.plans",
+  "name": "PlansScreen",
+  "docs": "Collection -> record: a list of plans (search, sort, pager; all state in the URL) and the card of one plan. Data: the Codex fixture `plans`.",
+  "source": {
+    "collection": "plans",
+    "kind": "plan",
+    "record": "Plan",
+    "fields": {
+      "id": "id",
+      "name": "title",
+      "tagline": "metadata.tagline.value",
+      "price": "metadata.price.value",
+      "currency": "metadata.currency.value",
+      "seats": "metadata.seats.value",
+      "storage": "metadata.storage.value",
+      "highlighted": "metadata.highlighted.value",
+      "features": "metadata.features.value",
+      "yearly": "metadata.yearly.value",
+      "status": "metadata.plan_status.value"
+    }
+  },
+  "list": {
+    "columns": [
+      {
+        "id": "name",
+        "label": "plans.col.name",
+        "type": "text",
+        "sortable": true
+      },
+      {
+        "id": "price",
+        "label": "plans.col.price",
+        "type": "money",
+        "sortable": true,
+        "align": "end"
+      },
+      {
+        "id": "seats",
+        "label": "plans.col.seats",
+        "type": "number",
+        "sortable": true,
+        "align": "end"
+      },
+      {
+        "id": "storage",
+        "label": "plans.col.storage",
+        "type": "number",
+        "sortable": true,
+        "align": "end"
+      },
+      {
+        "id": "status",
+        "label": "plans.col.status",
+        "type": "badge"
+      }
+    ],
+    "searchFields": [
+      "name",
+      "tagline"
+    ],
+    "pageSize": 5,
+    "defaultSort": "price:asc"
+  },
+  "state": {
+    "q": "q",
+    "sort": "sort",
+    "page": "page"
+  },
+  "routes": [
+    {
+      "path": "plans",
+      "area": "list"
+    },
+    {
+      "path": "plans/:id",
+      "area": "record"
+    }
+  ],
+  "organisms": [
+    "PricingCard"
+  ],
+  "layout": [
+    {
+      "use": "Block",
+      "props": {
+        "Tag": "main",
+        "ID": "main-content"
+      },
+      "attrs": {
+        "tabindex": -1,
+        "data-testid": "main"
+      },
+      "children": [
+        {
+          "use": "Container",
+          "props": {
+            "Class": "mx-auto w-full max-w-6xl px-4 py-8"
+          },
+          "children": [
+            {
+              "use": "Stack",
+              "props": {
+                "Gap": "6"
+              },
+              "children": [
+                {
+                  "use": "Group",
+                  "props": {
+                    "Gap": "4",
+                    "Align": "center",
+                    "Justify": "between"
+                  },
+                  "children": [
+                    {
+                      "use": "Title",
+                      "props": {
+                        "As": 1,
+                        "Size": "2xl",
+                        "Weight": "bold"
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "ui.app.title"
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      "use": "Button",
+                      "props": {
+                        "Variant": "outline",
+                        "Size": "sm"
+                      },
+                      "attrs": {
+                        "data-testid": "theme-toggle"
+                      },
+                      "on": {
+                        "click": {
+                          "call": "actions.toggleTheme",
+                          "args": []
+                        }
+                      },
+                      "children": [
+                        {
+                          "text": {
+                            "$": "ui.theme.toggle"
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "outlet": true
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "areas": {
+    "list": [
+      {
+        "use": "Stack",
+        "props": {
+          "Gap": "4"
+        },
+        "children": [
+          {
+            "use": "Group",
+            "props": {
+              "Gap": "4",
+              "Align": "center",
+              "Justify": "between",
+              "Class": "flex-wrap"
+            },
+            "children": [
+              {
+                "use": "Input",
+                "props": {
+                  "Type": "search",
+                  "Size": "default",
+                  "Value": {
+                    "$": "view.q"
+                  },
+                  "Placeholder": {
+                    "$": "ui.plans.search"
+                  },
+                  "AriaLabel": {
+                    "$": "ui.plans.search"
+                  },
+                  "Class": "max-w-xs"
+                },
+                "attrs": {
+                  "data-testid": "search"
+                },
+                "on": {
+                  "input": {
+                    "call": "actions.search",
+                    "args": [
+                      {
+                        "$": "event.value"
+                      }
+                    ]
+                  }
+                }
+              },
+              {
+                "use": "Text",
+                "props": {
+                  "Size": "sm",
+                  "Class": "text-muted-foreground"
+                },
+                "attrs": {
+                  "data-testid": "count"
+                },
+                "children": [
+                  {
+                    "text": {
+                      "op": "tpl",
+                      "args": [
+                        {
+                          "$": "ui.plans.count"
+                        },
+                        {
+                          "$": "view.total"
+                        }
+                      ]
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "use": "Table",
+            "props": {
+              "Class": "w-full text-sm"
+            },
+            "attrs": {
+              "data-testid": "plans-table"
+            },
+            "children": [
+              {
+                "use": "TableCaption",
+                "props": {
+                  "Class": "sr-only"
+                },
+                "children": [
+                  {
+                    "text": {
+                      "$": "ui.plans.caption"
+                    }
+                  }
+                ]
+              },
+              {
+                "use": "TableHead",
+                "children": [
+                  {
+                    "use": "TableRow",
+                    "children": [
+                      {
+                        "when": {
+                          "op": "and",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "view.sort.field"
+                                },
+                                "name"
+                              ]
+                            },
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "view.sort.dir"
+                                },
+                                "asc"
+                              ]
+                            }
+                          ]
+                        },
+                        "then": [
+                          {
+                            "use": "TableHeadCell",
+                            "props": {
+                              "Scope": "col",
+                              "Class": ""
+                            },
+                            "attrs": {
+                              "aria-sort": "ascending"
+                            },
+                            "children": [
+                              {
+                                "use": "Button",
+                                "props": {
+                                  "Variant": "ghost",
+                                  "Size": "sm",
+                                  "Class": "-mx-2 px-2"
+                                },
+                                "on": {
+                                  "click": {
+                                    "call": "actions.sort",
+                                    "args": [
+                                      "name"
+                                    ]
+                                  }
+                                },
+                                "children": [
+                                  {
+                                    "text": {
+                                      "$": "ui.plans.col.name"
+                                    }
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ],
+                        "else": [
+                          {
+                            "when": {
+                              "op": "and",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "view.sort.field"
+                                    },
+                                    "name"
+                                  ]
+                                },
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "view.sort.dir"
+                                    },
+                                    "desc"
+                                  ]
+                                }
+                              ]
+                            },
+                            "then": [
+                              {
+                                "use": "TableHeadCell",
+                                "props": {
+                                  "Scope": "col",
+                                  "Class": ""
+                                },
+                                "attrs": {
+                                  "aria-sort": "descending"
+                                },
+                                "children": [
+                                  {
+                                    "use": "Button",
+                                    "props": {
+                                      "Variant": "ghost",
+                                      "Size": "sm",
+                                      "Class": "-mx-2 px-2"
+                                    },
+                                    "on": {
+                                      "click": {
+                                        "call": "actions.sort",
+                                        "args": [
+                                          "name"
+                                        ]
+                                      }
+                                    },
+                                    "children": [
+                                      {
+                                        "text": {
+                                          "$": "ui.plans.col.name"
+                                        }
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ],
+                            "else": [
+                              {
+                                "use": "TableHeadCell",
+                                "props": {
+                                  "Scope": "col",
+                                  "Class": ""
+                                },
+                                "attrs": {
+                                  "aria-sort": "none"
+                                },
+                                "children": [
+                                  {
+                                    "use": "Button",
+                                    "props": {
+                                      "Variant": "ghost",
+                                      "Size": "sm",
+                                      "Class": "-mx-2 px-2"
+                                    },
+                                    "on": {
+                                      "click": {
+                                        "call": "actions.sort",
+                                        "args": [
+                                          "name"
+                                        ]
+                                      }
+                                    },
+                                    "children": [
+                                      {
+                                        "text": {
+                                          "$": "ui.plans.col.name"
+                                        }
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "when": {
+                          "op": "and",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "view.sort.field"
+                                },
+                                "price"
+                              ]
+                            },
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "view.sort.dir"
+                                },
+                                "asc"
+                              ]
+                            }
+                          ]
+                        },
+                        "then": [
+                          {
+                            "use": "TableHeadCell",
+                            "props": {
+                              "Scope": "col",
+                              "Class": "text-right"
+                            },
+                            "attrs": {
+                              "aria-sort": "ascending"
+                            },
+                            "children": [
+                              {
+                                "use": "Button",
+                                "props": {
+                                  "Variant": "ghost",
+                                  "Size": "sm",
+                                  "Class": "-mx-2 ml-auto px-2"
+                                },
+                                "on": {
+                                  "click": {
+                                    "call": "actions.sort",
+                                    "args": [
+                                      "price"
+                                    ]
+                                  }
+                                },
+                                "children": [
+                                  {
+                                    "text": {
+                                      "$": "ui.plans.col.price"
+                                    }
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ],
+                        "else": [
+                          {
+                            "when": {
+                              "op": "and",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "view.sort.field"
+                                    },
+                                    "price"
+                                  ]
+                                },
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "view.sort.dir"
+                                    },
+                                    "desc"
+                                  ]
+                                }
+                              ]
+                            },
+                            "then": [
+                              {
+                                "use": "TableHeadCell",
+                                "props": {
+                                  "Scope": "col",
+                                  "Class": "text-right"
+                                },
+                                "attrs": {
+                                  "aria-sort": "descending"
+                                },
+                                "children": [
+                                  {
+                                    "use": "Button",
+                                    "props": {
+                                      "Variant": "ghost",
+                                      "Size": "sm",
+                                      "Class": "-mx-2 ml-auto px-2"
+                                    },
+                                    "on": {
+                                      "click": {
+                                        "call": "actions.sort",
+                                        "args": [
+                                          "price"
+                                        ]
+                                      }
+                                    },
+                                    "children": [
+                                      {
+                                        "text": {
+                                          "$": "ui.plans.col.price"
+                                        }
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ],
+                            "else": [
+                              {
+                                "use": "TableHeadCell",
+                                "props": {
+                                  "Scope": "col",
+                                  "Class": "text-right"
+                                },
+                                "attrs": {
+                                  "aria-sort": "none"
+                                },
+                                "children": [
+                                  {
+                                    "use": "Button",
+                                    "props": {
+                                      "Variant": "ghost",
+                                      "Size": "sm",
+                                      "Class": "-mx-2 ml-auto px-2"
+                                    },
+                                    "on": {
+                                      "click": {
+                                        "call": "actions.sort",
+                                        "args": [
+                                          "price"
+                                        ]
+                                      }
+                                    },
+                                    "children": [
+                                      {
+                                        "text": {
+                                          "$": "ui.plans.col.price"
+                                        }
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "when": {
+                          "op": "and",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "view.sort.field"
+                                },
+                                "seats"
+                              ]
+                            },
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "view.sort.dir"
+                                },
+                                "asc"
+                              ]
+                            }
+                          ]
+                        },
+                        "then": [
+                          {
+                            "use": "TableHeadCell",
+                            "props": {
+                              "Scope": "col",
+                              "Class": "text-right"
+                            },
+                            "attrs": {
+                              "aria-sort": "ascending"
+                            },
+                            "children": [
+                              {
+                                "use": "Button",
+                                "props": {
+                                  "Variant": "ghost",
+                                  "Size": "sm",
+                                  "Class": "-mx-2 ml-auto px-2"
+                                },
+                                "on": {
+                                  "click": {
+                                    "call": "actions.sort",
+                                    "args": [
+                                      "seats"
+                                    ]
+                                  }
+                                },
+                                "children": [
+                                  {
+                                    "text": {
+                                      "$": "ui.plans.col.seats"
+                                    }
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ],
+                        "else": [
+                          {
+                            "when": {
+                              "op": "and",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "view.sort.field"
+                                    },
+                                    "seats"
+                                  ]
+                                },
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "view.sort.dir"
+                                    },
+                                    "desc"
+                                  ]
+                                }
+                              ]
+                            },
+                            "then": [
+                              {
+                                "use": "TableHeadCell",
+                                "props": {
+                                  "Scope": "col",
+                                  "Class": "text-right"
+                                },
+                                "attrs": {
+                                  "aria-sort": "descending"
+                                },
+                                "children": [
+                                  {
+                                    "use": "Button",
+                                    "props": {
+                                      "Variant": "ghost",
+                                      "Size": "sm",
+                                      "Class": "-mx-2 ml-auto px-2"
+                                    },
+                                    "on": {
+                                      "click": {
+                                        "call": "actions.sort",
+                                        "args": [
+                                          "seats"
+                                        ]
+                                      }
+                                    },
+                                    "children": [
+                                      {
+                                        "text": {
+                                          "$": "ui.plans.col.seats"
+                                        }
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ],
+                            "else": [
+                              {
+                                "use": "TableHeadCell",
+                                "props": {
+                                  "Scope": "col",
+                                  "Class": "text-right"
+                                },
+                                "attrs": {
+                                  "aria-sort": "none"
+                                },
+                                "children": [
+                                  {
+                                    "use": "Button",
+                                    "props": {
+                                      "Variant": "ghost",
+                                      "Size": "sm",
+                                      "Class": "-mx-2 ml-auto px-2"
+                                    },
+                                    "on": {
+                                      "click": {
+                                        "call": "actions.sort",
+                                        "args": [
+                                          "seats"
+                                        ]
+                                      }
+                                    },
+                                    "children": [
+                                      {
+                                        "text": {
+                                          "$": "ui.plans.col.seats"
+                                        }
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "when": {
+                          "op": "and",
+                          "args": [
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "view.sort.field"
+                                },
+                                "storage"
+                              ]
+                            },
+                            {
+                              "op": "eq",
+                              "args": [
+                                {
+                                  "$": "view.sort.dir"
+                                },
+                                "asc"
+                              ]
+                            }
+                          ]
+                        },
+                        "then": [
+                          {
+                            "use": "TableHeadCell",
+                            "props": {
+                              "Scope": "col",
+                              "Class": "text-right"
+                            },
+                            "attrs": {
+                              "aria-sort": "ascending"
+                            },
+                            "children": [
+                              {
+                                "use": "Button",
+                                "props": {
+                                  "Variant": "ghost",
+                                  "Size": "sm",
+                                  "Class": "-mx-2 ml-auto px-2"
+                                },
+                                "on": {
+                                  "click": {
+                                    "call": "actions.sort",
+                                    "args": [
+                                      "storage"
+                                    ]
+                                  }
+                                },
+                                "children": [
+                                  {
+                                    "text": {
+                                      "$": "ui.plans.col.storage"
+                                    }
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ],
+                        "else": [
+                          {
+                            "when": {
+                              "op": "and",
+                              "args": [
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "view.sort.field"
+                                    },
+                                    "storage"
+                                  ]
+                                },
+                                {
+                                  "op": "eq",
+                                  "args": [
+                                    {
+                                      "$": "view.sort.dir"
+                                    },
+                                    "desc"
+                                  ]
+                                }
+                              ]
+                            },
+                            "then": [
+                              {
+                                "use": "TableHeadCell",
+                                "props": {
+                                  "Scope": "col",
+                                  "Class": "text-right"
+                                },
+                                "attrs": {
+                                  "aria-sort": "descending"
+                                },
+                                "children": [
+                                  {
+                                    "use": "Button",
+                                    "props": {
+                                      "Variant": "ghost",
+                                      "Size": "sm",
+                                      "Class": "-mx-2 ml-auto px-2"
+                                    },
+                                    "on": {
+                                      "click": {
+                                        "call": "actions.sort",
+                                        "args": [
+                                          "storage"
+                                        ]
+                                      }
+                                    },
+                                    "children": [
+                                      {
+                                        "text": {
+                                          "$": "ui.plans.col.storage"
+                                        }
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ],
+                            "else": [
+                              {
+                                "use": "TableHeadCell",
+                                "props": {
+                                  "Scope": "col",
+                                  "Class": "text-right"
+                                },
+                                "attrs": {
+                                  "aria-sort": "none"
+                                },
+                                "children": [
+                                  {
+                                    "use": "Button",
+                                    "props": {
+                                      "Variant": "ghost",
+                                      "Size": "sm",
+                                      "Class": "-mx-2 ml-auto px-2"
+                                    },
+                                    "on": {
+                                      "click": {
+                                        "call": "actions.sort",
+                                        "args": [
+                                          "storage"
+                                        ]
+                                      }
+                                    },
+                                    "children": [
+                                      {
+                                        "text": {
+                                          "$": "ui.plans.col.storage"
+                                        }
+                                      }
+                                    ]
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "use": "TableHeadCell",
+                        "props": {
+                          "Scope": "col",
+                          "Class": ""
+                        },
+                        "children": [
+                          {
+                            "text": {
+                              "$": "ui.plans.col.status"
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "use": "TableBody",
+                "children": [
+                  {
+                    "each": {
+                      "$": "view.rows"
+                    },
+                    "as": "row",
+                    "key": {
+                      "$": "row.id"
+                    },
+                    "do": [
+                      {
+                        "use": "TableRow",
+                        "attrs": {
+                          "data-testid": "plan-row"
+                        },
+                        "children": [
+                          {
+                            "use": "TableCell",
+                            "props": {
+                              "Class": ""
+                            },
+                            "children": [
+                              {
+                                "use": "Link",
+                                "props": {
+                                  "Href": {
+                                    "op": "add",
+                                    "args": [
+                                      {
+                                        "op": "add",
+                                        "args": [
+                                          "#/plans/",
+                                          {
+                                            "$": "row.id"
+                                          }
+                                        ]
+                                      },
+                                      {
+                                        "$": "view.qs"
+                                      }
+                                    ]
+                                  },
+                                  "Variant": "default"
+                                },
+                                "attrs": {
+                                  "data-testid": "open-record"
+                                },
+                                "children": [
+                                  {
+                                    "text": {
+                                      "$": "row.name"
+                                    }
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          {
+                            "use": "TableCell",
+                            "props": {
+                              "Class": "text-right"
+                            },
+                            "children": [
+                              {
+                                "text": {
+                                  "op": "money",
+                                  "args": [
+                                    {
+                                      "$": "row.price"
+                                    },
+                                    {
+                                      "$": "row.currency"
+                                    }
+                                  ]
+                                }
+                              }
+                            ]
+                          },
+                          {
+                            "use": "TableCell",
+                            "props": {
+                              "Class": "text-right"
+                            },
+                            "children": [
+                              {
+                                "text": {
+                                  "$": "row.seats"
+                                }
+                              }
+                            ]
+                          },
+                          {
+                            "use": "TableCell",
+                            "props": {
+                              "Class": "text-right"
+                            },
+                            "children": [
+                              {
+                                "text": {
+                                  "$": "row.storage"
+                                }
+                              }
+                            ]
+                          },
+                          {
+                            "use": "TableCell",
+                            "props": {
+                              "Class": ""
+                            },
+                            "children": [
+                              {
+                                "use": "Badge",
+                                "props": {
+                                  "Variant": {
+                                    "op": "cond",
+                                    "args": [
+                                      {
+                                        "op": "eq",
+                                        "args": [
+                                          {
+                                            "$": "row.status"
+                                          },
+                                          "active"
+                                        ]
+                                      },
+                                      "default",
+                                      "secondary"
+                                    ]
+                                  },
+                                  "Size": "default"
+                                },
+                                "children": [
+                                  {
+                                    "text": {
+                                      "op": "at",
+                                      "args": [
+                                        {
+                                          "$": "ui.status"
+                                        },
+                                        {
+                                          "op": "coalesce",
+                                          "args": [
+                                            {
+                                              "$": "row.status"
+                                            },
+                                            ""
+                                          ]
+                                        }
+                                      ]
+                                    }
+                                  }
+                                ]
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "when": {
+              "op": "eq",
+              "args": [
+                {
+                  "$": "view.total"
+                },
+                0
+              ]
+            },
+            "then": [
+              {
+                "use": "Text",
+                "props": {
+                  "Class": "text-muted-foreground"
+                },
+                "attrs": {
+                  "data-testid": "empty"
+                },
+                "children": [
+                  {
+                    "text": {
+                      "$": "ui.plans.empty"
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "use": "Group",
+            "props": {
+              "Gap": "4",
+              "Align": "center",
+              "Justify": "between",
+              "Class": "flex-wrap"
+            },
+            "children": [
+              {
+                "use": "Text",
+                "props": {
+                  "Size": "sm",
+                  "Class": "text-muted-foreground"
+                },
+                "children": [
+                  {
+                    "text": {
+                      "op": "tpl",
+                      "args": [
+                        {
+                          "$": "ui.pager.showing"
+                        },
+                        {
+                          "$": "view.from"
+                        },
+                        {
+                          "$": "view.to"
+                        },
+                        {
+                          "$": "view.total"
+                        }
+                      ]
+                    }
+                  }
+                ]
+              },
+              {
+                "use": "Group",
+                "props": {
+                  "Gap": "2"
+                },
+                "children": [
+                  {
+                    "use": "Button",
+                    "props": {
+                      "Variant": "outline",
+                      "Size": "sm",
+                      "Disabled": {
+                        "op": "not",
+                        "args": [
+                          {
+                            "op": "gt",
+                            "args": [
+                              {
+                                "$": "view.page"
+                              },
+                              1
+                            ]
+                          }
+                        ]
+                      }
+                    },
+                    "attrs": {
+                      "data-testid": "prev"
+                    },
+                    "on": {
+                      "click": {
+                        "call": "actions.page",
+                        "args": [
+                          {
+                            "op": "add",
+                            "args": [
+                              {
+                                "$": "view.page"
+                              },
+                              -1
+                            ]
+                          }
+                        ]
+                      }
+                    },
+                    "children": [
+                      {
+                        "text": {
+                          "$": "ui.pager.previous"
+                        }
+                      }
+                    ]
+                  },
+                  {
+                    "use": "Button",
+                    "props": {
+                      "Variant": "outline",
+                      "Size": "sm",
+                      "Disabled": {
+                        "op": "not",
+                        "args": [
+                          {
+                            "op": "lt",
+                            "args": [
+                              {
+                                "$": "view.page"
+                              },
+                              {
+                                "$": "view.pages"
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    },
+                    "attrs": {
+                      "data-testid": "next"
+                    },
+                    "on": {
+                      "click": {
+                        "call": "actions.page",
+                        "args": [
+                          {
+                            "op": "add",
+                            "args": [
+                              {
+                                "$": "view.page"
+                              },
+                              1
+                            ]
+                          }
+                        ]
+                      }
+                    },
+                    "children": [
+                      {
+                        "text": {
+                          "$": "ui.pager.next"
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    "record": [
+      {
+        "use": "Stack",
+        "props": {
+          "Gap": "4"
+        },
+        "children": [
+          {
+            "use": "Group",
+            "children": [
+              {
+                "use": "Button",
+                "props": {
+                  "Variant": "ghost",
+                  "Size": "sm"
+                },
+                "attrs": {
+                  "data-testid": "back"
+                },
+                "on": {
+                  "click": {
+                    "call": "actions.back",
+                    "args": []
+                  }
+                },
+                "children": [
+                  {
+                    "text": {
+                      "$": "ui.record.back"
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "when": {
+              "$": "record"
+            },
+            "then": [
+              {
+                "organism": "PricingCard",
+                "props": {
+                  "plan": {
+                    "$": "record"
+                  },
+                  "labels": {
+                    "$": "ui.pricing"
+                  },
+                  "current": true
+                },
+                "on": {
+                  "select": {
+                    "call": "actions.back",
+                    "args": []
+                  }
+                },
+                "slots": {
+                  "footer": {
+                    "args": [
+                      "plan"
+                    ],
+                    "do": [
+                      {
+                        "use": "Text",
+                        "props": {
+                          "Size": "sm",
+                          "Class": "text-muted-foreground"
+                        },
+                        "attrs": {
+                          "data-testid": "record-id"
+                        },
+                        "children": [
+                          {
+                            "text": {
+                              "op": "tpl",
+                              "args": [
+                                {
+                                  "$": "ui.record.id"
+                                },
+                                {
+                                  "$": "plan.id"
+                                }
+                              ]
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                }
+              }
+            ],
+            "else": [
+              {
+                "use": "Text",
+                "props": {
+                  "Class": "text-muted-foreground"
+                },
+                "attrs": {
+                  "data-testid": "missing"
+                },
+                "children": [
+                  {
+                    "text": {
+                      "$": "ui.record.missing"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/site.json b/xgen/specs/screens/site.json
new file mode 100644
index 0000000..7d87836
--- /dev/null
+++ b/xgen/specs/screens/site.json
@@ -0,0 +1,130 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.site",
+  "name": "SiteScreen",
+  "kind": "composed",
+  "docs": "A marketing site of two routes, home and pricing, made of blocks: header, hero, features, pricing, FAQ, call to action, footer. Data: the Codex fixtures `features`, `tiers` and `faq`. The only action is the theme button.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "pricing",
+      "area": "pricing"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "header",
+        "variant": "inline",
+        "props": {
+          "current": {
+            "$": "route.area"
+          },
+          "routes": {
+            "home": "#/",
+            "pricing": "#/pricing"
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "footer",
+        "variant": "minimal",
+        "props": {
+          "routes": {
+            "home": "#/",
+            "pricing": "#/pricing"
+          }
+        }
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "hero",
+        "variant": "centered",
+        "props": {
+          "id": "home-hero"
+        }
+      },
+      {
+        "block": "features",
+        "variant": "grid",
+        "props": {
+          "id": "home-features"
+        }
+      },
+      {
+        "block": "cta",
+        "variant": "card",
+        "props": {
+          "id": "home-cta"
+        }
+      }
+    ],
+    "pricing": [
+      {
+        "block": "hero",
+        "variant": "centered",
+        "props": {
+          "id": "pricing-hero",
+          "title": {
+            "$": "ui.site.pricing.title"
+          },
+          "text": {
+            "$": "ui.site.pricing.text"
+          },
+          "actions": {
+            "op": "undef",
+            "args": []
+          }
+        }
+      },
+      {
+        "block": "pricing",
+        "variant": "grid",
+        "props": {
+          "id": "pricing-tiers"
+        }
+      },
+      {
+        "block": "faq",
+        "variant": "list",
+        "props": {
+          "id": "pricing-faq"
+        }
+      }
+    ],
+    "notfound": [
+      {
+        "block": "hero",
+        "variant": "centered",
+        "props": {
+          "id": "not-found",
+          "title": {
+            "$": "ui.site.notFound.title"
+          },
+          "text": {
+            "$": "ui.site.notFound.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.site.notFound.back"
+            },
+            "href": "#/"
+          }
+        }
+      }
+    ]
+  },
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/skins.json b/xgen/specs/screens/skins.json
new file mode 100644
index 0000000..11474d1
--- /dev/null
+++ b/xgen/specs/screens/skins.json
@@ -0,0 +1,101 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.skins",
+  "name": "SkinsScreen",
+  "kind": "composed",
+  "docs": "The Skins screen: tiles that switch the look of the whole preview. A row of skins (the default theme and 14 tweakcn presets, each tile drawn in its skin), a row of Google fonts with Latin and Cyrillic over the font of the skin, and a row of corner radii over the radius of the skin. The tiles are static; the preview runtime (runtime/skins.ts) applies and stores the choice.",
+  "routes": [],
+  "frame": {
+    "before": [],
+    "after": []
+  },
+  "areas": {},
+  "skins": {
+    "skins": [
+      "default",
+      "modern-minimal",
+      "violet-bloom",
+      "t3-chat",
+      "bubblegum",
+      "doom-64",
+      "amber-minimal",
+      "supabase",
+      "kodama-grove",
+      "perpetuity",
+      "cosmic-night",
+      "claude",
+      "mocha-mousse",
+      "neo-brutalism",
+      "notebook"
+    ],
+    "fonts": [
+      {
+        "id": "inter",
+        "family": "Inter"
+      },
+      {
+        "id": "roboto",
+        "family": "Roboto"
+      },
+      {
+        "id": "manrope",
+        "family": "Manrope"
+      },
+      {
+        "id": "montserrat",
+        "family": "Montserrat"
+      },
+      {
+        "id": "rubik",
+        "family": "Rubik"
+      },
+      {
+        "id": "nunito",
+        "family": "Nunito"
+      },
+      {
+        "id": "ibm-plex-sans",
+        "family": "IBM Plex Sans"
+      },
+      {
+        "id": "golos-text",
+        "family": "Golos Text"
+      },
+      {
+        "id": "onest",
+        "family": "Onest"
+      },
+      {
+        "id": "open-sans",
+        "family": "Open Sans"
+      }
+    ],
+    "radii": [
+      {
+        "id": "r0",
+        "value": "0px"
+      },
+      {
+        "id": "r4",
+        "value": "4px"
+      },
+      {
+        "id": "r8",
+        "value": "8px"
+      },
+      {
+        "id": "r12",
+        "value": "12px"
+      },
+      {
+        "id": "r16",
+        "value": "16px"
+      }
+    ]
+  },
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-account-portal.json b/xgen/specs/screens/theme-account-portal.json
new file mode 100644
index 0000000..e60f6c4
--- /dev/null
+++ b/xgen/specs/screens/theme-account-portal.json
@@ -0,0 +1,370 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-account-portal",
+  "name": "ThemeAccountPortalScreen",
+  "kind": "composed",
+  "docs": "Sign-in and account pages: split, centered and minimal sign-in, sign-up, reset, magic link, social first, the sign-up wizard, cards and the profile.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "start",
+      "area": "start"
+    },
+    {
+      "path": "signup",
+      "area": "signup"
+    },
+    {
+      "path": "welcome",
+      "area": "welcome"
+    },
+    {
+      "path": "reset",
+      "area": "reset"
+    },
+    {
+      "path": "magic",
+      "area": "magic"
+    },
+    {
+      "path": "minimal",
+      "area": "minimal"
+    },
+    {
+      "path": "options",
+      "area": "options"
+    },
+    {
+      "path": "join",
+      "area": "join"
+    },
+    {
+      "path": "cards",
+      "area": "cards"
+    },
+    {
+      "path": "profile",
+      "area": "profile"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "sitemap",
+        "variant": "row"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "authpage",
+        "variant": "split",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.home.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.home.text"
+          },
+          "submit": {
+            "$": "ui.pages.accountPortal.home.cta"
+          }
+        }
+      }
+    ],
+    "start": [
+      {
+        "block": "authpage",
+        "variant": "splitStart",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.start.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.start.text"
+          },
+          "submit": {
+            "$": "ui.pages.accountPortal.start.cta"
+          }
+        }
+      }
+    ],
+    "signup": [
+      {
+        "block": "authpage",
+        "variant": "signup",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.signup.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.signup.text"
+          },
+          "submit": {
+            "$": "ui.pages.accountPortal.signup.cta"
+          }
+        }
+      }
+    ],
+    "welcome": [
+      {
+        "block": "authpage",
+        "variant": "socialFirst",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.welcome.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.welcome.text"
+          },
+          "submit": {
+            "$": "ui.pages.accountPortal.welcome.cta"
+          }
+        }
+      }
+    ],
+    "reset": [
+      {
+        "block": "authpage",
+        "variant": "reset",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.reset.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.reset.text"
+          },
+          "submit": {
+            "$": "ui.pages.accountPortal.reset.cta"
+          }
+        }
+      }
+    ],
+    "magic": [
+      {
+        "block": "authpage",
+        "variant": "magic",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.magic.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.magic.text"
+          },
+          "submit": {
+            "$": "ui.pages.accountPortal.magic.cta"
+          }
+        }
+      }
+    ],
+    "minimal": [
+      {
+        "block": "authpage",
+        "variant": "minimal",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.minimal.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.minimal.text"
+          },
+          "submit": {
+            "$": "ui.pages.accountPortal.minimal.cta"
+          }
+        }
+      }
+    ],
+    "options": [
+      {
+        "block": "authpage",
+        "variant": "social",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.options.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.options.text"
+          },
+          "submit": {
+            "$": "ui.pages.accountPortal.options.cta"
+          }
+        }
+      }
+    ],
+    "join": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.join.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.join.text"
+          },
+          "cta": {
+            "$": "ui.pages.accountPortal.join.cta"
+          },
+          "href": "#/cards"
+        }
+      },
+      {
+        "block": "wizard",
+        "variant": "bar"
+      },
+      {
+        "block": "wizard",
+        "variant": "list"
+      }
+    ],
+    "cards": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.cards.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.cards.text"
+          },
+          "cta": {
+            "$": "ui.pages.accountPortal.cards.cta"
+          },
+          "href": "#/profile"
+        }
+      },
+      {
+        "block": "auth",
+        "variant": "signin"
+      },
+      {
+        "block": "auth",
+        "variant": "social"
+      },
+      {
+        "block": "auth",
+        "variant": "signupSocial"
+      }
+    ],
+    "profile": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.accountPortal.profile.title"
+          },
+          "text": {
+            "$": "ui.pages.accountPortal.profile.text"
+          },
+          "cta": {
+            "$": "ui.pages.accountPortal.profile.cta"
+          },
+          "href": "#/"
+        }
+      },
+      {
+        "block": "profile",
+        "variant": "split"
+      },
+      {
+        "block": "profile",
+        "variant": "stacked"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.accountPortal.home.nav"
+    },
+    {
+      "id": "start",
+      "path": "start",
+      "titleKey": "pages.accountPortal.start.nav"
+    },
+    {
+      "id": "signup",
+      "path": "signup",
+      "titleKey": "pages.accountPortal.signup.nav"
+    },
+    {
+      "id": "welcome",
+      "path": "welcome",
+      "titleKey": "pages.accountPortal.welcome.nav"
+    },
+    {
+      "id": "reset",
+      "path": "reset",
+      "titleKey": "pages.accountPortal.reset.nav"
+    },
+    {
+      "id": "magic",
+      "path": "magic",
+      "titleKey": "pages.accountPortal.magic.nav"
+    },
+    {
+      "id": "minimal",
+      "path": "minimal",
+      "titleKey": "pages.accountPortal.minimal.nav"
+    },
+    {
+      "id": "options",
+      "path": "options",
+      "titleKey": "pages.accountPortal.options.nav"
+    },
+    {
+      "id": "join",
+      "path": "join",
+      "titleKey": "pages.accountPortal.join.nav"
+    },
+    {
+      "id": "cards",
+      "path": "cards",
+      "titleKey": "pages.accountPortal.cards.nav"
+    },
+    {
+      "id": "profile",
+      "path": "profile",
+      "titleKey": "pages.accountPortal.profile.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-commerce-shop.json b/xgen/specs/screens/theme-commerce-shop.json
new file mode 100644
index 0000000..474a49d
--- /dev/null
+++ b/xgen/specs/screens/theme-commerce-shop.json
@@ -0,0 +1,370 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-commerce-shop",
+  "name": "ThemeCommerceShopScreen",
+  "kind": "composed",
+  "docs": "A shop: home with categories and products, the catalog, offers, a product page with details and reviews, the cart, the checkout, delivery and pickup, and the orders.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "catalog",
+      "area": "catalog"
+    },
+    {
+      "path": "browse",
+      "area": "browse"
+    },
+    {
+      "path": "offers",
+      "area": "offers"
+    },
+    {
+      "path": "product",
+      "area": "product"
+    },
+    {
+      "path": "cart",
+      "area": "cart"
+    },
+    {
+      "path": "checkout",
+      "area": "checkout"
+    },
+    {
+      "path": "delivery",
+      "area": "delivery"
+    },
+    {
+      "path": "orders",
+      "area": "orders"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "sitemap",
+        "variant": "columns"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "hero",
+        "variant": "shop",
+        "props": {
+          "title": {
+            "$": "ui.pages.commerceShop.home.title"
+          },
+          "text": {
+            "$": "ui.pages.commerceShop.home.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.commerceShop.home.cta"
+            },
+            "href": "#/catalog"
+          }
+        }
+      },
+      {
+        "block": "categories",
+        "variant": "chips"
+      },
+      {
+        "block": "products",
+        "variant": "grid4"
+      },
+      {
+        "block": "reviews",
+        "variant": "grid"
+      },
+      {
+        "block": "newsletter",
+        "variant": "stacked"
+      },
+      {
+        "block": "cta",
+        "variant": "shop"
+      }
+    ],
+    "catalog": [
+      {
+        "block": "pagetrail",
+        "variant": "crumbsFigure"
+      },
+      {
+        "block": "categories",
+        "variant": "sidebar"
+      },
+      {
+        "block": "products",
+        "variant": "catalog"
+      }
+    ],
+    "browse": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.commerceShop.browse.title"
+          },
+          "text": {
+            "$": "ui.pages.commerceShop.browse.text"
+          },
+          "cta": {
+            "$": "ui.pages.commerceShop.browse.cta"
+          },
+          "href": "#/offers"
+        }
+      },
+      {
+        "block": "categories",
+        "variant": "bar"
+      },
+      {
+        "block": "products",
+        "variant": "browse"
+      },
+      {
+        "block": "products",
+        "variant": "showcase"
+      },
+      {
+        "block": "products",
+        "variant": "list"
+      }
+    ],
+    "offers": [
+      {
+        "block": "storehero",
+        "variant": "overlay"
+      },
+      {
+        "block": "usp",
+        "variant": "strip"
+      },
+      {
+        "block": "products",
+        "variant": "railCompact"
+      },
+      {
+        "block": "cartdrawer",
+        "variant": "filled"
+      }
+    ],
+    "product": [
+      {
+        "block": "product",
+        "variant": "split"
+      },
+      {
+        "block": "productinfo",
+        "variant": "split"
+      },
+      {
+        "block": "reviews",
+        "variant": "list"
+      },
+      {
+        "block": "products",
+        "variant": "grid3"
+      }
+    ],
+    "cart": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.commerceShop.cart.title"
+          },
+          "text": {
+            "$": "ui.pages.commerceShop.cart.text"
+          },
+          "cta": {
+            "$": "ui.pages.commerceShop.cart.cta"
+          },
+          "href": "#/checkout"
+        }
+      },
+      {
+        "block": "cartpage",
+        "variant": "split"
+      },
+      {
+        "block": "cart",
+        "variant": "table"
+      },
+      {
+        "block": "summary",
+        "variant": "card"
+      }
+    ],
+    "checkout": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.commerceShop.checkout.title"
+          },
+          "text": {
+            "$": "ui.pages.commerceShop.checkout.text"
+          },
+          "cta": {
+            "$": "ui.pages.commerceShop.checkout.cta"
+          },
+          "href": "#/delivery"
+        }
+      },
+      {
+        "block": "checkout",
+        "variant": "numbered"
+      }
+    ],
+    "delivery": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.commerceShop.delivery.title"
+          },
+          "text": {
+            "$": "ui.pages.commerceShop.delivery.text"
+          },
+          "cta": {
+            "$": "ui.pages.commerceShop.delivery.cta"
+          },
+          "href": "#/orders"
+        }
+      },
+      {
+        "block": "delivery",
+        "variant": "full"
+      },
+      {
+        "block": "zones",
+        "variant": "table"
+      },
+      {
+        "block": "slots",
+        "variant": "split"
+      },
+      {
+        "block": "locations",
+        "variant": "cards"
+      }
+    ],
+    "orders": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.commerceShop.orders.title"
+          },
+          "text": {
+            "$": "ui.pages.commerceShop.orders.text"
+          },
+          "cta": {
+            "$": "ui.pages.commerceShop.orders.cta"
+          },
+          "href": "#/"
+        }
+      },
+      {
+        "block": "orders",
+        "variant": "table"
+      },
+      {
+        "block": "orders",
+        "variant": "cards"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.commerceShop.home.nav"
+    },
+    {
+      "id": "catalog",
+      "path": "catalog",
+      "titleKey": "pages.commerceShop.catalog.nav"
+    },
+    {
+      "id": "browse",
+      "path": "browse",
+      "titleKey": "pages.commerceShop.browse.nav"
+    },
+    {
+      "id": "offers",
+      "path": "offers",
+      "titleKey": "pages.commerceShop.offers.nav"
+    },
+    {
+      "id": "product",
+      "path": "product",
+      "titleKey": "pages.commerceShop.product.nav"
+    },
+    {
+      "id": "cart",
+      "path": "cart",
+      "titleKey": "pages.commerceShop.cart.nav"
+    },
+    {
+      "id": "checkout",
+      "path": "checkout",
+      "titleKey": "pages.commerceShop.checkout.nav"
+    },
+    {
+      "id": "delivery",
+      "path": "delivery",
+      "titleKey": "pages.commerceShop.delivery.nav"
+    },
+    {
+      "id": "orders",
+      "path": "orders",
+      "titleKey": "pages.commerceShop.orders.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-content-blog.json b/xgen/specs/screens/theme-content-blog.json
new file mode 100644
index 0000000..423ad40
--- /dev/null
+++ b/xgen/specs/screens/theme-content-blog.json
@@ -0,0 +1,250 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-content-blog",
+  "name": "ThemeContentBlogScreen",
+  "kind": "composed",
+  "docs": "A blog: a magazine front page, filtered and plain lists, and articles with a table of contents, a single column or no cover.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "articles",
+      "area": "articles"
+    },
+    {
+      "path": "archive",
+      "area": "archive"
+    },
+    {
+      "path": "post",
+      "area": "post"
+    },
+    {
+      "path": "story",
+      "area": "story"
+    },
+    {
+      "path": "essay",
+      "area": "essay"
+    },
+    {
+      "path": "plain",
+      "area": "plain"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "sitemap",
+        "variant": "compact"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.contentBlog.home.title"
+          },
+          "text": {
+            "$": "ui.pages.contentBlog.home.text"
+          },
+          "cta": {
+            "$": "ui.pages.contentBlog.home.cta"
+          },
+          "href": "#/articles"
+        }
+      },
+      {
+        "block": "posts",
+        "variant": "magazine"
+      },
+      {
+        "block": "postshowcase",
+        "variant": "introCards"
+      },
+      {
+        "block": "newsletter",
+        "variant": "stacked"
+      }
+    ],
+    "articles": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.contentBlog.articles.title"
+          },
+          "text": {
+            "$": "ui.pages.contentBlog.articles.text"
+          },
+          "cta": {
+            "$": "ui.pages.contentBlog.articles.cta"
+          },
+          "href": "#/archive"
+        }
+      },
+      {
+        "block": "posts",
+        "variant": "filters"
+      },
+      {
+        "block": "posts",
+        "variant": "twoUp"
+      }
+    ],
+    "archive": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.contentBlog.archive.title"
+          },
+          "text": {
+            "$": "ui.pages.contentBlog.archive.text"
+          },
+          "cta": {
+            "$": "ui.pages.contentBlog.archive.cta"
+          },
+          "href": "#/post"
+        }
+      },
+      {
+        "block": "posts",
+        "variant": "list"
+      },
+      {
+        "block": "posts",
+        "variant": "digest"
+      },
+      {
+        "block": "posts",
+        "variant": "textOnly"
+      }
+    ],
+    "post": [
+      {
+        "block": "postheader",
+        "variant": "start"
+      },
+      {
+        "block": "article",
+        "variant": "toc"
+      }
+    ],
+    "story": [
+      {
+        "block": "postsplit",
+        "variant": "splitStats"
+      },
+      {
+        "block": "article",
+        "variant": "column"
+      }
+    ],
+    "essay": [
+      {
+        "block": "postheader",
+        "variant": "center"
+      },
+      {
+        "block": "article",
+        "variant": "column"
+      },
+      {
+        "block": "newsletter",
+        "variant": "inline"
+      }
+    ],
+    "plain": [
+      {
+        "block": "postheader",
+        "variant": "noCover"
+      },
+      {
+        "block": "article",
+        "variant": "plain"
+      },
+      {
+        "block": "posts",
+        "variant": "grid"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.contentBlog.home.nav"
+    },
+    {
+      "id": "articles",
+      "path": "articles",
+      "titleKey": "pages.contentBlog.articles.nav"
+    },
+    {
+      "id": "archive",
+      "path": "archive",
+      "titleKey": "pages.contentBlog.archive.nav"
+    },
+    {
+      "id": "post",
+      "path": "post",
+      "titleKey": "pages.contentBlog.post.nav"
+    },
+    {
+      "id": "story",
+      "path": "story",
+      "titleKey": "pages.contentBlog.story.nav"
+    },
+    {
+      "id": "essay",
+      "path": "essay",
+      "titleKey": "pages.contentBlog.essay.nav"
+    },
+    {
+      "id": "plain",
+      "path": "plain",
+      "titleKey": "pages.contentBlog.plain.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-dashboard-console.json b/xgen/specs/screens/theme-dashboard-console.json
new file mode 100644
index 0000000..6e58201
--- /dev/null
+++ b/xgen/specs/screens/theme-dashboard-console.json
@@ -0,0 +1,303 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-dashboard-console",
+  "name": "ThemeDashboardConsoleScreen",
+  "kind": "composed",
+  "docs": "A console: overview with counters, chart and activity, a kanban board, app shells with sidebar, top bar and panes, dashboard shells, navigation, and empty and loading states.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "board",
+      "area": "board"
+    },
+    {
+      "path": "workspace",
+      "area": "workspace"
+    },
+    {
+      "path": "shells",
+      "area": "shells"
+    },
+    {
+      "path": "layouts",
+      "area": "layouts"
+    },
+    {
+      "path": "states",
+      "area": "states"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "sitemap",
+        "variant": "compact"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.dashboardConsole.home.title"
+          },
+          "text": {
+            "$": "ui.pages.dashboardConsole.home.text"
+          },
+          "cta": {
+            "$": "ui.pages.dashboardConsole.home.cta"
+          },
+          "href": "#/board"
+        }
+      },
+      {
+        "block": "overview",
+        "variant": "split"
+      },
+      {
+        "block": "metrics",
+        "variant": "tiles"
+      },
+      {
+        "block": "chart",
+        "variant": "bars"
+      },
+      {
+        "block": "activity",
+        "variant": "timeline"
+      }
+    ],
+    "board": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.dashboardConsole.board.title"
+          },
+          "text": {
+            "$": "ui.pages.dashboardConsole.board.text"
+          },
+          "cta": {
+            "$": "ui.pages.dashboardConsole.board.cta"
+          },
+          "href": "#/workspace"
+        }
+      },
+      {
+        "block": "kanban",
+        "variant": "detail"
+      },
+      {
+        "block": "kanban",
+        "variant": "twoCols"
+      }
+    ],
+    "workspace": [
+      {
+        "block": "pagehead",
+        "variant": "muted",
+        "props": {
+          "title": {
+            "$": "ui.pages.dashboardConsole.workspace.title"
+          },
+          "text": {
+            "$": "ui.pages.dashboardConsole.workspace.text"
+          },
+          "cta": {
+            "$": "ui.pages.dashboardConsole.workspace.cta"
+          },
+          "href": "#/shells"
+        }
+      },
+      {
+        "block": "shell",
+        "variant": "sidebar"
+      },
+      {
+        "block": "shell",
+        "variant": "top"
+      },
+      {
+        "block": "shell",
+        "variant": "panes"
+      }
+    ],
+    "shells": [
+      {
+        "block": "pagehead",
+        "variant": "muted",
+        "props": {
+          "title": {
+            "$": "ui.pages.dashboardConsole.shells.title"
+          },
+          "text": {
+            "$": "ui.pages.dashboardConsole.shells.text"
+          },
+          "cta": {
+            "$": "ui.pages.dashboardConsole.shells.cta"
+          },
+          "href": "#/layouts"
+        }
+      },
+      {
+        "block": "dashshell",
+        "variant": "classic"
+      },
+      {
+        "block": "dashshell",
+        "variant": "twoLevel"
+      },
+      {
+        "block": "dashshell",
+        "variant": "end"
+      }
+    ],
+    "layouts": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.dashboardConsole.layouts.title"
+          },
+          "text": {
+            "$": "ui.pages.dashboardConsole.layouts.text"
+          },
+          "cta": {
+            "$": "ui.pages.dashboardConsole.layouts.cta"
+          },
+          "href": "#/states"
+        }
+      },
+      {
+        "block": "sidenav",
+        "variant": "full"
+      },
+      {
+        "block": "sidenav",
+        "variant": "compact"
+      },
+      {
+        "block": "bottomnav",
+        "variant": "labels"
+      },
+      {
+        "block": "metrics",
+        "variant": "compact"
+      },
+      {
+        "block": "chart",
+        "variant": "meters"
+      },
+      {
+        "block": "overview",
+        "variant": "stacked"
+      }
+    ],
+    "states": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.dashboardConsole.states.title"
+          },
+          "text": {
+            "$": "ui.pages.dashboardConsole.states.text"
+          },
+          "cta": {
+            "$": "ui.pages.dashboardConsole.states.cta"
+          },
+          "href": "#/"
+        }
+      },
+      {
+        "block": "empty",
+        "variant": "illustrated"
+      },
+      {
+        "block": "empty",
+        "variant": "orders"
+      },
+      {
+        "block": "skeleton",
+        "variant": "cards"
+      },
+      {
+        "block": "skeleton",
+        "variant": "list"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.dashboardConsole.home.nav"
+    },
+    {
+      "id": "board",
+      "path": "board",
+      "titleKey": "pages.dashboardConsole.board.nav"
+    },
+    {
+      "id": "workspace",
+      "path": "workspace",
+      "titleKey": "pages.dashboardConsole.workspace.nav"
+    },
+    {
+      "id": "shells",
+      "path": "shells",
+      "titleKey": "pages.dashboardConsole.shells.nav"
+    },
+    {
+      "id": "layouts",
+      "path": "layouts",
+      "titleKey": "pages.dashboardConsole.layouts.nav"
+    },
+    {
+      "id": "states",
+      "path": "states",
+      "titleKey": "pages.dashboardConsole.states.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-marketing-landing.json b/xgen/specs/screens/theme-marketing-landing.json
new file mode 100644
index 0000000..0478170
--- /dev/null
+++ b/xgen/specs/screens/theme-marketing-landing.json
@@ -0,0 +1,395 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-marketing-landing",
+  "name": "ThemeMarketingLandingScreen",
+  "kind": "composed",
+  "docs": "Landing pages of a product: five heroes (screenshot, form, code, display type, backdrop) each followed by proof, features and a call to action, then a company page, a portfolio and a page for teams built from the split blocks.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "launch",
+      "area": "launch"
+    },
+    {
+      "path": "developers",
+      "area": "developers"
+    },
+    {
+      "path": "studio",
+      "area": "studio"
+    },
+    {
+      "path": "events",
+      "area": "events"
+    },
+    {
+      "path": "company",
+      "area": "company"
+    },
+    {
+      "path": "work",
+      "area": "work"
+    },
+    {
+      "path": "teams",
+      "area": "teams"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "sitemap",
+        "variant": "columns"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "hero",
+        "variant": "screenshot",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingLanding.home.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingLanding.home.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.marketingLanding.home.cta"
+            },
+            "href": "#/launch"
+          }
+        }
+      },
+      {
+        "block": "logos",
+        "variant": "row"
+      },
+      {
+        "block": "features",
+        "variant": "rowsAlternate"
+      },
+      {
+        "block": "steps",
+        "variant": "rowIcons"
+      },
+      {
+        "block": "stats",
+        "variant": "icons"
+      },
+      {
+        "block": "testimonials",
+        "variant": "single"
+      },
+      {
+        "block": "faq",
+        "variant": "list"
+      },
+      {
+        "block": "cta",
+        "variant": "band"
+      }
+    ],
+    "launch": [
+      {
+        "block": "hero",
+        "variant": "form",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingLanding.launch.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingLanding.launch.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.marketingLanding.launch.cta"
+            },
+            "href": "#/developers"
+          }
+        }
+      },
+      {
+        "block": "iconwall",
+        "variant": "tiles4"
+      },
+      {
+        "block": "proof",
+        "variant": "above"
+      },
+      {
+        "block": "testimonials",
+        "variant": "grid3"
+      },
+      {
+        "block": "cta",
+        "variant": "form"
+      }
+    ],
+    "developers": [
+      {
+        "block": "hero",
+        "variant": "code",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingLanding.developers.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingLanding.developers.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.marketingLanding.developers.cta"
+            },
+            "href": "#/studio"
+          }
+        }
+      },
+      {
+        "block": "bento",
+        "variant": "bento"
+      },
+      {
+        "block": "templates",
+        "variant": "grid4"
+      },
+      {
+        "block": "features",
+        "variant": "tiles4"
+      },
+      {
+        "block": "faq",
+        "variant": "tabs"
+      },
+      {
+        "block": "cta",
+        "variant": "split"
+      }
+    ],
+    "studio": [
+      {
+        "block": "hero",
+        "variant": "display",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingLanding.studio.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingLanding.studio.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.marketingLanding.studio.cta"
+            },
+            "href": "#/events"
+          }
+        }
+      },
+      {
+        "block": "logos",
+        "variant": "grid4"
+      },
+      {
+        "block": "features",
+        "variant": "tiles4"
+      },
+      {
+        "block": "testimonials",
+        "variant": "masonry"
+      },
+      {
+        "block": "cta",
+        "variant": "band"
+      }
+    ],
+    "events": [
+      {
+        "block": "hero",
+        "variant": "backdrop",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingLanding.events.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingLanding.events.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.marketingLanding.events.cta"
+            },
+            "href": "#/company"
+          }
+        }
+      },
+      {
+        "block": "stats",
+        "variant": "cards"
+      },
+      {
+        "block": "testimonials",
+        "variant": "strip"
+      },
+      {
+        "block": "videos",
+        "variant": "overlay"
+      },
+      {
+        "block": "cta",
+        "variant": "agency"
+      }
+    ],
+    "company": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingLanding.company.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingLanding.company.text"
+          },
+          "cta": {
+            "$": "ui.pages.marketingLanding.company.cta"
+          },
+          "href": "#/work"
+        }
+      },
+      {
+        "block": "about",
+        "variant": "split"
+      },
+      {
+        "block": "storytabs",
+        "variant": "yearTabs"
+      },
+      {
+        "block": "timeline",
+        "variant": "split"
+      },
+      {
+        "block": "team",
+        "variant": "cards4"
+      },
+      {
+        "block": "jobs",
+        "variant": "grouped"
+      }
+    ],
+    "work": [
+      {
+        "block": "aboutme",
+        "variant": "facts"
+      },
+      {
+        "block": "projects",
+        "variant": "cards"
+      },
+      {
+        "block": "photos",
+        "variant": "masonry"
+      }
+    ],
+    "teams": [
+      {
+        "block": "herosplit",
+        "variant": "quoteStats"
+      },
+      {
+        "block": "logos",
+        "variant": "row"
+      },
+      {
+        "block": "faqsplit",
+        "variant": "helpCard"
+      },
+      {
+        "block": "quotesplit",
+        "variant": "ratingPanel"
+      },
+      {
+        "block": "ctaproof",
+        "variant": "splitStats"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.marketingLanding.home.nav"
+    },
+    {
+      "id": "launch",
+      "path": "launch",
+      "titleKey": "pages.marketingLanding.launch.nav"
+    },
+    {
+      "id": "developers",
+      "path": "developers",
+      "titleKey": "pages.marketingLanding.developers.nav"
+    },
+    {
+      "id": "studio",
+      "path": "studio",
+      "titleKey": "pages.marketingLanding.studio.nav"
+    },
+    {
+      "id": "events",
+      "path": "events",
+      "titleKey": "pages.marketingLanding.events.nav"
+    },
+    {
+      "id": "company",
+      "path": "company",
+      "titleKey": "pages.marketingLanding.company.nav"
+    },
+    {
+      "id": "work",
+      "path": "work",
+      "titleKey": "pages.marketingLanding.work.nav"
+    },
+    {
+      "id": "teams",
+      "path": "teams",
+      "titleKey": "pages.marketingLanding.teams.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-marketing-pricing.json b/xgen/specs/screens/theme-marketing-pricing.json
new file mode 100644
index 0000000..9e6033a
--- /dev/null
+++ b/xgen/specs/screens/theme-marketing-pricing.json
@@ -0,0 +1,235 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-marketing-pricing",
+  "name": "ThemeMarketingPricingScreen",
+  "kind": "composed",
+  "docs": "Pricing pages: tiers with a billing switch, a comparison table, one plan, a usage slider, credit packs, free against pro, and us against the rest.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "plans",
+      "area": "plans"
+    },
+    {
+      "path": "usage",
+      "area": "usage"
+    },
+    {
+      "path": "compare",
+      "area": "compare"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "sitemap",
+        "variant": "newsletter"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingPricing.home.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingPricing.home.text"
+          },
+          "cta": {
+            "$": "ui.pages.marketingPricing.home.cta"
+          },
+          "href": "#/plans"
+        }
+      },
+      {
+        "block": "pricing",
+        "variant": "monthly"
+      },
+      {
+        "block": "logos",
+        "variant": "grid3"
+      },
+      {
+        "block": "compare",
+        "variant": "plans"
+      },
+      {
+        "block": "faq",
+        "variant": "twoColumns"
+      },
+      {
+        "block": "cta",
+        "variant": "saas"
+      }
+    ],
+    "plans": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingPricing.plans.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingPricing.plans.text"
+          },
+          "cta": {
+            "$": "ui.pages.marketingPricing.plans.cta"
+          },
+          "href": "#/usage"
+        }
+      },
+      {
+        "block": "pricing",
+        "variant": "duo"
+      },
+      {
+        "block": "plan",
+        "variant": "standard"
+      },
+      {
+        "block": "pricing",
+        "variant": "stack"
+      },
+      {
+        "block": "compare",
+        "variant": "highlight"
+      }
+    ],
+    "usage": [
+      {
+        "block": "pagehead",
+        "variant": "muted",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingPricing.usage.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingPricing.usage.text"
+          },
+          "cta": {
+            "$": "ui.pages.marketingPricing.usage.cta"
+          },
+          "href": "#/compare"
+        }
+      },
+      {
+        "block": "usage",
+        "variant": "card"
+      },
+      {
+        "block": "credits",
+        "variant": "tiles4"
+      },
+      {
+        "block": "credits",
+        "variant": "rows"
+      },
+      {
+        "block": "pricing",
+        "variant": "annual"
+      },
+      {
+        "block": "cta",
+        "variant": "row"
+      }
+    ],
+    "compare": [
+      {
+        "block": "hero",
+        "variant": "muted",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingPricing.compare.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingPricing.compare.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.marketingPricing.compare.cta"
+            },
+            "href": "#/"
+          }
+        }
+      },
+      {
+        "block": "compare",
+        "variant": "rivals"
+      },
+      {
+        "block": "testimonials",
+        "variant": "featured"
+      },
+      {
+        "block": "faq",
+        "variant": "search"
+      },
+      {
+        "block": "cta",
+        "variant": "quote"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.marketingPricing.home.nav"
+    },
+    {
+      "id": "plans",
+      "path": "plans",
+      "titleKey": "pages.marketingPricing.plans.nav"
+    },
+    {
+      "id": "usage",
+      "path": "usage",
+      "titleKey": "pages.marketingPricing.usage.nav"
+    },
+    {
+      "id": "compare",
+      "path": "compare",
+      "titleKey": "pages.marketingPricing.compare.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-marketing-product.json b/xgen/specs/screens/theme-marketing-product.json
new file mode 100644
index 0000000..4357351
--- /dev/null
+++ b/xgen/specs/screens/theme-marketing-product.json
@@ -0,0 +1,255 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-marketing-product",
+  "name": "ThemeMarketingProductScreen",
+  "kind": "composed",
+  "docs": "Product pages: features as grids, bento, tabs, an accordion and a sticky list, before and after pictures, and the navigation patterns.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "tour",
+      "area": "tour"
+    },
+    {
+      "path": "capabilities",
+      "area": "capabilities"
+    },
+    {
+      "path": "navigation",
+      "area": "navigation"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "sitemap",
+        "variant": "columns"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "hero",
+        "variant": "split",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingProduct.home.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingProduct.home.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.marketingProduct.home.cta"
+            },
+            "href": "#/tour"
+          }
+        }
+      },
+      {
+        "block": "features",
+        "variant": "grid"
+      },
+      {
+        "block": "featuresplit",
+        "variant": "metricCards"
+      },
+      {
+        "block": "featureshowcase",
+        "variant": "panelCards4"
+      },
+      {
+        "block": "bento",
+        "variant": "images"
+      },
+      {
+        "block": "featuretabs",
+        "variant": "split"
+      },
+      {
+        "block": "accordion",
+        "variant": "media"
+      }
+    ],
+    "tour": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingProduct.tour.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingProduct.tour.text"
+          },
+          "cta": {
+            "$": "ui.pages.marketingProduct.tour.cta"
+          },
+          "href": "#/capabilities"
+        }
+      },
+      {
+        "block": "sticky",
+        "variant": "end"
+      },
+      {
+        "block": "beforeafter",
+        "variant": "cards"
+      },
+      {
+        "block": "steps",
+        "variant": "column"
+      },
+      {
+        "block": "videos",
+        "variant": "grid3"
+      },
+      {
+        "block": "megamenu",
+        "variant": "open"
+      }
+    ],
+    "capabilities": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingProduct.capabilities.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingProduct.capabilities.text"
+          },
+          "cta": {
+            "$": "ui.pages.marketingProduct.capabilities.cta"
+          },
+          "href": "#/navigation"
+        }
+      },
+      {
+        "block": "features",
+        "variant": "grid2"
+      },
+      {
+        "block": "iconwall",
+        "variant": "chips6"
+      },
+      {
+        "block": "accordion",
+        "variant": "first"
+      },
+      {
+        "block": "beforeafter",
+        "variant": "rows"
+      },
+      {
+        "block": "sticky",
+        "variant": "card"
+      },
+      {
+        "block": "cta",
+        "variant": "compact"
+      }
+    ],
+    "navigation": [
+      {
+        "block": "pagehead",
+        "variant": "muted",
+        "props": {
+          "title": {
+            "$": "ui.pages.marketingProduct.navigation.title"
+          },
+          "text": {
+            "$": "ui.pages.marketingProduct.navigation.text"
+          },
+          "cta": {
+            "$": "ui.pages.marketingProduct.navigation.cta"
+          },
+          "href": "#/"
+        }
+      },
+      {
+        "block": "header",
+        "variant": "stacked"
+      },
+      {
+        "block": "navbar",
+        "variant": "split"
+      },
+      {
+        "block": "navbar",
+        "variant": "search"
+      },
+      {
+        "block": "navbar",
+        "variant": "media"
+      },
+      {
+        "block": "megamenu",
+        "variant": "twoCols"
+      },
+      {
+        "block": "footer",
+        "variant": "centered"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.marketingProduct.home.nav"
+    },
+    {
+      "id": "tour",
+      "path": "tour",
+      "titleKey": "pages.marketingProduct.tour.nav"
+    },
+    {
+      "id": "capabilities",
+      "path": "capabilities",
+      "titleKey": "pages.marketingProduct.capabilities.nav"
+    },
+    {
+      "id": "navigation",
+      "path": "navigation",
+      "titleKey": "pages.marketingProduct.navigation.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-onboarding-flow.json b/xgen/specs/screens/theme-onboarding-flow.json
new file mode 100644
index 0000000..8587668
--- /dev/null
+++ b/xgen/specs/screens/theme-onboarding-flow.json
@@ -0,0 +1,209 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-onboarding-flow",
+  "name": "ThemeOnboardingFlowScreen",
+  "kind": "composed",
+  "docs": "Onboarding: steps, a checklist that expands, a product tour with callouts, a welcome video and the first empty screen.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "welcome",
+      "area": "welcome"
+    },
+    {
+      "path": "setup",
+      "area": "setup"
+    },
+    {
+      "path": "tour",
+      "area": "tour"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "sitemap",
+        "variant": "row"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.onboardingFlow.home.title"
+          },
+          "text": {
+            "$": "ui.pages.onboardingFlow.home.text"
+          },
+          "cta": {
+            "$": "ui.pages.onboardingFlow.home.cta"
+          },
+          "href": "#/welcome"
+        }
+      },
+      {
+        "block": "stepper",
+        "variant": "horizontal"
+      },
+      {
+        "block": "checklist",
+        "variant": "expand"
+      },
+      {
+        "block": "tour",
+        "variant": "below"
+      }
+    ],
+    "welcome": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.onboardingFlow.welcome.title"
+          },
+          "text": {
+            "$": "ui.pages.onboardingFlow.welcome.text"
+          },
+          "cta": {
+            "$": "ui.pages.onboardingFlow.welcome.cta"
+          },
+          "href": "#/setup"
+        }
+      },
+      {
+        "block": "videomodal",
+        "variant": "default"
+      },
+      {
+        "block": "checklist",
+        "variant": "numbered"
+      }
+    ],
+    "setup": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.onboardingFlow.setup.title"
+          },
+          "text": {
+            "$": "ui.pages.onboardingFlow.setup.text"
+          },
+          "cta": {
+            "$": "ui.pages.onboardingFlow.setup.cta"
+          },
+          "href": "#/tour"
+        }
+      },
+      {
+        "block": "stepper",
+        "variant": "vertical"
+      },
+      {
+        "block": "checklist",
+        "variant": "card"
+      },
+      {
+        "block": "empty",
+        "variant": "compact"
+      }
+    ],
+    "tour": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.onboardingFlow.tour.title"
+          },
+          "text": {
+            "$": "ui.pages.onboardingFlow.tour.text"
+          },
+          "cta": {
+            "$": "ui.pages.onboardingFlow.tour.cta"
+          },
+          "href": "#/"
+        }
+      },
+      {
+        "block": "tour",
+        "variant": "above"
+      },
+      {
+        "block": "tour",
+        "variant": "end"
+      },
+      {
+        "block": "checklist",
+        "variant": "text"
+      },
+      {
+        "block": "videomodal",
+        "variant": "chapters"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.onboardingFlow.home.nav"
+    },
+    {
+      "id": "welcome",
+      "path": "welcome",
+      "titleKey": "pages.onboardingFlow.welcome.nav"
+    },
+    {
+      "id": "setup",
+      "path": "setup",
+      "titleKey": "pages.onboardingFlow.setup.nav"
+    },
+    {
+      "id": "tour",
+      "path": "tour",
+      "titleKey": "pages.onboardingFlow.tour.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-promo-campaign.json b/xgen/specs/screens/theme-promo-campaign.json
new file mode 100644
index 0000000..b4e4682
--- /dev/null
+++ b/xgen/specs/screens/theme-promo-campaign.json
@@ -0,0 +1,237 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-promo-campaign",
+  "name": "ThemePromoCampaignScreen",
+  "kind": "composed",
+  "docs": "Campaign pages: announcement bars in every position and tone, sign-up forms, calls to action with a pattern, and the cookie notice.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "launch",
+      "area": "launch"
+    },
+    {
+      "path": "offer",
+      "area": "offer"
+    },
+    {
+      "path": "notices",
+      "area": "notices"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "footersplit",
+        "variant": "newsletterStart"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "hero",
+        "variant": "cluster",
+        "props": {
+          "title": {
+            "$": "ui.pages.promoCampaign.home.title"
+          },
+          "text": {
+            "$": "ui.pages.promoCampaign.home.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.promoCampaign.home.cta"
+            },
+            "href": "#/launch"
+          }
+        }
+      },
+      {
+        "block": "announcement",
+        "variant": "badge"
+      },
+      {
+        "block": "newsletter",
+        "variant": "split"
+      },
+      {
+        "block": "cta",
+        "variant": "form"
+      },
+      {
+        "block": "cookie",
+        "variant": "card"
+      }
+    ],
+    "launch": [
+      {
+        "block": "hero",
+        "variant": "saas",
+        "props": {
+          "title": {
+            "$": "ui.pages.promoCampaign.launch.title"
+          },
+          "text": {
+            "$": "ui.pages.promoCampaign.launch.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.promoCampaign.launch.cta"
+            },
+            "href": "#/offer"
+          }
+        }
+      },
+      {
+        "block": "announcement",
+        "variant": "bar"
+      },
+      {
+        "block": "newsletter",
+        "variant": "inline"
+      },
+      {
+        "block": "logos",
+        "variant": "tiles4"
+      },
+      {
+        "block": "cta",
+        "variant": "saas"
+      }
+    ],
+    "offer": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.promoCampaign.offer.title"
+          },
+          "text": {
+            "$": "ui.pages.promoCampaign.offer.text"
+          },
+          "cta": {
+            "$": "ui.pages.promoCampaign.offer.cta"
+          },
+          "href": "#/notices"
+        }
+      },
+      {
+        "block": "announcement",
+        "variant": "badge"
+      },
+      {
+        "block": "announcement",
+        "variant": "split"
+      },
+      {
+        "block": "announcement",
+        "variant": "shop"
+      },
+      {
+        "block": "cta",
+        "variant": "shop"
+      },
+      {
+        "block": "newsletter",
+        "variant": "consent"
+      }
+    ],
+    "notices": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.promoCampaign.notices.title"
+          },
+          "text": {
+            "$": "ui.pages.promoCampaign.notices.text"
+          },
+          "cta": {
+            "$": "ui.pages.promoCampaign.notices.cta"
+          },
+          "href": "#/"
+        }
+      },
+      {
+        "block": "announcement",
+        "variant": "dismissible"
+      },
+      {
+        "block": "announcement",
+        "variant": "bottom"
+      },
+      {
+        "block": "cookie",
+        "variant": "settings"
+      },
+      {
+        "block": "cookie",
+        "variant": "bar"
+      },
+      {
+        "block": "newsletter",
+        "variant": "muted"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.promoCampaign.home.nav"
+    },
+    {
+      "id": "launch",
+      "path": "launch",
+      "titleKey": "pages.promoCampaign.launch.nav"
+    },
+    {
+      "id": "offer",
+      "path": "offer",
+      "titleKey": "pages.promoCampaign.offer.nav"
+    },
+    {
+      "id": "notices",
+      "path": "notices",
+      "titleKey": "pages.promoCampaign.notices.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/screens/theme-support-center.json b/xgen/specs/screens/theme-support-center.json
new file mode 100644
index 0000000..aca5ae5
--- /dev/null
+++ b/xgen/specs/screens/theme-support-center.json
@@ -0,0 +1,232 @@
+{
+  "$schema": "../../schema/schemas/composed.schema.json",
+  "specVersion": 1,
+  "id": "screen.theme-support-center",
+  "name": "ThemeSupportCenterScreen",
+  "kind": "composed",
+  "docs": "A help center: channels, FAQ as tabs, chat and search, contact forms, and the pages for a missing or moved address.",
+  "routes": [
+    {
+      "path": "",
+      "area": "home"
+    },
+    {
+      "path": "faq",
+      "area": "faq"
+    },
+    {
+      "path": "contact",
+      "area": "contact"
+    },
+    {
+      "path": "missing",
+      "area": "missing"
+    },
+    {
+      "path": "moved",
+      "area": "moved"
+    }
+  ],
+  "frame": {
+    "before": [
+      {
+        "block": "navbar",
+        "variant": "inline",
+        "props": {
+          "brandHref": "#/",
+          "links": {
+            "$": "nav.links"
+          },
+          "current": {
+            "$": "nav.current"
+          },
+          "skip": {
+            "$": "ui.site.header.skip"
+          },
+          "actions": {
+            "themeLabel": {
+              "$": "ui.theme.toggle"
+            }
+          }
+        }
+      }
+    ],
+    "after": [
+      {
+        "block": "sitemap",
+        "variant": "status"
+      }
+    ]
+  },
+  "areas": {
+    "home": [
+      {
+        "block": "pagehead",
+        "variant": "center",
+        "props": {
+          "title": {
+            "$": "ui.pages.supportCenter.home.title"
+          },
+          "text": {
+            "$": "ui.pages.supportCenter.home.text"
+          },
+          "cta": {
+            "$": "ui.pages.supportCenter.home.cta"
+          },
+          "href": "#/faq"
+        }
+      },
+      {
+        "block": "channels",
+        "variant": "grid"
+      },
+      {
+        "block": "medialist",
+        "variant": "topicRows"
+      },
+      {
+        "block": "faq",
+        "variant": "tabs"
+      },
+      {
+        "block": "contact",
+        "variant": "split"
+      }
+    ],
+    "faq": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.supportCenter.faq.title"
+          },
+          "text": {
+            "$": "ui.pages.supportCenter.faq.text"
+          },
+          "cta": {
+            "$": "ui.pages.supportCenter.faq.cta"
+          },
+          "href": "#/contact"
+        }
+      },
+      {
+        "block": "faq",
+        "variant": "chat"
+      },
+      {
+        "block": "faq",
+        "variant": "search"
+      }
+    ],
+    "contact": [
+      {
+        "block": "pagehead",
+        "variant": "start",
+        "props": {
+          "title": {
+            "$": "ui.pages.supportCenter.contact.title"
+          },
+          "text": {
+            "$": "ui.pages.supportCenter.contact.text"
+          },
+          "cta": {
+            "$": "ui.pages.supportCenter.contact.cta"
+          },
+          "href": "#/missing"
+        }
+      },
+      {
+        "block": "contact",
+        "variant": "single"
+      },
+      {
+        "block": "channels",
+        "variant": "list"
+      },
+      {
+        "block": "contact",
+        "variant": "consent"
+      }
+    ],
+    "missing": [
+      {
+        "block": "errorpage",
+        "variant": "centered",
+        "props": {
+          "title": {
+            "$": "ui.pages.supportCenter.missing.title"
+          },
+          "text": {
+            "$": "ui.pages.supportCenter.missing.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.supportCenter.missing.cta"
+            },
+            "href": "#/moved"
+          }
+        }
+      }
+    ],
+    "moved": [
+      {
+        "block": "errorpage",
+        "variant": "split",
+        "props": {
+          "title": {
+            "$": "ui.pages.supportCenter.moved.title"
+          },
+          "text": {
+            "$": "ui.pages.supportCenter.moved.text"
+          },
+          "actions": {
+            "cta": {
+              "$": "ui.pages.supportCenter.moved.cta"
+            },
+            "href": "#/"
+          }
+        }
+      },
+      {
+        "block": "channels",
+        "variant": "twoUp"
+      }
+    ]
+  },
+  "chunks": true,
+  "requireH1": true,
+  "nameLandmarks": true,
+  "nav": true,
+  "menu": [
+    {
+      "id": "home",
+      "path": "",
+      "titleKey": "pages.supportCenter.home.nav"
+    },
+    {
+      "id": "faq",
+      "path": "faq",
+      "titleKey": "pages.supportCenter.faq.nav"
+    },
+    {
+      "id": "contact",
+      "path": "contact",
+      "titleKey": "pages.supportCenter.contact.nav"
+    },
+    {
+      "id": "missing",
+      "path": "missing",
+      "titleKey": "pages.supportCenter.missing.nav"
+    },
+    {
+      "id": "moved",
+      "path": "moved",
+      "titleKey": "pages.supportCenter.moved.nav"
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/alert.json b/xgen/specs/ui/alert.json
new file mode 100644
index 0000000..1988fed
--- /dev/null
+++ b/xgen/specs/ui/alert.json
@@ -0,0 +1,165 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.alert",
+  "tier": "brick",
+  "dir": "alert",
+  "docs": "Alert displays a static status or informational message.\nRenders a live region with role=status by default; children carry the message body.",
+  "variants": {
+    "alert": "alert.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Alert",
+      "docs": "Alert renders a div with alert or status semantics.",
+      "recipeId": "alert",
+      "asChild": true,
+      "classes": {
+        "recipe": {
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "default, destructive, or wireframe preset"
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "enumValues": [
+            "status",
+            "alert"
+          ],
+          "docs": "status or alert (defaults to status)"
+        },
+        {
+          "name": "AriaLive",
+          "type": "string",
+          "cva": false,
+          "enumValues": [
+            "off",
+            "polite",
+            "assertive"
+          ],
+          "docs": "polite or assertive (defaults to polite)"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "static",
+            "name": "data-slot",
+            "value": "alert"
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "mapOr",
+              "expr": {
+                "kind": "prop",
+                "name": "Role"
+              },
+              "mapping": {
+                "status": "status",
+                "alert": "alert"
+              },
+              "fallback": "status"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-live",
+            "expr": {
+              "kind": "defaultIfEmpty",
+              "expr": {
+                "kind": "prop",
+                "name": "AriaLive"
+              },
+              "fallback": "polite"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-live",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-slot",
+          "kind": "static",
+          "value": "alert"
+        }
+      ],
+      "tokens": [
+        "--border",
+        "--card",
+        "--card-foreground",
+        "--destructive",
+        "--foreground",
+        "--muted"
+      ]
+    }
+  ],
+  "examples": [],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/alert.variants.json b/xgen/specs/ui/alert.variants.json
new file mode 100644
index 0000000..0f65ae1
--- /dev/null
+++ b/xgen/specs/ui/alert.variants.json
@@ -0,0 +1,19 @@
+{
+  "id": "ui.alert",
+  "base": "flex min-h-8 items-center gap-2 px-2 text-xs font-semibold inset-ring rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-card text-card-foreground inset-ring-border",
+      "destructive": "bg-muted text-destructive inset-ring-destructive",
+      "success": "bg-muted text-foreground inset-ring-border",
+      "warning": "bg-muted text-foreground inset-ring-border"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/badge.json b/xgen/specs/ui/badge.json
new file mode 100644
index 0000000..4733be2
--- /dev/null
+++ b/xgen/specs/ui/badge.json
@@ -0,0 +1,156 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.badge",
+  "tier": "brick",
+  "dir": "badge",
+  "docs": "Badge shows a short status label.\nBadge uses variant and size presets.",
+  "variants": {
+    "badge": "badge.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Badge",
+      "docs": "Badge renders label text in a div wrapper.",
+      "recipeId": "badge",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "color preset: default, secondary, destructive, outline"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "density preset: default, sm, lg"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "static",
+            "name": "data-slot",
+            "value": "badge"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-slot",
+          "kind": "static",
+          "value": "badge"
+        }
+      ],
+      "tokens": [
+        "--border",
+        "--destructive",
+        "--foreground",
+        "--muted",
+        "--primary",
+        "--primary-foreground"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "size.lg",
+      "props": {
+        "Size": "lg",
+        "Variant": "default"
+      }
+    },
+    {
+      "id": "size.sm",
+      "props": {
+        "Size": "sm",
+        "Variant": "default"
+      }
+    },
+    {
+      "id": "variant.default",
+      "props": {
+        "Size": "default",
+        "Variant": "default"
+      }
+    },
+    {
+      "id": "variant.destructive",
+      "props": {
+        "Size": "default",
+        "Variant": "destructive"
+      }
+    },
+    {
+      "id": "variant.outline",
+      "props": {
+        "Size": "default",
+        "Variant": "outline"
+      }
+    },
+    {
+      "id": "variant.secondary",
+      "props": {
+        "Size": "default",
+        "Variant": "secondary"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/badge.variants.json b/xgen/specs/ui/badge.variants.json
new file mode 100644
index 0000000..43e704a
--- /dev/null
+++ b/xgen/specs/ui/badge.variants.json
@@ -0,0 +1,26 @@
+{
+  "id": "ui.badge",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring rounded-full",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-5 px-2 text-xs",
+      "default": "h-6 px-3 text-xs",
+      "lg": "h-8 px-4 text-sm"
+    },
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "secondary": "bg-muted text-foreground inset-ring-transparent",
+      "outline": "bg-transparent text-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/block.json b/xgen/specs/ui/block.json
new file mode 100644
index 0000000..5f3b4bc
--- /dev/null
+++ b/xgen/specs/ui/block.json
@@ -0,0 +1,140 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.block",
+  "tier": "brick",
+  "dir": "block",
+  "docs": "Block is the one semantic root of a file (div, section, article, aside, header, footer, main, nav, figure, search, hgroup).\nAny file (block, composite, screen) may open on one Block; never nest Block inside Block in one file, never repeat it in a loop.",
+  "variants": {
+    "block": "block.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Block",
+      "docs": "Block renders a resolved landmark element with children.",
+      "recipeId": "block",
+      "asChild": true,
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Tag",
+          "type": "string",
+          "cva": false,
+          "docs": "semantic tag: div (default), section, article, aside, header, footer, main, nav, figure, search, hgroup"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "resolved",
+          "fromProp": "Tag",
+          "fallback": "div",
+          "group": "Layout"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div",
+          "(Layout)"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "tag.footer",
+      "props": {
+        "Class": "border-t border-border",
+        "Tag": "footer"
+      }
+    },
+    {
+      "id": "tag.header",
+      "props": {
+        "Class": "border-b border-border",
+        "Tag": "header"
+      }
+    },
+    {
+      "id": "tag.main",
+      "props": {
+        "Class": "min-h-screen",
+        "Tag": "main"
+      }
+    },
+    {
+      "id": "tag.nav",
+      "props": {
+        "Class": "py-2",
+        "Tag": "nav"
+      }
+    },
+    {
+      "id": "tag.section",
+      "props": {
+        "Class": "py-8",
+        "Tag": "section"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/block.variants.json b/xgen/specs/ui/block.variants.json
new file mode 100644
index 0000000..9fbbb7e
--- /dev/null
+++ b/xgen/specs/ui/block.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.block",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/box.json b/xgen/specs/ui/box.json
new file mode 100644
index 0000000..9a75211
--- /dev/null
+++ b/xgen/specs/ui/box.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.box",
+  "tier": "brick",
+  "dir": "box",
+  "docs": "Box is a generic layout wrapper for internal sections.\nNot for top-level landmarks — use Block for page regions.",
+  "variants": {
+    "box": "box.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Box",
+      "docs": "Box renders a div layout wrapper.",
+      "recipeId": "box",
+      "asChild": true,
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Tag",
+          "type": "string",
+          "cva": false,
+          "docs": "div only. Use Block for landmarks (aside, section, header, nav)."
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "resolved",
+          "fromProp": "Tag",
+          "fallback": "div",
+          "group": "BoxAllowed"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div",
+          "(BoxAllowed)"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "tag.default",
+      "props": {
+        "Tag": "div"
+      }
+    },
+    {
+      "id": "class.padded",
+      "props": {
+        "Class": "p-4 rounded border border-border"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/box.variants.json b/xgen/specs/ui/box.variants.json
new file mode 100644
index 0000000..cd33c18
--- /dev/null
+++ b/xgen/specs/ui/box.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.box",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/breadcrumb.json b/xgen/specs/ui/breadcrumb.json
new file mode 100644
index 0000000..8ae0d79
--- /dev/null
+++ b/xgen/specs/ui/breadcrumb.json
@@ -0,0 +1,340 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.breadcrumb",
+  "tier": "brick",
+  "dir": "breadcrumb",
+  "docs": "Breadcrumb shows the current page location within a hierarchy.\nRenders nav with ordered links and aria-current on the active item.",
+  "variants": {},
+  "recordTypes": [
+    {
+      "name": "BreadcrumbItem",
+      "fields": [
+        {
+          "name": "Label",
+          "type": "string"
+        },
+        {
+          "name": "Href",
+          "type": "string"
+        },
+        {
+          "name": "Current",
+          "type": "bool",
+          "docs": "marks the active page (aria-current=page)"
+        },
+        {
+          "name": "Disabled",
+          "type": "bool"
+        }
+      ]
+    }
+  ],
+  "parts": [
+    {
+      "name": "Breadcrumb",
+      "docs": "Breadcrumb renders the full navigation trail.",
+      "classes": {
+        "staticBase": "text-sm"
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Items",
+          "type": "items",
+          "cva": false,
+          "itemsOf": "BreadcrumbItem"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "DataUI8Kit",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "opt-in behavior hook; empty emits nothing"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "nav"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "data-ui8kit",
+            "expr": {
+              "kind": "prop",
+              "name": "DataUI8Kit"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "ol"
+            },
+            "attrs": [
+              {
+                "kind": "static",
+                "name": "class",
+                "value": "flex flex-wrap items-center gap-2"
+              }
+            ],
+            "children": [
+              {
+                "kind": "forEach",
+                "itemsProp": "Items",
+                "body": [
+                  {
+                    "kind": "element",
+                    "tag": {
+                      "kind": "static",
+                      "tag": "li"
+                    },
+                    "attrs": [
+                      {
+                        "kind": "static",
+                        "name": "class",
+                        "value": "inline-flex items-center"
+                      }
+                    ],
+                    "children": [
+                      {
+                        "kind": "when",
+                        "test": {
+                          "kind": "and",
+                          "exprs": [
+                            {
+                              "kind": "isSet",
+                              "expr": {
+                                "kind": "item",
+                                "field": "Href"
+                              }
+                            },
+                            {
+                              "kind": "not",
+                              "expr": {
+                                "kind": "item",
+                                "field": "Disabled"
+                              }
+                            }
+                          ]
+                        },
+                        "then": [
+                          {
+                            "kind": "element",
+                            "tag": {
+                              "kind": "static",
+                              "tag": "a"
+                            },
+                            "attrs": [
+                              {
+                                "kind": "expr",
+                                "name": "href",
+                                "expr": {
+                                  "kind": "item",
+                                  "field": "Href"
+                                }
+                              },
+                              {
+                                "kind": "class",
+                                "spec": {
+                                  "staticBase": "text-sm",
+                                  "extra": [
+                                    {
+                                      "kind": "cond",
+                                      "test": {
+                                        "kind": "item",
+                                        "field": "Current"
+                                      },
+                                      "then": {
+                                        "kind": "lit",
+                                        "value": "font-medium"
+                                      },
+                                      "else": {
+                                        "kind": "cond",
+                                        "test": {
+                                          "kind": "item",
+                                          "field": "Disabled"
+                                        },
+                                        "then": {
+                                          "kind": "lit",
+                                          "value": "text-muted-foreground"
+                                        },
+                                        "else": {
+                                          "kind": "lit",
+                                          "value": "text-primary underline-offset-4 hover:underline"
+                                        }
+                                      }
+                                    }
+                                  ],
+                                  "includeClassProp": false
+                                }
+                              },
+                              {
+                                "kind": "expr",
+                                "name": "aria-current",
+                                "expr": {
+                                  "kind": "lit",
+                                  "value": "page"
+                                },
+                                "when": {
+                                  "kind": "item",
+                                  "field": "Current"
+                                }
+                              }
+                            ],
+                            "children": [
+                              {
+                                "kind": "text",
+                                "expr": {
+                                  "kind": "item",
+                                  "field": "Label"
+                                }
+                              }
+                            ]
+                          }
+                        ],
+                        "else": [
+                          {
+                            "kind": "element",
+                            "tag": {
+                              "kind": "static",
+                              "tag": "span"
+                            },
+                            "attrs": [
+                              {
+                                "kind": "class",
+                                "spec": {
+                                  "staticBase": "text-sm",
+                                  "extra": [
+                                    {
+                                      "kind": "cond",
+                                      "test": {
+                                        "kind": "item",
+                                        "field": "Current"
+                                      },
+                                      "then": {
+                                        "kind": "lit",
+                                        "value": "font-medium"
+                                      },
+                                      "else": {
+                                        "kind": "cond",
+                                        "test": {
+                                          "kind": "item",
+                                          "field": "Disabled"
+                                        },
+                                        "then": {
+                                          "kind": "lit",
+                                          "value": "text-muted-foreground"
+                                        },
+                                        "else": {
+                                          "kind": "lit",
+                                          "value": "text-primary underline-offset-4 hover:underline"
+                                        }
+                                      }
+                                    }
+                                  ],
+                                  "includeClassProp": false
+                                }
+                              },
+                              {
+                                "kind": "expr",
+                                "name": "aria-current",
+                                "expr": {
+                                  "kind": "lit",
+                                  "value": "page"
+                                },
+                                "when": {
+                                  "kind": "item",
+                                  "field": "Current"
+                                }
+                              }
+                            ],
+                            "children": [
+                              {
+                                "kind": "text",
+                                "expr": {
+                                  "kind": "item",
+                                  "field": "Label"
+                                }
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "nav"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-current",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-ui8kit",
+          "kind": "expr"
+        }
+      ],
+      "tokens": []
+    }
+  ],
+  "examples": [],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/button-plain.json b/xgen/specs/ui/button-plain.json
new file mode 100644
index 0000000..06c762e
--- /dev/null
+++ b/xgen/specs/ui/button-plain.json
@@ -0,0 +1,203 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.button-plain",
+  "tier": "brick",
+  "dir": "button-plain",
+  "docs": "ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it themselves.",
+  "variants": {
+    "button-plain": "button-plain.variants.json"
+  },
+  "parts": [
+    {
+      "name": "ButtonPlain",
+      "docs": "ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it themselves.",
+      "recipeId": "button-plain",
+      "classes": {
+        "recipe": {},
+        "state": [
+          {
+            "test": {
+              "kind": "prop",
+              "name": "Disabled"
+            },
+            "classes": "pointer-events-none opacity-50"
+          }
+        ]
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Type",
+          "type": "string",
+          "cva": false,
+          "docs": "button type: button, submit, reset (ignored when Href is set)"
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false,
+          "docs": "blocks interaction"
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "element id"
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "ARIA role override"
+        },
+        {
+          "name": "TabIndex",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "tab order override"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "accessible name for unlabeled controls"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "button"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "type",
+            "expr": {
+              "kind": "mapOr",
+              "expr": {
+                "kind": "prop",
+                "name": "Type"
+              },
+              "mapping": {
+                "submit": "submit",
+                "reset": "reset"
+              },
+              "fallback": "button"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "prop",
+              "name": "Role"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "tabindex",
+            "expr": {
+              "kind": "prop",
+              "name": "TabIndex"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "button"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "default",
+      "props": {}
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/button-plain.variants.json b/xgen/specs/ui/button-plain.variants.json
new file mode 100644
index 0000000..aa14652
--- /dev/null
+++ b/xgen/specs/ui/button-plain.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.button-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/button.json b/xgen/specs/ui/button.json
new file mode 100644
index 0000000..bcdf59a
--- /dev/null
+++ b/xgen/specs/ui/button.json
@@ -0,0 +1,589 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.button",
+  "tier": "brick",
+  "dir": "button",
+  "docs": "Button triggers an action on click.\nOptional Href renders an anchor with button appearance (CTA navigation).\nFor exotic roots, use ButtonClasses (Templ/Svelte/Vue/Solid) or asChild (React).\nPrefer Link for prose/semantic navigation.",
+  "variants": {
+    "button": "button.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Button",
+      "docs": "Button renders a button element, or an anchor when Href is set.\nType/Form apply only in button mode; Disabled on anchors uses aria-disabled.",
+      "recipeId": "button",
+      "asChild": true,
+      "classes": {
+        "recipe": {
+          "variant": "Variant",
+          "size": "Size",
+          "layout": "Layout"
+        },
+        "state": [
+          {
+            "test": {
+              "kind": "prop",
+              "name": "Disabled"
+            },
+            "classes": "pointer-events-none opacity-50"
+          }
+        ]
+      },
+      "derived": {
+        "target": {
+          "kind": "cond",
+          "test": {
+            "kind": "isSet",
+            "expr": {
+              "kind": "prop",
+              "name": "Target"
+            }
+          },
+          "then": {
+            "kind": "prop",
+            "name": "Target"
+          },
+          "else": {
+            "kind": "cond",
+            "test": {
+              "kind": "prop",
+              "name": "External"
+            },
+            "then": {
+              "kind": "lit",
+              "value": "_blank"
+            },
+            "else": {
+              "kind": "lit",
+              "value": ""
+            }
+          }
+        },
+        "rel": {
+          "kind": "cond",
+          "test": {
+            "kind": "isSet",
+            "expr": {
+              "kind": "prop",
+              "name": "Rel"
+            }
+          },
+          "then": {
+            "kind": "prop",
+            "name": "Rel"
+          },
+          "else": {
+            "kind": "cond",
+            "test": {
+              "kind": "or",
+              "exprs": [
+                {
+                  "kind": "prop",
+                  "name": "External"
+                },
+                {
+                  "kind": "eq",
+                  "left": {
+                    "kind": "derivedRef",
+                    "name": "target"
+                  },
+                  "right": {
+                    "kind": "lit",
+                    "value": "_blank"
+                  }
+                }
+              ]
+            },
+            "then": {
+              "kind": "lit",
+              "value": "noopener noreferrer"
+            },
+            "else": {
+              "kind": "lit",
+              "value": ""
+            }
+          }
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "appearance preset: default, secondary, destructive, outline, ghost, link"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "density preset: default, sm, lg, icon"
+        },
+        {
+          "name": "Layout",
+          "type": "string",
+          "cva": true,
+          "docs": "sets layout"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Type",
+          "type": "string",
+          "cva": false,
+          "docs": "button type: button, submit, reset (ignored when Href is set)"
+        },
+        {
+          "name": "Form",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "links button to a form id (ignored when Href is set)"
+        },
+        {
+          "name": "Href",
+          "type": "string",
+          "cva": false,
+          "docs": "when set, renders an anchor with button appearance"
+        },
+        {
+          "name": "Target",
+          "type": "string",
+          "cva": false,
+          "docs": "explicit target; External implies _blank (anchor mode)"
+        },
+        {
+          "name": "Rel",
+          "type": "string",
+          "cva": false,
+          "docs": "explicit rel; external links default to noopener noreferrer (anchor mode)"
+        },
+        {
+          "name": "External",
+          "type": "bool",
+          "cva": false,
+          "docs": "opens in a new tab with safe rel defaults (anchor mode)"
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false,
+          "docs": "blocks interaction"
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "element id"
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "ARIA role override"
+        },
+        {
+          "name": "TabIndex",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "tab order override"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "accessible name for unlabeled controls"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "when",
+        "test": {
+          "kind": "isSet",
+          "expr": {
+            "kind": "prop",
+            "name": "Href"
+          }
+        },
+        "then": [
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "a"
+            },
+            "attrs": [
+              {
+                "kind": "expr",
+                "name": "href",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Href"
+                }
+              },
+              {
+                "kind": "class"
+              },
+              {
+                "kind": "static",
+                "name": "data-slot",
+                "value": "button"
+              },
+              {
+                "kind": "expr",
+                "name": "id",
+                "expr": {
+                  "kind": "prop",
+                  "name": "ID"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "target",
+                "expr": {
+                  "kind": "derivedRef",
+                  "name": "target"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "rel",
+                "expr": {
+                  "kind": "derivedRef",
+                  "name": "rel"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "role",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Role"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "aria-label",
+                "expr": {
+                  "kind": "prop",
+                  "name": "AriaLabel"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "aria-disabled",
+                "expr": {
+                  "kind": "lit",
+                  "value": "true"
+                },
+                "when": {
+                  "kind": "prop",
+                  "name": "Disabled"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "tabindex",
+                "expr": {
+                  "kind": "lit",
+                  "value": -1
+                },
+                "when": {
+                  "kind": "prop",
+                  "name": "Disabled"
+                }
+              },
+              {
+                "kind": "rest"
+              }
+            ],
+            "children": [
+              {
+                "kind": "slot"
+              }
+            ]
+          }
+        ],
+        "else": [
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "button"
+            },
+            "attrs": [
+              {
+                "kind": "expr",
+                "name": "type",
+                "expr": {
+                  "kind": "mapOr",
+                  "expr": {
+                    "kind": "prop",
+                    "name": "Type"
+                  },
+                  "mapping": {
+                    "submit": "submit",
+                    "reset": "reset"
+                  },
+                  "fallback": "button"
+                }
+              },
+              {
+                "kind": "class"
+              },
+              {
+                "kind": "static",
+                "name": "data-slot",
+                "value": "button"
+              },
+              {
+                "kind": "bool",
+                "name": "disabled",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Disabled"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "id",
+                "expr": {
+                  "kind": "prop",
+                  "name": "ID"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "form",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Form"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "role",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Role"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "tabindex",
+                "expr": {
+                  "kind": "prop",
+                  "name": "TabIndex"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "aria-label",
+                "expr": {
+                  "kind": "prop",
+                  "name": "AriaLabel"
+                }
+              },
+              {
+                "kind": "rest"
+              }
+            ],
+            "children": [
+              {
+                "kind": "slot"
+              }
+            ]
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "a",
+          "button"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-disabled",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-slot",
+          "kind": "static",
+          "value": "button"
+        },
+        {
+          "name": "data-slot",
+          "kind": "static",
+          "value": "button"
+        }
+      ],
+      "tokens": [
+        "--background",
+        "--border",
+        "--card",
+        "--destructive",
+        "--foreground",
+        "--muted-foreground",
+        "--primary",
+        "--primary-foreground",
+        "--secondary",
+        "--secondary-foreground"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "size.lg",
+      "props": {
+        "Size": "lg",
+        "Variant": "default"
+      }
+    },
+    {
+      "id": "size.sm",
+      "props": {
+        "Size": "sm",
+        "Variant": "default"
+      }
+    },
+    {
+      "id": "state.disabled",
+      "props": {
+        "Disabled": true,
+        "Variant": "default"
+      }
+    },
+    {
+      "id": "state.reset",
+      "props": {
+        "Type": "reset",
+        "Variant": "outline"
+      }
+    },
+    {
+      "id": "state.submit",
+      "props": {
+        "Type": "submit",
+        "Variant": "default"
+      }
+    },
+    {
+      "id": "variant.default",
+      "props": {
+        "Size": "default",
+        "Variant": "default"
+      }
+    },
+    {
+      "id": "variant.destructive",
+      "props": {
+        "Size": "default",
+        "Variant": "destructive"
+      }
+    },
+    {
+      "id": "variant.ghost",
+      "props": {
+        "Size": "sm",
+        "Variant": "ghost"
+      }
+    },
+    {
+      "id": "variant.link",
+      "props": {
+        "Variant": "link"
+      }
+    },
+    {
+      "id": "variant.outline",
+      "props": {
+        "Size": "sm",
+        "Variant": "outline"
+      }
+    },
+    {
+      "id": "variant.secondary",
+      "props": {
+        "Size": "default",
+        "Variant": "secondary"
+      }
+    },
+    {
+      "id": "composition.aschild-link",
+      "props": {
+        "AsChild": true,
+        "Variant": "outline",
+        "Size": "sm"
+      }
+    },
+    {
+      "id": "composition.href",
+      "props": {
+        "Href": "/cart",
+        "Variant": "default",
+        "Size": "default"
+      }
+    },
+    {
+      "id": "composition.href-external",
+      "props": {
+        "Href": "https://example.com",
+        "External": true,
+        "Variant": "outline",
+        "Size": "sm"
+      }
+    },
+    {
+      "id": "composition.href-disabled",
+      "props": {
+        "Href": "/cart",
+        "Disabled": true,
+        "Variant": "secondary"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/button.variants.json b/xgen/specs/ui/button.variants.json
new file mode 100644
index 0000000..80103fb
--- /dev/null
+++ b/xgen/specs/ui/button.variants.json
@@ -0,0 +1,60 @@
+{
+  "id": "ui.button",
+  "base": "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium inset-ring transition-colors disabled:pointer-events-none disabled:opacity-50 rounded",
+  "keys": [
+    "variant",
+    "size",
+    "layout"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default",
+    "layout": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-primary text-primary-foreground inset-ring-primary",
+      "outline": "bg-card text-foreground inset-ring-border",
+      "ghost": "bg-transparent text-foreground inset-ring-transparent",
+      "secondary": "bg-secondary text-secondary-foreground inset-ring-border",
+      "destructive": "bg-destructive text-white hover:bg-destructive/90 inset-ring-transparent focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      "link": "text-foreground inset-ring-transparent underline-offset-4 hover:underline"
+    },
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-4 text-sm",
+      "lg": "h-12 px-6 text-base"
+    },
+    "layout": {
+      "default": "",
+      "icon": ""
+    }
+  },
+  "compound": [
+    {
+      "layout": "icon",
+      "size": "sm",
+      "class": "size-8 p-0 [&>svg]:size-4"
+    },
+    {
+      "layout": "icon",
+      "size": "default",
+      "class": "size-10 p-0 [&>svg]:size-5"
+    },
+    {
+      "layout": "icon",
+      "size": "lg",
+      "class": "size-12 p-0 [&>svg]:size-6"
+    },
+    {
+      "variant": "outline",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    },
+    {
+      "variant": "ghost",
+      "layout": "icon",
+      "class": "text-muted-foreground"
+    }
+  ]
+}
diff --git a/xgen/specs/ui/card.json b/xgen/specs/ui/card.json
new file mode 100644
index 0000000..aa34cb4
--- /dev/null
+++ b/xgen/specs/ui/card.json
@@ -0,0 +1,431 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.card",
+  "tier": "brick",
+  "dir": "card",
+  "docs": "Card groups related content in one bordered surface.\nCard uses header, content, and footer slots.\nFor semantic root elements (section, article), use CardClasses on a manual wrapper.",
+  "variants": {
+    "card": "card.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Card",
+      "docs": "Card renders the bordered surface wrapper.",
+      "recipeId": "card",
+      "asChild": true,
+      "classes": {
+        "recipe": {
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "surface: default, muted, ghost, compact"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "static",
+            "name": "data-slot",
+            "value": "card"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-slot",
+          "kind": "static",
+          "value": "card"
+        }
+      ],
+      "tokens": [
+        "--border",
+        "--card",
+        "--card-foreground",
+        "--muted",
+        "--primary"
+      ]
+    },
+    {
+      "name": "CardHeader",
+      "docs": "CardHeader renders the top slot.",
+      "classes": {
+        "staticBase": "grid auto-rows-min items-start gap-2"
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "CardTitle",
+      "docs": "CardTitle renders heading text at the As level (default h2).",
+      "classes": {
+        "staticBase": "font-semibold leading-none"
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "As",
+          "type": "int",
+          "cva": false,
+          "enumValues": [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6"
+          ],
+          "goType": "uiutils.HeadingLevel",
+          "docs": "maps to h1-h6 (default h2)"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "heading",
+          "fromProp": "As"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "CardDescription",
+      "docs": "CardDescription renders a muted subtitle in a p element.",
+      "classes": {
+        "staticBase": "text-sm text-muted-foreground"
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "p"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "p"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "CardContent",
+      "docs": "CardContent renders the padded main body slot.",
+      "classes": {
+        "staticBase": ""
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "CardFooter",
+      "docs": "CardFooter renders the bottom action slot.",
+      "classes": {
+        "staticBase": "flex items-center"
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/card.variants.json b/xgen/specs/ui/card.variants.json
new file mode 100644
index 0000000..276e144
--- /dev/null
+++ b/xgen/specs/ui/card.variants.json
@@ -0,0 +1,19 @@
+{
+  "id": "ui.card",
+  "base": "flex flex-col gap-8 bg-card p-6 text-card-foreground inset-ring inset-ring-border rounded",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "",
+      "muted": "bg-muted",
+      "ghost": "bg-transparent",
+      "compact": "gap-4 p-4"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/checkbox.json b/xgen/specs/ui/checkbox.json
new file mode 100644
index 0000000..9a3c58a
--- /dev/null
+++ b/xgen/specs/ui/checkbox.json
@@ -0,0 +1,257 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.checkbox",
+  "tier": "brick",
+  "dir": "checkbox",
+  "docs": "Checkbox is a native boolean form control.\nWireframe styling via Variant and Size; supports standard ARIA attrs.",
+  "variants": {
+    "checkbox": "checkbox.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Checkbox",
+      "docs": "Checkbox renders a styled input[type=checkbox].",
+      "recipeId": "checkbox",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Checked",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Required",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "element id"
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "ARIA role override"
+        },
+        {
+          "name": "TabIndex",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "tab order override"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "accessible name for unlabeled controls"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "input"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "static",
+            "name": "type",
+            "value": "checkbox"
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "bool",
+            "name": "checked",
+            "expr": {
+              "kind": "prop",
+              "name": "Checked"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "required",
+            "expr": {
+              "kind": "prop",
+              "name": "Required"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "prop",
+              "name": "Role"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "tabindex",
+            "expr": {
+              "kind": "prop",
+              "name": "TabIndex"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "input"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--background",
+        "--border",
+        "--muted",
+        "--primary"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "state.checked",
+      "props": {
+        "Checked": true,
+        "ID": "terms",
+        "Name": "terms"
+      }
+    },
+    {
+      "id": "state.disabled",
+      "props": {
+        "Checked": true,
+        "Disabled": true,
+        "Name": "locked"
+      }
+    },
+    {
+      "id": "state.unchecked",
+      "props": {
+        "ID": "terms",
+        "Name": "terms"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/checkbox.variants.json b/xgen/specs/ui/checkbox.variants.json
new file mode 100644
index 0000000..b300bbf
--- /dev/null
+++ b/xgen/specs/ui/checkbox.variants.json
@@ -0,0 +1,23 @@
+{
+  "id": "ui.checkbox",
+  "base": "peer shrink-0 appearance-none bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary checkbox-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5",
+      "sm": "size-4"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/container.json b/xgen/specs/ui/container.json
new file mode 100644
index 0000000..16f3009
--- /dev/null
+++ b/xgen/specs/ui/container.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.container",
+  "tier": "brick",
+  "dir": "container",
+  "docs": "Container wraps page content with a constrained width shell.\nOptional main or section tag for inner layout regions.",
+  "variants": {
+    "container": "container.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Container",
+      "docs": "Container renders the outer content shell.",
+      "recipeId": "container",
+      "asChild": true,
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Tag",
+          "type": "string",
+          "cva": false,
+          "docs": "div, main, or section"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "resolved",
+          "fromProp": "Tag",
+          "fallback": "div",
+          "group": "Container"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div",
+          "(Container)"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "tag.default",
+      "props": {
+        "Class": "mx-auto max-w-5xl px-6",
+        "Tag": "div"
+      }
+    },
+    {
+      "id": "tag.main",
+      "props": {
+        "Class": "mx-auto max-w-5xl px-6",
+        "Tag": "main"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/container.variants.json b/xgen/specs/ui/container.variants.json
new file mode 100644
index 0000000..336cc0d
--- /dev/null
+++ b/xgen/specs/ui/container.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.container",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/controls.json b/xgen/specs/ui/controls.json
new file mode 100644
index 0000000..6a75a7d
--- /dev/null
+++ b/xgen/specs/ui/controls.json
@@ -0,0 +1,784 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.form.controls",
+  "tier": "brick",
+  "dir": "form",
+  "file": "controls",
+  "docs": "Form controls covers fieldset, legend, datalist, output, meter, and progress.",
+  "variants": {
+    "fieldset": "fieldset.variants.json",
+    "legend": "legend.variants.json",
+    "meter": "meter.variants.json",
+    "progress": "progress.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Fieldset",
+      "docs": "Fieldset renders a native fieldset.",
+      "recipeId": "fieldset",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Form",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "fieldset"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "form",
+            "expr": {
+              "kind": "prop",
+              "name": "Form"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "fieldset"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--border"
+      ]
+    },
+    {
+      "name": "Legend",
+      "docs": "Legend renders a native legend.",
+      "recipeId": "legend",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "legend"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "legend"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--muted-foreground"
+      ]
+    },
+    {
+      "name": "DataList",
+      "docs": "DataList renders a native datalist.",
+      "classes": {},
+      "props": [
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "datalist"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "datalist"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "DataOption",
+      "docs": "DataOption renders an option inside a datalist.",
+      "props": [
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Label",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "option"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "label",
+            "expr": {
+              "kind": "prop",
+              "name": "Label"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": []
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "option"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "Output",
+      "docs": "Output renders a native output element.",
+      "classes": {},
+      "props": [
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "For",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "docs": "initial output text"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "output"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "for",
+            "expr": {
+              "kind": "prop",
+              "name": "For"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "text",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "output"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "Meter",
+      "docs": "Meter renders a native meter.",
+      "recipeId": "meter",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Min",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Max",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Low",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "High",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Optimum",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "meter"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "min",
+            "expr": {
+              "kind": "prop",
+              "name": "Min"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "max",
+            "expr": {
+              "kind": "prop",
+              "name": "Max"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "low",
+            "expr": {
+              "kind": "prop",
+              "name": "Low"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "high",
+            "expr": {
+              "kind": "prop",
+              "name": "High"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "optimum",
+            "expr": {
+              "kind": "prop",
+              "name": "Optimum"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "meter"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--muted"
+      ]
+    },
+    {
+      "name": "Progress",
+      "docs": "Progress renders a native progress element.",
+      "recipeId": "progress",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Max",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "progress"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "max",
+            "expr": {
+              "kind": "prop",
+              "name": "Max"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "progress"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--muted"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "group.fieldset",
+      "props": {
+        "Variant": "card"
+      }
+    },
+    {
+      "id": "status.progress",
+      "props": {
+        "Max": "100",
+        "Value": "40"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/dialog.json b/xgen/specs/ui/dialog.json
new file mode 100644
index 0000000..a517641
--- /dev/null
+++ b/xgen/specs/ui/dialog.json
@@ -0,0 +1,221 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.dialog",
+  "tier": "brick",
+  "dir": "dialog",
+  "docs": "Dialog renders a native dialog root with an optional behavior hook.\nThe data-ui8kit hook defaults off; the registry ships no client JS.",
+  "variants": {
+    "dialog": "dialog.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Dialog",
+      "docs": "Dialog renders a native dialog element.",
+      "recipeId": "dialog",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Open",
+          "type": "bool",
+          "cva": false,
+          "docs": "initial open state (static attribute only)"
+        },
+        {
+          "name": "DataUI8Kit",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "opt-in behavior hook; empty emits nothing"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "AriaLabelledBy",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "AriaDescribedBy",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "dialog"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "bool",
+            "name": "open",
+            "expr": {
+              "kind": "prop",
+              "name": "Open"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "data-ui8kit",
+            "expr": {
+              "kind": "prop",
+              "name": "DataUI8Kit"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-labelledby",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabelledBy"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-describedby",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaDescribedBy"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "dialog"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-describedby",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-labelledby",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-ui8kit",
+          "kind": "expr"
+        }
+      ],
+      "tokens": [
+        "--background",
+        "--border",
+        "--card",
+        "--card-foreground",
+        "--foreground"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "variant.default",
+      "props": {
+        "AriaLabel": "Dialog",
+        "Size": "default",
+        "Variant": "default"
+      }
+    },
+    {
+      "id": "variant.sheet",
+      "props": {
+        "AriaLabel": "Panel",
+        "Size": "full",
+        "Variant": "sheet"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/dialog.variants.json b/xgen/specs/ui/dialog.variants.json
new file mode 100644
index 0000000..3933e60
--- /dev/null
+++ b/xgen/specs/ui/dialog.variants.json
@@ -0,0 +1,26 @@
+{
+  "id": "ui.dialog",
+  "base": "m-auto flex flex-col bg-background text-foreground inset-ring inset-ring-border shadow-lg backdrop:bg-foreground/20 rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "w-70",
+      "full": "h-full w-full",
+      "lg": "w-100",
+      "xl": "w-140"
+    },
+    "variant": {
+      "card": "bg-card text-card-foreground",
+      "default": "",
+      "sheet": "min-h-screen rounded-none"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/disclosure.json b/xgen/specs/ui/disclosure.json
new file mode 100644
index 0000000..dde42db
--- /dev/null
+++ b/xgen/specs/ui/disclosure.json
@@ -0,0 +1,241 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.disclosure",
+  "tier": "brick",
+  "dir": "disclosure",
+  "docs": "Disclosure renders native details and summary elements.\nOpen is a static attribute only \u2014 no controlled-state contract.",
+  "variants": {
+    "disclosure": "disclosure.variants.json",
+    "summary": "summary.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Disclosure",
+      "docs": "Disclosure renders native details.",
+      "recipeId": "disclosure",
+      "classes": {
+        "recipe": {
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Open",
+          "type": "bool",
+          "cva": false,
+          "docs": "initial open state (static attribute only)"
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "group name: details of one name open one at a time (native exclusive accordion); leave out for independent items"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "details"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "bool",
+            "name": "open",
+            "expr": {
+              "kind": "prop",
+              "name": "Open"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "details"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--border",
+        "--card"
+      ]
+    },
+    {
+      "name": "Summary",
+      "docs": "Summary renders native summary, followed by a Lucide chevron-down indicator that turns over when the details open (CSS only: group-open:rotate-180 on the Disclosure group).",
+      "recipeId": "summary",
+      "classes": {
+        "recipe": {
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "summary"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          },
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "span"
+            },
+            "attrs": [
+              {
+                "kind": "static",
+                "name": "class",
+                "value": "size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+              },
+              {
+                "kind": "static",
+                "name": "aria-hidden",
+                "value": "true"
+              },
+              {
+                "kind": "static",
+                "name": "data-slot",
+                "value": "summary-indicator"
+              }
+            ],
+            "children": []
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "summary"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-hidden",
+            "kind": "static",
+            "value": "true"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-slot",
+          "kind": "static",
+          "value": "summary-indicator"
+        }
+      ],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "state.open",
+      "props": {
+        "Open": true
+      }
+    },
+    {
+      "id": "variant.default",
+      "props": {
+        "Variant": "default"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/disclosure.variants.json b/xgen/specs/ui/disclosure.variants.json
new file mode 100644
index 0000000..ae6931a
--- /dev/null
+++ b/xgen/specs/ui/disclosure.variants.json
@@ -0,0 +1,18 @@
+{
+  "id": "ui.disclosure",
+  "base": "group",
+  "keys": [
+    "variant"
+  ],
+  "defaults": {
+    "variant": "default"
+  },
+  "byKey": {
+    "variant": {
+      "card": "rounded bg-card inset-ring inset-ring-border",
+      "default": "rounded inset-ring inset-ring-border",
+      "ghost": "",
+      "item": "border-b border-border last:border-b-0"
+    }
+  }
+}
diff --git a/xgen/specs/ui/fieldset.variants.json b/xgen/specs/ui/fieldset.variants.json
new file mode 100644
index 0000000..095d727
--- /dev/null
+++ b/xgen/specs/ui/fieldset.variants.json
@@ -0,0 +1,24 @@
+{
+  "id": "ui.fieldset",
+  "base": "grid",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "gap-2",
+      "lg": "gap-4",
+      "sm": "gap-2"
+    },
+    "variant": {
+      "card": "rounded p-4 inset-ring inset-ring-border",
+      "default": "",
+      "inline": "flex flex-wrap items-start gap-4"
+    }
+  }
+}
diff --git a/xgen/specs/ui/form-description.variants.json b/xgen/specs/ui/form-description.variants.json
new file mode 100644
index 0000000..1f18312
--- /dev/null
+++ b/xgen/specs/ui/form-description.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.form-description",
+  "base": "text-xs font-semibold text-muted-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/form-item.variants.json b/xgen/specs/ui/form-item.variants.json
new file mode 100644
index 0000000..26e9649
--- /dev/null
+++ b/xgen/specs/ui/form-item.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.form-item",
+  "base": "flex flex-col gap-2",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/form-message.variants.json b/xgen/specs/ui/form-message.variants.json
new file mode 100644
index 0000000..911c21a
--- /dev/null
+++ b/xgen/specs/ui/form-message.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.form-message",
+  "base": "text-xs font-semibold text-destructive",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/form.json b/xgen/specs/ui/form.json
new file mode 100644
index 0000000..19e2c6a
--- /dev/null
+++ b/xgen/specs/ui/form.json
@@ -0,0 +1,408 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.form",
+  "tier": "brick",
+  "dir": "form",
+  "docs": "Form primitives: form wrapper, field item, description, and validation message.\nComposes with Label, Input, and other controls.",
+  "variants": {
+    "form": "form.variants.json",
+    "form-item": "form-item.variants.json",
+    "form-description": "form-description.variants.json",
+    "form-message": "form-message.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Form",
+      "docs": "Form renders a vertical grid form container.",
+      "recipeId": "form",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Action",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Method",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Enctype",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Autocomplete",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Target",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "NoValidate",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "form"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "action",
+            "expr": {
+              "kind": "prop",
+              "name": "Action"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "method",
+            "expr": {
+              "kind": "prop",
+              "name": "Method"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "enctype",
+            "expr": {
+              "kind": "prop",
+              "name": "Enctype"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "autocomplete",
+            "expr": {
+              "kind": "prop",
+              "name": "Autocomplete"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "target",
+            "expr": {
+              "kind": "prop",
+              "name": "Target"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "novalidate",
+            "expr": {
+              "kind": "prop",
+              "name": "NoValidate"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "form"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "FormItem",
+      "docs": "FormItem groups a single field with spacing for label and control.",
+      "recipeId": "form-item",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "FormDescription",
+      "docs": "FormDescription renders muted helper copy below a control.",
+      "recipeId": "form-description",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "p"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "p"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--muted-foreground"
+      ]
+    },
+    {
+      "name": "FormMessage",
+      "docs": "FormMessage renders destructive validation feedback.",
+      "recipeId": "form-message",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "p"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "static",
+            "name": "role",
+            "value": "alert"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "p"
+        ],
+        "roles": [
+          "alert"
+        ],
+        "aria": [
+          {
+            "name": "role",
+            "kind": "static",
+            "value": "alert"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--destructive"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "layout.field-with-label",
+      "props": {
+        "Method": "post"
+      }
+    },
+    {
+      "id": "layout.with-message",
+      "props": {}
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/form.variants.json b/xgen/specs/ui/form.variants.json
new file mode 100644
index 0000000..cbf91b5
--- /dev/null
+++ b/xgen/specs/ui/form.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.form",
+  "base": "grid gap-4",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/grid.json b/xgen/specs/ui/grid.json
new file mode 100644
index 0000000..2a98f84
--- /dev/null
+++ b/xgen/specs/ui/grid.json
@@ -0,0 +1,327 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.grid",
+  "tier": "brick",
+  "dir": "grid",
+  "docs": "Grid lays out children in a CSS grid with optional column wrappers.",
+  "variants": {
+    "grid": "grid.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Grid",
+      "docs": "Grid renders a display:grid container.",
+      "recipeId": "grid",
+      "asChild": true,
+      "classes": {
+        "recipe": {},
+        "extra": [
+          {
+            "kind": "cond",
+            "test": {
+              "kind": "contains",
+              "expr": {
+                "kind": "prop",
+                "name": "Class"
+              },
+              "substring": "grid-cols-"
+            },
+            "then": {
+              "kind": "lit",
+              "value": ""
+            },
+            "else": {
+              "kind": "mapOr",
+              "expr": {
+                "kind": "defaultIfEmpty",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Cols"
+                },
+                "fallback": "1"
+              },
+              "mapping": {
+                "1": "grid-cols-1",
+                "2": "grid-cols-2",
+                "3": "grid-cols-3",
+                "4": "grid-cols-4",
+                "5": "grid-cols-5",
+                "6": "grid-cols-6",
+                "7": "grid-cols-7",
+                "8": "grid-cols-8",
+                "9": "grid-cols-9",
+                "10": "grid-cols-10",
+                "11": "grid-cols-11",
+                "12": "grid-cols-12",
+                "1-2": "grid-cols-1 md:grid-cols-2",
+                "1-3": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+                "1-4": "grid-cols-1 sm:grid-cols-2 md:grid-cols-4",
+                "2-3": "grid-cols-2 md:grid-cols-3",
+                "2-4": "grid-cols-2 md:grid-cols-4",
+                "2-6": "grid-cols-2 md:grid-cols-6",
+                "3-6": "grid-cols-3 md:grid-cols-6"
+              },
+              "fallback": ""
+            }
+          }
+        ]
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Cols",
+          "type": "string",
+          "cva": false,
+          "docs": "column preset: 1–12 or responsive 1-2, 1-3, 1-4"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "GridCol",
+      "docs": "GridCol renders one grid column child.",
+      "asChild": true,
+      "classes": {
+        "extra": [
+          {
+            "kind": "intMapOr",
+            "expr": {
+              "kind": "prop",
+              "name": "Span"
+            },
+            "mapping": {
+              "1": "col-span-1",
+              "2": "col-span-2",
+              "3": "col-span-3",
+              "4": "col-span-4",
+              "5": "col-span-5",
+              "6": "col-span-6",
+              "7": "col-span-7",
+              "8": "col-span-8",
+              "9": "col-span-9",
+              "10": "col-span-10",
+              "11": "col-span-11",
+              "12": "col-span-12"
+            },
+            "fallback": ""
+          },
+          {
+            "kind": "intMapOr",
+            "expr": {
+              "kind": "prop",
+              "name": "Start"
+            },
+            "mapping": {
+              "1": "col-start-1",
+              "2": "col-start-2",
+              "3": "col-start-3",
+              "4": "col-start-4",
+              "5": "col-start-5",
+              "6": "col-start-6",
+              "7": "col-start-7",
+              "8": "col-start-8",
+              "9": "col-start-9",
+              "10": "col-start-10",
+              "11": "col-start-11",
+              "12": "col-start-12"
+            },
+            "fallback": ""
+          },
+          {
+            "kind": "intMapOr",
+            "expr": {
+              "kind": "prop",
+              "name": "End"
+            },
+            "mapping": {
+              "1": "col-end-1",
+              "2": "col-end-2",
+              "3": "col-end-3",
+              "4": "col-end-4",
+              "5": "col-end-5",
+              "6": "col-end-6",
+              "7": "col-end-7",
+              "8": "col-end-8",
+              "9": "col-end-9",
+              "10": "col-end-10",
+              "11": "col-end-11",
+              "12": "col-end-12"
+            },
+            "fallback": ""
+          },
+          {
+            "kind": "intMapOr",
+            "expr": {
+              "kind": "prop",
+              "name": "Order"
+            },
+            "mapping": {
+              "1": "order-1",
+              "2": "order-2",
+              "3": "order-3",
+              "4": "order-4",
+              "5": "order-5",
+              "6": "order-6",
+              "7": "order-7",
+              "8": "order-8",
+              "9": "order-9",
+              "10": "order-10",
+              "11": "order-11",
+              "12": "order-12"
+            },
+            "fallback": ""
+          }
+        ]
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Span",
+          "type": "int",
+          "cva": false,
+          "docs": "col-span-1..12"
+        },
+        {
+          "name": "Start",
+          "type": "int",
+          "cva": false,
+          "docs": "col-start-1..12"
+        },
+        {
+          "name": "End",
+          "type": "int",
+          "cva": false,
+          "docs": "col-end-1..12"
+        },
+        {
+          "name": "Order",
+          "type": "int",
+          "cva": false,
+          "docs": "order-1..12"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "layout.three-col",
+      "props": {
+        "Class": "gap-4",
+        "Cols": "3"
+      }
+    },
+    {
+      "id": "layout.two-col",
+      "props": {
+        "Class": "gap-4",
+        "Cols": "2"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/grid.variants.json b/xgen/specs/ui/grid.variants.json
new file mode 100644
index 0000000..508e4f2
--- /dev/null
+++ b/xgen/specs/ui/grid.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.grid",
+  "base": "grid",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/group.json b/xgen/specs/ui/group.json
new file mode 100644
index 0000000..3a86c46
--- /dev/null
+++ b/xgen/specs/ui/group.json
@@ -0,0 +1,127 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.group",
+  "tier": "brick",
+  "dir": "group",
+  "docs": "Group arranges children in a horizontal flex row.\nSupports fieldset for related form controls.",
+  "variants": {
+    "group": "group.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Group",
+      "docs": "Group renders a horizontal flex container.",
+      "recipeId": "group",
+      "asChild": true,
+      "classes": {
+        "recipe": {
+          "gap": "Gap",
+          "align": "Align",
+          "justify": "Justify"
+        }
+      },
+      "props": [
+        {
+          "name": "Gap",
+          "type": "string",
+          "cva": true,
+          "docs": "sets gap: a Tailwind spacing step (0, 2, 4, 6, 8, 10, 12 = gap-N) or auto"
+        },
+        {
+          "name": "Align",
+          "type": "string",
+          "cva": true,
+          "docs": "sets align"
+        },
+        {
+          "name": "Justify",
+          "type": "string",
+          "cva": true,
+          "docs": "sets justify"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Tag",
+          "type": "string",
+          "cva": false,
+          "docs": "div, fieldset, or dl. Use fieldset for related form controls."
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "resolved",
+          "fromProp": "Tag",
+          "fallback": "div",
+          "group": "Group"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div",
+          "(Group)"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "tag.default",
+      "props": {
+        "Class": "gap-2",
+        "Tag": "div"
+      }
+    },
+    {
+      "id": "tag.fieldset",
+      "props": {
+        "Class": "gap-2",
+        "Tag": "fieldset"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/group.variants.json b/xgen/specs/ui/group.variants.json
new file mode 100644
index 0000000..a4ef264
--- /dev/null
+++ b/xgen/specs/ui/group.variants.json
@@ -0,0 +1,39 @@
+{
+  "id": "ui.group",
+  "base": "flex min-w-0",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "center",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/xgen/specs/ui/icon.json b/xgen/specs/ui/icon.json
new file mode 100644
index 0000000..6516152
--- /dev/null
+++ b/xgen/specs/ui/icon.json
@@ -0,0 +1,605 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.icon",
+  "tier": "brick",
+  "dir": "icon",
+  "docs": "Icon renders a class-based span, svg use reference, or text fallback.\nDecorative icons are hidden from assistive technology by default.",
+  "variants": {
+    "icon": "icon.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Icon",
+      "docs": "Icon renders a class-based span, svg use, or text fallback host.",
+      "recipeId": "icon",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "type": {
+            "kind": "mapOr",
+            "expr": {
+              "kind": "prop",
+              "name": "Type"
+            },
+            "mapping": {
+              "svg": "svg",
+              "text": "text"
+            },
+            "fallback": "class"
+          }
+        },
+        "extra": [
+          {
+            "kind": "cond",
+            "test": {
+              "kind": "eq",
+              "left": {
+                "kind": "mapOr",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Type"
+                },
+                "mapping": {
+                  "svg": "svg",
+                  "text": "text"
+                },
+                "fallback": "class"
+              },
+              "right": {
+                "kind": "lit",
+                "value": "class"
+              }
+            },
+            "then": {
+              "kind": "prop",
+              "name": "BaseClass"
+            },
+            "else": {
+              "kind": "lit",
+              "value": ""
+            }
+          },
+          {
+            "kind": "cond",
+            "test": {
+              "kind": "and",
+              "exprs": [
+                {
+                  "kind": "eq",
+                  "left": {
+                    "kind": "mapOr",
+                    "expr": {
+                      "kind": "prop",
+                      "name": "Type"
+                    },
+                    "mapping": {
+                      "svg": "svg",
+                      "text": "text"
+                    },
+                    "fallback": "class"
+                  },
+                  "right": {
+                    "kind": "lit",
+                    "value": "class"
+                  }
+                },
+                {
+                  "kind": "isSet",
+                  "expr": {
+                    "kind": "prop",
+                    "name": "Name"
+                  }
+                }
+              ]
+            },
+            "then": {
+              "kind": "concat",
+              "parts": [
+                {
+                  "kind": "prop",
+                  "name": "Prefix"
+                },
+                {
+                  "kind": "prop",
+                  "name": "Name"
+                }
+              ]
+            },
+            "else": {
+              "kind": "lit",
+              "value": ""
+            }
+          }
+        ]
+      },
+      "derived": {
+        "iconKind": {
+          "kind": "mapOr",
+          "expr": {
+            "kind": "prop",
+            "name": "Type"
+          },
+          "mapping": {
+            "svg": "svg",
+            "text": "text"
+          },
+          "fallback": "class"
+        },
+        "isDecorative": {
+          "kind": "or",
+          "exprs": [
+            {
+              "kind": "prop",
+              "name": "Decorative"
+            },
+            {
+              "kind": "and",
+              "exprs": [
+                {
+                  "kind": "not",
+                  "expr": {
+                    "kind": "isSet",
+                    "expr": {
+                      "kind": "prop",
+                      "name": "Title"
+                    }
+                  }
+                },
+                {
+                  "kind": "not",
+                  "expr": {
+                    "kind": "isSet",
+                    "expr": {
+                      "kind": "prop",
+                      "name": "AriaLabel"
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      },
+      "props": [
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "docs": "icon name appended to Prefix in class mode"
+        },
+        {
+          "name": "Type",
+          "type": "string",
+          "cva": false,
+          "docs": "svg, text, or class (default)"
+        },
+        {
+          "name": "BaseClass",
+          "type": "string",
+          "cva": false,
+          "docs": "base icon font class in class mode"
+        },
+        {
+          "name": "Prefix",
+          "type": "string",
+          "cva": false,
+          "docs": "icon font prefix in class mode"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Href",
+          "type": "string",
+          "cva": false,
+          "docs": "svg use href in svg mode"
+        },
+        {
+          "name": "Title",
+          "type": "string",
+          "cva": false,
+          "docs": "svg title / accessible name"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "docs": "accessible name for non-decorative icons"
+        },
+        {
+          "name": "Decorative",
+          "type": "bool",
+          "cva": false,
+          "docs": "hides the icon from assistive technology"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "when",
+        "test": {
+          "kind": "eq",
+          "left": {
+            "kind": "derivedRef",
+            "name": "iconKind"
+          },
+          "right": {
+            "kind": "lit",
+            "value": "svg"
+          }
+        },
+        "then": [
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "svg"
+            },
+            "attrs": [
+              {
+                "kind": "class"
+              },
+              {
+                "kind": "expr",
+                "name": "aria-hidden",
+                "expr": {
+                  "kind": "lit",
+                  "value": "true"
+                },
+                "when": {
+                  "kind": "derivedRef",
+                  "name": "isDecorative"
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "role",
+                "expr": {
+                  "kind": "lit",
+                  "value": "img"
+                },
+                "when": {
+                  "kind": "not",
+                  "expr": {
+                    "kind": "derivedRef",
+                    "name": "isDecorative"
+                  }
+                }
+              },
+              {
+                "kind": "expr",
+                "name": "aria-label",
+                "expr": {
+                  "kind": "prop",
+                  "name": "AriaLabel"
+                },
+                "when": {
+                  "kind": "and",
+                  "exprs": [
+                    {
+                      "kind": "not",
+                      "expr": {
+                        "kind": "derivedRef",
+                        "name": "isDecorative"
+                      }
+                    },
+                    {
+                      "kind": "isSet",
+                      "expr": {
+                        "kind": "prop",
+                        "name": "AriaLabel"
+                      }
+                    }
+                  ]
+                }
+              },
+              {
+                "kind": "rest"
+              }
+            ],
+            "children": [
+              {
+                "kind": "when",
+                "test": {
+                  "kind": "isSet",
+                  "expr": {
+                    "kind": "prop",
+                    "name": "Title"
+                  }
+                },
+                "then": [
+                  {
+                    "kind": "element",
+                    "tag": {
+                      "kind": "static",
+                      "tag": "title"
+                    },
+                    "attrs": [],
+                    "children": [
+                      {
+                        "kind": "text",
+                        "expr": {
+                          "kind": "prop",
+                          "name": "Title"
+                        }
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "kind": "when",
+                "test": {
+                  "kind": "isSet",
+                  "expr": {
+                    "kind": "prop",
+                    "name": "Href"
+                  }
+                },
+                "then": [
+                  {
+                    "kind": "element",
+                    "tag": {
+                      "kind": "static",
+                      "tag": "use"
+                    },
+                    "attrs": [
+                      {
+                        "kind": "expr",
+                        "name": "href",
+                        "expr": {
+                          "kind": "prop",
+                          "name": "Href"
+                        }
+                      }
+                    ],
+                    "children": []
+                  }
+                ]
+              },
+              {
+                "kind": "slot"
+              }
+            ]
+          }
+        ],
+        "else": [
+          {
+            "kind": "when",
+            "test": {
+              "kind": "eq",
+              "left": {
+                "kind": "derivedRef",
+                "name": "iconKind"
+              },
+              "right": {
+                "kind": "lit",
+                "value": "text"
+              }
+            },
+            "then": [
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "span"
+                },
+                "attrs": [
+                  {
+                    "kind": "class"
+                  },
+                  {
+                    "kind": "expr",
+                    "name": "aria-hidden",
+                    "expr": {
+                      "kind": "lit",
+                      "value": "true"
+                    },
+                    "when": {
+                      "kind": "derivedRef",
+                      "name": "isDecorative"
+                    }
+                  },
+                  {
+                    "kind": "expr",
+                    "name": "role",
+                    "expr": {
+                      "kind": "lit",
+                      "value": "img"
+                    },
+                    "when": {
+                      "kind": "not",
+                      "expr": {
+                        "kind": "derivedRef",
+                        "name": "isDecorative"
+                      }
+                    }
+                  },
+                  {
+                    "kind": "expr",
+                    "name": "aria-label",
+                    "expr": {
+                      "kind": "prop",
+                      "name": "AriaLabel"
+                    },
+                    "when": {
+                      "kind": "and",
+                      "exprs": [
+                        {
+                          "kind": "not",
+                          "expr": {
+                            "kind": "derivedRef",
+                            "name": "isDecorative"
+                          }
+                        },
+                        {
+                          "kind": "isSet",
+                          "expr": {
+                            "kind": "prop",
+                            "name": "AriaLabel"
+                          }
+                        }
+                      ]
+                    }
+                  },
+                  {
+                    "kind": "rest"
+                  }
+                ],
+                "children": [
+                  {
+                    "kind": "slot"
+                  }
+                ]
+              }
+            ],
+            "else": [
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "span"
+                },
+                "attrs": [
+                  {
+                    "kind": "class"
+                  },
+                  {
+                    "kind": "expr",
+                    "name": "aria-hidden",
+                    "expr": {
+                      "kind": "lit",
+                      "value": "true"
+                    },
+                    "when": {
+                      "kind": "derivedRef",
+                      "name": "isDecorative"
+                    }
+                  },
+                  {
+                    "kind": "expr",
+                    "name": "role",
+                    "expr": {
+                      "kind": "lit",
+                      "value": "img"
+                    },
+                    "when": {
+                      "kind": "not",
+                      "expr": {
+                        "kind": "derivedRef",
+                        "name": "isDecorative"
+                      }
+                    }
+                  },
+                  {
+                    "kind": "expr",
+                    "name": "aria-label",
+                    "expr": {
+                      "kind": "prop",
+                      "name": "AriaLabel"
+                    },
+                    "when": {
+                      "kind": "and",
+                      "exprs": [
+                        {
+                          "kind": "not",
+                          "expr": {
+                            "kind": "derivedRef",
+                            "name": "isDecorative"
+                          }
+                        },
+                        {
+                          "kind": "isSet",
+                          "expr": {
+                            "kind": "prop",
+                            "name": "AriaLabel"
+                          }
+                        }
+                      ]
+                    }
+                  },
+                  {
+                    "kind": "rest"
+                  }
+                ],
+                "children": []
+              }
+            ]
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "svg",
+          "span"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-hidden",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "type.class",
+      "props": {
+        "BaseClass": "icon",
+        "Name": "home",
+        "Prefix": "icon-",
+        "Size": "md",
+        "Type": "class"
+      }
+    },
+    {
+      "id": "type.svg",
+      "props": {
+        "Href": "#check",
+        "Title": "Done",
+        "Type": "svg"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/icon.variants.json b/xgen/specs/ui/icon.variants.json
new file mode 100644
index 0000000..085a3cb
--- /dev/null
+++ b/xgen/specs/ui/icon.variants.json
@@ -0,0 +1,25 @@
+{
+  "id": "ui.icon",
+  "base": "inline-block shrink-0",
+  "keys": [
+    "size",
+    "type"
+  ],
+  "defaults": {
+    "size": "default",
+    "type": "class"
+  },
+  "byKey": {
+    "size": {
+      "xs": "size-3",
+      "default": "size-4",
+      "md": "size-5",
+      "lg": "size-6"
+    },
+    "type": {
+      "class": "",
+      "svg": "",
+      "text": ""
+    }
+  }
+}
diff --git a/xgen/specs/ui/iconbadge.json b/xgen/specs/ui/iconbadge.json
new file mode 100644
index 0000000..a213fa6
--- /dev/null
+++ b/xgen/specs/ui/iconbadge.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.iconbadge",
+  "tier": "brick",
+  "dir": "iconbadge",
+  "docs": "IconBadge renders a small icon surface for nav rows, cards, and status blocks.\nPass the letter, glyph, or Icon node as children.",
+  "variants": {
+    "iconbadge": "iconbadge.variants.json"
+  },
+  "parts": [
+    {
+      "name": "IconBadge",
+      "docs": "IconBadge renders children as the badge content.",
+      "recipeId": "iconbadge",
+      "classes": {
+        "recipe": {
+          "variant": "Variant",
+          "size": "Size"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "span"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "span"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--accent",
+        "--accent-foreground",
+        "--border",
+        "--destructive",
+        "--foreground",
+        "--muted",
+        "--muted-foreground",
+        "--secondary",
+        "--secondary-foreground"
+      ]
+    }
+  ],
+  "examples": [],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/iconbadge.variants.json b/xgen/specs/ui/iconbadge.variants.json
new file mode 100644
index 0000000..04835e4
--- /dev/null
+++ b/xgen/specs/ui/iconbadge.variants.json
@@ -0,0 +1,30 @@
+{
+  "id": "ui.iconbadge",
+  "base": "inline-flex shrink-0 items-center justify-center font-bold rounded",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-muted-foreground",
+      "primary": "bg-primary text-primary-foreground",
+      "accent": "bg-accent text-accent-foreground",
+      "secondary": "bg-secondary text-secondary-foreground",
+      "outline": "text-foreground inset-ring inset-ring-border",
+      "destructive": "bg-destructive text-white dark:bg-destructive/60"
+    },
+    "size": {
+      "xs": "size-6 text-xs",
+      "sm": "size-8 text-xs",
+      "default": "size-10 text-xs",
+      "lg": "size-12 text-sm",
+      "xl": "size-20 text-base"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/image.json b/xgen/specs/ui/image.json
new file mode 100644
index 0000000..f39ce8d
--- /dev/null
+++ b/xgen/specs/ui/image.json
@@ -0,0 +1,485 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.image",
+  "tier": "brick",
+  "dir": "image",
+  "docs": "Image renders accessible img, picture, and source primitives.\nUse Decorative for purely visual images so alt stays empty.",
+  "variants": {
+    "image": "image.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Image",
+      "docs": "Image renders an accessible img element.",
+      "recipeId": "image",
+      "classes": {
+        "recipe": {
+          "aspect": "Aspect",
+          "fit": "Fit",
+          "position": "Position",
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Src",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "SrcSet",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Sizes",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Alt",
+          "type": "string",
+          "cva": false,
+          "docs": "alternative text; ignored when Decorative"
+        },
+        {
+          "name": "Width",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Height",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Fit",
+          "type": "string",
+          "cva": true,
+          "cvaKey": "fit",
+          "docs": "object-fit preset"
+        },
+        {
+          "name": "Position",
+          "type": "string",
+          "cva": true,
+          "cvaKey": "position",
+          "docs": "object-position preset"
+        },
+        {
+          "name": "Aspect",
+          "type": "string",
+          "cva": true,
+          "cvaKey": "aspect",
+          "docs": "aspect-ratio preset"
+        },
+        {
+          "name": "Loading",
+          "type": "string",
+          "cva": false,
+          "docs": "eager or lazy (default lazy)"
+        },
+        {
+          "name": "Decoding",
+          "type": "string",
+          "cva": false,
+          "docs": "sync, auto, or async (default async)"
+        },
+        {
+          "name": "FetchPriority",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Decorative",
+          "type": "bool",
+          "cva": false,
+          "docs": "marks the image as purely presentational"
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "img"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "src",
+            "expr": {
+              "kind": "prop",
+              "name": "Src"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "srcset",
+            "expr": {
+              "kind": "prop",
+              "name": "SrcSet"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "sizes",
+            "expr": {
+              "kind": "prop",
+              "name": "Sizes"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "alt",
+            "expr": {
+              "kind": "cond",
+              "test": {
+                "kind": "prop",
+                "name": "Decorative"
+              },
+              "then": {
+                "kind": "lit",
+                "value": ""
+              },
+              "else": {
+                "kind": "prop",
+                "name": "Alt"
+              }
+            },
+            "keepEmpty": true
+          },
+          {
+            "kind": "expr",
+            "name": "width",
+            "expr": {
+              "kind": "prop",
+              "name": "Width"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "height",
+            "expr": {
+              "kind": "prop",
+              "name": "Height"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "loading",
+            "expr": {
+              "kind": "mapOr",
+              "expr": {
+                "kind": "prop",
+                "name": "Loading"
+              },
+              "mapping": {
+                "eager": "eager"
+              },
+              "fallback": "lazy"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "decoding",
+            "expr": {
+              "kind": "mapOr",
+              "expr": {
+                "kind": "prop",
+                "name": "Decoding"
+              },
+              "mapping": {
+                "sync": "sync",
+                "auto": "auto"
+              },
+              "fallback": "async"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "fetchpriority",
+            "expr": {
+              "kind": "prop",
+              "name": "FetchPriority"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-hidden",
+            "expr": {
+              "kind": "lit",
+              "value": "true"
+            },
+            "when": {
+              "kind": "prop",
+              "name": "Decorative"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "img"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-hidden",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--border"
+      ]
+    },
+    {
+      "name": "Picture",
+      "docs": "Picture renders a responsive image wrapper.",
+      "classes": {},
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "picture"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "picture"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "Source",
+      "docs": "Source renders a source candidate for picture, video, or audio.",
+      "props": [
+        {
+          "name": "SrcSet",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Src",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Media",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Type",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Sizes",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "source"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "srcset",
+            "expr": {
+              "kind": "prop",
+              "name": "SrcSet"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "src",
+            "expr": {
+              "kind": "prop",
+              "name": "Src"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "media",
+            "expr": {
+              "kind": "prop",
+              "name": "Media"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "type",
+            "expr": {
+              "kind": "prop",
+              "name": "Type"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "sizes",
+            "expr": {
+              "kind": "prop",
+              "name": "Sizes"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "source"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "layout.picture",
+      "props": {},
+      "children": {
+        "Source": {
+          "props": {
+            "SrcSet": "/hero.webp",
+            "Type": "image/webp"
+          }
+        },
+        "Image": {
+          "props": {
+            "Alt": "Hero image",
+            "Src": "/hero.jpg",
+            "Variant": "rounded"
+          }
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/image.variants.json b/xgen/specs/ui/image.variants.json
new file mode 100644
index 0000000..d0864c5
--- /dev/null
+++ b/xgen/specs/ui/image.variants.json
@@ -0,0 +1,58 @@
+{
+  "id": "ui.image",
+  "base": "block max-w-full",
+  "keys": [
+    "aspect",
+    "fit",
+    "position",
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "aspect": "auto",
+    "fit": "cover",
+    "position": "center",
+    "size": "auto",
+    "variant": "default"
+  },
+  "byKey": {
+    "aspect": {
+      "auto": "aspect-auto",
+      "square": "aspect-square",
+      "video": "aspect-video"
+    },
+    "fit": {
+      "contain": "object-contain",
+      "cover": "object-cover",
+      "fill": "object-fill",
+      "none": "object-none",
+      "scale-down": "object-scale-down"
+    },
+    "position": {
+      "bottom": "object-bottom",
+      "center": "object-center",
+      "left": "object-left",
+      "left-bottom": "object-left-bottom",
+      "left-top": "object-left-top",
+      "right": "object-right",
+      "right-bottom": "object-right-bottom",
+      "right-top": "object-right-top",
+      "top": "object-top"
+    },
+    "size": {
+      "auto": "",
+      "default": "",
+      "full": "h-full w-full",
+      "xs": "size-6",
+      "sm": "size-8",
+      "md": "size-12",
+      "lg": "size-16",
+      "xl": "size-20"
+    },
+    "variant": {
+      "default": "",
+      "logo": "object-contain"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/inline.json b/xgen/specs/ui/inline.json
new file mode 100644
index 0000000..78b6087
--- /dev/null
+++ b/xgen/specs/ui/inline.json
@@ -0,0 +1,88 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.inline",
+  "tier": "brick",
+  "dir": "inline",
+  "docs": "Inline renders inline copy as a span. Use Text for paragraph blocks and\nTitle (as 1–6) for headings.",
+  "variants": {
+    "inline": "inline.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Inline",
+      "docs": "Inline renders a span element with inline copy classes.",
+      "recipeId": "inline",
+      "asChild": true,
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "span"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "span"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "default",
+      "props": {
+        "Class": "text-muted-foreground"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/inline.variants.json b/xgen/specs/ui/inline.variants.json
new file mode 100644
index 0000000..082cfc3
--- /dev/null
+++ b/xgen/specs/ui/inline.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.inline",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/input.json b/xgen/specs/ui/input.json
new file mode 100644
index 0000000..f75ca22
--- /dev/null
+++ b/xgen/specs/ui/input.json
@@ -0,0 +1,333 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.input",
+  "tier": "brick",
+  "dir": "input",
+  "docs": "Input is a single-line native text field.\nSupports types, validation attrs, and wireframe variant/size classes.",
+  "variants": {
+    "input": "input.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Input",
+      "docs": "Input renders a styled single-line form control.",
+      "recipeId": "input",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Type",
+          "type": "string",
+          "cva": false,
+          "docs": "input type; defaults to text"
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Placeholder",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Required",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Autocomplete",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Min",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Max",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "element id"
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "ARIA role override"
+        },
+        {
+          "name": "TabIndex",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "tab order override"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "accessible name for unlabeled controls"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "input"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "type",
+            "expr": {
+              "kind": "defaultIfEmpty",
+              "expr": {
+                "kind": "prop",
+                "name": "Type"
+              },
+              "fallback": "text"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "placeholder",
+            "expr": {
+              "kind": "prop",
+              "name": "Placeholder"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "autocomplete",
+            "expr": {
+              "kind": "prop",
+              "name": "Autocomplete"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "min",
+            "expr": {
+              "kind": "prop",
+              "name": "Min"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "max",
+            "expr": {
+              "kind": "prop",
+              "name": "Max"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "required",
+            "expr": {
+              "kind": "prop",
+              "name": "Required"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "prop",
+              "name": "Role"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "tabindex",
+            "expr": {
+              "kind": "prop",
+              "name": "TabIndex"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "input"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--background",
+        "--border",
+        "--foreground",
+        "--muted",
+        "--muted-foreground",
+        "--ring"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "size.sm",
+      "props": {
+        "Name": "q",
+        "Placeholder": "Search",
+        "Size": "sm"
+      }
+    },
+    {
+      "id": "state.disabled",
+      "props": {
+        "Disabled": true,
+        "Name": "locked",
+        "Value": "Read only"
+      }
+    },
+    {
+      "id": "state.required",
+      "props": {
+        "Name": "name",
+        "Placeholder": "Required field",
+        "Required": true
+      }
+    },
+    {
+      "id": "type.email",
+      "props": {
+        "ID": "demo-email",
+        "Name": "email",
+        "Type": "email"
+      }
+    },
+    {
+      "id": "variant.default",
+      "props": {
+        "Name": "email",
+        "Placeholder": "name@example.com",
+        "Type": "text",
+        "Variant": "default"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/input.variants.json b/xgen/specs/ui/input.variants.json
new file mode 100644
index 0000000..d664f79
--- /dev/null
+++ b/xgen/specs/ui/input.variants.json
@@ -0,0 +1,24 @@
+{
+  "id": "ui.input",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-base md:text-sm",
+      "default": "h-10 px-3 text-base md:text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/label.json b/xgen/specs/ui/label.json
new file mode 100644
index 0000000..84a43c7
--- /dev/null
+++ b/xgen/specs/ui/label.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.label",
+  "tier": "brick",
+  "dir": "label",
+  "docs": "Label associates visible text with a form control via the for attribute.",
+  "variants": {
+    "label": "label.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Label",
+      "docs": "Label renders accessible text linked to a control.",
+      "recipeId": "label",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "HTMLFor",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "id of the labeled control"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "label"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "for",
+            "expr": {
+              "kind": "prop",
+              "name": "HTMLFor"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "label"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--foreground"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "layout.with-control",
+      "props": {
+        "HTMLFor": "demo-email"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/label.variants.json b/xgen/specs/ui/label.variants.json
new file mode 100644
index 0000000..4d63c44
--- /dev/null
+++ b/xgen/specs/ui/label.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.label",
+  "base": "text-xs font-bold text-foreground",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/legend.variants.json b/xgen/specs/ui/legend.variants.json
new file mode 100644
index 0000000..fa1a247
--- /dev/null
+++ b/xgen/specs/ui/legend.variants.json
@@ -0,0 +1,23 @@
+{
+  "id": "ui.legend",
+  "base": "font-bold",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs",
+      "default": "text-sm",
+      "lg": "text-base"
+    },
+    "variant": {
+      "default": "",
+      "muted": "text-muted-foreground"
+    }
+  }
+}
diff --git a/xgen/specs/ui/linebreak.json b/xgen/specs/ui/linebreak.json
new file mode 100644
index 0000000..87976d7
--- /dev/null
+++ b/xgen/specs/ui/linebreak.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.linebreak",
+  "tier": "brick",
+  "dir": "linebreak",
+  "docs": "Break renders br or wbr for controlled inline wrapping.",
+  "variants": {
+    "linebreak": "linebreak.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Break",
+      "docs": "Break renders br by default, or wbr when Type is wbr/word.",
+      "recipeId": "linebreak",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Type",
+          "type": "string",
+          "cva": false,
+          "docs": "br (default) or wbr/word"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "mapped",
+          "expr": {
+            "kind": "mapOr",
+            "expr": {
+              "kind": "prop",
+              "name": "Type"
+            },
+            "mapping": {
+              "wbr": "wbr",
+              "word": "wbr"
+            },
+            "fallback": "br"
+          },
+          "tags": [
+            "wbr",
+            "br"
+          ]
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "wbr",
+          "br"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "type.br",
+      "props": {
+        "Type": "br"
+      }
+    },
+    {
+      "id": "type.wbr",
+      "props": {
+        "Type": "wbr"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/linebreak.variants.json b/xgen/specs/ui/linebreak.variants.json
new file mode 100644
index 0000000..ddbc1c7
--- /dev/null
+++ b/xgen/specs/ui/linebreak.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.linebreak",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/link-plain.json b/xgen/specs/ui/link-plain.json
new file mode 100644
index 0000000..b823ac9
--- /dev/null
+++ b/xgen/specs/ui/link-plain.json
@@ -0,0 +1,339 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.link-plain",
+  "tier": "brick",
+  "dir": "link-plain",
+  "docs": "LinkPlain is a bare anchor: no styling beyond Class.",
+  "variants": {
+    "link-plain": "link-plain.variants.json"
+  },
+  "parts": [
+    {
+      "name": "LinkPlain",
+      "docs": "LinkPlain is a bare anchor: no styling beyond Class.",
+      "recipeId": "link-plain",
+      "classes": {
+        "recipe": {},
+        "state": [
+          {
+            "test": {
+              "kind": "prop",
+              "name": "Disabled"
+            },
+            "classes": "pointer-events-none opacity-50"
+          }
+        ]
+      },
+      "derived": {
+        "target": {
+          "kind": "cond",
+          "test": {
+            "kind": "isSet",
+            "expr": {
+              "kind": "prop",
+              "name": "Target"
+            }
+          },
+          "then": {
+            "kind": "prop",
+            "name": "Target"
+          },
+          "else": {
+            "kind": "cond",
+            "test": {
+              "kind": "prop",
+              "name": "External"
+            },
+            "then": {
+              "kind": "lit",
+              "value": "_blank"
+            },
+            "else": {
+              "kind": "lit",
+              "value": ""
+            }
+          }
+        },
+        "rel": {
+          "kind": "cond",
+          "test": {
+            "kind": "isSet",
+            "expr": {
+              "kind": "prop",
+              "name": "Rel"
+            }
+          },
+          "then": {
+            "kind": "prop",
+            "name": "Rel"
+          },
+          "else": {
+            "kind": "cond",
+            "test": {
+              "kind": "or",
+              "exprs": [
+                {
+                  "kind": "prop",
+                  "name": "External"
+                },
+                {
+                  "kind": "eq",
+                  "left": {
+                    "kind": "derivedRef",
+                    "name": "target"
+                  },
+                  "right": {
+                    "kind": "lit",
+                    "value": "_blank"
+                  }
+                }
+              ]
+            },
+            "then": {
+              "kind": "lit",
+              "value": "noopener noreferrer"
+            },
+            "else": {
+              "kind": "lit",
+              "value": ""
+            }
+          }
+        }
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Href",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Target",
+          "type": "string",
+          "cva": false,
+          "docs": "explicit target; External implies _blank"
+        },
+        {
+          "name": "Rel",
+          "type": "string",
+          "cva": false,
+          "docs": "explicit rel; external links default to noopener noreferrer"
+        },
+        {
+          "name": "Download",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "External",
+          "type": "bool",
+          "cva": false,
+          "docs": "opens in a new tab with safe rel defaults"
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false,
+          "docs": "visually and semantically disables the link"
+        },
+        {
+          "name": "AriaCurrent",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "a"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "href",
+            "expr": {
+              "kind": "prop",
+              "name": "Href"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "target",
+            "expr": {
+              "kind": "derivedRef",
+              "name": "target"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "rel",
+            "expr": {
+              "kind": "derivedRef",
+              "name": "rel"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "download",
+            "expr": {
+              "kind": "prop",
+              "name": "Download"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "prop",
+              "name": "Role"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-current",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaCurrent"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-disabled",
+            "expr": {
+              "kind": "lit",
+              "value": "true"
+            },
+            "when": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "tabindex",
+            "expr": {
+              "kind": "lit",
+              "value": -1
+            },
+            "when": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "a"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-current",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-disabled",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "default",
+      "props": {}
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/link-plain.variants.json b/xgen/specs/ui/link-plain.variants.json
new file mode 100644
index 0000000..0919dad
--- /dev/null
+++ b/xgen/specs/ui/link-plain.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.link-plain",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/link.json b/xgen/specs/ui/link.json
new file mode 100644
index 0000000..46e1913
--- /dev/null
+++ b/xgen/specs/ui/link.json
@@ -0,0 +1,366 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.link",
+  "tier": "brick",
+  "dir": "link",
+  "docs": "Link renders a semantic anchor for navigation and prose.\nUse Button for actions; use Link for destinations.",
+  "variants": {
+    "link": "link.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Link",
+      "docs": "Link renders a semantic anchor element.",
+      "recipeId": "link",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        },
+        "state": [
+          {
+            "test": {
+              "kind": "prop",
+              "name": "Disabled"
+            },
+            "classes": "pointer-events-none opacity-50"
+          }
+        ]
+      },
+      "derived": {
+        "target": {
+          "kind": "cond",
+          "test": {
+            "kind": "isSet",
+            "expr": {
+              "kind": "prop",
+              "name": "Target"
+            }
+          },
+          "then": {
+            "kind": "prop",
+            "name": "Target"
+          },
+          "else": {
+            "kind": "cond",
+            "test": {
+              "kind": "prop",
+              "name": "External"
+            },
+            "then": {
+              "kind": "lit",
+              "value": "_blank"
+            },
+            "else": {
+              "kind": "lit",
+              "value": ""
+            }
+          }
+        },
+        "rel": {
+          "kind": "cond",
+          "test": {
+            "kind": "isSet",
+            "expr": {
+              "kind": "prop",
+              "name": "Rel"
+            }
+          },
+          "then": {
+            "kind": "prop",
+            "name": "Rel"
+          },
+          "else": {
+            "kind": "cond",
+            "test": {
+              "kind": "or",
+              "exprs": [
+                {
+                  "kind": "prop",
+                  "name": "External"
+                },
+                {
+                  "kind": "eq",
+                  "left": {
+                    "kind": "derivedRef",
+                    "name": "target"
+                  },
+                  "right": {
+                    "kind": "lit",
+                    "value": "_blank"
+                  }
+                }
+              ]
+            },
+            "then": {
+              "kind": "lit",
+              "value": "noopener noreferrer"
+            },
+            "else": {
+              "kind": "lit",
+              "value": ""
+            }
+          }
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Href",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Target",
+          "type": "string",
+          "cva": false,
+          "docs": "explicit target; External implies _blank"
+        },
+        {
+          "name": "Rel",
+          "type": "string",
+          "cva": false,
+          "docs": "explicit rel; external links default to noopener noreferrer"
+        },
+        {
+          "name": "Download",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "External",
+          "type": "bool",
+          "cva": false,
+          "docs": "opens in a new tab with safe rel defaults"
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false,
+          "docs": "visually and semantically disables the link"
+        },
+        {
+          "name": "AriaCurrent",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "a"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "href",
+            "expr": {
+              "kind": "prop",
+              "name": "Href"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "target",
+            "expr": {
+              "kind": "derivedRef",
+              "name": "target"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "rel",
+            "expr": {
+              "kind": "derivedRef",
+              "name": "rel"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "download",
+            "expr": {
+              "kind": "prop",
+              "name": "Download"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "prop",
+              "name": "Role"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-current",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaCurrent"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-disabled",
+            "expr": {
+              "kind": "lit",
+              "value": "true"
+            },
+            "when": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "tabindex",
+            "expr": {
+              "kind": "lit",
+              "value": -1
+            },
+            "when": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "a"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-current",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-disabled",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--foreground",
+        "--muted-foreground"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "variant.default",
+      "props": {
+        "Href": "/docs"
+      }
+    },
+    {
+      "id": "variant.external",
+      "props": {
+        "External": true,
+        "Href": "https://example.com"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/link.variants.json b/xgen/specs/ui/link.variants.json
new file mode 100644
index 0000000..62f4b1e
--- /dev/null
+++ b/xgen/specs/ui/link.variants.json
@@ -0,0 +1,27 @@
+{
+  "id": "ui.link",
+  "base": "inline-flex items-center underline-offset-4",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "gap-2 text-sm font-medium",
+      "default": "gap-2 text-base font-semibold",
+      "md": "gap-2 text-xl font-semibold",
+      "lg": "gap-2 text-2xl font-semibold"
+    },
+    "variant": {
+      "block": "flex w-full text-foreground",
+      "default": "text-foreground hover:underline",
+      "external": "text-foreground hover:underline",
+      "muted": "text-muted-foreground hover:text-foreground",
+      "nav": "text-foreground"
+    }
+  }
+}
diff --git a/xgen/specs/ui/list.json b/xgen/specs/ui/list.json
new file mode 100644
index 0000000..cbc67d2
--- /dev/null
+++ b/xgen/specs/ui/list.json
@@ -0,0 +1,221 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.list",
+  "tier": "brick",
+  "dir": "list",
+  "docs": "List renders semantic ul, ol, dl, or menu lists with ListItem children.",
+  "variants": {
+    "list": "list.variants.json"
+  },
+  "parts": [
+    {
+      "name": "List",
+      "docs": "List renders a list container (ul, ol, dl, or menu).",
+      "recipeId": "list",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Tag",
+          "type": "string",
+          "cva": false,
+          "docs": "ul, ol, dl, or menu"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "resolved",
+          "fromProp": "Tag",
+          "fallback": "ul",
+          "group": "List"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "ul",
+          "(List)"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "ListItem",
+      "docs": "ListItem renders one li with optional value attribute.",
+      "recipeId": "list",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Tag",
+          "type": "string",
+          "cva": false,
+          "docs": "li, dt, or dd; defaults to li"
+        },
+        {
+          "name": "Value",
+          "type": "int",
+          "cva": false,
+          "docs": "optional li value for ordered contexts"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "resolved",
+          "fromProp": "Tag",
+          "fallback": "li",
+          "group": "ListItem"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "intToString",
+              "expr": {
+                "kind": "prop",
+                "name": "Value"
+              }
+            },
+            "when": {
+              "kind": "and",
+              "exprs": [
+                {
+                  "kind": "isSet",
+                  "expr": {
+                    "kind": "prop",
+                    "name": "Value"
+                  }
+                },
+                {
+                  "kind": "eq",
+                  "left": {
+                    "kind": "resolvedTag"
+                  },
+                  "right": {
+                    "kind": "lit",
+                    "value": "li"
+                  }
+                }
+              ]
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "li",
+          "(ListItem)"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "tag.dl",
+      "props": {
+        "Class": "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2",
+        "Tag": "dl"
+      }
+    },
+    {
+      "id": "tag.ol",
+      "props": {
+        "Class": "list-decimal pl-4",
+        "Tag": "ol"
+      }
+    },
+    {
+      "id": "tag.ul",
+      "props": {
+        "Class": "gap-2",
+        "Tag": "ul"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/list.variants.json b/xgen/specs/ui/list.variants.json
new file mode 100644
index 0000000..2cd55f6
--- /dev/null
+++ b/xgen/specs/ui/list.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.list",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/lucide-icon.json b/xgen/specs/ui/lucide-icon.json
new file mode 100644
index 0000000..874d583
--- /dev/null
+++ b/xgen/specs/ui/lucide-icon.json
@@ -0,0 +1,114 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.lucide-icon",
+  "tier": "brick",
+  "dir": "lucide-icon",
+  "docs": "LucideIcon renders a Lucide glyph (ISC license) by kebab-case name from the generated registry specs/assets/lucide-icons.json. Decorative (aria-hidden) unless a Label is given.",
+  "variants": {
+    "lucide-icon": "lucide-icon.variants.json"
+  },
+  "parts": [
+    {
+      "name": "LucideIcon",
+      "docs": "LucideIcon renders an svg glyph by name.",
+      "recipeId": "lucide-icon",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "docs": "kebab-case Lucide name; an unknown name draws a circle"
+        },
+        {
+          "name": "Size",
+          "type": "int",
+          "cva": false,
+          "docs": "width and height in px, 16 by default"
+        },
+        {
+          "name": "StrokeWidth",
+          "type": "int",
+          "cva": false,
+          "docs": "stroke width, 2 by default"
+        },
+        {
+          "name": "Label",
+          "type": "string",
+          "cva": false,
+          "docs": "accessible name; without it the icon is decorative"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "svg"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "static",
+            "name": "data-slot",
+            "value": "icon"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": []
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "svg"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-slot",
+          "kind": "static",
+          "value": "icon"
+        }
+      ],
+      "tokens": []
+    }
+  ],
+  "examples": [],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "runtimeNotes": [
+    {
+      "runtime": "svelte",
+      "part": "LucideIcon",
+      "note": "the svg children are the nodes of the registry (an asset component of the runtime); the markup above is the frame"
+    },
+    {
+      "runtime": "react",
+      "part": "LucideIcon",
+      "note": "the svg children are the nodes of the registry (an asset component of the runtime); the markup above is the frame"
+    }
+  ]
+}
diff --git a/xgen/specs/ui/lucide-icon.variants.json b/xgen/specs/ui/lucide-icon.variants.json
new file mode 100644
index 0000000..284ccb0
--- /dev/null
+++ b/xgen/specs/ui/lucide-icon.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.lucide-icon",
+  "base": "inline-block shrink-0",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/meter.variants.json b/xgen/specs/ui/meter.variants.json
new file mode 100644
index 0000000..0f4a51c
--- /dev/null
+++ b/xgen/specs/ui/meter.variants.json
@@ -0,0 +1,24 @@
+{
+  "id": "ui.meter",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/progress.variants.json b/xgen/specs/ui/progress.variants.json
new file mode 100644
index 0000000..8931508
--- /dev/null
+++ b/xgen/specs/ui/progress.variants.json
@@ -0,0 +1,24 @@
+{
+  "id": "ui.progress",
+  "base": "w-full appearance-none overflow-hidden bg-muted progress-bar rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-1",
+      "default": "h-2",
+      "lg": "h-3"
+    },
+    "variant": {
+      "default": "[--bar:var(--color-primary)]",
+      "muted": "[--bar:var(--color-muted-foreground)]"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/radio.json b/xgen/specs/ui/radio.json
new file mode 100644
index 0000000..46a23f9
--- /dev/null
+++ b/xgen/specs/ui/radio.json
@@ -0,0 +1,248 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.radio",
+  "tier": "brick",
+  "dir": "radio",
+  "docs": "Radio is a native single-choice control within a named group.",
+  "variants": {
+    "radio": "radio.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Radio",
+      "docs": "Radio renders input[type=radio] with shared Name for grouping.",
+      "recipeId": "radio",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Checked",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Required",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "element id"
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "ARIA role override"
+        },
+        {
+          "name": "TabIndex",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "tab order override"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "accessible name for unlabeled controls"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "input"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "static",
+            "name": "type",
+            "value": "radio"
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "bool",
+            "name": "checked",
+            "expr": {
+              "kind": "prop",
+              "name": "Checked"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "required",
+            "expr": {
+              "kind": "prop",
+              "name": "Required"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "prop",
+              "name": "Role"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "tabindex",
+            "expr": {
+              "kind": "prop",
+              "name": "TabIndex"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "input"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--background",
+        "--border",
+        "--muted",
+        "--primary"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "layout.group",
+      "props": {
+        "Name": "plan"
+      }
+    },
+    {
+      "id": "state.disabled",
+      "props": {
+        "Disabled": true,
+        "Name": "plan",
+        "Value": "pro"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/radio.variants.json b/xgen/specs/ui/radio.variants.json
new file mode 100644
index 0000000..6c66b9f
--- /dev/null
+++ b/xgen/specs/ui/radio.variants.json
@@ -0,0 +1,22 @@
+{
+  "id": "ui.radio",
+  "base": "shrink-0 appearance-none rounded-full bg-background inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary radio-glyph disabled:cursor-not-allowed disabled:opacity-50",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "size-5 [--dot:10px]",
+      "sm": "size-4 [--dot:8px]"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted"
+    }
+  }
+}
diff --git a/xgen/specs/ui/range.json b/xgen/specs/ui/range.json
new file mode 100644
index 0000000..1eff028
--- /dev/null
+++ b/xgen/specs/ui/range.json
@@ -0,0 +1,239 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.range",
+  "tier": "brick",
+  "dir": "range",
+  "docs": "Range renders a styled input[type=range] (single thumb slider). The value is controlled from outside: Value in, an input event out (canary used a bindable prop).",
+  "variants": {
+    "range": "range.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Range",
+      "docs": "Range renders input type=range.",
+      "recipeId": "range",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "docs": "current value as a string, controlled by the caller",
+          "passthrough": true
+        },
+        {
+          "name": "Min",
+          "type": "int",
+          "cva": false,
+          "docs": "lowest value, 0 by default"
+        },
+        {
+          "name": "Max",
+          "type": "int",
+          "cva": false,
+          "docs": "highest value, 100 by default"
+        },
+        {
+          "name": "Step",
+          "type": "int",
+          "cva": false,
+          "docs": "step, 1 by default"
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false,
+          "docs": "disables the slider"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "docs": "accessible name"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "input"
+        },
+        "attrs": [
+          {
+            "kind": "static",
+            "name": "type",
+            "value": "range"
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "min",
+            "expr": {
+              "kind": "cond",
+              "test": {
+                "kind": "isSet",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Min"
+                }
+              },
+              "then": {
+                "kind": "intToString",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Min"
+                }
+              },
+              "else": {
+                "kind": "lit",
+                "value": "0"
+              }
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "max",
+            "expr": {
+              "kind": "cond",
+              "test": {
+                "kind": "isSet",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Max"
+                }
+              },
+              "then": {
+                "kind": "intToString",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Max"
+                }
+              },
+              "else": {
+                "kind": "lit",
+                "value": "100"
+              }
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "step",
+            "expr": {
+              "kind": "cond",
+              "test": {
+                "kind": "isSet",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Step"
+                }
+              },
+              "then": {
+                "kind": "intToString",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Step"
+                }
+              },
+              "else": {
+                "kind": "lit",
+                "value": "1"
+              }
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "input"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--muted",
+        "--primary"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "value.default",
+      "props": {
+        "Value": "30",
+        "AriaLabel": "Volume"
+      }
+    },
+    {
+      "id": "state.disabled",
+      "props": {
+        "Disabled": true,
+        "AriaLabel": "Volume"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  },
+  "runtimeNotes": [
+    {
+      "runtime": "svelte",
+      "part": "Range",
+      "note": "canary binds the value with $bindable; the contract here is Value + the input event (the caller owns the state)"
+    }
+  ]
+}
diff --git a/xgen/specs/ui/range.variants.json b/xgen/specs/ui/range.variants.json
new file mode 100644
index 0000000..e6881f6
--- /dev/null
+++ b/xgen/specs/ui/range.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.range",
+  "base": "h-5 w-full cursor-pointer appearance-none bg-transparent accent-primary disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded [&::-moz-range-track]:bg-muted [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/select.json b/xgen/specs/ui/select.json
new file mode 100644
index 0000000..8fead5c
--- /dev/null
+++ b/xgen/specs/ui/select.json
@@ -0,0 +1,510 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.select",
+  "tier": "brick",
+  "dir": "select",
+  "docs": "Select is a native dropdown built from Option items.",
+  "variants": {
+    "select": "select.variants.json"
+  },
+  "recordTypes": [
+    {
+      "name": "SelectOptionItem",
+      "fields": [
+        {
+          "name": "Value",
+          "type": "string"
+        },
+        {
+          "name": "Label",
+          "type": "string"
+        }
+      ]
+    }
+  ],
+  "parts": [
+    {
+      "name": "Select",
+      "docs": "Select renders option children from the Options list plus manual children.",
+      "recipeId": "select",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "docs": "currently selected option value"
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Required",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Options",
+          "type": "items",
+          "cva": false,
+          "itemsOf": "SelectOptionItem"
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "element id"
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "ARIA role override"
+        },
+        {
+          "name": "TabIndex",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "tab order override"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "accessible name for unlabeled controls"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "select"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "required",
+            "expr": {
+              "kind": "prop",
+              "name": "Required"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "prop",
+              "name": "Role"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "tabindex",
+            "expr": {
+              "kind": "prop",
+              "name": "TabIndex"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "forEach",
+            "itemsProp": "Options",
+            "body": [
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "option"
+                },
+                "attrs": [
+                  {
+                    "kind": "expr",
+                    "name": "value",
+                    "expr": {
+                      "kind": "item",
+                      "field": "Value"
+                    },
+                    "keepEmpty": true
+                  },
+                  {
+                    "kind": "bool",
+                    "name": "selected",
+                    "expr": {
+                      "kind": "eq",
+                      "left": {
+                        "kind": "item",
+                        "field": "Value"
+                      },
+                      "right": {
+                        "kind": "prop",
+                        "name": "Value"
+                      }
+                    }
+                  }
+                ],
+                "children": [
+                  {
+                    "kind": "text",
+                    "expr": {
+                      "kind": "item",
+                      "field": "Label"
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "select"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--background",
+        "--border",
+        "--foreground",
+        "--muted",
+        "--muted-foreground",
+        "--ring"
+      ]
+    },
+    {
+      "name": "SelectOption",
+      "docs": "SelectOption renders an option for custom Select children.",
+      "props": [
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Label",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Selected",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "option"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "label",
+            "expr": {
+              "kind": "prop",
+              "name": "Label"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "selected",
+            "expr": {
+              "kind": "prop",
+              "name": "Selected"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "option"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "OptGroup",
+      "docs": "OptGroup renders a native optgroup around option children.",
+      "classes": {},
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Label",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "optgroup"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "label",
+            "expr": {
+              "kind": "prop",
+              "name": "Label"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "optgroup"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "state.disabled",
+      "props": {
+        "Disabled": true,
+        "Name": "locked",
+        "Options": [
+          {
+            "Label": "Option A",
+            "Value": "a"
+          }
+        ]
+      }
+    },
+    {
+      "id": "variant.default",
+      "props": {
+        "Name": "country",
+        "Options": [
+          {
+            "Label": "United States",
+            "Value": "us"
+          },
+          {
+            "Label": "Canada",
+            "Value": "ca"
+          }
+        ],
+        "Value": "us"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/select.variants.json b/xgen/specs/ui/select.variants.json
new file mode 100644
index 0000000..66aa4cd
--- /dev/null
+++ b/xgen/specs/ui/select.variants.json
@@ -0,0 +1,24 @@
+{
+  "id": "ui.select",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "h-8 px-3 text-sm",
+      "default": "h-10 px-3 text-sm",
+      "lg": "h-12 px-4 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/separator.json b/xgen/specs/ui/separator.json
new file mode 100644
index 0000000..ec13004
--- /dev/null
+++ b/xgen/specs/ui/separator.json
@@ -0,0 +1,164 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.separator",
+  "tier": "brick",
+  "dir": "separator",
+  "docs": "Separator renders a semantic or decorative hr.",
+  "variants": {
+    "separator": "separator.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Separator",
+      "docs": "Separator renders hr with optional decorative semantics.",
+      "recipeId": "separator",
+      "classes": {
+        "recipe": {
+          "orientation": "Orientation",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Orientation",
+          "type": "string",
+          "cva": true,
+          "cvaKey": "orientation",
+          "docs": "horizontal or vertical"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Decorative",
+          "type": "bool",
+          "cva": false,
+          "docs": "hides the rule from assistive technology"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "hr"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "lit",
+              "value": "presentation"
+            },
+            "when": {
+              "kind": "prop",
+              "name": "Decorative"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-hidden",
+            "expr": {
+              "kind": "lit",
+              "value": "true"
+            },
+            "when": {
+              "kind": "prop",
+              "name": "Decorative"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-orientation",
+            "expr": {
+              "kind": "lit",
+              "value": "vertical"
+            },
+            "when": {
+              "kind": "eq",
+              "left": {
+                "kind": "prop",
+                "name": "Orientation"
+              },
+              "right": {
+                "kind": "lit",
+                "value": "vertical"
+              }
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "hr"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-hidden",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-orientation",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--border",
+        "--foreground",
+        "--muted"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "orientation.vertical",
+      "props": {
+        "Decorative": true,
+        "Orientation": "vertical"
+      }
+    },
+    {
+      "id": "variant.default",
+      "props": {
+        "Variant": "default"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/separator.variants.json b/xgen/specs/ui/separator.variants.json
new file mode 100644
index 0000000..35292f2
--- /dev/null
+++ b/xgen/specs/ui/separator.variants.json
@@ -0,0 +1,23 @@
+{
+  "id": "ui.separator",
+  "base": "shrink-0 border-0 bg-border",
+  "keys": [
+    "orientation",
+    "variant"
+  ],
+  "defaults": {
+    "orientation": "horizontal",
+    "variant": "default"
+  },
+  "byKey": {
+    "orientation": {
+      "horizontal": "h-px w-full",
+      "vertical": "h-full w-px"
+    },
+    "variant": {
+      "default": "",
+      "spaced": "my-6"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/sheet.json b/xgen/specs/ui/sheet.json
new file mode 100644
index 0000000..1e6ed55
--- /dev/null
+++ b/xgen/specs/ui/sheet.json
@@ -0,0 +1,949 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.sheet",
+  "tier": "brick",
+  "dir": "sheet",
+  "docs": "Sheet is a side drawer dialog with a trigger (Lucide menu/x) and a close button. Behavior: behaviors/ui8kit.js.",
+  "variants": {
+    "sheet": "sheet.variants.json",
+    "sheettrigger": "sheettrigger.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Sheet",
+      "docs": "Sheet renders the hidden dialog root: overlay + panel (children). ID is required for the trigger's aria-controls.",
+      "recipeId": "sheet",
+      "classes": {
+        "recipe": {
+          "side": "Side"
+        }
+      },
+      "props": [
+        {
+          "name": "Side",
+          "type": "string",
+          "cva": true,
+          "cvaKey": "side",
+          "docs": "left or right"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "docs": "dialog id (target of SheetTrigger Controls)"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "docs": "accessible name (default: Menu)"
+        },
+        {
+          "name": "Open",
+          "type": "bool",
+          "cva": false,
+          "docs": "render open (static); default hidden"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "static",
+            "name": "role",
+            "value": "dialog"
+          },
+          {
+            "kind": "static",
+            "name": "aria-modal",
+            "value": "true"
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "defaultIfEmpty",
+              "expr": {
+                "kind": "prop",
+                "name": "AriaLabel"
+              },
+              "fallback": "Menu"
+            }
+          },
+          {
+            "kind": "static",
+            "name": "data-ui8kit",
+            "value": "sheet"
+          },
+          {
+            "kind": "bool",
+            "name": "hidden",
+            "expr": {
+              "kind": "not",
+              "expr": {
+                "kind": "prop",
+                "name": "Open"
+              }
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "div"
+            },
+            "attrs": [
+              {
+                "kind": "static",
+                "name": "class",
+                "value": "absolute inset-0 bg-foreground/40"
+              },
+              {
+                "kind": "static",
+                "name": "data-ui8kit",
+                "value": "sheet-overlay"
+              }
+            ],
+            "children": []
+          },
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "div"
+            },
+            "attrs": [
+              {
+                "kind": "static",
+                "name": "class",
+                "value": "relative flex h-full w-80 max-w-full flex-col gap-6 overflow-auto bg-background p-6 text-foreground shadow-lg"
+              }
+            ],
+            "children": [
+              {
+                "kind": "slot"
+              }
+            ]
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [
+          "dialog"
+        ],
+        "aria": [
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-modal",
+            "kind": "static",
+            "value": "true"
+          },
+          {
+            "name": "role",
+            "kind": "static",
+            "value": "dialog"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-ui8kit",
+          "kind": "static",
+          "value": "sheet"
+        },
+        {
+          "name": "data-ui8kit",
+          "kind": "static",
+          "value": "sheet-overlay"
+        }
+      ],
+      "tokens": []
+    },
+    {
+      "name": "SheetTrigger",
+      "docs": "SheetTrigger renders the menu button (aria-expanded, aria-controls, aria-haspopup=dialog) with Lucide menu/x icons.",
+      "recipeId": "sheettrigger",
+      "classes": {
+        "recipe": {
+          "variant": "Variant",
+          "size": "Size"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "default, ghost, contrast, current"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sm, default, lg"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Controls",
+          "type": "string",
+          "cva": false,
+          "docs": "id of the Sheet"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "docs": "accessible name (default: Open menu)"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "button"
+        },
+        "attrs": [
+          {
+            "kind": "static",
+            "name": "type",
+            "value": "button"
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "static",
+            "name": "data-ui8kit",
+            "value": "sheet-trigger"
+          },
+          {
+            "kind": "expr",
+            "name": "aria-controls",
+            "expr": {
+              "kind": "prop",
+              "name": "Controls"
+            }
+          },
+          {
+            "kind": "static",
+            "name": "aria-expanded",
+            "value": "false"
+          },
+          {
+            "kind": "static",
+            "name": "aria-haspopup",
+            "value": "dialog"
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "defaultIfEmpty",
+              "expr": {
+                "kind": "prop",
+                "name": "AriaLabel"
+              },
+              "fallback": "Open menu"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "svg"
+            },
+            "attrs": [
+              {
+                "kind": "static",
+                "name": "class",
+                "value": "block size-5 in-aria-expanded:hidden"
+              },
+              {
+                "kind": "static",
+                "name": "xmlns",
+                "value": "http://www.w3.org/2000/svg"
+              },
+              {
+                "kind": "static",
+                "name": "viewBox",
+                "value": "0 0 24 24"
+              },
+              {
+                "kind": "static",
+                "name": "fill",
+                "value": "none"
+              },
+              {
+                "kind": "static",
+                "name": "stroke",
+                "value": "currentColor"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-width",
+                "value": "2"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linecap",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linejoin",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "aria-hidden",
+                "value": "true"
+              }
+            ],
+            "children": [
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "line"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "x1",
+                    "value": "4"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "x2",
+                    "value": "20"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "y1",
+                    "value": "12"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "y2",
+                    "value": "12"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "line"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "x1",
+                    "value": "4"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "x2",
+                    "value": "20"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "y1",
+                    "value": "6"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "y2",
+                    "value": "6"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "line"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "x1",
+                    "value": "4"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "x2",
+                    "value": "20"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "y1",
+                    "value": "18"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "y2",
+                    "value": "18"
+                  }
+                ],
+                "children": []
+              }
+            ]
+          },
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "svg"
+            },
+            "attrs": [
+              {
+                "kind": "static",
+                "name": "class",
+                "value": "hidden size-5 in-aria-expanded:block"
+              },
+              {
+                "kind": "static",
+                "name": "xmlns",
+                "value": "http://www.w3.org/2000/svg"
+              },
+              {
+                "kind": "static",
+                "name": "viewBox",
+                "value": "0 0 24 24"
+              },
+              {
+                "kind": "static",
+                "name": "fill",
+                "value": "none"
+              },
+              {
+                "kind": "static",
+                "name": "stroke",
+                "value": "currentColor"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-width",
+                "value": "2"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linecap",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linejoin",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "aria-hidden",
+                "value": "true"
+              }
+            ],
+            "children": [
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "M18 6 6 18"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "m6 6 12 12"
+                  }
+                ],
+                "children": []
+              }
+            ]
+          }
+        ]
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "button"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-controls",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-expanded",
+            "kind": "static",
+            "value": "false"
+          },
+          {
+            "name": "aria-haspopup",
+            "kind": "static",
+            "value": "dialog"
+          },
+          {
+            "name": "aria-hidden",
+            "kind": "static",
+            "value": "true"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-ui8kit",
+          "kind": "static",
+          "value": "sheet-trigger"
+        }
+      ],
+      "tokens": [
+        "--accent",
+        "--foreground",
+        "--muted",
+        "--primary-foreground",
+        "--ring"
+      ]
+    },
+    {
+      "name": "SheetClose",
+      "docs": "SheetClose renders the close button (Lucide x) inside the panel.",
+      "recipeId": "sheettrigger",
+      "classes": {
+        "recipe": {
+          "variant": "Variant",
+          "size": "Size"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "default, ghost, contrast, current"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sm, default, lg"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "docs": "accessible name (default: Close menu)"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "button"
+        },
+        "attrs": [
+          {
+            "kind": "static",
+            "name": "type",
+            "value": "button"
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "static",
+            "name": "data-ui8kit",
+            "value": "sheet-close"
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "defaultIfEmpty",
+              "expr": {
+                "kind": "prop",
+                "name": "AriaLabel"
+              },
+              "fallback": "Close menu"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "svg"
+            },
+            "attrs": [
+              {
+                "kind": "static",
+                "name": "class",
+                "value": "size-5"
+              },
+              {
+                "kind": "static",
+                "name": "xmlns",
+                "value": "http://www.w3.org/2000/svg"
+              },
+              {
+                "kind": "static",
+                "name": "viewBox",
+                "value": "0 0 24 24"
+              },
+              {
+                "kind": "static",
+                "name": "fill",
+                "value": "none"
+              },
+              {
+                "kind": "static",
+                "name": "stroke",
+                "value": "currentColor"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-width",
+                "value": "2"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linecap",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linejoin",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "aria-hidden",
+                "value": "true"
+              }
+            ],
+            "children": [
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "M18 6 6 18"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "m6 6 12 12"
+                  }
+                ],
+                "children": []
+              }
+            ]
+          }
+        ]
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "button"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-hidden",
+            "kind": "static",
+            "value": "true"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-ui8kit",
+          "kind": "static",
+          "value": "sheet-close"
+        }
+      ],
+      "tokens": [
+        "--accent",
+        "--foreground",
+        "--muted",
+        "--primary-foreground",
+        "--ring"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "side.right",
+      "props": {
+        "Side": "right",
+        "ID": "nav-sheet"
+      }
+    },
+    {
+      "id": "side.left",
+      "props": {
+        "Side": "left",
+        "ID": "nav-sheet",
+        "AriaLabel": "Navigation"
+      }
+    },
+    {
+      "id": "state.open",
+      "props": {
+        "ID": "nav-sheet",
+        "Open": true
+      }
+    },
+    {
+      "id": "trigger.default",
+      "props": {
+        "ID": "nav-sheet"
+      },
+      "children": {
+        "SheetTrigger": {
+          "props": {
+            "Controls": "nav-sheet",
+            "Variant": "default",
+            "Size": "default"
+          }
+        },
+        "SheetClose": {
+          "props": {
+            "Variant": "default",
+            "Size": "default"
+          }
+        }
+      }
+    },
+    {
+      "id": "trigger.ghost",
+      "props": {
+        "ID": "nav-sheet"
+      },
+      "children": {
+        "SheetTrigger": {
+          "props": {
+            "Controls": "nav-sheet",
+            "Variant": "ghost",
+            "Size": "default"
+          }
+        },
+        "SheetClose": {
+          "props": {
+            "Variant": "ghost",
+            "Size": "default"
+          }
+        }
+      }
+    },
+    {
+      "id": "trigger.contrast",
+      "props": {
+        "ID": "nav-sheet"
+      },
+      "children": {
+        "SheetTrigger": {
+          "props": {
+            "Controls": "nav-sheet",
+            "Variant": "contrast",
+            "Size": "default"
+          }
+        },
+        "SheetClose": {
+          "props": {
+            "Variant": "contrast",
+            "Size": "default"
+          }
+        }
+      }
+    },
+    {
+      "id": "trigger.current",
+      "props": {
+        "ID": "nav-sheet"
+      },
+      "children": {
+        "SheetTrigger": {
+          "props": {
+            "Controls": "nav-sheet",
+            "Variant": "current",
+            "Size": "default"
+          }
+        },
+        "SheetClose": {
+          "props": {
+            "Variant": "current",
+            "Size": "default"
+          }
+        }
+      }
+    },
+    {
+      "id": "trigger.size.sm",
+      "props": {
+        "ID": "nav-sheet"
+      },
+      "children": {
+        "SheetTrigger": {
+          "props": {
+            "Controls": "nav-sheet",
+            "Size": "sm"
+          }
+        },
+        "SheetClose": {
+          "props": {
+            "Size": "sm"
+          }
+        }
+      }
+    },
+    {
+      "id": "trigger.size.lg",
+      "props": {
+        "ID": "nav-sheet"
+      },
+      "children": {
+        "SheetTrigger": {
+          "props": {
+            "Controls": "nav-sheet",
+            "Size": "lg"
+          }
+        },
+        "SheetClose": {
+          "props": {
+            "Size": "lg"
+          }
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/sheet.variants.json b/xgen/specs/ui/sheet.variants.json
new file mode 100644
index 0000000..6a01aba
--- /dev/null
+++ b/xgen/specs/ui/sheet.variants.json
@@ -0,0 +1,16 @@
+{
+  "id": "ui.sheet",
+  "base": "fixed inset-0 z-50 flex",
+  "keys": [
+    "side"
+  ],
+  "defaults": {
+    "side": "right"
+  },
+  "byKey": {
+    "side": {
+      "left": "flex-row justify-start",
+      "right": "flex-row justify-end"
+    }
+  }
+}
diff --git a/xgen/specs/ui/sheettrigger.variants.json b/xgen/specs/ui/sheettrigger.variants.json
new file mode 100644
index 0000000..59b3f75
--- /dev/null
+++ b/xgen/specs/ui/sheettrigger.variants.json
@@ -0,0 +1,25 @@
+{
+  "id": "ui.sheettrigger",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/xgen/specs/ui/skeleton.json b/xgen/specs/ui/skeleton.json
new file mode 100644
index 0000000..144052f
--- /dev/null
+++ b/xgen/specs/ui/skeleton.json
@@ -0,0 +1,112 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.skeleton",
+  "tier": "brick",
+  "dir": "skeleton",
+  "docs": "Skeleton renders a pulsing placeholder box (loading state). It is decorative: aria-hidden; the loading state is announced by the container (aria-busy).",
+  "variants": {
+    "skeleton": "skeleton.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Skeleton",
+      "docs": "Skeleton renders a decorative placeholder.",
+      "recipeId": "skeleton",
+      "classes": {
+        "recipe": {
+          "shape": "Shape"
+        }
+      },
+      "props": [
+        {
+          "name": "Shape",
+          "type": "string",
+          "cva": true,
+          "docs": "line, block or circle"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "div"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "static",
+            "name": "aria-hidden",
+            "value": "true"
+          },
+          {
+            "kind": "static",
+            "name": "data-slot",
+            "value": "skeleton"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": []
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-hidden",
+            "kind": "static",
+            "value": "true"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-slot",
+          "kind": "static",
+          "value": "skeleton"
+        }
+      ],
+      "tokens": [
+        "--muted"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "shape.line",
+      "props": {
+        "Shape": "line"
+      }
+    },
+    {
+      "id": "shape.block",
+      "props": {
+        "Shape": "block"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/skeleton.variants.json b/xgen/specs/ui/skeleton.variants.json
new file mode 100644
index 0000000..4cb05b0
--- /dev/null
+++ b/xgen/specs/ui/skeleton.variants.json
@@ -0,0 +1,17 @@
+{
+  "id": "ui.skeleton",
+  "base": "animate-pulse bg-muted motion-reduce:animate-none rounded",
+  "keys": [
+    "shape"
+  ],
+  "defaults": {
+    "shape": "line"
+  },
+  "byKey": {
+    "shape": {
+      "line": "h-4 w-full",
+      "block": "h-20 w-full"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/stack.json b/xgen/specs/ui/stack.json
new file mode 100644
index 0000000..d7a1986
--- /dev/null
+++ b/xgen/specs/ui/stack.json
@@ -0,0 +1,127 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.stack",
+  "tier": "brick",
+  "dir": "stack",
+  "docs": "Stack arranges children vertically in a flex column.\nDefault layout primitive for spacing sections and form fields.",
+  "variants": {
+    "stack": "stack.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Stack",
+      "docs": "Stack renders a vertical flex container.",
+      "recipeId": "stack",
+      "asChild": true,
+      "classes": {
+        "recipe": {
+          "gap": "Gap",
+          "align": "Align",
+          "justify": "Justify"
+        }
+      },
+      "props": [
+        {
+          "name": "Gap",
+          "type": "string",
+          "cva": true,
+          "docs": "sets gap: a Tailwind spacing step (0, 2, 4, 6, 8, 10, 12 = gap-N) or auto"
+        },
+        {
+          "name": "Align",
+          "type": "string",
+          "cva": true,
+          "docs": "sets align"
+        },
+        {
+          "name": "Justify",
+          "type": "string",
+          "cva": true,
+          "docs": "sets justify"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Tag",
+          "type": "string",
+          "cva": false,
+          "docs": "div, ul, or ol. Use Block for landmarks (aside, section, header, nav)."
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "resolved",
+          "fromProp": "Tag",
+          "fallback": "div",
+          "group": "Stack"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "div",
+          "(Stack)"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "tag.default",
+      "props": {
+        "Class": "gap-4",
+        "Tag": "div"
+      }
+    },
+    {
+      "id": "tag.ul",
+      "props": {
+        "Class": "gap-2",
+        "Tag": "ul"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/stack.variants.json b/xgen/specs/ui/stack.variants.json
new file mode 100644
index 0000000..d3490d8
--- /dev/null
+++ b/xgen/specs/ui/stack.variants.json
@@ -0,0 +1,39 @@
+{
+  "id": "ui.stack",
+  "base": "flex flex-col",
+  "keys": [
+    "gap",
+    "align",
+    "justify"
+  ],
+  "defaults": {
+    "gap": "auto",
+    "align": "start",
+    "justify": "start"
+  },
+  "byKey": {
+    "gap": {
+      "0": "gap-0",
+      "2": "gap-2",
+      "4": "gap-4",
+      "6": "gap-6",
+      "8": "gap-8",
+      "10": "gap-10",
+      "12": "gap-12",
+      "auto": ""
+    },
+    "align": {
+      "start": "items-start",
+      "center": "items-center",
+      "end": "items-end",
+      "stretch": "items-stretch",
+      "baseline": "items-baseline"
+    },
+    "justify": {
+      "start": "justify-start",
+      "center": "justify-center",
+      "end": "justify-end",
+      "between": "justify-between"
+    }
+  }
+}
diff --git a/xgen/specs/ui/summary.variants.json b/xgen/specs/ui/summary.variants.json
new file mode 100644
index 0000000..0fdb745
--- /dev/null
+++ b/xgen/specs/ui/summary.variants.json
@@ -0,0 +1,25 @@
+{
+  "id": "ui.summary",
+  "base": "flex cursor-pointer list-none items-center justify-between gap-2 [&::-webkit-details-marker]:hidden",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "text-xs font-semibold",
+      "default": "text-sm font-semibold",
+      "lg": "text-base font-semibold"
+    },
+    "variant": {
+      "card": "py-2 pr-4 pl-4",
+      "default": "py-2 pr-4 pl-4",
+      "ghost": "py-2",
+      "item": "py-4 text-muted-foreground hover:text-foreground group-open:text-foreground"
+    }
+  }
+}
diff --git a/xgen/specs/ui/switch.json b/xgen/specs/ui/switch.json
new file mode 100644
index 0000000..ab329b9
--- /dev/null
+++ b/xgen/specs/ui/switch.json
@@ -0,0 +1,257 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.switch",
+  "tier": "brick",
+  "dir": "switch",
+  "docs": "Switch is a toggle control (checkbox with switch ARIA semantics).\nUse for on/off settings; wireframe uses native checkbox styling.",
+  "variants": {
+    "switch": "switch.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Switch",
+      "docs": "Switch renders input[type=checkbox] with switch role attrs.",
+      "recipeId": "switch",
+      "classes": {
+        "recipe": {
+          "size": "Size"
+        }
+      },
+      "props": [
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Checked",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Required",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "TabIndex",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "input"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "static",
+            "name": "type",
+            "value": "checkbox"
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "value",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "bool",
+            "name": "checked",
+            "expr": {
+              "kind": "prop",
+              "name": "Checked"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "required",
+            "expr": {
+              "kind": "prop",
+              "name": "Required"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "tabindex",
+            "expr": {
+              "kind": "prop",
+              "name": "TabIndex"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "static",
+            "name": "role",
+            "value": "switch"
+          },
+          {
+            "kind": "expr",
+            "name": "aria-checked",
+            "expr": {
+              "kind": "boolToString",
+              "expr": {
+                "kind": "prop",
+                "name": "Checked"
+              }
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "input"
+        ],
+        "roles": [
+          "switch"
+        ],
+        "aria": [
+          {
+            "name": "aria-checked",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "static",
+            "value": "switch"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--border",
+        "--muted",
+        "--primary"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "state.disabled",
+      "props": {
+        "AriaLabel": "Locked setting",
+        "Checked": true,
+        "Disabled": true,
+        "Name": "locked"
+      }
+    },
+    {
+      "id": "state.off",
+      "props": {
+        "AriaLabel": "Notifications",
+        "ID": "notifications",
+        "Name": "notifications"
+      }
+    },
+    {
+      "id": "state.on",
+      "props": {
+        "AriaLabel": "Notifications",
+        "Checked": true,
+        "ID": "notifications",
+        "Name": "notifications"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/switch.variants.json b/xgen/specs/ui/switch.variants.json
new file mode 100644
index 0000000..e070d2f
--- /dev/null
+++ b/xgen/specs/ui/switch.variants.json
@@ -0,0 +1,16 @@
+{
+  "id": "ui.switch",
+  "base": "relative shrink-0 appearance-none bg-muted inset-ring inset-ring-input checked:bg-primary checked:inset-ring-primary switch-knob disabled:cursor-not-allowed disabled:opacity-50 rounded-full",
+  "keys": [
+    "size"
+  ],
+  "defaults": {
+    "size": "default"
+  },
+  "byKey": {
+    "size": {
+      "default": "h-5 w-9 [--knob:12px] [--pad:4px]",
+      "sm": "h-4 w-8 [--knob:12px] [--pad:2px]"
+    }
+  }
+}
diff --git a/xgen/specs/ui/table-cell.variants.json b/xgen/specs/ui/table-cell.variants.json
new file mode 100644
index 0000000..03af499
--- /dev/null
+++ b/xgen/specs/ui/table-cell.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.table-cell",
+  "base": "px-2 py-2 align-middle",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/table-head-cell.variants.json b/xgen/specs/ui/table-head-cell.variants.json
new file mode 100644
index 0000000..4a182a4
--- /dev/null
+++ b/xgen/specs/ui/table-head-cell.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.table-head-cell",
+  "base": "px-2 py-2 text-left align-middle font-semibold",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/table.json b/xgen/specs/ui/table.json
new file mode 100644
index 0000000..41a09d1
--- /dev/null
+++ b/xgen/specs/ui/table.json
@@ -0,0 +1,851 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.table",
+  "tier": "brick",
+  "dir": "table",
+  "docs": "Table composes semantic table, caption, sections, rows, and cells.\nSupports scope, colspan, and headers attrs on head cells.",
+  "variants": {
+    "table": "table.variants.json",
+    "tableCell": "table-cell.variants.json",
+    "tableHeadCell": "table-head-cell.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Table",
+      "docs": "Table renders the root table element.",
+      "recipeId": "table",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "table"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "table"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "TableCaption",
+      "docs": "TableCaption renders the table caption.",
+      "classes": {},
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "caption"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "caption"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "TableHead",
+      "docs": "TableHead renders the thead section.",
+      "classes": {},
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "thead"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "thead"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "TableBody",
+      "docs": "TableBody renders the tbody section.",
+      "classes": {},
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "tbody"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "tbody"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "TableFoot",
+      "docs": "TableFoot renders the tfoot section.",
+      "classes": {},
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "tfoot"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "tfoot"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "TableRow",
+      "docs": "TableRow renders one tr row.",
+      "classes": {},
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "tr"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "tr"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "TableHeadCell",
+      "docs": "TableHeadCell renders th with optional scope and abbr.",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Scope",
+          "type": "string",
+          "cva": false,
+          "docs": "th scope: col, row, colgroup, rowgroup"
+        },
+        {
+          "name": "ColSpan",
+          "type": "int",
+          "cva": false
+        },
+        {
+          "name": "RowSpan",
+          "type": "int",
+          "cva": false
+        },
+        {
+          "name": "Headers",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "ids of related header cells"
+        },
+        {
+          "name": "Abbr",
+          "type": "string",
+          "cva": false,
+          "docs": "abbreviated header text for th"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "th"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "scope",
+            "expr": {
+              "kind": "mapOr",
+              "expr": {
+                "kind": "prop",
+                "name": "Scope"
+              },
+              "mapping": {
+                "col": "col",
+                "colgroup": "colgroup",
+                "row": "row",
+                "rowgroup": "rowgroup"
+              },
+              "fallback": "",
+              "lower": true
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "abbr",
+            "expr": {
+              "kind": "prop",
+              "name": "Abbr"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "colspan",
+            "expr": {
+              "kind": "intToString",
+              "expr": {
+                "kind": "prop",
+                "name": "ColSpan"
+              }
+            },
+            "when": {
+              "kind": "isSet",
+              "expr": {
+                "kind": "prop",
+                "name": "ColSpan"
+              }
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "rowspan",
+            "expr": {
+              "kind": "intToString",
+              "expr": {
+                "kind": "prop",
+                "name": "RowSpan"
+              }
+            },
+            "when": {
+              "kind": "isSet",
+              "expr": {
+                "kind": "prop",
+                "name": "RowSpan"
+              }
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "headers",
+            "expr": {
+              "kind": "prop",
+              "name": "Headers"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "th"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [],
+      "recipeId": "tableHeadCell"
+    },
+    {
+      "name": "TableCell",
+      "docs": "TableCell renders td with colspan and rowspan.",
+      "classes": {
+        "recipe": {}
+      },
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Scope",
+          "type": "string",
+          "cva": false,
+          "docs": "th scope: col, row, colgroup, rowgroup"
+        },
+        {
+          "name": "ColSpan",
+          "type": "int",
+          "cva": false
+        },
+        {
+          "name": "RowSpan",
+          "type": "int",
+          "cva": false
+        },
+        {
+          "name": "Headers",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "ids of related header cells"
+        },
+        {
+          "name": "Abbr",
+          "type": "string",
+          "cva": false,
+          "docs": "abbreviated header text for th"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "td"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "colspan",
+            "expr": {
+              "kind": "intToString",
+              "expr": {
+                "kind": "prop",
+                "name": "ColSpan"
+              }
+            },
+            "when": {
+              "kind": "isSet",
+              "expr": {
+                "kind": "prop",
+                "name": "ColSpan"
+              }
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "rowspan",
+            "expr": {
+              "kind": "intToString",
+              "expr": {
+                "kind": "prop",
+                "name": "RowSpan"
+              }
+            },
+            "when": {
+              "kind": "isSet",
+              "expr": {
+                "kind": "prop",
+                "name": "RowSpan"
+              }
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "headers",
+            "expr": {
+              "kind": "prop",
+              "name": "Headers"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "td"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [],
+      "recipeId": "tableCell"
+    },
+    {
+      "name": "TableColGroup",
+      "docs": "TableColGroup renders colgroup with optional span.",
+      "classes": {},
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Span",
+          "type": "int",
+          "cva": false
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "colgroup"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "span",
+            "expr": {
+              "kind": "intToString",
+              "expr": {
+                "kind": "prop",
+                "name": "Span"
+              }
+            },
+            "when": {
+              "kind": "isSet",
+              "expr": {
+                "kind": "prop",
+                "name": "Span"
+              }
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "colgroup"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    },
+    {
+      "name": "TableCol",
+      "docs": "TableCol renders a single col definition.",
+      "classes": {},
+      "props": [
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Span",
+          "type": "int",
+          "cva": false
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "col"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "span",
+            "expr": {
+              "kind": "intToString",
+              "expr": {
+                "kind": "prop",
+                "name": "Span"
+              }
+            },
+            "when": {
+              "kind": "isSet",
+              "expr": {
+                "kind": "prop",
+                "name": "Span"
+              }
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [],
+        "void": true
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "col"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "layout.basic",
+      "props": {
+        "Class": "w-full text-sm"
+      },
+      "children": {
+        "TableHeadCell": {
+          "props": {
+            "Scope": "col"
+          }
+        }
+      }
+    },
+    {
+      "id": "cell.colspan",
+      "props": {},
+      "children": {
+        "TableCell": {
+          "props": {
+            "ColSpan": 2
+          }
+        }
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/table.variants.json b/xgen/specs/ui/table.variants.json
new file mode 100644
index 0000000..4ea9471
--- /dev/null
+++ b/xgen/specs/ui/table.variants.json
@@ -0,0 +1,7 @@
+{
+  "id": "ui.table",
+  "base": "",
+  "keys": [],
+  "defaults": {},
+  "byKey": {}
+}
diff --git a/xgen/specs/ui/text.json b/xgen/specs/ui/text.json
new file mode 100644
index 0000000..8b40310
--- /dev/null
+++ b/xgen/specs/ui/text.json
@@ -0,0 +1,129 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.text",
+  "tier": "brick",
+  "dir": "text",
+  "docs": "Text renders body copy: a paragraph by default; Tag picks another text element (blockquote, figcaption, address, pre, or an\ninline element). Title (as 1–6) is for headings.",
+  "variants": {
+    "text": "text.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Text",
+      "docs": "Text renders a p element with body copy classes, or the block or inline text element of `Tag`.",
+      "recipeId": "text",
+      "asChild": true,
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "weight": "Weight"
+        }
+      },
+      "props": [
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets size"
+        },
+        {
+          "name": "Weight",
+          "type": "string",
+          "cva": true,
+          "docs": "sets weight"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Tag",
+          "type": "string",
+          "cva": false,
+          "docs": "p (default), blockquote, figcaption, address, pre, or an inline element (span, strong, em, ...)"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "resolved",
+          "fromProp": "Tag",
+          "fallback": "p",
+          "group": "Text"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "p",
+          "(Text)"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": []
+    }
+  ],
+  "examples": [
+    {
+      "id": "default",
+      "props": {}
+    },
+    {
+      "id": "muted",
+      "props": {
+        "Class": "text-muted-foreground"
+      }
+    },
+    {
+      "id": "code",
+      "props": {
+        "Class": "text-sm font-mono"
+      }
+    },
+    {
+      "id": "tag.blockquote",
+      "props": {
+        "Tag": "blockquote",
+        "Class": "border-l border-border pl-4"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/text.variants.json b/xgen/specs/ui/text.variants.json
new file mode 100644
index 0000000..39b6660
--- /dev/null
+++ b/xgen/specs/ui/text.variants.json
@@ -0,0 +1,33 @@
+{
+  "id": "ui.text",
+  "base": "",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "inherit"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold",
+      "inherit": ""
+    }
+  }
+}
diff --git a/xgen/specs/ui/textarea.json b/xgen/specs/ui/textarea.json
new file mode 100644
index 0000000..dd97ded
--- /dev/null
+++ b/xgen/specs/ui/textarea.json
@@ -0,0 +1,285 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.textarea",
+  "tier": "brick",
+  "dir": "textarea",
+  "docs": "Textarea is a multi-line native text field with row sizing.",
+  "variants": {
+    "textarea": "textarea.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Textarea",
+      "docs": "Textarea renders a styled multi-line form control.",
+      "recipeId": "textarea",
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "variant": "Variant"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "sets appearance preset"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets density preset"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "Name",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Value",
+          "type": "string",
+          "cva": false,
+          "docs": "initial textarea content"
+        },
+        {
+          "name": "Placeholder",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "Rows",
+          "type": "int",
+          "cva": false,
+          "docs": "visible line count; defaults to 4 when zero"
+        },
+        {
+          "name": "Disabled",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "Required",
+          "type": "bool",
+          "cva": false
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "element id"
+        },
+        {
+          "name": "Role",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "ARIA role override"
+        },
+        {
+          "name": "TabIndex",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "tab order override"
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "passthrough": true,
+          "docs": "accessible name for unlabeled controls"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "textarea"
+        },
+        "attrs": [
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "name",
+            "expr": {
+              "kind": "prop",
+              "name": "Name"
+            }
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "rows",
+            "expr": {
+              "kind": "cond",
+              "test": {
+                "kind": "isSet",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Rows"
+                }
+              },
+              "then": {
+                "kind": "intToString",
+                "expr": {
+                  "kind": "prop",
+                  "name": "Rows"
+                }
+              },
+              "else": {
+                "kind": "lit",
+                "value": "4"
+              }
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "placeholder",
+            "expr": {
+              "kind": "prop",
+              "name": "Placeholder"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "disabled",
+            "expr": {
+              "kind": "prop",
+              "name": "Disabled"
+            }
+          },
+          {
+            "kind": "bool",
+            "name": "required",
+            "expr": {
+              "kind": "prop",
+              "name": "Required"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "role",
+            "expr": {
+              "kind": "prop",
+              "name": "Role"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "tabindex",
+            "expr": {
+              "kind": "prop",
+              "name": "TabIndex"
+            }
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "prop",
+              "name": "AriaLabel"
+            }
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "text",
+            "expr": {
+              "kind": "prop",
+              "name": "Value"
+            }
+          }
+        ]
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "textarea"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "role",
+            "kind": "expr"
+          },
+          {
+            "name": "tabindex",
+            "kind": "expr"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--background",
+        "--border",
+        "--foreground",
+        "--muted",
+        "--muted-foreground",
+        "--ring"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "rows.custom",
+      "props": {
+        "Name": "bio",
+        "Placeholder": "Bio",
+        "Rows": 6
+      }
+    },
+    {
+      "id": "state.disabled",
+      "props": {
+        "Disabled": true,
+        "Name": "locked",
+        "Value": "Fixed text"
+      }
+    },
+    {
+      "id": "variant.default",
+      "props": {
+        "Name": "message",
+        "Placeholder": "Your message"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/textarea.variants.json b/xgen/specs/ui/textarea.variants.json
new file mode 100644
index 0000000..04a33c5
--- /dev/null
+++ b/xgen/specs/ui/textarea.variants.json
@@ -0,0 +1,24 @@
+{
+  "id": "ui.textarea",
+  "base": "w-full min-w-0 bg-background text-foreground inset-ring inset-ring-input outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:inset-ring-ring rounded",
+  "keys": [
+    "size",
+    "variant"
+  ],
+  "defaults": {
+    "size": "default",
+    "variant": "default"
+  },
+  "byKey": {
+    "size": {
+      "sm": "min-h-16 px-3 py-2 text-base md:text-sm",
+      "default": "min-h-20 px-3 py-2 text-base md:text-sm",
+      "lg": "min-h-24 px-4 py-3 text-base"
+    },
+    "variant": {
+      "default": "",
+      "ghost": "bg-muted inset-ring-transparent"
+    }
+  },
+  "compound": []
+}
diff --git a/xgen/specs/ui/themetoggle.json b/xgen/specs/ui/themetoggle.json
new file mode 100644
index 0000000..cb929b5
--- /dev/null
+++ b/xgen/specs/ui/themetoggle.json
@@ -0,0 +1,479 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.themetoggle",
+  "tier": "brick",
+  "dir": "themetoggle",
+  "docs": "ThemeToggle switches between light and dark color schemes (button with aria-pressed). Behavior: data-ui8kit=\"theme-toggle\" in behaviors/ui8kit.js.",
+  "variants": {
+    "themetoggle": "themetoggle.variants.json"
+  },
+  "parts": [
+    {
+      "name": "ThemeToggle",
+      "docs": "ThemeToggle renders a button with Lucide sun/moon icons; aria-pressed reflects dark mode.",
+      "recipeId": "themetoggle",
+      "classes": {
+        "recipe": {
+          "variant": "Variant",
+          "size": "Size"
+        }
+      },
+      "props": [
+        {
+          "name": "Variant",
+          "type": "string",
+          "cva": true,
+          "docs": "default, ghost, contrast (on primary surfaces), current (inherits text color)"
+        },
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sm, default, lg"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "ID",
+          "type": "string",
+          "cva": false,
+          "passthrough": true
+        },
+        {
+          "name": "AriaLabel",
+          "type": "string",
+          "cva": false,
+          "docs": "accessible name (default: Dark mode)"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "static",
+          "tag": "button"
+        },
+        "attrs": [
+          {
+            "kind": "static",
+            "name": "type",
+            "value": "button"
+          },
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "expr",
+            "name": "id",
+            "expr": {
+              "kind": "prop",
+              "name": "ID"
+            }
+          },
+          {
+            "kind": "static",
+            "name": "data-ui8kit",
+            "value": "theme-toggle"
+          },
+          {
+            "kind": "expr",
+            "name": "aria-label",
+            "expr": {
+              "kind": "defaultIfEmpty",
+              "expr": {
+                "kind": "prop",
+                "name": "AriaLabel"
+              },
+              "fallback": "Dark mode"
+            }
+          },
+          {
+            "kind": "static",
+            "name": "aria-pressed",
+            "value": "false"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "svg"
+            },
+            "attrs": [
+              {
+                "kind": "static",
+                "name": "class",
+                "value": "hidden size-5 dark:block"
+              },
+              {
+                "kind": "static",
+                "name": "xmlns",
+                "value": "http://www.w3.org/2000/svg"
+              },
+              {
+                "kind": "static",
+                "name": "viewBox",
+                "value": "0 0 24 24"
+              },
+              {
+                "kind": "static",
+                "name": "fill",
+                "value": "none"
+              },
+              {
+                "kind": "static",
+                "name": "stroke",
+                "value": "currentColor"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-width",
+                "value": "2"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linecap",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linejoin",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "aria-hidden",
+                "value": "true"
+              }
+            ],
+            "children": [
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "circle"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "cx",
+                    "value": "12"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "cy",
+                    "value": "12"
+                  },
+                  {
+                    "kind": "static",
+                    "name": "r",
+                    "value": "4"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "M12 2v2"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "M12 20v2"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "m4.93 4.93 1.41 1.41"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "m17.66 17.66 1.41 1.41"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "M2 12h2"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "M20 12h2"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "m6.34 17.66-1.41 1.41"
+                  }
+                ],
+                "children": []
+              },
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "m19.07 4.93-1.41 1.41"
+                  }
+                ],
+                "children": []
+              }
+            ]
+          },
+          {
+            "kind": "element",
+            "tag": {
+              "kind": "static",
+              "tag": "svg"
+            },
+            "attrs": [
+              {
+                "kind": "static",
+                "name": "class",
+                "value": "block size-5 dark:hidden"
+              },
+              {
+                "kind": "static",
+                "name": "xmlns",
+                "value": "http://www.w3.org/2000/svg"
+              },
+              {
+                "kind": "static",
+                "name": "viewBox",
+                "value": "0 0 24 24"
+              },
+              {
+                "kind": "static",
+                "name": "fill",
+                "value": "none"
+              },
+              {
+                "kind": "static",
+                "name": "stroke",
+                "value": "currentColor"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-width",
+                "value": "2"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linecap",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "stroke-linejoin",
+                "value": "round"
+              },
+              {
+                "kind": "static",
+                "name": "aria-hidden",
+                "value": "true"
+              }
+            ],
+            "children": [
+              {
+                "kind": "element",
+                "tag": {
+                  "kind": "static",
+                  "tag": "path"
+                },
+                "attrs": [
+                  {
+                    "kind": "static",
+                    "name": "d",
+                    "value": "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"
+                  }
+                ],
+                "children": []
+              }
+            ]
+          }
+        ]
+      },
+      "slots": [],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "button"
+        ],
+        "roles": [],
+        "aria": [
+          {
+            "name": "aria-hidden",
+            "kind": "static",
+            "value": "true"
+          },
+          {
+            "name": "aria-label",
+            "kind": "expr"
+          },
+          {
+            "name": "aria-pressed",
+            "kind": "static",
+            "value": "false"
+          }
+        ],
+        "keyboard": []
+      },
+      "data": [
+        {
+          "name": "data-ui8kit",
+          "kind": "static",
+          "value": "theme-toggle"
+        }
+      ],
+      "tokens": [
+        "--accent",
+        "--foreground",
+        "--muted",
+        "--primary-foreground",
+        "--ring"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "variant.default",
+      "props": {
+        "Variant": "default",
+        "Size": "default"
+      }
+    },
+    {
+      "id": "variant.ghost",
+      "props": {
+        "Variant": "ghost",
+        "Size": "default"
+      }
+    },
+    {
+      "id": "variant.contrast",
+      "props": {
+        "Variant": "contrast",
+        "Size": "default"
+      }
+    },
+    {
+      "id": "variant.current",
+      "props": {
+        "Variant": "current",
+        "Size": "default"
+      }
+    },
+    {
+      "id": "size.sm",
+      "props": {
+        "Variant": "default",
+        "Size": "sm"
+      }
+    },
+    {
+      "id": "size.lg",
+      "props": {
+        "Variant": "default",
+        "Size": "lg"
+      }
+    },
+    {
+      "id": "label.custom",
+      "props": {
+        "AriaLabel": "Toggle theme",
+        "ID": "theme"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/themetoggle.variants.json b/xgen/specs/ui/themetoggle.variants.json
new file mode 100644
index 0000000..fe5aadc
--- /dev/null
+++ b/xgen/specs/ui/themetoggle.variants.json
@@ -0,0 +1,25 @@
+{
+  "id": "ui.themetoggle",
+  "base": "inline-flex shrink-0 cursor-pointer items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "keys": [
+    "variant",
+    "size"
+  ],
+  "defaults": {
+    "variant": "default",
+    "size": "default"
+  },
+  "byKey": {
+    "variant": {
+      "default": "bg-muted text-foreground hover:bg-accent",
+      "ghost": "bg-transparent text-foreground hover:bg-muted",
+      "contrast": "bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/20",
+      "current": "bg-transparent text-current hover:bg-current/10"
+    },
+    "size": {
+      "sm": "size-8",
+      "default": "size-10",
+      "lg": "size-12"
+    }
+  }
+}
diff --git a/xgen/specs/ui/title.json b/xgen/specs/ui/title.json
new file mode 100644
index 0000000..6e69c0f
--- /dev/null
+++ b/xgen/specs/ui/title.json
@@ -0,0 +1,138 @@
+{
+  "$schema": "../../schema/schemas/spec.schema.json",
+  "specVersion": 1,
+  "id": "ui.title",
+  "tier": "brick",
+  "dir": "title",
+  "docs": "Title renders a heading (h1–h6) from As (1–6). Defaults to h2 when As is 0\nor out of range.",
+  "variants": {
+    "title": "title.variants.json"
+  },
+  "parts": [
+    {
+      "name": "Title",
+      "docs": "Title renders the resolved heading element.",
+      "recipeId": "title",
+      "asChild": true,
+      "classes": {
+        "recipe": {
+          "size": "Size",
+          "weight": "Weight"
+        }
+      },
+      "props": [
+        {
+          "name": "Size",
+          "type": "string",
+          "cva": true,
+          "docs": "sets size"
+        },
+        {
+          "name": "Weight",
+          "type": "string",
+          "cva": true,
+          "docs": "sets weight"
+        },
+        {
+          "name": "Class",
+          "type": "string",
+          "cva": false,
+          "docs": "adds Tailwind utilities"
+        },
+        {
+          "name": "As",
+          "type": "int",
+          "cva": false,
+          "enumValues": [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6"
+          ],
+          "goType": "uiutils.HeadingLevel",
+          "docs": "maps to h1–h6; 0 and 2 default to h2"
+        },
+        {
+          "name": "Attrs",
+          "type": "attrs",
+          "cva": false
+        },
+        {
+          "name": "Children",
+          "type": "children",
+          "cva": false
+        }
+      ],
+      "render": {
+        "kind": "element",
+        "tag": {
+          "kind": "heading",
+          "fromProp": "As"
+        },
+        "attrs": [
+          {
+            "kind": "class"
+          },
+          {
+            "kind": "rest"
+          }
+        ],
+        "children": [
+          {
+            "kind": "slot"
+          }
+        ]
+      },
+      "slots": [
+        {
+          "name": "children"
+        }
+      ],
+      "events": [],
+      "a11y": {
+        "roots": [
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6"
+        ],
+        "roles": [],
+        "aria": [],
+        "keyboard": []
+      },
+      "data": [],
+      "tokens": [
+        "--foreground"
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "as.h1",
+      "props": {
+        "As": 1
+      }
+    },
+    {
+      "id": "as.h2",
+      "props": {
+        "As": 2
+      }
+    },
+    {
+      "id": "as.h3",
+      "props": {
+        "As": 3,
+        "Class": "text-lg"
+      }
+    }
+  ],
+  "portable": {
+    "svelte": true,
+    "react": true
+  }
+}
diff --git a/xgen/specs/ui/title.variants.json b/xgen/specs/ui/title.variants.json
new file mode 100644
index 0000000..0dc0004
--- /dev/null
+++ b/xgen/specs/ui/title.variants.json
@@ -0,0 +1,32 @@
+{
+  "id": "ui.title",
+  "base": "text-foreground",
+  "keys": [
+    "size",
+    "weight"
+  ],
+  "defaults": {
+    "size": "inherit",
+    "weight": "semibold"
+  },
+  "byKey": {
+    "size": {
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "base": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "inherit": ""
+    },
+    "weight": {
+      "regular": "font-normal",
+      "medium": "font-medium",
+      "semibold": "font-semibold",
+      "bold": "font-bold"
+    }
+  }
+}
diff --git a/xgen/tsconfig.json b/xgen/tsconfig.json
new file mode 100644
index 0000000..8a20642
--- /dev/null
+++ b/xgen/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": { "noEmit": true, "allowImportingTsExtensions": true, "types": ["bun"], "skipLibCheck": true },
+  "include": ["**/*.ts"],
+  "exclude": ["**/assets", "**/node_modules", "specs", "docs", "content", "fixtures", "schema/schemas"]
+}